@agent-native/core 0.69.0 → 0.70.1

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

@@ -0,0 +1,377 @@
+:root {
+  color-scheme: light dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  overflow: hidden;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+    sans-serif;
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+/* ---------- Camera bubble ---------- */
+
+.bubble {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bubble-ring {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #0f172a;
+  box-shadow:
+    0 10px 30px rgba(15, 23, 42, 0.35),
+    0 0 0 4px rgba(255, 255, 255, 0.92);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bubble-ring video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+}
+
+.bubble-empty {
+  color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bubble-empty svg {
+  width: 38%;
+  height: 38%;
+}
+
+/* ---------- Countdown ---------- */
+
+.countdown {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(2, 6, 23, 0.55);
+  backdrop-filter: blur(2px);
+}
+
+.countdown-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(28px, 8vmin, 72px);
+}
+
+.countdown-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: clamp(56px, 9vmin, 76px);
+  height: clamp(56px, 9vmin, 76px);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  color: #fff;
+  cursor: pointer;
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    transform 0.12s ease;
+}
+
+.countdown-control:hover {
+  background: rgba(255, 255, 255, 0.16);
+  border-color: rgba(255, 255, 255, 0.6);
+}
+
+.countdown-control:active {
+  transform: scale(0.94);
+}
+
+.countdown-control svg {
+  width: clamp(26px, 4vmin, 32px);
+  height: clamp(26px, 4vmin, 32px);
+}
+
+.countdown-number {
+  min-width: clamp(120px, 26vmin, 280px);
+  text-align: center;
+  font-size: clamp(96px, 22vmin, 240px);
+  font-weight: 700;
+  color: #fff;
+  text-shadow: 0 6px 30px rgba(2, 6, 23, 0.6);
+  line-height: 1;
+  animation: countdown-pop 1s ease-out forwards;
+}
+
+.countdown-go {
+  font-size: clamp(64px, 14vmin, 160px);
+  letter-spacing: 0.04em;
+}
+
+@keyframes countdown-pop {
+  0% {
+    transform: scale(0.45);
+    opacity: 0;
+  }
+  25% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  70% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.25);
+    opacity: 0;
+  }
+}
+
+.countdown-hint {
+  position: absolute;
+  bottom: 14%;
+  left: 50%;
+  transform: translateX(-50%);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 15px;
+  font-weight: 500;
+  background: rgba(2, 6, 23, 0.45);
+  padding: 8px 16px;
+  border-radius: 999px;
+}
+
+/* ---------- Toolbar (vertical left pill, desktop layout) ---------- */
+
+@keyframes rec-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+.toolbar-v {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 9px;
+  border-radius: 20px;
+  background: rgba(15, 23, 42, 0.94);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
+  color: #fff;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.toolbar-v button {
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 0.12s ease,
+    transform 0.1s ease;
+}
+
+.toolbar-v button:active {
+  transform: scale(0.92);
+}
+
+.toolbar-v-stop {
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  background: #ef4444;
+}
+
+.toolbar-v-stop:hover {
+  background: #dc2626;
+}
+
+.toolbar-v-stop-square {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: #fff;
+  display: block;
+}
+
+.toolbar-v-time {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-variant-numeric: tabular-nums;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.94);
+}
+
+.toolbar-v-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ef4444;
+  animation: rec-pulse 1.4s ease-in-out infinite;
+}
+
+.toolbar-v-paused .toolbar-v-dot {
+  background: #f59e0b;
+  animation: none;
+}
+
+.toolbar-v-pause {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.toolbar-v-pause:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.toolbar-v-pause svg {
+  width: 18px;
+  height: 18px;
+}
+
+.toolbar-v-hover-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition:
+    max-height 0.18s ease,
+    opacity 0.18s ease;
+}
+
+.toolbar-v:hover .toolbar-v-hover-actions {
+  max-height: 120px;
+  opacity: 1;
+}
+
+.toolbar-v-action {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.toolbar-v-action:hover {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.toolbar-v-action svg {
+  width: 20px;
+  height: 20px;
+}
+
+.toolbar-v-action-danger:hover {
+  background: rgba(239, 68, 68, 0.22);
+  color: #fca5a5;
+}
+
+/* ---------- Saving card (bottom-left, mirrors desktop Finalizing) ---------- */
+
+.saving-card {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 9px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  background: rgba(15, 23, 42, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
+  color: #fff;
+}
+
+.saving-card .saving-spinner {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.25);
+  border-top-color: #fff;
+  animation: saving-spin 0.8s linear infinite;
+}
+
+@keyframes saving-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.saving-caption {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.saving-bar {
+  height: 5px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  overflow: hidden;
+}
+
+.saving-bar-fill {
+  height: 100%;
+  width: 40%;
+  border-radius: 999px;
+  background: #6366f1;
+  animation: saving-indeterminate 1.1s ease-in-out infinite;
+}
+
+@keyframes saving-indeterminate {
+  0% {
+    margin-left: -40%;
+  }
+  100% {
+    margin-left: 100%;
+  }
+}

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

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="color-scheme" content="light dark" />
+    <title>Clips overlay</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./overlay.ts"></script>
+  </body>
+</html>

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

@@ -0,0 +1,330 @@
+import "./overlay.css";
+
+// 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
+// (camera bubble, countdown, or control toolbar) selected via ?part=. Running at
+// the chrome-extension:// origin gives us a persistent camera permission grant,
+// CSS isolation from the host page, and direct chrome.runtime messaging with the
+// background service worker.
+
+type OverlayPhase = "idle" | "countdown" | "recording" | "paused" | "saving";
+
+// Hover-expand heights for the vertical toolbar, posted to the content script
+// which owns the iframe size (the iframe can't resize itself).
+const TOOLBAR_COLLAPSED_H = 154;
+const TOOLBAR_EXPANDED_H = 236;
+
+function postToolbarSize(height: number): void {
+  try {
+    window.parent.postMessage(
+      { source: "clips-overlay", kind: "resize", part: "toolbar", height },
+      "*",
+    );
+  } catch {
+    /* parent gone */
+  }
+}
+
+type OverlayState = {
+  phase: OverlayPhase;
+  baseElapsedMs: number;
+  baseEpochMs: number;
+  countdownEndsAtMs: number;
+};
+
+const COUNTDOWN_FALLBACK = 3;
+const params = new URLSearchParams(location.search);
+const part = params.get("part");
+const root = document.getElementById("root") as HTMLDivElement;
+
+function icon(paths: string): string {
+  return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+}
+
+const ICONS = {
+  pause: icon(
+    '<rect x="6" y="5" width="4" height="14" rx="1" fill="currentColor" stroke="none"/><rect x="14" y="5" width="4" height="14" rx="1" fill="currentColor" stroke="none"/>',
+  ),
+  resume: icon('<path d="M7 5l12 7-12 7z" fill="currentColor" stroke="none"/>'),
+  stop: icon(
+    '<rect x="6" y="6" width="12" height="12" rx="2.5" fill="currentColor" stroke="none"/>',
+  ),
+  restart: icon('<path d="M3 11a9 9 0 1 1 2.6 6.3"/><path d="M3 4v7h7"/>'),
+  trash: icon(
+    '<path d="M4 7h16"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M5 7l1 13a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-13"/><path d="M9 7V4h6v3"/>',
+  ),
+  cameraOff: icon(
+    '<path d="M2 2l20 20"/><path d="M7 7H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12"/><path d="M22 8l-6 4 6 4V8z" opacity="0.5"/>',
+  ),
+  cancel: icon('<path d="M6 6l12 12"/><path d="M18 6L6 18"/>'),
+  skipForward: icon(
+    '<path d="M6 5l10 7-10 7z" fill="currentColor" stroke="none"/><rect x="16" y="5" width="3" height="14" rx="1" fill="currentColor" stroke="none"/>',
+  ),
+};
+
+function send(type: string, extra: Record<string, unknown> = {}): void {
+  try {
+    chrome.runtime.sendMessage(
+      { type, ...extra },
+      () => void chrome.runtime.lastError,
+    );
+  } catch {
+    /* the background may be momentarily asleep; state will re-sync */
+  }
+}
+
+/* ---------------------------------------------------------------- bubble --- */
+
+async function initBubble(): Promise<void> {
+  const bubble = document.createElement("div");
+  bubble.className = "bubble";
+  const ring = document.createElement("div");
+  ring.className = "bubble-ring";
+  bubble.appendChild(ring);
+  root.appendChild(bubble);
+
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: {
+        width: { ideal: 640 },
+        height: { ideal: 640 },
+        facingMode: "user",
+      },
+      audio: false,
+    });
+    const video = document.createElement("video");
+    video.muted = true;
+    video.autoplay = true;
+    video.playsInline = true;
+    video.srcObject = stream;
+    ring.appendChild(video);
+    await video.play().catch(() => undefined);
+  } catch {
+    const empty = document.createElement("div");
+    empty.className = "bubble-empty";
+    empty.innerHTML = ICONS.cameraOff;
+    ring.appendChild(empty);
+  }
+}
+
+/* ------------------------------------------------------------- countdown --- */
+
+// The countdown only *visualizes* the worker's clock (state.countdownEndsAtMs).
+// The worker owns the real timer and starts the recorder, so this never *needs*
+// to signal "done" — which is what lets recording work on pages where no overlay
+// can be injected at all. The skip button is the one exception: it explicitly
+// asks the worker to start now (CLIPS_OVERLAY_COUNTDOWN_DONE → beginNow), which
+// is idempotent and harmless if the timer also fires.
+function initCountdown(): void {
+  const wrap = document.createElement("div");
+  wrap.className = "countdown";
+
+  const controls = document.createElement("div");
+  controls.className = "countdown-controls";
+
+  const cancelBtn = document.createElement("button");
+  cancelBtn.type = "button";
+  cancelBtn.className = "countdown-control countdown-control-cancel";
+  cancelBtn.setAttribute("aria-label", "Cancel recording");
+  cancelBtn.innerHTML = ICONS.cancel;
+  cancelBtn.addEventListener("click", () => send("CLIPS_OVERLAY_CANCEL"));
+
+  const number = document.createElement("div");
+  number.className = "countdown-number";
+
+  const skipBtn = document.createElement("button");
+  skipBtn.type = "button";
+  skipBtn.className = "countdown-control countdown-control-skip";
+  skipBtn.setAttribute("aria-label", "Skip countdown and start recording now");
+  skipBtn.innerHTML = ICONS.skipForward;
+  skipBtn.addEventListener("click", () => send("CLIPS_OVERLAY_COUNTDOWN_DONE"));
+
+  controls.append(cancelBtn, number, skipBtn);
+
+  const hint = document.createElement("div");
+  hint.className = "countdown-hint";
+  hint.textContent = "Get ready…";
+  wrap.append(controls, hint);
+  root.appendChild(wrap);
+
+  let lastShown = "";
+  const render = (): void => {
+    const fallback =
+      Number(params.get("seconds") || String(COUNTDOWN_FALLBACK)) ||
+      COUNTDOWN_FALLBACK;
+    const endsAt =
+      state.countdownEndsAtMs > 0
+        ? state.countdownEndsAtMs
+        : Date.now() + fallback * 1000;
+    const remainingMs = endsAt - Date.now();
+    if (state.phase !== "countdown" || remainingMs <= 0) {
+      if (lastShown !== "Go") {
+        number.textContent = "Go";
+        number.classList.add("countdown-go");
+        lastShown = "Go";
+      }
+      return;
+    }
+    const text = String(Math.ceil(remainingMs / 1000));
+    if (text !== lastShown) {
+      number.textContent = text;
+      number.classList.remove("countdown-go");
+      number.style.animation = "none";
+      void number.offsetWidth;
+      number.style.animation = "";
+      lastShown = text;
+    }
+  };
+  countdownRender = render;
+  window.setInterval(render, 100);
+  render();
+}
+
+/* --------------------------------------------------------------- toolbar --- */
+
+// Vertical pill anchored to the LEFT edge — mirrors the desktop app's toolbar.
+// Big Stop on top, elapsed time, pause; on hover it grows to reveal restart +
+// cancel. Pure command emitter; the background owns the recorder.
+function initToolbar(): void {
+  const pill = document.createElement("div");
+  pill.className = "toolbar-v";
+
+  const makeBtn = (
+    cls: string,
+    title: string,
+    svg: string,
+    onClick: () => void,
+  ): HTMLButtonElement => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = cls;
+    btn.title = title;
+    btn.setAttribute("aria-label", title);
+    btn.innerHTML = svg;
+    btn.addEventListener("click", onClick);
+    return btn;
+  };
+
+  const stopBtn = makeBtn(
+    "toolbar-v-stop",
+    "Stop & save",
+    '<span class="toolbar-v-stop-square"></span>',
+    () => send("CLIPS_OVERLAY_STOP"),
+  );
+
+  const time = document.createElement("div");
+  time.className = "toolbar-v-time";
+  const dot = document.createElement("span");
+  dot.className = "toolbar-v-dot";
+  const clock = document.createElement("span");
+  clock.textContent = "0:00";
+  time.append(dot, clock);
+
+  const pauseBtn = makeBtn("toolbar-v-pause", "Pause", ICONS.pause, () => {
+    if (state.phase === "paused") send("CLIPS_OVERLAY_RESUME");
+    else send("CLIPS_OVERLAY_PAUSE");
+  });
+
+  const hoverGroup = document.createElement("div");
+  hoverGroup.className = "toolbar-v-hover-actions";
+  const restartBtn = makeBtn("toolbar-v-action", "Restart", ICONS.restart, () =>
+    send("CLIPS_OVERLAY_RESTART"),
+  );
+  const cancelBtn = makeBtn(
+    "toolbar-v-action toolbar-v-action-danger",
+    "Discard",
+    ICONS.trash,
+    () => send("CLIPS_OVERLAY_CANCEL"),
+  );
+  hoverGroup.append(restartBtn, cancelBtn);
+
+  pill.append(stopBtn, time, pauseBtn, hoverGroup);
+  root.appendChild(pill);
+
+  // The iframe can't size itself, so ask the content script to grow/shrink it.
+  pill.addEventListener("mouseenter", () =>
+    postToolbarSize(TOOLBAR_EXPANDED_H),
+  );
+  pill.addEventListener("mouseleave", () =>
+    postToolbarSize(TOOLBAR_COLLAPSED_H),
+  );
+
+  const render = (): void => {
+    const paused = state.phase === "paused";
+    pill.classList.toggle("toolbar-v-paused", paused);
+    pauseBtn.title = paused ? "Resume" : "Pause";
+    pauseBtn.innerHTML = paused ? ICONS.resume : ICONS.pause;
+    const elapsed = paused
+      ? state.baseElapsedMs
+      : state.baseElapsedMs + Math.max(0, Date.now() - state.baseEpochMs);
+    clock.textContent = formatDuration(elapsed);
+  };
+
+  window.setInterval(render, 250);
+  toolbarRender = render;
+  render();
+}
+
+/* ---------------------------------------------------------------- saving --- */
+
+// Bottom-left "Saving…" card shown from Stop until the clip opens, mirroring the
+// desktop Finalizing overlay so the upload gap isn't a blank screen.
+function initSaving(): void {
+  const card = document.createElement("div");
+  card.className = "saving-card";
+  const spinner = document.createElement("div");
+  spinner.className = "saving-spinner";
+  const caption = document.createElement("div");
+  caption.className = "saving-caption";
+  caption.textContent = "Saving clip…";
+  const bar = document.createElement("div");
+  bar.className = "saving-bar";
+  const fill = document.createElement("div");
+  fill.className = "saving-bar-fill";
+  bar.appendChild(fill);
+  card.append(spinner, caption, bar);
+  root.appendChild(card);
+}
+
+function formatDuration(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(total / 60);
+  const seconds = total % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+
+/* ----------------------------------------------------------------- state --- */
+
+const state: OverlayState = {
+  phase: "recording",
+  baseElapsedMs: 0,
+  baseEpochMs: Date.now(),
+  countdownEndsAtMs: 0,
+};
+let toolbarRender: (() => void) | null = null;
+let countdownRender: (() => void) | null = null;
+
+chrome.runtime.onMessage.addListener((message) => {
+  if (!message || typeof message !== "object") return;
+  if ((message as { type?: unknown }).type !== "CLIPS_OVERLAY_STATE") return;
+  const next = (message as { state?: Partial<OverlayState> }).state;
+  if (!next) return;
+  if (typeof next.phase === "string") state.phase = next.phase as OverlayPhase;
+  if (typeof next.baseElapsedMs === "number")
+    state.baseElapsedMs = next.baseElapsedMs;
+  if (typeof next.baseEpochMs === "number")
+    state.baseEpochMs = next.baseEpochMs;
+  if (typeof next.countdownEndsAtMs === "number")
+    state.countdownEndsAtMs = next.countdownEndsAtMs;
+  toolbarRender?.();
+  countdownRender?.();
+});
+
+if (part === "bubble") void initBubble();
+else if (part === "countdown") initCountdown();
+else if (part === "toolbar") initToolbar();
+else if (part === "saving") initSaving();
+
+// Ask the background for the current state so a freshly-injected toolbar (e.g.
+// after the user navigated to a new page mid-recording) shows the right timer.
+send("CLIPS_OVERLAY_HELLO", { part });