Merge branch 'feat/room-navigation-labels' into feat/blobbi-profile-progression-foundation

Replace localStorage with an in-memory session store. Kind 11125
content JSON is now the ONLY persistent source of truth for daily
missions.

Architecture:
- On page load / account switch, useDailyMissions hydrates from
  profile.content.dailyMissions (parsed from the kind 11125 event)
- During the session, progress/rerolls update an in-memory Map
- Claims persist to kind 11125 via updateDailyMissionsContent()
- On page refresh the Map is empty → re-hydrates from kind 11125
- Unclaimed progress is lost on refresh (intentional tradeoff vs
  cross-account leakage)

What changed:
- daily-missions.ts: replaced localStorage helpers with in-memory
  Map<pubkey, DailyMissionsState> (sessionStore). readDailyMissionsState
  and writeDailyMissionsState now operate on the Map, not localStorage.
  Added clearDailyMissionsState. Removed getDailyMissionsStorageKey.
- useDailyMissions.ts: accepts persistedDailyMissions option (from
  profile.content.dailyMissions). Hydrates from kind 11125 when the
  session store is empty. Uses persistedMissionToMission() (previously
  defined but never called).
- useClaimMissionReward.ts: reads from session store instead of
  localStorage. Still persists to kind 11125 on claim.
- useRerollMission.ts: reads/writes session store only.
- daily-mission-tracker.ts: reads/writes session store only. Removed
  ensureCurrentState (no longer creates state — the hook handles init).
- BlobbiPage.tsx: passes profile?.content.dailyMissions to useDailyMissions
- BlobbiMissionsModal.tsx: passes profile?.content.dailyMissions to
  useDailyMissions

localStorage usage for daily missions: ZERO
- No localStorage.getItem calls for blobbi:daily-missions
- No localStorage.setItem calls for blobbi:daily-missions
- No blobbi:daily-missions key referenced anywhere in the codebase

Remaining risks:
- Unclaimed progress (feed counts, rerolls) is lost on page refresh
  since only claims persist to kind 11125. A future enhancement could
  persist intermediate state on a debounce, but this is out of scope
  for the foundation phase.

.agents/skills/lockdown-mode/SKILL.md

@@ -0,0 +1,110 @@
+---
+name: lockdown-mode
+description: Apple Lockdown Mode restrictions and their impact on web APIs inside WKWebView/Safari/WebView. Reference when debugging or building features for lockdown-enabled devices.
+---
+
+# Apple Lockdown Mode
+
+Apple's Lockdown Mode is an opt-in security hardening profile that disables or restricts many web platform APIs inside Safari and WKWebView. Since this app ships inside a Capacitor WKWebView shell, **every restriction that applies to Safari also applies to our app**.
+
+## Platform Availability
+
+Lockdown Mode is available on:
+
+- **iOS 16** or later (iPhone)
+- **iPadOS 16** or later (iPad)
+- **watchOS 10** or later (Apple Watch)
+- **macOS Ventura** or later (Mac)
+
+Additional protections are available starting in iOS 17, iPadOS 17, watchOS 10, and macOS Sonoma.
+
+For full details, see [About Lockdown Mode](https://support.apple.com/en-us/105120) on Apple Support.
+
+## Testing Baseline
+
+This document is based on testing against **iOS 18.7 / Safari 26.4** on an iPhone with Lockdown Mode enabled (April 2026). The web API restrictions documented below apply to Safari and WKWebView across all supported platforms (iOS, iPadOS, and macOS).
+
+## Blocked APIs
+
+These APIs are **completely unavailable** (return `undefined`, `null`, or throw) when Lockdown Mode is active.
+
+| API | Impact | Notes |
+|-----|--------|-------|
+| **IndexedDB** | Critical | `indexedDB` global is missing entirely. Any library that relies on IndexedDB for storage will fail (Dexie, idb, localForage with IndexedDB driver, etc.). |
+| **Service Workers** | High | `navigator.serviceWorker` is absent. No offline caching, no background sync, no push notifications via SW. |
+| **Cache API** | High | `caches` global is absent. Often used alongside Service Workers for offline strategies. |
+| **WebAssembly** | High | `WebAssembly` global is `undefined`. Libraries compiled to WASM (e.g. libsodium-wrappers, secp256k1-wasm, SQLite WASM) will not load. |
+| **Web Locks** | High | `navigator.locks` is absent. Cross-tab coordination patterns that depend on this will break silently. |
+| **WebRTC** | High | `RTCPeerConnection` is absent. No peer-to-peer audio/video/data channels. |
+| **WebGL / WebGL2** | Medium | All canvas `getContext('webgl'*)` calls return `null`. GPU-accelerated rendering, maps (Mapbox GL, deck.gl), and 3D are broken. |
+| **FileReader** | Medium | `FileReader` constructor is absent. Cannot read `Blob`/`File` objects client-side (e.g. image preview before upload). Use the `File` constructor + `URL.createObjectURL()` as a workaround for previews. |
+| **SharedArrayBuffer** | Medium | `SharedArrayBuffer` is `undefined`. May also require COOP/COEP headers on non-lockdown browsers, so this is often already unavailable. |
+| **Speech Synthesis** | Low | `window.speechSynthesis` is absent. Text-to-speech features won't work. |
+| **Notifications API** | Low | `Notification` is absent. Web push permission prompts won't appear. (Capacitor local notifications via the native plugin are unaffected.) |
+| **WebCodecs** | Low | `VideoDecoder` / `VideoEncoder` are absent (`AudioDecoder` remains). Low-level media processing is unavailable. |
+| **Gamepad API** | Low | `navigator.getGamepads` is absent. |
+| **Web Share API** | Low | `navigator.share` is absent. Use Capacitor's `@capacitor/share` plugin instead -- the native share sheet still works. |
+
+## Available APIs
+
+These APIs **still work** under Lockdown Mode and can be relied on.
+
+| API | Notes |
+|-----|-------|
+| **File constructor** | `new File(...)` works. You can create File/Blob objects. |
+| **FontFace API** | Dynamic font loading via `new FontFace()` succeeds. Remote font fetches may fail with a network error (data URIs rejected). |
+| **JIT compilation** | JavaScript JIT appears active (~110ms for 1M iterations). Performance is not interpreter-level degraded. |
+| **PDF viewer** | `navigator.pdfViewerEnabled` is `true`. Inline `<embed type="application/pdf">` works. |
+| **Cookies** | `navigator.cookieEnabled` is `true`. |
+| **Credential Management** | `navigator.credentials` is available. |
+| **localStorage / sessionStorage** | Standard Web Storage APIs remain functional. |
+
+## Implications for This App
+
+### Storage
+
+- **localStorage works** -- our primary client-side storage (app config, relay lists, etc.) is unaffected.
+- **IndexedDB is gone** -- if any dependency silently uses IndexedDB (e.g. some Nostr caching layers, TanStack Query persisters), it will fail. Ensure all storage paths fall back to localStorage or in-memory.
+
+### Cryptography
+
+- **WebAssembly is blocked** -- any WASM-based crypto libraries (secp256k1 compiled to WASM, libsodium WASM builds) will not load. Use pure-JS implementations (e.g. `@noble/secp256k1`, `@noble/hashes`) which are already what nostr-tools uses.
+- **WebCrypto (`crypto.subtle`)** -- not listed as blocked in testing. The SubtleCrypto API should still be available for NIP-44 encryption via the standard Web Crypto path.
+
+### Media & Rendering
+
+- **WebGL is gone** -- map libraries that require WebGL (Mapbox GL JS, Google Maps WebGL renderer) will show blank canvases. Use raster tile alternatives or static map images.
+- **FileReader is gone** -- image/file preview workflows that use `FileReader.readAsDataURL()` need a workaround. Use `URL.createObjectURL(file)` directly for `<img src>` previews instead.
+
+### Communication
+
+- **WebRTC is gone** -- any peer-to-peer features (voice/video calls, WebRTC data channels) are completely unavailable.
+- **Fetch / XMLHttpRequest** -- standard network requests appear unaffected. Relay WebSocket connections should work normally.
+
+### Native Plugin Workarounds
+
+Several blocked web APIs have Capacitor plugin equivalents that bypass WKWebView restrictions entirely:
+
+| Blocked Web API | Capacitor Alternative |
+|---|---|
+| Web Share | `@capacitor/share` (already installed) |
+| Notifications | `@capacitor/local-notifications` (already installed) |
+| File downloads | `@capacitor/filesystem` + share (already implemented in `downloadFile.ts`) |
+
+### Detection
+
+The report used a scoring heuristic (7/11 key APIs blocked = 68%) to detect Lockdown Mode. There is no official API to query Lockdown Mode status. Detection relies on probing for the absence of multiple APIs that are specifically disabled by Lockdown Mode but normally present in Safari.
+
+## Raw Diagnostic Report
+
+For exact error messages, navigator properties, weight scores, and per-API diagnostic output, see [ios-report.txt](ios-report.txt).
+
+## Guidance for Feature Decisions
+
+When building new features, consider:
+
+1. **Always provide pure-JS fallbacks** for any crypto or data-processing library that might ship a WASM build.
+2. **Never depend on IndexedDB** as the sole storage mechanism. Always fall back to localStorage or in-memory stores.
+3. **Avoid WebGL-dependent UI** for core functionality. Use it as a progressive enhancement with a CSS/Canvas 2D fallback.
+4. **Use Capacitor plugins** for sharing, notifications, and file operations rather than web APIs -- they work on all native platforms regardless of Lockdown Mode.
+5. **Test on a Lockdown Mode device** when shipping features that touch storage, crypto, or media APIs.

.agents/skills/lockdown-mode/ios-report.txt

@@ -0,0 +1,220 @@
+============================================================
+LOCKDOWN MODE DETECTOR REPORT
+2026-04-06T20:53:36.098Z
+============================================================
+
+VERDICT: Lockdown Mode Likely Active
+7 of 11 key APIs are blocked, consistent with iOS/macOS Lockdown Mode.
+Score: 68% (7/11 key APIs blocked)
+
+============================================================
+API TEST RESULTS (detailed)
+============================================================
+
+------------------------------------------------------------
+[BLOCKED] IndexedDB (weight: 3)
+  Client-side structured storage
+  Result: Can't find variable: indexedDB
+  Diagnostics:
+    uncaught: Can't find variable: indexedDB
+
+------------------------------------------------------------
+[BLOCKED] WebAssembly (weight: 2)
+  Binary instruction execution
+  Result: WebAssembly is undefined
+  Diagnostics:
+    typeof WebAssembly: undefined
+    WebAssembly global does not exist
+
+------------------------------------------------------------
+[BLOCKED] Web Locks API (weight: 3)
+  Cross-tab resource coordination
+  Result: navigator.locks is undefined
+  Diagnostics:
+    typeof navigator.locks: undefined
+    'locks' in navigator: false
+    navigator.locks is falsy
+
+------------------------------------------------------------
+[BLOCKED] Speech Synthesis (weight: 3)
+  Web Speech API (text-to-speech)
+  Result: window.speechSynthesis is undefined
+  Diagnostics:
+    typeof window.speechSynthesis: undefined
+    'speechSynthesis' in window: false
+    typeof SpeechSynthesisUtterance: undefined
+    speechSynthesis is falsy
+
+------------------------------------------------------------
+[BLOCKED] FileReader API (weight: 2)
+  Local file reading interface
+  Result: FileReader is undefined
+  Diagnostics:
+    typeof FileReader: undefined
+    FileReader constructor does not exist
+
+------------------------------------------------------------
+[AVAILABLE] File Constructor (weight: 2)
+  File object creation
+  Result: File created: name=test.txt size=4
+  Diagnostics:
+    typeof File: function
+    calling new File(['test'], 'test.txt', {type:'text/plain'})...
+    succeeded
+    f.name: test.txt
+    f.size: 4
+    f.type: text/plain
+    f instanceof Blob: true
+
+------------------------------------------------------------
+[BLOCKED] WebGL (weight: 2)
+  GPU-accelerated graphics
+  Result: all WebGL contexts returned null
+  Diagnostics:
+    getContext('webgl2'): null
+    getContext('webgl'): null
+    getContext('experimental-webgl'): null
+
+------------------------------------------------------------
+[BLOCKED] WebGL2 (weight: 1)
+  Advanced GPU graphics context
+  Result: getContext('webgl2') returned null
+  Diagnostics:
+    getContext('webgl2'): null
+
+------------------------------------------------------------
+[BLOCKED] Service Worker (weight: 1)
+  Background script registration
+  Result: navigator.serviceWorker not present
+  Diagnostics:
+    'serviceWorker' in navigator: false
+    typeof navigator.serviceWorker: undefined
+
+------------------------------------------------------------
+[BLOCKED] Web Share API (weight: 0)
+  Native sharing interface
+  Result: navigator.share is undefined
+  Diagnostics:
+    typeof navigator.share: undefined
+    typeof navigator.canShare: undefined
+
+------------------------------------------------------------
+[BLOCKED] Gamepad API (weight: 1)
+  Game controller input
+  Result: navigator.getGamepads not present
+  Diagnostics:
+    'getGamepads' in navigator: false
+
+------------------------------------------------------------
+[BLOCKED] WebRTC (weight: 2)
+  Real-time peer communication
+  Result: RTCPeerConnection is undefined
+  Diagnostics:
+    typeof RTCPeerConnection: undefined
+    typeof webkitRTCPeerConnection: undefined
+
+------------------------------------------------------------
+[AVAILABLE] FontFace API (weight: 1)
+  Dynamic font loading
+  Result: status: loaded
+  Diagnostics:
+    typeof FontFace: function
+    new FontFace() succeeded
+    ff.status: unloaded
+    ff.family: test
+    ff.status after load: loaded
+
+------------------------------------------------------------
+[AVAILABLE] Remote Fonts (weight: 2)
+  Loading fonts from network via data URI
+  Result: API works, load rejected:  A network error occurred.
+  Diagnostics:
+    FontFace created with data URI
+    ff.status before load: unloaded
+    caught: DOMException:  A network error occurred.
+
+------------------------------------------------------------
+[AVAILABLE] JIT Compilation (weight: 2)
+  JavaScript JIT optimization heuristic
+  Result: 110.0ms for 1M iterations (JIT likely)
+  Diagnostics:
+    running 1,000,000 iterations of Math.sqrt*Math.sin...
+    elapsed: 110.00ms
+    sum (to prevent dead-code elimination): -681.7597
+    threshold: <150ms suggests JIT active
+    verdict: likely JIT
+
+------------------------------------------------------------
+[BLOCKED] Notifications API (weight: 1)
+  Push notification permission
+  Result: Notification not in window
+  Diagnostics:
+    'Notification' in window: false
+    typeof Notification: undefined
+
+------------------------------------------------------------
+[BLOCKED] WebCodecs (weight: 1)
+  Low-level VideoDecoder API
+  Result: VideoDecoder is undefined
+  Diagnostics:
+    typeof VideoDecoder: undefined
+    typeof VideoEncoder: undefined
+    typeof AudioDecoder: function
+
+------------------------------------------------------------
+[AVAILABLE] PDF Embed (weight: 2)
+  Inline PDF rendering via embed/pdfViewerEnabled
+  Result: pdfViewerEnabled is true
+  Diagnostics:
+    navigator.pdfViewerEnabled: true
+    typeof navigator.pdfViewerEnabled: boolean
+    created and appended <embed type=application/pdf>
+    navigator.mimeTypes['application/pdf']: [object MimeType]
+
+------------------------------------------------------------
+[BLOCKED] SharedArrayBuffer (weight: 1)
+  Shared memory between workers
+  Result: SharedArrayBuffer is undefined
+  Diagnostics:
+    typeof SharedArrayBuffer: undefined
+    requires COOP/COEP headers to be present; may not indicate Lockdown Mode specifically
+
+------------------------------------------------------------
+[BLOCKED] Cache API (weight: 1)
+  Programmatic HTTP cache (CacheStorage)
+  Result: caches not in window
+  Diagnostics:
+    'caches' in window: false
+    typeof caches: undefined
+
+============================================================
+NAVIGATOR INFO
+============================================================
+
+  userAgent:             Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.4 Mobile/15E148 Safari/604.1
+  platform:              iPhone
+  vendor:                Apple Computer, Inc.
+  language:              en-US
+  languages:             en-US
+  cookieEnabled:         true
+  doNotTrack:            null
+  maxTouchPoints:        5
+  hardwareConcurrency:   4
+  deviceMemory:          N/A
+  pdfViewerEnabled:      true
+  webdriver:             false
+  connection:            unavailable
+  mediaDevices:          unavailable
+  storage:               available
+  serviceWorker:         unavailable
+  credentials:           available
+  bluetooth:             unavailable
+  gpu (WebGPU):          unavailable
+  screenWidth:           393
+  screenHeight:          852
+  devicePixelRatio:      3
+  colorDepth:            24
+
+============================================================
+END OF REPORT
+============================================================

.env.example

@@ -2,4 +2,6 @@ VITE_SENTRY_DSN="https://********************************@*****************.exam
 VITE_PLAUSIBLE_DOMAIN="example.tld"
 VITE_PLAUSIBLE_ENDPOINT="https://plausible.example.tld/api/event"
 # Hex pubkey of the nostr-push server (found in nostr-push startup logs as "worker_pubkey")
-VITE_NOSTR_PUSH_PUBKEY=""
+VITE_NOSTR_PUSH_PUBKEY=""
+# Set to "*" to allow any host in the Vite dev server (eg. when proxying through a custom domain)
+# ALLOWED_HOSTS="*"

.gitlab-ci.yml

@@ -54,10 +54,25 @@ deploy-nsite:
       --relays "wss://relay.ditto.pub,wss://relay.nsite.lol,wss://relay.dreamith.to,wss://relay.primal.net"
       --servers "https://blossom.primal.net,https://blossom.ditto.pub,https://blossom.dreamith.to"
       --fallback "/index.html"
-      --publish-server-list
       --use-fallback-relays
       --use-fallback-servers
 
+build-web:
+  stage: build
+  timeout: 10 minutes
+  needs: []
+  rules:
+    - if: $CI_COMMIT_TAG
+      when: never
+    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH
+  script:
+    - npm ci
+    - npm run build
+    - cp dist/index.html dist/404.html
+  artifacts:
+    paths:
+      - dist/
+
 build-apk:
   stage: build
   image: eclipse-temurin:21-jdk
@@ -203,6 +218,8 @@ publish-zapstore:
     - if: $CI_COMMIT_TAG =~ /^v\d+\.\d+\.\d+$/
   variables:
     SIGN_WITH: $ZAPSTORE_BUNKER_URL
+    RELAY_URLS: "wss://relay.zapstore.dev,wss://relay.ditto.pub"
+    BLOSSOM_URL: "https://blossom.ditto.pub"
   script:
     - go install github.com/zapstore/zsp@latest
 

AGENTS.md

@@ -699,23 +699,47 @@ The `useCurrentUser` hook should be used to ensure that the user is logged in be
 
 Replaceable (kind 10000-19999) and addressable (kind 30000-39999) events require a read-modify-write cycle: fetch the current event, modify its tags, then publish a new version. **Never read from TanStack Query cache before mutating** -- the cache can be stale from another device or a rapid prior operation, and republishing stale data silently drops the user's data.
 
-Use `fetchFreshEvent()` from `src/lib/fetchFreshEvent.ts` inside every mutation:
+Use `fetchFreshEvent()` from `src/lib/fetchFreshEvent.ts` inside every mutation, and **always pass the fetched event as `prev`** so `useNostrPublish` can preserve `published_at`:
 
 ```typescript
 import { fetchFreshEvent } from '@/lib/fetchFreshEvent';
 
 // Inside a mutation function:
-const freshEvent = await fetchFreshEvent(nostr, {
+const prev = await fetchFreshEvent(nostr, {
   kinds: [10003],
   authors: [user.pubkey],
 });
-const currentTags = freshEvent?.tags ?? [];
+const currentTags = prev?.tags ?? [];
 // ...modify tags...
-await publishEvent({ kind: 10003, content: freshEvent?.content ?? '', tags: newTags });
+await publishEvent({
+  kind: 10003,
+  content: prev?.content ?? '',
+  tags: newTags,
+  prev: prev ?? undefined,
+});
 ```
 
 This applies to all list-type hooks (bookmarks, pins, interests, follow sets, badges, etc.). See `useFollowActions` and `useMuteList` for complete examples.
 
+#### The `prev` Property on Event Templates
+
+`useNostrPublish` accepts an optional `prev` property on the event template. This is the **previous version** of the event being replaced. The hook uses it to automatically manage the `published_at` tag (NIP-24) for replaceable and addressable events:
+
+- **First publish (no `prev`)**: `published_at` is set equal to `created_at`
+- **Update (`prev` provided)**: `published_at` is preserved from the old event
+- **Old event lacks `published_at`**: nothing is fabricated
+- **Caller already set `published_at` in tags**: left alone
+
+**Convention**: Name the local variable `prev` at the call site (not `freshEvent` or `latestEvent`) so it reads naturally when passed to `publishEvent`:
+
+```typescript
+const prev = await fetchFreshEvent(nostr, { kinds: [3], authors: [user.pubkey] });
+// ...
+await publishEvent({ kind: 3, content: prev?.content ?? '', tags: newTags, prev: prev ?? undefined });
+```
+
+`prev` is stripped from the template before signing — it never appears in the published Nostr event.
+
 ### D-Tag Collision Prevention for Addressable Events
 
 Addressable events (kind 30000-39999) are identified by `pubkey + kind + d-tag`. Publishing an event with the same d-tag as an existing one **silently replaces** it. This is by design for intentional updates (edit flows), but dangerous when creating *new* content with user-derived d-tags (slugs from titles, user-entered identifiers, etc.).

CHANGELOG.md

@@ -1,5 +1,99 @@
 # Changelog
 
+## [2.6.1] - 2026-04-06
+
+### Added
+- Manage your interest tabs (hashtags and locations) from the settings page
+- Edit button on custom profile tabs so you can tweak them without recreating from scratch
+- Follow packs and follow sets now show author info and action headers in the feed
+- Posts now show whether they were created or updated, so you can tell when something's been edited
+
+### Changed
+- Webxdc games and apps run in a more secure sandbox with stricter content policies and private subdomains
+- Nsite previews now use the same secure sandbox as webxdc apps
+- Blobbi items work as instant abilities instead of consumable inventory -- no more fiddly quantity pickers
+
+### Fixed
+- Desktop tab bar no longer overflows when you have lots of tabs -- scroll arrows appear automatically
+- Mobile compose box no longer randomly collapses or becomes unclickable
+- Profile avatar and banner lightbox no longer hides behind the right sidebar
+- Infinite scroll on custom profile tab feeds no longer reloads the same content
+- Reaction emoji are now visible on each row in the interactions modal
+- Missing bottom border on collapsed thread expand button restored
+
+## [2.6.0] - 2026-04-05
+
+### Added
+- Follow links and QR codes -- share a link or scannable code that lets anyone follow you with one tap, complete with your themed profile preview and recent posts
+- Immersive Blobbi hatching ceremony -- crack your egg through cinematic stages with shaking animations, a burst of light, sparkles, typewriter dialog, and a naming moment
+
+### Changed
+- Footer links redesigned as compact icon chips for a cleaner look
+- Custom emoji now render crisp at small sizes with pixel-perfect scaling
+
+### Fixed
+- Custom themes now apply correctly when logging in on a new device
+- Settings and preferences sync reliably across devices
+- Mobile sidebar links no longer clip into the safe area
+- Blobbi page background overlay now appears properly on custom themes
+- Blobbi companion state no longer resets unexpectedly from stale cache data
+- Letter compose picker no longer gets hidden behind the top navigation arc
+
+## [2.5.2] - 2026-04-04
+
+### Added
+- See who voted on each poll option -- tap the vote count to open a voters list with avatar stacks and per-option filter tabs
+- Poll votes now appear as activity cards in feeds and on detail pages
+
+### Fixed
+- Threads and replies load more reliably by following relay and author hints when fetching parent events
+
+## [2.5.1] - 2026-04-03
+
+### Fixed
+- Lightbox now reliably appears above all content, not just when opened from photo galleries
+
+## [2.5.0] - 2026-04-03
+
+### Added
+- Run nsites and web apps directly inside Ditto -- hit the "Run" button on any nsite or app card to preview it in an overlay without leaving your feed
+- File uploads in the poll composer -- attach images and media to your polls
+- Blobbi posts now appear in the homepage feed
+
+### Changed
+- Profile media sidebar fills remaining slots with photos from text posts when there aren't enough dedicated media posts
+- App cards now show banner images and improved layout
+
+### Fixed
+- Lightbox no longer appears behind the right sidebar
+- Compose box corners are properly rounded
+- Clicking buttons or links inside a post card no longer accidentally navigates to the post detail page
+
+## [2.4.1] - 2026-04-02
+
+### Added
+- Rich cards for Zapstore app releases and assets -- see download links, version info, platform badges, and hashes right in your feed
+
+### Fixed
+- First-hatch tour now shows for accounts that were onboarded before the tour existed, so no one misses the hatching moment
+
+## [2.4.0] - 2026-04-02
+
+### Added
+- First-hatch tour: a guided experience for hatching your very first Blobbi egg, with progressive crack animations, an inline card flow, and a reveal moment
+- Customizable bottom bar: rearrange or hide any item in the navigation bar to make Ditto feel like yours
+- Mission surface card in the feed that surfaces your active quests at a glance
+
+### Changed
+- Missions redesigned as a quest board with collapsible cards and a lighter aesthetic
+- "Edit Profile" mission now completes when you update any profile field, not just wall-specific edits
+- Media tab on profiles now shows only photos, videos, and other media -- not plain text posts
+- Blobbi onboarding state now syncs to your profile so it follows you across devices
+
+### Fixed
+- Notification dot no longer reappears after you've already marked notifications as read
+- Dialogs no longer fly up when the mobile keyboard opens
+
 ## [2.3.1] - 2026-04-02
 
 ### Changed

android/app/build.gradle

@@ -14,7 +14,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
-        versionName "2.3.1"
+        versionName "2.6.1"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

ios/App/App.xcodeproj/project.pbxproj

@@ -303,7 +303,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.3.1;
+				MARKETING_VERSION = 2.6.1;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = pub.ditto.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -325,7 +325,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.3.1;
+				MARKETING_VERSION = 2.6.1;
 				PRODUCT_BUNDLE_IDENTIFIER = pub.ditto.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ditto",
-  "version": "2.3.0",
+  "version": "2.6.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ditto",
-      "version": "2.3.0",
+      "version": "2.6.1",
       "dependencies": {
         "@capacitor/app": "^8.0.0",
         "@capacitor/core": "^8.1.0",
@@ -58,8 +58,8 @@
         "@milkdown/prose": "^7.20.0",
         "@milkdown/react": "^7.20.0",
         "@milkdown/utils": "^7.20.0",
-        "@nostrify/nostrify": "^0.51.0",
-        "@nostrify/react": "^0.4.0",
+        "@nostrify/nostrify": "^0.51.1",
+        "@nostrify/react": "^0.4.1",
         "@nostrify/types": "^0.36.9",
         "@plausible-analytics/tracker": "^0.4.4",
         "@radix-ui/react-accordion": "^1.2.0",
@@ -2486,9 +2486,9 @@
       }
     },
     "node_modules/@nostrify/nostrify": {
-      "version": "0.51.0",
-      "resolved": "https://registry.npmjs.org/@nostrify/nostrify/-/nostrify-0.51.0.tgz",
-      "integrity": "sha512-GLka8FHu7o04kpz/NB69JppQy3rbwkadr8Au2fLmYbbB478kkGuthF+U5JS2qKaAI137n1p5BN1eFsCk2JyuXQ==",
+      "version": "0.51.1",
+      "resolved": "https://registry.npmjs.org/@nostrify/nostrify/-/nostrify-0.51.1.tgz",
+      "integrity": "sha512-oPJhUiO1TlV5sGYizqAP4GvLijib34Uwh48wxlFimR/2MoCuSmab4AppcztGPNwxQoTKkJbLJwsSpl42V+WIXA==",
       "dependencies": {
         "@nostrify/types": "0.36.9",
         "@scure/base": "^2.0.0",
@@ -2512,9 +2512,9 @@
       }
     },
     "node_modules/@nostrify/nostrify/node_modules/@types/node": {
-      "version": "24.11.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.11.0.tgz",
-      "integrity": "sha512-fPxQqz4VTgPI/IQ+lj9r0h+fDR66bzoeMGHp8ASee+32OSGIkeASsoZuJixsQoVef1QJbeubcPBxKk22QVoWdw==",
+      "version": "24.12.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.12.2.tgz",
+      "integrity": "sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==",
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.16.0"
@@ -2527,11 +2527,11 @@
       "license": "MIT"
     },
     "node_modules/@nostrify/react": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@nostrify/react/-/react-0.4.0.tgz",
-      "integrity": "sha512-noroI4R2BS3GzEk55NGoWZkrBKDFHtM43HW99dnYdP+ecxtjBY6nYplypouUUkalHfTfGK2lQetLg5DvM2k2+w==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@nostrify/react/-/react-0.4.1.tgz",
+      "integrity": "sha512-2JXxEl4e6FIFhbi96Dwv2knu5qAACYulo1a0oVell/aS8KCWsBTPd1+v0EUra0yqiUA3Q1nVLrk8mx7kQYH/yQ==",
       "dependencies": {
-        "@nostrify/nostrify": "0.51.0",
+        "@nostrify/nostrify": "0.51.1",
         "@nostrify/types": "0.36.9"
       },
       "peerDependencies": {
@@ -5699,7 +5699,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5713,7 +5712,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5727,7 +5725,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5741,7 +5738,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5755,7 +5751,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5769,7 +5764,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5783,7 +5777,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5797,7 +5790,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5811,7 +5803,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5825,7 +5816,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5839,7 +5829,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5853,7 +5842,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5867,7 +5855,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5881,7 +5868,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5895,7 +5881,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5909,7 +5894,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5923,7 +5907,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5937,7 +5920,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5951,7 +5933,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5965,7 +5946,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5979,7 +5959,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5993,7 +5972,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6007,7 +5985,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6021,7 +5998,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6035,7 +6011,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6185,9 +6160,9 @@
       }
     },
     "node_modules/@smithy/is-array-buffer": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-4.2.1.tgz",
-      "integrity": "sha512-Yfu664Qbf1B4IYIsYgKoABt010daZjkaCRvdU/sPnZG6TtHOB0md0RjNdLGzxe5UIdn9js4ftPICzmkRa9RJ4Q==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-4.2.2.tgz",
+      "integrity": "sha512-n6rQ4N8Jj4YTQO3YFrlgZuwKodf4zUFs7EJIWH86pSCWBaAtAGBFfCM7Wx6D2bBJ2xqFNxGBSrUWswT3M0VJow==",
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.6.2"
@@ -6197,13 +6172,13 @@
       }
     },
     "node_modules/@smithy/util-base64": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@smithy/util-base64/-/util-base64-4.3.1.tgz",
-      "integrity": "sha512-BKGuawX4Doq/bI/uEmg+Zyc36rJKWuin3py89PquXBIBqmbnJwBBsmKhdHfNEp0+A4TDgLmT/3MSKZ1SxHcR6w==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-base64/-/util-base64-4.3.2.tgz",
+      "integrity": "sha512-XRH6b0H/5A3SgblmMa5ErXQ2XKhfbQB+Fm/oyLZ2O2kCUrwgg55bU0RekmzAhuwOjA9qdN5VU2BprOvGGUkOOQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/util-buffer-from": "^4.2.1",
-        "@smithy/util-utf8": "^4.2.1",
+        "@smithy/util-buffer-from": "^4.2.2",
+        "@smithy/util-utf8": "^4.2.2",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -6211,12 +6186,12 @@
       }
     },
     "node_modules/@smithy/util-buffer-from": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-4.2.1.tgz",
-      "integrity": "sha512-/swhmt1qTiVkaejlmMPPDgZhEaWb/HWMGRBheaxwuVkusp/z+ErJyQxO6kaXumOciZSWlmq6Z5mNylCd33X7Ig==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-4.2.2.tgz",
+      "integrity": "sha512-FDXD7cvUoFWwN6vtQfEta540Y/YBe5JneK3SoZg9bThSoOAC/eGeYEua6RkBgKjGa/sz6Y+DuBZj3+YEY21y4Q==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/is-array-buffer": "^4.2.1",
+        "@smithy/is-array-buffer": "^4.2.2",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -6224,9 +6199,9 @@
       }
     },
     "node_modules/@smithy/util-hex-encoding": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@smithy/util-hex-encoding/-/util-hex-encoding-4.2.1.tgz",
-      "integrity": "sha512-c1hHtkgAWmE35/50gmdKajgGAKV3ePJ7t6UtEmpfCWJmQE9BQAQPz0URUVI89eSkcDqCtzqllxzG28IQoZPvwA==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-hex-encoding/-/util-hex-encoding-4.2.2.tgz",
+      "integrity": "sha512-Qcz3W5vuHK4sLQdyT93k/rfrUwdJ8/HZ+nMUOyGdpeGA1Wxt65zYwi3oEl9kOM+RswvYq90fzkNDahPS8K0OIg==",
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.6.2"
@@ -6236,12 +6211,12 @@
       }
     },
     "node_modules/@smithy/util-utf8": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-4.2.1.tgz",
-      "integrity": "sha512-DSIwNaWtmzrNQHv8g7DBGR9mulSit65KSj5ymGEIAknmIN8IpbZefEep10LaMG/P/xquwbmJ1h9ectz8z6mV6g==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-4.2.2.tgz",
+      "integrity": "sha512-75MeYpjdWRe8M5E3AW0O4Cx3UadweS+cwdXjwYGBW5h/gxxnbeZ877sLPX/ZJA9GVTlL/qG0dXP29JWFCD1Ayw==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/util-buffer-from": "^4.2.1",
+        "@smithy/util-buffer-from": "^4.2.2",
         "tslib": "^2.6.2"
       },
       "engines": {
@@ -15485,9 +15460,9 @@
       "license": "MIT"
     },
     "node_modules/websocket-ts": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/websocket-ts/-/websocket-ts-2.2.1.tgz",
-      "integrity": "sha512-YKPDfxlK5qOheLZ2bTIiktZO1bpfGdNCPJmTEaPW7G9UXI1GKjDdeacOrsULUS000OPNxDVOyAuKLuIWPqWM0Q==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/websocket-ts/-/websocket-ts-2.3.0.tgz",
+      "integrity": "sha512-DocKMdXx7i8TCBMU+XUKZeUaKwQ7O2NPlxUcgb0poG4RwDrIqBo19mRdW00a1Sm7MSijhIEsgv9UJ0kB/qNy+Q==",
       "license": "MIT"
     },
     "node_modules/whatwg-encoding": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ditto",
   "private": true,
-  "version": "2.3.1",
+  "version": "2.6.1",
   "type": "module",
   "scripts": {
     "dev": "npm i --silent && vite",
@@ -64,8 +64,8 @@
     "@milkdown/prose": "^7.20.0",
     "@milkdown/react": "^7.20.0",
     "@milkdown/utils": "^7.20.0",
-    "@nostrify/nostrify": "^0.51.0",
-    "@nostrify/react": "^0.4.0",
+    "@nostrify/nostrify": "^0.51.1",
+    "@nostrify/react": "^0.4.1",
     "@nostrify/types": "^0.36.9",
     "@plausible-analytics/tracker": "^0.4.4",
     "@radix-ui/react-accordion": "^1.2.0",

public/CHANGELOG.md

@@ -1,5 +1,99 @@
 # Changelog
 
+## [2.6.1] - 2026-04-06
+
+### Added
+- Manage your interest tabs (hashtags and locations) from the settings page
+- Edit button on custom profile tabs so you can tweak them without recreating from scratch
+- Follow packs and follow sets now show author info and action headers in the feed
+- Posts now show whether they were created or updated, so you can tell when something's been edited
+
+### Changed
+- Webxdc games and apps run in a more secure sandbox with stricter content policies and private subdomains
+- Nsite previews now use the same secure sandbox as webxdc apps
+- Blobbi items work as instant abilities instead of consumable inventory -- no more fiddly quantity pickers
+
+### Fixed
+- Desktop tab bar no longer overflows when you have lots of tabs -- scroll arrows appear automatically
+- Mobile compose box no longer randomly collapses or becomes unclickable
+- Profile avatar and banner lightbox no longer hides behind the right sidebar
+- Infinite scroll on custom profile tab feeds no longer reloads the same content
+- Reaction emoji are now visible on each row in the interactions modal
+- Missing bottom border on collapsed thread expand button restored
+
+## [2.6.0] - 2026-04-05
+
+### Added
+- Follow links and QR codes -- share a link or scannable code that lets anyone follow you with one tap, complete with your themed profile preview and recent posts
+- Immersive Blobbi hatching ceremony -- crack your egg through cinematic stages with shaking animations, a burst of light, sparkles, typewriter dialog, and a naming moment
+
+### Changed
+- Footer links redesigned as compact icon chips for a cleaner look
+- Custom emoji now render crisp at small sizes with pixel-perfect scaling
+
+### Fixed
+- Custom themes now apply correctly when logging in on a new device
+- Settings and preferences sync reliably across devices
+- Mobile sidebar links no longer clip into the safe area
+- Blobbi page background overlay now appears properly on custom themes
+- Blobbi companion state no longer resets unexpectedly from stale cache data
+- Letter compose picker no longer gets hidden behind the top navigation arc
+
+## [2.5.2] - 2026-04-04
+
+### Added
+- See who voted on each poll option -- tap the vote count to open a voters list with avatar stacks and per-option filter tabs
+- Poll votes now appear as activity cards in feeds and on detail pages
+
+### Fixed
+- Threads and replies load more reliably by following relay and author hints when fetching parent events
+
+## [2.5.1] - 2026-04-03
+
+### Fixed
+- Lightbox now reliably appears above all content, not just when opened from photo galleries
+
+## [2.5.0] - 2026-04-03
+
+### Added
+- Run nsites and web apps directly inside Ditto -- hit the "Run" button on any nsite or app card to preview it in an overlay without leaving your feed
+- File uploads in the poll composer -- attach images and media to your polls
+- Blobbi posts now appear in the homepage feed
+
+### Changed
+- Profile media sidebar fills remaining slots with photos from text posts when there aren't enough dedicated media posts
+- App cards now show banner images and improved layout
+
+### Fixed
+- Lightbox no longer appears behind the right sidebar
+- Compose box corners are properly rounded
+- Clicking buttons or links inside a post card no longer accidentally navigates to the post detail page
+
+## [2.4.1] - 2026-04-02
+
+### Added
+- Rich cards for Zapstore app releases and assets -- see download links, version info, platform badges, and hashes right in your feed
+
+### Fixed
+- First-hatch tour now shows for accounts that were onboarded before the tour existed, so no one misses the hatching moment
+
+## [2.4.0] - 2026-04-02
+
+### Added
+- First-hatch tour: a guided experience for hatching your very first Blobbi egg, with progressive crack animations, an inline card flow, and a reveal moment
+- Customizable bottom bar: rearrange or hide any item in the navigation bar to make Ditto feel like yours
+- Mission surface card in the feed that surfaces your active quests at a glance
+
+### Changed
+- Missions redesigned as a quest board with collapsible cards and a lighter aesthetic
+- "Edit Profile" mission now completes when you update any profile field, not just wall-specific edits
+- Media tab on profiles now shows only photos, videos, and other media -- not plain text posts
+- Blobbi onboarding state now syncs to your profile so it follows you across devices
+
+### Fixed
+- Notification dot no longer reappears after you've already marked notifications as read
+- Dialogs no longer fly up when the mobile keyboard opens
+
 ## [2.3.1] - 2026-04-02
 
 ### Changed

src/App.tsx

@@ -51,6 +51,7 @@ const hardcodedConfig: AppConfig = {
   appName: "Ditto",
   appId: "ditto",
   homePage: "feed",
+  client: "naddr1qvzqqqru7cpzq7q6z5ns2hm5c8msyv83qwzxpxe52j8c4d4q5m92wsp9sflelkh9qqzkg6t5w3hswjl4yp",
   magicMouse: false,
   theme: "system",
   autoShareTheme: true,
@@ -123,11 +124,11 @@ const hardcodedConfig: AppConfig = {
     "feed",
     "notifications",
     "search",
-    "themes",
-    "letters",
-    "badges",
     "blobbi",
-    "theme",
+    "badges",
+    "emojis",
+    "letters",
+    "themes",
     "settings",
     "help",
   ],

src/AppRouter.tsx

@@ -77,6 +77,7 @@ const WalletSettingsPage = lazy(() => import("./pages/WalletSettingsPage").then(
 const WebxdcFeedPage = lazy(() => import("./pages/WebxdcFeedPage").then(m => ({ default: m.WebxdcFeedPage })));
 const WikipediaPage = lazy(() => import("./pages/WikipediaPage").then(m => ({ default: m.WikipediaPage })));
 const WorldPage = lazy(() => import("./pages/WorldPage").then(m => ({ default: m.WorldPage })));
+const FollowPage = lazy(() => import("./pages/FollowPage").then(m => ({ default: m.FollowPage })));
 const RemoteLoginSuccessPage = lazy(() => import("./pages/RemoteLoginSuccessPage").then(m => ({ default: m.RemoteLoginSuccessPage })));
 
 const pollsDef = getExtraKindDef("polls")!;
@@ -151,6 +152,9 @@ export function AppRouter() {
           </Suspense>
         </BlobbiActionsProvider>
         <Routes>
+          {/* Auto-follow deep link: fullscreen immersive (no sidebars/nav) */}
+          <Route path="/follow/:npub" element={<FollowPage />} />
+
           {/* All routes share the persistent MainLayout (sidebar + nav) */}
           <Route element={<MainLayout />}>
             <Route path="/" element={<HomePage />} />

src/blobbi/actions/components/BlobbiActionInventoryModal.tsx

@@ -1,19 +1,16 @@
 // src/blobbi/actions/components/BlobbiActionInventoryModal.tsx
 
-import { useMemo, useState } from 'react';
-import { Loader2, ShoppingBag, Minus, Plus, X } from 'lucide-react';
+import { useMemo } from 'react';
+import { Loader2, X } from 'lucide-react';
 
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogFooter,
   DialogClose,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
 
 import type { BlobbiCompanion, BlobbonautProfile } from '@/blobbi/core/lib/blobbi';
 import { cn } from '@/lib/utils';
@@ -37,8 +34,8 @@ interface BlobbiActionInventoryModalProps {
   action: InventoryAction;
   companion: BlobbiCompanion;
   profile: BlobbonautProfile | null;
-  /** Called when user confirms using item(s). Now accepts quantity. */
-  onUseItem: (itemId: string, quantity: number) => void;
+  /** Called when user taps Use on an item. Always uses once. */
+  onUseItem: (itemId: string) => void;
   onOpenShop: () => void;
   isUsingItem: boolean;
   usingItemId: string | null;
@@ -49,24 +46,19 @@ export function BlobbiActionInventoryModal({
   onOpenChange,
   action,
   companion,
-  profile,
+  profile: _profile,
   onUseItem,
-  onOpenShop,
+  onOpenShop: _onOpenShop,
   isUsingItem,
   usingItemId,
 }: BlobbiActionInventoryModalProps) {
   const actionMeta = ACTION_METADATA[action];
-  
-  // State for confirmation dialog
-  const [selectedItem, setSelectedItem] = useState<ResolvedInventoryItem | null>(null);
-  const [quantity, setQuantity] = useState(1);
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
 
-  // Filter inventory by action type, respecting egg-compatible effects
+  // Get all available items for this action from the catalog (not inventory).
+  // Items are abilities/tools — no ownership required.
   const availableItems = useMemo(() => {
-    if (!profile) return [];
-    return filterInventoryByAction(profile.storage, action, { stage: companion.stage });
-  }, [profile, action, companion.stage]);
+    return filterInventoryByAction([], action, { stage: companion.stage });
+  }, [action, companion.stage]);
 
   // Check stage restrictions for this specific action
   const canUse = canUseAction(companion, action);
@@ -74,46 +66,9 @@ export function BlobbiActionInventoryModal({
 
   const isEmpty = availableItems.length === 0;
 
-  const handleSelectItem = (item: ResolvedInventoryItem) => {
+  const handleUseItem = (item: ResolvedInventoryItem) => {
     if (isUsingItem) return;
-    setSelectedItem(item);
-    setQuantity(1);
-    setShowConfirmDialog(true);
-  };
-
-  const handleConfirmUse = () => {
-    if (!selectedItem || isUsingItem) return;
-    onUseItem(selectedItem.itemId, quantity);
-    // Reset after starting use
-    setShowConfirmDialog(false);
-    setSelectedItem(null);
-    setQuantity(1);
-  };
-
-  const handleCloseConfirmDialog = (isOpen: boolean) => {
-    if (!isOpen) {
-      setShowConfirmDialog(false);
-      setSelectedItem(null);
-      setQuantity(1);
-    }
-  };
-
-  const handleOpenShop = () => {
-    onOpenChange(false);
-    onOpenShop();
-  };
-
-  // Quantity controls
-  const maxQuantity = selectedItem?.quantity ?? 1;
-  const handleIncrease = () => setQuantity(q => Math.min(q + 1, maxQuantity));
-  const handleDecrease = () => setQuantity(q => Math.max(q - 1, 1));
-  const handleQuantityInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-    if (isNaN(value) || value < 1) {
-      setQuantity(1);
-    } else {
-      setQuantity(Math.min(value, maxQuantity));
-    }
+    onUseItem(item.itemId);
   };
 
   return (
@@ -161,14 +116,10 @@ export function BlobbiActionInventoryModal({
               <div className="size-16 rounded-2xl bg-muted/50 flex items-center justify-center mb-4">
                 <span className="text-3xl">{actionMeta.icon}</span>
               </div>
-              <h3 className="text-lg font-semibold mb-2">No Items</h3>
-              <p className="text-sm text-muted-foreground max-w-sm mb-4">
-                You don't have any items for this action. Visit the shop to get some!
+              <h3 className="text-lg font-semibold mb-2">No Items Available</h3>
+              <p className="text-sm text-muted-foreground max-w-sm">
+                No items are available for this action at your Blobbi's current stage.
               </p>
-              <Button onClick={handleOpenShop} className="gap-2">
-                <ShoppingBag className="size-4" />
-                Open Shop
-              </Button>
             </div>
           )}
 
@@ -181,7 +132,7 @@ export function BlobbiActionInventoryModal({
                   item={item}
                   companion={companion}
                   action={action}
-                  onUse={() => handleSelectItem(item)}
+                  onUse={() => handleUseItem(item)}
                   isUsing={isUsingItem && usingItemId === item.itemId}
                   disabled={isUsingItem}
                 />
@@ -190,24 +141,6 @@ export function BlobbiActionInventoryModal({
           )}
         </div>
       </DialogContent>
-
-      {/* Confirmation Dialog with Quantity Selector */}
-      {selectedItem && (
-        <BlobbiUseItemConfirmDialog
-          open={showConfirmDialog}
-          onOpenChange={handleCloseConfirmDialog}
-          item={selectedItem}
-          companion={companion}
-          action={action}
-          quantity={quantity}
-          maxQuantity={maxQuantity}
-          onIncrease={handleIncrease}
-          onDecrease={handleDecrease}
-          onQuantityChange={handleQuantityInput}
-          onConfirm={handleConfirmUse}
-          isUsing={isUsingItem}
-        />
-      )}
     </Dialog>
   );
 }
@@ -238,15 +171,12 @@ function BlobbiInventoryUseRow({
   // Preview stat changes - handle egg-specific preview for medicine and clean
   const { normalStatChanges, eggStatChanges } = useMemo(() => {
     if (isEgg && isMedicine) {
-      // For eggs using medicine, show health preview
-      // Eggs use the 3-stat model: health, hygiene, happiness
       return {
         normalStatChanges: [],
         eggStatChanges: previewMedicineForEgg(companion.stats.health, item.effect),
       };
     }
     if (isEgg && isClean) {
-      // For eggs using hygiene items, show hygiene (and possibly happiness) preview
       return {
         normalStatChanges: [],
         eggStatChanges: previewCleanForEgg(
@@ -255,7 +185,6 @@ function BlobbiInventoryUseRow({
         ),
       };
     }
-    // Normal stats preview
     return {
       normalStatChanges: previewStatChanges(companion.stats, item.effect),
       eggStatChanges: [] as EggStatPreview[],
@@ -280,16 +209,12 @@ function BlobbiInventoryUseRow({
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 mb-0.5 sm:mb-1">
             <h3 className="font-semibold text-sm sm:text-base truncate">{item.name}</h3>
-            <Badge variant="secondary" className="text-xs shrink-0">
-              x{item.quantity}
-            </Badge>
           </div>
 
           {/* Effect Preview - shown inline on desktop */}
           <div className="hidden sm:block">
             {hasChanges && (
               <div className="flex flex-wrap gap-x-3 gap-y-1">
-                {/* Normal stat changes */}
                 {normalStatChanges.map(({ stat, delta }) => (
                   <span key={stat} className="text-xs">
                     <span
@@ -308,7 +233,6 @@ function BlobbiInventoryUseRow({
                     </span>
                   </span>
                 ))}
-                {/* Egg stat changes (health for medicine) */}
                 {eggStatChanges.map(({ stat, delta }) => (
                   <span key={stat} className="text-xs">
                     <span
@@ -350,7 +274,6 @@ function BlobbiInventoryUseRow({
       {/* Effect Preview - shown below on mobile */}
       {hasChanges && (
         <div className="sm:hidden flex flex-wrap gap-x-3 gap-y-1 pl-13">
-          {/* Normal stat changes */}
           {normalStatChanges.map(({ stat, delta }) => (
             <span key={stat} className="text-xs">
               <span
@@ -369,7 +292,6 @@ function BlobbiInventoryUseRow({
               </span>
             </span>
           ))}
-          {/* Egg stat changes (health for medicine) */}
           {eggStatChanges.map(({ stat, delta }) => (
             <span key={stat} className="text-xs">
               <span
@@ -393,222 +315,3 @@ function BlobbiInventoryUseRow({
     </div>
   );
 }
-
-// ─── Use Item Confirmation Dialog ─────────────────────────────────────────────
-
-interface BlobbiUseItemConfirmDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  item: ResolvedInventoryItem;
-  companion: BlobbiCompanion;
-  action: InventoryAction;
-  quantity: number;
-  maxQuantity: number;
-  onIncrease: () => void;
-  onDecrease: () => void;
-  onQuantityChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onConfirm: () => void;
-  isUsing: boolean;
-}
-
-function BlobbiUseItemConfirmDialog({
-  open,
-  onOpenChange,
-  item,
-  companion,
-  action,
-  quantity,
-  maxQuantity,
-  onIncrease,
-  onDecrease,
-  onQuantityChange,
-  onConfirm,
-  isUsing,
-}: BlobbiUseItemConfirmDialogProps) {
-  const actionMeta = ACTION_METADATA[action];
-  const isEgg = companion.stage === 'egg';
-  const isMedicine = action === 'medicine';
-  const isClean = action === 'clean';
-
-  // Preview stat changes for the selected quantity
-  const statPreview = useMemo(() => {
-    if (!item.effect) return { normalChanges: [], eggChanges: [] };
-
-    if (isEgg && isMedicine) {
-      // Calculate health change for N items
-      const healthDelta = item.effect.health ?? 0;
-      let currentHealth = companion.stats.health ?? 0;
-      for (let i = 0; i < quantity; i++) {
-        currentHealth = Math.max(0, Math.min(100, currentHealth + healthDelta));
-      }
-      const totalDelta = currentHealth - (companion.stats.health ?? 0);
-      return {
-        normalChanges: [],
-        eggChanges: totalDelta !== 0 ? [{ stat: 'health' as const, delta: totalDelta }] : [],
-      };
-    }
-
-    if (isEgg && isClean) {
-      // Calculate hygiene and happiness changes for N items
-      const hygieneDelta = item.effect.hygiene ?? 0;
-      const happinessDelta = item.effect.happiness ?? 0;
-      let currentHygiene = companion.stats.hygiene ?? 0;
-      let currentHappiness = companion.stats.happiness ?? 0;
-      for (let i = 0; i < quantity; i++) {
-        currentHygiene = Math.max(0, Math.min(100, currentHygiene + hygieneDelta));
-        currentHappiness = Math.max(0, Math.min(100, currentHappiness + happinessDelta));
-      }
-      const changes: Array<{ stat: 'health' | 'hygiene' | 'happiness'; delta: number }> = [];
-      const totalHygieneDelta = currentHygiene - (companion.stats.hygiene ?? 0);
-      const totalHappinessDelta = currentHappiness - (companion.stats.happiness ?? 0);
-      if (totalHygieneDelta !== 0) changes.push({ stat: 'hygiene', delta: totalHygieneDelta });
-      if (totalHappinessDelta !== 0) changes.push({ stat: 'happiness', delta: totalHappinessDelta });
-      return { normalChanges: [], eggChanges: changes };
-    }
-
-    // Normal stats preview - simulate N applications
-    const statKeys = ['hunger', 'happiness', 'energy', 'hygiene', 'health'] as const;
-    const currentStats = { ...companion.stats };
-    for (let i = 0; i < quantity; i++) {
-      for (const stat of statKeys) {
-        const delta = item.effect[stat];
-        if (delta !== undefined) {
-          currentStats[stat] = Math.max(0, Math.min(100, (currentStats[stat] ?? 0) + delta));
-        }
-      }
-    }
-    const changes: Array<{ stat: string; delta: number }> = [];
-    for (const stat of statKeys) {
-      const delta = (currentStats[stat] ?? 0) - (companion.stats[stat] ?? 0);
-      if (delta !== 0) {
-        changes.push({ stat, delta });
-      }
-    }
-    return { normalChanges: changes, eggChanges: [] };
-  }, [item.effect, companion.stats, quantity, isEgg, isMedicine, isClean]);
-
-  const hasChanges = statPreview.normalChanges.length > 0 || statPreview.eggChanges.length > 0;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-sm w-[calc(100%-2rem)]">
-        <DialogHeader>
-          <DialogTitle>{actionMeta.label}</DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-4 py-2">
-          {/* Item Preview */}
-          <div className="flex items-center gap-3 sm:gap-4 p-3 sm:p-4 rounded-lg bg-muted/50">
-            <div className="text-3xl sm:text-4xl shrink-0">{item.icon}</div>
-            <div className="flex-1 min-w-0">
-              <h3 className="font-semibold truncate">{item.name}</h3>
-              <p className="text-sm text-muted-foreground">
-                {item.quantity} in inventory
-              </p>
-            </div>
-          </div>
-
-          {/* Quantity Selector */}
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <label className="text-sm font-medium">Quantity</label>
-              <span className="text-xs text-muted-foreground">
-                Max: {maxQuantity}
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={onDecrease}
-                disabled={quantity <= 1 || isUsing}
-              >
-                <Minus className="size-4" />
-              </Button>
-              <Input
-                type="number"
-                min="1"
-                max={maxQuantity}
-                value={quantity}
-                onChange={onQuantityChange}
-                disabled={isUsing}
-                className="text-center"
-              />
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={onIncrease}
-                disabled={quantity >= maxQuantity || isUsing}
-              >
-                <Plus className="size-4" />
-              </Button>
-            </div>
-          </div>
-
-          {/* Effects Summary */}
-          {hasChanges && (
-            <div className="p-4 rounded-lg bg-gradient-to-r from-emerald-500/10 to-green-500/10 border border-emerald-500/20">
-              <h4 className="text-sm font-medium mb-2">
-                Total effect{quantity > 1 ? ` (x${quantity})` : ''}
-              </h4>
-              <div className="flex flex-wrap gap-2">
-                {statPreview.normalChanges.map(({ stat, delta }) => (
-                  <Badge
-                    key={stat}
-                    variant="secondary"
-                    className={cn(
-                      'text-xs',
-                      delta > 0
-                        ? 'bg-green-500/20 text-green-700 dark:text-green-300'
-                        : 'bg-red-500/20 text-red-700 dark:text-red-300'
-                    )}
-                  >
-                    {delta > 0 ? '+' : ''}{delta} {stat}
-                  </Badge>
-                ))}
-                {statPreview.eggChanges.map(({ stat, delta }) => (
-                  <Badge
-                    key={stat}
-                    variant="secondary"
-                    className={cn(
-                      'text-xs',
-                      delta > 0
-                        ? 'bg-green-500/20 text-green-700 dark:text-green-300'
-                        : 'bg-red-500/20 text-red-700 dark:text-red-300'
-                    )}
-                  >
-                    {delta > 0 ? '+' : ''}{delta} {stat}
-                  </Badge>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={isUsing}
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={onConfirm}
-            disabled={isUsing}
-            className="min-w-24"
-          >
-            {isUsing ? (
-              <>
-                <Loader2 className="size-4 mr-2 animate-spin" />
-                Using...
-              </>
-            ) : (
-              `Use${quantity > 1 ? ` (x${quantity})` : ''}`
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

src/blobbi/actions/components/BlobbiMissionsModal.tsx

@@ -1,19 +1,39 @@
 // src/blobbi/actions/components/BlobbiMissionsModal.tsx
 
 /**
- * Missions modal for Blobbi.
- * 
- * Shows:
- * - Daily missions (always visible, separate reward system)
- * - Incubation tasks when the current Blobbi is incubating (egg stage)
- * - Evolve tasks when evolving (baby stage)
+ * Missions modal for Blobbi — card-grid quest board.
+ *
+ * Layout:
+ * 1. Sticky header with title, subtitle, legend help button, close
+ * 2. Current Focus section (hatch / evolve) — collapsible, default open
+ * 3. Daily Bounties section — collapsible, default open
+ * 4. Settings row — low emphasis toggle (not collapsible)
+ *
+ * Both main sections use lightweight Radix Collapsible wrappers.
+ * Collapsed headers still show summary info (progress / XP).
  */
 
-import { Target, Loader2, XCircle, AlertTriangle, Calendar, Coins, X, ChevronDown } from 'lucide-react';
+import {
+  Loader2,
+  XCircle,
+  AlertTriangle,
+  Zap,
+  X,
+  Eye,
+  Scroll,
+  Compass,
+  HelpCircle,
+  ChevronDown,
+} from 'lucide-react';
 import { formatCompactNumber, cn } from '@/lib/utils';
 
 import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogClose } from '@/components/ui/dialog';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Dialog, DialogContent, DialogClose } from '@/components/ui/dialog';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,7 +44,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { useState } from 'react';
 
 import type { BlobbiCompanion, BlobbonautProfile } from '@/blobbi/core/lib/blobbi';
@@ -42,36 +61,86 @@ import { useRerollMission } from '../hooks/useRerollMission';
 interface BlobbiMissionsModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  /** Current companion being viewed */
   companion: BlobbiCompanion;
-  /** Current Blobbonaut profile (required for coin updates) */
   profile: BlobbonautProfile | null;
-  /** Callback to update profile in query cache after claiming */
   updateProfileEvent: (event: NostrEvent) => void;
-  /** Hatch tasks result from useHatchTasks */
   hatchTasks: HatchTasksResult;
-  /** Evolve tasks result from useEvolveTasks */
   evolveTasks: EvolveTasksResult;
-  /** Called when user clicks "Create Post" action in tasks */
   onOpenPostModal: () => void;
-  /** Called when all hatch tasks are complete and user clicks "Hatch" */
   onHatch: () => void;
-  /** Whether hatching is in progress */
   isHatching: boolean;
-  /** Called when all evolve tasks are complete and user clicks "Evolve" */
   onEvolve: () => void;
-  /** Whether evolving is in progress */
   isEvolving: boolean;
-  /** Called when user confirms stopping incubation */
   onStopIncubation: () => Promise<void>;
-  /** Whether stop incubation is in progress */
   isStoppingIncubation: boolean;
-  /** Called when user confirms stopping evolution */
   onStopEvolution: () => Promise<void>;
-  /** Whether stop evolution is in progress */
   isStoppingEvolution: boolean;
-  /** Available Blobbi stages across all user's companions (for mission filtering) */
   availableStages?: ('egg' | 'baby' | 'adult')[];
+  showMissionCard?: boolean;
+  onToggleMissionCard?: (visible: boolean) => void;
+}
+
+// ─── Section Chevron ─────────────────────────────────────────────────────────
+
+function SectionChevron({ open }: { open: boolean }) {
+  return (
+    <ChevronDown
+      className={cn(
+        'size-4 text-muted-foreground/60 transition-transform duration-200',
+        open && 'rotate-180',
+      )}
+    />
+  );
+}
+
+// ─── Mission Type Legend ──────────────────────────────────────────────────────
+
+function MissionTypeLegend() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="rounded-full p-1.5 opacity-50 hover:opacity-100 hover:bg-muted transition-all"
+          aria-label="Mission types legend"
+        >
+          <HelpCircle className="size-4" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent side="bottom" align="end" className="w-56 p-3">
+        <p className="text-xs font-semibold mb-2">Mission Types</p>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <div className="size-5 rounded-full bg-amber-500/15 flex items-center justify-center shrink-0">
+              <Scroll className="size-3 text-amber-500" />
+            </div>
+            <div>
+              <p className="text-xs font-medium">Daily Bounty</p>
+              <p className="text-[10px] text-muted-foreground">Resets every day</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="size-5 rounded-full bg-sky-500/15 flex items-center justify-center shrink-0">
+              <span className="text-xs">🥚</span>
+            </div>
+            <div>
+              <p className="text-xs font-medium">Hatch Task</p>
+              <p className="text-[10px] text-muted-foreground">Egg progression</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="size-5 rounded-full bg-violet-500/15 flex items-center justify-center shrink-0">
+              <span className="text-xs">🐣</span>
+            </div>
+            <div>
+              <p className="text-xs font-medium">Evolve Task</p>
+              <p className="text-[10px] text-muted-foreground">Baby progression</p>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
 }
 
 // ─── Daily Missions Section ───────────────────────────────────────────────────
@@ -79,14 +148,24 @@ interface BlobbiMissionsModalProps {
 interface DailyMissionsSectionProps {
   profile: BlobbonautProfile | null;
   updateProfileEvent: (event: NostrEvent) => void;
-  /** Available Blobbi stages the user has */
+  companion?: import('@/blobbi/core/lib/blobbi').BlobbiCompanion | null;
+  updateCompanionEvent?: (event: NostrEvent) => void;
   availableStages?: ('egg' | 'baby' | 'adult')[];
   disabled?: boolean;
   defaultOpen?: boolean;
 }
 
-function DailyMissionsSection({ profile, updateProfileEvent, availableStages, disabled, defaultOpen = true }: DailyMissionsSectionProps) {
+function DailyMissionsSection({
+  profile,
+  updateProfileEvent,
+  companion,
+  updateCompanionEvent,
+  availableStages,
+  disabled,
+  defaultOpen = true,
+}: DailyMissionsSectionProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
+
   const {
     missions,
     todayClaimedReward,
@@ -96,62 +175,65 @@ function DailyMissionsSection({ profile, updateProfileEvent, availableStages, di
     bonusReward,
     noMissionsAvailable,
     rerollsRemaining,
-  } = useDailyMissions({ availableStages });
+  } = useDailyMissions({
+    availableStages,
+    persistedDailyMissions: profile?.content.dailyMissions,
+  });
 
   const { mutate: claimReward, isPending: isClaiming } = useClaimMissionReward(
     profile,
-    updateProfileEvent
+    updateProfileEvent,
+    companion,
+    updateCompanionEvent,
   );
 
   const { mutate: rerollMission, isPending: isRerolling } = useRerollMission();
 
-  const handleClaimReward = (missionId: string) => {
-    claimReward({ missionId });
-  };
-
-  const handleRerollMission = (missionId: string) => {
-    rerollMission({ missionId, availableStages });
-  };
+  const claimableCount = missions.filter((m) => m.completed && !m.claimed).length;
 
   return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="overflow-hidden">
-      {/* Section header - Clickable */}
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      {/* Section header — tappable */}
       <CollapsibleTrigger className="w-full">
-        <div className="flex items-center justify-between gap-2 p-3 rounded-lg bg-muted/50 hover:bg-muted/70 transition-colors">
+        <div className="flex items-center justify-between py-1 group">
           <div className="flex items-center gap-2">
-            <Calendar className="size-4 text-primary shrink-0" />
-            <h3 className="font-semibold text-sm">Daily Missions</h3>
+            <Scroll className="size-4 text-amber-500 dark:text-amber-400 shrink-0" />
+            <h3 className="font-semibold text-sm">Daily Bounties</h3>
           </div>
           <div className="flex items-center gap-2">
-            <div className="flex items-center gap-1 text-xs text-muted-foreground">
-              <Coins className="size-3 shrink-0" />
-              <span className="whitespace-nowrap">
+            {/* Summary pill — always visible */}
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <Zap className="size-3 shrink-0 text-amber-500 dark:text-amber-400" />
+              <span className="tabular-nums">
                 {formatCompactNumber(todayClaimedReward)} / {formatCompactNumber(totalPotentialReward)}
               </span>
+              {claimableCount > 0 && (
+                <span className="size-4 rounded-full bg-emerald-500 text-white text-[10px] font-bold flex items-center justify-center shrink-0">
+                  {claimableCount}
+                </span>
+              )}
             </div>
-            <ChevronDown className={cn(
-              "size-4 text-muted-foreground transition-transform duration-200",
-              isOpen && "rotate-180"
-            )} />
+            <SectionChevron open={isOpen} />
           </div>
         </div>
       </CollapsibleTrigger>
 
-      {/* Mission list */}
-      <CollapsibleContent className="pt-3">
-        <DailyMissionsPanel
-          missions={missions}
-          onClaimReward={handleClaimReward}
-          onRerollMission={handleRerollMission}
-          todayCoins={todayClaimedReward}
-          disabled={disabled || isClaiming || isRerolling}
-          bonusAvailable={bonusAvailable}
-          bonusClaimed={bonusClaimed}
-          bonusReward={bonusReward}
-          noMissionsAvailable={noMissionsAvailable}
-          rerollsRemaining={rerollsRemaining}
-          isRerolling={isRerolling}
-        />
+      <CollapsibleContent className="overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
+        <div className="pt-3">
+          <DailyMissionsPanel
+            missions={missions}
+            onClaimReward={(id) => claimReward({ missionId: id })}
+            onRerollMission={(id) => rerollMission({ missionId: id, availableStages })}
+            todayXp={todayClaimedReward}
+            disabled={disabled || isClaiming || isRerolling}
+            bonusAvailable={bonusAvailable}
+            bonusClaimed={bonusClaimed}
+            bonusReward={bonusReward}
+            noMissionsAvailable={noMissionsAvailable}
+            rerollsRemaining={rerollsRemaining}
+            isRerolling={isRerolling}
+          />
+        </div>
       </CollapsibleContent>
     </Collapsible>
   );
@@ -224,9 +306,9 @@ function StopConfirmationDialog({
   );
 }
 
-// ─── Process Content (Incubation or Evolution) ────────────────────────────────
+// ─── Current Focus Section (Hatch / Evolve) ──────────────────────────────────
 
-interface ProcessContentProps {
+interface CurrentFocusSectionProps {
   companion: BlobbiCompanion;
   tasks: HatchTasksResult | EvolveTasksResult;
   processType: 'incubation' | 'evolution';
@@ -238,7 +320,7 @@ interface ProcessContentProps {
   defaultOpen?: boolean;
 }
 
-function ProcessContent({
+function CurrentFocusSection({
   companion,
   tasks,
   processType,
@@ -248,93 +330,98 @@ function ProcessContent({
   onStop,
   isStopping,
   defaultOpen = true,
-}: ProcessContentProps) {
+}: CurrentFocusSectionProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const [showStopConfirmation, setShowStopConfirmation] = useState(false);
 
   const isIncubation = processType === 'incubation';
-  const emoji = isIncubation ? '🥚' : '🐣';
   const title = isIncubation ? 'Hatch Tasks' : 'Evolve Tasks';
-  const description = isIncubation
-    ? 'Complete these tasks to hatch your Blobbi'
-    : 'Complete these tasks to evolve your Blobbi';
   const completeLabel = isIncubation ? 'Hatch Your Blobbi!' : 'Evolve Your Blobbi!';
   const completingLabel = isIncubation ? 'Hatching...' : 'Evolving...';
   const completeEmoji = isIncubation ? '🐣' : '✨';
   const stopLabel = isIncubation ? 'Stop Incubation' : 'Stop Evolution';
+  const badgeLabel = isIncubation ? 'Hatch' : 'Evolve';
+  const category = isIncubation ? ('hatch' as const) : ('evolve' as const);
 
-  const completedCount = tasks.tasks.filter(t => t.completed).length;
+  const completedCount = tasks.tasks.filter((t) => t.completed).length;
   const totalTasks = tasks.tasks.length;
 
   return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="overflow-hidden">
-      {/* Section header - Clickable */}
+    <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+      {/* Section header — tappable */}
       <CollapsibleTrigger className="w-full">
-        <div className="flex items-center justify-between gap-2 p-3 rounded-lg bg-muted/50 hover:bg-muted/70 transition-colors">
+        <div className="flex items-center justify-between py-1 group">
           <div className="flex items-center gap-2">
-            <span className="text-lg">{emoji}</span>
-            <h3 className="font-semibold text-sm">{title}</h3>
+            <Badge
+              variant="secondary"
+              className={cn(
+                'text-xs font-semibold px-2 py-0.5',
+                isIncubation
+                  ? 'bg-sky-500/15 text-sky-600 dark:text-sky-400'
+                  : 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
+              )}
+            >
+              {badgeLabel}
+            </Badge>
+            <span className="text-sm font-semibold">{title}</span>
           </div>
           <div className="flex items-center gap-2">
-            <span className={cn(
-              "text-xs font-medium px-2 py-0.5 rounded-full",
-              tasks.allCompleted 
-                ? "bg-emerald-500/20 text-emerald-600 dark:text-emerald-400"
-                : "bg-muted text-muted-foreground"
-            )}>
-              {completedCount}/{totalTasks}
+            <span
+              className={cn(
+                'text-xs font-medium tabular-nums',
+                tasks.allCompleted
+                  ? 'text-emerald-600 dark:text-emerald-400'
+                  : 'text-muted-foreground',
+              )}
+            >
+              {completedCount} / {totalTasks}
             </span>
-            <ChevronDown className={cn(
-              "size-4 text-muted-foreground transition-transform duration-200",
-              isOpen && "rotate-180"
-            )} />
+            <SectionChevron open={isOpen} />
           </div>
         </div>
       </CollapsibleTrigger>
 
-      {/* Tasks content */}
-      <CollapsibleContent className="pt-3">
-        {/* Tasks Panel */}
-        <TasksPanel
-          tasks={tasks.tasks}
-          allCompleted={tasks.allCompleted}
-          isLoading={tasks.isLoading}
-          onOpenPostModal={onOpenPostModal}
-          onComplete={onComplete}
-          isCompleting={isCompleting}
-          emoji={emoji}
-          title={title}
-          description={description}
-          completeLabel={completeLabel}
-          completingLabel={completingLabel}
-          completeEmoji={completeEmoji}
-        />
+      <CollapsibleContent className="overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
+        <div className="pt-3">
+          {/* Task card grid */}
+          <TasksPanel
+            tasks={tasks.tasks}
+            allCompleted={tasks.allCompleted}
+            isLoading={tasks.isLoading}
+            onOpenPostModal={onOpenPostModal}
+            onComplete={onComplete}
+            isCompleting={isCompleting}
+            completeLabel={completeLabel}
+            completingLabel={completingLabel}
+            completeEmoji={completeEmoji}
+            category={category}
+          />
 
-        {/* Stop Process Button */}
-        <div className="mt-6 pt-4 border-t border-border">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setShowStopConfirmation(true)}
-            disabled={isStopping || isCompleting}
-            className="w-full text-muted-foreground hover:text-destructive hover:bg-destructive/10"
-          >
-            {isStopping ? (
-              <>
-                <Loader2 className="size-4 mr-2 animate-spin" />
-                Stopping...
-              </>
-            ) : (
-              <>
-                <XCircle className="size-4 mr-2" />
-                {stopLabel}
-              </>
-            )}
-          </Button>
+          {/* Stop process — low emphasis */}
+          <div className="mt-3 flex justify-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowStopConfirmation(true)}
+              disabled={isStopping || isCompleting}
+              className="text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10 h-8 px-3"
+            >
+              {isStopping ? (
+                <>
+                  <Loader2 className="size-3.5 mr-1.5 animate-spin" />
+                  Stopping...
+                </>
+              ) : (
+                <>
+                  <XCircle className="size-3.5 mr-1.5" />
+                  {stopLabel}
+                </>
+              )}
+            </Button>
+          </div>
         </div>
       </CollapsibleContent>
 
-      {/* Stop Confirmation Dialog */}
       <StopConfirmationDialog
         open={showStopConfirmation}
         onOpenChange={setShowStopConfirmation}
@@ -347,6 +434,17 @@ function ProcessContent({
   );
 }
 
+// ─── Empty Focus State ────────────────────────────────────────────────────────
+
+function EmptyFocusState() {
+  return (
+    <div className="py-6 text-center">
+      <Compass className="size-5 text-muted-foreground/50 mx-auto mb-2" />
+      <p className="text-sm text-muted-foreground">No active progression right now</p>
+    </div>
+  );
+}
+
 // ─── Main Modal ───────────────────────────────────────────────────────────────
 
 export function BlobbiMissionsModal({
@@ -367,54 +465,46 @@ export function BlobbiMissionsModal({
   onStopEvolution,
   isStoppingEvolution,
   availableStages,
+  showMissionCard,
+  onToggleMissionCard,
 }: BlobbiMissionsModalProps) {
   const isIncubating = companion.state === 'incubating';
   const isEvolvingState = companion.state === 'evolving';
   const isEgg = companion.stage === 'egg';
   const isBaby = companion.stage === 'baby';
 
-  // Check if there's an active hatch/evolve process
   const hasActiveProcess = (isIncubating && isEgg) || (isEvolvingState && isBaby);
   const isProcessBusy = isHatching || isEvolving || isStoppingIncubation || isStoppingEvolution;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-lg w-[calc(100%-2rem)] max-h-[85vh] flex flex-col p-0 gap-0 overflow-hidden [&>button:last-child]:hidden">
-        {/* Header - Sticky */}
-        <DialogHeader className="sticky top-0 z-10 bg-background px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4 border-b">
-          <div className="flex items-start justify-between gap-4">
-            <div>
-              <DialogTitle className="flex items-center gap-2">
-                <Target className="size-5 shrink-0" />
-                Missions
-              </DialogTitle>
-              <DialogDescription className="break-words">
-                Complete missions to earn rewards for {companion.name}
-              </DialogDescription>
+        {/* ── Sticky Header ── */}
+        <div className="sticky top-0 z-10 bg-background px-4 sm:px-5 pt-4 pb-3 border-b border-border/60">
+          <div className="flex items-center justify-between">
+            <div className="min-w-0">
+              <h2 className="text-base font-bold tracking-tight">Missions</h2>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                Quests & bounties for {companion.name}
+              </p>
+            </div>
+            <div className="flex items-center gap-0.5 shrink-0">
+              <MissionTypeLegend />
+              <DialogClose className="rounded-full p-1.5 opacity-60 hover:opacity-100 hover:bg-muted transition-all">
+                <X className="size-4" />
+                <span className="sr-only">Close</span>
+              </DialogClose>
             </div>
-            <DialogClose className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 shrink-0">
-              <X className="size-5" />
-              <span className="sr-only">Close</span>
-            </DialogClose>
           </div>
-        </DialogHeader>
+        </div>
 
-        {/* Content - Scrollable */}
-        <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-4 sm:px-6 py-3 sm:py-4 space-y-4">
-          {/* Daily Missions Section - Always visible, expanded by default */}
-          <DailyMissionsSection 
-            profile={profile}
-            updateProfileEvent={updateProfileEvent}
-            availableStages={availableStages}
-            disabled={isProcessBusy}
-            defaultOpen={true}
-          />
-
-          {/* Hatch/Evolve Process Section - Only when active, expanded by default */}
-          {hasActiveProcess && (
+        {/* ── Scrollable Content ── */}
+        <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-4 sm:px-5 py-4 space-y-5">
+          {/* 1. Current Focus */}
+          {hasActiveProcess ? (
             <>
               {isIncubating && isEgg ? (
-                <ProcessContent
+                <CurrentFocusSection
                   companion={companion}
                   tasks={hatchTasks}
                   processType="incubation"
@@ -423,10 +513,9 @@ export function BlobbiMissionsModal({
                   isCompleting={isHatching}
                   onStop={onStopIncubation}
                   isStopping={isStoppingIncubation}
-                  defaultOpen={true}
                 />
               ) : isEvolvingState && isBaby ? (
-                <ProcessContent
+                <CurrentFocusSection
                   companion={companion}
                   tasks={evolveTasks}
                   processType="evolution"
@@ -435,10 +524,43 @@ export function BlobbiMissionsModal({
                   isCompleting={isEvolving}
                   onStop={onStopEvolution}
                   isStopping={isStoppingEvolution}
-                  defaultOpen={true}
                 />
               ) : null}
             </>
+          ) : (
+            <EmptyFocusState />
+          )}
+
+          {/* Divider */}
+          <div className="h-px bg-border/60" />
+
+          {/* 2. Daily Bounties */}
+          <DailyMissionsSection
+            profile={profile}
+            updateProfileEvent={updateProfileEvent}
+            availableStages={availableStages}
+            disabled={isProcessBusy}
+          />
+
+          {/* 3. Settings */}
+          {onToggleMissionCard !== undefined && showMissionCard !== undefined && (
+            <>
+              <div className="h-px bg-border/40" />
+              <div className="flex items-center justify-between py-1">
+                <Label
+                  htmlFor="mission-card-toggle"
+                  className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer"
+                >
+                  <Eye className="size-3.5" />
+                  Show mission card on main page
+                </Label>
+                <Switch
+                  id="mission-card-toggle"
+                  checked={showMissionCard}
+                  onCheckedChange={onToggleMissionCard}
+                />
+              </div>
+            </>
           )}
         </div>
       </DialogContent>

src/blobbi/actions/components/BlobbiPostModal.tsx

@@ -30,6 +30,7 @@ import { toast } from '@/hooks/useToast';
 
 import {
   BLOBBI_POST_REQUIRED_HASHTAGS,
+  buildHatchPhrase,
 } from '../hooks/useHatchTasks';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -49,33 +50,13 @@ interface BlobbiPostModalProps {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-/**
- * Sanitize a name into a valid hashtag format.
- * - Removes special characters
- * - Replaces spaces with nothing (camelCase-like)
- * - Ensures lowercase
- * - Handles edge cases
- */
-function sanitizeToHashtag(name: string): string {
-  return name
-    .toLowerCase()
-    // Remove emojis and special characters, keep letters, numbers, underscores
-    .replace(/[^\p{L}\p{N}_]/gu, '')
-    // Ensure it starts with a letter (prepend 'blobbi' if it starts with number)
-    .replace(/^(\d)/, 'blobbi$1')
-    // Limit length
-    .slice(0, 30)
-    // Fallback if empty
-    || 'myblobbi';
-}
-
 /**
  * Build the required prefix text based on process type.
  */
 function buildPrefix(process: BlobbiPostProcess): string {
   return process === 'evolve'
-    ? 'Hello Nostr! Posting to evolve'
-    : 'Hello Nostr! Posting to hatch';
+    ? 'Posting to evolve'
+    : 'Posting to hatch';
 }
 
 // ─── Main Component ───────────────────────────────────────────────────────────
@@ -91,20 +72,19 @@ export function BlobbiPostModal({
   const { mutateAsync: createEvent, isPending } = useNostrPublish();
   
   // Compute the required elements based on props
-  const blobbiHashtag = useMemo(() => sanitizeToHashtag(blobbiName), [blobbiName]);
   const prefix = useMemo(() => buildPrefix(process), [process]);
+  const capitalizedName = useMemo(() => blobbiName.charAt(0).toUpperCase() + blobbiName.slice(1), [blobbiName]);
   
-  // All required hashtags including the Blobbi name (first)
-  const allRequiredHashtags = useMemo(() => 
-    [blobbiHashtag, ...BLOBBI_POST_REQUIRED_HASHTAGS],
-    [blobbiHashtag]
+  // The required phrase that must appear in the post
+  const requiredPhrase = useMemo(() => 
+    process === 'hatch'
+      ? buildHatchPhrase(blobbiName)
+      : `${prefix} ${capitalizedName} #blobbi`,
+    [process, blobbiName, prefix, capitalizedName]
   );
   
-  // Build default content
-  const defaultContent = useMemo(() => 
-    `${prefix} #${allRequiredHashtags.join(' #')}`,
-    [prefix, allRequiredHashtags]
-  );
+  // Build default content (the phrase itself is enough)
+  const defaultContent = useMemo(() => requiredPhrase, [requiredPhrase]);
   
   const [content, setContent] = useState(defaultContent);
   const [validationError, setValidationError] = useState<string | null>(null);
@@ -118,24 +98,14 @@ export function BlobbiPostModal({
   }, [open, defaultContent]);
   
   /**
-   * Validate that the content still contains the required prefix and hashtags.
+   * Validate that the content contains the required phrase.
    */
   const validateContent = useCallback((text: string): string | null => {
-    // Check prefix
-    if (!text.startsWith(prefix)) {
-      return 'The post must start with the required text';
+    if (!text.includes(requiredPhrase)) {
+      return `The post must contain: "${requiredPhrase}"`;
     }
-    
-    // Check all required hashtags are present (including Blobbi name)
-    const lowerText = text.toLowerCase();
-    for (const tag of allRequiredHashtags) {
-      if (!lowerText.includes(`#${tag.toLowerCase()}`)) {
-        return `Missing required hashtag: #${tag}`;
-      }
-    }
-    
     return null;
-  }, [prefix, allRequiredHashtags]);
+  }, [requiredPhrase]);
   
   /**
    * Handle content change with validation.
@@ -180,21 +150,26 @@ export function BlobbiPostModal({
     }
     
     try {
-      // Build tags for the post
+      // Build tags for the post: extract all hashtags from content
       const tags: string[][] = [];
+      const seen = new Set<string>();
       
-      // Add all required hashtags as 't' tags
-      for (const hashtag of allRequiredHashtags) {
-        tags.push(['t', hashtag.toLowerCase()]);
+      // Always include BLOBBI_POST_REQUIRED_HASHTAGS as t tags
+      for (const hashtag of BLOBBI_POST_REQUIRED_HASHTAGS) {
+        const lower = hashtag.toLowerCase();
+        if (!seen.has(lower)) {
+          tags.push(['t', lower]);
+          seen.add(lower);
+        }
       }
       
-      // Extract any additional hashtags the user added
-      const additionalHashtags = content.match(/#(\w+)/g) || [];
-      const requiredLower = allRequiredHashtags.map(t => t.toLowerCase());
-      for (const tag of additionalHashtags) {
+      // Extract any additional hashtags from the content
+      const contentHashtags = content.match(/#(\w+)/g) || [];
+      for (const tag of contentHashtags) {
         const tagValue = tag.slice(1).toLowerCase();
-        if (!requiredLower.includes(tagValue)) {
+        if (!seen.has(tagValue)) {
           tags.push(['t', tagValue]);
+          seen.add(tagValue);
         }
       }
       
@@ -220,7 +195,7 @@ export function BlobbiPostModal({
         variant: 'destructive',
       });
     }
-  }, [user, content, validateContent, createEvent, onOpenChange, onSuccess, allRequiredHashtags, process]);
+  }, [user, content, validateContent, createEvent, onOpenChange, onSuccess, process]);
   
   const canPost = !validationError && content.trim().length > 0;
   
@@ -282,13 +257,9 @@ export function BlobbiPostModal({
           
           {/* Preview of required content */}
           <div className="p-3 rounded-lg bg-muted/50 border border-dashed">
-            <p className="text-xs text-muted-foreground mb-1">Required content:</p>
-            <p className="text-sm font-medium">
-              <span className="text-primary">{prefix}</span>
-              {' '}
-              {allRequiredHashtags.map(tag => (
-                <span key={tag} className="text-blue-500">#{tag} </span>
-              ))}
+            <p className="text-xs text-muted-foreground mb-1">Required phrase:</p>
+            <p className="text-sm font-medium text-primary">
+              {requiredPhrase}
             </p>
           </div>
         </div>

src/blobbi/actions/components/DailyMissionsPanel.tsx

@@ -1,285 +1,164 @@
 /**
- * DailyMissionsPanel - UI component for displaying daily missions
- * 
- * Shows:
- * - Daily mission list with progress bars
- * - Completion state
- * - Claim buttons for completed missions
- * - Coin rewards
- * - Bonus mission after completing all regular missions
- * - Empty state when no missions available (egg-only users)
- * - Reroll button to replace missions (max 3/day)
+ * DailyMissionsPanel — card-grid layout for daily bounties.
+ *
+ * Each mission is a compact card in a 2-col grid.
+ * Tapping a card expands it to show progress, claim button, and reroll.
+ * Only one card expanded at a time.
  */
 
-import { Check, Coins, Gift, Sparkles, Egg, Trophy, RefreshCw } from 'lucide-react';
+import { useState } from 'react';
+import {
+  Check,
+  Zap,
+  Gift,
+  Sparkles,
+  Egg,
+  Trophy,
+  RefreshCw,
+  Heart,
+  Utensils,
+  Droplets,
+  Moon,
+  Camera,
+  Mic,
+  Music,
+  Pill,
+  CircleDot,
+} from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn, formatCompactNumber } from '@/lib/utils';
-import type { DailyMission } from '../lib/daily-missions';
+import type { DailyMission, DailyMissionAction } from '../lib/daily-missions';
 import { BONUS_MISSION_ID } from '../hooks/useClaimMissionReward';
+import {
+  ExpandableMissionCard,
+  MissionDescription,
+  MissionProgress,
+} from './ExpandableMissionCard';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 interface DailyMissionsPanelProps {
-  /** The daily missions to display */
   missions: DailyMission[];
-  /** Callback when claiming a mission reward */
   onClaimReward: (missionId: string) => void;
-  /** Callback when rerolling a mission */
   onRerollMission?: (missionId: string) => void;
-  /** Total coins earned today */
-  todayCoins: number;
-  /** Whether claiming is disabled (e.g., during another operation) */
+  todayXp: number;
   disabled?: boolean;
-  /** Whether the bonus mission is available */
   bonusAvailable?: boolean;
-  /** Whether the bonus mission has been claimed */
   bonusClaimed?: boolean;
-  /** Bonus mission reward amount */
   bonusReward?: number;
-  /** Whether user has no eligible missions (e.g., only eggs) */
   noMissionsAvailable?: boolean;
-  /** Number of rerolls remaining today */
   rerollsRemaining?: number;
-  /** Whether a reroll is currently in progress */
   isRerolling?: boolean;
 }
 
-// ─── Mission Item ─────────────────────────────────────────────────────────────
+// ─── Daily Mission Icon Mapping ───────────────────────────────────────────────
 
-interface MissionItemProps {
-  mission: DailyMission;
-  onClaim: () => void;
-  onReroll?: () => void;
-  disabled?: boolean;
-  canReroll?: boolean;
-  isRerolling?: boolean;
+function DailyMissionIcon({ action }: { action: DailyMissionAction }) {
+  const cls = 'size-5';
+  switch (action) {
+    case 'interact':
+      return <Heart className={cls} />;
+    case 'feed':
+      return <Utensils className={cls} />;
+    case 'clean':
+      return <Droplets className={cls} />;
+    case 'sleep':
+      return <Moon className={cls} />;
+    case 'take_photo':
+      return <Camera className={cls} />;
+    case 'sing':
+      return <Mic className={cls} />;
+    case 'play_music':
+      return <Music className={cls} />;
+    case 'medicine':
+      return <Pill className={cls} />;
+    default:
+      return <CircleDot className={cls} />;
+  }
 }
 
-function MissionItem({ mission, onClaim, onReroll, disabled, canReroll = false, isRerolling = false }: MissionItemProps) {
-  const progressPercent = (mission.currentCount / mission.requiredCount) * 100;
-  const canClaim = mission.completed && !mission.claimed;
-  
-  // Can only reroll if: not completed, not claimed, has reroll callback, and has rerolls remaining
-  const showRerollButton = onReroll && !mission.completed && !mission.claimed && canReroll;
+// ─── Bonus Card ───────────────────────────────────────────────────────────────
 
-  return (
-    <div
-      className={cn(
-        'relative p-3 sm:p-4 rounded-lg border transition-colors overflow-hidden',
-        mission.claimed
-          ? 'bg-primary/5 border-primary/20'
-          : mission.completed
-            ? 'bg-green-500/5 border-green-500/30'
-            : 'bg-card border-border'
-      )}
-    >
-      {/* Top right area: Claimed badge OR Reroll button */}
-      <div className="absolute top-2 right-2">
-        {mission.claimed ? (
-          <div className="flex items-center gap-1 text-xs text-primary font-medium">
-            <Check className="size-3" />
-            Claimed
-          </div>
-        ) : showRerollButton ? (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="size-7 text-muted-foreground hover:text-foreground"
-                  onClick={onReroll}
-                  disabled={disabled || isRerolling}
-                >
-                  <RefreshCw className={cn("size-3.5", isRerolling && "animate-spin")} />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="left">
-                <p>Replace this mission</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        ) : null}
-      </div>
-
-      {/* Mission content */}
-      <div className="space-y-2 sm:space-y-3">
-        {/* Title and description */}
-        <div className="pr-14 sm:pr-16">
-          <h4 className="font-medium text-sm break-words">{mission.title}</h4>
-          <p className="text-xs text-muted-foreground mt-0.5 break-words">
-            {mission.description}
-          </p>
-        </div>
-
-        {/* Progress bar */}
-        <div className="space-y-1.5">
-          <div className="flex items-center justify-between text-xs gap-2">
-            <span className="text-muted-foreground whitespace-nowrap">
-              {mission.currentCount} / {mission.requiredCount}
-            </span>
-            <span className="flex items-center gap-1 font-medium text-amber-600 dark:text-amber-400 whitespace-nowrap">
-              <Coins className="size-3 shrink-0" />
-              {formatCompactNumber(mission.reward)}
-            </span>
-          </div>
-          <Progress
-            value={progressPercent}
-            className={cn(
-              'h-2',
-              mission.completed && '[&>div]:bg-green-500'
-            )}
-          />
-        </div>
-
-        {/* Claim button */}
-        {canClaim && (
-          <Button
-            size="sm"
-            onClick={onClaim}
-            disabled={disabled}
-            className="w-full bg-green-600 hover:bg-green-700 text-white"
-          >
-            <Gift className="size-4 mr-2 shrink-0" />
-            <span className="truncate">Claim {formatCompactNumber(mission.reward)} Coins</span>
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ─── Bonus Mission Item ───────────────────────────────────────────────────────
-
-interface BonusMissionItemProps {
+interface BonusCardProps {
   isAvailable: boolean;
   isClaimed: boolean;
   reward: number;
   onClaim: () => void;
   disabled?: boolean;
+  isExpanded: boolean;
+  onToggle: (id: string) => void;
 }
 
-function BonusMissionItem({ isAvailable, isClaimed, reward, onClaim, disabled }: BonusMissionItemProps) {
+function BonusCard({ isAvailable, isClaimed, reward, onClaim, disabled, isExpanded, onToggle }: BonusCardProps) {
+  const progress = isClaimed ? 1 : isAvailable ? 1 : 0;
+
   return (
-    <div
-      className={cn(
-        'relative p-3 sm:p-4 rounded-lg border-2 transition-colors overflow-hidden',
-        isClaimed
-          ? 'bg-amber-500/10 border-amber-500/30'
-          : isAvailable
-            ? 'bg-gradient-to-br from-amber-500/10 to-orange-500/10 border-amber-500/40 animate-pulse'
-            : 'bg-muted/30 border-dashed border-muted-foreground/20'
-      )}
+    <ExpandableMissionCard
+      id="bonus"
+      category="daily"
+      icon={<Trophy className="size-5" />}
+      title="Daily Champion"
+      completed={isClaimed}
+      progress={progress}
+      isExpanded={isExpanded}
+      onToggle={onToggle}
     >
-      {/* Claimed badge */}
-      {isClaimed && (
-        <div className="absolute top-2 right-2">
-          <div className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400 font-medium">
-            <Check className="size-3" />
-            Claimed
-          </div>
-        </div>
-      )}
+      <MissionDescription>
+        {isAvailable || isClaimed
+          ? 'Bonus reward for completing all daily missions!'
+          : 'Complete all missions to unlock this bonus'}
+      </MissionDescription>
 
-      {/* Mission content */}
-      <div className="space-y-2 sm:space-y-3">
-        {/* Title and description */}
-        <div className={cn("pr-14 sm:pr-16", !isAvailable && !isClaimed && "opacity-50")}>
-          <div className="flex items-center gap-2">
-            <Trophy className={cn(
-              "size-4 shrink-0",
-              isClaimed 
-                ? "text-amber-600 dark:text-amber-400"
-                : isAvailable 
-                  ? "text-amber-500" 
-                  : "text-muted-foreground"
-            )} />
-            <h4 className="font-medium text-sm">Daily Champion</h4>
-          </div>
-          <p className="text-xs text-muted-foreground mt-0.5">
-            {isAvailable || isClaimed 
-              ? 'Bonus reward for completing all daily missions!'
-              : 'Complete all missions above to unlock this bonus'}
-          </p>
-        </div>
-
-        {/* Reward display */}
-        <div className="flex items-center justify-between text-xs gap-2">
-          <span className={cn(
-            "text-muted-foreground",
-            !isAvailable && !isClaimed && "opacity-50"
-          )}>
-            Bonus Reward
-          </span>
-          <span className={cn(
-            "flex items-center gap-1 font-medium",
-            isClaimed || isAvailable 
-              ? "text-amber-600 dark:text-amber-400" 
-              : "text-muted-foreground"
-          )}>
-            <Coins className="size-3 shrink-0" />
-            +{formatCompactNumber(reward)}
-          </span>
-        </div>
-
-        {/* Claim button */}
-        {isAvailable && !isClaimed && (
-          <Button
-            size="sm"
-            onClick={onClaim}
-            disabled={disabled}
-            className="w-full bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white"
-          >
-            <Trophy className="size-4 mr-2 shrink-0" />
-            <span className="truncate">Claim Bonus {formatCompactNumber(reward)} Coins!</span>
-          </Button>
-        )}
+      <div className="flex items-center gap-1 text-xs font-medium text-amber-600 dark:text-amber-400">
+        <Zap className="size-3" />
+        +{formatCompactNumber(reward)}
       </div>
-    </div>
+
+      {isAvailable && !isClaimed && (
+        <Button
+          size="sm"
+          onClick={onClaim}
+          disabled={disabled}
+          className="w-full bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white h-8 text-xs"
+        >
+          <Trophy className="size-3.5 mr-1.5" />
+          Claim +{formatCompactNumber(reward)} XP
+        </Button>
+      )}
+    </ExpandableMissionCard>
   );
 }
 
-// ─── No Missions Available State ──────────────────────────────────────────────
+// ─── Empty / Done States ──────────────────────────────────────────────────────
 
 function NoMissionsState() {
   return (
-    <div className="flex flex-col items-center gap-3 py-6 text-center">
-      <div className="size-12 rounded-full bg-muted flex items-center justify-center">
-        <Egg className="size-6 text-muted-foreground" />
-      </div>
-      <div className="space-y-1">
-        <h4 className="font-semibold text-sm">Hatch Your Blobbi First</h4>
-        <p className="text-xs text-muted-foreground">
-          Daily missions will be available once you have
-          <br />
-          a hatched Blobbi to interact with!
+    <div className="flex flex-col items-center gap-2 py-6 text-center">
+      <Egg className="size-5 text-muted-foreground/50" />
+      <div>
+        <p className="text-sm font-medium">Hatch your Blobbi first</p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          Daily missions unlock after hatching
         </p>
       </div>
     </div>
   );
 }
 
-// ─── All Claimed State ────────────────────────────────────────────────────────
-
-interface AllClaimedStateProps {
-  todayCoins: number;
-}
-
-function AllClaimedState({ todayCoins }: AllClaimedStateProps) {
+function AllClaimedState({ todayXp }: { todayXp: number }) {
   return (
-    <div className="flex flex-col items-center gap-3 py-6 text-center">
-      <div className="size-12 rounded-full bg-primary/10 flex items-center justify-center">
-        <Sparkles className="size-6 text-primary" />
-      </div>
-      <div className="space-y-1">
-        <h4 className="font-semibold text-sm">All Done for Today!</h4>
-        <p className="text-xs text-muted-foreground">
-          You earned <span className="font-medium text-amber-600 dark:text-amber-400">{formatCompactNumber(todayCoins)} coins</span> today.
-          <br />
-          Come back tomorrow for new missions!
+    <div className="flex flex-col items-center gap-2 py-6 text-center">
+      <Sparkles className="size-5 text-primary/60" />
+      <div>
+        <p className="text-sm font-medium">All done for today</p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          Earned{' '}
+          <span className="font-medium text-amber-600 dark:text-amber-400">
+            {formatCompactNumber(todayXp)} XP earned
+          </span>{' '}
+          — come back tomorrow!
         </p>
       </div>
     </div>
@@ -288,20 +167,17 @@ function AllClaimedState({ todayCoins }: AllClaimedStateProps) {
 
 // ─── Reroll Counter ───────────────────────────────────────────────────────────
 
-interface RerollCounterProps {
-  remaining: number;
-}
+function RerollCounter({ remaining }: { remaining: number }) {
+  const text =
+    remaining === 0
+      ? 'No rerolls left'
+      : remaining === 1
+        ? '1 reroll left'
+        : `${remaining} rerolls left`;
 
-function RerollCounter({ remaining }: RerollCounterProps) {
-  const text = remaining === 0
-    ? 'No rerolls left'
-    : remaining === 1
-      ? '1 reroll left'
-      : `${remaining} rerolls left`;
-  
   return (
-    <div className="flex items-center justify-end gap-1.5 text-xs text-muted-foreground">
-      <RefreshCw className="size-3" />
+    <div className="flex items-center justify-end gap-1 text-[11px] text-muted-foreground col-span-full">
+      <RefreshCw className="size-2.5" />
       <span>{text}</span>
     </div>
   );
@@ -313,7 +189,7 @@ export function DailyMissionsPanel({
   missions,
   onClaimReward,
   onRerollMission,
-  todayCoins,
+  todayXp,
   disabled,
   bonusAvailable = false,
   bonusClaimed = false,
@@ -322,48 +198,121 @@ export function DailyMissionsPanel({
   rerollsRemaining = 0,
   isRerolling = false,
 }: DailyMissionsPanelProps) {
-  // Show empty state if user has no eligible missions (e.g., only eggs)
-  if (noMissionsAvailable) {
-    return <NoMissionsState />;
-  }
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  if (noMissionsAvailable) return <NoMissionsState />;
 
   const allRegularClaimed = missions.every((m) => m.claimed);
   const allDone = allRegularClaimed && bonusClaimed;
 
-  // Show "all done" state only when everything including bonus is claimed
-  if (allDone) {
-    return <AllClaimedState todayCoins={todayCoins} />;
-  }
+  if (allDone) return <AllClaimedState todayXp={todayXp} />;
 
   const canReroll = rerollsRemaining > 0 && !!onRerollMission;
 
+  const handleToggle = (id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id));
+  };
+
   return (
-    <div className="space-y-3">
-      {/* Reroll counter - only show if reroll functionality is available */}
-      {onRerollMission && (
-        <RerollCounter remaining={rerollsRemaining} />
-      )}
-      
-      {/* Regular missions */}
-      {missions.map((mission) => (
-        <MissionItem
-          key={mission.id}
-          mission={mission}
-          onClaim={() => onClaimReward(mission.id)}
-          onReroll={onRerollMission ? () => onRerollMission(mission.id) : undefined}
-          disabled={disabled}
-          canReroll={canReroll}
-          isRerolling={isRerolling}
-        />
-      ))}
-      
-      {/* Bonus mission - always visible */}
-      <BonusMissionItem
+    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+      {/* Reroll counter */}
+      {onRerollMission && <RerollCounter remaining={rerollsRemaining} />}
+
+      {/* Regular mission cards */}
+      {missions.map((mission) => {
+        const progress = mission.requiredCount > 0 ? mission.currentCount / mission.requiredCount : 0;
+        const canClaim = mission.completed && !mission.claimed;
+        const showReroll = onRerollMission && !mission.completed && !mission.claimed && canReroll;
+
+        return (
+          <ExpandableMissionCard
+            key={mission.id}
+            id={mission.id}
+            category="daily"
+            icon={<DailyMissionIcon action={mission.action} />}
+            title={mission.title}
+            completed={mission.claimed}
+            progress={Math.min(progress, 1)}
+            isExpanded={expandedId === mission.id}
+            onToggle={handleToggle}
+          >
+            {/* Description */}
+            <MissionDescription>{mission.description}</MissionDescription>
+
+            {/* Progress */}
+            {!mission.claimed && (
+              <MissionProgress
+                current={mission.currentCount}
+                required={mission.requiredCount}
+                completed={mission.completed}
+              />
+            )}
+
+            {/* Reward + reroll row */}
+            <div className="flex items-center justify-between">
+              <span className="inline-flex items-center gap-0.5 text-xs font-medium text-amber-600 dark:text-amber-400">
+                <Zap className="size-3" />
+                {formatCompactNumber(mission.reward)}
+              </span>
+
+              {showReroll && (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onRerollMission(mission.id);
+                        }}
+                        disabled={disabled || isRerolling}
+                        className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-40"
+                      >
+                        <RefreshCw className={cn('size-3', isRerolling && 'animate-spin')} />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      <p>Replace mission</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+
+              {mission.claimed && (
+                <span className="inline-flex items-center gap-0.5 text-[10px] font-medium text-primary">
+                  <Check className="size-2.5" />
+                  Done
+                </span>
+              )}
+            </div>
+
+            {/* Claim button */}
+            {canClaim && (
+              <Button
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClaimReward(mission.id);
+                }}
+                disabled={disabled}
+                className="w-full bg-emerald-600 hover:bg-emerald-700 text-white h-8 text-xs"
+              >
+                <Gift className="size-3.5 mr-1.5" />
+                Claim +{formatCompactNumber(mission.reward)} XP
+              </Button>
+            )}
+          </ExpandableMissionCard>
+        );
+      })}
+
+      {/* Bonus card */}
+      <BonusCard
         isAvailable={bonusAvailable}
         isClaimed={bonusClaimed}
         reward={bonusReward}
         onClaim={() => onClaimReward(BONUS_MISSION_ID)}
         disabled={disabled}
+        isExpanded={expandedId === 'bonus'}
+        onToggle={handleToggle}
       />
     </div>
   );

src/blobbi/actions/components/ExpandableMissionCard.tsx

@@ -0,0 +1,250 @@
+// src/blobbi/actions/components/ExpandableMissionCard.tsx
+
+/**
+ * Expandable mission card for the quest-board grid.
+ *
+ * Collapsed: compact square-ish card showing icon, title, and a tiny
+ *            progress ring / checkmark.
+ * Expanded:  full-width row that reveals description, progress bar,
+ *            action link, claim button, dynamic hints, etc.
+ *
+ * Only one card is expanded at a time per section (controlled by parent).
+ */
+
+import type { ReactNode } from 'react';
+import { Check, ChevronRight, ExternalLink, AlertCircle } from 'lucide-react';
+import { Progress } from '@/components/ui/progress';
+import { cn } from '@/lib/utils';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type MissionCategory = 'daily' | 'hatch' | 'evolve';
+
+export interface ExpandableMissionCardProps {
+  /** Unique id used to track which card is expanded */
+  id: string;
+  /** Mission category for visual styling */
+  category: MissionCategory;
+  /** Icon rendered in the compact card (ReactNode — usually a lucide icon or emoji span) */
+  icon: ReactNode;
+  /** Short title */
+  title: string;
+  /** Whether the mission is complete */
+  completed: boolean;
+  /** Progress fraction 0-1 (used for the tiny ring in compact mode) */
+  progress: number;
+  /** Whether this card is currently expanded */
+  isExpanded: boolean;
+  /** Parent calls this to toggle expansion */
+  onToggle: (id: string) => void;
+  /** Content rendered only when expanded */
+  children: ReactNode;
+  /** Optional extra className on the outer wrapper */
+  className?: string;
+}
+
+// ─── Tiny Progress Ring ───────────────────────────────────────────────────────
+
+function ProgressRing({ progress, completed, category }: { progress: number; completed: boolean; category: MissionCategory }) {
+  const size = 28;
+  const stroke = 2.5;
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - progress * circumference;
+
+  if (completed) {
+    return (
+      <div className="size-7 rounded-full bg-emerald-500/20 flex items-center justify-center">
+        <Check className="size-3.5 text-emerald-600 dark:text-emerald-400" />
+      </div>
+    );
+  }
+
+  const ringColor =
+    category === 'hatch'
+      ? 'text-sky-500'
+      : category === 'evolve'
+        ? 'text-violet-500'
+        : 'text-amber-500';
+
+  return (
+    <svg width={size} height={size} className={cn('shrink-0 -rotate-90', ringColor)}>
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={stroke}
+        opacity={0.15}
+      />
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={stroke}
+        strokeDasharray={circumference}
+        strokeDashoffset={offset}
+        strokeLinecap="round"
+        className="transition-all duration-300"
+      />
+    </svg>
+  );
+}
+
+// ─── Accent colors per category ───────────────────────────────────────────────
+
+const CATEGORY_STYLES: Record<MissionCategory, { bg: string; expandedBg: string; border: string }> = {
+  daily: {
+    bg: 'bg-amber-500/[0.06] hover:bg-amber-500/10',
+    expandedBg: 'bg-amber-500/[0.06]',
+    border: 'ring-amber-500/20',
+  },
+  hatch: {
+    bg: 'bg-sky-500/[0.06] hover:bg-sky-500/10',
+    expandedBg: 'bg-sky-500/[0.06]',
+    border: 'ring-sky-500/20',
+  },
+  evolve: {
+    bg: 'bg-violet-500/[0.06] hover:bg-violet-500/10',
+    expandedBg: 'bg-violet-500/[0.06]',
+    border: 'ring-violet-500/20',
+  },
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function ExpandableMissionCard({
+  id,
+  category,
+  icon,
+  title,
+  completed,
+  progress,
+  isExpanded,
+  onToggle,
+  children,
+  className,
+}: ExpandableMissionCardProps) {
+  const styles = CATEGORY_STYLES[category];
+
+  // ── Collapsed card ──
+  if (!isExpanded) {
+    return (
+      <button
+        type="button"
+        onClick={() => onToggle(id)}
+        className={cn(
+          'flex flex-col items-center gap-1.5 rounded-xl p-3 transition-all text-center cursor-pointer select-none',
+          'ring-1 ring-transparent',
+          completed ? 'bg-emerald-500/[0.06] hover:bg-emerald-500/10' : styles.bg,
+          className,
+        )}
+      >
+        {/* Icon */}
+        <div className="text-lg leading-none">{icon}</div>
+
+        {/* Title — 2 lines max */}
+        <span className={cn(
+          'text-[11px] font-medium leading-tight line-clamp-2 min-h-[2lh]',
+          completed && 'text-emerald-600 dark:text-emerald-400',
+        )}>
+          {title}
+        </span>
+
+        {/* Progress ring / check */}
+        <ProgressRing progress={progress} completed={completed} category={category} />
+      </button>
+    );
+  }
+
+  // ── Expanded card (spans full row) ──
+  return (
+    <div
+      className={cn(
+        'col-span-full rounded-xl ring-1 transition-all overflow-hidden',
+        completed ? 'bg-emerald-500/[0.06] ring-emerald-500/20' : cn(styles.expandedBg, styles.border),
+        className,
+      )}
+    >
+      {/* Compact header — click to collapse */}
+      <button
+        type="button"
+        onClick={() => onToggle(id)}
+        className="w-full flex items-center gap-3 p-3 text-left cursor-pointer select-none"
+      >
+        <div className="text-lg leading-none shrink-0">{icon}</div>
+        <span className={cn(
+          'text-sm font-medium flex-1 min-w-0',
+          completed && 'text-emerald-600 dark:text-emerald-400',
+        )}>
+          {title}
+        </span>
+        <ProgressRing progress={progress} completed={completed} category={category} />
+      </button>
+
+      {/* Expanded details */}
+      <div className="px-3 pb-3 pt-0 space-y-2">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ─── Shared detail sub-components ─────────────────────────────────────────────
+
+/** Description text */
+export function MissionDescription({ children }: { children: ReactNode }) {
+  return <p className="text-xs text-muted-foreground leading-snug">{children}</p>;
+}
+
+/** Progress bar with fraction label */
+export function MissionProgress({ current, required, completed }: { current: number; required: number; completed: boolean }) {
+  const pct = required > 0 ? Math.round((current / required) * 100) : 0;
+  return (
+    <div>
+      <div className="flex items-center justify-between text-[11px] text-muted-foreground mb-1">
+        <span className="tabular-nums">{current} / {required}</span>
+        <span className="tabular-nums">{pct}%</span>
+      </div>
+      <Progress value={pct} className={cn('h-1.5', completed && '[&>div]:bg-emerald-500')} />
+    </div>
+  );
+}
+
+/** Inline action link (navigate, external, modal) */
+export function MissionAction({
+  label,
+  type,
+  onClick,
+}: {
+  label: string;
+  type: 'navigate' | 'external_link' | 'open_modal';
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
+    >
+      {label}
+      {type === 'external_link' ? (
+        <ExternalLink className="size-3" />
+      ) : (
+        <ChevronRight className="size-3" />
+      )}
+    </button>
+  );
+}
+
+/** Dynamic / live task hint */
+export function DynamicHint({ current, required }: { current: number; required: number }) {
+  return (
+    <div className="flex items-center gap-1.5 text-[11px] text-amber-600/80 dark:text-amber-400/80">
+      <AlertCircle className="size-3 shrink-0" />
+      <span>Lowest stat: {current}% (need {required}%+)</span>
+    </div>
+  );
+}

src/blobbi/actions/components/InlineSingCard.tsx

@@ -98,13 +98,6 @@ export function InlineSingCard({
     cleanup: cleanupPlayback,
   } = useAudioPlayback();
   
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      cleanupAll();
-    };
-  }, []);
-  
   // Cleanup all resources
   const cleanupAll = useCallback(() => {
     // Stop timer
@@ -138,6 +131,13 @@ export function InlineSingCard({
     }
   }, [audioUrl, cleanupPlayback]);
   
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      cleanupAll();
+    };
+  }, [cleanupAll]);
+  
   // Reset recording
   const resetRecording = useCallback(() => {
     cleanupAll();

src/blobbi/actions/components/SingModal.tsx

@@ -82,22 +82,6 @@ export function SingModal({
   // Track the actual MIME type used by the recorder
   const actualMimeTypeRef = useRef<string | undefined>(undefined);
   
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      cleanup();
-    };
-  }, []);
-  
-  // Reset state when modal opens
-  useEffect(() => {
-    if (open) {
-      resetRecording();
-    } else {
-      cleanup();
-    }
-  }, [open]);
-  
   const cleanup = useCallback(() => {
     // Stop timer
     if (timerRef.current) {
@@ -142,6 +126,22 @@ export function SingModal({
     // Keep lyrics when re-recording so user can sing the same song
   }, [cleanup]);
   
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+  
+  // Reset state when modal opens
+  useEffect(() => {
+    if (open) {
+      resetRecording();
+    } else {
+      cleanup();
+    }
+  }, [open, cleanup, resetRecording]);
+  
   // Handle getting random lyrics
   const handleRandomLyrics = useCallback(() => {
     const lyrics = getRandomLyrics();

src/blobbi/actions/components/TasksPanel.tsx

@@ -1,22 +1,38 @@
 // src/blobbi/actions/components/TasksPanel.tsx
 
 /**
- * Generic UI component for displaying task progress.
- * Shows a list of tasks with progress indicators and action buttons.
- * Used for both hatch and evolve tasks.
+ * Card-grid presentation for hatch / evolve tasks.
+ *
+ * Each task is a compact card in a 2-column grid.
+ * Tapping a card expands it inline (full row) to reveal details.
+ * Only one card is expanded at a time.
  */
 
-import { ExternalLink, Check, Loader2, ChevronRight, AlertCircle } from 'lucide-react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import {
+  Palette,
+  Droplets,
+  MessageSquare,
+  Heart,
+  UserPen,
+  Activity,
+  Loader2,
+  HelpCircle,
+} from 'lucide-react';
 import { openUrl } from '@/lib/downloadFile';
 
 import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { cn } from '@/lib/utils';
 
 import type { HatchTask } from '../hooks/useHatchTasks';
+import type { MissionCategory } from './ExpandableMissionCard';
+import {
+  ExpandableMissionCard,
+  MissionDescription,
+  MissionProgress,
+  MissionAction,
+  DynamicHint,
+} from './ExpandableMissionCard';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -24,149 +40,38 @@ interface TasksPanelProps {
   tasks: HatchTask[];
   allCompleted: boolean;
   isLoading: boolean;
-  /** Called when user clicks "Create Post" action */
   onOpenPostModal: () => void;
-  /** Called when all tasks are complete and user clicks the complete button */
   onComplete: () => void;
-  /** Whether completion is in progress */
   isCompleting?: boolean;
-  /** Emoji to show in header */
-  emoji: string;
-  /** Title for the tasks panel */
-  title: string;
-  /** Description for the tasks panel */
-  description: string;
-  /** Label for the complete button */
   completeLabel: string;
-  /** Label while completing */
   completingLabel: string;
-  /** Emoji for complete button */
   completeEmoji: string;
+  /** Mission category for styling the cards */
+  category?: MissionCategory;
 }
 
-// ─── Task Row Component ───────────────────────────────────────────────────────
+// ─── Task Icon Mapping ────────────────────────────────────────────────────────
 
-interface TaskRowProps {
-  task: HatchTask;
-  onOpenPostModal: () => void;
-}
+/** Map task ids to lucide icons. Falls back to a generic icon. */
+function TaskIcon({ taskId }: { taskId: string }) {
+  const iconClass = 'size-5';
 
-function TaskRow({ task, onOpenPostModal }: TaskRowProps) {
-  const navigate = useNavigate();
-  const isDynamic = task.type === 'dynamic';
-  
-  const handleAction = () => {
-    if (!task.action || !task.actionTarget) return;
-    
-    switch (task.action) {
-      case 'navigate':
-        navigate(task.actionTarget);
-        break;
-      case 'external_link':
-        openUrl(task.actionTarget);
-        break;
-      case 'open_modal':
-        if (task.actionTarget === 'blobbi_post') {
-          onOpenPostModal();
-        }
-        break;
-    }
-  };
-  
-  const progress = task.required > 1 
-    ? Math.round((task.current / task.required) * 100)
-    : task.completed ? 100 : 0;
-  
-  return (
-    <div
-      className={cn(
-        "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 p-3 sm:p-4 rounded-xl border transition-all overflow-hidden",
-        task.completed 
-          ? "bg-emerald-500/5 border-emerald-500/20" 
-          : isDynamic
-            ? "bg-amber-500/5 border-amber-500/20"
-            : "bg-card/60 border-border hover:border-primary/30"
-      )}
-    >
-      {/* Top row on mobile: Status + Task info */}
-      <div className="flex items-start sm:items-center gap-3 sm:contents">
-        {/* Status indicator */}
-        <div className={cn(
-          "size-8 sm:size-10 rounded-full flex items-center justify-center shrink-0",
-          task.completed 
-            ? "bg-emerald-500/20 text-emerald-600 dark:text-emerald-400"
-            : isDynamic
-              ? "bg-amber-500/20 text-amber-600 dark:text-amber-400"
-              : "bg-muted text-muted-foreground"
-        )}>
-          {task.completed ? (
-            <Check className="size-4 sm:size-5" />
-          ) : isDynamic ? (
-            <AlertCircle className="size-4 sm:size-5" />
-          ) : task.required > 1 ? (
-            <span className="text-xs sm:text-sm font-medium">{task.current}/{task.required}</span>
-          ) : (
-            <span className="text-base sm:text-lg">○</span>
-          )}
-        </div>
-        
-        {/* Task info */}
-        <div className="flex-1 min-w-0">
-          <div className="flex flex-wrap items-center gap-1 sm:gap-2 mb-0.5 sm:mb-1">
-            <h4 className={cn(
-              "font-medium text-sm sm:text-base break-words",
-              task.completed && "text-emerald-600 dark:text-emerald-400",
-              isDynamic && !task.completed && "text-amber-600 dark:text-amber-400"
-            )}>
-              {task.name}
-            </h4>
-            {task.completed && (
-              <Badge variant="secondary" className="bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 text-xs shrink-0">
-                Complete
-              </Badge>
-            )}
-            {isDynamic && !task.completed && (
-              <Badge variant="secondary" className="bg-amber-500/20 text-amber-700 dark:text-amber-300 text-xs shrink-0">
-                Live
-              </Badge>
-            )}
-          </div>
-          <p className="text-xs sm:text-sm text-muted-foreground break-words">
-            {task.description}
-          </p>
-          
-          {/* Progress bar for multi-step tasks (not for dynamic stat tasks) */}
-          {task.required > 1 && !task.completed && !isDynamic && (
-            <Progress value={progress} className="h-1.5 mt-2" />
-          )}
-          
-          {/* Dynamic task hint */}
-          {isDynamic && !task.completed && (
-            <p className="text-xs text-amber-600/70 dark:text-amber-400/70 mt-1">
-              Lowest stat: {task.current}% (need {task.required}%+)
-            </p>
-          )}
-        </div>
-      </div>
-      
-      {/* Action button - full width on mobile when present */}
-      {task.action && task.actionLabel && !task.completed && (
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleAction}
-          className="shrink-0 gap-2 w-full sm:w-auto mt-1 sm:mt-0"
-        >
-          <span className="truncate">{task.actionLabel}</span>
-          {task.action === 'external_link' ? (
-            <ExternalLink className="size-3.5 shrink-0" />
-          ) : (
-            <ChevronRight className="size-3.5 shrink-0" />
-          )}
-        </Button>
-      )}
-    </div>
-  );
+  switch (taskId) {
+    case 'create_themes':
+      return <Palette className={iconClass} />;
+    case 'color_moments':
+      return <Droplets className={iconClass} />;
+    case 'create_posts':
+      return <MessageSquare className={iconClass} />;
+    case 'interactions':
+      return <Heart className={iconClass} />;
+    case 'edit_profile':
+      return <UserPen className={iconClass} />;
+    case 'maintain_stats':
+      return <Activity className={iconClass} />;
+    default:
+      return <HelpCircle className={iconClass} />;
+  }
 }
 
 // ─── Main Component ───────────────────────────────────────────────────────────
@@ -178,86 +83,113 @@ export function TasksPanel({
   onOpenPostModal,
   onComplete,
   isCompleting = false,
-  emoji,
-  title,
-  description,
   completeLabel,
   completingLabel,
   completeEmoji,
+  category = 'hatch',
 }: TasksPanelProps) {
-  const completedCount = tasks.filter(t => t.completed).length;
-  const totalTasks = tasks.length;
-  const overallProgress = totalTasks > 0 ? Math.round((completedCount / totalTasks) * 100) : 0;
-  
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  const handleToggle = (id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id));
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
   return (
-    <Card className="border-primary/20 bg-gradient-to-br from-primary/5 to-transparent overflow-hidden">
-      <CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
-        <div className="flex items-start sm:items-center justify-between gap-2">
-          <div className="min-w-0 flex-1">
-            <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
-              <span className="text-xl sm:text-2xl shrink-0">{emoji}</span>
-              <span className="break-words">{title}</span>
-            </CardTitle>
-            <CardDescription className="text-xs sm:text-sm break-words">
-              {description}
-            </CardDescription>
-          </div>
-          <Badge variant="outline" className="text-sm sm:text-base px-2 sm:px-3 py-0.5 sm:py-1 shrink-0">
-            {completedCount}/{totalTasks}
-          </Badge>
-        </div>
-        
-        {/* Overall progress */}
-        <div className="mt-3 sm:mt-4">
-          <div className="flex items-center justify-between text-xs sm:text-sm mb-2">
-            <span className="text-muted-foreground">Overall progress</span>
-            <span className="font-medium">{overallProgress}%</span>
-          </div>
-          <Progress value={overallProgress} className="h-2" />
-        </div>
-      </CardHeader>
-      
-      <CardContent className="space-y-2 sm:space-y-3 px-3 sm:px-6">
-        {isLoading ? (
-          <div className="flex items-center justify-center py-8">
-            <Loader2 className="size-6 animate-spin text-muted-foreground" />
-          </div>
-        ) : (
-          <>
-            {tasks.map(task => (
-              <TaskRow 
-                key={task.id} 
-                task={task} 
-                onOpenPostModal={onOpenPostModal}
-              />
-            ))}
-            
-            {/* Complete button - only visible when all tasks complete */}
-            {allCompleted && (
-              <div className="pt-4 border-t border-border mt-4">
-                <Button
-                  onClick={onComplete}
-                  disabled={isCompleting}
-                  size="lg"
-                  className="w-full gap-2 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white"
-                >
-                  {isCompleting ? (
-                    <>
-                      <Loader2 className="size-5 animate-spin" />
-                      {completingLabel}
-                    </>
-                  ) : (
-                    <>
-                      <span className="text-xl">{completeEmoji}</span>
-                      {completeLabel}
-                    </>
-                  )}
-                </Button>
-              </div>
-            )}
-          </>
-        )}
-      </CardContent>
-    </Card>
+    <div className="space-y-3">
+      {/* Card grid */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+        {tasks.map((task) => {
+          const isDynamic = task.type === 'dynamic';
+          const progress =
+            task.required > 0 ? task.current / task.required : task.completed ? 1 : 0;
+
+          const handleAction = () => {
+            if (!task.action || !task.actionTarget) return;
+            switch (task.action) {
+              case 'navigate':
+                navigate(task.actionTarget);
+                break;
+              case 'external_link':
+                openUrl(task.actionTarget);
+                break;
+              case 'open_modal':
+                if (task.actionTarget === 'blobbi_post') onOpenPostModal();
+                break;
+            }
+          };
+
+          return (
+            <ExpandableMissionCard
+              key={task.id}
+              id={task.id}
+              category={category}
+              icon={<TaskIcon taskId={task.id} />}
+              title={task.name}
+              completed={task.completed}
+              progress={Math.min(progress, 1)}
+              isExpanded={expandedId === task.id}
+              onToggle={handleToggle}
+            >
+              {/* Expanded content */}
+              <MissionDescription>{task.description}</MissionDescription>
+
+              {/* Progress bar for multi-step tasks */}
+              {task.required > 1 && !isDynamic && (
+                <MissionProgress
+                  current={task.current}
+                  required={task.required}
+                  completed={task.completed}
+                />
+              )}
+
+              {/* Dynamic stat hint */}
+              {isDynamic && !task.completed && (
+                <DynamicHint current={task.current} required={task.required} />
+              )}
+
+              {/* Action link */}
+              {task.action && task.actionLabel && !task.completed && (
+                <MissionAction
+                  label={task.actionLabel}
+                  type={task.action}
+                  onClick={handleAction}
+                />
+              )}
+            </ExpandableMissionCard>
+          );
+        })}
+      </div>
+
+      {/* CTA button when all tasks are done */}
+      {allCompleted && (
+        <Button
+          onClick={onComplete}
+          disabled={isCompleting}
+          size="lg"
+          className="w-full gap-2 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white shadow-sm"
+        >
+          {isCompleting ? (
+            <>
+              <Loader2 className="size-5 animate-spin" />
+              {completingLabel}
+            </>
+          ) : (
+            <>
+              <span className="text-lg">{completeEmoji}</span>
+              {completeLabel}
+            </>
+          )}
+        </Button>
+      )}
+    </div>
   );
 }

src/blobbi/actions/hooks/useActiveTaskProcess.ts

@@ -168,7 +168,7 @@ export function useActiveTaskProcess(
   }, [processType, hatchTasks, evolveTasks]);
   
   // Extract tasks and state from active result
-  const tasks = activeResult?.tasks ?? [];
+  const tasks = useMemo(() => activeResult?.tasks ?? [], [activeResult]);
   const isLoading = activeResult?.isLoading ?? false;
   const allCompleted = activeResult?.allCompleted ?? false;
   const persistentTasksComplete = activeResult?.persistentTasksComplete ?? false;

src/blobbi/actions/hooks/useBlobbiCareActivity.ts

@@ -17,6 +17,7 @@
  */
 
 import { useCallback, useRef } from 'react';
+import { useNostr } from '@nostrify/react';
 import { useMutation } from '@tanstack/react-query';
 import type { NostrEvent } from '@nostrify/nostrify';
 
@@ -24,7 +25,12 @@ import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
 
 import type { BlobbiCompanion } from '@/blobbi/core/lib/blobbi';
-import { KIND_BLOBBI_STATE, updateBlobbiTags } from '@/blobbi/core/lib/blobbi';
+import {
+  KIND_BLOBBI_STATE,
+  updateBlobbiTags,
+  isValidBlobbiEvent,
+  parseBlobbiEvent,
+} from '@/blobbi/core/lib/blobbi';
 
 import { getStreakTagUpdates, calculateStreakUpdate, type StreakUpdateResult } from '../lib/blobbi-streak';
 
@@ -34,8 +40,6 @@ export interface UseBlobbiCareActivityParams {
   companion: BlobbiCompanion | null;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
 }
 
 export interface CareActivityResult {
@@ -59,8 +63,8 @@ export interface CareActivityResult {
 export function useBlobbiCareActivity({
   companion,
   updateCompanionEvent,
-  invalidateCompanion,
 }: UseBlobbiCareActivityParams) {
+  const { nostr } = useNostr();
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
   
@@ -78,12 +82,24 @@ export function useBlobbiCareActivity({
         throw new Error('No companion available');
       }
 
+      // Fetch fresh companion from relays (read-modify-write pattern)
+      const freshEvents = await nostr.query([{
+        kinds: [KIND_BLOBBI_STATE],
+        authors: [user.pubkey],
+        '#d': [companion.d],
+      }]);
+      const freshCompanion = freshEvents
+        .filter(isValidBlobbiEvent)
+        .sort((a, b) => b.created_at - a.created_at)
+        .map(e => parseBlobbiEvent(e))
+        .find(Boolean) ?? companion;
+
       const now = new Date();
       
-      // Calculate what the streak update should be
+      // Calculate what the streak update should be using fresh data
       const result = calculateStreakUpdate(
-        companion.careStreak,
-        companion.careStreakLastDay,
+        freshCompanion.careStreak,
+        freshCompanion.careStreakLastDay,
         now
       );
       
@@ -96,29 +112,29 @@ export function useBlobbiCareActivity({
         };
       }
       
-      // Get the tag updates
-      const streakUpdates = getStreakTagUpdates(companion, now);
+      // Get the tag updates using fresh data
+      const streakUpdates = getStreakTagUpdates(freshCompanion, now);
       
       if (!streakUpdates) {
         // Shouldn't happen if wasUpdated is true, but handle gracefully
         return {
           wasUpdated: false,
-          newStreak: companion.careStreak ?? 0,
+          newStreak: freshCompanion.careStreak ?? 0,
           action: 'same_day',
         };
       }
       
-      // Build updated tags
-      const updatedTags = updateBlobbiTags(companion.allTags, streakUpdates);
+      // Build updated tags from fresh data
+      const updatedTags = updateBlobbiTags(freshCompanion.allTags, streakUpdates);
       
       // Publish the updated event
       const event = await publishEvent({
         kind: KIND_BLOBBI_STATE,
-        content: companion.event.content,
+        content: freshCompanion.event.content,
         tags: updatedTags,
       });
       
-      // Update local cache
+      // Update local cache (optimistic — no invalidation needed)
       updateCompanionEvent(event);
       
       // Update session tracker
@@ -128,9 +144,9 @@ export function useBlobbiCareActivity({
       if (import.meta.env.DEV) {
         console.log('[CareActivity] Streak updated:', {
           action: result.action,
-          previousStreak: companion.careStreak,
+          previousStreak: freshCompanion.careStreak,
           newStreak: result.newStreak,
-          lastDay: companion.careStreakLastDay,
+          lastDay: freshCompanion.careStreakLastDay,
           newDay: result.newLastDay,
         });
       }
@@ -141,11 +157,6 @@ export function useBlobbiCareActivity({
         action: result.action,
       };
     },
-    onSuccess: (result) => {
-      if (result.wasUpdated) {
-        invalidateCompanion();
-      }
-    },
     onError: (error: Error) => {
       console.error('[CareActivity] Failed to update streak:', error);
     },

src/blobbi/actions/hooks/useBlobbiDirectAction.ts

@@ -69,15 +69,11 @@ export interface UseBlobbiDirectActionParams {
   } | null>;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
-  /** Invalidate profile queries (needed if migration happened) */
-  invalidateProfile: () => void;
 }
 
 /**
  * Hook to execute a direct action on a Blobbi companion.
- * Direct actions (play_music, sing) don't consume inventory items.
+ * Direct actions (play_music, sing) don't require selecting an item.
  * They directly affect happiness stat.
  * 
  * This hook:
@@ -92,8 +88,6 @@ export function useBlobbiDirectAction({
   companion,
   ensureCanonicalBeforeAction,
   updateCompanionEvent,
-  invalidateCompanion,
-  invalidateProfile,
 }: UseBlobbiDirectActionParams) {
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
@@ -189,12 +183,6 @@ export function useBlobbiDirectAction({
 
       updateCompanionEvent(blobbiEvent);
 
-      // ─── Invalidate Queries ───
-      invalidateCompanion();
-      if (canonical.wasMigrated) {
-        invalidateProfile();
-      }
-
       return {
         action,
         happinessChange: happinessDelta,

src/blobbi/actions/hooks/useBlobbiIncubation.ts

@@ -66,10 +66,6 @@ export interface UseStartIncubationParams {
   } | null>;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
-  /** Invalidate profile queries (needed if migration occurred) */
-  invalidateProfile: () => void;
 }
 
 /**
@@ -112,8 +108,6 @@ export function useStartIncubation({
   profile,
   ensureCanonicalBeforeAction,
   updateCompanionEvent,
-  invalidateCompanion,
-  invalidateProfile,
 }: UseStartIncubationParams) {
   const { user } = useCurrentUser();
   const { nostr } = useNostr();
@@ -269,12 +263,6 @@ export function useStartIncubation({
       });
 
       updateCompanionEvent(event);
-      invalidateCompanion();
-      
-      // Invalidate profile if migration occurred
-      if (canonical.wasMigrated) {
-        invalidateProfile();
-      }
 
       return {
         name: canonical.companion.name,
@@ -329,10 +317,6 @@ export interface UseStopIncubationParams {
   } | null>;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
-  /** Invalidate profile queries (needed if migration occurred) */
-  invalidateProfile: () => void;
 }
 
 /**
@@ -363,8 +347,6 @@ export function useStopIncubation({
   companion,
   ensureCanonicalBeforeAction,
   updateCompanionEvent,
-  invalidateCompanion,
-  invalidateProfile,
 }: UseStopIncubationParams) {
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
@@ -435,12 +417,6 @@ export function useStopIncubation({
       });
 
       updateCompanionEvent(event);
-      invalidateCompanion();
-      
-      // Invalidate profile if migration occurred
-      if (canonical.wasMigrated) {
-        invalidateProfile();
-      }
 
       return {
         name: canonical.companion.name,
@@ -480,10 +456,6 @@ export interface UseStartEvolutionParams {
   } | null>;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
-  /** Invalidate profile queries (needed if migration occurred) */
-  invalidateProfile: () => void;
 }
 
 /**
@@ -511,8 +483,6 @@ export function useStartEvolution({
   companion,
   ensureCanonicalBeforeAction,
   updateCompanionEvent,
-  invalidateCompanion,
-  invalidateProfile,
 }: UseStartEvolutionParams) {
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
@@ -585,12 +555,6 @@ export function useStartEvolution({
       });
 
       updateCompanionEvent(event);
-      invalidateCompanion();
-      
-      // Invalidate profile if migration occurred
-      if (canonical.wasMigrated) {
-        invalidateProfile();
-      }
 
       return {
         name: canonical.companion.name,
@@ -631,10 +595,6 @@ export interface UseStopEvolutionParams {
   } | null>;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
-  /** Invalidate profile queries (needed if migration occurred) */
-  invalidateProfile: () => void;
 }
 
 /**
@@ -665,8 +625,6 @@ export function useStopEvolution({
   companion,
   ensureCanonicalBeforeAction,
   updateCompanionEvent,
-  invalidateCompanion,
-  invalidateProfile,
 }: UseStopEvolutionParams) {
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
@@ -736,12 +694,6 @@ export function useStopEvolution({
       });
 
       updateCompanionEvent(event);
-      invalidateCompanion();
-      
-      // Invalidate profile if migration occurred
-      if (canonical.wasMigrated) {
-        invalidateProfile();
-      }
 
       return {
         name: canonical.companion.name,
@@ -784,10 +736,6 @@ export interface UseSyncTaskCompletionsParams {
   } | null>;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
-  /** Invalidate profile queries */
-  invalidateProfile: () => void;
 }
 
 /**
@@ -827,8 +775,6 @@ export function useSyncTaskCompletions({
   companion,
   ensureCanonicalBeforeAction,
   updateCompanionEvent,
-  invalidateCompanion,
-  invalidateProfile,
 }: UseSyncTaskCompletionsParams) {
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
@@ -923,11 +869,6 @@ export function useSyncTaskCompletions({
       });
 
       updateCompanionEvent(event);
-      invalidateCompanion();
-
-      if (canonical.wasMigrated) {
-        invalidateProfile();
-      }
 
       if (DEBUG_TASK_SYNC) {
         console.log('[TaskSync] Published successfully:', tagsToAdd);

src/blobbi/actions/hooks/useBlobbiStageTransition.ts

@@ -69,10 +69,6 @@ export interface UseBlobbiStageTransitionParams {
   ensureCanonicalBeforeAction: () => Promise<CanonicalActionResult | null>;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
-  /** Invalidate profile queries (needed if migration occurred) */
-  invalidateProfile: () => void;
 }
 
 /**
@@ -113,8 +109,6 @@ export function useBlobbiHatch({
   profile,
   ensureCanonicalBeforeAction,
   updateCompanionEvent,
-  invalidateCompanion,
-  invalidateProfile,
 }: UseBlobbiStageTransitionParams) {
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
@@ -220,12 +214,6 @@ export function useBlobbiHatch({
       });
 
       updateCompanionEvent(event);
-      invalidateCompanion();
-      
-      // Invalidate profile if migration occurred
-      if (canonical.wasMigrated) {
-        invalidateProfile();
-      }
 
       return {
         previousStage: 'egg',
@@ -268,8 +256,6 @@ export function useBlobbiEvolve({
   profile,
   ensureCanonicalBeforeAction,
   updateCompanionEvent,
-  invalidateCompanion,
-  invalidateProfile,
 }: UseBlobbiStageTransitionParams) {
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
@@ -376,12 +362,6 @@ export function useBlobbiEvolve({
       });
 
       updateCompanionEvent(event);
-      invalidateCompanion();
-      
-      // Invalidate profile if migration occurred
-      if (canonical.wasMigrated) {
-        invalidateProfile();
-      }
 
       return {
         previousStage: 'baby',

src/blobbi/actions/hooks/useBlobbiUseInventoryItem.ts

@@ -6,19 +6,15 @@ import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
 import { toast } from '@/hooks/useToast';
 
-import type { BlobbiCompanion, BlobbonautProfile, BlobbiStats } from '@/blobbi/core/lib/blobbi';
+import type { BlobbiCompanion, BlobbonautProfile } from '@/blobbi/core/lib/blobbi';
 import {
   KIND_BLOBBI_STATE,
-  KIND_BLOBBONAUT_PROFILE,
   updateBlobbiTags,
-  updateBlobbonautTags,
-  createStorageTags,
 } from '@/blobbi/core/lib/blobbi';
 import { applyBlobbiDecay } from '@/blobbi/core/lib/blobbi-decay';
 import { getShopItemById } from '@/blobbi/shop/lib/blobbi-shop-items';
 import {
   applyItemEffects,
-  decrementStorageItem,
   canUseAction,
   getStageRestrictionMessage,
   clampStat,
@@ -37,23 +33,19 @@ import { HATCH_REQUIRED_INTERACTIONS } from './useHatchTasks';
 import { EVOLVE_REQUIRED_INTERACTIONS } from './useEvolveTasks';
 
 /**
- * Request payload for using an inventory item
+ * Request payload for using an item on a Blobbi companion
  */
 export interface UseItemRequest {
   itemId: string;
   action: InventoryAction;
-  /** Number of items to use (defaults to 1) */
-  quantity?: number;
 }
 
 /**
- * Result of using an inventory item
+ * Result of using an item on a Blobbi companion
  */
 export interface UseItemResult {
   itemName: string;
   action: InventoryAction;
-  quantity: number;
-  effectiveItemCount: number; // How many items actually changed stats (may be less than quantity due to caps)
   statsChanged: Record<string, number>;
   xpGained: number;
   newXP: number;
@@ -71,50 +63,44 @@ export interface UseBlobbiUseInventoryItemParams {
     content: string;
     allTags: string[][];
     wasMigrated: boolean;
-    /** Latest profile tags after migration (use instead of profile.allTags) */
+    /** Latest profile tags after migration */
     profileAllTags: string[][];
-    /** Latest profile storage after migration (use instead of profile.storage) */
+    /** Latest profile storage after migration */
     profileStorage: import('@/blobbi/core/lib/blobbi').StorageItem[];
   } | null>;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
   /** Update profile event in local cache */
   updateProfileEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
-  /** Invalidate profile queries */
-  invalidateProfile: () => void;
 }
 
 // Import NostrEvent type
 import type { NostrEvent } from '@nostrify/nostrify';
 
 /**
- * Hook to use an inventory item on a Blobbi companion.
+ * Hook to use an item on a Blobbi companion.
+ * 
+ * Items are reusable abilities sourced from the shop catalog — no
+ * inventory ownership or quantity is required.
  * 
  * This hook:
- * 1. Validates the companion stage (eggs can't use items)
- * 2. Validates the item exists in storage
- * 3. Ensures canonical format before action
- * 4. Applies item effects to Blobbi stats
- * 5. Updates Blobbi state (kind 31124)
- * 6. Decrements item from profile storage (kind 11125)
- * 7. Invalidates relevant queries
+ * 1. Validates the companion and item compatibility
+ * 2. Ensures canonical format before action
+ * 3. Applies accumulated decay, then item effects to Blobbi stats
+ * 4. Updates Blobbi state (kind 31124)
  */
 export function useBlobbiUseInventoryItem({
   companion,
   profile,
   ensureCanonicalBeforeAction,
   updateCompanionEvent,
-  updateProfileEvent,
-  invalidateCompanion,
-  invalidateProfile,
+  updateProfileEvent: _updateProfileEvent,
 }: UseBlobbiUseInventoryItemParams) {
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
 
   return useMutation({
-    mutationFn: async ({ itemId, action, quantity = 1 }: UseItemRequest): Promise<UseItemResult> => {
+    mutationFn: async ({ itemId, action }: UseItemRequest): Promise<UseItemResult> => {
       // ─── Validation ───
       if (!user?.pubkey) {
         throw new Error('You must be logged in to use items');
@@ -128,11 +114,6 @@ export function useBlobbiUseInventoryItem({
         throw new Error('Profile not found');
       }
 
-      // Validate quantity
-      if (quantity < 1) {
-        throw new Error('Quantity must be at least 1');
-      }
-
       // Check stage restrictions for this specific action
       if (!canUseAction(companion, action)) {
         const message = getStageRestrictionMessage(companion, action);
@@ -145,15 +126,6 @@ export function useBlobbiUseInventoryItem({
         throw new Error('Item not found in catalog');
       }
 
-      // Validate item exists in storage with sufficient quantity
-      const storageItem = profile.storage.find(s => s.itemId === itemId);
-      if (!storageItem || storageItem.quantity <= 0) {
-        throw new Error('Item not found in your inventory');
-      }
-      if (storageItem.quantity < quantity) {
-        throw new Error(`Not enough items in inventory (have ${storageItem.quantity}, need ${quantity})`);
-      }
-
       // Validate item has effects
       if (!shopItem.effect) {
         throw new Error('This item has no effect');
@@ -216,78 +188,25 @@ export function useBlobbiUseInventoryItem({
         }
       }
       
-      // ─── Apply Item Effects ───
-      // Apply effects multiple times (once per quantity) to simulate using items in sequence.
-      // This ensures proper clamping at each step, e.g., using 5 health items when at 90 health
-      // won't give more than 100 health total.
-      // 
-      // CRITICAL: Track the number of items that actually produced INTENDED stat changes for XP.
-      // XP counting is action-aware - only count positive intended effects, NOT negative side effects:
-      // - feed: count when hunger/energy/health/happiness INCREASE (NOT when hygiene decreases)
-      // - clean: count when hygiene or happiness INCREASES
-      // - medicine: count when health/energy/happiness INCREASE (NOT negative side effects)
-      // - play: EXCEPTION - count when happiness increases OR energy decreases (both are intended effects)
-      //
-      // Use canonical companion stage for egg checks
+      // ─── Apply Item Effects (single use) ───
       const isEggCompanion = canonical.companion.stage === 'egg';
       const statsUpdate: Record<string, string> = {};
       const statsChanged: Record<string, number> = {};
-      let effectiveItemCount = 0; // Number of items that produced intended effects
 
       if (isEggCompanion && action === 'medicine') {
-        // Egg medicine handling:
-        // Eggs use the 3-stat model: health, hygiene, happiness
-        // Medicine with health effect directly affects the egg's health stat
-        // hunger and energy remain fixed at 100 for eggs
-        
         const healthDelta = shopItem.effect.health ?? 0;
-        // Apply health effect N times in sequence with clamping at each step
-        // Only count items that actually INCREASED health (positive effect only)
-        let currentHealth = statsAfterDecay.health ?? 0;
-        for (let i = 0; i < quantity; i++) {
-          const prevHealth = currentHealth;
-          currentHealth = applyStat(currentHealth, healthDelta);
-          // Only count as effective if health increased (not just changed)
-          if (healthDelta > 0 && currentHealth > prevHealth) {
-            effectiveItemCount++;
-          }
-        }
+        const currentHealth = applyStat(statsAfterDecay.health ?? 0, healthDelta);
         
         statsUpdate.health = currentHealth.toString();
-        // Track total actual change (may be less than healthDelta * quantity due to clamping)
         statsChanged.health = currentHealth - (statsAfterDecay.health ?? 0);
         
-        // Apply decayed values for other egg stats
         statsUpdate.hygiene = (statsAfterDecay.hygiene ?? 0).toString();
         statsUpdate.happiness = (statsAfterDecay.happiness ?? 0).toString();
-        // hunger and energy stay at 100 for eggs
         statsUpdate.hunger = '100';
         statsUpdate.energy = '100';
       } else if (isEggCompanion && action === 'clean') {
-        // Egg clean/hygiene handling:
-        // Hygiene items affect the egg's hygiene stat
-        // Some hygiene items also give happiness (e.g., bubble bath)
-        // hunger and energy remain fixed at 100 for eggs
-        
-        const hygieneDelta = shopItem.effect.hygiene ?? 0;
-        const happinessDelta = shopItem.effect.happiness ?? 0;
-        
-        // Apply effects N times in sequence
-        // Only count items that INCREASED hygiene or happiness (positive effects only)
-        let currentHygiene = statsAfterDecay.hygiene ?? 0;
-        let currentHappiness = statsAfterDecay.happiness ?? 0;
-        for (let i = 0; i < quantity; i++) {
-          const prevHygiene = currentHygiene;
-          const prevHappiness = currentHappiness;
-          currentHygiene = applyStat(currentHygiene, hygieneDelta);
-          currentHappiness = applyStat(currentHappiness, happinessDelta);
-          // Count as effective if hygiene OR happiness increased (positive effects only)
-          const hygieneIncreased = hygieneDelta > 0 && currentHygiene > prevHygiene;
-          const happinessIncreased = happinessDelta > 0 && currentHappiness > prevHappiness;
-          if (hygieneIncreased || happinessIncreased) {
-            effectiveItemCount++;
-          }
-        }
+        const currentHygiene = applyStat(statsAfterDecay.hygiene ?? 0, shopItem.effect.hygiene ?? 0);
+        const currentHappiness = applyStat(statsAfterDecay.happiness ?? 0, shopItem.effect.happiness ?? 0);
         
         statsUpdate.hygiene = currentHygiene.toString();
         statsChanged.hygiene = currentHygiene - (statsAfterDecay.hygiene ?? 0);
@@ -298,58 +217,12 @@ export function useBlobbiUseInventoryItem({
           statsChanged.happiness = totalHappinessChange;
         }
         
-        // Apply decayed health
         statsUpdate.health = (statsAfterDecay.health ?? 0).toString();
-        // hunger and energy stay at 100 for eggs
         statsUpdate.hunger = '100';
         statsUpdate.energy = '100';
       } else {
-        // Normal stats application for baby/adult
-        // Apply item effects N times in sequence ON TOP of decayed stats
-        // Use action-aware effectiveness checking for XP calculation
-        let currentStats: Partial<BlobbiStats> = { ...statsAfterDecay };
-        const effect = shopItem.effect;
-        
-        for (let i = 0; i < quantity; i++) {
-          const prevStats = { ...currentStats };
-          currentStats = applyItemEffects(currentStats, effect);
-          
-          // Action-aware effectiveness check:
-          // Only count INTENDED positive effects, not negative side effects
-          let isEffective = false;
-          
-          if (action === 'feed') {
-            // Feed: count when hunger/energy/health/happiness INCREASE
-            // Do NOT count hygiene decrease (that's a side effect)
-            const hungerIncreased = (effect.hunger ?? 0) > 0 && (currentStats.hunger ?? 0) > (prevStats.hunger ?? 0);
-            const energyIncreased = (effect.energy ?? 0) > 0 && (currentStats.energy ?? 0) > (prevStats.energy ?? 0);
-            const healthIncreased = (effect.health ?? 0) > 0 && (currentStats.health ?? 0) > (prevStats.health ?? 0);
-            const happinessIncreased = (effect.happiness ?? 0) > 0 && (currentStats.happiness ?? 0) > (prevStats.happiness ?? 0);
-            isEffective = hungerIncreased || energyIncreased || healthIncreased || happinessIncreased;
-          } else if (action === 'clean') {
-            // Clean: count when hygiene or happiness INCREASES
-            const hygieneIncreased = (effect.hygiene ?? 0) > 0 && (currentStats.hygiene ?? 0) > (prevStats.hygiene ?? 0);
-            const happinessIncreased = (effect.happiness ?? 0) > 0 && (currentStats.happiness ?? 0) > (prevStats.happiness ?? 0);
-            isEffective = hygieneIncreased || happinessIncreased;
-          } else if (action === 'medicine') {
-            // Medicine: count when health/energy/happiness INCREASE
-            // Do NOT count negative side effects (like happiness decrease on Super Medicine)
-            const healthIncreased = (effect.health ?? 0) > 0 && (currentStats.health ?? 0) > (prevStats.health ?? 0);
-            const energyIncreased = (effect.energy ?? 0) > 0 && (currentStats.energy ?? 0) > (prevStats.energy ?? 0);
-            const happinessIncreased = (effect.happiness ?? 0) > 0 && (currentStats.happiness ?? 0) > (prevStats.happiness ?? 0);
-            isEffective = healthIncreased || energyIncreased || happinessIncreased;
-          } else if (action === 'play') {
-            // Play: EXCEPTION - both happiness increase AND energy decrease are intended effects
-            // Playing naturally consumes energy, so energy decrease counts as valid
-            const happinessIncreased = (effect.happiness ?? 0) > 0 && (currentStats.happiness ?? 0) > (prevStats.happiness ?? 0);
-            const energyDecreased = (effect.energy ?? 0) < 0 && (currentStats.energy ?? 0) < (prevStats.energy ?? 0);
-            isEffective = happinessIncreased || energyDecreased;
-          }
-          
-          if (isEffective) {
-            effectiveItemCount++;
-          }
-        }
+        // Normal stats application for baby/adult — apply once
+        const currentStats = applyItemEffects({ ...statsAfterDecay }, shopItem.effect);
 
         statsUpdate.hunger = clampStat(currentStats.hunger).toString();
         statsChanged.hunger = (currentStats.hunger ?? 0) - (statsAfterDecay.hunger ?? 0);
@@ -382,11 +255,8 @@ export function useBlobbiUseInventoryItem({
       // Get streak updates (will only update if needed based on day)
       const streakUpdates = getStreakTagUpdates(canonical.companion) ?? {};
       
-      // ─── Apply XP Gain (Based on effective item count) ───
-      // Only grant XP for items that actually changed stats.
-      // If user used 100 food items but hunger capped at item #4, only 4 items were effective.
-      // This prevents XP farming by mass-using items after stats are already maxed.
-      const xpGained = effectiveItemCount > 0 ? calculateInventoryActionXP(action, effectiveItemCount) : 0;
+      // ─── Apply XP Gain ───
+      const xpGained = calculateInventoryActionXP(action, 1);
       const currentXP = canonical.companion.experience ?? 0;
       const newXP = applyXPGain(currentXP, xpGained);
       
@@ -406,46 +276,25 @@ export function useBlobbiUseInventoryItem({
 
       updateCompanionEvent(blobbiEvent);
 
-      // ─── Update Profile Storage (kind 11125) ───
-      // CRITICAL: Use canonical.profileStorage and canonical.profileAllTags
-      // instead of profile.storage/profile.allTags to avoid restoring
-      // stale/legacy values after migration
-      const newStorage = decrementStorageItem(canonical.profileStorage, itemId, quantity);
-      const storageValues = createStorageTags(newStorage).map(tag => tag[1]);
-
-      const profileTags = updateBlobbonautTags(canonical.profileAllTags, {
-        storage: storageValues,
-      });
-
-      const profileEvent = await publishEvent({
-        kind: KIND_BLOBBONAUT_PROFILE,
-        content: '',
-        tags: profileTags,
-      });
-
-      updateProfileEvent(profileEvent);
-
-      // ─── Invalidate Queries ───
-      invalidateCompanion();
-      invalidateProfile();
+      // Items are free to use — no storage decrement needed.
+      // No query invalidation needed — the optimistic update above keeps the
+      // cache correct, and ensureCanonicalBeforeAction fetches fresh from relays
+      // before every mutation (read-modify-write pattern).
 
       return {
         itemName: shopItem.name,
         action,
-        quantity,
-        effectiveItemCount, // How many items actually changed stats
         statsChanged,
         xpGained,
         newXP,
       };
     },
-    onSuccess: ({ itemName, action, quantity, xpGained }) => {
+    onSuccess: ({ itemName, action, xpGained }) => {
       const actionMeta = ACTION_METADATA[action];
-      const quantityText = quantity > 1 ? ` (x${quantity})` : '';
       const xpText = formatXPGain(xpGained);
       toast({
         title: `${actionMeta.label} successful!`,
-        description: `Used ${itemName}${quantityText} on your Blobbi. ${xpText}`,
+        description: `Used ${itemName} on your Blobbi. ${xpText}`,
       });
 
       // Track daily mission progress

src/blobbi/actions/hooks/useClaimMissionReward.ts

@@ -1,24 +1,35 @@
 /**
  * useClaimMissionReward - Hook for claiming daily mission rewards
- * 
+ *
  * Handles:
- * - Persisting coin rewards to kind 11125 Blobbonaut profile
- * - Updating localStorage mission state
+ * - Awarding XP to the active companion (Kind 31124)
+ * - Persisting mission claimed state to profile content JSON (Kind 11125)
+ * - Updating the in-memory session store
  * - Idempotent claiming (prevents double-credit)
  * - Optimistic cache updates
+ *
+ * Kind 11125 content JSON is the persistent source of truth.
+ * The in-memory session store is updated for immediate UI feedback.
  */
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNostr } from '@nostrify/react';
 
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
 import { toast } from '@/hooks/useToast';
+import { fetchFreshEvent } from '@/lib/fetchFreshEvent';
 
-import type { BlobbonautProfile } from '@/blobbi/core/lib/blobbi';
+import type { BlobbonautProfile, BlobbiCompanion } from '@/blobbi/core/lib/blobbi';
 import {
   KIND_BLOBBONAUT_PROFILE,
-  updateBlobbonautTags,
+  KIND_BLOBBI_STATE,
 } from '@/blobbi/core/lib/blobbi';
+import {
+  updateDailyMissionsContent,
+  missionToPersistedMission,
+  type PersistedDailyMissions,
+} from '@/blobbi/core/lib/blobbonaut-content';
 import {
   type DailyMissionsState,
   getTodayDateString,
@@ -27,6 +38,8 @@ import {
   isBonusMissionAvailable,
   isBonusMissionClaimed,
   BONUS_MISSION_DEFINITION,
+  readDailyMissionsState,
+  writeDailyMissionsState,
 } from '../lib/daily-missions';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -40,48 +53,32 @@ export const BONUS_MISSION_ID = 'bonus_daily_complete';
 
 export interface ClaimMissionResult {
   missionId: string;
-  coinsEarned: number;
-  newTotalCoins: number;
+  xpEarned: number;
 }
 
-// ─── Constants ────────────────────────────────────────────────────────────────
-
-const STORAGE_KEY = 'blobbi:daily-missions';
-
-// ─── Storage Utilities ────────────────────────────────────────────────────────
-
-function readMissionsState(): DailyMissionsState | null {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    return stored ? JSON.parse(stored) : null;
-  } catch {
-    return null;
-  }
-}
-
-function writeMissionsState(state: DailyMissionsState): void {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
-  } catch (error) {
-    console.warn('[useClaimMissionReward] Failed to write state:', error);
-  }
-}
+// State is read/written via the in-memory session store in daily-missions.ts.
+// Kind 11125 content JSON is the persistent source of truth.
 
 // ─── Hook ─────────────────────────────────────────────────────────────────────
 
 /**
  * Hook to claim daily mission rewards.
  * 
- * This hook persists coin rewards to the kind 11125 Blobbonaut profile event,
- * ensuring rewards are stored on-chain rather than just in localStorage.
+ * Awards XP to the active companion (Kind 31124) and persists
+ * mission state to the profile content JSON (Kind 11125).
  * 
- * @param currentProfile - The current Blobbonaut profile (required for coin updates)
- * @param updateProfileEvent - Callback to update the profile in the query cache
+ * @param currentProfile - The current Blobbonaut profile
+ * @param updateProfileEvent - Optimistic cache update for profile
+ * @param currentCompanion - The active companion to award XP to
+ * @param updateCompanionEvent - Optimistic cache update for companion
  */
 export function useClaimMissionReward(
   currentProfile: BlobbonautProfile | null,
-  updateProfileEvent: (event: import('@nostrify/nostrify').NostrEvent) => void
+  updateProfileEvent: (event: import('@nostrify/nostrify').NostrEvent) => void,
+  currentCompanion?: BlobbiCompanion | null,
+  updateCompanionEvent?: (event: import('@nostrify/nostrify').NostrEvent) => void,
 ) {
+  const { nostr } = useNostr();
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
   const queryClient = useQueryClient();
@@ -96,134 +93,139 @@ export function useClaimMissionReward(
         throw new Error('Profile not found');
       }
 
-      // Read current missions state from localStorage
-      let missionsState = readMissionsState();
+      // Read current missions state from in-memory session store
+      let missionsState = readDailyMissionsState(user.pubkey);
       
       // Ensure we have valid state for today
       if (needsDailyReset(missionsState)) {
-        const previousCoins = missionsState?.totalCoinsEarned ?? 0;
-        missionsState = createDailyMissionsState(getTodayDateString(), user.pubkey, previousCoins);
+        const previousXp = missionsState?.totalXpEarned ?? 0;
+        missionsState = createDailyMissionsState(getTodayDateString(), user.pubkey, previousXp);
       }
 
+      let xpToAward = 0;
+      let updatedState: DailyMissionsState;
+
       // Handle bonus mission claim
       if (missionId === BONUS_MISSION_ID) {
-        // Check if bonus is available
         if (!isBonusMissionAvailable(missionsState!)) {
           throw new Error('Bonus mission not available yet');
         }
-
-        // Check if already claimed
         if (isBonusMissionClaimed(missionsState!)) {
           throw new Error('Bonus reward already claimed');
         }
 
-        const coinsToAdd = BONUS_MISSION_DEFINITION.reward;
-        const newTotalCoins = currentProfile.coins + coinsToAdd;
-
-        // Build updated tags with new coin balance
-        const updatedTags = updateBlobbonautTags(currentProfile.allTags, {
-          coins: newTotalCoins.toString(),
-        });
-
-        // Publish updated profile event
-        const event = await publishEvent({
-          kind: KIND_BLOBBONAUT_PROFILE,
-          content: '',
-          tags: updatedTags,
-        });
-
-        // Update the query cache
-        updateProfileEvent(event);
-
-        // Update localStorage to mark bonus as claimed
-        const updatedState: DailyMissionsState = {
+        xpToAward = BONUS_MISSION_DEFINITION.reward;
+        updatedState = {
           ...missionsState!,
           bonusClaimed: true,
-          totalCoinsEarned: missionsState!.totalCoinsEarned + coinsToAdd,
+          totalXpEarned: missionsState!.totalXpEarned + xpToAward,
         };
+      } else {
+        // Handle regular mission claim
+        const mission = missionsState!.missions.find(m => m.id === missionId);
+        if (!mission) throw new Error('Mission not found');
+        if (mission.claimed) throw new Error('Reward already claimed');
+        if (!mission.completed) throw new Error('Mission not completed yet');
 
-        writeMissionsState(updatedState);
-
-        // Dispatch event for React components to re-render
-        window.dispatchEvent(new CustomEvent('daily-missions-updated', { 
-          detail: { missionId, claimed: true, isBonus: true } 
-        }));
-
-        return {
-          missionId,
-          coinsEarned: coinsToAdd,
-          newTotalCoins,
+        xpToAward = mission.reward;
+        updatedState = {
+          ...missionsState!,
+          missions: missionsState!.missions.map(m =>
+            m.id === missionId ? { ...m, claimed: true } : m
+          ),
+          totalXpEarned: missionsState!.totalXpEarned + xpToAward,
         };
       }
 
-      // Handle regular mission claim
-      const mission = missionsState!.missions.find(m => m.id === missionId);
-      if (!mission) {
-        throw new Error('Mission not found');
-      }
+      // ── 1. Persist mission state to profile content JSON (Kind 11125) ──
 
-      // Check if already claimed (idempotency check)
-      if (mission.claimed) {
-        throw new Error('Reward already claimed');
-      }
-
-      // Check if mission is completed
-      if (!mission.completed) {
-        throw new Error('Mission not completed yet');
-      }
-
-      const coinsToAdd = mission.reward;
-      const newTotalCoins = currentProfile.coins + coinsToAdd;
-
-      // Build updated tags with new coin balance
-      const updatedTags = updateBlobbonautTags(currentProfile.allTags, {
-        coins: newTotalCoins.toString(),
+      // Fetch fresh profile to avoid overwriting concurrent changes
+      const freshProfileEvent = await fetchFreshEvent(nostr, {
+        kinds: [KIND_BLOBBONAUT_PROFILE],
+        authors: [user.pubkey],
       });
+      const existingContent = freshProfileEvent?.content ?? '';
+      const existingTags = freshProfileEvent?.tags ?? currentProfile.allTags;
 
-      // Publish updated profile event to kind 11125
-      const event = await publishEvent({
-        kind: KIND_BLOBBONAUT_PROFILE,
-        content: '',
-        tags: updatedTags,
-      });
-
-      // Update the query cache optimistically
-      updateProfileEvent(event);
-
-      // Now update localStorage to mark mission as claimed
-      const updatedMissions = missionsState!.missions.map(m =>
-        m.id === missionId ? { ...m, claimed: true } : m
-      );
-
-      const updatedState: DailyMissionsState = {
-        ...missionsState!,
-        missions: updatedMissions,
-        totalCoinsEarned: missionsState!.totalCoinsEarned + coinsToAdd,
+      // Build persisted daily missions
+      const persistedMissions: PersistedDailyMissions = {
+        date: updatedState.date,
+        missions: updatedState.missions.map(missionToPersistedMission),
+        bonusClaimed: updatedState.bonusClaimed ?? false,
+        rerollsRemaining: updatedState.rerollsRemaining ?? 3,
+        totalXpEarned: updatedState.totalXpEarned,
+        lastUpdatedAt: Date.now(),
       };
 
-      writeMissionsState(updatedState);
+      const updatedContent = updateDailyMissionsContent(existingContent, persistedMissions);
+
+      // Publish updated profile (tags preserved, content updated)
+      const profileEvent = await publishEvent({
+        kind: KIND_BLOBBONAUT_PROFILE,
+        content: updatedContent,
+        tags: existingTags,
+        prev: freshProfileEvent ?? undefined,
+      });
+
+      updateProfileEvent(profileEvent);
+
+      // ── 2. Award XP to the active companion (Kind 31124) ──
+
+      if (xpToAward > 0 && currentCompanion) {
+        try {
+          // Fetch fresh companion event
+          const freshCompanionEvent = await fetchFreshEvent(nostr, {
+            kinds: [KIND_BLOBBI_STATE],
+            authors: [user.pubkey],
+            '#d': [currentCompanion.d],
+          });
+
+          if (freshCompanionEvent) {
+            const currentXp = parseInt(
+              freshCompanionEvent.tags.find(([t]) => t === 'experience')?.[1] ?? '0',
+              10,
+            );
+            const newXp = currentXp + xpToAward;
+
+            // Update the experience tag
+            const updatedTags = freshCompanionEvent.tags.map(tag =>
+              tag[0] === 'experience' ? ['experience', String(newXp)] : tag,
+            );
+
+            const companionEvent = await publishEvent({
+              kind: KIND_BLOBBI_STATE,
+              content: freshCompanionEvent.content,
+              tags: updatedTags,
+              prev: freshCompanionEvent,
+            });
+
+            updateCompanionEvent?.(companionEvent);
+          }
+        } catch (err) {
+          // XP award failure is non-fatal — mission claim still succeeds
+          console.warn('[useClaimMissionReward] Failed to award XP to companion:', err);
+        }
+      }
+
+      // ── 3. Update in-memory session store for immediate UI feedback ──
+
+      writeDailyMissionsState(user.pubkey, updatedState);
 
       // Dispatch event for React components to re-render
       window.dispatchEvent(new CustomEvent('daily-missions-updated', { 
-        detail: { missionId, claimed: true } 
+        detail: { missionId, claimed: true, isBonus: missionId === BONUS_MISSION_ID } 
       }));
 
-      return {
-        missionId,
-        coinsEarned: coinsToAdd,
-        newTotalCoins,
-      };
+      return { missionId, xpEarned: xpToAward };
     },
-    onSuccess: ({ coinsEarned }) => {
-      // Invalidate profile query to ensure fresh data
+    onSuccess: ({ xpEarned }) => {
       if (user?.pubkey) {
         queryClient.invalidateQueries({ queryKey: ['blobbonaut-profile', user.pubkey] });
       }
 
-      // Show success toast
       toast({
         title: 'Reward Claimed!',
-        description: `You earned ${coinsEarned} coins.`,
+        description: `${currentCompanion?.name ?? 'Your Blobbi'} earned ${xpEarned} XP`,
       });
     },
     onError: (error: Error) => {

src/blobbi/actions/hooks/useDailyMissions.ts

@@ -1,21 +1,28 @@
 /**
  * useDailyMissions - Hook for managing Blobbi daily missions
- * 
- * Provides:
- * - Daily mission state management with localStorage persistence
- * - Automatic daily reset
- * - Progress tracking functions
- * - Read-only access to mission state (claiming is handled by useClaimMissionReward)
- * - Stage-based filtering (only shows missions user can complete)
- * - Bonus mission tracking
- * 
- * Note: Reward claiming should be done via useClaimMissionReward hook,
- * which persists coins to the kind 11125 Blobbonaut profile.
+ *
+ * ── Source-of-Truth Architecture ──────────────────────────────────────────────
+ *
+ *   Kind 11125 content JSON is the ONLY persistent source of truth.
+ *   This hook maintains an in-memory session cache for instant UI updates.
+ *
+ *   Hydration flow:
+ *     1. On mount / account switch, check the in-memory session store.
+ *     2. If empty, hydrate from `persistedDailyMissions` (parsed from the
+ *        kind 11125 event that the caller provides).
+ *     3. If kind 11125 also has no data, generate fresh missions for today.
+ *     4. During the session, progress/rerolls update the session store.
+ *     5. Claims persist to kind 11125 via useClaimMissionReward.
+ *     6. On page refresh the session store is empty → re-hydrates from kind 11125.
+ *
+ *   localStorage is NOT used. This eliminates cross-account leakage.
  */
 
-import { useMemo, useEffect, useState, useCallback } from 'react';
+import { useMemo, useEffect, useState, useCallback, useRef } from 'react';
 
 import { useCurrentUser } from '@/hooks/useCurrentUser';
+import type { PersistedDailyMissions } from '@/blobbi/core/lib/blobbonaut-content';
+import { persistedMissionToMission } from '@/blobbi/core/lib/blobbonaut-content';
 import {
   type DailyMissionsState,
   type DailyMission,
@@ -32,6 +39,8 @@ import {
   BONUS_MISSION_DEFINITION,
   getRerollsRemaining,
   MAX_DAILY_REROLLS,
+  readDailyMissionsState,
+  writeDailyMissionsState,
 } from '../lib/daily-missions';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -39,6 +48,13 @@ import {
 export interface UseDailyMissionsOptions {
   /** Available Blobbi stages the user has (filters eligible missions) */
   availableStages?: BlobbiStage[];
+  /**
+   * Persisted daily missions from the kind 11125 profile content.
+   * Pass `profile.content.dailyMissions` here. This is the persistent
+   * source of truth — the hook hydrates from it when the session store
+   * is empty (page refresh, account switch).
+   */
+  persistedDailyMissions?: PersistedDailyMissions;
 }
 
 export interface UseDailyMissionsResult {
@@ -52,8 +68,8 @@ export interface UseDailyMissionsResult {
   totalPotentialReward: number;
   /** Total claimed reward for today */
   todayClaimedReward: number;
-  /** Lifetime total coins earned from daily missions */
-  lifetimeCoinsEarned: number;
+  /** Lifetime total XP earned from daily missions */
+  lifetimeXpEarned: number;
   /** Whether the bonus mission is available (all regular missions completed) */
   bonusAvailable: boolean;
   /** Whether the bonus mission has been claimed */
@@ -70,54 +86,57 @@ export interface UseDailyMissionsResult {
   forceReset: () => void;
 }
 
-// ─── Constants ────────────────────────────────────────────────────────────────
-
-const STORAGE_KEY = 'blobbi:daily-missions';
-
-// ─── Storage Utilities ────────────────────────────────────────────────────────
-
-function readMissionsState(): DailyMissionsState | null {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    return stored ? JSON.parse(stored) : null;
-  } catch {
-    return null;
-  }
-}
-
-function writeMissionsState(state: DailyMissionsState): void {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
-  } catch (error) {
-    console.warn('[useDailyMissions] Failed to write state:', error);
-  }
-}
-
 // ─── Hook ─────────────────────────────────────────────────────────────────────
 
 export function useDailyMissions(options: UseDailyMissionsOptions = {}): UseDailyMissionsResult {
-  const { availableStages } = options;
+  const { availableStages, persistedDailyMissions } = options;
   const { user } = useCurrentUser();
   const pubkey = user?.pubkey;
 
-  // Read state directly from localStorage, with a version counter to trigger re-reads
+  // Version counter to trigger re-reads from the in-memory session store
+  // when external mutations (tracker, reroll, claim) update it.
   const [version, setVersion] = useState(0);
-  
-  // Read from localStorage on every render when version changes
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- version is intentionally used to force re-read
-  const state = useMemo(() => readMissionsState(), [version]);
-  
-  // Wrapper to write state and update version
+
+  // Track the last pubkey we hydrated for, so we re-hydrate on account switch.
+  const hydratedForPubkey = useRef<string | undefined>(undefined);
+
+  // ── Hydration from kind 11125 ──
+  // When the session store is empty for this pubkey (page refresh, first load,
+  // account switch), hydrate from the persisted kind 11125 data.
+  // This runs synchronously in useMemo so the first render has correct data.
+  const state = useMemo(() => {
+    // Reset hydration tracking on account switch
+    if (pubkey !== hydratedForPubkey.current) {
+      hydratedForPubkey.current = pubkey;
+    }
+
+    // Check session store first
+    const sessionState = readDailyMissionsState(pubkey);
+    if (sessionState) return sessionState;
+
+    // Session store empty — try to hydrate from kind 11125
+    if (pubkey && persistedDailyMissions) {
+      const hydrated = hydrateFromPersisted(persistedDailyMissions);
+      if (hydrated) {
+        writeDailyMissionsState(pubkey, hydrated);
+        return hydrated;
+      }
+    }
+
+    // No persisted data — return null (will be handled below)
+    return null;
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- version forces re-read from session store
+  }, [version, pubkey, persistedDailyMissions]);
+
+  // Wrapper to write state to session store and bump version for re-render
   const setState = useCallback((newState: DailyMissionsState) => {
-    writeMissionsState(newState);
+    writeDailyMissionsState(pubkey, newState);
     setVersion((v) => v + 1);
-  }, []);
+  }, [pubkey]);
 
   // Listen for external updates from mutations (reroll, claim, progress tracking)
-  // This re-reads localStorage when other hooks modify it directly
   useEffect(() => {
     const handleExternalUpdate = () => {
-      // Bump version to trigger a re-read from localStorage
       setVersion((v) => v + 1);
     };
 
@@ -130,33 +149,31 @@ export function useDailyMissions(options: UseDailyMissionsOptions = {}): UseDail
 
   // Ensure we have valid state for today
   const currentState = useMemo(() => {
-    // Check if we need to reset for a new day
     if (needsDailyReset(state)) {
-      const previousCoins = state?.totalCoinsEarned ?? 0;
-      const newState = createDailyMissionsState(getTodayDateString(), pubkey, previousCoins, availableStages);
-      // Persist the reset state (this will trigger version bump via setState)
-      writeMissionsState(newState);
+      const previousXp = state?.totalXpEarned ?? 0;
+      const newState = createDailyMissionsState(getTodayDateString(), pubkey, previousXp, availableStages);
+      writeDailyMissionsState(pubkey, newState);
       return newState;
     }
-    
+
     // Migration: ensure rerollsRemaining is set for old state
     if (state && state.rerollsRemaining === undefined) {
       const migratedState = {
         ...state,
         rerollsRemaining: MAX_DAILY_REROLLS,
       };
-      writeMissionsState(migratedState);
+      writeDailyMissionsState(pubkey, migratedState);
       return migratedState;
     }
-    
+
     return state!;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state, pubkey, stagesKey]);
 
   // Force reset missions (for testing)
   const forceReset = () => {
-    const previousCoins = state?.totalCoinsEarned ?? 0;
-    const newState = createDailyMissionsState(getTodayDateString(), pubkey, previousCoins, availableStages);
+    const previousXp = state?.totalXpEarned ?? 0;
+    const newState = createDailyMissionsState(getTodayDateString(), pubkey, previousXp, availableStages);
     setState(newState);
   };
 
@@ -170,18 +187,18 @@ export function useDailyMissions(options: UseDailyMissionsOptions = {}): UseDail
   const noMissionsAvailable = missions.length === 0;
   const rerollsRemaining = getRerollsRemaining(currentState);
   const maxRerolls = MAX_DAILY_REROLLS;
-  
+
   // Total potential includes bonus if regular missions exist
   const basePotentialReward = getTotalPotentialReward(currentState);
-  const totalPotentialReward = missions.length > 0 
-    ? basePotentialReward + bonusReward 
+  const totalPotentialReward = missions.length > 0
+    ? basePotentialReward + bonusReward
     : 0;
-  
+
   // Today's claimed includes bonus if claimed
   const baseTodayClaimedReward = getTodayClaimedReward(currentState);
   const todayClaimedReward = baseTodayClaimedReward + (bonusClaimed ? bonusReward : 0);
-  
-  const lifetimeCoinsEarned = currentState.totalCoinsEarned;
+
+  const lifetimeXpEarned = currentState.totalXpEarned;
 
   return {
     missions,
@@ -189,7 +206,7 @@ export function useDailyMissions(options: UseDailyMissionsOptions = {}): UseDail
     allClaimed,
     totalPotentialReward,
     todayClaimedReward,
-    lifetimeCoinsEarned,
+    lifetimeXpEarned,
     bonusAvailable,
     bonusClaimed,
     bonusReward,
@@ -199,3 +216,26 @@ export function useDailyMissions(options: UseDailyMissionsOptions = {}): UseDail
     forceReset,
   };
 }
+
+// ─── Hydration Helper ─────────────────────────────────────────────────────────
+
+/**
+ * Convert persisted daily missions (from kind 11125 content) to the
+ * runtime DailyMissionsState used by the hooks.
+ *
+ * Returns null if the persisted data is for a different day (stale).
+ */
+function hydrateFromPersisted(persisted: PersistedDailyMissions): DailyMissionsState | null {
+  // Only hydrate if the persisted data is for today
+  if (persisted.date !== getTodayDateString()) {
+    return null;
+  }
+
+  return {
+    date: persisted.date,
+    missions: persisted.missions.map(persistedMissionToMission),
+    totalXpEarned: persisted.totalXpEarned,
+    bonusClaimed: persisted.bonusClaimed,
+    rerollsRemaining: persisted.rerollsRemaining,
+  };
+}

src/blobbi/actions/hooks/useEvolveTasks.ts

@@ -30,8 +30,8 @@ import {
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
-/** Kind for wall edit events */
-export const KIND_WALL_EDIT = 16769;
+/** Kind for custom profile tabs event */
+export const KIND_PROFILE_TABS = 16769;
 
 /** Required themes for evolve task */
 export const EVOLVE_REQUIRED_THEMES = 3;
@@ -117,7 +117,7 @@ export function isValidEvolvePost(event: NostrEvent, blobbiName: string): boolea
  * 2. Create 3 Color Moments (kind 3367)
  * 3. Create 1 Evolve Post (kind 1) - lighter than hatch, evolve-specific
  * 4. Interact 21 times (tracked via companion.tasks cache)
- * 5. Edit Wall once (kind 16769)
+ * 5. Edit Profile once (kind 0 profile metadata OR kind 16769 custom tabs)
  * 
  * DYNAMIC TASK (stat-based, NEVER cached):
  * 6. Maintain All Stats >= 80
@@ -165,14 +165,14 @@ export function useEvolveTasks(
           since: stateStartedAt,
           limit: 50, // Only need 1 valid evolve post
         },
-        // Wall edits after start
+        // Custom profile tabs after start
         {
-          kinds: [KIND_WALL_EDIT],
+          kinds: [KIND_PROFILE_TABS],
           authors: [pubkey],
           since: stateStartedAt,
           limit: 1, // Only need 1
         },
-        // Profile metadata after start (for Blobbi shape check)
+        // Profile metadata after start (for Blobbi shape check + profile edit mission)
         {
           kinds: [KIND_PROFILE_METADATA],
           authors: [pubkey],
@@ -197,8 +197,8 @@ export function useEvolveTasks(
         e.kind === KIND_SHORT_TEXT_NOTE && e.created_at >= stateStartedAt
       );
       
-      const wallEditEvents = events.filter(e => 
-        e.kind === KIND_WALL_EDIT && e.created_at >= stateStartedAt
+      const profileTabsEvents = events.filter(e => 
+        e.kind === KIND_PROFILE_TABS && e.created_at >= stateStartedAt
       );
       
       // Get latest profile after start
@@ -211,7 +211,7 @@ export function useEvolveTasks(
         themeEvents,
         colorMomentEvents,
         postEvents,
-        wallEditEvents,
+        profileTabsEvents,
         profileAfter,
       };
     },
@@ -287,20 +287,21 @@ export function useEvolveTasks(
     // No action - just interact with Blobbi
   });
   
-  // 5. Edit Wall once (PERSISTENT)
-  const wallEditCount = data?.wallEditEvents?.length ?? 0;
-  const hasWallEdit = wallEditCount >= 1;
+  // 5. Edit Profile once (PERSISTENT) — kind 0 profile metadata OR kind 16769 custom tabs
+  const hasTabsEdit = (data?.profileTabsEvents?.length ?? 0) >= 1;
+  const hasMetadataEdit = !!data?.profileAfter;
+  const hasProfileEdit = hasTabsEdit || hasMetadataEdit;
   tasks.push({
-    id: 'edit_wall',
-    name: 'Edit Your Wall',
-    description: 'Customize your profile wall',
-    current: hasWallEdit ? 1 : 0,
+    id: 'edit_profile',
+    name: 'Edit Your Profile',
+    description: 'Update your profile info or customize your profile tabs',
+    current: hasProfileEdit ? 1 : 0,
     required: 1,
-    completed: hasWallEdit,
+    completed: hasProfileEdit,
     type: 'persistent',
     action: 'navigate',
     actionTarget: '/settings/profile',
-    actionLabel: 'Edit Wall',
+    actionLabel: 'Edit Profile',
   });
   
   // ─── Compute DYNAMIC Task (stat-based, NEVER cached) ───

src/blobbi/actions/hooks/useHatchTasks.ts

@@ -34,10 +34,10 @@ export const KIND_SHORT_TEXT_NOTE = 1;
 export const HATCH_REQUIRED_INTERACTIONS = 7;
 
 /** Required hashtags for the Blobbi post (excludes Blobbi name, which is dynamic) */
-export const BLOBBI_POST_REQUIRED_HASHTAGS = ['blobbi', 'ditto', 'nostr'];
+export const BLOBBI_POST_REQUIRED_HASHTAGS = ['blobbi'];
 
-/** Prefix text for Blobbi hatch post */
-export const BLOBBI_POST_PREFIX = 'Hello Nostr! Posting to hatch';
+/** Prefix text for Blobbi hatch post (the Blobbi name is appended after this) */
+export const BLOBBI_POST_PREFIX = 'Posting to hatch';
 
 // Legacy export for backwards compatibility
 export const REQUIRED_INTERACTIONS = HATCH_REQUIRED_INTERACTIONS;
@@ -110,16 +110,28 @@ export interface HatchTasksResult {
 
 // ─── Helper Functions ─────────────────────────────────────────────────────────
 
+/**
+ * Build the required phrase for a hatch post.
+ * Format: "Posting to hatch {CapitalizedName} #blobbi"
+ */
+export function buildHatchPhrase(blobbiName: string): string {
+  const capitalized = blobbiName.charAt(0).toUpperCase() + blobbiName.slice(1);
+  return `${BLOBBI_POST_PREFIX} ${capitalized} #blobbi`;
+}
+
 /**
  * Check if a post is a valid Blobbi hatch post.
- * Must contain the required prefix and all required hashtags including the Blobbi name.
+ * The post must contain the required phrase: "Posting to hatch {Name} #blobbi"
+ * The user may add extra text before or after it.
  * 
  * @param event - The Nostr event to validate
- * @param blobbiName - The Blobbi's name (will be sanitized and checked as hashtag)
+ * @param blobbiName - The Blobbi's name
  */
 export function isValidHatchPost(event: NostrEvent, blobbiName: string): boolean {
-  // Check content starts with prefix
-  if (!event.content.startsWith(BLOBBI_POST_PREFIX)) {
+  const phrase = buildHatchPhrase(blobbiName);
+
+  // The phrase must appear somewhere in the content
+  if (!event.content.includes(phrase)) {
     return false;
   }
   
@@ -128,18 +140,12 @@ export function isValidHatchPost(event: NostrEvent, blobbiName: string): boolean
     .filter(tag => tag[0] === 't')
     .map(tag => tag[1]?.toLowerCase());
   
-  // All required hashtags must be present
+  // All required hashtags must be present as t tags
   const hasRequiredHashtags = BLOBBI_POST_REQUIRED_HASHTAGS.every(required => 
     hashtags.includes(required.toLowerCase())
   );
   
-  if (!hasRequiredHashtags) {
-    return false;
-  }
-  
-  // Blobbi name hashtag must also be present
-  const blobbiHashtag = sanitizeToHashtag(blobbiName);
-  return hashtags.includes(blobbiHashtag);
+  return hasRequiredHashtags;
 }
 
 // Legacy function name for backwards compatibility

src/blobbi/actions/hooks/useRerollMission.ts

@@ -1,11 +1,15 @@
 /**
  * useRerollMission - Hook for rerolling daily missions
- * 
+ *
  * Handles:
  * - Replacing a mission with a new one from the pool
  * - Tracking reroll usage (max 3 per day)
  * - Respecting stage-based mission filtering
- * - Persisting state to localStorage
+ * - Updating the in-memory session store
+ *
+ * Note: Rerolled state is held in the session store until a claim
+ * persists it to kind 11125. Rerolls that happen without a subsequent
+ * claim are lost on page refresh — this is intentional.
  */
 
 import { useMutation } from '@tanstack/react-query';
@@ -14,7 +18,6 @@ import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { toast } from '@/hooks/useToast';
 
 import {
-  type DailyMissionsState,
   type DailyMission,
   type BlobbiStage,
   getTodayDateString,
@@ -23,6 +26,8 @@ import {
   rerollMission,
   canRerollMission,
   getRerollsRemaining,
+  readDailyMissionsState,
+  writeDailyMissionsState,
 } from '../lib/daily-missions';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -38,37 +43,7 @@ export interface RerollMissionResult {
   rerollsRemaining: number;
 }
 
-// ─── Constants ────────────────────────────────────────────────────────────────
-
-const STORAGE_KEY = 'blobbi:daily-missions';
-
-// ─── Storage Utilities ────────────────────────────────────────────────────────
-
-function readMissionsState(): DailyMissionsState | null {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (!stored) return null;
-    
-    const state = JSON.parse(stored) as DailyMissionsState;
-    
-    // Migration: ensure rerollsRemaining is set for old state
-    if (state.rerollsRemaining === undefined) {
-      state.rerollsRemaining = 3; // MAX_DAILY_REROLLS
-    }
-    
-    return state;
-  } catch {
-    return null;
-  }
-}
-
-function writeMissionsState(state: DailyMissionsState): void {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
-  } catch (error) {
-    console.warn('[useRerollMission] Failed to write state:', error);
-  }
-}
+// State is read/written via the in-memory session store in daily-missions.ts.
 
 // ─── Hook ─────────────────────────────────────────────────────────────────────
 
@@ -87,13 +62,13 @@ export function useRerollMission() {
         throw new Error('You must be logged in to reroll missions');
       }
 
-      // Read current missions state from localStorage
-      let missionsState = readMissionsState();
+      // Read current missions state from in-memory session store
+      let missionsState = readDailyMissionsState(user.pubkey);
       
       // Ensure we have valid state for today
       if (needsDailyReset(missionsState)) {
-        const previousCoins = missionsState?.totalCoinsEarned ?? 0;
-        missionsState = createDailyMissionsState(getTodayDateString(), user.pubkey, previousCoins, availableStages);
+        const previousXp = missionsState?.totalXpEarned ?? (missionsState as unknown as { totalCoinsEarned?: number })?.totalCoinsEarned ?? 0;
+        missionsState = createDailyMissionsState(getTodayDateString(), user.pubkey, previousXp, availableStages);
       }
 
       // Check if reroll is allowed
@@ -118,8 +93,8 @@ export function useRerollMission() {
         throw new Error('No replacement missions available. All alternative missions may already be in your daily list.');
       }
 
-      // Persist the updated state
-      writeMissionsState(result.state);
+      // Update the in-memory session store
+      writeDailyMissionsState(user.pubkey, result.state);
 
       // Dispatch event for React components to re-render
       window.dispatchEvent(new CustomEvent('daily-missions-updated', { 

src/blobbi/actions/index.ts

@@ -55,8 +55,6 @@ export {
   getInteractionCount,
   filterPersistentTasks,
   sanitizeToHashtag,
-  isValidHatchPost,
-  isValidBlobbiPost, // Legacy export
   KIND_THEME_DEFINITION,
   KIND_COLOR_MOMENT,
   HATCH_REQUIRED_INTERACTIONS,
@@ -70,7 +68,7 @@ export {
   useEvolveTasks,
   getEvolveInteractionCount,
   isValidEvolvePost,
-  KIND_WALL_EDIT,
+  KIND_PROFILE_TABS,
   EVOLVE_REQUIRED_THEMES,
   EVOLVE_REQUIRED_COLOR_MOMENTS,
   EVOLVE_REQUIRED_POSTS,

src/blobbi/actions/lib/blobbi-action-utils.ts

@@ -2,23 +2,23 @@
 
 import { STAT_MIN, STAT_MAX, type BlobbiCompanion, type BlobbiStats, type StorageItem } from '@/blobbi/core/lib/blobbi';
 import type { ItemEffect, ShopItemCategory } from '@/blobbi/shop/types/shop.types';
-import { getShopItemById } from '@/blobbi/shop/lib/blobbi-shop-items';
+import { getShopItemById, getLiveShopItems } from '@/blobbi/shop/lib/blobbi-shop-items';
 
 // ─── Action Types ─────────────────────────────────────────────────────────────
 
 /**
- * Actions that consume inventory items
+ * Item-based care actions (use a shop catalog item on the companion)
  */
 export type InventoryAction = 'feed' | 'play' | 'clean' | 'medicine';
 
 /**
- * Non-inventory actions that don't consume items
- * These actions affect stats directly without using shop items.
+ * Direct actions that don't use items.
+ * These actions affect stats directly without selecting a shop item.
  */
 export type DirectAction = 'play_music' | 'sing';
 
 /**
- * All Blobbi actions (inventory + direct)
+ * All Blobbi actions (item-based + direct)
  */
 export type BlobbiAction = InventoryAction | DirectAction;
 
@@ -33,7 +33,7 @@ export const ACTION_TO_ITEM_TYPE: Record<InventoryAction, ShopItemCategory> = {
 };
 
 /**
- * Action metadata for UI display (inventory actions)
+ * Action metadata for UI display (item-based care actions)
  */
 export const ACTION_METADATA: Record<InventoryAction, { label: string; description: string; icon: string }> = {
   feed: {
@@ -59,7 +59,7 @@ export const ACTION_METADATA: Record<InventoryAction, { label: string; descripti
 };
 
 /**
- * Action metadata for direct actions (non-inventory)
+ * Action metadata for direct actions (no item required)
  */
 export const DIRECT_ACTION_METADATA: Record<DirectAction, { label: string; description: string; icon: string }> = {
   play_music: {
@@ -270,10 +270,10 @@ export function hasHappinessEffectForEgg(effects: ItemEffect | undefined): boole
   return effects.happiness !== undefined && effects.happiness !== 0;
 }
 
-// ─── Inventory Helpers ────────────────────────────────────────────────────────
+// ─── Item Helpers ─────────────────────────────────────────────────────────────
 
 /**
- * Resolved inventory item with shop metadata
+ * Resolved catalog item with shop metadata
  */
 export interface ResolvedInventoryItem {
   itemId: string;
@@ -285,7 +285,7 @@ export interface ResolvedInventoryItem {
 }
 
 /**
- * Options for filtering inventory by action
+ * Options for filtering catalog items by action
  */
 export interface FilterInventoryOptions {
   /** Companion stage - used to filter items by egg-compatible effects */
@@ -293,8 +293,8 @@ export interface FilterInventoryOptions {
 }
 
 /**
- * Filter inventory items by action type.
- * Returns resolved items with shop metadata.
+ * Get all available items for an action type from the shop catalog.
+ * Items are abilities/tools — no inventory ownership is required.
  * 
  * Filtering rules:
  * - Only items matching the action's item type are included
@@ -304,22 +304,20 @@ export interface FilterInventoryOptions {
  *   - clean action: only items with hygiene or happiness effect
  */
 export function filterInventoryByAction(
-  storage: StorageItem[],
+  _storage: StorageItem[],
   action: InventoryAction,
   options: FilterInventoryOptions = {}
 ): ResolvedInventoryItem[] {
   const allowedType = ACTION_TO_ITEM_TYPE[action];
   const result: ResolvedInventoryItem[] = [];
   const isEgg = options.stage === 'egg';
+  const allItems = getLiveShopItems();
 
-  for (const storageItem of storage) {
-    const shopItem = getShopItemById(storageItem.itemId);
-    if (!shopItem) continue;
+  for (const shopItem of allItems) {
     if (shopItem.type !== allowedType) continue;
-    if (storageItem.quantity <= 0) continue;
 
     // Shell Repair Kit: only show for eggs in medicine modal
-    if (storageItem.itemId === SHELL_REPAIR_KIT_ID && !isEgg) {
+    if (shopItem.id === SHELL_REPAIR_KIT_ID && !isEgg) {
       continue;
     }
 
@@ -334,8 +332,8 @@ export function filterInventoryByAction(
     }
 
     result.push({
-      itemId: storageItem.itemId,
-      quantity: storageItem.quantity,
+      itemId: shopItem.id,
+      quantity: Infinity,
       name: shopItem.name,
       icon: shopItem.icon,
       type: shopItem.type,
@@ -376,7 +374,7 @@ export function decrementStorageItem(
 // ─── Stage Restriction Helpers ────────────────────────────────────────────────
 
 /**
- * Stages that can use general inventory items (food, toys, hygiene)
+ * Stages that can use general items (food, toys, hygiene)
  */
 export const GENERAL_ITEM_USABLE_STAGES = ['baby', 'adult'] as const;
 
@@ -409,14 +407,14 @@ export const EGG_VISIBLE_ACTIONS: BlobbiAction[] = ['clean', 'medicine', 'play_m
 export const EGG_ALLOWED_ACTIONS = EGG_ALLOWED_INVENTORY_ACTIONS;
 
 /**
- * Check if a companion can use a specific inventory action.
+ * Check if a companion can use a specific item action.
  * 
  * Note: This function no longer hard-blocks egg actions at the domain layer.
  * UI visibility is handled separately by `isActionVisibleForStage()`.
  * The domain layer allows all actions - UI chooses what to show.
  */
 export function canUseAction(_companion: BlobbiCompanion, _action: InventoryAction): boolean {
-  // All stages can technically use all inventory actions at the domain layer.
+  // All stages can technically use all item actions at the domain layer.
   // UI filtering determines what actions are shown to users.
   return true;
 }
@@ -442,7 +440,7 @@ export function isActionVisibleForStage(stage: 'egg' | 'baby' | 'adult', action:
 }
 
 /**
- * Check if a companion can use general inventory items (feed, play, clean).
+ * Check if a companion can use general items (feed, play, clean).
  * Eggs cannot use food, toys, or hygiene items.
  * @deprecated Use canUseAction(companion, action) for action-specific checks
  */

src/blobbi/actions/lib/blobbi-xp.ts

@@ -7,8 +7,8 @@
  * Design Philosophy:
  * - Different actions award different XP to reflect their complexity/value
  * - XP values are balanced to encourage variety in care activities
- * - Direct actions (sing, play_music) give moderate XP as they're free
- * - Inventory actions (feed, play, clean, medicine) give varied XP based on resource cost
+ * - Item actions (feed, play, clean, medicine) give varied XP per action type
+ * - Direct actions (sing, play_music) give moderate XP
  * - XP accumulates across all life stages and never resets
  */
 
@@ -17,19 +17,18 @@ import type { BlobbiAction, InventoryAction, DirectAction } from './blobbi-actio
 // ─── XP Values by Action ──────────────────────────────────────────────────────
 
 /**
- * Base XP values for inventory actions (feed, play, clean, medicine).
- * These actions consume items from the player's storage.
+ * Base XP values for item-based care actions (feed, play, clean, medicine).
  */
 export const INVENTORY_ACTION_XP: Record<InventoryAction, number> = {
   feed: 5,      // Feeding is common and essential - moderate XP
   play: 8,      // Playing toys provides good interaction - higher XP
   clean: 6,     // Hygiene maintenance is important - moderate-high XP
-  medicine: 10, // Medicine is costly and critical - highest inventory XP
+  medicine: 10, // Medicine is critical - highest item XP
 };
 
 /**
  * Base XP values for direct actions (play_music, sing).
- * These actions don't consume items - they're free activities.
+ * These actions don't require selecting an item.
  */
 export const DIRECT_ACTION_XP: Record<DirectAction, number> = {
   play_music: 7,  // Playing music is engaging - good XP
@@ -58,11 +57,10 @@ export function calculateActionXP(action: BlobbiAction): number {
 }
 
 /**
- * Calculate total XP gain for using multiple items.
- * Each item use counts as a separate action for XP purposes.
+ * Calculate XP gain for an item-based care action.
  * 
  * @param action - The action performed
- * @param quantity - Number of items used (defaults to 1)
+ * @param quantity - Number of times performed (always 1 in current usage)
  * @returns Total XP points earned
  */
 export function calculateInventoryActionXP(action: InventoryAction, quantity: number = 1): number {
@@ -88,8 +86,8 @@ export function applyXPGain(currentXP: number | undefined, xpGain: number): numb
  * Get XP gain summary for displaying to the user.
  * 
  * @param action - The action performed
- * @param quantity - Number of times the action was performed (for inventory actions)
- * @returns Object with xpGained and total quantity
+ * @param quantity - Number of times the action was performed (always 1 in current usage)
+ * @returns Object with xpGained and quantity
  */
 export function getXPGainSummary(
   action: BlobbiAction,

src/blobbi/actions/lib/daily-mission-tracker.ts

@@ -1,109 +1,80 @@
 /**
  * Daily Mission Tracker - Standalone progress tracking utility
- * 
+ *
  * This module provides a simple way to track daily mission progress
- * without requiring React hooks or context. It directly manipulates
- * localStorage for immediate persistence.
- * 
- * This approach allows action hooks (which may be called outside of
- * the daily missions hook context) to record progress.
+ * without requiring React hooks or context. It reads/writes the
+ * in-memory session store for immediate updates.
+ *
+ * ── Source of Truth ───────────────────────────────────────────────────────────
+ *
+ *   The in-memory session store (in daily-missions.ts) holds the current
+ *   session's mission state. Kind 11125 content JSON is the persistent
+ *   source of truth. This tracker updates the session store only — it does
+ *   NOT persist to kind 11125 (that happens when rewards are claimed via
+ *   useClaimMissionReward).
+ *
+ *   Consequence: unclaimed progress is lost on page refresh. This is
+ *   intentional — it avoids cross-account leakage and keeps the tracker
+ *   simple (no Nostr write path needed).
  */
 
 import {
-  type DailyMissionsState,
   type DailyMissionAction,
-  getTodayDateString,
-  needsDailyReset,
-  createDailyMissionsState,
   updateMissionProgress,
+  readDailyMissionsState,
+  writeDailyMissionsState,
 } from './daily-missions';
 
-// ─── Constants ────────────────────────────────────────────────────────────────
-
-const STORAGE_KEY = 'blobbi:daily-missions';
-
-// ─── Storage Utilities ────────────────────────────────────────────────────────
-
-/**
- * Read the current daily missions state from localStorage
- */
-function readState(): DailyMissionsState | null {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    return stored ? JSON.parse(stored) : null;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Write the daily missions state to localStorage
- */
-function writeState(state: DailyMissionsState): void {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
-  } catch (error) {
-    console.warn('[DailyMissionTracker] Failed to write state:', error);
-  }
-}
-
-/**
- * Ensure we have a valid state for today, creating one if necessary
- */
-function ensureCurrentState(pubkey?: string): DailyMissionsState {
-  const current = readState();
-  
-  if (needsDailyReset(current)) {
-    const previousCoins = current?.totalCoinsEarned ?? 0;
-    const newState = createDailyMissionsState(getTodayDateString(), pubkey, previousCoins);
-    writeState(newState);
-    return newState;
-  }
-  
-  return current!;
-}
-
 // ─── Public API ───────────────────────────────────────────────────────────────
 
 /**
  * Record progress for a daily mission action.
  * This function can be called from anywhere (hooks, event handlers, etc.)
- * and will immediately persist to localStorage.
- * 
+ * and will immediately update the in-memory session store.
+ *
+ * No-ops silently if:
+ *   - pubkey is not provided (logged-out users don't track)
+ *   - no session state exists yet for this pubkey (hook hasn't hydrated)
+ *
  * @param action - The action type that was performed
  * @param count - Number of times the action was performed (default: 1)
- * @param pubkey - Optional user pubkey for personalized mission selection
+ * @param pubkey - User pubkey (required for account-scoped state)
  */
 export function trackDailyMissionProgress(
   action: DailyMissionAction,
   count: number = 1,
   pubkey?: string
 ): void {
-  const current = ensureCurrentState(pubkey);
+  const current = readDailyMissionsState(pubkey);
+  if (!current) return;
+
   const updated = updateMissionProgress(current, action, count);
-  writeState(updated);
-  
-  // Dispatch a custom event so React components can re-render if needed
+  writeDailyMissionsState(pubkey, updated);
+
+  // Dispatch a custom event so React components can re-render
   window.dispatchEvent(new CustomEvent('daily-missions-updated', { detail: { action, count } }));
 }
 
 /**
  * Convenience function to track multiple actions at once.
  * Useful when an action should count toward multiple missions.
- * 
+ *
+ * No-ops silently if pubkey is not provided or no session state exists.
+ *
  * @param actions - Array of actions to track
- * @param pubkey - Optional user pubkey
+ * @param pubkey - User pubkey (required for account-scoped state)
  */
 export function trackMultipleDailyMissionActions(
   actions: DailyMissionAction[],
   pubkey?: string
 ): void {
-  let current = ensureCurrentState(pubkey);
-  
+  let current = readDailyMissionsState(pubkey);
+  if (!current) return;
+
   for (const action of actions) {
     current = updateMissionProgress(current, action, 1);
   }
-  
-  writeState(current);
+
+  writeDailyMissionsState(pubkey, current);
   window.dispatchEvent(new CustomEvent('daily-missions-updated', { detail: { actions } }));
 }

src/blobbi/actions/lib/daily-missions.ts

@@ -3,7 +3,7 @@
  * 
  * This module defines the daily mission pool, selection logic, and types.
  * Daily missions are separate from hatch/evolve missions and provide
- * daily engagement loops with coin rewards.
+ * daily engagement loops with XP rewards applied to the active companion.
  */
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -40,7 +40,7 @@ export interface DailyMissionDefinition {
   action: DailyMissionAction;
   /** Number of times the action must be performed */
   requiredCount: number;
-  /** Coin reward for completing this mission */
+  /** XP reward for completing this mission (applied to active companion) */
   reward: number;
   /** Selection weight (higher = more likely to be selected) */
   weight: number;
@@ -61,15 +61,19 @@ export interface DailyMission extends DailyMissionDefinition {
 }
 
 /**
- * Stored state for daily missions (persisted in localStorage)
+ * Stored state for daily missions.
+ *
+ * Source of truth: Kind 11125 profile content JSON (`dailyMissions` section).
+ * During a session, state is held in an in-memory map for instant UI updates.
+ * On page load, the hook hydrates from kind 11125. localStorage is NOT used.
  */
 export interface DailyMissionsState {
   /** The date string (YYYY-MM-DD) when these missions were generated */
   date: string;
   /** The selected missions for this day */
   missions: DailyMission[];
-  /** Total coins earned from daily missions (lifetime) */
-  totalCoinsEarned: number;
+  /** Total XP earned from daily missions (lifetime) */
+  totalXpEarned: number;
   /** Whether the bonus mission has been claimed today */
   bonusClaimed?: boolean;
   /** Number of rerolls remaining for today (resets daily, max 3) */
@@ -81,6 +85,67 @@ export interface DailyMissionsState {
 /** Maximum number of mission rerolls allowed per day */
 export const MAX_DAILY_REROLLS = 3;
 
+// ─── In-Memory Session Store ──────────────────────────────────────────────────
+
+/**
+ * In-memory, pubkey-scoped store for daily missions state.
+ *
+ * ── Source-of-Truth Architecture ──────────────────────────────────────────────
+ *
+ *   Kind 11125 content JSON (`dailyMissions` section) is the ONLY persistent
+ *   source of truth. This in-memory map is a session cache:
+ *
+ *   • On page load / account switch, `useDailyMissions` hydrates this map
+ *     from `profile.content.dailyMissions` (parsed from the kind 11125 event).
+ *   • During the session, progress/rerolls update this map for instant UI.
+ *   • Claims persist to kind 11125 via `updateDailyMissionsContent()`.
+ *   • On page refresh the map is empty, so the hook re-hydrates from kind 11125.
+ *   • Unclaimed progress (feed counts, etc.) that hasn't been written to
+ *     kind 11125 is lost on refresh — this is intentional and preferable to
+ *     cross-account leakage through localStorage.
+ *
+ *   localStorage is NOT used for daily missions. This eliminates all
+ *   cross-account leakage bugs.
+ */
+const sessionStore = new Map<string, DailyMissionsState>();
+
+/**
+ * Read daily missions state from the in-memory session store.
+ *
+ * Returns null if:
+ *   - No state exists for this pubkey in the current session
+ *   - The pubkey is empty/undefined
+ */
+export function readDailyMissionsState(pubkey: string | undefined): DailyMissionsState | null {
+  if (!pubkey) return null;
+  return sessionStore.get(pubkey) ?? null;
+}
+
+/**
+ * Write daily missions state to the in-memory session store.
+ *
+ * This is the ONLY correct way to update session mission state.
+ * No-ops silently if pubkey is empty/undefined (logged-out users
+ * should not have mission state).
+ *
+ * Note: This does NOT persist to kind 11125. Persistence happens
+ * explicitly through `updateDailyMissionsContent()` in the claim
+ * and other write-path hooks.
+ */
+export function writeDailyMissionsState(pubkey: string | undefined, state: DailyMissionsState): void {
+  if (!pubkey) return;
+  sessionStore.set(pubkey, state);
+}
+
+/**
+ * Clear the session store entry for a pubkey.
+ * Used when the hook needs to re-hydrate from kind 11125 data.
+ */
+export function clearDailyMissionsState(pubkey: string | undefined): void {
+  if (!pubkey) return;
+  sessionStore.delete(pubkey);
+}
+
 // ─── Mission Pool ─────────────────────────────────────────────────────────────
 
 /**
@@ -104,7 +169,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Interact with your Blobbi 3 times',
     action: 'interact',
     requiredCount: 3,
-    reward: 30,
+    reward: 15,
     weight: 10,
     requiredStages: ['baby', 'adult'],
   },
@@ -114,7 +179,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Interact with your Blobbi 6 times',
     action: 'interact',
     requiredCount: 6,
-    reward: 50,
+    reward: 30,
     weight: 8,
     requiredStages: ['baby', 'adult'],
   },
@@ -126,7 +191,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Feed your Blobbi once',
     action: 'feed',
     requiredCount: 1,
-    reward: 25,
+    reward: 10,
     weight: 10,
     requiredStages: ['baby', 'adult'],
   },
@@ -136,7 +201,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Feed your Blobbi 2 times',
     action: 'feed',
     requiredCount: 2,
-    reward: 45,
+    reward: 20,
     weight: 8,
     requiredStages: ['baby', 'adult'],
   },
@@ -146,7 +211,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Feed your Blobbi 3 times',
     action: 'feed',
     requiredCount: 3,
-    reward: 60,
+    reward: 35,
     weight: 5,
     requiredStages: ['baby', 'adult'],
   },
@@ -158,7 +223,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Put your Blobbi to sleep',
     action: 'sleep',
     requiredCount: 1,
-    reward: 30,
+    reward: 15,
     weight: 6,
     requiredStages: ['baby', 'adult'],
   },
@@ -170,7 +235,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Take a polaroid photo of your Blobbi',
     action: 'take_photo',
     requiredCount: 1,
-    reward: 55,
+    reward: 25,
     weight: 4,
     requiredStages: ['baby', 'adult'],
   },
@@ -180,7 +245,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Take 2 photos of your Blobbi',
     action: 'take_photo',
     requiredCount: 2,
-    reward: 70,
+    reward: 40,
     weight: 2,
     requiredStages: ['baby', 'adult'],
   },
@@ -197,7 +262,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Clean your Blobbi once',
     action: 'clean',
     requiredCount: 1,
-    reward: 25,
+    reward: 10,
     weight: 10,
     requiredStages: ['egg', 'baby', 'adult'],
   },
@@ -207,7 +272,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Clean your Blobbi 2 times',
     action: 'clean',
     requiredCount: 2,
-    reward: 45,
+    reward: 20,
     weight: 6,
     requiredStages: ['egg', 'baby', 'adult'],
   },
@@ -219,7 +284,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Sing a song to your Blobbi',
     action: 'sing',
     requiredCount: 1,
-    reward: 30,
+    reward: 15,
     weight: 6,
     requiredStages: ['egg', 'baby', 'adult'],
   },
@@ -229,7 +294,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Sing 2 songs to your Blobbi',
     action: 'sing',
     requiredCount: 2,
-    reward: 50,
+    reward: 25,
     weight: 3,
     requiredStages: ['egg', 'baby', 'adult'],
   },
@@ -241,7 +306,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Play a song for your Blobbi',
     action: 'play_music',
     requiredCount: 1,
-    reward: 30,
+    reward: 15,
     weight: 6,
     requiredStages: ['egg', 'baby', 'adult'],
   },
@@ -251,20 +316,19 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Play 2 songs for your Blobbi',
     action: 'play_music',
     requiredCount: 2,
-    reward: 50,
+    reward: 25,
     weight: 3,
     requiredStages: ['egg', 'baby', 'adult'],
   },
 
   // ─── Medicine Missions (All stages) ────────────────────────────────────────
-  // Medicine rewards are higher since medicine costs coins to use
   {
     id: 'medicine_1',
     title: 'Health Check',
     description: 'Give medicine to your Blobbi',
     action: 'medicine',
     requiredCount: 1,
-    reward: 60,
+    reward: 20,
     weight: 5,
     requiredStages: ['egg', 'baby', 'adult'],
   },
@@ -274,7 +338,7 @@ export const DAILY_MISSION_POOL: DailyMissionDefinition[] = [
     description: 'Give medicine to your Blobbi 2 times',
     action: 'medicine',
     requiredCount: 2,
-    reward: 70,
+    reward: 35,
     weight: 3,
     requiredStages: ['egg', 'baby', 'adult'],
   },
@@ -405,14 +469,14 @@ export function createMissionFromDefinition(def: DailyMissionDefinition): DailyM
 export function createDailyMissionsState(
   dateString: string,
   pubkey?: string,
-  previousTotalCoins: number = 0,
+  previousTotalXp: number = 0,
   availableStages?: BlobbiStage[]
 ): DailyMissionsState {
   const definitions = selectDailyMissions(3, dateString, pubkey, availableStages);
   return {
     date: dateString,
     missions: definitions.map(createMissionFromDefinition),
-    totalCoinsEarned: previousTotalCoins,
+    totalXpEarned: previousTotalXp,
     rerollsRemaining: MAX_DAILY_REROLLS,
   };
 }
@@ -461,8 +525,8 @@ export function updateMissionProgress(
 export function claimMissionReward(
   state: DailyMissionsState,
   missionId: string
-): { state: DailyMissionsState; coinsEarned: number } {
-  let coinsEarned = 0;
+): { state: DailyMissionsState; xpEarned: number } {
+  let xpEarned = 0;
   
   const updatedMissions = state.missions.map((mission) => {
     if (mission.id !== missionId) return mission;
@@ -470,7 +534,7 @@ export function claimMissionReward(
     // Can only claim if completed and not yet claimed
     if (!mission.completed || mission.claimed) return mission;
     
-    coinsEarned = mission.reward;
+    xpEarned = mission.reward;
     return {
       ...mission,
       claimed: true,
@@ -481,9 +545,9 @@ export function claimMissionReward(
     state: {
       ...state,
       missions: updatedMissions,
-      totalCoinsEarned: state.totalCoinsEarned + coinsEarned,
+      totalXpEarned: state.totalXpEarned + xpEarned,
     },
-    coinsEarned,
+    xpEarned,
   };
 }
 
@@ -526,10 +590,10 @@ export function areAllMissionsClaimed(state: DailyMissionsState): boolean {
 export const BONUS_MISSION_DEFINITION: DailyMissionDefinition = {
   id: 'bonus_daily_complete',
   title: 'Daily Champion',
-  description: 'Complete all daily missions to claim this bonus reward',
+  description: 'Complete all daily missions to claim this bonus XP',
   action: 'interact', // Not actually used - bonus is auto-completed
   requiredCount: 1,
-  reward: 80,
+  reward: 50,
   weight: 0, // Not part of random selection
 };
 
@@ -553,19 +617,19 @@ export function isBonusMissionClaimed(state: DailyMissionsState): boolean {
  */
 export function claimBonusMissionReward(
   state: DailyMissionsState
-): { state: DailyMissionsState; coinsEarned: number } {
+): { state: DailyMissionsState; xpEarned: number } {
   // Can only claim if bonus is available and not yet claimed
   if (!isBonusMissionAvailable(state) || isBonusMissionClaimed(state)) {
-    return { state, coinsEarned: 0 };
+    return { state, xpEarned: 0 };
   }
   
   return {
     state: {
       ...state,
       bonusClaimed: true,
-      totalCoinsEarned: state.totalCoinsEarned + BONUS_MISSION_DEFINITION.reward,
+      totalXpEarned: state.totalXpEarned + BONUS_MISSION_DEFINITION.reward,
     },
-    coinsEarned: BONUS_MISSION_DEFINITION.reward,
+    xpEarned: BONUS_MISSION_DEFINITION.reward,
   };
 }
 

src/blobbi/companion/components/BlobbiCompanionLayer.tsx

@@ -161,7 +161,7 @@ export function BlobbiCompanionLayer() {
     }
 
     try {
-      const result = await contextUseItem(item.id, action, 1);
+      const result = await contextUseItem(item.id, action);
 
       if (result.success) {
         if (import.meta.env.DEV) {

src/blobbi/companion/components/BlobbiCompanionVisual.tsx

@@ -17,12 +17,14 @@ import { useMemo, memo, type RefObject } from 'react';
 
 import { BlobbiBabyVisual } from '@/blobbi/ui/BlobbiBabyVisual';
 import { BlobbiAdultVisual } from '@/blobbi/ui/BlobbiAdultVisual';
+import { BlobbiStageVisual } from '@/blobbi/ui/BlobbiStageVisual';
 import { companionDataToBlobbi } from '@/blobbi/ui/lib/adapters';
-import { useEffectiveEmotion } from '@/blobbi/dev/EmotionDevContext';
+import { useEffectiveEmotion } from '@/blobbi/dev/useEmotionDev';
 import type { BlobbiEmotion } from '@/blobbi/ui/lib/emotion-types';
 import type { BlobbiVisualRecipe } from '@/blobbi/ui/lib/recipe';
 import type { BodyEffectsSpec } from '@/blobbi/ui/lib/bodyEffects';
 import type { Blobbi } from '@/blobbi/core/types/blobbi';
+import type { BlobbiCompanion } from '@/blobbi/core/lib/blobbi';
 import { cn } from '@/lib/utils';
 import type { CompanionData, EyeOffset, CompanionDirection } from '../types/companion.types';
 
@@ -248,7 +250,14 @@ export function BlobbiCompanionVisual({
           )}
           style={{ transformOrigin: 'center bottom' }}
         >
-          {(companion.stage === 'baby' || companion.stage === 'adult') && (
+          {companion.stage === 'egg' ? (
+            <BlobbiStageVisual
+              companion={companion as unknown as BlobbiCompanion}
+              size="sm"
+              animated={false}
+              className="size-full"
+            />
+          ) : (
             <MemoizedBlobbiVisual
               stage={companion.stage}
               blobbi={blobbi}

src/blobbi/companion/core/companionMachine.ts

@@ -233,17 +233,18 @@ export function updateDragPosition(motion: CompanionMotion, position: Position):
 }
 
 /**
- * End dragging - let gravity take over.
+ * End dragging - hold position where dropped.
  */
 export function endDrag(motion: CompanionMotion, groundY: number): CompanionMotion {
   return {
     ...motion,
     isDragging: false,
-    // If already at or below ground, snap to ground
-    isGrounded: motion.position.y >= groundY,
+    // Always treat as grounded so companion holds position where dropped
+    isGrounded: true,
     position: {
       ...motion.position,
-      y: motion.position.y >= groundY ? groundY : motion.position.y,
+      // Clamp to ground if below it
+      y: Math.min(motion.position.y, groundY),
     },
   };
 }

src/blobbi/companion/hooks/useBlobbiCompanion.ts

@@ -104,7 +104,8 @@ export function useBlobbiCompanion(): UseBlobbiCompanionResult {
   // Track if first entry has completed (for position initialization)
   const [hasEnteredOnce, setHasEnteredOnce] = useState(false);
   
-  // Track viewport size
+  // Track viewport size — listen to both window resize and visualViewport
+  // (mobile browsers fire visualViewport resize when URL bar shows/hides)
   useEffect(() => {
     const handleResize = () => {
       setViewport({
@@ -114,7 +115,11 @@ export function useBlobbiCompanion(): UseBlobbiCompanionResult {
     };
     
     window.addEventListener('resize', handleResize, { passive: true });
-    return () => window.removeEventListener('resize', handleResize);
+    window.visualViewport?.addEventListener('resize', handleResize, { passive: true });
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.visualViewport?.removeEventListener('resize', handleResize);
+    };
   }, []);
   
   // Calculate bounds and positions

src/blobbi/companion/hooks/useBlobbiCompanionData.ts

@@ -80,9 +80,6 @@ export function useBlobbiCompanionData(): UseBlobbiCompanionDataResult {
     
     if (!blobbi) return null;
     
-    // Only baby and adult can be companions
-    if (blobbi.stage === 'egg') return null;
-    
     // Use projected stats if available, otherwise fall back to base stats
     const stats = projectedState?.stats ?? blobbi.stats;
     

src/blobbi/companion/hooks/useBlobbiCompanionState.ts

@@ -102,7 +102,7 @@ export function useBlobbiCompanionState({
     setState('walking');
     setDirection('right');
     setTargetX(targetX);
-  }, [bounds.maxX]);
+  }, [bounds.maxX, motionRef]);
   
   /**
    * Generate a random observation target on screen.
@@ -136,7 +136,7 @@ export function useBlobbiCompanionState({
     setState('walking');
     setDirection(newDirection);
     setTargetX(targetXPos);
-  }, [bounds, generateObservationTarget]);
+  }, [bounds, generateObservationTarget, motionRef]);
   
   // Make a decision about what to do next
   const makeDecision = useCallback(() => {
@@ -176,7 +176,7 @@ export function useBlobbiCompanionState({
     // Schedule next decision
     const duration = transition.duration ?? randomDuration(config.idleTime);
     timerRef.current = window.setTimeout(makeDecision, duration);
-  }, [isActive, isSleeping, bounds, state, config, startObservation]);
+  }, [isActive, isSleeping, bounds, state, config, startObservation, motionRef]);
   
   // Handle reaching target
   const onReachedTarget = useCallback(() => {
@@ -255,7 +255,7 @@ export function useBlobbiCompanionState({
         clearTimeout(timerRef.current);
       }
     };
-  }, [isActive, isSleeping, forceInitialWalk, startInitialWalk, makeDecision]);
+  }, [isActive, isSleeping, forceInitialWalk, startInitialWalk, makeDecision, motionRef]);
   
   // Pause decisions while dragging
   // We poll isDragging via interval since motionRef changes don't trigger re-renders

src/blobbi/companion/hooks/useBlobbiEntryAnimation.ts

@@ -19,9 +19,8 @@
  *   idle -> rising -> inspecting -> entering -> complete
  * 
  * Route change behavior:
- * - Cancels current entry immediately
- * - Waits 1 second
- * - Restarts entry for the new page
+ * - Companion keeps its current position (no re-entry animation)
+ * - Only initial mount and companion changes trigger entry animations
  */
 
 import { useState, useEffect, useRef, useCallback } from 'react';
@@ -310,20 +309,11 @@ export function useBlobbiEntryAnimation({
       // Random entry type for new companion (fall or rise)
       const entryType: EntryType = Math.random() < 0.5 ? 'fall' : 'rise';
       startEntry(entryType);
-    } else if (routeChanged && companionId) {
-      // Route changed - determine direction for new route
-      const entryType = getEntryDirection(previousPath, pathname, sidebarOrder);
-      
-      // Immediately hide Blobbi and cancel current entry
-      cancelEntry();
-      setIsHiddenForTransition(true);
-      
-      // Wait 1 second, then start the new entry animation
-      routeChangeTimeoutRef.current = setTimeout(() => {
-        startEntry(entryType);
-      }, entryConfig.routeChangeRestartDelay);
+    } else if (routeChanged) {
+      // Route changed - companion keeps its position, no re-entry animation.
+      // Just update the ref so future changes compare against the new path.
     }
-  }, [isActive, pathname, companionId, sidebarOrder, startEntry, cancelEntry, entryConfig.routeChangeRestartDelay]);
+  }, [isActive, pathname, companionId, sidebarOrder, startEntry, cancelEntry]);
   
   /**
    * Animation loop for FALL entry.

src/blobbi/companion/interaction/BlobbiActionsContext.ts

@@ -15,17 +15,15 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 import { useBlobbiItemUse } from './useBlobbiItemUse';
 import {
   BlobbiActionsContext,
-  BlobbiActionsProvider,
   type UseItemFunction,
   type UseItemResult,
   type BlobbiActionsContextValue,
   type BlobbiActionsContextInternal,
-} from './BlobbiActionsProvider';
+} from './BlobbiActionsContextDef';
 
-// Re-export everything from the provider module for backward compatibility
+// Re-export types and context from the def module for backward compatibility
 export {
   BlobbiActionsContext,
-  BlobbiActionsProvider,
   type UseItemFunction,
   type UseItemResult,
   type BlobbiActionsContextValue,
@@ -64,13 +62,13 @@ export function useBlobbiActions(): BlobbiActionsContextValue {
   // Create stable useItem function that:
   // 1. Uses registered function if available (from BlobbiPage)
   // 2. Falls back to built-in hook if no registration
-  const useItem = useCallback<UseItemFunction>(async (itemId, action, quantity = 1) => {
+  const useItem = useCallback<UseItemFunction>(async (itemId, action) => {
     // Try registered function first (from BlobbiPage)
     if (context?.registerRef.current) {
       if (import.meta.env.DEV) {
         console.log('[BlobbiActions] Using registered item-use function');
       }
-      return context.registerRef.current(itemId, action, quantity);
+      return context.registerRef.current(itemId, action);
     }
     
     // Check if fallback can handle it
@@ -88,7 +86,7 @@ export function useBlobbiActions(): BlobbiActionsContextValue {
     if (import.meta.env.DEV) {
       console.log('[BlobbiActions] Using fallback item-use hook');
     }
-    return fallbackItemUse.useItem(itemId, action, quantity);
+    return fallbackItemUse.useItem(itemId, action);
   }, [context, fallbackItemUse]);
   
   // Determine canUseItems: true if registered OR fallback can use
@@ -136,14 +134,14 @@ export function useBlobbiActionsRegistration(
   useItemRef.current = useItemFn;
   
   // Create a stable wrapper that delegates to the ref
-  const stableUseItem = useCallback<UseItemFunction>(async (itemId, action, quantity = 1) => {
+  const stableUseItem = useCallback<UseItemFunction>(async (itemId, action) => {
     if (!useItemRef.current) {
       return {
         success: false,
         error: 'Item use function not available',
       };
     }
-    return useItemRef.current(itemId, action, quantity);
+    return useItemRef.current(itemId, action);
   }, []);
   
   // Update refs and notify only when canUseItems actually changes

src/blobbi/companion/interaction/BlobbiActionsContextDef.ts

@@ -0,0 +1,75 @@
+/**
+ * BlobbiActionsContextDef
+ *
+ * Lightweight context definition and types for the Blobbi actions system.
+ * Separated from the provider component to avoid react-refresh warnings.
+ */
+
+import { createContext } from 'react';
+
+import type { InventoryAction } from '@/blobbi/actions/lib/blobbi-action-utils';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/**
+ * Result of using an item via the context.
+ */
+export interface UseItemResult {
+  /** Whether the use was successful */
+  success: boolean;
+  /** Stats that changed (key = stat name, value = delta) */
+  statsChanged?: Record<string, number>;
+  /** Error message if failed */
+  error?: string;
+}
+
+/**
+ * Function signature for using an item (always uses once).
+ */
+export type UseItemFunction = (
+  itemId: string,
+  action: InventoryAction,
+) => Promise<UseItemResult>;
+
+/**
+ * Context value for Blobbi actions (consumer side).
+ */
+export interface BlobbiActionsContextValue {
+  /**
+   * Use an item on the current companion.
+   * Works even without BlobbiPage registration (uses fallback).
+   */
+  useItem: UseItemFunction;
+
+  /** Whether an item use operation is currently in progress */
+  isUsingItem: boolean;
+
+  /** Whether items can be used (companion exists and profile loaded) */
+  canUseItems: boolean;
+
+  /** Check if an item is on cooldown (recently attempted) */
+  isItemOnCooldown: (itemId: string) => boolean;
+
+  /** Clear cooldown for an item */
+  clearItemCooldown: (itemId: string) => void;
+}
+
+/**
+ * Internal context value (includes registration functions).
+ */
+export interface BlobbiActionsContextInternal {
+  /** Register item-use functionality (called by BlobbiPage) */
+  registerRef: React.MutableRefObject<UseItemFunction | null>;
+  /** Whether items can currently be used (via registration) */
+  canUseItemsRegisteredRef: React.MutableRefObject<boolean>;
+  /** Whether an item is currently being used (via registration) */
+  isUsingItemRegisteredRef: React.MutableRefObject<boolean>;
+  /** Force update consumers (called sparingly) */
+  notifyUpdate: () => void;
+  /** Subscribe to updates */
+  subscribe: (callback: () => void) => () => void;
+}
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+export const BlobbiActionsContext = createContext<BlobbiActionsContextInternal | null>(null);

src/blobbi/companion/interaction/BlobbiActionsProvider.tsx

@@ -10,75 +10,13 @@
  * BlobbiPage, both of which are lazy-loaded.
  */
 
-import { createContext, useCallback, useMemo, useRef, type ReactNode } from 'react';
+import { useCallback, useMemo, useRef, type ReactNode } from 'react';
 
-import type { InventoryAction } from '@/blobbi/actions/lib/blobbi-action-utils';
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-/**
- * Result of using an item via the context.
- */
-export interface UseItemResult {
-  /** Whether the use was successful */
-  success: boolean;
-  /** Stats that changed (key = stat name, value = delta) */
-  statsChanged?: Record<string, number>;
-  /** Error message if failed */
-  error?: string;
-}
-
-/**
- * Function signature for using an item.
- */
-export type UseItemFunction = (
-  itemId: string,
-  action: InventoryAction,
-  quantity?: number
-) => Promise<UseItemResult>;
-
-/**
- * Context value for Blobbi actions (consumer side).
- */
-export interface BlobbiActionsContextValue {
-  /**
-   * Use an inventory item on the current companion.
-   * Works even without BlobbiPage registration (uses fallback).
-   */
-  useItem: UseItemFunction;
-
-  /** Whether an item use operation is currently in progress */
-  isUsingItem: boolean;
-
-  /** Whether items can be used (companion exists and profile loaded) */
-  canUseItems: boolean;
-
-  /** Check if an item is on cooldown (recently attempted) */
-  isItemOnCooldown: (itemId: string) => boolean;
-
-  /** Clear cooldown for an item */
-  clearItemCooldown: (itemId: string) => void;
-}
-
-/**
- * Internal context value (includes registration functions).
- */
-export interface BlobbiActionsContextInternal {
-  /** Register item-use functionality (called by BlobbiPage) */
-  registerRef: React.MutableRefObject<UseItemFunction | null>;
-  /** Whether items can currently be used (via registration) */
-  canUseItemsRegisteredRef: React.MutableRefObject<boolean>;
-  /** Whether an item is currently being used (via registration) */
-  isUsingItemRegisteredRef: React.MutableRefObject<boolean>;
-  /** Force update consumers (called sparingly) */
-  notifyUpdate: () => void;
-  /** Subscribe to updates */
-  subscribe: (callback: () => void) => () => void;
-}
-
-// ─── Context ──────────────────────────────────────────────────────────────────
-
-export const BlobbiActionsContext = createContext<BlobbiActionsContextInternal | null>(null);
+import {
+  BlobbiActionsContext,
+  type UseItemFunction,
+  type BlobbiActionsContextInternal,
+} from './BlobbiActionsContextDef';
 
 // ─── Provider ─────────────────────────────────────────────────────────────────
 

src/blobbi/companion/interaction/HangingItems.tsx

@@ -1,26 +1,24 @@
 /**
  * HangingItems
  * 
- * Displays inventory items as hanging elements from the top of the screen.
+ * Displays available items as hanging elements from the top of the screen.
  * Each item appears as a circle connected to the top by a thin vertical line,
  * creating a playful, spatial feel.
  * 
+ * Items are reusable abilities sourced from the shop catalog — they are
+ * always available and not consumed on use.
+ * 
  * State Model:
  * - Container states: hidden → opening → open → closing → hidden
- * - Hanging items = available inventory that can still be released
+ * - Hanging items = catalog items available for the selected action
  * - Released/dropped items = instances currently in the world (tracked with unique IDs)
  * - Multiple instances of the same item type can exist simultaneously on the ground
  * 
- * Key Design Principle:
- * The hanging row represents "releasable quantity" - clicking releases ONE instance
- * and immediately decrements the visible quantity. A new hanging copy remains if
- * quantity > 1. The released instance tracks separately with a unique instance ID.
- * 
  * Features:
  * - Smooth open/close slide animations (items descend/ascend)
  * - Thin vertical lines from the top of screen
  * - Circular containers for hanging items
- * - Click releases item: one instance falls, remaining quantity stays hanging
+ * - Click releases item: one instance falls to the ground
  * - Multiple dropped instances of same item type can exist
  * - Contact detection: items auto-use when touching Blobbi
  * - Click-to-use: click landed items to use them
@@ -119,7 +117,7 @@ interface HangingItemsProps {
   onItemUse?: (item: CompanionItem) => Promise<ItemUseAttemptResult>;
   /** 
    * Callback when an item is collected by Blobbi (contact).
-   * @deprecated Use onItemUse instead for proper item consumption flow.
+   * @deprecated Use onItemUse instead for proper item-use flow.
    */
   onItemCollected?: (item: CompanionItem) => void;
   /**
@@ -156,7 +154,7 @@ const HANGING_CONFIG = {
   baseFallDistance: 500,
   /** Ground offset from bottom of viewport */
   defaultGroundOffset: 40,
-  /** Size of quantity badge */
+  /** Size of badge (unused — kept for config consistency) */
   badgeSize: 20,
   /** Size of landed item hitbox for contact detection */
   landedItemSize: 40,
@@ -406,7 +404,7 @@ export function HangingItems({
   
   // Track how many instances of each item type have been released (not yet used)
   // Key: item.id (type ID), Value: count of released instances
-  const [releasedCountByItemId, setReleasedCountByItemId] = useState<Map<string, number>>(new Map());
+  const [_releasedCountByItemId, setReleasedCountByItemId] = useState<Map<string, number>>(new Map());
   
   // Counter for generating unique instance IDs
   const instanceCounterRef = useRef(0);
@@ -566,7 +564,7 @@ export function HangingItems({
     
     // Start the loop
     animationRef.current = requestAnimationFrame(animate);
-  }, []);
+  }, [calculateFallDuration]);
   
   // Cleanup animation on unmount
   useEffect(() => {
@@ -670,7 +668,7 @@ export function HangingItems({
           });
           // Also remove from zone tracking
           itemsInZoneRef.current.delete(instanceId);
-          // Decrement the released count for this item type (since the instance is now consumed)
+          // Decrement the released count for this item type (instance removed from screen)
           setReleasedCountByItemId(prev => {
             const next = new Map(prev);
             const currentCount = next.get(item.id) || 0;
@@ -985,15 +983,9 @@ export function HangingItems({
     return viewportCenterX + startX + index * HANGING_CONFIG.itemSpacing;
   };
   
-  // Calculate hanging items with their remaining quantities
-  // An item appears in the hanging row if (quantity - releasedCount) > 0
-  const hangingItems = items
-    .map(item => {
-      const releasedCount = releasedCountByItemId.get(item.id) || 0;
-      const remainingQuantity = item.quantity - releasedCount;
-      return { ...item, quantity: remainingQuantity };
-    })
-    .filter(item => item.quantity > 0);
+  // All items are always visible — they are abilities, not consumable inventory.
+  // No quantity filtering needed.
+  const hangingItems = items;
   
   // Should we render the hanging container?
   const shouldRenderContainer = containerState !== 'hidden' || (isVisible && selectedAction);
@@ -1033,7 +1025,7 @@ export function HangingItems({
         >
           <div className="bg-background/95 backdrop-blur-sm rounded-2xl px-6 py-4 shadow-lg border">
             <p className="text-sm text-muted-foreground text-center">
-              No {getMenuActionConfig(selectedAction)?.label.toLowerCase()} items in your inventory
+              No {getMenuActionConfig(selectedAction)?.label.toLowerCase()} items available
             </p>
           </div>
         </div>
@@ -1102,8 +1094,8 @@ export function HangingItems({
                       marginLeft: (HANGING_CONFIG.circleSize / 2) * -1 + HANGING_CONFIG.lineWidth / 2,
                     }}
                     onClick={() => handleItemClick(item, itemX)}
-                    title={`${item.name} (x${item.quantity})`}
-                    aria-label={`${item.name}, quantity ${item.quantity}. Click to release.`}
+                    title={item.name}
+                    aria-label={`${item.name}. Click to release.`}
                   >
                     {/* Item emoji */}
                     <span 
@@ -1114,24 +1106,6 @@ export function HangingItems({
                     >
                       {item.emoji}
                     </span>
-                    
-                    {/* Quantity badge */}
-                    <span
-                      className={cn(
-                        "absolute -top-1 -right-1",
-                        "flex items-center justify-center",
-                        "bg-primary text-primary-foreground",
-                        "text-xs font-semibold rounded-full",
-                        "shadow-md"
-                      )}
-                      style={{
-                        minWidth: HANGING_CONFIG.badgeSize,
-                        height: HANGING_CONFIG.badgeSize,
-                        padding: '0 5px',
-                      }}
-                    >
-                      {item.quantity}
-                    </span>
                   </button>
                 </div>
               );

src/blobbi/companion/interaction/index.ts

@@ -76,10 +76,10 @@ export { useBlobbiItemUse } from './useBlobbiItemUse';
 // Context
 export {
   BlobbiActionsContext,
-  BlobbiActionsProvider,
   useBlobbiActions,
   useBlobbiActionsRegistration,
 } from './BlobbiActionsContext';
+export { BlobbiActionsProvider } from './BlobbiActionsProvider';
 
 // Components
 export { CompanionActionMenu } from './CompanionActionMenu';

src/blobbi/companion/interaction/types.ts

@@ -63,7 +63,7 @@ export function getItemCategoryForAction(actionId: CompanionMenuAction): ShopIte
 
 /**
  * Normalized item representation for the companion UI.
- * This is a simplified view of inventory items optimized for rendering.
+ * This is a simplified view of shop catalog items optimized for rendering.
  */
 export interface CompanionItem {
   /** Unique item ID (matches shop item ID) */
@@ -74,7 +74,7 @@ export interface CompanionItem {
   emoji: string;
   /** Item category */
   category: ShopItemCategory;
-  /** Quantity available in inventory */
+  /** Availability (always Infinity — items are reusable abilities) */
   quantity: number;
   /** Item effects when used */
   effect?: ItemEffect;

src/blobbi/companion/interaction/useBlobbiItemUse.ts

@@ -27,13 +27,10 @@ import { useNostrPublish } from '@/hooks/useNostrPublish';
 import { toast } from '@/hooks/useToast';
 
 import type { NostrEvent } from '@nostrify/nostrify';
-import type { BlobbiCompanion, BlobbonautProfile, BlobbiStats } from '@/blobbi/core/lib/blobbi';
+import type { BlobbiCompanion, BlobbonautProfile } from '@/blobbi/core/lib/blobbi';
 import {
   KIND_BLOBBI_STATE,
-  KIND_BLOBBONAUT_PROFILE,
   updateBlobbiTags,
-  updateBlobbonautTags,
-  createStorageTags,
   parseBlobbiEvent,
   isValidBlobbiEvent,
 } from '@/blobbi/core/lib/blobbi';
@@ -41,7 +38,6 @@ import { applyBlobbiDecay } from '@/blobbi/core/lib/blobbi-decay';
 import { getShopItemById } from '@/blobbi/shop/lib/blobbi-shop-items';
 import {
   applyItemEffects,
-  decrementStorageItem,
   canUseAction,
   canUseItemForStage,
   getStageRestrictionMessage,
@@ -59,7 +55,7 @@ import { getStreakTagUpdates } from '@/blobbi/actions/lib/blobbi-streak';
 import { HATCH_REQUIRED_INTERACTIONS } from '@/blobbi/actions/hooks/useHatchTasks';
 import { EVOLVE_REQUIRED_INTERACTIONS } from '@/blobbi/actions/hooks/useEvolveTasks';
 
-import type { UseItemFunction } from './BlobbiActionsProvider';
+import type { UseItemFunction } from './BlobbiActionsContextDef';
 
 // ─── Configuration ────────────────────────────────────────────────────────────
 
@@ -126,7 +122,7 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
   const queryClient = useQueryClient();
   
   // Fetch profile if not provided
-  const { profile: fetchedProfile, updateProfileEvent } = useBlobbonautProfile();
+  const { profile: fetchedProfile } = useBlobbonautProfile();
   const profile = options.profile ?? fetchedProfile;
   
   // Per-item cooldown tracking (ref to avoid re-renders)
@@ -232,16 +228,14 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
     });
   }, [queryClient, user?.pubkey, profile?.currentCompanion]);
   
-  // Core mutation for using items
+  // Core mutation for using items (always uses once)
   const mutation = useMutation({
     mutationFn: async ({ 
       itemId, 
       action, 
-      quantity = 1,
     }: { 
       itemId: string; 
       action: InventoryAction; 
-      quantity?: number;
     }): Promise<{ statsChanged: Record<string, number> }> => {
       // ─── Validation ───
       if (!user?.pubkey) {
@@ -259,11 +253,6 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
         throw new Error('No companion selected');
       }
       
-      // Validate quantity
-      if (quantity < 1) {
-        throw new Error('Quantity must be at least 1');
-      }
-      
       // Check stage restrictions
       if (!canUseAction(companion, action)) {
         const message = getStageRestrictionMessage(companion, action);
@@ -283,15 +272,6 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
         throw new Error(itemUsability.reason ?? 'This item cannot be used by this companion');
       }
       
-      // Validate item exists in storage with sufficient quantity
-      const storageItem = profile.storage.find(s => s.itemId === itemId);
-      if (!storageItem || storageItem.quantity <= 0) {
-        throw new Error('Item not found in your inventory');
-      }
-      if (storageItem.quantity < quantity) {
-        throw new Error(`Not enough items in inventory (have ${storageItem.quantity}, need ${quantity})`);
-      }
-      
       // Validate item has effects
       if (!shopItem.effect) {
         throw new Error('This item has no effect');
@@ -319,17 +299,13 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
       // Start with decayed stats as the base
       const statsAfterDecay = decayResult.stats;
       
-      // ─── Apply Item Effects ───
+      // ─── Apply Item Effects (single use) ───
       const isEggCompanion = companion.stage === 'egg';
       const statsUpdate: Record<string, string> = {};
       const statsChanged: Record<string, number> = {};
       
       if (isEggCompanion && action === 'medicine') {
-        const healthDelta = shopItem.effect.health ?? 0;
-        let currentHealth = statsAfterDecay.health ?? 0;
-        for (let i = 0; i < quantity; i++) {
-          currentHealth = applyStat(currentHealth, healthDelta);
-        }
+        const currentHealth = applyStat(statsAfterDecay.health ?? 0, shopItem.effect.health ?? 0);
         
         statsUpdate.health = currentHealth.toString();
         statsChanged.health = currentHealth - (statsAfterDecay.health ?? 0);
@@ -339,15 +315,8 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
         statsUpdate.hunger = '100';
         statsUpdate.energy = '100';
       } else if (isEggCompanion && action === 'clean') {
-        const hygieneDelta = shopItem.effect.hygiene ?? 0;
-        const happinessDelta = shopItem.effect.happiness ?? 0;
-        
-        let currentHygiene = statsAfterDecay.hygiene ?? 0;
-        let currentHappiness = statsAfterDecay.happiness ?? 0;
-        for (let i = 0; i < quantity; i++) {
-          currentHygiene = applyStat(currentHygiene, hygieneDelta);
-          currentHappiness = applyStat(currentHappiness, happinessDelta);
-        }
+        const currentHygiene = applyStat(statsAfterDecay.hygiene ?? 0, shopItem.effect.hygiene ?? 0);
+        const currentHappiness = applyStat(statsAfterDecay.happiness ?? 0, shopItem.effect.happiness ?? 0);
         
         statsUpdate.hygiene = currentHygiene.toString();
         statsChanged.hygiene = currentHygiene - (statsAfterDecay.hygiene ?? 0);
@@ -362,11 +331,8 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
         statsUpdate.hunger = '100';
         statsUpdate.energy = '100';
       } else {
-        // Normal stats application for baby/adult
-        let currentStats: Partial<BlobbiStats> = { ...statsAfterDecay };
-        for (let i = 0; i < quantity; i++) {
-          currentStats = applyItemEffects(currentStats, shopItem.effect);
-        }
+        // Normal stats application for baby/adult — apply once
+        const currentStats = applyItemEffects({ ...statsAfterDecay }, shopItem.effect);
         
         statsUpdate.hunger = clampStat(currentStats.hunger).toString();
         statsChanged.hunger = (currentStats.hunger ?? 0) - (statsAfterDecay.hunger ?? 0);
@@ -414,36 +380,19 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
       
       updateCompanionInCache(blobbiEvent);
       
-      // ─── Update Profile Storage (kind 11125) ───
-      const newStorage = decrementStorageItem(profile.storage, itemId, quantity);
-      const storageValues = createStorageTags(newStorage).map(tag => tag[1]);
-      
-      const profileTags = updateBlobbonautTags(profile.allTags, {
-        storage: storageValues,
-      });
-      
-      const profileEvent = await publishEvent({
-        kind: KIND_BLOBBONAUT_PROFILE,
-        content: '',
-        tags: profileTags,
-      });
-      
-      updateProfileEvent(profileEvent);
-      
       // ─── Invalidate Queries ───
-      queryClient.invalidateQueries({ queryKey: ['blobbonaut-profile', user.pubkey] });
+      // Items are free to use — no storage decrement needed.
       queryClient.invalidateQueries({ queryKey: ['blobbi-collection', user.pubkey] });
       
       return { statsChanged };
     },
-    onSuccess: (_, { itemId, action, quantity = 1 }) => {
+    onSuccess: (_, { itemId, action }) => {
       const shopItem = getShopItemById(itemId);
       const actionMeta = ACTION_METADATA[action];
-      const quantityText = quantity > 1 ? ` (x${quantity})` : '';
       
       toast({
         title: `${actionMeta.label} successful!`,
-        description: `Used ${shopItem?.name ?? 'item'}${quantityText} on your Blobbi.`,
+        description: `Used ${shopItem?.name ?? 'item'} on your Blobbi.`,
       });
       
       // Track daily mission progress
@@ -468,7 +417,7 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
   });
   
   // Wrapper function that matches UseItemFunction signature and includes cooldown check
-  const useItem = useCallback<UseItemFunction>(async (itemId, action, quantity = 1) => {
+  const useItem = useCallback<UseItemFunction>(async (itemId, action) => {
     // Check cooldown first
     if (isItemOnCooldown(itemId)) {
       if (import.meta.env.DEV) {
@@ -481,7 +430,7 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
     }
     
     try {
-      const result = await mutation.mutateAsync({ itemId, action, quantity });
+      const result = await mutation.mutateAsync({ itemId, action });
       return {
         success: true,
         statsChanged: result.statsChanged,

src/blobbi/companion/interaction/useBlobbiSleepToggle.ts

@@ -69,14 +69,13 @@ export function useBlobbiSleepToggle(): UseBlobbiSleepToggleResult {
   /** Optimistically update the TanStack cache so the companion reacts immediately. */
   const updateCache = useCallback((event: import('@nostrify/nostrify').NostrEvent, pubkey: string) => {
     const parsed = parseBlobbiEvent(event);
-    if (!parsed) {
-      queryClient.invalidateQueries({ queryKey: ['blobbi-collection', pubkey] });
-      return;
-    }
+    if (!parsed) return;
 
     // Optimistically update ALL blobbi-collection queries for this user.
     // The cache key is ['blobbi-collection', pubkey, dListArray], so we use
     // partial matching to find all entries regardless of dList shape.
+    // No invalidation needed — we fetched fresh from relays before mutating,
+    // so the optimistic update is the correct state.
     type CollectionData = { companionsByD: Record<string, BlobbiCompanion>; companions: BlobbiCompanion[] };
     const matchingQueries = queryClient.getQueriesData<CollectionData>({
       queryKey: ['blobbi-collection', pubkey],
@@ -90,9 +89,6 @@ export function useBlobbiSleepToggle(): UseBlobbiSleepToggleResult {
         companions: Object.values(newCompanionsByD),
       });
     }
-
-    // Also invalidate for background refetch to ensure eventual consistency
-    queryClient.invalidateQueries({ queryKey: ['blobbi-collection', pubkey] });
   }, [queryClient]);
 
   const toggleSleep = useCallback(async () => {

src/blobbi/companion/interaction/useCompanionActionMenu.ts

@@ -18,8 +18,7 @@ import { useState, useCallback, useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { useBlobbonautProfile } from '@/hooks/useBlobbonautProfile';
-import { getShopItemById } from '@/blobbi/shop/lib/blobbi-shop-items';
-import type { StorageItem } from '@/blobbi/core/lib/blobbi';
+import { getLiveShopItems } from '@/blobbi/shop/lib/blobbi-shop-items';
 import { canUseItemForStage } from '@/blobbi/actions/lib/blobbi-action-utils';
 
 import type {
@@ -68,7 +67,10 @@ interface UseCompanionActionMenuResult {
 }
 
 /**
- * Resolve inventory items for a specific action/category.
+ * Resolve available items for a specific action/category from the shop catalog.
+ * 
+ * Items are sourced from the full shop catalog — all items are
+ * available as reusable abilities/tools, filtered only by stage.
  * 
  * Uses the centralized `canUseItemForStage` function to ensure consistent
  * stage-based filtering across all UIs:
@@ -80,7 +82,6 @@ interface UseCompanionActionMenuResult {
  * filters out all egg-only items from the companion interaction system.
  */
 function resolveItemsForAction(
-  storage: StorageItem[],
   action: CompanionMenuAction,
   stage: 'egg' | 'baby' | 'adult'
 ): CompanionItem[] {
@@ -89,13 +90,10 @@ function resolveItemsForAction(
   // Sleep action has no items
   if (!category) return [];
   
+  const allItems = getLiveShopItems();
   const items: CompanionItem[] = [];
   
-  for (const storageItem of storage) {
-    if (storageItem.quantity <= 0) continue;
-    
-    const shopItem = getShopItemById(storageItem.itemId);
-    if (!shopItem) continue;
+  for (const shopItem of allItems) {
     if (shopItem.type !== category) continue;
     
     // Use centralized stage-based filtering
@@ -104,17 +102,17 @@ function resolveItemsForAction(
     // - Food/Toys: only for baby/adult (excluded for eggs)
     // - Medicine: must have health effect
     // - Hygiene: must have hygiene or happiness effect
-    const usability = canUseItemForStage(storageItem.itemId, stage);
+    const usability = canUseItemForStage(shopItem.id, stage);
     if (!usability.canUse) {
       continue;
     }
     
     items.push({
-      id: storageItem.itemId,
+      id: shopItem.id,
       name: shopItem.name,
       emoji: shopItem.icon,
       category: shopItem.type,
-      quantity: storageItem.quantity,
+      quantity: Infinity,
       effect: shopItem.effect,
     });
   }
@@ -197,8 +195,8 @@ export function useCompanionActionMenu({
       return;
     }
     
-    // Resolve items for this action
-    const items = resolveItemsForAction(profile.storage, action, stage);
+    // Resolve items for this action from the catalog (not inventory)
+    const items = resolveItemsForAction(action, stage);
     
     setMenuState(prev => ({
       ...prev,

src/blobbi/companion/interaction/useCompanionItemUse.ts

@@ -42,7 +42,6 @@ export interface ItemUseResult {
 export type UseItemCallback = (
   itemId: string,
   action: InventoryAction,
-  quantity: number
 ) => Promise<{ success: boolean; statsChanged?: Record<string, number>; error?: string }>;
 
 /**
@@ -67,14 +66,14 @@ export interface UseCompanionItemUseResult {
   isUsingItem: boolean;
   /** Get the action type for an item category */
   getActionForCategory: (category: ShopItemCategory) => InventoryAction | null;
-  /** Get the inventory action for a menu action */
+  /** Get the care action for a menu action */
   getInventoryAction: (menuAction: CompanionMenuAction) => InventoryAction | null;
 }
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
 /**
- * Map item categories to inventory actions.
+ * Map item categories to care actions.
  * This is the canonical mapping for how items are used.
  */
 export const CATEGORY_TO_ACTION: Record<ShopItemCategory, InventoryAction | null> = {
@@ -85,14 +84,14 @@ export const CATEGORY_TO_ACTION: Record<ShopItemCategory, InventoryAction | null
 };
 
 /**
- * Map menu actions to inventory actions (they match by design).
+ * Map menu actions to item-based care actions (they match by design).
  */
 export const MENU_ACTION_TO_INVENTORY_ACTION: Record<CompanionMenuAction, InventoryAction | null> = {
   feed: 'feed',
   play: 'play',
   medicine: 'medicine',
   clean: 'clean',
-  sleep: null, // Sleep is a special action, not an inventory action
+  sleep: null, // Sleep is a special action, not item-based
 };
 
 // ─── Hook Implementation ──────────────────────────────────────────────────────
@@ -108,8 +107,8 @@ export const MENU_ACTION_TO_INVENTORY_ACTION: Record<CompanionMenuAction, Invent
  * Usage:
  * ```tsx
  * const { useItem, isUsingItem } = useCompanionItemUse({
- *   onUseItem: async (itemId, action, qty) => {
- *     return await executeUseItem({ itemId, action, quantity: qty });
+ *   onUseItem: async (itemId, action) => {
+ *     return await executeUseItem({ itemId, action });
  *   },
  *   onSuccess: (result) => removeItemFromScreen(result.item),
  *   onFailure: (result) => keepItemOnScreen(result.item),
@@ -134,7 +133,7 @@ export function useCompanionItemUse({
   }, []);
   
   /**
-   * Get the inventory action for a menu action.
+   * Get the care action for a menu action.
    */
   const getInventoryAction = useCallback((menuAction: CompanionMenuAction): InventoryAction | null => {
     return MENU_ACTION_TO_INVENTORY_ACTION[menuAction];
@@ -187,7 +186,7 @@ export function useCompanionItemUse({
     
     try {
       // Execute the use callback
-      const useResult = await onUseItem(item.id, inventoryAction, 1);
+      const useResult = await onUseItem(item.id, inventoryAction);
       
       if (useResult.success) {
         const result: ItemUseResult = {

src/blobbi/core/hooks/useBlobbiMigration.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { useNostr } from '@nostrify/react';
 import type { NostrEvent } from '@nostrify/nostrify';
 
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -8,12 +9,18 @@ import { toast } from '@/hooks/useToast';
 import {
   KIND_BLOBBI_STATE,
   KIND_BLOBBONAUT_PROFILE,
+  BLOBBONAUT_PROFILE_KINDS,
+  getBlobbonautQueryDValues,
   buildMigrationTags,
   generatePetId10,
   getCanonicalBlobbiD,
+  isValidBlobbiEvent,
+  isValidBlobbonautEvent,
+  isLegacyBlobbonautKind,
   migratePetInHas,
   updateBlobbonautTags,
   parseBlobbiEvent,
+  parseBlobbonautEvent,
   parseStorageTags,
   type BlobbiCompanion,
   type BlobbonautProfile,
@@ -52,10 +59,6 @@ export interface EnsureCanonicalOptions {
   updateCompanionEvent: (event: NostrEvent) => void;
   /** Callback to update localStorage selection if it was pointing to legacy d */
   updateStoredSelectedD?: (newD: string) => void;
-  /** Callback to invalidate companion query */
-  invalidateCompanion?: () => void;
-  /** Callback to invalidate profile query */
-  invalidateProfile?: () => void;
 }
 
 /**
@@ -111,6 +114,7 @@ export interface EnsureCanonicalResult {
  * ```
  */
 export function useBlobbiMigration() {
+  const { nostr } = useNostr();
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
   
@@ -134,8 +138,6 @@ export function useBlobbiMigration() {
       updateProfileEvent,
       updateCompanionEvent,
       updateStoredSelectedD,
-      invalidateCompanion,
-      invalidateProfile,
     } = options;
     
     if (!user?.pubkey) {
@@ -186,11 +188,12 @@ export function useBlobbiMigration() {
       
       const profileEvent = await publishEvent({
         kind: KIND_BLOBBONAUT_PROFILE,
-        content: '',
+        content: profile.event.content,
         tags: profileTags,
       });
       
-      // Update query caches
+      // Update query caches (optimistic — no invalidation needed since we
+      // fetch fresh from relays before every mutation)
       updateProfileEvent(profileEvent);
       updateCompanionEvent(canonicalEvent);
       
@@ -200,10 +203,6 @@ export function useBlobbiMigration() {
         updateStoredSelectedD(canonicalD);
       }
       
-      // Invalidate queries to refetch fresh data
-      invalidateCompanion?.();
-      invalidateProfile?.();
-      
       toast({
         title: 'Pet upgraded!',
         description: `${companion.name} has been migrated to the new format.`,
@@ -237,29 +236,102 @@ export function useBlobbiMigration() {
     }
   }, [user?.pubkey, publishEvent]);
   
+  /**
+   * Fetch the freshest companion event directly from relays, bypassing cache.
+   * This is the read step of the read-modify-write pattern.
+   */
+  const fetchFreshCompanion = useCallback(async (
+    pubkey: string,
+    dTag: string,
+  ): Promise<BlobbiCompanion | null> => {
+    const events = await nostr.query([{
+      kinds: [KIND_BLOBBI_STATE],
+      authors: [pubkey],
+      '#d': [dTag],
+    }]);
+
+    const validEvents = events
+      .filter(isValidBlobbiEvent)
+      .sort((a, b) => b.created_at - a.created_at);
+
+    if (validEvents.length === 0) return null;
+    return parseBlobbiEvent(validEvents[0]) ?? null;
+  }, [nostr]);
+
+  /**
+   * Fetch the freshest profile event directly from relays, bypassing cache.
+   */
+  const fetchFreshProfile = useCallback(async (
+    pubkey: string,
+  ): Promise<BlobbonautProfile | null> => {
+    const dValues = getBlobbonautQueryDValues(pubkey);
+    const events = await nostr.query([{
+      kinds: [...BLOBBONAUT_PROFILE_KINDS],
+      authors: [pubkey],
+      '#d': dValues,
+    }]);
+
+    const validEvents = events.filter(isValidBlobbonautEvent);
+    if (validEvents.length === 0) return null;
+
+    // Prefer current kind over legacy
+    const currentKindEvents = validEvents.filter(e => e.kind === KIND_BLOBBONAUT_PROFILE);
+    if (currentKindEvents.length > 0) {
+      const sorted = currentKindEvents.sort((a, b) => b.created_at - a.created_at);
+      return parseBlobbonautEvent(sorted[0]) ?? null;
+    }
+
+    const legacyKindEvents = validEvents.filter(e => isLegacyBlobbonautKind(e));
+    if (legacyKindEvents.length > 0) {
+      const sorted = legacyKindEvents.sort((a, b) => b.created_at - a.created_at);
+      return parseBlobbonautEvent(sorted[0]) ?? null;
+    }
+
+    return null;
+  }, [nostr]);
+
   /**
    * Ensure a Blobbi is in canonical format before performing an action.
    * 
+   * CRITICAL: This fetches fresh data from relays (read-modify-write pattern)
+   * instead of using potentially stale cache data. This prevents state resets
+   * caused by publishing over a newer event with stale cached data.
+   * 
    * If the companion is legacy, it will be migrated first.
    * Returns the canonical companion to use for the action.
    * 
    * Flow:
-   * 1. Check if Blobbi is legacy
-   * 2. If legacy: migrate Blobbi
-   * 3. Return the resolved canonical Blobbi
+   * 1. Fetch fresh companion + profile from relays
+   * 2. Check if Blobbi is legacy
+   * 3. If legacy: migrate Blobbi
+   * 4. Return the resolved canonical Blobbi with fresh data
    * 
    * All interaction handlers should call this before publishing events.
    */
   const ensureCanonicalBlobbiBeforeAction = useCallback(async (
     options: EnsureCanonicalOptions
   ): Promise<EnsureCanonicalResult | null> => {
-    const { companion, profile } = options;
+    if (!user?.pubkey) return null;
+
+    const { companion: cachedCompanion, profile: cachedProfile } = options;
+
+    // Fetch fresh data from relays (read step of read-modify-write)
+    const [freshCompanion, freshProfile] = await Promise.all([
+      fetchFreshCompanion(user.pubkey, cachedCompanion.d),
+      fetchFreshProfile(user.pubkey),
+    ]);
+
+    // Use fresh data, falling back to cached only if relay fetch returned nothing
+    const companion = freshCompanion ?? cachedCompanion;
+    const profile = freshProfile ?? cachedProfile;
     
     // Check if the companion needs migration
     if (companion.isLegacy) {
       console.log('[Blobbi Migration] Legacy companion detected, migrating before action');
       
-      const migrationResult = await migrateLegacyBlobbi(options);
+      // Use fresh data in migration options
+      const migrationOptions = { ...options, companion, profile };
+      const migrationResult = await migrateLegacyBlobbi(migrationOptions);
       
       if (!migrationResult) {
         // Migration failed, cannot proceed with action
@@ -279,7 +351,7 @@ export function useBlobbiMigration() {
       };
     }
     
-    // Companion is already canonical, return profile as-is
+    // Companion is already canonical, return fresh data
     return {
       wasMigrated: false,
       companion,
@@ -288,7 +360,7 @@ export function useBlobbiMigration() {
       profileAllTags: profile.allTags,
       profileStorage: profile.storage,
     };
-  }, [migrateLegacyBlobbi]);
+  }, [user?.pubkey, fetchFreshCompanion, fetchFreshProfile, migrateLegacyBlobbi]);
   
   return {
     /** Migrate a legacy Blobbi to canonical format */

src/blobbi/core/hooks/useBlobbisCollection.ts

@@ -132,7 +132,10 @@ export function useBlobbisCollection(dList: string[] | undefined) {
     retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
   });
   
-  // Helper to invalidate and refetch after publishing
+  // Helper to invalidate and refetch after publishing.
+  // NOTE: In most mutation paths this is no longer needed — the read-modify-write
+  // pattern (fetch fresh → mutate → optimistic update) keeps the cache correct.
+  // Only call this when the set of d-tags itself changes (e.g. adoption, deletion).
   const invalidate = useCallback(() => {
     if (user?.pubkey && queryKeyDTags) {
       queryClient.invalidateQueries({
@@ -141,36 +144,38 @@ export function useBlobbisCollection(dList: string[] | undefined) {
     }
   }, [queryClient, user?.pubkey, queryKeyDTags]);
   
-  // Update a single companion event in the query cache (optimistic update)
+  // Update a single companion event in the query cache (optimistic update).
+  // CRITICAL: Updates ALL blobbi-collection queries for this user, not just the
+  // one matching the current queryKeyDTags. This ensures the BlobbiPage cache
+  // and companion layer cache stay in sync (they use different d-tag lists).
   const updateCompanionEvent = useCallback((event: NostrEvent) => {
     const parsed = parseBlobbiEvent(event);
     if (!parsed || !user?.pubkey) return;
     
-    queryClient.setQueryData<{ companionsByD: Record<string, BlobbiCompanion>; companions: BlobbiCompanion[] }>(
-      ['blobbi-collection', user.pubkey, queryKeyDTags],
-      (prev) => {
-        if (!prev) {
-          return {
-            companionsByD: { [parsed.d]: parsed },
-            companions: [parsed],
-          };
-        }
-        
-        // Update the specific companion in the record
-        const newCompanionsByD = {
-          ...prev.companionsByD,
-          [parsed.d]: parsed,
-        };
-        
-        // Rebuild companions array from the record
-        const newCompanions = Object.values(newCompanionsByD);
-        
-        return {
-          companionsByD: newCompanionsByD,
-          companions: newCompanions,
-        };
-      }
-    );
+    type CollectionData = { companionsByD: Record<string, BlobbiCompanion>; companions: BlobbiCompanion[] };
+    const matchingQueries = queryClient.getQueriesData<CollectionData>({
+      queryKey: ['blobbi-collection', user.pubkey],
+    });
+
+    for (const [queryKey, data] of matchingQueries) {
+      if (!data) continue;
+      const newCompanionsByD = { ...data.companionsByD, [parsed.d]: parsed };
+      queryClient.setQueryData<CollectionData>(queryKey, {
+        companionsByD: newCompanionsByD,
+        companions: Object.values(newCompanionsByD),
+      });
+    }
+
+    // If no existing queries matched (first load), set our own query key
+    if (matchingQueries.length === 0) {
+      queryClient.setQueryData<CollectionData>(
+        ['blobbi-collection', user.pubkey, queryKeyDTags],
+        {
+          companionsByD: { [parsed.d]: parsed },
+          companions: [parsed],
+        },
+      );
+    }
   }, [queryClient, user?.pubkey, queryKeyDTags]);
   
   // Memoize return values for stability
@@ -190,7 +195,7 @@ export function useBlobbisCollection(dList: string[] | undefined) {
     isStale: query.isStale,
     /** Query error if any */
     error: query.error,
-    /** Invalidate and refetch the collection */
+    /** Invalidate and refetch the collection (use only when d-tag set changes, not after mutations) */
     invalidate,
     /** Optimistically update a single companion in the cache */
     updateCompanionEvent,

src/blobbi/core/lib/blobbi-egg-adapter.ts

@@ -110,7 +110,7 @@ export function toEggGraphicVisualBlobbi(
   companion: BlobbiCompanion,
   themeVariant: EggThemeVariant = DEFAULT_THEME_VARIANT
 ): EggVisualBlobbi {
-  const { visualTraits, stage, allTags } = companion;
+  const { visualTraits, stage, allTags = [] } = companion;
   
   return {
     // Colors pass through directly (already CSS hex values)

src/blobbi/core/lib/blobbi.ts

@@ -3,6 +3,7 @@ import { bytesToHex } from '@noble/hashes/utils';
 import type { NostrEvent } from '@nostrify/nostrify';
 
 import { validateAndRepairBlobbiTags } from './blobbi-tag-schema';
+import { parseProfileContent } from './blobbonaut-content';
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
@@ -288,7 +289,7 @@ export interface BlobbiCompanion {
 }
 
 /**
- * Stored item in user's profile inventory
+ * Stored item in user's profile (from purchases)
  */
 export interface StorageItem {
   itemId: string;   // Must match a ShopItem.id
@@ -312,14 +313,16 @@ export interface BlobbonautProfile {
   name: string | undefined;
   /** List of owned Blobbi d-tags */
   has: string[];
-  /** In-game currency balance */
+  /** In-game currency balance (legacy — daily missions now use XP) */
   coins: number;
   /** Petting level (interaction counter) */
   pettingLevel: number;
-  /** Purchased items inventory */
+  /** Purchased items storage */
   storage: StorageItem[];
   /** All tags preserved for republishing */
   allTags: string[][];
+  /** Parsed content JSON (daily missions, future fields). Empty object if legacy/empty content. */
+  content: import('./blobbonaut-content').BlobbonautProfileContent;
 }
 
 // ─── Helper Functions ─────────────────────────────────────────────────────────
@@ -971,18 +974,23 @@ export function parseBlobbonautEvent(event: NostrEvent): BlobbonautProfile | und
   const pettingLevelValue = parseNumericTag(tags, 'pettingLevel') 
     ?? parseNumericTag(tags, 'petting_level') 
     ?? 0;
+
+  // Parse structured content JSON (daily missions, future fields)
+  const parsedContent = parseProfileContent(event.content);
   
   return {
     event,
     d,
     currentCompanion: getTagValue(tags, 'current_companion'),
-    onboardingDone: parseBooleanTag(tags, 'onboarding_done', false),
+    onboardingDone: parseBooleanTag(tags, 'blobbi_onboarding_done', false)
+      || parseBooleanTag(tags, 'onboarding_done', false),
     name: getTagValue(tags, 'name'),
     has: getTagValues(tags, 'has'),
     coins: parseNumericTag(tags, 'coins') ?? 0,
     pettingLevel: pettingLevelValue,
     storage: parseStorageTags(tags),
     allTags: tags,
+    content: parsedContent,
   };
 }
 
@@ -996,7 +1004,7 @@ export function buildBlobbonautTags(pubkey: string): string[][] {
   return [
     ['d', getCanonicalBlobbonautD(pubkey)],
     ['b', BLOBBI_ECOSYSTEM_NAMESPACE],
-    ['onboarding_done', 'false'],
+    ['blobbi_onboarding_done', 'false'],
     ['pettingLevel', '0'],
   ];
 }
@@ -1138,7 +1146,9 @@ export const DEPRECATED_BLOBBI_TAG_NAMES = new Set([
  * These tags are controlled by the application and may be overwritten.
  */
 export const MANAGED_BLOBBONAUT_PROFILE_TAG_NAMES = new Set([
-  'd', 'b', 'name', 'current_companion', 'onboarding_done', 'has', 'storage',
+  'd', 'b', 'name', 'current_companion', 'blobbi_onboarding_done', 'onboarding_done', 'has', 'storage',
+  // Progression: derived global level mirrored into a tag for relay queryability
+  'level',
   // Legacy player progress tags (preserved for compatibility)
   'coins', 'petting_level', 'pettingLevel', 'lifetime_blobbis', 'lifetimeBlobbis',
   'starter_blobbi', 'starterBlobbi', 'favorite_blobbi', 'favoriteBlobbi',
@@ -1365,17 +1375,44 @@ export function profileNeedsPettingLevelNormalization(profile: BlobbonautProfile
 }
 
 /**
- * Build updated tags for normalizing a profile to include pettingLevel.
- * Preserves all existing tags and adds pettingLevel: 0 if missing.
+ * Check if a profile uses the legacy `onboarding_done` tag instead of the
+ * new `blobbi_onboarding_done` tag. Returns true if migration is needed.
+ */
+export function profileNeedsOnboardingTagMigration(profile: BlobbonautProfile): boolean {
+  const hasNewTag = profile.allTags.some(([name]) => name === 'blobbi_onboarding_done');
+  const hasOldTag = profile.allTags.some(([name]) => name === 'onboarding_done');
+  // Needs migration if: has old tag but not the new one
+  return !hasNewTag && hasOldTag;
+}
+
+/**
+ * Build updated tags for normalizing a profile.
+ * Handles:
+ * - Adding pettingLevel: 0 if missing
+ * - Migrating onboarding_done → blobbi_onboarding_done
+ *
+ * Preserves all existing tags except the ones being migrated.
  */
 export function buildNormalizedProfileTags(profile: BlobbonautProfile): string[][] {
-  if (!profileNeedsPettingLevelNormalization(profile)) {
-    return profile.allTags;
+  let tags = profile.allTags;
+  let changed = false;
+
+  // Normalize pettingLevel
+  if (profileNeedsPettingLevelNormalization(profile)) {
+    tags = updateBlobbonautTags(tags, { pettingLevel: '0' });
+    changed = true;
   }
-  
-  return updateBlobbonautTags(profile.allTags, {
-    pettingLevel: '0',
-  });
+
+  // Migrate onboarding_done → blobbi_onboarding_done
+  if (profileNeedsOnboardingTagMigration(profile)) {
+    const oldValue = tags.find(([name]) => name === 'onboarding_done')?.[1] ?? 'false';
+    // Remove old tag, add new tag
+    tags = tags.filter(([name]) => name !== 'onboarding_done');
+    tags = updateBlobbonautTags(tags, { blobbi_onboarding_done: oldValue });
+    changed = true;
+  }
+
+  return changed ? tags : profile.allTags;
 }
 
 // ─── Query Helpers ────────────────────────────────────────────────────────────

src/blobbi/core/lib/blobbonaut-content.ts

@@ -0,0 +1,316 @@
+// src/blobbi/core/lib/blobbonaut-content.ts
+
+/**
+ * Blobbonaut Profile Content JSON — Type definitions, parsing, and serialization.
+ *
+ * Kind 11125 uses a JSON content field alongside tag-based data. The content
+ * field holds independent top-level sections that coexist without interference:
+ *
+ *   {
+ *     "dailyMissions": { ... },
+ *     "progression":   { ... },
+ *     "<future>":      { ... }
+ *   }
+ *
+ * ── Source-of-Truth Rules ─────────────────────────────────────────────────────
+ *
+ *   • `dailyMissions` is an independent top-level section. It is only modified
+ *     by daily mission write paths through `updateDailyMissionsContent()`.
+ *
+ *   • `progression` is an independent top-level section. It is only modified
+ *     by progression write paths through `updateProgressionContent()` (in
+ *     progression.ts). Within `progression`:
+ *       – `progression.games.*` is the source of truth for per-game levels/XP.
+ *       – `progression.global.level` is derived (sum of all game levels).
+ *       – The `["level", "<n>"]` tag is a queryable mirror of the derived level.
+ *
+ *   • Unknown top-level keys are always preserved. Future features (inventory,
+ *     settings, achievements, etc.) can safely add new top-level sections
+ *     without risk of being overwritten.
+ *
+ * ── How to Write Content Safely ───────────────────────────────────────────────
+ *
+ *   NEVER manually reconstruct the full content object. Always use one of the
+ *   section-specific helpers:
+ *
+ *     • `updateDailyMissionsContent(existingContent, missions)` — for daily missions
+ *     • `updateProgressionContent(existingContent, update)` — for progression
+ *     • `updateContentSection(existingContent, key, value)` — for any section
+ *
+ *   These helpers guarantee:
+ *     1. Existing content is parsed safely (invalid JSON → empty object + warning)
+ *     2. Only the targeted section is modified
+ *     3. All sibling sections and unknown keys are preserved
+ *     4. The result is serialized back to a valid JSON string
+ *
+ *   Tag-only write paths (shop purchases, onboarding, etc.) that do not modify
+ *   the content field should pass `profile.event.content` through unchanged.
+ *
+ * Design principles:
+ * - Content is always valid JSON (or empty string for legacy)
+ * - Unknown fields are preserved during read-modify-write
+ * - Missing fields default gracefully (no crashes on partial data)
+ * - Each top-level key is independently versioned via the field's own shape
+ */
+
+import type { DailyMission } from '@/blobbi/actions/lib/daily-missions';
+import type { Progression } from './progression';
+import { parseProgression } from './progression';
+import { safeParseContent, updateContentSection } from './content-json';
+
+// Re-export shared utilities so existing importers don't need to change.
+// The canonical home is content-json.ts; these re-exports keep the public
+// API backward-compatible.
+export type { ParsedContentResult } from './content-json';
+export { safeParseContent, updateContentSection } from './content-json';
+
+// ─── Daily Missions Persisted Shape ───────────────────────────────────────────
+
+/**
+ * The daily missions state as persisted in profile content JSON.
+ * This replaces the localStorage-only `DailyMissionsState`.
+ */
+export interface PersistedDailyMissions {
+  /** The date these missions were generated (YYYY-MM-DD) */
+  date: string;
+  /** The missions for this day, including progress */
+  missions: PersistedDailyMission[];
+  /** Whether the bonus mission has been claimed today */
+  bonusClaimed: boolean;
+  /** Number of rerolls remaining for today (resets daily) */
+  rerollsRemaining: number;
+  /** Total XP earned from daily missions (lifetime, across all Blobbis) */
+  totalXpEarned: number;
+  /** Timestamp (ms) when this was last modified */
+  lastUpdatedAt: number;
+}
+
+/**
+ * A single daily mission as persisted.
+ * Mirrors DailyMission but explicitly typed for serialization.
+ */
+export interface PersistedDailyMission {
+  id: string;
+  title: string;
+  description: string;
+  action: string;
+  requiredCount: number;
+  /** XP reward (was previously coins) */
+  reward: number;
+  weight: number;
+  requiredStages?: string[];
+  currentCount: number;
+  completed: boolean;
+  claimed: boolean;
+}
+
+// ─── Full Profile Content Shape ───────────────────────────────────────────────
+
+/**
+ * The full structured content of a Kind 11125 Blobbonaut Profile event.
+ *
+ * Each field is an independent section. New top-level fields can be added
+ * here as the system grows (inventory, settings, achievements, etc.).
+ *
+ * Unknown fields from the raw JSON are preserved via `RawProfileContent`
+ * during read-modify-write to avoid losing data from future versions.
+ */
+export interface BlobbonautProfileContent {
+  /** Daily missions state. Undefined if never migrated. */
+  dailyMissions?: PersistedDailyMissions;
+  /** Progression system (global level + per-game levels/XP/unlocks). Undefined if not yet initialized. */
+  progression?: Progression;
+}
+
+/**
+ * Internal representation that also carries unknown fields for safe merging.
+ * Every parse and merge operation works on this type to ensure forward
+ * compatibility — keys we don't recognize are never dropped.
+ */
+interface RawProfileContent extends BlobbonautProfileContent {
+  /** Captures any fields we don't recognize, for forward compatibility */
+  [key: string]: unknown;
+}
+
+// ─── Typed Parsing ────────────────────────────────────────────────────────────
+
+/**
+ * Parse the content field of a Kind 11125 event into structured, typed data.
+ *
+ * - Empty string or invalid JSON returns empty object (no dailyMissions,
+ *   no progression).
+ * - Malformed sections are silently dropped (not propagated as corrupt data).
+ * - Unknown top-level fields are preserved in the return value for forward
+ *   compatibility.
+ *
+ * Use this when you need typed access to content fields (e.g. reading
+ * `profile.content.dailyMissions`). For write operations, use the
+ * section-specific update helpers instead.
+ */
+export function parseProfileContent(content: string): RawProfileContent {
+  const { data } = safeParseContent(content);
+
+  // Start with all keys (including unknown ones)
+  const result: RawProfileContent = { ...data };
+
+  // ── Validate dailyMissions ──
+  if (data.dailyMissions) {
+    const dm = data.dailyMissions;
+    if (
+      typeof dm === 'object' &&
+      dm !== null &&
+      !Array.isArray(dm) &&
+      typeof (dm as Record<string, unknown>).date === 'string' &&
+      Array.isArray((dm as Record<string, unknown>).missions)
+    ) {
+      const dmObj = dm as Record<string, unknown>;
+      result.dailyMissions = {
+        date: dmObj.date as string,
+        missions: (dmObj.missions as unknown[]).filter(isValidPersistedMission),
+        bonusClaimed: dmObj.bonusClaimed === true,
+        rerollsRemaining: typeof dmObj.rerollsRemaining === 'number' ? dmObj.rerollsRemaining : 3,
+        totalXpEarned: typeof dmObj.totalXpEarned === 'number' ? dmObj.totalXpEarned : 0,
+        lastUpdatedAt: typeof dmObj.lastUpdatedAt === 'number' ? dmObj.lastUpdatedAt : 0,
+      };
+    } else {
+      // Malformed — drop it rather than persisting corrupt data
+      delete result.dailyMissions;
+    }
+  }
+
+  // ── Validate progression ──
+  // parseProgression returns undefined for malformed data, which safely
+  // removes the key rather than persisting corrupt structures.
+  if (data.progression !== undefined) {
+    const parsed = parseProgression(data.progression);
+    if (parsed) {
+      result.progression = parsed;
+    } else {
+      delete result.progression;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Validate a single persisted mission has the minimum required fields.
+ */
+function isValidPersistedMission(m: unknown): m is PersistedDailyMission {
+  if (typeof m !== 'object' || m === null) return false;
+  const obj = m as Record<string, unknown>;
+  return (
+    typeof obj.id === 'string' &&
+    typeof obj.action === 'string' &&
+    typeof obj.requiredCount === 'number' &&
+    typeof obj.reward === 'number' &&
+    typeof obj.currentCount === 'number' &&
+    typeof obj.completed === 'boolean' &&
+    typeof obj.claimed === 'boolean'
+  );
+}
+
+// ─── Daily Missions Content Update ────────────────────────────────────────────
+
+/**
+ * Update the `dailyMissions` section inside a kind 11125 content string.
+ *
+ * This is the **standard entry point** for any code path that needs to
+ * persist daily mission state. It:
+ *
+ *   1. Parses the existing content safely (empty/invalid → empty object)
+ *   2. Replaces only the `dailyMissions` key
+ *   3. Preserves `progression`, unknown keys, and all other sibling sections
+ *   4. Returns the serialized content string
+ *
+ * ── Why this function should be the standard path ──
+ *
+ * Every kind 11125 content write that touches `dailyMissions` should flow
+ * through `updateDailyMissionsContent`. This guarantees:
+ *   - `progression` is never overwritten
+ *   - Unknown top-level keys are never dropped
+ *   - Future sections (inventory, settings, achievements) are safe
+ *   - The merge is always conservative and section-scoped
+ *
+ * @param existingContent - The current `event.content` string (may be empty)
+ * @param dailyMissions   - The complete daily missions state to persist
+ * @returns The serialized content string with dailyMissions updated
+ */
+export function updateDailyMissionsContent(
+  existingContent: string,
+  dailyMissions: PersistedDailyMissions,
+): string {
+  return updateContentSection(existingContent, 'dailyMissions', dailyMissions);
+}
+
+// ─── Legacy Merge (deprecated) ────────────────────────────────────────────────
+
+/**
+ * Serialize profile content to a JSON string for the event content field.
+ *
+ * @deprecated Use the section-specific helpers instead:
+ *   - `updateDailyMissionsContent(existingContent, missions)` for daily missions
+ *   - `updateProgressionContent(existingContent, update)` for progression (from progression.ts)
+ *   - `updateContentSection(existingContent, key, value)` for generic sections
+ *
+ * This function performs a shallow merge which is safe for flat sections
+ * like `dailyMissions` but NOT safe for nested sections like `progression`
+ * (which requires deep merging to avoid dropping sibling game entries).
+ *
+ * Kept for backward compatibility but should not be used in new code.
+ */
+export function mergeProfileContent(
+  existingContent: string,
+  updates: Partial<BlobbonautProfileContent>,
+): string {
+  const { data } = safeParseContent(existingContent);
+
+  // Shallow merge — safe for flat sections, not for nested ones.
+  const merged: Record<string, unknown> = {
+    ...data,
+    ...updates,
+  };
+
+  return JSON.stringify(merged);
+}
+
+// ─── Conversion helpers ───────────────────────────────────────────────────────
+
+/**
+ * Convert a DailyMission (from the runtime type) to persisted form.
+ * These are nearly identical but this keeps the boundary explicit.
+ */
+export function missionToPersistedMission(m: DailyMission): PersistedDailyMission {
+  return {
+    id: m.id,
+    title: m.title,
+    description: m.description,
+    action: m.action,
+    requiredCount: m.requiredCount,
+    reward: m.reward,
+    weight: m.weight,
+    requiredStages: m.requiredStages,
+    currentCount: m.currentCount,
+    completed: m.completed,
+    claimed: m.claimed,
+  };
+}
+
+/**
+ * Convert a PersistedDailyMission back to the runtime DailyMission type.
+ */
+export function persistedMissionToMission(p: PersistedDailyMission): DailyMission {
+  return {
+    id: p.id,
+    title: p.title ?? p.id,
+    description: p.description ?? '',
+    action: p.action as DailyMission['action'],
+    requiredCount: p.requiredCount,
+    reward: p.reward,
+    weight: p.weight ?? 1,
+    requiredStages: p.requiredStages as DailyMission['requiredStages'],
+    currentCount: p.currentCount,
+    completed: p.completed,
+    claimed: p.claimed,
+  };
+}

src/blobbi/core/lib/content-coexistence.test.ts

@@ -0,0 +1,581 @@
+// src/blobbi/core/lib/content-coexistence.test.ts
+
+/**
+ * Coexistence tests for the kind 11125 content system.
+ *
+ * These tests verify the critical guarantee that independent content sections
+ * (dailyMissions, progression, unknown/future keys) can be updated without
+ * interfering with each other. Every test here represents an invariant that
+ * must never be broken.
+ */
+
+import { describe, it, expect } from 'vitest';
+
+import { safeParseContent, updateContentSection } from './content-json';
+import {
+  parseProfileContent,
+  updateDailyMissionsContent,
+  type PersistedDailyMissions,
+} from './blobbonaut-content';
+import { updateProgressionContent, upsertLevelTag } from './progression';
+
+// ─── Test Fixtures ────────────────────────────────────────────────────────────
+
+const SAMPLE_DAILY_MISSIONS: PersistedDailyMissions = {
+  date: '2026-04-06',
+  missions: [
+    {
+      id: 'feed_3',
+      title: 'Feed your Blobbi',
+      description: 'Feed your Blobbi 3 times',
+      action: 'feed',
+      requiredCount: 3,
+      reward: 50,
+      weight: 1,
+      currentCount: 2,
+      completed: false,
+      claimed: false,
+    },
+  ],
+  bonusClaimed: false,
+  rerollsRemaining: 2,
+  totalXpEarned: 150,
+  lastUpdatedAt: 1712400000000,
+};
+
+const SAMPLE_PROGRESSION_JSON = {
+  global: { level: 5, xp: 0 },
+  games: {
+    blobbi: {
+      level: 3,
+      xp: 250,
+      unlocks: { maxBlobbis: 2, realInventoryEnabled: true },
+    },
+    farm: { level: 2, xp: 100 },
+  },
+};
+
+const SAMPLE_UNKNOWN_SECTION = { achievements: ['first_hatch', 'level_5'] };
+
+/** Build a full content string with all sections present. */
+function buildFullContent(): string {
+  return JSON.stringify({
+    dailyMissions: SAMPLE_DAILY_MISSIONS,
+    progression: SAMPLE_PROGRESSION_JSON,
+    futureFeature: SAMPLE_UNKNOWN_SECTION,
+    settings: { theme: 'dark', language: 'en' },
+  });
+}
+
+// ─── Progression ↔ DailyMissions Coexistence ──────────────────────────────────
+
+describe('progression and dailyMissions coexistence', () => {
+  it('updating progression preserves dailyMissions exactly', () => {
+    const existing = buildFullContent();
+
+    const { content } = updateProgressionContent(existing, {
+      games: { blobbi: { level: 4, xp: 300 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.dailyMissions).toEqual(SAMPLE_DAILY_MISSIONS);
+  });
+
+  it('updating dailyMissions preserves progression exactly', () => {
+    const existing = buildFullContent();
+
+    const updatedMissions: PersistedDailyMissions = {
+      ...SAMPLE_DAILY_MISSIONS,
+      totalXpEarned: 200,
+      lastUpdatedAt: 9999999999999,
+    };
+
+    const content = updateDailyMissionsContent(existing, updatedMissions);
+    const parsed = JSON.parse(content);
+
+    // Progression must be untouched
+    expect(parsed.progression).toEqual(SAMPLE_PROGRESSION_JSON);
+    // dailyMissions must reflect the update
+    expect(parsed.dailyMissions.totalXpEarned).toBe(200);
+  });
+
+  it('updating progression then dailyMissions preserves both updates', () => {
+    const existing = buildFullContent();
+
+    // First: update progression
+    const { content: afterProgression } = updateProgressionContent(existing, {
+      games: { blobbi: { level: 10 } },
+    });
+
+    // Second: update daily missions on top of the progression-updated content
+    const updatedMissions: PersistedDailyMissions = {
+      ...SAMPLE_DAILY_MISSIONS,
+      bonusClaimed: true,
+    };
+    const afterBoth = updateDailyMissionsContent(afterProgression, updatedMissions);
+
+    const parsed = JSON.parse(afterBoth);
+    expect(parsed.progression.games.blobbi.level).toBe(10);
+    expect(parsed.progression.global.level).toBe(12); // 10 + 2 (farm)
+    expect(parsed.dailyMissions.bonusClaimed).toBe(true);
+  });
+
+  it('updating dailyMissions then progression preserves both updates', () => {
+    const existing = buildFullContent();
+
+    // First: update daily missions
+    const updatedMissions: PersistedDailyMissions = {
+      ...SAMPLE_DAILY_MISSIONS,
+      rerollsRemaining: 0,
+    };
+    const afterMissions = updateDailyMissionsContent(existing, updatedMissions);
+
+    // Second: update progression on top of the missions-updated content
+    const { content: afterBoth } = updateProgressionContent(afterMissions, {
+      games: { blobbi: { xp: 500 } },
+    });
+
+    const parsed = JSON.parse(afterBoth);
+    expect(parsed.dailyMissions.rerollsRemaining).toBe(0);
+    expect(parsed.progression.games.blobbi.xp).toBe(500);
+  });
+});
+
+// ─── Sibling Game Preservation ────────────────────────────────────────────────
+
+describe('progression.games sibling preservation', () => {
+  it('updating blobbi preserves sibling future games', () => {
+    const existing = buildFullContent();
+
+    const { content } = updateProgressionContent(existing, {
+      games: { blobbi: { level: 7 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.games.farm).toEqual({ level: 2, xp: 100 });
+    expect(parsed.progression.games.blobbi.level).toBe(7);
+  });
+
+  it('adding a new game preserves all existing games', () => {
+    const existing = buildFullContent();
+
+    const { content } = updateProgressionContent(existing, {
+      games: { racing: { level: 1, xp: 0 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.games.blobbi.level).toBe(3);
+    expect(parsed.progression.games.farm).toEqual({ level: 2, xp: 100 });
+    expect(parsed.progression.games.racing.level).toBe(1);
+    expect(parsed.progression.global.level).toBe(6); // 3 + 2 + 1
+  });
+});
+
+// ─── Unknown Key Preservation ─────────────────────────────────────────────────
+
+describe('unknown top-level key preservation', () => {
+  it('updating progression preserves unknown keys', () => {
+    const existing = buildFullContent();
+
+    const { content } = updateProgressionContent(existing, {
+      games: { blobbi: { xp: 999 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.futureFeature).toEqual(SAMPLE_UNKNOWN_SECTION);
+    expect(parsed.settings).toEqual({ theme: 'dark', language: 'en' });
+  });
+
+  it('updating dailyMissions preserves unknown keys', () => {
+    const existing = buildFullContent();
+
+    const content = updateDailyMissionsContent(existing, {
+      ...SAMPLE_DAILY_MISSIONS,
+      totalXpEarned: 500,
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.futureFeature).toEqual(SAMPLE_UNKNOWN_SECTION);
+    expect(parsed.settings).toEqual({ theme: 'dark', language: 'en' });
+  });
+
+  it('updateContentSection preserves all sibling keys', () => {
+    const existing = buildFullContent();
+
+    const content = updateContentSection(existing, 'inventory', { items: ['potion'] });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.dailyMissions).toEqual(SAMPLE_DAILY_MISSIONS);
+    expect(parsed.progression).toEqual(SAMPLE_PROGRESSION_JSON);
+    expect(parsed.futureFeature).toEqual(SAMPLE_UNKNOWN_SECTION);
+    expect(parsed.inventory).toEqual({ items: ['potion'] });
+  });
+});
+
+// ─── Level Tag Isolation ──────────────────────────────────────────────────────
+
+describe('level tag does not affect unrelated tags', () => {
+  it('upsertLevelTag preserves all other tags', () => {
+    const tags = [
+      ['d', 'blobbonaut-abc123'],
+      ['b', 'blobbi:ecosystem:v1'],
+      ['name', 'TestPlayer'],
+      ['coins', '500'],
+      ['has', 'blobbi-001'],
+      ['has', 'blobbi-002'],
+      ['storage', 'potion:3'],
+      ['current_companion', 'blobbi-001'],
+      ['blobbi_onboarding_done', 'true'],
+    ];
+
+    const result = upsertLevelTag(tags, 5);
+
+    // All original tags preserved in order
+    expect(result.slice(0, 9)).toEqual(tags);
+    // Level appended
+    expect(result[9]).toEqual(['level', '5']);
+    // Total length: original + 1
+    expect(result).toHaveLength(10);
+  });
+
+  it('updating existing level tag does not change tag order', () => {
+    const tags = [
+      ['d', 'blobbonaut-abc123'],
+      ['level', '3'],
+      ['name', 'TestPlayer'],
+      ['coins', '500'],
+    ];
+
+    const result = upsertLevelTag(tags, 7);
+
+    expect(result).toEqual([
+      ['d', 'blobbonaut-abc123'],
+      ['level', '7'],
+      ['name', 'TestPlayer'],
+      ['coins', '500'],
+    ]);
+  });
+
+  it('level tag always mirrors derived global level', () => {
+    const existing = buildFullContent();
+
+    // Update Blobbi level from 3 to 8
+    const { content, globalLevel } = updateProgressionContent(existing, {
+      games: { blobbi: { level: 8 } },
+    });
+
+    // Global = blobbi(8) + farm(2) = 10
+    expect(globalLevel).toBe(10);
+
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.global.level).toBe(10);
+
+    // upsertLevelTag mirrors this
+    const tags = upsertLevelTag([['d', 'test']], globalLevel);
+    expect(tags).toContainEqual(['level', '10']);
+  });
+});
+
+// ─── Malformed Data Safety ────────────────────────────────────────────────────
+
+describe('malformed progression is safely dropped', () => {
+  it('parseProfileContent drops malformed progression (no games key)', () => {
+    const content = JSON.stringify({
+      dailyMissions: SAMPLE_DAILY_MISSIONS,
+      progression: { global: { level: 5, xp: 0 } }, // Missing 'games'
+    });
+
+    const parsed = parseProfileContent(content);
+    expect(parsed.dailyMissions).toBeDefined();
+    expect(parsed.progression).toBeUndefined(); // Dropped
+  });
+
+  it('parseProfileContent drops non-object progression', () => {
+    const content = JSON.stringify({
+      dailyMissions: SAMPLE_DAILY_MISSIONS,
+      progression: 'not-an-object',
+    });
+
+    const parsed = parseProfileContent(content);
+    expect(parsed.dailyMissions).toBeDefined();
+    expect(parsed.progression).toBeUndefined();
+  });
+
+  it('updateProgressionContent still works after malformed progression', () => {
+    const content = JSON.stringify({
+      dailyMissions: SAMPLE_DAILY_MISSIONS,
+      progression: 42, // Malformed
+    });
+
+    const { content: updated, globalLevel } = updateProgressionContent(content, {
+      games: { blobbi: { level: 1, xp: 0 } },
+    });
+
+    const parsed = JSON.parse(updated);
+    expect(parsed.dailyMissions).toEqual(SAMPLE_DAILY_MISSIONS);
+    expect(parsed.progression.games.blobbi.level).toBe(1);
+    expect(globalLevel).toBe(1);
+  });
+});
+
+describe('malformed dailyMissions is safely dropped', () => {
+  it('parseProfileContent drops malformed dailyMissions (missing date)', () => {
+    const content = JSON.stringify({
+      dailyMissions: { missions: [], bonusClaimed: false }, // Missing 'date'
+      progression: SAMPLE_PROGRESSION_JSON,
+    });
+
+    const parsed = parseProfileContent(content);
+    expect(parsed.dailyMissions).toBeUndefined(); // Dropped
+    expect(parsed.progression).toBeDefined();
+  });
+
+  it('parseProfileContent drops non-object dailyMissions', () => {
+    const content = JSON.stringify({
+      dailyMissions: 'corrupted',
+      progression: SAMPLE_PROGRESSION_JSON,
+    });
+
+    const parsed = parseProfileContent(content);
+    expect(parsed.dailyMissions).toBeUndefined();
+    expect(parsed.progression).toBeDefined();
+  });
+
+  it('updateDailyMissionsContent replaces malformed dailyMissions', () => {
+    const content = JSON.stringify({
+      dailyMissions: null, // Malformed
+      progression: SAMPLE_PROGRESSION_JSON,
+    });
+
+    const updated = updateDailyMissionsContent(content, SAMPLE_DAILY_MISSIONS);
+    const parsed = JSON.parse(updated);
+
+    expect(parsed.dailyMissions).toEqual(SAMPLE_DAILY_MISSIONS);
+    expect(parsed.progression).toEqual(SAMPLE_PROGRESSION_JSON);
+  });
+});
+
+// ─── Invalid JSON Content ─────────────────────────────────────────────────────
+
+describe('invalid JSON content does not crash', () => {
+  it('safeParseContent returns parseOk: false for invalid JSON', () => {
+    const result = safeParseContent('not valid json {{{}}}');
+    expect(result.parseOk).toBe(false);
+    expect(result.data).toEqual({});
+  });
+
+  it('safeParseContent returns parseOk: false for array JSON', () => {
+    const result = safeParseContent('[1, 2, 3]');
+    expect(result.parseOk).toBe(false);
+    expect(result.data).toEqual({});
+  });
+
+  it('safeParseContent returns parseOk: false for string JSON', () => {
+    const result = safeParseContent('"just a string"');
+    expect(result.parseOk).toBe(false);
+    expect(result.data).toEqual({});
+  });
+
+  it('safeParseContent returns parseOk: true for empty string', () => {
+    const result = safeParseContent('');
+    expect(result.parseOk).toBe(true);
+    expect(result.data).toEqual({});
+  });
+
+  it('safeParseContent returns parseOk: true for whitespace-only', () => {
+    const result = safeParseContent('   \n\t  ');
+    expect(result.parseOk).toBe(true);
+    expect(result.data).toEqual({});
+  });
+
+  it('safeParseContent returns parseOk: true for valid JSON object', () => {
+    const result = safeParseContent('{"hello": "world"}');
+    expect(result.parseOk).toBe(true);
+    expect(result.data).toEqual({ hello: 'world' });
+  });
+
+  it('updateProgressionContent works on invalid JSON', () => {
+    const { content, globalLevel } = updateProgressionContent('{{bad}}', {
+      games: { blobbi: { level: 2, xp: 50 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.games.blobbi.level).toBe(2);
+    expect(globalLevel).toBe(2);
+    // No dailyMissions because input was corrupt
+    expect(parsed.dailyMissions).toBeUndefined();
+  });
+
+  it('updateDailyMissionsContent works on invalid JSON', () => {
+    const content = updateDailyMissionsContent('not json!!!', SAMPLE_DAILY_MISSIONS);
+
+    const parsed = JSON.parse(content);
+    expect(parsed.dailyMissions).toEqual(SAMPLE_DAILY_MISSIONS);
+    // No progression because input was corrupt
+    expect(parsed.progression).toBeUndefined();
+  });
+
+  it('parseProfileContent returns empty object for invalid JSON', () => {
+    const parsed = parseProfileContent('corrupted {{{');
+    expect(parsed).toEqual({});
+    expect(parsed.dailyMissions).toBeUndefined();
+    expect(parsed.progression).toBeUndefined();
+  });
+});
+
+// ─── Global Level Derivation ──────────────────────────────────────────────────
+
+describe('global.level is always derived from games.*', () => {
+  it('global.level equals sum of game levels after update', () => {
+    const existing = buildFullContent();
+
+    const { content, globalLevel } = updateProgressionContent(existing, {
+      games: { blobbi: { level: 10 } },
+    });
+
+    // blobbi(10) + farm(2) = 12
+    expect(globalLevel).toBe(12);
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.global.level).toBe(12);
+  });
+
+  it('global.level is re-derived even if caller passes a value', () => {
+    const existing = buildFullContent();
+
+    const { content, globalLevel } = updateProgressionContent(existing, {
+      global: { level: 999 }, // Should be ignored
+      games: { blobbi: { level: 1 } },
+    });
+
+    // blobbi(1) + farm(2) = 3
+    expect(globalLevel).toBe(3);
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.global.level).toBe(3);
+  });
+
+  it('global.level reflects new game added', () => {
+    const existing = buildFullContent();
+
+    const { globalLevel } = updateProgressionContent(existing, {
+      games: { racing: { level: 5, xp: 0 } },
+    });
+
+    // blobbi(3) + farm(2) + racing(5) = 10
+    expect(globalLevel).toBe(10);
+  });
+
+  it('parseProfileContent re-derives global.level from stored data', () => {
+    // Stored content has wrong global level
+    const content = JSON.stringify({
+      progression: {
+        global: { level: 999, xp: 0 }, // Wrong!
+        games: {
+          blobbi: { level: 2, xp: 0, unlocks: { maxBlobbis: 1, realInventoryEnabled: false } },
+        },
+      },
+    });
+
+    const parsed = parseProfileContent(content);
+    // Re-derived: only blobbi at level 2
+    expect(parsed.progression!.global.level).toBe(2);
+  });
+});
+
+// ─── Scalability for Future Sections ──────────────────────────────────────────
+
+describe('scalability for future sections', () => {
+  it('updateContentSection can add arbitrary new sections', () => {
+    const existing = buildFullContent();
+
+    let content = updateContentSection(existing, 'inventory', { slots: 10, items: [] });
+    content = updateContentSection(content, 'achievements', ['first_hatch']);
+    content = updateContentSection(content, 'settings', { theme: 'light' });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.inventory).toEqual({ slots: 10, items: [] });
+    expect(parsed.achievements).toEqual(['first_hatch']);
+    expect(parsed.settings).toEqual({ theme: 'light' });
+    // Original sections preserved
+    expect(parsed.dailyMissions).toEqual(SAMPLE_DAILY_MISSIONS);
+    expect(parsed.progression).toEqual(SAMPLE_PROGRESSION_JSON);
+  });
+
+  it('section-specific helpers preserve arbitrary new sections', () => {
+    // Start with custom sections
+    const existing = JSON.stringify({
+      dailyMissions: SAMPLE_DAILY_MISSIONS,
+      progression: SAMPLE_PROGRESSION_JSON,
+      inventory: { slots: 10, items: ['potion'] },
+      achievements: ['first_hatch', 'level_5'],
+      leaderboard: { rank: 42 },
+    });
+
+    // Update progression
+    const { content: afterProg } = updateProgressionContent(existing, {
+      games: { blobbi: { xp: 999 } },
+    });
+
+    // Update daily missions
+    const afterMissions = updateDailyMissionsContent(afterProg, {
+      ...SAMPLE_DAILY_MISSIONS,
+      totalXpEarned: 9999,
+    });
+
+    const parsed = JSON.parse(afterMissions);
+    expect(parsed.inventory).toEqual({ slots: 10, items: ['potion'] });
+    expect(parsed.achievements).toEqual(['first_hatch', 'level_5']);
+    expect(parsed.leaderboard).toEqual({ rank: 42 });
+    expect(parsed.progression.games.blobbi.xp).toBe(999);
+    expect(parsed.dailyMissions.totalXpEarned).toBe(9999);
+  });
+});
+
+// ─── Empty / Legacy Content ───────────────────────────────────────────────────
+
+describe('empty and legacy content handling', () => {
+  it('works on empty string content (legacy profiles)', () => {
+    const { content, globalLevel } = updateProgressionContent('', {
+      games: { blobbi: { level: 1, xp: 0 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.games.blobbi.level).toBe(1);
+    expect(globalLevel).toBe(1);
+    expect(parsed.dailyMissions).toBeUndefined();
+  });
+
+  it('updateDailyMissionsContent works on empty string', () => {
+    const content = updateDailyMissionsContent('', SAMPLE_DAILY_MISSIONS);
+
+    const parsed = JSON.parse(content);
+    expect(parsed.dailyMissions).toEqual(SAMPLE_DAILY_MISSIONS);
+    expect(parsed.progression).toBeUndefined();
+  });
+
+  it('parseProfileContent works on empty string', () => {
+    const parsed = parseProfileContent('');
+    expect(parsed).toEqual({});
+  });
+
+  it('sequential operations from empty build up correctly', () => {
+    // Start from empty (legacy profile)
+    let content = '';
+
+    // Add progression
+    const { content: c1 } = updateProgressionContent(content, {
+      games: { blobbi: { level: 1, xp: 0 } },
+    });
+    content = c1;
+
+    // Add daily missions
+    content = updateDailyMissionsContent(content, SAMPLE_DAILY_MISSIONS);
+
+    // Add generic section
+    content = updateContentSection(content, 'settings', { theme: 'dark' });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.games.blobbi.level).toBe(1);
+    expect(parsed.dailyMissions).toEqual(SAMPLE_DAILY_MISSIONS);
+    expect(parsed.settings).toEqual({ theme: 'dark' });
+  });
+});

src/blobbi/core/lib/content-json.test.ts

@@ -0,0 +1,121 @@
+// src/blobbi/core/lib/content-json.test.ts
+
+/**
+ * Tests for the low-level content JSON utilities.
+ */
+
+import { describe, it, expect } from 'vitest';
+
+import { safeParseContent, updateContentSection } from './content-json';
+
+// ─── safeParseContent ─────────────────────────────────────────────────────────
+
+describe('safeParseContent', () => {
+  it('returns parseOk: true with empty data for empty string', () => {
+    const result = safeParseContent('');
+    expect(result).toEqual({ parseOk: true, data: {} });
+  });
+
+  it('returns parseOk: true with empty data for whitespace', () => {
+    const result = safeParseContent('   \n\t  ');
+    expect(result).toEqual({ parseOk: true, data: {} });
+  });
+
+  it('returns parseOk: true for valid JSON object', () => {
+    const result = safeParseContent('{"key": "value", "num": 42}');
+    expect(result.parseOk).toBe(true);
+    expect(result.data).toEqual({ key: 'value', num: 42 });
+  });
+
+  it('preserves all keys including nested objects', () => {
+    const input = JSON.stringify({
+      a: 1,
+      b: { nested: true },
+      c: [1, 2, 3],
+      d: null,
+    });
+    const result = safeParseContent(input);
+    expect(result.parseOk).toBe(true);
+    expect(result.data).toEqual({ a: 1, b: { nested: true }, c: [1, 2, 3], d: null });
+  });
+
+  it('returns parseOk: false for invalid JSON', () => {
+    const result = safeParseContent('not json');
+    expect(result.parseOk).toBe(false);
+    expect(result.data).toEqual({});
+  });
+
+  it('returns parseOk: false for JSON array', () => {
+    const result = safeParseContent('[1, 2, 3]');
+    expect(result.parseOk).toBe(false);
+    expect(result.data).toEqual({});
+  });
+
+  it('returns parseOk: false for JSON string', () => {
+    const result = safeParseContent('"hello"');
+    expect(result.parseOk).toBe(false);
+    expect(result.data).toEqual({});
+  });
+
+  it('returns parseOk: false for JSON number', () => {
+    const result = safeParseContent('42');
+    expect(result.parseOk).toBe(false);
+    expect(result.data).toEqual({});
+  });
+
+  it('returns parseOk: false for JSON boolean', () => {
+    const result = safeParseContent('true');
+    expect(result.parseOk).toBe(false);
+    expect(result.data).toEqual({});
+  });
+
+  it('returns parseOk: false for JSON null', () => {
+    const result = safeParseContent('null');
+    expect(result.parseOk).toBe(false);
+    expect(result.data).toEqual({});
+  });
+});
+
+// ─── updateContentSection ─────────────────────────────────────────────────────
+
+describe('updateContentSection', () => {
+  it('adds a new section to empty content', () => {
+    const result = updateContentSection('', 'newSection', { value: 42 });
+    expect(JSON.parse(result)).toEqual({ newSection: { value: 42 } });
+  });
+
+  it('adds a new section alongside existing ones', () => {
+    const existing = JSON.stringify({ existing: 'data' });
+    const result = updateContentSection(existing, 'newSection', 'hello');
+    expect(JSON.parse(result)).toEqual({ existing: 'data', newSection: 'hello' });
+  });
+
+  it('overwrites an existing section', () => {
+    const existing = JSON.stringify({ section: 'old', other: 'keep' });
+    const result = updateContentSection(existing, 'section', 'new');
+    expect(JSON.parse(result)).toEqual({ section: 'new', other: 'keep' });
+  });
+
+  it('preserves all sibling keys', () => {
+    const existing = JSON.stringify({ a: 1, b: 2, c: 3, d: 4 });
+    const result = updateContentSection(existing, 'b', 'updated');
+    expect(JSON.parse(result)).toEqual({ a: 1, b: 'updated', c: 3, d: 4 });
+  });
+
+  it('handles invalid JSON input gracefully', () => {
+    const result = updateContentSection('bad json', 'section', 'value');
+    expect(JSON.parse(result)).toEqual({ section: 'value' });
+  });
+
+  it('can set a section to null', () => {
+    const existing = JSON.stringify({ section: 'data' });
+    const result = updateContentSection(existing, 'section', null);
+    expect(JSON.parse(result)).toEqual({ section: null });
+  });
+
+  it('can set a section to an array', () => {
+    const existing = JSON.stringify({ other: 'data' });
+    const result = updateContentSection(existing, 'items', [1, 2, 3]);
+    expect(JSON.parse(result)).toEqual({ other: 'data', items: [1, 2, 3] });
+  });
+});

src/blobbi/core/lib/content-json.ts

@@ -0,0 +1,132 @@
+// src/blobbi/core/lib/content-json.ts
+
+/**
+ * Low-level JSON parsing utilities for Kind 11125 content.
+ *
+ * This module provides the shared parsing foundation that both
+ * `blobbonaut-content.ts` and `progression.ts` build on.
+ *
+ * It is intentionally dependency-free (no imports from other blobbi modules)
+ * to prevent circular imports. Higher-level modules import from here;
+ * this module never imports from them.
+ */
+
+// ─── Content Parsing Result ───────────────────────────────────────────────────
+
+/**
+ * Result of parsing kind 11125 content JSON.
+ *
+ * Includes a `parseOk` flag so callers can distinguish between:
+ *   - Empty/blank content (parseOk: true, data is {})
+ *   - Valid JSON (parseOk: true, data is the parsed object)
+ *   - Invalid JSON / non-object (parseOk: false, data is {})
+ *
+ * When `parseOk` is false, the content was corrupt. The data field is empty
+ * so callers can still merge their update, but they should be aware that
+ * any data from the corrupt content is unrecoverable.
+ */
+export interface ParsedContentResult {
+  /** Whether the content was successfully parsed (or was empty/blank). */
+  parseOk: boolean;
+  /** The parsed data. Empty object when content is blank or unparseable. */
+  data: Record<string, unknown>;
+}
+
+// ─── Safe Content Parsing ─────────────────────────────────────────────────────
+
+/**
+ * Safely parse kind 11125 content JSON into a plain object.
+ *
+ * Returns `{ parseOk, data }`:
+ *   - Empty/blank content → `{ parseOk: true, data: {} }`
+ *   - Valid JSON object   → `{ parseOk: true, data: <parsed> }`
+ *   - Invalid JSON        → `{ parseOk: false, data: {} }` + DEV warning
+ *   - Non-object JSON     → `{ parseOk: false, data: {} }` + DEV warning
+ *
+ * All keys — known and unknown — are preserved in the returned data.
+ *
+ * This function never throws. It is the single entry point for all content
+ * parsing in the kind 11125 system. Both `parseProfileContent` (typed
+ * validation) and the section-update helpers use this under the hood.
+ *
+ * ── Invalid JSON behavior ─────────────────────────────────────────────────
+ *
+ * When content is invalid JSON:
+ *   - In development: a warning is logged with the first 200 chars of the
+ *     content and the parse error, so developers notice the issue.
+ *   - In production: fails silently (no console noise for end users).
+ *   - In both environments: returns `{ parseOk: false, data: {} }`.
+ *
+ * The caller can check `parseOk` to decide whether to proceed. All current
+ * callers proceed regardless (merge their update into a fresh object) because
+ * blocking all writes on corrupt content would leave the user stuck with no
+ * recovery path. The corrupt data is lost, but the system stays functional.
+ */
+export function safeParseContent(content: string): ParsedContentResult {
+  if (!content || content.trim() === '') {
+    return { parseOk: true, data: {} };
+  }
+
+  try {
+    const raw = JSON.parse(content);
+    if (typeof raw !== 'object' || raw === null || Array.isArray(raw)) {
+      if (import.meta.env.DEV) {
+        console.warn(
+          '[content-json] Content JSON parsed but is not a plain object. ' +
+          'Falling back to empty object. Type:',
+          Array.isArray(raw) ? 'array' : typeof raw,
+        );
+      }
+      return { parseOk: false, data: {} };
+    }
+    return { parseOk: true, data: raw as Record<string, unknown> };
+  } catch (e) {
+    if (import.meta.env.DEV) {
+      console.warn(
+        '[content-json] Failed to parse content JSON. Falling back to empty object.',
+        'Content (first 200 chars):',
+        content.slice(0, 200),
+        'Error:',
+        e instanceof Error ? e.message : String(e),
+      );
+    }
+    return { parseOk: false, data: {} };
+  }
+}
+
+// ─── Generic Section Update ───────────────────────────────────────────────────
+
+/**
+ * Update a single top-level section in the kind 11125 content JSON.
+ *
+ * This is the low-level building block for all section-specific helpers.
+ * It guarantees:
+ *   1. The existing content is safely parsed (invalid JSON → {} + warning)
+ *   2. Only the specified `key` is written/overwritten
+ *   3. All sibling sections and unknown keys are preserved
+ *   4. The result is serialized to a valid JSON string
+ *
+ * Prefer the typed helpers (`updateDailyMissionsContent`,
+ * `updateProgressionContent`) over calling this directly. Use this only
+ * for truly generic/dynamic section updates, or when building a new
+ * section-specific helper.
+ *
+ * @param existingContent - The current `event.content` string (may be empty)
+ * @param key             - The top-level key to update (e.g. 'dailyMissions')
+ * @param value           - The new value for that key
+ * @returns The serialized content string with the section updated
+ */
+export function updateContentSection(
+  existingContent: string,
+  key: string,
+  value: unknown,
+): string {
+  const { data } = safeParseContent(existingContent);
+
+  const updated = {
+    ...data,
+    [key]: value,
+  };
+
+  return JSON.stringify(updated);
+}

src/blobbi/core/lib/progression.test.ts

@@ -0,0 +1,384 @@
+import { describe, it, expect } from 'vitest';
+
+import {
+  deriveGlobalLevel,
+  parseProgression,
+  mergeProgression,
+  upsertLevelTag,
+  updateProgressionContent,
+  createDefaultProgression,
+  DEFAULT_BLOBBI_GAME_PROGRESSION,
+  DEFAULT_BLOBBI_UNLOCKS,
+  type Progression,
+  type GameProgressionMap,
+} from './progression';
+
+// ─── deriveGlobalLevel ────────────────────────────────────────────────────────
+
+describe('deriveGlobalLevel', () => {
+  it('returns 0 for an empty games map', () => {
+    expect(deriveGlobalLevel({})).toBe(0);
+  });
+
+  it('returns the level of a single game', () => {
+    const games: GameProgressionMap = {
+      blobbi: { level: 5, xp: 100, unlocks: { ...DEFAULT_BLOBBI_UNLOCKS } },
+    };
+    expect(deriveGlobalLevel(games)).toBe(5);
+  });
+
+  it('sums levels from multiple games', () => {
+    const games: GameProgressionMap = {
+      blobbi: { level: 3, xp: 50, unlocks: { ...DEFAULT_BLOBBI_UNLOCKS } },
+      farm: { level: 7, xp: 200 },
+      racing: { level: 2, xp: 10 },
+    };
+    expect(deriveGlobalLevel(games)).toBe(12);
+  });
+
+  it('skips undefined or zero-level entries', () => {
+    const games: GameProgressionMap = {
+      blobbi: { level: 4, xp: 0, unlocks: { ...DEFAULT_BLOBBI_UNLOCKS } },
+      farm: undefined,
+      racing: { level: 0, xp: 0 },
+    };
+    expect(deriveGlobalLevel(games)).toBe(4);
+  });
+});
+
+// ─── parseProgression ─────────────────────────────────────────────────────────
+
+describe('parseProgression', () => {
+  it('returns undefined for non-objects', () => {
+    expect(parseProgression(null)).toBeUndefined();
+    expect(parseProgression(42)).toBeUndefined();
+    expect(parseProgression('string')).toBeUndefined();
+    expect(parseProgression([])).toBeUndefined();
+  });
+
+  it('returns undefined when games is missing', () => {
+    expect(parseProgression({ global: { level: 1, xp: 0 } })).toBeUndefined();
+  });
+
+  it('returns undefined when games is not an object', () => {
+    expect(parseProgression({ global: { level: 1, xp: 0 }, games: 'bad' })).toBeUndefined();
+  });
+
+  it('parses a valid Blobbi progression', () => {
+    const raw = {
+      global: { level: 99, xp: 500 }, // level should be re-derived, not trusted
+      games: {
+        blobbi: {
+          level: 3,
+          xp: 150,
+          unlocks: { maxBlobbis: 2, realInventoryEnabled: true },
+        },
+      },
+    };
+
+    const result = parseProgression(raw);
+    expect(result).toBeDefined();
+    expect(result!.global.level).toBe(3); // re-derived, not 99
+    expect(result!.global.xp).toBe(500); // preserved as-is
+    expect(result!.games.blobbi).toEqual({
+      level: 3,
+      xp: 150,
+      unlocks: { maxBlobbis: 2, realInventoryEnabled: true },
+    });
+  });
+
+  it('defaults Blobbi unlocks for malformed unlock data', () => {
+    const raw = {
+      global: { level: 1, xp: 0 },
+      games: {
+        blobbi: { level: 1, xp: 0, unlocks: 'not-an-object' },
+      },
+    };
+
+    const result = parseProgression(raw);
+    expect(result!.games.blobbi!.unlocks).toEqual(DEFAULT_BLOBBI_UNLOCKS);
+  });
+
+  it('preserves unknown game entries', () => {
+    const raw = {
+      global: { level: 0, xp: 0 },
+      games: {
+        blobbi: { level: 2, xp: 50, unlocks: { maxBlobbis: 1, realInventoryEnabled: false } },
+        racing: { level: 5, xp: 300, unlocks: { turboEnabled: true } },
+      },
+    };
+
+    const result = parseProgression(raw);
+    expect(result!.games.racing).toEqual({
+      level: 5,
+      xp: 300,
+      unlocks: { turboEnabled: true },
+    });
+    expect(result!.global.level).toBe(7); // 2 + 5
+  });
+
+  it('skips malformed game entries', () => {
+    const raw = {
+      global: { level: 0, xp: 0 },
+      games: {
+        blobbi: { level: 1, xp: 0, unlocks: { maxBlobbis: 1, realInventoryEnabled: false } },
+        bad: 'not-an-object',
+        alsobad: null,
+      },
+    };
+
+    const result = parseProgression(raw);
+    expect(Object.keys(result!.games)).toEqual(['blobbi']);
+  });
+
+  it('defaults missing numeric fields to 0', () => {
+    const raw = {
+      global: {},
+      games: {
+        blobbi: { unlocks: {} },
+      },
+    };
+
+    const result = parseProgression(raw);
+    expect(result!.games.blobbi!.level).toBe(0);
+    expect(result!.games.blobbi!.xp).toBe(0);
+    expect(result!.global.xp).toBe(0);
+  });
+});
+
+// ─── mergeProgression ─────────────────────────────────────────────────────────
+
+describe('mergeProgression', () => {
+  const baseProgression: Progression = {
+    global: { level: 3, xp: 100 },
+    games: {
+      blobbi: { level: 3, xp: 100, unlocks: { maxBlobbis: 1, realInventoryEnabled: false } },
+    },
+  };
+
+  it('initializes from undefined with Blobbi defaults when updating blobbi', () => {
+    const result = mergeProgression(undefined, {
+      games: { blobbi: { xp: 50 } },
+    });
+
+    expect(result.games.blobbi).toEqual({
+      level: 1, // default
+      xp: 50,   // from update
+      unlocks: DEFAULT_BLOBBI_UNLOCKS,
+    });
+    expect(result.global.level).toBe(1);
+  });
+
+  it('updates only the specified game field', () => {
+    const result = mergeProgression(baseProgression, {
+      games: { blobbi: { xp: 200 } },
+    });
+
+    expect(result.games.blobbi!.level).toBe(3); // preserved
+    expect(result.games.blobbi!.xp).toBe(200);  // updated
+    expect(result.games.blobbi!.unlocks).toEqual({ maxBlobbis: 1, realInventoryEnabled: false }); // preserved
+  });
+
+  it('merges unlocks without dropping existing fields', () => {
+    const result = mergeProgression(baseProgression, {
+      games: { blobbi: { unlocks: { maxBlobbis: 3 } } },
+    });
+
+    expect(result.games.blobbi!.unlocks).toEqual({
+      maxBlobbis: 3,             // updated
+      realInventoryEnabled: false, // preserved
+    });
+  });
+
+  it('preserves other games when updating one game', () => {
+    const withMultiple: Progression = {
+      global: { level: 8, xp: 0 },
+      games: {
+        blobbi: { level: 3, xp: 100, unlocks: { maxBlobbis: 1, realInventoryEnabled: false } },
+        farm: { level: 5, xp: 300 },
+      },
+    };
+
+    const result = mergeProgression(withMultiple, {
+      games: { blobbi: { level: 4 } },
+    });
+
+    expect(result.games.farm).toEqual({ level: 5, xp: 300 }); // untouched
+    expect(result.games.blobbi!.level).toBe(4);
+    expect(result.global.level).toBe(9); // 4 + 5
+  });
+
+  it('always re-derives global level, ignoring caller-provided value', () => {
+    const result = mergeProgression(baseProgression, {
+      global: { level: 999 }, // should be ignored
+      games: { blobbi: { level: 7 } },
+    });
+
+    expect(result.global.level).toBe(7); // derived, not 999
+  });
+
+  it('preserves global.xp from existing when not in update', () => {
+    const result = mergeProgression(baseProgression, {
+      games: { blobbi: { level: 4 } },
+    });
+
+    expect(result.global.xp).toBe(100); // from base
+  });
+
+  it('updates global.xp when provided', () => {
+    const result = mergeProgression(baseProgression, {
+      global: { xp: 500 },
+    });
+
+    expect(result.global.xp).toBe(500);
+  });
+});
+
+// ─── upsertLevelTag ───────────────────────────────────────────────────────────
+
+describe('upsertLevelTag', () => {
+  it('appends level tag when none exists', () => {
+    const tags = [['d', 'abc'], ['name', 'test']];
+    const result = upsertLevelTag(tags, 5);
+
+    expect(result).toEqual([['d', 'abc'], ['name', 'test'], ['level', '5']]);
+  });
+
+  it('updates existing level tag in place', () => {
+    const tags = [['d', 'abc'], ['level', '3'], ['name', 'test']];
+    const result = upsertLevelTag(tags, 7);
+
+    expect(result).toEqual([['d', 'abc'], ['level', '7'], ['name', 'test']]);
+  });
+
+  it('does not mutate the original array', () => {
+    const tags = [['d', 'abc'], ['level', '3']];
+    const original = JSON.parse(JSON.stringify(tags));
+    upsertLevelTag(tags, 10);
+
+    expect(tags).toEqual(original);
+  });
+
+  it('handles level 0', () => {
+    const tags = [['d', 'abc']];
+    const result = upsertLevelTag(tags, 0);
+
+    expect(result).toEqual([['d', 'abc'], ['level', '0']]);
+  });
+});
+
+// ─── updateProgressionContent ─────────────────────────────────────────────────
+
+describe('updateProgressionContent', () => {
+  it('initializes progression in empty content', () => {
+    const { content, globalLevel } = updateProgressionContent('', {
+      games: { blobbi: { level: 1, xp: 0 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.progression).toBeDefined();
+    expect(parsed.progression.games.blobbi.level).toBe(1);
+    expect(globalLevel).toBe(1);
+  });
+
+  it('preserves existing dailyMissions when updating progression', () => {
+    const existing = JSON.stringify({
+      dailyMissions: { date: '2026-04-06', missions: [], bonusClaimed: false, rerollsRemaining: 3, totalXpEarned: 50, lastUpdatedAt: 1000 },
+    });
+
+    const { content } = updateProgressionContent(existing, {
+      games: { blobbi: { level: 2 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.dailyMissions).toBeDefined();
+    expect(parsed.dailyMissions.date).toBe('2026-04-06');
+    expect(parsed.dailyMissions.totalXpEarned).toBe(50);
+    expect(parsed.progression.games.blobbi.level).toBe(2);
+  });
+
+  it('preserves unknown top-level keys', () => {
+    const existing = JSON.stringify({
+      dailyMissions: { date: '2026-04-06', missions: [], bonusClaimed: false, rerollsRemaining: 3, totalXpEarned: 0, lastUpdatedAt: 0 },
+      futureFeature: { some: 'data' },
+    });
+
+    const { content } = updateProgressionContent(existing, {
+      games: { blobbi: { xp: 100 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.futureFeature).toEqual({ some: 'data' });
+  });
+
+  it('handles corrupt content gracefully', () => {
+    const { content, globalLevel } = updateProgressionContent('not valid json!!!', {
+      games: { blobbi: { level: 1, xp: 0 } },
+    });
+
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.games.blobbi.level).toBe(1);
+    expect(globalLevel).toBe(1);
+    // dailyMissions should NOT be present (corrupt content had none)
+    expect(parsed.dailyMissions).toBeUndefined();
+  });
+
+  it('re-derives global level correctly in content', () => {
+    const existing = JSON.stringify({
+      progression: {
+        global: { level: 5, xp: 0 },
+        games: {
+          blobbi: { level: 3, xp: 100, unlocks: { maxBlobbis: 1, realInventoryEnabled: false } },
+          farm: { level: 2, xp: 50 },
+        },
+      },
+    });
+
+    const { content, globalLevel } = updateProgressionContent(existing, {
+      games: { blobbi: { level: 4 } },
+    });
+
+    expect(globalLevel).toBe(6); // 4 + 2
+    const parsed = JSON.parse(content);
+    expect(parsed.progression.global.level).toBe(6);
+    expect(parsed.progression.games.farm.level).toBe(2); // untouched
+  });
+});
+
+// ─── createDefaultProgression ─────────────────────────────────────────────────
+
+describe('createDefaultProgression', () => {
+  it('returns a valid default progression', () => {
+    const def = createDefaultProgression();
+
+    expect(def.global.level).toBe(1);
+    expect(def.global.xp).toBe(0);
+    expect(def.games.blobbi).toBeDefined();
+    expect(def.games.blobbi!.level).toBe(1);
+    expect(def.games.blobbi!.xp).toBe(0);
+    expect(def.games.blobbi!.unlocks).toEqual(DEFAULT_BLOBBI_UNLOCKS);
+  });
+
+  it('returns independent copies (no shared references)', () => {
+    const a = createDefaultProgression();
+    const b = createDefaultProgression();
+
+    a.games.blobbi!.level = 99;
+    expect(b.games.blobbi!.level).toBe(1);
+
+    a.games.blobbi!.unlocks.maxBlobbis = 99;
+    expect(b.games.blobbi!.unlocks.maxBlobbis).toBe(1);
+  });
+});
+
+// ─── DEFAULT_BLOBBI_GAME_PROGRESSION ──────────────────────────────────────────
+
+describe('DEFAULT_BLOBBI_GAME_PROGRESSION', () => {
+  it('has the expected shape', () => {
+    expect(DEFAULT_BLOBBI_GAME_PROGRESSION).toEqual({
+      level: 1,
+      xp: 0,
+      unlocks: { maxBlobbis: 1, realInventoryEnabled: false },
+    });
+  });
+});

src/blobbi/core/lib/progression.ts

@@ -0,0 +1,533 @@
+// src/blobbi/core/lib/progression.ts
+
+/**
+ * Blobbonaut Progression System — Types, defaults, derivation, and merge helpers.
+ *
+ * This module defines the progression structure that lives inside the kind 11125
+ * event content JSON alongside `dailyMissions` and any future top-level keys.
+ *
+ * ── Design Rationale ──────────────────────────────────────────────────────────
+ *
+ * Why `progression.games` is the source of truth:
+ *   Each game (blobbi, farm, racing, …) independently tracks its own level and
+ *   XP. This makes it straightforward to add new games without affecting
+ *   existing ones. The per-game data is authoritative; the global summary is
+ *   always derived from it.
+ *
+ * Why `progression.global.level` is derived, not primary:
+ *   A single authoritative global level would need to be kept in sync with every
+ *   game mutation — an error-prone process that silently corrupts data if any
+ *   write path forgets to update both. Instead, we derive the global level as
+ *   the sum of all game levels immediately before serialization, making it
+ *   impossible to drift out of sync.
+ *
+ * Why `progression.global.xp` exists but has no gameplay rules yet:
+ *   We reserve the field in the schema so future phases can introduce global XP
+ *   accumulation without a schema migration. For now it is always written as-is
+ *   and never used for derivation or gating.
+ *
+ * Why the merge logic must be conservative:
+ *   Multiple write paths update kind 11125 content (daily missions, shop
+ *   purchases via tags, profile normalization, etc.). Each write path must:
+ *   1. Parse existing content (never assume shape)
+ *   2. Touch only its own section
+ *   3. Preserve every unknown key at every level
+ *   A shallow spread at the top level is not enough — the `progression` object
+ *   itself contains nested structures (`games`, each game's `unlocks`) that must
+ *   be merged recursively without dropping siblings.
+ *
+ * ── Standard Write Path ───────────────────────────────────────────────────────
+ *
+ * Every kind 11125 content write that touches `progression` should flow
+ * through `updateProgressionContent()`. This guarantees:
+ *   - Unknown top-level keys (dailyMissions, future sections) are never dropped
+ *   - `global.level` is always consistent with game data
+ *   - The `["level", "<n>"]` tag can be updated from the returned `globalLevel`
+ *   - Only the `progression` section is modified; everything else is preserved
+ *
+ * The `["level", "<n>"]` tag is a queryable mirror only — it exists so relays
+ * can filter profiles by level without parsing content JSON. It must never be
+ * treated as a source of truth.
+ */
+
+import { safeParseContent } from './content-json';
+
+// ─── Game Identifiers ─────────────────────────────────────────────────────────
+
+/**
+ * Known game identifiers within the progression system.
+ * New games are added here as string literals for type safety.
+ * The structure also accepts unknown game keys for forward compatibility.
+ */
+export type KnownGameId = 'blobbi';
+
+// ─── Unlock Shapes ────────────────────────────────────────────────────────────
+
+/**
+ * Unlock flags for the Blobbi game specifically.
+ * Each flag controls a capability that becomes available at certain levels.
+ */
+export interface BlobbiUnlocks {
+  /** Maximum number of Blobbis the player may own simultaneously. */
+  maxBlobbis: number;
+  /** Whether the real (non-preview) inventory system is enabled. */
+  realInventoryEnabled: boolean;
+}
+
+/**
+ * Default unlocks for a brand-new Blobbi game progression.
+ * Level 1 players start with 1 Blobbi slot and no real inventory.
+ */
+export const DEFAULT_BLOBBI_UNLOCKS: Readonly<BlobbiUnlocks> = {
+  maxBlobbis: 1,
+  realInventoryEnabled: false,
+} as const;
+
+// ─── Per-Game Progression ─────────────────────────────────────────────────────
+
+/**
+ * Base shape shared by every game's progression entry.
+ * Individual games extend this with their own `unlocks` type.
+ */
+export interface BaseGameProgression {
+  /** The game's current level (starts at 1 for initialized games). */
+  level: number;
+  /** The game's current XP towards the next level. */
+  xp: number;
+}
+
+/**
+ * Blobbi game progression entry.
+ */
+export interface BlobbiGameProgression extends BaseGameProgression {
+  unlocks: BlobbiUnlocks;
+}
+
+/**
+ * The `progression.games` map.
+ *
+ * Known games get explicit types for editor support and validation.
+ * Unknown game keys are accepted as `BaseGameProgression & { unlocks?: unknown }`
+ * for forward compatibility — a newer client version may write game entries we
+ * don't recognize yet.
+ */
+export interface GameProgressionMap {
+  blobbi?: BlobbiGameProgression;
+  /** Forward-compatible catch-all for future games. */
+  [gameId: string]: (BaseGameProgression & { unlocks?: unknown }) | undefined;
+}
+
+// ─── Global Progression ───────────────────────────────────────────────────────
+
+/**
+ * The derived global summary.
+ *
+ * `level` is always the sum of all `games.*.level`. It is recalculated
+ * before every write and should never be manually set by callers.
+ *
+ * `xp` is reserved for future use. It is preserved as-is during
+ * read-modify-write but no gameplay rules depend on it yet.
+ */
+export interface GlobalProgression {
+  level: number;
+  xp: number;
+}
+
+// ─── Top-Level Progression ────────────────────────────────────────────────────
+
+/**
+ * The full `progression` section of the kind 11125 content JSON.
+ */
+export interface Progression {
+  global: GlobalProgression;
+  games: GameProgressionMap;
+}
+
+// ─── Defaults ─────────────────────────────────────────────────────────────────
+
+/**
+ * Default progression for a brand-new Blobbi game entry.
+ * This is the starting state when a player first enters the Blobbi game.
+ */
+export const DEFAULT_BLOBBI_GAME_PROGRESSION: Readonly<BlobbiGameProgression> = {
+  level: 1,
+  xp: 0,
+  unlocks: { ...DEFAULT_BLOBBI_UNLOCKS },
+} as const;
+
+/**
+ * Build a fresh progression structure with only the Blobbi game initialized.
+ * The global level is derived (sum of game levels = 1).
+ */
+export function createDefaultProgression(): Progression {
+  return {
+    global: { level: 1, xp: 0 },
+    games: {
+      blobbi: { ...DEFAULT_BLOBBI_GAME_PROGRESSION, unlocks: { ...DEFAULT_BLOBBI_UNLOCKS } },
+    },
+  };
+}
+
+// ─── Derivation ───────────────────────────────────────────────────────────────
+
+/**
+ * Derive the global level from the sum of all per-game levels.
+ *
+ * This is the **only** correct way to determine the global level.
+ * Never read `progression.global.level` as authoritative — always re-derive
+ * before comparing or persisting.
+ *
+ * Games that are `undefined` or missing a numeric `level` are skipped.
+ */
+export function deriveGlobalLevel(games: GameProgressionMap): number {
+  let total = 0;
+  for (const gameId of Object.keys(games)) {
+    const game = games[gameId];
+    if (game && typeof game.level === 'number' && game.level > 0) {
+      total += game.level;
+    }
+  }
+  return total;
+}
+
+// ─── Parsing ──────────────────────────────────────────────────────────────────
+
+/**
+ * Validate and normalize a raw `progression` value from parsed JSON.
+ *
+ * - Returns `undefined` if the value is not a usable object (caller decides
+ *   whether to initialize defaults or leave absent).
+ * - Preserves unknown game keys and unknown fields within game entries.
+ * - Validates the Blobbi game entry with type-specific checks.
+ * - Re-derives `global.level` from game data to ensure consistency.
+ *
+ * This function never throws. Malformed sub-trees are silently dropped or
+ * defaulted so that a corrupt `progression` field cannot crash the app.
+ */
+export function parseProgression(raw: unknown): Progression | undefined {
+  if (typeof raw !== 'object' || raw === null || Array.isArray(raw)) {
+    return undefined;
+  }
+
+  const obj = raw as Record<string, unknown>;
+
+  // ── Parse games ──
+
+  const rawGames = obj.games;
+  if (typeof rawGames !== 'object' || rawGames === null || Array.isArray(rawGames)) {
+    // No usable games map — cannot construct a valid progression.
+    return undefined;
+  }
+
+  const gamesObj = rawGames as Record<string, unknown>;
+  const games: GameProgressionMap = {};
+
+  for (const gameId of Object.keys(gamesObj)) {
+    const rawGame = gamesObj[gameId];
+    if (typeof rawGame !== 'object' || rawGame === null || Array.isArray(rawGame)) {
+      continue; // Skip malformed game entries
+    }
+
+    const gameEntry = rawGame as Record<string, unknown>;
+    const level = typeof gameEntry.level === 'number' ? gameEntry.level : 0;
+    const xp = typeof gameEntry.xp === 'number' ? gameEntry.xp : 0;
+
+    if (gameId === 'blobbi') {
+      // Type-specific parsing for Blobbi
+      games.blobbi = {
+        level,
+        xp,
+        unlocks: parseBlobbiUnlocks(gameEntry.unlocks),
+      };
+    } else {
+      // Forward-compatible: preserve unknown games with their base fields + unlocks
+      const entry: BaseGameProgression & { unlocks?: unknown } = { level, xp };
+      if (gameEntry.unlocks !== undefined) {
+        entry.unlocks = gameEntry.unlocks;
+      }
+      games[gameId] = entry;
+    }
+  }
+
+  // ── Parse global (re-derive level for consistency) ──
+
+  const rawGlobal = obj.global;
+  const globalXp =
+    typeof rawGlobal === 'object' && rawGlobal !== null && !Array.isArray(rawGlobal)
+      ? typeof (rawGlobal as Record<string, unknown>).xp === 'number'
+        ? (rawGlobal as Record<string, unknown>).xp as number
+        : 0
+      : 0;
+
+  return {
+    global: {
+      level: deriveGlobalLevel(games),
+      xp: globalXp,
+    },
+    games,
+  };
+}
+
+/**
+ * Parse and validate Blobbi-specific unlocks from raw JSON.
+ * Falls back to defaults for any missing or malformed fields.
+ */
+function parseBlobbiUnlocks(raw: unknown): BlobbiUnlocks {
+  if (typeof raw !== 'object' || raw === null || Array.isArray(raw)) {
+    return { ...DEFAULT_BLOBBI_UNLOCKS };
+  }
+
+  const obj = raw as Record<string, unknown>;
+
+  return {
+    maxBlobbis:
+      typeof obj.maxBlobbis === 'number' && obj.maxBlobbis >= 1
+        ? obj.maxBlobbis
+        : DEFAULT_BLOBBI_UNLOCKS.maxBlobbis,
+    realInventoryEnabled:
+      typeof obj.realInventoryEnabled === 'boolean'
+        ? obj.realInventoryEnabled
+        : DEFAULT_BLOBBI_UNLOCKS.realInventoryEnabled,
+  };
+}
+
+// ─── Merge Helpers ────────────────────────────────────────────────────────────
+
+/**
+ * Deep-merge an update into an existing Progression structure.
+ *
+ * Merge rules (conservative, section-scoped):
+ *   1. `games` entries are merged per-key: only the specified game is touched.
+ *   2. Unmentioned games are preserved exactly as-is.
+ *   3. Within a game entry, each field is individually merged — unknown fields
+ *      within the game entry are preserved.
+ *   4. `unlocks` within a game entry are shallow-merged (known fields override,
+ *      unknown fields preserved).
+ *   5. `global.level` is always re-derived after merging — callers never set it.
+ *   6. `global.xp` is preserved from existing unless explicitly provided.
+ *
+ * @param existing - The current progression (may be `undefined` for first-time init)
+ * @param update   - A partial progression update. Only specified paths are written.
+ * @returns        - The merged Progression with re-derived global level.
+ */
+export function mergeProgression(
+  existing: Progression | undefined,
+  update: DeepPartialProgression,
+): Progression {
+  // Start from existing or create a minimal scaffold
+  const base: Progression = existing ?? { global: { level: 0, xp: 0 }, games: {} };
+
+  // ── Merge games ──
+
+  const mergedGames: GameProgressionMap = { ...base.games };
+
+  if (update.games) {
+    for (const gameId of Object.keys(update.games)) {
+      const existingGame = mergedGames[gameId];
+      const updateGame = (update.games as Record<string, unknown>)[gameId];
+
+      if (typeof updateGame !== 'object' || updateGame === null) {
+        continue; // Skip invalid updates
+      }
+
+      const updateObj = updateGame as Record<string, unknown>;
+
+      if (gameId === 'blobbi') {
+        // Type-safe merge for Blobbi
+        const existingBlobbi = (existingGame as BlobbiGameProgression | undefined);
+        mergedGames.blobbi = mergeBlobbiGame(existingBlobbi, updateObj);
+      } else {
+        // Generic merge for unknown games
+        const existingEntry = existingGame as (BaseGameProgression & { unlocks?: unknown }) | undefined;
+        mergedGames[gameId] = mergeGenericGame(existingEntry, updateObj);
+      }
+    }
+  }
+
+  // ── Re-derive global ──
+  //
+  // `global.level` is ALWAYS the sum of game levels. This is non-negotiable —
+  // even if the caller provides `update.global.level`, we ignore it.
+  // `global.xp` is preserved from existing unless the update explicitly provides it.
+
+  const mergedGlobalXp =
+    update.global && typeof update.global.xp === 'number'
+      ? update.global.xp
+      : base.global.xp;
+
+  return {
+    global: {
+      level: deriveGlobalLevel(mergedGames),
+      xp: mergedGlobalXp,
+    },
+    games: mergedGames,
+  };
+}
+
+/**
+ * Merge an update into an existing Blobbi game progression entry.
+ * Preserves existing fields not mentioned in the update.
+ */
+function mergeBlobbiGame(
+  existing: BlobbiGameProgression | undefined,
+  update: Record<string, unknown>,
+): BlobbiGameProgression {
+  const base = existing ?? {
+    ...DEFAULT_BLOBBI_GAME_PROGRESSION,
+    unlocks: { ...DEFAULT_BLOBBI_UNLOCKS },
+  };
+
+  const merged: BlobbiGameProgression = {
+    level: typeof update.level === 'number' ? update.level : base.level,
+    xp: typeof update.xp === 'number' ? update.xp : base.xp,
+    unlocks: base.unlocks,
+  };
+
+  // Merge unlocks if provided
+  if (typeof update.unlocks === 'object' && update.unlocks !== null && !Array.isArray(update.unlocks)) {
+    const unlockUpdate = update.unlocks as Record<string, unknown>;
+    merged.unlocks = {
+      maxBlobbis:
+        typeof unlockUpdate.maxBlobbis === 'number'
+          ? unlockUpdate.maxBlobbis
+          : base.unlocks.maxBlobbis,
+      realInventoryEnabled:
+        typeof unlockUpdate.realInventoryEnabled === 'boolean'
+          ? unlockUpdate.realInventoryEnabled
+          : base.unlocks.realInventoryEnabled,
+    };
+  }
+
+  return merged;
+}
+
+/**
+ * Merge an update into an existing generic (unknown) game progression entry.
+ */
+function mergeGenericGame(
+  existing: (BaseGameProgression & { unlocks?: unknown }) | undefined,
+  update: Record<string, unknown>,
+): BaseGameProgression & { unlocks?: unknown } {
+  const base = existing ?? { level: 0, xp: 0 };
+
+  const merged: BaseGameProgression & { unlocks?: unknown } = {
+    level: typeof update.level === 'number' ? update.level : base.level,
+    xp: typeof update.xp === 'number' ? update.xp : base.xp,
+  };
+
+  // Preserve or update unlocks (opaque for unknown games)
+  if (update.unlocks !== undefined) {
+    merged.unlocks = update.unlocks;
+  } else if (base.unlocks !== undefined) {
+    merged.unlocks = base.unlocks;
+  }
+
+  return merged;
+}
+
+// ─── Tag Helpers ──────────────────────────────────────────────────────────────
+
+/**
+ * Upsert the `["level", "<value>"]` tag in a tag array.
+ *
+ * - If a `level` tag already exists, its value is updated in place.
+ * - If no `level` tag exists, one is appended.
+ * - All other tags are preserved exactly as-is (order, values, extra elements).
+ *
+ * This mirrors the derived `progression.global.level` into a queryable tag
+ * so relays can filter profiles by level without parsing content JSON.
+ *
+ * @param tags  - The current tag array (will not be mutated)
+ * @param level - The derived global level to write
+ * @returns     - A new tag array with the level tag upserted
+ */
+export function upsertLevelTag(tags: string[][], level: number): string[][] {
+  const levelStr = String(level);
+  let found = false;
+
+  const result = tags.map((tag) => {
+    if (tag[0] === 'level') {
+      found = true;
+      return ['level', levelStr];
+    }
+    return tag;
+  });
+
+  if (!found) {
+    result.push(['level', levelStr]);
+  }
+
+  return result;
+}
+
+// ─── Centralized Content Update ───────────────────────────────────────────────
+
+/**
+ * Update the `progression` section inside a kind 11125 content string.
+ *
+ * This is the **standard entry point** for any code path that needs to modify
+ * Blobbi game progression (or any future game). It:
+ *
+ *   1. Parses the existing content safely (empty/invalid → empty object)
+ *   2. Extracts the existing `progression` (may be `undefined`)
+ *   3. Merges the update conservatively (only touches specified paths)
+ *   4. Re-derives `global.level`
+ *   5. Writes the merged `progression` back, preserving all sibling keys
+ *      (`dailyMissions`, any future keys, and any unknown keys)
+ *   6. Returns both the serialized content string and the derived global level
+ *      so the caller can also upsert the `level` tag.
+ *
+ * ── Why this function should be the standard path ──
+ *
+ * Every future kind 11125 content write that touches `progression` should flow
+ * through `updateProgressionContent` (or through a higher-level helper that
+ * calls it). This guarantees:
+ *   - Unknown top-level keys are never dropped
+ *   - `dailyMissions` is never overwritten
+ *   - `global.level` is always consistent with game data
+ *   - The `level` tag can always be updated from the returned value
+ *
+ * @param existingContent - The current `event.content` string (may be empty)
+ * @param progressionUpdate - A partial progression update
+ * @returns `{ content, globalLevel }` — serialized content + derived level for the tag
+ */
+export function updateProgressionContent(
+  existingContent: string,
+  progressionUpdate: DeepPartialProgression,
+): { content: string; globalLevel: number } {
+  // Step 1: Parse the full content safely. Unknown keys are preserved.
+  const { data } = safeParseContent(existingContent);
+
+  // Step 2: Extract and merge progression
+  const existingProgression = parseProgression(data.progression);
+  const merged = mergeProgression(existingProgression, progressionUpdate);
+
+  // Step 3: Write merged progression back, preserving all other keys
+  const updated = {
+    ...data,
+    progression: merged,
+  };
+
+  return {
+    content: JSON.stringify(updated),
+    globalLevel: merged.global.level,
+  };
+}
+
+// ─── Deep Partial Type ────────────────────────────────────────────────────────
+
+/**
+ * A deep-partial type for progression updates.
+ *
+ * Callers provide only the paths they want to change. Unmentioned fields
+ * at every nesting level are preserved from the existing state.
+ */
+export interface DeepPartialProgression {
+  global?: Partial<GlobalProgression>;
+  games?: {
+    [gameId: string]: Partial<BaseGameProgression & { unlocks?: unknown }> | undefined;
+  };
+}
+
+// NOTE: safeParseContent is imported from blobbonaut-content.ts (the shared
+// content parsing entry point for all kind 11125 content operations).

src/blobbi/dev/BlobbiDevEditor.tsx

@@ -527,8 +527,10 @@ export function BlobbiDevEditor({
                   onCheckedChange={setBreedingReady}
                 />
               </div>
-            </div>
+             </div>
           </div>
+
+
         </div>
 
         <DialogFooter className="flex-col sm:flex-row gap-2">

src/blobbi/dev/BlobbiEmotionPanel.tsx

@@ -9,7 +9,7 @@ import { Theater } from 'lucide-react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { useEmotionDev } from './EmotionDevContext';
+import { useEmotionDev } from './useEmotionDev';
 import { isLocalhostDev } from './index';
 import type { BlobbiEmotion } from '@/blobbi/ui/lib/emotions';
 

src/blobbi/dev/EmotionDevContext.tsx

@@ -10,26 +10,10 @@
  * - Is purely for visual testing/debugging
  */
 
-import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { useState, useCallback, type ReactNode } from 'react';
 import type { BlobbiEmotion } from '@/blobbi/ui/lib/emotions';
 import { isLocalhostDev } from './index';
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-interface EmotionDevContextValue {
-  /** Current dev emotion override (null = use default/neutral) */
-  devEmotion: BlobbiEmotion | null;
-  /** Set the dev emotion override */
-  setDevEmotion: (emotion: BlobbiEmotion | null) => void;
-  /** Clear the dev emotion override (back to neutral) */
-  clearDevEmotion: () => void;
-  /** Whether dev emotion is active */
-  isDevEmotionActive: boolean;
-}
-
-// ─── Context ──────────────────────────────────────────────────────────────────
-
-const EmotionDevContext = createContext<EmotionDevContextValue | null>(null);
+import { EmotionDevContext, type EmotionDevContextValue } from './useEmotionDev';
 
 // ─── Provider ─────────────────────────────────────────────────────────────────
 
@@ -68,40 +52,4 @@ export function EmotionDevProvider({ children }: EmotionDevProviderProps) {
   );
 }
 
-// ─── Hook ─────────────────────────────────────────────────────────────────────
 
-/**
- * Hook to access dev emotion state.
- * Returns null values in production for safety.
- */
-export function useEmotionDev(): EmotionDevContextValue {
-  const context = useContext(EmotionDevContext);
-  
-  // Outside localhost dev or if no provider, return safe defaults
-  if (!isLocalhostDev() || !context) {
-    return {
-      devEmotion: null,
-      setDevEmotion: () => {},
-      clearDevEmotion: () => {},
-      isDevEmotionActive: false,
-    };
-  }
-  
-  return context;
-}
-
-/**
- * Get the effective emotion for a Blobbi.
- * In dev mode with an override, returns the dev emotion.
- * Otherwise returns the provided emotion or 'neutral'.
- */
-export function useEffectiveEmotion(baseEmotion?: BlobbiEmotion): BlobbiEmotion {
-  const { devEmotion, isDevEmotionActive } = useEmotionDev();
-  
-  // Dev override takes precedence (only in localhost dev)
-  if (isLocalhostDev() && isDevEmotionActive && devEmotion) {
-    return devEmotion;
-  }
-  
-  return baseEmotion ?? 'neutral';
-}

src/blobbi/dev/ProgressionDevPanel.tsx

@@ -0,0 +1,200 @@
+/**
+ * ProgressionDevPanel - DEV MODE ONLY
+ *
+ * Simple testing panel for manually triggering kind 11125 progression writes.
+ * All actions flow through the proper centralized helpers:
+ *   - updateProgressionContent() for content JSON
+ *   - upsertLevelTag() for the queryable level tag
+ *   - fetchFreshEvent() + prev for safe read-modify-write
+ *
+ * This component is temporary and can be removed when progression is
+ * integrated into real gameplay.
+ */
+
+import { useState } from 'react';
+import { useNostr } from '@nostrify/react';
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { Badge } from '@/components/ui/badge';
+import { toast } from '@/hooks/useToast';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { fetchFreshEvent } from '@/lib/fetchFreshEvent';
+
+import { KIND_BLOBBONAUT_PROFILE } from '@/blobbi/core/lib/blobbi';
+import { parseProfileContent } from '@/blobbi/core/lib/blobbonaut-content';
+import { updateProgressionContent, upsertLevelTag } from '@/blobbi/core/lib/progression';
+import { isLocalhostDev } from './index';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface ProgressionDevPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Called after a successful write to update the cached profile event */
+  onProfileUpdated?: (event: import('@nostrify/nostrify').NostrEvent) => void;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function ProgressionDevPanel({ isOpen, onClose, onProfileUpdated }: ProgressionDevPanelProps) {
+  const { nostr } = useNostr();
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const [busy, setBusy] = useState(false);
+  const [lastResult, setLastResult] = useState<string | null>(null);
+
+  // Guard: only render in localhost dev mode
+  if (!isLocalhostDev()) return null;
+
+  /**
+   * Core write helper: fetch fresh event, apply progression update,
+   * upsert level tag, publish. This is the pattern all future progression
+   * writes should follow.
+   */
+  async function applyProgressionUpdate(
+    label: string,
+    getUpdate: (currentContent: string) => Parameters<typeof updateProgressionContent>[1],
+  ) {
+    if (!user?.pubkey) {
+      toast({ title: 'Not logged in', variant: 'destructive' });
+      return;
+    }
+
+    setBusy(true);
+    setLastResult(null);
+
+    try {
+      // 1. Fetch fresh event (safe read-modify-write)
+      const prev = await fetchFreshEvent(nostr, {
+        kinds: [KIND_BLOBBONAUT_PROFILE],
+        authors: [user.pubkey],
+      });
+
+      const existingContent = prev?.content ?? '';
+      const existingTags = prev?.tags ?? [];
+
+      // 2. Apply progression update through centralized helper
+      const progressionUpdate = getUpdate(existingContent);
+      const { content: updatedContent, globalLevel } = updateProgressionContent(
+        existingContent,
+        progressionUpdate,
+      );
+
+      // 3. Upsert level tag (queryable mirror)
+      const updatedTags = upsertLevelTag(existingTags, globalLevel);
+
+      // 4. Publish
+      const event = await publishEvent({
+        kind: KIND_BLOBBONAUT_PROFILE,
+        content: updatedContent,
+        tags: updatedTags,
+        prev: prev ?? undefined,
+      });
+
+      onProfileUpdated?.(event);
+
+      // Show result
+      const parsed = parseProfileContent(updatedContent);
+      const blobbi = parsed.progression?.games?.blobbi;
+      setLastResult(
+        `${label}: level=${blobbi?.level ?? '?'}, xp=${blobbi?.xp ?? '?'}, global=${globalLevel}`,
+      );
+
+      toast({ title: 'DEV: Progression updated', description: label });
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setLastResult(`Error: ${msg}`);
+      toast({ title: 'DEV: Write failed', description: msg, variant: 'destructive' });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  // ── Actions ──
+
+  const addXp = (amount: number) =>
+    applyProgressionUpdate(`+${amount} Blobbi XP`, (content) => {
+      const parsed = parseProfileContent(content);
+      const currentXp = parsed.progression?.games?.blobbi?.xp ?? 0;
+      return { games: { blobbi: { xp: currentXp + amount } } };
+    });
+
+  const addLevel = () =>
+    applyProgressionUpdate('+1 Blobbi Level', (content) => {
+      const parsed = parseProfileContent(content);
+      const currentLevel = parsed.progression?.games?.blobbi?.level ?? 1;
+      return { games: { blobbi: { level: currentLevel + 1 } } };
+    });
+
+  const resetProgression = () =>
+    applyProgressionUpdate('Reset Blobbi Progression', () => ({
+      games: { blobbi: { level: 1, xp: 0, unlocks: { maxBlobbis: 1, realInventoryEnabled: false } } },
+    }));
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            Progression Dev Panel
+            <Badge variant="outline" className="text-xs">DEV</Badge>
+          </DialogTitle>
+          <DialogDescription>
+            Test kind 11125 progression writes. All actions use the proper helpers.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          {/* XP buttons */}
+          <div className="space-y-1.5">
+            <p className="text-xs font-medium text-muted-foreground">Blobbi XP</p>
+            <div className="flex gap-2">
+              <Button size="sm" variant="outline" onClick={() => addXp(10)} disabled={busy}>
+                +10 XP
+              </Button>
+              <Button size="sm" variant="outline" onClick={() => addXp(50)} disabled={busy}>
+                +50 XP
+              </Button>
+              <Button size="sm" variant="outline" onClick={() => addXp(200)} disabled={busy}>
+                +200 XP
+              </Button>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Level buttons */}
+          <div className="space-y-1.5">
+            <p className="text-xs font-medium text-muted-foreground">Blobbi Level</p>
+            <div className="flex gap-2">
+              <Button size="sm" variant="outline" onClick={addLevel} disabled={busy}>
+                +1 Level
+              </Button>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Reset */}
+          <div className="space-y-1.5">
+            <p className="text-xs font-medium text-muted-foreground">Reset</p>
+            <Button size="sm" variant="destructive" onClick={resetProgression} disabled={busy}>
+              Reset Blobbi Progression
+            </Button>
+          </div>
+
+          {/* Last result */}
+          {lastResult && (
+            <>
+              <Separator />
+              <p className="text-xs font-mono text-muted-foreground break-all">{lastResult}</p>
+            </>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/blobbi/dev/index.ts

@@ -35,5 +35,9 @@ export { BlobbiDevEditor, type BlobbiDevUpdates } from './BlobbiDevEditor';
 export { useBlobbiDevUpdate } from './useBlobbiDevUpdate';
 
 // Emotion testing tools
-export { EmotionDevProvider, useEmotionDev, useEffectiveEmotion } from './EmotionDevContext';
+export { EmotionDevProvider } from './EmotionDevContext';
+export { useEmotionDev, useEffectiveEmotion } from './useEmotionDev';
 export { BlobbiEmotionPanel } from './BlobbiEmotionPanel';
+
+// Progression testing tools
+export { ProgressionDevPanel } from './ProgressionDevPanel';

src/blobbi/dev/useBlobbiDevUpdate.ts

@@ -7,7 +7,7 @@
  * IMPORTANT: This hook should only be used in development mode.
  */
 
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import type { NostrEvent } from '@nostrify/nostrify';
 
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -24,8 +24,6 @@ interface UseBlobbiDevUpdateParams {
   companion: BlobbiCompanion | null;
   /** Update companion event in local cache */
   updateCompanionEvent: (event: NostrEvent) => void;
-  /** Invalidate companion queries */
-  invalidateCompanion: () => void;
 }
 
 interface DevUpdateResult {
@@ -50,11 +48,9 @@ function generateBlobbiContent(name: string, stage: BlobbiStage): string {
 export function useBlobbiDevUpdate({
   companion,
   updateCompanionEvent,
-  invalidateCompanion,
 }: UseBlobbiDevUpdateParams) {
   const { user } = useCurrentUser();
   const { mutateAsync: publishEvent } = useNostrPublish();
-  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (updates: BlobbiDevUpdates): Promise<DevUpdateResult> => {
@@ -169,12 +165,6 @@ export function useBlobbiDevUpdate({
 
       // ─── Update Caches ───
       updateCompanionEvent(event);
-      invalidateCompanion();
-
-      // Invalidate collection queries
-      queryClient.invalidateQueries({ 
-        queryKey: ['blobbi-collection', user.pubkey] 
-      });
 
       return {
         previousStage: companion.stage,

src/blobbi/dev/useEmotionDev.ts

@@ -0,0 +1,58 @@
+import { createContext, useContext } from 'react';
+import type { BlobbiEmotion } from '@/blobbi/ui/lib/emotions';
+import { isLocalhostDev } from './index';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface EmotionDevContextValue {
+  /** Current dev emotion override (null = use default/neutral) */
+  devEmotion: BlobbiEmotion | null;
+  /** Set the dev emotion override */
+  setDevEmotion: (emotion: BlobbiEmotion | null) => void;
+  /** Clear the dev emotion override (back to neutral) */
+  clearDevEmotion: () => void;
+  /** Whether dev emotion is active */
+  isDevEmotionActive: boolean;
+}
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+export const EmotionDevContext = createContext<EmotionDevContextValue | null>(null);
+
+// ─── Hooks ────────────────────────────────────────────────────────────────────
+
+/**
+ * Hook to access dev emotion state.
+ * Returns null values in production for safety.
+ */
+export function useEmotionDev(): EmotionDevContextValue {
+  const context = useContext(EmotionDevContext);
+  
+  // Outside localhost dev or if no provider, return safe defaults
+  if (!isLocalhostDev() || !context) {
+    return {
+      devEmotion: null,
+      setDevEmotion: () => {},
+      clearDevEmotion: () => {},
+      isDevEmotionActive: false,
+    };
+  }
+  
+  return context;
+}
+
+/**
+ * Get the effective emotion for a Blobbi.
+ * In dev mode with an override, returns the dev emotion.
+ * Otherwise returns the provided emotion or 'neutral'.
+ */
+export function useEffectiveEmotion(baseEmotion?: BlobbiEmotion): BlobbiEmotion {
+  const { devEmotion, isDevEmotionActive } = useEmotionDev();
+  
+  // Dev override takes precedence (only in localhost dev)
+  if (isLocalhostDev() && isDevEmotionActive && devEmotion) {
+    return devEmotion;
+  }
+  
+  return baseEmotion ?? 'neutral';
+}

src/blobbi/egg/components/EggGraphic.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import type { EggVisualBlobbi } from '../types/egg.types';
 import { isValidBaseColor, isValidSecondaryColor } from '../lib/blobbi-egg-validation';
 import { SpecialMarkRenderer, SpecialMarkFallback } from './SpecialMarkRenderer';
@@ -25,6 +25,29 @@ export interface EggStatusEffects {
   happy?: boolean;
 }
 
+/**
+ * Tour visual states that the egg can display.
+ * Driven by the tour orchestration layer, not by EggGraphic itself.
+ *
+ * - idle: no tour effects
+ * - show_hatch_card: initial crack visible + auto-wiggle every 2.5s
+ * - glowing_waiting_click: enhanced glow + auto-wiggle, waiting for tap
+ * - crack_stage_1: crack expands (click 1)
+ * - crack_stage_2: crack expands more (click 2)
+ * - crack_stage_3: final crack (click 3)
+ * - opening: shell splits open
+ * - hatching: bright light + reveal
+ */
+export type EggTourVisualState =
+  | 'idle'
+  | 'show_hatch_card'
+  | 'glowing_waiting_click'
+  | 'crack_stage_1'
+  | 'crack_stage_2'
+  | 'crack_stage_3'
+  | 'opening'
+  | 'hatching';
+
 interface EggGraphicProps {
   blobbi?: EggVisualBlobbi; // Visual blobbi object for visual properties
   sizeVariant?: 'tiny' | 'small' | 'medium' | 'large'; // Internal scaling only, NOT layout size
@@ -36,6 +59,10 @@ interface EggGraphicProps {
   forceInlineSvg?: boolean; // New prop to guarantee inline SVG
   /** Status effects for egg-stage visual feedback */
   statusEffects?: EggStatusEffects;
+  /** Tour visual state - driven externally by the tour orchestration layer */
+  tourVisualState?: EggTourVisualState;
+  /** Callback when the egg is clicked during an interactive tour step */
+  onTourEggClick?: () => void;
 }
 
 /**
@@ -114,6 +141,8 @@ export const EggGraphic: React.FC<EggGraphicProps> = ({
   warmth = 50,
   forceInlineSvg: _forceInlineSvg = false,
   statusEffects,
+  tourVisualState = 'idle',
+  onTourEggClick,
 }) => {
   // sizeVariant controls ONLY internal scaling/details, NOT layout dimensions
   // Parent container controls actual rendered width/height via slot
@@ -152,14 +181,62 @@ export const EggGraphic: React.FC<EggGraphicProps> = ({
   const [isTapWiggling, setIsTapWiggling] = useState(false);
 
   const handleEggClick = useCallback(() => {
+    // Tour interactive steps: forward click to tour controller
+    if (onTourEggClick && (tourVisualState === 'glowing_waiting_click' || tourVisualState === 'crack_stage_1' || tourVisualState === 'crack_stage_2' || tourVisualState === 'crack_stage_3')) {
+      setIsTapWiggling(true);
+      onTourEggClick();
+      return;
+    }
     if (isTapWiggling || cracking) return; // Don't re-trigger during animation or cracking
     setIsTapWiggling(true);
-  }, [isTapWiggling, cracking]);
+  }, [isTapWiggling, cracking, onTourEggClick, tourVisualState]);
 
   const handleWiggleEnd = useCallback(() => {
     setIsTapWiggling(false);
   }, []);
 
+  // Tour: auto-wiggle effect for show_hatch_card and glowing_waiting_click states
+  const shouldAutoWiggle = tourVisualState === 'show_hatch_card' || tourVisualState === 'glowing_waiting_click';
+  const autoWiggleTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  useEffect(() => {
+    if (!shouldAutoWiggle) {
+      if (autoWiggleTimerRef.current) {
+        clearInterval(autoWiggleTimerRef.current);
+        autoWiggleTimerRef.current = null;
+      }
+      return;
+    }
+    // Trigger an immediate wiggle, then repeat every 2.5s
+    setIsTapWiggling(true);
+    autoWiggleTimerRef.current = setInterval(() => {
+      setIsTapWiggling((prev) => {
+        if (!prev) return true;
+        return prev;
+      });
+    }, 2500);
+    return () => {
+      if (autoWiggleTimerRef.current) {
+        clearInterval(autoWiggleTimerRef.current);
+        autoWiggleTimerRef.current = null;
+      }
+    };
+  }, [shouldAutoWiggle]);
+
+  // Tour: whether the egg should show crack overlay
+  // The crack stays visible during 'opening' so the shell fades out WITH its cracks intact.
+  // Only 'idle' and 'hatching' (shell already gone) hide the crack.
+  const tourShowCrack = tourVisualState !== 'idle' && tourVisualState !== 'hatching';
+
+  // Tour: crack intensity level (0 = small center crack, 1-3 = progressively expanding)
+  // Level 0: small central crack (show_hatch_card, glowing_waiting_click)
+  // Level 1: crack expands left/right with small branches (crack_stage_1)
+  // Level 2: crack expands further toward edges, more branches (crack_stage_2)
+  // Level 3: crack reaches near shell edges, about to split (crack_stage_3, opening)
+  const tourCrackLevel = tourVisualState === 'crack_stage_1' ? 1
+    : tourVisualState === 'crack_stage_2' ? 2
+    : (tourVisualState === 'crack_stage_3' || tourVisualState === 'opening') ? 3
+    : 0;
+
   // Divine color constants
   const DIVINE_PRIMARY_GREEN = '#55C4A2';
   const _DIVINE_HIGHLIGHT_GREEN = '#7AD9B9';
@@ -440,18 +517,32 @@ export const EggGraphic: React.FC<EggGraphicProps> = ({
         }}
       >
         {/* Glow effect based on warmth - relative sizing */}
-        <div
-          className={cn(
-            'absolute rounded-full blur-xl transition-all duration-1000',
-            animated && 'animate-pulse'
-          )}
-          style={{
-            width: '120%',
-            height: '120%',
-            background: `radial-gradient(circle, ${glowColor} 0%, transparent 70%)`,
-            zIndex: 0,
-          }}
-        />
+        {(() => {
+          const isGlowingTour = tourVisualState === 'glowing_waiting_click'
+            || tourVisualState === 'crack_stage_1' || tourVisualState === 'crack_stage_2'
+            || tourVisualState === 'crack_stage_3';
+          const isHatchLight = tourVisualState === 'opening' || tourVisualState === 'hatching';
+          return (
+            <div
+              className={cn(
+                'absolute rounded-full blur-xl transition-all duration-1000',
+                animated && !isGlowingTour && !isHatchLight && 'animate-pulse',
+                isGlowingTour && 'animate-egg-tour-glow',
+                isHatchLight && 'animate-egg-tour-glow',
+              )}
+              style={{
+                width: isHatchLight ? '200%' : isGlowingTour ? '150%' : '120%',
+                height: isHatchLight ? '200%' : isGlowingTour ? '150%' : '120%',
+                background: isHatchLight
+                  ? `radial-gradient(circle, #fff 0%, ${glowColor} 40%, transparent 70%)`
+                  : isGlowingTour
+                    ? `radial-gradient(circle, ${glowColor} 0%, ${glowColor}80 30%, transparent 70%)`
+                    : `radial-gradient(circle, ${glowColor} 0%, transparent 70%)`,
+                zIndex: 0,
+              }}
+            />
+          );
+        })()}
 
         {/* Main egg shape - uses percentage-based sizing */}
         <div
@@ -468,8 +559,12 @@ export const EggGraphic: React.FC<EggGraphicProps> = ({
             !isTapWiggling && reaction === 'singing' && 'animate-egg-bounce',
             // Warmth effect only when animated AND warm
             animated && actualWarmth > 60 && 'animate-egg-warmth',
-            // Cracking overrides other animations
-            cracking && 'animate-egg-crack'
+            // Cracking overrides other animations (legacy prop or tour crack stages)
+            // During 'opening' the shell runs its own open animation, so suppress the shake
+            (cracking || (tourCrackLevel >= 1 && tourVisualState !== 'opening')) && 'animate-egg-crack',
+            // Opening/hatching: fade out the egg shell (crack overlay stays inside and fades with it)
+            tourVisualState === 'opening' && 'animate-egg-tour-open',
+            tourVisualState === 'hatching' && 'opacity-0',
           )}
           style={{
             width: '80%',
@@ -480,7 +575,7 @@ export const EggGraphic: React.FC<EggGraphicProps> = ({
               inset -0.5em -0.5em 1em ${shadow}33,
               inset 0.5em 0.5em 1em ${highlight}26
             `,
-            filter: cracking ? 'brightness(1.1)' : 'brightness(1)',
+            filter: (cracking || tourCrackLevel >= 1) ? 'brightness(1.1)' : 'brightness(1)',
           }}
         >
           {/* Highlight on the egg - uses color variants instead of white */}
@@ -538,133 +633,181 @@ export const EggGraphic: React.FC<EggGraphicProps> = ({
               renderLegacySpecialMark(effectiveSpecialMark)
             ))}
 
-          {/* Crack pattern based on docs/aprovado.svg when cracking is true */}
-          {cracking && (
-            <svg
-              className="absolute inset-0 pointer-events-none w-full h-full"
-              viewBox="0 0 120 125"
-              preserveAspectRatio="xMidYMid meet"
-              style={{
-                height: '100%',
-              }}
-            >
-              {/* Main horizontal crack (adapted from aprovado.svg) */}
-              <path
-                d="M10 62
-                   L20 60
-                   L30 64
-                   L40 59
-                   L50 65
-                   L60 58
-                   L70 66
-                   L80 57
-                   L90 67
-                   L100 59
-                   L110 65"
-                stroke="rgba(0, 0, 0, 0.6)"
-                strokeWidth="2"
-                fill="none"
-                strokeLinecap="round"
-              />
+          {/* Crack pattern - stage-specific paths that grow outward from center */}
+          {(cracking || tourShowCrack) && (() => {
+            // Legacy cracking shows full crack; tour uses progressive stage-specific paths
+            const level = cracking ? 3 : tourCrackLevel;
+            return (
+              <svg
+                className="absolute inset-0 pointer-events-none w-full h-full transition-opacity duration-300"
+                viewBox="0 0 120 125"
+                preserveAspectRatio="xMidYMid meet"
+                style={{ height: '100%' }}
+              >
+                {/*
+                  Stage-specific crack paths.
+                  Each level has its OWN distinct paths that expand outward from the egg center.
+                  The crack grows from a small central cluster to full-width fracture.
 
-              {/* Secondary cracks (adapted from aprovado.svg) */}
-              <path
-                d="M30 64 L28 70"
-                stroke="rgba(0, 0, 0, 0.4)"
-                strokeWidth="1"
-                strokeLinecap="round"
-              />
-              <path
-                d="M50 65 L53 71"
-                stroke="rgba(0, 0, 0, 0.4)"
-                strokeWidth="1"
-                strokeLinecap="round"
-              />
-              <path
-                d="M60 58 L57 52"
-                stroke="rgba(0, 0, 0, 0.4)"
-                strokeWidth="1"
-                strokeLinecap="round"
-              />
-              <path
-                d="M80 57 L82 50"
-                stroke="rgba(0, 0, 0, 0.4)"
-                strokeWidth="1"
-                strokeLinecap="round"
-              />
-              <path
-                d="M90 67 L95 72"
-                stroke="rgba(0, 0, 0, 0.4)"
-                strokeWidth="1"
-                strokeLinecap="round"
-              />
-              <path
-                d="M100 59 L97 53"
-                stroke="rgba(0, 0, 0, 0.4)"
-                strokeWidth="1"
-                strokeLinecap="round"
-              />
-              <path
-                d="M110 65 L113 69"
-                stroke="rgba(0, 0, 0, 0.4)"
-                strokeWidth="1"
-                strokeLinecap="round"
-              />
+                  Viewbox center is roughly (60, 62).
+                  Level 0: tiny central crack (~3-4 small connected segments near center)
+                  Level 1: extends left/right from center, first branches
+                  Level 2: reaches further toward edges, more fracture detail
+                  Level 3: crack reaches near shell edges, dense branching
+                */}
 
-              {/* Additional micro-cracks for detail */}
-              <path
-                d="M40 59 L38 55"
-                stroke="rgba(0, 0, 0, 0.25)"
-                strokeWidth="0.8"
-                strokeLinecap="round"
-              />
-              <path
-                d="M70 66 L73 70"
-                stroke="rgba(0, 0, 0, 0.25)"
-                strokeWidth="0.8"
-                strokeLinecap="round"
-              />
-              <path
-                d="M20 60 L18 56"
-                stroke="rgba(0, 0, 0, 0.2)"
-                strokeWidth="0.6"
-                strokeLinecap="round"
-              />
+                {/* ── Level 0: Small central crack ── */}
+                {/* A few short connected segments clustered around the center of the egg */}
+                {level === 0 && (<>
+                  {/* Main tiny crack: ~15px wide, centered */}
+                  <path
+                    d="M53 63 L57 60 L63 64 L67 61"
+                    stroke="rgba(0, 0, 0, 0.5)"
+                    strokeWidth="1.2"
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  {/* Tiny upward branch from center */}
+                  <path
+                    d="M57 60 L56 57"
+                    stroke="rgba(0, 0, 0, 0.35)"
+                    strokeWidth="0.8"
+                    fill="none"
+                    strokeLinecap="round"
+                  />
+                  {/* Tiny downward branch */}
+                  <path
+                    d="M63 64 L65 67"
+                    stroke="rgba(0, 0, 0, 0.35)"
+                    strokeWidth="0.8"
+                    fill="none"
+                    strokeLinecap="round"
+                  />
+                  {/* Subtle highlight alongside main crack */}
+                  <path
+                    d="M54 64 L58 61 L64 65"
+                    stroke="rgba(255, 255, 255, 0.12)"
+                    strokeWidth="0.6"
+                    fill="none"
+                    strokeLinecap="round"
+                  />
+                </>)}
 
-              {/* Crack highlights for depth (following the main crack pattern) */}
-              <path
-                d="M10 63
-                   L20 61
-                   L30 65
-                   L40 60
-                   L50 66
-                   L60 59
-                   L70 67
-                   L80 58
-                   L90 68
-                   L100 60
-                   L110 66"
-                stroke="rgba(255, 255, 255, 0.15)"
-                strokeWidth="0.8"
-                fill="none"
-                strokeLinecap="round"
-              />
+                {/* ── Level 1: Medium crack expanding from center ── */}
+                {/* Crack extends ~30px wide, first real branches appear */}
+                {level === 1 && (<>
+                  {/* Main crack: wider than level 0, extends left and right */}
+                  <path
+                    d="M42 61 L48 64 L53 60 L60 65 L67 59 L73 63 L78 60"
+                    stroke="rgba(0, 0, 0, 0.55)"
+                    strokeWidth="1.5"
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  {/* Highlight */}
+                  <path
+                    d="M43 62 L49 65 L54 61 L61 66 L68 60 L74 64"
+                    stroke="rgba(255, 255, 255, 0.12)"
+                    strokeWidth="0.6"
+                    fill="none"
+                    strokeLinecap="round"
+                  />
+                  {/* Branch: upward left */}
+                  <path d="M48 64 L46 69" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="1" strokeLinecap="round" />
+                  {/* Branch: upward from center-right */}
+                  <path d="M67 59 L65 54" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="1" strokeLinecap="round" />
+                  {/* Branch: downward right */}
+                  <path d="M73 63 L76 68" stroke="rgba(0, 0, 0, 0.35)" strokeWidth="0.9" strokeLinecap="round" />
+                  {/* Small micro-branch */}
+                  <path d="M53 60 L51 56" stroke="rgba(0, 0, 0, 0.3)" strokeWidth="0.7" strokeLinecap="round" />
+                </>)}
 
-              {/* Secondary crack highlights */}
-              <path
-                d="M30 65 L28 71"
-                stroke="rgba(255, 255, 255, 0.1)"
-                strokeWidth="0.4"
-                strokeLinecap="round"
-              />
-              <path
-                d="M60 59 L57 53"
-                stroke="rgba(255, 255, 255, 0.1)"
-                strokeWidth="0.4"
-                strokeLinecap="round"
-              />
-            </svg>
-          )}
+                {/* ── Level 2: Larger crack reaching toward sides ── */}
+                {/* Crack extends ~60px wide, more branching detail */}
+                {level === 2 && (<>
+                  {/* Main crack: extends well toward both sides */}
+                  <path
+                    d="M30 63 L37 60 L44 65 L52 59 L60 64 L68 58 L76 63 L83 59 L90 64"
+                    stroke="rgba(0, 0, 0, 0.6)"
+                    strokeWidth="2"
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  {/* Highlight */}
+                  <path
+                    d="M31 64 L38 61 L45 66 L53 60 L61 65 L69 59 L77 64 L84 60"
+                    stroke="rgba(255, 255, 255, 0.12)"
+                    strokeWidth="0.7"
+                    fill="none"
+                    strokeLinecap="round"
+                  />
+                  {/* Branches: left side */}
+                  <path d="M37 60 L34 55" stroke="rgba(0, 0, 0, 0.45)" strokeWidth="1.1" strokeLinecap="round" />
+                  <path d="M44 65 L41 71" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="1" strokeLinecap="round" />
+                  {/* Branches: center */}
+                  <path d="M52 59 L50 53" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="1" strokeLinecap="round" />
+                  <path d="M60 64 L63 70" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="1" strokeLinecap="round" />
+                  {/* Branches: right side */}
+                  <path d="M68 58 L66 52" stroke="rgba(0, 0, 0, 0.45)" strokeWidth="1.1" strokeLinecap="round" />
+                  <path d="M76 63 L79 69" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="1" strokeLinecap="round" />
+                  <path d="M83 59 L86 54" stroke="rgba(0, 0, 0, 0.35)" strokeWidth="0.9" strokeLinecap="round" />
+                  {/* Micro-cracks */}
+                  <path d="M50 53 L48 50" stroke="rgba(0, 0, 0, 0.25)" strokeWidth="0.7" strokeLinecap="round" />
+                  <path d="M63 70 L66 73" stroke="rgba(0, 0, 0, 0.25)" strokeWidth="0.7" strokeLinecap="round" />
+                </>)}
+
+                {/* ── Level 3: Full crack reaching shell edges ── */}
+                {/* Crack spans nearly the full width, dense fracture network */}
+                {level >= 3 && (<>
+                  {/* Main crack: nearly full width of egg */}
+                  <path
+                    d="M15 62 L23 59 L32 64 L40 58 L50 65 L60 57 L70 64 L80 58 L88 63 L96 59 L105 64"
+                    stroke="rgba(0, 0, 0, 0.65)"
+                    strokeWidth="2.5"
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  {/* Highlight */}
+                  <path
+                    d="M16 63 L24 60 L33 65 L41 59 L51 66 L61 58 L71 65 L81 59 L89 64 L97 60"
+                    stroke="rgba(255, 255, 255, 0.13)"
+                    strokeWidth="0.8"
+                    fill="none"
+                    strokeLinecap="round"
+                  />
+                  {/* Heavy branches: left region */}
+                  <path d="M23 59 L19 53" stroke="rgba(0, 0, 0, 0.5)" strokeWidth="1.3" strokeLinecap="round" />
+                  <path d="M32 64 L28 72" stroke="rgba(0, 0, 0, 0.45)" strokeWidth="1.2" strokeLinecap="round" />
+                  <path d="M28 72 L25 76" stroke="rgba(0, 0, 0, 0.3)" strokeWidth="0.9" strokeLinecap="round" />
+                  {/* Heavy branches: center-left */}
+                  <path d="M40 58 L37 51" stroke="rgba(0, 0, 0, 0.5)" strokeWidth="1.2" strokeLinecap="round" />
+                  <path d="M50 65 L47 73" stroke="rgba(0, 0, 0, 0.45)" strokeWidth="1.2" strokeLinecap="round" />
+                  <path d="M37 51 L35 47" stroke="rgba(0, 0, 0, 0.3)" strokeWidth="0.8" strokeLinecap="round" />
+                  {/* Heavy branches: center */}
+                  <path d="M60 57 L58 50" stroke="rgba(0, 0, 0, 0.5)" strokeWidth="1.3" strokeLinecap="round" />
+                  <path d="M60 57 L63 68" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="1.1" strokeLinecap="round" />
+                  {/* Heavy branches: center-right */}
+                  <path d="M70 64 L73 71" stroke="rgba(0, 0, 0, 0.45)" strokeWidth="1.2" strokeLinecap="round" />
+                  <path d="M80 58 L83 50" stroke="rgba(0, 0, 0, 0.5)" strokeWidth="1.3" strokeLinecap="round" />
+                  <path d="M83 50 L86 46" stroke="rgba(0, 0, 0, 0.3)" strokeWidth="0.8" strokeLinecap="round" />
+                  {/* Heavy branches: right region */}
+                  <path d="M88 63 L91 70" stroke="rgba(0, 0, 0, 0.45)" strokeWidth="1.2" strokeLinecap="round" />
+                  <path d="M96 59 L99 52" stroke="rgba(0, 0, 0, 0.5)" strokeWidth="1.2" strokeLinecap="round" />
+                  <path d="M105 64 L109 70" stroke="rgba(0, 0, 0, 0.4)" strokeWidth="1.1" strokeLinecap="round" />
+                  {/* Micro-cracks (tertiary detail) */}
+                  <path d="M47 73 L44 77" stroke="rgba(0, 0, 0, 0.25)" strokeWidth="0.7" strokeLinecap="round" />
+                  <path d="M73 71 L76 75" stroke="rgba(0, 0, 0, 0.25)" strokeWidth="0.7" strokeLinecap="round" />
+                  <path d="M58 50 L55 46" stroke="rgba(0, 0, 0, 0.25)" strokeWidth="0.7" strokeLinecap="round" />
+                  <path d="M19 53 L17 49" stroke="rgba(0, 0, 0, 0.2)" strokeWidth="0.6" strokeLinecap="round" />
+                  <path d="M99 52 L102 48" stroke="rgba(0, 0, 0, 0.2)" strokeWidth="0.6" strokeLinecap="round" />
+                </>)}
+              </svg>
+            );
+          })()}
 
           {/* Title display for special eggs */}
           {blobbi?.title && (

src/blobbi/egg/index.ts

@@ -12,7 +12,7 @@
 import './styles/egg-animations.css';
 
 // Components
-export { EggGraphic, type EggReactionState, type EggStatusEffects } from './components/EggGraphic';
+export { EggGraphic, type EggReactionState, type EggStatusEffects, type EggTourVisualState } from './components/EggGraphic';
 export { SpecialMarkRenderer, SpecialMarkFallback } from './components/SpecialMarkRenderer';
 
 // Hooks

src/blobbi/egg/styles/egg-animations.css

@@ -320,6 +320,49 @@
   transform: translateZ(0);
 }
 
+/* ==========================================
+   Tour Visual State Animations
+   ========================================== */
+
+/* Shell opening: scale up slightly then fade out with blur */
+@keyframes egg-tour-open {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+    filter: brightness(1.1);
+  }
+  40% {
+    transform: scale(1.05);
+    opacity: 0.9;
+    filter: brightness(1.4);
+  }
+  100% {
+    transform: scale(1.15);
+    opacity: 0;
+    filter: brightness(2) blur(4px);
+  }
+}
+
+.animate-egg-tour-open {
+  animation: egg-tour-open 1.2s ease-in-out forwards;
+}
+
+/* Pulsing glow for the "waiting for click" tour state */
+@keyframes egg-tour-glow {
+  0%, 100% {
+    opacity: 0.5;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.08);
+  }
+}
+
+.animate-egg-tour-glow {
+  animation: egg-tour-glow 2s ease-in-out infinite;
+}
+
 /* ==========================================
    Responsive adjustments
    ========================================== */
@@ -351,7 +394,9 @@
   .animate-egg-sweat-drop,
   .animate-egg-dust-particle,
   .animate-egg-spiral,
-  .animate-egg-sparkle {
+  .animate-egg-sparkle,
+  .animate-egg-tour-glow,
+  .animate-egg-tour-open {
     animation: none !important;
   }
 }
@@ -393,3 +438,354 @@
     filter: grayscale(1) contrast(1.5) !important;
   }
 }
+
+/* ==========================================
+   Onboarding Hatching Ceremony Animations
+   ========================================== */
+
+/* Soft breathing pulse for the egg before interaction */
+@keyframes egg-onboard-breathe {
+  0%, 100% {
+    transform: scale(1);
+    filter: brightness(1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
+  }
+  50% {
+    transform: scale(1.015);
+    filter: brightness(1.03) drop-shadow(0 0 30px rgba(255, 255, 255, 0.15));
+  }
+}
+
+.animate-egg-onboard-breathe {
+  animation: egg-onboard-breathe 3s ease-in-out infinite;
+}
+
+/* Screen-filling radial glow that expands from center on hatch */
+@keyframes onboard-glow-expand {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.85;
+    transform: scale(2.5);
+  }
+}
+
+.animate-onboard-glow-expand {
+  animation: onboard-glow-expand 1.8s ease-out forwards;
+}
+
+/* Gentle lingering glow fade after hatch - holds then fades */
+@keyframes onboard-glow-linger {
+  0% {
+    opacity: 0.85;
+  }
+  15% {
+    opacity: 0.85;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-onboard-glow-linger {
+  animation: onboard-glow-linger 7s ease-out forwards;
+}
+
+/* Sentimental text fade in - very slow, dreamlike */
+@keyframes onboard-text-reveal {
+  0% {
+    opacity: 0;
+    transform: translateY(12px);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+}
+
+.animate-onboard-text-reveal {
+  animation: onboard-text-reveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+/* Delayed text reveal for secondary text */
+.animate-onboard-text-reveal-delay {
+  opacity: 0;
+  animation: onboard-text-reveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
+}
+
+/* Soft fade out for transition between phases */
+@keyframes onboard-soft-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-onboard-soft-fade-out {
+  animation: onboard-soft-fade-out 0.8s ease-out forwards;
+}
+
+/* Soft fade in */
+@keyframes onboard-soft-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-onboard-soft-fade-in {
+  animation: onboard-soft-fade-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+/* Floating particles that drift upward from the egg */
+@keyframes onboard-particle-rise {
+  0% {
+    opacity: 0;
+    transform: translateY(0) scale(0.5);
+  }
+  20% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-120px) scale(0.2);
+  }
+}
+
+/* Sparkle twinkle - stays in place, pulses brightness */
+@keyframes onboard-sparkle-twinkle {
+  0%, 100% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  15% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  30% {
+    opacity: 0.6;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  70% {
+    opacity: 0.3;
+    transform: scale(0.6);
+  }
+  85% {
+    opacity: 0.9;
+    transform: scale(1.1);
+  }
+}
+
+/* Sparkle drift - gentle floating motion */
+@keyframes onboard-sparkle-drift {
+  0% {
+    opacity: 0;
+    transform: translateY(0) scale(0.3);
+  }
+  20% {
+    opacity: 1;
+    transform: translateY(-8px) scale(1);
+  }
+  80% {
+    opacity: 0.8;
+    transform: translateY(-25px) scale(0.9);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-40px) scale(0.4);
+  }
+}
+
+/* Egg entrance - subtle float up from darkness */
+@keyframes egg-onboard-entrance {
+  0% {
+    opacity: 0;
+    transform: translateY(30px) scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.animate-egg-onboard-entrance {
+  animation: egg-onboard-entrance 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+/* Egg shake intensifying - for crack stages */
+@keyframes egg-onboard-shake-light {
+  0%, 100% { transform: translateX(0) rotate(0deg); }
+  25% { transform: translateX(-3px) rotate(-2deg); }
+  75% { transform: translateX(3px) rotate(2deg); }
+}
+
+@keyframes egg-onboard-shake-medium {
+  0%, 100% { transform: translateX(0) rotate(0deg); }
+  20% { transform: translateX(-5px) rotate(-3deg); }
+  40% { transform: translateX(4px) rotate(2deg); }
+  60% { transform: translateX(-4px) rotate(-2deg); }
+  80% { transform: translateX(5px) rotate(3deg); }
+}
+
+@keyframes egg-onboard-shake-heavy {
+  0%, 100% { transform: translateX(0) rotate(0deg); }
+  10% { transform: translateX(-6px) rotate(-4deg); }
+  20% { transform: translateX(5px) rotate(3deg); }
+  30% { transform: translateX(-7px) rotate(-3deg); }
+  40% { transform: translateX(6px) rotate(4deg); }
+  50% { transform: translateX(-5px) rotate(-2deg); }
+  60% { transform: translateX(7px) rotate(3deg); }
+  70% { transform: translateX(-6px) rotate(-4deg); }
+  80% { transform: translateX(5px) rotate(2deg); }
+  90% { transform: translateX(-4px) rotate(-3deg); }
+}
+
+.animate-egg-onboard-shake-light {
+  animation: egg-onboard-shake-light 0.4s ease-in-out;
+}
+
+.animate-egg-onboard-shake-medium {
+  animation: egg-onboard-shake-medium 0.5s ease-in-out;
+}
+
+.animate-egg-onboard-shake-heavy {
+  animation: egg-onboard-shake-heavy 0.6s ease-in-out;
+}
+
+/* Final burst - egg explodes into light */
+@keyframes egg-onboard-burst {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+    filter: brightness(1);
+  }
+  30% {
+    transform: scale(1.08);
+    filter: brightness(1.5);
+  }
+  60% {
+    transform: scale(1.15);
+    opacity: 0.8;
+    filter: brightness(2.5);
+  }
+  100% {
+    transform: scale(1.3);
+    opacity: 0;
+    filter: brightness(4) blur(8px);
+  }
+}
+
+.animate-egg-onboard-burst {
+  animation: egg-onboard-burst 1.2s ease-in-out forwards;
+}
+
+/* Screen flash on hatch */
+@keyframes onboard-screen-flash {
+  0% {
+    opacity: 0;
+  }
+  15% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-onboard-screen-flash {
+  animation: onboard-screen-flash 2s ease-out forwards;
+}
+
+/* Gentle continue prompt pulse */
+@keyframes onboard-continue-pulse {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.animate-onboard-continue-pulse {
+  animation: onboard-continue-pulse 2.5s ease-in-out infinite;
+}
+
+/* Slow rotating golden incandescence behind hatched blobbi */
+@keyframes onboard-golden-rotate {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  25% {
+    transform: rotate(90deg) scale(1.06);
+  }
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+  75% {
+    transform: rotate(270deg) scale(1.06);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+.animate-onboard-golden-rotate {
+  animation: onboard-golden-rotate 20s linear infinite;
+}
+
+/* Golden glow fade-in */
+@keyframes onboard-golden-fadein {
+  0% {
+    opacity: 0;
+    transform: scale(0.7);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-onboard-golden-fadein {
+  animation: onboard-golden-fadein 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+/* Reduced motion overrides for onboarding */
+@media (prefers-reduced-motion: reduce) {
+  .animate-egg-onboard-breathe,
+  .animate-onboard-glow-expand,
+  .animate-onboard-glow-linger,
+  .animate-onboard-text-reveal,
+  .animate-onboard-text-reveal-delay,
+  .animate-onboard-soft-fade-out,
+  .animate-onboard-soft-fade-in,
+  .animate-egg-onboard-entrance,
+  .animate-egg-onboard-shake-light,
+  .animate-egg-onboard-shake-medium,
+  .animate-egg-onboard-shake-heavy,
+  .animate-egg-onboard-burst,
+  .animate-onboard-screen-flash,
+  .animate-onboard-continue-pulse,
+  .animate-onboard-golden-rotate,
+  .animate-onboard-golden-fadein {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+    filter: none !important;
+  }
+}

src/blobbi/onboarding/components/BlobbiHatchingCeremony.tsx

@@ -0,0 +1,961 @@
+/**
+ * BlobbiHatchingCeremony - Immersive hatching experience for every new egg
+ *
+ * Flow:
+ *   1. Dark screen, egg silently created in background
+ *   2. Huge breathing egg appears. No text. No UI.
+ *   3. Click egg 4 times through crack stages with intensifying shakes
+ *   4. Final click -> egg bursts into light, actual hatch mutation fires
+ *   5. Flash clears -> hatched baby blobbi revealed center screen with glow/sparkles
+ *   6. Typewriter dialog appears below blobbi (click to complete line / advance)
+ *   7. Naming prompt, then ceremony complete
+ */
+
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import type { NostrEvent } from '@nostrify/nostrify';
+
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { toast } from '@/hooks/useToast';
+import { cn } from '@/lib/utils';
+
+import { BlobbiStageVisual } from '@/blobbi/ui/BlobbiStageVisual';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+
+import {
+  KIND_BLOBBI_STATE,
+  KIND_BLOBBONAUT_PROFILE,
+  INITIAL_BLOBBONAUT_COINS,
+  STAT_MAX,
+  buildBlobbonautTags,
+  updateBlobbonautTags,
+  updateBlobbiTags,
+  type BlobbonautProfile,
+  type BlobbiCompanion,
+} from '@/blobbi/core/lib/blobbi';
+
+import {
+  generateEggPreview,
+  previewToEventTags,
+  previewToBlobbiCompanion,
+  type BlobbiEggPreview,
+} from '../lib/blobbi-preview';
+
+// ─── Dialog Lines ─────────────────────────────────────────────────────────────
+
+const BIRTH_DIALOG: string[] = [
+  'Something stirs...',
+  'A tiny life has chosen you. It knows only warmth, and your presence.',
+];
+
+const NAMING_DIALOG = 'Every life deserves a name.\nWhat will you call this one?';
+
+// ─── Phase Machine ────────────────────────────────────────────────────────────
+
+type CeremonyPhase =
+  | 'loading'
+  | 'egg'
+  | 'crack_1'
+  | 'crack_2'
+  | 'crack_3'
+  | 'hatching'    // egg burst + hatch mutation
+  | 'reveal'      // flash clearing, baby blobbi fading in with glow
+  | 'dialog'      // typewriter dialog lines
+  | 'naming'
+  | 'complete';
+
+// ─── Typewriter Hook ──────────────────────────────────────────────────────────
+
+function useTypewriter(fullText: string, active: boolean, speed = 35) {
+  const [displayed, setDisplayed] = useState('');
+  const [done, setDone] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const indexRef = useRef(0);
+
+  // Reset when text changes
+  useEffect(() => {
+    setDisplayed('');
+    setDone(false);
+    indexRef.current = 0;
+  }, [fullText]);
+
+  // Run typewriter
+  useEffect(() => {
+    if (!active || done) return;
+
+    intervalRef.current = setInterval(() => {
+      indexRef.current++;
+      const next = fullText.slice(0, indexRef.current);
+      setDisplayed(next);
+      if (indexRef.current >= fullText.length) {
+        setDone(true);
+        if (intervalRef.current) clearInterval(intervalRef.current);
+      }
+    }, speed);
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [active, done, fullText, speed]);
+
+  const complete = useCallback(() => {
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    setDisplayed(fullText);
+    setDone(true);
+  }, [fullText]);
+
+  return { displayed, done, complete };
+}
+
+// Module-level guard: prevents duplicate egg creation if the component remounts
+// (e.g. React strict mode, parent re-render causing unmount/remount).
+// Tracks pubkeys that have already started setup in this browser session.
+const setupInFlightFor = new Set<string>();
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface BlobbiHatchingCeremonyProps {
+  profile: BlobbonautProfile | null;
+  updateProfileEvent: (event: NostrEvent) => void;
+  updateCompanionEvent: (event: NostrEvent) => void;
+  invalidateProfile: () => void;
+  invalidateCompanion: () => void;
+  setStoredSelectedD: (d: string) => void;
+  onComplete?: () => void;
+  /** If provided, skip egg creation and start from the cracking phase with this existing egg. */
+  existingCompanion?: BlobbiCompanion | null;
+  /** If true, only create the egg and skip the hatching ceremony. The egg stays an egg. */
+  eggOnly?: boolean;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function BlobbiHatchingCeremony({
+  profile,
+  updateProfileEvent,
+  updateCompanionEvent,
+  invalidateProfile,
+  invalidateCompanion,
+  setStoredSelectedD,
+  onComplete,
+  existingCompanion,
+  eggOnly = false,
+}: BlobbiHatchingCeremonyProps) {
+  const isExistingEgg = !!existingCompanion;
+  const { user } = useCurrentUser();
+  const { mutateAsync: publishEvent } = useNostrPublish();
+  const { data: authorData } = useAuthor(user?.pubkey);
+
+  // ── Core state ──
+  const [phase, setPhase] = useState<CeremonyPhase>('loading');
+  const [preview, setPreview] = useState<BlobbiEggPreview | null>(null);
+  const [name, setName] = useState(existingCompanion?.name ?? '');
+  const [isNaming, setIsNaming] = useState(false);
+  const [eggVisible, setEggVisible] = useState(false);
+
+  // Reveal phase state
+  const [blobbiVisible, setBlobbiVisible] = useState(false);
+  const [showFlash, setShowFlash] = useState(false);
+  const [, setShowRevealGlow] = useState(false);
+  const [fadeOut, setFadeOut] = useState(false);
+
+  // Dialog state
+  const [dialogLineIndex, setDialogLineIndex] = useState(0);
+  const [dialogActive, setDialogActive] = useState(false);
+  const [namingVisible, setNamingVisible] = useState(false);
+
+  // Refs
+  const setupAttempted = useRef(false);
+  const profileRef = useRef(profile);
+  profileRef.current = profile;
+  const previewRef = useRef(preview);
+  previewRef.current = preview;
+  const nameInputRef = useRef<HTMLInputElement>(null);
+  const eggContainerRef = useRef<HTMLDivElement>(null);
+  const entrancePlayed = useRef(false);
+  const eggTagsRef = useRef<string[][] | null>(null);
+
+  // ── Companion visuals ──
+  const eggCompanion = useMemo(
+    () => preview ? previewToBlobbiCompanion(preview) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preview?.d],
+  );
+
+  // Baby companion (same visual data but stage=baby)
+  const babyCompanion = useMemo((): BlobbiCompanion | null => {
+    if (!eggCompanion) return null;
+    return { ...eggCompanion, stage: 'baby', state: 'active' };
+  }, [eggCompanion]);
+
+  const eggColor = preview?.visualTraits.baseColor ?? '#f59e0b';
+
+  // ── Typewriter for current dialog line ──
+  const currentDialogText = phase === 'dialog' ? (BIRTH_DIALOG[dialogLineIndex] ?? '') : '';
+  const dialogTypewriter = useTypewriter(currentDialogText, dialogActive);
+
+  const namingTypewriter = useTypewriter(NAMING_DIALOG, namingVisible);
+
+  // ── Fast-path setup for existing eggs (no publishing needed) ──
+  useEffect(() => {
+    if (!isExistingEgg || setupAttempted.current || !existingCompanion) return;
+    setupAttempted.current = true;
+
+    // Build a minimal preview from the existing companion
+    const fakePreview: BlobbiEggPreview = {
+      d: existingCompanion.d,
+      petId: existingCompanion.d,
+      ownerPubkey: user?.pubkey ?? '',
+      name: existingCompanion.name,
+      stage: 'egg',
+      state: 'active',
+      seed: existingCompanion.seed ?? '',
+      stats: {
+        hunger: existingCompanion.stats.hunger ?? STAT_MAX,
+        happiness: existingCompanion.stats.happiness ?? STAT_MAX,
+        health: existingCompanion.stats.health ?? STAT_MAX,
+        hygiene: existingCompanion.stats.hygiene ?? STAT_MAX,
+        energy: existingCompanion.stats.energy ?? STAT_MAX,
+      },
+      visualTraits: existingCompanion.visualTraits,
+      createdAt: Math.floor(Date.now() / 1000),
+    };
+    setPreview(fakePreview);
+    previewRef.current = fakePreview;
+    eggTagsRef.current = existingCompanion.allTags;
+
+    setPhase('egg');
+    setTimeout(() => setEggVisible(true), 200);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isExistingEgg, existingCompanion?.d]);
+
+  // ── Silent setup: create profile + egg (new egg flow only) ──
+  useEffect(() => {
+    if (isExistingEgg) return; // Skip for existing eggs
+    if (setupAttempted.current || !user?.pubkey) return;
+    // Module-level guard: if another mount already started setup for this pubkey, skip
+    if (setupInFlightFor.has(user.pubkey)) return;
+    setupAttempted.current = true;
+    setupInFlightFor.add(user.pubkey);
+
+    const setup = async () => {
+      try {
+        const currentProfile = profileRef.current;
+        let latestProfileTags: string[][] | null = currentProfile?.allTags ?? null;
+
+        // 1. Create profile if needed
+        if (!currentProfile) {
+          const suggestedName =
+            authorData?.metadata?.display_name ||
+            authorData?.metadata?.name ||
+            'Blobbonaut';
+
+          const baseTags = buildBlobbonautTags(user.pubkey);
+          const tagsWithName = [
+            ...baseTags,
+            ['name', suggestedName],
+            ['coins', INITIAL_BLOBBONAUT_COINS.toString()],
+          ];
+
+          const profileEvent = await publishEvent({
+            kind: KIND_BLOBBONAUT_PROFILE,
+            content: '',
+            tags: tagsWithName,
+          });
+
+          updateProfileEvent(profileEvent);
+          invalidateProfile();
+          latestProfileTags = tagsWithName;
+        }
+
+        // 2. Generate and publish egg
+        const eggPreview = generateEggPreview(user.pubkey, 'Egg');
+        setPreview(eggPreview);
+        previewRef.current = eggPreview;
+
+        const eggTags = previewToEventTags(eggPreview);
+        eggTagsRef.current = eggTags;
+
+        const eggEvent = await publishEvent({
+          kind: KIND_BLOBBI_STATE,
+          content: 'A new Blobbi egg!',
+          tags: eggTags,
+          created_at: eggPreview.createdAt,
+        });
+
+        updateCompanionEvent(eggEvent);
+
+        // 3. Update profile with has[] entry
+        if (latestProfileTags) {
+          const existingHas = latestProfileTags
+            .filter(([k]) => k === 'has')
+            .map(([, v]) => v);
+          const newHas = [...existingHas, eggPreview.d];
+
+          const updatedTags = updateBlobbonautTags(latestProfileTags, {
+            has: newHas,
+          });
+
+          const updatedProfileEvent = await publishEvent({
+            kind: KIND_BLOBBONAUT_PROFILE,
+            content: currentProfile?.event.content ?? '',
+            tags: updatedTags,
+          });
+
+          updateProfileEvent(updatedProfileEvent);
+        }
+
+        setStoredSelectedD(eggPreview.d);
+        invalidateProfile();
+        invalidateCompanion();
+
+        setPhase('egg');
+        setTimeout(() => setEggVisible(true), 200);
+      } catch (error) {
+        console.error('[HatchingCeremony] Setup failed:', error);
+        toast({
+          title: 'Something went wrong',
+          description: 'Failed to set up your Blobbi. Please try again.',
+          variant: 'destructive',
+        });
+      } finally {
+        // Clear module-level guard so future adoptions can create new eggs
+        if (user?.pubkey) setupInFlightFor.delete(user.pubkey);
+      }
+    };
+
+    const timer = setTimeout(setup, 600);
+    return () => {
+      clearTimeout(timer);
+      // If the timer was cleared before setup ran, release the guard
+      if (user?.pubkey) setupInFlightFor.delete(user.pubkey);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.pubkey]);
+
+  useEffect(() => {
+    if (profile) profileRef.current = profile;
+  }, [profile]);
+
+  // eggOnly mode: auto-complete after the egg is shown (skip hatching)
+  useEffect(() => {
+    if (!eggOnly || !eggVisible) return;
+    const timer = setTimeout(() => {
+      setPhase('complete');
+      onComplete?.();
+    }, 1500);
+    return () => clearTimeout(timer);
+  }, [eggOnly, eggVisible, onComplete]);
+
+  // Play entrance animation once
+  useEffect(() => {
+    if (eggVisible && !entrancePlayed.current && eggContainerRef.current) {
+      entrancePlayed.current = true;
+      const el = eggContainerRef.current;
+      el.classList.add('animate-egg-onboard-entrance');
+      const onEnd = () => {
+        el.classList.remove('animate-egg-onboard-entrance');
+        el.removeEventListener('animationend', onEnd);
+      };
+      el.addEventListener('animationend', onEnd);
+    }
+  }, [eggVisible]);
+
+  // ── Shake (DOM-only, no re-render) ──
+  const triggerShake = useCallback((cls: string) => {
+    const el = eggContainerRef.current;
+    if (!el) return;
+    el.classList.remove(
+      'animate-egg-onboard-shake-light',
+      'animate-egg-onboard-shake-medium',
+      'animate-egg-onboard-shake-heavy',
+    );
+    void el.offsetWidth;
+    el.classList.add(cls);
+  }, []);
+
+  // ── Execute the actual hatch: egg -> baby ──
+  const executeHatch = useCallback(async () => {
+    const tags = eggTagsRef.current;
+    if (!tags) return;
+
+    const now = Math.floor(Date.now() / 1000);
+    const nowStr = now.toString();
+
+    const babyTags = updateBlobbiTags(tags, {
+      stage: 'baby',
+      state: 'active',
+      hunger: STAT_MAX.toString(),
+      happiness: STAT_MAX.toString(),
+      health: STAT_MAX.toString(),
+      hygiene: STAT_MAX.toString(),
+      energy: STAT_MAX.toString(),
+      last_interaction: nowStr,
+      last_decay_at: nowStr,
+    });
+
+    const babyName = previewRef.current?.name ?? 'Egg';
+    const event = await publishEvent({
+      kind: KIND_BLOBBI_STATE,
+      content: `${babyName} is a baby Blobbi.`,
+      tags: babyTags,
+    });
+
+    eggTagsRef.current = babyTags;
+    updateCompanionEvent(event);
+    invalidateCompanion();
+  }, [publishEvent, updateCompanionEvent, invalidateCompanion]);
+
+  // ── Egg click ──
+  const handleEggClick = useCallback(() => {
+    if (phase === 'egg') {
+      triggerShake('animate-egg-onboard-shake-light');
+      setPhase('crack_1');
+    } else if (phase === 'crack_1') {
+      triggerShake('animate-egg-onboard-shake-medium');
+      setPhase('crack_2');
+    } else if (phase === 'crack_2') {
+      triggerShake('animate-egg-onboard-shake-heavy');
+      setPhase('crack_3');
+    } else if (phase === 'crack_3') {
+      // Final click -> hatch!
+      setPhase('hatching');
+      setShowFlash(true);
+
+      // Fire the actual hatch mutation
+      executeHatch().catch(console.error);
+
+      // After flash, reveal the baby
+      setTimeout(() => {
+        setShowFlash(false);
+        setShowRevealGlow(true);
+        setPhase('reveal');
+
+        // Fade in blobbi
+        setTimeout(() => setBlobbiVisible(true), 400);
+
+        // After blobbi settles, start dialog
+        setTimeout(() => {
+          setPhase('dialog');
+          setDialogLineIndex(0);
+          setDialogActive(true);
+        }, 2200);
+      }, 1400);
+    }
+  }, [phase, triggerShake, executeHatch]);
+
+  // ── Dialog click: complete line or advance ──
+  const handleDialogClick = useCallback(() => {
+    if (phase !== 'dialog') return;
+
+    if (!dialogTypewriter.done) {
+      // Complete the current line instantly
+      dialogTypewriter.complete();
+      return;
+    }
+
+    // Advance to next line
+    const nextIndex = dialogLineIndex + 1;
+    if (nextIndex < BIRTH_DIALOG.length) {
+      setDialogActive(false);
+      setDialogLineIndex(nextIndex);
+      // Small pause before next line starts
+      setTimeout(() => setDialogActive(true), 150);
+    } else {
+      // All lines done -> naming
+      setDialogActive(false);
+      setTimeout(() => {
+        setPhase('naming');
+        setTimeout(() => {
+          setNamingVisible(true);
+          setTimeout(() => nameInputRef.current?.focus(), 600);
+        }, 200);
+      }, 400);
+    }
+  }, [phase, dialogTypewriter, dialogLineIndex]);
+
+  // ── Complete ceremony ──
+  const completeCeremony = useCallback(async (finalName: string) => {
+    try {
+      // Update egg/baby name if changed
+      const currentTags = eggTagsRef.current;
+      if (currentTags && finalName !== (previewRef.current?.name ?? 'Egg')) {
+        const namedTags = updateBlobbiTags(currentTags, { name: finalName });
+        const event = await publishEvent({
+          kind: KIND_BLOBBI_STATE,
+          content: `${finalName} is a baby Blobbi.`,
+          tags: namedTags,
+        });
+        updateCompanionEvent(event);
+      }
+
+      // Mark onboarding done
+      const currentProfile = profileRef.current;
+      if (currentProfile) {
+        const updatedTags = updateBlobbonautTags(currentProfile.allTags, {
+          blobbi_onboarding_done: 'true',
+        });
+        const profileEvent = await publishEvent({
+          kind: KIND_BLOBBONAUT_PROFILE,
+          content: currentProfile.event.content,
+          tags: updatedTags,
+        });
+        updateProfileEvent(profileEvent);
+      }
+
+      invalidateProfile();
+      invalidateCompanion();
+    } catch (error) {
+      console.error('[HatchingCeremony] Failed to persist completion:', error);
+    }
+  }, [publishEvent, updateCompanionEvent, updateProfileEvent, invalidateProfile, invalidateCompanion]);
+
+  // ── Naming submit ──
+  const handleNameSubmit = useCallback(async () => {
+    if (isNaming || !name.trim()) return;
+    setIsNaming(true);
+
+    try {
+      await completeCeremony(name.trim());
+      setNamingVisible(false);
+      // Fade to white, then complete
+      setTimeout(() => {
+        setFadeOut(true);
+        setTimeout(() => {
+          setPhase('complete');
+          onComplete?.();
+        }, 2200);
+      }, 600);
+    } catch (error) {
+      console.error('[HatchingCeremony] Naming failed:', error);
+      toast({
+        title: 'Failed to save name',
+        description: 'Your Blobbi was created, but the name could not be saved.',
+        variant: 'destructive',
+      });
+      setFadeOut(true);
+      setTimeout(() => {
+        setPhase('complete');
+        onComplete?.();
+      }, 2200);
+    } finally {
+      setIsNaming(false);
+    }
+  }, [name, isNaming, completeCeremony, onComplete]);
+
+  // ── Tour visual state for EggGraphic crack rendering ──
+  const tourVisualState = useMemo(() => {
+    switch (phase) {
+      case 'crack_1': return 'crack_stage_1' as const;
+      case 'crack_2': return 'crack_stage_2' as const;
+      case 'crack_3': return 'crack_stage_3' as const;
+      case 'hatching': return 'opening' as const;
+      default: return 'idle' as const;
+    }
+  }, [phase]);
+
+  // ── Render ──
+
+  const isEggPhase = phase === 'egg' || phase === 'crack_1' || phase === 'crack_2' || phase === 'crack_3';
+  const isHatching = phase === 'hatching';
+  const showBaby = phase === 'reveal' || phase === 'dialog' || phase === 'naming';
+
+  if (phase === 'loading') {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center"
+        style={{ background: 'radial-gradient(ellipse at center, #0a1a2a 0%, #081520 50%, #060f18 100%)' }}
+      >
+        <div
+          className="absolute size-32 rounded-full opacity-20 animate-pulse"
+          style={{ background: `radial-gradient(circle, ${eggColor}40 0%, transparent 70%)` }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 overflow-hidden select-none"
+      style={{
+        background: showBaby
+          ? 'radial-gradient(ellipse at 50% 45%, rgb(60,140,180) 0%, rgb(70,160,195) 25%, rgb(85,175,205) 50%, rgb(100,190,210) 75%, rgb(115,195,195) 100%)'
+          : 'radial-gradient(ellipse at center, #0a1a2a 0%, #081520 50%, #060f18 100%)',
+        transition: 'background 2s ease-out',
+      }}
+      onClick={phase === 'dialog' ? handleDialogClick : undefined}
+    >
+      {/* ── Ambient background glow (egg phase only) ── */}
+      {!showBaby && (
+        <div
+          className="absolute inset-0 transition-opacity"
+          style={{
+            transitionDuration: '3000ms',
+            background: `radial-gradient(ellipse at 50% 50%, ${eggColor}30 0%, transparent 60%)`,
+            opacity: (isEggPhase || isHatching) ? 0.07 : 0.05,
+          }}
+        />
+      )}
+
+      {/* ── Floating particles (egg phase) ── */}
+      {isEggPhase && (
+        <div className="absolute inset-0 pointer-events-none overflow-hidden">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              className="absolute rounded-full"
+              style={{
+                width: 2 + (i % 3),
+                height: 2 + (i % 3),
+                left: `${20 + (i * 12) % 60}%`,
+                bottom: '40%',
+                backgroundColor: `${eggColor}40`,
+                animation: `onboard-particle-rise ${4 + i * 0.7}s ease-out ${i * 0.8}s infinite`,
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* ── The Egg ── */}
+      {(isEggPhase || isHatching) && eggCompanion && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div
+            ref={eggContainerRef}
+            className={cn(
+              'cursor-pointer relative',
+              eggVisible ? '' : 'opacity-0',
+              eggVisible && isEggPhase && 'animate-egg-onboard-breathe',
+              isHatching && 'animate-egg-onboard-burst',
+            )}
+            onClick={isEggPhase ? handleEggClick : undefined}
+          >
+            <div
+              className="absolute -inset-12 rounded-full blur-2xl transition-opacity duration-1000"
+              style={{
+                background: `radial-gradient(circle, ${eggColor}50 0%, transparent 70%)`,
+                opacity: phase === 'crack_3' ? 0.5 : phase === 'crack_2' ? 0.35 : phase === 'crack_1' ? 0.25 : 0.15,
+              }}
+            />
+            <BlobbiStageVisual
+              companion={eggCompanion}
+              size="lg"
+              animated
+              className="size-56 sm:size-64 md:size-72"
+              tourVisualState={tourVisualState}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* ── Screen flash ── */}
+      {showFlash && (
+        <div
+          className="absolute inset-0 bg-white animate-onboard-screen-flash pointer-events-none"
+          style={{ zIndex: 80 }}
+        />
+      )}
+
+      {/* ── Hatched baby blobbi with golden incandescence ── */}
+      {showBaby && babyCompanion && (
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none"
+          style={{ paddingBottom: '18%' }}
+        >
+          {/* Rotating golden incandescence */}
+          <div className={cn(
+            'absolute animate-onboard-golden-fadein',
+            blobbiVisible ? '' : 'opacity-0',
+          )}>
+            <div
+              className="animate-onboard-golden-rotate"
+              style={{
+                width: 900,
+                height: 900,
+                background: `conic-gradient(
+                  from 0deg,
+                  rgba(255, 250, 230, 0.18) 0deg,
+                  rgba(255, 245, 210, 0.50) 50deg,
+                  rgba(255, 250, 235, 0.22) 100deg,
+                  rgba(255, 248, 220, 0.15) 150deg,
+                  rgba(255, 245, 210, 0.48) 210deg,
+                  rgba(255, 250, 230, 0.20) 270deg,
+                  rgba(255, 248, 220, 0.15) 320deg,
+                  rgba(255, 250, 230, 0.18) 360deg
+                )`,
+                borderRadius: '50%',
+                filter: 'blur(30px)',
+              }}
+            />
+          </div>
+
+          {/* Bright white-gold shine directly behind blobbi */}
+          <div
+            className={cn(
+              'absolute rounded-full transition-opacity duration-1000',
+              blobbiVisible ? 'opacity-100' : 'opacity-0',
+            )}
+            style={{
+              width: 320,
+              height: 320,
+              background: 'radial-gradient(circle, rgba(255,255,245,0.70) 0%, rgba(255,250,225,0.30) 40%, transparent 70%)',
+            }}
+          />
+
+          {/* Wider golden halo */}
+          <div
+            className={cn(
+              'absolute rounded-full transition-opacity [transition-duration:2000ms]',
+              blobbiVisible ? 'opacity-100' : 'opacity-0',
+            )}
+            style={{
+              width: 700,
+              height: 700,
+              background: 'radial-gradient(circle, rgba(255, 248, 210, 0.40) 0%, rgba(255, 240, 190, 0.18) 40%, transparent 65%)',
+              filter: 'blur(15px)',
+            }}
+          />
+
+          {/* ── Sparkles everywhere ── */}
+
+          {/* Inner ring - bright twinkling sparkles */}
+          {Array.from({ length: 20 }).map((_, i) => {
+            const angle = (i / 20) * Math.PI * 2;
+            const r = 80 + (i % 4) * 35;
+            const size = 4 + (i % 3) * 3;
+            return (
+              <div
+                key={`inner-${i}`}
+                className="absolute"
+                style={{
+                  width: size,
+                  height: size,
+                  left: `calc(50% + ${Math.cos(angle) * r}px - ${size / 2}px)`,
+                  top: `calc(50% + ${Math.sin(angle) * r}px - ${size / 2}px)`,
+                  borderRadius: '50%',
+                  background: i % 2 === 0
+                    ? 'radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.4) 40%, transparent 70%)'
+                    : 'radial-gradient(circle, rgba(255,240,130,1) 0%, rgba(255,220,80,0.3) 50%, transparent 70%)',
+                  animation: `onboard-sparkle-twinkle ${1.5 + (i % 6) * 0.5}s ease-in-out ${i * 0.15}s infinite`,
+                }}
+              />
+            );
+          })}
+
+          {/* Outer ring - larger, slower sparkles */}
+          {Array.from({ length: 16 }).map((_, i) => {
+            const angle = (i / 16) * Math.PI * 2 + 0.3;
+            const r = 170 + (i % 3) * 50;
+            const size = 5 + (i % 4) * 3;
+            return (
+              <div
+                key={`outer-${i}`}
+                className="absolute"
+                style={{
+                  width: size,
+                  height: size,
+                  left: `calc(50% + ${Math.cos(angle) * r}px - ${size / 2}px)`,
+                  top: `calc(50% + ${Math.sin(angle) * r}px - ${size / 2}px)`,
+                  borderRadius: '50%',
+                  background: i % 3 === 0
+                    ? 'radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 60%)'
+                    : 'radial-gradient(circle, rgba(255,235,120,0.85) 0%, transparent 60%)',
+                  animation: `onboard-sparkle-twinkle ${2.5 + (i % 5) * 0.7}s ease-in-out ${i * 0.25}s infinite`,
+                }}
+              />
+            );
+          })}
+
+          {/* Scattered wide-field sparkles */}
+          {Array.from({ length: 24 }).map((_, i) => {
+            const x = (Math.sin(i * 2.7 + 1.3) * 0.5 + 0.5) * 80 + 10;
+            const y = (Math.cos(i * 3.1 + 0.7) * 0.5 + 0.5) * 70 + 10;
+            const size = 3 + (i % 3) * 2;
+            return (
+              <div
+                key={`field-${i}`}
+                className="absolute"
+                style={{
+                  width: size,
+                  height: size,
+                  left: `${x}%`,
+                  top: `${y}%`,
+                  borderRadius: '50%',
+                  background: i % 4 === 0
+                    ? 'radial-gradient(circle, rgba(255,255,255,0.95) 0%, transparent 70%)'
+                    : 'radial-gradient(circle, rgba(255,240,160,0.8) 0%, transparent 70%)',
+                  animation: `onboard-sparkle-twinkle ${2 + (i % 7) * 0.6}s ease-in-out ${i * 0.18}s infinite`,
+                }}
+              />
+            );
+          })}
+
+          {/* Drifting light motes rising from below */}
+          {Array.from({ length: 10 }).map((_, i) => {
+            const x = (Math.sin(i * 1.9) * 0.5 + 0.5) * 70 + 15;
+            return (
+              <div
+                key={`drift-${i}`}
+                className="absolute"
+                style={{
+                  width: 5 + (i % 3) * 3,
+                  height: 5 + (i % 3) * 3,
+                  left: `${x}%`,
+                  bottom: '20%',
+                  borderRadius: '50%',
+                  background: 'radial-gradient(circle, rgba(255,250,200,0.9) 0%, rgba(255,230,120,0.3) 50%, transparent 100%)',
+                  animation: `onboard-sparkle-drift ${4 + i * 0.5}s ease-out ${i * 0.5}s infinite`,
+                }}
+              />
+            );
+          })}
+
+          {/* The baby blobbi */}
+          <div className={cn(
+            'relative transition-opacity duration-1000',
+            blobbiVisible ? 'opacity-100' : 'opacity-0',
+          )}>
+            <BlobbiStageVisual
+              companion={babyCompanion}
+              size="lg"
+              animated
+              className="size-[30rem] sm:size-[36rem] md:size-[44rem]"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* ── Dialog text (no box, blur behind) ── */}
+      {phase === 'dialog' && (
+        <div className="absolute inset-x-0 bottom-0 flex justify-center pb-28 sm:pb-36 px-8">
+          <div className="relative max-w-md w-full text-center">
+            {/* Soft feathered backdrop with shadow */}
+            <div
+              className="absolute -inset-32"
+              style={{
+                background: 'radial-gradient(ellipse at center, rgba(0,30,50,0.40) 0%, rgba(0,30,50,0.18) 35%, transparent 65%)',
+                backdropFilter: 'blur(24px)',
+                WebkitBackdropFilter: 'blur(24px)',
+                mask: 'radial-gradient(ellipse at center, black 25%, transparent 65%)',
+                WebkitMask: 'radial-gradient(ellipse at center, black 25%, transparent 65%)',
+              }}
+            />
+
+            {/* Speaker */}
+            <div className="relative">
+              <p className="text-[11px] text-white/50 tracking-[0.2em] uppercase mb-3">
+                ???
+              </p>
+
+              {/* Typewriter text */}
+              <p className="text-base sm:text-lg text-white leading-relaxed font-light min-h-[3em]">
+                {dialogTypewriter.displayed}
+                {!dialogTypewriter.done && (
+                  <span className="inline-block w-[2px] h-[1em] bg-white/50 ml-0.5 animate-pulse align-text-bottom" />
+                )}
+              </p>
+
+              {/* Advance indicator */}
+              {dialogTypewriter.done && (
+                <div className="mt-4 animate-onboard-continue-pulse">
+                  <span className="text-xs text-white/30">&#9660;</span>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Naming ── */}
+      {phase === 'naming' && (
+        <div className="absolute inset-x-0 bottom-0 flex justify-center pb-28 sm:pb-36 px-8">
+          <div className={cn(
+            'relative max-w-md w-full text-center',
+            namingVisible ? 'animate-onboard-soft-fade-in' : 'opacity-0',
+          )}>
+            {/* Soft feathered backdrop with shadow */}
+            <div
+              className="absolute -inset-32"
+              style={{
+                background: 'radial-gradient(ellipse at center, rgba(0,30,50,0.40) 0%, rgba(0,30,50,0.18) 35%, transparent 65%)',
+                backdropFilter: 'blur(24px)',
+                WebkitBackdropFilter: 'blur(24px)',
+                mask: 'radial-gradient(ellipse at center, black 25%, transparent 65%)',
+                WebkitMask: 'radial-gradient(ellipse at center, black 25%, transparent 65%)',
+              }}
+            />
+
+            <div className="relative">
+              {/* Speaker */}
+              <p className="text-[11px] text-white/50 tracking-[0.2em] uppercase mb-3">
+                ???
+              </p>
+
+              {/* Typewriter question */}
+              <p className="text-base sm:text-lg text-white/85 leading-relaxed font-light mb-6 min-h-[1.5em] whitespace-pre-line">
+                {namingTypewriter.displayed}
+                {!namingTypewriter.done && (
+                  <span className="inline-block w-[2px] h-[1em] bg-white/50 ml-0.5 animate-pulse align-text-bottom" />
+                )}
+              </p>
+
+              {/* Input + confirm (appear after typewriter done) */}
+              {namingTypewriter.done && (
+                <div className="space-y-3 animate-onboard-soft-fade-in">
+                  <Input
+                    ref={nameInputRef}
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="..."
+                    maxLength={32}
+                    autoFocus
+                    className={cn(
+                      'text-center text-lg font-light h-12',
+                      'bg-white/10 border-transparent text-white placeholder:text-white/30',
+                      'focus:bg-white/[0.25] focus:border-transparent focus:ring-0 focus:outline-none',
+                      'focus-visible:ring-0 focus-visible:ring-offset-0',
+                      'focus:shadow-[0_0_15px_rgba(255,255,255,0.15),0_0_40px_rgba(255,250,230,0.08)]',
+                      'transition-all duration-300',
+                      'rounded-full transition-shadow duration-500',
+                    )}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && name.trim()) handleNameSubmit();
+                    }}
+                  />
+
+                  {name.trim() && (
+                    <Button
+                      onClick={handleNameSubmit}
+                      disabled={isNaming}
+                      className={cn(
+                        'max-w-[12rem] mx-auto h-10 px-8 text-sm font-light tracking-wide',
+                        'bg-white/15 hover:bg-white/22 text-white/80 border-transparent',
+                        'rounded-full transition-all duration-300',
+                        'focus-visible:ring-0 focus-visible:ring-offset-0',
+                      )}
+                      variant="ghost"
+                    >
+                      That&apos;s the one.
+                    </Button>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Fade to white on completion ── */}
+      {fadeOut && (
+        <div
+          className="absolute inset-0 bg-white pointer-events-none"
+          style={{
+            zIndex: 90,
+            animation: 'blobbi-fade-to-white 2s ease-in forwards',
+          }}
+        />
+      )}
+    </div>
+  );
+}

src/blobbi/onboarding/components/BlobbiOnboardingFlow.tsx

@@ -1,32 +1,19 @@
 /**
- * BlobbiOnboardingFlow - Main component that orchestrates the onboarding steps
- * 
- * This component renders the appropriate onboarding step based on the user's
- * actual profile state. The initial step is derived from whether the profile
- * exists - not hardcoded.
- * 
- * MODES:
- * 1. Full onboarding (default): Auto profile creation → Adoption question → Preview
- * 2. Adoption only (adoptionOnly=true): Skip directly to Preview for existing profiles
- * 
- * IMPORTANT: This component should only be rendered when:
- * - User has no profile (auto-creates profile using kind 0 name)
- * - User has profile but no pets (shows adoption)
- * - User wants to adopt another Blobbi (adoptionOnly mode)
- * 
- * Profile creation is now automatic - no manual name entry step is needed.
+ * BlobbiOnboardingFlow - Immersive hatching ceremony for every new Blobbi
+ *
+ * Every new egg goes through the hatching ceremony - whether it's a user's
+ * first Blobbi or their tenth. The ceremony creates the egg silently in the
+ * background and presents a wordless, emotional hatching experience.
+ *
+ * The `adoptionOnly` prop is accepted for API compatibility but no longer
+ * changes the flow - every egg gets the full ceremony.
  */
 
-import { useState } from 'react';
 import type { NostrEvent } from '@nostrify/nostrify';
 
-import { useBlobbiOnboarding } from '../hooks/useBlobbiOnboarding';
-import { BlobbiAdoptionStep } from './BlobbiAdoptionStep';
-import { BlobbiEggPreviewCard } from './BlobbiEggPreviewCard';
-import { BlobbiAdoptionConfirmDialog } from './BlobbiAdoptionConfirmDialog';
-import { Loader2 } from 'lucide-react';
+import { BlobbiHatchingCeremony } from './BlobbiHatchingCeremony';
 
-import type { BlobbonautProfile } from '@/blobbi/core/lib/blobbi';
+import type { BlobbonautProfile, BlobbiCompanion } from '@/blobbi/core/lib/blobbi';
 
 interface BlobbiOnboardingFlowProps {
   /** Current profile (null if doesn't exist) */
@@ -43,9 +30,11 @@ interface BlobbiOnboardingFlowProps {
   setStoredSelectedD: (d: string) => void;
   /** Called when onboarding is complete */
   onComplete?: () => void;
-  /** 
-   * If true, skip profile creation and adoption question, go directly to preview.
-   * Use this for "Adopt another Blobbi" flow for existing users.
+  /** If provided, skip egg creation and use this existing egg for the ceremony. */
+  existingCompanion?: BlobbiCompanion | null;
+  /**
+   * Accepted for API compatibility. Every new egg goes through the ceremony.
+   * @deprecated No longer changes the flow.
    */
   adoptionOnly?: boolean;
 }
@@ -58,98 +47,20 @@ export function BlobbiOnboardingFlow({
   invalidateCompanion,
   setStoredSelectedD,
   onComplete,
-  adoptionOnly = false,
+  existingCompanion,
+  adoptionOnly,
 }: BlobbiOnboardingFlowProps) {
-  const [showAdoptConfirmDialog, setShowAdoptConfirmDialog] = useState(false);
-  
-  const {
-    state,
-    actions,
-    coins,
-  } = useBlobbiOnboarding({
-    profile,
-    updateProfileEvent,
-    updateCompanionEvent,
-    invalidateProfile,
-    invalidateCompanion,
-    setStoredSelectedD,
-    onComplete,
-    adoptionOnly,
-  });
-  
-  // Debug logging
-  console.log('[BlobbiOnboardingFlow] Rendering:', {
-    hasProfile: !!profile,
-    profileName: profile?.name,
-    step: state.step,
-    hasPreview: !!state.preview,
-    adoptionOnly,
-  });
-  
-  // Handle adopt button click - show confirmation dialog
-  const handleAdoptClick = () => {
-    setShowAdoptConfirmDialog(true);
-  };
-  
-  // Handle confirm adoption
-  const handleConfirmAdopt = async () => {
-    await actions.adoptPreview();
-    setShowAdoptConfirmDialog(false);
-  };
-  
-  // ─── Step: Auto Profile Creation ──────────────────────────────────────────────
-  // Shows a loading state while profile is being auto-created
-  if (state.step === 'creating-profile') {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-[300px] gap-4 p-8">
-        <Loader2 className="size-10 text-primary animate-spin" />
-        <p className="text-muted-foreground text-center">
-          Setting up your profile...
-        </p>
-      </div>
-    );
-  }
-  
-  // ─── Step: Adoption Question ──────────────────────────────────────────────────
-  // Shown when profile exists but user has no pets yet
-  if (state.step === 'adoption-question') {
-    return (
-      <BlobbiAdoptionStep
-        blobbonautName={state.blobbonautName || profile?.name}
-        onStartAdoption={actions.startAdoptionPreview}
-      />
-    );
-  }
-  
-  // ─── Step: Egg Preview ────────────────────────────────────────────────────────
-  // Shown when user is previewing/choosing an egg to adopt
-  if (state.step === 'preview' && state.preview) {
-    return (
-      <>
-        <BlobbiEggPreviewCard
-          preview={state.preview}
-          coins={coins}
-          isFirstPreview={state.isFirstPreview}
-          isProcessing={state.isProcessing}
-          actionInProgress={state.actionInProgress === 'reroll' ? 'reroll' : state.actionInProgress === 'adopt' ? 'adopt' : null}
-          onReroll={actions.rerollPreview}
-          onAdopt={handleAdoptClick}
-          onNameChange={actions.setPreviewName}
-        />
-        
-        <BlobbiAdoptionConfirmDialog
-          open={showAdoptConfirmDialog}
-          onOpenChange={setShowAdoptConfirmDialog}
-          preview={state.preview}
-          coins={coins}
-          isAdopting={state.isProcessing && state.actionInProgress === 'adopt'}
-          onConfirm={handleConfirmAdopt}
-        />
-      </>
-    );
-  }
-  
-  // Fallback (shouldn't happen if parent logic is correct)
-  console.warn('[BlobbiOnboardingFlow] Unexpected state - no matching step');
-  return null;
+  return (
+    <BlobbiHatchingCeremony
+      profile={profile}
+      updateProfileEvent={updateProfileEvent}
+      updateCompanionEvent={updateCompanionEvent}
+      invalidateProfile={invalidateProfile}
+      invalidateCompanion={invalidateCompanion}
+      setStoredSelectedD={setStoredSelectedD}
+      onComplete={onComplete}
+      existingCompanion={existingCompanion}
+      eggOnly={adoptionOnly}
+    />
+  );
 }

src/blobbi/onboarding/hooks/useBlobbiOnboarding.ts

@@ -376,7 +376,7 @@ export function useBlobbiOnboarding({
       
       const profileEvent = await publishEvent({
         kind: KIND_BLOBBONAUT_PROFILE,
-        content: '',
+        content: profile.event.content,
         tags: updatedTags,
       });
       
@@ -456,22 +456,25 @@ export function useBlobbiOnboarding({
       
       updateCompanionEvent(eggEvent);
       
-      // 2. Update profile: deduct coins, add to has, set current_companion
+      // 2. Update profile: deduct coins, add to has list
+      // NOTE: We do NOT set current_companion here because the adopted Blobbi
+      // is still an egg. The companion mechanic only becomes available after hatching.
+      // Eggs should never be auto-assigned as the floating companion.
+      // NOTE: blobbi_onboarding_done is NOT set here — adoption alone does not
+      // complete onboarding. It is set when the first-hatch tour finishes.
       const newCoins = coins - BLOBBI_ADOPTION_COST;
       const newHas = [...profile.has, preview.d];
       
       const profileUpdates: Record<string, string | string[]> = {
         coins: newCoins.toString(),
         has: newHas,
-        current_companion: preview.d,
-        onboarding_done: 'true',
       };
       
       const updatedProfileTags = updateBlobbonautTags(profile.allTags, profileUpdates);
       
       const profileEvent = await publishEvent({
         kind: KIND_BLOBBONAUT_PROFILE,
-        content: '',
+        content: profile.event.content,
         tags: updatedProfileTags,
       });
       

src/blobbi/onboarding/index.ts

@@ -1,19 +1,15 @@
 /**
  * Blobbi Onboarding Module
- * 
- * Provides components and hooks for the Blobbi onboarding flow:
- * 1. Auto profile creation (using kind 0 name)
- * 2. Adoption question
- * 3. Egg preview with reroll/adopt
+ *
+ * Every new egg goes through the immersive hatching ceremony:
+ * dark screen, huge egg, click-to-hatch, sentimental birth reveal, naming.
  */
 
 // Components
-export { BlobbiAdoptionStep } from './components/BlobbiAdoptionStep';
-export { BlobbiEggPreviewCard } from './components/BlobbiEggPreviewCard';
-export { BlobbiAdoptionConfirmDialog } from './components/BlobbiAdoptionConfirmDialog';
 export { BlobbiOnboardingFlow } from './components/BlobbiOnboardingFlow';
+export { BlobbiHatchingCeremony } from './components/BlobbiHatchingCeremony';
 
-// Hooks
+// Hooks (used internally; kept exported for potential external use)
 export { useBlobbiOnboarding } from './hooks/useBlobbiOnboarding';
 export type {
   OnboardingStep,

src/blobbi/rooms/components/BlobbiCareRoom.tsx

@@ -0,0 +1,137 @@
+// src/blobbi/rooms/components/BlobbiCareRoom.tsx
+
+/**
+ * BlobbiCareRoom — Hygiene, care, and medicine room.
+ *
+ * Side actions depend on the currently focused carousel item:
+ * - Hygiene focused: Towel (left) + Shower (right)
+ * - Medicine focused: Treat (left) + spacer (right)
+ *
+ * Both left and right slots always render the same fixed width
+ * so the bottom bar never shifts when switching item types.
+ */
+
+import { useMemo, useState, useCallback } from 'react';
+import { ShowerHead, Candy } from 'lucide-react';
+
+import { getLiveShopItems } from '@/blobbi/shop/lib/blobbi-shop-items';
+import type { BlobbiRoomContext, RoomPoopState } from '../lib/room-types';
+import { ROOM_BOTTOM_BAR_CLASS } from '../lib/room-layout';
+import { BlobbiRoomHero } from './BlobbiRoomHero';
+import { RoomActionButton } from './RoomActionButton';
+import { ItemCarousel, type CarouselEntry } from './ItemCarousel';
+
+interface BlobbiCareRoomProps {
+  ctx: BlobbiRoomContext;
+  poopState: RoomPoopState;
+}
+
+export function BlobbiCareRoom({ ctx }: BlobbiCareRoomProps) {
+  const {
+    isUsingItem,
+    usingItemId,
+    handleUseItemFromTab,
+    isPublishing,
+    actionInProgress,
+    isActiveFloatingCompanion,
+  } = ctx;
+
+  const hygieneItems = useMemo(() =>
+    getLiveShopItems().filter(i => i.type === 'hygiene'),
+  []);
+
+  const isDisabled = isPublishing || actionInProgress !== null || isUsingItem;
+  const towelItem = hygieneItems.find(i => i.id === 'hyg_towel');
+
+  // Carousel: hygiene (except towel) + medicine, each tagged with meta
+  const carouselEntries = useMemo<CarouselEntry[]>(() => {
+    const hygiene = getLiveShopItems()
+      .filter(i => i.type === 'hygiene' && i.id !== 'hyg_towel')
+      .map(i => ({ id: i.id, icon: <span>{i.icon}</span>, label: i.name, meta: 'hygiene' }));
+    const medicine = getLiveShopItems()
+      .filter(i => i.type === 'medicine')
+      .map(i => ({ id: i.id, icon: <span>{i.icon}</span>, label: i.name, meta: 'medicine' }));
+    return [...hygiene, ...medicine];
+  }, []);
+
+  // Track the type of the currently focused carousel item
+  const [focusedMeta, setFocusedMeta] = useState<string>(
+    carouselEntries[0]?.meta ?? 'hygiene',
+  );
+
+  const handleFocusChange = useCallback((entry: CarouselEntry) => {
+    setFocusedMeta(entry.meta ?? 'hygiene');
+  }, []);
+
+  const isHygieneFocused = focusedMeta === 'hygiene';
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <BlobbiRoomHero ctx={ctx} className="flex-1 min-h-0" />
+
+      {!isActiveFloatingCompanion && (
+        <div className={ROOM_BOTTOM_BAR_CLASS}>
+          <div className="flex items-center justify-between gap-1 sm:gap-3">
+            {/* Left slot — always same width (button or spacer) */}
+            {isHygieneFocused ? (
+              towelItem ? (
+                <RoomActionButton
+                  icon={<span className="text-2xl sm:text-3xl">{towelItem.icon}</span>}
+                  label="Towel"
+                  color="text-cyan-500"
+                  glowHex="#06b6d4"
+                  onClick={() => handleUseItemFromTab(towelItem.id)}
+                  disabled={isDisabled}
+                  loading={isUsingItem && usingItemId === towelItem.id}
+                />
+              ) : (
+                <div className="w-14 sm:w-20 shrink-0" />
+              )
+            ) : (
+              <RoomActionButton
+                icon={<Candy className="size-7 sm:size-9" />}
+                label="Treat"
+                color="text-pink-400"
+                glowHex="#f472b6"
+                onClick={() => {
+                  // Comfort treat — use a small food item as a reward after medicine
+                  const treat = getLiveShopItems().find(i => i.type === 'food');
+                  if (treat) handleUseItemFromTab(treat.id);
+                }}
+                disabled={isDisabled}
+              />
+            )}
+
+            {/* Center carousel */}
+            <div className="flex-1 min-w-0 flex justify-center">
+              <ItemCarousel
+                items={carouselEntries}
+                onUse={handleUseItemFromTab}
+                activeItemId={isUsingItem ? usingItemId : null}
+                disabled={isDisabled}
+                onFocusChange={handleFocusChange}
+              />
+            </div>
+
+            {/* Right slot — always same width (button or spacer) */}
+            {isHygieneFocused ? (
+              <RoomActionButton
+                icon={<ShowerHead className="size-7 sm:size-9" />}
+                label="Shower"
+                color="text-blue-500"
+                glowHex="#3b82f6"
+                onClick={() => {
+                  const shampoo = hygieneItems.find(i => i.id === 'hyg_shampoo');
+                  if (shampoo) handleUseItemFromTab(shampoo.id);
+                }}
+                disabled={isDisabled}
+              />
+            ) : (
+              <div className="w-14 sm:w-20 shrink-0" />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/blobbi/rooms/components/BlobbiClosetRoom.tsx

@@ -0,0 +1,37 @@
+// src/blobbi/rooms/components/BlobbiClosetRoom.tsx
+
+/**
+ * BlobbiClosetRoom — Placeholder room for wardrobe / accessories.
+ *
+ * Uses the same bottom bar structure as other rooms for visual consistency,
+ * with a centered placeholder message.
+ */
+
+import { Shirt } from 'lucide-react';
+
+import type { BlobbiRoomContext, RoomPoopState } from '../lib/room-types';
+import { ROOM_BOTTOM_BAR_CLASS } from '../lib/room-layout';
+import { BlobbiRoomHero } from './BlobbiRoomHero';
+
+interface BlobbiClosetRoomProps {
+  ctx: BlobbiRoomContext;
+  poopState: RoomPoopState;
+}
+
+export function BlobbiClosetRoom({ ctx }: BlobbiClosetRoomProps) {
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <BlobbiRoomHero ctx={ctx} className="flex-1 min-h-0" />
+
+      {/* Bottom bar — same structure as other rooms */}
+      <div className={ROOM_BOTTOM_BAR_CLASS}>
+        <div className="flex items-center justify-center gap-2 py-1">
+          <Shirt className="size-5 text-muted-foreground/30" />
+          <p className="text-xs text-muted-foreground/40 font-medium">
+            Closet coming soon
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/blobbi/rooms/components/BlobbiHatcheryRoom.tsx

@@ -0,0 +1,547 @@
+// src/blobbi/rooms/components/BlobbiHatcheryRoom.tsx
+
+/**
+ * BlobbiHatcheryRoom — Incubation / evolution / progression room.
+ *
+ * Layout:
+ * - BlobbiRoomHero (Blobbi visual + stats)
+ * - Bottom center: main start/stop hatching or evolution button
+ * - Bottom right: quests/tasks button
+ * - Bottom left: Blobbis list/selector button
+ *
+ * Reuses existing hatch/evolve/missions logic from BlobbiPage.
+ */
+
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  Loader2, Sparkles, Egg, Target, Check, ListTodo,
+  Wrench, Droplets, Heart, Zap, Moon, Camera, Music, Mic,
+  Pill, Utensils, Plus, Footprints, ExternalLink, Theater, TrendingUp,
+} from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { openUrl } from '@/lib/downloadFile';
+import { BlobbiStageVisual } from '@/blobbi/ui/BlobbiStageVisual';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { isLocalhostDev } from '@/blobbi/dev';
+import type { BlobbiRoomContext, RoomPoopState } from '../lib/room-types';
+import { ROOM_BOTTOM_BAR_CLASS } from '../lib/room-layout';
+import { BlobbiRoomHero } from './BlobbiRoomHero';
+import { RoomActionButton } from './RoomActionButton';
+
+// ─── Helper: companionNeedsCare (reused from BlobbiPage) ──────────────────────
+
+const CARE_THRESHOLD = 40;
+
+function companionNeedsCare(companion: { stats: { hunger?: number; happiness?: number; hygiene?: number; health?: number } }): boolean {
+  const { stats } = companion;
+  return (
+    (stats.hunger !== undefined && stats.hunger < CARE_THRESHOLD) ||
+    (stats.happiness !== undefined && stats.happiness < CARE_THRESHOLD) ||
+    (stats.hygiene !== undefined && stats.hygiene < CARE_THRESHOLD) ||
+    (stats.health !== undefined && stats.health < CARE_THRESHOLD)
+  );
+}
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface BlobbiHatcheryRoomProps {
+  ctx: BlobbiRoomContext;
+  poopState: RoomPoopState;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function BlobbiHatcheryRoom({ ctx }: BlobbiHatcheryRoomProps) {
+  const {
+    companion,
+    companions,
+    selectedD,
+    profile,
+    isEgg,
+    isBaby,
+    isIncubating,
+    isEvolvingState,
+    canStartIncubation,
+    canStartEvolution,
+    isStartingIncubation,
+    isStartingEvolution,
+    isStoppingIncubation,
+    isStoppingEvolution,
+    isHatching,
+    isEvolving,
+    hatchTasks,
+    evolveTasks,
+    onStartIncubation,
+    onStartEvolution,
+    onStopIncubation,
+    onStopEvolution,
+    onEvolve,
+    setShowPostModal,
+    setShowHatchCeremony,
+    isActiveFloatingCompanion,
+    // Blobbi selector
+    onSelectBlobbi,
+    blobbiNaddr,
+    // Adoption
+    setShowAdoptionFlow,
+    // Daily missions
+    dailyMissions,
+    onClaimReward,
+    isClaimingReward,
+    // DEV
+    setShowDevEditor,
+    setShowEmotionPanel,
+    setShowProgressionPanel,
+  } = ctx;
+
+  const navigate = useNavigate();
+
+  // Side panels
+  const [showQuestsPanel, setShowQuestsPanel] = useState(false);
+  const [showBlobbisPanel, setShowBlobbisPanel] = useState(false);
+
+  const hasActiveProcess = (isIncubating && isEgg) || (isEvolvingState && isBaby);
+  const isProcessBusy = isHatching || isEvolving || isStoppingIncubation || isStoppingEvolution;
+
+  const tasks = isIncubating ? hatchTasks.tasks : evolveTasks.tasks;
+  const allCompleted = isIncubating ? hatchTasks.allCompleted : evolveTasks.allCompleted;
+  const isTasksLoading = isIncubating ? hatchTasks.isLoading : evolveTasks.isLoading;
+
+  const completedCount = tasks.filter(t => t.completed).length;
+  const totalCount = tasks.length;
+
+  const { missions } = dailyMissions;
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      {/* ── Hero ── */}
+      <BlobbiRoomHero ctx={ctx} className="flex-1 min-h-0" />
+
+      {/* ── Bottom Action Bar ── */}
+      {!isActiveFloatingCompanion && (
+        <div className={ROOM_BOTTOM_BAR_CLASS}>
+          <div className="flex items-center justify-between gap-1 sm:gap-3">
+            {/* Left — Blobbis selector */}
+            <RoomActionButton
+              icon={<Egg className="size-7 sm:size-9" />}
+              label="Blobbis"
+              color="text-primary"
+              glowHex="var(--primary)"
+              onClick={() => setShowBlobbisPanel(true)}
+              badge={companions.length > 1 ? (
+                <span className="size-4 sm:size-5 rounded-full bg-primary text-[9px] sm:text-[10px] text-primary-foreground font-bold flex items-center justify-center">
+                  {companions.length}
+                </span>
+              ) : undefined}
+            />
+
+            {/* Center — Main hatch/evolve action */}
+            <div className="flex-1 flex flex-col items-center justify-center gap-1.5">
+              {/* Active process: Hatch/Evolve CTA or progress */}
+              {hasActiveProcess && allCompleted && !isTasksLoading && (
+                <button
+                  onClick={isIncubating ? () => setShowHatchCeremony(true) : onEvolve}
+                  disabled={isProcessBusy}
+                  className={cn(
+                    'flex items-center justify-center gap-2 px-8 py-3 rounded-full text-white font-semibold transition-all duration-300',
+                    'hover:-translate-y-0.5 hover:scale-105 hover:brightness-110 active:scale-95',
+                    isProcessBusy && 'opacity-50 pointer-events-none',
+                  )}
+                  style={{
+                    background: isIncubating
+                      ? 'linear-gradient(135deg, #0ea5e9, #8b5cf6)'
+                      : 'linear-gradient(135deg, #8b5cf6, #ec4899)',
+                  }}
+                >
+                  {(isHatching || isEvolving) ? (
+                    <Loader2 className="size-5 animate-spin" />
+                  ) : (
+                    <span className="text-lg">{isIncubating ? '\uD83D\uDC23' : '\u2728'}</span>
+                  )}
+                  <span>{(isHatching || isEvolving) ? (isIncubating ? 'Hatching...' : 'Evolving...') : (isIncubating ? 'Hatch!' : 'Evolve!')}</span>
+                </button>
+              )}
+
+              {hasActiveProcess && !allCompleted && !isTasksLoading && (
+                <div className="flex flex-col items-center gap-1">
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Sparkles className="size-4 text-primary" />
+                    <span className="font-medium">{isIncubating ? 'Hatching' : 'Evolving'}</span>
+                    <span className="text-xs tabular-nums">{completedCount}/{totalCount}</span>
+                  </div>
+                  {/* Progress bar */}
+                  <div className="w-40 h-1.5 rounded-full bg-muted/30 overflow-hidden">
+                    <div
+                      className="h-full rounded-full transition-all duration-500"
+                      style={{
+                        width: `${totalCount > 0 ? (completedCount / totalCount) * 100 : 0}%`,
+                        background: isIncubating
+                          ? 'linear-gradient(90deg, #0ea5e9, #8b5cf6)'
+                          : 'linear-gradient(90deg, #8b5cf6, #ec4899)',
+                      }}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {hasActiveProcess && isTasksLoading && (
+                <Loader2 className="size-5 animate-spin text-muted-foreground" />
+              )}
+
+              {/* No active process — show start button */}
+              {!hasActiveProcess && (canStartIncubation || canStartEvolution) && (
+                <button
+                  onClick={() => canStartIncubation ? onStartIncubation('start') : onStartEvolution()}
+                  disabled={isStartingIncubation || isStartingEvolution}
+                  className={cn(
+                    'flex items-center justify-center gap-2 px-8 py-3 rounded-full text-white font-semibold transition-all duration-300',
+                    'hover:-translate-y-0.5 hover:scale-105 hover:brightness-110 active:scale-95',
+                    (isStartingIncubation || isStartingEvolution) && 'opacity-50 pointer-events-none',
+                  )}
+                  style={{
+                    background: canStartIncubation
+                      ? 'linear-gradient(135deg, #0ea5e9, #8b5cf6)'
+                      : 'linear-gradient(135deg, #8b5cf6, #ec4899)',
+                  }}
+                >
+                  {(isStartingIncubation || isStartingEvolution) ? (
+                    <Loader2 className="size-5 animate-spin" />
+                  ) : (
+                    <Sparkles className="size-5" />
+                  )}
+                  <span>{canStartIncubation ? 'Begin Hatching' : 'Begin Evolution'}</span>
+                </button>
+              )}
+
+              {!hasActiveProcess && !canStartIncubation && !canStartEvolution && (
+                <p className="text-xs text-muted-foreground/50">No journey available</p>
+              )}
+
+              {/* Stop process link */}
+              {hasActiveProcess && !isTasksLoading && (
+                <button
+                  onClick={isIncubating ? onStopIncubation : onStopEvolution}
+                  disabled={isProcessBusy}
+                  className="text-[11px] text-muted-foreground/40 hover:text-destructive/60 transition-colors"
+                >
+                  {(isStoppingIncubation || isStoppingEvolution) ? 'Stopping...' : `Stop ${isIncubating ? 'incubation' : 'evolution'}`}
+                </button>
+              )}
+            </div>
+
+            {/* Right — Quests/Tasks */}
+            <RoomActionButton
+              icon={<ListTodo className="size-7 sm:size-9" />}
+              label="Quests"
+              color="text-amber-500"
+              glowHex="#f59e0b"
+              onClick={() => setShowQuestsPanel(true)}
+              badge={hasActiveProcess && totalCount - completedCount > 0 ? (
+                <span className="size-4 sm:size-5 rounded-full bg-amber-500 text-[9px] sm:text-[10px] text-white font-bold flex items-center justify-center">
+                  {totalCount - completedCount}
+                </span>
+              ) : undefined}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* ── Quests Sheet ── */}
+      <Sheet open={showQuestsPanel} onOpenChange={setShowQuestsPanel}>
+        <SheetContent side="right" className="w-80 sm:w-96 p-0">
+          <SheetHeader className="px-4 pt-4 pb-3 border-b">
+            <SheetTitle className="flex items-center gap-2 text-base">
+              <Target className="size-4" />
+              Quests
+            </SheetTitle>
+          </SheetHeader>
+          <ScrollArea className="h-[calc(100vh-4rem)]">
+            <div className="p-4 space-y-4">
+              {/* Journey tasks */}
+              {hasActiveProcess && (
+                <div className="space-y-1">
+                  <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                    {isIncubating ? 'Hatching Journey' : 'Evolution Journey'}
+                  </h3>
+                  {isTasksLoading && (
+                    <div className="flex items-center justify-center py-6">
+                      <Loader2 className="size-5 animate-spin text-muted-foreground" />
+                    </div>
+                  )}
+                  {!isTasksLoading && tasks.map(task => {
+                    const handleAction = () => {
+                      if (!task.action || !task.actionTarget) return;
+                      switch (task.action) {
+                        case 'navigate': navigate(task.actionTarget); setShowQuestsPanel(false); break;
+                        case 'external_link': openUrl(task.actionTarget); break;
+                        case 'open_modal': if (task.actionTarget === 'blobbi_post') { setShowPostModal(true); setShowQuestsPanel(false); } break;
+                      }
+                    };
+                    const isActionable = !task.completed && !!task.action && !!task.actionTarget;
+                    return (
+                      <button
+                        key={task.id}
+                        onClick={isActionable ? handleAction : undefined}
+                        disabled={!isActionable}
+                        className={cn(
+                          'w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl transition-all text-left',
+                          isActionable && 'hover:bg-accent/50 active:scale-[0.98] cursor-pointer',
+                          !isActionable && 'cursor-default',
+                        )}
+                      >
+                        <QuestTaskIcon taskId={task.id} completed={task.completed} />
+                        <div className="flex-1 min-w-0">
+                          <p className={cn('text-sm font-medium leading-tight', task.completed && 'text-muted-foreground line-through')}>{task.name}</p>
+                          <p className="text-[10px] text-muted-foreground leading-snug mt-0.5 line-clamp-1">{task.description}</p>
+                        </div>
+                        {task.required > 1 && !task.completed && (
+                          <span className="text-[10px] tabular-nums font-medium text-muted-foreground shrink-0">{task.current}/{task.required}</span>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+
+              {!hasActiveProcess && (
+                <div className="flex flex-col items-center gap-2 py-6 text-center">
+                  <Sparkles className="size-6 text-muted-foreground/30" />
+                  <p className="text-xs text-muted-foreground">Start a journey to unlock tasks</p>
+                </div>
+              )}
+
+              {/* Daily Bounties */}
+              <div className="space-y-1">
+                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                  Daily Bounties
+                </h3>
+                {dailyMissions.noMissionsAvailable && (
+                  <div className="flex flex-col items-center gap-2 py-4 text-center">
+                    <Egg className="size-5 text-muted-foreground/30" />
+                    <p className="text-xs text-muted-foreground">Hatch your Blobbi to unlock bounties</p>
+                  </div>
+                )}
+                {!dailyMissions.noMissionsAvailable && missions.map(mission => {
+                  const canClaim = mission.completed && !mission.claimed;
+                  return (
+                    <div
+                      key={mission.id}
+                      className={cn(
+                        'w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl transition-all',
+                        canClaim && 'bg-amber-500/[0.06]',
+                      )}
+                    >
+                      <DailyMissionIcon action={mission.action} claimed={mission.claimed} canClaim={canClaim} />
+                      <div className="flex-1 min-w-0">
+                        <p className={cn('text-sm font-medium leading-tight', mission.claimed && 'text-muted-foreground line-through')}>{mission.title}</p>
+                        <p className="text-[10px] text-muted-foreground leading-snug mt-0.5">{mission.description}</p>
+                      </div>
+                      {!mission.claimed && (
+                        <span className="text-[10px] tabular-nums font-medium text-muted-foreground shrink-0">{mission.currentCount}/{mission.requiredCount}</span>
+                      )}
+                      {canClaim && (
+                        <button
+                          onClick={() => onClaimReward(mission.id)}
+                          disabled={isClaimingReward}
+                          className="shrink-0 text-xs font-semibold text-amber-600 dark:text-amber-400 hover:underline"
+                        >
+                          Claim
+                        </button>
+                      )}
+                    </div>
+                  );
+                })}
+                {/* Bonus row */}
+                {!dailyMissions.noMissionsAvailable && dailyMissions.bonusAvailable && !dailyMissions.bonusClaimed && (
+                  <div className="w-full flex items-center gap-3 px-3 py-2.5 rounded-2xl bg-amber-500/[0.06]">
+                    <div className="size-8 rounded-full bg-amber-500/15 flex items-center justify-center shrink-0">
+                      <Sparkles className="size-4 text-amber-500" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium leading-tight">Daily Champion</p>
+                      <p className="text-[10px] text-muted-foreground">All missions complete!</p>
+                    </div>
+                    <button
+                      onClick={() => onClaimReward('bonus_daily_complete')}
+                      disabled={isClaimingReward}
+                      className="shrink-0 text-xs font-semibold text-amber-600 dark:text-amber-400 hover:underline"
+                    >
+                      Claim
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
+
+      {/* ── Blobbis Sheet ── */}
+      <Sheet open={showBlobbisPanel} onOpenChange={setShowBlobbisPanel}>
+        <SheetContent side="left" className="w-80 sm:w-96 p-0">
+          <SheetHeader className="px-4 pt-4 pb-3 border-b">
+            <SheetTitle className="flex items-center gap-2 text-base">
+              <Egg className="size-4" />
+              Your Blobbis
+            </SheetTitle>
+          </SheetHeader>
+          <ScrollArea className="h-[calc(100vh-4rem)]">
+            <div className="p-4">
+              {/* Blobbi grid */}
+              <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 py-3">
+                {companions.map((c) => {
+                  const isSelected = c.d === selectedD;
+                  const isCompanion = c.d === profile?.currentCompanion;
+                  return (
+                    <button
+                      key={c.d}
+                      onClick={() => { onSelectBlobbi(c.d); setShowBlobbisPanel(false); }}
+                      className={cn(
+                        'flex flex-col items-center gap-1 transition-all duration-200',
+                        'hover:-translate-y-1 hover:scale-105 active:scale-95',
+                      )}
+                    >
+                      <div className="relative">
+                        <div className={cn(
+                          'rounded-full p-1 transition-all',
+                          isSelected ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : '',
+                        )}>
+                          <BlobbiStageVisual companion={c} size="sm" />
+                        </div>
+                        {isCompanion && (
+                          <div className="absolute -bottom-0.5 -right-0.5 size-5 rounded-full bg-background ring-2 ring-background flex items-center justify-center">
+                            <Footprints className="size-3 text-emerald-500" />
+                          </div>
+                        )}
+                        {companionNeedsCare(c) && !isCompanion && (
+                          <div className="absolute -top-0.5 -right-0.5 size-4 rounded-full bg-amber-500 flex items-center justify-center">
+                            <span className="text-[8px] text-white font-bold">!</span>
+                          </div>
+                        )}
+                      </div>
+                      {c.stage !== 'egg' && (
+                        <span className={cn(
+                          'text-[11px] font-medium max-w-[4.5rem] truncate',
+                          isSelected ? 'text-foreground' : 'text-muted-foreground',
+                        )}>
+                          {c.name}
+                        </span>
+                      )}
+                    </button>
+                  );
+                })}
+
+                {/* Adopt + button */}
+                <button
+                  onClick={() => { setShowBlobbisPanel(false); setShowAdoptionFlow(true); }}
+                  className="flex flex-col items-center gap-1 transition-all duration-200 hover:-translate-y-1 hover:scale-105 active:scale-95"
+                >
+                  <div className="size-14 rounded-full flex items-center justify-center" style={{
+                    background: 'radial-gradient(circle at 40% 35%, color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 3%, transparent) 70%)',
+                  }}>
+                    <Plus className="size-6 text-muted-foreground/60" />
+                  </div>
+                  <span className="text-[11px] font-medium text-muted-foreground/60">Adopt</span>
+                </button>
+              </div>
+
+              {/* Quick actions row */}
+              <div className="flex items-center justify-center gap-6 pt-3 border-t mt-3">
+                <Link
+                  to={`/${blobbiNaddr}`}
+                  onClick={() => setShowBlobbisPanel(false)}
+                  className="flex flex-col items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <ExternalLink className="size-5" />
+                  <span className="text-[10px]">View</span>
+                </Link>
+                {/* DEV tools */}
+                {isLocalhostDev() && (
+                  <>
+                    {companion.stage !== 'adult' && (
+                      <button
+                        onClick={() => { setShowBlobbisPanel(false); if (isEgg) { setShowHatchCeremony(true); } else { onEvolve(); } }}
+                        disabled={isHatching || isEvolving}
+                        className="flex flex-col items-center gap-1 text-amber-500 hover:text-amber-400 transition-colors disabled:opacity-40"
+                      >
+                        <Sparkles className="size-5" />
+                        <span className="text-[10px]">{companion.stage === 'egg' ? 'Hatch' : 'Evolve'}</span>
+                      </button>
+                    )}
+                    <button onClick={() => { setShowBlobbisPanel(false); setShowDevEditor(true); }} className="flex flex-col items-center gap-1 text-amber-500 hover:text-amber-400 transition-colors">
+                      <Wrench className="size-5" />
+                      <span className="text-[10px]">Editor</span>
+                    </button>
+                    <button onClick={() => { setShowBlobbisPanel(false); setShowEmotionPanel(true); }} className="flex flex-col items-center gap-1 text-amber-500 hover:text-amber-400 transition-colors">
+                      <Theater className="size-5" />
+                      <span className="text-[10px]">Emote</span>
+                    </button>
+                    <button onClick={() => { setShowBlobbisPanel(false); setShowProgressionPanel(true); }} className="flex flex-col items-center gap-1 text-amber-500 hover:text-amber-400 transition-colors">
+                      <TrendingUp className="size-5" />
+                      <span className="text-[10px]">Level</span>
+                    </button>
+                  </>
+                )}
+              </div>
+            </div>
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}
+
+// ─── Quest task icon (reused from BlobbiPage) ─────────────────────────────────
+
+function QuestTaskIcon({ taskId, completed }: { taskId: string; completed: boolean }) {
+  const iconClass = 'size-4';
+  const icon = (() => {
+    switch (taskId) {
+      case 'create_themes': return <Sparkles className={iconClass} />;
+      case 'color_moments': return <Droplets className={iconClass} />;
+      case 'create_posts': return <Target className={iconClass} />;
+      case 'interactions': return <Heart className={iconClass} />;
+      case 'edit_profile': return <Wrench className={iconClass} />;
+      case 'maintain_stats': return <Zap className={iconClass} />;
+      default: return <Target className={iconClass} />;
+    }
+  })();
+  return (
+    <div className={cn(
+      'size-8 rounded-full flex items-center justify-center shrink-0',
+      completed ? 'bg-emerald-500/15 text-emerald-500' : 'bg-muted/60 text-muted-foreground',
+    )}>
+      {completed ? <Check className="size-4" /> : icon}
+    </div>
+  );
+}
+
+// ─── Daily mission icon (reused from BlobbiPage) ──────────────────────────────
+
+function DailyMissionIcon({ action, claimed, canClaim }: { action: string; claimed: boolean; canClaim: boolean }) {
+  const iconClass = 'size-4';
+  const icon = (() => {
+    switch (action) {
+      case 'interact': return <Heart className={iconClass} />;
+      case 'feed': return <Utensils className={iconClass} />;
+      case 'clean': return <Droplets className={iconClass} />;
+      case 'sleep': return <Moon className={iconClass} />;
+      case 'take_photo': return <Camera className={iconClass} />;
+      case 'sing': return <Mic className={iconClass} />;
+      case 'play_music': return <Music className={iconClass} />;
+      case 'medicine': return <Pill className={iconClass} />;
+      default: return <Target className={iconClass} />;
+    }
+  })();
+  return (
+    <div className={cn(
+      'size-8 rounded-full flex items-center justify-center shrink-0',
+      claimed ? 'bg-emerald-500/15 text-emerald-500' : canClaim ? 'bg-amber-500/15 text-amber-500' : 'bg-muted/60 text-muted-foreground',
+    )}>
+      {claimed ? <Check className="size-4" /> : icon}
+    </div>
+  );
+}

src/blobbi/rooms/components/BlobbiHomeRoom.tsx

@@ -0,0 +1,162 @@
+// src/blobbi/rooms/components/BlobbiHomeRoom.tsx
+
+/**
+ * BlobbiHomeRoom — The main living / play room.
+ *
+ * Layout:
+ * - BlobbiRoomHero (stats crown, Blobbi visual, name)
+ * - Unified bottom bar: Photo (left) | Carousel (center) | Companion (right)
+ * - Inline activity (music player, sing card) above the bottom bar
+ *
+ * Sleep/wake has been moved to BlobbiRestRoom.
+ */
+
+import { useMemo } from 'react';
+import { Camera, Footprints, Music, Mic } from 'lucide-react';
+
+import { getLiveShopItems } from '@/blobbi/shop/lib/blobbi-shop-items';
+import { InlineMusicPlayer, InlineSingCard } from '@/blobbi/actions';
+import type { BlobbiRoomContext, RoomPoopState } from '../lib/room-types';
+import { ROOM_BOTTOM_BAR_CLASS } from '../lib/room-layout';
+import { BlobbiRoomHero } from './BlobbiRoomHero';
+import { RoomActionButton } from './RoomActionButton';
+import { ItemCarousel, type CarouselEntry } from './ItemCarousel';
+
+interface BlobbiHomeRoomProps {
+  ctx: BlobbiRoomContext;
+  poopState: RoomPoopState;
+}
+
+export function BlobbiHomeRoom({ ctx }: BlobbiHomeRoomProps) {
+  const {
+    isActiveFloatingCompanion,
+    setShowPhotoModal,
+    isCurrentCompanion,
+    canBeCompanion,
+    isUpdatingCompanion,
+    handleSetAsCompanion,
+    isUsingItem,
+    usingItemId,
+    handleUseItemFromTab,
+    handleDirectAction,
+    isDirectActionPending,
+    inlineActivity,
+    handleConfirmSing,
+    handleCloseInlineActivity,
+    handleMusicPlaybackStart,
+    handleMusicPlaybackStop,
+    handleSingRecordingStart,
+    handleSingRecordingStop,
+    handleChangeTrack,
+    isPublishing,
+    actionInProgress,
+  } = ctx;
+
+  // Build carousel entries: toys + music + sing
+  const carouselItems = useMemo<CarouselEntry[]>(() => {
+    const toys = getLiveShopItems()
+      .filter(i => i.type === 'toy')
+      .map(i => ({ id: i.id, icon: <span>{i.icon}</span>, label: i.name }));
+
+    const actions: CarouselEntry[] = [
+      {
+        id: '__action_music',
+        icon: <div className="size-10 sm:size-12 rounded-full flex items-center justify-center bg-pink-500/15 text-pink-500"><Music className="size-5 sm:size-6" /></div>,
+        label: 'Music',
+      },
+      {
+        id: '__action_sing',
+        icon: <div className="size-10 sm:size-12 rounded-full flex items-center justify-center bg-purple-500/15 text-purple-500"><Mic className="size-5 sm:size-6" /></div>,
+        label: 'Sing',
+      },
+    ];
+
+    return [...toys, ...actions];
+  }, []);
+
+  const isDisabled = isPublishing || actionInProgress !== null || isUsingItem;
+
+  const handleCarouselUse = (id: string) => {
+    if (id === '__action_music') {
+      handleDirectAction('play_music');
+    } else if (id === '__action_sing') {
+      handleDirectAction('sing');
+    } else {
+      handleUseItemFromTab(id);
+    }
+  };
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      {/* ── Hero (Blobbi + stats) ── */}
+      <BlobbiRoomHero ctx={ctx} className="flex-1 min-h-0" />
+
+      {/* ── Inline Activity Area (music/sing) ── */}
+      {inlineActivity.type === 'music' && (
+        <div className="px-4 sm:px-6 pb-2">
+          <InlineMusicPlayer
+            selection={inlineActivity.selection}
+            onChangeTrack={handleChangeTrack}
+            onClose={handleCloseInlineActivity}
+            onPlaybackStart={handleMusicPlaybackStart}
+            onPlaybackStop={handleMusicPlaybackStop}
+            isPublished={inlineActivity.isPublished}
+            isPublishing={isDirectActionPending}
+          />
+        </div>
+      )}
+      {inlineActivity.type === 'sing' && (
+        <div className="px-4 sm:px-6 pb-2">
+          <InlineSingCard
+            onConfirm={handleConfirmSing}
+            onClose={handleCloseInlineActivity}
+            onRecordingStart={handleSingRecordingStart}
+            onRecordingStop={handleSingRecordingStop}
+            isPublishing={isDirectActionPending}
+          />
+        </div>
+      )}
+
+      {/* ── Unified Bottom Bar: Photo | Carousel | Companion ── */}
+      {!isActiveFloatingCompanion && (
+        <div className={ROOM_BOTTOM_BAR_CLASS}>
+          <div className="flex items-center justify-between gap-1 sm:gap-3">
+            {/* Photo */}
+            <RoomActionButton
+              icon={<Camera className="size-7 sm:size-9" />}
+              label="Photo"
+              color="text-pink-500"
+              glowHex="#ec4899"
+              onClick={() => setShowPhotoModal(true)}
+            />
+
+            {/* Center carousel */}
+            <div className="flex-1 min-w-0 flex justify-center">
+              <ItemCarousel
+                items={carouselItems}
+                onUse={handleCarouselUse}
+                activeItemId={isUsingItem ? usingItemId : null}
+                disabled={isDisabled}
+              />
+            </div>
+
+            {/* Companion toggle */}
+            {canBeCompanion ? (
+              <RoomActionButton
+                icon={<Footprints className="size-7 sm:size-9" />}
+                label={isCurrentCompanion ? 'With you' : 'Take along'}
+                color={isCurrentCompanion ? 'text-emerald-500' : 'text-violet-500'}
+                glowHex={isCurrentCompanion ? '#10b981' : '#8b5cf6'}
+                onClick={handleSetAsCompanion}
+                disabled={isUpdatingCompanion}
+                loading={isUpdatingCompanion}
+              />
+            ) : (
+              <div className="w-14 sm:w-20 shrink-0" />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/blobbi/rooms/components/BlobbiKitchenRoom.tsx

@@ -0,0 +1,148 @@
+// src/blobbi/rooms/components/BlobbiKitchenRoom.tsx
+
+/**
+ * BlobbiKitchenRoom — The feeding room.
+ *
+ * Bottom bar: Shovel (left, when poop exists) | food carousel (center) | Fridge (right)
+ * Poop appears at pre-computed safe positions in the lower corners.
+ */
+
+import { useMemo, useState } from 'react';
+import { Refrigerator, Shovel } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { getLiveShopItems } from '@/blobbi/shop/lib/blobbi-shop-items';
+import { BlobbiActionInventoryModal } from '@/blobbi/actions/components/BlobbiActionInventoryModal';
+import type { BlobbiRoomContext, RoomPoopState } from '../lib/room-types';
+import { ROOM_BOTTOM_BAR_CLASS } from '../lib/room-layout';
+import { getPoopsInRoom, hasAnyPoop } from '../lib/poop-system';
+import { BlobbiRoomHero } from './BlobbiRoomHero';
+import { RoomActionButton } from './RoomActionButton';
+import { ItemCarousel, type CarouselEntry } from './ItemCarousel';
+
+interface BlobbiKitchenRoomProps {
+  ctx: BlobbiRoomContext;
+  poopState: RoomPoopState;
+}
+
+export function BlobbiKitchenRoom({ ctx, poopState }: BlobbiKitchenRoomProps) {
+  const {
+    companion,
+    profile,
+    isUsingItem,
+    usingItemId,
+    handleUseItemFromTab,
+    isPublishing,
+    actionInProgress,
+    isActiveFloatingCompanion,
+  } = ctx;
+
+  const [showFridge, setShowFridge] = useState(false);
+
+  const foodEntries = useMemo<CarouselEntry[]>(() =>
+    getLiveShopItems()
+      .filter(i => i.type === 'food')
+      .map(i => ({ id: i.id, icon: <span>{i.icon}</span>, label: i.name })),
+  []);
+
+  const isDisabled = isPublishing || actionInProgress !== null || isUsingItem;
+
+  const handleFridgeUseItem = (itemId: string) => {
+    if (isUsingItem) return;
+    ctx.onUseItem(itemId, 'feed').finally(() => {
+      setShowFridge(false);
+    });
+  };
+
+  const kitchenPoops = getPoopsInRoom(poopState.poops, 'kitchen');
+  const anyPoopAnywhere = hasAnyPoop(poopState.poops);
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      {/* ── Hero + Poop layer ── */}
+      <div className="relative flex-1 min-h-0 flex flex-col">
+        <BlobbiRoomHero ctx={ctx} className="flex-1 min-h-0" />
+
+        {/* Poop at pre-computed safe positions */}
+        {kitchenPoops.map((poop) => (
+          <button
+            key={poop.id}
+            onClick={() => poopState.shovelMode && poopState.onRemovePoop(poop.id)}
+            className={cn(
+              'absolute z-10 transition-all duration-300',
+              poopState.shovelMode
+                ? 'cursor-pointer hover:scale-150 active:scale-75'
+                : 'pointer-events-none',
+            )}
+            style={{
+              bottom: `${poop.position.bottom}%`,
+              left: `${poop.position.left}%`,
+            }}
+          >
+            <span className={cn(
+              'text-2xl sm:text-3xl block',
+              poopState.shovelMode && 'drop-shadow-lg',
+            )}>
+              {'💩'}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* ── Bottom bar ── */}
+      {!isActiveFloatingCompanion && (
+        <div className={ROOM_BOTTOM_BAR_CLASS}>
+          <div className="flex items-center justify-between gap-1 sm:gap-3">
+            {/* Left — Shovel (when poop exists) or spacer */}
+            {anyPoopAnywhere ? (
+              <RoomActionButton
+                icon={<Shovel className="size-7 sm:size-9" />}
+                label={poopState.shovelMode ? 'Done' : 'Shovel'}
+                color={poopState.shovelMode ? 'text-amber-600' : 'text-stone-500'}
+                glowHex={poopState.shovelMode ? '#d97706' : '#78716c'}
+                onClick={() => poopState.setShovelMode(prev => !prev)}
+                className={poopState.shovelMode ? 'ring-2 ring-amber-500/40 ring-offset-2 ring-offset-background rounded-full' : ''}
+              />
+            ) : (
+              <div className="w-14 sm:w-20 shrink-0" />
+            )}
+
+            {/* Center: food carousel */}
+            <div className="flex-1 min-w-0 flex justify-center">
+              <ItemCarousel
+                items={foodEntries}
+                onUse={handleUseItemFromTab}
+                activeItemId={isUsingItem ? usingItemId : null}
+                disabled={isDisabled}
+              />
+            </div>
+
+            {/* Right — Fridge */}
+            <RoomActionButton
+              icon={<Refrigerator className="size-7 sm:size-9" />}
+              label="Fridge"
+              color="text-orange-500"
+              glowHex="#f97316"
+              onClick={() => setShowFridge(true)}
+              disabled={isDisabled}
+            />
+          </div>
+        </div>
+      )}
+
+      {showFridge && (
+        <BlobbiActionInventoryModal
+          open={showFridge}
+          onOpenChange={setShowFridge}
+          action="feed"
+          companion={companion}
+          profile={profile}
+          onUseItem={handleFridgeUseItem}
+          onOpenShop={() => setShowFridge(false)}
+          isUsingItem={isUsingItem}
+          usingItemId={usingItemId}
+        />
+      )}
+    </div>
+  );
+}

src/blobbi/rooms/components/BlobbiRestRoom.tsx

@@ -0,0 +1,62 @@
+// src/blobbi/rooms/components/BlobbiRestRoom.tsx
+
+/**
+ * BlobbiRestRoom — The bedroom / rest room.
+ *
+ * Bottom bar: Sleep/Wake button centered.
+ */
+
+import { Moon, Sun, Loader2 } from 'lucide-react';
+
+import type { BlobbiRoomContext, RoomPoopState } from '../lib/room-types';
+import { ROOM_BOTTOM_BAR_CLASS } from '../lib/room-layout';
+import { BlobbiRoomHero } from './BlobbiRoomHero';
+import { RoomActionButton } from './RoomActionButton';
+
+interface BlobbiRestRoomProps {
+  ctx: BlobbiRoomContext;
+  poopState: RoomPoopState;
+}
+
+export function BlobbiRestRoom({ ctx }: BlobbiRestRoomProps) {
+  const {
+    isEgg,
+    isSleeping,
+    onRest,
+    actionInProgress,
+    isPublishing,
+    isUsingItem,
+    isActiveFloatingCompanion,
+  } = ctx;
+
+  const isDisabled = isPublishing || actionInProgress !== null || isUsingItem;
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <BlobbiRoomHero ctx={ctx} className="flex-1 min-h-0" />
+
+      {!isActiveFloatingCompanion && (
+        <div className={ROOM_BOTTOM_BAR_CLASS}>
+          <div className="flex items-center justify-center">
+            {!isEgg && (
+              <RoomActionButton
+                icon={
+                  actionInProgress === 'rest'
+                    ? <Loader2 className="size-7 sm:size-9 animate-spin" />
+                    : isSleeping
+                      ? <Sun className="size-7 sm:size-9" />
+                      : <Moon className="size-7 sm:size-9" />
+                }
+                label={isSleeping ? 'Wake up' : 'Sleep'}
+                color={isSleeping ? 'text-amber-500' : 'text-violet-500'}
+                glowHex={isSleeping ? '#f59e0b' : '#8b5cf6'}
+                onClick={onRest}
+                disabled={isDisabled}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/blobbi/rooms/components/BlobbiRoomHero.tsx

@@ -0,0 +1,284 @@
+// src/blobbi/rooms/components/BlobbiRoomHero.tsx
+
+/**
+ * BlobbiRoomHero — Shared Blobbi visual display used in every room.
+ *
+ * This component does NOT clip or constrain the visual — it simply fills
+ * available flex space and centers the Blobbi + stats within it.
+ * The room owns the full-height surface; this just provides content.
+ *
+ * Top padding accounts for the floating room header overlay (~40px).
+ */
+
+import { useMemo } from 'react';
+import {
+  Utensils, Gamepad2, Heart, Droplets, Zap, AlertTriangle,
+  Footprints, Loader2,
+} from 'lucide-react';
+
+import { BlobbiStageVisual } from '@/blobbi/ui/BlobbiStageVisual';
+import { getVisibleStats, getStatStatus } from '@/blobbi/core/lib/blobbi-decay';
+import { cn } from '@/lib/utils';
+import type { BlobbiRoomContext } from '../lib/room-types';
+
+// ─── Stat colour maps ─────────────────────────────────────────────────────────
+
+const STAT_COLOR_MAP: Record<string, 'orange' | 'yellow' | 'green' | 'blue' | 'violet'> = {
+  hunger: 'orange',
+  happiness: 'yellow',
+  health: 'green',
+  hygiene: 'blue',
+  energy: 'violet',
+};
+
+const STAT_COLORS: Record<string, string> = {
+  orange: 'text-orange-500',
+  yellow: 'text-yellow-500',
+  green: 'text-green-500',
+  blue: 'text-blue-500',
+  violet: 'text-violet-500',
+};
+
+const STAT_BG_COLORS: Record<string, string> = {
+  orange: 'bg-orange-500/10',
+  yellow: 'bg-yellow-500/10',
+  green: 'bg-green-500/10',
+  blue: 'bg-blue-500/10',
+  violet: 'bg-violet-500/10',
+};
+
+const STAT_RING_HEX: Record<string, string> = {
+  orange: '#f97316',
+  yellow: '#eab308',
+  green: '#22c55e',
+  blue: '#3b82f6',
+  violet: '#8b5cf6',
+};
+
+const STAT_ICON_MAP: Record<string, React.ComponentType<{ className?: string; strokeWidth?: number }>> = {
+  hunger: Utensils,
+  happiness: Gamepad2,
+  health: Heart,
+  hygiene: Droplets,
+  energy: Zap,
+};
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface BlobbiRoomHeroProps {
+  ctx: BlobbiRoomContext;
+  className?: string;
+  hideStats?: boolean;
+  hideName?: boolean;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function BlobbiRoomHero({ ctx, className, hideStats, hideName }: BlobbiRoomHeroProps) {
+  const {
+    companion,
+    currentStats,
+    isSleeping,
+    isEgg,
+    statusRecipe,
+    statusRecipeLabel,
+    effectiveEmotion,
+    hasDevOverride,
+    blobbiReaction,
+    isActiveFloatingCompanion,
+    isUpdatingCompanion,
+    handleSetAsCompanion,
+    heroRef,
+    heroWidth,
+  } = ctx;
+
+  if (isActiveFloatingCompanion) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center gap-4 text-center flex-1 px-4', className)}>
+        <Footprints className="size-12 text-muted-foreground/30" />
+        <p className="text-muted-foreground text-sm">
+          {companion.name} is out exploring right now.
+        </p>
+        <button
+          onClick={handleSetAsCompanion}
+          disabled={isUpdatingCompanion}
+          className={cn(
+            'flex items-center justify-center gap-2 px-6 py-3 rounded-full text-white font-semibold transition-all duration-300 ease-out text-sm',
+            'hover:-translate-y-0.5 hover:scale-105 hover:brightness-110 active:scale-95',
+            isUpdatingCompanion && 'opacity-50 pointer-events-none',
+          )}
+          style={{ background: 'linear-gradient(135deg, #8b5cf6, #ec4899, #f59e0b)' }}
+        >
+          {isUpdatingCompanion ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : (
+            <Footprints className="size-4" />
+          )}
+          <span>Bring {companion.name} home</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={heroRef}
+      className={cn(
+        // No overflow-hidden — let the room own the visual surface.
+        // pt-10 creates clearance for the floating room header overlay.
+        'relative flex flex-col items-center justify-center pt-10 px-4 sm:px-6 flex-1 min-h-0',
+        className,
+      )}
+    >
+      <div className="relative flex flex-col items-center">
+        {/* Stats crown */}
+        {!hideStats && <StatsCrown companion={companion} currentStats={currentStats} heroWidth={heroWidth} />}
+
+        {/* Blobbi visual */}
+        <div
+          className="relative transition-all duration-500"
+          style={!isSleeping ? {
+            animation: `blobbi-bob ${4 - (currentStats.happiness / 100) * 1.5}s ease-in-out infinite, blobbi-sway ${6 - (currentStats.happiness / 100) * 2}s ease-in-out infinite`,
+          } : undefined}
+        >
+          <div className="absolute inset-0 -m-16 sm:-m-20 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
+          <BlobbiStageVisual
+            companion={companion}
+            size="lg"
+            animated={!isSleeping}
+            reaction={blobbiReaction}
+            recipe={hasDevOverride ? undefined : statusRecipe}
+            recipeLabel={hasDevOverride ? undefined : statusRecipeLabel}
+            emotion={effectiveEmotion}
+            className={isEgg
+              ? 'size-36 min-[400px]:size-44 sm:size-56 md:size-64 lg:size-72'
+              : 'size-48 min-[400px]:size-60 sm:size-72 md:size-80 lg:size-96'
+            }
+          />
+        </div>
+
+        {/* Blobbi Name */}
+        {!hideName && !isEgg && (
+          <h2
+            className="text-xl sm:text-2xl md:text-3xl font-bold text-center mt-1"
+            style={{ color: companion.visualTraits.baseColor }}
+          >
+            {companion.name}
+          </h2>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Stats Crown ──────────────────────────────────────────────────────────────
+
+function StatsCrown({
+  companion,
+  currentStats,
+  heroWidth,
+}: {
+  companion: BlobbiRoomContext['companion'];
+  currentStats: BlobbiRoomContext['currentStats'];
+  heroWidth: number;
+}) {
+  const allStats = useMemo(() =>
+    getVisibleStats(companion.stage).map(stat => ({
+      stat,
+      value: currentStats[stat] ?? 100,
+      status: getStatStatus(companion.stage, stat, currentStats[stat] ?? 100),
+      color: STAT_COLOR_MAP[stat],
+    })),
+  [companion.stage, currentStats]);
+
+  if (allStats.length === 0) return null;
+
+  const count = allStats.length;
+  const isSmall = heroWidth < 400;
+
+  // Balanced arc: mobile is compact, desktop has moderate breathing room.
+  // These values produce a stable crown with no dramatic changes between
+  // 375px (mobile) and 640px+ (desktop) — a smooth interpolation.
+  const arcSpread = isSmall
+    ? (count <= 2 ? 80 : count <= 3 ? 110 : 140)
+    : (count <= 2 ? 90 : count <= 3 ? 130 : 160);
+  const arcHalf = arcSpread / 2;
+  const angles = count === 1
+    ? [0]
+    : allStats.map((_, i) => -arcHalf + (arcSpread / (count - 1)) * i);
+
+  return (
+    <div className="relative flex items-end justify-center w-full mb-4 sm:mb-8" style={{ height: 40 }}>
+      {allStats.map((s, i) => {
+        const angleDeg = angles[i];
+        const angleRad = (angleDeg * Math.PI) / 180;
+        // Smooth interpolation: 110px at 340px width → 200px at 640px+ width
+        const radius = Math.min(200, Math.max(110, (heroWidth - 340) / (640 - 340) * (200 - 110) + 110));
+        const x = Math.sin(angleRad) * radius;
+        const y = Math.cos(angleRad) * radius - radius;
+
+        return (
+          <div
+            key={s.stat}
+            className="absolute transition-all duration-500"
+            style={{
+              transform: `translate(-50%, 0)`,
+              left: `calc(50% + ${x.toFixed(1)}px)`,
+              bottom: `${y.toFixed(1)}px`,
+            }}
+          >
+            <StatIndicator
+              stat={s.stat}
+              value={s.value}
+              color={s.color}
+              status={s.status}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Stat Indicator ───────────────────────────────────────────────────────────
+
+interface StatIndicatorProps {
+  stat: string;
+  value: number | undefined;
+  color: 'orange' | 'yellow' | 'green' | 'blue' | 'violet';
+  status?: 'normal' | 'warning' | 'critical';
+}
+
+function StatIndicator({ stat, value, color, status = 'normal' }: StatIndicatorProps) {
+  const displayValue = value ?? 0;
+  const isLow = status === 'warning' || status === 'critical';
+  const ringHex = STAT_RING_HEX[color];
+  const IconComponent = STAT_ICON_MAP[stat];
+
+  return (
+    <div className={cn(
+      'relative size-14 sm:size-[4.5rem] rounded-full flex items-center justify-center',
+      STAT_BG_COLORS[color],
+      status === 'critical' && 'animate-pulse',
+    )}>
+      <svg className="absolute inset-0 -rotate-90" viewBox="0 0 36 36">
+        <circle cx="18" cy="18" r="15" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-muted/15" />
+        <circle
+          cx="18" cy="18" r="15" fill="none" strokeWidth="2.5" strokeLinecap="round"
+          stroke={ringHex}
+          strokeDasharray={`${displayValue * 0.94} 100`}
+          className="transition-all duration-500"
+        />
+      </svg>
+      <div className="relative">
+        {IconComponent && <IconComponent className={cn('size-5 sm:size-6', STAT_COLORS[color])} strokeWidth={2.5} />}
+        {isLow && (
+          <AlertTriangle
+            className={cn('absolute -top-1.5 -right-2 size-3', status === 'critical' ? 'text-red-500' : 'text-amber-500')}
+            strokeWidth={3}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

src/blobbi/rooms/components/BlobbiRoomShell.tsx

@@ -0,0 +1,244 @@
+// src/blobbi/rooms/components/BlobbiRoomShell.tsx
+
+/**
+ * BlobbiRoomShell — The outer layout for the room-based Blobbi dashboard.
+ *
+ * Manages:
+ * - Current room state + navigation
+ * - Sleep dark overlay (scoped to this shell only)
+ * - Ephemeral poop instances (local-only, no persistence)
+ */
+
+import { useState, useCallback, useMemo, useEffect, type CSSProperties } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+import { cn } from '@/lib/utils';
+import { toast } from '@/hooks/useToast';
+import {
+  type BlobbiRoomId,
+  ROOM_META,
+  DEFAULT_ROOM_ORDER,
+  DEFAULT_INITIAL_ROOM,
+  getNextRoom,
+  getPreviousRoom,
+  getRoomIndex,
+} from '../lib/room-config';
+import type { BlobbiRoomContext, RoomPoopState } from '../lib/room-types';
+import {
+  generateInitialPoops,
+  removePoop,
+  type PoopInstance,
+} from '../lib/poop-system';
+
+import { BlobbiHomeRoom } from './BlobbiHomeRoom';
+import { BlobbiKitchenRoom } from './BlobbiKitchenRoom';
+import { BlobbiCareRoom } from './BlobbiCareRoom';
+import { BlobbiHatcheryRoom } from './BlobbiHatcheryRoom';
+import { BlobbiRestRoom } from './BlobbiRestRoom';
+import { BlobbiClosetRoom } from './BlobbiClosetRoom';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface BlobbiRoomShellProps {
+  ctx: BlobbiRoomContext;
+  roomOrder?: BlobbiRoomId[];
+  initialRoom?: BlobbiRoomId;
+}
+
+interface RoomNavState {
+  current: BlobbiRoomId;
+  direction: 'left' | 'right' | null;
+}
+
+// ─── Room Component Map ───────────────────────────────────────────────────────
+
+const ROOM_COMPONENTS: Record<BlobbiRoomId, React.ComponentType<{ ctx: BlobbiRoomContext; poopState: RoomPoopState }>> = {
+  care: BlobbiCareRoom,
+  kitchen: BlobbiKitchenRoom,
+  home: BlobbiHomeRoom,
+  hatchery: BlobbiHatcheryRoom,
+  rest: BlobbiRestRoom,
+  closet: BlobbiClosetRoom,
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function BlobbiRoomShell({
+  ctx,
+  roomOrder = DEFAULT_ROOM_ORDER,
+  initialRoom = DEFAULT_INITIAL_ROOM,
+}: BlobbiRoomShellProps) {
+  const [nav, setNav] = useState<RoomNavState>({
+    current: roomOrder.includes(initialRoom) ? initialRoom : roomOrder[0],
+    direction: null,
+  });
+
+  const goRight = useCallback(() => {
+    setNav(prev => ({
+      current: getNextRoom(prev.current, roomOrder),
+      direction: 'right',
+    }));
+  }, [roomOrder]);
+
+  const goLeft = useCallback(() => {
+    setNav(prev => ({
+      current: getPreviousRoom(prev.current, roomOrder),
+      direction: 'left',
+    }));
+  }, [roomOrder]);
+
+  const meta = ROOM_META[nav.current];
+  const roomIndex = getRoomIndex(nav.current, roomOrder);
+  const RoomComponent = ROOM_COMPONENTS[nav.current];
+
+  const dots = useMemo(() => roomOrder.map((id, i) => ({
+    id,
+    active: i === roomIndex,
+    label: ROOM_META[id].label,
+  })), [roomOrder, roomIndex]);
+
+  // ─── Destination labels for nav arrows ───
+  const leftDest = ROOM_META[getPreviousRoom(nav.current, roomOrder)];
+  const rightDest = ROOM_META[getNextRoom(nav.current, roomOrder)];
+  const isMobile = useIsMobile();
+
+  const isSleeping = ctx.isSleeping;
+
+  // ─── Poop system (ephemeral, local-only) ───
+  const [poops, setPoops] = useState<PoopInstance[]>([]);
+  const [shovelMode, setShovelMode] = useState(false);
+
+  // Generate poop on mount
+  useEffect(() => {
+    const hunger = ctx.currentStats.hunger;
+    const lastFeed = ctx.lastFeedTimestamp ?? ctx.companion.lastInteraction * 1000;
+    setPoops(generateInitialPoops(hunger, lastFeed));
+  // Only run once on mount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onRemovePoop = useCallback((poopId: string) => {
+    setPoops(prev => {
+      const { remaining, xpReward } = removePoop(prev, poopId);
+      if (xpReward > 0) {
+        toast({ title: `+${xpReward} XP`, description: 'Cleaned up!' });
+      }
+      if (remaining.length === 0) {
+        setShovelMode(false);
+      }
+      return remaining;
+    });
+  }, []);
+
+  const poopState: RoomPoopState = useMemo(() => ({
+    poops,
+    shovelMode,
+    setShovelMode,
+    onRemovePoop,
+  }), [poops, shovelMode, onRemovePoop]);
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0 relative">
+      {/* ── Room Content — fills the entire shell ── */}
+      <div className="flex-1 min-h-0 flex flex-col relative">
+        <RoomComponent ctx={ctx} poopState={poopState} />
+      </div>
+
+      {/* ── Sleep overlay — darkens the room when Blobbi sleeps ── */}
+      {isSleeping && (
+        <div
+          className="absolute inset-0 z-20 pointer-events-none transition-opacity duration-700"
+          style={{ background: 'radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%)' }}
+        />
+      )}
+
+      {/* ── Floating Room Header ── */}
+      <div className="absolute inset-x-0 top-0 z-30 pointer-events-none">
+        <div className="flex flex-col items-center pt-2 pb-1">
+          <div className="flex items-center gap-1.5 pointer-events-auto">
+            <span className="text-sm">{meta.icon}</span>
+            <span className="text-xs sm:text-sm font-semibold text-foreground/70">{meta.label}</span>
+          </div>
+          <div className="flex items-center gap-1.5 mt-1">
+            {dots.map(dot => (
+              <div
+                key={dot.id}
+                className={cn(
+                  'rounded-full transition-all duration-300',
+                  dot.active
+                    ? 'w-4 h-1 bg-primary'
+                    : 'w-1 h-1 bg-muted-foreground/20',
+                )}
+                title={dot.label}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ── Left / Right Navigation Arrows with destination labels ── */}
+      <button
+        onClick={goLeft}
+        className={cn(
+          'group absolute left-0 top-1/2 -translate-y-1/2 z-40',
+          'flex items-center gap-0',
+          'text-muted-foreground/40 hover:text-foreground/70',
+          'transition-all duration-200 active:scale-95',
+          'cursor-pointer select-none',
+          'rounded-r-full pl-0.5 pr-1 py-1',
+          'hover:bg-accent/40',
+        )}
+        aria-label={`Go to ${leftDest.label}`}
+      >
+        <ChevronLeft
+          className="size-5 shrink-0 transition-transform duration-300 group-hover:scale-110"
+          style={{ animation: 'room-arrow-nudge-left 2.5s ease-in-out infinite' } as CSSProperties}
+        />
+        <span
+          className={cn(
+            'text-[10px] font-medium leading-none whitespace-nowrap',
+            'transition-all duration-200',
+            isMobile
+              ? 'max-w-[60px] opacity-60'
+              : 'max-w-0 opacity-0 group-hover:max-w-[80px] group-hover:opacity-70 group-focus-visible:max-w-[80px] group-focus-visible:opacity-70',
+            'overflow-hidden',
+          )}
+        >
+          {leftDest.label}
+        </span>
+      </button>
+
+      <button
+        onClick={goRight}
+        className={cn(
+          'group absolute right-0 top-1/2 -translate-y-1/2 z-40',
+          'flex items-center gap-0',
+          'text-muted-foreground/40 hover:text-foreground/70',
+          'transition-all duration-200 active:scale-95',
+          'cursor-pointer select-none',
+          'rounded-l-full pr-0.5 pl-1 py-1',
+          'hover:bg-accent/40',
+        )}
+        aria-label={`Go to ${rightDest.label}`}
+      >
+        <span
+          className={cn(
+            'text-[10px] font-medium leading-none whitespace-nowrap',
+            'transition-all duration-200',
+            isMobile
+              ? 'max-w-[60px] opacity-60'
+              : 'max-w-0 opacity-0 group-hover:max-w-[80px] group-hover:opacity-70 group-focus-visible:max-w-[80px] group-focus-visible:opacity-70',
+            'overflow-hidden',
+          )}
+        >
+          {rightDest.label}
+        </span>
+        <ChevronRight
+          className="size-5 shrink-0 transition-transform duration-300 group-hover:scale-110"
+          style={{ animation: 'room-arrow-nudge-right 2.5s ease-in-out infinite' } as CSSProperties}
+        />
+      </button>
+    </div>
+  );
+}

src/blobbi/rooms/components/ItemCarousel.tsx

@@ -0,0 +1,166 @@
+// src/blobbi/rooms/components/ItemCarousel.tsx
+
+/**
+ * ItemCarousel — Single-focus carousel for room items.
+ *
+ * Layout stability guarantees:
+ * - The entire carousel width is deterministic (arrows + previews + focus slot)
+ * - Focused item uses a fixed-size container with overflow-hidden
+ * - Label is clamped to a fixed max-width and single line
+ * - Switching items never causes reflow or arrow movement
+ *
+ * Mobile:  focused item only + compact arrows (no prev/next previews)
+ * Desktop: focused item + translucent prev/next previews + arrows
+ */
+
+import { useState, useCallback } from 'react';
+import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface CarouselEntry {
+  id: string;
+  /** Emoji string or ReactNode rendered at large size */
+  icon: React.ReactNode;
+  label: string;
+  /** Optional metadata attached to the entry (e.g. item type) */
+  meta?: string;
+}
+
+interface ItemCarouselProps {
+  items: CarouselEntry[];
+  /** Called when the user taps the focused item */
+  onUse: (id: string) => void;
+  /** Item id currently being used (shows spinner) */
+  activeItemId?: string | null;
+  /** Whether any action is in progress */
+  disabled?: boolean;
+  /** Called when the focused item changes (for conditional side actions) */
+  onFocusChange?: (entry: CarouselEntry) => void;
+  className?: string;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function ItemCarousel({
+  items,
+  onUse,
+  activeItemId,
+  disabled,
+  onFocusChange,
+  className,
+}: ItemCarouselProps) {
+  const [index, setIndex] = useState(0);
+
+  const count = items.length;
+
+  const prev = useCallback(() => {
+    setIndex(i => {
+      const n = (i - 1 + count) % count;
+      onFocusChange?.(items[n]);
+      return n;
+    });
+  }, [count, items, onFocusChange]);
+
+  const next = useCallback(() => {
+    setIndex(i => {
+      const n = (i + 1) % count;
+      onFocusChange?.(items[n]);
+      return n;
+    });
+  }, [count, items, onFocusChange]);
+
+  if (count === 0) {
+    return (
+      // Empty state matches the height of a populated carousel
+      <div className={cn('flex items-center justify-center h-[4.5rem] sm:h-[5.5rem]', className)}>
+        <p className="text-xs text-muted-foreground/50">Nothing here yet</p>
+      </div>
+    );
+  }
+
+  const current = items[index];
+  const prevItem = items[(index - 1 + count) % count];
+  const nextItem = items[(index + 1) % count];
+  const isThisActive = activeItemId === current.id;
+  const showPreviews = count >= 3;
+
+  return (
+    <div className={cn('flex items-center justify-center', className)}>
+      {/* Left arrow — fixed 28/32px */}
+      <button
+        onClick={prev}
+        disabled={disabled}
+        className={cn(
+          'size-7 sm:size-8 rounded-full flex items-center justify-center shrink-0',
+          'text-muted-foreground/40 hover:text-foreground/70 hover:bg-accent/40',
+          'transition-all duration-200 active:scale-90',
+          disabled && 'opacity-30 pointer-events-none',
+        )}
+        aria-label="Previous item"
+      >
+        <ChevronLeft className="size-4" />
+      </button>
+
+      {/* Preview (prev) — desktop only, fixed 40x48px slot */}
+      {showPreviews && (
+        <div className="hidden sm:flex items-center justify-center w-10 h-12 shrink-0 overflow-hidden pointer-events-none select-none">
+          <div className="opacity-20 scale-[0.6]">
+            <span className="text-2xl leading-none block">{prevItem.icon}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Focused item — FIXED 80x72 / 96x88 container, never resizes */}
+      <button
+        onClick={() => onUse(current.id)}
+        disabled={disabled}
+        className={cn(
+          'relative flex flex-col items-center justify-center shrink-0 overflow-hidden',
+          'w-20 h-[4.5rem] sm:w-24 sm:h-[5.5rem] rounded-2xl',
+          'transition-colors duration-200',
+          'hover:bg-accent/20 active:scale-95',
+          isThisActive && 'bg-accent/40',
+          disabled && !isThisActive && 'opacity-50 pointer-events-none',
+        )}
+      >
+        <span className="text-4xl sm:text-5xl leading-none">
+          {current.icon}
+        </span>
+        {/* Label: fixed max-width, single line, ellipsis */}
+        <span className="text-[10px] sm:text-xs font-medium text-foreground/70 mt-0.5 w-16 sm:w-20 text-center truncate">
+          {current.label}
+        </span>
+        {isThisActive && (
+          <Loader2 className="size-3.5 animate-spin text-primary absolute bottom-0.5" />
+        )}
+      </button>
+
+      {/* Preview (next) — desktop only, fixed 40x48px slot */}
+      {showPreviews && (
+        <div className="hidden sm:flex items-center justify-center w-10 h-12 shrink-0 overflow-hidden pointer-events-none select-none">
+          <div className="opacity-20 scale-[0.6]">
+            <span className="text-2xl leading-none block">{nextItem.icon}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Right arrow — fixed 28/32px */}
+      <button
+        onClick={next}
+        disabled={disabled}
+        className={cn(
+          'size-7 sm:size-8 rounded-full flex items-center justify-center shrink-0',
+          'text-muted-foreground/40 hover:text-foreground/70 hover:bg-accent/40',
+          'transition-all duration-200 active:scale-90',
+          disabled && 'opacity-30 pointer-events-none',
+        )}
+        aria-label="Next item"
+      >
+        <ChevronRight className="size-4" />
+      </button>
+    </div>
+  );
+}

src/blobbi/rooms/components/RoomActionButton.tsx

@@ -0,0 +1,79 @@
+// src/blobbi/rooms/components/RoomActionButton.tsx
+
+/**
+ * RoomActionButton — Unified circular action button for all rooms.
+ *
+ * Responsive sizing:
+ * - Mobile: size-14 circle, size-7 icons
+ * - Desktop (sm+): size-20 circle, size-9 icons
+ *
+ * Matches the soft radial glow of the original Photo / Companion buttons
+ * but at a smaller scale so the bottom bar feels proportional on mobile.
+ */
+
+import { Loader2 } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+interface RoomActionButtonProps {
+  /** Lucide icon or emoji element rendered inside the circle */
+  icon: React.ReactNode;
+  /** Small text label below the circle */
+  label: string;
+  /** CSS colour class applied to the icon (e.g. 'text-pink-500') */
+  color: string;
+  /** Hex colour used for the radial glow background */
+  glowHex: string;
+  onClick: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  /** Optional badge content rendered at top-right of the circle */
+  badge?: React.ReactNode;
+  className?: string;
+}
+
+export function RoomActionButton({
+  icon,
+  label,
+  color,
+  glowHex,
+  onClick,
+  disabled,
+  loading,
+  badge,
+  className,
+}: RoomActionButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        'flex flex-col items-center gap-1 transition-all duration-300 ease-out shrink-0',
+        'hover:-translate-y-1 hover:scale-110 active:scale-95',
+        disabled && 'opacity-50 pointer-events-none',
+        className,
+      )}
+    >
+      <div className="relative">
+        <div
+          className={cn('size-14 sm:size-20 rounded-full flex items-center justify-center', color)}
+          style={{
+            background: `radial-gradient(circle at 40% 35%, color-mix(in srgb, ${glowHex} 14%, transparent), color-mix(in srgb, ${glowHex} 4%, transparent) 70%)`,
+          }}
+        >
+          {loading ? (
+            <Loader2 className="size-7 sm:size-9 animate-spin" />
+          ) : (
+            icon
+          )}
+        </div>
+        {badge && (
+          <div className="absolute -top-0.5 -right-0.5">
+            {badge}
+          </div>
+        )}
+      </div>
+      <span className="text-[10px] sm:text-xs font-medium text-muted-foreground">{label}</span>
+    </button>
+  );
+}

src/blobbi/rooms/index.ts

@@ -0,0 +1,20 @@
+// src/blobbi/rooms/index.ts — barrel export
+
+export {
+  type BlobbiRoomId,
+  type BlobbiRoomMeta,
+  ROOM_META,
+  DEFAULT_ROOM_ORDER,
+  DEFAULT_INITIAL_ROOM,
+  getNextRoom,
+  getPreviousRoom,
+  getRoomIndex,
+} from './lib/room-config';
+
+export { BlobbiRoomShell } from './components/BlobbiRoomShell';
+export { BlobbiHomeRoom } from './components/BlobbiHomeRoom';
+export { BlobbiKitchenRoom } from './components/BlobbiKitchenRoom';
+export { BlobbiCareRoom } from './components/BlobbiCareRoom';
+export { BlobbiHatcheryRoom } from './components/BlobbiHatcheryRoom';
+export { BlobbiRestRoom } from './components/BlobbiRestRoom';
+export { BlobbiClosetRoom } from './components/BlobbiClosetRoom';

src/blobbi/rooms/lib/poop-system.ts

@@ -0,0 +1,137 @@
+// src/blobbi/rooms/lib/poop-system.ts
+
+/**
+ * Temporary local-only poop system.
+ *
+ * Generates poop based on:
+ * A) Overfeeding: hunger >= 95 -> poop in kitchen
+ * B) Time elapsed: every 2 hours since last feed -> poop in a random room
+ *
+ * This is entirely ephemeral -- no persistence to Nostr or localStorage.
+ * The state is generated fresh on page load and managed in React state.
+ */
+
+import type { BlobbiRoomId } from './room-config';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface PoopInstance {
+  id: string;
+  room: BlobbiRoomId;
+  /** 'overfeed' poops are kitchen-only and disappear on room change */
+  source: 'overfeed' | 'time';
+  /** Timestamp when this poop was generated */
+  createdAt: number;
+  /**
+   * Safe-zone position for this poop.
+   * Kept as % offsets so the layout stays responsive.
+   * Positions are in the lower-left and lower-right corners,
+   * avoiding the central Blobbi hero area.
+   */
+  position: { bottom: number; left: number };
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const OVERFEED_THRESHOLD = 95;
+const HOURS_PER_POOP = 2;
+const XP_PER_POOP = 5;
+
+/** Rooms where time-based poop can appear (not closet) */
+const POOP_ELIGIBLE_ROOMS: BlobbiRoomId[] = ['care', 'kitchen', 'home', 'hatchery', 'rest'];
+
+/**
+ * Pre-defined safe positions in the lower corners of the room.
+ * Values are percentages. These avoid the central hero area
+ * (roughly 30%–70% horizontal, above 35% vertical).
+ */
+const SAFE_POSITIONS: Array<{ bottom: number; left: number }> = [
+  { bottom: 22, left: 8 },   // lower-left
+  { bottom: 18, left: 78 },  // lower-right
+  { bottom: 28, left: 14 },  // mid-left
+  { bottom: 25, left: 82 },  // mid-right
+  { bottom: 15, left: 20 },  // bottom-left-ish
+  { bottom: 20, left: 72 },  // bottom-right-ish
+];
+
+// ─── Generation ───────────────────────────────────────────────────────────────
+
+let _idCounter = 0;
+function nextPoopId(): string {
+  return `poop_${++_idCounter}_${Date.now()}`;
+}
+
+function pickPosition(index: number): { bottom: number; left: number } {
+  return SAFE_POSITIONS[index % SAFE_POSITIONS.length];
+}
+
+/**
+ * Generate initial poop instances based on current companion state.
+ * Called once when the dashboard mounts.
+ */
+export function generateInitialPoops(
+  hunger: number,
+  lastFeedTimestamp: number | undefined,
+): PoopInstance[] {
+  const poops: PoopInstance[] = [];
+  const now = Date.now();
+  let posIndex = 0;
+
+  // A) Overfeeding poop -- kitchen only
+  if (hunger >= OVERFEED_THRESHOLD) {
+    poops.push({
+      id: nextPoopId(),
+      room: 'kitchen',
+      source: 'overfeed',
+      createdAt: now,
+      position: pickPosition(posIndex++),
+    });
+  }
+
+  // B) Time-based poop -- random room
+  if (lastFeedTimestamp) {
+    const hoursSinceFeed = (now - lastFeedTimestamp) / (1000 * 60 * 60);
+    const poopCount = Math.floor(hoursSinceFeed / HOURS_PER_POOP);
+    for (let i = 0; i < Math.min(poopCount, 3); i++) {
+      const room = POOP_ELIGIBLE_ROOMS[Math.floor(Math.random() * POOP_ELIGIBLE_ROOMS.length)];
+      poops.push({
+        id: nextPoopId(),
+        room,
+        source: 'time',
+        createdAt: now - i * 1000,
+        position: pickPosition(posIndex++),
+      });
+    }
+  }
+
+  return poops;
+}
+
+/**
+ * Get poops visible in a specific room.
+ */
+export function getPoopsInRoom(poops: PoopInstance[], room: BlobbiRoomId): PoopInstance[] {
+  return poops.filter(p => p.room === room);
+}
+
+/**
+ * Remove a poop by id and return the XP reward.
+ */
+export function removePoop(
+  poops: PoopInstance[],
+  poopId: string,
+): { remaining: PoopInstance[]; xpReward: number } {
+  const remaining = poops.filter(p => p.id !== poopId);
+  const wasRemoved = remaining.length < poops.length;
+  return {
+    remaining,
+    xpReward: wasRemoved ? XP_PER_POOP : 0,
+  };
+}
+
+/**
+ * Check if any poop exists anywhere.
+ */
+export function hasAnyPoop(poops: PoopInstance[]): boolean {
+  return poops.length > 0;
+}

src/blobbi/rooms/lib/room-config.ts

@@ -0,0 +1,144 @@
+// src/blobbi/rooms/lib/room-config.ts
+
+/**
+ * Blobbi Room System — Configuration & Navigation
+ *
+ * This module defines the room types, default ordering, and navigation helpers.
+ * The design supports future per-user customisation: the default order is data,
+ * not hardcoded control flow, so it can be replaced with a user-stored sequence.
+ */
+
+// ─── Room IDs ─────────────────────────────────────────────────────────────────
+
+/**
+ * Unique identifier for each room in the Blobbi world.
+ * New rooms can be added here without breaking existing code.
+ */
+export type BlobbiRoomId = 'care' | 'kitchen' | 'home' | 'hatchery' | 'rest' | 'closet';
+
+// ─── Room Metadata ────────────────────────────────────────────────────────────
+
+export interface BlobbiRoomMeta {
+  /** Unique room identifier */
+  id: BlobbiRoomId;
+  /** Human-readable display label */
+  label: string;
+  /** Short description (for tooltips / accessibility) */
+  description: string;
+  /** Emoji icon representing the room */
+  icon: string;
+}
+
+/**
+ * Static metadata for every room.
+ * This is a lookup — order does NOT matter here.
+ */
+export const ROOM_META: Record<BlobbiRoomId, BlobbiRoomMeta> = {
+  care: {
+    id: 'care',
+    label: 'Care Room',
+    description: 'Hygiene, care, and medicine',
+    icon: '🩹',
+  },
+  kitchen: {
+    id: 'kitchen',
+    label: 'Kitchen',
+    description: 'Feed your Blobbi',
+    icon: '🍳',
+  },
+  home: {
+    id: 'home',
+    label: 'Home',
+    description: 'Main living room',
+    icon: '🏠',
+  },
+  hatchery: {
+    id: 'hatchery',
+    label: 'Hatchery',
+    description: 'Evolution and quests',
+    icon: '🥚',
+  },
+  rest: {
+    id: 'rest',
+    label: 'Bedroom',
+    description: 'Rest and recharge',
+    icon: '🌙',
+  },
+  closet: {
+    id: 'closet',
+    label: 'Closet',
+    description: 'Wardrobe and accessories',
+    icon: '👗',
+  },
+};
+
+// ─── Default Room Order ───────────────────────────────────────────────────────
+
+/**
+ * The default room sequence.
+ *
+ * IMPORTANT: This array is the ONLY place that defines order.
+ * To support per-user customisation later, replace this with
+ * a user-stored array of BlobbiRoomId values.
+ *
+ * Closet is excluded for now (not yet implemented).
+ * To re-enable, add 'closet' back to the array.
+ */
+export const DEFAULT_ROOM_ORDER: BlobbiRoomId[] = [
+  'care',
+  'kitchen',
+  'home',
+  'hatchery',
+  'rest',
+  // 'closet', — re-enable when wardrobe feature is ready
+];
+
+/**
+ * The room that should be selected when the dashboard first loads.
+ */
+export const DEFAULT_INITIAL_ROOM: BlobbiRoomId = 'home';
+
+// ─── Navigation Helpers ───────────────────────────────────────────────────────
+
+/**
+ * Get the next room in a looping sequence.
+ *
+ * @param current - The currently active room
+ * @param order   - The room sequence (defaults to DEFAULT_ROOM_ORDER)
+ * @returns The next room id (wraps around)
+ */
+export function getNextRoom(
+  current: BlobbiRoomId,
+  order: BlobbiRoomId[] = DEFAULT_ROOM_ORDER,
+): BlobbiRoomId {
+  const idx = order.indexOf(current);
+  if (idx === -1) return order[0];
+  return order[(idx + 1) % order.length];
+}
+
+/**
+ * Get the previous room in a looping sequence.
+ *
+ * @param current - The currently active room
+ * @param order   - The room sequence (defaults to DEFAULT_ROOM_ORDER)
+ * @returns The previous room id (wraps around)
+ */
+export function getPreviousRoom(
+  current: BlobbiRoomId,
+  order: BlobbiRoomId[] = DEFAULT_ROOM_ORDER,
+): BlobbiRoomId {
+  const idx = order.indexOf(current);
+  if (idx === -1) return order[order.length - 1];
+  return order[(idx - 1 + order.length) % order.length];
+}
+
+/**
+ * Get the index of a room in the order array.
+ * Returns -1 if the room is not in the order.
+ */
+export function getRoomIndex(
+  room: BlobbiRoomId,
+  order: BlobbiRoomId[] = DEFAULT_ROOM_ORDER,
+): number {
+  return order.indexOf(room);
+}

src/blobbi/rooms/lib/room-layout.ts

@@ -0,0 +1,15 @@
+// src/blobbi/rooms/lib/room-layout.ts
+
+/**
+ * Shared layout constants for Blobbi room components.
+ */
+
+/**
+ * CSS class for the bottom action bar in every room.
+ *
+ * On mobile/tablet (max-sidebar), adds extra bottom padding so the
+ * room controls clear the app's fixed bottom navigation bar.
+ * On desktop (sidebar:), uses normal padding since there's no bottom nav.
+ */
+export const ROOM_BOTTOM_BAR_CLASS =
+  'relative z-10 px-3 sm:px-6 pt-1 pb-4 sm:pb-6 max-sidebar:pb-[calc(var(--bottom-nav-height)+env(safe-area-inset-bottom,0px)+1rem)]';

src/blobbi/rooms/lib/room-types.ts

@@ -0,0 +1,196 @@
+// src/blobbi/rooms/lib/room-types.ts
+
+/**
+ * Shared prop types for Blobbi room components.
+ *
+ * These types are the "contract" that the BlobbiDashboard passes down
+ * to each room. They mirror the existing BlobbiDashboard internal state
+ * so rooms can reuse all existing logic without duplication.
+ */
+
+import type { NostrEvent } from '@nostrify/nostrify';
+
+import type { BlobbiCompanion, BlobbonautProfile, StorageItem } from '@/blobbi/core/lib/blobbi';
+import type {
+  InventoryAction,
+  DirectAction,
+  InlineActivityState,
+  BlobbiReactionState,
+  SelectedTrack,
+  StartIncubationMode,
+} from '@/blobbi/actions';
+import type { useHatchTasks, useEvolveTasks, useDailyMissions } from '@/blobbi/actions';
+import type { BlobbiEmotion } from '@/blobbi/ui/lib/emotion-types';
+import type { BlobbiVisualRecipe } from '@/blobbi/ui/lib/recipe';
+import type { ShopItem } from '@/blobbi/shop/types/shop.types';
+
+// ─── Shared Dashboard Context ─────────────────────────────────────────────────
+
+/**
+ * Everything a room needs from the dashboard.
+ * Passed down by BlobbiRoomShell so rooms don't import dashboard state directly.
+ */
+export interface BlobbiRoomContext {
+  // ── Core data ──
+  companion: BlobbiCompanion;
+  companions: BlobbiCompanion[];
+  selectedD: string;
+  profile: BlobbonautProfile | null;
+
+  // ── Projected / visual state ──
+  currentStats: {
+    hunger: number;
+    happiness: number;
+    health: number;
+    hygiene: number;
+    energy: number;
+  };
+  isSleeping: boolean;
+  isEgg: boolean;
+  isBaby: boolean;
+
+  // ── Visual recipe ──
+  statusRecipe: BlobbiVisualRecipe | undefined;
+  statusRecipeLabel: string | undefined;
+  effectiveEmotion: BlobbiEmotion;
+  hasDevOverride: boolean;
+  blobbiReaction: BlobbiReactionState;
+
+  // ── Item use ──
+  onUseItem: (itemId: string, action: InventoryAction) => Promise<void>;
+  handleUseItemFromTab: (itemId: string) => void;
+  isUsingItem: boolean;
+  usingItemId: string | null;
+  allShopItems: ShopItem[];
+
+  // ── Direct actions ──
+  onDirectAction: (action: DirectAction) => Promise<void>;
+  handleDirectAction: (action: DirectAction) => void;
+  isDirectActionPending: boolean;
+
+  // ── Inline activity (music/sing) ──
+  inlineActivity: InlineActivityState;
+  setInlineActivity: React.Dispatch<React.SetStateAction<InlineActivityState>>;
+  setBlobbiReaction: React.Dispatch<React.SetStateAction<BlobbiReactionState>>;
+  setActionOverrideEmotion: React.Dispatch<React.SetStateAction<BlobbiEmotion | null>>;
+  showTrackPickerModal: boolean;
+  setShowTrackPickerModal: React.Dispatch<React.SetStateAction<boolean>>;
+  handleTrackSelected: (selection: SelectedTrack) => Promise<void>;
+  handleConfirmSing: () => Promise<void>;
+  handleCloseInlineActivity: () => void;
+  handleMusicPlaybackStart: () => void;
+  handleMusicPlaybackStop: () => void;
+  handleSingRecordingStart: () => void;
+  handleSingRecordingStop: () => void;
+  handleChangeTrack: () => void;
+
+  // ── Rest / sleep ──
+  onRest: () => void;
+  actionInProgress: string | null;
+  isPublishing: boolean;
+
+  // ── Companion toggle ──
+  isCurrentCompanion: boolean;
+  canBeCompanion: boolean;
+  isUpdatingCompanion: boolean;
+  isActiveFloatingCompanion: boolean;
+  handleSetAsCompanion: () => Promise<void>;
+
+  // ── Photo ──
+  showPhotoModal: boolean;
+  setShowPhotoModal: React.Dispatch<React.SetStateAction<boolean>>;
+
+  // ── Blobbi selector ──
+  onSelectBlobbi: (d: string) => void;
+
+  // ── Incubation / Evolution / Tasks ──
+  isIncubating: boolean;
+  isEvolvingState: boolean;
+  canStartIncubation: boolean;
+  canStartEvolution: boolean;
+  isStartingIncubation: boolean;
+  isStartingEvolution: boolean;
+  isStoppingIncubation: boolean;
+  isStoppingEvolution: boolean;
+  isHatching: boolean;
+  isEvolving: boolean;
+  hatchTasks: ReturnType<typeof useHatchTasks>;
+  evolveTasks: ReturnType<typeof useEvolveTasks>;
+  onStartIncubation: (mode: StartIncubationMode, stopOtherD?: string) => Promise<void>;
+  onStartEvolution: () => Promise<void>;
+  onStopIncubation: () => Promise<void>;
+  onStopEvolution: () => Promise<void>;
+  onHatch: () => Promise<void>;
+  onEvolve: () => Promise<void>;
+  showPostModal: boolean;
+  setShowPostModal: React.Dispatch<React.SetStateAction<boolean>>;
+  refetchCurrentTasks: () => void;
+
+  // ── Daily missions ──
+  dailyMissions: ReturnType<typeof useDailyMissions>;
+  onClaimReward: (id: string) => void;
+  isClaimingReward: boolean;
+  availableStages: ('egg' | 'baby' | 'adult')[];
+
+  // ── Adoption ──
+  showAdoptionFlow: boolean;
+  setShowAdoptionFlow: React.Dispatch<React.SetStateAction<boolean>>;
+
+  // ── Adoption + Profile update props ──
+  publishEvent: (params: { kind: number; content: string; tags: string[][] }) => Promise<NostrEvent>;
+  updateProfileEvent: (event: NostrEvent) => void;
+  updateCompanionEvent: (event: NostrEvent) => void;
+  invalidateProfile: () => void;
+  invalidateCompanion: () => void;
+  setStoredSelectedD: (d: string) => void;
+  ensureCanonicalBeforeAction: () => Promise<{
+    companion: BlobbiCompanion;
+    content: string;
+    allTags: string[][];
+    wasMigrated: boolean;
+    profileAllTags: string[][];
+    profileStorage: StorageItem[];
+  } | null>;
+
+  // ── Naddr link ──
+  blobbiNaddr: string;
+
+  // ── Hero measurement ──
+  /** Callback ref for the hero container — re-attaches ResizeObserver on room switch */
+  heroRef: React.RefCallback<HTMLDivElement> | React.RefObject<HTMLDivElement | null>;
+  heroWidth: number;
+
+  // ── DEV ONLY ──
+  showDevEditor: boolean;
+  setShowDevEditor: (show: boolean) => void;
+  onDevEditorApply: (updates: import('@/blobbi/dev').BlobbiDevUpdates) => Promise<void>;
+  isDevUpdating: boolean;
+  showEmotionPanel: boolean;
+  setShowEmotionPanel: React.Dispatch<React.SetStateAction<boolean>>;
+  showProgressionPanel: boolean;
+  setShowProgressionPanel: React.Dispatch<React.SetStateAction<boolean>>;
+  showHatchCeremony: boolean;
+  setShowHatchCeremony: React.Dispatch<React.SetStateAction<boolean>>;
+
+  // ── Inventory modal (still used in kitchen) ──
+  inventoryAction: InventoryAction | null;
+  setInventoryAction: React.Dispatch<React.SetStateAction<InventoryAction | null>>;
+
+  // ── Last feed timestamp (for poop system) ──
+  lastFeedTimestamp: number | undefined;
+}
+
+// ─── Poop State (passed from shell to rooms) ──────────────────────────────────
+
+import type { PoopInstance } from './poop-system';
+
+export interface RoomPoopState {
+  /** All poop instances across rooms */
+  poops: PoopInstance[];
+  /** Whether shovel mode is currently active */
+  shovelMode: boolean;
+  /** Toggle shovel mode on/off */
+  setShovelMode: React.Dispatch<React.SetStateAction<boolean>>;
+  /** Remove a poop (returns XP reward via callback) */
+  onRemovePoop: (poopId: string) => void;
+}

src/blobbi/shop/components/BlobbiInventoryModal.tsx

@@ -1,17 +1,15 @@
-import { useMemo, useState } from 'react';
-import { Package, Loader2, Minus, Plus, X } from 'lucide-react';
+import { useMemo } from 'react';
+import { Package, Loader2, X } from 'lucide-react';
 
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogFooter,
   DialogClose,
 } from '@/components/ui/dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import {
   Tooltip,
   TooltipContent,
@@ -20,7 +18,7 @@ import {
 
 import type { BlobbiCompanion, BlobbonautProfile } from '@/blobbi/core/lib/blobbi';
 import type { ShopItem } from '../types/shop.types';
-import { getShopItemById } from '../lib/blobbi-shop-items';
+import { getLiveShopItems } from '../lib/blobbi-shop-items';
 import { canUseItemForStage } from '@/blobbi/actions/lib/blobbi-action-utils';
 import { cn } from '@/lib/utils';
 import { ItemEffectDisplay } from './ItemEffectDisplay';
@@ -31,228 +29,169 @@ interface BlobbiInventoryModalProps {
   profile: BlobbonautProfile | null;
   /** The current companion (needed for stage-based restrictions) */
   companion: BlobbiCompanion | null;
-  /** Called when user wants to use an item. Opens the use flow. */
-  onUseItem?: (itemId: string, quantity: number) => void;
+  /** Called when user wants to use an item. Always uses once. */
+  onUseItem?: (itemId: string) => void;
   /** Whether an item is currently being used */
   isUsingItem?: boolean;
 }
 
-/** Resolved inventory item with shop metadata and usability info */
+/** Resolved catalog item with shop metadata and usability info */
 interface ResolvedInventoryItem extends ShopItem {
   itemId: string;
-  quantity: number;
   canUse: boolean;
   reason?: string;
 }
 
-// ── Shared inventory content (used by both standalone modal and unified shop modal) ──
+// ── Shared items content (used by both standalone modal and unified shop modal) ──
 
 interface BlobbiInventoryContentProps {
   profile: BlobbonautProfile | null;
   companion: BlobbiCompanion | null;
-  onUseItem?: (itemId: string, quantity: number) => void;
+  onUseItem?: (itemId: string) => void;
   isUsingItem?: boolean;
 }
 
 export function BlobbiInventoryContent({
-  profile,
+  profile: _profile,
   companion,
   onUseItem,
   isUsingItem = false,
 }: BlobbiInventoryContentProps) {
-  const [selectedItem, setSelectedItem] = useState<ResolvedInventoryItem | null>(null);
-  const [quantity, setQuantity] = useState(1);
-  const [showUseDialog, setShowUseDialog] = useState(false);
-
   const inventoryItems = useMemo((): ResolvedInventoryItem[] => {
-    if (!profile) return [];
     const stage = companion?.stage ?? 'egg';
+    const allItems = getLiveShopItems();
 
     const result: ResolvedInventoryItem[] = [];
-    for (const storageItem of profile.storage) {
-      const item = getShopItemById(storageItem.itemId);
-      if (!item) continue;
-
-      const usability = canUseItemForStage(storageItem.itemId, stage);
+    for (const item of allItems) {
+      const usability = canUseItemForStage(item.id, stage);
 
       result.push({
         ...item,
-        itemId: storageItem.itemId,
-        quantity: storageItem.quantity,
+        itemId: item.id,
         canUse: usability.canUse,
         reason: usability.reason,
       });
     }
     return result;
-  }, [profile, companion?.stage]);
+  }, [companion?.stage]);
 
   const isEmpty = inventoryItems.length === 0;
 
-  const handleSelectItem = (item: ResolvedInventoryItem) => {
-    if (!item.canUse || isUsingItem) return;
-    setSelectedItem(item);
-    setQuantity(1);
-    setShowUseDialog(true);
-  };
-
-  const handleConfirmUse = () => {
-    if (!selectedItem || !onUseItem || isUsingItem) return;
-    onUseItem(selectedItem.itemId, quantity);
-    setShowUseDialog(false);
-    setSelectedItem(null);
-    setQuantity(1);
-  };
-
-  const handleCloseUseDialog = (isOpen: boolean) => {
-    if (!isOpen) {
-      setShowUseDialog(false);
-      setSelectedItem(null);
-      setQuantity(1);
-    }
-  };
-
-  const maxQuantity = selectedItem?.quantity ?? 1;
-  const handleIncrease = () => setQuantity(q => Math.min(q + 1, maxQuantity));
-  const handleDecrease = () => setQuantity(q => Math.max(q - 1, 1));
-  const handleQuantityInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-    if (isNaN(value) || value < 1) {
-      setQuantity(1);
-    } else {
-      setQuantity(Math.min(value, maxQuantity));
-    }
+  const handleUseItem = (item: ResolvedInventoryItem) => {
+    if (!item.canUse || isUsingItem || !onUseItem) return;
+    onUseItem(item.itemId);
   };
 
   return (
-    <>
-      <div className="px-4 sm:px-6 py-3 sm:py-4">
-        {isEmpty ? (
-          <div className="flex flex-col items-center justify-center py-16 text-center">
-            <div className="size-20 rounded-3xl bg-muted/50 flex items-center justify-center mb-4">
-              <Package className="size-10 text-muted-foreground" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">No Items Yet</h3>
-            <p className="text-sm text-muted-foreground max-w-sm">
-              Visit the Shop tab to purchase items for your Blobbi. Items you buy will appear here.
-            </p>
+    <div className="px-4 sm:px-6 py-3 sm:py-4">
+      {isEmpty ? (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="size-20 rounded-3xl bg-muted/50 flex items-center justify-center mb-4">
+            <Package className="size-10 text-muted-foreground" />
           </div>
-        ) : (
-          <div className="grid gap-2 sm:gap-3">
-            {inventoryItems.map(item => (
-              <div
-                key={item.itemId}
-                className={cn(
-                  "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 p-3 sm:p-4 rounded-xl border bg-card/60 backdrop-blur-sm transition-colors",
-                  item.canUse ? "hover:border-primary/30" : "opacity-70"
-                )}
-              >
-                {/* Top row on mobile: Icon + Name/Type + Quantity + Button */}
-                <div className="flex items-center gap-3 sm:contents">
-                  {/* Item Icon */}
-                  <div className="relative shrink-0">
-                    <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-primary/5 rounded-full blur-xl" />
-                    <div className={cn(
-                      "relative size-10 sm:size-14 rounded-full bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center text-2xl sm:text-3xl",
-                      !item.canUse && "grayscale"
-                    )}>
-                      {item.icon}
-                    </div>
+          <h3 className="text-lg font-semibold mb-2">No Items Available</h3>
+          <p className="text-sm text-muted-foreground max-w-sm">
+            No items are available for your Blobbi's current stage.
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-2 sm:gap-3">
+          {inventoryItems.map(item => (
+            <div
+              key={item.itemId}
+              className={cn(
+                "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 p-3 sm:p-4 rounded-xl border bg-card/60 backdrop-blur-sm transition-colors",
+                item.canUse ? "hover:border-primary/30" : "opacity-70"
+              )}
+            >
+              {/* Top row on mobile: Icon + Name/Type + Button */}
+              <div className="flex items-center gap-3 sm:contents">
+                {/* Item Icon */}
+                <div className="relative shrink-0">
+                  <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-primary/5 rounded-full blur-xl" />
+                  <div className={cn(
+                    "relative size-10 sm:size-14 rounded-full bg-gradient-to-br from-primary/10 to-primary/5 flex items-center justify-center text-2xl sm:text-3xl",
+                    !item.canUse && "grayscale"
+                  )}>
+                    {item.icon}
                   </div>
-
-                  {/* Item Info - Name and Type */}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 mb-0.5 sm:mb-1">
-                      <h3 className="font-semibold text-sm sm:text-base truncate">{item.name}</h3>
-                      <Badge variant="secondary" className="text-xs capitalize shrink-0 hidden sm:inline-flex">
-                        {item.type}
-                      </Badge>
-                    </div>
-                    {/* Effect preview - desktop only inline */}
-                    <div className="hidden sm:block">
-                      <ItemEffectDisplay effect={item.effect} variant="inline" />
-                    </div>
-                    {/* Show blocked reason - desktop only inline */}
-                    {!item.canUse && item.reason && (
-                      <p className="hidden sm:block text-xs text-amber-600 dark:text-amber-400 mt-1">
-                        {item.reason}
-                      </p>
-                    )}
-                  </div>
-
-                  {/* Quantity Badge */}
-                  <Badge className="bg-gradient-to-r from-blue-500 to-indigo-500 text-white border-0 px-2 py-0.5 shrink-0 text-xs">
-                    ×{item.quantity}
-                  </Badge>
-
-                  {/* Use Button */}
-                  {onUseItem && (
-                    item.canUse ? (
-                      <Button
-                        size="sm"
-                        onClick={() => handleSelectItem(item)}
-                        disabled={isUsingItem}
-                        className="shrink-0"
-                      >
-                        Use
-                      </Button>
-                    ) : (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <span>
-                            <Button
-                              size="sm"
-                              disabled
-                              className="shrink-0"
-                            >
-                              Use
-                            </Button>
-                          </span>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p>{item.reason || 'Cannot use this item'}</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    )
-                  )}
                 </div>
 
-                {/* Mobile only: Effect preview and blocked reason below */}
-                <div className="sm:hidden pl-13 space-y-1">
-                  <div className="flex items-center gap-2">
-                    <Badge variant="secondary" className="text-xs capitalize">
+                {/* Item Info - Name and Type */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-0.5 sm:mb-1">
+                    <h3 className="font-semibold text-sm sm:text-base truncate">{item.name}</h3>
+                    <Badge variant="secondary" className="text-xs capitalize shrink-0 hidden sm:inline-flex">
                       {item.type}
                     </Badge>
+                  </div>
+                  {/* Effect preview - desktop only inline */}
+                  <div className="hidden sm:block">
                     <ItemEffectDisplay effect={item.effect} variant="inline" />
                   </div>
+                  {/* Show blocked reason - desktop only inline */}
                   {!item.canUse && item.reason && (
-                    <p className="text-xs text-amber-600 dark:text-amber-400">
+                    <p className="hidden sm:block text-xs text-amber-600 dark:text-amber-400 mt-1">
                       {item.reason}
                     </p>
                   )}
                 </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
 
-      {/* Use Item Confirmation Dialog */}
-      {selectedItem && companion && (
-        <InventoryUseConfirmDialog
-          open={showUseDialog}
-          onOpenChange={handleCloseUseDialog}
-          item={selectedItem}
-          companion={companion}
-          quantity={quantity}
-          maxQuantity={maxQuantity}
-          onIncrease={handleIncrease}
-          onDecrease={handleDecrease}
-          onQuantityChange={handleQuantityInput}
-          onConfirm={handleConfirmUse}
-          isUsing={isUsingItem}
-        />
+                {/* Use Button */}
+                {onUseItem && (
+                  item.canUse ? (
+                    <Button
+                      size="sm"
+                      onClick={() => handleUseItem(item)}
+                      disabled={isUsingItem}
+                      className="shrink-0"
+                    >
+                      {isUsingItem ? (
+                        <Loader2 className="size-4 animate-spin" />
+                      ) : (
+                        'Use'
+                      )}
+                    </Button>
+                  ) : (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span>
+                          <Button
+                            size="sm"
+                            disabled
+                            className="shrink-0"
+                          >
+                            Use
+                          </Button>
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>{item.reason || 'Cannot use this item'}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  )
+                )}
+              </div>
+
+              {/* Mobile only: Effect preview and blocked reason below */}
+              <div className="sm:hidden pl-13 space-y-1">
+                <div className="flex items-center gap-2">
+                  <Badge variant="secondary" className="text-xs capitalize">
+                    {item.type}
+                  </Badge>
+                  <ItemEffectDisplay effect={item.effect} variant="inline" />
+                </div>
+                {!item.canUse && item.reason && (
+                  <p className="text-xs text-amber-600 dark:text-amber-400">
+                    {item.reason}
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
       )}
-    </>
+    </div>
   );
 }
 
@@ -298,153 +237,3 @@ export function BlobbiInventoryModal({
     </Dialog>
   );
 }
-
-// ─── Use Confirmation Dialog ──────────────────────────────────────────────────
-
-interface InventoryUseConfirmDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  item: ResolvedInventoryItem;
-  companion: BlobbiCompanion;
-  quantity: number;
-  maxQuantity: number;
-  onIncrease: () => void;
-  onDecrease: () => void;
-  onQuantityChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onConfirm: () => void;
-  isUsing: boolean;
-}
-
-function InventoryUseConfirmDialog({
-  open,
-  onOpenChange,
-  item,
-  companion,
-  quantity,
-  maxQuantity,
-  onIncrease,
-  onDecrease,
-  onQuantityChange,
-  onConfirm,
-  isUsing,
-}: InventoryUseConfirmDialogProps) {
-  const totalEffect = useMemo(() => {
-    if (!item.effect) return null;
-    
-    const statKeys = ['hunger', 'happiness', 'energy', 'hygiene', 'health'] as const;
-    const currentStats = { ...companion.stats };
-    
-    for (let i = 0; i < quantity; i++) {
-      for (const stat of statKeys) {
-        const delta = item.effect[stat];
-        if (delta !== undefined) {
-          currentStats[stat] = Math.max(0, Math.min(100, (currentStats[stat] ?? 0) + delta));
-        }
-      }
-    }
-    
-    const result: Record<string, number> = {};
-    for (const stat of statKeys) {
-      const delta = (currentStats[stat] ?? 0) - (companion.stats[stat] ?? 0);
-      if (delta !== 0) {
-        result[stat] = delta;
-      }
-    }
-    
-    return Object.keys(result).length > 0 ? result : null;
-  }, [item.effect, companion.stats, quantity]);
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-sm w-[calc(100%-2rem)]">
-        <DialogHeader>
-          <DialogTitle>Use Item</DialogTitle>
-        </DialogHeader>
-
-        <div className="space-y-4 py-2">
-          {/* Item Preview */}
-          <div className="flex items-center gap-3 sm:gap-4 p-3 sm:p-4 rounded-lg bg-muted/50">
-            <div className="text-3xl sm:text-4xl shrink-0">{item.icon}</div>
-            <div className="flex-1 min-w-0">
-              <h3 className="font-semibold truncate">{item.name}</h3>
-              <p className="text-sm text-muted-foreground">
-                {item.quantity} in inventory
-              </p>
-            </div>
-          </div>
-
-          {/* Quantity Selector */}
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <label className="text-sm font-medium">Quantity</label>
-              <span className="text-xs text-muted-foreground">
-                Max: {maxQuantity}
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={onDecrease}
-                disabled={quantity <= 1 || isUsing}
-              >
-                <Minus className="size-4" />
-              </Button>
-              <Input
-                type="number"
-                min="1"
-                max={maxQuantity}
-                value={quantity}
-                onChange={onQuantityChange}
-                disabled={isUsing}
-                className="text-center"
-              />
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={onIncrease}
-                disabled={quantity >= maxQuantity || isUsing}
-              >
-                <Plus className="size-4" />
-              </Button>
-            </div>
-          </div>
-
-          {/* Effects Summary */}
-          {totalEffect && (
-            <div className="p-4 rounded-lg bg-gradient-to-r from-emerald-500/10 to-green-500/10 border border-emerald-500/20">
-              <h4 className="text-sm font-medium mb-2">
-                Total effect{quantity > 1 ? ` (x${quantity})` : ''}
-              </h4>
-              <ItemEffectDisplay effect={totalEffect} variant="badges" />
-            </div>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={isUsing}
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={onConfirm}
-            disabled={isUsing}
-            className="min-w-24"
-          >
-            {isUsing ? (
-              <>
-                <Loader2 className="size-4 mr-2 animate-spin" />
-                Using...
-              </>
-            ) : (
-              `Use${quantity > 1 ? ` (x${quantity})` : ''}`
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

src/blobbi/shop/components/BlobbiShopModal.tsx

@@ -16,17 +16,16 @@ import {
 
 import type { ShopItem } from '../types/shop.types';
 import type { BlobbiCompanion, BlobbonautProfile } from '@/blobbi/core/lib/blobbi';
-import { getLiveShopItems, getShopItemById } from '../lib/blobbi-shop-items';
+import { getLiveShopItems } from '../lib/blobbi-shop-items';
 import { useBlobbiPurchaseItem } from '../hooks/useBlobbiPurchaseItem';
 import { canUseItemForStage } from '@/blobbi/actions/lib/blobbi-action-utils';
 import { cn, formatCompactNumber } from '@/lib/utils';
 
 type TopTab = 'items' | 'shop';
 
-/** Resolved inventory item with shop metadata and usability info */
+/** Resolved catalog item with shop metadata and usability info */
 interface ResolvedInventoryItem extends ShopItem {
   itemId: string;
-  quantity: number;
   canUse: boolean;
   reason?: string;
 }
@@ -39,7 +38,7 @@ interface BlobbiShopModalProps {
   initialTab?: TopTab;
   // ── Inventory props (passed through) ──
   companion: BlobbiCompanion | null;
-  onUseItem?: (itemId: string, quantity: number) => void;
+  onUseItem?: (itemId: string) => void;
   isUsingItem?: boolean;
 }
 
@@ -80,28 +79,24 @@ export function BlobbiShopModal({
 
   const effectivePurchasingId = isPurchasing ? purchasingItemId : null;
 
-  // ── Inventory items resolution ──
+  // ── Items resolution — sourced from the full catalog (not inventory) ──
   const inventoryItems = useMemo((): ResolvedInventoryItem[] => {
-    if (!profile) return [];
     const stage = companion?.stage ?? 'egg';
+    const allCatalogItems = getLiveShopItems();
 
     const result: ResolvedInventoryItem[] = [];
-    for (const storageItem of profile.storage) {
-      const item = getShopItemById(storageItem.itemId);
-      if (!item) continue;
-
-      const usability = canUseItemForStage(storageItem.itemId, stage);
+    for (const item of allCatalogItems) {
+      const usability = canUseItemForStage(item.id, stage);
 
       result.push({
         ...item,
-        itemId: storageItem.itemId,
-        quantity: storageItem.quantity,
+        itemId: item.id,
         canUse: usability.canUse,
         reason: usability.reason,
       });
     }
     return result;
-  }, [profile, companion?.stage]);
+  }, [companion?.stage]);
 
   // ── Inventory use item handler ──
   const [usingItemId, setUsingItemId] = useState<string | null>(null);
@@ -109,7 +104,7 @@ export function BlobbiShopModal({
   const handleUseItem = (item: ResolvedInventoryItem) => {
     if (!item.canUse || isUsingItem || !onUseItem) return;
     setUsingItemId(item.itemId);
-    onUseItem(item.itemId, 1);
+    onUseItem(item.itemId);
   };
 
   // Clear usingItemId when isUsingItem goes false
@@ -138,7 +133,7 @@ export function BlobbiShopModal({
               Items
               {!inventoryEmpty && (
                 <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-4 min-w-4">
-                  {inventoryItems.reduce((sum, i) => sum + i.quantity, 0)}
+                  {inventoryItems.length}
                 </Badge>
               )}
               {topTab === 'items' && (
@@ -265,7 +260,7 @@ function ShopGrid({ items, availableCoins, onBuy, purchasingItemId }: ShopGridPr
   );
 }
 
-// ─── Items Grid (inventory, tile layout) ──────────────────────────────────────
+// ─── Items Grid (catalog, tile layout) ────────────────────────────────────────
 
 interface ItemsGridProps {
   items: ResolvedInventoryItem[];
@@ -275,20 +270,16 @@ interface ItemsGridProps {
   onGoToShop: () => void;
 }
 
-function ItemsGrid({ items, onUseItem, isUsingItem, usingItemId, onGoToShop }: ItemsGridProps) {
+function ItemsGrid({ items, onUseItem, isUsingItem, usingItemId, onGoToShop: _onGoToShop }: ItemsGridProps) {
   if (items.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-16 px-6 text-center">
         <div className="size-16 rounded-2xl bg-muted/50 flex items-center justify-center mb-4">
           <Package className="size-8 text-muted-foreground/60" />
         </div>
-        <p className="text-sm text-muted-foreground mb-4">
-          No items yet. Visit the shop to stock up!
+        <p className="text-sm text-muted-foreground">
+          No items are available for your Blobbi's current stage.
         </p>
-        <Button variant="outline" size="sm" onClick={onGoToShop} className="gap-2">
-          <ShoppingBag className="size-3.5" />
-          Browse Shop
-        </Button>
       </div>
     );
   }
@@ -308,13 +299,6 @@ function ItemsGrid({ items, onUseItem, isUsingItem, usingItemId, onGoToShop }: I
                 item.canUse ? 'hover:border-primary/40 hover:bg-accent/40' : 'opacity-60',
               )}
             >
-              {/* Quantity badge */}
-              <Badge
-                className="absolute top-1.5 right-1.5 text-[10px] px-1.5 py-0 h-4 min-w-4 bg-gradient-to-r from-blue-500 to-indigo-500 text-white border-0"
-              >
-                {item.quantity}
-              </Badge>
-
               {/* Icon */}
               <div className={cn('text-3xl leading-none mt-1', !item.canUse && 'grayscale')}>{item.icon}</div>
 

src/blobbi/shop/components/ItemEffectDisplay.tsx

@@ -7,7 +7,7 @@
  * Used by:
  * - BlobbiShopItemRow (shop listing)
  * - BlobbiPurchaseDialog (purchase confirmation)
- * - BlobbiInventoryModal (inventory listing)
+ * - BlobbiInventoryModal (items listing)
  * - BlobbiActionInventoryModal (action item selection)
  * 
  * All consumers should use this component to ensure consistent display of item effects.
@@ -192,30 +192,6 @@ export function ItemEffectDisplay({
   return null;
 }
 
-// ─── Utility Exports ──────────────────────────────────────────────────────────
 
-/**
- * Format effects as a summary string (for compatibility with existing code).
- * This is a drop-in replacement for formatEffectSummary in blobbi-shop-utils.ts.
- * 
- * @deprecated Use <ItemEffectDisplay variant="inline" /> instead
- */
-export function formatEffectSummary(effect: ItemEffect | undefined, maxEffects = 4): string {
-  const entries = getSortedEffectEntries(effect);
-  
-  if (entries.length === 0) {
-    return 'No effects';
-  }
-  
-  const displayEntries = maxEffects !== undefined ? entries.slice(0, maxEffects) : entries;
-  
-  return displayEntries
-    .map(([stat, value]) => `${formatStatValue(value)} ${STAT_LABELS[stat]}`)
-    .join(', ');
-}
 
-/**
- * Get sorted effect entries for custom rendering.
- * Useful when you need to iterate over effects yourself.
- */
-export { getSortedEffectEntries };
+

src/blobbi/shop/hooks/useBlobbiPurchaseItem.ts

@@ -87,7 +87,7 @@ export function useBlobbiPurchaseItem(currentProfile: BlobbonautProfile | null)
       // Publish updated profile event
       const event = await publishEvent({
         kind: KIND_BLOBBONAUT_PROFILE,
-        content: '',
+        content: currentProfile.event.content,
         tags: updatedTags,
       });
 

src/blobbi/ui/BlobbiEggVisual.tsx

@@ -13,7 +13,7 @@
 
 import { useMemo } from 'react';
 
-import { EggGraphic, type EggReactionState, type EggStatusEffects } from '@/blobbi/egg';
+import { EggGraphic, type EggReactionState, type EggStatusEffects, type EggTourVisualState } from '@/blobbi/egg';
 import { toEggGraphicVisualBlobbi } from '@/blobbi/core/lib/blobbi-egg-adapter';
 import { cn } from '@/lib/utils';
 import type { BlobbiCompanion } from '@/blobbi/core/lib/blobbi';
@@ -23,7 +23,7 @@ import type { BlobbiCompanion } from '@/blobbi/core/lib/blobbi';
 export type BlobbiEggSize = 'sm' | 'md' | 'lg';
 
 // Re-export for convenience
-export type { EggReactionState, EggStatusEffects } from '@/blobbi/egg';
+export type { EggReactionState, EggStatusEffects, EggTourVisualState } from '@/blobbi/egg';
 
 export interface BlobbiEggVisualProps {
   /** The Blobbi companion data from parseBlobbiEvent */
@@ -36,6 +36,10 @@ export interface BlobbiEggVisualProps {
   reaction?: EggReactionState;
   /** Status effects for egg visual feedback (dirty, sick, happy) */
   statusEffects?: EggStatusEffects;
+  /** Tour visual state - driven externally by the tour orchestration layer */
+  tourVisualState?: EggTourVisualState;
+  /** Callback when the egg is clicked during an interactive tour step */
+  onTourEggClick?: () => void;
   /** Additional CSS classes for the container */
   className?: string;
 }
@@ -70,6 +74,8 @@ export function BlobbiEggVisual({
   animated = false,
   reaction = 'idle',
   statusEffects,
+  tourVisualState,
+  onTourEggClick,
   className,
 }: BlobbiEggVisualProps) {
   // Memoize adapter output to avoid unnecessary re-renders
@@ -103,6 +109,8 @@ export function BlobbiEggVisual({
         animated={animated && !isSleeping}
         reaction={effectiveReaction}
         statusEffects={isSleeping ? undefined : statusEffects}
+        tourVisualState={tourVisualState}
+        onTourEggClick={onTourEggClick}
       />
     </div>
   );

src/blobbi/ui/BlobbiPhotoModal.tsx

@@ -1,50 +1,31 @@
 /**
- * BlobbiPhotoModal - Modal for taking and sharing Blobbi photos
+ * BlobbiPhotoModal - Fullscreen photo overlay
  *
- * Features:
- * - Polaroid-style preview of the Blobbi
- * - Download as PNG
- * - Post to Nostr with Blossom upload
- *
- * Uses html-to-image for DOM-to-PNG conversion.
+ * Simple blurred overlay with the polaroid photo centered,
+ * and download/share buttons below. Tap outside to close.
  */
 
 import { useState, useRef, useCallback } from 'react';
 import { toPng } from 'html-to-image';
-import { Download, Send, Loader2, Camera } from 'lucide-react';
+import { Download, Share2, Loader2, X } from 'lucide-react';
 
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
 import { BlobbiPolaroidCard } from './BlobbiPolaroidCard';
 import { useUploadFile } from '@/hooks/useUploadFile';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { toast } from '@/hooks/useToast';
+import { openUrl } from '@/lib/downloadFile';
 import { trackDailyMissionProgress } from '@/blobbi/actions';
+import { cn } from '@/lib/utils';
 import type { BlobbiCompanion } from '@/blobbi/core/lib/blobbi';
-
-// ─── Types ────────────────────────────────────────────────────────────────────
+import { Capacitor } from '@capacitor/core';
 
 export interface BlobbiPhotoModalProps {
-  /** Whether the modal is open */
   open: boolean;
-  /** Callback when the modal should close */
   onOpenChange: (open: boolean) => void;
-  /** The Blobbi companion to photograph */
   companion: BlobbiCompanion;
 }
 
-// ─── Utility Functions ────────────────────────────────────────────────────────
-
-/**
- * Convert a data URL to a File object
- */
 function dataUrlToFile(dataUrl: string, filename: string): File {
   const arr = dataUrl.split(',');
   const mime = arr[0].match(/:(.*?);/)?.[1] ?? 'image/png';
@@ -57,218 +38,161 @@ function dataUrlToFile(dataUrl: string, filename: string): File {
   return new File([u8arr], filename, { type: mime });
 }
 
-/**
- * Trigger a file download in the browser
- */
-function downloadFile(dataUrl: string, filename: string): void {
-  const link = document.createElement('a');
-  link.download = filename;
-  link.href = dataUrl;
-  link.click();
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
 export function BlobbiPhotoModal({
   open,
   onOpenChange,
   companion,
 }: BlobbiPhotoModalProps) {
   const polaroidRef = useRef<HTMLDivElement>(null);
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isPosting, setIsPosting] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [isSharing, setIsSharing] = useState(false);
 
   const { user } = useCurrentUser();
   const { mutateAsync: uploadFile } = useUploadFile();
   const { mutateAsync: createEvent } = useNostrPublish();
 
-  /**
-   * Generate PNG from the polaroid card
-   */
   const generateImage = useCallback(async (): Promise<string | null> => {
-    if (!polaroidRef.current) {
-      toast({
-        variant: 'destructive',
-        title: 'Error',
-        description: 'Could not capture the photo. Please try again.',
-      });
-      return null;
-    }
-
+    if (!polaroidRef.current) return null;
     try {
-      // Use html-to-image with high quality settings
-      const dataUrl = await toPng(polaroidRef.current, {
+      return await toPng(polaroidRef.current, {
         quality: 1.0,
-        pixelRatio: 2, // 2x for retina displays
+        pixelRatio: 2,
         cacheBust: true,
-        // Skip external fonts that might fail to load
         skipFonts: true,
       });
-      return dataUrl;
     } catch (error) {
-      console.error('[BlobbiPhotoModal] Failed to generate image:', error);
-      toast({
-        variant: 'destructive',
-        title: 'Error',
-        description: 'Failed to generate the photo. Please try again.',
-      });
+      console.error('[BlobbiPhoto] Failed to generate image:', error);
+      toast({ variant: 'destructive', title: 'Error', description: 'Failed to capture photo.' });
       return null;
     }
   }, []);
 
-  /**
-   * Handle download action
-   */
   const handleDownload = useCallback(async () => {
-    setIsGenerating(true);
+    setIsDownloading(true);
     try {
       const dataUrl = await generateImage();
-      if (dataUrl) {
-        const filename = `${companion.name.toLowerCase().replace(/\s+/g, '-')}-polaroid.png`;
-        downloadFile(dataUrl, filename);
-        toast({
-          title: 'Photo saved!',
-          description: 'Your Blobbi photo has been downloaded.',
-        });
+      if (!dataUrl) return;
+      const filename = `${companion.name.toLowerCase().replace(/\s+/g, '-')}-photo.png`;
+
+      if (Capacitor.isNativePlatform()) {
+        // On native, use the download utility which handles share sheet
+        const blob = dataUrlToFile(dataUrl, filename);
+        const url = URL.createObjectURL(blob);
+        await openUrl(url);
+        URL.revokeObjectURL(url);
+      } else {
+        const link = document.createElement('a');
+        link.download = filename;
+        link.href = dataUrl;
+        link.click();
       }
+
+      toast({ title: 'Photo saved!' });
     } finally {
-      setIsGenerating(false);
+      setIsDownloading(false);
     }
   }, [generateImage, companion.name]);
 
-  /**
-   * Handle post action - upload to Blossom and create Nostr post
-   */
-  const handlePost = useCallback(async () => {
-    if (!user) {
-      toast({
-        variant: 'destructive',
-        title: 'Not logged in',
-        description: 'Please log in to post your Blobbi photo.',
-      });
-      return;
-    }
-
-    setIsPosting(true);
+  const handleShare = useCallback(async () => {
+    if (!user) return;
+    setIsSharing(true);
     try {
-      // Generate the image
       const dataUrl = await generateImage();
-      if (!dataUrl) {
-        return;
-      }
+      if (!dataUrl) return;
 
-      // Convert to File for upload
       const filename = `${companion.name.toLowerCase().replace(/\s+/g, '-')}-${Date.now()}.png`;
       const file = dataUrlToFile(dataUrl, filename);
-
-      // Upload to Blossom - returns NIP-94 compatible tags
       const tags = await uploadFile(file);
 
-      // Extract URL from the 'url' tag (NIP-94 format)
-      // The upload hook returns tags like [['url', '...'], ['m', '...'], ['x', '...'], ...]
       const urlTag = tags.find((tag) => tag[0] === 'url');
-      if (!urlTag || !urlTag[1]) {
-        throw new Error('Upload succeeded but no URL was returned');
-      }
+      if (!urlTag?.[1]) throw new Error('Upload succeeded but no URL returned');
       const url = urlTag[1];
 
-      // Build imeta tag from all NIP-94 tags
-      // Format: ['imeta', 'url https://...', 'm image/png', 'x abc123', ...]
       const imetaFields = tags.map((tag) => `${tag[0]} ${tag[1]}`);
-
-      // Create the post content
-      const content = `${companion.name} ${url}`;
-
-      // Publish kind 1 event
       await createEvent({
         kind: 1,
-        content,
+        content: `${companion.name} ${url}`,
         tags: [['imeta', ...imetaFields]],
       });
 
-      toast({
-        title: 'Posted!',
-        description: 'Your Blobbi photo has been shared.',
-      });
-
-      // Track daily mission progress for photo action
+      toast({ title: 'Posted!', description: 'Your Blobbi photo has been shared.' });
       trackDailyMissionProgress('take_photo', 1, user.pubkey);
-
-      // Close the modal after successful post
       onOpenChange(false);
     } catch (error) {
-      console.error('[BlobbiPhotoModal] Failed to post:', error);
-      toast({
-        variant: 'destructive',
-        title: 'Failed to post',
-        description: error instanceof Error ? error.message : 'Please try again.',
-      });
+      console.error('[BlobbiPhoto] Failed to share:', error);
+      toast({ variant: 'destructive', title: 'Failed to post', description: error instanceof Error ? error.message : 'Please try again.' });
     } finally {
-      setIsPosting(false);
+      setIsSharing(false);
     }
   }, [user, generateImage, companion.name, uploadFile, createEvent, onOpenChange]);
 
-  const isProcessing = isGenerating || isPosting;
+  if (!open) return null;
+
+  const isProcessing = isDownloading || isSharing;
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Camera className="size-5" />
-            Take a Photo
-          </DialogTitle>
-          <DialogDescription>
-            Capture a polaroid-style photo of {companion.name}
-          </DialogDescription>
-        </DialogHeader>
+    <div className="absolute inset-0 z-50 flex flex-col items-center justify-center">
+      {/* Backdrop — tap to close */}
+      <div
+        className="absolute inset-0 bg-background/60 backdrop-blur-sm"
+        onClick={() => !isProcessing && onOpenChange(false)}
+      />
 
-        {/* Polaroid preview - centered */}
-        <div className="flex justify-center py-4">
-          <BlobbiPolaroidCard
-            ref={polaroidRef}
-            companion={companion}
-            showStage
-          />
-        </div>
+      {/* Close button — top-right of the container */}
+      <button
+        onClick={() => !isProcessing && onOpenChange(false)}
+        className="absolute top-3 right-3 z-10 p-2 text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <X className="size-5" />
+      </button>
 
-        {/* Action buttons */}
-        <div className="flex flex-col sm:flex-row gap-3">
-          <Button
-            variant="outline"
-            onClick={handleDownload}
+      {/* Polaroid card */}
+      <div className="relative z-10 animate-in fade-in zoom-in-95 duration-200">
+        <BlobbiPolaroidCard
+          ref={polaroidRef}
+          companion={companion}
+          showStage
+        />
+      </div>
+
+      {/* Action buttons */}
+      <div className="relative z-10 flex items-center gap-6 mt-8">
+        <button
+          onClick={handleDownload}
+          disabled={isProcessing}
+          className={cn(
+            'flex flex-col items-center gap-1.5 transition-all duration-200',
+            'hover:scale-110 active:scale-95',
+            isProcessing && 'opacity-50 pointer-events-none',
+          )}
+        >
+          <div className="size-14 rounded-full flex items-center justify-center text-sky-500" style={{
+            background: 'radial-gradient(circle at 40% 35%, color-mix(in srgb, #0ea5e9 25%, transparent), color-mix(in srgb, #0ea5e9 10%, transparent) 70%)',
+          }}>
+            {isDownloading ? <Loader2 className="size-6 animate-spin" /> : <Download className="size-6" />}
+          </div>
+          <span className="text-xs font-medium text-muted-foreground">Save</span>
+        </button>
+
+        {user && (
+          <button
+            onClick={handleShare}
             disabled={isProcessing}
-            className="flex-1"
-          >
-            {isGenerating ? (
-              <Loader2 className="size-4 mr-2 animate-spin" />
-            ) : (
-              <Download className="size-4 mr-2" />
+            className={cn(
+              'flex flex-col items-center gap-1.5 transition-all duration-200',
+              'hover:scale-110 active:scale-95',
+              isProcessing && 'opacity-50 pointer-events-none',
             )}
-            Download
-          </Button>
-
-          <Button
-            onClick={handlePost}
-            disabled={isProcessing || !user}
-            className="flex-1"
           >
-            {isPosting ? (
-              <Loader2 className="size-4 mr-2 animate-spin" />
-            ) : (
-              <Send className="size-4 mr-2" />
-            )}
-            Post
-          </Button>
-        </div>
-
-        {/* Login hint if not logged in */}
-        {!user && (
-          <p className="text-sm text-muted-foreground text-center">
-            Log in to post your Blobbi photo
-          </p>
+            <div className="size-14 rounded-full flex items-center justify-center text-violet-500" style={{
+              background: 'radial-gradient(circle at 40% 35%, color-mix(in srgb, #8b5cf6 25%, transparent), color-mix(in srgb, #8b5cf6 10%, transparent) 70%)',
+            }}>
+              {isSharing ? <Loader2 className="size-6 animate-spin" /> : <Share2 className="size-6" />}
+            </div>
+            <span className="text-xs font-medium text-muted-foreground">Post</span>
+          </button>
         )}
-      </DialogContent>
-    </Dialog>
+      </div>
+    </div>
   );
 }

src/blobbi/ui/BlobbiStageVisual.tsx

@@ -12,7 +12,7 @@
 
 import { useMemo } from 'react';
 
-import { BlobbiEggVisual, type BlobbiEggSize, type EggStatusEffects } from './BlobbiEggVisual';
+import { BlobbiEggVisual, type BlobbiEggSize, type EggStatusEffects, type EggTourVisualState } from './BlobbiEggVisual';
 import { BlobbiBabyVisual } from './BlobbiBabyVisual';
 import { BlobbiAdultVisual } from './BlobbiAdultVisual';
 import { FloatingMusicNotes } from './FloatingMusicNotes';
@@ -50,6 +50,10 @@ export interface BlobbiStageVisualProps {
    * Status-reaction body effects are already in the recipe.
    */
   bodyEffects?: BodyEffectsSpec;
+  /** Tour visual state for egg stage - driven by the tour orchestration layer */
+  tourVisualState?: EggTourVisualState;
+  /** Callback when the egg is clicked during an interactive tour step */
+  onTourEggClick?: () => void;
   className?: string;
 }
 
@@ -74,6 +78,8 @@ export function BlobbiStageVisual({
   recipeLabel,
   emotion = 'neutral',
   bodyEffects,
+  tourVisualState,
+  onTourEggClick,
   className,
 }: BlobbiStageVisualProps) {
   const { stage } = companion;
@@ -109,6 +115,8 @@ export function BlobbiStageVisual({
           animated={animated}
           reaction={effectiveReaction}
           statusEffects={eggStatusEffects}
+          tourVisualState={tourVisualState}
+          onTourEggClick={onTourEggClick}
           className="size-full"
         />
         <FloatingMusicNotes active={showMusicNotes} />