@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

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

@@ -108,6 +108,7 @@ export default function SettingsIndexRoute() {
   const connectRequestedRef = useRef(false);
   const builderConnect = useBuilderConnectFlow({
     popupUrl: builderStatus.status?.connectUrl,
+    provisionAccount: true,
     trackingSource: "clips_settings",
     trackingFlow: "clips_setup",
     onConnected: async () => {
@@ -166,6 +167,7 @@ export default function SettingsIndexRoute() {
       connecting: builderConnect.connecting,
       orgName: builderConnect.orgName ?? builderStatus.status?.orgName ?? null,
       start: startBuilderConnect,
+      connectFlow: builderConnect,
     }),
     [builderConnect, builderStatus, startBuilderConnect, storageStatus],
   );

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

@@ -1,10 +1,10 @@
-import { DefaultSpinner } from "@agent-native/core/client/ui";
-import { withSsrHtmlContentType } from "@agent-native/core/shared";
-import { redirect, type LoaderFunctionArgs } from "react-router";
+import { appPath } from "@agent-native/core/client/api-path";
+import { MarketingHome } from "@agent-native/toolkit/marketing";
 
 const SEO_TITLE = "Clips - Open Source screen recorder";
 const SEO_DESCRIPTION =
   "Open Source screen recorder and meeting-notes app with AI transcripts, summaries, search, dictation, and agent-readable share links.";
+
 export function meta() {
   return [
     { title: SEO_TITLE },
@@ -20,43 +20,14 @@ export function meta() {
   ];
 }
 
-/**
- * The root route redirects to /library — the Library is the default landing
- * view. Everything else hangs off the pathless _app layout so the sidebar +
- * agent chat persist across navigations.
- *
- * Run the redirect on both the server and the client. A client-only
- * `useNavigate(...)` inside `useEffect` can drop during hydration (before
- * the route tree is fully attached), leaving the user stranded on `/` with
- * a blank main area while the layout chrome around it still renders. A
- * `loader` redirect runs as part of the server response and the navigation
- * completes before the app hydrates; `clientLoader` covers SPA-style
- * navigations to `/`.
- */
-function buildTarget(url: URL): string {
-  return `/library${url.search}${url.hash}`;
-}
-
-export function loader({ url }: LoaderFunctionArgs) {
-  throw withSsrHtmlContentType(redirect(buildTarget(url)), {
-    varyByQuery: true,
-  });
-}
-
-export function clientLoader({ url }: LoaderFunctionArgs) {
-  throw withSsrHtmlContentType(redirect(buildTarget(url)), {
-    varyByQuery: true,
-  });
-}
-
-export function HydrateFallback() {
+export default function MarketingHomeRoute() {
   return (
-    <div className="flex items-center justify-center h-screen w-full">
-      <DefaultSpinner />
-    </div>
+    <MarketingHome
+      appName="Clips"
+      tagline={SEO_TITLE}
+      description={SEO_DESCRIPTION}
+      primaryActionHref={appPath("/home")}
+      secondaryActionHref={appPath("/sign-in")}
+    />
   );
 }
-
-export default function IndexPage() {
-  return null;
-}

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

@@ -1,10 +1,13 @@
 import { appBasePath, appPath } from "@agent-native/core/client/api-path";
 import { useT } from "@agent-native/core/client/i18n";
+import { docsUrl } from "@agent-native/core/shared";
 import {
   IconBrandChrome,
   IconBrandApple,
   IconBrandWindows,
+  IconCheck,
   IconExternalLink,
+  IconHelpCircle,
   IconTerminal2,
 } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
@@ -50,6 +53,10 @@ interface PlatformVariant {
 }
 
 const LATEST_JSON_URL = `${appBasePath()}/api/clips-latest.json`;
+const MANIFEST_STORAGE_KEY = "clips-download-manifest-v1";
+const CHROME_EXTENSION_DOCS_URL = docsUrl("template-clips-capture-everywhere", {
+  hash: "browser-logs-with-the-chrome-extension",
+});
 
 const VARIANTS: PlatformVariant[] = [
   {
@@ -85,6 +92,65 @@ interface Manifest {
   }[];
 }
 
+interface ConfirmedDownload {
+  asset: Manifest["assets"][number];
+  label: string;
+}
+
+function manifestStorageKey(channel: DownloadReleaseChannel): string {
+  return `${MANIFEST_STORAGE_KEY}-${channel}`;
+}
+
+function isManifest(value: unknown): value is Manifest {
+  if (!value || typeof value !== "object") return false;
+  const manifest = value as Partial<Manifest>;
+  return (
+    typeof manifest.version === "string" &&
+    typeof manifest.tag === "string" &&
+    (typeof manifest.pub_date === "string" || manifest.pub_date === null) &&
+    Array.isArray(manifest.assets) &&
+    manifest.assets.every((asset) => {
+      if (!asset || typeof asset !== "object") return false;
+      const candidate = asset as Partial<Manifest["assets"][number]>;
+      return (
+        typeof candidate.name === "string" &&
+        typeof candidate.url === "string" &&
+        typeof candidate.size === "number" &&
+        typeof candidate.kind === "string"
+      );
+    })
+  );
+}
+
+function readCachedManifest(channel: DownloadReleaseChannel): Manifest | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(manifestStorageKey(channel));
+    if (!raw) return null;
+    const parsed: unknown = JSON.parse(raw);
+    return isManifest(parsed) ? parsed : null;
+    // coercion-ok: an unreadable browser cache is absent; the network fetch remains authoritative.
+  } catch {
+    return null;
+  }
+}
+
+function writeCachedManifest(
+  channel: DownloadReleaseChannel,
+  manifest: Manifest,
+): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(
+      manifestStorageKey(channel),
+      JSON.stringify(manifest),
+    );
+    // coercion-ok: browser storage is optional and must not block the download action.
+  } catch {
+    // Storage can be unavailable in private browsing or locked-down contexts.
+  }
+}
+
 function detectPlatform(): PlatformId | null {
   if (typeof navigator === "undefined") return null;
   const ua = navigator.userAgent;
@@ -97,11 +163,11 @@ function detectPlatform(): PlatformId | null {
 function pickAsset(
   manifest: Manifest | null,
   variant: PlatformVariant,
-): { url: string; name: string } | null {
+): Manifest["assets"][number] | null {
   if (!manifest) return null;
   for (const kind of variant.assetKinds) {
     const asset = manifest.assets.find((a) => a.kind === kind);
-    if (asset) return { url: asset.url, name: asset.name };
+    if (asset) return asset;
   }
   return null;
 }
@@ -113,6 +179,9 @@ function primaryDownloadButton(
   downloadLabel: string,
   retryLabel: string,
   onRetry: () => void,
+  downloadStarted: boolean,
+  downloadStartedLabel: string,
+  onDownload: (asset: Manifest["assets"][number]) => void,
 ) {
   const asset = pickAsset(manifest, variant);
   const Icon = variant.icon;
@@ -123,9 +192,13 @@ function primaryDownloadButton(
         size="lg"
         className="h-12 min-w-[252px] gap-2 px-6 text-base"
       >
-        <a href={asset.url} download onClick={markDesktopAppDownloaded}>
-          <Icon className="h-5 w-5" />
-          {downloadLabel}
+        <a href={asset.url} download onClick={() => onDownload(asset)}>
+          {downloadStarted ? (
+            <IconCheck className="h-5 w-5" />
+          ) : (
+            <Icon className="h-5 w-5" />
+          )}
+          {downloadStarted ? downloadStartedLabel : downloadLabel}
         </a>
       </Button>
     );
@@ -168,6 +241,8 @@ export default function DownloadPage() {
   const [manifestError, setManifestError] = useState(false);
   const [detected, setDetected] = useState<PlatformId | null>(null);
   const [manifestRequest, setManifestRequest] = useState(0);
+  const [confirmedDownload, setConfirmedDownload] =
+    useState<ConfirmedDownload | null>(null);
 
   useEffect(() => {
     setDetected(detectPlatform());
@@ -182,7 +257,8 @@ export default function DownloadPage() {
     if (!hostResolved) return;
 
     let cancelled = false;
-    setManifest(null);
+    const cachedManifest = readCachedManifest(channel);
+    setManifest(cachedManifest);
     setManifestError(false);
     const manifestUrl =
       channel === "nightly"
@@ -191,10 +267,15 @@ export default function DownloadPage() {
     fetch(manifestUrl)
       .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`${r.status}`))))
       .then((json) => {
-        if (!cancelled) setManifest(json as Manifest);
+        if (!isManifest(json)) throw new Error("Invalid manifest");
+        if (!cancelled) {
+          setManifest(json);
+          setManifestError(false);
+          writeCachedManifest(channel, json);
+        }
       })
       .catch(() => {
-        if (!cancelled) setManifestError(true);
+        if (!cancelled && !cachedManifest) setManifestError(true);
       });
     return () => {
       cancelled = true;
@@ -202,6 +283,7 @@ export default function DownloadPage() {
   }, [channel, hostResolved, manifestRequest]);
 
   const retryManifest = () => {
+    setConfirmedDownload(null);
     setManifestRequest((request) => request + 1);
   };
 
@@ -210,13 +292,27 @@ export default function DownloadPage() {
 
     setManifest(null);
     setManifestError(false);
+    setConfirmedDownload(null);
     setChannel(nextChannel);
   };
 
   const primary = VARIANTS.find((v) => v.id === detected) ?? VARIANTS[0];
+  const primaryAsset = pickAsset(manifest, primary);
+  const downloadLabel = t("downloadRoute.downloadFor", {
+    platform: primary.label,
+  });
+  const downloadStartedLabel = t("downloadRoute.downloadStarted");
+  const primaryDownloadStarted =
+    confirmedDownload?.asset.url === primaryAsset?.url;
+
+  const handleDownload = (asset: Manifest["assets"][number], label: string) => {
+    markDesktopAppDownloaded();
+    setConfirmedDownload({ asset, label });
+  };
 
   const handlePlatformChange = (nextPlatform: PlatformId) => {
     if (nextPlatform === detected) return;
+    setConfirmedDownload(null);
     setDetected(nextPlatform);
   };
 
@@ -297,9 +393,35 @@ export default function DownloadPage() {
                 primary,
                 manifest,
                 manifestError,
-                t("downloadRoute.downloadFor", { platform: primary.label }),
+                downloadLabel,
                 t("downloadRoute.retry"),
                 retryManifest,
+                primaryDownloadStarted,
+                downloadStartedLabel,
+                (asset) => handleDownload(asset, downloadLabel),
+              )}
+
+              {primaryDownloadStarted && confirmedDownload && (
+                <p
+                  aria-live="polite"
+                  className="mt-3 text-xs text-muted-foreground"
+                >
+                  <span className="sr-only">{downloadStartedLabel}</span>
+                  <a
+                    href={confirmedDownload.asset.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    onClick={() =>
+                      handleDownload(
+                        confirmedDownload.asset,
+                        confirmedDownload.label,
+                      )
+                    }
+                    className="text-muted-foreground underline underline-offset-2 hover:text-foreground"
+                  >
+                    {t("downloadRoute.downloadAgain")}
+                  </a>
+                </p>
               )}
 
               <div className="mt-5 flex justify-center">
@@ -349,25 +471,36 @@ export default function DownloadPage() {
           </div>
 
           {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">
+            <section className="mt-16 w-full max-w-md text-start">
+              <div className="flex items-center gap-2">
+                <div className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                   <IconBrandChrome className="h-4 w-4" />
                 </div>
                 <div className="min-w-0 flex-1">
                   <h2 className="text-sm font-semibold text-foreground">
                     {t("downloadRoute.chromeTitle")}
                   </h2>
-                  <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
-                    {t("downloadRoute.chromeDescription")}
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {t("captureInstall.chromeDescription")}
                   </p>
                 </div>
+                <a
+                  href={CHROME_EXTENSION_DOCS_URL}
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-label={t("downloadRoute.chromeTitle")}
+                  title={t("downloadRoute.chromeTitle")}
+                  className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                >
+                  <IconHelpCircle className="size-3" aria-hidden="true" />
+                </a>
               </div>
               <Button
                 asChild={Boolean(clipsChromeExtensionUrl)}
                 disabled={!clipsChromeExtensionUrl}
                 variant="outline"
-                className="mt-4 w-full gap-2"
+                size="sm"
+                className="mt-3 w-full gap-2"
               >
                 {clipsChromeExtensionUrl ? (
                   <a

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

@@ -1,5 +1,6 @@
 import { appBasePath } from "@agent-native/core/client/api-path";
 import { useT } from "@agent-native/core/client/i18n";
+import { DefaultSpinner } from "@agent-native/core/client/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useSearchParams } from "react-router";
@@ -9,7 +10,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";
 import { parseTimeParam, resolveStartMs } from "@/lib/time-param";
@@ -188,8 +188,9 @@ export default function EmbedRoute() {
 
   if (dataQ.isLoading) {
     return (
-      <div className="fixed inset-0 flex h-dvh w-dvw items-center justify-center overflow-hidden bg-black">
-        <Spinner className="h-8 w-8 text-white/70" />
+      // guard:allow-raw-color — standalone embeds must match the black player backdrop
+      <div className="fixed inset-0 flex h-dvh w-dvw items-center justify-center overflow-hidden bg-black text-background/70 dark:text-foreground/70">
+        <DefaultSpinner height="100%" />
       </div>
     );
   }

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

@@ -11,7 +11,10 @@ import {
   useChangeVersions,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { buildSignInReturnHref } from "@agent-native/core/client/ui";
+import {
+  buildSignInReturnHref,
+  DefaultSpinner,
+} from "@agent-native/core/client/ui";
 import {
   isHumanReadableDocumentTitle,
   normalizeDocumentTitle,
@@ -927,11 +930,7 @@ export default function RecordingPage() {
   if (!recordingId) return null;
 
   if (playerDataQ.isLoading || playerDataForbidden) {
-    return (
-      <div className="flex items-center justify-center h-screen w-full bg-background">
-        <Spinner className="h-8 w-8" />
-      </div>
-    );
+    return <DefaultSpinner />;
   }
 
   if (playerDataQ.isError || !recording) {
@@ -941,11 +940,7 @@ export default function RecordingPage() {
         ? `/r/${recordingId}`
         : window.location.pathname + window.location.search;
     if (sessionLoading) {
-      return (
-        <div className="flex items-center justify-center h-screen w-full bg-background">
-          <Spinner className="h-8 w-8" />
-        </div>
-      );
+      return <DefaultSpinner />;
     }
     return (
       <div className="flex flex-col items-center justify-center h-screen w-full bg-background px-6">

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

@@ -18,6 +18,7 @@ import {
   chunkUploadParallelism,
   chunkUploadUrl,
   pickMimeType,
+  UPLOAD_SLICE_BYTES,
   type UploadMode,
 } from "@shared/recording-core";
 import {
@@ -802,6 +803,7 @@ export default function RecordRoute() {
   const [isPaused, setIsPaused] = useState(false);
   const visibilityAutoPausedRef = useRef(false);
   const [discardConfirmOpen, setDiscardConfirmOpen] = useState(false);
+  const playheadConfirmOpenRef = useRef(false);
   // Tracks whether opening the discard-confirm dialog paused the recording
   // itself (vs. the user having already paused) — so "Resume" only resumes
   // when we're the ones who paused it, and the dialog never gets captured in
@@ -967,6 +969,7 @@ export default function RecordRoute() {
   const browserDiagnosticsRef = useRef<BrowserDiagnosticsCapture | null>(null);
   // Bumped by doCancel() to invalidate any in-flight startFlow().
   const startSessionRef = useRef(0);
+  const restartInFlightRef = useRef<Promise<void> | null>(null);
 
   // Elapsed-time display now ticks inside RecordingToolbar itself (via
   // `active` + `getElapsedMs`) so the ~4x/sec poll doesn't re-render this
@@ -1336,7 +1339,6 @@ export default function RecordRoute() {
   // Netlify's effective binary function payload limit. Mirrors the recorder's
   // upload pipeline so finalize-recording handles it identically.
   // -------------------------------------------------------------------------
-  const UPLOAD_CHUNK_BYTES = 3 * 1024 * 1024;
   const UPLOAD_PARALLELISM = 4;
 
   const probeVideoMetadata = useCallback(
@@ -1589,12 +1591,12 @@ export default function RecordRoute() {
 
         const totalChunks = Math.max(
           1,
-          Math.ceil(uploadBlob.size / UPLOAD_CHUNK_BYTES),
+          Math.ceil(uploadBlob.size / UPLOAD_SLICE_BYTES),
         );
 
         const chunkDescs = Array.from({ length: totalChunks }, (_, i) => {
-          const start = i * UPLOAD_CHUNK_BYTES;
-          const end = Math.min(start + UPLOAD_CHUNK_BYTES, uploadBlob.size);
+          const start = i * UPLOAD_SLICE_BYTES;
+          const end = Math.min(start + UPLOAD_SLICE_BYTES, uploadBlob.size);
           const isFinal = i === totalChunks - 1;
           return {
             index: i,
@@ -2205,6 +2207,8 @@ export default function RecordRoute() {
     fileUploadRecordingIdRef.current = null;
     const engine = engineRef.current;
     const pendingId = pendingRef.current?.id;
+    engineRef.current = null;
+    pendingRef.current = null;
     liveTranscription.stop();
     browserDiagnosticsRef.current?.dispose();
     browserDiagnosticsRef.current = null;
@@ -2251,8 +2255,6 @@ export default function RecordRoute() {
     setIsPaused(false);
     setUiState("idle");
     setUploadProgress(null);
-    pendingRef.current = null;
-    engineRef.current = null;
   }, [extensionCapture, liveTranscription]);
 
   const playCountdownAudioCue = useCallback(() => {
@@ -2380,14 +2382,69 @@ export default function RecordRoute() {
     };
   }, [cameraStream, liveTranscription, recordingMode]);
 
-  const restart = useCallback(async () => {
-    await doCancel();
-    const opts = pendingStartOptsRef.current;
-    if (opts) {
-      await startFlow(opts);
-    }
+  const restart = useCallback(() => {
+    if (restartInFlightRef.current) return restartInFlightRef.current;
+    const run = (async () => {
+      await doCancel();
+      const opts = pendingStartOptsRef.current;
+      if (opts) {
+        await startFlow(opts);
+      }
+    })();
+    restartInFlightRef.current = run;
+    void run.then(
+      () => {
+        if (restartInFlightRef.current === run) {
+          restartInFlightRef.current = null;
+        }
+      },
+      () => {
+        if (restartInFlightRef.current === run) {
+          restartInFlightRef.current = null;
+        }
+      },
+    );
+    return run;
   }, [doCancel, startFlow]);
 
+  const handlePlayheadConfirmChange = useCallback(
+    (
+      change: import("@shared/recording-playhead").RecordingPlayheadConfirmChange,
+    ) => {
+      playheadConfirmOpenRef.current = change.type === "open";
+      if (change.type === "open") {
+        if (!change.enteredPaused) {
+          const engine = engineRef.current;
+          engine?.pause();
+          liveTranscription.pause();
+          setIsPaused(true);
+        }
+        return;
+      }
+      if (change.resume || !change.enteredPaused) {
+        const engine = engineRef.current;
+        if (engine?.getState() === "paused") {
+          engine.resume();
+          liveTranscription.resume();
+          setIsPaused(false);
+        }
+      }
+    },
+    [liveTranscription],
+  );
+
+  const handlePlayheadConfirmAction = useCallback(
+    (intent: import("@shared/recording-playhead").RecordingPlayheadIntent) => {
+      playheadConfirmOpenRef.current = false;
+      if (intent === "restart") {
+        void restart();
+      } else {
+        void doCancel();
+      }
+    },
+    [doCancel, restart],
+  );
+
   const fireConfetti = useCallback(() => {
     confettiRef.current?.burst();
   }, []);
@@ -2397,7 +2454,7 @@ export default function RecordRoute() {
   // -------------------------------------------------------------------------
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
-      if (discardConfirmOpen) return;
+      if (discardConfirmOpen || playheadConfirmOpenRef.current) return;
       const alt = e.altKey;
       const shift = e.shiftKey;
       const meta = e.metaKey;
@@ -2731,6 +2788,8 @@ export default function RecordRoute() {
           onTogglePause={togglePause}
           onStop={() => void doStop()}
           onCancel={requestDiscard}
+          onConfirmAction={handlePlayheadConfirmAction}
+          onConfirmChange={handlePlayheadConfirmChange}
         />
       )}