npm - @agent-native/core - Versions diffs - 0.70.0 → 0.70.1 - Mend

@agent-native/core 0.70.0 → 0.70.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/corpus/templates/clips/chrome-extension/src/permission.html ADDED Viewed

@@ -0,0 +1,227 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Enable camera & microphone — Clips</title>
+    <style>
+      /* Design tokens mirrored from the popup/options styles.css so this page
+         matches the rest of the extension and the Clips app. */
+      :root {
+        color-scheme: light dark;
+        --bg: #ffffff;
+        --surface: #f5f6f9;
+        --surface-hover: #eef0f5;
+        --fg: #0f172a;
+        --fg-muted: #64748b;
+        --fg-subtle: #94a3b8;
+        --border: hsl(220 10% 90%);
+        --border-strong: #d4d9e4;
+        --brand: #18181b;
+        --brand-hover: #27272a;
+        --brand-ring: rgba(24, 24, 27, 0.28);
+        --status-ok: #22c55e;
+        --danger: #b42318;
+        --radius: 12px;
+        --radius-sm: 8px;
+        --shadow-md:
+          0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
+          ui-sans-serif, system-ui, sans-serif;
+        font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #0f1115;
+          --surface: #181b23;
+          --surface-hover: #1e2230;
+          --fg: #f1f5f9;
+          --fg-muted: #94a3b8;
+          --fg-subtle: #64748b;
+          --border: #252938;
+          --border-strong: #323747;
+          --brand: #f4f4f5;
+          --brand-hover: #e4e4e7;
+          --brand-ring: rgba(244, 244, 245, 0.28);
+          --danger: hsl(6 88% 70%);
+          --shadow-md:
+            0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
+        }
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 24px;
+        background: var(--bg);
+        color: var(--fg);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-size: 14px;
+        line-height: 1.45;
+      }
+      .card {
+        width: 100%;
+        max-width: 420px;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        box-shadow: var(--shadow-md);
+        padding: 28px;
+      }
+      .glyph {
+        width: 44px;
+        height: 44px;
+        border-radius: var(--radius-sm);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        color: var(--fg);
+        margin-bottom: 18px;
+      }
+      .glyph svg {
+        width: 22px;
+        height: 22px;
+        display: block;
+      }
+      h1 {
+        font-size: 18px;
+        font-weight: 600;
+        margin: 0 0 8px;
+        letter-spacing: -0.01em;
+      }
+      p {
+        font-size: 13.5px;
+        color: var(--fg-muted);
+        margin: 0 0 20px;
+      }
+      .rows {
+        display: grid;
+        gap: 8px;
+        margin: 0 0 22px;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        padding: 11px 12px;
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        background: var(--surface);
+        font-size: 13px;
+        color: var(--fg);
+      }
+      .row .check {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 1.5px solid var(--border-strong);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        color: var(--fg-subtle);
+        flex: none;
+      }
+      .row.granted {
+        border-color: var(--status-ok);
+      }
+      .row.granted .check {
+        border-color: var(--status-ok);
+        background: rgba(34, 197, 94, 0.14);
+        color: var(--status-ok);
+      }
+      .row-sub {
+        color: var(--fg-subtle);
+        font-size: 12px;
+      }
+      button {
+        font: inherit;
+        appearance: none;
+        border: 0;
+        border-radius: var(--radius-sm);
+        background: var(--brand);
+        color: var(--bg);
+        font-size: 14px;
+        font-weight: 600;
+        padding: 11px 18px;
+        width: 100%;
+        cursor: pointer;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        transition:
+          background 120ms,
+          transform 80ms;
+      }
+      button:hover:not(:disabled) {
+        background: var(--brand-hover);
+      }
+      button:active:not(:disabled) {
+        transform: translateY(0.5px);
+      }
+      button:disabled {
+        opacity: 0.55;
+        cursor: default;
+      }
+      .status {
+        margin-top: 14px;
+        font-size: 12.5px;
+        min-height: 16px;
+        color: var(--fg-muted);
+        text-align: center;
+      }
+      .status.error {
+        color: var(--danger);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <div class="glyph">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M23 7l-7 5 7 5V7z" />
+          <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+        </svg>
+      </div>
+      <h1>Enable camera &amp; microphone</h1>
+      <p>
+        Clips needs access once so it can show your camera bubble and record
+        your voice. Grant it below — Chrome still asks before each recording
+        starts.
+      </p>
+      <div class="rows">
+        <div class="row" id="row-mic">
+          <span class="check" id="check-mic">●</span>
+          <span
+            >Microphone
+            <span class="row-sub">— record your narration</span></span
+          >
+        </div>
+        <div class="row" id="row-cam">
+          <span class="check" id="check-cam">●</span>
+          <span
+            >Camera
+            <span class="row-sub">— show your face in recordings</span></span
+          >
+        </div>
+      </div>
+      <button id="enable">Enable camera &amp; microphone</button>
+      <div class="status" id="status"></div>
+    </div>
+    <script type="module" src="./permission.ts"></script>
+  </body>
+</html>

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

@@ -0,0 +1,105 @@
+// Camera/microphone permission onboarding. Opened in a tab when the user hits
+// Record without having granted access yet. Requesting getUserMedia from a real
+// extension page (not the headless offscreen document, not a focus-stealing
+// popup) is what makes Chrome show the standard permission dialog and persist
+// the grant for the whole chrome-extension:// origin — so the offscreen recorder
+// (mic) and the camera-bubble iframe both work afterward.
+const enableBtn = document.getElementById("enable") as HTMLButtonElement;
+const statusEl = document.getElementById("status") as HTMLDivElement;
+const rowMic = document.getElementById("row-mic") as HTMLDivElement;
+const rowCam = document.getElementById("row-cam") as HTMLDivElement;
+const checkMic = document.getElementById("check-mic") as HTMLSpanElement;
+const checkCam = document.getElementById("check-cam") as HTMLSpanElement;
+const CHECK = "✓";
+const DOT = "●";
+function setStatus(text: string, isError = false): void {
+  statusEl.textContent = text;
+  statusEl.classList.toggle("error", isError);
+}
+function markRow(kind: "mic" | "cam", granted: boolean): void {
+  const row = kind === "mic" ? rowMic : rowCam;
+  const check = kind === "mic" ? checkMic : checkCam;
+  row.classList.toggle("granted", granted);
+  check.textContent = granted ? CHECK : DOT;
+}
+async function permissionState(
+  name: "camera" | "microphone",
+): Promise<PermissionState | "unknown"> {
+  try {
+    const status = await navigator.permissions.query({
+      name: name as PermissionName,
+    });
+    return status.state;
+  } catch {
+    return "unknown";
+  }
+}
+async function requestOne(kind: "mic" | "cam"): Promise<boolean> {
+  try {
+    const constraints: MediaStreamConstraints =
+      kind === "mic" ? { audio: true } : { video: true };
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    for (const track of stream.getTracks()) track.stop();
+    return true;
+  } catch {
+    return false;
+  }
+}
+function finish(camOk: boolean, micOk: boolean): void {
+  void chrome.storage.local.set({
+    clipsMediaPermission: { camera: camOk, microphone: micOk },
+  });
+  markRow("mic", micOk);
+  markRow("cam", camOk);
+  if (camOk || micOk) {
+    enableBtn.textContent = "All set — you can close this tab";
+    enableBtn.disabled = true;
+    setStatus(
+      camOk && micOk
+        ? "Camera and microphone are ready. Click the Clips icon to record."
+        : "Saved. Click the Clips icon to record.",
+    );
+  } else {
+    enableBtn.disabled = false;
+    enableBtn.textContent = "Try again";
+    setStatus(
+      "Access was blocked. Click the camera icon in Chrome's address bar to allow it, then try again.",
+      true,
+    );
+  }
+}
+async function enable(): Promise<void> {
+  enableBtn.disabled = true;
+  setStatus("Waiting for Chrome's permission prompt…");
+  // Request separately so a camera denial doesn't also block the microphone.
+  const micOk = await requestOne("mic");
+  const camOk = await requestOne("cam");
+  finish(camOk, micOk);
+}
+enableBtn.addEventListener("click", () => void enable());
+// If both are already granted (returning here later), reflect that immediately.
+void (async () => {
+  const [cam, mic] = await Promise.all([
+    permissionState("camera"),
+    permissionState("microphone"),
+  ]);
+  markRow("mic", mic === "granted");
+  markRow("cam", cam === "granted");
+  if (cam === "granted" && mic === "granted") {
+    enableBtn.textContent = "Already enabled — you can close this tab";
+    enableBtn.disabled = true;
+    setStatus(
+      "Camera and microphone are ready. Click the Clips icon to record.",
+    );
+  }
+})();

package/corpus/templates/clips/chrome-extension/src/popup.html CHANGED Viewed

@@ -72,6 +72,7 @@
             aria-checked="false"
             data-mode="screen"
             aria-label="Screen only"
+            data-tooltip="Screen only"
           >
             <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
               <rect
@@ -98,6 +99,7 @@
             aria-checked="true"
             data-mode="screen-camera"
             aria-label="Screen and camera"
+            data-tooltip="Screen and camera"
           >
             <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
               <rect
@@ -126,6 +128,7 @@
             aria-checked="false"
             data-mode="camera"
             aria-label="Camera only"
+            data-tooltip="Camera only"
           >
             <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
               <rect

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

@@ -203,7 +203,7 @@ function readStoredAuth(
   settings: ExtensionSettings,
 ): Promise<StoredAuth | null> {
   return new Promise((resolve) => {
-    chrome.storage.session.get("clipsAuth", (value) => {
+    chrome.storage.local.get("clipsAuth", (value) => {
       const auth = value.clipsAuth as Partial<StoredAuth> | undefined;
       if (
         auth &&
@@ -228,7 +228,7 @@ function readStoredAuth(
 function clearStoredAuth(): Promise<void> {
   return new Promise((resolve) => {
-    chrome.storage.session.remove("clipsAuth", () => resolve());
+    chrome.storage.local.remove("clipsAuth", () => resolve());
   });
 }
@@ -290,6 +290,33 @@ function createTab(url: string): Promise<void> {
   });
 }
+async function permissionGranted(
+  name: "camera" | "microphone",
+): Promise<boolean> {
+  try {
+    const status = await navigator.permissions.query({
+      name: name as PermissionName,
+    });
+    return status.state === "granted";
+  } catch {
+    // Older Chrome can't query these names — don't block; getUserMedia will ask.
+    return true;
+  }
+}
+// True when every device the chosen mode needs is already granted to the
+// extension. If not, the caller routes the user to the permission page.
+async function ensureMediaPermission(
+  settings: ExtensionSettings,
+): Promise<boolean> {
+  const needsCamera =
+    settings.captureSurface === "camera" || settings.includeCamera;
+  const needsMic = settings.includeMicrophone;
+  if (needsCamera && !(await permissionGranted("camera"))) return false;
+  if (needsMic && !(await permissionGranted("microphone"))) return false;
+  return true;
+}
 async function readAuthStatus(
   settings: ExtensionSettings,
 ): Promise<AuthStatus> {
@@ -511,6 +538,16 @@ function renderActiveRecording(recording: NativeRecording | null): void {
 async function init(): Promise<void> {
   const settings = await readSettings();
+  // Warm the offscreen recorder so the native screen picker opens promptly when
+  // the user presses Record (keeps getDisplayMedia close to the click).
+  try {
+    chrome.runtime.sendMessage(
+      { type: "CLIPS_PREWARM" },
+      () => void chrome.runtime.lastError,
+    );
+  } catch {
+    /* ignore */
+  }
   const sourceButton = byId<HTMLButtonElement>("source-button");
   const sourceMenu = byId<HTMLDivElement>("source-menu");
   const includeCamera = byId<HTMLButtonElement>("include-camera");
@@ -775,6 +812,17 @@ async function init(): Promise<void> {
       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;
+    }
     setStatus("Starting recording...");
     await saveSettings(settings);
     const response = await sendStartMessage(settings);

package/corpus/templates/clips/chrome-extension/src/styles.css CHANGED Viewed

@@ -217,6 +217,56 @@ svg {
   box-shadow: var(--shadow-sm);
 }
+/* Tooltip (shadcn-style, CSS-only to mirror the desktop app's Radix tooltip) */
+[data-tooltip] {
+  position: relative;
+}
+[data-tooltip]::after,
+[data-tooltip]::before {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  z-index: 60;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -2px);
+  transition:
+    opacity 90ms ease-in,
+    transform 90ms ease-in;
+}
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--fg);
+  box-shadow: var(--shadow-md);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.45;
+  white-space: nowrap;
+}
+[data-tooltip]::before {
+  content: "";
+  top: calc(100% + 1px);
+  border: 5px solid transparent;
+  border-bottom-color: var(--bg);
+}
+[data-tooltip]:hover::after,
+[data-tooltip]:hover::before,
+[data-tooltip]:focus-visible::after,
+[data-tooltip]:focus-visible::before {
+  opacity: 1;
+  transform: translate(-50%, 0);
+  transition:
+    opacity 120ms ease-out 150ms,
+    transform 120ms ease-out 150ms;
+}
 .panel {
   display: flex;
   flex-direction: column;

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

@@ -15,7 +15,10 @@ export default defineConfig({
     rollupOptions: {
       input: {
         background: resolve(root, "src/background.ts"),
+        "content-script": resolve(root, "src/content-script.ts"),
         offscreen: resolve(root, "src/offscreen.html"),
+        overlay: resolve(root, "src/overlay.html"),
+        permission: resolve(root, "src/permission.html"),
         popup: resolve(root, "src/popup.html"),
         options: resolve(root, "src/options.html"),
       },

package/corpus/templates/clips/desktop/src/lib/audio-cue.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * Recording-start audio cue.
  *
- * A short descending "boop" played the instant capture begins so the user
+ * A short, soft "ready" chime played the instant capture begins so the user
  * gets audible confirmation. Two design constraints shape this module:
  *
  *   1. Browser audio needs a user gesture to start. We therefore build the
@@ -67,37 +67,54 @@ async function playBeforeCapture(
   await wait(CUE_SETTLE_MS);
 }
-/** Schedule the descending-chirp tone on an already-running context. */
+/**
+ * Schedule the recording-start chime on an already-running context: a soft
+ * rising two-note (D5 → A5) with a faint high shimmer. Fast attack, smooth
+ * exponential tail — a gentle confirmation rather than a harsh beep. Kept under
+ * ~380ms so it fits inside `CUE_PLAY_TIMEOUT_MS` and lands just before capture.
+ */
 function scheduleTone(ctx: AudioContext): Promise<void> {
   return new Promise<void>((resolve) => {
-    const startedAt = ctx.currentTime + 0.005;
-    const oscillator = ctx.createOscillator();
-    const gain = ctx.createGain();
-    oscillator.type = "sine";
-    oscillator.frequency.setValueAtTime(880, startedAt);
-    oscillator.frequency.exponentialRampToValueAtTime(660, startedAt + 0.14);
-    gain.gain.setValueAtTime(0.0001, startedAt);
-    gain.gain.exponentialRampToValueAtTime(0.07, startedAt + 0.018);
-    gain.gain.exponentialRampToValueAtTime(0.0001, startedAt + 0.18);
-    oscillator.connect(gain);
-    gain.connect(ctx.destination);
-    // Resolve on `ended`, with a timeout fallback in case it never fires.
+    const t0 = ctx.currentTime + 0.005;
+    const voices = [
+      { freq: 587.33, at: 0.0, dur: 0.22, peak: 0.06 }, // D5
+      { freq: 880.0, at: 0.06, dur: 0.26, peak: 0.075 }, // A5
+      { freq: 1760.0, at: 0.065, dur: 0.14, peak: 0.02 }, // A6 shimmer
+    ];
+    let lastStop = t0;
+    for (const voice of voices) {
+      const startAt = t0 + voice.at;
+      const stopAt = startAt + voice.dur;
+      lastStop = Math.max(lastStop, stopAt);
+      const oscillator = ctx.createOscillator();
+      oscillator.type = "sine";
+      oscillator.frequency.setValueAtTime(voice.freq, startAt);
+      const gain = ctx.createGain();
+      gain.gain.setValueAtTime(0.0001, startAt);
+      gain.gain.exponentialRampToValueAtTime(voice.peak, startAt + 0.012);
+      gain.gain.exponentialRampToValueAtTime(0.0001, stopAt);
+      oscillator.connect(gain);
+      gain.connect(ctx.destination);
+      oscillator.start(startAt);
+      oscillator.stop(stopAt + 0.02);
+    }
+    // Resolve a touch after the final voice ends.
     let resolved = false;
     const finish = () => {
       if (resolved) return;
       resolved = true;
-      window.clearTimeout(timer);
       resolve();
     };
-    const timer = window.setTimeout(finish, 500);
-    oscillator.addEventListener("ended", finish, { once: true });
-    oscillator.start(startedAt);
-    oscillator.stop(startedAt + 0.2);
+    window.setTimeout(
+      finish,
+      Math.ceil((lastStop - ctx.currentTime) * 1000) + 60,
+    );
   });
 }