@agent-native/core 0.86.0 → 0.87.0

package/corpus/templates/clips/app/routes/_app.settings.organization.tsx

@@ -1,11 +1,12 @@
 import { useActionQuery, useSession, useT } from "@agent-native/core/client";
-import { IconMailFast, IconUsers } from "@tabler/icons-react";
-import { useMemo } from "react";
-
-import { PageHeader } from "@/components/library/page-header";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@agent-native/toolkit/ui/card";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import {
   Table,
   TableBody,
@@ -13,7 +14,11 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "@agent-native/toolkit/ui/table";
+import { IconMailFast, IconUsers } from "@tabler/icons-react";
+import { useMemo } from "react";
+
+import { PageHeader } from "@/components/library/page-header";
 import { BrandingEditor } from "@/components/workspace/branding-editor";
 import { InviteDialog } from "@/components/workspace/invite-dialog";
 import {

package/corpus/templates/clips/app/routes/_app.spaces._index.tsx

@@ -1,4 +1,5 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import { IconPlus, IconUsersGroup } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -6,7 +7,6 @@ import { CreateSpaceDialog } from "@/components/library/create-space-dialog";
 import { EmptyState } from "@/components/library/empty-state";
 import { PageHeader } from "@/components/library/page-header";
 import { SpaceCard, type SpaceCardData } from "@/components/library/space-card";
-import { Button } from "@/components/ui/button";
 import { useSpaces, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 

package/corpus/templates/clips/app/routes/_app.trash.tsx

@@ -1,12 +1,4 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import { IconArrowBackUp, IconTrash } from "@tabler/icons-react";
-import { useMemo, useState } from "react";
-import { toast } from "sonner";
-
-import { EmptyState } from "@/components/library/empty-state";
-import { PageHeader } from "@/components/library/page-header";
-import { RecordingCard } from "@/components/library/recording-card";
-import { SortMenu, type SortKey } from "@/components/library/sort-menu";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -16,8 +8,16 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { IconArrowBackUp, IconTrash } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { EmptyState } from "@/components/library/empty-state";
+import { PageHeader } from "@/components/library/page-header";
+import { RecordingCard } from "@/components/library/recording-card";
+import { SortMenu, type SortKey } from "@/components/library/sort-menu";
 import { useRecordings, type RecordingSummary } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 

package/corpus/templates/clips/app/routes/bug-report.done.tsx

@@ -1,4 +1,5 @@
 import { appBasePath, useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   IconArrowLeft,
   IconCheck,
@@ -8,7 +9,6 @@ import {
 import { useEffect, useMemo, useState } from "react";
 import { Link, useLocation } from "react-router";
 
-import { Button } from "@/components/ui/button";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {

package/corpus/templates/clips/app/routes/bug-report.tsx

@@ -1,4 +1,15 @@
 import { appBasePath, useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import {
   bugReportContextToSearchParams,
   parseBugReportContext,
@@ -14,17 +25,6 @@ import {
 import { useEffect, useMemo, useState } 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 enMessages from "@/i18n/en-US";
 import { cn } from "@/lib/utils";
 

package/corpus/templates/clips/app/routes/download.tsx

@@ -1,4 +1,6 @@
 import { appBasePath, appPath, useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import {
   IconBrandChrome,
   IconBrandApple,
@@ -8,8 +10,6 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
 import enMessages from "@/i18n/en-US";
 import {
   clipsChromeExtensionEnabled,

package/corpus/templates/clips/app/routes/embed.$shareId.tsx

@@ -1,4 +1,5 @@
 import { appBasePath, useT } from "@agent-native/core/client";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useSearchParams } from "react-router";
@@ -8,7 +9,6 @@ import {
   VideoPlayer,
   type VideoPlayerHandle,
 } from "@/components/player/video-player";
-import { Spinner } from "@/components/ui/spinner";
 import { useViewTracking } from "@/hooks/use-view-tracking";
 import { parsePlaybackSpeed } from "@/lib/playback-speed";
 

package/corpus/templates/clips/app/routes/invite.$token.tsx

@@ -1,9 +1,4 @@
 import { callAction, useSession, useT } from "@agent-native/core/client";
-import { IconCheck, IconMailFast, IconX } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router";
-import { toast } from "sonner";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -13,9 +8,19 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@agent-native/toolkit/ui/card";
+import { IconCheck, IconMailFast, IconX } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { toast } from "sonner";
+
 import enMessages from "@/i18n/en-US";
 
 export function meta() {

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -10,6 +10,34 @@ import {
   useChangeVersions,
   useT,
 } from "@agent-native/core/client";
+import { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@agent-native/toolkit/ui/sheet";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@agent-native/toolkit/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   BUILDER_CREDITS_UPGRADE_URL,
   type BuilderCreditsStatus,
@@ -55,29 +83,6 @@ import {
   type VideoPlayerHandle,
 } from "@/components/player/video-player";
 import { StorageSetupCard } from "@/components/recorder/storage-setup-card";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetTitle,
-} from "@/components/ui/sheet";
-import { Spinner } from "@/components/ui/spinner";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { isDefaultTitle, useAutoTitleBridge } from "@/hooks/use-auto-title";
 import { usePlayerShortcuts } from "@/hooks/use-player-shortcuts";
 import { useViewTracking } from "@/hooks/use-view-tracking";

package/corpus/templates/clips/app/routes/record.tsx

@@ -6,6 +6,7 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { useLiveTranscription } from "@agent-native/core/client/transcription/use-live-transcription";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import type { BrowserDiagnosticsData } from "@shared/browser-diagnostics";
 import { waitForReadyRecordingAfterFinalizeError } from "@shared/finalize-recovery";
 import {
@@ -29,7 +30,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { Link, useLocation, useNavigate } from "react-router";
 
-import { Skeleton } from "@/components/ui/skeleton";
 import { useDesktopPromo } from "@/hooks/use-desktop-promo";
 import {
   fetchVideoStorageStatus,
@@ -82,6 +82,8 @@ async function writeAppState(key: string, value: unknown): Promise<void> {
     },
   );
 }
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import {
   bugReportTitle,
   parseBugReportContext,
@@ -108,8 +110,6 @@ import {
 } from "@/components/recorder/recorder-engine";
 import { RecordingToolbar } from "@/components/recorder/recording-toolbar";
 import { StorageSetupCard } from "@/components/recorder/storage-setup-card";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/spinner";
 
 export function meta() {
   return [{ title: enMessages.recordRoute.pageTitle }];

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -8,12 +8,21 @@ import {
   getBrowserTabId,
   useT,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
-  getRequestUserEmail,
-  signShortLivedToken,
-  verifyShortLivedToken,
-} from "@agent-native/core/server";
-import { resolveAccess } from "@agent-native/core/sharing";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@agent-native/toolkit/ui/tabs";
 import {
   IconAlertTriangle,
   IconArrowLeft,
@@ -54,16 +63,6 @@ import {
   type VideoPlayerHandle,
 } from "@/components/player/video-player";
 import { StorageSetupCard } from "@/components/recorder/storage-setup-card";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Spinner } from "@/components/ui/spinner";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { isDefaultTitle } from "@/hooks/use-auto-title";
 import { usePlayerShortcuts } from "@/hooks/use-player-shortcuts";
 import { useViewTracking } from "@/hooks/use-view-tracking";
@@ -71,10 +70,10 @@ import { parsePlaybackSpeed } from "@/lib/playback-speed";
 import { isStorageSetupFailureReason } from "@/lib/storage-failures";
 
 import { getDb, schema } from "../../server/db";
-import { CLIPS_AGENT_ACCESS_PARAM } from "../../server/lib/public-agent-context";
 import {
-  agentAccessTokenResourceId,
   buildAgentApiUrls,
+  CLIPS_AGENT_ACCESS_PARAM,
+  CLIP_AGENT_ACCESS_TOKEN_PREFIX,
   safeJsonForHtml,
 } from "../../shared/agent-context";
 import {
@@ -114,6 +113,7 @@ const PRIVATE_AGENT_SHARE_HEADERS = {
   "Cache-Control": "private, max-age=0, no-store",
   "Referrer-Policy": "no-referrer",
 };
+const CLIPS_AGENT_ACCESS_TTL_SECONDS = 2 * 60 * 60;
 
 function emptyLoaderData(url: URL): SharePageLoaderData {
   return {
@@ -172,6 +172,17 @@ function shouldShowGeneratedTitleSkeleton(
 export async function loader({ params, url }: LoaderFunctionArgs) {
   const id = params.shareId;
   if (!id) return emptyLoaderData(url);
+  const [
+    {
+      getRequestUserEmail,
+      signScopedAgentAccessToken,
+      verifyScopedAgentAccessToken,
+    },
+    { resolveAccess },
+  ] = await Promise.all([
+    import("@agent-native/core/server"),
+    import("@agent-native/core/sharing"),
+  ]);
 
   const [rec] = await getDb()
     .select({
@@ -192,10 +203,16 @@ export async function loader({ params, url }: LoaderFunctionArgs) {
     .where(eq(schema.recordings.id, id))
     .limit(1);
 
-  const agentAccessToken = url.searchParams.get(CLIPS_AGENT_ACCESS_PARAM) ?? "";
+  const agentAccessToken =
+    url.searchParams.get(CLIPS_AGENT_ACCESS_PARAM) ??
+    url.searchParams.get("t") ??
+    "";
   const hasAgentAccessToken = Boolean(agentAccessToken);
   const tokenGrantsAgentAccess = agentAccessToken
-    ? verifyShortLivedToken(agentAccessToken, agentAccessTokenResourceId(id)).ok
+    ? verifyScopedAgentAccessToken(agentAccessToken, {
+        resourceKind: CLIP_AGENT_ACCESS_TOKEN_PREFIX,
+        resourceId: id,
+      }).ok
     : false;
 
   if (!rec) return shareLoaderData(emptyLoaderData(url), hasAgentAccessToken);
@@ -233,7 +250,11 @@ export async function loader({ params, url }: LoaderFunctionArgs) {
     : canExposeAgentContext &&
         rec.password &&
         getRequestUserEmail() === rec.ownerEmail
-      ? signShortLivedToken({ resourceId: agentAccessTokenResourceId(id) })
+      ? signScopedAgentAccessToken({
+          resourceKind: CLIP_AGENT_ACCESS_TOKEN_PREFIX,
+          resourceId: id,
+          ttlSeconds: CLIPS_AGENT_ACCESS_TTL_SECONDS,
+        })
       : undefined;
   const canExposeAnonymousAgentContext = canExposeAgentContext && !rec.password;
   const canExposeOwnerAgentContext = canExposeAgentContext && Boolean(token);

package/corpus/templates/clips/app/routes/share.meeting.$meetingId.tsx

@@ -1,6 +1,8 @@
 import { PoweredByBadge, appPath, useT } from "@agent-native/core/client";
 import { getRequestUserEmail } from "@agent-native/core/server";
 import { resolveAccess } from "@agent-native/core/sharing";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import {
   IconCalendar,
   IconExternalLink,
@@ -16,8 +18,6 @@ import {
   AttendeeStack,
   type AttendeeStackParticipant,
 } from "@/components/meetings/attendee-stack";
-import { Button } from "@/components/ui/button";
-import { Spinner } from "@/components/ui/spinner";
 import enMessages from "@/i18n/en-US";
 
 import { getDb, schema } from "../../server/db";

package/corpus/templates/clips/changelog/2026-07-05-desktop-full-screen-recordings-with-system-audio-now-finaliz.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-05
+---
+
+Desktop full-screen recordings with system audio now finalize reliably when the microphone is enabled.

package/corpus/templates/clips/changelog/2026-07-05-desktop-recording-shortcut-start-stop.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-05
+---
+
+Desktop Clips can now use a custom global shortcut to start or stop recording.

package/corpus/templates/clips/changelog/2026-07-05-desktop-recordings-no-longer-fail-when-saved-capture-constra.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-05
+---
+
+Desktop recordings no longer fail when saved capture constraints are stale after an app update.

package/corpus/templates/clips/changelog/2026-07-05-permanently-deleted-clips-now-clean-up-s3-media-objects.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-05
+---
+
+Permanently deleted clips now clean up matching video and thumbnail objects from configured S3-compatible storage.

package/corpus/templates/clips/changelog/2026-07-05-timeline-zoom-controls-are-now-visible-in-the-clip-editor-an.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-05
+---
+
+Timeline zoom controls are now visible in the clip editor, support trackpad pinch gestures, and stay anchored while selecting ranges.

package/corpus/templates/clips/desktop/src/app.tsx

@@ -156,6 +156,7 @@ const VOICE_SHORTCUT_KEY = "clips:voice-shortcut";
 const VOICE_SHORTCUT_CONFIGURED_KEY = "clips:voice-shortcut-configured";
 const VOICE_CUSTOM_SHORTCUT_KEY = "clips:voice-custom-shortcut";
 const POPOVER_CUSTOM_SHORTCUT_KEY = "clips:popover-custom-shortcut";
+const RECORD_CUSTOM_SHORTCUT_KEY = "clips:record-custom-shortcut";
 const VOICE_MODE_KEY = "clips:voice-mode";
 const VOICE_PROVIDER_KEY = "clips:voice-provider";
 const VOICE_INSTRUCTIONS_KEY = "clips:voice-instructions";
@@ -596,6 +597,9 @@ export function App() {
   const [popoverCustomShortcut, setPopoverCustomShortcut] = useState<string>(
     () => loadStringAllowEmpty(POPOVER_CUSTOM_SHORTCUT_KEY, ""),
   );
+  const [recordCustomShortcut, setRecordCustomShortcut] = useState<string>(() =>
+    loadStringAllowEmpty(RECORD_CUSTOM_SHORTCUT_KEY, ""),
+  );
   const [voiceMode, setVoiceMode] = useState<VoiceMode>(() => {
     const saved = loadString(VOICE_MODE_KEY, "push-to-talk");
     return saved === "toggle" ? "toggle" : "push-to-talk";
@@ -656,6 +660,7 @@ export function App() {
   const isRecording = recorder !== null;
   // Whether the popover window is shown; driven by the visibility effect below.
   const [popoverVisible, setPopoverVisible] = useState(false);
+  const recordShortcutHandlerRef = useRef<() => void>(() => {});
   // Mirrors `bubbleActive` (assigned below once it is computed) so device
   // probes can synchronously tell whether the camera bubble owns the grant.
   const bubbleActiveRef = useRef(false);
@@ -779,6 +784,7 @@ export function App() {
     invoke("set_custom_shortcuts", {
       voice: voiceShortcut === "custom" ? voiceCustomShortcut : null,
       popover: popoverCustomShortcut.trim() ? popoverCustomShortcut : null,
+      record: recordCustomShortcut.trim() ? recordCustomShortcut : null,
     })
       .then(() => {
         if (!cancelled) setShortcutRegistrationError(null);
@@ -794,7 +800,12 @@ export function App() {
     return () => {
       cancelled = true;
     };
-  }, [popoverCustomShortcut, voiceCustomShortcut, voiceShortcut]);
+  }, [
+    popoverCustomShortcut,
+    recordCustomShortcut,
+    voiceCustomShortcut,
+    voiceShortcut,
+  ]);
 
   // ---- auth status --------------------------------------------------------
   // The Tauri WebView has its own cookie jar (separate from the user's
@@ -1571,6 +1582,10 @@ export function App() {
     () => saveString(POPOVER_CUSTOM_SHORTCUT_KEY, popoverCustomShortcut),
     [popoverCustomShortcut],
   );
+  useEffect(
+    () => saveString(RECORD_CUSTOM_SHORTCUT_KEY, recordCustomShortcut),
+    [recordCustomShortcut],
+  );
   useEffect(() => saveString(VOICE_MODE_KEY, voiceMode), [voiceMode]);
   useEffect(
     () => saveString(VOICE_PROVIDER_KEY, voiceProvider),
@@ -1952,6 +1967,66 @@ export function App() {
     setRecError(message);
   }
 
+  recordShortcutHandlerRef.current = () => {
+    if (recorder) {
+      emit("clips:recorder-stop").catch(() => {});
+      return;
+    }
+    if (recordingFlowGateRef.current || recordingFlowActive) {
+      emit("clips:countdown-cancel").catch(() => {});
+      return;
+    }
+
+    setShowSettings(false);
+    if (authStatus === "anon" && localRecordingMode === "off") {
+      setRecError("Sign in to Clips before using the recording shortcut.");
+      invoke("show_popover").catch(() => {});
+      return;
+    }
+
+    const canStartFromGlobalShortcut =
+      mode === "camera" || nativeFullscreenRecordingActive;
+    if (!canStartFromGlobalShortcut) {
+      setRecError(
+        "Open Clips and click Start recording to use the selected source.",
+      );
+      invoke("show_popover").catch(() => {});
+      return;
+    }
+
+    void handleStartRecording({ ignoreActiveRecorder: true });
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+    let unlisten: (() => void) | null = null;
+    listen("clips:record-shortcut", () => {
+      recordShortcutHandlerRef.current();
+    })
+      .then((u) => {
+        if (cancelled) {
+          try {
+            u();
+          } catch {
+            // ignore
+          }
+          return;
+        }
+        unlisten = u;
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+      if (unlisten) {
+        try {
+          unlisten();
+        } catch {
+          // ignore
+        }
+      }
+    };
+  }, []);
+
   function updateReadinessOpen(next: boolean) {
     setReadinessOpen(next);
     if (!next) saveBool(READINESS_REVIEWED_KEY, true);
@@ -2128,6 +2203,7 @@ export function App() {
           voiceShortcut={voiceShortcut}
           voiceCustomShortcut={voiceCustomShortcut}
           popoverCustomShortcut={popoverCustomShortcut}
+          recordCustomShortcut={recordCustomShortcut}
           voiceMode={voiceMode}
           voiceProvider={voiceProvider}
           voiceInstructions={voiceInstructions}
@@ -2135,6 +2211,7 @@ export function App() {
           onVoiceShortcutChange={updateVoiceShortcut}
           onVoiceCustomShortcutChange={setVoiceCustomShortcut}
           onPopoverCustomShortcutChange={setPopoverCustomShortcut}
+          onRecordCustomShortcutChange={setRecordCustomShortcut}
           onVoiceModeChange={setVoiceMode}
           onVoiceProviderChange={setVoiceProvider}
           onVoiceInstructionsChange={setVoiceInstructions}
@@ -3059,6 +3136,7 @@ function Setup({
   voiceShortcut,
   voiceCustomShortcut,
   popoverCustomShortcut,
+  recordCustomShortcut,
   voiceMode,
   voiceProvider,
   voiceInstructions,
@@ -3066,6 +3144,7 @@ function Setup({
   onVoiceShortcutChange,
   onVoiceCustomShortcutChange,
   onPopoverCustomShortcutChange,
+  onRecordCustomShortcutChange,
   onVoiceModeChange,
   onVoiceProviderChange,
   onVoiceInstructionsChange,
@@ -3079,6 +3158,7 @@ function Setup({
   voiceShortcut: VoiceShortcutPreference;
   voiceCustomShortcut: string;
   popoverCustomShortcut: string;
+  recordCustomShortcut: string;
   voiceMode: VoiceMode;
   voiceProvider: VoiceProvider;
   voiceInstructions: string;
@@ -3086,6 +3166,7 @@ function Setup({
   onVoiceShortcutChange: (value: VoiceShortcutPreference) => void;
   onVoiceCustomShortcutChange: (value: string) => void;
   onPopoverCustomShortcutChange: (value: string) => void;
+  onRecordCustomShortcutChange: (value: string) => void;
   onVoiceModeChange: (value: VoiceMode) => void;
   onVoiceProviderChange: (value: VoiceProvider) => void;
   onVoiceInstructionsChange: (value: string) => void;
@@ -3967,6 +4048,22 @@ function Setup({
         </div>
       </details>
 
+      <div className="setup-section">
+        <SettingLabel
+          label="Start/stop recording shortcut"
+          hint="Optional global shortcut for starting full-screen, region, or camera recordings and stopping the active recording."
+        />
+        <ShortcutRecorder
+          value={recordCustomShortcut}
+          placeholder="Record shortcut"
+          onChange={onRecordCustomShortcutChange}
+        />
+        <p className="setup-hint">
+          Window and browser-tab sources still open Clips first so the picker
+          can use a click.
+        </p>
+      </div>
+
       <div className="setup-section">
         <SettingLabel
           label="Open Clips shortcut"