From a9469f7de9574052afa971271022a7f39365def1 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 13:58:26 -0700
Subject: [PATCH 01/21] Update Clips recording and agent workflows

---
 .changeset/quiet-command-menu-shortcut.md     |   5 +
 docs/command-menu-architecture.md             | 123 ++++
 packages/core/src/client/CommandMenu.spec.tsx |  17 +-
 packages/core/src/client/CommandMenu.tsx      |   6 +-
 .../clips/.agents/skills/dictate/SKILL.md     |   1 +
 .../clips/actions/list-recordings.test.ts     |  49 ++
 templates/clips/actions/list-recordings.ts    |   2 +
 templates/clips/actions/search-dictations.ts  |  81 +++
 templates/clips/app/bug-report-modal.test.ts  |  29 +
 .../bug-report/bug-report-dialog.tsx          |  60 ++
 .../components/bug-report/bug-report-form.tsx | 209 ++++++
 .../app/components/clips-command-menu.tsx     | 647 ++++++++++++++++++
 .../app/components/library/empty-state.tsx    |  69 +-
 .../app/components/library/folder-card.tsx    |  34 +
 .../app/components/library/folder-tree.tsx    |  82 ++-
 .../library/library-grid-layout.test.ts       |  70 +-
 .../app/components/library/library-grid.tsx   | 324 ++++++---
 .../app/components/library/library-layout.tsx | 500 +++++++++-----
 .../library/library-primary-actions.tsx       |  57 ++
 .../app/components/library/page-header.tsx    |   5 +-
 .../components/library/recording-card.test.ts |  17 +
 .../app/components/library/recording-card.tsx | 113 +--
 .../components/library/search-bar.test.tsx    |   8 +-
 .../app/components/library/search-bar.tsx     |  24 +-
 .../library/sidebar-feedback-button.tsx       |  48 ++
 .../components/player/comments-panel.test.tsx |  11 +
 .../app/components/player/comments-panel.tsx  |   4 +-
 .../app/components/player/viewer-controls.tsx |   4 +-
 templates/clips/app/components/ui/tabs.tsx    |   2 +-
 .../clips/app/hooks/use-command-search.ts     |  53 ++
 .../app/hooks/use-upload-video-picker.tsx     |   1 +
 templates/clips/app/i18n/ar-SA.ts             |   2 +
 templates/clips/app/i18n/de-DE.ts             |   2 +
 templates/clips/app/i18n/en-US.ts             |   2 +
 templates/clips/app/i18n/es-ES.ts             |   2 +
 templates/clips/app/i18n/fr-FR.ts             |   2 +
 templates/clips/app/i18n/hi-IN.ts             |   2 +
 templates/clips/app/i18n/ja-JP.ts             |   2 +
 templates/clips/app/i18n/ko-KR.ts             |   2 +
 templates/clips/app/i18n/pt-BR.ts             |   2 +
 templates/clips/app/i18n/zh-CN.ts             |   2 +
 templates/clips/app/i18n/zh-TW.ts             |   2 +
 templates/clips/app/lib/command-events.ts     |   7 +
 .../clips/app/root-search-command.test.ts     |  20 +-
 templates/clips/app/root.tsx                  |  88 +--
 templates/clips/app/routes/_app.dictate.tsx   |  26 +-
 .../clips/app/routes/_app.library._index.tsx  |  32 +-
 .../routes/_app.library.folder.$folderId.tsx  |   2 +
 .../clips/app/routes/_app.meetings._index.tsx |  19 +-
 .../app/routes/_app.r.$recordingId.test.ts    |  33 +-
 .../clips/app/routes/_app.r.$recordingId.tsx  |  54 +-
 .../_app.spaces.$spaceId.folder.$folderId.tsx |   4 +
 .../clips/app/routes/_app.spaces.$spaceId.tsx |   2 +
 .../clips/app/routes/_app.spaces._index.tsx   |  56 +-
 templates/clips/app/routes/bug-report.tsx     | 199 +-----
 .../app/routes/share-auth-loading.test.ts     |  18 +-
 templates/clips/app/routes/share.$shareId.tsx | 261 +++----
 ...08-comments-and-desktop-window-controls.md |   5 +
 .../2026-09-08-global-command-search.md       |   5 +
 .../data/pglite.agent-native-pglite.lock      |   1 +
 templates/clips/desktop/src-tauri/src/lib.rs  |  28 +-
 templates/clips/desktop/src-tauri/src/util.rs |  10 +-
 templates/clips/desktop/src/styles.css        |   7 +-
 63 files changed, 2629 insertions(+), 925 deletions(-)
 create mode 100644 .changeset/quiet-command-menu-shortcut.md
 create mode 100644 docs/command-menu-architecture.md
 create mode 100644 templates/clips/actions/search-dictations.ts
 create mode 100644 templates/clips/app/bug-report-modal.test.ts
 create mode 100644 templates/clips/app/components/bug-report/bug-report-dialog.tsx
 create mode 100644 templates/clips/app/components/bug-report/bug-report-form.tsx
 create mode 100644 templates/clips/app/components/clips-command-menu.tsx
 create mode 100644 templates/clips/app/components/library/folder-card.tsx
 create mode 100644 templates/clips/app/components/library/library-primary-actions.tsx
 create mode 100644 templates/clips/app/components/library/sidebar-feedback-button.tsx
 create mode 100644 templates/clips/app/hooks/use-command-search.ts
 create mode 100644 templates/clips/app/lib/command-events.ts
 create mode 100644 templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md
 create mode 100644 templates/clips/changelog/2026-09-08-global-command-search.md
 create mode 100644 templates/clips/data/pglite.agent-native-pglite.lock

diff --git a/.changeset/quiet-command-menu-shortcut.md b/.changeset/quiet-command-menu-shortcut.md
new file mode 100644
index 00000000000..fd262130983
--- /dev/null
+++ b/.changeset/quiet-command-menu-shortcut.md
@@ -0,0 +1,5 @@
+---
+"@agent-native/core": patch
+---
+
+Prevent Cmd/Ctrl+K from reaching an outer host while a command menu input is focused.
diff --git a/docs/command-menu-architecture.md b/docs/command-menu-architecture.md
new file mode 100644
index 00000000000..31b47d91dab
--- /dev/null
+++ b/docs/command-menu-architecture.md
@@ -0,0 +1,123 @@
+# Shared command-menu architecture
+
+Status: planned follow-up. Do not treat the current app-specific command menus
+as the long-term architecture.
+
+## Decision
+
+Use `cmdk` as the interaction engine, keep the command-menu shell and registry
+contract in shared Agent-Native code, and let each app register its own commands
+and searchable resources.
+
+The shared layer should own the behavior that must be identical everywhere:
+
+- Cmd/Ctrl+K opening, toggling, focus, and dismissal
+- the dialog, input, list, group, item, shortcut, loading, and empty states
+- keyboard navigation, selection, and accessible labeling
+- command ranking and the boundary between static commands and async results
+- common framework commands such as theme, agent, settings, changelog, and
+  diagnostics
+
+Apps should own only their domain knowledge:
+
+- localized command labels and descriptions
+- icons, keywords, shortcuts, and visibility rules
+- route-aware context and permission checks
+- command handlers that call the app's existing action/navigation surfaces
+- async search providers for resources such as recordings, meetings,
+  dictations, documents, or CRM records
+
+The shared layer must not become a universal data index or import app routes.
+It coordinates registered providers; it does not invent domain results.
+
+## Proposed contract
+
+The core package should expose a registry/provider API along these lines:
+
+```ts
+type CommandContext = {
+  pathname: string;
+  searchParams: URLSearchParams;
+  appId: string;
+  organizationId?: string;
+};
+
+type CommandDefinition = {
+  id: string;
+  group: string;
+  label: string;
+  description?: string;
+  keywords?: string[];
+  shortcut?: string;
+  icon?: React.ComponentType<{ size?: number; className?: string }>;
+  availableWhen?: (context: CommandContext) => boolean;
+  run: (context: CommandContext) => void | Promise<void>;
+};
+
+type CommandSearchProvider = {
+  id: string;
+  search: (
+    query: string,
+    context: CommandContext,
+  ) => Promise<CommandDefinition[]>;
+};
+```
+
+The final names and exact shape should follow the existing core type conventions.
+The important boundary is that the menu renders descriptors and provider
+results instead of each app manually rebuilding the palette's React tree and
+filtering its children.
+
+## Current state
+
+The repository already has the beginnings of this split:
+
+- `packages/toolkit/src/ui/command.tsx` wraps the `cmdk` primitive.
+- `packages/core/src/client/CommandMenu.tsx` owns the shared dialog shell,
+  keyboard hook, framework entries, and composable group/item surface.
+- `templates/clips/app/components/clips-command-menu.tsx` currently owns the
+  Clips registry, route context, navigation handlers, and recording/meeting/
+  dictation search providers.
+
+The remaining problem is that app registries are still hand-authored JSX. The
+same pattern exists in other templates, so improvements currently require
+duplicated work and can drift in behavior.
+
+## Migration plan
+
+1. Add the shared descriptor/provider types and registry context in core.
+2. Make the shared `CommandMenu` render registered descriptors while keeping
+   its existing composable API temporarily for compatibility.
+3. Move common framework commands into the shared registry.
+4. Convert Clips from `ClipsCommandMenu` JSX groups to registered static
+   commands plus registered search providers. Preserve its route-aware
+   commands and action-backed searches.
+5. Convert the other app menus (including CRM, Forms, Dispatch, and Macros) to
+   the same registration surface.
+6. Remove duplicate per-app shortcut listeners and bespoke static filtering
+   after all consumers migrate.
+7. Add shared contract tests for registration, availability, ranking, async
+   loading, stale-result suppression, keyboard selection, and contextual
+   commands; retain app tests for domain-specific handlers and routes.
+
+## Acceptance criteria
+
+- An app can add commands and search providers without copying the command
+  dialog or keyboard handling.
+- A command is hidden when its app-provided context or permission predicate
+  says it is unavailable.
+- Search results can navigate through the app's existing client routing and
+  actions without raw API calls or a second data model.
+- Async providers show loading and empty states consistently and cannot display
+  stale results from a previous query or route.
+- Cmd/Ctrl+K opens exactly one menu in a host containing multiple Agent-Native
+  surfaces.
+- App-local commands remain localized and can link to the current resource,
+  folder, meeting, or dictation context.
+
+## Non-goals
+
+- Replacing `cmdk` with a second command-palette dependency.
+- Putting app route definitions or resource-specific SQL in core.
+- Creating one global search endpoint that every app must use.
+- Refactoring the current Clips menu as part of an unrelated UX-fixes change.
diff --git a/packages/core/src/client/CommandMenu.spec.tsx b/packages/core/src/client/CommandMenu.spec.tsx
index 8cf901e3e9a..8d70f4695ba 100644
--- a/packages/core/src/client/CommandMenu.spec.tsx
+++ b/packages/core/src/client/CommandMenu.spec.tsx
@@ -386,7 +386,7 @@ describe("CommandMenu docs group", () => {
     expect(document.body.textContent).toContain("open");
   });
 
-  it("does not open from native select controls when contenteditable is allowed", () => {
+  it("claims Cmd+K from native controls without opening", () => {
     function ShortcutHarness() {
       const [open, setOpen] = React.useState(false);
       useCommandMenuShortcut(() => setOpen(true), {
@@ -408,17 +408,18 @@ describe("CommandMenu docs group", () => {
 
     const select = document.querySelector("select");
     expect(select).toBeTruthy();
+    const event = new KeyboardEvent("keydown", {
+      key: "k",
+      metaKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
     act(() => {
-      select!.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: "k",
-          metaKey: true,
-          bubbles: true,
-        }),
-      );
+      select!.dispatchEvent(event);
     });
 
     expect(document.body.textContent).toContain("closed");
+    expect(event.defaultPrevented).toBe(true);
   });
 
   it("opens from contenteditable before editor handlers stop propagation", () => {
diff --git a/packages/core/src/client/CommandMenu.tsx b/packages/core/src/client/CommandMenu.tsx
index 8771d6e3f66..0e834c72316 100644
--- a/packages/core/src/client/CommandMenu.tsx
+++ b/packages/core/src/client/CommandMenu.tsx
@@ -667,6 +667,11 @@ export function useCommandMenuShortcut(
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        // Claim the shortcut before checking the focused element so an outer
+        // host cannot open its own command menu while this one is focused.
+        e.preventDefault();
+        e.stopPropagation();
+
         // Don't trigger if user is typing in a native form control.
         const target = e.target instanceof HTMLElement ? e.target : null;
         const isContentEditable = target?.isContentEditable;
@@ -678,7 +683,6 @@ export function useCommandMenuShortcut(
         ) {
           return;
         }
-        e.preventDefault();
         onOpen();
       }
     };
diff --git a/templates/clips/.agents/skills/dictate/SKILL.md b/templates/clips/.agents/skills/dictate/SKILL.md
index ec6a1ef48d1..aff655a1475 100644
--- a/templates/clips/.agents/skills/dictate/SKILL.md
+++ b/templates/clips/.agents/skills/dictate/SKILL.md
@@ -40,6 +40,7 @@ Dictate captures **mic only** — system audio is never recorded for dictations.
 | Action               | What it does                                                                                |
 | -------------------- | ------------------------------------------------------------------------------------------- |
 | `list-dictations`    | Past dictations, scoped via `accessFilter`                                                  |
+| `search-dictations`  | Search native or cleaned dictation text, with matching snippets                            |
 | `cleanup-dictation`  | Polish a single dictation's text (writes `cleanedText`)                                     |
 | `cleanup-transcript` | Shared cleanup pipeline (also used by Clips + Meetings); resolves credentials per the order below |
 
diff --git a/templates/clips/actions/list-recordings.test.ts b/templates/clips/actions/list-recordings.test.ts
index 99ab37c18e1..34c6216037e 100644
--- a/templates/clips/actions/list-recordings.test.ts
+++ b/templates/clips/actions/list-recordings.test.ts
@@ -104,6 +104,7 @@ vi.mock("../server/db/index.js", () => ({
       id: "recordings.id",
       ownerEmail: "recordings.ownerEmail",
       organizationId: "recordings.organizationId",
+      folderId: "recordings.folderId",
       archivedAt: "recordings.archivedAt",
       trashedAt: "recordings.trashedAt",
     },
@@ -287,3 +288,51 @@ describe("list-recordings shared view", () => {
     );
   });
 });
+
+describe("list-recordings folder scope", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("excludes foldered recordings from the library root", async () => {
+    const parsed = action.schema.parse({
+      view: "library",
+      countOnly: true,
+    });
+
+    await action.run(parsed);
+
+    expect(mockCountWhere).toHaveBeenCalledWith(
+      expect.objectContaining({
+        conditions: expect.arrayContaining([
+          {
+            kind: "is-null",
+            column: "recordings.folderId",
+          },
+        ]),
+      }),
+    );
+  });
+
+  it("keeps foldered recordings scoped to the requested folder", async () => {
+    const parsed = action.schema.parse({
+      view: "library",
+      folderId: "folder_1",
+      countOnly: true,
+    });
+
+    await action.run(parsed);
+
+    expect(mockCountWhere).toHaveBeenCalledWith(
+      expect.objectContaining({
+        conditions: expect.arrayContaining([
+          {
+            kind: "eq",
+            column: "recordings.folderId",
+            value: "folder_1",
+          },
+        ]),
+      }),
+    );
+  });
+});
diff --git a/templates/clips/actions/list-recordings.ts b/templates/clips/actions/list-recordings.ts
index 90fefe15054..05377a3f0b9 100644
--- a/templates/clips/actions/list-recordings.ts
+++ b/templates/clips/actions/list-recordings.ts
@@ -228,6 +228,8 @@ export default defineAction({
     if (args.view === "library" || args.view === "space") {
       if (args.folderId !== undefined && args.folderId !== null) {
         whereClauses.push(eq(schema.recordings.folderId, args.folderId));
+      } else {
+        whereClauses.push(isNull(schema.recordings.folderId));
       }
     }
 
diff --git a/templates/clips/actions/search-dictations.ts b/templates/clips/actions/search-dictations.ts
new file mode 100644
index 00000000000..ff9b23e846a
--- /dev/null
+++ b/templates/clips/actions/search-dictations.ts
@@ -0,0 +1,81 @@
+/** Search dictation history by its native or cleaned transcript text. */
+
+import { defineAction } from "@agent-native/core/action";
+import { buildDeepLink } from "@agent-native/core/server";
+import { accessFilter } from "@agent-native/core/sharing";
+import { and, desc, sql } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import { buildCaseInsensitiveSearchPattern } from "./search-recordings-utils.js";
+
+const SNIPPET_RADIUS = 80;
+
+function buildSnippet(text: string, query: string): string | null {
+  const index = text.toLowerCase().indexOf(query.toLowerCase());
+  if (index === -1) return null;
+  const start = Math.max(0, index - SNIPPET_RADIUS);
+  const end = Math.min(text.length, index + query.length + SNIPPET_RADIUS);
+  return `${start > 0 ? "…" : ""}${text.slice(start, end).replace(/\s+/g, " ").trim()}${end < text.length ? "…" : ""}`;
+}
+
+export default defineAction({
+  description:
+    "Search dictations by their native or cleaned transcript text. Results are scoped to dictations the current user can access and include a short matching snippet.",
+  schema: z.object({
+    query: z.string().min(1).describe("Search text"),
+    limit: z.coerce.number().int().min(1).max(100).default(30),
+  }),
+  http: { method: "GET" },
+  run: async (args) => {
+    const db = getDb();
+    const pattern = buildCaseInsensitiveSearchPattern(args.query);
+    const rows = await db
+      .select({
+        id: schema.dictations.id,
+        fullText: schema.dictations.fullText,
+        cleanedText: schema.dictations.cleanedText,
+        durationMs: schema.dictations.durationMs,
+        source: schema.dictations.source,
+        targetApp: schema.dictations.targetApp,
+        startedAt: schema.dictations.startedAt,
+        createdAt: schema.dictations.createdAt,
+      })
+      .from(schema.dictations)
+      .where(
+        and(
+          accessFilter(schema.dictations, schema.dictationShares),
+          sql`(lower(${schema.dictations.fullText}) LIKE ${pattern} ESCAPE '\\' OR lower(coalesce(${schema.dictations.cleanedText}, '')) LIKE ${pattern} ESCAPE '\\')`,
+        ),
+      )
+      .orderBy(desc(schema.dictations.startedAt))
+      .limit(args.limit);
+
+    return {
+      query: args.query,
+      dictations: rows.map((dictation) => ({
+        ...dictation,
+        snippet:
+          buildSnippet(dictation.cleanedText ?? "", args.query) ??
+          buildSnippet(dictation.fullText, args.query),
+      })),
+    };
+  },
+  link: ({ result }) => {
+    if (!result || typeof result !== "object") return null;
+    const dictations = (result as { dictations?: unknown }).dictations;
+    if (!Array.isArray(dictations) || dictations.length === 0) return null;
+    const first = dictations[0] as { id?: string };
+    if (!first.id) return null;
+    return {
+      url: buildDeepLink({
+        app: "clips",
+        view: "dictate",
+        params: { dictationId: first.id },
+        to: "/dictate",
+      }),
+      label: "Open Dictate in Clips",
+      view: "dictate",
+    };
+  },
+});
diff --git a/templates/clips/app/bug-report-modal.test.ts b/templates/clips/app/bug-report-modal.test.ts
new file mode 100644
index 00000000000..6f938f095e5
--- /dev/null
+++ b/templates/clips/app/bug-report-modal.test.ts
@@ -0,0 +1,29 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+describe("Clips bug-report entry points", () => {
+  it("opens the shared dialog without navigating away from the app shell", () => {
+    const rootSource = readFileSync(
+      new URL("./root.tsx", import.meta.url),
+      "utf8",
+    );
+    const dialogSource = readFileSync(
+      new URL("./components/bug-report/bug-report-dialog.tsx", import.meta.url),
+      "utf8",
+    );
+    const feedbackSource = readFileSync(
+      new URL(
+        "./components/library/sidebar-feedback-button.tsx",
+        import.meta.url,
+      ),
+      "utf8",
+    );
+
+    expect(rootSource).toContain("<BugReportDialog />");
+    expect(dialogSource).toContain("OPEN_BUG_REPORT_EVENT");
+    expect(dialogSource).toContain("<DialogContent");
+    expect(feedbackSource).toContain("openBugReportDialog");
+    expect(feedbackSource).not.toContain('to="/bug-report"');
+  });
+});
diff --git a/templates/clips/app/components/bug-report/bug-report-dialog.tsx b/templates/clips/app/components/bug-report/bug-report-dialog.tsx
new file mode 100644
index 00000000000..19f10800506
--- /dev/null
+++ b/templates/clips/app/components/bug-report/bug-report-dialog.tsx
@@ -0,0 +1,60 @@
+import { useT } from "@agent-native/core/client/i18n";
+import type { BugReportContext } from "@shared/bug-report";
+import { useEffect, useState } from "react";
+
+import { BugReportForm } from "@/components/bug-report/bug-report-form";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { OPEN_BUG_REPORT_EVENT } from "@/lib/command-events";
+
+function currentBugReportContext(): BugReportContext {
+  return {
+    projectId: null,
+    title: null,
+    description: null,
+    severity: "normal",
+    sourceUrl: window.location.href,
+    pageTitle: document.title || null,
+    appVersion: null,
+    environment: null,
+    reporterEmail: null,
+    reporterName: null,
+    reporterId: null,
+    metadata: null,
+    returnUrl: window.location.href,
+  };
+}
+
+export function BugReportDialog() {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const [initialContext, setInitialContext] = useState<BugReportContext | null>(
+    null,
+  );
+
+  useEffect(() => {
+    const handleOpen = () => {
+      setInitialContext(currentBugReportContext());
+      setOpen(true);
+    };
+    window.addEventListener(OPEN_BUG_REPORT_EVENT, handleOpen);
+    return () => window.removeEventListener(OPEN_BUG_REPORT_EVENT, handleOpen);
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="w-[calc(100%-2rem)] max-w-2xl gap-0 p-0">
+        <DialogTitle className="sr-only">
+          {t("bugReportRoute.title")}
+        </DialogTitle>
+        {open ? (
+          <div className="max-h-[min(760px,calc(100vh-2rem))] overflow-y-auto p-5 sm:p-6">
+            <BugReportForm
+              initialContext={initialContext}
+              onRecordingStarted={() => setOpen(false)}
+            />
+          </div>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/templates/clips/app/components/bug-report/bug-report-form.tsx b/templates/clips/app/components/bug-report/bug-report-form.tsx
new file mode 100644
index 00000000000..cc655a63046
--- /dev/null
+++ b/templates/clips/app/components/bug-report/bug-report-form.tsx
@@ -0,0 +1,209 @@
+import { appBasePath } from "@agent-native/core/client/api-path";
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  bugReportContextToSearchParams,
+  type BugReportContext,
+  type BugReportSeverity,
+} from "@shared/bug-report";
+import { IconBug, IconShieldCheck } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+interface BugReportFormProps {
+  className?: string;
+  initialContext?: BugReportContext | null;
+  onRecorderOpened?: (recorderWindow: Window | null) => void;
+  onRecordingStarted?: () => void;
+}
+
+function openRecorder(url: string): Window | null {
+  const opened = window.open(
+    url,
+    "agent-native-clips-bug-report",
+    "popup,width=1120,height=820",
+  );
+  if (!opened) {
+    window.location.href = url;
+    return null;
+  }
+  opened.focus();
+  return opened;
+}
+
+export function BugReportForm({
+  className,
+  initialContext,
+  onRecorderOpened,
+  onRecordingStarted,
+}: BugReportFormProps) {
+  const t = useT();
+  const [title, setTitle] = useState(initialContext?.title ?? "");
+  const [description, setDescription] = useState(
+    initialContext?.description ?? "",
+  );
+  const [reporterEmail, setReporterEmail] = useState(
+    initialContext?.reporterEmail ?? "",
+  );
+  const [severity, setSeverity] = useState<BugReportSeverity>(
+    initialContext?.severity ?? "normal",
+  );
+  const [referrer, setReferrer] = useState<string | null>(null);
+
+  useEffect(() => {
+    setReferrer(document.referrer || null);
+  }, []);
+
+  const sourceUrl = initialContext?.sourceUrl ?? referrer;
+  const pageTitle = initialContext?.pageTitle ?? null;
+  const sourceLabel =
+    pageTitle || sourceUrl || t("bugReportRoute.sourceUnknown");
+
+  const startRecording = () => {
+    const context: BugReportContext = {
+      projectId: initialContext?.projectId ?? null,
+      title: title.trim() || initialContext?.title || null,
+      description: description.trim() || initialContext?.description || null,
+      severity,
+      sourceUrl,
+      pageTitle,
+      appVersion: initialContext?.appVersion ?? null,
+      environment: initialContext?.environment ?? null,
+      reporterEmail:
+        reporterEmail.trim() || initialContext?.reporterEmail || null,
+      reporterName: initialContext?.reporterName ?? null,
+      reporterId: initialContext?.reporterId ?? null,
+      metadata: initialContext?.metadata ?? null,
+      returnUrl: initialContext?.returnUrl ?? sourceUrl,
+    };
+    const params = bugReportContextToSearchParams(context);
+    params.set("intent", "bug-report");
+    params.set("mode", "screen");
+    params.set("surface", "browser");
+    const recorderWindow = openRecorder(
+      `${appBasePath()}/record?${params.toString()}`,
+    );
+    onRecorderOpened?.(recorderWindow);
+    onRecordingStarted?.();
+  };
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div className="mb-5 flex items-start gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
+          <IconBug size={20} />
+        </div>
+        <div className="min-w-0">
+          <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">
+            {t("bugReportRoute.eyebrow")}
+          </p>
+          <h2 className="mt-1 text-xl font-semibold leading-tight">
+            {t("bugReportRoute.title")}
+          </h2>
+          <p className="mt-2 text-sm leading-6 text-muted-foreground">
+            {t("bugReportRoute.description")}
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="bug-title">
+            {t("bugReportRoute.issueTitleLabel")}
+          </Label>
+          <Input
+            id="bug-title"
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder={t("bugReportRoute.issueTitlePlaceholder")}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="bug-details">
+            {t("bugReportRoute.detailsLabel")}
+          </Label>
+          <Textarea
+            id="bug-details"
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+            placeholder={t("bugReportRoute.detailsPlaceholder")}
+            className="min-h-24 resize-none"
+          />
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-[1fr_180px]">
+          <div className="space-y-2">
+            <Label htmlFor="bug-email">{t("bugReportRoute.emailLabel")}</Label>
+            <Input
+              id="bug-email"
+              type="email"
+              value={reporterEmail}
+              onChange={(event) => setReporterEmail(event.target.value)}
+              placeholder={t("bugReportRoute.emailPlaceholder")}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>{t("bugReportRoute.severityLabel")}</Label>
+            <Select
+              value={severity}
+              onValueChange={(value) => setSeverity(value as BugReportSeverity)}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="low">
+                  {t("bugReportRoute.severityLow")}
+                </SelectItem>
+                <SelectItem value="normal">
+                  {t("bugReportRoute.severityNormal")}
+                </SelectItem>
+                <SelectItem value="high">
+                  {t("bugReportRoute.severityHigh")}
+                </SelectItem>
+                <SelectItem value="urgent">
+                  {t("bugReportRoute.severityUrgent")}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="rounded-md border bg-muted/40 px-3 py-2">
+          <p className="text-xs font-medium text-muted-foreground">
+            {t("bugReportRoute.sourceLabel")}
+          </p>
+          <p
+            className={cn(
+              "mt-1 truncate text-sm",
+              !sourceUrl && "text-muted-foreground",
+            )}
+          >
+            {sourceLabel}
+          </p>
+        </div>
+
+        <Button className="h-11 w-full" onClick={startRecording}>
+          {t("bugReportRoute.startRecording")}
+        </Button>
+      </div>
+
+      <div className="mt-5 flex items-start gap-2 rounded-md bg-muted/50 p-3 text-xs leading-5 text-muted-foreground">
+        <IconShieldCheck size={16} className="mt-0.5 shrink-0" />
+        <p>{t("bugReportRoute.privacyNote")}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/templates/clips/app/components/clips-command-menu.tsx b/templates/clips/app/components/clips-command-menu.tsx
new file mode 100644
index 00000000000..eddffb2d1d4
--- /dev/null
+++ b/templates/clips/app/components/clips-command-menu.tsx
@@ -0,0 +1,647 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  CommandMenu,
+  useCommandMenuShortcut,
+} from "@agent-native/core/client/navigation";
+import { useOrgRole } from "@agent-native/core/client/org";
+import { docsUrl } from "@agent-native/core/shared";
+import {
+  IconArchive,
+  IconCalendar,
+  IconFileText,
+  IconFolder,
+  IconFolderPlus,
+  IconHierarchy2,
+  IconMessage,
+  IconMicrophone2,
+  IconMoon,
+  IconSearch,
+  IconSettings,
+  IconSun,
+  IconTrash,
+  IconUsersGroup,
+  IconVideo,
+  IconVideoPlus,
+} from "@tabler/icons-react";
+import { useTheme } from "next-themes";
+import { type ComponentProps, useCallback, useMemo } from "react";
+import { useLocation, useNavigate } from "react-router";
+
+import {
+  useDictationCommandSearch,
+  useMeetingCommandSearch,
+  type DictationCommandSearchHit,
+  type MeetingCommandSearchHit,
+} from "@/hooks/use-command-search";
+import {
+  useFolders,
+  useOrganizations,
+  useRecordingSearch,
+  useSpaces,
+  type SearchHit,
+} from "@/hooks/use-library";
+import {
+  OPEN_CREATE_FOLDER_EVENT,
+  OPEN_CREATE_SPACE_EVENT,
+  openBugReportDialog,
+} from "@/lib/command-events";
+import { SEARCH_FOCUS_PATH } from "@/lib/search-focus";
+
+import changelog from "../../CHANGELOG.md?raw";
+
+interface ClipsCommandMenuProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+type CommandRouteContext =
+  | { kind: "recording"; recordingId: string }
+  | { kind: "meeting"; meetingId: string }
+  | { kind: "folder"; folderId: string; spaceId?: string }
+  | { kind: "space"; spaceId: string }
+  | {
+      kind:
+        | "library"
+        | "shared"
+        | "spaces"
+        | "meetings"
+        | "dictate"
+        | "archive"
+        | "trash"
+        | "settings"
+        | "record"
+        | "other";
+    };
+
+function commandRouteContext(pathname: string): CommandRouteContext {
+  const recording = pathname.match(/^\/r\/([^/]+)\/?$/);
+  if (recording) return { kind: "recording", recordingId: recording[1] };
+
+  const spaceFolder = pathname.match(/^\/spaces\/([^/]+)\/folder\/([^/]+)\/?$/);
+  if (spaceFolder) {
+    return {
+      kind: "folder",
+      spaceId: spaceFolder[1],
+      folderId: spaceFolder[2],
+    };
+  }
+
+  const libraryFolder = pathname.match(/^\/library\/folder\/([^/]+)\/?$/);
+  if (libraryFolder) return { kind: "folder", folderId: libraryFolder[1] };
+
+  const space = pathname.match(/^\/spaces\/([^/]+)\/?$/);
+  if (space) return { kind: "space", spaceId: space[1] };
+
+  if (pathname === "/library") return { kind: "library" };
+  if (pathname === "/shared") return { kind: "shared" };
+  if (pathname === "/spaces") return { kind: "spaces" };
+  if (pathname === "/meetings") return { kind: "meetings" };
+  if (pathname.startsWith("/meetings/")) {
+    return { kind: "meeting", meetingId: pathname.slice("/meetings/".length) };
+  }
+  if (pathname === "/dictate") return { kind: "dictate" };
+  if (pathname === "/archive") return { kind: "archive" };
+  if (pathname === "/trash") return { kind: "trash" };
+  if (pathname === "/record") return { kind: "record" };
+  if (pathname.startsWith("/settings")) return { kind: "settings" };
+  return { kind: "other" };
+}
+
+function withQuery(pathname: string, entries: Record<string, string>) {
+  const params = new URLSearchParams(entries);
+  const query = params.toString();
+  return query ? `${pathname}?${query}` : pathname;
+}
+
+function openCreateFolder() {
+  window.dispatchEvent(new Event(OPEN_CREATE_FOLDER_EVENT));
+}
+
+function openCreateSpace() {
+  window.dispatchEvent(new Event(OPEN_CREATE_SPACE_EVENT));
+}
+
+function formatSearchSnippet(text: string | null | undefined) {
+  return text?.replace(/\s+/g, " ").trim() || null;
+}
+
+function RecordingSearchResults({
+  results,
+  navigate,
+  t,
+}: {
+  results: SearchHit[];
+  navigate: ReturnType<typeof useNavigate>;
+  t: ReturnType<typeof useT>;
+}) {
+  if (results.length === 0) return null;
+  return (
+    <CommandMenu.Group heading={t("navigation.recordings")}>
+      {results.slice(0, 8).map((hit) => (
+        <CommandMenu.Item
+          key={`recording:${hit.id}:${hit.matchPanel ?? "metadata"}`}
+          onSelect={() => {
+            const params: Record<string, string> = {};
+            if (hit.matchPanel) params.panel = hit.matchPanel;
+            if (
+              typeof hit.matchMs === "number" &&
+              Number.isFinite(hit.matchMs)
+            ) {
+              params.t = Math.max(0, Math.floor(hit.matchMs / 1000)).toString();
+            }
+            void navigate(withQuery(`/r/${hit.id}`, params));
+          }}
+          keywords={[
+            hit.title,
+            hit.description,
+            hit.snippet ?? "",
+            "recording",
+            "clip",
+          ]}
+          className="items-start py-2"
+        >
+          <IconVideo className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          <span className="min-w-0 flex-1">
+            <span className="block truncate font-medium">{hit.title}</span>
+            {formatSearchSnippet(hit.snippet ?? hit.description) ? (
+              <span className="mt-0.5 block line-clamp-2 text-xs leading-snug text-muted-foreground">
+                {formatSearchSnippet(hit.snippet ?? hit.description)}
+              </span>
+            ) : null}
+          </span>
+          {hit.matchPanel ? (
+            <span className="shrink-0 text-xs text-muted-foreground">
+              {hit.matchPanel === "comments"
+                ? t("sharePage.comments")
+                : t("recordingPage.transcript")}
+            </span>
+          ) : null}
+        </CommandMenu.Item>
+      ))}
+    </CommandMenu.Group>
+  );
+}
+
+function MeetingSearchResults({
+  results,
+  navigate,
+  t,
+}: {
+  results: MeetingCommandSearchHit[];
+  navigate: ReturnType<typeof useNavigate>;
+  t: ReturnType<typeof useT>;
+}) {
+  if (results.length === 0) return null;
+  return (
+    <CommandMenu.Group heading={t("navigation.meetings")}>
+      {results.map((meeting) => (
+        <CommandMenu.Item
+          key={`meeting:${meeting.id}`}
+          onSelect={() => void navigate(`/meetings/${meeting.id}`)}
+          keywords={[meeting.title, meeting.snippet ?? "", "meeting", "call"]}
+          className="items-start py-2"
+        >
+          <IconCalendar className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          <span className="min-w-0 flex-1">
+            <span className="block truncate font-medium">{meeting.title}</span>
+            {formatSearchSnippet(meeting.snippet) ? (
+              <span className="mt-0.5 block line-clamp-2 text-xs leading-snug text-muted-foreground">
+                {formatSearchSnippet(meeting.snippet)}
+              </span>
+            ) : null}
+          </span>
+        </CommandMenu.Item>
+      ))}
+    </CommandMenu.Group>
+  );
+}
+
+function DictationSearchResults({
+  results,
+  navigate,
+  t,
+}: {
+  results: DictationCommandSearchHit[];
+  navigate: ReturnType<typeof useNavigate>;
+  t: ReturnType<typeof useT>;
+}) {
+  if (results.length === 0) return null;
+  return (
+    <CommandMenu.Group heading={t("navigation.dictate")}>
+      {results.map((dictation) => (
+        <CommandMenu.Item
+          key={`dictation:${dictation.id}`}
+          onSelect={() =>
+            void navigate(withQuery("/dictate", { dictationId: dictation.id }))
+          }
+          keywords={[
+            dictation.fullText,
+            dictation.cleanedText ?? "",
+            "dictation",
+            "voice",
+          ]}
+          className="items-start py-2"
+        >
+          <IconMicrophone2 className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          <span className="min-w-0 flex-1">
+            <span className="block line-clamp-2 font-medium">
+              {formatSearchSnippet(dictation.snippet) ?? dictation.fullText}
+            </span>
+            {dictation.targetApp ? (
+              <span className="mt-0.5 block truncate text-xs text-muted-foreground">
+                {dictation.targetApp}
+              </span>
+            ) : null}
+          </span>
+        </CommandMenu.Item>
+      ))}
+    </CommandMenu.Group>
+  );
+}
+
+function LocalSearchResults({
+  query,
+  folders,
+  spaces,
+  navigate,
+  t,
+}: {
+  query: string;
+  folders: Array<{ id: string; name: string; spaceId?: string | null }>;
+  spaces: Array<{ id: string; name: string }>;
+  navigate: ReturnType<typeof useNavigate>;
+  t: ReturnType<typeof useT>;
+}) {
+  const needle = query.trim().toLowerCase();
+  if (needle.length < 2) return null;
+  const matchingFolders = folders
+    .filter((folder) => folder.name.toLowerCase().includes(needle))
+    .slice(0, 8);
+  const matchingSpaces = spaces
+    .filter((space) => space.name.toLowerCase().includes(needle))
+    .slice(0, 8);
+
+  return (
+    <>
+      {matchingFolders.length > 0 && (
+        <CommandMenu.Group heading={t("navigation.folders")}>
+          {matchingFolders.map((folder) => (
+            <CommandMenu.Item
+              key={`folder:${folder.id}`}
+              onSelect={() =>
+                void navigate(
+                  folder.spaceId
+                    ? `/spaces/${folder.spaceId}/folder/${folder.id}`
+                    : `/library/folder/${folder.id}`,
+                )
+              }
+              keywords={[folder.name, "folder"]}
+            >
+              <IconFolder className="size-4 text-muted-foreground" />
+              <span className="truncate">{folder.name}</span>
+            </CommandMenu.Item>
+          ))}
+        </CommandMenu.Group>
+      )}
+      {matchingSpaces.length > 0 && (
+        <CommandMenu.Group heading={t("navigation.spaces")}>
+          {matchingSpaces.map((space) => (
+            <CommandMenu.Item
+              key={`space:${space.id}`}
+              onSelect={() => void navigate(`/spaces/${space.id}`)}
+              keywords={[space.name, "space"]}
+            >
+              <IconUsersGroup className="size-4 text-muted-foreground" />
+              <span className="truncate">{space.name}</span>
+            </CommandMenu.Item>
+          ))}
+        </CommandMenu.Group>
+      )}
+    </>
+  );
+}
+
+function ClipsCommandSearchResults({
+  search,
+  folders,
+  spaces,
+  navigate,
+  t,
+}: {
+  search: string;
+  folders: Array<{ id: string; name: string; spaceId?: string | null }>;
+  spaces: Array<{ id: string; name: string }>;
+  navigate: ReturnType<typeof useNavigate>;
+  t: ReturnType<typeof useT>;
+}) {
+  const recordingSearch = useRecordingSearch(search.trim());
+  const meetingSearch = useMeetingCommandSearch(search);
+  const dictationSearch = useDictationCommandSearch(search);
+
+  if (search.trim().length < 2) return null;
+  return (
+    <>
+      <LocalSearchResults
+        query={search}
+        folders={folders}
+        spaces={spaces}
+        navigate={navigate}
+        t={t}
+      />
+      <RecordingSearchResults
+        results={recordingSearch.data?.results ?? []}
+        navigate={navigate}
+        t={t}
+      />
+      <MeetingSearchResults
+        results={meetingSearch.data?.meetings ?? []}
+        navigate={navigate}
+        t={t}
+      />
+      <DictationSearchResults
+        results={dictationSearch.data?.dictations ?? []}
+        navigate={navigate}
+        t={t}
+      />
+    </>
+  );
+}
+
+function ThemeToggleItem() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const t = useT();
+  const isDark = resolvedTheme === "dark";
+  return (
+    <CommandMenu.Item
+      onSelect={() => setTheme(isDark ? "light" : "dark")}
+      keywords={["theme", "dark", "light", "mode"]}
+    >
+      {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
+      {t("root.toggleTheme")}
+    </CommandMenu.Item>
+  );
+}
+
+export function ClipsCommandMenu({
+  open,
+  onOpenChange,
+}: ClipsCommandMenuProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const t = useT();
+  const { canManageOrg } = useOrgRole();
+  const context = useMemo(
+    () => commandRouteContext(location.pathname),
+    [location.pathname],
+  );
+  const { data: organizations } = useOrganizations();
+  const organizationId =
+    organizations?.currentId ?? organizations?.organizations?.[0]?.id;
+  const { data: folderData } = useFolders(
+    { organizationId },
+    { enabled: open && Boolean(organizationId) },
+  );
+  const { data: spaceData } = useSpaces(organizationId, {
+    enabled: open && Boolean(organizationId),
+  });
+  const folders = (folderData?.folders ?? []) as Array<{
+    id: string;
+    name: string;
+    spaceId?: string | null;
+  }>;
+  const spaces = (spaceData?.spaces ?? []) as Array<{
+    id: string;
+    name: string;
+  }>;
+  const renderResults = useCallback(
+    (search: string) => (
+      <ClipsCommandSearchResults
+        search={search}
+        folders={folders}
+        spaces={spaces}
+        navigate={navigate}
+        t={t}
+      />
+    ),
+    [folders, navigate, spaces, t],
+  );
+
+  useCommandMenuShortcut(useCallback(() => onOpenChange(true), [onOpenChange]));
+
+  const scopedRecordPath =
+    context.kind === "folder"
+      ? withQuery("/record", {
+          folderId: context.folderId,
+          ...(context.spaceId ? { spaceId: context.spaceId } : {}),
+        })
+      : context.kind === "space"
+        ? withQuery("/record", { spaceId: context.spaceId })
+        : "/record";
+
+  return (
+    <CommandMenu
+      open={open}
+      onOpenChange={onOpenChange}
+      changelog={changelog}
+      changelogLabel={t("settings.whatsNew")}
+      changelogKey="clips"
+      renderResults={renderResults}
+    >
+      <CommandMenu.Group heading={t("root.commandActions")}>
+        {context.kind === "recording" && (
+          <>
+            <CommandMenu.Item
+              onSelect={() =>
+                void navigate(
+                  withQuery(`/r/${context.recordingId}`, {
+                    panel: "comments",
+                  }),
+                )
+              }
+              keywords={["comments", "discussion", "feedback", "recording"]}
+            >
+              <IconMessage size={16} />
+              {t("sharePage.comments")}
+            </CommandMenu.Item>
+            <CommandMenu.Item
+              onSelect={() =>
+                void navigate(
+                  withQuery(`/r/${context.recordingId}`, {
+                    panel: "transcript",
+                  }),
+                )
+              }
+              keywords={["transcript", "captions", "recording"]}
+            >
+              <IconFileText size={16} />
+              {t("recordingPage.transcript")}
+            </CommandMenu.Item>
+            <CommandMenu.Item
+              onSelect={() =>
+                void navigate(
+                  withQuery(`/r/${context.recordingId}`, { panel: "agent" }),
+                )
+              }
+              keywords={["agent", "ask", "recording"]}
+            >
+              <IconHierarchy2 size={16} />
+              {t("recordingPage.agent")}
+            </CommandMenu.Item>
+            <CommandMenu.Item
+              onSelect={() =>
+                void navigate(
+                  withQuery(`/r/${context.recordingId}`, {
+                    panel: "settings",
+                  }),
+                )
+              }
+              keywords={["settings", "recording"]}
+            >
+              <IconSettings size={16} />
+              {t("recordingPage.settings")}
+            </CommandMenu.Item>
+          </>
+        )}
+        {(context.kind === "library" ||
+          context.kind === "folder" ||
+          context.kind === "space") && (
+          <CommandMenu.Item
+            onSelect={() => void navigate(scopedRecordPath)}
+            keywords={["record", "recording", "capture", "new"]}
+          >
+            <IconVideoPlus size={16} />
+            {t("navigation.newRecording")}
+          </CommandMenu.Item>
+        )}
+        {(context.kind === "library" ||
+          context.kind === "folder" ||
+          context.kind === "space") && (
+          <CommandMenu.Item
+            onSelect={openCreateFolder}
+            keywords={["folder", "new", "create"]}
+          >
+            <IconFolderPlus size={16} />
+            {t("navigation.newFolder")}
+          </CommandMenu.Item>
+        )}
+        {context.kind === "spaces" && canManageOrg && (
+          <CommandMenu.Item
+            onSelect={openCreateSpace}
+            keywords={["space", "new", "create"]}
+          >
+            <IconUsersGroup size={16} />
+            {t("createSpaceDialog.newSpace")}
+          </CommandMenu.Item>
+        )}
+        <CommandMenu.Item
+          onSelect={() => void navigate(SEARCH_FOCUS_PATH)}
+          keywords={["search", "recordings", "meetings", "dictations", "find"]}
+        >
+          <IconSearch size={16} />
+          {t("root.commandSearch")}
+        </CommandMenu.Item>
+        <CommandMenu.Item
+          onSelect={() => void navigate("/settings/agent")}
+          keywords={["agent", "assistant", "chat"]}
+        >
+          <IconHierarchy2 size={16} />
+          {t("root.openAgent")}
+        </CommandMenu.Item>
+        <CommandMenu.Item
+          onSelect={openBugReportDialog}
+          keywords={["feedback", "bug", "report"]}
+        >
+          <IconMessage size={16} />
+          {t("bugReportRoute.sidebarCta")}
+        </CommandMenu.Item>
+      </CommandMenu.Group>
+
+      <CommandMenu.Group heading={t("navigation.library")}>
+        <CommandMenu.Item
+          onSelect={() => void navigate("/library")}
+          keywords={["library", "recordings"]}
+        >
+          <IconVideo size={16} />
+          {t("navigation.library")}
+          <CommandMenu.Shortcut>G L</CommandMenu.Shortcut>
+        </CommandMenu.Item>
+        <CommandMenu.Item
+          onSelect={() => void navigate("/shared")}
+          keywords={["shared", "clips"]}
+        >
+          <IconUsersGroup size={16} />
+          {t("navigation.sharedWithMe")}
+        </CommandMenu.Item>
+        <CommandMenu.Item
+          onSelect={() => void navigate("/spaces")}
+          keywords={["spaces", "team"]}
+        >
+          <IconUsersGroup size={16} />
+          {t("navigation.spaces")}
+          <CommandMenu.Shortcut>G S</CommandMenu.Shortcut>
+        </CommandMenu.Item>
+        <CommandMenu.Item
+          onSelect={() => void navigate("/meetings")}
+          keywords={["meetings", "calls"]}
+        >
+          <IconCalendar size={16} />
+          {t("navigation.meetings")}
+          <CommandMenu.Shortcut>G M</CommandMenu.Shortcut>
+        </CommandMenu.Item>
+        <CommandMenu.Item
+          onSelect={() => void navigate("/dictate")}
+          keywords={["dictate", "dictations", "voice"]}
+        >
+          <IconMicrophone2 size={16} />
+          {t("navigation.dictate")}
+          <CommandMenu.Shortcut>G D</CommandMenu.Shortcut>
+        </CommandMenu.Item>
+        <CommandMenu.Item
+          onSelect={() => void navigate("/archive")}
+          keywords={["archive"]}
+        >
+          <IconArchive size={16} />
+          {t("navigation.archive")}
+          <CommandMenu.Shortcut>G A</CommandMenu.Shortcut>
+        </CommandMenu.Item>
+        <CommandMenu.Item
+          onSelect={() => void navigate("/trash")}
+          keywords={["trash", "deleted"]}
+        >
+          <IconTrash size={16} />
+          {t("navigation.trash")}
+          <CommandMenu.Shortcut>G T</CommandMenu.Shortcut>
+        </CommandMenu.Item>
+      </CommandMenu.Group>
+
+      <CommandMenu.Group heading={t("root.commandAppearance")}>
+        <ThemeToggleItem />
+      </CommandMenu.Group>
+
+      <CommandMenu.DocsGroup docs={CLIPS_COMMAND_DOCS} />
+    </CommandMenu>
+  );
+}
+
+const CLIPS_COMMAND_DOCS = [
+  {
+    title: "Use the Chrome extension for browser logs", // i18n-ignore: documentation metadata is intentionally kept in the source language.
+    description:
+      "Record a browser tab with redacted console logs, JavaScript exceptions, and fetch/XHR diagnostics.",
+    href: docsUrl("template-clips-capture-everywhere", {
+      hash: "browser-logs-with-the-chrome-extension",
+    }),
+    keywords: [
+      "logs",
+      "browser logs",
+      "developer logs",
+      "console logs",
+      "network logs",
+      "fetch",
+      "xhr",
+      "diagnostics",
+      "chrome extension",
+      "recording",
+    ],
+  },
+] satisfies ComponentProps<typeof CommandMenu.DocsGroup>["docs"];
diff --git a/templates/clips/app/components/library/empty-state.tsx b/templates/clips/app/components/library/empty-state.tsx
index 9ca78a8d378..7e162b402e0 100644
--- a/templates/clips/app/components/library/empty-state.tsx
+++ b/templates/clips/app/components/library/empty-state.tsx
@@ -6,7 +6,8 @@ import {
   IconArchive,
   IconTrash,
 } from "@tabler/icons-react";
-import { useNavigate } from "react-router";
+import type { ComponentType, ReactNode } from "react";
+import { Link, useNavigate } from "react-router";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -38,6 +39,40 @@ const ICONS: Record<EmptyKind, React.ComponentType<{ className?: string }>> = {
 };
 
 const CTA_KINDS = new Set<EmptyKind>(["library", "folder", "space"]);
+const BACK_TO_LIBRARY_KINDS = new Set<EmptyKind>([
+  "shared",
+  "archive",
+  "trash",
+]);
+
+interface AppEmptyStateProps {
+  icon: ComponentType<{ className?: string }>;
+  title: ReactNode;
+  description?: ReactNode;
+  content?: ReactNode;
+}
+
+export function AppEmptyState({
+  icon: Icon,
+  title,
+  description,
+  content,
+}: AppEmptyStateProps) {
+  return (
+    <Empty className="min-h-64 flex-1 rounded-lg border border-dashed bg-muted/20 px-6 py-12 md:p-12">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Icon />
+        </EmptyMedia>
+        <EmptyTitle>{title}</EmptyTitle>
+        {description ? (
+          <EmptyDescription>{description}</EmptyDescription>
+        ) : null}
+      </EmptyHeader>
+      {content ? <EmptyContent>{content}</EmptyContent> : null}
+    </Empty>
+  );
+}
 
 interface EmptyStateProps {
   kind: EmptyKind;
@@ -69,22 +104,22 @@ export function EmptyState({
     }
   };
 
+  const content = hasCta ? (
+    <Button onClick={handleCta} size="sm">
+      {t(`empty.${kind}.cta`)}
+    </Button>
+  ) : BACK_TO_LIBRARY_KINDS.has(kind) ? (
+    <Button asChild size="sm" variant="outline">
+      <Link to="/library">{t("recordingPage.backToLibrary")}</Link>
+    </Button>
+  ) : null;
+
   return (
-    <Empty className="min-h-full rounded-none py-20">
-      <EmptyHeader>
-        <EmptyMedia variant="icon">
-          <Icon />
-        </EmptyMedia>
-        <EmptyTitle>{t(`empty.${kind}.title`)}</EmptyTitle>
-        <EmptyDescription>{t(`empty.${kind}.body`)}</EmptyDescription>
-      </EmptyHeader>
-      {hasCta ? (
-        <EmptyContent>
-          <Button onClick={handleCta} size="sm">
-            {t(`empty.${kind}.cta`)}
-          </Button>
-        </EmptyContent>
-      ) : null}
-    </Empty>
+    <AppEmptyState
+      icon={Icon}
+      title={t(`empty.${kind}.title`)}
+      description={t(`empty.${kind}.body`)}
+      content={content}
+    />
   );
 }
diff --git a/templates/clips/app/components/library/folder-card.tsx b/templates/clips/app/components/library/folder-card.tsx
new file mode 100644
index 00000000000..119d802de7c
--- /dev/null
+++ b/templates/clips/app/components/library/folder-card.tsx
@@ -0,0 +1,34 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconFolderOpen } from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import { cn } from "@/lib/utils";
+
+interface FolderCardProps {
+  folder: {
+    id: string;
+    name: string;
+  };
+  href: string;
+}
+
+export function FolderCard({ folder, href }: FolderCardProps) {
+  const t = useT();
+
+  return (
+    <Link
+      to={href}
+      aria-label={`${folder.name} — ${t("navigation.folder")}`}
+      className={cn(
+        "group flex h-14 min-w-0 items-center gap-3 rounded-lg border border-border bg-card px-3.5 py-2.5 text-start",
+        "shadow-[0_1px_2px_rgba(15,23,42,0.04)] transition-colors hover:border-primary/40 hover:bg-accent/20",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      )}
+    >
+      <IconFolderOpen className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:scale-105 motion-reduce:transition-none" />
+      <span className="min-w-0 truncate text-sm font-medium text-foreground">
+        {folder.name}
+      </span>
+    </Link>
+  );
+}
diff --git a/templates/clips/app/components/library/folder-tree.tsx b/templates/clips/app/components/library/folder-tree.tsx
index bb12447d12d..9a53a22eb3f 100644
--- a/templates/clips/app/components/library/folder-tree.tsx
+++ b/templates/clips/app/components/library/folder-tree.tsx
@@ -80,6 +80,8 @@ interface FolderTreeProps {
   /** Build the URL for a folder — allows library or space-scoped trees. */
   buildPath: (folderId: string) => string;
   activeFolderId?: string | null;
+  /** Use the single-indent spacing expected by a sidebar submenu. */
+  compact?: boolean;
 }
 
 export function FolderTree({
@@ -88,6 +90,7 @@ export function FolderTree({
   spaceId = null,
   buildPath,
   activeFolderId,
+  compact = false,
 }: FolderTreeProps) {
   const t = useT();
   const tree = useMemo(() => buildTree(folders), [folders]);
@@ -111,6 +114,7 @@ export function FolderTree({
           activeFolderId={activeFolderId}
           organizationId={organizationId}
           spaceId={spaceId}
+          compact={compact}
         />
       ))}
     </ul>
@@ -124,6 +128,7 @@ interface FolderItemProps {
   activeFolderId?: string | null;
   organizationId?: string;
   spaceId?: string | null;
+  compact: boolean;
 }
 
 function FolderItem({
@@ -133,6 +138,7 @@ function FolderItem({
   activeFolderId,
   organizationId,
   spaceId,
+  compact,
 }: FolderItemProps) {
   const t = useT();
   const [open, setOpen] = useState(true);
@@ -159,48 +165,73 @@ function FolderItem({
                 "group flex items-center gap-1 rounded px-1.5 py-1 text-xs",
                 isActive
                   ? "bg-primary/10 text-primary"
-                  : "text-foreground hover:bg-accent/60",
+                  : "text-primary hover:bg-accent/60",
               )}
-              style={{ paddingInlineStart: 6 + depth * 12 }}
+              style={{
+                paddingInlineStart: compact ? 8 + depth * 12 : 6 + depth * 12,
+              }}
             >
-              <CollapsibleTrigger asChild disabled={!hasChildren}>
-                <button
-                  type="button"
-                  className={cn(
-                    "rounded p-0.5 text-muted-foreground",
-                    !hasChildren && "invisible",
-                  )}
-                  onClick={(e) => e.stopPropagation()}
-                  aria-label={`${t(open ? "settings.collapse" : "settings.expand")}: ${node.name}`}
-                >
-                  <IconChevronRight
+              {!compact && (
+                <CollapsibleTrigger asChild disabled={!hasChildren}>
+                  <button
+                    type="button"
                     className={cn(
-                      "h-3 w-3 transition-transform motion-reduce:transition-none rtl:-scale-x-100",
-                      open && "rotate-90",
+                      "rounded p-0.5 text-primary",
+                      !hasChildren && "invisible",
                     )}
-                  />
-                </button>
-              </CollapsibleTrigger>
+                    onClick={(e) => e.stopPropagation()}
+                    aria-label={`${t(open ? "settings.collapse" : "settings.expand")}: ${node.name}`}
+                  >
+                    <IconChevronRight
+                      className={cn(
+                        "h-3 w-3 transition-transform motion-reduce:transition-none rtl:-scale-x-100",
+                        open && "rotate-90",
+                      )}
+                    />
+                  </button>
+                </CollapsibleTrigger>
+              )}
               <NavLink
                 to={buildPath(node.id)}
-                className="flex min-w-0 flex-1 items-center gap-1.5"
-              >
-                {open && hasChildren ? (
-                  <IconFolderOpen className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                ) : (
-                  <IconFolder className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                className={cn(
+                  "flex min-w-0 flex-1 items-center",
+                  compact ? "gap-0" : "gap-1.5",
                 )}
+              >
+                {!compact &&
+                  (open && hasChildren ? (
+                    <IconFolderOpen className="h-3.5 w-3.5 shrink-0 text-primary" />
+                  ) : (
+                    <IconFolder className="h-3.5 w-3.5 shrink-0 text-primary" />
+                  ))}
                 <span className="truncate" title={node.name}>
                   {node.name}
                 </span>
               </NavLink>
+              {compact && hasChildren && (
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className="rounded p-0.5 text-primary hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    onClick={(e) => e.stopPropagation()}
+                    aria-label={`${t(open ? "settings.collapse" : "settings.expand")}: ${node.name}`}
+                  >
+                    <IconChevronRight
+                      className={cn(
+                        "h-3 w-3 transition-transform motion-reduce:transition-none rtl:-scale-x-100",
+                        open && "rotate-90",
+                      )}
+                    />
+                  </button>
+                </CollapsibleTrigger>
+              )}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <button
                     type="button"
                     aria-label={`${node.name}: ${t("root.commandActions")}`}
                     title={`${node.name}: ${t("root.commandActions")}`}
-                    className="rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
+                    className="rounded p-0.5 text-primary opacity-0 transition-opacity hover:bg-accent hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
                   >
                     <IconDots className="h-3.5 w-3.5" />
                   </button>
@@ -292,6 +323,7 @@ function FolderItem({
                   activeFolderId={activeFolderId}
                   organizationId={organizationId}
                   spaceId={spaceId}
+                  compact={compact}
                 />
               ))}
             </ul>
diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index 1e77475178f..f1cd33c0f18 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -10,10 +10,22 @@ describe("selected library actions layout", () => {
   it("uses one consistent breadcrumb header and a single-priority sidebar", () => {
     const gridSource = readSource("./library-grid.tsx");
     const layoutSource = readSource("./library-layout.tsx");
+    const folderTreeSource = readSource("./folder-tree.tsx");
     const libraryRouteSource = readSource(
       "../../routes/_app.library._index.tsx",
     );
+    const folderRouteSource = readSource(
+      "../../routes/_app.library.folder.$folderId.tsx",
+    );
+    const primaryActionsSource = readSource("./library-primary-actions.tsx");
+    const feedbackSource = readSource("./sidebar-feedback-button.tsx");
     const spacesRouteSource = readSource("../../routes/_app.spaces._index.tsx");
+    const spaceRouteSource = readSource(
+      "../../routes/_app.spaces.$spaceId.tsx",
+    );
+    const spaceFolderRouteSource = readSource(
+      "../../routes/_app.spaces.$spaceId.folder.$folderId.tsx",
+    );
 
     expect(gridSource).toContain("<PageBreadcrumb");
     expect(gridSource).not.toContain('<h1 className="text-base');
@@ -21,12 +33,24 @@ describe("selected library actions layout", () => {
     expect(layoutSource).not.toContain("navigation.newFolder");
     expect(layoutSource).not.toContain("createSpaceDialog.newSpace");
     expect(layoutSource).not.toContain("<ImportMenu");
-    expect(libraryRouteSource).toContain("<PageHeaderActionGroup>");
-    expect(libraryRouteSource).toContain("<PageHeaderPrimaryAction asChild>");
+    expect(libraryRouteSource).toContain("<LibraryPrimaryActions />");
+    expect(libraryRouteSource).toContain(
+      'import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";',
+    );
     expect(libraryRouteSource).not.toContain("<CreateFolderDialog");
     expect(libraryRouteSource).not.toContain('t("navigation.newFolder")');
-    expect(libraryRouteSource).toContain("<IconVideoPlus />");
-    expect(libraryRouteSource).toContain('triggerIcon="chevron"');
+    expect(primaryActionsSource).toContain("<IconVideoPlus />");
+    expect(primaryActionsSource).toContain('triggerIcon="chevron"');
+    expect(gridSource).toContain('import { FolderCard } from "./folder-card"');
+    expect(gridSource).toContain("visibleFolders");
+    expect(gridSource).toContain('t("navigation.folders")');
+    expect(gridSource).toContain('aria-labelledby="library-folders-heading"');
+    expect(gridSource).toContain('t("navigation.recordings")');
+    expect(gridSource).toContain("LibraryCanvasContextMenu");
+    expect(gridSource).toContain('t("navigation.newFolder")');
+    expect(folderRouteSource).toContain("<LibraryPrimaryActions folderId");
+    expect(spaceRouteSource).toContain("<LibraryPrimaryActions spaceId");
+    expect(spaceFolderRouteSource).toContain("<LibraryPrimaryActions folderId");
     expect(layoutSource).toContain(
       '"flex h-14 shrink-0 items-center border-b border-border"',
     );
@@ -37,6 +61,17 @@ describe("selected library actions layout", () => {
     );
     expect(layoutSource).toContain('item.to === "/spaces"');
     expect(layoutSource).toContain("(spaces?.spaces ?? []).length > 0");
+    expect(layoutSource).toContain("ExpandedSidebarNavGroup");
+    expect(layoutSource).toContain("<CollapsibleContent");
+    expect(layoutSource).toContain("expandedSidebarGroups");
+    expect(layoutSource).toContain("spaceFolderLists");
+    expect(layoutSource).toContain("compact");
+    expect(layoutSource).not.toContain(
+      'className="ms-4 border-s border-border/70 ps-1"',
+    );
+    expect(folderTreeSource).toContain("compact ?");
+    expect(folderTreeSource).toContain("!compact &&");
+    expect(folderTreeSource).toContain("compact && hasChildren");
     expect(layoutSource).not.toContain('t("navigation.noSpaces")');
     expect(layoutSource).not.toContain('t("folderTree.noFolders")');
     expect(layoutSource).not.toContain("pageHasHeaderSearch");
@@ -52,15 +87,36 @@ describe("selected library actions layout", () => {
     expect(layoutSource).toContain("compact={showCollapsedSidebar}");
     expect(layoutSource).toContain("IconLayoutSidebarLeftCollapse");
     expect(layoutSource).toContain("IconLayoutSidebarLeftExpand");
+    expect(layoutSource).toContain("SidebarFeedbackButton");
+    expect(layoutSource).toContain(
+      "<SidebarFeedbackButton collapsed={showCollapsedSidebar} />",
+    );
+    expect(layoutSource).toContain("function isSidebarGroupActive(");
+    expect(layoutSource).toContain(
+      'group === "library" && pathname.startsWith("/library/folder/")',
+    );
+    expect(layoutSource).toContain(
+      'group === "spaces" && pathname.startsWith("/spaces/")',
+    );
+    expect(layoutSource).toContain(
+      "!bg-transparent !text-primary hover:!bg-accent/60 hover:!text-primary",
+    );
+    expect(layoutSource).not.toContain("!bg-primary/5");
+    expect(feedbackSource).toContain(
+      "bg-transparent text-primary hover:bg-accent/60 hover:text-primary",
+    );
+    expect(feedbackSource).not.toContain("bg-primary/5");
+    expect(layoutSource).toContain('currentAppId="clips"');
+    expect(feedbackSource).toContain("openBugReportDialog");
+    expect(feedbackSource).toContain('t("bugReportRoute.sidebarCta")');
     expect(layoutSource).not.toContain("SidebarFooterActions");
     expect(layoutSource).not.toContain("DevDatabaseLink");
     expect(
       spacesRouteSource.match(/t\("createSpaceDialog\.newSpace"\)/g),
     ).toHaveLength(1);
     expect(spacesRouteSource).toContain('t("createSpaceDialog.description")');
-    expect(spacesRouteSource).not.toContain(
-      '<Button size="sm" onClick={() => setCreateOpen(true)}>',
-    );
+    expect(spacesRouteSource).toContain("<AppEmptyState");
+    expect(spacesRouteSource).toContain("createSpaceLabel");
     expect(spacesRouteSource).toContain("<PageHeaderPrimaryAction");
   });
 
diff --git a/templates/clips/app/components/library/library-grid.tsx b/templates/clips/app/components/library/library-grid.tsx
index f2dc8c69dab..bc9742cf92a 100644
--- a/templates/clips/app/components/library/library-grid.tsx
+++ b/templates/clips/app/components/library/library-grid.tsx
@@ -8,13 +8,26 @@ import {
   IconAlertTriangle,
   IconChevronLeft,
   IconChevronRight,
+  IconFolderPlus,
 } from "@tabler/icons-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  type ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { toast } from "sonner";
 
 import { CreateFolderDialog } from "@/components/library/create-folder-dialog";
 import { ShareRecordingDialog } from "@/components/player/share-dialog";
 import { Button } from "@/components/ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 import {
   useFolders,
   useRecordings,
@@ -26,12 +39,14 @@ import {
   type ListRecordingsArgs,
   type RecordingSummary,
 } from "@/hooks/use-library";
+import { OPEN_CREATE_FOLDER_EVENT } from "@/lib/command-events";
 import { retryRecordingUploadFromBackup } from "@/lib/recording-retry";
 import { cn } from "@/lib/utils";
 
 import { BulkActionToolbar, type BulkMoveTarget } from "./bulk-action-toolbar";
 import { EmptyState } from "./empty-state";
 import { FilterChips, type FilterChip } from "./filter-chips";
+import { FolderCard } from "./folder-card";
 import { PageBreadcrumb, PageHeader } from "./page-header";
 import { RecordingCard } from "./recording-card";
 import { SearchBar } from "./search-bar";
@@ -73,6 +88,36 @@ type CreateFolderTarget =
   | { kind: "single"; recording: RecordingSummary }
   | { kind: "bulk"; recordingIds: string[] };
 
+function LibraryCanvasContextMenu({
+  enabled,
+  onCreateFolder,
+  children,
+}: {
+  enabled: boolean;
+  onCreateFolder: () => void;
+  children: ReactElement;
+}) {
+  const t = useT();
+
+  if (!enabled) return children;
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem
+          onSelect={() => {
+            setTimeout(onCreateFolder, 0);
+          }}
+        >
+          <IconFolderPlus className="me-2 size-4" />
+          {t("navigation.newFolder")}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
 function buildMoveTargets(
   folders: FolderTargetRow[],
   currentFolderId: string | null,
@@ -117,6 +162,7 @@ export function LibraryGrid({
   const [lastSelectedId, setLastSelectedId] = useState<string | null>(null);
   const selectionMode = selected.size > 0;
   const [sharingRec, setSharingRec] = useState<RecordingSummary | null>(null);
+  const [createFolderOpen, setCreateFolderOpen] = useState(false);
   const [createFolderTarget, setCreateFolderTarget] =
     useState<CreateFolderTarget | null>(null);
   const [isBulkPending, setIsBulkPending] = useState(false);
@@ -139,6 +185,16 @@ export function LibraryGrid({
     setLastSelectedId(null);
   }, [view, folderId, spaceId, tagFilter, sort]);
 
+  useEffect(() => {
+    const handleOpenCreateFolder = () => setCreateFolderOpen(true);
+    window.addEventListener(OPEN_CREATE_FOLDER_EVENT, handleOpenCreateFolder);
+    return () =>
+      window.removeEventListener(
+        OPEN_CREATE_FOLDER_EVENT,
+        handleOpenCreateFolder,
+      );
+  }, []);
+
   const countArgs = useMemo(
     () => ({
       view,
@@ -179,7 +235,7 @@ export function LibraryGrid({
   const moveRecording = useMoveRecording();
   const canManageRecordings = view !== "shared";
   const canMoveSelection = view === "library" || view === "space";
-  const { data: scopedFolders } = useFolders(
+  const { data: scopedFolders, isLoading: isFoldersLoading } = useFolders(
     {
       spaceId: view === "space" ? (spaceId ?? null) : null,
     },
@@ -187,6 +243,15 @@ export function LibraryGrid({
       enabled: canMoveSelection && (view !== "space" || Boolean(spaceId)),
     },
   );
+  const visibleFolders = useMemo(
+    () =>
+      view === "library" || view === "space"
+        ? ((scopedFolders?.folders ?? []) as FolderTargetRow[]).filter(
+            (folder) => (folder.parentId ?? null) === (folderId ?? null),
+          )
+        : [],
+    [folderId, scopedFolders, view],
+  );
   const selectedIds = useMemo(() => Array.from(selected), [selected]);
   const moveTargets = useMemo(
     () =>
@@ -373,9 +438,12 @@ export function LibraryGrid({
         />
       )}
       <CreateFolderDialog
-        open={Boolean(createFolderTarget)}
+        open={Boolean(createFolderTarget) || createFolderOpen}
         onOpenChange={(open) => {
-          if (!open) setCreateFolderTarget(null);
+          if (!open) {
+            setCreateFolderOpen(false);
+            setCreateFolderTarget(null);
+          }
         }}
         spaceId={view === "space" ? spaceId : null}
         parentId={folderId}
@@ -421,103 +489,161 @@ export function LibraryGrid({
           )}
           aria-busy={isLoading}
         >
-          <div className="flex min-h-full flex-col p-5">
-            {isLoading ? (
-              <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
-                {Array.from({ length: 8 }).map((_, i) => (
-                  <Skeleton key={i} />
-                ))}
-              </div>
-            ) : isError && recordings.length === 0 ? (
-              <div className="flex flex-1 flex-col items-center justify-center py-20 px-8 text-center">
-                <div className="relative mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-destructive/10">
-                  <IconAlertTriangle className="h-10 w-10 text-destructive" />
+          <LibraryCanvasContextMenu
+            enabled={canMoveSelection}
+            onCreateFolder={() => setCreateFolderOpen(true)}
+          >
+            <div className="flex min-h-full flex-col p-5">
+              {isLoading || (view !== "shared" && isFoldersLoading) ? (
+                <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
+                  {Array.from({ length: 8 }).map((_, i) => (
+                    <Skeleton key={i} />
+                  ))}
                 </div>
-                <h2 className="text-base font-semibold text-foreground mb-1">
-                  {t("libraryGrid.loadFailedTitle")}
-                </h2>
-                <p className="text-sm text-muted-foreground max-w-sm mb-5">
-                  {t("libraryGrid.loadFailedBody")}
-                </p>
-                <Button
-                  onClick={() => refetch()}
-                  disabled={isRefetching}
-                  size="sm"
-                >
-                  {t("libraryGrid.retry")}
-                </Button>
-              </div>
-            ) : recordings.length === 0 ? (
-              <EmptyState
-                kind={resolvedEmptyKind}
-                spaceId={spaceId}
-                folderId={folderId}
-              />
-            ) : (
-              <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
-                {recordings.map((r: RecordingSummary) => (
-                  <RecordingCard
-                    key={r.id}
-                    recording={r}
-                    selected={
-                      canManageRecordings ? selected.has(r.id) : undefined
-                    }
-                    selectionMode={canManageRecordings && selectionMode}
-                    onToggleSelect={
-                      canManageRecordings ? handleToggleSelect : undefined
-                    }
-                    onShare={(rec) => setSharingRec(rec)}
-                    moveTargets={moveTargets}
-                    onMove={canMoveSelection ? moveSingle : undefined}
-                    isMovePending={moveRecording.isPending}
-                    onRetry={canManageRecordings ? handleRetry : undefined}
-                    onCreateFolder={() => {
-                      setCreateFolderTarget({ kind: "single", recording: r });
-                    }}
-                    onTrash={
-                      canManageRecordings
-                        ? (rec) => {
-                            trashRecording.mutate(
-                              { id: rec.id },
-                              {
-                                onSuccess: () =>
-                                  toast.success(t("libraryGrid.movedToTrash")),
-                              },
-                            );
-                          }
-                        : undefined
-                    }
-                    onArchive={
-                      canManageRecordings
-                        ? (rec) => {
-                            if (rec.archivedAt) {
-                              restoreRecording.mutate(
-                                { id: rec.id },
-                                {
-                                  onSuccess: () =>
-                                    toast.success(
-                                      t("libraryGrid.restoredFromArchive"),
-                                    ),
-                                },
-                              );
-                            } else {
-                              archiveRecording.mutate(
-                                { id: rec.id },
-                                {
-                                  onSuccess: () =>
-                                    toast.success(t("libraryGrid.archived")),
-                                },
-                              );
+              ) : isError && recordings.length === 0 ? (
+                <div className="flex flex-1 flex-col items-center justify-center py-20 px-8 text-center">
+                  <div className="relative mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-destructive/10">
+                    <IconAlertTriangle className="h-10 w-10 text-destructive" />
+                  </div>
+                  <h2 className="text-base font-semibold text-foreground mb-1">
+                    {t("libraryGrid.loadFailedTitle")}
+                  </h2>
+                  <p className="text-sm text-muted-foreground max-w-sm mb-5">
+                    {t("libraryGrid.loadFailedBody")}
+                  </p>
+                  <Button
+                    onClick={() => refetch()}
+                    disabled={isRefetching}
+                    size="sm"
+                  >
+                    {t("libraryGrid.retry")}
+                  </Button>
+                </div>
+              ) : recordings.length === 0 && visibleFolders.length === 0 ? (
+                <EmptyState
+                  kind={resolvedEmptyKind}
+                  spaceId={spaceId}
+                  folderId={folderId}
+                />
+              ) : (
+                <div className="flex flex-col gap-8">
+                  {visibleFolders.length > 0 && (
+                    <section aria-labelledby="library-folders-heading">
+                      <h2
+                        id="library-folders-heading"
+                        className="mb-3 text-sm font-semibold text-foreground"
+                      >
+                        {t("navigation.folders")}
+                      </h2>
+                      <div className="grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))]">
+                        {visibleFolders.map((folder) => (
+                          <FolderCard
+                            key={folder.id}
+                            folder={folder}
+                            href={
+                              view === "space"
+                                ? `/spaces/${spaceId}/folder/${folder.id}`
+                                : `/library/folder/${folder.id}`
                             }
-                          }
-                        : undefined
-                    }
-                    readOnly={!canManageRecordings}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
+                          />
+                        ))}
+                      </div>
+                    </section>
+                  )}
+
+                  {recordings.length > 0 && (
+                    <section aria-label={t("navigation.recordings")}>
+                      {visibleFolders.length > 0 && (
+                        <h2
+                          id="library-recordings-heading"
+                          className="mb-3 text-sm font-semibold text-foreground"
+                        >
+                          {t("navigation.recordings")}
+                        </h2>
+                      )}
+                      <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
+                        {recordings.map((r: RecordingSummary) => (
+                          <RecordingCard
+                            key={r.id}
+                            recording={r}
+                            selected={
+                              canManageRecordings
+                                ? selected.has(r.id)
+                                : undefined
+                            }
+                            selectionMode={canManageRecordings && selectionMode}
+                            onToggleSelect={
+                              canManageRecordings
+                                ? handleToggleSelect
+                                : undefined
+                            }
+                            onShare={(rec) => setSharingRec(rec)}
+                            moveTargets={moveTargets}
+                            onMove={canMoveSelection ? moveSingle : undefined}
+                            isMovePending={moveRecording.isPending}
+                            onRetry={
+                              canManageRecordings ? handleRetry : undefined
+                            }
+                            onCreateFolder={() => {
+                              setCreateFolderTarget({
+                                kind: "single",
+                                recording: r,
+                              });
+                            }}
+                            onTrash={
+                              canManageRecordings
+                                ? (rec) => {
+                                    trashRecording.mutate(
+                                      { id: rec.id },
+                                      {
+                                        onSuccess: () =>
+                                          toast.success(
+                                            t("libraryGrid.movedToTrash"),
+                                          ),
+                                      },
+                                    );
+                                  }
+                                : undefined
+                            }
+                            onArchive={
+                              canManageRecordings
+                                ? (rec) => {
+                                    if (rec.archivedAt) {
+                                      restoreRecording.mutate(
+                                        { id: rec.id },
+                                        {
+                                          onSuccess: () =>
+                                            toast.success(
+                                              t(
+                                                "libraryGrid.restoredFromArchive",
+                                              ),
+                                            ),
+                                        },
+                                      );
+                                    } else {
+                                      archiveRecording.mutate(
+                                        { id: rec.id },
+                                        {
+                                          onSuccess: () =>
+                                            toast.success(
+                                              t("libraryGrid.archived"),
+                                            ),
+                                        },
+                                      );
+                                    }
+                                  }
+                                : undefined
+                            }
+                            readOnly={!canManageRecordings}
+                          />
+                        ))}
+                      </div>
+                    </section>
+                  )}
+                </div>
+              )}
+            </div>
+          </LibraryCanvasContextMenu>
         </div>
 
         {!isLoading && recordings.length > 0 && totalPages > 1 && (
diff --git a/templates/clips/app/components/library/library-layout.tsx b/templates/clips/app/components/library/library-layout.tsx
index a6b8abf7a0e..de0122362d4 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -23,6 +23,7 @@ import {
   IconUsersGroup,
   IconBrandChrome,
   IconDownload,
+  IconChevronDown,
   IconMenu2,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
@@ -41,6 +42,11 @@ import {
 } from "react";
 import { NavLink, useLocation, useNavigate, useParams } from "react-router";
 
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -76,6 +82,7 @@ import { cn } from "@/lib/utils";
 
 import { FolderTree, type FolderNode } from "./folder-tree";
 import { PageHeaderSlotProvider } from "./page-header";
+import { SidebarFeedbackButton } from "./sidebar-feedback-button";
 import { SpaceDialogs } from "./space-dialogs";
 
 interface LibraryLayoutProps {
@@ -85,6 +92,22 @@ interface LibraryLayoutProps {
 }
 
 const SIDEBAR_COLLAPSED_STORAGE_KEY = "clips:left-sidebar-collapsed";
+type SidebarGroupKey = "library" | "spaces";
+
+function isSidebarGroupActive(
+  pathname: string,
+  group: SidebarGroupKey,
+  matchesRoute: boolean,
+) {
+  if (!matchesRoute) return false;
+  if (group === "library" && pathname.startsWith("/library/folder/")) {
+    return false;
+  }
+  if (group === "spaces" && pathname.startsWith("/spaces/")) {
+    return false;
+  }
+  return true;
+}
 
 function readSidebarCollapsedPreference() {
   if (typeof window === "undefined") return false;
@@ -107,6 +130,77 @@ function ClipsAgentToggleButton() {
   );
 }
 
+interface ExpandedSidebarNavGroupProps {
+  to: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  active: boolean;
+  count?: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: ReactNode;
+}
+
+function ExpandedSidebarNavGroup({
+  to,
+  label,
+  icon: Icon,
+  active,
+  count,
+  open,
+  onOpenChange,
+  children,
+}: ExpandedSidebarNavGroupProps) {
+  const t = useT();
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={onOpenChange}
+      className="group/sidebar-nav"
+    >
+      <div
+        className={cn(
+          "group flex items-center rounded",
+          active
+            ? "bg-primary/10 font-medium text-primary"
+            : "text-primary hover:bg-accent/60",
+        )}
+      >
+        <NavLink
+          to={to}
+          className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-xs text-primary"
+        >
+          <Icon className="size-4 shrink-0 text-primary" />
+          <span className="flex-1 truncate text-primary">{label}</span>
+          {count !== undefined && count > 0 && (
+            <span className="shrink-0 tabular-nums text-[11px] text-primary/80">
+              {count}
+            </span>
+          )}
+        </NavLink>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            aria-label={`${t(open ? "settings.collapse" : "settings.expand")}: ${label}`}
+            className="me-1 flex size-7 shrink-0 items-center justify-center rounded text-primary hover:bg-accent hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <IconChevronDown
+              className={cn(
+                "size-3.5 transition-transform motion-reduce:transition-none",
+                open && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="clips-collapsible-content">
+        <div className="ms-3.5 border-s border-border/70 ps-2">{children}</div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
 export function LibraryLayout({
   children,
   showAgentSidebar = true,
@@ -169,6 +263,21 @@ export function LibraryLayout({
         })),
     [libFolders],
   );
+  const spaceFolderLists = useMemo(() => {
+    const foldersBySpace = new Map<string, FolderNode[]>();
+    for (const folder of libFolders?.folders ?? []) {
+      if (!folder.spaceId) continue;
+      const folders = foldersBySpace.get(folder.spaceId) ?? [];
+      folders.push({
+        id: folder.id,
+        parentId: folder.parentId ?? null,
+        spaceId: folder.spaceId,
+        name: folder.name,
+      });
+      foldersBySpace.set(folder.spaceId, folders);
+    }
+    return foldersBySpace;
+  }, [libFolders]);
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const mobileSidebarRef = useRef<HTMLElement | null>(null);
@@ -176,6 +285,14 @@ export function LibraryLayout({
   const [sidebarCollapsed, setSidebarCollapsed] = useState(
     readSidebarCollapsedPreference,
   );
+  const [expandedSidebarGroups, setExpandedSidebarGroups] = useState<
+    Record<SidebarGroupKey, boolean>
+  >(() => ({
+    library:
+      location.pathname.startsWith("/library") ||
+      location.pathname.startsWith("/r/"),
+    spaces: location.pathname.startsWith("/spaces"),
+  }));
   const [headerSlot, setHeaderSlot] = useState<HTMLElement | null>(null);
   const showCollapsedSidebar = sidebarCollapsed && !isMobile;
   const workspaceUtilityLinks = [
@@ -211,7 +328,7 @@ export function LibraryLayout({
               ? t("navigation.expandSidebar")
               : t("navigation.collapseSidebar")
           }
-          className="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+          className="flex size-9 shrink-0 items-center justify-center rounded-md bg-transparent text-primary hover:bg-accent/60 hover:text-primary"
           onClick={() => setSidebarCollapsed((value) => !value)}
         >
           {showCollapsedSidebar ? (
@@ -236,6 +353,15 @@ export function LibraryLayout({
   useEffect(() => {
     setSidebarOpen(false);
   }, [location.pathname]);
+  useEffect(() => {
+    setExpandedSidebarGroups((groups) => ({
+      library:
+        groups.library ||
+        location.pathname.startsWith("/library") ||
+        location.pathname.startsWith("/r/"),
+      spaces: groups.spaces || location.pathname.startsWith("/spaces"),
+    }));
+  }, [location.pathname]);
   useEffect(() => {
     if (!isMobile || !sidebarOpen) return;
 
@@ -308,7 +434,8 @@ export function LibraryLayout({
       to: "/library",
       label: t("navigation.library"),
       icon: IconInbox,
-      match: (p) => p.startsWith("/library") || p.startsWith("/r/"),
+      match: (p) =>
+        p === "/home" || p.startsWith("/library") || p.startsWith("/r/"),
       count: libraryCount,
     },
     {
@@ -322,7 +449,7 @@ export function LibraryLayout({
       to: "/spaces",
       label: t("navigation.spaces"),
       icon: IconUsersGroup,
-      match: (p) => p.startsWith("/spaces"),
+      match: (p) => p === "/spaces" || p.startsWith("/spaces/"),
     },
     {
       to: "/meetings",
@@ -373,20 +500,20 @@ export function LibraryLayout({
           "group flex items-center rounded",
           active
             ? "bg-primary/10 font-medium text-primary"
-            : "text-foreground hover:bg-accent/60",
+            : "text-primary hover:bg-accent/60",
         )}
       >
         <NavLink
           to={to}
-          className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-xs"
+          className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-xs text-primary"
         >
-          <Icon className="size-4 shrink-0" />
-          <span className="flex-1 truncate">{label}</span>
+          <Icon className="size-4 shrink-0 text-primary" />
+          <span className="flex-1 truncate text-primary">{label}</span>
           {count !== undefined && count > 0 && (
             <span
               className={cn(
                 "shrink-0 tabular-nums text-[11px]",
-                active ? "text-primary/80" : "text-muted-foreground",
+                "text-primary/80",
               )}
             >
               {count}
@@ -412,12 +539,12 @@ export function LibraryLayout({
             to={to}
             aria-label={label}
             className={cn(
-              "flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground",
+              "flex size-9 items-center justify-center rounded-md text-primary hover:bg-accent/60 hover:text-primary",
               active &&
                 "bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary",
             )}
           >
-            <Icon className="size-4" />
+            <Icon className="size-4 text-primary" />
           </NavLink>
         </TooltipTrigger>
         <TooltipContent side="right">{label}</TooltipContent>
@@ -425,6 +552,31 @@ export function LibraryLayout({
     );
   };
 
+  const renderExpandedNavGroup = (
+    item: (typeof navItems)[number],
+    group: SidebarGroupKey,
+    children: ReactNode,
+  ) => (
+    <ExpandedSidebarNavGroup
+      key={item.to}
+      to={item.to}
+      label={item.label}
+      icon={item.icon}
+      active={isSidebarGroupActive(
+        location.pathname,
+        group,
+        item.match(location.pathname),
+      )}
+      count={item.count}
+      open={expandedSidebarGroups[group]}
+      onOpenChange={(open) =>
+        setExpandedSidebarGroups((groups) => ({ ...groups, [group]: open }))
+      }
+    >
+      {children}
+    </ExpandedSidebarNavGroup>
+  );
+
   const pageContent = (
     <div className="flex min-h-0 min-w-0 flex-1 flex-col">
       <InvitationBanner />
@@ -477,16 +629,16 @@ export function LibraryLayout({
             to="/library"
             aria-label={t("navigation.brand")}
             className={cn(
-              "flex min-w-0 translate-y-0.5 items-center gap-2 rounded text-start outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "flex min-w-0 items-center gap-2 rounded text-start outline-none focus-visible:ring-2 focus-visible:ring-ring",
               showCollapsedSidebar ? "size-8 justify-center" : "shrink-0",
             )}
           >
             <AgentNativeIcon
               aria-hidden="true"
-              className="h-3.5 w-6 shrink-0 text-foreground"
+              className="h-3.5 w-6 shrink-0 text-primary"
             />
             {!showCollapsedSidebar && (
-              <span className="truncate text-sm font-semibold text-foreground">
+              <span className="truncate text-sm font-semibold text-primary">
                 {t("navigation.brand")}
               </span>
             )}
@@ -503,143 +655,168 @@ export function LibraryLayout({
             </nav>
           ) : (
             <nav className="space-y-0.5 px-2 py-3">
-              {primaryNavItems.map((item) => (
-                <Fragment key={item.to}>
-                  {renderExpandedNavItem(item)}
-                  {item.to === "/library" && libFolderList.length > 0 && (
-                    <div className="ms-4 border-s border-border/70 ps-1">
-                      <FolderTree
-                        folders={libFolderList}
-                        organizationId={currentOrganizationId}
-                        spaceId={null}
-                        buildPath={(id) => `/library/folder/${id}`}
-                        activeFolderId={folderId ?? null}
-                      />
-                    </div>
-                  )}
-                  {item.to === "/spaces" &&
-                    (spaces?.spaces ?? []).length > 0 && (
-                      <ul className="ms-4 space-y-0.5 border-s border-border/70 ps-1">
-                        {(spaces?.spaces ?? []).map((s: any) => {
-                          const active = spaceId === s.id;
-                          return (
-                            <li key={s.id}>
-                              <ContextMenu>
-                                <ContextMenuTrigger asChild>
-                                  <div
-                                    className={cn(
-                                      "group flex items-center gap-2 rounded px-2 py-1 text-xs",
-                                      active
-                                        ? "bg-primary/10 text-primary"
-                                        : "text-foreground hover:bg-accent/60",
-                                    )}
+              {primaryNavItems.map((item) => {
+                if (item.to === "/library" && libFolderList.length > 0) {
+                  return renderExpandedNavGroup(
+                    item,
+                    "library",
+                    <FolderTree
+                      compact
+                      folders={libFolderList}
+                      organizationId={currentOrganizationId}
+                      spaceId={null}
+                      buildPath={(id) => `/library/folder/${id}`}
+                      activeFolderId={folderId ?? null}
+                    />,
+                  );
+                }
+
+                if (
+                  item.to === "/spaces" &&
+                  (spaces?.spaces ?? []).length > 0
+                ) {
+                  return renderExpandedNavGroup(
+                    item,
+                    "spaces",
+                    <ul className="space-y-0.5">
+                      {(spaces?.spaces ?? []).map((s: any) => {
+                        const active = spaceId === s.id;
+                        const spaceFolders = spaceFolderLists.get(s.id) ?? [];
+                        return (
+                          <li key={s.id}>
+                            <ContextMenu>
+                              <ContextMenuTrigger asChild>
+                                <div
+                                  className={cn(
+                                    "group flex items-center gap-2 rounded px-1.5 py-1 text-xs",
+                                    active
+                                      ? "bg-primary/10 text-primary"
+                                      : "text-primary hover:bg-accent/60",
+                                  )}
+                                >
+                                  <NavLink
+                                    to={`/spaces/${s.id}`}
+                                    className="flex min-w-0 flex-1 items-center gap-2 text-primary"
                                   >
-                                    <NavLink
-                                      to={`/spaces/${s.id}`}
-                                      className="flex min-w-0 flex-1 items-center gap-2"
+                                    <div
+                                      className="flex size-4 shrink-0 items-center justify-center rounded text-[10px]"
+                                      style={{
+                                        background:
+                                          s.color ?? "hsl(var(--primary))",
+                                        color: "hsl(var(--primary-foreground))",
+                                      }}
                                     >
-                                      <div
-                                        className="flex size-4 shrink-0 items-center justify-center rounded text-[10px]"
-                                        style={{
-                                          background:
-                                            s.color ?? "hsl(var(--primary))",
-                                          color:
-                                            "hsl(var(--primary-foreground))",
-                                        }}
-                                      >
-                                        {s.iconEmoji ??
-                                          s.name.slice(0, 1).toUpperCase()}
-                                      </div>
-                                      <span className="truncate">{s.name}</span>
-                                    </NavLink>
-                                    {canManageOrg && (
-                                      <DropdownMenu>
-                                        <DropdownMenuTrigger asChild>
-                                          <button
-                                            type="button"
-                                            aria-label={`${s.name}: ${t("root.commandActions")}`}
-                                            title={`${s.name}: ${t("root.commandActions")}`}
-                                            className="rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
-                                          >
-                                            <IconDots className="size-3.5" />
-                                          </button>
-                                        </DropdownMenuTrigger>
-                                        <DropdownMenuContent
-                                          align="start"
-                                          side="right"
-                                        >
-                                          <DropdownMenuItem
-                                            onSelect={() => {
-                                              setTimeout(() => {
-                                                setRenameSpaceValue(s.name);
-                                                setRenameSpaceId(s.id);
-                                              }, 0);
-                                            }}
-                                          >
-                                            <IconEdit className="me-2 size-3.5" />
-                                            {t("spaceDialog.renameSpace")}
-                                          </DropdownMenuItem>
-                                          <DropdownMenuItem
-                                            onSelect={() => {
-                                              setTimeout(() => {
-                                                setDeleteSpaceId(s.id);
-                                                setDeleteSpaceName(s.name);
-                                              }, 0);
-                                            }}
-                                            className="text-destructive"
-                                          >
-                                            <IconTrash className="me-2 size-3.5" />
-                                            {t("spaceDialog.deleteSpace")}
-                                          </DropdownMenuItem>
-                                        </DropdownMenuContent>
-                                      </DropdownMenu>
-                                    )}
-                                  </div>
-                                </ContextMenuTrigger>
-                                <ContextMenuContent>
-                                  <ContextMenuItem asChild>
-                                    <NavLink to={`/spaces/${s.id}`}>
-                                      <IconUsersGroup className="me-2 size-3.5" />
-                                      {t("clipsFinalRaw.view")}
-                                    </NavLink>
-                                  </ContextMenuItem>
+                                      {s.iconEmoji ??
+                                        s.name.slice(0, 1).toUpperCase()}
+                                    </div>
+                                    <span className="truncate text-primary">
+                                      {s.name}
+                                    </span>
+                                  </NavLink>
                                   {canManageOrg && (
-                                    <>
-                                      <ContextMenuSeparator />
-                                      <ContextMenuItem
-                                        onSelect={() => {
-                                          setTimeout(() => {
-                                            setRenameSpaceValue(s.name);
-                                            setRenameSpaceId(s.id);
-                                          }, 0);
-                                        }}
-                                      >
-                                        <IconEdit className="me-2 size-3.5" />
-                                        {t("spaceDialog.renameSpace")}
-                                      </ContextMenuItem>
-                                      <ContextMenuItem
-                                        onSelect={() => {
-                                          setTimeout(() => {
-                                            setDeleteSpaceId(s.id);
-                                            setDeleteSpaceName(s.name);
-                                          }, 0);
-                                        }}
-                                        className="text-destructive focus:text-destructive"
+                                    <DropdownMenu>
+                                      <DropdownMenuTrigger asChild>
+                                        <button
+                                          type="button"
+                                          aria-label={`${s.name}: ${t("root.commandActions")}`}
+                                          title={`${s.name}: ${t("root.commandActions")}`}
+                                          className="rounded p-0.5 text-primary opacity-0 transition-opacity hover:bg-accent hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
+                                        >
+                                          <IconDots className="size-3.5" />
+                                        </button>
+                                      </DropdownMenuTrigger>
+                                      <DropdownMenuContent
+                                        align="start"
+                                        side="right"
                                       >
-                                        <IconTrash className="me-2 size-3.5" />
-                                        {t("spaceDialog.deleteSpace")}
-                                      </ContextMenuItem>
-                                    </>
+                                        <DropdownMenuItem
+                                          onSelect={() => {
+                                            setTimeout(() => {
+                                              setRenameSpaceValue(s.name);
+                                              setRenameSpaceId(s.id);
+                                            }, 0);
+                                          }}
+                                        >
+                                          <IconEdit className="me-2 size-3.5" />
+                                          {t("spaceDialog.renameSpace")}
+                                        </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                          onSelect={() => {
+                                            setTimeout(() => {
+                                              setDeleteSpaceId(s.id);
+                                              setDeleteSpaceName(s.name);
+                                            }, 0);
+                                          }}
+                                          className="text-destructive"
+                                        >
+                                          <IconTrash className="me-2 size-3.5" />
+                                          {t("spaceDialog.deleteSpace")}
+                                        </DropdownMenuItem>
+                                      </DropdownMenuContent>
+                                    </DropdownMenu>
                                   )}
-                                </ContextMenuContent>
-                              </ContextMenu>
-                            </li>
-                          );
-                        })}
-                      </ul>
-                    )}
-                </Fragment>
-              ))}
+                                </div>
+                              </ContextMenuTrigger>
+                              <ContextMenuContent>
+                                <ContextMenuItem asChild>
+                                  <NavLink to={`/spaces/${s.id}`}>
+                                    <IconUsersGroup className="me-2 size-3.5" />
+                                    {t("clipsFinalRaw.view")}
+                                  </NavLink>
+                                </ContextMenuItem>
+                                {canManageOrg && (
+                                  <>
+                                    <ContextMenuSeparator />
+                                    <ContextMenuItem
+                                      onSelect={() => {
+                                        setTimeout(() => {
+                                          setRenameSpaceValue(s.name);
+                                          setRenameSpaceId(s.id);
+                                        }, 0);
+                                      }}
+                                    >
+                                      <IconEdit className="me-2 size-3.5" />
+                                      {t("spaceDialog.renameSpace")}
+                                    </ContextMenuItem>
+                                    <ContextMenuItem
+                                      onSelect={() => {
+                                        setTimeout(() => {
+                                          setDeleteSpaceId(s.id);
+                                          setDeleteSpaceName(s.name);
+                                        }, 0);
+                                      }}
+                                      className="text-destructive focus:text-destructive"
+                                    >
+                                      <IconTrash className="me-2 size-3.5" />
+                                      {t("spaceDialog.deleteSpace")}
+                                    </ContextMenuItem>
+                                  </>
+                                )}
+                              </ContextMenuContent>
+                            </ContextMenu>
+                            {spaceFolders.length > 0 && (
+                              <div className="ms-3 border-s border-border/70 ps-2">
+                                <FolderTree
+                                  compact
+                                  folders={spaceFolders}
+                                  organizationId={currentOrganizationId}
+                                  spaceId={s.id}
+                                  buildPath={(id) =>
+                                    `/spaces/${s.id}/folder/${id}`
+                                  }
+                                  activeFolderId={folderId ?? null}
+                                />
+                              </div>
+                            )}
+                          </li>
+                        );
+                      })}
+                    </ul>,
+                  );
+                }
+
+                return renderExpandedNavItem(item);
+              })}
 
               <div className="mt-3 space-y-0.5 border-t border-border/70 pt-3">
                 {lifecycleNavItems.map(renderExpandedNavItem)}
@@ -650,23 +827,30 @@ export function LibraryLayout({
 
         <div
           className={cn(
-            "shrink-0 border-t border-border p-2 empty:hidden",
-            showCollapsedSidebar
-              ? "flex flex-col items-center gap-1"
-              : "flex items-center gap-0.5",
+            "shrink-0 border-t border-border p-2",
+            showCollapsedSidebar ? "space-y-1" : "space-y-1.5",
           )}
         >
-          <OrgSwitcher
-            compact={showCollapsedSidebar}
+          <SidebarFeedbackButton collapsed={showCollapsedSidebar} />
+          <div
             className={cn(
-              "bg-transparent hover:bg-accent/60",
-              !showCollapsedSidebar && "min-w-0 flex-1",
+              showCollapsedSidebar
+                ? "flex items-center justify-center gap-1"
+                : "flex items-center gap-0.5",
             )}
-            settingsPath="/settings/organization"
-            currentAppId="clips"
-            utilityLinks={workspaceUtilityLinks}
-          />
-          {collapseButton}
+          >
+            <OrgSwitcher
+              compact={showCollapsedSidebar}
+              className={cn(
+                "!bg-transparent !text-primary hover:!bg-accent/60 hover:!text-primary",
+                !showCollapsedSidebar && "min-w-0 flex-1",
+              )}
+              settingsPath="/settings/organization"
+              currentAppId="clips"
+              utilityLinks={workspaceUtilityLinks}
+            />
+            {collapseButton}
+          </div>
         </div>
       </aside>
 
diff --git a/templates/clips/app/components/library/library-primary-actions.tsx b/templates/clips/app/components/library/library-primary-actions.tsx
new file mode 100644
index 00000000000..a7c441bd670
--- /dev/null
+++ b/templates/clips/app/components/library/library-primary-actions.tsx
@@ -0,0 +1,57 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconVideoPlus } from "@tabler/icons-react";
+import { NavLink } from "react-router";
+
+import { ImportMenu } from "@/components/import-menu";
+
+import { PageHeaderActionGroup, PageHeaderPrimaryAction } from "./page-header";
+
+interface LibraryPrimaryActionsProps {
+  folderId?: string | null;
+  spaceId?: string | null;
+}
+
+function scopedPath(pathname: string, params: URLSearchParams) {
+  const query = params.toString();
+  return query ? `${pathname}?${query}` : pathname;
+}
+
+export function LibraryPrimaryActions({
+  folderId,
+  spaceId,
+}: LibraryPrimaryActionsProps) {
+  const t = useT();
+  const scope = new URLSearchParams();
+  if (spaceId) scope.set("spaceId", spaceId);
+  if (folderId) scope.set("folderId", folderId);
+
+  const recordHref = scopedPath("/record", scope);
+  const uploadParams = new URLSearchParams(scope);
+  uploadParams.set("autoUpload", "1");
+  const uploadHref = scopedPath("/record", uploadParams);
+  const importLoomHref = scopedPath("/import", scope);
+
+  return (
+    <PageHeaderActionGroup>
+      <PageHeaderPrimaryAction asChild>
+        <NavLink to={recordHref} aria-label={t("navigation.newRecording")}>
+          <IconVideoPlus />
+          <span className="hidden sm:inline">
+            {t("navigation.newRecording")}
+          </span>
+        </NavLink>
+      </PageHeaderPrimaryAction>
+      <ImportMenu
+        uploadHref={uploadHref}
+        importLoomHref={importLoomHref}
+        iconOnly
+        triggerIcon="chevron"
+        size="sm"
+        variant="default"
+        className="w-8 self-stretch border-s border-primary-foreground/20 px-0 shadow-none"
+        menuSide="bottom"
+        menuAlign="end"
+      />
+    </PageHeaderActionGroup>
+  );
+}
diff --git a/templates/clips/app/components/library/page-header.tsx b/templates/clips/app/components/library/page-header.tsx
index e498d2f8481..763bbbacb72 100644
--- a/templates/clips/app/components/library/page-header.tsx
+++ b/templates/clips/app/components/library/page-header.tsx
@@ -76,7 +76,10 @@ export const PageHeaderActionGroup = forwardRef<
   return (
     <ButtonGroup
       ref={ref}
-      className={cn("shrink-0 [&>*]:h-9", className)}
+      className={cn(
+        "shrink-0 [&>*]:h-9 has-[>input[data-button-group-ignore]]:[&>*:nth-last-child(2)]:!rounded-r-md",
+        className,
+      )}
       {...props}
     />
   );
diff --git a/templates/clips/app/components/library/recording-card.test.ts b/templates/clips/app/components/library/recording-card.test.ts
index eda47f346bc..1b35f050d37 100644
--- a/templates/clips/app/components/library/recording-card.test.ts
+++ b/templates/clips/app/components/library/recording-card.test.ts
@@ -84,6 +84,23 @@ describe("library recording cards", () => {
     expect(source).toContain("{relative}");
   });
 
+  it("balances recording metadata across the card width", () => {
+    const source = readSource("./recording-card.tsx");
+
+    expect(source).toContain(
+      'className="relative z-10 flex flex-1 flex-col gap-2 p-4 pointer-events-none"',
+    );
+    expect(source).toContain('className="flex items-center gap-3"');
+    expect(source).toContain(
+      'className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground"',
+    );
+    expect(source).toContain('className="flex min-w-0 items-center gap-1.5"');
+    expect(source).toContain(
+      'className="flex items-center justify-self-end gap-x-2 whitespace-nowrap"',
+    );
+    expect(source).toContain('className="whitespace-nowrap"');
+  });
+
   it("waits for the delete menu to close before removing a card", () => {
     const source = readSource("./recording-card.tsx");
 
diff --git a/templates/clips/app/components/library/recording-card.tsx b/templates/clips/app/components/library/recording-card.tsx
index af6977437bf..ee3d6729811 100644
--- a/templates/clips/app/components/library/recording-card.tsx
+++ b/templates/clips/app/components/library/recording-card.tsx
@@ -461,7 +461,7 @@ export function RecordingCard({
 
           {/* Body */}
           <div className="relative z-10 flex flex-1 flex-col gap-2 p-4 pointer-events-none">
-            <div className="flex items-start gap-3">
+            <div className="flex items-center gap-3">
               <div className="min-w-0 flex-1">
                 {hasDefaultTitle ? (
                   <Skeleton
@@ -473,60 +473,6 @@ export function RecordingCard({
                     {displayTitle}
                   </div>
                 )}
-                <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-                  <span className="inline-flex min-w-0 items-center gap-1.5">
-                    <ClipsAvatar
-                      email={recording.ownerEmail}
-                      alt={displayOwnerName}
-                      fallback={ownerInitials}
-                      className="h-4 w-4 shrink-0"
-                      fallbackClassName="bg-primary/15 text-[8px] text-primary"
-                    />
-                    <span className="min-w-0 truncate">{displayOwnerName}</span>
-                  </span>
-                  <span aria-hidden className="text-muted-foreground/60">
-                    •
-                  </span>
-                  <time dateTime={recording.createdAt} className="shrink-0">
-                    {relative}
-                  </time>
-                </div>
-                <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-                  <span className="inline-flex items-center gap-1.5">
-                    <PrivacyIcon
-                      visibility={recording.visibility}
-                      className="shrink-0"
-                    />
-                    <span>{visibilityLabel}</span>
-                  </span>
-                  <span aria-hidden className="text-muted-foreground/60">
-                    •
-                  </span>
-                  {recording.viewCount > 0 && !readOnly ? (
-                    <ViewedByPopover
-                      recordingId={recording.id}
-                      className="pointer-events-auto underline-offset-2 hover:underline hover:text-foreground"
-                    >
-                      {t("clipsFinalRaw.viewsCount", {
-                        count: recording.viewCount,
-                      })}
-                    </ViewedByPopover>
-                  ) : (
-                    <span>
-                      {t("clipsFinalRaw.viewsCount", {
-                        count: recording.viewCount,
-                      })}
-                    </span>
-                  )}
-                  {recording.agentViewCount > 0 ? (
-                    <AgentViewCount
-                      count={recording.agentViewCount}
-                      label={t("recordingInsights.agentViewsCount", {
-                        count: recording.agentViewCount,
-                      })}
-                    />
-                  ) : null}
-                </div>
               </div>
 
               {showActions && (
@@ -630,6 +576,63 @@ export function RecordingCard({
               )}
             </div>
 
+            <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
+              <div className="flex min-w-0 items-center gap-1.5">
+                <ClipsAvatar
+                  email={recording.ownerEmail}
+                  alt={displayOwnerName}
+                  fallback={ownerInitials}
+                  className="h-4 w-4 shrink-0"
+                  fallbackClassName="bg-primary/15 text-[8px] text-primary"
+                />
+                <span className="min-w-0 truncate">{displayOwnerName}</span>
+              </div>
+
+              <div className="flex items-center justify-self-end gap-x-2 whitespace-nowrap">
+                {recording.viewCount > 0 && !readOnly ? (
+                  <ViewedByPopover
+                    recordingId={recording.id}
+                    className="pointer-events-auto underline-offset-2 hover:text-foreground hover:underline"
+                  >
+                    {t("clipsFinalRaw.viewsCount", {
+                      count: recording.viewCount,
+                    })}
+                  </ViewedByPopover>
+                ) : (
+                  <span>
+                    {t("clipsFinalRaw.viewsCount", {
+                      count: recording.viewCount,
+                    })}
+                  </span>
+                )}
+                {recording.agentViewCount > 0 ? (
+                  <AgentViewCount
+                    count={recording.agentViewCount}
+                    label={t("recordingInsights.agentViewsCount", {
+                      count: recording.agentViewCount,
+                    })}
+                  />
+                ) : null}
+              </div>
+
+              <time
+                dateTime={recording.createdAt}
+                className="whitespace-nowrap"
+              >
+                {relative}
+              </time>
+
+              <div className="flex items-center justify-self-end gap-1.5 whitespace-nowrap">
+                <span className="inline-flex items-center gap-1.5">
+                  <PrivacyIcon
+                    visibility={recording.visibility}
+                    className="shrink-0"
+                  />
+                  <span>{visibilityLabel}</span>
+                </span>
+              </div>
+            </div>
+
             {recording.tags.length > 0 && (
               <div className="flex items-center gap-1 truncate">
                 {recording.tags.slice(0, 2).map((t) => (
diff --git a/templates/clips/app/components/library/search-bar.test.tsx b/templates/clips/app/components/library/search-bar.test.tsx
index 2cc9730e9c8..acd8ed2cf79 100644
--- a/templates/clips/app/components/library/search-bar.test.tsx
+++ b/templates/clips/app/components/library/search-bar.test.tsx
@@ -116,10 +116,10 @@ describe("SearchBar command-menu handoff", () => {
     expect(mocks.setSearchParams).not.toHaveBeenCalled();
   });
 
-  it("shows the slash shortcut for inline recording search", () => {
+  it("shows the global command shortcut", () => {
     act(() => root.render(<SearchBar />));
 
-    expect(container.textContent).toContain("/");
+    expect(container.textContent).toContain("cmd+k");
     const input = container.querySelector<HTMLInputElement>("input");
     expect(input?.type).toBe("search");
     expect(input?.getAttribute("aria-label")).toBe("searchBar.placeholder");
@@ -127,8 +127,8 @@ describe("SearchBar command-menu handoff", () => {
     expect(input?.className).toContain("focus-visible:ring-offset-0");
     expect(input?.className).toContain("focus-visible:ring-ring/40");
     expect(container.querySelector("kbd")?.dataset.slot).toBe("kbd");
-    expect(container.querySelector("kbd")?.textContent).toBe("/");
-    expect(container.textContent).not.toContain("cmd+k");
+    expect(container.querySelector("kbd")?.textContent).toBe("cmd+k");
+    expect(container.textContent).not.toContain("/");
   });
 
   it("searches only the latest query after 200ms", () => {
diff --git a/templates/clips/app/components/library/search-bar.tsx b/templates/clips/app/components/library/search-bar.tsx
index b123c78b244..8d74b2c5e89 100644
--- a/templates/clips/app/components/library/search-bar.tsx
+++ b/templates/clips/app/components/library/search-bar.tsx
@@ -108,29 +108,15 @@ export function SearchBar({ className, side = "right" }: SearchBarProps) {
     return () => cancelAnimationFrame(frame);
   }, [focusSearchInput, routeRequestsFocus, setSearchParams]);
 
-  // "/" is the inline search shortcut. Cmd+K belongs to the app command menu.
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (
-        e.key === "/" &&
-        !e.metaKey &&
-        !e.ctrlKey &&
-        !e.altKey &&
-        (e.target as HTMLElement)?.tagName?.toLowerCase() !== "input" &&
-        (e.target as HTMLElement)?.tagName?.toLowerCase() !== "textarea" &&
-        !(e.target as HTMLElement)?.isContentEditable
-      ) {
-        e.preventDefault();
-        focusSearchInput();
-      }
-      if (e.key === "Escape") {
-        setOpen(false);
-        inputRef.current?.blur();
-      }
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      inputRef.current?.blur();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [focusSearchInput]);
+  }, []);
 
   function pickResult(hit: SearchHit) {
     setOpen(false);
@@ -184,7 +170,7 @@ export function SearchBar({ className, side = "right" }: SearchBarProps) {
                 aria-hidden="true"
                 className="absolute end-1.5 top-1/2 h-5 -translate-y-1/2 px-1 font-mono text-[10px]"
               >
-                {shortcutLabel("/")}
+                {shortcutLabel("cmd+k")}
               </Kbd>
             )}
           </div>
diff --git a/templates/clips/app/components/library/sidebar-feedback-button.tsx b/templates/clips/app/components/library/sidebar-feedback-button.tsx
new file mode 100644
index 00000000000..c8d71b403b1
--- /dev/null
+++ b/templates/clips/app/components/library/sidebar-feedback-button.tsx
@@ -0,0 +1,48 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconMessageCircle } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { openBugReportDialog } from "@/lib/command-events";
+
+interface SidebarFeedbackButtonProps {
+  collapsed: boolean;
+}
+
+export function SidebarFeedbackButton({
+  collapsed,
+}: SidebarFeedbackButtonProps) {
+  const t = useT();
+  const label = t("bugReportRoute.sidebarCta");
+
+  const button = (
+    <Button
+      type="button"
+      size={collapsed ? "icon" : "sm"}
+      variant="ghost"
+      aria-label={collapsed ? label : undefined}
+      onClick={openBugReportDialog}
+      className={
+        collapsed
+          ? "size-9 bg-transparent text-primary hover:bg-accent/60 hover:text-primary"
+          : "h-9 w-full justify-start gap-2 bg-transparent px-3 font-medium text-primary hover:bg-accent/60 hover:text-primary"
+      }
+    >
+      <IconMessageCircle className="size-4 shrink-0 text-primary" />
+      {!collapsed && <span>{label}</span>}
+    </Button>
+  );
+
+  if (!collapsed) return button;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side="right">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/templates/clips/app/components/player/comments-panel.test.tsx b/templates/clips/app/components/player/comments-panel.test.tsx
index 31c73d6df0e..325a9a2b81c 100644
--- a/templates/clips/app/components/player/comments-panel.test.tsx
+++ b/templates/clips/app/components/player/comments-panel.test.tsx
@@ -266,6 +266,17 @@ describe("CommentsPanel reply composer", () => {
     expect(container.querySelector("kbd")?.textContent).toBe("Enter");
   });
 
+  it("keeps inline comments scrollable with the composer available", () => {
+    renderPanel("viewer@example.com", [rootComment], "inline");
+
+    const panel = container.firstElementChild as HTMLElement | null;
+    const listRegion = container.querySelector("ul")?.parentElement;
+
+    expect(panel?.className).toContain("lg:h-full");
+    expect(listRegion?.className).toContain("lg:overflow-y-auto");
+    expect(listRegion?.className).toContain("lg:overscroll-contain");
+  });
+
   it("opens account creation when a signed-out viewer activates the composer", () => {
     const onUnauthenticated = vi.fn();
 
diff --git a/templates/clips/app/components/player/comments-panel.tsx b/templates/clips/app/components/player/comments-panel.tsx
index 20c582749ba..e062920d891 100644
--- a/templates/clips/app/components/player/comments-panel.tsx
+++ b/templates/clips/app/components/player/comments-panel.tsx
@@ -506,7 +506,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
       )}
     >
       {isInlinePresentation && enableComments ? (
-        <div className="mb-5 shrink-0">{composer}</div>
+        <div className="mb-3 shrink-0">{composer}</div>
       ) : null}
       <div
         className={cn(
@@ -524,7 +524,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
             isInlinePresentation={isInlinePresentation}
           />
         ) : (
-          <ul className="space-y-5">
+          <ul className="space-y-3">
             {sortedThreads.map((thread) => {
               const root = thread[0];
               const replies = thread.slice(1);
diff --git a/templates/clips/app/components/player/viewer-controls.tsx b/templates/clips/app/components/player/viewer-controls.tsx
index a723177c7d0..48849c5c44a 100644
--- a/templates/clips/app/components/player/viewer-controls.tsx
+++ b/templates/clips/app/components/player/viewer-controls.tsx
@@ -85,7 +85,7 @@ export const ViewerTabsList = React.forwardRef<
     ref={ref}
     variant="line"
     className={cn(
-      "h-10 w-full shrink-0 justify-start overflow-x-auto rounded-none p-0",
+      "h-10 min-h-10 w-fit max-w-full shrink-0 justify-start overflow-x-auto rounded-none px-3 py-0",
       className,
     )}
     {...props}
@@ -100,7 +100,7 @@ export const ViewerTabsTrigger = React.forwardRef<
   <TabsTrigger
     ref={ref}
     className={cn(
-      "h-10 min-w-0 rounded-none px-2 py-0 text-xs after:bottom-0",
+      "h-10 min-w-0 flex-none rounded-none px-2 py-0 text-sm data-[state=active]:after:bottom-0 data-[state=active]:after:inset-x-2",
       className,
     )}
     {...props}
diff --git a/templates/clips/app/components/ui/tabs.tsx b/templates/clips/app/components/ui/tabs.tsx
index 5b099e45ff3..d93570437e9 100644
--- a/templates/clips/app/components/ui/tabs.tsx
+++ b/templates/clips/app/components/ui/tabs.tsx
@@ -62,7 +62,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-[color,background-color,border-color,box-shadow] group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
diff --git a/templates/clips/app/hooks/use-command-search.ts b/templates/clips/app/hooks/use-command-search.ts
new file mode 100644
index 00000000000..34efacac761
--- /dev/null
+++ b/templates/clips/app/hooks/use-command-search.ts
@@ -0,0 +1,53 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+
+export interface MeetingCommandSearchHit {
+  id: string;
+  title: string;
+  recordingId?: string | null;
+  scheduledStart?: string | null;
+  actualStart?: string | null;
+  snippet?: string | null;
+  matchType?: string;
+}
+
+export interface DictationCommandSearchHit {
+  id: string;
+  fullText: string;
+  cleanedText?: string | null;
+  snippet?: string | null;
+  durationMs: number;
+  source: string;
+  targetApp?: string | null;
+  startedAt: string;
+  createdAt: string;
+}
+
+export function useMeetingCommandSearch(query: string) {
+  const trimmedQuery = query.trim();
+  return useActionQuery<{
+    query: string;
+    meetings: MeetingCommandSearchHit[];
+  }>(
+    "search-meetings",
+    trimmedQuery ? { query: trimmedQuery, limit: 8 } : undefined,
+    {
+      enabled: trimmedQuery.length >= 2,
+      retry: false,
+    },
+  );
+}
+
+export function useDictationCommandSearch(query: string) {
+  const trimmedQuery = query.trim();
+  return useActionQuery<{
+    query: string;
+    dictations: DictationCommandSearchHit[];
+  }>(
+    "search-dictations",
+    trimmedQuery ? { query: trimmedQuery, limit: 8 } : undefined,
+    {
+      enabled: trimmedQuery.length >= 2,
+      retry: false,
+    },
+  );
+}
diff --git a/templates/clips/app/hooks/use-upload-video-picker.tsx b/templates/clips/app/hooks/use-upload-video-picker.tsx
index 7ced4fac68b..82b2ccba8dd 100644
--- a/templates/clips/app/hooks/use-upload-video-picker.tsx
+++ b/templates/clips/app/hooks/use-upload-video-picker.tsx
@@ -37,6 +37,7 @@ export function useUploadVideoPicker(): {
         type="file"
         accept={VIDEO_ACCEPT}
         className="hidden"
+        data-button-group-ignore="true"
         onChange={handleChange}
       />
     ),
diff --git a/templates/clips/app/i18n/ar-SA.ts b/templates/clips/app/i18n/ar-SA.ts
index 30f4f7a361d..f7dd11583e4 100644
--- a/templates/clips/app/i18n/ar-SA.ts
+++ b/templates/clips/app/i18n/ar-SA.ts
@@ -63,6 +63,7 @@ const messages = {
     extensions: "الإضافات",
     newRecording: "تسجيل جديد",
     folders: "المجلدات",
+    recordings: "التسجيلات",
     newFolder: "مجلد جديد",
     noSpaces: "لا توجد مساحات بعد",
     desktopCta: "الحصول على تطبيق سطح المكتب",
@@ -1715,6 +1716,7 @@ const messages = {
     donePageTitle: "تم إرسال تقرير الخطأ · Clips",
     eyebrow: "تقرير خطأ",
     title: "تسجيل تقرير خطأ",
+    sidebarCta: "إرسال ملاحظات",
     description:
       "سجّل إعادة إنتاج قصيرة تتضمن الشاشة والصوت وسياق المتصفح بعد تنقيحه لفريقك.",
     issueTitleLabel: "عنوان المشكلة",
diff --git a/templates/clips/app/i18n/de-DE.ts b/templates/clips/app/i18n/de-DE.ts
index c14e28d32b8..db4d7f1140c 100644
--- a/templates/clips/app/i18n/de-DE.ts
+++ b/templates/clips/app/i18n/de-DE.ts
@@ -64,6 +64,7 @@ const messages = {
     extensions: "Erweiterungen",
     newRecording: "Neue Aufnahme",
     folders: "Ordner",
+    recordings: "Aufnahmen",
     newFolder: "Neuer Ordner",
     noSpaces: "Noch keine Bereiche",
     desktopCta: "Desktop-App laden",
@@ -1749,6 +1750,7 @@ const messages = {
     donePageTitle: "Fehlerbericht gesendet · Clips",
     eyebrow: "Fehlerbericht",
     title: "Fehlerbericht aufnehmen",
+    sidebarCta: "Feedback senden",
     description:
       "Nimm eine kurze Reproduktion mit Bildschirm, Stimme und redigiertem Browserkontext für dein Team auf.",
     issueTitleLabel: "Titel des Problems",
diff --git a/templates/clips/app/i18n/en-US.ts b/templates/clips/app/i18n/en-US.ts
index 3f5b0790adc..84d0e6bc486 100644
--- a/templates/clips/app/i18n/en-US.ts
+++ b/templates/clips/app/i18n/en-US.ts
@@ -64,6 +64,7 @@ const messages = {
     extensions: "Extensions",
     newRecording: "New recording",
     folders: "Folders",
+    recordings: "Recordings",
     newFolder: "New folder",
     noSpaces: "No spaces yet",
     desktopCta: "Get desktop app",
@@ -1697,6 +1698,7 @@ const messages = {
     donePageTitle: "Bug report submitted · Clips",
     eyebrow: "Bug report",
     title: "Record a bug report",
+    sidebarCta: "Send feedback",
     description:
       "Capture a short repro with screen, voice, and redacted browser context for your team.",
     issueTitleLabel: "Issue title",
diff --git a/templates/clips/app/i18n/es-ES.ts b/templates/clips/app/i18n/es-ES.ts
index 0ca2bb18b0f..5655415f109 100644
--- a/templates/clips/app/i18n/es-ES.ts
+++ b/templates/clips/app/i18n/es-ES.ts
@@ -64,6 +64,7 @@ const messages = {
     extensions: "Extensiones",
     newRecording: "Nueva grabación",
     folders: "Carpetas",
+    recordings: "Grabaciones",
     newFolder: "Nueva carpeta",
     noSpaces: "Aún no hay espacios",
     desktopCta: "Obtener la app de escritorio",
@@ -1739,6 +1740,7 @@ const messages = {
     donePageTitle: "Informe de error enviado · Clips",
     eyebrow: "Informe de error",
     title: "Grabar un informe de error",
+    sidebarCta: "Enviar comentarios",
     description:
       "Captura una reproducción breve con pantalla, voz y contexto del navegador redactado para tu equipo.",
     issueTitleLabel: "Título del problema",
diff --git a/templates/clips/app/i18n/fr-FR.ts b/templates/clips/app/i18n/fr-FR.ts
index 658f064bb7f..120df44c0aa 100644
--- a/templates/clips/app/i18n/fr-FR.ts
+++ b/templates/clips/app/i18n/fr-FR.ts
@@ -64,6 +64,7 @@ const messages = {
     extensions: "Rallonges",
     newRecording: "Nouvel enregistrement",
     folders: "Dossiers",
+    recordings: "Enregistrements",
     newFolder: "Nouveau dossier",
     noSpaces: "Aucun espace pour le moment",
     desktopCta: "Obtenir l’app de bureau",
@@ -1744,6 +1745,7 @@ const messages = {
     donePageTitle: "Rapport de bug envoyé · Clips",
     eyebrow: "Rapport de bug",
     title: "Enregistrer un rapport de bug",
+    sidebarCta: "Envoyer des commentaires",
     description:
       "Capturez une courte reproduction avec écran, voix et contexte navigateur expurgé pour votre équipe.",
     issueTitleLabel: "Titre du problème",
diff --git a/templates/clips/app/i18n/hi-IN.ts b/templates/clips/app/i18n/hi-IN.ts
index 8e08cac9c33..3dc7c0a25e6 100644
--- a/templates/clips/app/i18n/hi-IN.ts
+++ b/templates/clips/app/i18n/hi-IN.ts
@@ -64,6 +64,7 @@ const messages = {
     extensions: "एक्सटेंशन",
     newRecording: "नई रिकॉर्डिंग",
     folders: "फ़ोल्डर",
+    recordings: "रिकॉर्डिंग",
     newFolder: "नया फ़ोल्डर",
     noSpaces: "अभी कोई स्पेस नहीं",
     desktopCta: "डेस्कटॉप ऐप पाएँ",
@@ -1691,6 +1692,7 @@ const messages = {
     donePageTitle: "बग रिपोर्ट सबमिट हुई · Clips",
     eyebrow: "बग रिपोर्ट",
     title: "बग रिपोर्ट रिकॉर्ड करें",
+    sidebarCta: "फ़ीडबैक भेजें",
     description:
       "अपनी टीम के लिए स्क्रीन, आवाज़ और संशोधित ब्राउज़र संदर्भ के साथ छोटा रेप्रो कैप्चर करें।",
     issueTitleLabel: "समस्या का शीर्षक",
diff --git a/templates/clips/app/i18n/ja-JP.ts b/templates/clips/app/i18n/ja-JP.ts
index 63c23a047b4..814721bf317 100644
--- a/templates/clips/app/i18n/ja-JP.ts
+++ b/templates/clips/app/i18n/ja-JP.ts
@@ -64,6 +64,7 @@ const messages = {
     extensions: "拡張機能",
     newRecording: "新規録画",
     folders: "フォルダ",
+    recordings: "録画",
     newFolder: "新規フォルダ",
     noSpaces: "スペースはまだありません",
     desktopCta: "デスクトップアプリを入手",
@@ -1734,6 +1735,7 @@ const messages = {
     donePageTitle: "バグレポートを送信しました · Clips",
     eyebrow: "バグレポート",
     title: "バグレポートを録画",
+    sidebarCta: "フィードバックを送る",
     description:
       "画面、音声、編集済みのブラウザーコンテキストで短い再現手順をチーム向けに記録します。",
     issueTitleLabel: "問題のタイトル",
diff --git a/templates/clips/app/i18n/ko-KR.ts b/templates/clips/app/i18n/ko-KR.ts
index 9856f783607..0b581b04fff 100644
--- a/templates/clips/app/i18n/ko-KR.ts
+++ b/templates/clips/app/i18n/ko-KR.ts
@@ -64,6 +64,7 @@ const messages = {
     extensions: "확장 프로그램",
     newRecording: "새 녹화",
     folders: "폴더",
+    recordings: "녹화",
     newFolder: "새 폴더",
     noSpaces: "아직 스페이스가 없습니다",
     desktopCta: "데스크톱 앱 받기",
@@ -1711,6 +1712,7 @@ const messages = {
     donePageTitle: "버그 리포트 제출됨 · Clips",
     eyebrow: "버그 리포트",
     title: "버그 리포트 녹화",
+    sidebarCta: "피드백 보내기",
     description:
       "팀을 위해 화면, 음성, 정리된 브라우저 컨텍스트로 짧은 재현 영상을 캡처합니다.",
     issueTitleLabel: "문제 제목",
diff --git a/templates/clips/app/i18n/pt-BR.ts b/templates/clips/app/i18n/pt-BR.ts
index e60082967d2..50339d78f36 100644
--- a/templates/clips/app/i18n/pt-BR.ts
+++ b/templates/clips/app/i18n/pt-BR.ts
@@ -64,6 +64,7 @@ const messages = {
     extensions: "Extensões",
     newRecording: "Nova gravação",
     folders: "Pastas",
+    recordings: "Gravações",
     newFolder: "Nova pasta",
     noSpaces: "Ainda não há espaços",
     desktopCta: "Baixar app desktop",
@@ -1730,6 +1731,7 @@ const messages = {
     donePageTitle: "Relatório de bug enviado · Clips",
     eyebrow: "Relatório de bug",
     title: "Gravar um relatório de bug",
+    sidebarCta: "Enviar feedback",
     description:
       "Capture uma reprodução curta com tela, voz e contexto do navegador redigido para sua equipe.",
     issueTitleLabel: "Título do problema",
diff --git a/templates/clips/app/i18n/zh-CN.ts b/templates/clips/app/i18n/zh-CN.ts
index d6a2316645e..6e057ff51bb 100644
--- a/templates/clips/app/i18n/zh-CN.ts
+++ b/templates/clips/app/i18n/zh-CN.ts
@@ -62,6 +62,7 @@ const messages = {
     extensions: "扩展",
     newRecording: "新建录制",
     folders: "文件夹",
+    recordings: "录制",
     newFolder: "新建文件夹",
     noSpaces: "暂无空间",
     desktopCta: "获取桌面应用",
@@ -1648,6 +1649,7 @@ const messages = {
     donePageTitle: "错误报告已提交 · Clips",
     eyebrow: "错误报告",
     title: "录制错误报告",
+    sidebarCta: "发送反馈",
     description: "为团队捕获一段包含屏幕、语音和已脱敏浏览器上下文的简短复现。",
     issueTitleLabel: "问题标题",
     issueTitlePlaceholder: "哪里出了问题？",
diff --git a/templates/clips/app/i18n/zh-TW.ts b/templates/clips/app/i18n/zh-TW.ts
index 775c1762f76..31a25232081 100644
--- a/templates/clips/app/i18n/zh-TW.ts
+++ b/templates/clips/app/i18n/zh-TW.ts
@@ -62,6 +62,7 @@ const messages = {
     extensions: "擴充功能",
     newRecording: "新建錄製",
     folders: "資料夾",
+    recordings: "錄製",
     newFolder: "新建資料夾",
     noSpaces: "暫無空間",
     desktopCta: "取得桌面應用",
@@ -1632,6 +1633,7 @@ const messages = {
     donePageTitle: "錯誤報告已提交 · Clips",
     eyebrow: "錯誤報告",
     title: "錄製錯誤報告",
+    sidebarCta: "傳送意見回饋",
     description: "為團隊擷取一段包含螢幕、語音和已遮蔽瀏覽器脈絡的簡短重現。",
     issueTitleLabel: "問題標題",
     issueTitlePlaceholder: "哪裡出錯了？",
diff --git a/templates/clips/app/lib/command-events.ts b/templates/clips/app/lib/command-events.ts
new file mode 100644
index 00000000000..efdfc551bc0
--- /dev/null
+++ b/templates/clips/app/lib/command-events.ts
@@ -0,0 +1,7 @@
+export const OPEN_CREATE_FOLDER_EVENT = "clips:open-create-folder";
+export const OPEN_CREATE_SPACE_EVENT = "clips:open-create-space";
+export const OPEN_BUG_REPORT_EVENT = "clips:open-bug-report";
+
+export function openBugReportDialog() {
+  window.dispatchEvent(new Event(OPEN_BUG_REPORT_EVENT));
+}
diff --git a/templates/clips/app/root-search-command.test.ts b/templates/clips/app/root-search-command.test.ts
index 073c7d177d8..10ddce493ad 100644
--- a/templates/clips/app/root-search-command.test.ts
+++ b/templates/clips/app/root-search-command.test.ts
@@ -3,15 +3,19 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 
 describe("Clips command-menu search action", () => {
-  it("routes Search through the focus intent instead of a no-op", () => {
+  it("registers Search through the dynamic Clips command menu", () => {
     const source = readFileSync(new URL("./root.tsx", import.meta.url), "utf8");
-
-    expect(source).toContain(
-      'import { SEARCH_FOCUS_PATH } from "@/lib/search-focus";',
-    );
-    expect(source).toContain(
-      "<CommandMenu.Item onSelect={() => navigate(SEARCH_FOCUS_PATH)}>",
+    const menuSource = readFileSync(
+      new URL("./components/clips-command-menu.tsx", import.meta.url),
+      "utf8",
     );
-    expect(source).not.toContain("<CommandMenu.Item onSelect={() => {}}>");
+
+    expect(source).toContain("<ClipsCommandMenu");
+    expect(menuSource).toContain("useRecordingSearch(search.trim())");
+    expect(menuSource).toContain("useMeetingCommandSearch(search)");
+    expect(menuSource).toContain("useDictationCommandSearch(search)");
+    expect(menuSource).toContain("SEARCH_FOCUS_PATH");
+    expect(menuSource).toContain("openBugReportDialog");
+    expect(menuSource).not.toContain("<CommandMenu.Item onSelect={() => {}}>");
   });
 });
diff --git a/templates/clips/app/root.tsx b/templates/clips/app/root.tsx
index 84a90db62ab..643d8c9cbff 100644
--- a/templates/clips/app/root.tsx
+++ b/templates/clips/app/root.tsx
@@ -13,22 +13,11 @@ import {
   type LocalizationPreference,
   useT,
 } from "@agent-native/core/client/i18n";
-import {
-  CommandMenu,
-  useCommandMenuShortcut,
-} from "@agent-native/core/client/navigation";
 import { getThemeInitScript } from "@agent-native/core/client/ui";
 import { resolveLocaleFromRequest } from "@agent-native/core/server";
-import { docsUrl } from "@agent-native/core/shared";
-import {
-  IconHierarchy2,
-  IconCheck,
-  IconSun,
-  IconMoon,
-} from "@tabler/icons-react";
+import { IconCheck } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
-import { useTheme } from "next-themes";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Links,
   Meta,
@@ -37,11 +26,12 @@ import {
   ScrollRestoration,
   useLoaderData,
   useLocation,
-  useNavigate,
   useRouteLoaderData,
 } from "react-router";
 import type { LinksFunction, LoaderFunctionArgs } from "react-router";
 
+import { BugReportDialog } from "@/components/bug-report/bug-report-dialog";
+import { ClipsCommandMenu } from "@/components/clips-command-menu";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -55,9 +45,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { AppToolkitProvider } from "@/components/ui/toolkit-provider";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { isStandalonePublicPath } from "@/lib/public-ssr-paths";
-import { SEARCH_FOCUS_PATH } from "@/lib/search-focus";
 
-import changelog from "../CHANGELOG.md?raw";
 import { i18nCatalog, loadI18nMessages } from "./i18n";
 
 import stylesheet from "./global.css?url";
@@ -200,21 +188,6 @@ function DbSyncSetup() {
   return null;
 }
 
-function ThemeToggleItem() {
-  const { resolvedTheme, setTheme } = useTheme();
-  const t = useT();
-  const isDark = resolvedTheme === "dark";
-  return (
-    <CommandMenu.Item
-      onSelect={() => setTheme(isDark ? "light" : "dark")}
-      keywords={["theme", "dark", "light", "mode"]}
-    >
-      {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
-      {t("root.toggleTheme")}
-    </CommandMenu.Item>
-  );
-}
-
 type ExternalChromeRuntime = {
   lastError?: { message?: string };
   sendMessage: (
@@ -224,29 +197,6 @@ type ExternalChromeRuntime = {
   ) => void;
 };
 
-const CLIPS_COMMAND_DOCS = [
-  {
-    title: "Use the Chrome extension for browser logs",
-    description:
-      "Record a browser tab with redacted console logs, JavaScript exceptions, and fetch/XHR diagnostics.",
-    href: docsUrl("template-clips-capture-everywhere", {
-      hash: "browser-logs-with-the-chrome-extension",
-    }),
-    keywords: [
-      "logs",
-      "browser logs",
-      "developer logs",
-      "console logs",
-      "network logs",
-      "fetch",
-      "xhr",
-      "diagnostics",
-      "chrome extension",
-      "recording",
-    ],
-  },
-] satisfies React.ComponentProps<typeof CommandMenu.DocsGroup>["docs"];
-
 function ClipsExtensionAuthBridge() {
   const location = useLocation();
   const t = useT();
@@ -336,43 +286,17 @@ function AppContent() {
 
 function PrivateAppContent() {
   const location = useLocation();
-  const navigate = useNavigate();
-  const t = useT();
   const standalonePublic = isStandalonePublicPath(location.pathname);
   const [cmdkOpen, setCmdkOpen] = useState(false);
-  useCommandMenuShortcut(
-    useCallback(() => {
-      if (!standalonePublic) setCmdkOpen(true);
-    }, [standalonePublic]),
-  );
 
   return (
     <>
       {standalonePublic ? null : <DbSyncSetup />}
       {standalonePublic ? null : <ClipsExtensionAuthBridge />}
       {standalonePublic ? null : (
-        <CommandMenu
-          open={cmdkOpen}
-          onOpenChange={setCmdkOpen}
-          changelog={changelog}
-          changelogLabel={t("settings.whatsNew")}
-          changelogKey="clips"
-        >
-          <CommandMenu.Group heading={t("root.commandActions")}>
-            <CommandMenu.Item onSelect={() => navigate("/settings/agent")}>
-              <IconHierarchy2 size={16} />
-              {t("root.openAgent")}
-            </CommandMenu.Item>
-            <CommandMenu.Item onSelect={() => navigate(SEARCH_FOCUS_PATH)}>
-              {t("root.commandSearch")}
-            </CommandMenu.Item>
-          </CommandMenu.Group>
-          <CommandMenu.DocsGroup docs={CLIPS_COMMAND_DOCS} />
-          <CommandMenu.Group heading={t("root.commandAppearance")}>
-            <ThemeToggleItem />
-          </CommandMenu.Group>
-        </CommandMenu>
+        <ClipsCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
       )}
+      {standalonePublic ? null : <BugReportDialog />}
       {standalonePublic ? null : <DevOverlay />}
       <Outlet />
     </>
diff --git a/templates/clips/app/routes/_app.dictate.tsx b/templates/clips/app/routes/_app.dictate.tsx
index e82a8d90403..ce51001e321 100644
--- a/templates/clips/app/routes/_app.dictate.tsx
+++ b/templates/clips/app/routes/_app.dictate.tsx
@@ -18,6 +18,7 @@ import {
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useSearchParams } from "react-router";
 import { toast } from "sonner";
 
 import { CaptureInstallButton } from "@/components/capture-install-options";
@@ -390,9 +391,16 @@ function WebDictationPanel({
   );
 }
 
-function DictationRow({ dictation }: { dictation: Dictation }) {
+function DictationRow({
+  dictation,
+  initialExpanded = false,
+}: {
+  dictation: Dictation;
+  initialExpanded?: boolean;
+}) {
   const t = useT();
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(initialExpanded);
+  const rowRef = useRef<HTMLDivElement>(null);
   const qc = useQueryClient();
   const cleanup = useActionMutation<any, { id: string }>("cleanup-dictation");
   const replaceOriginal = useActionMutation<
@@ -401,6 +409,11 @@ function DictationRow({ dictation }: { dictation: Dictation }) {
   >("update-dictation");
   const { label, icon } = sourceMeta(dictation.source, t);
 
+  useEffect(() => {
+    if (!initialExpanded) return;
+    rowRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+  }, [initialExpanded]);
+
   const preview = (dictation.cleanedText || dictation.fullText || "").slice(
     0,
     140,
@@ -455,6 +468,7 @@ function DictationRow({ dictation }: { dictation: Dictation }) {
 
   return (
     <div
+      ref={rowRef}
       className={cn(
         "border-b border-border last:border-b-0 cursor-pointer",
         expanded ? "bg-accent/20" : "hover:bg-accent/10",
@@ -717,6 +731,8 @@ function DictateEmptyState({
 
 export default function DictateRoute() {
   const t = useT();
+  const [searchParams] = useSearchParams();
+  const selectedDictationId = searchParams.get("dictationId");
   const { isDesktopApp } = useDesktopPromo();
   const [filter, setFilter] = useState<SourceFilter>("all");
   const [listening, setListening] = useState(false);
@@ -1037,7 +1053,11 @@ export default function DictateRoute() {
                           </div>
                           <div>
                             {items.map((d) => (
-                              <DictationRow key={d.id} dictation={d} />
+                              <DictationRow
+                                key={d.id}
+                                dictation={d}
+                                initialExpanded={d.id === selectedDictationId}
+                              />
                             ))}
                           </div>
                         </div>
diff --git a/templates/clips/app/routes/_app.library._index.tsx b/templates/clips/app/routes/_app.library._index.tsx
index 32e5e030e90..187789cb270 100644
--- a/templates/clips/app/routes/_app.library._index.tsx
+++ b/templates/clips/app/routes/_app.library._index.tsx
@@ -1,13 +1,7 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { IconVideoPlus } from "@tabler/icons-react";
-import { NavLink } from "react-router";
 
-import { ImportMenu } from "@/components/import-menu";
 import { LibraryGrid } from "@/components/library/library-grid";
-import {
-  PageHeaderActionGroup,
-  PageHeaderPrimaryAction,
-} from "@/components/library/page-header";
+import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
 
 const SEO_TITLE = "Clips - Open Source screen recorder";
 const SEO_DESCRIPTION =
@@ -33,29 +27,7 @@ export default function LibraryIndexRoute() {
       view="library"
       folderId={null}
       title={t("navigation.library")}
-      extraActions={
-        <PageHeaderActionGroup>
-          <PageHeaderPrimaryAction asChild>
-            <NavLink to="/record" aria-label={t("navigation.newRecording")}>
-              <IconVideoPlus />
-              <span className="hidden sm:inline">
-                {t("navigation.newRecording")}
-              </span>
-            </NavLink>
-          </PageHeaderPrimaryAction>
-          <ImportMenu
-            uploadHref="/record?autoUpload=1"
-            importLoomHref="/import"
-            iconOnly
-            triggerIcon="chevron"
-            size="sm"
-            variant="default"
-            className="w-8 self-stretch border-s border-primary-foreground/20 px-0 shadow-none"
-            menuSide="bottom"
-            menuAlign="end"
-          />
-        </PageHeaderActionGroup>
-      }
+      extraActions={<LibraryPrimaryActions />}
     />
   );
 }
diff --git a/templates/clips/app/routes/_app.library.folder.$folderId.tsx b/templates/clips/app/routes/_app.library.folder.$folderId.tsx
index 1a447e3579e..3a384608321 100644
--- a/templates/clips/app/routes/_app.library.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.library.folder.$folderId.tsx
@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
+import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
 import { useFolders } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
@@ -29,6 +30,7 @@ export default function LibraryFolderRoute() {
       folderId={folderId}
       emptyKind="folder"
       title={folder?.name ?? t("navigation.folder")}
+      extraActions={<LibraryPrimaryActions folderId={folderId} />}
     />
   );
 }
diff --git a/templates/clips/app/routes/_app.meetings._index.tsx b/templates/clips/app/routes/_app.meetings._index.tsx
index 98ff9bb232c..5fe0333460e 100644
--- a/templates/clips/app/routes/_app.meetings._index.tsx
+++ b/templates/clips/app/routes/_app.meetings._index.tsx
@@ -601,21 +601,8 @@ function MeetingsHeader({
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement | null;
-      const tagName = target?.tagName.toLowerCase();
-      if (
-        event.key === "/" &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.altKey &&
-        tagName !== "input" &&
-        tagName !== "textarea" &&
-        !target?.isContentEditable
-      ) {
-        event.preventDefault();
-        inputRef.current?.focus();
-        inputRef.current?.select();
-      }
+      if (event.key !== "Escape") return;
+      inputRef.current?.blur();
     };
 
     window.addEventListener("keydown", onKeyDown);
@@ -658,7 +645,7 @@ function MeetingsHeader({
               aria-hidden="true"
               className="absolute end-1.5 top-1/2 h-5 -translate-y-1/2 px-1 font-mono text-[10px]"
             >
-              {shortcutLabel("/")}
+              {shortcutLabel("cmd+k")}
             </Kbd>
           )}
         </div>
diff --git a/templates/clips/app/routes/_app.r.$recordingId.test.ts b/templates/clips/app/routes/_app.r.$recordingId.test.ts
index 2880d1b6725..85775c27ab4 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.test.ts
+++ b/templates/clips/app/routes/_app.r.$recordingId.test.ts
@@ -102,7 +102,7 @@ describe("direct recording route shell cue", () => {
     expect(route).toContain('className="flex shrink-0 items-center gap-2"');
     expect(toolbar).toContain('className="flex items-center gap-2"');
     const contentColumnStart = route.indexOf(
-      'className="mx-auto flex min-h-0 w-full flex-1 flex-col gap-0 sm:gap-4 lg:max-w-[calc(177.778dvh-35.556rem)]"',
+      'className="mx-auto flex min-h-0 w-full flex-1 flex-col gap-0 sm:gap-4 lg:max-w-[min(100%,1600px,calc(177.778dvh-35.556rem))]"',
     );
     const contentColumn = route.slice(
       contentColumnStart,
@@ -113,7 +113,20 @@ describe("direct recording route shell cue", () => {
     expect(route).toContain(
       "gap-0 sm:gap-4 sm:px-5 sm:pb-5 sm:pt-4 lg:min-h-0 lg:flex-1 lg:overflow-hidden",
     );
-    expect(contentColumn).toContain("renderCommentsSection()");
+    expect(route).toContain(
+      "Let the viewer grow on wide displays without pushing the",
+    );
+    const commentsSectionStart = route.indexOf(
+      "const renderCommentsSection = (compact = false) =>",
+    );
+    const commentsSection = route.slice(
+      commentsSectionStart,
+      route.indexOf("const renderSidePanel", commentsSectionStart),
+    );
+    expect(commentsSectionStart).toBeGreaterThan(-1);
+    expect(commentsSection).toContain(
+      '"flex min-h-0 flex-1 flex-col overflow-hidden px-3 pb-3 pt-3"',
+    );
     expect(toolbar).not.toContain("renderSidebarToggleButton()");
     expect(toolbar).not.toContain("renderPanelTabs()");
     expect(route).toContain("<ViewerTabsList");
@@ -125,13 +138,12 @@ describe("direct recording route shell cue", () => {
     expect(route).toContain('value={panel ?? "comments"}');
     expect(route).toContain('if (value === "comments")');
     expect(route).toContain("openCommentsPanel();");
+    expect(route).toContain('value="comments"');
     expect(route).not.toContain("IconLayoutSidebarRightCollapse");
     expect(route).not.toContain("IconLayoutSidebarRightExpand");
     expect(route).not.toContain("closeSidePanel");
     expect(route).not.toContain("lastToolbarPanelRef");
-    expect(route).toContain(
-      '!editing && !isCompactLayout && panel && panel !== "comments"',
-    );
+    expect(route).toContain("!editing && !isCompactLayout && panel");
     const mobilePanelStart = route.indexOf('id="clip-activity-panel"');
     const mobilePanel = route.slice(
       mobilePanelStart,
@@ -178,7 +190,18 @@ describe("direct recording route shell cue", () => {
       resolve(process.cwd(), "app/components/player/viewer-controls.tsx"),
       "utf8",
     );
+    const tabs = readFileSync(
+      resolve(process.cwd(), "app/components/ui/tabs.tsx"),
+      "utf8",
+    );
     expect(viewerControls).toContain('variant="line"');
+    expect(viewerControls).toContain("min-h-10");
+    expect(viewerControls).toContain("w-fit max-w-full");
+    expect(viewerControls).toContain("flex-none");
+    expect(viewerControls).toContain("data-[state=active]:after:bottom-0");
+    expect(viewerControls).toContain("data-[state=active]:after:inset-x-2");
+    expect(tabs).toContain("transition-all");
+    expect(tabs).toContain("after:transition-opacity");
     expect(viewerControls).not.toContain("group-focus-visible:ring-2");
     expect(viewerControls).not.toContain("hover:bg-muted/50");
   });
diff --git a/templates/clips/app/routes/_app.r.$recordingId.tsx b/templates/clips/app/routes/_app.r.$recordingId.tsx
index 8e56458b519..b4366b9c121 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.tsx
+++ b/templates/clips/app/routes/_app.r.$recordingId.tsx
@@ -561,13 +561,15 @@ export default function RecordingPage() {
     const nextParams = new URLSearchParams(searchParams);
     nextParams.set("panel", "comments");
     setSearchParams(nextParams, { replace: true });
-    requestAnimationFrame(() => {
-      commentsSectionRef.current?.scrollIntoView({
-        block: "start",
-        behavior: "smooth",
+    if (isCompactLayout) {
+      requestAnimationFrame(() => {
+        commentsSectionRef.current?.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
       });
-    });
-  }, [searchParams, setSearchParams]);
+    }
+  }, [isCompactLayout, searchParams, setSearchParams]);
   const openAgentPanel = useCallback(() => {
     openSidePanel("agent");
   }, [openSidePanel]);
@@ -897,10 +899,12 @@ export default function RecordingPage() {
 
   useEffect(() => {
     if (panelParam === "comments") {
-      setPanel("comments");
-      requestAnimationFrame(() => {
-        commentsSectionRef.current?.scrollIntoView({ block: "start" });
-      });
+      setPanel(recording?.enableComments ? "comments" : "transcript");
+      if (isCompactLayout) {
+        requestAnimationFrame(() => {
+          commentsSectionRef.current?.scrollIntoView({ block: "start" });
+        });
+      }
       return;
     }
     if (
@@ -912,7 +916,7 @@ export default function RecordingPage() {
     ) {
       setPanel(panelParam === "insights" ? "transcript" : panelParam);
     }
-  }, [canEdit, panelParam]);
+  }, [canEdit, isCompactLayout, panelParam, recording?.enableComments]);
 
   const builderCredits =
     (playerDataQ.data?.builderCredits as BuilderCreditsStatus | null) ?? null;
@@ -1889,7 +1893,7 @@ export default function RecordingPage() {
 
   const renderPanelTabs = () => (
     <ViewerTabsList className="min-w-0 shrink-0 bg-sidebar">
-      {isCompactLayout ? (
+      {recording.enableComments ? (
         <ViewerTabsTrigger value="comments">
           {t("playerSettings.comments")}
         </ViewerTabsTrigger>
@@ -1915,7 +1919,7 @@ export default function RecordingPage() {
         "scroll-mt-14",
         compact
           ? "flex min-h-0 flex-1 flex-col px-4 pb-5 pt-4"
-          : "flex min-h-0 flex-1 flex-col px-1 pb-5 pt-4",
+          : "flex min-h-0 flex-1 flex-col overflow-hidden px-3 pb-3 pt-3",
       )}
     >
       {!compact ? (
@@ -1946,6 +1950,14 @@ export default function RecordingPage() {
   const renderSidePanel = () => {
     return (
       <>
+        {recording.enableComments ? (
+          <TabsContent
+            value="comments"
+            className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden"
+          >
+            {renderCommentsSection()}
+          </TabsContent>
+        ) : null}
         <TabsContent
           value="transcript"
           className="mt-0 flex-1 min-h-0 data-[state=inactive]:hidden"
@@ -2345,11 +2357,11 @@ export default function RecordingPage() {
             {editing && canUseNativeEditor ? (
               <EditorLayout recordingId={recording.id} className="flex-1" />
             ) : (
-              <div className="mx-auto flex min-h-0 w-full flex-1 flex-col gap-0 sm:gap-4 lg:max-w-[calc(177.778dvh-35.556rem)]">
+              <div className="mx-auto flex min-h-0 w-full flex-1 flex-col gap-0 sm:gap-4 lg:max-w-[min(100%,1600px,calc(177.778dvh-35.556rem))]">
                 <div className="flex w-full shrink-0 justify-center">
-                  {/* A 16:9 width derived from 100dvh - 20rem keeps the
-                    recording context and start of the discussion in view on
-                    displays that are both very wide and very tall. */}
+                  {/* Let the viewer grow on wide displays without pushing the
+                    discussion below the first scrollable viewport. The comments
+                    list owns the desktop scroll so the player stays in context. */}
                   <div className="relative aspect-video w-full overflow-hidden bg-card shadow-sm ring-1 ring-border sm:rounded-2xl">
                     <VideoPlayer
                       ref={playerRef}
@@ -2417,7 +2429,7 @@ export default function RecordingPage() {
                               onDraftChange={setCommentDraft}
                               onClose={() => setCommentOpen(false)}
                               onAdded={() => {
-                                setPanel("comments");
+                                if (isCompactLayout) setPanel("comments");
                                 void playerDataQ.refetch();
                               }}
                             />
@@ -2536,16 +2548,14 @@ export default function RecordingPage() {
                       ? renderCommentsSection(true)
                       : renderSidePanel()}
                   </RecordingSidePanel>
-                ) : (
-                  renderCommentsSection()
-                )}
+                ) : null}
               </div>
             )}
           </div>
         </div>
 
         {/* Side panel */}
-        {!editing && !isCompactLayout && panel && panel !== "comments" ? (
+        {!editing && !isCompactLayout && panel ? (
           <RecordingSidePanel
             className="hidden lg:col-start-2 lg:row-start-1 lg:flex lg:w-[360px] xl:w-[420px] 2xl:w-[440px]"
             tabs={renderPanelTabs()}
diff --git a/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
index 087ff67b680..eddf198eaca 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
@@ -3,6 +3,7 @@ import { useMemo } from "react";
 import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
+import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
 import { useFolders } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
@@ -33,6 +34,9 @@ export default function SpaceFolderRoute() {
       folderId={folderId}
       emptyKind="folder"
       title={folder?.name ?? t("navigation.folder")}
+      extraActions={
+        <LibraryPrimaryActions folderId={folderId} spaceId={spaceId} />
+      }
     />
   );
 }
diff --git a/templates/clips/app/routes/_app.spaces.$spaceId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
index f30e9ab0bdd..b67737a76c9 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
@@ -4,6 +4,7 @@ import { useParams } from "react-router";
 
 import { FolderTree, type FolderNode } from "@/components/library/folder-tree";
 import { LibraryGrid } from "@/components/library/library-grid";
+import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
 import { useFolders, useSpaces, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
@@ -76,6 +77,7 @@ export default function SpaceRoute() {
           folderId={null}
           emptyKind="space"
           title={(space as any)?.name ?? t("navigation.space")}
+          extraActions={<LibraryPrimaryActions spaceId={spaceId} />}
         />
       </div>
     </div>
diff --git a/templates/clips/app/routes/_app.spaces._index.tsx b/templates/clips/app/routes/_app.spaces._index.tsx
index 43988af4dee..ff57cd3b658 100644
--- a/templates/clips/app/routes/_app.spaces._index.tsx
+++ b/templates/clips/app/routes/_app.spaces._index.tsx
@@ -1,24 +1,20 @@
 import { useT } from "@agent-native/core/client/i18n";
 import { useOrgRole } from "@agent-native/core/client/org";
 import { IconPlus, IconUsersGroup } from "@tabler/icons-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { CreateSpaceDialog } from "@/components/library/create-space-dialog";
+import { AppEmptyState } from "@/components/library/empty-state";
 import {
   PageBreadcrumb,
   PageHeader,
   PageHeaderPrimaryAction,
 } from "@/components/library/page-header";
 import { SpaceCard, type SpaceCardData } from "@/components/library/space-card";
-import {
-  Empty,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/components/ui/empty";
+import { Button } from "@/components/ui/button";
 import { useSpaces, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
+import { OPEN_CREATE_SPACE_EVENT } from "@/lib/command-events";
 
 export function meta() {
   return [{ title: enMessages.clipsFinalRaw.spacesPageTitle }];
@@ -44,6 +40,18 @@ export default function SpacesIndexRoute() {
   const currentOrganizationId =
     organizations?.currentId ?? organizations?.organizations?.[0]?.id;
   const { data, isLoading, refetch } = useSpaces(currentOrganizationId);
+  const createSpaceLabel = t("createSpaceDialog.newSpace");
+
+  useEffect(() => {
+    if (!canManageOrg) return;
+    const handleOpenCreateSpace = () => setCreateOpen(true);
+    window.addEventListener(OPEN_CREATE_SPACE_EVENT, handleOpenCreateSpace);
+    return () =>
+      window.removeEventListener(
+        OPEN_CREATE_SPACE_EVENT,
+        handleOpenCreateSpace,
+      );
+  }, [canManageOrg]);
 
   const spaces: SpaceCardData[] = (data?.spaces ?? []).map((s: any) => ({
     id: s.id,
@@ -59,11 +67,11 @@ export default function SpacesIndexRoute() {
     <div className="flex flex-1 flex-col min-h-0">
       <PageHeader>
         <PageBreadcrumb label={t("navigation.spaces")} />
-        {canManageOrg && (
+        {canManageOrg && spaces.length > 0 && (
           <div className="ml-auto">
             <PageHeaderPrimaryAction onClick={() => setCreateOpen(true)}>
               <IconPlus />
-              {t("createSpaceDialog.newSpace")}
+              {createSpaceLabel}
             </PageHeaderPrimaryAction>
           </div>
         )}
@@ -77,19 +85,21 @@ export default function SpacesIndexRoute() {
             ))}
           </div>
         ) : spaces.length === 0 ? (
-          <Empty className="min-h-full rounded-none">
-            <EmptyHeader>
-              <EmptyMedia variant="icon">
-                <IconUsersGroup />
-              </EmptyMedia>
-              <EmptyTitle>{t("navigation.noSpaces")}</EmptyTitle>
-              {canManageOrg ? (
-                <EmptyDescription>
-                  {t("createSpaceDialog.description")}
-                </EmptyDescription>
-              ) : null}
-            </EmptyHeader>
-          </Empty>
+          <AppEmptyState
+            icon={IconUsersGroup}
+            title={t("navigation.noSpaces")}
+            description={
+              canManageOrg ? t("createSpaceDialog.description") : undefined
+            }
+            content={
+              canManageOrg ? (
+                <Button onClick={() => setCreateOpen(true)} size="sm">
+                  <IconPlus />
+                  {createSpaceLabel}
+                </Button>
+              ) : null
+            }
+          />
         ) : (
           <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(240px,1fr))]">
             {spaces.map((s) => (
diff --git a/templates/clips/app/routes/bug-report.tsx b/templates/clips/app/routes/bug-report.tsx
index 2faa9bdc5bd..d9007d7b541 100644
--- a/templates/clips/app/routes/bug-report.tsx
+++ b/templates/clips/app/routes/bug-report.tsx
@@ -1,30 +1,14 @@
-import { appBasePath } from "@agent-native/core/client/api-path";
-import { useT } from "@agent-native/core/client/i18n";
 import {
   BUG_REPORT_POPUP_RESPONSE_HEADERS,
-  bugReportContextToSearchParams,
   isBugReportSubmissionMessage,
   parseBugReportContext,
   type BugReportContext,
-  type BugReportSeverity,
 } from "@shared/bug-report";
-import { IconBug, IconShieldCheck } from "@tabler/icons-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useLocation, useOutlet } from "react-router";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
+import { BugReportForm } from "@/components/bug-report/bug-report-form";
 import enMessages from "@/i18n/en-US";
-import { cn } from "@/lib/utils";
 
 export function meta() {
   return [{ title: enMessages.bugReportRoute.pageTitle }];
@@ -34,20 +18,6 @@ export function headers() {
   return BUG_REPORT_POPUP_RESPONSE_HEADERS;
 }
 
-function openRecorder(url: string): Window | null {
-  const opened = window.open(
-    url,
-    "agent-native-clips-bug-report",
-    "popup,width=1120,height=820",
-  );
-  if (!opened) {
-    window.location.href = url;
-    return null;
-  }
-  opened.focus();
-  return opened;
-}
-
 function originFor(value: string | null): string | null {
   if (!value) return null;
   try {
@@ -58,7 +28,6 @@ function originFor(value: string | null): string | null {
 }
 
 export default function BugReportRoute() {
-  const t = useT();
   const location = useLocation();
   const outlet = useOutlet();
   const initialContext = useMemo(() => {
@@ -66,28 +35,10 @@ export default function BugReportRoute() {
     return parseBugReportContext(params, { allowLoose: true });
   }, [location.search]);
 
-  const [title, setTitle] = useState(initialContext?.title ?? "");
-  const [description, setDescription] = useState(
-    initialContext?.description ?? "",
-  );
-  const [reporterEmail, setReporterEmail] = useState(
-    initialContext?.reporterEmail ?? "",
-  );
-  const [severity, setSeverity] = useState<BugReportSeverity>(
-    initialContext?.severity ?? "normal",
-  );
-  const [referrer, setReferrer] = useState<string | null>(null);
   const recorderWindowRef = useRef<Window | null>(null);
-
-  useEffect(() => {
-    setReferrer(document.referrer || null);
-  }, []);
-
-  const sourceUrl = initialContext?.sourceUrl ?? referrer;
-  const pageTitle = initialContext?.pageTitle ?? null;
-  const sourceLabel =
-    pageTitle || sourceUrl || t("bugReportRoute.sourceUnknown");
-  const hostOrigin = originFor(initialContext?.returnUrl ?? sourceUrl);
+  const hostOrigin = originFor(
+    initialContext?.returnUrl ?? initialContext?.sourceUrl ?? null,
+  );
 
   useEffect(() => {
     if (!hostOrigin) return;
@@ -110,144 +61,16 @@ export default function BugReportRoute() {
 
   if (outlet) return outlet;
 
-  const startRecording = () => {
-    const context: BugReportContext = {
-      projectId: initialContext?.projectId ?? null,
-      title: title.trim() || initialContext?.title || null,
-      description: description.trim() || initialContext?.description || null,
-      severity,
-      sourceUrl,
-      pageTitle,
-      appVersion: initialContext?.appVersion ?? null,
-      environment: initialContext?.environment ?? null,
-      reporterEmail:
-        reporterEmail.trim() || initialContext?.reporterEmail || null,
-      reporterName: initialContext?.reporterName ?? null,
-      reporterId: initialContext?.reporterId ?? null,
-      metadata: initialContext?.metadata ?? null,
-      returnUrl: initialContext?.returnUrl ?? sourceUrl,
-    };
-    const params = bugReportContextToSearchParams(context);
-    params.set("intent", "bug-report");
-    params.set("mode", "screen");
-    params.set("surface", "browser");
-    recorderWindowRef.current = openRecorder(
-      `${appBasePath()}/record?${params.toString()}`,
-    );
-  };
-
   return (
     <main className="min-h-screen bg-background text-foreground">
       <div className="mx-auto flex min-h-screen w-full max-w-xl flex-col justify-center px-4 py-5 sm:px-6">
         <section className="rounded-lg border bg-card p-4 shadow-sm sm:p-5">
-          <div className="mb-5 flex items-start gap-3">
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
-              <IconBug size={20} />
-            </div>
-            <div className="min-w-0">
-              <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">
-                {t("bugReportRoute.eyebrow")}
-              </p>
-              <h1 className="mt-1 text-xl font-semibold leading-tight">
-                {t("bugReportRoute.title")}
-              </h1>
-              <p className="mt-2 text-sm leading-6 text-muted-foreground">
-                {t("bugReportRoute.description")}
-              </p>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="bug-title">
-                {t("bugReportRoute.issueTitleLabel")}
-              </Label>
-              <Input
-                id="bug-title"
-                value={title}
-                onChange={(event) => setTitle(event.target.value)}
-                placeholder={t("bugReportRoute.issueTitlePlaceholder")}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="bug-details">
-                {t("bugReportRoute.detailsLabel")}
-              </Label>
-              <Textarea
-                id="bug-details"
-                value={description}
-                onChange={(event) => setDescription(event.target.value)}
-                placeholder={t("bugReportRoute.detailsPlaceholder")}
-                className="min-h-24 resize-none"
-              />
-            </div>
-
-            <div className="grid gap-4 sm:grid-cols-[1fr_180px]">
-              <div className="space-y-2">
-                <Label htmlFor="bug-email">
-                  {t("bugReportRoute.emailLabel")}
-                </Label>
-                <Input
-                  id="bug-email"
-                  type="email"
-                  value={reporterEmail}
-                  onChange={(event) => setReporterEmail(event.target.value)}
-                  placeholder={t("bugReportRoute.emailPlaceholder")}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>{t("bugReportRoute.severityLabel")}</Label>
-                <Select
-                  value={severity}
-                  onValueChange={(value) =>
-                    setSeverity(value as BugReportSeverity)
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="low">
-                      {t("bugReportRoute.severityLow")}
-                    </SelectItem>
-                    <SelectItem value="normal">
-                      {t("bugReportRoute.severityNormal")}
-                    </SelectItem>
-                    <SelectItem value="high">
-                      {t("bugReportRoute.severityHigh")}
-                    </SelectItem>
-                    <SelectItem value="urgent">
-                      {t("bugReportRoute.severityUrgent")}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            <div className="rounded-md border bg-muted/40 px-3 py-2">
-              <p className="text-xs font-medium text-muted-foreground">
-                {t("bugReportRoute.sourceLabel")}
-              </p>
-              <p
-                className={cn(
-                  "mt-1 truncate text-sm",
-                  !sourceUrl && "text-muted-foreground",
-                )}
-              >
-                {sourceLabel}
-              </p>
-            </div>
-
-            <Button className="h-11 w-full" onClick={startRecording}>
-              {t("bugReportRoute.startRecording")}
-            </Button>
-          </div>
-
-          <div className="mt-5 flex items-start gap-2 rounded-md bg-muted/50 p-3 text-xs leading-5 text-muted-foreground">
-            <IconShieldCheck size={16} className="mt-0.5 shrink-0" />
-            <p>{t("bugReportRoute.privacyNote")}</p>
-          </div>
+          <BugReportForm
+            initialContext={initialContext}
+            onRecorderOpened={(recorderWindow) => {
+              recorderWindowRef.current = recorderWindow;
+            }}
+          />
         </section>
       </div>
     </main>
diff --git a/templates/clips/app/routes/share-auth-loading.test.ts b/templates/clips/app/routes/share-auth-loading.test.ts
index 78e9cff6c1c..583c430cd22 100644
--- a/templates/clips/app/routes/share-auth-loading.test.ts
+++ b/templates/clips/app/routes/share-auth-loading.test.ts
@@ -33,7 +33,9 @@ describe("authenticated recording route loading", () => {
     expect(route).toContain("dataQ.data.status === 401");
     expect(route).toContain("dataQ.data.status === 404");
     expect(route).toContain("!needsPassword &&");
-    expect(route).toContain('type SharePanel = "transcript" | "agent"');
+    expect(route).toContain(
+      'type SharePanel = "comments" | "transcript" | "agent"',
+    );
     expect(route).toContain(
       "h-[var(--agent-native-viewport-height,100vh)] min-h-0",
     );
@@ -128,7 +130,10 @@ describe("authenticated recording route loading", () => {
     expect(route).toContain("lg:grid-cols-[minmax(0,1fr)_360px]");
     expect(route).toContain("col-span-full row-start-1");
     expect(route).toContain("lg:col-start-2");
-    expect(route).toContain("w-full flex-col gap-5 pb-10 sm:px-4 lg:pt-4");
+    expect(route).toContain(
+      "w-full flex-col gap-5 pb-10 sm:px-4 lg:h-full lg:min-h-0 lg:max-w-[min(100%,1600px,calc(177.778dvh-35.556rem))] lg:pt-4",
+    );
+    expect(route).toContain("lg:min-h-0 lg:flex-1 lg:overflow-hidden");
     expect(route).not.toContain("max-w-[1200px]");
     expect(route).not.toContain(
       'variant={panel === "transcript" ? "secondary" : "ghost"}',
@@ -144,11 +149,12 @@ describe("authenticated recording route loading", () => {
       "const viewerCanUseFullscreenInteractions = !session || viewerCanComment;",
     );
     expect(route).toContain(
-      "recording.enableComments && viewerCanUseFullscreenInteractions",
+      "recording.enableComments &&\n                    viewerCanUseFullscreenInteractions",
     );
     expect(route).toContain("recording.enableReactions &&");
     expect(route).toContain("viewerCanUseFullscreenInteractions");
-    expect(route).toContain("commentsSectionRef.current?.scrollIntoView");
+    expect(route).toContain("onCommentClick={");
+    expect(route).toContain('setPanel("comments")');
   });
 
   it("sends anonymous participation into the shared account dialog", () => {
@@ -166,10 +172,10 @@ describe("authenticated recording route loading", () => {
 
   it("keeps public comments in flow and consolidates recording insights", () => {
     const shareRoute = readRoute("share.$shareId.tsx");
-    expect(shareRoute).not.toContain("<TabsTrigger");
+    expect(shareRoute).toContain('<ViewerTabsTrigger value="comments">');
     expect(shareRoute).toContain('presentation="inline"');
     expect(shareRoute).toContain(
-      'className="scroll-mt-14 flex min-h-0 flex-1 flex-col px-1 pb-5 pt-4"',
+      'className="flex min-h-0 flex-1 flex-col overflow-hidden px-3 pb-3 pt-3"',
     );
     expect(shareRoute).toContain('t("sharePage.comments")');
     expect(shareRoute).toContain("const [descriptionExpanded");
diff --git a/templates/clips/app/routes/share.$shareId.tsx b/templates/clips/app/routes/share.$shareId.tsx
index 3d95dc5a287..6556bc19e08 100644
--- a/templates/clips/app/routes/share.$shareId.tsx
+++ b/templates/clips/app/routes/share.$shareId.tsx
@@ -166,7 +166,7 @@ type SharePageLoaderData = {
   accessRequestToken?: string;
 };
 
-type SharePanel = "transcript" | "agent";
+type SharePanel = "comments" | "transcript" | "agent";
 
 type PendingAccountAction =
   | { intent: "comment"; atMs: number }
@@ -1411,104 +1411,110 @@ export default function ShareRoute() {
       </header>
 
       <div className="flex w-full min-w-0 flex-none flex-col overflow-visible lg:col-start-1 lg:row-start-2 lg:min-h-0 lg:flex-1 lg:overflow-y-hidden">
-        <main className="overflow-visible lg:min-h-0 lg:flex-1 lg:overflow-y-auto">
-          <div className="mx-auto flex w-full flex-col gap-5 pb-10 sm:px-4 lg:pt-4">
-            <div className="relative aspect-video w-full">
-              <VideoPlayer
-                ref={playerRef}
-                onVideoElementChange={setTrackedVideoEl}
-                recordingId={recording.id}
-                videoUrl={recording.videoUrl}
-                mediaVersion={
-                  recording.mediaUpdatedAt ?? recording.videoSizeBytes ?? null
-                }
-                videoFormat={recording.videoFormat}
-                embedProvider={isLoomEmbedBacked ? "loom" : null}
-                durationMs={recording.durationMs}
-                startMs={resolveStartMs(startMs, recording.durationMs)}
-                persistPlaybackPosition={Boolean(session)}
-                editsJson={recording.editsJson}
-                thumbnailUrl={recording.thumbnailUrl}
-                role={viewerRole ?? (viewerCanEdit ? "owner" : "viewer")}
-                defaultSpeed={parsePlaybackSpeed(recording.defaultSpeed) ?? 1.2}
-                comments={comments}
-                chapters={chapters}
-                reactions={reactions}
-                transcriptSegments={transcriptSegments}
-                cta={firstCta}
-                onCtaClick={() => tracking.reportCtaClick()}
-                onTimeUpdate={(ms) => setCurrentMs(ms)}
-                onCommentClick={
-                  viewerCanUseFullscreenInteractions
-                    ? () => {
-                        requestAnimationFrame(() =>
-                          commentsSectionRef.current?.scrollIntoView({
-                            behavior: "smooth",
-                            block: "start",
-                          }),
-                        );
-                      }
-                    : undefined
-                }
-                onFullscreenChange={setIsPlayerFullscreen}
-                enableComments={
-                  recording.enableComments && viewerCanUseFullscreenInteractions
-                }
-                onAddComment={
-                  viewerCanUseFullscreenInteractions
-                    ? () => {
-                        if (!session) {
-                          requireSignIn("comment");
-                          return;
-                        }
-                        setCommentAtMs(resolvePlaybackMs());
-                        setCommentOpen(true);
-                      }
-                    : undefined
-                }
-                enableReactions={
-                  recording.enableReactions &&
-                  viewerCanUseFullscreenInteractions
-                }
-                onReact={
-                  viewerCanUseFullscreenInteractions
-                    ? reactToRecording
-                    : undefined
-                }
-                className="h-full w-full rounded-none sm:rounded-xl"
-              />
-              {commentOpen && viewerCanComment
-                ? (() => {
-                    const composer = (
-                      <TimestampedCommentBar
-                        recordingId={recording.id}
-                        atMs={commentAtMs}
-                        draft={commentDraft}
-                        onDraftChange={setCommentDraft}
-                        onClose={() => setCommentOpen(false)}
-                        onAdded={() => {
-                          void dataQ.refetch();
-                          if (resumedAccountActionRef.current === "comment") {
-                            resumedAccountActionRef.current = null;
-                            trackEvent("share_account_action_completed", {
-                              surface: "public_share",
-                              recording_id: recording.id,
-                              intent: "comment",
-                            });
+        <main className="overflow-visible lg:min-h-0 lg:flex-1 lg:overflow-hidden">
+          {/* Match the authenticated viewer's YouTube-like desktop measure so
+            the discussion stays close to the video on wide displays. */}
+          <div className="mx-auto flex w-full flex-col gap-5 pb-10 sm:px-4 lg:h-full lg:min-h-0 lg:max-w-[min(100%,1600px,calc(177.778dvh-35.556rem))] lg:pt-4">
+            <div className="flex w-full shrink-0 justify-center">
+              <div className="relative aspect-video w-full">
+                <VideoPlayer
+                  ref={playerRef}
+                  onVideoElementChange={setTrackedVideoEl}
+                  recordingId={recording.id}
+                  videoUrl={recording.videoUrl}
+                  mediaVersion={
+                    recording.mediaUpdatedAt ?? recording.videoSizeBytes ?? null
+                  }
+                  videoFormat={recording.videoFormat}
+                  embedProvider={isLoomEmbedBacked ? "loom" : null}
+                  durationMs={recording.durationMs}
+                  startMs={resolveStartMs(startMs, recording.durationMs)}
+                  persistPlaybackPosition={Boolean(session)}
+                  editsJson={recording.editsJson}
+                  thumbnailUrl={recording.thumbnailUrl}
+                  role={viewerRole ?? (viewerCanEdit ? "owner" : "viewer")}
+                  defaultSpeed={
+                    parsePlaybackSpeed(recording.defaultSpeed) ?? 1.2
+                  }
+                  comments={comments}
+                  chapters={chapters}
+                  reactions={reactions}
+                  transcriptSegments={transcriptSegments}
+                  cta={firstCta}
+                  onCtaClick={() => tracking.reportCtaClick()}
+                  onTimeUpdate={(ms) => setCurrentMs(ms)}
+                  onCommentClick={
+                    viewerCanUseFullscreenInteractions
+                      ? () => setPanel("comments")
+                      : undefined
+                  }
+                  onFullscreenChange={setIsPlayerFullscreen}
+                  enableComments={
+                    recording.enableComments &&
+                    viewerCanUseFullscreenInteractions
+                  }
+                  onAddComment={
+                    viewerCanUseFullscreenInteractions
+                      ? () => {
+                          if (!session) {
+                            requireSignIn("comment");
+                            return;
                           }
-                        }}
-                      />
-                    );
-                    // The Fullscreen API only paints the player's own element,
-                    // so portal the composer there instead of exiting
-                    // fullscreen when it's open.
-                    const fullscreenContainer =
-                      isPlayerFullscreen && playerRef.current?.container;
-                    return fullscreenContainer
-                      ? createPortal(composer, fullscreenContainer)
-                      : composer;
-                  })()
-                : null}
+                          const liveMs = resolvePlaybackMs();
+                          setCurrentMs(liveMs);
+                          if (!isPlayerFullscreen) {
+                            setPanel("comments");
+                            return;
+                          }
+                          setCommentAtMs(liveMs);
+                          setCommentOpen(true);
+                        }
+                      : undefined
+                  }
+                  enableReactions={
+                    recording.enableReactions &&
+                    viewerCanUseFullscreenInteractions
+                  }
+                  onReact={
+                    viewerCanUseFullscreenInteractions
+                      ? reactToRecording
+                      : undefined
+                  }
+                  className="h-full w-full rounded-none sm:rounded-xl"
+                />
+                {commentOpen && viewerCanComment
+                  ? (() => {
+                      const composer = (
+                        <TimestampedCommentBar
+                          recordingId={recording.id}
+                          atMs={commentAtMs}
+                          draft={commentDraft}
+                          onDraftChange={setCommentDraft}
+                          onClose={() => setCommentOpen(false)}
+                          onAdded={() => {
+                            void dataQ.refetch();
+                            if (resumedAccountActionRef.current === "comment") {
+                              resumedAccountActionRef.current = null;
+                              trackEvent("share_account_action_completed", {
+                                surface: "public_share",
+                                recording_id: recording.id,
+                                intent: "comment",
+                              });
+                            }
+                          }}
+                        />
+                      );
+                      // The Fullscreen API only paints the player's own element,
+                      // so portal the composer there instead of exiting
+                      // fullscreen when it's open.
+                      const fullscreenContainer =
+                        isPlayerFullscreen && playerRef.current?.container;
+                      return fullscreenContainer
+                        ? createPortal(composer, fullscreenContainer)
+                        : composer;
+                    })()
+                  : null}
+              </div>
             </div>
 
             <section className="flex shrink-0 flex-col gap-3 px-4 pt-1 sm:px-0">
@@ -1619,11 +1625,41 @@ export default function ShareRoute() {
                 </div>
               ) : null}
             </section>
+          </div>
+        </main>
+      </div>
 
-            {recording.enableComments ? (
+      <Tabs
+        value={panel}
+        onValueChange={(value) => setPanel(value as SharePanel)}
+        className="contents"
+      >
+        <RecordingSidePanel
+          className="lg:col-start-2 lg:row-start-2"
+          tabs={
+            <ViewerTabsList>
+              {recording.enableComments ? (
+                <ViewerTabsTrigger value="comments">
+                  {t("sharePage.comments")}
+                </ViewerTabsTrigger>
+              ) : null}
+              <ViewerTabsTrigger value="transcript">
+                {t("sharePage.transcript")}
+              </ViewerTabsTrigger>
+              <ViewerTabsTrigger value="agent">
+                {t("sharePage.agent")}
+              </ViewerTabsTrigger>
+            </ViewerTabsList>
+          }
+        >
+          {recording.enableComments ? (
+            <TabsContent
+              value="comments"
+              className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden"
+            >
               <section
                 ref={commentsSectionRef}
-                className="scroll-mt-14 flex min-h-0 flex-1 flex-col px-1 pb-5 pt-4"
+                className="flex min-h-0 flex-1 flex-col overflow-hidden px-3 pb-3 pt-3"
               >
                 <h2 className="mb-3 shrink-0 text-sm font-semibold">
                   {t("sharePage.comments")}
@@ -1655,29 +1691,8 @@ export default function ShareRoute() {
                   presentation="inline"
                 />
               </section>
-            ) : null}
-          </div>
-        </main>
-      </div>
-
-      <Tabs
-        value={panel}
-        onValueChange={(value) => setPanel(value as SharePanel)}
-        className="contents"
-      >
-        <RecordingSidePanel
-          className="lg:col-start-2 lg:row-start-2"
-          tabs={
-            <ViewerTabsList>
-              <ViewerTabsTrigger value="transcript">
-                {t("sharePage.transcript")}
-              </ViewerTabsTrigger>
-              <ViewerTabsTrigger value="agent">
-                {t("sharePage.agent")}
-              </ViewerTabsTrigger>
-            </ViewerTabsList>
-          }
-        >
+            </TabsContent>
+          ) : null}
           <TabsContent
             value="agent"
             className="mt-0 flex min-h-0 flex-1 flex-col overflow-y-auto"
diff --git a/templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md b/templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md
new file mode 100644
index 00000000000..fd9c91c6446
--- /dev/null
+++ b/templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md
@@ -0,0 +1,5 @@
+---
+type: fixed
+date: 2026-09-08
+---
+Fixed desktop comment threads by keeping them in a full-height viewer tab, polished the side-panel tabs and spacing, added move, minimize, and close controls to desktop Clips windows, corrected the shared New recording action’s split-button corners, made library sub-item selection clear in the sidebar, and added visible folder tiles plus scoped recording actions to library and space views.
diff --git a/templates/clips/changelog/2026-09-08-global-command-search.md b/templates/clips/changelog/2026-09-08-global-command-search.md
new file mode 100644
index 00000000000..b14b47694d2
--- /dev/null
+++ b/templates/clips/changelog/2026-09-08-global-command-search.md
@@ -0,0 +1,5 @@
+---
+type: improved
+date: 2026-09-08
+---
+The Cmd+K command menu now searches and navigates across recordings, meetings, dictations, folders, and spaces.
diff --git a/templates/clips/data/pglite.agent-native-pglite.lock b/templates/clips/data/pglite.agent-native-pglite.lock
new file mode 100644
index 00000000000..9472de07d88
--- /dev/null
+++ b/templates/clips/data/pglite.agent-native-pglite.lock
@@ -0,0 +1 @@
+{"pid":68469,"token":"68469:1788896698442:0.9915660534090365"}
\ No newline at end of file
diff --git a/templates/clips/desktop/src-tauri/src/lib.rs b/templates/clips/desktop/src-tauri/src/lib.rs
index 00761400518..d2eb89a6c9f 100644
--- a/templates/clips/desktop/src-tauri/src/lib.rs
+++ b/templates/clips/desktop/src-tauri/src/lib.rs
@@ -100,16 +100,24 @@ pub fn run() {
                     _ => {}
                 }
             }
-            // The popover and camera bubble are separate native windows. If
-            // the popover is closed before its webview emits the visibility
-            // event, tear down the bubble from the native lifecycle instead.
-            if window.label() == "popover"
-                && matches!(
-                    event,
-                    tauri::WindowEvent::CloseRequested { .. } | tauri::WindowEvent::Destroyed
-                )
-            {
-                clips::close_bubble_if_idle(window.app_handle());
+            // The popover and camera bubble are separate native windows. A
+            // native close hides the panel back to the tray instead of
+            // destroying the webview, so tray clicks and the app's second
+            // launch can show the same window again.
+            if window.label() == "popover" {
+                match event {
+                    tauri::WindowEvent::CloseRequested { api, .. } => {
+                        api.prevent_close();
+                        let app = window.app_handle();
+                        let _ = window.hide();
+                        clips::close_bubble_if_idle(&app);
+                        let _ = app.emit("clips:popover-visible", false);
+                    }
+                    tauri::WindowEvent::Destroyed => {
+                        clips::close_bubble_if_idle(window.app_handle());
+                    }
+                    _ => {}
+                }
             }
         })
         .invoke_handler(tauri::generate_handler![
diff --git a/templates/clips/desktop/src-tauri/src/util.rs b/templates/clips/desktop/src-tauri/src/util.rs
index 23eb844bb15..449b1a61888 100644
--- a/templates/clips/desktop/src-tauri/src/util.rs
+++ b/templates/clips/desktop/src-tauri/src/util.rs
@@ -111,11 +111,9 @@ pub fn set_capture_included(window: &WebviewWindow) {
 
 pub fn build_popover_window(app: &mut tauri::App) -> Result<WebviewWindow, tauri::Error> {
     let app_handle = app.handle().clone();
-    // The window is sized to the visible panel EXACTLY — elevation comes from
-    // the native NSWindow shadow (shadow(true) below), which macOS derives
-    // from the drawn rounded panel's alpha. A transparent CSS-shadow apron is
-    // never used here: its invisible margin eats clicks and reads as dead
-    // space around the UI.
+    // Keep the tray panel compact, but use native decorations so a manually
+    // launched app still behaves like a normal window: users can move,
+    // minimize, and close it without needing to find the tray icon again.
     WebviewWindowBuilder::new(app, "popover", WebviewUrl::App("index.html".into()))
         .title("Clips")
         .inner_size(
@@ -124,7 +122,7 @@ pub fn build_popover_window(app: &mut tauri::App) -> Result<WebviewWindow, tauri
         )
         .position(2.0, 2.0)
         .resizable(false)
-        .decorations(false)
+        .decorations(true)
         .transparent(true)
         .always_on_top(true)
         .visible_on_all_workspaces(true)
diff --git a/templates/clips/desktop/src/styles.css b/templates/clips/desktop/src/styles.css
index f4fda4e9e2b..9ee1c2db8ba 100644
--- a/templates/clips/desktop/src/styles.css
+++ b/templates/clips/desktop/src/styles.css
@@ -65,10 +65,9 @@
   box-sizing: border-box;
 }
 
-/* Tauri window is `transparent: true` + `decorations: false`, so the HTML
-   paints the visible shape. The popover window is sized to the rounded panel
-   exactly; macOS derives a native shadow from the panel's alpha, giving us
-   the round-cornered chromeless popover with no transparent apron. */
+/* The HTML still paints the visible panel shape while the native window frame
+   supplies standard move, minimize, and close affordances for the desktop
+   app. */
 html,
 body {
   margin: 0;

From e814bee6bdfbe829a36cde5830283394fe435dd0 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 15:36:22 -0700
Subject: [PATCH 02/21] fix: resolve PR review and CI feedback

Restore mounted dictation deep-link expansion and compact share-comment scrolling. Remove unused imports and default-surface eyebrow flagged by CI.
---
 .../app/components/bug-report/bug-report-form.tsx   |  5 +----
 .../clips/app/components/library/library-layout.tsx |  9 +--------
 templates/clips/app/routes/_app.dictate.tsx         |  1 +
 templates/clips/app/routes/bug-report.tsx           |  1 -
 templates/clips/app/routes/share.$shareId.tsx       | 13 +++++++++++--
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/templates/clips/app/components/bug-report/bug-report-form.tsx b/templates/clips/app/components/bug-report/bug-report-form.tsx
index cc655a63046..74997d14eb3 100644
--- a/templates/clips/app/components/bug-report/bug-report-form.tsx
+++ b/templates/clips/app/components/bug-report/bug-report-form.tsx
@@ -105,10 +105,7 @@ export function BugReportForm({
           <IconBug size={20} />
         </div>
         <div className="min-w-0">
-          <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">
-            {t("bugReportRoute.eyebrow")}
-          </p>
-          <h2 className="mt-1 text-xl font-semibold leading-tight">
+          <h2 className="text-xl font-semibold leading-tight">
             {t("bugReportRoute.title")}
           </h2>
           <p className="mt-2 text-sm leading-6 text-muted-foreground">
diff --git a/templates/clips/app/components/library/library-layout.tsx b/templates/clips/app/components/library/library-layout.tsx
index de0122362d4..379f5a8cf26 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -32,14 +32,7 @@ import {
   IconDots,
   IconEdit,
 } from "@tabler/icons-react";
-import {
-  Fragment,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { NavLink, useLocation, useNavigate, useParams } from "react-router";
 
 import {
diff --git a/templates/clips/app/routes/_app.dictate.tsx b/templates/clips/app/routes/_app.dictate.tsx
index ce51001e321..bdbb6da382a 100644
--- a/templates/clips/app/routes/_app.dictate.tsx
+++ b/templates/clips/app/routes/_app.dictate.tsx
@@ -411,6 +411,7 @@ function DictationRow({
 
   useEffect(() => {
     if (!initialExpanded) return;
+    setExpanded(true);
     rowRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
   }, [initialExpanded]);
 
diff --git a/templates/clips/app/routes/bug-report.tsx b/templates/clips/app/routes/bug-report.tsx
index d9007d7b541..252c42ed518 100644
--- a/templates/clips/app/routes/bug-report.tsx
+++ b/templates/clips/app/routes/bug-report.tsx
@@ -2,7 +2,6 @@ import {
   BUG_REPORT_POPUP_RESPONSE_HEADERS,
   isBugReportSubmissionMessage,
   parseBugReportContext,
-  type BugReportContext,
 } from "@shared/bug-report";
 import { useEffect, useMemo, useRef } from "react";
 import { useLocation, useOutlet } from "react-router";
diff --git a/templates/clips/app/routes/share.$shareId.tsx b/templates/clips/app/routes/share.$shareId.tsx
index e5c6f4d4ebb..f8d78f156f3 100644
--- a/templates/clips/app/routes/share.$shareId.tsx
+++ b/templates/clips/app/routes/share.$shareId.tsx
@@ -515,6 +515,15 @@ export default function ShareRoute() {
   const [panel, setPanel] = useState<SharePanel>("transcript");
   const [descriptionExpanded, setDescriptionExpanded] = useState(false);
   const commentsSectionRef = useRef<HTMLElement | null>(null);
+  const selectCommentsPanel = useCallback(() => {
+    setPanel("comments");
+    requestAnimationFrame(() => {
+      commentsSectionRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    });
+  }, []);
   const [downloading, setDownloading] = useState(false);
   const [accessRequestSent, setAccessRequestSent] = useState(false);
   const [accessRequestError, setAccessRequestError] = useState<string | null>(
@@ -1445,7 +1454,7 @@ export default function ShareRoute() {
                   onTimeUpdate={(ms) => setCurrentMs(ms)}
                   onCommentClick={
                     viewerCanUseFullscreenInteractions
-                      ? () => setPanel("comments")
+                      ? selectCommentsPanel
                       : undefined
                   }
                   onFullscreenChange={setIsPlayerFullscreen}
@@ -1463,7 +1472,7 @@ export default function ShareRoute() {
                           const liveMs = resolvePlaybackMs();
                           setCurrentMs(liveMs);
                           if (!isPlayerFullscreen) {
-                            setPanel("comments");
+                            selectCommentsPanel();
                             return;
                           }
                           setCommentAtMs(liveMs);

From 1f7f0b5a3def1cea40ec1b465d65d6c8410a6fd1 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 15:47:53 -0700
Subject: [PATCH 03/21] fix: align collapsed Clips sidebar controls

Stack footer utilities in the collapsed rail and give the org switcher the same hit target and icon scale as the neighboring controls.
---
 .../app/components/library/library-grid-layout.test.ts     | 3 +++
 templates/clips/app/components/library/library-layout.tsx  | 7 +++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index f1cd33c0f18..fd325829c32 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -91,6 +91,9 @@ describe("selected library actions layout", () => {
     expect(layoutSource).toContain(
       "<SidebarFeedbackButton collapsed={showCollapsedSidebar} />",
     );
+    expect(layoutSource).toContain("data-sidebar-footer-utilities");
+    expect(layoutSource).toContain('? "flex flex-col items-center gap-1"');
+    expect(layoutSource).toContain('"!size-9 !p-0 [&>svg]:!size-4"');
     expect(layoutSource).toContain("function isSidebarGroupActive(");
     expect(layoutSource).toContain(
       'group === "library" && pathname.startsWith("/library/folder/")',
diff --git a/templates/clips/app/components/library/library-layout.tsx b/templates/clips/app/components/library/library-layout.tsx
index 379f5a8cf26..48c56f1a0d4 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -826,9 +826,10 @@ export function LibraryLayout({
         >
           <SidebarFeedbackButton collapsed={showCollapsedSidebar} />
           <div
+            data-sidebar-footer-utilities
             className={cn(
               showCollapsedSidebar
-                ? "flex items-center justify-center gap-1"
+                ? "flex flex-col items-center gap-1"
                 : "flex items-center gap-0.5",
             )}
           >
@@ -836,7 +837,9 @@ export function LibraryLayout({
               compact={showCollapsedSidebar}
               className={cn(
                 "!bg-transparent !text-primary hover:!bg-accent/60 hover:!text-primary",
-                !showCollapsedSidebar && "min-w-0 flex-1",
+                showCollapsedSidebar
+                  ? "!size-9 !p-0 [&>svg]:!size-4"
+                  : "min-w-0 flex-1",
               )}
               settingsPath="/settings/organization"
               currentAppId="clips"

From b932fcecf62d384e1dd7b5f5697778e3276ec330 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 15:50:58 -0700
Subject: [PATCH 04/21] chore: remove generated Clips database lock

The runtime PID lock is already covered by the repository PGlite lock ignore rule and must not be persisted in the PR.
---
 templates/clips/data/pglite.agent-native-pglite.lock | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 templates/clips/data/pglite.agent-native-pglite.lock

diff --git a/templates/clips/data/pglite.agent-native-pglite.lock b/templates/clips/data/pglite.agent-native-pglite.lock
deleted file mode 100644
index 9472de07d88..00000000000
--- a/templates/clips/data/pglite.agent-native-pglite.lock
+++ /dev/null
@@ -1 +0,0 @@
-{"pid":68469,"token":"68469:1788896698442:0.9915660534090365"}
\ No newline at end of file

From 4a032d65594d29fa7ac8d4ca7f5a1c8886108ece Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 16:14:05 -0700
Subject: [PATCH 05/21] fix: unify Clips route breadcrumbs

---
 .../library/library-grid-layout.test.ts       | 16 ++++
 .../app/components/library/library-grid.tsx   | 14 ++-
 .../components/library/page-header.test.tsx   | 27 ++++++
 .../app/components/library/page-header.tsx    | 51 +++++++++--
 templates/clips/app/routes/_app.dictate.tsx   |  2 +-
 .../routes/_app.library.folder.$folderId.tsx  |  4 +
 .../clips/app/routes/_app.meetings._index.tsx |  2 +-
 .../app/routes/_app.r.$recordingId.test.ts    |  9 +-
 .../clips/app/routes/_app.r.$recordingId.tsx  | 86 ++++++-------------
 .../_app.spaces.$spaceId.folder.$folderId.tsx | 18 +++-
 .../clips/app/routes/_app.spaces.$spaceId.tsx |  4 +
 .../clips/app/routes/_app.spaces._index.tsx   |  2 +-
 templates/clips/app/routes/_app.trash.tsx     |  2 +-
 13 files changed, 160 insertions(+), 77 deletions(-)
 create mode 100644 templates/clips/app/components/library/page-header.test.tsx

diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index fd325829c32..4b6f79f225d 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -26,6 +26,9 @@ describe("selected library actions layout", () => {
     const spaceFolderRouteSource = readSource(
       "../../routes/_app.spaces.$spaceId.folder.$folderId.tsx",
     );
+    const recordingRouteSource = readSource(
+      "../../routes/_app.r.$recordingId.tsx",
+    );
 
     expect(gridSource).toContain("<PageBreadcrumb");
     expect(gridSource).not.toContain('<h1 className="text-base');
@@ -51,6 +54,19 @@ describe("selected library actions layout", () => {
     expect(folderRouteSource).toContain("<LibraryPrimaryActions folderId");
     expect(spaceRouteSource).toContain("<LibraryPrimaryActions spaceId");
     expect(spaceFolderRouteSource).toContain("<LibraryPrimaryActions folderId");
+    expect(folderRouteSource).toContain(
+      '{ label: t("navigation.library"), to: "/library" }',
+    );
+    expect(spaceRouteSource).toContain(
+      '{ label: t("navigation.spaces"), to: "/spaces" }',
+    );
+    expect(spaceFolderRouteSource).toContain("to: `/spaces/${spaceId}`");
+    expect(recordingRouteSource).toContain(
+      "<PageBreadcrumb items={recordingBreadcrumbItems}",
+    );
+    expect(recordingRouteSource).not.toContain(
+      'from "@/components/ui/breadcrumb"',
+    );
     expect(layoutSource).toContain(
       '"flex h-14 shrink-0 items-center border-b border-border"',
     );
diff --git a/templates/clips/app/components/library/library-grid.tsx b/templates/clips/app/components/library/library-grid.tsx
index bc9742cf92a..2bdf2616803 100644
--- a/templates/clips/app/components/library/library-grid.tsx
+++ b/templates/clips/app/components/library/library-grid.tsx
@@ -47,7 +47,11 @@ import { BulkActionToolbar, type BulkMoveTarget } from "./bulk-action-toolbar";
 import { EmptyState } from "./empty-state";
 import { FilterChips, type FilterChip } from "./filter-chips";
 import { FolderCard } from "./folder-card";
-import { PageBreadcrumb, PageHeader } from "./page-header";
+import {
+  PageBreadcrumb,
+  PageHeader,
+  type PageBreadcrumbItem,
+} from "./page-header";
 import { RecordingCard } from "./recording-card";
 import { SearchBar } from "./search-bar";
 import { SortMenu, type SortKey } from "./sort-menu";
@@ -59,6 +63,7 @@ interface LibraryGridProps {
   /** What empty-state illustration to render. Defaults from `view`. */
   emptyKind?: "library" | "shared" | "folder" | "space" | "archive" | "trash";
   title?: string;
+  breadcrumbItems?: readonly PageBreadcrumbItem[];
   tagFilter?: string | null;
   onClearTag?: () => void;
   extraActions?: React.ReactNode;
@@ -152,6 +157,7 @@ export function LibraryGrid({
   spaceId = null,
   emptyKind,
   title,
+  breadcrumbItems,
   tagFilter,
   onClearTag,
   extraActions,
@@ -168,6 +174,8 @@ export function LibraryGrid({
   const [isBulkPending, setIsBulkPending] = useState(false);
   const [page, setPage] = useState(1);
   const selectionStateKey = useMemo(() => `selection:${getBrowserTabId()}`, []);
+  const pageBreadcrumbItems =
+    breadcrumbItems ?? (title ? [{ label: title }] : []);
 
   useEffect(() => {
     if (!title) return;
@@ -461,7 +469,9 @@ export function LibraryGrid({
       <PageHeader>
         <div className="flex min-w-0 flex-1 items-center gap-3 lg:grid lg:grid-cols-[minmax(0,1fr)_20rem_minmax(0,1fr)]">
           <div className="min-w-0 flex-1 lg:flex-none">
-            {title ? <PageBreadcrumb label={title} /> : null}
+            {pageBreadcrumbItems.length > 0 ? (
+              <PageBreadcrumb items={pageBreadcrumbItems} />
+            ) : null}
           </div>
           <SearchBar
             side="bottom"
diff --git a/templates/clips/app/components/library/page-header.test.tsx b/templates/clips/app/components/library/page-header.test.tsx
new file mode 100644
index 00000000000..3ceebbaee16
--- /dev/null
+++ b/templates/clips/app/components/library/page-header.test.tsx
@@ -0,0 +1,27 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it } from "vitest";
+
+import { PageBreadcrumb } from "./page-header";
+
+describe("PageBreadcrumb", () => {
+  it("renders linked ancestors and a current shadcn breadcrumb page", () => {
+    const markup = renderToStaticMarkup(
+      <MemoryRouter>
+        <PageBreadcrumb
+          items={[
+            { label: "Spaces", to: "/spaces" },
+            { label: "Design", to: "/spaces/design" },
+            { label: "Research" },
+          ]}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(markup).toContain('href="/spaces"');
+    expect(markup).toContain('href="/spaces/design"');
+    expect(markup).toContain('aria-current="page"');
+    expect(markup).toContain("Spaces / Design / Research");
+    expect(markup.match(/role="presentation"/g)).toHaveLength(2);
+  });
+});
diff --git a/templates/clips/app/components/library/page-header.tsx b/templates/clips/app/components/library/page-header.tsx
index 763bbbacb72..e9eff2b3303 100644
--- a/templates/clips/app/components/library/page-header.tsx
+++ b/templates/clips/app/components/library/page-header.tsx
@@ -2,18 +2,22 @@ import {
   type ComponentProps,
   createContext,
   forwardRef,
+  Fragment,
   ReactNode,
   useContext,
   useEffect,
   useState,
 } from "react";
 import { createPortal } from "react-dom";
+import { NavLink } from "react-router";
 
 import {
   Breadcrumb,
   BreadcrumbItem,
+  BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
+  BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { ButtonGroup } from "@/components/ui/button-group";
@@ -86,15 +90,48 @@ export const PageHeaderActionGroup = forwardRef<
 });
 PageHeaderActionGroup.displayName = "PageHeaderActionGroup";
 
-export function PageBreadcrumb({ label }: { label: string }) {
+export interface PageBreadcrumbItem {
+  label: string;
+  to?: string;
+}
+
+export function PageBreadcrumb({
+  items,
+}: {
+  items: readonly PageBreadcrumbItem[];
+}) {
+  if (items.length === 0) return null;
+
   return (
-    <Breadcrumb aria-label={label} className="min-w-0">
+    <Breadcrumb
+      aria-label={items.map((item) => item.label).join(" / ")}
+      className="min-w-0"
+    >
       <BreadcrumbList className="flex-nowrap overflow-hidden">
-        <BreadcrumbItem className="min-w-0">
-          <BreadcrumbPage className="truncate font-medium">
-            {label}
-          </BreadcrumbPage>
-        </BreadcrumbItem>
+        {items.map((item, index) => {
+          const current = index === items.length - 1;
+
+          return (
+            <Fragment key={`${item.to ?? "current"}:${item.label}:${index}`}>
+              {index > 0 ? <BreadcrumbSeparator className="shrink-0" /> : null}
+              <BreadcrumbItem className={current ? "min-w-0" : "shrink-0"}>
+                {current ? (
+                  <BreadcrumbPage className="truncate font-medium">
+                    {item.label}
+                  </BreadcrumbPage>
+                ) : item.to ? (
+                  <BreadcrumbLink asChild>
+                    <NavLink to={item.to} className="block max-w-48 truncate">
+                      {item.label}
+                    </NavLink>
+                  </BreadcrumbLink>
+                ) : (
+                  <span className="block max-w-48 truncate">{item.label}</span>
+                )}
+              </BreadcrumbItem>
+            </Fragment>
+          );
+        })}
       </BreadcrumbList>
     </Breadcrumb>
   );
diff --git a/templates/clips/app/routes/_app.dictate.tsx b/templates/clips/app/routes/_app.dictate.tsx
index bdbb6da382a..bb38f5e192d 100644
--- a/templates/clips/app/routes/_app.dictate.tsx
+++ b/templates/clips/app/routes/_app.dictate.tsx
@@ -984,7 +984,7 @@ export default function DictateRoute() {
   return (
     <>
       <PageHeader>
-        <PageBreadcrumb label={t("navigation.dictate")} />
+        <PageBreadcrumb items={[{ label: t("navigation.dictate") }]} />
         <VocabularyManager />
       </PageHeader>
       <div className="mx-auto w-full max-w-4xl px-4 py-5 sm:px-6 sm:py-6">
diff --git a/templates/clips/app/routes/_app.library.folder.$folderId.tsx b/templates/clips/app/routes/_app.library.folder.$folderId.tsx
index 3a384608321..e10f9e6fed7 100644
--- a/templates/clips/app/routes/_app.library.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.library.folder.$folderId.tsx
@@ -30,6 +30,10 @@ export default function LibraryFolderRoute() {
       folderId={folderId}
       emptyKind="folder"
       title={folder?.name ?? t("navigation.folder")}
+      breadcrumbItems={[
+        { label: t("navigation.library"), to: "/library" },
+        { label: folder?.name ?? t("navigation.folder") },
+      ]}
       extraActions={<LibraryPrimaryActions folderId={folderId} />}
     />
   );
diff --git a/templates/clips/app/routes/_app.meetings._index.tsx b/templates/clips/app/routes/_app.meetings._index.tsx
index 5fe0333460e..3388be4750d 100644
--- a/templates/clips/app/routes/_app.meetings._index.tsx
+++ b/templates/clips/app/routes/_app.meetings._index.tsx
@@ -613,7 +613,7 @@ function MeetingsHeader({
     <PageHeader>
       <div className="flex min-w-0 flex-1 items-center gap-3 lg:grid lg:grid-cols-[minmax(0,1fr)_24rem_minmax(0,1fr)]">
         <div className="hidden min-w-0 lg:block">
-          <PageBreadcrumb label={t("meetingsRoute.title")} />
+          <PageBreadcrumb items={[{ label: t("meetingsRoute.title") }]} />
         </div>
         <div className="relative min-w-0 flex-1 lg:w-full">
           <IconSearch className="pointer-events-none absolute start-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
diff --git a/templates/clips/app/routes/_app.r.$recordingId.test.ts b/templates/clips/app/routes/_app.r.$recordingId.test.ts
index 85775c27ab4..52a29049a4a 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.test.ts
+++ b/templates/clips/app/routes/_app.r.$recordingId.test.ts
@@ -233,11 +233,10 @@ describe("direct recording route shell cue", () => {
     expect(layout).toContain("showAgentSidebar = true");
     expect(layout).toContain("{showAgentSidebar ? (");
     expect(route).toContain("<PageHeader>");
-    expect(route).toContain("<BreadcrumbList");
-    expect(route).toContain("<BreadcrumbLink asChild>");
-    expect(route).toContain("<BreadcrumbPage");
-    expect(route).toContain("<BreadcrumbSeparator");
-    expect(route).toContain('to="/library"');
+    expect(route).toContain("<PageBreadcrumb items={recordingBreadcrumbItems}");
+    expect(route).not.toContain('from "@/components/ui/breadcrumb"');
+    expect(route).toContain('to: "/library"');
+    expect(route).toContain('to: "/spaces"');
     expect(route).toContain("recordingFolder.spaceId");
     expect(route).toContain("{recordingActions}");
     expect(route).toContain("fallback={ownerInitial}");
diff --git a/templates/clips/app/routes/_app.r.$recordingId.tsx b/templates/clips/app/routes/_app.r.$recordingId.tsx
index 0601ae1b0ca..f0d74b106bf 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.tsx
+++ b/templates/clips/app/routes/_app.r.$recordingId.tsx
@@ -44,7 +44,6 @@ import {
   IconBolt,
   IconMessage,
   IconExternalLink,
-  IconFolder,
   IconMoodSmile,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -62,7 +61,11 @@ import { toast } from "sonner";
 import { ClipsAvatar } from "@/components/clips-avatar";
 import { EditableRecordingTitle } from "@/components/editable-recording-title";
 import { EditorLayout } from "@/components/editor/editor-layout";
-import { PageHeader } from "@/components/library/page-header";
+import {
+  PageBreadcrumb,
+  PageHeader,
+  type PageBreadcrumbItem,
+} from "@/components/library/page-header";
 import { useClipAgentWebMcp } from "@/components/player/clip-agent-webmcp";
 import { ClipsShareTrigger } from "@/components/player/clips-share-trigger";
 import {
@@ -91,14 +94,6 @@ import {
   ViewerTabsTrigger,
 } from "@/components/player/viewer-controls";
 import { StorageSetupCard } from "@/components/recorder/storage-setup-card";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenuItem,
@@ -934,55 +929,30 @@ export default function RecordingPage() {
   const visibleTitle = recording
     ? displayRecordingTitle(recording.title)
     : "Untitled Clip";
+  const recordingBreadcrumbItems: PageBreadcrumbItem[] = [
+    ...(recordingSpace
+      ? [
+          { label: t("navigation.spaces"), to: "/spaces" },
+          {
+            label: recordingSpace.name,
+            to: `/spaces/${recordingSpace.id}`,
+          },
+        ]
+      : [{ label: t("navigation.library"), to: "/library" }]),
+    ...(recordingFolder
+      ? [
+          {
+            label: recordingFolder.name,
+            to: recordingFolder.spaceId
+              ? `/spaces/${recordingFolder.spaceId}/folder/${recordingFolder.id}`
+              : `/library/folder/${recordingFolder.id}`,
+          },
+        ]
+      : []),
+    { label: visibleTitle },
+  ];
   const recordingBreadcrumb = (
-    <Breadcrumb aria-label={t("navigation.library")} className="min-w-0">
-      <BreadcrumbList className="flex-nowrap overflow-hidden">
-        <BreadcrumbItem className="shrink-0">
-          <BreadcrumbLink asChild>
-            <NavLink to="/library">{t("navigation.library")}</NavLink>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        {recordingSpace ? (
-          <>
-            <BreadcrumbSeparator className="shrink-0" />
-            <BreadcrumbItem className="min-w-0">
-              <BreadcrumbLink asChild>
-                <NavLink
-                  to={`/spaces/${recordingSpace.id}`}
-                  className="truncate"
-                >
-                  {recordingSpace.name}
-                </NavLink>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </>
-        ) : null}
-        {recordingFolder ? (
-          <>
-            <BreadcrumbSeparator className="shrink-0" />
-            <BreadcrumbItem className="min-w-0">
-              <BreadcrumbLink asChild>
-                <NavLink
-                  to={
-                    recordingFolder.spaceId
-                      ? `/spaces/${recordingFolder.spaceId}/folder/${recordingFolder.id}`
-                      : `/library/folder/${recordingFolder.id}`
-                  }
-                  className="flex min-w-0 items-center gap-1.5"
-                >
-                  <IconFolder className="size-4 shrink-0" />
-                  <span className="truncate">{recordingFolder.name}</span>
-                </NavLink>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </>
-        ) : null}
-        <BreadcrumbSeparator className="shrink-0" />
-        <BreadcrumbItem className="min-w-0">
-          <BreadcrumbPage className="truncate">{visibleTitle}</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
+    <PageBreadcrumb items={recordingBreadcrumbItems} />
   );
   // Attribution `via` must never point at someone who isn't the owner, so it
   // is only tagged when the viewer is the owner (same rule as the share dialog).
diff --git a/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
index eddf198eaca..4952f3696c0 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
@@ -4,7 +4,7 @@ import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
 import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
-import { useFolders } from "@/hooks/use-library";
+import { useFolders, useOrganizations, useSpaces } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -18,6 +18,14 @@ export default function SpaceFolderRoute() {
     folderId: string;
   }>();
 
+  const { data: organizations } = useOrganizations();
+  const currentOrganizationId =
+    organizations?.currentId ?? organizations?.organizations?.[0]?.id;
+  const { data: spacesData } = useSpaces(currentOrganizationId);
+  const space = (spacesData?.spaces ?? []).find(
+    (candidate: any) => candidate.id === spaceId,
+  );
+
   const { data: folders } = useFolders({ spaceId });
   const folder = useMemo(
     () =>
@@ -34,6 +42,14 @@ export default function SpaceFolderRoute() {
       folderId={folderId}
       emptyKind="folder"
       title={folder?.name ?? t("navigation.folder")}
+      breadcrumbItems={[
+        { label: t("navigation.spaces"), to: "/spaces" },
+        {
+          label: space?.name ?? t("navigation.space"),
+          to: `/spaces/${spaceId}`,
+        },
+        { label: folder?.name ?? t("navigation.folder") },
+      ]}
       extraActions={
         <LibraryPrimaryActions folderId={folderId} spaceId={spaceId} />
       }
diff --git a/templates/clips/app/routes/_app.spaces.$spaceId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
index b67737a76c9..8517253291b 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
@@ -77,6 +77,10 @@ export default function SpaceRoute() {
           folderId={null}
           emptyKind="space"
           title={(space as any)?.name ?? t("navigation.space")}
+          breadcrumbItems={[
+            { label: t("navigation.spaces"), to: "/spaces" },
+            { label: (space as any)?.name ?? t("navigation.space") },
+          ]}
           extraActions={<LibraryPrimaryActions spaceId={spaceId} />}
         />
       </div>
diff --git a/templates/clips/app/routes/_app.spaces._index.tsx b/templates/clips/app/routes/_app.spaces._index.tsx
index ff57cd3b658..9158a6010ed 100644
--- a/templates/clips/app/routes/_app.spaces._index.tsx
+++ b/templates/clips/app/routes/_app.spaces._index.tsx
@@ -66,7 +66,7 @@ export default function SpacesIndexRoute() {
   return (
     <div className="flex flex-1 flex-col min-h-0">
       <PageHeader>
-        <PageBreadcrumb label={t("navigation.spaces")} />
+        <PageBreadcrumb items={[{ label: t("navigation.spaces") }]} />
         {canManageOrg && spaces.length > 0 && (
           <div className="ml-auto">
             <PageHeaderPrimaryAction onClick={() => setCreateOpen(true)}>
diff --git a/templates/clips/app/routes/_app.trash.tsx b/templates/clips/app/routes/_app.trash.tsx
index 8ef3c1734b6..88902516348 100644
--- a/templates/clips/app/routes/_app.trash.tsx
+++ b/templates/clips/app/routes/_app.trash.tsx
@@ -190,7 +190,7 @@ export default function TrashRoute() {
   return (
     <div className="flex flex-1 flex-col min-h-0">
       <PageHeader>
-        <PageBreadcrumb label={t("trashRoute.title")} />
+        <PageBreadcrumb items={[{ label: t("trashRoute.title") }]} />
         <div className="ms-auto flex items-center gap-2">
           {selectedIds.length > 0 && (
             <>

From 6dcc5099b6512e4563e516ec9ad4782852e657c3 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 16:20:11 -0700
Subject: [PATCH 06/21] fix: scope folder queries to the active organization

---
 .../components/library/library-grid-layout.test.ts   |  8 ++++++++
 .../clips/app/components/library/library-grid.tsx    | 12 +++++++++++-
 .../app/routes/_app.library.folder.$folderId.tsx     |  9 +++++++--
 .../routes/_app.spaces.$spaceId.folder.$folderId.tsx |  5 ++++-
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index 4b6f79f225d..2a498c6f78d 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -46,6 +46,14 @@ describe("selected library actions layout", () => {
     expect(primaryActionsSource).toContain('triggerIcon="chevron"');
     expect(gridSource).toContain('import { FolderCard } from "./folder-card"');
     expect(gridSource).toContain("visibleFolders");
+    expect(gridSource).toContain("organizationId: currentOrganizationId");
+    expect(folderRouteSource).toContain("useOrganizations()");
+    expect(folderRouteSource).toContain(
+      "organizationId: currentOrganizationId",
+    );
+    expect(spaceFolderRouteSource).toContain(
+      "organizationId: currentOrganizationId",
+    );
     expect(gridSource).toContain('t("navigation.folders")');
     expect(gridSource).toContain('aria-labelledby="library-folders-heading"');
     expect(gridSource).toContain('t("navigation.recordings")');
diff --git a/templates/clips/app/components/library/library-grid.tsx b/templates/clips/app/components/library/library-grid.tsx
index 2bdf2616803..d9eae305853 100644
--- a/templates/clips/app/components/library/library-grid.tsx
+++ b/templates/clips/app/components/library/library-grid.tsx
@@ -30,6 +30,7 @@ import {
 } from "@/components/ui/context-menu";
 import {
   useFolders,
+  useOrganizations,
   useRecordings,
   useRecordingsCount,
   useTrashRecording,
@@ -243,12 +244,21 @@ export function LibraryGrid({
   const moveRecording = useMoveRecording();
   const canManageRecordings = view !== "shared";
   const canMoveSelection = view === "library" || view === "space";
+  const { data: organizations } = useOrganizations({
+    enabled: canMoveSelection,
+  });
+  const currentOrganizationId =
+    organizations?.currentId ?? organizations?.organizations?.[0]?.id;
   const { data: scopedFolders, isLoading: isFoldersLoading } = useFolders(
     {
+      organizationId: currentOrganizationId,
       spaceId: view === "space" ? (spaceId ?? null) : null,
     },
     {
-      enabled: canMoveSelection && (view !== "space" || Boolean(spaceId)),
+      enabled:
+        canMoveSelection &&
+        Boolean(currentOrganizationId) &&
+        (view !== "space" || Boolean(spaceId)),
     },
   );
   const visibleFolders = useMemo(
diff --git a/templates/clips/app/routes/_app.library.folder.$folderId.tsx b/templates/clips/app/routes/_app.library.folder.$folderId.tsx
index e10f9e6fed7..bc7acdf31c6 100644
--- a/templates/clips/app/routes/_app.library.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.library.folder.$folderId.tsx
@@ -4,7 +4,7 @@ import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
 import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
-import { useFolders } from "@/hooks/use-library";
+import { useFolders, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -15,7 +15,12 @@ export default function LibraryFolderRoute() {
   const t = useT();
   const { folderId } = useParams<{ folderId: string }>();
 
-  const { data: folders } = useFolders({});
+  const { data: organizations } = useOrganizations();
+  const currentOrganizationId =
+    organizations?.currentId ?? organizations?.organizations?.[0]?.id;
+  const { data: folders } = useFolders({
+    organizationId: currentOrganizationId,
+  });
   const folder = useMemo(
     () =>
       (folders?.folders ?? []).find((f: any) => f.id === folderId) as
diff --git a/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
index 4952f3696c0..541422a8989 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
@@ -26,7 +26,10 @@ export default function SpaceFolderRoute() {
     (candidate: any) => candidate.id === spaceId,
   );
 
-  const { data: folders } = useFolders({ spaceId });
+  const { data: folders } = useFolders({
+    organizationId: currentOrganizationId,
+    spaceId,
+  });
   const folder = useMemo(
     () =>
       (folders?.folders ?? []).find((f: any) => f.id === folderId) as

From c1e77befb4de06680154a54b35195794d1406d9c Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 17:25:31 -0700
Subject: [PATCH 07/21] fix: resolve remaining Clips review findings

---
 packages/core/src/client/CommandMenu.spec.tsx |  28 ++++
 packages/core/src/client/CommandMenu.tsx      |   9 ++
 .../library/library-grid-layout.test.ts       |   3 +
 .../app/components/library/library-grid.tsx   | 135 +++++++++---------
 .../app/hooks/use-navigation-state.test.ts    |  12 ++
 .../clips/app/hooks/use-navigation-state.ts   |  12 +-
 .../app/routes/_app.r.$recordingId.test.ts    |  12 +-
 .../clips/app/routes/_app.r.$recordingId.tsx  |  11 +-
 templates/clips/app/routes/share.$shareId.tsx |   3 +-
 9 files changed, 145 insertions(+), 80 deletions(-)

diff --git a/packages/core/src/client/CommandMenu.spec.tsx b/packages/core/src/client/CommandMenu.spec.tsx
index 8d70f4695ba..00e163fd686 100644
--- a/packages/core/src/client/CommandMenu.spec.tsx
+++ b/packages/core/src/client/CommandMenu.spec.tsx
@@ -118,6 +118,34 @@ describe("CommandMenu docs group", () => {
     );
   });
 
+  it("filters command items nested in fragments", () => {
+    act(() => {
+      root.render(
+        <CommandMenu
+          open
+          onOpenChange={() => undefined}
+          showAgentFallback={false}
+        >
+          <CommandMenu.Group heading="Actions">
+            <>
+              <CommandMenu.Item onSelect={() => undefined}>
+                Open comments
+              </CommandMenu.Item>
+              <CommandMenu.Item onSelect={() => undefined}>
+                Open transcript
+              </CommandMenu.Item>
+            </>
+          </CommandMenu.Group>
+        </CommandMenu>,
+      );
+    });
+
+    search("transcript");
+
+    expect(document.body.textContent).not.toContain("Open comments");
+    expect(document.body.textContent).toContain("Open transcript");
+  });
+
   it("offers the shared About Agent-Native surface and matches version searches", () => {
     act(() => {
       root.render(
diff --git a/packages/core/src/client/CommandMenu.tsx b/packages/core/src/client/CommandMenu.tsx
index 0e834c72316..b122aa5e3d2 100644
--- a/packages/core/src/client/CommandMenu.tsx
+++ b/packages/core/src/client/CommandMenu.tsx
@@ -424,6 +424,15 @@ export function CommandMenu({
       if (!React.isValidElement(child)) return child;
       const props = child.props as Record<string, unknown>;
 
+      if (child.type === React.Fragment) {
+        const fragmentChildren = filterChildren(props.children as ReactNode);
+        if (React.Children.count(fragmentChildren) === 0) return null;
+        return React.cloneElement(child, {
+          ...props,
+          children: fragmentChildren,
+        } as Record<string, unknown>);
+      }
+
       // If it's a CommandGroup, filter its children
       if (child.type === CommandGroup) {
         const groupChildren = filterChildren(props.children as ReactNode);
diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index 2a498c6f78d..90838fc4929 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -58,6 +58,9 @@ describe("selected library actions layout", () => {
     expect(gridSource).toContain('aria-labelledby="library-folders-heading"');
     expect(gridSource).toContain('t("navigation.recordings")');
     expect(gridSource).toContain("LibraryCanvasContextMenu");
+    expect(gridSource).toContain(
+      "onContextMenu={(event) => event.stopPropagation()}",
+    );
     expect(gridSource).toContain('t("navigation.newFolder")');
     expect(folderRouteSource).toContain("<LibraryPrimaryActions folderId");
     expect(spaceRouteSource).toContain("<LibraryPrimaryActions spaceId");
diff --git a/templates/clips/app/components/library/library-grid.tsx b/templates/clips/app/components/library/library-grid.tsx
index d9eae305853..33264ec5667 100644
--- a/templates/clips/app/components/library/library-grid.tsx
+++ b/templates/clips/app/components/library/library-grid.tsx
@@ -583,79 +583,86 @@ export function LibraryGrid({
                       )}
                       <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
                         {recordings.map((r: RecordingSummary) => (
-                          <RecordingCard
+                          <div
                             key={r.id}
-                            recording={r}
-                            selected={
-                              canManageRecordings
-                                ? selected.has(r.id)
-                                : undefined
-                            }
-                            selectionMode={canManageRecordings && selectionMode}
-                            onToggleSelect={
-                              canManageRecordings
-                                ? handleToggleSelect
-                                : undefined
-                            }
-                            onShare={(rec) => setSharingRec(rec)}
-                            moveTargets={moveTargets}
-                            onMove={canMoveSelection ? moveSingle : undefined}
-                            isMovePending={moveRecording.isPending}
-                            onRetry={
-                              canManageRecordings ? handleRetry : undefined
-                            }
-                            onCreateFolder={() => {
-                              setCreateFolderTarget({
-                                kind: "single",
-                                recording: r,
-                              });
-                            }}
-                            onTrash={
-                              canManageRecordings
-                                ? (rec) => {
-                                    trashRecording.mutate(
-                                      { id: rec.id },
-                                      {
-                                        onSuccess: () =>
-                                          toast.success(
-                                            t("libraryGrid.movedToTrash"),
-                                          ),
-                                      },
-                                    );
-                                  }
-                                : undefined
-                            }
-                            onArchive={
-                              canManageRecordings
-                                ? (rec) => {
-                                    if (rec.archivedAt) {
-                                      restoreRecording.mutate(
+                            className="min-w-0"
+                            onContextMenu={(event) => event.stopPropagation()}
+                          >
+                            <RecordingCard
+                              recording={r}
+                              selected={
+                                canManageRecordings
+                                  ? selected.has(r.id)
+                                  : undefined
+                              }
+                              selectionMode={
+                                canManageRecordings && selectionMode
+                              }
+                              onToggleSelect={
+                                canManageRecordings
+                                  ? handleToggleSelect
+                                  : undefined
+                              }
+                              onShare={(rec) => setSharingRec(rec)}
+                              moveTargets={moveTargets}
+                              onMove={canMoveSelection ? moveSingle : undefined}
+                              isMovePending={moveRecording.isPending}
+                              onRetry={
+                                canManageRecordings ? handleRetry : undefined
+                              }
+                              onCreateFolder={() => {
+                                setCreateFolderTarget({
+                                  kind: "single",
+                                  recording: r,
+                                });
+                              }}
+                              onTrash={
+                                canManageRecordings
+                                  ? (rec) => {
+                                      trashRecording.mutate(
                                         { id: rec.id },
                                         {
                                           onSuccess: () =>
                                             toast.success(
-                                              t(
-                                                "libraryGrid.restoredFromArchive",
-                                              ),
-                                            ),
-                                        },
-                                      );
-                                    } else {
-                                      archiveRecording.mutate(
-                                        { id: rec.id },
-                                        {
-                                          onSuccess: () =>
-                                            toast.success(
-                                              t("libraryGrid.archived"),
+                                              t("libraryGrid.movedToTrash"),
                                             ),
                                         },
                                       );
                                     }
-                                  }
-                                : undefined
-                            }
-                            readOnly={!canManageRecordings}
-                          />
+                                  : undefined
+                              }
+                              onArchive={
+                                canManageRecordings
+                                  ? (rec) => {
+                                      if (rec.archivedAt) {
+                                        restoreRecording.mutate(
+                                          { id: rec.id },
+                                          {
+                                            onSuccess: () =>
+                                              toast.success(
+                                                t(
+                                                  "libraryGrid.restoredFromArchive",
+                                                ),
+                                              ),
+                                          },
+                                        );
+                                      } else {
+                                        archiveRecording.mutate(
+                                          { id: rec.id },
+                                          {
+                                            onSuccess: () =>
+                                              toast.success(
+                                                t("libraryGrid.archived"),
+                                              ),
+                                          },
+                                        );
+                                      }
+                                    }
+                                  : undefined
+                              }
+                              readOnly={!canManageRecordings}
+                            />
+                          </div>
                         ))}
                       </div>
                     </section>
diff --git a/templates/clips/app/hooks/use-navigation-state.test.ts b/templates/clips/app/hooks/use-navigation-state.test.ts
index 382c837afd3..7984f04967c 100644
--- a/templates/clips/app/hooks/use-navigation-state.test.ts
+++ b/templates/clips/app/hooks/use-navigation-state.test.ts
@@ -93,4 +93,16 @@ describe("Clips shared navigation", () => {
       view: "library",
     });
   });
+
+  it("keeps a query-selected dictation in shared navigation state", () => {
+    expect(stateFromLocation("/dictate", "?dictationId=dictation%2F1")).toEqual(
+      {
+        view: "dictate",
+        dictationId: "dictation/1",
+      },
+    );
+    expect(
+      pathFromCommand({ view: "dictate", dictationId: "dictation/1" }),
+    ).toBe("/dictate?dictationId=dictation%2F1");
+  });
 });
diff --git a/templates/clips/app/hooks/use-navigation-state.ts b/templates/clips/app/hooks/use-navigation-state.ts
index da5ad03c56b..1beffaed131 100644
--- a/templates/clips/app/hooks/use-navigation-state.ts
+++ b/templates/clips/app/hooks/use-navigation-state.ts
@@ -162,11 +162,13 @@ export function stateFromLocation(
     };
   }
 
-  // /dictate (optionally /dictate/:dictationId in the future)
+  // /dictate?dictationId=:dictationId (optionally /dictate/:dictationId in the future)
   const dictateMatch = p.match(/^\/dictate(?:\/([^/]+))?$/);
   if (dictateMatch) {
-    const dictationId = decodePathSegment(dictateMatch[1]);
-    if (dictateMatch[1] && !dictationId) return { view: "library" };
+    const pathDictationId = decodePathSegment(dictateMatch[1]);
+    if (dictateMatch[1] && !pathDictationId) return { view: "library" };
+    const queryDictationId = params.get("dictationId")?.trim() || undefined;
+    const dictationId = pathDictationId ?? queryDictationId;
     return {
       view: "dictate",
       ...(dictationId ? { dictationId } : {}),
@@ -263,7 +265,9 @@ export function pathFromCommand(cmd: NavigateCommand): string {
         ? `/meetings/${encodeURIComponent(cmd.meetingId)}`
         : "/meetings";
     case "dictate":
-      return "/dictate";
+      return cmd.dictationId
+        ? `/dictate?dictationId=${encodeURIComponent(cmd.dictationId)}`
+        : "/dictate";
     case "library":
     default:
       if (cmd.folderId) {
diff --git a/templates/clips/app/routes/_app.r.$recordingId.test.ts b/templates/clips/app/routes/_app.r.$recordingId.test.ts
index 52a29049a4a..a98cccccb2a 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.test.ts
+++ b/templates/clips/app/routes/_app.r.$recordingId.test.ts
@@ -139,6 +139,8 @@ describe("direct recording route shell cue", () => {
     expect(route).toContain('if (value === "comments")');
     expect(route).toContain("openCommentsPanel();");
     expect(route).toContain('value="comments"');
+    expect(route).toContain("forceMount");
+    expect(route).toContain("data-[state=inactive]:hidden");
     expect(route).not.toContain("IconLayoutSidebarRightCollapse");
     expect(route).not.toContain("IconLayoutSidebarRightExpand");
     expect(route).not.toContain("closeSidePanel");
@@ -151,12 +153,8 @@ describe("direct recording route shell cue", () => {
     );
     expect(mobilePanelStart).toBeGreaterThan(-1);
     expect(mobilePanel).toContain("RecordingSidePanel");
-    expect(mobilePanel).toContain('panel === "comments"');
-    expect(mobilePanel).toContain("renderCommentsSection(true)");
+    expect(mobilePanel).toContain("renderSidePanel(true)");
     expect(mobilePanel).toContain("{renderPanelTabs()}");
-    expect(mobilePanel.indexOf("{renderPanelTabs()}")).toBeLessThan(
-      mobilePanel.indexOf('panel === "comments"'),
-    );
     const sidePanelStart = route.indexOf("{/* Side panel */}");
     const sidePanel = route.slice(sidePanelStart, route.indexOf("</Tabs>"));
     expect(sidePanelStart).toBeGreaterThan(-1);
@@ -186,6 +184,10 @@ describe("direct recording route shell cue", () => {
       "overflow-x-hidden bg-background lg:grid-cols-[minmax(0,1fr)_auto]",
     );
 
+    const shareRoute = readRoute("share.$shareId.tsx");
+    expect(shareRoute).toContain("forceMount");
+    expect(shareRoute).toContain("data-[state=inactive]:hidden");
+
     const viewerControls = readFileSync(
       resolve(process.cwd(), "app/components/player/viewer-controls.tsx"),
       "utf8",
diff --git a/templates/clips/app/routes/_app.r.$recordingId.tsx b/templates/clips/app/routes/_app.r.$recordingId.tsx
index 39f4b288c82..87c997a0d91 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.tsx
+++ b/templates/clips/app/routes/_app.r.$recordingId.tsx
@@ -1922,15 +1922,16 @@ export default function RecordingPage() {
     </section>
   );
 
-  const renderSidePanel = () => {
+  const renderSidePanel = (compact = false) => {
     return (
       <>
         {recording.enableComments ? (
           <TabsContent
+            forceMount
             value="comments"
-            className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden"
+            className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
           >
-            {renderCommentsSection()}
+            {renderCommentsSection(compact)}
           </TabsContent>
         ) : null}
         <TabsContent
@@ -2520,9 +2521,7 @@ export default function RecordingPage() {
                     className="mt-2 lg:hidden"
                     tabs={renderPanelTabs()}
                   >
-                    {panel === "comments"
-                      ? renderCommentsSection(true)
-                      : renderSidePanel()}
+                    {renderSidePanel(true)}
                   </RecordingSidePanel>
                 ) : null}
               </div>
diff --git a/templates/clips/app/routes/share.$shareId.tsx b/templates/clips/app/routes/share.$shareId.tsx
index f8d78f156f3..aa178e4933a 100644
--- a/templates/clips/app/routes/share.$shareId.tsx
+++ b/templates/clips/app/routes/share.$shareId.tsx
@@ -1663,8 +1663,9 @@ export default function ShareRoute() {
         >
           {recording.enableComments ? (
             <TabsContent
+              forceMount
               value="comments"
-              className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden"
+              className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
             >
               <section
                 ref={commentsSectionRef}

From 1b82d89c89bdb74e45f5fccaded9e3280f65fd23 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 17:44:13 -0700
Subject: [PATCH 08/21] fix: rebalance the sidebar feedback action

---
 .../library/library-grid-layout.test.ts       |  9 +++++++
 .../library/sidebar-feedback-button.tsx       |  6 ++---
 templates/clips/app/global.css                | 26 +++++++++++++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index 90838fc4929..fa91c85ee30 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -19,6 +19,7 @@ describe("selected library actions layout", () => {
     );
     const primaryActionsSource = readSource("./library-primary-actions.tsx");
     const feedbackSource = readSource("./sidebar-feedback-button.tsx");
+    const globalStyles = readSource("../../global.css");
     const spacesRouteSource = readSource("../../routes/_app.spaces._index.tsx");
     const spaceRouteSource = readSource(
       "../../routes/_app.spaces.$spaceId.tsx",
@@ -135,6 +136,14 @@ describe("selected library actions layout", () => {
     expect(feedbackSource).toContain(
       "bg-transparent text-primary hover:bg-accent/60 hover:text-primary",
     );
+    expect(feedbackSource).toContain(
+      "h-auto w-full justify-start gap-2 bg-transparent px-2 py-1.5 text-xs font-normal",
+    );
+    expect(feedbackSource).toContain("IconMoodSmile");
+    expect(feedbackSource).toContain("clips-feedback-nudge");
+    expect(globalStyles).toContain("@keyframes clips-feedback-nudge");
+    expect(globalStyles).toContain(".clips-feedback-nudge {");
+    expect(globalStyles).toContain("animation: none");
     expect(feedbackSource).not.toContain("bg-primary/5");
     expect(layoutSource).toContain('currentAppId="clips"');
     expect(feedbackSource).toContain("openBugReportDialog");
diff --git a/templates/clips/app/components/library/sidebar-feedback-button.tsx b/templates/clips/app/components/library/sidebar-feedback-button.tsx
index c8d71b403b1..07588fa3ce7 100644
--- a/templates/clips/app/components/library/sidebar-feedback-button.tsx
+++ b/templates/clips/app/components/library/sidebar-feedback-button.tsx
@@ -1,5 +1,5 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { IconMessageCircle } from "@tabler/icons-react";
+import { IconMoodSmile } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -29,10 +29,10 @@ export function SidebarFeedbackButton({
       className={
         collapsed
           ? "size-9 bg-transparent text-primary hover:bg-accent/60 hover:text-primary"
-          : "h-9 w-full justify-start gap-2 bg-transparent px-3 font-medium text-primary hover:bg-accent/60 hover:text-primary"
+          : "h-auto w-full justify-start gap-2 bg-transparent px-2 py-1.5 text-xs font-normal text-primary hover:bg-accent/60 hover:text-primary"
       }
     >
-      <IconMessageCircle className="size-4 shrink-0 text-primary" />
+      <IconMoodSmile className="clips-feedback-nudge size-4 shrink-0 text-primary" />
       {!collapsed && <span>{label}</span>}
     </Button>
   );
diff --git a/templates/clips/app/global.css b/templates/clips/app/global.css
index 459dbbc8051..d580553fa9f 100644
--- a/templates/clips/app/global.css
+++ b/templates/clips/app/global.css
@@ -151,6 +151,28 @@
   }
 }
 
+@keyframes clips-feedback-nudge {
+  0%,
+  88%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  91% {
+    transform: translateY(-1px) rotate(-8deg);
+  }
+  94% {
+    transform: translateY(0) rotate(7deg);
+  }
+  97% {
+    transform: translateY(-1px) rotate(-3deg);
+  }
+}
+
+.clips-feedback-nudge {
+  animation: clips-feedback-nudge 6s ease-in-out infinite;
+  transform-origin: center;
+}
+
 .clips-collapsible-content {
   overflow: hidden;
   transform-origin: top;
@@ -168,6 +190,10 @@
   .clips-collapsible-content[data-state] {
     animation-duration: 1ms;
   }
+
+  .clips-feedback-nudge {
+    animation: none;
+  }
 }
 
 @container agent-native-main (min-width: 980px) {

From bfce827de005bf7f56b1e6b64a7f97647f592be5 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 17:53:23 -0700
Subject: [PATCH 09/21] fix: simplify the sidebar feedback action

---
 .../library/library-grid-layout.test.ts       |  8 +++---
 .../library/sidebar-feedback-button.tsx       |  4 +--
 templates/clips/app/global.css                | 26 -------------------
 3 files changed, 5 insertions(+), 33 deletions(-)

diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index fa91c85ee30..5009e6e7010 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -139,11 +139,9 @@ describe("selected library actions layout", () => {
     expect(feedbackSource).toContain(
       "h-auto w-full justify-start gap-2 bg-transparent px-2 py-1.5 text-xs font-normal",
     );
-    expect(feedbackSource).toContain("IconMoodSmile");
-    expect(feedbackSource).toContain("clips-feedback-nudge");
-    expect(globalStyles).toContain("@keyframes clips-feedback-nudge");
-    expect(globalStyles).toContain(".clips-feedback-nudge {");
-    expect(globalStyles).toContain("animation: none");
+    expect(feedbackSource).toContain("IconMessageCircle");
+    expect(feedbackSource).not.toContain("clips-feedback-nudge");
+    expect(globalStyles).not.toContain("clips-feedback-nudge");
     expect(feedbackSource).not.toContain("bg-primary/5");
     expect(layoutSource).toContain('currentAppId="clips"');
     expect(feedbackSource).toContain("openBugReportDialog");
diff --git a/templates/clips/app/components/library/sidebar-feedback-button.tsx b/templates/clips/app/components/library/sidebar-feedback-button.tsx
index 07588fa3ce7..d3dc0ed0998 100644
--- a/templates/clips/app/components/library/sidebar-feedback-button.tsx
+++ b/templates/clips/app/components/library/sidebar-feedback-button.tsx
@@ -1,5 +1,5 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { IconMoodSmile } from "@tabler/icons-react";
+import { IconMessageCircle } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -32,7 +32,7 @@ export function SidebarFeedbackButton({
           : "h-auto w-full justify-start gap-2 bg-transparent px-2 py-1.5 text-xs font-normal text-primary hover:bg-accent/60 hover:text-primary"
       }
     >
-      <IconMoodSmile className="clips-feedback-nudge size-4 shrink-0 text-primary" />
+      <IconMessageCircle className="size-4 shrink-0 text-primary" />
       {!collapsed && <span>{label}</span>}
     </Button>
   );
diff --git a/templates/clips/app/global.css b/templates/clips/app/global.css
index d580553fa9f..459dbbc8051 100644
--- a/templates/clips/app/global.css
+++ b/templates/clips/app/global.css
@@ -151,28 +151,6 @@
   }
 }
 
-@keyframes clips-feedback-nudge {
-  0%,
-  88%,
-  100% {
-    transform: translateY(0) rotate(0deg);
-  }
-  91% {
-    transform: translateY(-1px) rotate(-8deg);
-  }
-  94% {
-    transform: translateY(0) rotate(7deg);
-  }
-  97% {
-    transform: translateY(-1px) rotate(-3deg);
-  }
-}
-
-.clips-feedback-nudge {
-  animation: clips-feedback-nudge 6s ease-in-out infinite;
-  transform-origin: center;
-}
-
 .clips-collapsible-content {
   overflow: hidden;
   transform-origin: top;
@@ -190,10 +168,6 @@
   .clips-collapsible-content[data-state] {
     animation-duration: 1ms;
   }
-
-  .clips-feedback-nudge {
-    animation: none;
-  }
 }
 
 @container agent-native-main (min-width: 980px) {

From 42f8db5e7971bcec20b0cc86cc39ba8f766767a7 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 18:11:41 -0700
Subject: [PATCH 10/21] feat: add library canvas import actions

---
 .../library/library-action-hrefs.ts           | 27 +++++++++
 .../library/library-context-menu.test.ts      | 26 +++++++++
 .../app/components/library/library-grid.tsx   | 55 ++++++++++++++++---
 .../library/library-primary-actions.tsx       | 27 +++------
 4 files changed, 109 insertions(+), 26 deletions(-)
 create mode 100644 templates/clips/app/components/library/library-action-hrefs.ts

diff --git a/templates/clips/app/components/library/library-action-hrefs.ts b/templates/clips/app/components/library/library-action-hrefs.ts
new file mode 100644
index 00000000000..1f13450b4ed
--- /dev/null
+++ b/templates/clips/app/components/library/library-action-hrefs.ts
@@ -0,0 +1,27 @@
+export interface LibraryActionScope {
+  folderId?: string | null;
+  spaceId?: string | null;
+}
+
+function scopedPath(pathname: string, params: URLSearchParams) {
+  const query = params.toString();
+  return query ? `${pathname}?${query}` : pathname;
+}
+
+export function buildLibraryActionHrefs({
+  folderId,
+  spaceId,
+}: LibraryActionScope) {
+  const scope = new URLSearchParams();
+  if (spaceId) scope.set("spaceId", spaceId);
+  if (folderId) scope.set("folderId", folderId);
+
+  const uploadParams = new URLSearchParams(scope);
+  uploadParams.set("autoUpload", "1");
+
+  return {
+    recordHref: scopedPath("/record", scope),
+    uploadHref: scopedPath("/record", uploadParams),
+    importLoomHref: scopedPath("/import", scope),
+  };
+}
diff --git a/templates/clips/app/components/library/library-context-menu.test.ts b/templates/clips/app/components/library/library-context-menu.test.ts
index eb3f360552b..bacca4a58a1 100644
--- a/templates/clips/app/components/library/library-context-menu.test.ts
+++ b/templates/clips/app/components/library/library-context-menu.test.ts
@@ -2,6 +2,8 @@ import { readFileSync } from "node:fs";
 
 import { describe, expect, it } from "vitest";
 
+import { buildLibraryActionHrefs } from "./library-action-hrefs";
+
 function readSource(name: string): string {
   return readFileSync(new URL(name, import.meta.url), "utf8");
 }
@@ -26,4 +28,28 @@ describe("library contextual menus", () => {
     expect(spaceSource).toContain('t("spaceDialog.deleteSpace")');
     expect(layoutSource).toContain("to={`/spaces/${s.id}`}");
   });
+
+  it("offers scoped ingestion actions from the empty library canvas", () => {
+    const gridSource = readSource("./library-grid.tsx");
+
+    expect(gridSource).toContain("buildLibraryActionHrefs");
+    expect(gridSource).toContain("useUploadVideoPicker");
+    expect(gridSource).toContain('t("preRecord.uploadVideo")');
+    expect(gridSource).toContain('t("preRecord.importLoom")');
+    expect(gridSource).toContain("openUploadPicker(uploadHref)");
+    expect(gridSource).toContain("<Link to={importLoomHref}>");
+
+    expect(buildLibraryActionHrefs({})).toEqual({
+      recordHref: "/record",
+      uploadHref: "/record?autoUpload=1",
+      importLoomHref: "/import",
+    });
+    expect(
+      buildLibraryActionHrefs({ spaceId: "space-1", folderId: "folder-1" }),
+    ).toEqual({
+      recordHref: "/record?spaceId=space-1&folderId=folder-1",
+      uploadHref: "/record?spaceId=space-1&folderId=folder-1&autoUpload=1",
+      importLoomHref: "/import?spaceId=space-1&folderId=folder-1",
+    });
+  });
 });
diff --git a/templates/clips/app/components/library/library-grid.tsx b/templates/clips/app/components/library/library-grid.tsx
index 33264ec5667..e969594d56e 100644
--- a/templates/clips/app/components/library/library-grid.tsx
+++ b/templates/clips/app/components/library/library-grid.tsx
@@ -9,6 +9,8 @@ import {
   IconChevronLeft,
   IconChevronRight,
   IconFolderPlus,
+  IconLink,
+  IconUpload,
 } from "@tabler/icons-react";
 import {
   type ReactElement,
@@ -17,6 +19,7 @@ import {
   useMemo,
   useState,
 } from "react";
+import { Link } from "react-router";
 import { toast } from "sonner";
 
 import { CreateFolderDialog } from "@/components/library/create-folder-dialog";
@@ -26,6 +29,7 @@ import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
 import {
@@ -40,6 +44,7 @@ import {
   type ListRecordingsArgs,
   type RecordingSummary,
 } from "@/hooks/use-library";
+import { useUploadVideoPicker } from "@/hooks/use-upload-video-picker";
 import { OPEN_CREATE_FOLDER_EVENT } from "@/lib/command-events";
 import { retryRecordingUploadFromBackup } from "@/lib/recording-retry";
 import { cn } from "@/lib/utils";
@@ -48,6 +53,7 @@ import { BulkActionToolbar, type BulkMoveTarget } from "./bulk-action-toolbar";
 import { EmptyState } from "./empty-state";
 import { FilterChips, type FilterChip } from "./filter-chips";
 import { FolderCard } from "./folder-card";
+import { buildLibraryActionHrefs } from "./library-action-hrefs";
 import {
   PageBreadcrumb,
   PageHeader,
@@ -97,13 +103,18 @@ type CreateFolderTarget =
 function LibraryCanvasContextMenu({
   enabled,
   onCreateFolder,
+  uploadHref,
+  importLoomHref,
   children,
 }: {
   enabled: boolean;
   onCreateFolder: () => void;
+  uploadHref: string;
+  importLoomHref: string;
   children: ReactElement;
 }) {
   const t = useT();
+  const { input, openUploadPicker } = useUploadVideoPicker();
 
   if (!enabled) return children;
 
@@ -119,7 +130,24 @@ function LibraryCanvasContextMenu({
           <IconFolderPlus className="me-2 size-4" />
           {t("navigation.newFolder")}
         </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          onSelect={(event) => {
+            event.preventDefault();
+            openUploadPicker(uploadHref);
+          }}
+        >
+          <IconUpload />
+          {t("preRecord.uploadVideo")}
+        </ContextMenuItem>
+        <ContextMenuItem asChild>
+          <Link to={importLoomHref}>
+            <IconLink />
+            {t("preRecord.importLoom")}
+          </Link>
+        </ContextMenuItem>
       </ContextMenuContent>
+      {input}
     </ContextMenu>
   );
 }
@@ -177,6 +205,10 @@ export function LibraryGrid({
   const selectionStateKey = useMemo(() => `selection:${getBrowserTabId()}`, []);
   const pageBreadcrumbItems =
     breadcrumbItems ?? (title ? [{ label: title }] : []);
+  const { uploadHref, importLoomHref } = buildLibraryActionHrefs({
+    folderId,
+    spaceId,
+  });
 
   useEffect(() => {
     if (!title) return;
@@ -512,6 +544,8 @@ export function LibraryGrid({
           <LibraryCanvasContextMenu
             enabled={canMoveSelection}
             onCreateFolder={() => setCreateFolderOpen(true)}
+            uploadHref={uploadHref}
+            importLoomHref={importLoomHref}
           >
             <div className="flex min-h-full flex-col p-5">
               {isLoading || (view !== "shared" && isFoldersLoading) ? (
@@ -557,15 +591,20 @@ export function LibraryGrid({
                       </h2>
                       <div className="grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))]">
                         {visibleFolders.map((folder) => (
-                          <FolderCard
+                          <div
                             key={folder.id}
-                            folder={folder}
-                            href={
-                              view === "space"
-                                ? `/spaces/${spaceId}/folder/${folder.id}`
-                                : `/library/folder/${folder.id}`
-                            }
-                          />
+                            className="min-w-0"
+                            onContextMenu={(event) => event.stopPropagation()}
+                          >
+                            <FolderCard
+                              folder={folder}
+                              href={
+                                view === "space"
+                                  ? `/spaces/${spaceId}/folder/${folder.id}`
+                                  : `/library/folder/${folder.id}`
+                              }
+                            />
+                          </div>
                         ))}
                       </div>
                     </section>
diff --git a/templates/clips/app/components/library/library-primary-actions.tsx b/templates/clips/app/components/library/library-primary-actions.tsx
index a7c441bd670..5e8a29c462f 100644
--- a/templates/clips/app/components/library/library-primary-actions.tsx
+++ b/templates/clips/app/components/library/library-primary-actions.tsx
@@ -4,32 +4,23 @@ import { NavLink } from "react-router";
 
 import { ImportMenu } from "@/components/import-menu";
 
+import {
+  buildLibraryActionHrefs,
+  type LibraryActionScope,
+} from "./library-action-hrefs";
 import { PageHeaderActionGroup, PageHeaderPrimaryAction } from "./page-header";
 
-interface LibraryPrimaryActionsProps {
-  folderId?: string | null;
-  spaceId?: string | null;
-}
-
-function scopedPath(pathname: string, params: URLSearchParams) {
-  const query = params.toString();
-  return query ? `${pathname}?${query}` : pathname;
-}
+type LibraryPrimaryActionsProps = LibraryActionScope;
 
 export function LibraryPrimaryActions({
   folderId,
   spaceId,
 }: LibraryPrimaryActionsProps) {
   const t = useT();
-  const scope = new URLSearchParams();
-  if (spaceId) scope.set("spaceId", spaceId);
-  if (folderId) scope.set("folderId", folderId);
-
-  const recordHref = scopedPath("/record", scope);
-  const uploadParams = new URLSearchParams(scope);
-  uploadParams.set("autoUpload", "1");
-  const uploadHref = scopedPath("/record", uploadParams);
-  const importLoomHref = scopedPath("/import", scope);
+  const { recordHref, uploadHref, importLoomHref } = buildLibraryActionHrefs({
+    folderId,
+    spaceId,
+  });
 
   return (
     <PageHeaderActionGroup>

From 5324dce0c83c8b7c42b77d6b1e9c8b25dd37de7f Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 18:55:37 -0700
Subject: [PATCH 11/21] fix: restore the canonical agent chat icon

---
 templates/clips/app/components/library/library-layout.tsx | 8 +-------
 templates/clips/app/routes/_app.r.$recordingId.test.ts    | 2 +-
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/templates/clips/app/components/library/library-layout.tsx b/templates/clips/app/components/library/library-layout.tsx
index 4472253c336..78ee2559ade 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -29,7 +29,6 @@ import {
   IconMenu2,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
-  IconLayoutSidebarRight,
   IconShare,
   IconDots,
   IconEdit,
@@ -117,12 +116,7 @@ function readSidebarCollapsedPreference() {
 }
 
 function ClipsAgentToggleButton() {
-  return (
-    <AgentToggleButton
-      showWhenOpen
-      icon={<IconLayoutSidebarRight className="size-5" aria-hidden />}
-    />
-  );
+  return <AgentToggleButton showWhenOpen />;
 }
 
 interface ExpandedSidebarNavGroupProps {
diff --git a/templates/clips/app/routes/_app.r.$recordingId.test.ts b/templates/clips/app/routes/_app.r.$recordingId.test.ts
index 096590024e4..b61dfebe80b 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.test.ts
+++ b/templates/clips/app/routes/_app.r.$recordingId.test.ts
@@ -232,7 +232,7 @@ describe("direct recording route shell cue", () => {
     expect(layout).toContain("showCollapseButton={isMobile}");
     expect(layout).toContain("<AgentToggleButton");
     expect(layout).toContain("showWhenOpen");
-    expect(layout).toContain("<IconLayoutSidebarRight");
+    expect(layout).not.toContain("IconLayoutSidebarRight");
     expect(layout).toContain("<ClipsAgentToggleButton />");
     expect(layout).toContain("[&>.agent-sidebar-shell]:h-full");
     expect(layout).toContain("showAgentSidebar = true");

From 6f0e0328eb8075886153d376f8586e371572dec5 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 19:50:21 -0700
Subject: [PATCH 12/21] fix: show recording counts for folders

---
 .../clips/actions/list-organization-state.ts  |  59 +++++++++-
 .../app/components/library/folder-tree.tsx    | 101 ++++++++++--------
 .../library/library-grid-layout.test.ts       |  17 +++
 .../app/components/library/library-layout.tsx |   2 +
 .../clips/app/routes/_app.spaces.$spaceId.tsx |   1 +
 5 files changed, 133 insertions(+), 47 deletions(-)

diff --git a/templates/clips/actions/list-organization-state.ts b/templates/clips/actions/list-organization-state.ts
index 6c0b217515f..1733d195ffe 100644
--- a/templates/clips/actions/list-organization-state.ts
+++ b/templates/clips/actions/list-organization-state.ts
@@ -16,10 +16,24 @@ import {
 } from "@agent-native/core/org";
 import { isEmailDerivedName } from "@agent-native/core/user-profile";
 import { getUserProfiles } from "@agent-native/core/user-profile/server";
-import { and, asc, desc, eq, isNotNull, or } from "drizzle-orm";
+import {
+  and,
+  asc,
+  desc,
+  eq,
+  isNotNull,
+  isNull,
+  notInArray,
+  or,
+  sql,
+} from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import {
+  agentRecordingAccessFilter,
+  isAgentRecordingCaller,
+} from "../server/lib/agent-recording-access.js";
 import {
   getCurrentOwnerEmail,
   ownerEmailMatches,
@@ -38,7 +52,7 @@ export default defineAction({
       ),
   }),
   http: { method: "GET" },
-  run: async (args) => {
+  run: async (args, ctx) => {
     const db = getDb();
     const ownerEmail = getCurrentOwnerEmail();
 
@@ -127,7 +141,12 @@ export default defineAction({
       createdAt: Number(i.createdAt),
     }));
 
-    const [spaces, folders] = await Promise.all([
+    const resolvedDb = await Promise.resolve(db);
+    const meetingRecordingIds = resolvedDb
+      .select({ id: schema.meetings.recordingId })
+      .from(schema.meetings)
+      .where(isNotNull(schema.meetings.recordingId));
+    const [spaces, folders, folderRecordingCountRows] = await Promise.all([
       db
         .select()
         .from(schema.spaces)
@@ -146,7 +165,39 @@ export default defineAction({
           ),
         )
         .orderBy(asc(schema.folders.position)),
+      resolvedDb
+        .select({
+          folderId: schema.recordings.folderId,
+          recordingCount: sql<number>`COUNT(1)`,
+        })
+        .from(schema.recordings)
+        .where(
+          and(
+            agentRecordingAccessFilter(
+              schema.recordings,
+              schema.recordingShares,
+              schema.recordingViewers,
+              {
+                agentOnly: isAgentRecordingCaller(ctx?.caller),
+                userEmail: ctx?.userEmail,
+              },
+            ),
+            eq(schema.recordings.organizationId, organizationId),
+            isNotNull(schema.recordings.folderId),
+            isNull(schema.recordings.archivedAt),
+            isNull(schema.recordings.trashedAt),
+            notInArray(schema.recordings.id, meetingRecordingIds),
+          ),
+        )
+        .groupBy(schema.recordings.folderId),
     ]);
+    const recordingCountByFolder = new Map(
+      folderRecordingCountRows.flatMap((row) =>
+        row.folderId
+          ? [[row.folderId, Number(row.recordingCount ?? 0)] as const]
+          : [],
+      ),
+    );
 
     return {
       currentUserEmail: ownerEmail,
@@ -173,6 +224,7 @@ export default defineAction({
         spaceId: f.spaceId,
         ownerEmail: f.ownerEmail,
         position: f.position,
+        recordingCount: recordingCountByFolder.get(f.id) ?? 0,
       })),
       personalFolders: folders
         .filter((f) => f.spaceId === null)
@@ -180,6 +232,7 @@ export default defineAction({
           id: f.id,
           name: f.name,
           parentId: f.parentId,
+          recordingCount: recordingCountByFolder.get(f.id) ?? 0,
         })),
       invitations,
     };
diff --git a/templates/clips/app/components/library/folder-tree.tsx b/templates/clips/app/components/library/folder-tree.tsx
index 9a53a22eb3f..127f5b901f0 100644
--- a/templates/clips/app/components/library/folder-tree.tsx
+++ b/templates/clips/app/components/library/folder-tree.tsx
@@ -53,6 +53,7 @@ export interface FolderNode {
   parentId: string | null;
   spaceId: string | null;
   name: string;
+  recordingCount?: number;
   children?: FolderNode[];
 }
 
@@ -225,50 +226,62 @@ function FolderItem({
                   </button>
                 </CollapsibleTrigger>
               )}
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <button
-                    type="button"
-                    aria-label={`${node.name}: ${t("root.commandActions")}`}
-                    title={`${node.name}: ${t("root.commandActions")}`}
-                    className="rounded p-0.5 text-primary opacity-0 transition-opacity hover:bg-accent hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
-                  >
-                    <IconDots className="h-3.5 w-3.5" />
-                  </button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" side="right">
-                  <DropdownMenuItem
-                    onSelect={() => {
-                      setTimeout(() => {
-                        setRenameValue(node.name);
-                        setRenameOpen(true);
-                      }, 0);
-                    }}
-                  >
-                    <IconEdit className="h-3.5 w-3.5 me-2" />{" "}
-                    {t("folderTree.rename")}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={() => {
-                      setTimeout(() => {
-                        setNewValue("");
-                        setNewOpen(true);
-                      }, 0);
-                    }}
-                  >
-                    <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
-                    {t("folderTree.newSubfolder")}
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onSelect={() => setTimeout(() => setConfirmDelete(true), 0)}
-                    className="text-destructive"
-                  >
-                    <IconTrash className="h-3.5 w-3.5 me-2" />{" "}
-                    {t("folderTree.delete")}
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <div className="relative size-5 shrink-0">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label={`${node.name}: ${t("root.commandActions")}`}
+                      title={`${node.name}: ${t("root.commandActions")}`}
+                      className="peer absolute inset-0 flex items-center justify-center rounded text-primary opacity-0 transition-opacity hover:bg-accent hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
+                    >
+                      <IconDots className="h-3.5 w-3.5" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" side="right">
+                    <DropdownMenuItem
+                      onSelect={() => {
+                        setTimeout(() => {
+                          setRenameValue(node.name);
+                          setRenameOpen(true);
+                        }, 0);
+                      }}
+                    >
+                      <IconEdit className="h-3.5 w-3.5 me-2" />{" "}
+                      {t("folderTree.rename")}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onSelect={() => {
+                        setTimeout(() => {
+                          setNewValue("");
+                          setNewOpen(true);
+                        }, 0);
+                      }}
+                    >
+                      <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
+                      {t("folderTree.newSubfolder")}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      onSelect={() =>
+                        setTimeout(() => setConfirmDelete(true), 0)
+                      }
+                      className="text-destructive"
+                    >
+                      <IconTrash className="h-3.5 w-3.5 me-2" />{" "}
+                      {t("folderTree.delete")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                {(node.recordingCount ?? 0) > 0 && (
+                  <span className="pointer-events-none absolute inset-0 flex items-center justify-end tabular-nums text-[11px] text-primary/80 transition-opacity group-hover:opacity-0 group-focus-within:opacity-0 peer-data-[state=open]:opacity-0">
+                    {node.recordingCount}
+                    <span className="sr-only">
+                      {t("navigation.recordings")}
+                    </span>
+                  </span>
+                )}
+              </div>
             </div>
           </ContextMenuTrigger>
           <ContextMenuContent>
diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index 5009e6e7010..441af0beacb 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -11,6 +11,9 @@ describe("selected library actions layout", () => {
     const gridSource = readSource("./library-grid.tsx");
     const layoutSource = readSource("./library-layout.tsx");
     const folderTreeSource = readSource("./folder-tree.tsx");
+    const organizationStateSource = readSource(
+      "../../../actions/list-organization-state.ts",
+    );
     const libraryRouteSource = readSource(
       "../../routes/_app.library._index.tsx",
     );
@@ -100,6 +103,20 @@ describe("selected library actions layout", () => {
     expect(folderTreeSource).toContain("compact ?");
     expect(folderTreeSource).toContain("!compact &&");
     expect(folderTreeSource).toContain("compact && hasChildren");
+    expect(folderTreeSource).toContain("node.recordingCount");
+    expect(folderTreeSource).toContain("tabular-nums");
+    expect(folderTreeSource).toContain("group-hover:opacity-0");
+    expect(folderTreeSource).toContain("peer-data-[state=open]:opacity-0");
+    expect(folderTreeSource).toContain("pointer-events-none");
+    expect(layoutSource).toContain(
+      "recordingCount: Number(folder.recordingCount ?? 0)",
+    );
+    expect(organizationStateSource).toContain(
+      ".groupBy(schema.recordings.folderId)",
+    );
+    expect(organizationStateSource).toContain(
+      "recordingCount: recordingCountByFolder.get(f.id) ?? 0",
+    );
     expect(layoutSource).not.toContain('t("navigation.noSpaces")');
     expect(layoutSource).not.toContain('t("folderTree.noFolders")');
     expect(layoutSource).not.toContain("pageHasHeaderSearch");
diff --git a/templates/clips/app/components/library/library-layout.tsx b/templates/clips/app/components/library/library-layout.tsx
index 78ee2559ade..1119a24ffb1 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -251,6 +251,7 @@ export function LibraryLayout({
           parentId: f.parentId ?? null,
           spaceId: f.spaceId ?? null,
           name: f.name,
+          recordingCount: Number(f.recordingCount ?? 0),
         })),
     [libFolders],
   );
@@ -264,6 +265,7 @@ export function LibraryLayout({
         parentId: folder.parentId ?? null,
         spaceId: folder.spaceId,
         name: folder.name,
+        recordingCount: Number(folder.recordingCount ?? 0),
       });
       foldersBySpace.set(folder.spaceId, folders);
     }
diff --git a/templates/clips/app/routes/_app.spaces.$spaceId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
index 8517253291b..7c1e55d45dc 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
@@ -34,6 +34,7 @@ export default function SpaceRoute() {
           parentId: f.parentId ?? null,
           spaceId: f.spaceId ?? null,
           name: f.name,
+          recordingCount: Number(f.recordingCount ?? 0),
         })),
     [folders, spaceId],
   );

From 2a7d3f5a3276b8daec3f83fdfc983f5a867391d7 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 21:29:06 -0700
Subject: [PATCH 13/21] fix: align space pages with library shell

---
 .../app/components/library/empty-state.tsx    |  2 +-
 .../library/library-grid-layout.test.ts       |  5 ++
 .../clips/app/routes/_app.spaces.$spaceId.tsx | 80 +++----------------
 3 files changed, 19 insertions(+), 68 deletions(-)

diff --git a/templates/clips/app/components/library/empty-state.tsx b/templates/clips/app/components/library/empty-state.tsx
index 7e162b402e0..fa577679c55 100644
--- a/templates/clips/app/components/library/empty-state.tsx
+++ b/templates/clips/app/components/library/empty-state.tsx
@@ -59,7 +59,7 @@ export function AppEmptyState({
   content,
 }: AppEmptyStateProps) {
   return (
-    <Empty className="min-h-64 flex-1 rounded-lg border border-dashed bg-muted/20 px-6 py-12 md:p-12">
+    <Empty className="min-h-64 px-6 py-12 md:p-12">
       <EmptyHeader>
         <EmptyMedia variant="icon">
           <Icon />
diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index 441af0beacb..ab15fd69f8a 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -9,6 +9,7 @@ function readSource(name: string): string {
 describe("selected library actions layout", () => {
   it("uses one consistent breadcrumb header and a single-priority sidebar", () => {
     const gridSource = readSource("./library-grid.tsx");
+    const emptyStateSource = readSource("./empty-state.tsx");
     const layoutSource = readSource("./library-layout.tsx");
     const folderTreeSource = readSource("./folder-tree.tsx");
     const organizationStateSource = readSource(
@@ -35,6 +36,8 @@ describe("selected library actions layout", () => {
     );
 
     expect(gridSource).toContain("<PageBreadcrumb");
+    expect(emptyStateSource).toContain("<Empty");
+    expect(emptyStateSource).not.toContain("border border-dashed");
     expect(gridSource).not.toContain('<h1 className="text-base');
     expect(layoutSource).not.toContain("navigation.newRecording");
     expect(layoutSource).not.toContain("navigation.newFolder");
@@ -75,6 +78,8 @@ describe("selected library actions layout", () => {
     expect(spaceRouteSource).toContain(
       '{ label: t("navigation.spaces"), to: "/spaces" }',
     );
+    expect(spaceRouteSource).not.toContain("<aside");
+    expect(spaceRouteSource).not.toContain("<FolderTree");
     expect(spaceFolderRouteSource).toContain("to: `/spaces/${spaceId}`");
     expect(recordingRouteSource).toContain(
       "<PageBreadcrumb items={recordingBreadcrumbItems}",
diff --git a/templates/clips/app/routes/_app.spaces.$spaceId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
index 7c1e55d45dc..f0c4f46af64 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
@@ -1,11 +1,9 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { useMemo } from "react";
 import { useParams } from "react-router";
 
-import { FolderTree, type FolderNode } from "@/components/library/folder-tree";
 import { LibraryGrid } from "@/components/library/library-grid";
 import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
-import { useFolders, useSpaces, useOrganizations } from "@/hooks/use-library";
+import { useSpaces, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -21,70 +19,18 @@ export default function SpaceRoute() {
   const { data: spacesData } = useSpaces(currentOrganizationId);
   const space = (spacesData?.spaces ?? []).find((s: any) => s.id === spaceId);
 
-  const { data: folders } = useFolders({
-    organizationId: currentOrganizationId,
-    spaceId,
-  });
-  const folderList: FolderNode[] = useMemo(
-    () =>
-      (folders?.folders ?? [])
-        .filter((f: any) => f.spaceId === spaceId)
-        .map((f: any) => ({
-          id: f.id,
-          parentId: f.parentId ?? null,
-          spaceId: f.spaceId ?? null,
-          name: f.name,
-          recordingCount: Number(f.recordingCount ?? 0),
-        })),
-    [folders, spaceId],
-  );
-
   return (
-    <div className="flex flex-1 min-h-0">
-      {/* Space-scoped folder rail */}
-      <aside className="hidden w-[220px] shrink-0 flex-col border-r border-border bg-sidebar p-2 lg:flex">
-        <div className="px-2 py-1.5">
-          <div className="flex items-center gap-2">
-            <div
-              className="h-5 w-5 rounded flex items-center justify-center text-[10px] text-white"
-              style={{ background: (space as any)?.color ?? "#18181B" }}
-            >
-              {(space as any)?.iconEmoji ??
-                (space as any)?.name?.slice(0, 1).toUpperCase() ??
-                t("navigation.space").slice(0, 1)}
-            </div>
-            <span className="text-xs font-semibold text-foreground truncate">
-              {(space as any)?.name ?? t("navigation.space")}
-            </span>
-          </div>
-        </div>
-        <div className="mt-2">
-          <div className="px-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-            {t("navigation.folders")}
-          </div>
-          <FolderTree
-            folders={folderList}
-            organizationId={currentOrganizationId}
-            spaceId={spaceId ?? null}
-            buildPath={(id) => `/spaces/${spaceId}/folder/${id}`}
-          />
-        </div>
-      </aside>
-
-      <div className="flex min-w-0 flex-1 flex-col">
-        <LibraryGrid
-          view="space"
-          spaceId={spaceId}
-          folderId={null}
-          emptyKind="space"
-          title={(space as any)?.name ?? t("navigation.space")}
-          breadcrumbItems={[
-            { label: t("navigation.spaces"), to: "/spaces" },
-            { label: (space as any)?.name ?? t("navigation.space") },
-          ]}
-          extraActions={<LibraryPrimaryActions spaceId={spaceId} />}
-        />
-      </div>
-    </div>
+    <LibraryGrid
+      view="space"
+      spaceId={spaceId}
+      folderId={null}
+      emptyKind="space"
+      title={(space as any)?.name ?? t("navigation.space")}
+      breadcrumbItems={[
+        { label: t("navigation.spaces"), to: "/spaces" },
+        { label: (space as any)?.name ?? t("navigation.space") },
+      ]}
+      extraActions={<LibraryPrimaryActions spaceId={spaceId} />}
+    />
   );
 }

From 365d138c896cf67721423696b298c31c10e3c7cf Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Tue, 8 Sep 2026 21:42:56 -0700
Subject: [PATCH 14/21] Improve library navigation and folder recording counts

---
 .../clips/actions/list-organization-state.ts  |  59 +++++++++-
 .../app/components/library/empty-state.tsx    |   2 +-
 .../app/components/library/folder-tree.tsx    | 101 ++++++++++--------
 .../library/library-action-hrefs.ts           |  27 +++++
 .../library/library-context-menu.test.ts      |  26 +++++
 .../library/library-grid-layout.test.ts       |  49 +++++++++
 .../app/components/library/library-grid.tsx   |  81 ++++++++++++--
 .../app/components/library/library-layout.tsx |  26 ++---
 .../library/library-primary-actions.tsx       |  27 ++---
 .../components/library/page-header.test.tsx   |  27 +++++
 .../app/components/library/page-header.tsx    |  51 +++++++--
 .../library/sidebar-feedback-button.tsx       |   2 +-
 .../recorder/camera-visualizer.test.tsx       |  12 ++-
 .../components/recorder/camera-visualizer.tsx |  33 ------
 templates/clips/app/routes/_app.dictate.tsx   |   2 +-
 .../routes/_app.library.folder.$folderId.tsx  |  13 ++-
 .../clips/app/routes/_app.meetings._index.tsx |   2 +-
 .../app/routes/_app.r.$recordingId.test.ts    |  11 +-
 .../clips/app/routes/_app.r.$recordingId.tsx  |  86 +++++----------
 .../_app.spaces.$spaceId.folder.$folderId.tsx |  23 +++-
 .../clips/app/routes/_app.spaces.$spaceId.tsx |  75 +++----------
 .../clips/app/routes/_app.spaces._index.tsx   |   2 +-
 templates/clips/app/routes/_app.trash.tsx     |   2 +-
 .../data/pglite.agent-native-pglite.lock      |   2 +-
 .../desktop/src/components/MediaDeviceRow.tsx |   2 +-
 .../recorder-popover-states.test.tsx          |   1 +
 templates/clips/desktop/src/styles.css        |  10 +-
 27 files changed, 475 insertions(+), 279 deletions(-)
 create mode 100644 templates/clips/app/components/library/library-action-hrefs.ts
 create mode 100644 templates/clips/app/components/library/page-header.test.tsx

diff --git a/templates/clips/actions/list-organization-state.ts b/templates/clips/actions/list-organization-state.ts
index 6c0b217515f..1733d195ffe 100644
--- a/templates/clips/actions/list-organization-state.ts
+++ b/templates/clips/actions/list-organization-state.ts
@@ -16,10 +16,24 @@ import {
 } from "@agent-native/core/org";
 import { isEmailDerivedName } from "@agent-native/core/user-profile";
 import { getUserProfiles } from "@agent-native/core/user-profile/server";
-import { and, asc, desc, eq, isNotNull, or } from "drizzle-orm";
+import {
+  and,
+  asc,
+  desc,
+  eq,
+  isNotNull,
+  isNull,
+  notInArray,
+  or,
+  sql,
+} from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import {
+  agentRecordingAccessFilter,
+  isAgentRecordingCaller,
+} from "../server/lib/agent-recording-access.js";
 import {
   getCurrentOwnerEmail,
   ownerEmailMatches,
@@ -38,7 +52,7 @@ export default defineAction({
       ),
   }),
   http: { method: "GET" },
-  run: async (args) => {
+  run: async (args, ctx) => {
     const db = getDb();
     const ownerEmail = getCurrentOwnerEmail();
 
@@ -127,7 +141,12 @@ export default defineAction({
       createdAt: Number(i.createdAt),
     }));
 
-    const [spaces, folders] = await Promise.all([
+    const resolvedDb = await Promise.resolve(db);
+    const meetingRecordingIds = resolvedDb
+      .select({ id: schema.meetings.recordingId })
+      .from(schema.meetings)
+      .where(isNotNull(schema.meetings.recordingId));
+    const [spaces, folders, folderRecordingCountRows] = await Promise.all([
       db
         .select()
         .from(schema.spaces)
@@ -146,7 +165,39 @@ export default defineAction({
           ),
         )
         .orderBy(asc(schema.folders.position)),
+      resolvedDb
+        .select({
+          folderId: schema.recordings.folderId,
+          recordingCount: sql<number>`COUNT(1)`,
+        })
+        .from(schema.recordings)
+        .where(
+          and(
+            agentRecordingAccessFilter(
+              schema.recordings,
+              schema.recordingShares,
+              schema.recordingViewers,
+              {
+                agentOnly: isAgentRecordingCaller(ctx?.caller),
+                userEmail: ctx?.userEmail,
+              },
+            ),
+            eq(schema.recordings.organizationId, organizationId),
+            isNotNull(schema.recordings.folderId),
+            isNull(schema.recordings.archivedAt),
+            isNull(schema.recordings.trashedAt),
+            notInArray(schema.recordings.id, meetingRecordingIds),
+          ),
+        )
+        .groupBy(schema.recordings.folderId),
     ]);
+    const recordingCountByFolder = new Map(
+      folderRecordingCountRows.flatMap((row) =>
+        row.folderId
+          ? [[row.folderId, Number(row.recordingCount ?? 0)] as const]
+          : [],
+      ),
+    );
 
     return {
       currentUserEmail: ownerEmail,
@@ -173,6 +224,7 @@ export default defineAction({
         spaceId: f.spaceId,
         ownerEmail: f.ownerEmail,
         position: f.position,
+        recordingCount: recordingCountByFolder.get(f.id) ?? 0,
       })),
       personalFolders: folders
         .filter((f) => f.spaceId === null)
@@ -180,6 +232,7 @@ export default defineAction({
           id: f.id,
           name: f.name,
           parentId: f.parentId,
+          recordingCount: recordingCountByFolder.get(f.id) ?? 0,
         })),
       invitations,
     };
diff --git a/templates/clips/app/components/library/empty-state.tsx b/templates/clips/app/components/library/empty-state.tsx
index 7e162b402e0..fa577679c55 100644
--- a/templates/clips/app/components/library/empty-state.tsx
+++ b/templates/clips/app/components/library/empty-state.tsx
@@ -59,7 +59,7 @@ export function AppEmptyState({
   content,
 }: AppEmptyStateProps) {
   return (
-    <Empty className="min-h-64 flex-1 rounded-lg border border-dashed bg-muted/20 px-6 py-12 md:p-12">
+    <Empty className="min-h-64 px-6 py-12 md:p-12">
       <EmptyHeader>
         <EmptyMedia variant="icon">
           <Icon />
diff --git a/templates/clips/app/components/library/folder-tree.tsx b/templates/clips/app/components/library/folder-tree.tsx
index 9a53a22eb3f..127f5b901f0 100644
--- a/templates/clips/app/components/library/folder-tree.tsx
+++ b/templates/clips/app/components/library/folder-tree.tsx
@@ -53,6 +53,7 @@ export interface FolderNode {
   parentId: string | null;
   spaceId: string | null;
   name: string;
+  recordingCount?: number;
   children?: FolderNode[];
 }
 
@@ -225,50 +226,62 @@ function FolderItem({
                   </button>
                 </CollapsibleTrigger>
               )}
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <button
-                    type="button"
-                    aria-label={`${node.name}: ${t("root.commandActions")}`}
-                    title={`${node.name}: ${t("root.commandActions")}`}
-                    className="rounded p-0.5 text-primary opacity-0 transition-opacity hover:bg-accent hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
-                  >
-                    <IconDots className="h-3.5 w-3.5" />
-                  </button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" side="right">
-                  <DropdownMenuItem
-                    onSelect={() => {
-                      setTimeout(() => {
-                        setRenameValue(node.name);
-                        setRenameOpen(true);
-                      }, 0);
-                    }}
-                  >
-                    <IconEdit className="h-3.5 w-3.5 me-2" />{" "}
-                    {t("folderTree.rename")}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={() => {
-                      setTimeout(() => {
-                        setNewValue("");
-                        setNewOpen(true);
-                      }, 0);
-                    }}
-                  >
-                    <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
-                    {t("folderTree.newSubfolder")}
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onSelect={() => setTimeout(() => setConfirmDelete(true), 0)}
-                    className="text-destructive"
-                  >
-                    <IconTrash className="h-3.5 w-3.5 me-2" />{" "}
-                    {t("folderTree.delete")}
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <div className="relative size-5 shrink-0">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label={`${node.name}: ${t("root.commandActions")}`}
+                      title={`${node.name}: ${t("root.commandActions")}`}
+                      className="peer absolute inset-0 flex items-center justify-center rounded text-primary opacity-0 transition-opacity hover:bg-accent hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
+                    >
+                      <IconDots className="h-3.5 w-3.5" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" side="right">
+                    <DropdownMenuItem
+                      onSelect={() => {
+                        setTimeout(() => {
+                          setRenameValue(node.name);
+                          setRenameOpen(true);
+                        }, 0);
+                      }}
+                    >
+                      <IconEdit className="h-3.5 w-3.5 me-2" />{" "}
+                      {t("folderTree.rename")}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onSelect={() => {
+                        setTimeout(() => {
+                          setNewValue("");
+                          setNewOpen(true);
+                        }, 0);
+                      }}
+                    >
+                      <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
+                      {t("folderTree.newSubfolder")}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      onSelect={() =>
+                        setTimeout(() => setConfirmDelete(true), 0)
+                      }
+                      className="text-destructive"
+                    >
+                      <IconTrash className="h-3.5 w-3.5 me-2" />{" "}
+                      {t("folderTree.delete")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                {(node.recordingCount ?? 0) > 0 && (
+                  <span className="pointer-events-none absolute inset-0 flex items-center justify-end tabular-nums text-[11px] text-primary/80 transition-opacity group-hover:opacity-0 group-focus-within:opacity-0 peer-data-[state=open]:opacity-0">
+                    {node.recordingCount}
+                    <span className="sr-only">
+                      {t("navigation.recordings")}
+                    </span>
+                  </span>
+                )}
+              </div>
             </div>
           </ContextMenuTrigger>
           <ContextMenuContent>
diff --git a/templates/clips/app/components/library/library-action-hrefs.ts b/templates/clips/app/components/library/library-action-hrefs.ts
new file mode 100644
index 00000000000..1f13450b4ed
--- /dev/null
+++ b/templates/clips/app/components/library/library-action-hrefs.ts
@@ -0,0 +1,27 @@
+export interface LibraryActionScope {
+  folderId?: string | null;
+  spaceId?: string | null;
+}
+
+function scopedPath(pathname: string, params: URLSearchParams) {
+  const query = params.toString();
+  return query ? `${pathname}?${query}` : pathname;
+}
+
+export function buildLibraryActionHrefs({
+  folderId,
+  spaceId,
+}: LibraryActionScope) {
+  const scope = new URLSearchParams();
+  if (spaceId) scope.set("spaceId", spaceId);
+  if (folderId) scope.set("folderId", folderId);
+
+  const uploadParams = new URLSearchParams(scope);
+  uploadParams.set("autoUpload", "1");
+
+  return {
+    recordHref: scopedPath("/record", scope),
+    uploadHref: scopedPath("/record", uploadParams),
+    importLoomHref: scopedPath("/import", scope),
+  };
+}
diff --git a/templates/clips/app/components/library/library-context-menu.test.ts b/templates/clips/app/components/library/library-context-menu.test.ts
index eb3f360552b..bacca4a58a1 100644
--- a/templates/clips/app/components/library/library-context-menu.test.ts
+++ b/templates/clips/app/components/library/library-context-menu.test.ts
@@ -2,6 +2,8 @@ import { readFileSync } from "node:fs";
 
 import { describe, expect, it } from "vitest";
 
+import { buildLibraryActionHrefs } from "./library-action-hrefs";
+
 function readSource(name: string): string {
   return readFileSync(new URL(name, import.meta.url), "utf8");
 }
@@ -26,4 +28,28 @@ describe("library contextual menus", () => {
     expect(spaceSource).toContain('t("spaceDialog.deleteSpace")');
     expect(layoutSource).toContain("to={`/spaces/${s.id}`}");
   });
+
+  it("offers scoped ingestion actions from the empty library canvas", () => {
+    const gridSource = readSource("./library-grid.tsx");
+
+    expect(gridSource).toContain("buildLibraryActionHrefs");
+    expect(gridSource).toContain("useUploadVideoPicker");
+    expect(gridSource).toContain('t("preRecord.uploadVideo")');
+    expect(gridSource).toContain('t("preRecord.importLoom")');
+    expect(gridSource).toContain("openUploadPicker(uploadHref)");
+    expect(gridSource).toContain("<Link to={importLoomHref}>");
+
+    expect(buildLibraryActionHrefs({})).toEqual({
+      recordHref: "/record",
+      uploadHref: "/record?autoUpload=1",
+      importLoomHref: "/import",
+    });
+    expect(
+      buildLibraryActionHrefs({ spaceId: "space-1", folderId: "folder-1" }),
+    ).toEqual({
+      recordHref: "/record?spaceId=space-1&folderId=folder-1",
+      uploadHref: "/record?spaceId=space-1&folderId=folder-1&autoUpload=1",
+      importLoomHref: "/import?spaceId=space-1&folderId=folder-1",
+    });
+  });
 });
diff --git a/templates/clips/app/components/library/library-grid-layout.test.ts b/templates/clips/app/components/library/library-grid-layout.test.ts
index f1cd33c0f18..a822148db52 100644
--- a/templates/clips/app/components/library/library-grid-layout.test.ts
+++ b/templates/clips/app/components/library/library-grid-layout.test.ts
@@ -9,8 +9,12 @@ function readSource(name: string): string {
 describe("selected library actions layout", () => {
   it("uses one consistent breadcrumb header and a single-priority sidebar", () => {
     const gridSource = readSource("./library-grid.tsx");
+    const emptyStateSource = readSource("./empty-state.tsx");
     const layoutSource = readSource("./library-layout.tsx");
     const folderTreeSource = readSource("./folder-tree.tsx");
+    const organizationStateSource = readSource(
+      "../../../actions/list-organization-state.ts",
+    );
     const libraryRouteSource = readSource(
       "../../routes/_app.library._index.tsx",
     );
@@ -26,8 +30,13 @@ describe("selected library actions layout", () => {
     const spaceFolderRouteSource = readSource(
       "../../routes/_app.spaces.$spaceId.folder.$folderId.tsx",
     );
+    const recordingRouteSource = readSource(
+      "../../routes/_app.r.$recordingId.tsx",
+    );
 
     expect(gridSource).toContain("<PageBreadcrumb");
+    expect(emptyStateSource).toContain("<Empty");
+    expect(emptyStateSource).not.toContain("border border-dashed");
     expect(gridSource).not.toContain('<h1 className="text-base');
     expect(layoutSource).not.toContain("navigation.newRecording");
     expect(layoutSource).not.toContain("navigation.newFolder");
@@ -43,6 +52,14 @@ describe("selected library actions layout", () => {
     expect(primaryActionsSource).toContain('triggerIcon="chevron"');
     expect(gridSource).toContain('import { FolderCard } from "./folder-card"');
     expect(gridSource).toContain("visibleFolders");
+    expect(gridSource).toContain("organizationId: currentOrganizationId");
+    expect(folderRouteSource).toContain("useOrganizations()");
+    expect(folderRouteSource).toContain(
+      "organizationId: currentOrganizationId",
+    );
+    expect(spaceFolderRouteSource).toContain(
+      "organizationId: currentOrganizationId",
+    );
     expect(gridSource).toContain('t("navigation.folders")');
     expect(gridSource).toContain('aria-labelledby="library-folders-heading"');
     expect(gridSource).toContain('t("navigation.recordings")');
@@ -51,6 +68,21 @@ describe("selected library actions layout", () => {
     expect(folderRouteSource).toContain("<LibraryPrimaryActions folderId");
     expect(spaceRouteSource).toContain("<LibraryPrimaryActions spaceId");
     expect(spaceFolderRouteSource).toContain("<LibraryPrimaryActions folderId");
+    expect(folderRouteSource).toContain(
+      '{ label: t("navigation.library"), to: "/library" }',
+    );
+    expect(spaceRouteSource).toContain(
+      '{ label: t("navigation.spaces"), to: "/spaces" }',
+    );
+    expect(spaceRouteSource).not.toContain("<aside");
+    expect(spaceRouteSource).not.toContain("<FolderTree");
+    expect(spaceFolderRouteSource).toContain("to: `/spaces/${spaceId}`");
+    expect(recordingRouteSource).toContain(
+      "<PageBreadcrumb items={recordingBreadcrumbItems}",
+    );
+    expect(recordingRouteSource).not.toContain(
+      'from "@/components/ui/breadcrumb"',
+    );
     expect(layoutSource).toContain(
       '"flex h-14 shrink-0 items-center border-b border-border"',
     );
@@ -72,6 +104,20 @@ describe("selected library actions layout", () => {
     expect(folderTreeSource).toContain("compact ?");
     expect(folderTreeSource).toContain("!compact &&");
     expect(folderTreeSource).toContain("compact && hasChildren");
+    expect(folderTreeSource).toContain("node.recordingCount");
+    expect(folderTreeSource).toContain("tabular-nums");
+    expect(folderTreeSource).toContain("group-hover:opacity-0");
+    expect(folderTreeSource).toContain("peer-data-[state=open]:opacity-0");
+    expect(folderTreeSource).toContain("pointer-events-none");
+    expect(layoutSource).toContain(
+      "recordingCount: Number(folder.recordingCount ?? 0)",
+    );
+    expect(organizationStateSource).toContain(
+      ".groupBy(schema.recordings.folderId)",
+    );
+    expect(organizationStateSource).toContain(
+      "recordingCount: recordingCountByFolder.get(f.id) ?? 0",
+    );
     expect(layoutSource).not.toContain('t("navigation.noSpaces")');
     expect(layoutSource).not.toContain('t("folderTree.noFolders")');
     expect(layoutSource).not.toContain("pageHasHeaderSearch");
@@ -91,6 +137,9 @@ describe("selected library actions layout", () => {
     expect(layoutSource).toContain(
       "<SidebarFeedbackButton collapsed={showCollapsedSidebar} />",
     );
+    expect(layoutSource).toContain("data-sidebar-footer-utilities");
+    expect(layoutSource).toContain('? "flex flex-col items-center gap-1"');
+    expect(layoutSource).toContain('"!size-9 !p-0 [&>svg]:!size-4"');
     expect(layoutSource).toContain("function isSidebarGroupActive(");
     expect(layoutSource).toContain(
       'group === "library" && pathname.startsWith("/library/folder/")',
diff --git a/templates/clips/app/components/library/library-grid.tsx b/templates/clips/app/components/library/library-grid.tsx
index bc9742cf92a..1902983931d 100644
--- a/templates/clips/app/components/library/library-grid.tsx
+++ b/templates/clips/app/components/library/library-grid.tsx
@@ -9,6 +9,8 @@ import {
   IconChevronLeft,
   IconChevronRight,
   IconFolderPlus,
+  IconLink,
+  IconUpload,
 } from "@tabler/icons-react";
 import {
   type ReactElement,
@@ -17,6 +19,7 @@ import {
   useMemo,
   useState,
 } from "react";
+import { Link } from "react-router";
 import { toast } from "sonner";
 
 import { CreateFolderDialog } from "@/components/library/create-folder-dialog";
@@ -26,10 +29,12 @@ import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuSeparator,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
 import {
   useFolders,
+  useOrganizations,
   useRecordings,
   useRecordingsCount,
   useTrashRecording,
@@ -39,6 +44,7 @@ import {
   type ListRecordingsArgs,
   type RecordingSummary,
 } from "@/hooks/use-library";
+import { useUploadVideoPicker } from "@/hooks/use-upload-video-picker";
 import { OPEN_CREATE_FOLDER_EVENT } from "@/lib/command-events";
 import { retryRecordingUploadFromBackup } from "@/lib/recording-retry";
 import { cn } from "@/lib/utils";
@@ -47,7 +53,12 @@ import { BulkActionToolbar, type BulkMoveTarget } from "./bulk-action-toolbar";
 import { EmptyState } from "./empty-state";
 import { FilterChips, type FilterChip } from "./filter-chips";
 import { FolderCard } from "./folder-card";
-import { PageBreadcrumb, PageHeader } from "./page-header";
+import { buildLibraryActionHrefs } from "./library-action-hrefs";
+import {
+  PageBreadcrumb,
+  PageHeader,
+  type PageBreadcrumbItem,
+} from "./page-header";
 import { RecordingCard } from "./recording-card";
 import { SearchBar } from "./search-bar";
 import { SortMenu, type SortKey } from "./sort-menu";
@@ -59,6 +70,7 @@ interface LibraryGridProps {
   /** What empty-state illustration to render. Defaults from `view`. */
   emptyKind?: "library" | "shared" | "folder" | "space" | "archive" | "trash";
   title?: string;
+  breadcrumbItems?: readonly PageBreadcrumbItem[];
   tagFilter?: string | null;
   onClearTag?: () => void;
   extraActions?: React.ReactNode;
@@ -91,13 +103,18 @@ type CreateFolderTarget =
 function LibraryCanvasContextMenu({
   enabled,
   onCreateFolder,
+  uploadHref,
+  importLoomHref,
   children,
 }: {
   enabled: boolean;
   onCreateFolder: () => void;
+  uploadHref: string;
+  importLoomHref: string;
   children: ReactElement;
 }) {
   const t = useT();
+  const { input, openUploadPicker } = useUploadVideoPicker();
 
   if (!enabled) return children;
 
@@ -113,7 +130,24 @@ function LibraryCanvasContextMenu({
           <IconFolderPlus className="me-2 size-4" />
           {t("navigation.newFolder")}
         </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          onSelect={(event) => {
+            event.preventDefault();
+            openUploadPicker(uploadHref);
+          }}
+        >
+          <IconUpload />
+          {t("preRecord.uploadVideo")}
+        </ContextMenuItem>
+        <ContextMenuItem asChild>
+          <Link to={importLoomHref}>
+            <IconLink />
+            {t("preRecord.importLoom")}
+          </Link>
+        </ContextMenuItem>
       </ContextMenuContent>
+      {input}
     </ContextMenu>
   );
 }
@@ -152,6 +186,7 @@ export function LibraryGrid({
   spaceId = null,
   emptyKind,
   title,
+  breadcrumbItems,
   tagFilter,
   onClearTag,
   extraActions,
@@ -168,6 +203,12 @@ export function LibraryGrid({
   const [isBulkPending, setIsBulkPending] = useState(false);
   const [page, setPage] = useState(1);
   const selectionStateKey = useMemo(() => `selection:${getBrowserTabId()}`, []);
+  const pageBreadcrumbItems =
+    breadcrumbItems ?? (title ? [{ label: title }] : []);
+  const { uploadHref, importLoomHref } = buildLibraryActionHrefs({
+    folderId,
+    spaceId,
+  });
 
   useEffect(() => {
     if (!title) return;
@@ -235,12 +276,21 @@ export function LibraryGrid({
   const moveRecording = useMoveRecording();
   const canManageRecordings = view !== "shared";
   const canMoveSelection = view === "library" || view === "space";
+  const { data: organizations } = useOrganizations({
+    enabled: canMoveSelection,
+  });
+  const currentOrganizationId =
+    organizations?.currentId ?? organizations?.organizations?.[0]?.id;
   const { data: scopedFolders, isLoading: isFoldersLoading } = useFolders(
     {
+      organizationId: currentOrganizationId,
       spaceId: view === "space" ? (spaceId ?? null) : null,
     },
     {
-      enabled: canMoveSelection && (view !== "space" || Boolean(spaceId)),
+      enabled:
+        canMoveSelection &&
+        Boolean(currentOrganizationId) &&
+        (view !== "space" || Boolean(spaceId)),
     },
   );
   const visibleFolders = useMemo(
@@ -461,7 +511,9 @@ export function LibraryGrid({
       <PageHeader>
         <div className="flex min-w-0 flex-1 items-center gap-3 lg:grid lg:grid-cols-[minmax(0,1fr)_20rem_minmax(0,1fr)]">
           <div className="min-w-0 flex-1 lg:flex-none">
-            {title ? <PageBreadcrumb label={title} /> : null}
+            {pageBreadcrumbItems.length > 0 ? (
+              <PageBreadcrumb items={pageBreadcrumbItems} />
+            ) : null}
           </div>
           <SearchBar
             side="bottom"
@@ -492,6 +544,8 @@ export function LibraryGrid({
           <LibraryCanvasContextMenu
             enabled={canMoveSelection}
             onCreateFolder={() => setCreateFolderOpen(true)}
+            uploadHref={uploadHref}
+            importLoomHref={importLoomHref}
           >
             <div className="flex min-h-full flex-col p-5">
               {isLoading || (view !== "shared" && isFoldersLoading) ? (
@@ -537,15 +591,20 @@ export function LibraryGrid({
                       </h2>
                       <div className="grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))]">
                         {visibleFolders.map((folder) => (
-                          <FolderCard
+                          <div
                             key={folder.id}
-                            folder={folder}
-                            href={
-                              view === "space"
-                                ? `/spaces/${spaceId}/folder/${folder.id}`
-                                : `/library/folder/${folder.id}`
-                            }
-                          />
+                            className="min-w-0"
+                            onContextMenu={(event) => event.stopPropagation()}
+                          >
+                            <FolderCard
+                              folder={folder}
+                              href={
+                                view === "space"
+                                  ? `/spaces/${spaceId}/folder/${folder.id}`
+                                  : `/library/folder/${folder.id}`
+                              }
+                            />
+                          </div>
                         ))}
                       </div>
                     </section>
diff --git a/templates/clips/app/components/library/library-layout.tsx b/templates/clips/app/components/library/library-layout.tsx
index de0122362d4..0d162e61262 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -27,19 +27,11 @@ import {
   IconMenu2,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
-  IconLayoutSidebarRight,
   IconShare,
   IconDots,
   IconEdit,
 } from "@tabler/icons-react";
-import {
-  Fragment,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { NavLink, useLocation, useNavigate, useParams } from "react-router";
 
 import {
@@ -122,12 +114,7 @@ function readSidebarCollapsedPreference() {
 }
 
 function ClipsAgentToggleButton() {
-  return (
-    <AgentToggleButton
-      showWhenOpen
-      icon={<IconLayoutSidebarRight className="size-5" aria-hidden />}
-    />
-  );
+  return <AgentToggleButton showWhenOpen />;
 }
 
 interface ExpandedSidebarNavGroupProps {
@@ -260,6 +247,7 @@ export function LibraryLayout({
           parentId: f.parentId ?? null,
           spaceId: f.spaceId ?? null,
           name: f.name,
+          recordingCount: Number(f.recordingCount ?? 0),
         })),
     [libFolders],
   );
@@ -273,6 +261,7 @@ export function LibraryLayout({
         parentId: folder.parentId ?? null,
         spaceId: folder.spaceId,
         name: folder.name,
+        recordingCount: Number(folder.recordingCount ?? 0),
       });
       foldersBySpace.set(folder.spaceId, folders);
     }
@@ -833,9 +822,10 @@ export function LibraryLayout({
         >
           <SidebarFeedbackButton collapsed={showCollapsedSidebar} />
           <div
+            data-sidebar-footer-utilities
             className={cn(
               showCollapsedSidebar
-                ? "flex items-center justify-center gap-1"
+                ? "flex flex-col items-center gap-1"
                 : "flex items-center gap-0.5",
             )}
           >
@@ -843,7 +833,9 @@ export function LibraryLayout({
               compact={showCollapsedSidebar}
               className={cn(
                 "!bg-transparent !text-primary hover:!bg-accent/60 hover:!text-primary",
-                !showCollapsedSidebar && "min-w-0 flex-1",
+                showCollapsedSidebar
+                  ? "!size-9 !p-0 [&>svg]:!size-4"
+                  : "min-w-0 flex-1",
               )}
               settingsPath="/settings/organization"
               currentAppId="clips"
diff --git a/templates/clips/app/components/library/library-primary-actions.tsx b/templates/clips/app/components/library/library-primary-actions.tsx
index a7c441bd670..5e8a29c462f 100644
--- a/templates/clips/app/components/library/library-primary-actions.tsx
+++ b/templates/clips/app/components/library/library-primary-actions.tsx
@@ -4,32 +4,23 @@ import { NavLink } from "react-router";
 
 import { ImportMenu } from "@/components/import-menu";
 
+import {
+  buildLibraryActionHrefs,
+  type LibraryActionScope,
+} from "./library-action-hrefs";
 import { PageHeaderActionGroup, PageHeaderPrimaryAction } from "./page-header";
 
-interface LibraryPrimaryActionsProps {
-  folderId?: string | null;
-  spaceId?: string | null;
-}
-
-function scopedPath(pathname: string, params: URLSearchParams) {
-  const query = params.toString();
-  return query ? `${pathname}?${query}` : pathname;
-}
+type LibraryPrimaryActionsProps = LibraryActionScope;
 
 export function LibraryPrimaryActions({
   folderId,
   spaceId,
 }: LibraryPrimaryActionsProps) {
   const t = useT();
-  const scope = new URLSearchParams();
-  if (spaceId) scope.set("spaceId", spaceId);
-  if (folderId) scope.set("folderId", folderId);
-
-  const recordHref = scopedPath("/record", scope);
-  const uploadParams = new URLSearchParams(scope);
-  uploadParams.set("autoUpload", "1");
-  const uploadHref = scopedPath("/record", uploadParams);
-  const importLoomHref = scopedPath("/import", scope);
+  const { recordHref, uploadHref, importLoomHref } = buildLibraryActionHrefs({
+    folderId,
+    spaceId,
+  });
 
   return (
     <PageHeaderActionGroup>
diff --git a/templates/clips/app/components/library/page-header.test.tsx b/templates/clips/app/components/library/page-header.test.tsx
new file mode 100644
index 00000000000..3ceebbaee16
--- /dev/null
+++ b/templates/clips/app/components/library/page-header.test.tsx
@@ -0,0 +1,27 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it } from "vitest";
+
+import { PageBreadcrumb } from "./page-header";
+
+describe("PageBreadcrumb", () => {
+  it("renders linked ancestors and a current shadcn breadcrumb page", () => {
+    const markup = renderToStaticMarkup(
+      <MemoryRouter>
+        <PageBreadcrumb
+          items={[
+            { label: "Spaces", to: "/spaces" },
+            { label: "Design", to: "/spaces/design" },
+            { label: "Research" },
+          ]}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(markup).toContain('href="/spaces"');
+    expect(markup).toContain('href="/spaces/design"');
+    expect(markup).toContain('aria-current="page"');
+    expect(markup).toContain("Spaces / Design / Research");
+    expect(markup.match(/role="presentation"/g)).toHaveLength(2);
+  });
+});
diff --git a/templates/clips/app/components/library/page-header.tsx b/templates/clips/app/components/library/page-header.tsx
index 763bbbacb72..e9eff2b3303 100644
--- a/templates/clips/app/components/library/page-header.tsx
+++ b/templates/clips/app/components/library/page-header.tsx
@@ -2,18 +2,22 @@ import {
   type ComponentProps,
   createContext,
   forwardRef,
+  Fragment,
   ReactNode,
   useContext,
   useEffect,
   useState,
 } from "react";
 import { createPortal } from "react-dom";
+import { NavLink } from "react-router";
 
 import {
   Breadcrumb,
   BreadcrumbItem,
+  BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
+  BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { ButtonGroup } from "@/components/ui/button-group";
@@ -86,15 +90,48 @@ export const PageHeaderActionGroup = forwardRef<
 });
 PageHeaderActionGroup.displayName = "PageHeaderActionGroup";
 
-export function PageBreadcrumb({ label }: { label: string }) {
+export interface PageBreadcrumbItem {
+  label: string;
+  to?: string;
+}
+
+export function PageBreadcrumb({
+  items,
+}: {
+  items: readonly PageBreadcrumbItem[];
+}) {
+  if (items.length === 0) return null;
+
   return (
-    <Breadcrumb aria-label={label} className="min-w-0">
+    <Breadcrumb
+      aria-label={items.map((item) => item.label).join(" / ")}
+      className="min-w-0"
+    >
       <BreadcrumbList className="flex-nowrap overflow-hidden">
-        <BreadcrumbItem className="min-w-0">
-          <BreadcrumbPage className="truncate font-medium">
-            {label}
-          </BreadcrumbPage>
-        </BreadcrumbItem>
+        {items.map((item, index) => {
+          const current = index === items.length - 1;
+
+          return (
+            <Fragment key={`${item.to ?? "current"}:${item.label}:${index}`}>
+              {index > 0 ? <BreadcrumbSeparator className="shrink-0" /> : null}
+              <BreadcrumbItem className={current ? "min-w-0" : "shrink-0"}>
+                {current ? (
+                  <BreadcrumbPage className="truncate font-medium">
+                    {item.label}
+                  </BreadcrumbPage>
+                ) : item.to ? (
+                  <BreadcrumbLink asChild>
+                    <NavLink to={item.to} className="block max-w-48 truncate">
+                      {item.label}
+                    </NavLink>
+                  </BreadcrumbLink>
+                ) : (
+                  <span className="block max-w-48 truncate">{item.label}</span>
+                )}
+              </BreadcrumbItem>
+            </Fragment>
+          );
+        })}
       </BreadcrumbList>
     </Breadcrumb>
   );
diff --git a/templates/clips/app/components/library/sidebar-feedback-button.tsx b/templates/clips/app/components/library/sidebar-feedback-button.tsx
index c8d71b403b1..d3dc0ed0998 100644
--- a/templates/clips/app/components/library/sidebar-feedback-button.tsx
+++ b/templates/clips/app/components/library/sidebar-feedback-button.tsx
@@ -29,7 +29,7 @@ export function SidebarFeedbackButton({
       className={
         collapsed
           ? "size-9 bg-transparent text-primary hover:bg-accent/60 hover:text-primary"
-          : "h-9 w-full justify-start gap-2 bg-transparent px-3 font-medium text-primary hover:bg-accent/60 hover:text-primary"
+          : "h-auto w-full justify-start gap-2 bg-transparent px-2 py-1.5 text-xs font-normal text-primary hover:bg-accent/60 hover:text-primary"
       }
     >
       <IconMessageCircle className="size-4 shrink-0 text-primary" />
diff --git a/templates/clips/app/components/recorder/camera-visualizer.test.tsx b/templates/clips/app/components/recorder/camera-visualizer.test.tsx
index 7b83d89fb6e..fffe9aadec9 100644
--- a/templates/clips/app/components/recorder/camera-visualizer.test.tsx
+++ b/templates/clips/app/components/recorder/camera-visualizer.test.tsx
@@ -5,7 +5,7 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 vi.mock("@agent-native/core/client/i18n", () => ({
-  useT: () => (key: string, values?: { size?: string }) =>
+  useT: () => (key: string) =>
     ({
       "cameraVisualizer.bubble": "translated:camera-bubble",
       "cameraVisualizer.live": "translated:camera-live",
@@ -15,7 +15,6 @@ vi.mock("@agent-native/core/client/i18n", () => ({
       "cameraVisualizer.test": "translated:camera-test",
       "cameraVisualizer.selectedPreview": "translated:selected-preview",
       "cameraVisualizer.preview": "translated:camera-preview",
-      "cameraVisualizer.setBubbleSize": `translated:camera-size-${values?.size ?? ""}`,
       "cameraVisualizer.needsAttention": "translated:check-camera",
       "cameraVisualizer.permissionBlocked":
         "translated:camera-permission-blocked",
@@ -139,6 +138,11 @@ describe("CameraVisualizer", () => {
       )?.disabled,
     ).toBe(true);
     expect(getUserMedia).not.toHaveBeenCalled();
+    expect(
+      Array.from(container.querySelectorAll("button")).some((button) =>
+        ["S", "M", "L"].includes(button.textContent ?? ""),
+      ),
+    ).toBe(false);
   });
 
   it("shows stable loading and live-preview states", async () => {
@@ -291,7 +295,9 @@ describe("CameraVisualizer", () => {
     );
     expect(container.querySelectorAll("video")).toHaveLength(1);
     expect(
-      container.querySelectorAll('[aria-label="translated:camera-bubble"]'),
+      container.querySelectorAll(
+        '[data-testid="camera-preview-container"] video',
+      ),
     ).toHaveLength(1);
     expect(
       Array.from(container.querySelectorAll("button")).some(
diff --git a/templates/clips/app/components/recorder/camera-visualizer.tsx b/templates/clips/app/components/recorder/camera-visualizer.tsx
index 46aeba4ab85..0becfa4eb37 100644
--- a/templates/clips/app/components/recorder/camera-visualizer.tsx
+++ b/templates/clips/app/components/recorder/camera-visualizer.tsx
@@ -14,7 +14,6 @@ import {
 } from "react";
 
 import { Button } from "@/components/ui/button";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import {
   createBackgroundBlurStream,
   DEFAULT_BLUR_PX,
@@ -35,7 +34,6 @@ export interface CameraVisualizerProps {
   /** Background blur radius (px) reflected live in the test preview. */
   blurRadius?: number;
   size?: CameraBubbleSize;
-  onSizeChange?: (size: CameraBubbleSize) => void;
   onStatusChange?: (
     status: CameraTestStatus,
     detail?: { error?: string | null },
@@ -49,12 +47,6 @@ const CAMERA_BUBBLE_SIZE_PX: Record<CameraBubbleSize, number> = {
   lg: 320,
 };
 
-const CAMERA_SIZE_OPTIONS: Array<{ value: CameraBubbleSize; label: string }> = [
-  { value: "sm", label: "S" },
-  { value: "md", label: "M" },
-  { value: "lg", label: "L" },
-];
-
 const CAMERA_FRAME_TIMEOUT_MS = 5_000;
 
 type CameraPermissionState = PermissionState | "unknown";
@@ -190,7 +182,6 @@ export function CameraVisualizer({
   blur = false,
   blurRadius = DEFAULT_BLUR_PX,
   size = "md",
-  onSizeChange,
   onStatusChange,
   onPreviewChange,
 }: CameraVisualizerProps) {
@@ -527,30 +518,6 @@ export function CameraVisualizer({
           )}
           <span className="truncate">{statusLabel}</span>
         </div>
-        <ToggleGroup
-          type="single"
-          value={size}
-          onValueChange={(value) => {
-            if (value) onSizeChange?.(value as CameraBubbleSize);
-          }}
-          variant="outline"
-          aria-label={t("cameraVisualizer.bubble")}
-          className="grid shrink-0 grid-cols-3 gap-0.5 rounded-md bg-muted p-0.5"
-        >
-          {CAMERA_SIZE_OPTIONS.map((option) => (
-            <ToggleGroupItem
-              key={option.value}
-              value={option.value}
-              disabled={disabled}
-              aria-label={t("cameraVisualizer.setBubbleSize", {
-                size: option.label,
-              })}
-              className="h-6 min-w-6 rounded border-0 px-1.5 text-[11px] text-muted-foreground shadow-none data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm"
-            >
-              {option.label}
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
         <Button
           type="button"
           variant={live ? "outline" : "secondary"}
diff --git a/templates/clips/app/routes/_app.dictate.tsx b/templates/clips/app/routes/_app.dictate.tsx
index ce51001e321..79b16c2c6cc 100644
--- a/templates/clips/app/routes/_app.dictate.tsx
+++ b/templates/clips/app/routes/_app.dictate.tsx
@@ -983,7 +983,7 @@ export default function DictateRoute() {
   return (
     <>
       <PageHeader>
-        <PageBreadcrumb label={t("navigation.dictate")} />
+        <PageBreadcrumb items={[{ label: t("navigation.dictate") }]} />
         <VocabularyManager />
       </PageHeader>
       <div className="mx-auto w-full max-w-4xl px-4 py-5 sm:px-6 sm:py-6">
diff --git a/templates/clips/app/routes/_app.library.folder.$folderId.tsx b/templates/clips/app/routes/_app.library.folder.$folderId.tsx
index 3a384608321..bc7acdf31c6 100644
--- a/templates/clips/app/routes/_app.library.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.library.folder.$folderId.tsx
@@ -4,7 +4,7 @@ import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
 import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
-import { useFolders } from "@/hooks/use-library";
+import { useFolders, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -15,7 +15,12 @@ export default function LibraryFolderRoute() {
   const t = useT();
   const { folderId } = useParams<{ folderId: string }>();
 
-  const { data: folders } = useFolders({});
+  const { data: organizations } = useOrganizations();
+  const currentOrganizationId =
+    organizations?.currentId ?? organizations?.organizations?.[0]?.id;
+  const { data: folders } = useFolders({
+    organizationId: currentOrganizationId,
+  });
   const folder = useMemo(
     () =>
       (folders?.folders ?? []).find((f: any) => f.id === folderId) as
@@ -30,6 +35,10 @@ export default function LibraryFolderRoute() {
       folderId={folderId}
       emptyKind="folder"
       title={folder?.name ?? t("navigation.folder")}
+      breadcrumbItems={[
+        { label: t("navigation.library"), to: "/library" },
+        { label: folder?.name ?? t("navigation.folder") },
+      ]}
       extraActions={<LibraryPrimaryActions folderId={folderId} />}
     />
   );
diff --git a/templates/clips/app/routes/_app.meetings._index.tsx b/templates/clips/app/routes/_app.meetings._index.tsx
index 5fe0333460e..3388be4750d 100644
--- a/templates/clips/app/routes/_app.meetings._index.tsx
+++ b/templates/clips/app/routes/_app.meetings._index.tsx
@@ -613,7 +613,7 @@ function MeetingsHeader({
     <PageHeader>
       <div className="flex min-w-0 flex-1 items-center gap-3 lg:grid lg:grid-cols-[minmax(0,1fr)_24rem_minmax(0,1fr)]">
         <div className="hidden min-w-0 lg:block">
-          <PageBreadcrumb label={t("meetingsRoute.title")} />
+          <PageBreadcrumb items={[{ label: t("meetingsRoute.title") }]} />
         </div>
         <div className="relative min-w-0 flex-1 lg:w-full">
           <IconSearch className="pointer-events-none absolute start-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
diff --git a/templates/clips/app/routes/_app.r.$recordingId.test.ts b/templates/clips/app/routes/_app.r.$recordingId.test.ts
index 85775c27ab4..d313dcfe83f 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.test.ts
+++ b/templates/clips/app/routes/_app.r.$recordingId.test.ts
@@ -227,17 +227,16 @@ describe("direct recording route shell cue", () => {
     expect(layout).toContain("showCollapseButton={isMobile}");
     expect(layout).toContain("<AgentToggleButton");
     expect(layout).toContain("showWhenOpen");
-    expect(layout).toContain("<IconLayoutSidebarRight");
+    expect(layout).not.toContain("IconLayoutSidebarRight");
     expect(layout).toContain("<ClipsAgentToggleButton />");
     expect(layout).toContain("[&>.agent-sidebar-shell]:h-full");
     expect(layout).toContain("showAgentSidebar = true");
     expect(layout).toContain("{showAgentSidebar ? (");
     expect(route).toContain("<PageHeader>");
-    expect(route).toContain("<BreadcrumbList");
-    expect(route).toContain("<BreadcrumbLink asChild>");
-    expect(route).toContain("<BreadcrumbPage");
-    expect(route).toContain("<BreadcrumbSeparator");
-    expect(route).toContain('to="/library"');
+    expect(route).toContain("<PageBreadcrumb items={recordingBreadcrumbItems}");
+    expect(route).not.toContain('from "@/components/ui/breadcrumb"');
+    expect(route).toContain('to: "/library"');
+    expect(route).toContain('to: "/spaces"');
     expect(route).toContain("recordingFolder.spaceId");
     expect(route).toContain("{recordingActions}");
     expect(route).toContain("fallback={ownerInitial}");
diff --git a/templates/clips/app/routes/_app.r.$recordingId.tsx b/templates/clips/app/routes/_app.r.$recordingId.tsx
index b4366b9c121..21cb7444432 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.tsx
+++ b/templates/clips/app/routes/_app.r.$recordingId.tsx
@@ -44,7 +44,6 @@ import {
   IconBolt,
   IconMessage,
   IconExternalLink,
-  IconFolder,
   IconMoodSmile,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -62,7 +61,11 @@ import { toast } from "sonner";
 import { ClipsAvatar } from "@/components/clips-avatar";
 import { EditableRecordingTitle } from "@/components/editable-recording-title";
 import { EditorLayout } from "@/components/editor/editor-layout";
-import { PageHeader } from "@/components/library/page-header";
+import {
+  PageBreadcrumb,
+  PageHeader,
+  type PageBreadcrumbItem,
+} from "@/components/library/page-header";
 import { useClipAgentWebMcp } from "@/components/player/clip-agent-webmcp";
 import { ClipsShareTrigger } from "@/components/player/clips-share-trigger";
 import {
@@ -91,14 +94,6 @@ import {
   ViewerTabsTrigger,
 } from "@/components/player/viewer-controls";
 import { StorageSetupCard } from "@/components/recorder/storage-setup-card";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenuItem,
@@ -934,55 +929,30 @@ export default function RecordingPage() {
   const visibleTitle = recording
     ? displayRecordingTitle(recording.title)
     : "Untitled Clip";
+  const recordingBreadcrumbItems: PageBreadcrumbItem[] = [
+    ...(recordingSpace
+      ? [
+          { label: t("navigation.spaces"), to: "/spaces" },
+          {
+            label: recordingSpace.name,
+            to: `/spaces/${recordingSpace.id}`,
+          },
+        ]
+      : [{ label: t("navigation.library"), to: "/library" }]),
+    ...(recordingFolder
+      ? [
+          {
+            label: recordingFolder.name,
+            to: recordingFolder.spaceId
+              ? `/spaces/${recordingFolder.spaceId}/folder/${recordingFolder.id}`
+              : `/library/folder/${recordingFolder.id}`,
+          },
+        ]
+      : []),
+    { label: visibleTitle },
+  ];
   const recordingBreadcrumb = (
-    <Breadcrumb aria-label={t("navigation.library")} className="min-w-0">
-      <BreadcrumbList className="flex-nowrap overflow-hidden">
-        <BreadcrumbItem className="shrink-0">
-          <BreadcrumbLink asChild>
-            <NavLink to="/library">{t("navigation.library")}</NavLink>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        {recordingSpace ? (
-          <>
-            <BreadcrumbSeparator className="shrink-0" />
-            <BreadcrumbItem className="min-w-0">
-              <BreadcrumbLink asChild>
-                <NavLink
-                  to={`/spaces/${recordingSpace.id}`}
-                  className="truncate"
-                >
-                  {recordingSpace.name}
-                </NavLink>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </>
-        ) : null}
-        {recordingFolder ? (
-          <>
-            <BreadcrumbSeparator className="shrink-0" />
-            <BreadcrumbItem className="min-w-0">
-              <BreadcrumbLink asChild>
-                <NavLink
-                  to={
-                    recordingFolder.spaceId
-                      ? `/spaces/${recordingFolder.spaceId}/folder/${recordingFolder.id}`
-                      : `/library/folder/${recordingFolder.id}`
-                  }
-                  className="flex min-w-0 items-center gap-1.5"
-                >
-                  <IconFolder className="size-4 shrink-0" />
-                  <span className="truncate">{recordingFolder.name}</span>
-                </NavLink>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </>
-        ) : null}
-        <BreadcrumbSeparator className="shrink-0" />
-        <BreadcrumbItem className="min-w-0">
-          <BreadcrumbPage className="truncate">{visibleTitle}</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
+    <PageBreadcrumb items={recordingBreadcrumbItems} />
   );
   // Attribution `via` must never point at someone who isn't the owner, so it
   // is only tagged when the viewer is the owner (same rule as the share dialog).
diff --git a/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
index eddf198eaca..541422a8989 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
@@ -4,7 +4,7 @@ import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
 import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
-import { useFolders } from "@/hooks/use-library";
+import { useFolders, useOrganizations, useSpaces } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -18,7 +18,18 @@ export default function SpaceFolderRoute() {
     folderId: string;
   }>();
 
-  const { data: folders } = useFolders({ spaceId });
+  const { data: organizations } = useOrganizations();
+  const currentOrganizationId =
+    organizations?.currentId ?? organizations?.organizations?.[0]?.id;
+  const { data: spacesData } = useSpaces(currentOrganizationId);
+  const space = (spacesData?.spaces ?? []).find(
+    (candidate: any) => candidate.id === spaceId,
+  );
+
+  const { data: folders } = useFolders({
+    organizationId: currentOrganizationId,
+    spaceId,
+  });
   const folder = useMemo(
     () =>
       (folders?.folders ?? []).find((f: any) => f.id === folderId) as
@@ -34,6 +45,14 @@ export default function SpaceFolderRoute() {
       folderId={folderId}
       emptyKind="folder"
       title={folder?.name ?? t("navigation.folder")}
+      breadcrumbItems={[
+        { label: t("navigation.spaces"), to: "/spaces" },
+        {
+          label: space?.name ?? t("navigation.space"),
+          to: `/spaces/${spaceId}`,
+        },
+        { label: folder?.name ?? t("navigation.folder") },
+      ]}
       extraActions={
         <LibraryPrimaryActions folderId={folderId} spaceId={spaceId} />
       }
diff --git a/templates/clips/app/routes/_app.spaces.$spaceId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
index b67737a76c9..f0c4f46af64 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
@@ -1,11 +1,9 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { useMemo } from "react";
 import { useParams } from "react-router";
 
-import { FolderTree, type FolderNode } from "@/components/library/folder-tree";
 import { LibraryGrid } from "@/components/library/library-grid";
 import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
-import { useFolders, useSpaces, useOrganizations } from "@/hooks/use-library";
+import { useSpaces, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -21,65 +19,18 @@ export default function SpaceRoute() {
   const { data: spacesData } = useSpaces(currentOrganizationId);
   const space = (spacesData?.spaces ?? []).find((s: any) => s.id === spaceId);
 
-  const { data: folders } = useFolders({
-    organizationId: currentOrganizationId,
-    spaceId,
-  });
-  const folderList: FolderNode[] = useMemo(
-    () =>
-      (folders?.folders ?? [])
-        .filter((f: any) => f.spaceId === spaceId)
-        .map((f: any) => ({
-          id: f.id,
-          parentId: f.parentId ?? null,
-          spaceId: f.spaceId ?? null,
-          name: f.name,
-        })),
-    [folders, spaceId],
-  );
-
   return (
-    <div className="flex flex-1 min-h-0">
-      {/* Space-scoped folder rail */}
-      <aside className="hidden w-[220px] shrink-0 flex-col border-r border-border bg-sidebar p-2 lg:flex">
-        <div className="px-2 py-1.5">
-          <div className="flex items-center gap-2">
-            <div
-              className="h-5 w-5 rounded flex items-center justify-center text-[10px] text-white"
-              style={{ background: (space as any)?.color ?? "#18181B" }}
-            >
-              {(space as any)?.iconEmoji ??
-                (space as any)?.name?.slice(0, 1).toUpperCase() ??
-                t("navigation.space").slice(0, 1)}
-            </div>
-            <span className="text-xs font-semibold text-foreground truncate">
-              {(space as any)?.name ?? t("navigation.space")}
-            </span>
-          </div>
-        </div>
-        <div className="mt-2">
-          <div className="px-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-            {t("navigation.folders")}
-          </div>
-          <FolderTree
-            folders={folderList}
-            organizationId={currentOrganizationId}
-            spaceId={spaceId ?? null}
-            buildPath={(id) => `/spaces/${spaceId}/folder/${id}`}
-          />
-        </div>
-      </aside>
-
-      <div className="flex min-w-0 flex-1 flex-col">
-        <LibraryGrid
-          view="space"
-          spaceId={spaceId}
-          folderId={null}
-          emptyKind="space"
-          title={(space as any)?.name ?? t("navigation.space")}
-          extraActions={<LibraryPrimaryActions spaceId={spaceId} />}
-        />
-      </div>
-    </div>
+    <LibraryGrid
+      view="space"
+      spaceId={spaceId}
+      folderId={null}
+      emptyKind="space"
+      title={(space as any)?.name ?? t("navigation.space")}
+      breadcrumbItems={[
+        { label: t("navigation.spaces"), to: "/spaces" },
+        { label: (space as any)?.name ?? t("navigation.space") },
+      ]}
+      extraActions={<LibraryPrimaryActions spaceId={spaceId} />}
+    />
   );
 }
diff --git a/templates/clips/app/routes/_app.spaces._index.tsx b/templates/clips/app/routes/_app.spaces._index.tsx
index ff57cd3b658..9158a6010ed 100644
--- a/templates/clips/app/routes/_app.spaces._index.tsx
+++ b/templates/clips/app/routes/_app.spaces._index.tsx
@@ -66,7 +66,7 @@ export default function SpacesIndexRoute() {
   return (
     <div className="flex flex-1 flex-col min-h-0">
       <PageHeader>
-        <PageBreadcrumb label={t("navigation.spaces")} />
+        <PageBreadcrumb items={[{ label: t("navigation.spaces") }]} />
         {canManageOrg && spaces.length > 0 && (
           <div className="ml-auto">
             <PageHeaderPrimaryAction onClick={() => setCreateOpen(true)}>
diff --git a/templates/clips/app/routes/_app.trash.tsx b/templates/clips/app/routes/_app.trash.tsx
index 8ef3c1734b6..88902516348 100644
--- a/templates/clips/app/routes/_app.trash.tsx
+++ b/templates/clips/app/routes/_app.trash.tsx
@@ -190,7 +190,7 @@ export default function TrashRoute() {
   return (
     <div className="flex flex-1 flex-col min-h-0">
       <PageHeader>
-        <PageBreadcrumb label={t("trashRoute.title")} />
+        <PageBreadcrumb items={[{ label: t("trashRoute.title") }]} />
         <div className="ms-auto flex items-center gap-2">
           {selectedIds.length > 0 && (
             <>
diff --git a/templates/clips/data/pglite.agent-native-pglite.lock b/templates/clips/data/pglite.agent-native-pglite.lock
index 9472de07d88..e70bccbca76 100644
--- a/templates/clips/data/pglite.agent-native-pglite.lock
+++ b/templates/clips/data/pglite.agent-native-pglite.lock
@@ -1 +1 @@
-{"pid":68469,"token":"68469:1788896698442:0.9915660534090365"}
\ No newline at end of file
+{"pid":42348,"token":"42348:1788919476618:0.7942956242696269"}
\ No newline at end of file
diff --git a/templates/clips/desktop/src/components/MediaDeviceRow.tsx b/templates/clips/desktop/src/components/MediaDeviceRow.tsx
index 9a620e02103..bd0a1a6b69f 100644
--- a/templates/clips/desktop/src/components/MediaDeviceRow.tsx
+++ b/templates/clips/desktop/src/components/MediaDeviceRow.tsx
@@ -191,7 +191,7 @@ export function MediaDeviceRow({
         </div>
       </div>
       {kind === "mic" && onSystemAudioToggle ? (
-        <div className="system-audio-row">
+        <div className="row system-audio-row">
           <span className="row-icon" aria-hidden>
             <IconVolume2 size={20} stroke={1.75} />
           </span>
diff --git a/templates/clips/desktop/src/components/recorder-popover-states.test.tsx b/templates/clips/desktop/src/components/recorder-popover-states.test.tsx
index 9f26e9fdda2..249b7066c95 100644
--- a/templates/clips/desktop/src/components/recorder-popover-states.test.tsx
+++ b/templates/clips/desktop/src/components/recorder-popover-states.test.tsx
@@ -71,6 +71,7 @@ describe("recorder popover failure states", () => {
     expect(html).not.toContain("mic-wave");
     expect(html).toContain("Record system audio");
     expect(html).toContain('aria-label="Record system audio"');
+    expect(html).toContain('class="row system-audio-row"');
   });
 
   it("keeps source selection keyboard-addressable when the source is active", () => {
diff --git a/templates/clips/desktop/src/styles.css b/templates/clips/desktop/src/styles.css
index 9ee1c2db8ba..631f8576647 100644
--- a/templates/clips/desktop/src/styles.css
+++ b/templates/clips/desktop/src/styles.css
@@ -533,9 +533,11 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
   flex-shrink: 0;
 }
 
-.media-device-row .row {
+.media-device-row .row,
+.system-audio-row {
   display: grid;
   grid-template-columns: 20px minmax(0, 1fr) 36px;
+  column-gap: 10px;
 }
 
 .row-main {
@@ -550,11 +552,9 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
 }
 
 .system-audio-row {
-  display: grid;
-  grid-template-columns: 20px minmax(0, 1fr) 36px;
   align-items: center;
-  min-height: 36px;
-  padding: 0 10px 0 0;
+  min-height: 30px;
+  padding: 5px 10px;
   color: var(--fg-muted);
 }
 

From eee5ffd680804f275c7682cc936116e0506481fb Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Wed, 9 Sep 2026 01:27:15 -0700
Subject: [PATCH 15/21] fix: restore chromeless desktop popover

---
 templates/clips/desktop/src-tauri/src/util.rs |  8 +++----
 .../src/lib/popover-window-chrome.test.ts     | 21 +++++++++++++++++++
 templates/clips/desktop/src/styles.css        |  5 ++---
 3 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 templates/clips/desktop/src/lib/popover-window-chrome.test.ts

diff --git a/templates/clips/desktop/src-tauri/src/util.rs b/templates/clips/desktop/src-tauri/src/util.rs
index 449b1a61888..6b82c31e826 100644
--- a/templates/clips/desktop/src-tauri/src/util.rs
+++ b/templates/clips/desktop/src-tauri/src/util.rs
@@ -111,9 +111,9 @@ pub fn set_capture_included(window: &WebviewWindow) {
 
 pub fn build_popover_window(app: &mut tauri::App) -> Result<WebviewWindow, tauri::Error> {
     let app_handle = app.handle().clone();
-    // Keep the tray panel compact, but use native decorations so a manually
-    // launched app still behaves like a normal window: users can move,
-    // minimize, and close it without needing to find the tray icon again.
+    // The window is sized to the visible panel exactly. The HTML paints the
+    // rounded shape and macOS derives the native shadow from that alpha mask,
+    // so adding native decorations would create a second frame above it.
     WebviewWindowBuilder::new(app, "popover", WebviewUrl::App("index.html".into()))
         .title("Clips")
         .inner_size(
@@ -122,7 +122,7 @@ pub fn build_popover_window(app: &mut tauri::App) -> Result<WebviewWindow, tauri
         )
         .position(2.0, 2.0)
         .resizable(false)
-        .decorations(true)
+        .decorations(false)
         .transparent(true)
         .always_on_top(true)
         .visible_on_all_workspaces(true)
diff --git a/templates/clips/desktop/src/lib/popover-window-chrome.test.ts b/templates/clips/desktop/src/lib/popover-window-chrome.test.ts
new file mode 100644
index 00000000000..b67e8eafd15
--- /dev/null
+++ b/templates/clips/desktop/src/lib/popover-window-chrome.test.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+const utilSource = readFileSync(
+  new URL("../../src-tauri/src/util.rs", import.meta.url),
+  "utf8",
+);
+
+describe("desktop popover window chrome", () => {
+  it("keeps the HTML-painted popover free of a second native frame", () => {
+    const start = utilSource.indexOf("pub fn build_popover_window");
+    const end = utilSource.indexOf(".on_new_window", start);
+    const popoverBuilder = utilSource.slice(start, end);
+
+    expect(start).toBeGreaterThan(-1);
+    expect(end).toBeGreaterThan(start);
+    expect(popoverBuilder).toContain(".decorations(false)");
+    expect(popoverBuilder).not.toContain(".decorations(true)");
+  });
+});
diff --git a/templates/clips/desktop/src/styles.css b/templates/clips/desktop/src/styles.css
index 9ee1c2db8ba..08cb839284f 100644
--- a/templates/clips/desktop/src/styles.css
+++ b/templates/clips/desktop/src/styles.css
@@ -65,9 +65,8 @@
   box-sizing: border-box;
 }
 
-/* The HTML still paints the visible panel shape while the native window frame
-   supplies standard move, minimize, and close affordances for the desktop
-   app. */
+/* The main Tauri window is transparent and chromeless, so the HTML paints the
+   visible rounded popover while macOS supplies its shadow. */
 html,
 body {
   margin: 0;

From 464c4f97c34677d0b3bf0a3095f28322096e28ab Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Wed, 9 Sep 2026 08:23:41 -0700
Subject: [PATCH 16/21] Fix dark recorder switches and agent sidebar sizing

---
 .../app/components/library/library-layout.tsx |  2 +-
 .../app/routes/_app.r.$recordingId.test.ts    |  3 ++-
 ...-09-09-agent-sidebar-fits-below-toolbar.md |  6 +++++
 ...esktop-switches-stay-clear-in-dark-mode.md |  6 +++++
 templates/clips/desktop/src/app.tsx           |  2 +-
 .../clips/desktop/src/components/Switch.tsx   |  7 ++----
 .../recorder-popover-states.test.tsx          |  6 +++++
 .../desktop/src/components/ui/switch.tsx      | 24 ++++++++++++++++---
 templates/clips/desktop/src/tailwind.css      |  3 +++
 9 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 templates/clips/changelog/2026-09-09-agent-sidebar-fits-below-toolbar.md
 create mode 100644 templates/clips/changelog/2026-09-09-desktop-switches-stay-clear-in-dark-mode.md

diff --git a/templates/clips/app/components/library/library-layout.tsx b/templates/clips/app/components/library/library-layout.tsx
index 1119a24ffb1..e60f06202fe 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -883,7 +883,7 @@ export function LibraryLayout({
             ) : null}
           </header>
         )}
-        <div className="flex min-h-0 flex-1 overflow-hidden [&>.agent-sidebar-shell]:h-full [&>.agent-sidebar-shell]:min-h-0">
+        <div className="flex min-h-0 flex-1 overflow-hidden [--agent-native-viewport-height:100%]">
           {showAgentSidebar ? (
             <AgentSidebar
               position="right"
diff --git a/templates/clips/app/routes/_app.r.$recordingId.test.ts b/templates/clips/app/routes/_app.r.$recordingId.test.ts
index b61dfebe80b..4384d7002ac 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.test.ts
+++ b/templates/clips/app/routes/_app.r.$recordingId.test.ts
@@ -234,7 +234,8 @@ describe("direct recording route shell cue", () => {
     expect(layout).toContain("showWhenOpen");
     expect(layout).not.toContain("IconLayoutSidebarRight");
     expect(layout).toContain("<ClipsAgentToggleButton />");
-    expect(layout).toContain("[&>.agent-sidebar-shell]:h-full");
+    expect(layout).toContain("[--agent-native-viewport-height:100%]");
+    expect(layout).not.toContain("[&>.agent-sidebar-shell]:h-full");
     expect(layout).toContain("showAgentSidebar = true");
     expect(layout).toContain("{showAgentSidebar ? (");
     expect(route).toContain("<PageHeader>");
diff --git a/templates/clips/changelog/2026-09-09-agent-sidebar-fits-below-toolbar.md b/templates/clips/changelog/2026-09-09-agent-sidebar-fits-below-toolbar.md
new file mode 100644
index 00000000000..d3a8d220f66
--- /dev/null
+++ b/templates/clips/changelog/2026-09-09-agent-sidebar-fits-below-toolbar.md
@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-09
+---
+
+The Agent sidebar now fits below the app toolbar without clipping its composer.
diff --git a/templates/clips/changelog/2026-09-09-desktop-switches-stay-clear-in-dark-mode.md b/templates/clips/changelog/2026-09-09-desktop-switches-stay-clear-in-dark-mode.md
new file mode 100644
index 00000000000..4d52c75fd5f
--- /dev/null
+++ b/templates/clips/changelog/2026-09-09-desktop-switches-stay-clear-in-dark-mode.md
@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-09
+---
+
+Desktop recorder switches now keep their checked state clear and legible in dark mode.
diff --git a/templates/clips/desktop/src/app.tsx b/templates/clips/desktop/src/app.tsx
index d97c3e4c8b4..db8ae3cb832 100644
--- a/templates/clips/desktop/src/app.tsx
+++ b/templates/clips/desktop/src/app.tsx
@@ -898,7 +898,7 @@ function SettingsSwitch({
       onCheckedChange={onCheckedChange}
       disabled={disabled}
       aria-label={label}
-      className="data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=unchecked]:border-border"
+      tone="success"
     />
   );
 }
diff --git a/templates/clips/desktop/src/components/Switch.tsx b/templates/clips/desktop/src/components/Switch.tsx
index 9a9c08378d6..4127ed66acd 100644
--- a/templates/clips/desktop/src/components/Switch.tsx
+++ b/templates/clips/desktop/src/components/Switch.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { cn } from "../lib/utils";
 import { Switch as UiSwitch } from "./ui/switch";
 
 interface SwitchProps extends Omit<
@@ -31,10 +30,8 @@ export const Switch = React.forwardRef<
       aria-label={label}
       disabled={disabled}
       data-tw-surface
-      className={cn(
-        "data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=unchecked]:border-border",
-        className,
-      )}
+      tone="success"
+      className={className}
     />
   );
 });
diff --git a/templates/clips/desktop/src/components/recorder-popover-states.test.tsx b/templates/clips/desktop/src/components/recorder-popover-states.test.tsx
index 9f26e9fdda2..bae633366af 100644
--- a/templates/clips/desktop/src/components/recorder-popover-states.test.tsx
+++ b/templates/clips/desktop/src/components/recorder-popover-states.test.tsx
@@ -95,6 +95,12 @@ describe("recorder popover failure states", () => {
     expect(html).toContain("group-data-[size=default]/switch:size-4");
     expect(html).toContain("ring-foreground/20");
     expect(html).toContain("data-[state=checked]:translate-x-[calc(100%-2px)]");
+    expect(html).toMatch(
+      /data-slot="switch"[^>]*data-\[state=checked\]:bg-success(?:\s|")/,
+    );
+    expect(html).toMatch(
+      /data-slot="switch-thumb"[^>]*data-\[state=checked\]:bg-success-foreground(?:\s|")/,
+    );
     expect(html).not.toContain("[&>span]");
   });
 
diff --git a/templates/clips/desktop/src/components/ui/switch.tsx b/templates/clips/desktop/src/components/ui/switch.tsx
index f6d993628c0..5962e333dba 100644
--- a/templates/clips/desktop/src/components/ui/switch.tsx
+++ b/templates/clips/desktop/src/components/ui/switch.tsx
@@ -12,32 +12,50 @@ const switchVariants = cva(
         default: "h-[1.15rem] w-8",
         sm: "h-3.5 w-6",
       },
+      tone: {
+        default: "",
+        success:
+          "data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=unchecked]:border-border",
+      },
     },
     defaultVariants: {
       size: "default",
+      tone: "default",
     },
   },
 );
 
 const switchThumbVariants = cva(
   "pointer-events-none block rounded-full bg-background shadow-sm ring-1 ring-foreground/20 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
+  {
+    variants: {
+      tone: {
+        default: "",
+        success:
+          "data-[state=checked]:bg-success-foreground dark:data-[state=checked]:bg-success-foreground",
+      },
+    },
+    defaultVariants: {
+      tone: "default",
+    },
+  },
 );
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
     VariantProps<typeof switchVariants>
->(({ className, size = "default", ...props }, ref) => (
+>(({ className, size = "default", tone = "default", ...props }, ref) => (
   <SwitchPrimitives.Root
     data-slot="switch"
     data-size={size}
-    className={cn(switchVariants({ size, className }))}
+    className={cn(switchVariants({ size, tone, className }))}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       data-slot="switch-thumb"
-      className={cn(switchThumbVariants())}
+      className={cn(switchThumbVariants({ tone }))}
     />
   </SwitchPrimitives.Root>
 ));
diff --git a/templates/clips/desktop/src/tailwind.css b/templates/clips/desktop/src/tailwind.css
index 30bba91d1ab..1517862db86 100644
--- a/templates/clips/desktop/src/tailwind.css
+++ b/templates/clips/desktop/src/tailwind.css
@@ -245,6 +245,7 @@
   --ui-ring: 0 0% 40%;
   /* macOS convention for an engaged switch, and the one accent the tray uses. */
   --ui-success: 142 71% 45%;
+  --ui-success-foreground: 0 0% 100%;
   /* Reserved for explicit "there is something new here" alerts and notices. */
   --ui-info: 217 91% 55%;
 }
@@ -271,6 +272,7 @@
     --ui-input: 0 0% 32%;
     --ui-ring: 0 0% 60%;
     --ui-success: 142 60% 52%;
+    --ui-success-foreground: 0 0% 100%;
     --ui-info: 217 91% 65%;
   }
 }
@@ -333,6 +335,7 @@
   --color-card-foreground: hsl(var(--ui-card-foreground));
 
   --color-success: hsl(var(--ui-success));
+  --color-success-foreground: hsl(var(--ui-success-foreground));
   --color-info: hsl(var(--ui-info));
 
   --radius-lg: var(--radius);

From d5d54205c4149b596e4cdbb738d6e8b48786023e Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Wed, 9 Sep 2026 08:59:37 -0700
Subject: [PATCH 17/21] fix: use the global Agent panel on recordings

---
 .../app/components/clips-command-menu.tsx     | 10 ++-
 .../app/components/library/library-layout.tsx | 64 ++++++++--------
 .../app/hooks/use-navigation-state.test.ts    |  7 +-
 .../clips/app/hooks/use-navigation-state.ts   | 33 ++++++---
 .../app/routes/_app.r.$recordingId.test.ts    | 34 ++++++---
 .../clips/app/routes/_app.r.$recordingId.tsx  | 74 +++++++++++--------
 templates/clips/app/routes/_app.tsx           |  6 +-
 ...09-09-recording-agent-uses-global-panel.md |  6 ++
 8 files changed, 146 insertions(+), 88 deletions(-)
 create mode 100644 templates/clips/changelog/2026-09-09-recording-agent-uses-global-panel.md

diff --git a/templates/clips/app/components/clips-command-menu.tsx b/templates/clips/app/components/clips-command-menu.tsx
index eddffb2d1d4..fd8a3e28c54 100644
--- a/templates/clips/app/components/clips-command-menu.tsx
+++ b/templates/clips/app/components/clips-command-menu.tsx
@@ -4,7 +4,11 @@ import {
   useCommandMenuShortcut,
 } from "@agent-native/core/client/navigation";
 import { useOrgRole } from "@agent-native/core/client/org";
-import { docsUrl } from "@agent-native/core/shared";
+import {
+  AGENT_SIDEBAR_QUERY_PARAM,
+  AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+  docsUrl,
+} from "@agent-native/core/shared";
 import {
   IconArchive,
   IconCalendar,
@@ -479,7 +483,9 @@ export function ClipsCommandMenu({
             <CommandMenu.Item
               onSelect={() =>
                 void navigate(
-                  withQuery(`/r/${context.recordingId}`, { panel: "agent" }),
+                  withQuery(`/r/${context.recordingId}`, {
+                    [AGENT_SIDEBAR_QUERY_PARAM]: AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+                  }),
                 )
               }
               keywords={["agent", "ask", "recording"]}
diff --git a/templates/clips/app/components/library/library-layout.tsx b/templates/clips/app/components/library/library-layout.tsx
index e60f06202fe..b00a0dbbbc3 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -81,8 +81,6 @@ import { SpaceDialogs } from "./space-dialogs";
 
 interface LibraryLayoutProps {
   children: ReactNode;
-  /** Disable the workspace Agent rail when a route embeds Agent in its own panel. */
-  showAgentSidebar?: boolean;
 }
 
 const SIDEBAR_COLLAPSED_STORAGE_KEY = "clips:left-sidebar-collapsed";
@@ -190,10 +188,7 @@ function ExpandedSidebarNavGroup({
   );
 }
 
-export function LibraryLayout({
-  children,
-  showAgentSidebar = true,
-}: LibraryLayoutProps) {
+export function LibraryLayout({ children }: LibraryLayoutProps) {
   const location = useLocation();
   const navigate = useNavigate();
   const t = useT();
@@ -876,34 +871,41 @@ export function LibraryLayout({
               ref={setHeaderSlot}
               className="flex min-w-0 flex-1 items-center gap-3 overflow-hidden"
             />
-            {showAgentSidebar ? (
-              <div className="ms-1 flex items-center border-s border-border ps-2">
-                <ClipsAgentToggleButton />
-              </div>
-            ) : null}
+            <div className="ms-1 flex items-center border-s border-border ps-2">
+              <ClipsAgentToggleButton />
+            </div>
           </header>
         )}
         <div className="flex min-h-0 flex-1 overflow-hidden [--agent-native-viewport-height:100%]">
-          {showAgentSidebar ? (
-            <AgentSidebar
-              position="right"
-              defaultOpen={false}
-              showCollapseButton={isMobile}
-              emptyStateText={t("navigation.agentEmptyState")}
-              suggestions={[
-                t("navigation.agentSuggestionSummary"),
-                t("navigation.agentSuggestionPricing"),
-                t("navigation.agentSuggestionFiller"),
-              ]}
-              agentPageHref="/settings/agent"
-              scope={recordingScope}
-              browserTabId={getBrowserTabId()}
-            >
-              {pageContent}
-            </AgentSidebar>
-          ) : (
-            pageContent
-          )}
+          <AgentSidebar
+            position="right"
+            defaultOpen={false}
+            showCollapseButton={isMobile}
+            emptyStateText={
+              recordingScope
+                ? t("recordingPage.askAboutClip")
+                : t("navigation.agentEmptyState")
+            }
+            suggestions={
+              recordingScope
+                ? [
+                    t("recordingPage.summarizeClip"),
+                    t("recordingPage.findKeyMoments"),
+                    t("recordingPage.listFollowUpActions"),
+                    t("recordingPage.draftQuestions"),
+                  ]
+                : [
+                    t("navigation.agentSuggestionSummary"),
+                    t("navigation.agentSuggestionPricing"),
+                    t("navigation.agentSuggestionFiller"),
+                  ]
+            }
+            agentPageHref="/settings/agent"
+            scope={recordingScope}
+            browserTabId={getBrowserTabId()}
+          >
+            {pageContent}
+          </AgentSidebar>
         </div>
       </div>
 
diff --git a/templates/clips/app/hooks/use-navigation-state.test.ts b/templates/clips/app/hooks/use-navigation-state.test.ts
index c15d46c6698..5c266a819a2 100644
--- a/templates/clips/app/hooks/use-navigation-state.test.ts
+++ b/templates/clips/app/hooks/use-navigation-state.test.ts
@@ -30,7 +30,12 @@ describe("Clips shared navigation", () => {
         panel: "agent",
         atMs: 12_345.6,
       }),
-    ).toBe("/r/recording-1?panel=agent&at=12.346");
+    ).toBe("/r/recording-1?agentSidebar=open&at=12.346");
+    expect(stateFromLocation("/r/recording-1", "?agentSidebar=open")).toEqual({
+      view: "recording",
+      recordingId: "recording-1",
+      panel: "agent",
+    });
   });
 
   it("round-trips encoded resource IDs", () => {
diff --git a/templates/clips/app/hooks/use-navigation-state.ts b/templates/clips/app/hooks/use-navigation-state.ts
index 2b0f794b88f..5daa5c65ad6 100644
--- a/templates/clips/app/hooks/use-navigation-state.ts
+++ b/templates/clips/app/hooks/use-navigation-state.ts
@@ -1,5 +1,9 @@
 import { getBrowserTabId } from "@agent-native/core/client/hooks";
 import { useAgentRouteState } from "@agent-native/core/client/navigation";
+import {
+  AGENT_SIDEBAR_QUERY_PARAM,
+  AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+} from "@agent-native/core/shared";
 
 import { parseTimeParam } from "@/lib/time-param";
 
@@ -100,19 +104,23 @@ export function stateFromLocation(
     const recordingId = decodePathSegment(recordingMatch[1]);
     if (!recordingId) return { view: "library" };
     const panel = params.get("panel");
+    const agentSidebarOpen =
+      params.get(AGENT_SIDEBAR_QUERY_PARAM) === AGENT_SIDEBAR_QUERY_VALUE_OPEN;
     const atParam = params.get("at") ?? params.get("t");
     const atMs = atParam == null ? undefined : parseTimeParam(atParam);
     return {
       view: panel === "insights" ? "insights" : "recording",
       recordingId,
-      ...(panel === "comments" ||
-      panel === "transcript" ||
-      panel === "agent" ||
-      panel === "debug" ||
-      panel === "insights" ||
-      panel === "settings"
-        ? { panel }
-        : {}),
+      ...(agentSidebarOpen
+        ? { panel: "agent" as const }
+        : panel === "comments" ||
+            panel === "transcript" ||
+            panel === "agent" ||
+            panel === "debug" ||
+            panel === "insights" ||
+            panel === "settings"
+          ? { panel }
+          : {}),
       ...(Number.isFinite(atMs) && atMs! >= 0 ? { atMs } : {}),
       ...(searchTerm ? { search: searchTerm } : {}),
     };
@@ -212,7 +220,14 @@ export function pathFromCommand(cmd: NavigateCommand): string {
     case "recording":
       if (!cmd.recordingId) return "/library";
       const recordingParams = new URLSearchParams();
-      if (cmd.panel) recordingParams.set("panel", cmd.panel);
+      if (cmd.panel === "agent") {
+        recordingParams.set(
+          AGENT_SIDEBAR_QUERY_PARAM,
+          AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+        );
+      } else if (cmd.panel) {
+        recordingParams.set("panel", cmd.panel);
+      }
       if (typeof cmd.atMs === "number" && Number.isFinite(cmd.atMs)) {
         // Viewer routes use the public `at` query parameter in seconds while
         // navigation commands expose timestamps in milliseconds.
diff --git a/templates/clips/app/routes/_app.r.$recordingId.test.ts b/templates/clips/app/routes/_app.r.$recordingId.test.ts
index 4384d7002ac..3fb9c932819 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.test.ts
+++ b/templates/clips/app/routes/_app.r.$recordingId.test.ts
@@ -132,7 +132,7 @@ describe("direct recording route shell cue", () => {
     expect(route).toContain("<ViewerTabsList");
     expect(route).toContain('<ViewerTabsTrigger value="comments">');
     expect(route).toContain('<ViewerTabsTrigger value="transcript">');
-    expect(route).toContain('<ViewerTabsTrigger value="agent">');
+    expect(route).not.toContain('<ViewerTabsTrigger value="agent">');
     expect(route).toContain('<ViewerTabsTrigger value="debug">');
     expect(route).toContain('<ViewerTabsTrigger value="settings">');
     expect(route).toContain("isFullBrowserDiagnostics");
@@ -148,7 +148,9 @@ describe("direct recording route shell cue", () => {
     expect(route).not.toContain("IconLayoutSidebarRightExpand");
     expect(route).not.toContain("closeSidePanel");
     expect(route).not.toContain("lastToolbarPanelRef");
-    expect(route).toContain("!editing && !isCompactLayout && panel");
+    expect(route).toContain(
+      "!editing && !isCompactLayout && !globalAgentSidebarOpen && panel",
+    );
     const mobilePanelStart = route.indexOf('id="clip-activity-panel"');
     const mobilePanel = route.slice(
       mobilePanelStart,
@@ -211,20 +213,28 @@ describe("direct recording route shell cue", () => {
     expect(viewerControls).not.toContain("hover:bg-muted/50");
   });
 
-  it("embeds Agent in the recording panel without mounting a second rail", () => {
+  it("uses the global Agent sidebar for recording context", () => {
     const route = readRoute("_app.r.$recordingId.tsx");
+    const appRoute = readRoute("_app.tsx");
     const layout = readFileSync(
       resolve(process.cwd(), "app/components/library/library-layout.tsx"),
       "utf8",
     );
+    const commandMenu = readFileSync(
+      resolve(process.cwd(), "app/components/clips-command-menu.tsx"),
+      "utf8",
+    );
 
-    expect(route).toContain('<ViewerTabsTrigger value="agent">');
-    expect(route).toContain('value="agent"');
-    expect(route).toContain("<AgentPanel");
-    expect(route).toContain('scope={{ type: "recording", id: recording.id }}');
+    expect(route).not.toContain('<ViewerTabsTrigger value="agent">');
+    expect(route).not.toContain("<AgentPanel");
+    expect(route).toContain("requestAgentSidebarOpen");
+    expect(route).toContain("SIDEBAR_STATE_CHANGE_EVENT");
+    expect(route).toContain("useGlobalAgentSidebarOpen");
+    expect(route).toContain("!globalAgentSidebarOpen");
     expect(route).toContain("openAgentPanel");
-    expect(route).not.toContain("openGlobalAgentPanel");
     expect(route).not.toContain("<LibraryLayout");
+    expect(appRoute).toContain("<LibraryLayout>");
+    expect(appRoute).not.toContain("showAgentSidebar");
     expect(layout).toContain("<AgentSidebar");
     expect(layout).toContain(
       'className="agent-layout-main-surface flex min-h-0 min-w-0 flex-1 flex-col"',
@@ -236,8 +246,12 @@ describe("direct recording route shell cue", () => {
     expect(layout).toContain("<ClipsAgentToggleButton />");
     expect(layout).toContain("[--agent-native-viewport-height:100%]");
     expect(layout).not.toContain("[&>.agent-sidebar-shell]:h-full");
-    expect(layout).toContain("showAgentSidebar = true");
-    expect(layout).toContain("{showAgentSidebar ? (");
+    expect(layout).not.toContain("showAgentSidebar");
+    expect(layout).toContain("scope={recordingScope}");
+    expect(layout).toContain('t("recordingPage.askAboutClip")');
+    expect(layout).toContain('t("recordingPage.summarizeClip")');
+    expect(commandMenu).toContain("AGENT_SIDEBAR_QUERY_PARAM");
+    expect(commandMenu).toContain("AGENT_SIDEBAR_QUERY_VALUE_OPEN");
     expect(route).toContain("<PageHeader>");
     expect(route).toContain("<PageBreadcrumb items={recordingBreadcrumbItems}");
     expect(route).not.toContain('from "@/components/ui/breadcrumb"');
diff --git a/templates/clips/app/routes/_app.r.$recordingId.tsx b/templates/clips/app/routes/_app.r.$recordingId.tsx
index e2425e6bd29..c94e8597412 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.tsx
+++ b/templates/clips/app/routes/_app.r.$recordingId.tsx
@@ -1,4 +1,8 @@
-import { AgentPanel } from "@agent-native/core/client/agent-chat";
+import {
+  requestAgentSidebarOpen,
+  SIDEBAR_STATE_CHANGE_EVENT,
+  type AgentSidebarStateChangeDetail,
+} from "@agent-native/core/client/agent-chat";
 import {
   agentNativePath,
   appBasePath,
@@ -414,9 +418,35 @@ export function meta() {
   return [{ title: enMessages.recordingRoute.pageTitle }];
 }
 
-type SidePanel = "transcript" | "comments" | "agent" | "debug" | "settings";
+type SidePanel = "transcript" | "comments" | "debug" | "settings";
 type ToolbarPanel = Exclude<SidePanel, "comments">;
 
+function useGlobalAgentSidebarOpen() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const handleStateChange = (event: Event) => {
+      const detail = (event as CustomEvent<AgentSidebarStateChangeDetail>)
+        .detail;
+      if (detail && typeof detail.open === "boolean") {
+        setOpen(detail.open);
+      }
+    };
+
+    window.addEventListener(SIDEBAR_STATE_CHANGE_EVENT, handleStateChange);
+    const mountedPanel = document.querySelector<HTMLElement>(
+      ".agent-sidebar-panel[data-agent-sidebar-state='open']",
+    );
+    setOpen(Boolean(mountedPanel));
+
+    return () => {
+      window.removeEventListener(SIDEBAR_STATE_CHANGE_EVENT, handleStateChange);
+    };
+  }, []);
+
+  return open;
+}
+
 const WORKFLOW_MENU_ITEMS: Array<{
   kind: WorkflowKind;
   labelKey: string;
@@ -531,6 +561,7 @@ export default function RecordingPage() {
   const commentsSectionRef = useRef<HTMLElement | null>(null);
 
   const [panel, setPanel] = useState<SidePanel | null>("transcript");
+  const globalAgentSidebarOpen = useGlobalAgentSidebarOpen();
   const [theaterMode, setTheaterMode] = useState(false);
   const [editing, setEditing] = useState(false);
   const [currentMs, setCurrentMs] = useState(startMs);
@@ -578,8 +609,8 @@ export default function RecordingPage() {
     }
   }, [isCompactLayout, searchParams, setSearchParams]);
   const openAgentPanel = useCallback(() => {
-    openSidePanel("agent");
-  }, [openSidePanel]);
+    requestAgentSidebarOpen();
+  }, []);
   const transcriptKickedRef = useRef<string | null>(null);
   // When the recording lands in the processing state but never flips to
   // 'ready', stop spinning forever and surface an error banner so the user
@@ -926,6 +957,11 @@ export default function RecordingPage() {
   }, [browserDiagnostics, canEdit, panel]);
 
   useEffect(() => {
+    if (panelParam === "agent") {
+      setPanel("transcript");
+      requestAgentSidebarOpen();
+      return;
+    }
     if (panelParam === "comments") {
       setPanel(recording?.enableComments ? "comments" : "transcript");
       if (isCompactLayout) {
@@ -938,7 +974,6 @@ export default function RecordingPage() {
     if (
       (panelParam === "transcript" ||
         panelParam === "insights" ||
-        panelParam === "agent" ||
         panelParam === "debug" ||
         panelParam === "settings") &&
       (panelParam !== "settings" || canEdit) &&
@@ -1913,9 +1948,6 @@ export default function RecordingPage() {
       <ViewerTabsTrigger value="transcript">
         {t("recordingPage.transcript")}
       </ViewerTabsTrigger>
-      <ViewerTabsTrigger value="agent">
-        {t("recordingPage.agent")}
-      </ViewerTabsTrigger>
       {browserDiagnostics ? (
         <ViewerTabsTrigger value="debug">
           <span className="flex items-center justify-center gap-1.5">
@@ -2024,26 +2056,6 @@ export default function RecordingPage() {
             isRegenerating={requestTranscript.isPending}
           />
         </TabsContent>
-        <TabsContent
-          value="agent"
-          className="mt-0 flex min-h-0 flex-1 flex-col overflow-y-auto data-[state=inactive]:hidden"
-        >
-          <AgentPanel
-            emptyStateText={t("recordingPage.askAboutClip")}
-            dynamicSuggestions={false}
-            scope={{ type: "recording", id: recording.id }}
-            missingApiKeySetupLayout="sidebar"
-            suggestions={[
-              t("recordingPage.summarizeClip"),
-              t("recordingPage.findKeyMoments"),
-              t("recordingPage.listFollowUpActions"),
-              t("recordingPage.draftQuestions"),
-            ]}
-            browserTabId={browserTabId}
-            showHeader={false}
-            showTabBar={false}
-          />
-        </TabsContent>
         {browserDiagnostics ? (
           <TabsContent
             value="debug"
@@ -2381,7 +2393,7 @@ export default function RecordingPage() {
           }
           openSidePanel(value as ToolbarPanel);
         }}
-        className="clips-recording-view grid h-full min-h-0 w-full max-w-full grid-cols-1 overflow-x-hidden bg-background lg:grid-cols-[minmax(0,1fr)_auto] lg:grid-rows-[minmax(0,1fr)] lg:overflow-hidden [&_.agent-composer-root]:!border-0 [&_.agent-composer-root]:!bg-background"
+        className="clips-recording-view grid h-full min-h-0 w-full max-w-full grid-cols-1 overflow-x-hidden bg-background lg:grid-cols-[minmax(0,1fr)_auto] lg:grid-rows-[minmax(0,1fr)] lg:overflow-hidden"
       >
         {/* Main video column */}
         <div className="contents">
@@ -2577,7 +2589,7 @@ export default function RecordingPage() {
                   </div>
                 </div>
 
-                {isCompactLayout ? (
+                {isCompactLayout && !globalAgentSidebarOpen ? (
                   <RecordingSidePanel
                     id="clip-activity-panel"
                     className="mt-2 lg:hidden"
@@ -2592,7 +2604,7 @@ export default function RecordingPage() {
         </div>
 
         {/* Side panel */}
-        {!editing && !isCompactLayout && panel ? (
+        {!editing && !isCompactLayout && !globalAgentSidebarOpen && panel ? (
           <RecordingSidePanel
             className="hidden lg:col-start-2 lg:row-start-1 lg:flex lg:w-[360px] xl:w-[420px] 2xl:w-[440px]"
             tabs={renderPanelTabs()}
diff --git a/templates/clips/app/routes/_app.tsx b/templates/clips/app/routes/_app.tsx
index 9bf65102494..21923b6c94f 100644
--- a/templates/clips/app/routes/_app.tsx
+++ b/templates/clips/app/routes/_app.tsx
@@ -1,7 +1,7 @@
 import { useExperiment } from "@agent-native/core/client/experiments";
 import { CLIPS_MEETINGS, CLIPS_WISPRFLOW } from "@shared/experiments";
 import { useEffect, useRef } from "react";
-import { Outlet, useLocation, useNavigate } from "react-router";
+import { Outlet, useNavigate } from "react-router";
 
 import { LibraryLayout } from "@/components/library/library-layout";
 import { useAutoTitleBridge } from "@/hooks/use-auto-title";
@@ -71,8 +71,6 @@ function useGlobalSequenceShortcuts() {
 // Pathless layout route — keeps the left sidebar + agent chat mounted across
 // every library/space/archive/trash navigation. See client-side-routing skill.
 export default function AppLayoutRoute() {
-  const location = useLocation();
-  const recordingWorkspace = /^\/r\/[^/]+\/?$/.test(location.pathname);
   // Watch for server-queued title delegations and dispatch them to the agent
   // chat. `sendToAgentChat` is browser-only so the server can't call it
   // directly; this bridge is how `request-transcript`'s "auto-title when the
@@ -83,7 +81,7 @@ export default function AppLayoutRoute() {
   useGlobalSequenceShortcuts();
 
   return (
-    <LibraryLayout showAgentSidebar={!recordingWorkspace}>
+    <LibraryLayout>
       <Outlet />
     </LibraryLayout>
   );
diff --git a/templates/clips/changelog/2026-09-09-recording-agent-uses-global-panel.md b/templates/clips/changelog/2026-09-09-recording-agent-uses-global-panel.md
new file mode 100644
index 00000000000..23f485f083a
--- /dev/null
+++ b/templates/clips/changelog/2026-09-09-recording-agent-uses-global-panel.md
@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-09
+---
+
+Recording pages now open the same contextual Agent panel used throughout the app.

From 59a602a4bbceef1d1c560b635e7c5cd9ad15f512 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Wed, 9 Sep 2026 12:58:55 -0700
Subject: [PATCH 18/21] Improve Clips recording and transcript workflows

---
 templates/clips/DESIGN.md                     |  17 +-
 .../components/agent-destination-logos.tsx    |  50 ++
 .../app/components/clips-command-menu.tsx     |  10 +-
 .../app/components/library/library-layout.tsx |  66 +-
 .../components/player/settings-panel.test.ts  |  19 -
 .../components/player/share-dialog.test.ts    | 101 ++-
 .../app/components/player/share-dialog.tsx    | 605 ++++++++++--------
 .../clips/app/components/sharing/share-ui.tsx |   6 +-
 .../app/hooks/use-navigation-state.test.ts    |   7 +-
 .../clips/app/hooks/use-navigation-state.ts   |  31 +-
 templates/clips/app/i18n/ar-SA.ts             |   5 +
 templates/clips/app/i18n/de-DE.ts             |   5 +
 templates/clips/app/i18n/en-US.ts             |   5 +
 templates/clips/app/i18n/es-ES.ts             |   5 +
 templates/clips/app/i18n/fr-FR.ts             |   5 +
 templates/clips/app/i18n/hi-IN.ts             |   5 +
 templates/clips/app/i18n/ja-JP.ts             |   5 +
 templates/clips/app/i18n/ko-KR.ts             |   5 +
 templates/clips/app/i18n/pt-BR.ts             |   5 +
 templates/clips/app/i18n/zh-CN.ts             |   5 +
 templates/clips/app/i18n/zh-TW.ts             |   5 +
 templates/clips/app/lib/agent-share.test.ts   |  21 +
 templates/clips/app/lib/agent-share.ts        |  16 +
 .../app/routes/_app.r.$recordingId.test.ts    |  37 +-
 .../clips/app/routes/_app.r.$recordingId.tsx  |  74 ++-
 templates/clips/app/routes/_app.tsx           |   6 +-
 ...-09-09-agent-sidebar-fits-below-toolbar.md |   6 +
 ...esktop-switches-stay-clear-in-dark-mode.md |   6 +
 ...09-09-recording-agent-uses-global-panel.md |   6 +
 .../data/pglite.agent-native-pglite.lock      |   2 +-
 templates/clips/desktop/src-tauri/src/util.rs |   8 +-
 templates/clips/desktop/src/app.tsx           |   4 +-
 .../desktop/src/components/MediaDeviceRow.tsx |   8 +-
 .../desktop/src/components/SourceRow.tsx      |   1 +
 .../clips/desktop/src/components/Switch.tsx   |   7 +-
 .../recorder-popover-states.test.tsx          |  27 +-
 .../desktop/src/components/ui/switch.tsx      |  24 +-
 .../desktop/src/hooks/useMediaDevices.test.ts |  42 ++
 .../desktop/src/hooks/useMediaDevices.ts      | 124 ++--
 .../src/lib/popover-window-chrome.test.ts     |  21 +
 templates/clips/desktop/src/styles.css        |  26 +-
 templates/clips/desktop/src/tailwind.css      |   3 +
 42 files changed, 958 insertions(+), 478 deletions(-)
 create mode 100644 templates/clips/app/components/agent-destination-logos.tsx
 delete mode 100644 templates/clips/app/components/player/settings-panel.test.ts
 create mode 100644 templates/clips/app/lib/agent-share.test.ts
 create mode 100644 templates/clips/app/lib/agent-share.ts
 create mode 100644 templates/clips/changelog/2026-09-09-agent-sidebar-fits-below-toolbar.md
 create mode 100644 templates/clips/changelog/2026-09-09-desktop-switches-stay-clear-in-dark-mode.md
 create mode 100644 templates/clips/changelog/2026-09-09-recording-agent-uses-global-panel.md
 create mode 100644 templates/clips/desktop/src/hooks/useMediaDevices.test.ts
 create mode 100644 templates/clips/desktop/src/lib/popover-window-chrome.test.ts

diff --git a/templates/clips/DESIGN.md b/templates/clips/DESIGN.md
index 37c1e102c4a..2076dedacda 100644
--- a/templates/clips/DESIGN.md
+++ b/templates/clips/DESIGN.md
@@ -54,10 +54,11 @@ transcript, agent, insights, and settings.
 
 ## Progressive disclosure
 
-The viewer presents jobs, not inventories. Sharing starts with one header-level
-copy-link action, invitations, and current access. Social destinations and
-embed publishing replace the body as focused secondary views; embed
-configuration and agent context links stay collapsed until requested. The
+The viewer presents jobs, not inventories. Human sharing and agent continuity
+are separate jobs: Share owns invitations, durable access policy, password,
+expiry, social destinations, and embed publishing; a quiet adjacent Send to
+agent action owns ephemeral handoff to an agent destination. Secondary sharing
+destinations replace the Share body as focused views. The
 overflow leads with recording cleanup actions, while maintenance and
 document-generation commands live in named submenus. A generic AI-tools
 launcher does not compete with Share. The editor opens in transcript mode and
@@ -65,9 +66,11 @@ reveals the precision timeline as a peer mode instead of stacking both
 workspaces under the player.
 
 Share is the viewer toolbar's sole labeled primary action and the product-led
-growth entry point. Copy link is the first action inside Share, never a competing
-toolbar button. Edit, download, and overflow use equal compact icon controls
-with accessible names and tooltips; their visual weight must not rival Share.
+growth entry point. Send to agent is an accessible secondary icon action that
+opens one compact handoff menu; it must not become a second sharing/settings dialog. Copy
+link stays inside Share, never as a competing toolbar button. Edit, download,
+and overflow use equal compact icon controls with accessible names and tooltips;
+their visual weight must not rival Share.
 
 Viewer identity uses one avatar grammar everywhere. People use profile images or
 initials; agents use the same circular avatar shape with the assistant mark.
diff --git a/templates/clips/app/components/agent-destination-logos.tsx b/templates/clips/app/components/agent-destination-logos.tsx
new file mode 100644
index 00000000000..5cd19f71430
--- /dev/null
+++ b/templates/clips/app/components/agent-destination-logos.tsx
@@ -0,0 +1,50 @@
+import { IconBrandOpenai } from "@tabler/icons-react";
+
+import { cn } from "@/lib/utils";
+
+interface AgentDestinationLogoProps {
+  className?: string;
+}
+
+export function ClaudeLogo({ className }: AgentDestinationLogoProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn("shrink-0", className)}
+      fill="currentColor"
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z" />
+    </svg>
+  );
+}
+
+export function ClaudeCodeLogo({ className }: AgentDestinationLogoProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn("shrink-0", className)}
+      fill="none"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.2"
+      >
+        <path d="m13.75 13.5 3.5-3.5-3.5-3.5" />
+        <path d="M9 16 11 4" />
+        <path d="m6.25 13.5-3.5-3.5 3.5-3.5" />
+      </g>
+    </svg>
+  );
+}
+
+export function CodexLogo({ className }: AgentDestinationLogoProps) {
+  return (
+    <IconBrandOpenai aria-hidden="true" className={cn("shrink-0", className)} />
+  );
+}
diff --git a/templates/clips/app/components/clips-command-menu.tsx b/templates/clips/app/components/clips-command-menu.tsx
index eddffb2d1d4..fd8a3e28c54 100644
--- a/templates/clips/app/components/clips-command-menu.tsx
+++ b/templates/clips/app/components/clips-command-menu.tsx
@@ -4,7 +4,11 @@ import {
   useCommandMenuShortcut,
 } from "@agent-native/core/client/navigation";
 import { useOrgRole } from "@agent-native/core/client/org";
-import { docsUrl } from "@agent-native/core/shared";
+import {
+  AGENT_SIDEBAR_QUERY_PARAM,
+  AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+  docsUrl,
+} from "@agent-native/core/shared";
 import {
   IconArchive,
   IconCalendar,
@@ -479,7 +483,9 @@ export function ClipsCommandMenu({
             <CommandMenu.Item
               onSelect={() =>
                 void navigate(
-                  withQuery(`/r/${context.recordingId}`, { panel: "agent" }),
+                  withQuery(`/r/${context.recordingId}`, {
+                    [AGENT_SIDEBAR_QUERY_PARAM]: AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+                  }),
                 )
               }
               keywords={["agent", "ask", "recording"]}
diff --git a/templates/clips/app/components/library/library-layout.tsx b/templates/clips/app/components/library/library-layout.tsx
index 0d162e61262..177da05ef1b 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -79,8 +79,6 @@ import { SpaceDialogs } from "./space-dialogs";
 
 interface LibraryLayoutProps {
   children: ReactNode;
-  /** Disable the workspace Agent rail when a route embeds Agent in its own panel. */
-  showAgentSidebar?: boolean;
 }
 
 const SIDEBAR_COLLAPSED_STORAGE_KEY = "clips:left-sidebar-collapsed";
@@ -188,10 +186,7 @@ function ExpandedSidebarNavGroup({
   );
 }
 
-export function LibraryLayout({
-  children,
-  showAgentSidebar = true,
-}: LibraryLayoutProps) {
+export function LibraryLayout({ children }: LibraryLayoutProps) {
   const location = useLocation();
   const navigate = useNavigate();
   const t = useT();
@@ -864,34 +859,41 @@ export function LibraryLayout({
               ref={setHeaderSlot}
               className="flex min-w-0 flex-1 items-center gap-3 overflow-hidden"
             />
-            {showAgentSidebar ? (
-              <div className="ms-1 flex items-center border-s border-border ps-2">
-                <ClipsAgentToggleButton />
-              </div>
-            ) : null}
+            <div className="ms-1 flex items-center border-s border-border ps-2">
+              <ClipsAgentToggleButton />
+            </div>
           </header>
         )}
-        <div className="flex min-h-0 flex-1 overflow-hidden [&>.agent-sidebar-shell]:h-full [&>.agent-sidebar-shell]:min-h-0">
-          {showAgentSidebar ? (
-            <AgentSidebar
-              position="right"
-              defaultOpen={false}
-              showCollapseButton={isMobile}
-              emptyStateText={t("navigation.agentEmptyState")}
-              suggestions={[
-                t("navigation.agentSuggestionSummary"),
-                t("navigation.agentSuggestionPricing"),
-                t("navigation.agentSuggestionFiller"),
-              ]}
-              agentPageHref="/settings/agent"
-              scope={recordingScope}
-              browserTabId={getBrowserTabId()}
-            >
-              {pageContent}
-            </AgentSidebar>
-          ) : (
-            pageContent
-          )}
+        <div className="flex min-h-0 flex-1 overflow-hidden [--agent-native-viewport-height:100%]">
+          <AgentSidebar
+            position="right"
+            defaultOpen={false}
+            showCollapseButton={isMobile}
+            emptyStateText={
+              recordingScope
+                ? t("recordingPage.askAboutClip")
+                : t("navigation.agentEmptyState")
+            }
+            suggestions={
+              recordingScope
+                ? [
+                    t("recordingPage.summarizeClip"),
+                    t("recordingPage.findKeyMoments"),
+                    t("recordingPage.listFollowUpActions"),
+                    t("recordingPage.draftQuestions"),
+                  ]
+                : [
+                    t("navigation.agentSuggestionSummary"),
+                    t("navigation.agentSuggestionPricing"),
+                    t("navigation.agentSuggestionFiller"),
+                  ]
+            }
+            agentPageHref="/settings/agent"
+            scope={recordingScope}
+            browserTabId={getBrowserTabId()}
+          >
+            {pageContent}
+          </AgentSidebar>
         </div>
       </div>
 
diff --git a/templates/clips/app/components/player/settings-panel.test.ts b/templates/clips/app/components/player/settings-panel.test.ts
deleted file mode 100644
index f324670db2c..00000000000
--- a/templates/clips/app/components/player/settings-panel.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { generateSecurePassword } from "./share-dialog";
-
-describe("generateSecurePassword", () => {
-  it("generates a strong URL-safe password without ambiguous characters", () => {
-    const passwords = new Set(
-      Array.from({ length: 20 }, () => generateSecurePassword()),
-    );
-
-    expect(passwords.size).toBe(20);
-    for (const password of passwords) {
-      expect(password).toHaveLength(20);
-      expect(password).toMatch(
-        /^[ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789._~-]+$/,
-      );
-    }
-  });
-});
diff --git a/templates/clips/app/components/player/share-dialog.test.ts b/templates/clips/app/components/player/share-dialog.test.ts
index 1e93001bd40..137eddc8b31 100644
--- a/templates/clips/app/components/player/share-dialog.test.ts
+++ b/templates/clips/app/components/player/share-dialog.test.ts
@@ -18,46 +18,59 @@ describe("recording share popover", () => {
     expect(videoPlayerSource).toContain(
       "absolute inset-x-0 bottom-0 opacity-100 transition-opacity duration-200",
     );
-    expect(shareDialogSource).toContain("z-[260] w-[400px]");
+    expect(shareDialogSource).toContain("z-[260] w-[360px]");
     expect(shareDialogSource).toContain("flex h-10 items-center");
+    expect(shareDialogSource).toContain(
+      'view !== "main" || reserveCloseButton',
+    );
     expect(shareDialogSource).toContain("h-8 w-full justify-start");
     expect(shareDialogSource).toContain("<ViewerSwitch");
     expect(shareUiSource).toContain("flex h-8 min-w-0 flex-1");
     expect(shareUiSource).toContain('className="size-8 shrink-0"');
   });
 
-  it("does not show the same public URL twice", () => {
+  it("keeps human and agent actions in separate tab panels", () => {
     const shareDialogSource = readSource("./share-dialog.tsx");
 
-    expect(shareDialogSource).toContain('t("shareDialog.shareWithAgents")');
-    // Both links are copy actions, so neither URL is rendered as text.
+    expect(shareDialogSource).toContain('<TabsContent value="people"');
+    expect(shareDialogSource).toContain('<TabsContent value="agents"');
+    expect(shareDialogSource).toContain("<PeopleTab");
+    expect(shareDialogSource).toContain("<AgentTab");
     expect(shareDialogSource).toContain("<CopyButton");
     expect(shareDialogSource).toContain("value={shareUrl}");
-    expect(shareDialogSource).toContain("value={agentCopyValue}");
+    expect(shareDialogSource).toContain("writeClipboardText(agentCopyValue)");
     // Share URLs are never rendered into an input.
     expect(shareDialogSource).not.toContain(
       "value={shareUrl}\n          readOnly",
     );
   });
 
-  it("makes sharing and copy link first-class split actions", () => {
+  it("restores the split Share and Copy link toolbar action", () => {
     const shareDialogSource = readSource("./share-dialog.tsx");
     const shareTriggerSource = readSource("./clips-share-trigger.tsx");
+    const recordingRouteSource = readSource(
+      "../../routes/_app.r.$recordingId.tsx",
+    );
 
     expect(shareDialogSource).toContain("<PageHeaderActionGroup>");
-    expect(shareDialogSource).not.toContain(
-      '<ButtonGroup className="clips-share-trigger',
-    );
     expect(shareDialogSource).toContain("<PopoverAnchor");
     expect(shareDialogSource).toContain("<IconLink");
     expect(shareDialogSource).toContain("<IconCheck");
     expect(shareDialogSource).toContain("copyShareLink");
     expect(shareDialogSource).toContain('link_type: "share"');
+    expect(shareDialogSource).toContain("<TooltipContent");
+    expect(shareDialogSource).not.toContain("PageHeaderSecondaryAction");
+    expect(recordingRouteSource).not.toContain("<RecordingAgentHandoffPopover");
+    expect(recordingRouteSource).toContain("<ShareRecordingPopover");
     expect(shareTriggerSource).toContain("<IconUserPlus");
     expect(shareDialogSource).toContain("<PeopleAccessSection");
     expect(shareDialogSource).toContain("<GeneralAccessSelect");
+    expect(shareDialogSource).toContain('variant="line"');
+    expect(shareDialogSource).toContain('t("shareDialog.people")');
+    expect(shareDialogSource).toContain('t("shareDialog.agents")');
     expect(shareDialogSource).toContain('view === "main"');
     expect(shareDialogSource).toContain("showHeaderCopy");
+    expect(shareDialogSource).not.toContain("showCopyLink");
     expect(shareDialogSource).toContain("value={shareUrl}");
     expect(shareDialogSource).not.toContain('defaultValue="link"');
     expect(shareTriggerSource).toContain("<PageHeaderPrimaryAction asChild>");
@@ -73,6 +86,12 @@ describe("recording share popover", () => {
     expect(shareDialogSource).toContain("<RecordingAccessControls");
     expect(shareDialogSource).toContain('id="share-password-required"');
     expect(shareDialogSource).toContain('type="datetime-local"');
+    expect(shareDialogSource).not.toContain(
+      't("playerSettings.generatePassword")',
+    );
+    expect(shareDialogSource).toMatch(
+      /<Label[\s\S]*htmlFor="share-password-required"[\s\S]*<ViewerSwitch[\s\S]*id="share-password-required"/,
+    );
     expect(settingsPanelSource).not.toContain('t("playerSettings.privacy")');
     expect(settingsPanelSource).not.toContain(
       'useActionMutation("set-resource-visibility"',
@@ -100,18 +119,58 @@ describe("recording share popover", () => {
     );
   });
 
-  it("progressively discloses embed settings and agent sharing", () => {
+  it("keeps agent destinations in the Agents tab", () => {
     const shareDialogSource = readSource("./share-dialog.tsx");
+    const logoSource = readSource("../agent-destination-logos.tsx");
 
     expect(shareDialogSource).toContain('setView("social")');
     expect(shareDialogSource).toContain('setView("embed")');
     expect(shareDialogSource).toContain("<ShareOptionRow");
     expect(shareDialogSource).toContain("<SocialTab");
     expect(shareDialogSource).toContain("customizeOpen");
-    expect(shareDialogSource).toContain("agentShareOpen");
+    expect(shareDialogSource).toContain('openAgentDestination("claude")');
+    expect(shareDialogSource).toContain('openAgentDestination("claude-code")');
+    expect(shareDialogSource).toContain('openAgentDestination("codex")');
+    expect(shareDialogSource).toContain("function AgentTab");
+    expect(shareDialogSource).not.toContain("<DropdownMenu");
+    expect(shareDialogSource).not.toContain(
+      "export function RecordingAgentHandoffPopover",
+    );
+    expect(shareDialogSource).toContain("<ClaudeLogo");
+    expect(shareDialogSource).toContain("<ClaudeCodeLogo");
+    expect(shareDialogSource).toContain("<CodexLogo");
+    expect(logoSource).toContain('viewBox="0 0 100 100"');
+    expect(logoSource).toContain("<IconBrandOpenai");
     expect(shareDialogSource).not.toContain("<textarea");
   });
 
+  it("keeps agent handoff out of the People tab", () => {
+    const shareDialogSource = readSource("./share-dialog.tsx");
+    const peopleTabStart = shareDialogSource.indexOf("function PeopleTab");
+    const agentTabStart = shareDialogSource.indexOf("function AgentTab");
+    const accessControlsStart = shareDialogSource.indexOf(
+      "function RecordingAccessControls",
+    );
+    const peopleTabSource = shareDialogSource.slice(
+      peopleTabStart,
+      agentTabStart,
+    );
+    const agentTabSource = shareDialogSource.slice(
+      agentTabStart,
+      accessControlsStart,
+    );
+
+    expect(agentTabSource).toContain('openAgentDestination("claude")');
+    expect(agentTabSource).toContain("writeClipboardText(agentCopyValue)");
+    expect(peopleTabSource).not.toContain("openAgentDestination");
+    expect(peopleTabSource).not.toContain("agentCopyValue");
+    expect(peopleTabSource).toContain("<InvitePeopleField");
+    expect(peopleTabSource).toContain("<PeopleAccessSection");
+    expect(peopleTabSource).toContain(
+      'className="-mx-3 border-t border-border px-1.5 pt-1.5"',
+    );
+  });
+
   it("offers inviting only to managers", () => {
     const shareDialogSource = readSource("./share-dialog.tsx");
 
@@ -167,6 +226,14 @@ describe("recording share popover", () => {
     expect(shareUiSource).toContain("text-success");
   });
 
+  it("identifies a lone owner instead of showing a generic access status", () => {
+    const shareUiSource = readSource("../sharing/share-ui.tsx");
+
+    expect(shareUiSource).toMatch(
+      /meta=\{\s*first && \(open \|\| rest\.length === 0\)[\s\S]*\? firstRole[\s\S]*: t\("shareUi\.canAccess"\)/,
+    );
+  });
+
   it("offers a rich email preview only for public, unprotected clips", () => {
     const shareDialogSource = readSource("./share-dialog.tsx");
 
@@ -184,15 +251,13 @@ describe("recording share popover", () => {
     expect(shareDialogSource).toContain("value={shareUrl}");
   });
 
-  it("only promises agent-link expiry when the link is scoped", () => {
+  it("loads a scoped agent link only when the Agents tab is active", () => {
     const shareDialogSource = readSource("./share-dialog.tsx");
 
     expect(shareDialogSource).toContain("needsScopedAgentContext");
+    expect(shareDialogSource).toContain("if (!active)");
     expect(shareDialogSource).toContain(
-      't("shareDialog.agentTokenDescription")',
-    );
-    expect(shareDialogSource).toContain(
-      't("shareDialog.agentPublicDescription")',
+      "visibility !== null && needsScopedAgentContext",
     );
   });
 
@@ -207,8 +272,8 @@ describe("recording share popover", () => {
     expect(shareDialogSource).toContain(
       'label: t("shareUi.recordingCommenter.label")',
     );
-    expect(shareDialogSource).toContain(
-      'description: t("shareUi.recordingCommenter.description")',
+    expect(shareDialogSource).toMatch(
+      /description: t\(\s*"shareUi\.recordingCommenter\.description",?\s*\)/,
     );
     expect(shareUiSource).toContain(
       "roleCopy?: Partial<Record<Role, RoleCopy>>",
diff --git a/templates/clips/app/components/player/share-dialog.tsx b/templates/clips/app/components/player/share-dialog.tsx
index 00d395a1ec2..45144e12b09 100644
--- a/templates/clips/app/components/player/share-dialog.tsx
+++ b/templates/clips/app/components/player/share-dialog.tsx
@@ -18,9 +18,7 @@ import {
   IconExternalLink,
   IconLink,
   IconMail,
-  IconMessage,
   IconPhoto,
-  IconRefresh,
   IconShare3,
 } from "@tabler/icons-react";
 import {
@@ -33,6 +31,11 @@ import {
 } from "react";
 import { toast } from "sonner";
 
+import {
+  ClaudeCodeLogo,
+  ClaudeLogo,
+  CodexLogo,
+} from "@/components/agent-destination-logos";
 import {
   PageHeaderActionGroup,
   PageHeaderPrimaryAction,
@@ -64,7 +67,7 @@ import {
   PopoverTrigger,
   PopoverContent,
 } from "@/components/ui/popover";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Tooltip,
   TooltipContent,
@@ -76,6 +79,10 @@ import { buildAgentApiUrls } from "../../../shared/agent-context";
 import { buildEmailPreviewMarkup } from "../../../shared/email-preview";
 import { withShareAttribution } from "../../../shared/share-attribution";
 import { preferredThumbnailVariant } from "../../../shared/share-meta";
+import {
+  buildAgentShareDeepLink,
+  type AgentShareDestination,
+} from "../../lib/agent-share";
 import { buildSocialShareUrl } from "../../lib/social-share";
 import { ViewerSwitch } from "./viewer-controls";
 
@@ -216,7 +223,7 @@ export function ShareRecordingPopover({
       <PopoverContent
         align="end"
         {...nestedLayerDismissGuards()}
-        className="z-[260] w-[400px] max-w-[calc(100vw-1rem)] overflow-hidden border-border p-0"
+        className="z-[260] w-[360px] max-w-[calc(100vw-1rem)] overflow-hidden border-border p-0"
       >
         <ShareRecordingContent
           recordingId={recordingId}
@@ -259,7 +266,7 @@ export function ShareRecordingDialog({
   const t = useT();
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[calc(100vw-2rem)] overflow-hidden border-border p-0 sm:max-w-[400px]">
+      <DialogContent className="w-[calc(100vw-2rem)] overflow-hidden border-border p-0 sm:max-w-[360px]">
         <DialogTitle className="sr-only">
           {recordingTitle
             ? t("shareDialog.sharePlainTitle", { title: recordingTitle })
@@ -314,6 +321,7 @@ function ShareRecordingContent({
 }) {
   const t = useT();
   const [view, setView] = useState<"main" | "social" | "embed">("main");
+  const [shareMode, setShareMode] = useState<"people" | "agents">("people");
   const [passwordProtected, setPasswordProtected] = useState(
     Boolean(hasPassword),
   );
@@ -326,6 +334,11 @@ function ShareRecordingContent({
   useEffect(() => {
     setCurrentExpiry(expiresAt ?? null);
   }, [expiresAt]);
+
+  useEffect(() => {
+    setShareMode("people");
+  }, [recordingId]);
+
   const sharesQuery = useActionQuery<SharesResponse>(
     "list-resource-shares",
     { resourceType: "recording", resourceId: recordingId },
@@ -378,65 +391,109 @@ function ShareRecordingContent({
       : view === "embed"
         ? t("shareDialog.embed")
         : t("shareDialog.shareRecording");
+  const peopleTab = (
+    <PeopleTab
+      recordingId={recordingId}
+      sharesQuery={sharesQuery}
+      visibility={visibility}
+      visibilityPending={visibilityPending}
+      onVisibilityChange={setResourceVisibility}
+      canManage={canManage}
+      hasPassword={passwordProtected}
+      expiresAt={currentExpiry}
+      onPasswordChange={setPasswordProtected}
+      onExpiryChange={setCurrentExpiry}
+      canViewShares={canViewShares}
+      viewerReshareOnly={viewerReshareOnly}
+      canEmbed={canEmbed}
+      onOpenSocial={() => setView("social")}
+      onOpenEmbed={() => setView("embed")}
+    />
+  );
 
   return (
     <div className="min-w-0">
-      <div
-        className={cn(
-          "flex h-10 items-center gap-2 border-b border-border px-3",
-          reserveCloseButton && "pe-10",
-        )}
-      >
-        {view === "main" ? (
-          <span className="min-w-0 flex-1 truncate text-sm font-semibold">
-            {viewTitle}
-          </span>
-        ) : (
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className="-ms-1 h-7 min-w-0 gap-1.5 px-1.5"
-            onClick={() => setView("main")}
-          >
-            <IconArrowLeft className="size-3.5 shrink-0" />
-            <span className="truncate font-semibold">{viewTitle}</span>
-          </Button>
-        )}
-        {view === "main" && showHeaderCopy ? (
-          <CopyButton
-            value={shareUrl}
-            disabled={visibilityPending || !sharesLoaded}
-            variant="ghost"
-            className="h-7 shrink-0 px-2 text-xs text-primary hover:text-primary"
-            resourceType="recording"
-            resourceId={recordingId}
-            linkType="share"
-          >
-            {t("shareUi.copyLink")}
-          </CopyButton>
-        ) : null}
-      </div>
+      {view !== "main" || reserveCloseButton ? (
+        <div
+          className={cn(
+            "flex h-10 items-center gap-2 border-b border-border px-3",
+            reserveCloseButton && "pe-10",
+          )}
+        >
+          {view === "main" ? (
+            <span className="min-w-0 flex-1 truncate text-sm font-semibold">
+              {viewTitle}
+            </span>
+          ) : (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="-ms-1 h-7 min-w-0 gap-1.5 px-1.5"
+              onClick={() => setView("main")}
+            >
+              <IconArrowLeft className="size-3.5 shrink-0" />
+              <span className="truncate font-semibold">{viewTitle}</span>
+            </Button>
+          )}
+          {view === "main" && showHeaderCopy ? (
+            <CopyButton
+              value={shareUrl}
+              disabled={visibilityPending || !sharesLoaded}
+              variant="ghost"
+              className="h-7 shrink-0 px-2 text-xs text-primary hover:text-primary"
+              resourceType="recording"
+              resourceId={recordingId}
+              linkType="share"
+            >
+              {t("shareUi.copyLink")}
+            </CopyButton>
+          ) : null}
+        </div>
+      ) : null}
 
       <div className="px-3 py-2">
         {view === "main" ? (
-          <LinkTab
-            recordingId={recordingId}
-            sharesQuery={sharesQuery}
-            visibility={visibility}
-            visibilityPending={visibilityPending}
-            onVisibilityChange={setResourceVisibility}
-            canManage={canManage}
-            hasPassword={passwordProtected}
-            expiresAt={currentExpiry}
-            onPasswordChange={setPasswordProtected}
-            onExpiryChange={setCurrentExpiry}
-            canViewShares={canViewShares}
-            viewerReshareOnly={viewerReshareOnly}
-            canEmbed={canEmbed}
-            onOpenSocial={() => setView("social")}
-            onOpenEmbed={() => setView("embed")}
-          />
+          viewerReshareOnly ? (
+            peopleTab
+          ) : (
+            <Tabs
+              value={shareMode}
+              onValueChange={(value) =>
+                setShareMode(value as "people" | "agents")
+              }
+              className="gap-3"
+            >
+              <TabsList
+                variant="line"
+                className="h-8 w-full justify-start gap-1 rounded-none px-0 py-0"
+              >
+                <TabsTrigger
+                  value="people"
+                  className="h-8 min-w-0 flex-none rounded-none px-2 py-0 text-sm data-[state=active]:after:bottom-0 data-[state=active]:after:inset-x-2"
+                >
+                  {t("shareDialog.people")}
+                </TabsTrigger>
+                <TabsTrigger
+                  value="agents"
+                  className="h-8 min-w-0 flex-none rounded-none px-2 py-0 text-sm data-[state=active]:after:bottom-0 data-[state=active]:after:inset-x-2"
+                >
+                  {t("shareDialog.agents")}
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="people" className="m-0">
+                {peopleTab}
+              </TabsContent>
+              <TabsContent value="agents" className="m-0">
+                <AgentTab
+                  recordingId={recordingId}
+                  visibility={visibility}
+                  hasPassword={passwordProtected}
+                  active={shareMode === "agents"}
+                />
+              </TabsContent>
+            </Tabs>
+          )
         ) : view === "social" ? (
           <SocialTab
             shareUrl={shareUrl}
@@ -488,7 +545,7 @@ function ShareOptionRow({
 // Primary view — invite, access, and progressively disclosed destinations
 // ---------------------------------------------------------------------------
 
-function LinkTab({
+function PeopleTab({
   recordingId,
   sharesQuery,
   visibility,
@@ -525,8 +582,131 @@ function LinkTab({
   onOpenEmbed: () => void;
 }) {
   const t = useT();
-  const isPublic = visibility === "public";
   const sharesLoaded = visibility !== null;
+
+  if (viewerReshareOnly) {
+    return (
+      <div className="-mx-1.5 flex flex-col">
+        <ShareOptionRow
+          icon={<IconShare3 className="size-3.5" />}
+          label={t("shareDialog.social")}
+          onClick={onOpenSocial}
+        />
+        {canEmbed ? (
+          <ShareOptionRow
+            icon={<IconExternalLink className="size-3.5" />}
+            label={t("shareDialog.embed")}
+            onClick={onOpenEmbed}
+          />
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-3">
+        {/* `share-resource` requires owner/admin, so anyone else would only
+              get a rejected submission. */}
+        {canManage ? (
+          <InvitePeopleField
+            resourceType="recording"
+            resourceId={recordingId}
+            resourceUrl={absoluteAppUrl(`/r/${recordingId}`)}
+            sharesQuery={sharesQuery}
+            onError={(err) =>
+              toast.error(
+                err instanceof Error
+                  ? err.message
+                  : t("clipsFinalRaw.inviteFailed"),
+              )
+            }
+          />
+        ) : null}
+
+        {canViewShares ? (
+          visibility ? (
+            <div className="flex flex-col gap-1.5">
+              <ShareSectionLabel>{t("shareUi.whoHasAccess")}</ShareSectionLabel>
+              <div className="flex flex-col gap-0.5">
+                <PeopleAccessSection
+                  resourceType="recording"
+                  resourceId={recordingId}
+                  sharesQuery={sharesQuery}
+                  canManage={canManage}
+                  roleCopy={{
+                    commenter: {
+                      label: t("shareUi.recordingCommenter.label"),
+                      description: t("shareUi.recordingCommenter.description"),
+                    },
+                  }}
+                  onError={(err, action) =>
+                    toast.error(
+                      err instanceof Error
+                        ? err.message
+                        : action === "permission"
+                          ? t("clipsFinalRaw.permissionUpdateFailed")
+                          : t("clipsFinalRaw.removePersonFailed"),
+                    )
+                  }
+                />
+                <GeneralAccessSelect
+                  visibility={visibility}
+                  canManage={canManage}
+                  isPending={visibilityPending}
+                  onChange={onVisibilityChange}
+                />
+                <RecordingAccessControls
+                  recordingId={recordingId}
+                  hasPassword={Boolean(hasPassword)}
+                  expiresAt={expiresAt}
+                  canEdit={canViewShares}
+                  onPasswordChange={onPasswordChange}
+                  onExpiryChange={onExpiryChange}
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-1.5" aria-hidden>
+              <div className="h-3 w-24 animate-pulse rounded bg-muted" />
+              <div className="h-8 w-full animate-pulse rounded bg-muted" />
+              <div className="h-8 w-full animate-pulse rounded bg-muted" />
+            </div>
+          )
+        ) : null}
+      </div>
+
+      <div className="-mx-3 border-t border-border px-1.5 pt-1.5">
+        <ShareOptionRow
+          icon={<IconShare3 className="size-3.5" />}
+          label={t("shareDialog.social")}
+          onClick={onOpenSocial}
+        />
+        {canEmbed ? (
+          <ShareOptionRow
+            icon={<IconExternalLink className="size-3.5" />}
+            label={t("shareDialog.embed")}
+            onClick={onOpenEmbed}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function AgentTab({
+  recordingId,
+  visibility,
+  hasPassword,
+  active,
+}: {
+  recordingId: string;
+  visibility: Visibility | null;
+  hasPassword?: boolean;
+  active: boolean;
+}) {
+  const t = useT();
+  const isPublic = visibility === "public";
   const needsScopedAgentContext = !isPublic || hasPassword !== false;
   const publicAgentContextUrl = useMemo(
     () =>
@@ -542,7 +722,6 @@ function LinkTab({
   const agentLinkRequestIdRef = useRef(0);
   const [agentContextUrl, setAgentContextUrl] = useState("");
   const [agentLinkError, setAgentLinkError] = useState(false);
-  const [agentShareOpen, setAgentShareOpen] = useState(false);
 
   useEffect(() => {
     createAgentLinkAsyncRef.current = createAgentLink.mutateAsync;
@@ -551,7 +730,6 @@ function LinkTab({
   const loadAgentContextUrl = useCallback(async () => {
     const requestId = agentLinkRequestIdRef.current + 1;
     agentLinkRequestIdRef.current = requestId;
-
     setAgentContextUrl("");
     setAgentLinkError(false);
 
@@ -573,32 +751,27 @@ function LinkTab({
   }, [recordingId]);
 
   useEffect(() => {
+    if (!active) {
+      agentLinkRequestIdRef.current += 1;
+      return;
+    }
+
     setAgentContextUrl("");
     setAgentLinkError(false);
-    if (!sharesLoaded || !agentShareOpen) return;
-
-    if (needsScopedAgentContext) {
+    if (visibility !== null && needsScopedAgentContext) {
       void loadAgentContextUrl();
     }
 
     return () => {
       agentLinkRequestIdRef.current += 1;
     };
-  }, [
-    loadAgentContextUrl,
-    needsScopedAgentContext,
-    agentShareOpen,
-    recordingId,
-    sharesLoaded,
-    visibility,
-  ]);
+  }, [active, loadAgentContextUrl, needsScopedAgentContext, visibility]);
 
   const agentLink = isPublic
     ? publicAgentContextUrl || agentContextUrl
     : agentContextUrl;
   const agentShareDisabled =
-    visibilityPending ||
-    !sharesLoaded ||
+    visibility === null ||
     !agentLink ||
     (needsScopedAgentContext &&
       (createAgentLink.isPending || !agentContextUrl));
@@ -606,150 +779,95 @@ function LinkTab({
     ? t("shareDialog.agentPrompt", { agentContextUrl: agentLink })
     : "";
 
-  if (viewerReshareOnly) return null;
+  const openAgentDestination = (destination: AgentShareDestination) => {
+    if (
+      agentShareDisabled ||
+      !agentCopyValue ||
+      typeof window === "undefined"
+    ) {
+      return;
+    }
 
-  return (
-    <div className="space-y-3">
-      {/* `share-resource` requires owner/admin, so anyone else would only get
-          a rejected submission. */}
-      {canManage ? (
-        <InvitePeopleField
-          resourceType="recording"
-          resourceId={recordingId}
-          resourceUrl={absoluteAppUrl(`/r/${recordingId}`)}
-          sharesQuery={sharesQuery}
-          onError={(err) =>
-            toast.error(
-              err instanceof Error
-                ? err.message
-                : t("clipsFinalRaw.inviteFailed"),
-            )
-          }
-        />
-      ) : null}
+    trackEvent("agent_share_opened", {
+      resource_type: "recording",
+      resource_id: recordingId,
+      destination,
+    });
+    window.location.assign(
+      buildAgentShareDeepLink(destination, agentCopyValue),
+    );
+  };
 
-      {canViewShares ? (
-        visibility ? (
-          <div className="space-y-1.5">
-            <ShareSectionLabel>{t("shareUi.whoHasAccess")}</ShareSectionLabel>
-            <div className="flex flex-col gap-0.5">
-              <PeopleAccessSection
-                resourceType="recording"
-                resourceId={recordingId}
-                sharesQuery={sharesQuery}
-                canManage={canManage}
-                roleCopy={{
-                  commenter: {
-                    label: t("shareUi.recordingCommenter.label"),
-                    description: t("shareUi.recordingCommenter.description"),
-                  },
-                }}
-                onError={(err, action) =>
-                  toast.error(
-                    err instanceof Error
-                      ? err.message
-                      : action === "permission"
-                        ? t("clipsFinalRaw.permissionUpdateFailed")
-                        : t("clipsFinalRaw.removePersonFailed"),
-                  )
-                }
-              />
-              <GeneralAccessSelect
-                visibility={visibility}
-                canManage={canManage}
-                isPending={visibilityPending}
-                onChange={onVisibilityChange}
-              />
-              <RecordingAccessControls
-                recordingId={recordingId}
-                hasPassword={Boolean(hasPassword)}
-                expiresAt={expiresAt}
-                canEdit={canViewShares}
-                onPasswordChange={onPasswordChange}
-                onExpiryChange={onExpiryChange}
-              />
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-1.5" aria-hidden>
-            <div className="h-3 w-24 animate-pulse rounded bg-muted" />
-            <div className="h-8 w-full animate-pulse rounded bg-muted" />
-            <div className="h-8 w-full animate-pulse rounded bg-muted" />
-          </div>
-        )
-      ) : null}
+  const copyAgentPrompt = async () => {
+    if (agentShareDisabled || !agentCopyValue) return;
+    const copied = await writeClipboardText(agentCopyValue);
+    if (copied === false) return;
 
-      <div className="-mx-1.5 border-t border-border pt-1.5">
-        <ShareOptionRow
-          icon={<IconShare3 className="size-3.5" />}
-          label={t("shareDialog.social")}
-          onClick={onOpenSocial}
-        />
-        {canEmbed ? (
-          <ShareOptionRow
-            icon={<IconExternalLink className="size-3.5" />}
-            label={t("shareDialog.embed")}
-            onClick={onOpenEmbed}
-          />
-        ) : null}
-      </div>
+    trackEvent("share_link_copied", {
+      resource_type: "recording",
+      resource_id: recordingId,
+      link_type: "agent_context",
+    });
+    toast.success(t("shareUi.copied"));
+  };
 
-      <Collapsible open={agentShareOpen} onOpenChange={setAgentShareOpen}>
-        <CollapsibleTrigger asChild>
-          <Button
-            type="button"
-            variant="ghost"
-            className="h-8 w-full justify-between px-1.5 text-sm font-normal"
-          >
-            <span className="flex min-w-0 items-center gap-2">
-              <IconMessage className="size-3.5 shrink-0 text-muted-foreground" />
-              <span className="truncate">
-                {t("shareDialog.shareWithAgents")}
-              </span>
-            </span>
-            <IconChevronDown
-              className={cn(
-                "size-3.5 text-muted-foreground transition-transform",
-                agentShareOpen && "rotate-180",
-              )}
-            />
-          </Button>
-        </CollapsibleTrigger>
-        <CollapsibleContent className="px-1.5 pb-1 pt-1.5">
-          <div className="flex items-center justify-between gap-4">
-            <p className="text-xs text-muted-foreground">
-              {/* A public, unprotected clip hands agents its permanent public
-                  context URL; everything else gets a short-lived scoped token. */}
-              {needsScopedAgentContext
-                ? t("shareDialog.agentTokenDescription")
-                : t("shareDialog.agentPublicDescription")}
-            </p>
-            {agentLinkError ? (
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="shrink-0"
-                onClick={() => void loadAgentContextUrl()}
-                disabled={createAgentLink.isPending}
-              >
-                {t("shareDialog.retryAgentLink")}
-              </Button>
-            ) : (
-              <CopyButton
-                value={agentCopyValue}
-                disabled={agentShareDisabled}
-                className="shrink-0"
-                resourceType="recording"
-                resourceId={recordingId}
-                linkType="agent_context"
-              >
-                {t("shareUi.copy")}
-              </CopyButton>
-            )}
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
+  if (agentLinkError) {
+    return (
+      <Button
+        type="button"
+        variant="ghost"
+        className="h-9 w-full justify-start px-1.5 text-sm font-normal"
+        onClick={() => void loadAgentContextUrl()}
+        disabled={createAgentLink.isPending}
+      >
+        {t("shareDialog.retryAgentLink")}
+      </Button>
+    );
+  }
+
+  return (
+    <div className="-mx-1.5 flex flex-col gap-0.5">
+      <Button
+        type="button"
+        variant="ghost"
+        className="h-9 w-full justify-start gap-2 px-1.5 text-sm font-normal"
+        disabled={agentShareDisabled}
+        onClick={() => void copyAgentPrompt()}
+      >
+        <IconLink className="size-4 text-muted-foreground" />
+        {t("shareDialog.copyAgentPrompt")}
+      </Button>
+      <div className="my-1 border-t border-border" />
+      <Button
+        type="button"
+        variant="ghost"
+        className="h-9 w-full justify-start gap-2 px-1.5 text-sm font-normal"
+        disabled={agentShareDisabled}
+        onClick={() => openAgentDestination("claude")}
+      >
+        <ClaudeLogo className="size-4 text-muted-foreground" />
+        {t("shareDialog.openInClaude")}
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        className="h-9 w-full justify-start gap-2 px-1.5 text-sm font-normal"
+        disabled={agentShareDisabled}
+        onClick={() => openAgentDestination("claude-code")}
+      >
+        <ClaudeCodeLogo className="size-4 text-muted-foreground" />
+        {t("shareDialog.openInClaudeCode")}
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        className="h-9 w-full justify-start gap-2 px-1.5 text-sm font-normal"
+        disabled={agentShareDisabled}
+        onClick={() => openAgentDestination("codex")}
+      >
+        <CodexLogo className="size-4 text-muted-foreground" />
+        {t("shareDialog.openInCodex")}
+      </Button>
     </div>
   );
 }
@@ -799,32 +917,18 @@ function RecordingAccessControls({
     <div className="flex flex-col gap-0.5">
       <div className="rounded-md px-1.5 py-1">
         <div className="flex min-h-8 items-center gap-2">
-          <div className="flex min-w-0 flex-1 items-center gap-2">
-            <ViewerSwitch
-              id="share-password-required"
-              checked={passwordEnabled}
-              disabled={!canEdit || updateRecording.isPending}
-              onCheckedChange={setPasswordRequired}
-            />
-            <Label
-              htmlFor="share-password-required"
-              className="cursor-pointer text-sm font-normal"
-            >
-              {t("embedRoute.passwordRequired")}
-            </Label>
-          </div>
-          {passwordEnabled && canEdit ? (
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              className="h-7 shrink-0 gap-1.5 px-2 text-xs"
-              onClick={() => setPassword(generateSecurePassword())}
-            >
-              <IconRefresh className="size-3.5" />
-              {t("playerSettings.generatePassword")}
-            </Button>
-          ) : null}
+          <Label
+            htmlFor="share-password-required"
+            className="min-w-0 flex-1 cursor-pointer text-sm font-normal"
+          >
+            {t("embedRoute.passwordRequired")}
+          </Label>
+          <ViewerSwitch
+            id="share-password-required"
+            checked={passwordEnabled}
+            disabled={!canEdit || updateRecording.isPending}
+            onCheckedChange={setPasswordRequired}
+          />
         </div>
 
         {passwordEnabled ? (
@@ -957,25 +1061,6 @@ function formatExpiry(iso: string | null): string {
   }).format(date);
 }
 
-export function generateSecurePassword(length = 20): string {
-  const alphabet =
-    "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789-._~";
-  const limit = Math.floor(256 / alphabet.length) * alphabet.length;
-  const bytes = new Uint8Array(length * 2);
-  let password = "";
-
-  while (password.length < length) {
-    crypto.getRandomValues(bytes);
-    for (const byte of bytes) {
-      if (byte >= limit) continue;
-      password += alphabet[byte % alphabet.length];
-      if (password.length === length) break;
-    }
-  }
-
-  return password;
-}
-
 // ---------------------------------------------------------------------------
 // Social tab — destination-first share intents, no provider account required
 // ---------------------------------------------------------------------------
diff --git a/templates/clips/app/components/sharing/share-ui.tsx b/templates/clips/app/components/sharing/share-ui.tsx
index a254da54a0f..8ab2685fcb0 100644
--- a/templates/clips/app/components/sharing/share-ui.tsx
+++ b/templates/clips/app/components/sharing/share-ui.tsx
@@ -630,7 +630,11 @@ export function PeopleAccessSection({
             ? first
             : t("shareUi.othersCount", { count: rest.length, email: first })
       }
-      meta={open && first ? firstRole : t("shareUi.canAccess")}
+      meta={
+        first && (open || rest.length === 0)
+          ? firstRole
+          : t("shareUi.canAccess")
+      }
       disabled={sharesQuery.isLoading}
       open={open}
       onOpenChange={setOpen}
diff --git a/templates/clips/app/hooks/use-navigation-state.test.ts b/templates/clips/app/hooks/use-navigation-state.test.ts
index 382c837afd3..bf7f086a85b 100644
--- a/templates/clips/app/hooks/use-navigation-state.test.ts
+++ b/templates/clips/app/hooks/use-navigation-state.test.ts
@@ -30,7 +30,12 @@ describe("Clips shared navigation", () => {
         panel: "agent",
         atMs: 12_345.6,
       }),
-    ).toBe("/r/recording-1?panel=agent&at=12.346");
+    ).toBe("/r/recording-1?agentSidebar=open&at=12.346");
+    expect(stateFromLocation("/r/recording-1", "?agentSidebar=open")).toEqual({
+      view: "recording",
+      recordingId: "recording-1",
+      panel: "agent",
+    });
   });
 
   it("round-trips encoded resource IDs", () => {
diff --git a/templates/clips/app/hooks/use-navigation-state.ts b/templates/clips/app/hooks/use-navigation-state.ts
index da5ad03c56b..035936a3343 100644
--- a/templates/clips/app/hooks/use-navigation-state.ts
+++ b/templates/clips/app/hooks/use-navigation-state.ts
@@ -1,5 +1,9 @@
 import { getBrowserTabId } from "@agent-native/core/client/hooks";
 import { useAgentRouteState } from "@agent-native/core/client/navigation";
+import {
+  AGENT_SIDEBAR_QUERY_PARAM,
+  AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+} from "@agent-native/core/shared";
 
 import { parseTimeParam } from "@/lib/time-param";
 
@@ -99,18 +103,22 @@ export function stateFromLocation(
     const recordingId = decodePathSegment(recordingMatch[1]);
     if (!recordingId) return { view: "library" };
     const panel = params.get("panel");
+    const agentSidebarOpen =
+      params.get(AGENT_SIDEBAR_QUERY_PARAM) === AGENT_SIDEBAR_QUERY_VALUE_OPEN;
     const atParam = params.get("at") ?? params.get("t");
     const atMs = atParam == null ? undefined : parseTimeParam(atParam);
     return {
       view: panel === "insights" ? "insights" : "recording",
       recordingId,
-      ...(panel === "comments" ||
-      panel === "transcript" ||
-      panel === "agent" ||
-      panel === "insights" ||
-      panel === "settings"
-        ? { panel }
-        : {}),
+      ...(agentSidebarOpen
+        ? { panel: "agent" as const }
+        : panel === "comments" ||
+            panel === "transcript" ||
+            panel === "agent" ||
+            panel === "insights" ||
+            panel === "settings"
+          ? { panel }
+          : {}),
       ...(Number.isFinite(atMs) && atMs! >= 0 ? { atMs } : {}),
       ...(searchTerm ? { search: searchTerm } : {}),
     };
@@ -208,7 +216,14 @@ export function pathFromCommand(cmd: NavigateCommand): string {
     case "recording":
       if (!cmd.recordingId) return "/library";
       const recordingParams = new URLSearchParams();
-      if (cmd.panel) recordingParams.set("panel", cmd.panel);
+      if (cmd.panel === "agent") {
+        recordingParams.set(
+          AGENT_SIDEBAR_QUERY_PARAM,
+          AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+        );
+      } else if (cmd.panel) {
+        recordingParams.set("panel", cmd.panel);
+      }
       if (typeof cmd.atMs === "number" && Number.isFinite(cmd.atMs)) {
         // Viewer routes use the public `at` query parameter in seconds while
         // navigation commands expose timestamps in milliseconds.
diff --git a/templates/clips/app/i18n/ar-SA.ts b/templates/clips/app/i18n/ar-SA.ts
index f7dd11583e4..27e8e9d8237 100644
--- a/templates/clips/app/i18n/ar-SA.ts
+++ b/templates/clips/app/i18n/ar-SA.ts
@@ -506,6 +506,11 @@ const messages = {
     shareLink: "رابط المشاركة",
     shareWithHumans: "مشاركة مع الأشخاص",
     shareWithAgents: "شارك مع الوكلاء",
+    people: "الأشخاص",
+    agents: "الوكلاء",
+    openInClaude: "فتح في Claude",
+    openInClaudeCode: "فتح في Claude Code",
+    openInCodex: "فتح في Codex",
     copyAgentPrompt: "نسخ مطالبة الوكيل",
     agentPrompt:
       "اجلب عنوان URL لسياق وكيل Clips هذا: {{agentContextUrl}}. استخدم transcript.segments للسياق المنطوق، واجلب recommendedFrames أو عناوين URL الخاصة بواجهة API للإطارات لرؤية الشاشة، وتحقق من browserDiagnostics إن وجدت لسجلات وحدة التحكم المنقحة وبيانات طلبات fetch/XHR الوصفية.",
diff --git a/templates/clips/app/i18n/de-DE.ts b/templates/clips/app/i18n/de-DE.ts
index db4d7f1140c..c3a6ced4730 100644
--- a/templates/clips/app/i18n/de-DE.ts
+++ b/templates/clips/app/i18n/de-DE.ts
@@ -523,6 +523,11 @@ const messages = {
     shareLink: "Teillink",
     shareWithHumans: "Mit Menschen teilen",
     shareWithAgents: "Mit Agenten teilen",
+    people: "Personen",
+    agents: "Agenten",
+    openInClaude: "In Claude öffnen",
+    openInClaudeCode: "In Claude Code öffnen",
+    openInCodex: "In Codex öffnen",
     copyAgentPrompt: "Agent-Prompt kopieren",
     agentPrompt:
       "Rufe diese Clips-Agent-Kontext-URL ab: {{agentContextUrl}}. Verwende transcript.segments fuer den gesprochenen Kontext, rufe recommendedFrames oder die Frame-API-URLs ab, um den Bildschirm zu sehen, und pruefe browserDiagnostics, falls vorhanden, fuer redigierte Konsolenprotokolle und fetch/XHR-Anfragemetadaten.",
diff --git a/templates/clips/app/i18n/en-US.ts b/templates/clips/app/i18n/en-US.ts
index 84d0e6bc486..31acde22086 100644
--- a/templates/clips/app/i18n/en-US.ts
+++ b/templates/clips/app/i18n/en-US.ts
@@ -503,6 +503,11 @@ const messages = {
     shareLink: "Share link",
     shareWithHumans: "Share with humans",
     shareWithAgents: "Share with agents",
+    people: "People",
+    agents: "Agents",
+    openInClaude: "Open in Claude",
+    openInClaudeCode: "Open in Claude Code",
+    openInCodex: "Open in Codex",
     copyAgentPrompt: "Copy agent prompt",
     agentPrompt:
       "Fetch this Clips agent context URL: {{agentContextUrl}}. Use transcript.segments for spoken context, fetch recommendedFrames or the frame API URLs to see the screen, and check browserDiagnostics if present for redacted console logs and fetch/XHR request metadata.",
diff --git a/templates/clips/app/i18n/es-ES.ts b/templates/clips/app/i18n/es-ES.ts
index 5655415f109..28a3f0faed7 100644
--- a/templates/clips/app/i18n/es-ES.ts
+++ b/templates/clips/app/i18n/es-ES.ts
@@ -518,6 +518,11 @@ const messages = {
     shareLink: "Enlace para compartir",
     shareWithHumans: "Compartir con personas",
     shareWithAgents: "Compartir con agentes",
+    people: "Personas",
+    agents: "Agentes",
+    openInClaude: "Abrir en Claude",
+    openInClaudeCode: "Abrir en Claude Code",
+    openInCodex: "Abrir en Codex",
     copyAgentPrompt: "Copiar indicación para agente",
     agentPrompt:
       "Obtén esta URL de contexto para agentes de Clips: {{agentContextUrl}}. Usa transcript.segments para el contexto hablado, obtén recommendedFrames o las URLs de la API de fotogramas para ver la pantalla y revisa browserDiagnostics si está presente para ver registros de consola redactados y metadatos de solicitudes fetch/XHR.",
diff --git a/templates/clips/app/i18n/fr-FR.ts b/templates/clips/app/i18n/fr-FR.ts
index 120df44c0aa..666da594ded 100644
--- a/templates/clips/app/i18n/fr-FR.ts
+++ b/templates/clips/app/i18n/fr-FR.ts
@@ -517,6 +517,11 @@ const messages = {
     shareLink: "Lien de partage",
     shareWithHumans: "Partager avec des personnes",
     shareWithAgents: "Partager avec les agents",
+    people: "Personnes",
+    agents: "Agents",
+    openInClaude: "Ouvrir dans Claude",
+    openInClaudeCode: "Ouvrir dans Claude Code",
+    openInCodex: "Ouvrir dans Codex",
     copyAgentPrompt: "Copier le prompt pour agent",
     agentPrompt:
       "Récupère cette URL de contexte Clips pour agent : {{agentContextUrl}}. Utilise transcript.segments pour le contexte parlé, récupère recommendedFrames ou les URLs de l'API d'images pour voir l'écran, et consulte browserDiagnostics s'il est présent pour les journaux de console expurgés et les métadonnées de requêtes fetch/XHR.",
diff --git a/templates/clips/app/i18n/hi-IN.ts b/templates/clips/app/i18n/hi-IN.ts
index 3dc7c0a25e6..9858c0966b4 100644
--- a/templates/clips/app/i18n/hi-IN.ts
+++ b/templates/clips/app/i18n/hi-IN.ts
@@ -500,6 +500,11 @@ const messages = {
     shareLink: "शेयर लिंक",
     shareWithHumans: "लोगों के साथ साझा करें",
     shareWithAgents: "एजेंटों के साथ साझा करें",
+    people: "लोग",
+    agents: "एजेंट",
+    openInClaude: "Claude में खोलें",
+    openInClaudeCode: "Claude Code में खोलें",
+    openInCodex: "Codex में खोलें",
     copyAgentPrompt: "एजेंट प्रॉम्प्ट कॉपी करें",
     agentPrompt:
       "यह Clips एजेंट संदर्भ URL प्राप्त करें: {{agentContextUrl}}। बोले गए संदर्भ के लिए transcript.segments का उपयोग करें, स्क्रीन देखने के लिए recommendedFrames या फ्रेम API URL प्राप्त करें, और यदि browserDiagnostics मौजूद हो तो संशोधित कंसोल लॉग और fetch/XHR अनुरोध मेटाडेटा जांचें।",
diff --git a/templates/clips/app/i18n/ja-JP.ts b/templates/clips/app/i18n/ja-JP.ts
index 814721bf317..c4160857e4f 100644
--- a/templates/clips/app/i18n/ja-JP.ts
+++ b/templates/clips/app/i18n/ja-JP.ts
@@ -515,6 +515,11 @@ const messages = {
     shareLink: "共有リンク",
     shareWithHumans: "人と共有する",
     shareWithAgents: "エージェントと共有する",
+    people: "ユーザー",
+    agents: "エージェント",
+    openInClaude: "Claude で開く",
+    openInClaudeCode: "Claude Code で開く",
+    openInCodex: "Codex で開く",
     copyAgentPrompt: "エージェント用プロンプトをコピー",
     agentPrompt:
       "この Clips エージェントコンテキスト URL を取得してください: {{agentContextUrl}}。音声の文脈には transcript.segments を使い、画面を見るために recommendedFrames またはフレーム API URL を取得し、browserDiagnostics がある場合は、編集済みのコンソールログと fetch/XHR リクエストのメタデータを確認してください。",
diff --git a/templates/clips/app/i18n/ko-KR.ts b/templates/clips/app/i18n/ko-KR.ts
index 0b581b04fff..a82bf2f8ca2 100644
--- a/templates/clips/app/i18n/ko-KR.ts
+++ b/templates/clips/app/i18n/ko-KR.ts
@@ -506,6 +506,11 @@ const messages = {
     shareLink: "공유 링크",
     shareWithHumans: "사람과 공유",
     shareWithAgents: "상담원과 공유",
+    people: "사용자",
+    agents: "에이전트",
+    openInClaude: "Claude에서 열기",
+    openInClaudeCode: "Claude Code에서 열기",
+    openInCodex: "Codex에서 열기",
     copyAgentPrompt: "에이전트 프롬프트 복사",
     agentPrompt:
       "이 Clips 에이전트 컨텍스트 URL을 가져오세요: {{agentContextUrl}}. 말한 내용의 맥락은 transcript.segments를 사용하고, 화면을 보기 위해 recommendedFrames 또는 프레임 API URL을 가져오며, browserDiagnostics가 있으면 수정된 콘솔 로그와 fetch/XHR 요청 메타데이터를 확인하세요.",
diff --git a/templates/clips/app/i18n/pt-BR.ts b/templates/clips/app/i18n/pt-BR.ts
index 50339d78f36..e974386d5f8 100644
--- a/templates/clips/app/i18n/pt-BR.ts
+++ b/templates/clips/app/i18n/pt-BR.ts
@@ -514,6 +514,11 @@ const messages = {
     shareLink: "Link de compartilhamento",
     shareWithHumans: "Compartilhe com pessoas",
     shareWithAgents: "Compartilhe com agentes",
+    people: "Pessoas",
+    agents: "Agentes",
+    openInClaude: "Abrir no Claude",
+    openInClaudeCode: "Abrir no Claude Code",
+    openInCodex: "Abrir no Codex",
     copyAgentPrompt: "Copiar prompt para agente",
     agentPrompt:
       "Busque esta URL de contexto para agentes do Clips: {{agentContextUrl}}. Use transcript.segments para o contexto falado, busque recommendedFrames ou as URLs da API de quadros para ver a tela e confira browserDiagnostics, se presente, para logs de console redigidos e metadados de solicitações fetch/XHR.",
diff --git a/templates/clips/app/i18n/zh-CN.ts b/templates/clips/app/i18n/zh-CN.ts
index 6e057ff51bb..3f308fb4ef5 100644
--- a/templates/clips/app/i18n/zh-CN.ts
+++ b/templates/clips/app/i18n/zh-CN.ts
@@ -482,6 +482,11 @@ const messages = {
     shareLink: "分享链接",
     shareWithHumans: "与人分享",
     shareWithAgents: "与代理商分享",
+    people: "人员",
+    agents: "智能体",
+    openInClaude: "在 Claude 中打开",
+    openInClaudeCode: "在 Claude Code 中打开",
+    openInCodex: "在 Codex 中打开",
     copyAgentPrompt: "复制代理提示",
     agentPrompt:
       "获取这个 Clips 代理上下文 URL：{{agentContextUrl}}。使用 transcript.segments 读取语音上下文，获取 recommendedFrames 或帧 API URL 来查看屏幕，并在 browserDiagnostics 存在时检查经过脱敏的控制台日志和 fetch/XHR 请求元数据。",
diff --git a/templates/clips/app/i18n/zh-TW.ts b/templates/clips/app/i18n/zh-TW.ts
index 31a25232081..4c154a7f7c9 100644
--- a/templates/clips/app/i18n/zh-TW.ts
+++ b/templates/clips/app/i18n/zh-TW.ts
@@ -482,6 +482,11 @@ const messages = {
     shareLink: "分享連結",
     shareWithHumans: "與人分享",
     shareWithAgents: "與 Agent 分享",
+    people: "使用者",
+    agents: "Agent",
+    openInClaude: "在 Claude 中開啟",
+    openInClaudeCode: "在 Claude Code 中開啟",
+    openInCodex: "在 Codex 中開啟",
     copyAgentPrompt: "複製 Agent 提示",
     agentPrompt:
       "取得這個 Clips Agent 脈絡 URL：{{agentContextUrl}}。使用 transcript.segments 讀取語音脈絡，取得 recommendedFrames 或影格 API URL 來查看螢幕，並在 browserDiagnostics 存在時檢查已遮蔽的主控台記錄和 fetch/XHR 請求中繼資料。",
diff --git a/templates/clips/app/lib/agent-share.test.ts b/templates/clips/app/lib/agent-share.test.ts
new file mode 100644
index 00000000000..579c9235977
--- /dev/null
+++ b/templates/clips/app/lib/agent-share.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+
+import { buildAgentShareDeepLink } from "./agent-share";
+
+describe("agent share deep links", () => {
+  const prompt =
+    "Review this clip: https://clips.example/api/recordings/abc/agent-context?token=a&b=2";
+
+  it.each([
+    ["claude", "claude://claude.ai/new"],
+    ["claude-code", "claude://code/new"],
+    ["codex", "codex://threads/new"],
+  ] as const)("prefills the %s composer", (destination, expectedBaseUrl) => {
+    const deepLink = new URL(buildAgentShareDeepLink(destination, prompt));
+
+    expect(`${deepLink.protocol}//${deepLink.host}${deepLink.pathname}`).toBe(
+      expectedBaseUrl,
+    );
+    expect(deepLink.searchParams.get("q")).toBe(prompt);
+  });
+});
diff --git a/templates/clips/app/lib/agent-share.ts b/templates/clips/app/lib/agent-share.ts
new file mode 100644
index 00000000000..195349329fd
--- /dev/null
+++ b/templates/clips/app/lib/agent-share.ts
@@ -0,0 +1,16 @@
+export type AgentShareDestination = "claude" | "claude-code" | "codex";
+
+const AGENT_SHARE_DESTINATION_URLS: Record<AgentShareDestination, string> = {
+  claude: "claude://claude.ai/new",
+  "claude-code": "claude://code/new",
+  codex: "codex://threads/new",
+};
+
+export function buildAgentShareDeepLink(
+  destination: AgentShareDestination,
+  prompt: string,
+): string {
+  const url = new URL(AGENT_SHARE_DESTINATION_URLS[destination]);
+  url.searchParams.set("q", prompt);
+  return url.toString();
+}
diff --git a/templates/clips/app/routes/_app.r.$recordingId.test.ts b/templates/clips/app/routes/_app.r.$recordingId.test.ts
index d313dcfe83f..f532a949f49 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.test.ts
+++ b/templates/clips/app/routes/_app.r.$recordingId.test.ts
@@ -132,7 +132,7 @@ describe("direct recording route shell cue", () => {
     expect(route).toContain("<ViewerTabsList");
     expect(route).toContain('<ViewerTabsTrigger value="comments">');
     expect(route).toContain('<ViewerTabsTrigger value="transcript">');
-    expect(route).toContain('<ViewerTabsTrigger value="agent">');
+    expect(route).not.toContain('<ViewerTabsTrigger value="agent">');
     expect(route).toContain('<ViewerTabsTrigger value="settings">');
     expect(route).not.toContain("<ToggleGroup");
     expect(route).toContain('value={panel ?? "comments"}');
@@ -143,7 +143,9 @@ describe("direct recording route shell cue", () => {
     expect(route).not.toContain("IconLayoutSidebarRightExpand");
     expect(route).not.toContain("closeSidePanel");
     expect(route).not.toContain("lastToolbarPanelRef");
-    expect(route).toContain("!editing && !isCompactLayout && panel");
+    expect(route).toContain(
+      "!editing && !isCompactLayout && !globalAgentSidebarOpen && panel",
+    );
     const mobilePanelStart = route.indexOf('id="clip-activity-panel"');
     const mobilePanel = route.slice(
       mobilePanelStart,
@@ -206,20 +208,28 @@ describe("direct recording route shell cue", () => {
     expect(viewerControls).not.toContain("hover:bg-muted/50");
   });
 
-  it("embeds Agent in the recording panel without mounting a second rail", () => {
+  it("uses the global Agent sidebar for recording context", () => {
     const route = readRoute("_app.r.$recordingId.tsx");
+    const appRoute = readRoute("_app.tsx");
     const layout = readFileSync(
       resolve(process.cwd(), "app/components/library/library-layout.tsx"),
       "utf8",
     );
+    const commandMenu = readFileSync(
+      resolve(process.cwd(), "app/components/clips-command-menu.tsx"),
+      "utf8",
+    );
 
-    expect(route).toContain('<ViewerTabsTrigger value="agent">');
-    expect(route).toContain('value="agent"');
-    expect(route).toContain("<AgentPanel");
-    expect(route).toContain('scope={{ type: "recording", id: recording.id }}');
+    expect(route).not.toContain('<ViewerTabsTrigger value="agent">');
+    expect(route).not.toContain("<AgentPanel");
+    expect(route).toContain("requestAgentSidebarOpen");
+    expect(route).toContain("SIDEBAR_STATE_CHANGE_EVENT");
+    expect(route).toContain("useGlobalAgentSidebarOpen");
+    expect(route).toContain("!globalAgentSidebarOpen");
     expect(route).toContain("openAgentPanel");
-    expect(route).not.toContain("openGlobalAgentPanel");
     expect(route).not.toContain("<LibraryLayout");
+    expect(appRoute).toContain("<LibraryLayout>");
+    expect(appRoute).not.toContain("showAgentSidebar");
     expect(layout).toContain("<AgentSidebar");
     expect(layout).toContain(
       'className="agent-layout-main-surface flex min-h-0 min-w-0 flex-1 flex-col"',
@@ -229,9 +239,14 @@ describe("direct recording route shell cue", () => {
     expect(layout).toContain("showWhenOpen");
     expect(layout).not.toContain("IconLayoutSidebarRight");
     expect(layout).toContain("<ClipsAgentToggleButton />");
-    expect(layout).toContain("[&>.agent-sidebar-shell]:h-full");
-    expect(layout).toContain("showAgentSidebar = true");
-    expect(layout).toContain("{showAgentSidebar ? (");
+    expect(layout).toContain("[--agent-native-viewport-height:100%]");
+    expect(layout).not.toContain("[&>.agent-sidebar-shell]:h-full");
+    expect(layout).not.toContain("showAgentSidebar");
+    expect(layout).toContain("scope={recordingScope}");
+    expect(layout).toContain('t("recordingPage.askAboutClip")');
+    expect(layout).toContain('t("recordingPage.summarizeClip")');
+    expect(commandMenu).toContain("AGENT_SIDEBAR_QUERY_PARAM");
+    expect(commandMenu).toContain("AGENT_SIDEBAR_QUERY_VALUE_OPEN");
     expect(route).toContain("<PageHeader>");
     expect(route).toContain("<PageBreadcrumb items={recordingBreadcrumbItems}");
     expect(route).not.toContain('from "@/components/ui/breadcrumb"');
diff --git a/templates/clips/app/routes/_app.r.$recordingId.tsx b/templates/clips/app/routes/_app.r.$recordingId.tsx
index 21cb7444432..d4db77f810d 100644
--- a/templates/clips/app/routes/_app.r.$recordingId.tsx
+++ b/templates/clips/app/routes/_app.r.$recordingId.tsx
@@ -1,4 +1,8 @@
-import { AgentPanel } from "@agent-native/core/client/agent-chat";
+import {
+  requestAgentSidebarOpen,
+  SIDEBAR_STATE_CHANGE_EVENT,
+  type AgentSidebarStateChangeDetail,
+} from "@agent-native/core/client/agent-chat";
 import {
   agentNativePath,
   appBasePath,
@@ -404,9 +408,35 @@ export function meta() {
   return [{ title: enMessages.recordingRoute.pageTitle }];
 }
 
-type SidePanel = "transcript" | "comments" | "agent" | "settings";
+type SidePanel = "transcript" | "comments" | "settings";
 type ToolbarPanel = Exclude<SidePanel, "comments">;
 
+function useGlobalAgentSidebarOpen() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const handleStateChange = (event: Event) => {
+      const detail = (event as CustomEvent<AgentSidebarStateChangeDetail>)
+        .detail;
+      if (detail && typeof detail.open === "boolean") {
+        setOpen(detail.open);
+      }
+    };
+
+    window.addEventListener(SIDEBAR_STATE_CHANGE_EVENT, handleStateChange);
+    const mountedPanel = document.querySelector<HTMLElement>(
+      ".agent-sidebar-panel[data-agent-sidebar-state='open']",
+    );
+    setOpen(Boolean(mountedPanel));
+
+    return () => {
+      window.removeEventListener(SIDEBAR_STATE_CHANGE_EVENT, handleStateChange);
+    };
+  }, []);
+
+  return open;
+}
+
 const WORKFLOW_MENU_ITEMS: Array<{
   kind: WorkflowKind;
   labelKey: string;
@@ -519,6 +549,7 @@ export default function RecordingPage() {
   const commentsSectionRef = useRef<HTMLElement | null>(null);
 
   const [panel, setPanel] = useState<SidePanel | null>("transcript");
+  const globalAgentSidebarOpen = useGlobalAgentSidebarOpen();
   const [theaterMode, setTheaterMode] = useState(false);
   const [editing, setEditing] = useState(false);
   const [currentMs, setCurrentMs] = useState(startMs);
@@ -566,8 +597,8 @@ export default function RecordingPage() {
     }
   }, [isCompactLayout, searchParams, setSearchParams]);
   const openAgentPanel = useCallback(() => {
-    openSidePanel("agent");
-  }, [openSidePanel]);
+    requestAgentSidebarOpen();
+  }, []);
   const transcriptKickedRef = useRef<string | null>(null);
   // When the recording lands in the processing state but never flips to
   // 'ready', stop spinning forever and surface an error banner so the user
@@ -893,6 +924,11 @@ export default function RecordingPage() {
   }, [canEdit, panel]);
 
   useEffect(() => {
+    if (panelParam === "agent") {
+      setPanel("transcript");
+      requestAgentSidebarOpen();
+      return;
+    }
     if (panelParam === "comments") {
       setPanel(recording?.enableComments ? "comments" : "transcript");
       if (isCompactLayout) {
@@ -905,7 +941,6 @@ export default function RecordingPage() {
     if (
       (panelParam === "transcript" ||
         panelParam === "insights" ||
-        panelParam === "agent" ||
         panelParam === "settings") &&
       (panelParam !== "settings" || canEdit)
     ) {
@@ -1871,9 +1906,6 @@ export default function RecordingPage() {
       <ViewerTabsTrigger value="transcript">
         {t("recordingPage.transcript")}
       </ViewerTabsTrigger>
-      <ViewerTabsTrigger value="agent">
-        {t("recordingPage.agent")}
-      </ViewerTabsTrigger>
       {canEdit ? (
         <ViewerTabsTrigger value="settings">
           {t("recordingPage.settings")}
@@ -1967,26 +1999,6 @@ export default function RecordingPage() {
             isRegenerating={requestTranscript.isPending}
           />
         </TabsContent>
-        <TabsContent
-          value="agent"
-          className="mt-0 flex min-h-0 flex-1 flex-col overflow-y-auto data-[state=inactive]:hidden"
-        >
-          <AgentPanel
-            emptyStateText={t("recordingPage.askAboutClip")}
-            dynamicSuggestions={false}
-            scope={{ type: "recording", id: recording.id }}
-            missingApiKeySetupLayout="sidebar"
-            suggestions={[
-              t("recordingPage.summarizeClip"),
-              t("recordingPage.findKeyMoments"),
-              t("recordingPage.listFollowUpActions"),
-              t("recordingPage.draftQuestions"),
-            ]}
-            browserTabId={browserTabId}
-            showHeader={false}
-            showTabBar={false}
-          />
-        </TabsContent>
         {canEdit ? (
           <TabsContent
             value="settings"
@@ -2312,7 +2324,7 @@ export default function RecordingPage() {
           }
           openSidePanel(value as ToolbarPanel);
         }}
-        className="clips-recording-view grid h-full min-h-0 w-full max-w-full grid-cols-1 overflow-x-hidden bg-background lg:grid-cols-[minmax(0,1fr)_auto] lg:grid-rows-[minmax(0,1fr)] lg:overflow-hidden [&_.agent-composer-root]:!border-0 [&_.agent-composer-root]:!bg-background"
+        className="clips-recording-view grid h-full min-h-0 w-full max-w-full grid-cols-1 overflow-x-hidden bg-background lg:grid-cols-[minmax(0,1fr)_auto] lg:grid-rows-[minmax(0,1fr)] lg:overflow-hidden"
       >
         {/* Main video column */}
         <div className="contents">
@@ -2508,7 +2520,7 @@ export default function RecordingPage() {
                   </div>
                 </div>
 
-                {isCompactLayout ? (
+                {isCompactLayout && !globalAgentSidebarOpen ? (
                   <RecordingSidePanel
                     id="clip-activity-panel"
                     className="mt-2 lg:hidden"
@@ -2525,7 +2537,7 @@ export default function RecordingPage() {
         </div>
 
         {/* Side panel */}
-        {!editing && !isCompactLayout && panel ? (
+        {!editing && !isCompactLayout && !globalAgentSidebarOpen && panel ? (
           <RecordingSidePanel
             className="hidden lg:col-start-2 lg:row-start-1 lg:flex lg:w-[360px] xl:w-[420px] 2xl:w-[440px]"
             tabs={renderPanelTabs()}
diff --git a/templates/clips/app/routes/_app.tsx b/templates/clips/app/routes/_app.tsx
index 60262c8b248..8c493bc1bca 100644
--- a/templates/clips/app/routes/_app.tsx
+++ b/templates/clips/app/routes/_app.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { Outlet, useLocation, useNavigate } from "react-router";
+import { Outlet, useNavigate } from "react-router";
 
 import { LibraryLayout } from "@/components/library/library-layout";
 import { useAutoTitleBridge } from "@/hooks/use-auto-title";
@@ -63,8 +63,6 @@ function useGlobalSequenceShortcuts() {
 // Pathless layout route — keeps the left sidebar + agent chat mounted across
 // every library/space/archive/trash navigation. See client-side-routing skill.
 export default function AppLayoutRoute() {
-  const location = useLocation();
-  const recordingWorkspace = /^\/r\/[^/]+\/?$/.test(location.pathname);
   // Watch for server-queued title delegations and dispatch them to the agent
   // chat. `sendToAgentChat` is browser-only so the server can't call it
   // directly; this bridge is how `request-transcript`'s "auto-title when the
@@ -75,7 +73,7 @@ export default function AppLayoutRoute() {
   useGlobalSequenceShortcuts();
 
   return (
-    <LibraryLayout showAgentSidebar={!recordingWorkspace}>
+    <LibraryLayout>
       <Outlet />
     </LibraryLayout>
   );
diff --git a/templates/clips/changelog/2026-09-09-agent-sidebar-fits-below-toolbar.md b/templates/clips/changelog/2026-09-09-agent-sidebar-fits-below-toolbar.md
new file mode 100644
index 00000000000..d3a8d220f66
--- /dev/null
+++ b/templates/clips/changelog/2026-09-09-agent-sidebar-fits-below-toolbar.md
@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-09
+---
+
+The Agent sidebar now fits below the app toolbar without clipping its composer.
diff --git a/templates/clips/changelog/2026-09-09-desktop-switches-stay-clear-in-dark-mode.md b/templates/clips/changelog/2026-09-09-desktop-switches-stay-clear-in-dark-mode.md
new file mode 100644
index 00000000000..4d52c75fd5f
--- /dev/null
+++ b/templates/clips/changelog/2026-09-09-desktop-switches-stay-clear-in-dark-mode.md
@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-09
+---
+
+Desktop recorder switches now keep their checked state clear and legible in dark mode.
diff --git a/templates/clips/changelog/2026-09-09-recording-agent-uses-global-panel.md b/templates/clips/changelog/2026-09-09-recording-agent-uses-global-panel.md
new file mode 100644
index 00000000000..23f485f083a
--- /dev/null
+++ b/templates/clips/changelog/2026-09-09-recording-agent-uses-global-panel.md
@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-09
+---
+
+Recording pages now open the same contextual Agent panel used throughout the app.
diff --git a/templates/clips/data/pglite.agent-native-pglite.lock b/templates/clips/data/pglite.agent-native-pglite.lock
index e70bccbca76..f624ef2668e 100644
--- a/templates/clips/data/pglite.agent-native-pglite.lock
+++ b/templates/clips/data/pglite.agent-native-pglite.lock
@@ -1 +1 @@
-{"pid":42348,"token":"42348:1788919476618:0.7942956242696269"}
\ No newline at end of file
+{"pid":34821,"token":"34821:1788983700727:0.22410487565219284"}
\ No newline at end of file
diff --git a/templates/clips/desktop/src-tauri/src/util.rs b/templates/clips/desktop/src-tauri/src/util.rs
index 449b1a61888..6b82c31e826 100644
--- a/templates/clips/desktop/src-tauri/src/util.rs
+++ b/templates/clips/desktop/src-tauri/src/util.rs
@@ -111,9 +111,9 @@ pub fn set_capture_included(window: &WebviewWindow) {
 
 pub fn build_popover_window(app: &mut tauri::App) -> Result<WebviewWindow, tauri::Error> {
     let app_handle = app.handle().clone();
-    // Keep the tray panel compact, but use native decorations so a manually
-    // launched app still behaves like a normal window: users can move,
-    // minimize, and close it without needing to find the tray icon again.
+    // The window is sized to the visible panel exactly. The HTML paints the
+    // rounded shape and macOS derives the native shadow from that alpha mask,
+    // so adding native decorations would create a second frame above it.
     WebviewWindowBuilder::new(app, "popover", WebviewUrl::App("index.html".into()))
         .title("Clips")
         .inner_size(
@@ -122,7 +122,7 @@ pub fn build_popover_window(app: &mut tauri::App) -> Result<WebviewWindow, tauri
         )
         .position(2.0, 2.0)
         .resizable(false)
-        .decorations(true)
+        .decorations(false)
         .transparent(true)
         .always_on_top(true)
         .visible_on_all_workspaces(true)
diff --git a/templates/clips/desktop/src/app.tsx b/templates/clips/desktop/src/app.tsx
index 7ea6eb13598..3a87d75ecb1 100644
--- a/templates/clips/desktop/src/app.tsx
+++ b/templates/clips/desktop/src/app.tsx
@@ -897,7 +897,7 @@ function SettingsSwitch({
       onCheckedChange={onCheckedChange}
       disabled={disabled}
       aria-label={label}
-      className="data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=unchecked]:border-border"
+      tone="success"
     />
   );
 }
@@ -1347,7 +1347,7 @@ export function App({
     loadDevices,
     requestDeviceAccess,
   } = useMediaDevices({
-    bubbleActiveRef,
+    microphoneEnabled: micOn,
     popoverVisible,
     setCameraError,
     setRecError,
diff --git a/templates/clips/desktop/src/components/MediaDeviceRow.tsx b/templates/clips/desktop/src/components/MediaDeviceRow.tsx
index bd0a1a6b69f..913d40a2cac 100644
--- a/templates/clips/desktop/src/components/MediaDeviceRow.tsx
+++ b/templates/clips/desktop/src/components/MediaDeviceRow.tsx
@@ -131,7 +131,7 @@ export function MediaDeviceRow({
               </DropdownMenuTrigger>
             ) : (
               <span
-                className="row-button row-button-placeholder row-label-muted"
+                className="row-button row-button-placeholder"
                 aria-disabled="true"
               >
                 {label}
@@ -191,8 +191,10 @@ export function MediaDeviceRow({
         </div>
       </div>
       {kind === "mic" && onSystemAudioToggle ? (
-        <div className="row system-audio-row">
-          <span className="row-icon" aria-hidden>
+        <div
+          className={`row ${systemAudio ? "row-on" : "row-off"} system-audio-row`}
+        >
+          <span className="row-icon system-audio-icon" aria-hidden>
             <IconVolume2 size={20} stroke={1.75} />
           </span>
           <span className="system-audio-label">Record system audio</span>
diff --git a/templates/clips/desktop/src/components/SourceRow.tsx b/templates/clips/desktop/src/components/SourceRow.tsx
index 3e7b67614a4..53bc036f33a 100644
--- a/templates/clips/desktop/src/components/SourceRow.tsx
+++ b/templates/clips/desktop/src/components/SourceRow.tsx
@@ -115,6 +115,7 @@ export function SourceRow({
           </DropdownMenuRadioGroup>
           <DropdownMenuSeparator />
           <DropdownMenuItem
+            inset
             onSelect={() => {
               onChange("window");
               onChooseWindow?.();
diff --git a/templates/clips/desktop/src/components/Switch.tsx b/templates/clips/desktop/src/components/Switch.tsx
index 9a9c08378d6..4127ed66acd 100644
--- a/templates/clips/desktop/src/components/Switch.tsx
+++ b/templates/clips/desktop/src/components/Switch.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { cn } from "../lib/utils";
 import { Switch as UiSwitch } from "./ui/switch";
 
 interface SwitchProps extends Omit<
@@ -31,10 +30,8 @@ export const Switch = React.forwardRef<
       aria-label={label}
       disabled={disabled}
       data-tw-surface
-      className={cn(
-        "data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=unchecked]:border-border",
-        className,
-      )}
+      tone="success"
+      className={className}
     />
   );
 });
diff --git a/templates/clips/desktop/src/components/recorder-popover-states.test.tsx b/templates/clips/desktop/src/components/recorder-popover-states.test.tsx
index 249b7066c95..b172e997ab7 100644
--- a/templates/clips/desktop/src/components/recorder-popover-states.test.tsx
+++ b/templates/clips/desktop/src/components/recorder-popover-states.test.tsx
@@ -50,6 +50,8 @@ describe("recorder popover failure states", () => {
     expect(html).not.toContain('aria-haspopup="menu"');
     expect(html).not.toContain("FaceTime HD Camera");
     expect(html).toContain('aria-label="Camera"');
+    expect(html).toContain('class="row row-off"');
+    expect(html).not.toContain("row-label-muted");
   });
 
   it("keeps system audio available when the mic is off", () => {
@@ -71,7 +73,24 @@ describe("recorder popover failure states", () => {
     expect(html).not.toContain("mic-wave");
     expect(html).toContain("Record system audio");
     expect(html).toContain('aria-label="Record system audio"');
-    expect(html).toContain('class="row system-audio-row"');
+    expect(html).toContain('class="row row-on system-audio-row"');
+    expect(html).toContain('class="row-icon system-audio-icon"');
+  });
+
+  it("uses one off-state token for the system audio icon and label", () => {
+    const html = renderToStaticMarkup(
+      <MediaDeviceRow
+        {...commonDeviceProps}
+        kind="mic"
+        devices={[]}
+        selectedId=""
+        on
+        systemAudio={false}
+        onSystemAudioToggle={vi.fn()}
+      />,
+    );
+
+    expect(html).toContain('class="row row-off system-audio-row"');
   });
 
   it("keeps source selection keyboard-addressable when the source is active", () => {
@@ -96,6 +115,12 @@ describe("recorder popover failure states", () => {
     expect(html).toContain("group-data-[size=default]/switch:size-4");
     expect(html).toContain("ring-foreground/20");
     expect(html).toContain("data-[state=checked]:translate-x-[calc(100%-2px)]");
+    expect(html).toMatch(
+      /data-slot="switch"[^>]*data-\[state=checked\]:bg-success(?:\s|")/,
+    );
+    expect(html).toMatch(
+      /data-slot="switch-thumb"[^>]*data-\[state=checked\]:bg-success-foreground(?:\s|")/,
+    );
     expect(html).not.toContain("[&>span]");
   });
 
diff --git a/templates/clips/desktop/src/components/ui/switch.tsx b/templates/clips/desktop/src/components/ui/switch.tsx
index f6d993628c0..5962e333dba 100644
--- a/templates/clips/desktop/src/components/ui/switch.tsx
+++ b/templates/clips/desktop/src/components/ui/switch.tsx
@@ -12,32 +12,50 @@ const switchVariants = cva(
         default: "h-[1.15rem] w-8",
         sm: "h-3.5 w-6",
       },
+      tone: {
+        default: "",
+        success:
+          "data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=unchecked]:border-border",
+      },
     },
     defaultVariants: {
       size: "default",
+      tone: "default",
     },
   },
 );
 
 const switchThumbVariants = cva(
   "pointer-events-none block rounded-full bg-background shadow-sm ring-1 ring-foreground/20 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
+  {
+    variants: {
+      tone: {
+        default: "",
+        success:
+          "data-[state=checked]:bg-success-foreground dark:data-[state=checked]:bg-success-foreground",
+      },
+    },
+    defaultVariants: {
+      tone: "default",
+    },
+  },
 );
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
     VariantProps<typeof switchVariants>
->(({ className, size = "default", ...props }, ref) => (
+>(({ className, size = "default", tone = "default", ...props }, ref) => (
   <SwitchPrimitives.Root
     data-slot="switch"
     data-size={size}
-    className={cn(switchVariants({ size, className }))}
+    className={cn(switchVariants({ size, tone, className }))}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       data-slot="switch-thumb"
-      className={cn(switchThumbVariants())}
+      className={cn(switchThumbVariants({ tone }))}
     />
   </SwitchPrimitives.Root>
 ));
diff --git a/templates/clips/desktop/src/hooks/useMediaDevices.test.ts b/templates/clips/desktop/src/hooks/useMediaDevices.test.ts
new file mode 100644
index 00000000000..1dcb96c73e1
--- /dev/null
+++ b/templates/clips/desktop/src/hooks/useMediaDevices.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from "vitest";
+
+const mediaMocks = vi.hoisted(() => ({
+  getAudioStreamWithFallback: vi.fn(),
+}));
+
+vi.mock("../lib/media-capture-constraints", () => ({
+  getAudioStreamWithFallback: mediaMocks.getAudioStreamWithFallback,
+}));
+
+import { refreshMicrophoneAccess } from "./useMediaDevices";
+
+describe("desktop microphone device discovery", () => {
+  it("uses the recorder fallback chain and releases its discovery stream", async () => {
+    const stopFirstTrack = vi.fn();
+    const stopSecondTrack = vi.fn();
+    mediaMocks.getAudioStreamWithFallback.mockResolvedValueOnce({
+      getAudioTracks: () => [
+        {
+          getSettings: () => ({ deviceId: "studio-display" }),
+          label: "Studio Display Microphone",
+        },
+      ],
+      getTracks: () => [{ stop: stopFirstTrack }, { stop: stopSecondTrack }],
+    });
+
+    await expect(
+      refreshMicrophoneAccess("stale-earpods", "EarPods Microphone"),
+    ).resolves.toEqual({
+      deviceId: "studio-display",
+      label: "Studio Display Microphone",
+    });
+
+    expect(mediaMocks.getAudioStreamWithFallback).toHaveBeenCalledWith(
+      "stale-earpods",
+      "EarPods Microphone",
+      false,
+    );
+    expect(stopFirstTrack).toHaveBeenCalledOnce();
+    expect(stopSecondTrack).toHaveBeenCalledOnce();
+  });
+});
diff --git a/templates/clips/desktop/src/hooks/useMediaDevices.ts b/templates/clips/desktop/src/hooks/useMediaDevices.ts
index ef9e0b27b32..b9690c601bc 100644
--- a/templates/clips/desktop/src/hooks/useMediaDevices.ts
+++ b/templates/clips/desktop/src/hooks/useMediaDevices.ts
@@ -1,11 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type MutableRefObject,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import {
   chooseFallbackAudioInput,
@@ -13,6 +6,7 @@ import {
   isSelectableAudioInputDevice,
   normalizedMediaDeviceId,
 } from "../../../shared/media-device-selection";
+import { getAudioStreamWithFallback } from "../lib/media-capture-constraints";
 import {
   isHardCapturePermissionError,
   MACOS_CAPTURE_PERMISSION_MESSAGE,
@@ -24,15 +18,6 @@ const MIC_KEY = "clips:last-mic-id";
 const CAM_LABEL_KEY = "clips:last-camera-label";
 const MIC_LABEL_KEY = "clips:last-mic-label";
 
-function rawMicConstraints(deviceId?: string): MediaTrackConstraints {
-  return {
-    ...(deviceId ? { deviceId: { exact: deviceId } } : {}),
-    echoCancellation: false,
-    noiseSuppression: false,
-    autoGainControl: false,
-  };
-}
-
 function concreteMediaDeviceId(value: string | null | undefined): string {
   const id = normalizedMediaDeviceId(value);
   return id && !isPseudoMediaDeviceId(id) ? id : "";
@@ -43,14 +28,30 @@ function isSelectableMediaDevice(device: MediaDeviceInfo): boolean {
 }
 
 interface Props {
-  // Mirrors whether the on-screen camera bubble owns the camera grant. While
-  // it does, this page must never probe getUserMedia itself.
-  bubbleActiveRef: MutableRefObject<boolean>;
+  microphoneEnabled: boolean;
   popoverVisible: boolean;
   setCameraError: (message: string | null) => void;
   setRecError: (message: string | null) => void;
 }
 
+export async function refreshMicrophoneAccess(
+  selectedMicId: string,
+  selectedMicLabel: string,
+): Promise<{ deviceId: string; label: string }> {
+  const stream = await getAudioStreamWithFallback(
+    selectedMicId,
+    selectedMicLabel,
+    false,
+  );
+  const track = stream.getAudioTracks()[0] ?? null;
+  const result = {
+    deviceId: concreteMediaDeviceId(track?.getSettings().deviceId),
+    label: track?.label ?? "",
+  };
+  stream.getTracks().forEach((candidate) => candidate.stop());
+  return result;
+}
+
 export interface MediaDevicesState {
   cameraId: string;
   setCameraId: (id: string) => void;
@@ -69,7 +70,7 @@ export interface MediaDevicesState {
 }
 
 export function useMediaDevices({
-  bubbleActiveRef,
+  microphoneEnabled,
   popoverVisible,
   setCameraError,
   setRecError,
@@ -107,8 +108,8 @@ export function useMediaDevices({
 
   // ---- device enumeration -------------------------------------------------
   // WebKit only returns full device labels after getUserMedia() has granted
-  // access once. Enumerating itself is safe; the unlock helper below is careful
-  // to never touch the OS default input just to populate labels.
+  // access once. Enumerating itself is safe; the unlock helper below only
+  // acquires audio while the visible microphone control is enabled.
   const loadDevices = useCallback(async () => {
     try {
       if (!navigator.mediaDevices?.enumerateDevices) return;
@@ -155,6 +156,18 @@ export function useMediaDevices({
     };
   }, [loadDevices]);
 
+  const refreshSelectedMicrophone = useCallback(async () => {
+    const activeMic = await refreshMicrophoneAccess(selectedMicId, micLabel);
+    if (
+      selectedMicId &&
+      activeMic.deviceId &&
+      activeMic.deviceId !== selectedMicId
+    ) {
+      setMicId("");
+      setMicLabel("");
+    }
+  }, [micLabel, selectedMicId]);
+
   const unlockDeviceLabels = useCallback(async () => {
     // Audio-only probe to unlock mic labels. We INTENTIONALLY skip video —
     // the on-screen camera bubble window owns the camera, and probing
@@ -163,26 +176,18 @@ export function useMediaDevices({
     // WebViews in the same process). Camera-label text is low-value
     // anyway; most machines have one.
     //
-    // Do not probe `audio: true` or WebKit's pseudo `default` device here.
-    // On macOS that opens the system default input, which can shove
-    // Bluetooth headphones into hands-free mode just from opening the Clips
-    // popover. If the user has picked a concrete mic, use that exact device;
-    // otherwise leave labels locked until a real user action needs access.
+    // The meter already needs an input while this control is visible. Reuse the
+    // recorder's fallback chain so a disconnected saved device cannot leave
+    // both the meter and the device list stranded until the user changes a
+    // selection. This may use the system default only after an exact saved
+    // device fails, or when the user has explicitly left the picker on Default.
     try {
-      if (!selectedMicId) {
-        await loadDevices();
-        return;
-      }
-      const s = await navigator.mediaDevices.getUserMedia({
-        audio: rawMicConstraints(selectedMicId),
-        video: false,
-      });
-      s.getTracks().forEach((t) => t.stop());
+      await refreshSelectedMicrophone();
     } catch {
       // permission denied — labels stay empty until the user grants
     }
     await loadDevices();
-  }, [loadDevices, selectedMicId]);
+  }, [loadDevices, refreshSelectedMicrophone]);
 
   const requestDeviceAccess = useCallback(
     async (kind: "camera" | "mic") => {
@@ -190,15 +195,15 @@ export function useMediaDevices({
         if (!navigator.mediaDevices?.getUserMedia) {
           throw new Error("Device selection is not available in this WebView.");
         }
-        const stream = await navigator.mediaDevices.getUserMedia(
-          kind === "camera"
-            ? { video: true, audio: false }
-            : {
-                audio: rawMicConstraints(selectedMicId || undefined),
-                video: false,
-              },
-        );
-        stream.getTracks().forEach((track) => track.stop());
+        if (kind === "camera") {
+          const stream = await navigator.mediaDevices.getUserMedia({
+            video: true,
+            audio: false,
+          });
+          stream.getTracks().forEach((track) => track.stop());
+        } else {
+          await refreshSelectedMicrophone();
+        }
         await loadDevices();
       } catch (err) {
         const message = err instanceof Error ? err.message : String(err);
@@ -221,20 +226,35 @@ export function useMediaDevices({
         await loadDevices();
       }
     },
-    [bubbleActiveRef, loadDevices, selectedMicId, setCameraError, setRecError],
+    [loadDevices, refreshSelectedMicrophone, setCameraError, setRecError],
   );
 
-  // Defer device-label unlocking until the popover is first shown. Even the
+  // Defer device-label unlocking until each visible popover session. Even the
   // selected-device probe can trigger a macOS permission dialog, so keep it
-  // attached to visible UI instead of firing on hidden webview mount.
+  // attached to visible UI instead of firing on hidden WebView mount.
   const deviceLabelsUnlocked = useRef(false);
   useEffect(() => {
     void loadDevices();
-    if (popoverVisible && !deviceLabelsUnlocked.current) {
+    if (!popoverVisible || !microphoneEnabled) {
+      deviceLabelsUnlocked.current = false;
+      return;
+    }
+    if (!deviceLabelsUnlocked.current) {
       deviceLabelsUnlocked.current = true;
       void unlockDeviceLabels();
     }
-  }, [loadDevices, unlockDeviceLabels, popoverVisible]);
+  }, [loadDevices, microphoneEnabled, popoverVisible, unlockDeviceLabels]);
+
+  // WebKit does not consistently emit `devicechange` inside a reused Tauri
+  // popover WebView. Keep the visible picker current without polling while the
+  // recorder UI is hidden.
+  useEffect(() => {
+    if (!popoverVisible) return;
+    const interval = window.setInterval(() => {
+      void loadDevices();
+    }, 2_000);
+    return () => window.clearInterval(interval);
+  }, [loadDevices, popoverVisible]);
 
   useEffect(() => {
     if (!micId || !isPseudoMediaDeviceId(micId) || mics.length === 0) return;
diff --git a/templates/clips/desktop/src/lib/popover-window-chrome.test.ts b/templates/clips/desktop/src/lib/popover-window-chrome.test.ts
new file mode 100644
index 00000000000..b67e8eafd15
--- /dev/null
+++ b/templates/clips/desktop/src/lib/popover-window-chrome.test.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+const utilSource = readFileSync(
+  new URL("../../src-tauri/src/util.rs", import.meta.url),
+  "utf8",
+);
+
+describe("desktop popover window chrome", () => {
+  it("keeps the HTML-painted popover free of a second native frame", () => {
+    const start = utilSource.indexOf("pub fn build_popover_window");
+    const end = utilSource.indexOf(".on_new_window", start);
+    const popoverBuilder = utilSource.slice(start, end);
+
+    expect(start).toBeGreaterThan(-1);
+    expect(end).toBeGreaterThan(start);
+    expect(popoverBuilder).toContain(".decorations(false)");
+    expect(popoverBuilder).not.toContain(".decorations(true)");
+  });
+});
diff --git a/templates/clips/desktop/src/styles.css b/templates/clips/desktop/src/styles.css
index 631f8576647..dc335c172f6 100644
--- a/templates/clips/desktop/src/styles.css
+++ b/templates/clips/desktop/src/styles.css
@@ -65,9 +65,8 @@
   box-sizing: border-box;
 }
 
-/* The HTML still paints the visible panel shape while the native window frame
-   supplies standard move, minimize, and close affordances for the desktop
-   app. */
+/* The main Tauri window is transparent and chromeless, so the HTML paints the
+   visible rounded popover while macOS supplies its shadow. */
 html,
 body {
   margin: 0;
@@ -518,8 +517,11 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
   background: hsl(var(--ui-muted) / 0.55);
 }
 
-.row-off .row-icon,
-.row-label-muted {
+.row-on {
+  color: var(--fg);
+}
+
+.row-off {
   color: var(--fg-subtle);
 }
 
@@ -529,7 +531,7 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--fg-muted);
+  color: inherit;
   flex-shrink: 0;
 }
 
@@ -555,7 +557,10 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
   align-items: center;
   min-height: 30px;
   padding: 5px 10px;
-  color: var(--fg-muted);
+}
+
+.system-audio-icon {
+  transform: translateX(2px);
 }
 
 .system-audio-label {
@@ -566,21 +571,16 @@ body[data-clips-route]:not([data-clips-route="popover"]) #root {
   font-size: 13px;
 }
 
-.row-on .row-icon {
-  color: var(--fg);
-}
-
 /* Radix device picker trigger — the menu owns keyboard and focus behavior. */
 .row-button {
   width: 100%;
   min-width: 0;
-  min-width: 0;
   display: flex;
   align-items: center;
   gap: 6px;
   border: none;
   background: transparent;
-  color: var(--fg);
+  color: inherit;
   font-size: 13px;
   font-weight: 400;
   padding: 0;
diff --git a/templates/clips/desktop/src/tailwind.css b/templates/clips/desktop/src/tailwind.css
index 30bba91d1ab..1517862db86 100644
--- a/templates/clips/desktop/src/tailwind.css
+++ b/templates/clips/desktop/src/tailwind.css
@@ -245,6 +245,7 @@
   --ui-ring: 0 0% 40%;
   /* macOS convention for an engaged switch, and the one accent the tray uses. */
   --ui-success: 142 71% 45%;
+  --ui-success-foreground: 0 0% 100%;
   /* Reserved for explicit "there is something new here" alerts and notices. */
   --ui-info: 217 91% 55%;
 }
@@ -271,6 +272,7 @@
     --ui-input: 0 0% 32%;
     --ui-ring: 0 0% 60%;
     --ui-success: 142 60% 52%;
+    --ui-success-foreground: 0 0% 100%;
     --ui-info: 217 91% 65%;
   }
 }
@@ -333,6 +335,7 @@
   --color-card-foreground: hsl(var(--ui-card-foreground));
 
   --color-success: hsl(var(--ui-success));
+  --color-success-foreground: hsl(var(--ui-success-foreground));
   --color-info: hsl(var(--ui-info));
 
   --radius-lg: var(--radius);

From edd3a97db2bde17c75e72ded2d8c5373d3c833b1 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Wed, 9 Sep 2026 14:12:44 -0700
Subject: [PATCH 19/21] chore: publish branch work in templates/clips (3 files)

---
 templates/clips/app/components/player/share-dialog.tsx           | 1 -
 .../changelog/2026-09-08-comments-and-desktop-window-controls.md | 1 +
 templates/clips/changelog/2026-09-08-global-command-search.md    | 1 +
 3 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/templates/clips/app/components/player/share-dialog.tsx b/templates/clips/app/components/player/share-dialog.tsx
index 45144e12b09..7ad83f4fd3b 100644
--- a/templates/clips/app/components/player/share-dialog.tsx
+++ b/templates/clips/app/components/player/share-dialog.tsx
@@ -582,7 +582,6 @@ function PeopleTab({
   onOpenEmbed: () => void;
 }) {
   const t = useT();
-  const sharesLoaded = visibility !== null;
 
   if (viewerReshareOnly) {
     return (
diff --git a/templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md b/templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md
index fd9c91c6446..e76af541b94 100644
--- a/templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md
+++ b/templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md
@@ -2,4 +2,5 @@
 type: fixed
 date: 2026-09-08
 ---
+
 Fixed desktop comment threads by keeping them in a full-height viewer tab, polished the side-panel tabs and spacing, added move, minimize, and close controls to desktop Clips windows, corrected the shared New recording action’s split-button corners, made library sub-item selection clear in the sidebar, and added visible folder tiles plus scoped recording actions to library and space views.
diff --git a/templates/clips/changelog/2026-09-08-global-command-search.md b/templates/clips/changelog/2026-09-08-global-command-search.md
index b14b47694d2..ce6e62ff4fb 100644
--- a/templates/clips/changelog/2026-09-08-global-command-search.md
+++ b/templates/clips/changelog/2026-09-08-global-command-search.md
@@ -2,4 +2,5 @@
 type: improved
 date: 2026-09-08
 ---
+
 The Cmd+K command menu now searches and navigates across recordings, meetings, dictations, folders, and spaces.

From 2372b562bdf316016e9f9fde4e8335045c4f9d71 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Wed, 9 Sep 2026 14:38:35 -0700
Subject: [PATCH 20/21] test: avoid credential-shaped JWT fixture

---
 packages/core/src/email-catalog/redact-body.spec.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/email-catalog/redact-body.spec.ts b/packages/core/src/email-catalog/redact-body.spec.ts
index 55d1a44ea24..d1fe46fa65c 100644
--- a/packages/core/src/email-catalog/redact-body.spec.ts
+++ b/packages/core/src/email-catalog/redact-body.spec.ts
@@ -96,10 +96,16 @@ describe("redactSensitiveEmailBodyContent", () => {
   });
 
   it("redacts a JWT-shaped token", () => {
-    const text =
-      "Session token: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNryP4J3jVmNHl0w5N_XgL0n3I9PlFUP0THsR8U";
+    const fakeJwt = [
+      Buffer.from(JSON.stringify({ alg: "HS256" })).toString("base64url"),
+      Buffer.from(JSON.stringify({ sub: "example-user" })).toString(
+        "base64url",
+      ),
+      Buffer.from("not-a-signature").toString("base64url"),
+    ].join(".");
+    const text = `Session token: ${fakeJwt}`;
     const redacted = redactSensitiveEmailBodyContent(text);
-    expect(redacted).not.toContain("eyJhbGciOiJIUzI1NiJ9");
+    expect(redacted).not.toContain(fakeJwt);
     expect(redacted).toContain("[REDACTED]");
     expect(redacted).toContain("Session token:");
   });

From 639e218fff0570bf268563b824ee43c2f2083104 Mon Sep 17 00:00:00 2001
From: Shawn McClelland <shawn@builder.io>
Date: Wed, 9 Sep 2026 14:57:57 -0700
Subject: [PATCH 21/21] test: tolerate transient scaffold cleanup races

---
 packages/core/src/cli/create-start-shape.spec.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/cli/create-start-shape.spec.ts b/packages/core/src/cli/create-start-shape.spec.ts
index aa3728a17f2..6c2eaf9a2f0 100644
--- a/packages/core/src/cli/create-start-shape.spec.ts
+++ b/packages/core/src/cli/create-start-shape.spec.ts
@@ -36,7 +36,12 @@ beforeEach(() => {
 
 afterEach(() => {
   process.chdir(originalCwd);
-  fs.rmSync(parentDir, { recursive: true, force: true });
+  fs.rmSync(parentDir, {
+    recursive: true,
+    force: true,
+    maxRetries: 3,
+    retryDelay: 50,
+  });
   vi.clearAllMocks();
 });