Merge branch 'main' into fix/blobbi-item-use-cooldown

Remove quantity leftovers and unify cooldown UX across all item surfaces
Quantity cleanup: - Remove quantity field from ResolvedInventoryItem, CompanionItem, and BlobbiShopModal's local interface - Remove all quantity: Infinity assignments from item resolution - Rename filterInventoryByAction to getItemsForAction with a cleaner signature (drop unused _storage parameter) - Update barrel export and call sites - Fix stale 'inventory' comments in blobbi-action-utils.ts Cooldown UX consistency: - Add Clock icon to dashboard ItemsTabContent (previously only showed dimmed opacity with no icon) - Normalize shop modal button variant (outline, matching action modal style) - All three item surfaces now share the same visual language: loading = spinner, cooldown = clock icon + disabled + muted
2026-04-05 23:08:25 -03:00 · 2026-04-05 22:56:11 -03:00 · 2026-04-05 22:37:18 -03:00 · 2026-04-05 20:37:09 -05:00 · 2026-04-05 21:54:59 -03:00 · 2026-04-06 00:38:27 +00:00
200 changed files with 10697 additions and 9608 deletions
@@ -54,7 +54,6 @@ 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

@@ -203,6 +202,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

@@ -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.).
@@ -1,5 +1,78 @@
 # Changelog

+## [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
@@ -14,7 +14,7 @@ android {
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
-        versionName "2.3.1"
+        versionName "2.6.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        aaptOptions {
             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -303,7 +303,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 2.3.1;
+				MARKETING_VERSION = 2.6.0;
 				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.0;
 				PRODUCT_BUNDLE_IDENTIFIER = pub.ditto.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
@@ -1,12 +1,12 @@
 {
  "name": "ditto",
-  "version": "2.3.0",
+  "version": "2.6.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "ditto",
-      "version": "2.3.0",
+      "version": "2.6.0",
      "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": {
@@ -1,7 +1,7 @@
 {
  "name": "ditto",
  "private": true,
-  "version": "2.3.1",
+  "version": "2.6.0",
  "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",
@@ -1,5 +1,78 @@
 # Changelog

+## [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
@@ -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",
  ],
@@ -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 />} />
@@ -1,25 +1,22 @@
 // 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, Clock } 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';

 import {
-  filterInventoryByAction,
+  getItemsForAction,
  previewStatChanges,
  previewMedicineForEgg,
  previewCleanForEgg,
@@ -30,6 +27,7 @@ import {
  type ResolvedInventoryItem,
  type EggStatPreview,
 } from '../lib/blobbi-action-utils';
+import { useItemCooldown } from '../hooks/useItemCooldown';

 interface BlobbiActionInventoryModalProps {
  open: boolean;
@@ -37,8 +35,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 +47,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);
+  const { isOnCooldown } = useItemCooldown();

-  // Filter inventory by action type, respecting egg-compatible effects
+  // Get all available items for this action from the catalog.
  const availableItems = useMemo(() => {
-    if (!profile) return [];
-    return filterInventoryByAction(profile.storage, action, { stage: companion.stage });
-  }, [profile, action, companion.stage]);
+    return getItemsForAction(action, { stage: companion.stage });
+  }, [action, companion.stage]);

  // Check stage restrictions for this specific action
  const canUse = canUseAction(companion, action);
@@ -74,46 +67,10 @@ 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));
-    }
+    if (isOnCooldown(item.itemId)) return;
+    onUseItem(item.itemId);
  };

  return (
@@ -161,92 +118,74 @@ 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>
          )}

          {/* Item List */}
          {canUse && !isEmpty && (
            <div className="grid gap-3">
-              {availableItems.map((item) => (
-                <BlobbiInventoryUseRow
-                  key={item.itemId}
-                  item={item}
-                  companion={companion}
-                  action={action}
-                  onUse={() => handleSelectItem(item)}
-                  isUsing={isUsingItem && usingItemId === item.itemId}
-                  disabled={isUsingItem}
-                />
-              ))}
+              {availableItems.map((item) => {
+                const isCoolingDown = isOnCooldown(item.itemId);
+                const isThisUsing = isUsingItem && usingItemId === item.itemId;
+                return (
+                  <BlobbiItemUseRow
+                    key={item.itemId}
+                    item={item}
+                    companion={companion}
+                    action={action}
+                    onUse={() => handleUseItem(item)}
+                    isUsing={isThisUsing}
+                    disabled={isUsingItem || isCoolingDown}
+                    isCoolingDown={isCoolingDown}
+                  />
+                );
+              })}
            </div>
          )}
        </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>
  );
 }

-// ─── Inventory Use Row ────────────────────────────────────────────────────────
+// ─── Item Use Row ─────────────────────────────────────────────────────────────

-interface BlobbiInventoryUseRowProps {
+interface BlobbiItemUseRowProps {
  item: ResolvedInventoryItem;
  companion: BlobbiCompanion;
  action: InventoryAction;
  onUse: () => void;
  isUsing: boolean;
  disabled: boolean;
+  isCoolingDown: boolean;
 }

-function BlobbiInventoryUseRow({
+function BlobbiItemUseRow({
  item,
  companion,
  action,
  onUse,
  isUsing,
  disabled,
-}: BlobbiInventoryUseRowProps) {
+  isCoolingDown,
+}: BlobbiItemUseRowProps) {
  const isEgg = companion.stage === 'egg';
  const isMedicine = action === 'medicine';
  const isClean = action === 'clean';

-  // Preview stat changes - handle egg-specific preview for medicine and clean
+  // Preview stat changes — single-use effect preview
  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 +194,6 @@ function BlobbiInventoryUseRow({
        ),
      };
    }
-    // Normal stats preview
    return {
      normalStatChanges: previewStatChanges(companion.stats, item.effect),
      eggStatChanges: [] as EggStatPreview[],
@@ -280,51 +218,26 @@ 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
-                      className={cn(
-                        'font-medium',
-                        delta > 0
-                          ? 'text-emerald-600 dark:text-emerald-400'
-                          : 'text-red-600 dark:text-red-400'
-                      )}
-                    >
-                      {delta > 0 ? '+' : ''}
-                      {delta}
+                    <span className={cn('font-medium', delta > 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400')}>
+                      {delta > 0 ? '+' : ''}{delta}
                    </span>{' '}
-                    <span className="text-muted-foreground capitalize">
-                      {stat.replace('_', ' ')}
-                    </span>
+                    <span className="text-muted-foreground capitalize">{stat.replace('_', ' ')}</span>
                  </span>
                ))}
-                {/* Egg stat changes (health for medicine) */}
                {eggStatChanges.map(({ stat, delta }) => (
                  <span key={stat} className="text-xs">
-                    <span
-                      className={cn(
-                        'font-medium',
-                        delta > 0
-                          ? 'text-emerald-600 dark:text-emerald-400'
-                          : 'text-red-600 dark:text-red-400'
-                      )}
-                    >
-                      {delta > 0 ? '+' : ''}
-                      {delta}
+                    <span className={cn('font-medium', delta > 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400')}>
+                      {delta > 0 ? '+' : ''}{delta}
                    </span>{' '}
-                    <span className="text-muted-foreground capitalize">
-                      {stat.replace('_', ' ')}
-                    </span>
+                    <span className="text-muted-foreground capitalize">{stat.replace('_', ' ')}</span>
                  </span>
                ))}
              </div>
@@ -337,10 +250,13 @@ function BlobbiInventoryUseRow({
          size="sm"
          onClick={onUse}
          disabled={disabled}
-          className="shrink-0"
+          variant={isCoolingDown ? 'outline' : 'default'}
+          className="shrink-0 min-w-14"
        >
          {isUsing ? (
            <Loader2 className="size-4 animate-spin" />
+          ) : isCoolingDown ? (
+            <Clock className="size-3.5 text-muted-foreground" />
          ) : (
            'Use'
          )}
@@ -350,42 +266,20 @@ 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
-                className={cn(
-                  'font-medium',
-                  delta > 0
-                    ? 'text-emerald-600 dark:text-emerald-400'
-                    : 'text-red-600 dark:text-red-400'
-                )}
-              >
-                {delta > 0 ? '+' : ''}
-                {delta}
+              <span className={cn('font-medium', delta > 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400')}>
+                {delta > 0 ? '+' : ''}{delta}
              </span>{' '}
-              <span className="text-muted-foreground capitalize">
-                {stat.replace('_', ' ')}
-              </span>
+              <span className="text-muted-foreground capitalize">{stat.replace('_', ' ')}</span>
            </span>
          ))}
-          {/* Egg stat changes (health for medicine) */}
          {eggStatChanges.map(({ stat, delta }) => (
            <span key={stat} className="text-xs">
-              <span
-                className={cn(
-                  'font-medium',
-                  delta > 0
-                    ? 'text-emerald-600 dark:text-emerald-400'
-                    : 'text-red-600 dark:text-red-400'
-                )}
-              >
-                {delta > 0 ? '+' : ''}
-                {delta}
+              <span className={cn('font-medium', delta > 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400')}>
+                {delta > 0 ? '+' : ''}{delta}
              </span>{' '}
-              <span className="text-muted-foreground capitalize">
-                {stat.replace('_', ' ')}
-              </span>
+              <span className="text-muted-foreground capitalize">{stat.replace('_', ' ')}</span>
            </span>
          ))}
        </div>
@@ -393,222 +287,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>
-  );
-}
@@ -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 / coins).
 */

-import { Target, Loader2, XCircle, AlertTriangle, Calendar, Coins, X, ChevronDown } from 'lucide-react';
+import {
+  Loader2,
+  XCircle,
+  AlertTriangle,
+  Coins,
+  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,20 @@ interface BlobbiMissionsModalProps {
 interface DailyMissionsSectionProps {
  profile: BlobbonautProfile | null;
  updateProfileEvent: (event: NostrEvent) => void;
-  /** Available Blobbi stages the user has */
  availableStages?: ('egg' | 'baby' | 'adult')[];
  disabled?: boolean;
  defaultOpen?: boolean;
 }

-function DailyMissionsSection({ profile, updateProfileEvent, availableStages, disabled, defaultOpen = true }: DailyMissionsSectionProps) {
+function DailyMissionsSection({
+  profile,
+  updateProfileEvent,
+  availableStages,
+  disabled,
+  defaultOpen = true,
+}: DailyMissionsSectionProps) {
  const [isOpen, setIsOpen] = useState(defaultOpen);
+
  const {
    missions,
    todayClaimedReward,
@@ -100,58 +175,56 @@ function DailyMissionsSection({ profile, updateProfileEvent, availableStages, di

  const { mutate: claimReward, isPending: isClaiming } = useClaimMissionReward(
    profile,
-    updateProfileEvent
+    updateProfileEvent,
  );

  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">
+              <Coins 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 })}
+            todayCoins={todayClaimedReward}
+            disabled={disabled || isClaiming || isRerolling}
+            bonusAvailable={bonusAvailable}
+            bonusClaimed={bonusClaimed}
+            bonusReward={bonusReward}
+            noMissionsAvailable={noMissionsAvailable}
+            rerollsRemaining={rerollsRemaining}
+            isRerolling={isRerolling}
+          />
+        </div>
      </CollapsibleContent>
    </Collapsible>
  );
@@ -224,9 +297,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 +311,7 @@ interface ProcessContentProps {
  defaultOpen?: boolean;
 }

-function ProcessContent({
+function CurrentFocusSection({
  companion,
  tasks,
  processType,
@@ -248,93 +321,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 +425,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 +456,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 +504,9 @@ export function BlobbiMissionsModal({
                  isCompleting={isHatching}
                  onStop={onStopIncubation}
                  isStopping={isStoppingIncubation}
-                  defaultOpen={true}
                />
              ) : isEvolvingState && isBaby ? (
-                <ProcessContent
+                <CurrentFocusSection
                  companion={companion}
                  tasks={evolveTasks}
                  processType="evolution"
@@ -435,10 +515,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>
@@ -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>
@@ -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,
+  Coins,
+  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) */
  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">
+        <Coins 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 Bonus {formatCompactNumber(reward)} Coins
+        </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({ todayCoins }: { todayCoins: 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(todayCoins)} coins
+          </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>
  );
@@ -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 todayCoins={todayCoins} />;

  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">
+                <Coins 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)} Coins
+              </Button>
+            )}
+          </ExpandableMissionCard>
+        );
+      })}
+
+      {/* Bonus card */}
+      <BonusCard
        isAvailable={bonusAvailable}
        isClaimed={bonusClaimed}
        reward={bonusReward}
        onClaim={() => onClaimReward(BONUS_MISSION_ID)}
        disabled={disabled}
+        isExpanded={expandedId === 'bonus'}
+        onToggle={handleToggle}
      />
    </div>
  );
@@ -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>
+  );
+}
@@ -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();
@@ -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();
@@ -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>
  );
 }
@@ -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;
@@ -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);
    },
@@ -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,
@@ -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);
@@ -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',
@@ -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,
@@ -33,27 +29,24 @@ import { trackMultipleDailyMissionActions } from '../lib/daily-mission-tracker';
 import type { DailyMissionAction } from '../lib/daily-missions';
 import { getStreakTagUpdates } from '../lib/blobbi-streak';
 import { calculateInventoryActionXP, applyXPGain, formatXPGain } from '../lib/blobbi-xp';
+import { isItemOnCooldown, setItemCooldown } from '../lib/item-cooldown';
 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 +64,53 @@ 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
+ * ownership or quantity is required. Each use applies effects once.
+ *
+ * Cooldown is enforced via the shared item-cooldown module so that
+ * rapid repeated clicks are blocked consistently across all UIs.
+ *
 * This hook:
- * 1. Validates the companion stage (eggs can't use items)
- * 2. Validates the item exists in storage
+ * 1. Validates the companion and item compatibility
+ * 2. Checks the shared per-item cooldown
 * 3. Ensures canonical format before action
- * 4. Applies item effects to Blobbi stats
+ * 4. Applies accumulated decay, then item effects to Blobbi stats
 * 5. Updates Blobbi state (kind 31124)
- * 6. Decrements item from profile storage (kind 11125)
- * 7. Invalidates relevant queries
 */
 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> => {
+      // ─── Cooldown guard (shared across all UIs) ───
+      if (isItemOnCooldown(itemId)) {
+        throw new Error('Please wait before using this item again');
+      }
+
      // ─── Validation ───
      if (!user?.pubkey) {
        throw new Error('You must be logged in to use items');
@@ -128,11 +124,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 +136,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');
@@ -175,9 +157,6 @@ export function useBlobbiUseInventoryItem({
      }

      // ─── Apply Accumulated Decay First ───
-      // Per decay-system.md: Always apply accumulated decay from persisted state
-      // before any user interaction updates stats.
-      // CRITICAL: Use canonical.companion for decay calculations, not the stale outer companion
      const now = Math.floor(Date.now() / 1000);
      const decayResult = applyBlobbiDecay({
        stage: canonical.companion.stage,
@@ -191,7 +170,6 @@ export function useBlobbiUseInventoryItem({
      const statsAfterDecay = decayResult.stats;
      
      // ─── Validate Play Energy Requirements ───
-      // For play actions, validate the Blobbi has enough energy AFTER decay
      if (action === 'play') {
        const energyCost = Math.abs(shopItem.effect.energy ?? 0);
        const currentEnergy = statsAfterDecay.energy;
@@ -202,8 +180,6 @@ export function useBlobbiUseInventoryItem({
          );
        }
        
-        // Also check if playing would have any effect at all
-        // If happiness is maxed AND we can't spend energy, playing is pointless
        const happinessGain = shopItem.effect.happiness ?? 0;
        const currentHappiness = statsAfterDecay.happiness;
        const wouldGainHappiness = happinessGain > 0 && currentHappiness < 100;
@@ -216,78 +192,24 @@ 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, shopItem.effect.health ?? 0);
        
        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 +220,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);
@@ -370,7 +246,6 @@ export function useBlobbiUseInventoryItem({
      // ─── Update Blobbi State Event (kind 31124) ───
      const nowStr = now.toString();
      
-      // If incubating or evolving, increment the interaction counter for tasks
      const companionState = canonical.companion.state;
      let updatedTags = canonical.allTags;
      if (companionState === 'incubating') {
@@ -379,14 +254,10 @@ export function useBlobbiUseInventoryItem({
        updatedTags = incrementInteractionTaskTags(canonical.allTags, EVOLVE_REQUIRED_INTERACTIONS).updatedTags;
      }
      
-      // 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,61 +277,40 @@ 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();
-
      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 }, { itemId }) => {
      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}`,
      });

+      // Set shared cooldown (success — short)
+      setItemCooldown(itemId, true);
+
      // Track daily mission progress
-      // 'interact' is always tracked, plus the specific action if it maps to a daily mission
      const dailyActions: DailyMissionAction[] = ['interact'];
      if (action === 'feed') dailyActions.push('feed');
      if (action === 'clean') dailyActions.push('clean');
      trackMultipleDailyMissionActions(dailyActions, user?.pubkey);
    },
-    onError: (error: Error) => {
+    onError: (error: Error, { itemId }) => {
      toast({
        title: 'Failed to use item',
        description: error.message,
        variant: 'destructive',
      });
+
+      // Set shared cooldown (failure — longer)
+      setItemCooldown(itemId, false);
    },
  });
 }
@@ -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) ───
@@ -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
@@ -0,0 +1,46 @@
+/**
+ * useItemCooldown — React hook for per-item cooldown state.
+ *
+ * Subscribes to the shared item-cooldown module so that components
+ * automatically re-render when any item's cooldown starts or expires.
+ *
+ * Usage:
+ * ```tsx
+ * const { isOnCooldown } = useItemCooldown();
+ * <Button disabled={isOnCooldown(item.id)}>Use</Button>
+ * ```
+ */
+
+import { useCallback, useSyncExternalStore } from 'react';
+
+import { isItemOnCooldown, subscribeCooldowns } from '../lib/item-cooldown';
+
+/** Monotonically increasing snapshot counter bumped on every cooldown change. */
+let snapshotVersion = 0;
+
+/** Called by subscribeCooldowns — bumps the version so useSyncExternalStore re-renders. */
+function bumpVersion(): void {
+  snapshotVersion++;
+}
+
+// Wire the bump into the cooldown module (idempotent — Set prevents duplicates)
+subscribeCooldowns(bumpVersion);
+
+function getSnapshot(): number {
+  return snapshotVersion;
+}
+
+/**
+ * Hook that re-renders the calling component whenever any item's cooldown
+ * starts or ends. Returns a stable `isOnCooldown` checker.
+ */
+export function useItemCooldown() {
+  // Subscribe to cooldown changes — triggers re-render via snapshot bump
+  useSyncExternalStore(subscribeCooldowns, getSnapshot);
+
+  const isOnCooldown = useCallback((itemId: string): boolean => {
+    return isItemOnCooldown(itemId);
+  }, []);
+
+  return { isOnCooldown };
+}
@@ -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,
@@ -138,7 +136,7 @@ export {
  clampStat,
  applyStat,
  applyItemEffects,
-  filterInventoryByAction,
+  getItemsForAction,
  decrementStorageItem,
  canUseAction,
  canUseDirectAction,
@@ -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
+ * Direct actions that don't use items
 * These actions affect stats directly without using shop items.
 */
 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,14 +270,13 @@ 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;
-  quantity: number;
  name: string;
  icon: string;
  type: ShopItemCategory;
@@ -285,7 +284,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 +292,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 reusable abilities — no ownership is required.
 * 
 * Filtering rules:
 * - Only items matching the action's item type are included
@@ -303,39 +302,35 @@ export interface FilterInventoryOptions {
 *   - medicine action: only items with health effect
 *   - clean action: only items with hygiene or happiness effect
 */
-export function filterInventoryByAction(
-  storage: StorageItem[],
+export function getItemsForAction(
  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;
    }

    // For eggs, filter items by egg-compatible effects
    if (isEgg) {
      if (action === 'medicine' && !hasMedicineEffectForEgg(shopItem.effect)) {
-        continue; // Skip medicine without health effect
+        continue;
      }
      if (action === 'clean' && !hasHygieneEffectForEgg(shopItem.effect) && !hasHappinessEffectForEgg(shopItem.effect)) {
-        continue; // Skip hygiene items without hygiene or happiness effect
+        continue;
      }
    }

    result.push({
-      itemId: storageItem.itemId,
-      quantity: storageItem.quantity,
+      itemId: shopItem.id,
      name: shopItem.name,
      icon: shopItem.icon,
      type: shopItem.type,
@@ -376,7 +371,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 +404,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 +437,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
 */
@@ -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,
@@ -0,0 +1,93 @@
+/**
+ * Centralized item-use cooldown tracking.
+ *
+ * Provides a single, shared per-item cooldown map used by every item-use
+ * path (BlobbiPage dashboard, companion layer, shop modal, falling items).
+ *
+ * Design:
+ * - Module-level singleton — all hooks share the same map.
+ * - Keyed by item type ID (e.g. "food_apple"), NOT instance IDs.
+ * - Separate durations for success (short) and failure (longer).
+ * - Built-in subscriber system so React components can re-render when
+ *   cooldowns start or expire.
+ */
+
+// ─── Configuration ────────────────────────────────────────────────────────────
+
+/** Cooldown after a successful item use (ms). */
+export const ITEM_COOLDOWN_SUCCESS_MS = 400;
+
+/** Cooldown after a failed item use (ms). */
+export const ITEM_COOLDOWN_FAILURE_MS = 2000;
+
+// ─── Singleton State ──────────────────────────────────────────────────────────
+
+interface CooldownEntry {
+  /** Timestamp (Date.now()) when the cooldown expires */
+  expiresAt: number;
+  /** Timeout handle that fires the expiry notification */
+  timerId: ReturnType<typeof setTimeout>;
+}
+
+/** Module-level cooldown map shared across all hooks. */
+const cooldowns = new Map<string, CooldownEntry>();
+
+/** Subscribers notified on every cooldown start/end. */
+const subscribers = new Set<() => void>();
+
+// ─── Internal Helpers ─────────────────────────────────────────────────────────
+
+function notify(): void {
+  subscribers.forEach((cb) => cb());
+}
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+/**
+ * Check whether an item is currently on cooldown.
+ */
+export function isItemOnCooldown(itemId: string): boolean {
+  const entry = cooldowns.get(itemId);
+  if (!entry) return false;
+
+  if (Date.now() >= entry.expiresAt) {
+    clearTimeout(entry.timerId);
+    cooldowns.delete(itemId);
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Put an item on cooldown after a use attempt.
+ * Subscribers are notified immediately (cooldown started) and again when
+ * the cooldown expires (so the UI can re-enable the button).
+ */
+export function setItemCooldown(itemId: string, success: boolean): void {
+  // Clear any existing cooldown for this item
+  const prev = cooldowns.get(itemId);
+  if (prev) clearTimeout(prev.timerId);
+
+  const ms = success ? ITEM_COOLDOWN_SUCCESS_MS : ITEM_COOLDOWN_FAILURE_MS;
+
+  const timerId = setTimeout(() => {
+    cooldowns.delete(itemId);
+    notify(); // re-render: cooldown ended
+  }, ms);
+
+  cooldowns.set(itemId, { expiresAt: Date.now() + ms, timerId });
+
+  notify(); // re-render: cooldown started
+}
+
+/**
+ * Subscribe to cooldown state changes.
+ * Returns an unsubscribe function.
+ */
+export function subscribeCooldowns(callback: () => void): () => void {
+  subscribers.add(callback);
+  return () => {
+    subscribers.delete(callback);
+  };
+}
@@ -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) {
@@ -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}
@@ -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),
    },
  };
 }
@@ -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
@@ -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;
    
@@ -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
@@ -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.
@@ -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,
@@ -42,7 +40,8 @@ export {
 * 1. Registered function from BlobbiPage (if available) - better cache access
 * 2. Built-in useBlobbiItemUse hook as fallback - works anywhere
 * 
- * Uses subscription pattern to only re-render when necessary.
+ * Cooldown is enforced via the shared item-cooldown module, which is
+ * consistent across both the registered and fallback paths.
 */
 export function useBlobbiActions(): BlobbiActionsContextValue {
  const context = useContext(BlobbiActionsContext);
@@ -64,13 +63,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 +87,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
@@ -105,8 +104,7 @@ export function useBlobbiActions(): BlobbiActionsContextValue {
    isUsingItem,
    canUseItems,
    isItemOnCooldown: fallbackItemUse.isItemOnCooldown,
-    clearItemCooldown: fallbackItemUse.clearItemCooldown,
-  }), [useItem, isUsingItem, canUseItems, fallbackItemUse.isItemOnCooldown, fallbackItemUse.clearItemCooldown]);
+  }), [useItem, isUsingItem, canUseItems, fallbackItemUse.isItemOnCooldown]);
 }

 // ─── Registration Hook ────────────────────────────────────────────────────────
@@ -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
@@ -189,5 +187,3 @@ export function useBlobbiActionsRegistration(
    };
  }, [context]);
 }
-
-
@@ -0,0 +1,72 @@
+/**
+ * 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 a specific item is on cooldown */
+  isItemOnCooldown: (itemId: string) => boolean;
+}
+
+/**
+ * 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);
@@ -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 ─────────────────────────────────────────────────────────────────

@@ -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);
@@ -439,32 +437,15 @@ export function HangingItems({
  // Contact auto-use only triggers when item ENTERS the zone (transitions from outside to inside)
  const itemsInZoneRef = useRef<Set<string>>(new Set());
  
-  // Local item cooldown tracking (fallback if isItemOnCooldown not provided)
-  const localCooldownsRef = useRef<Map<string, number>>(new Map());
-  
-  // Check if an item is on cooldown (uses prop if available, else local)
-  const checkItemCooldown = useCallback((itemId: string): boolean => {
+  // Check if an item is on cooldown.
+  // Uses the parent-provided isItemOnCooldown (shared module) with the item TYPE id.
+  const checkItemCooldown = useCallback((item: CompanionItem): boolean => {
    if (isItemOnCooldown) {
-      return isItemOnCooldown(itemId);
+      return isItemOnCooldown(item.id);
    }
-    // Local fallback cooldown check
-    const expiresAt = localCooldownsRef.current.get(itemId);
-    if (!expiresAt) return false;
-    if (Date.now() >= expiresAt) {
-      localCooldownsRef.current.delete(itemId);
-      return false;
-    }
-    return true;
+    return false;
  }, [isItemOnCooldown]);
  
-  // Set local cooldown for an item
-  const setLocalCooldown = useCallback((itemId: string, success: boolean) => {
-    const cooldownMs = success 
-      ? HANGING_CONFIG.successUseCooldown 
-      : HANGING_CONFIG.failedUseCooldown;
-    localCooldownsRef.current.set(itemId, Date.now() + cooldownMs);
-  }, []);
-  
  // Ref for onItemLanded callback
  const onItemLandedRef = useRef(onItemLanded);
  onItemLandedRef.current = onItemLanded;
@@ -566,7 +547,7 @@ export function HangingItems({
    
    // Start the loop
    animationRef.current = requestAnimationFrame(animate);
-  }, []);
+  }, [calculateFallDuration]);
  
  // Cleanup animation on unmount
  useEffect(() => {
@@ -626,8 +607,8 @@ export function HangingItems({
   * @param source - How the item was used
   */
  const attemptUseItem = useCallback(async (instanceId: string, item: CompanionItem, source: 'contact' | 'click' | 'drag-drop') => {
-    // Check cooldown first (prevents retry spam) - use instanceId for cooldown tracking
-    if (checkItemCooldown(instanceId)) {
+    // Check shared cooldown by item type ID (prevents retry spam)
+    if (checkItemCooldown(item)) {
      if (import.meta.env.DEV) {
        console.log(`[HangingItems] Item on cooldown, skipping:`, item.name, instanceId);
      }
@@ -646,8 +627,6 @@ export function HangingItems({
    itemsBeingUsedRef.current = new Set(itemsBeingUsedRef.current).add(instanceId);
    forceUpdate(c => c + 1); // Trigger re-render for visual feedback
    
-    let success = false;
-    
    try {
      // If onItemUse is provided, use the async flow
      const onItemUseFn = onItemUseRef.current;
@@ -658,7 +637,6 @@ export function HangingItems({
        const result = await onItemUseFn(item);
        
        if (result.success) {
-          success = true;
          if (import.meta.env.DEV) {
            console.log(`[HangingItems] Item used successfully:`, item.name, instanceId);
          }
@@ -670,7 +648,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;
@@ -687,7 +665,6 @@ export function HangingItems({
        }
      } else {
        // Legacy behavior: call onItemCollected and remove immediately
-        success = true;
        if (import.meta.env.DEV) {
          console.log(`[HangingItems] Item collected (legacy):`, item.name, instanceId);
        }
@@ -714,11 +691,9 @@ export function HangingItems({
      newSet.delete(instanceId);
      itemsBeingUsedRef.current = newSet;
      forceUpdate(c => c + 1);
-      
-      // Set cooldown (longer on failure to prevent retry spam)
-      setLocalCooldown(instanceId, success);
+      // Cooldown is set by the mutation hooks (onSuccess/onError) via the shared module
    }
-  }, [checkItemCooldown, setLocalCooldown]); // Minimal dependencies - rest uses refs
+  }, [checkItemCooldown]); // Minimal dependencies - rest uses refs
  
  // Contact detection with Blobbi (for auto-use)
  // 
@@ -985,15 +960,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 +1002,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 +1071,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 +1083,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>
              );
@@ -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';
@@ -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.
+ * A simplified view of shop catalog items optimized for rendering.
 */
 export interface CompanionItem {
  /** Unique item ID (matches shop item ID) */
@@ -74,8 +74,6 @@ export interface CompanionItem {
  emoji: string;
  /** Item category */
  category: ShopItemCategory;
-  /** Quantity available in inventory */
-  quantity: number;
  /** Item effects when used */
  effect?: ItemEffect;
 }
@@ -8,16 +8,16 @@
 * - Fetches companion and profile data if not provided
 * - Uses the same item-use logic as BlobbiPage (useBlobbiUseInventoryItem)
 * - Works as a standalone hook or can be passed cached data
- * - Provides retry protection and cooldown
+ * - Uses the shared item-cooldown module for per-item cooldown
 * 
 * Architecture:
 * - BlobbiCompanionLayer uses this hook directly as a fallback when 
 *   BlobbiPage is not mounted
 * - BlobbiPage registers its own item-use function (which has better cache access)
- * - Both use the same underlying mutation logic
+ * - Both use the same underlying mutation logic and shared cooldown
 */

-import { useCallback, useRef, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNostr } from '@nostrify/react';

@@ -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,
@@ -58,16 +54,12 @@ import type { DailyMissionAction } from '@/blobbi/actions/lib/daily-missions';
 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 {
+  isItemOnCooldown,
+  setItemCooldown,
+} from '@/blobbi/actions/lib/item-cooldown';

-import type { UseItemFunction } from './BlobbiActionsProvider';
-
-// ─── Configuration ────────────────────────────────────────────────────────────
-
-/** Cooldown time after a failed item use attempt (ms) */
-const ITEM_USE_COOLDOWN_MS = 3000;
-
-/** Cooldown time after a successful item use (ms) - shorter to allow quick successive uses */
-const ITEM_USE_SUCCESS_COOLDOWN_MS = 500;
+import type { UseItemFunction } from './BlobbiActionsContextDef';

 // ─── Types ────────────────────────────────────────────────────────────────────

@@ -84,23 +76,14 @@ export interface UseBlobbiItemUseOptions {
 }

 export interface UseBlobbiItemUseResult {
-  /** The item use function - same signature as UseItemFunction */
+  /** The item use function — same signature as UseItemFunction */
  useItem: UseItemFunction;
  /** Whether item use is available (companion and profile loaded) */
  canUseItems: boolean;
  /** Whether an item use is currently in progress */
  isUsingItem: boolean;
-  /** Check if an item is on cooldown (recently attempted) */
+  /** Check if an item is on cooldown (delegates to shared module) */
  isItemOnCooldown: (itemId: string) => boolean;
-  /** Clear cooldown for an item (e.g., after it's removed) */
-  clearItemCooldown: (itemId: string) => void;
-}
-
-interface ItemCooldownEntry {
-  /** Timestamp when the cooldown expires */
-  expiresAt: number;
-  /** Whether the last attempt succeeded */
-  wasSuccess: boolean;
 }

 // ─── Hook Implementation ──────────────────────────────────────────────────────
@@ -108,16 +91,8 @@ interface ItemCooldownEntry {
 /**
 * Shared Blobbi item-use hook that works anywhere.
 * 
- * This is the "real" item-use logic extracted to be usable from:
- * - BlobbiCompanionLayer (floating companion)
- * - BlobbiPage (main dashboard)
- * - Any other location
- * 
- * Features:
- * - Fetches companion/profile data if not provided
- * - Identical item-use logic to useBlobbiUseInventoryItem
- * - Built-in per-item cooldown/retry protection
- * - Works as a direct hook or registered in context
+ * Uses the centralized item-cooldown module so that cooldown is
+ * consistent regardless of which UI path triggers the use.
 */
 export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlobbiItemUseResult {
  const { nostr } = useNostr();
@@ -126,45 +101,11 @@ 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)
-  const itemCooldowns = useRef<Map<string, ItemCooldownEntry>>(new Map());
-  
-  // Check if an item is on cooldown
-  const isItemOnCooldown = useCallback((itemId: string): boolean => {
-    const entry = itemCooldowns.current.get(itemId);
-    if (!entry) return false;
-    
-    const now = Date.now();
-    if (now >= entry.expiresAt) {
-      // Cooldown expired, remove it
-      itemCooldowns.current.delete(itemId);
-      return false;
-    }
-    
-    return true;
-  }, []);
-  
-  // Clear cooldown for an item
-  const clearItemCooldown = useCallback((itemId: string): void => {
-    itemCooldowns.current.delete(itemId);
-  }, []);
-  
-  // Set cooldown for an item
-  const setItemCooldown = useCallback((itemId: string, success: boolean): void => {
-    const cooldownMs = success ? ITEM_USE_SUCCESS_COOLDOWN_MS : ITEM_USE_COOLDOWN_MS;
-    itemCooldowns.current.set(itemId, {
-      expiresAt: Date.now() + cooldownMs,
-      wasSuccess: success,
-    });
-  }, []);
-  
  // Fetch current companion based on profile's currentCompanion
-  // This is fetched on-demand when needed, not kept in state
  const fetchCurrentCompanion = useCallback(async (): Promise<BlobbiCompanion | null> => {
-    // If companion was provided via options, use that
    if (options.companion !== undefined) {
      return options.companion ?? null;
    }
@@ -188,61 +129,42 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
    return parseBlobbiEvent(validEvents[0]) ?? null;
  }, [nostr, user?.pubkey, profile?.currentCompanion, options.companion]);
  
-  // Update companion in query cache - optimistic update for immediate UI refresh
+  // Update companion in query cache
  const updateCompanionInCache = useCallback((event: NostrEvent) => {
    if (!user?.pubkey || !profile?.currentCompanion) return;
    
-    // Parse the new event to get the updated companion
    const parsed = parseBlobbiEvent(event);
    if (!parsed) {
-      // Fallback to invalidation if parsing fails
-      queryClient.invalidateQueries({ 
-        queryKey: ['blobbi-collection', user.pubkey] 
-      });
+      queryClient.invalidateQueries({ queryKey: ['blobbi-collection', user.pubkey] });
      return;
    }
    
-    // Optimistically update the blobbi-collection cache
-    // This ensures the companion layer sees the update immediately
    queryClient.setQueryData<{ companionsByD: Record<string, BlobbiCompanion>; companions: BlobbiCompanion[] } | undefined>(
-      // Use partial key match - React Query will find any matching query
      ['blobbi-collection', user.pubkey],
      (prev) => {
        if (!prev) return prev;
-        
-        // 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,
-        };
+        const newCompanionsByD = { ...prev.companionsByD, [parsed.d]: parsed };
+        return { companionsByD: newCompanionsByD, companions: Object.values(newCompanionsByD) };
      },
    );
    
-    // Also invalidate to trigger background refetch (ensures consistency)
-    queryClient.invalidateQueries({ 
-      queryKey: ['blobbi-collection', user.pubkey] 
-    });
+    queryClient.invalidateQueries({ queryKey: ['blobbi-collection', user.pubkey] });
  }, [queryClient, user?.pubkey, profile?.currentCompanion]);
  
-  // Core mutation for using items
+  // Core mutation for using items (always single-use)
  const mutation = useMutation({
    mutationFn: async ({ 
      itemId, 
      action, 
-      quantity = 1,
    }: { 
      itemId: string; 
      action: InventoryAction; 
-      quantity?: number;
    }): Promise<{ statsChanged: Record<string, number> }> => {
+      // ─── Cooldown guard (shared across all UIs) ───
+      if (isItemOnCooldown(itemId)) {
+        throw new Error('Please wait before using this item again');
+      }
+
      // ─── Validation ───
      if (!user?.pubkey) {
        throw new Error('You must be logged in to use items');
@@ -252,52 +174,30 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
        throw new Error('Profile not found');
      }
      
-      // Fetch fresh companion data
      const companion = await fetchCurrentCompanion();
-      
      if (!companion) {
        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);
        throw new Error(message ?? 'This companion cannot use this item');
      }
      
-      // Validate item exists in shop catalog
      const shopItem = getShopItemById(itemId);
      if (!shopItem) {
        throw new Error('Item not found in catalog');
      }
      
-      // Validate item can be used by this companion's stage
-      // This catches egg-only items (like Shell Repair Kit) being used by baby/adult companions
      const itemUsability = canUseItemForStage(itemId, companion.stage);
      if (!itemUsability.canUse) {
        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');
      }
      
-      // For eggs, validate that items have applicable effects
      const isEgg = companion.stage === 'egg';
      if (isEgg && action === 'medicine' && !hasMedicineEffectForEgg(shopItem.effect)) {
        throw new Error('This medicine has no effect on eggs');
@@ -315,79 +215,48 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
        lastDecayAt: companion.lastDecayAt,
        now,
      });
-      
-      // 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);
-        
        statsUpdate.hygiene = (statsAfterDecay.hygiene ?? 0).toString();
        statsUpdate.happiness = (statsAfterDecay.happiness ?? 0).toString();
        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);
-        
        statsUpdate.happiness = currentHappiness.toString();
-        const totalHappinessChange = currentHappiness - (statsAfterDecay.happiness ?? 0);
-        if (totalHappinessChange !== 0) {
-          statsChanged.happiness = totalHappinessChange;
-        }
-        
+        const happinessChange = currentHappiness - (statsAfterDecay.happiness ?? 0);
+        if (happinessChange !== 0) statsChanged.happiness = happinessChange;
        statsUpdate.health = (statsAfterDecay.health ?? 0).toString();
        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);
-        }
-        
+        const currentStats = applyItemEffects({ ...statsAfterDecay }, shopItem.effect);
        statsUpdate.hunger = clampStat(currentStats.hunger).toString();
        statsChanged.hunger = (currentStats.hunger ?? 0) - (statsAfterDecay.hunger ?? 0);
-        
        statsUpdate.happiness = clampStat(currentStats.happiness).toString();
        statsChanged.happiness = (currentStats.happiness ?? 0) - (statsAfterDecay.happiness ?? 0);
-        
        statsUpdate.energy = clampStat(currentStats.energy).toString();
        statsChanged.energy = (currentStats.energy ?? 0) - (statsAfterDecay.energy ?? 0);
-        
        statsUpdate.hygiene = clampStat(currentStats.hygiene).toString();
        statsChanged.hygiene = (currentStats.hygiene ?? 0) - (statsAfterDecay.hygiene ?? 0);
-        
        statsUpdate.health = clampStat(currentStats.health).toString();
        statsChanged.health = (currentStats.health ?? 0) - (statsAfterDecay.health ?? 0);
      }
      
      // ─── Update Blobbi State Event (kind 31124) ───
      const nowStr = now.toString();
-      
-      // Handle interaction counter for tasks
      const companionState = companion.state;
      let updatedTags = companion.allTags;
      if (companionState === 'incubating') {
@@ -396,7 +265,6 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
        updatedTags = incrementInteractionTaskTags(companion.allTags, EVOLVE_REQUIRED_INTERACTIONS).updatedTags;
      }
      
-      // Get streak updates (will only update if needed based on day)
      const streakUpdates = getStreakTagUpdates(companion) ?? {};
      
      const blobbiTags = updateBlobbiTags(updatedTags, {
@@ -413,47 +281,27 @@ 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] });
      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.`,
      });
      
+      // Set shared cooldown (success — short)
+      setItemCooldown(itemId, true);
+      
      // Track daily mission progress
      const dailyActions: DailyMissionAction[] = ['interact'];
      if (action === 'feed') dailyActions.push('feed');
      if (action === 'clean') dailyActions.push('clean');
      trackMultipleDailyMissionActions(dailyActions, user?.pubkey);
-      
-      // Set success cooldown (short)
-      setItemCooldown(itemId, true);
    },
    onError: (error: Error, { itemId }) => {
      toast({
@@ -462,14 +310,14 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
        variant: 'destructive',
      });
      
-      // Set failure cooldown (longer)
+      // Set shared cooldown (failure — longer)
      setItemCooldown(itemId, false);
    },
  });
  
-  // Wrapper function that matches UseItemFunction signature and includes cooldown check
-  const useItem = useCallback<UseItemFunction>(async (itemId, action, quantity = 1) => {
-    // Check cooldown first
+  // Wrapper function that matches UseItemFunction signature
+  const useItem = useCallback<UseItemFunction>(async (itemId, action) => {
+    // Check shared cooldown first
    if (isItemOnCooldown(itemId)) {
      if (import.meta.env.DEV) {
        console.log('[useBlobbiItemUse] Item on cooldown, skipping:', itemId);
@@ -481,7 +329,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,
@@ -492,7 +340,7 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
        error: error instanceof Error ? error.message : 'Unknown error',
      };
    }
-  }, [mutation, isItemOnCooldown]);
+  }, [mutation]);
  
  // Determine if items can be used
  const canUseItems = useMemo(() => {
@@ -504,6 +352,5 @@ export function useBlobbiItemUse(options: UseBlobbiItemUseOptions = {}): UseBlob
    canUseItems,
    isUsingItem: mutation.isPending,
    isItemOnCooldown,
-    clearItemCooldown,
  };
 }
@@ -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 () => {
@@ -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,16 @@ 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,
      effect: shopItem.effect,
    });
  }
@@ -197,8 +194,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,
@@ -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 = {
@@ -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) {
@@ -190,7 +192,8 @@ export function useBlobbiMigration() {
        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 */
@@ -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,
@@ -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)
@@ -288,7 +288,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
@@ -316,7 +316,7 @@ export interface BlobbonautProfile {
  coins: number;
  /** Petting level (interaction counter) */
  pettingLevel: number;
-  /** Purchased items inventory */
+  /** Purchased items storage */
  storage: StorageItem[];
  /** All tags preserved for republishing */
  allTags: string[][];
@@ -976,7 +976,8 @@ export function parseBlobbonautEvent(event: NostrEvent): BlobbonautProfile | und
    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,
@@ -996,7 +997,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 +1139,7 @@ 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',
  // Legacy player progress tags (preserved for compatibility)
  'coins', 'petting_level', 'pettingLevel', 'lifetime_blobbis', 'lifetimeBlobbis',
  'starter_blobbi', 'starterBlobbi', 'favorite_blobbi', 'favoriteBlobbi',
@@ -1365,17 +1366,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 ────────────────────────────────────────────────────────────
@@ -527,8 +527,10 @@ export function BlobbiDevEditor({
                  onCheckedChange={setBreedingReady}
                />
              </div>
-            </div>
+             </div>
          </div>
+
+
        </div>

        <DialogFooter className="flex-col sm:flex-row gap-2">
@@ -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';

@@ -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';
-}
@@ -35,5 +35,6 @@ 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';
@@ -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,
@@ -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';
+}
@@ -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 && (
@@ -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
@@ -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;
+  }
+}
@@ -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: '',
+            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: '',
+          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>
+  );
+}
@@ -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}
+    />
+  );
 }
@@ -456,15 +456,18 @@ 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);
@@ -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,
@@ -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>
  );
 }

@@ -276,7 +215,7 @@ export function BlobbiInventoryModal({
              <div className="size-9 sm:size-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20 flex items-center justify-center shrink-0">
                <Package className="size-4 sm:size-5 text-primary" />
              </div>
-              <DialogTitle className="text-xl sm:text-2xl">Inventory</DialogTitle>
+              <DialogTitle className="text-xl sm:text-2xl">Items</DialogTitle>
            </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" />
@@ -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>
-  );
-}
@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react';
-import { ShoppingBag, Package, Loader2, X } from 'lucide-react';
+import { ShoppingBag, Package, Loader2, X, Clock } from 'lucide-react';

 import {
  Dialog,
@@ -16,17 +16,17 @@ 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 { useItemCooldown } from '@/blobbi/actions/hooks/useItemCooldown';
 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 +39,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 +80,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 +105,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 +134,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 +261,7 @@ function ShopGrid({ items, availableCoins, onBuy, purchasingItemId }: ShopGridPr
  );
 }

-// ─── Items Grid (inventory, tile layout) ──────────────────────────────────────
+// ─── Items Grid (catalog, tile layout) ────────────────────────────────────────

 interface ItemsGridProps {
  items: ResolvedInventoryItem[];
@@ -275,20 +271,18 @@ interface ItemsGridProps {
  onGoToShop: () => void;
 }

-function ItemsGrid({ items, onUseItem, isUsingItem, usingItemId, onGoToShop }: ItemsGridProps) {
+function ItemsGrid({ items, onUseItem, isUsingItem, usingItemId, onGoToShop: _onGoToShop }: ItemsGridProps) {
+  const { isOnCooldown } = useItemCooldown();
+
  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>
    );
  }
@@ -298,6 +292,8 @@ function ItemsGrid({ items, onUseItem, isUsingItem, usingItemId, onGoToShop }: I
      <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
        {items.map(item => {
          const isThisUsing = isUsingItem && usingItemId === item.itemId;
+          const isCoolingDown = isOnCooldown(item.itemId);
+          const isDisabled = isUsingItem || isCoolingDown;

          return (
            <div
@@ -308,13 +304,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>

@@ -328,10 +317,12 @@ function ItemsGrid({ items, onUseItem, isUsingItem, usingItemId, onGoToShop }: I
                  variant="outline"
                  className="w-full h-7 text-xs"
                  onClick={() => onUseItem(item)}
-                  disabled={isUsingItem}
+                  disabled={isDisabled}
                >
                  {isThisUsing ? (
                    <Loader2 className="size-3 animate-spin" />
+                  ) : isCoolingDown ? (
+                    <Clock className="size-3 text-muted-foreground" />
                  ) : (
                    'Use'
                  )}
@@ -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 };
+
@@ -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>
  );
@@ -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>
  );
 }
@@ -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} />
@@ -0,0 +1,208 @@
+/**
+ * ActionBarEditor - Lightweight modal for customizing the bottom action bar.
+ *
+ * Rules:
+ * - Main Action + More are fixed (always shown, not editable)
+ * - Up to 3 custom visible slots
+ * - User can toggle visibility, reorder, and highlight one item
+ */
+
+import { useCallback } from 'react';
+import {
+  ChevronUp,
+  ChevronDown,
+  Eye,
+  EyeOff,
+  Star,
+  Egg,
+  Target,
+  Package,
+  Camera,
+  Footprints,
+} from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+
+import {
+  type ActionBarPreferences,
+  type BarItemId,
+  BAR_ITEM_LABELS,
+  MAX_VISIBLE_SLOTS,
+  toggleSlotVisibility,
+  toggleSlotHighlight,
+  moveSlotUp,
+  moveSlotDown,
+  visibleCount,
+  DEFAULT_PREFERENCES,
+} from '../lib/action-bar-preferences';
+
+// ─── Icon Mapping ─────────────────────────────────────────────────────────────
+
+const BAR_ITEM_ICONS: Record<BarItemId, React.ReactNode> = {
+  blobbies: <Egg className="size-4" />,
+  missions: <Target className="size-4" />,
+  items: <Package className="size-4" />,
+  take_photo: <Camera className="size-4" />,
+  set_companion: <Footprints className="size-4" />,
+};
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface ActionBarEditorProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  preferences: ActionBarPreferences;
+  onUpdate: (prefs: ActionBarPreferences) => void;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function ActionBarEditor({
+  open,
+  onOpenChange,
+  preferences,
+  onUpdate,
+}: ActionBarEditorProps) {
+  const currentVisible = visibleCount(preferences);
+  const atMax = currentVisible >= MAX_VISIBLE_SLOTS;
+
+  const handleToggle = useCallback(
+    (id: BarItemId) => onUpdate(toggleSlotVisibility(preferences, id)),
+    [preferences, onUpdate],
+  );
+
+  const handleHighlight = useCallback(
+    (id: BarItemId) => onUpdate(toggleSlotHighlight(preferences, id)),
+    [preferences, onUpdate],
+  );
+
+  const handleUp = useCallback(
+    (id: BarItemId) => onUpdate(moveSlotUp(preferences, id)),
+    [preferences, onUpdate],
+  );
+
+  const handleDown = useCallback(
+    (id: BarItemId) => onUpdate(moveSlotDown(preferences, id)),
+    [preferences, onUpdate],
+  );
+
+  const handleReset = useCallback(
+    () => onUpdate(DEFAULT_PREFERENCES),
+    [onUpdate],
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm w-[calc(100%-2rem)]">
+        <DialogHeader>
+          <DialogTitle className="text-base">Edit Action Bar</DialogTitle>
+          <DialogDescription className="text-xs">
+            Choose up to {MAX_VISIBLE_SLOTS} items. Main Action and More are always shown.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-1 py-2">
+          {preferences.slots.map((slot, idx) => {
+            const isFirst = idx === 0;
+            const isLast = idx === preferences.slots.length - 1;
+            const canTurnOn = slot.visible || !atMax;
+
+            return (
+              <div
+                key={slot.id}
+                className={cn(
+                  'flex items-center gap-2 rounded-lg px-3 py-2 transition-colors',
+                  slot.visible
+                    ? 'bg-accent/60'
+                    : 'bg-muted/30 opacity-60',
+                )}
+              >
+                {/* Icon + Label */}
+                <div className="flex items-center gap-2 flex-1 min-w-0">
+                  {BAR_ITEM_ICONS[slot.id]}
+                  <span className="text-sm font-medium truncate">
+                    {BAR_ITEM_LABELS[slot.id]}
+                  </span>
+                </div>
+
+                {/* Highlight toggle */}
+                {slot.visible && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className={cn('size-7', slot.highlighted && 'text-amber-500')}
+                    onClick={() => handleHighlight(slot.id)}
+                    title={slot.highlighted ? 'Remove highlight' : 'Highlight'}
+                  >
+                    <Star className={cn('size-3.5', slot.highlighted && 'fill-current')} />
+                  </Button>
+                )}
+
+                {/* Reorder controls */}
+                <div className="flex flex-col">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5"
+                    disabled={isFirst}
+                    onClick={() => handleUp(slot.id)}
+                  >
+                    <ChevronUp className="size-3" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-5"
+                    disabled={isLast}
+                    onClick={() => handleDown(slot.id)}
+                  >
+                    <ChevronDown className="size-3" />
+                  </Button>
+                </div>
+
+                {/* Visibility toggle */}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-7"
+                  disabled={!canTurnOn && !slot.visible}
+                  onClick={() => handleToggle(slot.id)}
+                  title={slot.visible ? 'Hide' : 'Show'}
+                >
+                  {slot.visible ? (
+                    <Eye className="size-3.5" />
+                  ) : (
+                    <EyeOff className="size-3.5" />
+                  )}
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Slot counter + reset */}
+        <div className="flex items-center justify-between pt-1">
+          <span className="text-xs text-muted-foreground">
+            {currentVisible}/{MAX_VISIBLE_SLOTS} slots used
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-xs h-7"
+            onClick={handleReset}
+          >
+            Reset to default
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,301 @@
+/**
+ * MissionSurfaceCard - Compact inline card that surfaces ONE relevant
+ * mission/task at a time below the Blobbi visual.
+ *
+ * Priority:
+ *   1. Hatch / Evolve tasks (lifecycle progression)
+ *   2. Daily missions (engagement / coin loop)
+ *
+ * Carousel:
+ *   - Auto-rotates every ~5s when > 1 card available
+ *   - Manual tap cycles to the next card
+ *   - Auto-advances when the current card's mission completes
+ *   - Single card = no rotation
+ */
+
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import {
+  Target,
+  ChevronRight,
+  Egg,
+  Sparkles,
+  Coins,
+  CircleDot,
+  X,
+} from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { cn } from '@/lib/utils';
+
+import type { HatchTask } from '@/blobbi/actions/hooks/useHatchTasks';
+import type { DailyMission } from '@/blobbi/actions/lib/daily-missions';
+
+// ─── Card Item Types ──────────────────────────────────────────────────────────
+
+interface TaskCardItem {
+  kind: 'task';
+  badge: 'Hatch' | 'Evolve';
+  title: string;
+  description: string;
+  progress: number; // 0-100
+  progressLabel: string;
+}
+
+interface DailyCardItem {
+  kind: 'daily';
+  badge: 'Daily';
+  title: string;
+  description: string;
+  progress: number;
+  progressLabel: string;
+  reward: number;
+  claimed: boolean;
+}
+
+type CardItem = TaskCardItem | DailyCardItem;
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+interface MissionSurfaceCardProps {
+  /** Hatch or evolve tasks (from useActiveTaskProcess) */
+  tasks: HatchTask[];
+  /** Whether a task process (incubating/evolving) is active */
+  isInTaskProcess: boolean;
+  /** Process type for badge label */
+  processType: 'hatch' | 'evolve' | null;
+  /** Daily missions */
+  dailyMissions: DailyMission[];
+  /** Called when user taps "View all" */
+  onViewAll: () => void;
+  /** Called when user dismisses the card */
+  onHide?: () => void;
+  /** Additional className */
+  className?: string;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function buildTaskCards(
+  tasks: HatchTask[],
+  processType: 'hatch' | 'evolve' | null,
+): TaskCardItem[] {
+  if (!processType) return [];
+  const badge = processType === 'hatch' ? 'Hatch' : 'Evolve';
+
+  // Show only incomplete tasks, or the first completed one if all are done
+  const incomplete = tasks.filter((t) => !t.completed);
+  const toShow = incomplete.length > 0 ? incomplete : tasks.slice(0, 1);
+
+  return toShow.map((t) => ({
+    kind: 'task',
+    badge: badge as 'Hatch' | 'Evolve',
+    title: t.name,
+    description: t.description,
+    progress: t.required > 0 ? Math.min(100, Math.round((t.current / t.required) * 100)) : 0,
+    progressLabel: `${t.current}/${t.required}`,
+  }));
+}
+
+function buildDailyCards(missions: DailyMission[]): DailyCardItem[] {
+  // Show unclaimed missions first, then claimed ones
+  const unclaimed = missions.filter((m) => !m.claimed);
+  const toShow = unclaimed.length > 0 ? unclaimed : [];
+
+  return toShow.map((m) => ({
+    kind: 'daily',
+    badge: 'Daily',
+    title: m.title,
+    description: m.description,
+    progress: m.requiredCount > 0
+      ? Math.min(100, Math.round((m.currentCount / m.requiredCount) * 100))
+      : 0,
+    progressLabel: `${m.currentCount}/${m.requiredCount}`,
+    reward: m.reward,
+    claimed: m.claimed,
+  }));
+}
+
+// ─── Auto-rotate interval ─────────────────────────────────────────────────────
+const ROTATE_INTERVAL_MS = 5000;
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function MissionSurfaceCard({
+  tasks,
+  isInTaskProcess,
+  processType,
+  dailyMissions,
+  onViewAll,
+  onHide,
+  className,
+}: MissionSurfaceCardProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // Build card list: tasks first (priority), then daily
+  const cards = useMemo<CardItem[]>(() => {
+    const taskCards = isInTaskProcess ? buildTaskCards(tasks, processType) : [];
+    const dailyCards = buildDailyCards(dailyMissions);
+    return [...taskCards, ...dailyCards];
+  }, [tasks, isInTaskProcess, processType, dailyMissions]);
+
+  // Clamp index if cards shrink
+  useEffect(() => {
+    if (activeIndex >= cards.length && cards.length > 0) {
+      setActiveIndex(0);
+    }
+  }, [cards.length, activeIndex]);
+
+  // Auto-rotate (only when > 1 card)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (cards.length <= 1) {
+      if (timerRef.current) clearInterval(timerRef.current);
+      return;
+    }
+
+    timerRef.current = setInterval(() => {
+      setIsAnimating(true);
+      setTimeout(() => {
+        setActiveIndex((prev) => (prev + 1) % cards.length);
+        setIsAnimating(false);
+      }, 150);
+    }, ROTATE_INTERVAL_MS);
+
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [cards.length]);
+
+  // Manual cycle
+  const handleCycle = useCallback(() => {
+    if (cards.length <= 1) return;
+    // Reset auto-rotate timer
+    if (timerRef.current) clearInterval(timerRef.current);
+    setIsAnimating(true);
+    setTimeout(() => {
+      setActiveIndex((prev) => (prev + 1) % cards.length);
+      setIsAnimating(false);
+      // Restart timer
+      timerRef.current = setInterval(() => {
+        setIsAnimating(true);
+        setTimeout(() => {
+          setActiveIndex((prev) => (prev + 1) % cards.length);
+          setIsAnimating(false);
+        }, 150);
+      }, ROTATE_INTERVAL_MS);
+    }, 150);
+  }, [cards.length]);
+
+  // Nothing to show
+  if (cards.length === 0) return null;
+
+  const card = cards[Math.min(activeIndex, cards.length - 1)];
+
+  const badgeColor =
+    card.badge === 'Hatch'
+      ? 'bg-amber-500/15 text-amber-600 dark:text-amber-400'
+      : card.badge === 'Evolve'
+        ? 'bg-purple-500/15 text-purple-600 dark:text-purple-400'
+        : 'bg-primary/10 text-primary';
+
+  const badgeIcon =
+    card.badge === 'Hatch' ? (
+      <Egg className="size-3" />
+    ) : card.badge === 'Evolve' ? (
+      <Sparkles className="size-3" />
+    ) : (
+      <Target className="size-3" />
+    );
+
+  return (
+    <div className={cn('w-full', className)}>
+      <button
+        onClick={handleCycle}
+        className={cn(
+          'w-full text-left rounded-xl border border-border/60 bg-card/80 backdrop-blur-sm',
+          'px-3.5 py-2.5 transition-all duration-200',
+          'hover:bg-accent/40 active:scale-[0.99]',
+          isAnimating && 'opacity-0 translate-x-2',
+          !isAnimating && 'opacity-100 translate-x-0',
+        )}
+      >
+        {/* Top row: badge + title + view all */}
+        <div className="flex items-center gap-2 mb-1.5">
+          <Badge
+            variant="secondary"
+            className={cn('text-[10px] font-medium px-1.5 py-0 h-4 gap-1', badgeColor)}
+          >
+            {badgeIcon}
+            {card.badge}
+          </Badge>
+          <span className="text-sm font-medium truncate flex-1">
+            {card.title}
+          </span>
+          {/* Dot indicators when multiple cards */}
+          {cards.length > 1 && (
+            <div className="flex gap-0.5 items-center shrink-0">
+              {cards.map((_, i) => (
+                <CircleDot
+                  key={i}
+                  className={cn(
+                    'size-2 transition-colors',
+                    i === activeIndex
+                      ? 'text-primary'
+                      : 'text-muted-foreground/30',
+                  )}
+                />
+              ))}
+            </div>
+          )}
+          {/* Dismiss button */}
+          {onHide && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onHide();
+              }}
+              className="shrink-0 p-0.5 -m-0.5 rounded text-muted-foreground/50 hover:text-muted-foreground transition-colors"
+              title="Hide mission card"
+            >
+              <X className="size-3.5" />
+            </button>
+          )}
+        </div>
+
+        {/* Description */}
+        <p className="text-xs text-muted-foreground mb-2 line-clamp-1">
+          {card.description}
+        </p>
+
+        {/* Bottom row: progress bar + label + reward/view all */}
+        <div className="flex items-center gap-2">
+          <Progress
+            value={card.progress}
+            className="h-1.5 flex-1"
+          />
+          <span className="text-[10px] text-muted-foreground font-mono shrink-0">
+            {card.progressLabel}
+          </span>
+          {card.kind === 'daily' && !card.claimed && (
+            <span className="flex items-center gap-0.5 text-[10px] text-amber-600 dark:text-amber-400 font-medium shrink-0">
+              <Coins className="size-2.5" />
+              {card.reward}
+            </span>
+          )}
+        </div>
+      </button>
+
+      {/* View all link */}
+      <button
+        onClick={onViewAll}
+        className="flex items-center gap-1 mx-auto mt-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+      >
+        View all missions
+        <ChevronRight className="size-3" />
+      </button>
+    </div>
+  );
+}
@@ -0,0 +1,251 @@
+/**
+ * Action Bar Preferences
+ *
+ * Lightweight localStorage-backed model controlling which items are
+ * visible in the BlobbiBottomBar and in which order.
+ *
+ * Fixed items (cannot be hidden or reordered by the user):
+ *   - Main Action (center button) -- always present
+ *   - More (right-most button)   -- always present
+ *
+ * Customizable items (up to 3 visible slots):
+ *   Candidates: Blobbies, Missions, Items, Take Photo, Set as Companion
+ *
+ * Persistence: localStorage only for now. Shape is designed so it can
+ * later migrate to a Nostr event tag.
+ */
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+/** Identifiers for customizable bottom-bar items */
+export type BarItemId =
+  | 'blobbies'
+  | 'missions'
+  | 'items'
+  | 'take_photo'
+  | 'set_companion';
+
+/** A single customizable bar slot */
+export interface BarItemSlot {
+  id: BarItemId;
+  visible: boolean;
+  /** If true, this item receives a subtle highlight ring in the bar */
+  highlighted?: boolean;
+}
+
+/** Full persisted preference shape */
+export interface ActionBarPreferences {
+  /** Ordered list of customizable items. Visible items render in array order. */
+  slots: BarItemSlot[];
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+/** Max visible customizable items (Main Action + More are fixed) */
+export const MAX_VISIBLE_SLOTS = 3;
+
+/** localStorage key for bar slot preferences */
+export const STORAGE_KEY = 'blobbi:action-bar-prefs';
+
+/** localStorage key for inline mission surface card visibility */
+export const MISSION_CARD_STORAGE_KEY = 'blobbi:mission-card-visible';
+
+/** Human-readable labels */
+export const BAR_ITEM_LABELS: Record<BarItemId, string> = {
+  blobbies: 'Blobbies',
+  missions: 'Missions',
+  items: 'Items',
+  take_photo: 'Take Photo',
+  set_companion: 'Companion',
+};
+
+/** Default preferences: only Blobbies visible, others hidden */
+export const DEFAULT_PREFERENCES: ActionBarPreferences = {
+  slots: [
+    { id: 'blobbies', visible: true },
+    { id: 'missions', visible: false },
+    { id: 'items', visible: false },
+    { id: 'take_photo', visible: false },
+    { id: 'set_companion', visible: false },
+  ],
+};
+
+// ─── Utilities ────────────────────────────────────────────────────────────────
+
+/** Return only visible slots, in order */
+export function getVisibleSlots(prefs: ActionBarPreferences): BarItemSlot[] {
+  return prefs.slots.filter((s) => s.visible);
+}
+
+/** Count of currently visible custom items */
+export function visibleCount(prefs: ActionBarPreferences): number {
+  return prefs.slots.filter((s) => s.visible).length;
+}
+
+/** Can we show one more item? */
+export function canShowMore(prefs: ActionBarPreferences): boolean {
+  return visibleCount(prefs) < MAX_VISIBLE_SLOTS;
+}
+
+/** Toggle visibility of a slot. Enforces MAX_VISIBLE_SLOTS. */
+export function toggleSlotVisibility(
+  prefs: ActionBarPreferences,
+  id: BarItemId,
+): ActionBarPreferences {
+  const slot = prefs.slots.find((s) => s.id === id);
+  if (!slot) return prefs;
+
+  // If turning ON and already at max, reject
+  if (!slot.visible && !canShowMore(prefs)) return prefs;
+
+  return {
+    slots: prefs.slots.map((s) =>
+      s.id === id ? { ...s, visible: !s.visible } : s,
+    ),
+  };
+}
+
+/** Toggle highlight on a slot (only one can be highlighted at a time) */
+export function toggleSlotHighlight(
+  prefs: ActionBarPreferences,
+  id: BarItemId,
+): ActionBarPreferences {
+  return {
+    slots: prefs.slots.map((s) =>
+      s.id === id
+        ? { ...s, highlighted: !s.highlighted }
+        : { ...s, highlighted: false },
+    ),
+  };
+}
+
+/** Move a slot up (earlier) in the list */
+export function moveSlotUp(
+  prefs: ActionBarPreferences,
+  id: BarItemId,
+): ActionBarPreferences {
+  const idx = prefs.slots.findIndex((s) => s.id === id);
+  if (idx <= 0) return prefs;
+  const newSlots = [...prefs.slots];
+  [newSlots[idx - 1], newSlots[idx]] = [newSlots[idx], newSlots[idx - 1]];
+  return { slots: newSlots };
+}
+
+/** Move a slot down (later) in the list */
+export function moveSlotDown(
+  prefs: ActionBarPreferences,
+  id: BarItemId,
+): ActionBarPreferences {
+  const idx = prefs.slots.findIndex((s) => s.id === id);
+  if (idx < 0 || idx >= prefs.slots.length - 1) return prefs;
+  const newSlots = [...prefs.slots];
+  [newSlots[idx], newSlots[idx + 1]] = [newSlots[idx + 1], newSlots[idx]];
+  return { slots: newSlots };
+}
+
+/**
+ * Validate and repair preferences loaded from localStorage.
+ * Adds missing candidates, removes unknown ids, preserves order.
+ */
+export function validatePreferences(raw: unknown): ActionBarPreferences {
+  if (!raw || typeof raw !== 'object' || !('slots' in raw)) {
+    return DEFAULT_PREFERENCES;
+  }
+
+  const obj = raw as { slots: unknown };
+  if (!Array.isArray(obj.slots)) return DEFAULT_PREFERENCES;
+
+  const knownIds = new Set<BarItemId>(DEFAULT_PREFERENCES.slots.map((s) => s.id));
+  const seenIds = new Set<BarItemId>();
+
+  // Keep valid existing entries
+  const cleaned: BarItemSlot[] = [];
+  for (const item of obj.slots) {
+    if (
+      item &&
+      typeof item === 'object' &&
+      'id' in item &&
+      typeof (item as BarItemSlot).id === 'string' &&
+      knownIds.has((item as BarItemSlot).id) &&
+      !seenIds.has((item as BarItemSlot).id)
+    ) {
+      const slot = item as BarItemSlot;
+      seenIds.add(slot.id);
+      cleaned.push({
+        id: slot.id,
+        visible: typeof slot.visible === 'boolean' ? slot.visible : false,
+        highlighted: typeof slot.highlighted === 'boolean' ? slot.highlighted : false,
+      });
+    }
+  }
+
+  // Add any missing candidates (new features added after user saved prefs)
+  for (const def of DEFAULT_PREFERENCES.slots) {
+    if (!seenIds.has(def.id)) {
+      cleaned.push({ ...def });
+    }
+  }
+
+  return { slots: cleaned };
+}
+
+/**
+ * Load preferences from localStorage with validation.
+ */
+export function loadPreferences(): ActionBarPreferences {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return DEFAULT_PREFERENCES;
+    return validatePreferences(JSON.parse(raw));
+  } catch {
+    return DEFAULT_PREFERENCES;
+  }
+}
+
+/**
+ * Save preferences to localStorage.
+ */
+export function savePreferences(prefs: ActionBarPreferences): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+  } catch {
+    // Silently fail (quota, SSR, etc.)
+  }
+}
+
+// ─── Mission Surface Card Visibility ──────────────────────────────────────────
+
+/**
+ * Load the inline mission card visibility preference.
+ * Defaults to `true` (visible).
+ */
+export function loadMissionCardVisible(): boolean {
+  try {
+    const raw = localStorage.getItem(MISSION_CARD_STORAGE_KEY);
+    if (raw === null) return true;
+    return raw === 'true';
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Save the inline mission card visibility preference.
+ */
+export function saveMissionCardVisible(visible: boolean): void {
+  try {
+    localStorage.setItem(MISSION_CARD_STORAGE_KEY, String(visible));
+  } catch {
+    // Silently fail
+  }
+}
+
+// ─── Visible-in-bar Set Helper ────────────────────────────────────────────────
+
+/**
+ * Return the set of BarItemIds currently visible in the bottom bar.
+ * Used by the More dropdown to skip items that are already in the bar.
+ */
+export function getVisibleBarIds(prefs: ActionBarPreferences): Set<BarItemId> {
+  return new Set(prefs.slots.filter((s) => s.visible).map((s) => s.id));
+}
@@ -45,7 +45,7 @@ export function blobbiCompanionToBlobbi(companion: BlobbiCompanion): Blobbi {
    size: companion.visualTraits.size,
    // Metadata
    seed: companion.seed,
-    tags: companion.allTags,
+    tags: companion.allTags ?? [],
    // Adult-specific data (for adult form resolution)
    adult: companion.adultType ? { evolutionForm: companion.adultType } : undefined,
  };
@@ -1,12 +1,13 @@
 import type { NostrEvent, NostrMetadata } from '@nostrify/nostrify';
-import { ExternalLink, GitFork, Package } from 'lucide-react';
+import { ExternalLink, GitFork, Package, Play } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';

 import { Button } from '@/components/ui/button';
 import { ExternalFavicon } from '@/components/ExternalFavicon';
+import { NsitePreviewDialog } from '@/components/NsitePreviewDialog';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useLinkPreview } from '@/hooks/useLinkPreview';
+import { useAddrEvent } from '@/hooks/useEvent';
 import { NostrURI } from '@/lib/NostrURI';
 import { cn } from '@/lib/utils';

@@ -66,6 +67,31 @@ function getShakespeareUrl(tags: string[][]): string | undefined {
  return undefined;
 }

+
+interface NsiteRef {
+  /** The author pubkey (hex) of the kind 35128 event. */
+  pubkey: string;
+  /** The d-tag identifier of the kind 35128 event. */
+  identifier: string;
+}
+
+/**
+ * Extract nsite info from a kind 35128 `a` tag, if present.
+ * The `a` tag value format is `"35128:<pubkey>:<d-tag>"`.
+ */
+function getNsiteRef(tags: string[][]): NsiteRef | undefined {
+  for (const tag of tags) {
+    if (tag[0] !== 'a') continue;
+    const parts = tag[1]?.split(':');
+    if (!parts || parts[0] !== '35128' || parts.length < 3) continue;
+    const pubkey = parts[1];
+    const identifier = parts.slice(2).join(':');
+    if (!pubkey || !identifier) continue;
+    return { pubkey, identifier };
+  }
+  return undefined;
+}
+
 interface AppHandlerContentProps {
  event: NostrEvent;
  /** If true, show compact preview (used in NoteCard feed). */
@@ -79,42 +105,40 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
  const name = metadata.name || getTag(event.tags, 'name') || getTag(event.tags, 'd') || 'Unknown App';
  const about = metadata.about;
  const picture = metadata.picture;
+  const banner = metadata.banner;
  const websiteUrl = getWebsiteUrl(event.tags, metadata);
  const hashtags = getAllTags(event.tags, 't');

  const shakespeareUrl = useMemo(() => getShakespeareUrl(event.tags), [event.tags]);
+  const nsiteRef = useMemo(() => getNsiteRef(event.tags), [event.tags]);
+  const [previewOpen, setPreviewOpen] = useState(false);

-  const { data: preview, isLoading: previewLoading } = useLinkPreview(websiteUrl ?? null);
-  const thumbnailUrl = preview?.thumbnail_url;
-
-  const [imgError, setImgError] = useState(false);
-  const showThumbnail = thumbnailUrl && !imgError;
+  // Fetch the actual nsite event so we can serve files directly from Blossom.
+  const { data: nsiteEvent } = useAddrEvent(
+    nsiteRef ? { kind: 35128, pubkey: nsiteRef.pubkey, identifier: nsiteRef.identifier } : undefined,
+  );

  if (compact) {
    return (
+      <>
      <div className="mt-2">
        <div className="rounded-xl border border-border overflow-hidden transition-all duration-300 hover:shadow-md hover:border-primary/20">
-          {/* Screenshot hero — only shown while loading or when a thumbnail exists */}
-          {(previewLoading || showThumbnail) && (
+          {/* Banner hero */}
+          {banner && (
            <div className="relative aspect-[2/1] bg-gradient-to-br from-muted/50 to-muted overflow-hidden">
-              {previewLoading ? (
-                <Skeleton className="absolute inset-0" />
-              ) : (
-                <img
-                  src={thumbnailUrl}
-                  alt={name}
-                  className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
-                  loading="lazy"
-                  onError={() => setImgError(true)}
-                />
-              )}
+              <img
+                src={banner}
+                alt=""
+                className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+                loading="lazy"
+              />
            </div>
          )}

          {/* Content */}
-          <div className="relative z-10 px-3.5 pb-3.5 space-y-2">
-            {/* App icon — overlaps the screenshot hero like a profile avatar */}
-            <div className={showThumbnail || previewLoading ? '-mt-7' : 'pt-3.5'}>
+          <div className="relative px-3.5 pb-3.5 space-y-2">
+            {/* App icon — overlaps the banner hero like a profile avatar */}
+            <div className={banner ? '-mt-7' : 'pt-3.5'}>
              {picture ? (
                <img
                  src={picture}
@@ -166,8 +190,19 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {

            {/* Actions */}
            <div className="flex items-center gap-2">
+              {nsiteRef && (
+                <Button
+                  size="sm"
+                  className="h-7 text-xs"
+                  disabled={!nsiteEvent}
+                  onClick={(e) => { e.stopPropagation(); setPreviewOpen(true); }}
+                >
+                  <Play className="size-3 mr-1" />
+                  Run
+                </Button>
+              )}
              {websiteUrl && (
-                <Button asChild size="sm" className="h-7 text-xs">
+                <Button asChild size="sm" variant={nsiteRef ? 'secondary' : 'default'} className="h-7 text-xs">
                  <a href={websiteUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                    Open App
                    <ExternalLink className="size-3 ml-1.5" />
@@ -186,36 +221,42 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
          </div>
        </div>
      </div>
-    );
+
+      {nsiteRef && nsiteEvent && (
+         <NsitePreviewDialog
+           event={nsiteEvent}
+           appName={name}
+           appPicture={picture}
+           open={previewOpen}
+           onOpenChange={setPreviewOpen}
+         />
+       )}
+       </>
+     );
  }

  // Full detail view
  return (
    <div className="mt-3">
      <div className="rounded-xl border border-border overflow-hidden">
-        {/* Screenshot hero — only shown while loading or when a thumbnail exists */}
-        {(previewLoading || showThumbnail) && (
+        {/* Banner hero */}
+        {banner && (
          <div className="relative aspect-[2/1] bg-gradient-to-br from-muted/50 to-muted overflow-hidden">
-            {previewLoading ? (
-              <Skeleton className="absolute inset-0" />
-            ) : (
-              <img
-                src={thumbnailUrl}
-                alt={name}
-                className="size-full object-cover"
-                loading="lazy"
-                onError={() => setImgError(true)}
-              />
-            )}
+            <img
+              src={banner}
+              alt=""
+              className="size-full object-cover"
+              loading="lazy"
+            />
          </div>
        )}

        {/* Content */}
-        <div className="relative z-10 px-4 pb-4 space-y-3">
-          {/* App icon — overlaps the screenshot hero like a profile avatar */}
+        <div className="relative px-4 pb-4 space-y-3">
+          {/* App icon — overlaps the banner hero like a profile avatar */}
          <div className={cn(
            'flex items-end justify-between',
-            showThumbnail || previewLoading ? '-mt-10' : 'pt-4',
+            banner ? '-mt-10' : 'pt-4',
          )}>
            {picture ? (
              <img
@@ -268,8 +309,18 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {

          {/* Actions */}
          <div className="flex items-center gap-2 pt-1">
+            {nsiteRef && (
+              <Button
+                size="sm"
+                disabled={!nsiteEvent}
+                onClick={(e) => { e.stopPropagation(); setPreviewOpen(true); }}
+              >
+                <Play className="size-3.5 mr-1.5" />
+                Run
+              </Button>
+            )}
            {websiteUrl && (
-              <Button asChild size="sm">
+              <Button asChild size="sm" variant={nsiteRef ? 'secondary' : 'default'}>
                <a href={websiteUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                  Open App
                  <ExternalLink className="size-3 ml-1.5" />
@@ -287,6 +338,16 @@ export function AppHandlerContent({ event, compact }: AppHandlerContentProps) {
          </div>
        </div>
      </div>
+
+      {nsiteRef && nsiteEvent && (
+        <NsitePreviewDialog
+          event={nsiteEvent}
+          appName={name}
+          appPicture={picture}
+          open={previewOpen}
+          onOpenChange={setPreviewOpen}
+        />
+      )}
    </div>
  );
 }
@@ -7,7 +7,7 @@
 import { useMemo } from 'react';
 import { Play, Pause, Music, ListMusic, Podcast, Clock } from 'lucide-react';
 import type { NostrEvent } from '@nostrify/nostrify';
-import { useAudioPlayer } from '@/contexts/AudioPlayerContext';
+import { useAudioPlayer } from '@/contexts/audioPlayerContextDef';
 import { parseMusicTrack, parseMusicPlaylist, toAudioTrack } from '@/lib/musicHelpers';
 import { parsePodcastEpisode, parsePodcastTrailer, episodeToAudioTrack, trailerToAudioTrack } from '@/lib/podcastHelpers';
 import { useAuthor } from '@/hooks/useAuthor';
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useAudioPlayer } from '@/contexts/AudioPlayerContext';
+import { useAudioPlayer } from '@/contexts/audioPlayerContextDef';

 /**
 * Auto-minimizes the audio player when the user navigates to a different page.
@@ -3,39 +3,7 @@ import { Award } from 'lucide-react';
 import type { NostrEvent } from '@nostrify/nostrify';

 import { useCardTilt } from '@/hooks/useCardTilt';
-
-/** Parsed NIP-58 badge definition data. */
-export interface BadgeData {
-  identifier: string;
-  name: string;
-  description?: string;
-  image?: string;
-  imageDimensions?: string;
-  thumbs: Array<{ url: string; dimensions?: string }>;
-}
-
-/** Parse a kind 30009 badge definition event into structured data. */
-export function parseBadgeDefinition(event: NostrEvent): BadgeData | null {
-  if (event.kind !== 30009) return null;
-
-  const identifier = event.tags.find(([n]) => n === 'd')?.[1];
-  if (!identifier) return null;
-
-  const name = event.tags.find(([n]) => n === 'name')?.[1] || identifier;
-  const description = event.tags.find(([n]) => n === 'description')?.[1];
-  const imageTag = event.tags.find(([n]) => n === 'image');
-  const image = imageTag?.[1];
-  const imageDimensions = imageTag?.[2];
-
-  const thumbs: Array<{ url: string; dimensions?: string }> = [];
-  for (const tag of event.tags) {
-    if (tag[0] === 'thumb' && tag[1]) {
-      thumbs.push({ url: tag[1], dimensions: tag[2] });
-    }
-  }
-
-  return { identifier, name, description, image, imageDimensions, thumbs };
-}
+import { parseBadgeDefinition } from '@/lib/parseBadgeDefinition';

 interface BadgeContentProps {
  event: NostrEvent;
@@ -28,7 +28,7 @@ import { useMuteList } from '@/hooks/useMuteList';
 import { isEventMuted } from '@/lib/muteHelpers';
 import { genUserName } from '@/lib/genUserName';
 import { VerifiedNip05Text } from '@/components/Nip05Badge';
-import { parseBadgeDefinition } from '@/components/BadgeContent';
+import { parseBadgeDefinition } from '@/lib/parseBadgeDefinition';
 import { useCardTilt } from '@/hooks/useCardTilt';
 import { useProfileUrl } from '@/hooks/useProfileUrl';
 import { AwardBadgeDialog } from '@/components/AwardBadgeDialog';
@@ -8,8 +8,8 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { BadgeThumbnail } from '@/components/BadgeThumbnail';
-import { parseBadgeDefinition, type BadgeData } from '@/components/BadgeContent';
-import { parseProfileBadges } from '@/components/ProfileBadgesContent';
+import { parseBadgeDefinition, type BadgeData } from '@/lib/parseBadgeDefinition';
+import { parseProfileBadges } from '@/lib/parseProfileBadges';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
 import { useToast } from '@/hooks/useToast';
@@ -5,7 +5,7 @@ import { nip19 } from 'nostr-tools';
 import { BadgeThumbnail } from '@/components/BadgeThumbnail';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
-import type { BadgeData } from '@/components/BadgeContent';
+import type { BadgeData } from '@/lib/parseBadgeDefinition';
 import { cn } from '@/lib/utils';

 interface BadgeDisplayItem {
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { Award } from 'lucide-react';

-import type { BadgeData } from '@/components/BadgeContent';
+import type { BadgeData } from '@/lib/parseBadgeDefinition';
 import { useCardTilt } from '@/hooks/useCardTilt';
 import { cn } from '@/lib/utils';

@@ -2,8 +2,7 @@ import { useMemo, useState, useEffect, useId } from 'react';

 import { cn } from '@/lib/utils';
 import { useTheme } from '@/hooks/useTheme';
-import { hexToHslString, hexToRgb, rgbToHsl, hslToRgb, getLuminance, getContrastRatio, parseHsl, formatHsl, hexLuminance } from '@/lib/colorUtils';
-import type { CoreThemeColors } from '@/themes';
+import { getColors, paletteToTheme } from '@/lib/colorMomentUtils';
 import type { NostrEvent } from '@nostrify/nostrify';

 type Layout = 'horizontal' | 'vertical' | 'grid' | 'star' | 'checkerboard' | 'diagonalStripes';
@@ -12,12 +11,7 @@ function getTag(tags: string[][], name: string): string | undefined {
  return tags.find(([n]) => n === name)?.[1];
 }

-export function getColors(tags: string[][]): string[] {
-  return tags
-    .filter(([n]) => n === 'c')
-    .map(([, v]) => v)
-    .filter((v) => /^#[0-9A-Fa-f]{6}$/.test(v));
-}
+

 /** Compute a best-fit grid: cols × rows for n items. */
 function gridDimensions(n: number): { cols: number; rows: number } {
@@ -193,82 +187,6 @@ function DiagonalStripesLayout({ colors }: { colors: string[] }) {
  );
 }

-// ─── Palette → theme mapping ─────────────────────────────
-
-function hexContrast(hex1: string, hex2: string): number {
-  return getContrastRatio(hexToRgb(hex1), hexToRgb(hex2));
-}
-
-function hexSaturation(hex: string): number {
-  return rgbToHsl(...hexToRgb(hex)).s;
-}
-
-/**
- * Adjust the lightness of an HSL string until it achieves at least `targetRatio`
- * contrast against `bgHsl`. Steps toward white or black depending on which
- * direction gives better contrast. Returns the adjusted HSL string.
- */
-function enforceContrast(hsl: string, bgHsl: string, targetRatio: number): string {
-  const bg = parseHsl(bgHsl);
-  const bgLum = getLuminance(...hslToRgb(bg.h, bg.s, bg.l));
-  const { h, s, l } = parseHsl(hsl);
-
-  // Decide direction: go lighter if bg is dark, darker if bg is light
-  const goLighter = bgLum < 0.18;
-  let current = l;
-
-  for (let i = 0; i < 50; i++) {
-    current = goLighter
-      ? Math.min(100, current + 2)
-      : Math.max(0, current - 2);
-    const rgb = hslToRgb(h, s, current);
-    const lum = getLuminance(...rgb);
-    const lighter = Math.max(bgLum, lum);
-    const darker = Math.min(bgLum, lum);
-    if ((lighter + 0.05) / (darker + 0.05) >= targetRatio) break;
-  }
-
-  return formatHsl(h, s, current);
-}
-
-/**
- * Map palette hex colors to CoreThemeColors with guaranteed readability:
- * 1. background = darkest color
- * 2. text       = lightest color; if contrast < 4.5:1, synthesize white or black
- * 3. primary    = most saturated remaining color; if contrast < 3:1 against
- *                 background, adjust its lightness until it passes
- */
-export function paletteToTheme(colors: string[]): CoreThemeColors {
-  if (colors.length === 0) {
-    return { background: '0 0% 10%', text: '0 0% 98%', primary: '258 70% 55%' };
-  }
-
-  const sorted = [...colors].sort((a, b) => hexLuminance(a) - hexLuminance(b));
-  const bgHex = sorted[0];
-  const bgHsl = hexToHslString(bgHex);
-
-  // Text: lightest palette color; override with white/black if contrast is too low
-  const textHex = sorted[sorted.length - 1];
-  let textHsl = hexToHslString(textHex);
-  if (hexContrast(textHex, bgHex) < 4.5) {
-    // Pick white or black — whichever contrasts better
-    const whiteContrast = hexContrast('#ffffff', bgHex);
-    const blackContrast = hexContrast('#000000', bgHex);
-    textHsl = whiteContrast >= blackContrast ? '0 0% 98%' : '222 20% 8%';
-  }
-
-  // Primary: most saturated of remaining colors; nudge lightness if needed
-  const rest = colors.filter((c) => c !== bgHex && c !== textHex);
-  const pool = rest.length > 0 ? rest : [textHex];
-  const primaryHex = pool.reduce((best, c) => hexSaturation(c) > hexSaturation(best) ? c : best, pool[0]);
-  let primaryHsl = hexToHslString(primaryHex);
-  if (hexContrast(primaryHex, bgHex) < 3) {
-    primaryHsl = enforceContrast(primaryHsl, bgHsl, 3);
-  }
-
-  return { background: bgHsl, text: textHsl, primary: primaryHsl };
-}
-
 // ─── Main component ──────────────────────────────────────

 const LAYOUT_MAP: Record<Layout, React.FC<{ colors: string[] }>> = {
@@ -6,7 +6,7 @@ import {
  Award, BarChart3, BookOpen, Camera, Clapperboard, Egg, FileText, Film,
  GitBranch, GitPullRequest, Mail, MapPin, MessageSquare, Mic, Music,
  Package, Palette, PartyPopper, Podcast, Radio, Rocket, SmilePlus, Sparkles,
-  Users, Zap,
+  Users, Vote, Zap,
 } from 'lucide-react';
 import type { NostrEvent } from '@nostrify/nostrify';

@@ -22,6 +22,7 @@ import { ExternalFavicon } from '@/components/ExternalFavicon';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useAddrEvent, useEvent } from '@/hooks/useEvent';
+import { usePollVoteLabel } from '@/hooks/usePollVoteLabel';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useBookInfo } from '@/hooks/useBookInfo';
 import { useLinkPreview } from '@/hooks/useLinkPreview';
@@ -44,26 +45,38 @@ interface CommentRoot {
  identifier?: string;
  /** Root kind number (from K tag). */
  rootKind?: string;
+  /** Relay URL hint from the E or A tag (position [2]). */
+  relayHint?: string;
+  /** Author pubkey hint extracted from the E tag (position [3]) or P tag. */
+  authorHint?: string;
 }

 /** Parse the root reference from a kind 1111 comment's tags. */
 function parseCommentRoot(event: NostrEvent): CommentRoot | undefined {
-  const aTag = event.tags.find(([name]) => name === 'A')?.[1];
+  const aTagFull = event.tags.find(([name]) => name === 'A');
  // Use find (not findLast) to get the root E tag, not a parent e tag
-  const eTag = event.tags.find(([name]) => name === 'E')?.[1];
+  const eTagFull = event.tags.find(([name]) => name === 'E');
  const iTag = event.tags.find(([name]) => name === 'I')?.[1];
  const kTag = event.tags.find(([name]) => name === 'K')?.[1];
+  // P tag holds the root event author's pubkey — used as author hint fallback
+  const pTag = event.tags.find(([name]) => name === 'P')?.[1];

-  if (aTag) {
+  if (aTagFull) {
+    const aTag = aTagFull[1];
+    const relayHint = aTagFull[2] || undefined;
    const parts = aTag.split(':');
    const kind = parseInt(parts[0], 10);
    const pubkey = parts[1] ?? '';
    const identifier = parts.slice(2).join(':');
-    return { type: 'addr', addr: { kind, pubkey, identifier }, rootKind: kTag };
+    return { type: 'addr', addr: { kind, pubkey, identifier }, rootKind: kTag, relayHint };
  }

-  if (eTag) {
-    return { type: 'event', eventId: eTag, rootKind: kTag };
+  if (eTagFull) {
+    const eTag = eTagFull[1];
+    const relayHint = eTagFull[2] || undefined;
+    // NIP-22 E tags may have the author pubkey at position [3]; fall back to P tag
+    const authorHint = eTagFull[3] || pTag || undefined;
+    return { type: 'event', eventId: eTag, rootKind: kTag, relayHint, authorHint };
  }

  if (iTag) {
@@ -91,6 +104,7 @@ const KIND_LABELS: Record<number, string> = {
  22: 'a short video',
  62: 'a request to vanish',
  1063: 'a file',
+  1018: 'a vote',
  1068: 'a poll',
  1111: 'a comment',
  1222: 'a voice message',
@@ -108,7 +122,8 @@ const KIND_LABELS: Record<number, string> = {
  30030: 'an emoji pack',
  30054: 'a podcast episode',
  30055: 'a podcast trailer',
-  30063: 'a release',
+  3063: 'a Zapstore asset',
+  30063: 'a Zapstore release',
  30311: 'a stream',
  30315: 'a status',
  30617: 'a repository',
@@ -116,7 +131,7 @@ const KIND_LABELS: Record<number, string> = {
  31922: 'a calendar event',
  31923: 'a calendar event',
  31990: 'an app',
-  32267: 'an app',
+  32267: 'a Zapstore app',
  34139: 'a playlist',
  34236: 'a divine',
  34550: 'a community',
@@ -141,6 +156,7 @@ const KIND_ICONS: Partial<Record<number, React.ComponentType<{ className?: strin
  21: Film,
  22: Film,
  1063: FileText,
+  1018: Vote,
  1068: BarChart3,
  1222: Mic,
  1617: FileText,
@@ -155,6 +171,7 @@ const KIND_ICONS: Partial<Record<number, React.ComponentType<{ className?: strin
  30030: SmilePlus,
  30054: Podcast,
  30055: Podcast,
+  3063: Package,
  30063: Package,
  30311: Radio,
  30617: GitBranch,
@@ -212,10 +229,11 @@ const KIND_SUFFIXES: Partial<Record<number, string>> = {
  34139: 'playlist',
 };

-/** Postfix that replaces the default pattern (e.g. "Ditto on Zapstore" instead of "Ditto app"). */
+/** Postfix that replaces the default pattern (e.g. "Ditto on Zapstore" instead of "Ditto Zapstore app"). */
 const KIND_POSTFIXES: Partial<Record<number, string>> = {
  32267: 'on Zapstore',
-  30063: 'release',
+  30063: 'Zapstore release',
+  3063: 'Zapstore asset',
 };

 /** Get a display name for an event based on its kind and tags. */
@@ -485,7 +503,7 @@ function ProfileBadgesCommentContext({ root, className }: { root: CommentRoot; c

 /** Comment context for non-profile addressable event roots (A tag). */
 function GenericAddrCommentContext({ root, className }: { root: CommentRoot; className?: string }) {
-  const { data: event, isLoading } = useAddrEvent(root.addr);
+  const { data: event, isLoading } = useAddrEvent(root.addr, root.relayHint ? [root.relayHint] : undefined);

  const isCommunity = root.rootKind === '34550' || root.addr?.kind === 34550;
  const prefix = isCommunity ? 'Posted in' : 'Commenting on';
@@ -523,18 +541,33 @@ function GenericAddrCommentContext({ root, className }: { root: CommentRoot; cla

 /** Comment context for regular event roots (E tag). */
 function EventCommentContext({ root, className }: { root: CommentRoot; className?: string }) {
-  const { data: event, isLoading } = useEvent(root.eventId);
+  const { data: event, isLoading } = useEvent(
+    root.eventId,
+    root.relayHint ? [root.relayHint] : undefined,
+    root.authorHint,
+  );

  // Kind 7 reactions get special treatment
  if (event?.kind === 7) {
    return <ReactionCommentContext event={event} className={className} />;
  }

+  // Kind 1018 poll votes get special treatment
+  if (event?.kind === 1018) {
+    return <PollVoteCommentContext event={event} className={className} />;
+  }
+
  const display = event ? getEventDisplayName(event) : { text: getRootKindLabel(root.rootKind) };
  const link = event ? getRootLink(event) : undefined;

  const hoverContent = root.eventId ? (
-    <EmbeddedNote eventId={root.eventId} className="border-0 rounded-none" disableHoverCards />
+    <EmbeddedNote
+      eventId={root.eventId}
+      relays={root.relayHint ? [root.relayHint] : undefined}
+      authorHint={root.authorHint}
+      className="border-0 rounded-none"
+      disableHoverCards
+    />
  ) : undefined;

  return (
@@ -583,6 +616,43 @@ function ReactionCommentContext({ event, className }: { event: NostrEvent; class
  );
 }

+/** Comment context for kind 1018 poll vote roots — shows "Commenting on @{name}'s vote for {option}". */
+function PollVoteCommentContext({ event, className }: { event: NostrEvent; className?: string }) {
+  const author = useAuthor(event.pubkey);
+  const metadata = author.data?.metadata;
+  const displayName = getDisplayName(metadata, event.pubkey);
+  const voteLink = getRootLink(event);
+  const profileLink = `/${nip19.npubEncode(event.pubkey)}`;
+
+  const voteLabel = usePollVoteLabel(event);
+
+  return (
+    <CommentContextRow prefix="Commenting on" className={className}>
+      {author.isLoading ? (
+        <Skeleton className="h-3.5 w-16 inline-block" />
+      ) : (
+        <ProfileHoverCard pubkey={event.pubkey} asChild>
+          <Link
+            to={profileLink}
+            className="text-primary hover:underline truncate cursor-pointer"
+            onClick={(e) => e.stopPropagation()}
+          >
+            @{displayName}
+          </Link>
+        </ProfileHoverCard>
+      )}
+      <Link
+        to={voteLink}
+        className="inline-flex items-center gap-1 text-primary hover:underline truncate cursor-pointer"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Vote className="size-3.5 shrink-0" />
+        {voteLabel ? `vote for ${voteLabel}` : 'vote'}
+      </Link>
+    </CommentContextRow>
+  );
+}
+
 /** Comment context for external content roots (I tag). */
 function ExternalCommentContext({ root, className }: { root: CommentRoot; className?: string }) {
  const identifier = root.identifier ?? '';
@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
 import { X } from 'lucide-react';
 import { useNostr } from '@nostrify/react';
 import { useQuery } from '@tanstack/react-query';
-import { PortalContainerProvider } from '@/contexts/PortalContainerContext';
+import { PortalContainerProvider } from '@/hooks/usePortalContainer';
 import type { NostrEvent } from '@nostrify/nostrify';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useProfileUrl } from '@/hooks/useProfileUrl';
@@ -26,7 +26,7 @@ function getTag(tags: string[][], name: string): string | undefined {

 // ── data hook ─────────────────────────────────────────────────────────────────

-export function useEventComments(event: NostrEvent | undefined) {
+function useEventComments(event: NostrEvent | undefined) {
  const { nostr } = useNostr();

  const aTag = event
@@ -20,6 +20,7 @@ import { GifPicker } from '@/components/GifPicker';
 import { EmbeddedNote } from '@/components/EmbeddedNote';
 import { EmbeddedNaddr } from '@/components/EmbeddedNaddr';
 import { MentionAutocomplete } from '@/components/MentionAutocomplete';
+import { CustomEmojiImg } from '@/components/CustomEmoji';
 import { EmojiShortcodeAutocomplete } from '@/components/EmojiShortcodeAutocomplete';

 import { NoteContent } from '@/components/NoteContent';
@@ -201,7 +202,6 @@ export function ComposeBox({

  // Poll mode state
  const [mode, setMode] = useState<'post' | 'poll'>(initialMode);
-  const [pollQuestion, setPollQuestion] = useState('');
  const [pollOptions, setPollOptions] = useState([
    { id: pollOptionId(), label: '' },
    { id: pollOptionId(), label: '' },
@@ -233,7 +233,6 @@ export function ComposeBox({
    setTrayOpen(false);
    setInternalPreviewMode(false);
    setMode(initialMode);
-    setPollQuestion('');
    setPollOptions([{ id: pollOptionId(), label: '' }, { id: pollOptionId(), label: '' }]);
    setPollType('singlechoice');
    setPollDuration(7);
@@ -982,7 +981,8 @@ export function ComposeBox({

  const handlePollSubmit = async () => {
    const filledOptions = pollOptions.filter((o) => o.label.trim());
-    if (!pollQuestion.trim() || filledOptions.length < 2 || !user || isPollPending) return;
+    const finalContent = content.trim();
+    if (!finalContent || filledOptions.length < 2 || !user || isPollPending) return;

    const tags: string[][] = [];
    for (const opt of filledOptions) {
@@ -992,10 +992,27 @@ export function ComposeBox({
    if (pollDuration > 0) {
      tags.push(['endsAt', String(Math.floor(Date.now() / 1000) + pollDuration * 86_400)]);
    }
-    tags.push(['alt', `Poll: ${pollQuestion.trim()}`]);
+
+    // NIP-92: Add imeta tags for media URLs in content
+    const mediaUrlMatches = finalContent.matchAll(new RegExp(IMETA_MEDIA_URL_REGEX.source, 'gi'));
+    const processedUrls = new Set<string>();
+    for (const match of mediaUrlMatches) {
+      const url = match[0];
+      if (processedUrls.has(url)) continue;
+      processedUrls.add(url);
+      const fileTags = uploadedFileGroups.get(url);
+      if (fileTags) {
+        tags.push(['imeta', ...fileTags.map(tag => `${tag[0]} ${tag[1]}`)]);
+      } else {
+        const ext = match[1].toLowerCase();
+        tags.push(['imeta', `url ${url}`, `m ${mimeFromExt(ext)}`]);
+      }
+    }
+
+    tags.push(['alt', `Poll: ${finalContent}`]);

    try {
-      await createEvent({ kind: 1068, content: pollQuestion.trim(), tags });
+      await createEvent({ kind: 1068, content: finalContent, tags });
      resetComposeState();
      queryClient.invalidateQueries({ queryKey: ['feed'] });
      toast({ title: 'Poll published!' });
@@ -1006,7 +1023,7 @@ export function ComposeBox({
  };

  const pollFilledCount = pollOptions.filter((o) => o.label.trim()).length;
-  const isPollValid = pollQuestion.trim().length > 0 && pollFilledCount >= 2;
+  const isPollValid = content.trim().length > 0 && pollFilledCount >= 2;

  const isExpanded = forceExpanded || expanded || content.length > 0 || !compact;

@@ -1014,7 +1031,7 @@ export function ComposeBox({
  if (!user && compact) return null;

  return (
-    <div className={cn("px-4 py-3 bg-background/85")}>
+    <div className={cn("px-4 py-3 bg-background/85 rounded-2xl")}>
      {/* Preview toggle at top when not controlled and has previewable content */}
      {hasPreviewableContent && controlledPreviewMode === undefined && (
        <div className="flex items-center justify-end mb-3">
@@ -1062,31 +1079,84 @@ export function ComposeBox({
        )}

        <div className="flex-1 min-w-0">
-          {mode === 'poll' ? (
-          /* ── Inline poll builder ─────────────────────────────── */
-          <div className="pt-2.5 pb-1 space-y-3">
+          {!previewMode ? (
+          /* ── Edit mode — Textarea ────────────────────────────── */
+          <div className="relative">
+            <textarea
+              ref={textareaRef}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              onPointerDown={expand}
+              onFocus={expand}
+              onPaste={handlePaste}
+              placeholder={mode === 'poll' ? 'Ask a question…' : placeholder}
+              className={cn(
+                'w-full bg-transparent text-foreground placeholder:text-muted-foreground resize-none outline-none text-lg pt-2.5 pb-2 opacity-85 break-words overflow-hidden transition-[min-height] duration-200 ease-in-out',
+                isExpanded ? 'min-h-[100px]' : 'min-h-[44px]',
+              )}
+              rows={1}
+              disabled={!user}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                  handleSubmit();
+                }
+              }}
+            />
+            <MentionAutocomplete
+              textareaRef={textareaRef}
+              content={content}
+              onInsertMention={handleInsertMention}
+            />
+            <EmojiShortcodeAutocomplete
+              textareaRef={textareaRef}
+              content={content}
+              onInsertEmoji={handleInsertShortcodeEmoji}
+            />
+          </div>
+        ) : (
+          /* Preview mode - Show how post will look */
+          mockEvent && (() => {
+            const imetaMap = parseImetaMap(mockEvent.tags);
+            const videos = extractVideoUrls(mockEvent.content);
+            const imetaAudios = Array.from(imetaMap.values())
+              .filter((e) => e.mime?.startsWith('audio/'))
+              .map((e) => e.url);
+            const audios = imetaAudios.length > 0 ? imetaAudios : extractAudioUrls(mockEvent.content);
+            const webxdcApps = Array.from(imetaMap.values()).filter(
+              (entry) => entry.mime === 'application/x-webxdc' || entry.mime === 'application/vnd.webxdc+zip',
+            );
+            return (
+              <div className="pt-2.5 pb-2 min-h-[100px]">
+                <div className="text-lg opacity-85">
+                  <NoteContent event={mockEvent} className="text-foreground" />
+                </div>
+                <NoteMedia
+                  videos={videos}
+                  audios={audios}
+                  imetaMap={imetaMap}
+                  webxdcApps={webxdcApps}
+                  event={mockEvent}
+                />
+              </div>
+            );
+          })()
+        )}
+
+        {/* Poll options + settings — shown below the normal textarea/preview */}
+        {mode === 'poll' && (
+          <div className="space-y-3 pt-1">
            {/* Back to post link — hidden when poll mode is the only mode */}
            {initialMode !== 'poll' && (
              <button
                type="button"
                onClick={() => setMode('post')}
-                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors -mt-0.5"
+                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
              >
                <ChevronLeft className="size-3.5" />
                Back to post
              </button>
            )}

-            {/* Question */}
-            <textarea
-              value={pollQuestion}
-              onChange={(e) => setPollQuestion(e.target.value)}
-              placeholder="Ask a question…"
-              rows={2}
-              maxLength={280}
-              className="w-full bg-transparent text-foreground placeholder:text-muted-foreground resize-none outline-none text-lg pb-1 opacity-85 break-words"
-            />
-
            {/* Options */}
            <div className="space-y-1.5">
              {pollOptions.map((opt, idx) => (
@@ -1167,66 +1237,6 @@ export function ComposeBox({
              ))}
            </div>
          </div>
-        ) : !previewMode ? (
-          /* ── Edit mode — Textarea ────────────────────────────── */
-          <div className="relative">
-            <textarea
-              ref={textareaRef}
-              value={content}
-              onChange={(e) => setContent(e.target.value)}
-              onFocus={expand}
-              onPaste={handlePaste}
-              placeholder={placeholder}
-              className={cn(
-                'w-full bg-transparent text-foreground placeholder:text-muted-foreground resize-none outline-none text-lg pt-2.5 pb-2 opacity-85 break-words overflow-hidden transition-[min-height] duration-200 ease-in-out',
-                isExpanded ? 'min-h-[100px]' : 'min-h-[44px]',
-              )}
-              rows={1}
-              disabled={!user}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                  handleSubmit();
-                }
-              }}
-            />
-            <MentionAutocomplete
-              textareaRef={textareaRef}
-              content={content}
-              onInsertMention={handleInsertMention}
-            />
-            <EmojiShortcodeAutocomplete
-              textareaRef={textareaRef}
-              content={content}
-              onInsertEmoji={handleInsertShortcodeEmoji}
-            />
-          </div>
-        ) : (
-          /* Preview mode - Show how post will look */
-          mockEvent && (() => {
-            const imetaMap = parseImetaMap(mockEvent.tags);
-            const videos = extractVideoUrls(mockEvent.content);
-            const imetaAudios = Array.from(imetaMap.values())
-              .filter((e) => e.mime?.startsWith('audio/'))
-              .map((e) => e.url);
-            const audios = imetaAudios.length > 0 ? imetaAudios : extractAudioUrls(mockEvent.content);
-            const webxdcApps = Array.from(imetaMap.values()).filter(
-              (entry) => entry.mime === 'application/x-webxdc' || entry.mime === 'application/vnd.webxdc+zip',
-            );
-            return (
-              <div className="pt-2.5 pb-2 min-h-[100px]">
-                <div className="text-lg opacity-85">
-                  <NoteContent event={mockEvent} className="text-foreground" />
-                </div>
-                <NoteMedia
-                  videos={videos}
-                  audios={audios}
-                  imetaMap={imetaMap}
-                  webxdcApps={webxdcApps}
-                  event={mockEvent}
-                />
-              </div>
-            );
-          })()
        )}

        {/* Content warning input */}
@@ -1258,7 +1268,7 @@ export function ComposeBox({
                identifier: quotedEvent.tags.find(([name]) => name === 'd')?.[1] ?? '',
              }} />
            ) : (
-              <EmbeddedNote eventId={quotedEvent.id} />
+              <EmbeddedNote eventId={quotedEvent.id} authorHint={quotedEvent.pubkey} />
            )}
          </div>
        )}
@@ -1479,11 +1489,11 @@ export function ComposeBox({
                                   }}
                                   className="aspect-square rounded-lg overflow-hidden hover:bg-muted transition-colors p-1 group"
                                 >
-                                   <img
-                                     src={emoji.url}
-                                     alt={emoji.shortcode}
-                                     className="w-full h-full object-contain group-hover:scale-110 transition-transform duration-150"
-                                   />
+                                    <CustomEmojiImg
+                                      name={emoji.shortcode}
+                                      url={emoji.url}
+                                      className="w-full h-full object-contain group-hover:scale-110 transition-transform duration-150"
+                                    />
                                 </button>
                               ))}
                             </div>
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { IntroImage } from '@/components/IntroImage';
 import {
-  Users, Download, Loader2, X, Pencil, Home, Globe,
+  Users, Download, Loader2, X, Pencil, Home, Globe, MapPin,
  Palette, Trash2, Plus, UserX, Hash, MessageSquareOff, ExternalLink, ShieldAlert,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -17,6 +17,7 @@ import { Link } from 'react-router-dom';
 import { nip19 } from 'nostr-tools';
 import { useToast } from '@/hooks/useToast';
 import { useSavedFeeds } from '@/hooks/useSavedFeeds';
+import { useInterests } from '@/hooks/useInterests';
 import { useFeedSettings } from '@/hooks/useFeedSettings';
 import { useEncryptedSettings } from '@/hooks/useEncryptedSettings';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -24,7 +25,7 @@ import { useAppContext } from '@/hooks/useAppContext';
 import { useMuteList, type MuteListItem } from '@/hooks/useMuteList';
 import { useAuthor } from '@/hooks/useAuthor';
 import { FeedEditModal } from '@/components/FeedEditModal';
-import { buildKindOptions } from '@/components/SavedFeedFiltersEditor';
+import { buildKindOptions } from '@/lib/feedFilterUtils';
 import { genUserName } from '@/lib/genUserName';
 import { EXTRA_KINDS, FEED_KINDS, SECTION_ORDER, SECTION_LABELS } from '@/lib/extraKinds';
 import { CONTENT_KIND_ICONS, SIDEBAR_ITEMS } from '@/lib/sidebarItems';
@@ -556,6 +557,183 @@ function FeedTabsSection() {

      {/* Saved Feeds */}
      <SavedFeedsSection />
+
+      {/* Interests (hashtag & geotag tabs) */}
+      <InterestsSection />
+    </div>
+  );
+}
+
+// ─── Interests Section ───────────────────────────────────────────────────────
+
+function InterestsSection() {
+  const { toast } = useToast();
+  const { user } = useCurrentUser();
+  const { hashtags, addInterest: addHashtag, removeInterest: removeHashtag, isLoading: isLoadingHashtags } = useInterests('t');
+  const { hashtags: geotags, addInterest: addGeotag, removeInterest: removeGeotag, isLoading: isLoadingGeotags } = useInterests('g');
+  const [newHashtag, setNewHashtag] = useState('');
+  const [newGeotag, setNewGeotag] = useState('');
+
+  const isLoading = isLoadingHashtags || isLoadingGeotags;
+
+  if (!user) return null;
+
+  const handleRemoveHashtag = async (tag: string) => {
+    await removeHashtag.mutateAsync(tag);
+    toast({ title: `#${tag} removed from feed tabs` });
+  };
+
+  const handleRemoveGeotag = async (tag: string) => {
+    await removeGeotag.mutateAsync(tag);
+    toast({ title: `${tag} removed from feed tabs` });
+  };
+
+  const handleAddHashtag = async () => {
+    const tag = newHashtag.trim().toLowerCase().replace(/^#/, '');
+    if (!tag) return;
+    if (hashtags.includes(tag)) {
+      toast({ title: `#${tag} is already followed`, variant: 'destructive' });
+      return;
+    }
+    await addHashtag.mutateAsync(tag);
+    setNewHashtag('');
+    toast({ title: `#${tag} added to feed tabs` });
+  };
+
+  const handleAddGeotag = async () => {
+    const tag = newGeotag.trim().toLowerCase();
+    if (!tag) return;
+    if (geotags.includes(tag)) {
+      toast({ title: `${tag} is already followed`, variant: 'destructive' });
+      return;
+    }
+    await addGeotag.mutateAsync(tag);
+    setNewGeotag('');
+    toast({ title: `${tag} added to feed tabs` });
+  };
+
+  return (
+    <div className="px-3 py-4 space-y-4 border-t border-border">
+      <div>
+        <h3 className="text-sm font-semibold">Interest Tabs</h3>
+        <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
+          Hashtags and locations you follow appear as tabs on the home feed.
+        </p>
+      </div>
+
+      {/* Hashtags */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Hash className="size-4 text-muted-foreground shrink-0" />
+          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Hashtags</span>
+        </div>
+
+        <div className="flex gap-2">
+          <Input
+            placeholder="ditto"
+            value={newHashtag}
+            onChange={(e) => setNewHashtag(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') handleAddHashtag(); }}
+            className="h-9"
+            disabled={addHashtag.isPending}
+          />
+          <Button
+            onClick={handleAddHashtag}
+            disabled={addHashtag.isPending || !newHashtag.trim()}
+            size="sm"
+            className="h-9"
+          >
+            {addHashtag.isPending ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
+          </Button>
+        </div>
+
+        {isLoading ? (
+          <div className="space-y-2">
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ) : hashtags.length === 0 ? (
+          <p className="text-xs text-muted-foreground">No followed hashtags yet.</p>
+        ) : (
+          <div className="space-y-1.5">
+            {hashtags.map((tag) => (
+              <div
+                key={`hashtag:${tag}`}
+                className="rounded-lg border border-border/50 bg-secondary/30"
+              >
+                <div className="flex items-center gap-2 py-2 px-2.5">
+                  <Hash className="size-4 text-muted-foreground shrink-0" />
+                  <span className="text-sm font-medium flex-1 min-w-0 truncate">{tag}</span>
+                  <button
+                    onClick={() => handleRemoveHashtag(tag)}
+                    disabled={removeHashtag.isPending}
+                    className="size-7 flex items-center justify-center rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 disabled:opacity-40 transition-colors"
+                    aria-label={`Remove #${tag}`}
+                  >
+                    <X className="size-3.5" strokeWidth={4} />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Geotags */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <MapPin className="size-4 text-muted-foreground shrink-0" />
+          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Locations</span>
+        </div>
+
+        <div className="flex gap-2">
+          <Input
+            placeholder="geohash (e.g. u4pru)"
+            value={newGeotag}
+            onChange={(e) => setNewGeotag(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') handleAddGeotag(); }}
+            className="h-9"
+            disabled={addGeotag.isPending}
+          />
+          <Button
+            onClick={handleAddGeotag}
+            disabled={addGeotag.isPending || !newGeotag.trim()}
+            size="sm"
+            className="h-9"
+          >
+            {addGeotag.isPending ? <Loader2 className="size-4 animate-spin" /> : <Plus className="size-4" />}
+          </Button>
+        </div>
+
+        {isLoading ? (
+          <div className="space-y-2">
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ) : geotags.length === 0 ? (
+          <p className="text-xs text-muted-foreground">No followed locations yet.</p>
+        ) : (
+          <div className="space-y-1.5">
+            {geotags.map((tag) => (
+              <div
+                key={`geotag:${tag}`}
+                className="rounded-lg border border-border/50 bg-secondary/30"
+              >
+                <div className="flex items-center gap-2 py-2 px-2.5">
+                  <MapPin className="size-4 text-muted-foreground shrink-0" />
+                  <span className="text-sm font-medium flex-1 min-w-0 truncate">{tag}</span>
+                  <button
+                    onClick={() => handleRemoveGeotag(tag)}
+                    disabled={removeGeotag.isPending}
+                    className="size-7 flex items-center justify-center rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 disabled:opacity-40 transition-colors"
+                    aria-label={`Remove ${tag}`}
+                  >
+                    <X className="size-3.5" strokeWidth={4} />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
    </div>
  );
 }
@@ -1,8 +1,11 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useCallback, useState } from 'react';

 import { isCustomEmoji, getCustomEmojiUrl, buildEmojiMap, type ResolvedEmoji } from '@/lib/customEmoji';
 import { cn } from '@/lib/utils';

+/** Threshold at or below which we apply nearest-neighbor scaling. */
+const PIXEL_ART_MAX = 16;
+
 interface CustomEmojiImgProps {
  /** The shortcode name (without colons). */
  name: string;
@@ -14,16 +17,30 @@ interface CustomEmojiImgProps {

 /**
 * Renders a single custom emoji as an inline image.
+ *
+ * If the image's natural dimensions are 16x16 or smaller, nearest-neighbor
+ * (`image-rendering: pixelated`) scaling is applied to preserve crisp pixels.
 */
 export function CustomEmojiImg({ name, url, className = 'inline h-[1.2em] w-[1.2em] object-contain align-text-bottom' }: CustomEmojiImgProps) {
+  const [pixelated, setPixelated] = useState(false);
+
+  const handleLoad = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget;
+    if (img.naturalWidth > 0 && img.naturalWidth <= PIXEL_ART_MAX && img.naturalHeight <= PIXEL_ART_MAX) {
+      setPixelated(true);
+    }
+  }, []);
+
  return (
    <img
      src={url}
      alt={`:${name}:`}
      title={`:${name}:`}
      className={className}
+      style={pixelated ? { imageRendering: 'pixelated' } : undefined}
      loading="lazy"
      decoding="async"
+      onLoad={handleLoad}
    />
  );
 }
@@ -9,9 +9,9 @@ import { getAvatarShape } from '@/lib/avatarShape';
 import { Skeleton } from '@/components/ui/skeleton';
 import { EmojifiedText } from '@/components/CustomEmoji';
 import { ProfileHoverCard } from '@/components/ProfileHoverCard';
-import { parseBadgeDefinition, type BadgeData } from '@/components/BadgeContent';
+import { parseBadgeDefinition, type BadgeData } from '@/lib/parseBadgeDefinition';
 import { BadgeThumbnail } from '@/components/BadgeThumbnail';
-import { parseProfileBadges } from '@/components/ProfileBadgesContent';
+import { parseProfileBadges } from '@/lib/parseProfileBadges';
 import { useAddrEvent, type AddrCoords } from '@/hooks/useEvent';
 import { useAuthor } from '@/hooks/useAuthor';
 import { genUserName } from '@/lib/genUserName';
@@ -8,6 +8,7 @@ import { Button } from '@/components/ui/button';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
 import { useToast } from '@/hooks/useToast';
+import { CustomEmojiImg } from '@/components/CustomEmoji';
 import { cn } from '@/lib/utils';

 const EmojiPackDialog = lazy(() => import('@/components/EmojiPackDialog').then(m => ({ default: m.EmojiPackDialog })));
@@ -25,7 +26,7 @@ export interface EmojiPackData {
 }

 /** Parse a kind 30030 emoji pack event into structured data. */
-export function parseEmojiPack(event: NostrEvent): EmojiPackData | null {
+function parseEmojiPack(event: NostrEvent): EmojiPackData | null {
  if (event.kind !== 30030) return null;

  const identifier = event.tags.find(([n]) => n === 'd')?.[1];
@@ -172,12 +173,10 @@ export function EmojiPackContent({ event }: EmojiPackContentProps) {
                className="group relative"
                title={`:${emoji.shortcode}:`}
              >
-                <img
-                  src={emoji.url}
-                  alt={`:${emoji.shortcode}:`}
+                <CustomEmojiImg
+                  name={emoji.shortcode}
+                  url={emoji.url}
                  className="size-8 object-contain rounded transition-transform group-hover:scale-125"
-                  loading="lazy"
-                  decoding="async"
                />
              </div>
            ))}
@@ -16,6 +16,7 @@ import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { CustomEmojiImg } from '@/components/CustomEmoji';
 import { SortableList, SortableItem } from '@/components/SortableList';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
@@ -331,14 +332,15 @@ export function EmojiPackDialog({ open, onOpenChange, editEvent }: EmojiPackDial

      // For edit mode, fetch fresh event to preserve any tags we don't manage
      let preservedTags: string[][] = [];
+      let prev: NostrEvent | null = null;
      if (isEditMode) {
-        const fresh = await fetchFreshEvent(nostr, {
+        prev = await fetchFreshEvent(nostr, {
          kinds: [30030],
          authors: [user.pubkey],
          '#d': [resolvedId],
        });
-        if (fresh) {
-          preservedTags = fresh.tags.filter(
+        if (prev) {
+          preservedTags = prev.tags.filter(
            ([n]) => n !== 'd' && n !== 'name' && n !== 'about' && n !== 'emoji',
          );
        }
@@ -356,7 +358,8 @@ export function EmojiPackDialog({ open, onOpenChange, editEvent }: EmojiPackDial
        kind: 30030,
        content: '',
        tags,
-      } as Omit<NostrEvent, 'id' | 'pubkey' | 'sig'>);
+        prev: prev ?? undefined,
+      });

      // Clean up blob URLs
      for (const e of emojis) {
@@ -506,11 +509,10 @@ export function EmojiPackDialog({ open, onOpenChange, editEvent }: EmojiPackDial
                      >
                        <div className="flex items-center gap-2 pr-2 py-1.5">
                          <div className="size-8 shrink-0 rounded-md overflow-hidden bg-secondary/30 flex items-center justify-center">
-                            <img
-                              src={emoji.url}
-                              alt={emoji.shortcode}
+                            <CustomEmojiImg
+                              name={emoji.shortcode}
+                              url={emoji.url}
                              className="size-8 object-contain"
-                              loading="lazy"
                            />
                          </div>
                          <div className="flex-1 min-w-0">
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import data from '@emoji-mart/data';
+import { CustomEmojiImg } from '@/components/CustomEmoji';
 import { cn } from '@/lib/utils';
 import { useCustomEmojis, type CustomEmoji } from '@/hooks/useCustomEmojis';

@@ -375,11 +376,10 @@ export function EmojiShortcodeAutocomplete({
            onMouseDown={(e) => e.preventDefault()}
          >
            {emoji.customUrl ? (
-              <img
-                src={emoji.customUrl}
-                alt={`:${emoji.name}:`}
+              <CustomEmojiImg
+                name={emoji.name}
+                url={emoji.customUrl}
                className="size-5 object-contain shrink-0"
-                loading="lazy"
              />
            ) : (
              <span className="text-xl leading-none shrink-0">{emoji.native}</span>
@@ -1083,8 +1083,9 @@ function hasVideo(tags: string[][]): boolean {
 /** Fallback labels for well-known kinds not in EXTRA_KINDS. */
 const WELL_KNOWN_KIND_LABELS: Record<number, string> = {
  31990: 'App',
-  32267: 'App',
-  30063: 'Release',
+  32267: 'Zapstore App',
+  30063: 'Zapstore Release',
+  3063: 'Zapstore Asset',
  15128: 'Nsite',
  35128: 'Nsite',
  31124: 'Blobbi',
@@ -1110,7 +1111,7 @@ export function AddressableEventPreview({ addr }: { addr: { kind: number; pubkey
  const KindIcon = useMemo(() => {
    if (kindDef?.id) return CONTENT_KIND_ICONS[kindDef.id] ?? FileText;
    // Fallback icons for well-known kinds not in EXTRA_KINDS
-    if (addr.kind === 31990 || addr.kind === 32267 || addr.kind === 30063) return Package;
+    if (addr.kind === 31990 || addr.kind === 32267 || addr.kind === 30063 || addr.kind === 3063) return Package;
    if (addr.kind === 15128 || addr.kind === 35128) return Globe;
    return FileText;
  }, [kindDef, addr.kind]);
@@ -47,6 +47,7 @@ const LANDING_KINDS = [
  30009, // Badge Definitions
  10008, // Profile Badges
  30008, // Profile Badges (legacy)
+  31124, // Blobbi
 ];

 /** Webxdc needs a MIME-type tag filter, so it gets its own filter object. */
@@ -18,14 +18,13 @@ import {
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
+import { buildKindOptions, parseSelectedKinds } from '@/lib/feedFilterUtils';
 import {
-  buildKindOptions,
  MultiKindPicker,
  AuthorChip,
  AuthorFilterDropdown,
  ScopeToggle,
  ListPackPicker,
-  parseSelectedKinds,
 } from '@/components/SavedFeedFiltersEditor';
 import type { ScopeOption } from '@/components/SavedFeedFiltersEditor';
 import { useUserLists, useMatchedListId } from '@/hooks/useUserLists';
@@ -0,0 +1,219 @@
+import { useEffect, useState } from 'react';
+import { nip19 } from 'nostr-tools';
+import QRCode from 'qrcode';
+import { Copy, Check } from 'lucide-react';
+
+import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import { getAvatarShape } from '@/lib/avatarShape';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { useCurrentUser } from '@/hooks/useCurrentUser';
+import { useAuthor } from '@/hooks/useAuthor';
+import { genUserName } from '@/lib/genUserName';
+import { parseHsl, hslToRgb, rgbToHex, getContrastRatio, isDarkTheme } from '@/lib/colorUtils';
+
+/** Minimum contrast ratio between QR modules and background for reliable scanning. */
+const MIN_QR_CONTRAST = 3;
+
+/** Saturation threshold (%) above which a color is considered "colorful". */
+const COLORFUL_SAT_MIN = 15;
+/** Lightness range within which a color appears visually colorful. */
+const COLORFUL_L_MIN = 20;
+const COLORFUL_L_MAX = 80;
+
+/** Read a CSS custom property as a parsed HSL object, or null if unavailable. */
+function readCssHsl(prop: string): { h: number; s: number; l: number } | null {
+  if (typeof document === 'undefined') return null;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
+  if (!raw) return null;
+  const { h, s, l } = parseHsl(raw);
+  if ([h, s, l].some(isNaN)) return null;
+  return { h, s, l };
+}
+
+/**
+ * Darken an HSL color until it reaches the minimum contrast against a reference RGB.
+ * Returns the adjusted hex color.
+ */
+function darkenToContrast(
+  hsl: { h: number; s: number; l: number },
+  refRgb: [number, number, number],
+): string {
+  let l = hsl.l;
+  let rgb = hslToRgb(hsl.h, hsl.s, l);
+  let ratio = getContrastRatio(rgb, refRgb);
+  while (l > 0 && ratio < MIN_QR_CONTRAST) {
+    l = Math.max(0, l - 2);
+    rgb = hslToRgb(hsl.h, hsl.s, l);
+    ratio = getContrastRatio(rgb, refRgb);
+  }
+  return rgbToHex(...rgb);
+}
+
+/**
+ * Lighten an HSL color until it reaches the minimum contrast against a reference RGB.
+ * Returns the adjusted hex color.
+ */
+function lightenToContrast(
+  hsl: { h: number; s: number; l: number },
+  refRgb: [number, number, number],
+): string {
+  let l = hsl.l;
+  let rgb = hslToRgb(hsl.h, hsl.s, l);
+  let ratio = getContrastRatio(rgb, refRgb);
+  while (l < 100 && ratio < MIN_QR_CONTRAST) {
+    l = Math.min(100, l + 2);
+    rgb = hslToRgb(hsl.h, hsl.s, l);
+    ratio = getContrastRatio(rgb, refRgb);
+  }
+  return rgbToHex(...rgb);
+}
+
+/**
+ * Choose the best module color from primary and foreground.
+ *
+ * Strongly prefers primary since it carries the theme's brand identity.
+ * Only picks foreground if it is colorful (saturation > threshold) AND
+ * has significantly better contrast (> 1.5x) against the QR background.
+ */
+function pickModuleColor(
+  primary: { h: number; s: number; l: number },
+  foreground: { h: number; s: number; l: number } | null,
+  bgRgb: [number, number, number],
+): { h: number; s: number; l: number } {
+  const fgIsColorful = foreground
+    && foreground.s >= COLORFUL_SAT_MIN
+    && foreground.l >= COLORFUL_L_MIN
+    && foreground.l <= COLORFUL_L_MAX;
+
+  if (!fgIsColorful) return primary;
+
+  const primaryRgb = hslToRgb(primary.h, primary.s, primary.l);
+  const fgRgb = hslToRgb(foreground.h, foreground.s, foreground.l);
+  const primaryContrast = getContrastRatio(primaryRgb, bgRgb);
+  const fgContrast = getContrastRatio(fgRgb, bgRgb);
+
+  // Foreground must be significantly better to override primary
+  return fgContrast > primaryContrast * 1.5 ? foreground : primary;
+}
+
+/**
+ * Derive QR module and background hex colors from the active theme.
+ *
+ * Light themes: white background, best themed color as modules (darkened if needed).
+ * Dark themes: --background as QR background, best themed color as modules (lightened if needed).
+ *
+ * "Best themed color" is --primary by default. If --foreground is colorful
+ * (saturation > 15%) and offers better contrast, it wins instead.
+ */
+function getThemedQRColors(): { dark: string; light: string } {
+  const primary = readCssHsl('--primary');
+  const foreground = readCssHsl('--foreground');
+  const background = readCssHsl('--background');
+
+  if (!primary) return { dark: '#000000', light: '#ffffff' };
+
+  const isDark = background ? isDarkTheme(`${background.h} ${background.s}% ${background.l}%`) : false;
+
+  if (!isDark) {
+    const white: [number, number, number] = [255, 255, 255];
+    const module = pickModuleColor(primary, foreground, white);
+    return { dark: darkenToContrast(module, white), light: '#ffffff' };
+  }
+
+  if (!background) return { dark: '#ffffff', light: '#000000' };
+  const bgRgb = hslToRgb(background.h, background.s, background.l);
+  const module = pickModuleColor(primary, foreground, bgRgb);
+  return {
+    dark: lightenToContrast(module, bgRgb),
+    light: rgbToHex(...bgRgb),
+  };
+}
+
+interface FollowQRDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function FollowQRDialog({ open, onOpenChange }: FollowQRDialogProps) {
+  const { user } = useCurrentUser();
+  const author = useAuthor(user?.pubkey ?? '');
+  const [qrDataUrl, setQrDataUrl] = useState<string>('');
+  const [copied, setCopied] = useState(false);
+
+  const metadata = author.data?.metadata;
+  const displayName = user ? metadata?.name || genUserName(user.pubkey) : '';
+
+  const npub = user ? nip19.npubEncode(user.pubkey) : '';
+  const followUrl = npub ? `${window.location.origin}/follow/${npub}` : '';
+
+  useEffect(() => {
+    if (!followUrl || !open) return;
+
+    const { dark, light } = getThemedQRColors();
+
+    QRCode.toDataURL(followUrl, {
+      width: 400,
+      margin: 2,
+      color: { dark, light },
+      errorCorrectionLevel: 'M',
+    })
+      .then(setQrDataUrl)
+      .catch(console.error);
+  }, [followUrl, open]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(followUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // ignore
+    }
+  };
+
+  if (!user) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-sm p-6 flex flex-col items-center gap-5 rounded-2xl">
+        <DialogTitle className="sr-only">Share follow link</DialogTitle>
+
+        {/* Avatar + name */}
+        <div className="flex flex-col items-center gap-2">
+          <Avatar shape={getAvatarShape(metadata)} className="size-16 ring-2 ring-secondary">
+            <AvatarImage src={metadata?.picture} alt={displayName} />
+            <AvatarFallback className="text-xl font-semibold">
+              {displayName.charAt(0).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <p className="text-sm text-muted-foreground text-center">
+            Scan to follow <span className="text-foreground font-medium">{displayName}</span>
+          </p>
+        </div>
+
+        {/* QR code */}
+        {qrDataUrl ? (
+          <img
+            src={qrDataUrl}
+            alt="Follow QR code"
+            className="w-full rounded-xl border border-border"
+            style={{ imageRendering: 'pixelated' }}
+          />
+        ) : (
+          <div className="w-full aspect-square rounded-xl border border-border bg-muted animate-pulse" />
+        )}
+
+        {/* Copy link */}
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {copied
+            ? <Check className="size-3.5 text-primary flex-shrink-0" />
+            : <Copy className="size-3.5 flex-shrink-0" />}
+          <span className="truncate max-w-64">{followUrl}</span>
+        </button>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -17,7 +17,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { BadgeThumbnail } from '@/components/BadgeThumbnail';
-import { parseBadgeDefinition } from '@/components/BadgeContent';
+import { parseBadgeDefinition } from '@/lib/parseBadgeDefinition';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useAwardBadge } from '@/hooks/useAwardBadge';
 import { useToast } from '@/hooks/useToast';
@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { ChevronLeft, ChevronRight, X, Download } from 'lucide-react';
 import { Blurhash } from 'react-blurhash';
 import { cn } from '@/lib/utils';
@@ -125,7 +126,7 @@ export function ImageGallery({
        ))}
      </div>

-      {/* Lightbox */}
+      {/* Lightbox (portals to document.body internally to escape stacking contexts) */}
      {lightboxIndex !== null && lightboxIndex !== undefined && (
        <Lightbox
          images={images}
@@ -484,7 +485,7 @@ export function Lightbox({ images, currentIndex, onClose, onNext, onPrev, mediaT
    (i) => i >= 0 && i < images.length,
  );

-  return (
+  return createPortal(
    <div
      ref={containerRef}
      className="fixed inset-0 z-[100] animate-in fade-in duration-200"
@@ -582,7 +583,8 @@ export function Lightbox({ images, currentIndex, onClose, onNext, onPrev, mediaT
          {bottomBar}
        </div>
      )}
-    </div>
+    </div>,
+    document.body,
  );
 }

@@ -35,7 +35,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { useAppContext } from "@/hooks/useAppContext";
 import { useAuthors } from "@/hooks/useAuthors";
 import { useCurrentUser } from "@/hooks/useCurrentUser";
-import { useEncryptedSettings } from "@/hooks/useEncryptedSettings";
+import { useEncryptedSettings, getLocalSettingsSync } from "@/hooks/useEncryptedSettings";
 import { type SyncPhase, useInitialSync } from "@/hooks/useInitialSync";
 import { useLoginActions } from "@/hooks/useLoginActions";
 import { useNostrPublish } from "@/hooks/useNostrPublish";
@@ -65,8 +65,12 @@ interface InitialSyncGateProps {
 export function InitialSyncGate({ children }: InitialSyncGateProps) {
  const { user } = useCurrentUser();
  const { phase, markComplete } = useInitialSync();
+  const { isLoading: settingsLoading } = useEncryptedSettings();
  const [preloadApp, setPreloadApp] = useState(false);
  const [signupActive, setSignupActive] = useState(false);
+  // Track whether we've shown the app at least once so we don't re-gate on
+  // subsequent background refetches (e.g. window focus).
+  const hasShownApp = useRef(false);

  const startSignup = useCallback(() => setSignupActive(true), []);

@@ -91,8 +95,10 @@ export function InitialSyncGate({ children }: InitialSyncGateProps) {
    );
  }

-  // Don't show sync/onboarding when logged out — just show the app
+  // Don't show sync/onboarding when logged out — just show the app.
+  // Reset hasShownApp so that re-login shows the spinner until settings load.
  if (!user) {
+    hasShownApp.current = false;
    return (
      <OnboardingContext.Provider value={contextValue}>
        {children}
@@ -121,6 +127,28 @@ export function InitialSyncGate({ children }: InitialSyncGateProps) {
    );
  }

+  // For returning users (phase === "complete"), decide whether to gate:
+  // - If we have a local lastSync timestamp, localStorage is trustworthy and
+  //   we can render immediately. NostrSync will hot-swap any differences in
+  //   the background once the remote settings arrive.
+  // - If there's NO local timestamp (e.g. localStorage was cleared, or settings
+  //   were never synced on this browser), show the spinner until settings load
+  //   so the user sees correct state from the start.
+  // Only gate on the very first load — once the app has been shown, don't
+  // re-gate on background refetches (e.g. window focus).
+  if (phase === "complete" && settingsLoading && !hasShownApp.current) {
+    const hasLocalSync = user ? getLocalSettingsSync(user.pubkey) > 0 : false;
+    if (!hasLocalSync) {
+      return (
+        <OnboardingContext.Provider value={contextValue}>
+          <SyncScreen phase="syncing" />
+        </OnboardingContext.Provider>
+      );
+    }
+  }
+
+  hasShownApp.current = true;
+
  // idle or complete -> show app
  return (
    <OnboardingContext.Provider value={contextValue}>
@@ -643,7 +671,7 @@ function ProfileStep({
        );
        if (validFields.length > 0)
          data.fields = validFields.map((f) => [f.label, f.value]);
-        await publishEvent({ kind: 0, content: JSON.stringify(data) });
+        await publishEvent({ kind: 0, content: JSON.stringify(data), tags: [] });
        queryClient.invalidateQueries({ queryKey: ["logins"] });
        queryClient.invalidateQueries({ queryKey: ["author", user.pubkey] });
      } catch {
@@ -921,15 +949,15 @@ function FollowsStep({
          })
          .catch((): NostrEvent[] => []);

-        const latestEvent =
+        const prev =
          followEvents.length > 0
            ? followEvents.reduce((latest, current) =>
                current.created_at > latest.created_at ? current : latest,
              )
            : null;

-        const existingFollows = latestEvent
-          ? latestEvent.tags
+        const existingFollows = prev
+          ? prev.tags
              .filter(([name]) => name === "p")
              .map(([, pk]) => pk)
          : [];
@@ -938,8 +966,9 @@ function FollowsStep({

        await publishEvent({
          kind: 3,
-          content: latestEvent?.content ?? "",
+          content: prev?.content ?? "",
          tags: allFollows.map((pk) => ["p", pk]),
+          prev: prev ?? undefined,
        });

        setFollowedPacks((prev) => new Set([...prev, packId]));
--- a/Show More
+++ b/Show More