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/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();
 });
 
diff --git a/packages/core/src/client/CommandMenu.spec.tsx b/packages/core/src/client/CommandMenu.spec.tsx
index 8cf901e3e9a..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(
@@ -386,7 +414,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 +436,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..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);
@@ -667,6 +676,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 +692,6 @@ export function useCommandMenuShortcut(
         ) {
           return;
         }
-        e.preventDefault();
         onOpen();
       }
     };
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:");
   });
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/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/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/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/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/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..74997d14eb3
--- /dev/null
+++ b/templates/clips/app/components/bug-report/bug-report-form.tsx
@@ -0,0 +1,206 @@
+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">
+          <h2 className="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..fd8a3e28c54
--- /dev/null
+++ b/templates/clips/app/components/clips-command-menu.tsx
@@ -0,0 +1,653 @@
+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 {
+  AGENT_SIDEBAR_QUERY_PARAM,
+  AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+  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}`, {
+                    [AGENT_SIDEBAR_QUERY_PARAM]: AGENT_SIDEBAR_QUERY_VALUE_OPEN,
+                  }),
+                )
+              }
+              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..fa577679c55 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 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..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[];
 }
 
@@ -80,6 +81,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 +91,7 @@ export function FolderTree({
   spaceId = null,
   buildPath,
   activeFolderId,
+  compact = false,
 }: FolderTreeProps) {
   const t = useT();
   const tree = useMemo(() => buildTree(folders), [folders]);
@@ -111,6 +115,7 @@ export function FolderTree({
           activeFolderId={activeFolderId}
           organizationId={organizationId}
           spaceId={spaceId}
+          compact={compact}
         />
       ))}
     </ul>
@@ -124,6 +129,7 @@ interface FolderItemProps {
   activeFolderId?: string | null;
   organizationId?: string;
   spaceId?: string | null;
+  compact: boolean;
 }
 
 function FolderItem({
@@ -133,6 +139,7 @@ function FolderItem({
   activeFolderId,
   organizationId,
   spaceId,
+  compact,
 }: FolderItemProps) {
   const t = useT();
   const [open, setOpen] = useState(true);
@@ -159,85 +166,122 @@ 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>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
+              {compact && hasChildren && (
+                <CollapsibleTrigger 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 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}`}
                   >
-                    <IconDots className="h-3.5 w-3.5" />
+                    <IconChevronRight
+                      className={cn(
+                        "h-3 w-3 transition-transform motion-reduce:transition-none rtl:-scale-x-100",
+                        open && "rotate-90",
+                      )}
+                    />
                   </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>
+                </CollapsibleTrigger>
+              )}
+              <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>
@@ -292,6 +336,7 @@ function FolderItem({
                   activeFolderId={activeFolderId}
                   organizationId={organizationId}
                   spaceId={spaceId}
+                  compact={compact}
                 />
               ))}
             </ul>
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 1e77475178f..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,24 +9,84 @@ 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",
     );
+    const folderRouteSource = readSource(
+      "../../routes/_app.library.folder.$folderId.tsx",
+    );
+    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",
+    );
+    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");
     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("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")');
+    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");
+    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"',
     );
@@ -37,6 +97,31 @@ 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(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");
@@ -52,15 +137,45 @@ 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("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/")',
+    );
+    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).toContain(
+      "h-auto w-full justify-start gap-2 bg-transparent px-2 py-1.5 text-xs font-normal",
+    );
+    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");
+    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..e969594d56e 100644
--- a/templates/clips/app/components/library/library-grid.tsx
+++ b/templates/clips/app/components/library/library-grid.tsx
@@ -8,15 +8,33 @@ import {
   IconAlertTriangle,
   IconChevronLeft,
   IconChevronRight,
+  IconFolderPlus,
+  IconLink,
+  IconUpload,
 } from "@tabler/icons-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  type ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Link } from "react-router";
 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,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 import {
   useFolders,
+  useOrganizations,
   useRecordings,
   useRecordingsCount,
   useTrashRecording,
@@ -26,13 +44,21 @@ 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";
 
 import { BulkActionToolbar, type BulkMoveTarget } from "./bulk-action-toolbar";
 import { EmptyState } from "./empty-state";
 import { FilterChips, type FilterChip } from "./filter-chips";
-import { PageBreadcrumb, PageHeader } from "./page-header";
+import { FolderCard } from "./folder-card";
+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";
@@ -44,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;
@@ -73,6 +100,58 @@ type CreateFolderTarget =
   | { kind: "single"; recording: RecordingSummary }
   | { kind: "bulk"; recordingIds: string[] };
 
+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;
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem
+          onSelect={() => {
+            setTimeout(onCreateFolder, 0);
+          }}
+        >
+          <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>
+  );
+}
+
 function buildMoveTargets(
   folders: FolderTargetRow[],
   currentFolderId: string | null,
@@ -107,6 +186,7 @@ export function LibraryGrid({
   spaceId = null,
   emptyKind,
   title,
+  breadcrumbItems,
   tagFilter,
   onClearTag,
   extraActions,
@@ -117,11 +197,18 @@ 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);
   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;
@@ -139,6 +226,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,14 +276,32 @@ export function LibraryGrid({
   const moveRecording = useMoveRecording();
   const canManageRecordings = view !== "shared";
   const canMoveSelection = view === "library" || view === "space";
-  const { data: scopedFolders } = useFolders(
+  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(
+    () =>
+      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 +488,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}
@@ -393,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"
@@ -421,103 +541,175 @@ 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)}
+            uploadHref={uploadHref}
+            importLoomHref={importLoomHref}
+          >
+            <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")),
-                                },
-                              );
-                            }
-                          }
-                        : undefined
-                    }
-                    readOnly={!canManageRecordings}
-                  />
-                ))}
-              </div>
-            )}
-          </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" />
+                  </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) => (
+                          <div
+                            key={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>
+                  )}
+
+                  {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) => (
+                          <div
+                            key={r.id}
+                            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.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>
+                        ))}
+                      </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 7586bfda631..b00a0dbbbc3 100644
--- a/templates/clips/app/components/library/library-layout.tsx
+++ b/templates/clips/app/components/library/library-layout.tsx
@@ -25,24 +25,22 @@ import {
   IconUsersGroup,
   IconBrandChrome,
   IconDownload,
+  IconChevronDown,
   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 {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -78,15 +76,30 @@ 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 {
   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";
+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;
@@ -101,18 +114,81 @@ function readSidebarCollapsedPreference() {
 }
 
 function ClipsAgentToggleButton() {
+  return <AgentToggleButton showWhenOpen />;
+}
+
+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 (
-    <AgentToggleButton
-      showWhenOpen
-      icon={<IconLayoutSidebarRight className="size-5" aria-hidden />}
-    />
+    <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,
-}: LibraryLayoutProps) {
+export function LibraryLayout({ children }: LibraryLayoutProps) {
   const location = useLocation();
   const navigate = useNavigate();
   const t = useT();
@@ -170,9 +246,26 @@ export function LibraryLayout({
           parentId: f.parentId ?? null,
           spaceId: f.spaceId ?? null,
           name: f.name,
+          recordingCount: Number(f.recordingCount ?? 0),
         })),
     [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,
+        recordingCount: Number(folder.recordingCount ?? 0),
+      });
+      foldersBySpace.set(folder.spaceId, folders);
+    }
+    return foldersBySpace;
+  }, [libFolders]);
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const mobileSidebarRef = useRef<HTMLElement | null>(null);
@@ -180,6 +273,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 = [
@@ -215,7 +316,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 ? (
@@ -240,6 +341,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;
 
@@ -312,7 +422,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,
     },
     {
@@ -326,7 +437,7 @@ export function LibraryLayout({
       to: "/spaces",
       label: t("navigation.spaces"),
       icon: IconUsersGroup,
-      match: (p) => p.startsWith("/spaces"),
+      match: (p) => p === "/spaces" || p.startsWith("/spaces/"),
     },
     ...(meetingsExperimentEnabled
       ? [
@@ -385,20 +496,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}
@@ -424,12 +535,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>
@@ -437,6 +548,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 />
@@ -489,16 +625,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>
             )}
@@ -515,143 +651,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)}
@@ -662,23 +823,33 @@ 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
+            data-sidebar-footer-utilities
             className={cn(
-              "bg-transparent hover:bg-accent/60",
-              !showCollapsedSidebar && "min-w-0 flex-1",
+              showCollapsedSidebar
+                ? "flex flex-col items-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
+                  ? "!size-9 !p-0 [&>svg]:!size-4"
+                  : "min-w-0 flex-1",
+              )}
+              settingsPath="/settings/organization"
+              currentAppId="clips"
+              utilityLinks={workspaceUtilityLinks}
+            />
+            {collapseButton}
+          </div>
         </div>
       </aside>
 
@@ -700,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-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/library/library-primary-actions.tsx b/templates/clips/app/components/library/library-primary-actions.tsx
new file mode 100644
index 00000000000..5e8a29c462f
--- /dev/null
+++ b/templates/clips/app/components/library/library-primary-actions.tsx
@@ -0,0 +1,48 @@
+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 {
+  buildLibraryActionHrefs,
+  type LibraryActionScope,
+} from "./library-action-hrefs";
+import { PageHeaderActionGroup, PageHeaderPrimaryAction } from "./page-header";
+
+type LibraryPrimaryActionsProps = LibraryActionScope;
+
+export function LibraryPrimaryActions({
+  folderId,
+  spaceId,
+}: LibraryPrimaryActionsProps) {
+  const t = useT();
+  const { recordHref, uploadHref, importLoomHref } = buildLibraryActionHrefs({
+    folderId,
+    spaceId,
+  });
+
+  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.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 e498d2f8481..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";
@@ -76,22 +80,58 @@ 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}
     />
   );
 });
 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/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..d3dc0ed0998
--- /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-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" />
+      {!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/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 7e4aa9a6462..0f88c3dc80a 100644
--- a/templates/clips/app/components/player/share-dialog.test.ts
+++ b/templates/clips/app/components/player/share-dialog.test.ts
@@ -18,8 +18,11 @@ 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("[&>button]:top-1.5");
     expect(shareDialogSource).toContain("h-8 w-full justify-start");
     expect(shareDialogSource).toContain("<ViewerSwitch");
@@ -27,38 +30,48 @@ describe("recording share popover", () => {
     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>");
@@ -74,6 +87,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"',
@@ -101,18 +120,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");
 
@@ -168,6 +227,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");
 
@@ -185,15 +252,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",
     );
   });
 
@@ -208,8 +273,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 d52f4759086..ddd1cc7ec4c 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] [&>button]:top-1.5">
+      <DialogContent className="w-[calc(100vw-2rem)] overflow-hidden border-border p-0 sm:max-w-[360px] [&>button]:top-1.5">
         <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,130 @@ function LinkTab({
   onOpenEmbed: () => void;
 }) {
   const t = useT();
+
+  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 sharesLoaded = visibility !== null;
   const needsScopedAgentContext = !isPublic || hasPassword !== false;
   const publicAgentContextUrl = useMemo(
     () =>
@@ -542,7 +721,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 +729,6 @@ function LinkTab({
   const loadAgentContextUrl = useCallback(async () => {
     const requestId = agentLinkRequestIdRef.current + 1;
     agentLinkRequestIdRef.current = requestId;
-
     setAgentContextUrl("");
     setAgentLinkError(false);
 
@@ -573,32 +750,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 +778,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 +916,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 +1060,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/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/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/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/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-navigation-state.test.ts b/templates/clips/app/hooks/use-navigation-state.test.ts
index ac4675420bc..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", () => {
@@ -94,6 +99,18 @@ describe("Clips shared navigation", () => {
     });
   });
 
+  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");
+  });
+
   it("describes and maps the browser diagnostics panel", () => {
     expect(stateFromLocation("/r/recording-1", "?panel=debug")).toEqual({
       view: "recording",
diff --git a/templates/clips/app/hooks/use-navigation-state.ts b/templates/clips/app/hooks/use-navigation-state.ts
index e0539cb0284..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 } : {}),
     };
@@ -164,11 +172,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 } : {}),
@@ -210,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.
@@ -265,7 +282,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/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 e6bb552669a..9d938724687 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: "الحصول على تطبيق سطح المكتب",
@@ -505,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 الوصفية.",
@@ -1725,6 +1731,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 fc631046219..63e5a551339 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",
@@ -522,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.",
@@ -1759,6 +1765,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 78c41220ace..1e65a7b49f5 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",
@@ -502,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.",
@@ -1707,6 +1713,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 5f13465d895..bf69dc1bd11 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",
@@ -517,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.",
@@ -1750,6 +1756,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 518ce46f3b2..151adf3cebf 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",
@@ -516,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.",
@@ -1755,6 +1761,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 f6725f11754..67c0248d321 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: "डेस्कटॉप ऐप पाएँ",
@@ -499,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 अनुरोध मेटाडेटा जांचें।",
@@ -1700,6 +1706,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 991f94c3bdd..cc44e24748c 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: "デスクトップアプリを入手",
@@ -514,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 リクエストのメタデータを確認してください。",
@@ -1744,6 +1750,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 c5cbb9f73d0..cb974e6da0e 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: "데스크톱 앱 받기",
@@ -505,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 요청 메타데이터를 확인하세요.",
@@ -1720,6 +1726,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 b149bbd80c7..8e3513089f4 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",
@@ -513,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.",
@@ -1741,6 +1747,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 81df20aa26a..52f5a03d407 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: "获取桌面应用",
@@ -481,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 请求元数据。",
@@ -1657,6 +1663,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 5a7d70a657e..070a38d0808 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: "取得桌面應用",
@@ -481,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 請求中繼資料。",
@@ -1641,6 +1647,7 @@ const messages = {
     donePageTitle: "錯誤報告已提交 · Clips",
     eyebrow: "錯誤報告",
     title: "錄製錯誤報告",
+    sidebarCta: "傳送意見回饋",
     description: "為團隊擷取一段包含螢幕、語音和已遮蔽瀏覽器脈絡的簡短重現。",
     issueTitleLabel: "問題標題",
     issueTitlePlaceholder: "哪裡出錯了？",
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/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 ea358a4442e..e35f0e34286 100644
--- a/templates/clips/app/routes/_app.dictate.tsx
+++ b/templates/clips/app/routes/_app.dictate.tsx
@@ -20,7 +20,7 @@ import {
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Navigate } from "react-router";
+import { Navigate, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
 import { CaptureInstallButton } from "@/components/capture-install-options";
@@ -393,9 +393,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<
@@ -404,6 +411,12 @@ function DictationRow({ dictation }: { dictation: Dictation }) {
   >("update-dictation");
   const { label, icon } = sourceMeta(dictation.source, t);
 
+  useEffect(() => {
+    if (!initialExpanded) return;
+    setExpanded(true);
+    rowRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+  }, [initialExpanded]);
+
   const preview = (dictation.cleanedText || dictation.fullText || "").slice(
     0,
     140,
@@ -458,6 +471,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",
@@ -721,6 +735,8 @@ function DictateEmptyState({
 export default function DictateRoute() {
   const experiment = useExperimentState(CLIPS_WISPRFLOW.key);
   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);
@@ -975,7 +991,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">
@@ -1045,7 +1061,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..bc7acdf31c6 100644
--- a/templates/clips/app/routes/_app.library.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.library.folder.$folderId.tsx
@@ -3,7 +3,8 @@ import { useMemo } from "react";
 import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
-import { useFolders } from "@/hooks/use-library";
+import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
+import { useFolders, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -14,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
@@ -29,6 +35,11 @@ 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 b9096bbc18e..1242eaf07bb 100644
--- a/templates/clips/app/routes/_app.meetings._index.tsx
+++ b/templates/clips/app/routes/_app.meetings._index.tsx
@@ -603,21 +603,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);
@@ -628,7 +615,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" />
@@ -660,7 +647,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 1012931309e..3fb9c932819 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,13 +113,26 @@ 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");
     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");
@@ -128,12 +141,15 @@ 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).toContain("forceMount");
+    expect(route).toContain("data-[state=inactive]:hidden");
     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"',
+      "!editing && !isCompactLayout && !globalAgentSidebarOpen && panel",
     );
     const mobilePanelStart = route.indexOf('id="clip-activity-panel"');
     const mobilePanel = route.slice(
@@ -142,12 +158,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);
@@ -177,29 +189,52 @@ 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",
     );
+    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");
   });
 
-  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"',
@@ -207,17 +242,21 @@ 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(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("<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 187dfae4951..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,
@@ -46,7 +50,6 @@ import {
   IconBolt,
   IconMessage,
   IconExternalLink,
-  IconFolder,
   IconMoodSmile,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -64,7 +67,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 {
   BrowserDiagnosticsPanel,
   isFullBrowserDiagnostics,
@@ -101,14 +108,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,
@@ -419,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;
@@ -536,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);
@@ -573,16 +599,18 @@ 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]);
+    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
@@ -929,17 +957,23 @@ export default function RecordingPage() {
   }, [browserDiagnostics, canEdit, panel]);
 
   useEffect(() => {
+    if (panelParam === "agent") {
+      setPanel("transcript");
+      requestAgentSidebarOpen();
+      return;
+    }
     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 (
       (panelParam === "transcript" ||
         panelParam === "insights" ||
-        panelParam === "agent" ||
         panelParam === "debug" ||
         panelParam === "settings") &&
       (panelParam !== "settings" || canEdit) &&
@@ -947,7 +981,13 @@ export default function RecordingPage() {
     ) {
       setPanel(panelParam === "insights" ? "transcript" : panelParam);
     }
-  }, [browserDiagnostics, canEdit, panelParam]);
+  }, [
+    browserDiagnostics,
+    canEdit,
+    isCompactLayout,
+    panelParam,
+    recording?.enableComments,
+  ]);
 
   const builderCredits =
     (playerDataQ.data?.builderCredits as BuilderCreditsStatus | null) ?? null;
@@ -965,55 +1005,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).
@@ -1925,7 +1940,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>
@@ -1933,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">
@@ -1964,7 +1976,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 ? (
@@ -1992,9 +2004,18 @@ 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 data-[state=inactive]:hidden"
+          >
+            {renderCommentsSection(compact)}
+          </TabsContent>
+        ) : null}
         <TabsContent
           value="transcript"
           className="mt-0 flex-1 min-h-0 data-[state=inactive]:hidden"
@@ -2035,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"
@@ -2392,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">
@@ -2407,11 +2408,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}
@@ -2479,7 +2480,7 @@ export default function RecordingPage() {
                               onDraftChange={setCommentDraft}
                               onClose={() => setCommentOpen(false)}
                               onAdded={() => {
-                                setPanel("comments");
+                                if (isCompactLayout) setPanel("comments");
                                 void playerDataQ.refetch();
                               }}
                             />
@@ -2588,26 +2589,22 @@ export default function RecordingPage() {
                   </div>
                 </div>
 
-                {isCompactLayout ? (
+                {isCompactLayout && !globalAgentSidebarOpen ? (
                   <RecordingSidePanel
                     id="clip-activity-panel"
                     className="mt-2 lg:hidden"
                     tabs={renderPanelTabs()}
                   >
-                    {panel === "comments"
-                      ? renderCommentsSection(true)
-                      : renderSidePanel()}
+                    {renderSidePanel(true)}
                   </RecordingSidePanel>
-                ) : (
-                  renderCommentsSection()
-                )}
+                ) : null}
               </div>
             )}
           </div>
         </div>
 
         {/* Side panel */}
-        {!editing && !isCompactLayout && panel && panel !== "comments" ? (
+        {!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.spaces.$spaceId.folder.$folderId.tsx b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
index 087ff67b680..541422a8989 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx
@@ -3,7 +3,8 @@ import { useMemo } from "react";
 import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
-import { useFolders } from "@/hooks/use-library";
+import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
+import { useFolders, useOrganizations, useSpaces } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -17,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
@@ -33,6 +45,17 @@ 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 f30e9ab0bdd..f0c4f46af64 100644
--- a/templates/clips/app/routes/_app.spaces.$spaceId.tsx
+++ b/templates/clips/app/routes/_app.spaces.$spaceId.tsx
@@ -1,10 +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 { useFolders, useSpaces, useOrganizations } from "@/hooks/use-library";
+import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
+import { useSpaces, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -20,64 +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")}
-        />
-      </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 43988af4dee..9158a6010ed 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,
@@ -58,12 +66,12 @@ export default function SpacesIndexRoute() {
   return (
     <div className="flex flex-1 flex-col min-h-0">
       <PageHeader>
-        <PageBreadcrumb label={t("navigation.spaces")} />
-        {canManageOrg && (
+        <PageBreadcrumb items={[{ label: t("navigation.spaces") }]} />
+        {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/_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/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/app/routes/bug-report.tsx b/templates/clips/app/routes/bug-report.tsx
index 2faa9bdc5bd..252c42ed518 100644
--- a/templates/clips/app/routes/bug-report.tsx
+++ b/templates/clips/app/routes/bug-report.tsx
@@ -1,30 +1,13 @@
-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 +17,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 +27,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 +34,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 +60,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 27da4cd2a0f..274ea8f8621 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",
     );
@@ -150,7 +152,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"}',
@@ -166,11 +171,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", () => {
@@ -188,10 +194,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 52eca85fa0a..e6bd828c2c2 100644
--- a/templates/clips/app/routes/share.$shareId.tsx
+++ b/templates/clips/app/routes/share.$shareId.tsx
@@ -167,7 +167,7 @@ type SharePageLoaderData = {
   accessRequestToken?: string;
 };
 
-type SharePanel = "transcript" | "agent";
+type SharePanel = "comments" | "transcript" | "agent";
 
 type PendingAccountAction =
   | { intent: "comment"; atMs: number }
@@ -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>(
@@ -1411,104 +1420,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
+                      ? selectCommentsPanel
+                      : 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) {
+                            selectCommentsPanel();
+                            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 +1634,42 @@ 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
+              forceMount
+              value="comments"
+              className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]: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 +1701,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..e76af541b94
--- /dev/null
+++ b/templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md
@@ -0,0 +1,6 @@
+---
+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..ce6e62ff4fb
--- /dev/null
+++ b/templates/clips/changelog/2026-09-08-global-command-search.md
@@ -0,0 +1,6 @@
+---
+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/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/desktop/src-tauri/src/lib.rs b/templates/clips/desktop/src-tauri/src/lib.rs
index 19c74be3cba..b9e68f0a27c 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..6b82c31e826 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.
+    // 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(
diff --git a/templates/clips/desktop/src/app.tsx b/templates/clips/desktop/src/app.tsx
index d97c3e4c8b4..28a87fb3886 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"
     />
   );
 }
@@ -1351,7 +1351,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 9a620e02103..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="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 9f26e9fdda2..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,6 +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 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", () => {
@@ -95,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 f4fda4e9e2b..dc335c172f6 100644
--- a/templates/clips/desktop/src/styles.css
+++ b/templates/clips/desktop/src/styles.css
@@ -65,10 +65,8 @@
   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 main Tauri window is transparent and chromeless, so the HTML paints the
+   visible rounded popover while macOS supplies its shadow. */
 html,
 body {
   margin: 0;
@@ -519,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);
 }
 
@@ -530,13 +531,15 @@ 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;
 }
 
-.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 {
@@ -551,12 +554,13 @@ 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;
-  color: var(--fg-muted);
+  min-height: 30px;
+  padding: 5px 10px;
+}
+
+.system-audio-icon {
+  transform: translateX(2px);
 }
 
 .system-audio-label {
@@ -567,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);