@agent-native/core 0.77.4 → 0.77.7

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

@@ -19,6 +19,10 @@
 import { scheduleReadyChime } from "@shared/recording-audio";
 import { chunkUploadUrl, pickMimeType } from "@shared/recording-core";
 
+import { captureExtensionError, initExtensionSentry } from "./sentry";
+
+initExtensionSentry("offscreen");
+
 type CaptureMode = "screen" | "camera";
 
 type AcquireMessage = {
@@ -118,6 +122,8 @@ type ActiveRecording = {
   rejectStopped: (error: Error) => void;
 };
 
+const UPLOAD_SLICE_BYTES = 3 * 1024 * 1024;
+
 let prepared: PreparedStreams | null = null;
 let activeRecording: ActiveRecording | null = null;
 
@@ -399,13 +405,46 @@ async function uploadChunk(
       Boolean(recording.authToken),
       text.slice(0, 200),
     );
-    throw new Error(
+    const error = new Error(
       data?.error || `Upload failed (${res.status}): ${text || res.statusText}`,
     );
+    captureExtensionError(error, {
+      tags: {
+        surface: "offscreen",
+        recordingStep: "chunk-upload",
+        httpStatus: String(res.status),
+        isFinal: extra.isFinal ? "true" : "false",
+      },
+      extra: {
+        recordingId: recording.recordingId,
+        chunkIndex: index,
+        chunkBytes: blob.size,
+        total: extra.total,
+        mimeType: blob.type || recording.mimeType,
+        responseBodyTail: text.slice(0, 2000),
+        hadAuth: Boolean(recording.authToken),
+      },
+    });
+    throw error;
   }
   return data;
 }
 
+async function uploadBlobInSlices(
+  recording: ActiveRecording,
+  blob: Blob,
+): Promise<void> {
+  const totalSlices = Math.max(1, Math.ceil(blob.size / UPLOAD_SLICE_BYTES));
+  for (let sliceIndex = 0; sliceIndex < totalSlices; sliceIndex += 1) {
+    if (recording.cancelled || recording.uploadFailure) return;
+    const start = sliceIndex * UPLOAD_SLICE_BYTES;
+    const end = Math.min(start + UPLOAD_SLICE_BYTES, blob.size);
+    const slice = blob.slice(start, end, blob.type || recording.mimeType);
+    const index = recording.chunkIndex++;
+    await uploadChunk(recording, slice, index);
+  }
+}
+
 function stopStreams(streams: (MediaStream | null)[]): void {
   for (const stream of streams) {
     if (!stream) continue;
@@ -616,14 +655,25 @@ async function begin(message: BeginMessage): Promise<{
     ) {
       return;
     }
-    const index = recording.chunkIndex++;
     // Record the failure and stop, but do NOT re-throw: re-throwing leaves a
     // rejected promise that surfaces as an "Uncaught (in promise)" error (bad
     // look in a Chrome Web Store review). finalizeStop reads recording.upload-
     // Failure and surfaces it through the normal error path instead.
-    const upload = uploadChunk(recording, event.data, index).catch((err) => {
+    const upload = uploadBlobInSlices(recording, event.data).catch((err) => {
       recording.uploadFailure =
         err instanceof Error ? err : new Error(String(err));
+      captureExtensionError(recording.uploadFailure, {
+        tags: {
+          surface: "offscreen",
+          recordingStep: "dataavailable-upload",
+        },
+        extra: {
+          recordingId: recording.recordingId,
+          blobBytes: event.data.size,
+          chunkIndex: recording.chunkIndex,
+          mimeType: event.data.type || recording.mimeType,
+        },
+      });
       reportStatus(recording.sessionId, "error", {
         error: recording.uploadFailure.message,
       });
@@ -687,6 +737,20 @@ function startRecorderNow(recording: ActiveRecording): void {
       hasCamera: recording.hasCamera,
     });
   } catch (err) {
+    captureExtensionError(err, {
+      tags: {
+        surface: "offscreen",
+        recordingStep: "recorder-start",
+      },
+      extra: {
+        recordingId: recording.recordingId,
+        mimeType: recording.mimeType,
+        width: recording.dimensions.width,
+        height: recording.dimensions.height,
+        hasAudio: recording.hasAudio,
+        hasCamera: recording.hasCamera,
+      },
+    });
     reportStatus(recording.sessionId, "error", {
       recordingId: recording.recordingId,
       error: err instanceof Error ? err.message : "Could not start recording.",
@@ -766,6 +830,18 @@ async function finalizeStop(recording: ActiveRecording): Promise<void> {
     cleanup(recording);
     if (activeRecording === recording) activeRecording = null;
     const error = err instanceof Error ? err : new Error(String(err));
+    captureExtensionError(error, {
+      tags: {
+        surface: "offscreen",
+        recordingStep: "finalize-stop",
+      },
+      extra: {
+        recordingId: recording.recordingId,
+        chunkCount: recording.chunkIndex,
+        mimeType: recording.mimeType,
+        durationMs: Math.max(0, Date.now() - recording.startedAtMs),
+      },
+    });
     reportStatus(recording.sessionId, "error", {
       recordingId: recording.recordingId,
       error: error.message,

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

@@ -1,3 +1,7 @@
+import { captureExtensionError, initExtensionSentry } from "./sentry";
+
+initExtensionSentry("options");
+
 type CaptureSurface = "browser" | "window" | "monitor" | "camera";
 
 type ExtensionSettings = {
@@ -116,6 +120,9 @@ async function init(): Promise<void> {
         await saveSettings(settings);
         setStatus("Settings saved.");
       } catch (err) {
+        captureExtensionError(err, {
+          tags: { surface: "options", action: "save-settings" },
+        });
         setStatus(
           err instanceof Error ? err.message : "Could not save settings.",
           "error",
@@ -132,6 +139,9 @@ async function init(): Promise<void> {
 }
 
 void init().catch((err) => {
+  captureExtensionError(err, {
+    tags: { surface: "options", action: "init" },
+  });
   setStatus(
     err instanceof Error ? err.message : "Could not load settings.",
     "error",

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

@@ -1,4 +1,7 @@
 import "./overlay.css";
+import { captureExtensionError, initExtensionSentry } from "./sentry";
+
+initExtensionSentry("overlay");
 
 // The overlay runs as an extension-origin iframe injected into the page by the
 // content script. Each iframe renders one "part" of the Loom-style recording UI
@@ -166,6 +169,9 @@ async function initBubble(): Promise<void> {
     postBubble("camera-ready");
   } catch (err) {
     console.warn("[clips-overlay] camera getUserMedia failed:", err);
+    captureExtensionError(err, {
+      tags: { surface: "overlay", overlayPart: "bubble" },
+    });
     const empty = document.createElement("div");
     empty.className = "bubble-empty";
     empty.innerHTML = ICONS.cameraOff;

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

@@ -5,6 +5,10 @@
 // the grant for the whole chrome-extension:// origin — so the offscreen recorder
 // (mic) and the camera-bubble iframe both work afterward.
 
+import { captureExtensionError, initExtensionSentry } from "./sentry";
+
+initExtensionSentry("permission");
+
 const enableBtn = document.getElementById("enable") as HTMLButtonElement;
 const statusEl = document.getElementById("status") as HTMLDivElement;
 const successEl = document.getElementById("success-state") as HTMLDivElement;
@@ -71,7 +75,10 @@ async function requestOne(kind: "mic" | "cam"): Promise<boolean> {
     const stream = await navigator.mediaDevices.getUserMedia(constraints);
     for (const track of stream.getTracks()) track.stop();
     return true;
-  } catch {
+  } catch (err) {
+    captureExtensionError(err, {
+      tags: { surface: "permission", permission: kind },
+    });
     return false;
   }
 }

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

@@ -1,3 +1,7 @@
+import { captureExtensionError, initExtensionSentry } from "./sentry";
+
+initExtensionSentry("popup");
+
 type CaptureSurface = "browser" | "window" | "monitor" | "camera";
 type RecordingModeChoice = "screen-camera" | "screen" | "camera";
 
@@ -1032,6 +1036,9 @@ async function init(): Promise<void> {
         1400,
       );
     } catch (err) {
+      captureExtensionError(err, {
+        tags: { surface: "popup", action: "submit-feedback" },
+      });
       feedbackSubmit.disabled = !feedbackTextarea.value.trim();
       feedbackSubmit.textContent = FEEDBACK_SUBMIT_TEXT;
       feedbackHint.textContent =
@@ -1065,51 +1072,67 @@ async function init(): Promise<void> {
     start.disabled = true;
     signIn.hidden = true;
     setStatus(""); // no chatty "Checking…/Starting…" text — the disabled button is enough
-    authStatus = await readAuthStatus(settings);
-    if (authStatus === "signed-out") {
+    try {
+      authStatus = await readAuthStatus(settings);
+      if (authStatus === "signed-out") {
+        start.disabled = false;
+        start.hidden = true;
+        signIn.hidden = false;
+        setStatus("");
+        return;
+      }
+      const storageConfigured = await readVideoStorageConfigured(settings);
+      if (!storageConfigured) {
+        start.disabled = false;
+        setStatus(
+          "Connect Builder.io or S3 storage in Clips, then start recording.",
+          "error",
+        );
+        await createTab(`${settings.clipsBaseUrl.replace(/\/+$/, "")}/record`);
+        window.close();
+        return;
+      }
+      // Gate at record time: if the user wants camera/mic but hasn't granted the
+      // extension access yet, send them to the onboarding page first. Requesting
+      // there (a real extension page) is the only place Chrome reliably shows the
+      // permission dialog and persists the grant for the offscreen recorder + bubble.
+      if (!(await ensureMediaPermission(settings))) {
+        start.disabled = false;
+        setStatus("Allow camera & microphone, then start recording.", "error");
+        await createTab(chrome.runtime.getURL("src/permission.html"));
+        window.close();
+        return;
+      }
+      await saveSettings(settings);
+      const response = await sendStartMessage(settings);
+      if (response.ok) {
+        window.close();
+        return;
+      }
       start.disabled = false;
-      start.hidden = true;
-      signIn.hidden = false;
-      setStatus("");
-      return;
-    }
-    const storageConfigured = await readVideoStorageConfigured(settings);
-    if (!storageConfigured) {
+      const message = response.error || "Could not start Clips.";
+      if (isSignInError(message)) {
+        start.hidden = true;
+        signIn.hidden = false;
+        setStatus("");
+        return;
+      }
+      setStatus(message, "error");
+    } catch (err) {
+      captureExtensionError(err, {
+        tags: { surface: "popup", action: "start-recording" },
+        extra: {
+          captureSurface: settings.captureSurface,
+          includeCamera: settings.includeCamera,
+          includeMicrophone: settings.includeMicrophone,
+        },
+      });
       start.disabled = false;
       setStatus(
-        "Connect Builder.io or S3 storage in Clips, then start recording.",
+        err instanceof Error ? err.message : "Could not start Clips.",
         "error",
       );
-      await createTab(`${settings.clipsBaseUrl.replace(/\/+$/, "")}/record`);
-      window.close();
-      return;
-    }
-    // Gate at record time: if the user wants camera/mic but hasn't granted the
-    // extension access yet, send them to the onboarding page first. Requesting
-    // there (a real extension page) is the only place Chrome reliably shows the
-    // permission dialog and persists the grant for the offscreen recorder + bubble.
-    if (!(await ensureMediaPermission(settings))) {
-      start.disabled = false;
-      setStatus("Allow camera & microphone, then start recording.", "error");
-      await createTab(chrome.runtime.getURL("src/permission.html"));
-      window.close();
-      return;
     }
-    await saveSettings(settings);
-    const response = await sendStartMessage(settings);
-    if (response.ok) {
-      window.close();
-      return;
-    }
-    start.disabled = false;
-    const message = response.error || "Could not start Clips.";
-    if (isSignInError(message)) {
-      start.hidden = true;
-      signIn.hidden = false;
-      setStatus("");
-      return;
-    }
-    setStatus(message, "error");
   });
 
   signIn.addEventListener("click", async () => {
@@ -1173,6 +1196,9 @@ async function init(): Promise<void> {
 }
 
 void init().catch((err) => {
+  captureExtensionError(err, {
+    tags: { surface: "popup", action: "init" },
+  });
   setStatus(
     err instanceof Error ? err.message : "Could not load popup.",
     "error",

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

@@ -0,0 +1,206 @@
+import * as Sentry from "@sentry/browser";
+
+declare const __CLIPS_SENTRY_DSN__: string;
+declare const __CLIPS_SENTRY_ENVIRONMENT__: string;
+
+type CaptureContext = {
+  tags?: Record<string, string | undefined>;
+  extra?: Record<string, unknown>;
+  contexts?: Record<string, Record<string, unknown>>;
+};
+
+const SENSITIVE_QUERY_PARAM_RE =
+  /(?:token|secret|password|passwd|pwd|key|api[-_]?key|code|state|session|auth|credential)/i;
+
+let initialized = false;
+let globalErrorCaptureInstalled = false;
+
+function configuredDsn(): string {
+  return typeof __CLIPS_SENTRY_DSN__ === "string"
+    ? __CLIPS_SENTRY_DSN__.trim()
+    : "";
+}
+
+function extensionVersion(): string {
+  try {
+    return chrome.runtime.getManifest().version || "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+function scrubUrl(
+  value: string,
+  options: { redactAllQueryValues?: boolean } = {},
+): string {
+  try {
+    const url = new URL(value);
+    for (const key of [...url.searchParams.keys()]) {
+      if (options.redactAllQueryValues || SENSITIVE_QUERY_PARAM_RE.test(key)) {
+        url.searchParams.set(key, "<redacted>");
+      }
+    }
+    return url.toString();
+  } catch {
+    return value;
+  }
+}
+
+function scrubEvent<T extends Sentry.Event>(event: T): T {
+  if (event.request?.url) {
+    event.request.url = scrubUrl(event.request.url);
+  }
+  if (Array.isArray(event.breadcrumbs)) {
+    for (const breadcrumb of event.breadcrumbs) {
+      const data = breadcrumb.data as Record<string, unknown> | undefined;
+      if (!data) continue;
+      for (const key of ["url", "from", "to"]) {
+        if (typeof data[key] === "string") {
+          data[key] = scrubUrl(data[key]);
+        }
+      }
+    }
+  }
+  if (event.user) {
+    delete (event.user as Record<string, unknown>).ip_address;
+  }
+  return event;
+}
+
+function scrubScopeString(value: string): string {
+  const scrubbed = scrubUrl(value, { redactAllQueryValues: true });
+  if (scrubbed !== value) return scrubbed;
+  return value.replace(/https?:\/\/[^\s"'<>]+/g, (url) =>
+    scrubUrl(url, { redactAllQueryValues: true }),
+  );
+}
+
+function scrubScopeValue(
+  value: unknown,
+  seen = new WeakSet<object>(),
+): unknown {
+  if (typeof value === "string") return scrubScopeString(value);
+  if (Array.isArray(value)) {
+    return value.map((item) => scrubScopeValue(item, seen));
+  }
+  if (!value || typeof value !== "object") return value;
+  if (seen.has(value)) return "[Circular]";
+  if (Object.prototype.toString.call(value) !== "[object Object]") {
+    return value;
+  }
+  seen.add(value);
+  return Object.fromEntries(
+    Object.entries(value as Record<string, unknown>).map(([key, entry]) => [
+      key,
+      scrubScopeValue(entry, seen),
+    ]),
+  );
+}
+
+function installGlobalErrorCapture(surface: string): void {
+  if (globalErrorCaptureInstalled) return;
+  globalErrorCaptureInstalled = true;
+  const target = globalThis as typeof globalThis & {
+    addEventListener?: (
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+    ) => void;
+  };
+  if (typeof target.addEventListener !== "function") return;
+
+  target.addEventListener("error", (event) => {
+    const errorEvent = event as ErrorEvent;
+    const error =
+      errorEvent.error instanceof Error
+        ? errorEvent.error
+        : new Error(errorEvent.message || "Unhandled extension error");
+    captureExtensionError(error, {
+      tags: { surface, mechanism: "global-error" },
+      extra: {
+        filename: errorEvent.filename,
+        lineno: errorEvent.lineno,
+        colno: errorEvent.colno,
+      },
+    });
+  });
+
+  target.addEventListener("unhandledrejection", (event) => {
+    const rejection = event as PromiseRejectionEvent;
+    const error =
+      rejection.reason instanceof Error
+        ? rejection.reason
+        : new Error(String(rejection.reason ?? "Unhandled promise rejection"));
+    captureExtensionError(error, {
+      tags: { surface, mechanism: "unhandled-rejection" },
+    });
+  });
+}
+
+export function initExtensionSentry(surface: string): void {
+  if (initialized) return;
+  const dsn = configuredDsn();
+  if (!dsn) return;
+  initialized = true;
+
+  Sentry.init({
+    dsn,
+    environment:
+      typeof __CLIPS_SENTRY_ENVIRONMENT__ === "string" &&
+      __CLIPS_SENTRY_ENVIRONMENT__
+        ? __CLIPS_SENTRY_ENVIRONMENT__
+        : "production",
+    release: `clips-chrome-extension@${extensionVersion()}`,
+    sendDefaultPii: false,
+    skipBrowserExtensionCheck: true,
+    beforeSend(event) {
+      event.tags = {
+        ...event.tags,
+        app: "agent-native-clips",
+        template: "clips",
+        runtime: "chrome-extension",
+        surface,
+      };
+      return scrubEvent(event);
+    },
+  });
+
+  Sentry.setTag("app", "agent-native-clips");
+  Sentry.setTag("template", "clips");
+  Sentry.setTag("runtime", "chrome-extension");
+  Sentry.setTag("surface", surface);
+  installGlobalErrorCapture(surface);
+}
+
+export function captureExtensionError(
+  error: unknown,
+  context: CaptureContext = {},
+): string | undefined {
+  if (!initialized) return undefined;
+  try {
+    return Sentry.withScope((scope) => {
+      if (context.tags) {
+        for (const [key, value] of Object.entries(context.tags)) {
+          if (typeof value === "string") {
+            scope.setTag(key, scrubScopeString(value));
+          }
+        }
+      }
+      if (context.extra) {
+        for (const [key, value] of Object.entries(context.extra)) {
+          if (value !== undefined) scope.setExtra(key, scrubScopeValue(value));
+        }
+      }
+      if (context.contexts) {
+        for (const [key, value] of Object.entries(context.contexts)) {
+          scope.setContext(
+            key,
+            scrubScopeValue(value) as Record<string, unknown>,
+          );
+        }
+      }
+      return Sentry.captureException(error);
+    });
+  } catch {
+    return undefined;
+  }
+}

package/corpus/templates/clips/chrome-extension/vite.config.ts

@@ -5,10 +5,57 @@ import { defineConfig } from "vite";
 
 const root = dirname(fileURLToPath(import.meta.url));
 
+function firstNonEmpty(...values: Array<string | undefined>): string {
+  for (const value of values) {
+    const trimmed = value?.trim();
+    if (trimmed) return trimmed;
+  }
+  return "";
+}
+
+function resolveSentryDsn(): string {
+  const direct = firstNonEmpty(
+    process.env.SENTRY_CLIENT_DSN,
+    process.env.VITE_SENTRY_CLIENT_DSN,
+    process.env.VITE_SENTRY_DSN,
+    process.env.SENTRY_DSN,
+  );
+  if (direct) return direct;
+
+  const key = firstNonEmpty(
+    process.env.SENTRY_CLIENT_KEY,
+    process.env.VITE_SENTRY_CLIENT_KEY,
+  );
+  const projectId = firstNonEmpty(
+    process.env.SENTRY_PROJECT_ID,
+    process.env.VITE_SENTRY_PROJECT_ID,
+  );
+  const host = firstNonEmpty(
+    process.env.SENTRY_INGEST_HOST,
+    process.env.VITE_SENTRY_INGEST_HOST,
+  );
+  return key && projectId && host ? `https://${key}@${host}/${projectId}` : "";
+}
+
+function resolveSentryEnvironment(): string {
+  return (
+    firstNonEmpty(
+      process.env.SENTRY_ENVIRONMENT,
+      process.env.NETLIFY_CONTEXT,
+      process.env.VERCEL_ENV,
+      process.env.NODE_ENV,
+    ) || "production"
+  );
+}
+
 export default defineConfig({
   root,
   base: "./",
   publicDir: "public",
+  define: {
+    __CLIPS_SENTRY_DSN__: JSON.stringify(resolveSentryDsn()),
+    __CLIPS_SENTRY_ENVIRONMENT__: JSON.stringify(resolveSentryEnvironment()),
+  },
   // Share recording primitives with the web app recorder (templates/clips/shared)
   // — matches the "@shared/*" tsconfig path so imports resolve in both builds.
   resolve: {

package/corpus/templates/clips/desktop/src/overlays/countdown.tsx

@@ -66,8 +66,10 @@ export function Countdown() {
         >
           <IconX size={30} stroke={2.4} />
         </button>
-        <div className="countdown-number" key={n} aria-live="polite">
-          {n > 0 ? n : ""}
+        <div className="countdown-number-wrap">
+          <div className="countdown-number" key={n} aria-live="polite">
+            {n > 0 ? n : ""}
+          </div>
         </div>
         <button
           type="button"

package/corpus/templates/clips/desktop/src/styles.css

@@ -2099,7 +2099,7 @@ body[data-clips-route="recording-pill"] #root {
 
 .countdown-control-skip {
   /* center at +200px from row center: 200 - (64 / 2) = 168px */
-  right: -232px;
+  left: 168px;
 }
 
 .countdown-control:hover {
@@ -2117,6 +2117,20 @@ body[data-clips-route="recording-pill"] #root {
   outline-offset: 2px;
 }
 
+/*
+ * Absolutely centers the number without contributing width to .countdown-controls.
+ * This keeps the controls div at zero width so the cancel/skip button positions
+ * (left: -232px, left: 168px) line up exactly with the Rust cursor-poll hit-rects
+ * (CONTROL_OFFSET_X = 200.0) measured from the window center.
+ */
+.countdown-number-wrap {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
 .countdown-number {
   font-size: 240px;
   font-weight: 800;

package/corpus/templates/clips/netlify.toml

@@ -5,6 +5,7 @@ publish = "templates/clips/dist"
 functions = "templates/clips/.netlify/functions-internal"
 
 [build.environment]
+GA_MEASUREMENT_ID = "G-ESF7FYXGN9"
 NITRO_PRESET = "netlify"
 NPM_CONFIG_PRODUCTION = "false"
 AUTO_CREATE_DEFAULT_ORG = "1"

package/corpus/templates/clips/server/db/index.ts

@@ -14,6 +14,7 @@ registerShareableResource({
   titleColumn: "title",
   getResourcePath: (recording) => `/r/${recording.id}`,
   getDb,
+  ownerAccessIgnoresOrg: true,
 });
 
 registerShareableResource({