@agent-native/core 0.118.0 → 0.119.0

package/corpus/templates/content/app/components/editor/extensions/ImageBlock.tsx

@@ -11,12 +11,12 @@ import {
   IconCopy,
   IconDownload,
   IconDots,
+  IconHierarchy2,
   IconMessageCircle,
   IconMinus,
   IconPhoto,
   IconPlus,
   IconRefresh,
-  IconWand,
   IconTrash,
   IconX,
 } from "@tabler/icons-react";
@@ -1091,7 +1091,7 @@ export function ImageBlock({
                       disabled={isGeneratingAlt}
                       onClick={() => void handleGenerateAltText()}
                     >
-                      <IconWand size={18} />
+                      <IconHierarchy2 size={18} />
                     </button>
                   </TooltipTrigger>
                   <TooltipContent>

package/corpus/templates/content/app/i18n-data.ts

@@ -2995,6 +2995,7 @@ const enUS = {
     toggleField: "Toggle {{name}}",
     creatingDatabase: "Creating inline database...",
     databaseCreated: "Inline database created",
+    emptyBlockPlaceholder: "Press ‘/’ for commands",
     describeWhatToGenerate: "Describe what to generate...",
     enterToSubmit: "Enter to submit",
     failedToCreateDatabase: "Failed to create inline database",
@@ -5462,6 +5463,7 @@ const editorMessagesByLocale = {
       "同步 Builder 正文完成前会暂停编辑，避免覆盖现有文章内容。",
     creatingDatabase: "正在创建内联数据库...",
     databaseCreated: "内联数据库已创建",
+    emptyBlockPlaceholder: "按“/”使用命令",
     describeWhatToGenerate: "描述要生成什么...",
     enterToSubmit: "输入提交",
     failedToCreateDatabase: "创建内联数据库失败",
@@ -5806,6 +5808,7 @@ const editorMessagesByLocale = {
       "La edición está en pausa hasta que el cuerpo de Builder termine de sincronizarse, para no sobrescribir el contenido existente del artículo.",
     creatingDatabase: "Creando base de datos integrada...",
     databaseCreated: "Base de datos integrada creada",
+    emptyBlockPlaceholder: "Pulsa «/» para ver los comandos",
     describeWhatToGenerate: "Describe qué generar...",
     enterToSubmit: "Entra para enviar",
     failedToCreateDatabase: "No se pudo crear la base de datos integrada",
@@ -6162,6 +6165,7 @@ const editorMessagesByLocale = {
       "La modification est suspendue jusqu'à la fin de la synchronisation du corps Builder, afin de ne pas écraser le contenu existant de l'article.",
     creatingDatabase: "Création d'une base de données intégrée...",
     databaseCreated: "Base de données intégrée créée",
+    emptyBlockPlaceholder: "Appuyez sur « / » pour afficher les commandes",
     describeWhatToGenerate: "Décrivez ce qu'il faut générer...",
     enterToSubmit: "Entrez pour soumettre",
     failedToCreateDatabase:
@@ -6520,6 +6524,7 @@ const editorMessagesByLocale = {
       "Die Bearbeitung ist pausiert, bis der Builder-Textkörper fertig synchronisiert ist, damit der bestehende Artikelinhalt nicht überschrieben wird.",
     creatingDatabase: "Inline-Datenbank wird erstellt...",
     databaseCreated: "Inline-Datenbank erstellt",
+    emptyBlockPlaceholder: "Drücke „/“ für Befehle",
     describeWhatToGenerate: "Beschreiben Sie, was generiert werden soll ...",
     enterToSubmit: "Zum Absenden eintreten",
     failedToCreateDatabase: "Inline-Datenbank konnte nicht erstellt werden",
@@ -6883,6 +6888,7 @@ const editorMessagesByLocale = {
       "既存の記事内容を上書きしないよう、Builder 本文の同期が完了するまで編集は一時停止されます。",
     creatingDatabase: "インラインデータベースを作成しています...",
     databaseCreated: "インラインデータベースが作成されました",
+    emptyBlockPlaceholder: "「/」でコマンドを表示",
     describeWhatToGenerate: "何を生成するかを説明します...",
     enterToSubmit: "入力して送信してください",
     failedToCreateDatabase: "インラインデータベースの作成に失敗しました",
@@ -7235,6 +7241,7 @@ const editorMessagesByLocale = {
       "기존 문서 내용을 덮어쓰지 않도록 Builder 본문 동기화가 완료될 때까지 편집이 일시 중지됩니다.",
     creatingDatabase: "인라인 데이터베이스 생성 중...",
     databaseCreated: "인라인 데이터베이스가 생성되었습니다.",
+    emptyBlockPlaceholder: "‘/’를 눌러 명령 사용",
     describeWhatToGenerate: "무엇을 생성할지 설명하세요...",
     enterToSubmit: "제출하려면 입력하세요.",
     failedToCreateDatabase: "인라인 데이터베이스를 생성하지 못했습니다.",
@@ -7586,6 +7593,7 @@ const editorMessagesByLocale = {
       "A edição fica pausada até o corpo do Builder terminar de sincronizar, para não sobrescrever o conteúdo existente do artigo.",
     creatingDatabase: "Criando banco de dados embutido...",
     databaseCreated: "Banco de dados embutido criado",
+    emptyBlockPlaceholder: "Pressione “/” para comandos",
     describeWhatToGenerate: "Descreva o que gerar...",
     enterToSubmit: "Entre para enviar",
     failedToCreateDatabase: "Falha ao criar banco de dados embutido",
@@ -7943,6 +7951,7 @@ const editorMessagesByLocale = {
       "Builder का मुख्य भाग सिंक पूरा होने तक संपादन रोका गया है, ताकि मौजूदा लेख सामग्री अधिलेखित न हो।",
     creatingDatabase: "इनलाइन डेटाबेस बनाया जा रहा है...",
     databaseCreated: "इनलाइन डेटाबेस बनाया गया",
+    emptyBlockPlaceholder: "कमांड के लिए '/' दबाएं",
     describeWhatToGenerate: "वर्णन करें कि क्या उत्पन्न करना है...",
     enterToSubmit: "सबमिट करने के लिए दर्ज करें",
     failedToCreateDatabase: "इनलाइन डेटाबेस बनाने में विफल",
@@ -8289,6 +8298,7 @@ const editorMessagesByLocale = {
       "يتم إيقاف التحرير مؤقتًا حتى تكتمل مزامنة نص Builder، حتى لا يتم استبدال محتوى المقالة الحالي.",
     creatingDatabase: "جارٍ إنشاء قاعدة بيانات مضمنة...",
     databaseCreated: "تم إنشاء قاعدة البيانات المضمنة",
+    emptyBlockPlaceholder: 'اضغط على "/" للأوامر',
     describeWhatToGenerate: "وصف ما سيتم إنشاؤه...",
     enterToSubmit: "أدخل لتقديم",
     failedToCreateDatabase: "فشل في إنشاء قاعدة البيانات المضمنة",

package/corpus/templates/design/server/lib/fig-file-decoder.ts

@@ -162,6 +162,7 @@ function decompressZstdChunk(buf: Buffer): Buffer {
 }
 
 function decompressChunk(buf: Buffer): Buffer {
+  if (buf.length === 0) return Buffer.alloc(0);
   if (buf.length >= 4 && buf.subarray(0, 4).equals(ZSTD_MAGIC)) {
     return decompressZstdChunk(buf);
   }

package/corpus/templates/plan/app/entry.client.tsx

@@ -1,7 +1,10 @@
 import { appBasePath } from "@agent-native/core/client/api-path";
+import { installRouteChunkRecovery } from "@agent-native/core/client/route-chunk-recovery";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";
 
+installRouteChunkRecovery();
+
 const basePath = appBasePath();
 const pathname = window.location.pathname;
 const routerBasePath =

package/corpus/templates/plan/changelog/2026-07-22-recover-stale-pages-after-a-deployment-refresh-automatically.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Recover stale pages after a deployment refresh automatically

package/corpus/templates/slides/app/hooks/use-agent-generating.ts

@@ -1,4 +1,7 @@
-import { useAgentChatGenerating } from "@agent-native/core/client/agent-chat";
+import {
+  useAgentChatGenerating,
+  type AgentChatMessage,
+} from "@agent-native/core/client/agent-chat";
 import { useCallback } from "react";
 
 /**
@@ -9,8 +12,12 @@ export function useAgentGenerating() {
   const [generating, send] = useAgentChatGenerating();
 
   const submit = useCallback(
-    (message: string, context: string) => {
-      send({ message, context, submit: true });
+    (
+      message: string,
+      context: string,
+      options?: Pick<AgentChatMessage, "newTab" | "openSidebar">,
+    ) => {
+      send({ message, context, submit: true, ...options });
     },
     [send],
   );

package/corpus/templates/slides/app/pages/Index.tsx

@@ -469,6 +469,7 @@ export default function Index() {
     agentSubmit(
       `Create deck: ${summarizePromptForChat(trimmedPrompt)}`,
       context,
+      { newTab: true, openSidebar: true },
     );
     navigate(`/deck/${deck.id}?generating=1`);
   };

package/corpus/templates/slides/changelog/2026-07-22-new-deck-prompts-now-open-in-their-own-visible-chat-thread.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+New deck prompts now open in their own visible chat thread.

package/corpus/toolkit/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @agent-native/toolkit
 
+## 0.10.1
+
+### Patch Changes
+
+- c15d20f: Harden browser and CLI error handling and hide editor commands for disabled features.
+- c15d20f: Expand design-system conformance coverage for uncontrolled tooltip and menu
+  opening, and align the example adapters with those default-open semantics.
+- c15d20f: Show a soft rotating blue glow for live realtime voice sessions and brighten it while the agent is working.
+
 ## 0.10.0
 
 ### Minor Changes

package/corpus/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/toolkit/src/composer/PromptComposer.tsx

@@ -61,6 +61,10 @@ import type {
 const MAX_INLINE_TEXT_FILE_CHARS = 60_000;
 const SUBMIT_ENGINE_STATUS_TIMEOUT_MS = 1000;
 
+export function canSubmitWithAgentEngineState(state: string): boolean {
+  return state === "configured";
+}
+
 /**
  * Files the user attached via the "+" button in PromptComposer. The host owns
  * what to do with them — typically POST to a per-app upload endpoint and pass
@@ -550,7 +554,7 @@ function PromptComposerInner({
     if (typeof window !== "undefined") {
       window.dispatchEvent(new Event("agent-engine:configured-changed"));
     }
-    return false;
+    return canSubmitWithAgentEngineState(state);
   }, [
     agentEngineConfigured.state,
     bounceMissingKeySetup,

package/corpus/toolkit/src/composer/RealtimeVoiceMode.tsx

@@ -10,10 +10,12 @@ import {
 import {
   IconAlertTriangle,
   IconBrain,
+  IconKey,
   IconLanguage,
   IconLoader2,
   IconMicrophone,
   IconPhoneOff,
+  IconPlugConnected,
   IconSettings,
   IconVolume,
 } from "@tabler/icons-react";
@@ -225,72 +227,90 @@ export function RealtimeVoiceModeEntry({
         collisionPadding={16}
         data-collision-boundary={collisionBoundary ? "agent-panel" : "viewport"}
         className={cn(
-          setupRequired ? "p-4" : "p-3",
+          setupRequired ? "p-3.5" : "p-3",
           setupRequired
-            ? "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,30rem),30rem)]"
+            ? "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,24rem),24rem)]"
             : "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,18rem),18rem)]",
         )}
         aria-labelledby={titleId}
         aria-describedby={setupRequired ? descriptionId : undefined}
       >
-        <div className={cn("grid", setupRequired ? "gap-3" : "gap-2.5")}>
-          <div className="grid gap-1">
-            <h2 id={titleId} className="text-sm font-semibold text-foreground">
-              {setupRequired ? copy.setupTitle : copy.promptTitle}
-            </h2>
+        <div className={cn("grid", setupRequired ? "gap-3.5" : "gap-2.5")}>
+          <div
+            className={cn(
+              setupRequired ? "flex items-start gap-3" : "grid gap-1",
+            )}
+          >
             {setupRequired ? (
-              <p
-                id={descriptionId}
-                className="text-sm leading-relaxed text-muted-foreground"
-              >
-                {copy.setupDescription}
-              </p>
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                <IconMicrophone aria-hidden="true" />
+              </div>
             ) : null}
+            <div className="grid gap-1">
+              <h2
+                id={titleId}
+                className="text-sm font-semibold leading-5 text-foreground"
+              >
+                {setupRequired ? copy.setupTitle : copy.promptTitle}
+              </h2>
+              {setupRequired ? (
+                <p
+                  id={descriptionId}
+                  className="text-xs leading-5 text-muted-foreground"
+                >
+                  {copy.setupDescription}
+                </p>
+              ) : null}
+            </div>
           </div>
 
           <div
             className={cn(
-              "gap-2",
-              setupRequired
-                ? "flex flex-col-reverse sm:flex-row sm:flex-wrap sm:justify-end"
-                : "grid",
+              "grid gap-2",
+              setupRequired ? "rounded-lg bg-muted/30 p-1" : null,
             )}
           >
             {setupRequired ? (
               <>
                 <Button
                   type="button"
-                  variant="ghost"
                   size="sm"
-                  onClick={() => choose("dictation", onKeepDictating)}
+                  className="w-full justify-start px-3"
+                  disabled={connectingBuilder}
+                  onClick={() =>
+                    choose("realtime", onConnectBuilder ?? onStartVoiceMode)
+                  }
                 >
-                  {copy.keepDictating}
+                  {connectingBuilder ? (
+                    <IconLoader2 className="animate-spin" />
+                  ) : (
+                    <IconPlugConnected aria-hidden="true" />
+                  )}
+                  {copy.connectBuilder}
                 </Button>
                 <Button
                   type="button"
                   variant="outline"
                   size="sm"
+                  className="w-full justify-start bg-background px-3"
                   onClick={() =>
                     choose("realtime", onUseOpenAiKey ?? onStartVoiceMode)
                   }
                 >
+                  <IconKey aria-hidden="true" />
                   {openAiConfigured
                     ? copy.startWithOpenAiKey
                     : copy.useOpenAiKey}
                 </Button>
                 <Button
                   type="button"
+                  variant="ghost"
                   size="sm"
-                  className="whitespace-nowrap"
-                  disabled={connectingBuilder}
-                  onClick={() =>
-                    choose("realtime", onConnectBuilder ?? onStartVoiceMode)
-                  }
+                  className="w-full justify-start px-3 text-muted-foreground"
+                  onClick={() => choose("dictation", onKeepDictating)}
                 >
-                  {connectingBuilder ? (
-                    <IconLoader2 className="animate-spin" />
-                  ) : null}
-                  {copy.connectBuilder}
+                  <IconMicrophone aria-hidden="true" />
+                  {copy.keepDictating}
                 </Button>
               </>
             ) : (
@@ -382,9 +402,14 @@ export interface RealtimeVoiceModeInlineSettings {
 const SILENT_AUDIO_LEVELS = createRealtimeVoiceAudioLevelStore();
 const WAVEFORM_WEIGHTS = [0.55, 0.82, 1, 0.82, 0.55];
 const AUDIO_ACTIVITY_THRESHOLD = 0.1;
+const WORKING_GLOW_HOLD_MS = 800;
 
 function usePrefersReducedMotion(): boolean {
-  const [reduced, setReduced] = useState(false);
+  const [reduced, setReduced] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches),
+  );
   useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
     const query = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -697,6 +722,9 @@ export function RealtimeVoiceModeDock({
   const controlsId = useId();
   const [controlsOpen, setControlsOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [workingGlowHeld, setWorkingGlowHeld] = useState(state === "working");
+  const glowRef = useRef<HTMLSpanElement>(null);
+  const glowAnimationRef = useRef<Animation | null>(null);
   const selectInteractionRef = useRef(false);
   const selectInteractionFrameRef = useRef<number | null>(null);
   const levels = useSyncExternalStore(
@@ -724,6 +752,56 @@ export function RealtimeVoiceModeDock({
   const errorDetailVisible = state === "error" && Boolean(errorMessage);
   const controlsVisible = controlsOpen || settingsOpen;
   const chatPanelTranslation = useChatPanelTranslation(chatVisible);
+  const workingGlowActive = state === "working" || workingGlowHeld;
+
+  useEffect(() => {
+    if (state === "working") {
+      setWorkingGlowHeld(true);
+      return;
+    }
+    if (!workingGlowHeld) return;
+    const timer = window.setTimeout(
+      () => setWorkingGlowHeld(false),
+      WORKING_GLOW_HOLD_MS,
+    );
+    return () => window.clearTimeout(timer);
+  }, [state, workingGlowHeld]);
+
+  useEffect(() => {
+    if (!connected || reducedMotion || !glowRef.current) {
+      glowAnimationRef.current?.cancel();
+      glowAnimationRef.current = null;
+      return;
+    }
+
+    const animation = glowRef.current.animate(
+      [{ transform: "rotate(0turn)" }, { transform: "rotate(1turn)" }],
+      {
+        duration: 12_000,
+        easing: "linear",
+        iterations: Number.POSITIVE_INFINITY,
+      },
+    );
+    glowAnimationRef.current = animation;
+
+    return () => {
+      animation.cancel();
+      if (glowAnimationRef.current === animation) {
+        glowAnimationRef.current = null;
+      }
+    };
+  }, [connected, reducedMotion]);
+
+  useEffect(() => {
+    const animation = glowAnimationRef.current;
+    if (!animation) return;
+    const playbackRate = workingGlowActive ? 2.4 : 1;
+    if (typeof animation.updatePlaybackRate === "function") {
+      animation.updatePlaybackRate(playbackRate);
+    } else {
+      animation.playbackRate = playbackRate;
+    }
+  }, [workingGlowActive]);
 
   const handleSelectOpenChange = useCallback((open: boolean) => {
     if (selectInteractionFrameRef.current !== null) {
@@ -900,9 +978,19 @@ export function RealtimeVoiceModeDock({
               className={cn(
                 "relative isolate size-16 overflow-visible rounded-full ring-1 backdrop-blur-xl transition-transform duration-150 ease-out focus-visible:ring-offset-2 active:scale-[0.97] motion-reduce:transition-none",
                 ORB_STATE_CLASSES[state],
-                state === "working" && "agent-realtime-voice-working",
               )}
             >
+              {connected ? (
+                <span
+                  ref={glowRef}
+                  aria-hidden="true"
+                  data-realtime-voice-glow="true"
+                  className={cn(
+                    "agent-realtime-voice-glow",
+                    workingGlowActive && "agent-realtime-voice-working",
+                  )}
+                />
+              ) : null}
               <span className="relative z-10 flex items-center justify-center">
                 {state === "connecting" ? (
                   <VoiceConnectingIndicator />

package/corpus/toolkit/src/composer/useRealtimeVoiceMode.tsx

@@ -1005,6 +1005,36 @@ export function createRealtimeVoiceToolManifestCoordinator(
 export function extractRealtimeVoiceFunctionCalls(
   event: RealtimeServerEvent,
 ): Array<{ name: string; callId: string; argumentsText: string }> {
+  if (event.type === "response.function_call_arguments.done") {
+    const name = typeof event.name === "string" ? event.name : "";
+    const callId = typeof event.call_id === "string" ? event.call_id : "";
+    if (!name || !callId) return [];
+    return [
+      {
+        name,
+        callId,
+        argumentsText:
+          typeof event.arguments === "string" ? event.arguments : "{}",
+      },
+    ];
+  }
+  if (event.type === "response.output_item.done") {
+    const item = event.item;
+    if (!item || typeof item !== "object") return [];
+    const record = item as Record<string, unknown>;
+    if (record.type !== "function_call") return [];
+    const name = typeof record.name === "string" ? record.name : "";
+    const callId = typeof record.call_id === "string" ? record.call_id : "";
+    if (!name || !callId) return [];
+    return [
+      {
+        name,
+        callId,
+        argumentsText:
+          typeof record.arguments === "string" ? record.arguments : "{}",
+      },
+    ];
+  }
   if (event.type !== "response.done") return [];
   const response = event.response;
   if (!response || typeof response !== "object") return [];