From 06d71d69a182e3d97ab7475e6ef66b3f39ae110a Mon Sep 17 00:00:00 2001
From: iamjr15 <jigyanshu15@gmail.com>
Date: Wed, 29 Jul 2026 16:21:44 +0530
Subject: [PATCH] refactor(web): composer dedup, shared dismissal, query keys,
 file splits

---
 apps/web/src/app/(app)/101/page.tsx           |  11 +-
 apps/web/src/app/(app)/models/page.tsx        |   9 +-
 .../src/app/(app)/personalization/page.tsx    |   9 +-
 apps/web/src/app/(app)/pricing/page.tsx       |   9 +-
 apps/web/src/app/(app)/skills/page.tsx        |  13 +-
 apps/web/src/app/(app)/usage/page.tsx         |   9 +-
 apps/web/src/app/layout.tsx                   |  16 +-
 apps/web/src/app/providers.tsx                |  32 +-
 .../billing/manage-subscription-dialog.tsx    | 315 +-----------------
 .../subscription-cancellation-form.tsx        | 149 +++++++++
 .../src/components/billing/upgrade-dialog.tsx |  16 +-
 .../billing/use-manage-subscription.ts        | 163 +++++++++
 .../chat/chat-context-controller.ts           |  33 +-
 .../components/chat/chat-panel-submission.ts  |  13 +-
 .../components/chat/message-activity-model.ts | 278 ++++++++++++++++
 .../src/components/chat/message-activity.tsx  | 289 +---------------
 .../components/chat/message-deliverables.tsx  |   8 +-
 .../web/src/components/chat/message-parts.tsx |   2 +-
 .../src/components/chat/message-timeline.ts   |   2 +-
 .../chat/prompt-composer-controller.ts        | 154 +++------
 .../components/chat/prompt-composer-view.tsx  |  21 +-
 .../chat/use-chat-panel-controller.ts         |  25 +-
 .../composer/add-menu-controller.ts           |  35 +-
 .../components/composer/composer-textarea.tsx |  51 +++
 .../composer/model-menu-controller.ts         |  29 +-
 .../composer/project-picker-controller.ts     |  51 +--
 .../composer/project-picker-dialogs.tsx       | 173 ++++++++++
 .../composer/project-picker-parts.tsx         | 260 +--------------
 .../components/composer/project-picker.tsx    |   2 +-
 .../components/composer/use-composer-menu.ts  | 103 ++++++
 .../composer/use-project-file-uploads.ts      |   3 +-
 .../home/home-composer-plan-banner.tsx        |   6 +-
 .../web/src/components/home/home-composer.tsx |  23 +-
 .../src/components/home/home-workspace.tsx    |  36 +-
 .../home/use-home-composer-controller.ts      |  98 +-----
 .../preview/browser-takeover-surface.tsx      |  38 +++
 .../preview/computer-panel-tabs.tsx           |  27 +-
 .../preview/console-strip-header.tsx          |   4 +-
 .../src/components/preview/console-strip.tsx  |   4 +-
 .../preview/console-terminal-format.ts        |   4 +-
 .../preview/console-terminal-pane.tsx         |   8 +-
 .../preview/console-terminal-state.ts         |   2 +-
 .../preview/console-terminal.types.ts         |   2 +-
 .../components/preview/expo-device-panel.tsx  | 111 ++++++
 .../preview/preview-device-menu.tsx           |  30 +-
 .../components/preview/preview-path-input.tsx |   2 +-
 .../preview/preview-session.tsx               |   4 +-
 .../components/preview/preview-side-panel.tsx | 160 +--------
 .../preview/preview-url-controls.tsx          |   2 +-
 .../components/preview/sandbox-ide-tab.tsx    |   5 +-
 .../{lib => components}/preview/url-bar.ts    |   4 +-
 .../preview/use-console-terminal-data.ts      |  12 +-
 .../preview/use-console-terminal.ts           |   6 +-
 .../preview/use-ensure-preview-live.ts        |   2 +-
 .../preview/use-preview-console.ts            |   2 +-
 .../components/projects/projects-shell.tsx    |  11 +-
 .../settings/activity-year-chart.tsx          |   8 +-
 .../src/components/settings/pricing-panel.tsx |   1 -
 .../settings/sandbox-hours-meter-body.tsx     |  15 +-
 .../settings/sandbox-hours-meter.tsx          |   6 +-
 .../settings/settings-page-shell.tsx          |  25 ++
 .../src/components/settings/usage-panel.tsx   |   6 +-
 apps/web/src/components/shell/app-chrome.tsx  |  26 +-
 apps/web/src/components/shell/app-sidebar.tsx |   1 -
 .../components/shell/sidebar-chat-list.tsx    |   5 +-
 .../components/shell/sidebar-controller.ts    |  11 +-
 apps/web/src/components/shell/sidebar-data.ts |  11 +-
 .../shell/sidebar-expanded-account.tsx        |   5 +-
 .../shell/sidebar-expanded-content.tsx        |   1 -
 .../shell/sidebar-list-controls.tsx           |  19 +-
 .../src/components/shell/sidebar-panel.tsx    |   1 -
 .../components/shell/sidebar-project-list.tsx |   9 +-
 .../shell/sidebar-rail-more-menu.tsx          |  27 +-
 .../web/src/components/shell/sidebar.types.ts |   1 -
 .../shell/use-auto-collapse-sidebar.ts        |  29 ++
 .../skills/integration-skills-catalog.tsx     |   2 +-
 .../skills/integration-skills-controls.tsx    |  16 +-
 .../skills/use-integration-skills-catalog.ts  |   1 -
 .../components/skills/user-skills-section.tsx |  16 +-
 apps/web/src/lib/api/query-keys.ts            |  29 ++
 apps/web/src/lib/ui/roving-menu-focus.ts      |  64 ++++
 apps/web/src/lib/ui/use-dismissable.ts        |  59 ++++
 82 files changed, 1614 insertions(+), 1666 deletions(-)
 create mode 100644 apps/web/src/components/billing/subscription-cancellation-form.tsx
 create mode 100644 apps/web/src/components/billing/use-manage-subscription.ts
 create mode 100644 apps/web/src/components/chat/message-activity-model.ts
 create mode 100644 apps/web/src/components/composer/composer-textarea.tsx
 create mode 100644 apps/web/src/components/composer/project-picker-dialogs.tsx
 create mode 100644 apps/web/src/components/composer/use-composer-menu.ts
 create mode 100644 apps/web/src/components/preview/browser-takeover-surface.tsx
 rename apps/web/src/{lib => components}/preview/console-terminal-format.ts (86%)
 rename apps/web/src/{lib => components}/preview/console-terminal-state.ts (98%)
 rename apps/web/src/{lib => components}/preview/console-terminal.types.ts (94%)
 create mode 100644 apps/web/src/components/preview/expo-device-panel.tsx
 rename apps/web/src/{lib => components}/preview/preview-session.tsx (98%)
 rename apps/web/src/{lib => components}/preview/url-bar.ts (98%)
 rename apps/web/src/{lib => components}/preview/use-console-terminal-data.ts (94%)
 rename apps/web/src/{lib => components}/preview/use-console-terminal.ts (96%)
 rename apps/web/src/{lib => components}/preview/use-ensure-preview-live.ts (99%)
 rename apps/web/src/{lib => components}/preview/use-preview-console.ts (97%)
 create mode 100644 apps/web/src/components/settings/settings-page-shell.tsx
 create mode 100644 apps/web/src/components/shell/use-auto-collapse-sidebar.ts
 create mode 100644 apps/web/src/lib/api/query-keys.ts
 create mode 100644 apps/web/src/lib/ui/roving-menu-focus.ts
 create mode 100644 apps/web/src/lib/ui/use-dismissable.ts

diff --git a/apps/web/src/app/(app)/101/page.tsx b/apps/web/src/app/(app)/101/page.tsx
index d92f10d4..d2a96355 100644
--- a/apps/web/src/app/(app)/101/page.tsx
+++ b/apps/web/src/app/(app)/101/page.tsx
@@ -1,15 +1,16 @@
 import { Cheatcode101SectionView, Cheatcode101Toc } from "@/components/docs/cheatcode-101-sections";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 import { CheatcodeMark } from "@/components/ui/cheatcode-mark";
 import { CHEATCODE_101_SECTIONS, CHEATCODE_101_TAGLINE } from "@/content/cheatcode-101";
 
 export default function Cheatcode101Page() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background">
-      <div className="mx-auto flex w-full max-w-3xl px-6">
-        <aside className="hidden w-44 shrink-0 pt-12 pr-6 lg:block">
+    <SettingsPageShell width="narrow">
+      <div className="flex">
+        <aside className="hidden w-44 shrink-0 pt-6 pr-6 md:pt-2 lg:block">
           <Cheatcode101Toc sections={CHEATCODE_101_SECTIONS} />
         </aside>
-        <article className="min-w-0 flex-1 pt-12 pb-24">
+        <article className="min-w-0 flex-1 pt-6 pb-8 md:pt-2">
           <header className="mb-16">
             <div className="mb-4 flex items-center gap-2.5 min-[350px]:gap-3">
               <CheatcodeMark
@@ -29,6 +30,6 @@ export default function Cheatcode101Page() {
           ))}
         </article>
       </div>
-    </section>
+    </SettingsPageShell>
   );
 }
diff --git a/apps/web/src/app/(app)/models/page.tsx b/apps/web/src/app/(app)/models/page.tsx
index 84dc6f76..7e90a48b 100644
--- a/apps/web/src/app/(app)/models/page.tsx
+++ b/apps/web/src/app/(app)/models/page.tsx
@@ -1,11 +1,10 @@
 import { ModelsPanel } from "@/components/settings/models-panel";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 
 export default function ModelsPage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2.5 pt-6 pb-16 text-foreground sm:px-6 md:pt-10 lg:px-10">
-      <div className="mx-auto w-full max-w-[740px]">
-        <ModelsPanel />
-      </div>
-    </section>
+    <SettingsPageShell width="narrow">
+      <ModelsPanel />
+    </SettingsPageShell>
   );
 }
diff --git a/apps/web/src/app/(app)/personalization/page.tsx b/apps/web/src/app/(app)/personalization/page.tsx
index 1556a66c..22408c97 100644
--- a/apps/web/src/app/(app)/personalization/page.tsx
+++ b/apps/web/src/app/(app)/personalization/page.tsx
@@ -1,11 +1,10 @@
 import { PersonalizationPanel } from "@/components/settings/personalization-panel";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 
 export default function PersonalizationPage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2.5 pt-6 pb-16 text-foreground sm:px-6 md:pt-10 lg:px-10">
-      <div className="mx-auto w-full max-w-[740px]">
-        <PersonalizationPanel />
-      </div>
-    </section>
+    <SettingsPageShell width="narrow">
+      <PersonalizationPanel />
+    </SettingsPageShell>
   );
 }
diff --git a/apps/web/src/app/(app)/pricing/page.tsx b/apps/web/src/app/(app)/pricing/page.tsx
index 3388c1bc..60348681 100644
--- a/apps/web/src/app/(app)/pricing/page.tsx
+++ b/apps/web/src/app/(app)/pricing/page.tsx
@@ -1,11 +1,10 @@
 import { PricingPanel } from "@/components/settings/pricing-panel";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 
 export default function PricingPage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2.5 pt-6 pb-16 text-foreground md:pt-10">
-      <div className="mx-auto w-full max-w-5xl">
-        <PricingPanel />
-      </div>
-    </section>
+    <SettingsPageShell width="wide">
+      <PricingPanel />
+    </SettingsPageShell>
   );
 }
diff --git a/apps/web/src/app/(app)/skills/page.tsx b/apps/web/src/app/(app)/skills/page.tsx
index 279101f8..ccc48f06 100644
--- a/apps/web/src/app/(app)/skills/page.tsx
+++ b/apps/web/src/app/(app)/skills/page.tsx
@@ -1,15 +1,14 @@
 import { Suspense } from "react";
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 import { IntegrationSkillsCatalog } from "@/components/skills/integration-skills-catalog";
 import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
 
 export default function SkillsPage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2 pt-6 pb-16 text-foreground sm:px-6 md:pt-10 lg:px-10">
-      <div className="mx-auto w-full max-w-[740px]">
-        <Suspense fallback={<CheatcodeLoader className="min-h-72" label="Loading skills" />}>
-          <IntegrationSkillsCatalog />
-        </Suspense>
-      </div>
-    </section>
+    <SettingsPageShell width="narrow">
+      <Suspense fallback={<CheatcodeLoader className="min-h-72" label="Loading skills" />}>
+        <IntegrationSkillsCatalog />
+      </Suspense>
+    </SettingsPageShell>
   );
 }
diff --git a/apps/web/src/app/(app)/usage/page.tsx b/apps/web/src/app/(app)/usage/page.tsx
index 9b1d9549..6a2256b3 100644
--- a/apps/web/src/app/(app)/usage/page.tsx
+++ b/apps/web/src/app/(app)/usage/page.tsx
@@ -1,11 +1,10 @@
+import { SettingsPageShell } from "@/components/settings/settings-page-shell";
 import { UsagePanel } from "@/components/settings/usage-panel";
 
 export default function UsagePage() {
   return (
-    <section className="chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2.5 pt-6 pb-16 text-foreground md:pt-10">
-      <div className="mx-auto w-full max-w-5xl">
-        <UsagePanel />
-      </div>
-    </section>
+    <SettingsPageShell width="wide">
+      <UsagePanel />
+    </SettingsPageShell>
   );
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 357183ae..5c0dbaa5 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,11 +1,12 @@
 import { env } from "@cheatcode/env/web";
 import { PRODUCTION_APP_ORIGIN } from "@cheatcode/env/web-config";
 import { ClerkProvider } from "@clerk/nextjs";
+import { auth } from "@clerk/nextjs/server";
 import { ui } from "@clerk/ui";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
-import type { ReactNode } from "react";
+import { type ReactNode, Suspense } from "react";
 import "./globals.css";
 import "./effects.css";
 import { ClientObservability } from "@/components/observability/client-observability";
@@ -31,8 +32,9 @@ export const metadata: Metadata = {
   },
 };
 
-export default async function RootLayout({ children }: { children: ReactNode }) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   const clerkPublishableKey = env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY;
+  const sessionPromise = auth().then(({ orgId, userId }) => ({ orgId: orgId ?? null, userId }));
 
   return (
     <html
@@ -54,10 +56,12 @@ export default async function RootLayout({ children }: { children: ReactNode })
           signUpUrl="/sign-up"
           ui={ui}
         >
-          <Providers>
-            <ClientObservability />
-            {children}
-          </Providers>
+          <Suspense>
+            <Providers sessionPromise={sessionPromise}>
+              <ClientObservability />
+              {children}
+            </Providers>
+          </Suspense>
         </ClerkProvider>
       </body>
     </html>
diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx
index 5d5ff650..9ff0f752 100644
--- a/apps/web/src/app/providers.tsx
+++ b/apps/web/src/app/providers.tsx
@@ -1,12 +1,11 @@
 "use client";
 
-import { useAuth } from "@clerk/nextjs";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import dynamic from "next/dynamic";
 import { ThemeProvider } from "next-themes";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
-import { useEffect, useLayoutEffect, useState } from "react";
+import { use, useEffect, useLayoutEffect, useState } from "react";
 import { Toaster } from "sonner";
 import { useAppStore } from "@/lib/store/app-store";
 import { useChatTabsStore } from "@/lib/store/chat-tabs-store";
@@ -17,22 +16,39 @@ const CommandPalette = dynamic(
   { ssr: false },
 );
 
-export function Providers({ children }: { children: ReactNode }) {
+interface RootSession {
+  orgId: null | string;
+  userId: null | string;
+}
+
+export function Providers({
+  children,
+  sessionPromise,
+}: {
+  children: ReactNode;
+  sessionPromise: Promise<RootSession>;
+}) {
   return (
     <NuqsAdapter>
       <ThemeProvider attribute="class" defaultTheme="light" disableTransitionOnChange enableSystem>
-        <IdentityQueryProvider>{children}</IdentityQueryProvider>
+        <IdentityQueryProvider sessionPromise={sessionPromise}>{children}</IdentityQueryProvider>
       </ThemeProvider>
     </NuqsAdapter>
   );
 }
 
-function IdentityQueryProvider({ children }: { children: ReactNode }) {
-  const { isLoaded, orgId, userId } = useAuth();
-  const identity = isLoaded ? `${userId ?? "anonymous"}:${orgId ?? "personal"}` : "loading";
+function IdentityQueryProvider({
+  children,
+  sessionPromise,
+}: {
+  children: ReactNode;
+  sessionPromise: Promise<RootSession>;
+}) {
+  const { orgId, userId } = use(sessionPromise);
+  const identity = `${userId ?? "anonymous"}:${orgId ?? "personal"}`;
 
   return (
-    <IdentityQueryBoundary key={identity} showCommandPalette={Boolean(isLoaded && userId)}>
+    <IdentityQueryBoundary key={identity} showCommandPalette={Boolean(userId)}>
       {children}
     </IdentityQueryBoundary>
   );
diff --git a/apps/web/src/components/billing/manage-subscription-dialog.tsx b/apps/web/src/components/billing/manage-subscription-dialog.tsx
index 4c689a70..b53b208a 100644
--- a/apps/web/src/components/billing/manage-subscription-dialog.tsx
+++ b/apps/web/src/components/billing/manage-subscription-dialog.tsx
@@ -1,39 +1,19 @@
 "use client";
 
-import type {
-  BillingCancel,
-  BillingCancellationReason,
-  BillingStateResponse,
-  BillingSubscriptionActionResponse,
-} from "@cheatcode/types";
-import { type QueryClient, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-import { toast } from "sonner";
-import { ChevronDown, CreditCard, Loader2, ModalShell } from "@/components/ui";
+import type { BillingStateResponse } from "@cheatcode/types";
+import { SubscriptionCancellationForm } from "@/components/billing/subscription-cancellation-form";
+import {
+  billingStatusLabel,
+  formatPeriodEnd,
+  type ManageSubscriptionController,
+  useManageSubscription,
+} from "@/components/billing/use-manage-subscription";
+import { CreditCard, Loader2, ModalShell } from "@/components/ui";
 import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
 import { RecoveryCard } from "@/components/ui/recovery-card";
-import {
-  requestBillingCancellation,
-  requestBillingPortal,
-  requestBillingReactivation,
-} from "@/lib/api/billing";
-import { BILLING_STATE_QUERY_KEY, useBillingStateQuery } from "@/lib/hooks/use-billing";
-
-const CANCELLATION_REASON_LABELS: Record<BillingCancellationReason, string> = {
-  customer_service: "Customer service",
-  low_quality: "Quality didn't meet my needs",
-  missing_features: "Missing features",
-  other: "Something else",
-  switched_service: "Switched to another service",
-  too_complex: "Too difficult to use",
-  too_expensive: "Too expensive",
-  unused: "I don't use it enough",
-};
-
-type DialogStep = "cancel" | "overview";
+import type { useBillingStateQuery } from "@/lib/hooks/use-billing";
 
 interface ManageSubscriptionDialogProps {
-  getToken: () => Promise<null | string>;
   onClose: () => void;
   open: boolean;
   planDisplayName: string;
@@ -41,13 +21,12 @@ interface ManageSubscriptionDialogProps {
 }
 
 export function ManageSubscriptionDialog({
-  getToken,
   onClose,
   open,
   planDisplayName,
   sandboxHoursTotal,
 }: ManageSubscriptionDialogProps) {
-  const controller = useManageSubscriptionController({ getToken, onClose, open, planDisplayName });
+  const controller = useManageSubscription({ onClose, open, planDisplayName });
   return (
     <ModalShell
       ariaLabel="Manage plan"
@@ -64,103 +43,12 @@ export function ManageSubscriptionDialog({
   );
 }
 
-function useManageSubscriptionController({
-  getToken,
-  onClose,
-  open,
-  planDisplayName,
-}: Pick<ManageSubscriptionDialogProps, "getToken" | "onClose" | "open" | "planDisplayName">) {
-  const queryClient = useQueryClient();
-  const stateQuery = useBillingStateQuery(getToken, open);
-  const [step, setStep] = useState<DialogStep>("overview");
-  const [reason, setReason] = useState<BillingCancellationReason | "">("");
-  const [comment, setComment] = useState("");
-  const cancelMutation = useCancellationMutation(getToken, queryClient, () => setStep("overview"));
-  const portalMutation = useBillingPortalMutation(getToken);
-  const reactivateMutation = useReactivationMutation(getToken, queryClient, planDisplayName);
-  const isBusy =
-    cancelMutation.isPending || portalMutation.isPending || reactivateMutation.isPending;
-
-  function closeDialog() {
-    if (isBusy) return;
-    setStep("overview");
-    setReason("");
-    setComment("");
-    onClose();
-  }
-
-  function confirmCancellation() {
-    const trimmedComment = comment.trim();
-    cancelMutation.mutate({
-      ...(trimmedComment ? { comment: trimmedComment } : {}),
-      ...(reason ? { reason } : {}),
-    });
-  }
-
-  return {
-    closeDialog,
-    comment,
-    confirmCancellation,
-    isBusy,
-    openBillingPortal: () => portalMutation.mutate(),
-    reactivate: () => reactivateMutation.mutate(),
-    reason,
-    setComment,
-    setReason,
-    setStep,
-    stateQuery,
-    step,
-  };
-}
-
-function useCancellationMutation(
-  getToken: () => Promise<null | string>,
-  queryClient: QueryClient,
-  onSuccess: () => void,
-) {
-  return useMutation({
-    mutationFn: (input: BillingCancel) => requestBillingCancellation(getToken, input),
-    onError: (error) =>
-      toast.error(error instanceof Error ? error.message : "Plan cancellation failed"),
-    onSuccess: (result) => {
-      updateCachedBillingState(queryClient, result);
-      onSuccess();
-      toast.success(cancellationSuccessMessage(result.currentPeriodEnd));
-    },
-  });
-}
-
-function useReactivationMutation(
-  getToken: () => Promise<null | string>,
-  queryClient: QueryClient,
-  planDisplayName: string,
-) {
-  return useMutation({
-    mutationFn: () => requestBillingReactivation(getToken),
-    onError: (error) =>
-      toast.error(error instanceof Error ? error.message : "Plan reactivation failed"),
-    onSuccess: (result) => {
-      updateCachedBillingState(queryClient, result);
-      toast.success(`${planDisplayName} will keep renewing`);
-    },
-  });
-}
-
-function useBillingPortalMutation(getToken: () => Promise<null | string>) {
-  return useMutation({
-    mutationFn: () => requestBillingPortal(getToken),
-    onError: (error) =>
-      toast.error(error instanceof Error ? error.message : "Billing portal couldn't open"),
-    onSuccess: (url) => window.location.assign(url),
-  });
-}
-
 function ManageDialogFrame({
   controller,
   planDisplayName,
   sandboxHoursTotal,
 }: {
-  controller: ReturnType<typeof useManageSubscriptionController>;
+  controller: ManageSubscriptionController;
   planDisplayName: string;
   sandboxHoursTotal: number;
 }) {
@@ -186,7 +74,7 @@ function ManageDialogBody({
   planDisplayName,
   sandboxHoursTotal,
 }: {
-  controller: ReturnType<typeof useManageSubscriptionController>;
+  controller: ManageSubscriptionController;
   planDisplayName: string;
   sandboxHoursTotal: number;
 }) {
@@ -196,7 +84,7 @@ function ManageDialogBody({
   if (!stateQuery.data) return null;
   if (controller.step === "cancel") {
     return (
-      <CancellationForm
+      <SubscriptionCancellationForm
         comment={controller.comment}
         isBusy={controller.isBusy}
         onBack={() => controller.setStep("overview")}
@@ -424,181 +312,6 @@ function PlanManagementMessage({
   );
 }
 
-function CancellationForm({
-  comment,
-  isBusy,
-  onBack,
-  onCommentChange,
-  onConfirm,
-  onReasonChange,
-  periodEnd,
-  planDisplayName,
-  reason,
-}: {
-  comment: string;
-  isBusy: boolean;
-  onBack: () => void;
-  onCommentChange: (value: string) => void;
-  onConfirm: () => void;
-  onReasonChange: (value: BillingCancellationReason | "") => void;
-  periodEnd: string | null;
-  planDisplayName: string;
-  reason: BillingCancellationReason | "";
-}) {
-  return (
-    <div className="mt-5">
-      <h3 className="font-semibold text-[16px]">Cancel {planDisplayName}?</h3>
-      <p className="mt-1.5 text-[13px] text-fg-secondary leading-5">
-        Your plan stays active until {formatPeriodEnd(periodEnd)}. You won't be charged again after
-        that date.
-      </p>
-      <div className="mt-5 space-y-4">
-        <CancellationReasonField disabled={isBusy} onChange={onReasonChange} value={reason} />
-        <CancellationCommentField disabled={isBusy} onChange={onCommentChange} value={comment} />
-      </div>
-      <CancellationActions isBusy={isBusy} onBack={onBack} onConfirm={onConfirm} />
-    </div>
-  );
-}
-
-function CancellationReasonField({
-  disabled,
-  onChange,
-  value,
-}: {
-  disabled: boolean;
-  onChange: (value: BillingCancellationReason | "") => void;
-  value: BillingCancellationReason | "";
-}) {
-  return (
-    <label className="block">
-      <span className="font-medium text-[13px] text-fg-secondary">Why are you cancelling?</span>
-      <span className="relative mt-2 block min-w-0 max-w-full">
-        <select
-          className="block h-11 w-full min-w-0 appearance-none rounded-[14px] border border-border bg-background py-0 pr-10 pl-3 text-[14px] outline-none disabled:cursor-not-allowed disabled:bg-bg-secondary disabled:text-placeholder"
-          disabled={disabled}
-          onChange={(event) => onChange(event.target.value as BillingCancellationReason | "")}
-          value={value}
-        >
-          <option value="">Select a reason (optional)</option>
-          {Object.entries(CANCELLATION_REASON_LABELS).map(([reason, label]) => (
-            <option key={reason} value={reason}>
-              {label}
-            </option>
-          ))}
-        </select>
-        <ChevronDown
-          aria-hidden="true"
-          className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-fg-secondary"
-        />
-      </span>
-    </label>
-  );
-}
-
-function CancellationCommentField({
-  disabled,
-  onChange,
-  value,
-}: {
-  disabled: boolean;
-  onChange: (value: string) => void;
-  value: string;
-}) {
-  return (
-    <label className="block">
-      <span className="flex items-center justify-between gap-3 font-medium text-[13px] text-fg-secondary">
-        Anything else?
-        <span className="font-normal text-placeholder">Optional</span>
-      </span>
-      <textarea
-        className="mt-2 min-h-24 w-full resize-y rounded-[14px] border border-border bg-background px-3 py-2.5 text-[14px] leading-5 outline-none placeholder:text-placeholder"
-        disabled={disabled}
-        maxLength={1000}
-        onChange={(event) => onChange(event.target.value)}
-        placeholder="Tell us what could have been better"
-        value={value}
-      />
-    </label>
-  );
-}
-
-function CancellationActions({
-  isBusy,
-  onBack,
-  onConfirm,
-}: {
-  isBusy: boolean;
-  onBack: () => void;
-  onConfirm: () => void;
-}) {
-  return (
-    <div className="mt-6 flex items-center justify-end gap-2">
-      <button
-        className="inline-flex h-10 items-center rounded-full px-4 font-medium text-[13px] text-fg-secondary transition-colors hover:bg-secondary disabled:opacity-50"
-        disabled={isBusy}
-        onClick={onBack}
-        type="button"
-      >
-        Keep plan
-      </button>
-      <button
-        className="inline-flex h-10 items-center gap-2 rounded-full bg-[#a0443e] px-4 font-medium text-[13px] text-white transition-colors hover:bg-[#8f3934] disabled:opacity-50"
-        disabled={isBusy}
-        onClick={onConfirm}
-        type="button"
-      >
-        {isBusy ? <Loader2 aria-hidden="true" className="size-3.5 animate-spin" /> : null}
-        Cancel at period end
-      </button>
-    </div>
-  );
-}
-
 function ManagePlanLoading() {
   return <CheatcodeLoader className="mt-5 min-h-[148px]" label="Loading plan details" />;
 }
-
-function updateCachedBillingState(
-  queryClient: QueryClient,
-  result: BillingSubscriptionActionResponse,
-): void {
-  queryClient.setQueryData<BillingStateResponse>(BILLING_STATE_QUERY_KEY, (current) =>
-    current
-      ? {
-          ...current,
-          cancelAtPeriodEnd: result.cancelAtPeriodEnd,
-          canCancel: !result.cancelAtPeriodEnd,
-          canReactivate: result.cancelAtPeriodEnd,
-          currentPeriodEnd: result.currentPeriodEnd,
-          currentPeriodStart: result.currentPeriodStart,
-          subscriptionStatus: result.status,
-        }
-      : current,
-  );
-}
-
-function billingStatusLabel(state: BillingStateResponse): string {
-  if (state.cancelAtPeriodEnd) return `Ends ${formatPeriodEnd(state.currentPeriodEnd)}`;
-  if (state.subscriptionStatus === "active") return "Active";
-  if (state.subscriptionStatus === "trialing") return "Trial";
-  if (state.subscriptionStatus === "past_due") return "Payment issue";
-  if (state.subscriptionStatus === "none") return "Active";
-  return state.subscriptionStatus.replaceAll("_", " ");
-}
-
-function cancellationSuccessMessage(periodEnd: string | null): string {
-  return periodEnd ? `Plan will end ${formatPeriodEnd(periodEnd)}` : "Plan cancellation scheduled";
-}
-
-function formatPeriodEnd(value: string | null): string {
-  if (!value) return "the end of this billing period";
-  return BILLING_DATE_FORMATTER.format(new Date(value));
-}
-
-const BILLING_DATE_FORMATTER = new Intl.DateTimeFormat("en", {
-  day: "numeric",
-  month: "short",
-  timeZone: "UTC",
-  year: "numeric",
-});
diff --git a/apps/web/src/components/billing/subscription-cancellation-form.tsx b/apps/web/src/components/billing/subscription-cancellation-form.tsx
new file mode 100644
index 00000000..6733e3c1
--- /dev/null
+++ b/apps/web/src/components/billing/subscription-cancellation-form.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import type { BillingCancellationReason } from "@cheatcode/types";
+import { formatPeriodEnd } from "@/components/billing/use-manage-subscription";
+import { ChevronDown, Loader2 } from "@/components/ui";
+
+const CANCELLATION_REASON_LABELS: Record<BillingCancellationReason, string> = {
+  customer_service: "Customer service",
+  low_quality: "Quality didn't meet my needs",
+  missing_features: "Missing features",
+  other: "Something else",
+  switched_service: "Switched to another service",
+  too_complex: "Too difficult to use",
+  too_expensive: "Too expensive",
+  unused: "I don't use it enough",
+};
+
+interface SubscriptionCancellationFormProps {
+  comment: string;
+  isBusy: boolean;
+  onBack: () => void;
+  onCommentChange: (value: string) => void;
+  onConfirm: () => void;
+  onReasonChange: (value: BillingCancellationReason | "") => void;
+  periodEnd: string | null;
+  planDisplayName: string;
+  reason: BillingCancellationReason | "";
+}
+
+export function SubscriptionCancellationForm({
+  comment,
+  isBusy,
+  onBack,
+  onCommentChange,
+  onConfirm,
+  onReasonChange,
+  periodEnd,
+  planDisplayName,
+  reason,
+}: SubscriptionCancellationFormProps) {
+  return (
+    <div className="mt-5">
+      <h3 className="font-semibold text-[16px]">Cancel {planDisplayName}?</h3>
+      <p className="mt-1.5 text-[13px] text-fg-secondary leading-5">
+        Your plan stays active until {formatPeriodEnd(periodEnd)}. You won't be charged again after
+        that date.
+      </p>
+      <div className="mt-5 space-y-4">
+        <CancellationReasonField disabled={isBusy} onChange={onReasonChange} value={reason} />
+        <CancellationCommentField disabled={isBusy} onChange={onCommentChange} value={comment} />
+      </div>
+      <CancellationActions isBusy={isBusy} onBack={onBack} onConfirm={onConfirm} />
+    </div>
+  );
+}
+
+function CancellationReasonField({
+  disabled,
+  onChange,
+  value,
+}: {
+  disabled: boolean;
+  onChange: (value: BillingCancellationReason | "") => void;
+  value: BillingCancellationReason | "";
+}) {
+  return (
+    <label className="block">
+      <span className="font-medium text-[13px] text-fg-secondary">Why are you cancelling?</span>
+      <span className="relative mt-2 block min-w-0 max-w-full">
+        <select
+          className="block h-11 w-full min-w-0 appearance-none rounded-[14px] border border-border bg-background py-0 pr-10 pl-3 text-[14px] outline-none disabled:cursor-not-allowed disabled:bg-bg-secondary disabled:text-placeholder"
+          disabled={disabled}
+          onChange={(event) => onChange(event.target.value as BillingCancellationReason | "")}
+          value={value}
+        >
+          <option value="">Select a reason (optional)</option>
+          {Object.entries(CANCELLATION_REASON_LABELS).map(([reason, label]) => (
+            <option key={reason} value={reason}>
+              {label}
+            </option>
+          ))}
+        </select>
+        <ChevronDown
+          aria-hidden="true"
+          className="pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-fg-secondary"
+        />
+      </span>
+    </label>
+  );
+}
+
+function CancellationCommentField({
+  disabled,
+  onChange,
+  value,
+}: {
+  disabled: boolean;
+  onChange: (value: string) => void;
+  value: string;
+}) {
+  return (
+    <label className="block">
+      <span className="flex items-center justify-between gap-3 font-medium text-[13px] text-fg-secondary">
+        Anything else?
+        <span className="font-normal text-placeholder">Optional</span>
+      </span>
+      <textarea
+        className="mt-2 min-h-24 w-full resize-y rounded-[14px] border border-border bg-background px-3 py-2.5 text-[14px] leading-5 outline-none placeholder:text-placeholder"
+        disabled={disabled}
+        maxLength={1000}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder="Tell us what could have been better"
+        value={value}
+      />
+    </label>
+  );
+}
+
+function CancellationActions({
+  isBusy,
+  onBack,
+  onConfirm,
+}: {
+  isBusy: boolean;
+  onBack: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <div className="mt-6 flex items-center justify-end gap-2">
+      <button
+        className="inline-flex h-10 items-center rounded-full px-4 font-medium text-[13px] text-fg-secondary transition-colors hover:bg-secondary disabled:opacity-50"
+        disabled={isBusy}
+        onClick={onBack}
+        type="button"
+      >
+        Keep plan
+      </button>
+      <button
+        className="inline-flex h-10 items-center gap-2 rounded-full bg-[#a0443e] px-4 font-medium text-[13px] text-white transition-colors hover:bg-[#8f3934] disabled:opacity-50"
+        disabled={isBusy}
+        onClick={onConfirm}
+        type="button"
+      >
+        {isBusy ? <Loader2 aria-hidden="true" className="size-3.5 animate-spin" /> : null}
+        Cancel at period end
+      </button>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/billing/upgrade-dialog.tsx b/apps/web/src/components/billing/upgrade-dialog.tsx
index ffcb541c..86d972f4 100644
--- a/apps/web/src/components/billing/upgrade-dialog.tsx
+++ b/apps/web/src/components/billing/upgrade-dialog.tsx
@@ -2,6 +2,7 @@
 
 import type { PlanSummary } from "@cheatcode/types";
 import { PaidBillingTierSchema } from "@cheatcode/types";
+import { useAuth } from "@clerk/nextjs";
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { CreditCard, Loader2, ModalShell } from "@/components/ui";
@@ -17,16 +18,8 @@ import { useBillingCatalogQuery } from "@/lib/hooks/use-billing";
  * id is configured). Checkout passes the tier the user picked — no surface hardcodes
  * a single tier.
  */
-export function UpgradeDialog({
-  getToken,
-  onClose,
-  open,
-}: {
-  getToken: () => Promise<null | string>;
-  onClose: () => void;
-  open: boolean;
-}) {
-  const controller = useUpgradeDialog(getToken);
+export function UpgradeDialog({ onClose, open }: { onClose: () => void; open: boolean }) {
+  const controller = useUpgradeDialog();
   return (
     <ModalShell
       ariaLabel="Choose a plan"
@@ -42,7 +35,8 @@ export function UpgradeDialog({
   );
 }
 
-function useUpgradeDialog(getToken: () => Promise<null | string>) {
+function useUpgradeDialog() {
+  const { getToken } = useAuth();
   const query = useBillingCatalogQuery(getToken);
   const checkout = useMutation({
     mutationFn: (tier: PlanSummary["id"]) =>
diff --git a/apps/web/src/components/billing/use-manage-subscription.ts b/apps/web/src/components/billing/use-manage-subscription.ts
new file mode 100644
index 00000000..d1a04bc1
--- /dev/null
+++ b/apps/web/src/components/billing/use-manage-subscription.ts
@@ -0,0 +1,163 @@
+"use client";
+
+import type {
+  BillingCancel,
+  BillingCancellationReason,
+  BillingStateResponse,
+  BillingSubscriptionActionResponse,
+} from "@cheatcode/types";
+import { useAuth } from "@clerk/nextjs";
+import { type QueryClient, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  requestBillingCancellation,
+  requestBillingPortal,
+  requestBillingReactivation,
+} from "@/lib/api/billing";
+import { BILLING_STATE_QUERY_KEY, useBillingStateQuery } from "@/lib/hooks/use-billing";
+
+type DialogStep = "cancel" | "overview";
+
+interface UseManageSubscriptionOptions {
+  onClose: () => void;
+  open: boolean;
+  planDisplayName: string;
+}
+
+export function useManageSubscription({
+  onClose,
+  open,
+  planDisplayName,
+}: UseManageSubscriptionOptions) {
+  const { getToken } = useAuth();
+  const queryClient = useQueryClient();
+  const stateQuery = useBillingStateQuery(getToken, open);
+  const [step, setStep] = useState<DialogStep>("overview");
+  const [reason, setReason] = useState<BillingCancellationReason | "">("");
+  const [comment, setComment] = useState("");
+  const cancelMutation = useCancellationMutation(getToken, queryClient, () => setStep("overview"));
+  const portalMutation = useBillingPortalMutation(getToken);
+  const reactivateMutation = useReactivationMutation(getToken, queryClient, planDisplayName);
+  const isBusy =
+    cancelMutation.isPending || portalMutation.isPending || reactivateMutation.isPending;
+
+  function closeDialog() {
+    if (isBusy) return;
+    setStep("overview");
+    setReason("");
+    setComment("");
+    onClose();
+  }
+
+  function confirmCancellation() {
+    const trimmedComment = comment.trim();
+    cancelMutation.mutate({
+      ...(trimmedComment ? { comment: trimmedComment } : {}),
+      ...(reason ? { reason } : {}),
+    });
+  }
+
+  return {
+    closeDialog,
+    comment,
+    confirmCancellation,
+    isBusy,
+    openBillingPortal: () => portalMutation.mutate(),
+    reactivate: () => reactivateMutation.mutate(),
+    reason,
+    setComment,
+    setReason,
+    setStep,
+    stateQuery,
+    step,
+  };
+}
+
+export type ManageSubscriptionController = ReturnType<typeof useManageSubscription>;
+
+function useCancellationMutation(
+  getToken: () => Promise<null | string>,
+  queryClient: QueryClient,
+  onSuccess: () => void,
+) {
+  return useMutation({
+    mutationFn: (input: BillingCancel) => requestBillingCancellation(getToken, input),
+    onError: (error) =>
+      toast.error(error instanceof Error ? error.message : "Plan cancellation failed"),
+    onSuccess: (result) => {
+      updateCachedBillingState(queryClient, result);
+      onSuccess();
+      toast.success(cancellationSuccessMessage(result.currentPeriodEnd));
+    },
+  });
+}
+
+function useReactivationMutation(
+  getToken: () => Promise<null | string>,
+  queryClient: QueryClient,
+  planDisplayName: string,
+) {
+  return useMutation({
+    mutationFn: () => requestBillingReactivation(getToken),
+    onError: (error) =>
+      toast.error(error instanceof Error ? error.message : "Plan reactivation failed"),
+    onSuccess: (result) => {
+      updateCachedBillingState(queryClient, result);
+      toast.success(`${planDisplayName} will keep renewing`);
+    },
+  });
+}
+
+function useBillingPortalMutation(getToken: () => Promise<null | string>) {
+  return useMutation({
+    mutationFn: () => requestBillingPortal(getToken),
+    onError: (error) =>
+      toast.error(error instanceof Error ? error.message : "Billing portal couldn't open"),
+    onSuccess: (url) => window.location.assign(url),
+  });
+}
+
+function updateCachedBillingState(
+  queryClient: QueryClient,
+  result: BillingSubscriptionActionResponse,
+): void {
+  queryClient.setQueryData<BillingStateResponse>(BILLING_STATE_QUERY_KEY, (current) =>
+    current
+      ? {
+          ...current,
+          cancelAtPeriodEnd: result.cancelAtPeriodEnd,
+          canCancel: !result.cancelAtPeriodEnd,
+          canReactivate: result.cancelAtPeriodEnd,
+          currentPeriodEnd: result.currentPeriodEnd,
+          currentPeriodStart: result.currentPeriodStart,
+          subscriptionStatus: result.status,
+        }
+      : current,
+  );
+}
+
+export function billingStatusLabel(state: BillingStateResponse): string {
+  if (state.cancelAtPeriodEnd) return `Ends ${formatPeriodEnd(state.currentPeriodEnd)}`;
+  if (state.subscriptionStatus === "active") return "Active";
+  if (state.subscriptionStatus === "trialing") return "Trial";
+  if (state.subscriptionStatus === "past_due") return "Payment issue";
+  if (state.subscriptionStatus === "none") return "Active";
+  return state.subscriptionStatus.replaceAll("_", " ");
+}
+
+function cancellationSuccessMessage(periodEnd: string | null): string {
+  return periodEnd ? `Plan will end ${formatPeriodEnd(periodEnd)}` : "Plan cancellation scheduled";
+}
+
+export function formatPeriodEnd(value: string | null): string {
+  if (!value) return "the end of this billing period";
+  return BILLING_DATE_FORMATTER.format(new Date(value));
+}
+
+const BILLING_DATE_FORMATTER = new Intl.DateTimeFormat("en", {
+  day: "numeric",
+  month: "short",
+  timeZone: "UTC",
+  year: "numeric",
+});
diff --git a/apps/web/src/components/chat/chat-context-controller.ts b/apps/web/src/components/chat/chat-context-controller.ts
index b1e3da2c..ce523eed 100644
--- a/apps/web/src/components/chat/chat-context-controller.ts
+++ b/apps/web/src/components/chat/chat-context-controller.ts
@@ -8,8 +8,10 @@ import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } fro
 import { toast } from "sonner";
 import { tabsWithCurrent } from "@/components/chat/chat-context-model";
 import { createChat } from "@/lib/api/project-thread";
+import { invalidateChatLists } from "@/lib/api/query-keys";
 import { useAppStore } from "@/lib/store/app-store";
 import { type ChatWorkspaceTab, useChatTabsStore } from "@/lib/store/chat-tabs-store";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 
 const EMPTY_TABS: ChatWorkspaceTab[] = [];
 
@@ -44,7 +46,11 @@ export function useChatContextController({
   const creation = useCreateProjectChat(project, setFolderChatsOpen);
   const closeActiveTab = useCloseActiveTab(project, tabs, threadId);
   const selectFolderChat = useSelectFolderChat(project, setFolderChatsOpen);
-  useDismissFolderChats(folderChatsOpen, contextRef, setFolderChatsOpen);
+  useDismissable({
+    isOpen: folderChatsOpen,
+    onDismiss: () => setFolderChatsOpen(false),
+    ref: contextRef,
+  });
   return {
     actions: {
       closeActiveTab,
@@ -93,8 +99,7 @@ function useCreateProjectChat(
         { id: thread.id, projectId: project.id, title: thread.title?.trim() || "New chat" },
         "start",
       );
-      void queryClient.invalidateQueries({ queryKey: ["sidebar-chats"] });
-      void queryClient.invalidateQueries({ queryKey: ["sidebar-project-threads"] });
+      void invalidateChatLists(queryClient);
       void queryClient.invalidateQueries({ queryKey: ["folder-chats", project.id] });
       router.push(`/chats/${encodeURIComponent(thread.id)}`);
     },
@@ -161,25 +166,3 @@ function useSelectFolderChat(
     [openChatTab, project, router, setFolderChatsOpen, setPreviewPanelOpen],
   );
 }
-
-function useDismissFolderChats(
-  isOpen: boolean,
-  contextRef: RefObject<HTMLDivElement | null>,
-  setIsOpen: (open: boolean) => void,
-) {
-  useEffect(() => {
-    if (!isOpen) return;
-    const closeOnPointer = (event: PointerEvent) => {
-      if (!contextRef.current?.contains(event.target as Node)) setIsOpen(false);
-    };
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setIsOpen(false);
-    };
-    document.addEventListener("pointerdown", closeOnPointer);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnPointer);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [contextRef, isOpen, setIsOpen]);
-}
diff --git a/apps/web/src/components/chat/chat-panel-submission.ts b/apps/web/src/components/chat/chat-panel-submission.ts
index bcd8ce89..6f0f3848 100644
--- a/apps/web/src/components/chat/chat-panel-submission.ts
+++ b/apps/web/src/components/chat/chat-panel-submission.ts
@@ -10,6 +10,7 @@ import {
   listThreadMessageRecordsPage,
   updateThread,
 } from "@/lib/api/project-thread";
+import { sidebarKeys, threadKeys } from "@/lib/api/query-keys";
 
 export interface PendingSubmission {
   messageId: string;
@@ -51,7 +52,7 @@ export async function reconcileFailedSubmission(input: {
   const accepted = await submissionWasAccepted(input.getToken, input.threadId, input.pending);
   input.clearError();
   if (accepted) {
-    await input.queryClient.invalidateQueries({ queryKey: ["threads", input.threadId] });
+    await input.queryClient.invalidateQueries({ queryKey: threadKeys.detail(input.threadId) });
     await input.resumeStream();
     return;
   }
@@ -96,10 +97,10 @@ export async function titleChatFromFirstPrompt(
 ): Promise<void> {
   try {
     const updated = await updateThread(getToken, threadId, { title: buildThreadTitle(prompt) });
-    queryClient.setQueryData(["threads", threadId], updated);
+    queryClient.setQueryData(threadKeys.detail(threadId), updated);
     await Promise.all([
-      queryClient.invalidateQueries({ queryKey: ["sidebar-chats"] }),
-      queryClient.invalidateQueries({ queryKey: ["sidebar-project-threads"] }),
+      queryClient.invalidateQueries({ queryKey: sidebarKeys.chats }),
+      queryClient.invalidateQueries({ queryKey: sidebarKeys.projectThreads }),
       queryClient.invalidateQueries({ queryKey: ["folder-chats", updated.projectId] }),
     ]);
   } catch {
@@ -145,8 +146,8 @@ function completeProjectTargetNavigation(
 ): void {
   const handoff = buildExistingProjectParams(input.prompt).toString();
   input.setDraft(input.threadId, "");
-  void input.queryClient.invalidateQueries({ queryKey: ["sidebar-chats"] });
-  void input.queryClient.invalidateQueries({ queryKey: ["sidebar-project-threads"] });
+  void input.queryClient.invalidateQueries({ queryKey: sidebarKeys.chats });
+  void input.queryClient.invalidateQueries({ queryKey: sidebarKeys.projectThreads });
   input.router.push(`/chats/${encodeURIComponent(targetThreadId)}?${handoff}`);
 }
 
diff --git a/apps/web/src/components/chat/message-activity-model.ts b/apps/web/src/components/chat/message-activity-model.ts
new file mode 100644
index 00000000..049564bd
--- /dev/null
+++ b/apps/web/src/components/chat/message-activity-model.ts
@@ -0,0 +1,278 @@
+import type { CheatcodeUIMessage } from "@cheatcode/types";
+
+const MAX_TOOL_STRING_LENGTH = 600;
+const MAX_TOOL_ARRAY_ITEMS = 6;
+const MAX_TOOL_OBJECT_KEYS = 16;
+const MAX_TOOL_ARG_LENGTH = 96;
+const LARGE_TOOL_FIELDS = new Set([
+  "base64",
+  "code",
+  "componentSource",
+  "data",
+  "logs",
+  "stderr",
+  "stdout",
+  "svg",
+]);
+
+export type MessagePart = CheatcodeUIMessage["parts"][number];
+export type ToolPart = Extract<MessagePart, { type: "data-tool" }>;
+export type ProjectCreatedPart = Extract<MessagePart, { type: "data-project-created" }>;
+type TextPart = Extract<MessagePart, { type: "text" }>;
+export type ActivityRow =
+  | { kind: "tools"; key: string; parts: ToolPart[] }
+  | { kind: "project-created"; key: string; part: ProjectCreatedPart }
+  | { kind: "narration"; key: string; part: TextPart };
+type ToolVerbSpec = { verb: string; argKeys?: string[] };
+type ToolDetailSection = {
+  isCommand: boolean;
+  key: string;
+  label: string;
+  scroll: boolean;
+  value: string;
+};
+
+const TOOL_VERBS: Record<string, ToolVerbSpec> = {
+  runCode: { verb: "Ran", argKeys: ["code"] },
+  fs_read: { verb: "Read", argKeys: ["path", "file", "filePath"] },
+  fs_write: { verb: "Wrote", argKeys: ["path", "file", "filePath"] },
+  fs_delete: { verb: "Deleted", argKeys: ["path", "file"] },
+  fs_list: { verb: "Listed", argKeys: ["path", "dir", "directory"] },
+  fs_search: { verb: "Searched files", argKeys: ["query", "pattern", "q"] },
+  shell_exec: { verb: "Ran", argKeys: ["command", "cmd"] },
+  shell_terminal: { verb: "Ran", argKeys: ["command", "cmd"] },
+  shell_start_process: { verb: "Started", argKeys: ["command", "cmd"] },
+  shell_kill_process: { verb: "Stopped a process" },
+  start_dev_server: { verb: "Started the dev server" },
+  git_clone: { verb: "Cloned", argKeys: ["repo", "url"] },
+  git_commit: { verb: "Committed", argKeys: ["message"] },
+  git_push: { verb: "Pushed changes" },
+  git_status: { verb: "Checked git status" },
+  browser_open: { verb: "Opened", argKeys: ["url"] },
+  browser_act: { verb: "Acted in the browser", argKeys: ["action", "instruction"] },
+  browser_extract: { verb: "Extracted from a page", argKeys: ["url"] },
+  browser_observe: { verb: "Observed a page" },
+  browser_screenshot: { verb: "Captured a screenshot" },
+  data_analyze_csv: { verb: "Analyzed", argKeys: ["path", "file"] },
+  data_chart: { verb: "Built a chart" },
+  data_scrape_to_csv: { verb: "Scraped to CSV", argKeys: ["url"] },
+  docs_generate_docx: { verb: "Generated a document" },
+  docs_generate_pdf: { verb: "Generated a PDF" },
+  docs_generate_slides: { verb: "Generated slides" },
+  docs_generate_xlsx: { verb: "Generated a spreadsheet" },
+  firecrawl_scrape: { verb: "Scraped", argKeys: ["url"] },
+  firecrawl_search: { verb: "Searched the web", argKeys: ["query", "q"] },
+  firecrawl_extract: { verb: "Extracted", argKeys: ["url"] },
+  search_web: { verb: "Searched the web", argKeys: ["query", "q"] },
+  search_web_advanced: { verb: "Searched the web", argKeys: ["query", "q"] },
+  search_company: { verb: "Researched a company", argKeys: ["company", "name", "query"] },
+  research_deep: { verb: "Researched", argKeys: ["query", "topic"] },
+  research_fanout: { verb: "Researched", argKeys: ["query", "topic"] },
+  composio_execute: { verb: "Ran an app action", argKeys: ["tool", "action", "slug"] },
+  composio_list_tools: { verb: "Listed app actions" },
+  skill_create: { verb: "Created a skill", argKeys: ["name", "slug"] },
+  skill_invoke: { verb: "Used skill", argKeys: ["skillName", "name", "slug", "skill"] },
+  skill_read_reference: { verb: "Read a skill reference", argKeys: ["path", "name"] },
+};
+
+export function buildActivityRows(parts: MessagePart[]): ActivityRow[] {
+  const rows: ActivityRow[] = [];
+  let run: { parts: ToolPart[]; startIndex: number } | null = null;
+  const flush = () => {
+    if (run) {
+      rows.push({ kind: "tools", key: `tools:${run.startIndex}`, parts: run.parts });
+      run = null;
+    }
+  };
+  parts.forEach((part, index) => {
+    if (isToolPart(part)) {
+      run ??= { parts: [], startIndex: index };
+      run.parts.push(part);
+      return;
+    }
+    flush();
+    if (part.type === "data-project-created") {
+      rows.push({ kind: "project-created", key: `project-created:${index}`, part });
+      return;
+    }
+    if (part.type === "text") {
+      rows.push({ kind: "narration", key: `narration:${index}`, part });
+    }
+  });
+  flush();
+  return rows;
+}
+
+export function collapseToolRuns(parts: ToolPart[]): { key: string; parts: ToolPart[] }[] {
+  const rows: { key: string; parts: ToolPart[] }[] = [];
+  let index = 0;
+  while (index < parts.length) {
+    const type = parts[index]?.type;
+    let end = index + 1;
+    while (end < parts.length && parts[end]?.type === type) {
+      end += 1;
+    }
+    rows.push({ key: `${type}:${index}`, parts: parts.slice(index, end) });
+    index = end;
+  }
+  return rows;
+}
+
+export function buildToolDetailSections(parts: ToolPart[]): ToolDetailSection[] {
+  const occurrences = new Map<string, number>();
+  return parts.flatMap((part) => {
+    const partIdentity = toolPartIdentity(part);
+    return toolDetailSections(part).map((section) => {
+      const baseKey = `${partIdentity}:${section.label}`;
+      const occurrence = occurrences.get(baseKey) ?? 0;
+      occurrences.set(baseKey, occurrence + 1);
+      return {
+        ...section,
+        key: occurrence === 0 ? baseKey : `${baseKey}:${occurrence}`,
+      };
+    });
+  });
+}
+
+export function describeTool(part: ToolPart): { verb: string; arg: string | null } {
+  const { name, input } = toolNameAndInput(part);
+  const spec = TOOL_VERBS[name];
+  const verb = spec?.verb ?? humanizeToolName(name);
+  for (const key of spec?.argKeys ?? []) {
+    const value = input[key];
+    if (typeof value === "string" && value.trim().length > 0) {
+      return { verb, arg: shortenArg(value.trim()) };
+    }
+  }
+  return { verb, arg: null };
+}
+
+function humanizeToolName(name: string): string {
+  if (!name) {
+    return "Ran a tool";
+  }
+  const spaced = name.replace(/[_-]+/g, " ").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
+export function isToolPart(part: MessagePart): part is ToolPart {
+  return part.type === "data-tool";
+}
+
+function toolDetailSections(part: ToolPart): Array<Omit<ToolDetailSection, "key">> {
+  const { name, input } = toolNameAndInput(part);
+  const isCommand = isCommandTool(name);
+  return [
+    {
+      label: isCommand ? "Command" : "Input",
+      isCommand,
+      scroll: false,
+      value: isCommand ? commandValue(input) : formatUnknown(summarizeToolValue(input, 0)),
+    },
+  ].filter((section) => section.value.length > 0);
+}
+
+function toolPartIdentity(part: ToolPart): string {
+  return `${part.type}:${part.data.toolCallId}`;
+}
+
+function commandValue(input: Record<string, unknown>): string {
+  for (const key of ["command", "cmd", "code"]) {
+    const value = input[key];
+    if (typeof value === "string" && value.trim().length > 0) {
+      return value.trim();
+    }
+  }
+  return formatUnknown(summarizeToolValue(input, 0));
+}
+
+function isCommandTool(name: string): boolean {
+  return name === "runCode" || name.startsWith("shell_") || name === "start_dev_server";
+}
+
+function toolNameAndInput(part: ToolPart): { input: Record<string, unknown>; name: string } {
+  return {
+    input: part.data.input ?? {},
+    name: part.data.toolName,
+  };
+}
+
+function shortenArg(value: string): string {
+  const collapsed = value.replace(/\s+/g, " ");
+  return collapsed.length <= MAX_TOOL_ARG_LENGTH
+    ? collapsed
+    : `${collapsed.slice(0, MAX_TOOL_ARG_LENGTH - 1)}…`;
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === "object" ? (value as Record<string, unknown>) : {};
+}
+
+function formatUnknown(value: unknown): string {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (value === null || value === undefined) {
+    return "";
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function summarizeToolValue(value: unknown, depth: number): unknown {
+  if (typeof value === "string") {
+    return summarizeString(value);
+  }
+  if (value === null || typeof value !== "object") {
+    return value;
+  }
+  if (depth >= 3) {
+    return "[nested object]";
+  }
+  if (Array.isArray(value)) {
+    return summarizeToolArray(value, depth);
+  }
+  return summarizeToolRecord(asRecord(value), depth);
+}
+
+function summarizeToolArray(value: unknown[], depth: number): unknown[] {
+  const visible = value
+    .slice(0, MAX_TOOL_ARRAY_ITEMS)
+    .map((item) => summarizeToolValue(item, depth + 1));
+  return value.length > MAX_TOOL_ARRAY_ITEMS
+    ? [...visible, `[${value.length - MAX_TOOL_ARRAY_ITEMS} more item(s)]`]
+    : visible;
+}
+
+function summarizeToolRecord(
+  value: Record<string, unknown>,
+  depth: number,
+): Record<string, unknown> {
+  const entries = Object.entries(value);
+  const summarized: Record<string, unknown> = {};
+  for (const [key, entryValue] of entries.slice(0, MAX_TOOL_OBJECT_KEYS)) {
+    summarized[key] =
+      typeof entryValue === "string" && LARGE_TOOL_FIELDS.has(key)
+        ? summarizeLargeField(key, entryValue)
+        : summarizeToolValue(entryValue, depth + 1);
+  }
+  if (entries.length > MAX_TOOL_OBJECT_KEYS) {
+    summarized["more"] = `${entries.length - MAX_TOOL_OBJECT_KEYS} more field(s)`;
+  }
+  return summarized;
+}
+
+function summarizeString(value: string): string {
+  return value.length > MAX_TOOL_STRING_LENGTH
+    ? `${value.slice(0, MAX_TOOL_STRING_LENGTH)}... [${value.length.toLocaleString()} chars]`
+    : value;
+}
+
+function summarizeLargeField(key: string, value: string): string {
+  return value.length > MAX_TOOL_STRING_LENGTH
+    ? `[${key}: ${value.length.toLocaleString()} chars] ${value.slice(0, 160)}...`
+    : value;
+}
diff --git a/apps/web/src/components/chat/message-activity.tsx b/apps/web/src/components/chat/message-activity.tsx
index 6e84b709..39cbdc13 100644
--- a/apps/web/src/components/chat/message-activity.tsx
+++ b/apps/web/src/components/chat/message-activity.tsx
@@ -1,86 +1,21 @@
 "use client";
 
-import type { CheatcodeUIMessage } from "@cheatcode/types";
 import { useState } from "react";
 import { Response as MarkdownResponse } from "@/components/ai-elements/response";
+import {
+  type ActivityRow,
+  buildActivityRows,
+  buildToolDetailSections,
+  collapseToolRuns,
+  describeTool,
+  isToolPart,
+  type MessagePart,
+  type ProjectCreatedPart,
+  type ToolPart,
+} from "@/components/chat/message-activity-model";
 import { ChevronDown } from "@/components/ui";
 import { cn } from "@/lib/ui/cn";
 
-const MAX_TOOL_STRING_LENGTH = 600;
-const MAX_TOOL_ARRAY_ITEMS = 6;
-const MAX_TOOL_OBJECT_KEYS = 16;
-const MAX_TOOL_ARG_LENGTH = 96;
-const LARGE_TOOL_FIELDS = new Set([
-  "base64",
-  "code",
-  "componentSource",
-  "data",
-  "logs",
-  "stderr",
-  "stdout",
-  "svg",
-]);
-
-type MessagePart = CheatcodeUIMessage["parts"][number];
-type ToolPart = Extract<MessagePart, { type: "data-tool" }>;
-type ProjectCreatedPart = Extract<MessagePart, { type: "data-project-created" }>;
-type TextPart = Extract<MessagePart, { type: "text" }>;
-type ActivityRow =
-  | { kind: "tools"; key: string; parts: ToolPart[] }
-  | { kind: "project-created"; key: string; part: ProjectCreatedPart }
-  | { kind: "narration"; key: string; part: TextPart };
-type ToolVerbSpec = { verb: string; argKeys?: string[] };
-type ToolDetailSection = {
-  isCommand: boolean;
-  key: string;
-  label: string;
-  scroll: boolean;
-  value: string;
-};
-
-const TOOL_VERBS: Record<string, ToolVerbSpec> = {
-  runCode: { verb: "Ran", argKeys: ["code"] },
-  fs_read: { verb: "Read", argKeys: ["path", "file", "filePath"] },
-  fs_write: { verb: "Wrote", argKeys: ["path", "file", "filePath"] },
-  fs_delete: { verb: "Deleted", argKeys: ["path", "file"] },
-  fs_list: { verb: "Listed", argKeys: ["path", "dir", "directory"] },
-  fs_search: { verb: "Searched files", argKeys: ["query", "pattern", "q"] },
-  shell_exec: { verb: "Ran", argKeys: ["command", "cmd"] },
-  shell_terminal: { verb: "Ran", argKeys: ["command", "cmd"] },
-  shell_start_process: { verb: "Started", argKeys: ["command", "cmd"] },
-  shell_kill_process: { verb: "Stopped a process" },
-  start_dev_server: { verb: "Started the dev server" },
-  git_clone: { verb: "Cloned", argKeys: ["repo", "url"] },
-  git_commit: { verb: "Committed", argKeys: ["message"] },
-  git_push: { verb: "Pushed changes" },
-  git_status: { verb: "Checked git status" },
-  browser_open: { verb: "Opened", argKeys: ["url"] },
-  browser_act: { verb: "Acted in the browser", argKeys: ["action", "instruction"] },
-  browser_extract: { verb: "Extracted from a page", argKeys: ["url"] },
-  browser_observe: { verb: "Observed a page" },
-  browser_screenshot: { verb: "Captured a screenshot" },
-  data_analyze_csv: { verb: "Analyzed", argKeys: ["path", "file"] },
-  data_chart: { verb: "Built a chart" },
-  data_scrape_to_csv: { verb: "Scraped to CSV", argKeys: ["url"] },
-  docs_generate_docx: { verb: "Generated a document" },
-  docs_generate_pdf: { verb: "Generated a PDF" },
-  docs_generate_slides: { verb: "Generated slides" },
-  docs_generate_xlsx: { verb: "Generated a spreadsheet" },
-  firecrawl_scrape: { verb: "Scraped", argKeys: ["url"] },
-  firecrawl_search: { verb: "Searched the web", argKeys: ["query", "q"] },
-  firecrawl_extract: { verb: "Extracted", argKeys: ["url"] },
-  search_web: { verb: "Searched the web", argKeys: ["query", "q"] },
-  search_web_advanced: { verb: "Searched the web", argKeys: ["query", "q"] },
-  search_company: { verb: "Researched a company", argKeys: ["company", "name", "query"] },
-  research_deep: { verb: "Researched", argKeys: ["query", "topic"] },
-  research_fanout: { verb: "Researched", argKeys: ["query", "topic"] },
-  composio_execute: { verb: "Ran an app action", argKeys: ["tool", "action", "slug"] },
-  composio_list_tools: { verb: "Listed app actions" },
-  skill_create: { verb: "Created a skill", argKeys: ["name", "slug"] },
-  skill_invoke: { verb: "Used skill", argKeys: ["skillName", "name", "slug", "skill"] },
-  skill_read_reference: { verb: "Read a skill reference", argKeys: ["path", "name"] },
-};
-
 export function ActivityDisclosure({
   parts,
   streaming,
@@ -147,34 +82,6 @@ function activityLabel(stepCount: number, toolCount: number): string {
   return `Worked through ${stepCount} step${stepCount === 1 ? "" : "s"}`;
 }
 
-function buildActivityRows(parts: MessagePart[]): ActivityRow[] {
-  const rows: ActivityRow[] = [];
-  let run: { parts: ToolPart[]; startIndex: number } | null = null;
-  const flush = () => {
-    if (run) {
-      rows.push({ kind: "tools", key: `tools:${run.startIndex}`, parts: run.parts });
-      run = null;
-    }
-  };
-  parts.forEach((part, index) => {
-    if (isToolPart(part)) {
-      run ??= { parts: [], startIndex: index };
-      run.parts.push(part);
-      return;
-    }
-    flush();
-    if (part.type === "data-project-created") {
-      rows.push({ kind: "project-created", key: `project-created:${index}`, part });
-      return;
-    }
-    if (part.type === "text") {
-      rows.push({ kind: "narration", key: `narration:${index}`, part });
-    }
-  });
-  flush();
-  return rows;
-}
-
 export function ProjectCreatedActivity({ part }: { part: ProjectCreatedPart }) {
   const [open, setOpen] = useState(false);
   return (
@@ -220,21 +127,6 @@ export function ToolGroup({ parts }: { parts: ToolPart[] }) {
   );
 }
 
-function collapseToolRuns(parts: ToolPart[]): { key: string; parts: ToolPart[] }[] {
-  const rows: { key: string; parts: ToolPart[] }[] = [];
-  let index = 0;
-  while (index < parts.length) {
-    const type = parts[index]?.type;
-    let end = index + 1;
-    while (end < parts.length && parts[end]?.type === type) {
-      end += 1;
-    }
-    rows.push({ key: `${type}:${index}`, parts: parts.slice(index, end) });
-    index = end;
-  }
-  return rows;
-}
-
 function ToolRow({ parts }: { parts: ToolPart[] }) {
   const [open, setOpen] = useState(false);
   const first = parts[0];
@@ -288,22 +180,6 @@ function ToolDetails({ parts }: { parts: ToolPart[] }) {
   );
 }
 
-function buildToolDetailSections(parts: ToolPart[]): ToolDetailSection[] {
-  const occurrences = new Map<string, number>();
-  return parts.flatMap((part) => {
-    const partIdentity = toolPartIdentity(part);
-    return toolDetailSections(part).map((section) => {
-      const baseKey = `${partIdentity}:${section.label}`;
-      const occurrence = occurrences.get(baseKey) ?? 0;
-      occurrences.set(baseKey, occurrence + 1);
-      return {
-        ...section,
-        key: occurrence === 0 ? baseKey : `${baseKey}:${occurrence}`,
-      };
-    });
-  });
-}
-
 function ToolDetailCard({
   continued,
   isCommand,
@@ -361,23 +237,6 @@ function TimelineConnector({ continued }: { continued: boolean }) {
   );
 }
 
-function toolDetailSections(part: ToolPart): Array<Omit<ToolDetailSection, "key">> {
-  const { name, input } = toolNameAndInput(part);
-  const isCommand = isCommandTool(name);
-  return [
-    {
-      label: isCommand ? "Command" : "Input",
-      isCommand,
-      scroll: false,
-      value: isCommand ? commandValue(input) : formatUnknown(summarizeToolValue(input, 0)),
-    },
-  ].filter((section) => section.value.length > 0);
-}
-
-function toolPartIdentity(part: ToolPart): string {
-  return `${part.type}:${part.data.toolCallId}`;
-}
-
 function ShellCommand({ value }: { value: string }) {
   const quoteIndex = firstQuoteIndex(value);
   if (quoteIndex < 0) {
@@ -398,129 +257,3 @@ function firstQuoteIndex(value: string): number {
   if (double < 0) return single;
   return Math.min(single, double);
 }
-
-function commandValue(input: Record<string, unknown>): string {
-  for (const key of ["command", "cmd", "code"]) {
-    const value = input[key];
-    if (typeof value === "string" && value.trim().length > 0) {
-      return value.trim();
-    }
-  }
-  return formatUnknown(summarizeToolValue(input, 0));
-}
-
-function isCommandTool(name: string): boolean {
-  return name === "runCode" || name.startsWith("shell_") || name === "start_dev_server";
-}
-
-function describeTool(part: ToolPart): { verb: string; arg: string | null } {
-  const { name, input } = toolNameAndInput(part);
-  const spec = TOOL_VERBS[name];
-  const verb = spec?.verb ?? humanizeToolName(name);
-  for (const key of spec?.argKeys ?? []) {
-    const value = input[key];
-    if (typeof value === "string" && value.trim().length > 0) {
-      return { verb, arg: shortenArg(value.trim()) };
-    }
-  }
-  return { verb, arg: null };
-}
-
-function toolNameAndInput(part: ToolPart): { input: Record<string, unknown>; name: string } {
-  return {
-    input: part.data.input ?? {},
-    name: part.data.toolName,
-  };
-}
-
-function humanizeToolName(name: string): string {
-  if (!name) {
-    return "Ran a tool";
-  }
-  const spaced = name.replace(/[_-]+/g, " ").trim();
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
-}
-
-function shortenArg(value: string): string {
-  const collapsed = value.replace(/\s+/g, " ");
-  return collapsed.length <= MAX_TOOL_ARG_LENGTH
-    ? collapsed
-    : `${collapsed.slice(0, MAX_TOOL_ARG_LENGTH - 1)}…`;
-}
-
-export function isToolPart(part: MessagePart): part is ToolPart {
-  return part.type === "data-tool";
-}
-
-function asRecord(value: unknown): Record<string, unknown> {
-  return value && typeof value === "object" ? (value as Record<string, unknown>) : {};
-}
-
-function formatUnknown(value: unknown): string {
-  if (typeof value === "string") {
-    return value;
-  }
-  if (value === null || value === undefined) {
-    return "";
-  }
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}
-
-function summarizeToolValue(value: unknown, depth: number): unknown {
-  if (typeof value === "string") {
-    return summarizeString(value);
-  }
-  if (value === null || typeof value !== "object") {
-    return value;
-  }
-  if (depth >= 3) {
-    return "[nested object]";
-  }
-  if (Array.isArray(value)) {
-    return summarizeToolArray(value, depth);
-  }
-  return summarizeToolRecord(asRecord(value), depth);
-}
-
-function summarizeToolArray(value: unknown[], depth: number): unknown[] {
-  const visible = value
-    .slice(0, MAX_TOOL_ARRAY_ITEMS)
-    .map((item) => summarizeToolValue(item, depth + 1));
-  return value.length > MAX_TOOL_ARRAY_ITEMS
-    ? [...visible, `[${value.length - MAX_TOOL_ARRAY_ITEMS} more item(s)]`]
-    : visible;
-}
-
-function summarizeToolRecord(
-  value: Record<string, unknown>,
-  depth: number,
-): Record<string, unknown> {
-  const entries = Object.entries(value);
-  const summarized: Record<string, unknown> = {};
-  for (const [key, entryValue] of entries.slice(0, MAX_TOOL_OBJECT_KEYS)) {
-    summarized[key] =
-      typeof entryValue === "string" && LARGE_TOOL_FIELDS.has(key)
-        ? summarizeLargeField(key, entryValue)
-        : summarizeToolValue(entryValue, depth + 1);
-  }
-  if (entries.length > MAX_TOOL_OBJECT_KEYS) {
-    summarized["more"] = `${entries.length - MAX_TOOL_OBJECT_KEYS} more field(s)`;
-  }
-  return summarized;
-}
-
-function summarizeString(value: string): string {
-  return value.length > MAX_TOOL_STRING_LENGTH
-    ? `${value.slice(0, MAX_TOOL_STRING_LENGTH)}... [${value.length.toLocaleString()} chars]`
-    : value;
-}
-
-function summarizeLargeField(key: string, value: string): string {
-  return value.length > MAX_TOOL_STRING_LENGTH
-    ? `[${key}: ${value.length.toLocaleString()} chars] ${value.slice(0, 160)}...`
-    : value;
-}
diff --git a/apps/web/src/components/chat/message-deliverables.tsx b/apps/web/src/components/chat/message-deliverables.tsx
index 78754227..a9fe86a0 100644
--- a/apps/web/src/components/chat/message-deliverables.tsx
+++ b/apps/web/src/components/chat/message-deliverables.tsx
@@ -16,10 +16,7 @@ import {
 } from "@/components/ui";
 import { createOutputDownloadUrl } from "@/lib/api/outputs";
 
-type GetToken = () => Promise<null | string>;
-
 export function DeliverablesBlock({ items }: { items: readonly ArtifactData[] }) {
-  const { getToken } = useAuth();
   return (
     <div
       className="cc-fade-in rounded-[14px] border border-thread-border bg-[var(--thread-code-bg)] p-3"
@@ -30,14 +27,15 @@ export function DeliverablesBlock({ items }: { items: readonly ArtifactData[] })
       </div>
       <div className="space-y-1.5">
         {items.map((item) => (
-          <DeliverableChip data={item} getToken={getToken} key={item.outputId} />
+          <DeliverableChip data={item} key={item.outputId} />
         ))}
       </div>
     </div>
   );
 }
 
-function DeliverableChip({ data, getToken }: { data: ArtifactData; getToken: GetToken }) {
+function DeliverableChip({ data }: { data: ArtifactData }) {
+  const { getToken } = useAuth();
   const [isPreparing, setIsPreparing] = useState(false);
   const Icon = deliverableIcon(data.kind, data.mimeType);
   const label = data.filename;
diff --git a/apps/web/src/components/chat/message-parts.tsx b/apps/web/src/components/chat/message-parts.tsx
index 79d4ce3e..22bceb07 100644
--- a/apps/web/src/components/chat/message-parts.tsx
+++ b/apps/web/src/components/chat/message-parts.tsx
@@ -12,10 +12,10 @@ import { toast } from "sonner";
 import { Response as MarkdownResponse } from "@/components/ai-elements/response";
 import {
   ActivityDisclosure,
-  isToolPart,
   ProjectCreatedActivity,
   ToolGroup,
 } from "@/components/chat/message-activity";
+import { isToolPart } from "@/components/chat/message-activity-model";
 import { collectDeliverables } from "@/components/chat/message-deliverable-model";
 import { DeliverablesBlock } from "@/components/chat/message-deliverables";
 import {
diff --git a/apps/web/src/components/chat/message-timeline.ts b/apps/web/src/components/chat/message-timeline.ts
index c7f05841..f6b5ce16 100644
--- a/apps/web/src/components/chat/message-timeline.ts
+++ b/apps/web/src/components/chat/message-timeline.ts
@@ -1,4 +1,4 @@
-import { isToolPart } from "@/components/chat/message-activity";
+import { isToolPart } from "@/components/chat/message-activity-model";
 import type { MessagePart, TimelineItem } from "@/components/chat/message-parts.types";
 
 interface PendingActivity {
diff --git a/apps/web/src/components/chat/prompt-composer-controller.ts b/apps/web/src/components/chat/prompt-composer-controller.ts
index b7898f1a..f4df0418 100644
--- a/apps/web/src/components/chat/prompt-composer-controller.ts
+++ b/apps/web/src/components/chat/prompt-composer-controller.ts
@@ -3,7 +3,6 @@
 import type { IntegrationName } from "@cheatcode/types";
 import type { ProjectSummary } from "@cheatcode/types/api";
 import { useAuth } from "@clerk/nextjs";
-import { useQuery } from "@tanstack/react-query";
 import {
   type FormEvent,
   type KeyboardEvent,
@@ -16,24 +15,16 @@ import {
 import type { RunStatus } from "@/components/chat/status-pill";
 import { composePromptWithComposerContext } from "@/components/composer/composer-context-chips";
 import type { ComposerMenuItem } from "@/components/composer/composer-popover";
-import { useProjectFileItems } from "@/components/composer/project-file-source";
-import { slashSkillItems } from "@/components/composer/slash-skill-source";
 import {
-  type ComposerTriggers,
-  type TriggerDetector,
-  useComposerTriggers,
-} from "@/components/composer/use-composer-triggers";
+  type ComposerMenuController,
+  useComposerMenu,
+} from "@/components/composer/use-composer-menu";
 import {
   type ProjectFileUploads,
   useProjectFileUploads,
 } from "@/components/composer/use-project-file-uploads";
-import { listUserSkills, USER_SKILLS_QUERY } from "@/lib/api/skills";
-import { detectMentionToken, detectSlashToken } from "@/lib/input/caret-tokens";
 import { useAppStore } from "@/lib/store/app-store";
-import { emitComposerEvent } from "@/lib/telemetry/user-events";
 
-const SLASH_DETECTOR: TriggerDetector = { detect: detectSlashToken, kind: "slash" };
-const MENTION_DETECTOR: TriggerDetector = { detect: detectMentionToken, kind: "mention" };
 type ComposerControlMenu = "model";
 
 export interface PromptComposerProps {
@@ -76,7 +67,7 @@ export interface PromptComposerController {
   attachments: ProjectFileUploads;
   meta: { textareaRef: RefObject<HTMLTextAreaElement | null> };
   state: PromptComposerState;
-  triggers: ComposerTriggers;
+  triggers: ComposerMenuController["triggers"];
 }
 
 export function usePromptComposerController(props: PromptComposerProps): PromptComposerController {
@@ -86,9 +77,11 @@ export function usePromptComposerController(props: PromptComposerProps): PromptC
   const isRunning = props.status === "streaming" || props.status === "submitted";
   const computerOpen = useAppStore((state) => state.previewPanelOpen);
   const projectSelection = useProjectSelection(props.project);
-  const menu = usePromptComposerMenu({
+  const menu = useComposerMenu({
     getToken,
     onChange: publisher.publishValue,
+    onSelectSkill: projectSelection.setSelectedSkill,
+    onSelectTool: projectSelection.setSelectedTool,
     projectId: projectSelection.selectedProject?.id ?? null,
     textareaRef,
     value: props.value,
@@ -127,91 +120,6 @@ function usePublishedValue(value: string, onChange: (value: string) => void) {
   return { latestValueRef, publishValue };
 }
 
-function usePromptComposerMenu({
-  getToken,
-  onChange,
-  projectId,
-  textareaRef,
-  value,
-}: {
-  getToken: () => Promise<null | string>;
-  onChange: (value: string) => void;
-  projectId: string | null;
-  textareaRef: RefObject<HTMLTextAreaElement | null>;
-  value: string;
-}) {
-  const { data: userSkills } = useQuery({
-    queryFn: ({ signal }) => listUserSkills(getToken, signal),
-    queryKey: USER_SKILLS_QUERY,
-    staleTime: 60_000,
-  });
-  const [selectedSkill, setSelectedSkill] = useState<string | null>(null);
-  const [selectedTool, setSelectedTool] = useState<IntegrationName | null>(null);
-  const triggers = useComposerTriggers({
-    onChange,
-    onInsert: (kind, item) => {
-      if (kind === "mention") selectSkillItem(item, setSelectedSkill, setSelectedTool);
-      emitComposerEvent(
-        getToken,
-        kind === "mention" ? "composer_mention_inserted" : "composer_slash_inserted",
-      );
-    },
-    sources: [SLASH_DETECTOR, MENTION_DETECTOR],
-    textareaRef,
-    value,
-  });
-  const fileItems = useProjectFileItems({
-    enabled: triggers.kind === "slash",
-    projectId,
-    query: triggers.query,
-  });
-  const menuItems =
-    triggers.kind === "slash"
-      ? fileItems
-      : skillMenuItems({
-          isPending: userSkills === undefined,
-          query: triggers.query,
-          userSkills: userSkills ?? [],
-        });
-  return {
-    menuItems,
-    selectedSkill,
-    selectedTool,
-    setSelectedSkill,
-    setSelectedTool,
-    triggers,
-  };
-}
-
-function selectSkillItem(
-  item: ComposerMenuItem,
-  setSelectedSkill: (skill: string | null) => void,
-  setSelectedTool: (tool: IntegrationName | null) => void,
-) {
-  if (item.integrationName) {
-    setSelectedSkill(null);
-    setSelectedTool(item.integrationName);
-  } else if (item.skillName) {
-    setSelectedSkill(item.skillName);
-    setSelectedTool(null);
-  }
-}
-
-function skillMenuItems({
-  isPending,
-  query,
-  userSkills,
-}: {
-  isPending: boolean;
-  query: string;
-  userSkills: Parameters<typeof slashSkillItems>[1];
-}): ComposerMenuItem[] {
-  const items = slashSkillItems(query, userSkills);
-  if (items.length > 0) return items;
-  const label = isPending ? "Loading skills…" : "No matching skills";
-  return [{ disabled: true, id: `status:${label}`, insert: "", label, visual: "status" }];
-}
-
 function useProjectSelection(project: ProjectSummary | null) {
   const [override, setOverride] = useState<{
     contextProjectId: ProjectSummary["id"] | null;
@@ -220,16 +128,31 @@ function useProjectSelection(project: ProjectSummary | null) {
   const contextProjectId = project?.id ?? null;
   const selectedProject =
     override?.contextProjectId === contextProjectId ? override.project : project;
+  const [selectedSkill, setSelectedSkill] = useState<string | null>(null);
+  const [selectedTool, setSelectedTool] = useState<IntegrationName | null>(null);
   const selectProject = (nextProject: ProjectSummary | null) =>
     setOverride({ contextProjectId, project: nextProject });
-  return { selectProject, selectedProject };
+  return {
+    selectedProject,
+    selectedSkill,
+    selectedTool,
+    selectProject,
+    setSelectedSkill: (skill: string | null) => {
+      setSelectedSkill(skill);
+      if (skill) setSelectedTool(null);
+    },
+    setSelectedTool: (tool: IntegrationName | null) => {
+      setSelectedTool(tool);
+      if (tool) setSelectedSkill(null);
+    },
+  };
 }
 
 type PromptComposerAssemblyOptions = {
   attachments: ProjectFileUploads;
   computerOpen: boolean;
   isRunning: boolean;
-  menu: ReturnType<typeof usePromptComposerMenu>;
+  menu: ComposerMenuController;
   projectSelection: ReturnType<typeof useProjectSelection>;
   props: PromptComposerProps;
   textareaRef: RefObject<HTMLTextAreaElement | null>;
@@ -246,12 +169,13 @@ function usePromptComposerAssembly(options: PromptComposerAssemblyOptions) {
     onStop: options.props.onStop,
     onSubmit: options.props.onSubmit,
     project: options.projectSelection.selectedProject,
+    selection: options.projectSelection,
     value: options.props.value,
   });
   return {
     actions: {
-      clearSkill: () => options.menu.setSelectedSkill(null),
-      clearTool: () => options.menu.setSelectedTool(null),
+      clearSkill: () => options.projectSelection.setSelectedSkill(null),
+      clearTool: () => options.projectSelection.setSelectedTool(null),
       handleKeyDown: submission.handleKeyDown,
       handleSubmit: submission.handleSubmit,
       selectProject: options.projectSelection.selectProject,
@@ -272,15 +196,15 @@ function createPromptComposerState(
   return {
     canSubmit,
     computerOpen: options.computerOpen,
-    isMenuOpen: options.menu.triggers.isActive && options.menu.menuItems.length > 0,
+    isMenuOpen: options.menu.isOpen,
     isRunning: options.isRunning,
-    menuAriaLabel: options.menu.triggers.kind === "slash" ? "Project files" : "Skills",
-    menuItems: options.menu.menuItems,
+    menuAriaLabel: options.menu.ariaLabel,
+    menuItems: options.menu.items,
     openControlMenu,
     resolvedModelId: options.props.resolvedModelId,
     selectedProject: options.projectSelection.selectedProject,
-    selectedSkill: options.menu.selectedSkill,
-    selectedTool: options.menu.selectedTool,
+    selectedSkill: options.projectSelection.selectedSkill,
+    selectedTool: options.projectSelection.selectedTool,
     value: options.props.value,
   };
 }
@@ -288,7 +212,8 @@ function createPromptComposerState(
 type ComposerSubmissionOptions = {
   canSubmit: boolean;
   isRunning: boolean;
-  menu: ReturnType<typeof usePromptComposerMenu>;
+  menu: ComposerMenuController;
+  selection: ReturnType<typeof useProjectSelection>;
   onStop: () => void;
   onSubmit: PromptComposerProps["onSubmit"];
   project: ProjectSummary | null;
@@ -302,20 +227,21 @@ function createComposerSubmission({
   onStop,
   onSubmit,
   project,
+  selection,
   value,
 }: ComposerSubmissionOptions) {
   function submitComposerValue() {
     const wasAccepted = onSubmit(
       composePromptWithComposerContext({
         prompt: value,
-        skill: menu.selectedSkill,
-        tool: menu.selectedTool,
+        skill: selection.selectedSkill,
+        tool: selection.selectedTool,
       }),
       project,
     );
     if (wasAccepted) {
-      menu.setSelectedSkill(null);
-      menu.setSelectedTool(null);
+      selection.setSelectedSkill(null);
+      selection.setSelectedTool(null);
     }
   }
   function handleSubmit(event: FormEvent<HTMLFormElement>) {
@@ -327,7 +253,7 @@ function createComposerSubmission({
     }
   }
   function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
-    if (menu.triggers.handleMenuKeyDown(event, menu.menuItems)) {
+    if (menu.handleKeyDown(event)) {
       return;
     }
     if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
diff --git a/apps/web/src/components/chat/prompt-composer-view.tsx b/apps/web/src/components/chat/prompt-composer-view.tsx
index a0d7ac67..a8665737 100644
--- a/apps/web/src/components/chat/prompt-composer-view.tsx
+++ b/apps/web/src/components/chat/prompt-composer-view.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { USER_MESSAGE_MAX_CHARACTERS } from "@cheatcode/types/api";
 import type { PromptComposerController } from "@/components/chat/prompt-composer-controller";
 import { ComposerAttachmentStatus } from "@/components/composer/composer-attachment-status";
 import { ComposerContextChips } from "@/components/composer/composer-context-chips";
-import { COMPOSER_TEXTAREA_CLASS, ComposerFrame } from "@/components/composer/composer-frame";
+import { ComposerFrame } from "@/components/composer/composer-frame";
 import { ComposerPopover } from "@/components/composer/composer-popover";
+import { ComposerTextarea } from "@/components/composer/composer-textarea";
 import { ModelMenu } from "@/components/composer/model-menu";
 import { ProjectPicker } from "@/components/composer/project-picker";
 import { ArrowUp, Paperclip, Square } from "@/components/ui";
@@ -49,7 +49,6 @@ function ComposerSuggestions({ controller }: { controller: PromptComposerControl
 }
 
 function ComposerInput({ controller }: { controller: PromptComposerController }) {
-  const selectionHandler = controller.triggers.onTextareaSelect;
   return (
     <div className="flex min-h-[80px] flex-col gap-1 px-0">
       <ComposerContextChips
@@ -61,12 +60,8 @@ function ComposerInput({ controller }: { controller: PromptComposerController })
       />
       <ComposerAttachmentStatus className="px-2 pt-3" status={controller.attachments.status} />
       <div className="flex items-start gap-2">
-        <label className="sr-only" htmlFor="prompt">
-          Message Cheatcode
-        </label>
-        <textarea
+        <ComposerTextarea
           className={cn(
-            COMPOSER_TEXTAREA_CLASS,
             controller.state.selectedSkill ||
               controller.state.selectedTool ||
               controller.attachments.status
@@ -74,15 +69,11 @@ function ComposerInput({ controller }: { controller: PromptComposerController })
               : "pt-4",
           )}
           id="prompt"
-          maxLength={USER_MESSAGE_MAX_CHARACTERS}
-          onChange={controller.triggers.onTextareaChange}
-          onClick={selectionHandler}
+          label="Message Cheatcode"
           onKeyDown={controller.actions.handleKeyDown}
-          onKeyUp={selectionHandler}
-          onSelect={selectionHandler}
           placeholder="Ask anything, @ for skills, / for files"
-          ref={controller.meta.textareaRef}
-          rows={1}
+          textareaRef={controller.meta.textareaRef}
+          triggers={controller.triggers}
           value={controller.state.value}
         />
       </div>
diff --git a/apps/web/src/components/chat/use-chat-panel-controller.ts b/apps/web/src/components/chat/use-chat-panel-controller.ts
index b3e1542d..ac50c5fc 100644
--- a/apps/web/src/components/chat/use-chat-panel-controller.ts
+++ b/apps/web/src/components/chat/use-chat-panel-controller.ts
@@ -30,6 +30,7 @@ import {
 } from "@/components/chat/use-sandbox-surface-sync";
 import { agentModelRequestValue } from "@/lib/agent-models";
 import { cancelRun, getThread } from "@/lib/api/project-thread";
+import { invalidateChatLists, projectKeys, threadKeys } from "@/lib/api/query-keys";
 import { USER_SKILLS_QUERY } from "@/lib/api/skills";
 import { useAppStore } from "@/lib/store/app-store";
 import { rememberStreamSeq, streamResumeCursor } from "@/lib/stream/stream-seq";
@@ -270,8 +271,8 @@ function useCancelRun(threadId: string, getToken: () => Promise<null | string>)
       toast.error(error instanceof Error ? error.message : "Run cancellation failed");
     },
     onSettled: () => {
-      void queryClient.invalidateQueries({ queryKey: ["threads", threadId] });
-      void queryClient.invalidateQueries({ queryKey: ["threads", threadId, "messages"] });
+      void queryClient.invalidateQueries({ queryKey: threadKeys.detail(threadId) });
+      void queryClient.invalidateQueries({ queryKey: threadKeys.messages(threadId) });
     },
   });
 }
@@ -376,20 +377,15 @@ function handleProjectCreated(
   projectId: string,
   input: Parameters<typeof useChatSession>[0],
 ): void {
-  input.queryClient.setQueryData<Thread>(["threads", input.threadId], (thread) =>
+  input.queryClient.setQueryData<Thread>(threadKeys.detail(input.threadId), (thread) =>
     thread ? { ...thread, projectId } : thread,
   );
   input.sandboxActions.setActivePreviewTab("files");
   input.sandboxActions.setPreviewPanelOpen(true);
-  for (const queryKey of [
-    ["threads", input.threadId],
-    ["projects", projectId],
-    ["sidebar-projects"],
-    ["sidebar-project-threads"],
-    ["sidebar-chats"],
-  ]) {
+  for (const queryKey of [threadKeys.detail(input.threadId), projectKeys.detail(projectId)]) {
     void input.queryClient.invalidateQueries({ queryKey });
   }
+  void invalidateChatLists(input.queryClient);
 }
 
 function handleStreamFinish(isError: boolean, input: Parameters<typeof useChatSession>[0]): void {
@@ -397,15 +393,10 @@ function handleStreamFinish(isError: boolean, input: Parameters<typeof useChatSe
     input.pendingSubmissionRef.current = null;
   }
   input.hasSubmittedRef.current = false;
-  for (const queryKey of [
-    ["threads", input.threadId],
-    ["threads", input.threadId, "messages"],
-    ["sidebar-chats"],
-    ["sidebar-projects"],
-    ["sidebar-project-threads"],
-  ]) {
+  for (const queryKey of [threadKeys.detail(input.threadId), threadKeys.messages(input.threadId)]) {
     void input.queryClient.invalidateQueries({ queryKey });
   }
+  void invalidateChatLists(input.queryClient);
 }
 
 function useOlderMessageLoader(
diff --git a/apps/web/src/components/composer/add-menu-controller.ts b/apps/web/src/components/composer/add-menu-controller.ts
index 5a49381a..cf2f02f3 100644
--- a/apps/web/src/components/composer/add-menu-controller.ts
+++ b/apps/web/src/components/composer/add-menu-controller.ts
@@ -1,6 +1,7 @@
 "use client";
 
-import { type RefObject, useCallback, useEffect, useRef, useState } from "react";
+import { type RefObject, useCallback, useRef, useState } from "react";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 
 interface AddMenuController {
   actions: {
@@ -19,40 +20,10 @@ export function useAddMenuController(): AddMenuController {
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const [isOpen, setIsOpen] = useState(false);
   const close = useCallback(() => setIsOpen(false), []);
-  useDismissableMenu({ close, isOpen, menuRef, triggerRef });
+  useDismissable({ isOpen, onDismiss: close, ref: menuRef, triggerRef });
   return {
     actions: { close, toggle: () => setIsOpen((current) => !current) },
     meta: { menuRef, triggerRef },
     state: { isOpen },
   };
 }
-
-function useDismissableMenu({
-  close,
-  isOpen,
-  menuRef,
-  triggerRef,
-}: {
-  close: () => void;
-  isOpen: boolean;
-  menuRef: RefObject<HTMLDivElement | null>;
-  triggerRef: RefObject<HTMLButtonElement | null>;
-}) {
-  useEffect(() => {
-    if (!isOpen) return;
-    const closeOnOutsidePointer = (event: PointerEvent) => {
-      if (!menuRef.current?.contains(event.target as Node)) close();
-    };
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      close();
-      triggerRef.current?.focus();
-    };
-    document.addEventListener("pointerdown", closeOnOutsidePointer);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutsidePointer);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [close, isOpen, menuRef, triggerRef]);
-}
diff --git a/apps/web/src/components/composer/composer-textarea.tsx b/apps/web/src/components/composer/composer-textarea.tsx
new file mode 100644
index 00000000..b352e02c
--- /dev/null
+++ b/apps/web/src/components/composer/composer-textarea.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { USER_MESSAGE_MAX_CHARACTERS } from "@cheatcode/types/api";
+import type { KeyboardEvent, RefObject } from "react";
+import { COMPOSER_TEXTAREA_CLASS } from "@/components/composer/composer-frame";
+import type { ComposerTriggers } from "@/components/composer/use-composer-triggers";
+import { cn } from "@/lib/ui/cn";
+
+interface ComposerTextareaProps {
+  className?: string | undefined;
+  id: string;
+  label: string;
+  onKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+  placeholder: string;
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  triggers: ComposerTriggers;
+  value: string;
+}
+
+export function ComposerTextarea({
+  className,
+  id,
+  label,
+  onKeyDown,
+  placeholder,
+  textareaRef,
+  triggers,
+  value,
+}: ComposerTextareaProps) {
+  return (
+    <>
+      <label className="sr-only" htmlFor={id}>
+        {label}
+      </label>
+      <textarea
+        className={cn(COMPOSER_TEXTAREA_CLASS, className)}
+        id={id}
+        maxLength={USER_MESSAGE_MAX_CHARACTERS}
+        onChange={triggers.onTextareaChange}
+        onClick={triggers.onTextareaSelect}
+        onKeyDown={onKeyDown}
+        onKeyUp={triggers.onTextareaSelect}
+        onSelect={triggers.onTextareaSelect}
+        placeholder={placeholder}
+        ref={textareaRef}
+        rows={1}
+        value={value}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/components/composer/model-menu-controller.ts b/apps/web/src/components/composer/model-menu-controller.ts
index 6d40bbfa..fc207d75 100644
--- a/apps/web/src/components/composer/model-menu-controller.ts
+++ b/apps/web/src/components/composer/model-menu-controller.ts
@@ -5,6 +5,7 @@ import { type AgentModelId, agentModelOption } from "@/components/composer/model
 import type { AgentModelOption } from "@/lib/agent-models";
 import { useProfileQuery } from "@/lib/hooks/use-profile";
 import { useAppStore } from "@/lib/store/app-store";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 
 export interface ModelMenuController {
   actions: {
@@ -49,7 +50,7 @@ export function useModelMenuController({
     agentModelId === "auto" && resolvedOption && resolvedOption.id !== "auto"
       ? resolvedOption
       : selectedOption;
-  useDismissModelMenu({ isOpen, menuRef, setIsOpen });
+  useDismissable({ isOpen, onDismiss: () => setIsOpen(false), ref: menuRef });
   return {
     actions: {
       close: () => setIsOpen(false),
@@ -76,29 +77,3 @@ function useMenuPresence(isOpen: boolean): boolean {
   }, [isOpen]);
   return shouldRender;
 }
-
-function useDismissModelMenu({
-  isOpen,
-  menuRef,
-  setIsOpen,
-}: {
-  isOpen: boolean;
-  menuRef: RefObject<HTMLDivElement | null>;
-  setIsOpen: (isOpen: boolean) => void;
-}) {
-  useEffect(() => {
-    if (!isOpen) return;
-    const handlePointerDown = (event: PointerEvent) => {
-      if (!menuRef.current?.contains(event.target as Node)) setIsOpen(false);
-    };
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setIsOpen(false);
-    };
-    document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, menuRef, setIsOpen]);
-}
diff --git a/apps/web/src/components/composer/project-picker-controller.ts b/apps/web/src/components/composer/project-picker-controller.ts
index 422a93f6..13d38b7d 100644
--- a/apps/web/src/components/composer/project-picker-controller.ts
+++ b/apps/web/src/components/composer/project-picker-controller.ts
@@ -16,6 +16,8 @@ import {
   listProjectsPage,
   updateProject,
 } from "@/lib/api/project-thread";
+import { invalidateChatLists, sidebarKeys } from "@/lib/api/query-keys";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 
 export type ProjectPickerVariant = "home" | "thread";
 
@@ -82,7 +84,7 @@ export function useProjectPickerController({
       page.has_more ? (page.next_cursor ?? undefined) : undefined,
     initialPageParam: null as string | null,
     queryFn: ({ pageParam, signal }) => listProjectsPage(getToken, pageParam, 25, signal),
-    queryKey: ["sidebar-projects", "picker"],
+    queryKey: sidebarKeys.projectPicker,
     retry: false,
     staleTime: 30_000,
   });
@@ -208,41 +210,16 @@ function usePickerFocus(isOpen: boolean, searchInputRef: RefObject<HTMLInputElem
 
 function usePickerDismiss(local: ProjectPickerLocalState) {
   const { isOpen, menuRef, setIsOpen, setOpenProjectMenuId, triggerRef } = local;
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-    function closePicker(shouldRestoreFocus: boolean) {
+  useDismissable({
+    closeOnFocusOut: true,
+    isOpen,
+    onDismiss: () => {
       setIsOpen(false);
       setOpenProjectMenuId(null);
-      if (shouldRestoreFocus) {
-        triggerRef.current?.focus();
-      }
-    }
-    function handlePointerDown(event: PointerEvent) {
-      if (!menuRef.current?.contains(event.target as Node)) {
-        closePicker(false);
-      }
-    }
-    function handleFocusIn(event: FocusEvent) {
-      if (!menuRef.current?.contains(event.target as Node)) {
-        closePicker(false);
-      }
-    }
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        closePicker(true);
-      }
-    }
-    document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("focusin", handleFocusIn);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("focusin", handleFocusIn);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, menuRef, setIsOpen, setOpenProjectMenuId, triggerRef]);
+    },
+    ref: menuRef,
+    triggerRef,
+  });
 }
 
 type ProjectPickerDependencies = {
@@ -372,9 +349,5 @@ function filterProjects(projects: readonly ProjectSummary[], search: string): Pr
 }
 
 async function invalidateProjectQueries(queryClient: QueryClient) {
-  await Promise.all([
-    queryClient.invalidateQueries({ queryKey: ["sidebar-projects"] }),
-    queryClient.invalidateQueries({ queryKey: ["sidebar-project-threads"] }),
-    queryClient.invalidateQueries({ queryKey: ["sidebar-chats"] }),
-  ]);
+  await invalidateChatLists(queryClient);
 }
diff --git a/apps/web/src/components/composer/project-picker-dialogs.tsx b/apps/web/src/components/composer/project-picker-dialogs.tsx
new file mode 100644
index 00000000..f617a7be
--- /dev/null
+++ b/apps/web/src/components/composer/project-picker-dialogs.tsx
@@ -0,0 +1,173 @@
+"use client";
+
+import type { KeyboardEvent } from "react";
+import { useEffect, useState } from "react";
+import type { ProjectPickerController } from "@/components/composer/project-picker-controller";
+import { ConfirmDialog, ModalShell, X } from "@/components/ui";
+
+export function ProjectPickerDialogs({ controller }: { controller: ProjectPickerController }) {
+  return (
+    <>
+      <ProjectRenameDialog controller={controller} />
+      <ProjectDeleteDialog controller={controller} />
+    </>
+  );
+}
+
+function ProjectRenameDialog({ controller }: { controller: ProjectPickerController }) {
+  const [draft, setDraft] = useState("");
+  const project = controller.state.pendingRename;
+  useEffect(() => {
+    if (project) {
+      setDraft(project.name);
+    }
+  }, [project]);
+  const trimmed = draft.trim();
+  const canSubmit = project !== null && trimmed.length > 0 && trimmed !== project.name;
+  const submit = () => {
+    if (canSubmit && !controller.state.renameBusy) {
+      controller.actions.submitRename(trimmed);
+    }
+  };
+  return (
+    <ModalShell
+      className="relative max-w-md rounded-[10px]"
+      labelledBy="composer-rename-project-dialog-title"
+      onClose={controller.actions.cancelRename}
+      open={project !== null}
+    >
+      <RenameDialogContent
+        busy={controller.state.renameBusy}
+        canSubmit={canSubmit}
+        draft={draft}
+        onCancel={controller.actions.cancelRename}
+        onChange={setDraft}
+        onSubmit={submit}
+      />
+    </ModalShell>
+  );
+}
+
+function RenameDialogContent({
+  busy,
+  canSubmit,
+  draft,
+  onCancel,
+  onChange,
+  onSubmit,
+}: {
+  busy: boolean;
+  canSubmit: boolean;
+  draft: string;
+  onCancel: () => void;
+  onChange: (draft: string) => void;
+  onSubmit: () => void;
+}) {
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onSubmit();
+    }
+  };
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <h2
+        className="font-semibold text-foreground text-lg leading-none"
+        id="composer-rename-project-dialog-title"
+      >
+        Rename project
+      </h2>
+      <button
+        aria-label="Close"
+        className="absolute top-3 right-3 flex size-6 items-center justify-center rounded-sm text-placeholder opacity-70 transition-opacity hover:opacity-100"
+        disabled={busy}
+        onClick={onCancel}
+        type="button"
+      >
+        <X aria-hidden="true" className="size-4" />
+      </button>
+      <RenameProjectInput busy={busy} draft={draft} onChange={onChange} onKeyDown={handleKeyDown} />
+      <RenameDialogActions
+        busy={busy}
+        canSubmit={canSubmit}
+        onCancel={onCancel}
+        onSubmit={onSubmit}
+      />
+    </div>
+  );
+}
+
+function RenameProjectInput({
+  busy,
+  draft,
+  onChange,
+  onKeyDown,
+}: {
+  busy: boolean;
+  draft: string;
+  onChange: (draft: string) => void;
+  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}) {
+  return (
+    <input
+      aria-label="Project name"
+      className="h-8 w-full rounded-full border border-border bg-transparent px-3 font-medium text-foreground text-sm leading-5 outline-none transition-[border-color,box-shadow]"
+      disabled={busy}
+      maxLength={120}
+      onChange={(event) => onChange(event.target.value)}
+      onKeyDown={onKeyDown}
+      value={draft}
+    />
+  );
+}
+
+function RenameDialogActions({
+  busy,
+  canSubmit,
+  onCancel,
+  onSubmit,
+}: {
+  busy: boolean;
+  canSubmit: boolean;
+  onCancel: () => void;
+  onSubmit: () => void;
+}) {
+  return (
+    <div className="flex justify-end gap-2">
+      <button
+        className="h-8 rounded-full px-4 font-medium text-foreground text-sm transition-colors hover:bg-secondary active:scale-[0.99] disabled:opacity-50"
+        disabled={busy}
+        onClick={onCancel}
+        type="button"
+      >
+        Cancel
+      </button>
+      <button
+        className="inline-flex h-8 items-center gap-2 rounded-full bg-foreground px-4 font-medium text-background text-sm shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_1px_3px_rgba(0,0,0,0.2)] transition-colors hover:bg-foreground/90 active:scale-[0.99] disabled:opacity-50"
+        disabled={busy || !canSubmit}
+        onClick={onSubmit}
+        type="button"
+      >
+        {busy ? "Renaming..." : "Rename"}
+      </button>
+    </div>
+  );
+}
+
+function ProjectDeleteDialog({ controller }: { controller: ProjectPickerController }) {
+  const project = controller.state.pendingDelete;
+  return (
+    <ConfirmDialog
+      busy={controller.state.deleteBusy}
+      cancelLabel="Cancel"
+      confirmLabel="Delete project"
+      description="This removes the project, its workspace folder, and all generated files. Your cloud computer and other projects stay intact."
+      destructive
+      id="composer-delete-project-dialog"
+      onCancel={controller.actions.cancelDelete}
+      onConfirm={controller.actions.confirmDelete}
+      open={project !== null}
+      title={project ? `Delete ${project.name}?` : "Delete project?"}
+    />
+  );
+}
diff --git a/apps/web/src/components/composer/project-picker-parts.tsx b/apps/web/src/components/composer/project-picker-parts.tsx
index 022be3f5..d41d5263 100644
--- a/apps/web/src/components/composer/project-picker-parts.tsx
+++ b/apps/web/src/components/composer/project-picker-parts.tsx
@@ -1,14 +1,7 @@
 "use client";
 
 import type { ProjectSummary } from "@cheatcode/types/api";
-import {
-  type FocusEvent,
-  type KeyboardEvent,
-  type RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { type KeyboardEvent, type RefObject, useEffect, useRef } from "react";
 import type {
   ProjectPickerController,
   ProjectPickerVariant,
@@ -19,10 +12,17 @@ import {
   ProjectMoreIcon,
   ProjectTrashIcon,
 } from "@/components/composer/project-picker-icons";
-import { ConfirmDialog, ModalShell, Plus, Search, X } from "@/components/ui";
+import { Plus, Search } from "@/components/ui";
 import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
 import { CheatcodeTooltip } from "@/components/ui/cheatcode-tooltip";
 import { cn } from "@/lib/ui/cn";
+import {
+  handleRovingMenuFocus,
+  moveRovingMenuFocus,
+  resetRovingMenuTabStop,
+  rovingMenuItems,
+  setRovingMenuTabStop,
+} from "@/lib/ui/roving-menu-focus";
 
 export function ProjectPickerTrigger({
   compact,
@@ -75,7 +75,7 @@ export function ProjectPickerMenu({ controller }: { controller: ProjectPickerCon
       <div
         className="flex w-[min(250px,calc(100vw-44px))] flex-col gap-1"
         id={controller.meta.optionsMenuId}
-        onFocus={(event) => handleMenuFocus(event, MAIN_MENU_ITEM_SELECTOR)}
+        onFocus={(event) => handleRovingMenuFocus(event, MAIN_MENU_ITEM_SELECTOR)}
         onKeyDown={(event) => handleMainMenuKeyDown(event, controller)}
         ref={controller.meta.optionsMenuRef}
         role="none"
@@ -107,7 +107,9 @@ function ProjectSearch({ controller }: { controller: ProjectPickerController })
         aria-label="Search projects"
         className="h-8 min-w-0 flex-1 bg-transparent text-foreground text-xs outline-none placeholder:text-muted-foreground"
         onChange={(event) => controller.actions.updateSearch(event.target.value)}
-        onFocus={() => resetMenuTabStop(controller.meta.optionsMenuRef)}
+        onFocus={() =>
+          resetRovingMenuTabStop(controller.meta.optionsMenuRef, MAIN_MENU_ITEM_SELECTOR)
+        }
         onKeyDown={(event) => handleSearchKeyDown(event, controller.meta.optionsMenuRef)}
         placeholder="Search projects"
         ref={controller.meta.searchInputRef}
@@ -325,7 +327,7 @@ function ProjectRowActions({
           aria-label={`${project.name} actions`}
           className="flex flex-col gap-0.5 p-0.5"
           id={projectActionMenuId(project.id)}
-          onFocus={(event) => handleMenuFocus(event, SUBMENU_ITEM_SELECTOR)}
+          onFocus={(event) => handleRovingMenuFocus(event, SUBMENU_ITEM_SELECTOR)}
           onKeyDown={(event) => handleSubmenuKeyDown(event, controller, menuButtonRef)}
           role="menu"
         >
@@ -413,10 +415,10 @@ function handleSearchKeyDown(
   if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
     return;
   }
-  const items = menuItems(optionsMenuRef.current, MAIN_MENU_ITEM_SELECTOR);
+  const items = rovingMenuItems(optionsMenuRef.current, MAIN_MENU_ITEM_SELECTOR);
   const index = event.key === "ArrowDown" ? 0 : items.length - 1;
   event.preventDefault();
-  setMenuTabStop(items, index, true);
+  setRovingMenuTabStop(items, index, true);
 }
 
 function handleMainMenuKeyDown(
@@ -432,7 +434,7 @@ function handleMainMenuKeyDown(
     target.click();
     return;
   }
-  if (moveMenuFocus(event, menuItems(event.currentTarget, MAIN_MENU_ITEM_SELECTOR))) {
+  if (moveRovingMenuFocus(event, MAIN_MENU_ITEM_SELECTOR)) {
     controller.actions.setOpenProjectMenuId(null);
   }
 }
@@ -449,235 +451,9 @@ function handleSubmenuKeyDown(
     menuButtonRef.current?.focus();
     return;
   }
-  moveMenuFocus(event, menuItems(event.currentTarget, SUBMENU_ITEM_SELECTOR));
-}
-
-function moveMenuFocus(
-  event: KeyboardEvent<HTMLElement>,
-  items: readonly HTMLButtonElement[],
-): boolean {
-  if (items.length === 0 || !["ArrowDown", "ArrowUp", "End", "Home"].includes(event.key)) {
-    return false;
-  }
-  const currentIndex = items.indexOf(event.target as HTMLButtonElement);
-  const lastIndex = items.length - 1;
-  const nextIndex = menuMoveIndex(event.key, currentIndex, lastIndex);
-  event.preventDefault();
-  event.stopPropagation();
-  setMenuTabStop(items, nextIndex, true);
-  return true;
-}
-
-function menuMoveIndex(key: string, currentIndex: number, lastIndex: number): number {
-  if (key === "Home" || (key === "ArrowDown" && currentIndex === lastIndex)) {
-    return 0;
-  }
-  if (key === "End" || (key === "ArrowUp" && currentIndex <= 0)) {
-    return lastIndex;
-  }
-  return key === "ArrowDown" ? currentIndex + 1 : currentIndex - 1;
-}
-
-function menuItems(container: HTMLElement | null, selector: string): HTMLButtonElement[] {
-  return container ? Array.from(container.querySelectorAll<HTMLButtonElement>(selector)) : [];
-}
-
-function handleMenuFocus(event: FocusEvent<HTMLDivElement>, selector: string) {
-  const target = event.target;
-  if (!(target instanceof HTMLButtonElement)) {
-    return;
-  }
-  const items = menuItems(event.currentTarget, selector);
-  const focusedIndex = items.indexOf(target);
-  if (focusedIndex >= 0) {
-    setMenuTabStop(items, focusedIndex, false);
-  }
-}
-
-function resetMenuTabStop(optionsMenuRef: RefObject<HTMLDivElement | null>) {
-  setMenuTabStop(menuItems(optionsMenuRef.current, MAIN_MENU_ITEM_SELECTOR), 0, false);
-}
-
-function setMenuTabStop(
-  items: readonly HTMLButtonElement[],
-  activeIndex: number,
-  shouldFocus: boolean,
-) {
-  for (const [index, item] of items.entries()) {
-    item.tabIndex = index === activeIndex ? 0 : -1;
-  }
-  if (shouldFocus) {
-    items[activeIndex]?.focus();
-  }
+  moveRovingMenuFocus(event, SUBMENU_ITEM_SELECTOR);
 }
 
 function projectActionMenuId(projectId: string): string {
   return `project-picker-actions-${projectId}`;
 }
-
-export function ProjectPickerDialogs({ controller }: { controller: ProjectPickerController }) {
-  return (
-    <>
-      <ProjectRenameDialog controller={controller} />
-      <ProjectDeleteDialog controller={controller} />
-    </>
-  );
-}
-
-function ProjectRenameDialog({ controller }: { controller: ProjectPickerController }) {
-  const [draft, setDraft] = useState("");
-  const project = controller.state.pendingRename;
-  useEffect(() => {
-    if (project) {
-      setDraft(project.name);
-    }
-  }, [project]);
-  const trimmed = draft.trim();
-  const canSubmit = project !== null && trimmed.length > 0 && trimmed !== project.name;
-  const submit = () => {
-    if (canSubmit && !controller.state.renameBusy) {
-      controller.actions.submitRename(trimmed);
-    }
-  };
-  return (
-    <ModalShell
-      className="relative max-w-md rounded-[10px]"
-      labelledBy="composer-rename-project-dialog-title"
-      onClose={controller.actions.cancelRename}
-      open={project !== null}
-    >
-      <RenameDialogContent
-        busy={controller.state.renameBusy}
-        canSubmit={canSubmit}
-        draft={draft}
-        onCancel={controller.actions.cancelRename}
-        onChange={setDraft}
-        onSubmit={submit}
-      />
-    </ModalShell>
-  );
-}
-
-function RenameDialogContent({
-  busy,
-  canSubmit,
-  draft,
-  onCancel,
-  onChange,
-  onSubmit,
-}: {
-  busy: boolean;
-  canSubmit: boolean;
-  draft: string;
-  onCancel: () => void;
-  onChange: (draft: string) => void;
-  onSubmit: () => void;
-}) {
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      onSubmit();
-    }
-  };
-  return (
-    <div className="flex flex-col gap-4 p-6">
-      <h2
-        className="font-semibold text-foreground text-lg leading-none"
-        id="composer-rename-project-dialog-title"
-      >
-        Rename project
-      </h2>
-      <button
-        aria-label="Close"
-        className="absolute top-3 right-3 flex size-6 items-center justify-center rounded-sm text-placeholder opacity-70 transition-opacity hover:opacity-100"
-        disabled={busy}
-        onClick={onCancel}
-        type="button"
-      >
-        <X aria-hidden="true" className="size-4" />
-      </button>
-      <RenameProjectInput busy={busy} draft={draft} onChange={onChange} onKeyDown={handleKeyDown} />
-      <RenameDialogActions
-        busy={busy}
-        canSubmit={canSubmit}
-        onCancel={onCancel}
-        onSubmit={onSubmit}
-      />
-    </div>
-  );
-}
-
-function RenameProjectInput({
-  busy,
-  draft,
-  onChange,
-  onKeyDown,
-}: {
-  busy: boolean;
-  draft: string;
-  onChange: (draft: string) => void;
-  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-}) {
-  return (
-    <input
-      aria-label="Project name"
-      className="h-8 w-full rounded-full border border-border bg-transparent px-3 font-medium text-foreground text-sm leading-5 outline-none transition-[border-color,box-shadow]"
-      disabled={busy}
-      maxLength={120}
-      onChange={(event) => onChange(event.target.value)}
-      onKeyDown={onKeyDown}
-      value={draft}
-    />
-  );
-}
-
-function RenameDialogActions({
-  busy,
-  canSubmit,
-  onCancel,
-  onSubmit,
-}: {
-  busy: boolean;
-  canSubmit: boolean;
-  onCancel: () => void;
-  onSubmit: () => void;
-}) {
-  return (
-    <div className="flex justify-end gap-2">
-      <button
-        className="h-8 rounded-full px-4 font-medium text-foreground text-sm transition-colors hover:bg-secondary active:scale-[0.99] disabled:opacity-50"
-        disabled={busy}
-        onClick={onCancel}
-        type="button"
-      >
-        Cancel
-      </button>
-      <button
-        className="inline-flex h-8 items-center gap-2 rounded-full bg-foreground px-4 font-medium text-background text-sm shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_1px_3px_rgba(0,0,0,0.2)] transition-colors hover:bg-foreground/90 active:scale-[0.99] disabled:opacity-50"
-        disabled={busy || !canSubmit}
-        onClick={onSubmit}
-        type="button"
-      >
-        {busy ? "Renaming..." : "Rename"}
-      </button>
-    </div>
-  );
-}
-
-function ProjectDeleteDialog({ controller }: { controller: ProjectPickerController }) {
-  const project = controller.state.pendingDelete;
-  return (
-    <ConfirmDialog
-      busy={controller.state.deleteBusy}
-      cancelLabel="Cancel"
-      confirmLabel="Delete project"
-      description="This removes the project, its workspace folder, and all generated files. Your cloud computer and other projects stay intact."
-      destructive
-      id="composer-delete-project-dialog"
-      onCancel={controller.actions.cancelDelete}
-      onConfirm={controller.actions.confirmDelete}
-      open={project !== null}
-      title={project ? `Delete ${project.name}?` : "Delete project?"}
-    />
-  );
-}
diff --git a/apps/web/src/components/composer/project-picker.tsx b/apps/web/src/components/composer/project-picker.tsx
index 6bbccc24..97c2c3ee 100644
--- a/apps/web/src/components/composer/project-picker.tsx
+++ b/apps/web/src/components/composer/project-picker.tsx
@@ -5,8 +5,8 @@ import {
   type ProjectPickerVariant,
   useProjectPickerController,
 } from "@/components/composer/project-picker-controller";
+import { ProjectPickerDialogs } from "@/components/composer/project-picker-dialogs";
 import {
-  ProjectPickerDialogs,
   ProjectPickerMenu,
   ProjectPickerTrigger,
 } from "@/components/composer/project-picker-parts";
diff --git a/apps/web/src/components/composer/use-composer-menu.ts b/apps/web/src/components/composer/use-composer-menu.ts
new file mode 100644
index 00000000..764f83ee
--- /dev/null
+++ b/apps/web/src/components/composer/use-composer-menu.ts
@@ -0,0 +1,103 @@
+"use client";
+
+import type { IntegrationName } from "@cheatcode/types";
+import { useQuery } from "@tanstack/react-query";
+import type { KeyboardEvent, RefObject } from "react";
+import type { ComposerMenuItem } from "@/components/composer/composer-popover";
+import { useProjectFileItems } from "@/components/composer/project-file-source";
+import { slashSkillItems } from "@/components/composer/slash-skill-source";
+import {
+  type ComposerTriggers,
+  type TriggerDetector,
+  useComposerTriggers,
+} from "@/components/composer/use-composer-triggers";
+import { listUserSkills, USER_SKILLS_QUERY } from "@/lib/api/skills";
+import { detectMentionToken, detectSlashToken } from "@/lib/input/caret-tokens";
+import { emitComposerEvent } from "@/lib/telemetry/user-events";
+
+const COMPOSER_SOURCES: readonly TriggerDetector[] = [
+  { detect: detectSlashToken, kind: "slash" },
+  { detect: detectMentionToken, kind: "mention" },
+];
+
+interface UseComposerMenuOptions {
+  getToken: () => Promise<null | string>;
+  onChange: (value: string) => void;
+  onSelectSkill: (skill: string) => void;
+  onSelectTool: (tool: IntegrationName) => void;
+  projectId: string | null;
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  value: string;
+}
+
+export interface ComposerMenuController {
+  ariaLabel: string;
+  handleKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => boolean;
+  isOpen: boolean;
+  items: readonly ComposerMenuItem[];
+  triggers: ComposerTriggers;
+}
+
+export function useComposerMenu(options: UseComposerMenuOptions): ComposerMenuController {
+  const userSkills = useQuery({
+    queryFn: ({ signal }) => listUserSkills(options.getToken, signal),
+    queryKey: USER_SKILLS_QUERY,
+    staleTime: 60_000,
+  });
+  const triggers = useComposerTriggers({
+    onChange: options.onChange,
+    onInsert: (kind, item) => {
+      if (kind === "mention") {
+        selectComposerItem(item, options.onSelectSkill, options.onSelectTool);
+      }
+      emitComposerEvent(
+        options.getToken,
+        kind === "mention" ? "composer_mention_inserted" : "composer_slash_inserted",
+      );
+    },
+    sources: COMPOSER_SOURCES,
+    textareaRef: options.textareaRef,
+    value: options.value,
+  });
+  const fileItems = useProjectFileItems({
+    enabled: triggers.kind === "slash",
+    projectId: options.projectId,
+    query: triggers.query,
+  });
+  const items =
+    triggers.kind === "slash"
+      ? fileItems
+      : skillMenuItems(triggers.query, userSkills.data ?? [], userSkills.isPending);
+  return {
+    ariaLabel: triggers.kind === "slash" ? "Project files" : "Skills",
+    handleKeyDown: (event) => triggers.handleMenuKeyDown(event, items),
+    isOpen: triggers.isActive && items.length > 0,
+    items,
+    triggers,
+  };
+}
+
+function selectComposerItem(
+  item: ComposerMenuItem,
+  onSelectSkill: (skill: string) => void,
+  onSelectTool: (tool: IntegrationName) => void,
+): void {
+  if (item.integrationName) {
+    onSelectTool(item.integrationName);
+  } else if (item.skillName) {
+    onSelectSkill(item.skillName);
+  }
+}
+
+function skillMenuItems(
+  query: string,
+  userSkills: Parameters<typeof slashSkillItems>[1],
+  isPending: boolean,
+): ComposerMenuItem[] {
+  const items = slashSkillItems(query, userSkills);
+  if (items.length > 0) {
+    return items;
+  }
+  const label = isPending ? "Loading skills…" : "No matching skills";
+  return [{ disabled: true, id: `status:${label}`, insert: "", label, visual: "status" }];
+}
diff --git a/apps/web/src/components/composer/use-project-file-uploads.ts b/apps/web/src/components/composer/use-project-file-uploads.ts
index 9e115262..1afd87cb 100644
--- a/apps/web/src/components/composer/use-project-file-uploads.ts
+++ b/apps/web/src/components/composer/use-project-file-uploads.ts
@@ -6,6 +6,7 @@ import { type ChangeEvent, type RefObject, useCallback, useEffect, useRef, useSt
 import type { ComposerAttachmentStatusState } from "@/components/composer/composer-attachment-status";
 import { projectFilesQueryKey, uploadProjectFile } from "@/lib/api/project-files";
 import { createProject } from "@/lib/api/project-thread";
+import { sidebarKeys } from "@/lib/api/query-keys";
 import {
   appendProjectFileReference,
   PROJECT_FILE_MAX_BATCH,
@@ -65,7 +66,7 @@ export function useProjectFileUploads(options: ProjectFileUploadOptions): Projec
         return;
       }
       if (!options.project) {
-        await queryClient.invalidateQueries({ queryKey: ["sidebar-projects"] });
+        await queryClient.invalidateQueries({ queryKey: sidebarKeys.projects });
       }
       const result = await uploadSequentially(
         options,
diff --git a/apps/web/src/components/home/home-composer-plan-banner.tsx b/apps/web/src/components/home/home-composer-plan-banner.tsx
index fbba4786..4c93d29a 100644
--- a/apps/web/src/components/home/home-composer-plan-banner.tsx
+++ b/apps/web/src/components/home/home-composer-plan-banner.tsx
@@ -1,10 +1,12 @@
 "use client";
 
+import { useAuth } from "@clerk/nextjs";
 import { useState } from "react";
 import { UpgradeDialog } from "@/components/billing/upgrade-dialog";
 import { useSandboxUsageQuery } from "@/lib/hooks/use-billing";
 
-export function SandboxUsageBanner({ getToken }: { getToken: () => Promise<null | string> }) {
+export function SandboxUsageBanner() {
+  const { getToken } = useAuth();
   const usageQuery = useSandboxUsageQuery(getToken);
   const [pickerOpen, setPickerOpen] = useState(false);
 
@@ -32,7 +34,7 @@ export function SandboxUsageBanner({ getToken }: { getToken: () => Promise<null
           </div>
         </div>
       </div>
-      <UpgradeDialog getToken={getToken} onClose={() => setPickerOpen(false)} open={pickerOpen} />
+      <UpgradeDialog onClose={() => setPickerOpen(false)} open={pickerOpen} />
     </div>
   );
 }
diff --git a/apps/web/src/components/home/home-composer.tsx b/apps/web/src/components/home/home-composer.tsx
index bf6467e3..cb40257b 100644
--- a/apps/web/src/components/home/home-composer.tsx
+++ b/apps/web/src/components/home/home-composer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { IntegrationName } from "@cheatcode/types";
-import { type ProjectSummary, USER_MESSAGE_MAX_CHARACTERS } from "@cheatcode/types/api";
+import type { ProjectSummary } from "@cheatcode/types/api";
 import type { ChangeEvent, KeyboardEvent, RefObject } from "react";
 import { createPortal } from "react-dom";
 import { AuthModal } from "@/components/auth/auth-modal";
@@ -11,8 +11,9 @@ import {
   type ComposerAttachmentStatusState,
 } from "@/components/composer/composer-attachment-status";
 import { ComposerContextChips } from "@/components/composer/composer-context-chips";
-import { COMPOSER_TEXTAREA_CLASS, ComposerFrame } from "@/components/composer/composer-frame";
+import { ComposerFrame } from "@/components/composer/composer-frame";
 import { ComposerPopover } from "@/components/composer/composer-popover";
+import { ComposerTextarea } from "@/components/composer/composer-textarea";
 import { ModelMenu } from "@/components/composer/model-menu";
 import { ProjectPicker } from "@/components/composer/project-picker";
 import type { ComposerTriggers } from "@/components/composer/use-composer-triggers";
@@ -59,7 +60,7 @@ function HomeComposerForm({ controller }: { controller: HomeComposerController }
   return (
     <form className="mt-8 w-full" onSubmit={controller.actions.submit}>
       <div className="relative z-10 mx-auto flex w-full max-w-[708px] flex-col gap-0">
-        <SandboxUsageBanner getToken={controller.meta.getToken} />
+        <SandboxUsageBanner />
         <HomeSlashPopover controller={controller} />
         <ComposerFrame fillClassName="min-h-[143px] sm:min-h-[124px]">
           <HomeComposerEditor {...homeEditorProps(controller)} />
@@ -127,26 +128,18 @@ function HomeComposerEditor(props: HomeComposerEditorProps) {
         tool={props.toolChip}
       />
       <ComposerAttachmentStatus className="px-2 pt-3" status={props.attachmentStatus} />
-      <label className="sr-only" htmlFor="home-prompt">
-        Message Cheatcode
-      </label>
-      <textarea
+      <ComposerTextarea
         className={cn(
-          COMPOSER_TEXTAREA_CLASS,
           props.skillChip || props.toolChip || props.skillCreatorMode || props.attachmentStatus
             ? "pt-2"
             : "pt-4",
         )}
         id="home-prompt"
-        maxLength={USER_MESSAGE_MAX_CHARACTERS}
-        onChange={props.triggers.onTextareaChange}
-        onClick={props.triggers.onTextareaSelect}
+        label="Message Cheatcode"
         onKeyDown={props.onKeyDown}
-        onKeyUp={props.triggers.onTextareaSelect}
-        onSelect={props.triggers.onTextareaSelect}
         placeholder={props.placeholder}
-        ref={props.textareaRef}
-        rows={1}
+        textareaRef={props.textareaRef}
+        triggers={props.triggers}
         value={props.value}
       />
     </div>
diff --git a/apps/web/src/components/home/home-workspace.tsx b/apps/web/src/components/home/home-workspace.tsx
index 4763d051..6e553f84 100644
--- a/apps/web/src/components/home/home-workspace.tsx
+++ b/apps/web/src/components/home/home-workspace.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAuth } from "@clerk/nextjs";
-import { Suspense, useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { HomeComposerFromSearchParams } from "@/components/home/home-composer-from-search-params";
 import { HomeComputerPane } from "@/components/home/home-computer-pane";
 import { HomeGreeting } from "@/components/home/home-greeting";
@@ -10,10 +10,10 @@ import { HomeSessionChrome } from "@/components/home/home-session-chrome";
 import { HomeSidebarOffset } from "@/components/home/home-sidebar-offset";
 import { AppSidebar } from "@/components/shell/app-sidebar";
 import { SidebarContentFrame } from "@/components/shell/sidebar-content-frame";
+import { useAutoCollapseSidebar } from "@/components/shell/use-auto-collapse-sidebar";
 import { CheatcodeCursorTrail } from "@/components/ui/cheatcode-cursor-field";
 import { CheatcodeMark } from "@/components/ui/cheatcode-mark";
 import { WorkspaceRunLayout } from "@/components/workspace/workspace-run-layout";
-import { useAppStore } from "@/lib/store/app-store";
 import { cn } from "@/lib/ui/cn";
 
 /**
@@ -29,7 +29,7 @@ export function HomeWorkspace() {
   const hasComputer = Boolean(isLoaded && isSignedIn);
   const computerVisible = hasComputer && computerOpen;
 
-  useHomeComputerSidebarCollapse(computerVisible);
+  useAutoCollapseSidebar(computerVisible);
 
   // Drop the open state if the signed-in surface goes away (e.g. sign-out).
   useEffect(() => {
@@ -113,33 +113,3 @@ function HomeContentPane({ computerOpen }: { computerOpen: boolean }) {
     </div>
   );
 }
-
-/**
- * Collapse the sidebar rail while the home Computer pane is open (and restore the
- * user's previous rail state on close), mirroring the chat workspace behaviour in
- * `AppChrome`.
- */
-function useHomeComputerSidebarCollapse(active: boolean): void {
-  const sidebarCollapsed = useAppStore((state) => state.sidebarCollapsed);
-  const setSidebarCollapsed = useAppStore((state) => state.setSidebarCollapsed);
-  const previousSidebarCollapsedRef = useRef<boolean | null>(null);
-
-  useEffect(() => {
-    if (!active) {
-      if (previousSidebarCollapsedRef.current !== null) {
-        setSidebarCollapsed(previousSidebarCollapsedRef.current);
-        previousSidebarCollapsedRef.current = null;
-      }
-      return;
-    }
-    // Collapse the rail ONCE when the computer opens (saving the prior state to
-    // restore on close), but let the user re-expand it while the computer stays
-    // open — Cheatcode keeps the sidebar expandable in this state. Guarding on the ref
-    // (not re-collapsing on every sidebarCollapsed change) is what makes the
-    // Expand-sidebar button work here.
-    if (previousSidebarCollapsedRef.current === null) {
-      previousSidebarCollapsedRef.current = sidebarCollapsed;
-      setSidebarCollapsed(true);
-    }
-  }, [active, setSidebarCollapsed, sidebarCollapsed]);
-}
diff --git a/apps/web/src/components/home/use-home-composer-controller.ts b/apps/web/src/components/home/use-home-composer-controller.ts
index 17de889d..5118c6a9 100644
--- a/apps/web/src/components/home/use-home-composer-controller.ts
+++ b/apps/web/src/components/home/use-home-composer-controller.ts
@@ -1,9 +1,7 @@
 "use client";
 
 import type { IntegrationName } from "@cheatcode/types";
-import type { UserSkill } from "@cheatcode/types/api";
 import { useAuth } from "@clerk/nextjs";
-import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import {
   type FormEvent,
@@ -14,28 +12,15 @@ import {
   useRef,
   useState,
 } from "react";
-import type { ComposerMenuItem } from "@/components/composer/composer-popover";
-import { useProjectFileItems } from "@/components/composer/project-file-source";
-import { slashSkillItems } from "@/components/composer/slash-skill-source";
-import {
-  type TriggerDetector,
-  useComposerTriggers,
-} from "@/components/composer/use-composer-triggers";
+import { useComposerMenu } from "@/components/composer/use-composer-menu";
 import { useProjectFileUploads } from "@/components/composer/use-project-file-uploads";
 import { resolveComposerAuthToken } from "@/components/home/home-composer-auth";
 import { useHomeComposerSelection } from "@/components/home/use-home-composer-selection";
 import { useHomeComposerSubmission } from "@/components/home/use-home-composer-submission";
 import { useHomePromptState } from "@/components/home/use-home-prompt-state";
 import { resolveInitialSkill } from "@/components/home/use-initial-skill";
-import { listUserSkills, USER_SKILLS_QUERY } from "@/lib/api/skills";
 import { usePromptHandoff } from "@/lib/hooks/use-prompt-handoff";
-import { detectMentionToken, detectSlashToken } from "@/lib/input/caret-tokens";
 import { useAppStore } from "@/lib/store/app-store";
-import { emitComposerEvent } from "@/lib/telemetry/user-events";
-
-const SLASH_DETECTOR: TriggerDetector = { detect: detectSlashToken, kind: "slash" };
-const MENTION_DETECTOR: TriggerDetector = { detect: detectMentionToken, kind: "mention" };
-const COMPOSER_SOURCES: readonly TriggerDetector[] = [SLASH_DETECTOR, MENTION_DETECTOR];
 
 export interface HomeComposerProps {
   initialPromptKey?: string | undefined;
@@ -68,11 +53,12 @@ export function useHomeComposerController(input: HomeComposerProps) {
     value: prompt.state.value,
   });
   const [authRedirectTo, setAuthRedirectTo] = useState<string | null>(null);
-  const composerMenu = useHomeComposerMenu({
+  const composerMenu = useComposerMenu({
     getToken: identity.getToken,
+    onChange: prompt.actions.publishValue,
+    onSelectSkill: selection.actions.selectSkill,
+    onSelectTool: selection.actions.selectTool,
     projectId: selection.state.selectedProject?.id ?? null,
-    publishValue: prompt.actions.publishValue,
-    selectSkill: selection.actions.selectSkill,
     textareaRef: textarea.ref,
     value: prompt.state.value,
   });
@@ -90,7 +76,6 @@ export function useHomeComposerController(input: HomeComposerProps) {
     selection.state.intent?.placeholder ?? "Ask anything, @ for skills, / for files";
   return homeComposerControllerValue({
     authRedirectTo,
-    getToken: identity.getToken,
     handleKeyDown,
     placeholder,
     prompt,
@@ -177,13 +162,12 @@ function useHomeSubmit(submit: () => void, canSubmit: boolean) {
 
 interface HomeControllerParts {
   authRedirectTo: string | null;
-  getToken: () => Promise<null | string>;
   handleKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
   placeholder: string;
   prompt: ReturnType<typeof useHomePromptState>;
   selection: ReturnType<typeof useHomeComposerSelection>;
   setAuthRedirectTo: (value: string | null) => void;
-  composerMenu: ReturnType<typeof useHomeComposerMenu>;
+  composerMenu: ReturnType<typeof useComposerMenu>;
   submission: ReturnType<typeof useHomeComposerSubmission>;
   submit: (event?: FormEvent<HTMLFormElement>) => void;
   textareaRef: { current: HTMLTextAreaElement | null };
@@ -202,7 +186,6 @@ function homeComposerControllerValue(parts: HomeControllerParts) {
       submit: parts.submit,
     },
     menu: parts.composerMenu,
-    meta: { getToken: parts.getToken },
     refs: {
       attachmentInputRef: parts.uploads.inputRef,
       textareaRef: parts.textareaRef,
@@ -218,77 +201,14 @@ function homeComposerControllerValue(parts: HomeControllerParts) {
   };
 }
 
-function useHomeComposerMenu(input: {
-  getToken: () => Promise<null | string>;
-  projectId: null | string;
-  publishValue: (value: string) => void;
-  selectSkill: (skill: string) => void;
-  textareaRef: { current: HTMLTextAreaElement | null };
-  value: string;
-}) {
-  const { data: userSkills } = useQuery({
-    queryFn: ({ signal }) => listUserSkills(input.getToken, signal),
-    queryKey: USER_SKILLS_QUERY,
-    staleTime: 60_000,
-  });
-  const triggers = useComposerTriggers({
-    onChange: input.publishValue,
-    onInsert: (kind, item) => {
-      if (kind === "mention") selectSkillItem(item, input.selectSkill);
-      emitComposerEvent(
-        input.getToken,
-        kind === "mention" ? "composer_mention_inserted" : "composer_slash_inserted",
-      );
-    },
-    sources: COMPOSER_SOURCES,
-    textareaRef: input.textareaRef,
-    value: input.value,
-  });
-  const fileItems = useProjectFileItems({
-    enabled: triggers.kind === "slash",
-    projectId: input.projectId,
-    query: triggers.query,
-  });
-  const items = resolveHomeMenuItems({
-    fileItems,
-    triggers,
-    userSkills: userSkills ?? [],
-  });
-  return {
-    ariaLabel: triggers.kind === "slash" ? "Project files" : "Skills",
-    isOpen: triggers.isActive && items.length > 0,
-    items,
-    triggers,
-  };
-}
-
-function resolveHomeMenuItems(input: {
-  fileItems: ComposerMenuItem[];
-  triggers: ReturnType<typeof useComposerTriggers>;
-  userSkills: UserSkill[];
-}): ComposerMenuItem[] {
-  if (input.triggers.kind === "slash") return input.fileItems;
-  const items = slashSkillItems(input.triggers.query, input.userSkills);
-  if (items.length > 0) return items;
-  return [statusMenuItem("No matching skills")];
-}
-
-function statusMenuItem(label: string): ComposerMenuItem {
-  return { disabled: true, id: `status:${label}`, insert: "", label, visual: "status" };
-}
-
-function selectSkillItem(item: ComposerMenuItem, selectSkill: (skill: string) => void) {
-  if (item.skillName) selectSkill(item.skillName);
-}
-
 function useComposerKeyDown(
-  menu: ReturnType<typeof useHomeComposerMenu>,
+  menu: ReturnType<typeof useComposerMenu>,
   canSubmit: boolean,
   submit: () => void,
 ) {
   return useCallback(
     (event: KeyboardEvent<HTMLTextAreaElement>) => {
-      if (menu.triggers.handleMenuKeyDown(event, menu.items)) {
+      if (menu.handleKeyDown(event)) {
         return;
       }
       if ((event.metaKey || event.ctrlKey) && event.key === "Enter" && canSubmit) {
@@ -296,6 +216,6 @@ function useComposerKeyDown(
         submit();
       }
     },
-    [canSubmit, menu.items, menu.triggers, submit],
+    [canSubmit, menu.handleKeyDown, submit],
   );
 }
diff --git a/apps/web/src/components/preview/browser-takeover-surface.tsx b/apps/web/src/components/preview/browser-takeover-surface.tsx
new file mode 100644
index 00000000..5f17c932
--- /dev/null
+++ b/apps/web/src/components/preview/browser-takeover-surface.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import type { BrowserTakeoverController } from "@/components/preview/use-browser-takeover";
+
+export function BrowserTakeoverSurface({
+  browserTakeover,
+}: {
+  browserTakeover: BrowserTakeoverController;
+}) {
+  const session = browserTakeover.session;
+  if (!session) return null;
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-[20.5px] bg-background">
+      <div className="flex h-10 shrink-0 items-center justify-between border-border border-b px-3">
+        <div className="flex items-center gap-2 font-medium text-[12px] text-fg-secondary">
+          <span aria-hidden="true" className="h-2 w-2 rounded-full bg-amber-400" />
+          You’re controlling the browser
+        </div>
+        <button
+          className="h-7 rounded-full bg-foreground px-3 font-medium text-[12px] text-background transition-opacity hover:opacity-85 disabled:opacity-50"
+          disabled={browserTakeover.isPending}
+          onClick={() => void browserTakeover.resume()}
+          type="button"
+        >
+          {browserTakeover.isPending ? "Resuming…" : "Resume Cheatcode"}
+        </button>
+      </div>
+      <iframe
+        allow="clipboard-read; clipboard-write; fullscreen"
+        className="min-h-0 min-w-0 flex-1 border-0 bg-background"
+        referrerPolicy="no-referrer"
+        sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts"
+        src={session.url}
+        title="Live browser takeover"
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/preview/computer-panel-tabs.tsx b/apps/web/src/components/preview/computer-panel-tabs.tsx
index 24949244..405c0098 100644
--- a/apps/web/src/components/preview/computer-panel-tabs.tsx
+++ b/apps/web/src/components/preview/computer-panel-tabs.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAuth } from "@clerk/nextjs";
-import { type CSSProperties, useEffect, useRef, useState } from "react";
+import { type CSSProperties, useRef, useState } from "react";
 import { toast } from "sonner";
 import {
   Download,
@@ -16,6 +16,7 @@ import { CheatcodeTooltip } from "@/components/ui/cheatcode-tooltip";
 import { downloadProjectArchive } from "@/lib/api/project-thread";
 import type { PreviewTab } from "@/lib/store/app-store";
 import { cn } from "@/lib/ui/cn";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 import { ComputerToggleButton } from "./computer-toggle-button";
 import type { BrowserTakeoverController } from "./use-browser-takeover";
 
@@ -159,7 +160,7 @@ function ComputerMoreActions({
   const menuRef = useRef<HTMLSpanElement | null>(null);
   const [isOpen, setOpen] = useState(false);
   const download = useComputerDownload(projectId, projectName, () => setOpen(false));
-  useCloseComputerMenu(menuRef, isOpen, setOpen);
+  useDismissable({ isOpen, onDismiss: () => setOpen(false), ref: menuRef });
   return (
     <span className="relative" ref={menuRef}>
       <CheatcodeTooltip disabled={isOpen} label="More actions" side="bottom">
@@ -233,28 +234,6 @@ function DeliverablesButton({ count }: { count: number }) {
   );
 }
 
-function useCloseComputerMenu(
-  menuRef: React.RefObject<HTMLSpanElement | null>,
-  isOpen: boolean,
-  setOpen: (open: boolean) => void,
-): void {
-  useEffect(() => {
-    if (!isOpen) return;
-    const closeOnOutsidePointer = (event: PointerEvent) => {
-      if (!menuRef.current?.contains(event.target as Node)) setOpen(false);
-    };
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", closeOnOutsidePointer);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutsidePointer);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [isOpen, menuRef, setOpen]);
-}
-
 function computerTabStyle(activeTab: PreviewTab): CSSProperties {
   return {
     "--active-tab-left": activeTab === "files" ? "3px" : "57.664px",
diff --git a/apps/web/src/components/preview/console-strip-header.tsx b/apps/web/src/components/preview/console-strip-header.tsx
index 4a1292c9..cd4268fe 100644
--- a/apps/web/src/components/preview/console-strip-header.tsx
+++ b/apps/web/src/components/preview/console-strip-header.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import type { ConsoleTab } from "@/components/preview/console-terminal.types";
+import { consoleTabLabel } from "@/components/preview/console-terminal-state";
 import { ChevronDown, Plus, X } from "@/components/ui";
 import { CheatcodeTooltip } from "@/components/ui/cheatcode-tooltip";
-import type { ConsoleTab } from "@/lib/preview/console-terminal.types";
-import { consoleTabLabel } from "@/lib/preview/console-terminal-state";
 import { cn } from "@/lib/ui/cn";
 
 interface ConsoleStripHeaderProps {
diff --git a/apps/web/src/components/preview/console-strip.tsx b/apps/web/src/components/preview/console-strip.tsx
index 5b54be13..3970ddd0 100644
--- a/apps/web/src/components/preview/console-strip.tsx
+++ b/apps/web/src/components/preview/console-strip.tsx
@@ -3,8 +3,8 @@
 import { useAuth } from "@clerk/nextjs";
 import { ConsoleStripHeader } from "@/components/preview/console-strip-header";
 import { ConsoleTerminalPane } from "@/components/preview/console-terminal-pane";
-import { useConsoleTerminal } from "@/lib/preview/use-console-terminal";
-import { usePreviewConsole } from "@/lib/preview/use-preview-console";
+import { useConsoleTerminal } from "@/components/preview/use-console-terminal";
+import { usePreviewConsole } from "@/components/preview/use-preview-console";
 import { useAppStore } from "@/lib/store/app-store";
 import { emitConsoleStripOpened } from "@/lib/telemetry/user-events";
 import { cn } from "@/lib/ui/cn";
diff --git a/apps/web/src/lib/preview/console-terminal-format.ts b/apps/web/src/components/preview/console-terminal-format.ts
similarity index 86%
rename from apps/web/src/lib/preview/console-terminal-format.ts
rename to apps/web/src/components/preview/console-terminal-format.ts
index c0839aa0..810b15b7 100644
--- a/apps/web/src/lib/preview/console-terminal-format.ts
+++ b/apps/web/src/components/preview/console-terminal-format.ts
@@ -1,6 +1,6 @@
 import type { SandboxTerminalResult } from "@cheatcode/types/api";
-import type { ConsoleSeverity } from "./console";
-import { DEFAULT_TERMINAL_CWD } from "./console-terminal-state";
+import { DEFAULT_TERMINAL_CWD } from "@/components/preview/console-terminal-state";
+import type { ConsoleSeverity } from "@/lib/preview/console";
 
 export function severityClass(severity: ConsoleSeverity): string {
   if (severity === "error") {
diff --git a/apps/web/src/components/preview/console-terminal-pane.tsx b/apps/web/src/components/preview/console-terminal-pane.tsx
index ed59424b..8e756f66 100644
--- a/apps/web/src/components/preview/console-terminal-pane.tsx
+++ b/apps/web/src/components/preview/console-terminal-pane.tsx
@@ -2,9 +2,13 @@
 
 import type { ChangeEvent, KeyboardEvent, SyntheticEvent } from "react";
 import { useState } from "react";
+import type { ConsoleTerminalEntry } from "@/components/preview/console-terminal.types";
+import {
+  promptText,
+  severityClass,
+  terminalOutput,
+} from "@/components/preview/console-terminal-format";
 import type { ConsoleLine } from "@/lib/preview/console";
-import type { ConsoleTerminalEntry } from "@/lib/preview/console-terminal.types";
-import { promptText, severityClass, terminalOutput } from "@/lib/preview/console-terminal-format";
 import { cn } from "@/lib/ui/cn";
 
 interface ConsoleTerminalPaneModel {
diff --git a/apps/web/src/lib/preview/console-terminal-state.ts b/apps/web/src/components/preview/console-terminal-state.ts
similarity index 98%
rename from apps/web/src/lib/preview/console-terminal-state.ts
rename to apps/web/src/components/preview/console-terminal-state.ts
index 39b84055..35a9c8c1 100644
--- a/apps/web/src/lib/preview/console-terminal-state.ts
+++ b/apps/web/src/components/preview/console-terminal-state.ts
@@ -4,7 +4,7 @@ import type {
   ConsoleTerminalAction,
   PendingTerminalCommand,
   TerminalMutationInput,
-} from "./console-terminal.types";
+} from "@/components/preview/console-terminal.types";
 
 export const DEFAULT_TERMINAL_CWD = "/workspace";
 export const DEFAULT_TERMINAL_DISPLAY_WORKSPACE = "/workspace";
diff --git a/apps/web/src/lib/preview/console-terminal.types.ts b/apps/web/src/components/preview/console-terminal.types.ts
similarity index 94%
rename from apps/web/src/lib/preview/console-terminal.types.ts
rename to apps/web/src/components/preview/console-terminal.types.ts
index 1fcbff88..b255550c 100644
--- a/apps/web/src/lib/preview/console-terminal.types.ts
+++ b/apps/web/src/components/preview/console-terminal.types.ts
@@ -1,6 +1,6 @@
 import type { SandboxTerminalResult } from "@cheatcode/types/api";
 
-export type GetToken = () => Promise<null | string>;
+export type GetToken = () => Promise<string | null>;
 
 export interface ConsoleTerminalEntry {
   command: string;
diff --git a/apps/web/src/components/preview/expo-device-panel.tsx b/apps/web/src/components/preview/expo-device-panel.tsx
new file mode 100644
index 00000000..1e0c3603
--- /dev/null
+++ b/apps/web/src/components/preview/expo-device-panel.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { QRCodeSVG } from "qrcode.react";
+import type { ReactNode } from "react";
+import { Smartphone } from "@/components/ui";
+
+export function ExpoDevicePanel({ expoUrl }: { expoUrl: string }) {
+  return (
+    <aside
+      aria-label="Test on your device"
+      className="absolute top-3 right-3 z-10 flex max-h-[calc(100%-24px)] w-[232px] overflow-hidden rounded-[22px] border-2 border-border bg-bg-lifted/92 p-0.5 shadow-[0_12px_36px_rgba(0,0,0,0.12),0_1px_3px_rgba(0,0,0,0.08)] backdrop-blur-md"
+    >
+      <div className="chat-scrollbar flex h-full min-h-0 w-full flex-col gap-3.5 overflow-y-auto rounded-[18px] border border-border bg-bg-elevated/88 p-3.5">
+        <ExpoDeviceHeader />
+        <ExpoQrCode expoUrl={expoUrl} />
+        <ExpoInstructions />
+        <p className="text-[10px] text-thread-text-tertiary leading-relaxed">
+          The in-browser preview approximates native rendering. For accurate results, test on a real
+          device.
+        </p>
+      </div>
+    </aside>
+  );
+}
+
+function ExpoDeviceHeader() {
+  return (
+    <div className="flex items-center gap-2 font-semibold text-[14px] text-foreground">
+      <span className="flex h-7 w-7 items-center justify-center rounded-full border border-border bg-background text-fg-secondary shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+        <Smartphone aria-hidden="true" className="h-3.5 w-3.5" />
+      </span>
+      Test on your device
+    </div>
+  );
+}
+
+function ExpoQrCode({ expoUrl }: { expoUrl: string }) {
+  return (
+    <div className="rounded-[18px] border-2 border-border bg-background p-0.5">
+      <div className="flex items-center justify-center rounded-[14px] border border-border bg-background p-2.5">
+        <QRCodeSVG level="M" size={164} title="Expo Go QR code" value={expoUrl} />
+      </div>
+    </div>
+  );
+}
+
+function ExpoInstructions() {
+  return (
+    <ol className="space-y-3">
+      <ExpoInstruction number="1" title="Install Expo Go">
+        <ExpoStoreLinks />
+      </ExpoInstruction>
+      <ExpoInstruction number="2" title="Scan with your camera">
+        Use your camera or the Expo Go app. The build opens on your phone and live-reloads as the
+        agent works.
+      </ExpoInstruction>
+    </ol>
+  );
+}
+
+function ExpoInstruction({
+  children,
+  number,
+  title,
+}: {
+  children: ReactNode;
+  number: string;
+  title: string;
+}) {
+  return (
+    <li className="flex gap-2.5">
+      <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-secondary text-[11px] text-fg-secondary">
+        {number}
+      </span>
+      <div className="min-w-0">
+        <div className="font-semibold text-[13px] text-thread-text-primary">{title}</div>
+        <div className="mt-0.5 text-[11px] text-thread-text-secondary leading-relaxed">
+          {children}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+function ExpoStoreLinks() {
+  return (
+    <>
+      Free on the{" "}
+      <a
+        aria-label="App Store (opens in a new tab)"
+        className="underline hover:text-thread-text-primary"
+        href="https://apps.apple.com/app/expo-go/id982107779"
+        rel="noreferrer"
+        target="_blank"
+      >
+        App Store
+      </a>{" "}
+      and{" "}
+      <a
+        aria-label="Google Play (opens in a new tab)"
+        className="underline hover:text-thread-text-primary"
+        href="https://play.google.com/store/apps/details?id=host.exp.exponent"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Google Play
+      </a>
+      .
+    </>
+  );
+}
diff --git a/apps/web/src/components/preview/preview-device-menu.tsx b/apps/web/src/components/preview/preview-device-menu.tsx
index d55667a1..7b584fc5 100644
--- a/apps/web/src/components/preview/preview-device-menu.tsx
+++ b/apps/web/src/components/preview/preview-device-menu.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import type { RefObject } from "react";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import type { LucideIcon } from "@/components/ui";
 import { Monitor, Smartphone, Tablet } from "@/components/ui";
 import type { PreviewDevice } from "@/lib/store/app-store";
 import { useAppStore } from "@/lib/store/app-store";
 import { cn } from "@/lib/ui/cn";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 
 const DEVICES: ReadonlyArray<{ value: PreviewDevice; label: string; Icon: LucideIcon }> = [
   { value: "desktop", label: "Desktop", Icon: Monitor },
@@ -16,7 +16,8 @@ const DEVICES: ReadonlyArray<{ value: PreviewDevice; label: string; Icon: Lucide
 
 export function PreviewDeviceMenu({ isPreviewAvailable }: { isPreviewAvailable: boolean }) {
   const menuRef = useRef<HTMLDivElement | null>(null);
-  const disclosure = useDeviceMenuDisclosure(menuRef);
+  const disclosure = useDeviceMenuDisclosure();
+  useDismissable({ isOpen: disclosure.isOpen, onDismiss: disclosure.close, ref: menuRef });
   const previewDevice = useAppStore((state) => state.previewDevice);
   const setPreviewDevice = useAppStore((state) => state.setPreviewDevice);
   const ActiveDeviceIcon =
@@ -80,29 +81,8 @@ function DeviceMenuItems({ close, previewDevice, setPreviewDevice }: DeviceMenuI
   );
 }
 
-function useDeviceMenuDisclosure(menuRef: RefObject<HTMLDivElement | null>) {
+function useDeviceMenuDisclosure() {
   const [isOpen, setIsOpen] = useState(false);
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-    const closeOnOutsidePointer = (event: PointerEvent) => {
-      if (!menuRef.current?.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("pointerdown", closeOnOutsidePointer);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutsidePointer);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [isOpen, menuRef]);
   return {
     close: () => setIsOpen(false),
     isOpen,
diff --git a/apps/web/src/components/preview/preview-path-input.tsx b/apps/web/src/components/preview/preview-path-input.tsx
index bcb68068..d6da8e46 100644
--- a/apps/web/src/components/preview/preview-path-input.tsx
+++ b/apps/web/src/components/preview/preview-path-input.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { toast } from "sonner";
-import { normalizePreviewPath, previewOrigin } from "@/lib/preview/url-bar";
+import { normalizePreviewPath, previewOrigin } from "@/components/preview/url-bar";
 import { useAppStore } from "@/lib/store/app-store";
 
 export function PreviewPathInput({ previewUrl }: { previewUrl: string | null }) {
diff --git a/apps/web/src/lib/preview/preview-session.tsx b/apps/web/src/components/preview/preview-session.tsx
similarity index 98%
rename from apps/web/src/lib/preview/preview-session.tsx
rename to apps/web/src/components/preview/preview-session.tsx
index 42341c63..393b7838 100644
--- a/apps/web/src/lib/preview/preview-session.tsx
+++ b/apps/web/src/components/preview/preview-session.tsx
@@ -8,10 +8,10 @@ const PREVIEW_TOKEN_QUERY = "__cc_pt";
 const PREVIEW_HOST_SUFFIX = `.${PREVIEW_HOSTNAME}`;
 const PREVIEW_HOST_LABEL = /^[a-z0-9]+(?:-[a-z0-9]+)*--\d{1,5}$/u;
 
-interface StablePreviewSource {
+type StablePreviewSource = {
   identity: string | null;
   source: string | null;
-}
+};
 
 /**
  * Keeps a live iframe mounted when only its short-lived access token rotates.
diff --git a/apps/web/src/components/preview/preview-side-panel.tsx b/apps/web/src/components/preview/preview-side-panel.tsx
index e6298571..de88a637 100644
--- a/apps/web/src/components/preview/preview-side-panel.tsx
+++ b/apps/web/src/components/preview/preview-side-panel.tsx
@@ -2,15 +2,22 @@
 
 import type { ProjectSummary } from "@cheatcode/types/api";
 import { useAuth } from "@clerk/nextjs";
-import { QRCodeSVG } from "qrcode.react";
 import { Activity, type ReactNode, useEffect } from "react";
-import { Monitor, Smartphone } from "@/components/ui";
+import { BrowserTakeoverSurface } from "@/components/preview/browser-takeover-surface";
+import { ExpoDevicePanel } from "@/components/preview/expo-device-panel";
+import {
+  PreviewSessionRefresh,
+  useStablePreviewSource,
+} from "@/components/preview/preview-session";
+import { buildPreviewIframeSrc } from "@/components/preview/url-bar";
+import {
+  type PreviewLivePhase,
+  useEnsurePreviewLive,
+} from "@/components/preview/use-ensure-preview-live";
+import { Monitor } from "@/components/ui";
 import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
 import { CheatcodeTooltip } from "@/components/ui/cheatcode-tooltip";
 import { RecoveryCard } from "@/components/ui/recovery-card";
-import { PreviewSessionRefresh, useStablePreviewSource } from "@/lib/preview/preview-session";
-import { buildPreviewIframeSrc } from "@/lib/preview/url-bar";
-import { type PreviewLivePhase, useEnsurePreviewLive } from "@/lib/preview/use-ensure-preview-live";
 import type { PreviewDevice, PreviewTab } from "@/lib/store/app-store";
 import { useAppStore } from "@/lib/store/app-store";
 import { emitFirstPreviewOpened } from "@/lib/telemetry/user-events";
@@ -294,41 +301,6 @@ type AppTabProps = Omit<
   "activePreviewTab" | "browserTakeover" | "computerOpen" | "threadId"
 >;
 
-function BrowserTakeoverSurface({
-  browserTakeover,
-}: {
-  browserTakeover: ReturnType<typeof useBrowserTakeover>;
-}) {
-  const session = browserTakeover.session;
-  if (!session) return null;
-  return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-[20.5px] bg-background">
-      <div className="flex h-10 shrink-0 items-center justify-between border-border border-b px-3">
-        <div className="flex items-center gap-2 font-medium text-[12px] text-fg-secondary">
-          <span aria-hidden="true" className="h-2 w-2 rounded-full bg-amber-400" />
-          You’re controlling the browser
-        </div>
-        <button
-          className="h-7 rounded-full bg-foreground px-3 font-medium text-[12px] text-background transition-opacity hover:opacity-85 disabled:opacity-50"
-          disabled={browserTakeover.isPending}
-          onClick={() => void browserTakeover.resume()}
-          type="button"
-        >
-          {browserTakeover.isPending ? "Resuming…" : "Resume Cheatcode"}
-        </button>
-      </div>
-      <iframe
-        allow="clipboard-read; clipboard-write; fullscreen"
-        className="min-h-0 min-w-0 flex-1 border-0 bg-background"
-        referrerPolicy="no-referrer"
-        sandbox="allow-forms allow-pointer-lock allow-same-origin allow-scripts"
-        src={session.url}
-        title="Live browser takeover"
-      />
-    </div>
-  );
-}
-
 function AppTab({
   device,
   expoUrl,
@@ -393,7 +365,7 @@ function AppTabLayout({
         )}
       >
         {children}
-        {expoUrl ? <ExpoDeviceTestPanel expoUrl={expoUrl} /> : null}
+        {expoUrl ? <ExpoDevicePanel expoUrl={expoUrl} /> : null}
       </div>
     </div>
   );
@@ -501,109 +473,3 @@ function PreviewWakeError({ onRetry }: { onRetry: () => Promise<void> }) {
     </div>
   );
 }
-
-function ExpoDeviceTestPanel({ expoUrl }: { expoUrl: string }) {
-  return (
-    <aside
-      aria-label="Test on your device"
-      className="absolute top-3 right-3 z-10 flex max-h-[calc(100%-24px)] w-[232px] overflow-hidden rounded-[22px] border-2 border-border bg-bg-lifted/92 p-0.5 shadow-[0_12px_36px_rgba(0,0,0,0.12),0_1px_3px_rgba(0,0,0,0.08)] backdrop-blur-md"
-    >
-      <div className="chat-scrollbar flex h-full min-h-0 w-full flex-col gap-3.5 overflow-y-auto rounded-[18px] border border-border bg-bg-elevated/88 p-3.5">
-        <ExpoDeviceHeader />
-        <ExpoQrCode expoUrl={expoUrl} />
-        <ExpoInstructions />
-        <p className="text-[10px] text-thread-text-tertiary leading-relaxed">
-          The in-browser preview approximates native rendering. For accurate results, test on a real
-          device.
-        </p>
-      </div>
-    </aside>
-  );
-}
-
-function ExpoDeviceHeader() {
-  return (
-    <div className="flex items-center gap-2 font-semibold text-[14px] text-foreground">
-      <span className="flex h-7 w-7 items-center justify-center rounded-full border border-border bg-background text-fg-secondary shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
-        <Smartphone aria-hidden="true" className="h-3.5 w-3.5" />
-      </span>
-      Test on your device
-    </div>
-  );
-}
-
-function ExpoQrCode({ expoUrl }: { expoUrl: string }) {
-  return (
-    <div className="rounded-[18px] border-2 border-border bg-background p-0.5">
-      <div className="flex items-center justify-center rounded-[14px] border border-border bg-background p-2.5">
-        <QRCodeSVG level="M" size={164} title="Expo Go QR code" value={expoUrl} />
-      </div>
-    </div>
-  );
-}
-
-function ExpoInstructions() {
-  return (
-    <ol className="space-y-3">
-      <ExpoInstruction number="1" title="Install Expo Go">
-        <ExpoStoreLinks />
-      </ExpoInstruction>
-      <ExpoInstruction number="2" title="Scan with your camera">
-        Use your camera or the Expo Go app. The build opens on your phone and live-reloads as the
-        agent works.
-      </ExpoInstruction>
-    </ol>
-  );
-}
-
-function ExpoInstruction({
-  children,
-  number,
-  title,
-}: {
-  children: ReactNode;
-  number: string;
-  title: string;
-}) {
-  return (
-    <li className="flex gap-2.5">
-      <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-secondary text-[11px] text-fg-secondary">
-        {number}
-      </span>
-      <div className="min-w-0">
-        <div className="font-semibold text-[13px] text-thread-text-primary">{title}</div>
-        <div className="mt-0.5 text-[11px] text-thread-text-secondary leading-relaxed">
-          {children}
-        </div>
-      </div>
-    </li>
-  );
-}
-
-function ExpoStoreLinks() {
-  return (
-    <>
-      Free on the{" "}
-      <a
-        aria-label="App Store (opens in a new tab)"
-        className="underline hover:text-thread-text-primary"
-        href="https://apps.apple.com/app/expo-go/id982107779"
-        rel="noreferrer"
-        target="_blank"
-      >
-        App Store
-      </a>{" "}
-      and{" "}
-      <a
-        aria-label="Google Play (opens in a new tab)"
-        className="underline hover:text-thread-text-primary"
-        href="https://play.google.com/store/apps/details?id=host.exp.exponent"
-        rel="noreferrer"
-        target="_blank"
-      >
-        Google Play
-      </a>
-      .
-    </>
-  );
-}
diff --git a/apps/web/src/components/preview/preview-url-controls.tsx b/apps/web/src/components/preview/preview-url-controls.tsx
index c91fc949..10b2302c 100644
--- a/apps/web/src/components/preview/preview-url-controls.tsx
+++ b/apps/web/src/components/preview/preview-url-controls.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import { buildPreviewIframeSrc } from "@/components/preview/url-bar";
 import { ChevronLeft, ChevronRight, ExternalLink, RefreshCw } from "@/components/ui";
-import { buildPreviewIframeSrc } from "@/lib/preview/url-bar";
 import { useAppStore } from "@/lib/store/app-store";
 
 const CONTROL_CLASS =
diff --git a/apps/web/src/components/preview/sandbox-ide-tab.tsx b/apps/web/src/components/preview/sandbox-ide-tab.tsx
index bae3e36b..64c2b619 100644
--- a/apps/web/src/components/preview/sandbox-ide-tab.tsx
+++ b/apps/web/src/components/preview/sandbox-ide-tab.tsx
@@ -4,12 +4,15 @@ import { useAuth } from "@clerk/nextjs";
 import { useQuery } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
 import { type RefObject, useEffect, useRef, useState } from "react";
+import {
+  PreviewSessionRefresh,
+  useStablePreviewSource,
+} from "@/components/preview/preview-session";
 import { FolderOpen } from "@/components/ui";
 import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
 import { CheatcodeTooltip } from "@/components/ui/cheatcode-tooltip";
 import { RecoveryCard } from "@/components/ui/recovery-card";
 import { openComputerIde, openSandboxIde } from "@/lib/api/sandbox";
-import { PreviewSessionRefresh, useStablePreviewSource } from "@/lib/preview/preview-session";
 import { cn } from "@/lib/ui/cn";
 
 const PREVIEW_SESSION_REFRESH_MS = 8 * 60 * 1000;
diff --git a/apps/web/src/lib/preview/url-bar.ts b/apps/web/src/components/preview/url-bar.ts
similarity index 98%
rename from apps/web/src/lib/preview/url-bar.ts
rename to apps/web/src/components/preview/url-bar.ts
index 1e5f03ec..9c280d55 100644
--- a/apps/web/src/lib/preview/url-bar.ts
+++ b/apps/web/src/components/preview/url-bar.ts
@@ -9,10 +9,10 @@
 
 const SANDBOX_PROXY_PREFIX = "/__sandbox/";
 
-interface SplitPreviewUrl {
+type SplitPreviewUrl = {
   base: string;
   path: string;
-}
+};
 
 /** Origin to navigate within. Preserves the current local proxy's `/__sandbox/<host>` prefix. */
 export function previewOrigin(previewUrl: string): string {
diff --git a/apps/web/src/lib/preview/use-console-terminal-data.ts b/apps/web/src/components/preview/use-console-terminal-data.ts
similarity index 94%
rename from apps/web/src/lib/preview/use-console-terminal-data.ts
rename to apps/web/src/components/preview/use-console-terminal-data.ts
index 2fdff042..28eae34b 100644
--- a/apps/web/src/lib/preview/use-console-terminal-data.ts
+++ b/apps/web/src/components/preview/use-console-terminal-data.ts
@@ -3,18 +3,18 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import type { Dispatch } from "react";
 import { useEffect } from "react";
 import { toast } from "sonner";
+import type {
+  ConsoleTerminalAction,
+  GetToken,
+  TerminalMutationInput,
+} from "@/components/preview/console-terminal.types";
+import { terminalErrorResult } from "@/components/preview/console-terminal-state";
 import {
   readComputerTerminalContext,
   readSandboxTerminalContext,
   runComputerTerminal,
   runSandboxTerminal,
 } from "@/lib/api/sandbox";
-import type {
-  ConsoleTerminalAction,
-  GetToken,
-  TerminalMutationInput,
-} from "./console-terminal.types";
-import { terminalErrorResult } from "./console-terminal-state";
 
 type TerminalDispatch = Dispatch<ConsoleTerminalAction>;
 
diff --git a/apps/web/src/lib/preview/use-console-terminal.ts b/apps/web/src/components/preview/use-console-terminal.ts
similarity index 96%
rename from apps/web/src/lib/preview/use-console-terminal.ts
rename to apps/web/src/components/preview/use-console-terminal.ts
index ccaddcdf..1ca2f68a 100644
--- a/apps/web/src/lib/preview/use-console-terminal.ts
+++ b/apps/web/src/components/preview/use-console-terminal.ts
@@ -7,19 +7,19 @@ import type {
   ConsoleTerminalAction,
   GetToken,
   TerminalMutationInput,
-} from "./console-terminal.types";
+} from "@/components/preview/console-terminal.types";
 import {
   consoleTerminalReducer,
   createConsoleTerminalState,
   DEFAULT_TERMINAL_DISPLAY_WORKSPACE,
   terminalHostFromPreview,
-} from "./console-terminal-state";
+} from "@/components/preview/console-terminal-state";
 import {
   terminalScopeKey,
   useContextCwd,
   useTerminalContext,
   useTerminalMutation,
-} from "./use-console-terminal-data";
+} from "@/components/preview/use-console-terminal-data";
 
 type TerminalDispatch = Dispatch<ConsoleTerminalAction>;
 
diff --git a/apps/web/src/lib/preview/use-ensure-preview-live.ts b/apps/web/src/components/preview/use-ensure-preview-live.ts
similarity index 99%
rename from apps/web/src/lib/preview/use-ensure-preview-live.ts
rename to apps/web/src/components/preview/use-ensure-preview-live.ts
index c3f75367..ff02b1d6 100644
--- a/apps/web/src/lib/preview/use-ensure-preview-live.ts
+++ b/apps/web/src/components/preview/use-ensure-preview-live.ts
@@ -30,7 +30,7 @@ interface PreviewRefreshDependencies {
   setActivePreviewTab: (tab: PreviewTab) => void;
   setExpoUrl: (url: string | null) => void;
   setPreviewUrl: (url: string | null) => void;
-  threadId: string | null;
+  threadId: null | string;
 }
 
 interface PreviewLiveRuntime {
diff --git a/apps/web/src/lib/preview/use-preview-console.ts b/apps/web/src/components/preview/use-preview-console.ts
similarity index 97%
rename from apps/web/src/lib/preview/use-preview-console.ts
rename to apps/web/src/components/preview/use-preview-console.ts
index 6999f9a8..9bd649f8 100644
--- a/apps/web/src/lib/preview/use-preview-console.ts
+++ b/apps/web/src/components/preview/use-preview-console.ts
@@ -24,7 +24,7 @@ export interface PreviewConsoleState {
  * was paused. The applied snapshot drives the next poll, so the side effects
  * live in the queryFn (react-query v5 has no onSuccess).
  */
-export function usePreviewConsole(threadId: string | null, enabled: boolean): PreviewConsoleState {
+export function usePreviewConsole(threadId: null | string, enabled: boolean): PreviewConsoleState {
   const { getToken } = useAuth();
 
   const { error, isFetching } = useQuery<SandboxConsoleSnapshot>({
diff --git a/apps/web/src/components/projects/projects-shell.tsx b/apps/web/src/components/projects/projects-shell.tsx
index 48857aba..34712047 100644
--- a/apps/web/src/components/projects/projects-shell.tsx
+++ b/apps/web/src/components/projects/projects-shell.tsx
@@ -23,6 +23,7 @@ import {
   getThread,
   listThreadMessagesPage,
 } from "@/lib/api/project-thread";
+import { projectKeys, threadKeys } from "@/lib/api/query-keys";
 import { usePromptHandoff } from "@/lib/hooks/use-prompt-handoff";
 import { useAppStore } from "@/lib/store/app-store";
 
@@ -228,9 +229,9 @@ function useRefreshThreadProjectOnSandboxChange(input: {
     if (!threadId || sandboxStatus === "cold") {
       return;
     }
-    void queryClient.invalidateQueries({ exact: true, queryKey: ["threads", threadId] });
+    void queryClient.invalidateQueries({ exact: true, queryKey: threadKeys.detail(threadId) });
     if (projectId) {
-      void queryClient.invalidateQueries({ exact: true, queryKey: ["projects", projectId] });
+      void queryClient.invalidateQueries({ exact: true, queryKey: projectKeys.detail(projectId) });
     }
   }, [projectId, queryClient, sandboxStatus, threadId]);
 }
@@ -247,7 +248,7 @@ function useThreadQuery(getToken: () => Promise<null | string>, threadId: null |
   return useQuery<Thread>({
     enabled: Boolean(threadId),
     queryFn: ({ signal }) => getThread(getToken, String(threadId), signal),
-    queryKey: ["threads", threadId],
+    queryKey: threadKeys.detail(threadId),
     retry: false,
     staleTime: 5_000,
   });
@@ -257,7 +258,7 @@ function useProjectQuery(getToken: () => Promise<null | string>, projectId: null
   return useQuery<ProjectSummary>({
     enabled: Boolean(projectId),
     queryFn: ({ signal }) => getProject(getToken, String(projectId), signal),
-    queryKey: ["projects", projectId],
+    queryKey: projectKeys.detail(projectId),
     retry: false,
     staleTime: 5_000,
   });
@@ -272,7 +273,7 @@ function useThreadMessagesQuery(getToken: () => Promise<null | string>, threadId
     initialPageParam: null as string | null,
     queryFn: ({ pageParam, signal }) =>
       listThreadMessagesPage(getToken, String(threadId), pageParam, signal),
-    queryKey: ["threads", threadId, "messages"],
+    queryKey: threadKeys.messages(threadId),
     retry: false,
     staleTime: 5_000,
   });
diff --git a/apps/web/src/components/settings/activity-year-chart.tsx b/apps/web/src/components/settings/activity-year-chart.tsx
index 71e3d413..6ff5c476 100644
--- a/apps/web/src/components/settings/activity-year-chart.tsx
+++ b/apps/web/src/components/settings/activity-year-chart.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { ActivityRunPoint, SandboxHourPoint } from "@cheatcode/types/api";
+import { useAuth } from "@clerk/nextjs";
 import { useEffect, useMemo, useState } from "react";
 import { ChartNoAxesCombined } from "@/components/ui";
 import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
@@ -13,8 +14,8 @@ const QUERY_DAYS = 366;
 const EMPTY_RUNS: ActivityRunPoint[] = [];
 const EMPTY_SANDBOX_HOURS: SandboxHourPoint[] = [];
 
-export function ActivitySection({ getToken }: { getToken: () => Promise<null | string> }) {
-  const activity = useActivitySection(getToken);
+export function ActivitySection() {
+  const activity = useActivitySection();
   if (activity.query.isLoading) {
     return <ActivityLoading />;
   }
@@ -36,7 +37,8 @@ export function ActivitySection({ getToken }: { getToken: () => Promise<null | s
   );
 }
 
-function useActivitySection(getToken: () => Promise<null | string>) {
+function useActivitySection() {
+  const { getToken } = useAuth();
   const [currentYear] = useState(() => new Date().getFullYear());
   const [selectedYear, setSelectedYear] = useState(currentYear);
   const query = useActivityQuery(getToken, QUERY_DAYS);
diff --git a/apps/web/src/components/settings/pricing-panel.tsx b/apps/web/src/components/settings/pricing-panel.tsx
index 69e1cef4..aabfaee0 100644
--- a/apps/web/src/components/settings/pricing-panel.tsx
+++ b/apps/web/src/components/settings/pricing-panel.tsx
@@ -38,7 +38,6 @@ export function PricingPanel() {
       />
       {currentPlan && currentPlan.id !== "free" ? (
         <ManageSubscriptionDialog
-          getToken={getToken}
           onClose={() => setManagerOpen(false)}
           open={managerOpen}
           planDisplayName={currentPlan.displayName}
diff --git a/apps/web/src/components/settings/sandbox-hours-meter-body.tsx b/apps/web/src/components/settings/sandbox-hours-meter-body.tsx
index ca6868aa..8c78ffc2 100644
--- a/apps/web/src/components/settings/sandbox-hours-meter-body.tsx
+++ b/apps/web/src/components/settings/sandbox-hours-meter-body.tsx
@@ -19,13 +19,7 @@ const SANDBOX_BAR_SEGMENTS = Array.from({ length: 84 }, (_, position) => ({
   position,
 }));
 
-export function SandboxHoursMeterBody({
-  getToken,
-  usage,
-}: {
-  getToken: () => Promise<null | string>;
-  usage: SandboxUsageSummaryResponse;
-}) {
+export function SandboxHoursMeterBody({ usage }: { usage: SandboxUsageSummaryResponse }) {
   const meter = useSandboxHoursMeter(usage);
   return (
     <div>
@@ -36,17 +30,12 @@ export function SandboxHoursMeterBody({
       <SandboxHoursHeader meter={meter} usage={usage} />
       <SandboxHoursBar fraction={meter.fraction} warnLevel={usage.warnLevel} />
       <ManageSubscriptionDialog
-        getToken={getToken}
         onClose={() => meter.setManagerOpen(false)}
         open={meter.managerOpen}
         planDisplayName={meter.tierLabel}
         sandboxHoursTotal={usage.sandboxHoursTotal}
       />
-      <UpgradeDialog
-        getToken={getToken}
-        onClose={() => meter.setPickerOpen(false)}
-        open={meter.pickerOpen}
-      />
+      <UpgradeDialog onClose={() => meter.setPickerOpen(false)} open={meter.pickerOpen} />
     </div>
   );
 }
diff --git a/apps/web/src/components/settings/sandbox-hours-meter.tsx b/apps/web/src/components/settings/sandbox-hours-meter.tsx
index 5fb6db1a..cf8dcf77 100644
--- a/apps/web/src/components/settings/sandbox-hours-meter.tsx
+++ b/apps/web/src/components/settings/sandbox-hours-meter.tsx
@@ -1,12 +1,14 @@
 "use client";
 
+import { useAuth } from "@clerk/nextjs";
 import { Clock3 } from "@/components/ui";
 import { CheatcodeLoader } from "@/components/ui/cheatcode-loader";
 import { RecoveryCard } from "@/components/ui/recovery-card";
 import { useSandboxUsageQuery } from "@/lib/hooks/use-billing";
 import { SandboxHoursMeterBody } from "./sandbox-hours-meter-body";
 
-export function SandboxHoursMeter({ getToken }: { getToken: () => Promise<null | string> }) {
+export function SandboxHoursMeter() {
+  const { getToken } = useAuth();
   const usageQuery = useSandboxUsageQuery(getToken);
   const usage = usageQuery.data;
   return (
@@ -17,7 +19,7 @@ export function SandboxHoursMeter({ getToken }: { getToken: () => Promise<null |
         ) : usageQuery.isError || !usage ? (
           <SandboxHoursLoadError query={usageQuery} />
         ) : (
-          <SandboxHoursMeterBody getToken={getToken} usage={usage} />
+          <SandboxHoursMeterBody usage={usage} />
         )}
       </div>
     </section>
diff --git a/apps/web/src/components/settings/settings-page-shell.tsx b/apps/web/src/components/settings/settings-page-shell.tsx
new file mode 100644
index 00000000..95e55153
--- /dev/null
+++ b/apps/web/src/components/settings/settings-page-shell.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/ui/cn";
+
+const WIDTH_CLASS = {
+  narrow: "max-w-[740px]",
+  wide: "max-w-5xl",
+} as const;
+
+interface SettingsPageShellProps {
+  children: ReactNode;
+  width: keyof typeof WIDTH_CLASS;
+}
+
+export function SettingsPageShell({ children, width }: SettingsPageShellProps) {
+  return (
+    <section
+      className={cn(
+        "chat-scrollbar min-h-0 min-w-0 flex-1 overflow-y-auto bg-background px-2.5 pt-6 pb-16 text-foreground md:pt-10",
+        width === "narrow" && "sm:px-6 lg:px-10",
+      )}
+    >
+      <div className={cn("mx-auto w-full", WIDTH_CLASS[width])}>{children}</div>
+    </section>
+  );
+}
diff --git a/apps/web/src/components/settings/usage-panel.tsx b/apps/web/src/components/settings/usage-panel.tsx
index ad0d6586..3a45b414 100644
--- a/apps/web/src/components/settings/usage-panel.tsx
+++ b/apps/web/src/components/settings/usage-panel.tsx
@@ -1,19 +1,17 @@
 "use client";
 
-import { useAuth } from "@clerk/nextjs";
 import { ActivitySection } from "./activity-year-chart";
 import { SandboxHoursMeter } from "./sandbox-hours-meter";
 
 export function UsagePanel() {
-  const { getToken } = useAuth();
   return (
     <div className="text-foreground">
       <h1 className="mb-12 hidden px-1 font-semibold text-foreground text-xl leading-7 md:block">
         Usage
       </h1>
       <div className="w-full space-y-6">
-        <SandboxHoursMeter getToken={getToken} />
-        <ActivitySection getToken={getToken} />
+        <SandboxHoursMeter />
+        <ActivitySection />
       </div>
     </div>
   );
diff --git a/apps/web/src/components/shell/app-chrome.tsx b/apps/web/src/components/shell/app-chrome.tsx
index 4f95c9ea..1e09d4ce 100644
--- a/apps/web/src/components/shell/app-chrome.tsx
+++ b/apps/web/src/components/shell/app-chrome.tsx
@@ -2,9 +2,10 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { type ReactNode, Suspense, useEffect, useRef } from "react";
+import { type ReactNode, Suspense } from "react";
 import { AppSidebar } from "@/components/shell/app-sidebar";
 import { SidebarContentFrame } from "@/components/shell/sidebar-content-frame";
+import { useAutoCollapseSidebar } from "@/components/shell/use-auto-collapse-sidebar";
 import { Plus } from "@/components/ui";
 import { useAppStore } from "@/lib/store/app-store";
 
@@ -40,28 +41,7 @@ function WorkspaceChrome({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const isWorkspace = pathname.startsWith("/chats");
   const previewPanelOpen = useAppStore((state) => state.previewPanelOpen);
-  const sidebarCollapsed = useAppStore((state) => state.sidebarCollapsed);
-  const setSidebarCollapsed = useAppStore((state) => state.setSidebarCollapsed);
-  const previousSidebarCollapsedRef = useRef<boolean | null>(null);
-
-  useEffect(() => {
-    if (!isWorkspace || !previewPanelOpen) {
-      if (previousSidebarCollapsedRef.current !== null) {
-        setSidebarCollapsed(previousSidebarCollapsedRef.current);
-        previousSidebarCollapsedRef.current = null;
-      }
-      return;
-    }
-
-    // Collapse the rail ONCE when the preview opens (saving the prior state to
-    // restore on close), but let the user re-expand it while the preview stays
-    // open. Guarding on the ref — rather than re-collapsing on every
-    // sidebarCollapsed change — is what makes the Expand-sidebar button work here.
-    if (previousSidebarCollapsedRef.current === null) {
-      previousSidebarCollapsedRef.current = sidebarCollapsed;
-      setSidebarCollapsed(true);
-    }
-  }, [isWorkspace, previewPanelOpen, setSidebarCollapsed, sidebarCollapsed]);
+  useAutoCollapseSidebar(isWorkspace && previewPanelOpen);
 
   return (
     <>
diff --git a/apps/web/src/components/shell/app-sidebar.tsx b/apps/web/src/components/shell/app-sidebar.tsx
index 02048ab2..e3af2e2c 100644
--- a/apps/web/src/components/shell/app-sidebar.tsx
+++ b/apps/web/src/components/shell/app-sidebar.tsx
@@ -33,7 +33,6 @@ function FullSidebar({ mode }: { mode: FullSidebarMode }) {
   const pathname = usePathname();
   const identity = useSidebarIdentity();
   const navigation = useSidebarNavigationData({
-    getToken: identity.getToken,
     isSignedIn: identity.isSignedIn,
     pathname,
   });
diff --git a/apps/web/src/components/shell/sidebar-chat-list.tsx b/apps/web/src/components/shell/sidebar-chat-list.tsx
index df698c3c..f89fe376 100644
--- a/apps/web/src/components/shell/sidebar-chat-list.tsx
+++ b/apps/web/src/components/shell/sidebar-chat-list.tsx
@@ -19,6 +19,7 @@ import {
 import { SidebarListLoading } from "@/components/shell/sidebar-list-loading";
 import { Loader2, MoreVertical, Pencil, Trash2 } from "@/components/ui";
 import { deleteThread, updateThread } from "@/lib/api/project-thread";
+import { sidebarKeys } from "@/lib/api/query-keys";
 import { useChatTabsStore } from "@/lib/store/chat-tabs-store";
 import { cn } from "@/lib/ui/cn";
 
@@ -171,8 +172,8 @@ function useChatRenameMutation({
 }
 
 function invalidateChatQueries(queryClient: QueryClient) {
-  void queryClient.invalidateQueries({ queryKey: ["sidebar-chats"] });
-  void queryClient.invalidateQueries({ queryKey: ["sidebar-project-threads"] });
+  void queryClient.invalidateQueries({ queryKey: sidebarKeys.chats });
+  void queryClient.invalidateQueries({ queryKey: sidebarKeys.projectThreads });
 }
 
 function ChatRow({
diff --git a/apps/web/src/components/shell/sidebar-controller.ts b/apps/web/src/components/shell/sidebar-controller.ts
index 7fb21d51..8a818828 100644
--- a/apps/web/src/components/shell/sidebar-controller.ts
+++ b/apps/web/src/components/shell/sidebar-controller.ts
@@ -14,18 +14,18 @@ import {
 } from "@/components/shell/sidebar-data";
 import { activeChatIdFromPathname } from "@/components/shell/sidebar-navigation-model";
 import { updateProject } from "@/lib/api/project-thread";
+import { invalidateChatLists } from "@/lib/api/query-keys";
 import { useAppStore } from "@/lib/store/app-store";
 
 export type FullSidebarMode = "docked" | "overlay";
 
 export function useSidebarIdentity() {
-  const { getToken, isLoaded, isSignedIn } = useAuth();
+  const { isLoaded, isSignedIn } = useAuth();
   const { signOut } = useClerk();
   const { user } = useUser();
   const primaryEmail = user?.primaryEmailAddress?.emailAddress ?? null;
   return {
     displayName: user?.fullName ?? user?.firstName ?? primaryEmail ?? "cheatcode",
-    getToken,
     isLoaded,
     isSignedIn: Boolean(isSignedIn),
     primaryEmail,
@@ -35,14 +35,13 @@ export function useSidebarIdentity() {
 }
 
 export function useSidebarNavigationData({
-  getToken,
   isSignedIn,
   pathname,
 }: {
-  getToken: () => Promise<null | string>;
   isSignedIn: boolean;
   pathname: string;
 }) {
+  const { getToken } = useAuth();
   const activeThreadId = activeChatIdFromPathname(pathname);
   const activeProjectId = useActiveProjectId(getToken, activeThreadId, isSignedIn);
   return {
@@ -64,9 +63,7 @@ function useProjectRenameMutation(getToken: () => Promise<null | string>) {
     },
     onSuccess: (result) => {
       toast.success(`Renamed to ${result.name}`);
-      void queryClient.invalidateQueries({ queryKey: ["sidebar-projects"] });
-      void queryClient.invalidateQueries({ queryKey: ["sidebar-project-threads"] });
-      void queryClient.invalidateQueries({ queryKey: ["sidebar-chats"] });
+      void invalidateChatLists(queryClient);
     },
   });
 }
diff --git a/apps/web/src/components/shell/sidebar-data.ts b/apps/web/src/components/shell/sidebar-data.ts
index c863d28b..d0e6811a 100644
--- a/apps/web/src/components/shell/sidebar-data.ts
+++ b/apps/web/src/components/shell/sidebar-data.ts
@@ -9,6 +9,7 @@ import {
   listProjectThreadsPage,
   listRecentThreads,
 } from "@/lib/api/project-thread";
+import { projectKeys, sidebarKeys, threadKeys } from "@/lib/api/query-keys";
 
 export interface SidebarChat {
   activeRunId: string | null;
@@ -27,7 +28,7 @@ export function useSidebarChats(getToken: () => Promise<null | string>, enabled:
   const { data, isPending } = useQuery({
     enabled,
     queryFn: ({ signal }) => listRecentThreads(getToken, 20, signal),
-    queryKey: ["sidebar-chats"],
+    queryKey: sidebarKeys.chats,
     retry: false,
     staleTime: 30_000,
   });
@@ -45,7 +46,7 @@ export function useActiveProjectId(
   const threadQuery = useQuery({
     enabled: enabled && Boolean(threadId),
     queryFn: ({ signal }) => getThread(getToken, String(threadId), signal),
-    queryKey: ["threads", threadId],
+    queryKey: threadKeys.detail(threadId),
     retry: false,
     staleTime: 5_000,
   });
@@ -60,14 +61,14 @@ export function useSidebarProjects(
   const projectsQuery = useQuery({
     enabled,
     queryFn: ({ signal }) => listProjectsPage(getToken, null, 6, signal),
-    queryKey: ["sidebar-projects", "first-page"],
+    queryKey: sidebarKeys.projectFirstPage,
     retry: false,
     staleTime: 30_000,
   });
   const activeProjectQuery = useQuery({
     enabled: enabled && Boolean(activeProjectId),
     queryFn: ({ signal }) => getProject(getToken, String(activeProjectId), signal),
-    queryKey: ["projects", activeProjectId],
+    queryKey: projectKeys.detail(activeProjectId),
     retry: false,
     staleTime: 5_000,
   });
@@ -79,7 +80,7 @@ export function useSidebarProjects(
     queries: projects.map((project) => ({
       enabled: enabled && projectsQuery.isSuccess,
       queryFn: ({ signal }) => listProjectThreadsPage(getToken, project.id, null, 1, signal),
-      queryKey: ["sidebar-project-threads", project.id] as const,
+      queryKey: sidebarKeys.projectThreadsFor(project.id),
       retry: false,
       staleTime: 30_000,
     })),
diff --git a/apps/web/src/components/shell/sidebar-expanded-account.tsx b/apps/web/src/components/shell/sidebar-expanded-account.tsx
index 822482f6..87fdfc72 100644
--- a/apps/web/src/components/shell/sidebar-expanded-account.tsx
+++ b/apps/web/src/components/shell/sidebar-expanded-account.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useAuth } from "@clerk/nextjs";
 import Image from "next/image";
 import Link from "next/link";
 import type { AuthMode } from "@/components/auth/auth-modal";
@@ -33,7 +34,6 @@ interface SidebarSandboxUsage {
 interface SidebarAccountSectionProps {
   displayName: string;
   email: null | string;
-  getToken: () => Promise<null | string>;
   imageUrl: null | string;
   isLoaded: boolean;
   isOpen: boolean;
@@ -47,7 +47,8 @@ interface SidebarAccountSectionProps {
 }
 
 export function SidebarAccountSection(props: SidebarAccountSectionProps) {
-  const usage = useSidebarSandboxUsage(props.getToken, props.isSignedIn);
+  const { getToken } = useAuth();
+  const usage = useSidebarSandboxUsage(getToken, props.isSignedIn);
   return (
     <div className="flex shrink-0 items-center p-0.5">
       <div
diff --git a/apps/web/src/components/shell/sidebar-expanded-content.tsx b/apps/web/src/components/shell/sidebar-expanded-content.tsx
index 4e010bed..d3835c21 100644
--- a/apps/web/src/components/shell/sidebar-expanded-content.tsx
+++ b/apps/web/src/components/shell/sidebar-expanded-content.tsx
@@ -15,7 +15,6 @@ export function ExpandedSidebarContent(props: ExpandedSidebarContentProps) {
         <SidebarAccountSection
           displayName={props.displayName}
           email={props.primaryEmail}
-          getToken={props.getToken}
           imageUrl={props.profileImageUrl}
           isLoaded={props.isLoaded}
           isOpen={props.accountOpen}
diff --git a/apps/web/src/components/shell/sidebar-list-controls.tsx b/apps/web/src/components/shell/sidebar-list-controls.tsx
index 97d12c02..dc5e760f 100644
--- a/apps/web/src/components/shell/sidebar-list-controls.tsx
+++ b/apps/web/src/components/shell/sidebar-list-controls.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";
 import type { LucideIcon } from "@/components/ui";
 import { cn } from "@/lib/ui/cn";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 
 export function SidebarInlineActions({ children, open }: { children: ReactNode; open: boolean }) {
   return (
@@ -58,20 +59,6 @@ export function useSidebarInlineMenu(
   setOpen: (open: boolean) => void,
 ): React.RefObject<HTMLDivElement | null> {
   const ref = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!isOpen) return;
-    const closeOnOutsidePointer = (event: PointerEvent) => {
-      if (!ref.current?.contains(event.target as Node)) setOpen(false);
-    };
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", closeOnOutsidePointer);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutsidePointer);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [isOpen, setOpen]);
+  useDismissable({ isOpen, onDismiss: () => setOpen(false), ref });
   return ref;
 }
diff --git a/apps/web/src/components/shell/sidebar-panel.tsx b/apps/web/src/components/shell/sidebar-panel.tsx
index 836144e8..71db3717 100644
--- a/apps/web/src/components/shell/sidebar-panel.tsx
+++ b/apps/web/src/components/shell/sidebar-panel.tsx
@@ -83,7 +83,6 @@ function ExpandedPanelContent({ identity, navigation, panel, pathname }: Sidebar
       activeThreadId={navigation.activeThreadId}
       chatsOpen={panel.chatsOpen}
       displayName={identity.displayName}
-      getToken={identity.getToken}
       isLoaded={identity.isLoaded}
       isOverlay={panel.isOverlay}
       isSignedIn={identity.isSignedIn}
diff --git a/apps/web/src/components/shell/sidebar-project-list.tsx b/apps/web/src/components/shell/sidebar-project-list.tsx
index 3d9fcb49..78b45ed0 100644
--- a/apps/web/src/components/shell/sidebar-project-list.tsx
+++ b/apps/web/src/components/shell/sidebar-project-list.tsx
@@ -21,6 +21,7 @@ import { SidebarListLoading } from "@/components/shell/sidebar-list-loading";
 import { MoreHorizontal, Pencil, Trash2 } from "@/components/ui";
 import { CheatcodeTooltip } from "@/components/ui/cheatcode-tooltip";
 import { createChat, deleteProject } from "@/lib/api/project-thread";
+import { invalidateChatLists, sidebarKeys } from "@/lib/api/query-keys";
 import { useChatTabsStore } from "@/lib/store/chat-tabs-store";
 import { cn } from "@/lib/ui/cn";
 
@@ -178,17 +179,15 @@ function useProjectChatMutation({
     onError: (error) =>
       toast.error(error instanceof Error ? error.message : "Couldn't start a chat"),
     onSuccess: (thread) => {
-      void queryClient.invalidateQueries({ queryKey: ["sidebar-project-threads"] });
-      void queryClient.invalidateQueries({ queryKey: ["sidebar-chats"] });
+      void queryClient.invalidateQueries({ queryKey: sidebarKeys.projectThreads });
+      void queryClient.invalidateQueries({ queryKey: sidebarKeys.chats });
       routerPush(`/chats/${encodeURIComponent(thread.id)}`);
     },
   });
 }
 
 function invalidateProjectQueries(queryClient: QueryClient) {
-  void queryClient.invalidateQueries({ queryKey: ["sidebar-projects"] });
-  void queryClient.invalidateQueries({ queryKey: ["sidebar-project-threads"] });
-  void queryClient.invalidateQueries({ queryKey: ["sidebar-chats"] });
+  void invalidateChatLists(queryClient);
 }
 
 interface ProjectRowProps {
diff --git a/apps/web/src/components/shell/sidebar-rail-more-menu.tsx b/apps/web/src/components/shell/sidebar-rail-more-menu.tsx
index a382398f..48916e43 100644
--- a/apps/web/src/components/shell/sidebar-rail-more-menu.tsx
+++ b/apps/web/src/components/shell/sidebar-rail-more-menu.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { type RefObject, useEffect, useId, useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 import { FOOTER_NAV, isExternalHref } from "@/components/shell/sidebar-navigation-model";
 import { SidebarRailLink } from "@/components/shell/sidebar-rail-navigation";
 import {
@@ -13,6 +13,7 @@ import { useSidebarTheme } from "@/components/shell/sidebar-theme";
 import { CreditCard, LifeBuoy, type LucideIcon, MoreVertical, TrendingUp } from "@/components/ui";
 import { CheatcodeTooltip } from "@/components/ui/cheatcode-tooltip";
 import { cn } from "@/lib/ui/cn";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 
 const HELP_ITEM = FOOTER_NAV.find((item) => item.id === "cheatcode-101");
 const RAIL_SETTINGS_MENU_LINKS = [
@@ -32,7 +33,7 @@ export function SidebarRailMoreMenu({ pathname }: { pathname: string }) {
   const menuId = useId();
   const menuRef = useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
-  useDismissibleRailMenu(menuRef, open, setOpen);
+  useDismissable({ isOpen: open, onDismiss: () => setOpen(false), ref: menuRef });
   return (
     <div className="relative z-10 mt-auto flex shrink-0 flex-col" ref={menuRef}>
       <SidebarRailMoreDisclosure
@@ -178,25 +179,3 @@ function SidebarRailMenuLink({
     </CheatcodeTooltip>
   );
 }
-
-function useDismissibleRailMenu(
-  menuRef: RefObject<HTMLDivElement | null>,
-  open: boolean,
-  setOpen: (open: boolean) => void,
-) {
-  useEffect(() => {
-    if (!open) return;
-    const closeOnOutsidePress = (event: PointerEvent) => {
-      if (event.target instanceof Node && !menuRef.current?.contains(event.target)) setOpen(false);
-    };
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", closeOnOutsidePress);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnOutsidePress);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [menuRef, open, setOpen]);
-}
diff --git a/apps/web/src/components/shell/sidebar.types.ts b/apps/web/src/components/shell/sidebar.types.ts
index b615814d..d7e4c642 100644
--- a/apps/web/src/components/shell/sidebar.types.ts
+++ b/apps/web/src/components/shell/sidebar.types.ts
@@ -18,7 +18,6 @@ export interface ExpandedSidebarContentProps {
   activeThreadId: string | null;
   chatsOpen: boolean;
   displayName: string;
-  getToken: () => Promise<null | string>;
   isLoaded: boolean;
   isOverlay: boolean;
   isSignedIn: boolean;
diff --git a/apps/web/src/components/shell/use-auto-collapse-sidebar.ts b/apps/web/src/components/shell/use-auto-collapse-sidebar.ts
new file mode 100644
index 00000000..4e530f1b
--- /dev/null
+++ b/apps/web/src/components/shell/use-auto-collapse-sidebar.ts
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useAppStore } from "@/lib/store/app-store";
+
+/**
+ * Collapses the sidebar once while a secondary workspace surface is active,
+ * then restores the prior state when that surface closes. The saved-state guard
+ * intentionally lets the user re-expand the sidebar while the surface remains open.
+ */
+export function useAutoCollapseSidebar(active: boolean): void {
+  const sidebarCollapsed = useAppStore((state) => state.sidebarCollapsed);
+  const setSidebarCollapsed = useAppStore((state) => state.setSidebarCollapsed);
+  const previousSidebarCollapsedRef = useRef<boolean | null>(null);
+
+  useEffect(() => {
+    if (!active) {
+      if (previousSidebarCollapsedRef.current !== null) {
+        setSidebarCollapsed(previousSidebarCollapsedRef.current);
+        previousSidebarCollapsedRef.current = null;
+      }
+      return;
+    }
+    if (previousSidebarCollapsedRef.current === null) {
+      previousSidebarCollapsedRef.current = sidebarCollapsed;
+      setSidebarCollapsed(true);
+    }
+  }, [active, setSidebarCollapsed, sidebarCollapsed]);
+}
diff --git a/apps/web/src/components/skills/integration-skills-catalog.tsx b/apps/web/src/components/skills/integration-skills-catalog.tsx
index e5c00603..169db7fc 100644
--- a/apps/web/src/components/skills/integration-skills-catalog.tsx
+++ b/apps/web/src/components/skills/integration-skills-catalog.tsx
@@ -9,7 +9,7 @@ import { UserSkillsError, useUserSkillsCatalog } from "@/components/skills/user-
 
 export function IntegrationSkillsCatalog() {
   const catalog = useIntegrationSkillsCatalog();
-  const userSkills = useUserSkillsCatalog(catalog.getToken);
+  const userSkills = useUserSkillsCatalog();
   const visibleUserSkills = filterUserSkills(userSkills.skills, catalog.category, catalog.search);
   const selectedUserSkill = userSkills.selectedSkill;
   const deleteSelectedUserSkill = () => {
diff --git a/apps/web/src/components/skills/integration-skills-controls.tsx b/apps/web/src/components/skills/integration-skills-controls.tsx
index 1f69f978..41950e08 100644
--- a/apps/web/src/components/skills/integration-skills-controls.tsx
+++ b/apps/web/src/components/skills/integration-skills-controls.tsx
@@ -2,9 +2,10 @@
 
 import type { ToolkitCategory } from "@cheatcode/types/api";
 import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { MoreVertical, Search } from "@/components/ui";
 import { cn } from "@/lib/ui/cn";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 
 const ALL_CATEGORY = "all";
 const PRIMARY_CATEGORY_SLUGS = ["developer-tools", "team-collaboration", "documents"] as const;
@@ -91,18 +92,7 @@ export function CategoryTabs({
 function useCategoryMenu() {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!isOpen) {
-      return;
-    }
-    const onPointerDown = (event: PointerEvent) => {
-      if (!ref.current?.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [isOpen]);
+  useDismissable({ isOpen, onDismiss: () => setIsOpen(false), ref });
   return { close: () => setIsOpen(false), isOpen, ref, toggle: () => setIsOpen((value) => !value) };
 }
 
diff --git a/apps/web/src/components/skills/use-integration-skills-catalog.ts b/apps/web/src/components/skills/use-integration-skills-catalog.ts
index 1aa1ef8d..3f4a97e7 100644
--- a/apps/web/src/components/skills/use-integration-skills-catalog.ts
+++ b/apps/web/src/components/skills/use-integration-skills-catalog.ts
@@ -36,7 +36,6 @@ export function useIntegrationSkillsCatalog() {
     categories: controller.query.data?.categories ?? [],
     category,
     filteredToolkits,
-    getToken,
     handlers: controller.handlers,
     query: controller.query,
     search,
diff --git a/apps/web/src/components/skills/user-skills-section.tsx b/apps/web/src/components/skills/user-skills-section.tsx
index 89ac2d23..02dfc336 100644
--- a/apps/web/src/components/skills/user-skills-section.tsx
+++ b/apps/web/src/components/skills/user-skills-section.tsx
@@ -1,16 +1,19 @@
 "use client";
 
 import type { UserSkill } from "@cheatcode/types/api";
+import { useAuth } from "@clerk/nextjs";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { KeyboardEvent, MouseEvent } from "react";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { toast } from "sonner";
 import { BookOpen, Loader2, MoreVertical, Trash2 } from "@/components/ui";
 import { CheatcodeMark } from "@/components/ui/cheatcode-mark";
 import { RecoveryCard } from "@/components/ui/recovery-card";
 import { deleteUserSkill, listUserSkills, USER_SKILLS_QUERY } from "@/lib/api/skills";
+import { useDismissable } from "@/lib/ui/use-dismissable";
 
-export function useUserSkillsCatalog(getToken: () => Promise<null | string>) {
+export function useUserSkillsCatalog() {
+  const { getToken } = useAuth();
   const queryClient = useQueryClient();
   const query = useQuery({
     queryFn: ({ signal }) => listUserSkills(getToken, signal),
@@ -139,14 +142,7 @@ export function UserSkillCard({
 function useUserSkillMenu() {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!isOpen) return;
-    const closeOnOutsideClick = (event: PointerEvent) => {
-      if (!ref.current?.contains(event.target as Node)) setIsOpen(false);
-    };
-    document.addEventListener("pointerdown", closeOnOutsideClick);
-    return () => document.removeEventListener("pointerdown", closeOnOutsideClick);
-  }, [isOpen]);
+  useDismissable({ isOpen, onDismiss: () => setIsOpen(false), ref });
   return {
     close: () => setIsOpen(false),
     isOpen,
diff --git a/apps/web/src/lib/api/query-keys.ts b/apps/web/src/lib/api/query-keys.ts
new file mode 100644
index 00000000..edcc9073
--- /dev/null
+++ b/apps/web/src/lib/api/query-keys.ts
@@ -0,0 +1,29 @@
+import type { QueryClient } from "@tanstack/react-query";
+
+export const threadKeys = {
+  all: ["threads"] as const,
+  detail: (threadId: string | null) => ["threads", threadId] as const,
+  messages: (threadId: string | null) => ["threads", threadId, "messages"] as const,
+};
+
+export const projectKeys = {
+  all: ["projects"] as const,
+  detail: (projectId: string | null) => ["projects", projectId] as const,
+};
+
+export const sidebarKeys = {
+  chats: ["sidebar-chats"] as const,
+  projectFirstPage: ["sidebar-projects", "first-page"] as const,
+  projectPicker: ["sidebar-projects", "picker"] as const,
+  projectThreads: ["sidebar-project-threads"] as const,
+  projectThreadsFor: (projectId: string) => ["sidebar-project-threads", projectId] as const,
+  projects: ["sidebar-projects"] as const,
+};
+
+export async function invalidateChatLists(queryClient: QueryClient): Promise<void> {
+  await Promise.all([
+    queryClient.invalidateQueries({ queryKey: sidebarKeys.chats }),
+    queryClient.invalidateQueries({ queryKey: sidebarKeys.projectThreads }),
+    queryClient.invalidateQueries({ queryKey: sidebarKeys.projects }),
+  ]);
+}
diff --git a/apps/web/src/lib/ui/roving-menu-focus.ts b/apps/web/src/lib/ui/roving-menu-focus.ts
new file mode 100644
index 00000000..5fae36c1
--- /dev/null
+++ b/apps/web/src/lib/ui/roving-menu-focus.ts
@@ -0,0 +1,64 @@
+import type { FocusEvent, KeyboardEvent, RefObject } from "react";
+
+export function rovingMenuItems(
+  container: HTMLElement | null,
+  selector: string,
+): HTMLButtonElement[] {
+  return container ? Array.from(container.querySelectorAll<HTMLButtonElement>(selector)) : [];
+}
+
+export function handleRovingMenuFocus(event: FocusEvent<HTMLDivElement>, selector: string): void {
+  const target = event.target;
+  if (!(target instanceof HTMLButtonElement)) {
+    return;
+  }
+  const items = rovingMenuItems(event.currentTarget, selector);
+  const focusedIndex = items.indexOf(target);
+  if (focusedIndex >= 0) {
+    setRovingMenuTabStop(items, focusedIndex, false);
+  }
+}
+
+export function resetRovingMenuTabStop(
+  ref: RefObject<HTMLDivElement | null>,
+  selector: string,
+): void {
+  setRovingMenuTabStop(rovingMenuItems(ref.current, selector), 0, false);
+}
+
+export function moveRovingMenuFocus(event: KeyboardEvent<HTMLElement>, selector: string): boolean {
+  const items = rovingMenuItems(event.currentTarget, selector);
+  if (items.length === 0 || !["ArrowDown", "ArrowUp", "End", "Home"].includes(event.key)) {
+    return false;
+  }
+  const currentIndex = items.indexOf(event.target as HTMLButtonElement);
+  const lastIndex = items.length - 1;
+  const nextIndex = menuMoveIndex(event.key, currentIndex, lastIndex);
+  event.preventDefault();
+  event.stopPropagation();
+  setRovingMenuTabStop(items, nextIndex, true);
+  return true;
+}
+
+export function setRovingMenuTabStop(
+  items: readonly HTMLButtonElement[],
+  activeIndex: number,
+  shouldFocus: boolean,
+): void {
+  for (const [index, item] of items.entries()) {
+    item.tabIndex = index === activeIndex ? 0 : -1;
+  }
+  if (shouldFocus) {
+    items[activeIndex]?.focus();
+  }
+}
+
+function menuMoveIndex(key: string, currentIndex: number, lastIndex: number): number {
+  if (key === "Home" || (key === "ArrowDown" && currentIndex === lastIndex)) {
+    return 0;
+  }
+  if (key === "End" || (key === "ArrowUp" && currentIndex <= 0)) {
+    return lastIndex;
+  }
+  return key === "ArrowDown" ? currentIndex + 1 : currentIndex - 1;
+}
diff --git a/apps/web/src/lib/ui/use-dismissable.ts b/apps/web/src/lib/ui/use-dismissable.ts
new file mode 100644
index 00000000..8a7bb62c
--- /dev/null
+++ b/apps/web/src/lib/ui/use-dismissable.ts
@@ -0,0 +1,59 @@
+"use client";
+
+import type { RefObject } from "react";
+import { useEffect } from "react";
+
+interface UseDismissableOptions<T extends HTMLElement> {
+  closeOnFocusOut?: boolean | undefined;
+  isOpen: boolean;
+  onDismiss: () => void;
+  ref: RefObject<T | null>;
+  triggerRef?: RefObject<HTMLElement | null> | undefined;
+}
+
+export function useDismissable<T extends HTMLElement>({
+  closeOnFocusOut = false,
+  isOpen,
+  onDismiss,
+  ref,
+  triggerRef,
+}: UseDismissableOptions<T>): void {
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const isOutside = (target: EventTarget | null) =>
+      target instanceof Node &&
+      !ref.current?.contains(target) &&
+      !triggerRef?.current?.contains(target);
+    const dismissOnPointer = (event: PointerEvent) => {
+      if (isOutside(event.target)) {
+        onDismiss();
+      }
+    };
+    const dismissOnFocus = (event: FocusEvent) => {
+      if (isOutside(event.target)) {
+        onDismiss();
+      }
+    };
+    const dismissOnEscape = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      onDismiss();
+      triggerRef?.current?.focus();
+    };
+    document.addEventListener("pointerdown", dismissOnPointer);
+    document.addEventListener("keydown", dismissOnEscape);
+    if (closeOnFocusOut) {
+      document.addEventListener("focusin", dismissOnFocus);
+    }
+    return () => {
+      document.removeEventListener("pointerdown", dismissOnPointer);
+      document.removeEventListener("keydown", dismissOnEscape);
+      if (closeOnFocusOut) {
+        document.removeEventListener("focusin", dismissOnFocus);
+      }
+    };
+  }, [closeOnFocusOut, isOpen, onDismiss, ref, triggerRef]);
+}