@agent-native/core 0.98.17 → 0.99.1

package/corpus/templates/clips/app/components/meetings/transcript-bubbles.tsx

@@ -310,92 +310,89 @@ export function TranscriptBubbles({
         )}
       </div>
       <div ref={containerRef} className="flex-1 overflow-y-auto p-4">
-        <div className="space-y-3">
+        <div className="mx-auto max-w-3xl space-y-6">
           {groups.map((group, gi) => {
             const isMe = group.source === "mic";
             return (
-              <div
-                key={gi}
-                className={cn(
-                  "flex flex-col gap-1",
-                  isMe ? "items-end" : "items-start",
-                )}
-              >
-                <div
-                  className={cn(
-                    "text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70 px-1",
-                  )}
-                >
+              <section key={gi} className="space-y-1.5">
+                <div className="flex items-center gap-2 px-1 text-[11px] font-medium tracking-wide text-muted-foreground">
+                  <span
+                    aria-hidden="true"
+                    className={cn(
+                      "h-1.5 w-1.5 rounded-full",
+                      isMe ? "bg-primary" : "bg-muted-foreground/50",
+                    )}
+                  />
                   {isMe
                     ? t("transcriptBubbles.me")
                     : t("transcriptBubbles.them")}
                 </div>
-                {group.segments.map(({ seg, index }) => {
-                  const clickable = !!recordingId;
-                  return (
-                    <Tooltip key={index}>
-                      <TooltipTrigger asChild>
-                        <div
-                          ref={(el) => {
-                            segmentRefs.current[index] = el;
-                          }}
-                          role={clickable ? "button" : undefined}
-                          tabIndex={clickable ? 0 : -1}
-                          onClick={() => clickable && onSeek(seg.startMs)}
-                          onKeyDown={(e) => {
-                            if (
+                <div className="space-y-0.5">
+                  {group.segments.map(({ seg, index }) => {
+                    const clickable = !!recordingId;
+                    return (
+                      <Tooltip key={index}>
+                        <TooltipTrigger asChild>
+                          <div
+                            ref={(el) => {
+                              segmentRefs.current[index] = el;
+                            }}
+                            role={clickable ? "button" : undefined}
+                            tabIndex={clickable ? 0 : -1}
+                            onClick={() => clickable && onSeek(seg.startMs)}
+                            onKeyDown={(e) => {
+                              if (
+                                clickable &&
+                                (e.key === "Enter" || e.key === " ")
+                              ) {
+                                e.preventDefault();
+                                onSeek(seg.startMs);
+                              }
+                            }}
+                            className={cn(
+                              "group/segment -mx-1 rounded-md px-1 py-1 text-left text-sm leading-relaxed text-foreground transition-colors",
                               clickable &&
-                              (e.key === "Enter" || e.key === " ")
-                            ) {
-                              e.preventDefault();
-                              onSeek(seg.startMs);
-                            }
-                          }}
-                          className={cn(
-                            "max-w-[80%] rounded-2xl px-3.5 py-2 text-sm leading-relaxed transition-shadow",
-                            isMe
-                              ? "bg-primary text-primary-foreground"
-                              : "bg-muted text-foreground",
-                            clickable && "cursor-pointer hover:opacity-90",
-                          )}
-                        >
-                          {seg.speaker && !isMe && (
-                            <div className="text-[10px] font-medium opacity-70 mb-0.5">
-                              {seg.speaker}
-                            </div>
-                          )}
-                          <p className="whitespace-pre-wrap">
-                            {normalizedQuery
-                              ? highlightRuns(seg.text, normalizedQuery).map(
-                                  (run, ri) =>
-                                    run.match ? (
-                                      <mark
-                                        key={ri}
-                                        className={cn(
-                                          "rounded-sm bg-yellow-400/70 text-foreground",
-                                          index === activeMatchIndex &&
-                                            "bg-yellow-400 ring-1 ring-yellow-600",
-                                        )}
-                                      >
-                                        {run.text}
-                                      </mark>
-                                    ) : (
-                                      <span key={ri}>{run.text}</span>
-                                    ),
-                                )
-                              : seg.text}
-                          </p>
-                        </div>
-                      </TooltipTrigger>
-                      <TooltipContent side={isMe ? "left" : "right"}>
-                        <span className="font-mono tabular-nums text-[11px]">
-                          {formatTimestamp(seg.startMs)}
-                        </span>
-                      </TooltipContent>
-                    </Tooltip>
-                  );
-                })}
-              </div>
+                                "cursor-pointer hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                            )}
+                          >
+                            {seg.speaker && !isMe && (
+                              <span className="me-2 text-[11px] font-medium text-muted-foreground">
+                                {seg.speaker}
+                              </span>
+                            )}
+                            <span className="whitespace-pre-wrap">
+                              {normalizedQuery
+                                ? highlightRuns(seg.text, normalizedQuery).map(
+                                    (run, ri) =>
+                                      run.match ? (
+                                        <mark
+                                          key={ri}
+                                          className={cn(
+                                            "rounded-sm bg-yellow-400/70 text-foreground",
+                                            index === activeMatchIndex &&
+                                              "bg-yellow-400 ring-1 ring-yellow-600",
+                                          )}
+                                        >
+                                          {run.text}
+                                        </mark>
+                                      ) : (
+                                        <span key={ri}>{run.text}</span>
+                                      ),
+                                  )
+                                : seg.text}
+                            </span>
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent side="right">
+                          <span className="font-mono tabular-nums text-[11px]">
+                            {formatTimestamp(seg.startMs)}
+                          </span>
+                        </TooltipContent>
+                      </Tooltip>
+                    );
+                  })}
+                </div>
+              </section>
             );
           })}
           <div ref={liveEndRef} />

package/corpus/templates/clips/app/components/recorder/confetti-canvas.tsx

@@ -34,6 +34,7 @@ export const ConfettiCanvas = forwardRef<ConfettiHandle>(
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const particlesRef = useRef<Particle[]>([]);
     const rafRef = useRef<number | null>(null);
+    const startTickRef = useRef<() => void>(() => {});
 
     useEffect(() => {
       const canvas = canvasRef.current;
@@ -93,9 +94,24 @@ export const ConfettiCanvas = forwardRef<ConfettiHandle>(
           live.push(p);
         }
         particlesRef.current = live;
+
+        // Stop instead of redrawing an empty canvas at full refresh rate for
+        // the rest of the page's lifetime — burst() restarts the loop.
+        if (live.length === 0) {
+          rafRef.current = null;
+          return;
+        }
         rafRef.current = window.requestAnimationFrame(tick);
       }
-      rafRef.current = window.requestAnimationFrame(tick);
+
+      startTickRef.current = () => {
+        if (rafRef.current !== null) return;
+        // Reset the dt baseline so the first frame after a restart doesn't
+        // see a huge elapsed gap from the idle period.
+        lastTs = performance.now();
+        rafRef.current = window.requestAnimationFrame(tick);
+      };
+
       return () => {
         if (rafRef.current !== null)
           window.cancelAnimationFrame(rafRef.current);
@@ -129,6 +145,7 @@ export const ConfettiCanvas = forwardRef<ConfettiHandle>(
             life: 1.6 + Math.random() * 0.6,
           });
         }
+        startTickRef.current();
       },
     }));
 

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

@@ -18,6 +18,10 @@ import {
   isLikelyPhoneMicLabel,
   type AudioInputFallback,
 } from "@shared/media-device-selection";
+import {
+  SCREEN_CAPTURE_FRAME_RATE,
+  screenCaptureVideoConstraints,
+} from "@shared/recording-capture";
 import {
   chunkUploadUrl,
   pickMimeType,
@@ -234,9 +238,6 @@ const FINAL_CHUNK_UPLOAD_TIMEOUT_MS = 180_000;
 const RETRYABLE_CHUNK_UPLOAD_STATUSES = new Set([
   408, 425, 429, 500, 502, 503, 504,
 ]);
-const SCREEN_CAPTURE_FRAME_RATE = 24;
-const SCREEN_CAPTURE_MAX_WIDTH = 1920;
-const SCREEN_CAPTURE_MAX_HEIGHT = 1080;
 // Capture quality for the browser MediaRecorder. We no longer shrink files
 // client-side (ffmpeg.wasm re-encode is disabled — see COMPRESSION_ENABLED in
 // `@/lib/compress`) and the upload provider streams large files directly, so we
@@ -907,15 +908,7 @@ export class RecorderEngine {
         this.opts.displaySurface ?? "window",
       );
       const displayOptions: ExtendedDisplayMediaOptions = {
-        video: {
-          frameRate: {
-            ideal: SCREEN_CAPTURE_FRAME_RATE,
-            max: SCREEN_CAPTURE_FRAME_RATE,
-          },
-          width: { ideal: SCREEN_CAPTURE_MAX_WIDTH },
-          height: { ideal: SCREEN_CAPTURE_MAX_HEIGHT },
-          displaySurface,
-        },
+        video: screenCaptureVideoConstraints(displaySurface),
         audio: wantsMic,
         // Let "Browser tab" open the tab picker. preferCurrentTab turns it
         // into a current-tab shortcut, which makes choosing another tab harder.
@@ -1834,6 +1827,7 @@ export class RecorderEngine {
       displayStream: this.displayStream!,
       cameraStream: this.cameraStream!,
       bubbleSizeRatio: this.cameraBubbleSizeRatio(),
+      frameRate: SCREEN_CAPTURE_FRAME_RATE,
     });
     const combined = new MediaStream();
     for (const t of this.cameraComposite.stream.getVideoTracks())

package/corpus/templates/clips/app/components/recorder/recording-toolbar.tsx

@@ -16,7 +16,11 @@ import {
 import { clampRectToViewport, type BubblePosition } from "./camera-positioner";
 
 export interface RecordingToolbarProps {
-  elapsedMs: number;
+  /** Whether the elapsed-time ticker should run — true only while actively
+   * recording (not during upload/compress, which freeze the last value). */
+  active: boolean;
+  /** Reads the current elapsed time from the recorder engine on each tick. */
+  getElapsedMs: () => number;
   isPaused: boolean;
   onTogglePause: () => void;
   onStop: () => void;
@@ -38,7 +42,8 @@ function formatElapsed(ms: number): string {
 }
 
 export function RecordingToolbar({
-  elapsedMs,
+  active,
+  getElapsedMs,
   isPaused,
   onTogglePause,
   onStop,
@@ -46,6 +51,18 @@ export function RecordingToolbar({
 }: RecordingToolbarProps) {
   const t = useT();
   const rootRef = useRef<HTMLDivElement>(null);
+  // Own the elapsed-time poll here instead of in the route component, so the
+  // 4x/sec tick only re-renders this toolbar rather than the whole record page.
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const getElapsedMsRef = useRef(getElapsedMs);
+  getElapsedMsRef.current = getElapsedMs;
+  useEffect(() => {
+    if (!active) return;
+    const id = window.setInterval(() => {
+      setElapsedMs(getElapsedMsRef.current());
+    }, 250);
+    return () => window.clearInterval(id);
+  }, [active]);
   const [pos, setPos] = useState<BubblePosition>(() =>
     typeof window === "undefined"
       ? { left: 16, top: 16, corner: "tl" }

package/corpus/templates/clips/app/lib/camera-composite.ts

@@ -128,16 +128,79 @@ function drawCover(
   ctx.restore();
 }
 
+// Hard ceiling on the composite canvas regardless of source resolution — keeps
+// the per-frame drawImage + encode at 1080p-class cost even on a Retina/4K
+// display or if a browser ignores getDisplayMedia's `max` constraint.
+const MAX_CANVAS_DIMENSION_PX = 1920;
+
+export function clampToMaxDimension(
+  width: number,
+  height: number,
+): { width: number; height: number } {
+  const longest = Math.max(width, height);
+  if (longest <= MAX_CANVAS_DIMENSION_PX) {
+    return { width, height };
+  }
+  const scale = MAX_CANVAS_DIMENSION_PX / longest;
+  // Round to even numbers — odd canvas dimensions can trip up video encoders.
+  return {
+    width: Math.round((width * scale) / 2) * 2,
+    height: Math.round((height * scale) / 2) * 2,
+  };
+}
+
 function resizeCanvasToDisplay(
   canvas: HTMLCanvasElement,
   displayVideo: HTMLVideoElement,
   displayStream: MediaStream,
 ): void {
-  const { width, height } = videoDimensions(displayVideo, displayStream);
+  const source = videoDimensions(displayVideo, displayStream);
+  const { width, height } = clampToMaxDimension(source.width, source.height);
   if (canvas.width !== width) canvas.width = width;
   if (canvas.height !== height) canvas.height = height;
 }
 
+interface BubbleShadowSprite {
+  size: number;
+  canvas: HTMLCanvasElement;
+  pad: number;
+}
+
+// The drop shadow is a per-frame gaussian blur, which is expensive to redraw
+// every frame. Cache the rendered shadow in an offscreen sprite keyed by
+// bubble size — margin only shifts where the sprite is later placed, not its
+// bitmap — and only re-render when the size actually changes.
+let bubbleShadowSprite: BubbleShadowSprite | null = null;
+
+function getBubbleShadowSprite(size: number): BubbleShadowSprite {
+  if (bubbleShadowSprite && bubbleShadowSprite.size === size) {
+    return bubbleShadowSprite;
+  }
+  const blur = Math.max(16, size * 0.12);
+  const offsetY = Math.max(8, size * 0.05);
+  // Padding wide enough that the blurred, offset shadow never clips at the
+  // sprite's edge.
+  const pad = Math.ceil(blur * 2 + offsetY);
+  const spriteSize = size + pad * 2;
+  const sprite = document.createElement("canvas");
+  sprite.width = spriteSize;
+  sprite.height = spriteSize;
+  const sctx = sprite.getContext("2d");
+  if (sctx) {
+    const radius = size / 2;
+    const center = pad + radius;
+    sctx.shadowColor = "rgba(0, 0, 0, 0.35)";
+    sctx.shadowBlur = blur;
+    sctx.shadowOffsetY = offsetY;
+    sctx.fillStyle = "#000";
+    sctx.beginPath();
+    sctx.arc(center, center, radius, 0, Math.PI * 2);
+    sctx.fill();
+  }
+  bubbleShadowSprite = { size, canvas: sprite, pad };
+  return bubbleShadowSprite;
+}
+
 function drawCameraBubble(
   ctx: CanvasRenderingContext2D,
   cameraVideo: HTMLVideoElement,
@@ -172,15 +235,12 @@ function drawCameraBubble(
   const centerX = x + radius;
   const centerY = y + radius;
 
-  ctx.save();
-  ctx.shadowColor = "rgba(0, 0, 0, 0.35)";
-  ctx.shadowBlur = Math.max(16, size * 0.12);
-  ctx.shadowOffsetY = Math.max(8, size * 0.05);
-  ctx.fillStyle = "#000";
-  ctx.beginPath();
-  ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.restore();
+  const shadow = getBubbleShadowSprite(size);
+  ctx.drawImage(
+    shadow.canvas,
+    centerX - shadow.pad - radius,
+    centerY - shadow.pad - radius,
+  );
 
   ctx.save();
   ctx.beginPath();

package/corpus/templates/clips/app/routes/_app.meetings.$meetingId.tsx

@@ -912,7 +912,7 @@ export default function MeetingDetailRoute() {
           </div>
         </div>
 
-        {/* Transcript pane — chat-bubble layout */}
+        {/* Transcript pane — plain agent-chat-style text layout */}
         <div className="rounded-lg border border-border bg-background min-h-[480px] lg:min-h-0 overflow-hidden flex flex-col">
           <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border px-4 py-2.5 bg-background">
             <div className="flex items-center gap-1.5 text-xs font-medium">

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

@@ -843,7 +843,6 @@ export default function RecordRoute() {
   const [error, setError] = useState<string | null>(null);
   const [isPaused, setIsPaused] = useState(false);
   const visibilityAutoPausedRef = useRef(false);
-  const [elapsedMs, setElapsedMs] = useState(0);
   const [cameraStream, setCameraStream] = useState<MediaStream | null>(null);
   const [cameraSize, setCameraSize] = useState<CameraBubbleSize>(
     () => loadRecorderPreferences().cameraSize ?? "md",
@@ -985,35 +984,15 @@ export default function RecordRoute() {
     micDeviceLabel?: string | null;
     cameraDeviceId: string | null;
   } | null>(null);
-  const tickRef = useRef<number | null>(null);
   const previewVideoRef = useRef<HTMLVideoElement>(null);
   const fileUploadAbortRef = useRef<AbortController | null>(null);
   const browserDiagnosticsRef = useRef<BrowserDiagnosticsCapture | null>(null);
   // Bumped by doCancel() to invalidate any in-flight startFlow().
   const startSessionRef = useRef(0);
 
-  // -------------------------------------------------------------------------
-  // Timer
-  // -------------------------------------------------------------------------
-  useEffect(() => {
-    if (uiState !== "recording") {
-      if (tickRef.current !== null) {
-        window.clearInterval(tickRef.current);
-        tickRef.current = null;
-      }
-      return;
-    }
-    tickRef.current = window.setInterval(() => {
-      const e = engineRef.current?.getElapsedMs() ?? 0;
-      setElapsedMs(e);
-    }, 250);
-    return () => {
-      if (tickRef.current !== null) {
-        window.clearInterval(tickRef.current);
-        tickRef.current = null;
-      }
-    };
-  }, [uiState]);
+  // Elapsed-time display now ticks inside RecordingToolbar itself (via
+  // `active` + `getElapsedMs`) so the ~4x/sec poll doesn't re-render this
+  // whole route — see the `active`/`getElapsedMs` props passed below.
 
   // -------------------------------------------------------------------------
   // Wire preview stream into its video element.
@@ -2671,7 +2650,8 @@ export default function RecordRoute() {
       {/* Floating toolbar */}
       {showRecordingUi && (
         <RecordingToolbar
-          elapsedMs={elapsedMs}
+          active={uiState === "recording"}
+          getElapsedMs={() => engineRef.current?.getElapsedMs() ?? 0}
           isPaused={isPaused}
           onTogglePause={togglePause}
           onStop={() => void doStop()}

package/corpus/templates/clips/changelog/2026-07-13-clips-desktop-now-requires-macos-13-for-native-capture.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Clips Desktop now declares its macOS 13 minimum consistently with the native ScreenCaptureKit and Metal capture stack.

package/corpus/templates/clips/changelog/2026-07-13-clips-hide-solo-meeting-reminders.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Clips no longer shows meeting-notes reminders for calendar events attended only by you.

package/corpus/templates/clips/changelog/2026-07-13-clips-now-removes-duplicate-mic-and-system-transcript-turns-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Clips now removes duplicate mic and system transcript turns and filters more silent-audio hallucinations.

package/corpus/templates/clips/changelog/2026-07-13-desktop-recordings-run-cooler-and-quieter-live-transcription.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-13
+---
+
+Desktop recordings run cooler and quieter: live transcription now uses the GPU on Apple Silicon

package/corpus/templates/clips/changelog/2026-07-13-meeting-recordings-now-stop-after-a-calendar-meeting-ends-an.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Meeting recordings now stop after a calendar meeting ends and goes quiet

package/corpus/templates/clips/changelog/2026-07-13-meeting-transcripts-now-use-a-clean-agent-chat-style-reading.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-13
+---
+
+Meeting transcripts now use a clean, agent-chat-style reading layout instead of chat bubbles.

package/corpus/templates/clips/changelog/2026-07-13-screen-recordings-use-less-processing-power-during-longer-ca.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-13
+---
+
+Screen recordings use less processing power during longer captures

package/corpus/templates/clips/chrome-extension/src/background.ts

@@ -258,9 +258,11 @@ type OverlayPart = "bubble" | "countdown" | "toolbar" | "saving";
 let overlayPhase: OverlayPhase = "idle";
 let overlayBaseElapsedMs = 0;
 let overlayBaseEpochMs = 0;
-// Bubble during the countdown preview (any camera). During recording, the face
-// is composited into the video by the offscreen for screen+camera, so we only
-// show the on-page bubble for camera-only mode (recordingShowsBubble).
+// Bubble during the countdown preview (any camera). The offscreen document does
+// NOT composite the camera into screen recordings — that compositor code path is
+// unreachable because screen mode never acquires a camera stream (see
+// offscreen.ts acquire()). So the on-page bubble is the only place the face shows
+// up, for both camera-only AND screen+camera recording (recordingShowsBubble).
 let overlayShowsBubble = false;
 let recordingShowsBubble = false;
 // Cross-tab follow: when true, the overlay is pushed to whatever tab the user

package/corpus/templates/clips/chrome-extension/src/offscreen.ts

@@ -23,6 +23,11 @@ import {
   type AudioInputFallback,
 } from "@shared/media-device-selection";
 import { scheduleReadyChime } from "@shared/recording-audio";
+import {
+  SCREEN_CAPTURE_FRAME_RATE,
+  screenCaptureVideoConstraints,
+  type ScreenCaptureSurface,
+} from "@shared/recording-capture";
 import {
   chunkUploadUrl,
   pickMimeType,
@@ -300,19 +305,10 @@ async function streamDimensions(
 }
 
 function displayConstraints(
-  surface: "browser" | "window" | "monitor",
+  surface: ScreenCaptureSurface,
 ): MediaStreamConstraints {
-  const displaySurface =
-    surface === "browser"
-      ? "browser"
-      : surface === "window"
-        ? "window"
-        : "monitor";
   return {
-    video: {
-      frameRate: { ideal: 30, max: 30 },
-      ...({ displaySurface } as object),
-    },
+    video: screenCaptureVideoConstraints(surface),
     audio: {
       echoCancellation: false,
       noiseSuppression: false,
@@ -373,6 +369,10 @@ function cameraConstraints(deviceId: string): MediaTrackConstraints {
   const base: MediaTrackConstraints = {
     width: { ideal: 1280 },
     height: { ideal: 720 },
+    frameRate: {
+      ideal: SCREEN_CAPTURE_FRAME_RATE,
+      max: SCREEN_CAPTURE_FRAME_RATE,
+    },
   };
   if (deviceId) base.deviceId = { exact: deviceId };
   else base.facingMode = "user";
@@ -750,7 +750,7 @@ async function buildCompositor(
   };
   raf = requestAnimationFrame(draw);
 
-  const canvasStream = canvas.captureStream(30);
+  const canvasStream = canvas.captureStream(SCREEN_CAPTURE_FRAME_RATE);
   return {
     videoTrack: canvasStream.getVideoTracks()[0],
     canvasStream,
@@ -1194,8 +1194,11 @@ async function begin(message: BeginMessage): Promise<{
   const mimeType = pickMimeType() || "video/webm";
   const recorder = new MediaRecorder(outputStream, {
     mimeType,
-    // Crisp 1080p capture — matches the web/desktop recorders. Files upload
-    // directly (no client-side shrink), so we favor sharpness over a budget.
+    // Crisp 1080p capture — matches the web/desktop recorders. displayConstraints()
+    // (see screenCaptureVideoConstraints in @shared/recording-capture) caps retina/5K
+    // surfaces down to 1920x1080 before this point, so the software VP8 encoder is
+    // never fed native-resolution frames. Files upload directly (no client-side
+    // shrink), so within that cap we favor sharpness over a bitrate budget.
     videoBitsPerSecond: 8_000_000,
     audioBitsPerSecond: 128_000,
   });

package/corpus/templates/clips/chrome-extension/src/overlay.ts

@@ -1,4 +1,6 @@
 import "./overlay.css";
+import { SCREEN_CAPTURE_FRAME_RATE } from "@shared/recording-capture";
+
 import { captureExtensionError, initExtensionSentry } from "./sentry";
 
 initExtensionSentry("overlay");
@@ -31,8 +33,12 @@ function isDeviceUnavailableError(error: unknown): boolean {
 
 function cameraConstraint(deviceId: string): MediaTrackConstraints {
   const video: MediaTrackConstraints = {
-    width: { ideal: 640 },
-    height: { ideal: 640 },
+    width: { ideal: 480 },
+    height: { ideal: 480 },
+    frameRate: {
+      ideal: SCREEN_CAPTURE_FRAME_RATE,
+      max: SCREEN_CAPTURE_FRAME_RATE,
+    },
   };
   if (deviceId) video.deviceId = { exact: deviceId };
   else video.facingMode = "user";

package/corpus/templates/clips/desktop/README.md

@@ -2,6 +2,9 @@
 
 A small Tauri 2.x tray app for macOS, Windows, and Linux. Click the icon — or press the global shortcut `Cmd/Ctrl+Shift+L` — to open a popover with:
 
+The macOS desktop build requires macOS 13 or newer because its native
+ScreenCaptureKit and Metal transcription dependencies target that SDK.
+
 - **New recording** button (opens `/record` on your configured Clips server)
 - **Recent** — your three most recent recordings
 - Quick links to **Open library** and **Settings**