@agent-native/core 0.103.0 → 0.104.0

package/corpus/templates/clips/actions/finalize-recording.ts

@@ -155,7 +155,21 @@ async function responseHasReadableMediaBytes(
   }
 }
 
-async function verifyServedMediaUrl(videoUrl: string): Promise<void> {
+function servedMediaSizeBytes(response: Response): number | null {
+  const contentRange = response.headers.get("content-range") ?? "";
+  const total = Number(contentRange.match(/\/(\d+)$/)?.[1]);
+  if (Number.isFinite(total) && total > 0) return total;
+  if (response.status === 200) {
+    const length = Number(response.headers.get("content-length"));
+    if (Number.isFinite(length) && length > 0) return length;
+  }
+  return null;
+}
+
+async function verifyServedMediaUrl(
+  videoUrl: string,
+  expectedBytes: number,
+): Promise<void> {
   if (!shouldVerifyServedMediaUrl(videoUrl)) return;
 
   let lastFailure = "media URL did not serve readable bytes";
@@ -176,11 +190,21 @@ async function verifyServedMediaUrl(videoUrl: string): Promise<void> {
         signal: controller.signal,
       });
       const statusOk = response.status === 200 || response.status === 206;
-      if (statusOk && (await responseHasReadableMediaBytes(response))) {
-        return;
+      if (statusOk) {
+        const servedBytes = servedMediaSizeBytes(response);
+        if (servedBytes === null) {
+          lastFailure = "Stored media byte count could not be verified";
+        } else if (servedBytes !== expectedBytes) {
+          lastFailure = `Stored media byte count mismatch (${servedBytes} of ${expectedBytes} bytes)`;
+        } else if (await responseHasReadableMediaBytes(response)) {
+          return;
+        } else {
+          lastFailure = "media URL did not serve readable bytes";
+        }
+      } else {
+        lastFailure = `media URL returned HTTP ${response.status}`;
+        if (response.status < 500) break;
       }
-      lastFailure = `media URL returned HTTP ${response.status}`;
-      if (response.status < 500) break;
     } catch (err) {
       lastFailure = err instanceof Error ? err.message : String(err);
     } finally {
@@ -258,6 +282,7 @@ async function markRecordingReady(params: {
   ownerEmail: string;
   videoUrl: string;
   videoSizeBytes: number;
+  sourceSizeBytes: number;
   videoFormat: "webm" | "mp4";
   finalDurationMs: number;
   finalWidth: number;
@@ -275,6 +300,7 @@ async function markRecordingReady(params: {
     ownerEmail,
     videoUrl,
     videoSizeBytes,
+    sourceSizeBytes,
     videoFormat,
     finalDurationMs,
     finalWidth,
@@ -349,6 +375,7 @@ async function markRecordingReady(params: {
       status: "failed" as const,
       videoUrl,
       videoSizeBytes,
+      sourceSizeBytes,
       durationMs: finalDurationMs,
     };
   }
@@ -372,6 +399,9 @@ async function markRecordingReady(params: {
     status: "ready",
     progress: 100,
     videoUrl,
+    videoSizeBytes,
+    sourceSizeBytes,
+    durationMs: finalDurationMs,
     finishedAt: now,
   });
   await writeAppState("refresh-signal", { ts: Date.now() });
@@ -436,6 +466,7 @@ async function markRecordingReady(params: {
     status: "ready" as const,
     videoUrl,
     videoSizeBytes,
+    sourceSizeBytes,
     durationMs: finalDurationMs,
   };
 }
@@ -521,6 +552,7 @@ export default defineAction({
           status: "ready" as const,
           videoUrl: existing.videoUrl,
           videoSizeBytes: existing.videoSizeBytes ?? 0,
+          sourceSizeBytes: existing.videoSizeBytes ?? 0,
           durationMs: existing.durationMs ?? 0,
         };
       }
@@ -641,7 +673,10 @@ export default defineAction({
           );
           debugLog("[finalize] resumable upload completed", { id, videoUrl });
           try {
-            await verifyServedMediaUrl(videoUrl);
+            await verifyServedMediaUrl(
+              videoUrl,
+              resumableSession.bytesUploaded,
+            );
           } catch (err) {
             const failureReason =
               err instanceof Error ? err.message : String(err);
@@ -656,6 +691,7 @@ export default defineAction({
             ...readyParams,
             videoUrl,
             videoSizeBytes: resumableSession.bytesUploaded,
+            sourceSizeBytes: resumableSession.bytesUploaded,
             // Streaming path forwards raw MediaRecorder bytes straight to the
             // provider — no faststart/Cues rewrite happened. Repair in the
             // background.
@@ -1162,7 +1198,7 @@ export default defineAction({
         bytes: uploadData.byteLength,
       });
       try {
-        await verifyServedMediaUrl(upload.url);
+        await verifyServedMediaUrl(upload.url, uploadData.byteLength);
       } catch (err) {
         if (!requiresConfiguredVideoStorage()) {
           // Local dev can keep scratch chunks so the user can retry after fixing
@@ -1185,6 +1221,7 @@ export default defineAction({
         finalHasAudio: correctedHasAudio,
         videoUrl: upload.url,
         videoSizeBytes: uploadData.byteLength,
+        sourceSizeBytes: assembled.byteLength,
         seekableApplied,
       });
       if (result.status === "ready") {

package/corpus/templates/clips/actions/import-loom-recording.ts

@@ -11,6 +11,7 @@ import { getDb, schema } from "../server/db/index.js";
 import { queueBuilderMediaCompression } from "../server/lib/builder-media-compression.js";
 import {
   getCurrentOwnerEmail,
+  getOrganizationDefaultVisibility,
   nanoid,
   ownerEmailMatches,
   parseSpaceIds,
@@ -178,6 +179,8 @@ export default defineAction({
     const { organizationId } = await requireOrganizationAccess(
       existingRecording?.organizationId ?? args.organizationId,
     );
+    const defaultVisibility =
+      await getOrganizationDefaultVisibility(organizationId);
 
     const now = new Date().toISOString();
     const id = existingRecording?.id ?? nanoid();
@@ -199,7 +202,7 @@ export default defineAction({
     const height = boundedDimension(oembed.height ?? oembed.thumbnail_height);
     const folderId = args.folderId ?? existingRecording?.folderId ?? null;
     const visibility =
-      args.visibility ?? existingRecording?.visibility ?? "public";
+      args.visibility ?? existingRecording?.visibility ?? defaultVisibility;
     const titleSource = args.title
       ? "manual"
       : (existingRecording?.titleSource ?? "upload");

package/corpus/templates/clips/actions/lib/create-recording-schema.ts

@@ -62,9 +62,9 @@ export const createRecordingSchema = z.object({
     .describe("Height of the recording in pixels (may be 0 until finalized)"),
   visibility: z
     .enum(["private", "org", "public"])
-    .default("public")
+    .optional()
     .describe(
-      "Initial share visibility for the recording (defaults to public)",
+      "Initial share visibility for the recording. When omitted, uses the organization default and falls back to public.",
     ),
   mimeType: z
     .string()

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

@@ -32,7 +32,10 @@ import {
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
-import { isSoloCalendarEvent } from "../server/lib/calendar-event-classification.js";
+import {
+  isDeclinedCalendarEvent,
+  isSoloCalendarEvent,
+} from "../server/lib/calendar-event-classification.js";
 import {
   calendarEventToMeetingView,
   eventEndIso,
@@ -89,6 +92,11 @@ export default defineAction({
       .describe(
         "Exclude calendar events with no active attendee besides the current user. Used by desktop meeting reminders.",
       ),
+    excludeDeclinedEvents: booleanParam
+      .default(false)
+      .describe(
+        "Exclude calendar events where the current user has declined. Used by desktop meeting reminders.",
+      ),
   }),
   http: { method: "GET" },
   run: async (args) => {
@@ -190,10 +198,10 @@ 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.
+    // Calendar events excluded from desktop reminders because they are solo or
+    // declined by the current user. Keep the correlated persisted meeting ids
+    // here too, so materialized 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.
@@ -277,6 +285,16 @@ export default defineAction({
             if (!event.id || event.status === "cancelled") continue;
             if (!isTimedCalendarEvent(event)) continue;
             const cached = cachedByExternalId.get(event.id);
+            if (
+              args.excludeDeclinedEvents &&
+              isDeclinedCalendarEvent({ account, event, currentUserEmail })
+            ) {
+              excludedLiveEventKeys.add(event.id);
+              if (cached?.meetingId) {
+                excludedLiveEventKeys.add(cached.meetingId);
+              }
+              continue;
+            }
             if (
               args.excludePersonalSoloEvents &&
               isSoloCalendarEvent({ account, event, currentUserEmail })

package/corpus/templates/clips/actions/list-organization-state.ts

@@ -143,7 +143,7 @@ export default defineAction({
         name: org.name,
         brandColor: settings?.brandColor ?? "#18181B",
         brandLogoUrl: settings?.brandLogoUrl ?? null,
-        defaultVisibility: settings?.defaultVisibility ?? "private",
+        defaultVisibility: settings?.defaultVisibility ?? "public",
         createdAt: Number(org.createdAt),
       },
       members,

package/corpus/templates/clips/actions/remove-silences.ts

@@ -56,9 +56,18 @@ export default defineAction({
         `by analyzing the transcript segments (gaps between segment.endMs and the next segment.startMs). ` +
         `For each gap > ${args.thresholdMs}ms, add a trim range covering the silence minus a 200ms ` +
         `buffer on each side so speech isn't clipped. Then call ` +
-        `\`trim-recording --recordingId=${args.recordingId} --startMs=<start> --endMs=<end>\` once for each silence.`,
+        `\`trim-recording --recordingId=${args.recordingId} --startMs=<start> --endMs=<end>\` once for each silence. ` +
+        `First call \`update-ai-request-status --recordingId=${args.recordingId} --kind=remove-silences --status=working\`. ` +
+        `After all trim calls finish, call the same action with --status=completed and a short result message. ` +
+        `If the work cannot finish, call it with --status=failed and explain why.`,
     };
 
+    await writeAppState(`clips-ai-request-status-${args.recordingId}`, {
+      kind: "remove-silences",
+      status: "queued",
+      message: null,
+      updatedAt: new Date().toISOString(),
+    });
     await writeAppState(`clips-ai-request-${args.recordingId}`, request as any);
     await writeAppState("refresh-signal", { ts: Date.now() });
 

package/corpus/templates/clips/actions/request-transcript.ts

@@ -454,6 +454,18 @@ function fullTextSegmentJson(
   return JSON.stringify(buildCaptionSegmentsFromText(text, durationMs));
 }
 
+export function isSafeTranscriptCleanupReplacement(
+  sourceText: string,
+  cleanedText: string,
+): boolean {
+  const sourceLength = sourceText.trim().length;
+  const cleanedLength = cleanedText.trim().length;
+  if (!sourceLength || !cleanedLength) return false;
+  if (sourceLength < 200) return true;
+  const retention = cleanedLength / sourceLength;
+  return retention >= 0.6 && retention <= 1.25;
+}
+
 async function failEmptyProviderTranscript({
   db,
   recordingId,
@@ -719,19 +731,49 @@ async function cleanupNativeTranscript({
       });
       return { cleaned: false, provider: result.provider };
     }
+    if (!isSafeTranscriptCleanupReplacement(sourceText, cleanedText)) {
+      await writeTranscriptCleanupState(recordingId, {
+        status: "failed",
+        provider: result.provider,
+        failureReason:
+          "Cleanup output was incomplete; the original transcript was kept.",
+        sourceChars: sourceText.length,
+        cleanedChars: cleanedText.length,
+      });
+      return { cleaned: false, provider: result.provider };
+    }
 
     const now = new Date().toISOString();
     const language = await resolveStoredLanguage(db, recordingId);
-    await upsertTranscriptRow(db, {
-      recordingId,
-      ownerEmail,
-      status: "ready",
-      failureReason: null,
-      language,
-      segmentsJson: fullTextSegmentJson(cleanedText, durationMs),
-      fullText: cleanedText,
-      now,
-    });
+    const updated = await db
+      .update(schema.recordingTranscripts)
+      .set({
+        ownerEmail,
+        status: "ready",
+        failureReason: null,
+        language,
+        segmentsJson: fullTextSegmentJson(cleanedText, durationMs),
+        fullText: cleanedText,
+        retryCount: 0,
+        updatedAt: now,
+      })
+      .where(
+        and(
+          eq(schema.recordingTranscripts.recordingId, recordingId),
+          eq(schema.recordingTranscripts.status, "ready"),
+          eq(schema.recordingTranscripts.fullText, sourceText),
+        ),
+      )
+      .returning({ recordingId: schema.recordingTranscripts.recordingId });
+    if (!updated.length) {
+      await writeTranscriptCleanupState(recordingId, {
+        status: "failed",
+        provider: result.provider,
+        failureReason:
+          "Transcript changed during cleanup; the newer transcript was kept.",
+      });
+      return { cleaned: false, provider: result.provider };
+    }
     await writeTranscriptCleanupState(recordingId, {
       status: "ready",
       provider: result.provider,
@@ -1060,7 +1102,7 @@ const requestTranscriptAction = defineAction({
 
     const db = getDb();
 
-    if (context?.caller === "tool") {
+    if (context?.caller === "tool" || context?.caller === "frontend") {
       const [existingTranscript] = await db
         .select({
           status: schema.recordingTranscripts.status,

package/corpus/templates/clips/actions/search-recordings-utils.ts

@@ -0,0 +1,7 @@
+function escapeLike(value: string): string {
+  return value.replace(/([\\%_])/g, "\\$1");
+}
+
+export function buildCaseInsensitiveSearchPattern(query: string): string {
+  return `%${escapeLike(query.toLowerCase())}%`;
+}

package/corpus/templates/clips/actions/search-recordings.ts

@@ -5,6 +5,7 @@ import { and, eq, sql } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { buildCaseInsensitiveSearchPattern } from "./search-recordings-utils.js";
 
 const SNIPPET_RADIUS = 80;
 
@@ -42,10 +43,6 @@ function recordingDeepLink(
   });
 }
 
-function escapeLike(s: string): string {
-  return s.replace(/([\\%_])/g, "\\$1");
-}
-
 function buildSnippet(fullText: string, query: string): string | null {
   if (!fullText || !query) return null;
   const lower = fullText.toLowerCase();
@@ -113,7 +110,7 @@ export default defineAction({
   http: { method: "GET" },
   run: async (args) => {
     const db = getDb();
-    const pattern = `%${escapeLike(args.query)}%`;
+    const pattern = buildCaseInsensitiveSearchPattern(args.query);
 
     // Title/description matches on the recordings table
     const recMatches = await db
@@ -132,7 +129,7 @@ export default defineAction({
       .where(
         and(
           accessFilter(schema.recordings, schema.recordingShares),
-          sql`(${schema.recordings.title} LIKE ${pattern} ESCAPE '\\' OR ${schema.recordings.description} LIKE ${pattern} ESCAPE '\\')`,
+          sql`(lower(${schema.recordings.title}) LIKE ${pattern} ESCAPE '\\' OR lower(${schema.recordings.description}) LIKE ${pattern} ESCAPE '\\')`,
         ),
       )
       .limit(args.limit);
@@ -162,7 +159,7 @@ export default defineAction({
       .where(
         and(
           accessFilter(schema.recordings, schema.recordingShares),
-          sql`${schema.recordingTranscripts.fullText} LIKE ${pattern} ESCAPE '\\'`,
+          sql`lower(${schema.recordingTranscripts.fullText}) LIKE ${pattern} ESCAPE '\\'`,
         ),
       )
       .limit(args.limit);
@@ -190,7 +187,7 @@ export default defineAction({
       .where(
         and(
           accessFilter(schema.recordings, schema.recordingShares),
-          sql`${schema.recordingComments.content} LIKE ${pattern} ESCAPE '\\'`,
+          sql`lower(${schema.recordingComments.content}) LIKE ${pattern} ESCAPE '\\'`,
         ),
       )
       .limit(args.limit);

package/corpus/templates/clips/actions/set-organization-branding.ts

@@ -62,7 +62,7 @@ export default defineAction({
       .values({
         organizationId,
         brandColor: "#18181B",
-        defaultVisibility: "private",
+        defaultVisibility: "public",
         createdAt: nowIso,
         updatedAt: nowIso,
       })
@@ -120,7 +120,7 @@ export default defineAction({
       name: updatedName,
       brandColor: row?.brandColor ?? "#18181B",
       brandLogoUrl: row?.brandLogoUrl ?? null,
-      defaultVisibility: row?.defaultVisibility ?? "private",
+      defaultVisibility: row?.defaultVisibility ?? "public",
       updatedAt: row?.updatedAt ?? nowIso,
     };
   },

package/corpus/templates/clips/actions/stitch-recordings.ts

@@ -36,6 +36,7 @@ import { parseEdits, serializeEdits } from "../app/lib/timestamp-mapping.js";
 import { getDb, schema } from "../server/db/index.js";
 import {
   getCurrentOwnerEmail,
+  getOrganizationDefaultVisibility,
   nanoid,
   ownerEmailMatches,
 } from "../server/lib/recordings.js";
@@ -52,7 +53,9 @@ export default defineAction({
     visibility: z
       .enum(["private", "org", "public"])
       .optional()
-      .describe("Visibility for the new recording (defaults to 'private')"),
+      .describe(
+        "Visibility for the new recording. When omitted, uses the organization default and falls back to public.",
+      ),
     videoUrl: z
       .string()
       .optional()
@@ -92,10 +95,10 @@ export default defineAction({
       throw new Error("stitch-recordings needs at least 2 sourceRecordingIds");
     }
 
-    // Stitch creates a brand-new recording owned by the caller that defaults
-    // to public visibility, so every source must be OWNED by the caller (not
+    // Stitch creates a brand-new recording owned by the caller, so every
+    // source must be OWNED by the caller (not
     // just editor-shared) — otherwise a user with editor access to a
-    // private/org clip could reshare it as a new public recording they own.
+    // private/org clip could reshare it as a new recording they own.
     const sources = await db
       .select()
       .from(schema.recordings)
@@ -117,6 +120,8 @@ export default defineAction({
       assertNativeRecordingMedia(source);
     }
     const organizationId = ordered[0].organizationId;
+    const defaultVisibility =
+      await getOrganizationDefaultVisibility(organizationId);
 
     const totalDuration =
       args.durationMs ??
@@ -152,7 +157,7 @@ export default defineAction({
       hasCamera: ordered.some((r) => Boolean(r.hasCamera)),
       editsJson: serializeEdits(edits),
       ownerEmail,
-      visibility: args.visibility ?? "public",
+      visibility: args.visibility ?? defaultVisibility,
       createdAt: now,
       updatedAt: now,
       // Reuse the first source's thumbnail so the new row has something to show immediately.

package/corpus/templates/clips/actions/update-ai-request-status.ts

@@ -0,0 +1,38 @@
+import { defineAction } from "@agent-native/core";
+import { writeAppState } from "@agent-native/core/application-state";
+import { assertAccess } from "@agent-native/core/sharing";
+import { z } from "zod";
+
+const STATUS_KEY_PREFIX = "clips-ai-request-status-";
+
+export default defineAction({
+  description:
+    "Report progress or completion for queued Clips AI work so the recording page can show its current status.",
+  schema: z.object({
+    recordingId: z.string().describe("Recording ID"),
+    kind: z.enum(["remove-silences"]).describe("Queued request kind"),
+    status: z
+      .enum(["working", "completed", "failed"])
+      .describe("Current request status"),
+    message: z
+      .string()
+      .trim()
+      .max(500)
+      .optional()
+      .describe("Optional short status detail"),
+  }),
+  run: async (args) => {
+    await assertAccess("recording", args.recordingId, "editor");
+    await writeAppState(`${STATUS_KEY_PREFIX}${args.recordingId}`, {
+      kind: args.kind,
+      status: args.status,
+      message: args.message || null,
+      updatedAt: new Date().toISOString(),
+    });
+    return {
+      recordingId: args.recordingId,
+      kind: args.kind,
+      status: args.status,
+    };
+  },
+});

package/corpus/templates/clips/app/components/editor/editor-layout.tsx

@@ -70,6 +70,7 @@ import { cn } from "@/lib/utils";
 import { computePeaks, type WaveformPeaks } from "@/lib/waveform-peaks";
 
 import { ChaptersEditor } from "./chapters-editor";
+import { defaultSelectionRange } from "./editor-selection";
 import { EditorToolbar } from "./editor-toolbar";
 import { StitchManager } from "./stitch-manager";
 import { ThumbnailPicker } from "./thumbnail-picker";
@@ -604,10 +605,8 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
   }, [playheadMs, recordingId, selectionRange, split, trim, undo]);
 
   // Default selection window so the TrimHandles have something to render.
-  const effectiveSelection = selectionRange ?? {
-    startMs: 0,
-    endMs: durationMs || 1_000,
-  };
+  const effectiveSelection =
+    selectionRange ?? defaultSelectionRange(playheadMs, durationMs);
 
   if (playerDataQuery.isLoading) {
     return (

package/corpus/templates/clips/app/components/editor/editor-selection.ts

@@ -0,0 +1,19 @@
+const DEFAULT_SELECTION_WINDOW_MS = 1_000;
+
+export function defaultSelectionRange(
+  playheadMs: number,
+  durationMs: number,
+): { startMs: number; endMs: number } {
+  const clipDuration =
+    Number.isFinite(durationMs) && durationMs > 0
+      ? durationMs
+      : DEFAULT_SELECTION_WINDOW_MS;
+  const playhead = Number.isFinite(playheadMs)
+    ? Math.max(0, Math.min(clipDuration, playheadMs))
+    : 0;
+
+  return {
+    startMs: Math.max(0, playhead - DEFAULT_SELECTION_WINDOW_MS),
+    endMs: Math.min(clipDuration, playhead + DEFAULT_SELECTION_WINDOW_MS),
+  };
+}

package/corpus/templates/clips/app/components/editor/stitch-manager.tsx

@@ -169,20 +169,20 @@ export function StitchManager({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl">
-        <DialogHeader>
+      <DialogContent className="flex max-h-[min(760px,calc(100vh-32px))] max-w-3xl flex-col gap-0">
+        <DialogHeader className="shrink-0">
           <DialogTitle className="flex items-center gap-2">
             <IconPuzzle className="w-4 h-4 text-primary" />
             {t("stitchManager.title")}
           </DialogTitle>
         </DialogHeader>
 
-        <div className="grid grid-cols-2 gap-3 min-h-[320px]">
-          <div className="flex flex-col border rounded-md">
+        <div className="grid min-h-[320px] flex-1 grid-cols-2 gap-3">
+          <div className="flex min-h-0 min-w-0 flex-col rounded-md border">
             <div className="px-3 py-2 text-xs font-medium border-b">
               {t("navigation.library")}
             </div>
-            <ScrollArea className="flex-1">
+            <ScrollArea className="min-h-0 flex-1">
               {available.length === 0 ? (
                 <div className="p-3 text-xs text-muted-foreground">
                   {t("stitchManager.noOtherRecordings")}
@@ -214,7 +214,7 @@ export function StitchManager({
             </ScrollArea>
           </div>
 
-          <div className="flex flex-col border rounded-md">
+          <div className="flex min-h-0 min-w-0 flex-col rounded-md border">
             <div className="px-3 py-2 text-xs font-medium border-b flex items-center justify-between">
               <span>{t("stitchManager.combineOrder")}</span>
               <span className="text-muted-foreground">
@@ -222,7 +222,7 @@ export function StitchManager({
                 {formatMs(queue.reduce((s, r) => s + r.durationMs, 0))}
               </span>
             </div>
-            <ScrollArea className="flex-1">
+            <ScrollArea className="min-h-0 flex-1">
               {queue.length === 0 ? (
                 <div className="p-3 text-xs text-muted-foreground">
                   {t("stitchManager.emptyQueue")}
@@ -263,7 +263,7 @@ export function StitchManager({
           </div>
         </div>
 
-        <div className="flex items-center gap-2">
+        <div className="flex shrink-0 items-center gap-2 pt-4">
           <label className="text-xs text-muted-foreground">
             {t("stitchManager.titleLabel")}
           </label>
@@ -275,7 +275,7 @@ export function StitchManager({
         </div>
 
         {busy && (
-          <div className="text-xs text-muted-foreground flex items-center gap-2">
+          <div className="flex shrink-0 items-center gap-2 pt-3 text-xs text-muted-foreground">
             <IconLoader2 className="w-4 h-4 animate-spin" />
             {t("stitchManager.combining", {
               progress: Math.round(progress * 100),
@@ -283,7 +283,7 @@ export function StitchManager({
           </div>
         )}
 
-        <DialogFooter>
+        <DialogFooter className="shrink-0 pt-4">
           <Button variant="ghost" onClick={() => onOpenChange(false)}>
             {t("common.cancel")}
           </Button>

package/corpus/templates/clips/app/components/library/bulk-action-toolbar.tsx

@@ -45,8 +45,7 @@ export function BulkActionToolbar({
   return (
     <div
       className={cn(
-        "sticky bottom-4 mx-auto z-30 flex items-center gap-1 rounded-xl border border-border bg-popover px-3 py-2 shadow-lg",
-        "w-fit",
+        "flex w-fit max-w-full items-center gap-1 rounded-xl border border-border bg-popover px-3 py-2 shadow-lg",
       )}
     >
       <span className="pe-2 text-xs font-medium text-foreground">