@agent-native/core 0.79.17 → 0.79.18

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

@@ -24,6 +24,7 @@ import {
   IconClipboardCopy,
   IconFileText,
   IconSparkles,
+  IconLayoutSidebarRightExpand,
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -54,6 +55,12 @@ import {
   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 {
@@ -100,6 +107,20 @@ interface GeneratedWorkflowState {
   error?: string;
 }
 
+function useIsCompactRecordingLayout() {
+  const [isCompact, setIsCompact] = useState(false);
+
+  useEffect(() => {
+    const query = window.matchMedia("(max-width: 1279px)");
+    const update = () => setIsCompact(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+
+  return isCompact;
+}
+
 function isNativeSaveFailureReason(reason: string | null | undefined): boolean {
   return /native recording upload|native fullscreen|screencapture|avconvert/i.test(
     reason ?? "",
@@ -129,6 +150,7 @@ function nativeSaveFailureMessage(reason: string | null | undefined): string {
 
 function InsightsUnavailableState() {
   const t = useT();
+
   return (
     <div className="flex h-full flex-col items-center justify-center px-8 py-12 text-center">
       <p className="text-sm font-medium text-foreground">
@@ -179,9 +201,11 @@ export default function RecordingPage() {
   const playerRef = useRef<VideoPlayerHandle | null>(null);
 
   const [panel, setPanel] = useState<SidePanel>("agent");
+  const [sidePanelOpen, setSidePanelOpen] = useState(false);
   const [theaterMode, setTheaterMode] = useState(false);
   const [editing, setEditing] = useState(false);
   const [currentMs, setCurrentMs] = useState(0);
+  const isCompactLayout = useIsCompactRecordingLayout();
   const transcriptKickedRef = useRef<string | null>(null);
   // When the recording lands in the processing state but never flips to
   // 'ready', stop spinning forever and surface an error banner so the user
@@ -413,6 +437,10 @@ export default function RecordingPage() {
     if (!canUseNativeEditor && editing) setEditing(false);
   }, [canUseNativeEditor, editing]);
 
+  useEffect(() => {
+    if (editing || !isCompactLayout) setSidePanelOpen(false);
+  }, [editing, isCompactLayout]);
+
   useEffect(() => {
     if (!recording) return;
     document.title = isDefaultTitle(recording.title)
@@ -647,6 +675,158 @@ export default function RecordingPage() {
     );
   }
 
+  const renderSidePanel = (compact = false) => (
+    <Tabs
+      value={panel}
+      onValueChange={(v) => setPanel(v as SidePanel)}
+      className={cn("flex h-full flex-col", compact && "pt-8")}
+    >
+      <TabsList
+        className={cn(
+          "mx-3 mt-3 grid w-auto",
+          canEdit ? "grid-cols-5" : "grid-cols-4",
+        )}
+      >
+        <TabsTrigger value="agent" className="min-w-0 px-2 text-xs">
+          {t("recordingPage.agent")}
+        </TabsTrigger>
+        <TabsTrigger value="comments" className="min-w-0 px-2 text-xs">
+          {t("recordingPage.activity")}
+        </TabsTrigger>
+        <TabsTrigger value="transcript" className="min-w-0 px-2 text-xs">
+          {t("recordingPage.transcript")}
+        </TabsTrigger>
+        <TabsTrigger value="insights" className="min-w-0 px-2 text-xs">
+          {t("recordingPage.insights")}
+        </TabsTrigger>
+        {canEdit ? (
+          <TabsTrigger value="settings" className="min-w-0 px-2 text-xs">
+            {t("recordingPage.settings")}
+          </TabsTrigger>
+        ) : null}
+      </TabsList>
+
+      <TabsContent
+        value="agent"
+        className="mt-0 flex flex-1 min-h-0 flex-col data-[state=inactive]:hidden"
+      >
+        <AgentPanel
+          browserTabId={getBrowserTabId()}
+          emptyStateText={t("recordingPage.askAboutClip")}
+          dynamicSuggestions={false}
+          chatNotice={
+            generatedWorkflow ? (
+              <GeneratedWorkflowNotice workflow={generatedWorkflow} />
+            ) : null
+          }
+          suggestions={
+            canEdit
+              ? [
+                  t("recordingPage.summarizeClip"),
+                  t("recordingPage.generateChapters"),
+                  t("recordingPage.findActionItems"),
+                  t("recordingPage.draftRecap"),
+                ]
+              : [
+                  t("recordingPage.summarizeClip"),
+                  t("recordingPage.findKeyMoments"),
+                  t("recordingPage.listFollowUpActions"),
+                  t("recordingPage.draftQuestions"),
+                ]
+          }
+        />
+      </TabsContent>
+      <TabsContent
+        value="transcript"
+        className="flex-1 min-h-0 mt-3 data-[state=inactive]:hidden"
+      >
+        <TranscriptPanel
+          segments={transcriptSegments}
+          fullText={transcriptFullText}
+          durationMs={recording.durationMs}
+          currentMs={currentMs}
+          onSeek={(ms) => playerRef.current?.seek(ms)}
+          status={transcriptStatus}
+          failureReason={transcriptFailureReason}
+          cleanup={transcriptCleanup}
+          recordingTitle={recording.title}
+          onRetry={() => {
+            // Force a fresh transcript job, then let polling swap the panel
+            // back to the pending state while it runs.
+            fetch(
+              agentNativePath("/_agent-native/actions/request-transcript"),
+              {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                  recordingId: recording.id,
+                  force: true,
+                }),
+              },
+            )
+              .then((res) => {
+                if (!res.ok) throw new Error(`HTTP ${res.status}`);
+              })
+              .catch((err) =>
+                toast.error(
+                  t("recordingPage.retryFailed", {
+                    message: err?.message ?? t("recordingPage.networkError"),
+                  }),
+                ),
+              )
+              .finally(() => playerDataQ.refetch());
+          }}
+        />
+      </TabsContent>
+      <TabsContent
+        value="comments"
+        className="flex-1 min-h-0 mt-3 data-[state=inactive]:hidden"
+      >
+        <CommentsPanel
+          recordingId={recording.id}
+          comments={comments}
+          currentMs={currentMs}
+          currentUserEmail={session?.email}
+          enableComments={recording.enableComments}
+          onSeek={(ms) => playerRef.current?.seek(ms)}
+          queryKey={[
+            "action",
+            "get-recording-player-data",
+            { recordingId: recordingId ?? "" },
+          ]}
+        />
+      </TabsContent>
+      <TabsContent
+        value="insights"
+        className="flex-1 min-h-0 mt-3 overflow-y-auto data-[state=inactive]:hidden"
+      >
+        {canEdit ? (
+          <InsightsPanel
+            recordingId={recording.id}
+            durationMs={recording.durationMs}
+          />
+        ) : (
+          <InsightsUnavailableState />
+        )}
+      </TabsContent>
+      {canEdit ? (
+        <TabsContent
+          value="settings"
+          className="mt-3 flex flex-1 min-h-0 flex-col data-[state=inactive]:hidden"
+        >
+          <SettingsPanel
+            recording={recording}
+            visibility={recording.visibility}
+            ctas={ctas}
+            onClose={() => setPanel("agent")}
+            onRefetch={() => playerDataQ.refetch()}
+            showHeader={false}
+          />
+        </TabsContent>
+      ) : null}
+    </Tabs>
+  );
+
   return (
     <div className="flex h-screen w-full bg-background overflow-hidden">
       {/* Main video column */}
@@ -797,6 +977,23 @@ export default function RecordingPage() {
             </DropdownMenu>
           ) : null}
 
+          {!editing ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="xl:hidden"
+                  onClick={() => setSidePanelOpen(true)}
+                  aria-label={t("recordingPage.details")}
+                >
+                  <IconLayoutSidebarRightExpand className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("recordingPage.details")}</TooltipContent>
+            </Tooltip>
+          ) : null}
+
           <ShareRecordingPopover
             recordingId={recording.id}
             recordingTitle={recording.title}
@@ -935,162 +1132,29 @@ export default function RecordingPage() {
 
       {/* Side panel */}
       {!editing ? (
-        <aside className="w-[380px] border-s border-border flex flex-col shrink-0 bg-background">
-          <Tabs
-            value={panel}
-            onValueChange={(v) => setPanel(v as SidePanel)}
-            className="flex flex-col h-full"
-          >
-            <TabsList
-              className={cn(
-                "mx-3 mt-3 grid w-auto",
-                canEdit ? "grid-cols-5" : "grid-cols-4",
-              )}
-            >
-              <TabsTrigger value="agent" className="min-w-0 px-2 text-xs">
-                {t("recordingPage.agent")}
-              </TabsTrigger>
-              <TabsTrigger value="comments" className="min-w-0 px-2 text-xs">
-                {t("recordingPage.activity")}
-              </TabsTrigger>
-              <TabsTrigger value="transcript" className="min-w-0 px-2 text-xs">
-                {t("recordingPage.transcript")}
-              </TabsTrigger>
-              <TabsTrigger value="insights" className="min-w-0 px-2 text-xs">
-                {t("recordingPage.insights")}
-              </TabsTrigger>
-              {canEdit ? (
-                <TabsTrigger value="settings" className="min-w-0 px-2 text-xs">
-                  {t("recordingPage.settings")}
-                </TabsTrigger>
-              ) : null}
-            </TabsList>
-
-            <TabsContent
-              value="agent"
-              className="mt-0 flex flex-1 min-h-0 flex-col data-[state=inactive]:hidden"
-            >
-              <AgentPanel
-                browserTabId={getBrowserTabId()}
-                emptyStateText={t("recordingPage.askAboutClip")}
-                dynamicSuggestions={false}
-                chatNotice={
-                  generatedWorkflow ? (
-                    <GeneratedWorkflowNotice workflow={generatedWorkflow} />
-                  ) : null
-                }
-                suggestions={
-                  canEdit
-                    ? [
-                        t("recordingPage.summarizeClip"),
-                        t("recordingPage.generateChapters"),
-                        t("recordingPage.findActionItems"),
-                        t("recordingPage.draftRecap"),
-                      ]
-                    : [
-                        t("recordingPage.summarizeClip"),
-                        t("recordingPage.findKeyMoments"),
-                        t("recordingPage.listFollowUpActions"),
-                        t("recordingPage.draftQuestions"),
-                      ]
-                }
-              />
-            </TabsContent>
-            <TabsContent
-              value="transcript"
-              className="flex-1 min-h-0 mt-3 data-[state=inactive]:hidden"
-            >
-              <TranscriptPanel
-                segments={transcriptSegments}
-                fullText={transcriptFullText}
-                durationMs={recording.durationMs}
-                currentMs={currentMs}
-                onSeek={(ms) => playerRef.current?.seek(ms)}
-                status={transcriptStatus}
-                failureReason={transcriptFailureReason}
-                cleanup={transcriptCleanup}
-                recordingTitle={recording.title}
-                onRetry={() => {
-                  // Re-run transcription now that the user may have connected
-                  // Builder/Gemini or after a one-off network error. The action
-                  // flips the row to 'pending' first, so the UI swaps back to
-                  // "Transcribing…".
-                  fetch(
-                    agentNativePath(
-                      "/_agent-native/actions/request-transcript",
-                    ),
-                    {
-                      method: "POST",
-                      headers: { "Content-Type": "application/json" },
-                      body: JSON.stringify({
-                        recordingId: recording.id,
-                        force: true,
-                      }),
-                    },
-                  )
-                    .then((res) => {
-                      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-                    })
-                    .catch((err) =>
-                      toast.error(
-                        t("recordingPage.retryFailed", {
-                          message:
-                            err?.message ?? t("recordingPage.networkError"),
-                        }),
-                      ),
-                    )
-                    .finally(() => playerDataQ.refetch());
-                }}
-              />
-            </TabsContent>
-            <TabsContent
-              value="comments"
-              className="flex-1 min-h-0 mt-3 data-[state=inactive]:hidden"
-            >
-              <CommentsPanel
-                recordingId={recording.id}
-                comments={comments}
-                currentMs={currentMs}
-                currentUserEmail={session?.email}
-                enableComments={recording.enableComments}
-                onSeek={(ms) => playerRef.current?.seek(ms)}
-                queryKey={[
-                  "action",
-                  "get-recording-player-data",
-                  { recordingId: recordingId ?? "" },
-                ]}
-              />
-            </TabsContent>
-            <TabsContent
-              value="insights"
-              className="flex-1 min-h-0 mt-3 overflow-y-auto data-[state=inactive]:hidden"
-            >
-              {canEdit ? (
-                <InsightsPanel
-                  recordingId={recording.id}
-                  durationMs={recording.durationMs}
-                />
-              ) : (
-                <InsightsUnavailableState />
-              )}
-            </TabsContent>
-            {canEdit ? (
-              <TabsContent
-                value="settings"
-                className="mt-3 flex flex-1 min-h-0 flex-col data-[state=inactive]:hidden"
+        <>
+          {isCompactLayout ? (
+            <Sheet open={sidePanelOpen} onOpenChange={setSidePanelOpen}>
+              <SheetContent
+                side="right"
+                className="flex h-full w-[calc(100vw-24px)] max-w-[420px] flex-col gap-0 p-0 sm:max-w-[420px]"
               >
-                <SettingsPanel
-                  recording={recording}
-                  visibility={recording.visibility}
-                  ctas={ctas}
-                  onClose={() => setPanel("agent")}
-                  onRefetch={() => playerDataQ.refetch()}
-                  showHeader={false}
-                />
-              </TabsContent>
-            ) : null}
-          </Tabs>
-        </aside>
+                <SheetTitle className="sr-only">
+                  {t("recordingPage.details")}
+                </SheetTitle>
+                <SheetDescription className="sr-only">
+                  {t("recordingPage.askAboutClip")}
+                </SheetDescription>
+                {renderSidePanel(true)}
+              </SheetContent>
+            </Sheet>
+          ) : null}
+          {!isCompactLayout ? (
+            <aside className="hidden w-[380px] shrink-0 flex-col border-s border-border bg-background xl:flex">
+              {renderSidePanel()}
+            </aside>
+          ) : null}
+        </>
       ) : null}
     </div>
   );

package/corpus/templates/clips/changelog/2026-06-26-long-desktop-recordings-are-checkpointed-so-macos-finalizati.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+Long desktop recordings are checkpointed so macOS finalization failures can recover the saved portions.

package/corpus/templates/clips/changelog/2026-06-26-non-mac-desktop-recordings-wait-for-upload-transcription.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+Non-Mac desktop recordings now try Web Speech transcripts before falling back to upload transcription.

package/corpus/templates/clips/changelog/2026-06-26-s3-compatible-storage-keys-now-save-securely-from-clips-sett.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+S3-compatible storage keys now save securely from Clips Settings without requiring deployment env vars.

package/corpus/templates/clips/changelog/2026-06-26-shared-clip-links-guide-agents-through-processing-transcripts.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-26
+---
+
+Shared clip links now guide agents through processing transcripts and exhausted transcription credits.

package/corpus/templates/clips/changelog/2026-06-26-the-clip-details-sidebar-now-collapses-into-a-slide-out-pane.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-26
+---
+
+The clip details sidebar now collapses into a slide-out panel on smaller screens.

package/corpus/templates/clips/desktop/src/lib/recorder.ts

@@ -86,6 +86,7 @@ const NATIVE_FULLSCREEN_RECORDING_FLAG = "clips:native-fullscreen-recording";
 const DEV_SYNTHETIC_CAPTURE_FLAG = "clips:dev-synthetic-capture";
 const LEGACY_DEV_REAL_CAPTURE_FLAG = "clips:dev-real-capture";
 const LIVE_UPLOAD_CHUNK_MS = 1_000;
+const NATIVE_FULLSCREEN_SEGMENT_MS = 5 * 60_000;
 const CLOUD_CAPTURE_FRAME_RATE = 24;
 const CLOUD_CAPTURE_MAX_WIDTH = 1920;
 const CLOUD_CAPTURE_MAX_HEIGHT = 1080;
@@ -122,6 +123,13 @@ export function shouldUseNativeFullscreenRecording(
   return isMacPlatform();
 }
 
+function shouldSaveLocalTranscriptionStartupFailure(): boolean {
+  // Local Whisper/SFSpeech capture is macOS-only today. Non-mac desktop builds
+  // should wait for upload transcription instead of publishing a misleading
+  // native-transcription failure before `request-transcript` runs.
+  return isMacPlatform();
+}
+
 function shouldUseDevSyntheticCapture(): boolean {
   if (!import.meta.env.DEV) return false;
   if (typeof localStorage === "undefined") return false;
@@ -962,7 +970,7 @@ async function saveRecordingTranscript(
         recordingId,
         fullText: text,
         segments: transcript.segments,
-        source: "whisper",
+        source: transcript.source ?? "whisper",
       }),
     });
     if (!res.ok) {
@@ -1753,6 +1761,8 @@ async function startNativeFullscreenRecording(
   let cancelPromise: Promise<void> | null = null;
   let stateUnlistens: UnlistenFn[] = [];
   let tickHandle: ReturnType<typeof setInterval> | null = null;
+  let segmentRotateHandle: ReturnType<typeof setInterval> | null = null;
+  let segmentRotateInFlight = false;
   // Pause/resume tracking. The Rust side actually stops the SCStream on
   // pause and starts a new segment on resume; on stop it concatenates
   // segments via AVFoundation. We keep the JS-side timer in sync so the
@@ -1760,6 +1770,37 @@ async function startNativeFullscreenRecording(
   let pausedAt: number | null = null;
   let accumulatedPauseMs = 0;
 
+  function clearSegmentRotator() {
+    if (segmentRotateHandle) {
+      clearInterval(segmentRotateHandle);
+      segmentRotateHandle = null;
+    }
+  }
+
+  function startSegmentRotator() {
+    clearSegmentRotator();
+    segmentRotateHandle = setInterval(() => {
+      if (stopped || pausedAt != null || segmentRotateInFlight) return;
+      segmentRotateInFlight = true;
+      invoke("native_fullscreen_recording_rotate_segment")
+        .catch((err) => {
+          const message = err instanceof Error ? err.message : String(err);
+          console.warn("[clips-recorder] native segment rotation failed:", err);
+          if (
+            !stopped &&
+            pausedAt == null &&
+            message.includes("paused recording")
+          ) {
+            pausedAt = Date.now();
+            emitState();
+          }
+        })
+        .finally(() => {
+          segmentRotateInFlight = false;
+        });
+    }, NATIVE_FULLSCREEN_SEGMENT_MS);
+  }
+
   function emitState() {
     const now = Date.now();
     const pausedNowMs = pausedAt != null ? now - pausedAt : 0;
@@ -1781,6 +1822,7 @@ async function startNativeFullscreenRecording(
         stopped = true;
         console.log("[clips-recorder] native full-screen stop requested");
         if (!localOnly) showFinalizingFeedback();
+        clearSegmentRotator();
         if (tickHandle) {
           clearInterval(tickHandle);
           tickHandle = null;
@@ -1940,6 +1982,7 @@ async function startNativeFullscreenRecording(
       if (stopped) return;
       cancelPromise = (async () => {
         stopped = true;
+        clearSegmentRotator();
         if (tickHandle) {
           clearInterval(tickHandle);
           tickHandle = null;
@@ -2020,6 +2063,7 @@ async function startNativeFullscreenRecording(
   ]);
   stateUnlistens = toolbarUnlistens;
   tickHandle = setInterval(emitState, 500);
+  startSegmentRotator();
   emit("clips:toolbar-enabled", true).catch(() => {});
   emitState();
 
@@ -2041,7 +2085,11 @@ async function startNativeFullscreenRecording(
     if (stopped && transcriptionCapture) {
       void transcriptionCapture.cancel().catch(() => {});
       transcriptionCapture = null;
-    } else if (wantsAudio && !transcriptionCapture) {
+    } else if (
+      wantsAudio &&
+      !transcriptionCapture &&
+      shouldSaveLocalTranscriptionStartupFailure()
+    ) {
       void saveTranscriptFailure(
         "macOS Speech recognition could not start for this recording. Check Speech Recognition and Microphone permissions, then retry transcription.",
       );
@@ -2863,7 +2911,11 @@ async function startRecordingInner(
   if (stopped && transcriptionCapture) {
     void transcriptionCapture.cancel().catch(() => {});
     transcriptionCapture = null;
-  } else if (wantsAudio && !transcriptionCapture) {
+  } else if (
+    wantsAudio &&
+    !transcriptionCapture &&
+    shouldSaveLocalTranscriptionStartupFailure()
+  ) {
     void saveTranscriptFailure(
       "macOS Speech recognition could not start for this recording. Check Speech Recognition and Microphone permissions, then retry transcription.",
     );