@agent-native/core 0.68.2 → 0.69.0

package/corpus/README.md

@@ -28,4 +28,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 ## Generated Counts
 
 - core files: 1138
-- template files: 3944
+- template files: 3945

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @agent-native/core
 
+## 0.69.0
+
+### Minor Changes
+
+- 530de18: Add Firecrawl as a BYOK backend for the web-search agent tool. When `FIRECRAWL_API_KEY` is configured (via app secrets or environment) the tool routes searches through Firecrawl's `/v2/search` API. It slots into the existing first-configured-wins chain after Brave, Tavily, and Exa, and before Builder-managed search, and is registered as an optional framework secret so it surfaces in every template's settings UI.
+
+## 0.68.3
+
+### Patch Changes
+
+- 9db3c12: Fix Cloudflare Pages worker bundling for content-heavy templates and add the published Clips Chrome extension URL defaults.
+
 ## 0.68.2
 
 ### Patch Changes

package/corpus/core/docs/content/template-clips.md

@@ -54,10 +54,13 @@ itself. The Chrome extension is the path for active-tab developer logs and
 browser-only repros. In the Clips UI, use the Chrome option for browser logs and
 the desktop app for the most seamless everyday capture path.
 
+The Agent-Native Clips Chrome extension listing is
+`https://chromewebstore.google.com/detail/baoipacpchggcdigagnajakiidcgcffn`.
 If you host your own Clips server, keep the Chrome extension option hidden until
-your Web Store listing is live. Set `VITE_CLIPS_CHROME_EXTENSION_ENABLED=1` and
-`VITE_CLIPS_CHROME_EXTENSION_URL=<chrome-web-store-url>` after approval to show
-the extension beside desktop-app download prompts.
+your Web Store listing is live. Set `VITE_CLIPS_CHROME_EXTENSION_ENABLED=1`
+after approval to show the extension beside desktop-app download prompts. Set
+`VITE_CLIPS_CHROME_EXTENSION_URL` only if you need to override the default
+listing URL.
 
 ## Agent-readable clips
 
@@ -165,7 +168,7 @@ Clips is a larger template with a native recorder (it ships a desktop companion
 
 1. **Video storage (required).** Connect a storage backend through the onboarding wizard. The easiest path is Builder.io (free during beta, one-click). For self-hosted storage, set `S3_ENDPOINT`, `S3_BUCKET`, `S3_ACCESS_KEY_ID`, `S3_SECRET_ACCESS_KEY`, and optionally `S3_REGION` and `S3_PUBLIC_BASE_URL`. Cloudflare R2 and DigitalOcean Spaces use the same env vars with the `R2_*` prefix.
 2. **Google Calendar (optional).** To sync upcoming meetings, connect a Google Calendar account from Settings. The OAuth callback URL in dev is `http://localhost:8094/_agent-native/google/callback`. Set up a Google OAuth client in [Google Cloud Console](https://console.cloud.google.com/) with the Gmail and Google Calendar APIs enabled.
-3. **Screen-capture permissions.** On macOS, grant Screen Recording permission to the browser (or the desktop companion app) in System Settings → Privacy & Security → Screen Recording. Browser recordings can save redacted console and fetch/XHR diagnostics from the recorder page. Once a deployment has a published Clips Chrome extension URL, enable `VITE_CLIPS_CHROME_EXTENSION_ENABLED=1` and set `VITE_CLIPS_CHROME_EXTENSION_URL` so users can choose the extension for active-tab browser logs or the desktop app for the smoothest native capture path.
+3. **Screen-capture permissions.** On macOS, grant Screen Recording permission to the browser (or the desktop companion app) in System Settings → Privacy & Security → Screen Recording. Browser recordings can save redacted console and fetch/XHR diagnostics from the recorder page. Once the Chrome extension listing is available, enable `VITE_CLIPS_CHROME_EXTENSION_ENABLED=1` so users can choose the extension for active-tab browser logs or the desktop app for the smoothest native capture path.
 4. **Slack previews (optional).** Create a Slack app with `links:read`, `links:write`, and `links.embed:write`; subscribe to `link_shared`; add your Clips share domain under **App Unfurl Domains**; set the Request URL to `https://your-clips.example.com/api/slack/unfurl`; and add the OAuth redirect URL `https://your-clips.example.com/api/slack/oauth/callback`. Configure `SLACK_CLIENT_ID`, `SLACK_CLIENT_SECRET`, and `SLACK_SIGNING_SECRET`, then connect workspaces from Clips Settings.
 
 ### Host your own Clips server
@@ -209,9 +212,11 @@ tray app at your deployment.
 
 5. **Enable the Chrome extension after publishing.** Keep
    `VITE_CLIPS_CHROME_EXTENSION_ENABLED` unset until the Chrome Web Store listing
-   is approved and you have a public extension URL. Then set it to `1` and set
-   `VITE_CLIPS_CHROME_EXTENSION_URL` to reveal the browser-log option beside the
-   desktop app prompts.
+   is approved. Then set it to `1` to reveal the browser-log option beside the
+   desktop app prompts. The default listing URL is
+   `https://chromewebstore.google.com/detail/baoipacpchggcdigagnajakiidcgcffn`;
+   set `VITE_CLIPS_CHROME_EXTENSION_URL` only if your deployment uses a
+   different extension listing.
 
 6. **Connect optional integrations.** Google Calendar powers the Meetings tab,
    `GEMINI_API_KEY` or Builder.io Connect powers transcript cleanup and titles,

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.68.2",
+  "version": "0.69.0",
   "type": "module",
   "engines": {
     "node": ">=22"

package/corpus/core/src/client/AgentPanel.tsx

@@ -76,10 +76,8 @@ const MultiTabAssistantChatLazy = lazy(() =>
   })),
 );
 import type { MultiTabAssistantChatHeaderProps } from "./MultiTabAssistantChat.js";
-import {
-  assistantUiRecoverableRenderErrorKind,
-  type AssistantChatProps,
-} from "./AssistantChat.js";
+import type { AssistantChatProps } from "./AssistantChat.js";
+import { assistantUiRecoverableRenderErrorKind } from "./assistant-ui-recovery.js";
 import { useDevMode } from "./use-dev-mode.js";
 import { useScreenRefreshKey } from "./use-db-sync.js";
 import { useQuery, useQueryClient } from "@tanstack/react-query";

package/corpus/core/src/extensions/content-patch.ts

@@ -116,13 +116,23 @@ export async function applyExtensionContentUpdate(
 export async function formatExtensionHtml(content: string): Promise<string> {
   try {
     const prettier = await import("prettier");
-    return await prettier.format(content, {
+    const formatted = await prettier.format(content, {
       parser: "html",
       htmlWhitespaceSensitivity: "ignore",
     });
+    return typeof formatted === "string" ? formatted : content;
   } catch (err: any) {
+    const message = String(err?.message ?? err);
+    if (
+      message.includes("Cannot find package 'prettier'") ||
+      message.includes('Cannot find package "prettier"') ||
+      message.includes("Cannot find module 'prettier'") ||
+      message.includes('Cannot find module "prettier"')
+    ) {
+      return content;
+    }
     throw new Error(
-      `Unable to format extension HTML with Prettier: ${err?.message ?? err}`,
+      `Unable to format extension HTML with Prettier: ${message}`,
     );
   }
 }

package/corpus/core/src/extensions/web-search-tool.ts

@@ -7,13 +7,15 @@
  *   1. Brave Search API  (BRAVE_SEARCH_API_KEY)
  *   2. Tavily            (TAVILY_API_KEY)
  *   3. Exa               (EXA_API_KEY)
- *   4. Builder.io        (connected Builder credentials)
+ *   4. Firecrawl         (FIRECRAWL_API_KEY)
+ *   5. Builder.io        (connected Builder credentials)
  *
  * The first configured backend wins. If none is configured, the tool
  * returns a helpful message telling the user which keys to add.
  *
- * Connect Builder.io or register BRAVE_SEARCH_API_KEY, TAVILY_API_KEY, or
- * EXA_API_KEY via app secrets settings or environment variables.
+ * Connect Builder.io or register BRAVE_SEARCH_API_KEY, TAVILY_API_KEY,
+ * EXA_API_KEY, or FIRECRAWL_API_KEY via app secrets settings or environment
+ * variables.
  */
 
 import type { ActionEntry } from "../agent/production-agent.js";
@@ -222,6 +224,40 @@ async function searchExa(
   }));
 }
 
+async function searchFirecrawl(
+  query: string,
+  count: number,
+  apiKey: string,
+): Promise<WebSearchResult[]> {
+  const res = await fetch("https://api.firecrawl.dev/v2/search", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify({
+      query,
+      limit: count,
+    }),
+    signal: AbortSignal.timeout(15_000),
+  });
+  if (!res.ok) {
+    throw new Error(`Firecrawl error ${res.status}: ${await res.text()}`);
+  }
+  // v2 groups results by source ({ data: { web: [...] } }); older shapes
+  // return a flat array ({ data: [...] }). Accept both defensively.
+  type FirecrawlResult = { title?: string; url?: string; description?: string };
+  const data = (await res.json()) as {
+    data?: FirecrawlResult[] | { web?: FirecrawlResult[] };
+  };
+  const results = Array.isArray(data.data) ? data.data : (data.data?.web ?? []);
+  return results.map((r) => ({
+    title: r.title ?? "",
+    url: r.url ?? "",
+    snippet: r.description ?? "",
+  }));
+}
+
 async function searchBuilderManaged(
   query: string,
   count: number,
@@ -287,7 +323,7 @@ export function createWebSearchToolEntry(
     "web-search": {
       tool: {
         description:
-          "Search the public web. Use to find API documentation, endpoints, current information, or any topic. Returns ranked results from BYOK providers or a grounded Builder-managed summary. Follow up with web-request or provider-api-docs using responseMode:'markdown' or responseMode:'matches' to fetch clean text, links, or compact snippets from promising URLs. Requires either Connect Builder.io or one of: BRAVE_SEARCH_API_KEY, TAVILY_API_KEY, or EXA_API_KEY.",
+          "Search the public web. Use to find API documentation, endpoints, current information, or any topic. Returns ranked results from BYOK providers or a grounded Builder-managed summary. Follow up with web-request or provider-api-docs using responseMode:'markdown' or responseMode:'matches' to fetch clean text, links, or compact snippets from promising URLs. Requires either Connect Builder.io or one of: BRAVE_SEARCH_API_KEY, TAVILY_API_KEY, EXA_API_KEY, or FIRECRAWL_API_KEY.",
         parameters: {
           type: "object" as const,
           properties: {
@@ -318,6 +354,7 @@ export function createWebSearchToolEntry(
         const braveKey = await resolveSearchKey("BRAVE_SEARCH_API_KEY", opts);
         const tavilyKey = await resolveSearchKey("TAVILY_API_KEY", opts);
         const exaKey = await resolveSearchKey("EXA_API_KEY", opts);
+        const firecrawlKey = await resolveSearchKey("FIRECRAWL_API_KEY", opts);
         const builderCredentials = await resolveBuilderSearchCredentials(opts);
 
         let results: WebSearchResult[];
@@ -334,6 +371,9 @@ export function createWebSearchToolEntry(
           } else if (exaKey) {
             results = await searchExa(query, count, exaKey);
             backend = "Exa";
+          } else if (firecrawlKey) {
+            results = await searchFirecrawl(query, count, firecrawlKey);
+            backend = "Firecrawl";
           } else if (builderCredentials) {
             managedText = await searchBuilderManaged(
               query,
@@ -350,6 +390,7 @@ export function createWebSearchToolEntry(
               "  • BRAVE_SEARCH_API_KEY  — https://brave.com/search/api/",
               "  • TAVILY_API_KEY        — https://tavily.com/",
               "  • EXA_API_KEY           — https://exa.ai/",
+              "  • FIRECRAWL_API_KEY     — https://firecrawl.dev/",
             ].join("\n");
           }
         } catch (err: unknown) {

package/corpus/core/src/secrets/register-framework-secrets.ts

@@ -47,6 +47,13 @@ export function registerFrameworkSecrets(): void {
         "Enables the web-search agent tool via Exa. Used as fallback when Brave and Tavily are not set and before Builder-managed search.",
       docsUrl: "https://exa.ai/",
     },
+    {
+      key: "FIRECRAWL_API_KEY",
+      label: "Firecrawl API Key",
+      description:
+        "Enables the web-search agent tool via Firecrawl. Used as fallback when Brave, Tavily, and Exa are not set and before Builder-managed search.",
+      docsUrl: "https://firecrawl.dev/",
+    },
   ];
 
   for (const entry of webSearchKeys) {

package/corpus/core/src/server/social-og-image.ts

@@ -330,7 +330,12 @@ export function renderAgentNativeOgImageSvg(
 export async function renderAgentNativeOgImagePng(
   input: AgentNativeOgImageInput = {},
 ): Promise<Uint8Array> {
-  const { Resvg } = await import(/* @vite-ignore */ "@resvg/resvg-js");
+  const overridePackage =
+    typeof process !== "undefined"
+      ? process.env.AGENT_NATIVE_RESVG_PACKAGE
+      : undefined;
+  const resvgPackage = overridePackage || "@resvg/resvg-js";
+  const { Resvg } = await import(/* @vite-ignore */ resvgPackage);
   // Feed resvg the embedded Liberation Sans font explicitly. System fonts can't
   // be relied on: Linux serverless runtimes (Netlify/Lambda) ship neither Arial
   // nor Inter, so without a bundled font every `<text>` rendered blank.

package/corpus/core/src/vite/client.ts

@@ -1320,6 +1320,87 @@ function ssrStubPlugin(packages: string[]): Plugin | null {
   if (!packages.length) return null;
   const stubbed = new Set(packages);
   const STUB_ID = "\0agent-native-ssr-stub";
+  const namedExports = [
+    "ActionBarPrimitive",
+    "AllSelection",
+    "Array",
+    "AssistantRuntimeProvider",
+    "Awareness",
+    "BranchPickerPrimitive",
+    "BubbleMenu",
+    "CodeBlockLowlight",
+    "Collaboration",
+    "CollaborationCaret",
+    "ComposerPrimitive",
+    "CompositeAttachmentAdapter",
+    "DOMParser",
+    "Decoration",
+    "DecorationSet",
+    "Editor",
+    "EditorContent",
+    "Extension",
+    "FitAddon",
+    "Fragment",
+    "Image",
+    "Link",
+    "Map",
+    "Markdown",
+    "Mark",
+    "MessagePrimitive",
+    "Node",
+    "NodeSelection",
+    "NodeViewContent",
+    "NodeViewWrapper",
+    "Placeholder",
+    "Plugin",
+    "PluginKey",
+    "ReactNodeViewRenderer",
+    "Selection",
+    "SimpleImageAttachmentAdapter",
+    "SimpleTextAttachmentAdapter",
+    "StarterKit",
+    "Table",
+    "TableCell",
+    "TableHeader",
+    "TableRow",
+    "TaskItem",
+    "TaskList",
+    "Terminal",
+    "TextSelection",
+    "ThreadPrimitive",
+    "WebLinksAddon",
+    "captureException",
+    "common",
+    "createLowlight",
+    "defaultUrlTransform",
+    "extensions",
+    "findTable",
+    "format",
+    "Doc",
+    "getHTMLFromFragment",
+    "getIsolationScope",
+    "init",
+    "isChangeOrigin",
+    "mergeAttributes",
+    "renderToString",
+    "applyUpdate",
+    "encodeStateVector",
+    "encodeStateAsUpdate",
+    "mergeUpdates",
+    "useAui",
+    "useComposer",
+    "useComposerRuntime",
+    "useCurrentEditor",
+    "useEditor",
+    "useLocalRuntime",
+    "useMessagePartText",
+    "useMessageRuntime",
+    "useThread",
+    "useThreadRuntime",
+    "withScope",
+    "XmlFragment",
+    "XmlText",
+  ];
   return {
     name: "agent-native-ssr-stub-heavy-libs",
     enforce: "pre",
@@ -1345,7 +1426,8 @@ function ssrStubPlugin(packages: string[]): Plugin | null {
         "return new Proxy(() => {}, handler); " +
         "} };" +
         "const stub = new Proxy(() => {}, handler);" +
-        "export default stub;"
+        "export default stub;" +
+        namedExports.map((name) => `export const ${name} = stub;`).join("")
       );
     },
   };

package/corpus/templates/clips/app/components/recorder/pre-record-panel.tsx

@@ -48,6 +48,10 @@ import {
   type RecordingMode,
 } from "./recorder-engine";
 import type { CameraBubbleSize } from "./camera-bubble";
+import {
+  loadRecorderPreferences,
+  saveRecorderPreferences,
+} from "@/lib/recorder-preferences";
 import { CameraVisualizer, type CameraTestStatus } from "./camera-visualizer";
 import {
   MicrophoneVisualizer,
@@ -184,11 +188,14 @@ export function PreRecordPanel({
 }: PreRecordPanelProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const loomInputRef = useRef<HTMLInputElement>(null);
+  // Saved selections from the last visit. A `?mode=`/`?surface=` deep link
+  // (initialMode/initialDisplaySurface) still takes precedence over them.
+  const savedPrefs = useMemo(() => loadRecorderPreferences(), []);
   const [mode, setMode] = useState<RecordingMode>(
-    () => initialMode ?? "screen+camera",
+    () => initialMode ?? savedPrefs.mode ?? "screen+camera",
   );
   const [displaySurface, setDisplaySurface] = useState<DisplaySurface>(
-    () => initialDisplaySurface ?? "window",
+    () => initialDisplaySurface ?? savedPrefs.displaySurface ?? "window",
   );
   const [sourceOpen, setSourceOpen] = useState(false);
   const [deviceSettingsOpen, setDeviceSettingsOpen] = useState(false);
@@ -197,8 +204,12 @@ export function PreRecordPanel({
   const [loomError, setLoomError] = useState<string | null>(null);
   const [mics, setMics] = useState<MediaDeviceInfo[]>([]);
   const [cameras, setCameras] = useState<MediaDeviceInfo[]>([]);
-  const [micId, setMicId] = useState<string>("default");
-  const [cameraId, setCameraId] = useState<string>("default");
+  const [micId, setMicId] = useState<string>(
+    () => savedPrefs.micId ?? "default",
+  );
+  const [cameraId, setCameraId] = useState<string>(
+    () => savedPrefs.cameraId ?? "default",
+  );
   const [enumError, setEnumError] = useState<string | null>(null);
   const [micAccessStatus, setMicAccessStatus] =
     useState<DeviceAccessStatus>("idle");
@@ -274,13 +285,56 @@ export function PreRecordPanel({
     [mics],
   );
 
+  // Reset to "default" only once a populated list genuinely excludes the saved
+  // device — an empty list means "not enumerated yet", and resetting then would
+  // wipe a restored preference before devices load.
   useEffect(() => {
     if (micId === "default" || micId === NO_MIC_DEVICE_ID) return;
-    if (!mics.some((mic) => mic.deviceId === micId)) {
+    if (mics.length > 0 && !mics.some((mic) => mic.deviceId === micId)) {
       setMicId("default");
     }
   }, [micId, mics]);
 
+  // Same guard for cameras. Not persisted, so a temporarily missing device
+  // doesn't erase the saved choice.
+  useEffect(() => {
+    if (cameraId === "default" || cameraId === NO_CAMERA_DEVICE_ID) return;
+    if (
+      cameras.length > 0 &&
+      !cameras.some((camera) => camera.deviceId === cameraId)
+    ) {
+      setCameraId("default");
+    }
+  }, [cameraId, cameras]);
+
+  // Camera-only mode needs a camera — coerce a restored "off" sentinel to
+  // "default" so Start doesn't forward it as an exact deviceId (covers the
+  // ?mode=camera deep-link/restore path the mode buttons already handle).
+  useEffect(() => {
+    if (mode === "camera" && cameraId === NO_CAMERA_DEVICE_ID) {
+      setCameraId("default");
+    }
+  }, [mode, cameraId]);
+
+  // Persist deliberate picks only (not the resets above), so an unavailable
+  // device on load can't clobber the stored preference.
+  const chooseMode = useCallback((value: RecordingMode) => {
+    setMode(value);
+    saveRecorderPreferences({ mode: value });
+  }, []);
+  const chooseDisplaySurface = useCallback((value: DisplaySurface) => {
+    setDisplaySurface(value);
+    saveRecorderPreferences({ displaySurface: value });
+  }, []);
+  const chooseMic = useCallback((value: string) => {
+    setMicId(value);
+    saveRecorderPreferences({ micId: value });
+  }, []);
+  const chooseCamera = useCallback((value: string) => {
+    setCameraId(value);
+    saveRecorderPreferences({ cameraId: value });
+  }, []);
+
   const requestMicrophoneChoices = useCallback(async () => {
     if (!navigator.mediaDevices?.getUserMedia) {
       setMicAccessStatus("error");
@@ -376,9 +430,9 @@ export function PreRecordPanel({
         void requestMicrophoneChoices();
         return;
       }
-      setMicId(value);
+      chooseMic(value);
     },
-    [requestMicrophoneChoices],
+    [requestMicrophoneChoices, chooseMic],
   );
 
   const handleMicSignalChange = useCallback((hasSignal: boolean) => {
@@ -530,12 +584,12 @@ export function PreRecordPanel({
                 key={opt.value}
                 type="button"
                 onClick={() => {
-                  setMode(opt.value);
+                  chooseMode(opt.value);
                   if (
                     opt.value === "camera" &&
                     cameraId === NO_CAMERA_DEVICE_ID
                   ) {
-                    setCameraId("default");
+                    chooseCamera("default");
                   }
                 }}
                 className={cn(
@@ -605,7 +659,7 @@ export function PreRecordPanel({
                   <button
                     key={opt.value}
                     type="button"
-                    onClick={() => setDisplaySurface(opt.value)}
+                    onClick={() => chooseDisplaySurface(opt.value)}
                     className={cn(
                       "flex min-h-[76px] flex-col rounded-lg border p-2 text-left transition-colors",
                       active
@@ -703,7 +757,7 @@ export function PreRecordPanel({
                   <Switch
                     checked={audioEnabled}
                     onCheckedChange={(checked) =>
-                      setMicId(checked ? "default" : NO_MIC_DEVICE_ID)
+                      chooseMic(checked ? "default" : NO_MIC_DEVICE_ID)
                     }
                     disabled={busy}
                     aria-label="Include audio in this recording"
@@ -740,7 +794,7 @@ export function PreRecordPanel({
                     </div>
                     <Select
                       value={cameraId}
-                      onValueChange={setCameraId}
+                      onValueChange={chooseCamera}
                       disabled={!needsCamera}
                     >
                       <SelectTrigger className="h-9 min-w-0 flex-1 border-0 bg-transparent px-2 shadow-none hover:bg-muted/45 focus:ring-0 focus:ring-offset-0 disabled:opacity-60">
@@ -762,7 +816,9 @@ export function PreRecordPanel({
                       <Switch
                         checked={needsCamera}
                         onCheckedChange={(checked) =>
-                          setCameraId(checked ? "default" : NO_CAMERA_DEVICE_ID)
+                          chooseCamera(
+                            checked ? "default" : NO_CAMERA_DEVICE_ID,
+                          )
                         }
                         disabled={busy}
                         aria-label="Include camera in this recording"

package/corpus/templates/clips/app/components/recorder/recorder-engine.ts

@@ -186,6 +186,17 @@ function errorName(err: unknown): string {
   return (err as { name?: string } | null)?.name ?? "";
 }
 
+// getUserMedia failed because the requested device is gone (unplugged / stale
+// saved id), not a permission error — recoverable by retrying with the default.
+function isDeviceUnavailableError(err: unknown): boolean {
+  const name = errorName(err);
+  return (
+    name === "OverconstrainedError" ||
+    name === "NotFoundError" ||
+    name === "DevicesNotFoundError"
+  );
+}
+
 function errorMessage(err: unknown): string {
   return err instanceof Error ? err.message : String(err || "Unknown error");
 }
@@ -592,7 +603,20 @@ export class RecorderEngine {
             audio: false,
           });
         } catch (err) {
-          throw this.friendlyError(err, "camera");
+          // Stale/unplugged cameraDeviceId — retry with the default camera
+          // instead of failing the recording.
+          if (this.opts.cameraDeviceId && isDeviceUnavailableError(err)) {
+            try {
+              this.cameraStream = await navigator.mediaDevices.getUserMedia({
+                video: true,
+                audio: false,
+              });
+            } catch (retryErr) {
+              throw this.friendlyError(retryErr, "camera");
+            }
+          } else {
+            throw this.friendlyError(err, "camera");
+          }
         }
       }
 
@@ -603,7 +627,19 @@ export class RecorderEngine {
             video: false,
           });
         } catch (err) {
-          throw this.friendlyError(err, "microphone");
+          // Same stale-device fallback as the camera — retry default mic.
+          if (this.opts.micDeviceId && isDeviceUnavailableError(err)) {
+            try {
+              this.micStream = await navigator.mediaDevices.getUserMedia({
+                audio: voiceFocusedAudioConstraints(),
+                video: false,
+              });
+            } catch (retryErr) {
+              throw this.friendlyError(retryErr, "microphone");
+            }
+          } else {
+            throw this.friendlyError(err, "microphone");
+          }
         }
       }
 

package/corpus/templates/clips/app/lib/capture-install-options.ts

@@ -4,7 +4,8 @@ function isTruthy(value: unknown): boolean {
 }
 
 const chromeExtensionUrl =
-  import.meta.env.VITE_CLIPS_CHROME_EXTENSION_URL?.trim() ?? "";
+  import.meta.env.VITE_CLIPS_CHROME_EXTENSION_URL?.trim() ??
+  "https://chromewebstore.google.com/detail/baoipacpchggcdigagnajakiidcgcffn";
 
 export const clipsChromeExtensionEnabled = isTruthy(
   import.meta.env.VITE_CLIPS_CHROME_EXTENSION_ENABLED,

package/corpus/templates/clips/app/lib/recorder-preferences.ts

@@ -0,0 +1,67 @@
+import type { CameraBubbleSize } from "@/components/recorder/camera-bubble";
+import type {
+  DisplaySurface,
+  RecordingMode,
+} from "@/components/recorder/recorder-engine";
+
+/**
+ * Last-used recorder selections, remembered across `/record` visits via
+ * localStorage so the panel doesn't reset to defaults every time. Device ids
+ * are best-effort: a remembered mic/camera that no longer exists (machine
+ * changed, permission revoked) falls back to "default" in the panel, so we
+ * never feed a stale `deviceId: { exact }` to getUserMedia.
+ *
+ * `?mode=` / `?surface=` URL params still win over a saved preference — those
+ * are explicit deep-link intents (e.g. the agent navigating to a specific
+ * capture mode).
+ */
+export interface RecorderPreferences {
+  mode: RecordingMode;
+  displaySurface: DisplaySurface;
+  micId: string;
+  cameraId: string;
+  cameraSize: CameraBubbleSize;
+}
+
+const STORAGE_KEY = "clips:recorder-preferences";
+
+const VALID_MODES: RecordingMode[] = ["screen", "camera", "screen+camera"];
+const VALID_SURFACES: DisplaySurface[] = ["monitor", "window", "browser"];
+const VALID_SIZES: CameraBubbleSize[] = ["sm", "md", "lg"];
+
+export function loadRecorderPreferences(): Partial<RecorderPreferences> {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    const prefs: Partial<RecorderPreferences> = {};
+    if (VALID_MODES.includes(parsed.mode as RecordingMode)) {
+      prefs.mode = parsed.mode as RecordingMode;
+    }
+    if (VALID_SURFACES.includes(parsed.displaySurface as DisplaySurface)) {
+      prefs.displaySurface = parsed.displaySurface as DisplaySurface;
+    }
+    if (typeof parsed.micId === "string") prefs.micId = parsed.micId;
+    if (typeof parsed.cameraId === "string") prefs.cameraId = parsed.cameraId;
+    if (VALID_SIZES.includes(parsed.cameraSize as CameraBubbleSize)) {
+      prefs.cameraSize = parsed.cameraSize as CameraBubbleSize;
+    }
+    return prefs;
+  } catch {
+    return {};
+  }
+}
+
+export function saveRecorderPreferences(
+  patch: Partial<RecorderPreferences>,
+): void {
+  if (typeof window === "undefined") return;
+  try {
+    const next = { ...loadRecorderPreferences(), ...patch };
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+  } catch {
+    // localStorage may be unavailable (private mode, quota) — preferences are
+    // a nicety, never block recording on a write failure.
+  }
+}