diff --git a/.github/checks-manifest.yaml b/.github/checks-manifest.yaml
index c4f77b1d2e9..80771f5e0db 100644
--- a/.github/checks-manifest.yaml
+++ b/.github/checks-manifest.yaml
@@ -361,7 +361,7 @@ checks:
     reason: "public-build contract and GitHub variable scope fixtures must remain executable"
   - id: web-app-checks
     command: ["bash", "web/app/test.sh"]
-    triggers: ["web/app/src/**", "web/app/package.json", "web/app/bun.lock", "web/app/tsconfig.json", "web/app/vitest.config.mts", "web/app/vitest.setup.ts", "web/app/scripts/moonshine-smoke.test.ts", "web/app/test.sh", ".github/checks-manifest.yaml"]
+    triggers: ["web/app/src/**", "web/app/package.json", "web/app/bun.lock", "web/app/tsconfig.json", "web/app/vitest.config.mts", "web/app/vitest.setup.ts", "web/app/tailwind.config.ts", "web/app/scripts/moonshine-smoke.test.ts", "web/app/scripts/check-feature-imports.ts", "web/app/scripts/check-feature-imports.test.ts", "web/app/test.sh", "web/app/ARCHITECTURE.md", "web/app/AGENTS.md", ".github/checks-manifest.yaml"]
     lanes: ["local", "ci"]
     reason: "web/app shipped with no typecheck or test lane at all, so desktop-parity work there had no runnable Definition-of-Done gate"
   - id: admin-deploy-scope
diff --git a/backend/tests/unit/test_byok_security.py b/backend/tests/unit/test_byok_security.py
index a72f4eb1236..42f05e43f5f 100644
--- a/backend/tests/unit/test_byok_security.py
+++ b/backend/tests/unit/test_byok_security.py
@@ -843,7 +843,6 @@ def test_requires_validated_context(self, monkeypatch):
         monkeypatch.setattr(subscription, 'get_byok_keys', lambda: {'openai': 'sk'})
         assert subscription.request_has_llm_byok_key() is False
 
-
     def test_quota_snapshot_accepts_required_llm_provider(self, monkeypatch):
         from models.users import PlanType
         from utils import subscription
diff --git a/backend/utils/subscription.py b/backend/utils/subscription.py
index 6294a20cb9e..8d71d4baa53 100644
--- a/backend/utils/subscription.py
+++ b/backend/utils/subscription.py
@@ -221,10 +221,7 @@ def request_has_llm_byok_key() -> bool:
     try:
         fingerprints = get_cached_byok_state(uid).get('fingerprints', {})
     except Exception:
-        return any(
-            get_byok_key(provider)
-            for provider in ('openrouter', 'openai', 'anthropic', 'gemini')
-        )
+        return any(get_byok_key(provider) for provider in ('openrouter', 'openai', 'anthropic', 'gemini'))
     return any(
         provider in fingerprints and bool(get_byok_key(provider))
         for provider in ('openrouter', 'openai', 'anthropic', 'gemini')
diff --git a/docs/agents/web-app-destinations.md b/docs/agents/web-app-destinations.md
index 9f3b2e3463c..615554a8e2c 100644
--- a/docs/agents/web-app-destinations.md
+++ b/docs/agents/web-app-destinations.md
@@ -7,7 +7,7 @@ page, moving a surface between pages, or debugging an animation that looks stuck
 
 | Route | Holds |
 |---|---|
-| `/home` | The hub **and** the chat. Chat is not a separate page: `web/app/src/components/home/HomePage.tsx` keeps recent history above the hub and the current exchange below it, with transcript rendering owned by `web/app/src/components/chat/ChatTranscript.tsx`. Live capture also starts here, from the composer. |
+| `/home` | The hub **and** the chat. Chat is not a separate page: `web/app/src/features/home/ui/HomePage.tsx` keeps recent history above the hub and the current exchange below it, with transcript rendering owned by `web/app/src/features/chat/ui/ChatTranscript.tsx`. Live capture also starts here, from the composer. |
 | `/conversations` | Conversations and daily recaps in one day-grouped gallery. A recap is the summary of a day, so it leads that day rather than living in a list of its own. |
 | `/memories`, `/tasks` | As named. |
 | `/connectors` | Installed apps **and** external services — the former Settings → Integrations. |
@@ -30,7 +30,7 @@ because they share this component, not because someone kept them in sync.
 `PageHeader` is the different thing it looks like: a back button beside a title,
 for detail and sub pages.
 
-shadcn/ui is set up (`web/app/components.json`, primitives in `web/app/src/components/ui/`
+shadcn/ui is set up (`web/app/components.json`, primitives in `web/app/src/shared/ui/`
 lowercase). Its generator emits literal `oklch(...)` strings, which are not
 valid classes in this project, so every primitive is restyled onto the Omi
 tokens on the way in. Do that for any primitive you add.
diff --git a/docs/agents/web-app-signals.md b/docs/agents/web-app-signals.md
index 6368dddb83e..b41b5f86418 100644
--- a/docs/agents/web-app-signals.md
+++ b/docs/agents/web-app-signals.md
@@ -9,7 +9,7 @@ so the next person does not reintroduce the pattern it replaced.
 | Need | Use |
 |---|---|
 | Read something from the API | `useAsyncResource(key, fetcher)` (`web/app/src/hooks/useAsyncResource.ts`) |
-| A list that is also written optimistically | A signal store — see `createGoalsStore` in `web/app/src/hooks/useGoals.ts` |
+| A list that is also written optimistically | A signal store — see `createGoalsStore` in `web/app/src/features/goals/useGoals.ts`. Same pattern: conversations, recaps, memories, chat, search, notifications, knowledge graph, Gemini Live, goal advice |
 | Subscribe a component to a raw signal | `useSignalValue` / `useResourceValue` (`web/app/src/lib/signals.ts`) |
 
 `useAsyncResource` is keyed: change the key and it refetches, pass `null` and it
diff --git a/docs/product/invariants/memory-tiers.md b/docs/product/invariants/memory-tiers.md
index 140d459fe00..52db9bb039e 100644
--- a/docs/product/invariants/memory-tiers.md
+++ b/docs/product/invariants/memory-tiers.md
@@ -46,8 +46,8 @@ default access policy of Short-term + Long-term.
 - `desktop/macos/Desktop/Sources/MemoryBankConnector.swift`
 - `desktop/macos/Desktop/Sources/Rewind/Core/MemoryStorage.swift`
 - `desktop/macos/Desktop/Sources/Rewind/Core/MemoryModels.swift`
-- `web/app/src/components/memories/**`
-- `web/app/src/lib/memoryExport.ts`
+- `web/app/src/features/memories/**`
+- `web/app/src/features/memories/memoryExport.ts`
 - `web/frontend/src/components/memories/**`
 
 ## PR rule
diff --git a/web/app/AGENTS.md b/web/app/AGENTS.md
index b4bc67b4ef2..9f0fae87528 100644
--- a/web/app/AGENTS.md
+++ b/web/app/AGENTS.md
@@ -3,6 +3,15 @@
 The signed-in Omi web client: React 19 on the `@tschk/moonshine` runtime, served
 by Bun. Siblings: `web/admin`, `web/frontend`, `web/personas-open-source`.
 
+Code layout: domain modules under `src/features/<name>/{api,model,ui}` plus
+`src/shared` (HTTP kernel and UI primitives). Map and import rules:
+[`ARCHITECTURE.md`](./ARCHITECTURE.md). Guard: `bun run check:imports`.
+Outside a feature import only its `index.ts`, `api.ts`, or `model.ts`.
+
+Current domains: `auth`, `chat`, `connectors`, `conversations` (includes recaps),
+`fair-use`, `goals`, `home`, `marketplace`, `memories` (**INV-MEM-1**),
+`notifications`, `recording`, `settings`, `tasks`.
+
 ## Setup
 
 ```bash
@@ -44,7 +53,7 @@ reads, a signal store for optimistically-written lists. Import only the kernel 
 why and the pitfalls: [`docs/agents/web-app-signals.md`](../../docs/agents/web-app-signals.md).
 
 Tests live in `__tests__/` beside the code (`vitest.config.mts`, jsdom, `@` →
-`src/`). Prefer pure logic in `src/lib/` and `src/hooks/`; reserve component
+`src/`). Prefer pure logic in `src/features/<domain>/model.ts`; reserve component
 rendering for behavior that only appears in the tree.
 
 ## Parity With Desktop
diff --git a/web/app/ARCHITECTURE.md b/web/app/ARCHITECTURE.md
new file mode 100644
index 00000000000..69108dedc5b
--- /dev/null
+++ b/web/app/ARCHITECTURE.md
@@ -0,0 +1,39 @@
+# web/app architecture
+
+Signed-in Omi web client: React 19 on `@tschk/moonshine`. Destinations live in
+`src/app`; product code lives in `src/features/<domain>` and shared kernel in
+`src/shared`.
+
+## Layers (inside a feature)
+
+| Path | Holds | Must not |
+|---|---|---|
+| `model.ts` (and other pure helpers) | grouping, ids, parsing | React, `fetch`, `./api` |
+| `api.ts` | HTTP for this domain | UI |
+| `ui/` | components | ad-hoc `fetch`; thick helpers |
+| hooks (`useX.ts`) | current React state / orchestration | a second data-layer |
+
+Cross-feature and `src/app` imports use the feature's public `index.ts` only.
+`src/shared` does not import `src/features`. Enforced by
+`scripts/check-feature-imports.ts` (part of `bun run check`).
+
+## Kernel vs features
+
+- `src/shared/api/client.ts` — `fetchWithAuth` and authorized blob/audio headers
+- `src/shared/ui` — Toast, dialogs, input, maps, startup modals (no feature imports)
+- `src/lib` — firebase, cache, utils, generated OpenAPI types (not yet moved)
+- `src/components/layout` — shell chrome (may import features)
+- Tailwind `content` is `src/**` so feature class names reach `styles.css`
+- `src/hooks/useAsyncResource.ts`, `useLocalStorage`, `useRequestOwner`,
+  `useScrollEdges` — generic hooks, not a domain
+
+Writable moonshine stores hold lists and session state written from the UI
+(goals, tasks, people, conversations, recaps, memories, chat, search,
+notifications, knowledge graph, Gemini Live, goal advice). Read-only fetches
+use `useAsyncResource` (`useHomeTasks`, `useGoalDetail` history).
+
+## Features (grow as domains move)
+
+See `src/features/*/ARCHITECTURE.md` once a folder exceeds twelve source files.
+The destination map is unchanged: `/home` is hub+chat, `/conversations` includes
+recaps, `/connectors` is apps+services.
diff --git a/web/app/bun.lock b/web/app/bun.lock
index 0bc1aee3ba9..e61891b5f60 100644
--- a/web/app/bun.lock
+++ b/web/app/bun.lock
@@ -5,14 +5,7 @@
     "": {
       "name": "omi-web-app",
       "dependencies": {
-        "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-dialog": "^1.1.2",
-        "@radix-ui/react-dropdown-menu": "^2.1.2",
-        "@radix-ui/react-scroll-area": "^1.1.0",
-        "@radix-ui/react-separator": "^1.1.15",
-        "@radix-ui/react-slot": "^1.1.0",
-        "@radix-ui/react-tabs": "^1.1.21",
-        "@radix-ui/react-tooltip": "^1.1.4",
         "@tanstack/react-virtual": "^3.13.18",
         "@tschk/moonshine": "^0.3.7",
         "@tschk/moonshine-compiler": "^0.3.7",
@@ -26,7 +19,6 @@
         "@types/lodash": "^4.17.13",
         "@types/three": "^0.182.0",
         "canvas-confetti": "^1.9.4",
-        "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "firebase": "^11.8.1",
         "framer-motion": "^11.5.4",
@@ -41,8 +33,6 @@
         "react-force-graph-3d": "^1.29.0",
         "react-leaflet": "^5.0.0",
         "react-markdown": "^10.1.0",
-        "react-virtualized-auto-sizer": "^2.0.2",
-        "react-window": "^2.2.3",
         "streamdown": "^2.5.0",
         "tailwind-merge": "^2.5.2",
         "three": "^0.182.0",
@@ -58,8 +48,6 @@
         "@types/node": "^22",
         "@types/react": "^19",
         "@types/react-dom": "^19",
-        "@types/react-virtualized-auto-sizer": "^1.0.4",
-        "@types/react-window": "^1.8.8",
         "autoprefixer": "^10.4.23",
         "eslint": "^9",
         "jsdom": "^29.1.1",
@@ -233,14 +221,6 @@
 
     "@firebase/webchannel-wrapper": ["@firebase/webchannel-wrapper@1.0.3", "", {}, "sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ=="],
 
-    "@floating-ui/core": ["@floating-ui/core@1.7.5", "", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
-
-    "@floating-ui/dom": ["@floating-ui/dom@1.7.6", "", { "dependencies": { "@floating-ui/core": "^1.7.5", "@floating-ui/utils": "^0.2.11" } }, "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ=="],
-
-    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.8", "", { "dependencies": { "@floating-ui/dom": "^1.7.6" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A=="],
-
-    "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
-
     "@grpc/grpc-js": ["@grpc/grpc-js@1.9.16", "", { "dependencies": { "@grpc/proto-loader": "^0.7.8", "@types/node": ">=12.12.47" } }, "sha512-wE4Ut/olIzfKqp631XrG+wbF0v1vWFN4YL9FyXC2LJiG33DsV7PLzURjrCvY/6je2ntdRkeLpPDluzSRGaVltQ=="],
 
     "@grpc/proto-loader": ["@grpc/proto-loader@0.7.15", "", { "dependencies": { "lodash.camelcase": "^4.3.0", "long": "^5.0.0", "protobufjs": "^7.2.5", "yargs": "^17.7.2" }, "bin": { "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js" } }, "sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ=="],
@@ -307,57 +287,29 @@
 
     "@protobufjs/utf8": ["@protobufjs/utf8@1.1.1", "", {}, "sha512-oOAWABowe8EAbMyWKM0tYDKi8Yaox52D+HWZhAIJqQXbqe0xI/GV7FhLWqlEKreMkfDjshR5FKgi3mnle0h6Eg=="],
 
-    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
-
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
 
-    "@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA=="],
-
-    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
-
-    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
-
-    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
-
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
     "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
 
-    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
-
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
 
-    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
-
     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
 
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
-    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
-
-    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
-
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
 
     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
 
     "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.19", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-collection": "1.1.15", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-is-hydrated": "0.1.3", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ=="],
-
-    "@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.10", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A=="],
-
-    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.15", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw=="],
-
-    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
-
-    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.21", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-roving-focus": "1.1.19", "@radix-ui/react-use-controllable-state": "1.2.6" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog=="],
-
-    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
@@ -367,18 +319,8 @@
 
     "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
 
-    "@radix-ui/react-use-is-hydrated": ["@radix-ui/react-use-is-hydrated@0.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw=="],
-
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
-    "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
-
-    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
-
-    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
-
-    "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
-
     "@react-leaflet/core": ["@react-leaflet/core@3.0.0", "", { "peerDependencies": { "leaflet": "^1.9.0", "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ=="],
 
     "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.2.2", "", { "os": "android", "cpu": "arm64" }, "sha512-l7x215OGvo1s52JWmR8U/DAVzEDWBCIbTm28aeJV/WDTSHgcKXaZTuBT0hJMs5NggilfJTW3clZVvd24yfKJxA=="],
@@ -565,10 +507,6 @@
 
     "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 
-    "@types/react-virtualized-auto-sizer": ["@types/react-virtualized-auto-sizer@1.0.4", "", { "dependencies": { "@types/react": "*" } }, "sha512-nhYwlFiYa8M3S+O2T9QO/e1FQUYMr/wJENUdf/O0dhRi1RS/93rjrYQFYdbUqtdFySuhrtnEDX29P6eKOttY+A=="],
-
-    "@types/react-window": ["@types/react-window@1.8.8", "", { "dependencies": { "@types/react": "*" } }, "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q=="],
-
     "@types/stats.js": ["@types/stats.js@0.17.4", "", {}, "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA=="],
 
     "@types/three": ["@types/three@0.182.0", "", { "dependencies": { "@dimforge/rapier3d-compat": "~0.12.0", "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", "@types/webxr": ">=0.5.17", "@webgpu/types": "*", "fflate": "~0.8.2", "meshoptimizer": "~0.22.0" } }, "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q=="],
@@ -673,8 +611,6 @@
 
     "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
 
-    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
-
     "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
@@ -1291,10 +1227,6 @@
 
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
 
-    "react-virtualized-auto-sizer": ["react-virtualized-auto-sizer@2.0.3", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-nonmCSUIh5HtbzazGcQ1NhnMFps/ZBu/UKJyhCt0Fhi7ondLAUZNETtRCWM8RWYZDzVlMYOQGgBmIxUutIhqgw=="],
-
-    "react-window": ["react-window@2.2.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-SH5nvfUQwGHYyriDUAOt7wfPsfG9Qxd6OdzQxl5oQ4dsSsUicqQvjV7dR+NqZ4coY0fUn3w1jnC5PwzIUWEg5w=="],
-
     "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
@@ -1527,54 +1459,6 @@
 
     "@firebase/messaging/idb": ["idb@7.1.1", "", {}, "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="],
 
-    "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
-    "@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
-    "@radix-ui/react-menu/@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],
-
-    "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
-    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/primitive": ["@radix-ui/primitive@1.1.7", "", {}, "sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.15", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-slot": "1.3.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.5", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-context": ["@radix-ui/react-context@1.2.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-id": ["@radix-ui/react-id@1.1.4", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.10", "", { "dependencies": { "@radix-ui/react-slot": "1.3.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-use-effect-event": "0.0.5", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw=="],
-
-    "@radix-ui/react-separator/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.10", "", { "dependencies": { "@radix-ui/react-slot": "1.3.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg=="],
-
-    "@radix-ui/react-tabs/@radix-ui/primitive": ["@radix-ui/primitive@1.1.7", "", {}, "sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-context": ["@radix-ui/react-context@1.2.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-id": ["@radix-ui/react-id@1.1.4", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.10", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.10", "", { "dependencies": { "@radix-ui/react-slot": "1.3.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-use-effect-event": "0.0.5", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ=="],
-
-    "@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
     "@testing-library/dom/aria-query": ["aria-query@5.3.0", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],
 
     "@testing-library/dom/dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
@@ -1621,24 +1505,6 @@
 
     "vite/tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
 
-    "@radix-ui/react-roving-focus/@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q=="],
-
-    "@radix-ui/react-roving-focus/@radix-ui/react-use-controllable-state/@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.5", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg=="],
-
-    "@radix-ui/react-separator/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-id/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-presence/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-use-controllable-state/@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.5", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-use-controllable-state/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw=="],
-
     "cytoscape-fcose/cose-base/layout-base": ["layout-base@2.0.1", "", {}, "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="],
 
     "d3-sankey/d3-array/internmap": ["internmap@1.0.1", "", {}, "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="],
@@ -1646,9 +1512,5 @@
     "d3-sankey/d3-shape/d3-path": ["d3-path@1.0.9", "", {}, "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="],
 
     "hast-util-raw/parse5/entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
-
-    "@radix-ui/react-separator/@radix-ui/react-primitive/@radix-ui/react-slot/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.5", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA=="],
-
-    "@radix-ui/react-tabs/@radix-ui/react-primitive/@radix-ui/react-slot/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.5", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA=="],
   }
 }
diff --git a/web/app/components.json b/web/app/components.json
index e92fe4d0dd7..e138d9b678c 100644
--- a/web/app/components.json
+++ b/web/app/components.json
@@ -13,7 +13,7 @@
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
-    "ui": "@/components/ui",
+    "ui": "@/shared/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
diff --git a/web/app/package.json b/web/app/package.json
index 83ca484bc22..ebafbee77a1 100644
--- a/web/app/package.json
+++ b/web/app/package.json
@@ -10,19 +10,13 @@
     "start": "bun .moonshine/server.ts",
     "lint": "bunx oxlint src scripts moonshine.config.ts",
     "typecheck": "bunx tsc --noEmit",
-    "test": "bun test scripts/moonshine-smoke.test.ts && bunx vitest run --config vitest.config.mts",
+    "test": "bun test scripts/moonshine-smoke.test.ts scripts/check-feature-imports.test.ts && bunx vitest run --config vitest.config.mts",
+    "check:imports": "bun scripts/check-feature-imports.ts",
     "test:watch": "bunx vitest",
-    "check": "bun run typecheck && bun run test"
+    "check": "bun run check:imports && bun run typecheck && bun run test"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-separator": "^1.1.15",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.21",
-    "@radix-ui/react-tooltip": "^1.1.4",
     "@tanstack/react-virtual": "^3.13.18",
     "@tschk/moonshine": "^0.3.7",
     "@tschk/moonshine-compiler": "^0.3.7",
@@ -36,7 +30,6 @@
     "@types/lodash": "^4.17.13",
     "@types/three": "^0.182.0",
     "canvas-confetti": "^1.9.4",
-    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "firebase": "^11.8.1",
     "framer-motion": "^11.5.4",
@@ -51,8 +44,6 @@
     "react-force-graph-3d": "^1.29.0",
     "react-leaflet": "^5.0.0",
     "react-markdown": "^10.1.0",
-    "react-virtualized-auto-sizer": "^2.0.2",
-    "react-window": "^2.2.3",
     "streamdown": "^2.5.0",
     "tailwind-merge": "^2.5.2",
     "three": "^0.182.0",
@@ -68,8 +59,6 @@
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@types/react-virtualized-auto-sizer": "^1.0.4",
-    "@types/react-window": "^1.8.8",
     "autoprefixer": "^10.4.23",
     "eslint": "^9",
     "jsdom": "^29.1.1",
diff --git a/web/app/scripts/check-feature-imports.test.ts b/web/app/scripts/check-feature-imports.test.ts
new file mode 100644
index 00000000000..ec302ce8ca3
--- /dev/null
+++ b/web/app/scripts/check-feature-imports.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'bun:test';
+import { spawnSync } from 'node:child_process';
+import { join } from 'node:path';
+
+const appRoot = join(import.meta.dir, '..');
+
+describe('check-feature-imports', () => {
+  it('passes on the current tree', () => {
+    const result = spawnSync('bun', ['scripts/check-feature-imports.ts'], {
+      cwd: appRoot,
+      encoding: 'utf8',
+    });
+    expect(result.status).toBe(0);
+    expect(result.stdout).toContain('ok:');
+  });
+});
diff --git a/web/app/scripts/check-feature-imports.ts b/web/app/scripts/check-feature-imports.ts
new file mode 100644
index 00000000000..fc7ac1cf78f
--- /dev/null
+++ b/web/app/scripts/check-feature-imports.ts
@@ -0,0 +1,110 @@
+/**
+ * Import boundaries for src/features and src/shared.
+ *
+ * - shared must not import features
+ * - a feature's model.ts must not import React or that feature's api
+ * - code outside a feature may only import its public root (@/features/<name>)
+ */
+import { readdir, readFile } from 'node:fs/promises';
+import { extname, join, relative } from 'node:path';
+
+const root = join(import.meta.dir, '..');
+const srcRoot = join(root, 'src');
+
+const IMPORT_RE =
+  /(?:from|import)\s*\(\s*['"]([^'"]+)['"]\s*\)|(?:from|import)\s+['"]([^'"]+)['"]|export\s+\*\s+from\s+['"]([^'"]+)['"]/g;
+
+async function walk(dir: string): Promise<string[]> {
+  const out: string[] = [];
+  for (const ent of await readdir(dir, { withFileTypes: true })) {
+    if (ent.name.startsWith('.') || ent.name === 'node_modules') continue;
+    const p = join(dir, ent.name);
+    if (ent.isDirectory()) out.push(...(await walk(p)));
+    else if (['.ts', '.tsx', '.js', '.jsx'].includes(extname(ent.name))) out.push(p);
+  }
+  return out;
+}
+
+function featureOf(file: string): string | null {
+  const rel = relative(srcRoot, file).replaceAll('\\', '/');
+  const m = rel.match(/^features\/([^/]+)\//);
+  return m ? m[1] : null;
+}
+
+function isShared(file: string): boolean {
+  return relative(srcRoot, file).replaceAll('\\', '/').startsWith('shared/');
+}
+
+function isModel(file: string): boolean {
+  return /(?:^|\/)model\.ts$/.test(relative(srcRoot, file).replaceAll('\\', '/'));
+}
+
+function specs(text: string): string[] {
+  const found: string[] = [];
+  for (const m of text.matchAll(IMPORT_RE)) {
+    const spec = m[1] || m[2] || m[3];
+    if (spec) found.push(spec);
+  }
+  return found;
+}
+
+const errors: string[] = [];
+const files = await walk(srcRoot);
+
+for (const file of files) {
+  const rel = relative(root, file);
+  const text = await readFile(file, 'utf8');
+  const fromFeature = featureOf(file);
+  const model = isModel(file);
+
+  for (const spec of specs(text)) {
+    if (
+      isShared(file) &&
+      (spec.startsWith('@/features/') || spec.includes('/features/'))
+    ) {
+      errors.push(`${rel} (shared) imports ${spec}`);
+    }
+
+    if (
+      model &&
+      (spec === 'react' || spec.startsWith('react/') || spec === 'react-dom')
+    ) {
+      errors.push(`${rel} (model) imports React (${spec})`);
+    }
+    if (
+      model &&
+      (spec === './api' || spec.endsWith('/api') || spec === '@/shared/api/client')
+    ) {
+      errors.push(`${rel} (model) imports API (${spec})`);
+    }
+
+    const featImport = spec.match(/^@\/features\/([^/]+)(?:\/(.*))?$/);
+    if (featImport) {
+      const name = featImport[1];
+      const rest = featImport[2] ?? '';
+      const publicFile =
+        rest === '' ||
+        rest === 'index' ||
+        rest === 'index.ts' ||
+        rest === 'index.tsx' ||
+        rest === 'api' ||
+        rest === 'api.ts' ||
+        rest === 'model' ||
+        rest === 'model.ts';
+      if (!publicFile && fromFeature !== name) {
+        errors.push(
+          `${rel} imports @/features/${name}/${rest}; outside the feature use @/features/${name}, api, or model`,
+        );
+      }
+    }
+  }
+}
+
+if (errors.length) {
+  console.error(
+    'Feature import boundary violations:\n' + errors.map((e) => `  ${e}`).join('\n'),
+  );
+  process.exit(1);
+}
+
+console.log(`ok: ${files.length} files, feature import boundaries hold`);
diff --git a/web/app/scripts/copy-moonshine-assets.ts b/web/app/scripts/copy-moonshine-assets.ts
index e367c6e78f9..e23c3dbc127 100644
--- a/web/app/scripts/copy-moonshine-assets.ts
+++ b/web/app/scripts/copy-moonshine-assets.ts
@@ -1,5 +1,5 @@
 import { cp, mkdir } from 'node:fs/promises';
-import { categoryMetadata } from '../src/components/marketplace/category';
+import { categoryMetadata } from '../src/features/marketplace/ui/category';
 
 export function deriveWebSocketBaseUrl(
   apiBaseUrl: string,
diff --git a/web/app/scripts/moonshine-smoke.test.ts b/web/app/scripts/moonshine-smoke.test.ts
index 74dcf7bf5f7..da6caab561c 100644
--- a/web/app/scripts/moonshine-smoke.test.ts
+++ b/web/app/scripts/moonshine-smoke.test.ts
@@ -66,4 +66,11 @@ describe('Moonshine web routes', () => {
       }).NEXT_PUBLIC_WS_BASE_URL,
     ).toBe('wss://recording.example.com');
   });
+
+  test('Tailwind content globs include feature modules', async () => {
+    const { readFile } = await import('node:fs/promises');
+    const { join } = await import('node:path');
+    const source = await readFile(join(import.meta.dir, '../tailwind.config.ts'), 'utf8');
+    expect(source.includes('src/**') || source.includes('src/features')).toBe(true);
+  });
 });
diff --git a/web/app/src/app/(authenticated)/connectors/[id]/edit/page.tsx b/web/app/src/app/(authenticated)/connectors/[id]/edit/page.tsx
index 2e9559e9351..9dd647dc5aa 100644
--- a/web/app/src/app/(authenticated)/connectors/[id]/edit/page.tsx
+++ b/web/app/src/app/(authenticated)/connectors/[id]/edit/page.tsx
@@ -3,8 +3,8 @@
 import { useState, useEffect } from 'react';
 import { useParams } from '@tschk/moonshine-next/navigation';
 import Link from '@tschk/moonshine-next/link';
-import { AppForm } from '@/components/apps/AppForm';
-import { getApp } from '@/lib/api';
+import { AppForm } from '@/features/connectors';
+import { getApp } from '@/features/connectors';
 import type { App } from '@/types/apps';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(authenticated)/connectors/[id]/page.tsx b/web/app/src/app/(authenticated)/connectors/[id]/page.tsx
index 21601cc272b..3fc0120628b 100644
--- a/web/app/src/app/(authenticated)/connectors/[id]/page.tsx
+++ b/web/app/src/app/(authenticated)/connectors/[id]/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useParams } from '@tschk/moonshine-next/navigation';
-import { AppDetail } from '@/components/apps/AppDetail';
+import { AppDetail } from '@/features/connectors';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
 export default function AppDetailPage() {
diff --git a/web/app/src/app/(authenticated)/connectors/new/page.tsx b/web/app/src/app/(authenticated)/connectors/new/page.tsx
index 5ab15c90ec3..693f787a4ae 100644
--- a/web/app/src/app/(authenticated)/connectors/new/page.tsx
+++ b/web/app/src/app/(authenticated)/connectors/new/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AppForm } from '@/components/apps/AppForm';
+import { AppForm } from '@/features/connectors';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
 export default function NewAppPage() {
diff --git a/web/app/src/app/(authenticated)/connectors/page.tsx b/web/app/src/app/(authenticated)/connectors/page.tsx
index c718714ce0b..9bb96859743 100644
--- a/web/app/src/app/(authenticated)/connectors/page.tsx
+++ b/web/app/src/app/(authenticated)/connectors/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { AppsExplorer } from '@/components/apps/AppsExplorer';
+import { AppsExplorer } from '@/features/connectors';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(authenticated)/conversations/loading.tsx b/web/app/src/app/(authenticated)/conversations/loading.tsx
index 2f8e6e743fd..5627f702ebc 100644
--- a/web/app/src/app/(authenticated)/conversations/loading.tsx
+++ b/web/app/src/app/(authenticated)/conversations/loading.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { GanttChartSquare } from 'lucide-react';
-import { ConversationGallerySkeleton } from '@/components/conversations/ConversationGallery';
-import { FolderTabsSkeleton } from '@/components/conversations/FolderTabs';
+import { ConversationGallerySkeleton } from '@/features/conversations';
+import { FolderTabsSkeleton } from '@/features/conversations';
 
 export default function ConversationsLoading() {
   return (
diff --git a/web/app/src/app/(authenticated)/conversations/page.tsx b/web/app/src/app/(authenticated)/conversations/page.tsx
index ea125e136ea..1b233de0315 100644
--- a/web/app/src/app/(authenticated)/conversations/page.tsx
+++ b/web/app/src/app/(authenticated)/conversations/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { ConversationSplitView } from '@/components/conversations/ConversationSplitView';
+import { ConversationSplitView } from '@/features/conversations';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(authenticated)/fair-use/page.tsx b/web/app/src/app/(authenticated)/fair-use/page.tsx
index 7bf1dd9c4a0..b089ae0f8d9 100644
--- a/web/app/src/app/(authenticated)/fair-use/page.tsx
+++ b/web/app/src/app/(authenticated)/fair-use/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { FairUseStatus } from '@/components/fair-use/FairUseStatus';
+import { FairUseStatus } from '@/features/fair-use';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(authenticated)/help/page.tsx b/web/app/src/app/(authenticated)/help/page.tsx
index ce578e7d61f..721b60ef7b5 100644
--- a/web/app/src/app/(authenticated)/help/page.tsx
+++ b/web/app/src/app/(authenticated)/help/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { useAuth } from '@/components/auth/AuthProvider';
+import { useAuth } from '@/features/auth';
 import { crispEmbedUrl } from '@/lib/support';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
diff --git a/web/app/src/app/(authenticated)/home/page.tsx b/web/app/src/app/(authenticated)/home/page.tsx
index 9823eda8962..9525d041fbe 100644
--- a/web/app/src/app/(authenticated)/home/page.tsx
+++ b/web/app/src/app/(authenticated)/home/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { HomePage } from '@/components/home/HomePage';
+import { HomePage } from '@/features/home';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(authenticated)/layout.tsx b/web/app/src/app/(authenticated)/layout.tsx
index 484dd6d3436..c0bb180df6f 100644
--- a/web/app/src/app/(authenticated)/layout.tsx
+++ b/web/app/src/app/(authenticated)/layout.tsx
@@ -1,6 +1,6 @@
-import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
+import { ProtectedRoute } from '@/features/auth';
 import { MainLayout } from '@/components/layout/MainLayout';
-import { StartupModals } from '@/components/ui/StartupModals';
+import { StartupModals } from '@/shared/ui/StartupModals';
 
 export default function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/web/app/src/app/(authenticated)/memories/page.tsx b/web/app/src/app/(authenticated)/memories/page.tsx
index b94220039e1..7469d0e8101 100644
--- a/web/app/src/app/(authenticated)/memories/page.tsx
+++ b/web/app/src/app/(authenticated)/memories/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { MemoriesPage } from '@/components/memories/MemoriesPage';
+import { MemoriesPage } from '@/features/memories';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(authenticated)/settings/page.tsx b/web/app/src/app/(authenticated)/settings/page.tsx
index 87483cedde5..c30a6ce78e9 100644
--- a/web/app/src/app/(authenticated)/settings/page.tsx
+++ b/web/app/src/app/(authenticated)/settings/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { SettingsPage } from '@/components/settings/SettingsPage';
+import { SettingsPage } from '@/features/settings';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(authenticated)/tasks/page.tsx b/web/app/src/app/(authenticated)/tasks/page.tsx
index 4f55dc8792e..249360e727f 100644
--- a/web/app/src/app/(authenticated)/tasks/page.tsx
+++ b/web/app/src/app/(authenticated)/tasks/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { TaskHub } from '@/components/tasks/TaskHub';
+import { TaskHub } from '@/features/tasks';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(public)/apps/[id]/page.tsx b/web/app/src/app/(public)/apps/[id]/page.tsx
index fc7bbb90da3..2159bcf74a4 100644
--- a/web/app/src/app/(public)/apps/[id]/page.tsx
+++ b/web/app/src/app/(public)/apps/[id]/page.tsx
@@ -8,8 +8,8 @@ import {
   transformToPlugin,
   type V2AppData,
 } from '@/lib/api/public';
-import { CompactPluginCard } from '@/components/marketplace/plugin-card/CompactPluginCard';
-import { CategoryBreadcrumb } from '@/components/marketplace/CategoryBreadcrumb';
+import { CompactPluginCard } from '@/features/marketplace';
+import { CategoryBreadcrumb } from '@/features/marketplace';
 import { BreadcrumbJsonLd, SoftwareAppJsonLd } from '@/components/seo/JsonLd';
 import { Calendar, User, FolderOpen, Puzzle, ArrowRight, DollarSign } from 'lucide-react';
 import Image from '@tschk/moonshine-next/image';
diff --git a/web/app/src/app/(public)/apps/__tests__/marketplacePage.test.tsx b/web/app/src/app/(public)/apps/__tests__/marketplacePage.test.tsx
index 9402116cdea..8cff6cb2eb0 100644
--- a/web/app/src/app/(public)/apps/__tests__/marketplacePage.test.tsx
+++ b/web/app/src/app/(public)/apps/__tests__/marketplacePage.test.tsx
@@ -14,7 +14,7 @@ vi.mock('@/lib/api/public', () => ({
     capabilities: new Set(),
   }),
 }));
-vi.mock('@/components/marketplace/AppList', () => ({
+vi.mock('@/features/marketplace', () => ({
   default: ({
     initialPlugins,
   }: {
@@ -26,8 +26,8 @@ vi.mock('@/components/marketplace/AppList', () => ({
       ))}
     </div>
   ),
+  PromoCard: () => null,
 }));
-vi.mock('@/components/marketplace/PromoCard', () => ({ PromoCard: () => null }));
 vi.mock('@/components/seo/JsonLd', () => ({ CollectionPageJsonLd: () => null }));
 vi.mock('@/moonshine/register-client-route', () => ({
   registerMoonshineRoute: () => {},
diff --git a/web/app/src/app/(public)/apps/category/[category]/page.tsx b/web/app/src/app/(public)/apps/category/[category]/page.tsx
index 9e4811f9496..a25411fb6d9 100644
--- a/web/app/src/app/(public)/apps/category/[category]/page.tsx
+++ b/web/app/src/app/(public)/apps/category/[category]/page.tsx
@@ -2,13 +2,13 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import { useParams } from '@tschk/moonshine-next/navigation';
-import { CompactPluginCard } from '@/components/marketplace/plugin-card/CompactPluginCard';
-import { FeaturedPluginCard } from '@/components/marketplace/plugin-card/FeaturedPluginCard';
-import { ScrollableCategoryNav } from '@/components/marketplace/ScrollableCategoryNav';
-import { CategoryBreadcrumb } from '@/components/marketplace/CategoryBreadcrumb';
-import { CategoryHeader } from '@/components/marketplace/CategoryHeader';
+import { CompactPluginCard } from '@/features/marketplace';
+import { FeaturedPluginCard } from '@/features/marketplace';
+import { ScrollableCategoryNav } from '@/features/marketplace';
+import { CategoryBreadcrumb } from '@/features/marketplace';
+import { CategoryHeader } from '@/features/marketplace';
 import { getAllAppsV2, transformToPlugin } from '@/lib/api/public';
-import { getCategoryMetadata } from '@/components/marketplace/category';
+import { getCategoryMetadata } from '@/features/marketplace';
 import { BreadcrumbJsonLd, CollectionPageJsonLd } from '@/components/seo/JsonLd';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(public)/apps/page.tsx b/web/app/src/app/(public)/apps/page.tsx
index b31b3893034..6020635b78f 100644
--- a/web/app/src/app/(public)/apps/page.tsx
+++ b/web/app/src/app/(public)/apps/page.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useState } from 'react';
 import { getAllAppsV2, getAppsV2, transformToPlugin } from '@/lib/api/public';
-import AppList from '@/components/marketplace/AppList';
-import { PromoCard } from '@/components/marketplace/PromoCard';
+import AppList from '@/features/marketplace';
+import { PromoCard } from '@/features/marketplace';
 import { CollectionPageJsonLd } from '@/components/seo/JsonLd';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/(public)/layout.tsx b/web/app/src/app/(public)/layout.tsx
index 107f0241e34..e78231dec19 100644
--- a/web/app/src/app/(public)/layout.tsx
+++ b/web/app/src/app/(public)/layout.tsx
@@ -2,22 +2,16 @@
 
 import { MarketplaceHeader } from '@/components/layout/MarketplaceHeader';
 import { Footer } from '@/components/layout/Footer';
-import { LoginPanel } from '@/components/auth/LoginPanel';
-import { useAuth } from '@/components/auth/AuthProvider';
+import { LoginPanel } from '@/features/auth';
+import { useAuth } from '@/features/auth';
 
-export default function PublicLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
   const { isLoginPanelOpen, closeLoginPanel } = useAuth();
 
   return (
     <div className="min-h-screen bg-[#0B0F17] flex flex-col">
       <MarketplaceHeader />
-      <main className="flex-1">
-        {children}
-      </main>
+      <main className="flex-1">{children}</main>
       <Footer />
       <LoginPanel isOpen={isLoginPanelOpen} onClose={closeLoginPanel} />
     </div>
diff --git a/web/app/src/app/case/[ref]/page.tsx b/web/app/src/app/case/[ref]/page.tsx
index d0fa7e4e8d8..95dcced6a43 100644
--- a/web/app/src/app/case/[ref]/page.tsx
+++ b/web/app/src/app/case/[ref]/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useParams } from '@tschk/moonshine-next/navigation';
-import { CaseStatusView } from '@/components/fair-use/CaseStatusView';
+import { CaseStatusView } from '@/features/fair-use';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
 // This page runs entirely in the browser, on the web origin. The backend
diff --git a/web/app/src/app/case/__tests__/caseStatusOrigin.test.tsx b/web/app/src/app/case/__tests__/caseStatusOrigin.test.tsx
index ba07bc5c613..bca685b494e 100644
--- a/web/app/src/app/case/__tests__/caseStatusOrigin.test.tsx
+++ b/web/app/src/app/case/__tests__/caseStatusOrigin.test.tsx
@@ -7,7 +7,7 @@ vi.mock('@tschk/moonshine-next/navigation', () => ({
 vi.mock('@/moonshine/register-client-route', () => ({
   registerMoonshineRoute: () => {},
 }));
-vi.mock('@/components/fair-use/CaseStatusView', () => ({
+vi.mock('@/features/fair-use', () => ({
   CaseStatusView: ({ status }: { status: { stage: string } | null }) => (
     <div data-testid="case-view">{status ? status.stage : 'not-found'}</div>
   ),
diff --git a/web/app/src/app/layout.tsx b/web/app/src/app/layout.tsx
index f90e8ff052c..33862fac13a 100644
--- a/web/app/src/app/layout.tsx
+++ b/web/app/src/app/layout.tsx
@@ -1,6 +1,6 @@
-import { AuthProvider } from '@/components/auth/AuthProvider';
-import { RecordingProvider, RecordingController } from '@/components/recording';
-import { ToastProvider } from '@/components/ui/Toast';
+import { AuthProvider } from '@/features/auth';
+import { RecordingProvider, RecordingController } from '@/features/recording';
+import { ToastProvider } from '@/shared/ui/Toast';
 import { PublicBuildCanary } from '@/components/public-build-canary';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
diff --git a/web/app/src/app/login/LoginClient.tsx b/web/app/src/app/login/LoginClient.tsx
index 0cbe7127353..1f83a295654 100644
--- a/web/app/src/app/login/LoginClient.tsx
+++ b/web/app/src/app/login/LoginClient.tsx
@@ -5,7 +5,7 @@ import { useRouter, useSearchParams } from '@tschk/moonshine-next/navigation';
 import Image from '@tschk/moonshine-next/image';
 import Link from '@tschk/moonshine-next/link';
 import { motion } from 'framer-motion';
-import { useAuth } from '@/components/auth/AuthProvider';
+import { useAuth } from '@/features/auth';
 import { cn } from '@/lib/utils';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { isFirebaseAuthConfigured } from '@/lib/firebase';
diff --git a/web/app/src/app/login/__tests__/LoginClient.test.ts b/web/app/src/app/login/__tests__/LoginClient.test.ts
index cf32ce357a3..b9eb4e4be64 100644
--- a/web/app/src/app/login/__tests__/LoginClient.test.ts
+++ b/web/app/src/app/login/__tests__/LoginClient.test.ts
@@ -25,7 +25,7 @@ vi.mock('@tschk/moonshine-next/link', () => ({
     createElement('a', { href }, children),
 }));
 
-vi.mock('@/components/auth/AuthProvider', () => ({
+vi.mock('@/features/auth', () => ({
   useAuth: () => ({
     user: authUser,
     loading: false,
diff --git a/web/app/src/app/record/page.tsx b/web/app/src/app/record/page.tsx
index d34b135b6de..54497a6bdfb 100644
--- a/web/app/src/app/record/page.tsx
+++ b/web/app/src/app/record/page.tsx
@@ -4,12 +4,12 @@ import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Mic, ArrowLeft } from 'lucide-react';
 import Link from '@tschk/moonshine-next/link';
-import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
+import { ProtectedRoute } from '@/features/auth';
 import { MainLayout } from '@/components/layout/MainLayout';
-import { useRecordingContext } from '@/components/recording/RecordingContext';
-import { AudioModeSelector } from '@/components/recording/AudioModeSelector';
-import { RecordingControls } from '@/components/recording/RecordingControls';
-import { LiveTranscript } from '@/components/recording/LiveTranscript';
+import { useRecordingContext } from '@/features/recording';
+import { AudioModeSelector } from '@/features/recording';
+import { RecordingControls } from '@/features/recording';
+import { LiveTranscript } from '@/features/recording';
 import { cn } from '@/lib/utils';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
diff --git a/web/app/src/app/record/popout/page.tsx b/web/app/src/app/record/popout/page.tsx
index 9ab45368b67..362c2e0a43f 100644
--- a/web/app/src/app/record/popout/page.tsx
+++ b/web/app/src/app/record/popout/page.tsx
@@ -10,7 +10,7 @@ import {
   requestCurrentState,
   type RecordingBroadcastMessage,
 } from '@/lib/recordingBroadcast';
-import type { RecordingState, AudioMode } from '@/components/recording/RecordingContext';
+import type { RecordingState, AudioMode } from '@/features/recording';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
 // Extended message type for start command with audio mode
diff --git a/web/app/src/app/record/popout/transcript/page.tsx b/web/app/src/app/record/popout/transcript/page.tsx
index a6426a27cef..6bd36571224 100644
--- a/web/app/src/app/record/popout/transcript/page.tsx
+++ b/web/app/src/app/record/popout/transcript/page.tsx
@@ -10,11 +10,7 @@ import {
   requestCurrentState,
   type RecordingBroadcastMessage,
 } from '@/lib/recordingBroadcast';
-import type {
-  RecordingState,
-  AudioMode,
-  TranscriptSegment,
-} from '@/components/recording/RecordingContext';
+import type { RecordingState, AudioMode, TranscriptSegment } from '@/features/recording';
 import { registerMoonshineRoute } from '@/moonshine/register-client-route';
 
 // Extended message type for start command
diff --git a/web/app/src/app/sitemap.ts b/web/app/src/app/sitemap.ts
index 0f85eb75c0d..f4354bee6e6 100644
--- a/web/app/src/app/sitemap.ts
+++ b/web/app/src/app/sitemap.ts
@@ -1,5 +1,5 @@
 import { getApprovedApps } from '@/lib/api/public';
-import { categoryMetadata } from '@/components/marketplace/category';
+import { categoryMetadata } from '@/features/marketplace';
 
 type SitemapEntry = {
   url: string;
diff --git a/web/app/src/components/apps/FilterSheet.tsx b/web/app/src/components/apps/FilterSheet.tsx
deleted file mode 100644
index d5454281a9f..00000000000
--- a/web/app/src/components/apps/FilterSheet.tsx
+++ /dev/null
@@ -1,257 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { X, Star, Check } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import type { AppCategory, AppCapability, AppsFilters, SortOption } from '@/types/apps';
-
-interface FilterSheetProps {
-  open: boolean;
-  onClose: () => void;
-  filters: AppsFilters;
-  onFiltersChange: (filters: AppsFilters) => void;
-  categories: AppCategory[];
-  capabilities: AppCapability[];
-}
-
-const RATING_OPTIONS = [
-  { value: 4, label: '4+ Stars' },
-  { value: 3, label: '3+ Stars' },
-  { value: 2, label: '2+ Stars' },
-  { value: 1, label: '1+ Stars' },
-];
-
-const SORT_OPTIONS: { value: SortOption; label: string }[] = [
-  { value: 'installs_desc', label: 'Most Installs' },
-  { value: 'rating_desc', label: 'Highest Rated' },
-  { value: 'rating_asc', label: 'Lowest Rated' },
-  { value: 'name_asc', label: 'A-Z' },
-  { value: 'name_desc', label: 'Z-A' },
-];
-
-export function FilterSheet({
-  open,
-  onClose,
-  filters,
-  onFiltersChange,
-  categories,
-  capabilities,
-}: FilterSheetProps) {
-  const [localFilters, setLocalFilters] = useState<AppsFilters>(filters);
-
-  // Sync with external filters when sheet opens
-  useEffect(() => {
-    if (open) {
-      setLocalFilters(filters);
-    }
-  }, [open, filters]);
-
-  const handleApply = () => {
-    onFiltersChange(localFilters);
-    onClose();
-  };
-
-  const handleReset = () => {
-    setLocalFilters({});
-  };
-
-  const toggleCategory = (categoryId: string) => {
-    setLocalFilters((prev) => ({
-      ...prev,
-      category: prev.category === categoryId ? undefined : categoryId,
-    }));
-  };
-
-  const toggleCapability = (capabilityId: string) => {
-    setLocalFilters((prev) => ({
-      ...prev,
-      capability: prev.capability === capabilityId ? undefined : capabilityId,
-    }));
-  };
-
-  const toggleRating = (rating: number) => {
-    setLocalFilters((prev) => ({
-      ...prev,
-      rating: prev.rating === rating ? undefined : rating,
-    }));
-  };
-
-  const toggleSort = (sort: SortOption) => {
-    setLocalFilters((prev) => ({
-      ...prev,
-      sort: prev.sort === sort ? undefined : sort,
-    }));
-  };
-
-  return (
-    <AnimatePresence>
-      {open && (
-        <>
-          {/* Backdrop */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black/50 z-40"
-            onClick={onClose}
-          />
-
-          {/* Sheet */}
-          <motion.div
-            initial={{ x: '100%' }}
-            animate={{ x: 0 }}
-            exit={{ x: '100%' }}
-            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-            className={cn(
-              'fixed top-0 right-0 bottom-0 z-50',
-              'w-full sm:w-[400px] max-w-full',
-              'bg-bg-secondary border-l border-bg-tertiary',
-              'flex flex-col',
-              'shadow-2xl',
-            )}
-          >
-            {/* Header */}
-            <div className="flex items-center justify-between p-4 border-b border-bg-tertiary">
-              <h2 className="text-lg font-semibold text-text-primary">Filters</h2>
-              <button
-                onClick={onClose}
-                className="p-2 rounded-lg hover:bg-bg-tertiary transition-colors"
-              >
-                <X className="w-5 h-5 text-text-secondary" />
-              </button>
-            </div>
-
-            {/* Content */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-6">
-              {/* Categories */}
-              <FilterSection title="Category">
-                <div className="flex flex-wrap gap-2">
-                  {categories.map((category) => (
-                    <FilterChip
-                      key={category.id}
-                      label={category.title}
-                      selected={localFilters.category === category.id}
-                      onClick={() => toggleCategory(category.id)}
-                    />
-                  ))}
-                </div>
-              </FilterSection>
-
-              {/* Capabilities */}
-              <FilterSection title="Capability">
-                <div className="flex flex-wrap gap-2">
-                  {capabilities.map((capability) => (
-                    <FilterChip
-                      key={capability.id}
-                      label={capability.title}
-                      selected={localFilters.capability === capability.id}
-                      onClick={() => toggleCapability(capability.id)}
-                    />
-                  ))}
-                </div>
-              </FilterSection>
-
-              {/* Rating */}
-              <FilterSection title="Minimum Rating">
-                <div className="flex flex-wrap gap-2">
-                  {RATING_OPTIONS.map((option) => (
-                    <FilterChip
-                      key={option.value}
-                      label={option.label}
-                      icon={<Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />}
-                      selected={localFilters.rating === option.value}
-                      onClick={() => toggleRating(option.value)}
-                    />
-                  ))}
-                </div>
-              </FilterSection>
-
-              {/* Sort */}
-              <FilterSection title="Sort By">
-                <div className="flex flex-wrap gap-2">
-                  {SORT_OPTIONS.map((option) => (
-                    <FilterChip
-                      key={option.value}
-                      label={option.label}
-                      selected={localFilters.sort === option.value}
-                      onClick={() => toggleSort(option.value)}
-                    />
-                  ))}
-                </div>
-              </FilterSection>
-            </div>
-
-            {/* Footer */}
-            <div className="flex gap-3 p-4 border-t border-bg-tertiary">
-              <button
-                onClick={handleReset}
-                className={cn(
-                  'flex-1 px-4 py-2.5 rounded-xl',
-                  'border border-bg-quaternary',
-                  'text-text-secondary hover:bg-bg-tertiary',
-                  'transition-colors',
-                )}
-              >
-                Reset
-              </button>
-              <button
-                onClick={handleApply}
-                className={cn(
-                  'flex-1 px-4 py-2.5 rounded-xl',
-                  'bg-white text-black',
-                  'hover:bg-white/90',
-                  'transition-colors',
-                )}
-              >
-                Apply Filters
-              </button>
-            </div>
-          </motion.div>
-        </>
-      )}
-    </AnimatePresence>
-  );
-}
-
-function FilterSection({
-  title,
-  children,
-}: {
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div>
-      <h3 className="text-sm font-medium text-text-secondary mb-3">{title}</h3>
-      {children}
-    </div>
-  );
-}
-
-interface FilterChipProps {
-  label: string;
-  icon?: React.ReactNode;
-  selected: boolean;
-  onClick: () => void;
-}
-
-function FilterChip({ label, icon, selected, onClick }: FilterChipProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        'px-3 py-1.5 rounded-lg text-sm',
-        'flex items-center gap-1.5',
-        'transition-colors',
-        selected
-          ? 'bg-white text-black'
-          : 'bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary',
-      )}
-    >
-      {icon}
-      {label}
-      {selected && <Check className="w-3 h-3" />}
-    </button>
-  );
-}
diff --git a/web/app/src/components/apps/index.ts b/web/app/src/components/apps/index.ts
deleted file mode 100644
index bb1f427abcd..00000000000
--- a/web/app/src/components/apps/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { AppsExplorer } from './AppsExplorer';
-export { AppCard } from './AppCard';
-export { AppGridSection } from './AppGridSection';
-export { AppDetail } from './AppDetail';
-export { AppForm } from './AppForm';
-export { ConnectedServices } from './ConnectedServices';
diff --git a/web/app/src/components/chat/AppSelector.tsx b/web/app/src/components/chat/AppSelector.tsx
deleted file mode 100644
index f19070f0601..00000000000
--- a/web/app/src/components/chat/AppSelector.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { ChevronDown, Check, Sparkles, Loader2 } from 'lucide-react';
-import Image from '@tschk/moonshine-next/image';
-import { motion, AnimatePresence } from 'framer-motion';
-import { cn } from '@/lib/utils';
-import { getChatApps, type App } from '@/lib/api';
-
-interface AppSelectorProps {
-  selectedAppId: string | null;
-  onSelectApp: (appId: string | null) => void;
-  disabled?: boolean;
-}
-
-export function AppSelector({ selectedAppId, onSelectApp, disabled }: AppSelectorProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [apps, setApps] = useState<App[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // Load chat apps
-  useEffect(() => {
-    async function loadApps() {
-      try {
-        const chatApps = await getChatApps();
-        setApps(chatApps);
-      } catch (err) {
-        console.error('Failed to load chat apps:', err);
-      } finally {
-        setIsLoading(false);
-      }
-    }
-    loadApps();
-  }, []);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const selectedApp = apps.find(app => app.id === selectedAppId);
-
-  return (
-    <div className="relative" ref={dropdownRef}>
-      {/* Trigger button */}
-      <button
-        onClick={() => !disabled && setIsOpen(!isOpen)}
-        disabled={disabled}
-        className={cn(
-          'flex items-center gap-2 px-3 py-2 rounded-lg',
-          'bg-bg-tertiary hover:bg-bg-quaternary',
-          'border border-bg-quaternary',
-          'transition-colors',
-          'disabled:opacity-50 disabled:cursor-not-allowed',
-          isOpen && 'bg-bg-quaternary'
-        )}
-      >
-        {/* Selected app avatar */}
-        {selectedApp ? (
-          <div className="w-6 h-6 rounded-full overflow-hidden bg-bg-quaternary flex-shrink-0">
-            {selectedApp.image ? (
-              <Image
-                src={selectedApp.image}
-                alt={selectedApp.name}
-                width={24}
-                height={24}
-                className="object-cover"
-              />
-            ) : (
-              <div className="w-full h-full flex items-center justify-center text-text-tertiary text-xs">
-                {selectedApp.name.charAt(0)}
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className="w-6 h-6 rounded-full bg-white/[0.14] flex items-center justify-center flex-shrink-0">
-            <Sparkles className="w-3.5 h-3.5 text-text-primary" />
-          </div>
-        )}
-
-        <span className="text-sm text-text-primary max-w-[120px] truncate">
-          {selectedApp ? selectedApp.name : 'Omi'}
-        </span>
-
-        <ChevronDown className={cn(
-          'w-4 h-4 text-text-tertiary transition-transform',
-          isOpen && 'rotate-180'
-        )} />
-      </button>
-
-      {/* Dropdown menu */}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            initial={{ opacity: 0, y: -8 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -8 }}
-            transition={{ duration: 0.15 }}
-            className={cn(
-              'absolute top-full left-0 mt-2 z-50',
-              'min-w-[200px] max-w-[280px]',
-              'bg-bg-secondary border border-bg-tertiary rounded-xl',
-              'shadow-lg overflow-hidden'
-            )}
-          >
-            {isLoading ? (
-              <div className="flex items-center justify-center py-4">
-                <Loader2 className="w-5 h-5 text-text-tertiary animate-spin" />
-              </div>
-            ) : (
-              <div className="py-1 max-h-[300px] overflow-y-auto">
-                {/* Default Omi option */}
-                <button
-                  onClick={() => {
-                    onSelectApp(null);
-                    setIsOpen(false);
-                  }}
-                  className={cn(
-                    'w-full flex items-center gap-3 px-4 py-2.5',
-                    'hover:bg-bg-tertiary transition-colors',
-                    !selectedAppId && 'bg-bg-tertiary/50'
-                  )}
-                >
-                  <div className="w-8 h-8 rounded-full bg-white/[0.14] flex items-center justify-center flex-shrink-0">
-                    <Sparkles className="w-4 h-4 text-text-primary" />
-                  </div>
-                  <div className="flex-1 text-left">
-                    <p className="text-sm font-medium text-text-primary">Omi</p>
-                    <p className="text-xs text-text-tertiary">Default assistant</p>
-                  </div>
-                  {!selectedAppId && (
-                    <Check className="w-4 h-4 text-text-primary flex-shrink-0" />
-                  )}
-                </button>
-
-                {/* Separator if there are apps */}
-                {apps.length > 0 && (
-                  <div className="border-t border-bg-tertiary my-1" />
-                )}
-
-                {/* Chat apps list */}
-                {apps.map(app => (
-                  <button
-                    key={app.id}
-                    onClick={() => {
-                      onSelectApp(app.id);
-                      setIsOpen(false);
-                    }}
-                    className={cn(
-                      'w-full flex items-center gap-3 px-4 py-2.5',
-                      'hover:bg-bg-tertiary transition-colors',
-                      selectedAppId === app.id && 'bg-bg-tertiary/50'
-                    )}
-                  >
-                    <div className="w-8 h-8 rounded-full overflow-hidden bg-bg-quaternary flex-shrink-0">
-                      {app.image ? (
-                        <Image
-                          src={app.image}
-                          alt={app.name}
-                          width={32}
-                          height={32}
-                          className="object-cover"
-                        />
-                      ) : (
-                        <div className="w-full h-full flex items-center justify-center text-text-tertiary text-sm">
-                          {app.name.charAt(0)}
-                        </div>
-                      )}
-                    </div>
-                    <div className="flex-1 text-left min-w-0">
-                      <p className="text-sm font-medium text-text-primary truncate">
-                        {app.name}
-                      </p>
-                      {app.description && (
-                        <p className="text-xs text-text-tertiary truncate">
-                          {app.description}
-                        </p>
-                      )}
-                    </div>
-                    {selectedAppId === app.id && (
-                      <Check className="w-4 h-4 text-text-primary flex-shrink-0" />
-                    )}
-                  </button>
-                ))}
-
-                {/* Empty state */}
-                {apps.length === 0 && (
-                  <div className="px-4 py-3 text-center">
-                    <p className="text-sm text-text-tertiary">
-                      No chat apps enabled
-                    </p>
-                    <p className="text-xs text-text-quaternary mt-1">
-                      Enable apps in the Apps section
-                    </p>
-                  </div>
-                )}
-              </div>
-            )}
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}
diff --git a/web/app/src/components/conversations/SearchBar.tsx b/web/app/src/components/conversations/SearchBar.tsx
deleted file mode 100644
index ed7b2687361..00000000000
--- a/web/app/src/components/conversations/SearchBar.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-'use client';
-
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Search, X } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-interface SearchBarProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSearch: (query: string) => void;
-  placeholder?: string;
-  debounceMs?: number;
-  className?: string;
-}
-
-export function SearchBar({
-  value,
-  onChange,
-  onSearch,
-  placeholder = 'Search conversations...',
-  debounceMs = 300,
-  className,
-}: SearchBarProps) {
-  const [isFocused, setIsFocused] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const [isMac, setIsMac] = useState(true);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const debounceRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Detect OS for keyboard shortcut display
-  useEffect(() => {
-    setIsMac(navigator.platform.toLowerCase().includes('mac'));
-  }, []);
-
-  // Handle input change with debounce
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newValue = e.target.value;
-      onChange(newValue);
-
-      // Clear previous debounce
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-
-      // Set new debounce for search
-      debounceRef.current = setTimeout(() => {
-        onSearch(newValue);
-      }, debounceMs);
-    },
-    [onChange, onSearch, debounceMs],
-  );
-
-  // Clear search
-  const handleClear = useCallback(() => {
-    onChange('');
-    onSearch('');
-    inputRef.current?.focus();
-  }, [onChange, onSearch]);
-
-  // Keyboard shortcut: Cmd+K or Ctrl+K to focus search
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        inputRef.current?.focus();
-      }
-      // Escape to blur and clear if empty
-      if (e.key === 'Escape' && document.activeElement === inputRef.current) {
-        if (value === '') {
-          inputRef.current?.blur();
-        } else {
-          handleClear();
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [value, handleClear]);
-
-  // Cleanup debounce on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <div
-      className={cn('relative', className)}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <div
-        className={cn(
-          'flex items-center gap-2 px-3 py-2 rounded-lg overflow-hidden',
-          'bg-bg-secondary border transition-all duration-150',
-          isFocused
-            ? 'border-white/25 ring-2 ring-white/25'
-            : 'border-transparent hover:border-bg-quaternary',
-        )}
-      >
-        {/* Search icon */}
-        <Search
-          className={cn(
-            'w-4 h-4 flex-shrink-0 transition-colors',
-            isFocused ? 'text-text-primary' : 'text-text-quaternary',
-          )}
-        />
-
-        {/* Input */}
-        <input
-          ref={inputRef}
-          type="text"
-          value={value}
-          onChange={handleChange}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-          placeholder={placeholder}
-          className={cn(
-            'flex-1 bg-transparent text-sm text-text-primary',
-            'placeholder:text-text-quaternary',
-            'outline-none',
-          )}
-        />
-
-        {/* Keyboard shortcut hint or clear button */}
-        <AnimatePresence mode="wait">
-          {value ? (
-            <motion.button
-              key="clear"
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.8 }}
-              transition={{ duration: 0.1 }}
-              onClick={handleClear}
-              className={cn(
-                'p-1 rounded-md',
-                'text-text-quaternary hover:text-text-secondary',
-                'hover:bg-bg-tertiary transition-colors',
-              )}
-              aria-label="Clear search"
-            >
-              <X className="w-3.5 h-3.5" />
-            </motion.button>
-          ) : (
-            <motion.div
-              key="shortcut"
-              initial={{ opacity: 0 }}
-              animate={{ opacity: isHovered || isFocused ? 1 : 0 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.15 }}
-              className={cn(
-                'hidden sm:flex items-center gap-0.5',
-                'px-1.5 py-0.5 rounded',
-                'bg-bg-tertiary text-text-quaternary text-xs',
-              )}
-            >
-              <kbd className="font-sans">{isMac ? '⌘' : 'Ctrl'}</kbd>
-              <kbd className="font-sans">K</kbd>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </div>
-  );
-}
diff --git a/web/app/src/components/layout/BottomNavigation.tsx b/web/app/src/components/layout/BottomNavigation.tsx
index e89ca8f6a92..49b572f0396 100644
--- a/web/app/src/components/layout/BottomNavigation.tsx
+++ b/web/app/src/components/layout/BottomNavigation.tsx
@@ -5,7 +5,7 @@ import Link from '@tschk/moonshine-next/link';
 import { motion } from 'framer-motion';
 import { GanttChartSquare, House, Mic, CheckSquare, Menu } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useRecordingContext } from '@/components/recording/RecordingContext';
+import { useRecordingContext } from '@/features/recording';
 
 interface BottomNavigationProps {
   onOpenSidebar: () => void;
@@ -43,7 +43,7 @@ export function BottomNavigation({ onOpenSidebar }: BottomNavigationProps) {
         'lg:hidden', // Only show on mobile
         'bg-bg-secondary/80 backdrop-blur-md',
         'border-t border-bg-tertiary',
-        'pb-safe' // Safe area inset for devices with home indicators
+        'pb-safe', // Safe area inset for devices with home indicators
       )}
       aria-label="Primary navigation"
     >
@@ -92,7 +92,7 @@ export function BottomNavigation({ onOpenSidebar }: BottomNavigationProps) {
             'flex flex-col items-center justify-center',
             'w-14 h-14 rounded-xl',
             'text-text-tertiary hover:text-text-secondary',
-            'transition-colors duration-150'
+            'transition-colors duration-150',
           )}
           aria-label="More options"
         >
diff --git a/web/app/src/components/layout/MainLayout.tsx b/web/app/src/components/layout/MainLayout.tsx
index bdb672e7221..7d3acf77f59 100644
--- a/web/app/src/components/layout/MainLayout.tsx
+++ b/web/app/src/components/layout/MainLayout.tsx
@@ -5,21 +5,18 @@ import { usePathname, useSearchParams } from '@tschk/moonshine-next/navigation';
 import { motion } from 'framer-motion';
 import dynamic from '@tschk/moonshine-next/dynamic';
 import { Sidebar, MobileMenuButton } from './Sidebar';
-import { ChatProvider, useChat as useChatContext } from '@/components/chat/ChatContext';
+import { ChatProvider, useChat as useChatContext } from '@/features/chat';
 import { BottomNavigation } from './BottomNavigation';
-import {
-  NotificationProvider,
-  useNotificationContext,
-} from '@/components/notifications/NotificationContext';
-import { HeaderRecordingIndicator } from '@/components/recording';
-import { getChatApps } from '@/lib/api';
+import { NotificationProvider, useNotificationContext } from '@/features/notifications';
+import { HeaderRecordingIndicator } from '@/features/recording';
+import { getChatApps } from '@/features/connectors';
 import { cn } from '@/lib/utils';
-import { MemoriesPrefetcher } from '@/components/memories/MemoriesPrefetcher';
-import { ChatBubble } from '@/components/chat/ChatBubble';
+import { MemoriesPrefetcher } from '@/features/memories';
+import { ChatBubble } from '@/features/chat';
 
 // Dynamic imports for panels - not visible on initial load
 const ChatPanel = dynamic(
-  () => import('@/components/chat/ChatPanel').then((mod) => ({ default: mod.ChatPanel })),
+  () => import('@/features/chat').then((mod) => ({ default: mod.ChatPanel })),
   {
     ssr: false,
   },
@@ -27,7 +24,7 @@ const ChatPanel = dynamic(
 
 const NotificationCenter = dynamic(
   () =>
-    import('@/components/notifications/NotificationCenter').then((mod) => ({
+    import('@/features/notifications').then((mod) => ({
       default: mod.NotificationCenter,
     })),
   {
diff --git a/web/app/src/components/layout/MarketplaceHeader.tsx b/web/app/src/components/layout/MarketplaceHeader.tsx
index 91f915dbefd..72ddb0f39ac 100644
--- a/web/app/src/components/layout/MarketplaceHeader.tsx
+++ b/web/app/src/components/layout/MarketplaceHeader.tsx
@@ -2,7 +2,7 @@
 
 import Link from '@tschk/moonshine-next/link';
 import Image from '@tschk/moonshine-next/image';
-import { useAuth } from '@/components/auth/AuthProvider';
+import { useAuth } from '@/features/auth';
 import { cn } from '@/lib/utils';
 
 export function MarketplaceHeader() {
diff --git a/web/app/src/components/layout/MobileBlockOverlay.tsx b/web/app/src/components/layout/MobileBlockOverlay.tsx
deleted file mode 100644
index 74ec2c8fa73..00000000000
--- a/web/app/src/components/layout/MobileBlockOverlay.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { usePathname } from '@tschk/moonshine-next/navigation';
-import Image from '@tschk/moonshine-next/image';
-import { X } from 'lucide-react';
-
-type Platform = 'ios' | 'android' | 'other';
-
-// Paths that should completely bypass mobile detection
-const BYPASS_MOBILE_CHECK_PATHS = [
-  '/record/popout',
-  '/record/popout/transcript',
-  '/apps', // Public marketplace should always be accessible on mobile
-];
-
-const APP_STORE_URL = 'https://apps.apple.com/us/app/friend-ai-wearable/id6502156163';
-const PLAY_STORE_URL = 'https://play.google.com/store/apps/details?id=com.friend.ios';
-
-// Debounce delay for resize detection (ms)
-const RESIZE_DEBOUNCE_MS = 500;
-
-// Session storage key for dismissal
-const DISMISSED_KEY = 'omi_mobile_overlay_dismissed';
-
-function AppleIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
-    </svg>
-  );
-}
-
-function PlayStoreIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-      <path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z" />
-    </svg>
-  );
-}
-
-export function MobileBlockOverlay() {
-  const pathname = usePathname();
-  const [isMobile, setIsMobile] = useState(false);
-  const [platform, setPlatform] = useState<Platform>('other');
-  const [mounted, setMounted] = useState(false);
-  const [isDismissed, setIsDismissed] = useState(false);
-  const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Check if current path should bypass mobile detection entirely
-  const shouldBypass = BYPASS_MOBILE_CHECK_PATHS.some(path => pathname?.startsWith(path));
-
-  useEffect(() => {
-    setMounted(true);
-
-    // Check if already dismissed this session
-    if (typeof window !== 'undefined') {
-      const dismissed = sessionStorage.getItem(DISMISSED_KEY);
-      if (dismissed === 'true') {
-        setIsDismissed(true);
-      }
-    }
-
-    // Check viewport width with debounce
-    const checkMobile = () => {
-      // Clear any pending timeout
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-
-      // Only set mobile state after debounce delay
-      resizeTimeoutRef.current = setTimeout(() => {
-        setIsMobile(window.innerWidth < 768);
-      }, RESIZE_DEBOUNCE_MS);
-    };
-
-    // Initial check without debounce
-    setIsMobile(window.innerWidth < 768);
-
-    window.addEventListener('resize', checkMobile);
-
-    // Detect platform via user agent
-    const ua = navigator.userAgent.toLowerCase();
-    if (/iphone|ipad|ipod/.test(ua)) {
-      setPlatform('ios');
-    } else if (/android/.test(ua)) {
-      setPlatform('android');
-    }
-
-    return () => {
-      window.removeEventListener('resize', checkMobile);
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleDismiss = () => {
-    setIsDismissed(true);
-    if (typeof window !== 'undefined') {
-      sessionStorage.setItem(DISMISSED_KEY, 'true');
-    }
-  };
-
-  // Don't render anything on server, if not mobile, if dismissed, or if on bypass path
-  if (!mounted || !isMobile || isDismissed || shouldBypass) return null;
-
-  const storeUrl = platform === 'android' ? PLAY_STORE_URL : APP_STORE_URL;
-  const storeName = platform === 'android' ? 'Google Play' : 'App Store';
-  const StoreIcon = platform === 'android' ? PlayStoreIcon : AppleIcon;
-
-  return (
-    <div className="fixed inset-0 z-[9999] bg-bg-primary flex flex-col items-center justify-center p-6">
-      {/* Dismiss button - top right corner */}
-      <button
-        onClick={handleDismiss}
-        className="absolute top-4 right-4 z-20 p-2 bg-white/5 hover:bg-white/10 rounded-lg transition-colors"
-        aria-label="Continue to web"
-      >
-        <X className="w-5 h-5 text-gray-400" />
-      </button>
-
-      {/* Background gradient effect */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-white/[0.08] rounded-full blur-[120px]" />
-      </div>
-
-      {/* Main content container */}
-      <div className="relative z-10 flex flex-col items-center justify-center flex-1 max-w-sm text-center">
-        {/* Round logo with breathing glow */}
-        <div className="relative mb-8">
-          <div
-            className="absolute inset-0 rounded-full bg-white/[0.14] blur-xl animate-pulse"
-            style={{ animationDuration: '3s' }}
-          />
-          <div className="w-28 h-28 relative">
-            <Image
-              src="/logo.png"
-              alt="Omi"
-              fill
-              className="object-contain relative z-10 drop-shadow-[0_0_15px_rgba(139,92,246,0.3)]"
-              priority
-            />
-          </div>
-        </div>
-
-        {/* Message */}
-        <h1 className="text-2xl font-semibold text-text-primary mb-3">
-          Omi Web is optimized for desktop.
-        </h1>
-        <p className="text-text-tertiary mb-8">
-          For the best mobile experience, download the Omi app.
-        </p>
-
-        {/* App Store Button */}
-        <a
-          href={storeUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-3 bg-white text-black px-6 py-3 rounded-xl font-medium hover:bg-gray-100 transition-colors mb-4"
-        >
-          <StoreIcon className="w-6 h-6" />
-          <span>Download on {storeName}</span>
-        </a>
-
-        {/* Continue to web button */}
-        <button
-          onClick={handleDismiss}
-          className="text-text-tertiary hover:text-text-secondary transition-colors text-sm"
-        >
-          Continue to web anyway
-        </button>
-      </div>
-
-      {/* Bottom section with logo and links */}
-      <div className="relative z-10 pb-8 flex flex-col items-center gap-4">
-        <Image
-          src="/omi-white.webp"
-          alt="Omi"
-          width={60}
-          height={24}
-          priority
-        />
-        <div className="flex items-center gap-4 text-sm text-text-quaternary">
-          <a
-            href="https://www.omi.me/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-text-tertiary transition-colors"
-          >
-            About
-          </a>
-          <span>·</span>
-          <a
-            href="https://www.omi.me/pages/privacy"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-text-tertiary transition-colors"
-          >
-            Privacy
-          </a>
-          <span>·</span>
-          <a
-            href="https://help.omi.me/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-text-tertiary transition-colors"
-          >
-            Help
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/web/app/src/components/layout/PageToolbar.tsx b/web/app/src/components/layout/PageToolbar.tsx
index 4adc58e7c81..d5917497b59 100644
--- a/web/app/src/components/layout/PageToolbar.tsx
+++ b/web/app/src/components/layout/PageToolbar.tsx
@@ -3,7 +3,7 @@
 import type { ReactNode } from 'react';
 import { Search, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { Input } from '@/components/ui/input';
+import { Input } from '@/shared/ui/input';
 
 export interface PageToolbarSearch {
   value: string;
diff --git a/web/app/src/components/layout/Sidebar.tsx b/web/app/src/components/layout/Sidebar.tsx
index bdb96ea8637..3345757353d 100644
--- a/web/app/src/components/layout/Sidebar.tsx
+++ b/web/app/src/components/layout/Sidebar.tsx
@@ -48,12 +48,12 @@ function DiscordIcon({ className }: { className?: string }) {
     </svg>
   );
 }
-import { useAuth } from '@/components/auth/AuthProvider';
-import { useNotificationContext } from '@/components/notifications/NotificationContext';
+import { useAuth } from '@/features/auth';
+import { useNotificationContext } from '@/features/notifications';
 import { cn } from '@/lib/utils';
-import { SETTINGS_SECTIONS, type SettingsSectionId } from '@/lib/settingsSections';
+import { SETTINGS_SECTIONS, type SettingsSectionId } from '@/features/settings';
 import { PROFILE_MENU_MAX_HEIGHT } from '@/lib/profileMenu';
-import { ConfettiBurst } from '@/components/ui/ConfettiBurst';
+import { ConfettiBurst } from '@/shared/ui/ConfettiBurst';
 
 /** How long the banner takes to swell and pop, and the burst to clear it. */
 const BANNER_BURST_MS = 420;
diff --git a/web/app/src/components/layout/__tests__/Sidebar.test.tsx b/web/app/src/components/layout/__tests__/Sidebar.test.tsx
index c31d60ba3b6..ad26b35c291 100644
--- a/web/app/src/components/layout/__tests__/Sidebar.test.tsx
+++ b/web/app/src/components/layout/__tests__/Sidebar.test.tsx
@@ -19,13 +19,13 @@ vi.mock('@tschk/moonshine-next/image', () => ({
     <img src={src} alt={alt} className={className} />
   ),
 }));
-vi.mock('@/components/auth/AuthProvider', () => ({
+vi.mock('@/features/auth', () => ({
   useAuth: () => ({
     user: { displayName: 'Omi User', email: 'user@example.com', photoURL: null },
     signOut: vi.fn(),
   }),
 }));
-vi.mock('@/components/notifications/NotificationContext', () => ({
+vi.mock('@/features/notifications', () => ({
   useNotificationContext: () => ({ toggleNotificationCenter: vi.fn(), unreadCount: 0 }),
 }));
 
diff --git a/web/app/src/components/marketplace/index.ts b/web/app/src/components/marketplace/index.ts
deleted file mode 100644
index 70e6b3232dc..00000000000
--- a/web/app/src/components/marketplace/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// Types
-export type {
-  ExternalIntegration,
-  PluginReview,
-  Plugin,
-  PluginStat,
-  CapabilityInfo,
-} from './types';
-
-// Category utilities
-export type { CategoryMetadata, CategoryTheme } from './category';
-export {
-  categoryMetadata,
-  getCategoryMetadata,
-  getAdjacentCategories,
-  getCategoryDisplay,
-  getCategoryIcon,
-} from './category';
-
-// Components
-export { default as AppList } from './AppList';
-export { CategoryHeader } from './CategoryHeader';
-export { DeveloperBanner } from './DeveloperBanner';
-export { NewBadge, isNewApp } from './NewBadge';
-export { ScrollableCategoryNav } from './ScrollableCategoryNav';
-export { SearchBar } from './SearchBar';
-
-// Plugin Card Components
-export { PluginCard, FeaturedPluginCard, CompactPluginCard } from './plugin-card';
diff --git a/web/app/src/components/marketplace/plugin-card/index.tsx b/web/app/src/components/marketplace/plugin-card/index.tsx
deleted file mode 100644
index b078b1f5691..00000000000
--- a/web/app/src/components/marketplace/plugin-card/index.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import {
-  Star,
-  Download,
-  Brain,
-  Cpu,
-  Bell,
-  Plug2,
-  MessageSquare,
-  Info,
-} from 'lucide-react';
-import Image from '@tschk/moonshine-next/image';
-import Link from '@tschk/moonshine-next/link';
-import type { Plugin } from '../types';
-import { formatInstalls } from '../utils/format';
-
-export interface PluginCardProps {
-  plugin: Plugin;
-}
-
-const getCapabilityColor = (capability: string): string => {
-  const colors: Record<string, string> = {
-    'ai-powered': 'bg-amber-500/15 text-amber-300',
-    memories: 'bg-rose-500/15 text-rose-300',
-    notification: 'bg-emerald-500/15 text-emerald-300',
-    integration: 'bg-sky-500/15 text-sky-300',
-    chat: 'bg-teal-500/15 text-teal-300',
-  };
-  return colors[capability.toLowerCase()] ?? 'bg-gray-700/20 text-gray-300';
-};
-
-const formatCapabilityName = (capability: string): string => {
-  const nameMap: Record<string, string> = {
-    memories: 'memories',
-    external_integration: 'integration',
-    proactive_notification: 'notification',
-    chat: 'chat',
-  };
-  return nameMap[capability.toLowerCase()] ?? capability;
-};
-
-const getCapabilityIcon = (capability: string) => {
-  const icons: Record<string, React.ElementType> = {
-    'ai-powered': Brain,
-    memories: Cpu,
-    notification: Bell,
-    integration: Plug2,
-    chat: MessageSquare,
-  };
-  return icons[capability.toLowerCase()] ?? Info;
-};
-
-export const PluginCard = memo(function PluginCard({ plugin }: PluginCardProps) {
-  return (
-    <Link
-      href={`/apps/${plugin.id}`}
-      className="group relative flex h-full w-full flex-col overflow-hidden rounded-xl bg-[#1A1F2E] text-left shadow-lg transition-all duration-300 hover:translate-y-[-4px] hover:scale-[1.02] hover:bg-[#242938] hover:shadow-2xl hover:shadow-black/30"
-    >
-      <div className="absolute inset-0 bg-gradient-to-br from-transparent to-black/5 transition-opacity duration-300 group-hover:opacity-70" />
-
-      <div className="z-10 flex flex-1 flex-col p-6">
-        <div className="mb-6">
-          <div className="flex items-start space-x-4">
-            <Image
-              src={plugin.image || 'https://via.placeholder.com/80'}
-              alt={plugin.name}
-              className="h-14 w-14 rounded-xl object-cover shadow-lg transition-transform duration-300 group-hover:scale-110 group-hover:shadow-xl"
-              width={56}
-              height={56}
-            />
-            <div className="flex-1">
-              <div className="flex items-center gap-2">
-                <h2 className="line-clamp-2 text-lg font-bold leading-tight text-white">
-                  {plugin.name}
-                </h2>
-                {plugin.is_paid && (
-                  <span className="inline-flex shrink-0 items-center gap-1 rounded bg-amber-500/10 px-1.5 py-0.5 text-xs font-medium text-amber-400">
-                    ${plugin.price?.toFixed(2)}
-                    {plugin.payment_plan === 'monthly_recurring' ? '/mo' : ''}
-                  </span>
-                )}
-              </div>
-              <p className="mt-2 line-clamp-2 text-sm text-gray-400 group-hover:text-gray-300">
-                {plugin.description}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="mb-4 border-t border-gray-800/50 transition-colors duration-300 group-hover:border-gray-700/70" />
-
-        <div className="mb-6 flex h-[2.5rem] flex-wrap items-start gap-1.5">
-          {Array.from(plugin.capabilities).map((cap) => {
-            const formattedCap = formatCapabilityName(cap);
-            const Icon = getCapabilityIcon(formattedCap);
-            return (
-              <span
-                key={cap}
-                className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium transition-all duration-300 group-hover:scale-105 ${getCapabilityColor(
-                  formattedCap,
-                )}`}
-              >
-                <Icon className="h-3 w-3" />
-                {formattedCap}
-              </span>
-            );
-          })}
-        </div>
-
-        <div className="mt-auto">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-4">
-              {plugin.rating_count > 0 ? (
-                <div className="flex items-center">
-                  <Star className="mr-1 h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
-                  <span className="text-sm font-medium text-white">
-                    {plugin.rating_avg?.toFixed(1)}
-                  </span>
-                </div>
-              ) : (
-                <span className="text-sm text-[#6C8EEF]">New</span>
-              )}
-              <div className="flex items-center text-gray-400">
-                <Download className="mr-1 h-3.5 w-3.5" />
-                <span className="text-sm">{formatInstalls(plugin.installs)}</span>
-              </div>
-            </div>
-            <div className="inline-flex items-center justify-center rounded-md bg-[#2A3142] px-4 py-1.5 text-xs font-medium text-white transition-all duration-300 group-hover:scale-105 group-hover:bg-[#353D52]">
-              Learn More
-            </div>
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-});
-
-// Re-export other card variants
-export { FeaturedPluginCard } from './FeaturedPluginCard';
-export { CompactPluginCard } from './CompactPluginCard';
diff --git a/web/app/src/components/recaps/sections/OverviewSection.tsx b/web/app/src/components/recaps/sections/OverviewSection.tsx
deleted file mode 100644
index f3846f4ed8a..00000000000
--- a/web/app/src/components/recaps/sections/OverviewSection.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { MessageSquare, Clock, CheckSquare } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import type { DailySummary } from '@/types/recap';
-
-interface OverviewSectionProps {
-  recap: DailySummary;
-}
-
-// Format duration in minutes to human-readable
-function formatDuration(minutes: number): string {
-  if (minutes < 60) {
-    return `${minutes} min`;
-  }
-  const hours = Math.floor(minutes / 60);
-  const mins = minutes % 60;
-  return mins > 0 ? `${hours}h ${mins}m` : `${hours} hours`;
-}
-
-export function OverviewSection({ recap }: OverviewSectionProps) {
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.2 }}
-      className="space-y-4"
-    >
-      {/* Stats row */}
-      <div className="grid grid-cols-3 gap-3">
-        {/* Conversations */}
-        <div
-          className={cn(
-            'flex flex-col items-center justify-center p-3 rounded-xl',
-            'bg-gradient-to-b from-white/[0.03] to-white/[0.01]',
-            'border border-white/[0.04]',
-          )}
-        >
-          <MessageSquare className="w-5 h-5 text-text-primary mb-1" />
-          <span className="text-lg font-semibold text-text-primary">
-            {recap.stats.total_conversations}
-          </span>
-          <span className="text-[10px] text-text-tertiary">Conversations</span>
-        </div>
-
-        {/* Duration */}
-        <div
-          className={cn(
-            'flex flex-col items-center justify-center p-3 rounded-xl',
-            'bg-gradient-to-b from-white/[0.03] to-white/[0.01]',
-            'border border-white/[0.04]',
-          )}
-        >
-          <Clock className="w-5 h-5 text-blue-400 mb-1" />
-          <span className="text-lg font-semibold text-text-primary">
-            {formatDuration(recap.stats.total_duration_minutes)}
-          </span>
-          <span className="text-[10px] text-text-tertiary">Recorded</span>
-        </div>
-
-        {/* Action Items */}
-        <div
-          className={cn(
-            'flex flex-col items-center justify-center p-3 rounded-xl',
-            'bg-gradient-to-b from-white/[0.03] to-white/[0.01]',
-            'border border-white/[0.04]',
-          )}
-        >
-          <CheckSquare className="w-5 h-5 text-success mb-1" />
-          <span className="text-lg font-semibold text-text-primary">
-            {recap.stats.action_items_count}
-          </span>
-          <span className="text-[10px] text-text-tertiary">Action Items</span>
-        </div>
-      </div>
-
-      {/* Overview text */}
-      {recap.overview && (
-        <div
-          className={cn(
-            'p-4 rounded-xl',
-            'bg-gradient-to-b from-white/[0.03] to-white/[0.01]',
-            'border border-white/[0.04]',
-          )}
-        >
-          <p className="text-sm text-text-secondary leading-relaxed">{recap.overview}</p>
-        </div>
-      )}
-    </motion.div>
-  );
-}
diff --git a/web/app/src/components/recording/index.ts b/web/app/src/components/recording/index.ts
deleted file mode 100644
index 69053b0de0e..00000000000
--- a/web/app/src/components/recording/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Recording feature exports
-export { RecordingProvider, useRecordingContext } from './RecordingContext';
-export type { AudioMode, RecordingState, TranscriptSegment } from './RecordingContext';
-export { RecordingController } from './RecordingController';
-export { RecordingWidget } from './RecordingWidget';
-export { AudioModeSelector } from './AudioModeSelector';
-export { RecordingControls } from './RecordingControls';
-export { LiveTranscript, LiveTranscriptCompact } from './LiveTranscript';
-export { HeaderRecordingIndicator } from './HeaderRecordingIndicator';
diff --git a/web/app/src/components/settings/PlansSheet.tsx b/web/app/src/components/settings/PlansSheet.tsx
deleted file mode 100644
index 4ff2ea91f5a..00000000000
--- a/web/app/src/components/settings/PlansSheet.tsx
+++ /dev/null
@@ -1,492 +0,0 @@
-'use client';
-
-import * as Dialog from '@radix-ui/react-dialog';
-import { motion, AnimatePresence } from 'framer-motion';
-import { X, Check, Crown, CreditCard, Loader2, AlertCircle } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { useState, useEffect } from 'react';
-import {
-  getAvailablePlans,
-  createCheckoutSession,
-  upgradeSubscription,
-  cancelSubscription,
-  getCustomerPortal,
-  getUserSubscription,
-} from '@/lib/api';
-import type {
-  UserSubscription,
-  PricingOption,
-  AvailablePlansResponse,
-} from '@/types/user';
-import { decodePlan, planGrantsPaidCapability } from '@/types/user';
-import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
-
-interface PlansSheetProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  subscription: UserSubscription | null;
-  onSubscriptionUpdate: () => void;
-  cachedPlans?: PricingOption[] | null;
-}
-
-export function PlansSheet({
-  open,
-  onOpenChange,
-  subscription,
-  onSubscriptionUpdate,
-  cachedPlans,
-}: PlansSheetProps) {
-  const [pricingOptions, setPricingOptions] = useState<PricingOption[]>([]);
-  const [selectedPriceId, setSelectedPriceId] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingPlans, setIsLoadingPlans] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
-  const [isCanceling, setIsCanceling] = useState(false);
-
-  const planIdentity = subscription
-    ? subscription.plan_identity ?? decodePlan(subscription.plan)
-    : null;
-  const isUnlimited = planIdentity ? planGrantsPaidCapability(planIdentity) : false;
-  const isUnknownPlan = planIdentity?.kind === 'unknown';
-  const isCanceling_ = subscription?.cancel_at_period_end;
-
-  useEffect(() => {
-    let cancelled = false;
-
-    if (open) {
-      if (isUnknownPlan) {
-        setPricingOptions([]);
-        setSelectedPriceId(null);
-        setError(null);
-        setIsLoadingPlans(false);
-        return () => {
-          cancelled = true;
-        };
-      }
-
-      // Use cached plans if available, otherwise fetch
-      if (cachedPlans && cachedPlans.length > 0) {
-        if (cancelled) return;
-        setPricingOptions(cachedPlans);
-        const activePlan = cachedPlans.find(
-          (p) => p.is_active || p.id === subscription?.current_price_id,
-        );
-        if (activePlan) {
-          setSelectedPriceId(activePlan.id);
-        } else {
-          setSelectedPriceId(cachedPlans[0].id);
-        }
-        setIsLoadingPlans(false);
-      } else {
-        loadPlans(cancelled);
-      }
-    }
-    return () => {
-      cancelled = true;
-    };
-  }, [open, cachedPlans, subscription?.current_price_id, isUnknownPlan]);
-
-  const loadPlans = async (cancelled = false) => {
-    setIsLoadingPlans(true);
-    setError(null);
-    try {
-      const response = await getAvailablePlans();
-      if (cancelled) return;
-      if (response && response.plans) {
-        setPricingOptions(response.plans);
-        // Pre-select current active plan or first plan
-        const activePlan = response.plans.find(
-          (p) => p.is_active || p.id === subscription?.current_price_id,
-        );
-        if (activePlan) {
-          setSelectedPriceId(activePlan.id);
-        } else if (response.plans.length > 0) {
-          setSelectedPriceId(response.plans[0].id);
-        }
-      }
-    } catch (err) {
-      setError('Failed to load plans');
-    } finally {
-      setIsLoadingPlans(false);
-    }
-  };
-
-  const handleSubscribe = async () => {
-    if (isUnknownPlan || !selectedPriceId) return;
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      // Find if selected plan is the currently active one
-      const selectedOption = pricingOptions.find((p) => p.id === selectedPriceId);
-      const isCurrentPlan = selectedOption?.is_active;
-
-      if (isCanceling_ && selectedPriceId !== subscription?.current_price_id) {
-        setError('Plan changes are available after your current subscription ends.');
-        return;
-      }
-
-      // If already subscribed and selecting a different plan, use upgrade endpoint
-      if (isUnlimited && !isCanceling_ && !isCurrentPlan) {
-        const result = await upgradeSubscription(selectedPriceId);
-        if (result?.status === 'success' || result?.scheduled_start) {
-          onSubscriptionUpdate();
-          onOpenChange(false);
-        } else {
-          setError(result?.message || 'Failed to upgrade plan');
-        }
-      } else {
-        // New subscription or reactivation
-        const result = await createCheckoutSession(selectedPriceId);
-        if (result?.url) {
-          // Open Stripe checkout in new tab
-          window.open(result.url, '_blank');
-          onOpenChange(false);
-          // Listen for window focus to refresh subscription
-          const handleFocus = () => {
-            onSubscriptionUpdate();
-            window.removeEventListener('focus', handleFocus);
-          };
-          window.addEventListener('focus', handleFocus);
-        } else if (result?.status === 'reactivated') {
-          // Subscription was reactivated
-          onSubscriptionUpdate();
-          onOpenChange(false);
-        } else {
-          setError('Failed to create checkout session');
-        }
-      }
-    } catch (err) {
-      setError('An error occurred. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleManagePayment = async () => {
-    setIsLoading(true);
-    try {
-      const result = await getCustomerPortal();
-      if (result?.url) {
-        window.open(result.url, '_blank');
-      } else {
-        setError('Failed to open payment portal');
-      }
-    } catch (err) {
-      setError('Failed to open payment portal');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancelSubscription = async () => {
-    setIsCanceling(true);
-    try {
-      const result = await cancelSubscription();
-      if (result?.status === 'success' || result?.cancel_at_period_end) {
-        onSubscriptionUpdate();
-        setShowCancelConfirm(false);
-        onOpenChange(false);
-      } else {
-        setError(result?.message || 'Failed to cancel subscription');
-      }
-    } catch (err) {
-      setError('Failed to cancel subscription');
-    } finally {
-      setIsCanceling(false);
-    }
-  };
-
-  const formatDate = (timestamp: number) => {
-    return new Date(timestamp * 1000).toLocaleDateString('en-US', {
-      month: 'long',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  // Sort pricing options: monthly first, then annual
-  const sortedOptions = [...pricingOptions].sort((a, b) => {
-    const aIsAnnual = a.interval === 'year' || a.title?.toLowerCase().includes('annual');
-    const bIsAnnual = b.interval === 'year' || b.title?.toLowerCase().includes('annual');
-    return (aIsAnnual ? 1 : 0) - (bIsAnnual ? 1 : 0);
-  });
-
-  // Get the selected option
-  const selectedOption = pricingOptions.find((p) => p.id === selectedPriceId);
-
-  // Default features for unlimited plan
-  const defaultFeatures = [
-    'Unlimited conversations',
-    'Unlimited memories',
-    'Priority processing',
-    'Advanced insights',
-  ];
-
-  return (
-    <>
-      <Dialog.Root open={open} onOpenChange={onOpenChange}>
-        <AnimatePresence>
-          {open && (
-            <Dialog.Portal forceMount>
-              <Dialog.Overlay asChild>
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.15 }}
-                  className="fixed inset-0 bg-black/50 z-[100]"
-                />
-              </Dialog.Overlay>
-              <Dialog.Content asChild>
-                <motion.div
-                  initial={{ opacity: 0, scale: 0.95, y: 10 }}
-                  animate={{ opacity: 1, scale: 1, y: 0 }}
-                  exit={{ opacity: 0, scale: 0.95, y: 10 }}
-                  transition={{ duration: 0.15, ease: 'easeOut' }}
-                  className={cn(
-                    'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[101]',
-                    'w-[90vw] max-w-[500px] max-h-[85vh] overflow-y-auto',
-                    'bg-bg-secondary rounded-2xl',
-                    'border border-bg-tertiary',
-                    'shadow-2xl',
-                    'focus:outline-none',
-                  )}
-                >
-                  {/* Header */}
-                  <div className="sticky top-0 bg-bg-secondary z-10 px-6 pt-6 pb-4 border-b border-bg-tertiary">
-                    <Dialog.Close asChild>
-                      <button
-                        className="absolute top-4 right-4 p-1.5 rounded-lg hover:bg-bg-tertiary transition-colors"
-                        aria-label="Close"
-                      >
-                        <X className="w-4 h-4 text-text-quaternary" />
-                      </button>
-                    </Dialog.Close>
-
-                    <div className="flex items-center gap-3">
-                      <div className="w-10 h-10 rounded-full bg-white/[0.08] flex items-center justify-center">
-                        <Crown className="w-5 h-5 text-text-primary" />
-                      </div>
-                      <div>
-                        <Dialog.Title className="text-lg font-semibold text-text-primary">
-                          {isUnknownPlan
-                            ? 'Plan unavailable'
-                            : isUnlimited && !isCanceling_
-                            ? 'Manage Your Plan'
-                            : 'Choose Your Plan'}
-                        </Dialog.Title>
-                        {isUnlimited && subscription?.current_period_end && (
-                          <p className="text-xs text-text-quaternary">
-                            {isCanceling_
-                              ? `Cancels on ${formatDate(subscription.current_period_end)}`
-                              : `Renews ${formatDate(subscription.current_period_end)}`}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Content */}
-                  <div className="p-6 space-y-6">
-                    {isUnknownPlan ? (
-                      <div className="py-8 text-center">
-                        <p className="text-sm text-text-secondary">
-                          This account uses a plan that this version of Omi does not
-                          recognize yet. Plan options are unavailable until the plan can
-                          be identified.
-                        </p>
-                      </div>
-                    ) : isLoadingPlans ? (
-                      <div className="flex items-center justify-center py-12">
-                        <Loader2 className="w-6 h-6 text-text-primary animate-spin" />
-                      </div>
-                    ) : (
-                      <>
-                        {/* Plan Selection */}
-                        <div className="grid grid-cols-2 gap-3">
-                          {sortedOptions.map((option) => {
-                            const isSelected = selectedPriceId === option.id;
-                            const isCurrent =
-                              option.is_active ||
-                              option.id === subscription?.current_price_id;
-                            const isAnnual =
-                              option.interval === 'year' ||
-                              option.title?.toLowerCase().includes('annual');
-
-                            return (
-                              <button
-                                key={option.id}
-                                onClick={() => setSelectedPriceId(option.id)}
-                                disabled={isCanceling_ && !isCurrent}
-                                className={cn(
-                                  'relative p-4 rounded-xl border-2 text-left transition-all',
-                                  isSelected
-                                    ? 'border-white/25 bg-white/[0.08]'
-                                    : 'border-bg-tertiary hover:border-bg-quaternary bg-bg-tertiary/50',
-                                  isCanceling_ &&
-                                    !isCurrent &&
-                                    'cursor-not-allowed opacity-50',
-                                )}
-                              >
-                                {isAnnual && (
-                                  <span className="absolute -top-2 right-2 px-2 py-0.5 bg-text-primary text-bg-primary text-[10px] font-medium rounded-full">
-                                    POPULAR
-                                  </span>
-                                )}
-
-                                <h4 className="font-medium text-text-primary mb-1">
-                                  {option.title}
-                                </h4>
-                                <p className="text-lg font-bold text-text-primary">
-                                  {option.price_string}
-                                </p>
-                                {option.description && (
-                                  <p className="text-xs text-text-primary mt-1">
-                                    {option.description}
-                                  </p>
-                                )}
-
-                                {isCurrent && (
-                                  <span className="inline-flex items-center gap-1 mt-2 px-2 py-0.5 bg-success/10 text-success text-xs rounded-full">
-                                    <Check className="w-3 h-3" />
-                                    Current
-                                  </span>
-                                )}
-                              </button>
-                            );
-                          })}
-                        </div>
-
-                        {isCanceling_ && subscription?.current_period_end && (
-                          <p className="text-sm text-text-tertiary">
-                            You can reactivate your current plan now. Plan changes are
-                            available after {formatDate(subscription.current_period_end)}.
-                          </p>
-                        )}
-
-                        {/* Features List */}
-                        <div className="space-y-2">
-                          <h4 className="text-sm font-medium text-text-secondary">
-                            Features:
-                          </h4>
-                          <ul className="space-y-2">
-                            {defaultFeatures.map((feature, idx) => (
-                              <li key={idx} className="flex items-start gap-2">
-                                <Check className="w-4 h-4 text-text-primary flex-shrink-0 mt-0.5" />
-                                <span className="text-sm text-text-tertiary">
-                                  {feature}
-                                </span>
-                              </li>
-                            ))}
-                          </ul>
-                        </div>
-
-                        {/* Error Message */}
-                        {error && (
-                          <div className="flex items-center gap-2 p-3 bg-error/10 rounded-lg">
-                            <AlertCircle className="w-4 h-4 text-error flex-shrink-0" />
-                            <p className="text-sm text-error">{error}</p>
-                          </div>
-                        )}
-
-                        {/* Primary Action */}
-                        <button
-                          onClick={handleSubscribe}
-                          disabled={
-                            isLoading ||
-                            !selectedPriceId ||
-                            (isUnlimited && !isCanceling_ && selectedOption?.is_active)
-                          }
-                          className={cn(
-                            'w-full py-3 rounded-xl font-medium transition-colors',
-                            'bg-text-primary text-bg-primary',
-                            'hover:bg-text-primary/90',
-                            'disabled:opacity-50 disabled:cursor-not-allowed',
-                          )}
-                        >
-                          {isLoading ? (
-                            <span className="flex items-center justify-center gap-2">
-                              <Loader2 className="w-4 h-4 animate-spin" />
-                              Processing...
-                            </span>
-                          ) : isCanceling_ ? (
-                            'Reactivate Subscription'
-                          ) : isUnlimited ? (
-                            selectedOption?.is_active ? (
-                              'Current Plan'
-                            ) : (
-                              'Change Plan'
-                            )
-                          ) : (
-                            'Continue to Payment'
-                          )}
-                        </button>
-
-                        {!isUnlimited && subscription?.stripe_subscription_id && (
-                          <button
-                            onClick={handleManagePayment}
-                            disabled={isLoading}
-                            className="w-full flex items-center justify-center gap-2 py-2.5 text-text-secondary hover:text-text-primary transition-colors"
-                          >
-                            <CreditCard className="w-4 h-4" />
-                            <span className="text-sm">Manage Billing &amp; Invoices</span>
-                          </button>
-                        )}
-
-                        {/* Secondary Actions */}
-                        {isUnlimited && (
-                          <div className="pt-4 border-t border-bg-tertiary space-y-3">
-                            <button
-                              onClick={handleManagePayment}
-                              disabled={isLoading}
-                              className="w-full flex items-center justify-center gap-2 py-2.5 text-text-secondary hover:text-text-primary transition-colors"
-                            >
-                              <CreditCard className="w-4 h-4" />
-                              <span className="text-sm">
-                                Manage Billing &amp; Invoices
-                              </span>
-                            </button>
-
-                            {!isCanceling_ && (
-                              <button
-                                onClick={() => setShowCancelConfirm(true)}
-                                disabled={isLoading}
-                                className="w-full py-2.5 text-sm text-error/70 hover:text-error transition-colors"
-                              >
-                                Cancel Subscription
-                              </button>
-                            )}
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </div>
-                </motion.div>
-              </Dialog.Content>
-            </Dialog.Portal>
-          )}
-        </AnimatePresence>
-      </Dialog.Root>
-
-      {/* Cancel Confirmation Dialog */}
-      <ConfirmDialog
-        open={showCancelConfirm}
-        onOpenChange={setShowCancelConfirm}
-        title="Cancel Subscription?"
-        description={
-          subscription?.current_period_end
-            ? `Your subscription will remain active until ${formatDate(subscription.current_period_end)}. After that, you'll be moved to the Free plan.`
-            : "Are you sure you want to cancel your subscription? You'll lose access to unlimited features."
-        }
-        confirmLabel="Cancel Subscription"
-        cancelLabel="Keep Subscription"
-        variant="danger"
-        onConfirm={handleCancelSubscription}
-        isLoading={isCanceling}
-      />
-    </>
-  );
-}
diff --git a/web/app/src/components/settings/SettingsPage.tsx b/web/app/src/components/settings/SettingsPage.tsx
deleted file mode 100644
index e92c41d3ba2..00000000000
--- a/web/app/src/components/settings/SettingsPage.tsx
+++ /dev/null
@@ -1,3571 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { useRouter, useSearchParams } from '@tschk/moonshine-next/navigation';
-import Image from '@tschk/moonshine-next/image';
-import Link from '@tschk/moonshine-next/link';
-import {
-  User,
-  Bell,
-  Shield,
-  Code,
-  LogOut,
-  Trash2,
-  Globe,
-  Clock,
-  ChevronDown,
-  Loader2,
-  ExternalLink,
-  Copy,
-  Check,
-  AlertTriangle,
-  BarChart3,
-  Puzzle,
-  Plus,
-  X,
-  Key,
-  Webhook,
-  BookOpen,
-  MessageSquare,
-  Calendar,
-  Github,
-  Twitter,
-  Settings,
-  Brain,
-  Server,
-  Monitor,
-  Download,
-  Network,
-  Mic,
-  Radio,
-  FileText,
-  FlaskConical,
-  Activity,
-  UserPlus,
-  Lightbulb,
-  Target,
-  ArrowLeft,
-  Crown,
-  ChevronRight,
-  Zap,
-  CreditCard,
-  Scale,
-} from 'lucide-react';
-import { useAuth } from '@/components/auth/AuthProvider';
-import { useToast } from '@/components/ui/Toast';
-import { cn } from '@/lib/utils';
-import { PageHeader } from '@/components/layout/PageHeader';
-import {
-  CLAUDE_CONNECTOR_OAUTH,
-  SECTION_INFO,
-  SIGNED_OUT_DESTINATION,
-  isSettingsSectionId,
-  type SettingsSectionId,
-} from '@/lib/settingsSections';
-import {
-  getUserLanguage,
-  setUserLanguage,
-  getDailySummarySettings,
-  updateDailySummarySettings,
-  getRecordingPermission,
-  setRecordingPermission,
-  getTrainingDataOptIn,
-  setTrainingDataOptIn,
-  deleteAccount,
-  getAllUsageData,
-  getUserSubscription,
-  getCustomVocabulary,
-  updateCustomVocabulary,
-  getDeveloperWebhook,
-  getDeveloperWebhooksStatus,
-  setDeveloperWebhook,
-  enableDeveloperWebhook,
-  disableDeveloperWebhook,
-  getDeveloperApiKeys,
-  createDeveloperApiKey,
-  deleteDeveloperApiKey,
-  getMcpApiKeys,
-  createMcpApiKey,
-  deleteMcpApiKey,
-  exportAllData,
-  deleteKnowledgeGraph,
-  getAvailablePlans,
-  createCheckoutSession,
-  upgradeSubscription,
-  cancelSubscription,
-  getCustomerPortal,
-} from '@/lib/api';
-import { SUPPORTED_LANGUAGES, API_KEY_SCOPES } from '@/types/user';
-import { decodePlan, planGrantsPaidCapability } from '@/types/user';
-import type {
-  DailySummarySettings,
-  UserUsage,
-  UserSubscription,
-  AllUsageData,
-  DeveloperWebhooks,
-  DeveloperApiKey,
-  McpApiKey,
-  UsageHistoryPoint,
-  PricingOption,
-} from '@/types/user';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-type SettingsSection = SettingsSectionId;
-
-// ============================================================================
-// Reusable Components
-// ============================================================================
-
-function Toggle({
-  enabled,
-  onChange,
-  disabled = false,
-}: {
-  enabled: boolean;
-  onChange: (enabled: boolean) => void;
-  disabled?: boolean;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={() => !disabled && onChange(!enabled)}
-      disabled={disabled}
-      className={cn(
-        'relative w-11 h-6 rounded-full transition-all duration-200 flex-shrink-0',
-        enabled
-          ? 'bg-text-primary shadow-[0_0_12px_rgba(255,255,255,0.25)]'
-          : 'bg-white/[0.08]',
-        disabled && 'opacity-50 cursor-not-allowed',
-      )}
-    >
-      <div
-        className={cn(
-          'absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200 shadow-sm',
-          enabled ? 'left-[22px]' : 'left-0.5',
-        )}
-      />
-    </button>
-  );
-}
-
-function Card({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        'rounded-2xl p-5',
-        // Layered background for depth instead of harsh border
-        'bg-gradient-to-b from-white/[0.03] to-white/[0.01]',
-        // Soft shadow stack
-        'shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_2px_4px_rgba(0,0,0,0.1),0_8px_16px_rgba(0,0,0,0.1)]',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-function SettingRow({
-  label,
-  description,
-  children,
-}: {
-  label: string;
-  description?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex items-center justify-between py-4 border-b border-white/[0.04] last:border-0">
-      <div className="flex-1 min-w-0 mr-4">
-        <p className="text-[15px] text-white/85 font-medium">{label}</p>
-        {description && (
-          <p className="text-[13px] text-white/40 mt-0.5 leading-relaxed">
-            {description}
-          </p>
-        )}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-function Dropdown({
-  value,
-  options,
-  onChange,
-  placeholder = 'Select...',
-}: {
-  value: string;
-  options: { value: string; label: string }[];
-  onChange: (value: string) => void;
-  placeholder?: string;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const selectedOption = options.find((o) => o.value === value);
-
-  return (
-    <div className="relative" ref={dropdownRef}>
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className={cn(
-          'flex items-center justify-between gap-2 px-4 py-2.5 rounded-xl',
-          'bg-white/[0.04] ring-1 ring-white/[0.06]',
-          'text-white/80 min-w-[160px]',
-          'hover:bg-white/[0.06] transition-colors',
-        )}
-      >
-        <span className="truncate text-sm">{selectedOption?.label || placeholder}</span>
-        <ChevronDown
-          className={cn(
-            'w-4 h-4 text-white/40 transition-transform',
-            isOpen && 'rotate-180',
-          )}
-        />
-      </button>
-
-      {isOpen && (
-        <div
-          className={cn(
-            'absolute z-50 w-full mt-2 py-1.5 rounded-xl max-h-64 overflow-y-auto',
-            'bg-[#1a1a1f]/95 backdrop-blur-xl',
-            'shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_10px_30px_-5px_rgba(0,0,0,0.5)]',
-          )}
-        >
-          {options.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              onClick={() => {
-                onChange(option.value);
-                setIsOpen(false);
-              }}
-              className={cn(
-                'w-full px-4 py-2.5 text-left transition-colors flex items-center justify-between text-sm',
-                option.value === value
-                  ? 'bg-white/[0.08] text-white'
-                  : 'text-white/70 hover:bg-white/[0.04] hover:text-white/90',
-              )}
-            >
-              <span>{option.label}</span>
-              {option.value === value && (
-                <Check className="w-4 h-4 text-text-secondary" />
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function HourPicker({
-  value,
-  onChange,
-}: {
-  value: number;
-  onChange: (hour: number) => void;
-}) {
-  const hours = Array.from({ length: 24 }, (_, i) => {
-    const hour = i;
-    const period = hour >= 12 ? 'PM' : 'AM';
-    const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-    return {
-      value: hour.toString(),
-      label: `${displayHour}:00 ${period}`,
-    };
-  });
-
-  return (
-    <Dropdown
-      value={value.toString()}
-      options={hours}
-      onChange={(v) => onChange(parseInt(v))}
-      placeholder="Select time"
-    />
-  );
-}
-
-function ConfirmDialog({
-  isOpen,
-  title,
-  message,
-  confirmLabel,
-  onConfirm,
-  onCancel,
-  isDestructive = false,
-  isLoading = false,
-}: {
-  isOpen: boolean;
-  title: string;
-  message: string;
-  confirmLabel: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-  isDestructive?: boolean;
-  isLoading?: boolean;
-}) {
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/60" onClick={onCancel} />
-      <div className="relative bg-bg-secondary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl border border-white/[0.06]">
-        <div className="flex items-start gap-4 mb-4">
-          <div
-            className={cn(
-              'p-2 rounded-full',
-              isDestructive ? 'bg-red-500/10' : 'bg-white/[0.08]',
-            )}
-          >
-            <AlertTriangle
-              className={cn(
-                'w-6 h-6',
-                isDestructive ? 'text-red-400' : 'text-text-secondary',
-              )}
-            />
-          </div>
-          <div>
-            <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
-            <p className="text-text-secondary mt-1">{message}</p>
-          </div>
-        </div>
-        <div className="flex justify-end gap-3">
-          <button
-            onClick={onCancel}
-            disabled={isLoading}
-            className={cn(
-              'px-4 py-2 rounded-xl font-medium',
-              'bg-bg-tertiary text-text-primary',
-              'hover:bg-bg-quaternary transition-colors',
-              'disabled:opacity-50',
-            )}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={onConfirm}
-            disabled={isLoading}
-            className={cn(
-              'px-4 py-2 rounded-xl font-medium flex items-center gap-2',
-              isDestructive
-                ? 'bg-red-500 text-white hover:bg-red-600'
-                : 'bg-text-primary text-bg-primary hover:bg-text-primary/90',
-              'transition-colors disabled:opacity-50',
-            )}
-          >
-            {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
-            {confirmLabel}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// Profile Section
-// ============================================================================
-
-function ProfileSection({
-  user,
-  onCopyUserId,
-  language,
-  vocabulary,
-  onLanguageChange,
-  onAddWord,
-  onRemoveWord,
-  dailySummary,
-  onDailySummaryToggle,
-  onDailySummaryHourChange,
-}: {
-  user: any;
-  onCopyUserId: () => void;
-  language: string;
-  vocabulary: string[];
-  onLanguageChange: (lang: string) => void;
-  onAddWord: (word: string) => void;
-  onRemoveWord: (word: string) => void;
-  dailySummary: DailySummarySettings;
-  onDailySummaryToggle: (enabled: boolean) => void;
-  onDailySummaryHourChange: (hour: number) => void;
-}) {
-  const [copiedUserId, setCopiedUserId] = useState(false);
-  const [newWord, setNewWord] = useState('');
-
-  const handleCopy = () => {
-    onCopyUserId();
-    setCopiedUserId(true);
-    setTimeout(() => setCopiedUserId(false), 2000);
-  };
-
-  const handleAddWord = () => {
-    if (newWord.trim()) {
-      onAddWord(newWord.trim());
-      setNewWord('');
-    }
-  };
-
-  const languageOptions = SUPPORTED_LANGUAGES.map((l) => ({
-    value: l.code,
-    label: l.name,
-  }));
-
-  return (
-    <div className="space-y-8">
-      {/* Account Info */}
-      <div id="account-info" className="space-y-3 scroll-mt-4">
-        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
-          Account
-        </h3>
-        <Card>
-          <div className="flex items-center gap-5">
-            <div className="w-20 h-20 rounded-full overflow-hidden bg-bg-tertiary ring-2 ring-white/25 flex-shrink-0">
-              {user?.photoURL ? (
-                <Image
-                  src={user.photoURL}
-                  alt={user.displayName || 'User'}
-                  width={80}
-                  height={80}
-                  className="object-cover w-full h-full"
-                />
-              ) : (
-                <div className="w-full h-full flex items-center justify-center text-text-tertiary text-2xl font-medium">
-                  {user?.displayName?.charAt(0) || 'U'}
-                </div>
-              )}
-            </div>
-            <div className="flex-1 min-w-0">
-              <h3 className="text-lg font-semibold text-text-primary truncate">
-                {user?.displayName || 'User'}
-              </h3>
-              <p className="text-text-tertiary truncate">{user?.email}</p>
-            </div>
-          </div>
-        </Card>
-
-        <Card>
-          <SettingRow label="User ID" description="Your unique identifier">
-            <div className="flex items-center gap-2">
-              <code className="text-sm text-text-tertiary font-mono bg-bg-tertiary px-3 py-1.5 rounded-lg">
-                {user?.uid?.slice(0, 8)}...{user?.uid?.slice(-4)}
-              </code>
-              <button
-                onClick={handleCopy}
-                className={cn(
-                  'p-2 rounded-lg transition-colors',
-                  copiedUserId
-                    ? 'bg-green-500/10 text-green-400'
-                    : 'bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary',
-                )}
-              >
-                {copiedUserId ? (
-                  <Check className="w-4 h-4" />
-                ) : (
-                  <Copy className="w-4 h-4" />
-                )}
-              </button>
-            </div>
-          </SettingRow>
-        </Card>
-      </div>
-
-      {/* Language & Transcription */}
-      <div id="language" className="space-y-3 scroll-mt-4">
-        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
-          Language & Transcription
-        </h3>
-        <Card>
-          <SettingRow
-            label="Primary Language"
-            description="Default language for transcription"
-          >
-            <Dropdown
-              value={language}
-              options={languageOptions}
-              onChange={onLanguageChange}
-            />
-          </SettingRow>
-        </Card>
-      </div>
-
-      {/* Custom Vocabulary */}
-      <div id="vocabulary" className="space-y-3 scroll-mt-4">
-        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
-          Custom Vocabulary
-        </h3>
-        <Card>
-          <div className="space-y-4">
-            <p className="text-sm text-text-tertiary">
-              Add words or phrases to improve transcription accuracy
-            </p>
-
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={newWord}
-                onChange={(e) => setNewWord(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleAddWord()}
-                placeholder="Enter a word or phrase"
-                className={cn(
-                  'flex-1 px-4 py-2.5 rounded-xl',
-                  'bg-bg-tertiary border border-white/[0.06]',
-                  'text-text-primary placeholder:text-text-quaternary',
-                  'focus:outline-none focus:border-white/25',
-                )}
-              />
-              <button
-                onClick={handleAddWord}
-                disabled={!newWord.trim()}
-                className={cn(
-                  'px-4 py-2.5 rounded-xl font-medium',
-                  'bg-text-primary text-bg-primary',
-                  'hover:bg-text-primary/90 transition-colors',
-                  'disabled:opacity-50 disabled:cursor-not-allowed',
-                )}
-              >
-                <Plus className="w-5 h-5" />
-              </button>
-            </div>
-
-            {vocabulary.length > 0 && (
-              <div className="flex flex-wrap gap-2 pt-2">
-                {vocabulary.map((word) => (
-                  <span
-                    key={word}
-                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-bg-tertiary text-text-secondary text-sm"
-                  >
-                    {word}
-                    <button
-                      onClick={() => onRemoveWord(word)}
-                      className="text-text-quaternary hover:text-red-400 transition-colors"
-                    >
-                      <X className="w-3.5 h-3.5" />
-                    </button>
-                  </span>
-                ))}
-              </div>
-            )}
-
-            {vocabulary.length === 0 && (
-              <p className="text-sm text-text-quaternary text-center py-4">
-                No custom vocabulary added yet
-              </p>
-            )}
-          </div>
-        </Card>
-      </div>
-
-      {/* Notifications */}
-      <div id="notifications" className="space-y-3 scroll-mt-4">
-        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
-          Notifications
-        </h3>
-        <Card>
-          <SettingRow
-            label="Daily Summary"
-            description="Receive a daily digest of your action items"
-          >
-            <Toggle enabled={dailySummary.enabled} onChange={onDailySummaryToggle} />
-          </SettingRow>
-
-          {dailySummary.enabled && (
-            <SettingRow
-              label="Delivery Time"
-              description="When to receive your daily summary"
-            >
-              <HourPicker value={dailySummary.hour} onChange={onDailySummaryHourChange} />
-            </SettingRow>
-          )}
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// Privacy Section
-// ============================================================================
-
-function PrivacySection({
-  recordingPermission,
-  trainingDataOptIn,
-  onRecordingChange,
-  onTrainingDataChange,
-}: {
-  recordingPermission: boolean;
-  trainingDataOptIn: boolean;
-  onRecordingChange: (enabled: boolean) => void;
-  onTrainingDataChange: (enabled: boolean) => void;
-}) {
-  return (
-    <div className="space-y-6">
-      <Card>
-        <SettingRow
-          label="Store Recordings"
-          description="Allow storing audio recordings for improved accuracy"
-        >
-          <Toggle enabled={recordingPermission} onChange={onRecordingChange} />
-        </SettingRow>
-
-        <SettingRow
-          label="Training Data"
-          description="Help improve Omi by contributing anonymous usage data"
-        >
-          <Toggle enabled={trainingDataOptIn} onChange={onTrainingDataChange} />
-        </SettingRow>
-      </Card>
-
-      <Card className="border-white/25">
-        <div className="flex items-start gap-4">
-          <div className="p-2 rounded-lg bg-white/[0.08]">
-            <Shield className="w-5 h-5 text-text-secondary" />
-          </div>
-          <div>
-            <h3 className="text-text-primary font-medium">Your Privacy Matters</h3>
-            <p className="text-sm text-text-tertiary mt-1">
-              Your data is encrypted and never shared with third parties. You have full
-              control over what data is collected and stored.
-            </p>
-            <a
-              href="https://omi.me/privacy"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 text-sm text-text-secondary hover:underline mt-2"
-            >
-              Learn more about our privacy policy
-              <ExternalLink className="w-3.5 h-3.5" />
-            </a>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-}
-
-// ============================================================================
-// Plan & Usage Section
-// ============================================================================
-
-type UsagePeriod = 'today' | 'monthly' | 'yearly' | 'all_time';
-
-const PERIOD_LABELS: Record<UsagePeriod, string> = {
-  today: 'Today',
-  monthly: 'This Month',
-  yearly: 'This Year',
-  all_time: 'All Time',
-};
-
-function UsageChart({
-  history,
-  period,
-}: {
-  history?: UsageHistoryPoint[];
-  period: UsagePeriod;
-}) {
-  const [selectedMetric, setSelectedMetric] = useState<
-    'listening' | 'words' | 'insights' | 'memories'
-  >('listening');
-
-  if (!history || history.length === 0) {
-    return (
-      <Card className="h-48 flex items-center justify-center">
-        <p className="text-text-quaternary">No activity data available</p>
-      </Card>
-    );
-  }
-
-  // For all_time with many data points, aggregate by year
-  let dataToProcess = history;
-  if (period === 'all_time' && history.length > 12) {
-    // Group by year and aggregate
-    const yearlyData = new Map<string, UsageHistoryPoint>();
-    history.forEach((point) => {
-      const date = new Date(point.date);
-      const key = String(date.getFullYear());
-      const existing = yearlyData.get(key);
-      if (existing) {
-        yearlyData.set(key, {
-          date: `${key}-01-01`,
-          transcription_seconds:
-            existing.transcription_seconds + point.transcription_seconds,
-          words_transcribed: existing.words_transcribed + point.words_transcribed,
-          insights_gained: existing.insights_gained + point.insights_gained,
-          memories_created: existing.memories_created + point.memories_created,
-        });
-      } else {
-        yearlyData.set(key, { ...point, date: `${key}-01-01` });
-      }
-    });
-    dataToProcess = Array.from(yearlyData.values()).sort((a, b) =>
-      a.date.localeCompare(b.date),
-    );
-  }
-
-  // Process history data for display
-  const processedData = dataToProcess.map((point, index) => {
-    // Parse date string - handles both "YYYY-MM-DD" and "YYYY-MM-DDTHH:MM:SSZ" formats
-    let label = '';
-
-    if (period === 'today') {
-      // For today, extract hour from ISO format "2026-01-02T00:00:00Z"
-      const timeMatch = point.date.match(/T(\d{2}):/);
-      const hour = timeMatch ? parseInt(timeMatch[1], 10) : 0;
-      label = `${hour}:00`;
-    } else {
-      // For other periods, parse the date portion "YYYY-MM-DD"
-      const datePart = point.date.split('T')[0]; // Get date part before 'T'
-      const [year, month, day] = datePart.split('-').map(Number);
-
-      if (period === 'monthly') {
-        label = `${day}`;
-      } else if (period === 'yearly') {
-        label = [
-          'Jan',
-          'Feb',
-          'Mar',
-          'Apr',
-          'May',
-          'Jun',
-          'Jul',
-          'Aug',
-          'Sep',
-          'Oct',
-          'Nov',
-          'Dec',
-        ][month - 1];
-      } else {
-        // For all_time, show year
-        label = String(year);
-      }
-    }
-    return { ...point, label, index };
-  });
-
-  // Get value based on selected metric
-  const getValue = (d: UsageHistoryPoint) => {
-    switch (selectedMetric) {
-      case 'listening':
-        return d.transcription_seconds / 60; // Convert to minutes
-      case 'words':
-        return d.words_transcribed;
-      case 'insights':
-        return d.insights_gained;
-      case 'memories':
-        return d.memories_created;
-    }
-  };
-
-  // Format value for display
-  const formatValue = (value: number) => {
-    if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
-    if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;
-    return Math.round(value).toLocaleString();
-  };
-
-  // Format value with unit
-  const formatValueWithUnit = (value: number) => {
-    const formatted = formatValue(value);
-    switch (selectedMetric) {
-      case 'listening':
-        return `${formatted} min`;
-      case 'words':
-        return formatted;
-      case 'insights':
-        return formatted;
-      case 'memories':
-        return formatted;
-    }
-  };
-
-  // Find max value for scaling
-  const maxValue = Math.max(...processedData.map((d) => getValue(d)), 1);
-
-  const metricConfig = [
-    { key: 'listening' as const, color: 'rgb(96, 165, 250)', label: 'Listening' },
-    { key: 'words' as const, color: 'rgb(74, 222, 128)', label: 'Words' },
-    { key: 'insights' as const, color: 'rgb(251, 146, 60)', label: 'Insights' },
-    { key: 'memories' as const, color: 'rgb(192, 132, 252)', label: 'Memories' },
-  ];
-
-  const currentMetric = metricConfig.find((m) => m.key === selectedMetric)!;
-
-  return (
-    <Card>
-      {/* Header with metric selector */}
-      <div className="flex items-center justify-between mb-4">
-        <h4 className="text-sm font-semibold text-text-secondary">Activity Over Time</h4>
-        <div className="flex gap-1">
-          {metricConfig.map((metric) => (
-            <button
-              key={metric.key}
-              onClick={() => setSelectedMetric(metric.key)}
-              className={cn(
-                'px-2.5 py-1 rounded-md text-xs font-medium transition-all',
-                selectedMetric === metric.key
-                  ? 'opacity-100'
-                  : 'opacity-40 hover:opacity-60',
-              )}
-              style={{
-                backgroundColor:
-                  selectedMetric === metric.key ? `${metric.color}20` : 'transparent',
-                color: metric.color,
-              }}
-            >
-              {metric.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Bar Chart */}
-      <div className="flex items-end gap-4 pt-2">
-        {processedData.map((d, i) => {
-          const value = getValue(d);
-          // Calculate height in pixels (max 100px), with minimum 8px for visibility
-          const maxBarHeight = 100;
-          const barHeight = Math.max((value / maxValue) * maxBarHeight, 8);
-          // Convert rgb(r,g,b) to rgba format for opacity
-          const rgbMatch = currentMetric.color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-          const rgba = rgbMatch
-            ? `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, 0.5)`
-            : currentMetric.color;
-          return (
-            <div key={i} className="flex-1 flex flex-col items-center">
-              {/* Value on top */}
-              <span
-                className="text-xs font-bold mb-2 whitespace-nowrap"
-                style={{ color: currentMetric.color }}
-              >
-                {formatValueWithUnit(value)}
-              </span>
-              {/* Bar with fixed pixel height */}
-              <div
-                className="w-full max-w-[80px] rounded-t-lg transition-all duration-300"
-                style={{
-                  height: `${barHeight}px`,
-                  backgroundColor: rgba,
-                }}
-              />
-              {/* Label */}
-              <span className="text-xs text-text-quaternary mt-2 font-medium">
-                {d.label}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </Card>
-  );
-}
-
-type PlanUsageTab = 'plan' | 'usage';
-
-function UnknownPlanCard() {
-  return (
-    <Card>
-      <div className="flex items-start gap-3">
-        <div className="w-10 h-10 rounded-xl bg-white/[0.08] flex items-center justify-center flex-shrink-0">
-          <AlertTriangle className="w-5 h-5 text-text-secondary" />
-        </div>
-        <div>
-          <h3 className="text-lg font-semibold text-text-primary">Plan unavailable</h3>
-          <p className="text-sm text-text-tertiary mt-1">
-            This account uses a plan that this version of Omi does not recognize yet.
-            Plan features are unavailable until the plan can be identified.
-          </p>
-        </div>
-      </div>
-    </Card>
-  );
-}
-
-function UsageSectionContent({
-  allUsage,
-  subscription,
-  onSubscriptionUpdate,
-  cachedPlans,
-}: {
-  allUsage: AllUsageData | null;
-  subscription: UserSubscription | null;
-  onSubscriptionUpdate: () => void;
-  cachedPlans: PricingOption[] | null;
-}) {
-  const [activeTab, setActiveTab] = useState<PlanUsageTab>('plan');
-  const [selectedPeriod, setSelectedPeriod] = useState<UsagePeriod>('all_time');
-  const [selectedPriceId, setSelectedPriceId] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
-  const [isCanceling, setIsCanceling] = useState(false);
-  const [showUpgradeOptions, setShowUpgradeOptions] = useState(false);
-
-  // Set initial selected price when plans load, and keep it in sync when the
-  // subscription's current price changes (e.g. after a plan change or
-  // cancellation) so a pending-cancellation user isn't left on a stale option.
-  const currentPriceId = subscription?.current_price_id;
-  useEffect(() => {
-    if (cachedPlans && cachedPlans.length > 0) {
-      const activePlan = cachedPlans.find((p) => p.is_active || p.id === currentPriceId);
-      if (activePlan) {
-        setSelectedPriceId(activePlan.id);
-      } else if (!selectedPriceId) {
-        setSelectedPriceId(cachedPlans[0].id);
-      }
-    }
-  }, [cachedPlans, currentPriceId]);
-
-  const formatDuration = (seconds: number) => {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    if (hours > 0) {
-      return `${hours}h ${minutes}m`;
-    }
-    return `${minutes}m`;
-  };
-
-  const formatNumber = (num: number) => {
-    if (num >= 1000) {
-      return `${(num / 1000).toFixed(1)}k`;
-    }
-    return num.toString();
-  };
-
-  const formatDate = (timestamp: number) => {
-    return new Date(timestamp * 1000).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  // Get usage for selected period
-  const usage = allUsage ? allUsage[selectedPeriod] : null;
-  const monthlyUsage = allUsage?.monthly;
-  const periods: UsagePeriod[] = ['today', 'monthly', 'yearly', 'all_time'];
-
-  // Default limits for basic plan (1200 minutes = 72000 seconds)
-  const limits = {
-    transcription_seconds: 72000, // 1200 minutes
-    words_transcribed: 50000,
-    insights_gained: 100,
-    memories_created: 50,
-  };
-
-  const planIdentity = subscription
-    ? subscription.plan_identity ?? decodePlan(subscription.plan)
-    : null;
-  const isUnlimited = planIdentity ? planGrantsPaidCapability(planIdentity) : false;
-  const isUnknownPlan = planIdentity?.kind === 'unknown';
-  const isCancelingSubscription = subscription?.cancel_at_period_end;
-
-  // Calculate usage percentages for basic plan
-  const getUsagePercent = (used: number, limit: number) => {
-    if (limit <= 0) return 0;
-    return Math.min((used / limit) * 100, 100);
-  };
-
-  // Sort pricing options: monthly first, then annual
-  const sortedOptions = cachedPlans
-    ? [...cachedPlans].sort((a, b) => {
-        const aIsAnnual =
-          a.interval === 'year' || a.title?.toLowerCase().includes('annual');
-        const bIsAnnual =
-          b.interval === 'year' || b.title?.toLowerCase().includes('annual');
-        return (aIsAnnual ? 1 : 0) - (bIsAnnual ? 1 : 0);
-      })
-    : [];
-
-  const selectedOption = cachedPlans?.find((p) => p.id === selectedPriceId);
-
-  // Default features for unlimited plan
-  const defaultFeatures = [
-    'Unlimited conversations',
-    'Unlimited memories',
-    'Priority processing',
-    'Advanced insights',
-  ];
-
-  const handleSubscribe = async () => {
-    if (!selectedPriceId) return;
-
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const isCurrentPlan =
-        selectedOption?.is_active ||
-        selectedOption?.id === subscription?.current_price_id;
-
-      if (isCancelingSubscription && selectedPriceId !== subscription?.current_price_id) {
-        setError('Plan changes are available after your current subscription ends.');
-        return;
-      }
-
-      if (isUnlimited && !isCancelingSubscription && !isCurrentPlan) {
-        const result = await upgradeSubscription(selectedPriceId);
-        if (result?.status === 'success' || result?.scheduled_start) {
-          onSubscriptionUpdate();
-        } else {
-          setError(result?.message || 'Failed to upgrade plan');
-        }
-      } else {
-        const result = await createCheckoutSession(selectedPriceId);
-        if (result?.url) {
-          window.open(result.url, '_blank');
-          const handleFocus = () => {
-            onSubscriptionUpdate();
-            window.removeEventListener('focus', handleFocus);
-          };
-          window.addEventListener('focus', handleFocus);
-        } else if (result?.status === 'reactivated') {
-          onSubscriptionUpdate();
-        } else {
-          setError('Failed to create checkout session');
-        }
-      }
-    } catch (err) {
-      setError('An error occurred. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleManagePayment = async () => {
-    setIsLoading(true);
-    try {
-      const result = await getCustomerPortal();
-      if (result?.url) {
-        window.open(result.url, '_blank');
-        const handleFocus = () => {
-          onSubscriptionUpdate();
-          window.removeEventListener('focus', handleFocus);
-        };
-        window.addEventListener('focus', handleFocus);
-      } else {
-        setError('Failed to open payment portal');
-      }
-    } catch (err) {
-      setError('Failed to open payment portal');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancelSubscription = async () => {
-    setIsCanceling(true);
-    try {
-      const result = await cancelSubscription();
-      if (result?.status === 'success' || result?.cancel_at_period_end) {
-        onSubscriptionUpdate();
-        setShowCancelConfirm(false);
-      } else {
-        setError(result?.message || 'Failed to cancel subscription');
-      }
-    } catch (err) {
-      setError('Failed to cancel subscription');
-    } finally {
-      setIsCanceling(false);
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      {/* Tab Switcher */}
-      <div className="flex gap-1 p-1 bg-bg-tertiary rounded-xl w-fit">
-        <button
-          onClick={() => setActiveTab('plan')}
-          className={cn(
-            'px-4 py-2 rounded-lg text-sm font-medium transition-all',
-            activeTab === 'plan'
-              ? 'bg-text-primary text-bg-primary shadow-md'
-              : 'text-text-secondary hover:text-text-primary hover:bg-bg-quaternary',
-          )}
-        >
-          Plan
-        </button>
-        <button
-          onClick={() => setActiveTab('usage')}
-          className={cn(
-            'px-4 py-2 rounded-lg text-sm font-medium transition-all',
-            activeTab === 'usage'
-              ? 'bg-text-primary text-bg-primary shadow-md'
-              : 'text-text-secondary hover:text-text-primary hover:bg-bg-quaternary',
-          )}
-        >
-          Usage
-        </button>
-      </div>
-
-      {/* Tab Content */}
-      {activeTab === 'plan' ? (
-        /* PLAN TAB - Unknown plans remain neutral; known plans choose Basic vs paid. */
-        <div className="space-y-6">
-          {isUnknownPlan ? (
-            <UnknownPlanCard />
-          ) : !isUnlimited ? (
-            /* BASIC PLAN VIEW */
-            <>
-              {/* Current Plan Card */}
-              <Card className="relative overflow-hidden">
-                {/* Header */}
-                <div className="flex items-start justify-between mb-6">
-                  <div className="flex items-center gap-3">
-                    <div className="w-12 h-12 rounded-2xl bg-white/[0.08] flex items-center justify-center">
-                      <Zap className="w-6 h-6 text-text-secondary" />
-                    </div>
-                    <div>
-                      <h3 className="text-xl font-semibold text-text-primary">
-                        Basic Plan
-                      </h3>
-                      <p className="text-sm text-text-tertiary">Free tier</p>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <button
-                      onClick={() => setShowUpgradeOptions(true)}
-                      className="px-5 py-2.5 bg-text-primary hover:bg-text-primary/90 text-bg-primary text-sm font-semibold rounded-xl transition-all shadow-lg shadow-black/40"
-                    >
-                      Upgrade to Unlimited
-                    </button>
-                    {subscription?.stripe_subscription_id && (
-                      <button
-                        onClick={handleManagePayment}
-                        disabled={isLoading}
-                        className="px-4 py-2.5 border border-bg-quaternary text-text-secondary hover:text-text-primary text-sm font-medium rounded-xl transition-colors disabled:opacity-50"
-                      >
-                        Billing &amp; Invoices
-                      </button>
-                    )}
-                  </div>
-                </div>
-
-                {/* Monthly Listening Usage */}
-                <div className="p-4 bg-amber-500/5 border border-amber-500/20 rounded-xl mb-6">
-                  <div className="flex items-center gap-2 mb-3">
-                    <Clock className="w-4 h-4 text-amber-400" />
-                    <span className="text-sm font-semibold text-amber-400">
-                      Monthly Listening Limit
-                    </span>
-                  </div>
-                  <div className="flex items-baseline justify-between mb-2">
-                    <span className="text-2xl font-bold text-text-primary">
-                      {monthlyUsage
-                        ? Math.round(monthlyUsage.transcription_seconds / 60)
-                        : 0}
-                      <span className="text-sm font-normal text-text-tertiary ml-1">
-                        / 1,200 min
-                      </span>
-                    </span>
-                    <span className="text-sm text-text-tertiary">
-                      {monthlyUsage
-                        ? 1200 - Math.round(monthlyUsage.transcription_seconds / 60)
-                        : 1200}{' '}
-                      min left
-                    </span>
-                  </div>
-                  <div className="h-2.5 bg-bg-quaternary rounded-full overflow-hidden">
-                    <div
-                      className="h-full bg-gradient-to-r from-amber-500 to-amber-400 rounded-full transition-all duration-500"
-                      style={{
-                        width: `${monthlyUsage ? getUsagePercent(monthlyUsage.transcription_seconds, limits.transcription_seconds) : 0}%`,
-                      }}
-                    />
-                  </div>
-                </div>
-
-                {/* What's Included - Checklist */}
-                <div>
-                  <h4 className="text-sm font-semibold text-text-secondary mb-3">
-                    What&apos;s included
-                  </h4>
-                  <div className="space-y-3">
-                    <div className="flex items-center gap-3">
-                      <div className="w-5 h-5 rounded bg-amber-500/20 flex items-center justify-center flex-shrink-0">
-                        <Clock className="w-3 h-3 text-amber-400" />
-                      </div>
-                      <span className="text-sm text-text-secondary">
-                        <span className="font-medium text-text-primary">
-                          1,200 minutes
-                        </span>{' '}
-                        of listening per month
-                        <span className="text-amber-400 text-xs ml-1">(limited)</span>
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <div className="w-5 h-5 rounded bg-green-500/20 flex items-center justify-center flex-shrink-0">
-                        <Check className="w-3 h-3 text-green-400" />
-                      </div>
-                      <span className="text-sm text-text-secondary">
-                        <span className="font-medium text-text-primary">Unlimited</span>{' '}
-                        words transcribed
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <div className="w-5 h-5 rounded bg-green-500/20 flex items-center justify-center flex-shrink-0">
-                        <Check className="w-3 h-3 text-green-400" />
-                      </div>
-                      <span className="text-sm text-text-secondary">
-                        <span className="font-medium text-text-primary">Unlimited</span>{' '}
-                        insights
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-3">
-                      <div className="w-5 h-5 rounded bg-green-500/20 flex items-center justify-center flex-shrink-0">
-                        <Check className="w-3 h-3 text-green-400" />
-                      </div>
-                      <span className="text-sm text-text-secondary">
-                        <span className="font-medium text-text-primary">Unlimited</span>{' '}
-                        memories
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </Card>
-
-              {/* Billing error surfaced in the Basic view (not only the upgrade panel) */}
-              {error && !showUpgradeOptions && (
-                <div className="flex items-center gap-2 p-3 bg-red-500/10 rounded-xl border border-red-500/20">
-                  <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0" />
-                  <p className="text-sm text-red-400">{error}</p>
-                </div>
-              )}
-
-              {/* Upgrade Options (shown when clicked) */}
-              {showUpgradeOptions && (
-                <Card className="border-white/25">
-                  <div className="flex items-center justify-between mb-5">
-                    <div>
-                      <h4 className="text-lg font-semibold text-text-primary">
-                        Choose a Plan
-                      </h4>
-                      <p className="text-sm text-text-tertiary">
-                        Unlock unlimited listening time
-                      </p>
-                    </div>
-                    <button
-                      onClick={() => setShowUpgradeOptions(false)}
-                      className="p-2 hover:bg-bg-tertiary rounded-lg transition-colors"
-                    >
-                      <X className="w-5 h-5 text-text-quaternary" />
-                    </button>
-                  </div>
-
-                  {/* Plan Selection */}
-                  {sortedOptions.length > 0 ? (
-                    <div className="grid grid-cols-2 gap-4 mb-5">
-                      {sortedOptions.map((option) => {
-                        const isSelected = selectedPriceId === option.id;
-                        const isAnnual =
-                          option.interval === 'year' ||
-                          option.title?.toLowerCase().includes('annual');
-
-                        return (
-                          <button
-                            key={option.id}
-                            onClick={() => setSelectedPriceId(option.id)}
-                            className={cn(
-                              'relative p-5 rounded-2xl border-2 text-left transition-all',
-                              isSelected
-                                ? 'border-white/25 bg-white/[0.08] shadow-lg shadow-black/40'
-                                : 'border-bg-tertiary hover:border-white/25 bg-bg-tertiary/30',
-                            )}
-                          >
-                            {isAnnual && (
-                              <span className="absolute -top-2.5 right-3 px-3 py-1 bg-text-primary text-bg-primary text-[10px] font-bold rounded-full uppercase tracking-wide">
-                                Best Value
-                              </span>
-                            )}
-                            <h4 className="font-semibold text-text-primary mb-1">
-                              {option.title}
-                            </h4>
-                            <p className="text-2xl font-bold text-text-primary">
-                              {option.price_string}
-                            </p>
-                            {option.description && (
-                              <p className="text-xs text-text-secondary mt-2 font-medium">
-                                {option.description}
-                              </p>
-                            )}
-                          </button>
-                        );
-                      })}
-                    </div>
-                  ) : (
-                    <div className="flex items-center justify-center py-8">
-                      <Loader2 className="w-6 h-6 text-text-primary animate-spin" />
-                    </div>
-                  )}
-
-                  {/* Error Message */}
-                  {error && (
-                    <div className="flex items-center gap-2 p-3 bg-red-500/10 rounded-xl mb-4 border border-red-500/20">
-                      <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0" />
-                      <p className="text-sm text-red-400">{error}</p>
-                    </div>
-                  )}
-
-                  <button
-                    onClick={handleSubscribe}
-                    disabled={isLoading || !selectedPriceId}
-                    className={cn(
-                      'w-full py-3.5 rounded-xl font-semibold transition-all',
-                      'bg-text-primary text-bg-primary',
-                      'hover:bg-text-primary/90',
-                      'shadow-lg shadow-black/40',
-                      'disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none',
-                    )}
-                  >
-                    {isLoading ? (
-                      <span className="flex items-center justify-center gap-2">
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                        Processing...
-                      </span>
-                    ) : (
-                      'Continue to Payment'
-                    )}
-                  </button>
-                </Card>
-              )}
-
-              {/* This Month Stats - Compact Single Row */}
-              <Card>
-                <h4 className="text-sm font-semibold text-text-secondary mb-4">
-                  This month
-                </h4>
-                <div className="grid grid-cols-4 gap-3">
-                  <div className="text-center">
-                    <div className="w-10 h-10 mx-auto rounded-xl bg-blue-500/10 flex items-center justify-center mb-2">
-                      <Mic className="w-5 h-5 text-blue-400" />
-                    </div>
-                    <p className="text-xl font-bold text-blue-400">
-                      {monthlyUsage
-                        ? formatDuration(monthlyUsage.transcription_seconds)
-                        : '0m'}
-                    </p>
-                    <p className="text-xs text-text-quaternary">Listening</p>
-                  </div>
-                  <div className="text-center">
-                    <div className="w-10 h-10 mx-auto rounded-xl bg-green-500/10 flex items-center justify-center mb-2">
-                      <MessageSquare className="w-5 h-5 text-green-400" />
-                    </div>
-                    <p className="text-xl font-bold text-green-400">
-                      {monthlyUsage ? formatNumber(monthlyUsage.words_transcribed) : '0'}
-                    </p>
-                    <p className="text-xs text-text-quaternary">Words</p>
-                  </div>
-                  <div className="text-center">
-                    <div className="w-10 h-10 mx-auto rounded-xl bg-orange-500/10 flex items-center justify-center mb-2">
-                      <Lightbulb className="w-5 h-5 text-orange-400" />
-                    </div>
-                    <p className="text-xl font-bold text-orange-400">
-                      {monthlyUsage?.insights_gained || 0}
-                    </p>
-                    <p className="text-xs text-text-quaternary">Insights</p>
-                  </div>
-                  <div className="text-center">
-                    <div className="w-10 h-10 mx-auto rounded-xl bg-white/[0.08] flex items-center justify-center mb-2">
-                      <Brain className="w-5 h-5 text-text-secondary" />
-                    </div>
-                    <p className="text-xl font-bold text-text-secondary">
-                      {monthlyUsage?.memories_created || 0}
-                    </p>
-                    <p className="text-xs text-text-quaternary">Memories</p>
-                  </div>
-                </div>
-              </Card>
-            </>
-          ) : (
-            /* UNLIMITED PLAN VIEW */
-            <>
-              {/* Header */}
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-full bg-white/[0.14] flex items-center justify-center">
-                  <Crown className="w-5 h-5 text-text-secondary" />
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold text-text-primary">
-                    {isCancelingSubscription ? 'Your Plan' : 'Manage Your Plan'}
-                  </h3>
-                  {subscription?.current_period_end && (
-                    <p className="text-xs text-text-quaternary">
-                      {isCancelingSubscription
-                        ? `Cancels on ${formatDate(subscription.current_period_end)}`
-                        : `Renews ${formatDate(subscription.current_period_end)}`}
-                    </p>
-                  )}
-                </div>
-              </div>
-
-              {/* Plan Selection */}
-              {sortedOptions.length > 0 ? (
-                <div className="grid grid-cols-2 gap-3">
-                  {sortedOptions.map((option) => {
-                    const isSelected = selectedPriceId === option.id;
-                    const isCurrent =
-                      option.is_active || option.id === subscription?.current_price_id;
-                    const isAnnual =
-                      option.interval === 'year' ||
-                      option.title?.toLowerCase().includes('annual');
-
-                    return (
-                      <button
-                        key={option.id}
-                        onClick={() => setSelectedPriceId(option.id)}
-                        disabled={isCancelingSubscription && !isCurrent}
-                        className={cn(
-                          'relative p-4 rounded-xl border-2 text-left transition-all',
-                          isSelected
-                            ? 'border-white/25 bg-white/[0.08]'
-                            : 'border-bg-tertiary hover:border-bg-quaternary bg-bg-tertiary/50',
-                          isCancelingSubscription &&
-                            !isCurrent &&
-                            'cursor-not-allowed opacity-50',
-                        )}
-                      >
-                        {isAnnual && (
-                          <span className="absolute -top-2 right-2 px-2 py-0.5 bg-text-primary text-bg-primary text-[10px] font-medium rounded-full">
-                            POPULAR
-                          </span>
-                        )}
-
-                        <h4 className="font-medium text-text-primary mb-1">
-                          {option.title}
-                        </h4>
-                        <p className="text-lg font-bold text-text-primary">
-                          {option.price_string}
-                        </p>
-                        {option.description && (
-                          <p className="text-xs text-text-secondary mt-1">
-                            {option.description}
-                          </p>
-                        )}
-
-                        {isCurrent && (
-                          <span className="inline-flex items-center gap-1 mt-2 px-2 py-0.5 bg-green-500/10 text-green-400 text-xs rounded-full">
-                            <Check className="w-3 h-3" />
-                            Current
-                          </span>
-                        )}
-                      </button>
-                    );
-                  })}
-                </div>
-              ) : (
-                <div className="flex items-center justify-center py-8">
-                  <Loader2 className="w-6 h-6 text-text-primary animate-spin" />
-                </div>
-              )}
-
-              {isCancelingSubscription && subscription?.current_period_end && (
-                <p className="text-sm text-text-tertiary">
-                  You can reactivate your current plan now. Plan changes are available
-                  after {formatDate(subscription.current_period_end)}.
-                </p>
-              )}
-
-              {/* Features List */}
-              <div className="space-y-2">
-                <h4 className="text-sm font-medium text-text-secondary">Features:</h4>
-                <ul className="space-y-2">
-                  {defaultFeatures.map((feature, idx) => (
-                    <li key={idx} className="flex items-start gap-2">
-                      <Check className="w-4 h-4 text-text-secondary flex-shrink-0 mt-0.5" />
-                      <span className="text-sm text-text-tertiary">{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              {/* Error Message */}
-              {error && (
-                <div className="flex items-center gap-2 p-3 bg-red-500/10 rounded-lg">
-                  <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0" />
-                  <p className="text-sm text-red-400">{error}</p>
-                </div>
-              )}
-
-              {/* Primary Action Button */}
-              <button
-                onClick={handleSubscribe}
-                disabled={
-                  isLoading ||
-                  !selectedPriceId ||
-                  (!isCancelingSubscription &&
-                    (selectedOption?.is_active ||
-                      selectedOption?.id === subscription?.current_price_id)) ||
-                  (isCancelingSubscription &&
-                    selectedPriceId !== subscription?.current_price_id)
-                }
-                className={cn(
-                  'w-full py-3 rounded-xl font-medium transition-colors',
-                  'bg-text-primary text-bg-primary',
-                  'hover:bg-text-primary/90',
-                  'disabled:opacity-50 disabled:cursor-not-allowed',
-                )}
-              >
-                {isLoading ? (
-                  <span className="flex items-center justify-center gap-2">
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    Processing...
-                  </span>
-                ) : isCancelingSubscription ? (
-                  'Reactivate Subscription'
-                ) : selectedOption?.is_active ||
-                  selectedOption?.id === subscription?.current_price_id ? (
-                  'Current Plan'
-                ) : (
-                  'Change Plan'
-                )}
-              </button>
-
-              {/* Secondary Actions */}
-              <div className="pt-4 border-t border-bg-tertiary space-y-3">
-                <button
-                  onClick={handleManagePayment}
-                  disabled={isLoading}
-                  className="w-full flex items-center justify-center gap-2 py-2.5 text-text-secondary hover:text-text-primary transition-colors"
-                >
-                  <CreditCard className="w-4 h-4" />
-                  <span className="text-sm">Manage Billing &amp; Invoices</span>
-                </button>
-
-                {!isCancelingSubscription && (
-                  <button
-                    onClick={() => setShowCancelConfirm(true)}
-                    disabled={isLoading}
-                    className="w-full py-2.5 text-sm text-red-400/70 hover:text-red-400 transition-colors"
-                  >
-                    Cancel Subscription
-                  </button>
-                )}
-              </div>
-            </>
-          )}
-        </div>
-      ) : (
-        /* USAGE TAB */
-        <div className="space-y-6">
-          {/* Period Tabs */}
-          <div className="flex gap-1 p-1 bg-bg-tertiary rounded-xl">
-            {periods.map((period) => (
-              <button
-                key={period}
-                onClick={() => setSelectedPeriod(period)}
-                className={cn(
-                  'flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-all',
-                  selectedPeriod === period
-                    ? 'bg-text-primary text-bg-primary shadow-md'
-                    : 'text-text-secondary hover:text-text-primary hover:bg-bg-quaternary',
-                )}
-              >
-                {PERIOD_LABELS[period]}
-              </button>
-            ))}
-          </div>
-
-          {/* Stats Summary - Compact Single Row */}
-          <Card>
-            <div className="grid grid-cols-4 gap-3">
-              <div className="text-center">
-                <div className="w-10 h-10 mx-auto rounded-xl bg-blue-500/10 flex items-center justify-center mb-2">
-                  <Mic className="w-5 h-5 text-blue-400" />
-                </div>
-                <p className="text-xl font-bold text-blue-400">
-                  {usage ? formatDuration(usage.transcription_seconds) : '0m'}
-                </p>
-                <p className="text-xs text-text-quaternary">Listening</p>
-              </div>
-              <div className="text-center">
-                <div className="w-10 h-10 mx-auto rounded-xl bg-green-500/10 flex items-center justify-center mb-2">
-                  <MessageSquare className="w-5 h-5 text-green-400" />
-                </div>
-                <p className="text-xl font-bold text-green-400">
-                  {usage ? formatNumber(usage.words_transcribed) : '0'}
-                </p>
-                <p className="text-xs text-text-quaternary">Words</p>
-              </div>
-              <div className="text-center">
-                <div className="w-10 h-10 mx-auto rounded-xl bg-orange-500/10 flex items-center justify-center mb-2">
-                  <Lightbulb className="w-5 h-5 text-orange-400" />
-                </div>
-                <p className="text-xl font-bold text-orange-400">
-                  {usage?.insights_gained || 0}
-                </p>
-                <p className="text-xs text-text-quaternary">Insights</p>
-              </div>
-              <div className="text-center">
-                <div className="w-10 h-10 mx-auto rounded-xl bg-white/[0.08] flex items-center justify-center mb-2">
-                  <Brain className="w-5 h-5 text-text-secondary" />
-                </div>
-                <p className="text-xl font-bold text-text-secondary">
-                  {usage?.memories_created || 0}
-                </p>
-                <p className="text-xs text-text-quaternary">Memories</p>
-              </div>
-            </div>
-          </Card>
-
-          {/* Usage Trends Chart */}
-          <UsageChart history={usage?.history} period={selectedPeriod} />
-        </div>
-      )}
-
-      {/* Cancel Subscription Confirmation Dialog */}
-      <ConfirmDialog
-        isOpen={showCancelConfirm}
-        title="Cancel Subscription?"
-        message={
-          subscription?.current_period_end
-            ? `Your subscription will remain active until ${formatDate(subscription.current_period_end)}. After that, you'll be moved to the Free plan.`
-            : "Are you sure you want to cancel your subscription? You'll lose access to unlimited features."
-        }
-        confirmLabel="Cancel Subscription"
-        onConfirm={handleCancelSubscription}
-        onCancel={() => setShowCancelConfirm(false)}
-        isDestructive={true}
-        isLoading={isCanceling}
-      />
-    </div>
-  );
-}
-
-// ============================================================================
-// Developer Section
-// ============================================================================
-
-// Create API Key Dialog
-function CreateApiKeyDialog({
-  isOpen,
-  onClose,
-  onCreateKey,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-  onCreateKey: (name: string, scopes: string[]) => Promise<DeveloperApiKey | null>;
-}) {
-  const [keyName, setKeyName] = useState('');
-  const [scopes, setScopes] = useState<Record<string, boolean>>({
-    'conversations:read': false,
-    'conversations:write': false,
-    'memories:read': false,
-    'memories:write': false,
-    'action_items:read': false,
-    'action_items:write': false,
-  });
-  const [isCreating, setIsCreating] = useState(false);
-  const [createdKey, setCreatedKey] = useState<DeveloperApiKey | null>(null);
-  const [copied, setCopied] = useState(false);
-
-  const selectedScopes = Object.entries(scopes)
-    .filter(([, v]) => v)
-    .map(([k]) => k);
-  const isReadOnly =
-    scopes['conversations:read'] &&
-    scopes['memories:read'] &&
-    scopes['action_items:read'] &&
-    !scopes['conversations:write'] &&
-    !scopes['memories:write'] &&
-    !scopes['action_items:write'];
-  const isFullAccess = Object.values(scopes).every((v) => v);
-
-  const selectReadOnly = () => {
-    setScopes({
-      'conversations:read': true,
-      'conversations:write': false,
-      'memories:read': true,
-      'memories:write': false,
-      'action_items:read': true,
-      'action_items:write': false,
-    });
-  };
-
-  const selectFullAccess = () => {
-    setScopes(Object.fromEntries(Object.keys(scopes).map((k) => [k, true])));
-  };
-
-  const handleCreate = async () => {
-    if (!keyName.trim()) return;
-    setIsCreating(true);
-    const key = await onCreateKey(
-      keyName.trim(),
-      selectedScopes.length > 0 ? selectedScopes : (undefined as unknown as string[]),
-    );
-    if (key) {
-      setCreatedKey(key);
-    }
-    setIsCreating(false);
-  };
-
-  const handleCopy = () => {
-    if (createdKey?.key) {
-      navigator.clipboard.writeText(createdKey.key);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
-
-  const handleClose = () => {
-    setKeyName('');
-    setScopes(Object.fromEntries(Object.keys(scopes).map((k) => [k, false])));
-    setCreatedKey(null);
-    setCopied(false);
-    onClose();
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
-      onClick={handleClose}
-    >
-      <div
-        className="bg-bg-secondary rounded-2xl w-full max-w-md mx-4 overflow-hidden"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {createdKey ? (
-          <div className="p-6">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="p-3 rounded-xl bg-green-500/20">
-                <Check className="w-6 h-6 text-green-400" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-text-primary">
-                  API Key Created
-                </h3>
-                <p className="text-sm text-text-tertiary">
-                  Save this key now - you won&apos;t see it again!
-                </p>
-              </div>
-            </div>
-            <div className="p-4 rounded-xl bg-bg-tertiary mb-4">
-              <p className="text-xs text-text-tertiary mb-2">Your API Key</p>
-              <code className="text-sm text-text-primary font-mono break-all">
-                {createdKey.key}
-              </code>
-            </div>
-            <div className="flex gap-3">
-              <button
-                onClick={handleCopy}
-                className={cn(
-                  'flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-medium transition-colors',
-                  copied
-                    ? 'bg-green-500/20 text-green-400'
-                    : 'bg-text-primary text-bg-primary hover:bg-text-primary/90',
-                )}
-              >
-                {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
-                {copied ? 'Copied!' : 'Copy Key'}
-              </button>
-              <button
-                onClick={handleClose}
-                className="px-4 py-3 rounded-xl bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary transition-colors"
-              >
-                Done
-              </button>
-            </div>
-          </div>
-        ) : (
-          <div className="p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h3 className="text-lg font-semibold text-text-primary">Create API Key</h3>
-              <button
-                onClick={handleClose}
-                className="p-2 rounded-lg hover:bg-bg-tertiary transition-colors"
-              >
-                <X className="w-5 h-5 text-text-tertiary" />
-              </button>
-            </div>
-
-            <div className="space-y-6">
-              <div>
-                <label className="block text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
-                  Key Name
-                </label>
-                <input
-                  type="text"
-                  value={keyName}
-                  onChange={(e) => setKeyName(e.target.value)}
-                  placeholder="e.g., My App Integration"
-                  className="w-full px-4 py-3 rounded-xl bg-bg-tertiary border border-white/[0.06] text-text-primary placeholder:text-text-quaternary focus:outline-none focus:border-white/25"
-                />
-              </div>
-
-              <div>
-                <div className="flex items-center justify-between mb-3">
-                  <label className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
-                    Permissions
-                  </label>
-                  <div className="flex gap-2">
-                    <button
-                      onClick={selectReadOnly}
-                      className={cn(
-                        'px-3 py-1.5 rounded-full text-xs font-medium transition-colors',
-                        isReadOnly
-                          ? 'bg-text-primary text-bg-primary'
-                          : 'bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary',
-                      )}
-                    >
-                      Read Only
-                    </button>
-                    <button
-                      onClick={selectFullAccess}
-                      className={cn(
-                        'px-3 py-1.5 rounded-full text-xs font-medium transition-colors',
-                        isFullAccess
-                          ? 'bg-text-primary text-bg-primary'
-                          : 'bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary',
-                      )}
-                    >
-                      Full Access
-                    </button>
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  {['Conversations', 'Memories', 'Action Items'].map((resource) => {
-                    const readKey = `${resource.toLowerCase().replace(' ', '_')}:read`;
-                    const writeKey = `${resource.toLowerCase().replace(' ', '_')}:write`;
-                    return (
-                      <div
-                        key={resource}
-                        className="flex items-center justify-between p-3 rounded-xl bg-bg-tertiary"
-                      >
-                        <span className="text-sm text-text-primary">{resource}</span>
-                        <div className="flex bg-bg-quaternary rounded-lg overflow-hidden">
-                          <button
-                            onClick={() =>
-                              setScopes({ ...scopes, [readKey]: !scopes[readKey] })
-                            }
-                            className={cn(
-                              'px-3 py-1.5 text-xs font-semibold transition-colors',
-                              scopes[readKey]
-                                ? 'bg-blue-500 text-white'
-                                : 'text-text-quaternary hover:text-text-secondary',
-                            )}
-                          >
-                            R
-                          </button>
-                          <button
-                            onClick={() =>
-                              setScopes({ ...scopes, [writeKey]: !scopes[writeKey] })
-                            }
-                            className={cn(
-                              'px-3 py-1.5 text-xs font-semibold transition-colors',
-                              scopes[writeKey]
-                                ? 'bg-text-primary text-bg-primary'
-                                : 'text-text-quaternary hover:text-text-secondary',
-                            )}
-                          >
-                            W
-                          </button>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-                <p className="text-xs text-text-quaternary mt-2">
-                  R = Read, W = Write. Defaults to read-only if nothing selected.
-                </p>
-              </div>
-
-              <button
-                onClick={handleCreate}
-                disabled={!keyName.trim() || isCreating}
-                className={cn(
-                  'w-full py-3 rounded-xl font-medium transition-colors',
-                  keyName.trim() && !isCreating
-                    ? 'bg-text-primary text-bg-primary hover:bg-text-primary/90'
-                    : 'bg-bg-tertiary text-text-quaternary cursor-not-allowed',
-                )}
-              >
-                {isCreating ? 'Creating...' : 'Create Key'}
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// Create MCP Key Dialog
-function CreateMcpKeyDialog({
-  isOpen,
-  onClose,
-  onCreateKey,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-  onCreateKey: (name: string) => Promise<McpApiKey | null>;
-}) {
-  const [keyName, setKeyName] = useState('');
-  const [isCreating, setIsCreating] = useState(false);
-  const [createdKey, setCreatedKey] = useState<McpApiKey | null>(null);
-  const [copied, setCopied] = useState(false);
-
-  const handleCreate = async () => {
-    if (!keyName.trim()) return;
-    setIsCreating(true);
-    const key = await onCreateKey(keyName.trim());
-    if (key) {
-      setCreatedKey(key);
-    }
-    setIsCreating(false);
-  };
-
-  const handleCopy = () => {
-    if (createdKey?.key) {
-      navigator.clipboard.writeText(createdKey.key);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
-
-  const handleClose = () => {
-    setKeyName('');
-    setCreatedKey(null);
-    setCopied(false);
-    onClose();
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
-      onClick={handleClose}
-    >
-      <div
-        className="bg-bg-secondary rounded-2xl w-full max-w-md mx-4 overflow-hidden"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {createdKey ? (
-          <div className="p-6">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="p-3 rounded-xl bg-green-500/20">
-                <Check className="w-6 h-6 text-green-400" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-text-primary">
-                  MCP Key Created
-                </h3>
-                <p className="text-sm text-text-tertiary">
-                  Save this key now - you won&apos;t see it again!
-                </p>
-              </div>
-            </div>
-            <div className="p-4 rounded-xl bg-bg-tertiary mb-4">
-              <p className="text-xs text-text-tertiary mb-2">Your MCP Key</p>
-              <code className="text-sm text-text-primary font-mono break-all">
-                {createdKey.key}
-              </code>
-            </div>
-            <div className="flex gap-3">
-              <button
-                onClick={handleCopy}
-                className={cn(
-                  'flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-medium transition-colors',
-                  copied
-                    ? 'bg-green-500/20 text-green-400'
-                    : 'bg-text-primary text-bg-primary hover:bg-text-primary/90',
-                )}
-              >
-                {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
-                {copied ? 'Copied!' : 'Copy Key'}
-              </button>
-              <button
-                onClick={handleClose}
-                className="px-4 py-3 rounded-xl bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary transition-colors"
-              >
-                Done
-              </button>
-            </div>
-          </div>
-        ) : (
-          <div className="p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h3 className="text-lg font-semibold text-text-primary">Create MCP Key</h3>
-              <button
-                onClick={handleClose}
-                className="p-2 rounded-lg hover:bg-bg-tertiary transition-colors"
-              >
-                <X className="w-5 h-5 text-text-tertiary" />
-              </button>
-            </div>
-            <div className="space-y-4">
-              <div>
-                <label className="block text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
-                  Key Name
-                </label>
-                <input
-                  type="text"
-                  value={keyName}
-                  onChange={(e) => setKeyName(e.target.value)}
-                  placeholder="e.g., Claude Desktop"
-                  className="w-full px-4 py-3 rounded-xl bg-bg-tertiary border border-white/[0.06] text-text-primary placeholder:text-text-quaternary focus:outline-none focus:border-white/25"
-                />
-              </div>
-              <button
-                onClick={handleCreate}
-                disabled={!keyName.trim() || isCreating}
-                className={cn(
-                  'w-full py-3 rounded-xl font-medium transition-colors',
-                  keyName.trim() && !isCreating
-                    ? 'bg-text-primary text-bg-primary hover:bg-text-primary/90'
-                    : 'bg-bg-tertiary text-text-quaternary cursor-not-allowed',
-                )}
-              >
-                {isCreating ? 'Creating...' : 'Create Key'}
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function DeveloperSection({
-  apiKeys,
-  mcpKeys,
-  webhooks,
-  onCreateApiKey,
-  onDeleteApiKey,
-  onCreateMcpKey,
-  onDeleteMcpKey,
-  onWebhookChange,
-  onExportData,
-  isExporting,
-  onDeleteKnowledgeGraph,
-}: {
-  apiKeys: DeveloperApiKey[];
-  mcpKeys: McpApiKey[];
-  webhooks: DeveloperWebhooks;
-  onCreateApiKey: (name: string, scopes: string[]) => Promise<DeveloperApiKey | null>;
-  onDeleteApiKey: (keyId: string) => void;
-  onCreateMcpKey: (name: string) => Promise<McpApiKey | null>;
-  onDeleteMcpKey: (keyId: string) => void;
-  onWebhookChange: (type: string, enabled: boolean, url?: string, delay?: string) => void;
-  onExportData: () => void;
-  isExporting?: boolean;
-  onDeleteKnowledgeGraph: () => void;
-}) {
-  const [showApiKeyDialog, setShowApiKeyDialog] = useState(false);
-  const [showMcpKeyDialog, setShowMcpKeyDialog] = useState(false);
-  const [showDeleteGraphDialog, setShowDeleteGraphDialog] = useState(false);
-  const [copiedConfig, setCopiedConfig] = useState(false);
-  const [copiedUrl, setCopiedUrl] = useState(false);
-  const [copiedClaudeName, setCopiedClaudeName] = useState(false);
-  const [copiedClaudeUrl, setCopiedClaudeUrl] = useState(false);
-  const [copiedClaudeClientId, setCopiedClaudeClientId] = useState(false);
-  const [copiedClaudeSecret, setCopiedClaudeSecret] = useState(false);
-
-  const mcpServerUrl = `${process.env.NEXT_PUBLIC_API_BASE_URL || 'https://api.omi.me'}/v1/mcp/sse`;
-
-  // Claude connector values — mirror the 4 fields in Claude's "Add custom connector" form
-  const claudeConnectorName = 'Omi Memory';
-  const claudeConnectorUrl = mcpServerUrl;
-  const claudeConnectorClientId = CLAUDE_CONNECTOR_OAUTH.clientId;
-  const claudeConnectorSecret: string = CLAUDE_CONNECTOR_OAUTH.clientSecret;
-
-  // Experimental features (stored in localStorage)
-  const [experimentalFeatures, setExperimentalFeatures] = useState({
-    transcriptionDiagnostics: false,
-    autoCreateSpeakers: false,
-    followUpQuestions: false,
-    goalTracker: false,
-  });
-
-  // Load experimental features from localStorage on mount
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const saved = localStorage.getItem('omi_experimental_features');
-      if (saved) {
-        try {
-          setExperimentalFeatures(JSON.parse(saved));
-        } catch {
-          // Ignore parse errors
-        }
-      }
-    }
-  }, []);
-
-  // Save experimental features to localStorage when they change
-  const updateExperimentalFeature = (
-    key: keyof typeof experimentalFeatures,
-    value: boolean,
-  ) => {
-    const updated = { ...experimentalFeatures, [key]: value };
-    setExperimentalFeatures(updated);
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('omi_experimental_features', JSON.stringify(updated));
-    }
-  };
-
-  // Parse audio_bytes URL which may contain comma-separated URL and delay (e.g., "https://example.com,5")
-  const parseAudioBytesUrl = (rawUrl: string) => {
-    if (!rawUrl) return { url: '', delay: '5' };
-    const parts = rawUrl.split(',');
-    if (parts.length >= 2) {
-      return { url: parts[0], delay: parts[1] };
-    }
-    return { url: rawUrl, delay: '5' };
-  };
-
-  const initialAudioBytes = parseAudioBytesUrl(webhooks.audio_bytes?.url || '');
-
-  const [webhookUrls, setWebhookUrls] = useState<Record<string, string>>({
-    memory_created: webhooks.memory_created?.url || '',
-    transcript_received: webhooks.transcript_received?.url || '',
-    audio_bytes: initialAudioBytes.url,
-    day_summary: webhooks.day_summary?.url || '',
-  });
-  const [audioBytesDelay, setAudioBytesDelay] = useState(initialAudioBytes.delay);
-
-  // Update webhook URLs when webhooks prop changes
-  useEffect(() => {
-    const audioBytes = parseAudioBytesUrl(webhooks.audio_bytes?.url || '');
-    setWebhookUrls({
-      memory_created: webhooks.memory_created?.url || '',
-      transcript_received: webhooks.transcript_received?.url || '',
-      audio_bytes: audioBytes.url,
-      day_summary: webhooks.day_summary?.url || '',
-    });
-    setAudioBytesDelay(audioBytes.delay);
-  }, [webhooks]);
-
-  const webhookTypes = [
-    {
-      id: 'memory_created',
-      label: 'Conversation Events',
-      description: 'New conversation created',
-      icon: MessageSquare,
-    },
-    {
-      id: 'transcript_received',
-      label: 'Real-time Transcript',
-      description: 'Transcript received',
-      icon: FileText,
-    },
-    {
-      id: 'audio_bytes',
-      label: 'Audio Bytes',
-      description: 'Audio data received',
-      icon: Radio,
-      hasDelay: true,
-    },
-    {
-      id: 'day_summary',
-      label: 'Day Summary',
-      description: 'Summary generated',
-      icon: Calendar,
-    },
-  ];
-
-  const claudeDesktopConfig = `{
-  "mcpServers": {
-    "omi": {
-      "command": "docker",
-      "args": ["run", "--rm", "-i", "-e", "OMI_API_KEY=your_api_key_here", "omiai/mcp-server:latest"]
-    }
-  }
-}`;
-
-  const copyConfig = () => {
-    navigator.clipboard.writeText(claudeDesktopConfig);
-    setCopiedConfig(true);
-    setTimeout(() => setCopiedConfig(false), 2000);
-  };
-
-  const copyUrl = () => {
-    navigator.clipboard.writeText(mcpServerUrl);
-    setCopiedUrl(true);
-    setTimeout(() => setCopiedUrl(false), 2000);
-  };
-
-  return (
-    <div className="space-y-8">
-      {/* Developer API Keys */}
-      <div id="api-keys" className="space-y-3 scroll-mt-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
-            Developer API Keys
-          </h3>
-          <button
-            onClick={() => setShowApiKeyDialog(true)}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/[0.08] text-text-secondary text-xs font-medium hover:bg-white/[0.14] transition-colors"
-          >
-            <Plus className="w-3 h-3" />
-            Create Key
-          </button>
-        </div>
-        <Card>
-          {apiKeys.length > 0 ? (
-            <div className="space-y-3">
-              {apiKeys.map((apiKey) => (
-                <div
-                  key={apiKey.id}
-                  className="flex items-center justify-between p-3 rounded-xl bg-bg-tertiary"
-                >
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 flex-wrap">
-                      <span className="text-sm text-text-primary font-medium">
-                        {apiKey.name}
-                      </span>
-                      <code className="text-xs text-text-tertiary font-mono bg-bg-quaternary px-2 py-0.5 rounded">
-                        {apiKey.key_prefix}...
-                      </code>
-                      {apiKey.scopes && apiKey.scopes.length > 0 && (
-                        <span className="text-xs text-text-secondary bg-white/[0.08] px-2 py-0.5 rounded">
-                          {apiKey.scopes.length} scopes
-                        </span>
-                      )}
-                    </div>
-                    <p className="text-xs text-text-quaternary mt-1">
-                      Created {new Date(apiKey.created_at).toLocaleDateString()}
-                      {apiKey.last_used_at &&
-                        ` • Last used ${new Date(apiKey.last_used_at).toLocaleDateString()}`}
-                    </p>
-                  </div>
-                  <button
-                    onClick={() => onDeleteApiKey(apiKey.id)}
-                    className="p-2 rounded-lg text-text-secondary hover:text-red-400 hover:bg-red-500/10 transition-colors"
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <p className="text-sm text-text-quaternary text-center py-6">
-              No API keys created yet
-            </p>
-          )}
-        </Card>
-      </div>
-
-      {/* MCP Section */}
-      <div id="mcp" className="space-y-3 scroll-mt-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
-              MCP
-            </h3>
-            <a
-              href="https://docs.omi.me/doc/developer/MCP"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs text-text-secondary hover:text-text-secondary transition-colors"
-            >
-              Docs ↗
-            </a>
-          </div>
-          <button
-            onClick={() => setShowMcpKeyDialog(true)}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/[0.08] text-text-secondary text-xs font-medium hover:bg-white/[0.14] transition-colors"
-          >
-            <Plus className="w-3 h-3" />
-            Create Key
-          </button>
-        </div>
-
-        {/* MCP Keys List */}
-        <Card>
-          {mcpKeys.length > 0 ? (
-            <div className="space-y-3">
-              {mcpKeys.map((key) => (
-                <div
-                  key={key.id}
-                  className="flex items-center justify-between p-3 rounded-xl bg-bg-tertiary"
-                >
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm text-text-primary font-medium">
-                        {key.name}
-                      </span>
-                      <code className="text-xs text-text-tertiary font-mono bg-bg-quaternary px-2 py-0.5 rounded">
-                        {key.key_prefix}...
-                      </code>
-                    </div>
-                    <p className="text-xs text-text-quaternary mt-1">
-                      Created {new Date(key.created_at).toLocaleDateString()}
-                      {key.last_used_at &&
-                        ` • Last used ${new Date(key.last_used_at).toLocaleDateString()}`}
-                    </p>
-                  </div>
-                  <button
-                    onClick={() => onDeleteMcpKey(key.id)}
-                    className="p-2 rounded-lg text-text-secondary hover:text-red-400 hover:bg-red-500/10 transition-colors"
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <p className="text-sm text-text-quaternary text-center py-6">
-              No MCP keys created yet
-            </p>
-          )}
-        </Card>
-
-        {/* Claude Desktop Config */}
-        <Card>
-          <div className="flex items-center gap-3 mb-4">
-            <div className="p-2 rounded-lg bg-bg-tertiary">
-              <Monitor className="w-5 h-5 text-text-tertiary" />
-            </div>
-            <div>
-              <p className="text-text-primary font-medium">Claude Desktop</p>
-              <p className="text-xs text-text-tertiary">
-                Add to claude_desktop_config.json
-              </p>
-            </div>
-          </div>
-          <div className="p-4 rounded-xl bg-[#0d0d0d] border border-white/[0.06] font-mono text-xs overflow-x-auto">
-            <pre className="text-text-secondary whitespace-pre">
-              {claudeDesktopConfig}
-            </pre>
-          </div>
-          <button
-            onClick={copyConfig}
-            className={cn(
-              'w-full mt-3 flex items-center justify-center gap-2 py-2.5 rounded-xl transition-colors',
-              copiedConfig
-                ? 'bg-green-500/20 text-green-400'
-                : 'bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary',
-            )}
-          >
-            {copiedConfig ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
-            {copiedConfig ? 'Copied!' : 'Copy Config'}
-          </button>
-        </Card>
-
-        {/* Generic MCP Server Info */}
-        <Card>
-          <div className="flex items-center gap-3 mb-4">
-            <div className="p-2 rounded-lg bg-bg-tertiary">
-              <Server className="w-5 h-5 text-text-tertiary" />
-            </div>
-            <div>
-              <p className="text-text-primary font-medium">MCP Server</p>
-              <p className="text-xs text-text-tertiary">
-                Connect ChatGPT, Codex, Claude, or any MCP client to your data
-              </p>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div>
-              <p className="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
-                Server URL
-              </p>
-              <button
-                onClick={copyUrl}
-                className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors"
-              >
-                <code className="text-sm text-text-primary font-mono truncate mr-2">
-                  {mcpServerUrl}
-                </code>
-                {copiedUrl ? (
-                  <Check className="w-4 h-4 text-green-400 flex-shrink-0" />
-                ) : (
-                  <Copy className="w-4 h-4 text-text-quaternary flex-shrink-0" />
-                )}
-              </button>
-            </div>
-
-            <div className="border-t border-white/[0.06] pt-4">
-              <p className="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
-                API Key Auth
-              </p>
-              <div className="flex items-center gap-4 text-sm">
-                <span className="text-text-tertiary">Header</span>
-                <code className="text-text-quaternary font-mono text-xs">
-                  Authorization: Bearer &lt;key&gt;
-                </code>
-              </div>
-            </div>
-
-            <div className="border-t border-white/[0.06] pt-4">
-              <p className="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
-                OAuth
-              </p>
-              <div className="space-y-2 text-sm">
-                <div className="flex items-center gap-4">
-                  <span className="text-text-tertiary w-24">Client ID</span>
-                  <code className="text-text-primary font-mono">omi</code>
-                </div>
-                <div className="flex items-center gap-4">
-                  <span className="text-text-tertiary w-24">Client Secret</span>
-                  <span className="text-text-quaternary italic text-xs">
-                    Use your MCP API key
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </Card>
-
-        {/* Claude Connector — 4 copy fields mirroring Claude's "Add custom connector" form */}
-        <Card>
-          <div className="flex items-center gap-3 mb-4">
-            <div className="w-12 h-12 rounded-xl overflow-hidden bg-gradient-to-br from-orange-500/20 to-orange-600/10 border border-orange-500/20 flex items-center justify-center flex-shrink-0">
-              <span className="text-lg font-semibold text-orange-400">C</span>
-            </div>
-            <div>
-              <p className="text-text-primary font-medium">Claude</p>
-              <p className="text-xs text-text-tertiary">Live MCP or memory pack</p>
-            </div>
-          </div>
-
-          <p className="text-sm text-text-secondary mb-4">
-            Connect over MCP so Claude reads your memories live, or copy a memory pack.
-            Each field below maps to Claude&rsquo;s{' '}
-            <span className="text-text-tertiary">
-              Settings → Connectors → Add custom connector
-            </span>{' '}
-            form.
-          </p>
-
-          <div className="space-y-3">
-            {/* Field 1: Name → pastes into Claude's "Name" input */}
-            <div>
-              <p className="text-xs font-medium text-text-tertiary mb-1.5">
-                1. Name{' '}
-                <span className="text-text-secondary font-normal">
-                  → Claude &quot;Name&quot;
-                </span>
-              </p>
-              <button
-                onClick={() => {
-                  navigator.clipboard.writeText(claudeConnectorName);
-                  setCopiedClaudeName(true);
-                  setTimeout(() => setCopiedClaudeName(false), 2000);
-                }}
-                className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors group"
-              >
-                <code className="text-sm text-text-primary font-mono">
-                  {claudeConnectorName}
-                </code>
-                {copiedClaudeName ? (
-                  <Check className="w-4 h-4 text-green-400" />
-                ) : (
-                  <Copy className="w-4 h-4 text-text-quaternary group-hover:text-text-secondary transition-colors" />
-                )}
-              </button>
-            </div>
-
-            {/* Field 2: Server URL → pastes into Claude's "Remote MCP server URL" input */}
-            <div>
-              <p className="text-xs font-medium text-text-tertiary mb-1.5">
-                2. Remote MCP server URL{' '}
-                <span className="text-text-secondary font-normal">
-                  → Claude &quot;Remote MCP server URL&quot;
-                </span>
-              </p>
-              <button
-                onClick={() => {
-                  navigator.clipboard.writeText(claudeConnectorUrl);
-                  setCopiedClaudeUrl(true);
-                  setTimeout(() => setCopiedClaudeUrl(false), 2000);
-                }}
-                className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors group"
-              >
-                <code className="text-sm text-text-primary font-mono truncate mr-2">
-                  {claudeConnectorUrl}
-                </code>
-                {copiedClaudeUrl ? (
-                  <Check className="w-4 h-4 text-green-400 flex-shrink-0" />
-                ) : (
-                  <Copy className="w-4 h-4 text-text-quaternary group-hover:text-text-secondary transition-colors flex-shrink-0" />
-                )}
-              </button>
-            </div>
-
-            {/* Field 3: OAuth Client ID → pastes into Claude's Advanced "OAuth Client ID" */}
-            <div>
-              <p className="text-xs font-medium text-text-tertiary mb-1.5">
-                3. OAuth Client ID{' '}
-                <span className="text-text-secondary font-normal">
-                  → Claude Advanced &quot;OAuth Client ID&quot;
-                </span>
-              </p>
-              <button
-                onClick={() => {
-                  navigator.clipboard.writeText(claudeConnectorClientId);
-                  setCopiedClaudeClientId(true);
-                  setTimeout(() => setCopiedClaudeClientId(false), 2000);
-                }}
-                className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors group"
-              >
-                <code className="text-sm text-text-primary font-mono">
-                  {claudeConnectorClientId}
-                </code>
-                {copiedClaudeClientId ? (
-                  <Check className="w-4 h-4 text-green-400" />
-                ) : (
-                  <Copy className="w-4 h-4 text-text-quaternary group-hover:text-text-secondary transition-colors" />
-                )}
-              </button>
-            </div>
-
-            {/* Field 4: OAuth Client Secret → pastes into Claude's Advanced "OAuth Client Secret" */}
-            <div>
-              <p className="text-xs font-medium text-text-tertiary mb-1.5">
-                4. OAuth Client Secret{' '}
-                <span className="text-text-secondary font-normal">
-                  → Claude Advanced &quot;OAuth Client Secret&quot;
-                </span>
-              </p>
-              {claudeConnectorSecret ? (
-                <button
-                  onClick={() => {
-                    navigator.clipboard.writeText(claudeConnectorSecret);
-                    setCopiedClaudeSecret(true);
-                    setTimeout(() => setCopiedClaudeSecret(false), 2000);
-                  }}
-                  className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors group"
-                >
-                  <code className="text-sm text-text-primary font-mono truncate mr-2">
-                    {claudeConnectorSecret.slice(0, 8)}…{claudeConnectorSecret.slice(-4)}
-                  </code>
-                  {copiedClaudeSecret ? (
-                    <Check className="w-4 h-4 text-green-400 flex-shrink-0" />
-                  ) : (
-                    <Copy className="w-4 h-4 text-text-quaternary group-hover:text-text-secondary transition-colors flex-shrink-0" />
-                  )}
-                </button>
-              ) : (
-                <div className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] opacity-60">
-                  <span className="text-sm text-text-quaternary italic">Leave blank</span>
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className="mt-4 pt-4 border-t border-white/[0.06]">
-            <ol className="text-xs text-text-tertiary space-y-1.5 list-decimal list-inside">
-              <li>
-                Open{' '}
-                <span className="text-text-secondary">
-                  claude.ai → Settings → Connectors → Add custom connector
-                </span>
-              </li>
-              <li>
-                Click each <span className="text-text-secondary">Copy</span> button above
-                and paste into the matching field
-              </li>
-              <li>
-                Under <span className="text-text-secondary">Advanced settings</span>,
-                paste OAuth Client ID + Secret
-              </li>
-              <li>
-                Click <span className="text-text-secondary">Add</span>, then{' '}
-                <span className="text-text-secondary">Connect</span>
-              </li>
-            </ol>
-          </div>
-        </Card>
-      </div>
-
-      {/* Webhooks */}
-      <div id="webhooks" className="space-y-3 scroll-mt-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
-            Webhooks
-          </h3>
-          <a
-            href="https://docs.omi.me/doc/developer/apps/Introduction"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-xs text-text-secondary hover:text-text-secondary transition-colors"
-          >
-            Docs ↗
-          </a>
-        </div>
-        <Card>
-          <div className="space-y-1">
-            {webhookTypes.map((webhook, index) => {
-              const webhookData = webhooks[webhook.id as keyof DeveloperWebhooks];
-              const isEnabled = webhookData?.enabled || false;
-              const Icon = webhook.icon;
-
-              return (
-                <div key={webhook.id}>
-                  {index > 0 && <div className="border-t border-white/[0.06] my-4" />}
-                  <div className="py-2">
-                    <div className="flex items-center justify-between mb-2">
-                      <div className="flex items-center gap-3">
-                        <div className="p-2 rounded-lg bg-bg-tertiary">
-                          <Icon className="w-4 h-4 text-text-tertiary" />
-                        </div>
-                        <div>
-                          <p className="text-text-primary font-medium text-sm">
-                            {webhook.label}
-                          </p>
-                          <p className="text-xs text-text-tertiary">
-                            {webhook.description}
-                          </p>
-                        </div>
-                      </div>
-                      <Toggle
-                        enabled={isEnabled}
-                        onChange={(enabled) =>
-                          onWebhookChange(
-                            webhook.id,
-                            enabled,
-                            webhookUrls[webhook.id],
-                            webhook.hasDelay ? audioBytesDelay : undefined,
-                          )
-                        }
-                      />
-                    </div>
-                    {isEnabled && (
-                      <div className="mt-3 space-y-2">
-                        <input
-                          type="url"
-                          value={webhookUrls[webhook.id] || ''}
-                          onChange={(e) =>
-                            setWebhookUrls({
-                              ...webhookUrls,
-                              [webhook.id]: e.target.value,
-                            })
-                          }
-                          onBlur={() =>
-                            onWebhookChange(
-                              webhook.id,
-                              true,
-                              webhookUrls[webhook.id],
-                              webhook.hasDelay ? audioBytesDelay : undefined,
-                            )
-                          }
-                          placeholder="https://your-server.com/webhook"
-                          className="w-full px-3 py-2 rounded-lg bg-bg-tertiary border border-white/[0.06] text-text-primary text-sm placeholder:text-text-quaternary focus:outline-none focus:border-white/25"
-                        />
-                        {webhook.hasDelay && (
-                          <input
-                            type="number"
-                            value={audioBytesDelay}
-                            onChange={(e) => setAudioBytesDelay(e.target.value)}
-                            onBlur={() =>
-                              onWebhookChange(
-                                webhook.id,
-                                true,
-                                webhookUrls[webhook.id],
-                                audioBytesDelay,
-                              )
-                            }
-                            placeholder="Interval (seconds)"
-                            className="w-full px-3 py-2 rounded-lg bg-bg-tertiary border border-white/[0.06] text-text-primary text-sm placeholder:text-text-quaternary focus:outline-none focus:border-white/25"
-                          />
-                        )}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </Card>
-      </div>
-
-      {/* Data Management */}
-      <div id="data-management" className="space-y-3 scroll-mt-4">
-        <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
-          Data Management
-        </h3>
-        <Card>
-          <button
-            onClick={onExportData}
-            disabled={isExporting}
-            className={cn(
-              'w-full flex items-center gap-4 py-3 transition-colors',
-              isExporting
-                ? 'text-text-tertiary cursor-not-allowed'
-                : 'text-text-primary hover:text-text-secondary',
-            )}
-          >
-            <div className="p-2 rounded-lg bg-bg-tertiary">
-              {isExporting ? (
-                <Loader2 className="w-5 h-5 text-text-tertiary animate-spin" />
-              ) : (
-                <Download className="w-5 h-5 text-text-tertiary" />
-              )}
-            </div>
-            <div className="flex-1 text-left">
-              <p className="font-medium">
-                {isExporting ? 'Exporting...' : 'Export All Data'}
-              </p>
-              <p className="text-xs text-text-tertiary">
-                {isExporting
-                  ? 'This may take a moment'
-                  : 'Export conversations to a JSON file'}
-              </p>
-            </div>
-            {!isExporting && <ExternalLink className="w-4 h-4 text-text-quaternary" />}
-          </button>
-        </Card>
-        <Card className="border-red-500/20">
-          <button
-            onClick={() => setShowDeleteGraphDialog(true)}
-            className="w-full flex items-center gap-4 py-3 text-text-primary hover:text-red-400 transition-colors"
-          >
-            <div className="p-2 rounded-lg bg-red-500/10">
-              <Network className="w-5 h-5 text-red-400" />
-            </div>
-            <div className="flex-1 text-left">
-              <p className="font-medium">Delete Knowledge Graph</p>
-              <p className="text-xs text-text-tertiary">
-                Clear all nodes and connections
-              </p>
-            </div>
-            <Trash2 className="w-4 h-4 text-text-quaternary" />
-          </button>
-        </Card>
-      </div>
-
-      {/* Experimental Features */}
-      <div id="experimental" className="space-y-3 scroll-mt-4">
-        <div className="flex items-center gap-2">
-          <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
-            Experimental
-          </h3>
-          <FlaskConical className="w-4 h-4 text-text-secondary" />
-        </div>
-        <Card>
-          <div className="space-y-1">
-            {/* Transcription Diagnostics */}
-            <div className="flex items-center justify-between py-3 border-b border-white/[0.06]">
-              <div className="flex items-center gap-3">
-                <div className="p-2 rounded-lg bg-bg-tertiary">
-                  <Activity className="w-4 h-4 text-text-tertiary" />
-                </div>
-                <div>
-                  <p className="text-text-primary font-medium text-sm">
-                    Transcription Diagnostics
-                  </p>
-                  <p className="text-xs text-text-tertiary">
-                    Detailed diagnostic messages
-                  </p>
-                </div>
-              </div>
-              <Toggle
-                enabled={experimentalFeatures.transcriptionDiagnostics}
-                onChange={(v) => updateExperimentalFeature('transcriptionDiagnostics', v)}
-              />
-            </div>
-
-            {/* Auto-create Speakers */}
-            <div className="flex items-center justify-between py-3 border-b border-white/[0.06]">
-              <div className="flex items-center gap-3">
-                <div className="p-2 rounded-lg bg-bg-tertiary">
-                  <UserPlus className="w-4 h-4 text-text-tertiary" />
-                </div>
-                <div>
-                  <p className="text-text-primary font-medium text-sm">
-                    Auto-create Speakers
-                  </p>
-                  <p className="text-xs text-text-tertiary">
-                    Auto-create when name detected
-                  </p>
-                </div>
-              </div>
-              <Toggle
-                enabled={experimentalFeatures.autoCreateSpeakers}
-                onChange={(v) => updateExperimentalFeature('autoCreateSpeakers', v)}
-              />
-            </div>
-
-            {/* Follow-up Questions */}
-            <div className="flex items-center justify-between py-3 border-b border-white/[0.06]">
-              <div className="flex items-center gap-3">
-                <div className="p-2 rounded-lg bg-bg-tertiary">
-                  <Lightbulb className="w-4 h-4 text-text-tertiary" />
-                </div>
-                <div>
-                  <p className="text-text-primary font-medium text-sm">
-                    Follow-up Questions
-                  </p>
-                  <p className="text-xs text-text-tertiary">
-                    Suggest questions after conversations
-                  </p>
-                </div>
-              </div>
-              <Toggle
-                enabled={experimentalFeatures.followUpQuestions}
-                onChange={(v) => updateExperimentalFeature('followUpQuestions', v)}
-              />
-            </div>
-
-            {/* Goal Tracker */}
-            <div className="flex items-center justify-between py-3 border-b border-white/[0.06]">
-              <div className="flex items-center gap-3">
-                <div className="p-2 rounded-lg bg-bg-tertiary">
-                  <Target className="w-4 h-4 text-text-tertiary" />
-                </div>
-                <div>
-                  <p className="text-text-primary font-medium text-sm">Goal Tracker</p>
-                  <p className="text-xs text-text-tertiary">
-                    Track your personal goals on homepage
-                  </p>
-                </div>
-              </div>
-              <Toggle
-                enabled={experimentalFeatures.goalTracker}
-                onChange={(v) => updateExperimentalFeature('goalTracker', v)}
-              />
-            </div>
-          </div>
-        </Card>
-      </div>
-
-      {/* Links */}
-      <Card>
-        <a
-          href="https://docs.omi.me"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center justify-between py-3 text-text-primary hover:text-text-secondary transition-colors"
-        >
-          <div className="flex items-center gap-3">
-            <BookOpen className="w-5 h-5 text-text-tertiary" />
-            <span>API Documentation</span>
-          </div>
-          <ExternalLink className="w-4 h-4" />
-        </a>
-      </Card>
-
-      {/* Dialogs */}
-      <CreateApiKeyDialog
-        isOpen={showApiKeyDialog}
-        onClose={() => setShowApiKeyDialog(false)}
-        onCreateKey={onCreateApiKey}
-      />
-      <CreateMcpKeyDialog
-        isOpen={showMcpKeyDialog}
-        onClose={() => setShowMcpKeyDialog(false)}
-        onCreateKey={onCreateMcpKey}
-      />
-
-      {/* Delete Knowledge Graph Dialog */}
-      {showDeleteGraphDialog && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
-          onClick={() => setShowDeleteGraphDialog(false)}
-        >
-          <div
-            className="bg-bg-secondary rounded-2xl w-full max-w-md mx-4 p-6"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="flex items-center gap-3 mb-4">
-              <div className="p-3 rounded-xl bg-red-500/20">
-                <AlertTriangle className="w-6 h-6 text-red-400" />
-              </div>
-              <h3 className="text-lg font-semibold text-text-primary">
-                Delete Knowledge Graph?
-              </h3>
-            </div>
-            <p className="text-text-secondary text-sm mb-6">
-              This will delete all derived knowledge graph data (nodes and connections).
-              Your original memories will remain safe. The graph will be rebuilt over
-              time.
-            </p>
-            <div className="flex gap-3">
-              <button
-                onClick={() => setShowDeleteGraphDialog(false)}
-                className="flex-1 py-3 rounded-xl bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => {
-                  onDeleteKnowledgeGraph();
-                  setShowDeleteGraphDialog(false);
-                }}
-                className="flex-1 py-3 rounded-xl bg-red-500 text-white hover:bg-red-600 transition-colors"
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ============================================================================
-// Account Section
-// ============================================================================
-
-function AccountSection({
-  allUsage,
-  subscription,
-  cachedPlans,
-  onSubscriptionUpdate,
-  onSignOut,
-  onDeleteAccount,
-}: {
-  allUsage: AllUsageData | null;
-  subscription: UserSubscription | null;
-  cachedPlans: PricingOption[] | null;
-  onSubscriptionUpdate: () => void;
-  onSignOut: () => void;
-  onDeleteAccount: () => void;
-}) {
-  return (
-    <div className="space-y-8">
-      {/* Plan & Usage */}
-      <div id="plan-usage" className="scroll-mt-4">
-        <UsageSectionContent
-          allUsage={allUsage}
-          subscription={subscription}
-          onSubscriptionUpdate={onSubscriptionUpdate}
-          cachedPlans={cachedPlans}
-        />
-      </div>
-
-      {/* Fair Use */}
-      <div id="fair-use" className="scroll-mt-4">
-        <Card>
-          <Link
-            href="/fair-use"
-            className="flex items-center justify-between py-2 text-text-primary hover:text-text-secondary transition-colors"
-          >
-            <div className="flex items-center gap-3">
-              <Scale className="w-5 h-5 text-text-tertiary" />
-              <div>
-                <span className="font-medium">Fair Use</span>
-                <p className="text-sm text-text-quaternary">
-                  View speech usage and policy status
-                </p>
-              </div>
-            </div>
-            <ChevronRight className="w-4 h-4 text-text-quaternary" />
-          </Link>
-        </Card>
-      </div>
-
-      {/* Account Actions */}
-      <div id="actions" className="space-y-3 scroll-mt-4">
-        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
-          Account Actions
-        </h3>
-        <Card>
-          <button
-            onClick={onSignOut}
-            className="w-full flex items-center gap-3 py-3 text-text-primary hover:text-text-secondary transition-colors"
-          >
-            <LogOut className="w-5 h-5" />
-            <span className="font-medium">Sign Out</span>
-          </button>
-        </Card>
-
-        <Card className="border-red-500/20">
-          <button
-            onClick={onDeleteAccount}
-            className="w-full flex items-center gap-3 py-3 text-red-400 hover:text-red-300 transition-colors"
-          >
-            <Trash2 className="w-5 h-5" />
-            <div className="text-left">
-              <span className="font-medium block">Delete Account</span>
-              <span className="text-sm text-red-400/70">
-                Permanently delete your account and all data
-              </span>
-            </div>
-          </button>
-        </Card>
-      </div>
-
-      {/* Support */}
-      <div id="support" className="space-y-3 scroll-mt-4">
-        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
-          Support
-        </h3>
-        <Card>
-          <a
-            href="https://feedback.omi.me"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center justify-between py-3 border-b border-white/[0.06] text-text-primary hover:text-text-secondary transition-colors"
-          >
-            <span>Feedback & Bug Reports</span>
-            <ExternalLink className="w-4 h-4" />
-          </a>
-          <a
-            href="https://help.omi.me"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center justify-between py-3 text-text-primary hover:text-text-secondary transition-colors"
-          >
-            <span>Help Center</span>
-            <ExternalLink className="w-4 h-4" />
-          </a>
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-// ============================================================================
-// Main Settings Page Component
-// ============================================================================
-
-// Section titles and descriptions for the header
-
-export function SettingsPage() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const { user, signOut } = useAuth();
-  const { showToast } = useToast();
-  const [isExporting, setIsExporting] = useState(false);
-
-  // Get section from URL, default to 'account'
-  const sectionParam = searchParams.get('section');
-  const activeSection: SettingsSection =
-    sectionParam && isSettingsSectionId(sectionParam) ? sectionParam : 'account';
-
-  // Track which sections have been loaded (using ref to avoid dependency issues)
-  const loadedSectionsRef = useRef<Set<SettingsSection>>(new Set());
-  const [sectionLoading, setSectionLoading] = useState<SettingsSection | null>(null);
-
-  // Settings state - each section's data
-  const [language, setLanguage] = useState('en');
-  const [vocabulary, setVocabulary] = useState<string[]>([]);
-  const [dailySummary, setDailySummary] = useState<DailySummarySettings>({
-    enabled: true,
-    hour: 22,
-  });
-  const [recordingPermission, setRecordingPermissionState] = useState(false);
-  const [trainingDataOptIn, setTrainingDataOptInState] = useState(false);
-  const [allUsage, setAllUsage] = useState<AllUsageData | null>(null);
-  const [subscription, setSubscription] = useState<UserSubscription | null>(null);
-  const [cachedPlans, setCachedPlans] = useState<PricingOption[] | null>(null);
-  const [apiKeys, setApiKeys] = useState<DeveloperApiKey[]>([]);
-  const [mcpKeys, setMcpKeys] = useState<McpApiKey[]>([]);
-  const [webhooks, setWebhooks] = useState<DeveloperWebhooks>({});
-
-  // Dialog states
-  const [showSignOutDialog, setShowSignOutDialog] = useState(false);
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  // Load section data on demand
-  useEffect(() => {
-    const section = activeSection;
-    if (loadedSectionsRef.current.has(section)) return;
-
-    const loadSectionData = async () => {
-      setSectionLoading(section);
-      try {
-        switch (section) {
-          case 'privacy':
-            const [recording, training] = await Promise.all([
-              getRecordingPermission().catch(() => ({ enabled: false })),
-              getTrainingDataOptIn().catch(() => ({ opted_in: false })),
-            ]);
-            setRecordingPermissionState(recording.enabled);
-            setTrainingDataOptInState(training.opted_in);
-            break;
-          case 'account':
-            // The merged Account section renders the former Profile and Account
-            // groups together, so it loads both sets in one pass.
-            const [lang, vocab, summary, usageData, sub, plansData] = await Promise.all([
-              getUserLanguage().catch(() => 'en'),
-              getCustomVocabulary().catch(() => []),
-              getDailySummarySettings().catch(() => ({ enabled: true, hour: 22 })),
-              getAllUsageData().catch(() => null),
-              getUserSubscription().catch(() => null),
-              getAvailablePlans().catch(() => null),
-            ]);
-            setLanguage(lang);
-            setVocabulary(vocab);
-            setDailySummary(summary);
-            setAllUsage(usageData);
-            setSubscription(sub);
-            if (plansData?.plans) {
-              setCachedPlans(plansData.plans);
-            }
-            break;
-          case 'developer':
-            // Fetch API keys, MCP keys, webhook status, and individual webhook URLs in parallel
-            // Note: Status API returns boolean fields, URL API returns {url: string}
-            const [
-              keys,
-              mKeys,
-              webhookStatus,
-              memoryUrl,
-              transcriptUrl,
-              audioBytesUrl,
-              daySummaryUrl,
-            ] = await Promise.all([
-              getDeveloperApiKeys().catch(() => []),
-              getMcpApiKeys().catch(() => []),
-              getDeveloperWebhooksStatus().catch(() => ({})),
-              getDeveloperWebhook('memory_created').catch(() => ({ url: '' })),
-              getDeveloperWebhook('realtime_transcript').catch(() => ({ url: '' })),
-              getDeveloperWebhook('audio_bytes').catch(() => ({ url: '' })),
-              getDeveloperWebhook('day_summary').catch(() => ({ url: '' })),
-            ]);
-            setApiKeys(keys);
-            // Full MCP key is only returned at creation time; keep secrets in memory for this session only.
-            if (typeof window !== 'undefined') {
-              localStorage.removeItem('omi_mcp_api_key_secrets');
-            }
-            setMcpKeys(mKeys);
-            // Combine status (booleans) with URLs
-            const statusMap = webhookStatus as Record<string, boolean>;
-            setWebhooks({
-              memory_created: {
-                url: memoryUrl?.url || '',
-                enabled: statusMap['memory_created'] ?? false,
-              },
-              transcript_received: {
-                url: transcriptUrl?.url || '',
-                enabled: statusMap['realtime_transcript'] ?? false,
-              },
-              audio_bytes: {
-                url: audioBytesUrl?.url || '',
-                enabled: statusMap['audio_bytes'] ?? false,
-              },
-              day_summary: {
-                url: daySummaryUrl?.url || '',
-                enabled: statusMap['day_summary'] ?? false,
-              },
-            });
-            break;
-          // sections not listed here don't need API calls
-        }
-        loadedSectionsRef.current.add(section);
-      } catch (error) {
-        console.error(`Failed to load ${section} settings:`, error);
-      } finally {
-        setSectionLoading(null);
-      }
-    };
-
-    loadSectionData();
-  }, [activeSection]);
-
-  // Handlers
-  const handleLanguageChange = async (newLanguage: string) => {
-    const oldLanguage = language;
-    setLanguage(newLanguage);
-    try {
-      await setUserLanguage(newLanguage);
-    } catch {
-      setLanguage(oldLanguage);
-    }
-  };
-
-  const handleAddWord = async (word: string) => {
-    const newVocabulary = [...vocabulary, word];
-    setVocabulary(newVocabulary);
-    try {
-      await updateCustomVocabulary(newVocabulary);
-    } catch {
-      setVocabulary(vocabulary);
-    }
-  };
-
-  const handleRemoveWord = async (word: string) => {
-    const newVocabulary = vocabulary.filter((w) => w !== word);
-    setVocabulary(newVocabulary);
-    try {
-      await updateCustomVocabulary(newVocabulary);
-    } catch {
-      setVocabulary(vocabulary);
-    }
-  };
-
-  const handleDailySummaryToggle = async (enabled: boolean) => {
-    const oldSettings = dailySummary;
-    setDailySummary({ ...dailySummary, enabled });
-    try {
-      await updateDailySummarySettings({ ...dailySummary, enabled });
-    } catch {
-      setDailySummary(oldSettings);
-    }
-  };
-
-  const handleDailySummaryHourChange = async (hour: number) => {
-    const oldSettings = dailySummary;
-    setDailySummary({ ...dailySummary, hour });
-    try {
-      await updateDailySummarySettings({ ...dailySummary, hour });
-    } catch {
-      setDailySummary(oldSettings);
-    }
-  };
-
-  const handleRecordingPermissionChange = async (enabled: boolean) => {
-    const oldValue = recordingPermission;
-    setRecordingPermissionState(enabled);
-    try {
-      await setRecordingPermission(enabled);
-    } catch {
-      setRecordingPermissionState(oldValue);
-    }
-  };
-
-  const handleTrainingDataChange = async (optIn: boolean) => {
-    const oldValue = trainingDataOptIn;
-    setTrainingDataOptInState(optIn);
-    try {
-      await setTrainingDataOptIn(optIn);
-    } catch {
-      setTrainingDataOptInState(oldValue);
-    }
-  };
-
-  const refreshSubscription = async () => {
-    try {
-      const [usageData, sub] = await Promise.all([
-        getAllUsageData().catch(() => null),
-        getUserSubscription().catch(() => null),
-      ]);
-      setAllUsage(usageData);
-      setSubscription(sub);
-    } catch (error) {
-      console.error('Failed to refresh subscription:', error);
-    }
-  };
-
-  const handleCopyUserId = () => {
-    if (user?.uid) {
-      navigator.clipboard.writeText(user.uid);
-    }
-  };
-
-  const handleCreateApiKey = async (
-    name: string,
-    scopes: string[],
-  ): Promise<DeveloperApiKey | null> => {
-    try {
-      const newKey = await createDeveloperApiKey(name, scopes);
-      setApiKeys([...apiKeys, newKey]);
-      return newKey;
-    } catch (error) {
-      console.error('Failed to create API key:', error);
-      return null;
-    }
-  };
-
-  const handleDeleteApiKey = async (keyId: string) => {
-    try {
-      await deleteDeveloperApiKey(keyId);
-      setApiKeys(apiKeys.filter((k) => k.id !== keyId));
-    } catch (error) {
-      console.error('Failed to delete API key:', error);
-    }
-  };
-
-  const handleCreateMcpKey = async (name: string): Promise<McpApiKey | null> => {
-    try {
-      const newKey = await createMcpApiKey(name);
-      setMcpKeys([...mcpKeys, newKey]);
-      return newKey;
-    } catch (error) {
-      console.error('Failed to create MCP key:', error);
-      return null;
-    }
-  };
-
-  const handleDeleteMcpKey = async (keyId: string) => {
-    try {
-      await deleteMcpApiKey(keyId);
-      setMcpKeys(mcpKeys.filter((k) => k.id !== keyId));
-    } catch (error) {
-      console.error('Failed to delete MCP key:', error);
-    }
-  };
-
-  const handleExportData = async () => {
-    if (isExporting) return;
-    setIsExporting(true);
-    try {
-      const blob = await exportAllData();
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'omi-export.json';
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-      showToast('Data exported successfully', 'success');
-    } catch (error) {
-      console.error('Failed to export data:', error);
-      showToast('Failed to export data. Please try again.', 'error');
-    } finally {
-      setIsExporting(false);
-    }
-  };
-
-  const handleDeleteKnowledgeGraph = async () => {
-    try {
-      await deleteKnowledgeGraph();
-    } catch (error) {
-      console.error('Failed to delete knowledge graph:', error);
-    }
-  };
-
-  const handleWebhookChange = async (
-    type: string,
-    enabled: boolean,
-    url?: string,
-    delay?: string,
-  ) => {
-    // Convert internal type names to API type names
-    // UI uses 'transcript_received' but API expects 'realtime_transcript'
-    const apiType = type === 'transcript_received' ? 'realtime_transcript' : type;
-    const webhookType = apiType as
-      'memory_created' | 'realtime_transcript' | 'audio_bytes' | 'day_summary';
-    try {
-      // For audio_bytes, combine URL and delay if both are provided
-      const webhookUrl = type === 'audio_bytes' && url && delay ? `${url},${delay}` : url;
-      if (webhookUrl) {
-        await setDeveloperWebhook(webhookType, webhookUrl);
-      }
-      if (enabled) {
-        await enableDeveloperWebhook(webhookType);
-      } else {
-        await disableDeveloperWebhook(webhookType);
-      }
-      setWebhooks({
-        ...webhooks,
-        [type]: {
-          enabled,
-          url: url || webhooks[type as keyof DeveloperWebhooks]?.url || '',
-        },
-      });
-    } catch (error) {
-      console.error('Failed to update webhook:', error);
-    }
-  };
-
-  const handleSignOut = async () => {
-    await signOut();
-    router.push(SIGNED_OUT_DESTINATION);
-  };
-
-  const handleDeleteAccount = async () => {
-    setIsDeleting(true);
-    try {
-      await deleteAccount();
-      await signOut();
-      router.push(SIGNED_OUT_DESTINATION);
-    } catch {
-      setIsDeleting(false);
-    }
-  };
-
-  const renderSection = () => {
-    // Show loading spinner when section is loading
-    if (sectionLoading === activeSection) {
-      return (
-        <div className="h-64 flex items-center justify-center">
-          <Loader2 className="w-8 h-8 text-text-primary animate-spin" />
-        </div>
-      );
-    }
-
-    switch (activeSection) {
-      case 'privacy':
-        return (
-          <PrivacySection
-            recordingPermission={recordingPermission}
-            trainingDataOptIn={trainingDataOptIn}
-            onRecordingChange={handleRecordingPermissionChange}
-            onTrainingDataChange={handleTrainingDataChange}
-          />
-        );
-      case 'account':
-        return (
-          <div className="space-y-10">
-            <ProfileSection
-              user={user}
-              onCopyUserId={handleCopyUserId}
-              language={language}
-              vocabulary={vocabulary}
-              onLanguageChange={handleLanguageChange}
-              onAddWord={handleAddWord}
-              onRemoveWord={handleRemoveWord}
-              dailySummary={dailySummary}
-              onDailySummaryToggle={handleDailySummaryToggle}
-              onDailySummaryHourChange={handleDailySummaryHourChange}
-            />
-            <AccountSection
-              allUsage={allUsage}
-              subscription={subscription}
-              cachedPlans={cachedPlans}
-              onSubscriptionUpdate={refreshSubscription}
-              onSignOut={() => setShowSignOutDialog(true)}
-              onDeleteAccount={() => setShowDeleteDialog(true)}
-            />
-          </div>
-        );
-      case 'developer':
-        return (
-          <DeveloperSection
-            apiKeys={apiKeys}
-            mcpKeys={mcpKeys}
-            webhooks={webhooks}
-            onCreateApiKey={handleCreateApiKey}
-            onDeleteApiKey={handleDeleteApiKey}
-            onCreateMcpKey={handleCreateMcpKey}
-            onDeleteMcpKey={handleDeleteMcpKey}
-            onWebhookChange={handleWebhookChange}
-            onExportData={handleExportData}
-            isExporting={isExporting}
-            onDeleteKnowledgeGraph={handleDeleteKnowledgeGraph}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
-  const sectionInfo = SECTION_INFO[activeSection];
-
-  // Quick nav sections for each settings section
-  const getQuickNavSections = () => {
-    switch (activeSection) {
-      case 'account':
-        return [
-          { id: 'account-info', label: 'Account' },
-          { id: 'language', label: 'Language' },
-          { id: 'vocabulary', label: 'Vocabulary' },
-          { id: 'notifications', label: 'Notifications' },
-          { id: 'plan-usage', label: 'Plan & Usage' },
-          { id: 'fair-use', label: 'Fair Use' },
-          { id: 'actions', label: 'Actions' },
-          { id: 'support', label: 'Support' },
-        ];
-      case 'developer':
-        return [
-          { id: 'api-keys', label: 'API Keys' },
-          { id: 'mcp', label: 'MCP' },
-          { id: 'webhooks', label: 'Webhooks' },
-          { id: 'data-management', label: 'Data' },
-          { id: 'experimental', label: 'Experimental' },
-        ];
-      default:
-        return [];
-    }
-  };
-
-  const quickNavSections = getQuickNavSections();
-
-  return (
-    <div className="h-full flex flex-col">
-      {/* Export in-progress dialog */}
-      {isExporting && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <div className="absolute inset-0 bg-black/60" />
-          <div className="relative bg-bg-secondary rounded-2xl p-6 max-w-sm w-full mx-4 shadow-2xl border border-white/[0.06]">
-            <div className="flex flex-col items-center text-center gap-4">
-              <div className="p-3 rounded-full bg-white/[0.08]">
-                <Loader2 className="w-8 h-8 text-text-secondary animate-spin" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-text-primary">
-                  Exporting Your Data
-                </h3>
-                <p className="text-text-secondary mt-2 text-sm">
-                  This may take a moment depending on the amount of data in your account.
-                </p>
-              </div>
-              <div className="flex items-center gap-2 bg-yellow-500/10 rounded-xl px-4 py-2">
-                <AlertTriangle className="w-4 h-4 text-yellow-400 flex-shrink-0" />
-                <span className="text-xs text-yellow-400">
-                  Please don&apos;t close this tab
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Page Header */}
-      <PageHeader title={sectionInfo.title} icon={Settings} showBackButton />
-
-      {/* Main Content with optional Quick Nav */}
-      <main className="flex-1 overflow-y-auto pb-12">
-        <div className="max-w-4xl mx-auto px-6 lg:px-8 pt-6">
-          <div className="flex gap-6">
-            {/* Main content */}
-            <div className="flex-1 min-w-0">{renderSection()}</div>
-
-            {/* Quick Nav Sidebar - only show on desktop when there are sections */}
-            {quickNavSections.length > 0 && (
-              <div className="hidden lg:block w-32 flex-shrink-0">
-                <div className="sticky top-4">
-                  <p className="text-xs font-medium text-text-quaternary uppercase tracking-wider mb-3">
-                    On this page
-                  </p>
-                  <nav className="space-y-1">
-                    {quickNavSections.map((section) => (
-                      <a
-                        key={section.id}
-                        href={`#${section.id}`}
-                        className="block text-sm text-text-tertiary hover:text-text-primary transition-colors py-1"
-                      >
-                        {section.label}
-                      </a>
-                    ))}
-                  </nav>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </main>
-
-      {/* Dialogs */}
-      <ConfirmDialog
-        isOpen={showSignOutDialog}
-        title="Sign Out"
-        message="Are you sure you want to sign out?"
-        confirmLabel="Sign Out"
-        onConfirm={handleSignOut}
-        onCancel={() => setShowSignOutDialog(false)}
-      />
-
-      <ConfirmDialog
-        isOpen={showDeleteDialog}
-        title="Delete Account"
-        message="This action cannot be undone. All your data, conversations, and settings will be permanently deleted."
-        confirmLabel="Delete Account"
-        onConfirm={handleDeleteAccount}
-        onCancel={() => setShowDeleteDialog(false)}
-        isDestructive
-        isLoading={isDeleting}
-      />
-    </div>
-  );
-}
diff --git a/web/app/src/components/tasks/UpcomingTasksCard.tsx b/web/app/src/components/tasks/UpcomingTasksCard.tsx
deleted file mode 100644
index 2f68abe2022..00000000000
--- a/web/app/src/components/tasks/UpcomingTasksCard.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { Check, Clock, ArrowRight } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import type { ActionItem } from '@/types/conversation';
-
-interface UpcomingTasksCardProps {
-  tasks: ActionItem[];
-  onToggleComplete: (id: string, completed: boolean) => void;
-  maxItems?: number;
-}
-
-function formatDueText(dueAt: string | null | undefined): string {
-  if (!dueAt) return '';
-
-  const due = new Date(dueAt);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  due.setHours(0, 0, 0, 0);
-
-  const diffTime = due.getTime() - today.getTime();
-  const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
-
-  if (diffDays < 0) {
-    return `${Math.abs(diffDays)}d late`;
-  } else if (diffDays === 0) {
-    return 'Today';
-  } else if (diffDays === 1) {
-    return 'Tomorrow';
-  } else if (diffDays <= 7) {
-    return due.toLocaleDateString('en-US', { weekday: 'short' });
-  } else {
-    return due.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-  }
-}
-
-function isOverdue(dueAt: string | null | undefined): boolean {
-  if (!dueAt) return false;
-  const due = new Date(dueAt);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  due.setHours(0, 0, 0, 0);
-  return due < today;
-}
-
-export function UpcomingTasksCard({
-  tasks,
-  onToggleComplete,
-  maxItems = 5,
-}: UpcomingTasksCardProps) {
-  // Get upcoming tasks (non-completed, sorted by due date)
-  const upcomingTasks = tasks
-    .filter((t) => !t.completed)
-    .sort((a, b) => {
-      // Tasks with due dates come first
-      if (!a.due_at && !b.due_at) return 0;
-      if (!a.due_at) return 1;
-      if (!b.due_at) return -1;
-      return new Date(a.due_at).getTime() - new Date(b.due_at).getTime();
-    })
-    .slice(0, maxItems);
-
-  if (upcomingTasks.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="bg-bg-secondary rounded-xl p-4 border border-bg-tertiary overflow-hidden">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-sm font-medium text-text-primary flex items-center gap-2">
-          <ArrowRight className="w-4 h-4 text-white flex-shrink-0" />
-          Coming Up
-        </h3>
-        <span className="text-xs text-text-quaternary flex-shrink-0">
-          Next {upcomingTasks.length}
-        </span>
-      </div>
-
-      <div className="space-y-1">
-        {upcomingTasks.map((task, index) => (
-          <motion.div
-            key={task.id}
-            initial={{ opacity: 0, x: -10 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: index * 0.05 }}
-            className={cn(
-              'group flex items-center gap-2 p-2 -mx-2 rounded-lg',
-              'hover:bg-white/[0.03] transition-colors',
-              'min-w-0',
-            )}
-          >
-            {/* Quick complete checkbox */}
-            <button
-              onClick={() => onToggleComplete(task.id, true)}
-              className={cn(
-                'flex-shrink-0 w-4 h-4 rounded-full border',
-                'flex items-center justify-center',
-                'transition-all duration-150',
-                isOverdue(task.due_at)
-                  ? 'border-error hover:bg-error/20'
-                  : 'border-text-quaternary/50 hover:border-success hover:bg-success/20',
-              )}
-            >
-              <Check className="w-2.5 h-2.5 text-transparent group-hover:text-success" />
-            </button>
-
-            {/* Task description */}
-            <span className="flex-1 min-w-0 text-sm text-text-secondary">
-              {task.description}
-            </span>
-
-            {/* Due indicator */}
-            {task.due_at && (
-              <span
-                className={cn(
-                  'flex-shrink-0 text-xs flex items-center gap-1 whitespace-nowrap',
-                  isOverdue(task.due_at) ? 'text-error' : 'text-text-quaternary',
-                )}
-              >
-                <Clock className="w-3 h-3" />
-                {formatDueText(task.due_at)}
-              </span>
-            )}
-          </motion.div>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/web/app/src/components/tasks/WeekStrip.tsx b/web/app/src/components/tasks/WeekStrip.tsx
deleted file mode 100644
index a2304370d29..00000000000
--- a/web/app/src/components/tasks/WeekStrip.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { Check } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-interface DayData {
-  date: Date;
-  dayName: string;
-  dayNumber: number;
-  isToday: boolean;
-  pending: number;
-  completed: number;
-}
-
-interface WeekStripProps {
-  days: DayData[];
-  selectedDate?: Date | null;
-  onSelectDate?: (date: Date) => void;
-  onDropTask?: (date: Date, taskId: string) => void;
-}
-
-export function WeekStrip({
-  days,
-  selectedDate,
-  onSelectDate,
-  onDropTask,
-}: WeekStripProps) {
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.currentTarget.classList.add('ring-2', 'ring-white');
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.currentTarget.classList.remove('ring-2', 'ring-white');
-  };
-
-  const handleDrop = (e: React.DragEvent, date: Date) => {
-    e.preventDefault();
-    e.currentTarget.classList.remove('ring-2', 'ring-white');
-    const taskId = e.dataTransfer.getData('taskId');
-    if (taskId && onDropTask) {
-      onDropTask(date, taskId);
-    }
-  };
-
-  return (
-    <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
-      {days.map((day, index) => {
-        const isSelected = selectedDate?.toDateString() === day.date.toDateString();
-        const hasNoTasks = day.pending === 0 && day.completed === 0;
-        const allCompleted = day.pending === 0 && day.completed > 0;
-
-        return (
-          <motion.button
-            key={day.date.toISOString()}
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: index * 0.05 }}
-            onClick={() => onSelectDate?.(day.date)}
-            onDragOver={handleDragOver}
-            onDragLeave={handleDragLeave}
-            onDrop={(e) => handleDrop(e, day.date)}
-            className={cn(
-              'flex flex-col items-center min-w-[72px] px-3 py-2 rounded-lg',
-              'border transition-all duration-150',
-              day.isToday
-                ? 'bg-white/10 border-white/50'
-                : 'bg-bg-tertiary border-transparent hover:bg-bg-quaternary hover:border-white/30',
-              isSelected && 'ring-2 ring-white',
-            )}
-          >
-            {/* Day name */}
-            <span
-              className={cn(
-                'text-[10px] font-medium uppercase tracking-wide',
-                day.isToday ? 'text-white' : 'text-text-quaternary',
-              )}
-            >
-              {day.dayName}
-            </span>
-
-            {/* Day number */}
-            <span
-              className={cn(
-                'text-lg font-semibold my-0.5',
-                day.isToday ? 'text-text-primary' : 'text-text-secondary',
-              )}
-            >
-              {day.dayNumber}
-            </span>
-
-            {/* Badge */}
-            {!hasNoTasks && (
-              <div className="h-5 flex items-center justify-center">
-                {allCompleted ? (
-                  <div className="w-5 h-5 rounded-full bg-success flex items-center justify-center">
-                    <Check className="w-3 h-3 text-white" strokeWidth={3} />
-                  </div>
-                ) : (
-                  <span
-                    className={cn(
-                      'px-1.5 py-0.5 rounded-full text-xs font-medium',
-                      'bg-white text-black',
-                    )}
-                  >
-                    {day.pending}
-                  </span>
-                )}
-              </div>
-            )}
-
-            {/* Empty spacer to maintain height */}
-            {hasNoTasks && <div className="h-5" />}
-          </motion.button>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/web/app/src/components/tasks/index.ts b/web/app/src/components/tasks/index.ts
deleted file mode 100644
index 266a6d3ebfd..00000000000
--- a/web/app/src/components/tasks/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { TaskHub } from './TaskHub';
-export { TaskCard, TaskCardSkeleton } from './TaskCard';
-export { TaskGroup, TaskGroupSkeleton } from './TaskGroup';
-export { TaskProgressCard } from './TaskProgressCard';
-export { TaskQuickAdd } from './TaskQuickAdd';
-export { WeekStrip } from './WeekStrip';
-export { BulkActionBar } from './BulkActionBar';
diff --git a/web/app/src/components/ui/BetaRibbon.tsx b/web/app/src/components/ui/BetaRibbon.tsx
deleted file mode 100644
index 41463a89bd9..00000000000
--- a/web/app/src/components/ui/BetaRibbon.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { MessageSquare } from 'lucide-react';
-
-// Discord icon component
-function DiscordIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
-    </svg>
-  );
-}
-
-export function BetaRibbon() {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Don't render on server to avoid hydration issues
-  if (!mounted) return null;
-
-  // Don't show on mobile (overlay handles it)
-  if (typeof window !== 'undefined' && window.innerWidth < 1024) return null;
-
-  return (
-    <>
-      {/* Feedback links - positioned to the left of the ribbon */}
-      <div className="fixed top-3 right-36 z-[9998] flex items-center gap-2">
-        <a
-          href="https://feedback.omi.me"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-bg-tertiary/80 backdrop-blur-sm text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary transition-colors text-xs"
-        >
-          <MessageSquare className="w-3.5 h-3.5" />
-          <span>Feedback</span>
-        </a>
-        <a
-          href="http://discord.omi.me"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-bg-tertiary/80 backdrop-blur-sm text-text-tertiary hover:text-text-primary hover:bg-bg-tertiary transition-colors text-xs"
-        >
-          <DiscordIcon className="w-3.5 h-3.5" />
-          <span>Discord</span>
-        </a>
-      </div>
-
-      {/* Beta ribbon */}
-      <div className="fixed top-0 right-0 z-[9998] overflow-hidden pointer-events-none w-32 h-32">
-        <a
-          href="https://feedback.omi.me"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="pointer-events-auto absolute top-6 -right-8 w-36 text-center py-1.5 bg-text-primary text-bg-primary text-xs font-semibold uppercase tracking-wider rotate-45 shadow-lg hover:bg-text-primary/90 transition-colors"
-        >
-          Beta
-        </a>
-      </div>
-    </>
-  );
-}
diff --git a/web/app/src/components/ui/OmiOrb.tsx b/web/app/src/components/ui/OmiOrb.tsx
deleted file mode 100644
index 1d53189469e..00000000000
--- a/web/app/src/components/ui/OmiOrb.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  OmiMarkGeometry,
-  omiBurstForTurn,
-  omiDotPlacement,
-  omiMotionForState,
-  omiOrbPlacements,
-  smoothOmiLevel,
-  type OmiOrbMotion,
-  type OmiOrbState,
-} from '@/lib/omiOrb';
-
-interface OmiOrbProps {
-  state?: OmiOrbState;
-  /** Overrides the motion the state would pick. */
-  motion?: OmiOrbMotion;
-  /** Input level, 0 to 1. Drives `sine` and `audioBars`; ignored elsewhere. */
-  level?: number;
-  size?: number;
-  /** Stable for the life of one wait, so the motion never twitches mid-wait. */
-  seed?: number;
-  className?: string;
-  paused?: boolean;
-}
-
-/**
- * One full lap of each motion. The idle mark turns slowly; the level-metering
- * motions have to keep up with speech, so they run much tighter.
- */
-const LAP_SECONDS: Record<OmiOrbMotion, number> = {
-  mark: 6,
-  spin: 6,
-  pulse: 1.7,
-  gather: 2.4,
-  sine: 1.6,
-  travellingWave: 2.2,
-  standingWave: 2.4,
-  pendulumWave: 3,
-  tusiPendulum: 3,
-  audioBars: 2,
-  tusi: 2.6,
-  nestedOrbit: 3,
-  doubleCircle: 3,
-  epicycloid: 2.6,
-  lissajous: 3,
-  pendulumSwing: 2.4,
-  successBurst: 2,
-};
-
-const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
-
-function prefersReducedMotion(): boolean {
-  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
-    return false;
-  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
-}
-
-/**
- * Tracks the preference rather than sampling it once: a reader who turns
- * reduced motion on mid-session is asking the animation already on screen to
- * stop, and a value read at mount can never answer that.
- */
-function useReducedMotion(): boolean {
-  const [reduced, setReduced] = useState(prefersReducedMotion);
-
-  useEffect(() => {
-    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
-    const query = window.matchMedia(REDUCED_MOTION_QUERY);
-    const update = () => setReduced(query.matches);
-    update();
-    query.addEventListener('change', update);
-    return () => query.removeEventListener('change', update);
-  }, []);
-
-  return reduced;
-}
-
-export function OmiOrb({
-  state = 'idle',
-  motion,
-  level = 0,
-  size = 46,
-  seed = 0,
-  className,
-  paused = false,
-}: OmiOrbProps) {
-  const active: OmiOrbMotion = motion ?? omiMotionForState(state, seed);
-  const reduced = useReducedMotion();
-  const usesCompositorPulse = active === 'pulse';
-
-  const dots = useRef<(SVGCircleElement | null)[]>([]);
-  const levelRef = useRef(level);
-  const smoothedLevelRef = useRef(level);
-  levelRef.current = level;
-
-  const unit = size / OmiMarkGeometry.canvas;
-  const centre = size / 2;
-
-  // The resting frame, used for the server render, for reduced motion, and as
-  // the first paint before the loop takes over the attributes directly.
-  const restFrame = useMemo(
-    () =>
-      omiOrbPlacements({
-        motion: reduced ? 'mark' : active,
-        turn: 0,
-        level: reduced ? 0 : level,
-      }),
-    // `level` is read only for the very first paint; the loop owns it after.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [active, reduced],
-  );
-
-  useEffect(() => {
-    if (reduced || paused) return;
-    const lap = LAP_SECONDS[active] * 1000;
-    let frame = 0;
-    let start = 0;
-    let previous = 0;
-
-    const tick = (now: number) => {
-      if (start === 0) start = now;
-      const elapsed = previous === 0 ? 1000 / 60 : now - previous;
-      previous = now;
-      smoothedLevelRef.current = smoothOmiLevel(
-        smoothedLevelRef.current,
-        levelRef.current,
-        elapsed,
-      );
-      const turn = ((((now - start) / lap) % 1) + 1) % 1;
-      for (let i = 0; i < OmiMarkGeometry.dotCount; i++) {
-        const node = dots.current[i];
-        if (!node) continue;
-        const dot = omiDotPlacement({
-          motion: active,
-          index: i,
-          turn,
-          level: smoothedLevelRef.current,
-          burst: omiBurstForTurn(active, turn),
-        });
-        if (usesCompositorPulse) {
-          node.style.transform = `scale(${dot.scale})`;
-          node.style.opacity = String(Math.max(0, Math.min(1, dot.alpha)));
-          continue;
-        }
-        // Mutating attributes directly keeps the tree from re-rendering 60
-        // times a second for what is purely a paint change.
-        node.setAttribute('cx', String(centre + dot.offset.x * unit));
-        node.setAttribute('cy', String(centre + dot.offset.y * unit));
-        node.setAttribute('r', String(OmiMarkGeometry.dotRadius * unit * dot.scale));
-        node.setAttribute('opacity', String(Math.max(0, Math.min(1, dot.alpha))));
-      }
-      frame = requestAnimationFrame(tick);
-    };
-
-    frame = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frame);
-  }, [active, reduced, paused, centre, unit, usesCompositorPulse]);
-
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      className={className}
-      role="img"
-      aria-label="Omi"
-    >
-      {restFrame.map((dot, i) => {
-        const opacity = Math.max(0, Math.min(1, dot.alpha));
-        return (
-          <circle
-            key={i}
-            ref={(node) => {
-              dots.current[i] = node;
-            }}
-            cx={centre + dot.offset.x * unit}
-            cy={centre + dot.offset.y * unit}
-            r={OmiMarkGeometry.dotRadius * unit * (usesCompositorPulse ? 1 : dot.scale)}
-            opacity={usesCompositorPulse ? undefined : opacity}
-            fill="currentColor"
-            style={
-              usesCompositorPulse
-                ? {
-                    opacity,
-                    transform: `scale(${dot.scale})`,
-                    transformBox: 'fill-box',
-                    transformOrigin: 'center',
-                  }
-                : undefined
-            }
-          />
-        );
-      })}
-    </svg>
-  );
-}
-
-export default OmiOrb;
diff --git a/web/app/src/components/ui/button.tsx b/web/app/src/components/ui/button.tsx
deleted file mode 100644
index 924e44e0376..00000000000
--- a/web/app/src/components/ui/button.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/40 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-white text-black hover:bg-white/90',
-        destructive: 'bg-error text-white hover:bg-error/90',
-        outline:
-          'border border-stroke bg-transparent text-text-primary hover:bg-bg-tertiary',
-        secondary: 'bg-bg-tertiary text-text-primary hover:bg-bg-quaternary',
-        ghost: 'text-text-secondary hover:bg-bg-tertiary hover:text-text-primary',
-        link: 'text-text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-chip px-3 text-xs',
-        lg: 'h-10 rounded-control px-8',
-        icon: 'h-9 w-9 rounded-chip',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
diff --git a/web/app/src/components/ui/dialog.tsx b/web/app/src/components/ui/dialog.tsx
deleted file mode 100644
index afaa0a0bf7d..00000000000
--- a/web/app/src/components/ui/dialog.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-black/70 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card border border-stroke bg-bg-secondary p-6 text-text-primary shadow-strong duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-element p-1 text-text-tertiary opacity-70 transition-opacity hover:bg-bg-tertiary hover:text-text-primary hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-white/40 disabled:pointer-events-none">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
-    {...props}
-  />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      'text-lg font-semibold leading-none tracking-tight text-text-primary',
-      className,
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-text-tertiary', className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
diff --git a/web/app/src/components/ui/dropdown-menu.tsx b/web/app/src/components/ui/dropdown-menu.tsx
deleted file mode 100644
index 8eeb92d34cf..00000000000
--- a/web/app/src/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center gap-2 rounded-element px-2 py-1.5 text-sm text-text-secondary outline-none focus:bg-bg-tertiary focus:text-text-primary data-[state=open]:bg-bg-tertiary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-section border border-stroke bg-bg-raised p-1 text-text-primary shadow-strong data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-section border border-stroke bg-bg-raised p-1 text-text-primary shadow-strong',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-element px-2 py-1.5 text-sm text-text-secondary outline-none transition-colors focus:bg-bg-tertiary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-element py-1.5 pl-8 pr-2 text-sm text-text-secondary outline-none transition-colors focus:bg-bg-tertiary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-element py-1.5 pl-8 pr-2 text-sm text-text-secondary outline-none transition-colors focus:bg-bg-tertiary focus:text-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-xs font-semibold uppercase tracking-wide text-text-quaternary',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-stroke', className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest text-text-quaternary', className)}
-      {...props}
-    />
-  );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};
diff --git a/web/app/src/components/ui/scroll-area.tsx b/web/app/src/components/ui/scroll-area.tsx
deleted file mode 100644
index f7f0ca51f54..00000000000
--- a/web/app/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-import { cn } from '@/lib/utils';
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      'flex touch-none select-none transition-colors',
-      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' &&
-        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-bg-quaternary" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
diff --git a/web/app/src/components/ui/separator.tsx b/web/app/src/components/ui/separator.tsx
deleted file mode 100644
index ddf2c61a1ee..00000000000
--- a/web/app/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-
-import { cn } from '@/lib/utils';
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      'shrink-0 bg-stroke',
-      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-      className,
-    )}
-    {...props}
-  />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
diff --git a/web/app/src/components/ui/skeleton.tsx b/web/app/src/components/ui/skeleton.tsx
deleted file mode 100644
index 97efbe06ba7..00000000000
--- a/web/app/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { cn } from '@/lib/utils';
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('animate-pulse rounded-element bg-bg-tertiary', className)}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };
diff --git a/web/app/src/components/ui/tabs.tsx b/web/app/src/components/ui/tabs.tsx
deleted file mode 100644
index 7a11d54972a..00000000000
--- a/web/app/src/components/ui/tabs.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-
-import { cn } from '@/lib/utils';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'inline-flex h-9 items-center justify-center rounded-control bg-bg-tertiary p-1 text-text-tertiary',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-chip px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/40 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-black',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/40',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/web/app/src/components/ui/tooltip.tsx b/web/app/src/components/ui/tooltip.tsx
deleted file mode 100644
index 6e626f07692..00000000000
--- a/web/app/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-
-import { cn } from '@/lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 overflow-hidden rounded-chip border border-stroke bg-bg-raised px-3 py-1.5 text-xs text-text-primary shadow-medium animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/web/app/src/features/auth/index.ts b/web/app/src/features/auth/index.ts
new file mode 100644
index 00000000000..a4a16fc034a
--- /dev/null
+++ b/web/app/src/features/auth/index.ts
@@ -0,0 +1,3 @@
+export { AuthProvider, useAuth } from './ui/AuthProvider';
+export { ProtectedRoute } from './ui/ProtectedRoute';
+export { LoginPanel } from './ui/LoginPanel';
diff --git a/web/app/src/components/auth/AuthProvider.tsx b/web/app/src/features/auth/ui/AuthProvider.tsx
similarity index 100%
rename from web/app/src/components/auth/AuthProvider.tsx
rename to web/app/src/features/auth/ui/AuthProvider.tsx
diff --git a/web/app/src/components/auth/LoginPanel.tsx b/web/app/src/features/auth/ui/LoginPanel.tsx
similarity index 100%
rename from web/app/src/components/auth/LoginPanel.tsx
rename to web/app/src/features/auth/ui/LoginPanel.tsx
diff --git a/web/app/src/components/auth/ProtectedRoute.tsx b/web/app/src/features/auth/ui/ProtectedRoute.tsx
similarity index 100%
rename from web/app/src/components/auth/ProtectedRoute.tsx
rename to web/app/src/features/auth/ui/ProtectedRoute.tsx
diff --git a/web/app/src/components/auth/__tests__/AuthProvider.test.tsx b/web/app/src/features/auth/ui/__tests__/AuthProvider.test.tsx
similarity index 100%
rename from web/app/src/components/auth/__tests__/AuthProvider.test.tsx
rename to web/app/src/features/auth/ui/__tests__/AuthProvider.test.tsx
diff --git a/web/app/src/features/chat/ARCHITECTURE.md b/web/app/src/features/chat/ARCHITECTURE.md
new file mode 100644
index 00000000000..1c8709757dc
--- /dev/null
+++ b/web/app/src/features/chat/ARCHITECTURE.md
@@ -0,0 +1,8 @@
+# chat
+
+Not a rail destination. Lives on `/home` and as an overlay from other pages.
+
+- `api.ts` — sessions, streaming messages, file upload, Gemini live tokens
+- `model.ts` — stream-line decode (`parseStreamLine`)
+- `ui/` — `ChatComposer` (home pill) and `ChatPanel` (overlay) share `useChatAttachments`; they are not one visual composer
+- `useChat.ts` / `useGeminiLive.ts` — signal stores; live session ownership is still the client-ref guard
diff --git a/web/app/src/lib/__tests__/chatSessionRouting.test.ts b/web/app/src/features/chat/__tests__/chatSessionRouting.test.ts
similarity index 99%
rename from web/app/src/lib/__tests__/chatSessionRouting.test.ts
rename to web/app/src/features/chat/__tests__/chatSessionRouting.test.ts
index db4e9626c6a..84af4918a32 100644
--- a/web/app/src/lib/__tests__/chatSessionRouting.test.ts
+++ b/web/app/src/features/chat/__tests__/chatSessionRouting.test.ts
@@ -12,7 +12,7 @@ const {
   createGeminiLiveSession,
   saveRealtimeMessage,
   reportGeminiLiveUsage,
-} = await import('@/lib/api');
+} = await import('@/features/chat/api');
 
 /**
  * Every `/v2/messages` call must carry the session the reader has selected.
diff --git a/web/app/src/features/chat/__tests__/parseStreamLine.test.ts b/web/app/src/features/chat/__tests__/parseStreamLine.test.ts
new file mode 100644
index 00000000000..b17cc8c1a67
--- /dev/null
+++ b/web/app/src/features/chat/__tests__/parseStreamLine.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { parseStreamLine } from '../model';
+
+describe('parseStreamLine', () => {
+  it('parses think and data prefixes', () => {
+    expect(parseStreamLine('think: hello')).toEqual({ type: 'think', text: 'hello' });
+    expect(parseStreamLine('data: world')).toEqual({ type: 'data', text: 'world' });
+  });
+
+  it('returns null for a blank line', () => {
+    expect(parseStreamLine('')).toBeNull();
+    expect(parseStreamLine('   ')).toBeNull();
+  });
+});
diff --git a/web/app/src/hooks/__tests__/useChat.test.tsx b/web/app/src/features/chat/__tests__/useChat.test.tsx
similarity index 97%
rename from web/app/src/hooks/__tests__/useChat.test.tsx
rename to web/app/src/features/chat/__tests__/useChat.test.tsx
index 5193a4a8bdc..aca451b70e3 100644
--- a/web/app/src/hooks/__tests__/useChat.test.tsx
+++ b/web/app/src/features/chat/__tests__/useChat.test.tsx
@@ -2,15 +2,15 @@ import { act, renderHook, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { MessageFile } from '@/types/conversation';
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/chat/api', () => ({
   getMessages: vi.fn(),
   sendMessageStream: vi.fn(),
   clearMessages: vi.fn(),
   saveRealtimeMessage: vi.fn(),
 }));
 
-const { getMessages, sendMessageStream, saveRealtimeMessage } = await import('@/lib/api');
-const { useChat } = await import('@/hooks/useChat');
+const { getMessages, sendMessageStream, saveRealtimeMessage } = await import('@/features/chat/api');
+const { useChat } = await import('@/features/chat/useChat');
 
 type Deferred<T> = { promise: Promise<T>; resolve: (value: T) => void };
 
diff --git a/web/app/src/hooks/__tests__/useGeminiLive.test.tsx b/web/app/src/features/chat/__tests__/useGeminiLive.test.tsx
similarity index 94%
rename from web/app/src/hooks/__tests__/useGeminiLive.test.tsx
rename to web/app/src/features/chat/__tests__/useGeminiLive.test.tsx
index f0060800deb..309c7fe7d79 100644
--- a/web/app/src/hooks/__tests__/useGeminiLive.test.tsx
+++ b/web/app/src/features/chat/__tests__/useGeminiLive.test.tsx
@@ -14,7 +14,7 @@ const doubles = vi.hoisted(() => ({
   }>,
 }));
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/chat/api', () => ({
   createGeminiLiveSession: vi.fn(async () => ({ token: 'session-token' })),
   reportGeminiLiveUsage: vi.fn(async () => undefined),
 }));
@@ -37,7 +37,7 @@ vi.mock('@/lib/geminiLive', () => ({
   },
 }));
 
-const { useGeminiLive } = await import('@/hooks/useGeminiLive');
+const { useGeminiLive } = await import('@/features/chat/useGeminiLive');
 
 beforeEach(() => {
   vi.clearAllMocks();
diff --git a/web/app/src/features/chat/api.ts b/web/app/src/features/chat/api.ts
new file mode 100644
index 00000000000..a3eb8d46226
--- /dev/null
+++ b/web/app/src/features/chat/api.ts
@@ -0,0 +1,397 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+import {
+  invalidateCache,
+  invalidationPatterns,
+  fetchWithCache,
+  cacheKeys,
+  CACHE_TTL,
+} from '@/lib/cache';
+import {
+  API_BASE_URL,
+  fetchAuthorizedBlob,
+  fetchWithAuth,
+  getAudioAuthHeaders,
+} from '@/shared/api/client';
+import type { ServerMessage, MessageChunk, MessageFile } from '@/types/conversation';
+import type { ChatSession } from '@/types/chatSessions';
+import { parseStreamLine } from './model';
+export { parseStreamLine };
+
+interface ChatSessionWire {
+  id: string;
+  title?: string | null;
+  preview?: string | null;
+  created_at: string;
+  updated_at: string;
+  app_id?: string | null;
+  message_count?: number | null;
+  starred?: boolean | null;
+}
+
+function toChatSession(wire: ChatSessionWire): ChatSession {
+  return {
+    id: wire.id,
+    title: wire.title ?? undefined,
+    preview: wire.preview ?? undefined,
+    createdAt: wire.created_at,
+    updatedAt: wire.updated_at,
+    appId: wire.app_id ?? undefined,
+    messageCount: wire.message_count ?? 0,
+    starred: Boolean(wire.starred),
+  };
+}
+
+export async function getChatSessions(appId?: string): Promise<ChatSession[]> {
+  const query = appId ? `?app_id=${encodeURIComponent(appId)}` : '';
+  const sessions = await fetchWithAuth<ChatSessionWire[]>(`/v2/chat-sessions${query}`);
+  return Array.isArray(sessions) ? sessions.map(toChatSession) : [];
+}
+
+export async function createChatSession(
+  params: { title?: string; app_id?: string } = {},
+): Promise<ChatSession> {
+  return toChatSession(
+    await fetchWithAuth<ChatSessionWire>('/v2/chat-sessions', {
+      method: 'POST',
+      body: JSON.stringify(params),
+    }),
+  );
+}
+
+export async function updateChatSession(
+  id: string,
+  updates: { title?: string; starred?: boolean },
+): Promise<ChatSession> {
+  return toChatSession(
+    await fetchWithAuth<ChatSessionWire>(`/v2/chat-sessions/${id}`, {
+      method: 'PATCH',
+      body: JSON.stringify(updates),
+    }),
+  );
+}
+
+export async function deleteChatSession(id: string): Promise<void> {
+  await fetchWithAuth(`/v2/chat-sessions/${id}`, { method: 'DELETE' });
+}
+
+export interface RealtimeSessionToken {
+  provider: 'gemini';
+  token: string;
+  expires_at?: string;
+}
+
+export interface RealtimeUsageReport {
+  input_text_tokens: number;
+  input_audio_tokens: number;
+  input_cached_tokens: number;
+  output_text_tokens: number;
+  output_audio_tokens: number;
+}
+
+interface SavedRealtimeMessage {
+  id: string;
+  created_at: string;
+  session_id?: string | null;
+}
+
+export async function createGeminiLiveSession(): Promise<RealtimeSessionToken> {
+  return fetchWithAuth<RealtimeSessionToken>('/v2/realtime/session', {
+    method: 'POST',
+    body: JSON.stringify({ provider: 'gemini' }),
+  });
+}
+
+export async function saveRealtimeMessage(params: {
+  text: string;
+  sender: 'human' | 'ai';
+  clientMessageId: string;
+  appId?: string;
+  sessionId?: string | null;
+}): Promise<SavedRealtimeMessage> {
+  return fetchWithAuth<SavedRealtimeMessage>('/v2/desktop/messages', {
+    method: 'POST',
+    body: JSON.stringify({
+      text: params.text,
+      sender: params.sender,
+      app_id: params.appId,
+      session_id: params.sessionId,
+      client_message_id: params.clientMessageId,
+      message_source: 'realtime_voice',
+    }),
+  });
+}
+
+export async function reportGeminiLiveUsage(usage: RealtimeUsageReport): Promise<void> {
+  await fetchWithAuth('/v2/realtime/usage', {
+    method: 'POST',
+    body: JSON.stringify({
+      provider: 'gemini',
+      model: 'gemini-3.1-flash-live-preview',
+      ...usage,
+    }),
+  });
+}
+
+/**
+ * Get message history
+ */
+export async function getMessages(
+  appId?: string,
+  chatSessionId?: string | null,
+): Promise<ServerMessage[]> {
+  const queryParams = new URLSearchParams();
+  if (appId) {
+    queryParams.set('app_id', appId);
+  }
+  // Omitted entirely for the default shared thread; naming a session targets
+  // that one specific thread.
+  if (chatSessionId) {
+    queryParams.set('chat_session_id', chatSessionId);
+  }
+
+  const endpoint = `/v2/messages${queryParams.toString() ? `?${queryParams}` : ''}`;
+  return fetchWithAuth<ServerMessage[]>(endpoint);
+}
+
+/**
+ * Send a message with streaming response
+ */
+export async function sendMessageStream(
+  text: string,
+  onChunk: (chunk: MessageChunk) => void,
+  options?: {
+    appId?: string;
+    /** Target one specific thread; omit for the default shared thread. */
+    chatSessionId?: string | null;
+    fileIds?: string[];
+    context?: {
+      type: string;
+      id?: string;
+      title?: string;
+      summary?: string;
+      start_date?: string;
+      end_date?: string;
+    } | null;
+  },
+): Promise<void> {
+  let token: string | null = null;
+
+  try {
+    token = await getIdToken();
+  } catch (tokenError) {
+    console.error('Failed to get auth token:', tokenError);
+    throw new Error('Failed to get authentication token');
+  }
+
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+
+  const queryParams = new URLSearchParams();
+  if (options?.appId) {
+    queryParams.set('app_id', options.appId);
+  }
+  // Without this the reply is persisted to the default shared thread while the
+  // UI shows it under the selected one.
+  if (options?.chatSessionId) {
+    queryParams.set('chat_session_id', options.chatSessionId);
+  }
+
+  const url = `${API_BASE_URL}/v2/messages${queryParams.toString() ? `?${queryParams}` : ''}`;
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+      'X-App-Platform': 'web',
+    },
+    body: JSON.stringify({
+      text,
+      file_ids: options?.fileIds || [],
+      context: options?.context
+        ? {
+            type: options.context.type === 'general' ? 'recap' : options.context.type,
+            id: options.context.id,
+            title: options.context.title,
+            start_date: options.context.start_date,
+            end_date: options.context.end_date,
+          }
+        : null,
+    }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => 'No error body');
+    console.error('Send message error:', response.status, errorText);
+    throw new Error(`Failed to send message: ${response.status}`);
+  }
+
+  if (!response.body) {
+    throw new Error('No response body');
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = '';
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+
+      // Process complete lines
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || ''; // Keep incomplete line in buffer
+
+      for (const line of lines) {
+        const chunk = parseStreamLine(line);
+        if (chunk) {
+          onChunk(chunk);
+        }
+      }
+    }
+
+    // Process any remaining buffer
+    if (buffer) {
+      const chunk = parseStreamLine(buffer);
+      if (chunk) {
+        onChunk(chunk);
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+/**
+ * Clear message history
+ */
+export async function clearMessages(
+  appId?: string,
+  chatSessionId?: string | null,
+): Promise<void> {
+  const queryParams = new URLSearchParams();
+  if (appId) {
+    queryParams.set('app_id', appId);
+  }
+  // Clearing must delete the thread the reader is looking at, not the shared one.
+  if (chatSessionId) {
+    queryParams.set('chat_session_id', chatSessionId);
+  }
+
+  const endpoint = `/v2/messages${queryParams.toString() ? `?${queryParams}` : ''}`;
+  await fetchWithAuth(endpoint, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * Upload files for chat
+ */
+export async function uploadChatFiles(
+  files: File[],
+  appId?: string,
+): Promise<MessageFile[]> {
+  let token: string | null = null;
+
+  try {
+    token = await getIdToken();
+  } catch (tokenError) {
+    console.error('Failed to get auth token:', tokenError);
+    throw new Error('Failed to get authentication token');
+  }
+
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+
+  const queryParams = new URLSearchParams();
+  if (appId) {
+    queryParams.set('app_id', appId);
+  }
+
+  const url = `${API_BASE_URL}/v2/files${queryParams.toString() ? `?${queryParams}` : ''}`;
+
+  const formData = new FormData();
+  for (const file of files) {
+    // Append with explicit filename to ensure proper handling
+    formData.append('files', file, file.name);
+  }
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => 'No error body');
+    console.error('Upload files error:', response.status, errorText);
+    throw new Error(`Failed to upload files: ${response.status}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * Transcribe voice message to text
+ */
+function getAudioFileExtension(mimeType: string): string {
+  const normalizedMimeType = mimeType.split(';', 1)[0].toLowerCase();
+  if (normalizedMimeType === 'audio/webm' || normalizedMimeType === 'video/webm')
+    return 'webm';
+  if (normalizedMimeType === 'audio/mp4' || normalizedMimeType === 'video/mp4')
+    return 'mp4';
+  return 'wav';
+}
+
+export async function transcribeVoiceMessage(audioBlob: Blob): Promise<string> {
+  let token: string | null = null;
+
+  try {
+    token = await getIdToken();
+  } catch (tokenError) {
+    console.error('Failed to get auth token:', tokenError);
+    throw new Error('Failed to get authentication token');
+  }
+
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+
+  const url = `${API_BASE_URL}/v2/voice-message/transcribe`;
+
+  const formData = new FormData();
+  // The backend uses the filename extension when it uploads audio for STT.
+  formData.append('files', audioBlob, `audio.${getAudioFileExtension(audioBlob.type)}`);
+  const deviceIdHash = await getWebDeviceIdHash();
+  const headers: HeadersInit = {
+    Authorization: `Bearer ${token}`,
+    'X-App-Platform': 'web',
+  };
+  if (deviceIdHash) {
+    headers['X-Device-Id-Hash'] = deviceIdHash;
+  }
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers,
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => 'No error body');
+    console.error('Transcribe error:', response.status, errorText);
+    throw new Error(`Failed to transcribe audio: ${response.status}`);
+  }
+
+  const data = await response.json();
+  return data.transcript || '';
+}
diff --git a/web/app/src/features/chat/index.ts b/web/app/src/features/chat/index.ts
new file mode 100644
index 00000000000..ad53eb1e40f
--- /dev/null
+++ b/web/app/src/features/chat/index.ts
@@ -0,0 +1,9 @@
+export { ChatProvider, useChat } from './ui/ChatContext';
+export { ChatPanel } from './ui/ChatPanel';
+export { ChatBubble } from './ui/ChatBubble';
+export { ChatComposer, type ChatComposerHandle } from './ui/ChatComposer';
+export { ChatTranscript } from './ui/ChatTranscript';
+export { RecordingStage } from './ui/RecordingStage';
+export { useGeminiLive } from './useGeminiLive';
+export { useChat as useChatSession } from './useChat';
+export * from './api';
diff --git a/web/app/src/features/chat/model.ts b/web/app/src/features/chat/model.ts
new file mode 100644
index 00000000000..3c9f39ca717
--- /dev/null
+++ b/web/app/src/features/chat/model.ts
@@ -0,0 +1,79 @@
+import type { ServerMessage, MessageChunk, MessageChunkType } from '@/types/conversation';
+
+/**
+ * Decode base64 string to UTF-8 text
+ */
+function decodeBase64Utf8(base64: string): string {
+  try {
+    // Decode base64 to binary string
+    const binaryString = atob(base64);
+    // Convert binary string to Uint8Array
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    // Decode as UTF-8
+    const decoder = new TextDecoder('utf-8');
+    return decoder.decode(bytes);
+  } catch (e) {
+    console.error('Failed to decode base64 UTF-8:', e);
+    // Fallback to simple atob
+    return atob(base64);
+  }
+}
+
+/**
+ * Parse a streaming response line into a MessageChunk
+ */
+export function parseStreamLine(line: string): MessageChunk | null {
+  if (!line || line.trim() === '') return null;
+
+  if (line.startsWith('think: ')) {
+    return {
+      type: 'think' as MessageChunkType,
+      text: line.slice(7).replace(/__CRLF__/g, '\n'),
+    };
+  }
+  if (line.startsWith('data: ')) {
+    return {
+      type: 'data' as MessageChunkType,
+      text: line.slice(6).replace(/__CRLF__/g, '\n'),
+    };
+  }
+  if (line.startsWith('done: ')) {
+    try {
+      const decoded = decodeBase64Utf8(line.slice(6));
+      const message = JSON.parse(decoded) as ServerMessage;
+      return {
+        type: 'done' as MessageChunkType,
+        text: decoded,
+        message,
+      };
+    } catch (e) {
+      console.error('Failed to parse done chunk:', e);
+      return null;
+    }
+  }
+  if (line.startsWith('message: ')) {
+    try {
+      const decoded = decodeBase64Utf8(line.slice(9));
+      const message = JSON.parse(decoded) as ServerMessage;
+      return {
+        type: 'message' as MessageChunkType,
+        text: decoded,
+        message,
+      };
+    } catch (e) {
+      console.error('Failed to parse message chunk:', e);
+      return null;
+    }
+  }
+  if (line.startsWith('error: ')) {
+    return {
+      type: 'error' as MessageChunkType,
+      text: line.slice(7),
+    };
+  }
+
+  return null;
+}
diff --git a/web/app/src/components/chat/ChatBubble.tsx b/web/app/src/features/chat/ui/ChatBubble.tsx
similarity index 100%
rename from web/app/src/components/chat/ChatBubble.tsx
rename to web/app/src/features/chat/ui/ChatBubble.tsx
diff --git a/web/app/src/components/chat/ChatComposer.tsx b/web/app/src/features/chat/ui/ChatComposer.tsx
similarity index 72%
rename from web/app/src/components/chat/ChatComposer.tsx
rename to web/app/src/features/chat/ui/ChatComposer.tsx
index 728211126d5..83446a23f2b 100644
--- a/web/app/src/components/chat/ChatComposer.tsx
+++ b/web/app/src/features/chat/ui/ChatComposer.tsx
@@ -4,11 +4,11 @@ import { useRef, useState, useEffect, useImperativeHandle } from 'react';
 import { ArrowUp, Paperclip } from 'lucide-react';
 import { FilePreview, ALLOWED_EXTENSIONS, MAX_FILES } from './FilePreview';
 import { InlineVoiceRecorder } from './VoiceRecorder';
-import { OmiPulseMark } from '@/components/ui/OmiPulseMark';
-import { uploadChatFiles } from '@/lib/api';
+import { OmiPulseMark } from '@/shared/ui/OmiPulseMark';
 import type { MessageFile } from '@/types/conversation';
 import { cn } from '@/lib/utils';
 import { shouldSubmitComposerKey } from '@/lib/chatComposerKey';
+import { useChatAttachments } from './useChatAttachments';
 
 /**
  * The ask bar: one pill that carries the text and every control that acts on
@@ -19,14 +19,6 @@ import { shouldSubmitComposerKey } from '@/lib/chatComposerKey';
  * draft and upload state and reports only completed sends upward.
  */
 
-interface FilePreviewItem {
-  file: File;
-  preview?: string;
-  uploading?: boolean;
-  uploadedId?: string;
-  uploadedFile?: MessageFile;
-}
-
 export interface ChatComposerHandle {
   focus: () => void;
 }
@@ -69,13 +61,18 @@ export function ChatComposer({
   ref,
 }: ChatComposerProps) {
   const [input, setInput] = useState('');
-  const [selectedFiles, setSelectedFiles] = useState<FilePreviewItem[]>([]);
-  const [pendingUploadCount, setPendingUploadCount] = useState(0);
+  const {
+    selectedFiles,
+    isUploading,
+    fileInputRef,
+    pendingUploadCountRef,
+    handleFileSelect,
+    handleRemoveFile,
+    takeReadyFiles,
+    clear: clearAttachments,
+  } = useChatAttachments(appId);
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const pendingUploadCountRef = useRef(0);
-  const isUploading = pendingUploadCount > 0;
 
   useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus() }), []);
 
@@ -87,75 +84,6 @@ export function ChatComposer({
     }
   }, [input]);
 
-  // Handle file selection
-  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
-    if (files.length === 0) return;
-
-    // Limit to MAX_FILES
-    const availableSlots = MAX_FILES - selectedFiles.length;
-    const filesToAdd = files.slice(0, availableSlots);
-
-    // Create preview items
-    const newItems: FilePreviewItem[] = filesToAdd.map((file) => {
-      let preview: string | undefined;
-      if (file.type.startsWith('image/')) {
-        preview = URL.createObjectURL(file);
-      }
-      return { file, preview, uploading: true };
-    });
-
-    setSelectedFiles((prev) => [...prev, ...newItems]);
-
-    // Upload files
-    pendingUploadCountRef.current += 1;
-    setPendingUploadCount((current) => current + 1);
-    try {
-      const uploadedFiles = await uploadChatFiles(filesToAdd, appId);
-
-      // Update items with uploaded IDs
-      setSelectedFiles((prev) =>
-        prev.map((item) => {
-          const fileIndex = filesToAdd.indexOf(item.file);
-          const uploadedFile = fileIndex >= 0 ? uploadedFiles[fileIndex] : undefined;
-          if (uploadedFile) {
-            return {
-              ...item,
-              uploading: false,
-              uploadedId: uploadedFile.id,
-              uploadedFile,
-            };
-          }
-          return item;
-        }),
-      );
-    } catch (err) {
-      console.error('Failed to upload files:', err);
-      // Remove failed uploads
-      setSelectedFiles((prev) => prev.filter((item) => !filesToAdd.includes(item.file)));
-    } finally {
-      pendingUploadCountRef.current = Math.max(0, pendingUploadCountRef.current - 1);
-      setPendingUploadCount((current) => Math.max(0, current - 1));
-    }
-
-    // Reset input
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  // Remove file from selection
-  const handleRemoveFile = (index: number) => {
-    setSelectedFiles((prev) => {
-      const item = prev[index];
-      // Revoke object URL if it was an image
-      if (item.preview) {
-        URL.revokeObjectURL(item.preview);
-      }
-      return prev.filter((_, i) => i !== index);
-    });
-  };
-
   // Handle voice transcript - append to input and focus
   const handleVoiceTranscript = (transcript: string) => {
     setInput((prev) => (prev ? `${prev} ${transcript}` : transcript));
@@ -173,12 +101,10 @@ export function ChatComposer({
       return;
 
     // Get file IDs from uploaded files
-    const uploadedFiles = selectedFiles.flatMap((item) =>
-      item.uploadedFile ? [item.uploadedFile] : [],
-    );
+    const uploadedFiles = takeReadyFiles();
 
     setInput('');
-    setSelectedFiles([]);
+    clearAttachments();
     if (inputRef.current) {
       inputRef.current.style.height = 'auto';
     }
diff --git a/web/app/src/components/chat/ChatContext.tsx b/web/app/src/features/chat/ui/ChatContext.tsx
similarity index 98%
rename from web/app/src/components/chat/ChatContext.tsx
rename to web/app/src/features/chat/ui/ChatContext.tsx
index cdeded840a1..704c371aa6d 100644
--- a/web/app/src/components/chat/ChatContext.tsx
+++ b/web/app/src/features/chat/ui/ChatContext.tsx
@@ -8,7 +8,7 @@ import {
   useMemo,
   ReactNode,
 } from 'react';
-import { useChat as useChatSession } from '@/hooks/useChat';
+import { useChat as useChatSession } from '@/features/chat/useChat';
 
 type SharedChat = ReturnType<typeof useChatSession>;
 
diff --git a/web/app/src/components/chat/ChatMarkdown.tsx b/web/app/src/features/chat/ui/ChatMarkdown.tsx
similarity index 100%
rename from web/app/src/components/chat/ChatMarkdown.tsx
rename to web/app/src/features/chat/ui/ChatMarkdown.tsx
diff --git a/web/app/src/components/chat/ChatPanel.tsx b/web/app/src/features/chat/ui/ChatPanel.tsx
similarity index 87%
rename from web/app/src/components/chat/ChatPanel.tsx
rename to web/app/src/features/chat/ui/ChatPanel.tsx
index 9bf874fb533..3298ba3b62c 100644
--- a/web/app/src/components/chat/ChatPanel.tsx
+++ b/web/app/src/features/chat/ui/ChatPanel.tsx
@@ -4,22 +4,16 @@ import { useRef, useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, Send, Sparkles, Trash2, Brain, Paperclip, ArrowLeft } from 'lucide-react';
 import { useChat as useChatContext } from './ChatContext';
-import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
+import { ConfirmDialog } from '@/shared/ui/ConfirmDialog';
 import { FilePreview, ALLOWED_EXTENSIONS, MAX_FILES } from './FilePreview';
 import { InlineVoiceRecorder } from './VoiceRecorder';
-import { uploadChatFiles, getChatApps } from '@/lib/api';
-import type { App } from '@/lib/api';
+import { getChatApps } from '@/features/connectors';
+import type { App } from '@/features/connectors';
 import { cn } from '@/lib/utils';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import { shouldSubmitComposerKey } from '@/lib/chatComposerKey';
 import { ChatMarkdown } from './ChatMarkdown';
-
-interface FilePreviewItem {
-  file: File;
-  preview?: string;
-  uploading?: boolean;
-  uploadedId?: string;
-}
+import { useChatAttachments } from './useChatAttachments';
 
 // Quick prompts based on context
 function getQuickPrompts(contextType: string | undefined): string[] {
@@ -72,12 +66,20 @@ export function ChatPanel() {
   const [input, setInput] = useState('');
   const [showClearDialog, setShowClearDialog] = useState(false);
   const [isClearing, setIsClearing] = useState(false);
-  const [selectedFiles, setSelectedFiles] = useState<FilePreviewItem[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
   const [selectedApp, setSelectedApp] = useState<App | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const {
+    selectedFiles,
+    isUploading,
+    fileInputRef,
+    handleFileSelect,
+    handleRemoveFile,
+    takeReadyFiles,
+    clear: clearAttachments,
+    hasReadyUpload,
+    atFileLimit,
+  } = useChatAttachments(selectedAppId ?? undefined);
 
   // Fetch app info when selectedAppId changes
   useEffect(() => {
@@ -196,70 +198,6 @@ export function ChatPanel() {
     });
   };
 
-  // Handle file selection
-  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files || []);
-    if (files.length === 0) return;
-
-    // Limit to MAX_FILES
-    const availableSlots = MAX_FILES - selectedFiles.length;
-    const filesToAdd = files.slice(0, availableSlots);
-
-    // Create preview items
-    const newItems: FilePreviewItem[] = await Promise.all(
-      filesToAdd.map(async (file) => {
-        let preview: string | undefined;
-        if (file.type.startsWith('image/')) {
-          preview = URL.createObjectURL(file);
-        }
-        return { file, preview, uploading: true };
-      }),
-    );
-
-    setSelectedFiles((prev) => [...prev, ...newItems]);
-
-    // Upload files
-    setIsUploading(true);
-    try {
-      const uploadedFiles = await uploadChatFiles(filesToAdd);
-
-      // Update items with uploaded IDs
-      setSelectedFiles((prev) =>
-        prev.map((item) => {
-          const fileIndex = filesToAdd.indexOf(item.file);
-          const uploadedFile = fileIndex >= 0 ? uploadedFiles[fileIndex] : undefined;
-          if (uploadedFile) {
-            return { ...item, uploading: false, uploadedId: uploadedFile.id };
-          }
-          return item;
-        }),
-      );
-    } catch (err) {
-      console.error('Failed to upload files:', err);
-      // Remove failed uploads
-      setSelectedFiles((prev) => prev.filter((item) => !filesToAdd.includes(item.file)));
-    } finally {
-      setIsUploading(false);
-    }
-
-    // Reset input
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
-  // Remove file from selection
-  const handleRemoveFile = (index: number) => {
-    setSelectedFiles((prev) => {
-      const item = prev[index];
-      // Revoke object URL if it was an image
-      if (item.preview) {
-        URL.revokeObjectURL(item.preview);
-      }
-      return prev.filter((_, i) => i !== index);
-    });
-  };
-
   // Handle voice transcript - append to input and focus
   const handleVoiceTranscript = (transcript: string) => {
     setInput((prev) => (prev ? `${prev} ${transcript}` : transcript));
@@ -267,17 +205,10 @@ export function ChatPanel() {
   };
 
   const handleSend = async (text: string = input) => {
-    if (
-      (!text.trim() && !selectedFiles.some((item) => item.uploadedId)) ||
-      isLoading ||
-      isStreaming
-    )
-      return;
+    const uploadedFiles = takeReadyFiles();
+    if ((!text.trim() && uploadedFiles.length === 0) || isLoading || isStreaming) return;
 
-    // Get file IDs from uploaded files
-    const fileIds = selectedFiles
-      .filter((item) => item.uploadedId)
-      .map((item) => item.uploadedId as string);
+    const fileIds = uploadedFiles.map((file) => file.id);
 
     MixpanelManager.track('Chat Message Sent', {
       message_length: text.length,
@@ -286,8 +217,8 @@ export function ChatPanel() {
     });
 
     setInput('');
-    setSelectedFiles([]);
-    await sendMessage(text, fileIds, currentContext);
+    clearAttachments();
+    await sendMessage(text, fileIds, currentContext, uploadedFiles);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -308,10 +239,7 @@ export function ChatPanel() {
   };
 
   const canSend =
-    (input.trim() || selectedFiles.some((f) => f.uploadedId)) &&
-    !isLoading &&
-    !isStreaming &&
-    !isUploading;
+    (input.trim() || hasReadyUpload) && !isLoading && !isStreaming && !isUploading;
 
   return (
     <AnimatePresence>
@@ -599,7 +527,7 @@ export function ChatPanel() {
                     <button
                       onClick={() => fileInputRef.current?.click()}
                       disabled={
-                        isLoading || isStreaming || selectedFiles.length >= MAX_FILES
+                        isLoading || isStreaming || atFileLimit
                       }
                       className={cn(
                         'p-2 rounded-lg flex-shrink-0',
@@ -607,11 +535,7 @@ export function ChatPanel() {
                         'disabled:opacity-50 disabled:cursor-not-allowed',
                         'transition-colors',
                       )}
-                      title={
-                        selectedFiles.length >= MAX_FILES
-                          ? `Max ${MAX_FILES} files`
-                          : 'Attach file'
-                      }
+                      title={atFileLimit ? `Max ${MAX_FILES} files` : 'Attach file'}
                     >
                       <Paperclip className="w-5 h-5" />
                     </button>
diff --git a/web/app/src/components/chat/ChatTranscript.tsx b/web/app/src/features/chat/ui/ChatTranscript.tsx
similarity index 100%
rename from web/app/src/components/chat/ChatTranscript.tsx
rename to web/app/src/features/chat/ui/ChatTranscript.tsx
diff --git a/web/app/src/components/chat/FilePreview.tsx b/web/app/src/features/chat/ui/FilePreview.tsx
similarity index 96%
rename from web/app/src/components/chat/FilePreview.tsx
rename to web/app/src/features/chat/ui/FilePreview.tsx
index 04f5e7b225d..201416463a8 100644
--- a/web/app/src/components/chat/FilePreview.tsx
+++ b/web/app/src/features/chat/ui/FilePreview.tsx
@@ -2,13 +2,15 @@
 
 import { X, FileText, Image as ImageIcon, Loader2 } from 'lucide-react';
 import Image from '@tschk/moonshine-next/image';
+import type { MessageFile } from '@/types/conversation';
 import { cn } from '@/lib/utils';
 
-interface FilePreviewItem {
+export interface FilePreviewItem {
   file: File;
   preview?: string;
   uploading?: boolean;
   uploadedId?: string;
+  uploadedFile?: MessageFile;
 }
 
 interface FilePreviewProps {
diff --git a/web/app/src/components/chat/RecordingStage.tsx b/web/app/src/features/chat/ui/RecordingStage.tsx
similarity index 97%
rename from web/app/src/components/chat/RecordingStage.tsx
rename to web/app/src/features/chat/ui/RecordingStage.tsx
index 81c04fd7aea..daf48a8ce73 100644
--- a/web/app/src/components/chat/RecordingStage.tsx
+++ b/web/app/src/features/chat/ui/RecordingStage.tsx
@@ -3,8 +3,8 @@
 import { useEffect, useRef } from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
 import { Pause, Play, Square } from 'lucide-react';
-import type { TranscriptSegment } from '@/components/recording/RecordingContext';
-import { OmiPulseMark } from '@/components/ui/OmiPulseMark';
+import type { TranscriptSegment } from '@/features/recording';
+import { OmiPulseMark } from '@/shared/ui/OmiPulseMark';
 import { cn } from '@/lib/utils';
 
 /**
diff --git a/web/app/src/components/chat/VoiceRecorder.tsx b/web/app/src/features/chat/ui/VoiceRecorder.tsx
similarity index 99%
rename from web/app/src/components/chat/VoiceRecorder.tsx
rename to web/app/src/features/chat/ui/VoiceRecorder.tsx
index 0f3e0b9d2e6..e8b7972f1b9 100644
--- a/web/app/src/components/chat/VoiceRecorder.tsx
+++ b/web/app/src/features/chat/ui/VoiceRecorder.tsx
@@ -3,7 +3,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { Mic, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { transcribeVoiceMessage } from '@/lib/api';
+import { transcribeVoiceMessage } from '@/features/chat/api';
 
 type RecordingState = 'idle' | 'recording' | 'transcribing';
 
diff --git a/web/app/src/components/chat/__tests__/ChatComposer.test.tsx b/web/app/src/features/chat/ui/__tests__/ChatComposer.test.tsx
similarity index 98%
rename from web/app/src/components/chat/__tests__/ChatComposer.test.tsx
rename to web/app/src/features/chat/ui/__tests__/ChatComposer.test.tsx
index eecaeb8cd58..27da32989ec 100644
--- a/web/app/src/components/chat/__tests__/ChatComposer.test.tsx
+++ b/web/app/src/features/chat/ui/__tests__/ChatComposer.test.tsx
@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { ChatComposer } from '@/components/chat/ChatComposer';
+import { ChatComposer } from '@/features/chat/ui/ChatComposer';
 import type { MessageFile } from '@/types/conversation';
 
 const reducedMotion = vi.hoisted(() => ({ value: false }));
@@ -10,12 +10,12 @@ vi.mock('framer-motion', async (importOriginal) => ({
   useReducedMotion: () => reducedMotion.value,
 }));
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/chat/api', () => ({
   transcribeVoiceMessage: vi.fn(),
   uploadChatFiles: vi.fn(),
 }));
 
-const { uploadChatFiles } = await import('@/lib/api');
+const { uploadChatFiles } = await import('@/features/chat/api');
 
 type Deferred<T> = { promise: Promise<T>; resolve: (value: T) => void };
 
diff --git a/web/app/src/components/chat/__tests__/ChatMarkdown.test.ts b/web/app/src/features/chat/ui/__tests__/ChatMarkdown.test.ts
similarity index 92%
rename from web/app/src/components/chat/__tests__/ChatMarkdown.test.ts
rename to web/app/src/features/chat/ui/__tests__/ChatMarkdown.test.ts
index 5ef5494c964..6e60bd92487 100644
--- a/web/app/src/components/chat/__tests__/ChatMarkdown.test.ts
+++ b/web/app/src/features/chat/ui/__tests__/ChatMarkdown.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { ChatMarkdown } from '@/components/chat/ChatMarkdown';
+import { ChatMarkdown } from '@/features/chat/ui/ChatMarkdown';
 import { Streamdown } from 'streamdown';
 
 describe('ChatMarkdown', () => {
diff --git a/web/app/src/components/chat/__tests__/ChatTranscript.test.tsx b/web/app/src/features/chat/ui/__tests__/ChatTranscript.test.tsx
similarity index 96%
rename from web/app/src/components/chat/__tests__/ChatTranscript.test.tsx
rename to web/app/src/features/chat/ui/__tests__/ChatTranscript.test.tsx
index cae6a1d5a85..7571279e0b4 100644
--- a/web/app/src/components/chat/__tests__/ChatTranscript.test.tsx
+++ b/web/app/src/features/chat/ui/__tests__/ChatTranscript.test.tsx
@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ChatTranscript } from '@/components/chat/ChatTranscript';
+import { ChatTranscript } from '@/features/chat/ui/ChatTranscript';
 import type { ClientMessage } from '@/types/conversation';
 
 vi.mock('@tschk/moonshine-next/image', () => ({
   default: ({ alt }: React.ComponentProps<'img'>) => <img alt={alt} />,
 }));
-vi.mock('@/components/chat/ChatMarkdown', () => ({
+vi.mock('@/features/chat/ui/ChatMarkdown', () => ({
   ChatMarkdown: ({ children }: { children: string }) => <div>{children}</div>,
 }));
 
diff --git a/web/app/src/components/chat/__tests__/RecordingStage.test.tsx b/web/app/src/features/chat/ui/__tests__/RecordingStage.test.tsx
similarity index 97%
rename from web/app/src/components/chat/__tests__/RecordingStage.test.tsx
rename to web/app/src/features/chat/ui/__tests__/RecordingStage.test.tsx
index 4dbb3ee694f..91207920b09 100644
--- a/web/app/src/components/chat/__tests__/RecordingStage.test.tsx
+++ b/web/app/src/features/chat/ui/__tests__/RecordingStage.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { RecordingStage } from '@/components/chat/RecordingStage';
-import type { TranscriptSegment } from '@/components/recording/RecordingContext';
+import { RecordingStage } from '@/features/chat/ui/RecordingStage';
+import type { TranscriptSegment } from '@/features/recording';
 
 const reducedMotion = vi.hoisted(() => ({ value: false }));
 
diff --git a/web/app/src/components/chat/__tests__/chatSessionSelection.test.tsx b/web/app/src/features/chat/ui/__tests__/chatSessionSelection.test.tsx
similarity index 91%
rename from web/app/src/components/chat/__tests__/chatSessionSelection.test.tsx
rename to web/app/src/features/chat/ui/__tests__/chatSessionSelection.test.tsx
index 7e9ad142dcc..64ad6f8c750 100644
--- a/web/app/src/components/chat/__tests__/chatSessionSelection.test.tsx
+++ b/web/app/src/features/chat/ui/__tests__/chatSessionSelection.test.tsx
@@ -2,7 +2,7 @@ import { act, render, waitFor } from '@testing-library/react';
 import { useEffect } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/chat/api', () => ({
   getMessages: vi.fn().mockResolvedValue([]),
   sendMessageStream: vi.fn().mockResolvedValue(undefined),
   clearMessages: vi.fn().mockResolvedValue(undefined),
@@ -11,10 +11,10 @@ vi.mock('@/lib/api', () => ({
 }));
 vi.mock('@/lib/analytics/mixpanel', () => ({ MixpanelManager: {} }));
 
-const { getMessages } = await import('@/lib/api');
+const { getMessages } = await import('@/features/chat/api');
 const { ChatProvider, useChat: useChatContext } =
-  await import('@/components/chat/ChatContext');
-const { ChatPanel } = await import('@/components/chat/ChatPanel');
+  await import('@/features/chat/ui/ChatContext');
+const { ChatPanel } = await import('@/features/chat/ui/ChatPanel');
 
 function OpenWithSession({ sessionId }: { sessionId: string | null }) {
   const { openChat, selectChatSession } = useChatContext();
diff --git a/web/app/src/features/chat/ui/useChatAttachments.ts b/web/app/src/features/chat/ui/useChatAttachments.ts
new file mode 100644
index 00000000000..ba1a6baa64a
--- /dev/null
+++ b/web/app/src/features/chat/ui/useChatAttachments.ts
@@ -0,0 +1,103 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { uploadChatFiles } from '@/features/chat/api';
+import { MAX_FILES, type FilePreviewItem } from './FilePreview';
+import type { MessageFile } from '@/types/conversation';
+
+/**
+ * Shared draft-attachment state for Home's pill composer and the overlay panel.
+ * Upload lives here so the two UIs do not fork the MAX_FILES / preview / rollback path.
+ */
+export function useChatAttachments(appId?: string) {
+  const [selectedFiles, setSelectedFiles] = useState<FilePreviewItem[]>([]);
+  const [pendingUploadCount, setPendingUploadCount] = useState(0);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const pendingUploadCountRef = useRef(0);
+  const isUploading = pendingUploadCount > 0;
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+
+    const availableSlots = MAX_FILES - selectedFiles.length;
+    const filesToAdd = files.slice(0, availableSlots);
+
+    const newItems: FilePreviewItem[] = filesToAdd.map((file) => {
+      let preview: string | undefined;
+      if (file.type.startsWith('image/')) {
+        preview = URL.createObjectURL(file);
+      }
+      return { file, preview, uploading: true };
+    });
+
+    setSelectedFiles((prev) => [...prev, ...newItems]);
+
+    pendingUploadCountRef.current += 1;
+    setPendingUploadCount((current) => current + 1);
+    try {
+      const uploadedFiles = await uploadChatFiles(filesToAdd, appId);
+
+      setSelectedFiles((prev) =>
+        prev.map((item) => {
+          const fileIndex = filesToAdd.indexOf(item.file);
+          const uploadedFile = fileIndex >= 0 ? uploadedFiles[fileIndex] : undefined;
+          if (uploadedFile) {
+            return {
+              ...item,
+              uploading: false,
+              uploadedId: uploadedFile.id,
+              uploadedFile,
+            };
+          }
+          return item;
+        }),
+      );
+    } catch (err) {
+      console.error('Failed to upload files:', err);
+      setSelectedFiles((prev) => prev.filter((item) => !filesToAdd.includes(item.file)));
+    } finally {
+      pendingUploadCountRef.current = Math.max(0, pendingUploadCountRef.current - 1);
+      setPendingUploadCount((current) => Math.max(0, current - 1));
+    }
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleRemoveFile = (index: number) => {
+    setSelectedFiles((prev) => {
+      const item = prev[index];
+      if (item?.preview) {
+        URL.revokeObjectURL(item.preview);
+      }
+      return prev.filter((_, i) => i !== index);
+    });
+  };
+
+  const takeReadyFiles = (): MessageFile[] =>
+    selectedFiles.flatMap((item) => (item.uploadedFile ? [item.uploadedFile] : []));
+
+  const clear = () => {
+    setSelectedFiles((prev) => {
+      for (const item of prev) {
+        if (item.preview) URL.revokeObjectURL(item.preview);
+      }
+      return [];
+    });
+  };
+
+  return {
+    selectedFiles,
+    isUploading,
+    fileInputRef,
+    pendingUploadCountRef,
+    handleFileSelect,
+    handleRemoveFile,
+    takeReadyFiles,
+    clear,
+    hasReadyUpload: selectedFiles.some((item) => item.uploadedId),
+    atFileLimit: selectedFiles.length >= MAX_FILES,
+  };
+}
diff --git a/web/app/src/hooks/useChat.ts b/web/app/src/features/chat/useChat.ts
similarity index 58%
rename from web/app/src/hooks/useChat.ts
rename to web/app/src/features/chat/useChat.ts
index 49aedf70c37..032bc1fc673 100644
--- a/web/app/src/hooks/useChat.ts
+++ b/web/app/src/features/chat/useChat.ts
@@ -1,14 +1,16 @@
 'use client';
 
-import { useState, useCallback, useRef, useEffect } from 'react';
+import { useCallback, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
 import {
   getMessages,
   sendMessageStream,
   clearMessages as clearMessagesApi,
   saveRealtimeMessage,
-} from '@/lib/api';
+} from '@/features/chat/api';
 import type { ClientMessage, MessageChunk, MessageFile } from '@/types/conversation';
-import type { ChatContextInfo } from '@/components/chat/ChatContext';
+import type { ChatContextInfo } from '@/features/chat/ui/ChatContext';
 import { useRequestOwner } from '@/hooks/useRequestOwner';
 
 interface UseChatOptions {
@@ -38,76 +40,63 @@ interface UseChatReturn {
   appendRealtimeExchange: (humanText: string, aiText: string) => Promise<void>;
 }
 
-export function useChat(options: UseChatOptions = {}): UseChatReturn {
-  const { appId, chatSessionId = null } = options;
-
-  const [messages, setMessages] = useState<ClientMessage[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [streamingText, setStreamingText] = useState('');
-  const [currentThinking, setCurrentThinking] = useState('');
-  const [error, setError] = useState<string | null>(null);
+export function createChatStore() {
+  const messages = createSignal<ClientMessage[]>([]);
+  const isLoading = createSignal(false);
+  const isStreaming = createSignal(false);
+  const streamingText = createSignal('');
+  const currentThinking = createSignal('');
+  const error = createSignal<string | null>(null);
+  let historyLoadedKey: string | null = null;
 
-  // Track current app + session to detect changes
-  const currentAppIdRef = useRef(appId);
-  const currentSessionIdRef = useRef(chatSessionId);
-  // Track if we've loaded history for the current app + session
-  const historyLoadedRef = useRef<string | null>(null);
+  return {
+    messages,
+    isLoading,
+    isStreaming,
+    streamingText,
+    currentThinking,
+    error,
+    getHistoryLoadedKey: () => historyLoadedKey,
+    setHistoryLoadedKey: (key: string | null) => {
+      historyLoadedKey = key;
+    },
+  };
+}
 
-  // A load or a stream belongs to the thread it was started for. Switching
-  // threads mid-flight must not let the previous thread's response land in the
-  // newly-selected one.
+export function useChat(options: UseChatOptions = {}): UseChatReturn {
+  const { appId, chatSessionId = null } = options;
+  const store = useMemo(() => createChatStore(), [appId, chatSessionId]);
   const claimRequest = useRequestOwner(`${appId ?? ''}||${chatSessionId ?? ''}`);
 
-  // Reset state when the app or the selected session changes. Switching threads
-  // must clear the transcript: leaving the previous session's messages on
-  // screen reads as though they belong to the newly-selected chat. The
-  // transient stream state goes with it, for the same reason.
-  useEffect(() => {
-    if (
-      currentAppIdRef.current !== appId ||
-      currentSessionIdRef.current !== chatSessionId
-    ) {
-      currentAppIdRef.current = appId;
-      currentSessionIdRef.current = chatSessionId;
-      historyLoadedRef.current = null;
-      setMessages([]);
-      setError(null);
-      setStreamingText('');
-      setCurrentThinking('');
-      setIsStreaming(false);
-      setIsLoading(false);
-    }
-  }, [appId, chatSessionId]);
+  const messages = useSignalValue(store.messages);
+  const isLoading = useSignalValue(store.isLoading);
+  const isStreaming = useSignalValue(store.isStreaming);
+  const streamingText = useSignalValue(store.streamingText);
+  const currentThinking = useSignalValue(store.currentThinking);
+  const error = useSignalValue(store.error);
 
-  /**
-   * Load message history from server
-   */
   const loadHistory = useCallback(async () => {
     const targetKey = `${appId ?? ''}||${chatSessionId ?? ''}`;
-    if (historyLoadedRef.current === targetKey) return;
+    if (store.getHistoryLoadedKey() === targetKey) return;
 
     const isCurrent = claimRequest();
-    setIsLoading(true);
-    setError(null);
+    store.isLoading.set(true);
+    store.error.set(null);
 
     try {
       const history = await getMessages(appId, chatSessionId);
       if (!isCurrent()) return;
-      setMessages([...history].reverse());
-      historyLoadedRef.current = targetKey;
+      store.messages.set([...history].reverse());
+      store.setHistoryLoadedKey(targetKey);
     } catch (err) {
       if (!isCurrent()) return;
       console.error('Failed to load message history:', err);
-      setError('Failed to load message history');
+      store.error.set('Failed to load message history');
     } finally {
-      if (isCurrent()) setIsLoading(false);
+      if (isCurrent()) store.isLoading.set(false);
     }
-  }, [appId, chatSessionId, claimRequest]);
+  }, [appId, chatSessionId, claimRequest, store]);
 
-  /**
-   * Send a message and handle streaming response
-   */
   const sendMessage = useCallback(
     async (
       text: string,
@@ -115,17 +104,14 @@ export function useChat(options: UseChatOptions = {}): UseChatReturn {
       context?: ChatContextInfo | null,
       optimisticFiles?: MessageFile[],
     ) => {
-      if ((!text.trim() && !fileIds?.length) || isStreaming) return;
+      if ((!text.trim() && !fileIds?.length) || store.isStreaming.peek()) return;
 
       const isCurrent = claimRequest();
-      setError(null);
-      setIsStreaming(true);
-      setStreamingText('');
-      setCurrentThinking('');
+      store.error.set(null);
+      store.isStreaming.set(true);
+      store.streamingText.set('');
+      store.currentThinking.set('');
 
-      // Add user message to the list immediately (optimistic update).
-      // Client-only fields (`ask_for_nps`) live on ClientMessage; backend REST
-      // authority for messages is the generated `Message` schema.
       const createdAt = new Date().toISOString();
       const uploadedFilesById = new Map(
         optimisticFiles?.map((file) => [file.id, file]) ?? [],
@@ -151,7 +137,7 @@ export function useChat(options: UseChatOptions = {}): UseChatReturn {
         ask_for_nps: false,
       };
 
-      setMessages((prev) => [...prev, userMessage]);
+      store.messages.set((prev) => [...prev, userMessage]);
 
       let accumulatedText = '';
 
@@ -159,35 +145,30 @@ export function useChat(options: UseChatOptions = {}): UseChatReturn {
         await sendMessageStream(
           text.trim(),
           (chunk: MessageChunk) => {
-            // Chunks that arrive after the reader moved to another thread
-            // belong to the thread they were requested for, not this one.
             if (!isCurrent()) return;
             switch (chunk.type) {
               case 'think':
-                setCurrentThinking((prev) => prev + chunk.text);
+                store.currentThinking.set((prev) => prev + chunk.text);
                 break;
 
               case 'data':
                 accumulatedText += chunk.text;
-                setStreamingText(accumulatedText);
+                store.streamingText.set(accumulatedText);
                 break;
 
               case 'done':
-                // Replace streaming text with final message
                 if (chunk.message) {
-                  setMessages((prev) => [...prev, chunk.message!]);
+                  store.messages.set((prev) => [...prev, chunk.message!]);
                 }
-                setStreamingText('');
-                setCurrentThinking('');
+                store.streamingText.set('');
+                store.currentThinking.set('');
                 break;
 
               case 'message':
-                // Handle related memory messages if needed
-                // chunk.message contains related memory data
                 break;
 
               case 'error':
-                setError(chunk.text);
+                store.error.set(chunk.text);
                 break;
             }
           },
@@ -196,9 +177,8 @@ export function useChat(options: UseChatOptions = {}): UseChatReturn {
       } catch (err) {
         if (!isCurrent()) return;
         console.error('Failed to send message:', err);
-        setError(err instanceof Error ? err.message : 'Failed to send message');
+        store.error.set(err instanceof Error ? err.message : 'Failed to send message');
 
-        // If we have accumulated text, add it as a partial message
         if (accumulatedText) {
           const partialMessage: ClientMessage = {
             id: `error-${Date.now()}`,
@@ -211,39 +191,36 @@ export function useChat(options: UseChatOptions = {}): UseChatReturn {
             memories: [],
             ask_for_nps: false,
           };
-          setMessages((prev) => [...prev, partialMessage]);
+          store.messages.set((prev) => [...prev, partialMessage]);
         }
       } finally {
         if (isCurrent()) {
-          setIsStreaming(false);
-          setStreamingText('');
+          store.isStreaming.set(false);
+          store.streamingText.set('');
         }
       }
     },
-    [appId, chatSessionId, isStreaming, claimRequest],
+    [appId, chatSessionId, claimRequest, store],
   );
 
-  /**
-   * Clear all message history
-   */
   const clearHistory = useCallback(async () => {
     const isCurrent = claimRequest();
-    setIsLoading(true);
-    setError(null);
+    store.isLoading.set(true);
+    store.error.set(null);
 
     try {
       await clearMessagesApi(appId, chatSessionId);
       if (!isCurrent()) return;
-      setMessages([]);
-      historyLoadedRef.current = null;
+      store.messages.set([]);
+      store.setHistoryLoadedKey(null);
     } catch (err) {
       if (!isCurrent()) return;
       console.error('Failed to clear messages:', err);
-      setError('Failed to clear message history');
+      store.error.set('Failed to clear message history');
     } finally {
-      if (isCurrent()) setIsLoading(false);
+      if (isCurrent()) store.isLoading.set(false);
     }
-  }, [appId, chatSessionId, claimRequest]);
+  }, [appId, chatSessionId, claimRequest, store]);
 
   const appendRealtimeExchange = useCallback(
     async (humanText: string, aiText: string) => {
@@ -269,8 +246,8 @@ export function useChat(options: UseChatOptions = {}): UseChatReturn {
         app_id: appId,
       }));
 
-      setMessages((current) => [...current, ...optimistic]);
-      setError(null);
+      store.messages.set((current) => [...current, ...optimistic]);
+      store.error.set(null);
 
       try {
         for (const message of optimistic) {
@@ -284,11 +261,11 @@ export function useChat(options: UseChatOptions = {}): UseChatReturn {
         }
       } catch (err) {
         console.error('Failed to save live conversation:', err);
-        if (isCurrent()) setError('Live conversation was not saved to chat history');
+        if (isCurrent()) store.error.set('Live conversation was not saved to chat history');
         throw err;
       }
     },
-    [appId, chatSessionId, claimRequest],
+    [appId, chatSessionId, claimRequest, store],
   );
 
   return {
diff --git a/web/app/src/hooks/useGeminiLive.ts b/web/app/src/features/chat/useGeminiLive.ts
similarity index 59%
rename from web/app/src/hooks/useGeminiLive.ts
rename to web/app/src/features/chat/useGeminiLive.ts
index a0f083db562..0233a497aef 100644
--- a/web/app/src/hooks/useGeminiLive.ts
+++ b/web/app/src/features/chat/useGeminiLive.ts
@@ -1,13 +1,25 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { TranscriptSegment } from '@/components/recording/RecordingContext';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
+import type { TranscriptSegment } from '@/features/recording';
 import type { ClientMessage } from '@/types/conversation';
-import { createGeminiLiveSession, reportGeminiLiveUsage } from '@/lib/api';
+import { createGeminiLiveSession, reportGeminiLiveUsage } from '@/features/chat/api';
 import { GeminiLiveClient } from '@/lib/geminiLive';
 
 export type GeminiLiveState = 'idle' | 'connecting' | 'listening' | 'paused';
 
+export function createGeminiLiveStore() {
+  const state = createSignal<GeminiLiveState>('idle');
+  const level = createSignal(0);
+  const duration = createSignal(0);
+  const humanText = createSignal('');
+  const aiText = createSignal('');
+  const error = createSignal<string | null>(null);
+  return { state, level, duration, humanText, aiText, error };
+}
+
 export function useGeminiLive({
   messages,
   onExchange,
@@ -15,32 +27,34 @@ export function useGeminiLive({
   messages: ClientMessage[];
   onExchange: (humanText: string, aiText: string) => Promise<void>;
 }) {
-  const [state, setState] = useState<GeminiLiveState>('idle');
-  const [level, setLevel] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [humanText, setHumanText] = useState('');
-  const [aiText, setAiText] = useState('');
-  const [error, setError] = useState<string | null>(null);
+  const store = useMemo(() => createGeminiLiveStore(), []);
   const clientRef = useRef<GeminiLiveClient | null>(null);
   const messagesRef = useRef(messages);
   const exchangeRef = useRef(onExchange);
   messagesRef.current = messages;
   exchangeRef.current = onExchange;
 
+  const state = useSignalValue(store.state);
+  const level = useSignalValue(store.level);
+  const duration = useSignalValue(store.duration);
+  const humanText = useSignalValue(store.humanText);
+  const aiText = useSignalValue(store.aiText);
+  const error = useSignalValue(store.error);
+
   useEffect(() => {
     if (state !== 'listening') return;
-    const interval = window.setInterval(() => setDuration((value) => value + 1), 1000);
+    const interval = window.setInterval(() => store.duration.set((value) => value + 1), 1000);
     return () => window.clearInterval(interval);
-  }, [state]);
+  }, [state, store]);
 
   useEffect(() => () => clientRef.current?.stop(), []);
 
   const start = useCallback(async () => {
     if (clientRef.current) return;
-    setError(null);
-    setDuration(0);
-    setLevel(0);
-    setState('connecting');
+    store.error.set(null);
+    store.duration.set(0);
+    store.level.set(0);
+    store.state.set('connecting');
     const history = messagesRef.current
       .slice(-20)
       .map((message) => ({ sender: message.sender, text: message.text }))
@@ -53,34 +67,34 @@ export function useGeminiLive({
     client = new GeminiLiveClient(
       {
         onReady: () => {
-          if (clientRef.current === client) setState('listening');
+          if (clientRef.current === client) store.state.set('listening');
         },
         onLevel: (nextLevel) => {
-          if (clientRef.current === client) setLevel(nextLevel);
+          if (clientRef.current === client) store.level.set(nextLevel);
         },
         onTranscript: (human, ai) => {
           if (clientRef.current !== client) return;
-          setHumanText(human);
-          setAiText(ai);
+          store.humanText.set(human);
+          store.aiText.set(ai);
         },
         onExchange: (human, ai) => {
           void exchangeRef
             .current(human, ai)
-            .catch(() => setError('Live conversation was not saved to chat history'));
+            .catch(() => store.error.set('Live conversation was not saved to chat history'));
         },
         onUsage: (report) => {
           void reportGeminiLiveUsage(report).catch(() =>
-            setError('Gemini Live usage could not be recorded'),
+            store.error.set('Gemini Live usage could not be recorded'),
           );
         },
         onError: (message) => {
-          if (clientRef.current === client) setError(message);
+          if (clientRef.current === client) store.error.set(message);
         },
         onClose: () => {
           if (clientRef.current !== client) return;
           clientRef.current = null;
-          setState('idle');
-          setLevel(0);
+          store.state.set('idle');
+          store.level.set(0);
         },
       },
       history,
@@ -92,30 +106,30 @@ export function useGeminiLive({
       client.connect(session.token);
     } catch (caught) {
       clientRef.current = null;
-      setState('idle');
-      setError(caught instanceof Error ? caught.message : 'Could not start Gemini Live');
+      store.state.set('idle');
+      store.error.set(caught instanceof Error ? caught.message : 'Could not start Gemini Live');
     }
-  }, []);
+  }, [store]);
 
   const stop = useCallback(() => {
     clientRef.current?.stop();
     clientRef.current = null;
-    setState('idle');
-    setLevel(0);
-    setHumanText('');
-    setAiText('');
-  }, []);
+    store.state.set('idle');
+    store.level.set(0);
+    store.humanText.set('');
+    store.aiText.set('');
+  }, [store]);
 
   const pause = useCallback(() => {
     clientRef.current?.pause();
-    setState('paused');
-    setLevel(0);
-  }, []);
+    store.state.set('paused');
+    store.level.set(0);
+  }, [store]);
 
   const resume = useCallback(() => {
     clientRef.current?.resume();
-    setState('listening');
-  }, []);
+    store.state.set('listening');
+  }, [store]);
 
   const segments = useMemo<TranscriptSegment[]>(() => {
     const current: TranscriptSegment[] = [];
diff --git a/web/app/src/features/connectors/ARCHITECTURE.md b/web/app/src/features/connectors/ARCHITECTURE.md
new file mode 100644
index 00000000000..2b407ccd546
--- /dev/null
+++ b/web/app/src/features/connectors/ARCHITECTURE.md
@@ -0,0 +1,7 @@
+# connectors
+
+Destination `/connectors`: installed apps and external services.
+
+- `api.ts` — app CRUD, enable/disable, integrations OAuth
+- `model.ts` — tab param + integration summary
+- `ui/` — explorer, form, detail, connected services
diff --git a/web/app/src/lib/__tests__/connectors.test.ts b/web/app/src/features/connectors/__tests__/connectors.test.ts
similarity index 93%
rename from web/app/src/lib/__tests__/connectors.test.ts
rename to web/app/src/features/connectors/__tests__/connectors.test.ts
index 3c79b5d7c3e..efc6721dcbd 100644
--- a/web/app/src/lib/__tests__/connectors.test.ts
+++ b/web/app/src/features/connectors/__tests__/connectors.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { connectorTabFromParam, summarizeIntegrations } from '@/lib/connectors';
+import { connectorTabFromParam, summarizeIntegrations } from '../model';
 import type { Integration } from '@/types/user';
 
 function integration(overrides: Partial<Integration>): Integration {
diff --git a/web/app/src/features/connectors/api.ts b/web/app/src/features/connectors/api.ts
new file mode 100644
index 00000000000..ea98f9e3c94
--- /dev/null
+++ b/web/app/src/features/connectors/api.ts
@@ -0,0 +1,527 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+import {
+  invalidateCache,
+  invalidationPatterns,
+  fetchWithCache,
+  cacheKeys,
+  CACHE_TTL,
+} from '@/lib/cache';
+import {
+  API_BASE_URL,
+  fetchAuthorizedBlob,
+  fetchWithAuth,
+  getAudioAuthHeaders,
+} from '@/shared/api/client';
+import type {
+  App,
+  AppCategory,
+  AppCapability,
+  AppsGroupedResponse,
+  AppsSearchResponse,
+  AppsSearchParams,
+  CreateAppRequest,
+  UpdateAppRequest,
+  ThumbnailUploadResponse,
+  GenerateDescriptionResponse,
+  NotificationScope,
+  PaymentPlan,
+} from '@/types/apps';
+import type { Integration } from '@/types/user';
+export type { App } from '@/types/apps';
+
+export async function getAppsGrouped(
+  params: {
+    capability?: string;
+    offset?: number;
+    limit?: number;
+  } = {},
+): Promise<AppsGroupedResponse> {
+  const { capability, offset = 0, limit = 20 } = params;
+
+  const queryParams = new URLSearchParams({
+    offset: offset.toString(),
+    limit: limit.toString(),
+  });
+
+  if (capability) {
+    queryParams.set('capability', capability);
+  }
+
+  return fetchWithAuth<AppsGroupedResponse>(`/v2/apps?${queryParams}`);
+}
+
+/**
+ * Search apps with filters
+ */
+export async function searchApps(
+  params: AppsSearchParams = {},
+): Promise<AppsSearchResponse> {
+  const queryParams = new URLSearchParams();
+
+  if (params.q) queryParams.set('q', params.q);
+  if (params.category) queryParams.set('category', params.category);
+  if (params.capability) queryParams.set('capability', params.capability);
+  if (params.rating !== undefined) queryParams.set('rating', params.rating.toString());
+  if (params.sort) queryParams.set('sort', params.sort);
+  if (params.my_apps) queryParams.set('my_apps', 'true');
+  if (params.installed_apps) queryParams.set('installed_apps', 'true');
+  queryParams.set('offset', (params.offset || 0).toString());
+  queryParams.set('limit', (params.limit || 20).toString());
+
+  return fetchWithAuth<AppsSearchResponse>(`/v2/apps/search?${queryParams}`);
+}
+
+/**
+ * Get popular apps
+ */
+export async function getPopularApps(): Promise<App[]> {
+  return fetchWithAuth<App[]>('/v1/apps/popular');
+}
+
+/**
+ * Get a single app by ID
+ */
+export async function getApp(appId: string): Promise<App> {
+  return fetchWithAuth<App>(`/v1/apps/${appId}`);
+}
+
+/**
+ * Get app categories
+ */
+export async function getAppCategories(): Promise<AppCategory[]> {
+  return fetchWithAuth<AppCategory[]>('/v1/app-categories');
+}
+
+/**
+ * Get app capabilities
+ */
+export async function getAppCapabilities(): Promise<AppCapability[]> {
+  return fetchWithAuth<AppCapability[]>('/v1/app-capabilities');
+}
+
+/**
+ * Enable (install) an app
+ */
+export async function enableApp(appId: string): Promise<{ status: string }> {
+  return fetchWithAuth<{ status: string }>(`/v1/apps/enable?app_id=${appId}`, {
+    method: 'POST',
+  });
+}
+
+/**
+ * Disable (uninstall) an app
+ */
+export async function disableApp(appId: string): Promise<{ status: string }> {
+  return fetchWithAuth<{ status: string }>(`/v1/apps/disable?app_id=${appId}`, {
+    method: 'POST',
+  });
+}
+
+/**
+ * Get installed apps
+ */
+export async function getInstalledApps(): Promise<AppsSearchResponse> {
+  return searchApps({ installed_apps: true, limit: 100 });
+}
+
+/**
+ * Get chat-enabled apps (apps with 'chat' or 'persona' capability)
+ */
+export async function getChatApps(): Promise<App[]> {
+  const response = await searchApps({ installed_apps: true, limit: 100 });
+  return response.data.filter(
+    (app) => app.capabilities?.includes('chat') || app.capabilities?.includes('persona'),
+  );
+}
+
+// ============================================================================
+// App Creation/Editing API
+// ============================================================================
+
+/**
+ * Create a new app
+ */
+export async function createApp(
+  data: CreateAppRequest & {
+    deleted?: boolean;
+    price?: number;
+    thumbnails?: string[];
+    uid?: string;
+  },
+  imageFile?: File,
+): Promise<{ app_id: string }> {
+  let token: string | null = null;
+
+  try {
+    token = await getIdToken();
+  } catch (tokenError) {
+    console.error('Failed to get auth token:', tokenError);
+    throw new Error('Failed to get authentication token');
+  }
+
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+
+  const url = `${API_BASE_URL}/v1/apps`;
+
+  const formData = new FormData();
+  formData.append('app_data', JSON.stringify(data));
+  if (imageFile) {
+    formData.append('file', imageFile, imageFile.name);
+  }
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => 'No error body');
+    console.error('Create app error:', response.status, errorText);
+    throw new Error(`Failed to create app: ${response.status}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * Update an existing app
+ */
+export async function updateApp(
+  appId: string,
+  data: Partial<CreateAppRequest>,
+  imageFile?: File,
+): Promise<void> {
+  let token: string | null = null;
+
+  try {
+    token = await getIdToken();
+  } catch (tokenError) {
+    console.error('Failed to get auth token:', tokenError);
+    throw new Error('Failed to get authentication token');
+  }
+
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+
+  const url = `${API_BASE_URL}/v1/apps/${appId}`;
+
+  // The API requires the id to be included in the app_data
+  const dataWithId = { ...data, id: appId };
+
+  const formData = new FormData();
+  formData.append('app_data', JSON.stringify(dataWithId));
+  if (imageFile) {
+    formData.append('file', imageFile, imageFile.name);
+  }
+
+  const response = await fetch(url, {
+    method: 'PATCH',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => 'No error body');
+    console.error('Update app error:', response.status, errorText);
+    throw new Error(`Failed to update app: ${response.status}`);
+  }
+}
+
+/**
+ * Re-enable an app that the backend auto-disabled after webhook failures.
+ *
+ * Sends `disabled: false` explicitly — the backend re-enable branch reads an
+ * unset-exclusive payload, so omitting the field is a no-op rather than a
+ * failure. The endpoint re-checks every configured URL and rejects the request
+ * with a specific reason, so that detail is surfaced instead of the status code.
+ */
+export async function reEnableApp(appId: string): Promise<void> {
+  const token = await getIdToken();
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+
+  const formData = new FormData();
+  formData.append('app_data', JSON.stringify({ id: appId, disabled: false }));
+
+  const response = await fetch(`${API_BASE_URL}/v1/apps/${appId}`, {
+    method: 'PATCH',
+    headers: { Authorization: `Bearer ${token}` },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const detail = await response
+      .json()
+      .then((body) => body?.detail)
+      .catch(() => null);
+    throw new Error(detail || `Failed to re-enable app: ${response.status}`);
+  }
+}
+
+/**
+ * Delete an app
+ */
+export async function deleteApp(appId: string): Promise<void> {
+  await fetchWithAuth(`/v1/apps/${appId}`, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * Upload app thumbnail
+ */
+export async function uploadAppThumbnail(file: File): Promise<ThumbnailUploadResponse> {
+  let token: string | null = null;
+
+  try {
+    token = await getIdToken();
+  } catch (tokenError) {
+    console.error('Failed to get auth token:', tokenError);
+    throw new Error('Failed to get authentication token');
+  }
+
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+
+  const url = `${API_BASE_URL}/v1/app/thumbnails`;
+
+  const formData = new FormData();
+  formData.append('file', file, file.name);
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => 'No error body');
+    console.error('Upload thumbnail error:', response.status, errorText);
+    throw new Error(`Failed to upload thumbnail: ${response.status}`);
+  }
+
+  return response.json();
+}
+
+/**
+ * Generate app description using AI
+ */
+export async function generateAppDescription(
+  name: string,
+  currentDescription: string,
+): Promise<string> {
+  const response = await fetchWithAuth<GenerateDescriptionResponse>(
+    '/v1/app/generate-description',
+    {
+      method: 'POST',
+      body: JSON.stringify({ name, description: currentDescription }),
+    },
+  );
+  return response.description;
+}
+
+/**
+ * Generate app description and emoji using AI
+ * Used for quick template creation (matches mobile app behavior)
+ */
+export async function generateAppDescriptionAndEmoji(
+  name: string,
+  prompt: string,
+): Promise<{ description: string; emoji: string }> {
+  try {
+    const response = await fetchWithAuth<{
+      description: string;
+      emoji: string;
+    }>('/v1/app/generate-description-emoji', {
+      method: 'POST',
+      body: JSON.stringify({ name, prompt }),
+    });
+    return {
+      description: response.description || '',
+      emoji: response.emoji || '✨',
+    };
+  } catch {
+    // Fallback: generate description only and use default emoji
+    const description = await generateAppDescription(name, prompt);
+    return { description, emoji: '✨' };
+  }
+}
+
+/**
+ * Get proactive notification scopes
+ * Note: This endpoint may not exist in all API versions, returns empty array on 404
+ */
+export async function getNotificationScopes(): Promise<NotificationScope[]> {
+  try {
+    const token = await getIdToken();
+    if (!token) return [];
+
+    const response = await fetch(
+      `${API_BASE_URL}/v1/apps/proactive-notification-scopes`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+          'X-App-Platform': 'web',
+        },
+      },
+    );
+
+    if (!response.ok) return [];
+    return response.json();
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Get available payment plans
+ * Note: This endpoint may not exist in all API versions, returns empty array on 404
+ */
+export async function getPaymentPlans(): Promise<PaymentPlan[]> {
+  try {
+    const token = await getIdToken();
+    if (!token) return [];
+
+    const response = await fetch(`${API_BASE_URL}/v1/app/plans`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+        'X-App-Platform': 'web',
+      },
+    });
+
+    if (!response.ok) return [];
+    return response.json();
+  } catch {
+    return [];
+  }
+}
+
+// Integration definitions with logo paths
+const INTEGRATION_DEFINITIONS: Array<{
+  id: string;
+  appKey: string;
+  name: string;
+  description: string;
+  logo: string;
+  coming_soon?: boolean;
+}> = [
+  {
+    id: 'google_calendar',
+    appKey: 'google_calendar',
+    name: 'Google Calendar',
+    description: 'Sync with your calendar',
+    logo: '/integrations/google-calendar.png',
+  },
+  {
+    id: 'whoop',
+    appKey: 'whoop',
+    name: 'Whoop',
+    description: 'Health & fitness tracking',
+    logo: '/integrations/whoop.png',
+  },
+  {
+    id: 'notion',
+    appKey: 'notion',
+    name: 'Notion',
+    description: 'Sync notes to Notion',
+    logo: '/integrations/notion-logo.png',
+  },
+  {
+    id: 'github',
+    appKey: 'github',
+    name: 'GitHub',
+    description: 'Create issues and notes',
+    logo: '/integrations/github-logo.png',
+  },
+  {
+    id: 'twitter',
+    appKey: 'twitter',
+    name: 'X (Twitter)',
+    description: 'Share to Twitter',
+    logo: '/integrations/x-logo.avif',
+  },
+  {
+    id: 'gmail',
+    appKey: 'gmail',
+    name: 'Gmail',
+    description: 'Email integrations',
+    logo: '/integrations/gmail-logo.jpeg',
+  },
+];
+
+/**
+ * Get individual integration connection status (like mobile app)
+ */
+async function getIntegrationStatus(appKey: string): Promise<{ connected: boolean }> {
+  try {
+    const response = await fetchWithAuth<{
+      connected: boolean;
+      app_key: string;
+    }>(`/v1/integrations/${appKey}`);
+    return { connected: response.connected ?? false };
+  } catch {
+    return { connected: false };
+  }
+}
+
+/**
+ * Get available integrations with connection status
+ * Fetches individual integration statuses like the mobile app does
+ */
+export async function getIntegrations(): Promise<Integration[]> {
+  // Fetch all integration statuses in parallel
+  const statusPromises = INTEGRATION_DEFINITIONS.map(async (def) => {
+    const status = await getIntegrationStatus(def.appKey);
+    return {
+      id: def.id,
+      name: def.name,
+      description: def.description,
+      icon: def.logo,
+      connected: status.connected,
+      coming_soon: def.coming_soon,
+    };
+  });
+
+  return Promise.all(statusPromises);
+}
+
+/**
+ * Get OAuth URL for an integration
+ * Opens the OAuth flow for the user to authorize
+ */
+export async function getIntegrationOAuthUrl(
+  integrationId: string,
+): Promise<string | null> {
+  try {
+    const response = await fetchWithAuth<{ auth_url: string }>(
+      `/v1/integrations/${integrationId}/oauth-url`,
+    );
+    return response.auth_url || null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Disconnect an integration
+ */
+export async function disconnectIntegration(integrationId: string): Promise<void> {
+  await fetchWithAuth(`/v1/integrations/${integrationId}`, {
+    method: 'DELETE',
+  });
+}
diff --git a/web/app/src/features/connectors/index.ts b/web/app/src/features/connectors/index.ts
new file mode 100644
index 00000000000..ab7cc5ed68f
--- /dev/null
+++ b/web/app/src/features/connectors/index.ts
@@ -0,0 +1,7 @@
+export { AppsExplorer } from './ui/AppsExplorer';
+export { AppForm } from './ui/AppForm';
+export { AppDetail } from './ui/AppDetail';
+export { ConnectedServices } from './ui/ConnectedServices';
+export { connectorTabFromParam, summarizeIntegrations, type ConnectorTab } from './model';
+export type { App } from '@/types/apps';
+export * from './api';
diff --git a/web/app/src/lib/connectors.ts b/web/app/src/features/connectors/model.ts
similarity index 100%
rename from web/app/src/lib/connectors.ts
rename to web/app/src/features/connectors/model.ts
diff --git a/web/app/src/components/apps/AppCard.tsx b/web/app/src/features/connectors/ui/AppCard.tsx
similarity index 98%
rename from web/app/src/components/apps/AppCard.tsx
rename to web/app/src/features/connectors/ui/AppCard.tsx
index f65b83c0cb9..8fdf8644d86 100644
--- a/web/app/src/components/apps/AppCard.tsx
+++ b/web/app/src/features/connectors/ui/AppCard.tsx
@@ -5,7 +5,7 @@ import Image from '@tschk/moonshine-next/image';
 import Link from '@tschk/moonshine-next/link';
 import { Star, Download, Loader2, Check, Lock } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { enableApp, disableApp } from '@/lib/api';
+import { enableApp, disableApp } from '@/features/connectors/api';
 import type { App } from '@/types/apps';
 
 interface AppCardProps {
diff --git a/web/app/src/components/apps/AppDetail.tsx b/web/app/src/features/connectors/ui/AppDetail.tsx
similarity index 98%
rename from web/app/src/components/apps/AppDetail.tsx
rename to web/app/src/features/connectors/ui/AppDetail.tsx
index dbbd487db24..8ab9f5b6fcf 100644
--- a/web/app/src/components/apps/AppDetail.tsx
+++ b/web/app/src/features/connectors/ui/AppDetail.tsx
@@ -19,11 +19,11 @@ import {
   Pencil,
   LayoutGrid,
 } from 'lucide-react';
-import { useAuth } from '@/components/auth/AuthProvider';
+import { useAuth } from '@/features/auth';
 import { cn } from '@/lib/utils';
-import { getApp, enableApp, disableApp, reEnableApp } from '@/lib/api';
+import { getApp, enableApp, disableApp, reEnableApp } from '@/features/connectors/api';
 import type { App } from '@/types/apps';
-import { AppDisabledNotice } from '@/components/apps/AppDisabledNotice';
+import { AppDisabledNotice } from '@/features/connectors/ui/AppDisabledNotice';
 import { PageHeader } from '@/components/layout/PageHeader';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 
diff --git a/web/app/src/components/apps/AppDisabledNotice.tsx b/web/app/src/features/connectors/ui/AppDisabledNotice.tsx
similarity index 100%
rename from web/app/src/components/apps/AppDisabledNotice.tsx
rename to web/app/src/features/connectors/ui/AppDisabledNotice.tsx
diff --git a/web/app/src/components/apps/AppForm.tsx b/web/app/src/features/connectors/ui/AppForm.tsx
similarity index 99%
rename from web/app/src/components/apps/AppForm.tsx
rename to web/app/src/features/connectors/ui/AppForm.tsx
index 41d07500a32..96ded6e5b8a 100644
--- a/web/app/src/components/apps/AppForm.tsx
+++ b/web/app/src/features/connectors/ui/AppForm.tsx
@@ -4,17 +4,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from '@tschk/moonshine-next/navigation';
 import Image from '@tschk/moonshine-next/image';
 import { cn } from '@/lib/utils';
-import {
-  getAppCategories,
-  getAppCapabilities,
-  getNotificationScopes,
-  getPaymentPlans,
-  createApp,
-  updateApp,
-  uploadAppThumbnail,
-  generateAppDescription,
-  deleteApp,
-} from '@/lib/api';
+import { getAppCategories, getAppCapabilities, getNotificationScopes, getPaymentPlans, createApp, updateApp, uploadAppThumbnail, generateAppDescription, deleteApp } from '@/features/connectors/api';
 import type {
   App,
   AppCategory,
diff --git a/web/app/src/components/apps/AppGridSection.tsx b/web/app/src/features/connectors/ui/AppGridSection.tsx
similarity index 100%
rename from web/app/src/components/apps/AppGridSection.tsx
rename to web/app/src/features/connectors/ui/AppGridSection.tsx
diff --git a/web/app/src/components/apps/AppsExplorer.tsx b/web/app/src/features/connectors/ui/AppsExplorer.tsx
similarity index 99%
rename from web/app/src/components/apps/AppsExplorer.tsx
rename to web/app/src/features/connectors/ui/AppsExplorer.tsx
index 8cd615f29d9..21ca0420b48 100644
--- a/web/app/src/components/apps/AppsExplorer.tsx
+++ b/web/app/src/features/connectors/ui/AppsExplorer.tsx
@@ -4,13 +4,7 @@ import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useRouter, useSearchParams } from '@tschk/moonshine-next/navigation';
 import { Loader2, ChevronDown, Star, Plus } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import {
-  getAppsGrouped,
-  searchApps,
-  getPopularApps,
-  getAppCategories,
-  getAppCapabilities,
-} from '@/lib/api';
+import { getAppsGrouped, searchApps, getPopularApps, getAppCategories, getAppCapabilities } from '@/features/connectors/api';
 import type {
   App,
   AppCategory,
@@ -20,7 +14,7 @@ import type {
   SortOption,
 } from '@/types/apps';
 import { AppCard } from './AppCard';
-import { connectorTabFromParam, type ConnectorTab } from '@/lib/connectors';
+import { connectorTabFromParam, type ConnectorTab } from '../model';
 import { AppGridSection } from './AppGridSection';
 import { ConnectedServices } from './ConnectedServices';
 import { PageToolbar } from '@/components/layout/PageToolbar';
diff --git a/web/app/src/components/apps/ConnectedServices.tsx b/web/app/src/features/connectors/ui/ConnectedServices.tsx
similarity index 98%
rename from web/app/src/components/apps/ConnectedServices.tsx
rename to web/app/src/features/connectors/ui/ConnectedServices.tsx
index 72c4324420a..db49f743252 100644
--- a/web/app/src/components/apps/ConnectedServices.tsx
+++ b/web/app/src/features/connectors/ui/ConnectedServices.tsx
@@ -3,12 +3,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Loader2, Puzzle } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import {
-  disconnectIntegration,
-  getIntegrationOAuthUrl,
-  getIntegrations,
-} from '@/lib/api';
-import { summarizeIntegrations } from '@/lib/connectors';
+import { disconnectIntegration, getIntegrationOAuthUrl, getIntegrations } from '@/features/connectors/api';
+import { summarizeIntegrations } from '../model';
 import type { Integration } from '@/types/user';
 
 function Toggle({
diff --git a/web/app/src/components/apps/__tests__/ConnectedServices.test.tsx b/web/app/src/features/connectors/ui/__tests__/ConnectedServices.test.tsx
similarity index 97%
rename from web/app/src/components/apps/__tests__/ConnectedServices.test.tsx
rename to web/app/src/features/connectors/ui/__tests__/ConnectedServices.test.tsx
index 880d2e77104..47561737e9e 100644
--- a/web/app/src/components/apps/__tests__/ConnectedServices.test.tsx
+++ b/web/app/src/features/connectors/ui/__tests__/ConnectedServices.test.tsx
@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { ConnectedServices } from '@/components/apps/ConnectedServices';
+import { ConnectedServices } from '@/features/connectors/ui/ConnectedServices';
 import type { Integration } from '@/types/user';
 
 const api = vi.hoisted(() => ({
@@ -9,7 +9,7 @@ const api = vi.hoisted(() => ({
   getIntegrations: vi.fn(),
 }));
 
-vi.mock('@/lib/api', () => api);
+vi.mock('@/features/connectors/api', () => api);
 
 const disconnected: Integration = {
   id: 'gmail',
diff --git a/web/app/src/features/conversations/ARCHITECTURE.md b/web/app/src/features/conversations/ARCHITECTURE.md
new file mode 100644
index 00000000000..eff04f38edb
--- /dev/null
+++ b/web/app/src/features/conversations/ARCHITECTURE.md
@@ -0,0 +1,11 @@
+# conversations
+
+Destination `/conversations`: day-grouped gallery of conversations and recaps.
+
+- `api.ts` — HTTP (list, merge, folders, people, audio, daily summaries)
+- `model.ts` — timeline grouping, panel sizing, selection from `?id=`/`?recap=`
+- `ui/` — split view, detail panel (summary/actions tabs), gallery
+- `recaps/` — recap detail; a recap leads its day, it is not a separate rail
+- hooks — people, list, recaps, detail, and search are moonshine signal stores
+
+Public entry: `index.ts`.
diff --git a/web/app/src/lib/__tests__/conversationPanelSizing.test.ts b/web/app/src/features/conversations/__tests__/conversationPanelSizing.test.ts
similarity index 94%
rename from web/app/src/lib/__tests__/conversationPanelSizing.test.ts
rename to web/app/src/features/conversations/__tests__/conversationPanelSizing.test.ts
index 1f5d4248b16..ec43b1072c8 100644
--- a/web/app/src/lib/__tests__/conversationPanelSizing.test.ts
+++ b/web/app/src/features/conversations/__tests__/conversationPanelSizing.test.ts
@@ -3,7 +3,7 @@ import {
   MIN_CONVERSATION_DETAIL_WIDTH,
   MIN_CONVERSATION_GALLERY_WIDTH,
   resizeConversationDetailPanel,
-} from '@/lib/conversationPanelSizing';
+} from '../model';
 
 describe('conversation detail panel sizing', () => {
   it('can expand past the previous fixed 720px ceiling', () => {
diff --git a/web/app/src/lib/__tests__/conversationTimeline.test.ts b/web/app/src/features/conversations/__tests__/conversationTimeline.test.ts
similarity index 87%
rename from web/app/src/lib/__tests__/conversationTimeline.test.ts
rename to web/app/src/features/conversations/__tests__/conversationTimeline.test.ts
index c85eb38ee95..6cbfa1a2aa5 100644
--- a/web/app/src/lib/__tests__/conversationTimeline.test.ts
+++ b/web/app/src/features/conversations/__tests__/conversationTimeline.test.ts
@@ -6,8 +6,10 @@ import {
   dayKeyOf,
   dayLabel,
   flattenTimelineItems,
+  groupRecapsByMonth,
   parseLocalDay,
-} from '@/lib/conversationTimeline';
+  selectionFromSearchParams,
+} from '../model';
 import type { Conversation } from '@/types/conversation';
 import type { DailySummary } from '@/types/recap';
 
@@ -198,3 +200,25 @@ describe('buildTimelineDayGroups', () => {
     ]);
   });
 });
+
+describe('selectionFromSearchParams', () => {
+  it('prefers a recap id when both query params are present', () => {
+    expect(selectionFromSearchParams('c1', 'r1')).toEqual({ kind: 'recap', id: 'r1' });
+  });
+
+  it('selects a conversation when only id is set', () => {
+    expect(selectionFromSearchParams('c1', null)).toEqual({ kind: 'conversation', id: 'c1' });
+  });
+});
+
+describe('groupRecapsByMonth', () => {
+  it('groups by local calendar month', () => {
+    const grouped = groupRecapsByMonth([
+      recap('jan', '2025-01-15'),
+      recap('feb', '2025-02-01'),
+      recap('jan-2', '2025-01-02'),
+    ]);
+    expect(Object.keys(grouped)).toEqual(['January 2025', 'February 2025']);
+    expect(grouped['January 2025']?.map((item) => item.id)).toEqual(['jan', 'jan-2']);
+  });
+});
diff --git a/web/app/src/features/conversations/__tests__/useConversation.test.tsx b/web/app/src/features/conversations/__tests__/useConversation.test.tsx
new file mode 100644
index 00000000000..56e938715ac
--- /dev/null
+++ b/web/app/src/features/conversations/__tests__/useConversation.test.tsx
@@ -0,0 +1,89 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Conversation } from '@/types/conversation';
+
+vi.mock('@/features/conversations/api', () => ({
+  getConversation: vi.fn(),
+}));
+
+const api = await import('@/features/conversations/api');
+const { useConversation } = await import('@/features/conversations/useConversation');
+
+function conversation(id: string): Conversation {
+  return {
+    id,
+    created_at: '2026-01-01T00:00:00Z',
+    started_at: '2026-01-01T00:00:00Z',
+    structured: { title: id, overview: '', emoji: '', category: 'other' },
+  } as unknown as Conversation;
+}
+
+type Deferred<T> = { promise: Promise<T>; resolve: (value: T) => void };
+
+function deferred<T>(): Deferred<T> {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((done) => {
+    resolve = done;
+  });
+  return { promise, resolve };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+describe('useConversation', () => {
+  it('loads a conversation by id', async () => {
+    vi.mocked(api.getConversation).mockResolvedValue(conversation('c1'));
+    const { result } = renderHook(() => useConversation('c1'));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.conversation?.id).toBe('c1');
+  });
+
+  it('applies a local update without refetching', async () => {
+    vi.mocked(api.getConversation).mockResolvedValue(conversation('c1'));
+    const { result } = renderHook(() => useConversation('c1'));
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    act(() => {
+      result.current.update({
+        ...conversation('c1'),
+        structured: {
+          title: 'Renamed',
+          overview: '',
+          emoji: '',
+          category: 'other',
+        },
+      } as Conversation);
+    });
+
+    expect(result.current.conversation?.structured.title).toBe('Renamed');
+    expect(api.getConversation).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not land a previous id after the selection changes', async () => {
+    const first = deferred<Conversation>();
+    const second = deferred<Conversation>();
+    vi.mocked(api.getConversation)
+      .mockReturnValueOnce(first.promise)
+      .mockReturnValueOnce(second.promise);
+
+    const { result, rerender } = renderHook(
+      ({ id }: { id: string }) => useConversation(id),
+      { initialProps: { id: 'c-a' } },
+    );
+
+    rerender({ id: 'c-b' });
+
+    await act(async () => {
+      second.resolve(conversation('c-b'));
+      await Promise.resolve();
+      first.resolve(conversation('c-a'));
+      await Promise.resolve();
+    });
+
+    await waitFor(() => expect(result.current.conversation?.id).toBe('c-b'));
+  });
+});
diff --git a/web/app/src/features/conversations/__tests__/useConversations.test.tsx b/web/app/src/features/conversations/__tests__/useConversations.test.tsx
new file mode 100644
index 00000000000..b04238a81ee
--- /dev/null
+++ b/web/app/src/features/conversations/__tests__/useConversations.test.tsx
@@ -0,0 +1,46 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Conversation } from '@/types/conversation';
+import { clearAllCache } from '@/lib/cache';
+
+vi.mock('@/features/conversations/api', () => ({
+  getConversations: vi.fn(),
+}));
+
+const api = await import('@/features/conversations/api');
+const { useConversations } = await import('@/features/conversations/useConversations');
+
+function conversation(id: string): Conversation {
+  return {
+    id,
+    created_at: '2026-01-01T00:00:00Z',
+    started_at: '2026-01-01T00:00:00Z',
+    structured: { title: id, overview: '', emoji: '', category: 'other' },
+  } as unknown as Conversation;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  clearAllCache();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+describe('useConversations', () => {
+  it('loads conversations on mount', async () => {
+    vi.mocked(api.getConversations).mockResolvedValue([conversation('c1')]);
+    const { result } = renderHook(() => useConversations());
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.conversations.map((entry) => entry.id)).toEqual(['c1']);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('surfaces a load failure', async () => {
+    vi.mocked(api.getConversations).mockRejectedValue(new Error('network down'));
+    const { result } = renderHook(() => useConversations());
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.error).toBe('network down');
+    expect(result.current.conversations).toEqual([]);
+  });
+});
diff --git a/web/app/src/features/conversations/__tests__/usePeople.test.tsx b/web/app/src/features/conversations/__tests__/usePeople.test.tsx
new file mode 100644
index 00000000000..70935e85768
--- /dev/null
+++ b/web/app/src/features/conversations/__tests__/usePeople.test.tsx
@@ -0,0 +1,56 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Person } from '@/types/user';
+
+vi.mock('@/features/conversations/api', () => ({
+  getPeople: vi.fn(),
+  createPerson: vi.fn(),
+  updatePersonName: vi.fn(),
+  deletePerson: vi.fn(),
+}));
+
+const api = await import('@/features/conversations/api');
+const { usePeople } = await import('@/features/conversations/usePeople');
+
+function person(overrides: Partial<Person> = {}): Person {
+  return {
+    id: 'p1',
+    name: 'Ada',
+    created_at: '2026-01-01T00:00:00Z',
+    speech_samples_count: 0,
+    ...overrides,
+  };
+}
+
+async function renderLoaded(initial: Person[] = [person()]) {
+  vi.mocked(api.getPeople).mockResolvedValue(initial);
+  const view = renderHook(() => usePeople());
+  await waitFor(() => expect(view.result.current.loading).toBe(false));
+  return view;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+describe('usePeople', () => {
+  it('loads people on mount', async () => {
+    const { result } = await renderLoaded();
+    expect(result.current.people.map((entry) => entry.name)).toEqual(['Ada']);
+  });
+
+  it('rolls a rename back when the server rejects it', async () => {
+    const { result } = await renderLoaded();
+    vi.mocked(api.updatePersonName).mockRejectedValue(new Error('conflict'));
+
+    let succeeded = true;
+    await act(async () => {
+      succeeded = await result.current.updatePerson('p1', 'Grace');
+    });
+
+    expect(succeeded).toBe(false);
+    expect(result.current.people[0].name).toBe('Ada');
+    expect(result.current.error).toBe('conflict');
+  });
+});
diff --git a/web/app/src/features/conversations/__tests__/useRecaps.test.tsx b/web/app/src/features/conversations/__tests__/useRecaps.test.tsx
new file mode 100644
index 00000000000..7bfd7c8de8d
--- /dev/null
+++ b/web/app/src/features/conversations/__tests__/useRecaps.test.tsx
@@ -0,0 +1,70 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { DailySummary } from '@/types/recap';
+import { clearAllCache } from '@/lib/cache';
+
+vi.mock('@/features/conversations/api', () => ({
+  getDailySummaries: vi.fn(),
+  getDailySummary: vi.fn(),
+  deleteDailySummary: vi.fn(),
+  generateTestDailySummary: vi.fn(),
+}));
+
+const api = await import('@/features/conversations/api');
+const { useRecaps } = await import('@/features/conversations/useRecaps');
+
+function recap(id: string, date = '2025-01-15'): DailySummary {
+  return {
+    id,
+    date,
+    headline: id,
+    day_emoji: '',
+    overview: '',
+    stats: {
+      total_conversations: 0,
+      total_duration_minutes: 0,
+      action_items_count: 0,
+    },
+    highlights: [],
+    action_items: [],
+    unresolved_questions: [],
+    decisions_made: [],
+    knowledge_nuggets: [],
+    locations: [],
+    created_at: '2025-01-15T00:00:00Z',
+  };
+}
+
+async function renderLoaded(initial: DailySummary[] = [recap('r1')]) {
+  vi.mocked(api.getDailySummaries).mockResolvedValue(initial);
+  const view = renderHook(() => useRecaps());
+  await waitFor(() => expect(view.result.current.loading).toBe(false));
+  return view;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  clearAllCache();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+describe('useRecaps', () => {
+  it('loads recaps on mount', async () => {
+    const { result } = await renderLoaded();
+    expect(result.current.recaps.map((entry) => entry.id)).toEqual(['r1']);
+  });
+
+  it('puts a recap back when delete fails', async () => {
+    const { result } = await renderLoaded();
+    vi.mocked(api.deleteDailySummary).mockRejectedValue(new Error('locked'));
+
+    let succeeded = true;
+    await act(async () => {
+      succeeded = await result.current.removeRecap('r1');
+    });
+
+    expect(succeeded).toBe(false);
+    expect(result.current.recaps.map((entry) => entry.id)).toEqual(['r1']);
+    expect(result.current.error).toBe('locked');
+  });
+});
diff --git a/web/app/src/features/conversations/__tests__/useSearchConversations.test.tsx b/web/app/src/features/conversations/__tests__/useSearchConversations.test.tsx
new file mode 100644
index 00000000000..d7e9200acd1
--- /dev/null
+++ b/web/app/src/features/conversations/__tests__/useSearchConversations.test.tsx
@@ -0,0 +1,90 @@
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Conversation } from '@/types/conversation';
+
+vi.mock('@/features/conversations/api', () => ({
+  searchConversations: vi.fn(),
+}));
+
+const api = await import('@/features/conversations/api');
+const { useSearchConversations } = await import(
+  '@/features/conversations/useSearchConversations'
+);
+
+function conversation(id: string): Conversation {
+  return {
+    id,
+    created_at: '2026-01-01T00:00:00Z',
+    started_at: '2026-01-01T00:00:00Z',
+    structured: { title: id, overview: '', emoji: '', category: 'other' },
+  } as unknown as Conversation;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+describe('useSearchConversations', () => {
+  it('replaces results on a new search', async () => {
+    vi.mocked(api.searchConversations).mockResolvedValue({
+      items: [conversation('c1')],
+      current_page: 1,
+      total_pages: 2,
+    });
+
+    const { result } = renderHook(() => useSearchConversations());
+
+    await act(async () => {
+      await result.current.search('hello');
+    });
+
+    expect(result.current.results.map((entry) => entry.id)).toEqual(['c1']);
+    expect(result.current.totalPages).toBe(2);
+  });
+
+  it('appends the next page using peek rather than a stale loading flag', async () => {
+    vi.mocked(api.searchConversations)
+      .mockResolvedValueOnce({
+        items: [conversation('c1')],
+        current_page: 1,
+        total_pages: 2,
+      })
+      .mockResolvedValueOnce({
+        items: [conversation('c2')],
+        current_page: 2,
+        total_pages: 2,
+      });
+
+    const { result } = renderHook(() => useSearchConversations());
+
+    await act(async () => {
+      await result.current.search('hello');
+    });
+    await act(async () => {
+      await result.current.loadMore();
+    });
+
+    expect(result.current.results.map((entry) => entry.id)).toEqual(['c1', 'c2']);
+    expect(result.current.currentPage).toBe(2);
+  });
+
+  it('clears without calling search', async () => {
+    vi.mocked(api.searchConversations).mockResolvedValue({
+      items: [conversation('c1')],
+      current_page: 1,
+      total_pages: 1,
+    });
+    const { result } = renderHook(() => useSearchConversations());
+    await act(async () => {
+      await result.current.search('hello');
+    });
+
+    act(() => {
+      result.current.clear();
+    });
+
+    expect(result.current.results).toEqual([]);
+    expect(result.current.currentPage).toBe(1);
+  });
+});
diff --git a/web/app/src/features/conversations/api.ts b/web/app/src/features/conversations/api.ts
new file mode 100644
index 00000000000..ef4a40f2a1f
--- /dev/null
+++ b/web/app/src/features/conversations/api.ts
@@ -0,0 +1,683 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+import {
+  invalidateCache,
+  invalidateCacheKey,
+  invalidationPatterns,
+  fetchWithCache,
+  cacheKeys,
+  CACHE_TTL,
+} from '@/lib/cache';
+import {
+  API_BASE_URL,
+  fetchAuthorizedBlob,
+  fetchWithAuth,
+  getAudioAuthHeaders,
+} from '@/shared/api/client';
+import type {
+  Conversation,
+  ConversationScreenFrameSet,
+  ConversationSearchResponse,
+  ConversationStatus,
+  AudioFileUrlInfo,
+  ScreenFrameSharingUpdateRequest,
+} from '@/types/conversation';
+import type {
+  MergeConversationsResponse,
+  CreateConversationResponse,
+} from '@/lib/omiApi.generated';
+export type { MergeConversationsResponse, CreateConversationResponse };
+import type { DailySummary } from '@/types/recap';
+import type { Person } from '@/types/user';
+import type { Folder, CreateFolderRequest, UpdateFolderRequest } from '@/types/folder';
+
+export interface GetConversationsParams {
+  limit?: number;
+  offset?: number;
+  statuses?: ConversationStatus[];
+  includeDiscarded?: boolean;
+  startDate?: Date;
+  endDate?: Date;
+  folderId?: string;
+}
+
+export async function getConversations(
+  params: GetConversationsParams = {},
+): Promise<Conversation[]> {
+  const {
+    limit = 50,
+    offset = 0,
+    statuses = ['processing', 'completed'],
+    includeDiscarded = false,
+    startDate,
+    endDate,
+    folderId,
+  } = params;
+
+  const queryParams = new URLSearchParams({
+    limit: limit.toString(),
+    offset: offset.toString(),
+    include_discarded: includeDiscarded.toString(),
+    statuses: statuses.join(','),
+  });
+
+  if (startDate) {
+    queryParams.set('start_date', startDate.toISOString());
+  }
+
+  if (endDate) {
+    queryParams.set('end_date', endDate.toISOString());
+  }
+
+  if (folderId) {
+    queryParams.set('folder_id', folderId);
+  }
+
+  return fetchWithAuth<Conversation[]>(`/v1/conversations?${queryParams}`);
+}
+
+/**
+ * Get a single conversation by ID
+ * Uses centralized cache with request deduplication
+ */
+export async function getConversation(id: string): Promise<Conversation> {
+  return fetchWithCache<Conversation>(
+    cacheKeys.conversation(id),
+    () => fetchWithAuth<Conversation>(`/v1/conversations/${id}`),
+    { ttl: CACHE_TTL.SHORT },
+  );
+}
+
+/**
+ * Search conversations
+ */
+export interface SearchConversationsParams {
+  query: string;
+  page?: number;
+  perPage?: number;
+  includeDiscarded?: boolean;
+}
+
+export async function searchConversations(
+  params: SearchConversationsParams,
+): Promise<ConversationSearchResponse> {
+  const { query, page = 1, perPage = 10, includeDiscarded = false } = params;
+
+  return fetchWithAuth<ConversationSearchResponse>('/v1/conversations/search', {
+    method: 'POST',
+    body: JSON.stringify({
+      query,
+      page,
+      per_page: perPage,
+      include_discarded: includeDiscarded,
+    }),
+  });
+}
+
+/**
+ * Toggle conversation starred status
+ */
+export async function toggleStarred(id: string, starred: boolean): Promise<void> {
+  await fetchWithAuth(`/v1/conversations/${id}/starred?starred=${starred}`, {
+    method: 'PATCH',
+  });
+  invalidateCache(invalidationPatterns.conversations);
+}
+
+/**
+ * Delete a conversation
+ */
+export async function deleteConversation(id: string): Promise<void> {
+  await fetchWithAuth(`/v1/conversations/${id}`, {
+    method: 'DELETE',
+  });
+  invalidateCache(invalidationPatterns.conversations);
+}
+
+/**
+ * Get the approved screenshot set (banner + strip) for a conversation.
+ * Uses the same fetch-with-cache idiom as `getConversation`; a short TTL
+ * balances against the frame set's signed URLs expiring after 60 minutes.
+ */
+export async function getConversationScreenFrames(
+  conversationId: string,
+): Promise<ConversationScreenFrameSet> {
+  return fetchWithCache<ConversationScreenFrameSet>(
+    cacheKeys.screenFrames(conversationId),
+    () =>
+      fetchWithAuth<ConversationScreenFrameSet>(
+        `/v1/conversations/${conversationId}/screenshots`,
+      ),
+    { ttl: CACHE_TTL.SHORT },
+  );
+}
+
+/**
+ * Delete a single screenshot. The server may promote another already-
+ * approved, already-persisted frame to banner (contract §8); the returned
+ * set is authoritative, so callers should replace their local state with it
+ * rather than trying to predict the promotion.
+ */
+export async function deleteScreenFrame(
+  conversationId: string,
+  frameId: string,
+): Promise<ConversationScreenFrameSet> {
+  const result = await fetchWithAuth<ConversationScreenFrameSet>(
+    `/v1/conversations/${conversationId}/screenshots/${frameId}`,
+    { method: 'DELETE' },
+  );
+  invalidateCacheKey(cacheKeys.screenFrames(conversationId));
+  return result;
+}
+
+/** Delete every screenshot for a conversation (banner + strip). */
+export async function deleteAllScreenFrames(
+  conversationId: string,
+): Promise<ConversationScreenFrameSet> {
+  const result = await fetchWithAuth<ConversationScreenFrameSet>(
+    `/v1/conversations/${conversationId}/screenshots`,
+    { method: 'DELETE' },
+  );
+  invalidateCacheKey(cacheKeys.screenFrames(conversationId));
+  return result;
+}
+
+/**
+ * Toggle whether this conversation's approved frames are visible on its
+ * public share link. Default for a new conversation is `enabled: true`.
+ */
+export async function patchScreenFrameSharing(
+  conversationId: string,
+  enabled: boolean,
+): Promise<ConversationScreenFrameSet> {
+  const body: ScreenFrameSharingUpdateRequest = { enabled };
+  const result = await fetchWithAuth<ConversationScreenFrameSet>(
+    `/v1/conversations/${conversationId}/screenshot-sharing`,
+    { method: 'PATCH', body: JSON.stringify(body) },
+  );
+  invalidateCacheKey(cacheKeys.screenFrames(conversationId));
+  return result;
+}
+
+/**
+ * Merge multiple conversations into one
+ * @param conversationIds - Array of conversation IDs to merge
+ * @param reprocess - Whether to reprocess the merged conversation (default: true)
+ * @returns Response with status and merged conversation IDs
+ */
+export async function mergeConversations(
+  conversationIds: string[],
+  reprocess: boolean = true,
+): Promise<MergeConversationsResponse> {
+  return fetchWithAuth<MergeConversationsResponse>('/v1/conversations/merge', {
+    method: 'POST',
+    body: JSON.stringify({
+      conversation_ids: conversationIds,
+      reprocess,
+    }),
+  });
+}
+
+/**
+ * Finalize an in-progress conversation from a recording session.
+ * This processes the transcript, generates title/summary/action items,
+ * and creates audio file records from stored chunks.
+ *
+ * @returns The processed conversation, or null if no in-progress conversation exists
+ */
+export async function processInProgressConversation(): Promise<CreateConversationResponse | null> {
+  try {
+    const result = await fetchWithAuth<CreateConversationResponse>('/v1/conversations', {
+      method: 'POST',
+      body: JSON.stringify({}),
+    });
+    invalidateCache(invalidationPatterns.conversations);
+    return result;
+  } catch (error) {
+    // 404 means no in-progress conversation exists
+    if (error instanceof Error && error.message.includes('404')) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+/**
+ * Finalize exactly one conversation by ID (desktop-style).
+ * Prefer this over processInProgressConversation when a socket owns a
+ * conversation_id — the Redis in_progress pointer is shared across device +
+ * web and must not steal a pendant session (#5388).
+ */
+export async function finalizeConversationById(
+  conversationId: string,
+): Promise<CreateConversationResponse | null> {
+  try {
+    const result = await fetchWithAuth<CreateConversationResponse>(
+      `/v1/conversations/${encodeURIComponent(conversationId)}/finalize`,
+      {
+        method: 'POST',
+        body: JSON.stringify({}),
+      },
+    );
+    invalidateCache(invalidationPatterns.conversations);
+    return result;
+  } catch (error) {
+    if (error instanceof Error && error.message.includes('404')) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+// ============================================================================
+// Action Items (Tasks) API
+// ============================================================================
+
+/**
+ * Get all action items
+ */
+export interface GetDailySummariesParams {
+  limit?: number;
+  offset?: number;
+}
+
+/**
+ * Get list of daily summaries with pagination
+ */
+export async function getDailySummaries(
+  params: GetDailySummariesParams = {},
+): Promise<DailySummary[]> {
+  const { limit = 30, offset = 0 } = params;
+  const queryParams = new URLSearchParams({
+    limit: limit.toString(),
+    offset: offset.toString(),
+  });
+  return fetchWithAuth<DailySummary[]>(`/v1/users/daily-summaries?${queryParams}`);
+}
+
+/**
+ * Get a single daily summary by ID
+ */
+export async function getDailySummary(id: string): Promise<DailySummary> {
+  return fetchWithAuth<DailySummary>(`/v1/users/daily-summaries/${id}`);
+}
+
+/**
+ * Delete a daily summary
+ */
+export async function deleteDailySummary(id: string): Promise<void> {
+  await fetchWithAuth(`/v1/users/daily-summaries/${id}`, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * Generate a test daily summary for a specific date
+ */
+export async function generateTestDailySummary(date: string): Promise<DailySummary> {
+  return fetchWithAuth<DailySummary>('/v1/users/daily-summary-settings/test', {
+    method: 'POST',
+    body: JSON.stringify({ date }),
+  });
+}
+
+/**
+ * Get all people for speaker identification
+ */
+export async function getPeople(): Promise<Person[]> {
+  return fetchWithAuth<Person[]>('/v1/users/people');
+}
+
+/**
+ * Create a new person
+ */
+export async function createPerson(name: string): Promise<Person> {
+  return fetchWithAuth<Person>('/v1/users/people', {
+    method: 'POST',
+    body: JSON.stringify({ name }),
+  });
+}
+
+/**
+ * Update person name
+ */
+export async function updatePersonName(personId: string, name: string): Promise<void> {
+  await fetchWithAuth(`/v1/users/people/${personId}/name`, {
+    method: 'PATCH',
+    body: JSON.stringify({ name }),
+  });
+}
+
+/**
+ * Delete a person
+ */
+export async function deletePerson(personId: string): Promise<void> {
+  await fetchWithAuth(`/v1/users/people/${personId}`, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * Bulk assign speaker to transcript segments
+ * @param conversationId - The conversation ID
+ * @param segmentIds - Array of segment IDs to assign
+ * @param isUser - If true, marks segments as user's speech
+ * @param personId - Person ID to assign (null to unassign)
+ */
+export async function assignBulkTranscriptSegments(
+  conversationId: string,
+  segmentIds: string[],
+  options: { isUser?: boolean; personId?: string | null },
+): Promise<void> {
+  const { isUser, personId } = options;
+
+  let assignType: 'is_user' | 'person_id';
+  let value: string | null;
+
+  if (isUser) {
+    assignType = 'is_user';
+    value = 'true';
+  } else {
+    assignType = 'person_id';
+    value = personId ?? null;
+  }
+
+  await fetchWithAuth(`/v1/conversations/${conversationId}/segments/assign-bulk`, {
+    method: 'PATCH',
+    body: JSON.stringify({
+      segment_ids: segmentIds,
+      assign_type: assignType,
+      value,
+    }),
+  });
+}
+
+/**
+ * Error thrown when editing a transcript segment requires a paid plan
+ * (backend returns HTTP 402 for `/segments/text` on gated accounts).
+ */
+export class SegmentEditPlanRequiredError extends Error {
+  constructor(message = 'Editing the transcript requires the Unlimited plan.') {
+    super(message);
+    this.name = 'SegmentEditPlanRequiredError';
+  }
+}
+
+/**
+ * Update the text of a single transcript segment.
+ *
+ * Mirrors the backend `PATCH /v1/conversations/{id}/segments/text`
+ * (`UpdateSegmentTextRequest`), which identifies the segment by its `id` and
+ * rewrites just that segment's text. The response is a bare `{status}`, so
+ * callers must optimistically patch their local `transcript_segments`.
+ *
+ * @param conversationId - The conversation ID
+ * @param segmentId - The `id` of the segment to edit (non-empty)
+ * @param text - New segment text (1–10000 chars, enforced by the backend)
+ * @throws SegmentEditPlanRequiredError when the account is plan-gated (402)
+ */
+export async function updateSegmentText(
+  conversationId: string,
+  segmentId: string,
+  text: string,
+): Promise<void> {
+  try {
+    await fetchWithAuth(`/v1/conversations/${conversationId}/segments/text`, {
+      method: 'PATCH',
+      body: JSON.stringify({ segment_id: segmentId, text }),
+    });
+  } catch (error) {
+    // fetchWithAuth surfaces the status in the thrown message (`API error: 402 ...`).
+    if (error instanceof Error && error.message.includes('402')) {
+      throw new SegmentEditPlanRequiredError();
+    }
+    throw error;
+  }
+}
+
+/**
+ * Reprocess a conversation (rebuild summary/search after transcript edits)
+ */
+export async function reprocessConversation(
+  conversationId: string,
+  appId?: string,
+): Promise<Conversation> {
+  const queryParams = new URLSearchParams();
+  if (appId) {
+    queryParams.set('app_id', appId);
+  }
+
+  const endpoint = `/v1/conversations/${conversationId}/reprocess${queryParams.toString() ? `?${queryParams}` : ''}`;
+  return fetchWithAuth<Conversation>(endpoint, {
+    method: 'POST',
+  });
+}
+
+/**
+ * Update a conversation's title
+ * @param conversationId - The ID of the conversation
+ * @param title - The new title
+ */
+export async function updateConversationTitle(
+  conversationId: string,
+  title: string,
+): Promise<void> {
+  await fetchWithAuth(
+    `/v1/conversations/${conversationId}/title?title=${encodeURIComponent(title)}`,
+    {
+      method: 'PATCH',
+    },
+  );
+}
+
+/**
+ * Test a custom prompt against a conversation
+ * @param conversationId - The ID of the conversation
+ * @param prompt - The custom prompt to test
+ * @returns The generated summary
+ */
+export async function testConversationPrompt(
+  conversationId: string,
+  prompt: string,
+): Promise<string> {
+  const response = await fetchWithAuth<{ summary: string }>(
+    `/v1/conversations/${conversationId}/test-prompt`,
+    {
+      method: 'POST',
+      body: JSON.stringify({ prompt }),
+    },
+  );
+  return response.summary;
+}
+
+// =============================================================================
+// Audio API
+// =============================================================================
+
+/**
+ * Get the streaming URL for an audio file
+ * @param conversationId - The conversation ID
+ * @param audioFileId - The audio file ID
+ * @param format - Audio format (default: wav)
+ */
+export function getAudioStreamUrl(
+  conversationId: string,
+  audioFileId: string,
+  format: string = 'wav',
+): string {
+  return `${API_BASE_URL}/v1/sync/audio/${conversationId}/${audioFileId}?format=${format}`;
+}
+
+/**
+ * Get signed URLs for conversation audio files
+ * Returns direct GCS URLs for cached files or status for pending files
+ * @param conversationId - The conversation ID
+ */
+export async function getConversationAudioUrls(
+  conversationId: string,
+  signal?: AbortSignal,
+): Promise<AudioFileUrlInfo[]> {
+  try {
+    const response = await fetchWithAuth<{ audio_files: AudioFileUrlInfo[] }>(
+      `/v1/sync/audio/${conversationId}/urls`,
+      { signal },
+    );
+    return response.audio_files || [];
+  } catch (error) {
+    if (error instanceof Error && error.name === 'AbortError') {
+      return []; // Silently return empty for aborted requests
+    }
+    console.error('Error fetching audio URLs:', error);
+    return [];
+  }
+}
+
+/**
+ * Get signed URLs plus the server's poll hint (poll_after_ms) while
+ * playback artifacts are still being built.
+ * @param conversationId - The conversation ID
+ */
+export async function getConversationAudioUrlsWithPoll(
+  conversationId: string,
+  signal?: AbortSignal,
+): Promise<{ files: AudioFileUrlInfo[]; pollAfterMs: number | null }> {
+  try {
+    const response = await fetchWithAuth<{
+      audio_files: AudioFileUrlInfo[];
+      poll_after_ms?: number | null;
+    }>(`/v1/sync/audio/${conversationId}/urls`, { signal });
+    return {
+      files: response.audio_files || [],
+      pollAfterMs: response.poll_after_ms ?? null,
+    };
+  } catch (error) {
+    if (error instanceof Error && error.name === 'AbortError') {
+      return { files: [], pollAfterMs: null };
+    }
+    console.error('Error fetching audio URLs:', error);
+    return { files: [], pollAfterMs: null };
+  }
+}
+
+/**
+ * Pre-cache audio files for a conversation
+ * Triggers background caching of audio files for faster playback
+ * @param conversationId - The conversation ID
+ */
+export async function precacheConversationAudio(
+  conversationId: string,
+  signal?: AbortSignal,
+): Promise<void> {
+  try {
+    await fetchWithAuth(`/v1/sync/audio/${conversationId}/precache`, {
+      method: 'POST',
+      signal,
+    });
+  } catch (error) {
+    if (error instanceof Error && error.name === 'AbortError') {
+      return; // Silently return for aborted requests
+    }
+    console.error('Error pre-caching audio:', error);
+  }
+}
+
+export { getAudioAuthHeaders } from '@/shared/api/client';
+
+/**
+ * Fetch audio file and return a Blob URL for playback
+ * This works around the HTML <audio> element's inability to send custom headers
+ * @param conversationId - The conversation ID
+ * @param audioFileId - The audio file ID
+ * @returns Blob URL that can be used as audio src
+ */
+export async function fetchAudioBlob(
+  conversationId: string,
+  audioFileId: string,
+): Promise<string> {
+  const headers = await getAudioAuthHeaders();
+  const url = getAudioStreamUrl(conversationId, audioFileId);
+
+  const response = await fetch(url, { headers });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch audio: ${response.status} ${response.statusText}`);
+  }
+
+  const blob = await response.blob();
+  return URL.createObjectURL(blob);
+}
+
+/**
+ * Map backend folder to frontend format (icon -> emoji)
+ */
+function mapFolderResponse(folder: Folder): Folder {
+  return {
+    ...folder,
+    emoji: folder.icon || folder.emoji, // Map icon to emoji for display
+  };
+}
+
+/**
+ * Get all folders for the current user
+ */
+export async function getFolders(): Promise<Folder[]> {
+  try {
+    const folders = await fetchWithAuth<Folder[]>('/v1/folders');
+    return folders.map(mapFolderResponse);
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Create a new folder
+ */
+export async function createFolder(data: CreateFolderRequest): Promise<Folder> {
+  const folder = await fetchWithAuth<Folder>('/v1/folders', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+  invalidateCache(invalidationPatterns.folders);
+  return mapFolderResponse(folder);
+}
+
+/**
+ * Update an existing folder
+ */
+export async function updateFolder(
+  folderId: string,
+  data: UpdateFolderRequest,
+): Promise<Folder> {
+  const folder = await fetchWithAuth<Folder>(`/v1/folders/${folderId}`, {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  });
+  invalidateCache(invalidationPatterns.folders);
+  return mapFolderResponse(folder);
+}
+
+/**
+ * Delete a folder
+ * Conversations in the folder are moved back to "All"
+ */
+export async function deleteFolder(folderId: string): Promise<void> {
+  await fetchWithAuth(`/v1/folders/${folderId}`, {
+    method: 'DELETE',
+  });
+  invalidateCache(invalidationPatterns.folders);
+  invalidateCache(invalidationPatterns.conversations); // Conversations move back to "All"
+}
+
+/**
+ * Bulk move multiple conversations to a folder
+ * @param folderId - The target folder ID
+ * @param conversationIds - Array of conversation IDs to move
+ */
+export async function bulkMoveConversationsToFolder(
+  folderId: string,
+  conversationIds: string[],
+): Promise<void> {
+  await fetchWithAuth(`/v1/folders/${folderId}/conversations/bulk-move`, {
+    method: 'POST',
+    body: JSON.stringify({ conversation_ids: conversationIds }),
+  });
+}
diff --git a/web/app/src/features/conversations/index.ts b/web/app/src/features/conversations/index.ts
new file mode 100644
index 00000000000..d24a92d44b7
--- /dev/null
+++ b/web/app/src/features/conversations/index.ts
@@ -0,0 +1,11 @@
+export { ConversationSplitView } from './ui/ConversationSplitView';
+export { ConversationGallerySkeleton } from './ui/ConversationGallery';
+export { FolderTabsSkeleton } from './ui/FolderTabs';
+export { RecapDetailPanel } from './recaps/RecapDetailPanel';
+export {
+  buildTimelineDayGroups,
+  countTimelineItems,
+  conversationSignals,
+  type TimelineDayGroup,
+} from './model';
+export * from './api';
diff --git a/web/app/src/lib/conversationTimeline.ts b/web/app/src/features/conversations/model.ts
similarity index 72%
rename from web/app/src/lib/conversationTimeline.ts
rename to web/app/src/features/conversations/model.ts
index 2d6fd07cdb5..aac0c634a1b 100644
--- a/web/app/src/lib/conversationTimeline.ts
+++ b/web/app/src/features/conversations/model.ts
@@ -1,5 +1,5 @@
 import type { Conversation } from '@/types/conversation';
-import type { DailySummary } from '@/types/recap';
+import type { DailySummary, GroupedDailySummaries } from '@/types/recap';
 
 /**
  * A single tile in the Timeline gallery. Conversations and daily recaps share
@@ -177,3 +177,72 @@ export function countTimelineItems(groups: TimelineDayGroup[]): number {
 export function flattenTimelineItems(groups: TimelineDayGroup[]): TimelineItem[] {
   return groups.flatMap((group) => group.items);
 }
+
+export const MIN_CONVERSATION_DETAIL_WIDTH = 360;
+export const MIN_CONVERSATION_GALLERY_WIDTH = 280;
+
+export function resizeConversationDetailPanel(
+  currentWidth: number,
+  pointerDelta: number,
+  containerWidth: number,
+): number {
+  const maximum = Math.max(
+    MIN_CONVERSATION_DETAIL_WIDTH,
+    containerWidth - MIN_CONVERSATION_GALLERY_WIDTH,
+  );
+  return Math.min(
+    maximum,
+    Math.max(MIN_CONVERSATION_DETAIL_WIDTH, currentWidth - pointerDelta),
+  );
+}
+
+export type ConversationSelection =
+  | { kind: 'conversation'; id: string }
+  | { kind: 'recap'; id: string }
+  | null;
+
+export function selectionFromSearchParams(
+  conversationId: string | null,
+  recapId: string | null,
+): ConversationSelection {
+  if (recapId) return { kind: 'recap', id: recapId };
+  if (conversationId) return { kind: 'conversation', id: conversationId };
+  return null;
+}
+
+export function formatConversationDate(dateString: string | null): string {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+export function conversationDurationSeconds(start: string | null, end: string | null): number {
+  if (!start || !end) return 0;
+  const startDate = new Date(start);
+  const endDate = new Date(end);
+  return Math.floor((endDate.getTime() - startDate.getTime()) / 1000);
+}
+
+/** Group recaps by calendar month (e.g. "January 2025") for the recap list. */
+export function groupRecapsByMonth(recaps: DailySummary[]): GroupedDailySummaries {
+  if (!Array.isArray(recaps) || recaps.length === 0) {
+    return {};
+  }
+  return recaps.reduce((groups, recap) => {
+    const date = parseLocalDay(recap.date);
+    const monthKey = date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+    });
+    if (!groups[monthKey]) {
+      groups[monthKey] = [];
+    }
+    groups[monthKey].push(recap);
+    return groups;
+  }, {} as GroupedDailySummaries);
+}
diff --git a/web/app/src/components/recaps/ConversationPreviewPanel.tsx b/web/app/src/features/conversations/recaps/ConversationPreviewPanel.tsx
similarity index 99%
rename from web/app/src/components/recaps/ConversationPreviewPanel.tsx
rename to web/app/src/features/conversations/recaps/ConversationPreviewPanel.tsx
index 98c797cab49..cecf84c920e 100644
--- a/web/app/src/components/recaps/ConversationPreviewPanel.tsx
+++ b/web/app/src/features/conversations/recaps/ConversationPreviewPanel.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, Clock, Calendar, MessageSquare, ExternalLink } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { getConversation } from '@/lib/api';
+import { getConversation } from '@/features/conversations/api';
 import type { Conversation } from '@/types/conversation';
 
 interface ConversationPreviewPanelProps {
diff --git a/web/app/src/components/recaps/RecapDetailPanel.tsx b/web/app/src/features/conversations/recaps/RecapDetailPanel.tsx
similarity index 99%
rename from web/app/src/components/recaps/RecapDetailPanel.tsx
rename to web/app/src/features/conversations/recaps/RecapDetailPanel.tsx
index 364c0305138..d30efe21c25 100644
--- a/web/app/src/components/recaps/RecapDetailPanel.tsx
+++ b/web/app/src/features/conversations/recaps/RecapDetailPanel.tsx
@@ -26,7 +26,7 @@ const LocationMap = dynamic(() => import('./sections/LocationMap'), {
   ),
 });
 import { cn } from '@/lib/utils';
-import { getDailySummary, getConversation } from '@/lib/api';
+import { getDailySummary, getConversation } from '@/features/conversations/api';
 import type { DailySummary, LocationPin } from '@/types/recap';
 import { HighlightsSection } from './sections/HighlightsSection';
 import { TasksSection } from './sections/TasksSection';
diff --git a/web/app/src/components/recaps/sections/HighlightsSection.tsx b/web/app/src/features/conversations/recaps/sections/HighlightsSection.tsx
similarity index 100%
rename from web/app/src/components/recaps/sections/HighlightsSection.tsx
rename to web/app/src/features/conversations/recaps/sections/HighlightsSection.tsx
diff --git a/web/app/src/components/recaps/sections/InsightsSection.tsx b/web/app/src/features/conversations/recaps/sections/InsightsSection.tsx
similarity index 100%
rename from web/app/src/components/recaps/sections/InsightsSection.tsx
rename to web/app/src/features/conversations/recaps/sections/InsightsSection.tsx
diff --git a/web/app/src/components/recaps/sections/LocationMap.tsx b/web/app/src/features/conversations/recaps/sections/LocationMap.tsx
similarity index 99%
rename from web/app/src/components/recaps/sections/LocationMap.tsx
rename to web/app/src/features/conversations/recaps/sections/LocationMap.tsx
index 3245a87921e..75e7e75236b 100644
--- a/web/app/src/components/recaps/sections/LocationMap.tsx
+++ b/web/app/src/features/conversations/recaps/sections/LocationMap.tsx
@@ -14,7 +14,7 @@ import L from 'leaflet';
 import { MessageSquare, Play, Pause, RotateCcw } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import type { LocationPin } from '@/types/recap';
-import { getConversation } from '@/lib/api';
+import { getConversation } from '@/features/conversations/api';
 
 // Conversation info cache type
 interface ConversationInfo {
diff --git a/web/app/src/components/recaps/sections/LocationsSection.tsx b/web/app/src/features/conversations/recaps/sections/LocationsSection.tsx
similarity index 100%
rename from web/app/src/components/recaps/sections/LocationsSection.tsx
rename to web/app/src/features/conversations/recaps/sections/LocationsSection.tsx
diff --git a/web/app/src/components/recaps/sections/TasksSection.tsx b/web/app/src/features/conversations/recaps/sections/TasksSection.tsx
similarity index 100%
rename from web/app/src/components/recaps/sections/TasksSection.tsx
rename to web/app/src/features/conversations/recaps/sections/TasksSection.tsx
diff --git a/web/app/src/features/conversations/ui/ActionItemsTab.tsx b/web/app/src/features/conversations/ui/ActionItemsTab.tsx
new file mode 100644
index 00000000000..ce5d0b9fecf
--- /dev/null
+++ b/web/app/src/features/conversations/ui/ActionItemsTab.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import type { StructuredActionItem } from '@/types/conversation';
+
+/**
+ * Action item component
+ */
+function ActionItemRow({ item }: { item: StructuredActionItem }) {
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-4 rounded-xl',
+        'bg-bg-tertiary border border-bg-quaternary/50',
+        item.completed && 'opacity-60',
+      )}
+    >
+      <div
+        className={cn(
+          'w-5 h-5 rounded-md border-2 flex-shrink-0 mt-0.5',
+          'flex items-center justify-center',
+          item.completed ? 'bg-success border-success' : 'border-text-quaternary',
+        )}
+      >
+        {item.completed && (
+          <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fillRule="evenodd"
+              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        )}
+      </div>
+      <div className="flex-1">
+        <span
+          className={cn(
+            'text-text-primary',
+            item.completed && 'line-through text-text-tertiary',
+          )}
+        >
+          {item.description}
+        </span>
+        {item.due_at && (
+          <p className="text-xs text-text-quaternary mt-1">
+            Due: {new Date(item.due_at).toLocaleDateString()}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Action items tab content
+ */
+export function ActionItemsTab({ items }: { items: StructuredActionItem[] }) {
+  const completedCount = items.filter((i) => i.completed).length;
+
+  return (
+    <div className="space-y-4">
+      {/* Progress indicator */}
+      <div className="flex items-center gap-3 p-3 rounded-lg bg-bg-tertiary/50">
+        <div className="flex-1">
+          <div className="h-2 bg-bg-quaternary rounded-full overflow-hidden">
+            <div
+              className="h-full bg-success transition-all duration-300"
+              style={{ width: `${(completedCount / items.length) * 100}%` }}
+            />
+          </div>
+        </div>
+        <span className="text-sm text-text-tertiary">
+          {completedCount}/{items.length} completed
+        </span>
+      </div>
+
+      {/* Action items list */}
+      <div className="space-y-3">
+        {items.map((item, index) => (
+          <ActionItemRow key={index} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/web/app/src/components/conversations/AppSummaryCard.tsx b/web/app/src/features/conversations/ui/AppSummaryCard.tsx
similarity index 99%
rename from web/app/src/components/conversations/AppSummaryCard.tsx
rename to web/app/src/features/conversations/ui/AppSummaryCard.tsx
index f65d0910dcc..7d5ea4651d0 100644
--- a/web/app/src/components/conversations/AppSummaryCard.tsx
+++ b/web/app/src/features/conversations/ui/AppSummaryCard.tsx
@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 import { Sparkles } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import { cn } from '@/lib/utils';
-import { getApp } from '@/lib/api';
+import { getApp } from '@/features/connectors';
 import type { AppResponse } from '@/types/conversation';
 import type { App } from '@/types/apps';
 
diff --git a/web/app/src/components/conversations/AudioPlayer.tsx b/web/app/src/features/conversations/ui/AudioPlayer.tsx
similarity index 99%
rename from web/app/src/components/conversations/AudioPlayer.tsx
rename to web/app/src/features/conversations/ui/AudioPlayer.tsx
index 561244334c6..381bc05e815 100644
--- a/web/app/src/components/conversations/AudioPlayer.tsx
+++ b/web/app/src/features/conversations/ui/AudioPlayer.tsx
@@ -10,7 +10,7 @@ import {
 } from 'react';
 import { Play, Pause, Volume2, VolumeX, Loader2, Download } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { getConversationAudioUrlsWithPoll } from '@/lib/api';
+import { getConversationAudioUrlsWithPoll } from '@/features/conversations/api';
 import type { AudioFileUrlInfo } from '@/types/conversation';
 
 interface AudioPlayerProps {
diff --git a/web/app/src/components/conversations/ConversationActionsMenu.tsx b/web/app/src/features/conversations/ui/ConversationActionsMenu.tsx
similarity index 99%
rename from web/app/src/components/conversations/ConversationActionsMenu.tsx
rename to web/app/src/features/conversations/ui/ConversationActionsMenu.tsx
index a6c341abb44..e71fa084190 100644
--- a/web/app/src/components/conversations/ConversationActionsMenu.tsx
+++ b/web/app/src/features/conversations/ui/ConversationActionsMenu.tsx
@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { MoreVertical, Copy, FileText, RefreshCw, Trash2, Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { deleteConversation, reprocessConversation } from '@/lib/api';
+import { deleteConversation, reprocessConversation } from '@/features/conversations/api';
 import type { Conversation, TranscriptSegment } from '@/types/conversation';
 import type { Person } from '@/types/user';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
diff --git a/web/app/src/components/conversations/ConversationDetailPanel.tsx b/web/app/src/features/conversations/ui/ConversationDetailPanel.tsx
similarity index 73%
rename from web/app/src/components/conversations/ConversationDetailPanel.tsx
rename to web/app/src/features/conversations/ui/ConversationDetailPanel.tsx
index 60d4ac69b88..fd112f7d5fd 100644
--- a/web/app/src/components/conversations/ConversationDetailPanel.tsx
+++ b/web/app/src/features/conversations/ui/ConversationDetailPanel.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { useRouter } from '@tschk/moonshine-next/navigation';
-import dynamic from '@tschk/moonshine-next/dynamic';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
   ArrowLeft,
@@ -12,28 +11,25 @@ import {
   CheckSquare,
   MessageSquare,
   FileText,
-  MapPin,
   Sparkles,
   Volume2,
-  ChevronDown,
-  ChevronUp,
   RefreshCw,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { formatTime, formatDuration } from '@/lib/utils';
 import { TranscriptView } from './TranscriptView';
-import { AppSummaryCard } from './AppSummaryCard';
-import { GenerateSummaryButton } from './GenerateSummaryButton';
 import { ConversationActionsMenu } from './ConversationActionsMenu';
 import { EditableTitle } from './EditableTitle';
 import { SpeakerTagSheet } from './SpeakerTagSheet';
 import { ManagePeopleModal } from './ManagePeopleModal';
 import { AudioPlayer, AudioPlayerRef } from './AudioPlayer';
+import { SummaryTab } from './SummaryTab';
+import { ActionItemsTab } from './ActionItemsTab';
+import { DetailSkeleton } from './DetailSkeleton';
 import { ConversationScreenFrameBanner } from './ConversationScreenFrameBanner';
 import { ConversationScreenFrameCarousel } from './ConversationScreenFrameCarousel';
 import { ScreenFrameLightbox } from './ScreenFrameLightbox';
-import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
-import { usePeople } from '@/hooks/usePeople';
+import { ConfirmDialog } from '@/shared/ui/ConfirmDialog';
 import { useScreenFrames } from '@/hooks/useScreenFrames';
 import {
   BANNER_LIGHTBOX_INDEX,
@@ -41,32 +37,21 @@ import {
   resolveIndexAfterRemoval,
   stripFrameLightboxIndex,
 } from '@/lib/screenFrames';
+import { formatConversationDate, conversationDurationSeconds } from '../model';
+import { usePeople } from '../usePeople';
 import {
   precacheConversationAudio,
   getConversationAudioUrls,
   updateSegmentText,
   reprocessConversation,
-} from '@/lib/api';
+} from '../api';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 import type {
   Conversation,
-  AppResponse,
   TranscriptSegment,
   AudioFileUrlInfo,
-  Geolocation,
-  StructuredActionItem,
 } from '@/types/conversation';
 
-// Dynamic import for Leaflet map (SSR not supported)
-const SingleLocationMap = dynamic(() => import('@/components/ui/SingleLocationMap'), {
-  ssr: false,
-  loading: () => (
-    <div className="h-full bg-bg-tertiary animate-pulse flex items-center justify-center rounded-r-xl">
-      <MapPin className="w-8 h-8 text-text-quaternary" />
-    </div>
-  ),
-});
-
 interface ConversationDetailPanelProps {
   conversationId: string;
   conversation: Conversation | null;
@@ -91,327 +76,6 @@ interface Tab {
   disabled?: boolean;
 }
 
-/**
- * Format date for display
- */
-function formatDate(dateString: string | null): string {
-  if (!dateString) return '';
-  const date = new Date(dateString);
-  return date.toLocaleDateString('en-US', {
-    weekday: 'long',
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
-}
-
-/**
- * Calculate duration between two timestamps
- */
-function calculateDuration(start: string | null, end: string | null): number {
-  if (!start || !end) return 0;
-  const startDate = new Date(start);
-  const endDate = new Date(end);
-  return Math.floor((endDate.getTime() - startDate.getTime()) / 1000);
-}
-
-/**
- * Action item component
- */
-function ActionItemRow({ item }: { item: StructuredActionItem }) {
-  return (
-    <div
-      className={cn(
-        'flex items-start gap-3 p-4 rounded-xl',
-        'bg-bg-tertiary border border-bg-quaternary/50',
-        item.completed && 'opacity-60',
-      )}
-    >
-      <div
-        className={cn(
-          'w-5 h-5 rounded-md border-2 flex-shrink-0 mt-0.5',
-          'flex items-center justify-center',
-          item.completed ? 'bg-success border-success' : 'border-text-quaternary',
-        )}
-      >
-        {item.completed && (
-          <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
-            <path
-              fillRule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clipRule="evenodd"
-            />
-          </svg>
-        )}
-      </div>
-      <div className="flex-1">
-        <span
-          className={cn(
-            'text-text-primary',
-            item.completed && 'line-through text-text-tertiary',
-          )}
-        >
-          {item.description}
-        </span>
-        {item.due_at && (
-          <p className="text-xs text-text-quaternary mt-1">
-            Due: {new Date(item.due_at).toLocaleDateString()}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Summary tab content with app summaries and optional location map
- */
-interface SummaryTabProps {
-  overview: string;
-  category?: string;
-  conversationId: string;
-  appResults: AppResponse[];
-  suggestedAppIds: string[];
-  onGenerateComplete?: (conversation: Conversation) => void;
-  geolocation?: Geolocation | null;
-}
-
-function SummaryTab({
-  overview,
-  category,
-  conversationId,
-  appResults,
-  suggestedAppIds,
-  onGenerateComplete,
-  geolocation,
-}: SummaryTabProps) {
-  const hasAppSummaries = appResults && appResults.length > 0;
-  const hasLocation = geolocation && geolocation.latitude && geolocation.longitude;
-
-  // State for expandable text
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [needsTruncation, setNeedsTruncation] = useState(false);
-  const [mapHeight, setMapHeight] = useState(0);
-  const textRef = useRef<HTMLDivElement>(null);
-  const mapRef = useRef<HTMLDivElement>(null);
-
-  // Check if text overflows the map height
-  useEffect(() => {
-    const checkOverflow = () => {
-      if (textRef.current && mapRef.current && hasLocation) {
-        const actualMapHeight = mapRef.current.clientHeight;
-        setMapHeight(actualMapHeight);
-        // Only truncate if text is taller than the map (minus some padding for the button)
-        setNeedsTruncation(textRef.current.scrollHeight > actualMapHeight - 40);
-      }
-    };
-
-    // Small delay to ensure map has rendered
-    const timer = setTimeout(checkOverflow, 100);
-    window.addEventListener('resize', checkOverflow);
-    return () => {
-      clearTimeout(timer);
-      window.removeEventListener('resize', checkOverflow);
-    };
-  }, [overview, hasLocation]);
-
-  return (
-    <div className="space-y-6">
-      {/* Summary Section with optional Map */}
-      {hasLocation ? (
-        <div className="noise-overlay rounded-xl overflow-hidden border border-white/[0.04]">
-          <div className="grid grid-cols-1 md:grid-cols-2 md:items-start min-h-[280px]">
-            {/* Left: Overview content */}
-            <div className="p-5 pt-4 relative">
-              <div
-                ref={textRef}
-                className={cn(
-                  'transition-all duration-300',
-                  !isExpanded && needsTruncation && 'overflow-hidden',
-                )}
-                style={
-                  !isExpanded && needsTruncation && mapHeight > 0
-                    ? { maxHeight: mapHeight - 56 }
-                    : undefined
-                }
-              >
-                {category && (
-                  <div className="mb-3">
-                    <span className="inline-flex px-3 py-1 rounded-full text-xs font-medium bg-white/[0.08] text-text-primary capitalize">
-                      {category}
-                    </span>
-                  </div>
-                )}
-                <p className="text-text-secondary leading-relaxed text-lg">{overview}</p>
-                {geolocation.address && (
-                  <div className="mt-4 flex items-start gap-2 text-sm text-text-tertiary">
-                    <MapPin className="w-4 h-4 flex-shrink-0 mt-0.5" />
-                    <span>{geolocation.address}</span>
-                  </div>
-                )}
-              </div>
-
-              {/* Gradient fade and Show more button */}
-              {needsTruncation && (
-                <div
-                  className={cn(
-                    'mt-2',
-                    !isExpanded &&
-                      'absolute bottom-0 left-0 right-0 pt-12 pb-4 px-5 bg-gradient-to-t from-bg-secondary via-bg-secondary/90 to-transparent',
-                  )}
-                >
-                  <button
-                    onClick={() => setIsExpanded(!isExpanded)}
-                    className="flex items-center gap-1 text-sm text-text-primary hover:text-text-secondary transition-colors"
-                  >
-                    {isExpanded ? (
-                      <>
-                        <ChevronUp className="w-4 h-4" />
-                        <span>Show less</span>
-                      </>
-                    ) : (
-                      <>
-                        <ChevronDown className="w-4 h-4" />
-                        <span>Show more</span>
-                      </>
-                    )}
-                  </button>
-                </div>
-              )}
-            </div>
-            {/* Right: Map */}
-            <div ref={mapRef} className="relative overflow-hidden aspect-video">
-              <SingleLocationMap
-                latitude={geolocation.latitude}
-                longitude={geolocation.longitude}
-                address={geolocation.address}
-                height="100%"
-              />
-            </div>
-          </div>
-        </div>
-      ) : (
-        /* Full-width overview when no location */
-        <div>
-          {category && (
-            <div className="mb-3">
-              <span className="inline-flex px-3 py-1 rounded-full text-xs font-medium bg-white/[0.08] text-text-primary capitalize">
-                {category}
-              </span>
-            </div>
-          )}
-          <p className="text-text-secondary leading-relaxed text-lg">{overview}</p>
-        </div>
-      )}
-
-      {/* App Summaries Section */}
-      <div className="pt-4 border-t border-bg-tertiary">
-        {/* Section Header with Generate Button */}
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2">
-            <Sparkles className="w-4 h-4 text-text-primary" />
-            <h3 className="text-sm font-medium text-text-primary">Summary Templates</h3>
-          </div>
-          <GenerateSummaryButton
-            conversationId={conversationId}
-            suggestedAppIds={suggestedAppIds}
-            existingAppResults={appResults}
-            onGenerateComplete={onGenerateComplete}
-          />
-        </div>
-
-        {/* App Summary Cards */}
-        {hasAppSummaries && (
-          <div className="space-y-3">
-            {appResults.map((appResponse, index) => (
-              <AppSummaryCard
-                key={`${appResponse.app_id}-${index}`}
-                appResponse={appResponse}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* Empty state for templates */}
-        {!hasAppSummaries && (
-          <p className="text-sm text-text-tertiary mt-2">
-            No summaries yet. Click Templates above to generate one or create a custom
-            template.
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Action items tab content
- */
-function ActionItemsTab({ items }: { items: StructuredActionItem[] }) {
-  const completedCount = items.filter((i) => i.completed).length;
-
-  return (
-    <div className="space-y-4">
-      {/* Progress indicator */}
-      <div className="flex items-center gap-3 p-3 rounded-lg bg-bg-tertiary/50">
-        <div className="flex-1">
-          <div className="h-2 bg-bg-quaternary rounded-full overflow-hidden">
-            <div
-              className="h-full bg-success transition-all duration-300"
-              style={{ width: `${(completedCount / items.length) * 100}%` }}
-            />
-          </div>
-        </div>
-        <span className="text-sm text-text-tertiary">
-          {completedCount}/{items.length} completed
-        </span>
-      </div>
-
-      {/* Action items list */}
-      <div className="space-y-3">
-        {items.map((item, index) => (
-          <ActionItemRow key={index} item={item} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Loading skeleton
- */
-function DetailSkeleton() {
-  return (
-    <div className="p-6 animate-pulse">
-      {/* Header */}
-      <div className="flex items-start gap-4 mb-6">
-        <div className="w-14 h-14 rounded-2xl bg-bg-tertiary" />
-        <div className="flex-1">
-          <div className="h-6 w-3/4 bg-bg-tertiary rounded mb-2" />
-          <div className="flex gap-3">
-            <div className="h-4 w-24 bg-bg-tertiary rounded" />
-            <div className="h-4 w-20 bg-bg-tertiary rounded" />
-          </div>
-        </div>
-      </div>
-
-      {/* Tabs */}
-      <div className="flex gap-2 mb-6">
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="h-10 w-24 bg-bg-tertiary rounded-lg" />
-        ))}
-      </div>
-
-      {/* Content */}
-      <div className="space-y-3">
-        <div className="h-4 w-full bg-bg-tertiary rounded" />
-        <div className="h-4 w-5/6 bg-bg-tertiary rounded" />
-        <div className="h-4 w-4/6 bg-bg-tertiary rounded" />
-      </div>
-    </div>
-  );
-}
-
 export function ConversationDetailPanel({
   conversationId,
   conversation,
@@ -818,7 +482,7 @@ export function ConversationDetailPanel({
   }
 
   const { structured, transcript_segments, geolocation } = conversation;
-  const duration = calculateDuration(conversation.started_at, conversation.finished_at);
+  const duration = conversationDurationSeconds(conversation.started_at, conversation.finished_at);
   const actionItems = structured.action_items || [];
   const hasActionItems = actionItems.length > 0;
   const hasTranscript = transcript_segments && transcript_segments.length > 0;
@@ -894,7 +558,7 @@ export function ConversationDetailPanel({
               {conversation.started_at && (
                 <div className="flex items-center gap-1.5">
                   <Calendar className="w-4 h-4" />
-                  <span>{formatDate(conversation.started_at)}</span>
+                  <span>{formatConversationDate(conversation.started_at)}</span>
                 </div>
               )}
               {conversation.started_at && (
@@ -937,7 +601,9 @@ export function ConversationDetailPanel({
             frame={screenFrames.frameSet.banner}
             title={structured.title || 'Untitled Conversation'}
             dateLabel={
-              conversation.started_at ? formatDate(conversation.started_at) : undefined
+              conversation.started_at
+                ? formatConversationDate(conversation.started_at)
+                : undefined
             }
             onClick={openScreenFrameLightboxForBanner}
           />
diff --git a/web/app/src/components/conversations/ConversationGallery.tsx b/web/app/src/features/conversations/ui/ConversationGallery.tsx
similarity index 98%
rename from web/app/src/components/conversations/ConversationGallery.tsx
rename to web/app/src/features/conversations/ui/ConversationGallery.tsx
index 725fefef8d9..48de528433d 100644
--- a/web/app/src/components/conversations/ConversationGallery.tsx
+++ b/web/app/src/features/conversations/ui/ConversationGallery.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef } from 'react';
 import { Loader2 } from 'lucide-react';
-import type { TimelineDayGroup } from '@/lib/conversationTimeline';
+import type { TimelineDayGroup } from '../model';
 import type { Conversation } from '@/types/conversation';
 import type { DailySummary } from '@/types/recap';
 import { ConversationTile, ConversationTileSkeleton } from './ConversationTile';
diff --git a/web/app/src/components/conversations/ConversationScreenFrameBanner.tsx b/web/app/src/features/conversations/ui/ConversationScreenFrameBanner.tsx
similarity index 100%
rename from web/app/src/components/conversations/ConversationScreenFrameBanner.tsx
rename to web/app/src/features/conversations/ui/ConversationScreenFrameBanner.tsx
diff --git a/web/app/src/components/conversations/ConversationScreenFrameCarousel.tsx b/web/app/src/features/conversations/ui/ConversationScreenFrameCarousel.tsx
similarity index 100%
rename from web/app/src/components/conversations/ConversationScreenFrameCarousel.tsx
rename to web/app/src/features/conversations/ui/ConversationScreenFrameCarousel.tsx
diff --git a/web/app/src/components/conversations/ConversationSplitView.tsx b/web/app/src/features/conversations/ui/ConversationSplitView.tsx
similarity index 94%
rename from web/app/src/components/conversations/ConversationSplitView.tsx
rename to web/app/src/features/conversations/ui/ConversationSplitView.tsx
index 71e343a7846..09c10e640b8 100644
--- a/web/app/src/components/conversations/ConversationSplitView.tsx
+++ b/web/app/src/features/conversations/ui/ConversationSplitView.tsx
@@ -5,58 +5,44 @@ import { useSearchParams } from '@tschk/moonshine-next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
 import { CalendarDays, CheckSquare, Search as SearchIcon, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useConversations } from '@/hooks/useConversations';
-import { useConversation } from '@/hooks/useConversation';
-import { useRecaps } from '@/hooks/useRecaps';
-import { useSearchConversations } from '@/hooks/useSearchConversations';
+import { useConversations } from '../useConversations';
+import { useConversation } from '../useConversation';
+import { useRecaps } from '../useRecaps';
+import { useSearchConversations } from '../useSearchConversations';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { useChat } from '@/components/chat/ChatContext';
-import { useAuth } from '@/components/auth/AuthProvider';
-import { ConversationDetailPanel } from '@/components/conversations/ConversationDetailPanel';
-import { DateFilter } from '@/components/conversations/DateFilter';
-import { MergeActionBar } from '@/components/conversations/MergeActionBar';
-import { MergeConfirmationDialog } from '@/components/conversations/MergeConfirmationDialog';
-import { DeleteConversationsDialog } from '@/components/conversations/DeleteConversationsDialog';
+import { useChat } from '@/features/chat';
+import { useAuth } from '@/features/auth';
+import { ConversationDetailPanel } from './ConversationDetailPanel';
+import { DateFilter } from './DateFilter';
+import { MergeActionBar } from './MergeActionBar';
+import { MergeConfirmationDialog } from './MergeConfirmationDialog';
+import { DeleteConversationsDialog } from './DeleteConversationsDialog';
 import {
   FolderTabs,
   FolderTabsSkeleton,
   FOLDER_ALL,
   FOLDER_STARRED,
-} from '@/components/conversations/FolderTabs';
+} from './FolderTabs';
 import {
   FolderDialog,
   DeleteFolderDialog,
-} from '@/components/conversations/FolderDialog';
-import { MoveFolderDialog } from '@/components/conversations/MoveFolderDialog';
-import { RecapDetailPanel } from '@/components/recaps/RecapDetailPanel';
+} from './FolderDialog';
+import { MoveFolderDialog } from './MoveFolderDialog';
+import { RecapDetailPanel } from '../recaps/RecapDetailPanel';
 import { ConversationGallery, ConversationGallerySkeleton } from './ConversationGallery';
-import { ResizeHandle } from '@/components/ui/ResizeHandle';
+import { ResizeHandle } from '@/shared/ui/ResizeHandle';
 import { PageToolbar } from '@/components/layout/PageToolbar';
-import { useToast } from '@/components/ui/Toast';
-import {
-  mergeConversations,
-  getFolders,
-  createFolder,
-  updateFolder,
-  deleteFolder,
-  bulkMoveConversationsToFolder,
-  toggleStarred,
-  deleteConversation,
-} from '@/lib/api';
+import { useToast } from '@/shared/ui/Toast';
+import { mergeConversations, getFolders, createFolder, updateFolder, deleteFolder, bulkMoveConversationsToFolder, toggleStarred, deleteConversation } from '../api';
 import type { Conversation } from '@/types/conversation';
 import type { DailySummary } from '@/types/recap';
 import type { Folder, CreateFolderRequest, UpdateFolderRequest } from '@/types/folder';
-import { buildTimelineDayGroups, countTimelineItems } from '@/lib/conversationTimeline';
-import {
-  MIN_CONVERSATION_GALLERY_WIDTH,
-  resizeConversationDetailPanel,
-} from '@/lib/conversationPanelSizing';
+import { buildTimelineDayGroups, countTimelineItems, MIN_CONVERSATION_GALLERY_WIDTH, resizeConversationDetailPanel, selectionFromSearchParams, type ConversationSelection } from '../model';
 
 // Detail pane width constraints
 const DEFAULT_PANEL_WIDTH = 480;
 
-type Selection =
-  { kind: 'conversation'; id: string } | { kind: 'recap'; id: string } | null;
+type Selection = ConversationSelection;
 
 export function ConversationSplitView() {
   const { user } = useAuth();
@@ -67,11 +53,7 @@ export function ConversationSplitView() {
   const urlRecapId = searchParams.get('recap');
 
   const [selection, setSelectionState] = useState<Selection>(
-    urlRecapId
-      ? { kind: 'recap', id: urlRecapId }
-      : urlConversationId
-        ? { kind: 'conversation', id: urlConversationId }
-        : null,
+    selectionFromSearchParams(urlConversationId, urlRecapId),
   );
   const selectionRef = useRef(selection);
   const setSelection = useCallback((nextSelection: Selection) => {
diff --git a/web/app/src/components/conversations/ConversationTile.tsx b/web/app/src/features/conversations/ui/ConversationTile.tsx
similarity index 99%
rename from web/app/src/components/conversations/ConversationTile.tsx
rename to web/app/src/features/conversations/ui/ConversationTile.tsx
index 1e3bc815053..33ad28b9abf 100644
--- a/web/app/src/components/conversations/ConversationTile.tsx
+++ b/web/app/src/features/conversations/ui/ConversationTile.tsx
@@ -5,7 +5,7 @@ import { motion } from 'framer-motion';
 import { Star, Check, CheckSquare, Users } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { formatTime, formatDuration } from '@/lib/utils';
-import { conversationSignals } from '@/lib/conversationTimeline';
+import { conversationSignals } from '../model';
 import type { Conversation } from '@/types/conversation';
 import { MixpanelManager } from '@/lib/analytics/mixpanel';
 
diff --git a/web/app/src/components/conversations/DateFilter.tsx b/web/app/src/features/conversations/ui/DateFilter.tsx
similarity index 100%
rename from web/app/src/components/conversations/DateFilter.tsx
rename to web/app/src/features/conversations/ui/DateFilter.tsx
diff --git a/web/app/src/components/conversations/DeleteConversationsDialog.tsx b/web/app/src/features/conversations/ui/DeleteConversationsDialog.tsx
similarity index 100%
rename from web/app/src/components/conversations/DeleteConversationsDialog.tsx
rename to web/app/src/features/conversations/ui/DeleteConversationsDialog.tsx
diff --git a/web/app/src/features/conversations/ui/DetailSkeleton.tsx b/web/app/src/features/conversations/ui/DetailSkeleton.tsx
new file mode 100644
index 00000000000..21603e3c5c8
--- /dev/null
+++ b/web/app/src/features/conversations/ui/DetailSkeleton.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+/**
+ * Loading skeleton
+ */
+export function DetailSkeleton() {
+  return (
+    <div className="p-6 animate-pulse">
+      {/* Header */}
+      <div className="flex items-start gap-4 mb-6">
+        <div className="w-14 h-14 rounded-2xl bg-bg-tertiary" />
+        <div className="flex-1">
+          <div className="h-6 w-3/4 bg-bg-tertiary rounded mb-2" />
+          <div className="flex gap-3">
+            <div className="h-4 w-24 bg-bg-tertiary rounded" />
+            <div className="h-4 w-20 bg-bg-tertiary rounded" />
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-2 mb-6">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-10 w-24 bg-bg-tertiary rounded-lg" />
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="space-y-3">
+        <div className="h-4 w-full bg-bg-tertiary rounded" />
+        <div className="h-4 w-5/6 bg-bg-tertiary rounded" />
+        <div className="h-4 w-4/6 bg-bg-tertiary rounded" />
+      </div>
+    </div>
+  );
+}
diff --git a/web/app/src/components/conversations/EditableTitle.tsx b/web/app/src/features/conversations/ui/EditableTitle.tsx
similarity index 97%
rename from web/app/src/components/conversations/EditableTitle.tsx
rename to web/app/src/features/conversations/ui/EditableTitle.tsx
index da8d98f7736..104fea1e212 100644
--- a/web/app/src/components/conversations/EditableTitle.tsx
+++ b/web/app/src/features/conversations/ui/EditableTitle.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { cn } from '@/lib/utils';
-import { updateConversationTitle } from '@/lib/api';
+import { updateConversationTitle } from '@/features/conversations/api';
 
 interface EditableTitleProps {
   conversationId: string;
diff --git a/web/app/src/components/conversations/FolderDialog.tsx b/web/app/src/features/conversations/ui/FolderDialog.tsx
similarity index 100%
rename from web/app/src/components/conversations/FolderDialog.tsx
rename to web/app/src/features/conversations/ui/FolderDialog.tsx
diff --git a/web/app/src/components/conversations/FolderTabs.tsx b/web/app/src/features/conversations/ui/FolderTabs.tsx
similarity index 100%
rename from web/app/src/components/conversations/FolderTabs.tsx
rename to web/app/src/features/conversations/ui/FolderTabs.tsx
diff --git a/web/app/src/components/conversations/GenerateSummaryButton.tsx b/web/app/src/features/conversations/ui/GenerateSummaryButton.tsx
similarity index 99%
rename from web/app/src/components/conversations/GenerateSummaryButton.tsx
rename to web/app/src/features/conversations/ui/GenerateSummaryButton.tsx
index 209f0fce063..6c0706e8d4e 100644
--- a/web/app/src/components/conversations/GenerateSummaryButton.tsx
+++ b/web/app/src/features/conversations/ui/GenerateSummaryButton.tsx
@@ -17,15 +17,8 @@ import {
 } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import { cn } from '@/lib/utils';
-import {
-  getApp,
-  reprocessConversation,
-  testConversationPrompt,
-  createApp,
-  enableApp,
-  generateAppDescriptionAndEmoji,
-  getInstalledApps,
-} from '@/lib/api';
+import { getApp, createApp, enableApp, generateAppDescriptionAndEmoji, getInstalledApps } from '@/features/connectors';
+import { reprocessConversation, testConversationPrompt } from '@/features/conversations/api';
 import { auth } from '@/lib/firebase';
 import type { App } from '@/types/apps';
 import type { Conversation, AppResponse } from '@/types/conversation';
diff --git a/web/app/src/components/conversations/ManagePeopleModal.tsx b/web/app/src/features/conversations/ui/ManagePeopleModal.tsx
similarity index 99%
rename from web/app/src/components/conversations/ManagePeopleModal.tsx
rename to web/app/src/features/conversations/ui/ManagePeopleModal.tsx
index 298548c742b..0fdd51442dd 100644
--- a/web/app/src/components/conversations/ManagePeopleModal.tsx
+++ b/web/app/src/features/conversations/ui/ManagePeopleModal.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, Loader2, Pencil, Trash2, Plus, Check, User } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { usePeople } from '@/hooks/usePeople';
+import { usePeople } from '@/features/conversations/usePeople';
 import type { Person } from '@/types/user';
 
 interface ManagePeopleModalProps {
diff --git a/web/app/src/components/conversations/MergeActionBar.tsx b/web/app/src/features/conversations/ui/MergeActionBar.tsx
similarity index 100%
rename from web/app/src/components/conversations/MergeActionBar.tsx
rename to web/app/src/features/conversations/ui/MergeActionBar.tsx
diff --git a/web/app/src/components/conversations/MergeConfirmationDialog.tsx b/web/app/src/features/conversations/ui/MergeConfirmationDialog.tsx
similarity index 100%
rename from web/app/src/components/conversations/MergeConfirmationDialog.tsx
rename to web/app/src/features/conversations/ui/MergeConfirmationDialog.tsx
diff --git a/web/app/src/components/conversations/MoveFolderDialog.tsx b/web/app/src/features/conversations/ui/MoveFolderDialog.tsx
similarity index 100%
rename from web/app/src/components/conversations/MoveFolderDialog.tsx
rename to web/app/src/features/conversations/ui/MoveFolderDialog.tsx
diff --git a/web/app/src/components/conversations/PersonChip.tsx b/web/app/src/features/conversations/ui/PersonChip.tsx
similarity index 100%
rename from web/app/src/components/conversations/PersonChip.tsx
rename to web/app/src/features/conversations/ui/PersonChip.tsx
diff --git a/web/app/src/components/conversations/RecapTile.tsx b/web/app/src/features/conversations/ui/RecapTile.tsx
similarity index 100%
rename from web/app/src/components/conversations/RecapTile.tsx
rename to web/app/src/features/conversations/ui/RecapTile.tsx
diff --git a/web/app/src/components/conversations/ScreenFrameLightbox.tsx b/web/app/src/features/conversations/ui/ScreenFrameLightbox.tsx
similarity index 83%
rename from web/app/src/components/conversations/ScreenFrameLightbox.tsx
rename to web/app/src/features/conversations/ui/ScreenFrameLightbox.tsx
index c78caa78ab3..01947095e9c 100644
--- a/web/app/src/components/conversations/ScreenFrameLightbox.tsx
+++ b/web/app/src/features/conversations/ui/ScreenFrameLightbox.tsx
@@ -1,16 +1,9 @@
 'use client';
 
 import { useCallback, useEffect } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
 import Image from '@tschk/moonshine-next/image';
 import { ChevronLeft, ChevronRight, Loader2, Trash2 } from 'lucide-react';
-import {
-  Dialog,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { stepFrameIndex } from '@/lib/screenFrames';
 import type { ConversationScreenFrame } from '@/types/conversation';
@@ -29,9 +22,8 @@ interface ScreenFrameLightboxProps {
 
 /**
  * Full-size screenshot view. Left/right arrow keys step through the strip
- * with wraparound; Escape closes (Radix Dialog's default behaviour, since
- * this is built on `ui/dialog.tsx`). Delete is available from inside it, but
- * only *requests* deletion — the caller owns confirmation (see
+ * with wraparound; Escape closes (Radix Dialog's default behaviour).
+ * Delete only *requests* deletion — the caller owns confirmation (see
  * `ConversationDetailPanel`).
  */
 export function ScreenFrameLightbox({
@@ -74,21 +66,21 @@ export function ScreenFrameLightbox({
   const isDeleting = deletingFrameId === frame.id;
 
   return (
-    <Dialog
+    <Dialog.Root
       open={open}
       onOpenChange={(nextOpen) => {
         if (!nextOpen) onClose();
       }}
     >
-      <DialogPortal>
-        <DialogOverlay />
-        <DialogContent
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm" />
+        <Dialog.Content
           className={cn(
-            'w-[92vw] max-w-5xl border-none bg-transparent p-0 shadow-none',
+            'fixed left-1/2 top-1/2 z-50 w-[92vw] max-w-5xl -translate-x-1/2 -translate-y-1/2 border-none bg-transparent p-0 shadow-none focus:outline-none',
             className,
           )}
         >
-          <DialogTitle className="sr-only">{frame.caption || 'Screenshot'}</DialogTitle>
+          <Dialog.Title className="sr-only">{frame.caption || 'Screenshot'}</Dialog.Title>
 
           <div className="relative flex flex-col gap-3">
             <div className="relative aspect-video w-full overflow-hidden rounded-xl border border-bg-tertiary bg-bg-primary">
@@ -132,12 +124,11 @@ export function ScreenFrameLightbox({
                   </p>
                 )}
               </div>
-              <Button
+              <button
                 type="button"
-                variant="destructive"
-                size="sm"
                 onClick={() => onRequestDeleteFrame(frame.id)}
                 disabled={isDeleting}
+                className="inline-flex h-8 items-center justify-center gap-2 rounded-chip bg-error px-3 text-xs font-medium text-white hover:bg-error/90 disabled:pointer-events-none disabled:opacity-50"
               >
                 {isDeleting ? (
                   <Loader2 className="h-3.5 w-3.5 animate-spin" />
@@ -145,11 +136,11 @@ export function ScreenFrameLightbox({
                   <Trash2 className="h-3.5 w-3.5" />
                 )}
                 {isDeleting ? 'Deleting…' : 'Delete'}
-              </Button>
+              </button>
             </div>
           </div>
-        </DialogContent>
-      </DialogPortal>
-    </Dialog>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }
diff --git a/web/app/src/components/conversations/SpeakerTagSheet.tsx b/web/app/src/features/conversations/ui/SpeakerTagSheet.tsx
similarity index 99%
rename from web/app/src/components/conversations/SpeakerTagSheet.tsx
rename to web/app/src/features/conversations/ui/SpeakerTagSheet.tsx
index 1f9c33074d5..e8a73ffc75d 100644
--- a/web/app/src/components/conversations/SpeakerTagSheet.tsx
+++ b/web/app/src/features/conversations/ui/SpeakerTagSheet.tsx
@@ -5,8 +5,8 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { X, Loader2, ChevronDown, ChevronUp, Settings } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { PersonChip, YouChip, AddPersonChip } from './PersonChip';
-import { usePeople } from '@/hooks/usePeople';
-import { assignBulkTranscriptSegments } from '@/lib/api';
+import { usePeople } from '@/features/conversations/usePeople';
+import { assignBulkTranscriptSegments } from '@/features/conversations/api';
 import type { TranscriptSegment } from '@/types/conversation';
 import type { Person } from '@/types/user';
 
diff --git a/web/app/src/features/conversations/ui/SummaryTab.tsx b/web/app/src/features/conversations/ui/SummaryTab.tsx
new file mode 100644
index 00000000000..140f06a65e7
--- /dev/null
+++ b/web/app/src/features/conversations/ui/SummaryTab.tsx
@@ -0,0 +1,199 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import dynamic from '@tschk/moonshine-next/dynamic';
+import { MapPin, Sparkles, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { AppSummaryCard } from './AppSummaryCard';
+import { GenerateSummaryButton } from './GenerateSummaryButton';
+import type { Conversation, AppResponse, Geolocation } from '@/types/conversation';
+
+const SingleLocationMap = dynamic(() => import('@/shared/ui/SingleLocationMap'), {
+  ssr: false,
+  loading: () => (
+    <div className="h-full bg-bg-tertiary animate-pulse flex items-center justify-center rounded-r-xl">
+      <MapPin className="w-8 h-8 text-text-quaternary" />
+    </div>
+  ),
+});
+
+/**
+ * Summary tab content with app summaries and optional location map
+ */
+interface SummaryTabProps {
+  overview: string;
+  category?: string;
+  conversationId: string;
+  appResults: AppResponse[];
+  suggestedAppIds: string[];
+  onGenerateComplete?: (conversation: Conversation) => void;
+  geolocation?: Geolocation | null;
+}
+
+export function SummaryTab({
+  overview,
+  category,
+  conversationId,
+  appResults,
+  suggestedAppIds,
+  onGenerateComplete,
+  geolocation,
+}: SummaryTabProps) {
+  const hasAppSummaries = appResults && appResults.length > 0;
+  const hasLocation = geolocation && geolocation.latitude && geolocation.longitude;
+
+  // State for expandable text
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [needsTruncation, setNeedsTruncation] = useState(false);
+  const [mapHeight, setMapHeight] = useState(0);
+  const textRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<HTMLDivElement>(null);
+
+  // Check if text overflows the map height
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current && mapRef.current && hasLocation) {
+        const actualMapHeight = mapRef.current.clientHeight;
+        setMapHeight(actualMapHeight);
+        // Only truncate if text is taller than the map (minus some padding for the button)
+        setNeedsTruncation(textRef.current.scrollHeight > actualMapHeight - 40);
+      }
+    };
+
+    // Small delay to ensure map has rendered
+    const timer = setTimeout(checkOverflow, 100);
+    window.addEventListener('resize', checkOverflow);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener('resize', checkOverflow);
+    };
+  }, [overview, hasLocation]);
+
+  return (
+    <div className="space-y-6">
+      {/* Summary Section with optional Map */}
+      {hasLocation ? (
+        <div className="noise-overlay rounded-xl overflow-hidden border border-white/[0.04]">
+          <div className="grid grid-cols-1 md:grid-cols-2 md:items-start min-h-[280px]">
+            {/* Left: Overview content */}
+            <div className="p-5 pt-4 relative">
+              <div
+                ref={textRef}
+                className={cn(
+                  'transition-all duration-300',
+                  !isExpanded && needsTruncation && 'overflow-hidden',
+                )}
+                style={
+                  !isExpanded && needsTruncation && mapHeight > 0
+                    ? { maxHeight: mapHeight - 56 }
+                    : undefined
+                }
+              >
+                {category && (
+                  <div className="mb-3">
+                    <span className="inline-flex px-3 py-1 rounded-full text-xs font-medium bg-white/[0.08] text-text-primary capitalize">
+                      {category}
+                    </span>
+                  </div>
+                )}
+                <p className="text-text-secondary leading-relaxed text-lg">{overview}</p>
+                {geolocation.address && (
+                  <div className="mt-4 flex items-start gap-2 text-sm text-text-tertiary">
+                    <MapPin className="w-4 h-4 flex-shrink-0 mt-0.5" />
+                    <span>{geolocation.address}</span>
+                  </div>
+                )}
+              </div>
+
+              {/* Gradient fade and Show more button */}
+              {needsTruncation && (
+                <div
+                  className={cn(
+                    'mt-2',
+                    !isExpanded &&
+                      'absolute bottom-0 left-0 right-0 pt-12 pb-4 px-5 bg-gradient-to-t from-bg-secondary via-bg-secondary/90 to-transparent',
+                  )}
+                >
+                  <button
+                    onClick={() => setIsExpanded(!isExpanded)}
+                    className="flex items-center gap-1 text-sm text-text-primary hover:text-text-secondary transition-colors"
+                  >
+                    {isExpanded ? (
+                      <>
+                        <ChevronUp className="w-4 h-4" />
+                        <span>Show less</span>
+                      </>
+                    ) : (
+                      <>
+                        <ChevronDown className="w-4 h-4" />
+                        <span>Show more</span>
+                      </>
+                    )}
+                  </button>
+                </div>
+              )}
+            </div>
+            {/* Right: Map */}
+            <div ref={mapRef} className="relative overflow-hidden aspect-video">
+              <SingleLocationMap
+                latitude={geolocation.latitude}
+                longitude={geolocation.longitude}
+                address={geolocation.address}
+                height="100%"
+              />
+            </div>
+          </div>
+        </div>
+      ) : (
+        /* Full-width overview when no location */
+        <div>
+          {category && (
+            <div className="mb-3">
+              <span className="inline-flex px-3 py-1 rounded-full text-xs font-medium bg-white/[0.08] text-text-primary capitalize">
+                {category}
+              </span>
+            </div>
+          )}
+          <p className="text-text-secondary leading-relaxed text-lg">{overview}</p>
+        </div>
+      )}
+
+      {/* App Summaries Section */}
+      <div className="pt-4 border-t border-bg-tertiary">
+        {/* Section Header with Generate Button */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Sparkles className="w-4 h-4 text-text-primary" />
+            <h3 className="text-sm font-medium text-text-primary">Summary Templates</h3>
+          </div>
+          <GenerateSummaryButton
+            conversationId={conversationId}
+            suggestedAppIds={suggestedAppIds}
+            existingAppResults={appResults}
+            onGenerateComplete={onGenerateComplete}
+          />
+        </div>
+
+        {/* App Summary Cards */}
+        {hasAppSummaries && (
+          <div className="space-y-3">
+            {appResults.map((appResponse, index) => (
+              <AppSummaryCard
+                key={`${appResponse.app_id}-${index}`}
+                appResponse={appResponse}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* Empty state for templates */}
+        {!hasAppSummaries && (
+          <p className="text-sm text-text-tertiary mt-2">
+            No summaries yet. Click Templates above to generate one or create a custom
+            template.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/app/src/components/conversations/TranscriptView.tsx b/web/app/src/features/conversations/ui/TranscriptView.tsx
similarity index 100%
rename from web/app/src/components/conversations/TranscriptView.tsx
rename to web/app/src/features/conversations/ui/TranscriptView.tsx
diff --git a/web/app/src/components/conversations/__tests__/ConversationGallery.test.tsx b/web/app/src/features/conversations/ui/__tests__/ConversationGallery.test.tsx
similarity index 96%
rename from web/app/src/components/conversations/__tests__/ConversationGallery.test.tsx
rename to web/app/src/features/conversations/ui/__tests__/ConversationGallery.test.tsx
index a75f43f96a9..0e0ee47fd02 100644
--- a/web/app/src/components/conversations/__tests__/ConversationGallery.test.tsx
+++ b/web/app/src/features/conversations/ui/__tests__/ConversationGallery.test.tsx
@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { ConversationGallery } from '@/components/conversations/ConversationGallery';
-import type { TimelineDayGroup } from '@/lib/conversationTimeline';
+import { ConversationGallery } from '@/features/conversations/ui/ConversationGallery';
+import type { TimelineDayGroup } from '../../model';
 import type { Conversation } from '@/types/conversation';
 
 function conversation(id: string): Conversation {
diff --git a/web/app/src/components/conversations/__tests__/ConversationScreenFrameBanner.test.tsx b/web/app/src/features/conversations/ui/__tests__/ConversationScreenFrameBanner.test.tsx
similarity index 97%
rename from web/app/src/components/conversations/__tests__/ConversationScreenFrameBanner.test.tsx
rename to web/app/src/features/conversations/ui/__tests__/ConversationScreenFrameBanner.test.tsx
index 68598b65ba5..41c1d4e7044 100644
--- a/web/app/src/components/conversations/__tests__/ConversationScreenFrameBanner.test.tsx
+++ b/web/app/src/features/conversations/ui/__tests__/ConversationScreenFrameBanner.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { ConversationScreenFrameBanner } from '@/components/conversations/ConversationScreenFrameBanner';
+import { ConversationScreenFrameBanner } from '@/features/conversations/ui/ConversationScreenFrameBanner';
 import type { ConversationScreenFrame } from '@/types/conversation';
 
 vi.mock('@tschk/moonshine-next/image', () => ({
diff --git a/web/app/src/components/conversations/__tests__/ConversationScreenFrameCarousel.test.tsx b/web/app/src/features/conversations/ui/__tests__/ConversationScreenFrameCarousel.test.tsx
similarity index 96%
rename from web/app/src/components/conversations/__tests__/ConversationScreenFrameCarousel.test.tsx
rename to web/app/src/features/conversations/ui/__tests__/ConversationScreenFrameCarousel.test.tsx
index 6628bc41604..47c19806fe9 100644
--- a/web/app/src/components/conversations/__tests__/ConversationScreenFrameCarousel.test.tsx
+++ b/web/app/src/features/conversations/ui/__tests__/ConversationScreenFrameCarousel.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { ConversationScreenFrameCarousel } from '@/components/conversations/ConversationScreenFrameCarousel';
+import { ConversationScreenFrameCarousel } from '@/features/conversations/ui/ConversationScreenFrameCarousel';
 import type { ConversationScreenFrame } from '@/types/conversation';
 
 vi.mock('@tschk/moonshine-next/image', () => ({
diff --git a/web/app/src/components/conversations/__tests__/ConversationSplitView.test.tsx b/web/app/src/features/conversations/ui/__tests__/ConversationSplitView.test.tsx
similarity index 88%
rename from web/app/src/components/conversations/__tests__/ConversationSplitView.test.tsx
rename to web/app/src/features/conversations/ui/__tests__/ConversationSplitView.test.tsx
index a14f8f0632c..9e99ae48476 100644
--- a/web/app/src/components/conversations/__tests__/ConversationSplitView.test.tsx
+++ b/web/app/src/features/conversations/ui/__tests__/ConversationSplitView.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ConversationSplitView } from '@/components/conversations/ConversationSplitView';
+import { ConversationSplitView } from '@/features/conversations/ui/ConversationSplitView';
 import type { Conversation } from '@/types/conversation';
 import type { DailySummary } from '@/types/recap';
 
@@ -28,19 +28,19 @@ vi.mock('framer-motion', () => ({
     div: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   },
 }));
-vi.mock('@/components/auth/AuthProvider', () => ({
+vi.mock('@/features/auth', () => ({
   useAuth: () => ({ user: { displayName: 'Ada' } }),
 }));
-vi.mock('@/components/chat/ChatContext', () => ({
+vi.mock('@/features/chat', () => ({
   useChat: () => ({ setContext: harness.setContext }),
 }));
-vi.mock('@/components/ui/Toast', () => ({
+vi.mock('@/shared/ui/Toast', () => ({
   useToast: () => ({ showToast: vi.fn() }),
 }));
 vi.mock('@/hooks/useLocalStorage', () => ({
   useLocalStorage: () => [480, vi.fn()],
 }));
-vi.mock('@/hooks/useConversations', () => ({
+vi.mock('@/features/conversations/useConversations', () => ({
   useConversations: () => ({
     conversations: harness.conversations,
     loading: harness.conversationsLoading,
@@ -50,7 +50,7 @@ vi.mock('@/hooks/useConversations', () => ({
     refresh: vi.fn(),
   }),
 }));
-vi.mock('@/hooks/useConversation', () => ({
+vi.mock('@/features/conversations/useConversation', () => ({
   useConversation: (id: string | null) => ({
     conversation:
       harness.conversations.find((conversation) => conversation.id === id) ?? null,
@@ -58,7 +58,7 @@ vi.mock('@/hooks/useConversation', () => ({
     update: vi.fn(),
   }),
 }));
-vi.mock('@/hooks/useRecaps', () => ({
+vi.mock('@/features/conversations/useRecaps', () => ({
   useRecaps: () => ({
     recaps: harness.recaps,
     loading: harness.recapsLoading,
@@ -67,7 +67,7 @@ vi.mock('@/hooks/useRecaps', () => ({
     getRecapDetail: harness.getRecapDetail,
   }),
 }));
-vi.mock('@/hooks/useSearchConversations', () => ({
+vi.mock('@/features/conversations/useSearchConversations', () => ({
   useSearchConversations: () => ({
     results: harness.searchResults,
     loading: harness.searchLoading,
@@ -98,7 +98,7 @@ vi.mock('@/components/layout/PageToolbar', () => ({
     </div>
   ),
 }));
-vi.mock('@/components/conversations/ConversationGallery', () => ({
+vi.mock('@/features/conversations/ui/ConversationGallery', () => ({
   ConversationGallery: ({
     groups,
   }: {
@@ -114,12 +114,12 @@ vi.mock('@/components/conversations/ConversationGallery', () => ({
   ),
   ConversationGallerySkeleton: () => <div>Loading timeline</div>,
 }));
-vi.mock('@/components/conversations/ConversationDetailPanel', () => ({
+vi.mock('@/features/conversations/ui/ConversationDetailPanel', () => ({
   ConversationDetailPanel: ({ conversationId }: { conversationId: string }) => (
     <div data-testid="conversation-detail">{conversationId}</div>
   ),
 }));
-vi.mock('@/components/recaps/RecapDetailPanel', () => ({
+vi.mock('@/features/conversations/recaps/RecapDetailPanel', () => ({
   RecapDetailPanel: ({
     recapId,
     recap,
@@ -128,31 +128,31 @@ vi.mock('@/components/recaps/RecapDetailPanel', () => ({
     recap?: DailySummary | null;
   }) => <div data-testid="recap-detail">{recap?.headline ?? `Loading ${recapId}`}</div>,
 }));
-vi.mock('@/components/conversations/FolderTabs', () => ({
+vi.mock('@/features/conversations/ui/FolderTabs', () => ({
   FOLDER_ALL: 'all',
   FOLDER_STARRED: 'starred',
   FolderTabs: () => null,
   FolderTabsSkeleton: () => null,
 }));
-vi.mock('@/components/conversations/DateFilter', () => ({ DateFilter: () => null }));
-vi.mock('@/components/conversations/MergeActionBar', () => ({
+vi.mock('@/features/conversations/ui/DateFilter', () => ({ DateFilter: () => null }));
+vi.mock('@/features/conversations/ui/MergeActionBar', () => ({
   MergeActionBar: () => null,
 }));
-vi.mock('@/components/conversations/MergeConfirmationDialog', () => ({
+vi.mock('@/features/conversations/ui/MergeConfirmationDialog', () => ({
   MergeConfirmationDialog: () => null,
 }));
-vi.mock('@/components/conversations/DeleteConversationsDialog', () => ({
+vi.mock('@/features/conversations/ui/DeleteConversationsDialog', () => ({
   DeleteConversationsDialog: () => null,
 }));
-vi.mock('@/components/conversations/FolderDialog', () => ({
+vi.mock('@/features/conversations/ui/FolderDialog', () => ({
   FolderDialog: () => null,
   DeleteFolderDialog: () => null,
 }));
-vi.mock('@/components/conversations/MoveFolderDialog', () => ({
+vi.mock('@/features/conversations/ui/MoveFolderDialog', () => ({
   MoveFolderDialog: () => null,
 }));
-vi.mock('@/components/ui/ResizeHandle', () => ({ ResizeHandle: () => null }));
-vi.mock('@/lib/api', () => ({
+vi.mock('@/shared/ui/ResizeHandle', () => ({ ResizeHandle: () => null }));
+vi.mock('@/features/conversations/api', () => ({
   getFolders: harness.getFolders,
   createFolder: vi.fn(),
   updateFolder: vi.fn(),
diff --git a/web/app/src/components/conversations/__tests__/RecapTile.test.tsx b/web/app/src/features/conversations/ui/__tests__/RecapTile.test.tsx
similarity index 97%
rename from web/app/src/components/conversations/__tests__/RecapTile.test.tsx
rename to web/app/src/features/conversations/ui/__tests__/RecapTile.test.tsx
index 269e4f40f50..b915b50fd75 100644
--- a/web/app/src/components/conversations/__tests__/RecapTile.test.tsx
+++ b/web/app/src/features/conversations/ui/__tests__/RecapTile.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
-import { RecapTile } from '@/components/conversations/RecapTile';
+import { RecapTile } from '@/features/conversations/ui/RecapTile';
 import type { DailySummary } from '@/types/recap';
 
 function recap(overrides: Partial<DailySummary> = {}): DailySummary {
diff --git a/web/app/src/components/conversations/__tests__/ScreenFrameLightbox.test.tsx b/web/app/src/features/conversations/ui/__tests__/ScreenFrameLightbox.test.tsx
similarity index 97%
rename from web/app/src/components/conversations/__tests__/ScreenFrameLightbox.test.tsx
rename to web/app/src/features/conversations/ui/__tests__/ScreenFrameLightbox.test.tsx
index 6b86a1a4e02..5b4c198af6b 100644
--- a/web/app/src/components/conversations/__tests__/ScreenFrameLightbox.test.tsx
+++ b/web/app/src/features/conversations/ui/__tests__/ScreenFrameLightbox.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { ScreenFrameLightbox } from '@/components/conversations/ScreenFrameLightbox';
+import { ScreenFrameLightbox } from '@/features/conversations/ui/ScreenFrameLightbox';
 import type { ConversationScreenFrame } from '@/types/conversation';
 
 vi.mock('@tschk/moonshine-next/image', () => ({
diff --git a/web/app/src/features/conversations/useConversation.ts b/web/app/src/features/conversations/useConversation.ts
new file mode 100644
index 00000000000..5f9ea2da5c3
--- /dev/null
+++ b/web/app/src/features/conversations/useConversation.ts
@@ -0,0 +1,70 @@
+'use client';
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
+import { getConversation } from '@/features/conversations/api';
+import type { Conversation } from '@/types/conversation';
+
+interface UseConversationOptions {
+  enabled?: boolean;
+}
+
+interface UseConversationReturn {
+  conversation: Conversation | null;
+  loading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+  update: (conversation: Conversation) => void;
+}
+
+export function createConversationStore() {
+  const conversation = createSignal<Conversation | null>(null);
+  const loading = createSignal(true);
+  const error = createSignal<string | null>(null);
+
+  const load = async (id: string | null, enabled: boolean) => {
+    if (!enabled || !id) {
+      conversation.set(null);
+      loading.set(false);
+      return;
+    }
+
+    loading.set(true);
+    error.set(null);
+    try {
+      conversation.set(await getConversation(id));
+    } catch (err) {
+      error.set(err instanceof Error ? err.message : 'Failed to load conversation');
+      console.error('Failed to fetch conversation:', err);
+    } finally {
+      loading.set(false);
+    }
+  };
+
+  const update = (updated: Conversation) => {
+    conversation.set(updated);
+  };
+
+  return { conversation, loading, error, load, update };
+}
+
+export function useConversation(
+  id: string | null,
+  options: UseConversationOptions = {},
+): UseConversationReturn {
+  const { enabled = true } = options;
+  const store = useMemo(() => createConversationStore(), [id, enabled]);
+
+  useEffect(() => {
+    void store.load(id, enabled);
+  }, [store, id, enabled]);
+
+  return {
+    conversation: useSignalValue(store.conversation),
+    loading: useSignalValue(store.loading),
+    error: useSignalValue(store.error),
+    refresh: useCallback(() => store.load(id, enabled), [store, id, enabled]),
+    update: useCallback((updated: Conversation) => store.update(updated), [store]),
+  };
+}
diff --git a/web/app/src/features/conversations/useConversations.ts b/web/app/src/features/conversations/useConversations.ts
new file mode 100644
index 00000000000..38133f73698
--- /dev/null
+++ b/web/app/src/features/conversations/useConversations.ts
@@ -0,0 +1,261 @@
+'use client';
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
+import { getConversations, type GetConversationsParams } from '@/features/conversations/api';
+import type { Conversation, GroupedConversations } from '@/types/conversation';
+import { formatRelativeDate } from '@/lib/utils';
+import {
+  getCache,
+  setCache,
+  onCacheInvalidation,
+  invalidationPatterns,
+  CACHE_TTL,
+  cacheKeys,
+} from '@/lib/cache';
+
+interface CacheEntry {
+  conversations: Conversation[];
+  offset: number;
+  hasMore: boolean;
+}
+
+function getCacheKey(folderId?: string, startDate?: Date, endDate?: Date): string {
+  return cacheKeys.conversations(
+    folderId,
+    startDate?.toISOString().split('T')[0],
+    endDate?.toISOString().split('T')[0],
+  );
+}
+
+function getFromCache(key: string): CacheEntry | null {
+  const cached = getCache<CacheEntry>(key);
+  return cached ? cached.data : null;
+}
+
+function isCacheStale(key: string): boolean {
+  const cached = getCache<CacheEntry>(key);
+  return cached ? cached.isStale : true;
+}
+
+function setToCache(
+  key: string,
+  conversations: Conversation[],
+  offset: number,
+  hasMore: boolean,
+): void {
+  setCache<CacheEntry>(key, { conversations, offset, hasMore }, CACHE_TTL.MEDIUM);
+}
+
+interface UseConversationsOptions extends GetConversationsParams {
+  enabled?: boolean;
+}
+
+interface UseConversationsReturn {
+  conversations: Conversation[];
+  groupedConversations: GroupedConversations;
+  loading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  loadMore: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+function sortByDateDesc(data: Conversation[]): Conversation[] {
+  return [...data].sort((a, b) => {
+    const dateA = new Date(a.started_at || a.created_at);
+    const dateB = new Date(b.started_at || b.created_at);
+    return dateB.getTime() - dateA.getTime();
+  });
+}
+
+export function createConversationsStore(options: {
+  enabled: boolean;
+  limit: number;
+  params: GetConversationsParams;
+}) {
+  const { enabled, limit, params } = options;
+  const cacheKey = getCacheKey(params.folderId, params.startDate, params.endDate);
+  const cached = getFromCache(cacheKey);
+
+  const conversations = createSignal<Conversation[]>(cached?.conversations ?? []);
+  const loading = createSignal(!cached);
+  const error = createSignal<string | null>(null);
+  const hasMore = createSignal(cached?.hasMore ?? true);
+  let offset = cached?.offset ?? 0;
+  let fetching = false;
+
+  const fetchPage = async (
+    currentOffset: number,
+    append: boolean,
+    backgroundRefresh: boolean,
+  ) => {
+    if (!enabled || fetching) return;
+    fetching = true;
+
+    try {
+      if (!backgroundRefresh) {
+        loading.set(true);
+      }
+      error.set(null);
+
+      const data = await getConversations({
+        limit,
+        offset: currentOffset,
+        statuses: params.statuses,
+        includeDiscarded: params.includeDiscarded,
+        startDate: params.startDate,
+        endDate: params.endDate,
+        folderId: params.folderId,
+      });
+
+      const sorted = sortByDateDesc(data);
+      const hasMoreData = data.length === limit;
+      hasMore.set(hasMoreData);
+
+      const next = append ? [...conversations.peek(), ...sorted] : sorted;
+      conversations.set(next);
+      setToCache(cacheKey, next, currentOffset, hasMoreData);
+    } catch (err) {
+      error.set(err instanceof Error ? err.message : 'Failed to load conversations');
+      console.error('Failed to fetch conversations:', err);
+    } finally {
+      loading.set(false);
+      fetching = false;
+    }
+  };
+
+  const ensureLoaded = () => {
+    if (!enabled) return;
+    const cachedNow = getFromCache(cacheKey);
+    if (cachedNow && !isCacheStale(cacheKey)) return;
+    if (cachedNow && isCacheStale(cacheKey)) {
+      void fetchPage(0, false, true);
+      return;
+    }
+    offset = 0;
+    hasMore.set(true);
+    void fetchPage(0, false, false);
+  };
+
+  const loadMore = async () => {
+    if (loading.peek() || !hasMore.peek()) return;
+    offset += limit;
+    await fetchPage(offset, true, false);
+  };
+
+  const refresh = async () => {
+    offset = 0;
+    hasMore.set(true);
+    await fetchPage(0, false, false);
+  };
+
+  const reloadAfterInvalidation = () => {
+    void fetchPage(0, false, false);
+  };
+
+  const refreshInBackground = () => {
+    void fetchPage(0, false, true);
+  };
+
+  return {
+    conversations,
+    loading,
+    error,
+    hasMore,
+    ensureLoaded,
+    loadMore,
+    refresh,
+    reloadAfterInvalidation,
+    refreshInBackground,
+  };
+}
+
+export function useConversations(
+  options: UseConversationsOptions = {},
+): UseConversationsReturn {
+  const { enabled = true, limit = 50, ...params } = options;
+  const statusesKey = JSON.stringify(params.statuses ?? null);
+  const startMs = params.startDate?.getTime();
+  const endMs = params.endDate?.getTime();
+
+  const store = useMemo(
+    () =>
+      createConversationsStore({
+        enabled,
+        limit,
+        params: {
+          statuses: params.statuses,
+          includeDiscarded: params.includeDiscarded,
+          startDate: params.startDate,
+          endDate: params.endDate,
+          folderId: params.folderId,
+        },
+      }),
+    // Primitive filter identity: a new Date each render must not recreate the store.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [enabled, limit, statusesKey, params.includeDiscarded, startMs, endMs, params.folderId],
+  );
+
+  useEffect(() => {
+    store.ensureLoaded();
+  }, [store]);
+
+  useEffect(() => {
+    return onCacheInvalidation((pattern) => {
+      if (pattern === invalidationPatterns.conversations) {
+        store.reloadAfterInvalidation();
+      }
+    });
+  }, [store]);
+
+  const conversations = useSignalValue(store.conversations);
+  const loading = useSignalValue(store.loading);
+  const error = useSignalValue(store.error);
+  const hasMore = useSignalValue(store.hasMore);
+
+  const hasProcessing = conversations.some((c) => c.status === 'processing');
+
+  useEffect(() => {
+    if (!hasProcessing) return;
+
+    let pollCount = 0;
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const poll = () => {
+      store.refreshInBackground();
+      pollCount++;
+      const nextInterval = Math.min(5000 * Math.pow(2, Math.floor(pollCount / 3)), 30000);
+      timeoutId = setTimeout(poll, nextInterval);
+    };
+
+    timeoutId = setTimeout(poll, 5000);
+    return () => clearTimeout(timeoutId);
+  }, [hasProcessing, store]);
+
+  const groupedConversations = useMemo<GroupedConversations>(() => {
+    return conversations.reduce((groups, conversation) => {
+      const date = new Date(conversation.started_at || conversation.created_at);
+      const dateKey = formatRelativeDate(date);
+      if (!groups[dateKey]) {
+        groups[dateKey] = [];
+      }
+      groups[dateKey].push(conversation);
+      return groups;
+    }, {} as GroupedConversations);
+  }, [conversations]);
+
+  const loadMore = useCallback(() => store.loadMore(), [store]);
+  const refresh = useCallback(() => store.refresh(), [store]);
+
+  return {
+    conversations,
+    groupedConversations,
+    loading,
+    error,
+    hasMore,
+    loadMore,
+    refresh,
+  };
+}
diff --git a/web/app/src/features/conversations/usePeople.ts b/web/app/src/features/conversations/usePeople.ts
new file mode 100644
index 00000000000..a5c8bafcd19
--- /dev/null
+++ b/web/app/src/features/conversations/usePeople.ts
@@ -0,0 +1,147 @@
+'use client';
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
+import {
+  getPeople,
+  createPerson,
+  updatePersonName,
+  deletePerson,
+} from '@/features/conversations/api';
+import type { Person } from '@/types/user';
+
+interface UsePeopleReturn {
+  people: Person[];
+  loading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+  addPerson: (name: string) => Promise<Person | null>;
+  updatePerson: (personId: string, name: string) => Promise<boolean>;
+  removePerson: (personId: string) => Promise<boolean>;
+}
+
+function messageFor(err: unknown, fallback: string): string {
+  return err instanceof Error ? err.message : fallback;
+}
+
+function sortPeople(people: Person[]): Person[] {
+  return [...people].sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export function createPeopleStore() {
+  const people = createSignal<Person[]>([]);
+  const loading = createSignal(true);
+  const error = createSignal<string | null>(null);
+  const mutationTails = new Map<string, Promise<void>>();
+
+  const enqueueMutation = <T>(id: string, mutation: () => Promise<T>): Promise<T> => {
+    const previous = mutationTails.get(id);
+    const result = previous ? previous.then(mutation) : mutation();
+    const tail = result.then(
+      () => undefined,
+      () => undefined,
+    );
+    mutationTails.set(id, tail);
+    void tail.then(() => {
+      if (mutationTails.get(id) === tail) mutationTails.delete(id);
+    });
+    return result;
+  };
+
+  const load = async () => {
+    loading.set(true);
+    try {
+      people.set(sortPeople(await getPeople()));
+      error.set(null);
+    } catch (err) {
+      console.error('Failed to fetch people:', err);
+      error.set('Failed to load people');
+    } finally {
+      loading.set(false);
+    }
+  };
+
+  const add = async (name: string): Promise<Person | null> => {
+    try {
+      const created = await createPerson(name);
+      people.set((current) => sortPeople([...current, created]));
+      error.set(null);
+      return created;
+    } catch (err) {
+      console.error('Failed to create person:', err);
+      error.set(messageFor(err, 'Failed to create person'));
+      return null;
+    }
+  };
+
+  const update = (personId: string, name: string): Promise<boolean> =>
+    enqueueMutation(personId, async () => {
+      const previous = people.peek().find((person) => person.id === personId);
+      if (!previous) return false;
+      people.set((current) =>
+        sortPeople(current.map((person) => (person.id === personId ? { ...person, name } : person))),
+      );
+      try {
+        await updatePersonName(personId, name);
+        error.set(null);
+        return true;
+      } catch (err) {
+        console.error('Failed to update person:', err);
+        people.set((current) =>
+          current.map((person) => (person.id === personId ? previous : person)),
+        );
+        error.set(messageFor(err, 'Failed to update person'));
+        return false;
+      }
+    });
+
+  const remove = (personId: string): Promise<boolean> =>
+    enqueueMutation(personId, async () => {
+      const removed = people.peek().find((person) => person.id === personId);
+      people.set((current) => current.filter((person) => person.id !== personId));
+      try {
+        await deletePerson(personId);
+        error.set(null);
+        return true;
+      } catch (err) {
+        console.error('Failed to delete person:', err);
+        if (removed) {
+          people.set((current) => sortPeople([...current, removed]));
+        }
+        error.set(messageFor(err, 'Failed to delete person'));
+        return false;
+      }
+    });
+
+  return { people, loading, error, load, add, update, remove };
+}
+
+export function usePeople(): UsePeopleReturn {
+  const store = useMemo(() => createPeopleStore(), []);
+
+  useEffect(() => {
+    void store.load();
+  }, [store]);
+
+  const people = useSignalValue(store.people);
+  const loading = useSignalValue(store.loading);
+  const error = useSignalValue(store.error);
+
+  const addPerson = useCallback((name: string) => store.add(name), [store]);
+  const updatePerson = useCallback(
+    (personId: string, name: string) => store.update(personId, name),
+    [store],
+  );
+  const removePerson = useCallback((personId: string) => store.remove(personId), [store]);
+
+  return {
+    people,
+    loading,
+    error,
+    refresh: store.load,
+    addPerson,
+    updatePerson,
+    removePerson,
+  };
+}
diff --git a/web/app/src/features/conversations/useRecaps.ts b/web/app/src/features/conversations/useRecaps.ts
new file mode 100644
index 00000000000..da4a620293d
--- /dev/null
+++ b/web/app/src/features/conversations/useRecaps.ts
@@ -0,0 +1,263 @@
+'use client';
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
+import type { DailySummary, GroupedDailySummaries } from '@/types/recap';
+import {
+  getDailySummaries,
+  getDailySummary,
+  deleteDailySummary,
+  generateTestDailySummary,
+} from '@/features/conversations/api';
+import { groupRecapsByMonth, parseLocalDay } from '@/features/conversations/model';
+import { getCache, setCache, updateCache, CACHE_TTL } from '@/lib/cache';
+
+export interface UseRecapsOptions {
+  limit?: number;
+}
+
+export interface UseRecapsReturn {
+  recaps: DailySummary[];
+  groupedRecaps: GroupedDailySummaries;
+  loading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  loadMore: () => Promise<void>;
+  refresh: () => Promise<void>;
+  removeRecap: (id: string) => Promise<boolean>;
+  generateForDate: (date: string) => Promise<DailySummary | null>;
+  getRecapDetail: (id: string) => Promise<DailySummary | null>;
+}
+
+const RECAPS_CACHE_KEY = 'recaps:list';
+
+interface RecapsCacheData {
+  recaps: DailySummary[];
+  offset: number;
+  hasMore: boolean;
+}
+
+function getFromCache(): { data: RecapsCacheData; isStale: boolean } | null {
+  return getCache<RecapsCacheData>(RECAPS_CACHE_KEY);
+}
+
+function setToCache(recaps: DailySummary[], offset: number, hasMore: boolean): void {
+  setCache<RecapsCacheData>(RECAPS_CACHE_KEY, { recaps, offset, hasMore }, CACHE_TTL.MEDIUM);
+}
+
+function updateCacheRecaps(updater: (recaps: DailySummary[]) => DailySummary[]): void {
+  updateCache<RecapsCacheData>(RECAPS_CACHE_KEY, (data) => ({
+    ...data,
+    recaps: updater(data.recaps),
+  }));
+}
+
+function normalizeRecapsResponse(response: unknown): DailySummary[] {
+  if (Array.isArray(response)) {
+    return response;
+  }
+  if (response && typeof response === 'object') {
+    const obj = response as Record<string, unknown>;
+    if (Array.isArray(obj.daily_summaries)) {
+      return obj.daily_summaries as DailySummary[];
+    }
+    if (Array.isArray(obj.summaries)) {
+      return obj.summaries as DailySummary[];
+    }
+    if (Array.isArray(obj.data)) {
+      return obj.data as DailySummary[];
+    }
+  }
+  return [];
+}
+
+function messageFor(err: unknown, fallback: string): string {
+  return err instanceof Error ? err.message : fallback;
+}
+
+export function createRecapsStore(limit: number) {
+  const cachedEntry = getFromCache();
+  const recaps = createSignal<DailySummary[]>(cachedEntry?.data.recaps ?? []);
+  const loading = createSignal(!cachedEntry);
+  const error = createSignal<string | null>(null);
+  const hasMore = createSignal(cachedEntry?.data.hasMore ?? true);
+  let offset = cachedEntry?.data.offset ?? 0;
+  let fetching = false;
+  let initialized = false;
+
+  const doFetch = async (currentOffset: number): Promise<DailySummary[]> => {
+    return normalizeRecapsResponse(await getDailySummaries({ limit, offset: currentOffset }));
+  };
+
+  const ensureLoaded = async () => {
+    if (initialized) return;
+    initialized = true;
+
+    const cached = getFromCache();
+    if (cached && !cached.isStale) {
+      recaps.set(cached.data.recaps);
+      hasMore.set(cached.data.hasMore);
+      offset = cached.data.offset;
+      loading.set(false);
+      return;
+    }
+
+    if (cached) {
+      recaps.set(cached.data.recaps);
+      hasMore.set(cached.data.hasMore);
+      offset = cached.data.offset;
+      loading.set(false);
+    }
+
+    if (fetching) return;
+    fetching = true;
+    if (!cached) {
+      loading.set(true);
+    }
+    error.set(null);
+
+    try {
+      const result = await doFetch(0);
+      recaps.set(result);
+      offset = result.length;
+      hasMore.set(result.length >= limit);
+      setToCache(result, result.length, result.length >= limit);
+    } catch (err) {
+      if (!cached) {
+        error.set(messageFor(err, 'Failed to load recaps'));
+      }
+    } finally {
+      loading.set(false);
+      fetching = false;
+    }
+  };
+
+  const loadMore = async () => {
+    if (fetching || !hasMore.peek()) return;
+    fetching = true;
+    loading.set(true);
+
+    try {
+      const result = await doFetch(offset);
+      const existingIds = new Set(recaps.peek().map((r) => r.id));
+      const newRecaps = result.filter((r) => !existingIds.has(r.id));
+      const updated = [...recaps.peek(), ...newRecaps];
+      recaps.set(updated);
+      offset += result.length;
+      const nextHasMore = result.length >= limit;
+      hasMore.set(nextHasMore);
+      setToCache(updated, offset, nextHasMore);
+    } catch (err) {
+      error.set(messageFor(err, 'Failed to load more recaps'));
+    } finally {
+      loading.set(false);
+      fetching = false;
+    }
+  };
+
+  const refresh = async () => {
+    if (fetching) return;
+    fetching = true;
+    loading.set(true);
+    error.set(null);
+
+    try {
+      const result = await doFetch(0);
+      recaps.set(result);
+      offset = result.length;
+      hasMore.set(result.length >= limit);
+      setToCache(result, result.length, result.length >= limit);
+    } catch (err) {
+      error.set(messageFor(err, 'Failed to refresh recaps'));
+    } finally {
+      loading.set(false);
+      fetching = false;
+    }
+  };
+
+  const removeRecap = async (id: string): Promise<boolean> => {
+    const previous = recaps.peek();
+    recaps.set(previous.filter((r) => r.id !== id));
+    updateCacheRecaps((current) => current.filter((r) => r.id !== id));
+
+    try {
+      await deleteDailySummary(id);
+      error.set(null);
+      return true;
+    } catch (err) {
+      recaps.set(previous);
+      updateCacheRecaps(() => previous);
+      error.set(messageFor(err, 'Failed to delete recap'));
+      return false;
+    }
+  };
+
+  const generateForDate = async (date: string): Promise<DailySummary | null> => {
+    try {
+      const newRecap = await generateTestDailySummary(date);
+      const previous = recaps.peek();
+      const updated = [newRecap, ...previous.filter((r) => r.id !== newRecap.id)];
+      updated.sort(
+        (a, b) => parseLocalDay(b.date).getTime() - parseLocalDay(a.date).getTime(),
+      );
+      recaps.set(updated);
+      updateCacheRecaps(() => updated);
+      error.set(null);
+      return newRecap;
+    } catch (err) {
+      error.set(messageFor(err, 'Failed to generate recap'));
+      return null;
+    }
+  };
+
+  const getRecapDetail = async (id: string): Promise<DailySummary | null> => {
+    try {
+      return await getDailySummary(id);
+    } catch (err) {
+      error.set(messageFor(err, 'Failed to load recap detail'));
+      return null;
+    }
+  };
+
+  return {
+    recaps,
+    loading,
+    error,
+    hasMore,
+    ensureLoaded,
+    loadMore,
+    refresh,
+    removeRecap,
+    generateForDate,
+    getRecapDetail,
+  };
+}
+
+export function useRecaps(options: UseRecapsOptions = {}): UseRecapsReturn {
+  const { limit = 30 } = options;
+  const store = useMemo(() => createRecapsStore(limit), [limit]);
+
+  useEffect(() => {
+    void store.ensureLoaded();
+  }, [store]);
+
+  const recaps = useSignalValue(store.recaps);
+  const loading = useSignalValue(store.loading);
+  const error = useSignalValue(store.error);
+  const hasMore = useSignalValue(store.hasMore);
+  const groupedRecaps = useMemo(() => groupRecapsByMonth(recaps), [recaps]);
+
+  return {
+    recaps,
+    groupedRecaps,
+    loading,
+    error,
+    hasMore,
+    loadMore: useCallback(() => store.loadMore(), [store]),
+    refresh: useCallback(() => store.refresh(), [store]),
+    removeRecap: useCallback((id: string) => store.removeRecap(id), [store]),
+    generateForDate: useCallback((date: string) => store.generateForDate(date), [store]),
+    getRecapDetail: useCallback((id: string) => store.getRecapDetail(id), [store]),
+  };
+}
diff --git a/web/app/src/features/conversations/useSearchConversations.ts b/web/app/src/features/conversations/useSearchConversations.ts
new file mode 100644
index 00000000000..9aae7032732
--- /dev/null
+++ b/web/app/src/features/conversations/useSearchConversations.ts
@@ -0,0 +1,109 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
+import { searchConversations as searchConversationsApi } from '@/features/conversations/api';
+import type { Conversation } from '@/types/conversation';
+
+interface UseSearchConversationsReturn {
+  results: Conversation[];
+  loading: boolean;
+  error: string | null;
+  currentPage: number;
+  totalPages: number;
+  search: (query: string) => Promise<void>;
+  loadMore: () => Promise<void>;
+  clear: () => void;
+}
+
+export function createSearchConversationsStore() {
+  const results = createSignal<Conversation[]>([]);
+  const loading = createSignal(false);
+  const error = createSignal<string | null>(null);
+  const currentPage = createSignal(1);
+  const totalPages = createSignal(0);
+  let currentQuery = '';
+
+  const reset = () => {
+    results.set([]);
+    currentPage.set(1);
+    totalPages.set(0);
+    currentQuery = '';
+  };
+
+  const search = async (query: string) => {
+    if (!query.trim()) {
+      error.set(null);
+      reset();
+      return;
+    }
+
+    currentQuery = query;
+    loading.set(true);
+    error.set(null);
+
+    try {
+      const response = await searchConversationsApi({
+        query,
+        page: 1,
+        perPage: 20,
+      });
+      results.set(response.items);
+      currentPage.set(response.current_page);
+      totalPages.set(response.total_pages);
+    } catch (err) {
+      error.set(err instanceof Error ? err.message : 'Search failed');
+      console.error('Search error:', err);
+    } finally {
+      loading.set(false);
+    }
+  };
+
+  const loadMore = async () => {
+    if (loading.peek() || currentPage.peek() >= totalPages.peek() || !currentQuery) {
+      return;
+    }
+
+    loading.set(true);
+    error.set(null);
+
+    try {
+      const response = await searchConversationsApi({
+        query: currentQuery,
+        page: currentPage.peek() + 1,
+        perPage: 20,
+      });
+      results.set((prev) => [...prev, ...response.items]);
+      currentPage.set(response.current_page);
+      totalPages.set(response.total_pages);
+    } catch (err) {
+      error.set(err instanceof Error ? err.message : 'Failed to load more results');
+      console.error('Load more error:', err);
+    } finally {
+      loading.set(false);
+    }
+  };
+
+  const clear = () => {
+    error.set(null);
+    reset();
+  };
+
+  return { results, loading, error, currentPage, totalPages, search, loadMore, clear };
+}
+
+export function useSearchConversations(): UseSearchConversationsReturn {
+  const store = useMemo(() => createSearchConversationsStore(), []);
+
+  return {
+    results: useSignalValue(store.results),
+    loading: useSignalValue(store.loading),
+    error: useSignalValue(store.error),
+    currentPage: useSignalValue(store.currentPage),
+    totalPages: useSignalValue(store.totalPages),
+    search: useCallback((query: string) => store.search(query), [store]),
+    loadMore: useCallback(() => store.loadMore(), [store]),
+    clear: useCallback(() => store.clear(), [store]),
+  };
+}
diff --git a/web/app/src/features/fair-use/api.ts b/web/app/src/features/fair-use/api.ts
new file mode 100644
index 00000000000..78a2a13fb78
--- /dev/null
+++ b/web/app/src/features/fair-use/api.ts
@@ -0,0 +1,29 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+import {
+  invalidateCache,
+  invalidationPatterns,
+  fetchWithCache,
+  cacheKeys,
+  CACHE_TTL,
+} from '@/lib/cache';
+import {
+  API_BASE_URL,
+  fetchAuthorizedBlob,
+  fetchWithAuth,
+  getAudioAuthHeaders,
+} from '@/shared/api/client';
+import type { FairUseStatusResponse } from '@/lib/omiApi.generated';
+
+export type FairUseStatus = Omit<FairUseStatusResponse, 'stage'> & {
+  stage: 'none' | 'warning' | 'throttle' | 'restrict';
+};
+
+export async function getFairUseStatus(): Promise<FairUseStatus | null> {
+  try {
+    return await fetchWithAuth<FairUseStatus>('/v1/fair-use/status');
+  } catch (error) {
+    console.error('getFairUseStatus error:', error);
+    return null;
+  }
+}
diff --git a/web/app/src/features/fair-use/index.ts b/web/app/src/features/fair-use/index.ts
new file mode 100644
index 00000000000..f26893e1cfc
--- /dev/null
+++ b/web/app/src/features/fair-use/index.ts
@@ -0,0 +1,3 @@
+export { FairUseStatus } from './ui/FairUseStatus';
+export { CaseStatusView } from './ui/CaseStatusView';
+export { getFairUseStatus, type FairUseStatus as FairUseStatusData } from './api';
diff --git a/web/app/src/components/fair-use/CaseStatusView.tsx b/web/app/src/features/fair-use/ui/CaseStatusView.tsx
similarity index 100%
rename from web/app/src/components/fair-use/CaseStatusView.tsx
rename to web/app/src/features/fair-use/ui/CaseStatusView.tsx
diff --git a/web/app/src/components/fair-use/FairUseStatus.tsx b/web/app/src/features/fair-use/ui/FairUseStatus.tsx
similarity index 98%
rename from web/app/src/components/fair-use/FairUseStatus.tsx
rename to web/app/src/features/fair-use/ui/FairUseStatus.tsx
index fbb1db4c914..f34a5689f96 100644
--- a/web/app/src/components/fair-use/FairUseStatus.tsx
+++ b/web/app/src/features/fair-use/ui/FairUseStatus.tsx
@@ -3,8 +3,8 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from '@tschk/moonshine-next/navigation';
 import { ArrowLeft, RefreshCw, Loader2, Info, Copy, Check } from 'lucide-react';
-import { getFairUseStatus } from '@/lib/api';
-import type { FairUseStatus as FairUseStatusType } from '@/lib/api';
+import { getFairUseStatus } from '@/features/fair-use/api';
+import type { FairUseStatus as FairUseStatusType } from '@/features/fair-use/api';
 import { cn } from '@/lib/utils';
 
 const STAGE_META: Record<
diff --git a/web/app/src/lib/__tests__/goalVisuals.test.ts b/web/app/src/features/goals/__tests__/goalVisuals.test.ts
similarity index 96%
rename from web/app/src/lib/__tests__/goalVisuals.test.ts
rename to web/app/src/features/goals/__tests__/goalVisuals.test.ts
index b6133226642..3716d8fda78 100644
--- a/web/app/src/lib/__tests__/goalVisuals.test.ts
+++ b/web/app/src/features/goals/__tests__/goalVisuals.test.ts
@@ -4,8 +4,8 @@ import {
   progressColor,
   progressLabel,
   progressPct,
-} from '@/lib/goalVisuals';
-import { DEFAULT_GOAL_EMOJI, goalEmoji } from '@/lib/goalEmoji';
+} from '@/features/goals/goalVisuals';
+import { DEFAULT_GOAL_EMOJI, goalEmoji } from '@/features/goals/goalEmoji';
 
 /**
  * These lock the behaviour ported from the desktop apps
diff --git a/web/app/src/lib/__tests__/goals.test.ts b/web/app/src/features/goals/__tests__/goals.test.ts
similarity index 99%
rename from web/app/src/lib/__tests__/goals.test.ts
rename to web/app/src/features/goals/__tests__/goals.test.ts
index 30d0b9240d3..fb5a25c934b 100644
--- a/web/app/src/lib/__tests__/goals.test.ts
+++ b/web/app/src/features/goals/__tests__/goals.test.ts
@@ -4,7 +4,7 @@ import {
   sortGoals,
   sortHistoryAscending,
   sparklinePoints,
-} from '@/lib/goals';
+} from '@/features/goals/goals';
 import type { Goal, GoalHistoryEntry } from '@/types/goals';
 
 function goal(overrides: Partial<Goal> = {}): Goal {
diff --git a/web/app/src/lib/__tests__/goalsMetricValue.test.ts b/web/app/src/features/goals/__tests__/goalsMetricValue.test.ts
similarity index 93%
rename from web/app/src/lib/__tests__/goalsMetricValue.test.ts
rename to web/app/src/features/goals/__tests__/goalsMetricValue.test.ts
index 4ad4b7c774d..e12c2f049e4 100644
--- a/web/app/src/lib/__tests__/goalsMetricValue.test.ts
+++ b/web/app/src/features/goals/__tests__/goalsMetricValue.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { formatMetricValue } from '@/lib/goals';
+import { formatMetricValue } from '@/features/goals/goals';
 
 describe('formatMetricValue', () => {
   it('drops the trailing .0 the backend produces for whole numbers', () => {
diff --git a/web/app/src/hooks/__tests__/useGoalDetail.test.tsx b/web/app/src/features/goals/__tests__/useGoalDetail.test.tsx
similarity index 86%
rename from web/app/src/hooks/__tests__/useGoalDetail.test.tsx
rename to web/app/src/features/goals/__tests__/useGoalDetail.test.tsx
index 88b1da7a619..4332a83a4d0 100644
--- a/web/app/src/hooks/__tests__/useGoalDetail.test.tsx
+++ b/web/app/src/features/goals/__tests__/useGoalDetail.test.tsx
@@ -1,13 +1,13 @@
 import { act, renderHook } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/goals/api', () => ({
   getGoalAdvice: vi.fn(),
   getGoalHistory: vi.fn().mockResolvedValue([]),
 }));
 
-const { getGoalAdvice } = await import('@/lib/api');
-const { useGoalDetail } = await import('@/hooks/useGoalDetail');
+const { getGoalAdvice } = await import('@/features/goals/api');
+const { useGoalDetail } = await import('@/features/goals/useGoalDetail');
 
 beforeEach(() => {
   vi.clearAllMocks();
diff --git a/web/app/src/hooks/__tests__/useGoals.test.tsx b/web/app/src/features/goals/__tests__/useGoals.test.tsx
similarity index 98%
rename from web/app/src/hooks/__tests__/useGoals.test.tsx
rename to web/app/src/features/goals/__tests__/useGoals.test.tsx
index d20c7ee2d4d..4ccbf5ec09a 100644
--- a/web/app/src/hooks/__tests__/useGoals.test.tsx
+++ b/web/app/src/features/goals/__tests__/useGoals.test.tsx
@@ -1,9 +1,9 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useGoals } from '@/hooks/useGoals';
+import { useGoals } from '@/features/goals/useGoals';
 import type { Goal } from '@/types/goals';
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/goals/api', () => ({
   getGoals: vi.fn(),
   createGoal: vi.fn(),
   updateGoal: vi.fn(),
@@ -11,7 +11,7 @@ vi.mock('@/lib/api', () => ({
   deleteGoal: vi.fn(),
 }));
 
-const api = await import('@/lib/api');
+const api = await import('@/features/goals/api');
 
 function goal(overrides: Partial<Goal> = {}): Goal {
   return {
diff --git a/web/app/src/features/goals/api.ts b/web/app/src/features/goals/api.ts
new file mode 100644
index 00000000000..d2daafb316e
--- /dev/null
+++ b/web/app/src/features/goals/api.ts
@@ -0,0 +1,110 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+import {
+  invalidateCache,
+  invalidationPatterns,
+  fetchWithCache,
+  cacheKeys,
+  CACHE_TTL,
+} from '@/lib/cache';
+import {
+  API_BASE_URL,
+  fetchAuthorizedBlob,
+  fetchWithAuth,
+  getAudioAuthHeaders,
+} from '@/shared/api/client';
+import type { Goal, GoalHistoryEntry } from '@/types/goals';
+
+export async function getGoals(includeEnded = false): Promise<Goal[]> {
+  const goals = await fetchWithAuth<Goal[]>(
+    `/v1/goals/all?include_ended=${includeEnded}`,
+  );
+  return Array.isArray(goals) ? goals : [];
+}
+
+/**
+ * Create body, matching what the desktop apps send
+ * (`desktop/windows/src/renderer/src/pages/Goals.tsx` saveNew): title, a
+ * required positive target, and unit only when the user gave one.
+ *
+ * `target_value` is required — the backend 422s without it — so a title-only
+ * goal defaults to 1, which completes on a single tick.
+ */
+export interface CreateGoalParams {
+  title: string;
+  target_value: number;
+  unit?: string;
+}
+
+export async function createGoal(params: CreateGoalParams): Promise<Goal> {
+  const goal = await fetchWithAuth<Goal>('/v1/goals', {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+  invalidateCache(invalidationPatterns.goals);
+  return goal;
+}
+
+/**
+ * Update only a goal's progress value.
+ *
+ * The backend takes `current_value` as a query parameter on this route, not in
+ * the body.
+ */
+export async function updateGoalProgress(
+  id: string,
+  currentValue: number,
+): Promise<Goal> {
+  const goal = await fetchWithAuth<Goal>(
+    `/v1/goals/${id}/progress?current_value=${encodeURIComponent(currentValue)}`,
+    { method: 'PATCH' },
+  );
+  invalidateCache(invalidationPatterns.goals);
+  return goal;
+}
+
+export interface UpdateGoalParams {
+  title?: string;
+  target_value?: number;
+  current_value?: number;
+  unit?: string | null;
+}
+
+export async function updateGoal(id: string, updates: UpdateGoalParams): Promise<Goal> {
+  const goal = await fetchWithAuth<Goal>(`/v1/goals/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(updates),
+  });
+  invalidateCache(invalidationPatterns.goals);
+  return goal;
+}
+
+export async function deleteGoal(id: string): Promise<void> {
+  await fetchWithAuth(`/v1/goals/${id}`, { method: 'DELETE' });
+  invalidateCache(invalidationPatterns.goals);
+}
+
+/**
+ * Recorded progress values for a goal, newest window first.
+ *
+ * Uses `/v1/goals/{id}/history`, not `/v1/goals/{id}/detail`. The detail
+ * projection and the progress-events feed both sit behind
+ * `require_canonical_task_user`, which 404s for anyone not enrolled in the
+ * canonical task system — most web users.
+ */
+export async function getGoalHistory(id: string, days = 30): Promise<GoalHistoryEntry[]> {
+  const history = await fetchWithAuth<GoalHistoryEntry[]>(
+    `/v1/goals/${id}/history?days=${days}`,
+  );
+  return Array.isArray(history) ? history : [];
+}
+
+/** AI-generated advice for a goal. Rate limited server-side. */
+export async function getGoalAdvice(id: string): Promise<string> {
+  const response = await fetchWithAuth<{ advice: string }>(`/v1/goals/${id}/advice`);
+  return response.advice;
+}
+
+// ============================================================================
+
+/** Daily, weekly, and overall task-completion scores. */
diff --git a/web/app/src/lib/goalEmoji.ts b/web/app/src/features/goals/goalEmoji.ts
similarity index 100%
rename from web/app/src/lib/goalEmoji.ts
rename to web/app/src/features/goals/goalEmoji.ts
diff --git a/web/app/src/lib/goalVisuals.ts b/web/app/src/features/goals/goalVisuals.ts
similarity index 100%
rename from web/app/src/lib/goalVisuals.ts
rename to web/app/src/features/goals/goalVisuals.ts
diff --git a/web/app/src/lib/goals.ts b/web/app/src/features/goals/goals.ts
similarity index 93%
rename from web/app/src/lib/goals.ts
rename to web/app/src/features/goals/goals.ts
index b3efc6e3f7b..bfb788e85f4 100644
--- a/web/app/src/lib/goals.ts
+++ b/web/app/src/features/goals/goals.ts
@@ -1,7 +1,7 @@
 import type { Goal, GoalHistoryEntry } from '@/types/goals';
 
 /**
- * Goal progress, completion, and labels come from `@/lib/goalVisuals`, ported
+ * Goal progress, completion, and labels come from `@/features/goals/goalVisuals`, ported
  * from the desktop apps. Re-exported here so hub code has one import.
  *
  * Note these are current/target, not min..target: desktop measures a 40->80kg
@@ -13,8 +13,8 @@ export {
   progressColor,
   progressLabel,
   progressPct,
-} from '@/lib/goalVisuals';
-export { goalEmoji, DEFAULT_GOAL_EMOJI } from '@/lib/goalEmoji';
+} from '@/features/goals/goalVisuals';
+export { goalEmoji, DEFAULT_GOAL_EMOJI } from '@/features/goals/goalEmoji';
 
 /** Trim the trailing `.0` the backend's float metrics produce for whole numbers. */
 export function formatMetricValue(value: number): string {
diff --git a/web/app/src/features/goals/index.ts b/web/app/src/features/goals/index.ts
new file mode 100644
index 00000000000..ecf43ec61ba
--- /dev/null
+++ b/web/app/src/features/goals/index.ts
@@ -0,0 +1,6 @@
+export { useGoals } from './useGoals';
+export { useGoalDetail } from './useGoalDetail';
+export { formatMetricValue, historyDelta, sortGoals, sparklinePoints } from './goals';
+export { goalEmoji, DEFAULT_GOAL_EMOJI } from './goalEmoji';
+export { isCompleted, progressColor, progressPct, progressLabel } from './goalVisuals';
+export * from './api';
diff --git a/web/app/src/features/goals/useGoalDetail.ts b/web/app/src/features/goals/useGoalDetail.ts
new file mode 100644
index 00000000000..2e5443368d3
--- /dev/null
+++ b/web/app/src/features/goals/useGoalDetail.ts
@@ -0,0 +1,79 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { getGoalAdvice, getGoalHistory } from '@/features/goals/api';
+import { useAsyncResource } from '@/hooks/useAsyncResource';
+import { useRequestOwner } from '@/hooks/useRequestOwner';
+import { useSignalValue } from '@/lib/signals';
+import type { GoalHistoryEntry } from '@/types/goals';
+
+export interface UseGoalDetailReturn {
+  history: GoalHistoryEntry[];
+  historyLoading: boolean;
+  historyError: string | null;
+  advice: string | null;
+  adviceLoading: boolean;
+  adviceError: string | null;
+  requestAdvice: () => Promise<void>;
+}
+
+const NO_HISTORY: GoalHistoryEntry[] = [];
+
+export function createGoalAdviceStore() {
+  const advice = createSignal<string | null>(null);
+  const loading = createSignal(false);
+  const error = createSignal<string | null>(null);
+  return { advice, loading, error };
+}
+
+/**
+ * History for one goal, plus advice fetched only on demand.
+ *
+ * Advice is an LLM call behind a server-side rate limit, so it never runs on
+ * open — only when the user asks for it. A new store per goal id drops in-flight
+ * writes the way `useRequestOwner` does: the previous goal's response cannot
+ * land under the newly selected title.
+ */
+export function useGoalDetail(goalId: string | null): UseGoalDetailReturn {
+  const history = useAsyncResource(
+    goalId,
+    useCallback(() => getGoalHistory(goalId as string), [goalId]),
+    { fallbackMessage: 'Failed to load history' },
+  );
+
+  const store = useMemo(() => createGoalAdviceStore(), [goalId]);
+  const claimRequest = useRequestOwner(goalId);
+
+  const advice = useSignalValue(store.advice);
+  const adviceLoading = useSignalValue(store.loading);
+  const adviceError = useSignalValue(store.error);
+
+  const requestAdvice = useCallback(async () => {
+    if (!goalId) return;
+    const isCurrent = claimRequest();
+    store.loading.set(true);
+    store.error.set(null);
+    try {
+      const result = await getGoalAdvice(goalId);
+      if (!isCurrent()) return;
+      store.advice.set(result);
+    } catch (err) {
+      if (!isCurrent()) return;
+      console.error('Failed to load goal advice:', err);
+      store.error.set(err instanceof Error ? err.message : 'Failed to load advice');
+    } finally {
+      if (isCurrent()) store.loading.set(false);
+    }
+  }, [goalId, claimRequest, store]);
+
+  return {
+    history: history.data ?? NO_HISTORY,
+    historyLoading: history.loading,
+    historyError: history.error,
+    advice,
+    adviceLoading,
+    adviceError,
+    requestAdvice,
+  };
+}
diff --git a/web/app/src/hooks/useGoals.ts b/web/app/src/features/goals/useGoals.ts
similarity index 98%
rename from web/app/src/hooks/useGoals.ts
rename to web/app/src/features/goals/useGoals.ts
index 539ffcf8cea..2eece9c679c 100644
--- a/web/app/src/hooks/useGoals.ts
+++ b/web/app/src/features/goals/useGoals.ts
@@ -11,8 +11,8 @@ import {
   updateGoalProgress,
   type CreateGoalParams,
   type UpdateGoalParams,
-} from '@/lib/api';
-import { sortGoals } from '@/lib/goals';
+} from '@/features/goals/api';
+import { sortGoals } from '@/features/goals/goals';
 import type { Goal } from '@/types/goals';
 
 export interface UseGoalsReturn {
diff --git a/web/app/src/features/home/index.ts b/web/app/src/features/home/index.ts
new file mode 100644
index 00000000000..a410f01c724
--- /dev/null
+++ b/web/app/src/features/home/index.ts
@@ -0,0 +1 @@
+export { HomePage } from './ui/HomePage';
diff --git a/web/app/src/components/home/GoalCard.tsx b/web/app/src/features/home/ui/GoalCard.tsx
similarity index 98%
rename from web/app/src/components/home/GoalCard.tsx
rename to web/app/src/features/home/ui/GoalCard.tsx
index f55ec7f0d5c..171162cb8ea 100644
--- a/web/app/src/components/home/GoalCard.tsx
+++ b/web/app/src/features/home/ui/GoalCard.tsx
@@ -2,13 +2,13 @@
 
 import { useState } from 'react';
 import { Check, Lightbulb, Trash2 } from 'lucide-react';
-import { goalEmoji } from '@/lib/goalEmoji';
+import { goalEmoji } from '@/features/goals';
 import {
   isCompleted,
   progressColor,
   progressLabel,
   progressPct,
-} from '@/lib/goalVisuals';
+} from '@/features/goals';
 import type { Goal } from '@/types/goals';
 
 interface GoalCardProps {
diff --git a/web/app/src/components/home/GoalComposer.tsx b/web/app/src/features/home/ui/GoalComposer.tsx
similarity index 98%
rename from web/app/src/components/home/GoalComposer.tsx
rename to web/app/src/features/home/ui/GoalComposer.tsx
index 9668da3fca5..93c9e472225 100644
--- a/web/app/src/components/home/GoalComposer.tsx
+++ b/web/app/src/features/home/ui/GoalComposer.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
-import type { CreateGoalParams } from '@/lib/api';
+import type { CreateGoalParams } from '@/features/goals';
 
 interface GoalComposerProps {
   open: boolean;
diff --git a/web/app/src/components/home/GoalDetailSheet.tsx b/web/app/src/features/home/ui/GoalDetailSheet.tsx
similarity index 98%
rename from web/app/src/components/home/GoalDetailSheet.tsx
rename to web/app/src/features/home/ui/GoalDetailSheet.tsx
index 40b8131e2fd..7f87c82a847 100644
--- a/web/app/src/components/home/GoalDetailSheet.tsx
+++ b/web/app/src/features/home/ui/GoalDetailSheet.tsx
@@ -3,9 +3,9 @@
 import { useState } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { Sparkles, X } from 'lucide-react';
-import { useGoalDetail } from '@/hooks/useGoalDetail';
-import { formatMetricValue, historyDelta, progressLabel } from '@/lib/goals';
-import type { UpdateGoalParams } from '@/lib/api';
+import { useGoalDetail } from '@/features/goals';
+import { formatMetricValue, historyDelta, progressLabel } from '@/features/goals';
+import type { UpdateGoalParams } from '@/features/goals';
 import type { Goal } from '@/types/goals';
 import { GoalSparkline } from './GoalSparkline';
 
diff --git a/web/app/src/components/home/GoalSparkline.tsx b/web/app/src/features/home/ui/GoalSparkline.tsx
similarity index 95%
rename from web/app/src/components/home/GoalSparkline.tsx
rename to web/app/src/features/home/ui/GoalSparkline.tsx
index 88607e8ffca..2851b8ba01e 100644
--- a/web/app/src/components/home/GoalSparkline.tsx
+++ b/web/app/src/features/home/ui/GoalSparkline.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { sparklinePoints } from '@/lib/goals';
+import { sparklinePoints } from '@/features/goals';
 import type { GoalHistoryEntry } from '@/types/goals';
 
 const WIDTH = 280;
diff --git a/web/app/src/components/home/HomePage.tsx b/web/app/src/features/home/ui/HomePage.tsx
similarity index 96%
rename from web/app/src/components/home/HomePage.tsx
rename to web/app/src/features/home/ui/HomePage.tsx
index 41dfdc13436..8fbeb810b2c 100644
--- a/web/app/src/components/home/HomePage.tsx
+++ b/web/app/src/features/home/ui/HomePage.tsx
@@ -4,15 +4,15 @@ import { useEffect, useRef, useState } from 'react';
 import Image from '@tschk/moonshine-next/image';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Plus, Target } from 'lucide-react';
-import { useAuth } from '@/components/auth/AuthProvider';
-import { useChat as useChatContext } from '@/components/chat/ChatContext';
-import { useGoals } from '@/hooks/useGoals';
-import { useHomeTasks } from '@/hooks/useHomeTasks';
+import { useAuth } from '@/features/auth';
+import { useChat as useChatContext } from '@/features/chat';
+import { useGoals } from '@/features/goals';
+import { useHomeTasks } from '@/features/tasks';
 import { useScrollEdges } from '@/hooks/useScrollEdges';
-import { ChatComposer, type ChatComposerHandle } from '@/components/chat/ChatComposer';
-import { ChatTranscript } from '@/components/chat/ChatTranscript';
-import { RecordingStage } from '@/components/chat/RecordingStage';
-import { useGeminiLive } from '@/hooks/useGeminiLive';
+import { ChatComposer, type ChatComposerHandle } from '@/features/chat';
+import { ChatTranscript } from '@/features/chat';
+import { RecordingStage } from '@/features/chat';
+import { useGeminiLive } from '@/features/chat';
 import { GoalCard } from './GoalCard';
 import { GoalComposer } from './GoalComposer';
 import { GoalDetailSheet } from './GoalDetailSheet';
diff --git a/web/app/src/components/home/HomeTaskList.tsx b/web/app/src/features/home/ui/HomeTaskList.tsx
similarity index 100%
rename from web/app/src/components/home/HomeTaskList.tsx
rename to web/app/src/features/home/ui/HomeTaskList.tsx
diff --git a/web/app/src/components/home/__tests__/GoalCard.test.tsx b/web/app/src/features/home/ui/__tests__/GoalCard.test.tsx
similarity index 99%
rename from web/app/src/components/home/__tests__/GoalCard.test.tsx
rename to web/app/src/features/home/ui/__tests__/GoalCard.test.tsx
index adbba501777..40032b5d6b0 100644
--- a/web/app/src/components/home/__tests__/GoalCard.test.tsx
+++ b/web/app/src/features/home/ui/__tests__/GoalCard.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
-import { GoalCard } from '@/components/home/GoalCard';
+import { GoalCard } from '@/features/home/ui/GoalCard';
 import type { Goal } from '@/types/goals';
 
 function goal(overrides: Partial<Goal> = {}): Goal {
diff --git a/web/app/src/components/home/__tests__/GoalComposer.test.tsx b/web/app/src/features/home/ui/__tests__/GoalComposer.test.tsx
similarity index 98%
rename from web/app/src/components/home/__tests__/GoalComposer.test.tsx
rename to web/app/src/features/home/ui/__tests__/GoalComposer.test.tsx
index 91fde932f6d..e534a379d56 100644
--- a/web/app/src/components/home/__tests__/GoalComposer.test.tsx
+++ b/web/app/src/features/home/ui/__tests__/GoalComposer.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
-import { GoalComposer } from '@/components/home/GoalComposer';
+import { GoalComposer } from '@/features/home/ui/GoalComposer';
 
 function setup(onCreate = vi.fn().mockResolvedValue({ id: 'goal-1' })) {
   const onOpenChange = vi.fn();
diff --git a/web/app/src/components/home/__tests__/GoalDetailSheet.test.tsx b/web/app/src/features/home/ui/__tests__/GoalDetailSheet.test.tsx
similarity index 97%
rename from web/app/src/components/home/__tests__/GoalDetailSheet.test.tsx
rename to web/app/src/features/home/ui/__tests__/GoalDetailSheet.test.tsx
index a9f83cf2881..d527569c6b7 100644
--- a/web/app/src/components/home/__tests__/GoalDetailSheet.test.tsx
+++ b/web/app/src/features/home/ui/__tests__/GoalDetailSheet.test.tsx
@@ -1,15 +1,15 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { GoalDetailSheet } from '@/components/home/GoalDetailSheet';
+import { GoalDetailSheet } from '@/features/home/ui/GoalDetailSheet';
 import type { Goal } from '@/types/goals';
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/goals/api', () => ({
   getGoalHistory: vi.fn(),
   getGoalAdvice: vi.fn(),
 }));
 
-const api = await import('@/lib/api');
+const api = await import('@/features/goals/api');
 
 function goal(overrides: Partial<Goal> = {}): Goal {
   return {
diff --git a/web/app/src/components/home/__tests__/HomePage.test.tsx b/web/app/src/features/home/ui/__tests__/HomePage.test.tsx
similarity index 88%
rename from web/app/src/components/home/__tests__/HomePage.test.tsx
rename to web/app/src/features/home/ui/__tests__/HomePage.test.tsx
index 25ecd30d922..2ef38c05b94 100644
--- a/web/app/src/components/home/__tests__/HomePage.test.tsx
+++ b/web/app/src/features/home/ui/__tests__/HomePage.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { HomePage } from '@/components/home/HomePage';
+import { HomePage } from '@/features/home/ui/HomePage';
 import type { MessageFile } from '@/types/conversation';
 
 const sendMessage = vi.fn(async () => undefined);
@@ -11,10 +11,10 @@ const startLive = vi.fn(async () => undefined);
 vi.mock('@tschk/moonshine-next/image', () => ({
   default: ({ alt }: React.ComponentProps<'img'>) => <img alt={alt} />,
 }));
-vi.mock('@/components/auth/AuthProvider', () => ({
+vi.mock('@/features/auth', () => ({
   useAuth: () => ({ user: { displayName: 'Ada Lovelace' } }),
 }));
-vi.mock('@/components/chat/ChatContext', () => ({
+vi.mock('@/features/chat', () => ({
   useChat: () => ({
     selectedAppId: null,
     selectedChatSessionId: null,
@@ -43,8 +43,6 @@ vi.mock('@/components/chat/ChatContext', () => ({
       appendRealtimeExchange,
     },
   }),
-}));
-vi.mock('@/hooks/useGeminiLive', () => ({
   useGeminiLive: () => ({
     state: 'idle',
     segments: [],
@@ -56,8 +54,32 @@ vi.mock('@/hooks/useGeminiLive', () => ({
     resume: vi.fn(),
     stop: vi.fn(),
   }),
+  ChatTranscript: ({ messages }: { messages: Array<{ id: string }> }) => (
+    <div>
+      {messages.map((message) => (
+        <span key={message.id}>{message.id}</span>
+      ))}
+    </div>
+  ),
+  ChatComposer: ({
+    onSend,
+    recording,
+  }: {
+    onSend: (text: string, files: MessageFile[]) => void;
+    recording: { onStart: () => void };
+  }) => (
+    <>
+      <button type="button" onClick={() => onSend('New question', [])}>
+        Send test
+      </button>
+      <button type="button" onClick={recording.onStart}>
+        Start live test
+      </button>
+    </>
+  ),
+  RecordingStage: () => null,
 }));
-vi.mock('@/hooks/useGoals', () => ({
+vi.mock('@/features/goals', () => ({
   useGoals: () => ({
     goals: [{ id: 'goal-1', title: 'Keep the Home layout readable' }],
     loading: false,
@@ -68,10 +90,10 @@ vi.mock('@/hooks/useGoals', () => ({
     removeGoal: vi.fn(),
   }),
 }));
-vi.mock('@/components/home/GoalCard', () => ({
+vi.mock('@/features/home/ui/GoalCard', () => ({
   GoalCard: ({ goal }: { goal: { title: string } }) => <li>{goal.title}</li>,
 }));
-vi.mock('@/hooks/useHomeTasks', () => ({
+vi.mock('@/features/tasks', () => ({
   useHomeTasks: () => ({
     items: [{ id: 'task-1', description: 'Review the launch plan' }],
     loading: false,
@@ -85,36 +107,8 @@ vi.mock('@/hooks/useScrollEdges', () => ({
     edges: { atTop: true, atBottom: true },
   }),
 }));
-vi.mock('@/components/chat/ChatTranscript', () => ({
-  ChatTranscript: ({ messages }: { messages: Array<{ id: string }> }) => (
-    <div>
-      {messages.map((message) => (
-        <span key={message.id}>{message.id}</span>
-      ))}
-    </div>
-  ),
-}));
-vi.mock('@/components/chat/ChatComposer', () => ({
-  ChatComposer: ({
-    onSend,
-    recording,
-  }: {
-    onSend: (text: string, files: MessageFile[]) => void;
-    recording: { onStart: () => void };
-  }) => (
-    <>
-      <button type="button" onClick={() => onSend('New question', [])}>
-        Send test
-      </button>
-      <button type="button" onClick={recording.onStart}>
-        Start live test
-      </button>
-    </>
-  ),
-}));
-vi.mock('@/components/home/GoalComposer', () => ({ GoalComposer: () => null }));
-vi.mock('@/components/home/GoalDetailSheet', () => ({ GoalDetailSheet: () => null }));
-vi.mock('@/components/chat/RecordingStage', () => ({ RecordingStage: () => null }));
+vi.mock('@/features/home/ui/GoalComposer', () => ({ GoalComposer: () => null }));
+vi.mock('@/features/home/ui/GoalDetailSheet', () => ({ GoalDetailSheet: () => null }));
 
 beforeEach(() => {
   vi.clearAllMocks();
diff --git a/web/app/src/features/marketplace/ARCHITECTURE.md b/web/app/src/features/marketplace/ARCHITECTURE.md
new file mode 100644
index 00000000000..53413c6611d
--- /dev/null
+++ b/web/app/src/features/marketplace/ARCHITECTURE.md
@@ -0,0 +1,6 @@
+# marketplace
+
+Public `/apps` catalog (not the signed-in connectors destination).
+
+- `ui/` — list, category nav, plugin cards
+- `ui/category.ts` — category metadata for sitemap and pages
diff --git a/web/app/src/features/marketplace/index.ts b/web/app/src/features/marketplace/index.ts
new file mode 100644
index 00000000000..dcd15941980
--- /dev/null
+++ b/web/app/src/features/marketplace/index.ts
@@ -0,0 +1,9 @@
+export { default } from './ui/AppList';
+export { default as AppList } from './ui/AppList';
+export { PromoCard } from './ui/PromoCard';
+export { CompactPluginCard } from './ui/plugin-card/CompactPluginCard';
+export { FeaturedPluginCard } from './ui/plugin-card/FeaturedPluginCard';
+export { ScrollableCategoryNav } from './ui/ScrollableCategoryNav';
+export { CategoryBreadcrumb } from './ui/CategoryBreadcrumb';
+export { CategoryHeader } from './ui/CategoryHeader';
+export { getCategoryMetadata, categoryMetadata } from './ui/category';
diff --git a/web/app/src/components/marketplace/AppList.tsx b/web/app/src/features/marketplace/ui/AppList.tsx
similarity index 100%
rename from web/app/src/components/marketplace/AppList.tsx
rename to web/app/src/features/marketplace/ui/AppList.tsx
diff --git a/web/app/src/components/marketplace/CategoryBreadcrumb.tsx b/web/app/src/features/marketplace/ui/CategoryBreadcrumb.tsx
similarity index 100%
rename from web/app/src/components/marketplace/CategoryBreadcrumb.tsx
rename to web/app/src/features/marketplace/ui/CategoryBreadcrumb.tsx
diff --git a/web/app/src/components/marketplace/CategoryHeader.tsx b/web/app/src/features/marketplace/ui/CategoryHeader.tsx
similarity index 100%
rename from web/app/src/components/marketplace/CategoryHeader.tsx
rename to web/app/src/features/marketplace/ui/CategoryHeader.tsx
diff --git a/web/app/src/components/marketplace/DeveloperBanner.tsx b/web/app/src/features/marketplace/ui/DeveloperBanner.tsx
similarity index 100%
rename from web/app/src/components/marketplace/DeveloperBanner.tsx
rename to web/app/src/features/marketplace/ui/DeveloperBanner.tsx
diff --git a/web/app/src/components/marketplace/NewBadge.tsx b/web/app/src/features/marketplace/ui/NewBadge.tsx
similarity index 100%
rename from web/app/src/components/marketplace/NewBadge.tsx
rename to web/app/src/features/marketplace/ui/NewBadge.tsx
diff --git a/web/app/src/components/marketplace/PromoCard.tsx b/web/app/src/features/marketplace/ui/PromoCard.tsx
similarity index 98%
rename from web/app/src/components/marketplace/PromoCard.tsx
rename to web/app/src/features/marketplace/ui/PromoCard.tsx
index 644aee8f5df..ae54c2671b4 100644
--- a/web/app/src/components/marketplace/PromoCard.tsx
+++ b/web/app/src/features/marketplace/ui/PromoCard.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { X, Sparkles, LogIn } from 'lucide-react';
-import { useAuth } from '@/components/auth/AuthProvider';
+import { useAuth } from '@/features/auth';
 
 const STORAGE_KEY = 'omi-promo-dismissed';
 
diff --git a/web/app/src/components/marketplace/ScrollableCategoryNav.tsx b/web/app/src/features/marketplace/ui/ScrollableCategoryNav.tsx
similarity index 100%
rename from web/app/src/components/marketplace/ScrollableCategoryNav.tsx
rename to web/app/src/features/marketplace/ui/ScrollableCategoryNav.tsx
diff --git a/web/app/src/components/marketplace/SearchBar.tsx b/web/app/src/features/marketplace/ui/SearchBar.tsx
similarity index 100%
rename from web/app/src/components/marketplace/SearchBar.tsx
rename to web/app/src/features/marketplace/ui/SearchBar.tsx
diff --git a/web/app/src/components/marketplace/category.ts b/web/app/src/features/marketplace/ui/category.ts
similarity index 100%
rename from web/app/src/components/marketplace/category.ts
rename to web/app/src/features/marketplace/ui/category.ts
diff --git a/web/app/src/components/marketplace/plugin-card/CompactPluginCard.tsx b/web/app/src/features/marketplace/ui/plugin-card/CompactPluginCard.tsx
similarity index 100%
rename from web/app/src/components/marketplace/plugin-card/CompactPluginCard.tsx
rename to web/app/src/features/marketplace/ui/plugin-card/CompactPluginCard.tsx
diff --git a/web/app/src/components/marketplace/plugin-card/FeaturedPluginCard.tsx b/web/app/src/features/marketplace/ui/plugin-card/FeaturedPluginCard.tsx
similarity index 100%
rename from web/app/src/components/marketplace/plugin-card/FeaturedPluginCard.tsx
rename to web/app/src/features/marketplace/ui/plugin-card/FeaturedPluginCard.tsx
diff --git a/web/app/src/components/marketplace/types.ts b/web/app/src/features/marketplace/ui/types.ts
similarity index 100%
rename from web/app/src/components/marketplace/types.ts
rename to web/app/src/features/marketplace/ui/types.ts
diff --git a/web/app/src/components/marketplace/utils/format.ts b/web/app/src/features/marketplace/ui/utils/format.ts
similarity index 100%
rename from web/app/src/components/marketplace/utils/format.ts
rename to web/app/src/features/marketplace/ui/utils/format.ts
diff --git a/web/app/src/features/memories/ARCHITECTURE.md b/web/app/src/features/memories/ARCHITECTURE.md
new file mode 100644
index 00000000000..71cb029d6c9
--- /dev/null
+++ b/web/app/src/features/memories/ARCHITECTURE.md
@@ -0,0 +1,10 @@
+# memories
+
+Destination `/memories`. Product tiers: **INV-MEM-1** (`short_term`, `long_term`, `archive`).
+
+- `api.ts` — memory CRUD and knowledge graph
+- `memoryCategory.ts` / `memoryExport.ts` — pure helpers
+- `insights.worker.ts` — off-main-thread insights
+- `ui/` — list, filters, graph, dashboard
+- `useMemories.ts` — signal store; category filter, IndexedDB hydrate, and chunked bulk delete are unchanged (**INV-MEM-1**)
+- `useKnowledgeGraph.ts` / `useInsightsDashboard.ts` — signal stores; graph colors stay in the hook file (INV-UI-1 ratchet)
diff --git a/web/app/src/lib/__tests__/memoryCategory.test.ts b/web/app/src/features/memories/__tests__/memoryCategory.test.ts
similarity index 96%
rename from web/app/src/lib/__tests__/memoryCategory.test.ts
rename to web/app/src/features/memories/__tests__/memoryCategory.test.ts
index 8ae978e2604..adfc4b487e2 100644
--- a/web/app/src/lib/__tests__/memoryCategory.test.ts
+++ b/web/app/src/features/memories/__tests__/memoryCategory.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { categoryOf, matchesCategories } from '@/lib/memoryCategory';
+import { categoryOf, matchesCategories } from '@/features/memories/memoryCategory';
 import type { MemoryCategory } from '@/types/conversation';
 
 /**
diff --git a/web/app/src/features/memories/__tests__/useKnowledgeGraph.test.tsx b/web/app/src/features/memories/__tests__/useKnowledgeGraph.test.tsx
new file mode 100644
index 00000000000..e977072970b
--- /dev/null
+++ b/web/app/src/features/memories/__tests__/useKnowledgeGraph.test.tsx
@@ -0,0 +1,58 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { KnowledgeGraph } from '@/types/conversation';
+
+vi.mock('@/features/memories/api', () => ({
+  getKnowledgeGraph: vi.fn(),
+  rebuildKnowledgeGraph: vi.fn(),
+}));
+
+const api = await import('@/features/memories/api');
+const { useKnowledgeGraph } = await import('@/features/memories/useKnowledgeGraph');
+
+function graph(): KnowledgeGraph {
+  return {
+    nodes: [
+      {
+        id: 'n1',
+        label: 'Ada',
+        node_type: 'person',
+        aliases: [],
+        memory_ids: ['m1'],
+      },
+    ],
+    edges: [],
+  } as unknown as KnowledgeGraph;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+describe('useKnowledgeGraph', () => {
+  it('loads the graph and adds a center user node', async () => {
+    vi.mocked(api.getKnowledgeGraph).mockResolvedValue(graph());
+    const { result } = renderHook(() => useKnowledgeGraph());
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.graphData?.nodes.map((node) => node.id)).toEqual(['user', 'n1']);
+    expect(result.current.graphData?.links.some((link) => link.source === 'user')).toBe(
+      true,
+    );
+  });
+
+  it('selects a node without refetching', async () => {
+    vi.mocked(api.getKnowledgeGraph).mockResolvedValue(graph());
+    const { result } = renderHook(() => useKnowledgeGraph());
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    const node = result.current.graphData?.nodes[1] ?? null;
+    act(() => {
+      result.current.selectNode(node);
+    });
+
+    expect(result.current.selectedNode?.id).toBe('n1');
+    expect(api.getKnowledgeGraph).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/web/app/src/features/memories/__tests__/useMemories.test.tsx b/web/app/src/features/memories/__tests__/useMemories.test.tsx
new file mode 100644
index 00000000000..6e8e14187a1
--- /dev/null
+++ b/web/app/src/features/memories/__tests__/useMemories.test.tsx
@@ -0,0 +1,68 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Memory } from '@/types/conversation';
+import { clearAllCache } from '@/lib/cache';
+
+vi.mock('@/features/memories/api', () => ({
+  getMemories: vi.fn(),
+  createMemory: vi.fn(),
+  updateMemoryContent: vi.fn(),
+  updateMemoryVisibility: vi.fn(),
+  deleteMemory: vi.fn(),
+  deleteMemoriesBatch: vi.fn(),
+  reviewMemory: vi.fn(),
+}));
+
+vi.mock('@/lib/indexeddb', () => ({
+  getCachedMemories: vi.fn().mockResolvedValue(null),
+  cacheMemories: vi.fn().mockResolvedValue(undefined),
+}));
+
+const api = await import('@/features/memories/api');
+const { useMemories } = await import('@/features/memories/useMemories');
+
+function memory(overrides: Partial<Memory> = {}): Memory {
+  return {
+    id: 'm1',
+    uid: 'u1',
+    content: 'Remember this',
+    created_at: '2026-01-01T00:00:00Z',
+    updated_at: '2026-01-01T00:00:00Z',
+    layer: 'long_term',
+    ...overrides,
+  } as Memory;
+}
+
+async function renderLoaded(initial: Memory[] = [memory()]) {
+  vi.mocked(api.getMemories).mockResolvedValue(initial);
+  const view = renderHook(() => useMemories());
+  await waitFor(() => expect(view.result.current.loading).toBe(false));
+  return view;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  clearAllCache();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+describe('useMemories', () => {
+  it('loads memories on mount', async () => {
+    const { result } = await renderLoaded();
+    expect(result.current.memories.map((entry) => entry.id)).toEqual(['m1']);
+  });
+
+  it('rolls content back when an edit is rejected', async () => {
+    const { result } = await renderLoaded();
+    vi.mocked(api.updateMemoryContent).mockRejectedValue(new Error('conflict'));
+
+    let succeeded = true;
+    await act(async () => {
+      succeeded = await result.current.editMemory('m1', 'changed');
+    });
+
+    expect(succeeded).toBe(false);
+    expect(result.current.memories[0]?.content).toBe('Remember this');
+    expect(result.current.error).toBe('conflict');
+  });
+});
diff --git a/web/app/src/features/memories/api.ts b/web/app/src/features/memories/api.ts
new file mode 100644
index 00000000000..b2c39d169be
--- /dev/null
+++ b/web/app/src/features/memories/api.ts
@@ -0,0 +1,150 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+import {
+  invalidateCache,
+  invalidationPatterns,
+  fetchWithCache,
+  cacheKeys,
+  CACHE_TTL,
+} from '@/lib/cache';
+import {
+  API_BASE_URL,
+  fetchAuthorizedBlob,
+  fetchWithAuth,
+  getAudioAuthHeaders,
+} from '@/shared/api/client';
+import type {
+  Memory,
+  MemoryCategory,
+  MemoryVisibility,
+  KnowledgeGraph,
+} from '@/types/conversation';
+
+export interface GetMemoriesParams {
+  limit?: number;
+  offset?: number;
+  categories?: MemoryCategory[];
+}
+
+/**
+ * Read memories.
+ *
+ * Category selection is deliberately not a parameter: `/v3/memories` accepts
+ * limit, offset, cursor, and device scope only. Sending `categories` looked
+ * like a filter but FastAPI drops the unknown query param, so the server
+ * returned everything. Categories are applied client-side — see
+ * `@/features/memories/memoryCategory`, which mirrors how the desktop clients do it.
+ */
+export async function getMemories(params: GetMemoriesParams = {}): Promise<Memory[]> {
+  const { limit = 100, offset = 0 } = params;
+
+  const queryParams = new URLSearchParams({
+    limit: limit.toString(),
+    offset: offset.toString(),
+  });
+
+  return fetchWithAuth<Memory[]>(`/v3/memories?${queryParams}`);
+}
+
+/**
+ * Create a new memory
+ */
+export interface CreateMemoryParams {
+  content: string;
+  visibility?: MemoryVisibility;
+  category?: MemoryCategory;
+}
+
+export async function createMemory(params: CreateMemoryParams): Promise<Memory> {
+  const memory = await fetchWithAuth<Memory>('/v3/memories', {
+    method: 'POST',
+    body: JSON.stringify({
+      content: params.content,
+      visibility: params.visibility || 'public',
+      category: params.category || 'manual',
+    }),
+  });
+  invalidateCache(invalidationPatterns.memories);
+  return memory;
+}
+
+/**
+ * Update memory content
+ */
+export async function updateMemoryContent(id: string, content: string): Promise<void> {
+  const encodedValue = encodeURIComponent(content);
+  await fetchWithAuth(`/v3/memories/${id}?value=${encodedValue}`, {
+    method: 'PATCH',
+  });
+  invalidateCache(invalidationPatterns.memories);
+}
+
+/**
+ * Update memory visibility
+ */
+export async function updateMemoryVisibility(
+  id: string,
+  visibility: MemoryVisibility,
+): Promise<void> {
+  await fetchWithAuth(`/v3/memories/${id}/visibility?value=${visibility}`, {
+    method: 'PATCH',
+  });
+  invalidateCache(invalidationPatterns.memories);
+}
+
+/**
+ * Delete a memory
+ */
+export async function deleteMemory(id: string): Promise<void> {
+  await fetchWithAuth(`/v3/memories/${id}`, {
+    method: 'DELETE',
+  });
+  invalidateCache(invalidationPatterns.memories);
+}
+
+/**
+ * Delete multiple memories in a single batch request (up to 100 per call).
+ * Replaces N concurrent DELETE /v3/memories/{id} calls that triggered 429 rate limits.
+ */
+export async function deleteMemoriesBatch(ids: string[]): Promise<void> {
+  await fetchWithAuth(`/v3/memories/batch`, {
+    method: 'DELETE',
+    body: JSON.stringify({ memory_ids: ids }),
+  });
+  invalidateCache(invalidationPatterns.memories);
+}
+
+/**
+ * Review a memory (accept or reject)
+ */
+export async function reviewMemory(id: string, accept: boolean): Promise<void> {
+  await fetchWithAuth(`/v3/memories/${id}/review?value=${accept}`, {
+    method: 'POST',
+  });
+}
+
+// ============================================================================
+// Knowledge Graph API
+// ============================================================================
+
+/**
+ * Get knowledge graph data
+ */
+export async function getKnowledgeGraph(): Promise<KnowledgeGraph> {
+  return fetchWithAuth<KnowledgeGraph>('/v1/knowledge-graph');
+}
+
+/**
+ * Trigger knowledge graph rebuild
+ */
+export async function rebuildKnowledgeGraph(): Promise<void> {
+  await fetchWithAuth('/v1/knowledge-graph/rebuild', {
+    method: 'POST',
+  });
+}
+
+export async function deleteKnowledgeGraph(): Promise<void> {
+  await fetchWithAuth('/v1/knowledge-graph', {
+    method: 'DELETE',
+  });
+}
diff --git a/web/app/src/features/memories/index.ts b/web/app/src/features/memories/index.ts
new file mode 100644
index 00000000000..de5532c065d
--- /dev/null
+++ b/web/app/src/features/memories/index.ts
@@ -0,0 +1,6 @@
+export { MemoriesPage } from './ui/MemoriesPage';
+export { MemoriesPrefetcher } from './ui/MemoriesPrefetcher';
+export { useMemories } from './useMemories';
+export { matchesCategories } from './memoryCategory';
+export { copyMemoriesToClipboard, downloadMemories } from './memoryExport';
+export * from './api';
diff --git a/web/app/src/workers/insights.worker.ts b/web/app/src/features/memories/insights.worker.ts
similarity index 100%
rename from web/app/src/workers/insights.worker.ts
rename to web/app/src/features/memories/insights.worker.ts
diff --git a/web/app/src/lib/memoryCategory.ts b/web/app/src/features/memories/memoryCategory.ts
similarity index 100%
rename from web/app/src/lib/memoryCategory.ts
rename to web/app/src/features/memories/memoryCategory.ts
diff --git a/web/app/src/lib/memoryExport.ts b/web/app/src/features/memories/memoryExport.ts
similarity index 100%
rename from web/app/src/lib/memoryExport.ts
rename to web/app/src/features/memories/memoryExport.ts
diff --git a/web/app/src/components/memories/InsightsDashboard.tsx b/web/app/src/features/memories/ui/InsightsDashboard.tsx
similarity index 99%
rename from web/app/src/components/memories/InsightsDashboard.tsx
rename to web/app/src/features/memories/ui/InsightsDashboard.tsx
index 5b0c5eec1c9..2a14c27608b 100644
--- a/web/app/src/components/memories/InsightsDashboard.tsx
+++ b/web/app/src/features/memories/ui/InsightsDashboard.tsx
@@ -9,7 +9,7 @@ import {
   type TrendingTag,
   type ActivityDay,
   type UseInsightsDashboardReturn,
-} from '@/hooks/useInsightsDashboard';
+} from '@/features/memories/useInsightsDashboard';
 
 interface InsightsDashboardProps {
   insights: UseInsightsDashboardReturn;
diff --git a/web/app/src/components/memories/KnowledgeGraph.tsx b/web/app/src/features/memories/ui/KnowledgeGraph.tsx
similarity index 99%
rename from web/app/src/components/memories/KnowledgeGraph.tsx
rename to web/app/src/features/memories/ui/KnowledgeGraph.tsx
index 184d06dc8de..1a2f94a6802 100644
--- a/web/app/src/components/memories/KnowledgeGraph.tsx
+++ b/web/app/src/features/memories/ui/KnowledgeGraph.tsx
@@ -20,7 +20,7 @@ import {
   useKnowledgeGraph,
   NODE_COLORS,
   type GraphNode,
-} from '@/hooks/useKnowledgeGraph';
+} from '@/features/memories/useKnowledgeGraph';
 import type { KnowledgeGraphNodeType } from '@/types/conversation';
 import SpriteText from 'three-spritetext';
 
diff --git a/web/app/src/components/memories/MemoriesPage.tsx b/web/app/src/features/memories/ui/MemoriesPage.tsx
similarity index 98%
rename from web/app/src/components/memories/MemoriesPage.tsx
rename to web/app/src/features/memories/ui/MemoriesPage.tsx
index 3d98be65e24..528c7e20e26 100644
--- a/web/app/src/components/memories/MemoriesPage.tsx
+++ b/web/app/src/features/memories/ui/MemoriesPage.tsx
@@ -26,18 +26,18 @@ import {
   Sparkles,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { matchesCategories } from '@/lib/memoryCategory';
-import { useMemories } from '@/hooks/useMemories';
+import { matchesCategories } from '@/features/memories/memoryCategory';
+import { useMemories } from '@/features/memories/useMemories';
 import { MemoryList, MemoryListSkeleton } from './MemoryList';
 import { MemoryFilters } from './MemoryFilters';
 import { MemoryQuickAdd } from './MemoryQuickAdd';
 import { LifeBalanceChart, TrendingSidebar } from './InsightsDashboard';
-import { useInsightsDashboard } from '@/hooks/useInsightsDashboard';
-import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
+import { useInsightsDashboard } from '@/features/memories/useInsightsDashboard';
+import { ConfirmDialog } from '@/shared/ui/ConfirmDialog';
 import { PageToolbar } from '@/components/layout/PageToolbar';
-import { BulkActionBar } from '@/components/tasks/BulkActionBar';
-import { copyMemoriesToClipboard, downloadMemories } from '@/lib/memoryExport';
-import { useChat as useChatContext } from '@/components/chat/ChatContext';
+import { BulkActionBar } from '@/features/tasks';
+import { copyMemoriesToClipboard, downloadMemories } from '@/features/memories/memoryExport';
+import { useChat as useChatContext } from '@/features/chat';
 
 // Lazy load heavy components for better performance
 const KnowledgeGraph = lazy(() =>
diff --git a/web/app/src/components/memories/MemoriesPrefetcher.tsx b/web/app/src/features/memories/ui/MemoriesPrefetcher.tsx
similarity index 94%
rename from web/app/src/components/memories/MemoriesPrefetcher.tsx
rename to web/app/src/features/memories/ui/MemoriesPrefetcher.tsx
index 0e8d28eb1b8..b2ef4ed255a 100644
--- a/web/app/src/components/memories/MemoriesPrefetcher.tsx
+++ b/web/app/src/features/memories/ui/MemoriesPrefetcher.tsx
@@ -14,8 +14,8 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
-import { useAuth } from '@/components/auth/AuthProvider';
-import { getMemories } from '@/lib/api';
+import { useAuth } from '@/features/auth';
+import { getMemories } from '@/features/memories/api';
 import { cacheMemories, isCacheFresh } from '@/lib/indexeddb';
 
 export function MemoriesPrefetcher() {
diff --git a/web/app/src/components/memories/MemoryCard.tsx b/web/app/src/features/memories/ui/MemoryCard.tsx
similarity index 100%
rename from web/app/src/components/memories/MemoryCard.tsx
rename to web/app/src/features/memories/ui/MemoryCard.tsx
diff --git a/web/app/src/components/memories/MemoryFilters.tsx b/web/app/src/features/memories/ui/MemoryFilters.tsx
similarity index 100%
rename from web/app/src/components/memories/MemoryFilters.tsx
rename to web/app/src/features/memories/ui/MemoryFilters.tsx
diff --git a/web/app/src/components/memories/MemoryList.tsx b/web/app/src/features/memories/ui/MemoryList.tsx
similarity index 100%
rename from web/app/src/components/memories/MemoryList.tsx
rename to web/app/src/features/memories/ui/MemoryList.tsx
diff --git a/web/app/src/components/memories/MemoryQuickAdd.tsx b/web/app/src/features/memories/ui/MemoryQuickAdd.tsx
similarity index 100%
rename from web/app/src/components/memories/MemoryQuickAdd.tsx
rename to web/app/src/features/memories/ui/MemoryQuickAdd.tsx
diff --git a/web/app/src/components/memories/__tests__/MemoriesPage.test.tsx b/web/app/src/features/memories/ui/__tests__/MemoriesPage.test.tsx
similarity index 92%
rename from web/app/src/components/memories/__tests__/MemoriesPage.test.tsx
rename to web/app/src/features/memories/ui/__tests__/MemoriesPage.test.tsx
index 1e783eb5b2a..0b0d910a3ca 100644
--- a/web/app/src/components/memories/__tests__/MemoriesPage.test.tsx
+++ b/web/app/src/features/memories/ui/__tests__/MemoriesPage.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { MemoriesPage } from '@/components/memories/MemoriesPage';
+import { MemoriesPage } from '@/features/memories/ui/MemoriesPage';
 
 const mocks = vi.hoisted(() => ({
   loading: false,
@@ -45,7 +45,7 @@ vi.mock('framer-motion', async () => {
   };
 });
 
-vi.mock('@/hooks/useMemories', () => ({
+vi.mock('@/features/memories/useMemories', () => ({
   useMemories: () => ({
     memories: [],
     loading: mocks.loading,
@@ -64,7 +64,7 @@ vi.mock('@/hooks/useMemories', () => ({
   }),
 }));
 
-vi.mock('@/hooks/useInsightsDashboard', () => ({
+vi.mock('@/features/memories/useInsightsDashboard', () => ({
   useInsightsDashboard: () => ({
     lifeBalance: [],
     risingTags: [],
@@ -72,7 +72,7 @@ vi.mock('@/hooks/useInsightsDashboard', () => ({
   }),
 }));
 
-vi.mock('@/components/chat/ChatContext', () => ({
+vi.mock('@/features/chat', () => ({
   useChat: () => ({ setContext: vi.fn() }),
 }));
 
@@ -80,11 +80,11 @@ vi.mock('@/components/layout/PageToolbar', () => ({
   PageToolbar: () => <div data-testid="memories-toolbar" />,
 }));
 
-vi.mock('@/components/memories/MemoryQuickAdd', () => ({
+vi.mock('@/features/memories/ui/MemoryQuickAdd', () => ({
   MemoryQuickAdd: () => <div data-testid="memory-quick-add" />,
 }));
 
-vi.mock('@/components/memories/MemoryList', () => ({
+vi.mock('@/features/memories/ui/MemoryList', () => ({
   MemoryList: ({ hasMore }: { hasMore: boolean }) => (
     <div data-testid="memory-list" data-has-more={hasMore} />
   ),
diff --git a/web/app/src/components/memories/__tests__/MemoryCard.test.tsx b/web/app/src/features/memories/ui/__tests__/MemoryCard.test.tsx
similarity index 97%
rename from web/app/src/components/memories/__tests__/MemoryCard.test.tsx
rename to web/app/src/features/memories/ui/__tests__/MemoryCard.test.tsx
index c11f0a424eb..252c4c195c7 100644
--- a/web/app/src/components/memories/__tests__/MemoryCard.test.tsx
+++ b/web/app/src/features/memories/ui/__tests__/MemoryCard.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { MemoryCard } from '@/components/memories/MemoryCard';
+import { MemoryCard } from '@/features/memories/ui/MemoryCard';
 import type { Memory } from '@/types/conversation';
 
 const memory = {
diff --git a/web/app/src/components/memories/__tests__/MemoryList.test.tsx b/web/app/src/features/memories/ui/__tests__/MemoryList.test.tsx
similarity index 96%
rename from web/app/src/components/memories/__tests__/MemoryList.test.tsx
rename to web/app/src/features/memories/ui/__tests__/MemoryList.test.tsx
index 03e6c42be27..12366d981b4 100644
--- a/web/app/src/components/memories/__tests__/MemoryList.test.tsx
+++ b/web/app/src/features/memories/ui/__tests__/MemoryList.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import type { Memory } from '@/types/conversation';
-import { MemoryList, MemoryListSkeleton } from '@/components/memories/MemoryList';
+import { MemoryList, MemoryListSkeleton } from '@/features/memories/ui/MemoryList';
 
 vi.mock('@tanstack/react-virtual', () => ({
   useVirtualizer: () => ({
diff --git a/web/app/src/hooks/useInsightsDashboard.ts b/web/app/src/features/memories/useInsightsDashboard.ts
similarity index 83%
rename from web/app/src/hooks/useInsightsDashboard.ts
rename to web/app/src/features/memories/useInsightsDashboard.ts
index 272d0142aff..739e80db1b7 100644
--- a/web/app/src/hooks/useInsightsDashboard.ts
+++ b/web/app/src/features/memories/useInsightsDashboard.ts
@@ -1,6 +1,8 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
 import type { Memory } from '@/types/conversation';
 
 // Re-export types and constants for external use
@@ -204,18 +206,25 @@ export interface UseInsightsDashboardReturn {
  * - Only processes first 100 memories (reduces computation time)
  * - Returns loading state for smooth UX
  */
+const EMPTY_INSIGHTS: Omit<UseInsightsDashboardReturn, 'computing'> = {
+  summary: null,
+  lifeBalance: [],
+  risingTags: [],
+  fadingTags: [],
+  activityCalendar: [],
+  dayOfWeekPattern: [],
+  hourPattern: [],
+  allTags: [],
+};
+
+export function createInsightsDashboardStore() {
+  const insights = createSignal(EMPTY_INSIGHTS);
+  const computing = createSignal(false);
+  return { insights, computing };
+}
+
 export function useInsightsDashboard(memories: Memory[]): UseInsightsDashboardReturn {
-  const [insights, setInsights] = useState<Omit<UseInsightsDashboardReturn, 'computing'>>({
-    summary: null,
-    lifeBalance: [],
-    risingTags: [],
-    fadingTags: [],
-    activityCalendar: [],
-    dayOfWeekPattern: [],
-    hourPattern: [],
-    allTags: [],
-  });
-  const [computing, setComputing] = useState(false);
+  const store = useMemo(() => createInsightsDashboardStore(), []);
   const workerRef = useRef<Worker | null>(null);
   const memoriesLengthRef = useRef(0);
 
@@ -231,17 +240,8 @@ export function useInsightsDashboard(memories: Memory[]): UseInsightsDashboardRe
     if (!memories || memories.length === 0) {
       // Only update if we previously had memories
       if (memoriesLengthRef.current > 0) {
-        setInsights({
-          summary: null,
-          lifeBalance: [],
-          risingTags: [],
-          fadingTags: [],
-          activityCalendar: [],
-          dayOfWeekPattern: [],
-          hourPattern: [],
-          allTags: [],
-        });
-        setComputing(false);
+        store.insights.set(EMPTY_INSIGHTS);
+        store.computing.set(false);
         memoriesLengthRef.current = 0;
       }
       prevKeyRef.current = memoriesKey;
@@ -261,9 +261,9 @@ export function useInsightsDashboard(memories: Memory[]): UseInsightsDashboardRe
     memoriesLengthRef.current = memories.length;
 
     // Create worker
-    setComputing(true);
+    store.computing.set(true);
 
-    const worker = new Worker(new URL('../workers/insights.worker.ts', import.meta.url), {
+    const worker = new Worker(new URL('./insights.worker.ts', import.meta.url), {
       type: 'module',
     });
 
@@ -277,17 +277,17 @@ export function useInsightsDashboard(memories: Memory[]): UseInsightsDashboardRe
       const { type, insights: computedInsights, error } = e.data;
 
       if (type === 'result') {
-        setInsights(computedInsights);
-        setComputing(false);
+        store.insights.set(computedInsights);
+        store.computing.set(false);
       } else if (type === 'error') {
         console.error('Worker error:', error);
-        setComputing(false);
+        store.computing.set(false);
       }
     };
 
     worker.onerror = (error) => {
       console.error('Worker error:', error);
-      setComputing(false);
+      store.computing.set(false);
     };
 
     // Cleanup
@@ -295,7 +295,10 @@ export function useInsightsDashboard(memories: Memory[]): UseInsightsDashboardRe
       worker.terminate();
       workerRef.current = null;
     };
-  }, [memoriesKey]);
+  }, [memoriesKey, store]);
+
+  const insights = useSignalValue(store.insights);
+  const computing = useSignalValue(store.computing);
 
   return {
     ...insights,
diff --git a/web/app/src/features/memories/useKnowledgeGraph.ts b/web/app/src/features/memories/useKnowledgeGraph.ts
new file mode 100644
index 00000000000..0245c302a65
--- /dev/null
+++ b/web/app/src/features/memories/useKnowledgeGraph.ts
@@ -0,0 +1,212 @@
+'use client';
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
+import type { KnowledgeGraph, KnowledgeGraphNodeType } from '@/types/conversation';
+import { getKnowledgeGraph, rebuildKnowledgeGraph } from '@/features/memories/api';
+
+export const NODE_COLORS: Record<KnowledgeGraphNodeType | 'user', string> = {
+  person: '#00FFFF',
+  place: '#00FF9D',
+  organization: '#FFA500',
+  thing: '#A855F7',
+  concept: '#3B82F6',
+  user: '#FFFFFF',
+};
+
+export interface GraphData {
+  nodes: GraphNode[];
+  links: GraphLink[];
+}
+
+export interface GraphNode {
+  id: string;
+  label: string;
+  nodeType: KnowledgeGraphNodeType | 'user';
+  color: string;
+  aliases: string[];
+  memoryIds: string[];
+  val: number;
+  x?: number;
+  y?: number;
+  z?: number;
+}
+
+export interface GraphLink {
+  id: string;
+  source: string;
+  target: string;
+  label: string;
+  memoryIds: string[];
+}
+
+export interface UseKnowledgeGraphReturn {
+  graphData: GraphData | null;
+  loading: boolean;
+  error: string | null;
+  rebuilding: boolean;
+  selectedNode: GraphNode | null;
+  refresh: () => Promise<void>;
+  rebuild: () => Promise<void>;
+  selectNode: (node: GraphNode | null) => void;
+  getNodeById: (id: string) => GraphNode | undefined;
+  getConnectedNodes: (nodeId: string) => GraphNode[];
+  getNodeMemoryCount: (nodeId: string) => number;
+}
+
+function toGraphData(rawData: KnowledgeGraph): GraphData {
+  const userNode: GraphNode = {
+    id: 'user',
+    label: 'You',
+    nodeType: 'user',
+    color: '#FFFFFF',
+    aliases: [],
+    memoryIds: [],
+    val: 40,
+  };
+
+  const nodes: GraphNode[] = [
+    userNode,
+    ...rawData.nodes.map(
+      (node): GraphNode => ({
+        id: node.id,
+        label: node.label,
+        nodeType: node.node_type,
+        color: NODE_COLORS[node.node_type] || NODE_COLORS.thing,
+        aliases: node.aliases,
+        memoryIds: node.memory_ids,
+        val: Math.max(3, Math.min(10, node.memory_ids.length * 2)),
+      }),
+    ),
+  ];
+
+  const links: GraphLink[] = rawData.edges.map((edge): GraphLink => ({
+    id: edge.id,
+    source: edge.source_id,
+    target: edge.target_id,
+    label: edge.label,
+    memoryIds: edge.memory_ids,
+  }));
+
+  const nodesWithConnections = new Set(links.flatMap((l) => [l.source, l.target]));
+
+  rawData.nodes.forEach((node) => {
+    if (!nodesWithConnections.has(node.id)) {
+      links.push({
+        id: `user-${node.id}`,
+        source: 'user',
+        target: node.id,
+        label: 'related to',
+        memoryIds: node.memory_ids,
+      });
+    }
+  });
+
+  return { nodes, links };
+}
+
+export function createKnowledgeGraphStore() {
+  const rawData = createSignal<KnowledgeGraph | null>(null);
+  const loading = createSignal(true);
+  const error = createSignal<string | null>(null);
+  const rebuilding = createSignal(false);
+  const selectedNode = createSignal<GraphNode | null>(null);
+
+  const load = async () => {
+    loading.set(true);
+    error.set(null);
+    try {
+      rawData.set(await getKnowledgeGraph());
+    } catch (err) {
+      error.set(err instanceof Error ? err.message : 'Failed to load knowledge graph');
+    } finally {
+      loading.set(false);
+    }
+  };
+
+  const rebuild = async () => {
+    rebuilding.set(true);
+    error.set(null);
+    try {
+      await rebuildKnowledgeGraph();
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      await load();
+    } catch (err) {
+      error.set(err instanceof Error ? err.message : 'Failed to rebuild knowledge graph');
+    } finally {
+      rebuilding.set(false);
+    }
+  };
+
+  return { rawData, loading, error, rebuilding, selectedNode, load, rebuild };
+}
+
+export function useKnowledgeGraph(): UseKnowledgeGraphReturn {
+  const store = useMemo(() => createKnowledgeGraphStore(), []);
+
+  useEffect(() => {
+    void store.load();
+  }, [store]);
+
+  const rawData = useSignalValue(store.rawData);
+  const loading = useSignalValue(store.loading);
+  const error = useSignalValue(store.error);
+  const rebuilding = useSignalValue(store.rebuilding);
+  const selectedNode = useSignalValue(store.selectedNode);
+
+  const graphData = useMemo(() => (rawData ? toGraphData(rawData) : null), [rawData]);
+
+  const getNodeById = useCallback(
+    (id: string): GraphNode | undefined => graphData?.nodes.find((n) => n.id === id),
+    [graphData],
+  );
+
+  const getConnectedNodes = useCallback(
+    (nodeId: string): GraphNode[] => {
+      if (!graphData) return [];
+
+      const connectedIds = new Set<string>();
+      graphData.links.forEach((link) => {
+        if (
+          link.source === nodeId ||
+          (typeof link.source === 'object' && (link.source as GraphNode).id === nodeId)
+        ) {
+          const targetId =
+            typeof link.target === 'object' ? (link.target as GraphNode).id : link.target;
+          connectedIds.add(targetId);
+        }
+        if (
+          link.target === nodeId ||
+          (typeof link.target === 'object' && (link.target as GraphNode).id === nodeId)
+        ) {
+          const sourceId =
+            typeof link.source === 'object' ? (link.source as GraphNode).id : link.source;
+          connectedIds.add(sourceId);
+        }
+      });
+
+      return graphData.nodes.filter((n) => connectedIds.has(n.id));
+    },
+    [graphData],
+  );
+
+  const getNodeMemoryCount = useCallback(
+    (nodeId: string): number => getNodeById(nodeId)?.memoryIds.length || 0,
+    [getNodeById],
+  );
+
+  return {
+    graphData,
+    loading,
+    error,
+    rebuilding,
+    selectedNode,
+    refresh: useCallback(() => store.load(), [store]),
+    rebuild: useCallback(() => store.rebuild(), [store]),
+    selectNode: useCallback((node: GraphNode | null) => store.selectedNode.set(node), [store]),
+    getNodeById,
+    getConnectedNodes,
+    getNodeMemoryCount,
+  };
+}
diff --git a/web/app/src/features/memories/useMemories.ts b/web/app/src/features/memories/useMemories.ts
new file mode 100644
index 00000000000..bad41c8980e
--- /dev/null
+++ b/web/app/src/features/memories/useMemories.ts
@@ -0,0 +1,556 @@
+'use client';
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
+import type { Memory, MemoryCategory, MemoryVisibility } from '@/types/conversation';
+import {
+  getMemories,
+  createMemory,
+  updateMemoryContent,
+  updateMemoryVisibility,
+  deleteMemory,
+  deleteMemoriesBatch,
+  reviewMemory,
+} from '@/features/memories/api';
+import {
+  getCache,
+  setCache,
+  updateCache,
+  onCacheInvalidation,
+  invalidationPatterns,
+  CACHE_TTL,
+  cacheKeys,
+} from '@/lib/cache';
+import { getCachedMemories, cacheMemories } from '@/lib/indexeddb';
+
+export interface UseMemoriesOptions {
+  categories?: MemoryCategory[];
+  limit?: number;
+}
+
+/** Outcome of a chunked bulk delete. */
+export interface RemoveMemoriesResult {
+  /** Whether every chunk succeeded. */
+  success: boolean;
+  /** IDs confirmed deleted across successful chunks (empty unless chunks ran). */
+  deletedIds: string[];
+}
+
+export interface UseMemoriesReturn {
+  memories: Memory[];
+  loading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  loadMore: () => Promise<void>;
+  refresh: () => Promise<void>;
+  addMemory: (content: string, visibility?: MemoryVisibility) => Promise<Memory | null>;
+  editMemory: (id: string, content: string) => Promise<boolean>;
+  removeMemory: (id: string) => Promise<boolean>;
+  removeMemories: (ids: string[]) => Promise<RemoveMemoriesResult>;
+  toggleVisibility: (id: string, visibility: MemoryVisibility) => Promise<boolean>;
+  acceptMemory: (id: string) => Promise<boolean>;
+  rejectMemory: (id: string) => Promise<boolean>;
+  setCategories: (categories: MemoryCategory[]) => void;
+  activeCategories: MemoryCategory[];
+}
+
+interface CacheEntry {
+  memories: Memory[];
+  offset: number;
+  hasMore: boolean;
+}
+
+function getCacheKey(categories: MemoryCategory[]): string {
+  return cacheKeys.memories(categories.length === 0 ? [] : [...categories].sort());
+}
+
+function getFromCache(key: string): CacheEntry | null {
+  const cached = getCache<CacheEntry>(key);
+  return cached ? cached.data : null;
+}
+
+function setToCache(
+  key: string,
+  memories: Memory[],
+  offset: number,
+  hasMore: boolean,
+): void {
+  setCache<CacheEntry>(key, { memories, offset, hasMore }, CACHE_TTL.MEDIUM);
+}
+
+function updateCacheMemories(
+  key: string,
+  updater: (memories: Memory[]) => Memory[],
+): void {
+  updateCache<CacheEntry>(key, (entry) => ({
+    ...entry,
+    memories: updater(entry.memories),
+  }));
+}
+
+function isCacheStale(key: string): boolean {
+  const cached = getCache<CacheEntry>(key);
+  return cached ? cached.isStale : true;
+}
+
+function messageFor(err: unknown, fallback: string): string {
+  return err instanceof Error ? err.message : fallback;
+}
+
+export function createMemoriesStore(limit: number, initialCategories: MemoryCategory[]) {
+  const initialKey = getCacheKey(initialCategories);
+  const cachedEntry = getFromCache(initialKey);
+
+  const memories = createSignal<Memory[]>(cachedEntry?.memories ?? []);
+  const loading = createSignal(!cachedEntry);
+  const error = createSignal<string | null>(null);
+  const hasMore = createSignal(cachedEntry?.hasMore ?? true);
+  const activeCategories = createSignal<MemoryCategory[]>(initialCategories);
+  let offset = cachedEntry?.offset ?? 0;
+  let fetching = false;
+  let initialized = false;
+  const mutationTails = new Map<string, Promise<void>>();
+
+  const enqueueMutation = <T>(id: string, mutation: () => Promise<T>): Promise<T> => {
+    const previous = mutationTails.get(id);
+    const result = previous ? previous.then(mutation) : mutation();
+    const tail = result.then(
+      () => undefined,
+      () => undefined,
+    );
+    mutationTails.set(id, tail);
+    void tail.then(() => {
+      if (mutationTails.get(id) === tail) mutationTails.delete(id);
+    });
+    return result;
+  };
+
+  const cacheKey = () => getCacheKey(activeCategories.peek());
+
+  const persistList = (list: Memory[], nextOffset: number, nextHasMore: boolean) => {
+    setToCache(cacheKey(), list, nextOffset, nextHasMore);
+  };
+
+  const applyAndCache = (updater: (prev: Memory[]) => Memory[]) => {
+    const updated = updater(memories.peek());
+    memories.set(updated);
+    updateCacheMemories(cacheKey(), updater);
+  };
+
+  const doFetch = async (
+    categories: MemoryCategory[],
+    currentOffset: number,
+  ): Promise<Memory[]> => {
+    return getMemories({
+      limit,
+      offset: currentOffset,
+      categories: categories.length > 0 ? categories : undefined,
+    });
+  };
+
+  const loadInitial = async () => {
+    if (initialized) return;
+    initialized = true;
+
+    const categories = activeCategories.peek();
+    const key = getCacheKey(categories);
+    const cached = getFromCache(key);
+
+    if (cached && !isCacheStale(key)) {
+      memories.set(cached.memories);
+      hasMore.set(cached.hasMore);
+      offset = cached.offset;
+      loading.set(false);
+      return;
+    }
+
+    if (cached) {
+      memories.set(cached.memories);
+      hasMore.set(cached.hasMore);
+      offset = cached.offset;
+      loading.set(false);
+    }
+
+    if (fetching) return;
+    fetching = true;
+
+    if (!cached) {
+      const indexedDBMemories = await getCachedMemories();
+      if (indexedDBMemories && indexedDBMemories.length > 0) {
+        console.log('[useMemories] Loaded from IndexedDB');
+        memories.set(indexedDBMemories);
+        offset = indexedDBMemories.length;
+        hasMore.set(indexedDBMemories.length >= limit);
+        setToCache(
+          key,
+          indexedDBMemories,
+          indexedDBMemories.length,
+          indexedDBMemories.length >= limit,
+        );
+        loading.set(false);
+      } else {
+        loading.set(true);
+      }
+    } else {
+      loading.set(false);
+    }
+
+    error.set(null);
+
+    try {
+      const result = await doFetch(categories, 0);
+      memories.set(result);
+      offset = result.length;
+      hasMore.set(result.length >= limit);
+      setToCache(key, result, result.length, result.length >= limit);
+      await cacheMemories(result);
+    } catch (err) {
+      let hasAnyCachedData = !!cached;
+      if (!hasAnyCachedData) {
+        try {
+          const indexedDbMemories = await getCachedMemories();
+          hasAnyCachedData = !!indexedDbMemories;
+        } catch {
+          // If reading from IndexedDB fails, don't mask the original error
+        }
+      }
+
+      const baseMessage = messageFor(err, 'Failed to load memories');
+      if (hasAnyCachedData) {
+        error.set(`${baseMessage} (showing cached data)`);
+      } else {
+        error.set(baseMessage);
+      }
+    } finally {
+      loading.set(false);
+      fetching = false;
+    }
+  };
+
+  const loadForCategories = async () => {
+    const categories = activeCategories.peek();
+    const key = getCacheKey(categories);
+    const cached = getFromCache(key);
+
+    if (cached) {
+      memories.set(cached.memories);
+      hasMore.set(cached.hasMore);
+      offset = cached.offset;
+      if (!isCacheStale(key)) {
+        return;
+      }
+    }
+
+    if (fetching) return;
+    fetching = true;
+    if (!cached) {
+      loading.set(true);
+    }
+    error.set(null);
+
+    try {
+      const result = await doFetch(categories, 0);
+      memories.set(result);
+      offset = result.length;
+      hasMore.set(result.length >= limit);
+      setToCache(key, result, result.length, result.length >= limit);
+    } catch (err) {
+      if (!cached) {
+        error.set(messageFor(err, 'Failed to load memories'));
+      }
+    } finally {
+      loading.set(false);
+      fetching = false;
+    }
+  };
+
+  const reloadAfterInvalidation = async () => {
+    if (fetching) return;
+    fetching = true;
+    const categories = activeCategories.peek();
+    const key = getCacheKey(categories);
+    try {
+      const result = await doFetch(categories, 0);
+      memories.set(result);
+      offset = result.length;
+      hasMore.set(result.length >= limit);
+      setToCache(key, result, result.length, result.length >= limit);
+    } catch (err) {
+      console.error('Failed to refresh memories after invalidation:', err);
+    } finally {
+      fetching = false;
+    }
+  };
+
+  const loadMore = async () => {
+    if (fetching || !hasMore.peek()) return;
+    fetching = true;
+    loading.set(true);
+    const categories = activeCategories.peek();
+    const key = getCacheKey(categories);
+
+    try {
+      const result = await doFetch(categories, offset);
+      const existingIds = new Set(memories.peek().map((m) => m.id));
+      const newMemories = result.filter((m) => !existingIds.has(m.id));
+      const updated = [...memories.peek(), ...newMemories];
+      memories.set(updated);
+      offset += result.length;
+      const nextHasMore = result.length >= limit;
+      hasMore.set(nextHasMore);
+      setToCache(key, updated, offset, nextHasMore);
+    } catch (err) {
+      error.set(messageFor(err, 'Failed to load more memories'));
+    } finally {
+      loading.set(false);
+      fetching = false;
+    }
+  };
+
+  const refresh = async () => {
+    if (fetching) return;
+    fetching = true;
+    loading.set(true);
+    error.set(null);
+    const categories = activeCategories.peek();
+    const key = getCacheKey(categories);
+
+    try {
+      const result = await doFetch(categories, 0);
+      memories.set(result);
+      offset = result.length;
+      hasMore.set(result.length >= limit);
+      setToCache(key, result, result.length, result.length >= limit);
+    } catch (err) {
+      error.set(messageFor(err, 'Failed to refresh memories'));
+    } finally {
+      loading.set(false);
+      fetching = false;
+    }
+  };
+
+  const setCategories = (categories: MemoryCategory[]) => {
+    const previous = JSON.stringify(activeCategories.peek());
+    const next = JSON.stringify(categories);
+    if (previous === next) return;
+    activeCategories.set(categories);
+    offset = 0;
+    void loadForCategories();
+  };
+
+  const addMemory = async (
+    content: string,
+    visibility: MemoryVisibility = 'public',
+  ): Promise<Memory | null> => {
+    try {
+      const newMemory = await createMemory({ content, visibility, category: 'manual' });
+      applyAndCache((prev) => [newMemory, ...prev]);
+      error.set(null);
+      return newMemory;
+    } catch (err) {
+      error.set(messageFor(err, 'Failed to create memory'));
+      return null;
+    }
+  };
+
+  const editMemory = (id: string, content: string): Promise<boolean> =>
+    enqueueMutation(id, async () => {
+      const previous = memories.peek().find((m) => m.id === id);
+      applyAndCache((prev) =>
+        prev.map((m) =>
+          m.id === id
+            ? { ...m, content, edited: true, updated_at: new Date().toISOString() }
+            : m,
+        ),
+      );
+
+      try {
+        await updateMemoryContent(id, content);
+        error.set(null);
+        return true;
+      } catch (err) {
+        if (previous) {
+          applyAndCache((prev) => prev.map((m) => (m.id === id ? previous : m)));
+        }
+        error.set(messageFor(err, 'Failed to update memory'));
+        return false;
+      }
+    });
+
+  const removeMemory = (id: string): Promise<boolean> =>
+    enqueueMutation(id, async () => {
+      const previous = memories.peek();
+      applyAndCache((prev) => prev.filter((m) => m.id !== id));
+
+      try {
+        await deleteMemory(id);
+        error.set(null);
+        return true;
+      } catch (err) {
+        memories.set(previous);
+        updateCacheMemories(cacheKey(), () => previous);
+        error.set(messageFor(err, 'Failed to delete memory'));
+        return false;
+      }
+    });
+
+  const removeMemories = async (ids: string[]): Promise<RemoveMemoriesResult> => {
+    if (ids.length === 0) return { success: true, deletedIds: [] };
+    const CHUNK_SIZE = 100;
+    const deletedIds: string[] = [];
+    try {
+      for (let i = 0; i < ids.length; i += CHUNK_SIZE) {
+        const chunk = ids.slice(i, i + CHUNK_SIZE);
+        await deleteMemoriesBatch(chunk);
+        deletedIds.push(...chunk);
+        const removed = new Set(chunk);
+        applyAndCache((prev) => prev.filter((m) => !removed.has(m.id)));
+      }
+      return { success: true, deletedIds };
+    } catch (err) {
+      error.set(messageFor(err, 'Failed to delete memories'));
+      return { success: false, deletedIds };
+    }
+  };
+
+  const toggleVisibility = (id: string, visibility: MemoryVisibility): Promise<boolean> =>
+    enqueueMutation(id, async () => {
+      const previous = memories.peek().find((m) => m.id === id);
+      applyAndCache((prev) =>
+        prev.map((m) =>
+          m.id === id ? { ...m, visibility, updated_at: new Date().toISOString() } : m,
+        ),
+      );
+
+      try {
+        await updateMemoryVisibility(id, visibility);
+        error.set(null);
+        return true;
+      } catch (err) {
+        if (previous) {
+          applyAndCache((prev) => prev.map((m) => (m.id === id ? previous : m)));
+        }
+        error.set(messageFor(err, 'Failed to update visibility'));
+        return false;
+      }
+    });
+
+  const acceptMemory = (id: string): Promise<boolean> =>
+    enqueueMutation(id, async () => {
+      const previous = memories.peek().find((m) => m.id === id);
+      applyAndCache((prev) =>
+        prev.map((m) => (m.id === id ? { ...m, reviewed: true, user_review: true } : m)),
+      );
+
+      try {
+        await reviewMemory(id, true);
+        error.set(null);
+        return true;
+      } catch (err) {
+        if (previous) {
+          applyAndCache((prev) => prev.map((m) => (m.id === id ? previous : m)));
+        }
+        error.set(messageFor(err, 'Failed to accept memory'));
+        return false;
+      }
+    });
+
+  const rejectMemory = (id: string): Promise<boolean> =>
+    enqueueMutation(id, async () => {
+      const previous = memories.peek();
+      applyAndCache((prev) => prev.filter((m) => m.id !== id));
+
+      try {
+        await reviewMemory(id, false);
+        error.set(null);
+        return true;
+      } catch (err) {
+        memories.set(previous);
+        updateCacheMemories(cacheKey(), () => previous);
+        error.set(messageFor(err, 'Failed to reject memory'));
+        return false;
+      }
+    });
+
+  return {
+    memories,
+    loading,
+    error,
+    hasMore,
+    activeCategories,
+    loadInitial,
+    loadMore,
+    refresh,
+    reloadAfterInvalidation,
+    setCategories,
+    addMemory,
+    editMemory,
+    removeMemory,
+    removeMemories,
+    toggleVisibility,
+    acceptMemory,
+    rejectMemory,
+  };
+}
+
+export function useMemories(options: UseMemoriesOptions = {}): UseMemoriesReturn {
+  const { limit = 25 } = options;
+  const initialCategories = options.categories || [];
+  const categoriesKey = JSON.stringify(initialCategories);
+
+  const store = useMemo(
+    () => createMemoriesStore(limit, initialCategories),
+    // Only recreate when the caller-supplied filter identity changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [limit, categoriesKey],
+  );
+
+  useEffect(() => {
+    void store.loadInitial();
+  }, [store]);
+
+  useEffect(() => {
+    return onCacheInvalidation((pattern) => {
+      if (pattern === invalidationPatterns.memories) {
+        void store.reloadAfterInvalidation();
+      }
+    });
+  }, [store]);
+
+  const memoriesList = useSignalValue(store.memories);
+  const loading = useSignalValue(store.loading);
+  const error = useSignalValue(store.error);
+  const hasMore = useSignalValue(store.hasMore);
+  const activeCategories = useSignalValue(store.activeCategories);
+
+  return {
+    memories: memoriesList,
+    loading,
+    error,
+    hasMore,
+    loadMore: useCallback(() => store.loadMore(), [store]),
+    refresh: useCallback(() => store.refresh(), [store]),
+    addMemory: useCallback(
+      (content: string, visibility?: MemoryVisibility) => store.addMemory(content, visibility),
+      [store],
+    ),
+    editMemory: useCallback(
+      (id: string, content: string) => store.editMemory(id, content),
+      [store],
+    ),
+    removeMemory: useCallback((id: string) => store.removeMemory(id), [store]),
+    removeMemories: useCallback((ids: string[]) => store.removeMemories(ids), [store]),
+    toggleVisibility: useCallback(
+      (id: string, visibility: MemoryVisibility) => store.toggleVisibility(id, visibility),
+      [store],
+    ),
+    acceptMemory: useCallback((id: string) => store.acceptMemory(id), [store]),
+    rejectMemory: useCallback((id: string) => store.rejectMemory(id), [store]),
+    setCategories: useCallback(
+      (categories: MemoryCategory[]) => store.setCategories(categories),
+      [store],
+    ),
+    activeCategories,
+  };
+}
diff --git a/web/app/src/features/notifications/__tests__/notificationRoute.test.ts b/web/app/src/features/notifications/__tests__/notificationRoute.test.ts
new file mode 100644
index 00000000000..4086f37c44f
--- /dev/null
+++ b/web/app/src/features/notifications/__tests__/notificationRoute.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { getNotificationRoute } from '@/features/notifications/model';
+import type { OmiNotification } from '@/types/notification';
+
+function notification(navigate_to?: string): OmiNotification {
+  return {
+    id: 'n1',
+    type: 'announcement',
+    title: 't',
+    body: 'b',
+    timestamp: '2026-01-01T00:00:00Z',
+    read: false,
+    navigate_to,
+  };
+}
+
+describe('getNotificationRoute', () => {
+  it('sends recaps to the conversations timeline', () => {
+    expect(getNotificationRoute(notification('/daily-summary/r1'))).toBe(
+      '/conversations?recap=r1',
+    );
+    expect(getNotificationRoute(notification('/recaps/r2'))).toBe(
+      '/conversations?recap=r2',
+    );
+  });
+
+  it('opens chat capability notifications on home', () => {
+    expect(getNotificationRoute(notification('/chat/app-9'))).toBe('/home?chatApp=app-9');
+  });
+
+  it('falls back to home when there is no target', () => {
+    expect(getNotificationRoute(notification())).toBe('/');
+  });
+});
diff --git a/web/app/src/features/notifications/api.ts b/web/app/src/features/notifications/api.ts
new file mode 100644
index 00000000000..b105b9c0183
--- /dev/null
+++ b/web/app/src/features/notifications/api.ts
@@ -0,0 +1,57 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+import {
+  invalidateCache,
+  invalidationPatterns,
+  fetchWithCache,
+  cacheKeys,
+  CACHE_TTL,
+} from '@/lib/cache';
+import {
+  API_BASE_URL,
+  fetchAuthorizedBlob,
+  fetchWithAuth,
+  getAudioAuthHeaders,
+} from '@/shared/api/client';
+export async function registerFCMToken(fcmToken: string): Promise<void> {
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const deviceIdHash = await getWebDeviceIdHash();
+  if (!deviceIdHash) return;
+
+  await fetchWithAuth('/v1/users/fcm-token', {
+    method: 'POST',
+    headers: {
+      'X-App-Platform': 'web',
+      'X-Device-Id-Hash': deviceIdHash,
+    },
+    body: JSON.stringify({
+      fcm_token: fcmToken,
+      time_zone: timeZone,
+    }),
+  });
+}
+
+/**
+ * Unregister FCM token (called on sign out)
+ * @param fcmToken - The FCM registration token to remove
+ */
+export async function unregisterFCMToken(fcmToken: string): Promise<void> {
+  try {
+    const deviceIdHash = await getWebDeviceIdHash();
+    if (!deviceIdHash) return;
+
+    await fetchWithAuth('/v1/users/fcm-token', {
+      method: 'DELETE',
+      headers: {
+        'X-App-Platform': 'web',
+        'X-Device-Id-Hash': deviceIdHash,
+      },
+      body: JSON.stringify({
+        fcm_token: fcmToken,
+      }),
+    });
+  } catch (error) {
+    // Silently fail on logout - token cleanup is best-effort
+    console.warn('Failed to unregister FCM token:', error);
+  }
+}
diff --git a/web/app/src/features/notifications/index.ts b/web/app/src/features/notifications/index.ts
new file mode 100644
index 00000000000..267667ef55a
--- /dev/null
+++ b/web/app/src/features/notifications/index.ts
@@ -0,0 +1,5 @@
+export { NotificationProvider, useNotificationContext } from './ui/NotificationContext';
+export { NotificationCenter } from './ui/NotificationCenter';
+export { NotificationPermissionBanner } from './ui/NotificationPermissionBanner';
+export { getNotificationRoute } from './model';
+export * from './api';
diff --git a/web/app/src/features/notifications/model.ts b/web/app/src/features/notifications/model.ts
new file mode 100644
index 00000000000..1062c9bf237
--- /dev/null
+++ b/web/app/src/features/notifications/model.ts
@@ -0,0 +1,42 @@
+import type { OmiNotification } from '@/types/notification';
+
+/**
+ * In-app path for a notification's `navigate_to`. Recaps land on Timeline
+ * (`/conversations?recap=`): `/recaps` was removed, not redirected.
+ */
+export function getNotificationRoute(notification: OmiNotification): string {
+  const navigateTo = notification.navigate_to;
+
+  if (!navigateTo) return '/';
+
+  if (navigateTo.startsWith('/tasks')) {
+    const taskId = navigateTo.split('/').pop();
+    return taskId ? `/tasks?highlight=${taskId}` : '/tasks';
+  }
+
+  if (navigateTo.startsWith('/daily-summary')) {
+    const recapId = navigateTo.split('/').pop();
+    return recapId ? `/conversations?recap=${recapId}` : '/conversations';
+  }
+
+  if (navigateTo.startsWith('/recaps')) {
+    const recapId = navigateTo.split('/').pop();
+    return recapId ? `/conversations?recap=${recapId}` : '/conversations';
+  }
+
+  if (navigateTo.startsWith('/conversations')) {
+    return navigateTo.replace('/conversations', '/conversations');
+  }
+
+  if (navigateTo.startsWith('/apps')) {
+    const appId = navigateTo.split('/').pop();
+    return appId ? `/apps?id=${appId}` : '/apps';
+  }
+
+  if (navigateTo.startsWith('/chat/')) {
+    const appId = navigateTo.split('/').pop();
+    return appId ? `/home?chatApp=${appId}` : '/home';
+  }
+
+  return navigateTo;
+}
diff --git a/web/app/src/components/notifications/NotificationCenter.tsx b/web/app/src/features/notifications/ui/NotificationCenter.tsx
similarity index 100%
rename from web/app/src/components/notifications/NotificationCenter.tsx
rename to web/app/src/features/notifications/ui/NotificationCenter.tsx
diff --git a/web/app/src/components/notifications/NotificationContext.tsx b/web/app/src/features/notifications/ui/NotificationContext.tsx
similarity index 94%
rename from web/app/src/components/notifications/NotificationContext.tsx
rename to web/app/src/features/notifications/ui/NotificationContext.tsx
index db8dd31d710..39d629d84c2 100644
--- a/web/app/src/components/notifications/NotificationContext.tsx
+++ b/web/app/src/features/notifications/ui/NotificationContext.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { createContext, useContext, useState, useCallback, useEffect, useMemo, ReactNode } from 'react';
-import { useNotifications, UseNotificationsReturn } from '@/hooks/useNotifications';
-import { getInstalledApps, type App } from '@/lib/api';
+import { useNotifications, UseNotificationsReturn } from '@/features/notifications/useNotifications';
+import { getInstalledApps, type App } from '@/features/connectors';
 import type { OmiNotification } from '@/types/notification';
 
 interface NotificationContextType extends UseNotificationsReturn {
diff --git a/web/app/src/components/notifications/NotificationItem.tsx b/web/app/src/features/notifications/ui/NotificationItem.tsx
similarity index 100%
rename from web/app/src/components/notifications/NotificationItem.tsx
rename to web/app/src/features/notifications/ui/NotificationItem.tsx
diff --git a/web/app/src/components/notifications/NotificationPermissionBanner.tsx b/web/app/src/features/notifications/ui/NotificationPermissionBanner.tsx
similarity index 100%
rename from web/app/src/components/notifications/NotificationPermissionBanner.tsx
rename to web/app/src/features/notifications/ui/NotificationPermissionBanner.tsx
diff --git a/web/app/src/hooks/useNotifications.ts b/web/app/src/features/notifications/useNotifications.ts
similarity index 52%
rename from web/app/src/hooks/useNotifications.ts
rename to web/app/src/features/notifications/useNotifications.ts
index 5e3ef3911df..ba9652e87bd 100644
--- a/web/app/src/hooks/useNotifications.ts
+++ b/web/app/src/features/notifications/useNotifications.ts
@@ -1,7 +1,9 @@
 'use client';
 
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { createSignal } from '@tschk/moonshine';
 import { useRouter } from '@tschk/moonshine-next/navigation';
+import { useSignalValue } from '@/lib/signals';
 import type {
   OmiNotification,
   NotificationType,
@@ -13,17 +15,14 @@ import {
   onForegroundMessage,
   getNotificationPermission,
 } from '@/lib/firebase';
-import { registerFCMToken, unregisterFCMToken } from '@/lib/api';
+import { registerFCMToken, unregisterFCMToken } from '@/features/notifications/api';
+import { getNotificationRoute } from '@/features/notifications/model';
 import type { MessagePayload } from 'firebase/messaging';
 
-// Constants
 const STORAGE_KEY = 'omi-notifications';
 const MAX_NOTIFICATIONS = 100;
 const FCM_TOKEN_KEY = 'omi-fcm-token';
 
-/**
- * Load notifications from localStorage
- */
 function loadNotifications(): OmiNotification[] {
   if (typeof window === 'undefined') return [];
 
@@ -36,14 +35,10 @@ function loadNotifications(): OmiNotification[] {
   }
 }
 
-/**
- * Save notifications to localStorage
- */
 function saveNotifications(notifications: OmiNotification[]): void {
   if (typeof window === 'undefined') return;
 
   try {
-    // Limit to max notifications
     const trimmed = notifications.slice(0, MAX_NOTIFICATIONS);
     localStorage.setItem(STORAGE_KEY, JSON.stringify(trimmed));
   } catch (error) {
@@ -51,17 +46,11 @@ function saveNotifications(notifications: OmiNotification[]): void {
   }
 }
 
-/**
- * Get stored FCM token
- */
 function getStoredFCMToken(): string | null {
   if (typeof window === 'undefined') return null;
   return localStorage.getItem(FCM_TOKEN_KEY);
 }
 
-/**
- * Store FCM token
- */
 function storeFCMToken(token: string | null): void {
   if (typeof window === 'undefined') return;
 
@@ -72,9 +61,6 @@ function storeFCMToken(token: string | null): void {
   }
 }
 
-/**
- * Convert FCM payload to OmiNotification
- */
 function payloadToNotification(payload: MessagePayload): OmiNotification {
   const data = payload.data || {};
   const notification = payload.notification || {};
@@ -91,105 +77,89 @@ function payloadToNotification(payload: MessagePayload): OmiNotification {
   };
 }
 
-/**
- * Get the route for a notification based on its type and navigate_to value
- */
-function getNotificationRoute(notification: OmiNotification): string {
-  const navigateTo = notification.navigate_to;
-
-  if (!navigateTo) return '/';
-
-  // Handle different notification types and their routes
-  if (navigateTo.startsWith('/tasks')) {
-    const taskId = navigateTo.split('/').pop();
-    return taskId ? `/tasks?highlight=${taskId}` : '/tasks';
-  }
-
-  // Recaps merged into Timeline: a recap is a tile in the day it summarises.
-  if (navigateTo.startsWith('/daily-summary')) {
-    const recapId = navigateTo.split('/').pop();
-    return recapId ? `/conversations?recap=${recapId}` : '/conversations';
-  }
-
-  if (navigateTo.startsWith('/recaps')) {
-    const recapId = navigateTo.split('/').pop();
-    return recapId ? `/conversations?recap=${recapId}` : '/conversations';
-  }
-
-  if (navigateTo.startsWith('/conversations')) {
-    return navigateTo.replace('/conversations', '/conversations');
-  }
-
-  if (navigateTo.startsWith('/apps')) {
-    const appId = navigateTo.split('/').pop();
-    return appId ? `/apps?id=${appId}` : '/apps';
-  }
-
-  // Handle /chat/{app_id} routes - use query param for capability-aware routing
-  // MainLayout's ChatAppRouter will check if app has chat capability:
-  // - If yes: open chat panel with that app
-  // - If no: open notification center (notification-only apps like Bitcoin)
-  if (navigateTo.startsWith('/chat/')) {
-    const appId = navigateTo.split('/').pop();
-    return appId ? `/home?chatApp=${appId}` : '/home';
-  }
-
-  return navigateTo;
-}
-
 export interface UseNotificationsReturn {
-  // State
   notifications: OmiNotification[];
   unreadCount: number;
   permission: NotificationPermissionStatus;
   isSupported: boolean;
   isLoading: boolean;
   fcmToken: string | null;
-
-  // Actions
   requestPermission: () => Promise<boolean>;
   markAsRead: (notificationId: string) => void;
   markAllAsRead: () => void;
   clearNotification: (notificationId: string) => void;
   clearAllNotifications: () => void;
-
-  // Navigation
   navigateToNotification: (notification: OmiNotification) => void;
-
-  // Cleanup
   unregisterToken: () => Promise<void>;
-
-  // Debug - send a test notification to verify UI works
   sendTestNotification: () => void;
 }
 
-/**
- * Hook for managing notifications
- */
+export function createNotificationsStore() {
+  const notifications = createSignal<OmiNotification[]>(loadNotifications());
+  const permission = createSignal<NotificationPermissionStatus>('default');
+  const isSupported = createSignal(false);
+  const isLoading = createSignal(true);
+  const fcmToken = createSignal<string | null>(null);
+
+  const commit = (next: OmiNotification[]) => {
+    const trimmed = next.slice(0, MAX_NOTIFICATIONS);
+    notifications.set(trimmed);
+    saveNotifications(trimmed);
+  };
+
+  const prepend = (notification: OmiNotification) => {
+    commit([notification, ...notifications.peek()]);
+  };
+
+  const markAsRead = (notificationId: string) => {
+    commit(
+      notifications.peek().map((n) => (n.id === notificationId ? { ...n, read: true } : n)),
+    );
+  };
+
+  const markAllAsRead = () => {
+    commit(notifications.peek().map((n) => ({ ...n, read: true })));
+  };
+
+  const clearNotification = (notificationId: string) => {
+    commit(notifications.peek().filter((n) => n.id !== notificationId));
+  };
+
+  const clearAll = () => {
+    commit([]);
+  };
+
+  return {
+    notifications,
+    permission,
+    isSupported,
+    isLoading,
+    fcmToken,
+    prepend,
+    markAsRead,
+    markAllAsRead,
+    clearNotification,
+    clearAll,
+  };
+}
+
 export function useNotifications(): UseNotificationsReturn {
   const router = useRouter();
-  const [notifications, setNotifications] = useState<OmiNotification[]>([]);
-  const [permission, setPermission] = useState<NotificationPermissionStatus>('default');
-  const [isSupported, setIsSupported] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [fcmToken, setFcmToken] = useState<string | null>(null);
+  const store = useMemo(() => createNotificationsStore(), []);
   const unsubscribeRef = useRef<(() => void) | null>(null);
 
-  // Calculate unread count
+  const notifications = useSignalValue(store.notifications);
+  const permission = useSignalValue(store.permission);
+  const isSupported = useSignalValue(store.isSupported);
+  const isLoading = useSignalValue(store.isLoading);
+  const fcmToken = useSignalValue(store.fcmToken);
   const unreadCount = notifications.filter((n) => !n.read).length;
 
-  // Handle foreground message (defined before useEffect that uses it)
   const handleForegroundMessage = useCallback(
     (payload: MessagePayload) => {
       const notification = payloadToNotification(payload);
+      store.prepend(notification);
 
-      setNotifications((prev) => {
-        const updated = [notification, ...prev].slice(0, MAX_NOTIFICATIONS);
-        saveNotifications(updated);
-        return updated;
-      });
-
-      // Show browser notification for foreground messages
       if (Notification.permission === 'granted') {
         const browserNotif = new Notification(notification.title, {
           body: notification.body,
@@ -199,47 +169,36 @@ export function useNotifications(): UseNotificationsReturn {
 
         browserNotif.onclick = () => {
           window.focus();
-          const route = getNotificationRoute(notification);
-          router.push(route);
+          router.push(getNotificationRoute(notification));
           browserNotif.close();
         };
       }
     },
-    [router],
+    [router, store],
   );
 
-  // Initialize on mount
   useEffect(() => {
     async function init() {
-      setIsLoading(true);
-
-      // Load stored notifications
-      const stored = loadNotifications();
-      setNotifications(stored);
+      store.isLoading.set(true);
+      store.notifications.set(loadNotifications());
 
-      // Check basic browser support (without triggering Firebase initialization)
       const hasNotificationSupport =
         typeof window !== 'undefined' &&
         'Notification' in window &&
         'serviceWorker' in navigator;
-      setIsSupported(hasNotificationSupport);
+      store.isSupported.set(hasNotificationSupport);
 
-      // Get current permission status
       const perm = getNotificationPermission();
-      setPermission(perm);
+      store.permission.set(perm);
 
-      // Only try to get token if permission already granted
-      // This will initialize the service worker and messaging
       if (perm === 'granted' && hasNotificationSupport) {
         try {
-          // Get stored token BEFORE getting new one to compare
           const storedToken = getStoredFCMToken();
           const token = await getCurrentFCMToken();
 
           if (token) {
-            setFcmToken(token);
+            store.fcmToken.set(token);
 
-            // Register with backend if token changed or first time
             if (token !== storedToken) {
               try {
                 await registerFCMToken(token);
@@ -249,7 +208,6 @@ export function useNotifications(): UseNotificationsReturn {
               }
             }
 
-            // Subscribe to foreground messages
             const unsubscribe = await onForegroundMessage(handleForegroundMessage);
             if (unsubscribe) {
               unsubscribeRef.current = unsubscribe;
@@ -260,117 +218,73 @@ export function useNotifications(): UseNotificationsReturn {
         }
       }
 
-      setIsLoading(false);
+      store.isLoading.set(false);
     }
 
-    init();
+    void init();
 
     return () => {
       if (unsubscribeRef.current) {
         unsubscribeRef.current();
       }
     };
-  }, [handleForegroundMessage]);
+  }, [handleForegroundMessage, store]);
 
-  // Request notification permission
   const requestPermissionHandler = useCallback(async (): Promise<boolean> => {
-    if (!isSupported) return false;
+    if (!store.isSupported.peek()) return false;
 
-    setIsLoading(true);
+    store.isLoading.set(true);
 
     try {
       const token = await requestNotificationPermission();
 
       if (token) {
-        setFcmToken(token);
+        store.fcmToken.set(token);
         storeFCMToken(token);
-        setPermission('granted');
-
-        // Register token with backend
+        store.permission.set('granted');
         await registerFCMToken(token);
 
-        // Subscribe to foreground messages
         const unsubscribe = await onForegroundMessage(handleForegroundMessage);
         if (unsubscribe) {
           unsubscribeRef.current = unsubscribe;
         }
 
-        setIsLoading(false);
+        store.isLoading.set(false);
         return true;
-      } else {
-        // Permission was denied
-        setPermission(getNotificationPermission());
-        setIsLoading(false);
-        return false;
       }
+
+      store.permission.set(getNotificationPermission());
+      store.isLoading.set(false);
+      return false;
     } catch (error) {
       console.error('Failed to request notification permission:', error);
-      setIsLoading(false);
+      store.isLoading.set(false);
       return false;
     }
-  }, [isSupported, handleForegroundMessage]);
-
-  // Mark notification as read
-  const markAsRead = useCallback((notificationId: string) => {
-    setNotifications((prev) => {
-      const updated = prev.map((n) =>
-        n.id === notificationId ? { ...n, read: true } : n,
-      );
-      saveNotifications(updated);
-      return updated;
-    });
-  }, []);
-
-  // Mark all as read
-  const markAllAsRead = useCallback(() => {
-    setNotifications((prev) => {
-      const updated = prev.map((n) => ({ ...n, read: true }));
-      saveNotifications(updated);
-      return updated;
-    });
-  }, []);
-
-  // Clear a notification
-  const clearNotification = useCallback((notificationId: string) => {
-    setNotifications((prev) => {
-      const updated = prev.filter((n) => n.id !== notificationId);
-      saveNotifications(updated);
-      return updated;
-    });
-  }, []);
-
-  // Clear all notifications
-  const clearAllNotifications = useCallback(() => {
-    setNotifications([]);
-    saveNotifications([]);
-  }, []);
-
-  // Navigate to notification
+  }, [handleForegroundMessage, store]);
+
   const navigateToNotification = useCallback(
     (notification: OmiNotification) => {
-      markAsRead(notification.id);
-      const route = getNotificationRoute(notification);
-      router.push(route);
+      store.markAsRead(notification.id);
+      router.push(getNotificationRoute(notification));
     },
-    [router, markAsRead],
+    [router, store],
   );
 
-  // Unregister token (for logout)
   const unregisterToken = useCallback(async () => {
-    const token = fcmToken || getStoredFCMToken();
+    const token = store.fcmToken.peek() || getStoredFCMToken();
     if (token) {
       await unregisterFCMToken(token);
       storeFCMToken(null);
-      setFcmToken(null);
+      store.fcmToken.set(null);
     }
 
     if (unsubscribeRef.current) {
       unsubscribeRef.current();
       unsubscribeRef.current = null;
     }
-  }, [fcmToken]);
+  }, [store]);
 
-  // Send a test notification (for debugging)
   const sendTestNotification = useCallback(() => {
     const testNotification: OmiNotification = {
       id: `test-${Date.now()}`,
@@ -381,13 +295,8 @@ export function useNotifications(): UseNotificationsReturn {
       read: false,
     };
 
-    setNotifications((prev) => {
-      const updated = [testNotification, ...prev].slice(0, MAX_NOTIFICATIONS);
-      saveNotifications(updated);
-      return updated;
-    });
+    store.prepend(testNotification);
 
-    // Also show a browser notification
     if (Notification.permission === 'granted') {
       const browserNotif = new Notification(testNotification.title, {
         body: testNotification.body,
@@ -400,7 +309,7 @@ export function useNotifications(): UseNotificationsReturn {
         browserNotif.close();
       };
     }
-  }, []);
+  }, [store]);
 
   return {
     notifications,
@@ -410,10 +319,10 @@ export function useNotifications(): UseNotificationsReturn {
     isLoading,
     fcmToken,
     requestPermission: requestPermissionHandler,
-    markAsRead,
-    markAllAsRead,
-    clearNotification,
-    clearAllNotifications,
+    markAsRead: useCallback((id: string) => store.markAsRead(id), [store]),
+    markAllAsRead: useCallback(() => store.markAllAsRead(), [store]),
+    clearNotification: useCallback((id: string) => store.clearNotification(id), [store]),
+    clearAllNotifications: useCallback(() => store.clearAll(), [store]),
     navigateToNotification,
     unregisterToken,
     sendTestNotification,
diff --git a/web/app/src/features/recording/ARCHITECTURE.md b/web/app/src/features/recording/ARCHITECTURE.md
new file mode 100644
index 00000000000..2c482b357f8
--- /dev/null
+++ b/web/app/src/features/recording/ARCHITECTURE.md
@@ -0,0 +1,6 @@
+# recording
+
+Live capture. Used from `/home` composer and `/record` popout.
+
+- `ui/` — context, controller, widget, transcript, header indicator
+- `useRecording.ts` — capture + websocket; conversation finalize lives in `features/conversations`
diff --git a/web/app/src/features/recording/index.ts b/web/app/src/features/recording/index.ts
new file mode 100644
index 00000000000..ff175365d12
--- /dev/null
+++ b/web/app/src/features/recording/index.ts
@@ -0,0 +1,9 @@
+export { RecordingProvider, useRecordingContext } from './ui/RecordingContext';
+export type { AudioMode, RecordingState, TranscriptSegment } from './ui/RecordingContext';
+export { RecordingController } from './ui/RecordingController';
+export { RecordingWidget } from './ui/RecordingWidget';
+export { AudioModeSelector } from './ui/AudioModeSelector';
+export { RecordingControls } from './ui/RecordingControls';
+export { LiveTranscript, LiveTranscriptCompact } from './ui/LiveTranscript';
+export { HeaderRecordingIndicator } from './ui/HeaderRecordingIndicator';
+export { useRecording } from './useRecording';
diff --git a/web/app/src/components/recording/AudioModeSelector.tsx b/web/app/src/features/recording/ui/AudioModeSelector.tsx
similarity index 100%
rename from web/app/src/components/recording/AudioModeSelector.tsx
rename to web/app/src/features/recording/ui/AudioModeSelector.tsx
diff --git a/web/app/src/components/recording/HeaderRecordingIndicator.tsx b/web/app/src/features/recording/ui/HeaderRecordingIndicator.tsx
similarity index 99%
rename from web/app/src/components/recording/HeaderRecordingIndicator.tsx
rename to web/app/src/features/recording/ui/HeaderRecordingIndicator.tsx
index a5a7d622a55..b1b5425c3fd 100644
--- a/web/app/src/components/recording/HeaderRecordingIndicator.tsx
+++ b/web/app/src/features/recording/ui/HeaderRecordingIndicator.tsx
@@ -19,8 +19,8 @@ import { useRecordingContext } from './RecordingContext';
 import type { AudioMode } from './RecordingContext';
 import { LiveTranscriptCompact } from './LiveTranscript';
 import { openRecordingWidget, openTranscriptWindow } from '@/lib/popout';
-import { useNotificationContext } from '@/components/notifications/NotificationContext';
-import { useChat } from '@/components/chat/ChatContext';
+import { useNotificationContext } from '@/features/notifications';
+import { useChat } from '@/features/chat';
 import { cn } from '@/lib/utils';
 import {
   getRecordControlRightOffset,
diff --git a/web/app/src/components/recording/LiveTranscript.tsx b/web/app/src/features/recording/ui/LiveTranscript.tsx
similarity index 100%
rename from web/app/src/components/recording/LiveTranscript.tsx
rename to web/app/src/features/recording/ui/LiveTranscript.tsx
diff --git a/web/app/src/components/recording/RecordingContext.tsx b/web/app/src/features/recording/ui/RecordingContext.tsx
similarity index 100%
rename from web/app/src/components/recording/RecordingContext.tsx
rename to web/app/src/features/recording/ui/RecordingContext.tsx
diff --git a/web/app/src/components/recording/RecordingController.tsx b/web/app/src/features/recording/ui/RecordingController.tsx
similarity index 97%
rename from web/app/src/components/recording/RecordingController.tsx
rename to web/app/src/features/recording/ui/RecordingController.tsx
index 1d59bdf1938..43ad0051ec1 100644
--- a/web/app/src/components/recording/RecordingController.tsx
+++ b/web/app/src/features/recording/ui/RecordingController.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
-import { useRecording } from '@/hooks/useRecording';
+import { useRecording } from '@/features/recording/useRecording';
 import { useRecordingContext } from './RecordingContext';
 import {
   createRecordingChannel,
diff --git a/web/app/src/components/recording/RecordingControls.tsx b/web/app/src/features/recording/ui/RecordingControls.tsx
similarity index 100%
rename from web/app/src/components/recording/RecordingControls.tsx
rename to web/app/src/features/recording/ui/RecordingControls.tsx
diff --git a/web/app/src/components/recording/RecordingWidget.tsx b/web/app/src/features/recording/ui/RecordingWidget.tsx
similarity index 99%
rename from web/app/src/components/recording/RecordingWidget.tsx
rename to web/app/src/features/recording/ui/RecordingWidget.tsx
index edde449ccaa..6b4495e0012 100644
--- a/web/app/src/components/recording/RecordingWidget.tsx
+++ b/web/app/src/features/recording/ui/RecordingWidget.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Mic, X, ChevronUp, ChevronDown, AlertCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useRecording } from '@/hooks/useRecording';
+import { useRecording } from '@/features/recording/useRecording';
 import { AudioModeSelector } from './AudioModeSelector';
 import { RecordingControls } from './RecordingControls';
 import { LiveTranscriptCompact } from './LiveTranscript';
diff --git a/web/app/src/components/recording/__tests__/HeaderRecordingIndicator.test.ts b/web/app/src/features/recording/ui/__tests__/HeaderRecordingIndicator.test.ts
similarity index 100%
rename from web/app/src/components/recording/__tests__/HeaderRecordingIndicator.test.ts
rename to web/app/src/features/recording/ui/__tests__/HeaderRecordingIndicator.test.ts
diff --git a/web/app/src/components/recording/__tests__/RecordingController.test.tsx b/web/app/src/features/recording/ui/__tests__/RecordingController.test.tsx
similarity index 93%
rename from web/app/src/components/recording/__tests__/RecordingController.test.tsx
rename to web/app/src/features/recording/ui/__tests__/RecordingController.test.tsx
index 42498613728..db878275e16 100644
--- a/web/app/src/components/recording/__tests__/RecordingController.test.tsx
+++ b/web/app/src/features/recording/ui/__tests__/RecordingController.test.tsx
@@ -1,10 +1,10 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { RecordingController } from '@/components/recording/RecordingController';
+import { RecordingController } from '@/features/recording/ui/RecordingController';
 import {
   RecordingProvider,
   useRecordingContext,
-} from '@/components/recording/RecordingContext';
+} from '@/features/recording/ui/RecordingContext';
 
 const doubles = vi.hoisted(() => ({
   capture: {
@@ -48,8 +48,10 @@ vi.mock('@/lib/transcriptionSocket', () => ({
   }),
 }));
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/settings', () => ({
   getTranscriptionPreferences: vi.fn().mockResolvedValue({ language: 'en' }),
+}));
+vi.mock('@/features/conversations', () => ({
   processInProgressConversation: vi.fn().mockResolvedValue(undefined),
   finalizeConversationById: doubles.finalizeConversationById,
 }));
diff --git a/web/app/src/hooks/useRecording.ts b/web/app/src/features/recording/useRecording.ts
similarity index 98%
rename from web/app/src/hooks/useRecording.ts
rename to web/app/src/features/recording/useRecording.ts
index 8dfdb26efbe..9d95d697184 100644
--- a/web/app/src/hooks/useRecording.ts
+++ b/web/app/src/features/recording/useRecording.ts
@@ -1,13 +1,14 @@
 'use client';
 
 import { useEffect, useRef, useCallback } from 'react';
-import { useRecordingContext, TranscriptSegment, type AudioMode } from '@/components/recording/RecordingContext';
+import { useRecordingContext, TranscriptSegment, type AudioMode } from '@/features/recording/ui/RecordingContext';
 import {
   createAudioCapture,
   isAudioCaptureSupported,
 } from '@/lib/audioCapture';
 import { createTranscriptionSocket } from '@/lib/transcriptionSocket';
-import { processInProgressConversation, finalizeConversationById, getTranscriptionPreferences } from '@/lib/api';
+import { processInProgressConversation, finalizeConversationById } from '@/features/conversations';
+import { getTranscriptionPreferences } from '@/features/settings';
 import { applyLiveTranscriptSegment } from '@/lib/transcriptSegments';
 
 /**
diff --git a/web/app/src/features/settings/ARCHITECTURE.md b/web/app/src/features/settings/ARCHITECTURE.md
new file mode 100644
index 00000000000..afae5a85d6c
--- /dev/null
+++ b/web/app/src/features/settings/ARCHITECTURE.md
@@ -0,0 +1,10 @@
+# settings
+
+Destination `/settings`: Account, Privacy, Developer (`model.ts` is the nav source of truth).
+
+- `model.ts` — section ids, webhook UI↔API names, quick-nav
+- `api.ts` — language, billing, keys, webhooks, export, vocabulary
+- `ui/SettingsPage.tsx` — shell (`?section=` + loaders)
+- `ui/AccountSection.tsx`, `PrivacySection.tsx`, `DeveloperSection.tsx`, `ProfileSection.tsx` — section trees
+
+Public entry: `index.ts`.
diff --git a/web/app/src/lib/__tests__/settingsSections.test.ts b/web/app/src/features/settings/__tests__/settingsSections.test.ts
similarity index 69%
rename from web/app/src/lib/__tests__/settingsSections.test.ts
rename to web/app/src/features/settings/__tests__/settingsSections.test.ts
index 17f0787acfa..f1986d2c847 100644
--- a/web/app/src/lib/__tests__/settingsSections.test.ts
+++ b/web/app/src/features/settings/__tests__/settingsSections.test.ts
@@ -5,7 +5,10 @@ import {
   SETTINGS_SECTIONS,
   SIGNED_OUT_DESTINATION,
   isSettingsSectionId,
-} from '@/lib/settingsSections';
+  toWebhookApiType,
+  ACCOUNT_QUICK_NAV,
+  DEVELOPER_QUICK_NAV,
+} from '@/features/settings';
 
 describe('CLAUDE_CONNECTOR_OAUTH', () => {
   it('uses the registered public PKCE client without a secret', () => {
@@ -73,3 +76,37 @@ describe('isSettingsSectionId', () => {
     expect(isSettingsSectionId('__proto__')).toBe(false);
   });
 });
+
+describe('toWebhookApiType', () => {
+  it('maps the UI transcript hook name to the API name', () => {
+    expect(toWebhookApiType('transcript_received')).toBe('realtime_transcript');
+  });
+
+  it('leaves API names unchanged', () => {
+    expect(toWebhookApiType('memory_created')).toBe('memory_created');
+    expect(toWebhookApiType('audio_bytes')).toBe('audio_bytes');
+    expect(toWebhookApiType('day_summary')).toBe('day_summary');
+  });
+});
+
+describe('quick nav ids', () => {
+  it('anchors the merged account page and developer page', () => {
+    expect(ACCOUNT_QUICK_NAV.map((item) => item.id)).toEqual([
+      'account-info',
+      'language',
+      'vocabulary',
+      'notifications',
+      'plan-usage',
+      'fair-use',
+      'actions',
+      'support',
+    ]);
+    expect(DEVELOPER_QUICK_NAV.map((item) => item.id)).toEqual([
+      'api-keys',
+      'mcp',
+      'webhooks',
+      'data-management',
+      'experimental',
+    ]);
+  });
+});
diff --git a/web/app/src/features/settings/api.ts b/web/app/src/features/settings/api.ts
new file mode 100644
index 00000000000..bdddf12eb55
--- /dev/null
+++ b/web/app/src/features/settings/api.ts
@@ -0,0 +1,453 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+import {
+  invalidateCache,
+  invalidationPatterns,
+  fetchWithCache,
+  cacheKeys,
+  CACHE_TTL,
+} from '@/lib/cache';
+import {
+  API_BASE_URL,
+  fetchAuthorizedBlob,
+  fetchWithAuth,
+  getAudioAuthHeaders,
+} from '@/shared/api/client';
+import type {
+  DailySummarySettings,
+  TranscriptionPreferences,
+  DeveloperWebhooks,
+  WebhookSettings,
+  RecordingPermission,
+  UserUsage,
+  UserUsageResponse,
+  UsageStats,
+  AllUsageData,
+  UserSubscription,
+  UserSubscriptionResponse,
+  DeveloperApiKey,
+  McpApiKey,
+  AvailablePlansResponse,
+  CheckoutSessionResponse,
+  UpgradeSubscriptionResponse,
+  CancelSubscriptionResponse,
+  CustomerPortalResponse,
+} from '@/types/user';
+import { decodePlan, planGrantsPaidCapability } from '@/types/user';
+
+export type WebhookType =
+  'memory_created' | 'realtime_transcript' | 'audio_bytes' | 'day_summary';
+
+export async function getUserLanguage(): Promise<string> {
+  const response = await fetchWithAuth<{ language: string }>('/v1/users/language');
+  return response.language;
+}
+
+/**
+ * Set user's primary language
+ */
+export async function setUserLanguage(language: string): Promise<void> {
+  await fetchWithAuth('/v1/users/language', {
+    method: 'PATCH',
+    body: JSON.stringify({ language }),
+  });
+}
+
+/**
+ * Get daily summary settings
+ */
+export async function getDailySummarySettings(): Promise<DailySummarySettings> {
+  return fetchWithAuth<DailySummarySettings>('/v1/users/daily-summary-settings');
+}
+
+/**
+ * Update daily summary settings
+ */
+export async function updateDailySummarySettings(
+  settings: DailySummarySettings,
+): Promise<void> {
+  await fetchWithAuth('/v1/users/daily-summary-settings', {
+    method: 'PATCH',
+    body: JSON.stringify(settings),
+  });
+}
+
+// ============================================================================
+// Daily Summaries (Recaps) API
+// ============================================================================
+
+import type { DailySummary } from '@/types/recap';
+export async function getTranscriptionPreferences(): Promise<TranscriptionPreferences> {
+  return fetchWithAuth<TranscriptionPreferences>('/v1/users/transcription-preferences');
+}
+
+/**
+ * Get developer webhook URL
+ */
+export async function getDeveloperWebhook(type: WebhookType): Promise<WebhookSettings> {
+  return fetchWithAuth<WebhookSettings>(`/v1/users/developer/webhook/${type}`);
+}
+
+/**
+ * Set developer webhook URL
+ */
+export async function setDeveloperWebhook(type: WebhookType, url: string): Promise<void> {
+  await fetchWithAuth(`/v1/users/developer/webhook/${type}`, {
+    method: 'POST',
+    body: JSON.stringify({ url }),
+  });
+}
+
+/**
+ * Enable developer webhook
+ */
+export async function enableDeveloperWebhook(type: WebhookType): Promise<void> {
+  await fetchWithAuth(`/v1/users/developer/webhook/${type}/enable`, {
+    method: 'POST',
+  });
+}
+
+/**
+ * Disable developer webhook
+ */
+export async function disableDeveloperWebhook(type: WebhookType): Promise<void> {
+  await fetchWithAuth(`/v1/users/developer/webhook/${type}/disable`, {
+    method: 'POST',
+  });
+}
+
+/**
+ * Get all webhook statuses
+ */
+export async function getDeveloperWebhooksStatus(): Promise<DeveloperWebhooks> {
+  return fetchWithAuth<DeveloperWebhooks>('/v1/users/developer/webhooks/status');
+}
+
+/**
+ * Get store recording permission
+ */
+export async function getRecordingPermission(): Promise<RecordingPermission> {
+  return fetchWithAuth<RecordingPermission>('/v1/users/store-recording-permission');
+}
+
+/**
+ * Set store recording permission
+ */
+export async function setRecordingPermission(enabled: boolean): Promise<void> {
+  await fetchWithAuth(`/v1/users/store-recording-permission?value=${enabled}`, {
+    method: 'POST',
+  });
+}
+
+/**
+ * Get user usage stats for a specific period
+ */
+export async function getUserUsage(
+  period: 'today' | 'monthly' | 'yearly' | 'all_time' = 'monthly',
+): Promise<UserUsage | null> {
+  try {
+    const response = await fetchWithAuth<UserUsageResponse>(
+      `/v1/users/me/usage?period=${period}`,
+    );
+
+    // Extract the relevant period's stats
+    let stats: UsageStats | undefined;
+    if (period === 'all_time') {
+      stats = response.all_time;
+    } else if (period === 'yearly') {
+      stats = response.yearly;
+    } else if (period === 'monthly') {
+      stats = response.monthly;
+    } else if (period === 'today') {
+      stats = response.today;
+    }
+
+    // Fallback to any available stats
+    if (!stats) {
+      stats = response.all_time || response.monthly || response.yearly || response.today;
+    }
+
+    // Return data if we have stats OR history - some periods might have history without aggregate stats
+    if (stats || response.history?.length) {
+      return {
+        transcription_seconds: stats?.transcription_seconds || 0,
+        words_transcribed: stats?.words_transcribed || 0,
+        insights_gained: stats?.insights_gained || 0,
+        memories_created: stats?.memories_created || 0,
+        history: response.history,
+      };
+    }
+    return null;
+  } catch (error) {
+    console.error('getUserUsage error:', error);
+    return null;
+  }
+}
+
+/**
+ * Get all usage data for all periods (for tabs display)
+ */
+export async function getAllUsageData(): Promise<AllUsageData> {
+  const [today, monthly, yearly, all_time] = await Promise.all([
+    getUserUsage('today'),
+    getUserUsage('monthly'),
+    getUserUsage('yearly'),
+    getUserUsage('all_time'),
+  ]);
+  return { today, monthly, yearly, all_time };
+}
+
+/**
+ * Get user subscription info
+ */
+export async function getUserSubscription(): Promise<UserSubscription | null> {
+  try {
+    const response = await fetchWithAuth<UserSubscriptionResponse>(
+      '/v1/users/me/subscription',
+    );
+
+    const plan = decodePlan(response.subscription?.plan);
+    const result: UserSubscription = {
+      plan: plan.raw ?? '',
+      plan_identity: plan,
+      status: response.subscription?.status || 'active',
+      // Unknown plans are deliberately excluded. A future wire value must not
+      // inherit paid capability merely because it is non-empty.
+      is_unlimited: planGrantsPaidCapability(plan),
+      current_period_end: response.subscription?.current_period_end,
+      stripe_subscription_id: response.subscription?.stripe_subscription_id,
+      cancel_at_period_end: response.subscription?.cancel_at_period_end,
+      current_price_id: response.subscription?.current_price_id,
+      features: response.subscription?.features || [],
+    };
+    return result;
+  } catch (error) {
+    console.error('getUserSubscription error:', error);
+    return null;
+  }
+}
+
+/**
+ * Get available subscription plans
+ */
+export async function getAvailablePlans(): Promise<AvailablePlansResponse | null> {
+  try {
+    const response = await fetchWithAuth<AvailablePlansResponse>(
+      '/v1/payments/available-plans',
+    );
+    return response;
+  } catch (error) {
+    console.error('getAvailablePlans error:', error);
+    return null;
+  }
+}
+
+/**
+ * Create a checkout session for subscription
+ */
+export async function createCheckoutSession(
+  priceId: string,
+): Promise<CheckoutSessionResponse | null> {
+  try {
+    const response = await fetchWithAuth<CheckoutSessionResponse>(
+      '/v1/payments/checkout-session',
+      {
+        method: 'POST',
+        body: JSON.stringify({ price_id: priceId }),
+      },
+    );
+    return response;
+  } catch (error) {
+    console.error('createCheckoutSession error:', error);
+    return null;
+  }
+}
+
+/**
+ * Upgrade subscription to a different plan
+ */
+export async function upgradeSubscription(
+  priceId: string,
+): Promise<UpgradeSubscriptionResponse | null> {
+  try {
+    const response = await fetchWithAuth<UpgradeSubscriptionResponse>(
+      '/v1/payments/upgrade-subscription',
+      {
+        method: 'POST',
+        body: JSON.stringify({ price_id: priceId }),
+      },
+    );
+    return response;
+  } catch (error) {
+    console.error('upgradeSubscription error:', error);
+    return null;
+  }
+}
+
+/**
+ * Cancel subscription
+ */
+export async function cancelSubscription(): Promise<CancelSubscriptionResponse | null> {
+  try {
+    const response = await fetchWithAuth<CancelSubscriptionResponse>(
+      '/v1/payments/subscription',
+      {
+        method: 'DELETE',
+      },
+    );
+    return response;
+  } catch (error) {
+    console.error('cancelSubscription error:', error);
+    return null;
+  }
+}
+
+/**
+ * Get customer portal URL for managing payment methods
+ */
+export async function getCustomerPortal(): Promise<CustomerPortalResponse | null> {
+  try {
+    const response = await fetchWithAuth<CustomerPortalResponse>(
+      '/v1/payments/customer-portal',
+      {
+        method: 'POST',
+      },
+    );
+    return response;
+  } catch (error) {
+    console.error('getCustomerPortal error:', error);
+    return null;
+  }
+}
+
+/**
+ * Delete the signed-in account permanently
+ */
+export async function deleteAccount(): Promise<void> {
+  await fetchWithAuth('/v1/users/delete-account', {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * Get training data opt-in status
+ */
+export async function getTrainingDataOptIn(): Promise<{ opted_in: boolean }> {
+  return fetchWithAuth<{ opted_in: boolean }>('/v1/users/training-data-opt-in');
+}
+
+/**
+ * Set training data opt-in
+ */
+export async function setTrainingDataOptIn(optIn: boolean): Promise<void> {
+  await fetchWithAuth('/v1/users/training-data-opt-in', {
+    method: 'POST',
+    body: JSON.stringify({ opted_in: optIn }),
+  });
+}
+
+/**
+ * Get user's developer API keys
+ */
+export async function getDeveloperApiKeys(): Promise<DeveloperApiKey[]> {
+  try {
+    return await fetchWithAuth<DeveloperApiKey[]>('/v1/dev/keys');
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Create a new developer API key with optional scopes
+ */
+export async function createDeveloperApiKey(
+  name: string,
+  scopes?: string[],
+): Promise<DeveloperApiKey> {
+  const body: { name: string; scopes?: string[] } = { name };
+  if (scopes && scopes.length > 0) {
+    body.scopes = scopes;
+  }
+  return fetchWithAuth<DeveloperApiKey>('/v1/dev/keys', {
+    method: 'POST',
+    body: JSON.stringify(body),
+  });
+}
+
+/**
+ * Delete a developer API key
+ */
+export async function deleteDeveloperApiKey(keyId: string): Promise<void> {
+  await fetchWithAuth(`/v1/dev/keys/${keyId}`, {
+    method: 'DELETE',
+  });
+}
+
+// ============================================================================
+// MCP API Keys
+// ============================================================================
+
+/**
+ * Get user's MCP API keys
+ */
+export async function getMcpApiKeys(): Promise<McpApiKey[]> {
+  try {
+    return await fetchWithAuth<McpApiKey[]>('/v1/mcp/keys');
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Create a new MCP API key
+ */
+export async function createMcpApiKey(name: string): Promise<McpApiKey> {
+  return fetchWithAuth<McpApiKey>('/v1/mcp/keys', {
+    method: 'POST',
+    body: JSON.stringify({ name }),
+  });
+}
+
+/**
+ * Delete an MCP API key
+ */
+export async function deleteMcpApiKey(keyId: string): Promise<void> {
+  await fetchWithAuth(`/v1/mcp/keys/${keyId}`, {
+    method: 'DELETE',
+  });
+}
+
+// ============================================================================
+// Data Export & Knowledge Graph
+// ============================================================================
+
+/**
+ * Export all user data as a downloadable JSON blob (streamed from backend).
+ */
+export async function exportAllData(): Promise<Blob> {
+  return fetchAuthorizedBlob('/v1/users/export');
+}
+
+/**
+ * Custom vocabulary words stored on transcription preferences
+ */
+export async function getCustomVocabulary(): Promise<string[]> {
+  try {
+    const result = await fetchWithAuth<TranscriptionPreferences>(
+      '/v1/users/transcription-preferences',
+    );
+    return result.vocabulary || [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Update custom vocabulary words via transcription preferences
+ */
+export async function updateCustomVocabulary(words: string[]): Promise<void> {
+  await fetchWithAuth('/v1/users/transcription-preferences', {
+    method: 'PATCH',
+    body: JSON.stringify({ vocabulary: words }),
+  });
+}
diff --git a/web/app/src/features/settings/index.ts b/web/app/src/features/settings/index.ts
new file mode 100644
index 00000000000..8fa51fdd9a5
--- /dev/null
+++ b/web/app/src/features/settings/index.ts
@@ -0,0 +1,14 @@
+export {
+  CLAUDE_CONNECTOR_OAUTH,
+  SECTION_INFO,
+  SETTINGS_SECTIONS,
+  SIGNED_OUT_DESTINATION,
+  isSettingsSectionId,
+  toWebhookApiType,
+  ACCOUNT_QUICK_NAV,
+  DEVELOPER_QUICK_NAV,
+  type SettingsSectionId,
+  type WebhookApiType,
+} from './model';
+export { SettingsPage } from './ui/SettingsPage';
+export * from './api';
diff --git a/web/app/src/lib/settingsSections.ts b/web/app/src/features/settings/model.ts
similarity index 59%
rename from web/app/src/lib/settingsSections.ts
rename to web/app/src/features/settings/model.ts
index f3705539297..607f7f49620 100644
--- a/web/app/src/lib/settingsSections.ts
+++ b/web/app/src/features/settings/model.ts
@@ -45,3 +45,34 @@ export const SECTION_INFO = Object.fromEntries(
 export function isSettingsSectionId(value: string): value is SettingsSectionId {
   return SETTINGS_SECTIONS.some((section) => section.id === value);
 }
+
+export type WebhookApiType =
+  | 'memory_created'
+  | 'realtime_transcript'
+  | 'audio_bytes'
+  | 'day_summary';
+
+/** UI uses transcript_received; the API names that hook realtime_transcript. */
+export function toWebhookApiType(uiType: string): WebhookApiType {
+  if (uiType === 'transcript_received') return 'realtime_transcript';
+  return uiType as WebhookApiType;
+}
+
+export const ACCOUNT_QUICK_NAV = [
+  { id: 'account-info', label: 'Account' },
+  { id: 'language', label: 'Language' },
+  { id: 'vocabulary', label: 'Vocabulary' },
+  { id: 'notifications', label: 'Notifications' },
+  { id: 'plan-usage', label: 'Plan & Usage' },
+  { id: 'fair-use', label: 'Fair Use' },
+  { id: 'actions', label: 'Actions' },
+  { id: 'support', label: 'Support' },
+] as const;
+
+export const DEVELOPER_QUICK_NAV = [
+  { id: 'api-keys', label: 'API Keys' },
+  { id: 'mcp', label: 'MCP' },
+  { id: 'webhooks', label: 'Webhooks' },
+  { id: 'data-management', label: 'Data' },
+  { id: 'experimental', label: 'Experimental' },
+] as const;
diff --git a/web/app/src/features/settings/ui/AccountSection.tsx b/web/app/src/features/settings/ui/AccountSection.tsx
new file mode 100644
index 00000000000..e4078fcc806
--- /dev/null
+++ b/web/app/src/features/settings/ui/AccountSection.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import Link from '@tschk/moonshine-next/link';
+import { LogOut, Trash2, ExternalLink, Scale, ChevronRight } from 'lucide-react';
+import type { AllUsageData, UserSubscription, PricingOption } from '@/types/user';
+import { Card } from './settingsPrimitives';
+import { UsageSectionContent } from './UsageSection';
+
+export function AccountSection({
+  allUsage,
+  subscription,
+  cachedPlans,
+  onSubscriptionUpdate,
+  onSignOut,
+  onDeleteAccount,
+}: {
+  allUsage: AllUsageData | null;
+  subscription: UserSubscription | null;
+  cachedPlans: PricingOption[] | null;
+  onSubscriptionUpdate: () => void;
+  onSignOut: () => void;
+  onDeleteAccount: () => void;
+}) {
+  return (
+    <div className="space-y-8">
+      {/* Plan & Usage */}
+      <div id="plan-usage" className="scroll-mt-4">
+        <UsageSectionContent
+          allUsage={allUsage}
+          subscription={subscription}
+          onSubscriptionUpdate={onSubscriptionUpdate}
+          cachedPlans={cachedPlans}
+        />
+      </div>
+
+      {/* Fair Use */}
+      <div id="fair-use" className="scroll-mt-4">
+        <Card>
+          <Link
+            href="/fair-use"
+            className="flex items-center justify-between py-2 text-text-primary hover:text-text-secondary transition-colors"
+          >
+            <div className="flex items-center gap-3">
+              <Scale className="w-5 h-5 text-text-tertiary" />
+              <div>
+                <span className="font-medium">Fair Use</span>
+                <p className="text-sm text-text-quaternary">
+                  View speech usage and policy status
+                </p>
+              </div>
+            </div>
+            <ChevronRight className="w-4 h-4 text-text-quaternary" />
+          </Link>
+        </Card>
+      </div>
+
+      {/* Account Actions */}
+      <div id="actions" className="space-y-3 scroll-mt-4">
+        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
+          Account Actions
+        </h3>
+        <Card>
+          <button
+            onClick={onSignOut}
+            className="w-full flex items-center gap-3 py-3 text-text-primary hover:text-text-secondary transition-colors"
+          >
+            <LogOut className="w-5 h-5" />
+            <span className="font-medium">Sign Out</span>
+          </button>
+        </Card>
+
+        <Card className="border-red-500/20">
+          <button
+            onClick={onDeleteAccount}
+            className="w-full flex items-center gap-3 py-3 text-red-400 hover:text-red-300 transition-colors"
+          >
+            <Trash2 className="w-5 h-5" />
+            <div className="text-left">
+              <span className="font-medium block">Delete Account</span>
+              <span className="text-sm text-red-400/70">
+                Permanently delete your account and all data
+              </span>
+            </div>
+          </button>
+        </Card>
+      </div>
+
+      {/* Support */}
+      <div id="support" className="space-y-3 scroll-mt-4">
+        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
+          Support
+        </h3>
+        <Card>
+          <a
+            href="https://feedback.omi.me"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-between py-3 border-b border-white/[0.06] text-text-primary hover:text-text-secondary transition-colors"
+          >
+            <span>Feedback & Bug Reports</span>
+            <ExternalLink className="w-4 h-4" />
+          </a>
+          <a
+            href="https://help.omi.me"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-between py-3 text-text-primary hover:text-text-secondary transition-colors"
+          >
+            <span>Help Center</span>
+            <ExternalLink className="w-4 h-4" />
+          </a>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/web/app/src/features/settings/ui/DeveloperSection.tsx b/web/app/src/features/settings/ui/DeveloperSection.tsx
new file mode 100644
index 00000000000..017773744cb
--- /dev/null
+++ b/web/app/src/features/settings/ui/DeveloperSection.tsx
@@ -0,0 +1,1294 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { cn } from '@/lib/utils';
+import {
+  Plus,
+  Copy,
+  Check,
+  X,
+  Download,
+  FlaskConical,
+  Loader2,
+  ExternalLink,
+  Trash2,
+  Server,
+  BookOpen,
+  Monitor,
+  Network,
+  Activity,
+  UserPlus,
+  Lightbulb,
+  Target,
+  AlertTriangle,
+  MessageSquare,
+  FileText,
+  Radio,
+  Calendar,
+} from 'lucide-react';
+import { CLAUDE_CONNECTOR_OAUTH } from '../model';
+import { API_KEY_SCOPES } from '@/types/user';
+import type { DeveloperApiKey, McpApiKey, DeveloperWebhooks } from '@/types/user';
+import { Card, SettingRow, Toggle, ConfirmDialog } from './settingsPrimitives';
+
+function CreateApiKeyDialog({
+  isOpen,
+  onClose,
+  onCreateKey,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreateKey: (name: string, scopes: string[]) => Promise<DeveloperApiKey | null>;
+}) {
+  const [keyName, setKeyName] = useState('');
+  const [scopes, setScopes] = useState<Record<string, boolean>>({
+    'conversations:read': false,
+    'conversations:write': false,
+    'memories:read': false,
+    'memories:write': false,
+    'action_items:read': false,
+    'action_items:write': false,
+  });
+  const [isCreating, setIsCreating] = useState(false);
+  const [createdKey, setCreatedKey] = useState<DeveloperApiKey | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const selectedScopes = Object.entries(scopes)
+    .filter(([, v]) => v)
+    .map(([k]) => k);
+  const isReadOnly =
+    scopes['conversations:read'] &&
+    scopes['memories:read'] &&
+    scopes['action_items:read'] &&
+    !scopes['conversations:write'] &&
+    !scopes['memories:write'] &&
+    !scopes['action_items:write'];
+  const isFullAccess = Object.values(scopes).every((v) => v);
+
+  const selectReadOnly = () => {
+    setScopes({
+      'conversations:read': true,
+      'conversations:write': false,
+      'memories:read': true,
+      'memories:write': false,
+      'action_items:read': true,
+      'action_items:write': false,
+    });
+  };
+
+  const selectFullAccess = () => {
+    setScopes(Object.fromEntries(Object.keys(scopes).map((k) => [k, true])));
+  };
+
+  const handleCreate = async () => {
+    if (!keyName.trim()) return;
+    setIsCreating(true);
+    const key = await onCreateKey(
+      keyName.trim(),
+      selectedScopes.length > 0 ? selectedScopes : (undefined as unknown as string[]),
+    );
+    if (key) {
+      setCreatedKey(key);
+    }
+    setIsCreating(false);
+  };
+
+  const handleCopy = () => {
+    if (createdKey?.key) {
+      navigator.clipboard.writeText(createdKey.key);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleClose = () => {
+    setKeyName('');
+    setScopes(Object.fromEntries(Object.keys(scopes).map((k) => [k, false])));
+    setCreatedKey(null);
+    setCopied(false);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={handleClose}
+    >
+      <div
+        className="bg-bg-secondary rounded-2xl w-full max-w-md mx-4 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {createdKey ? (
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-3 rounded-xl bg-green-500/20">
+                <Check className="w-6 h-6 text-green-400" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-text-primary">
+                  API Key Created
+                </h3>
+                <p className="text-sm text-text-tertiary">
+                  Save this key now - you won&apos;t see it again!
+                </p>
+              </div>
+            </div>
+            <div className="p-4 rounded-xl bg-bg-tertiary mb-4">
+              <p className="text-xs text-text-tertiary mb-2">Your API Key</p>
+              <code className="text-sm text-text-primary font-mono break-all">
+                {createdKey.key}
+              </code>
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={handleCopy}
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-medium transition-colors',
+                  copied
+                    ? 'bg-green-500/20 text-green-400'
+                    : 'bg-text-primary text-bg-primary hover:bg-text-primary/90',
+                )}
+              >
+                {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                {copied ? 'Copied!' : 'Copy Key'}
+              </button>
+              <button
+                onClick={handleClose}
+                className="px-4 py-3 rounded-xl bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary transition-colors"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-6">
+              <h3 className="text-lg font-semibold text-text-primary">Create API Key</h3>
+              <button
+                onClick={handleClose}
+                className="p-2 rounded-lg hover:bg-bg-tertiary transition-colors"
+              >
+                <X className="w-5 h-5 text-text-tertiary" />
+              </button>
+            </div>
+
+            <div className="space-y-6">
+              <div>
+                <label className="block text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
+                  Key Name
+                </label>
+                <input
+                  type="text"
+                  value={keyName}
+                  onChange={(e) => setKeyName(e.target.value)}
+                  placeholder="e.g., My App Integration"
+                  className="w-full px-4 py-3 rounded-xl bg-bg-tertiary border border-white/[0.06] text-text-primary placeholder:text-text-quaternary focus:outline-none focus:border-white/25"
+                />
+              </div>
+
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <label className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
+                    Permissions
+                  </label>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={selectReadOnly}
+                      className={cn(
+                        'px-3 py-1.5 rounded-full text-xs font-medium transition-colors',
+                        isReadOnly
+                          ? 'bg-text-primary text-bg-primary'
+                          : 'bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary',
+                      )}
+                    >
+                      Read Only
+                    </button>
+                    <button
+                      onClick={selectFullAccess}
+                      className={cn(
+                        'px-3 py-1.5 rounded-full text-xs font-medium transition-colors',
+                        isFullAccess
+                          ? 'bg-text-primary text-bg-primary'
+                          : 'bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary',
+                      )}
+                    >
+                      Full Access
+                    </button>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  {['Conversations', 'Memories', 'Action Items'].map((resource) => {
+                    const readKey = `${resource.toLowerCase().replace(' ', '_')}:read`;
+                    const writeKey = `${resource.toLowerCase().replace(' ', '_')}:write`;
+                    return (
+                      <div
+                        key={resource}
+                        className="flex items-center justify-between p-3 rounded-xl bg-bg-tertiary"
+                      >
+                        <span className="text-sm text-text-primary">{resource}</span>
+                        <div className="flex bg-bg-quaternary rounded-lg overflow-hidden">
+                          <button
+                            onClick={() =>
+                              setScopes({ ...scopes, [readKey]: !scopes[readKey] })
+                            }
+                            className={cn(
+                              'px-3 py-1.5 text-xs font-semibold transition-colors',
+                              scopes[readKey]
+                                ? 'bg-blue-500 text-white'
+                                : 'text-text-quaternary hover:text-text-secondary',
+                            )}
+                          >
+                            R
+                          </button>
+                          <button
+                            onClick={() =>
+                              setScopes({ ...scopes, [writeKey]: !scopes[writeKey] })
+                            }
+                            className={cn(
+                              'px-3 py-1.5 text-xs font-semibold transition-colors',
+                              scopes[writeKey]
+                                ? 'bg-text-primary text-bg-primary'
+                                : 'text-text-quaternary hover:text-text-secondary',
+                            )}
+                          >
+                            W
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+                <p className="text-xs text-text-quaternary mt-2">
+                  R = Read, W = Write. Defaults to read-only if nothing selected.
+                </p>
+              </div>
+
+              <button
+                onClick={handleCreate}
+                disabled={!keyName.trim() || isCreating}
+                className={cn(
+                  'w-full py-3 rounded-xl font-medium transition-colors',
+                  keyName.trim() && !isCreating
+                    ? 'bg-text-primary text-bg-primary hover:bg-text-primary/90'
+                    : 'bg-bg-tertiary text-text-quaternary cursor-not-allowed',
+                )}
+              >
+                {isCreating ? 'Creating...' : 'Create Key'}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Create MCP Key Dialog
+function CreateMcpKeyDialog({
+  isOpen,
+  onClose,
+  onCreateKey,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreateKey: (name: string) => Promise<McpApiKey | null>;
+}) {
+  const [keyName, setKeyName] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [createdKey, setCreatedKey] = useState<McpApiKey | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const handleCreate = async () => {
+    if (!keyName.trim()) return;
+    setIsCreating(true);
+    const key = await onCreateKey(keyName.trim());
+    if (key) {
+      setCreatedKey(key);
+    }
+    setIsCreating(false);
+  };
+
+  const handleCopy = () => {
+    if (createdKey?.key) {
+      navigator.clipboard.writeText(createdKey.key);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleClose = () => {
+    setKeyName('');
+    setCreatedKey(null);
+    setCopied(false);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={handleClose}
+    >
+      <div
+        className="bg-bg-secondary rounded-2xl w-full max-w-md mx-4 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {createdKey ? (
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-3 rounded-xl bg-green-500/20">
+                <Check className="w-6 h-6 text-green-400" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-text-primary">
+                  MCP Key Created
+                </h3>
+                <p className="text-sm text-text-tertiary">
+                  Save this key now - you won&apos;t see it again!
+                </p>
+              </div>
+            </div>
+            <div className="p-4 rounded-xl bg-bg-tertiary mb-4">
+              <p className="text-xs text-text-tertiary mb-2">Your MCP Key</p>
+              <code className="text-sm text-text-primary font-mono break-all">
+                {createdKey.key}
+              </code>
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={handleCopy}
+                className={cn(
+                  'flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-medium transition-colors',
+                  copied
+                    ? 'bg-green-500/20 text-green-400'
+                    : 'bg-text-primary text-bg-primary hover:bg-text-primary/90',
+                )}
+              >
+                {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                {copied ? 'Copied!' : 'Copy Key'}
+              </button>
+              <button
+                onClick={handleClose}
+                className="px-4 py-3 rounded-xl bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary transition-colors"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-6">
+              <h3 className="text-lg font-semibold text-text-primary">Create MCP Key</h3>
+              <button
+                onClick={handleClose}
+                className="p-2 rounded-lg hover:bg-bg-tertiary transition-colors"
+              >
+                <X className="w-5 h-5 text-text-tertiary" />
+              </button>
+            </div>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
+                  Key Name
+                </label>
+                <input
+                  type="text"
+                  value={keyName}
+                  onChange={(e) => setKeyName(e.target.value)}
+                  placeholder="e.g., Claude Desktop"
+                  className="w-full px-4 py-3 rounded-xl bg-bg-tertiary border border-white/[0.06] text-text-primary placeholder:text-text-quaternary focus:outline-none focus:border-white/25"
+                />
+              </div>
+              <button
+                onClick={handleCreate}
+                disabled={!keyName.trim() || isCreating}
+                className={cn(
+                  'w-full py-3 rounded-xl font-medium transition-colors',
+                  keyName.trim() && !isCreating
+                    ? 'bg-text-primary text-bg-primary hover:bg-text-primary/90'
+                    : 'bg-bg-tertiary text-text-quaternary cursor-not-allowed',
+                )}
+              >
+                {isCreating ? 'Creating...' : 'Create Key'}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function DeveloperSection({
+  apiKeys,
+  mcpKeys,
+  webhooks,
+  onCreateApiKey,
+  onDeleteApiKey,
+  onCreateMcpKey,
+  onDeleteMcpKey,
+  onWebhookChange,
+  onExportData,
+  isExporting,
+  onDeleteKnowledgeGraph,
+}: {
+  apiKeys: DeveloperApiKey[];
+  mcpKeys: McpApiKey[];
+  webhooks: DeveloperWebhooks;
+  onCreateApiKey: (name: string, scopes: string[]) => Promise<DeveloperApiKey | null>;
+  onDeleteApiKey: (keyId: string) => void;
+  onCreateMcpKey: (name: string) => Promise<McpApiKey | null>;
+  onDeleteMcpKey: (keyId: string) => void;
+  onWebhookChange: (type: string, enabled: boolean, url?: string, delay?: string) => void;
+  onExportData: () => void;
+  isExporting?: boolean;
+  onDeleteKnowledgeGraph: () => void;
+}) {
+  const [showApiKeyDialog, setShowApiKeyDialog] = useState(false);
+  const [showMcpKeyDialog, setShowMcpKeyDialog] = useState(false);
+  const [showDeleteGraphDialog, setShowDeleteGraphDialog] = useState(false);
+  const [copiedConfig, setCopiedConfig] = useState(false);
+  const [copiedUrl, setCopiedUrl] = useState(false);
+  const [copiedClaudeName, setCopiedClaudeName] = useState(false);
+  const [copiedClaudeUrl, setCopiedClaudeUrl] = useState(false);
+  const [copiedClaudeClientId, setCopiedClaudeClientId] = useState(false);
+  const [copiedClaudeSecret, setCopiedClaudeSecret] = useState(false);
+
+  const mcpServerUrl = `${process.env.NEXT_PUBLIC_API_BASE_URL || 'https://api.omi.me'}/v1/mcp/sse`;
+
+  // Claude connector values — mirror the 4 fields in Claude's "Add custom connector" form
+  const claudeConnectorName = 'Omi Memory';
+  const claudeConnectorUrl = mcpServerUrl;
+  const claudeConnectorClientId = CLAUDE_CONNECTOR_OAUTH.clientId;
+  const claudeConnectorSecret: string = CLAUDE_CONNECTOR_OAUTH.clientSecret;
+
+  // Experimental features (stored in localStorage)
+  const [experimentalFeatures, setExperimentalFeatures] = useState({
+    transcriptionDiagnostics: false,
+    autoCreateSpeakers: false,
+    followUpQuestions: false,
+    goalTracker: false,
+  });
+
+  // Load experimental features from localStorage on mount
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('omi_experimental_features');
+      if (saved) {
+        try {
+          setExperimentalFeatures(JSON.parse(saved));
+        } catch {
+          // Ignore parse errors
+        }
+      }
+    }
+  }, []);
+
+  // Save experimental features to localStorage when they change
+  const updateExperimentalFeature = (
+    key: keyof typeof experimentalFeatures,
+    value: boolean,
+  ) => {
+    const updated = { ...experimentalFeatures, [key]: value };
+    setExperimentalFeatures(updated);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('omi_experimental_features', JSON.stringify(updated));
+    }
+  };
+
+  // Parse audio_bytes URL which may contain comma-separated URL and delay (e.g., "https://example.com,5")
+  const parseAudioBytesUrl = (rawUrl: string) => {
+    if (!rawUrl) return { url: '', delay: '5' };
+    const parts = rawUrl.split(',');
+    if (parts.length >= 2) {
+      return { url: parts[0], delay: parts[1] };
+    }
+    return { url: rawUrl, delay: '5' };
+  };
+
+  const initialAudioBytes = parseAudioBytesUrl(webhooks.audio_bytes?.url || '');
+
+  const [webhookUrls, setWebhookUrls] = useState<Record<string, string>>({
+    memory_created: webhooks.memory_created?.url || '',
+    transcript_received: webhooks.transcript_received?.url || '',
+    audio_bytes: initialAudioBytes.url,
+    day_summary: webhooks.day_summary?.url || '',
+  });
+  const [audioBytesDelay, setAudioBytesDelay] = useState(initialAudioBytes.delay);
+
+  // Update webhook URLs when webhooks prop changes
+  useEffect(() => {
+    const audioBytes = parseAudioBytesUrl(webhooks.audio_bytes?.url || '');
+    setWebhookUrls({
+      memory_created: webhooks.memory_created?.url || '',
+      transcript_received: webhooks.transcript_received?.url || '',
+      audio_bytes: audioBytes.url,
+      day_summary: webhooks.day_summary?.url || '',
+    });
+    setAudioBytesDelay(audioBytes.delay);
+  }, [webhooks]);
+
+  const webhookTypes = [
+    {
+      id: 'memory_created',
+      label: 'Conversation Events',
+      description: 'New conversation created',
+      icon: MessageSquare,
+    },
+    {
+      id: 'transcript_received',
+      label: 'Real-time Transcript',
+      description: 'Transcript received',
+      icon: FileText,
+    },
+    {
+      id: 'audio_bytes',
+      label: 'Audio Bytes',
+      description: 'Audio data received',
+      icon: Radio,
+      hasDelay: true,
+    },
+    {
+      id: 'day_summary',
+      label: 'Day Summary',
+      description: 'Summary generated',
+      icon: Calendar,
+    },
+  ];
+
+  const claudeDesktopConfig = `{
+  "mcpServers": {
+    "omi": {
+      "command": "docker",
+      "args": ["run", "--rm", "-i", "-e", "OMI_API_KEY=your_api_key_here", "omiai/mcp-server:latest"]
+    }
+  }
+}`;
+
+  const copyConfig = () => {
+    navigator.clipboard.writeText(claudeDesktopConfig);
+    setCopiedConfig(true);
+    setTimeout(() => setCopiedConfig(false), 2000);
+  };
+
+  const copyUrl = () => {
+    navigator.clipboard.writeText(mcpServerUrl);
+    setCopiedUrl(true);
+    setTimeout(() => setCopiedUrl(false), 2000);
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Developer API Keys */}
+      <div id="api-keys" className="space-y-3 scroll-mt-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
+            Developer API Keys
+          </h3>
+          <button
+            onClick={() => setShowApiKeyDialog(true)}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/[0.08] text-text-secondary text-xs font-medium hover:bg-white/[0.14] transition-colors"
+          >
+            <Plus className="w-3 h-3" />
+            Create Key
+          </button>
+        </div>
+        <Card>
+          {apiKeys.length > 0 ? (
+            <div className="space-y-3">
+              {apiKeys.map((apiKey) => (
+                <div
+                  key={apiKey.id}
+                  className="flex items-center justify-between p-3 rounded-xl bg-bg-tertiary"
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="text-sm text-text-primary font-medium">
+                        {apiKey.name}
+                      </span>
+                      <code className="text-xs text-text-tertiary font-mono bg-bg-quaternary px-2 py-0.5 rounded">
+                        {apiKey.key_prefix}...
+                      </code>
+                      {apiKey.scopes && apiKey.scopes.length > 0 && (
+                        <span className="text-xs text-text-secondary bg-white/[0.08] px-2 py-0.5 rounded">
+                          {apiKey.scopes.length} scopes
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-xs text-text-quaternary mt-1">
+                      Created {new Date(apiKey.created_at).toLocaleDateString()}
+                      {apiKey.last_used_at &&
+                        ` • Last used ${new Date(apiKey.last_used_at).toLocaleDateString()}`}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => onDeleteApiKey(apiKey.id)}
+                    className="p-2 rounded-lg text-text-secondary hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-text-quaternary text-center py-6">
+              No API keys created yet
+            </p>
+          )}
+        </Card>
+      </div>
+
+      {/* MCP Section */}
+      <div id="mcp" className="space-y-3 scroll-mt-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
+              MCP
+            </h3>
+            <a
+              href="https://docs.omi.me/doc/developer/MCP"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-text-secondary hover:text-text-secondary transition-colors"
+            >
+              Docs ↗
+            </a>
+          </div>
+          <button
+            onClick={() => setShowMcpKeyDialog(true)}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white/[0.08] text-text-secondary text-xs font-medium hover:bg-white/[0.14] transition-colors"
+          >
+            <Plus className="w-3 h-3" />
+            Create Key
+          </button>
+        </div>
+
+        {/* MCP Keys List */}
+        <Card>
+          {mcpKeys.length > 0 ? (
+            <div className="space-y-3">
+              {mcpKeys.map((key) => (
+                <div
+                  key={key.id}
+                  className="flex items-center justify-between p-3 rounded-xl bg-bg-tertiary"
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-text-primary font-medium">
+                        {key.name}
+                      </span>
+                      <code className="text-xs text-text-tertiary font-mono bg-bg-quaternary px-2 py-0.5 rounded">
+                        {key.key_prefix}...
+                      </code>
+                    </div>
+                    <p className="text-xs text-text-quaternary mt-1">
+                      Created {new Date(key.created_at).toLocaleDateString()}
+                      {key.last_used_at &&
+                        ` • Last used ${new Date(key.last_used_at).toLocaleDateString()}`}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => onDeleteMcpKey(key.id)}
+                    className="p-2 rounded-lg text-text-secondary hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-text-quaternary text-center py-6">
+              No MCP keys created yet
+            </p>
+          )}
+        </Card>
+
+        {/* Claude Desktop Config */}
+        <Card>
+          <div className="flex items-center gap-3 mb-4">
+            <div className="p-2 rounded-lg bg-bg-tertiary">
+              <Monitor className="w-5 h-5 text-text-tertiary" />
+            </div>
+            <div>
+              <p className="text-text-primary font-medium">Claude Desktop</p>
+              <p className="text-xs text-text-tertiary">
+                Add to claude_desktop_config.json
+              </p>
+            </div>
+          </div>
+          <div className="p-4 rounded-xl bg-[#0d0d0d] border border-white/[0.06] font-mono text-xs overflow-x-auto">
+            <pre className="text-text-secondary whitespace-pre">
+              {claudeDesktopConfig}
+            </pre>
+          </div>
+          <button
+            onClick={copyConfig}
+            className={cn(
+              'w-full mt-3 flex items-center justify-center gap-2 py-2.5 rounded-xl transition-colors',
+              copiedConfig
+                ? 'bg-green-500/20 text-green-400'
+                : 'bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary',
+            )}
+          >
+            {copiedConfig ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+            {copiedConfig ? 'Copied!' : 'Copy Config'}
+          </button>
+        </Card>
+
+        {/* Generic MCP Server Info */}
+        <Card>
+          <div className="flex items-center gap-3 mb-4">
+            <div className="p-2 rounded-lg bg-bg-tertiary">
+              <Server className="w-5 h-5 text-text-tertiary" />
+            </div>
+            <div>
+              <p className="text-text-primary font-medium">MCP Server</p>
+              <p className="text-xs text-text-tertiary">
+                Connect ChatGPT, Codex, Claude, or any MCP client to your data
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div>
+              <p className="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
+                Server URL
+              </p>
+              <button
+                onClick={copyUrl}
+                className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors"
+              >
+                <code className="text-sm text-text-primary font-mono truncate mr-2">
+                  {mcpServerUrl}
+                </code>
+                {copiedUrl ? (
+                  <Check className="w-4 h-4 text-green-400 flex-shrink-0" />
+                ) : (
+                  <Copy className="w-4 h-4 text-text-quaternary flex-shrink-0" />
+                )}
+              </button>
+            </div>
+
+            <div className="border-t border-white/[0.06] pt-4">
+              <p className="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
+                API Key Auth
+              </p>
+              <div className="flex items-center gap-4 text-sm">
+                <span className="text-text-tertiary">Header</span>
+                <code className="text-text-quaternary font-mono text-xs">
+                  Authorization: Bearer &lt;key&gt;
+                </code>
+              </div>
+            </div>
+
+            <div className="border-t border-white/[0.06] pt-4">
+              <p className="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2">
+                OAuth
+              </p>
+              <div className="space-y-2 text-sm">
+                <div className="flex items-center gap-4">
+                  <span className="text-text-tertiary w-24">Client ID</span>
+                  <code className="text-text-primary font-mono">omi</code>
+                </div>
+                <div className="flex items-center gap-4">
+                  <span className="text-text-tertiary w-24">Client Secret</span>
+                  <span className="text-text-quaternary italic text-xs">
+                    Use your MCP API key
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Claude Connector — 4 copy fields mirroring Claude's "Add custom connector" form */}
+        <Card>
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-12 h-12 rounded-xl overflow-hidden bg-gradient-to-br from-orange-500/20 to-orange-600/10 border border-orange-500/20 flex items-center justify-center flex-shrink-0">
+              <span className="text-lg font-semibold text-orange-400">C</span>
+            </div>
+            <div>
+              <p className="text-text-primary font-medium">Claude</p>
+              <p className="text-xs text-text-tertiary">Live MCP or memory pack</p>
+            </div>
+          </div>
+
+          <p className="text-sm text-text-secondary mb-4">
+            Connect over MCP so Claude reads your memories live, or copy a memory pack.
+            Each field below maps to Claude&rsquo;s{' '}
+            <span className="text-text-tertiary">
+              Settings → Connectors → Add custom connector
+            </span>{' '}
+            form.
+          </p>
+
+          <div className="space-y-3">
+            {/* Field 1: Name → pastes into Claude's "Name" input */}
+            <div>
+              <p className="text-xs font-medium text-text-tertiary mb-1.5">
+                1. Name{' '}
+                <span className="text-text-secondary font-normal">
+                  → Claude &quot;Name&quot;
+                </span>
+              </p>
+              <button
+                onClick={() => {
+                  navigator.clipboard.writeText(claudeConnectorName);
+                  setCopiedClaudeName(true);
+                  setTimeout(() => setCopiedClaudeName(false), 2000);
+                }}
+                className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors group"
+              >
+                <code className="text-sm text-text-primary font-mono">
+                  {claudeConnectorName}
+                </code>
+                {copiedClaudeName ? (
+                  <Check className="w-4 h-4 text-green-400" />
+                ) : (
+                  <Copy className="w-4 h-4 text-text-quaternary group-hover:text-text-secondary transition-colors" />
+                )}
+              </button>
+            </div>
+
+            {/* Field 2: Server URL → pastes into Claude's "Remote MCP server URL" input */}
+            <div>
+              <p className="text-xs font-medium text-text-tertiary mb-1.5">
+                2. Remote MCP server URL{' '}
+                <span className="text-text-secondary font-normal">
+                  → Claude &quot;Remote MCP server URL&quot;
+                </span>
+              </p>
+              <button
+                onClick={() => {
+                  navigator.clipboard.writeText(claudeConnectorUrl);
+                  setCopiedClaudeUrl(true);
+                  setTimeout(() => setCopiedClaudeUrl(false), 2000);
+                }}
+                className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors group"
+              >
+                <code className="text-sm text-text-primary font-mono truncate mr-2">
+                  {claudeConnectorUrl}
+                </code>
+                {copiedClaudeUrl ? (
+                  <Check className="w-4 h-4 text-green-400 flex-shrink-0" />
+                ) : (
+                  <Copy className="w-4 h-4 text-text-quaternary group-hover:text-text-secondary transition-colors flex-shrink-0" />
+                )}
+              </button>
+            </div>
+
+            {/* Field 3: OAuth Client ID → pastes into Claude's Advanced "OAuth Client ID" */}
+            <div>
+              <p className="text-xs font-medium text-text-tertiary mb-1.5">
+                3. OAuth Client ID{' '}
+                <span className="text-text-secondary font-normal">
+                  → Claude Advanced &quot;OAuth Client ID&quot;
+                </span>
+              </p>
+              <button
+                onClick={() => {
+                  navigator.clipboard.writeText(claudeConnectorClientId);
+                  setCopiedClaudeClientId(true);
+                  setTimeout(() => setCopiedClaudeClientId(false), 2000);
+                }}
+                className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors group"
+              >
+                <code className="text-sm text-text-primary font-mono">
+                  {claudeConnectorClientId}
+                </code>
+                {copiedClaudeClientId ? (
+                  <Check className="w-4 h-4 text-green-400" />
+                ) : (
+                  <Copy className="w-4 h-4 text-text-quaternary group-hover:text-text-secondary transition-colors" />
+                )}
+              </button>
+            </div>
+
+            {/* Field 4: OAuth Client Secret → pastes into Claude's Advanced "OAuth Client Secret" */}
+            <div>
+              <p className="text-xs font-medium text-text-tertiary mb-1.5">
+                4. OAuth Client Secret{' '}
+                <span className="text-text-secondary font-normal">
+                  → Claude Advanced &quot;OAuth Client Secret&quot;
+                </span>
+              </p>
+              {claudeConnectorSecret ? (
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText(claudeConnectorSecret);
+                    setCopiedClaudeSecret(true);
+                    setTimeout(() => setCopiedClaudeSecret(false), 2000);
+                  }}
+                  className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] hover:border-white/25 transition-colors group"
+                >
+                  <code className="text-sm text-text-primary font-mono truncate mr-2">
+                    {claudeConnectorSecret.slice(0, 8)}…{claudeConnectorSecret.slice(-4)}
+                  </code>
+                  {copiedClaudeSecret ? (
+                    <Check className="w-4 h-4 text-green-400 flex-shrink-0" />
+                  ) : (
+                    <Copy className="w-4 h-4 text-text-quaternary group-hover:text-text-secondary transition-colors flex-shrink-0" />
+                  )}
+                </button>
+              ) : (
+                <div className="w-full flex items-center justify-between p-3 rounded-xl bg-[#0d0d0d] border border-white/[0.06] opacity-60">
+                  <span className="text-sm text-text-quaternary italic">Leave blank</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="mt-4 pt-4 border-t border-white/[0.06]">
+            <ol className="text-xs text-text-tertiary space-y-1.5 list-decimal list-inside">
+              <li>
+                Open{' '}
+                <span className="text-text-secondary">
+                  claude.ai → Settings → Connectors → Add custom connector
+                </span>
+              </li>
+              <li>
+                Click each <span className="text-text-secondary">Copy</span> button above
+                and paste into the matching field
+              </li>
+              <li>
+                Under <span className="text-text-secondary">Advanced settings</span>,
+                paste OAuth Client ID + Secret
+              </li>
+              <li>
+                Click <span className="text-text-secondary">Add</span>, then{' '}
+                <span className="text-text-secondary">Connect</span>
+              </li>
+            </ol>
+          </div>
+        </Card>
+      </div>
+
+      {/* Webhooks */}
+      <div id="webhooks" className="space-y-3 scroll-mt-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
+            Webhooks
+          </h3>
+          <a
+            href="https://docs.omi.me/doc/developer/apps/Introduction"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-text-secondary hover:text-text-secondary transition-colors"
+          >
+            Docs ↗
+          </a>
+        </div>
+        <Card>
+          <div className="space-y-1">
+            {webhookTypes.map((webhook, index) => {
+              const webhookData = webhooks[webhook.id as keyof DeveloperWebhooks];
+              const isEnabled = webhookData?.enabled || false;
+              const Icon = webhook.icon;
+
+              return (
+                <div key={webhook.id}>
+                  {index > 0 && <div className="border-t border-white/[0.06] my-4" />}
+                  <div className="py-2">
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-3">
+                        <div className="p-2 rounded-lg bg-bg-tertiary">
+                          <Icon className="w-4 h-4 text-text-tertiary" />
+                        </div>
+                        <div>
+                          <p className="text-text-primary font-medium text-sm">
+                            {webhook.label}
+                          </p>
+                          <p className="text-xs text-text-tertiary">
+                            {webhook.description}
+                          </p>
+                        </div>
+                      </div>
+                      <Toggle
+                        enabled={isEnabled}
+                        onChange={(enabled) =>
+                          onWebhookChange(
+                            webhook.id,
+                            enabled,
+                            webhookUrls[webhook.id],
+                            webhook.hasDelay ? audioBytesDelay : undefined,
+                          )
+                        }
+                      />
+                    </div>
+                    {isEnabled && (
+                      <div className="mt-3 space-y-2">
+                        <input
+                          type="url"
+                          value={webhookUrls[webhook.id] || ''}
+                          onChange={(e) =>
+                            setWebhookUrls({
+                              ...webhookUrls,
+                              [webhook.id]: e.target.value,
+                            })
+                          }
+                          onBlur={() =>
+                            onWebhookChange(
+                              webhook.id,
+                              true,
+                              webhookUrls[webhook.id],
+                              webhook.hasDelay ? audioBytesDelay : undefined,
+                            )
+                          }
+                          placeholder="https://your-server.com/webhook"
+                          className="w-full px-3 py-2 rounded-lg bg-bg-tertiary border border-white/[0.06] text-text-primary text-sm placeholder:text-text-quaternary focus:outline-none focus:border-white/25"
+                        />
+                        {webhook.hasDelay && (
+                          <input
+                            type="number"
+                            value={audioBytesDelay}
+                            onChange={(e) => setAudioBytesDelay(e.target.value)}
+                            onBlur={() =>
+                              onWebhookChange(
+                                webhook.id,
+                                true,
+                                webhookUrls[webhook.id],
+                                audioBytesDelay,
+                              )
+                            }
+                            placeholder="Interval (seconds)"
+                            className="w-full px-3 py-2 rounded-lg bg-bg-tertiary border border-white/[0.06] text-text-primary text-sm placeholder:text-text-quaternary focus:outline-none focus:border-white/25"
+                          />
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </Card>
+      </div>
+
+      {/* Data Management */}
+      <div id="data-management" className="space-y-3 scroll-mt-4">
+        <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
+          Data Management
+        </h3>
+        <Card>
+          <button
+            onClick={onExportData}
+            disabled={isExporting}
+            className={cn(
+              'w-full flex items-center gap-4 py-3 transition-colors',
+              isExporting
+                ? 'text-text-tertiary cursor-not-allowed'
+                : 'text-text-primary hover:text-text-secondary',
+            )}
+          >
+            <div className="p-2 rounded-lg bg-bg-tertiary">
+              {isExporting ? (
+                <Loader2 className="w-5 h-5 text-text-tertiary animate-spin" />
+              ) : (
+                <Download className="w-5 h-5 text-text-tertiary" />
+              )}
+            </div>
+            <div className="flex-1 text-left">
+              <p className="font-medium">
+                {isExporting ? 'Exporting...' : 'Export All Data'}
+              </p>
+              <p className="text-xs text-text-tertiary">
+                {isExporting
+                  ? 'This may take a moment'
+                  : 'Export conversations to a JSON file'}
+              </p>
+            </div>
+            {!isExporting && <ExternalLink className="w-4 h-4 text-text-quaternary" />}
+          </button>
+        </Card>
+        <Card className="border-red-500/20">
+          <button
+            onClick={() => setShowDeleteGraphDialog(true)}
+            className="w-full flex items-center gap-4 py-3 text-text-primary hover:text-red-400 transition-colors"
+          >
+            <div className="p-2 rounded-lg bg-red-500/10">
+              <Network className="w-5 h-5 text-red-400" />
+            </div>
+            <div className="flex-1 text-left">
+              <p className="font-medium">Delete Knowledge Graph</p>
+              <p className="text-xs text-text-tertiary">
+                Clear all nodes and connections
+              </p>
+            </div>
+            <Trash2 className="w-4 h-4 text-text-quaternary" />
+          </button>
+        </Card>
+      </div>
+
+      {/* Experimental Features */}
+      <div id="experimental" className="space-y-3 scroll-mt-4">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold text-text-tertiary uppercase tracking-wider">
+            Experimental
+          </h3>
+          <FlaskConical className="w-4 h-4 text-text-secondary" />
+        </div>
+        <Card>
+          <div className="space-y-1">
+            {/* Transcription Diagnostics */}
+            <div className="flex items-center justify-between py-3 border-b border-white/[0.06]">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-bg-tertiary">
+                  <Activity className="w-4 h-4 text-text-tertiary" />
+                </div>
+                <div>
+                  <p className="text-text-primary font-medium text-sm">
+                    Transcription Diagnostics
+                  </p>
+                  <p className="text-xs text-text-tertiary">
+                    Detailed diagnostic messages
+                  </p>
+                </div>
+              </div>
+              <Toggle
+                enabled={experimentalFeatures.transcriptionDiagnostics}
+                onChange={(v) => updateExperimentalFeature('transcriptionDiagnostics', v)}
+              />
+            </div>
+
+            {/* Auto-create Speakers */}
+            <div className="flex items-center justify-between py-3 border-b border-white/[0.06]">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-bg-tertiary">
+                  <UserPlus className="w-4 h-4 text-text-tertiary" />
+                </div>
+                <div>
+                  <p className="text-text-primary font-medium text-sm">
+                    Auto-create Speakers
+                  </p>
+                  <p className="text-xs text-text-tertiary">
+                    Auto-create when name detected
+                  </p>
+                </div>
+              </div>
+              <Toggle
+                enabled={experimentalFeatures.autoCreateSpeakers}
+                onChange={(v) => updateExperimentalFeature('autoCreateSpeakers', v)}
+              />
+            </div>
+
+            {/* Follow-up Questions */}
+            <div className="flex items-center justify-between py-3 border-b border-white/[0.06]">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-bg-tertiary">
+                  <Lightbulb className="w-4 h-4 text-text-tertiary" />
+                </div>
+                <div>
+                  <p className="text-text-primary font-medium text-sm">
+                    Follow-up Questions
+                  </p>
+                  <p className="text-xs text-text-tertiary">
+                    Suggest questions after conversations
+                  </p>
+                </div>
+              </div>
+              <Toggle
+                enabled={experimentalFeatures.followUpQuestions}
+                onChange={(v) => updateExperimentalFeature('followUpQuestions', v)}
+              />
+            </div>
+
+            {/* Goal Tracker */}
+            <div className="flex items-center justify-between py-3 border-b border-white/[0.06]">
+              <div className="flex items-center gap-3">
+                <div className="p-2 rounded-lg bg-bg-tertiary">
+                  <Target className="w-4 h-4 text-text-tertiary" />
+                </div>
+                <div>
+                  <p className="text-text-primary font-medium text-sm">Goal Tracker</p>
+                  <p className="text-xs text-text-tertiary">
+                    Track your personal goals on homepage
+                  </p>
+                </div>
+              </div>
+              <Toggle
+                enabled={experimentalFeatures.goalTracker}
+                onChange={(v) => updateExperimentalFeature('goalTracker', v)}
+              />
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Links */}
+      <Card>
+        <a
+          href="https://docs.omi.me"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center justify-between py-3 text-text-primary hover:text-text-secondary transition-colors"
+        >
+          <div className="flex items-center gap-3">
+            <BookOpen className="w-5 h-5 text-text-tertiary" />
+            <span>API Documentation</span>
+          </div>
+          <ExternalLink className="w-4 h-4" />
+        </a>
+      </Card>
+
+      {/* Dialogs */}
+      <CreateApiKeyDialog
+        isOpen={showApiKeyDialog}
+        onClose={() => setShowApiKeyDialog(false)}
+        onCreateKey={onCreateApiKey}
+      />
+      <CreateMcpKeyDialog
+        isOpen={showMcpKeyDialog}
+        onClose={() => setShowMcpKeyDialog(false)}
+        onCreateKey={onCreateMcpKey}
+      />
+
+      {/* Delete Knowledge Graph Dialog */}
+      {showDeleteGraphDialog && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+          onClick={() => setShowDeleteGraphDialog(false)}
+        >
+          <div
+            className="bg-bg-secondary rounded-2xl w-full max-w-md mx-4 p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-3 rounded-xl bg-red-500/20">
+                <AlertTriangle className="w-6 h-6 text-red-400" />
+              </div>
+              <h3 className="text-lg font-semibold text-text-primary">
+                Delete Knowledge Graph?
+              </h3>
+            </div>
+            <p className="text-text-secondary text-sm mb-6">
+              This will delete all derived knowledge graph data (nodes and connections).
+              Your original memories will remain safe. The graph will be rebuilt over
+              time.
+            </p>
+            <div className="flex gap-3">
+              <button
+                onClick={() => setShowDeleteGraphDialog(false)}
+                className="flex-1 py-3 rounded-xl bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => {
+                  onDeleteKnowledgeGraph();
+                  setShowDeleteGraphDialog(false);
+                }}
+                className="flex-1 py-3 rounded-xl bg-red-500 text-white hover:bg-red-600 transition-colors"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/web/app/src/features/settings/ui/PrivacySection.tsx b/web/app/src/features/settings/ui/PrivacySection.tsx
new file mode 100644
index 00000000000..47e59f19752
--- /dev/null
+++ b/web/app/src/features/settings/ui/PrivacySection.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { Shield, ExternalLink } from 'lucide-react';
+import { Toggle, Card, SettingRow } from './settingsPrimitives';
+
+export function PrivacySection({
+  recordingPermission,
+  trainingDataOptIn,
+  onRecordingChange,
+  onTrainingDataChange,
+}: {
+  recordingPermission: boolean;
+  trainingDataOptIn: boolean;
+  onRecordingChange: (enabled: boolean) => void;
+  onTrainingDataChange: (enabled: boolean) => void;
+}) {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <SettingRow
+          label="Store Recordings"
+          description="Allow storing audio recordings for improved accuracy"
+        >
+          <Toggle enabled={recordingPermission} onChange={onRecordingChange} />
+        </SettingRow>
+
+        <SettingRow
+          label="Training Data"
+          description="Help improve Omi by contributing anonymous usage data"
+        >
+          <Toggle enabled={trainingDataOptIn} onChange={onTrainingDataChange} />
+        </SettingRow>
+      </Card>
+
+      <Card className="border-white/25">
+        <div className="flex items-start gap-4">
+          <div className="p-2 rounded-lg bg-white/[0.08]">
+            <Shield className="w-5 h-5 text-text-secondary" />
+          </div>
+          <div>
+            <h3 className="text-text-primary font-medium">Your Privacy Matters</h3>
+            <p className="text-sm text-text-tertiary mt-1">
+              Your data is encrypted and never shared with third parties. You have full
+              control over what data is collected and stored.
+            </p>
+            <a
+              href="https://omi.me/privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-sm text-text-secondary hover:underline mt-2"
+            >
+              Learn more about our privacy policy
+              <ExternalLink className="w-3.5 h-3.5" />
+            </a>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/web/app/src/features/settings/ui/ProfileSection.tsx b/web/app/src/features/settings/ui/ProfileSection.tsx
new file mode 100644
index 00000000000..98fd5eaeb4b
--- /dev/null
+++ b/web/app/src/features/settings/ui/ProfileSection.tsx
@@ -0,0 +1,225 @@
+'use client';
+
+import { useState } from 'react';
+import Image from '@tschk/moonshine-next/image';
+import { Copy, Check, Plus, X } from 'lucide-react';
+import { SUPPORTED_LANGUAGES } from '@/types/user';
+import type { DailySummarySettings } from '@/types/user';
+import { cn } from '@/lib/utils';
+import { Toggle, Card, SettingRow, Dropdown, HourPicker } from './settingsPrimitives';
+
+export function ProfileSection({
+  user,
+  onCopyUserId,
+  language,
+  vocabulary,
+  onLanguageChange,
+  onAddWord,
+  onRemoveWord,
+  dailySummary,
+  onDailySummaryToggle,
+  onDailySummaryHourChange,
+}: {
+  user: any;
+  onCopyUserId: () => void;
+  language: string;
+  vocabulary: string[];
+  onLanguageChange: (lang: string) => void;
+  onAddWord: (word: string) => void;
+  onRemoveWord: (word: string) => void;
+  dailySummary: DailySummarySettings;
+  onDailySummaryToggle: (enabled: boolean) => void;
+  onDailySummaryHourChange: (hour: number) => void;
+}) {
+  const [copiedUserId, setCopiedUserId] = useState(false);
+  const [newWord, setNewWord] = useState('');
+
+  const handleCopy = () => {
+    onCopyUserId();
+    setCopiedUserId(true);
+    setTimeout(() => setCopiedUserId(false), 2000);
+  };
+
+  const handleAddWord = () => {
+    if (newWord.trim()) {
+      onAddWord(newWord.trim());
+      setNewWord('');
+    }
+  };
+
+  const languageOptions = SUPPORTED_LANGUAGES.map((l) => ({
+    value: l.code,
+    label: l.name,
+  }));
+
+  return (
+    <div className="space-y-8">
+      {/* Account Info */}
+      <div id="account-info" className="space-y-3 scroll-mt-4">
+        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
+          Account
+        </h3>
+        <Card>
+          <div className="flex items-center gap-5">
+            <div className="w-20 h-20 rounded-full overflow-hidden bg-bg-tertiary ring-2 ring-white/25 flex-shrink-0">
+              {user?.photoURL ? (
+                <Image
+                  src={user.photoURL}
+                  alt={user.displayName || 'User'}
+                  width={80}
+                  height={80}
+                  className="object-cover w-full h-full"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-text-tertiary text-2xl font-medium">
+                  {user?.displayName?.charAt(0) || 'U'}
+                </div>
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <h3 className="text-lg font-semibold text-text-primary truncate">
+                {user?.displayName || 'User'}
+              </h3>
+              <p className="text-text-tertiary truncate">{user?.email}</p>
+            </div>
+          </div>
+        </Card>
+
+        <Card>
+          <SettingRow label="User ID" description="Your unique identifier">
+            <div className="flex items-center gap-2">
+              <code className="text-sm text-text-tertiary font-mono bg-bg-tertiary px-3 py-1.5 rounded-lg">
+                {user?.uid?.slice(0, 8)}...{user?.uid?.slice(-4)}
+              </code>
+              <button
+                onClick={handleCopy}
+                className={cn(
+                  'p-2 rounded-lg transition-colors',
+                  copiedUserId
+                    ? 'bg-green-500/10 text-green-400'
+                    : 'bg-bg-tertiary text-text-secondary hover:bg-bg-quaternary',
+                )}
+              >
+                {copiedUserId ? (
+                  <Check className="w-4 h-4" />
+                ) : (
+                  <Copy className="w-4 h-4" />
+                )}
+              </button>
+            </div>
+          </SettingRow>
+        </Card>
+      </div>
+
+      {/* Language & Transcription */}
+      <div id="language" className="space-y-3 scroll-mt-4">
+        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
+          Language & Transcription
+        </h3>
+        <Card>
+          <SettingRow
+            label="Primary Language"
+            description="Default language for transcription"
+          >
+            <Dropdown
+              value={language}
+              options={languageOptions}
+              onChange={onLanguageChange}
+            />
+          </SettingRow>
+        </Card>
+      </div>
+
+      {/* Custom Vocabulary */}
+      <div id="vocabulary" className="space-y-3 scroll-mt-4">
+        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
+          Custom Vocabulary
+        </h3>
+        <Card>
+          <div className="space-y-4">
+            <p className="text-sm text-text-tertiary">
+              Add words or phrases to improve transcription accuracy
+            </p>
+
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={newWord}
+                onChange={(e) => setNewWord(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleAddWord()}
+                placeholder="Enter a word or phrase"
+                className={cn(
+                  'flex-1 px-4 py-2.5 rounded-xl',
+                  'bg-bg-tertiary border border-white/[0.06]',
+                  'text-text-primary placeholder:text-text-quaternary',
+                  'focus:outline-none focus:border-white/25',
+                )}
+              />
+              <button
+                onClick={handleAddWord}
+                disabled={!newWord.trim()}
+                className={cn(
+                  'px-4 py-2.5 rounded-xl font-medium',
+                  'bg-text-primary text-bg-primary',
+                  'hover:bg-text-primary/90 transition-colors',
+                  'disabled:opacity-50 disabled:cursor-not-allowed',
+                )}
+              >
+                <Plus className="w-5 h-5" />
+              </button>
+            </div>
+
+            {vocabulary.length > 0 && (
+              <div className="flex flex-wrap gap-2 pt-2">
+                {vocabulary.map((word) => (
+                  <span
+                    key={word}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-bg-tertiary text-text-secondary text-sm"
+                  >
+                    {word}
+                    <button
+                      onClick={() => onRemoveWord(word)}
+                      className="text-text-quaternary hover:text-red-400 transition-colors"
+                    >
+                      <X className="w-3.5 h-3.5" />
+                    </button>
+                  </span>
+                ))}
+              </div>
+            )}
+
+            {vocabulary.length === 0 && (
+              <p className="text-sm text-text-quaternary text-center py-4">
+                No custom vocabulary added yet
+              </p>
+            )}
+          </div>
+        </Card>
+      </div>
+
+      {/* Notifications */}
+      <div id="notifications" className="space-y-3 scroll-mt-4">
+        <h3 className="text-sm font-medium text-text-tertiary uppercase tracking-wider">
+          Notifications
+        </h3>
+        <Card>
+          <SettingRow
+            label="Daily Summary"
+            description="Receive a daily digest of your action items"
+          >
+            <Toggle enabled={dailySummary.enabled} onChange={onDailySummaryToggle} />
+          </SettingRow>
+
+          {dailySummary.enabled && (
+            <SettingRow
+              label="Delivery Time"
+              description="When to receive your daily summary"
+            >
+              <HourPicker value={dailySummary.hour} onChange={onDailySummaryHourChange} />
+            </SettingRow>
+          )}
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/web/app/src/features/settings/ui/SettingsPage.tsx b/web/app/src/features/settings/ui/SettingsPage.tsx
new file mode 100644
index 00000000000..a012050a382
--- /dev/null
+++ b/web/app/src/features/settings/ui/SettingsPage.tsx
@@ -0,0 +1,577 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useRouter, useSearchParams } from '@tschk/moonshine-next/navigation';
+import { Loader2, AlertTriangle, Settings } from 'lucide-react';
+import { useAuth } from '@/features/auth';
+import { useToast } from '@/shared/ui/Toast';
+import { PageHeader } from '@/components/layout/PageHeader';
+import {
+  SECTION_INFO,
+  SIGNED_OUT_DESTINATION,
+  isSettingsSectionId,
+  type SettingsSectionId,
+  toWebhookApiType,
+  ACCOUNT_QUICK_NAV,
+  DEVELOPER_QUICK_NAV,
+} from '../model';
+import {
+  getUserLanguage,
+  setUserLanguage,
+  getDailySummarySettings,
+  updateDailySummarySettings,
+  getRecordingPermission,
+  setRecordingPermission,
+  getTrainingDataOptIn,
+  setTrainingDataOptIn,
+  deleteAccount,
+  getAllUsageData,
+  getUserSubscription,
+  getCustomVocabulary,
+  updateCustomVocabulary,
+  getDeveloperWebhook,
+  getDeveloperWebhooksStatus,
+  setDeveloperWebhook,
+  enableDeveloperWebhook,
+  disableDeveloperWebhook,
+  getDeveloperApiKeys,
+  createDeveloperApiKey,
+  deleteDeveloperApiKey,
+  getMcpApiKeys,
+  createMcpApiKey,
+  deleteMcpApiKey,
+  exportAllData,
+  getAvailablePlans,
+} from '../api';
+import { deleteKnowledgeGraph } from '@/features/memories';
+import type {
+  DailySummarySettings,
+  UserSubscription,
+  AllUsageData,
+  DeveloperWebhooks,
+  DeveloperApiKey,
+  McpApiKey,
+  PricingOption,
+} from '@/types/user';
+
+import { ProfileSection } from './ProfileSection';
+import { PrivacySection } from './PrivacySection';
+import { AccountSection } from './AccountSection';
+import { DeveloperSection } from './DeveloperSection';
+import { ConfirmDialog } from './settingsPrimitives';
+
+type SettingsSection = SettingsSectionId;
+
+export function SettingsPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { user, signOut } = useAuth();
+  const { showToast } = useToast();
+  const [isExporting, setIsExporting] = useState(false);
+
+  // Get section from URL, default to 'account'
+  const sectionParam = searchParams.get('section');
+  const activeSection: SettingsSection =
+    sectionParam && isSettingsSectionId(sectionParam) ? sectionParam : 'account';
+
+  // Track which sections have been loaded (using ref to avoid dependency issues)
+  const loadedSectionsRef = useRef<Set<SettingsSection>>(new Set());
+  const [sectionLoading, setSectionLoading] = useState<SettingsSection | null>(null);
+
+  // Settings state - each section's data
+  const [language, setLanguage] = useState('en');
+  const [vocabulary, setVocabulary] = useState<string[]>([]);
+  const [dailySummary, setDailySummary] = useState<DailySummarySettings>({
+    enabled: true,
+    hour: 22,
+  });
+  const [recordingPermission, setRecordingPermissionState] = useState(false);
+  const [trainingDataOptIn, setTrainingDataOptInState] = useState(false);
+  const [allUsage, setAllUsage] = useState<AllUsageData | null>(null);
+  const [subscription, setSubscription] = useState<UserSubscription | null>(null);
+  const [cachedPlans, setCachedPlans] = useState<PricingOption[] | null>(null);
+  const [apiKeys, setApiKeys] = useState<DeveloperApiKey[]>([]);
+  const [mcpKeys, setMcpKeys] = useState<McpApiKey[]>([]);
+  const [webhooks, setWebhooks] = useState<DeveloperWebhooks>({});
+
+  // Dialog states
+  const [showSignOutDialog, setShowSignOutDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Load section data on demand
+  useEffect(() => {
+    const section = activeSection;
+    if (loadedSectionsRef.current.has(section)) return;
+
+    const loadSectionData = async () => {
+      setSectionLoading(section);
+      try {
+        switch (section) {
+          case 'privacy':
+            const [recording, training] = await Promise.all([
+              getRecordingPermission().catch(() => ({ enabled: false })),
+              getTrainingDataOptIn().catch(() => ({ opted_in: false })),
+            ]);
+            setRecordingPermissionState(recording.enabled);
+            setTrainingDataOptInState(training.opted_in);
+            break;
+          case 'account':
+            // The merged Account section renders the former Profile and Account
+            // groups together, so it loads both sets in one pass.
+            const [lang, vocab, summary, usageData, sub, plansData] = await Promise.all([
+              getUserLanguage().catch(() => 'en'),
+              getCustomVocabulary().catch(() => []),
+              getDailySummarySettings().catch(() => ({ enabled: true, hour: 22 })),
+              getAllUsageData().catch(() => null),
+              getUserSubscription().catch(() => null),
+              getAvailablePlans().catch(() => null),
+            ]);
+            setLanguage(lang);
+            setVocabulary(vocab);
+            setDailySummary(summary);
+            setAllUsage(usageData);
+            setSubscription(sub);
+            if (plansData?.plans) {
+              setCachedPlans(plansData.plans);
+            }
+            break;
+          case 'developer':
+            // Fetch API keys, MCP keys, webhook status, and individual webhook URLs in parallel
+            // Note: Status API returns boolean fields, URL API returns {url: string}
+            const [
+              keys,
+              mKeys,
+              webhookStatus,
+              memoryUrl,
+              transcriptUrl,
+              audioBytesUrl,
+              daySummaryUrl,
+            ] = await Promise.all([
+              getDeveloperApiKeys().catch(() => []),
+              getMcpApiKeys().catch(() => []),
+              getDeveloperWebhooksStatus().catch(() => ({})),
+              getDeveloperWebhook('memory_created').catch(() => ({ url: '' })),
+              getDeveloperWebhook('realtime_transcript').catch(() => ({ url: '' })),
+              getDeveloperWebhook('audio_bytes').catch(() => ({ url: '' })),
+              getDeveloperWebhook('day_summary').catch(() => ({ url: '' })),
+            ]);
+            setApiKeys(keys);
+            // Full MCP key is only returned at creation time; keep secrets in memory for this session only.
+            if (typeof window !== 'undefined') {
+              localStorage.removeItem('omi_mcp_api_key_secrets');
+            }
+            setMcpKeys(mKeys);
+            // Combine status (booleans) with URLs
+            const statusMap = webhookStatus as Record<string, boolean>;
+            setWebhooks({
+              memory_created: {
+                url: memoryUrl?.url || '',
+                enabled: statusMap['memory_created'] ?? false,
+              },
+              transcript_received: {
+                url: transcriptUrl?.url || '',
+                enabled: statusMap['realtime_transcript'] ?? false,
+              },
+              audio_bytes: {
+                url: audioBytesUrl?.url || '',
+                enabled: statusMap['audio_bytes'] ?? false,
+              },
+              day_summary: {
+                url: daySummaryUrl?.url || '',
+                enabled: statusMap['day_summary'] ?? false,
+              },
+            });
+            break;
+          // sections not listed here don't need API calls
+        }
+        loadedSectionsRef.current.add(section);
+      } catch (error) {
+        console.error(`Failed to load ${section} settings:`, error);
+      } finally {
+        setSectionLoading(null);
+      }
+    };
+
+    loadSectionData();
+  }, [activeSection]);
+
+  // Handlers
+  const handleLanguageChange = async (newLanguage: string) => {
+    const oldLanguage = language;
+    setLanguage(newLanguage);
+    try {
+      await setUserLanguage(newLanguage);
+    } catch {
+      setLanguage(oldLanguage);
+    }
+  };
+
+  const handleAddWord = async (word: string) => {
+    const newVocabulary = [...vocabulary, word];
+    setVocabulary(newVocabulary);
+    try {
+      await updateCustomVocabulary(newVocabulary);
+    } catch {
+      setVocabulary(vocabulary);
+    }
+  };
+
+  const handleRemoveWord = async (word: string) => {
+    const newVocabulary = vocabulary.filter((w) => w !== word);
+    setVocabulary(newVocabulary);
+    try {
+      await updateCustomVocabulary(newVocabulary);
+    } catch {
+      setVocabulary(vocabulary);
+    }
+  };
+
+  const handleDailySummaryToggle = async (enabled: boolean) => {
+    const oldSettings = dailySummary;
+    setDailySummary({ ...dailySummary, enabled });
+    try {
+      await updateDailySummarySettings({ ...dailySummary, enabled });
+    } catch {
+      setDailySummary(oldSettings);
+    }
+  };
+
+  const handleDailySummaryHourChange = async (hour: number) => {
+    const oldSettings = dailySummary;
+    setDailySummary({ ...dailySummary, hour });
+    try {
+      await updateDailySummarySettings({ ...dailySummary, hour });
+    } catch {
+      setDailySummary(oldSettings);
+    }
+  };
+
+  const handleRecordingPermissionChange = async (enabled: boolean) => {
+    const oldValue = recordingPermission;
+    setRecordingPermissionState(enabled);
+    try {
+      await setRecordingPermission(enabled);
+    } catch {
+      setRecordingPermissionState(oldValue);
+    }
+  };
+
+  const handleTrainingDataChange = async (optIn: boolean) => {
+    const oldValue = trainingDataOptIn;
+    setTrainingDataOptInState(optIn);
+    try {
+      await setTrainingDataOptIn(optIn);
+    } catch {
+      setTrainingDataOptInState(oldValue);
+    }
+  };
+
+  const refreshSubscription = async () => {
+    try {
+      const [usageData, sub] = await Promise.all([
+        getAllUsageData().catch(() => null),
+        getUserSubscription().catch(() => null),
+      ]);
+      setAllUsage(usageData);
+      setSubscription(sub);
+    } catch (error) {
+      console.error('Failed to refresh subscription:', error);
+    }
+  };
+
+  const handleCopyUserId = () => {
+    if (user?.uid) {
+      navigator.clipboard.writeText(user.uid);
+    }
+  };
+
+  const handleCreateApiKey = async (
+    name: string,
+    scopes: string[],
+  ): Promise<DeveloperApiKey | null> => {
+    try {
+      const newKey = await createDeveloperApiKey(name, scopes);
+      setApiKeys([...apiKeys, newKey]);
+      return newKey;
+    } catch (error) {
+      console.error('Failed to create API key:', error);
+      return null;
+    }
+  };
+
+  const handleDeleteApiKey = async (keyId: string) => {
+    try {
+      await deleteDeveloperApiKey(keyId);
+      setApiKeys(apiKeys.filter((k) => k.id !== keyId));
+    } catch (error) {
+      console.error('Failed to delete API key:', error);
+    }
+  };
+
+  const handleCreateMcpKey = async (name: string): Promise<McpApiKey | null> => {
+    try {
+      const newKey = await createMcpApiKey(name);
+      setMcpKeys([...mcpKeys, newKey]);
+      return newKey;
+    } catch (error) {
+      console.error('Failed to create MCP key:', error);
+      return null;
+    }
+  };
+
+  const handleDeleteMcpKey = async (keyId: string) => {
+    try {
+      await deleteMcpApiKey(keyId);
+      setMcpKeys(mcpKeys.filter((k) => k.id !== keyId));
+    } catch (error) {
+      console.error('Failed to delete MCP key:', error);
+    }
+  };
+
+  const handleExportData = async () => {
+    if (isExporting) return;
+    setIsExporting(true);
+    try {
+      const blob = await exportAllData();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'omi-export.json';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      showToast('Data exported successfully', 'success');
+    } catch (error) {
+      console.error('Failed to export data:', error);
+      showToast('Failed to export data. Please try again.', 'error');
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleDeleteKnowledgeGraph = async () => {
+    try {
+      await deleteKnowledgeGraph();
+    } catch (error) {
+      console.error('Failed to delete knowledge graph:', error);
+    }
+  };
+
+  const handleWebhookChange = async (
+    type: string,
+    enabled: boolean,
+    url?: string,
+    delay?: string,
+  ) => {
+    const webhookType = toWebhookApiType(type);
+    try {
+      // For audio_bytes, combine URL and delay if both are provided
+      const webhookUrl = type === 'audio_bytes' && url && delay ? `${url},${delay}` : url;
+      if (webhookUrl) {
+        await setDeveloperWebhook(webhookType, webhookUrl);
+      }
+      if (enabled) {
+        await enableDeveloperWebhook(webhookType);
+      } else {
+        await disableDeveloperWebhook(webhookType);
+      }
+      setWebhooks({
+        ...webhooks,
+        [type]: {
+          enabled,
+          url: url || webhooks[type as keyof DeveloperWebhooks]?.url || '',
+        },
+      });
+    } catch (error) {
+      console.error('Failed to update webhook:', error);
+    }
+  };
+
+  const handleSignOut = async () => {
+    await signOut();
+    router.push(SIGNED_OUT_DESTINATION);
+  };
+
+  const handleDeleteAccount = async () => {
+    setIsDeleting(true);
+    try {
+      await deleteAccount();
+      await signOut();
+      router.push(SIGNED_OUT_DESTINATION);
+    } catch {
+      setIsDeleting(false);
+    }
+  };
+
+  const renderSection = () => {
+    // Show loading spinner when section is loading
+    if (sectionLoading === activeSection) {
+      return (
+        <div className="h-64 flex items-center justify-center">
+          <Loader2 className="w-8 h-8 text-text-primary animate-spin" />
+        </div>
+      );
+    }
+
+    switch (activeSection) {
+      case 'privacy':
+        return (
+          <PrivacySection
+            recordingPermission={recordingPermission}
+            trainingDataOptIn={trainingDataOptIn}
+            onRecordingChange={handleRecordingPermissionChange}
+            onTrainingDataChange={handleTrainingDataChange}
+          />
+        );
+      case 'account':
+        return (
+          <div className="space-y-10">
+            <ProfileSection
+              user={user}
+              onCopyUserId={handleCopyUserId}
+              language={language}
+              vocabulary={vocabulary}
+              onLanguageChange={handleLanguageChange}
+              onAddWord={handleAddWord}
+              onRemoveWord={handleRemoveWord}
+              dailySummary={dailySummary}
+              onDailySummaryToggle={handleDailySummaryToggle}
+              onDailySummaryHourChange={handleDailySummaryHourChange}
+            />
+            <AccountSection
+              allUsage={allUsage}
+              subscription={subscription}
+              cachedPlans={cachedPlans}
+              onSubscriptionUpdate={refreshSubscription}
+              onSignOut={() => setShowSignOutDialog(true)}
+              onDeleteAccount={() => setShowDeleteDialog(true)}
+            />
+          </div>
+        );
+      case 'developer':
+        return (
+          <DeveloperSection
+            apiKeys={apiKeys}
+            mcpKeys={mcpKeys}
+            webhooks={webhooks}
+            onCreateApiKey={handleCreateApiKey}
+            onDeleteApiKey={handleDeleteApiKey}
+            onCreateMcpKey={handleCreateMcpKey}
+            onDeleteMcpKey={handleDeleteMcpKey}
+            onWebhookChange={handleWebhookChange}
+            onExportData={handleExportData}
+            isExporting={isExporting}
+            onDeleteKnowledgeGraph={handleDeleteKnowledgeGraph}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const sectionInfo = SECTION_INFO[activeSection];
+
+  // Quick nav sections for each settings section
+  const getQuickNavSections = () => {
+    switch (activeSection) {
+      case 'account':
+        return [...ACCOUNT_QUICK_NAV];
+      case 'developer':
+        return [...DEVELOPER_QUICK_NAV];
+      default:
+        return [];
+    }
+  };
+
+  const quickNavSections = getQuickNavSections();
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Export in-progress dialog */}
+      {isExporting && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          <div className="absolute inset-0 bg-black/60" />
+          <div className="relative bg-bg-secondary rounded-2xl p-6 max-w-sm w-full mx-4 shadow-2xl border border-white/[0.06]">
+            <div className="flex flex-col items-center text-center gap-4">
+              <div className="p-3 rounded-full bg-white/[0.08]">
+                <Loader2 className="w-8 h-8 text-text-secondary animate-spin" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-text-primary">
+                  Exporting Your Data
+                </h3>
+                <p className="text-text-secondary mt-2 text-sm">
+                  This may take a moment depending on the amount of data in your account.
+                </p>
+              </div>
+              <div className="flex items-center gap-2 bg-yellow-500/10 rounded-xl px-4 py-2">
+                <AlertTriangle className="w-4 h-4 text-yellow-400 flex-shrink-0" />
+                <span className="text-xs text-yellow-400">
+                  Please don&apos;t close this tab
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Page Header */}
+      <PageHeader title={sectionInfo.title} icon={Settings} showBackButton />
+
+      {/* Main Content with optional Quick Nav */}
+      <main className="flex-1 overflow-y-auto pb-12">
+        <div className="max-w-4xl mx-auto px-6 lg:px-8 pt-6">
+          <div className="flex gap-6">
+            {/* Main content */}
+            <div className="flex-1 min-w-0">{renderSection()}</div>
+
+            {/* Quick Nav Sidebar - only show on desktop when there are sections */}
+            {quickNavSections.length > 0 && (
+              <div className="hidden lg:block w-32 flex-shrink-0">
+                <div className="sticky top-4">
+                  <p className="text-xs font-medium text-text-quaternary uppercase tracking-wider mb-3">
+                    On this page
+                  </p>
+                  <nav className="space-y-1">
+                    {quickNavSections.map((section) => (
+                      <a
+                        key={section.id}
+                        href={`#${section.id}`}
+                        className="block text-sm text-text-tertiary hover:text-text-primary transition-colors py-1"
+                      >
+                        {section.label}
+                      </a>
+                    ))}
+                  </nav>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+
+      {/* Dialogs */}
+      <ConfirmDialog
+        isOpen={showSignOutDialog}
+        title="Sign Out"
+        message="Are you sure you want to sign out?"
+        confirmLabel="Sign Out"
+        onConfirm={handleSignOut}
+        onCancel={() => setShowSignOutDialog(false)}
+      />
+
+      <ConfirmDialog
+        isOpen={showDeleteDialog}
+        title="Delete Account"
+        message="This action cannot be undone. All your data, conversations, and settings will be permanently deleted."
+        confirmLabel="Delete Account"
+        onConfirm={handleDeleteAccount}
+        onCancel={() => setShowDeleteDialog(false)}
+        isDestructive
+        isLoading={isDeleting}
+      />
+    </div>
+  );
+}
diff --git a/web/app/src/features/settings/ui/UsageSection.tsx b/web/app/src/features/settings/ui/UsageSection.tsx
new file mode 100644
index 00000000000..f25059c5f4c
--- /dev/null
+++ b/web/app/src/features/settings/ui/UsageSection.tsx
@@ -0,0 +1,1021 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Crown,
+  CreditCard,
+  Loader2,
+  Zap,
+  AlertTriangle,
+  Clock,
+  Check,
+  Mic,
+  MessageSquare,
+  Lightbulb,
+  Brain,
+  X,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { decodePlan, planGrantsPaidCapability } from '@/types/user';
+import type {
+  AllUsageData,
+  UserSubscription,
+  PricingOption,
+  UsageHistoryPoint,
+  UserUsage,
+} from '@/types/user';
+import {
+  getAvailablePlans,
+  createCheckoutSession,
+  upgradeSubscription,
+  cancelSubscription,
+  getCustomerPortal,
+} from '../api';
+import { Card, ConfirmDialog } from './settingsPrimitives';
+
+type UsagePeriod = 'today' | 'monthly' | 'yearly' | 'all_time';
+
+const PERIOD_LABELS: Record<UsagePeriod, string> = {
+  today: 'Today',
+  monthly: 'This Month',
+  yearly: 'This Year',
+  all_time: 'All Time',
+};
+
+function UsageChart({
+  history,
+  period,
+}: {
+  history?: UsageHistoryPoint[];
+  period: UsagePeriod;
+}) {
+  const [selectedMetric, setSelectedMetric] = useState<
+    'listening' | 'words' | 'insights' | 'memories'
+  >('listening');
+
+  if (!history || history.length === 0) {
+    return (
+      <Card className="h-48 flex items-center justify-center">
+        <p className="text-text-quaternary">No activity data available</p>
+      </Card>
+    );
+  }
+
+  // For all_time with many data points, aggregate by year
+  let dataToProcess = history;
+  if (period === 'all_time' && history.length > 12) {
+    // Group by year and aggregate
+    const yearlyData = new Map<string, UsageHistoryPoint>();
+    history.forEach((point) => {
+      const date = new Date(point.date);
+      const key = String(date.getFullYear());
+      const existing = yearlyData.get(key);
+      if (existing) {
+        yearlyData.set(key, {
+          date: `${key}-01-01`,
+          transcription_seconds:
+            existing.transcription_seconds + point.transcription_seconds,
+          words_transcribed: existing.words_transcribed + point.words_transcribed,
+          insights_gained: existing.insights_gained + point.insights_gained,
+          memories_created: existing.memories_created + point.memories_created,
+        });
+      } else {
+        yearlyData.set(key, { ...point, date: `${key}-01-01` });
+      }
+    });
+    dataToProcess = Array.from(yearlyData.values()).sort((a, b) =>
+      a.date.localeCompare(b.date),
+    );
+  }
+
+  // Process history data for display
+  const processedData = dataToProcess.map((point, index) => {
+    // Parse date string - handles both "YYYY-MM-DD" and "YYYY-MM-DDTHH:MM:SSZ" formats
+    let label = '';
+
+    if (period === 'today') {
+      // For today, extract hour from ISO format "2026-01-02T00:00:00Z"
+      const timeMatch = point.date.match(/T(\d{2}):/);
+      const hour = timeMatch ? parseInt(timeMatch[1], 10) : 0;
+      label = `${hour}:00`;
+    } else {
+      // For other periods, parse the date portion "YYYY-MM-DD"
+      const datePart = point.date.split('T')[0]; // Get date part before 'T'
+      const [year, month, day] = datePart.split('-').map(Number);
+
+      if (period === 'monthly') {
+        label = `${day}`;
+      } else if (period === 'yearly') {
+        label = [
+          'Jan',
+          'Feb',
+          'Mar',
+          'Apr',
+          'May',
+          'Jun',
+          'Jul',
+          'Aug',
+          'Sep',
+          'Oct',
+          'Nov',
+          'Dec',
+        ][month - 1];
+      } else {
+        // For all_time, show year
+        label = String(year);
+      }
+    }
+    return { ...point, label, index };
+  });
+
+  // Get value based on selected metric
+  const getValue = (d: UsageHistoryPoint) => {
+    switch (selectedMetric) {
+      case 'listening':
+        return d.transcription_seconds / 60; // Convert to minutes
+      case 'words':
+        return d.words_transcribed;
+      case 'insights':
+        return d.insights_gained;
+      case 'memories':
+        return d.memories_created;
+    }
+  };
+
+  // Format value for display
+  const formatValue = (value: number) => {
+    if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
+    if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;
+    return Math.round(value).toLocaleString();
+  };
+
+  // Format value with unit
+  const formatValueWithUnit = (value: number) => {
+    const formatted = formatValue(value);
+    switch (selectedMetric) {
+      case 'listening':
+        return `${formatted} min`;
+      case 'words':
+        return formatted;
+      case 'insights':
+        return formatted;
+      case 'memories':
+        return formatted;
+    }
+  };
+
+  // Find max value for scaling
+  const maxValue = Math.max(...processedData.map((d) => getValue(d)), 1);
+
+  const metricConfig = [
+    { key: 'listening' as const, color: 'rgb(96, 165, 250)', label: 'Listening' },
+    { key: 'words' as const, color: 'rgb(74, 222, 128)', label: 'Words' },
+    { key: 'insights' as const, color: 'rgb(251, 146, 60)', label: 'Insights' },
+    { key: 'memories' as const, color: 'rgb(192, 132, 252)', label: 'Memories' },
+  ];
+
+  const currentMetric = metricConfig.find((m) => m.key === selectedMetric)!;
+
+  return (
+    <Card>
+      {/* Header with metric selector */}
+      <div className="flex items-center justify-between mb-4">
+        <h4 className="text-sm font-semibold text-text-secondary">Activity Over Time</h4>
+        <div className="flex gap-1">
+          {metricConfig.map((metric) => (
+            <button
+              key={metric.key}
+              onClick={() => setSelectedMetric(metric.key)}
+              className={cn(
+                'px-2.5 py-1 rounded-md text-xs font-medium transition-all',
+                selectedMetric === metric.key
+                  ? 'opacity-100'
+                  : 'opacity-40 hover:opacity-60',
+              )}
+              style={{
+                backgroundColor:
+                  selectedMetric === metric.key ? `${metric.color}20` : 'transparent',
+                color: metric.color,
+              }}
+            >
+              {metric.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Bar Chart */}
+      <div className="flex items-end gap-4 pt-2">
+        {processedData.map((d, i) => {
+          const value = getValue(d);
+          // Calculate height in pixels (max 100px), with minimum 8px for visibility
+          const maxBarHeight = 100;
+          const barHeight = Math.max((value / maxValue) * maxBarHeight, 8);
+          // Convert rgb(r,g,b) to rgba format for opacity
+          const rgbMatch = currentMetric.color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+          const rgba = rgbMatch
+            ? `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, 0.5)`
+            : currentMetric.color;
+          return (
+            <div key={i} className="flex-1 flex flex-col items-center">
+              {/* Value on top */}
+              <span
+                className="text-xs font-bold mb-2 whitespace-nowrap"
+                style={{ color: currentMetric.color }}
+              >
+                {formatValueWithUnit(value)}
+              </span>
+              {/* Bar with fixed pixel height */}
+              <div
+                className="w-full max-w-[80px] rounded-t-lg transition-all duration-300"
+                style={{
+                  height: `${barHeight}px`,
+                  backgroundColor: rgba,
+                }}
+              />
+              {/* Label */}
+              <span className="text-xs text-text-quaternary mt-2 font-medium">
+                {d.label}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}
+
+type PlanUsageTab = 'plan' | 'usage';
+
+function UnknownPlanCard() {
+  return (
+    <Card>
+      <div className="flex items-start gap-3">
+        <div className="w-10 h-10 rounded-xl bg-white/[0.08] flex items-center justify-center flex-shrink-0">
+          <AlertTriangle className="w-5 h-5 text-text-secondary" />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-text-primary">Plan unavailable</h3>
+          <p className="text-sm text-text-tertiary mt-1">
+            This account uses a plan that this version of Omi does not recognize yet. Plan
+            features are unavailable until the plan can be identified.
+          </p>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export function UsageSectionContent({
+  allUsage,
+  subscription,
+  onSubscriptionUpdate,
+  cachedPlans,
+}: {
+  allUsage: AllUsageData | null;
+  subscription: UserSubscription | null;
+  onSubscriptionUpdate: () => void;
+  cachedPlans: PricingOption[] | null;
+}) {
+  const [activeTab, setActiveTab] = useState<PlanUsageTab>('plan');
+  const [selectedPeriod, setSelectedPeriod] = useState<UsagePeriod>('all_time');
+  const [selectedPriceId, setSelectedPriceId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+  const [isCanceling, setIsCanceling] = useState(false);
+  const [showUpgradeOptions, setShowUpgradeOptions] = useState(false);
+
+  // Set initial selected price when plans load, and keep it in sync when the
+  // subscription's current price changes (e.g. after a plan change or
+  // cancellation) so a pending-cancellation user isn't left on a stale option.
+  const currentPriceId = subscription?.current_price_id;
+  useEffect(() => {
+    if (cachedPlans && cachedPlans.length > 0) {
+      const activePlan = cachedPlans.find((p) => p.is_active || p.id === currentPriceId);
+      if (activePlan) {
+        setSelectedPriceId(activePlan.id);
+      } else if (!selectedPriceId) {
+        setSelectedPriceId(cachedPlans[0].id);
+      }
+    }
+  }, [cachedPlans, currentPriceId]);
+
+  const formatDuration = (seconds: number) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    if (hours > 0) {
+      return `${hours}h ${minutes}m`;
+    }
+    return `${minutes}m`;
+  };
+
+  const formatNumber = (num: number) => {
+    if (num >= 1000) {
+      return `${(num / 1000).toFixed(1)}k`;
+    }
+    return num.toString();
+  };
+
+  const formatDate = (timestamp: number) => {
+    return new Date(timestamp * 1000).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  // Get usage for selected period
+  const usage = allUsage ? allUsage[selectedPeriod] : null;
+  const monthlyUsage = allUsage?.monthly;
+  const periods: UsagePeriod[] = ['today', 'monthly', 'yearly', 'all_time'];
+
+  // Default limits for basic plan (1200 minutes = 72000 seconds)
+  const limits = {
+    transcription_seconds: 72000, // 1200 minutes
+    words_transcribed: 50000,
+    insights_gained: 100,
+    memories_created: 50,
+  };
+
+  const planIdentity = subscription
+    ? (subscription.plan_identity ?? decodePlan(subscription.plan))
+    : null;
+  const isUnlimited = planIdentity ? planGrantsPaidCapability(planIdentity) : false;
+  const isUnknownPlan = planIdentity?.kind === 'unknown';
+  const isCancelingSubscription = subscription?.cancel_at_period_end;
+
+  // Calculate usage percentages for basic plan
+  const getUsagePercent = (used: number, limit: number) => {
+    if (limit <= 0) return 0;
+    return Math.min((used / limit) * 100, 100);
+  };
+
+  // Sort pricing options: monthly first, then annual
+  const sortedOptions = cachedPlans
+    ? [...cachedPlans].sort((a, b) => {
+        const aIsAnnual =
+          a.interval === 'year' || a.title?.toLowerCase().includes('annual');
+        const bIsAnnual =
+          b.interval === 'year' || b.title?.toLowerCase().includes('annual');
+        return (aIsAnnual ? 1 : 0) - (bIsAnnual ? 1 : 0);
+      })
+    : [];
+
+  const selectedOption = cachedPlans?.find((p) => p.id === selectedPriceId);
+
+  // Default features for unlimited plan
+  const defaultFeatures = [
+    'Unlimited conversations',
+    'Unlimited memories',
+    'Priority processing',
+    'Advanced insights',
+  ];
+
+  const handleSubscribe = async () => {
+    if (!selectedPriceId) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const isCurrentPlan =
+        selectedOption?.is_active ||
+        selectedOption?.id === subscription?.current_price_id;
+
+      if (isCancelingSubscription && selectedPriceId !== subscription?.current_price_id) {
+        setError('Plan changes are available after your current subscription ends.');
+        return;
+      }
+
+      if (isUnlimited && !isCancelingSubscription && !isCurrentPlan) {
+        const result = await upgradeSubscription(selectedPriceId);
+        if (result?.status === 'success' || result?.scheduled_start) {
+          onSubscriptionUpdate();
+        } else {
+          setError(result?.message || 'Failed to upgrade plan');
+        }
+      } else {
+        const result = await createCheckoutSession(selectedPriceId);
+        if (result?.url) {
+          window.open(result.url, '_blank');
+          const handleFocus = () => {
+            onSubscriptionUpdate();
+            window.removeEventListener('focus', handleFocus);
+          };
+          window.addEventListener('focus', handleFocus);
+        } else if (result?.status === 'reactivated') {
+          onSubscriptionUpdate();
+        } else {
+          setError('Failed to create checkout session');
+        }
+      }
+    } catch (err) {
+      setError('An error occurred. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleManagePayment = async () => {
+    setIsLoading(true);
+    try {
+      const result = await getCustomerPortal();
+      if (result?.url) {
+        window.open(result.url, '_blank');
+        const handleFocus = () => {
+          onSubscriptionUpdate();
+          window.removeEventListener('focus', handleFocus);
+        };
+        window.addEventListener('focus', handleFocus);
+      } else {
+        setError('Failed to open payment portal');
+      }
+    } catch (err) {
+      setError('Failed to open payment portal');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCancelSubscription = async () => {
+    setIsCanceling(true);
+    try {
+      const result = await cancelSubscription();
+      if (result?.status === 'success' || result?.cancel_at_period_end) {
+        onSubscriptionUpdate();
+        setShowCancelConfirm(false);
+      } else {
+        setError(result?.message || 'Failed to cancel subscription');
+      }
+    } catch (err) {
+      setError('Failed to cancel subscription');
+    } finally {
+      setIsCanceling(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Tab Switcher */}
+      <div className="flex gap-1 p-1 bg-bg-tertiary rounded-xl w-fit">
+        <button
+          onClick={() => setActiveTab('plan')}
+          className={cn(
+            'px-4 py-2 rounded-lg text-sm font-medium transition-all',
+            activeTab === 'plan'
+              ? 'bg-text-primary text-bg-primary shadow-md'
+              : 'text-text-secondary hover:text-text-primary hover:bg-bg-quaternary',
+          )}
+        >
+          Plan
+        </button>
+        <button
+          onClick={() => setActiveTab('usage')}
+          className={cn(
+            'px-4 py-2 rounded-lg text-sm font-medium transition-all',
+            activeTab === 'usage'
+              ? 'bg-text-primary text-bg-primary shadow-md'
+              : 'text-text-secondary hover:text-text-primary hover:bg-bg-quaternary',
+          )}
+        >
+          Usage
+        </button>
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'plan' ? (
+        /* PLAN TAB - Unknown plans remain neutral; known plans choose Basic vs paid. */
+        <div className="space-y-6">
+          {isUnknownPlan ? (
+            <UnknownPlanCard />
+          ) : !isUnlimited ? (
+            /* BASIC PLAN VIEW */
+            <>
+              {/* Current Plan Card */}
+              <Card className="relative overflow-hidden">
+                {/* Header */}
+                <div className="flex items-start justify-between mb-6">
+                  <div className="flex items-center gap-3">
+                    <div className="w-12 h-12 rounded-2xl bg-white/[0.08] flex items-center justify-center">
+                      <Zap className="w-6 h-6 text-text-secondary" />
+                    </div>
+                    <div>
+                      <h3 className="text-xl font-semibold text-text-primary">
+                        Basic Plan
+                      </h3>
+                      <p className="text-sm text-text-tertiary">Free tier</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => setShowUpgradeOptions(true)}
+                      className="px-5 py-2.5 bg-text-primary hover:bg-text-primary/90 text-bg-primary text-sm font-semibold rounded-xl transition-all shadow-lg shadow-black/40"
+                    >
+                      Upgrade to Unlimited
+                    </button>
+                    {subscription?.stripe_subscription_id && (
+                      <button
+                        onClick={handleManagePayment}
+                        disabled={isLoading}
+                        className="px-4 py-2.5 border border-bg-quaternary text-text-secondary hover:text-text-primary text-sm font-medium rounded-xl transition-colors disabled:opacity-50"
+                      >
+                        Billing &amp; Invoices
+                      </button>
+                    )}
+                  </div>
+                </div>
+
+                {/* Monthly Listening Usage */}
+                <div className="p-4 bg-amber-500/5 border border-amber-500/20 rounded-xl mb-6">
+                  <div className="flex items-center gap-2 mb-3">
+                    <Clock className="w-4 h-4 text-amber-400" />
+                    <span className="text-sm font-semibold text-amber-400">
+                      Monthly Listening Limit
+                    </span>
+                  </div>
+                  <div className="flex items-baseline justify-between mb-2">
+                    <span className="text-2xl font-bold text-text-primary">
+                      {monthlyUsage
+                        ? Math.round(monthlyUsage.transcription_seconds / 60)
+                        : 0}
+                      <span className="text-sm font-normal text-text-tertiary ml-1">
+                        / 1,200 min
+                      </span>
+                    </span>
+                    <span className="text-sm text-text-tertiary">
+                      {monthlyUsage
+                        ? 1200 - Math.round(monthlyUsage.transcription_seconds / 60)
+                        : 1200}{' '}
+                      min left
+                    </span>
+                  </div>
+                  <div className="h-2.5 bg-bg-quaternary rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-gradient-to-r from-amber-500 to-amber-400 rounded-full transition-all duration-500"
+                      style={{
+                        width: `${monthlyUsage ? getUsagePercent(monthlyUsage.transcription_seconds, limits.transcription_seconds) : 0}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+
+                {/* What's Included - Checklist */}
+                <div>
+                  <h4 className="text-sm font-semibold text-text-secondary mb-3">
+                    What&apos;s included
+                  </h4>
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-3">
+                      <div className="w-5 h-5 rounded bg-amber-500/20 flex items-center justify-center flex-shrink-0">
+                        <Clock className="w-3 h-3 text-amber-400" />
+                      </div>
+                      <span className="text-sm text-text-secondary">
+                        <span className="font-medium text-text-primary">
+                          1,200 minutes
+                        </span>{' '}
+                        of listening per month
+                        <span className="text-amber-400 text-xs ml-1">(limited)</span>
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div className="w-5 h-5 rounded bg-green-500/20 flex items-center justify-center flex-shrink-0">
+                        <Check className="w-3 h-3 text-green-400" />
+                      </div>
+                      <span className="text-sm text-text-secondary">
+                        <span className="font-medium text-text-primary">Unlimited</span>{' '}
+                        words transcribed
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div className="w-5 h-5 rounded bg-green-500/20 flex items-center justify-center flex-shrink-0">
+                        <Check className="w-3 h-3 text-green-400" />
+                      </div>
+                      <span className="text-sm text-text-secondary">
+                        <span className="font-medium text-text-primary">Unlimited</span>{' '}
+                        insights
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div className="w-5 h-5 rounded bg-green-500/20 flex items-center justify-center flex-shrink-0">
+                        <Check className="w-3 h-3 text-green-400" />
+                      </div>
+                      <span className="text-sm text-text-secondary">
+                        <span className="font-medium text-text-primary">Unlimited</span>{' '}
+                        memories
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </Card>
+
+              {/* Billing error surfaced in the Basic view (not only the upgrade panel) */}
+              {error && !showUpgradeOptions && (
+                <div className="flex items-center gap-2 p-3 bg-red-500/10 rounded-xl border border-red-500/20">
+                  <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0" />
+                  <p className="text-sm text-red-400">{error}</p>
+                </div>
+              )}
+
+              {/* Upgrade Options (shown when clicked) */}
+              {showUpgradeOptions && (
+                <Card className="border-white/25">
+                  <div className="flex items-center justify-between mb-5">
+                    <div>
+                      <h4 className="text-lg font-semibold text-text-primary">
+                        Choose a Plan
+                      </h4>
+                      <p className="text-sm text-text-tertiary">
+                        Unlock unlimited listening time
+                      </p>
+                    </div>
+                    <button
+                      onClick={() => setShowUpgradeOptions(false)}
+                      className="p-2 hover:bg-bg-tertiary rounded-lg transition-colors"
+                    >
+                      <X className="w-5 h-5 text-text-quaternary" />
+                    </button>
+                  </div>
+
+                  {/* Plan Selection */}
+                  {sortedOptions.length > 0 ? (
+                    <div className="grid grid-cols-2 gap-4 mb-5">
+                      {sortedOptions.map((option) => {
+                        const isSelected = selectedPriceId === option.id;
+                        const isAnnual =
+                          option.interval === 'year' ||
+                          option.title?.toLowerCase().includes('annual');
+
+                        return (
+                          <button
+                            key={option.id}
+                            onClick={() => setSelectedPriceId(option.id)}
+                            className={cn(
+                              'relative p-5 rounded-2xl border-2 text-left transition-all',
+                              isSelected
+                                ? 'border-white/25 bg-white/[0.08] shadow-lg shadow-black/40'
+                                : 'border-bg-tertiary hover:border-white/25 bg-bg-tertiary/30',
+                            )}
+                          >
+                            {isAnnual && (
+                              <span className="absolute -top-2.5 right-3 px-3 py-1 bg-text-primary text-bg-primary text-[10px] font-bold rounded-full uppercase tracking-wide">
+                                Best Value
+                              </span>
+                            )}
+                            <h4 className="font-semibold text-text-primary mb-1">
+                              {option.title}
+                            </h4>
+                            <p className="text-2xl font-bold text-text-primary">
+                              {option.price_string}
+                            </p>
+                            {option.description && (
+                              <p className="text-xs text-text-secondary mt-2 font-medium">
+                                {option.description}
+                              </p>
+                            )}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  ) : (
+                    <div className="flex items-center justify-center py-8">
+                      <Loader2 className="w-6 h-6 text-text-primary animate-spin" />
+                    </div>
+                  )}
+
+                  {/* Error Message */}
+                  {error && (
+                    <div className="flex items-center gap-2 p-3 bg-red-500/10 rounded-xl mb-4 border border-red-500/20">
+                      <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0" />
+                      <p className="text-sm text-red-400">{error}</p>
+                    </div>
+                  )}
+
+                  <button
+                    onClick={handleSubscribe}
+                    disabled={isLoading || !selectedPriceId}
+                    className={cn(
+                      'w-full py-3.5 rounded-xl font-semibold transition-all',
+                      'bg-text-primary text-bg-primary',
+                      'hover:bg-text-primary/90',
+                      'shadow-lg shadow-black/40',
+                      'disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none',
+                    )}
+                  >
+                    {isLoading ? (
+                      <span className="flex items-center justify-center gap-2">
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        Processing...
+                      </span>
+                    ) : (
+                      'Continue to Payment'
+                    )}
+                  </button>
+                </Card>
+              )}
+
+              {/* This Month Stats - Compact Single Row */}
+              <Card>
+                <h4 className="text-sm font-semibold text-text-secondary mb-4">
+                  This month
+                </h4>
+                <div className="grid grid-cols-4 gap-3">
+                  <div className="text-center">
+                    <div className="w-10 h-10 mx-auto rounded-xl bg-blue-500/10 flex items-center justify-center mb-2">
+                      <Mic className="w-5 h-5 text-blue-400" />
+                    </div>
+                    <p className="text-xl font-bold text-blue-400">
+                      {monthlyUsage
+                        ? formatDuration(monthlyUsage.transcription_seconds)
+                        : '0m'}
+                    </p>
+                    <p className="text-xs text-text-quaternary">Listening</p>
+                  </div>
+                  <div className="text-center">
+                    <div className="w-10 h-10 mx-auto rounded-xl bg-green-500/10 flex items-center justify-center mb-2">
+                      <MessageSquare className="w-5 h-5 text-green-400" />
+                    </div>
+                    <p className="text-xl font-bold text-green-400">
+                      {monthlyUsage ? formatNumber(monthlyUsage.words_transcribed) : '0'}
+                    </p>
+                    <p className="text-xs text-text-quaternary">Words</p>
+                  </div>
+                  <div className="text-center">
+                    <div className="w-10 h-10 mx-auto rounded-xl bg-orange-500/10 flex items-center justify-center mb-2">
+                      <Lightbulb className="w-5 h-5 text-orange-400" />
+                    </div>
+                    <p className="text-xl font-bold text-orange-400">
+                      {monthlyUsage?.insights_gained || 0}
+                    </p>
+                    <p className="text-xs text-text-quaternary">Insights</p>
+                  </div>
+                  <div className="text-center">
+                    <div className="w-10 h-10 mx-auto rounded-xl bg-white/[0.08] flex items-center justify-center mb-2">
+                      <Brain className="w-5 h-5 text-text-secondary" />
+                    </div>
+                    <p className="text-xl font-bold text-text-secondary">
+                      {monthlyUsage?.memories_created || 0}
+                    </p>
+                    <p className="text-xs text-text-quaternary">Memories</p>
+                  </div>
+                </div>
+              </Card>
+            </>
+          ) : (
+            /* UNLIMITED PLAN VIEW */
+            <>
+              {/* Header */}
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-white/[0.14] flex items-center justify-center">
+                  <Crown className="w-5 h-5 text-text-secondary" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-text-primary">
+                    {isCancelingSubscription ? 'Your Plan' : 'Manage Your Plan'}
+                  </h3>
+                  {subscription?.current_period_end && (
+                    <p className="text-xs text-text-quaternary">
+                      {isCancelingSubscription
+                        ? `Cancels on ${formatDate(subscription.current_period_end)}`
+                        : `Renews ${formatDate(subscription.current_period_end)}`}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Plan Selection */}
+              {sortedOptions.length > 0 ? (
+                <div className="grid grid-cols-2 gap-3">
+                  {sortedOptions.map((option) => {
+                    const isSelected = selectedPriceId === option.id;
+                    const isCurrent =
+                      option.is_active || option.id === subscription?.current_price_id;
+                    const isAnnual =
+                      option.interval === 'year' ||
+                      option.title?.toLowerCase().includes('annual');
+
+                    return (
+                      <button
+                        key={option.id}
+                        onClick={() => setSelectedPriceId(option.id)}
+                        disabled={isCancelingSubscription && !isCurrent}
+                        className={cn(
+                          'relative p-4 rounded-xl border-2 text-left transition-all',
+                          isSelected
+                            ? 'border-white/25 bg-white/[0.08]'
+                            : 'border-bg-tertiary hover:border-bg-quaternary bg-bg-tertiary/50',
+                          isCancelingSubscription &&
+                            !isCurrent &&
+                            'cursor-not-allowed opacity-50',
+                        )}
+                      >
+                        {isAnnual && (
+                          <span className="absolute -top-2 right-2 px-2 py-0.5 bg-text-primary text-bg-primary text-[10px] font-medium rounded-full">
+                            POPULAR
+                          </span>
+                        )}
+
+                        <h4 className="font-medium text-text-primary mb-1">
+                          {option.title}
+                        </h4>
+                        <p className="text-lg font-bold text-text-primary">
+                          {option.price_string}
+                        </p>
+                        {option.description && (
+                          <p className="text-xs text-text-secondary mt-1">
+                            {option.description}
+                          </p>
+                        )}
+
+                        {isCurrent && (
+                          <span className="inline-flex items-center gap-1 mt-2 px-2 py-0.5 bg-green-500/10 text-green-400 text-xs rounded-full">
+                            <Check className="w-3 h-3" />
+                            Current
+                          </span>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="w-6 h-6 text-text-primary animate-spin" />
+                </div>
+              )}
+
+              {isCancelingSubscription && subscription?.current_period_end && (
+                <p className="text-sm text-text-tertiary">
+                  You can reactivate your current plan now. Plan changes are available
+                  after {formatDate(subscription.current_period_end)}.
+                </p>
+              )}
+
+              {/* Features List */}
+              <div className="space-y-2">
+                <h4 className="text-sm font-medium text-text-secondary">Features:</h4>
+                <ul className="space-y-2">
+                  {defaultFeatures.map((feature, idx) => (
+                    <li key={idx} className="flex items-start gap-2">
+                      <Check className="w-4 h-4 text-text-secondary flex-shrink-0 mt-0.5" />
+                      <span className="text-sm text-text-tertiary">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Error Message */}
+              {error && (
+                <div className="flex items-center gap-2 p-3 bg-red-500/10 rounded-lg">
+                  <AlertTriangle className="w-4 h-4 text-red-400 flex-shrink-0" />
+                  <p className="text-sm text-red-400">{error}</p>
+                </div>
+              )}
+
+              {/* Primary Action Button */}
+              <button
+                onClick={handleSubscribe}
+                disabled={
+                  isLoading ||
+                  !selectedPriceId ||
+                  (!isCancelingSubscription &&
+                    (selectedOption?.is_active ||
+                      selectedOption?.id === subscription?.current_price_id)) ||
+                  (isCancelingSubscription &&
+                    selectedPriceId !== subscription?.current_price_id)
+                }
+                className={cn(
+                  'w-full py-3 rounded-xl font-medium transition-colors',
+                  'bg-text-primary text-bg-primary',
+                  'hover:bg-text-primary/90',
+                  'disabled:opacity-50 disabled:cursor-not-allowed',
+                )}
+              >
+                {isLoading ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Processing...
+                  </span>
+                ) : isCancelingSubscription ? (
+                  'Reactivate Subscription'
+                ) : selectedOption?.is_active ||
+                  selectedOption?.id === subscription?.current_price_id ? (
+                  'Current Plan'
+                ) : (
+                  'Change Plan'
+                )}
+              </button>
+
+              {/* Secondary Actions */}
+              <div className="pt-4 border-t border-bg-tertiary space-y-3">
+                <button
+                  onClick={handleManagePayment}
+                  disabled={isLoading}
+                  className="w-full flex items-center justify-center gap-2 py-2.5 text-text-secondary hover:text-text-primary transition-colors"
+                >
+                  <CreditCard className="w-4 h-4" />
+                  <span className="text-sm">Manage Billing &amp; Invoices</span>
+                </button>
+
+                {!isCancelingSubscription && (
+                  <button
+                    onClick={() => setShowCancelConfirm(true)}
+                    disabled={isLoading}
+                    className="w-full py-2.5 text-sm text-red-400/70 hover:text-red-400 transition-colors"
+                  >
+                    Cancel Subscription
+                  </button>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      ) : (
+        /* USAGE TAB */
+        <div className="space-y-6">
+          {/* Period Tabs */}
+          <div className="flex gap-1 p-1 bg-bg-tertiary rounded-xl">
+            {periods.map((period) => (
+              <button
+                key={period}
+                onClick={() => setSelectedPeriod(period)}
+                className={cn(
+                  'flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-all',
+                  selectedPeriod === period
+                    ? 'bg-text-primary text-bg-primary shadow-md'
+                    : 'text-text-secondary hover:text-text-primary hover:bg-bg-quaternary',
+                )}
+              >
+                {PERIOD_LABELS[period]}
+              </button>
+            ))}
+          </div>
+
+          {/* Stats Summary - Compact Single Row */}
+          <Card>
+            <div className="grid grid-cols-4 gap-3">
+              <div className="text-center">
+                <div className="w-10 h-10 mx-auto rounded-xl bg-blue-500/10 flex items-center justify-center mb-2">
+                  <Mic className="w-5 h-5 text-blue-400" />
+                </div>
+                <p className="text-xl font-bold text-blue-400">
+                  {usage ? formatDuration(usage.transcription_seconds) : '0m'}
+                </p>
+                <p className="text-xs text-text-quaternary">Listening</p>
+              </div>
+              <div className="text-center">
+                <div className="w-10 h-10 mx-auto rounded-xl bg-green-500/10 flex items-center justify-center mb-2">
+                  <MessageSquare className="w-5 h-5 text-green-400" />
+                </div>
+                <p className="text-xl font-bold text-green-400">
+                  {usage ? formatNumber(usage.words_transcribed) : '0'}
+                </p>
+                <p className="text-xs text-text-quaternary">Words</p>
+              </div>
+              <div className="text-center">
+                <div className="w-10 h-10 mx-auto rounded-xl bg-orange-500/10 flex items-center justify-center mb-2">
+                  <Lightbulb className="w-5 h-5 text-orange-400" />
+                </div>
+                <p className="text-xl font-bold text-orange-400">
+                  {usage?.insights_gained || 0}
+                </p>
+                <p className="text-xs text-text-quaternary">Insights</p>
+              </div>
+              <div className="text-center">
+                <div className="w-10 h-10 mx-auto rounded-xl bg-white/[0.08] flex items-center justify-center mb-2">
+                  <Brain className="w-5 h-5 text-text-secondary" />
+                </div>
+                <p className="text-xl font-bold text-text-secondary">
+                  {usage?.memories_created || 0}
+                </p>
+                <p className="text-xs text-text-quaternary">Memories</p>
+              </div>
+            </div>
+          </Card>
+
+          {/* Usage Trends Chart */}
+          <UsageChart history={usage?.history} period={selectedPeriod} />
+        </div>
+      )}
+
+      {/* Cancel Subscription Confirmation Dialog */}
+      <ConfirmDialog
+        isOpen={showCancelConfirm}
+        title="Cancel Subscription?"
+        message={
+          subscription?.current_period_end
+            ? `Your subscription will remain active until ${formatDate(subscription.current_period_end)}. After that, you'll be moved to the Free plan.`
+            : "Are you sure you want to cancel your subscription? You'll lose access to unlimited features."
+        }
+        confirmLabel="Cancel Subscription"
+        onConfirm={handleCancelSubscription}
+        onCancel={() => setShowCancelConfirm(false)}
+        isDestructive={true}
+        isLoading={isCanceling}
+      />
+    </div>
+  );
+}
+
+// ============================================================================
+// Developer Section
+// ============================================================================
diff --git a/web/app/src/features/settings/ui/settingsPrimitives.tsx b/web/app/src/features/settings/ui/settingsPrimitives.tsx
new file mode 100644
index 00000000000..c46a57a532d
--- /dev/null
+++ b/web/app/src/features/settings/ui/settingsPrimitives.tsx
@@ -0,0 +1,274 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { ChevronDown, Loader2, AlertTriangle, Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export function Toggle({
+  enabled,
+  onChange,
+  disabled = false,
+}: {
+  enabled: boolean;
+  onChange: (enabled: boolean) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => !disabled && onChange(!enabled)}
+      disabled={disabled}
+      className={cn(
+        'relative w-11 h-6 rounded-full transition-all duration-200 flex-shrink-0',
+        enabled
+          ? 'bg-text-primary shadow-[0_0_12px_rgba(255,255,255,0.25)]'
+          : 'bg-white/[0.08]',
+        disabled && 'opacity-50 cursor-not-allowed',
+      )}
+    >
+      <div
+        className={cn(
+          'absolute top-0.5 w-5 h-5 rounded-full bg-white transition-all duration-200 shadow-sm',
+          enabled ? 'left-[22px]' : 'left-0.5',
+        )}
+      />
+    </button>
+  );
+}
+
+export function Card({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl p-5',
+        // Layered background for depth instead of harsh border
+        'bg-gradient-to-b from-white/[0.03] to-white/[0.01]',
+        // Soft shadow stack
+        'shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_2px_4px_rgba(0,0,0,0.1),0_8px_16px_rgba(0,0,0,0.1)]',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SettingRow({
+  label,
+  description,
+  children,
+}: {
+  label: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between py-4 border-b border-white/[0.04] last:border-0">
+      <div className="flex-1 min-w-0 mr-4">
+        <p className="text-[15px] text-white/85 font-medium">{label}</p>
+        {description && (
+          <p className="text-[13px] text-white/40 mt-0.5 leading-relaxed">
+            {description}
+          </p>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export function Dropdown({
+  value,
+  options,
+  onChange,
+  placeholder = 'Select...',
+}: {
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const selectedOption = options.find((o) => o.value === value);
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          'flex items-center justify-between gap-2 px-4 py-2.5 rounded-xl',
+          'bg-white/[0.04] ring-1 ring-white/[0.06]',
+          'text-white/80 min-w-[160px]',
+          'hover:bg-white/[0.06] transition-colors',
+        )}
+      >
+        <span className="truncate text-sm">{selectedOption?.label || placeholder}</span>
+        <ChevronDown
+          className={cn(
+            'w-4 h-4 text-white/40 transition-transform',
+            isOpen && 'rotate-180',
+          )}
+        />
+      </button>
+
+      {isOpen && (
+        <div
+          className={cn(
+            'absolute z-50 w-full mt-2 py-1.5 rounded-xl max-h-64 overflow-y-auto',
+            'bg-[#1a1a1f]/95 backdrop-blur-xl',
+            'shadow-[0_0_0_1px_rgba(255,255,255,0.06),0_10px_30px_-5px_rgba(0,0,0,0.5)]',
+          )}
+        >
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => {
+                onChange(option.value);
+                setIsOpen(false);
+              }}
+              className={cn(
+                'w-full px-4 py-2.5 text-left transition-colors flex items-center justify-between text-sm',
+                option.value === value
+                  ? 'bg-white/[0.08] text-white'
+                  : 'text-white/70 hover:bg-white/[0.04] hover:text-white/90',
+              )}
+            >
+              <span>{option.label}</span>
+              {option.value === value && (
+                <Check className="w-4 h-4 text-text-secondary" />
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function HourPicker({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (hour: number) => void;
+}) {
+  const hours = Array.from({ length: 24 }, (_, i) => {
+    const hour = i;
+    const period = hour >= 12 ? 'PM' : 'AM';
+    const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+    return {
+      value: hour.toString(),
+      label: `${displayHour}:00 ${period}`,
+    };
+  });
+
+  return (
+    <Dropdown
+      value={value.toString()}
+      options={hours}
+      onChange={(v) => onChange(parseInt(v))}
+      placeholder="Select time"
+    />
+  );
+}
+
+export function ConfirmDialog({
+  isOpen,
+  title,
+  message,
+  confirmLabel,
+  onConfirm,
+  onCancel,
+  isDestructive = false,
+  isLoading = false,
+}: {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  confirmLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isDestructive?: boolean;
+  isLoading?: boolean;
+}) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60" onClick={onCancel} />
+      <div className="relative bg-bg-secondary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl border border-white/[0.06]">
+        <div className="flex items-start gap-4 mb-4">
+          <div
+            className={cn(
+              'p-2 rounded-full',
+              isDestructive ? 'bg-red-500/10' : 'bg-white/[0.08]',
+            )}
+          >
+            <AlertTriangle
+              className={cn(
+                'w-6 h-6',
+                isDestructive ? 'text-red-400' : 'text-text-secondary',
+              )}
+            />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
+            <p className="text-text-secondary mt-1">{message}</p>
+          </div>
+        </div>
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onCancel}
+            disabled={isLoading}
+            className={cn(
+              'px-4 py-2 rounded-xl font-medium',
+              'bg-bg-tertiary text-text-primary',
+              'hover:bg-bg-quaternary transition-colors',
+              'disabled:opacity-50',
+            )}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={cn(
+              'px-4 py-2 rounded-xl font-medium flex items-center gap-2',
+              isDestructive
+                ? 'bg-red-500 text-white hover:bg-red-600'
+                : 'bg-text-primary text-bg-primary hover:bg-text-primary/90',
+              'transition-colors disabled:opacity-50',
+            )}
+          >
+            {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Profile Section
+// ============================================================================
diff --git a/web/app/src/features/tasks/ARCHITECTURE.md b/web/app/src/features/tasks/ARCHITECTURE.md
new file mode 100644
index 00000000000..6a5cd291f81
--- /dev/null
+++ b/web/app/src/features/tasks/ARCHITECTURE.md
@@ -0,0 +1,10 @@
+# tasks
+
+Destination `/tasks`. `useHomeTasks` is also consumed by the home hub.
+
+- `api.ts` — action-item CRUD
+- `model.ts` — due labels and due-window grouping
+- `useActionItems.ts` — `createActionItemsStore` (optimistic list)
+- `useHomeTasks.ts` — `useAsyncResource` for the hub's short open-task list
+- `taskExport.ts` — copy/download
+- `ui/` — hub, cards, calendar, bulk bar
diff --git a/web/app/src/features/tasks/__tests__/groupActionItems.test.ts b/web/app/src/features/tasks/__tests__/groupActionItems.test.ts
new file mode 100644
index 00000000000..c727c23bdb9
--- /dev/null
+++ b/web/app/src/features/tasks/__tests__/groupActionItems.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { groupActionItems } from '../model';
+import type { ActionItem } from '@/types/conversation';
+
+const NOW = new Date(2026, 0, 15, 9, 30);
+
+function item(overrides: Partial<ActionItem>): ActionItem {
+  return {
+    id: '1',
+    description: 'task',
+    completed: false,
+    created_at: '2026-01-01T00:00:00Z',
+    ...overrides,
+  } as ActionItem;
+}
+
+describe('groupActionItems', () => {
+  it('puts completed items only in completed, even when they have a due date', () => {
+    const grouped = groupActionItems(
+      [item({ id: 'c', completed: true, due_at: new Date(2026, 0, 10).toISOString() })],
+      NOW,
+    );
+    expect(grouped.completed).toHaveLength(1);
+    expect(grouped.overdue).toHaveLength(0);
+  });
+
+  it('buckets pending items by due window', () => {
+    const grouped = groupActionItems(
+      [
+        item({ id: 'overdue', due_at: new Date(2026, 0, 10, 12).toISOString() }),
+        item({ id: 'today', due_at: new Date(2026, 0, 15, 18).toISOString() }),
+        item({ id: 'none' }),
+      ],
+      NOW,
+    );
+    expect(grouped.overdue.map((i) => i.id)).toEqual(['overdue']);
+    expect(grouped.today.map((i) => i.id)).toEqual(['today']);
+    expect(grouped.noDueDate.map((i) => i.id)).toEqual(['none']);
+  });
+});
diff --git a/web/app/src/lib/__tests__/taskDue.test.ts b/web/app/src/features/tasks/__tests__/taskDue.test.ts
similarity index 99%
rename from web/app/src/lib/__tests__/taskDue.test.ts
rename to web/app/src/features/tasks/__tests__/taskDue.test.ts
index 8e1a1998a2b..43be3605d7c 100644
--- a/web/app/src/lib/__tests__/taskDue.test.ts
+++ b/web/app/src/features/tasks/__tests__/taskDue.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { daysUntilDue, formatDueBadge, formatDueStatus } from '../taskDue';
+import { daysUntilDue, formatDueBadge, formatDueStatus } from '../model';
 
 // Fixed local-time reference so the whole-day maths is deterministic.
 const NOW = new Date(2026, 0, 15, 9, 30);
diff --git a/web/app/src/lib/__tests__/taskExport.test.ts b/web/app/src/features/tasks/__tests__/taskExport.test.ts
similarity index 98%
rename from web/app/src/lib/__tests__/taskExport.test.ts
rename to web/app/src/features/tasks/__tests__/taskExport.test.ts
index ec4f5c81ec3..58a78996788 100644
--- a/web/app/src/lib/__tests__/taskExport.test.ts
+++ b/web/app/src/features/tasks/__tests__/taskExport.test.ts
@@ -3,7 +3,7 @@ import {
   exportTasksToCSV,
   exportTasksToJSON,
   exportTasksToMarkdown,
-} from '@/lib/taskExport';
+} from '@/features/tasks/taskExport';
 import type { ActionItem } from '@/types/conversation';
 
 function task(overrides: Partial<ActionItem> = {}): ActionItem {
diff --git a/web/app/src/features/tasks/__tests__/useActionItems.test.tsx b/web/app/src/features/tasks/__tests__/useActionItems.test.tsx
new file mode 100644
index 00000000000..28d3ed57432
--- /dev/null
+++ b/web/app/src/features/tasks/__tests__/useActionItems.test.tsx
@@ -0,0 +1,95 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { ActionItem } from '@/types/conversation';
+
+vi.mock('@/lib/cache', () => ({
+  onCacheInvalidation: vi.fn(() => () => {}),
+  invalidationPatterns: { actionItems: 'actionItems' },
+}));
+
+vi.mock('@/features/tasks/api', () => ({
+  getActionItems: vi.fn(),
+  createActionItem: vi.fn(),
+  toggleActionItemCompleted: vi.fn(),
+  updateActionItemDueDate: vi.fn(),
+  updateActionItemDescription: vi.fn(),
+  deleteActionItem: vi.fn(),
+}));
+
+const api = await import('@/features/tasks/api');
+const { useActionItems } = await import('@/features/tasks/useActionItems');
+
+function item(overrides: Partial<ActionItem> = {}): ActionItem {
+  return {
+    id: 'task-1',
+    description: 'Review the launch plan',
+    completed: false,
+    created_at: '2026-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
+async function renderLoaded(initial: ActionItem[] = [item()]) {
+  vi.mocked(api.getActionItems).mockResolvedValue({ items: initial, hasMore: false } as never);
+  const view = renderHook(() => useActionItems());
+  await waitFor(() => expect(view.result.current.loading).toBe(false));
+  return view;
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+describe('useActionItems', () => {
+  it('loads tasks on mount', async () => {
+    const { result } = await renderLoaded();
+
+    expect(result.current.items).toHaveLength(1);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('shows the completed flag before the server confirms it', async () => {
+    const { result } = await renderLoaded();
+    let resolveRequest: (() => void) | undefined;
+    vi.mocked(api.toggleActionItemCompleted).mockReturnValue(
+      new Promise<void>((resolve) => {
+        resolveRequest = resolve;
+      }),
+    );
+
+    act(() => {
+      void result.current.toggleComplete('task-1', true);
+    });
+
+    expect(result.current.items[0].completed).toBe(true);
+
+    await act(async () => {
+      resolveRequest?.();
+    });
+  });
+
+  it('rolls a failed complete back using the committed row', async () => {
+    const { result } = await renderLoaded();
+    vi.mocked(api.toggleActionItemCompleted).mockRejectedValue(new Error('conflict'));
+
+    await act(async () => {
+      await result.current.toggleComplete('task-1', true);
+    });
+
+    expect(result.current.items[0].completed).toBe(false);
+    expect(result.current.error).toBe('conflict');
+  });
+
+  it('restores a deleted task when the delete fails', async () => {
+    const { result } = await renderLoaded();
+    vi.mocked(api.deleteActionItem).mockRejectedValue(new Error('offline'));
+
+    await act(async () => {
+      await result.current.removeItem('task-1');
+    });
+
+    expect(result.current.items.map((entry) => entry.id)).toEqual(['task-1']);
+    expect(result.current.error).toBe('offline');
+  });
+});
diff --git a/web/app/src/hooks/__tests__/useHomeTasks.test.tsx b/web/app/src/features/tasks/__tests__/useHomeTasks.test.tsx
similarity index 88%
rename from web/app/src/hooks/__tests__/useHomeTasks.test.tsx
rename to web/app/src/features/tasks/__tests__/useHomeTasks.test.tsx
index 93a42cd57b9..6ad7a37913c 100644
--- a/web/app/src/hooks/__tests__/useHomeTasks.test.tsx
+++ b/web/app/src/features/tasks/__tests__/useHomeTasks.test.tsx
@@ -1,13 +1,13 @@
 import { renderHook, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/tasks/api', () => ({
   getActionItems: vi.fn(),
   toggleActionItemCompleted: vi.fn().mockResolvedValue(undefined),
 }));
 
-const { getActionItems } = await import('@/lib/api');
-const { useHomeTasks } = await import('@/hooks/useHomeTasks');
+const { getActionItems } = await import('@/features/tasks/api');
+const { useHomeTasks } = await import('@/features/tasks/useHomeTasks');
 
 function item(id: string, completed: boolean | null | undefined) {
   return { id, description: id, completed, created_at: '2026-01-01T00:00:00Z' };
diff --git a/web/app/src/features/tasks/api.ts b/web/app/src/features/tasks/api.ts
new file mode 100644
index 00000000000..7d8d8933ede
--- /dev/null
+++ b/web/app/src/features/tasks/api.ts
@@ -0,0 +1,113 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+import {
+  invalidateCache,
+  invalidationPatterns,
+  fetchWithCache,
+  cacheKeys,
+  CACHE_TTL,
+} from '@/lib/cache';
+import {
+  API_BASE_URL,
+  fetchAuthorizedBlob,
+  fetchWithAuth,
+  getAudioAuthHeaders,
+} from '@/shared/api/client';
+import type { ActionItem } from '@/types/conversation';
+import type { ActionItemsResponse } from '@/lib/omiApi.generated';
+export type { ActionItemsResponse };
+
+export interface GetActionItemsParams {
+  limit?: number;
+  offset?: number;
+  completed?: boolean;
+}
+
+export async function getActionItems(
+  params: GetActionItemsParams = {},
+): Promise<{ items: ActionItem[]; hasMore: boolean }> {
+  const { limit = 100, offset = 0, completed } = params;
+
+  const queryParams = new URLSearchParams({
+    limit: limit.toString(),
+    offset: offset.toString(),
+  });
+
+  if (completed !== undefined) {
+    queryParams.set('completed', completed.toString());
+  }
+
+  const response = await fetchWithAuth<ActionItemsResponse>(
+    `/v1/action-items?${queryParams}`,
+  );
+
+  return {
+    items: response.action_items || [],
+    hasMore: response.has_more || false,
+  };
+}
+
+/**
+ * Create a new action item
+ */
+export interface CreateActionItemParams {
+  description: string;
+  due_at?: string | null;
+}
+
+export async function createActionItem(
+  params: CreateActionItemParams,
+): Promise<ActionItem> {
+  return fetchWithAuth<ActionItem>('/v1/action-items', {
+    method: 'POST',
+    body: JSON.stringify(params),
+  });
+}
+
+/**
+ * Toggle action item completion status
+ */
+export async function toggleActionItemCompleted(
+  id: string,
+  completed: boolean,
+): Promise<void> {
+  await fetchWithAuth(`/v1/action-items/${id}/completed?completed=${completed}`, {
+    method: 'PATCH',
+  });
+}
+
+/**
+ * Update action item due date (for snooze functionality)
+ */
+export async function updateActionItemDueDate(
+  id: string,
+  due_at: string | null,
+): Promise<void> {
+  await fetchWithAuth(`/v1/action-items/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify({ due_at }),
+  });
+}
+
+/**
+ * Update action item description
+ */
+export async function updateActionItemDescription(
+  id: string,
+  description: string,
+): Promise<void> {
+  await fetchWithAuth(`/v1/action-items/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify({ description }),
+  });
+}
+
+/**
+ * Delete an action item
+ */
+export async function deleteActionItem(id: string): Promise<void> {
+  await fetchWithAuth(`/v1/action-items/${id}`, {
+    method: 'DELETE',
+  });
+  invalidateCache(invalidationPatterns.actionItems);
+}
diff --git a/web/app/src/features/tasks/index.ts b/web/app/src/features/tasks/index.ts
new file mode 100644
index 00000000000..5ad01220e4e
--- /dev/null
+++ b/web/app/src/features/tasks/index.ts
@@ -0,0 +1,7 @@
+export { TaskHub } from './ui/TaskHub';
+export { BulkActionBar } from './ui/BulkActionBar';
+export { useHomeTasks } from './useHomeTasks';
+export { useActionItems } from './useActionItems';
+export { formatDueBadge, formatDueStatus, groupActionItems } from './model';
+export { copyTasksToClipboard, downloadTasks } from './taskExport';
+export * from './api';
diff --git a/web/app/src/features/tasks/model.ts b/web/app/src/features/tasks/model.ts
new file mode 100644
index 00000000000..b7adc4b79d8
--- /dev/null
+++ b/web/app/src/features/tasks/model.ts
@@ -0,0 +1,221 @@
+import type { ActionItem, GroupedActionItems } from '@/types/conversation';
+
+export interface TaskDueStatus {
+  text: string;
+  isOverdue: boolean;
+  isToday: boolean;
+}
+
+/**
+ * Whole-day difference between a due timestamp and `now`, both floored to
+ * local midnight so a task due later today counts as 0 days, not -1.
+ */
+export function daysUntilDue(dueAt: string, now: Date = new Date()): number {
+  const due = new Date(dueAt);
+  const today = new Date(now);
+  today.setHours(0, 0, 0, 0);
+  due.setHours(0, 0, 0, 0);
+  return Math.round((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+}
+
+/**
+ * Format days late/until due
+ */
+export function formatDueStatus(dueAt: string, now: Date = new Date()): TaskDueStatus {
+  const diffDays = daysUntilDue(dueAt, now);
+  const due = new Date(dueAt);
+
+  if (diffDays < 0) {
+    const daysLate = Math.abs(diffDays);
+    return {
+      text: daysLate === 1 ? '1 day late' : `${daysLate} days late`,
+      isOverdue: true,
+      isToday: false,
+    };
+  } else if (diffDays === 0) {
+    return { text: 'Due today', isOverdue: false, isToday: true };
+  } else if (diffDays === 1) {
+    return { text: 'Due tomorrow', isOverdue: false, isToday: false };
+  } else if (diffDays <= 7) {
+    return {
+      text: `Due ${due.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}`,
+      isOverdue: false,
+      isToday: false,
+    };
+  } else {
+    return {
+      text: `Due ${due.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`,
+      isOverdue: false,
+      isToday: false,
+    };
+  }
+}
+
+/**
+ * Compact variant for dense task rows.
+ */
+export function formatDueBadge(
+  dueAt: string,
+  now: Date = new Date(),
+): { text: string; isOverdue: boolean } {
+  const diffDays = daysUntilDue(dueAt, now);
+  const due = new Date(dueAt);
+
+  if (diffDays < 0) {
+    return { text: `${Math.abs(diffDays)}d late`, isOverdue: true };
+  } else if (diffDays === 0) {
+    return { text: 'Today', isOverdue: false };
+  } else if (diffDays === 1) {
+    return { text: 'Tomorrow', isOverdue: false };
+  } else if (diffDays <= 7) {
+    return {
+      text: due.toLocaleDateString('en-US', { weekday: 'short' }),
+      isOverdue: false,
+    };
+  } else {
+    return {
+      text: due.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+      isOverdue: false,
+    };
+  }
+}
+
+export function emptyGroupedActionItems(): GroupedActionItems {
+  return {
+    overdue: [],
+    today: [],
+    tomorrow: [],
+    thisWeek: [],
+    later: [],
+    noDueDate: [],
+    completed: [],
+  };
+}
+
+export function isSameLocalDay(date: Date, now: Date = new Date()): boolean {
+  return (
+    date.getDate() === now.getDate() &&
+    date.getMonth() === now.getMonth() &&
+    date.getFullYear() === now.getFullYear()
+  );
+}
+
+export function isLocalTomorrow(date: Date, now: Date = new Date()): boolean {
+  const tomorrow = new Date(now);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  return (
+    date.getDate() === tomorrow.getDate() &&
+    date.getMonth() === tomorrow.getMonth() &&
+    date.getFullYear() === tomorrow.getFullYear()
+  );
+}
+
+export function isLocalThisWeek(date: Date, now: Date = new Date()): boolean {
+  const today = new Date(now);
+  today.setHours(0, 0, 0, 0);
+  const weekFromNow = new Date(today);
+  weekFromNow.setDate(weekFromNow.getDate() + 7);
+  return date >= today && date <= weekFromNow;
+}
+
+export function isLocalOverdue(date: Date, now: Date = new Date()): boolean {
+  const today = new Date(now);
+  today.setHours(0, 0, 0, 0);
+  return date < today;
+}
+
+/** Group action items by due window. Completed items are never placed in a due bucket. */
+export function groupActionItems(
+  items: ActionItem[],
+  now: Date = new Date(),
+): GroupedActionItems {
+  if (!Array.isArray(items)) {
+    return emptyGroupedActionItems();
+  }
+
+  const groups = emptyGroupedActionItems();
+
+  for (const item of items) {
+    if (item.completed) {
+      groups.completed.push(item);
+      continue;
+    }
+
+    if (!item.due_at) {
+      groups.noDueDate.push(item);
+      continue;
+    }
+
+    const dueDate = new Date(item.due_at);
+
+    if (isLocalOverdue(dueDate, now)) {
+      groups.overdue.push(item);
+    } else if (isSameLocalDay(dueDate, now)) {
+      groups.today.push(item);
+    } else if (isLocalTomorrow(dueDate, now)) {
+      groups.tomorrow.push(item);
+    } else if (isLocalThisWeek(dueDate, now)) {
+      groups.thisWeek.push(item);
+    } else {
+      groups.later.push(item);
+    }
+  }
+
+  const sortByDueDate = (a: ActionItem, b: ActionItem) => {
+    if (a.due_at && b.due_at) {
+      return new Date(a.due_at).getTime() - new Date(b.due_at).getTime();
+    }
+    if (a.due_at) return -1;
+    if (b.due_at) return 1;
+    const aCreated = a.created_at ? new Date(a.created_at).getTime() : 0;
+    const bCreated = b.created_at ? new Date(b.created_at).getTime() : 0;
+    return bCreated - aCreated;
+  };
+
+  const sortByCreatedAt = (a: ActionItem, b: ActionItem) => {
+    const aCreated = a.created_at ? new Date(a.created_at).getTime() : 0;
+    const bCreated = b.created_at ? new Date(b.created_at).getTime() : 0;
+    return bCreated - aCreated;
+  };
+
+  groups.overdue.sort(sortByDueDate);
+  groups.today.sort(sortByDueDate);
+  groups.tomorrow.sort(sortByDueDate);
+  groups.thisWeek.sort(sortByDueDate);
+  groups.later.sort(sortByDueDate);
+  groups.noDueDate.sort(sortByCreatedAt);
+  groups.completed.sort((a, b) => {
+    const aCompleted = a.completed_at ? new Date(a.completed_at).getTime() : 0;
+    const bCompleted = b.completed_at ? new Date(b.completed_at).getTime() : 0;
+    return bCompleted - aCompleted;
+  });
+
+  return groups;
+}
+
+export function getTaskCountsForDate(
+  items: ActionItem[],
+  date: Date,
+): { pending: number; completed: number } {
+  if (!Array.isArray(items)) {
+    return { pending: 0, completed: 0 };
+  }
+
+  const dateStr = date.toDateString();
+  let pending = 0;
+  let completed = 0;
+
+  for (const item of items) {
+    if (!item.due_at) continue;
+    const itemDate = new Date(item.due_at).toDateString();
+    if (itemDate === dateStr) {
+      if (item.completed) {
+        completed++;
+      } else {
+        pending++;
+      }
+    }
+  }
+
+  return { pending, completed };
+}
diff --git a/web/app/src/lib/taskExport.ts b/web/app/src/features/tasks/taskExport.ts
similarity index 100%
rename from web/app/src/lib/taskExport.ts
rename to web/app/src/features/tasks/taskExport.ts
diff --git a/web/app/src/components/tasks/BulkActionBar.tsx b/web/app/src/features/tasks/ui/BulkActionBar.tsx
similarity index 100%
rename from web/app/src/components/tasks/BulkActionBar.tsx
rename to web/app/src/features/tasks/ui/BulkActionBar.tsx
diff --git a/web/app/src/components/tasks/MonthCalendar.tsx b/web/app/src/features/tasks/ui/MonthCalendar.tsx
similarity index 100%
rename from web/app/src/components/tasks/MonthCalendar.tsx
rename to web/app/src/features/tasks/ui/MonthCalendar.tsx
diff --git a/web/app/src/components/tasks/NoDueDatePrompt.tsx b/web/app/src/features/tasks/ui/NoDueDatePrompt.tsx
similarity index 100%
rename from web/app/src/components/tasks/NoDueDatePrompt.tsx
rename to web/app/src/features/tasks/ui/NoDueDatePrompt.tsx
diff --git a/web/app/src/components/tasks/TaskCard.tsx b/web/app/src/features/tasks/ui/TaskCard.tsx
similarity index 99%
rename from web/app/src/components/tasks/TaskCard.tsx
rename to web/app/src/features/tasks/ui/TaskCard.tsx
index f6f998a339e..3cf5c3a405f 100644
--- a/web/app/src/components/tasks/TaskCard.tsx
+++ b/web/app/src/features/tasks/ui/TaskCard.tsx
@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Check, Trash2, Calendar, Clock, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { formatDueStatus } from '@/lib/taskDue';
+import { formatDueStatus } from '../model';
 import type { ActionItem } from '@/types/conversation';
 
 interface TaskCardProps {
diff --git a/web/app/src/components/tasks/TaskGroup.tsx b/web/app/src/features/tasks/ui/TaskGroup.tsx
similarity index 100%
rename from web/app/src/components/tasks/TaskGroup.tsx
rename to web/app/src/features/tasks/ui/TaskGroup.tsx
diff --git a/web/app/src/components/tasks/TaskHub.tsx b/web/app/src/features/tasks/ui/TaskHub.tsx
similarity index 98%
rename from web/app/src/components/tasks/TaskHub.tsx
rename to web/app/src/features/tasks/ui/TaskHub.tsx
index ef6e2cc2e2d..87788001280 100644
--- a/web/app/src/components/tasks/TaskHub.tsx
+++ b/web/app/src/features/tasks/ui/TaskHub.tsx
@@ -3,16 +3,16 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import { LayoutGrid, List, CheckSquare, Square } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useActionItems } from '@/hooks/useActionItems';
-import { useTaskKeyboardShortcuts } from '@/hooks/useTaskKeyboardShortcuts';
+import { useActionItems } from '@/features/tasks/useActionItems';
+import { useTaskKeyboardShortcuts } from '@/features/tasks/useTaskKeyboardShortcuts';
 import { TaskGroup, TaskGroupSkeleton } from './TaskGroup';
 import { TaskQuickAdd } from './TaskQuickAdd';
 import { TaskListView } from './TaskListView';
 import { TaskRightPanel } from './TaskRightPanel';
 import { BulkActionBar } from './BulkActionBar';
 import { PageToolbar } from '@/components/layout/PageToolbar';
-import { copyTasksToClipboard, downloadTasks } from '@/lib/taskExport';
-import { useChat as useChatContext } from '@/components/chat/ChatContext';
+import { copyTasksToClipboard, downloadTasks } from '@/features/tasks/taskExport';
+import { useChat as useChatContext } from '@/features/chat';
 
 type ViewMode = 'hub' | 'list';
 
diff --git a/web/app/src/components/tasks/TaskListView.tsx b/web/app/src/features/tasks/ui/TaskListView.tsx
similarity index 100%
rename from web/app/src/components/tasks/TaskListView.tsx
rename to web/app/src/features/tasks/ui/TaskListView.tsx
diff --git a/web/app/src/components/tasks/TaskProgressCard.tsx b/web/app/src/features/tasks/ui/TaskProgressCard.tsx
similarity index 100%
rename from web/app/src/components/tasks/TaskProgressCard.tsx
rename to web/app/src/features/tasks/ui/TaskProgressCard.tsx
diff --git a/web/app/src/components/tasks/TaskQuickAdd.tsx b/web/app/src/features/tasks/ui/TaskQuickAdd.tsx
similarity index 100%
rename from web/app/src/components/tasks/TaskQuickAdd.tsx
rename to web/app/src/features/tasks/ui/TaskQuickAdd.tsx
diff --git a/web/app/src/components/tasks/TaskRightPanel.tsx b/web/app/src/features/tasks/ui/TaskRightPanel.tsx
similarity index 100%
rename from web/app/src/components/tasks/TaskRightPanel.tsx
rename to web/app/src/features/tasks/ui/TaskRightPanel.tsx
diff --git a/web/app/src/components/tasks/TaskRow.tsx b/web/app/src/features/tasks/ui/TaskRow.tsx
similarity index 99%
rename from web/app/src/components/tasks/TaskRow.tsx
rename to web/app/src/features/tasks/ui/TaskRow.tsx
index 2d0f56d880b..9079d28ef89 100644
--- a/web/app/src/components/tasks/TaskRow.tsx
+++ b/web/app/src/features/tasks/ui/TaskRow.tsx
@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Check, Trash2, Clock, Calendar, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { formatDueBadge } from '@/lib/taskDue';
+import { formatDueBadge } from '../model';
 import type { ActionItem } from '@/types/conversation';
 
 interface TaskRowProps {
diff --git a/web/app/src/components/tasks/__tests__/BulkActionBar.test.tsx b/web/app/src/features/tasks/ui/__tests__/BulkActionBar.test.tsx
similarity index 96%
rename from web/app/src/components/tasks/__tests__/BulkActionBar.test.tsx
rename to web/app/src/features/tasks/ui/__tests__/BulkActionBar.test.tsx
index 1bcac7863af..e315d93f8ac 100644
--- a/web/app/src/components/tasks/__tests__/BulkActionBar.test.tsx
+++ b/web/app/src/features/tasks/ui/__tests__/BulkActionBar.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
-import { BulkActionBar } from '@/components/tasks/BulkActionBar';
+import { BulkActionBar } from '@/features/tasks/ui/BulkActionBar';
 
 function renderBar(onCopy = vi.fn()) {
   render(
diff --git a/web/app/src/features/tasks/useActionItems.ts b/web/app/src/features/tasks/useActionItems.ts
new file mode 100644
index 00000000000..8183c7c1f97
--- /dev/null
+++ b/web/app/src/features/tasks/useActionItems.ts
@@ -0,0 +1,479 @@
+'use client';
+
+import { useCallback, useEffect, useMemo } from 'react';
+import { createSignal } from '@tschk/moonshine';
+import { useSignalValue } from '@/lib/signals';
+import {
+  getActionItems,
+  createActionItem,
+  toggleActionItemCompleted,
+  updateActionItemDueDate,
+  updateActionItemDescription,
+  deleteActionItem,
+  type CreateActionItemParams,
+} from '@/features/tasks/api';
+import { onCacheInvalidation, invalidationPatterns } from '@/lib/cache';
+import type { ActionItem, GroupedActionItems } from '@/types/conversation';
+import { getTaskCountsForDate, groupActionItems, isSameLocalDay } from './model';
+
+export interface UseActionItemsReturn {
+  items: ActionItem[];
+  groupedItems: GroupedActionItems;
+  loading: boolean;
+  error: string | null;
+  sortedFlatList: {
+    pending: ActionItem[];
+    completed: ActionItem[];
+  };
+  stats: {
+    total: number;
+    completed: number;
+    pending: number;
+    overdue: number;
+    noDueDateCount: number;
+    todayTotal: number;
+    todayCompleted: number;
+    weekCompleted: number;
+    weekPending: number;
+    streak: number;
+  };
+  weekData: Array<{
+    date: Date;
+    dayName: string;
+    dayNumber: number;
+    isToday: boolean;
+    pending: number;
+    completed: number;
+  }>;
+  refresh: () => Promise<void>;
+  addItem: (params: CreateActionItemParams) => Promise<ActionItem | null>;
+  toggleComplete: (id: string, completed: boolean) => Promise<void>;
+  snooze: (id: string, days: number) => Promise<void>;
+  setDueDate: (id: string, date: Date | null) => Promise<void>;
+  updateDescription: (id: string, description: string) => Promise<void>;
+  removeItem: (id: string) => Promise<void>;
+  bulkComplete: (ids: string[]) => Promise<void>;
+  bulkDelete: (ids: string[]) => Promise<void>;
+  bulkSnooze: (ids: string[], days: number) => Promise<void>;
+  bulkSetDueDate: (ids: string[], date: Date | null) => Promise<void>;
+}
+
+function messageFor(err: unknown, fallback: string): string {
+  return err instanceof Error ? err.message : fallback;
+}
+
+function snoozeDueAt(dueAt: string | null | undefined, days: number): string {
+  const newDate = new Date();
+  if (dueAt) {
+    const currentDate = new Date(dueAt);
+    if (currentDate < newDate) {
+      newDate.setDate(newDate.getDate() + days);
+    } else {
+      newDate.setTime(currentDate.getTime());
+      newDate.setDate(newDate.getDate() + days);
+    }
+  } else {
+    newDate.setDate(newDate.getDate() + days);
+  }
+  return newDate.toISOString();
+}
+
+/**
+ * The task list and its mutations, held in moonshine signals.
+ *
+ * Same reason as `createGoalsStore`: optimistic writes need `signal.peek()` so
+ * rollback can read the committed row at call time, not from a React updater
+ * that has not run yet.
+ */
+export function createActionItemsStore() {
+  const items = createSignal<ActionItem[]>([]);
+  const loading = createSignal(true);
+  const error = createSignal<string | null>(null);
+  const mutationTails = new Map<string, Promise<void>>();
+
+  const enqueueMutation = <T>(id: string, mutation: () => Promise<T>): Promise<T> => {
+    const previous = mutationTails.get(id);
+    const result = previous ? previous.then(mutation) : mutation();
+    const tail = result.then(
+      () => undefined,
+      () => undefined,
+    );
+    mutationTails.set(id, tail);
+    void tail.then(() => {
+      if (mutationTails.get(id) === tail) mutationTails.delete(id);
+    });
+    return result;
+  };
+
+  const load = async () => {
+    loading.set(true);
+    try {
+      const { items: data } = await getActionItems({ limit: 500 });
+      items.set(Array.isArray(data) ? data : []);
+      error.set(null);
+    } catch (err) {
+      console.error('Failed to fetch action items:', err);
+      error.set(messageFor(err, 'Failed to load tasks'));
+      items.set([]);
+    } finally {
+      loading.set(false);
+    }
+  };
+
+  const patch = async (
+    id: string,
+    apply: (item: ActionItem) => ActionItem,
+    request: () => Promise<void>,
+    failureMessage: string,
+  ): Promise<void> =>
+    enqueueMutation(id, async () => {
+      const previous = items.peek().find((item) => item.id === id);
+      if (!previous) return;
+      items.set((current) =>
+        current.map((item) => (item.id === id ? apply(previous) : item)),
+      );
+
+      try {
+        await request();
+        error.set(null);
+      } catch (err) {
+        console.error(failureMessage, err);
+        items.set((current) =>
+          current.map((item) => (item.id === id ? previous : item)),
+        );
+        error.set(messageFor(err, failureMessage));
+      }
+    });
+
+  const add = async (params: CreateActionItemParams): Promise<ActionItem | null> => {
+    try {
+      const created = await createActionItem(params);
+      items.set((current) => [created, ...current]);
+      error.set(null);
+      return created;
+    } catch (err) {
+      console.error('Failed to create action item:', err);
+      error.set(messageFor(err, 'Failed to create task'));
+      return null;
+    }
+  };
+
+  const toggleComplete = (id: string, completed: boolean) =>
+    patch(
+      id,
+      (item) => ({
+        ...item,
+        completed,
+        completed_at: completed ? new Date().toISOString() : null,
+      }),
+      () => toggleActionItemCompleted(id, completed),
+      'Failed to update task',
+    );
+
+  const snooze = (id: string, days: number) =>
+    patch(
+      id,
+      (item) => ({ ...item, due_at: snoozeDueAt(item.due_at, days) }),
+      () => {
+        const current = items.peek().find((item) => item.id === id);
+        return updateActionItemDueDate(id, current?.due_at ?? null);
+      },
+      'Failed to snooze task',
+    );
+
+  const setDueDate = (id: string, date: Date | null) => {
+    const newDueAt = date ? date.toISOString() : null;
+    return patch(
+      id,
+      (item) => ({ ...item, due_at: newDueAt }),
+      () => updateActionItemDueDate(id, newDueAt),
+      'Failed to update due date',
+    );
+  };
+
+  const updateDescription = (id: string, description: string) =>
+    patch(
+      id,
+      (item) => ({ ...item, description }),
+      () => updateActionItemDescription(id, description),
+      'Failed to update task',
+    );
+
+  const remove = (id: string): Promise<void> =>
+    enqueueMutation(id, async () => {
+      const removed = items.peek().find((item) => item.id === id);
+      if (!removed) return;
+      items.set((current) => current.filter((item) => item.id !== id));
+
+      try {
+        await deleteActionItem(id);
+        error.set(null);
+      } catch (err) {
+        console.error('Failed to delete task:', err);
+        items.set((current) => [...current, removed]);
+        error.set(messageFor(err, 'Failed to delete task'));
+      }
+    });
+
+  const bulkComplete = async (ids: string[]) => {
+    const previous = items.peek();
+    items.set((current) =>
+      current.map((item) =>
+        ids.includes(item.id)
+          ? { ...item, completed: true, completed_at: new Date().toISOString() }
+          : item,
+      ),
+    );
+    try {
+      await Promise.all(ids.map((id) => toggleActionItemCompleted(id, true)));
+      error.set(null);
+    } catch (err) {
+      console.error('Failed to bulk complete:', err);
+      items.set(previous);
+      error.set(messageFor(err, 'Failed to complete tasks'));
+    }
+  };
+
+  const bulkDelete = async (ids: string[]) => {
+    const previous = items.peek();
+    items.set((current) => current.filter((item) => !ids.includes(item.id)));
+    try {
+      await Promise.all(ids.map((id) => deleteActionItem(id)));
+      error.set(null);
+    } catch (err) {
+      console.error('Failed to bulk delete:', err);
+      items.set(previous);
+      error.set(messageFor(err, 'Failed to delete tasks'));
+    }
+  };
+
+  const bulkSnooze = async (ids: string[], days: number) => {
+    const previous = items.peek();
+    const newDate = new Date();
+    newDate.setDate(newDate.getDate() + days);
+    const newDueAt = newDate.toISOString();
+    items.set((current) =>
+      current.map((item) => (ids.includes(item.id) ? { ...item, due_at: newDueAt } : item)),
+    );
+    try {
+      await Promise.all(ids.map((id) => updateActionItemDueDate(id, newDueAt)));
+      error.set(null);
+    } catch (err) {
+      console.error('Failed to bulk snooze:', err);
+      items.set(previous);
+      error.set(messageFor(err, 'Failed to snooze tasks'));
+    }
+  };
+
+  const bulkSetDueDate = async (ids: string[], date: Date | null) => {
+    const previous = items.peek();
+    const newDueAt = date ? date.toISOString() : null;
+    items.set((current) =>
+      current.map((item) => (ids.includes(item.id) ? { ...item, due_at: newDueAt } : item)),
+    );
+    try {
+      await Promise.all(ids.map((id) => updateActionItemDueDate(id, newDueAt)));
+      error.set(null);
+    } catch (err) {
+      console.error('Failed to bulk set due date:', err);
+      items.set(previous);
+      error.set(messageFor(err, 'Failed to set due dates'));
+    }
+  };
+
+  return {
+    items,
+    loading,
+    error,
+    load,
+    add,
+    toggleComplete,
+    snooze,
+    setDueDate,
+    updateDescription,
+    remove,
+    bulkComplete,
+    bulkDelete,
+    bulkSnooze,
+    bulkSetDueDate,
+  };
+}
+
+export function useActionItems(): UseActionItemsReturn {
+  const store = useMemo(() => createActionItemsStore(), []);
+
+  useEffect(() => {
+    void store.load();
+  }, [store]);
+
+  useEffect(() => {
+    return onCacheInvalidation((pattern) => {
+      if (pattern === invalidationPatterns.actionItems) {
+        void store.load();
+      }
+    });
+  }, [store]);
+
+  const items = useSignalValue(store.items);
+  const loading = useSignalValue(store.loading);
+  const error = useSignalValue(store.error);
+
+  const groupedItems = useMemo(() => groupActionItems(items), [items]);
+
+  const stats = useMemo(() => {
+    const completed = items.filter((i) => i.completed).length;
+    const pending = items.filter((i) => !i.completed).length;
+    const overdue = groupedItems.overdue.length;
+    const noDueDateCount = groupedItems.noDueDate.length;
+    const todayItems = items.filter(
+      (i) => i.due_at && isSameLocalDay(new Date(i.due_at)),
+    );
+    const todayCompleted = todayItems.filter((i) => i.completed).length;
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const weekAgo = new Date(today);
+    weekAgo.setDate(weekAgo.getDate() - 7);
+
+    const weekItems = items.filter((i) => {
+      if (!i.due_at) return false;
+      const dueDate = new Date(i.due_at);
+      dueDate.setHours(0, 0, 0, 0);
+      return dueDate >= weekAgo && dueDate <= today;
+    });
+    const weekCompleted = weekItems.filter((i) => i.completed).length;
+    const weekPending = weekItems.filter((i) => !i.completed).length;
+
+    let streak = 0;
+    const checkDate = new Date(today);
+    const todayHasCompletion = items.some((i) => {
+      if (!i.completed || !i.completed_at) return false;
+      return new Date(i.completed_at).toDateString() === today.toDateString();
+    });
+
+    if (todayHasCompletion) {
+      streak = 1;
+      checkDate.setDate(checkDate.getDate() - 1);
+      while (true) {
+        const dateStr = checkDate.toDateString();
+        const hasCompletion = items.some((i) => {
+          if (!i.completed || !i.completed_at) return false;
+          return new Date(i.completed_at).toDateString() === dateStr;
+        });
+        if (hasCompletion) {
+          streak++;
+          checkDate.setDate(checkDate.getDate() - 1);
+        } else {
+          break;
+        }
+        if (streak > 365) break;
+      }
+    }
+
+    return {
+      total: items.length,
+      completed,
+      pending,
+      overdue,
+      noDueDateCount,
+      todayTotal: todayItems.length,
+      todayCompleted,
+      weekCompleted,
+      weekPending,
+      streak,
+    };
+  }, [items, groupedItems]);
+
+  const weekData = useMemo(() => {
+    const days: UseActionItemsReturn['weekData'] = [];
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(today);
+      date.setDate(date.getDate() + i);
+      const counts = getTaskCountsForDate(items, date);
+      days.push({
+        date,
+        dayName:
+          i === 0 ? 'TODAY' : date.toLocaleDateString('en-US', { weekday: 'short' }).toUpperCase(),
+        dayNumber: date.getDate(),
+        isToday: i === 0,
+        pending: counts.pending,
+        completed: counts.completed,
+      });
+    }
+
+    return days;
+  }, [items]);
+
+  const sortedFlatList = useMemo(() => {
+    const pending = items.filter((i) => !i.completed);
+    const completed = items.filter((i) => i.completed);
+
+    pending.sort((a, b) => {
+      if (!a.due_at && !b.due_at) {
+        const aCreated = a.created_at ? new Date(a.created_at).getTime() : 0;
+        const bCreated = b.created_at ? new Date(b.created_at).getTime() : 0;
+        return bCreated - aCreated;
+      }
+      if (!a.due_at) return 1;
+      if (!b.due_at) return -1;
+      return new Date(a.due_at).getTime() - new Date(b.due_at).getTime();
+    });
+
+    completed.sort((a, b) => {
+      const aCompleted = a.completed_at ? new Date(a.completed_at).getTime() : 0;
+      const bCompleted = b.completed_at ? new Date(b.completed_at).getTime() : 0;
+      return bCompleted - aCompleted;
+    });
+
+    return { pending, completed };
+  }, [items]);
+
+  const toggleComplete = useCallback(
+    (id: string, completed: boolean) => store.toggleComplete(id, completed),
+    [store],
+  );
+  const snooze = useCallback((id: string, days: number) => store.snooze(id, days), [store]);
+  const setDueDate = useCallback(
+    (id: string, date: Date | null) => store.setDueDate(id, date),
+    [store],
+  );
+  const updateDescription = useCallback(
+    (id: string, description: string) => store.updateDescription(id, description),
+    [store],
+  );
+  const removeItem = useCallback((id: string) => store.remove(id), [store]);
+  const bulkComplete = useCallback((ids: string[]) => store.bulkComplete(ids), [store]);
+  const bulkDelete = useCallback((ids: string[]) => store.bulkDelete(ids), [store]);
+  const bulkSnooze = useCallback(
+    (ids: string[], days: number) => store.bulkSnooze(ids, days),
+    [store],
+  );
+  const bulkSetDueDate = useCallback(
+    (ids: string[], date: Date | null) => store.bulkSetDueDate(ids, date),
+    [store],
+  );
+
+  return {
+    items,
+    groupedItems,
+    loading,
+    error,
+    sortedFlatList,
+    stats,
+    weekData,
+    refresh: store.load,
+    addItem: store.add,
+    toggleComplete,
+    snooze,
+    setDueDate,
+    updateDescription,
+    removeItem,
+    bulkComplete,
+    bulkDelete,
+    bulkSnooze,
+    bulkSetDueDate,
+  };
+}
diff --git a/web/app/src/hooks/useHomeTasks.ts b/web/app/src/features/tasks/useHomeTasks.ts
similarity index 95%
rename from web/app/src/hooks/useHomeTasks.ts
rename to web/app/src/features/tasks/useHomeTasks.ts
index d5bbc9ae2e4..641eac6532f 100644
--- a/web/app/src/hooks/useHomeTasks.ts
+++ b/web/app/src/features/tasks/useHomeTasks.ts
@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
-import { getActionItems, toggleActionItemCompleted } from '@/lib/api';
+import { getActionItems, toggleActionItemCompleted } from '@/features/tasks/api';
 import { useAsyncResource } from '@/hooks/useAsyncResource';
 import type { ActionItem } from '@/types/conversation';
 
diff --git a/web/app/src/hooks/useTaskKeyboardShortcuts.ts b/web/app/src/features/tasks/useTaskKeyboardShortcuts.ts
similarity index 100%
rename from web/app/src/hooks/useTaskKeyboardShortcuts.ts
rename to web/app/src/features/tasks/useTaskKeyboardShortcuts.ts
diff --git a/web/app/src/hooks/__tests__/useScreenFrames.test.tsx b/web/app/src/hooks/__tests__/useScreenFrames.test.tsx
index d506f26cf1a..61c656db46d 100644
--- a/web/app/src/hooks/__tests__/useScreenFrames.test.tsx
+++ b/web/app/src/hooks/__tests__/useScreenFrames.test.tsx
@@ -6,14 +6,14 @@ import type {
   ConversationScreenFrameSet,
 } from '@/types/conversation';
 
-vi.mock('@/lib/api', () => ({
+vi.mock('@/features/conversations/api', () => ({
   getConversationScreenFrames: vi.fn(),
   deleteScreenFrame: vi.fn(),
   deleteAllScreenFrames: vi.fn(),
   patchScreenFrameSharing: vi.fn(),
 }));
 
-const api = await import('@/lib/api');
+const api = await import('@/features/conversations/api');
 
 function frame(id: string): ConversationScreenFrame {
   return {
diff --git a/web/app/src/hooks/useActionItems.ts b/web/app/src/hooks/useActionItems.ts
deleted file mode 100644
index cf3fbf340ff..00000000000
--- a/web/app/src/hooks/useActionItems.ts
+++ /dev/null
@@ -1,643 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import {
-  getActionItems,
-  createActionItem,
-  toggleActionItemCompleted,
-  updateActionItemDueDate,
-  updateActionItemDescription,
-  deleteActionItem,
-  type CreateActionItemParams,
-} from '@/lib/api';
-import { onCacheInvalidation, invalidationPatterns } from '@/lib/cache';
-import type { ActionItem, GroupedActionItems } from '@/types/conversation';
-
-/**
- * Check if a date is today
- */
-function isToday(date: Date): boolean {
-  const today = new Date();
-  return (
-    date.getDate() === today.getDate() &&
-    date.getMonth() === today.getMonth() &&
-    date.getFullYear() === today.getFullYear()
-  );
-}
-
-/**
- * Check if a date is tomorrow
- */
-function isTomorrow(date: Date): boolean {
-  const tomorrow = new Date();
-  tomorrow.setDate(tomorrow.getDate() + 1);
-  return (
-    date.getDate() === tomorrow.getDate() &&
-    date.getMonth() === tomorrow.getMonth() &&
-    date.getFullYear() === tomorrow.getFullYear()
-  );
-}
-
-/**
- * Check if a date is within this week (next 7 days)
- */
-function isThisWeek(date: Date): boolean {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const weekFromNow = new Date(today);
-  weekFromNow.setDate(weekFromNow.getDate() + 7);
-  return date >= today && date <= weekFromNow;
-}
-
-/**
- * Check if a date is overdue (before today)
- */
-function isOverdue(date: Date): boolean {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  return date < today;
-}
-
-/**
- * Group action items by time period
- */
-function groupActionItems(items: ActionItem[]): GroupedActionItems {
-  // Ensure items is an array
-  if (!Array.isArray(items)) {
-    console.warn('groupActionItems: items is not an array', items);
-    return {
-      overdue: [],
-      today: [],
-      tomorrow: [],
-      thisWeek: [],
-      later: [],
-      noDueDate: [],
-      completed: [],
-    };
-  }
-
-  const groups: GroupedActionItems = {
-    overdue: [],
-    today: [],
-    tomorrow: [],
-    thisWeek: [],
-    later: [],
-    noDueDate: [],
-    completed: [],
-  };
-
-  for (const item of items) {
-    if (item.completed) {
-      groups.completed.push(item);
-      continue;
-    }
-
-    if (!item.due_at) {
-      // No due date goes to dedicated group
-      groups.noDueDate.push(item);
-      continue;
-    }
-
-    const dueDate = new Date(item.due_at);
-
-    if (isOverdue(dueDate)) {
-      groups.overdue.push(item);
-    } else if (isToday(dueDate)) {
-      groups.today.push(item);
-    } else if (isTomorrow(dueDate)) {
-      groups.tomorrow.push(item);
-    } else if (isThisWeek(dueDate)) {
-      groups.thisWeek.push(item);
-    } else {
-      groups.later.push(item);
-    }
-  }
-
-  // Sort each group by due date (earliest first), then by created_at
-  const sortByDueDate = (a: ActionItem, b: ActionItem) => {
-    if (a.due_at && b.due_at) {
-      return new Date(a.due_at).getTime() - new Date(b.due_at).getTime();
-    }
-    if (a.due_at) return -1;
-    if (b.due_at) return 1;
-    // Fall back to created_at
-    const aCreated = a.created_at ? new Date(a.created_at).getTime() : 0;
-    const bCreated = b.created_at ? new Date(b.created_at).getTime() : 0;
-    return bCreated - aCreated;
-  };
-
-  // Sort by created_at (newest first) for items without due date
-  const sortByCreatedAt = (a: ActionItem, b: ActionItem) => {
-    const aCreated = a.created_at ? new Date(a.created_at).getTime() : 0;
-    const bCreated = b.created_at ? new Date(b.created_at).getTime() : 0;
-    return bCreated - aCreated;
-  };
-
-  groups.overdue.sort(sortByDueDate);
-  groups.today.sort(sortByDueDate);
-  groups.tomorrow.sort(sortByDueDate);
-  groups.thisWeek.sort(sortByDueDate);
-  groups.later.sort(sortByDueDate);
-  groups.noDueDate.sort(sortByCreatedAt);
-
-  // Sort completed by completion date (most recent first)
-  groups.completed.sort((a, b) => {
-    const aCompleted = a.completed_at ? new Date(a.completed_at).getTime() : 0;
-    const bCompleted = b.completed_at ? new Date(b.completed_at).getTime() : 0;
-    return bCompleted - aCompleted;
-  });
-
-  return groups;
-}
-
-/**
- * Calculate task counts for a specific date
- */
-function getTaskCountsForDate(items: ActionItem[], date: Date): { pending: number; completed: number } {
-  if (!Array.isArray(items)) {
-    return { pending: 0, completed: 0 };
-  }
-
-  const dateStr = date.toDateString();
-  let pending = 0;
-  let completed = 0;
-
-  for (const item of items) {
-    if (!item.due_at) continue;
-    const itemDate = new Date(item.due_at).toDateString();
-    if (itemDate === dateStr) {
-      if (item.completed) {
-        completed++;
-      } else {
-        pending++;
-      }
-    }
-  }
-
-  return { pending, completed };
-}
-
-export interface UseActionItemsReturn {
-  items: ActionItem[];
-  groupedItems: GroupedActionItems;
-  loading: boolean;
-  error: string | null;
-
-  // Flat sorted list for list view (pending sorted by due date, no-date items last)
-  sortedFlatList: {
-    pending: ActionItem[];
-    completed: ActionItem[];
-  };
-
-  // Stats
-  stats: {
-    total: number;
-    completed: number;
-    pending: number;
-    overdue: number;
-    noDueDateCount: number;
-    todayTotal: number;
-    todayCompleted: number;
-    // Weekly stats
-    weekCompleted: number;
-    weekPending: number;
-    streak: number;
-  };
-
-  // Week data for calendar strip
-  weekData: Array<{
-    date: Date;
-    dayName: string;
-    dayNumber: number;
-    isToday: boolean;
-    pending: number;
-    completed: number;
-  }>;
-
-  // Actions
-  refresh: () => Promise<void>;
-  addItem: (params: CreateActionItemParams) => Promise<ActionItem | null>;
-  toggleComplete: (id: string, completed: boolean) => Promise<void>;
-  snooze: (id: string, days: number) => Promise<void>;
-  setDueDate: (id: string, date: Date | null) => Promise<void>;
-  updateDescription: (id: string, description: string) => Promise<void>;
-  removeItem: (id: string) => Promise<void>;
-  bulkComplete: (ids: string[]) => Promise<void>;
-  bulkDelete: (ids: string[]) => Promise<void>;
-  bulkSnooze: (ids: string[], days: number) => Promise<void>;
-  bulkSetDueDate: (ids: string[], date: Date | null) => Promise<void>;
-}
-
-export function useActionItems(): UseActionItemsReturn {
-  const [items, setItems] = useState<ActionItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Fetch action items
-  const fetchItems = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const { items: data } = await getActionItems({ limit: 500 });
-      // Ensure we always set an array
-      setItems(Array.isArray(data) ? data : []);
-    } catch (err) {
-      console.error('Failed to fetch action items:', err);
-      setError(err instanceof Error ? err.message : 'Failed to load tasks');
-      setItems([]); // Reset to empty array on error
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  // Initial fetch
-  useEffect(() => {
-    fetchItems();
-  }, [fetchItems]);
-
-  // Subscribe to cache invalidation - refetch when action items are modified elsewhere
-  useEffect(() => {
-    const unsubscribe = onCacheInvalidation((pattern) => {
-      if (pattern === invalidationPatterns.actionItems) {
-        fetchItems();
-      }
-    });
-    return unsubscribe;
-  }, [fetchItems]);
-
-  // Group items
-  const groupedItems = useMemo(() => groupActionItems(items), [items]);
-
-  // Calculate stats
-  const stats = useMemo(() => {
-    const completed = items.filter(i => i.completed).length;
-    const pending = items.filter(i => !i.completed).length;
-    const overdue = groupedItems.overdue.length;
-    const noDueDateCount = groupedItems.noDueDate.length;
-    const todayItems = items.filter(i => i.due_at && isToday(new Date(i.due_at)));
-    const todayCompleted = todayItems.filter(i => i.completed).length;
-
-    // Calculate weekly stats (last 7 days)
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const weekAgo = new Date(today);
-    weekAgo.setDate(weekAgo.getDate() - 7);
-
-    const weekItems = items.filter(i => {
-      if (!i.due_at) return false;
-      const dueDate = new Date(i.due_at);
-      dueDate.setHours(0, 0, 0, 0);
-      return dueDate >= weekAgo && dueDate <= today;
-    });
-    const weekCompleted = weekItems.filter(i => i.completed).length;
-    const weekPending = weekItems.filter(i => !i.completed).length;
-
-    // Calculate streak (consecutive days with at least one completion)
-    let streak = 0;
-    const checkDate = new Date(today);
-
-    // Check if we completed anything today first
-    const todayHasCompletion = items.some(i => {
-      if (!i.completed || !i.completed_at) return false;
-      const completedDate = new Date(i.completed_at);
-      return completedDate.toDateString() === today.toDateString();
-    });
-
-    if (todayHasCompletion) {
-      streak = 1;
-      checkDate.setDate(checkDate.getDate() - 1);
-
-      // Count backwards from yesterday
-      while (true) {
-        const dateStr = checkDate.toDateString();
-        const hasCompletion = items.some(i => {
-          if (!i.completed || !i.completed_at) return false;
-          const completedDate = new Date(i.completed_at);
-          return completedDate.toDateString() === dateStr;
-        });
-
-        if (hasCompletion) {
-          streak++;
-          checkDate.setDate(checkDate.getDate() - 1);
-        } else {
-          break;
-        }
-
-        // Safety limit
-        if (streak > 365) break;
-      }
-    }
-
-    return {
-      total: items.length,
-      completed,
-      pending,
-      overdue,
-      noDueDateCount,
-      todayTotal: todayItems.length,
-      todayCompleted,
-      weekCompleted,
-      weekPending,
-      streak,
-    };
-  }, [items, groupedItems]);
-
-  // Generate week data for calendar strip
-  const weekData = useMemo(() => {
-    const days: UseActionItemsReturn['weekData'] = [];
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-
-    for (let i = 0; i < 7; i++) {
-      const date = new Date(today);
-      date.setDate(date.getDate() + i);
-
-      const counts = getTaskCountsForDate(items, date);
-
-      days.push({
-        date,
-        dayName: i === 0 ? 'TODAY' : date.toLocaleDateString('en-US', { weekday: 'short' }).toUpperCase(),
-        dayNumber: date.getDate(),
-        isToday: i === 0,
-        pending: counts.pending,
-        completed: counts.completed,
-      });
-    }
-
-    return days;
-  }, [items]);
-
-  // Sorted flat list for list view (pending sorted by due date, no-date items last)
-  const sortedFlatList = useMemo(() => {
-    const pending = items.filter(i => !i.completed);
-    const completed = items.filter(i => i.completed);
-
-    // Sort pending: by due date (soonest first), items without due date go last
-    pending.sort((a, b) => {
-      // Handle no due date (goes last)
-      if (!a.due_at && !b.due_at) {
-        // Both no due date: sort by created_at (newest first)
-        const aCreated = a.created_at ? new Date(a.created_at).getTime() : 0;
-        const bCreated = b.created_at ? new Date(b.created_at).getTime() : 0;
-        return bCreated - aCreated;
-      }
-      if (!a.due_at) return 1;
-      if (!b.due_at) return -1;
-
-      return new Date(a.due_at).getTime() - new Date(b.due_at).getTime();
-    });
-
-    // Sort completed by completion date (most recent first)
-    completed.sort((a, b) => {
-      const aCompleted = a.completed_at ? new Date(a.completed_at).getTime() : 0;
-      const bCompleted = b.completed_at ? new Date(b.completed_at).getTime() : 0;
-      return bCompleted - aCompleted;
-    });
-
-    return { pending, completed };
-  }, [items]);
-
-  // Add new item
-  const addItem = useCallback(async (params: CreateActionItemParams): Promise<ActionItem | null> => {
-    try {
-      const newItem = await createActionItem(params);
-      setItems(prev => [newItem, ...prev]);
-      return newItem;
-    } catch (err) {
-      console.error('Failed to create action item:', err);
-      setError(err instanceof Error ? err.message : 'Failed to create task');
-      return null;
-    }
-  }, []);
-
-  // Toggle completion
-  const toggleComplete = useCallback(async (id: string, completed: boolean) => {
-    // Optimistic update
-    setItems(prev =>
-      prev.map(item =>
-        item.id === id
-          ? { ...item, completed, completed_at: completed ? new Date().toISOString() : null }
-          : item
-      )
-    );
-
-    try {
-      await toggleActionItemCompleted(id, completed);
-    } catch (err) {
-      console.error('Failed to toggle completion:', err);
-      // Revert on error
-      setItems(prev =>
-        prev.map(item =>
-          item.id === id ? { ...item, completed: !completed, completed_at: null } : item
-        )
-      );
-      setError(err instanceof Error ? err.message : 'Failed to update task');
-    }
-  }, []);
-
-  // Snooze (add days to due date)
-  const snooze = useCallback(async (id: string, days: number) => {
-    const item = items.find(i => i.id === id);
-    if (!item) return;
-
-    const newDate = new Date();
-    if (item.due_at) {
-      const currentDate = new Date(item.due_at);
-      // If current date is in the past, start from today
-      if (currentDate < newDate) {
-        newDate.setDate(newDate.getDate() + days);
-      } else {
-        newDate.setTime(currentDate.getTime());
-        newDate.setDate(newDate.getDate() + days);
-      }
-    } else {
-      newDate.setDate(newDate.getDate() + days);
-    }
-
-    // Optimistic update
-    const newDueAt = newDate.toISOString();
-    setItems(prev =>
-      prev.map(i => (i.id === id ? { ...i, due_at: newDueAt } : i))
-    );
-
-    try {
-      await updateActionItemDueDate(id, newDueAt);
-    } catch (err) {
-      console.error('Failed to snooze task:', err);
-      // Revert on error
-      setItems(prev =>
-        prev.map(i => (i.id === id ? { ...i, due_at: item.due_at } : i))
-      );
-      setError(err instanceof Error ? err.message : 'Failed to snooze task');
-    }
-  }, [items]);
-
-  // Set specific due date
-  const setDueDate = useCallback(async (id: string, date: Date | null) => {
-    const item = items.find(i => i.id === id);
-    if (!item) return;
-
-    const newDueAt = date ? date.toISOString() : null;
-
-    // Optimistic update
-    setItems(prev =>
-      prev.map(i => (i.id === id ? { ...i, due_at: newDueAt } : i))
-    );
-
-    try {
-      await updateActionItemDueDate(id, newDueAt);
-    } catch (err) {
-      console.error('Failed to update due date:', err);
-      // Revert on error
-      setItems(prev =>
-        prev.map(i => (i.id === id ? { ...i, due_at: item.due_at } : i))
-      );
-      setError(err instanceof Error ? err.message : 'Failed to update due date');
-    }
-  }, [items]);
-
-  // Update description
-  const updateDescription = useCallback(async (id: string, description: string) => {
-    const item = items.find(i => i.id === id);
-    if (!item) return;
-
-    const oldDescription = item.description;
-
-    // Optimistic update
-    setItems(prev =>
-      prev.map(i => (i.id === id ? { ...i, description } : i))
-    );
-
-    try {
-      await updateActionItemDescription(id, description);
-    } catch (err) {
-      console.error('Failed to update description:', err);
-      // Revert on error
-      setItems(prev =>
-        prev.map(i => (i.id === id ? { ...i, description: oldDescription } : i))
-      );
-      setError(err instanceof Error ? err.message : 'Failed to update task');
-    }
-  }, [items]);
-
-  // Remove item
-  const removeItem = useCallback(async (id: string) => {
-    const item = items.find(i => i.id === id);
-    if (!item) return;
-
-    // Optimistic update
-    setItems(prev => prev.filter(i => i.id !== id));
-
-    try {
-      await deleteActionItem(id);
-    } catch (err) {
-      console.error('Failed to delete task:', err);
-      // Revert on error
-      setItems(prev => [...prev, item]);
-      setError(err instanceof Error ? err.message : 'Failed to delete task');
-    }
-  }, [items]);
-
-  // Bulk complete
-  const bulkComplete = useCallback(async (ids: string[]) => {
-    // Optimistic update
-    setItems(prev =>
-      prev.map(item =>
-        ids.includes(item.id)
-          ? { ...item, completed: true, completed_at: new Date().toISOString() }
-          : item
-      )
-    );
-
-    try {
-      await Promise.all(ids.map(id => toggleActionItemCompleted(id, true)));
-    } catch (err) {
-      console.error('Failed to bulk complete:', err);
-      // Refresh to get correct state
-      fetchItems();
-      setError(err instanceof Error ? err.message : 'Failed to complete tasks');
-    }
-  }, [fetchItems]);
-
-  // Bulk delete
-  const bulkDelete = useCallback(async (ids: string[]) => {
-    const deletedItems = items.filter(i => ids.includes(i.id));
-
-    // Optimistic update
-    setItems(prev => prev.filter(i => !ids.includes(i.id)));
-
-    try {
-      await Promise.all(ids.map(id => deleteActionItem(id)));
-    } catch (err) {
-      console.error('Failed to bulk delete:', err);
-      // Revert on error
-      setItems(prev => [...prev, ...deletedItems]);
-      setError(err instanceof Error ? err.message : 'Failed to delete tasks');
-    }
-  }, [items]);
-
-  // Bulk snooze
-  const bulkSnooze = useCallback(async (ids: string[], days: number) => {
-    const newDate = new Date();
-    newDate.setDate(newDate.getDate() + days);
-    const newDueAt = newDate.toISOString();
-
-    // Optimistic update
-    setItems(prev =>
-      prev.map(item =>
-        ids.includes(item.id) ? { ...item, due_at: newDueAt } : item
-      )
-    );
-
-    try {
-      await Promise.all(ids.map(id => updateActionItemDueDate(id, newDueAt)));
-    } catch (err) {
-      console.error('Failed to bulk snooze:', err);
-      // Refresh to get correct state
-      fetchItems();
-      setError(err instanceof Error ? err.message : 'Failed to snooze tasks');
-    }
-  }, [fetchItems]);
-
-  // Bulk set due date (for no-due-date items)
-  const bulkSetDueDate = useCallback(async (ids: string[], date: Date | null) => {
-    const newDueAt = date ? date.toISOString() : null;
-
-    // Optimistic update
-    setItems(prev =>
-      prev.map(item =>
-        ids.includes(item.id) ? { ...item, due_at: newDueAt } : item
-      )
-    );
-
-    try {
-      await Promise.all(ids.map(id => updateActionItemDueDate(id, newDueAt)));
-    } catch (err) {
-      console.error('Failed to bulk set due date:', err);
-      // Refresh to get correct state
-      fetchItems();
-      setError(err instanceof Error ? err.message : 'Failed to set due dates');
-    }
-  }, [fetchItems]);
-
-  return {
-    items,
-    groupedItems,
-    loading,
-    error,
-    sortedFlatList,
-    stats,
-    weekData,
-    refresh: fetchItems,
-    addItem,
-    toggleComplete,
-    snooze,
-    setDueDate,
-    updateDescription,
-    removeItem,
-    bulkComplete,
-    bulkDelete,
-    bulkSnooze,
-    bulkSetDueDate,
-  };
-}
diff --git a/web/app/src/hooks/useConversation.ts b/web/app/src/hooks/useConversation.ts
deleted file mode 100644
index 5a5f31f1bcf..00000000000
--- a/web/app/src/hooks/useConversation.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { getConversation } from '@/lib/api';
-import type { Conversation } from '@/types/conversation';
-
-interface UseConversationOptions {
-  enabled?: boolean;
-}
-
-interface UseConversationReturn {
-  conversation: Conversation | null;
-  loading: boolean;
-  error: string | null;
-  refresh: () => Promise<void>;
-  update: (conversation: Conversation) => void;
-}
-
-/**
- * Hook to fetch a single conversation by ID
- */
-export function useConversation(
-  id: string | null,
-  options: UseConversationOptions = {}
-): UseConversationReturn {
-  const { enabled = true } = options;
-
-  const [conversation, setConversation] = useState<Conversation | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchConversation = useCallback(async () => {
-    if (!enabled || !id) {
-      setLoading(false);
-      return;
-    }
-
-    try {
-      setLoading(true);
-      setError(null);
-
-      const data = await getConversation(id);
-      setConversation(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load conversation');
-      console.error('Failed to fetch conversation:', err);
-    } finally {
-      setLoading(false);
-    }
-  }, [enabled, id]);
-
-  useEffect(() => {
-    fetchConversation();
-  }, [fetchConversation]);
-
-  const refresh = useCallback(async () => {
-    await fetchConversation();
-  }, [fetchConversation]);
-
-  const update = useCallback((updatedConversation: Conversation) => {
-    setConversation(updatedConversation);
-  }, []);
-
-  return {
-    conversation,
-    loading,
-    error,
-    refresh,
-    update,
-  };
-}
diff --git a/web/app/src/hooks/useConversations.ts b/web/app/src/hooks/useConversations.ts
deleted file mode 100644
index ac244977b17..00000000000
--- a/web/app/src/hooks/useConversations.ts
+++ /dev/null
@@ -1,269 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { getConversations, GetConversationsParams } from '@/lib/api';
-import type { Conversation, GroupedConversations } from '@/types/conversation';
-import { formatRelativeDate } from '@/lib/utils';
-import {
-  getCache,
-  setCache,
-  onCacheInvalidation,
-  invalidationPatterns,
-  CACHE_TTL,
-  cacheKeys,
-} from '@/lib/cache';
-
-// Cache entry structure
-interface CacheEntry {
-  conversations: Conversation[];
-  offset: number;
-  hasMore: boolean;
-}
-
-function getCacheKey(folderId?: string, startDate?: Date, endDate?: Date): string {
-  return cacheKeys.conversations(
-    folderId,
-    startDate?.toISOString().split('T')[0],
-    endDate?.toISOString().split('T')[0]
-  );
-}
-
-function getFromCache(key: string): CacheEntry | null {
-  const cached = getCache<CacheEntry>(key);
-  return cached ? cached.data : null;
-}
-
-function isCacheStale(key: string): boolean {
-  const cached = getCache<CacheEntry>(key);
-  return cached ? cached.isStale : true;
-}
-
-function setToCache(key: string, conversations: Conversation[], offset: number, hasMore: boolean): void {
-  setCache<CacheEntry>(key, { conversations, offset, hasMore }, CACHE_TTL.MEDIUM);
-}
-
-interface UseConversationsOptions extends GetConversationsParams {
-  enabled?: boolean;
-}
-
-interface UseConversationsReturn {
-  conversations: Conversation[];
-  groupedConversations: GroupedConversations;
-  loading: boolean;
-  error: string | null;
-  hasMore: boolean;
-  loadMore: () => Promise<void>;
-  refresh: () => Promise<void>;
-}
-
-/**
- * Hook to fetch and manage conversations
- */
-export function useConversations(
-  options: UseConversationsOptions = {}
-): UseConversationsReturn {
-  const { enabled = true, limit = 50, ...params } = options;
-
-  // Get cache key and check for cached data
-  const cacheKey = getCacheKey(params.folderId, params.startDate, params.endDate);
-  const cachedEntry = getFromCache(cacheKey);
-
-  const [conversations, setConversations] = useState<Conversation[]>(cachedEntry?.conversations || []);
-  const [loading, setLoading] = useState(!cachedEntry); // Only show loading if no cache
-  const [error, setError] = useState<string | null>(null);
-  const [offset, setOffset] = useState(cachedEntry?.offset || 0);
-  const [hasMore, setHasMore] = useState(cachedEntry?.hasMore ?? true);
-  const [hasProcessing, setHasProcessing] = useState(false);
-
-  // Track previous params to detect changes
-  const prevStartDate = useRef(params.startDate?.getTime());
-  const prevEndDate = useRef(params.endDate?.getTime());
-  const prevFolderId = useRef(params.folderId);
-
-  // Track if a fetch is in progress to prevent concurrent fetches
-  const fetchingRef = useRef(false);
-
-  // Group conversations by date - memoized for performance
-  const groupedConversations = useMemo<GroupedConversations>(() => {
-    return conversations.reduce(
-      (groups, conversation) => {
-        const date = new Date(conversation.started_at || conversation.created_at);
-        const dateKey = formatRelativeDate(date);
-
-        if (!groups[dateKey]) {
-          groups[dateKey] = [];
-        }
-        groups[dateKey].push(conversation);
-
-        return groups;
-      },
-      {} as GroupedConversations
-    );
-  }, [conversations]);
-
-  // Fetch conversations
-  const fetchConversations = useCallback(
-    async (currentOffset: number, append: boolean = false, backgroundRefresh: boolean = false) => {
-      if (!enabled) return;
-
-      // Prevent concurrent fetches
-      if (fetchingRef.current) return;
-      fetchingRef.current = true;
-
-      const key = getCacheKey(params.folderId, params.startDate, params.endDate);
-
-      try {
-        // Only show loading spinner if not a background refresh and no cached data
-        if (!backgroundRefresh) {
-          setLoading(true);
-        }
-        setError(null);
-
-        const data = await getConversations({
-          limit,
-          offset: currentOffset,
-          statuses: params.statuses,
-          includeDiscarded: params.includeDiscarded,
-          startDate: params.startDate,
-          endDate: params.endDate,
-          folderId: params.folderId,
-        });
-
-        // Sort by date descending
-        const sorted = data.sort((a, b) => {
-          const dateA = new Date(a.started_at || a.created_at);
-          const dateB = new Date(b.started_at || b.created_at);
-          return dateB.getTime() - dateA.getTime();
-        });
-
-        // Use functional update to avoid conversations in dependency array
-        const hasMoreData = data.length === limit;
-        setHasMore(hasMoreData);
-
-        setConversations(prev => {
-          const newConversations = append ? [...prev, ...sorted] : sorted;
-          // Save to cache
-          setToCache(key, newConversations, currentOffset, hasMoreData);
-          return newConversations;
-        });
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load conversations');
-        console.error('Failed to fetch conversations:', err);
-      } finally {
-        setLoading(false);
-        fetchingRef.current = false;
-      }
-    },
-    // Only depend on primitive values, not objects
-    [enabled, limit, params.statuses, params.includeDiscarded, params.startDate, params.endDate, params.folderId]
-  );
-
-  // Initial fetch and refetch when filter params change
-  useEffect(() => {
-    const startDateChanged = params.startDate?.getTime() !== prevStartDate.current;
-    const endDateChanged = params.endDate?.getTime() !== prevEndDate.current;
-    const folderIdChanged = params.folderId !== prevFolderId.current;
-
-    // Update refs
-    prevStartDate.current = params.startDate?.getTime();
-    prevEndDate.current = params.endDate?.getTime();
-    prevFolderId.current = params.folderId;
-
-    const key = getCacheKey(params.folderId, params.startDate, params.endDate);
-    const cached = getFromCache(key);
-
-    // If filter params changed, check cache for new filter
-    if (startDateChanged || endDateChanged || folderIdChanged) {
-      if (cached) {
-        // Load from cache immediately
-        setConversations(cached.conversations);
-        setOffset(cached.offset);
-        setHasMore(cached.hasMore);
-        setLoading(false);
-
-        // If cache is stale, do background refresh
-        if (isCacheStale(key)) {
-          fetchConversations(0, false, true);
-        }
-      } else {
-        // No cache, do normal fetch
-        setOffset(0);
-        setHasMore(true);
-        fetchConversations(0, false);
-      }
-    } else if (conversations.length === 0 && !cached) {
-      // Initial load with no cache
-      setOffset(0);
-      setHasMore(true);
-      fetchConversations(0, false);
-    } else if (cached && isCacheStale(key)) {
-      // Have cached data but it's stale, do background refresh
-      fetchConversations(0, false, true);
-    }
-  }, [params.startDate, params.endDate, params.folderId, fetchConversations]);
-
-  // Subscribe to cache invalidation - refetch when conversations are modified
-  useEffect(() => {
-    const unsubscribe = onCacheInvalidation((pattern) => {
-      if (pattern === invalidationPatterns.conversations) {
-        // Cache was invalidated, do a fresh fetch
-        fetchConversations(0, false, false);
-      }
-    });
-    return unsubscribe;
-  }, [fetchConversations]);
-
-  // Track if any conversations are processing
-  useEffect(() => {
-    const processing = conversations.some(c => c.status === 'processing');
-    setHasProcessing(processing);
-  }, [conversations]);
-
-  // Poll for updates while conversations are processing with exponential backoff
-  useEffect(() => {
-    if (!hasProcessing) return;
-
-    let pollCount = 0;
-    let timeoutId: NodeJS.Timeout;
-
-    const poll = () => {
-      fetchConversations(0, false, true); // Background refresh, skip cache
-      pollCount++;
-
-      // Exponential backoff: 5s, 10s, 20s, 30s (max)
-      const nextInterval = Math.min(5000 * Math.pow(2, Math.floor(pollCount / 3)), 30000);
-      timeoutId = setTimeout(poll, nextInterval);
-    };
-
-    // Start polling after initial 5s delay
-    timeoutId = setTimeout(poll, 5000);
-
-    return () => clearTimeout(timeoutId);
-  }, [hasProcessing, fetchConversations]);
-
-  // Load more conversations
-  const loadMore = useCallback(async () => {
-    if (loading || !hasMore) return;
-
-    const newOffset = offset + limit;
-    setOffset(newOffset);
-    await fetchConversations(newOffset, true);
-  }, [loading, hasMore, offset, limit, fetchConversations]);
-
-  // Refresh conversations (reset and reload)
-  const refresh = useCallback(async () => {
-    setOffset(0);
-    setHasMore(true);
-    await fetchConversations(0, false);
-  }, [fetchConversations]);
-
-  return {
-    conversations,
-    groupedConversations,
-    loading,
-    error,
-    hasMore,
-    loadMore,
-    refresh,
-  };
-}
diff --git a/web/app/src/hooks/useGoalDetail.ts b/web/app/src/hooks/useGoalDetail.ts
deleted file mode 100644
index 208d6dcd0cd..00000000000
--- a/web/app/src/hooks/useGoalDetail.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client';
-
-import { useCallback, useMemo, useState } from 'react';
-import { getGoalAdvice, getGoalHistory } from '@/lib/api';
-import { useAsyncResource } from '@/hooks/useAsyncResource';
-import { useRequestOwner } from '@/hooks/useRequestOwner';
-import type { GoalHistoryEntry } from '@/types/goals';
-
-export interface UseGoalDetailReturn {
-  history: GoalHistoryEntry[];
-  historyLoading: boolean;
-  historyError: string | null;
-  advice: string | null;
-  adviceLoading: boolean;
-  adviceError: string | null;
-  requestAdvice: () => Promise<void>;
-}
-
-const NO_HISTORY: GoalHistoryEntry[] = [];
-
-/**
- * History for one goal, plus advice fetched only on demand.
- *
- * Advice is an LLM call behind a server-side rate limit, so it never runs on
- * open — only when the user asks for it. It is therefore plain state rather
- * than a resource, which would fetch eagerly.
- */
-export function useGoalDetail(goalId: string | null): UseGoalDetailReturn {
-  const history = useAsyncResource(
-    goalId,
-    useCallback(() => getGoalHistory(goalId as string), [goalId]),
-    { fallbackMessage: 'Failed to load history' },
-  );
-
-  const [advice, setAdvice] = useState<string | null>(null);
-  const [adviceLoading, setAdviceLoading] = useState(false);
-  const [adviceError, setAdviceError] = useState<string | null>(null);
-  const [adviceGoalId, setAdviceGoalId] = useState<string | null>(goalId);
-
-  // Advice belongs to the goal it was requested for; drop it when the
-  // selection changes rather than showing it under a new title. The in-flight
-  // request goes with it: the new goal starts idle, not stuck behind the old
-  // goal's pending call.
-  if (goalId !== adviceGoalId) {
-    setAdviceGoalId(goalId);
-    setAdvice(null);
-    setAdviceError(null);
-    setAdviceLoading(false);
-  }
-
-  const claimRequest = useRequestOwner(goalId);
-
-  const requestAdvice = useCallback(async () => {
-    if (!goalId) return;
-    const isCurrent = claimRequest();
-    setAdviceLoading(true);
-    setAdviceError(null);
-    try {
-      const result = await getGoalAdvice(goalId);
-      if (!isCurrent()) return;
-      setAdvice(result);
-    } catch (err) {
-      if (!isCurrent()) return;
-      console.error('Failed to load goal advice:', err);
-      setAdviceError(err instanceof Error ? err.message : 'Failed to load advice');
-    } finally {
-      if (isCurrent()) setAdviceLoading(false);
-    }
-  }, [goalId, claimRequest]);
-
-  return useMemo(
-    () => ({
-      history: history.data ?? NO_HISTORY,
-      historyLoading: history.loading,
-      historyError: history.error,
-      advice,
-      adviceLoading,
-      adviceError,
-      requestAdvice,
-    }),
-    [
-      history.data,
-      history.loading,
-      history.error,
-      advice,
-      adviceLoading,
-      adviceError,
-      requestAdvice,
-    ],
-  );
-}
diff --git a/web/app/src/hooks/useKnowledgeGraph.ts b/web/app/src/hooks/useKnowledgeGraph.ts
deleted file mode 100644
index 277f75ba4bc..00000000000
--- a/web/app/src/hooks/useKnowledgeGraph.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import type { KnowledgeGraph, KnowledgeGraphNode, KnowledgeGraphEdge, KnowledgeGraphNodeType } from '@/types/conversation';
-import { getKnowledgeGraph, rebuildKnowledgeGraph } from '@/lib/api';
-
-// Node colors matching mobile app
-export const NODE_COLORS: Record<KnowledgeGraphNodeType | 'user', string> = {
-  person: '#00FFFF',      // Cyan
-  place: '#00FF9D',       // Green
-  organization: '#FFA500', // Orange
-  thing: '#A855F7',       // Purple
-  concept: '#3B82F6',     // Blue
-  user: '#FFFFFF',        // White (center node)
-};
-
-// Graph data format for react-force-graph
-export interface GraphData {
-  nodes: GraphNode[];
-  links: GraphLink[];
-}
-
-export interface GraphNode {
-  id: string;
-  label: string;
-  nodeType: KnowledgeGraphNodeType | 'user';
-  color: string;
-  aliases: string[];
-  memoryIds: string[];
-  val: number; // Node size
-  // Position properties added by force-graph during simulation
-  x?: number;
-  y?: number;
-  z?: number;
-}
-
-export interface GraphLink {
-  id: string;
-  source: string;
-  target: string;
-  label: string;
-  memoryIds: string[];
-}
-
-export interface UseKnowledgeGraphReturn {
-  graphData: GraphData | null;
-  loading: boolean;
-  error: string | null;
-  rebuilding: boolean;
-  selectedNode: GraphNode | null;
-  // Actions
-  refresh: () => Promise<void>;
-  rebuild: () => Promise<void>;
-  selectNode: (node: GraphNode | null) => void;
-  // Helpers
-  getNodeById: (id: string) => GraphNode | undefined;
-  getConnectedNodes: (nodeId: string) => GraphNode[];
-  getNodeMemoryCount: (nodeId: string) => number;
-}
-
-export function useKnowledgeGraph(): UseKnowledgeGraphReturn {
-  const [rawData, setRawData] = useState<KnowledgeGraph | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [rebuilding, setRebuilding] = useState(false);
-  const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
-
-  const initialFetchDone = useRef(false);
-
-  // Transform raw data to graph format
-  const graphData = useMemo((): GraphData | null => {
-    if (!rawData) return null;
-
-    // Create user node as the center - make it large and white
-    const userNode: GraphNode = {
-      id: 'user',
-      label: 'You',
-      nodeType: 'user',
-      color: '#FFFFFF', // Pure white
-      aliases: [],
-      memoryIds: [],
-      val: 40, // Much larger size for center node
-    };
-
-    // Transform nodes
-    const nodes: GraphNode[] = [
-      userNode,
-      ...rawData.nodes.map((node): GraphNode => ({
-        id: node.id,
-        label: node.label,
-        nodeType: node.node_type,
-        color: NODE_COLORS[node.node_type] || NODE_COLORS.thing,
-        aliases: node.aliases,
-        memoryIds: node.memory_ids,
-        val: Math.max(3, Math.min(10, node.memory_ids.length * 2)), // Size based on memory count
-      })),
-    ];
-
-    // Transform edges/links
-    const links: GraphLink[] = rawData.edges.map((edge): GraphLink => ({
-      id: edge.id,
-      source: edge.source_id,
-      target: edge.target_id,
-      label: edge.label,
-      memoryIds: edge.memory_ids,
-    }));
-
-    // Add links from user to all nodes (so they cluster around the center)
-    const nodesWithConnections = new Set(links.flatMap((l) => [l.source, l.target]));
-
-    // For nodes without connections, link them directly to user
-    rawData.nodes.forEach((node) => {
-      if (!nodesWithConnections.has(node.id)) {
-        links.push({
-          id: `user-${node.id}`,
-          source: 'user',
-          target: node.id,
-          label: 'related to',
-          memoryIds: node.memory_ids,
-        });
-      }
-    });
-
-    return { nodes, links };
-  }, [rawData]);
-
-  // Fetch graph data
-  const fetchGraph = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const data = await getKnowledgeGraph();
-      setRawData(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load knowledge graph');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  // Initial fetch
-  useEffect(() => {
-    if (!initialFetchDone.current) {
-      initialFetchDone.current = true;
-      fetchGraph();
-    }
-  }, [fetchGraph]);
-
-  // Refresh
-  const refresh = useCallback(async () => {
-    initialFetchDone.current = true;
-    await fetchGraph();
-  }, [fetchGraph]);
-
-  // Rebuild graph
-  const rebuild = useCallback(async () => {
-    try {
-      setRebuilding(true);
-      setError(null);
-      await rebuildKnowledgeGraph();
-      // Wait a bit then refresh to get updated data
-      await new Promise((resolve) => setTimeout(resolve, 2000));
-      await fetchGraph();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to rebuild knowledge graph');
-    } finally {
-      setRebuilding(false);
-    }
-  }, [fetchGraph]);
-
-  // Select node
-  const selectNode = useCallback((node: GraphNode | null) => {
-    setSelectedNode(node);
-  }, []);
-
-  // Get node by ID
-  const getNodeById = useCallback((id: string): GraphNode | undefined => {
-    return graphData?.nodes.find((n) => n.id === id);
-  }, [graphData]);
-
-  // Get connected nodes
-  const getConnectedNodes = useCallback((nodeId: string): GraphNode[] => {
-    if (!graphData) return [];
-
-    const connectedIds = new Set<string>();
-    graphData.links.forEach((link) => {
-      if (link.source === nodeId || (typeof link.source === 'object' && (link.source as GraphNode).id === nodeId)) {
-        const targetId = typeof link.target === 'object' ? (link.target as GraphNode).id : link.target;
-        connectedIds.add(targetId);
-      }
-      if (link.target === nodeId || (typeof link.target === 'object' && (link.target as GraphNode).id === nodeId)) {
-        const sourceId = typeof link.source === 'object' ? (link.source as GraphNode).id : link.source;
-        connectedIds.add(sourceId);
-      }
-    });
-
-    return graphData.nodes.filter((n) => connectedIds.has(n.id));
-  }, [graphData]);
-
-  // Get memory count for node
-  const getNodeMemoryCount = useCallback((nodeId: string): number => {
-    const node = getNodeById(nodeId);
-    return node?.memoryIds.length || 0;
-  }, [getNodeById]);
-
-  return {
-    graphData,
-    loading,
-    error,
-    rebuilding,
-    selectedNode,
-    refresh,
-    rebuild,
-    selectNode,
-    getNodeById,
-    getConnectedNodes,
-    getNodeMemoryCount,
-  };
-}
diff --git a/web/app/src/hooks/useMemories.ts b/web/app/src/hooks/useMemories.ts
deleted file mode 100644
index 0b6a600513b..00000000000
--- a/web/app/src/hooks/useMemories.ts
+++ /dev/null
@@ -1,549 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef } from 'react';
-import type { Memory, MemoryCategory, MemoryVisibility } from '@/types/conversation';
-import {
-  getMemories,
-  createMemory,
-  updateMemoryContent,
-  updateMemoryVisibility,
-  deleteMemory,
-  deleteMemoriesBatch,
-  reviewMemory,
-} from '@/lib/api';
-import {
-  getCache,
-  setCache,
-  updateCache,
-  onCacheInvalidation,
-  invalidationPatterns,
-  CACHE_TTL,
-  cacheKeys,
-} from '@/lib/cache';
-import { getCachedMemories, cacheMemories } from '@/lib/indexeddb';
-
-export interface UseMemoriesOptions {
-  categories?: MemoryCategory[];
-  limit?: number;
-}
-
-/** Outcome of a chunked bulk delete. */
-export interface RemoveMemoriesResult {
-  /** Whether every chunk succeeded. */
-  success: boolean;
-  /** IDs confirmed deleted across successful chunks (empty unless chunks ran). */
-  deletedIds: string[];
-}
-
-export interface UseMemoriesReturn {
-  memories: Memory[];
-  loading: boolean;
-  error: string | null;
-  hasMore: boolean;
-  loadMore: () => Promise<void>;
-  refresh: () => Promise<void>;
-  addMemory: (content: string, visibility?: MemoryVisibility) => Promise<Memory | null>;
-  editMemory: (id: string, content: string) => Promise<boolean>;
-  removeMemory: (id: string) => Promise<boolean>;
-  removeMemories: (ids: string[]) => Promise<RemoveMemoriesResult>;
-  toggleVisibility: (id: string, visibility: MemoryVisibility) => Promise<boolean>;
-  acceptMemory: (id: string) => Promise<boolean>;
-  rejectMemory: (id: string) => Promise<boolean>;
-  setCategories: (categories: MemoryCategory[]) => void;
-  activeCategories: MemoryCategory[];
-}
-
-// Cache entry structure
-interface CacheEntry {
-  memories: Memory[];
-  offset: number;
-  hasMore: boolean;
-}
-
-function getCacheKey(categories: MemoryCategory[]): string {
-  return cacheKeys.memories(categories.length === 0 ? [] : [...categories].sort());
-}
-
-function getFromCache(key: string): CacheEntry | null {
-  const cached = getCache<CacheEntry>(key);
-  return cached ? cached.data : null;
-}
-
-function setToCache(
-  key: string,
-  memories: Memory[],
-  offset: number,
-  hasMore: boolean,
-): void {
-  setCache<CacheEntry>(key, { memories, offset, hasMore }, CACHE_TTL.MEDIUM);
-}
-
-function updateCacheMemories(
-  key: string,
-  updater: (memories: Memory[]) => Memory[],
-): void {
-  updateCache<CacheEntry>(key, (entry) => ({
-    ...entry,
-    memories: updater(entry.memories),
-  }));
-}
-
-function isCacheStale(key: string): boolean {
-  const cached = getCache<CacheEntry>(key);
-  return cached ? cached.isStale : true;
-}
-
-export function useMemories(options: UseMemoriesOptions = {}): UseMemoriesReturn {
-  const { limit = 25 } = options;
-
-  const [activeCategories, setActiveCategories] = useState<MemoryCategory[]>(
-    options.categories || [],
-  );
-
-  // Get cache key for current categories
-  const cacheKey = getCacheKey(activeCategories);
-  const cachedEntry = getFromCache(cacheKey);
-
-  // Initialize state from cache if available
-  const [memories, setMemories] = useState<Memory[]>(cachedEntry?.memories || []);
-  const [loading, setLoading] = useState(!cachedEntry); // Only show loading if no cache
-  const [error, setError] = useState<string | null>(null);
-  const [hasMore, setHasMore] = useState(cachedEntry?.hasMore ?? true);
-
-  // Use ref for offset to avoid dependency issues
-  const offsetRef = useRef(cachedEntry?.offset || 0);
-  // Track if a fetch is in progress to prevent concurrent fetches
-  const fetchingRef = useRef(false);
-  // Track if initial fetch is done
-  const initializedRef = useRef(false);
-
-  // Core fetch function
-  const doFetch = useCallback(
-    async (categories: MemoryCategory[], currentOffset: number): Promise<Memory[]> => {
-      const result = await getMemories({
-        limit,
-        offset: currentOffset,
-        categories: categories.length > 0 ? categories : undefined,
-      });
-      return result;
-    },
-    [limit],
-  );
-
-  // Initial load - check cache first (memory → IndexedDB → network)
-  useEffect(() => {
-    if (initializedRef.current) return;
-    initializedRef.current = true;
-
-    const key = getCacheKey(activeCategories);
-    const cached = getFromCache(key);
-
-    // If we have fresh in-memory cache, use it and skip fetch
-    if (cached && !isCacheStale(key)) {
-      setMemories(cached.memories);
-      setHasMore(cached.hasMore);
-      offsetRef.current = cached.offset;
-      setLoading(false);
-      return;
-    }
-
-    // If we have stale in-memory cache, show it but refresh in background
-    if (cached) {
-      setMemories(cached.memories);
-      setHasMore(cached.hasMore);
-      offsetRef.current = cached.offset;
-      setLoading(false);
-      // Don't return - continue to background refresh
-    }
-
-    const loadInitial = async () => {
-      if (fetchingRef.current) return;
-      fetchingRef.current = true;
-
-      // Try IndexedDB first if no in-memory cache
-      if (!cached) {
-        const indexedDBMemories = await getCachedMemories();
-        if (indexedDBMemories && indexedDBMemories.length > 0) {
-          console.log('[useMemories] Loaded from IndexedDB');
-          setMemories(indexedDBMemories);
-          offsetRef.current = indexedDBMemories.length;
-          setHasMore(indexedDBMemories.length >= limit);
-          // Also update in-memory cache
-          setToCache(
-            key,
-            indexedDBMemories,
-            indexedDBMemories.length,
-            indexedDBMemories.length >= limit,
-          );
-          setLoading(false);
-          // Continue to background refresh to get latest data
-        } else {
-          // No cache at all, show loading
-          setLoading(true);
-        }
-      } else {
-        // Already showing stale in-memory cache, don't show loading
-        setLoading(false);
-      }
-
-      setError(null);
-
-      try {
-        const result = await doFetch(activeCategories, 0);
-        setMemories(result);
-        offsetRef.current = result.length;
-        setHasMore(result.length >= limit);
-        // Update both caches
-        setToCache(key, result, result.length, result.length >= limit);
-        await cacheMemories(result);
-      } catch (err) {
-        // Check if we have any cached data to show
-        let hasAnyCachedData = !!cached;
-        if (!hasAnyCachedData) {
-          try {
-            const indexedDbMemories = await getCachedMemories();
-            hasAnyCachedData = !!indexedDbMemories;
-          } catch {
-            // If reading from IndexedDB fails, don't mask the original error
-          }
-        }
-
-        const baseMessage =
-          err instanceof Error ? err.message : 'Failed to load memories';
-        if (hasAnyCachedData) {
-          // Show that refresh failed but cached data is available
-          setError(`${baseMessage} (showing cached data)`);
-        } else {
-          setError(baseMessage);
-        }
-      } finally {
-        setLoading(false);
-        fetchingRef.current = false;
-      }
-    };
-
-    loadInitial();
-  }, [doFetch, activeCategories, limit]);
-
-  // Handle category changes (after initial load)
-  const prevCategoriesRef = useRef<string>(JSON.stringify(activeCategories));
-  useEffect(() => {
-    const currentKey = JSON.stringify(activeCategories);
-    if (prevCategoriesRef.current === currentKey) return;
-    prevCategoriesRef.current = currentKey;
-
-    // Only refetch if already initialized
-    if (!initializedRef.current) return;
-
-    const key = getCacheKey(activeCategories);
-    const cached = getFromCache(key);
-
-    // If we have cache for this category, use it immediately
-    if (cached) {
-      setMemories(cached.memories);
-      setHasMore(cached.hasMore);
-      offsetRef.current = cached.offset;
-
-      // If not stale, we're done
-      if (!isCacheStale(key)) {
-        return;
-      }
-      // If stale, continue to background refresh
-    }
-
-    const loadForCategories = async () => {
-      if (fetchingRef.current) return;
-      fetchingRef.current = true;
-
-      // Only show loading if no cache
-      if (!cached) {
-        setLoading(true);
-      }
-      setError(null);
-
-      try {
-        const result = await doFetch(activeCategories, 0);
-        setMemories(result);
-        offsetRef.current = result.length;
-        setHasMore(result.length >= limit);
-        // Update cache
-        setToCache(key, result, result.length, result.length >= limit);
-      } catch (err) {
-        if (!cached) {
-          setError(err instanceof Error ? err.message : 'Failed to load memories');
-        }
-      } finally {
-        setLoading(false);
-        fetchingRef.current = false;
-      }
-    };
-
-    loadForCategories();
-  }, [activeCategories, doFetch, limit]);
-
-  // Subscribe to cache invalidation - refetch when memories are modified elsewhere
-  useEffect(() => {
-    const unsubscribe = onCacheInvalidation((pattern) => {
-      if (pattern === invalidationPatterns.memories) {
-        // Clear local state and refetch
-        const key = getCacheKey(activeCategories);
-        const loadFresh = async () => {
-          if (fetchingRef.current) return;
-          fetchingRef.current = true;
-          try {
-            const result = await doFetch(activeCategories, 0);
-            setMemories(result);
-            offsetRef.current = result.length;
-            setHasMore(result.length >= limit);
-            setToCache(key, result, result.length, result.length >= limit);
-          } catch (err) {
-            // Silent fail on background refresh
-            console.error('Failed to refresh memories after invalidation:', err);
-          } finally {
-            fetchingRef.current = false;
-          }
-        };
-        loadFresh();
-      }
-    });
-    return unsubscribe;
-  }, [activeCategories, doFetch, limit]);
-
-  // Load more (pagination)
-  const loadMore = useCallback(async () => {
-    if (fetchingRef.current || !hasMore) return;
-    fetchingRef.current = true;
-    setLoading(true);
-
-    const key = getCacheKey(activeCategories);
-
-    try {
-      const result = await doFetch(activeCategories, offsetRef.current);
-
-      setMemories((prev) => {
-        // Deduplicate
-        const existingIds = new Set(prev.map((m) => m.id));
-        const newMemories = result.filter((m) => !existingIds.has(m.id));
-        const updated = [...prev, ...newMemories];
-        // Update cache with new memories
-        const newOffset = offsetRef.current + result.length;
-        const newHasMore = result.length >= limit;
-        setToCache(key, updated, newOffset, newHasMore);
-        return updated;
-      });
-
-      offsetRef.current += result.length;
-      setHasMore(result.length >= limit);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load more memories');
-    } finally {
-      setLoading(false);
-      fetchingRef.current = false;
-    }
-  }, [activeCategories, doFetch, hasMore, limit]);
-
-  // Refresh
-  const refresh = useCallback(async () => {
-    if (fetchingRef.current) return;
-    fetchingRef.current = true;
-    setLoading(true);
-    setError(null);
-
-    const key = getCacheKey(activeCategories);
-
-    try {
-      const result = await doFetch(activeCategories, 0);
-      setMemories(result);
-      offsetRef.current = result.length;
-      setHasMore(result.length >= limit);
-      // Update cache
-      setToCache(key, result, result.length, result.length >= limit);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to refresh memories');
-    } finally {
-      setLoading(false);
-      fetchingRef.current = false;
-    }
-  }, [activeCategories, doFetch, limit]);
-
-  // Add memory
-  const addMemory = useCallback(
-    async (
-      content: string,
-      visibility: MemoryVisibility = 'public',
-    ): Promise<Memory | null> => {
-      const key = getCacheKey(activeCategories);
-      try {
-        const newMemory = await createMemory({ content, visibility, category: 'manual' });
-        setMemories((prev) => {
-          const updated = [newMemory, ...prev];
-          // Update cache
-          updateCacheMemories(key, () => updated);
-          return updated;
-        });
-        return newMemory;
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to create memory');
-        return null;
-      }
-    },
-    [activeCategories],
-  );
-
-  // Edit memory
-  const editMemory = useCallback(
-    async (id: string, content: string): Promise<boolean> => {
-      const key = getCacheKey(activeCategories);
-      try {
-        await updateMemoryContent(id, content);
-        const updater = (prev: Memory[]) =>
-          prev.map((m) =>
-            m.id === id
-              ? { ...m, content, edited: true, updated_at: new Date().toISOString() }
-              : m,
-          );
-        setMemories(updater);
-        updateCacheMemories(key, updater);
-        return true;
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to update memory');
-        return false;
-      }
-    },
-    [activeCategories],
-  );
-
-  // Remove memory
-  const removeMemory = useCallback(
-    async (id: string): Promise<boolean> => {
-      const key = getCacheKey(activeCategories);
-      try {
-        await deleteMemory(id);
-        const updater = (prev: Memory[]) => prev.filter((m) => m.id !== id);
-        setMemories(updater);
-        updateCacheMemories(key, updater);
-        return true;
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to delete memory');
-        return false;
-      }
-    },
-    [activeCategories],
-  );
-
-  // Remove multiple memories via the batch API. IDs are sent in chunks of 100 (the
-  // server's per-request cap) and each successful chunk is applied to the UI
-  // immediately, so a later chunk failure can never leave already-deleted items
-  // visible. Returns success only when every chunk succeeded; on partial failure the
-  // confirmed-deleted IDs are surfaced via deletedIds so callers can drop them from
-  // any selection they keep for retry (otherwise a retry would re-send IDs the server
-  // already removed and trip the all-or-nothing 404).
-  const removeMemories = useCallback(
-    async (ids: string[]): Promise<RemoveMemoriesResult> => {
-      if (ids.length === 0) return { success: true, deletedIds: [] };
-      const key = getCacheKey(activeCategories);
-      const CHUNK_SIZE = 100;
-      const deletedIds: string[] = [];
-      try {
-        for (let i = 0; i < ids.length; i += CHUNK_SIZE) {
-          const chunk = ids.slice(i, i + CHUNK_SIZE);
-          await deleteMemoriesBatch(chunk);
-          deletedIds.push(...chunk);
-          const removed = new Set(chunk);
-          const updater = (prev: Memory[]) => prev.filter((m) => !removed.has(m.id));
-          setMemories(updater);
-          updateCacheMemories(key, updater);
-        }
-        return { success: true, deletedIds };
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to delete memories');
-        return { success: false, deletedIds };
-      }
-    },
-    [activeCategories],
-  );
-
-  // Toggle visibility
-  const toggleVisibility = useCallback(
-    async (id: string, visibility: MemoryVisibility): Promise<boolean> => {
-      const key = getCacheKey(activeCategories);
-      try {
-        await updateMemoryVisibility(id, visibility);
-        const updater = (prev: Memory[]) =>
-          prev.map((m) =>
-            m.id === id ? { ...m, visibility, updated_at: new Date().toISOString() } : m,
-          );
-        setMemories(updater);
-        updateCacheMemories(key, updater);
-        return true;
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to update visibility');
-        return false;
-      }
-    },
-    [activeCategories],
-  );
-
-  // Accept memory
-  const acceptMemory = useCallback(
-    async (id: string): Promise<boolean> => {
-      const key = getCacheKey(activeCategories);
-      try {
-        await reviewMemory(id, true);
-        const updater = (prev: Memory[]) =>
-          prev.map((m) =>
-            m.id === id ? { ...m, reviewed: true, user_review: true } : m,
-          );
-        setMemories(updater);
-        updateCacheMemories(key, updater);
-        return true;
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to accept memory');
-        return false;
-      }
-    },
-    [activeCategories],
-  );
-
-  // Reject memory
-  const rejectMemory = useCallback(
-    async (id: string): Promise<boolean> => {
-      const key = getCacheKey(activeCategories);
-      try {
-        await reviewMemory(id, false);
-        const updater = (prev: Memory[]) => prev.filter((m) => m.id !== id);
-        setMemories(updater);
-        updateCacheMemories(key, updater);
-        return true;
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to reject memory');
-        return false;
-      }
-    },
-    [activeCategories],
-  );
-
-  // Set categories
-  const setCategories = useCallback((categories: MemoryCategory[]) => {
-    setActiveCategories(categories);
-    offsetRef.current = 0;
-  }, []);
-
-  return {
-    memories,
-    loading,
-    error,
-    hasMore,
-    loadMore,
-    refresh,
-    addMemory,
-    editMemory,
-    removeMemory,
-    removeMemories,
-    toggleVisibility,
-    acceptMemory,
-    rejectMemory,
-    setCategories,
-    activeCategories,
-  };
-}
diff --git a/web/app/src/hooks/usePeople.ts b/web/app/src/hooks/usePeople.ts
deleted file mode 100644
index 260d49ddf45..00000000000
--- a/web/app/src/hooks/usePeople.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { getPeople, createPerson, updatePersonName, deletePerson } from '@/lib/api';
-import type { Person } from '@/types/user';
-
-interface UsePeopleReturn {
-  people: Person[];
-  loading: boolean;
-  error: string | null;
-  refresh: () => Promise<void>;
-  addPerson: (name: string) => Promise<Person | null>;
-  updatePerson: (personId: string, name: string) => Promise<boolean>;
-  removePerson: (personId: string) => Promise<boolean>;
-}
-
-/**
- * Hook to manage people (speakers) for transcript identification
- */
-export function usePeople(): UsePeopleReturn {
-  const [people, setPeople] = useState<Person[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchPeople = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await getPeople();
-      // Sort alphabetically by name
-      setPeople(data.sort((a, b) => a.name.localeCompare(b.name)));
-    } catch (err) {
-      console.error('Failed to fetch people:', err);
-      setError('Failed to load people');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchPeople();
-  }, [fetchPeople]);
-
-  const addPerson = useCallback(async (name: string): Promise<Person | null> => {
-    try {
-      const newPerson = await createPerson(name);
-      setPeople(prev => [...prev, newPerson].sort((a, b) => a.name.localeCompare(b.name)));
-      return newPerson;
-    } catch (err) {
-      console.error('Failed to create person:', err);
-      return null;
-    }
-  }, []);
-
-  const updatePerson = useCallback(async (personId: string, name: string): Promise<boolean> => {
-    try {
-      await updatePersonName(personId, name);
-      setPeople(prev =>
-        prev
-          .map(p => (p.id === personId ? { ...p, name } : p))
-          .sort((a, b) => a.name.localeCompare(b.name))
-      );
-      return true;
-    } catch (err) {
-      console.error('Failed to update person:', err);
-      return false;
-    }
-  }, []);
-
-  const removePerson = useCallback(async (personId: string): Promise<boolean> => {
-    try {
-      await deletePerson(personId);
-      setPeople(prev => prev.filter(p => p.id !== personId));
-      return true;
-    } catch (err) {
-      console.error('Failed to delete person:', err);
-      return false;
-    }
-  }, []);
-
-  return {
-    people,
-    loading,
-    error,
-    refresh: fetchPeople,
-    addPerson,
-    updatePerson,
-    removePerson,
-  };
-}
diff --git a/web/app/src/hooks/useRecaps.ts b/web/app/src/hooks/useRecaps.ts
deleted file mode 100644
index 1c831f618ff..00000000000
--- a/web/app/src/hooks/useRecaps.ts
+++ /dev/null
@@ -1,288 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import type { DailySummary, GroupedDailySummaries } from '@/types/recap';
-import {
-  getDailySummaries,
-  getDailySummary,
-  deleteDailySummary,
-  generateTestDailySummary,
-} from '@/lib/api';
-import { getCache, setCache, updateCache, CACHE_TTL } from '@/lib/cache';
-
-export interface UseRecapsOptions {
-  limit?: number;
-}
-
-export interface UseRecapsReturn {
-  recaps: DailySummary[];
-  groupedRecaps: GroupedDailySummaries;
-  loading: boolean;
-  error: string | null;
-  hasMore: boolean;
-  loadMore: () => Promise<void>;
-  refresh: () => Promise<void>;
-  removeRecap: (id: string) => Promise<boolean>;
-  generateForDate: (date: string) => Promise<DailySummary | null>;
-  getRecapDetail: (id: string) => Promise<DailySummary | null>;
-}
-
-// Cache key for recaps data - uses centralized cache system
-const RECAPS_CACHE_KEY = 'recaps:list';
-
-// Structure stored in centralized cache
-interface RecapsCacheData {
-  recaps: DailySummary[];
-  offset: number;
-  hasMore: boolean;
-}
-
-function getFromCache(): { data: RecapsCacheData; isStale: boolean } | null {
-  return getCache<RecapsCacheData>(RECAPS_CACHE_KEY);
-}
-
-function setToCache(recaps: DailySummary[], offset: number, hasMore: boolean): void {
-  setCache<RecapsCacheData>(RECAPS_CACHE_KEY, { recaps, offset, hasMore }, CACHE_TTL.MEDIUM);
-}
-
-function updateCacheRecaps(updater: (recaps: DailySummary[]) => DailySummary[]): void {
-  updateCache<RecapsCacheData>(RECAPS_CACHE_KEY, (data) => ({
-    ...data,
-    recaps: updater(data.recaps),
-  }));
-}
-
-// Parse YYYY-MM-DD as local date (not UTC)
-function parseLocalDate(dateString: string): Date {
-  const [year, month, day] = dateString.split('-').map(Number);
-  return new Date(year, month - 1, day);
-}
-
-// Group recaps by month (e.g., "January 2025")
-function groupByMonth(recaps: DailySummary[]): GroupedDailySummaries {
-  if (!Array.isArray(recaps) || recaps.length === 0) {
-    return {};
-  }
-  return recaps.reduce((groups, recap) => {
-    const date = parseLocalDate(recap.date);
-    const monthKey = date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-    });
-    if (!groups[monthKey]) {
-      groups[monthKey] = [];
-    }
-    groups[monthKey].push(recap);
-    return groups;
-  }, {} as GroupedDailySummaries);
-}
-
-// Safely extract array from API response
-function normalizeRecapsResponse(response: unknown): DailySummary[] {
-  if (Array.isArray(response)) {
-    return response;
-  }
-  // Handle wrapped response like { daily_summaries: [...] }
-  if (response && typeof response === 'object') {
-    const obj = response as Record<string, unknown>;
-    if (Array.isArray(obj.daily_summaries)) {
-      return obj.daily_summaries;
-    }
-    if (Array.isArray(obj.summaries)) {
-      return obj.summaries;
-    }
-    if (Array.isArray(obj.data)) {
-      return obj.data;
-    }
-  }
-  return [];
-}
-
-export function useRecaps(options: UseRecapsOptions = {}): UseRecapsReturn {
-  const { limit = 30 } = options;
-
-  const cachedEntry = getFromCache();
-
-  // Initialize state from cache if available
-  const [recaps, setRecaps] = useState<DailySummary[]>(cachedEntry?.data.recaps || []);
-  const [loading, setLoading] = useState(!cachedEntry);
-  const [error, setError] = useState<string | null>(null);
-  const [hasMore, setHasMore] = useState(cachedEntry?.data.hasMore ?? true);
-
-  // Use ref for offset to avoid dependency issues
-  const offsetRef = useRef(cachedEntry?.data.offset || 0);
-  // Track if a fetch is in progress to prevent concurrent fetches
-  const fetchingRef = useRef(false);
-  // Track if initial fetch is done
-  const initializedRef = useRef(false);
-
-  // Compute grouped recaps
-  const groupedRecaps = useMemo(() => groupByMonth(recaps), [recaps]);
-
-  // Core fetch function
-  const doFetch = useCallback(async (currentOffset: number): Promise<DailySummary[]> => {
-    const result = await getDailySummaries({
-      limit,
-      offset: currentOffset,
-    });
-    return normalizeRecapsResponse(result);
-  }, [limit]);
-
-  // Initial load
-  useEffect(() => {
-    if (initializedRef.current) return;
-    initializedRef.current = true;
-
-    const cached = getFromCache();
-
-    // If we have fresh cache, use it and skip fetch
-    if (cached && !cached.isStale) {
-      setRecaps(cached.data.recaps);
-      setHasMore(cached.data.hasMore);
-      offsetRef.current = cached.data.offset;
-      setLoading(false);
-      return;
-    }
-
-    // If we have stale cache, show it but refresh in background
-    if (cached) {
-      setRecaps(cached.data.recaps);
-      setHasMore(cached.data.hasMore);
-      offsetRef.current = cached.data.offset;
-      setLoading(false);
-    }
-
-    const loadInitial = async () => {
-      if (fetchingRef.current) return;
-      fetchingRef.current = true;
-
-      if (!cached) {
-        setLoading(true);
-      }
-      setError(null);
-
-      try {
-        const result = await doFetch(0);
-        setRecaps(result);
-        offsetRef.current = result.length;
-        setHasMore(result.length >= limit);
-        setToCache(result, result.length, result.length >= limit);
-      } catch (err) {
-        if (!cached) {
-          setError(err instanceof Error ? err.message : 'Failed to load recaps');
-        }
-      } finally {
-        setLoading(false);
-        fetchingRef.current = false;
-      }
-    };
-
-    loadInitial();
-  }, [doFetch, limit]);
-
-  // Load more (pagination)
-  const loadMore = useCallback(async () => {
-    if (fetchingRef.current || !hasMore) return;
-    fetchingRef.current = true;
-    setLoading(true);
-
-    try {
-      const result = await doFetch(offsetRef.current);
-
-      setRecaps((prev) => {
-        // Deduplicate
-        const existingIds = new Set(prev.map((r) => r.id));
-        const newRecaps = result.filter((r) => !existingIds.has(r.id));
-        const updated = [...prev, ...newRecaps];
-        const newOffset = offsetRef.current + result.length;
-        const newHasMore = result.length >= limit;
-        setToCache(updated, newOffset, newHasMore);
-        return updated;
-      });
-
-      offsetRef.current += result.length;
-      setHasMore(result.length >= limit);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load more recaps');
-    } finally {
-      setLoading(false);
-      fetchingRef.current = false;
-    }
-  }, [doFetch, hasMore, limit]);
-
-  // Refresh
-  const refresh = useCallback(async () => {
-    if (fetchingRef.current) return;
-    fetchingRef.current = true;
-    setLoading(true);
-    setError(null);
-
-    try {
-      const result = await doFetch(0);
-      setRecaps(result);
-      offsetRef.current = result.length;
-      setHasMore(result.length >= limit);
-      setToCache(result, result.length, result.length >= limit);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to refresh recaps');
-    } finally {
-      setLoading(false);
-      fetchingRef.current = false;
-    }
-  }, [doFetch, limit]);
-
-  // Remove recap
-  const removeRecap = useCallback(async (id: string): Promise<boolean> => {
-    try {
-      await deleteDailySummary(id);
-      const updater = (prev: DailySummary[]) => prev.filter((r) => r.id !== id);
-      setRecaps(updater);
-      updateCacheRecaps(updater);
-      return true;
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to delete recap');
-      return false;
-    }
-  }, []);
-
-  // Generate recap for a specific date
-  const generateForDate = useCallback(async (date: string): Promise<DailySummary | null> => {
-    try {
-      const newRecap = await generateTestDailySummary(date);
-      setRecaps((prev) => {
-        // Add to beginning and sort by date descending
-        const updated = [newRecap, ...prev.filter((r) => r.id !== newRecap.id)];
-        updated.sort((a, b) => parseLocalDate(b.date).getTime() - parseLocalDate(a.date).getTime());
-        updateCacheRecaps(() => updated);
-        return updated;
-      });
-      return newRecap;
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to generate recap');
-      return null;
-    }
-  }, []);
-
-  // Get single recap detail
-  const getRecapDetail = useCallback(async (id: string): Promise<DailySummary | null> => {
-    try {
-      return await getDailySummary(id);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load recap detail');
-      return null;
-    }
-  }, []);
-
-  return {
-    recaps,
-    groupedRecaps,
-    loading,
-    error,
-    hasMore,
-    loadMore,
-    refresh,
-    removeRecap,
-    generateForDate,
-    getRecapDetail,
-  };
-}
diff --git a/web/app/src/hooks/useScores.ts b/web/app/src/hooks/useScores.ts
deleted file mode 100644
index 1a46fc7dac1..00000000000
--- a/web/app/src/hooks/useScores.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client';
-
-import { getScores } from '@/lib/api';
-import { useAsyncResource } from '@/hooks/useAsyncResource';
-import type { Scores } from '@/types/scores';
-
-export interface UseScoresReturn {
-  scores: Scores | null;
-  loading: boolean;
-  error: string | null;
-  refresh: () => Promise<void>;
-}
-
-export function useScores(): UseScoresReturn {
-  const { data, loading, error, refresh } = useAsyncResource('scores', getScores, {
-    fallbackMessage: 'Failed to load scores',
-  });
-
-  return { scores: data ?? null, loading, error, refresh };
-}
diff --git a/web/app/src/hooks/useScreenFrames.ts b/web/app/src/hooks/useScreenFrames.ts
index fe541e33883..48871daa24a 100644
--- a/web/app/src/hooks/useScreenFrames.ts
+++ b/web/app/src/hooks/useScreenFrames.ts
@@ -6,7 +6,7 @@ import {
   deleteScreenFrame,
   getConversationScreenFrames,
   patchScreenFrameSharing,
-} from '@/lib/api';
+} from '@/features/conversations/api';
 import type { ConversationScreenFrameSet } from '@/types/conversation';
 
 interface UseScreenFramesOptions {
diff --git a/web/app/src/hooks/useSearchConversations.ts b/web/app/src/hooks/useSearchConversations.ts
deleted file mode 100644
index 7022173a078..00000000000
--- a/web/app/src/hooks/useSearchConversations.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client';
-
-import { useState, useCallback, useRef } from 'react';
-import { searchConversations as searchConversationsApi } from '@/lib/api';
-import type { Conversation } from '@/types/conversation';
-
-interface UseSearchConversationsReturn {
-  results: Conversation[];
-  loading: boolean;
-  error: string | null;
-  currentPage: number;
-  totalPages: number;
-  search: (query: string) => Promise<void>;
-  loadMore: () => Promise<void>;
-  clear: () => void;
-}
-
-export function useSearchConversations(): UseSearchConversationsReturn {
-  const [results, setResults] = useState<Conversation[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(0);
-  const currentQueryRef = useRef<string>('');
-
-  const search = useCallback(async (query: string) => {
-    // Don't search if query is empty
-    if (!query.trim()) {
-      setResults([]);
-      setCurrentPage(1);
-      setTotalPages(0);
-      currentQueryRef.current = '';
-      return;
-    }
-
-    currentQueryRef.current = query;
-    setLoading(true);
-    setError(null);
-
-    try {
-      const response = await searchConversationsApi({
-        query,
-        page: 1,
-        perPage: 20,
-      });
-
-      setResults(response.items);
-      setCurrentPage(response.current_page);
-      setTotalPages(response.total_pages);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Search failed');
-      console.error('Search error:', err);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const loadMore = useCallback(async () => {
-    if (loading || currentPage >= totalPages || !currentQueryRef.current) {
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      const response = await searchConversationsApi({
-        query: currentQueryRef.current,
-        page: currentPage + 1,
-        perPage: 20,
-      });
-
-      setResults((prev) => [...prev, ...response.items]);
-      setCurrentPage(response.current_page);
-      setTotalPages(response.total_pages);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load more results');
-      console.error('Load more error:', err);
-    } finally {
-      setLoading(false);
-    }
-  }, [loading, currentPage, totalPages]);
-
-  const clear = useCallback(() => {
-    setResults([]);
-    setCurrentPage(1);
-    setTotalPages(0);
-    setError(null);
-    currentQueryRef.current = '';
-  }, []);
-
-  return {
-    results,
-    loading,
-    error,
-    currentPage,
-    totalPages,
-    search,
-    loadMore,
-    clear,
-  };
-}
diff --git a/web/app/src/lib/__tests__/profileMenu.test.ts b/web/app/src/lib/__tests__/profileMenu.test.ts
index 9bd0dd87837..fc373339821 100644
--- a/web/app/src/lib/__tests__/profileMenu.test.ts
+++ b/web/app/src/lib/__tests__/profileMenu.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { PROFILE_MENU_MAX_HEIGHT, profileMenuHeightBound } from '@/lib/profileMenu';
-import { SETTINGS_SECTIONS } from '@/lib/settingsSections';
+import { SETTINGS_SECTIONS } from '@/features/settings';
 
 /**
  * The profile menu opens by transitioning to a fixed max-height rather than to
diff --git a/web/app/src/lib/__tests__/subscriptionPlanApi.test.ts b/web/app/src/lib/__tests__/subscriptionPlanApi.test.ts
index 31d21461397..730f78df5f4 100644
--- a/web/app/src/lib/__tests__/subscriptionPlanApi.test.ts
+++ b/web/app/src/lib/__tests__/subscriptionPlanApi.test.ts
@@ -9,7 +9,7 @@ vi.mock('@/lib/clientDevice', () => ({
   getWebDeviceIdHash: vi.fn(async () => 'test-device'),
 }));
 
-import { getUserSubscription } from '@/lib/api';
+import { getUserSubscription } from '@/features/settings';
 
 afterEach(() => {
   vi.unstubAllGlobals();
@@ -28,18 +28,19 @@ describe('getUserSubscription plan decoding', () => {
   ])('decodes %s without capability inference', async (raw, expectedPaid) => {
     vi.stubGlobal(
       'fetch',
-      vi.fn(async () =>
-        new Response(
-          JSON.stringify({
-            subscription: {
-              plan: raw,
-              status: 'active',
-              features: [],
-              cancel_at_period_end: false,
-            },
-          }),
-          { headers: { 'content-type': 'application/json' } },
-        ),
+      vi.fn(
+        async () =>
+          new Response(
+            JSON.stringify({
+              subscription: {
+                plan: raw,
+                status: 'active',
+                features: [],
+                cancel_at_period_end: false,
+              },
+            }),
+            { headers: { 'content-type': 'application/json' } },
+          ),
       ),
     );
 
diff --git a/web/app/src/lib/api.ts b/web/app/src/lib/api.ts
deleted file mode 100644
index 7a5d6103a39..00000000000
--- a/web/app/src/lib/api.ts
+++ /dev/null
@@ -1,2685 +0,0 @@
-import { getIdToken } from './firebase';
-import { getWebDeviceIdHash } from './clientDevice';
-import {
-  invalidateCache,
-  invalidateCacheKey,
-  invalidationPatterns,
-  fetchWithCache,
-  cacheKeys,
-  CACHE_TTL,
-} from './cache';
-import type {
-  Conversation,
-  ConversationSearchResponse,
-  ConversationScreenFrameSet,
-  ConversationStatus,
-  ActionItem,
-  Memory,
-  MemoryCategory,
-  MemoryVisibility,
-  KnowledgeGraph,
-  ScreenFrameSharingUpdateRequest,
-  ServerMessage,
-  MessageChunk,
-  MessageChunkType,
-  MessageFile,
-  AudioFileUrlInfo,
-} from '@/types/conversation';
-// Generated REST response envelopes (backend OpenAPI authority).
-import type {
-  MergeConversationsResponse,
-  CreateConversationResponse,
-  ActionItemsResponse,
-  FairUseStatusResponse,
-} from './omiApi.generated';
-export type {
-  MergeConversationsResponse,
-  CreateConversationResponse,
-  ActionItemsResponse,
-};
-import type { Goal, GoalHistoryEntry } from '@/types/goals';
-import type { ChatSession } from '@/types/chatSessions';
-import type { Scores } from '@/types/scores';
-import type {
-  App,
-  AppCategory,
-  AppCapability,
-  AppsGroupedResponse,
-  AppsSearchResponse,
-  AppsSearchParams,
-  CreateAppRequest,
-  UpdateAppRequest,
-  ThumbnailUploadResponse,
-  GenerateDescriptionResponse,
-  NotificationScope,
-  PaymentPlan,
-} from '@/types/apps';
-
-// Always use proxy to avoid CORS (browser → proxy → api.omi.me)
-const API_BASE_URL = '/api/proxy';
-
-/**
- * Make an authenticated API request
- */
-async function fetchWithAuth<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
-  let token: string | null = null;
-
-  try {
-    token = await getIdToken();
-  } catch (tokenError) {
-    console.error('Failed to get auth token:', tokenError);
-    throw new Error('Failed to get authentication token');
-  }
-
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-
-  const url = `${API_BASE_URL}${endpoint}`;
-  const deviceIdHash = await getWebDeviceIdHash();
-  const headers = new Headers({ Authorization: `Bearer ${token}` });
-  // FormData must set its own Content-Type so fetch can add the multipart
-  // boundary; forcing application/json here produces a body the server cannot
-  // parse.
-  if (!(options.body instanceof FormData)) {
-    headers.set('Content-Type', 'application/json');
-  }
-  new Headers(options.headers).forEach((value, name) => headers.set(name, value));
-  headers.set('X-App-Platform', 'web');
-  if (deviceIdHash) {
-    headers.set('X-Device-Id-Hash', deviceIdHash);
-  }
-
-  try {
-    const response = await fetch(url, {
-      ...options,
-      headers,
-    });
-
-    if (!response.ok) {
-      const errorText = await response.text().catch(() => 'No error body');
-      // Only log non-404 errors (404s are expected for optional endpoints)
-      if (response.status !== 404) {
-        console.error('API error response:', response.status, errorText);
-      }
-
-      if (response.status === 401) {
-        throw new Error('Unauthorized - please sign in again');
-      }
-      throw new Error(`API error: ${response.status} ${response.statusText}`);
-    }
-
-    // Handle 204 No Content responses (common for DELETE operations)
-    if (response.status === 204) {
-      return undefined as T;
-    }
-
-    return response.json();
-  } catch (fetchError) {
-    if (fetchError instanceof TypeError && fetchError.message === 'Failed to fetch') {
-      console.error('Network error - possible CORS issue or API unavailable');
-      throw new Error(
-        'Network error: Unable to reach the API. Please check your connection.',
-      );
-    }
-    throw fetchError;
-  }
-}
-
-/**
- * Get conversations list with optional filters
- */
-export interface GetConversationsParams {
-  limit?: number;
-  offset?: number;
-  statuses?: ConversationStatus[];
-  includeDiscarded?: boolean;
-  startDate?: Date;
-  endDate?: Date;
-  folderId?: string;
-}
-
-export async function getConversations(
-  params: GetConversationsParams = {},
-): Promise<Conversation[]> {
-  const {
-    limit = 50,
-    offset = 0,
-    statuses = ['processing', 'completed'],
-    includeDiscarded = false,
-    startDate,
-    endDate,
-    folderId,
-  } = params;
-
-  const queryParams = new URLSearchParams({
-    limit: limit.toString(),
-    offset: offset.toString(),
-    include_discarded: includeDiscarded.toString(),
-    statuses: statuses.join(','),
-  });
-
-  if (startDate) {
-    queryParams.set('start_date', startDate.toISOString());
-  }
-
-  if (endDate) {
-    queryParams.set('end_date', endDate.toISOString());
-  }
-
-  if (folderId) {
-    queryParams.set('folder_id', folderId);
-  }
-
-  return fetchWithAuth<Conversation[]>(`/v1/conversations?${queryParams}`);
-}
-
-/**
- * Get a single conversation by ID
- * Uses centralized cache with request deduplication
- */
-export async function getConversation(id: string): Promise<Conversation> {
-  return fetchWithCache<Conversation>(
-    cacheKeys.conversation(id),
-    () => fetchWithAuth<Conversation>(`/v1/conversations/${id}`),
-    { ttl: CACHE_TTL.SHORT },
-  );
-}
-
-/**
- * Search conversations
- */
-export interface SearchConversationsParams {
-  query: string;
-  page?: number;
-  perPage?: number;
-  includeDiscarded?: boolean;
-}
-
-export async function searchConversations(
-  params: SearchConversationsParams,
-): Promise<ConversationSearchResponse> {
-  const { query, page = 1, perPage = 10, includeDiscarded = false } = params;
-
-  return fetchWithAuth<ConversationSearchResponse>('/v1/conversations/search', {
-    method: 'POST',
-    body: JSON.stringify({
-      query,
-      page,
-      per_page: perPage,
-      include_discarded: includeDiscarded,
-    }),
-  });
-}
-
-/**
- * Toggle conversation starred status
- */
-export async function toggleStarred(id: string, starred: boolean): Promise<void> {
-  await fetchWithAuth(`/v1/conversations/${id}/starred?starred=${starred}`, {
-    method: 'PATCH',
-  });
-  invalidateCache(invalidationPatterns.conversations);
-}
-
-/**
- * Delete a conversation
- */
-export async function deleteConversation(id: string): Promise<void> {
-  await fetchWithAuth(`/v1/conversations/${id}`, {
-    method: 'DELETE',
-  });
-  invalidateCache(invalidationPatterns.conversations);
-}
-
-// =============================================================================
-// Meeting-note screenshots ("screen frames")
-// =============================================================================
-// Types come from the generated OpenAPI client (`@/types/conversation`
-// re-exports them). Route paths mirror the shared contract
-// (`data/reports/meeting-screenshots/DESIGN-sol.md` §1-2) exactly.
-
-/**
- * Get the approved screenshot set (banner + strip) for a conversation.
- * Uses the same fetch-with-cache idiom as `getConversation`; a short TTL
- * balances against the frame set's signed URLs expiring after 60 minutes.
- */
-export async function getConversationScreenFrames(
-  conversationId: string,
-): Promise<ConversationScreenFrameSet> {
-  return fetchWithCache<ConversationScreenFrameSet>(
-    cacheKeys.screenFrames(conversationId),
-    () =>
-      fetchWithAuth<ConversationScreenFrameSet>(
-        `/v1/conversations/${conversationId}/screenshots`,
-      ),
-    { ttl: CACHE_TTL.SHORT },
-  );
-}
-
-/**
- * Delete a single screenshot. The server may promote another already-
- * approved, already-persisted frame to banner (contract §8); the returned
- * set is authoritative, so callers should replace their local state with it
- * rather than trying to predict the promotion.
- */
-export async function deleteScreenFrame(
-  conversationId: string,
-  frameId: string,
-): Promise<ConversationScreenFrameSet> {
-  const result = await fetchWithAuth<ConversationScreenFrameSet>(
-    `/v1/conversations/${conversationId}/screenshots/${frameId}`,
-    { method: 'DELETE' },
-  );
-  invalidateCacheKey(cacheKeys.screenFrames(conversationId));
-  return result;
-}
-
-/** Delete every screenshot for a conversation (banner + strip). */
-export async function deleteAllScreenFrames(
-  conversationId: string,
-): Promise<ConversationScreenFrameSet> {
-  const result = await fetchWithAuth<ConversationScreenFrameSet>(
-    `/v1/conversations/${conversationId}/screenshots`,
-    { method: 'DELETE' },
-  );
-  invalidateCacheKey(cacheKeys.screenFrames(conversationId));
-  return result;
-}
-
-/**
- * Toggle whether this conversation's approved frames are visible on its
- * public share link. Default for a new conversation is `enabled: true`.
- */
-export async function patchScreenFrameSharing(
-  conversationId: string,
-  enabled: boolean,
-): Promise<ConversationScreenFrameSet> {
-  const body: ScreenFrameSharingUpdateRequest = { enabled };
-  const result = await fetchWithAuth<ConversationScreenFrameSet>(
-    `/v1/conversations/${conversationId}/screenshot-sharing`,
-    { method: 'PATCH', body: JSON.stringify(body) },
-  );
-  invalidateCacheKey(cacheKeys.screenFrames(conversationId));
-  return result;
-}
-
-/**
- * Merge multiple conversations into one
- * @param conversationIds - Array of conversation IDs to merge
- * @param reprocess - Whether to reprocess the merged conversation (default: true)
- * @returns Response with status and merged conversation IDs
- */
-export async function mergeConversations(
-  conversationIds: string[],
-  reprocess: boolean = true,
-): Promise<MergeConversationsResponse> {
-  return fetchWithAuth<MergeConversationsResponse>('/v1/conversations/merge', {
-    method: 'POST',
-    body: JSON.stringify({
-      conversation_ids: conversationIds,
-      reprocess,
-    }),
-  });
-}
-
-/**
- * Finalize an in-progress conversation from a recording session.
- * This processes the transcript, generates title/summary/action items,
- * and creates audio file records from stored chunks.
- *
- * @returns The processed conversation, or null if no in-progress conversation exists
- */
-export async function processInProgressConversation(): Promise<CreateConversationResponse | null> {
-  try {
-    const result = await fetchWithAuth<CreateConversationResponse>('/v1/conversations', {
-      method: 'POST',
-      body: JSON.stringify({}),
-    });
-    invalidateCache(invalidationPatterns.conversations);
-    return result;
-  } catch (error) {
-    // 404 means no in-progress conversation exists
-    if (error instanceof Error && error.message.includes('404')) {
-      return null;
-    }
-    throw error;
-  }
-}
-
-/**
- * Finalize exactly one conversation by ID (desktop-style).
- * Prefer this over processInProgressConversation when a socket owns a
- * conversation_id — the Redis in_progress pointer is shared across device +
- * web and must not steal a pendant session (#5388).
- */
-export async function finalizeConversationById(
-  conversationId: string,
-): Promise<CreateConversationResponse | null> {
-  try {
-    const result = await fetchWithAuth<CreateConversationResponse>(
-      `/v1/conversations/${encodeURIComponent(conversationId)}/finalize`,
-      {
-        method: 'POST',
-        body: JSON.stringify({}),
-      },
-    );
-    invalidateCache(invalidationPatterns.conversations);
-    return result;
-  } catch (error) {
-    if (error instanceof Error && error.message.includes('404')) {
-      return null;
-    }
-    throw error;
-  }
-}
-
-// ============================================================================
-// Action Items (Tasks) API
-// ============================================================================
-
-/**
- * Get all action items
- */
-export interface GetActionItemsParams {
-  limit?: number;
-  offset?: number;
-  completed?: boolean;
-}
-
-export async function getActionItems(
-  params: GetActionItemsParams = {},
-): Promise<{ items: ActionItem[]; hasMore: boolean }> {
-  const { limit = 100, offset = 0, completed } = params;
-
-  const queryParams = new URLSearchParams({
-    limit: limit.toString(),
-    offset: offset.toString(),
-  });
-
-  if (completed !== undefined) {
-    queryParams.set('completed', completed.toString());
-  }
-
-  const response = await fetchWithAuth<ActionItemsResponse>(
-    `/v1/action-items?${queryParams}`,
-  );
-
-  return {
-    items: response.action_items || [],
-    hasMore: response.has_more || false,
-  };
-}
-
-/**
- * Create a new action item
- */
-export interface CreateActionItemParams {
-  description: string;
-  due_at?: string | null;
-}
-
-export async function createActionItem(
-  params: CreateActionItemParams,
-): Promise<ActionItem> {
-  return fetchWithAuth<ActionItem>('/v1/action-items', {
-    method: 'POST',
-    body: JSON.stringify(params),
-  });
-}
-
-/**
- * Toggle action item completion status
- */
-export async function toggleActionItemCompleted(
-  id: string,
-  completed: boolean,
-): Promise<void> {
-  await fetchWithAuth(`/v1/action-items/${id}/completed?completed=${completed}`, {
-    method: 'PATCH',
-  });
-}
-
-/**
- * Update action item due date (for snooze functionality)
- */
-export async function updateActionItemDueDate(
-  id: string,
-  due_at: string | null,
-): Promise<void> {
-  await fetchWithAuth(`/v1/action-items/${id}`, {
-    method: 'PATCH',
-    body: JSON.stringify({ due_at }),
-  });
-}
-
-/**
- * Update action item description
- */
-export async function updateActionItemDescription(
-  id: string,
-  description: string,
-): Promise<void> {
-  await fetchWithAuth(`/v1/action-items/${id}`, {
-    method: 'PATCH',
-    body: JSON.stringify({ description }),
-  });
-}
-
-/**
- * Delete an action item
- */
-export async function deleteActionItem(id: string): Promise<void> {
-  await fetchWithAuth(`/v1/action-items/${id}`, {
-    method: 'DELETE',
-  });
-  invalidateCache(invalidationPatterns.actionItems);
-}
-
-// ============================================================================
-// Memories API
-// ============================================================================
-
-/**
- * Get memories list with optional filters
- */
-export interface GetMemoriesParams {
-  limit?: number;
-  offset?: number;
-  categories?: MemoryCategory[];
-}
-
-/**
- * Read memories.
- *
- * Category selection is deliberately not a parameter: `/v3/memories` accepts
- * limit, offset, cursor, and device scope only. Sending `categories` looked
- * like a filter but FastAPI drops the unknown query param, so the server
- * returned everything. Categories are applied client-side — see
- * `@/lib/memoryCategory`, which mirrors how the desktop clients do it.
- */
-export async function getMemories(params: GetMemoriesParams = {}): Promise<Memory[]> {
-  const { limit = 100, offset = 0 } = params;
-
-  const queryParams = new URLSearchParams({
-    limit: limit.toString(),
-    offset: offset.toString(),
-  });
-
-  return fetchWithAuth<Memory[]>(`/v3/memories?${queryParams}`);
-}
-
-/**
- * Create a new memory
- */
-export interface CreateMemoryParams {
-  content: string;
-  visibility?: MemoryVisibility;
-  category?: MemoryCategory;
-}
-
-export async function createMemory(params: CreateMemoryParams): Promise<Memory> {
-  const memory = await fetchWithAuth<Memory>('/v3/memories', {
-    method: 'POST',
-    body: JSON.stringify({
-      content: params.content,
-      visibility: params.visibility || 'public',
-      category: params.category || 'manual',
-    }),
-  });
-  invalidateCache(invalidationPatterns.memories);
-  return memory;
-}
-
-/**
- * Update memory content
- */
-export async function updateMemoryContent(id: string, content: string): Promise<void> {
-  const encodedValue = encodeURIComponent(content);
-  await fetchWithAuth(`/v3/memories/${id}?value=${encodedValue}`, {
-    method: 'PATCH',
-  });
-  invalidateCache(invalidationPatterns.memories);
-}
-
-/**
- * Update memory visibility
- */
-export async function updateMemoryVisibility(
-  id: string,
-  visibility: MemoryVisibility,
-): Promise<void> {
-  await fetchWithAuth(`/v3/memories/${id}/visibility?value=${visibility}`, {
-    method: 'PATCH',
-  });
-  invalidateCache(invalidationPatterns.memories);
-}
-
-/**
- * Delete a memory
- */
-export async function deleteMemory(id: string): Promise<void> {
-  await fetchWithAuth(`/v3/memories/${id}`, {
-    method: 'DELETE',
-  });
-  invalidateCache(invalidationPatterns.memories);
-}
-
-/**
- * Delete multiple memories in a single batch request (up to 100 per call).
- * Replaces N concurrent DELETE /v3/memories/{id} calls that triggered 429 rate limits.
- */
-export async function deleteMemoriesBatch(ids: string[]): Promise<void> {
-  await fetchWithAuth(`/v3/memories/batch`, {
-    method: 'DELETE',
-    body: JSON.stringify({ memory_ids: ids }),
-  });
-  invalidateCache(invalidationPatterns.memories);
-}
-
-/**
- * Review a memory (accept or reject)
- */
-export async function reviewMemory(id: string, accept: boolean): Promise<void> {
-  await fetchWithAuth(`/v3/memories/${id}/review?value=${accept}`, {
-    method: 'POST',
-  });
-}
-
-// ============================================================================
-// Knowledge Graph API
-// ============================================================================
-
-/**
- * Get knowledge graph data
- */
-export async function getKnowledgeGraph(): Promise<KnowledgeGraph> {
-  return fetchWithAuth<KnowledgeGraph>('/v1/knowledge-graph');
-}
-
-/**
- * Trigger knowledge graph rebuild
- */
-export async function rebuildKnowledgeGraph(): Promise<void> {
-  await fetchWithAuth('/v1/knowledge-graph/rebuild', {
-    method: 'POST',
-  });
-}
-
-// ============================================================================
-// Chat sessions API
-// ============================================================================
-
-interface ChatSessionWire {
-  id: string;
-  title?: string | null;
-  preview?: string | null;
-  created_at: string;
-  updated_at: string;
-  app_id?: string | null;
-  message_count?: number | null;
-  starred?: boolean | null;
-}
-
-function toChatSession(wire: ChatSessionWire): ChatSession {
-  return {
-    id: wire.id,
-    title: wire.title ?? undefined,
-    preview: wire.preview ?? undefined,
-    createdAt: wire.created_at,
-    updatedAt: wire.updated_at,
-    appId: wire.app_id ?? undefined,
-    messageCount: wire.message_count ?? 0,
-    starred: Boolean(wire.starred),
-  };
-}
-
-export async function getChatSessions(appId?: string): Promise<ChatSession[]> {
-  const query = appId ? `?app_id=${encodeURIComponent(appId)}` : '';
-  const sessions = await fetchWithAuth<ChatSessionWire[]>(`/v2/chat-sessions${query}`);
-  return Array.isArray(sessions) ? sessions.map(toChatSession) : [];
-}
-
-export async function createChatSession(
-  params: { title?: string; app_id?: string } = {},
-): Promise<ChatSession> {
-  return toChatSession(
-    await fetchWithAuth<ChatSessionWire>('/v2/chat-sessions', {
-      method: 'POST',
-      body: JSON.stringify(params),
-    }),
-  );
-}
-
-export async function updateChatSession(
-  id: string,
-  updates: { title?: string; starred?: boolean },
-): Promise<ChatSession> {
-  return toChatSession(
-    await fetchWithAuth<ChatSessionWire>(`/v2/chat-sessions/${id}`, {
-      method: 'PATCH',
-      body: JSON.stringify(updates),
-    }),
-  );
-}
-
-export async function deleteChatSession(id: string): Promise<void> {
-  await fetchWithAuth(`/v2/chat-sessions/${id}`, { method: 'DELETE' });
-}
-
-export interface RealtimeSessionToken {
-  provider: 'gemini';
-  token: string;
-  expires_at?: string;
-}
-
-export interface RealtimeUsageReport {
-  input_text_tokens: number;
-  input_audio_tokens: number;
-  input_cached_tokens: number;
-  output_text_tokens: number;
-  output_audio_tokens: number;
-}
-
-interface SavedRealtimeMessage {
-  id: string;
-  created_at: string;
-  session_id?: string | null;
-}
-
-export async function createGeminiLiveSession(): Promise<RealtimeSessionToken> {
-  return fetchWithAuth<RealtimeSessionToken>('/v2/realtime/session', {
-    method: 'POST',
-    body: JSON.stringify({ provider: 'gemini' }),
-  });
-}
-
-export async function saveRealtimeMessage(params: {
-  text: string;
-  sender: 'human' | 'ai';
-  clientMessageId: string;
-  appId?: string;
-  sessionId?: string | null;
-}): Promise<SavedRealtimeMessage> {
-  return fetchWithAuth<SavedRealtimeMessage>('/v2/desktop/messages', {
-    method: 'POST',
-    body: JSON.stringify({
-      text: params.text,
-      sender: params.sender,
-      app_id: params.appId,
-      session_id: params.sessionId,
-      client_message_id: params.clientMessageId,
-      message_source: 'realtime_voice',
-    }),
-  });
-}
-
-export async function reportGeminiLiveUsage(usage: RealtimeUsageReport): Promise<void> {
-  await fetchWithAuth('/v2/realtime/usage', {
-    method: 'POST',
-    body: JSON.stringify({
-      provider: 'gemini',
-      model: 'gemini-3.1-flash-live-preview',
-      ...usage,
-    }),
-  });
-}
-
-// ============================================================================
-// Goals & Scores API
-// ============================================================================
-
-/**
- * Get all goals.
- *
- * Uses `/v1/goals/all` rather than `/v1/goals/canonical/list` so the page works
- * for every signed-in user; the canonical route is gated on task-system
- * enrollment and 403s for everyone else.
- */
-export async function getGoals(includeEnded = false): Promise<Goal[]> {
-  const goals = await fetchWithAuth<Goal[]>(
-    `/v1/goals/all?include_ended=${includeEnded}`,
-  );
-  return Array.isArray(goals) ? goals : [];
-}
-
-/**
- * Create body, matching what the desktop apps send
- * (`desktop/windows/src/renderer/src/pages/Goals.tsx` saveNew): title, a
- * required positive target, and unit only when the user gave one.
- *
- * `target_value` is required — the backend 422s without it — so a title-only
- * goal defaults to 1, which completes on a single tick.
- */
-export interface CreateGoalParams {
-  title: string;
-  target_value: number;
-  unit?: string;
-}
-
-export async function createGoal(params: CreateGoalParams): Promise<Goal> {
-  const goal = await fetchWithAuth<Goal>('/v1/goals', {
-    method: 'POST',
-    body: JSON.stringify(params),
-  });
-  invalidateCache(invalidationPatterns.goals);
-  return goal;
-}
-
-/**
- * Update only a goal's progress value.
- *
- * The backend takes `current_value` as a query parameter on this route, not in
- * the body.
- */
-export async function updateGoalProgress(
-  id: string,
-  currentValue: number,
-): Promise<Goal> {
-  const goal = await fetchWithAuth<Goal>(
-    `/v1/goals/${id}/progress?current_value=${encodeURIComponent(currentValue)}`,
-    { method: 'PATCH' },
-  );
-  invalidateCache(invalidationPatterns.goals);
-  return goal;
-}
-
-export interface UpdateGoalParams {
-  title?: string;
-  target_value?: number;
-  current_value?: number;
-  unit?: string | null;
-}
-
-export async function updateGoal(id: string, updates: UpdateGoalParams): Promise<Goal> {
-  const goal = await fetchWithAuth<Goal>(`/v1/goals/${id}`, {
-    method: 'PATCH',
-    body: JSON.stringify(updates),
-  });
-  invalidateCache(invalidationPatterns.goals);
-  return goal;
-}
-
-export async function deleteGoal(id: string): Promise<void> {
-  await fetchWithAuth(`/v1/goals/${id}`, { method: 'DELETE' });
-  invalidateCache(invalidationPatterns.goals);
-}
-
-/**
- * Recorded progress values for a goal, newest window first.
- *
- * Uses `/v1/goals/{id}/history`, not `/v1/goals/{id}/detail`. The detail
- * projection and the progress-events feed both sit behind
- * `require_canonical_task_user`, which 404s for anyone not enrolled in the
- * canonical task system — most web users.
- */
-export async function getGoalHistory(id: string, days = 30): Promise<GoalHistoryEntry[]> {
-  const history = await fetchWithAuth<GoalHistoryEntry[]>(
-    `/v1/goals/${id}/history?days=${days}`,
-  );
-  return Array.isArray(history) ? history : [];
-}
-
-/** AI-generated advice for a goal. Rate limited server-side. */
-export async function getGoalAdvice(id: string): Promise<string> {
-  const response = await fetchWithAuth<{ advice: string }>(`/v1/goals/${id}/advice`);
-  return response.advice;
-}
-
-// ============================================================================
-
-/** Daily, weekly, and overall task-completion scores. */
-export async function getScores(date?: string): Promise<Scores> {
-  const query = date ? `?date=${encodeURIComponent(date)}` : '';
-  return fetchWithAuth<Scores>(`/v1/scores${query}`);
-}
-
-// ============================================================================
-// Chat/Messages API
-// ============================================================================
-
-/**
- * Decode base64 string to UTF-8 text
- * Handles multi-byte UTF-8 characters correctly
- */
-function decodeBase64Utf8(base64: string): string {
-  try {
-    // Decode base64 to binary string
-    const binaryString = atob(base64);
-    // Convert binary string to Uint8Array
-    const bytes = new Uint8Array(binaryString.length);
-    for (let i = 0; i < binaryString.length; i++) {
-      bytes[i] = binaryString.charCodeAt(i);
-    }
-    // Decode as UTF-8
-    const decoder = new TextDecoder('utf-8');
-    return decoder.decode(bytes);
-  } catch (e) {
-    console.error('Failed to decode base64 UTF-8:', e);
-    // Fallback to simple atob
-    return atob(base64);
-  }
-}
-
-/**
- * Parse a streaming response line into a MessageChunk
- */
-export function parseStreamLine(line: string): MessageChunk | null {
-  if (!line || line.trim() === '') return null;
-
-  if (line.startsWith('think: ')) {
-    return {
-      type: 'think' as MessageChunkType,
-      text: line.slice(7).replace(/__CRLF__/g, '\n'),
-    };
-  }
-  if (line.startsWith('data: ')) {
-    return {
-      type: 'data' as MessageChunkType,
-      text: line.slice(6).replace(/__CRLF__/g, '\n'),
-    };
-  }
-  if (line.startsWith('done: ')) {
-    try {
-      const decoded = decodeBase64Utf8(line.slice(6));
-      const message = JSON.parse(decoded) as ServerMessage;
-      return {
-        type: 'done' as MessageChunkType,
-        text: decoded,
-        message,
-      };
-    } catch (e) {
-      console.error('Failed to parse done chunk:', e);
-      return null;
-    }
-  }
-  if (line.startsWith('message: ')) {
-    try {
-      const decoded = decodeBase64Utf8(line.slice(9));
-      const message = JSON.parse(decoded) as ServerMessage;
-      return {
-        type: 'message' as MessageChunkType,
-        text: decoded,
-        message,
-      };
-    } catch (e) {
-      console.error('Failed to parse message chunk:', e);
-      return null;
-    }
-  }
-  if (line.startsWith('error: ')) {
-    return {
-      type: 'error' as MessageChunkType,
-      text: line.slice(7),
-    };
-  }
-
-  return null;
-}
-
-/**
- * Get message history
- */
-export async function getMessages(
-  appId?: string,
-  chatSessionId?: string | null,
-): Promise<ServerMessage[]> {
-  const queryParams = new URLSearchParams();
-  if (appId) {
-    queryParams.set('app_id', appId);
-  }
-  // Omitted entirely for the default shared thread; naming a session targets
-  // that one specific thread.
-  if (chatSessionId) {
-    queryParams.set('chat_session_id', chatSessionId);
-  }
-
-  const endpoint = `/v2/messages${queryParams.toString() ? `?${queryParams}` : ''}`;
-  return fetchWithAuth<ServerMessage[]>(endpoint);
-}
-
-/**
- * Send a message with streaming response
- */
-export async function sendMessageStream(
-  text: string,
-  onChunk: (chunk: MessageChunk) => void,
-  options?: {
-    appId?: string;
-    /** Target one specific thread; omit for the default shared thread. */
-    chatSessionId?: string | null;
-    fileIds?: string[];
-    context?: {
-      type: string;
-      id?: string;
-      title?: string;
-      summary?: string;
-      start_date?: string;
-      end_date?: string;
-    } | null;
-  },
-): Promise<void> {
-  let token: string | null = null;
-
-  try {
-    token = await getIdToken();
-  } catch (tokenError) {
-    console.error('Failed to get auth token:', tokenError);
-    throw new Error('Failed to get authentication token');
-  }
-
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-
-  const queryParams = new URLSearchParams();
-  if (options?.appId) {
-    queryParams.set('app_id', options.appId);
-  }
-  // Without this the reply is persisted to the default shared thread while the
-  // UI shows it under the selected one.
-  if (options?.chatSessionId) {
-    queryParams.set('chat_session_id', options.chatSessionId);
-  }
-
-  const url = `${API_BASE_URL}/v2/messages${queryParams.toString() ? `?${queryParams}` : ''}`;
-
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${token}`,
-      'Content-Type': 'application/json',
-      'X-App-Platform': 'web',
-    },
-    body: JSON.stringify({
-      text,
-      file_ids: options?.fileIds || [],
-      context: options?.context
-        ? {
-            type: options.context.type === 'general' ? 'recap' : options.context.type,
-            id: options.context.id,
-            title: options.context.title,
-            start_date: options.context.start_date,
-            end_date: options.context.end_date,
-          }
-        : null,
-    }),
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text().catch(() => 'No error body');
-    console.error('Send message error:', response.status, errorText);
-    throw new Error(`Failed to send message: ${response.status}`);
-  }
-
-  if (!response.body) {
-    throw new Error('No response body');
-  }
-
-  const reader = response.body.getReader();
-  const decoder = new TextDecoder();
-  let buffer = '';
-
-  try {
-    while (true) {
-      const { done, value } = await reader.read();
-
-      if (done) break;
-
-      buffer += decoder.decode(value, { stream: true });
-
-      // Process complete lines
-      const lines = buffer.split('\n');
-      buffer = lines.pop() || ''; // Keep incomplete line in buffer
-
-      for (const line of lines) {
-        const chunk = parseStreamLine(line);
-        if (chunk) {
-          onChunk(chunk);
-        }
-      }
-    }
-
-    // Process any remaining buffer
-    if (buffer) {
-      const chunk = parseStreamLine(buffer);
-      if (chunk) {
-        onChunk(chunk);
-      }
-    }
-  } finally {
-    reader.releaseLock();
-  }
-}
-
-/**
- * Clear message history
- */
-export async function clearMessages(
-  appId?: string,
-  chatSessionId?: string | null,
-): Promise<void> {
-  const queryParams = new URLSearchParams();
-  if (appId) {
-    queryParams.set('app_id', appId);
-  }
-  // Clearing must delete the thread the reader is looking at, not the shared one.
-  if (chatSessionId) {
-    queryParams.set('chat_session_id', chatSessionId);
-  }
-
-  const endpoint = `/v2/messages${queryParams.toString() ? `?${queryParams}` : ''}`;
-  await fetchWithAuth(endpoint, {
-    method: 'DELETE',
-  });
-}
-
-/**
- * Upload files for chat
- */
-export async function uploadChatFiles(
-  files: File[],
-  appId?: string,
-): Promise<MessageFile[]> {
-  let token: string | null = null;
-
-  try {
-    token = await getIdToken();
-  } catch (tokenError) {
-    console.error('Failed to get auth token:', tokenError);
-    throw new Error('Failed to get authentication token');
-  }
-
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-
-  const queryParams = new URLSearchParams();
-  if (appId) {
-    queryParams.set('app_id', appId);
-  }
-
-  const url = `${API_BASE_URL}/v2/files${queryParams.toString() ? `?${queryParams}` : ''}`;
-
-  const formData = new FormData();
-  for (const file of files) {
-    // Append with explicit filename to ensure proper handling
-    formData.append('files', file, file.name);
-  }
-
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-    body: formData,
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text().catch(() => 'No error body');
-    console.error('Upload files error:', response.status, errorText);
-    throw new Error(`Failed to upload files: ${response.status}`);
-  }
-
-  return response.json();
-}
-
-/**
- * Transcribe voice message to text
- */
-function getAudioFileExtension(mimeType: string): string {
-  const normalizedMimeType = mimeType.split(';', 1)[0].toLowerCase();
-  if (normalizedMimeType === 'audio/webm' || normalizedMimeType === 'video/webm')
-    return 'webm';
-  if (normalizedMimeType === 'audio/mp4' || normalizedMimeType === 'video/mp4')
-    return 'mp4';
-  return 'wav';
-}
-
-export async function transcribeVoiceMessage(audioBlob: Blob): Promise<string> {
-  let token: string | null = null;
-
-  try {
-    token = await getIdToken();
-  } catch (tokenError) {
-    console.error('Failed to get auth token:', tokenError);
-    throw new Error('Failed to get authentication token');
-  }
-
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-
-  const url = `${API_BASE_URL}/v2/voice-message/transcribe`;
-
-  const formData = new FormData();
-  // The backend uses the filename extension when it uploads audio for STT.
-  formData.append('files', audioBlob, `audio.${getAudioFileExtension(audioBlob.type)}`);
-  const deviceIdHash = await getWebDeviceIdHash();
-  const headers: HeadersInit = {
-    Authorization: `Bearer ${token}`,
-    'X-App-Platform': 'web',
-  };
-  if (deviceIdHash) {
-    headers['X-Device-Id-Hash'] = deviceIdHash;
-  }
-
-  const response = await fetch(url, {
-    method: 'POST',
-    headers,
-    body: formData,
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text().catch(() => 'No error body');
-    console.error('Transcribe error:', response.status, errorText);
-    throw new Error(`Failed to transcribe audio: ${response.status}`);
-  }
-
-  const data = await response.json();
-  return data.transcript || '';
-}
-
-// ============================================================================
-// Apps API
-// ============================================================================
-
-// Re-export App type for backward compatibility
-export type { App } from '@/types/apps';
-
-/**
- * Get apps grouped by capability (for explore page)
- */
-export async function getAppsGrouped(
-  params: {
-    capability?: string;
-    offset?: number;
-    limit?: number;
-  } = {},
-): Promise<AppsGroupedResponse> {
-  const { capability, offset = 0, limit = 20 } = params;
-
-  const queryParams = new URLSearchParams({
-    offset: offset.toString(),
-    limit: limit.toString(),
-  });
-
-  if (capability) {
-    queryParams.set('capability', capability);
-  }
-
-  return fetchWithAuth<AppsGroupedResponse>(`/v2/apps?${queryParams}`);
-}
-
-/**
- * Search apps with filters
- */
-export async function searchApps(
-  params: AppsSearchParams = {},
-): Promise<AppsSearchResponse> {
-  const queryParams = new URLSearchParams();
-
-  if (params.q) queryParams.set('q', params.q);
-  if (params.category) queryParams.set('category', params.category);
-  if (params.capability) queryParams.set('capability', params.capability);
-  if (params.rating !== undefined) queryParams.set('rating', params.rating.toString());
-  if (params.sort) queryParams.set('sort', params.sort);
-  if (params.my_apps) queryParams.set('my_apps', 'true');
-  if (params.installed_apps) queryParams.set('installed_apps', 'true');
-  queryParams.set('offset', (params.offset || 0).toString());
-  queryParams.set('limit', (params.limit || 20).toString());
-
-  return fetchWithAuth<AppsSearchResponse>(`/v2/apps/search?${queryParams}`);
-}
-
-/**
- * Get popular apps
- */
-export async function getPopularApps(): Promise<App[]> {
-  return fetchWithAuth<App[]>('/v1/apps/popular');
-}
-
-/**
- * Get a single app by ID
- */
-export async function getApp(appId: string): Promise<App> {
-  return fetchWithAuth<App>(`/v1/apps/${appId}`);
-}
-
-/**
- * Get app categories
- */
-export async function getAppCategories(): Promise<AppCategory[]> {
-  return fetchWithAuth<AppCategory[]>('/v1/app-categories');
-}
-
-/**
- * Get app capabilities
- */
-export async function getAppCapabilities(): Promise<AppCapability[]> {
-  return fetchWithAuth<AppCapability[]>('/v1/app-capabilities');
-}
-
-/**
- * Enable (install) an app
- */
-export async function enableApp(appId: string): Promise<{ status: string }> {
-  return fetchWithAuth<{ status: string }>(`/v1/apps/enable?app_id=${appId}`, {
-    method: 'POST',
-  });
-}
-
-/**
- * Disable (uninstall) an app
- */
-export async function disableApp(appId: string): Promise<{ status: string }> {
-  return fetchWithAuth<{ status: string }>(`/v1/apps/disable?app_id=${appId}`, {
-    method: 'POST',
-  });
-}
-
-/**
- * Get installed apps
- */
-export async function getInstalledApps(): Promise<AppsSearchResponse> {
-  return searchApps({ installed_apps: true, limit: 100 });
-}
-
-/**
- * Get chat-enabled apps (apps with 'chat' or 'persona' capability)
- */
-export async function getChatApps(): Promise<App[]> {
-  const response = await searchApps({ installed_apps: true, limit: 100 });
-  return response.data.filter(
-    (app) => app.capabilities?.includes('chat') || app.capabilities?.includes('persona'),
-  );
-}
-
-// ============================================================================
-// App Creation/Editing API
-// ============================================================================
-
-/**
- * Create a new app
- */
-export async function createApp(
-  data: CreateAppRequest & {
-    deleted?: boolean;
-    price?: number;
-    thumbnails?: string[];
-    uid?: string;
-  },
-  imageFile?: File,
-): Promise<{ app_id: string }> {
-  let token: string | null = null;
-
-  try {
-    token = await getIdToken();
-  } catch (tokenError) {
-    console.error('Failed to get auth token:', tokenError);
-    throw new Error('Failed to get authentication token');
-  }
-
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-
-  const url = `${API_BASE_URL}/v1/apps`;
-
-  const formData = new FormData();
-  formData.append('app_data', JSON.stringify(data));
-  if (imageFile) {
-    formData.append('file', imageFile, imageFile.name);
-  }
-
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-    body: formData,
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text().catch(() => 'No error body');
-    console.error('Create app error:', response.status, errorText);
-    throw new Error(`Failed to create app: ${response.status}`);
-  }
-
-  return response.json();
-}
-
-/**
- * Update an existing app
- */
-export async function updateApp(
-  appId: string,
-  data: Partial<CreateAppRequest>,
-  imageFile?: File,
-): Promise<void> {
-  let token: string | null = null;
-
-  try {
-    token = await getIdToken();
-  } catch (tokenError) {
-    console.error('Failed to get auth token:', tokenError);
-    throw new Error('Failed to get authentication token');
-  }
-
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-
-  const url = `${API_BASE_URL}/v1/apps/${appId}`;
-
-  // The API requires the id to be included in the app_data
-  const dataWithId = { ...data, id: appId };
-
-  const formData = new FormData();
-  formData.append('app_data', JSON.stringify(dataWithId));
-  if (imageFile) {
-    formData.append('file', imageFile, imageFile.name);
-  }
-
-  const response = await fetch(url, {
-    method: 'PATCH',
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-    body: formData,
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text().catch(() => 'No error body');
-    console.error('Update app error:', response.status, errorText);
-    throw new Error(`Failed to update app: ${response.status}`);
-  }
-}
-
-/**
- * Re-enable an app that the backend auto-disabled after webhook failures.
- *
- * Sends `disabled: false` explicitly — the backend re-enable branch reads an
- * unset-exclusive payload, so omitting the field is a no-op rather than a
- * failure. The endpoint re-checks every configured URL and rejects the request
- * with a specific reason, so that detail is surfaced instead of the status code.
- */
-export async function reEnableApp(appId: string): Promise<void> {
-  const token = await getIdToken();
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-
-  const formData = new FormData();
-  formData.append('app_data', JSON.stringify({ id: appId, disabled: false }));
-
-  const response = await fetch(`${API_BASE_URL}/v1/apps/${appId}`, {
-    method: 'PATCH',
-    headers: { Authorization: `Bearer ${token}` },
-    body: formData,
-  });
-
-  if (!response.ok) {
-    const detail = await response
-      .json()
-      .then((body) => body?.detail)
-      .catch(() => null);
-    throw new Error(detail || `Failed to re-enable app: ${response.status}`);
-  }
-}
-
-/**
- * Delete an app
- */
-export async function deleteApp(appId: string): Promise<void> {
-  await fetchWithAuth(`/v1/apps/${appId}`, {
-    method: 'DELETE',
-  });
-}
-
-/**
- * Upload app thumbnail
- */
-export async function uploadAppThumbnail(file: File): Promise<ThumbnailUploadResponse> {
-  let token: string | null = null;
-
-  try {
-    token = await getIdToken();
-  } catch (tokenError) {
-    console.error('Failed to get auth token:', tokenError);
-    throw new Error('Failed to get authentication token');
-  }
-
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-
-  const url = `${API_BASE_URL}/v1/app/thumbnails`;
-
-  const formData = new FormData();
-  formData.append('file', file, file.name);
-
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
-    body: formData,
-  });
-
-  if (!response.ok) {
-    const errorText = await response.text().catch(() => 'No error body');
-    console.error('Upload thumbnail error:', response.status, errorText);
-    throw new Error(`Failed to upload thumbnail: ${response.status}`);
-  }
-
-  return response.json();
-}
-
-/**
- * Generate app description using AI
- */
-export async function generateAppDescription(
-  name: string,
-  currentDescription: string,
-): Promise<string> {
-  const response = await fetchWithAuth<GenerateDescriptionResponse>(
-    '/v1/app/generate-description',
-    {
-      method: 'POST',
-      body: JSON.stringify({ name, description: currentDescription }),
-    },
-  );
-  return response.description;
-}
-
-/**
- * Generate app description and emoji using AI
- * Used for quick template creation (matches mobile app behavior)
- */
-export async function generateAppDescriptionAndEmoji(
-  name: string,
-  prompt: string,
-): Promise<{ description: string; emoji: string }> {
-  try {
-    const response = await fetchWithAuth<{
-      description: string;
-      emoji: string;
-    }>('/v1/app/generate-description-emoji', {
-      method: 'POST',
-      body: JSON.stringify({ name, prompt }),
-    });
-    return {
-      description: response.description || '',
-      emoji: response.emoji || '✨',
-    };
-  } catch {
-    // Fallback: generate description only and use default emoji
-    const description = await generateAppDescription(name, prompt);
-    return { description, emoji: '✨' };
-  }
-}
-
-/**
- * Get proactive notification scopes
- * Note: This endpoint may not exist in all API versions, returns empty array on 404
- */
-export async function getNotificationScopes(): Promise<NotificationScope[]> {
-  try {
-    const token = await getIdToken();
-    if (!token) return [];
-
-    const response = await fetch(
-      `${API_BASE_URL}/v1/apps/proactive-notification-scopes`,
-      {
-        headers: {
-          Authorization: `Bearer ${token}`,
-          'Content-Type': 'application/json',
-          'X-App-Platform': 'web',
-        },
-      },
-    );
-
-    if (!response.ok) return [];
-    return response.json();
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Get available payment plans
- * Note: This endpoint may not exist in all API versions, returns empty array on 404
- */
-export async function getPaymentPlans(): Promise<PaymentPlan[]> {
-  try {
-    const token = await getIdToken();
-    if (!token) return [];
-
-    const response = await fetch(`${API_BASE_URL}/v1/app/plans`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-        'Content-Type': 'application/json',
-        'X-App-Platform': 'web',
-      },
-    });
-
-    if (!response.ok) return [];
-    return response.json();
-  } catch {
-    return [];
-  }
-}
-
-// ============================================================================
-// User Settings API
-// ============================================================================
-
-import type {
-  DailySummarySettings,
-  TranscriptionPreferences,
-  DeveloperWebhooks,
-  WebhookSettings,
-  RecordingPermission,
-  UserUsage,
-  UserUsageResponse,
-  UsageStats,
-  AllUsageData,
-  UserSubscription,
-  UserSubscriptionResponse,
-  Person,
-} from '@/types/user';
-import { decodePlan, planGrantsPaidCapability } from '@/types/user';
-
-/**
- * Get user's primary language
- */
-export async function getUserLanguage(): Promise<string> {
-  const response = await fetchWithAuth<{ language: string }>('/v1/users/language');
-  return response.language;
-}
-
-/**
- * Set user's primary language
- */
-export async function setUserLanguage(language: string): Promise<void> {
-  await fetchWithAuth('/v1/users/language', {
-    method: 'PATCH',
-    body: JSON.stringify({ language }),
-  });
-}
-
-/**
- * Get daily summary settings
- */
-export async function getDailySummarySettings(): Promise<DailySummarySettings> {
-  return fetchWithAuth<DailySummarySettings>('/v1/users/daily-summary-settings');
-}
-
-/**
- * Update daily summary settings
- */
-export async function updateDailySummarySettings(
-  settings: DailySummarySettings,
-): Promise<void> {
-  await fetchWithAuth('/v1/users/daily-summary-settings', {
-    method: 'PATCH',
-    body: JSON.stringify(settings),
-  });
-}
-
-// ============================================================================
-// Daily Summaries (Recaps) API
-// ============================================================================
-
-import type { DailySummary } from '@/types/recap';
-
-export interface GetDailySummariesParams {
-  limit?: number;
-  offset?: number;
-}
-
-/**
- * Get list of daily summaries with pagination
- */
-export async function getDailySummaries(
-  params: GetDailySummariesParams = {},
-): Promise<DailySummary[]> {
-  const { limit = 30, offset = 0 } = params;
-  const queryParams = new URLSearchParams({
-    limit: limit.toString(),
-    offset: offset.toString(),
-  });
-  return fetchWithAuth<DailySummary[]>(`/v1/users/daily-summaries?${queryParams}`);
-}
-
-/**
- * Get a single daily summary by ID
- */
-export async function getDailySummary(id: string): Promise<DailySummary> {
-  return fetchWithAuth<DailySummary>(`/v1/users/daily-summaries/${id}`);
-}
-
-/**
- * Delete a daily summary
- */
-export async function deleteDailySummary(id: string): Promise<void> {
-  await fetchWithAuth(`/v1/users/daily-summaries/${id}`, {
-    method: 'DELETE',
-  });
-}
-
-/**
- * Generate a test daily summary for a specific date
- */
-export async function generateTestDailySummary(date: string): Promise<DailySummary> {
-  return fetchWithAuth<DailySummary>('/v1/users/daily-summary-settings/test', {
-    method: 'POST',
-    body: JSON.stringify({ date }),
-  });
-}
-
-/**
- * Get transcription preferences
- */
-export async function getTranscriptionPreferences(): Promise<TranscriptionPreferences> {
-  return fetchWithAuth<TranscriptionPreferences>('/v1/users/transcription-preferences');
-}
-
-// Webhook type enum matching backend API
-type WebhookType =
-  'memory_created' | 'realtime_transcript' | 'audio_bytes' | 'day_summary';
-
-/**
- * Get developer webhook URL
- */
-export async function getDeveloperWebhook(type: WebhookType): Promise<WebhookSettings> {
-  return fetchWithAuth<WebhookSettings>(`/v1/users/developer/webhook/${type}`);
-}
-
-/**
- * Set developer webhook URL
- */
-export async function setDeveloperWebhook(type: WebhookType, url: string): Promise<void> {
-  await fetchWithAuth(`/v1/users/developer/webhook/${type}`, {
-    method: 'POST',
-    body: JSON.stringify({ url }),
-  });
-}
-
-/**
- * Enable developer webhook
- */
-export async function enableDeveloperWebhook(type: WebhookType): Promise<void> {
-  await fetchWithAuth(`/v1/users/developer/webhook/${type}/enable`, {
-    method: 'POST',
-  });
-}
-
-/**
- * Disable developer webhook
- */
-export async function disableDeveloperWebhook(type: WebhookType): Promise<void> {
-  await fetchWithAuth(`/v1/users/developer/webhook/${type}/disable`, {
-    method: 'POST',
-  });
-}
-
-/**
- * Get all webhook statuses
- */
-export async function getDeveloperWebhooksStatus(): Promise<DeveloperWebhooks> {
-  return fetchWithAuth<DeveloperWebhooks>('/v1/users/developer/webhooks/status');
-}
-
-/**
- * Get store recording permission
- */
-export async function getRecordingPermission(): Promise<RecordingPermission> {
-  return fetchWithAuth<RecordingPermission>('/v1/users/store-recording-permission');
-}
-
-/**
- * Set store recording permission
- */
-export async function setRecordingPermission(enabled: boolean): Promise<void> {
-  await fetchWithAuth(`/v1/users/store-recording-permission?value=${enabled}`, {
-    method: 'POST',
-  });
-}
-
-/**
- * Get user usage stats for a specific period
- */
-export async function getUserUsage(
-  period: 'today' | 'monthly' | 'yearly' | 'all_time' = 'monthly',
-): Promise<UserUsage | null> {
-  try {
-    const response = await fetchWithAuth<UserUsageResponse>(
-      `/v1/users/me/usage?period=${period}`,
-    );
-
-    // Extract the relevant period's stats
-    let stats: UsageStats | undefined;
-    if (period === 'all_time') {
-      stats = response.all_time;
-    } else if (period === 'yearly') {
-      stats = response.yearly;
-    } else if (period === 'monthly') {
-      stats = response.monthly;
-    } else if (period === 'today') {
-      stats = response.today;
-    }
-
-    // Fallback to any available stats
-    if (!stats) {
-      stats = response.all_time || response.monthly || response.yearly || response.today;
-    }
-
-    // Return data if we have stats OR history - some periods might have history without aggregate stats
-    if (stats || response.history?.length) {
-      return {
-        transcription_seconds: stats?.transcription_seconds || 0,
-        words_transcribed: stats?.words_transcribed || 0,
-        insights_gained: stats?.insights_gained || 0,
-        memories_created: stats?.memories_created || 0,
-        history: response.history,
-      };
-    }
-    return null;
-  } catch (error) {
-    console.error('getUserUsage error:', error);
-    return null;
-  }
-}
-
-/**
- * Get all usage data for all periods (for tabs display)
- */
-export async function getAllUsageData(): Promise<AllUsageData> {
-  const [today, monthly, yearly, all_time] = await Promise.all([
-    getUserUsage('today'),
-    getUserUsage('monthly'),
-    getUserUsage('yearly'),
-    getUserUsage('all_time'),
-  ]);
-  return { today, monthly, yearly, all_time };
-}
-
-/**
- * Get user subscription info
- */
-export async function getUserSubscription(): Promise<UserSubscription | null> {
-  try {
-    const response = await fetchWithAuth<UserSubscriptionResponse>(
-      '/v1/users/me/subscription',
-    );
-
-    const plan = decodePlan(response.subscription?.plan);
-    const result: UserSubscription = {
-      plan: plan.raw ?? '',
-      plan_identity: plan,
-      status: response.subscription?.status || 'active',
-      // Unknown plans are deliberately excluded. A future wire value must not
-      // inherit paid capability merely because it is non-empty.
-      is_unlimited: planGrantsPaidCapability(plan),
-      current_period_end: response.subscription?.current_period_end,
-      stripe_subscription_id: response.subscription?.stripe_subscription_id,
-      cancel_at_period_end: response.subscription?.cancel_at_period_end,
-      current_price_id: response.subscription?.current_price_id,
-      features: response.subscription?.features || [],
-    };
-    return result;
-  } catch (error) {
-    console.error('getUserSubscription error:', error);
-    return null;
-  }
-}
-
-/**
- * Get available subscription plans
- */
-export async function getAvailablePlans(): Promise<AvailablePlansResponse | null> {
-  try {
-    const response = await fetchWithAuth<AvailablePlansResponse>(
-      '/v1/payments/available-plans',
-    );
-    return response;
-  } catch (error) {
-    console.error('getAvailablePlans error:', error);
-    return null;
-  }
-}
-
-/**
- * Create a checkout session for subscription
- */
-export async function createCheckoutSession(
-  priceId: string,
-): Promise<CheckoutSessionResponse | null> {
-  try {
-    const response = await fetchWithAuth<CheckoutSessionResponse>(
-      '/v1/payments/checkout-session',
-      {
-        method: 'POST',
-        body: JSON.stringify({ price_id: priceId }),
-      },
-    );
-    return response;
-  } catch (error) {
-    console.error('createCheckoutSession error:', error);
-    return null;
-  }
-}
-
-/**
- * Upgrade subscription to a different plan
- */
-export async function upgradeSubscription(
-  priceId: string,
-): Promise<UpgradeSubscriptionResponse | null> {
-  try {
-    const response = await fetchWithAuth<UpgradeSubscriptionResponse>(
-      '/v1/payments/upgrade-subscription',
-      {
-        method: 'POST',
-        body: JSON.stringify({ price_id: priceId }),
-      },
-    );
-    return response;
-  } catch (error) {
-    console.error('upgradeSubscription error:', error);
-    return null;
-  }
-}
-
-/**
- * Cancel subscription
- */
-export async function cancelSubscription(): Promise<CancelSubscriptionResponse | null> {
-  try {
-    const response = await fetchWithAuth<CancelSubscriptionResponse>(
-      '/v1/payments/subscription',
-      {
-        method: 'DELETE',
-      },
-    );
-    return response;
-  } catch (error) {
-    console.error('cancelSubscription error:', error);
-    return null;
-  }
-}
-
-/**
- * Get customer portal URL for managing payment methods
- */
-export async function getCustomerPortal(): Promise<CustomerPortalResponse | null> {
-  try {
-    const response = await fetchWithAuth<CustomerPortalResponse>(
-      '/v1/payments/customer-portal',
-      {
-        method: 'POST',
-      },
-    );
-    return response;
-  } catch (error) {
-    console.error('getCustomerPortal error:', error);
-    return null;
-  }
-}
-
-/**
- * Get all people for speaker identification
- */
-export async function getPeople(): Promise<Person[]> {
-  return fetchWithAuth<Person[]>('/v1/users/people');
-}
-
-/**
- * Create a new person
- */
-export async function createPerson(name: string): Promise<Person> {
-  return fetchWithAuth<Person>('/v1/users/people', {
-    method: 'POST',
-    body: JSON.stringify({ name }),
-  });
-}
-
-/**
- * Update person name
- */
-export async function updatePersonName(personId: string, name: string): Promise<void> {
-  await fetchWithAuth(`/v1/users/people/${personId}/name`, {
-    method: 'PATCH',
-    body: JSON.stringify({ name }),
-  });
-}
-
-/**
- * Delete a person
- */
-export async function deletePerson(personId: string): Promise<void> {
-  await fetchWithAuth(`/v1/users/people/${personId}`, {
-    method: 'DELETE',
-  });
-}
-
-/**
- * Bulk assign speaker to transcript segments
- * @param conversationId - The conversation ID
- * @param segmentIds - Array of segment IDs to assign
- * @param isUser - If true, marks segments as user's speech
- * @param personId - Person ID to assign (null to unassign)
- */
-export async function assignBulkTranscriptSegments(
-  conversationId: string,
-  segmentIds: string[],
-  options: { isUser?: boolean; personId?: string | null },
-): Promise<void> {
-  const { isUser, personId } = options;
-
-  let assignType: 'is_user' | 'person_id';
-  let value: string | null;
-
-  if (isUser) {
-    assignType = 'is_user';
-    value = 'true';
-  } else {
-    assignType = 'person_id';
-    value = personId ?? null;
-  }
-
-  await fetchWithAuth(`/v1/conversations/${conversationId}/segments/assign-bulk`, {
-    method: 'PATCH',
-    body: JSON.stringify({
-      segment_ids: segmentIds,
-      assign_type: assignType,
-      value,
-    }),
-  });
-}
-
-/**
- * Error thrown when editing a transcript segment requires a paid plan
- * (backend returns HTTP 402 for `/segments/text` on gated accounts).
- */
-export class SegmentEditPlanRequiredError extends Error {
-  constructor(message = 'Editing the transcript requires the Unlimited plan.') {
-    super(message);
-    this.name = 'SegmentEditPlanRequiredError';
-  }
-}
-
-/**
- * Update the text of a single transcript segment.
- *
- * Mirrors the backend `PATCH /v1/conversations/{id}/segments/text`
- * (`UpdateSegmentTextRequest`), which identifies the segment by its `id` and
- * rewrites just that segment's text. The response is a bare `{status}`, so
- * callers must optimistically patch their local `transcript_segments`.
- *
- * @param conversationId - The conversation ID
- * @param segmentId - The `id` of the segment to edit (non-empty)
- * @param text - New segment text (1–10000 chars, enforced by the backend)
- * @throws SegmentEditPlanRequiredError when the account is plan-gated (402)
- */
-export async function updateSegmentText(
-  conversationId: string,
-  segmentId: string,
-  text: string,
-): Promise<void> {
-  try {
-    await fetchWithAuth(`/v1/conversations/${conversationId}/segments/text`, {
-      method: 'PATCH',
-      body: JSON.stringify({ segment_id: segmentId, text }),
-    });
-  } catch (error) {
-    // fetchWithAuth surfaces the status in the thrown message (`API error: 402 ...`).
-    if (error instanceof Error && error.message.includes('402')) {
-      throw new SegmentEditPlanRequiredError();
-    }
-    throw error;
-  }
-}
-
-/**
- * Delete account permanently
- */
-export async function deleteAccount(): Promise<void> {
-  await fetchWithAuth('/v1/users/delete-account', {
-    method: 'DELETE',
-  });
-}
-
-/**
- * Get training data opt-in status
- */
-export async function getTrainingDataOptIn(): Promise<{ opted_in: boolean }> {
-  return fetchWithAuth<{ opted_in: boolean }>('/v1/users/training-data-opt-in');
-}
-
-/**
- * Set training data opt-in
- */
-export async function setTrainingDataOptIn(optIn: boolean): Promise<void> {
-  await fetchWithAuth('/v1/users/training-data-opt-in', {
-    method: 'POST',
-    body: JSON.stringify({ opted_in: optIn }),
-  });
-}
-
-// ============================================================================
-// Developer API Keys
-// ============================================================================
-
-import type {
-  DeveloperApiKey,
-  CustomVocabulary,
-  Integration,
-  McpApiKey,
-  AvailablePlansResponse,
-  CheckoutSessionResponse,
-  UpgradeSubscriptionResponse,
-  CancelSubscriptionResponse,
-  CustomerPortalResponse,
-} from '@/types/user';
-
-/**
- * Get user's developer API keys
- */
-export async function getDeveloperApiKeys(): Promise<DeveloperApiKey[]> {
-  try {
-    return await fetchWithAuth<DeveloperApiKey[]>('/v1/dev/keys');
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Create a new developer API key with optional scopes
- */
-export async function createDeveloperApiKey(
-  name: string,
-  scopes?: string[],
-): Promise<DeveloperApiKey> {
-  const body: { name: string; scopes?: string[] } = { name };
-  if (scopes && scopes.length > 0) {
-    body.scopes = scopes;
-  }
-  return fetchWithAuth<DeveloperApiKey>('/v1/dev/keys', {
-    method: 'POST',
-    body: JSON.stringify(body),
-  });
-}
-
-/**
- * Delete a developer API key
- */
-export async function deleteDeveloperApiKey(keyId: string): Promise<void> {
-  await fetchWithAuth(`/v1/dev/keys/${keyId}`, {
-    method: 'DELETE',
-  });
-}
-
-// ============================================================================
-// MCP API Keys
-// ============================================================================
-
-/**
- * Get user's MCP API keys
- */
-export async function getMcpApiKeys(): Promise<McpApiKey[]> {
-  try {
-    return await fetchWithAuth<McpApiKey[]>('/v1/mcp/keys');
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Create a new MCP API key
- */
-export async function createMcpApiKey(name: string): Promise<McpApiKey> {
-  return fetchWithAuth<McpApiKey>('/v1/mcp/keys', {
-    method: 'POST',
-    body: JSON.stringify({ name }),
-  });
-}
-
-/**
- * Delete an MCP API key
- */
-export async function deleteMcpApiKey(keyId: string): Promise<void> {
-  await fetchWithAuth(`/v1/mcp/keys/${keyId}`, {
-    method: 'DELETE',
-  });
-}
-
-// ============================================================================
-// Data Export & Knowledge Graph
-// ============================================================================
-
-/**
- * Export all user data as a downloadable JSON blob (streamed from backend).
- */
-export async function exportAllData(): Promise<Blob> {
-  const token = await getIdToken();
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-  const response = await fetch(`${API_BASE_URL}/v1/users/export`, {
-    headers: { Authorization: `Bearer ${token}` },
-  });
-  if (!response.ok) {
-    throw new Error(`Export failed: ${response.status} ${response.statusText}`);
-  }
-  return response.blob();
-}
-
-/**
- * Delete the knowledge graph
- */
-export async function deleteKnowledgeGraph(): Promise<void> {
-  await fetchWithAuth('/v1/knowledge-graph', {
-    method: 'DELETE',
-  });
-}
-
-// ============================================================================
-// Custom Vocabulary (via Transcription Preferences)
-// ============================================================================
-
-/**
- * Get custom vocabulary words from transcription preferences
- */
-export async function getCustomVocabulary(): Promise<string[]> {
-  try {
-    const result = await fetchWithAuth<TranscriptionPreferences>(
-      '/v1/users/transcription-preferences',
-    );
-    return result.vocabulary || [];
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Update custom vocabulary words via transcription preferences
- */
-export async function updateCustomVocabulary(words: string[]): Promise<void> {
-  await fetchWithAuth('/v1/users/transcription-preferences', {
-    method: 'PATCH',
-    body: JSON.stringify({ vocabulary: words }),
-  });
-}
-
-// ============================================================================
-// Integrations
-// ============================================================================
-
-// Integration definitions with logo paths
-const INTEGRATION_DEFINITIONS: Array<{
-  id: string;
-  appKey: string;
-  name: string;
-  description: string;
-  logo: string;
-  coming_soon?: boolean;
-}> = [
-  {
-    id: 'google_calendar',
-    appKey: 'google_calendar',
-    name: 'Google Calendar',
-    description: 'Sync with your calendar',
-    logo: '/integrations/google-calendar.png',
-  },
-  {
-    id: 'whoop',
-    appKey: 'whoop',
-    name: 'Whoop',
-    description: 'Health & fitness tracking',
-    logo: '/integrations/whoop.png',
-  },
-  {
-    id: 'notion',
-    appKey: 'notion',
-    name: 'Notion',
-    description: 'Sync notes to Notion',
-    logo: '/integrations/notion-logo.png',
-  },
-  {
-    id: 'github',
-    appKey: 'github',
-    name: 'GitHub',
-    description: 'Create issues and notes',
-    logo: '/integrations/github-logo.png',
-  },
-  {
-    id: 'twitter',
-    appKey: 'twitter',
-    name: 'X (Twitter)',
-    description: 'Share to Twitter',
-    logo: '/integrations/x-logo.avif',
-  },
-  {
-    id: 'gmail',
-    appKey: 'gmail',
-    name: 'Gmail',
-    description: 'Email integrations',
-    logo: '/integrations/gmail-logo.jpeg',
-  },
-];
-
-/**
- * Get individual integration connection status (like mobile app)
- */
-async function getIntegrationStatus(appKey: string): Promise<{ connected: boolean }> {
-  try {
-    const response = await fetchWithAuth<{
-      connected: boolean;
-      app_key: string;
-    }>(`/v1/integrations/${appKey}`);
-    return { connected: response.connected ?? false };
-  } catch {
-    return { connected: false };
-  }
-}
-
-/**
- * Get available integrations with connection status
- * Fetches individual integration statuses like the mobile app does
- */
-export async function getIntegrations(): Promise<Integration[]> {
-  // Fetch all integration statuses in parallel
-  const statusPromises = INTEGRATION_DEFINITIONS.map(async (def) => {
-    const status = await getIntegrationStatus(def.appKey);
-    return {
-      id: def.id,
-      name: def.name,
-      description: def.description,
-      icon: def.logo,
-      connected: status.connected,
-      coming_soon: def.coming_soon,
-    };
-  });
-
-  return Promise.all(statusPromises);
-}
-
-/**
- * Get OAuth URL for an integration
- * Opens the OAuth flow for the user to authorize
- */
-export async function getIntegrationOAuthUrl(
-  integrationId: string,
-): Promise<string | null> {
-  try {
-    const response = await fetchWithAuth<{ auth_url: string }>(
-      `/v1/integrations/${integrationId}/oauth-url`,
-    );
-    return response.auth_url || null;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Disconnect an integration
- */
-export async function disconnectIntegration(integrationId: string): Promise<void> {
-  await fetchWithAuth(`/v1/integrations/${integrationId}`, {
-    method: 'DELETE',
-  });
-}
-
-// ============================================================================
-// Conversation Reprocessing API
-// ============================================================================
-
-/**
- * Reprocess a conversation with an optional specific app
- * @param conversationId - The ID of the conversation to reprocess
- * @param appId - Optional app ID to use for processing (if provided, only this app will be triggered)
- * @returns The updated conversation after reprocessing
- */
-export async function reprocessConversation(
-  conversationId: string,
-  appId?: string,
-): Promise<Conversation> {
-  const queryParams = new URLSearchParams();
-  if (appId) {
-    queryParams.set('app_id', appId);
-  }
-
-  const endpoint = `/v1/conversations/${conversationId}/reprocess${queryParams.toString() ? `?${queryParams}` : ''}`;
-  return fetchWithAuth<Conversation>(endpoint, {
-    method: 'POST',
-  });
-}
-
-/**
- * Update a conversation's title
- * @param conversationId - The ID of the conversation
- * @param title - The new title
- */
-export async function updateConversationTitle(
-  conversationId: string,
-  title: string,
-): Promise<void> {
-  await fetchWithAuth(
-    `/v1/conversations/${conversationId}/title?title=${encodeURIComponent(title)}`,
-    {
-      method: 'PATCH',
-    },
-  );
-}
-
-/**
- * Test a custom prompt against a conversation
- * @param conversationId - The ID of the conversation
- * @param prompt - The custom prompt to test
- * @returns The generated summary
- */
-export async function testConversationPrompt(
-  conversationId: string,
-  prompt: string,
-): Promise<string> {
-  const response = await fetchWithAuth<{ summary: string }>(
-    `/v1/conversations/${conversationId}/test-prompt`,
-    {
-      method: 'POST',
-      body: JSON.stringify({ prompt }),
-    },
-  );
-  return response.summary;
-}
-
-// =============================================================================
-// Audio API
-// =============================================================================
-
-/**
- * Get the streaming URL for an audio file
- * @param conversationId - The conversation ID
- * @param audioFileId - The audio file ID
- * @param format - Audio format (default: wav)
- */
-export function getAudioStreamUrl(
-  conversationId: string,
-  audioFileId: string,
-  format: string = 'wav',
-): string {
-  return `${API_BASE_URL}/v1/sync/audio/${conversationId}/${audioFileId}?format=${format}`;
-}
-
-/**
- * Get signed URLs for conversation audio files
- * Returns direct GCS URLs for cached files or status for pending files
- * @param conversationId - The conversation ID
- */
-export async function getConversationAudioUrls(
-  conversationId: string,
-  signal?: AbortSignal,
-): Promise<AudioFileUrlInfo[]> {
-  try {
-    const response = await fetchWithAuth<{ audio_files: AudioFileUrlInfo[] }>(
-      `/v1/sync/audio/${conversationId}/urls`,
-      { signal },
-    );
-    return response.audio_files || [];
-  } catch (error) {
-    if (error instanceof Error && error.name === 'AbortError') {
-      return []; // Silently return empty for aborted requests
-    }
-    console.error('Error fetching audio URLs:', error);
-    return [];
-  }
-}
-
-/**
- * Get signed URLs plus the server's poll hint (poll_after_ms) while
- * playback artifacts are still being built.
- * @param conversationId - The conversation ID
- */
-export async function getConversationAudioUrlsWithPoll(
-  conversationId: string,
-  signal?: AbortSignal,
-): Promise<{ files: AudioFileUrlInfo[]; pollAfterMs: number | null }> {
-  try {
-    const response = await fetchWithAuth<{
-      audio_files: AudioFileUrlInfo[];
-      poll_after_ms?: number | null;
-    }>(`/v1/sync/audio/${conversationId}/urls`, { signal });
-    return {
-      files: response.audio_files || [],
-      pollAfterMs: response.poll_after_ms ?? null,
-    };
-  } catch (error) {
-    if (error instanceof Error && error.name === 'AbortError') {
-      return { files: [], pollAfterMs: null };
-    }
-    console.error('Error fetching audio URLs:', error);
-    return { files: [], pollAfterMs: null };
-  }
-}
-
-/**
- * Pre-cache audio files for a conversation
- * Triggers background caching of audio files for faster playback
- * @param conversationId - The conversation ID
- */
-export async function precacheConversationAudio(
-  conversationId: string,
-  signal?: AbortSignal,
-): Promise<void> {
-  try {
-    await fetchWithAuth(`/v1/sync/audio/${conversationId}/precache`, {
-      method: 'POST',
-      signal,
-    });
-  } catch (error) {
-    if (error instanceof Error && error.name === 'AbortError') {
-      return; // Silently return for aborted requests
-    }
-    console.error('Error pre-caching audio:', error);
-  }
-}
-
-/**
- * Get auth headers for audio streaming
- * Used when streaming audio directly from API (fallback when signed URLs unavailable)
- */
-export async function getAudioAuthHeaders(): Promise<Record<string, string>> {
-  const token = await getIdToken();
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-  return {
-    Authorization: `Bearer ${token}`,
-  };
-}
-
-/**
- * Fetch audio file and return a Blob URL for playback
- * This works around the HTML <audio> element's inability to send custom headers
- * @param conversationId - The conversation ID
- * @param audioFileId - The audio file ID
- * @returns Blob URL that can be used as audio src
- */
-export async function fetchAudioBlob(
-  conversationId: string,
-  audioFileId: string,
-): Promise<string> {
-  const headers = await getAudioAuthHeaders();
-  const url = getAudioStreamUrl(conversationId, audioFileId);
-
-  const response = await fetch(url, { headers });
-  if (!response.ok) {
-    throw new Error(`Failed to fetch audio: ${response.status} ${response.statusText}`);
-  }
-
-  const blob = await response.blob();
-  return URL.createObjectURL(blob);
-}
-
-// ============================================================================
-// Folders API
-// ============================================================================
-
-import type {
-  Folder,
-  CreateFolderRequest,
-  UpdateFolderRequest,
-  BulkMoveConversationsRequest,
-} from '@/types/folder';
-
-/**
- * Map backend folder to frontend format (icon -> emoji)
- */
-function mapFolderResponse(folder: Folder): Folder {
-  return {
-    ...folder,
-    emoji: folder.icon || folder.emoji, // Map icon to emoji for display
-  };
-}
-
-/**
- * Get all folders for the current user
- */
-export async function getFolders(): Promise<Folder[]> {
-  try {
-    const folders = await fetchWithAuth<Folder[]>('/v1/folders');
-    return folders.map(mapFolderResponse);
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Create a new folder
- */
-export async function createFolder(data: CreateFolderRequest): Promise<Folder> {
-  const folder = await fetchWithAuth<Folder>('/v1/folders', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  });
-  invalidateCache(invalidationPatterns.folders);
-  return mapFolderResponse(folder);
-}
-
-/**
- * Update an existing folder
- */
-export async function updateFolder(
-  folderId: string,
-  data: UpdateFolderRequest,
-): Promise<Folder> {
-  const folder = await fetchWithAuth<Folder>(`/v1/folders/${folderId}`, {
-    method: 'PATCH',
-    body: JSON.stringify(data),
-  });
-  invalidateCache(invalidationPatterns.folders);
-  return mapFolderResponse(folder);
-}
-
-/**
- * Delete a folder
- * Conversations in the folder are moved back to "All"
- */
-export async function deleteFolder(folderId: string): Promise<void> {
-  await fetchWithAuth(`/v1/folders/${folderId}`, {
-    method: 'DELETE',
-  });
-  invalidateCache(invalidationPatterns.folders);
-  invalidateCache(invalidationPatterns.conversations); // Conversations move back to "All"
-}
-
-/**
- * Bulk move multiple conversations to a folder
- * @param folderId - The target folder ID
- * @param conversationIds - Array of conversation IDs to move
- */
-export async function bulkMoveConversationsToFolder(
-  folderId: string,
-  conversationIds: string[],
-): Promise<void> {
-  await fetchWithAuth(`/v1/folders/${folderId}/conversations/bulk-move`, {
-    method: 'POST',
-    body: JSON.stringify({ conversation_ids: conversationIds }),
-  });
-}
-
-// ============================================================================
-// FCM Token Registration API
-// ============================================================================
-
-/**
- * Register FCM token for push notifications
- * This is the same endpoint used by the mobile app
- * @param fcmToken - The FCM registration token
- */
-export async function registerFCMToken(fcmToken: string): Promise<void> {
-  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const deviceIdHash = await getWebDeviceIdHash();
-  if (!deviceIdHash) return;
-
-  await fetchWithAuth('/v1/users/fcm-token', {
-    method: 'POST',
-    headers: {
-      'X-App-Platform': 'web',
-      'X-Device-Id-Hash': deviceIdHash,
-    },
-    body: JSON.stringify({
-      fcm_token: fcmToken,
-      time_zone: timeZone,
-    }),
-  });
-}
-
-/**
- * Unregister FCM token (called on sign out)
- * @param fcmToken - The FCM registration token to remove
- */
-export async function unregisterFCMToken(fcmToken: string): Promise<void> {
-  try {
-    const deviceIdHash = await getWebDeviceIdHash();
-    if (!deviceIdHash) return;
-
-    await fetchWithAuth('/v1/users/fcm-token', {
-      method: 'DELETE',
-      headers: {
-        'X-App-Platform': 'web',
-        'X-Device-Id-Hash': deviceIdHash,
-      },
-      body: JSON.stringify({
-        fcm_token: fcmToken,
-      }),
-    });
-  } catch (error) {
-    // Silently fail on logout - token cleanup is best-effort
-    console.warn('Failed to unregister FCM token:', error);
-  }
-}
-
-// ============================================================================
-// Fair Use Status
-// ============================================================================
-
-/**
- * Client-narrowed view of the generated `FairUseStatusResponse` (backend
- * OpenAPI authority for `/v1/fair-use/status`). The backend types `stage` as a
- * plain string; this adapter narrows it to the union the UI renders.
- */
-export type FairUseStatus = Omit<FairUseStatusResponse, 'stage'> & {
-  stage: 'none' | 'warning' | 'throttle' | 'restrict';
-};
-
-export async function getFairUseStatus(): Promise<FairUseStatus | null> {
-  try {
-    return await fetchWithAuth<FairUseStatus>('/v1/fair-use/status');
-  } catch (error) {
-    console.error('getFairUseStatus error:', error);
-    return null;
-  }
-}
diff --git a/web/app/src/lib/conversationPanelSizing.ts b/web/app/src/lib/conversationPanelSizing.ts
deleted file mode 100644
index 5e4247d8f8a..00000000000
--- a/web/app/src/lib/conversationPanelSizing.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const MIN_CONVERSATION_DETAIL_WIDTH = 360;
-export const MIN_CONVERSATION_GALLERY_WIDTH = 280;
-
-export function resizeConversationDetailPanel(
-  currentWidth: number,
-  pointerDelta: number,
-  containerWidth: number,
-): number {
-  const maximum = Math.max(
-    MIN_CONVERSATION_DETAIL_WIDTH,
-    containerWidth - MIN_CONVERSATION_GALLERY_WIDTH,
-  );
-  return Math.min(
-    maximum,
-    Math.max(MIN_CONVERSATION_DETAIL_WIDTH, currentWidth - pointerDelta),
-  );
-}
diff --git a/web/app/src/lib/geminiLive.ts b/web/app/src/lib/geminiLive.ts
index 8633aabf0db..0d5e0f65fe4 100644
--- a/web/app/src/lib/geminiLive.ts
+++ b/web/app/src/lib/geminiLive.ts
@@ -1,5 +1,5 @@
 import { createAudioCapture, type AudioCapture } from '@/lib/audioCapture';
-import type { RealtimeUsageReport } from '@/lib/api';
+import type { RealtimeUsageReport } from '@/features/chat/api';
 
 const GEMINI_LIVE_MODEL = 'models/gemini-3.1-flash-live-preview';
 const GEMINI_LIVE_ENDPOINT =
diff --git a/web/app/src/lib/recordingBroadcast.ts b/web/app/src/lib/recordingBroadcast.ts
index 4d6262bd212..cd94c107a58 100644
--- a/web/app/src/lib/recordingBroadcast.ts
+++ b/web/app/src/lib/recordingBroadcast.ts
@@ -5,14 +5,21 @@
  * control commands back to the main window.
  */
 
-import type { RecordingState, AudioMode, TranscriptSegment } from '@/components/recording/RecordingContext';
+import type { RecordingState, AudioMode, TranscriptSegment } from '@/features/recording';
 
 // Channel name for recording state sync
 const CHANNEL_NAME = 'omi-recording-channel';
 
 // Message types
 export type RecordingBroadcastMessage =
-  | { type: 'state-update'; state: RecordingState; audioMode: AudioMode; duration: number; micLevel: number; systemLevel: number }
+  | {
+      type: 'state-update';
+      state: RecordingState;
+      audioMode: AudioMode;
+      duration: number;
+      micLevel: number;
+      systemLevel: number;
+    }
   | { type: 'segments-update'; segments: TranscriptSegment[] }
   | { type: 'command'; command: 'pause' | 'resume' | 'stop' }
   | { type: 'request-state' };
@@ -37,7 +44,7 @@ export function broadcastStateUpdate(
   audioMode: AudioMode,
   duration: number,
   micLevel: number,
-  systemLevel: number
+  systemLevel: number,
 ): void {
   const message: RecordingBroadcastMessage = {
     type: 'state-update',
@@ -55,7 +62,7 @@ export function broadcastStateUpdate(
  */
 export function broadcastSegmentsUpdate(
   channel: BroadcastChannel,
-  segments: TranscriptSegment[]
+  segments: TranscriptSegment[],
 ): void {
   const message: RecordingBroadcastMessage = {
     type: 'segments-update',
@@ -69,7 +76,7 @@ export function broadcastSegmentsUpdate(
  */
 export function sendRecordingCommand(
   channel: BroadcastChannel,
-  command: 'pause' | 'resume' | 'stop'
+  command: 'pause' | 'resume' | 'stop',
 ): void {
   const message: RecordingBroadcastMessage = {
     type: 'command',
diff --git a/web/app/src/lib/taskDue.ts b/web/app/src/lib/taskDue.ts
deleted file mode 100644
index 114db457309..00000000000
--- a/web/app/src/lib/taskDue.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-export interface TaskDueStatus {
-  text: string;
-  isOverdue: boolean;
-  isToday: boolean;
-}
-
-/**
- * Whole-day difference between a due timestamp and `now`, both floored to
- * local midnight so a task due later today counts as 0 days, not -1.
- */
-export function daysUntilDue(dueAt: string, now: Date = new Date()): number {
-  const due = new Date(dueAt);
-  const today = new Date(now);
-  today.setHours(0, 0, 0, 0);
-  due.setHours(0, 0, 0, 0);
-  return Math.round((due.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-}
-
-/**
- * Format days late/until due
- */
-export function formatDueStatus(dueAt: string, now: Date = new Date()): TaskDueStatus {
-  const diffDays = daysUntilDue(dueAt, now);
-  const due = new Date(dueAt);
-
-  if (diffDays < 0) {
-    const daysLate = Math.abs(diffDays);
-    return {
-      text: daysLate === 1 ? '1 day late' : `${daysLate} days late`,
-      isOverdue: true,
-      isToday: false,
-    };
-  } else if (diffDays === 0) {
-    return { text: 'Due today', isOverdue: false, isToday: true };
-  } else if (diffDays === 1) {
-    return { text: 'Due tomorrow', isOverdue: false, isToday: false };
-  } else if (diffDays <= 7) {
-    return {
-      text: `Due ${due.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}`,
-      isOverdue: false,
-      isToday: false,
-    };
-  } else {
-    return {
-      text: `Due ${due.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`,
-      isOverdue: false,
-      isToday: false,
-    };
-  }
-}
-
-/**
- * Compact variant for dense task rows.
- */
-export function formatDueBadge(
-  dueAt: string,
-  now: Date = new Date(),
-): { text: string; isOverdue: boolean } {
-  const diffDays = daysUntilDue(dueAt, now);
-  const due = new Date(dueAt);
-
-  if (diffDays < 0) {
-    return { text: `${Math.abs(diffDays)}d late`, isOverdue: true };
-  } else if (diffDays === 0) {
-    return { text: 'Today', isOverdue: false };
-  } else if (diffDays === 1) {
-    return { text: 'Tomorrow', isOverdue: false };
-  } else if (diffDays <= 7) {
-    return {
-      text: due.toLocaleDateString('en-US', { weekday: 'short' }),
-      isOverdue: false,
-    };
-  } else {
-    return {
-      text: due.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
-      isOverdue: false,
-    };
-  }
-}
diff --git a/web/app/src/shared/api/client.ts b/web/app/src/shared/api/client.ts
new file mode 100644
index 00000000000..b42f22e7361
--- /dev/null
+++ b/web/app/src/shared/api/client.ts
@@ -0,0 +1,99 @@
+import { getIdToken } from '@/lib/firebase';
+import { getWebDeviceIdHash } from '@/lib/clientDevice';
+
+/** Browser → `/api/proxy` → api.omi.me, so CORS never hits the origin. */
+export const API_BASE_URL = '/api/proxy';
+
+/**
+ * Authenticated JSON (or empty) request against the API proxy.
+ *
+ * FormData must keep its own Content-Type so fetch can set the multipart
+ * boundary; forcing application/json here produces a body the server cannot
+ * parse.
+ */
+export async function fetchWithAuth<T>(
+  endpoint: string,
+  options: RequestInit = {},
+): Promise<T> {
+  let token: string | null = null;
+
+  try {
+    token = await getIdToken();
+  } catch (tokenError) {
+    console.error('Failed to get auth token:', tokenError);
+    throw new Error('Failed to get authentication token');
+  }
+
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+
+  const url = `${API_BASE_URL}${endpoint}`;
+  const deviceIdHash = await getWebDeviceIdHash();
+  const headers = new Headers({ Authorization: `Bearer ${token}` });
+  if (!(options.body instanceof FormData)) {
+    headers.set('Content-Type', 'application/json');
+  }
+  new Headers(options.headers).forEach((value, name) => headers.set(name, value));
+  headers.set('X-App-Platform', 'web');
+  if (deviceIdHash) {
+    headers.set('X-Device-Id-Hash', deviceIdHash);
+  }
+
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers,
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => 'No error body');
+      if (response.status !== 404) {
+        console.error('API error response:', response.status, errorText);
+      }
+
+      if (response.status === 401) {
+        throw new Error('Unauthorized - please sign in again');
+      }
+      throw new Error(`API error: ${response.status} ${response.statusText}`);
+    }
+
+    if (response.status === 204) {
+      return undefined as T;
+    }
+
+    return response.json();
+  } catch (fetchError) {
+    if (fetchError instanceof TypeError && fetchError.message === 'Failed to fetch') {
+      console.error('Network error - possible CORS issue or API unavailable');
+      throw new Error(
+        'Network error: Unable to reach the API. Please check your connection.',
+      );
+    }
+    throw fetchError;
+  }
+}
+
+export async function fetchAuthorizedBlob(endpoint: string): Promise<Blob> {
+  const token = await getIdToken();
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!response.ok) {
+    throw new Error(`Export failed: ${response.status} ${response.statusText}`);
+  }
+  return response.blob();
+}
+
+export async function getAudioAuthHeaders(): Promise<Record<string, string>> {
+  const token = await getIdToken();
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+  return {
+    Authorization: `Bearer ${token}`,
+  };
+}
diff --git a/web/app/src/components/ui/BetaWelcomeModal.tsx b/web/app/src/shared/ui/BetaWelcomeModal.tsx
similarity index 100%
rename from web/app/src/components/ui/BetaWelcomeModal.tsx
rename to web/app/src/shared/ui/BetaWelcomeModal.tsx
diff --git a/web/app/src/components/ui/ConfettiBurst.tsx b/web/app/src/shared/ui/ConfettiBurst.tsx
similarity index 100%
rename from web/app/src/components/ui/ConfettiBurst.tsx
rename to web/app/src/shared/ui/ConfettiBurst.tsx
diff --git a/web/app/src/components/ui/ConfirmDialog.tsx b/web/app/src/shared/ui/ConfirmDialog.tsx
similarity index 100%
rename from web/app/src/components/ui/ConfirmDialog.tsx
rename to web/app/src/shared/ui/ConfirmDialog.tsx
diff --git a/web/app/src/components/ui/OmiPulseMark.tsx b/web/app/src/shared/ui/OmiPulseMark.tsx
similarity index 100%
rename from web/app/src/components/ui/OmiPulseMark.tsx
rename to web/app/src/shared/ui/OmiPulseMark.tsx
diff --git a/web/app/src/components/ui/ResizeHandle.tsx b/web/app/src/shared/ui/ResizeHandle.tsx
similarity index 100%
rename from web/app/src/components/ui/ResizeHandle.tsx
rename to web/app/src/shared/ui/ResizeHandle.tsx
diff --git a/web/app/src/components/ui/SingleLocationMap.tsx b/web/app/src/shared/ui/SingleLocationMap.tsx
similarity index 100%
rename from web/app/src/components/ui/SingleLocationMap.tsx
rename to web/app/src/shared/ui/SingleLocationMap.tsx
diff --git a/web/app/src/components/ui/StartupModals.tsx b/web/app/src/shared/ui/StartupModals.tsx
similarity index 94%
rename from web/app/src/components/ui/StartupModals.tsx
rename to web/app/src/shared/ui/StartupModals.tsx
index 030079cc610..5516698d30e 100644
--- a/web/app/src/components/ui/StartupModals.tsx
+++ b/web/app/src/shared/ui/StartupModals.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
-import { BetaWelcomeModal } from '@/components/ui/BetaWelcomeModal';
-import { WhatsNewModal } from '@/components/ui/WhatsNewModal';
+import { BetaWelcomeModal } from '@/shared/ui/BetaWelcomeModal';
+import { WhatsNewModal } from '@/shared/ui/WhatsNewModal';
 
 // Increment this version when adding new features
 const WHATS_NEW_VERSION = 1;
diff --git a/web/app/src/components/ui/Toast.tsx b/web/app/src/shared/ui/Toast.tsx
similarity index 100%
rename from web/app/src/components/ui/Toast.tsx
rename to web/app/src/shared/ui/Toast.tsx
diff --git a/web/app/src/components/ui/WhatsNewModal.tsx b/web/app/src/shared/ui/WhatsNewModal.tsx
similarity index 100%
rename from web/app/src/components/ui/WhatsNewModal.tsx
rename to web/app/src/shared/ui/WhatsNewModal.tsx
diff --git a/web/app/src/components/ui/__tests__/StartupModals.test.tsx b/web/app/src/shared/ui/__tests__/StartupModals.test.tsx
similarity index 96%
rename from web/app/src/components/ui/__tests__/StartupModals.test.tsx
rename to web/app/src/shared/ui/__tests__/StartupModals.test.tsx
index 5538509ba3a..b4d6dbb0073 100644
--- a/web/app/src/components/ui/__tests__/StartupModals.test.tsx
+++ b/web/app/src/shared/ui/__tests__/StartupModals.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { BetaWelcomeModal } from '@/components/ui/BetaWelcomeModal';
-import { StartupModals } from '@/components/ui/StartupModals';
+import { BetaWelcomeModal } from '@/shared/ui/BetaWelcomeModal';
+import { StartupModals } from '@/shared/ui/StartupModals';
 
 const mocks = vi.hoisted(() => ({
   confetti: vi.fn(),
diff --git a/web/app/src/components/ui/input.tsx b/web/app/src/shared/ui/input.tsx
similarity index 100%
rename from web/app/src/components/ui/input.tsx
rename to web/app/src/shared/ui/input.tsx
diff --git a/web/app/src/types/chatSessions.ts b/web/app/src/types/chatSessions.ts
index 6ab53767eed..396191e845c 100644
--- a/web/app/src/types/chatSessions.ts
+++ b/web/app/src/types/chatSessions.ts
@@ -2,7 +2,7 @@
  * Chat-session wire types, mirroring `backend/routers/chat_sessions.py`.
  *
  * Shapes are camelCase to match the desktop clients (and so the ported view
- * helpers work unchanged); `lib/api.ts` translates snake_case on the wire.
+ * helpers work unchanged); the chat feature API translates snake_case on the wire.
  *
  * Shared-thread continuity: the default thread every client reads through
  * `/v2/messages` is the `plugin_id == null` session. Omitting `chat_session_id`
diff --git a/web/app/tailwind.config.ts b/web/app/tailwind.config.ts
index e2f237cd7d7..d77dbf15988 100644
--- a/web/app/tailwind.config.ts
+++ b/web/app/tailwind.config.ts
@@ -3,9 +3,9 @@ import type { Config } from 'tailwindcss';
 const config: Config = {
   darkMode: ['class'],
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    // Feature modules live under src/features; omitting that path drops their
+    // utilities from styles.css and the UI looks unstyled or re-nested.
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     screens: {
diff --git a/web/app/vitest.setup.ts b/web/app/vitest.setup.ts
index bb02c60cd05..45b875570d9 100644
--- a/web/app/vitest.setup.ts
+++ b/web/app/vitest.setup.ts
@@ -1 +1,25 @@
 import '@testing-library/jest-dom/vitest';
+
+if (typeof globalThis.localStorage?.clear !== 'function') {
+  const store = new Map<string, string>();
+  const localStorage: Storage = {
+    get length() {
+      return store.size;
+    },
+    clear: () => {
+      store.clear();
+    },
+    getItem: (key: string) => store.get(key) ?? null,
+    key: (index: number) => [...store.keys()][index] ?? null,
+    removeItem: (key: string) => {
+      store.delete(key);
+    },
+    setItem: (key: string, value: string) => {
+      store.set(key, String(value));
+    },
+  };
+  Object.defineProperty(globalThis, 'localStorage', {
+    configurable: true,
+    value: localStorage,
+  });
+}