@agent-native/core 0.70.0 → 0.70.2

package/corpus/templates/assets/app/routes/_index.tsx

@@ -1,12 +1,49 @@
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   AgentChatSurface,
   getBrowserTabId,
   markAgentChatHomeHandoff,
+  readClientAppState,
+  sendToAgentChat,
+  writeClientAppState,
 } from "@agent-native/core/client";
 import { IconPhoto, IconSparkles, IconVideo } from "@tabler/icons-react";
 import { ASSETS_CHAT_STORAGE_KEY } from "@/lib/chat";
 
+// The composer's model picker shows the chat LLM (Claude/OpenAI/Gemini). The
+// Assets app also drives a separate *image* model, so we surface it in the same
+// menu — otherwise "Claude" reads as the image generator, which it isn't. The
+// choice persists in per-user application state so the generate-image action
+// (server-side) can read it as the default model. Values must be valid
+// IMAGE_MODELS ids from shared/api.
+const IMAGE_MODEL_STATE_KEY = "imageGenerationModel";
+const DEFAULT_IMAGE_MODEL = "gemini-3.1-flash-image";
+const IMAGE_MODEL_OPTIONS = [
+  { value: "gemini-3-pro-image", label: "Gemini 3 Pro · best quality" },
+  { value: "gemini-3.1-flash-image", label: "Gemini 3.1 Flash · fast" },
+  { value: "gemini-2.5-flash-image", label: "Gemini 2.5 Flash" },
+] as const;
+
+// Empty-state starters. Clicking one prefills the composer (without sending) so
+// the user can finish the thought instead of staring at a chip that does
+// nothing. `submit: false` = prefill only; `openSidebar: false` keeps focus on
+// the page-level Create surface.
+const CHAT_STARTERS = [
+  {
+    key: "image",
+    Icon: IconPhoto,
+    label: "image",
+    prompt: "Create an image of ",
+  },
+  {
+    key: "video",
+    Icon: IconVideo,
+    label: "video",
+    prompt: "Create a video of ",
+  },
+  { key: "refine", Icon: IconSparkles, label: "refine", prompt: "Refine " },
+] as const;
+
 const SEO_TITLE =
   "Agent-Native Assets - Open Source AI asset library for brand-safe images and video";
 const SEO_DESCRIPTION =
@@ -25,6 +62,8 @@ export function meta() {
 }
 
 export default function CreatePage() {
+  const [imageModel, setImageModel] = useState<string>(DEFAULT_IMAGE_MODEL);
+
   useEffect(() => {
     function handleChatRunning(event: Event) {
       const detail = (event as CustomEvent).detail;
@@ -38,6 +77,34 @@ export default function CreatePage() {
       window.removeEventListener("agentNative.chatRunning", handleChatRunning);
   }, []);
 
+  // Hydrate the saved image-model default so the picker reflects the user's
+  // last choice across sessions.
+  useEffect(() => {
+    let cancelled = false;
+    void readClientAppState<{ model?: string }>(IMAGE_MODEL_STATE_KEY)
+      .then((state) => {
+        const stored = state?.model;
+        if (
+          !cancelled &&
+          stored &&
+          IMAGE_MODEL_OPTIONS.some((option) => option.value === stored)
+        ) {
+          setImageModel(stored);
+        }
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const handleImageModelChange = useCallback((value: string) => {
+    setImageModel(value);
+    void writeClientAppState(IMAGE_MODEL_STATE_KEY, { model: value }).catch(
+      () => {},
+    );
+  }, []);
+
   return (
     <div className="flex h-full min-h-0 flex-col bg-background">
       <AgentChatSurface
@@ -47,6 +114,15 @@ export default function CreatePage() {
         defaultMode="chat"
         storageKey={ASSETS_CHAT_STORAGE_KEY}
         browserTabId={getBrowserTabId()}
+        imageModelMenu={{
+          value: imageModel,
+          options: IMAGE_MODEL_OPTIONS.map((option) => ({
+            value: option.value,
+            label: option.label,
+          })),
+          onChange: handleImageModelChange,
+          label: "Image model",
+        }}
         showHeader={false}
         showTabBar={false}
         dynamicSuggestions={false}
@@ -63,19 +139,23 @@ export default function CreatePage() {
               Start with a hero image, product reveal, reference edit, or a
               direction you want to explore.
             </p>
-            <div className="assets-create-chat-pill-row" aria-hidden="true">
-              <span>
-                <IconPhoto className="size-3.5" />
-                image
-              </span>
-              <span>
-                <IconVideo className="size-3.5" />
-                video
-              </span>
-              <span>
-                <IconSparkles className="size-3.5" />
-                refine
-              </span>
+            <div className="assets-create-chat-pill-row">
+              {CHAT_STARTERS.map(({ key, Icon, label, prompt }) => (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() =>
+                    sendToAgentChat({
+                      message: prompt,
+                      submit: false,
+                      openSidebar: false,
+                    })
+                  }
+                >
+                  <Icon className="size-3.5" />
+                  {label}
+                </button>
+              ))}
             </div>
           </div>
         }

package/corpus/templates/assets/changelog/2026-06-23-chat-dates-in-the-sidebar-no-longer-wrap-onto-two-lines.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+Chat dates in the sidebar no longer wrap onto two lines.

package/corpus/templates/assets/changelog/2026-06-23-clicking-image-video-or-refine-on-the-start-screen-now-drops.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+Clicking image, video, or refine on the start screen now drops a starter prompt into the composer instead of doing nothing.

package/corpus/templates/assets/changelog/2026-06-23-pick-your-image-generation-model-right-from-the-chat-model-m.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-23
+---
+
+Pick your image-generation model right from the chat model menu — it's shown alongside the chat model so it's clear which is which.

package/corpus/templates/clips/app/components/library/library-grid.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
-import { cn } from "@/lib/utils";
 import {
   useFolders,
   useRecordings,
@@ -34,7 +33,6 @@ import {
   DialogTitle,
   DialogFooter,
 } from "@/components/ui/dialog";
-import { IconChecks } from "@tabler/icons-react";
 import { ShareRecordingDialog } from "@/components/player/share-dialog";
 
 interface LibraryGridProps {
@@ -107,7 +105,7 @@ export function LibraryGrid({
 }: LibraryGridProps) {
   const [sort, setSort] = useState<SortKey>("recent");
   const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [selectionMode, setSelectionMode] = useState(false);
+  const selectionMode = selected.size > 0;
   const [renamingRec, setRenamingRec] = useState<RecordingSummary | null>(null);
   const [renameValue, setRenameValue] = useState("");
   const [sharingRec, setSharingRec] = useState<RecordingSummary | null>(null);
@@ -202,7 +200,6 @@ export function LibraryGrid({
 
   const clearSelection = () => {
     setSelected(new Set());
-    setSelectionMode(false);
   };
 
   const moveSelected = async (targetFolderId: string | null) => {
@@ -337,22 +334,6 @@ export function LibraryGrid({
         </div>
         <div className="ml-auto flex shrink-0 items-center gap-2">
           {extraActions}
-          <Button
-            variant={selectionMode ? "default" : "outline"}
-            size="sm"
-            className={cn(
-              "h-8 gap-1.5",
-              selectionMode &&
-                "bg-primary text-primary-foreground hover:bg-primary/90",
-            )}
-            onClick={() => {
-              setSelectionMode((v) => !v);
-              if (selectionMode) setSelected(new Set());
-            }}
-          >
-            <IconChecks className="h-3.5 w-3.5" />
-            Select
-          </Button>
           <SortMenu value={sort} onChange={setSort} />
         </div>
       </PageHeader>

package/corpus/templates/clips/app/components/recorder/countdown-overlay.tsx

@@ -1,13 +1,12 @@
-import { useEffect, useRef, useState } from "react";
-import { IconPlayerPause, IconPlayerPlay, IconX } from "@tabler/icons-react";
-import { Button } from "@/components/ui/button";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { IconPlayerSkipForward, IconX } from "@tabler/icons-react";
 
 export interface CountdownOverlayProps {
   /** Total seconds to count down from. Default 3. */
   seconds?: number;
-  /** Called when the countdown reaches 1. */
+  /** Called when the countdown reaches 1 (drives the recording-start cue). */
   onOneSecond?: () => void;
-  /** Called when the countdown reaches 0. */
+  /** Called when the countdown reaches 0 (or the user skips). */
   onComplete: () => void;
   /** Called when the user cancels before recording begins. */
   onCancel: () => void;
@@ -20,77 +19,102 @@ export function CountdownOverlay({
   onCancel,
 }: CountdownOverlayProps) {
   const [remaining, setRemaining] = useState(seconds);
-  const [paused, setPaused] = useState(false);
-  // Ensure onComplete fires exactly once for the lifetime of the countdown,
-  // even if its identity changes while `remaining` is already 0 (which would
-  // otherwise re-run this effect and call it again).
+  // Ensure each callback fires exactly once for the lifetime of the countdown,
+  // even if identities change or the user skips while the timer is mid-flight.
   const hasCompletedRef = useRef(false);
   const hasPlayedOneSecondCueRef = useRef(false);
 
-  useEffect(() => {
-    if (remaining !== 1 || hasPlayedOneSecondCueRef.current) return;
+  const playOneSecondCue = useCallback(() => {
+    if (hasPlayedOneSecondCueRef.current) return;
     hasPlayedOneSecondCueRef.current = true;
     onOneSecond?.();
-  }, [remaining, onOneSecond]);
+  }, [onOneSecond]);
+
+  const complete = useCallback(() => {
+    if (hasCompletedRef.current) return;
+    hasCompletedRef.current = true;
+    onComplete();
+  }, [onComplete]);
+
+  // Skip the rest of the countdown and start recording immediately. Still play
+  // the start cue so the user gets the same audible confirmation they'd get if
+  // the countdown had run to zero.
+  const handleSkip = useCallback(() => {
+    playOneSecondCue();
+    complete();
+  }, [playOneSecondCue, complete]);
+
+  useEffect(() => {
+    if (remaining === 1) playOneSecondCue();
+  }, [remaining, playOneSecondCue]);
 
   useEffect(() => {
     if (remaining <= 0) {
-      if (!hasCompletedRef.current) {
-        hasCompletedRef.current = true;
-        onComplete();
-      }
+      complete();
       return;
     }
-    if (paused) return;
     const id = window.setTimeout(() => setRemaining((v) => v - 1), 1000);
     return () => window.clearTimeout(id);
-  }, [remaining, onComplete, paused]);
+  }, [remaining, complete]);
+
+  // Keyboard parity with the desktop overlay: Enter starts now, Esc cancels.
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleSkip();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        onCancel();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [handleSkip, onCancel]);
+
+  const controlClasses =
+    "flex h-16 w-16 items-center justify-center rounded-full border border-white/25 bg-white/5 text-white/90 shadow-lg backdrop-blur transition-colors hover:border-white/60 hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70";
 
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm"
+      className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-black/70 backdrop-blur-sm"
       aria-live="polite"
       aria-label={`Recording starts in ${remaining}`}
     >
-      <div className="flex flex-col items-center gap-6">
+      <div className="flex items-center gap-10 sm:gap-14">
+        <button
+          type="button"
+          onClick={onCancel}
+          aria-label="Cancel recording"
+          className={controlClasses}
+        >
+          <IconX className="h-7 w-7" stroke={1.75} />
+        </button>
+
         <div
           key={remaining}
-          className="flex h-48 w-48 items-center justify-center rounded-full text-[120px] font-bold text-white shadow-2xl"
+          className="flex h-44 w-44 items-center justify-center rounded-full text-[112px] font-bold leading-none text-white shadow-2xl duration-200 animate-in zoom-in-75 fade-in"
           style={{
             background:
-              "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 60%), hsl(var(--primary))",
+              "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%), hsl(var(--primary))",
           }}
         >
           {remaining > 0 ? remaining : "Go"}
         </div>
 
-        <div className="flex items-center gap-2 rounded-full border border-white/15 bg-black/40 p-1.5 shadow-2xl backdrop-blur">
-          <Button
-            type="button"
-            variant="secondary"
-            size="sm"
-            className="rounded-full"
-            onClick={() => setPaused((value) => !value)}
-          >
-            {paused ? (
-              <IconPlayerPlay className="h-4 w-4" />
-            ) : (
-              <IconPlayerPause className="h-4 w-4" />
-            )}
-            {paused ? "Resume" : "Pause"}
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="rounded-full border-white/20 bg-white/10 text-white hover:bg-white/20 hover:text-white"
-            onClick={onCancel}
-          >
-            <IconX className="h-4 w-4" />
-            Cancel
-          </Button>
-        </div>
+        <button
+          type="button"
+          onClick={handleSkip}
+          aria-label="Skip countdown and start recording now"
+          className={controlClasses}
+        >
+          <IconPlayerSkipForward className="h-7 w-7" stroke={1.75} />
+        </button>
       </div>
+
+      <p className="absolute bottom-16 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs font-medium text-white/70 backdrop-blur">
+        Esc to cancel · Enter to start now
+      </p>
     </div>
   );
 }

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

@@ -8,35 +8,53 @@ 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 startedAt = ctx.currentTime + 0.005;
-    const oscillator = ctx.createOscillator();
-    const gain = ctx.createGain();
+    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
+    ];
 
-    oscillator.type = "sine";
-    oscillator.frequency.setValueAtTime(880, startedAt);
-    oscillator.frequency.exponentialRampToValueAtTime(660, startedAt + 0.14);
+    let lastStop = t0;
+    for (const voice of voices) {
+      const startAt = t0 + voice.at;
+      const stopAt = startAt + voice.dur;
+      lastStop = Math.max(lastStop, stopAt);
 
-    gain.gain.setValueAtTime(0.0001, startedAt);
-    gain.gain.exponentialRampToValueAtTime(0.07, startedAt + 0.018);
-    gain.gain.exponentialRampToValueAtTime(0.0001, startedAt + 0.18);
+      const oscillator = ctx.createOscillator();
+      oscillator.type = "sine";
+      oscillator.frequency.setValueAtTime(voice.freq, startAt);
 
-    oscillator.connect(gain);
-    gain.connect(ctx.destination);
+      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;
-      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,
+    );
   });
 }
 

package/corpus/templates/clips/changelog/2026-06-23-removed-select-button-from-library-hover-a-clip-to-select-it.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-23
+---
+
+Removed Select button from library — hover a clip to select it

package/corpus/templates/clips/changelog/2026-06-23-shared-video-links-now-play-for-anyone-without-signing-in.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+Shared video links now play for anyone without signing in

package/corpus/templates/clips/changelog/2026-06-23-skip-or-cancel-the-recording-countdown-with-buttons-beside-t.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-23
+---
+
+Skip or cancel the recording countdown with buttons beside the number

package/corpus/templates/clips/changelog/2026-06-23-the-desktop-camera-bubble-now-looks-sharp-the-instant-it-ope.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+The desktop camera bubble now looks sharp the instant it opens instead of staying blurry for the first several seconds

package/corpus/templates/clips/changelog/2026-06-23-the-desktop-recording-widget-now-grows-downward-only-when-yo.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-23
+---
+
+The desktop recording widget now grows downward only when you hover it, so its buttons stay in place instead of shifting up under your cursor

package/corpus/templates/clips/changelog/2026-06-23-the-recording-start-sound-is-now-a-softer-more-modern-chime.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-23
+---
+
+The recording-start sound is now a softer, more modern chime

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

@@ -18,18 +18,27 @@
     "32": "icons/icon-32.png",
     "128": "icons/icon-128.png"
   },
-  "permissions": [
-    "activeTab",
-    "debugger",
-    "offscreen",
-    "storage",
-    "tabCapture"
-  ],
+  "permissions": ["activeTab", "debugger", "offscreen", "scripting", "storage"],
   "host_permissions": [
     "https://clips.agent-native.com/*",
     "https://forms.agent-native.com/*",
     "http://localhost/*",
-    "http://127.0.0.1/*"
+    "http://127.0.0.1/*",
+    "<all_urls>"
+  ],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["assets/content-script.js"],
+      "run_at": "document_idle",
+      "all_frames": false
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": ["src/overlay.html", "assets/*", "icons/*"],
+      "matches": ["<all_urls>"]
+    }
   ],
   "externally_connectable": {
     "matches": [