@agent-native/core 0.146.2 → 0.146.3

package/corpus/templates/slides/app/components/editor/EditorToolbar.tsx

@@ -96,7 +96,10 @@ interface EditorToolbarProps {
   onShowHistory: () => void;
   historyButtonRef: React.RefObject<HTMLButtonElement | null>;
   currentSlide?: Slide;
-  onUpdateSlide?: (updates: Partial<Omit<Slide, "id">>) => void;
+  onUpdateSlide?: (
+    updates: Partial<Omit<Slide, "id">>,
+    slideIdOverride?: string,
+  ) => void;
   /** Active users on the current slide (from collab awareness) */
   activeUsers?: CollabUser[];
   /** Whether the agent has a durable presence entry on this slide */
@@ -352,7 +355,7 @@ export default function EditorToolbar({
   // That row rides on SlideEditor, which only mounts for a real slide, so an
   // empty deck must keep this fallback or it has no way to add one.
   const contextToolbarVisible = canEdit && Boolean(currentSlide);
-  const { undo, redo, canUndo, canRedo } = useDecks();
+  const { undo, redo, canUndo, canRedo, getDeck } = useDecks();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [importing, setImporting] = useState(false);
   const { setTheme, resolvedTheme } = useTheme();
@@ -553,7 +556,7 @@ export default function EditorToolbar({
           >
             <div className="py-1.5">
               {/* Layout section */}
-              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
+              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
                 {t("editorToolbar.layout")}
               </div>
               {slideLayoutOptions.map((opt) => (
@@ -573,7 +576,7 @@ export default function EditorToolbar({
 
               {/* Background section */}
               <div className="mx-2 my-1.5 border-t border-border" />
-              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
+              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
                 {t("editorToolbar.background")}
               </div>
               <div className="px-3 pb-2">
@@ -619,7 +622,7 @@ export default function EditorToolbar({
 
               {/* Image & Assets section */}
               <div className="mx-2 my-1.5 border-t border-border" />
-              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
+              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
                 {t("editorToolbar.media")}
               </div>
               <button
@@ -647,27 +650,46 @@ export default function EditorToolbar({
 
               {/* Diagrams section */}
               <div className="mx-2 my-1.5 border-t border-border" />
-              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
+              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
                 {t("editorToolbar.diagrams")}
               </div>
               <button
-                onClick={() => {
+                onClick={async () => {
                   if (!onUpdateSlide || !currentSlide) return;
-                  const mermaidTemplate = `<div class="fmd-slide" style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:60px 80px;font-family:'Poppins',sans-serif;">
-<div class="mermaid">
-graph TD
+                  // Pin the slide this insert targets before the async
+                  // import/parse below, so navigating to another slide in the
+                  // meantime can't redirect where the diagram lands.
+                  const targetSlideId = currentSlide.id;
+                  const defaultMermaidDefinition = `graph TD
     A[Start] --> B{Decision}
     B -->|Yes| C[Action A]
     B -->|No| D[Action B]
     C --> E[End]
-    D --> E
-</div>
-</div>`;
-                  onUpdateSlide({
-                    content: mermaidTemplate,
-                    layout: "blank",
-                  });
-                  setLayoutOpen(false);
+    D --> E`;
+                  try {
+                    const { convertMermaidToExcalidraw } =
+                      await import("./MermaidToExcalidrawPanel");
+                    const data = await convertMermaidToExcalidraw(
+                      defaultMermaidDefinition,
+                    );
+                    // The target slide may have been deleted while the import/
+                    // parse above was in flight — patch-deck rejects the whole
+                    // batch for a missing slide id, so re-check with the live
+                    // deck (not the stale `currentSlide` this closure captured)
+                    // and drop the result instead of enqueueing a dead op.
+                    const stillExists = getDeck(deckId)?.slides.some(
+                      (s) => s.id === targetSlideId,
+                    );
+                    if (!stillExists) return;
+                    onUpdateSlide({ excalidrawData: data }, targetSlideId);
+                    setLayoutOpen(false);
+                  } catch (err) {
+                    console.error("Insert Mermaid diagram failed:", err);
+                    toast.error(t("editorToolbar.insertMermaidFailed"), {
+                      description:
+                        err instanceof Error ? err.message : undefined,
+                    });
+                  }
                 }}
                 className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
               >
@@ -696,6 +718,8 @@ graph TD
                   <button
                     onClick={async () => {
                       if (!onUpdateSlide || !currentSlide) return;
+                      // Same pinning as the insert handler above.
+                      const targetSlideId = currentSlide.id;
                       try {
                         const match = currentSlide.content.match(
                           /<div\s+class="mermaid"[^>]*>([\s\S]*?)<\/div>/i,
@@ -706,13 +730,22 @@ graph TD
                         const data = await convertMermaidToExcalidraw(
                           match[1].trim(),
                         );
-                        onUpdateSlide({ excalidrawData: data });
+                        // Same stale-target guard as the insert handler above.
+                        const stillExists = getDeck(deckId)?.slides.some(
+                          (s) => s.id === targetSlideId,
+                        );
+                        if (!stillExists) return;
+                        onUpdateSlide({ excalidrawData: data }, targetSlideId);
                         setLayoutOpen(false);
-                      } catch (err: any) {
+                      } catch (err) {
                         console.error("Mermaid to Excalidraw failed:", err);
+                        toast.error(t("editorToolbar.convertMermaidFailed"), {
+                          description:
+                            err instanceof Error ? err.message : undefined,
+                        });
                       }
                     }}
-                    className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-[hsl(var(--accent-cyan))]/80 hover:text-[hsl(var(--accent-cyan))] hover:bg-accent/50 transition-colors"
+                    className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-[hsl(var(--accent-cyan))] hover:bg-accent/50 transition-colors"
                   >
                     <IconTransform className="w-3 h-3" />
                     {t("editorToolbar.convertMermaidToExcalidraw")}
@@ -734,7 +767,7 @@ graph TD
 
               {/* Transitions section */}
               <div className="mx-2 my-1.5 border-t border-border" />
-              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
+              <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
                 {t("editorToolbar.transition")}
               </div>
               <div className="px-3 pb-2.5 grid grid-cols-4 gap-1">
@@ -767,7 +800,7 @@ graph TD
               {onSetAspectRatio && (
                 <>
                   <div className="mx-2 my-1.5 border-t border-border" />
-                  <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
+                  <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
                     {t("editorToolbar.aspectRatio")}
                   </div>
                   <div className="px-3 pb-2.5 grid grid-cols-4 gap-1">

package/corpus/templates/slides/app/components/editor/SlideEditor.tsx

@@ -4409,6 +4409,7 @@ export default function SlideEditor({
 
       <DrawOverlay
         visible={!!drawMode}
+        scopeKey={slideId || slide.id}
         onClose={() => onExitDrawMode?.()}
         onSend={(annotations, instruction, canvasSize) => {
           const summary = annotations

package/corpus/templates/slides/app/components/editor/SlideOverflowWarning.tsx

@@ -31,7 +31,10 @@ export function SlideOverflowWarning({
     <div
       role="status"
       aria-live="polite"
-      className="absolute -top-12 left-0 z-20 flex items-center gap-2 rounded-md border border-foreground/40 px-2 py-1 text-xs text-foreground"
+      // w-max/nowrap: the containing block is the zoomed slide canvas, so at
+      // low zoom the banner would otherwise wrap to a height taller than its
+      // own -top-12 offset and spill down over the slide.
+      className="absolute -top-12 left-0 z-20 flex w-max items-center gap-2 whitespace-nowrap rounded-md border border-foreground/40 px-2 py-1 text-xs text-foreground"
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => event.stopPropagation()}
     >

package/corpus/templates/slides/app/context/DeckContext.tsx

@@ -143,6 +143,27 @@ export type DeckPersistenceResult =
   | { persisted: false; reason: "request-failed"; error: unknown }
   | { persisted: false; reason: "not-found" };
 
+/**
+ * Ask the server whether a deck row exists, keeping "absent" and "could not
+ * check" distinct — a rejected write is not by itself proof the row is missing.
+ */
+async function probeDeckPersisted(id: string): Promise<DeckPersistenceResult> {
+  try {
+    const result = await callAction<unknown>(
+      "get-deck",
+      { id },
+      {
+        method: "GET",
+      },
+    );
+    return normalizeActionDeck(result)
+      ? { persisted: true }
+      : { persisted: false, reason: "not-found" };
+  } catch (error) {
+    return { persisted: false, reason: "request-failed", error };
+  }
+}
+
 export function describeDeckPersistenceFailure(
   result: DeckPersistenceResult,
   fallback: string,
@@ -178,6 +199,7 @@ interface DeckContextType {
     sourceDeckId: string,
     newId: string,
     title?: string,
+    onFailure?: () => void,
   ) => Deck | null;
   deleteDeck: (id: string) => void;
   updateDeck: (
@@ -851,18 +873,52 @@ async function fetchDeckListLightFromAPI(): Promise<{ id: string }[] | null> {
   }
 }
 
+const DECK_FETCH_RETRY_ATTEMPTS = 3;
+const DECK_FETCH_RETRY_DELAY_MS = 400;
+
+// `get-deck` returns a real 404/403 only when the deck is genuinely gone or
+// the caller genuinely lacks access (see actions/get-deck.ts). A network blip
+// or 5xx is transient and must not be coerced into the same "not found" null
+// the caller uses to show the owner-facing "deck unavailable" pane — that
+// flashed a wrong message on brief server hiccups even though the deck still
+// existed.
+function isConfirmedDeckAbsence(err: unknown): boolean {
+  const status = (err as { status?: unknown } | null)?.status;
+  return status === 404 || status === 403;
+}
+
+// A timeout already made the caller wait the full action timeout window once
+// (see DEFAULT_ACTION_TIMEOUT_MS in use-action.ts); retrying would multiply
+// that wait instead of surfacing the failure — same reasoning as
+// `isActionTimeout` in the shared action-query retry policy.
+function isDeckFetchTimeout(err: unknown): boolean {
+  return (err as { timedOut?: unknown } | null)?.timedOut === true;
+}
+
 async function fetchDeckFromAPI(id: string): Promise<Deck | null> {
-  try {
-    const result = await callAction<unknown>(
-      "get-deck",
-      { id },
-      { method: "GET" },
-    );
-    return normalizeActionDeck(result);
-  } catch (err) {
-    console.error(`Failed to fetch deck ${id}:`, err);
-    return null;
+  for (let attempt = 1; attempt <= DECK_FETCH_RETRY_ATTEMPTS; attempt++) {
+    try {
+      const result = await callAction<unknown>(
+        "get-deck",
+        { id },
+        { method: "GET" },
+      );
+      return normalizeActionDeck(result);
+    } catch (err) {
+      if (
+        isConfirmedDeckAbsence(err) ||
+        isDeckFetchTimeout(err) ||
+        attempt === DECK_FETCH_RETRY_ATTEMPTS
+      ) {
+        console.error(`Failed to fetch deck ${id}:`, err);
+        return null;
+      }
+      await new Promise((resolve) =>
+        setTimeout(resolve, attempt * DECK_FETCH_RETRY_DELAY_MS),
+      );
+    }
   }
+  return null;
 }
 
 export function deckIdFromPathname(pathname: string): string | null {
@@ -1776,24 +1832,18 @@ export function DeckProvider({ children }: { children: ReactNode }) {
         }
       }
 
-      try {
-        const result = await callAction<unknown>(
-          "get-deck",
-          { id },
-          { method: "GET" },
-        );
-        return normalizeActionDeck(result)
-          ? { persisted: true }
-          : { persisted: false, reason: "not-found" };
-      } catch (error) {
-        return { persisted: false, reason: "request-failed", error };
-      }
+      return probeDeckPersisted(id);
     },
     [],
   );
 
   const duplicateDeck = useCallback(
-    (sourceDeckId: string, newId: string, title?: string): Deck | null => {
+    (
+      sourceDeckId: string,
+      newId: string,
+      title?: string,
+      onFailure?: () => void,
+    ): Deck | null => {
       if (pendingDuplicateSourceIdsRef.current.has(sourceDeckId)) return null;
       const source = decks.find((d) => d.id === sourceDeckId);
       if (!source) return null;
@@ -1843,10 +1893,26 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       ).then(() => undefined);
       pendingCreatePromisesRef.current.set(newId, duplicatePromise);
       duplicatePromise
-        .catch((err) => {
+        .catch(async (err) => {
+          // A rejected request is not proof the row is missing: a timeout or
+          // dropped response can land after the server committed the insert.
+          // Discarding the copy then would delete work that actually exists
+          // and tell the user it failed, so confirm against the server first.
+          const probe = await probeDeckPersisted(newId);
+          if (probe.persisted) {
+            console.warn(
+              `Duplicate request for ${newId} failed but the deck persisted:`,
+              err,
+            );
+            return;
+          }
           console.error("Duplicate failed:", err);
-          // Roll back: drop the optimistic deck from local state.
+          // Roll back: drop the optimistic deck from local state. The caller
+          // (via onFailure) is responsible for navigating away if the user is
+          // still sitting on this now-gone deck's route — otherwise they're
+          // stranded on a "Deck unavailable" screen with no way back.
           setDecks((prev) => prev.filter((d) => d.id !== newId));
+          onFailure?.();
         })
         .finally(() => {
           pendingCreateIdsRef.current.delete(newId);

package/corpus/templates/slides/app/hooks/use-deck-role.ts

@@ -14,10 +14,18 @@ interface SharesResponse {
  * `Viewer` = no edit affordances, but the editor shell is still navigable;
  * any other role (Owner / Editor / Admin) gets full editing.
  *
- * Returns `canEdit = true` while the role is still loading so that owners
- * never see a flash of view-only chrome on first paint.
+ * `assumeEditorWhileLoading` should only be true when a faster, already-known
+ * signal (e.g. `deck.createdByMe`) confirms the caller is the owner — that
+ * avoids a flash of view-only chrome for owners without ever defaulting a
+ * viewer into edit affordances while the real role is still loading. Without
+ * that signal, `canEdit` stays false until the role query resolves, so a
+ * viewer can never trigger an edit that the server will reject and silently
+ * roll back.
  */
-export function useDeckRole(deckId: string | undefined): {
+export function useDeckRole(
+  deckId: string | undefined,
+  assumeEditorWhileLoading = false,
+): {
   role: SharesResponse["role"] | undefined;
   canEdit: boolean;
   isLoading: boolean;
@@ -29,6 +37,8 @@ export function useDeckRole(deckId: string | undefined): {
   );
   const role = query.data?.role;
   const canEdit =
-    role === undefined ? true : role === "owner" || role !== "viewer";
+    role === undefined
+      ? assumeEditorWhileLoading
+      : role === "owner" || role !== "viewer";
   return { role, canEdit, isLoading: query.isLoading };
 }

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -212,8 +212,10 @@ const messages = {
     assetLibrary: "Asset Library",
     diagrams: "Diagrams",
     insertMermaidDiagram: "Insert Mermaid Diagram",
+    insertMermaidFailed: "Failed to insert diagram",
     excalidrawCanvas: "Excalidraw Canvas",
     convertMermaidToExcalidraw: "Convert Mermaid to Excalidraw",
+    convertMermaidFailed: "Failed to convert diagram",
     removeExcalidrawCanvas: "Remove Excalidraw Canvas",
     transition: "Transition",
     transition_instant: "Instant",

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

@@ -44,7 +44,7 @@ import { QuestionFlow } from "@/components/editor/QuestionFlow";
 import SlideEditor from "@/components/editor/SlideEditor";
 import { TweaksPanel } from "@/components/editor/TweaksPanel";
 import { Button } from "@/components/ui/button";
-import { useDecks } from "@/context/DeckContext";
+import { deckIdFromPathname, useDecks } from "@/context/DeckContext";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
 import { useDeckPresence } from "@/hooks/use-deck-presence";
@@ -275,8 +275,10 @@ export default function DeckEditor() {
   });
   // Mirror Google Slides: viewers see the editor shell with edit affordances
   // disabled (rather than a separate "viewer" route). Owners/Editors/Admins
-  // get the full editor.
-  const { canEdit } = useDeckRole(id);
+  // get the full editor. Only assume edit access while the role is still
+  // loading when `createdByMe` already confirms ownership — otherwise a
+  // viewer would briefly see (and could click) edit affordances.
+  const { canEdit } = useDeckRole(id, deck?.createdByMe === true);
   const isNewDeckGenerating = shouldShowNewDeckGeneratingProgress({
     generating,
     isNewDeckCreation: wasNewDeckCreation.current,
@@ -1001,9 +1003,10 @@ export default function DeckEditor() {
         onShowHistory={() => setHistoryOpen(!historyOpen)}
         historyButtonRef={historyButtonRef}
         currentSlide={currentSlide}
-        onUpdateSlide={(updates) =>
-          currentSlide && updateSlide(id, currentSlide.id, updates)
-        }
+        onUpdateSlide={(updates, slideIdOverride) => {
+          const targetId = slideIdOverride ?? currentSlide?.id;
+          if (targetId) updateSlide(id, targetId, updates);
+        }}
         activeUsers={slideActiveUsers.filter((u) => u.email !== session?.email)}
         agentPresent={agentPresent}
         agentActive={agentActive}
@@ -1025,7 +1028,16 @@ export default function DeckEditor() {
         onToggleTextBoxMode={toggleTextBoxMode}
         onDuplicateDeck={() => {
           const newId = `deck-${nanoid()}`;
-          const optimistic = duplicateDeck(id, newId);
+          const optimistic = duplicateDeck(id, newId, undefined, () => {
+            // The background duplicate-deck action failed after we already
+            // navigated to the optimistic copy. If the user is still there,
+            // send them back instead of stranding them on a "Deck
+            // unavailable" screen for a deck that no longer exists.
+            if (deckIdFromPathname(window.location.pathname) === newId) {
+              navigate("/");
+            }
+            toast.error(t("home.duplicateFailed"));
+          });
           if (optimistic) navigate(`/deck/${optimistic.id}`);
         }}
         onExportPdf={async () => {

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

@@ -45,7 +45,7 @@ import {
   describeDeckPersistenceFailure,
   type Deck,
 } from "@/context/DeckContext";
-import { useDecks } from "@/context/DeckContext";
+import { deckIdFromPathname, useDecks } from "@/context/DeckContext";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { useDesignSystems } from "@/hooks/use-design-systems";
 import { useWorkspaceDefaults } from "@/hooks/use-workspace-defaults";
@@ -1088,7 +1088,16 @@ export default function Index() {
     (id: string) => {
       let copy: ReturnType<typeof duplicateDeck> | undefined;
       flushSync(() => {
-        copy = duplicateDeck(id, `deck-${nanoid()}`);
+        copy = duplicateDeck(id, `deck-${nanoid()}`, undefined, () => {
+          // The background duplicate-deck action failed after we already
+          // navigated to the optimistic copy's route. If the user is still
+          // there, send them back to the deck list instead of stranding them
+          // on a "Deck unavailable" screen for a deck that no longer exists.
+          if (deckIdFromPathname(window.location.pathname) === copy?.id) {
+            navigate("/");
+          }
+          toast.error(t("home.duplicateFailed"));
+        });
       });
       // The context refuses a second copy of the same deck while the first
       // one's action is still in flight.

package/corpus/templates/slides/app/root.tsx

@@ -97,7 +97,11 @@ function useExitSelectionOnOutsideClick() {
       const target = e.target as HTMLElement;
       if (
         target.closest(".slide-content") ||
-        target.closest(".slide-image-clickable")
+        target.closest(".slide-image-clickable") ||
+        target.closest("[data-slide-context-toolbar]") ||
+        target.closest(
+          '[role="dialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper], [data-radix-menu-content]',
+        )
       ) {
         return;
       }

package/dist/file-upload/actions/upload-image.d.ts

@@ -17,11 +17,11 @@ declare const _default: import("../../action.js").ActionDefinition<{
     id?: undefined;
     provider?: undefined;
 } | {
-    error?: undefined;
     configured?: undefined;
     connectPath?: undefined;
     url: string;
     id: string;
     provider: string;
+    error?: undefined;
 }>;
 export default _default;

package/dist/notifications/routes.d.ts

@@ -13,13 +13,13 @@
 export declare function createNotificationsHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<"" | import("./types.js").Notification[] | {
     count: number;
     updated?: undefined;
-    ok?: undefined;
     error?: undefined;
+    ok?: undefined;
 } | {
     count?: undefined;
     updated: number;
-    ok?: undefined;
     error?: undefined;
+    ok?: undefined;
 } | {
     count?: undefined;
     updated?: undefined;

package/dist/progress/routes.d.ts

@@ -15,6 +15,6 @@ export declare function createProgressHandler(): import("h3").EventHandlerWithFe
     error: string;
     ok?: undefined;
 } | {
-    ok: boolean;
     error?: undefined;
+    ok: boolean;
 }>>;

package/dist/resources/handlers.d.ts

@@ -48,8 +48,8 @@ export declare function handleUpdateResource(event: any): Promise<import("./stor
 }>;
 /** DELETE /_agent-native/resources/:id — delete a resource */
 export declare function handleDeleteResource(event: any): Promise<{
-    ok?: undefined;
     error: string;
+    ok?: undefined;
 } | {
     error?: undefined;
     ok: boolean;

package/dist/secrets/routes.d.ts

@@ -37,17 +37,17 @@ export declare function createWriteSecretHandler(): import("h3").EventHandlerWit
     ok?: undefined;
     status?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     status: string;
-    error?: undefined;
 } | {
     ok?: undefined;
     error: string;
     removed?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     removed: boolean;
-    error?: undefined;
 }>>;
 /**
  * POST /_agent-native/secrets/:key/test — validate an optional candidate value
@@ -58,13 +58,13 @@ export declare function createTestSecretHandler(): import("h3").EventHandlerWith
     error: string;
     note?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     note?: undefined;
-    error?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     note: string;
-    error?: undefined;
 } | {
     note?: undefined;
     ok: boolean;
@@ -95,11 +95,11 @@ export interface AdHocSecretPayload {
 export declare function createAdHocSecretHandler(): import("h3").EventHandlerWithFetch<import("h3").EventHandlerRequest, Promise<AdHocSecretPayload[] | {
     error: string;
 } | {
+    error?: undefined;
     ok: boolean;
     key: string;
-    error?: undefined;
 } | {
+    error?: undefined;
     ok: boolean;
     removed: boolean;
-    error?: undefined;
 }>>;

package/docs/content/docs-components.mdx

@@ -191,6 +191,113 @@ Each card is a `###` heading (optionally linked) followed by the description. Ca
 
 ---
 
+## Notice
+
+<Notice tone="risk" title="Bold, not subtle">
+
+Use `Notice` when a `Callout` would be too easy to skim past — something the reader must not miss, like a destructive action or a hard requirement. It shares the same five tones as `Callout` (`info`, `decision`, `risk`, `warning`, `success`) but renders as a filled card with an icon and optional title instead of a left-border note.
+
+</Notice>
+
+```mdx
+<Notice tone="risk" title="Bold, not subtle">
+
+Use `Notice` when a `Callout` would be too easy to skim past — something the reader must not miss, like a destructive action or a hard requirement.
+
+</Notice>
+```
+
+`title` is optional — omit it for a shorter card with just the icon and body. Leave a blank line between the opening tag and the body, same as `Callout`. Reach for `Callout` first; use `Notice` only when a subtle left-border note isn't enough attention.
+
+---
+
+## Banner
+
+<Banner
+  tone="warning"
+  body="This page describes the v9 API. See [Migrating to v10](/docs/migrating-v10) for what changed."
+/>
+
+```mdx
+<Banner
+  tone="warning"
+  body="This page describes the v9 API. See [Migrating to v10](/docs/migrating-v10) for what changed."
+/>
+```
+
+`Banner` is self-closing — `body` is a flat attribute (kept short and single-purpose on purpose), not markdown children. Place it right under a page's title or a section heading — deprecated, beta, moved, version-scoped. For content the reader needs to actually read (not just notice), use `Notice` or `Callout` instead.
+
+---
+
+## Accordion
+
+<Accordion>
+
+### Do I need Toolkit to use Core?
+
+No. Toolkit is optional shared UI — Core works standalone.
+
+### Can I mix Templates and Toolkit?
+
+Yes, most first-party templates already do.
+
+### Where do I ask questions?
+
+The `#agent-native` Discord channel, linked in the site header.
+
+</Accordion>
+
+```mdx
+<Accordion>
+
+### Do I need Toolkit to use Core?
+
+No. Toolkit is optional shared UI — Core works standalone.
+
+### Can I mix Templates and Toolkit?
+
+Yes, most first-party templates already do.
+
+</Accordion>
+```
+
+Same authoring shape as `Steps`/`Cards` — a `### Question` heading per item followed by its answer — but each item renders collapsed behind native `<details>`. Best for FAQ-style content where most readers only need one or two entries, not a full top-to-bottom read.
+
+---
+
+## Badge
+
+<Badge label="Beta" color="orange" icon="rocket" />
+
+<Badge label="Deprecated" color="red" />
+
+<Badge label="v9.1+" color="blue" shape="pill" />
+
+<Badge label="Server-only" color="gray" stroke />
+
+```mdx
+<Badge label="Beta" color="orange" icon="rocket" />
+
+<Badge label="Deprecated" color="red" />
+
+<Badge label="v9.1+" color="blue" shape="pill" />
+
+<Badge label="Server-only" color="gray" stroke />
+```
+
+A small status chip for the top of a page or section. Self-closing, block-level only — **not** embeddable mid-sentence (the docs MDX pipeline only recognizes a custom component when its tag opens its own line, so `text <Badge label="x"/> more text` renders as literal text, not a chip). Place it on its own line, typically right after a heading. Leave a blank line between adjacent Badges (or any two block components) — without one, the scanner can't tell where one ends and the next begins and falls back to rendering literal text.
+
+| Prop       | Values                                                                                                                                                 |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `color`    | `gray` · `blue` · `green` · `yellow` · `orange` · `red` · `purple` · `white` · `surface` · `white-destructive` · `surface-destructive`                 |
+| `size`     | `xs` · `sm` · `md` · `lg`                                                                                                                              |
+| `shape`    | `rounded` (default) · `pill`                                                                                                                           |
+| `icon`     | one of a curated set — `circle-check`, `circle-info`, `alert-triangle`, `alert-octagon`, `ban`, `clock`, `star`, `flame`, `sparkles`, `lock`, `rocket` |
+| `stroke`   | `true` for an outlined, transparent-background variant                                                                                                 |
+| `disabled` | `true` to dim it for an inactive/unavailable state                                                                                                     |
+
+---
+
 ## Comparison
 
 <Comparison>
@@ -478,14 +585,18 @@ Like `TabsBlock`, `Columns` is self-closing with a single JSON `columns` attribu
 
 ## When to use which component
 
-| Situation                                 | Component                            |
-| ----------------------------------------- | ------------------------------------ |
-| Reader must not miss something            | `Callout` (warning / info / success) |
-| Sequential procedure with titled steps    | `Steps`                              |
-| Navigation or feature overview grid       | `Cards`                              |
-| Before vs. after, old vs. new (prose)     | `Comparison`                         |
-| Same task in multiple tools or frameworks | `Tabs`                               |
-| Side-by-side code (labeled columns)       | `Columns`                            |
-| Project directory structure               | `FileTree`                           |
-| Inline keyboard shortcut                  | `[[Key]]`                            |
-| Architecture or flow diagram              | Mermaid fence                        |
+| Situation                                             | Component                            |
+| ----------------------------------------------------- | ------------------------------------ |
+| Reader must not miss something, inline in prose       | `Callout` (warning / info / success) |
+| Reader must not miss something, standalone            | `Notice`                             |
+| Deprecated/beta/version notice at page or section top | `Banner`                             |
+| Status or version tag at page or section top          | `Badge`                              |
+| Sequential procedure with titled steps                | `Steps`                              |
+| FAQ-style content, one answer at a time               | `Accordion`                          |
+| Navigation or feature overview grid                   | `Cards`                              |
+| Before vs. after, old vs. new (prose)                 | `Comparison`                         |
+| Same task in multiple tools or frameworks             | `Tabs`                               |
+| Side-by-side code (labeled columns)                   | `Columns`                            |
+| Project directory structure                           | `FileTree`                           |
+| Inline keyboard shortcut                              | `[[Key]]`                            |
+| Architecture or flow diagram                          | Mermaid fence                        |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.146.2",
+  "version": "0.146.3",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {