@agent-native/core 0.84.22 → 0.84.24

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

@@ -0,0 +1,160 @@
+/**
+ * Repair the playback of already-stored recordings.
+ *
+ * Clips uploaded via the streaming path (or before the seekable rewrite
+ * existed) can ship raw MediaRecorder output: an MP4 with a trailing `moov`
+ * atom or a WebM with no Cues index. Those load slowly and re-buffer on every
+ * seek even though the file downloads fine. This action re-fetches the stored
+ * media, rewrites it to be start-playable and seekable (MP4 faststart / WebM
+ * Cues remux), re-uploads the fixed file, and repoints the recording at it.
+ *
+ * It's idempotent and non-destructive: clips that are already seekable are
+ * skipped, and any clip we can't improve or re-upload is left untouched.
+ *
+ * Usage:
+ *   pnpm action reprocess-recording --id=<recordingId>
+ *   pnpm action reprocess-recording --ids='["id1","id2"]'
+ *   pnpm action reprocess-recording --all --limit=20
+ *   pnpm action reprocess-recording --id=<recordingId> --force
+ */
+
+import { defineAction } from "@agent-native/core";
+import { and, desc, eq, isNotNull } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import {
+  getCurrentOwnerEmail,
+  ownerEmailMatches,
+} from "../server/lib/recordings.js";
+import {
+  ensureRecordingSeekable,
+  type EnsureSeekableResult,
+} from "./lib/ensure-seekable-video.js";
+
+const MAX_TARGETS_PER_CALL = 100;
+const DEFAULT_ALL_LIMIT = 20;
+
+function parseIds(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value.filter((v): v is string => typeof v === "string" && !!v);
+  }
+  if (typeof value === "string" && value.trim()) {
+    try {
+      const parsed = JSON.parse(value);
+      if (Array.isArray(parsed)) {
+        return parsed.filter((v): v is string => typeof v === "string" && !!v);
+      }
+    } catch {
+      // Fall back to a single comma-separated / plain id string.
+      return value
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean);
+    }
+  }
+  return [];
+}
+
+export default defineAction({
+  description:
+    "Repair slow-loading or buffering recordings by rewriting their stored video to be start-playable and seekable (MP4 faststart / WebM Cues remux) and re-uploading it. Use for clips that take a long time to load or re-buffer when scrubbing. Pass `id` for one clip, `ids` for several, or `all: true` to sweep the caller's ready clips (bounded by `limit`). Already-seekable clips are skipped unless `force` is true.",
+  schema: z.object({
+    id: z.string().optional().describe("A single recording id to repair."),
+    ids: z
+      .union([z.array(z.string()), z.string()])
+      .optional()
+      .describe(
+        "Multiple recording ids (array, or JSON/comma string for CLI).",
+      ),
+    all: z.coerce
+      .boolean()
+      .optional()
+      .describe(
+        "Repair the caller's own ready clips, most recent first, up to `limit`.",
+      ),
+    limit: z.coerce
+      .number()
+      .int()
+      .min(1)
+      .max(MAX_TARGETS_PER_CALL)
+      .optional()
+      .describe(
+        `Max clips to process when using \`all\` (default ${DEFAULT_ALL_LIMIT}).`,
+      ),
+    force: z.coerce
+      .boolean()
+      .optional()
+      .describe("Re-run even on clips already marked seekable."),
+  }),
+  run: async (args) => {
+    const db = getDb();
+    const ownerEmail = getCurrentOwnerEmail();
+    const force = Boolean(args.force);
+
+    let targetIds: string[] = [];
+    if (args.id) targetIds.push(args.id);
+    targetIds.push(...parseIds(args.ids));
+
+    if (args.all) {
+      const limit = args.limit ?? DEFAULT_ALL_LIMIT;
+      const rows = await db
+        .select({ id: schema.recordings.id })
+        .from(schema.recordings)
+        .where(
+          and(
+            ownerEmailMatches(schema.recordings.ownerEmail, ownerEmail),
+            eq(schema.recordings.status, "ready"),
+            isNotNull(schema.recordings.videoUrl),
+          ),
+        )
+        .orderBy(desc(schema.recordings.createdAt))
+        .limit(limit);
+      targetIds.push(...rows.map((r) => r.id));
+    }
+
+    // De-dupe while preserving order, and bound the batch so a single call
+    // can't run unboundedly under the hosted foreground budget.
+    targetIds = Array.from(new Set(targetIds)).slice(0, MAX_TARGETS_PER_CALL);
+
+    if (targetIds.length === 0) {
+      return {
+        ok: true,
+        processed: 0,
+        changed: 0,
+        results: [] as EnsureSeekableResult[],
+        message:
+          "No recordings to reprocess. Pass id / ids, or all: true to sweep your clips.",
+      };
+    }
+
+    const results: EnsureSeekableResult[] = [];
+    for (const recordingId of targetIds) {
+      try {
+        results.push(
+          await ensureRecordingSeekable({ recordingId, ownerEmail, force }),
+        );
+      } catch (err) {
+        console.warn("[reprocess-recording] failed for", recordingId, err);
+        results.push({
+          recordingId,
+          status: "skipped-fetch-failed",
+          changed: false,
+          detail: err instanceof Error ? err.message : String(err),
+        });
+      }
+    }
+
+    const changed = results.filter((r) => r.changed).length;
+    console.log(
+      `Reprocessed ${results.length} recording(s); ${changed} rewritten for smoother playback.`,
+    );
+
+    return {
+      ok: true,
+      processed: results.length,
+      changed,
+      results,
+    };
+  },
+});

package/corpus/templates/clips/app/components/player/share-dialog.tsx

@@ -452,8 +452,8 @@ function ClipsEmbedConfigurator({
 
   const code =
     mode === "responsive"
-      ? `<div style="position:relative;padding-bottom:56.25%;height:0"><iframe src="${src}" frameborder="0" allowfullscreen allow="autoplay; picture-in-picture" style="position:absolute;inset:0;width:100%;height:100%"></iframe></div>`
-      : `<iframe src="${src}" width="${width}" height="${height}" frameborder="0" allowfullscreen allow="autoplay; picture-in-picture"></iframe>`;
+      ? `<div style="position:relative;padding-bottom:56.25%;height:0;background:#000;overflow:hidden"><iframe src="${src}" title="${t("shareDialog.embedIframeTitle")}" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;overflow:hidden"></iframe></div>`
+      : `<iframe src="${src}" title="${t("shareDialog.embedIframeTitle")}" width="${width}" height="${height}" frameborder="0" scrolling="no" allowfullscreen allow="autoplay; fullscreen; picture-in-picture" style="display:block;max-width:100%;border:0;background:#000;overflow:hidden"></iframe>`;
 
   return (
     <div className="space-y-3">

package/corpus/templates/clips/app/i18n/ar-SA.ts

@@ -428,6 +428,7 @@ const messages = {
     askOwnerPublic: "اطلب من المالك نشره.",
     responsive: "مستجيب (16:9)",
     fixedSize: "حجم ثابت",
+    embedIframeTitle: "فيديو Clips",
     width: "عرض",
     height: "ارتفاع",
     autoplay: "التشغيل التلقائي",

package/corpus/templates/clips/app/i18n/de-DE.ts

@@ -445,6 +445,7 @@ const messages = {
     askOwnerPublic: "Bitten Sie den Eigentümer, es öffentlich zu machen.",
     responsive: "Responsiv (16:9)",
     fixedSize: "Feste Größe",
+    embedIframeTitle: "Clips-Video",
     width: "Breite",
     height: "Höhe",
     autoplay: "Übersetzt: Autoplay",

package/corpus/templates/clips/app/i18n/en-US.ts

@@ -428,6 +428,7 @@ const messages = {
     askOwnerPublic: "Ask the owner to make it public.",
     responsive: "Responsive (16:9)",
     fixedSize: "Fixed size",
+    embedIframeTitle: "Clips video",
     width: "Width",
     height: "Height",
     autoplay: "Autoplay",

package/corpus/templates/clips/app/i18n/es-ES.ts

@@ -440,6 +440,7 @@ const messages = {
     askOwnerPublic: "Pídele al propietario que lo haga público.",
     responsive: "Responsivo (16:9)",
     fixedSize: "Tamaño fijo",
+    embedIframeTitle: "Video de Clips",
     width: "Ancho",
     height: "Altura",
     autoplay: "Reproducción automática",

package/corpus/templates/clips/app/i18n/fr-FR.ts

@@ -440,6 +440,7 @@ const messages = {
     askOwnerPublic: "Demandez au propriétaire de le rendre public.",
     responsive: "Réactif (16:9)",
     fixedSize: "Taille fixe",
+    embedIframeTitle: "Video Clips",
     width: "Largeur",
     height: "Hauteur",
     autoplay: "Lecture automatique",

package/corpus/templates/clips/app/i18n/hi-IN.ts

@@ -425,6 +425,7 @@ const messages = {
     askOwnerPublic: "मालिक से इसे सार्वजनिक करने के लिए कहें.",
     responsive: "प्रतिक्रियाशील (16:9)",
     fixedSize: "निश्चित आकार",
+    embedIframeTitle: "Clips वीडियो",
     width: "चौड़ाई",
     height: "ऊंचाई",
     autoplay: "स्वत: प्ले",

package/corpus/templates/clips/app/i18n/ja-JP.ts

@@ -437,6 +437,7 @@ const messages = {
     askOwnerPublic: "所有者に公開するよう依頼してください。",
     responsive: "レスポンシブ (16:9)",
     fixedSize: "固定サイズ",
+    embedIframeTitle: "Clips動画",
     width: "幅",
     height: "身長",
     autoplay: "自動再生",

package/corpus/templates/clips/app/i18n/ko-KR.ts

@@ -430,6 +430,7 @@ const messages = {
     askOwnerPublic: "소유자에게 공개하도록 요청하세요.",
     responsive: "반응형(16:9)",
     fixedSize: "고정 크기",
+    embedIframeTitle: "Clips 동영상",
     width: "너비",
     height: "키",
     autoplay: "자동재생",

package/corpus/templates/clips/app/i18n/pt-BR.ts

@@ -438,6 +438,7 @@ const messages = {
     askOwnerPublic: "Peça ao proprietário para torná-lo público.",
     responsive: "Responsivo (16:9)",
     fixedSize: "Tamanho fixo",
+    embedIframeTitle: "Video do Clips",
     width: "Largura",
     height: "Altura",
     autoplay: "Reprodução automática",

package/corpus/templates/clips/app/i18n/zh-CN.ts

@@ -412,6 +412,7 @@ const messages = {
     askOwnerPublic: "请楼主公开一下。",
     responsive: "反应灵敏 (16:9)",
     fixedSize: "固定尺寸",
+    embedIframeTitle: "Clips 视频",
     width: "宽度",
     height: "高度",
     autoplay: "自动播放",

package/corpus/templates/clips/app/i18n/zh-TW.ts

@@ -412,6 +412,7 @@ const messages = {
     askOwnerPublic: "請樓主公開一下。",
     responsive: "反應靈敏 (16:9)",
     fixedSize: "固定尺寸",
+    embedIframeTitle: "Clips 影片",
     width: "寬度",
     height: "高度",
     autoplay: "自動播放",

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

@@ -78,6 +78,34 @@ export default function EmbedRoute() {
   });
   const [pwError, setPwError] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const html = document.documentElement;
+    const body = document.body;
+    const previous = {
+      htmlOverflow: html.style.overflow,
+      htmlHeight: html.style.height,
+      bodyOverflow: body.style.overflow,
+      bodyHeight: body.style.height,
+      bodyBackground: body.style.background,
+    };
+
+    html.style.overflow = "hidden";
+    html.style.height = "100%";
+    body.style.overflow = "hidden";
+    body.style.height = "100%";
+    body.style.background = "#000";
+
+    return () => {
+      html.style.overflow = previous.htmlOverflow;
+      html.style.height = previous.htmlHeight;
+      body.style.overflow = previous.bodyOverflow;
+      body.style.height = previous.bodyHeight;
+      body.style.background = previous.bodyBackground;
+    };
+  }, []);
+
   const dataQ = useQuery({
     queryKey: ["public-recording", shareId, password],
     queryFn: async () => {
@@ -135,7 +163,7 @@ export default function EmbedRoute() {
 
   if (dataQ.isLoading) {
     return (
-      <div className="flex items-center justify-center h-screen w-full bg-black">
+      <div className="fixed inset-0 flex h-dvh w-dvw items-center justify-center overflow-hidden bg-black">
         <Spinner className="h-8 w-8 text-white/70" />
       </div>
     );
@@ -153,14 +181,14 @@ export default function EmbedRoute() {
 
   if (!recording) {
     return (
-      <div className="flex items-center justify-center h-screen w-full bg-black text-white">
+      <div className="fixed inset-0 flex h-dvh w-dvw items-center justify-center overflow-hidden bg-black text-white">
         <p className="text-sm">{t("embedRoute.unavailable")}</p>
       </div>
     );
   }
 
   return (
-    <div className="h-screen w-screen bg-black overflow-hidden">
+    <div className="fixed inset-0 h-dvh w-dvw overflow-hidden bg-black">
       <VideoPlayer
         ref={playerRef}
         recordingId={recording.id}

package/corpus/templates/clips/changelog/2026-07-01-clip-embeds-now-render-as-a-clean-video-only-player-without-.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Clip embeds now render as a clean video-only player without extra page chrome or scrollbars.

package/corpus/templates/clips/changelog/2026-07-01-shared-clips-now-start-playing-and-scrub-instantly-instead-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Shared clips now start playing and scrub instantly instead of buffering — recordings are made seekable on upload, and you can repair older clips

package/corpus/templates/clips/chrome-extension/public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Agent-Native Clips",
   "short_name": "Clips",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Start Clips recordings from Chrome, capture optional diagnostics, and preview Clips links on GitHub.",
   "minimum_chrome_version": "116",
   "action": {

package/corpus/templates/clips/chrome-extension/src/github-preview-content.ts

@@ -168,10 +168,10 @@
     Object.assign(frame.style, {
       display: "block",
       width: "100%",
-      height: "430px",
+      height: "405px",
       border: "0",
       borderRadius: "8px",
-      background: "transparent",
+      background: "#000",
       overflow: "hidden",
     });
 

package/corpus/templates/clips/chrome-extension/src/github-preview.ts

@@ -121,36 +121,39 @@ function renderPreview(
   root.textContent = "";
 
   const card = document.createElement("section");
-  card.className = "clips-preview-card";
-
-  const header = document.createElement("header");
-  header.className = "clips-preview-header";
-
-  const titleWrap = document.createElement("div");
-  titleWrap.className = "clips-preview-title-wrap";
-
-  const title = document.createElement("div");
-  title.className = "clips-preview-title";
-  title.textContent =
-    state.kind === "playable" || state.kind === "unavailable"
-      ? state.title
-      : "Clips preview";
-
-  const subtitle = document.createElement("div");
-  subtitle.className = "clips-preview-subtitle";
-  subtitle.textContent = preview.host;
-
-  titleWrap.append(title, subtitle);
-
-  const open = document.createElement("a");
-  open.className = "clips-preview-open";
-  open.href = preview.sourceUrl.toString();
-  open.target = "_blank";
-  open.rel = "noreferrer noopener";
-  open.textContent = "Open clip";
-
-  header.append(titleWrap, open);
-  card.append(header);
+  card.className =
+    state.kind === "playable"
+      ? "clips-preview-card clips-preview-card--player"
+      : "clips-preview-card";
+
+  if (state.kind !== "playable") {
+    const header = document.createElement("header");
+    header.className = "clips-preview-header";
+
+    const titleWrap = document.createElement("div");
+    titleWrap.className = "clips-preview-title-wrap";
+
+    const title = document.createElement("div");
+    title.className = "clips-preview-title";
+    title.textContent =
+      state.kind === "unavailable" ? state.title : "Clips preview";
+
+    const subtitle = document.createElement("div");
+    subtitle.className = "clips-preview-subtitle";
+    subtitle.textContent = preview.host;
+
+    titleWrap.append(title, subtitle);
+
+    const open = document.createElement("a");
+    open.className = "clips-preview-open";
+    open.href = preview.sourceUrl.toString();
+    open.target = "_blank";
+    open.rel = "noreferrer noopener";
+    open.textContent = "Open clip";
+
+    header.append(titleWrap, open);
+    card.append(header);
+  }
 
   if (state.kind === "playable") {
     const player = document.createElement("div");
@@ -161,6 +164,7 @@ function renderPreview(
     frame.src = preview.embedUrl.toString();
     frame.allow = "autoplay; fullscreen; picture-in-picture";
     frame.allowFullscreen = true;
+    frame.scrolling = "no";
     frame.referrerPolicy = "no-referrer";
 
     player.append(frame);
@@ -273,6 +277,7 @@ function installStyles(): void {
     body {
       margin: 0;
       min-width: 0;
+      width: 100%;
       background: transparent;
     }
 
@@ -292,6 +297,12 @@ function installStyles(): void {
       box-shadow: var(--clips-shadow);
     }
 
+    .clips-preview-card--player {
+      border: 0;
+      background: #000000;
+      box-shadow: none;
+    }
+
     .clips-preview-header {
       display: flex;
       align-items: center;
@@ -348,7 +359,6 @@ function installStyles(): void {
       position: relative;
       width: 100%;
       aspect-ratio: 16 / 9;
-      min-height: 240px;
       background: #000000;
     }