@agent-native/core 0.178.0 → 0.178.1-nightly-20260909221943

package/corpus/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}

package/corpus/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"}

package/corpus/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}

package/corpus/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",

package/corpus/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,
+    },
+  );
+}

package/corpus/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) {

package/corpus/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}
       />
     ),

package/corpus/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",

package/corpus/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();
+}

package/corpus/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));
+}

package/corpus/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 />
     </>

package/corpus/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>

package/corpus/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 />}
     />
   );
 }

package/corpus/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} />}
     />
   );
 }

package/corpus/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>