@agent-native/core 0.71.0 → 0.72.0

package/corpus/templates/calendar/app/components/calendar/GoogleConnectBanner.tsx

@@ -10,8 +10,14 @@ import {
   IconUpload,
   IconAlertTriangle,
   IconLogout,
+  IconInfoCircle,
 } from "@tabler/icons-react";
 import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   agentNativePath,
   isInBuilderFrame,
@@ -336,6 +342,8 @@ export function GoogleConnectBanner({
                 : "Connect Google"}
         </Button>
 
+        <GoogleVerificationNotice className="mt-3" />
+
         <GoogleAuthIssuePanel
           issue={desktopAuthIssue}
           onSignOut={handleSignOutForGoogle}
@@ -439,15 +447,18 @@ export function GoogleConnectBanner({
     <div className="border-b border-border/30 bg-card">
       {/* Compact banner row */}
       <div className="flex items-center justify-between gap-3 px-4 py-2">
-        <div className="flex items-center gap-2.5">
+        <div className="flex items-center gap-2.5 min-w-0">
           <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/[0.06]">
             <IconCalendarCheck className="h-3 w-3 text-white/40" />
           </div>
-          <p className="text-[13px] font-medium leading-tight text-foreground/80">
-            {allConfigured
-              ? "Ready to connect — sign in with your Google account"
-              : "Connect Google to sync your calendar"}
-          </p>
+          <div className="flex min-w-0 flex-col">
+            <p className="text-[13px] font-medium leading-tight text-foreground/80">
+              {allConfigured
+                ? "Ready to connect — sign in with your Google account"
+                : "Connect Google to sync your calendar"}
+            </p>
+            <GoogleVerificationNotice className="mt-0.5" />
+          </div>
         </div>
 
         <div className="flex items-center gap-1.5 shrink-0">
@@ -534,6 +545,49 @@ export function GoogleConnectBanner({
   );
 }
 
+// Heads-up popover: Google shows a "hasn't verified this app" warning during
+// the OAuth consent flow because the connection runs through the user's own
+// Google Cloud project (External + Testing), not a Google-reviewed public app.
+// This explains that the warning is expected and how to safely continue.
+function GoogleVerificationNotice({ className = "" }: { className?: string }) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className={`inline-flex items-center gap-1 text-[11px] text-muted-foreground/70 transition-colors hover:text-muted-foreground ${className}`}
+        >
+          <IconInfoCircle className="h-3 w-3" />
+          Google may show a warning
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="center" className="w-72 text-left">
+        <div className="flex items-start gap-2.5">
+          <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-amber-500/15 text-amber-300">
+            <IconAlertTriangle className="h-3.5 w-3.5" />
+          </div>
+          <div className="space-y-1.5">
+            <p className="text-[13px] font-medium text-foreground">
+              “Google hasn’t verified this app”
+            </p>
+            <p className="text-xs leading-relaxed text-muted-foreground">
+              You’ll see this screen because the calendar connects through your
+              own Google Cloud project, not a Google-reviewed public app. It’s
+              safe to continue: click{" "}
+              <span className="font-medium text-foreground">Advanced</span>,
+              then{" "}
+              <span className="font-medium text-foreground">
+                “Go to … (unsafe)”
+              </span>{" "}
+              to finish connecting.
+            </p>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 function GoogleAuthIssuePanel({
   issue,
   onSignOut,

package/corpus/templates/calendar/changelog/2026-06-23-added-a-heads-up-explaining-google-s-app-not-verified-screen.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-23
+---
+
+Added a heads-up explaining Google's 'app not verified' screen when connecting your calendar, so you know it's safe to continue

package/corpus/templates/clips/app/components/recorder/recorder-engine.ts

@@ -19,6 +19,15 @@ import {
   createCameraCompositeStream,
   type CameraCompositeHandle,
 } from "@/lib/camera-composite";
+import {
+  chunkUploadUrl,
+  pickMimeType,
+  pickMimeTypeCandidates,
+} from "@shared/recording-core";
+
+// Re-exported for existing callers; the canonical impls live in
+// @shared/recording-core and are shared with the Chrome extension recorder.
+export { pickMimeType, pickMimeTypeCandidates };
 
 export type RecordingMode = "screen" | "camera" | "screen+camera";
 export type DisplaySurface = "monitor" | "window" | "browser";
@@ -281,34 +290,6 @@ function isScreenPickerDismissal(err: unknown): boolean {
   return false;
 }
 
-/** Pick a MediaRecorder mimeType the current browser actually supports. */
-export function pickMimeTypeCandidates(): string[] {
-  // Chrome can report MP4 support but still reject the encoder configuration
-  // for some display-capture streams. Prefer the WebM combinations that are
-  // broadly supported by MediaRecorder, then fall back to MP4/Safari.
-  return [
-    "video/webm;codecs=vp8,opus",
-    "video/webm;codecs=vp9,opus",
-    "video/webm;codecs=vp8",
-    "video/webm;codecs=vp9",
-    "video/webm",
-    "video/mp4;codecs=avc1",
-    "video/mp4",
-  ];
-}
-
-export function pickMimeType(): string {
-  if (typeof MediaRecorder === "undefined") return "video/webm";
-  for (const type of pickMimeTypeCandidates()) {
-    try {
-      if (MediaRecorder.isTypeSupported(type)) return type;
-    } catch {
-      // continue
-    }
-  }
-  return "";
-}
-
 function canUseTimeslicedRecorderChunks(mimeType: string): boolean {
   // WebM chunks emitted by MediaRecorder are safe to concatenate locally before
   // compression/upload. Browser MP4 chunks are not reliably self-contained; in
@@ -1589,21 +1570,17 @@ export class RecorderEngine {
       signal?: AbortSignal;
     } = {},
   ): Promise<Record<string, unknown> | undefined> {
-    const params = new URLSearchParams();
-    params.set("index", String(index));
-    if (extra.total !== undefined) params.set("total", String(extra.total));
-    params.set("isFinal", extra.isFinal ? "1" : "0");
-    if (extra.mimeType) params.set("mimeType", extra.mimeType);
-    if (extra.durationMs !== undefined)
-      params.set("durationMs", String(Math.round(extra.durationMs)));
-    if (extra.width !== undefined) params.set("width", String(extra.width));
-    if (extra.height !== undefined) params.set("height", String(extra.height));
-    if (extra.hasAudio !== undefined)
-      params.set("hasAudio", extra.hasAudio ? "1" : "0");
-    if (extra.hasCamera !== undefined)
-      params.set("hasCamera", extra.hasCamera ? "1" : "0");
-
-    const url = `${this.opts.uploadUrl}?${params.toString()}`;
+    const url = chunkUploadUrl(this.opts.uploadUrl, {
+      index,
+      total: extra.total,
+      isFinal: extra.isFinal,
+      mimeType: extra.mimeType,
+      durationMs: extra.durationMs,
+      width: extra.width,
+      height: extra.height,
+      hasAudio: extra.hasAudio,
+      hasCamera: extra.hasCamera,
+    });
 
     const body = await blob.arrayBuffer();
     let res: Response | null = null;

package/corpus/templates/clips/app/components/recorder/recording-toolbar.tsx

@@ -25,6 +25,10 @@ export interface RecordingToolbarProps {
 
 const TOOLBAR_WIDTH = 276;
 const TOOLBAR_HEIGHT = 56;
+// Drop the toolbar just below the centered "Recording your screen…" status
+// text (which sits at the viewport's vertical center) so the controls don't
+// overlap it.
+const TOOLBAR_TOP_OFFSET = 48;
 
 function formatElapsed(ms: number): string {
   const totalSeconds = Math.max(0, Math.floor(ms / 1000));
@@ -47,7 +51,7 @@ export function RecordingToolbar({
       ? { left: 16, top: 16, corner: "tl" }
       : {
           left: Math.max(16, (window.innerWidth - TOOLBAR_WIDTH) / 2),
-          top: Math.max(16, (window.innerHeight - TOOLBAR_HEIGHT) / 2),
+          top: Math.max(16, window.innerHeight / 2 + TOOLBAR_TOP_OFFSET),
           corner: "tl",
         },
   );

package/corpus/templates/clips/app/lib/countdown-audio-cue.ts

@@ -1,3 +1,5 @@
+import { scheduleReadyChime } from "@shared/recording-audio";
+
 export interface CountdownAudioCue {
   play(): Promise<void>;
   cleanup(): void;
@@ -8,56 +10,6 @@ const noopCountdownAudioCue: CountdownAudioCue = {
   cleanup() {},
 };
 
-/**
- * A soft, modern "ready" chime: a rising two-note (D5 → A5) with a faint high
- * shimmer. Each voice has a fast attack and a smooth exponential tail so it
- * reads as a gentle confirmation rather than a harsh beep. Kept under ~380ms so
- * it lands cleanly just before capture.
- */
-function scheduleCountdownTone(ctx: AudioContext): Promise<void> {
-  return new Promise<void>((resolve) => {
-    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);
-    }
-
-    let resolved = false;
-    const finish = () => {
-      if (resolved) return;
-      resolved = true;
-      resolve();
-    };
-    window.setTimeout(
-      finish,
-      Math.ceil((lastStop - ctx.currentTime) * 1000) + 60,
-    );
-  });
-}
-
 export function createCountdownAudioCue(): CountdownAudioCue {
   try {
     const AudioCtx =
@@ -87,7 +39,7 @@ export function createCountdownAudioCue(): CountdownAudioCue {
       try {
         if (ctx.state !== "running") await ctx.resume();
         if (closed) return;
-        await scheduleCountdownTone(ctx);
+        await scheduleReadyChime(ctx);
       } catch (err) {
         console.warn("[recorder] countdown cue unavailable:", err);
         cleanup();

package/corpus/templates/clips/changelog/2026-06-23-public-clips-now-play-inline-in-slack-connect-a-workspac.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-23
+---
+
+Clips for Slack is here — connect a workspace under Settings, then paste any public clip link in Slack and it unfurls as a playable video

package/corpus/templates/clips/chrome-extension/PERMISSIONS.md

@@ -0,0 +1,72 @@
+# Permissions model
+
+This extension ships **activeTab-only**: it deliberately does **not** request the
+broad `<all_urls>` host permission, and it has **no declarative `content_scripts`**.
+
+## Why
+
+A declarative content script on `<all_urls>` (and the matching `<all_urls>` host
+permission) triggers Chrome Web Store's **broad host permission in-depth review**,
+which significantly delays publishing and updates. We avoid that.
+
+## How the overlay gets on the page
+
+When the user clicks the extension and starts a recording, the background service
+worker injects the content script into the **launch tab** with
+`chrome.scripting.executeScript({ target: { tabId }, files: ["assets/content-script.js"] })`.
+That call is authorized by the **`activeTab`** permission, which Chrome grants for
+the tab that was active when the user invoked the extension — no broad host access
+needed. The content script then mounts the overlay iframes (countdown, camera
+bubble, controls). `web_accessible_resources` stays `<all_urls>` — that is **not**
+a host permission and does not trigger the review.
+
+Declared permissions: `activeTab`, `debugger`, `offscreen`, `scripting`,
+`storage`. Host permissions: only the configured Clips app + `forms.agent-native.com`
+
+- `localhost`/`127.0.0.1`.
+
+## What this costs
+
+- The overlay (countdown, camera bubble, recording controls) lives **only on the
+  tab the recording was launched from**. It does **not** follow the user to other
+  tabs during a full-screen or multi-tab recording.
+- **Recording itself is unaffected.** Capture runs in the offscreen document via
+  `getDisplayMedia`, independent of any tab's content script — full-screen,
+  window, and other-tab content are all still captured normally. Only the on-page
+  _overlay UI_ is scoped to the launch tab.
+
+## Re-enabling cross-tab follow
+
+The full cross-tab behavior is gated behind a single flag in
+`src/background.ts`:
+
+```ts
+const CROSS_TAB_FOLLOW = false; // flip to true
+```
+
+Flipping it to `true` restores the all-tabs broadcast in `broadcastMount()` /
+`broadcastUnmount()` and the `chrome.tabs.onActivated` follow listener. To make
+that actually work you must **also** restore broad host access so the worker can
+inject into arbitrary tabs. Two options:
+
+1. **Static (simplest, but in-depth review):** re-add to `public/manifest.json`:
+   - `"<all_urls>"` in `host_permissions`, and
+   - the `content_scripts` block:
+     ```json
+     "content_scripts": [
+       {
+         "matches": ["<all_urls>"],
+         "js": ["assets/content-script.js"],
+         "run_at": "document_idle",
+         "all_frames": false
+       }
+     ],
+     ```
+
+2. **Optional (preferred — keeps the default install lean):** declare
+   `"optional_host_permissions": ["<all_urls>"]` in the manifest and call
+   `chrome.permissions.request({ origins: ["<all_urls>"] })` at runtime (e.g. from
+   a settings toggle) before enabling follow. The user grants the broad access
+   explicitly, only if they want cross-tab overlays.
+
+After any change: `pnpm build`, then re-zip `dist/`.

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

@@ -23,16 +23,7 @@
     "https://clips.agent-native.com/*",
     "https://forms.agent-native.com/*",
     "http://localhost/*",
-    "http://127.0.0.1/*",
-    "<all_urls>"
-  ],
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["assets/content-script.js"],
-      "run_at": "document_idle",
-      "all_frames": false
-    }
+    "http://127.0.0.1/*"
   ],
   "web_accessible_resources": [
     {

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

@@ -215,6 +215,17 @@ let overlayBaseEpochMs = 0;
 // show the on-page bubble for camera-only mode (recordingShowsBubble).
 let overlayShowsBubble = false;
 let recordingShowsBubble = false;
+// Cross-tab follow: when true, the overlay is pushed to whatever tab the user
+// switches to mid-recording. That requires "<all_urls>" + a declarative content
+// script, which triggers Chrome's broad-host in-depth review. Shipped OFF
+// (activeTab-only: the overlay lives on the launch tab the user invoked the
+// extension from). Capture is unaffected — it runs in the offscreen document via
+// getDisplayMedia regardless. See PERMISSIONS.md to re-enable.
+// Typed `boolean` (not inferred literal `false`) so the cross-tab branches below
+// don't read as unreachable code; flip the value to re-enable. See PERMISSIONS.md.
+const CROSS_TAB_FOLLOW: boolean = false;
+// The tab the recording was launched from — the only tab activeTab lets us touch.
+let overlayTabId: number | null = null;
 let countdownEndsAtMs = 0;
 
 function desiredParts(): OverlayPart[] {
@@ -292,6 +303,7 @@ function persistOverlay(): Promise<void> {
       showsBubble: overlayShowsBubble,
       recordingShowsBubble,
       countdownEndsAtMs,
+      overlayTabId,
     },
   }).catch(() => undefined);
 }
@@ -313,6 +325,7 @@ async function restoreRuntimeState(): Promise<void> {
         showsBubble?: boolean;
         recordingShowsBubble?: boolean;
         countdownEndsAtMs?: number;
+        overlayTabId?: number;
       }
     | undefined;
   if (rt && typeof rt.phase === "string" && overlayPhase === "idle") {
@@ -325,6 +338,7 @@ async function restoreRuntimeState(): Promise<void> {
     recordingShowsBubble = Boolean(rt.recordingShowsBubble);
     countdownEndsAtMs =
       typeof rt.countdownEndsAtMs === "number" ? rt.countdownEndsAtMs : 0;
+    overlayTabId = typeof rt.overlayTabId === "number" ? rt.overlayTabId : null;
   }
 
   if (overlayPhase !== "idle" && activeNativeRecording) {
@@ -393,6 +407,13 @@ function allTabs(): Promise<chrome.tabs.Tab[]> {
 }
 
 async function broadcastMount(): Promise<void> {
+  // activeTab-only: keep the overlay on the launch tab (re-ensures the injected
+  // content script too, so it survives a worker suspend). Cross-tab broadcast is
+  // gated behind CROSS_TAB_FOLLOW because it needs broad host access.
+  if (!CROSS_TAB_FOLLOW) {
+    if (overlayTabId !== null) await mountOverlayOnTab(overlayTabId);
+    return;
+  }
   const parts = desiredParts();
   const tabs = await allTabs();
   await Promise.all(
@@ -405,6 +426,11 @@ async function broadcastMount(): Promise<void> {
 }
 
 async function broadcastUnmount(): Promise<void> {
+  if (!CROSS_TAB_FOLLOW) {
+    if (overlayTabId !== null)
+      await sendTabMessage(overlayTabId, { type: "CLIPS_OVERLAY_UNMOUNT" });
+    return;
+  }
   const tabs = await allTabs();
   await Promise.all(
     tabs.map((tab) =>
@@ -957,6 +983,7 @@ async function armRecording(args: {
   setRecordingFlag(true);
   // Clicking the icon now stops & saves immediately instead of opening the popup.
   setActionPopup("");
+  overlayTabId = tab.id as number;
   await mountOverlayOnTab(tab.id as number);
   broadcastOverlayState();
 
@@ -1025,7 +1052,12 @@ async function armRecording(args: {
   //    suspendable worker) and reports "recording" back when it actually starts.
   const authToken = (await readAuthSession(settings))?.token;
   console.log("[clips-bg] arm: created row", created.id, "auth?", !!authToken);
-  const startDelayMs = Math.max(0, countdownEndsAtMs - nowMs());
+  // The on-page countdown drives the actual start (it sends COUNTDOWN_DONE at
+  // "Go"). This offscreen timer is only a FALLBACK. When a camera is involved the
+  // countdown waits for the camera feed before it even shows "3" (the content
+  // script holds it, with its own 12s cap), so the fallback must be generous
+  // enough not to start the recorder mid-connect; otherwise a short pre-roll.
+  const startDelayMs = cameraInvolved ? 20000 : COUNTDOWN_SECONDS * 1000 + 1000;
   try {
     await sendOffscreenMessage({
       type: "CLIPS_OFFSCREEN_BEGIN",
@@ -2028,6 +2060,7 @@ async function dispatchRuntimeMessage(message: unknown): Promise<unknown> {
 // switch tabs (programmatic injection covers tabs opened before the extension
 // loaded; declared content scripts cover navigations).
 chrome.tabs.onActivated.addListener((info) => {
+  if (!CROSS_TAB_FOLLOW) return; // activeTab-only: overlay stays on the launch tab
   void (async () => {
     await ensureRestored();
     if (overlayPhase === "idle" || !activeNativeRecording) return;