@agent-native/core 0.98.17 → 0.99.0

package/corpus/templates/calendar/app/lib/attendee-local-time.ts

@@ -3,9 +3,12 @@
  *
  * Resolution priority for an attendee's IANA timezone:
  * 1. Self attendee (`attendee.self` or email matches accountEmail) →
- *    event.startTimeZone, else the browser timezone
+ *    the browser timezone, so an event owner's timezone is never shown as
+ *    the signed-in user's local time
  * 2. Optional `attendee.timeZone` on the attendee object
  * 3. User-stored override from the `attendee-timezones` setting map
+ * 4. The event start timezone for the organizer when no more specific zone is
+ *    available
  *
  * When no timezone is known, returns null — never invent a zone.
  */
@@ -13,6 +16,7 @@
 export type AttendeeTimezoneSource = {
   email: string;
   self?: boolean;
+  organizer?: boolean;
   timeZone?: string;
 };
 
@@ -61,15 +65,16 @@ export function resolveAttendeeTimeZone(
   } = input;
 
   if (isSelfAttendee(attendee, accountEmail)) {
-    if (isValidIanaTimeZone(eventStartTimeZone)) {
-      return eventStartTimeZone!.trim();
-    }
     const browser =
       browserTimeZone?.trim() ||
       (typeof Intl !== "undefined"
         ? Intl.DateTimeFormat().resolvedOptions().timeZone
         : undefined);
-    return isValidIanaTimeZone(browser) ? browser!.trim() : null;
+    if (isValidIanaTimeZone(browser)) return browser!.trim();
+
+    return isValidIanaTimeZone(eventStartTimeZone)
+      ? eventStartTimeZone!.trim()
+      : null;
   }
 
   if (isValidIanaTimeZone(attendee.timeZone)) {
@@ -82,6 +87,10 @@ export function resolveAttendeeTimeZone(
     return override!.trim();
   }
 
+  if (attendee.organizer && isValidIanaTimeZone(eventStartTimeZone)) {
+    return eventStartTimeZone!.trim();
+  }
+
   return null;
 }
 

package/corpus/templates/calendar/changelog/2026-07-13-your-local-time-now-follows-your-browser-timezone-and-event-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Your local time now follows your browser timezone, and event details no longer show a redundant timezone row.

package/corpus/templates/chat/.agents/skills/security/SKILL.md

@@ -147,6 +147,16 @@ export default defineEventHandler(async (event) => {
 
 - Never create unprotected routes that modify data.
 
+**Exception — the SSR HTML/`.data` catch-all is deliberately session-blind.**
+The rule above is for routes that read or mutate user data. The SSR page
+render and React Router `.data` route are different: they serve one
+impersonal, public-cacheable shell to every visitor by design, and loaders on
+that path render no user data. Do not "fix" this by adding `getSession`,
+`private`, or `no-store` to it — that regresses the CDN cache contract for the
+whole site. Data scoping lives in actions and API routes; the client gates
+private UI after the shell loads. See the `authentication` skill and
+`guard:ssr-cache-shell` / `ssr-handler.spec.ts`.
+
 ## Human-in-the-Loop Approval for High-Consequence Actions
 
 For a small set of outward-facing, hard-to-undo operations — sending an email, charging a card, deleting an account, posting publicly — auth and access control are necessary but not sufficient: you also do not want the **agent** to perform them autonomously. Set `needsApproval` on the `defineAction` so the agent cannot run the action without a human approving the specific call.

package/corpus/templates/clips/.agents/skills/recording/SKILL.md

@@ -44,7 +44,7 @@ Raw `MediaRecorder` files are not friendly to progressive HTTP playback, which
 shows up as "clip takes minutes to load" and "re-buffers every time I seek"
 even though the file downloads fine:
 
-- **MP4** is written with the `moov` metadata atom *after* `mdat`, so a player
+- **MP4** is written with the `moov` metadata atom _after_ `mdat`, so a player
   must fetch the whole file before it can start or seek.
 - **WebM** is a live stream with no Cues (seek index) and an unknown Segment
   duration, so Chrome won't honor `currentTime = X` and has to scan/download.
@@ -116,7 +116,12 @@ different listing.
 
 ## Camera bubble
 
-When mode is `screen+camera`, we composite a circular camera feed in the corner. Render the bubble in a separate `<video>` element and record it into a second `MediaRecorder`; the server side stitches them with ffmpeg.wasm during `processing`. Do **not** try to pre-composite in the browser — that burns GPU and drops frames.
+When mode is `screen+camera`, "the bubble" is two different things:
+
+- **On-screen self-view.** `CameraBubble` renders a plain, unrecorded `<video>` element the user drags around to frame themselves during countdown/recording. It is never captured — it's just local framing UI.
+- **Recorded composite.** Display capture can't include that DOM element once the user records another window/app, so the saved video has to bake the camera circle in before `MediaRecorder` ever sees a frame. `createCameraCompositeStream` (`app/lib/camera-composite.ts`) draws the display video plus a clipped, mirrored camera circle onto an offscreen `<canvas>` and feeds `canvas.captureStream()` into a single `MediaRecorder`. There is **no** second `MediaRecorder` and **no** server-side ffmpeg stitching — the composite happens client-side, live, before upload.
+
+Because that draw loop runs continuously for the whole recording, keep its CPU/GPU cost bounded: a Worker-based timer drives the draw loop at the capture frame rate (`SCREEN_CAPTURE_FRAME_RATE`, 24fps — falling back to `requestAnimationFrame` only if Worker creation fails, e.g. under a strict CSP), the canvas is hard-capped to 1080p-class dimensions (1920px on its longest edge) even if the source display track is Retina/4K, and the bubble's drop shadow is pre-rendered into a small cached sprite (keyed by bubble size) instead of re-blurring with `shadowBlur` every frame.
 
 ## Error recovery
 

package/corpus/templates/clips/.agents/skills/security/SKILL.md

@@ -147,6 +147,16 @@ export default defineEventHandler(async (event) => {
 
 - Never create unprotected routes that modify data.
 
+**Exception — the SSR HTML/`.data` catch-all is deliberately session-blind.**
+The rule above is for routes that read or mutate user data. The SSR page
+render and React Router `.data` route are different: they serve one
+impersonal, public-cacheable shell to every visitor by design, and loaders on
+that path render no user data. Do not "fix" this by adding `getSession`,
+`private`, or `no-store` to it — that regresses the CDN cache contract for the
+whole site. Data scoping lives in actions and API routes; the client gates
+private UI after the shell loads. See the `authentication` skill and
+`guard:ssr-cache-shell` / `ssr-handler.spec.ts`.
+
 ## Human-in-the-Loop Approval for High-Consequence Actions
 
 For a small set of outward-facing, hard-to-undo operations — sending an email, charging a card, deleting an account, posting publicly — auth and access control are necessary but not sufficient: you also do not want the **agent** to perform them autonomously. Set `needsApproval` on the `defineAction` so the agent cannot run the action without a human approving the specific call.

package/corpus/templates/clips/AGENTS.md

@@ -36,6 +36,9 @@ Detailed media, meeting, dictation, editing, and sharing rules live in
   generation run in the durable post-finalize path; do not hide a usable native
   transcript behind failed metadata work, and keep heuristic titles replaceable
   until the agent refinement lands.
+- Desktop native transcripts merge microphone and system-audio streams while
+  removing overlapping duplicate speech and low-speech Whisper hallucinations;
+  keep system audio enabled when the meeting audio comes from another app.
 - Use `request-transcript --recordingId=<id> --force=true` to retry a failed
   transcript. Pass `--regenerate=true` to replace an existing ready transcript
   from the stored recording media; if regeneration fails, keep the prior ready
@@ -95,6 +98,10 @@ Detailed media, meeting, dictation, editing, and sharing rules live in
   (`connect-slack`, `/api/slack/oauth/callback`) so each Slack workspace gets
   its own encrypted bot token in `app_secrets`. `SLACK_BOT_TOKEN` is only a
   legacy single-workspace fallback and must remain behind the team allowlist.
+- Atlassian/Jira is available through the shared MCP integration catalog. It
+  uses Atlassian Rovo MCP OAuth; explain that an Atlassian organization admin
+  may need to allow the Clips app domain and enable the required Read, Write,
+  and Search permissions before the connection can complete.
 - Browser recordings can include redacted browser diagnostics captured during
   the recording session. `save-browser-diagnostics` is UI/internal and stores
   bounded console logs plus fetch/XHR method, URL path/query keys, status, and

package/corpus/templates/clips/actions/list-meetings.ts

@@ -14,6 +14,7 @@
  */
 
 import { defineAction } from "@agent-native/core";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
 import { accessFilter } from "@agent-native/core/sharing";
 import {
   and,
@@ -31,7 +32,7 @@ import {
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
-import { isPersonalSoloCalendarEvent } from "../server/lib/calendar-event-classification.js";
+import { isSoloCalendarEvent } from "../server/lib/calendar-event-classification.js";
 import {
   calendarEventToMeetingView,
   eventEndIso,
@@ -86,12 +87,13 @@ export default defineAction({
     excludePersonalSoloEvents: booleanParam
       .default(false)
       .describe(
-        "Exclude obvious solo personal calendar blocks such as Gym or Dinner. Used by desktop meeting reminders.",
+        "Exclude calendar events with no active attendee besides the current user. Used by desktop meeting reminders.",
       ),
   }),
   http: { method: "GET" },
   run: async (args) => {
     const db = getDb();
+    const currentUserEmail = getRequestUserEmail();
     const now = new Date();
     const nowIso = now.toISOString();
 
@@ -188,6 +190,11 @@ export default defineAction({
     // event was emitted here — not merely because some other account returned
     // data or errored.
     const emittedLiveEventKeys = new Set<string>();
+    // Calendar events excluded from desktop reminders because they have no
+    // active attendee besides the current user. Keep the correlated
+    // persisted meeting ids here too, so materialized solo events cannot
+    // re-enter the reminder list through the fallback persisted-row merge.
+    const excludedLiveEventKeys = new Set<string>();
     // Map a persisted meeting's `calendarEventId` (calendar_events.id) to the
     // Google event externalId so we can match it against the emitted set.
     const calendarEventIdToExternalId = new Map<string, string>();
@@ -269,10 +276,15 @@ export default defineAction({
           for (const event of items) {
             if (!event.id || event.status === "cancelled") continue;
             if (!isTimedCalendarEvent(event)) continue;
+            const cached = cachedByExternalId.get(event.id);
             if (
               args.excludePersonalSoloEvents &&
-              isPersonalSoloCalendarEvent({ account, event })
+              isSoloCalendarEvent({ account, event, currentUserEmail })
             ) {
+              excludedLiveEventKeys.add(event.id);
+              if (cached?.meetingId) {
+                excludedLiveEventKeys.add(cached.meetingId);
+              }
               continue;
             }
             const startIso = eventStartIso(event);
@@ -301,7 +313,6 @@ export default defineAction({
               continue;
             }
 
-            const cached = cachedByExternalId.get(event.id);
             const persisted = cached?.meetingId
               ? persistedById.get(cached.meetingId)
               : null;
@@ -344,6 +355,10 @@ export default defineAction({
       const liveExternalId = meeting.calendarEventId
         ? calendarEventIdToExternalId.get(meeting.calendarEventId)
         : undefined;
+      const liveEventExcluded =
+        excludedLiveEventKeys.has(meeting.id) ||
+        (liveExternalId ? excludedLiveEventKeys.has(liveExternalId) : false);
+      if (liveEventExcluded) continue;
       const liveEventEmitted =
         emittedLiveEventKeys.has(meeting.id) ||
         (liveExternalId ? emittedLiveEventKeys.has(liveExternalId) : false);

package/corpus/templates/clips/actions/start-meeting-recording.ts

@@ -71,6 +71,7 @@ export default defineAction({
           recording: existing,
           meetingId,
           created: false,
+          scheduledEnd: meeting.scheduledEnd,
         };
       }
     }
@@ -117,6 +118,11 @@ export default defineAction({
       .where(eq(schema.recordings.id, recordingId))
       .limit(1);
 
-    return { recording, meetingId, created: true };
+    return {
+      recording,
+      meetingId,
+      created: true,
+      scheduledEnd: meeting.scheduledEnd,
+    };
   },
 });

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">