@agent-native/core 0.72.4 → 0.73.0

package/corpus/templates/clips/app/components/player/player-controls.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type FocusEvent } from "react";
 import {
   IconPlayerPlay,
   IconPlayerPause,
@@ -24,6 +24,11 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { PLAYBACK_SPEED_OPTIONS } from "@/lib/playback-speed";
 
 export const SPEED_OPTIONS = PLAYBACK_SPEED_OPTIONS;
@@ -85,7 +90,14 @@ export function PlayerControls(props: PlayerControlsProps) {
     menuPortalContainer,
   } = props;
 
-  const [volumeHover, setVolumeHover] = useState(false);
+  const [volumePopoverOpen, setVolumePopoverOpen] = useState(false);
+
+  const handleVolumeBlur = (event: FocusEvent<HTMLDivElement>) => {
+    const nextFocusedElement = event.relatedTarget as Node | null;
+    if (!event.currentTarget.contains(nextFocusedElement)) {
+      setVolumePopoverOpen(false);
+    }
+  };
 
   return (
     <div className="px-3 pb-2 pt-10 bg-gradient-to-t from-black/80 via-black/50 to-transparent">
@@ -112,38 +124,56 @@ export function PlayerControls(props: PlayerControlsProps) {
         </IconBtn>
 
         <div
-          className="flex items-center gap-1"
-          onMouseEnter={() => setVolumeHover(true)}
-          onMouseLeave={() => setVolumeHover(false)}
+          className="relative flex shrink-0 items-center"
+          onMouseEnter={() => setVolumePopoverOpen(true)}
+          onMouseLeave={() => setVolumePopoverOpen(false)}
+          onFocus={() => setVolumePopoverOpen(true)}
+          onBlur={handleVolumeBlur}
         >
-          <IconBtn onClick={onToggleMute} tooltip="Mute (M)">
-            {muted || volume === 0 ? (
-              <IconVolumeOff className="h-5 w-5" />
-            ) : (
-              <IconVolume className="h-5 w-5" />
-            )}
-          </IconBtn>
-          <div
-            className={cn(
-              "transition-all overflow-hidden",
-              volumeHover ? "w-20" : "w-0",
-            )}
-          >
-            <input
-              type="range"
-              min={0}
-              max={1}
-              step={0.05}
-              value={muted ? 0 : volume}
-              onChange={(e) => onVolumeChange(parseFloat(e.target.value))}
-              className="w-full accent-primary cursor-pointer"
-            />
-          </div>
+          <Popover open={volumePopoverOpen} onOpenChange={setVolumePopoverOpen}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                onClick={onToggleMute}
+                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-white hover:bg-white/10"
+                aria-label={muted || volume === 0 ? "Unmute" : "Mute"}
+              >
+                {muted || volume === 0 ? (
+                  <IconVolumeOff className="h-5 w-5" />
+                ) : (
+                  <IconVolume className="h-5 w-5" />
+                )}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              side="top"
+              align="center"
+              sideOffset={8}
+              portalled={false}
+              className="w-auto border-white/10 bg-black/90 p-2 text-white shadow-2xl backdrop-blur-md"
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+            >
+              <div className="flex h-24 w-8 items-center justify-center">
+                <input
+                  aria-label="Volume"
+                  aria-orientation="vertical"
+                  type="range"
+                  min={0}
+                  max={1}
+                  step={0.05}
+                  value={muted ? 0 : volume}
+                  onChange={(e) => onVolumeChange(parseFloat(e.target.value))}
+                  className="h-2 w-24 -rotate-90 cursor-pointer accent-white"
+                />
+              </div>
+            </PopoverContent>
+          </Popover>
         </div>
 
-        <span className="text-xs font-mono tabular-nums text-white/90 px-2">
+        <span className="shrink-0 whitespace-nowrap px-1 font-mono text-[10px] leading-none tabular-nums text-white/85 sm:text-[11px]">
           {msToClock(currentMs)}
-          <span className="text-white/50"> / {msToClock(durationMs)}</span>
+          <span className="text-white/50">/{msToClock(durationMs)}</span>
         </span>
 
         <div className="flex-1" />
@@ -162,7 +192,7 @@ export function PlayerControls(props: PlayerControlsProps) {
           <Tooltip>
             <TooltipTrigger asChild>
               <DropdownMenuTrigger asChild>
-                <button className="h-8 px-2 rounded-md hover:bg-white/10 text-xs font-medium tabular-nums">
+                <button className="h-8 shrink-0 rounded-md px-2 text-xs font-medium tabular-nums hover:bg-white/10">
                   {speed}x
                 </button>
               </DropdownMenuTrigger>
@@ -237,7 +267,7 @@ function IconBtn({
         <button
           onClick={onClick}
           className={cn(
-            "h-8 w-8 rounded-md flex items-center justify-center",
+            "flex h-8 w-8 shrink-0 items-center justify-center rounded-md",
             active ? "bg-white/20 text-white" : "text-white hover:bg-white/10",
           )}
         >

package/corpus/templates/clips/app/lib/capture-install-options.ts

@@ -1,14 +1,48 @@
-function isTruthy(value: unknown): boolean {
+function isFalsy(value: unknown): boolean {
   if (typeof value !== "string") return false;
-  return ["1", "true", "yes", "on"].includes(value.trim().toLowerCase());
+  return ["0", "false", "no", "off"].includes(value.trim().toLowerCase());
+}
+
+function normalizeHostname(hostname: string | undefined): string {
+  return (hostname ?? "").trim().toLowerCase();
+}
+
+export function supportsPublishedClipsChromeExtensionHost(
+  hostname: string | undefined,
+): boolean {
+  const normalized = normalizeHostname(hostname);
+  return (
+    normalized === "clips.agent-native.com" ||
+    normalized === "localhost" ||
+    normalized === "127.0.0.1"
+  );
+}
+
+export function resolveClipsChromeExtensionEnabled({
+  enabledSetting,
+  hostname,
+}: {
+  enabledSetting?: string;
+  hostname?: string;
+}): boolean {
+  const normalizedSetting = enabledSetting?.trim();
+  if (normalizedSetting) return !isFalsy(normalizedSetting);
+  return supportsPublishedClipsChromeExtensionHost(hostname);
+}
+
+function getCurrentHostname(): string | undefined {
+  return typeof window === "undefined" ? undefined : window.location.hostname;
 }
 
 const chromeExtensionUrl =
   import.meta.env.VITE_CLIPS_CHROME_EXTENSION_URL?.trim() ??
   "https://chromewebstore.google.com/detail/baoipacpchggcdigagnajakiidcgcffn";
 
-export const clipsChromeExtensionEnabled = isTruthy(
-  import.meta.env.VITE_CLIPS_CHROME_EXTENSION_ENABLED,
-);
+// The published extension manifest only trusts first-party Clips/local origins.
+// Custom deployments can opt in after publishing a matching extension/listing.
+export const clipsChromeExtensionEnabled = resolveClipsChromeExtensionEnabled({
+  enabledSetting: import.meta.env.VITE_CLIPS_CHROME_EXTENSION_ENABLED,
+  hostname: getCurrentHostname(),
+});
 
 export const clipsChromeExtensionUrl = chromeExtensionUrl || null;

package/corpus/templates/clips/app/routes/download.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import {
-  IconBrowser,
+  IconBrandChrome,
   IconBrandApple,
   IconBrandWindows,
   IconExternalLink,
@@ -248,7 +248,7 @@ export default function DownloadPage() {
             <section className="mt-10 w-full max-w-xl rounded-2xl border border-border bg-card p-4 text-left shadow-sm">
               <div className="flex items-start gap-3">
                 <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-                  <IconBrowser className="h-4 w-4" />
+                  <IconBrandChrome className="h-4 w-4" />
                 </div>
                 <div className="min-w-0 flex-1">
                   <h2 className="text-sm font-semibold text-foreground">

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

@@ -253,7 +253,7 @@ function AgentDiscovery({
     title: recording.title,
     agentContextUrl,
     instructions:
-      "Fetch agentContextUrl for timestamped transcript segments and frame API links.",
+      "Fetch agentContextUrl for the transcript and JPEG frame URLs. Fetch the frame URLs to SEE the screen, not just read the transcript.",
   };
 
   return (

package/corpus/templates/clips/changelog/2026-06-24-inline-slack-playback-controls-no-longer-shift-when-adjustin.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-24
+---
+
+Inline Slack playback controls no longer shift when adjusting volume, and compact clip times stay on one line.

package/corpus/templates/clips/changelog/2026-06-24-shared-clips-now-expose-their-full-console-log-stream-all-le.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-24
+---
+
+Shared clips now expose their full console log stream (all levels, redacted) to connected agents, not just warnings and errors

package/corpus/templates/clips/changelog/2026-06-24-shared-clips-now-expose-their-full-fetch-xhr-network-request.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-24
+---
+
+Shared clips now expose their full fetch/XHR network request stream (method, sanitized URL, status, duration) to connected agents, not just failed requests

package/corpus/templates/clips/changelog/2026-06-24-the-chrome-extension-option-now-only-appears-on-supported-hosts.md

@@ -0,0 +1,5 @@
+---
+"clips": fixed
+---
+
+The Chrome extension option now only appears on supported Clips hosts unless a custom deployment explicitly enables it.

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

@@ -28,6 +28,8 @@ Diagnostics are bounded and redacted before they are saved. Clips does not colle
 ## Permission Justification
 
 - `activeTab`: lets the toolbar action identify the user-selected active tab after the user clicks the extension.
+- `scripting`: injects the on-page recording overlay (countdown, camera bubble, recording controls) into the active tab the user starts recording from, and removes it when the recording ends — via `chrome.scripting.executeScript` authorized by `activeTab`. Used only after the user starts a recording; never injected into background or arbitrary tabs, and no broad host permission is requested.
+- `offscreen`: runs an offscreen document that performs the actual screen and camera capture via `getDisplayMedia`/`getUserMedia`, which a service worker cannot call directly.
 - `debugger`: attaches to only the user-selected tab while a Clips recording is active, then detaches on stop/cancel. It is used to collect console messages, JavaScript exceptions, and fetch/XHR method, URL, status, timing, and failure metadata. It does not read request or response bodies.
 - `storage`: remembers the user's default Clips app URL, capture source, camera toggle, and developer-log preference.
 
@@ -50,21 +52,24 @@ Build the latest Chrome Web Store ZIP from the repo root:
 pnpm --filter clips-chrome-extension package
 ```
 
-Upload the generated artifact:
+Upload the generated artifact (the version matches `public/manifest.json`; the
+Chrome Web Store requires each upload to use a higher version than the last):
 
 ```txt
-templates/clips/chrome-extension/releases/clips-chrome-extension-0.1.0.zip
+templates/clips/chrome-extension/releases/clips-chrome-extension-0.1.2.zip
 ```
 
 ## Web App Rollout Gate
 
-Keep the web app's Chrome extension UI hidden until the Web Store listing is
-approved and there is a stable public URL.
+The Web Store listing is live, and the web app shows the Chrome extension
+option by default on hosts supported by the published manifest
+(`clips.agent-native.com`, `localhost`, and `127.0.0.1`). Other deployments hide
+the option unless they explicitly opt in with a matching extension/listing.
 
-- `VITE_CLIPS_CHROME_EXTENSION_ENABLED=1` reveals the Chrome option beside
-  Clips desktop prompts.
+- `VITE_CLIPS_CHROME_EXTENSION_ENABLED=1` shows the Chrome option on custom
+  deployments that have a compatible extension.
+- `VITE_CLIPS_CHROME_EXTENSION_ENABLED=0` (or `false`/`no`/`off`) hides the
+  Chrome option even on supported first-party/local hosts.
 - `VITE_CLIPS_CHROME_EXTENSION_URL` overrides the default install URL
   (`https://chromewebstore.google.com/detail/baoipacpchggcdigagnajakiidcgcffn`)
   if a deployment uses a different listing.
-- Leave both unset while submitting the draft so production continues to send
-  users directly to the desktop app.

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.0",
+  "version": "0.1.2",
   "description": "Start Clips recordings from Chrome with optional redacted console and network diagnostics.",
   "minimum_chrome_version": "116",
   "action": {

package/corpus/templates/clips/chrome-extension/scripts/package.ts

@@ -1,4 +1,4 @@
-import { mkdir, rm } from "node:fs/promises";
+import { mkdir, readFile, rm } from "node:fs/promises";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { execFile } from "node:child_process";
@@ -8,7 +8,20 @@ const execFileAsync = promisify(execFile);
 const root = resolve(dirname(fileURLToPath(import.meta.url)), "..");
 const distDir = resolve(root, "dist");
 const releaseDir = resolve(root, "releases");
-const zipPath = resolve(releaseDir, "clips-chrome-extension-0.1.0.zip");
+
+// Derive the artifact name from the built manifest so the zip version never
+// drifts from the source of truth. The Chrome Web Store rejects an upload whose
+// version is not higher than the currently published one.
+const manifest = JSON.parse(
+  await readFile(resolve(distDir, "manifest.json"), "utf8"),
+) as { version?: string };
+const version = manifest.version;
+if (!version) {
+  throw new Error(
+    "dist/manifest.json is missing a version; run the build first",
+  );
+}
+const zipPath = resolve(releaseDir, `clips-chrome-extension-${version}.zip`);
 
 await mkdir(releaseDir, { recursive: true });
 await rm(zipPath, { force: true });

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

@@ -167,16 +167,6 @@ body {
 
 /* ---------- Toolbar (vertical left pill, desktop layout) ---------- */
 
-@keyframes rec-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.3;
-  }
-}
-
 .toolbar-v {
   /* Fill the iframe so the (opaque) iframe canvas is fully covered by the pill —
      the iframe is clipped to this same 20px radius in styleFrame, so no canvas
@@ -235,28 +225,17 @@ body {
 }
 
 .toolbar-v-time {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
+  width: 40px;
+  line-height: 1;
   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;

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

@@ -281,11 +281,9 @@ function initToolbar(): void {
 
   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);
+  time.append(clock);
 
   const pauseBtn = makeBtn("toolbar-v-pause", "Pause", ICONS.pause, () => {
     if (state.phase === "paused") send("CLIPS_OVERLAY_RESUME");

package/corpus/templates/clips/server/lib/public-agent-context.ts

@@ -329,36 +329,78 @@ export async function loadAgentBrowserDiagnostics(recordingId: string) {
   return parseBrowserDiagnosticsRow(row);
 }
 
+// Most-recent console logs / network requests surfaced in the public agent
+// context. Bounded to keep the agent payload small; the summary still reports
+// the true total counts.
+const MAX_PUBLIC_AGENT_CONSOLE_LOGS = 100;
+const MAX_PUBLIC_AGENT_NETWORK_REQUESTS = 100;
+// Curated warn/error highlights and failed-request highlights.
+const MAX_PUBLIC_AGENT_DIAGNOSTIC_ISSUES = 20;
+
+function toPublicConsoleEntry(
+  entry: BrowserDiagnosticsData["consoleLogs"][number],
+) {
+  return {
+    timestampMs: entry.elapsedMs,
+    level: entry.level,
+    message: entry.message,
+  };
+}
+
+function toPublicNetworkEntry(
+  entry: BrowserDiagnosticsData["networkRequests"][number],
+) {
+  return {
+    timestampMs: entry.elapsedMs,
+    type: entry.type,
+    method: entry.method,
+    // Already sanitized at capture time: path is kept, query values are
+    // redacted, and auth/hash are stripped.
+    url: entry.url,
+    status: entry.status ?? null,
+    error: entry.error ?? null,
+    durationMs: entry.durationMs,
+  };
+}
+
+function isFailedNetworkRequest(
+  entry: BrowserDiagnosticsData["networkRequests"][number],
+): boolean {
+  return (
+    Boolean(entry.error) ||
+    (typeof entry.status === "number" && entry.status >= 400)
+  );
+}
+
 function compactBrowserDiagnostics(diagnostics: BrowserDiagnosticsData | null) {
   if (!diagnostics) return null;
+  // Full console stream (all levels: debug/log/info/warn/error), redacted at
+  // capture time and bounded to the most-recent entries.
+  const consoleLogs = diagnostics.consoleLogs
+    .slice(-MAX_PUBLIC_AGENT_CONSOLE_LOGS)
+    .map(toPublicConsoleEntry);
+  // Warn/error highlights kept as a separate convenience list so agents can
+  // jump straight to problems without scanning the full stream.
   const consoleIssues = diagnostics.consoleLogs
     .filter((entry) => entry.level === "warn" || entry.level === "error")
-    .slice(-20)
-    .map((entry) => ({
-      timestampMs: entry.elapsedMs,
-      level: entry.level,
-      message: entry.message,
-    }));
+    .slice(-MAX_PUBLIC_AGENT_DIAGNOSTIC_ISSUES)
+    .map(toPublicConsoleEntry);
+  // Full network stream (fetch + XHR), redacted at capture time and bounded.
+  const networkRequests = diagnostics.networkRequests
+    .slice(-MAX_PUBLIC_AGENT_NETWORK_REQUESTS)
+    .map(toPublicNetworkEntry);
+  // Failed-request highlights so agents can jump straight to problems.
   const failedNetworkRequests = diagnostics.networkRequests
-    .filter(
-      (entry) =>
-        Boolean(entry.error) ||
-        (typeof entry.status === "number" && entry.status >= 400),
-    )
-    .slice(-20)
-    .map((entry) => ({
-      timestampMs: entry.elapsedMs,
-      type: entry.type,
-      method: entry.method,
-      status: entry.status ?? null,
-      error: entry.error ?? null,
-      durationMs: entry.durationMs,
-    }));
+    .filter(isFailedNetworkRequest)
+    .slice(-MAX_PUBLIC_AGENT_DIAGNOSTIC_ISSUES)
+    .map(toPublicNetworkEntry);
   return {
     summary: diagnostics.summary,
+    consoleLogs,
     consoleIssues,
+    networkRequests,
     failedNetworkRequests,
-    note: "Diagnostics are redacted and bounded; public context omits page URLs, request URLs, headers, bodies, cookies, and query values.",
+    note: "Console logs include all levels (debug/log/info/warn/error). Network requests include method, sanitized URL (path kept, query values redacted), status, and duration. Diagnostics are bounded; the recording's own page URL, request headers, request/response bodies, and cookies are omitted.",
   };
 }
 
@@ -403,7 +445,7 @@ export function buildPublicAgentContext({
     "Use transcript.segments for timestamped spoken context.",
     ...(browserDiagnostics
       ? [
-          "Use browserDiagnostics for redacted console warnings/errors and failed network requests captured during the recording.",
+          "Use browserDiagnostics.consoleLogs for the redacted console stream (all levels: debug/log/info/warn/error) and browserDiagnostics.networkRequests for the fetch/XHR requests (method, sanitized URL, status, duration) captured during the recording. browserDiagnostics.consoleIssues highlights just the warnings/errors, and browserDiagnostics.failedNetworkRequests highlights failed requests.",
         ]
       : []),
     ...(isLoomEmbedBacked
@@ -411,8 +453,9 @@ export function buildPublicAgentContext({
           "This clip is a legacy Loom embed import; frame extraction is not available through Clips until it is reimported as a Clips-hosted video.",
         ]
       : [
-          "Use apis.frame.urlTemplate with atMs to fetch a JPEG frame when the spoken transcript references something visible on screen.",
-          "Prefer recommendedFrames first, then request additional frames around transcript timestamps that matter for the task.",
+          "This clip is readable as both text (transcript) and images (JPEG frames) — you can hear AND see it.",
+          "To SEE the screen, GET apis.frame.urlTemplate with atMs (returns image/jpeg). Start with recommendedFrames, then fetch additional frames around transcript timestamps that matter for the task.",
+          "If you cannot load an image from a URL, you will only have the transcript — tell the user to open the clip in an image-capable agent (ChatGPT, Claude Code, Cursor, Codex) or to upload a frame image directly so you can see it.",
         ]),
   ];
 

package/corpus/templates/mail/server/plugins/auth.ts

@@ -39,7 +39,10 @@ export default createAuthPlugin({
   googleSignInNotice: {
     host: "mail.agent-native.com",
     title: "Google may show a warning",
-    body: "This hosted demo uses Agent-Native's shared Google app for Gmail access, so Google may ask you to confirm before continuing.",
+    body: [
+      "You'll see this screen because this demo uses Agent-Native's Google app, not a Google-reviewed public app.",
+      "It's safe to continue: click Advanced, then “Go to … (unsafe)” to finish signing in.",
+    ],
     continueLabel: "Continue to Google",
     cancelLabel: "Run locally",
   },