@agent-native/core 0.117.2 → 0.118.1

package/corpus/templates/clips/actions/save-browser-transcript.ts

@@ -3,7 +3,7 @@
  *
  * Called by the web client (Web Speech API) and desktop client (whispher).
  * Native transcripts are available instantly with no API-key requirement
- * and are the primary transcript source. Always replaces the stored transcript with `fullText`. If `segments` are
+ * and are the primary transcript source. A non-empty result replaces the stored transcript with `fullText`. If `segments` are
  * supplied (real timestamps, e.g. from the desktop Whisper engine) they're
  * stored verbatim; otherwise evenly-paced segments are synthesized from the
  * text. Live capture that OWNS the transcript (meeting flushes re-sending the
@@ -133,40 +133,23 @@ export default defineAction({
           reason: "Transcript already exists",
         };
       }
+      // An empty native result is only a diagnostic. Never create a terminal
+      // transcript row here: finalization owns creating the pending row that
+      // lets the Builder fallback run against the saved recording.
       if (current) {
-        await db
-          .update(schema.recordingTranscripts)
-          .set({
-            ownerEmail,
-            fullText: "",
-            segmentsJson: "[]",
-            status: "failed",
-            failureReason,
-            updatedAt: now,
-          })
-          .where(eq(schema.recordingTranscripts.recordingId, args.recordingId));
-      } else {
-        await db.insert(schema.recordingTranscripts).values({
+        return {
           recordingId: args.recordingId,
-          ownerEmail,
-          language: "en",
-          segmentsJson: "[]",
-          fullText: "",
-          status: "failed",
-          failureReason,
-          createdAt: now,
-          updatedAt: now,
-        });
+          status: "skipped" as const,
+          reason: "Transcript attempt already exists",
+        };
       }
-      await writeAppState("refresh-signal", { ts: Date.now() });
       console.warn(
-        `[clips] Native transcript failed for ${args.recordingId} via ${args.source ?? "web-speech"}: ${failureReason}`,
+        `[clips] Native transcript unavailable for ${args.recordingId} via ${args.source ?? "web-speech"}; finalization will queue Builder fallback: ${failureReason}`,
       );
       return {
         recordingId: args.recordingId,
-        status: "failed" as const,
-        provider: args.source ?? "web-speech",
-        failureReason,
+        status: "skipped" as const,
+        reason: "Empty native transcript; waiting for recording finalization",
       };
     }
 

package/corpus/templates/clips/app/components/capture-install-options.tsx

@@ -18,10 +18,10 @@ import {
 } from "@/components/ui/popover";
 import {
   attemptOpenDesktopApp,
-  clipsChromeExtensionEnabled,
   clipsChromeExtensionUrl,
   hasDownloadedDesktopApp,
   subscribeDownloaded,
+  useClipsChromeExtensionEnabled,
 } from "@/lib/capture-install-options";
 import { cn } from "@/lib/utils";
 
@@ -136,6 +136,7 @@ export function CaptureInstallButton({
   ...buttonProps
 }: CaptureInstallButtonProps) {
   const downloaded = useHasDownloadedDesktopApp();
+  const chromeExtensionEnabled = useClipsChromeExtensionEnabled();
   const label = downloaded ? (downloadedChildren ?? children) : children;
 
   if (downloaded) {
@@ -155,7 +156,7 @@ export function CaptureInstallButton({
     );
   }
 
-  if (!clipsChromeExtensionEnabled) {
+  if (!chromeExtensionEnabled) {
     return (
       <Button asChild className={className} {...buttonProps}>
         <a href={appPath(desktopHref)}>{label}</a>
@@ -187,6 +188,7 @@ export function CaptureInstallInlineLink({
   side = "bottom",
 }: CaptureInstallInlineLinkProps) {
   const downloaded = useHasDownloadedDesktopApp();
+  const chromeExtensionEnabled = useClipsChromeExtensionEnabled();
 
   const label = downloaded ? (downloadedChildren ?? children) : children;
 
@@ -202,7 +204,7 @@ export function CaptureInstallInlineLink({
     );
   }
 
-  if (!clipsChromeExtensionEnabled) {
+  if (!chromeExtensionEnabled) {
     return (
       <a href={appPath(desktopHref)} className={className}>
         {label}

package/corpus/templates/clips/app/components/player/transcript-panel.tsx

@@ -11,11 +11,8 @@ import {
   IconDownload,
   IconCheck,
   IconExternalLink,
-  IconKey,
   IconLoader2,
   IconBolt,
-  IconChevronDown,
-  IconChevronUp,
   IconRefresh,
 } from "@tabler/icons-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -489,7 +486,6 @@ function isTranscriptionSetupNeeded(
   const r = reason.toLowerCase();
   return (
     r.includes("openai_api_key") ||
-    r.includes("groq_api_key") ||
     r.includes("api key") ||
     r.includes("not configured") ||
     r.includes("no transcription") ||
@@ -579,10 +575,9 @@ function friendlyCleanupFailure(
 /**
  * Inline card shown when transcription needs a provider set up.
  *
- * Builder.io is the primary/recommended path — free, one-click, no separate
- * API key required (uses BUILDER_PRIVATE_KEY once the user connects).
- * BYOK Groq is the secondary speech-to-text option when native/Builder cannot
- * produce a transcript. Clips does not route recording transcription to OpenAI.
+ * Builder.io is the only cloud fallback — free, one-click, no separate API
+ * key required (uses BUILDER_PRIVATE_KEY once the user connects). Clips does
+ * not route recording transcription to BYOK speech providers.
  */
 function TranscriptSetupCard({
   failureReason,
@@ -600,14 +595,6 @@ function TranscriptSetupCard({
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const mountedRef = useRef(true);
 
-  const [showByok, setShowByok] = useState(false);
-  const [apiKey, setApiKey] = useState("");
-  const [saving, setSaving] = useState(false);
-  const [saveToast, setSaveToast] = useState<{
-    kind: "ok" | "err";
-    text: string;
-  } | null>(null);
-  const toastTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const autoRetryRef = useRef(false);
   const onRetryRef = useRef(onRetry);
 
@@ -630,7 +617,6 @@ function TranscriptSetupCard({
     return () => {
       mountedRef.current = false;
       if (pollRef.current) clearInterval(pollRef.current);
-      if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
     };
   }, []);
 
@@ -675,44 +661,6 @@ function TranscriptSetupCard({
     }, 2000);
   }, [onRetry]);
 
-  async function saveApiKey() {
-    if (!apiKey.trim() || saving) return;
-    setSaving(true);
-    try {
-      const res = await fetch(
-        agentNativePath("/_agent-native/secrets/GROQ_API_KEY"),
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ value: apiKey.trim() }),
-        },
-      );
-      if (!mountedRef.current) return;
-      if (!res.ok) {
-        const err = await res
-          .json()
-          .then((j: { error?: string }) => j.error)
-          .catch(() => null);
-        if (!mountedRef.current) return;
-        setSaveToast({
-          kind: "err",
-          text: err ?? t("transcriptPanel.saveFailed", { status: res.status }),
-        });
-        return;
-      }
-      setApiKey("");
-      setSaveToast({ kind: "ok", text: t("transcriptPanel.savedRetrying") });
-      onRetry?.();
-      if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
-      toastTimerRef.current = setTimeout(() => {
-        if (mountedRef.current) setSaveToast(null);
-        toastTimerRef.current = null;
-      }, 2500);
-    } finally {
-      if (mountedRef.current) setSaving(false);
-    }
-  }
-
   const isProviderError =
     !isBuilderCreditsExhaustedMessage(failureReason) &&
     (failureReason?.toLowerCase().includes("quota") ||
@@ -817,87 +765,6 @@ function TranscriptSetupCard({
             <p className="text-[11px] text-destructive mt-2">{connectError}</p>
           )}
         </div>
-
-        {/* BYOK — secondary option, collapsed by default. Shown even when
-            Builder is connected so users can fall back if Builder
-            transcription itself fails (quota / outage / unsupported audio
-            format) — the failure message tells them to add a key, so the
-            input must be reachable. */}
-        <div>
-          <button
-            type="button"
-            onClick={() => setShowByok((v) => !v)}
-            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <IconKey className="h-3.5 w-3.5" />
-            {isProviderError
-              ? "Update your API key"
-              : builderConfigured
-                ? "Advanced backup option"
-                : "Or use your own Groq key"}
-            {showByok ? (
-              <IconChevronUp className="h-3 w-3" />
-            ) : (
-              <IconChevronDown className="h-3 w-3" />
-            )}
-          </button>
-
-          {showByok && (
-            <div className="mt-2 space-y-2 pl-1">
-              <p className="text-[11px] text-muted-foreground">
-                {t("transcriptPanel.groqKeysStart")}{" "}
-                <code className="font-mono">gsk_</code>.{" "}
-                {t("transcriptPanel.nativeSpeechPrimary")}
-              </p>
-              <div className="flex gap-1.5">
-                <Input
-                  type="password"
-                  value={apiKey}
-                  onChange={(e) => setApiKey(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") saveApiKey();
-                  }}
-                  placeholder="gsk_…"
-                  className="h-8 text-xs"
-                />
-                <Button
-                  size="sm"
-                  onClick={saveApiKey}
-                  disabled={!apiKey.trim() || saving}
-                >
-                  {saving ? (
-                    <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
-                  ) : (
-                    t("common.save")
-                  )}
-                </Button>
-              </div>
-              <div className="flex items-center gap-3">
-                <a
-                  href="https://console.groq.com/keys"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground"
-                >
-                  {t("transcriptPanel.getGroqKey")}
-                  <IconExternalLink className="h-3 w-3" />
-                </a>
-              </div>
-              {saveToast && (
-                <p
-                  className={cn(
-                    "text-[11px]",
-                    saveToast.kind === "ok"
-                      ? "text-green-600"
-                      : "text-destructive",
-                  )}
-                >
-                  {saveToast.text}
-                </p>
-              )}
-            </div>
-          )}
-        </div>
       </div>
     </div>
   );

package/corpus/templates/clips/app/components/ui/toolkit-provider.tsx

@@ -2,11 +2,16 @@ import { ToolkitProvider, type ToolkitComponents } from "@agent-native/toolkit";
 import type { ReactNode } from "react";
 
 import { Button } from "@/components/ui/button";
+import { designSystem } from "@/design-system";
 
 const components: ToolkitComponents = {
   Button: Button as ToolkitComponents["Button"],
 };
 
 export function AppToolkitProvider({ children }: { children: ReactNode }) {
-  return <ToolkitProvider components={components}>{children}</ToolkitProvider>;
+  return (
+    <ToolkitProvider components={components} designSystem={designSystem}>
+      {children}
+    </ToolkitProvider>
+  );
 }

package/corpus/templates/clips/app/design-system.ts

@@ -0,0 +1,3 @@
+import { defineDesignSystem } from "@agent-native/toolkit/design-system";
+
+export const designSystem = defineDesignSystem({});

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

@@ -1,4 +1,5 @@
 import { appPath } from "@agent-native/core/client/api-path";
+import { useEffect, useState } from "react";
 
 const DESKTOP_PROMO_DISMISSED_STORAGE_KEY = "clips.desktop-promo.dismissed";
 const DESKTOP_DOWNLOADED_STORAGE_KEY = "clips.desktop-app.downloaded";
@@ -146,9 +147,19 @@ const chromeExtensionUrl =
 
 // The published extension manifest only trusts first-party Clips/local origins.
 // Custom deployments can opt in after publishing a matching extension/listing.
-export const clipsChromeExtensionEnabled = resolveClipsChromeExtensionEnabled({
-  enabledSetting: import.meta.env.VITE_CLIPS_CHROME_EXTENSION_ENABLED,
-  hostname: getCurrentHostname(),
-});
+export function useClipsChromeExtensionEnabled(): boolean {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    setEnabled(
+      resolveClipsChromeExtensionEnabled({
+        enabledSetting: import.meta.env.VITE_CLIPS_CHROME_EXTENSION_ENABLED,
+        hostname: getCurrentHostname(),
+      }),
+    );
+  }, []);
+
+  return enabled;
+}
 
 export const clipsChromeExtensionUrl = chromeExtensionUrl || null;

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

@@ -1,10 +1,10 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { Button } from "@agent-native/toolkit/ui/button";
 import { IconPlayerRecord } from "@tabler/icons-react";
 import { NavLink } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
 import { usePageHeaderLayout } from "@/components/library/page-header";
+import { Button } from "@/components/ui/button";
 
 const SEO_TITLE = "Agent-Native Clips - Open Source screen recorder";
 const SEO_DESCRIPTION =

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

@@ -13,9 +13,9 @@ import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import enMessages from "@/i18n/en-US";
 import {
-  clipsChromeExtensionEnabled,
   clipsChromeExtensionUrl,
   markDesktopAppDownloaded,
+  useClipsChromeExtensionEnabled,
 } from "@/lib/capture-install-options";
 
 export function meta() {
@@ -179,6 +179,7 @@ function secondaryDownloadButton(
 }
 
 export default function DownloadPage() {
+  const chromeExtensionEnabled = useClipsChromeExtensionEnabled();
   const t = useT();
   const [manifest, setManifest] = useState<Manifest | null>(null);
   const [manifestError, setManifestError] = useState(false);
@@ -283,7 +284,7 @@ export default function DownloadPage() {
             </div>
           </div>
 
-          {clipsChromeExtensionEnabled && (
+          {chromeExtensionEnabled && (
             <section className="mt-10 w-full max-w-xl rounded-2xl border border-border bg-card p-4 text-start shadow-sm">
               <div className="flex items-start gap-3">
                 <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">

package/corpus/templates/clips/changelog/2026-07-22-fixed-an-intermittent-hydration-error-on-the-download-page.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Fixed an intermittent hydration error on the download page

package/corpus/templates/clips/changelog/2026-07-22-fixed-transcript-generation-when-native-speech-capture-retur.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Fixed transcript generation when native speech capture returns empty text.

package/corpus/templates/clips/changelog/2026-07-22-fixed-windows-recordings-aborting-during-the-countdown.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Fixed Windows recordings aborting during the countdown

package/corpus/templates/clips/changelog/2026-07-22-permissions-and-rewind-controls-are-now-grouped-with-clearer.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Permissions and Rewind controls are now grouped with clearer aligned actions.

package/corpus/templates/clips/changelog/2026-07-22-the-desktop-popover-opens-centered-under-the-menu-bar-icon-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+The desktop popover opens centered under the menu bar icon on first launch

package/corpus/templates/clips/changelog/2026-07-22-transcript-generation-now-retries-with-backup-speech-recogni.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Native browser/OS transcripts now remain primary, with Builder transcribing the original recording only when native speech capture is unavailable.

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

@@ -3682,91 +3682,95 @@ export function App() {
           />
         </div>
 
-        <ReadinessPanel
-          mode={mode}
-          cameraOn={cameraOn}
-          micOn={micOn}
-          includeVoicePaste={voiceDictationEnabled}
-          includeFnMonitoring={fnShortcutEnabled}
-          open={readinessOpen}
-          onOpenChange={updateReadinessOpen}
-          onOpenPermission={openPrivacySettings}
-        />
+        <div className="recorder-disclosures">
+          <ReadinessPanel
+            mode={mode}
+            cameraOn={cameraOn}
+            micOn={micOn}
+            includeVoicePaste={voiceDictationEnabled}
+            includeFnMonitoring={fnShortcutEnabled}
+            open={readinessOpen}
+            onOpenChange={updateReadinessOpen}
+            onOpenPermission={openPrivacySettings}
+          />
 
-        <section className="rewind-home-card" aria-label="Rewind">
-          <button
-            type="button"
-            className="rewind-home-summary"
-            aria-expanded={rewindHomeOpen}
-            onClick={() => setRewindHomeOpen((open) => !open)}
-          >
-            <span className="rewind-home-title">Rewind</span>
-            <span className="rewind-home-state">
-              {homeRewindOn ? "On" : "Off"}
-              {rewindHomeOpen ? (
-                <IconChevronDown size={13} stroke={2} />
-              ) : (
-                <IconChevronRight size={13} stroke={2} />
-              )}
-            </span>
-          </button>
-          {rewindHomeOpen ? (
-            <div className="rewind-home-details">
-              <p>{homeRewindPresentation.detail}</p>
-              <div className="rewind-home-detail-actions">
-                <div className="rewind-home-controls">
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        className="rewind-agent-prompt-copy"
-                        onClick={() => void copyRewindAgentPrompt()}
-                        aria-label={
-                          rewindAgentPromptCopied
-                            ? "Setup prompt copied — paste it into your agent once"
-                            : "Copy setup prompt for your agent"
-                        }
-                      >
-                        {rewindAgentPromptCopied ? (
-                          <IconCircleCheck size={15} stroke={2} />
-                        ) : (
-                          <IconCopy size={15} stroke={1.9} />
-                        )}
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {rewindAgentPromptCopied
-                        ? "Setup prompt copied"
-                        : "Copy setup prompt for your agent"}
-                    </TooltipContent>
-                  </Tooltip>
-                  <Switch
-                    on={homeRewindOn}
-                    disabled={
-                      homeScreenMemoryBusy || isRecording || recordingFlowActive
-                    }
-                    onChange={(remembering) =>
-                      void setHomeRewindRemembering(remembering)
-                    }
-                    label={
-                      featureConfig?.screenMemory?.enabled === true
-                        ? "Remember with Rewind"
-                        : "Set up Rewind"
-                    }
-                  />
+          <section className="rewind-home-card" aria-label="Rewind">
+            <button
+              type="button"
+              className="rewind-home-summary"
+              aria-expanded={rewindHomeOpen}
+              onClick={() => setRewindHomeOpen((open) => !open)}
+            >
+              <span className="rewind-home-title">Rewind</span>
+              <span className="rewind-home-state">
+                {homeRewindOn ? "On" : "Off"}
+                {rewindHomeOpen ? (
+                  <IconChevronDown size={11} stroke={2} />
+                ) : (
+                  <IconChevronRight size={11} stroke={2} />
+                )}
+              </span>
+            </button>
+            {rewindHomeOpen ? (
+              <div className="rewind-home-details">
+                <p>{homeRewindPresentation.detail}</p>
+                <div className="rewind-home-detail-actions">
+                  <button
+                    type="button"
+                    className="rewind-docs-link"
+                    onClick={openRewindDocs}
+                  >
+                    Learn about Rewind
+                    <IconExternalLink size={13} stroke={1.9} />
+                  </button>
+                  <div className="rewind-home-controls">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          className="rewind-agent-prompt-copy"
+                          onClick={() => void copyRewindAgentPrompt()}
+                          aria-label={
+                            rewindAgentPromptCopied
+                              ? "Setup prompt copied — paste it into your agent once"
+                              : "Copy setup prompt for your agent"
+                          }
+                        >
+                          {rewindAgentPromptCopied ? (
+                            <IconCircleCheck size={15} stroke={2} />
+                          ) : (
+                            <IconCopy size={15} stroke={1.9} />
+                          )}
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {rewindAgentPromptCopied
+                          ? "Setup prompt copied"
+                          : "Copy setup prompt for your agent"}
+                      </TooltipContent>
+                    </Tooltip>
+                    <Switch
+                      on={homeRewindOn}
+                      disabled={
+                        homeScreenMemoryBusy ||
+                        isRecording ||
+                        recordingFlowActive
+                      }
+                      onChange={(remembering) =>
+                        void setHomeRewindRemembering(remembering)
+                      }
+                      label={
+                        featureConfig?.screenMemory?.enabled === true
+                          ? "Remember with Rewind"
+                          : "Set up Rewind"
+                      }
+                    />
+                  </div>
                 </div>
-                <button
-                  type="button"
-                  className="rewind-docs-link"
-                  onClick={openRewindDocs}
-                >
-                  Learn about Rewind
-                  <IconExternalLink size={13} stroke={1.9} />
-                </button>
               </div>
-            </div>
-          ) : null}
-        </section>
+            ) : null}
+          </section>
+        </div>
 
         {!isRecording ? (
           <button

package/corpus/templates/clips/desktop/src/styles.css

@@ -888,6 +888,12 @@ body[data-clips-route="recording-pill"] #root {
 /* Readiness disclosure                                                       */
 /* ------------------------------------------------------------------------- */
 
+.recorder-disclosures {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
 .readiness {
   border: none;
   border-radius: 0;
@@ -955,6 +961,12 @@ body[data-clips-route="recording-pill"] #root {
   line-height: 1;
 }
 
+.readiness-action svg,
+.rewind-home-state svg {
+  width: 11px;
+  height: 11px;
+}
+
 .readiness-open .readiness-action {
   color: var(--fg-muted);
 }
@@ -1401,6 +1413,7 @@ body[data-clips-route="recording-pill"] #root {
   display: inline-flex;
   align-items: center;
   gap: 8px;
+  margin-left: auto;
 }
 
 .rewind-docs-link {