Default chat to THINKING; open citations in new tab (#106 , #108 ).

Drop Sources card; inline [n] opens the source URL. Lock composer to THINKING while model picker stays hidden.
Remove FAST/THINKING model dropdown from chat composer (#106 ).
2026-08-04 12:22:05 -05:00 · 2026-08-04 12:16:44 -05:00 · 2026-08-04 06:28:12 -07:00 · 2026-08-04 07:05:55 -05:00 · 2026-08-04 06:22:54 -05:00 · 2026-08-04 04:08:57 -07:00
55 changed files with 3944 additions and 224 deletions
@@ -4,3 +4,9 @@
 #   REACT_APP_BACKEND_WS_API_BASE_URL=wss://beta.chatbackend.aimloperations.com/ws/chat_again/
 REACT_APP_BACKEND_REST_API_BASE_URL=https://chatbackend.aimloperations.com/api/
 REACT_APP_BACKEND_WS_API_BASE_URL=wss://chatbackend.aimloperations.com/ws/chat_again/
+
+# RevenueCat public SDK keys (native IAP). Leave empty until store apps are wired.
+REACT_APP_REVENUECAT_APPLE_API_KEY=
+REACT_APP_REVENUECAT_GOOGLE_API_KEY=
+# Optional: pin a specific offering identifier (defaults to current offering).
+# REACT_APP_REVENUECAT_OFFERING_ID=
@@ -27,6 +27,11 @@ Page views: always via `Tracker` / `tracker.js` on prod + beta.
 | Account Delete Started | `ACCOUNT_DELETE_STARTED` | DeleteAccountSection | — |
 | Account Delete Success | `ACCOUNT_DELETE_SUCCESS` | DeleteAccountSection | — |
 | Account Delete Failed | `ACCOUNT_DELETE_FAILED` | DeleteAccountSection | — |
+| Message Copied | `MESSAGE_COPIED` | MessageActions | `{ role }` |
+| Message Rated | `MESSAGE_RATED` | MessageActions | `{ rating: 'up' \| 'down' \| 'cleared' }` |
+| Message Rating Reason | `MESSAGE_RATING_REASON` | MessageActions | `{ reason, hasComment }` |
+| Message Exported | `MESSAGE_EXPORTED` | MessageActions, AsyncDashboard2 | `{ format, scope }` |
+| Activity Stage Completed | `ACTIVITY_STAGE_COMPLETED` | MessageContext | `{ stage, durationMs }` (no label/detail text) |

 ## Identify

@@ -40,6 +40,20 @@ npm run android:sync

 Default `.env.mobile` matches production (`chatbackend.aimloperations.com`). Point it at beta to flip the shell without touching web deploys. Optional gitignored override: `.env.mobile.local`.

+### RevenueCat IAP (#100)
+
+Native billing uses `@revenuecat/purchases-capacitor` (Capacitor 7 → package **11.x**). Web keeps Stripe Checkout / Customer Portal.
+
+Set public SDK keys in `.env.mobile` (empty placeholders OK until store apps ship):
+
+| Variable | Purpose |
+|----------|---------|
+| `REACT_APP_REVENUECAT_APPLE_API_KEY` | iOS public SDK key |
+| `REACT_APP_REVENUECAT_GOOGLE_API_KEY` | Android public SDK key |
+| `REACT_APP_REVENUECAT_OFFERING_ID` | Optional offering pin (else current) |
+
+After install / key changes: `npm run build:mobile` (runs `cap sync`). More detail: [`MONETIZATION.md`](MONETIZATION.md).
+
 ## Versioning

 In `android/app/build.gradle`:
@@ -0,0 +1,40 @@
+# Monetization (web Stripe + native RevenueCat)
+
+## Channels
+
+| Runtime | Checkout / manage | Ledger |
+|---------|-------------------|--------|
+| Web (`!isNativePlatform`) | Stripe Checkout + Customer Portal via `/monetization/...` | Stripe webhooks |
+| Native Capacitor | RevenueCat IAP (`@revenuecat/purchases-capacitor`) | RevenueCat webhooks → same invoice/payment tables |
+
+FE displays whatever `/monetization/invoices/` (and subscription) returns after refresh. Provider badge uses `provider` + `revenuecat_store`.
+
+## App user id
+
+RevenueCat `appUserID` = Django user pk as string.
+
+1. Prefer `id` from `/user/get/` (serializer returns all model fields).
+2. Else JWT `user_id` claim (`SIMPLE_JWT.USER_ID_CLAIM`).
+
+Backend webhook resolver accepts numeric pk (or email fallback).
+
+## Mobile env keys
+
+In `.env.mobile`:
+
+- `REACT_APP_REVENUECAT_APPLE_API_KEY`
+- `REACT_APP_REVENUECAT_GOOGLE_API_KEY`
+- `REACT_APP_REVENUECAT_OFFERING_ID` (optional)
+
+Package identifiers in the RC dashboard should include plan slugs (e.g. `founders`) so `purchasePlan(planSlug)` can match packages/products. Optional backend `REVENUECAT_PRODUCT_PLAN_MAP` maps product id → plan slug.
+
+## Auth hooks
+
+- `Purchases.configure` once on native (first purchase / logIn).
+- `logIn(appUserID)` after SignIn / SignUp / AuthCallback / AccountContext load.
+- `logOut` on Header2 sign-out and Delete account.
+
+## Related
+
+- Issue #100 (FE) + companion backend RevenueCat webhook PR
+- [`ANDROID.md`](ANDROID.md) / [`IOS.md`](IOS.md) for store builds
@@ -21,11 +21,14 @@
        "@emotion/styled": "^11.14.0",
        "@mui/icons-material": "^5.16.11",
        "@mui/material": "^5.16.11",
+        "@revenuecat/purchases-capacitor": "^11.3.2",
        "@testing-library/jest-dom": "^6.6.3",
        "@testing-library/react": "^16.1.0",
        "@testing-library/user-event": "^14.5.2",
        "@types/jest": "^29.5.14",
        "@types/node": "^22.10.2",
+        "@types/papaparse": "^5.5.2",
+        "@types/pdfmake": "^0.3.3",
        "axios": "^1.13.2",
        "babel-loader": "^9.2.1",
        "bootstrap": "^5.3.3",
@@ -36,6 +39,8 @@
        "lodash": "^4.17.21",
        "markdown-to-jsx": "^7.7.2",
        "mini.css": "^3.0.1",
+        "papaparse": "^5.5.4",
+        "pdfmake": "^0.3.11",
        "react-bootstrap": "^2.10.6",
        "react-code-blocks": "^0.1.6",
        "react-github-btn": "^1.4.0",
@@ -48,10 +53,12 @@
        "web-vitals": "^4.2.4",
        "webpack": "^5.97.1",
        "webpack-cli": "^5.1.4",
+        "xlsx": "^0.18.5",
        "yup": "^1.5.0"
      },
      "devDependencies": {
        "@capacitor/assets": "^3.0.5",
+        "@testing-library/dom": "^10.4.1",
        "@types/bootstrap": "~5.2.10",
        "@types/lodash": "~4.17.13",
        "@types/react": "^18.3.16",
@@ -3252,6 +3259,9 @@
        "arm"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3269,6 +3279,9 @@
        "arm64"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3286,6 +3299,9 @@
        "ppc64"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3303,6 +3319,9 @@
        "riscv64"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3320,6 +3339,9 @@
        "s390x"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3337,6 +3359,9 @@
        "x64"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3354,6 +3379,9 @@
        "arm64"
      ],
      "dev": true,
+      "libc": [
+        "musl"
+      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3371,6 +3399,9 @@
        "x64"
      ],
      "dev": true,
+      "libc": [
+        "musl"
+      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3388,6 +3419,9 @@
        "arm"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3411,6 +3445,9 @@
        "arm64"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3434,6 +3471,9 @@
        "ppc64"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3457,6 +3497,9 @@
        "riscv64"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3480,6 +3523,9 @@
        "s390x"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3503,6 +3549,9 @@
        "x64"
      ],
      "dev": true,
+      "libc": [
+        "glibc"
+      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3526,6 +3575,9 @@
        "arm64"
      ],
      "dev": true,
+      "libc": [
+        "musl"
+      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3549,6 +3601,9 @@
        "x64"
      ],
      "dev": true,
+      "libc": [
+        "musl"
+      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -4971,6 +5026,30 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/@noble/ciphers": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
+      "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@noble/hashes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5160,6 +5239,24 @@
        "react": ">=16.14.0"
      }
    },
+    "node_modules/@revenuecat/purchases-capacitor": {
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/@revenuecat/purchases-capacitor/-/purchases-capacitor-11.3.2.tgz",
+      "integrity": "sha512-3T4/lcAwpbPagrT4DuXvJ+8RewzFmHf3fQJQuhVy+uTQk5HGMHNlXcm2A/UdyHtWqU+/VqWbCClPFYGnpnNXAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@revenuecat/purchases-typescript-internal-esm": "17.25.0"
+      },
+      "peerDependencies": {
+        "@capacitor/core": ">=7.0.0"
+      }
+    },
+    "node_modules/@revenuecat/purchases-typescript-internal-esm": {
+      "version": "17.25.0",
+      "resolved": "https://registry.npmjs.org/@revenuecat/purchases-typescript-internal-esm/-/purchases-typescript-internal-esm-17.25.0.tgz",
+      "integrity": "sha512-KC4BjFaQclXqFafG1Enh7t8GSwdg8p905by7UrHq0WSJmLhOR6yXSj6WDv1iwsFSAZxPPwgozNxt+U6IOFTdCA==",
+      "license": "MIT"
+    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -5508,18 +5605,18 @@
      }
    },
    "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
-      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "peer": true,
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "license": "MIT",
      "dependencies": {
        "@babel/code-frame": "^7.10.4",
        "@babel/runtime": "^7.12.5",
        "@types/aria-query": "^5.0.1",
        "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
        "dom-accessibility-api": "^0.5.9",
        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
        "pretty-format": "^27.0.2"
      },
      "engines": {
@@ -5931,7 +6028,7 @@
      "version": "5.0.4",
      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
@@ -6277,11 +6374,39 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/papaparse": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.5.2.tgz",
+      "integrity": "sha512-gFnFp/JMzLHCwRf7tQHrNnfhN4eYBVYYI897CGX4MY1tzY9l2aLkVyx2IlKZ/SAqDbB3I1AOZW5gTMGGsqWliA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/parse-json": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
    },
+    "node_modules/@types/pdfkit": {
+      "version": "0.17.6",
+      "resolved": "https://registry.npmjs.org/@types/pdfkit/-/pdfkit-0.17.6.tgz",
+      "integrity": "sha512-tIwzxk2uWKp0Cq9JIluQXJid77lYhF52EsIOwhsMF4iWLA6YneoBR1xVKYYdAysHuepUB0OX4tdwMiUDdGKmig==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/pdfmake": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/pdfmake/-/pdfmake-0.3.3.tgz",
+      "integrity": "sha512-ufbceB4Q3dKpmFUMKEbZvJcfLi8+C5b1+rTFVG6urtkS3FHwaTQH6NCh/iEEDINlApCxH/W3/rsq99pP5E9/JA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/pdfkit": "*"
+      }
+    },
    "node_modules/@types/prettier": {
      "version": "2.7.3",
      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
@@ -7010,6 +7135,15 @@
        "node": ">=8.9"
      }
    },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/agent-base": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -7934,11 +8068,29 @@
        "node": ">=8"
      }
    },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
    "node_modules/browser-process-hrtime": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
    },
+    "node_modules/browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "~1.0.5"
+      }
+    },
    "node_modules/browserslist": {
      "version": "4.28.7",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz",
@@ -8168,6 +8320,19 @@
        "node": ">=4"
      }
    },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -8342,6 +8507,15 @@
        "wrap-ansi": "^7.0.0"
      }
    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/clone-deep": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -8372,6 +8546,15 @@
        "node": ">= 0.12.0"
      }
    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/collect-v8-coverage": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@@ -8852,6 +9035,18 @@
        "node": ">=10"
      }
    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/create-require": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -9658,6 +9853,12 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
    "node_modules/didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -9723,7 +9924,7 @@
      "version": "0.5.16",
      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/dom-converter": {
      "version": "0.2.0",
@@ -11352,6 +11553,23 @@
        }
      }
    },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.5",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -11575,6 +11793,15 @@
        "node": ">= 0.6"
      }
    },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -15311,6 +15538,12 @@
        "jiti": "bin/jiti.js"
      }
    },
+    "node_modules/js-md5": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.8.3.tgz",
+      "integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ==",
+      "license": "MIT"
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -15589,6 +15822,25 @@
        "node": ">=10"
      }
    },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/lines-and-columns": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -15759,7 +16011,7 @@
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "peer": true,
+      "license": "MIT",
      "bin": {
        "lz-string": "bin/bin.js"
      }
@@ -16844,6 +17096,18 @@
      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="
    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
+    "node_modules/papaparse": {
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.4.tgz",
+      "integrity": "sha512-SwzWD9gl/ElwYLCI0nUja1mFJzjq2D8ziShfNBa7zCHzkOozeOGDwHWQ+tvCzEZcewecWZ5U7kUopDnG+DFYEQ==",
+      "license": "MIT"
+    },
    "node_modules/param-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -16983,6 +17247,34 @@
        "node": ">=8"
      }
    },
+    "node_modules/pdfkit": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/pdfkit/-/pdfkit-0.19.1.tgz",
+      "integrity": "sha512-6Gzk+wDwTs4VSxsR5rCMTnIl5nlmkye1oWB0l2hDB1EX6ZNSIBroKQEv+2+fPPn+stVjyqzmsqRJVDfB9fo5DA==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/ciphers": "^1.0.0",
+        "@noble/hashes": "^1.6.0",
+        "fontkit": "^2.0.4",
+        "js-md5": "^0.8.3",
+        "linebreak": "^1.1.0",
+        "png-js": "^1.1.0"
+      }
+    },
+    "node_modules/pdfmake": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/pdfmake/-/pdfmake-0.3.11.tgz",
+      "integrity": "sha512-Uc49J9hUMyuqJk+U+PxlpBpPr96A4HOOfesGx609EPr2ue82+5/Smq/KTAkEqh0/jUGSi1fumvqZ5yAWijJTJg==",
+      "license": "MIT",
+      "dependencies": {
+        "linebreak": "^1.1.0",
+        "pdfkit": "^0.19.1",
+        "xmldoc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
    "node_modules/pend": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -17122,6 +17414,14 @@
        "node": ">=10.4.0"
      }
    },
+    "node_modules/png-js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/png-js/-/png-js-1.1.0.tgz",
+      "integrity": "sha512-PM/uYGzGdNSzqeOgly68+6wKQDL1SY0a/N+OEa/+br6LnHWOAJB0Npiamnodfq3jd2LS/i2fMeOKSAILjA+m5Q==",
+      "dependencies": {
+        "browserify-zlib": "^0.2.0"
+      }
+    },
    "node_modules/possible-typed-array-names": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -20078,6 +20378,12 @@
        "node": ">=10"
      }
    },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
    "node_modules/retry": {
      "version": "0.13.1",
      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
@@ -21002,6 +21308,18 @@
      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
    },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/stable": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -21861,6 +22179,12 @@
      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
    },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
    "node_modules/tiny-invariant": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -22311,6 +22635,16 @@
        "node": ">=4"
      }
    },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
    "node_modules/unicode-property-aliases-ecmascript": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
@@ -22319,6 +22653,22 @@
        "node": ">=4"
      }
    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unicode-trie/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
    "node_modules/unique-string": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -23015,6 +23365,24 @@
      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ=="
    },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/word-wrap": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -23411,6 +23779,27 @@
        "node": ">=10.0.0"
      }
    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
    "node_modules/xml-js": {
      "version": "1.6.11",
      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
@@ -23465,6 +23854,18 @@
      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
    },
+    "node_modules/xmldoc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/xmldoc/-/xmldoc-2.0.3.tgz",
+      "integrity": "sha512-6gRk4NY/Jvg67xn7OzJuxLRsGgiXBaPUQplVJ/9l99uIugxh4FTOewYz5ic8WScj7Xx/2WvhENiQKwkK9RpE4w==",
+      "license": "MIT",
+      "dependencies": {
+        "sax": "^1.4.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/xpath": {
      "version": "0.0.32",
      "resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.32.tgz",
@@ -16,11 +16,14 @@
    "@emotion/styled": "^11.14.0",
    "@mui/icons-material": "^5.16.11",
    "@mui/material": "^5.16.11",
+    "@revenuecat/purchases-capacitor": "^11.3.2",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.1.0",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.14",
    "@types/node": "^22.10.2",
+    "@types/papaparse": "^5.5.2",
+    "@types/pdfmake": "^0.3.3",
    "axios": "^1.13.2",
    "babel-loader": "^9.2.1",
    "bootstrap": "^5.3.3",
@@ -31,6 +34,8 @@
    "lodash": "^4.17.21",
    "markdown-to-jsx": "^7.7.2",
    "mini.css": "^3.0.1",
+    "papaparse": "^5.5.4",
+    "pdfmake": "^0.3.11",
    "react-bootstrap": "^2.10.6",
    "react-code-blocks": "^0.1.6",
    "react-github-btn": "^1.4.0",
@@ -43,6 +48,7 @@
    "web-vitals": "^4.2.4",
    "webpack": "^5.97.1",
    "webpack-cli": "^5.1.4",
+    "xlsx": "^0.18.5",
    "yup": "^1.5.0"
  },
  "scripts": {
@@ -80,6 +86,7 @@
  },
  "devDependencies": {
    "@capacitor/assets": "^3.0.5",
+    "@testing-library/dom": "^10.4.1",
    "@types/bootstrap": "~5.2.10",
    "@types/lodash": "~4.17.13",
    "@types/react": "^18.3.16",
@@ -24,6 +24,7 @@ import { AnalyticsConsentProvider } from './llm-fe/contexts/AnalyticsConsentCont
 import AnalyticsConsentBanner from './llm-fe/components/AnalyticsConsentBanner/AnalyticsConsentBanner';
 import AnalyticsSession from './llm-fe/components/AnalyticsSession/AnalyticsSession';
 import AppErrorBoundary from './llm-fe/components/AppErrorBoundary/AppErrorBoundary';
+import ToastHost from './llm-fe/components/ToastHost/ToastHost';

 const ProtectedRoutes = () => {
  const { authenticated, loading } = useContext(AuthContext);
@@ -48,6 +49,7 @@ class App extends Component {
        <AnalyticsConsentProvider>
        <Tracker />
        <AnalyticsSession />
+        <ToastHost />
        <AnalyticsConsentBanner />
        <div className='site'>
          <main>
@@ -0,0 +1,134 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import ActivityIndicator from './ActivityIndicator';
+import type { ActivityHistoryEntry } from '../../utils/wsFrames';
+
+const theme = {
+  main: '#336699',
+  focus: '#224466',
+  darkMode: true,
+  colors: {
+    text: '#ffffff',
+    cardBackground: 'rgba(0,0,0,0.3)',
+    cardBorder: 'rgba(255,255,255,0.1)',
+  },
+};
+
+const renderIndicator = (
+  props: React.ComponentProps<typeof ActivityIndicator>,
+) =>
+  render(
+    <ThemeProvider theme={theme as never}>
+      <ActivityIndicator {...props} />
+    </ThemeProvider>,
+  );
+
+describe('ActivityIndicator (#96)', () => {
+  it('has status role and polite live region regardless of state', () => {
+    renderIndicator({ stage: null });
+    const status = screen.getByRole('status');
+    expect(status).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('falls back to three dots when stage is null', () => {
+    renderIndicator({ stage: null });
+    expect(screen.getByTestId('activity-dots-fallback')).toBeInTheDocument();
+  });
+
+  it('renders the label verbatim for unknown/future stage values', () => {
+    renderIndicator({ stage: 'some_future_stage', label: 'Doing something new' });
+    expect(screen.getByText('Doing something new')).toBeInTheDocument();
+    expect(screen.queryByTestId('activity-dots-fallback')).not.toBeInTheDocument();
+  });
+
+  it('shows optional detail text', () => {
+    renderIndicator({
+      stage: 'searching',
+      label: 'Searching the web',
+      detail: 'query: best pizza in town',
+    });
+    expect(screen.getByText('Searching the web')).toBeInTheDocument();
+    expect(screen.getByText('query: best pizza in town')).toBeInTheDocument();
+  });
+
+  it('renders completed stages above with check marks', () => {
+    const history: ActivityHistoryEntry[] = [
+      { stage: 'searching', label: 'Searched the web', startedAt: 0, finishedAt: 100 },
+      { stage: 'reading', label: 'Read 3 sources', startedAt: 100, finishedAt: 400 },
+    ];
+    renderIndicator({
+      stage: 'writing',
+      label: null,
+      history,
+    });
+    expect(screen.getByText('Searched the web')).toBeInTheDocument();
+    expect(screen.getByText('Read 3 sources')).toBeInTheDocument();
+    expect(screen.getAllByText('✓')).toHaveLength(2);
+  });
+
+  it('hides everything when interrupted', () => {
+    const { container } = renderIndicator({
+      stage: 'searching',
+      label: 'Searching the web',
+      interrupted: true,
+    });
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('shows a generic label when stage is present but label is cleared (writing stage)', () => {
+    renderIndicator({ stage: 'writing', label: null });
+    expect(screen.getByText('Working…')).toBeInTheDocument();
+  });
+
+  describe('prefers-reduced-motion', () => {
+    const originalMatchMedia = window.matchMedia;
+
+    afterEach(() => {
+      Object.defineProperty(window, 'matchMedia', {
+        configurable: true,
+        writable: true,
+        value: originalMatchMedia,
+      });
+    });
+
+    it('disables the spinner animation when the user prefers reduced motion', () => {
+      const matchMediaMock = jest.fn().mockImplementation((query: string) => ({
+        matches: query.includes('prefers-reduced-motion'),
+        media: query,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+      }));
+      Object.defineProperty(window, 'matchMedia', {
+        configurable: true,
+        writable: true,
+        value: matchMediaMock,
+      });
+
+      renderIndicator({ stage: 'searching', label: 'Searching the web' });
+      const spinner = screen.getByTestId('activity-spinner');
+      expect(spinner).toHaveAttribute('data-reduced-motion', 'true');
+    });
+  });
+
+  it('shows elapsed time after ~10s and "Still working…" after ~30s of silence', () => {
+    jest.useFakeTimers();
+    try {
+      renderIndicator({ stage: 'searching', label: 'Searching the web' });
+
+      act(() => {
+        jest.advanceTimersByTime(11_000);
+      });
+      expect(screen.getByText('11s')).toBeInTheDocument();
+
+      act(() => {
+        jest.advanceTimersByTime(20_000);
+      });
+      expect(screen.getByText('Still working…')).toBeInTheDocument();
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+});
@@ -0,0 +1,346 @@
+import React, { useEffect, useReducer, useRef, useState } from 'react';
+import styled, { css, keyframes } from 'styled-components';
+import type { ActivityHistoryEntry } from '../../utils/wsFrames';
+
+/** Minimum time a single stage stays visible before advancing to a queued update (#96). */
+const MIN_DISPLAY_MS = 400;
+const ELAPSED_THRESHOLD_MS = 10_000;
+const SILENCE_THRESHOLD_MS = 30_000;
+
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState<boolean>(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)')?.matches ?? false;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return undefined;
+    const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+    if (!mql) return undefined;
+    const handler = (e: MediaQueryListEvent) => setReduced(e.matches);
+    if (typeof mql.addEventListener === 'function') {
+      mql.addEventListener('change', handler);
+      return () => mql.removeEventListener('change', handler);
+    }
+    // Safari < 14 fallback
+    mql.addListener(handler);
+    return () => mql.removeListener(handler);
+  }, []);
+
+  return reduced;
+}
+
+type QueueItem = { stage: string; label: string | null; detail: string | null };
+
+type IndicatorState = {
+  current: QueueItem | null;
+  queue: QueueItem[];
+  lastIncomingStage: string | null;
+};
+
+type IndicatorAction =
+  | { type: 'INCOMING'; item: QueueItem | null }
+  | { type: 'ADVANCE' }
+  | { type: 'RESET' };
+
+const initialIndicatorState: IndicatorState = {
+  current: null,
+  queue: [],
+  lastIncomingStage: null,
+};
+
+function indicatorReducer(state: IndicatorState, action: IndicatorAction): IndicatorState {
+  switch (action.type) {
+    case 'RESET':
+      return initialIndicatorState;
+    case 'INCOMING': {
+      if (!action.item) return initialIndicatorState;
+      // Same stage as the last update seen — refresh content in place (label/detail tweak),
+      // no need to enforce the min-display queue since it isn't a stage transition.
+      if (action.item.stage === state.lastIncomingStage) {
+        if (state.queue.length > 0) {
+          const queue = [...state.queue];
+          queue[queue.length - 1] = action.item;
+          return { ...state, queue };
+        }
+        return { ...state, current: action.item };
+      }
+      if (!state.current) {
+        return { current: action.item, queue: [], lastIncomingStage: action.item.stage };
+      }
+      return {
+        ...state,
+        queue: [...state.queue, action.item],
+        lastIncomingStage: action.item.stage,
+      };
+    }
+    case 'ADVANCE': {
+      if (state.queue.length === 0) return state;
+      const [next, ...rest] = state.queue;
+      return { ...state, current: next, queue: rest };
+    }
+    default:
+      return state;
+  }
+}
+
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`;
+
+const bounce = keyframes`
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+`;
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 0.9rem;
+
+  @media (max-width: 360px) {
+    font-size: 0.85rem;
+  }
+`;
+
+const HistoryList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  opacity: 0.6;
+  min-width: 0;
+`;
+
+const HistoryItem = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.8rem;
+  min-width: 0;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+`;
+
+const CheckMark = styled.span`
+  flex-shrink: 0;
+  color: ${({ theme }) => (theme.darkMode ? '#8ee6a0' : '#2e7d32')};
+  font-weight: 700;
+`;
+
+const CurrentRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+`;
+
+const Spinner = styled.span<{ $reducedMotion: boolean }>`
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  opacity: 0.7;
+  ${({ $reducedMotion }) =>
+    $reducedMotion
+      ? css`
+          animation: none;
+        `
+      : css`
+          animation: ${spin} 0.8s linear infinite;
+        `}
+`;
+
+const TextColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+`;
+
+const LabelText = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+`;
+
+const DetailText = styled.span`
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.78rem;
+  opacity: 0.65;
+  margin-top: 0.1rem;
+`;
+
+const MetaText = styled.span`
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  opacity: 0.55;
+  white-space: nowrap;
+`;
+
+const DotsRow = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0.15rem 0;
+`;
+
+const Dot = styled.span<{ $delay: string; $reducedMotion: boolean }>`
+  width: 8px;
+  height: 8px;
+  margin: 0 4px;
+  border-radius: 50%;
+  background: currentColor;
+  ${({ $reducedMotion, $delay }) =>
+    $reducedMotion
+      ? css`
+          opacity: 0.6;
+        `
+      : css`
+          animation: ${bounce} 1.4s infinite ease-in-out both;
+          animation-delay: ${$delay};
+        `}
+`;
+
+export type ActivityIndicatorProps = {
+  /** Current stage key from the latest "status" frame, or null before the first update. */
+  stage: string | null;
+  label?: string | null;
+  detail?: string | null;
+  /** Previously completed stages for this turn, oldest first. */
+  history?: ActivityHistoryEntry[];
+  /** Hides the indicator entirely once a stream is interrupted (#96). */
+  interrupted?: boolean;
+};
+
+const ActivityIndicator = ({
+  stage,
+  label = null,
+  detail = null,
+  history = [],
+  interrupted = false,
+}: ActivityIndicatorProps): JSX.Element | null => {
+  const [state, dispatch] = useReducer(indicatorReducer, initialIndicatorState);
+  const reducedMotion = usePrefersReducedMotion();
+
+  const overallStartRef = useRef<number | null>(null);
+  const lastUpdateRef = useRef<number>(Date.now());
+  const currentSinceRef = useRef<number>(Date.now());
+  const advanceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [, forceTick] = useState(0);
+
+  useEffect(() => {
+    if (interrupted || stage == null) {
+      overallStartRef.current = null;
+      dispatch({ type: 'RESET' });
+      return;
+    }
+    if (overallStartRef.current == null) {
+      overallStartRef.current = Date.now();
+    }
+    lastUpdateRef.current = Date.now();
+    dispatch({ type: 'INCOMING', item: { stage, label, detail } });
+  }, [stage, label, detail, interrupted]);
+
+  // Reset the per-stage clock whenever the displayed stage changes.
+  useEffect(() => {
+    currentSinceRef.current = Date.now();
+  }, [state.current?.stage]);
+
+  // Enforce the minimum display time per stage before advancing the queue.
+  useEffect(() => {
+    if (advanceTimerRef.current) {
+      clearTimeout(advanceTimerRef.current);
+      advanceTimerRef.current = null;
+    }
+    if (state.queue.length === 0) return undefined;
+    const elapsed = Date.now() - currentSinceRef.current;
+    const remaining = Math.max(MIN_DISPLAY_MS - elapsed, 0);
+    advanceTimerRef.current = setTimeout(() => {
+      dispatch({ type: 'ADVANCE' });
+    }, remaining);
+    return () => {
+      if (advanceTimerRef.current) clearTimeout(advanceTimerRef.current);
+    };
+  }, [state.queue.length]);
+
+  // Tick once a second while active so elapsed/"still working" copy stays fresh.
+  useEffect(() => {
+    if (!state.current) return undefined;
+    const id = setInterval(() => forceTick((n) => n + 1), 1000);
+    return () => clearInterval(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [Boolean(state.current)]);
+
+  if (interrupted) return null;
+
+  const now = Date.now();
+  const elapsedMs = overallStartRef.current != null ? now - overallStartRef.current : 0;
+  const silentMs = now - lastUpdateRef.current;
+  const showElapsed = state.current != null && elapsedMs >= ELAPSED_THRESHOLD_MS;
+  const stillWorking = state.current != null && silentMs >= SILENCE_THRESHOLD_MS;
+  const elapsedLabel = showElapsed ? `${Math.floor(elapsedMs / 1000)}s` : null;
+
+  return (
+    <Root role="status" aria-live="polite">
+      {history.length > 0 && (
+        <HistoryList>
+          {history.map((entry, i) => (
+            <HistoryItem key={`${entry.stage}-${entry.startedAt}-${i}`}>
+              <CheckMark aria-hidden="true">✓</CheckMark>
+              <span>{entry.label}</span>
+            </HistoryItem>
+          ))}
+        </HistoryList>
+      )}
+
+      {state.current ? (
+        <CurrentRow>
+          <Spinner
+            aria-hidden="true"
+            $reducedMotion={reducedMotion}
+            data-testid="activity-spinner"
+            data-reduced-motion={reducedMotion}
+          />
+          <TextColumn>
+            <LabelText>
+              {stillWorking ? 'Still working…' : state.current.label || 'Working…'}
+            </LabelText>
+            {state.current.detail && (
+              <DetailText title={state.current.detail}>{state.current.detail}</DetailText>
+            )}
+          </TextColumn>
+          {elapsedLabel && !stillWorking && <MetaText>{elapsedLabel}</MetaText>}
+        </CurrentRow>
+      ) : (
+        <DotsRow data-testid="activity-dots-fallback">
+          <Dot $delay="-0.32s" $reducedMotion={reducedMotion} />
+          <Dot $delay="-0.16s" $reducedMotion={reducedMotion} />
+          <Dot $delay="0s" $reducedMotion={reducedMotion} />
+        </DotsRow>
+      )}
+    </Root>
+  );
+};
+
+export default ActivityIndicator;
@@ -8,6 +8,9 @@ const mockGet = jest.fn();
 const mockPost = jest.fn();
 const assignMock = jest.fn();
 const mockTrackEvent = jest.fn();
+const mockPurchasePlan = jest.fn();
+const mockRestorePurchases = jest.fn();
+const mockIsNativePlatform = jest.fn(() => false);

 jest.mock('../../../axiosApi', () => ({
  axiosInstance: {
@@ -27,6 +30,17 @@ jest.mock('../../utils/analytics', () => ({
  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
 }));

+jest.mock('../../platform/nativePlatform', () => ({
+  isNativePlatform: () => mockIsNativePlatform(),
+}));
+
+jest.mock('../../utils/revenueCat', () => ({
+  purchasePlan: (...args: unknown[]) => mockPurchasePlan(...args),
+  restorePurchases: (...args: unknown[]) => mockRestorePurchases(...args),
+  isPurchaseCancelledError: (error: { userCancelled?: boolean }) =>
+    Boolean(error?.userCancelled),
+}));
+
 const theme = {
  main: '#4a90e2',
  darkMode: true,
@@ -143,16 +157,16 @@ const mockFinanceGets = ({
  plans?: unknown[];
 } = {}) => {
  mockGet.mockImplementation((url: string) => {
-    if (url === '/finance/invoices/') {
+    if (url === '/monetization/invoices/') {
      return Promise.resolve({ data: invoices });
    }
-    if (url === '/finance/payments/') {
+    if (url === '/monetization/payments/') {
      return Promise.resolve({ data: payments });
    }
-    if (url === '/finance/subscription/') {
+    if (url === '/monetization/subscription/') {
      return Promise.resolve({ data: subscription });
    }
-    if (url === '/finance/plans/') {
+    if (url === '/monetization/plans/') {
      return Promise.resolve({ data: plans });
    }
    return Promise.reject(new Error(`unexpected GET ${url}`));
@@ -174,6 +188,9 @@ describe('BillingSection', () => {
    mockPost.mockReset();
    assignMock.mockReset();
    mockTrackEvent.mockReset();
+    mockPurchasePlan.mockReset();
+    mockRestorePurchases.mockReset();
+    mockIsNativePlatform.mockReturnValue(false);
    Object.defineProperty(window, 'location', {
      configurable: true,
      value: {
@@ -229,7 +246,7 @@ describe('BillingSection', () => {
    await user.click(screen.getByRole('button', { name: /Change plan/i }));

    await waitFor(() => {
-      expect(mockPost).toHaveBeenCalledWith('/finance/portal/', {
+      expect(mockPost).toHaveBeenCalledWith('/monetization/portal/', {
        return_url: 'http://localhost/account/',
      });
    });
@@ -304,7 +321,7 @@ describe('BillingSection', () => {

    await waitFor(() => {
      expect(mockPost).toHaveBeenCalledWith(
-        '/finance/checkout/',
+        '/monetization/checkout/',
        expect.objectContaining({
          success_url: expect.stringContaining('/billing/success'),
          cancel_url: expect.stringContaining('/billing/cancel'),
@@ -345,4 +362,49 @@ describe('BillingSection', () => {
    expect(await screen.findByText('No Stripe customer found')).toBeInTheDocument();
    expect(assignMock).not.toHaveBeenCalled();
  });
+
+  it('on native uses RevenueCat purchase and shows Restore', async () => {
+    mockIsNativePlatform.mockReturnValue(true);
+    mockFinanceGets();
+    mockPurchasePlan.mockResolvedValue(undefined);
+
+    const user = userEvent.setup();
+    renderBilling();
+
+    expect(await screen.findByTestId('restore-purchases')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /Complete payment/i }));
+
+    await waitFor(() => {
+      expect(mockPurchasePlan).toHaveBeenCalled();
+    });
+    expect(mockPost).not.toHaveBeenCalledWith(
+      '/monetization/checkout/',
+      expect.anything()
+    );
+  });
+
+  it('shows provider badge for RevenueCat invoices', async () => {
+    mockFinanceGets({
+      invoices: [
+        {
+          ...paidInvoice,
+          provider: 'revenuecat',
+          stripe_subscription_id: null,
+          revenuecat_store: 'PLAY_STORE',
+          hosted_invoice_url: '',
+          description: 'Store IAP (PLAY_STORE) — founders — INITIAL_PURCHASE',
+        },
+      ],
+      subscription: {
+        ...foundersSubscription,
+        source: 'revenuecat',
+        stripe_subscription_id: '',
+      },
+    });
+
+    renderBilling();
+
+    expect(await screen.findByText('Play Store')).toBeInTheDocument();
+    expect(screen.getByText(/Store IAP/)).toBeInTheDocument();
+  });
 });
@@ -12,12 +12,21 @@ import {
  formatTokenCount,
  higherSelectablePlans,
  humanizeStatus,
+  invoiceProviderLabel,
  isComplimentarySubscription,
+  isStoreSubscription,
+  isStripeSubscription,
  otherSelectablePlans,
  pickPrimaryInvoice,
  SubscriptionMe,
  SubscriptionPlanInfo,
 } from '../../utils/finance';
+import { isNativePlatform } from '../../platform/nativePlatform';
+import {
+  isPurchaseCancelledError,
+  purchasePlan,
+  restorePurchases,
+} from '../../utils/revenueCat';

 const GlassCard = styled.div`
  background: ${({ theme }) => theme.colors.cardBackground};
@@ -233,6 +242,14 @@ const InvoiceLink = styled.a`
  }
 `;

+const ProviderBadge = styled.span`
+  display: inline-block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  opacity: 0.85;
+  white-space: nowrap;
+`;
+
 function apiErrorMessage(error: unknown, fallback: string): string {
  const axiosError = error as {
    response?: { data?: { detail?: string } };
@@ -241,9 +258,19 @@ function apiErrorMessage(error: unknown, fallback: string): string {
  return axiosError.response?.data?.detail || axiosError.message || fallback;
 }

+function storeManageLabel(): string {
+  if (typeof window === 'undefined') return 'App Store / Play Store';
+  const Cap = window.Capacitor as { getPlatform?: () => string } | undefined;
+  const platform = Cap?.getPlatform?.();
+  if (platform === 'ios') return 'App Store';
+  if (platform === 'android') return 'Play Store';
+  return 'App Store / Play Store';
+}
+
 type PortalIntent = 'manage' | 'upgrade' | 'change' | 'cancel';

 const BillingSection = (): JSX.Element => {
+  const native = isNativePlatform();
  const [invoices, setInvoices] = useState<FinanceInvoice[]>([]);
  const [payments, setPayments] = useState<FinancePayment[]>([]);
  const [subscription, setSubscription] = useState<SubscriptionMe | null>(null);
@@ -251,8 +278,10 @@ const BillingSection = (): JSX.Element => {
  const [loading, setLoading] = useState(true);
  const [listError, setListError] = useState('');
  const [actionError, setActionError] = useState('');
+  const [actionNotice, setActionNotice] = useState('');
  const [portalLoading, setPortalLoading] = useState(false);
  const [checkoutLoadingSlug, setCheckoutLoadingSlug] = useState<string | null>(null);
+  const [restoreLoading, setRestoreLoading] = useState(false);
  const [showPlanPicker, setShowPlanPicker] = useState(false);
  const [planPickerMode, setPlanPickerMode] = useState<'upgrade' | 'change'>('change');
  const [cancelConfirmOpen, setCancelConfirmOpen] = useState(false);
@@ -263,10 +292,10 @@ const BillingSection = (): JSX.Element => {
    try {
      const [invoiceResponse, paymentResponse, subscriptionResponse, plansResponse] =
        await Promise.all([
-          axiosInstance.get<FinanceInvoice[]>('/finance/invoices/'),
-          axiosInstance.get<FinancePayment[]>('/finance/payments/'),
-          axiosInstance.get<SubscriptionMe>('/finance/subscription/'),
-          axiosInstance.get<SubscriptionPlanInfo[]>('/finance/plans/'),
+          axiosInstance.get<FinanceInvoice[]>('/monetization/invoices/'),
+          axiosInstance.get<FinancePayment[]>('/monetization/payments/'),
+          axiosInstance.get<SubscriptionMe>('/monetization/subscription/'),
+          axiosInstance.get<SubscriptionPlanInfo[]>('/monetization/plans/'),
        ]);
      setInvoices(Array.isArray(invoiceResponse.data) ? invoiceResponse.data : []);
      setPayments(Array.isArray(paymentResponse.data) ? paymentResponse.data : []);
@@ -293,6 +322,16 @@ const BillingSection = (): JSX.Element => {
    () => isComplimentarySubscription(subscription, hasPortalAccess),
    [subscription, hasPortalAccess]
  );
+  const storeSub = useMemo(
+    () => isStoreSubscription(subscription?.source),
+    [subscription?.source]
+  );
+  const stripeSub = useMemo(
+    () => isStripeSubscription(subscription?.source) || hasPortalAccess,
+    [subscription?.source, hasPortalAccess]
+  );
+  const showStripeManage = !complimentary && stripeSub && hasPortalAccess;
+  const showStoreManage = !complimentary && (storeSub || (native && !showStripeManage && Boolean(subscription?.plan) && !subscription?.needs_checkout));
  const upgradePlans = useMemo(
    () => higherSelectablePlans(plans, subscription?.plan),
    [plans, subscription?.plan]
@@ -306,6 +345,7 @@ const BillingSection = (): JSX.Element => {
      subscription?.current_period_end || primaryInvoice?.period_end || null;
    return formatBillingDate(end);
  }, [subscription?.current_period_end, primaryInvoice?.period_end]);
+  const storeLabel = useMemo(() => storeManageLabel(), []);

  const historyRows = useMemo(() => {
    if (invoices.length) {
@@ -313,6 +353,7 @@ const BillingSection = (): JSX.Element => {
        key: `invoice-${invoice.id}`,
        date: invoice.created,
        description: invoice.description || 'Invoice',
+        provider: invoiceProviderLabel(invoice),
        amount: formatMoneyCents(
          invoice.amount_paid || invoice.amount_due,
          invoice.currency
@@ -325,6 +366,12 @@ const BillingSection = (): JSX.Element => {
      key: `payment-${payment.id}`,
      date: payment.paid_at || payment.created,
      description: 'Payment',
+      provider:
+        (payment.provider || '').toLowerCase() === 'revenuecat'
+          ? 'Store'
+          : (payment.provider || '').toLowerCase() === 'stripe'
+            ? 'Stripe'
+            : payment.provider || '—',
      amount: formatMoneyCents(payment.amount, payment.currency),
      status: humanizeStatus(payment.status),
      url: '',
@@ -333,11 +380,12 @@ const BillingSection = (): JSX.Element => {

  const openPortal = async (intent: PortalIntent) => {
    setActionError('');
+    setActionNotice('');
    setPortalLoading(true);
    try {
      const returnUrl = `${window.location.origin}/account/`;
      const response = await axiosInstance.post<{ portal_url: string }>(
-        '/finance/portal/',
+        '/monetization/portal/',
        { return_url: returnUrl }
      );
      const portalUrl = response.data?.portal_url;
@@ -356,8 +404,55 @@ const BillingSection = (): JSX.Element => {
    }
  };

-  const handleStartCheckout = async (planSlug?: string, source = 'account_billing') => {
+  const handleNativePurchase = async (planSlug?: string, source = 'account_billing') => {
    setActionError('');
+    setActionNotice('');
+    setCheckoutLoadingSlug(planSlug || '__default__');
+    try {
+      trackEvent(AnalyticsEvents.CHECKOUT_STARTED, {
+        source,
+        ...(planSlug ? { plan_slug: planSlug } : {}),
+      });
+      await purchasePlan(planSlug);
+      setActionNotice(
+        'Purchase submitted. Entitlements update after the store confirms — tap Refresh shortly.'
+      );
+      await loadBilling();
+    } catch (error: unknown) {
+      if (isPurchaseCancelledError(error)) {
+        setActionNotice('Purchase cancelled.');
+        return;
+      }
+      setActionError(
+        apiErrorMessage(error, 'Store purchase failed. Try again or Restore purchases.')
+      );
+    } finally {
+      setCheckoutLoadingSlug(null);
+    }
+  };
+
+  const handleRestore = async () => {
+    setActionError('');
+    setActionNotice('');
+    setRestoreLoading(true);
+    try {
+      await restorePurchases();
+      setActionNotice('Purchases restored. Refreshing billing…');
+      await loadBilling();
+    } catch (error: unknown) {
+      setActionError(apiErrorMessage(error, 'Could not restore purchases. Try again.'));
+    } finally {
+      setRestoreLoading(false);
+    }
+  };
+
+  const handleStartCheckout = async (planSlug?: string, source = 'account_billing') => {
+    if (native) {
+      await handleNativePurchase(planSlug, source);
+      return;
+    }
+    setActionError('');
+    setActionNotice('');
    setCheckoutLoadingSlug(planSlug || '__default__');
    try {
      const { success_url, cancel_url } = checkoutReturnUrls();
@@ -366,7 +461,7 @@ const BillingSection = (): JSX.Element => {
        ...(planSlug ? { plan_slug: planSlug } : {}),
      });
      const response = await axiosInstance.post<{ checkout_url: string }>(
-        '/finance/checkout/',
+        '/monetization/checkout/',
        {
          success_url,
          cancel_url,
@@ -395,6 +490,10 @@ const BillingSection = (): JSX.Element => {
      setShowPlanPicker(true);
      return;
    }
+    if (native && (storeSub || showStoreManage)) {
+      void handleNativePurchase(undefined, 'account_upgrade');
+      return;
+    }
    void openPortal('upgrade');
  };

@@ -405,10 +504,24 @@ const BillingSection = (): JSX.Element => {
      setShowPlanPicker(true);
      return;
    }
+    if (native && (storeSub || showStoreManage)) {
+      setActionNotice(
+        `Change or cancel your plan in ${storeLabel} subscription settings.`
+      );
+      return;
+    }
    void openPortal('change');
  };

  const handleConfirmCancel = async () => {
+    if (native && (storeSub || showStoreManage) && !showStripeManage) {
+      trackEvent(AnalyticsEvents.SUBSCRIPTION_CANCEL_STARTED, { source: 'store' });
+      setCancelConfirmOpen(false);
+      setActionNotice(
+        `Open ${storeLabel} → Subscriptions to cancel. Access usually continues until the period end.`
+      );
+      return;
+    }
    trackEvent(AnalyticsEvents.SUBSCRIPTION_CANCEL_STARTED, { source: 'portal' });
    setCancelConfirmOpen(false);
    await openPortal('cancel');
@@ -422,7 +535,6 @@ const BillingSection = (): JSX.Element => {
        source: 'plan_picker',
        plan_slug: plan.slug,
      });
-      // New higher tier via Checkout when selectable; portal otherwise.
      await handleStartCheckout(plan.slug, 'account_upgrade');
      return;
    }
@@ -430,7 +542,12 @@ const BillingSection = (): JSX.Element => {
      source: 'plan_picker',
      plan_slug: plan.slug,
    });
-    // Existing subscribers change plans in the Stripe portal (proration / PCI).
+    if (native && (storeSub || showStoreManage) && !showStripeManage) {
+      setShowPlanPicker(false);
+      await handleNativePurchase(plan.slug, 'account_change');
+      return;
+    }
+    // Existing Stripe subscribers change plans in the portal (proration / PCI).
    setShowPlanPicker(false);
    await openPortal('change');
  };
@@ -525,7 +642,7 @@ const BillingSection = (): JSX.Element => {

        {!loading && !listError && (
          <ButtonRow>
-            {hasPortalAccess && !complimentary ? (
+            {showStripeManage ? (
              <>
                <StyledButton
                  type="button"
@@ -564,14 +681,74 @@ const BillingSection = (): JSX.Element => {
                Complimentary access — no payment required. Plan changes and
                cancellation are not available for this account.
              </BodyText>
+            ) : showStoreManage ? (
+              <>
+                <StyledButton
+                  type="button"
+                  onClick={handleUpgradeClick}
+                  disabled={Boolean(checkoutLoadingSlug) || restoreLoading}
+                >
+                  Upgrade
+                </StyledButton>
+                <SecondaryButton
+                  type="button"
+                  onClick={handleChangePlanClick}
+                  disabled={Boolean(checkoutLoadingSlug) || restoreLoading}
+                >
+                  Change plan
+                </SecondaryButton>
+                {!subscription?.cancel_at_period_end &&
+                subscription?.status !== 'canceled' ? (
+                  <DangerButton
+                    type="button"
+                    onClick={() => setCancelConfirmOpen(true)}
+                    disabled={Boolean(checkoutLoadingSlug)}
+                  >
+                    Cancel
+                  </DangerButton>
+                ) : null}
+                <SecondaryButton
+                  type="button"
+                  onClick={() =>
+                    setActionNotice(
+                      `Manage billing in ${storeLabel} → Subscriptions. Changes sync here after refresh.`
+                    )
+                  }
+                  data-testid="store-manage-hint"
+                >
+                  Manage in {storeLabel}
+                </SecondaryButton>
+                {native ? (
+                  <SecondaryButton
+                    type="button"
+                    onClick={handleRestore}
+                    disabled={restoreLoading || Boolean(checkoutLoadingSlug)}
+                    data-testid="restore-purchases"
+                  >
+                    {restoreLoading ? 'Restoring…' : 'Restore purchases'}
+                  </SecondaryButton>
+                ) : null}
+              </>
            ) : (
-              <StyledButton
-                type="button"
-                onClick={() => handleStartCheckout()}
-                disabled={Boolean(checkoutLoadingSlug)}
-              >
-                {checkoutLoadingSlug ? 'Starting…' : 'Complete payment'}
-              </StyledButton>
+              <>
+                <StyledButton
+                  type="button"
+                  onClick={() => handleStartCheckout()}
+                  disabled={Boolean(checkoutLoadingSlug) || restoreLoading}
+                >
+                  {checkoutLoadingSlug ? 'Starting…' : 'Complete payment'}
+                </StyledButton>
+                {native ? (
+                  <SecondaryButton
+                    type="button"
+                    onClick={handleRestore}
+                    disabled={restoreLoading || Boolean(checkoutLoadingSlug)}
+                    data-testid="restore-purchases"
+                  >
+                    {restoreLoading ? 'Restoring…' : 'Restore purchases'}
+                  </SecondaryButton>
+                ) : null}
+              </>
            )}
            <SecondaryButton type="button" onClick={loadBilling} disabled={loading}>
              Refresh
@@ -583,8 +760,12 @@ const BillingSection = (): JSX.Element => {
          <div data-testid="plan-picker">
            <BodyText style={{ marginTop: '1.25rem', marginBottom: 0 }}>
              {planPickerMode === 'upgrade'
-                ? 'Choose a higher plan. Checkout opens securely in Stripe.'
-                : 'Select another plan, then confirm the change in the Stripe customer portal (price and quotas update there).'}
+                ? native && !showStripeManage
+                  ? 'Choose a higher plan. Purchase completes in the app store.'
+                  : 'Choose a higher plan. Checkout opens securely in Stripe.'
+                : native && !showStripeManage
+                  ? 'Select another plan to purchase via the app store.'
+                  : 'Select another plan, then confirm the change in the Stripe customer portal (price and quotas update there).'}
            </BodyText>
            <PlanList>
              {pickerPlans.map((plan) => (
@@ -624,6 +805,9 @@ const BillingSection = (): JSX.Element => {
          </div>
        ) : null}

+        {actionNotice ? (
+          <NoticeText data-testid="billing-action-notice">{actionNotice}</NoticeText>
+        ) : null}
        {actionError ? <ErrorText role="alert">{actionError}</ErrorText> : null}
      </GlassCard>

@@ -641,6 +825,7 @@ const BillingSection = (): JSX.Element => {
              <thead>
                <tr>
                  <Th>Date</Th>
+                  <Th>Provider</Th>
                  <Th>Description</Th>
                  <Th>Amount</Th>
                  <Th>Status</Th>
@@ -651,6 +836,9 @@ const BillingSection = (): JSX.Element => {
                {historyRows.map((row) => (
                  <tr key={row.key}>
                    <Td>{formatBillingDate(row.date)}</Td>
+                    <Td>
+                      <ProviderBadge>{row.provider}</ProviderBadge>
+                    </Td>
                    <Td>{row.description}</Td>
                    <Td>{row.amount}</Td>
                    <Td>{row.status}</Td>
@@ -685,9 +873,9 @@ const BillingSection = (): JSX.Element => {
          >
            <ModalTitle id="cancel-subscription-title">Cancel subscription?</ModalTitle>
            <BodyText>
-              You will finish canceling in the Stripe customer portal. Access typically
-              continues until the end of the current billing period
-              {periodEndLabel !== '—' ? ` (${periodEndLabel})` : ''}.
+              {native && (storeSub || showStoreManage) && !showStripeManage
+                ? `You will cancel in ${storeLabel} subscription settings. Access typically continues until the end of the current billing period${periodEndLabel !== '—' ? ` (${periodEndLabel})` : ''}.`
+                : `You will finish canceling in the Stripe customer portal. Access typically continues until the end of the current billing period${periodEndLabel !== '—' ? ` (${periodEndLabel})` : ''}.`}
            </BodyText>
            <ButtonRow>
              <DangerButton
@@ -695,7 +883,11 @@ const BillingSection = (): JSX.Element => {
                onClick={handleConfirmCancel}
                disabled={portalLoading}
              >
-                {portalLoading ? 'Opening…' : 'Continue to cancel'}
+                {native && (storeSub || showStoreManage) && !showStripeManage
+                  ? 'Got it'
+                  : portalLoading
+                    ? 'Opening…'
+                    : 'Continue to cancel'}
              </DangerButton>
              <SecondaryButton
                type="button"
@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+import ConversationDetailCard, {
+  injectCitationMarkers,
+} from './ConversationDetailCard';
+
+const theme = {
+  main: '#336699',
+  focus: '#224466',
+  darkMode: true,
+  colors: {
+    text: '#ffffff',
+    cardBackground: 'rgba(0,0,0,0.3)',
+    cardBorder: 'rgba(255,255,255,0.1)',
+  },
+};
+
+const renderCard = (props: React.ComponentProps<typeof ConversationDetailCard>) =>
+  render(
+    <MemoryRouter>
+      <ThemeProvider theme={theme as never}>
+        <ConversationDetailCard {...props} />
+      </ThemeProvider>
+    </MemoryRouter>,
+  );
+
+describe('ConversationDetailCard citations (#98)', () => {
+  it('injects citation markers outside code fences', () => {
+    const md = 'See [1] and [2, 3]\n\n```\n[9]\n```';
+    const out = injectCitationMarkers(md);
+    expect(out).toContain('<citation indices="1"></citation>');
+    expect(out).toContain('<citation indices="2,3"></citation>');
+    expect(out).toContain('```\n[9]\n```');
+  });
+
+  it('does not render Sources list card', () => {
+    renderCard({
+      message: 'Answer with [1]',
+      user_created: false,
+      citations: [
+        {
+          index: 1,
+          title: 'Example Source',
+          url: 'https://example.com/a',
+          published_at: '2026-07-03',
+        },
+      ],
+    });
+    expect(screen.queryByLabelText('Sources')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Source 1' })).toBeInTheDocument();
+  });
+
+  it('opens citation URL in a new tab when inline marker clicked', async () => {
+    const user = userEvent.setup();
+    const openSpy = jest.spyOn(window, 'open').mockImplementation(() => null);
+    renderCard({
+      message: 'See [1]',
+      user_created: false,
+      citations: [
+        { index: 1, title: 'Src', url: 'https://example.com', published_at: null },
+      ],
+    });
+    await user.click(screen.getByRole('button', { name: 'Source 1' }));
+    expect(openSpy).toHaveBeenCalledWith(
+      'https://example.com',
+      '_blank',
+      'noopener,noreferrer',
+    );
+    openSpy.mockRestore();
+  });
+});
@@ -116,4 +116,34 @@ describe('ConversationDetailCard', () => {
    expect(agentBubble).not.toBeNull();
    expect(getComputedStyle(agentBubble!).color).toBe('rgb(255, 255, 255)');
  });
+
+  it('renders activity label instead of dots when stage is set (#96)', () => {
+    render(
+      <MemoryRouter>
+        <ThemeProvider theme={darkTheme as never}>
+          <ConversationDetailCard
+            message=""
+            user_created={false}
+            activityStage="searching"
+            activityLabel="Searching the web"
+            activityDetail="Taylor Swift wedding"
+          />
+        </ThemeProvider>
+      </MemoryRouter>,
+    );
+    expect(screen.getByText('Searching the web')).toBeInTheDocument();
+    expect(screen.getByText('Taylor Swift wedding')).toBeInTheDocument();
+    expect(screen.queryByTestId('activity-dots-fallback')).not.toBeInTheDocument();
+  });
+
+  it('falls back to dots when empty message has no activity stage (#96)', () => {
+    render(
+      <MemoryRouter>
+        <ThemeProvider theme={darkTheme as never}>
+          <ConversationDetailCard message="" user_created={false} />
+        </ThemeProvider>
+      </MemoryRouter>,
+    );
+    expect(screen.getByTestId('activity-dots-fallback')).toBeInTheDocument();
+  });
 });
@@ -1,8 +1,13 @@
-import React from "react";
-import Markdown from "markdown-to-jsx";
-import { Link } from "react-router-dom";
-import styled, { keyframes } from "styled-components";
-import { isRagFeatureNotAllowed, parseChatErrorPayload } from "../../utils/chatErrors";
+import React, { useCallback, useMemo } from 'react';
+import Markdown from 'markdown-to-jsx';
+import { Link } from 'react-router-dom';
+import styled, { keyframes } from 'styled-components';
+import { isRagFeatureNotAllowed, parseChatErrorPayload } from '../../utils/chatErrors';
+import type { ActivityHistoryEntry, Citation } from '../../utils/wsFrames';
+import type { PromptRating } from '../../utils/promptFeedback';
+import CustomPreBlock from '../CustomPreBlock/CustomPreBlock';
+import MessageActions from '../MessageActions/MessageActions';
+import ActivityIndicator from '../ActivityIndicator/ActivityIndicator';

 const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(10px); }
@@ -12,10 +17,16 @@ const fadeIn = keyframes`
 const MessageContainer = styled.div<{ $isUser: boolean }>`
  display: flex;
  flex-direction: column;
-  align-items: ${(props) => (props.$isUser ? "flex-end" : "flex-start")};
+  align-items: ${(props) => (props.$isUser ? 'flex-end' : 'flex-start')};
  margin-bottom: 1.5rem;
  width: 100%;
  animation: ${fadeIn} 0.3s ease-out;
+
+  &:hover [data-message-actions],
+  &:focus-within [data-message-actions] {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
 `;

 const Bubble = styled.div<{ $isUser: boolean }>`
@@ -28,33 +39,33 @@ const Bubble = styled.div<{ $isUser: boolean }>`
    props.$isUser
      ? `linear-gradient(135deg, ${props.theme.main} 0%, ${props.theme.focus} 100%)`
      : props.theme.darkMode
-        ? "rgba(255, 255, 255, 0.1)"
-        : "rgba(0, 0, 0, 0.06)"};
+        ? 'rgba(255, 255, 255, 0.1)'
+        : 'rgba(0, 0, 0, 0.06)'};
  color: ${(props) =>
-    props.$isUser || props.theme.darkMode ? "#fff" : props.theme.colors.text};
+    props.$isUser || props.theme.darkMode ? '#fff' : props.theme.colors.text};
  backdrop-filter: blur(10px);
  border: 1px solid ${(props) =>
    props.$isUser
      ? props.theme.darkMode
-        ? "rgba(255, 255, 255, 0.1)"
-        : "rgba(0, 0, 0, 0.1)"
+        ? 'rgba(255, 255, 255, 0.1)'
+        : 'rgba(0, 0, 0, 0.1)'
      : props.theme.darkMode
-        ? "rgba(255, 255, 255, 0.1)"
-        : "rgba(0, 0, 0, 0.08)"};
+        ? 'rgba(255, 255, 255, 0.1)'
+        : 'rgba(0, 0, 0, 0.08)'};
  box-shadow: ${(props) =>
    props.$isUser || props.theme.darkMode
-      ? "0 4px 15px rgba(0, 0, 0, 0.2)"
-      : "0 2px 10px rgba(0, 0, 0, 0.08)"};
+      ? '0 4px 15px rgba(0, 0, 0, 0.2)'
+      : '0 2px 10px rgba(0, 0, 0, 0.08)'};
  font-size: 1rem;
  line-height: 1.6;
-  border-bottom-right-radius: ${(props) => (props.$isUser ? "0.2rem" : "1.2rem")};
-  border-bottom-left-radius: ${(props) => (props.$isUser ? "1.2rem" : "0.2rem")};
+  border-bottom-right-radius: ${(props) => (props.$isUser ? '0.2rem' : '1.2rem')};
+  border-bottom-left-radius: ${(props) => (props.$isUser ? '1.2rem' : '0.2rem')};

  & pre {
    background: ${(props) =>
      props.$isUser || props.theme.darkMode
-        ? "rgba(0, 0, 0, 0.3)"
-        : "rgba(0, 0, 0, 0.06)"};
+        ? 'rgba(0, 0, 0, 0.3)'
+        : 'rgba(0, 0, 0, 0.06)'};
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
@@ -68,7 +79,7 @@ const Bubble = styled.div<{ $isUser: boolean }>`

  & a {
    color: ${(props) =>
-      props.$isUser || props.theme.darkMode ? "#a0c4ff" : props.theme.main};
+      props.$isUser || props.theme.darkMode ? '#a0c4ff' : props.theme.main};
    text-decoration: underline;
  }

@@ -84,30 +95,6 @@ const Bubble = styled.div<{ $isUser: boolean }>`
  }
 `;

-const LoadingDot = styled.div`
-  width: 8px;
-  height: 8px;
-  background: currentColor;
-  border-radius: 50%;
-  margin: 0 4px;
-  animation: bounce 1.4s infinite ease-in-out both;
-
-  &:nth-child(1) { animation-delay: -0.32s; }
-  &:nth-child(2) { animation-delay: -0.16s; }
-
-  @keyframes bounce {
-    0%, 80%, 100% { transform: scale(0); }
-    40% { transform: scale(1); }
-  }
-`;
-
-const LoadingContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-`;
-
 const UpgradeNotice = styled.div`
  display: flex;
  flex-direction: column;
@@ -129,9 +116,60 @@ const UpgradeLink = styled(Link)`
  }
 `;

+const CitationButton = styled.button`
+  display: inline;
+  margin: 0 0.1rem;
+  padding: 0 0.25rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: ${({ theme }) =>
+    theme.darkMode ? 'rgba(160, 196, 255, 0.2)' : 'rgba(51, 102, 153, 0.12)'};
+  color: ${({ theme }) => (theme.darkMode ? '#a0c4ff' : theme.main)};
+  font: inherit;
+  font-size: 0.85em;
+  font-weight: 600;
+  cursor: pointer;
+  vertical-align: baseline;
+
+  &:hover,
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.main};
+    outline-offset: 1px;
+  }
+`;
+
+/** Linkify [n] / [1, 2] outside fenced code blocks. */
+export function injectCitationMarkers(markdown: string): string {
+  const parts = markdown.split(/(```[\s\S]*?```)/g);
+  return parts
+    .map((part) => {
+      if (part.startsWith('```')) return part;
+      return part.replace(
+        /\[(\d+(?:\s*,\s*\d+)*)\]/g,
+        (_match, nums: string) =>
+          `<citation indices="${nums.replace(/\s+/g, '')}"></citation>`,
+      );
+    })
+    .join('');
+}
+
 type ConversationDetailCardProps = {
  message: string;
  user_created: boolean;
+  promptId?: number;
+  citations?: Citation[];
+  isStreaming?: boolean;
+  isLast?: boolean;
+  conversationTitle?: string;
+  createdTimestamp?: Date | string | null;
+  initialRating?: PromptRating | null;
+  onRatingChange?: (rating: PromptRating | null) => void;
+  /** Live activity status for the empty-message (streaming placeholder) bubble (#96). */
+  activityStage?: string | null;
+  activityLabel?: string | null;
+  activityDetail?: string | null;
+  activityHistory?: ActivityHistoryEntry[];
+  activityInterrupted?: boolean;
 };

 const MyPlot = ({ format, image }: { format: string; image: string }) => {
@@ -139,7 +177,7 @@ const MyPlot = ({ format, image }: { format: string; image: string }) => {
  return (
    <img
      src={imageSrc}
-      style={{ maxWidth: "100%", height: "auto", borderRadius: "8px", marginTop: "10px" }}
+      style={{ maxWidth: '100%', height: 'auto', borderRadius: '8px', marginTop: '10px' }}
      alt="plot"
    />
  );
@@ -147,7 +185,7 @@ const MyPlot = ({ format, image }: { format: string; image: string }) => {

 const MyError = ({ content }: { content: string }) => {
  return (
-    <span style={{ color: "#ff6b6b", fontWeight: "bold", display: "block", marginTop: "0.5rem" }}>
+    <span style={{ color: '#ff6b6b', fontWeight: 'bold', display: 'block', marginTop: '0.5rem' }}>
      Error: {content}
    </span>
  );
@@ -156,16 +194,70 @@ const MyError = ({ content }: { content: string }) => {
 const ConversationDetailCard = ({
  message,
  user_created,
+  promptId,
+  citations = [],
+  isStreaming = false,
+  isLast = false,
+  conversationTitle = 'conversation',
+  createdTimestamp = null,
+  initialRating = null,
+  onRatingChange,
+  activityStage = null,
+  activityLabel = null,
+  activityDetail = null,
+  activityHistory = [],
+  activityInterrupted = false,
 }: ConversationDetailCardProps): JSX.Element => {
+  const CitationMark = useCallback(
+    ({ indices }: { indices?: string }) => {
+      const list = (indices || '')
+        .split(',')
+        .map((n) => Number(n.trim()))
+        .filter((n) => !Number.isNaN(n));
+      if (!list.length) return null;
+      return (
+        <>
+          {list.map((index, i) => {
+            const citation = citations.find((c) => c.index === index);
+            return (
+              <CitationButton
+                key={`${index}-${i}`}
+                type="button"
+                aria-label={`Source ${index}`}
+                title={citation?.title || `Source ${index}`}
+                onClick={() => {
+                  if (citation?.url) {
+                    window.open(citation.url, '_blank', 'noopener,noreferrer');
+                  }
+                }}
+              >
+                [{index}]
+              </CitationButton>
+            );
+          })}
+        </>
+      );
+    },
+    [citations],
+  );
+
+  const displayMarkdown = useMemo(() => {
+    if (!message) return message;
+    if (!citations.length || user_created) return message;
+    return injectCitationMarkers(message);
+  }, [message, citations, user_created]);
+
  if (message.length === 0) {
    return (
      <MessageContainer $isUser={false}>
        <Bubble $isUser={false}>
-          <LoadingContainer>
-            <LoadingDot />
-            <LoadingDot />
-            <LoadingDot />
-          </LoadingContainer>
+          <ActivityIndicator
+            stage={activityStage}
+            label={activityLabel}
+            detail={activityDetail}
+            history={activityHistory}
+            interrupted={activityInterrupted}
+          />
        </Bubble>
      </MessageContainer>
    );
@@ -188,36 +280,45 @@ const ConversationDetailCard = ({
    );
  }

-  let contentToAdd = message;
+  let contentToAdd = displayMarkdown;
+  let rawForCopy = message;
  try {
    const parsedMessage = JSON.parse(message);
    if (
      parsedMessage &&
-      typeof parsedMessage === "object" &&
+      typeof parsedMessage === 'object' &&
      parsedMessage.type
    ) {
      switch (parsedMessage.type) {
-        case "text":
-          contentToAdd = parsedMessage.content;
+        case 'text':
+          rawForCopy = parsedMessage.content;
+          contentToAdd =
+            citations.length && !user_created
+              ? injectCitationMarkers(parsedMessage.content)
+              : parsedMessage.content;
          break;
-        case "plot":
+        case 'plot':
          contentToAdd = `<plot format="${parsedMessage.format}" image="${parsedMessage.image}"></plot>`;
+          rawForCopy = message;
          break;
-        case "error":
+        case 'error':
          contentToAdd = `<error content="${parsedMessage.content}"></error>`;
+          rawForCopy = message;
          break;
        default:
          break;
      }
    }
-  } catch { }
+  } catch {
+    /* plain markdown */
+  }

  return (
    <MessageContainer $isUser={user_created}>
      <Bubble $isUser={user_created}>
        <Markdown
          className="display-linebreak"
-          style={{ whiteSpace: "pre-line" }}
+          style={{ whiteSpace: 'pre-line' }}
          options={{
            overrides: {
              plot: {
@@ -226,12 +327,31 @@ const ConversationDetailCard = ({
              error: {
                component: MyError,
              },
+              pre: {
+                component: CustomPreBlock,
+              },
+              citation: {
+                component: CitationMark,
+              },
            },
          }}
        >
          {contentToAdd}
        </Markdown>
      </Bubble>
+
+      <MessageActions
+        promptId={promptId}
+        rawMarkdown={rawForCopy}
+        userCreated={user_created}
+        isStreaming={isStreaming}
+        isLast={isLast}
+        conversationTitle={conversationTitle}
+        createdTimestamp={createdTimestamp}
+        citations={citations}
+        initialRating={initialRating}
+        onRatingChange={onRatingChange}
+      />
    </MessageContainer>
  );
 };
@@ -1,25 +1,72 @@
-import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-import tsx from "react-syntax-highlighter/dist/cjs/languages/prism/tsx";
-import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import ContentCopy from '@mui/icons-material/ContentCopy';
+import Check from '@mui/icons-material/Check';
+import { IconButton, Tooltip } from '@mui/material';
+import { copyTextToClipboard } from '../../utils/clipboard';
+import { showToast } from '../../utils/toastBus';

-SyntaxHighlighter.registerLanguage("tsx", tsx);
+SyntaxHighlighter.registerLanguage('tsx', tsx);

-type CustomCodeBlock = {
-    children: string,
-    className: string
+const Wrapper = styled.div`
+  position: relative;
+  max-width: 100%;
+`;

-}
+const CopyBtn = styled(IconButton)`
+  && {
+    position: absolute;
+    top: 0.35rem;
+    right: 0.35rem;
+    z-index: 1;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.35);
+    padding: 0.25rem;

+    &:hover {
+      background: rgba(0, 0, 0, 0.55);
+    }
+  }
+`;

+type CustomCodeBlockProps = {
+  children: string;
+  className?: string;
+};

-const CustomCodeBlock = ({children, className}: CustomCodeBlock): JSX.Element => {
-    const language = className?.replace("lang-","");
-    return (
-        <SyntaxHighlighter language={language} style={oneDark}>
-            {children}
-        </SyntaxHighlighter>
-    )
-}
+const CustomCodeBlock = ({
+  children,
+  className,
+}: CustomCodeBlockProps): JSX.Element => {
+  const [copied, setCopied] = useState(false);
+  const language = className?.replace('lang-', '').replace('language-', '') || undefined;
+  const code = typeof children === 'string' ? children : String(children ?? '');
+
+  const handleCopy = async () => {
+    try {
+      await copyTextToClipboard(code.replace(/\n$/, ''));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      showToast('Could not copy code', 'error');
+    }
+  };
+
+  return (
+    <Wrapper>
+      <Tooltip title={copied ? 'Copied' : 'Copy code'}>
+        <CopyBtn aria-label="Copy code block" size="small" onClick={() => void handleCopy()}>
+          {copied ? <Check fontSize="inherit" /> : <ContentCopy fontSize="inherit" />}
+        </CopyBtn>
+      </Tooltip>
+      <SyntaxHighlighter language={language} style={oneDark}>
+        {code}
+      </SyntaxHighlighter>
+    </Wrapper>
+  );
+};

 export default CustomCodeBlock;
-
@@ -1,14 +1,22 @@
-import CustomCodeBlock from "../CustomCodeBlock/CustomCodeBlock"
+import CustomCodeBlock from '../CustomCodeBlock/CustomCodeBlock';

 type CustomPreBlockProps = {
-    children: JSX.Element | JSX.Element[]
-}
+  children: JSX.Element | JSX.Element[];
+};

-const CustomPreBlock = ({children, ...rest}: CustomPreBlockProps): JSX.Element => {
-    if ("type" in children && children["type"] === "code") {
-        return CustomCodeBlock({children: children["props"]["children"], className: children["props"]["className"] });
-    }
+const CustomPreBlock = ({ children, ...rest }: CustomPreBlockProps): JSX.Element => {
+  const child = Array.isArray(children) ? children[0] : children;
+  if (child && typeof child === 'object' && 'type' in child && child.type === 'code') {
+    return (
+      <CustomCodeBlock
+        className={(child.props as { className?: string }).className}
+      >
+        {(child.props as { children?: string }).children as string}
+      </CustomCodeBlock>
+    );
+  }
+
+  return <pre {...rest}>{children}</pre>;
+};

-    return <pre {...rest}>{children}</pre>
-}
 export default CustomPreBlock;
@@ -44,6 +44,10 @@ jest.mock('../../utils/analytics', () => ({
  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
 }));

+jest.mock('../../utils/revenueCat', () => ({
+  logOutRevenueCat: () => Promise.resolve(),
+}));
+
 const theme = {
  main: '#4a90e2',
  darkMode: true,
@@ -6,6 +6,7 @@ import { clearTokens, getRefreshToken } from '../../auth/tokenStorage';
 import { AccountContext } from '../../contexts/AccountContext';
 import { AuthContext } from '../../contexts/AuthContext';
 import { AnalyticsEvents, trackEvent } from '../../utils/analytics';
+import { logOutRevenueCat } from '../../utils/revenueCat';

 const GlassCard = styled.div`
  background: ${({ theme }) => theme.colors.cardBackground};
@@ -180,6 +181,7 @@ const DeleteAccountSection = (): JSX.Element => {
      applyAccessToken(null);
      setAuthentication(false);
      setAccount(undefined);
+      void Promise.resolve(logOutRevenueCat()).catch((err) => console.warn('RevenueCat logOut', err));
      navigate('/signin/');
    } catch (err: unknown) {
      trackEvent(AnalyticsEvents.ACCOUNT_DELETE_FAILED);
@@ -19,6 +19,10 @@ jest.mock('../../../axiosApi', () => ({
  applyAccessToken: jest.fn(),
 }));

+jest.mock('../../utils/revenueCat', () => ({
+  logOutRevenueCat: () => Promise.resolve(),
+}));
+
 const theme = {
  main: '#4a90e2',
  focus: '#224466',
@@ -82,7 +86,7 @@ describe('Header2 (#81 subscription-aware Documents nav link)', () => {

    renderHeader();

-    await waitFor(() => expect(mockGet).toHaveBeenCalledWith('/finance/subscription/'));
+    await waitFor(() => expect(mockGet).toHaveBeenCalledWith('/monetization/subscription/'));
    expect(screen.queryByText('Documents')).not.toBeInTheDocument();
  });

@@ -6,6 +6,7 @@ import { AccountContext } from '../../contexts/AccountContext';
 import { applyAccessToken, axiosInstance } from '../../../axiosApi';
 import { clearTokens, getRefreshToken } from '../../auth/tokenStorage';
 import { useSubscription } from '../../hooks/useSubscription';
+import { logOutRevenueCat } from '../../utils/revenueCat';
 import hesychiaMark from '../../assets/brand/hesychia-mark.png';

 const HeaderContainer = styled.header`
@@ -230,6 +231,7 @@ const Header2 = ({
      applyAccessToken(null);
      setAuthentication(false)
      setAccount(undefined);
+      void Promise.resolve(logOutRevenueCat()).catch((err) => console.warn('RevenueCat logOut', err));
      navigate('/signin/')
    } catch (e) {
      console.error(e);
@@ -0,0 +1,361 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import {
+  IconButton,
+  Tooltip,
+  Menu,
+  MenuItem,
+  Popover,
+  Chip,
+  TextField,
+  Button,
+  Stack,
+} from '@mui/material';
+import ContentCopy from '@mui/icons-material/ContentCopy';
+import Check from '@mui/icons-material/Check';
+import ThumbUp from '@mui/icons-material/ThumbUp';
+import ThumbUpOutlined from '@mui/icons-material/ThumbUpOutlined';
+import ThumbDown from '@mui/icons-material/ThumbDown';
+import ThumbDownOutlined from '@mui/icons-material/ThumbDownOutlined';
+import FileDownload from '@mui/icons-material/FileDownload';
+import { copyTextToClipboard } from '../../utils/clipboard';
+import { showToast } from '../../utils/toastBus';
+import {
+  clearPromptFeedback,
+  upsertPromptFeedback,
+  type PromptRating,
+} from '../../utils/promptFeedback';
+import {
+  exportChat,
+  type ExportFormat,
+  type ExportTurn,
+} from '../../utils/export/exportChat';
+import { AnalyticsEvents, trackEvent } from '../../utils/analytics';
+import type { Citation } from '../../utils/wsFrames';
+
+const DOWN_REASONS: { code: string; label: string }[] = [
+  { code: 'incorrect', label: 'Incorrect' },
+  { code: 'out_of_date', label: 'Out of date' },
+  { code: 'didnt_follow_instructions', label: "Didn't follow instructions" },
+  { code: 'unsafe', label: 'Unsafe' },
+  { code: 'other', label: 'Other' },
+];
+
+const ActionsRow = styled.div<{ $alwaysVisible: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  margin-top: 0.35rem;
+  min-height: 2rem;
+  max-width: 100%;
+  flex-wrap: wrap;
+  opacity: ${({ $alwaysVisible }) => ($alwaysVisible ? 1 : 0)};
+  pointer-events: ${({ $alwaysVisible }) => ($alwaysVisible ? 'auto' : 'none')};
+  transition: opacity 0.15s ease;
+
+  @media (hover: hover) and (pointer: fine) {
+    /* Desktop: revealed via parent :hover / :focus-within when not forced visible */
+  }
+
+  @media (hover: none), (pointer: coarse) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+`;
+
+const ActionIconButton = styled(IconButton)`
+  && {
+    color: ${({ theme }) => theme.colors.text};
+    opacity: 0.7;
+    padding: 0.35rem;
+
+    &:hover,
+    &:focus-visible {
+      opacity: 1;
+      background: ${({ theme }) =>
+        theme.darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'};
+    }
+
+    &.Mui-disabled {
+      opacity: 0.35;
+    }
+  }
+`;
+
+type MessageActionsProps = {
+  promptId?: number;
+  rawMarkdown: string;
+  userCreated: boolean;
+  isStreaming?: boolean;
+  isLast?: boolean;
+  conversationTitle: string;
+  createdTimestamp?: Date | string | null;
+  citations?: Citation[];
+  initialRating?: PromptRating | null;
+  onRatingChange?: (rating: PromptRating | null) => void;
+};
+
+const MessageActions = ({
+  promptId,
+  rawMarkdown,
+  userCreated,
+  isStreaming = false,
+  isLast = false,
+  conversationTitle,
+  createdTimestamp,
+  citations = [],
+  initialRating = null,
+  onRatingChange,
+}: MessageActionsProps): JSX.Element | null => {
+  const [copied, setCopied] = useState(false);
+  const [rating, setRating] = useState<PromptRating | null>(initialRating);
+  const [exportAnchor, setExportAnchor] = useState<null | HTMLElement>(null);
+  const [reasonAnchor, setReasonAnchor] = useState<null | HTMLElement>(null);
+  const [reasonCode, setReasonCode] = useState<string | null>(null);
+  const [reasonComment, setReasonComment] = useState('');
+  const [focused, setFocused] = useState(false);
+  const copyTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const rowRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    setRating(initialRating);
+  }, [initialRating, promptId]);
+
+  useEffect(() => {
+    return () => {
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+    };
+  }, []);
+
+  if (isStreaming) return null;
+
+  const alwaysVisible = isLast || focused || Boolean(exportAnchor) || Boolean(reasonAnchor);
+
+  const handleCopy = async () => {
+    try {
+      await copyTextToClipboard(rawMarkdown);
+      setCopied(true);
+      trackEvent(AnalyticsEvents.MESSAGE_COPIED, {
+        role: userCreated ? 'user' : 'assistant',
+      });
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+      copyTimer.current = setTimeout(() => setCopied(false), 2000);
+    } catch {
+      showToast('Could not copy message', 'error');
+    }
+  };
+
+  const applyRating = async (next: PromptRating | null) => {
+    if (!promptId) {
+      showToast('Rating unavailable until message is saved', 'info');
+      return;
+    }
+    const prev = rating;
+    setRating(next);
+    onRatingChange?.(next);
+    try {
+      if (next == null) {
+        await clearPromptFeedback(promptId);
+      } else {
+        await upsertPromptFeedback(promptId, { rating: next });
+      }
+      trackEvent(AnalyticsEvents.MESSAGE_RATED, {
+        rating: next ?? 'cleared',
+      });
+    } catch {
+      setRating(prev);
+      onRatingChange?.(prev);
+      showToast('Could not save rating', 'error');
+    }
+  };
+
+  const handleThumb = async (
+    next: PromptRating,
+    event: React.MouseEvent<HTMLElement>,
+  ) => {
+    if (rating === next) {
+      await applyRating(null);
+      return;
+    }
+    await applyRating(next);
+    if (next === 'down') {
+      setReasonAnchor(event.currentTarget);
+      setReasonCode(null);
+      setReasonComment('');
+    }
+  };
+
+  const submitReason = async () => {
+    if (!promptId || rating !== 'down') {
+      setReasonAnchor(null);
+      return;
+    }
+    try {
+      await upsertPromptFeedback(promptId, {
+        rating: 'down',
+        reason: reasonCode ?? undefined,
+        comment: reasonComment.trim() || undefined,
+      });
+      trackEvent(AnalyticsEvents.MESSAGE_RATING_REASON, {
+        reason: reasonCode ?? 'none',
+        hasComment: Boolean(reasonComment.trim()),
+      });
+    } catch {
+      showToast('Could not save feedback reason', 'error');
+    } finally {
+      setReasonAnchor(null);
+    }
+  };
+
+  const handleExport = async (format: ExportFormat) => {
+    setExportAnchor(null);
+    const turn: ExportTurn = {
+      role: userCreated ? 'user' : 'assistant',
+      message: rawMarkdown,
+      timestamp: createdTimestamp ?? null,
+      citations: userCreated ? [] : citations,
+    };
+    try {
+      await exportChat({
+        format,
+        scope: 'message',
+        title: conversationTitle,
+        turns: [turn],
+      });
+      trackEvent(AnalyticsEvents.MESSAGE_EXPORTED, {
+        format,
+        scope: 'message',
+      });
+    } catch (err) {
+      console.error(err);
+      showToast('Export failed', 'error');
+    }
+  };
+
+  return (
+    <ActionsRow
+      ref={rowRef}
+      $alwaysVisible={alwaysVisible}
+      data-message-actions
+      onFocusCapture={() => setFocused(true)}
+      onBlurCapture={(e) => {
+        if (!rowRef.current?.contains(e.relatedTarget as Node)) {
+          setFocused(false);
+        }
+      }}
+    >
+      <Tooltip title={copied ? 'Copied' : 'Copy markdown'}>
+        <ActionIconButton
+          aria-label="Copy message as markdown"
+          size="small"
+          onClick={() => void handleCopy()}
+        >
+          {copied ? <Check fontSize="small" /> : <ContentCopy fontSize="small" />}
+        </ActionIconButton>
+      </Tooltip>
+
+      {!userCreated && (
+        <>
+          <Tooltip title="Thumbs up">
+            <span>
+              <ActionIconButton
+                aria-label="Thumbs up"
+                size="small"
+                disabled={!promptId}
+                onClick={(e) => void handleThumb('up', e)}
+              >
+                {rating === 'up' ? (
+                  <ThumbUp fontSize="small" />
+                ) : (
+                  <ThumbUpOutlined fontSize="small" />
+                )}
+              </ActionIconButton>
+            </span>
+          </Tooltip>
+          <Tooltip title="Thumbs down">
+            <span>
+              <ActionIconButton
+                aria-label="Thumbs down"
+                size="small"
+                disabled={!promptId}
+                onClick={(e) => void handleThumb('down', e)}
+              >
+                {rating === 'down' ? (
+                  <ThumbDown fontSize="small" />
+                ) : (
+                  <ThumbDownOutlined fontSize="small" />
+                )}
+              </ActionIconButton>
+            </span>
+          </Tooltip>
+        </>
+      )}
+
+      <Tooltip title="Export">
+        <ActionIconButton
+          aria-label="Export message"
+          size="small"
+          onClick={(e) => setExportAnchor(e.currentTarget)}
+        >
+          <FileDownload fontSize="small" />
+        </ActionIconButton>
+      </Tooltip>
+
+      <Menu
+        anchorEl={exportAnchor}
+        open={Boolean(exportAnchor)}
+        onClose={() => setExportAnchor(null)}
+      >
+        {(
+          [
+            ['pdf', 'PDF'],
+            ['csv', 'CSV'],
+            ['xlsx', 'Excel (.xlsx)'],
+            ['txt', 'Plain text'],
+          ] as [ExportFormat, string][]
+        ).map(([format, label]) => (
+          <MenuItem key={format} onClick={() => void handleExport(format)}>
+            {label}
+          </MenuItem>
+        ))}
+      </Menu>
+
+      <Popover
+        open={Boolean(reasonAnchor)}
+        anchorEl={reasonAnchor}
+        onClose={() => setReasonAnchor(null)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      >
+        <Stack spacing={1.25} sx={{ p: 1.5, width: 280, maxWidth: '90vw' }}>
+          <div style={{ fontSize: '0.85rem', fontWeight: 600 }}>
+            What went wrong? (optional)
+          </div>
+          <Stack direction="row" flexWrap="wrap" gap={0.75}>
+            {DOWN_REASONS.map((reason) => (
+              <Chip
+                key={reason.code}
+                label={reason.label}
+                size="small"
+                color={reasonCode === reason.code ? 'primary' : 'default'}
+                onClick={() => setReasonCode(reason.code)}
+              />
+            ))}
+          </Stack>
+          <TextField
+            size="small"
+            multiline
+            minRows={2}
+            placeholder="Additional details (optional)"
+            value={reasonComment}
+            onChange={(e) => setReasonComment(e.target.value)}
+          />
+          <Button variant="contained" size="small" onClick={() => void submitReason()}>
+            Done
+          </Button>
+        </Stack>
+      </Popover>
+    </ActionsRow>
+  );
+};
+
+export default MessageActions;
@@ -1,5 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
+import Tooltip from '@mui/material/Tooltip';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
 import {
  useMaterialUIController,
  setDarkMode,
@@ -48,6 +50,16 @@ const SettingLabel = styled.span`
  font-size: 1.1rem;
  color: ${({ theme }) => theme.colors.text};
  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+`;
+
+const InfoIcon = styled(InfoOutlined)`
+  font-size: 1rem !important;
+  opacity: 0.7;
+  cursor: help;
+  vertical-align: middle;
 `;

 const ToggleSwitch = styled.label`
@@ -93,6 +105,11 @@ const Checkbox = styled.input`
  &:checked + ${Slider}:before {
    transform: translateX(26px);
  }
+
+  &:disabled + ${Slider} {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;

 const ColorPickerContainer = styled.div`
@@ -115,6 +132,23 @@ const ColorButton = styled.button<{ color: string; isSelected: boolean }>`
  }
 `;

+const ErrorText = styled.p`
+  color: #ff6b6b;
+  margin: 0.75rem 0 0 0;
+  font-size: 0.95rem;
+`;
+
+const CONTEXT_TOOLTIP =
+  'This will use previous conversations to better customize the experience.';
+
+function prefsErrorMessage(error: unknown, fallback: string): string {
+  const axiosError = error as {
+    response?: { data?: { detail?: string } };
+    message?: string;
+  };
+  return axiosError.response?.data?.detail || axiosError.message || fallback;
+}
+
 type PreferencesValues = {
  order: boolean;
 }
@@ -128,6 +162,10 @@ const ThemeSettingsCard = (): JSX.Element => {
  const themeColors = Object.keys(palettes);

  const [order, setOrder] = useState<boolean>(true);
+  const [useConversationContext, setUseConversationContext] = useState<boolean>(false);
+  const [prefsLoading, setPrefsLoading] = useState<boolean>(true);
+  const [contextSaving, setContextSaving] = useState<boolean>(false);
+  const [prefsError, setPrefsError] = useState<string>('');
  const { updatePreferences } = useContext(PreferenceContext);

  const handleConversationOrder = async ({ order }: PreferencesValues): Promise<void> => {
@@ -141,17 +179,50 @@ const ThemeSettingsCard = (): JSX.Element => {
    }
  }

-  async function getConversationOrder() {
+  async function getConversationPreferences() {
+    setPrefsLoading(true);
+    setPrefsError('');
    try {
-      const { data, }: AxiosResponse<PreferencesType> = await axiosInstance.get(`/conversation_preferences`);
+      const { data }: AxiosResponse<PreferencesType> = await axiosInstance.get(
+        `/conversation_preferences`
+      );
      setOrder(data.order);
+      setUseConversationContext(Boolean(data.use_conversation_context));
    } catch (error) {
-      console.log(error)
+      setPrefsError(
+        prefsErrorMessage(error, 'Could not load account preferences.')
+      );
+    } finally {
+      setPrefsLoading(false);
    }
  }

+  const handleConversationContext = async (enabled: boolean): Promise<void> => {
+    const previous = useConversationContext;
+    setUseConversationContext(enabled);
+    setContextSaving(true);
+    setPrefsError('');
+    try {
+      const { data }: AxiosResponse<PreferencesType> = await axiosInstance.post(
+        '/conversation_preferences',
+        { use_conversation_context: enabled }
+      );
+      setUseConversationContext(Boolean(data.use_conversation_context));
+    } catch (error) {
+      setUseConversationContext(previous);
+      setPrefsError(
+        prefsErrorMessage(
+          error,
+          'Could not update conversation context setting. Try again.'
+        )
+      );
+    } finally {
+      setContextSaving(false);
+    }
+  };
+
  useEffect(() => {
-    getConversationOrder();
+    getConversationPreferences();
  }, [])

  const handleDarkMode = () => setDarkMode(dispatch, !darkMode);
@@ -193,6 +264,7 @@ const ThemeSettingsCard = (): JSX.Element => {
          <Checkbox
            type="checkbox"
            checked={order}
+            disabled={prefsLoading}
            onChange={() => {
              setOrder(!order);
              handleConversationOrder({ order: !order })
@@ -202,6 +274,30 @@ const ThemeSettingsCard = (): JSX.Element => {
        </ToggleSwitch>
      </SettingRow>

+      <SettingRow>
+        <SettingLabel>
+          Use previous conversations
+          <Tooltip title={CONTEXT_TOOLTIP}>
+            <span>
+              <InfoIcon aria-label={CONTEXT_TOOLTIP} />
+            </span>
+          </Tooltip>
+        </SettingLabel>
+        <ToggleSwitch>
+          <Checkbox
+            type="checkbox"
+            checked={useConversationContext}
+            disabled={prefsLoading || contextSaving}
+            onChange={() => {
+              handleConversationContext(!useConversationContext);
+            }}
+          />
+          <Slider />
+        </ToggleSwitch>
+      </SettingRow>
+
+      {prefsError ? <ErrorText role="alert">{prefsError}</ErrorText> : null}
+
    </GlassCard>
  );
 };
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { Snackbar, Alert } from '@mui/material';
+import { subscribeToast } from '../../utils/toastBus';
+
+/**
+ * Global snackbar host for copy/export/feedback errors (#97).
+ */
+const ToastHost = (): JSX.Element => {
+  const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState('');
+  const [severity, setSeverity] = useState<'error' | 'success' | 'info'>('info');
+
+  useEffect(() => {
+    return subscribeToast((nextMessage, nextSeverity) => {
+      setMessage(nextMessage);
+      setSeverity(nextSeverity);
+      setOpen(true);
+    });
+  }, []);
+
+  return (
+    <Snackbar
+      open={open}
+      autoHideDuration={4000}
+      onClose={() => setOpen(false)}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+    >
+      <Alert
+        onClose={() => setOpen(false)}
+        severity={severity}
+        variant="filled"
+        sx={{ width: '100%' }}
+      >
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default ToastHost;
@@ -174,8 +174,8 @@ const UsageSummaryCard = (): JSX.Element => {
    setLoading(true);
    try {
      const [subscriptionResponse, invoiceResponse] = await Promise.all([
-        axiosInstance.get<SubscriptionMe>('/finance/subscription/'),
-        axiosInstance.get<FinanceInvoice[]>('/finance/invoices/'),
+        axiosInstance.get<SubscriptionMe>('/monetization/subscription/'),
+        axiosInstance.get<FinanceInvoice[]>('/monetization/invoices/'),
      ]);
      setSubscription(subscriptionResponse.data || null);
      setHasPortalAccess(
@@ -231,7 +231,7 @@ const UsageSummaryCard = (): JSX.Element => {
    try {
      const returnUrl = `${window.location.origin}/account/`;
      const response = await axiosInstance.post<{ portal_url: string }>(
-        '/finance/portal/',
+        '/monetization/portal/',
        { return_url: returnUrl }
      );
      if (response.data?.portal_url) {
@@ -3,6 +3,7 @@ import { Account, AccountType } from "../data";
 import { AuthContext } from "./AuthContext";
 import { AxiosResponse } from "axios";
 import { axiosInstance } from "../../axiosApi";
+import { logInRevenueCat } from "../utils/revenueCat";

 type AccountProviderProps ={
    children? : ReactNode;
@@ -28,6 +29,7 @@ const AccountProvider = ({children}: AccountProviderProps) => {
        const get_user_response: AxiosResponse<AccountType> = await axiosInstance.get('/user/get/')          

            const account: Account = new Account({
+                id: get_user_response.data.id,
                email: get_user_response.data.email,
                first_name: get_user_response.data.first_name,
                last_name: get_user_response.data.last_name,
@@ -43,6 +45,9 @@ const AccountProvider = ({children}: AccountProviderProps) => {
                
            });
            setAccount(account);
+            void Promise.resolve(logInRevenueCat(account)).catch((err) =>
+                console.warn('RevenueCat logIn', err)
+            );

    }

@@ -0,0 +1,204 @@
+import React, { useContext } from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { MessageContext, MessageProvider } from './MessageContext';
+import { WebSocketContext } from './WebSocketContext';
+import { AccountContext } from './AccountContext';
+import { ConversationContext } from './ConversationContext';
+import { trackEvent } from '../utils/analytics';
+
+jest.mock('../../axiosApi', () => ({
+  axiosInstance: {
+    get: jest.fn().mockResolvedValue({ data: [] }),
+  },
+}));
+
+jest.mock('../utils/analytics', () => ({
+  AnalyticsEvents: {
+    CONVERSATION_CREATED: 'Conversation Created',
+    ACTIVITY_STAGE_COMPLETED: 'Activity Stage Completed',
+  },
+  trackEvent: jest.fn(),
+}));
+
+type Capture = { callback: ((message: string) => void) | null };
+
+const buildHarness = () => {
+  const capture: Capture = { callback: null };
+  const subscribe = (_channel: string, cb: (message: string) => void) => {
+    capture.callback = cb;
+  };
+  const unsubscribe = jest.fn();
+
+  const Harness = ({ reconnectGeneration = 0 }: { reconnectGeneration?: number }) => (
+    <AccountContext.Provider
+      value={{ account: { email: 'test@example.com' } as never, setAccount: () => {} }}
+    >
+      <ConversationContext.Provider
+        value={{
+          conversations: [],
+          setConversations: () => {},
+          selectedConversation: 1,
+          setSelectedConversation: () => {},
+          deleteConversation: () => {},
+        }}
+      >
+        <WebSocketContext.Provider
+          value={[subscribe, unsubscribe, null, jest.fn(), true, 'CONNECTED', reconnectGeneration] as never}
+        >
+          <MessageProvider>
+            <Probe />
+          </MessageProvider>
+        </WebSocketContext.Provider>
+      </ConversationContext.Provider>
+    </AccountContext.Provider>
+  );
+
+  return { Harness, capture };
+};
+
+const Probe = () => {
+  const ctx = useContext(MessageContext);
+  return (
+    <div>
+      <span data-testid="stage">{ctx.activityStage ?? 'null'}</span>
+      <span data-testid="label">{ctx.activityLabel ?? 'null'}</span>
+      <span data-testid="detail">{ctx.activityDetail ?? 'null'}</span>
+      <span data-testid="history-count">{ctx.activityHistory.length}</span>
+      <span data-testid="stream-interrupted">{ctx.streamInterrupted ? 'yes' : 'no'}</span>
+      <button type="button" onClick={() => ctx.clearActivity()}>
+        clear
+      </button>
+    </div>
+  );
+};
+
+const send = (capture: Capture, message: string) => {
+  act(() => {
+    capture.callback?.(message);
+  });
+};
+
+const sendStatus = (
+  capture: Capture,
+  stage: string,
+  label: string,
+  detail: string | null = null,
+) => {
+  send(
+    capture,
+    JSON.stringify({ v: 1, type: 'status', data: { stage, label, detail } }),
+  );
+};
+
+describe('MessageContext activity status (#96)', () => {
+  beforeEach(() => {
+    (trackEvent as jest.Mock).mockClear();
+  });
+
+  it('applies the first status frame as the current stage/label/detail', async () => {
+    const { Harness, capture } = buildHarness();
+    render(<Harness />);
+    await act(async () => {});
+
+    sendStatus(capture, 'searching', 'Searching the web', 'query: cats');
+
+    expect(screen.getByTestId('stage')).toHaveTextContent('searching');
+    expect(screen.getByTestId('label')).toHaveTextContent('Searching the web');
+    expect(screen.getByTestId('detail')).toHaveTextContent('query: cats');
+    expect(screen.getByTestId('history-count')).toHaveTextContent('0');
+  });
+
+  it('rolls a completed stage into history and tracks ACTIVITY_STAGE_COMPLETED (no label/detail text)', async () => {
+    const { Harness, capture } = buildHarness();
+    render(<Harness />);
+    await act(async () => {});
+
+    sendStatus(capture, 'searching', 'Searching the web');
+    sendStatus(capture, 'reading', 'Reading sources');
+
+    expect(screen.getByTestId('stage')).toHaveTextContent('reading');
+    expect(screen.getByTestId('label')).toHaveTextContent('Reading sources');
+    expect(screen.getByTestId('history-count')).toHaveTextContent('1');
+
+    expect(trackEvent).toHaveBeenCalledWith(
+      'Activity Stage Completed',
+      expect.objectContaining({ stage: 'searching', durationMs: expect.any(Number) }),
+    );
+    const call = (trackEvent as jest.Mock).mock.calls.find(
+      ([name]) => name === 'Activity Stage Completed',
+    );
+    expect(Object.keys(call![1])).toEqual(['stage', 'durationMs']);
+  });
+
+  it('clears the label display (but not the stage) once the writing stage starts', async () => {
+    const { Harness, capture } = buildHarness();
+    render(<Harness />);
+    await act(async () => {});
+
+    sendStatus(capture, 'searching', 'Searching the web');
+    sendStatus(capture, 'writing', 'Writing the answer');
+
+    expect(screen.getByTestId('stage')).toHaveTextContent('writing');
+    expect(screen.getByTestId('label')).toHaveTextContent('null');
+  });
+
+  it('clears activity on END_OF_THE_STREAM', async () => {
+    const { Harness, capture } = buildHarness();
+    render(<Harness />);
+    await act(async () => {});
+
+    sendStatus(capture, 'searching', 'Searching the web');
+    sendStatus(capture, 'writing', 'Writing the answer');
+    send(capture, 'END_OF_THE_STREAM_ENDER_GAME_42');
+
+    expect(screen.getByTestId('stage')).toHaveTextContent('null');
+    expect(screen.getByTestId('label')).toHaveTextContent('null');
+    expect(screen.getByTestId('detail')).toHaveTextContent('null');
+    expect(screen.getByTestId('history-count')).toHaveTextContent('0');
+  });
+
+  it('ignores malformed status frames without throwing', async () => {
+    const { Harness, capture } = buildHarness();
+    render(<Harness />);
+    await act(async () => {});
+
+    send(
+      capture,
+      JSON.stringify({ v: 1, type: 'status', data: { stage: 'searching' } }),
+    );
+
+    expect(screen.getByTestId('stage')).toHaveTextContent('null');
+  });
+
+  it('clears activity via clearActivity()', async () => {
+    const { Harness, capture } = buildHarness();
+    render(<Harness />);
+    await act(async () => {});
+
+    sendStatus(capture, 'searching', 'Searching the web');
+    expect(screen.getByTestId('stage')).toHaveTextContent('searching');
+
+    act(() => {
+      screen.getByRole('button', { name: 'clear' }).click();
+    });
+
+    expect(screen.getByTestId('stage')).toHaveTextContent('null');
+  });
+
+  it('clears activity on the streamInterrupted reconnect path', async () => {
+    const { Harness, capture } = buildHarness();
+    const { rerender } = render(<Harness reconnectGeneration={0} />);
+    await act(async () => {});
+
+    // Simulate an in-flight generating turn so the reconnect effect treats it as interrupted.
+    send(capture, 'CONVERSATION_ID');
+    sendStatus(capture, 'searching', 'Searching the web');
+    expect(screen.getByTestId('stage')).toHaveTextContent('searching');
+
+    rerender(<Harness reconnectGeneration={1} />);
+    await act(async () => {});
+
+    expect(screen.getByTestId('stream-interrupted')).toHaveTextContent('yes');
+    expect(screen.getByTestId('stage')).toHaveTextContent('null');
+  });
+});
@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useEffect, useRef, useState } from "react";
+import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { WebSocketContext } from "./WebSocketContext";
 import { AccountContext } from "./AccountContext";
 import { ConversationContext } from "./ConversationContext";
@@ -6,6 +6,12 @@ import { ConversationPrompt, ConversationPromptType } from "../data";
 import { axiosInstance } from "../../axiosApi";
 import { AxiosResponse } from "axios";
 import { AnalyticsEvents, trackEvent } from "../utils/analytics";
+import {
+    ActivityHistoryEntry,
+    parseCitationsData,
+    parseStatusData,
+    parseVersionedFrame,
+} from "../utils/wsFrames";

 type MessageProviderProps ={
    children? : ReactNode;
@@ -20,6 +26,12 @@ type IMessageContext = {
    /** True when a stream was interrupted by a socket drop; cleared on refetch/retry. */
    streamInterrupted: boolean;
    clearStreamInterrupted: () => void;
+    /** Live activity status from versioned "status" WS frames (#96). */
+    activityStage: string | null;
+    activityLabel: string | null;
+    activityDetail: string | null;
+    activityHistory: ActivityHistoryEntry[];
+    clearActivity: () => void;
 }

 const initialValues = {
@@ -30,6 +42,11 @@ const initialValues = {
    isGeneratingMessage: false,
    streamInterrupted: false,
    clearStreamInterrupted: () => {},
+    activityStage: null,
+    activityLabel: null,
+    activityDetail: null,
+    activityHistory: [],
+    clearActivity: () => {},
 }

 const MessageContext = createContext<IMessageContext>(initialValues);
@@ -46,6 +63,10 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
    const [conversationDetails, setConversationDetails] = useState<ConversationPrompt[]>([])
    const [isGeneratingMessage, setIsGeneratingMessage] = useState<boolean>(false)
    const [streamInterrupted, setStreamInterrupted] = useState<boolean>(false)
+    const [activityStage, setActivityStage] = useState<string | null>(null)
+    const [activityLabel, setActivityLabel] = useState<string | null>(null)
+    const [activityDetail, setActivityDetail] = useState<string | null>(null)
+    const [activityHistory, setActivityHistory] = useState<ActivityHistoryEntry[]>([])

    const messageRef = useRef('')
    const messageResponsePart = useRef(0);
@@ -53,9 +74,20 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
    const selectedConversationRef = useRef<undefined | number>(undefined)
    const isGeneratingRef = useRef(false)
    const prevReconnectGenerationRef = useRef(0)
+    const refetchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+    /** Tracks the in-progress activity stage so we can roll it into history with a duration. */
+    const activeStageRef = useRef<{ stage: string; label: string; startedAt: number } | null>(null)

    const clearStreamInterrupted = () => setStreamInterrupted(false)

+    const clearActivity = () => {
+        activeStageRef.current = null
+        setActivityStage(null)
+        setActivityLabel(null)
+        setActivityDetail(null)
+        setActivityHistory([])
+    }
+
    async function GetConversationDetails(conversationId: number | undefined) {
        if (!conversationId) {
            setConversationDetails([])
@@ -76,8 +108,11 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
                        message: item.message,
                        user_created: item.user_created,
                        created_timestamp: item.created_timestamp,
+                        created: item.created,
                        tokens_in: item.tokens_in ?? null,
                        tokens_out: item.tokens_out ?? null,
+                        citations: item.citations ?? [],
+                        feedback: item.feedback ?? null,
                    }),
            )
            if (tempConversations.length === 1) {
@@ -93,10 +128,27 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
        }
    }

+    const schedulePostStreamRefetch = useCallback(() => {
+        if (refetchTimerRef.current) clearTimeout(refetchTimerRef.current)
+        const conversationId = selectedConversationRef.current
+        if (!conversationId) return
+        // Backend saves the assistant prompt after END (+ citations frame); brief delay
+        // hydrates prompt ids, persisted citations, and feedback.
+        refetchTimerRef.current = setTimeout(() => {
+            void GetConversationDetails(conversationId)
+        }, 800)
+    }, [])
+
    useEffect(() => {
        GetConversationDetails(selectedConversation)
    }, [selectedConversation])

+    useEffect(() => {
+        return () => {
+            if (refetchTimerRef.current) clearTimeout(refetchTimerRef.current)
+        }
+    }, [])
+
    // Streaming recovery: on reconnect after a drop mid-stream, refetch conversation
    // and mark the in-flight assistant turn interrupted (no resume protocol on backend).
    useEffect(() => {
@@ -120,6 +172,7 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
        setIsGeneratingMessage(false)
        setStateMessage('')
        setStreamInterrupted(true)
+        clearActivity()

        const details = [...conversationRef.current]
        if (details.length > 0) {
@@ -147,21 +200,80 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
  
        /* subscribe to channel and register callback */        
        subscribe(channelName, (message: string) => {
-            /* when a message is received just add it to the UI */
+            /* Versioned frames (citations #98, status #96) — ignore unknown types safely */
+            const frame = parseVersionedFrame(message)
+            if (frame) {
+                if (frame.type === 'citations') {
+                    const citations = parseCitationsData(frame.data)
+                    const details = [...conversationRef.current]
+                    for (let i = details.length - 1; i >= 0; i -= 1) {
+                        if (!details[i].user_created && details[i].message) {
+                            details[i] = new ConversationPrompt({
+                                ...details[i],
+                                citations,
+                            })
+                            break
+                        }
+                    }
+                    conversationRef.current = details
+                    setConversationDetails(details)
+                    schedulePostStreamRefetch()
+                } else if (frame.type === 'status') {
+                    const statusData = parseStatusData(frame.data)
+                    if (statusData) {
+                        const now = Date.now()
+                        const previous = activeStageRef.current
+                        if (previous && previous.stage !== statusData.stage) {
+                            const durationMs = now - previous.startedAt
+                            setActivityHistory((history) => [
+                                ...history,
+                                {
+                                    stage: previous.stage,
+                                    label: previous.label,
+                                    startedAt: previous.startedAt,
+                                    finishedAt: now,
+                                },
+                            ])
+                            trackEvent(AnalyticsEvents.ACTIVITY_STAGE_COMPLETED, {
+                                stage: previous.stage,
+                                durationMs,
+                            })
+                        }
+                        activeStageRef.current = {
+                            stage: statusData.stage,
+                            label: statusData.label,
+                            startedAt: previous && previous.stage === statusData.stage
+                                ? previous.startedAt
+                                : now,
+                        }
+                        setActivityStage(statusData.stage)
+                        // Tokens take over the label once the model starts writing.
+                        setActivityLabel(statusData.stage === 'writing' ? null : statusData.label)
+                        setActivityDetail(statusData.detail ?? null)
+                    }
+                }
+                // other unknown types: no-op
+                return
+            }

            if (message === 'END_OF_THE_STREAM_ENDER_GAME_42'){
                messageResponsePart.current = 0
            
                conversationRef.current.pop()
            
-                //handleAssistantPrompt({prompt: messageRef.current})
-                setConversationDetails([...conversationRef.current, new ConversationPrompt({message: `${messageRef.current}`, user_created:false})])
-                console.log([...conversationRef.current, new ConversationPrompt({message: `${messageRef.current}`, user_created:false})])
+                const finalized = new ConversationPrompt({
+                    message: `${messageRef.current}`,
+                    user_created: false,
+                })
+                conversationRef.current = [...conversationRef.current, finalized]
+                setConversationDetails([...conversationRef.current])
                messageRef.current = ''
                setStateMessage('')
                isGeneratingRef.current = false
                setIsGeneratingMessage(false)
                setStreamInterrupted(false)
+                clearActivity()
+                schedulePostStreamRefetch()
            }
            else if (message === 'START_OF_THE_STREAM_ENDER_GAME_42'){
                conversationRef.current = conversationDetails
@@ -176,23 +288,26 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
                setStreamInterrupted(false)
                messageResponsePart.current = 1
            }else{
-                isGeneratingRef.current = true
-                setIsGeneratingMessage(true)
                if (messageResponsePart.current === 1){
+                    isGeneratingRef.current = true
+                    setIsGeneratingMessage(true)
                    // this has to do with the conversation id
                    if(!selectedConversation){
                        const conversationId = Number(message);
                        setSelectedConversation(conversationId)
+                        selectedConversationRef.current = conversationId
                        trackEvent(AnalyticsEvents.CONVERSATION_CREATED, {
                          conversationId,
                        });
                    }   
                }
                else if (messageResponsePart.current === 2){
+                    isGeneratingRef.current = true
+                    setIsGeneratingMessage(true)
                    messageRef.current += message
                    setStateMessage(messageRef.current)
-  
                }
+                // ignore stray frames outside an active stream phase
            }
            
        })
@@ -201,7 +316,7 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
            /* unsubscribe from channel during cleanup */
            unsubscribe(channelName)
        }
-    }, [account, subscribe, unsubscribe, conversationDetails, selectedConversation, setSelectedConversation])
+    }, [account, subscribe, unsubscribe, conversationDetails, selectedConversation, setSelectedConversation, schedulePostStreamRefetch])


    return(
@@ -213,6 +328,11 @@ const MessageProvider = ( {children}: MessageProviderProps) => {
            isGeneratingMessage,
            streamInterrupted,
            clearStreamInterrupted,
+            activityStage,
+            activityLabel,
+            activityDetail,
+            activityHistory,
+            clearActivity,
        }}>
            {children}
        </MessageContext.Provider>
@@ -1,11 +1,23 @@
+import type { Citation } from './utils/wsFrames';
+import type { PromptRating } from './utils/promptFeedback';
+
+export type PromptFeedbackState = {
+    rating: PromptRating;
+    reason?: string | null;
+    comment?: string | null;
+};
+
 /* Classes for the project */
 export interface ConversationPromptType {
    id: number,
    message: string, 
    user_created: boolean,
-    created_timestamp: Date,
+    created_timestamp?: Date,
+    created?: Date | string,
    tokens_in?: number | null,
    tokens_out?: number | null,
+    citations?: Citation[],
+    feedback?: PromptFeedbackState | null,
 }

 export class ConversationPrompt{
@@ -15,6 +27,8 @@ export class ConversationPrompt{
    created_timestamp: Date = new Date();
    tokens_in: number | null = null;
    tokens_out: number | null = null;
+    citations: Citation[] = [];
+    feedback: PromptFeedbackState | null = null;

    constructor(initializer?: any){
        if(!initializer) return;
@@ -22,8 +36,11 @@ export class ConversationPrompt{
        if (initializer.message) this.message = initializer.message;
        if (initializer.user_created) this.user_created = initializer.user_created;
        if (initializer.created_timestamp) this.created_timestamp = initializer.created_timestamp;
+        else if (initializer.created) this.created_timestamp = new Date(initializer.created);
        if (initializer.tokens_in !== undefined) this.tokens_in = initializer.tokens_in;
        if (initializer.tokens_out !== undefined) this.tokens_out = initializer.tokens_out;
+        if (Array.isArray(initializer.citations)) this.citations = initializer.citations;
+        if (initializer.feedback !== undefined) this.feedback = initializer.feedback;
    }

 }
@@ -238,6 +255,7 @@ export class AdminAnalytics {
 }

 export interface AccountType {
+    id?: number;
    email: string;
    first_name: string;
    last_name: string;
@@ -251,9 +269,11 @@ export interface AccountType {

 export interface PreferencesType {
    order: boolean;
+    use_conversation_context?: boolean;
 }

 export class Account {
+    id?: number;
    email: string = '';
    first_name: string ='';
    last_name: string = '';
@@ -265,6 +285,7 @@ export class Account {
    has_signed_tos: boolean = false;
    constructor(initializer?: any){
        if (!initializer) return;
+        if (initializer.id != null) this.id = Number(initializer.id);
        if (initializer.email) this.email = initializer.email;
        if (initializer.first_name) this.first_name = initializer.first_name;
        if (initializer.is_company_manager) this.is_company_manager = initializer.is_company_manager;
@@ -6,7 +6,7 @@ import { planAllowsRag, SubscriptionMe } from '../utils/finance';

 /**
 * Module-level cache so every component that calls useSubscription() during the
- * same session shares one /finance/subscription/ request instead of each
+ * same session shares one /monetization/subscription/ request instead of each
 * mounting its own (e.g. Header2 + DocumentStoragePage on the same page).
 */
 let cachedSubscription: SubscriptionMe | null = null;
@@ -18,7 +18,7 @@ async function loadSubscription(): Promise<SubscriptionMe | null> {
  }
  if (!inFlightRequest) {
    inFlightRequest = axiosInstance
-      .get<SubscriptionMe>('/finance/subscription/')
+      .get<SubscriptionMe>('/monetization/subscription/')
      .then((response: AxiosResponse<SubscriptionMe>) => {
        cachedSubscription = response.data || null;
        return cachedSubscription;
@@ -44,7 +44,7 @@ export type UseSubscriptionResult = {
  refresh: () => Promise<void>;
 };

-/** Fetches /finance/subscription/ once per session (shared across callers) and exposes plan-derived flags. */
+/** Fetches /monetization/subscription/ once per session (shared across callers) and exposes plan-derived flags. */
 export function useSubscription(): UseSubscriptionResult {
  const { authenticated } = useContext(AuthContext);
  const [subscription, setSubscription] = useState<SubscriptionMe | null>(cachedSubscription);
@@ -2,8 +2,8 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import styled, { ThemeContext } from "styled-components";
 import { Formik, Form, Field } from "formik";
 import * as Yup from "yup";
-import { AttachFile, Delete, Send, Close } from "@mui/icons-material"; // Keeping icons for now, can replace later if needed
-import { Tooltip } from "@mui/material";
+import { AttachFile, Delete, Send, Close, FileDownload } from "@mui/icons-material";
+import { Tooltip, Menu, MenuItem, IconButton as MuiIconButton } from "@mui/material";
 import Markdown from "markdown-to-jsx";

 import {
@@ -17,6 +17,9 @@ import ParticleBackground from "../../components/ParticleBackground/ParticleBack

 import Header2 from "../../components/Header2/Header2";
 import { AnalyticsEvents, trackEvent } from "../../utils/analytics";
+import { exportChat, type ExportFormat } from "../../utils/export/exportChat";
+import { showToast } from "../../utils/toastBus";
+import type { PromptRating } from "../../utils/promptFeedback";

 // Styled Components
 const PageContainer = styled.div`
@@ -152,6 +155,18 @@ const ChatArea = styled.div`
  }
 `;

+const ChatToolbar = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0.25rem 2rem 0;
+  flex-shrink: 0;
+
+  @media (max-width: 768px) {
+    padding: 0.25rem 0.85rem 0;
+  }
+`;
+
 const InputArea = styled.div`
  flex-shrink: 0;
  box-sizing: border-box;
@@ -237,32 +252,6 @@ const IconButton = styled.button`
  }
 `;

-const StyledSelect = styled.select`
-  background: transparent;
-  border: none;
-  flex-shrink: 0;
-  max-width: 7rem;
-  color: ${({ theme }) => theme.colors.text};
-  font-size: 0.9rem;
-  padding: 0.5rem;
-  outline: none;
-  cursor: pointer;
-  margin-right: 0.5rem;
-  border-right: 1px solid ${({ theme }) => theme.colors.cardBorder};
-
-  @media (max-width: 768px) {
-    max-width: 5.5rem;
-    font-size: 0.8rem;
-    padding: 0.4rem 0.2rem;
-    margin-right: 0.25rem;
-  }
-  
-  option {
-    background: ${({ theme }) => theme.colors.background || '#1a1a1a'};
-    color: ${({ theme }) => theme.colors.text};
-  }
-`;
-
 const ConversationItem = styled.div<{ $active: boolean }>`
  padding: 0.8rem 1rem;
  margin-bottom: 0.5rem;
@@ -328,11 +317,13 @@ const validationSchema = Yup.object().shape({
    .required("This is required"),
 });

+/** Fixed until product re-exposes a model picker (#106). */
+const DEFAULT_MODEL_NAME = "THINKING";
+
 type PromptValues = {
  prompt: string;
  file: Blob | null;
  fileType: string | null;
-  modelName: string;
 };

 const AlwaysScrollToBottom = ({ trigger }: { trigger: string | number }): JSX.Element => {
@@ -355,12 +346,68 @@ const AsyncDashboardInner = (): JSX.Element => {
    setConversationDetails,
    stateMessage,
    streamInterrupted,
+    activityStage,
+    activityLabel,
+    activityDetail,
+    activityHistory,
+    clearActivity,
  } = useContext(MessageContext);

  const conversationRef = useRef(conversationDetails);
  const theme = useContext(ThemeContext);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [exportAnchor, setExportAnchor] = useState<null | HTMLElement>(null);
+
+  const selectedTitle =
+    conversations.find((c) => c.id === selectedConversation)?.title ||
+    'conversation';
+
+  const handleConversationExport = async (format: ExportFormat) => {
+    setExportAnchor(null);
+    const turns = conversationDetails
+      .filter((d) => d.message.length > 0)
+      .map((d) => ({
+        role: (d.user_created ? 'user' : 'assistant') as 'user' | 'assistant',
+        message: d.message,
+        timestamp: d.created_timestamp,
+        citations: d.citations,
+      }));
+    if (!turns.length) {
+      showToast('Nothing to export yet', 'info');
+      return;
+    }
+    try {
+      await exportChat({
+        format,
+        scope: 'conversation',
+        title: selectedTitle,
+        turns,
+      });
+      trackEvent(AnalyticsEvents.MESSAGE_EXPORTED, {
+        format,
+        scope: 'conversation',
+      });
+    } catch (err) {
+      console.error(err);
+      showToast('Export failed', 'error');
+    }
+  };
+
+  const updatePromptRating = (promptId: number | undefined, rating: PromptRating | null) => {
+    if (!promptId) return;
+    const next = conversationDetails.map((detail) => {
+      if (detail.id !== promptId) return detail;
+      return new ConversationPrompt({
+        ...detail,
+        feedback: rating
+          ? { rating, reason: detail.feedback?.reason, comment: detail.feedback?.comment }
+          : null,
+      });
+    });
+    conversationRef.current = next;
+    setConversationDetails(next);
+  };

  const connectionBanner = (() => {
    if (connectionStatus === ConnectionStatus.CONNECTED || isConnected) {
@@ -376,7 +423,7 @@ const AsyncDashboardInner = (): JSX.Element => {
  })();

  const handlePromptSubmit = async (
-    { prompt, file, fileType, modelName }: PromptValues,
+    { prompt, file, fileType }: PromptValues,
    { resetForm }: any,
  ): Promise<void> => {
    const trimmedPrompt = (prompt ?? "").trim();
@@ -384,6 +431,7 @@ const AsyncDashboardInner = (): JSX.Element => {
      return;
    }
    try {
+      clearActivity();
      const tempConversations: ConversationPrompt[] = [
        ...conversationDetails,
        new ConversationPrompt({ message: trimmedPrompt, user_created: true }),
@@ -392,7 +440,7 @@ const AsyncDashboardInner = (): JSX.Element => {

      conversationRef.current = tempConversations;
      setConversationDetails(tempConversations);
-      sendMessage(trimmedPrompt, selectedConversation, file, fileType, modelName);
+      sendMessage(trimmedPrompt, selectedConversation, file, fileType, DEFAULT_MODEL_NAME);
      trackEvent(AnalyticsEvents.MESSAGE_SENT, {
        hasConversation: Boolean(selectedConversation),
        hasAttachment: Boolean(file),
@@ -402,7 +450,6 @@ const AsyncDashboardInner = (): JSX.Element => {
          prompt: "",
          file: null,
          fileType: null,
-          modelName: modelName, // Keep the selected model
        }
      });

@@ -483,23 +530,70 @@ const AsyncDashboardInner = (): JSX.Element => {
      </Sidebar>

      <MainContent>
+        {conversationDetails.length > 0 && (
+          <ChatToolbar>
+            <Tooltip title="Export conversation">
+              <MuiIconButton
+                aria-label="Export conversation"
+                size="small"
+                onClick={(e) => setExportAnchor(e.currentTarget)}
+                sx={{ color: theme?.colors?.text }}
+              >
+                <FileDownload fontSize="small" />
+              </MuiIconButton>
+            </Tooltip>
+            <Menu
+              anchorEl={exportAnchor}
+              open={Boolean(exportAnchor)}
+              onClose={() => setExportAnchor(null)}
+            >
+              {(
+                [
+                  ['pdf', 'PDF'],
+                  ['csv', 'CSV'],
+                  ['xlsx', 'Excel (.xlsx)'],
+                  ['txt', 'Plain text'],
+                ] as [ExportFormat, string][]
+              ).map(([format, label]) => (
+                <MenuItem key={format} onClick={() => void handleConversationExport(format)}>
+                  {label}
+                </MenuItem>
+              ))}
+            </Menu>
+          </ChatToolbar>
+        )}
        <ChatArea>
          {conversationDetails.length > 0 ? (
-            conversationDetails.map((convo_detail, index) =>
-              convo_detail.message.length > 0 ? (
+            conversationDetails.map((convo_detail, index) => {
+              const isLast = index === conversationDetails.length - 1;
+              const isLiveStream =
+                !convo_detail.user_created && convo_detail.message.length === 0;
+              const displayMessage = isLiveStream
+                ? stateMessage
+                : convo_detail.message;
+              return (
                <ConversationDetailCard
-                  message={convo_detail.message}
-                  user_created={convo_detail.user_created}
                  key={convo_detail.id || index}
-                />
-              ) : (
-                <ConversationDetailCard
-                  message={stateMessage}
+                  message={displayMessage}
                  user_created={convo_detail.user_created}
-                  key={convo_detail.id || index}
+                  promptId={convo_detail.id}
+                  citations={convo_detail.citations}
+                  isStreaming={isLiveStream}
+                  isLast={isLast}
+                  conversationTitle={selectedTitle}
+                  createdTimestamp={convo_detail.created_timestamp}
+                  initialRating={convo_detail.feedback?.rating ?? null}
+                  onRatingChange={(rating) =>
+                    updatePromptRating(convo_detail.id, rating)
+                  }
+                  activityStage={isLiveStream ? activityStage : null}
+                  activityLabel={isLiveStream ? activityLabel : null}
+                  activityDetail={isLiveStream ? activityDetail : null}
+                  activityHistory={isLiveStream ? activityHistory : []}
+                  activityInterrupted={isLiveStream && streamInterrupted}
                />
-              )
-            )
+              );
+            })
          ) : (
            <div style={{
              display: 'flex',
@@ -521,7 +615,6 @@ const AsyncDashboardInner = (): JSX.Element => {
              prompt: "",
              file: null,
              fileType: null,
-              modelName: "FAST",
            }}
            validationSchema={validationSchema}
            onSubmit={handlePromptSubmit}
@@ -572,14 +665,6 @@ const AsyncDashboardInner = (): JSX.Element => {
                    }}
                  />

-                  <Field
-                    as={StyledSelect}
-                    name="modelName"
-                  >
-                    <option value="FAST">FAST</option>
-                    <option value="THINKING">THINKING</option>
-                  </Field>
-
                  <Field name="prompt">
                    {({ field }: any) => (
                      <StyledInput
@@ -7,6 +7,11 @@ import { AccountContext } from '../../contexts/AccountContext';

 jest.mock('../../components/ParticleBackground/ParticleBackground', () => () => null);

+jest.mock('../../utils/revenueCat', () => ({
+  logInRevenueCat: () => Promise.resolve(),
+  purchasePlan: () => Promise.resolve(),
+}));
+
 const mockPost = jest.fn();
 const mockGet = jest.fn();
 const mockApplyAccessToken = jest.fn();
@@ -128,7 +133,7 @@ describe('AuthCallback', () => {

    await waitFor(() => {
      expect(mockPost).toHaveBeenCalledWith(
-        '/finance/checkout/',
+        '/monetization/checkout/',
        expect.objectContaining({
          success_url: expect.stringContaining('/billing/success'),
          cancel_url: expect.stringContaining('/billing/cancel'),
@@ -10,6 +10,9 @@ import { AccountContext } from '../../contexts/AccountContext';
 import { Account, AccountType } from '../../data';
 import ParticleBackground from '../../components/ParticleBackground/ParticleBackground';
 import { AnalyticsEvents, identifyAccount, trackEvent } from '../../utils/analytics';
+import { checkoutReturnUrls } from '../../utils/finance';
+import { isNativePlatform } from '../../platform/nativePlatform';
+import { logInRevenueCat, purchasePlan } from '../../utils/revenueCat';

 const PageContainer = styled.div`
  position: relative;
@@ -81,14 +84,6 @@ const NavLink = styled(Link)`
  }
 `;

-function checkoutReturnUrls(): { success_url: string; cancel_url: string } {
-  const origin = window.location.origin;
-  return {
-    success_url: `${origin}/billing/success?session_id={CHECKOUT_SESSION_ID}`,
-    cancel_url: `${origin}/billing/cancel`,
-  };
-}
-
 const AuthCallback = (): JSX.Element => {
  const { setAuthentication, setNeedsNewPassword } = useContext(AuthContext);
  const { setAccount } = useContext(AccountContext);
@@ -142,6 +137,7 @@ const AuthCallback = (): JSX.Element => {
        }

        const account = new Account({
+          id: get_user_response.data.id,
          email: get_user_response.data.email,
          first_name: get_user_response.data.first_name,
          last_name: get_user_response.data.last_name,
@@ -165,12 +161,27 @@ const AuthCallback = (): JSX.Element => {
          trackEvent(AnalyticsEvents.LOGIN_SUCCESS, { method: 'sso' });
        }
        identifyAccount(account);
+        void Promise.resolve(logInRevenueCat(account)).catch((err) =>
+          console.warn('RevenueCat logIn', err)
+        );

        if (needsCheckout) {
+          if (isNativePlatform()) {
+            setStatusText('Starting store purchase…');
+            try {
+              trackEvent(AnalyticsEvents.CHECKOUT_STARTED, { source: 'sso_signup_native' });
+              await purchasePlan();
+            } catch (purchaseError) {
+              console.warn('RevenueCat purchase after SSO signup', purchaseError);
+            }
+            navigate('/account/', { replace: true });
+            return;
+          }
+
          setStatusText('Starting checkout…');
          const { success_url, cancel_url } = checkoutReturnUrls();
          trackEvent(AnalyticsEvents.CHECKOUT_STARTED, { source: 'sso_signup' });
-          const checkoutResponse = await axiosInstance.post('/finance/checkout/', {
+          const checkoutResponse = await axiosInstance.post('/monetization/checkout/', {
            success_url,
            cancel_url,
          });
@@ -60,7 +60,7 @@ const subscriptionResponse = (rag: boolean) => ({

 const mockGetByUrl = (overrides: { rag: boolean }) => {
  mockGet.mockImplementation((url: string) => {
-    if (url === '/finance/subscription/') {
+    if (url === '/monetization/subscription/') {
      return Promise.resolve(subscriptionResponse(overrides.rag));
    }
    if (typeof url === 'string' && url.startsWith('/documents/')) {
@@ -8,6 +8,10 @@ import { AccountContext } from '../../contexts/AccountContext';

 jest.mock('../../components/ParticleBackground/ParticleBackground', () => () => null);

+jest.mock('../../utils/revenueCat', () => ({
+  logInRevenueCat: () => Promise.resolve(),
+}));
+
 const mockPost = jest.fn();
 const mockGet = jest.fn();

@@ -10,6 +10,7 @@ import { Account, AccountType } from '../../data';
 import ParticleBackground from '../../components/ParticleBackground/ParticleBackground';
 import SsoButtons, { OAuthProviderFlags } from '../../components/SsoButtons/SsoButtons';
 import { AnalyticsEvents, identifyAccount, trackEvent } from '../../utils/analytics';
+import { logInRevenueCat } from '../../utils/revenueCat';
 import styled from 'styled-components';
 import * as Yup from 'yup';
 import hesychiaMark from '../../assets/brand/hesychia-mark.png';
@@ -221,6 +222,7 @@ const SignIn = (): JSX.Element => {
            const get_user_response: AxiosResponse<AccountType> = await axiosInstance.get('/user/get/')

            const account = new Account({
+                id: get_user_response.data.id,
                email: get_user_response.data.email,
                first_name: get_user_response.data.first_name,
                last_name: get_user_response.data.last_name,
@@ -240,6 +242,9 @@ const SignIn = (): JSX.Element => {
            setNeedsNewPassword(get_user_response.data.has_usable_password)
            trackEvent(AnalyticsEvents.LOGIN_SUCCESS, { method: 'password' });
            identifyAccount(account);
+            void Promise.resolve(logInRevenueCat(account)).catch((err) =>
+                console.warn('RevenueCat logIn', err)
+            );
            if (account.has_signed_tos) {
                navigate('/');
            } else {
@@ -8,6 +8,11 @@ import { AccountContext } from '../../contexts/AccountContext';

 jest.mock('../../components/ParticleBackground/ParticleBackground', () => () => null);

+jest.mock('../../utils/revenueCat', () => ({
+  logInRevenueCat: () => Promise.resolve(),
+  purchasePlan: () => Promise.resolve(),
+}));
+
 const mockPost = jest.fn();
 const mockGet = jest.fn();
 const assignMock = jest.fn();
@@ -134,7 +139,7 @@ describe('SignUp', () => {
    });

    await waitFor(() => {
-      expect(mockPost).toHaveBeenCalledWith('/finance/checkout/', {
+      expect(mockPost).toHaveBeenCalledWith('/monetization/checkout/', {
        success_url: 'http://localhost/billing/success?session_id={CHECKOUT_SESSION_ID}',
        cancel_url: 'http://localhost/billing/cancel',
      });
@@ -10,6 +10,9 @@ import { Account, AccountType } from '../../data';
 import ParticleBackground from '../../components/ParticleBackground/ParticleBackground';
 import SsoButtons, { OAuthProviderFlags } from '../../components/SsoButtons/SsoButtons';
 import { AnalyticsEvents, identifyAccount, trackEvent } from '../../utils/analytics';
+import { checkoutReturnUrls } from '../../utils/finance';
+import { isNativePlatform } from '../../platform/nativePlatform';
+import { logInRevenueCat, purchasePlan } from '../../utils/revenueCat';
 import styled from 'styled-components';
 import * as Yup from 'yup';
 import hesychiaMark from '../../assets/brand/hesychia-mark.png';
@@ -170,14 +173,6 @@ const validationSchema = Yup.object().shape({
  company_name: Yup.string(),
 });

-function checkoutReturnUrls(): { success_url: string; cancel_url: string } {
-  const origin = window.location.origin;
-  return {
-    success_url: `${origin}/billing/success?session_id={CHECKOUT_SESSION_ID}`,
-    cancel_url: `${origin}/billing/cancel`,
-  };
-}
-
 const SignUp = (): JSX.Element => {
  const navigate = useNavigate();
  const { setAuthentication, setNeedsNewPassword } = useContext(AuthContext);
@@ -213,6 +208,7 @@ const SignUp = (): JSX.Element => {
  const loadAccount = async (): Promise<Account> => {
    const get_user_response: AxiosResponse<AccountType> = await axiosInstance.get('/user/get/');
    const account = new Account({
+      id: get_user_response.data.id,
      email: get_user_response.data.email,
      first_name: get_user_response.data.first_name,
      last_name: get_user_response.data.last_name,
@@ -249,16 +245,33 @@ const SignUp = (): JSX.Element => {
      const account = await loadAccount();
      trackEvent(AnalyticsEvents.SIGNUP_SUCCESS, { method: 'password' });
      identifyAccount(account);
+      void Promise.resolve(logInRevenueCat(account)).catch((err) =>
+        console.warn('RevenueCat logIn', err)
+      );

-      const { success_url, cancel_url } = checkoutReturnUrls();
      const needsCheckout = registerResponse.data?.needs_checkout !== false;
      if (!needsCheckout) {
        navigate('/');
        return;
      }

+      // Native: store IAP via RevenueCat (BillingSection) — skip Stripe Checkout.
+      if (isNativePlatform()) {
+        try {
+          trackEvent(AnalyticsEvents.CHECKOUT_STARTED, { source: 'signup_native' });
+          await purchasePlan();
+          navigate('/account/');
+          return;
+        } catch (purchaseError: unknown) {
+          console.warn('RevenueCat purchase after signup', purchaseError);
+          navigate('/account/');
+          return;
+        }
+      }
+
+      const { success_url, cancel_url } = checkoutReturnUrls();
      trackEvent(AnalyticsEvents.CHECKOUT_STARTED, { source: 'signup' });
-      const checkoutResponse = await axiosInstance.post('/finance/checkout/', {
+      const checkoutResponse = await axiosInstance.post('/monetization/checkout/', {
        success_url,
        cancel_url,
      });
@@ -25,6 +25,8 @@ const queue: QueuedCall[] = [];
 * | Plan Change Started | Change-plan intent (#75) |
 * | Subscription Cancel Started | Cancel intent (#75) |
 * | Account Delete Started / Success / Failed | Self-delete (#34 companion) |
+ * | Message Copied / Rated / Rating Reason / Exported | Message actions (#97) |
+ * | Activity Stage Completed | Live activity status stage rolled over (#96) |
 */
 export const AnalyticsEvents = {
  LOGIN_SUCCESS: 'Login Success',
@@ -46,6 +48,11 @@ export const AnalyticsEvents = {
  ACCOUNT_DELETE_STARTED: 'Account Delete Started',
  ACCOUNT_DELETE_SUCCESS: 'Account Delete Success',
  ACCOUNT_DELETE_FAILED: 'Account Delete Failed',
+  MESSAGE_COPIED: 'Message Copied',
+  MESSAGE_RATED: 'Message Rated',
+  MESSAGE_RATING_REASON: 'Message Rating Reason',
+  MESSAGE_EXPORTED: 'Message Exported',
+  ACTIVITY_STAGE_COMPLETED: 'Activity Stage Completed',
 } as const;

 export type AnalyticsEventName = (typeof AnalyticsEvents)[keyof typeof AnalyticsEvents];
@@ -0,0 +1,51 @@
+import { copyTextToClipboard } from './clipboard';
+
+describe('clipboard', () => {
+  const originalClipboard = navigator.clipboard;
+
+  afterEach(() => {
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: originalClipboard,
+    });
+    jest.restoreAllMocks();
+  });
+
+  it('uses navigator.clipboard.writeText when available', async () => {
+    const writeText = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText },
+    });
+    await copyTextToClipboard('hello');
+    expect(writeText).toHaveBeenCalledWith('hello');
+  });
+
+  it('falls back to execCommand when clipboard API fails', async () => {
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {
+        writeText: jest.fn().mockRejectedValue(new Error('denied')),
+      },
+    });
+    Object.defineProperty(document, 'execCommand', {
+      configurable: true,
+      value: jest.fn().mockReturnValue(true),
+    });
+    await copyTextToClipboard('fallback text');
+    expect(document.execCommand).toHaveBeenCalledWith('copy');
+  });
+
+  it('falls back when clipboard API is missing', async () => {
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: undefined,
+    });
+    Object.defineProperty(document, 'execCommand', {
+      configurable: true,
+      value: jest.fn().mockReturnValue(true),
+    });
+    await copyTextToClipboard('legacy');
+    expect(document.execCommand).toHaveBeenCalledWith('copy');
+  });
+});
@@ -0,0 +1,33 @@
+/**
+ * Clipboard helper with execCommand fallback for Capacitor / insecure contexts (#97).
+ */
+export async function copyTextToClipboard(text: string): Promise<void> {
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch {
+      // fall through to legacy path
+    }
+  }
+  fallbackCopyText(text);
+}
+
+function fallbackCopyText(text: string): void {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.setAttribute('readonly', '');
+  textarea.style.position = 'fixed';
+  textarea.style.top = '0';
+  textarea.style.left = '0';
+  textarea.style.opacity = '0';
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+  const ok = document.execCommand('copy');
+  document.body.removeChild(textarea);
+  if (!ok) {
+    throw new Error('Copy command failed');
+  }
+}
@@ -0,0 +1,24 @@
+/**
+ * Client-side file download. Uses blob URL + anchor click.
+ * Capacitor Android WebView: plain downloads often work for blob URLs;
+ * if not, consider @capacitor/filesystem + Share (#97).
+ */
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  try {
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.rel = 'noopener';
+    anchor.style.display = 'none';
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+  } finally {
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+}
+
+export function downloadText(text: string, filename: string, mime = 'text/plain;charset=utf-8'): void {
+  downloadBlob(new Blob([text], { type: mime }), filename);
+}
@@ -0,0 +1,67 @@
+import {
+  buildExportFilename,
+  extractMarkdownTables,
+  parseMarkdownBlocks,
+  sanitizeFilenamePart,
+  stripMarkdown,
+} from './markdownUtils';
+import { selectTabularStrategy } from './exportChat';
+
+describe('export markdown utils', () => {
+  it('sanitises filenames with title + ISO date', () => {
+    expect(sanitizeFilenamePart('Hesychia Taylor Swift Question!')).toBe(
+      'hesychia-taylor-swift-question',
+    );
+    expect(
+      buildExportFilename('Hesychia Taylor Swift Question', 'pdf', new Date('2026-08-02T12:00:00Z')),
+    ).toBe('hesychia-taylor-swift-question-2026-08-02.pdf');
+  });
+
+  it('strips markdown for plain text', () => {
+    expect(stripMarkdown('# Hello\n\n**world**')).toContain('Hello');
+    expect(stripMarkdown('# Hello\n\n**world**')).not.toContain('**');
+  });
+
+  it('parses headings, lists, tables, and code', () => {
+    const blocks = parseMarkdownBlocks(
+      [
+        '# Title',
+        '',
+        '- a',
+        '- b',
+        '',
+        '```js',
+        'console.log(1)',
+        '```',
+        '',
+        '| A | B |',
+        '| --- | --- |',
+        '| 1 | 2 |',
+      ].join('\n'),
+    );
+    expect(blocks.find((b) => b.type === 'heading')).toMatchObject({
+      level: 1,
+      text: 'Title',
+    });
+    expect(blocks.find((b) => b.type === 'list')).toMatchObject({
+      ordered: false,
+      items: ['a', 'b'],
+    });
+    expect(blocks.find((b) => b.type === 'code')).toMatchObject({
+      language: 'js',
+      text: 'console.log(1)',
+    });
+    expect(blocks.find((b) => b.type === 'table')).toMatchObject({
+      headers: ['A', 'B'],
+      rows: [['1', '2']],
+    });
+  });
+
+  it('selects tabular strategy per CSV/XLSX rules', () => {
+    const withTable = '| A | B |\n| --- | --- |\n| 1 | 2 |';
+    expect(selectTabularStrategy('message', withTable)).toBe('tables');
+    expect(selectTabularStrategy('message', 'no table here')).toBe('turns');
+    expect(selectTabularStrategy('conversation', withTable)).toBe('turns');
+    expect(extractMarkdownTables(withTable)).toHaveLength(1);
+  });
+});
@@ -0,0 +1,311 @@
+import { downloadBlob, downloadText } from '../downloadFile';
+import { Citation } from '../wsFrames';
+import {
+  buildExportFilename,
+  extractMarkdownTables,
+  parseMarkdownBlocks,
+  stripMarkdown,
+  type MdBlock,
+} from './markdownUtils';
+
+export type ExportFormat = 'pdf' | 'csv' | 'xlsx' | 'txt';
+
+export type ExportTurn = {
+  role: 'user' | 'assistant';
+  message: string;
+  timestamp?: string | Date | null;
+  citations?: Citation[];
+};
+
+export type ExportScope = 'message' | 'conversation';
+
+export type ExportOptions = {
+  format: ExportFormat;
+  scope: ExportScope;
+  title: string;
+  turns: ExportTurn[];
+};
+
+function yieldToUi(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function formatTs(value?: string | Date | null): string {
+  if (!value) return '';
+  try {
+    return new Date(value).toISOString();
+  } catch {
+    return String(value);
+  }
+}
+
+function roleLabel(role: ExportTurn['role']): string {
+  return role === 'user' ? 'User' : 'Assistant';
+}
+
+function citationFootnotes(citations?: Citation[]): string {
+  if (!citations?.length) return '';
+  return citations
+    .map((c) => `[${c.index}] ${c.title}${c.url ? ` — ${c.url}` : ''}`)
+    .join('\n');
+}
+
+export async function exportChat(options: ExportOptions): Promise<void> {
+  const { format, scope, title, turns } = options;
+  const filename = buildExportFilename(title, format);
+  const exportedAt = new Date().toISOString();
+
+  // Yield so large conversations don't freeze the main thread (#97).
+  await yieldToUi();
+
+  switch (format) {
+    case 'txt':
+      downloadText(buildTxt(title, turns, scope), filename);
+      break;
+    case 'csv':
+      await exportCsv(title, turns, scope, filename);
+      break;
+    case 'xlsx':
+      await exportXlsx(title, turns, scope, filename);
+      break;
+    case 'pdf':
+      await exportPdf(title, turns, exportedAt, filename);
+      break;
+    default:
+      throw new Error(`Unsupported export format: ${format}`);
+  }
+}
+
+function buildTxt(title: string, turns: ExportTurn[], scope: ExportScope): string {
+  if (scope === 'message' && turns.length === 1) {
+    const turn = turns[0];
+    const body = stripMarkdown(turn.message);
+    const notes = citationFootnotes(turn.citations);
+    return notes ? `${body}\n\nSources:\n${notes}` : body;
+  }
+  const parts = [`# ${title}`, ''];
+  for (const turn of turns) {
+    const ts = formatTs(turn.timestamp);
+    parts.push(`[${roleLabel(turn.role)}${ts ? ` · ${ts}` : ''}]`);
+    parts.push(stripMarkdown(turn.message));
+    const notes = citationFootnotes(turn.citations);
+    if (notes) {
+      parts.push('Sources:');
+      parts.push(notes);
+    }
+    parts.push('');
+  }
+  return parts.join('\n');
+}
+
+function turnsAsRows(turns: ExportTurn[]): string[][] {
+  const header = ['timestamp', 'role', 'message', 'citations'];
+  const rows = turns.map((turn) => [
+    formatTs(turn.timestamp),
+    roleLabel(turn.role),
+    stripMarkdown(turn.message),
+    citationFootnotes(turn.citations).replace(/\n/g, ' | '),
+  ]);
+  return [header, ...rows];
+}
+
+async function exportCsv(
+  _title: string,
+  turns: ExportTurn[],
+  scope: ExportScope,
+  filename: string,
+): Promise<void> {
+  const Papa = (await import('papaparse')).default;
+  let matrix: string[][];
+
+  if (scope === 'message' && turns.length === 1) {
+    const tables = extractMarkdownTables(turns[0].message);
+    if (tables.length > 0) {
+      const table = tables[0];
+      matrix = [table.headers, ...table.rows];
+    } else {
+      matrix = turnsAsRows(turns);
+    }
+  } else {
+    matrix = turnsAsRows(turns);
+  }
+
+  const csv = Papa.unparse(matrix);
+  downloadText(csv, filename, 'text/csv;charset=utf-8');
+}
+
+async function exportXlsx(
+  _title: string,
+  turns: ExportTurn[],
+  scope: ExportScope,
+  filename: string,
+): Promise<void> {
+  const XLSX = await import('xlsx');
+  const workbook = XLSX.utils.book_new();
+
+  if (scope === 'message' && turns.length === 1) {
+    const tables = extractMarkdownTables(turns[0].message);
+    if (tables.length > 0) {
+      tables.forEach((table, idx) => {
+        const sheet = XLSX.utils.aoa_to_sheet([table.headers, ...table.rows]);
+        XLSX.utils.book_append_sheet(workbook, sheet, `Table ${idx + 1}`);
+      });
+    } else {
+      const sheet = XLSX.utils.aoa_to_sheet(turnsAsRows(turns));
+      XLSX.utils.book_append_sheet(workbook, sheet, 'Messages');
+    }
+  } else {
+    const sheet = XLSX.utils.aoa_to_sheet(turnsAsRows(turns));
+    XLSX.utils.book_append_sheet(workbook, sheet, 'Messages');
+  }
+
+  const arrayBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+  downloadBlob(
+    new Blob([arrayBuffer], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    }),
+    filename,
+  );
+}
+
+function blocksToPdfContent(blocks: MdBlock[]): unknown[] {
+  const content: unknown[] = [];
+  for (const block of blocks) {
+    switch (block.type) {
+      case 'heading':
+        content.push({
+          text: block.text,
+          style: `h${Math.min(block.level, 3)}`,
+          margin: [0, 8, 0, 4],
+        });
+        break;
+      case 'paragraph':
+        content.push({ text: block.text, margin: [0, 2, 0, 6] });
+        break;
+      case 'code':
+        content.push({
+          text: block.text,
+          fontSize: 9,
+          preserveLeadingSpaces: true,
+          margin: [0, 4, 0, 8],
+          background: '#f5f5f5',
+        });
+        break;
+      case 'list':
+        content.push(
+          block.ordered
+            ? { ol: block.items, margin: [0, 2, 0, 6] }
+            : { ul: block.items, margin: [0, 2, 0, 6] },
+        );
+        break;
+      case 'table':
+        content.push({
+          table: {
+            headerRows: 1,
+            widths: block.headers.map(() => '*'),
+            body: [
+              block.headers.map((h) => ({ text: h, bold: true })),
+              ...block.rows.map((row) =>
+                block.headers.map((_, col) => row[col] ?? ''),
+              ),
+            ],
+          },
+          margin: [0, 4, 0, 8],
+        });
+        break;
+      default:
+        break;
+    }
+  }
+  return content;
+}
+
+async function exportPdf(
+  title: string,
+  turns: ExportTurn[],
+  exportedAt: string,
+  filename: string,
+): Promise<void> {
+  const pdfMakeModule = await import('pdfmake/build/pdfmake');
+  const pdfFonts = await import('pdfmake/build/vfs_fonts');
+  const pdfMake = pdfMakeModule.default || pdfMakeModule;
+  // vfs_fonts may export vfs on default or as pdfMake.vfs
+  const vfs =
+    (pdfFonts as { pdfMake?: { vfs?: unknown }; default?: { pdfMake?: { vfs?: unknown } } })
+      .pdfMake?.vfs ||
+    (pdfFonts as { default?: { pdfMake?: { vfs?: unknown } } }).default?.pdfMake?.vfs ||
+    (pdfFonts as { default?: unknown }).default;
+  if (vfs) {
+    (pdfMake as { vfs?: unknown }).vfs = vfs;
+  }
+
+  const content: unknown[] = [
+    { text: title, style: 'title' },
+    { text: `Exported ${exportedAt}`, style: 'meta', margin: [0, 0, 0, 16] },
+  ];
+
+  for (let i = 0; i < turns.length; i += 1) {
+    if (i > 0 && i % 20 === 0) await yieldToUi();
+    const turn = turns[i];
+    if (turns.length > 1) {
+      content.push({
+        text: `${roleLabel(turn.role)}${turn.timestamp ? ` · ${formatTs(turn.timestamp)}` : ''}`,
+        style: 'role',
+        margin: [0, 12, 0, 4],
+      });
+    }
+    content.push(...blocksToPdfContent(parseMarkdownBlocks(turn.message)));
+    if (turn.citations?.length) {
+      content.push({ text: 'Sources', style: 'h3', margin: [0, 8, 0, 4] });
+      content.push({
+        ol: turn.citations
+          .slice()
+          .sort((a, b) => a.index - b.index)
+          .map((c) => `${c.title}${c.url ? ` (${c.url})` : ''}`),
+      });
+    }
+  }
+
+  const docDefinition = {
+    content,
+    styles: {
+      title: { fontSize: 18, bold: true },
+      meta: { fontSize: 9, color: '#666666' },
+      role: { fontSize: 11, bold: true, color: '#333333' },
+      h1: { fontSize: 16, bold: true },
+      h2: { fontSize: 14, bold: true },
+      h3: { fontSize: 12, bold: true },
+    },
+    defaultStyle: { fontSize: 11 },
+    header: {
+      text: `${title} · ${exportedAt}`,
+      fontSize: 8,
+      color: '#888888',
+      margin: [40, 20, 40, 0] as [number, number, number, number],
+    },
+  };
+
+  await new Promise<void>((resolve, reject) => {
+    try {
+      // pdfmake typings vary across 0.2/0.3 builds; keep runtime call flexible.
+      const pdf = (pdfMake as { createPdf: (def: unknown) => { getBlob: (cb: (blob: Blob) => void) => void } }).createPdf(
+        docDefinition,
+      );
+      pdf.getBlob((blob: Blob) => {
+        downloadBlob(blob, filename);
+        resolve();
+      });
+    } catch (err) {
+      reject(err);
+    }
+  });
+}
+
+/** Decide CSV/XLSX matrix strategy — exported for unit tests. */
+export function selectTabularStrategy(
+  scope: ExportScope,
+  messageMarkdown: string,
+): 'tables' | 'turns' {
+  if (scope === 'conversation') return 'turns';
+  return extractMarkdownTables(messageMarkdown).length > 0 ? 'tables' : 'turns';
+}
@@ -0,0 +1,134 @@
+export function sanitizeFilenamePart(value: string): string {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 80) || 'conversation';
+}
+
+export function buildExportFilename(
+  conversationTitle: string,
+  extension: string,
+  date = new Date(),
+): string {
+  const day = date.toISOString().slice(0, 10);
+  const base = sanitizeFilenamePart(conversationTitle || 'conversation');
+  const ext = extension.replace(/^\./, '');
+  return `${base}-${day}.${ext}`;
+}
+
+/** Strip markdown to plain text for TXT / tabular message cells. */
+export function stripMarkdown(markdown: string): string {
+  return markdown
+    .replace(/```[\s\S]*?```/g, (block) =>
+      block.replace(/```\w*\n?/, '').replace(/```$/, ''),
+    )
+    .replace(/!\[[^\]]*]\([^)]+\)/g, '')
+    .replace(/\[([^\]]+)]\([^)]+\)/g, '$1')
+    .replace(/^#{1,6}\s+/gm, '')
+    .replace(/^\s*[-*+]\s+/gm, '')
+    .replace(/^\s*\d+\.\s+/gm, '')
+    .replace(/[*_~`]+/g, '')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
+export type MdBlock =
+  | { type: 'heading'; level: number; text: string }
+  | { type: 'paragraph'; text: string }
+  | { type: 'code'; language: string; text: string }
+  | { type: 'list'; ordered: boolean; items: string[] }
+  | { type: 'table'; headers: string[]; rows: string[][] };
+
+/** Lightweight markdown → block AST for PDF/DOCX exporters. */
+export function parseMarkdownBlocks(markdown: string): MdBlock[] {
+  const lines = markdown.replace(/\r\n/g, '\n').split('\n');
+  const blocks: MdBlock[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (/^```/.test(line)) {
+      const language = line.replace(/^```/, '').trim();
+      const body: string[] = [];
+      i += 1;
+      while (i < lines.length && !/^```/.test(lines[i])) {
+        body.push(lines[i]);
+        i += 1;
+      }
+      blocks.push({ type: 'code', language, text: body.join('\n') });
+      i += 1;
+      continue;
+    }
+
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+    if (heading) {
+      blocks.push({
+        type: 'heading',
+        level: heading[1].length,
+        text: heading[2].trim(),
+      });
+      i += 1;
+      continue;
+    }
+
+    if (/^\|.+\|$/.test(line.trim()) && i + 1 < lines.length && /^\|?\s*[-:| ]+\|?$/.test(lines[i + 1].trim())) {
+      const headers = splitTableRow(line);
+      i += 2;
+      const rows: string[][] = [];
+      while (i < lines.length && /^\|.+\|$/.test(lines[i].trim())) {
+        rows.push(splitTableRow(lines[i]));
+        i += 1;
+      }
+      blocks.push({ type: 'table', headers, rows });
+      continue;
+    }
+
+    if (/^\s*[-*+]\s+/.test(line) || /^\s*\d+\.\s+/.test(line)) {
+      const ordered = /^\s*\d+\.\s+/.test(line);
+      const items: string[] = [];
+      while (
+        i < lines.length &&
+        (ordered ? /^\s*\d+\.\s+/.test(lines[i]) : /^\s*[-*+]\s+/.test(lines[i]))
+      ) {
+        items.push(lines[i].replace(/^\s*([-*+]|\d+\.)\s+/, '').trim());
+        i += 1;
+      }
+      blocks.push({ type: 'list', ordered, items });
+      continue;
+    }
+
+    if (!line.trim()) {
+      i += 1;
+      continue;
+    }
+
+    const para: string[] = [];
+    while (i < lines.length && lines[i].trim() && !/^```/.test(lines[i]) && !/^(#{1,6})\s+/.test(lines[i])) {
+      if (/^\|.+\|$/.test(lines[i].trim())) break;
+      if (/^\s*[-*+]\s+/.test(lines[i]) || /^\s*\d+\.\s+/.test(lines[i])) break;
+      para.push(lines[i]);
+      i += 1;
+    }
+    blocks.push({ type: 'paragraph', text: para.join(' ').trim() });
+  }
+
+  return blocks;
+}
+
+function splitTableRow(line: string): string[] {
+  return line
+    .trim()
+    .replace(/^\|/, '')
+    .replace(/\|$/, '')
+    .split('|')
+    .map((cell) => cell.trim());
+}
+
+/** Extract markdown tables from a single message (for CSV/XLSX tabular rules). */
+export function extractMarkdownTables(markdown: string): { headers: string[]; rows: string[][] }[] {
+  return parseMarkdownBlocks(markdown)
+    .filter((b): b is Extract<MdBlock, { type: 'table' }> => b.type === 'table')
+    .map(({ headers, rows }) => ({ headers, rows }));
+}
@@ -3,6 +3,10 @@ import {
  formatMoneyCents,
  formatTokenCount,
  humanizeStatus,
+  invoiceProviderLabel,
+  isComplimentarySubscription,
+  isStoreSubscription,
+  isStripeSubscription,
  pickPrimaryInvoice,
  planAllowsRag,
 } from './finance';
@@ -92,9 +96,44 @@ describe('finance helpers', () => {
    expect(pickPrimaryInvoice(invoices)?.id).toBe(2);
  });

-  it('detects portal access from paid or subscribed invoices', () => {
+  it('detects portal access from paid Stripe invoices only', () => {
    expect(canOpenBillingPortal([baseInvoice({ status: 'open' })])).toBe(false);
    expect(canOpenBillingPortal([baseInvoice({ status: 'paid' })])).toBe(true);
+    expect(
+      canOpenBillingPortal([
+        baseInvoice({
+          status: 'paid',
+          provider: 'revenuecat',
+          stripe_subscription_id: null,
+          revenuecat_store: 'PLAY_STORE',
+        }),
+      ])
+    ).toBe(false);
+  });
+
+  it('labels invoice providers for history', () => {
+    expect(invoiceProviderLabel(baseInvoice({ provider: 'stripe' }))).toBe('Stripe');
+    expect(
+      invoiceProviderLabel(
+        baseInvoice({ provider: 'revenuecat', revenuecat_store: 'PLAY_STORE' })
+      )
+    ).toBe('Play Store');
+    expect(
+      invoiceProviderLabel(
+        baseInvoice({ provider: 'revenuecat', revenuecat_store: 'APP_STORE' })
+      )
+    ).toBe('App Store');
+  });
+
+  it('classifies subscription sources', () => {
+    expect(isStoreSubscription('revenuecat')).toBe(true);
+    expect(isStripeSubscription('stripe')).toBe(true);
+    expect(
+      isComplimentarySubscription(
+        { source: 'revenuecat', needs_checkout: false },
+        false
+      )
+    ).toBe(false);
  });
 });

@@ -10,6 +10,8 @@ export type FinanceInvoice = {
  stripe_invoice_id: string | null;
  stripe_checkout_session_id: string | null;
  stripe_subscription_id: string | null;
+  revenuecat_event_id?: string | null;
+  revenuecat_store?: string | null;
  hosted_invoice_url: string;
  description: string;
  created: string;
@@ -25,6 +27,7 @@ export type FinancePayment = {
  amount: number;
  stripe_payment_intent_id: string | null;
  stripe_charge_id: string | null;
+  revenuecat_transaction_id?: string | null;
  paid_at: string | null;
  failure_message: string;
  created: string;
@@ -75,12 +78,61 @@ export type SubscriptionMe = {
  source: string;
  needs_checkout: boolean;
  stripe_subscription_id: string;
+  revenuecat_original_transaction_id?: string;
  cancel_at_period_end?: boolean;
  current_period_end?: string | null;
  usage: SubscriptionUsage;
 };

-export type SubscriptionSource = 'none' | 'stripe' | 'backer' | 'admin' | string;
+export type SubscriptionSource =
+  | 'none'
+  | 'stripe'
+  | 'revenuecat'
+  | 'backer'
+  | 'admin'
+  | string;
+
+export function isStoreSubscription(
+  source: string | null | undefined
+): boolean {
+  return source === 'revenuecat';
+}
+
+export function isStripeSubscription(
+  source: string | null | undefined
+): boolean {
+  return source === 'stripe';
+}
+
+/** Human label for invoice provider / store (history badge). */
+export function invoiceProviderLabel(
+  invoice: Pick<FinanceInvoice, 'provider' | 'revenuecat_store'>
+): string {
+  const provider = (invoice.provider || '').toLowerCase();
+  if (provider === 'revenuecat') {
+    const store = (invoice.revenuecat_store || '').toUpperCase();
+    if (
+      store.includes('PLAY') ||
+      store === 'GOOGLE' ||
+      store === 'GOOGLE_PLAY' ||
+      store === 'PLAY_STORE'
+    ) {
+      return 'Play Store';
+    }
+    if (
+      store.includes('APP_STORE') ||
+      store.includes('MAC') ||
+      store === 'APPLE' ||
+      store === 'APP_STORE'
+    ) {
+      return 'App Store';
+    }
+    if (store) return store;
+    return 'Store';
+  }
+  if (provider === 'stripe') return 'Stripe';
+  return invoice.provider || '—';
+}

 /** Complimentary / admin-granted access — no Stripe cancel/change. */
 export function isComplimentarySubscription(
@@ -89,6 +141,13 @@ export function isComplimentarySubscription(
 ): boolean {
  if (!subscription) return false;
  if (subscription.source === 'backer' || subscription.source === 'admin') return true;
+  // Paid Stripe / store entitlements are not complimentary even without portal rows.
+  if (
+    isStripeSubscription(subscription.source) ||
+    isStoreSubscription(subscription.source)
+  ) {
+    return false;
+  }
  return !hasPortalAccess && subscription.needs_checkout === false;
 }

@@ -171,9 +230,12 @@ export function pickPrimaryInvoice(invoices: FinanceInvoice[]): FinanceInvoice |
  return invoices[0];
 }

+/** Stripe customer portal only — ignore RevenueCat / store invoices. */
 export function canOpenBillingPortal(invoices: FinanceInvoice[]): boolean {
  return invoices.some(
-    (inv) => Boolean(inv.stripe_subscription_id) || inv.status === 'paid'
+    (inv) =>
+      (inv.provider || 'stripe').toLowerCase() === 'stripe' &&
+      (Boolean(inv.stripe_subscription_id) || inv.status === 'paid')
  );
 }

@@ -0,0 +1,45 @@
+import { upsertPromptFeedback, clearPromptFeedback } from './promptFeedback';
+import { axiosInstance } from '../../axiosApi';
+
+jest.mock('../../axiosApi', () => ({
+  axiosInstance: {
+    post: jest.fn(),
+    delete: jest.fn(),
+  },
+}));
+
+describe('promptFeedback optimistic helpers', () => {
+  const post = axiosInstance.post as jest.Mock;
+  const del = axiosInstance.delete as jest.Mock;
+
+  beforeEach(() => {
+    post.mockReset();
+    del.mockReset();
+  });
+
+  it('posts upsert payload', async () => {
+    post.mockResolvedValue({ data: { rating: 'up' } });
+    await upsertPromptFeedback(42, { rating: 'up' });
+    expect(post).toHaveBeenCalledWith('prompt_feedback', {
+      prompt_id: 42,
+      rating: 'up',
+      reason: undefined,
+      comment: undefined,
+    });
+  });
+
+  it('deletes vote by prompt_id', async () => {
+    del.mockResolvedValue({});
+    await clearPromptFeedback(42);
+    expect(del).toHaveBeenCalledWith('prompt_feedback', {
+      params: { prompt_id: 42 },
+    });
+  });
+
+  it('surfaces request failures for rollback callers', async () => {
+    post.mockRejectedValue(new Error('network'));
+    await expect(upsertPromptFeedback(1, { rating: 'down' })).rejects.toThrow(
+      'network',
+    );
+  });
+});
@@ -0,0 +1,39 @@
+import { axiosInstance } from '../../axiosApi';
+
+export type PromptRating = 'up' | 'down';
+
+export type PromptFeedbackPayload = {
+  rating: PromptRating;
+  reason?: string | null;
+  comment?: string | null;
+};
+
+export type PromptFeedbackResponse = PromptFeedbackPayload & {
+  id?: number;
+  prompt_id?: number;
+};
+
+/**
+ * Upsert thumbs rating for an assistant prompt (chat_backend#67).
+ */
+export async function upsertPromptFeedback(
+  promptId: number,
+  payload: PromptFeedbackPayload,
+): Promise<PromptFeedbackResponse> {
+  const { data } = await axiosInstance.post<PromptFeedbackResponse>('prompt_feedback', {
+    prompt_id: promptId,
+    rating: payload.rating,
+    reason: payload.reason ?? undefined,
+    comment: payload.comment ?? undefined,
+  });
+  return data;
+}
+
+/**
+ * Clear a vote for an assistant prompt.
+ */
+export async function clearPromptFeedback(promptId: number): Promise<void> {
+  await axiosInstance.delete('prompt_feedback', {
+    params: { prompt_id: promptId },
+  });
+}
@@ -0,0 +1,49 @@
+jest.mock('@revenuecat/purchases-capacitor', () => ({
+  Purchases: {
+    configure: jest.fn(),
+    logIn: jest.fn(),
+    logOut: jest.fn(),
+    getOfferings: jest.fn(),
+    purchasePackage: jest.fn(),
+    restorePurchases: jest.fn(),
+  },
+}));
+
+import {
+  resolveAppUserId,
+  isPurchaseCancelledError,
+} from './revenueCat';
+import { ACCESS_TOKEN_KEY } from '../auth/tokenStorage';
+
+function makeJwt(payload: Record<string, unknown>): string {
+  const body = btoa(JSON.stringify(payload))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '');
+  return `hdr.${body}.sig`;
+}
+
+describe('revenueCat helpers', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('prefers account.id for appUserID', () => {
+    expect(resolveAppUserId({ id: 42 })).toBe('42');
+  });
+
+  it('falls back to JWT user_id claim', () => {
+    localStorage.setItem(ACCESS_TOKEN_KEY, makeJwt({ user_id: 99, exp: 9999999999 }));
+    expect(resolveAppUserId(null)).toBe('99');
+  });
+
+  it('returns null when no id available', () => {
+    expect(resolveAppUserId(undefined)).toBeNull();
+  });
+
+  it('detects cancelled purchase errors', () => {
+    expect(isPurchaseCancelledError({ userCancelled: true })).toBe(true);
+    expect(isPurchaseCancelledError({ code: 1 })).toBe(true);
+    expect(isPurchaseCancelledError({ message: 'boom' })).toBe(false);
+  });
+});
@@ -0,0 +1,176 @@
+/**
+ * RevenueCat Capacitor IAP wrapper (#100).
+ * No-ops on web; only configures / purchases on native platforms.
+ */
+import { Purchases } from '@revenuecat/purchases-capacitor';
+import type { PurchasesPackage } from '@revenuecat/purchases-capacitor';
+import { decodeJwtPayload } from '../auth/jwtHelpers';
+import { getAccessToken } from '../auth/tokenStorage';
+import { isNativePlatform } from '../platform/nativePlatform';
+
+let configurePromise: Promise<void> | null = null;
+let configured = false;
+
+type AccountLike = { id?: number | string | null };
+
+function getCapacitorPlatform(): string {
+  if (typeof window === 'undefined') return 'web';
+  const Cap = window.Capacitor as
+    | { getPlatform?: () => string; isNativePlatform?: () => boolean }
+    | undefined;
+  if (typeof Cap?.getPlatform === 'function') {
+    return Cap.getPlatform();
+  }
+  return 'web';
+}
+
+function revenueCatApiKey(): string {
+  const platform = getCapacitorPlatform();
+  if (platform === 'ios') {
+    return (process.env.REACT_APP_REVENUECAT_APPLE_API_KEY || '').trim();
+  }
+  if (platform === 'android') {
+    return (process.env.REACT_APP_REVENUECAT_GOOGLE_API_KEY || '').trim();
+  }
+  // Fallback: prefer Google then Apple if platform unknown on native.
+  return (
+    (process.env.REACT_APP_REVENUECAT_GOOGLE_API_KEY || '').trim() ||
+    (process.env.REACT_APP_REVENUECAT_APPLE_API_KEY || '').trim()
+  );
+}
+
+/** Prefer numeric user pk; fall back to JWT `user_id` claim. */
+export function resolveAppUserId(account?: AccountLike | null): string | null {
+  if (account?.id != null && String(account.id).trim() !== '') {
+    return String(account.id);
+  }
+  const token = getAccessToken();
+  if (!token) return null;
+  const payload = decodeJwtPayload(token) as { user_id?: number | string } | null;
+  if (payload?.user_id != null && String(payload.user_id).trim() !== '') {
+    return String(payload.user_id);
+  }
+  return null;
+}
+
+export async function configureRevenueCat(): Promise<boolean> {
+  if (!isNativePlatform()) return false;
+  if (configured) return true;
+  if (configurePromise) {
+    await configurePromise;
+    return configured;
+  }
+
+  configurePromise = (async () => {
+    const apiKey = revenueCatApiKey();
+    if (!apiKey) {
+      console.warn(
+        'RevenueCat API key missing (REACT_APP_REVENUECAT_APPLE_API_KEY / GOOGLE).'
+      );
+      return;
+    }
+    await Purchases.configure({ apiKey });
+    configured = true;
+  })();
+
+  try {
+    await configurePromise;
+  } finally {
+    configurePromise = null;
+  }
+  return configured;
+}
+
+export async function logInRevenueCat(
+  appUserIdOrAccount?: string | AccountLike | null
+): Promise<void> {
+  if (!isNativePlatform()) return;
+  const appUserID =
+    typeof appUserIdOrAccount === 'string'
+      ? appUserIdOrAccount
+      : resolveAppUserId(appUserIdOrAccount);
+  if (!appUserID) {
+    console.warn('RevenueCat logIn skipped: no app user id');
+    return;
+  }
+  const ready = await configureRevenueCat();
+  if (!ready) return;
+  await Purchases.logIn({ appUserID });
+}
+
+export async function logOutRevenueCat(): Promise<void> {
+  if (!isNativePlatform()) return;
+  if (!configured) return;
+  try {
+    await Purchases.logOut();
+  } catch (error) {
+    // Anonymous / already logged out — ignore.
+    console.warn('RevenueCat logOut', error);
+  }
+}
+
+function packageMatchesPlan(pkg: PurchasesPackage, planSlug: string): boolean {
+  const slug = planSlug.toLowerCase();
+  const id = (pkg.identifier || '').toLowerCase();
+  const productId = (pkg.product?.identifier || '').toLowerCase();
+  return id === slug || id.includes(slug) || productId.includes(slug);
+}
+
+async function resolvePackageForPlan(
+  planSlug?: string
+): Promise<PurchasesPackage> {
+  const offerings = await Purchases.getOfferings();
+  const offeringId = (process.env.REACT_APP_REVENUECAT_OFFERING_ID || '').trim();
+  const offering =
+    (offeringId && offerings.all?.[offeringId]) || offerings.current || null;
+  if (!offering) {
+    throw new Error('No RevenueCat offerings available. Check the RC dashboard.');
+  }
+
+  const packages = offering.availablePackages || [];
+  if (!packages.length) {
+    throw new Error('RevenueCat offering has no packages.');
+  }
+
+  if (planSlug) {
+    const match = packages.find((pkg) => packageMatchesPlan(pkg, planSlug));
+    if (match) return match;
+    throw new Error(`No store package matches plan "${planSlug}".`);
+  }
+
+  return (
+    offering.monthly ||
+    packages.find((pkg) => (pkg.identifier || '').includes('monthly')) ||
+    packages[0]
+  );
+}
+
+export async function purchasePlan(planSlug?: string): Promise<void> {
+  if (!isNativePlatform()) {
+    throw new Error('Store purchases are only available in the mobile app.');
+  }
+  const ready = await configureRevenueCat();
+  if (!ready) {
+    throw new Error('RevenueCat is not configured. Missing API key.');
+  }
+  const aPackage = await resolvePackageForPlan(planSlug);
+  await Purchases.purchasePackage({ aPackage });
+}
+
+export async function restorePurchases(): Promise<void> {
+  if (!isNativePlatform()) {
+    throw new Error('Restore is only available in the mobile app.');
+  }
+  const ready = await configureRevenueCat();
+  if (!ready) {
+    throw new Error('RevenueCat is not configured. Missing API key.');
+  }
+  await Purchases.restorePurchases();
+}
+
+export function isPurchaseCancelledError(error: unknown): boolean {
+  const err = error as { userCancelled?: boolean; code?: number | string };
+  if (err?.userCancelled === true) return true;
+  // PURCHASES_ERROR_CODE.PURCHASE_CANCELLED_ERROR === 1
+  return err?.code === 1 || err?.code === '1' || err?.code === 'PURCHASE_CANCELLED';
+}
@@ -0,0 +1,17 @@
+type ToastListener = (message: string, severity: 'error' | 'success' | 'info') => void;
+
+const listeners = new Set<ToastListener>();
+
+export function subscribeToast(listener: ToastListener): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function showToast(
+  message: string,
+  severity: 'error' | 'success' | 'info' = 'info',
+): void {
+  listeners.forEach((listener) => listener(message, severity));
+}
@@ -0,0 +1,98 @@
+import {
+  parseCitationsData,
+  parseStatusData,
+  parseVersionedFrame,
+} from './wsFrames';
+
+describe('wsFrames', () => {
+  it('parses a citations frame', () => {
+    const raw = JSON.stringify({
+      v: 1,
+      type: 'citations',
+      data: [
+        {
+          index: 1,
+          title: 'Example',
+          url: 'https://example.com',
+          published_at: '2026-07-03',
+        },
+      ],
+    });
+    const frame = parseVersionedFrame(raw);
+    expect(frame).toEqual({
+      v: 1,
+      type: 'citations',
+      data: [
+        {
+          index: 1,
+          title: 'Example',
+          url: 'https://example.com',
+          published_at: '2026-07-03',
+        },
+      ],
+    });
+    expect(parseCitationsData(frame!.data)).toHaveLength(1);
+  });
+
+  it('ignores unknown types without throwing', () => {
+    const frame = parseVersionedFrame(
+      JSON.stringify({ v: 1, type: 'status', data: { stage: 'search' } }),
+    );
+    expect(frame?.type).toBe('status');
+  });
+
+  it('returns null for sentinels and plain text', () => {
+    expect(parseVersionedFrame('END_OF_THE_STREAM_ENDER_GAME_42')).toBeNull();
+    expect(parseVersionedFrame('hello world')).toBeNull();
+  });
+
+  it('returns empty citations for bad data', () => {
+    expect(parseCitationsData(null)).toEqual([]);
+    expect(parseCitationsData('nope')).toEqual([]);
+  });
+
+  it('parses a status frame', () => {
+    const raw = JSON.stringify({
+      v: 1,
+      type: 'status',
+      data: { stage: 'searching', label: 'Searching the web', detail: 'query: cats' },
+    });
+    const frame = parseVersionedFrame(raw);
+    expect(frame?.type).toBe('status');
+    expect(parseStatusData(frame!.data)).toEqual({
+      stage: 'searching',
+      label: 'Searching the web',
+      detail: 'query: cats',
+    });
+  });
+
+  it('parses status data with no detail as null', () => {
+    expect(parseStatusData({ stage: 'writing', label: 'Writing the answer' })).toEqual({
+      stage: 'writing',
+      label: 'Writing the answer',
+      detail: null,
+    });
+  });
+
+  it('passes through unknown/future stage values verbatim', () => {
+    expect(
+      parseStatusData({ stage: 'some_future_stage', label: 'Doing something new' }),
+    ).toEqual({
+      stage: 'some_future_stage',
+      label: 'Doing something new',
+      detail: null,
+    });
+  });
+
+  it('returns null for malformed status data without throwing', () => {
+    expect(parseStatusData(null)).toBeNull();
+    expect(parseStatusData(undefined)).toBeNull();
+    expect(parseStatusData('nope')).toBeNull();
+    expect(parseStatusData([])).toBeNull();
+    expect(parseStatusData({})).toBeNull();
+    expect(parseStatusData({ stage: 'searching' })).toBeNull();
+    expect(parseStatusData({ label: 'Searching the web' })).toBeNull();
+    expect(parseStatusData({ stage: 123, label: 'Searching' })).toBeNull();
+    expect(parseStatusData({ stage: 'searching', label: 42 })).toBeNull();
+  });
+});
@@ -0,0 +1,79 @@
+/**
+ * Versioned WebSocket frame envelopes shared by citations (#98) and status (#96).
+ * Shape: { v: 1, type: string, data: unknown }
+ */
+
+export type VersionedFrame = {
+  v: number;
+  type: string;
+  data: unknown;
+};
+
+export type Citation = {
+  index: number;
+  title: string;
+  url: string;
+  published_at?: string | null;
+};
+
+export function parseVersionedFrame(raw: string): VersionedFrame | null {
+  const trimmed = raw?.trim?.() ?? '';
+  if (!trimmed.startsWith('{')) return null;
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (
+      parsed &&
+      typeof parsed === 'object' &&
+      typeof parsed.v === 'number' &&
+      typeof parsed.type === 'string'
+    ) {
+      return {
+        v: parsed.v,
+        type: parsed.type,
+        data: parsed.data,
+      };
+    }
+  } catch {
+    // not JSON — fall through to sentinel / stream text handling
+  }
+  return null;
+}
+
+export type StatusFrameData = {
+  stage: string;
+  label: string;
+  detail?: string | null;
+};
+
+export type ActivityHistoryEntry = {
+  stage: string;
+  label: string;
+  startedAt: number;
+  finishedAt: number;
+};
+
+export function parseStatusData(data: unknown): StatusFrameData | null {
+  if (!data || typeof data !== 'object') return null;
+  const obj = data as Record<string, unknown>;
+  if (typeof obj.stage !== 'string' || !obj.stage) return null;
+  // label may be empty (e.g. stage "writing" — tokens take over)
+  if (typeof obj.label !== 'string') return null;
+  const detail = typeof obj.detail === 'string' ? obj.detail : null;
+  return { stage: obj.stage, label: obj.label, detail };
+}
+
+export function parseCitationsData(data: unknown): Citation[] {
+  if (!Array.isArray(data)) return [];
+  return data
+    .filter(
+      (item): item is Record<string, unknown> =>
+        !!item && typeof item === 'object' && typeof (item as { index?: unknown }).index === 'number',
+    )
+    .map((item) => ({
+      index: item.index as number,
+      title: typeof item.title === 'string' ? item.title : `Source ${item.index}`,
+      url: typeof item.url === 'string' ? item.url : '',
+      published_at:
+        typeof item.published_at === 'string' ? item.published_at : null,
+    }));
+}
@@ -9,6 +9,7 @@ interface CapacitorPreferencesPlugin {
 interface CapacitorBridge {
  isNativePlatform?: () => boolean;
  isNative?: boolean;
+  getPlatform?: () => string;
  Plugins?: {
    Preferences?: CapacitorPreferencesPlugin;
    App?: { addListener?: (...args: unknown[]) => unknown };
@@ -3,3 +3,16 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+// Capacitor plugin ships ESM; Jest cannot parse it when AccountContext
+// (or pages that import it) pull in utils/revenueCat. Stub globally.
+jest.mock('@revenuecat/purchases-capacitor', () => ({
+  Purchases: {
+    configure: jest.fn(() => Promise.resolve()),
+    logIn: jest.fn(() => Promise.resolve({ customerInfo: {} })),
+    logOut: jest.fn(() => Promise.resolve({ customerInfo: {} })),
+    getOfferings: jest.fn(() => Promise.resolve({ current: null, all: {} })),
+    purchasePackage: jest.fn(() => Promise.resolve({ customerInfo: {} })),
+    restorePurchases: jest.fn(() => Promise.resolve({ customerInfo: {} })),
+  },
+}));
Author	SHA1	Message	Date
westfarn	d6cfdeb6f0	Default chat to THINKING; open citations in new tab (#106 , #108 ). Drop Sources card; inline [n] opens the source URL. Lock composer to THINKING while model picker stays hidden.	2026-08-04 12:22:05 -05:00
westfarn	a13108b840	Remove FAST/THINKING model dropdown from chat composer (#106 ). Unit Tests / test (pull_request) Successful in 12s Details Hide mode selection from users; keep sending fixed FAST so the backend contract stays intact.	2026-08-04 12:16:44 -05:00
westfarn	27b4fd7698	Settings toggle: use previous conversations as context / RAG (#66 ) (#105 ) Deploy Beta / unit-tests (push) Successful in 12s Details Unit Tests / test (push) Successful in 11s Details Deploy Beta / deploy-beta (push) Successful in 2m22s Details ## Summary - Closes [#66](#66) — Account Preferences toggle for previous-conversation context / RAG. - Reads/writes `use_conversation_context` via `GET/POST /conversation_preferences` (backend [#33](ai_ml_operations/chat_backend#33)). - Default off; MUI tooltip explains use of previous conversations; loading + error states with revert on failed update. ## Depends on Backend PR for [chat_backend#33](ai_ml_operations/chat_backend#33) (merge/deploy backend first or together). ## Test plan - [ ] Open `/account/` — toggle visible under Account Preferences, off by default - [ ] Hover info icon — tooltip about previous conversations customizing experience - [ ] Toggle on — persists after reload; toggle off — persists - [ ] Simulate API failure — value reverts and error alert shown - [ ] Disable while loading/savingReviewed-on: #105	2026-08-04 06:28:12 -07:00
westfarn	fb3e138ea2	Fix MessageContext exhaustive-deps for CI builds Deploy Beta / unit-tests (push) Successful in 12s Details Unit Tests / test (push) Successful in 11s Details Deploy Beta / deploy-beta (push) Successful in 2m24s Details Stabilize schedulePostStreamRefetch with useCallback so CI=true ESLint no longer fails beta deploy.	2026-08-04 07:05:55 -05:00
westfarn	a7c5d1a2aa	Drop docx export to fix CRA beta build Unit Tests / test (push) Successful in 11s Details Deploy Beta / unit-tests (push) Successful in 12s Details Deploy Beta / deploy-beta (push) Failing after 2m28s Details docx@9 ESM trips Babel during react-scripts build; keep PDF/CSV/XLSX/TXT.	2026-08-04 06:22:54 -05:00
westfarn	3313738990	Live activity indicator replacing typing dots (#96 ) (#104 ) Deploy Beta / unit-tests (push) Successful in 12s Details Unit Tests / test (push) Successful in 11s Details Deploy Beta / deploy-beta (push) Failing after 2m16s Details ## Summary - Closes [#96](#96). - Parses versioned WS `status` frames in `MessageContext` (`activityStage` / `label` / `detail` / `history`). - New `ActivityIndicator`: completed stages with checks, ~400ms min display, elapsed/still-working notes, a11y live region, reduced-motion, dots fallback when no frames. - Wired through `ConversationDetailCard` + `AsyncDashboard2`; analytics `ACTIVITY_STAGE_COMPLETED`. ## Depends on Backend status emission from [chat_backend PR](https://git.aimloperations.com/ai_ml_operations/chat_backend/pulls) (`feat/62-p4-evals-63-agentic`). Without it, UI keeps three-dot fallback. ## Test plan - [x] Jest: `wsFrames`, `ActivityIndicator`, `ConversationDetailCard`, `MessageContext` - [ ] Manual light/dark + 320px width - [ ] Manual with backend status frames: Evaluating → Searching → Refining - [ ] Manual: stream interrupt clears indicator - [ ] Capacitor Android smokeReviewed-on: #104	2026-08-04 04:08:57 -07:00
westfarn	ce86f56d37	RevenueCat Capacitor IAP; keep Stripe on web (#100 ) (#102 ) Deploy Beta / unit-tests (push) Successful in 12s Details Unit Tests / test (push) Successful in 11s Details Deploy Beta / deploy-beta (push) Failing after 2m20s Details ## Summary - Native Capacitor: RevenueCat purchase/restore (`@revenuecat/purchases-capacitor`) - Web: Stripe checkout/portal unchanged - Billing history shows store rows (`provider` / `revenuecat_store`) - RC `logIn`/`logOut` on auth lifecycle; appUserID = user pk Closes #100. Depends on backend [chat_backend#68](ai_ml_operations/chat_backend#68) / monetization PR. ## Test plan - [x] Unit tests: BillingSection, revenueCat, finance helpers, SignIn/Up, AuthCallback, Header2, DeleteAccount (38 OK) - [ ] Fill `REACT_APP_REVENUECAT_*` keys in `.env.mobile` - [ ] Align RC offerings/products with plan slugs - [ ] `npm run build:mobile` + `cap sync`; sandbox purchase on Android/iOS - [ ] Confirm web Stripe checkout/portal still work - [ ] After RC webhook, Account → Billing history shows store invoiceReviewed-on: #102	2026-08-04 03:43:10 -07:00
westfarn	3858b97104	Message actions + citation Sources (#97 , #98 ) (#101 ) Deploy Beta / unit-tests (push) Successful in 11s Details Unit Tests / test (push) Successful in 12s Details Deploy Beta / deploy-beta (push) Failing after 2m10s Details ## Summary - Closes [#97](#97) — message action row: copy (raw markdown + code-block copy), thumbs up/down with optimistic updates + down-reason popover, and export menu (PDF / DOCX / CSV / XLSX / TXT) for a single message plus conversation-level export in the chat toolbar. - Closes [#98](#98) — versioned WS `citations` frame parsing, Sources list under assistant bubbles, clickable `[n]` markers, and history hydrate from `Prompt.citations`. - Backend companion for ratings: [chat_backend#67](ai_ml_operations/chat_backend#67). Thumbs UI posts to `prompt_feedback` once that lands; votes rehydrate from `conversation_details.feedback`. - Export libs (`pdfmake`, `docx`, `papaparse`, `xlsx`) are dynamically imported so they stay out of the main path until used. ## Test plan - [ ] Stream a grounded answer → Sources appear after stream; inline `[n]` highlights the matching source; reload keeps Sources. - [ ] Non-grounded turn → no Sources header. - [ ] Copy message + code block; confirm checkmark ~2s; failure path shows toast. - [ ] Thumbs up/down optimistic UI; clear by re-click; down opens reason popover without blocking the vote (needs chat_backend#67). - [ ] Export one message and whole conversation in all five formats; check searchable PDF text and DOCX structure. - [ ] Action row: hover reveal on desktop, always visible on last/touch; hidden while streaming. - [ ] `npm test -- --testPathPattern='wsFrames\|clipboard\|exportChat\|promptFeedback\|ConversationDetailCard'`Reviewed-on: #101	2026-08-04 03:32:17 -07:00
westfarn	5be66dbaa7	iOS App (#99 ) Deploy Beta / unit-tests (push) Successful in 11s Details Unit Tests / test (push) Successful in 11s Details Deploy Beta / deploy-beta (push) Successful in 2m4s Details closes #21Reviewed-on: #99	2026-08-03 12:14:21 -07:00