closess #22

Docs sync progress, Personal/Company list UX, Analytics heatmap (#92–#94) (#95 )
## Summary - **#92** — Drive sync progress bar (determinate when total known; indeterminate while listing). - **#93** — Documents list: Personal vs Company title, company helper copy only on company scope, Personal|Company tabs for company members, search/sort/pagination. - **#94** — Analytics overhaul: Your activity (heatmap + volume charts) vs Company section for managers/members. Depends on backend PR for #59/#60 + heatmap API. ## Test plan - [x] Jest: DocumentStoragePage, Analytics, drive utils - [ ] Manual: Sync Now shows progress N/M - [ ] Manual: company user tabs Personal/Company; personal-only users see Personal documents only - [ ] Manual: Analytics shows heatmap under Your activity Closes #92 Closes #93 Closes #94Reviewed-on: #95
2026-08-03 12:13:59 -07:00 · 2026-08-02 04:50:20 -07:00 · 2026-08-02 04:07:22 -07:00 · 2026-08-02 03:39:35 -07:00 · 2026-08-01 14:01:13 -07:00 · 2026-08-01 13:04:51 -07:00
107 changed files with 4679 additions and 327 deletions
@@ -23,6 +23,18 @@
 *.keystore
 *.jks

+# Capacitor / iOS CocoaPods + build artifacts (keep ios/ source; ignore Pods / DerivedData)
+/ios/App/Pods/
+/ios/App/build/
+/ios/App/output/
+/ios/App/App/public/
+/ios/DerivedData/
+/ios/**/xcuserdata/
+*.mobileprovision
+*.p12
+*.cer
+ExportOptions.plist
+
 # misc
 .DS_Store
 .env.local
@@ -20,7 +20,13 @@ Page views: always via `Tracker` / `tracker.js` on prod + beta.
 | Conversation Created | `CONVERSATION_CREATED` | MessageContext | `{ conversationId }` |
 | Message Sent | `MESSAGE_SENT` | AsyncDashboard2 | `{ hasConversation, hasAttachment }` |
 | ToS Acknowledged | `TOS_ACKNOWLEDGED` | TermsOfService | — |
-| Billing Portal Opened | `BILLING_PORTAL_OPENED` | BillingSection (Account) | — |
+| Billing Portal Opened | `BILLING_PORTAL_OPENED` | BillingSection (Account) | `{ intent? }` |
+| Subscription Upgrade Started | `SUBSCRIPTION_UPGRADE_STARTED` | BillingSection, UsageSummaryCard | `{ source, plan_slug? }` |
+| Plan Change Started | `PLAN_CHANGE_STARTED` | BillingSection | `{ source, plan_slug? }` |
+| Subscription Cancel Started | `SUBSCRIPTION_CANCEL_STARTED` | BillingSection | `{ source: 'portal' }` |
+| Account Delete Started | `ACCOUNT_DELETE_STARTED` | DeleteAccountSection | — |
+| Account Delete Success | `ACCOUNT_DELETE_SUCCESS` | DeleteAccountSection | — |
+| Account Delete Failed | `ACCOUNT_DELETE_FAILED` | DeleteAccountSection | — |

 ## Identify

@@ -1,9 +1,10 @@
 # Android (Capacitor)

 Ship the CRA web build as an Android app via [Capacitor](https://capacitorjs.com/).
-One codebase: `llm-fe/` → web + Android WebView.
+One codebase: `llm-fe/` → web + Android + iOS WebView.

 **Build & Play deploy steps:** [`android/README.md`](android/README.md).
+**iOS sibling:** [`IOS.md`](IOS.md) / [`ios/README.md`](ios/README.md).

 Prerequisites for blockers already merged: JWT-only auth (#22), WebSocket lifecycle (#23), HashRouter (#24).

@@ -63,6 +64,8 @@ Regenerate Android densities after changing source art:
 npm run assets:generate
 ```

+Same command also regenerates iOS `Assets.xcassets` (see [`IOS.md`](IOS.md)).
+
 ## Signing (upload keystore)

 **Never commit keystores.** Store outside the repo (e.g. host secrets / password manager).
@@ -0,0 +1,111 @@
+# iOS (Capacitor)
+
+Ship the CRA web build as an iOS app via [Capacitor](https://capacitorjs.com/)
+WKWebView. One codebase: `llm-fe/` → web + Android + iOS.
+
+**Build & Xcode steps:** [`ios/README.md`](ios/README.md).
+
+Prerequisites already merged: JWT-only auth (#22), WebSocket lifecycle (#23),
+HashRouter (#24), Android Capacitor scaffolding (#20).
+
+## Prerequisites
+
+- **macOS** with **Xcode** 15+ (CI runners are Linux — iOS builds are **manual**
+  on a Mac until a hosted macOS runner is added)
+- **Node.js 20** (matches CI; Capacitor **7.x**)
+- **CocoaPods** (`sudo gem install cocoapods` or Homebrew `pod`)
+- Apple Developer Program membership for device / TestFlight / App Store signing
+  (simulator debug runs without a paid membership using automatic signing)
+
+## One-time / day-to-day
+
+```bash
+cd llm-fe
+npm ci
+npm run build:mobile   # .env.mobile → CRA build → cap sync (android + ios)
+npm run ios:open       # opens ios/App/App.xcworkspace in Xcode
+```
+
+Or sync only after an existing `build/`:
+
+```bash
+npm run ios:sync
+```
+
+**Always open the `.xcworkspace`**, not the `.xcodeproj` (CocoaPods).
+
+## Environment
+
+Same as Android — see [`ANDROID.md`](ANDROID.md) § Environment.
+
+| File | Purpose |
+|------|---------|
+| `.env.mobile` | Endpoints baked into the **mobile** bundle (`build:mobile`) |
+| `.env.mobile.local` | Optional gitignored override |
+
+Default `.env.mobile` points at production (`chatbackend.aimloperations.com`).
+
+WebView origin is `capacitor://localhost`. Backend CORS/CSRF already trusts it
+(`chat_backend` `CAPACITOR_WEBVIEW_ORIGINS`). Auth is header JWT — no cookies.
+
+## Versioning
+
+In Xcode target **App** → General, or `ios/App/App.xcodeproj/project.pbxproj`:
+
+| Field | Xcode / build setting | Align with |
+|-------|----------------------|------------|
+| Version | `MARKETING_VERSION` (`CFBundleShortVersionString`) | `package.json` `version` + Android `versionName` (currently `0.1.0`) |
+| Build | `CURRENT_PROJECT_VERSION` (`CFBundleVersion`) | Android `versionCode` (integer; **must increase** every TestFlight / App Store upload) |
+
+## Icons / splash
+
+Source art in `llm-fe/assets/` (same as Android):
+
+- `icon.png` / `splash.png` / `splash-dark.png`
+
+Regenerate iOS + Android densities:
+
+```bash
+npm run assets:generate
+```
+
+## Signing
+
+**Never commit certificates, profiles, or `.p12` files.**
+
+1. Xcode → Signing & Capabilities → Team (Automatic for debug / internal).
+2. Bundle ID: **`ai.hesychia.chat`** (matches Android `applicationId` / Capacitor `appId`).
+3. For distribution: App Store Connect app, distribution cert, provisioning profile
+   — keep credentials outside the repo (password manager / CI secrets later).
+
+## Manual QA checklist
+
+On **simulator and physical iPhone**:
+
+- [ ] Login / logout / password reset
+- [ ] Chat streaming + markdown / code blocks (selection + copy)
+- [ ] Charts (`recharts`)
+- [ ] Dark / light theme
+- [ ] Keyboard does not cover compose input; notch / Dynamic Island / home indicator OK
+- [ ] No rubber-band overscroll on chat shell
+- [ ] Background → resume keeps or reconnects WebSocket (`appStateChange` + visibility)
+- [ ] Cellular ↔ Wi‑Fi switch reconnects socket
+- [ ] Airplane mode → restore reconnects
+
+## TestFlight / App Store (follow-on)
+
+Out of band (not automated here; separate deploy tickets):
+
+1. Apple Developer Program + App ID `ai.hesychia.chat`
+2. Privacy policy URL + App Privacy questionnaire
+3. In-app account deletion if sign-up is offered (guideline)
+4. Enough native shell value that review does not reject as 4.2 “repackaged website”
+5. Archive → Upload → TestFlight internal → App Store
+
+Push notifications, offline cache, Sign in with Apple — out of scope for this wrap.
+
+## Related issues
+
+- [#21](https://git.aimloperations.com/ai_ml_operations/chat_web_app/issues/21) — this iOS wrap
+- [#20](https://git.aimloperations.com/ai_ml_operations/chat_web_app/issues/20) — Android scaffolding
+- [#22](https://git.aimloperations.com/ai_ml_operations/chat_web_app/issues/22) / [#23](https://git.aimloperations.com/ai_ml_operations/chat_web_app/issues/23) / [#24](https://git.aimloperations.com/ai_ml_operations/chat_web_app/issues/24) — auth / WS / routing
@@ -6,11 +6,20 @@ const config: CapacitorConfig = {
  webDir: 'build',
  server: {
    // Bundled assets; HashRouter (#24) handles deep links without a rewrite server.
+    // Android: https://localhost — iOS: capacitor://localhost (CORS trusted in chat_backend).
    androidScheme: 'https',
+    iosScheme: 'capacitor',
  },
  android: {
    allowMixedContent: false,
  },
+  ios: {
+    // Prefer content-driven insets; CSS env(safe-area-inset-*) handles notch / home indicator.
+    contentInset: 'automatic',
+    // Keep WebView scroll on; rubber-band bounce disabled in AppDelegate after load.
+    scrollEnabled: true,
+    preferredContentMode: 'mobile',
+  },
  plugins: {
    SplashScreen: {
      launchAutoHide: true,
@@ -0,0 +1,20 @@
+App/build
+App/Pods
+App/output
+App/App/public
+DerivedData
+xcuserdata
+
+# Cordova plugins for Capacitor
+capacitor-cordova-ios-plugins
+
+# Generated Config files
+App/App/capacitor.config.json
+App/App/config.xml
+
+# Signing / export artifacts — never commit
+*.mobileprovision
+*.p12
+*.cer
+ExportOptions.plist
+*.ipa
@@ -0,0 +1,408 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 48;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; };
+		50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
+		504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; };
+		504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; };
+		504EC30F1FED79650016851F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30E1FED79650016851F /* Assets.xcassets */; };
+		504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; };
+		50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
+		A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXFileReference section */
+		2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = "<group>"; };
+		50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
+		504EC3041FED79650016851F /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		504EC30C1FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
+		504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
+		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
+		AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+		AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
+		FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		504EC3011FED79650016851F /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		27E2DDA53C4D2A4D1A88CE4A /* Frameworks */ = {
+			isa = PBXGroup;
+			children = (
+				AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */,
+			);
+			name = Frameworks;
+			sourceTree = "<group>";
+		};
+		504EC2FB1FED79650016851F = {
+			isa = PBXGroup;
+			children = (
+				504EC3061FED79650016851F /* App */,
+				504EC3051FED79650016851F /* Products */,
+				7F8756D8B27F46E3366F6CEA /* Pods */,
+				27E2DDA53C4D2A4D1A88CE4A /* Frameworks */,
+			);
+			sourceTree = "<group>";
+		};
+		504EC3051FED79650016851F /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				504EC3041FED79650016851F /* App.app */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		504EC3061FED79650016851F /* App */ = {
+			isa = PBXGroup;
+			children = (
+				50379B222058CBB4000EE86E /* capacitor.config.json */,
+				504EC3071FED79650016851F /* AppDelegate.swift */,
+				504EC30B1FED79650016851F /* Main.storyboard */,
+				504EC30E1FED79650016851F /* Assets.xcassets */,
+				504EC3101FED79650016851F /* LaunchScreen.storyboard */,
+				504EC3131FED79650016851F /* Info.plist */,
+				2FAD9762203C412B000D30F8 /* config.xml */,
+				50B271D01FEDC1A000F3C39B /* public */,
+			);
+			path = App;
+			sourceTree = "<group>";
+		};
+		7F8756D8B27F46E3366F6CEA /* Pods */ = {
+			isa = PBXGroup;
+			children = (
+				FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */,
+				AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */,
+			);
+			name = Pods;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		504EC3031FED79650016851F /* App */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */;
+			buildPhases = (
+				6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */,
+				504EC3001FED79650016851F /* Sources */,
+				504EC3011FED79650016851F /* Frameworks */,
+				504EC3021FED79650016851F /* Resources */,
+				9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = App;
+			productName = App;
+			productReference = 504EC3041FED79650016851F /* App.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		504EC2FC1FED79650016851F /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastSwiftUpdateCheck = 920;
+				LastUpgradeCheck = 920;
+				TargetAttributes = {
+					504EC3031FED79650016851F = {
+						CreatedOnToolsVersion = 9.2;
+						LastSwiftMigration = 1100;
+						ProvisioningStyle = Automatic;
+					};
+				};
+			};
+			buildConfigurationList = 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */;
+			compatibilityVersion = "Xcode 8.0";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 504EC2FB1FED79650016851F;
+			packageReferences = (
+			);
+			productRefGroup = 504EC3051FED79650016851F /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				504EC3031FED79650016851F /* App */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		504EC3021FED79650016851F /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */,
+				50B271D11FEDC1A000F3C39B /* public in Resources */,
+				504EC30F1FED79650016851F /* Assets.xcassets in Resources */,
+				50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
+				504EC30D1FED79650016851F /* Main.storyboard in Resources */,
+				2FAD9763203C412B000D30F8 /* config.xml in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-App-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "[CP] Embed Pods Frameworks";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-App/Pods-App-frameworks.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		504EC3001FED79650016851F /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXVariantGroup section */
+		504EC30B1FED79650016851F /* Main.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC30C1FED79650016851F /* Base */,
+			);
+			name = Main.storyboard;
+			sourceTree = "<group>";
+		};
+		504EC3101FED79650016851F /* LaunchScreen.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				504EC3111FED79650016851F /* Base */,
+			);
+			name = LaunchScreen.storyboard;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		504EC3141FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+			};
+			name = Debug;
+		};
+		504EC3151FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+		504EC3171FED79650016851F /* Debug */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				MARKETING_VERSION = 0.1.0;
+				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
+				PRODUCT_BUNDLE_IDENTIFIER = ai.hesychia.chat;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Debug;
+		};
+		504EC3181FED79650016851F /* Release */ = {
+			isa = XCBuildConfiguration;
+			baseConfigurationReference = AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				CURRENT_PROJECT_VERSION = 1;
+				INFOPLIST_FILE = App/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				MARKETING_VERSION = 0.1.0;
+				PRODUCT_BUNDLE_IDENTIFIER = ai.hesychia.chat;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
+				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3141FED79650016851F /* Debug */,
+				504EC3151FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				504EC3171FED79650016851F /* Debug */,
+				504EC3181FED79650016851F /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 504EC2FC1FED79650016851F /* Project object */;
+}
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:App.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
@@ -0,0 +1,64 @@
+import UIKit
+import Capacitor
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+    var window: UIWindow?
+
+    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        // Disable WKWebView rubber-band overscroll so the MUI chat layout feels native.
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(disableWebViewBounce),
+            name: UIApplication.didBecomeActiveNotification,
+            object: nil
+        )
+        return true
+    }
+
+    @objc private func disableWebViewBounce() {
+        guard let root = window?.rootViewController else { return }
+        applyNoBounce(to: root)
+    }
+
+    private func applyNoBounce(to controller: UIViewController) {
+        if let bridge = controller as? CAPBridgeViewController,
+           let scrollView = bridge.webView?.scrollView {
+            scrollView.bounces = false
+            scrollView.alwaysBounceVertical = false
+            scrollView.alwaysBounceHorizontal = false
+        }
+        for child in controller.children {
+            applyNoBounce(to: child)
+        }
+        if let presented = controller.presentedViewController {
+            applyNoBounce(to: presented)
+        }
+    }
+
+    func applicationWillResignActive(_ application: UIApplication) {
+    }
+
+    func applicationDidEnterBackground(_ application: UIApplication) {
+    }
+
+    func applicationWillEnterForeground(_ application: UIApplication) {
+    }
+
+    func applicationDidBecomeActive(_ application: UIApplication) {
+        disableWebViewBounce()
+    }
+
+    func applicationWillTerminate(_ application: UIApplication) {
+    }
+
+    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
+        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
+    }
+
+    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
+    }
+
+}
@@ -0,0 +1,14 @@
+{
+  "images": [
+    {
+      "idiom": "universal",
+      "size": "1024x1024",
+      "filename": "AppIcon-512@2x.png",
+      "platform": "ios"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
@@ -0,0 +1,56 @@
+{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "Default@1x~universal~anyany.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "Default@2x~universal~anyany.png",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "Default@3x~universal~anyany.png",
+      "scale": "3x"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "scale": "1x",
+      "filename": "Default@1x~universal~anyany-dark.png"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "scale": "2x",
+      "filename": "Default@2x~universal~anyany-dark.png"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "scale": "3x",
+      "filename": "Default@3x~universal~anyany-dark.png"
+    }
+  ],
+  "info": {
+    "version": 1,
+    "author": "xcode"
+  }
+}
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17132" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17105"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <imageView key="view" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Splash" id="snD-IY-ifK">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                    </imageView>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="Splash" width="1366" height="1366"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14111" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+    </dependencies>
+    <scenes>
+        <!--Bridge View Controller-->
+        <scene sceneID="tne-QT-ifu">
+            <objects>
+                <viewController id="BYZ-38-t0r" customClass="CAPBridgeViewController" customModule="Capacitor" sceneMemberID="viewController"/>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
+            </objects>
+        </scene>
+    </scenes>
+</document>
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+        <string>Hesychia</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>$(MARKETING_VERSION)</string>
+	<key>CFBundleVersion</key>
+	<string>$(CURRENT_PROJECT_VERSION)</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIMainStoryboardFile</key>
+	<string>Main</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<true/>
+</dict>
+</plist>
@@ -0,0 +1,27 @@
+require_relative '../../node_modules/@capacitor/ios/scripts/pods_helpers'
+
+platform :ios, '14.0'
+use_frameworks!
+
+# workaround to avoid Xcode caching of Pods that requires
+# Product -> Clean Build Folder after new Cordova plugins installed
+# Requires CocoaPods 1.6 or newer
+install! 'cocoapods', :disable_input_output_paths => true
+
+def capacitor_pods
+  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
+  pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+end
+
+target 'App' do
+  capacitor_pods
+  # Add your Pods here
+end
+
+post_install do |installer|
+  assertDeploymentTarget(installer)
+end
@@ -0,0 +1,46 @@
+PODS:
+  - Capacitor (7.6.8):
+    - CapacitorCordova
+  - CapacitorApp (7.1.2):
+    - Capacitor
+  - CapacitorCordova (7.6.8)
+  - CapacitorKeyboard (7.0.6):
+    - Capacitor
+  - CapacitorPreferences (7.0.4):
+    - Capacitor
+  - CapacitorStatusBar (7.0.6):
+    - Capacitor
+
+DEPENDENCIES:
+  - "Capacitor (from `../../node_modules/@capacitor/ios`)"
+  - "CapacitorApp (from `../../node_modules/@capacitor/app`)"
+  - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
+  - "CapacitorKeyboard (from `../../node_modules/@capacitor/keyboard`)"
+  - "CapacitorPreferences (from `../../node_modules/@capacitor/preferences`)"
+  - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
+
+EXTERNAL SOURCES:
+  Capacitor:
+    :path: "../../node_modules/@capacitor/ios"
+  CapacitorApp:
+    :path: "../../node_modules/@capacitor/app"
+  CapacitorCordova:
+    :path: "../../node_modules/@capacitor/ios"
+  CapacitorKeyboard:
+    :path: "../../node_modules/@capacitor/keyboard"
+  CapacitorPreferences:
+    :path: "../../node_modules/@capacitor/preferences"
+  CapacitorStatusBar:
+    :path: "../../node_modules/@capacitor/status-bar"
+
+SPEC CHECKSUMS:
+  Capacitor: ff6bf01336ac353098378828aff465095a89e459
+  CapacitorApp: f01a913211780e0718dae9750442c3e23f96e106
+  CapacitorCordova: e61ee8c40101b8cd011d0224261606a290c082cf
+  CapacitorKeyboard: a2e0869edd229490ce36aed2549c0d6b95e27ee8
+  CapacitorPreferences: 69d9991307507aeab8ef8019c10b9babfda0e9ca
+  CapacitorStatusBar: 416e9e53fd6397e668d4a181cd2131617d949bd6
+
+PODFILE CHECKSUM: c2e7da979a3cb960e70090cd1956727cb3ca3413
+
+COCOAPODS: 1.16.2
@@ -0,0 +1,89 @@
+# Hesychia — iOS
+
+Native Capacitor project for `ai.hesychia.chat`. Web UI comes from the CRA
+`build/` output in the parent `llm-fe/` package (synced with `npx cap sync`).
+
+Broader Capacitor notes (env files, icons, QA, TestFlight): [`../IOS.md`](../IOS.md).
+
+## Prerequisites
+
+- macOS + **Xcode** 15+
+- Node.js **20**
+- **CocoaPods** (`pod --version`)
+- Open **`App.xcworkspace`** (not `.xcodeproj`)
+
+## Build the web bundle and sync
+
+From the **npm root** (`llm-fe/`, one level up):
+
+```bash
+cd ..
+npm ci
+npm run build:mobile    # .env.mobile → react-scripts build → cap sync
+```
+
+Open in Xcode:
+
+```bash
+npm run ios:open
+# or: npx cap open ios
+```
+
+Re-sync after changing web code (with an existing `build/`):
+
+```bash
+npm run ios:sync
+```
+
+Backend URLs are baked in at web-build time via `../.env.mobile` (prod by default).
+
+After cloning, if Pods are missing:
+
+```bash
+cd App
+pod install
+```
+
+## Run on a simulator / device
+
+1. Open `App/App.xcworkspace` in Xcode.
+2. Pick a simulator or a paired iPhone (Signing & Capabilities → your Team).
+3. Product → Run (⌘R).
+
+CLI (optional):
+
+```bash
+xcodebuild -workspace App/App.xcworkspace \
+  -scheme App \
+  -destination 'platform=iOS Simulator,name=iPhone 16' \
+  build
+```
+
+## Version before a store release
+
+Edit target **App** → General, or `App.xcodeproj` build settings:
+
+| Field | Build setting | Rule |
+|-------|---------------|------|
+| Version | `MARKETING_VERSION` | Keep in sync with `../package.json` `version` + Android `versionName` |
+| Build | `CURRENT_PROJECT_VERSION` | Integer; **must increase** for every TestFlight / App Store upload |
+
+Currently: version **0.1.0**, build **1**.
+
+## Signing
+
+**Do not commit** `.p12`, `.mobileprovision`, or export option files with secrets.
+
+Debug / simulator: Automatic signing with a personal team is enough.
+
+Distribution: App Store Connect + distribution certificate + profile — credentials
+live outside this repo. CI/TestFlight automation is a follow-on ticket.
+
+## Useful paths
+
+| Path | Purpose |
+|------|---------|
+| `App/App/AppDelegate.swift` | Disables WKWebView rubber-band bounce |
+| `App/App/Info.plist` | Display name **Hesychia**, version keys |
+| `App/App/Assets.xcassets` | App icon + splash (regenerate via `npm run assets:generate`) |
+| `App/Podfile` / `Podfile.lock` | CocoaPods (commit lockfile; Pods/ is gitignored) |
@@ -12,6 +12,7 @@
        "@capacitor/app": "^7.1.2",
        "@capacitor/cli": "^7.6.8",
        "@capacitor/core": "^7.6.8",
+        "@capacitor/ios": "^7.6.8",
        "@capacitor/keyboard": "^7.0.6",
        "@capacitor/preferences": "^7.0.4",
        "@capacitor/status-bar": "^7.0.6",
@@ -28,6 +29,7 @@
        "axios": "^1.13.2",
        "babel-loader": "^9.2.1",
        "bootstrap": "^5.3.3",
+        "brace-expansion": "file:vendor/brace-expansion-compat",
        "chroma-js": "^3.1.2",
        "formik": "^2.4.6",
        "jwt-decode": "^4.0.0",
@@ -46,8 +48,7 @@
        "web-vitals": "^4.2.4",
        "webpack": "^5.97.1",
        "webpack-cli": "^5.1.4",
-        "yup": "^1.5.0",
-        "brace-expansion": "file:vendor/brace-expansion-compat"
+        "yup": "^1.5.0"
      },
      "devDependencies": {
        "@capacitor/assets": "^3.0.5",
@@ -2458,6 +2459,15 @@
        "tslib": "^2.1.0"
      }
    },
+    "node_modules/@capacitor/ios": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-7.6.8.tgz",
+      "integrity": "sha512-TAM1FdI1Cfl8e/wLBo7x5m61V/J1fMEpyxU2psZzHzsa436k2pwEME6CQoBRYdw6Q6gud0jZSPwOVrNn+MI7Ag==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": "^7.6.0"
+      }
+    },
    "node_modules/@capacitor/keyboard": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.6.tgz",
@@ -3242,9 +3252,6 @@
        "arm"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3262,9 +3269,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3282,9 +3286,6 @@
        "ppc64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3302,9 +3303,6 @@
        "riscv64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3322,9 +3320,6 @@
        "s390x"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3342,9 +3337,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3362,9 +3354,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3382,9 +3371,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
@@ -3402,9 +3388,6 @@
        "arm"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3428,9 +3411,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3454,9 +3434,6 @@
        "ppc64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3480,9 +3457,6 @@
        "riscv64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3506,9 +3480,6 @@
        "s390x"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3532,9 +3503,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "glibc"
-      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3558,9 +3526,6 @@
        "arm64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -3584,9 +3549,6 @@
        "x64"
      ],
      "dev": true,
-      "libc": [
-        "musl"
-      ],
      "license": "Apache-2.0",
      "optional": true,
      "os": [
@@ -23622,6 +23584,7 @@
      }
    },
    "vendor/brace-expansion-compat": {
+      "name": "brace-expansion",
      "version": "5.0.8",
      "license": "MIT"
    }
@@ -7,6 +7,7 @@
    "@capacitor/app": "^7.1.2",
    "@capacitor/cli": "^7.6.8",
    "@capacitor/core": "^7.6.8",
+    "@capacitor/ios": "^7.6.8",
    "@capacitor/keyboard": "^7.0.6",
    "@capacitor/preferences": "^7.0.4",
    "@capacitor/status-bar": "^7.0.6",
@@ -49,10 +50,12 @@
    "build": "NODE_ENV=production react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build && mkdir -p /var/www/prod.chat.aimloperations/html && cp -r ./build/* /var/www/prod.chat.aimloperations/html/",
    "build:beta": "bash -c 'set -a; source .env.beta; set +a; NODE_ENV=production react-scripts build' && mkdir -p /var/www/beta.chat.aimloperations/html && cp -r ./build/* /var/www/beta.chat.aimloperations/html/",
-    "build:mobile": "bash -c 'set -a; source .env.mobile; set +a; NODE_ENV=production react-scripts build' && npx cap sync android",
+    "build:mobile": "bash -c 'set -a; source .env.mobile; set +a; NODE_ENV=production react-scripts build' && npx cap sync",
    "android:open": "npx cap open android",
    "android:sync": "npx cap sync android",
-    "assets:generate": "npx capacitor-assets generate --android",
+    "ios:open": "npx cap open ios",
+    "ios:sync": "npx cap sync ios",
+    "assets:generate": "npx capacitor-assets generate --ios --android",
    "test": "NODE_ENV=development react-scripts test",
    "test:ci": "CI=true NODE_ENV=development react-scripts test --watchAll=false --coverage=false",
    "eject": "react-scripts eject"
@@ -6,7 +6,7 @@
 /**
 * Absolute backend OAuth start URL.
 * @param {'google'|'microsoft'} provider
- * @param {'login'|'signup'} intent
+ * @param {'login'|'signup'|'link_drive'|'link_company_drive'} intent
 * @returns {string}
 */
 export function oauthStartUrl(provider, intent = 'login') {
@@ -18,7 +18,7 @@ export function oauthStartUrl(provider, intent = 'login') {
 /**
 * Begin browser redirect to IdP via backend.
 * @param {'google'|'microsoft'} provider
- * @param {'login'|'signup'} intent
+ * @param {'login'|'signup'|'link_drive'|'link_company_drive'} intent
 */
 export function startOAuth(provider, intent = 'login') {
  window.location.assign(oauthStartUrl(provider, intent));
@@ -20,6 +20,9 @@ jest.mock('../../utils/analytics', () => ({
  AnalyticsEvents: {
    BILLING_PORTAL_OPENED: 'Billing Portal Opened',
    CHECKOUT_STARTED: 'Checkout Started',
+    SUBSCRIPTION_UPGRADE_STARTED: 'Subscription Upgrade Started',
+    PLAN_CHANGE_STARTED: 'Plan Change Started',
+    SUBSCRIPTION_CANCEL_STARTED: 'Subscription Cancel Started',
  },
  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
 }));
@@ -52,30 +55,34 @@ const paidInvoice = {
  last_modified: '2026-07-01T12:00:00Z',
 };

-const foundersSubscription = {
-  plan: {
-    slug: 'founders',
-    name: 'Founders',
-    description: '',
-    price_cents: 1000,
-    currency: 'usd',
-    interval: 'month',
-    is_public: true,
-    is_selectable: true,
-    features: {
-      text_generation: true,
-      image_generation: true,
-      all_future_features: true,
-    },
-    prompt_quota_per_window: 300,
-    prompt_window_hours: 6,
-    monthly_token_quota: null,
-    sort_order: 10,
+const foundersPlan = {
+  slug: 'founders',
+  name: 'Founders',
+  description: '',
+  price_cents: 1000,
+  currency: 'usd',
+  interval: 'month',
+  is_public: true,
+  is_selectable: true,
+  features: {
+    text_generation: true,
+    image_generation: true,
+    all_future_features: true,
  },
+  prompt_quota_per_window: 300,
+  prompt_window_hours: 6,
+  monthly_token_quota: null,
+  sort_order: 10,
+};
+
+const foundersSubscription = {
+  plan: foundersPlan,
  status: 'active',
  source: 'stripe',
  needs_checkout: false,
  stripe_subscription_id: 'sub_test',
+  cancel_at_period_end: false,
+  current_period_end: '2026-08-01T00:00:00Z',
  usage: {
    prompts_in_window: 2,
    prompt_quota: 300,
@@ -92,12 +99,20 @@ const foundersSubscription = {
  },
 };

+const complimentarySubscription = {
+  ...foundersSubscription,
+  source: 'backer',
+  stripe_subscription_id: '',
+};
+
 const emptySubscription = {
  plan: null,
  status: 'none',
  source: 'none',
  needs_checkout: true,
  stripe_subscription_id: '',
+  cancel_at_period_end: false,
+  current_period_end: null,
  usage: {
    prompts_in_window: 0,
    prompt_quota: null,
@@ -120,10 +135,12 @@ const mockFinanceGets = ({
  invoices = [] as unknown[],
  payments = [] as unknown[],
  subscription = emptySubscription as SubscriptionMock,
+  plans = [foundersPlan] as unknown[],
 }: {
  invoices?: unknown[];
  payments?: unknown[];
  subscription?: SubscriptionMock;
+  plans?: unknown[];
 } = {}) => {
  mockGet.mockImplementation((url: string) => {
    if (url === '/finance/invoices/') {
@@ -135,6 +152,9 @@ const mockFinanceGets = ({
    if (url === '/finance/subscription/') {
      return Promise.resolve({ data: subscription });
    }
+    if (url === '/finance/plans/') {
+      return Promise.resolve({ data: plans });
+    }
    return Promise.reject(new Error(`unexpected GET ${url}`));
  });
 };
@@ -171,7 +191,7 @@ describe('BillingSection', () => {
    });
  });

-  it('renders plan summary and invoice history from finance APIs', async () => {
+  it('renders plan summary and paid subscription management CTAs', async () => {
    mockFinanceGets({
      invoices: [paidInvoice],
      subscription: foundersSubscription,
@@ -179,7 +199,10 @@ describe('BillingSection', () => {

    renderBilling();

-    expect(await screen.findByRole('button', { name: /Manage subscription/i })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: /^Upgrade$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Change plan/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Cancel$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Manage subscription/i })).toBeInTheDocument();
    expect(screen.getByText('Founders')).toBeInTheDocument();
    expect(screen.getByText(/298 \/ 300/)).toBeInTheDocument();
    expect(screen.getByText(/in — · out —/)).toBeInTheDocument();
@@ -189,10 +212,11 @@ describe('BillingSection', () => {
    );
  });

-  it('redirects to Stripe Customer Portal on manage billing', async () => {
+  it('opens Stripe portal for change plan when no alternate public plans', async () => {
    mockFinanceGets({
      invoices: [paidInvoice],
      subscription: foundersSubscription,
+      plans: [foundersPlan],
    });
    mockPost.mockResolvedValue({
      data: { portal_url: 'https://billing.stripe.com/p/session/test' },
@@ -201,20 +225,67 @@ describe('BillingSection', () => {
    const user = userEvent.setup();
    renderBilling();

-    await screen.findByRole('button', { name: /Manage subscription/i });
-    await user.click(screen.getByRole('button', { name: /Manage subscription/i }));
+    await screen.findByRole('button', { name: /Change plan/i });
+    await user.click(screen.getByRole('button', { name: /Change plan/i }));

    await waitFor(() => {
      expect(mockPost).toHaveBeenCalledWith('/finance/portal/', {
        return_url: 'http://localhost/account/',
      });
    });
-    expect(mockTrackEvent).toHaveBeenCalledWith('Billing Portal Opened');
+    expect(mockTrackEvent).toHaveBeenCalledWith('Plan Change Started', {
+      source: 'account_billing',
+    });
+    expect(mockTrackEvent).toHaveBeenCalledWith('Billing Portal Opened', {
+      intent: 'change',
+    });
    expect(assignMock).toHaveBeenCalledWith(
      'https://billing.stripe.com/p/session/test'
    );
  });

+  it('confirms cancel then opens portal', async () => {
+    mockFinanceGets({
+      invoices: [paidInvoice],
+      subscription: foundersSubscription,
+    });
+    mockPost.mockResolvedValue({
+      data: { portal_url: 'https://billing.stripe.com/p/session/cancel' },
+    });
+
+    const user = userEvent.setup();
+    renderBilling();
+
+    await screen.findByRole('button', { name: /^Cancel$/i });
+    await user.click(screen.getByRole('button', { name: /^Cancel$/i }));
+    expect(await screen.findByTestId('cancel-confirm-modal')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /Continue to cancel/i }));
+
+    await waitFor(() => {
+      expect(mockTrackEvent).toHaveBeenCalledWith('Subscription Cancel Started', {
+        source: 'portal',
+      });
+    });
+    expect(assignMock).toHaveBeenCalledWith(
+      'https://billing.stripe.com/p/session/cancel'
+    );
+  });
+
+  it('shows complimentary messaging without cancel', async () => {
+    mockFinanceGets({
+      invoices: [],
+      subscription: complimentarySubscription,
+    });
+
+    renderBilling();
+
+    expect(
+      await screen.findByTestId('complimentary-billing-message')
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Cancel$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Upgrade$/i })).not.toBeInTheDocument();
+  });
+
  it('shows empty unpaid state and starts checkout', async () => {
    mockFinanceGets();
    mockPost.mockResolvedValue({
@@ -10,9 +10,13 @@ import {
  formatBillingDate,
  formatMoneyCents,
  formatTokenCount,
+  higherSelectablePlans,
  humanizeStatus,
+  isComplimentarySubscription,
+  otherSelectablePlans,
  pickPrimaryInvoice,
  SubscriptionMe,
+  SubscriptionPlanInfo,
 } from '../../utils/finance';

 const GlassCard = styled.div`
@@ -69,6 +73,14 @@ const BodyText = styled.p`
  line-height: 1.5;
 `;

+const NoticeText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.85;
+  margin: 1rem 0 0 0;
+  line-height: 1.5;
+  font-size: 0.95rem;
+`;
+
 const ErrorText = styled.p`
  color: #ff6b6b;
  margin: 0.75rem 0 0 0;
@@ -116,6 +128,81 @@ const SecondaryButton = styled(StyledButton)`
  }
 `;

+const DangerButton = styled(SecondaryButton)`
+  border-color: #ff6b6b66;
+  color: #ff6b6b;
+
+  &:hover {
+    border-color: #ff6b6b;
+  }
+`;
+
+const PlanList = styled.ul`
+  list-style: none;
+  margin: 1rem 0 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+
+const PlanOption = styled.li`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.75rem;
+`;
+
+const PlanMeta = styled.div`
+  flex: 1;
+  min-width: 200px;
+`;
+
+const PlanName = styled.div`
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.text};
+  margin-bottom: 0.25rem;
+`;
+
+const PlanDesc = styled.div`
+  font-size: 0.9rem;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  line-height: 1.4;
+`;
+
+const ModalBackdrop = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1.5rem;
+`;
+
+const ModalCard = styled.div`
+  background: ${({ theme }) => theme.colors.cardBackground};
+  backdrop-filter: blur(12px);
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 1rem;
+  padding: 1.75rem;
+  max-width: 480px;
+  width: 100%;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+`;
+
+const ModalTitle = styled.h3`
+  margin: 0 0 0.75rem 0;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 1.35rem;
+`;
+
 const StyledTable = styled.table`
  width: 100%;
  border-collapse: collapse;
@@ -154,32 +241,42 @@ function apiErrorMessage(error: unknown, fallback: string): string {
  return axiosError.response?.data?.detail || axiosError.message || fallback;
 }

+type PortalIntent = 'manage' | 'upgrade' | 'change' | 'cancel';
+
 const BillingSection = (): JSX.Element => {
  const [invoices, setInvoices] = useState<FinanceInvoice[]>([]);
  const [payments, setPayments] = useState<FinancePayment[]>([]);
  const [subscription, setSubscription] = useState<SubscriptionMe | null>(null);
+  const [plans, setPlans] = useState<SubscriptionPlanInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [listError, setListError] = useState('');
  const [actionError, setActionError] = useState('');
  const [portalLoading, setPortalLoading] = useState(false);
-  const [checkoutLoading, setCheckoutLoading] = useState(false);
+  const [checkoutLoadingSlug, setCheckoutLoadingSlug] = useState<string | null>(null);
+  const [showPlanPicker, setShowPlanPicker] = useState(false);
+  const [planPickerMode, setPlanPickerMode] = useState<'upgrade' | 'change'>('change');
+  const [cancelConfirmOpen, setCancelConfirmOpen] = useState(false);

  const loadBilling = useCallback(async () => {
    setLoading(true);
    setListError('');
    try {
-      const [invoiceResponse, paymentResponse, subscriptionResponse] = await Promise.all([
-        axiosInstance.get<FinanceInvoice[]>('/finance/invoices/'),
-        axiosInstance.get<FinancePayment[]>('/finance/payments/'),
-        axiosInstance.get<SubscriptionMe>('/finance/subscription/'),
-      ]);
+      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/'),
+        ]);
      setInvoices(Array.isArray(invoiceResponse.data) ? invoiceResponse.data : []);
      setPayments(Array.isArray(paymentResponse.data) ? paymentResponse.data : []);
      setSubscription(subscriptionResponse.data || null);
+      setPlans(Array.isArray(plansResponse.data) ? plansResponse.data : []);
    } catch (error: unknown) {
      setInvoices([]);
      setPayments([]);
      setSubscription(null);
+      setPlans([]);
      setListError(apiErrorMessage(error, 'Could not load billing information.'));
    } finally {
      setLoading(false);
@@ -192,6 +289,23 @@ const BillingSection = (): JSX.Element => {

  const primaryInvoice = useMemo(() => pickPrimaryInvoice(invoices), [invoices]);
  const hasPortalAccess = useMemo(() => canOpenBillingPortal(invoices), [invoices]);
+  const complimentary = useMemo(
+    () => isComplimentarySubscription(subscription, hasPortalAccess),
+    [subscription, hasPortalAccess]
+  );
+  const upgradePlans = useMemo(
+    () => higherSelectablePlans(plans, subscription?.plan),
+    [plans, subscription?.plan]
+  );
+  const changePlans = useMemo(
+    () => otherSelectablePlans(plans, subscription?.plan?.slug),
+    [plans, subscription?.plan?.slug]
+  );
+  const periodEndLabel = useMemo(() => {
+    const end =
+      subscription?.current_period_end || primaryInvoice?.period_end || null;
+    return formatBillingDate(end);
+  }, [subscription?.current_period_end, primaryInvoice?.period_end]);

  const historyRows = useMemo(() => {
    if (invoices.length) {
@@ -217,7 +331,7 @@ const BillingSection = (): JSX.Element => {
    }));
  }, [invoices, payments]);

-  const handleManageBilling = async () => {
+  const openPortal = async (intent: PortalIntent) => {
    setActionError('');
    setPortalLoading(true);
    try {
@@ -231,7 +345,7 @@ const BillingSection = (): JSX.Element => {
        setActionError('Billing portal could not be opened. Try again.');
        return;
      }
-      trackEvent(AnalyticsEvents.BILLING_PORTAL_OPENED);
+      trackEvent(AnalyticsEvents.BILLING_PORTAL_OPENED, { intent });
      window.location.assign(portalUrl);
    } catch (error: unknown) {
      setActionError(
@@ -242,15 +356,22 @@ const BillingSection = (): JSX.Element => {
    }
  };

-  const handleStartCheckout = async () => {
+  const handleStartCheckout = async (planSlug?: string, source = 'account_billing') => {
    setActionError('');
-    setCheckoutLoading(true);
+    setCheckoutLoadingSlug(planSlug || '__default__');
    try {
      const { success_url, cancel_url } = checkoutReturnUrls();
-      trackEvent(AnalyticsEvents.CHECKOUT_STARTED, { source: 'account_billing' });
+      trackEvent(AnalyticsEvents.CHECKOUT_STARTED, {
+        source,
+        ...(planSlug ? { plan_slug: planSlug } : {}),
+      });
      const response = await axiosInstance.post<{ checkout_url: string }>(
        '/finance/checkout/',
-        { success_url, cancel_url }
+        {
+          success_url,
+          cancel_url,
+          ...(planSlug ? { plan_slug: planSlug } : {}),
+        }
      );
      const checkoutUrl = response.data?.checkout_url;
      if (!checkoutUrl) {
@@ -261,10 +382,59 @@ const BillingSection = (): JSX.Element => {
    } catch (error: unknown) {
      setActionError(apiErrorMessage(error, 'Could not start checkout. Try again.'));
    } finally {
-      setCheckoutLoading(false);
+      setCheckoutLoadingSlug(null);
    }
  };

+  const handleUpgradeClick = () => {
+    trackEvent(AnalyticsEvents.SUBSCRIPTION_UPGRADE_STARTED, {
+      source: 'account_billing',
+    });
+    if (upgradePlans.length > 0) {
+      setPlanPickerMode('upgrade');
+      setShowPlanPicker(true);
+      return;
+    }
+    void openPortal('upgrade');
+  };
+
+  const handleChangePlanClick = () => {
+    trackEvent(AnalyticsEvents.PLAN_CHANGE_STARTED, { source: 'account_billing' });
+    if (changePlans.length > 0) {
+      setPlanPickerMode('change');
+      setShowPlanPicker(true);
+      return;
+    }
+    void openPortal('change');
+  };
+
+  const handleConfirmCancel = async () => {
+    trackEvent(AnalyticsEvents.SUBSCRIPTION_CANCEL_STARTED, { source: 'portal' });
+    setCancelConfirmOpen(false);
+    await openPortal('cancel');
+  };
+
+  const pickerPlans = planPickerMode === 'upgrade' ? upgradePlans : changePlans;
+
+  const selectPlanFromPicker = async (plan: SubscriptionPlanInfo) => {
+    if (planPickerMode === 'upgrade') {
+      trackEvent(AnalyticsEvents.SUBSCRIPTION_UPGRADE_STARTED, {
+        source: 'plan_picker',
+        plan_slug: plan.slug,
+      });
+      // New higher tier via Checkout when selectable; portal otherwise.
+      await handleStartCheckout(plan.slug, 'account_upgrade');
+      return;
+    }
+    trackEvent(AnalyticsEvents.PLAN_CHANGE_STARTED, {
+      source: 'plan_picker',
+      plan_slug: plan.slug,
+    });
+    // Existing subscribers change plans in the Stripe portal (proration / PCI).
+    setShowPlanPicker(false);
+    await openPortal('change');
+  };
+
  return (
    <>
      <GlassCard data-testid="billing-section">
@@ -331,13 +501,19 @@ const BillingSection = (): JSX.Element => {
                </SettingRow>
              </>
            ) : null}
-            {primaryInvoice ? (
-              <SettingRow>
-                <SettingLabel>Period end</SettingLabel>
-                <SettingValue>
-                  {formatBillingDate(primaryInvoice.period_end)}
-                </SettingValue>
-              </SettingRow>
+            <SettingRow>
+              <SettingLabel>Period end</SettingLabel>
+              <SettingValue>{periodEndLabel}</SettingValue>
+            </SettingRow>
+            {subscription?.cancel_at_period_end ? (
+              <NoticeText data-testid="cancel-scheduled-notice">
+                Cancellation scheduled. You keep access until {periodEndLabel}.
+              </NoticeText>
+            ) : null}
+            {subscription?.status === 'canceled' ? (
+              <NoticeText>
+                Subscription canceled. Renew via Complete payment when you are ready.
+              </NoticeText>
            ) : null}
          </>
        ) : (
@@ -349,25 +525,52 @@ const BillingSection = (): JSX.Element => {

        {!loading && !listError && (
          <ButtonRow>
-            {hasPortalAccess ? (
-              <StyledButton
-                type="button"
-                onClick={handleManageBilling}
-                disabled={portalLoading}
-              >
-                {portalLoading ? 'Opening…' : 'Manage subscription'}
-              </StyledButton>
-            ) : subscription?.needs_checkout === false ? (
-              <BodyText style={{ margin: 0 }}>
-                Complimentary access — no payment required.
+            {hasPortalAccess && !complimentary ? (
+              <>
+                <StyledButton
+                  type="button"
+                  onClick={handleUpgradeClick}
+                  disabled={portalLoading || Boolean(checkoutLoadingSlug)}
+                >
+                  Upgrade
+                </StyledButton>
+                <SecondaryButton
+                  type="button"
+                  onClick={handleChangePlanClick}
+                  disabled={portalLoading || Boolean(checkoutLoadingSlug)}
+                >
+                  Change plan
+                </SecondaryButton>
+                {!subscription?.cancel_at_period_end &&
+                subscription?.status !== 'canceled' ? (
+                  <DangerButton
+                    type="button"
+                    onClick={() => setCancelConfirmOpen(true)}
+                    disabled={portalLoading}
+                  >
+                    Cancel
+                  </DangerButton>
+                ) : null}
+                <SecondaryButton
+                  type="button"
+                  onClick={() => openPortal('manage')}
+                  disabled={portalLoading}
+                >
+                  {portalLoading ? 'Opening…' : 'Manage subscription'}
+                </SecondaryButton>
+              </>
+            ) : complimentary ? (
+              <BodyText style={{ margin: 0 }} data-testid="complimentary-billing-message">
+                Complimentary access — no payment required. Plan changes and
+                cancellation are not available for this account.
              </BodyText>
            ) : (
              <StyledButton
                type="button"
-                onClick={handleStartCheckout}
-                disabled={checkoutLoading}
+                onClick={() => handleStartCheckout()}
+                disabled={Boolean(checkoutLoadingSlug)}
              >
-                {checkoutLoading ? 'Starting…' : 'Complete payment'}
+                {checkoutLoadingSlug ? 'Starting…' : 'Complete payment'}
              </StyledButton>
            )}
            <SecondaryButton type="button" onClick={loadBilling} disabled={loading}>
@@ -375,6 +578,52 @@ const BillingSection = (): JSX.Element => {
            </SecondaryButton>
          </ButtonRow>
        )}
+
+        {showPlanPicker && pickerPlans.length > 0 ? (
+          <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).'}
+            </BodyText>
+            <PlanList>
+              {pickerPlans.map((plan) => (
+                <PlanOption key={plan.slug}>
+                  <PlanMeta>
+                    <PlanName>{plan.name}</PlanName>
+                    <PlanDesc>
+                      {formatMoneyCents(plan.price_cents, plan.currency)}
+                      {plan.interval ? ` / ${plan.interval}` : ''}
+                      {plan.description ? ` — ${plan.description}` : ''}
+                      {` · ${plan.prompt_quota_per_window} prompts / ${plan.prompt_window_hours}h`}
+                    </PlanDesc>
+                  </PlanMeta>
+                  <StyledButton
+                    type="button"
+                    onClick={() => selectPlanFromPicker(plan)}
+                    disabled={
+                      portalLoading ||
+                      checkoutLoadingSlug === plan.slug ||
+                      checkoutLoadingSlug === '__default__'
+                    }
+                  >
+                    {checkoutLoadingSlug === plan.slug
+                      ? 'Starting…'
+                      : planPickerMode === 'upgrade'
+                        ? 'Upgrade'
+                        : 'Select'}
+                  </StyledButton>
+                </PlanOption>
+              ))}
+            </PlanList>
+            <ButtonRow>
+              <SecondaryButton type="button" onClick={() => setShowPlanPicker(false)}>
+                Close
+              </SecondaryButton>
+            </ButtonRow>
+          </div>
+        ) : null}
+
        {actionError ? <ErrorText role="alert">{actionError}</ErrorText> : null}
      </GlassCard>

@@ -421,6 +670,44 @@ const BillingSection = (): JSX.Element => {
          </div>
        )}
      </GlassCard>
+
+      {cancelConfirmOpen ? (
+        <ModalBackdrop
+          role="presentation"
+          onClick={() => setCancelConfirmOpen(false)}
+          data-testid="cancel-confirm-modal"
+        >
+          <ModalCard
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="cancel-subscription-title"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <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})` : ''}.
+            </BodyText>
+            <ButtonRow>
+              <DangerButton
+                type="button"
+                onClick={handleConfirmCancel}
+                disabled={portalLoading}
+              >
+                {portalLoading ? 'Opening…' : 'Continue to cancel'}
+              </DangerButton>
+              <SecondaryButton
+                type="button"
+                onClick={() => setCancelConfirmOpen(false)}
+                disabled={portalLoading}
+              >
+                Keep subscription
+              </SecondaryButton>
+            </ButtonRow>
+          </ModalCard>
+        </ModalBackdrop>
+      ) : null}
    </>
  );
 };
@@ -1,9 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import ConversationDetailCard from './ConversationDetailCard';

-const theme = {
+const darkTheme = {
  main: '#336699',
  focus: '#224466',
  darkMode: true,
@@ -14,14 +15,30 @@ const theme = {
  },
 };

-const renderCard = (props: {
-  message: string;
-  user_created: boolean;
-}) =>
+const lightTheme = {
+  main: '#336699',
+  focus: '#224466',
+  darkMode: false,
+  colors: {
+    text: '#111111',
+    cardBackground: 'rgba(255,255,255,0.8)',
+    cardBorder: 'rgba(0,0,0,0.1)',
+  },
+};
+
+const renderCard = (
+  props: {
+    message: string;
+    user_created: boolean;
+  },
+  theme: typeof darkTheme = darkTheme
+) =>
  render(
-    <ThemeProvider theme={theme as never}>
-      <ConversationDetailCard {...props} />
-    </ThemeProvider>
+    <MemoryRouter>
+      <ThemeProvider theme={theme as never}>
+        <ConversationDetailCard {...props} />
+      </ThemeProvider>
+    </MemoryRouter>
  );

 describe('ConversationDetailCard', () => {
@@ -43,4 +60,60 @@ describe('ConversationDetailCard', () => {
    expect(screen.getByText('Hi')).toBeInTheDocument();
    expect(screen.queryByTestId('message-token-usage')).not.toBeInTheDocument();
  });
+
+  it('shows a friendly upgrade bubble for RAG feature_not_allowed errors (#85)', () => {
+    renderCard({
+      message: JSON.stringify({
+        type: 'error',
+        code: 'feature_not_allowed',
+        content: 'Your plan does not include rag document search.',
+        details: { feature: 'rag' },
+      }),
+      user_created: false,
+    });
+
+    expect(
+      screen.getByText('Your plan does not include rag document search.')
+    ).toBeInTheDocument();
+    const upgradeLink = screen.getByRole('link', { name: /upgrade your plan/i });
+    expect(upgradeLink).toBeInTheDocument();
+    expect(upgradeLink).toHaveAttribute('href', '/account/');
+  });
+
+  it('renders unrelated feature_not_allowed errors as a normal inline error, not the upgrade bubble', () => {
+    renderCard({
+      message: JSON.stringify({
+        type: 'error',
+        code: 'feature_not_allowed',
+        content: 'Your plan does not include image generation.',
+        details: { feature: 'image_generation' },
+      }),
+      user_created: false,
+    });
+
+    expect(screen.queryByRole('link', { name: /upgrade your plan/i })).not.toBeInTheDocument();
+    expect(screen.getByText(/image generation/i)).toBeInTheDocument();
+  });
+
+  it('uses theme text color for agent bubble in light mode (#88)', () => {
+    renderCard(
+      { message: 'Light mode reply', user_created: false },
+      lightTheme
+    );
+    const message = screen.getByText('Light mode reply');
+    const agentBubble = message.closest('div');
+    expect(agentBubble).not.toBeNull();
+    expect(getComputedStyle(agentBubble!).color).toBe('rgb(17, 17, 17)');
+  });
+
+  it('keeps light agent text in dark mode (#88)', () => {
+    renderCard(
+      { message: 'Dark mode reply', user_created: false },
+      darkTheme
+    );
+    const message = screen.getByText('Dark mode reply');
+    const agentBubble = message.closest('div');
+    expect(agentBubble).not.toBeNull();
+    expect(getComputedStyle(agentBubble!).color).toBe('rgb(255, 255, 255)');
+  });
 });
@@ -1,6 +1,8 @@
 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";

 const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(10px); }
@@ -27,18 +29,32 @@ const Bubble = styled.div<{ $isUser: boolean }>`
      ? `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.7)"};
-  color: #fff;
+        : "rgba(0, 0, 0, 0.06)"};
+  color: ${(props) =>
+    props.$isUser || props.theme.darkMode ? "#fff" : props.theme.colors.text};
  backdrop-filter: blur(10px);
-  border: 1px solid ${(props) => props.theme.darkMode ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"};
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  border: 1px solid ${(props) =>
+    props.$isUser
+      ? props.theme.darkMode
+        ? "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)"};
+  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)"};
  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")};

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

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

@@ -70,7 +87,7 @@ const Bubble = styled.div<{ $isUser: boolean }>`
 const LoadingDot = styled.div`
  width: 8px;
  height: 8px;
-  background: #fff;
+  background: currentColor;
  border-radius: 50%;
  margin: 0 4px;
  animation: bounce 1.4s infinite ease-in-out both;
@@ -91,6 +108,27 @@ const LoadingContainer = styled.div`
  padding: 0.5rem;
 `;

+const UpgradeNotice = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.65rem;
+`;
+
+const UpgradeLink = styled(Link)`
+  background: ${(props) => props.theme.main};
+  color: #fff;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.85rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
 type ConversationDetailCardProps = {
  message: string;
  user_created: boolean;
@@ -133,6 +171,23 @@ const ConversationDetailCard = ({
    );
  }

+  const errorPayload = parseChatErrorPayload(message);
+  if (errorPayload && isRagFeatureNotAllowed(errorPayload)) {
+    return (
+      <MessageContainer $isUser={false}>
+        <Bubble $isUser={false}>
+          <UpgradeNotice>
+            <span>
+              {errorPayload.content ||
+                "Document search (RAG) isn't included in your current plan."}
+            </span>
+            <UpgradeLink to="/account/">Upgrade your plan</UpgradeLink>
+          </UpgradeNotice>
+        </Bubble>
+      </MessageContainer>
+    );
+  }
+
  let contentToAdd = message;
  try {
    const parsedMessage = JSON.parse(message);
@@ -39,6 +39,8 @@ const DashboardWrapperLayout = ({ children }: DashboardWrapperLayoutProps): JSX.
  const [onMouseEnter, setOnMouseEnter] = useState(false);
  const [rtlCache, setRtlCache] = useState<EmotionCache | null>(null);
  const { pathname } = useLocation();
+  const brandName =
+    process.env.REACT_APP_DEPLOY_ENV === "beta" ? "Beta Hesychia" : "Hesychia";

  // Cache for the rtl
  useMemo(() => {
@@ -115,7 +117,7 @@ const DashboardWrapperLayout = ({ children }: DashboardWrapperLayoutProps): JSX.
            <Sidenav
              color={sidenavColor}
              brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
-              brandName="Hesychia"
+              brandName={brandName}
              routes={[]} // {routes}
              onMouseEnter={handleOnMouseEnter}
              onMouseLeave={handleOnMouseLeave}
@@ -136,7 +138,7 @@ const DashboardWrapperLayout = ({ children }: DashboardWrapperLayoutProps): JSX.
          <Sidenav
            color={sidenavColor}
            brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
-            brandName="Hesychia"
+            brandName={brandName}
            routes={[]} // {routes}
            onMouseEnter={handleOnMouseEnter}
            onMouseLeave={handleOnMouseLeave}
@@ -0,0 +1,122 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+import { AccountContext } from '../../contexts/AccountContext';
+import { AuthContext } from '../../contexts/AuthContext';
+import DeleteAccountSection from './DeleteAccountSection';
+
+const mockDelete = jest.fn();
+const mockPost = jest.fn();
+const mockClearTokens = jest.fn();
+const mockGetRefreshToken = jest.fn();
+const mockApplyAccessToken = jest.fn();
+const mockNavigate = jest.fn();
+const mockSetAccount = jest.fn();
+const mockSetAuthentication = jest.fn();
+const mockTrackEvent = jest.fn();
+
+jest.mock('../../../axiosApi', () => ({
+  axiosInstance: {
+    delete: (...args: unknown[]) => mockDelete(...args),
+    post: (...args: unknown[]) => mockPost(...args),
+  },
+  applyAccessToken: (...args: unknown[]) => mockApplyAccessToken(...args),
+}));
+
+jest.mock('../../auth/tokenStorage', () => ({
+  clearTokens: (...args: unknown[]) => mockClearTokens(...args),
+  getRefreshToken: (...args: unknown[]) => mockGetRefreshToken(...args),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock('../../utils/analytics', () => ({
+  AnalyticsEvents: {
+    ACCOUNT_DELETE_STARTED: 'Account Delete Started',
+    ACCOUNT_DELETE_SUCCESS: 'Account Delete Success',
+    ACCOUNT_DELETE_FAILED: 'Account Delete Failed',
+  },
+  trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
+}));
+
+const theme = {
+  main: '#4a90e2',
+  darkMode: true,
+  colors: {
+    text: '#ffffff',
+    cardBackground: 'rgba(0,0,0,0.4)',
+    cardBorder: 'rgba(255,255,255,0.1)',
+  },
+};
+
+const renderSection = () =>
+  render(
+    <MemoryRouter>
+      <ThemeProvider theme={theme}>
+        <AuthContext.Provider
+          value={{
+            authenticated: true,
+            setAuthentication: mockSetAuthentication,
+            needsNewPassword: false,
+            setNeedsNewPassword: () => {},
+            loading: false,
+          }}
+        >
+          <AccountContext.Provider
+            value={{
+              account: { email: 'user@example.com' } as never,
+              setAccount: mockSetAccount,
+            }}
+          >
+            <DeleteAccountSection />
+          </AccountContext.Provider>
+        </AuthContext.Provider>
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+
+describe('DeleteAccountSection', () => {
+  beforeEach(() => {
+    mockDelete.mockReset();
+    mockPost.mockReset();
+    mockClearTokens.mockReset();
+    mockGetRefreshToken.mockReset();
+    mockApplyAccessToken.mockReset();
+    mockNavigate.mockReset();
+    mockSetAccount.mockReset();
+    mockSetAuthentication.mockReset();
+    mockTrackEvent.mockReset();
+    mockGetRefreshToken.mockReturnValue('refresh-token');
+    mockClearTokens.mockResolvedValue(undefined);
+    mockDelete.mockResolvedValue({ data: { deleted: true } });
+    mockPost.mockResolvedValue({});
+  });
+
+  it('requires email confirmation then deletes and signs out', async () => {
+    const user = userEvent.setup();
+    renderSection();
+
+    await user.click(screen.getByRole('button', { name: /Delete my account/i }));
+    expect(await screen.findByTestId('delete-account-modal')).toBeInTheDocument();
+
+    await user.type(screen.getByLabelText(/Confirm email/i), 'user@example.com');
+    await user.click(screen.getByRole('button', { name: /^Delete account$/i }));
+
+    await waitFor(() => {
+      expect(mockDelete).toHaveBeenCalledWith('/user/', {
+        data: { refresh_token: 'refresh-token' },
+      });
+    });
+    expect(mockTrackEvent).toHaveBeenCalledWith('Account Delete Started');
+    expect(mockTrackEvent).toHaveBeenCalledWith('Account Delete Success');
+    expect(mockClearTokens).toHaveBeenCalled();
+    expect(mockApplyAccessToken).toHaveBeenCalledWith(null);
+    expect(mockSetAuthentication).toHaveBeenCalledWith(false);
+    expect(mockNavigate).toHaveBeenCalledWith('/signin/');
+  });
+});
@@ -0,0 +1,250 @@
+import React, { useContext, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import { applyAccessToken, axiosInstance } from '../../../axiosApi';
+import { clearTokens, getRefreshToken } from '../../auth/tokenStorage';
+import { AccountContext } from '../../contexts/AccountContext';
+import { AuthContext } from '../../contexts/AuthContext';
+import { AnalyticsEvents, trackEvent } from '../../utils/analytics';
+
+const GlassCard = styled.div`
+  background: ${({ theme }) => theme.colors.cardBackground};
+  backdrop-filter: blur(10px);
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 1rem;
+  padding: 2rem;
+  width: 100%;
+  max-width: 1000px;
+  margin-bottom: 2rem;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+`;
+
+const CardTitle = styled.h2`
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+  color: ${({ theme }) => theme.colors.text};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  padding-bottom: 1rem;
+`;
+
+const BodyText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.75;
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+`;
+
+const ErrorText = styled.p`
+  color: #ff6b6b;
+  margin: 0.75rem 0 0 0;
+  font-size: 0.95rem;
+`;
+
+const ButtonRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1rem;
+`;
+
+const DangerButton = styled.button`
+  background: transparent;
+  border: 1px solid #ff6b6b;
+  border-radius: 0.5rem;
+  color: #ff6b6b;
+  padding: 0.8rem 1.5rem;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover {
+    background: #ff6b6b22;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const SecondaryButton = styled.button`
+  background: transparent;
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.5rem;
+  color: ${({ theme }) => theme.colors.text};
+  padding: 0.8rem 1.5rem;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const ConfirmInput = styled.input`
+  width: 100%;
+  max-width: 420px;
+  background: ${({ theme }) =>
+    theme.darkMode ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'};
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.5rem;
+  padding: 0.8rem;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 1rem;
+  outline: none;
+  margin-top: 0.5rem;
+
+  &:focus {
+    border-color: #ff6b6b;
+  }
+`;
+
+const ModalBackdrop = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1.5rem;
+`;
+
+const ModalCard = styled.div`
+  background: ${({ theme }) => theme.colors.cardBackground};
+  backdrop-filter: blur(12px);
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 1rem;
+  padding: 1.75rem;
+  max-width: 520px;
+  width: 100%;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+`;
+
+const ModalTitle = styled.h3`
+  margin: 0 0 0.75rem 0;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 1.35rem;
+`;
+
+function apiErrorMessage(error: unknown, fallback: string): string {
+  const axiosError = error as {
+    response?: { data?: { detail?: string } };
+    message?: string;
+  };
+  return axiosError.response?.data?.detail || axiosError.message || fallback;
+}
+
+const DeleteAccountSection = (): JSX.Element => {
+  const { account, setAccount } = useContext(AccountContext);
+  const { setAuthentication } = useContext(AuthContext);
+  const navigate = useNavigate();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmEmail, setConfirmEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const email = account?.email || '';
+
+  const closeModal = () => {
+    if (loading) return;
+    setConfirmOpen(false);
+    setConfirmEmail('');
+    setError('');
+  };
+
+  const handleDelete = async () => {
+    if (!email || confirmEmail.trim().toLowerCase() !== email.toLowerCase()) {
+      setError('Type your account email exactly to confirm.');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    trackEvent(AnalyticsEvents.ACCOUNT_DELETE_STARTED);
+
+    try {
+      const refreshToken = getRefreshToken();
+      await axiosInstance.delete('/user/', {
+        data: refreshToken ? { refresh_token: refreshToken } : {},
+      });
+      trackEvent(AnalyticsEvents.ACCOUNT_DELETE_SUCCESS);
+      try {
+        if (refreshToken) {
+          await axiosInstance.post('blacklist/', { refresh_token: refreshToken });
+        }
+      } catch {
+        // Account already deleted; local cleanup is enough.
+      }
+      await clearTokens();
+      applyAccessToken(null);
+      setAuthentication(false);
+      setAccount(undefined);
+      navigate('/signin/');
+    } catch (err: unknown) {
+      trackEvent(AnalyticsEvents.ACCOUNT_DELETE_FAILED);
+      setError(apiErrorMessage(err, 'Could not delete account. Try again.'));
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <GlassCard data-testid="delete-account-section">
+        <CardTitle>Delete account</CardTitle>
+        <BodyText>
+          Permanently deactivate your account. Conversations are hidden and you will
+          be signed out. This cannot be undone from the app.
+        </BodyText>
+        <DangerButton type="button" onClick={() => setConfirmOpen(true)}>
+          Delete my account
+        </DangerButton>
+      </GlassCard>
+
+      {confirmOpen ? (
+        <ModalBackdrop
+          role="presentation"
+          onClick={closeModal}
+          data-testid="delete-account-modal"
+        >
+          <ModalCard
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="delete-account-title"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <ModalTitle id="delete-account-title">Delete your account?</ModalTitle>
+            <BodyText>
+              Type <strong>{email || 'your email'}</strong> to confirm. You will lose
+              access immediately after deletion.
+            </BodyText>
+            <ConfirmInput
+              type="email"
+              autoComplete="off"
+              placeholder="Confirm email"
+              value={confirmEmail}
+              onChange={(event) => setConfirmEmail(event.target.value)}
+              disabled={loading}
+              aria-label="Confirm email"
+            />
+            {error ? <ErrorText role="alert">{error}</ErrorText> : null}
+            <ButtonRow>
+              <DangerButton
+                type="button"
+                onClick={handleDelete}
+                disabled={loading || !confirmEmail}
+              >
+                {loading ? 'Deleting…' : 'Delete account'}
+              </DangerButton>
+              <SecondaryButton type="button" onClick={closeModal} disabled={loading}>
+                Keep account
+              </SecondaryButton>
+            </ButtonRow>
+          </ModalCard>
+        </ModalBackdrop>
+      ) : null}
+    </>
+  );
+};
+
+export default DeleteAccountSection;
@@ -0,0 +1,534 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styled from "styled-components";
+import {
+  DriveConnectIntent,
+  DriveConnectionKind,
+  DriveConnectionType,
+  DriveProvider,
+  connectDrive,
+  disconnectDriveConnection,
+  driveSyncProgressPercent,
+  fetchDriveConnections,
+  formatDriveSyncError,
+  parseResourceIdsInput,
+  saveDriveResourceSelection,
+  syncDriveConnection,
+  waitForDriveSyncSettlement,
+} from "../../utils/drive";
+
+const Section = styled.div`
+  background: ${({ theme }) => theme.colors.cardBackground};
+  backdrop-filter: blur(10px);
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 1rem;
+  padding: 2rem;
+  width: 100%;
+  max-width: 1000px;
+  margin-bottom: 2rem;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+`;
+
+const SectionTitle = styled.h2`
+  font-size: 1.8rem;
+  margin-bottom: 0.5rem;
+  color: ${({ theme }) => theme.colors.text};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  padding-bottom: 1rem;
+`;
+
+const SectionDescription = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  margin: 0.75rem 0 1.5rem 0;
+  line-height: 1.5;
+`;
+
+const ConnectButtonRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+`;
+
+const ConnectButton = styled.button`
+  background: ${({ theme }) => theme.main};
+  border: none;
+  border-radius: 0.5rem;
+  color: #fff;
+  padding: 0.7rem 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px ${({ theme }) => theme.main}66;
+  }
+`;
+
+const ConnectionList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const ConnectionCard = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+`;
+
+const ConnectionHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  flex-wrap: wrap;
+`;
+
+const ConnectionTitle = styled.strong`
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 1.05rem;
+`;
+
+const ConnectionMeta = styled.p`
+  margin: 0.35rem 0 0 0;
+  font-size: 0.85rem;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.65;
+`;
+
+const ConnectionActions = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+`;
+
+const SmallButton = styled.button`
+  background: transparent;
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.5rem;
+  color: ${({ theme }) => theme.colors.text};
+  padding: 0.45rem 0.9rem;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const DangerButton = styled(SmallButton)`
+  color: #ff6b6b;
+  border-color: rgba(255, 107, 107, 0.4);
+
+  &:hover {
+    background: rgba(255, 71, 87, 0.1);
+  }
+`;
+
+const ResourceForm = styled.div`
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+`;
+
+const ResourceInput = styled.input`
+  flex: 1;
+  min-width: 200px;
+  background: ${({ theme }) => theme.darkMode ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'};
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.5rem;
+  padding: 0.6rem 0.8rem;
+  color: ${({ theme }) => theme.colors.text};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.darkMode ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.4)'};
+  }
+`;
+
+const ResourceTagList = styled.div`
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+`;
+
+const ResourceTag = styled.span`
+  background: ${({ theme }) => theme.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.08)'};
+  color: ${({ theme }) => theme.colors.text};
+  border-radius: 999px;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8rem;
+`;
+
+const EmptyState = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.6;
+`;
+
+const AlertBanner = styled.div<{ $tone: 'error' | 'success' }>`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 0 0 1.25rem 0;
+  padding: 0.85rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid
+    ${({ $tone }) => ($tone === 'error' ? 'rgba(255, 107, 107, 0.45)' : 'rgba(46, 204, 113, 0.45)')};
+  background: ${({ $tone }) =>
+    $tone === 'error' ? 'rgba(255, 71, 87, 0.12)' : 'rgba(46, 204, 113, 0.12)'};
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 0.9rem;
+  line-height: 1.4;
+`;
+
+const AlertDismiss = styled.button`
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+  padding: 0;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const SyncErrorText = styled.p`
+  margin: 0.75rem 0 0 0;
+  font-size: 0.85rem;
+  color: #ff6b6b;
+  line-height: 1.4;
+`;
+
+const ProgressWrap = styled.div`
+  margin-top: 0.85rem;
+`;
+
+const ProgressTrack = styled.div`
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
+  background: ${({ theme }) =>
+    theme.darkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)'};
+`;
+
+const ProgressFill = styled.div<{ $percent: number | null }>`
+  height: 100%;
+  width: ${({ $percent }) => ($percent == null ? '40%' : `${$percent}%`)};
+  border-radius: 999px;
+  background: ${({ theme }) => theme.main};
+  transition: width 0.25s ease;
+  ${({ $percent }) =>
+    $percent == null
+      ? `
+    animation: sync-indeterminate 1.2s ease-in-out infinite;
+    @keyframes sync-indeterminate {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(250%); }
+    }
+  `
+      : ''}
+`;
+
+const ProgressLabel = styled.p`
+  margin: 0.4rem 0 0 0;
+  font-size: 0.8rem;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+`;
+
+const PROVIDER_LABELS: Record<DriveProvider, string> = {
+  google: "Google Drive",
+  microsoft: "OneDrive",
+};
+
+type PendingAction = 'sync' | 'save' | 'disconnect';
+
+type DriveConnectionsSectionProps = {
+  kind: DriveConnectionKind;
+  title: string;
+  description?: string;
+  connectIntent: DriveConnectIntent;
+  onSynced?: () => void;
+};
+
+const DriveConnectionsSection = ({
+  kind,
+  title,
+  description,
+  connectIntent,
+  onSynced,
+}: DriveConnectionsSectionProps): JSX.Element => {
+  const [connections, setConnections] = useState<DriveConnectionType[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState(false);
+  const [connectError, setConnectError] = useState<string | null>(null);
+  const [syncBanner, setSyncBanner] = useState<{ tone: 'error' | 'success'; message: string } | null>(
+    null
+  );
+  const [resourceInputs, setResourceInputs] = useState<Record<number, string>>({});
+  const [pendingAction, setPendingAction] = useState<Record<number, PendingAction | undefined>>({});
+
+  const loadConnections = useCallback(async () => {
+    setLoading(true);
+    setLoadError(false);
+    try {
+      const all = await fetchDriveConnections();
+      setConnections(all.filter((conn) => (conn.kind || 'personal') === kind));
+    } catch {
+      setLoadError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [kind]);
+
+  useEffect(() => {
+    loadConnections();
+  }, [loadConnections]);
+
+  const setAction = (id: number, action?: PendingAction) => {
+    setPendingAction((prev) => ({ ...prev, [id]: action }));
+  };
+
+  const upsertConnection = (updated: DriveConnectionType) => {
+    setConnections((prev) => {
+      const exists = prev.some((conn) => conn.id === updated.id);
+      if (!exists) {
+        return (updated.kind || 'personal') === kind ? [...prev, updated] : prev;
+      }
+      return prev.map((conn) => (conn.id === updated.id ? { ...conn, ...updated } : conn));
+    });
+  };
+
+  const handleDisconnect = async (id: number) => {
+    setAction(id, 'disconnect');
+    try {
+      await disconnectDriveConnection(id);
+      setConnections((prev) => prev.filter((conn) => conn.id !== id));
+    } catch (err) {
+      console.log(err);
+      setSyncBanner({ tone: 'error', message: 'Could not disconnect this drive. Try again.' });
+    } finally {
+      setAction(id, undefined);
+    }
+  };
+
+  const handleSync = async (id: number) => {
+    setAction(id, 'sync');
+    setSyncBanner(null);
+    try {
+      const enqueued = await syncDriveConnection(id);
+      upsertConnection(enqueued.connection);
+
+      const settled =
+        enqueued.connection.last_sync_status === 'pending'
+          ? await waitForDriveSyncSettlement(id, {
+              onProgress: (connection) => upsertConnection(connection),
+            })
+          : enqueued.connection;
+
+      upsertConnection(settled);
+
+      if (settled.last_sync_status === 'error') {
+        setSyncBanner({
+          tone: 'error',
+          message: formatDriveSyncError(settled.last_sync_error),
+        });
+      } else if (settled.last_sync_status === 'ok') {
+        setSyncBanner({ tone: 'success', message: 'Drive sync finished.' });
+        onSynced?.();
+      }
+    } catch (err) {
+      console.error(err);
+      const message =
+        err instanceof Error ? err.message : 'Drive sync failed. Try again.';
+      setSyncBanner({ tone: 'error', message });
+      await loadConnections();
+    } finally {
+      setAction(id, undefined);
+    }
+  };
+
+  const handleSaveResources = async (id: number) => {
+    const resourceIds = parseResourceIdsInput(resourceInputs[id] || '');
+    if (resourceIds.length === 0) {
+      return;
+    }
+    setAction(id, 'save');
+    try {
+      const updated = await saveDriveResourceSelection(id, {
+        resource_ids: resourceIds,
+        resource_labels: resourceIds,
+      });
+      setConnections((prev) => prev.map((conn) => (conn.id === id ? { ...conn, ...updated } : conn)));
+      setResourceInputs((prev) => ({ ...prev, [id]: '' }));
+    } catch (err) {
+      console.log(err);
+      setSyncBanner({ tone: 'error', message: 'Could not save folder selection. Try again.' });
+    } finally {
+      setAction(id, undefined);
+    }
+  };
+
+  return (
+    <Section>
+      <SectionTitle>{title}</SectionTitle>
+      {description && <SectionDescription>{description}</SectionDescription>}
+
+      {syncBanner && (
+        <AlertBanner $tone={syncBanner.tone} role="alert">
+          <span>{syncBanner.message}</span>
+          <AlertDismiss
+            type="button"
+            aria-label="Dismiss"
+            onClick={() => setSyncBanner(null)}
+          >
+            ×
+          </AlertDismiss>
+        </AlertBanner>
+      )}
+
+      <ConnectButtonRow>
+        <ConnectButton
+          type="button"
+          onClick={() => {
+            setConnectError(null);
+            void connectDrive('google', connectIntent).catch((err) => {
+              console.error(err);
+              setConnectError('Could not start Google Drive connect. Try again.');
+            });
+          }}
+        >
+          Connect Google Drive
+        </ConnectButton>
+        <ConnectButton
+          type="button"
+          onClick={() => {
+            setConnectError(null);
+            void connectDrive('microsoft', connectIntent).catch((err) => {
+              console.error(err);
+              setConnectError('Could not start OneDrive connect. Try again.');
+            });
+          }}
+        >
+          Connect OneDrive
+        </ConnectButton>
+      </ConnectButtonRow>
+
+      {connectError && <EmptyState>{connectError}</EmptyState>}
+
+      {loading ? (
+        <EmptyState>Loading connections…</EmptyState>
+      ) : loadError ? (
+        <EmptyState>Could not load drive connections. Try again later.</EmptyState>
+      ) : connections.length === 0 ? (
+        <EmptyState>No drives connected yet.</EmptyState>
+      ) : (
+        <ConnectionList>
+          {connections.map((conn) => {
+            const action = pendingAction[conn.id];
+            const selectedLabels = conn.selected_resource_labels?.length
+              ? conn.selected_resource_labels
+              : conn.selected_resource_ids || [];
+            const isSyncing = action === 'sync' || conn.last_sync_status === 'pending';
+            const progressPercent = isSyncing ? driveSyncProgressPercent(conn) : null;
+            const processed = conn.sync_processed ?? 0;
+            const total = conn.sync_total ?? 0;
+
+            return (
+              <ConnectionCard key={conn.id}>
+                <ConnectionHeader>
+                  <div>
+                    <ConnectionTitle>{PROVIDER_LABELS[conn.provider] || conn.provider}</ConnectionTitle>
+                    <ConnectionMeta>
+                      {conn.external_account_email || 'Connected account'}
+                      {conn.last_sync_status ? ` · ${conn.last_sync_status}` : ''}
+                      {conn.last_sync_at
+                        ? ` · Last synced ${new Date(conn.last_sync_at).toLocaleString()}`
+                        : ''}
+                    </ConnectionMeta>
+                  </div>
+                  <ConnectionActions>
+                    <SmallButton
+                      type="button"
+                      onClick={() => handleSync(conn.id)}
+                      disabled={Boolean(action) || conn.last_sync_status === 'pending'}
+                    >
+                      {isSyncing ? 'Syncing…' : 'Sync now'}
+                    </SmallButton>
+                    <DangerButton
+                      type="button"
+                      onClick={() => handleDisconnect(conn.id)}
+                      disabled={Boolean(action)}
+                    >
+                      {action === 'disconnect' ? 'Disconnecting…' : 'Disconnect'}
+                    </DangerButton>
+                  </ConnectionActions>
+                </ConnectionHeader>
+
+                {isSyncing && (
+                  <ProgressWrap aria-label="Drive sync progress">
+                    <ProgressTrack>
+                      <ProgressFill $percent={progressPercent} />
+                    </ProgressTrack>
+                    <ProgressLabel>
+                      {progressPercent == null
+                        ? 'Discovering files…'
+                        : `${processed} / ${total} files (${progressPercent}%)`}
+                    </ProgressLabel>
+                  </ProgressWrap>
+                )}
+
+                {conn.last_sync_status === 'error' && conn.last_sync_error && (
+                  <SyncErrorText>{formatDriveSyncError(conn.last_sync_error)}</SyncErrorText>
+                )}
+
+                {selectedLabels.length > 0 && (
+                  <ResourceTagList>
+                    {selectedLabels.map((label, idx) => (
+                      <ResourceTag key={`${conn.id}-${idx}`}>{label}</ResourceTag>
+                    ))}
+                  </ResourceTagList>
+                )}
+
+                <ResourceForm>
+                  <ResourceInput
+                    type="text"
+                    placeholder="Folder or file IDs, comma separated"
+                    value={resourceInputs[conn.id] || ''}
+                    onChange={(e) =>
+                      setResourceInputs((prev) => ({ ...prev, [conn.id]: e.target.value }))
+                    }
+                  />
+                  <SmallButton
+                    type="button"
+                    onClick={() => handleSaveResources(conn.id)}
+                    disabled={action === 'save' || !(resourceInputs[conn.id] || '').trim()}
+                  >
+                    {action === 'save' ? 'Saving…' : 'Save folders'}
+                  </SmallButton>
+                </ResourceForm>
+              </ConnectionCard>
+            );
+          })}
+        </ConnectionList>
+      )}
+    </Section>
+  );
+};
+
+export default DriveConnectionsSection;
@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+import Header2 from './Header2';
+import { AuthContext } from '../../contexts/AuthContext';
+import { AccountContext } from '../../contexts/AccountContext';
+import { resetSubscriptionCache } from '../../hooks/useSubscription';
+
+const mockGet = jest.fn();
+const mockPost = jest.fn();
+
+jest.mock('../../../axiosApi', () => ({
+  axiosInstance: {
+    get: (...args: unknown[]) => mockGet(...args),
+    post: (...args: unknown[]) => mockPost(...args),
+    defaults: { headers: { common: {} as Record<string, string | null> } },
+  },
+  applyAccessToken: jest.fn(),
+}));
+
+const theme = {
+  main: '#4a90e2',
+  focus: '#224466',
+  darkMode: true,
+  colors: {
+    text: '#ffffff',
+    cardBorder: 'rgba(255,255,255,0.1)',
+  },
+};
+
+const renderHeader = (props: { onOpenConversations?: () => void } = {}) =>
+  render(
+    <MemoryRouter>
+      <ThemeProvider theme={theme as never}>
+        <AuthContext.Provider
+          value={{
+            authenticated: true,
+            setAuthentication: jest.fn(),
+            needsNewPassword: false,
+            setNeedsNewPassword: jest.fn(),
+            loading: false,
+          }}
+        >
+          <AccountContext.Provider value={{ account: undefined, setAccount: jest.fn() }}>
+            <Header2 {...props} />
+          </AccountContext.Provider>
+        </AuthContext.Provider>
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+
+const subscriptionWithRag = (rag: boolean) => ({
+  data: {
+    plan: {
+      slug: rag ? 'pro' : 'standard',
+      name: rag ? 'Pro' : 'Standard',
+      features: {
+        text_generation: true,
+        image_generation: rag,
+        rag,
+        all_future_features: false,
+      },
+    },
+    status: 'active',
+    source: 'stripe',
+    needs_checkout: false,
+    stripe_subscription_id: 'sub_1',
+    usage: {},
+  },
+});
+
+describe('Header2 (#81 subscription-aware Documents nav link)', () => {
+  beforeEach(() => {
+    mockGet.mockReset();
+    mockPost.mockReset();
+    resetSubscriptionCache();
+  });
+
+  it('hides the Documents link while the plan does not include RAG', async () => {
+    mockGet.mockResolvedValue(subscriptionWithRag(false));
+
+    renderHeader();
+
+    await waitFor(() => expect(mockGet).toHaveBeenCalledWith('/finance/subscription/'));
+    expect(screen.queryByText('Documents')).not.toBeInTheDocument();
+  });
+
+  it('shows the Documents link once the plan includes RAG', async () => {
+    mockGet.mockResolvedValue(subscriptionWithRag(true));
+
+    renderHeader();
+
+    // Desktop nav + mobile dropdown both render a "Documents" link.
+    expect(await screen.findAllByText('Documents')).toHaveLength(2);
+  });
+});
+
+describe('Header2 (#87 conversations toggle beside logo)', () => {
+  beforeEach(() => {
+    mockGet.mockReset();
+    mockPost.mockReset();
+    resetSubscriptionCache();
+    mockGet.mockResolvedValue(subscriptionWithRag(false));
+  });
+
+  it('does not render conversations toggle when callback is omitted', () => {
+    renderHeader();
+    expect(screen.queryByRole('button', { name: /open conversations/i })).not.toBeInTheDocument();
+  });
+
+  it('renders conversations toggle next to brand when callback is provided', () => {
+    const onOpenConversations = jest.fn();
+    renderHeader({ onOpenConversations });
+
+    // Mobile-only via CSS (display:none in jsdom desktop width); query by aria-label.
+    const toggle = screen.getByLabelText('Open conversations');
+    expect(toggle).toBeInTheDocument();
+    expect(screen.getByText('Hesychia')).toBeInTheDocument();
+    toggle.click();
+    expect(onOpenConversations).toHaveBeenCalledTimes(1);
+  });
+});
@@ -5,6 +5,7 @@ import { AuthContext } from '../../contexts/AuthContext';
 import { AccountContext } from '../../contexts/AccountContext';
 import { applyAccessToken, axiosInstance } from '../../../axiosApi';
 import { clearTokens, getRefreshToken } from '../../auth/tokenStorage';
+import { useSubscription } from '../../hooks/useSubscription';
 import hesychiaMark from '../../assets/brand/hesychia-mark.png';

 const HeaderContainer = styled.header`
@@ -30,6 +31,50 @@ const HeaderContainer = styled.header`
  }
 `;

+const BrandCluster = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1;
+`;
+
+const ConversationsToggle = styled.button`
+  display: none;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  margin: 0;
+  padding: 0.35rem 0.55rem;
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.65rem;
+  background: ${({ theme }) =>
+    theme.darkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.06)'};
+  color: ${({ theme }) => theme.colors.text};
+  cursor: pointer;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: ${({ theme }) =>
+      theme.darkMode ? 'rgba(255, 255, 255, 0.14)' : 'rgba(0, 0, 0, 0.1)'};
+  }
+
+  @media (max-width: 768px) {
+    display: inline-flex;
+  }
+`;
+
+const ConversationsToggleLabel = styled.span`
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
+
+  @media (max-width: 380px) {
+    display: none;
+  }
+`;
+
 const Logo = styled.div`
  display: flex;
  align-items: center;
@@ -50,6 +95,8 @@ const LogoWordmark = styled.h4`
  margin: 0;
  font-size: 1.5rem;
  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
  font-weight: 700;

  @media (max-width: 768px) {
@@ -138,6 +185,14 @@ const HamburgerIcon = ({ color }: { color: string }) => (
  </svg>
 );

+const ConversationsMenuIcon = ({ color }: { color: string }) => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <path d="M3 12H21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M3 6H21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M3 18H21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
 const CloseIcon = ({ color }: { color: string }) => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M18 6L6 18" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
@@ -149,14 +204,22 @@ type Header2Props = {
  absolute?: Boolean;
  light?: Boolean;
  isMini?: Boolean;
+  /** Mobile: open conversations drawer. Rendered inline beside logo when set. */
+  onOpenConversations?: () => void;
 }

-const Header2 = ({ absolute = false, light = false, isMini = false }: Header2Props): JSX.Element => {
+const Header2 = ({
+  absolute = false,
+  light = false,
+  isMini = false,
+  onOpenConversations,
+}: Header2Props): JSX.Element => {
  const { setAuthentication } = useContext(AuthContext);
  const { setAccount } = useContext(AccountContext);
  const navigate = useNavigate();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const theme = useTheme();
+  const { hasRag } = useSubscription();

  const handleSignOut = async () => {
    try {
@@ -180,16 +243,28 @@ const Header2 = ({ absolute = false, light = false, isMini = false }: Header2Pro

  return (
    <HeaderContainer>
-      <Logo onClick={() => navigate('/')}>
-        <LogoMark src={hesychiaMark} alt="" />
-        <LogoWordmark>Hesychia</LogoWordmark>
-      </Logo>
+      <BrandCluster>
+        {onOpenConversations && (
+          <ConversationsToggle
+            type="button"
+            onClick={onOpenConversations}
+            aria-label="Open conversations"
+          >
+            <ConversationsMenuIcon color={theme.colors.text} />
+            <ConversationsToggleLabel>Conversations</ConversationsToggleLabel>
+          </ConversationsToggle>
+        )}
+        <Logo onClick={() => navigate('/')}>
+          <LogoMark src={hesychiaMark} alt="" />
+          <LogoWordmark>Hesychia</LogoWordmark>
+        </Logo>
+      </BrandCluster>

      {/* Desktop Nav */}
      <Nav>
        <NavLink onClick={() => navigate('/')}>Dashboard</NavLink>
        <NavLink onClick={() => navigate('/account/')}>Account</NavLink>
-        <NavLink onClick={() => navigate('/document_storage/')}>Documents</NavLink>
+        {hasRag && <NavLink onClick={() => navigate('/document_storage/')}>Documents</NavLink>}
        <NavLink onClick={() => navigate('/analytics/')}>Analytics</NavLink>
        <NavLink onClick={() => navigate('/feedback/')}>Feedback</NavLink>
        <SignOutButton onClick={handleSignOut}>Sign Out</SignOutButton>
@@ -204,7 +279,7 @@ const Header2 = ({ absolute = false, light = false, isMini = false }: Header2Pro
      <MobileMenuDropdown isOpen={isMenuOpen}>
        <NavLink onClick={() => handleNavClick('/')}>Dashboard</NavLink>
        <NavLink onClick={() => handleNavClick('/account/')}>Account</NavLink>
-        <NavLink onClick={() => handleNavClick('/document_storage/')}>Documents</NavLink>
+        {hasRag && <NavLink onClick={() => handleNavClick('/document_storage/')}>Documents</NavLink>}
        <NavLink onClick={() => handleNavClick('/analytics/')}>Analytics</NavLink>
        <NavLink onClick={() => handleNavClick('/feedback/')}>Feedback</NavLink>
        <SignOutButton onClick={() => { handleSignOut(); setIsMenuOpen(false); }}>Sign Out</SignOutButton>
@@ -0,0 +1,230 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
+import { AxiosResponse } from 'axios';
+import { axiosInstance } from '../../../axiosApi';
+
+export type PromptHeatmapData = {
+  tz: string;
+  total: number;
+  max: number;
+  days: string[];
+  hours: number[];
+  matrix: number[][];
+  most_active_day: string | null;
+  most_active_hour: number | null;
+  peak_cell: { day: string; hour: number; count: number } | null;
+};
+
+const GlassCard = styled.div`
+  background: ${({ theme }) => theme.colors.cardBackground};
+  backdrop-filter: blur(10px);
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 1rem;
+  padding: 2rem;
+  width: 100%;
+  max-width: 1000px;
+  margin-bottom: 2rem;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+`;
+
+const CardTitle = styled.h2`
+  font-size: 1.8rem;
+  margin-bottom: 0.5rem;
+  color: ${({ theme }) => theme.colors.text};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  padding-bottom: 1rem;
+`;
+
+const Subtitle = styled.p`
+  margin: 0.75rem 0 1.25rem 0;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  font-size: 0.95rem;
+  line-height: 1.5;
+`;
+
+const GridScroll = styled.div`
+  overflow-x: auto;
+`;
+
+const HeatmapGrid = styled.div`
+  display: grid;
+  grid-template-columns: 3rem repeat(24, minmax(14px, 1fr));
+  gap: 3px;
+  min-width: 520px;
+`;
+
+const Corner = styled.div``;
+
+const AxisLabel = styled.div`
+  font-size: 0.7rem;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.55;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const DayLabel = styled(AxisLabel)`
+  justify-content: flex-start;
+  padding-left: 0.15rem;
+`;
+
+const Cell = styled.button<{ $intensity: number; $color: string }>`
+  aspect-ratio: 1;
+  border: none;
+  border-radius: 3px;
+  padding: 0;
+  cursor: default;
+  background: ${({ $intensity, $color, theme }) =>
+    $intensity <= 0
+      ? theme.darkMode
+        ? 'rgba(255,255,255,0.08)'
+        : 'rgba(0,0,0,0.08)'
+      : $color};
+  opacity: ${({ $intensity }) => ($intensity <= 0 ? 1 : 0.35 + $intensity * 0.65)};
+
+  &:hover {
+    outline: 1px solid ${({ theme }) => theme.colors.text}66;
+  }
+`;
+
+const Footer = styled.p`
+  margin: 1rem 0 0 0;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  font-size: 0.9rem;
+  line-height: 1.5;
+`;
+
+const StatusText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+`;
+
+const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
+  const cleaned = hex.replace('#', '');
+  if (cleaned.length !== 6) return null;
+  return {
+    r: parseInt(cleaned.slice(0, 2), 16),
+    g: parseInt(cleaned.slice(2, 4), 16),
+    b: parseInt(cleaned.slice(4, 6), 16),
+  };
+};
+
+const PromptHeatmapCard = (): JSX.Element => {
+  const theme = useTheme();
+  const [data, setData] = useState<PromptHeatmapData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [hover, setHover] = useState<{ day: string; hour: number; count: number } | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+
+    (async () => {
+      try {
+        const response: AxiosResponse<PromptHeatmapData> = await axiosInstance.get(
+          '/analytics/user_prompt_heatmap/',
+          { params: { tz } }
+        );
+        if (!cancelled) {
+          setData(response.data);
+          setError(false);
+        }
+      } catch {
+        if (!cancelled) {
+          setError(true);
+          setData(null);
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const themeColor = theme?.main || '#4a90e2';
+  const rgb = useMemo(() => hexToRgb(themeColor), [themeColor]);
+
+  const cellColor = (count: number, max: number) => {
+    if (!rgb || max <= 0 || count <= 0) return themeColor;
+    const t = count / max;
+    return `rgb(${Math.round(rgb.r * (0.4 + 0.6 * t))}, ${Math.round(
+      rgb.g * (0.4 + 0.6 * t)
+    )}, ${Math.round(rgb.b * (0.4 + 0.6 * t))})`;
+  };
+
+  const hourLabels = [0, 6, 12, 18, 23];
+
+  return (
+    <GlassCard>
+      <CardTitle>Prompt activity</CardTitle>
+      <Subtitle>
+        When you send prompts across the week (local timezone
+        {data?.tz ? `: ${data.tz}` : ''}).
+      </Subtitle>
+
+      {loading && <StatusText>Loading heatmap…</StatusText>}
+      {error && <StatusText>Could not load prompt activity.</StatusText>}
+      {!loading && !error && data && (
+        <>
+          <GridScroll>
+            <HeatmapGrid role="img" aria-label="Prompt activity heatmap by weekday and hour">
+              <Corner />
+              {data.hours.map((hour) => (
+                <AxisLabel key={`h-${hour}`}>{hourLabels.includes(hour) ? hour : ''}</AxisLabel>
+              ))}
+              {data.days.map((day, dayIdx) => (
+                <React.Fragment key={day}>
+                  <DayLabel>{day}</DayLabel>
+                  {data.hours.map((hour) => {
+                    const count = data.matrix[dayIdx]?.[hour] ?? 0;
+                    const intensity = data.max > 0 ? count / data.max : 0;
+                    return (
+                      <Cell
+                        key={`${day}-${hour}`}
+                        type="button"
+                        $intensity={intensity}
+                        $color={cellColor(count, data.max)}
+                        aria-label={`${day} ${hour}:00 — ${count} prompts`}
+                        onMouseEnter={() => setHover({ day, hour, count })}
+                        onMouseLeave={() => setHover(null)}
+                        onFocus={() => setHover({ day, hour, count })}
+                        onBlur={() => setHover(null)}
+                      />
+                    );
+                  })}
+                </React.Fragment>
+              ))}
+            </HeatmapGrid>
+          </GridScroll>
+          <Footer>
+            {hover
+              ? `${hover.day} ${hover.hour}:00 — ${hover.count} prompt${hover.count === 1 ? '' : 's'}`
+              : data.total === 0
+                ? 'No prompts yet. Chat a bit and this grid fills in.'
+                : [
+                    `${data.total} prompt${data.total === 1 ? '' : 's'} total`,
+                    data.most_active_day ? `Most active day: ${data.most_active_day}` : null,
+                    data.most_active_hour != null
+                      ? `Most active hour: ${data.most_active_hour}:00`
+                      : null,
+                    data.peak_cell
+                      ? `Peak: ${data.peak_cell.day} ${data.peak_cell.hour}:00 (${data.peak_cell.count})`
+                      : null,
+                  ]
+                    .filter(Boolean)
+                    .join(' · ')}
+          </Footer>
+        </>
+      )}
+    </GlassCard>
+  );
+};
+
+export default PromptHeatmapCard;
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import SsoButtons from './SsoButtons';
+import { startOAuth } from '../../auth/sso';
+
+jest.mock('../../auth/sso', () => ({
+  startOAuth: jest.fn(),
+}));
+
+describe('SsoButtons', () => {
+  beforeEach(() => {
+    jest.mocked(startOAuth).mockReset();
+  });
+
+  it('renders nothing when no providers enabled', () => {
+    const { container } = render(
+      <SsoButtons intent="login" providers={{ google: false, microsoft: false }} />
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('uses brand-compliant labels and logos for login', () => {
+    render(<SsoButtons intent="login" providers={{ google: true, microsoft: true }} />);
+
+    expect(screen.getByRole('button', { name: 'Continue with Google' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Sign in with Microsoft' })).toBeInTheDocument();
+    expect(document.querySelectorAll('svg').length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('uses Sign up with Google for signup intent', () => {
+    render(<SsoButtons intent="signup" providers={{ google: true }} />);
+    expect(screen.getByRole('button', { name: 'Sign up with Google' })).toBeInTheDocument();
+  });
+
+  it('starts OAuth for the selected provider', async () => {
+    const user = userEvent.setup();
+    render(<SsoButtons intent="login" providers={{ google: true, microsoft: true }} />);
+
+    await user.click(screen.getByRole('button', { name: 'Continue with Google' }));
+    expect(startOAuth).toHaveBeenCalledWith('google', 'login');
+
+    await user.click(screen.getByRole('button', { name: 'Sign in with Microsoft' }));
+    expect(startOAuth).toHaveBeenCalledWith('microsoft', 'login');
+  });
+});
@@ -20,21 +20,32 @@ const Divider = styled.div`
  }
 `;

-const SsoButton = styled.button`
+const ButtonStack = styled.div`
+  display: flex;
+  flex-direction: column;
  width: 100%;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 0.5rem;
-  color: #fff;
-  padding: 0.85rem 1rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s ease, transform 0.2s ease;
+  gap: 0.6rem;
  margin-top: 0.6rem;
+`;

-  &:hover {
-    background: rgba(255, 255, 255, 0.12);
+/** Shared layout for IdP buttons — equal size / visual weight. */
+const SsoButtonBase = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 2.75rem;
+  border-radius: 0.25rem;
+  padding: 0.65rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-family: 'Roboto', 'Google Sans', system-ui, sans-serif;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+
+  &:hover:not(:disabled) {
    transform: translateY(-1px);
  }

@@ -45,6 +56,93 @@ const SsoButton = styled.button`
  }
 `;

+/**
+ * Google dark-theme button per
+ * https://developers.google.com/identity/branding-guidelines
+ * Fill #131314, stroke #8E918F, text #E3E3E3; multicolor G on white.
+ */
+const GoogleButton = styled(SsoButtonBase)`
+  background: #131314;
+  border: 1px solid #8e918f;
+  color: #e3e3e3;
+
+  &:hover:not(:disabled) {
+    background: #1e1f20;
+    border-color: #a8aba9;
+  }
+`;
+
+/**
+ * Microsoft dark-theme button — logo + "Sign in with Microsoft"
+ * https://learn.microsoft.com/en-us/entra/identity-platform/howto-add-branding-in-apps
+ */
+const MicrosoftButton = styled(SsoButtonBase)`
+  background: #2f2f2f;
+  border: 1px solid transparent;
+  color: #ffffff;
+
+  &:hover:not(:disabled) {
+    background: #3b3b3b;
+  }
+`;
+
+const GoogleLogoBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: #ffffff;
+  border-radius: 0.125rem;
+`;
+
+const LogoMark = styled.span`
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+
+/** Official multicolor Google "G" (standard color Super G). */
+const GoogleGIcon = (): JSX.Element => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
+    <path
+      fill="#EA4335"
+      d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+    />
+    <path
+      fill="#4285F4"
+      d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+    />
+    <path
+      fill="#FBBC05"
+      d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+    />
+    <path
+      fill="#34A853"
+      d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+    />
+    <path fill="none" d="M0 0h48v48H0z" />
+  </svg>
+);
+
+/** Official Microsoft four-square logo — do not recolor. */
+const MicrosoftLogoIcon = (): JSX.Element => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" aria-hidden="true" focusable="false">
+    <rect x="1" y="1" width="9" height="9" fill="#f25022" />
+    <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
+    <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
+    <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
+  </svg>
+);
+
 export type OAuthProviderFlags = {
  google?: boolean;
  microsoft?: boolean;
@@ -56,6 +154,9 @@ type SsoButtonsProps = {
  disabled?: boolean;
 };

+const googleLabel = (intent: 'login' | 'signup'): string =>
+  intent === 'signup' ? 'Sign up with Google' : 'Continue with Google';
+
 const SsoButtons = ({ intent, providers, disabled = false }: SsoButtonsProps): JSX.Element | null => {
  const google = Boolean(providers.google);
  const microsoft = Boolean(providers.microsoft);
@@ -66,24 +167,34 @@ const SsoButtons = ({ intent, providers, disabled = false }: SsoButtonsProps): J
  return (
    <>
      <Divider>or continue with</Divider>
-      {google && (
-        <SsoButton
-          type="button"
-          disabled={disabled}
-          onClick={() => startOAuth('google', intent)}
-        >
-          Continue with Google
-        </SsoButton>
-      )}
-      {microsoft && (
-        <SsoButton
-          type="button"
-          disabled={disabled}
-          onClick={() => startOAuth('microsoft', intent)}
-        >
-          Continue with Microsoft
-        </SsoButton>
-      )}
+      <ButtonStack>
+        {google && (
+          <GoogleButton
+            type="button"
+            disabled={disabled}
+            onClick={() => startOAuth('google', intent)}
+          >
+            <GoogleLogoBadge>
+              <LogoMark>
+                <GoogleGIcon />
+              </LogoMark>
+            </GoogleLogoBadge>
+            {googleLabel(intent)}
+          </GoogleButton>
+        )}
+        {microsoft && (
+          <MicrosoftButton
+            type="button"
+            disabled={disabled}
+            onClick={() => startOAuth('microsoft', intent)}
+          >
+            <LogoMark>
+              <MicrosoftLogoIcon />
+            </LogoMark>
+            Sign in with Microsoft
+          </MicrosoftButton>
+        )}
+      </ButtonStack>
    </>
  );
 };
@@ -1,11 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { axiosInstance } from '../../../axiosApi';
+import { AnalyticsEvents, trackEvent } from '../../utils/analytics';
 import {
+  canOpenBillingPortal,
  formatBillingDate,
  formatTokenCount,
+  isComplimentarySubscription,
  SubscriptionMe,
 } from '../../utils/finance';
+import type { FinanceInvoice } from '../../utils/finance';

 const GlassCard = styled.div`
  background: ${({ theme }) => theme.colors.cardBackground};
@@ -106,6 +110,27 @@ const UpgradeHint = styled.p`
  line-height: 1.45;
 `;

+const UpgradeButton = styled.button`
+  margin-top: 1rem;
+  background: ${({ theme }) => theme.main};
+  border: none;
+  border-radius: 0.5rem;
+  color: #fff;
+  padding: 0.7rem 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+  }
+`;
+
 function clampPct(used: number, quota: number): number {
  if (quota <= 0) return 0;
  return Math.min(100, Math.round((used / quota) * 1000) / 10);
@@ -141,15 +166,26 @@ const UsageMeter = ({ label, meta, usedLabel, pct }: MeterProps): JSX.Element =>

 const UsageSummaryCard = (): JSX.Element => {
  const [subscription, setSubscription] = useState<SubscriptionMe | null>(null);
+  const [hasPortalAccess, setHasPortalAccess] = useState(false);
  const [loading, setLoading] = useState(true);
+  const [upgradeLoading, setUpgradeLoading] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
-      const response = await axiosInstance.get<SubscriptionMe>('/finance/subscription/');
-      setSubscription(response.data || null);
+      const [subscriptionResponse, invoiceResponse] = await Promise.all([
+        axiosInstance.get<SubscriptionMe>('/finance/subscription/'),
+        axiosInstance.get<FinanceInvoice[]>('/finance/invoices/'),
+      ]);
+      setSubscription(subscriptionResponse.data || null);
+      setHasPortalAccess(
+        canOpenBillingPortal(
+          Array.isArray(invoiceResponse.data) ? invoiceResponse.data : []
+        )
+      );
    } catch {
      setSubscription(null);
+      setHasPortalAccess(false);
    } finally {
      setLoading(false);
    }
@@ -174,6 +210,39 @@ const UsageSummaryCard = (): JSX.Element => {
        ? 0
        : null;

+  const complimentary = isComplimentarySubscription(subscription, hasPortalAccess);
+  const showUpgrade = Boolean(subscription?.plan) && hasPortalAccess && !complimentary;
+
+  const handleUpgrade = async () => {
+    trackEvent(AnalyticsEvents.SUBSCRIPTION_UPGRADE_STARTED, {
+      source: 'usage_card',
+    });
+    const billing = document.querySelector('[data-testid="billing-section"]');
+    if (billing) {
+      billing.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const buttons = Array.from(billing.querySelectorAll('button'));
+      const upgrade = buttons.find((btn) =>
+        /upgrade/i.test(btn.textContent || '')
+      );
+      upgrade?.focus();
+      return;
+    }
+    setUpgradeLoading(true);
+    try {
+      const returnUrl = `${window.location.origin}/account/`;
+      const response = await axiosInstance.post<{ portal_url: string }>(
+        '/finance/portal/',
+        { return_url: returnUrl }
+      );
+      if (response.data?.portal_url) {
+        trackEvent(AnalyticsEvents.BILLING_PORTAL_OPENED, { intent: 'upgrade' });
+        window.location.assign(response.data.portal_url);
+      }
+    } finally {
+      setUpgradeLoading(false);
+    }
+  };
+
  return (
    <GlassCard data-testid="usage-summary-card">
      <CardTitle>Usage limit</CardTitle>
@@ -224,9 +293,27 @@ const UsageSummaryCard = (): JSX.Element => {
            />
          )}

-          <UpgradeHint>
-            Need more capacity? Manage or upgrade your plan in Billing below.
-          </UpgradeHint>
+          {showUpgrade ? (
+            <>
+              <UpgradeHint>
+                Need more capacity? Upgrade your plan in Billing, or open upgrade
+                below.
+              </UpgradeHint>
+              <UpgradeButton
+                type="button"
+                onClick={handleUpgrade}
+                disabled={upgradeLoading}
+              >
+                {upgradeLoading ? 'Opening…' : 'Upgrade'}
+              </UpgradeButton>
+            </>
+          ) : complimentary ? (
+            <UpgradeHint>Complimentary access — usage limits follow your granted plan.</UpgradeHint>
+          ) : (
+            <UpgradeHint>
+              Need more capacity? Manage or upgrade your plan in Billing below.
+            </UpgradeHint>
+          )}
        </>
      )}
    </GlassCard>
@@ -0,0 +1,93 @@
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { AxiosResponse } from 'axios';
+import { axiosInstance } from '../../axiosApi';
+import { AuthContext } from '../contexts/AuthContext';
+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
+ * mounting its own (e.g. Header2 + DocumentStoragePage on the same page).
+ */
+let cachedSubscription: SubscriptionMe | null = null;
+let inFlightRequest: Promise<SubscriptionMe | null> | null = null;
+
+async function loadSubscription(): Promise<SubscriptionMe | null> {
+  if (cachedSubscription) {
+    return cachedSubscription;
+  }
+  if (!inFlightRequest) {
+    inFlightRequest = axiosInstance
+      .get<SubscriptionMe>('/finance/subscription/')
+      .then((response: AxiosResponse<SubscriptionMe>) => {
+        cachedSubscription = response.data || null;
+        return cachedSubscription;
+      })
+      .catch(() => null)
+      .finally(() => {
+        inFlightRequest = null;
+      });
+  }
+  return inFlightRequest;
+}
+
+/** Drops the cached subscription so the next useSubscription() call refetches (e.g. after sign-out or a plan change). */
+export function resetSubscriptionCache(): void {
+  cachedSubscription = null;
+  inFlightRequest = null;
+}
+
+export type UseSubscriptionResult = {
+  subscription: SubscriptionMe | null;
+  loading: boolean;
+  hasRag: boolean;
+  refresh: () => Promise<void>;
+};
+
+/** Fetches /finance/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);
+  const [loading, setLoading] = useState(!cachedSubscription);
+  const mountedRef = useRef(true);
+
+  const load = useCallback(async () => {
+    if (!authenticated) {
+      setSubscription(null);
+      setLoading(false);
+      return;
+    }
+    setLoading((prev) => prev || !cachedSubscription);
+    const result = await loadSubscription();
+    if (mountedRef.current) {
+      setSubscription(result);
+      setLoading(false);
+    }
+  }, [authenticated]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    load();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [load]);
+
+  useEffect(() => {
+    if (!authenticated) {
+      resetSubscriptionCache();
+    }
+  }, [authenticated]);
+
+  const refresh = useCallback(async () => {
+    resetSubscriptionCache();
+    await load();
+  }, [load]);
+
+  return {
+    subscription,
+    loading,
+    hasRag: planAllowsRag(subscription),
+    refresh,
+  };
+}
@@ -11,6 +11,7 @@ import styled from "styled-components";
 import ThemeSettingsCard from "../../components/ThemeSettingsCard/ThemeSettingsCard";
 import UsageSummaryCard from "../../components/UsageSummaryCard/UsageSummaryCard";
 import BillingSection from "../../components/BillingSection/BillingSection";
+import DeleteAccountSection from "../../components/DeleteAccountSection/DeleteAccountSection";

 // Styled Components
 const PageContainer = styled.div`
@@ -419,6 +420,7 @@ const AccountPage = (): JSX.Element => {
          <p style={{ color: 'rgba(255,255,255,0.7)' }}>Account and prompt information will be available soon</p>
        </GlassCard>
      )}
+      <DeleteAccountSection />
    </>
  )
 }
@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+import AnalyticsPage from './Analytics';
+import { AccountContext } from '../../contexts/AccountContext';
+import { AuthContext } from '../../contexts/AuthContext';
+import { Account } from '../../data';
+
+const mockGet = jest.fn();
+
+jest.mock('../../../axiosApi', () => ({
+  axiosInstance: {
+    get: (...args: unknown[]) => mockGet(...args),
+    defaults: { headers: { common: {} as Record<string, string | null> } },
+  },
+  applyAccessToken: jest.fn(),
+}));
+
+jest.mock('../../components/ParticleBackground/ParticleBackground', () => () => null);
+jest.mock('../../components/Header2/Header2', () => () => null);
+
+beforeAll(() => {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  (global as unknown as { ResizeObserver: typeof ResizeObserverMock }).ResizeObserver =
+    ResizeObserverMock;
+});
+
+const theme = {
+  main: '#4a90e2',
+  focus: '#224466',
+  darkMode: true,
+  colors: {
+    text: '#ffffff',
+    cardBackground: 'rgba(0,0,0,0.3)',
+    cardBorder: 'rgba(255,255,255,0.1)',
+  },
+};
+
+const emptyHeatmap = {
+  tz: 'UTC',
+  total: 0,
+  max: 0,
+  days: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  hours: Array.from({ length: 24 }, (_, i) => i),
+  matrix: Array.from({ length: 7 }, () => Array(24).fill(0)),
+  most_active_day: null,
+  most_active_hour: null,
+  peak_cell: null,
+};
+
+const renderPage = (accountInit?: ConstructorParameters<typeof Account>[0]) => {
+  const account = new Account(accountInit || { email: 'user@example.com' });
+  return render(
+    <MemoryRouter>
+      <ThemeProvider theme={theme as never}>
+        <AuthContext.Provider
+          value={{
+            authenticated: true,
+            setAuthentication: jest.fn(),
+            needsNewPassword: false,
+            setNeedsNewPassword: jest.fn(),
+            loading: false,
+          }}
+        >
+          <AccountContext.Provider value={{ account, setAccount: jest.fn() }}>
+            <AnalyticsPage />
+          </AccountContext.Provider>
+        </AuthContext.Provider>
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+};
+
+describe('AnalyticsPage (#94)', () => {
+  beforeEach(() => {
+    mockGet.mockReset();
+    mockGet.mockImplementation((url: string) => {
+      if (url.includes('user_prompt_heatmap')) {
+        return Promise.resolve({ data: emptyHeatmap });
+      }
+      return Promise.resolve({ data: [] });
+    });
+  });
+
+  it('shows your activity section with heatmap for all users', async () => {
+    renderPage();
+
+    expect(await screen.findByText('Your activity')).toBeInTheDocument();
+    expect(await screen.findByText('Prompt activity')).toBeInTheDocument();
+    expect(screen.queryByText('Company')).not.toBeInTheDocument();
+  });
+
+  it('shows company section for company managers', async () => {
+    renderPage({
+      email: 'mgr@example.com',
+      is_company_manager: true,
+      company: { id: 1, name: 'Acme', state: '', zipcode: '', address: '' },
+    });
+
+    expect(await screen.findByText('Company')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('Team seat activity')).toBeInTheDocument();
+    });
+  });
+});
@@ -6,9 +6,9 @@ import { axiosInstance } from "../../../axiosApi"
 import { AxiosResponse } from "axios"
 import { AdminAnalytics, AdminAnalyticsType, CompanyUsageAnalytics, CompanyUsageAnalyticsType, UserConversationAnalytics, UserConvesationAnalyticsType, UserPromptAnalytics, UserPromptAnalyticsType } from "../../data"
 import ParticleBackground from "../../components/ParticleBackground/ParticleBackground"
+import PromptHeatmapCard from "../../components/PromptHeatmapCard/PromptHeatmapCard"
 import styled, { ThemeContext } from "styled-components"

-// Styled Components
 const PageContainer = styled.div`
  position: relative;
  width: 100vw;
@@ -18,7 +18,6 @@ const PageContainer = styled.div`
  flex-direction: column;
  color: ${({ theme }) => theme.colors.text};
  font-family: 'Inter', sans-serif;
-  /* background-color: ${({ theme }) => theme.colors.background}; Removed to show particles */
 `;

 const ContentWrapper = styled.div`
@@ -42,6 +41,29 @@ const ContentWrapper = styled.div`
  }
 `;

+const Section = styled.section`
+  width: 100%;
+  max-width: 1200px;
+  margin-bottom: 1rem;
+`;
+
+const SectionHeading = styled.h1`
+  width: 100%;
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0 0 1rem 0;
+  letter-spacing: 0.02em;
+`;
+
+const SectionHint = styled.p`
+  margin: -0.5rem 0 1.25rem 0;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.65;
+  font-size: 0.95rem;
+  line-height: 1.5;
+`;
+
 const GlassCard = styled.div`
  background: ${({ theme }) => theme.colors.cardBackground};
  backdrop-filter: blur(10px);
@@ -96,11 +118,11 @@ const UserPromptAnalyticsCard = (): JSX.Element => {
    }, [])
    return (
        <GlassCard>
-            <CardTitle>Prompt Usage</CardTitle>
+            <CardTitle>Prompt volume</CardTitle>
            <ChartContainer>
                <ResponsiveContainer>
                    <BarChart data={data}>
-                        <XAxis stroke={theme?.colors.text} />
+                        <XAxis dataKey="month" stroke={theme?.colors.text} />
                        <YAxis stroke={theme?.colors.text} />
                        <Legend wrapperStyle={{ color: theme?.colors.text }} />
                        <Tooltip contentStyle={{ backgroundColor: theme?.colors.cardBackground, border: `1px solid ${theme?.colors.cardBorder}`, color: theme?.colors.text }} />
@@ -132,11 +154,11 @@ const UserConversationAnalyticsCard = (): JSX.Element => {

    return (
        <GlassCard>
-            <CardTitle>Conversation Usage</CardTitle>
+            <CardTitle>Conversation volume</CardTitle>
            <ChartContainer>
                <ResponsiveContainer>
                    <BarChart data={data}>
-                        <XAxis stroke={theme?.colors.text} />
+                        <XAxis dataKey="month" stroke={theme?.colors.text} />
                        <YAxis stroke={theme?.colors.text} />
                        <Legend wrapperStyle={{ color: theme?.colors.text }} />
                        <Tooltip contentStyle={{ backgroundColor: theme?.colors.cardBackground, border: `1px solid ${theme?.colors.cardBorder}`, color: theme?.colors.text }} />
@@ -168,7 +190,7 @@ const CompanyUsageAnalyticsCard = (): JSX.Element => {

    return (
        <GlassCard>
-            <CardTitle>Account Usage</CardTitle>
+            <CardTitle>Team seat activity</CardTitle>
            <ChartContainer>
                <ResponsiveContainer>
                    <BarChart data={data}>
@@ -202,7 +224,7 @@ const AdminAnalyticsCard = (): JSX.Element => {
    }, [])
    return (
        <GlassCard>
-            <CardTitle>Response Times</CardTitle>
+            <CardTitle>Response times (ops)</CardTitle>
            <ChartContainer>
                <ResponsiveContainer>
                    <ComposedChart data={data}>
@@ -227,20 +249,57 @@ const AdminAnalyticsCard = (): JSX.Element => {
    )
 }

+const isOpsAdmin = (email?: string, role?: string): boolean => {
+    if (role && ['admin', 'ops', 'staff'].includes(role.toLowerCase())) {
+        return true;
+    }
+    return email === "ryan+admin@aimloperations.com";
+};

 const AnalyticsInner = (): JSX.Element => {
    const { account } = useContext(AccountContext)
+    const showCompany = Boolean(account?.is_company_manager || account?.company);
+    const showAdmin = isOpsAdmin(account?.email, account?.role);

    return (
        <>
-            <GridContainer>
-                <UserConversationAnalyticsCard />
-                <UserPromptAnalyticsCard />
-            </GridContainer>
+            <Section aria-labelledby="analytics-you">
+                <SectionHeading id="analytics-you">Your activity</SectionHeading>
+                <SectionHint>
+                    Personal prompt timing and volume. Other users&apos; private messages are never shown here.
+                </SectionHint>
+                <PromptHeatmapCard />
+                <GridContainer>
+                    <UserConversationAnalyticsCard />
+                    <UserPromptAnalyticsCard />
+                </GridContainer>
+            </Section>

-            {account?.is_company_manager ? <CompanyUsageAnalyticsCard /> : <></>}
-            {account?.email === "ryan+admin@aimloperations.com" ? <AdminAnalyticsCard /> : <></>}
+            {showCompany && (
+                <Section aria-labelledby="analytics-company">
+                    <SectionHeading id="analytics-company">Company</SectionHeading>
+                    <SectionHint>
+                        Aggregated seat and usage trends for your workspace. No message content.
+                    </SectionHint>
+                    {account?.is_company_manager ? (
+                        <CompanyUsageAnalyticsCard />
+                    ) : (
+                        <GlassCard>
+                            <CardTitle>Company insights</CardTitle>
+                            <p style={{ opacity: 0.7, margin: 0 }}>
+                                Detailed team seat charts are available to company managers.
+                            </p>
+                        </GlassCard>
+                    )}
+                </Section>
+            )}

+            {showAdmin && (
+                <Section aria-labelledby="analytics-ops">
+                    <SectionHeading id="analytics-ops">Operations</SectionHeading>
+                    <AdminAnalyticsCard />
+                </Section>
+            )}
        </>
    )
 }
@@ -2,7 +2,7 @@ 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, Menu, Close } from "@mui/icons-material"; // Keeping icons for now, can replace later if needed
+import { AttachFile, Delete, Send, Close } from "@mui/icons-material"; // Keeping icons for now, can replace later if needed
 import { Tooltip } from "@mui/material";
 import Markdown from "markdown-to-jsx";

@@ -63,34 +63,6 @@ const Sidebar = styled.div<{ $isOpen: boolean }>`
  }
 `;

-const MobileSidebarToggle = styled.button`
-  display: none;
-  position: absolute;
-  top: calc(4.75rem + env(safe-area-inset-top, 0px)); /* Below header */
-  left: 1rem;
-  z-index: 15;
-  padding: 0.5rem 1rem;
-  background: ${({ theme }) => theme.main};
-  color: white;
-  border: none;
-  border-radius: 2rem;
-  font-weight: 600;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
-  }
-
-  @media (max-width: 768px) {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-`;
-
 const Overlay = styled.div<{ $isOpen: boolean }>`
  display: none;
  position: fixed;
@@ -454,15 +426,10 @@ const AsyncDashboardInner = (): JSX.Element => {
  return (
    <PageContainer>
      <ParticleBackground />
-      <Header2 />
+      <Header2 onOpenConversations={() => setIsSidebarOpen(true)} />

      <Overlay $isOpen={isSidebarOpen} onClick={() => setIsSidebarOpen(false)} />

-      <MobileSidebarToggle onClick={() => setIsSidebarOpen(true)}>
-        <Menu fontSize="small" />
-        <span>Conversations</span>
-      </MobileSidebarToggle>
-
      <Sidebar $isOpen={isSidebarOpen}>
        <MobileSidebarHeader>
          <span>Conversations</span>
@@ -43,6 +43,7 @@ const renderCallback = (query: string) => {
            <Route path="/" element={<div>Home</div>} />
            <Route path="/terms_of_service/" element={<div>TOS</div>} />
            <Route path="/signin/" element={<div>Sign In Page</div>} />
+            <Route path="/document_storage/" element={<div>Document Storage Page</div>} />
          </Routes>
        </AccountContext.Provider>
      </AuthContext.Provider>
@@ -136,4 +137,13 @@ describe('AuthCallback', () => {
      expect(assignMock).toHaveBeenCalledWith('https://checkout.stripe.test/session');
    });
  });
+
+  it('redirects drive-link callbacks straight to Documents (#83/#84)', async () => {
+    renderCallback('?drive_connected=1');
+
+    await waitFor(() => {
+      expect(screen.getByText('Document Storage Page')).toBeInTheDocument();
+    });
+    expect(mockGet).not.toHaveBeenCalled();
+  });
 });
@@ -111,6 +111,13 @@ const AuthCallback = (): JSX.Element => {
        return;
      }

+      // Drive-link flows (#83/#84) redirect here already authenticated — just
+      // bounce to Documents with a flag so it can show a success banner.
+      if (searchParams.get('drive_connected') === '1') {
+        navigate('/document_storage/?drive_connected=1', { replace: true });
+        return;
+      }
+
      const access = searchParams.get('access');
      const refresh = searchParams.get('refresh');
      const needsCheckout = searchParams.get('needs_checkout') === '1';
@@ -0,0 +1,185 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+import DocumentStoragePage from './DocumentStoragePage';
+import { AuthContext } from '../../contexts/AuthContext';
+import { AccountContext } from '../../contexts/AccountContext';
+import { Account } from '../../data';
+import { resetSubscriptionCache } from '../../hooks/useSubscription';
+
+const mockGet = jest.fn();
+const mockPost = jest.fn();
+const mockPatch = jest.fn();
+const mockDelete = jest.fn();
+
+jest.mock('../../../axiosApi', () => ({
+  axiosInstance: {
+    get: (...args: unknown[]) => mockGet(...args),
+    post: (...args: unknown[]) => mockPost(...args),
+    patch: (...args: unknown[]) => mockPatch(...args),
+    delete: (...args: unknown[]) => mockDelete(...args),
+    defaults: { headers: { common: {} as Record<string, string | null> } },
+  },
+  applyAccessToken: jest.fn(),
+}));
+
+jest.mock('../../components/ParticleBackground/ParticleBackground', () => () => null);
+jest.mock('../../components/Header2/Header2', () => () => null);
+
+const theme = {
+  main: '#4a90e2',
+  focus: '#224466',
+  darkMode: true,
+  colors: {
+    text: '#ffffff',
+    cardBackground: 'rgba(0,0,0,0.3)',
+    cardBorder: 'rgba(255,255,255,0.1)',
+  },
+};
+
+const subscriptionResponse = (rag: boolean) => ({
+  data: {
+    plan: {
+      slug: rag ? 'pro' : 'standard',
+      name: rag ? 'Pro' : 'Standard',
+      features: {
+        text_generation: true,
+        image_generation: rag,
+        rag,
+        all_future_features: false,
+      },
+    },
+    status: 'active',
+    source: 'stripe',
+    needs_checkout: false,
+    stripe_subscription_id: 'sub_1',
+    usage: {},
+  },
+});
+
+const mockGetByUrl = (overrides: { rag: boolean }) => {
+  mockGet.mockImplementation((url: string) => {
+    if (url === '/finance/subscription/') {
+      return Promise.resolve(subscriptionResponse(overrides.rag));
+    }
+    if (typeof url === 'string' && url.startsWith('/documents/')) {
+      return Promise.resolve({
+        data: { count: 0, page: 1, page_size: 20, scope: 'personal', results: [] },
+      });
+    }
+    if (url === '/drive/connections/') {
+      return Promise.resolve({ data: [] });
+    }
+    return Promise.resolve({ data: [] });
+  });
+};
+
+const renderPage = (options?: { isCompanyManager?: boolean; hasCompany?: boolean }) => {
+  const isCompanyManager = options?.isCompanyManager ?? false;
+  const hasCompany = options?.hasCompany ?? false;
+  const account = new Account({
+    email: 'user@example.com',
+    is_company_manager: isCompanyManager,
+    company: hasCompany ? { id: 1, name: 'Acme', state: '', zipcode: '', address: '' } : undefined,
+  });
+  return render(
+    <MemoryRouter initialEntries={['/document_storage/']}>
+      <ThemeProvider theme={theme as never}>
+        <AuthContext.Provider
+          value={{
+            authenticated: true,
+            setAuthentication: jest.fn(),
+            needsNewPassword: false,
+            setNeedsNewPassword: jest.fn(),
+            loading: false,
+          }}
+        >
+          <AccountContext.Provider value={{ account, setAccount: jest.fn() }}>
+            <DocumentStoragePage />
+          </AccountContext.Provider>
+        </AuthContext.Provider>
+      </ThemeProvider>
+    </MemoryRouter>
+  );
+};
+
+describe('DocumentStoragePage (#81/#82/#83/#84/#93)', () => {
+  beforeEach(() => {
+    mockGet.mockReset();
+    mockPost.mockReset();
+    mockPatch.mockReset();
+    mockDelete.mockReset();
+    resetSubscriptionCache();
+  });
+
+  it('shows an upgrade card instead of upload tables when the plan has no RAG', async () => {
+    mockGetByUrl({ rag: false });
+
+    renderPage();
+
+    expect(await screen.findByText('Unlock document storage')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /upgrade in billing/i })).toHaveAttribute(
+      'href',
+      '/account/'
+    );
+    expect(screen.queryByText('Company documents')).not.toBeInTheDocument();
+    expect(screen.queryByText('Personal documents')).not.toBeInTheDocument();
+    expect(screen.queryByText('Upload a Document')).not.toBeInTheDocument();
+  });
+
+  it('shows personal documents for users without a company', async () => {
+    mockGetByUrl({ rag: true });
+
+    renderPage({ hasCompany: false });
+
+    expect(await screen.findByText('Personal documents')).toBeInTheDocument();
+    expect(screen.queryByText('Company documents')).not.toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: 'Company' })).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(/shared with your whole company workspace/i)
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('Upload a Document')).toBeInTheDocument();
+    expect(screen.getByText('Cloud drives')).toBeInTheDocument();
+    expect(screen.queryByText('Company knowledge sources')).not.toBeInTheDocument();
+  });
+
+  it('shows company/personal tabs and company helper copy for company members', async () => {
+    mockGetByUrl({ rag: true });
+
+    renderPage({ hasCompany: true });
+
+    expect(await screen.findByText('Company documents')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Personal' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Company' })).toBeInTheDocument();
+    expect(screen.getByText(/shared with your whole company workspace/i)).toBeInTheDocument();
+  });
+
+  it('also shows the company knowledge sources section for company managers (#84)', async () => {
+    mockGetByUrl({ rag: true });
+
+    renderPage({ isCompanyManager: true, hasCompany: true });
+
+    expect(await screen.findByText('Company knowledge sources')).toBeInTheDocument();
+  });
+
+  it('requests documents with workspace/page/search params (#93)', async () => {
+    mockGetByUrl({ rag: true });
+
+    renderPage({ hasCompany: true });
+
+    await screen.findByText('Company documents');
+    await waitFor(() => {
+      expect(mockGet).toHaveBeenCalledWith(
+        '/documents/',
+        expect.objectContaining({
+          params: expect.objectContaining({
+            workspace: 'company',
+            page: 1,
+            page_size: 20,
+          }),
+        })
+      );
+    });
+  });
+});
@@ -1,9 +1,13 @@
-import { useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
+import { Link, useSearchParams } from "react-router-dom";
 import { Document, DocumentType } from "../../data";
 import { AxiosResponse } from "axios";
 import { axiosInstance } from "../../../axiosApi";
 import Header2 from "../../components/Header2/Header2";
 import ParticleBackground from "../../components/ParticleBackground/ParticleBackground";
+import DriveConnectionsSection from "../../components/DriveConnectionsSection/DriveConnectionsSection";
+import { AccountContext } from "../../contexts/AccountContext";
+import { useSubscription } from "../../hooks/useSubscription";
 import styled from "styled-components";

 // Styled Components
@@ -16,7 +20,6 @@ const PageContainer = styled.div`
  flex-direction: column;
  color: ${({ theme }) => theme.colors.text};
  font-family: 'Inter', sans-serif;
-  /* background-color: ${({ theme }) => theme.colors.background}; Removed to show particles */
 `;

 const ContentWrapper = styled.div`
@@ -60,6 +63,72 @@ const CardTitle = styled.h2`
  padding-bottom: 1rem;
 `;

+const TabRow = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.25rem;
+  flex-wrap: wrap;
+`;
+
+const TabButton = styled.button<{ $active: boolean }>`
+  background: ${({ $active, theme }) => ($active ? theme.main : 'transparent')};
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.5rem;
+  color: ${({ $active, theme }) => ($active ? '#fff' : theme.colors.text)};
+  padding: 0.55rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+`;
+
+const Toolbar = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 1rem;
+`;
+
+const SearchInput = styled.input`
+  flex: 1;
+  min-width: 180px;
+  background: ${({ theme }) => theme.darkMode ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)'};
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.5rem;
+  padding: 0.6rem 0.8rem;
+  color: ${({ theme }) => theme.colors.text};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.darkMode ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.4)'};
+  }
+`;
+
+const PaginationRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.8;
+  font-size: 0.9rem;
+`;
+
+const PageButton = styled.button`
+  background: transparent;
+  border: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  border-radius: 0.5rem;
+  color: ${({ theme }) => theme.colors.text};
+  padding: 0.4rem 0.85rem;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+`;
+
 const StyledTable = styled.table`
  width: 100%;
  border-collapse: collapse;
@@ -75,6 +144,15 @@ const Th = styled.th`
  font-weight: 600;
 `;

+const SortableTh = styled(Th)`
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
 const Td = styled.td`
  padding: 1rem;
  border-bottom: 1px solid ${({ theme }) => theme.colors.cardBorder};
@@ -106,6 +184,26 @@ const StyledButton = styled.button`
  }
 `;

+const StyledButtonLink = styled(Link)`
+  background: ${({ theme }) => theme.main};
+  border: none;
+  border-radius: 0.5rem;
+  color: #fff;
+  padding: 0.8rem 1.5rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px ${({ theme }) => theme.main}66;
+  }
+`;
+
 const FileInputLabel = styled.label`
  background: ${({ theme }) => theme.main};
  border: none;
@@ -181,112 +279,266 @@ const Checkbox = styled.input`
  }
 `;

+const HelperNote = styled.p`
+  margin: 1rem 0 0 0;
+  padding-top: 1rem;
+  border-top: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.65;
+  font-size: 0.9rem;
+  line-height: 1.5;
+`;
+
+const UpgradeText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.8;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+`;
+
+const SuccessBanner = styled.div`
+  width: 100%;
+  max-width: 1000px;
+  margin-bottom: 1.5rem;
+  padding: 1rem 1.5rem;
+  border-radius: 0.75rem;
+  background: rgba(76, 175, 80, 0.15);
+  border: 1px solid rgba(76, 175, 80, 0.4);
+  color: ${({ theme }) => theme.colors.text};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const DismissButton = styled.button`
+  background: transparent;
+  border: none;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 1.1rem;
+  cursor: pointer;
+  line-height: 1;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const EmptyRow = styled.td`
+  padding: 1.5rem 1rem;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.65;
+  text-align: center;
+`;
+
+export type DocumentWorkspaceScope = 'personal' | 'company';
+
+type DocumentsListResponse = {
+  count: number;
+  page: number;
+  page_size: number;
+  scope: DocumentWorkspaceScope;
+  results: DocumentType[];
+};
+
+type SortField = 'name' | 'created' | 'processed' | 'active';

 type DocumentTableCardProps = {
-  documents: Document[],
-  setDocuments: React.Dispatch<React.SetStateAction<Document[]>>
-}
+  scope: DocumentWorkspaceScope;
+  showTabs: boolean;
+  onScopeChange: (scope: DocumentWorkspaceScope) => void;
+  documents: Document[];
+  total: number;
+  page: number;
+  pageSize: number;
+  search: string;
+  ordering: string;
+  loading: boolean;
+  onSearchChange: (value: string) => void;
+  onSort: (field: SortField) => void;
+  onPageChange: (page: number) => void;
+  onToggleActive: (id: number, active: boolean) => void;
+};

-const CompanyDocumentStorageTableCard = ({ documents, setDocuments }: DocumentTableCardProps): JSX.Element => {
+const sortLabel = (field: SortField, ordering: string): string => {
+  const labels: Record<SortField, string> = {
+    name: 'Name',
+    created: 'Date Uploaded',
+    processed: 'Processed',
+    active: 'Active',
+  };
+  if (ordering === field) return `${labels[field]} ↑`;
+  if (ordering === `-${field}`) return `${labels[field]} ↓`;
+  return labels[field];
+};

-  useEffect(() => {
-    async function getUploadedDocuments() {
-      try {
-        const { data, }: AxiosResponse<DocumentType[]> = await axiosInstance.get(`/documents/`);
-        setDocuments(data.map((item) => new Document({
+const DocumentStorageTableCard = ({
+  scope,
+  showTabs,
+  onScopeChange,
+  documents,
+  total,
+  page,
+  pageSize,
+  search,
+  ordering,
+  loading,
+  onSearchChange,
+  onSort,
+  onPageChange,
+  onToggleActive,
+}: DocumentTableCardProps): JSX.Element => {
+  const title = scope === 'company' ? 'Company documents' : 'Personal documents';
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));

-          id: item.id,
-          name: item.file.replace(/^.*[\\/]/, ''),
-          date_uploaded: item.created.substring(0, 10),
-          active: item.active,
-          processed: item.processed,
-
-        })))
-
-
-      } catch (error) {
-        console.log(error)
-      }
-    }
-    getUploadedDocuments();
-  }, [setDocuments])
  return (
    <GlassCard>
-      <CardTitle>Your documents in the company workspace</CardTitle>
+      <CardTitle>{title}</CardTitle>
+
+      {showTabs && (
+        <TabRow role="tablist" aria-label="Document workspace">
+          <TabButton
+            type="button"
+            role="tab"
+            aria-selected={scope === 'personal'}
+            $active={scope === 'personal'}
+            onClick={() => onScopeChange('personal')}
+          >
+            Personal
+          </TabButton>
+          <TabButton
+            type="button"
+            role="tab"
+            aria-selected={scope === 'company'}
+            $active={scope === 'company'}
+            onClick={() => onScopeChange('company')}
+          >
+            Company
+          </TabButton>
+        </TabRow>
+      )}
+
+      <Toolbar>
+        <SearchInput
+          type="search"
+          placeholder="Search documents…"
+          value={search}
+          onChange={(event) => onSearchChange(event.target.value)}
+          aria-label="Search documents"
+        />
+      </Toolbar>
+
      <div style={{ overflowX: 'auto' }}>
        <StyledTable>
          <thead>
            <tr>
-              <Th>Name</Th>
-              <Th>Date Uploaded</Th>
-              <Th>Processed</Th>
-              <Th>Active</Th>
+              <SortableTh onClick={() => onSort('name')}>{sortLabel('name', ordering)}</SortableTh>
+              <SortableTh onClick={() => onSort('created')}>{sortLabel('created', ordering)}</SortableTh>
+              <SortableTh onClick={() => onSort('processed')}>{sortLabel('processed', ordering)}</SortableTh>
+              <SortableTh onClick={() => onSort('active')}>{sortLabel('active', ordering)}</SortableTh>
            </tr>
          </thead>
          <tbody>
-            {documents.map((doc) => (
-              <tr key={doc.id}>
-                <Td>{doc.name}</Td>
-                <Td>{doc.date_uploaded}</Td>
-                <Td>
-                  {doc.processed ? (
-                    <StatusIcon status="success">✓</StatusIcon>
-                  ) : (
-                    <StatusIcon status="pending">⏳</StatusIcon>
-                  )}
-                </Td>
-                <Td>
-                  <ToggleSwitch>
-                    <Checkbox
-                      type="checkbox"
-                      checked={doc.active}
-                      disabled={true}
-                    />
-                    <Slider />
-                  </ToggleSwitch>
-                </Td>
+            {loading ? (
+              <tr>
+                <EmptyRow colSpan={4}>Loading documents…</EmptyRow>
              </tr>
-            ))}
+            ) : documents.length === 0 ? (
+              <tr>
+                <EmptyRow colSpan={4}>No documents found.</EmptyRow>
+              </tr>
+            ) : (
+              documents.map((doc) => (
+                <tr key={doc.id}>
+                  <Td>{doc.name}</Td>
+                  <Td>{doc.date_uploaded}</Td>
+                  <Td>
+                    {doc.processed ? (
+                      <StatusIcon status="success">✓</StatusIcon>
+                    ) : (
+                      <StatusIcon status="pending">⏳</StatusIcon>
+                    )}
+                  </Td>
+                  <Td>
+                    <ToggleSwitch>
+                      <Checkbox
+                        type="checkbox"
+                        checked={doc.active}
+                        onChange={(event) => onToggleActive(doc.id, event.target.checked)}
+                      />
+                      <Slider />
+                    </ToggleSwitch>
+                  </Td>
+                </tr>
+              ))
+            )}
          </tbody>
        </StyledTable>
      </div>
-    </GlassCard>
-  )
-}

-const UserDocumentStorageTableCard = (): JSX.Element => {
-  return (
-    <GlassCard>
-      <CardTitle>Your documents in your personal workspace</CardTitle>
-      <p style={{ color: 'rgba(255,255,255,0.7)' }}>This will become available shortly</p>
-    </GlassCard>
-  )
-}
+      <PaginationRow>
+        <span>
+          {total === 0
+            ? '0 documents'
+            : `Showing ${(page - 1) * pageSize + 1}–${Math.min(page * pageSize, total)} of ${total}`}
+        </span>
+        <div style={{ display: 'flex', gap: '0.5rem' }}>
+          <PageButton type="button" disabled={page <= 1} onClick={() => onPageChange(page - 1)}>
+            Previous
+          </PageButton>
+          <PageButton
+            type="button"
+            disabled={page >= totalPages}
+            onClick={() => onPageChange(page + 1)}
+          >
+            Next
+          </PageButton>
+        </div>
+      </PaginationRow>

-const DocumentUploadCard = (): JSX.Element => {
+      {scope === 'company' && (
+        <HelperNote>
+          These documents are shared with your whole company workspace. Want to search your own
+          files privately? Connect a personal cloud drive in the Cloud drives section below.
+        </HelperNote>
+      )}
+    </GlassCard>
+  );
+};
+
+type DocumentUploadCardProps = {
+  scope: DocumentWorkspaceScope;
+  onUploaded: () => void | Promise<void>;
+};
+
+const DocumentUploadCard = ({ scope, onUploaded }: DocumentUploadCardProps): JSX.Element => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState<boolean>(false);

  const handleDocumentUpload = async (): Promise<void> => {
-
-    console.log(selectedFile)
-    if (selectedFile) {
-      try {
-        await axiosInstance.post('/documents/', {
-          file: selectedFile
-        },
-          {
-            headers: {
-              'Content-Type': 'multipart/form-data',
-            },
-          })
-
-        // TODO set the documents here
-      }
-      finally {
-
-      }
+    if (!selectedFile) {
+      return;
    }
-  }
+    setUploading(true);
+    try {
+      await axiosInstance.post(
+        '/documents/',
+        { file: selectedFile },
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+          params: { workspace: scope },
+        }
+      );
+
+      setSelectedFile(null);
+      await onUploaded();
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setUploading(false);
+    }
+  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length > 0) {
@@ -299,43 +551,213 @@ const DocumentUploadCard = (): JSX.Element => {
      <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '1rem' }}>
        <FileInputLabel>
          Select File
-          <input type="file" hidden onChange={handleFileChange} />
+          <input type="file" hidden onChange={handleFileChange} disabled={uploading} />
        </FileInputLabel>

        {selectedFile && (
          <>
            <span style={{ color: '#fff' }}>{selectedFile.name}</span>
-            <StyledButton onClick={handleDocumentUpload}>
-              Upload
+            <StyledButton onClick={handleDocumentUpload} disabled={uploading}>
+              {uploading ? 'Uploading…' : 'Upload'}
            </StyledButton>
          </>
        )}
      </div>
    </GlassCard>
-  )
-}
+  );
+};
+
+const PAGE_SIZE = 20;

 const DocumentStoragePageInner = (): JSX.Element => {
  const [documents, setDocuments] = useState<Document[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [searchInput, setSearchInput] = useState('');
+  const [search, setSearch] = useState('');
+  const [ordering, setOrdering] = useState('-created');
+  const [loading, setLoading] = useState(true);
+  const { account } = useContext(AccountContext);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [showDriveConnectedBanner, setShowDriveConnectedBanner] = useState(false);
+
+  const hasCompany = Boolean(account?.company);
+  const [scope, setScope] = useState<DocumentWorkspaceScope>(
+    hasCompany ? 'company' : 'personal'
+  );
+
+  useEffect(() => {
+    if (!hasCompany && scope === 'company') {
+      setScope('personal');
+    }
+  }, [hasCompany, scope]);
+
+  useEffect(() => {
+    const handle = window.setTimeout(() => {
+      setSearch(searchInput.trim());
+      setPage(1);
+    }, 300);
+    return () => window.clearTimeout(handle);
+  }, [searchInput]);
+
+  const fetchDocuments = useCallback(async () => {
+    setLoading(true);
+    try {
+      const { data }: AxiosResponse<DocumentsListResponse> = await axiosInstance.get(
+        `/documents/`,
+        {
+          params: {
+            workspace: scope,
+            page,
+            page_size: PAGE_SIZE,
+            search: search || undefined,
+            ordering,
+          },
+        }
+      );
+      const results = Array.isArray(data?.results) ? data.results : [];
+      setTotal(typeof data?.count === 'number' ? data.count : results.length);
+      setDocuments(
+        results.map(
+          (item) =>
+            new Document({
+              id: item.id,
+              name: item.file.replace(/^.*[\\/]/, ''),
+              date_uploaded: item.created.substring(0, 10),
+              active: item.active,
+              processed: item.processed,
+            })
+        )
+      );
+    } catch (error) {
+      console.log(error);
+      setDocuments([]);
+      setTotal(0);
+    } finally {
+      setLoading(false);
+    }
+  }, [scope, page, search, ordering]);
+
+  useEffect(() => {
+    fetchDocuments();
+  }, [fetchDocuments]);
+
+  useEffect(() => {
+    if (searchParams.get('drive_connected') === '1') {
+      setShowDriveConnectedBanner(true);
+      const next = new URLSearchParams(searchParams);
+      next.delete('drive_connected');
+      setSearchParams(next, { replace: true });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleToggleActive = useCallback(async (id: number, active: boolean) => {
+    setDocuments((prev) => prev.map((doc) => (doc.id === id ? { ...doc, active } as Document : doc)));
+    try {
+      await axiosInstance.patch(`documents_details/${id}`, { active });
+    } catch (error) {
+      console.log(error);
+      setDocuments((prev) => prev.map((doc) => (doc.id === id ? { ...doc, active: !active } as Document : doc)));
+    }
+  }, []);
+
+  const handleSort = (field: SortField) => {
+    setPage(1);
+    setOrdering((prev) => {
+      if (prev === field) return `-${field}`;
+      if (prev === `-${field}`) return field;
+      return field === 'created' ? '-created' : field;
+    });
+  };
+
+  const handleScopeChange = (next: DocumentWorkspaceScope) => {
+    setScope(next);
+    setPage(1);
+  };
+
  return (
    <>
-      <CompanyDocumentStorageTableCard documents={documents} setDocuments={setDocuments} />
-      <UserDocumentStorageTableCard />
-      <DocumentUploadCard />
+      {showDriveConnectedBanner && (
+        <SuccessBanner>
+          <span>Drive connected. Choose folders below to include them in your knowledge base.</span>
+          <DismissButton
+            type="button"
+            aria-label="Dismiss"
+            onClick={() => setShowDriveConnectedBanner(false)}
+          >
+            ×
+          </DismissButton>
+        </SuccessBanner>
+      )}
+
+      <DocumentStorageTableCard
+        scope={scope}
+        showTabs={hasCompany}
+        onScopeChange={handleScopeChange}
+        documents={documents}
+        total={total}
+        page={page}
+        pageSize={PAGE_SIZE}
+        search={searchInput}
+        ordering={ordering}
+        loading={loading}
+        onSearchChange={setSearchInput}
+        onSort={handleSort}
+        onPageChange={setPage}
+        onToggleActive={handleToggleActive}
+      />
+      <DocumentUploadCard scope={scope} onUploaded={fetchDocuments} />
+
+      <DriveConnectionsSection
+        kind="personal"
+        title="Cloud drives"
+        description="Connect your personal Google Drive or OneDrive so its files can be searched in chat."
+        connectIntent="link_drive"
+        onSynced={fetchDocuments}
+      />
+
+      {account?.is_company_manager && (
+        <DriveConnectionsSection
+          kind="company"
+          title="Company knowledge sources"
+          description="Connect a shared Google Shared Drive or Microsoft 365 site so your whole team can search these files in chat."
+          connectIntent="link_company_drive"
+          onSynced={fetchDocuments}
+        />
+      )}
    </>
-  )
-}
+  );
+};

 const DocumentStoragePage = (): JSX.Element => {
+  const { hasRag, loading } = useSubscription();
+
  return (
    <PageContainer>
      <ParticleBackground />
      <Header2 />
      <ContentWrapper>
-        <DocumentStoragePageInner />
+        {loading ? (
+          <GlassCard>
+            <CardTitle>Loading…</CardTitle>
+          </GlassCard>
+        ) : hasRag ? (
+          <DocumentStoragePageInner />
+        ) : (
+          <GlassCard>
+            <CardTitle>Unlock document storage</CardTitle>
+            <UpgradeText>
+              Document uploads and cloud drive connections are available on plans that include
+              RAG document search. Upgrade your plan to start uploading files and connecting
+              Google Drive or OneDrive.
+            </UpgradeText>
+            <StyledButtonLink to="/account/">Upgrade in Billing</StyledButtonLink>
+          </GlassCard>
+        )}
      </ContentWrapper>
    </PageContainer>
-  )
-}
+  );
+};

-export default DocumentStoragePage;
+export default DocumentStoragePage;
@@ -85,7 +85,7 @@ describe('SignIn', () => {
    renderSignIn();

    expect(await screen.findByRole('button', { name: 'Continue with Google' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Continue with Microsoft' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Sign in with Microsoft' })).toBeInTheDocument();
  });

  it('hides SSO buttons when oauth not configured', async () => {
@@ -99,6 +99,7 @@ describe('SignIn', () => {

    await waitFor(() => {
      expect(screen.queryByRole('button', { name: 'Continue with Google' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Sign in with Microsoft' })).not.toBeInTheDocument();
    });
  });

@@ -1,6 +1,6 @@
 /**
- * Android hardware back button + keyboard / status-bar insets for Capacitor (#20).
- * No-ops on web.
+ * Native chrome for Capacitor shells (#20 Android, #21 iOS).
+ * Hardware back (Android), status bar, keyboard resize. No-ops on web.
 */

 import { isNativePlatform } from './nativePlatform';
@@ -1,7 +1,9 @@
-/* Capacitor / notch safe-area insets (#20). Harmless on desktop web. */
+/* Capacitor / notch safe-area insets (#20 / #21). Harmless on desktop web. */
 html {
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
+  /* Kill rubber-band overscroll at the document level (iOS WKWebView). */
+  overscroll-behavior: none;
 }

 body {
@@ -10,11 +12,15 @@ body {
  /* Full-bleed page shells must never create a sideways scroll on phones. */
  max-width: 100%;
  overflow-x: hidden;
+  overscroll-behavior: none;
+  /* iOS Safari / WKWebView: avoid pull-to-refresh style bounce on body. */
+  -webkit-overflow-scrolling: touch;
 }

 #root {
  min-height: 100%;
  max-width: 100%;
+  overscroll-behavior: none;
 }

 *,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
westfarn	282bc45b3a	closess #22 Unit Tests / test (pull_request) Successful in 11s Details	2026-08-03 12:13:59 -07:00
westfarn	4501ee8f3d	Docs sync progress, Personal/Company list UX, Analytics heatmap (#92–#94) (#95 ) Deploy Beta / unit-tests (push) Successful in 11s Details Unit Tests / test (push) Successful in 11s Details Deploy Beta / deploy-beta (push) Successful in 2m0s Details ## Summary - #92 — Drive sync progress bar (determinate when total known; indeterminate while listing). - #93 — Documents list: Personal vs Company title, company helper copy only on company scope, Personal\|Company tabs for company members, search/sort/pagination. - #94 — Analytics overhaul: Your activity (heatmap + volume charts) vs Company section for managers/members. Depends on backend PR for #59/#60 + heatmap API. ## Test plan - [x] Jest: DocumentStoragePage, Analytics, drive utils - [ ] Manual: Sync Now shows progress N/M - [ ] Manual: company user tabs Personal/Company; personal-only users see Personal documents only - [ ] Manual: Analytics shows heatmap under Your activity Closes #92 Closes #93 Closes #94Reviewed-on: #95	2026-08-02 04:50:20 -07:00
westfarn	6c96c50d99	Drive Sync now pending UX + error alerts (#90 ) (#91 ) Deploy Beta / deploy-beta (push) Successful in 1m59s Details Deploy Beta / unit-tests (push) Successful in 10s Details Unit Tests / test (push) Successful in 10s Details ## Summary - Closes [#90](#90) - Depends on backend [chat_backend#57](ai_ml_operations/chat_backend#57) (202 + pending status) - Sync now: enqueue, poll until status leaves `pending`, show error/success alert - Per-connection `last_sync_error` shown when status is `error` - OAuth green “Drive connected” banner unchanged (connect-only) - Refreshes document list on successful sync ## Test plan - [x] `drive.test` + `DocumentStoragePage.test` - [ ] Manual with backend #57: Sync fails (Drive API off) → red alert with truncated error - [ ] Manual: Sync succeeds → success alert + docs refresh - [ ] Manual: Syncing… / button disabled while pendingReviewed-on: #91	2026-08-02 04:07:22 -07:00
westfarn	d5a885f42e	Mobile Conversations toggle in header + theme-aware agent bubbles (#87 , #88 ) (#89 ) Deploy Beta / unit-tests (push) Successful in 10s Details Unit Tests / test (push) Successful in 10s Details Deploy Beta / deploy-beta (push) Successful in 2m0s Details ## Summary - Closes [#87](#87) — move mobile Conversations toggle inline beside the Hesychia logo in the header (no overlay over chat bubbles) - Closes [#88](#88) — agent message bubbles follow light/dark theme with correct text contrast; user bubbles unchanged ## Changes - `Header2`: optional `onOpenConversations` renders compact mobile toggle next to brand; label hides on very narrow screens to avoid crowding the nav hamburger - `AsyncDashboard2`: wire drawer open via header callback; remove floating `MobileSidebarToggle` - `ConversationDetailCard`: light-mode agent bubble uses light background + theme text color; dark mode keeps dark translucent bubble + light text ## Test plan - [ ] Mobile: Conversations control appears beside Hesychia logo; opens/closes drawer as before - [ ] Mobile: chat message text no longer obscured by floating Conversations chip - [ ] Narrow phone width: header usable with logo + toggle + hamburger (no overflow) - [ ] Light mode: agent bubbles light with dark text; user bubbles still gradient - [ ] Dark mode: agent bubbles dark with light text; readability OK on long replies - [ ] Unit: `Header2` + `ConversationDetailCard` tests passReviewed-on: #89	2026-08-02 03:39:35 -07:00
westfarn	bfed056a0e	Documents RAG gate + Drive connect UI (#81-#85) (#86 ) Unit Tests / test (push) Successful in 11s Details Deploy Beta / unit-tests (push) Successful in 10s Details Deploy Beta / deploy-beta (push) Successful in 1m58s Details ## Summary Companion to [chat_backend#42](ai_ml_operations/chat_backend#42). - #81: Documents nav + page gated on `plan.features.rag` / `all_future_features`; upgrade CTA for Standard - #82: Upload refreshes list; active toggle via PATCH; clearer company docs labeling - #83: Personal Drive connect (JWT → authorize_url JSON → IdP), list/disconnect/sync/resource ids - #84: Company manager knowledge-source section (`link_company_drive`) - #85: Chat upgrade bubble when WS returns RAG `feature_not_allowed` ## Test plan - [x] `npm test -- --watchAll=false` (157 OK) - [ ] Standard plan: Documents hidden; upgrade card if navigated directly - [ ] Founders/Pro: Documents visible; upload + active toggle - [ ] Connect Drive (needs BE #42); banner on `?drive_connected=1` - [ ] Company manager sees company section; member does not - [ ] RAG-denied chat shows upgrade messageReviewed-on: #86	2026-08-01 14:01:13 -07:00
westfarn	4b685df489	Align Google/Microsoft SSO buttons with brand guidelines (#79 ) (#80 ) Deploy Beta / unit-tests (push) Successful in 10s Details Unit Tests / test (push) Successful in 11s Details Deploy Beta / deploy-beta (push) Successful in 1m59s Details ## Summary - Closes [#79](#79) - Update `SsoButtons` with official Google multicolor "G" (on white) and Microsoft four-square logo - Apply Google dark-theme button colors (`#131314` / `#8E918F` / `#E3E3E3`) and Microsoft dark button styling - Use approved labels: `Continue with Google` / `Sign up with Google`, `Sign in with Microsoft` ## Test plan - [ ] Sign In with Google + Microsoft OAuth enabled → both buttons show logos + correct labels - [ ] Sign Up → Google shows "Sign up with Google"; Microsoft shows "Sign in with Microsoft" - [ ] Click each button still starts existing OAuth redirect flow - [ ] Dark card contrast looks correct; Google "G" remains multicolor on white - [ ] `npm test -- --watchAll=false --testPathPattern=SignIn.test --testPathPattern=SsoButtons.test` passesReviewed-on: #80	2026-08-01 13:04:51 -07:00
westfarn	70dfa85d22	Show Beta Hesychia brand name on beta deploy (#77 ) (#78 ) Deploy Beta / unit-tests (push) Successful in 10s Details Unit Tests / test (push) Successful in 10s Details Deploy Beta / deploy-beta (push) Successful in 1m56s Details ## Summary - Closes [#77](#77) - Sidenav `brandName` becomes Beta Hesychia when `REACT_APP_DEPLOY_ENV=beta`; otherwise stays Hesychia ## Test plan - [ ] Local/default build: sidenav shows `Hesychia` - [ ] Beta build (`.env.beta` / `REACT_APP_DEPLOY_ENV=beta`): sidenav shows `Beta Hesychia` - [ ] Production build: sidenav still shows `Hesychia`Reviewed-on: #78	2026-08-01 12:34:26 -07:00
westfarn	19698658b1	Add subscription upgrade/change/cancel UX and account self-delete (#75 ) (#76 ) Deploy Beta / unit-tests (push) Successful in 10s Details Unit Tests / test (push) Successful in 11s Details Deploy Beta / deploy-beta (push) Successful in 1m55s Details ## Summary - Closes [#75](#75) - Companion for [chat_backend#34](ai_ml_operations/chat_backend#34) (self-delete API) - Account Billing: Upgrade / Change plan / Cancel CTAs (Stripe portal–first), plan picker when multiple public selectable plans exist, cancel confirmation with period-end messaging, complimentary users get no fake cancel - Usage card Upgrade scrolls/focuses Billing; analytics for upgrade/change/cancel intents - Danger Zone: email-confirmed `DELETE /user/` then logout → `/signin/` ## Test plan - [ ] `npm test -- --watchAll=false --testPathPattern='BillingSection\|DeleteAccountSection'` - [ ] Paid Stripe user: Upgrade / Change plan / Cancel → portal (or checkout for higher selectable plan) - [ ] Cancel confirm shows period-end access copy; scheduled cancel notice when `cancel_at_period_end` - [ ] Backer/admin: complimentary message, no Cancel/Upgrade - [ ] Delete account: confirm email → soft-delete → signed out at `/signin/`Reviewed-on: #76	2026-08-01 12:24:10 -07:00