@agent-native/core 0.130.2 → 0.131.3

package/corpus/templates/slides/app/components/layout/AgentWorkIndicator.tsx

@@ -1,7 +1,9 @@
 import { focusAgentChat } from "@agent-native/core/client/agent-chat";
 import { useT } from "@agent-native/core/client/i18n";
 import { IconLoader2, IconMessageCircle } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { CHAT_STOP_DEBOUNCE_MS } from "@/hooks/use-agent-generating";
 
 export function isAgentSidebarVisible() {
   const panel = document.querySelector<HTMLElement>(".agent-sidebar-panel");
@@ -50,17 +52,35 @@ function useAgentSidebarVisible() {
 export function AgentWorkIndicator() {
   const t = useT();
   const [running, setRunning] = useState(false);
+  const stopDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const sidebarVisible = useAgentSidebarVisible();
 
   useEffect(() => {
+    const clearStopDebounce = () => {
+      if (stopDebounceRef.current !== null) {
+        clearTimeout(stopDebounceRef.current);
+        stopDebounceRef.current = null;
+      }
+    };
     const handler = (event: Event) => {
       const detail = (event as CustomEvent).detail;
       if (typeof detail?.isRunning === "boolean") {
-        setRunning(detail.isRunning);
+        clearStopDebounce();
+        if (detail.isRunning) {
+          setRunning(true);
+        } else {
+          stopDebounceRef.current = setTimeout(() => {
+            stopDebounceRef.current = null;
+            setRunning(false);
+          }, CHAT_STOP_DEBOUNCE_MS);
+        }
       }
     };
     window.addEventListener("agentNative.chatRunning", handler);
-    return () => window.removeEventListener("agentNative.chatRunning", handler);
+    return () => {
+      clearStopDebounce();
+      window.removeEventListener("agentNative.chatRunning", handler);
+    };
   }, []);
 
   if (!running || sidebarVisible) return null;

package/corpus/templates/slides/app/components/layout/Layout.tsx

@@ -14,12 +14,22 @@ import { cn } from "@/lib/utils";
 
 import { AgentWorkIndicator } from "./AgentWorkIndicator";
 import { Header } from "./Header";
+import {
+  getDeckChatScopeLabel,
+  getEffectiveSlidesSidebarCollapsed,
+  isSlidesEditorRoute,
+} from "./layout-route-policy";
 import { Sidebar } from "./Sidebar";
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
+interface EditorSidebarOverride {
+  locationKey: string;
+  collapsed: boolean;
+}
+
 /** Routes whose pages render their own toolbar — Layout still renders chrome
  * (sidebar + AgentSidebar wrapper) but skips its own Header. */
 function pageHasOwnToolbar(pathname: string): boolean {
@@ -35,6 +45,8 @@ export function Layout({ children }: LayoutProps) {
   const location = useLocation();
   const t = useT();
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [editorSidebarOverride, setEditorSidebarOverride] =
+    useState<EditorSidebarOverride | null>(null);
   const { collapsed: sidebarCollapsed, setCollapsed: setSidebarCollapsed } =
     useSidebarCollapsed();
   const { getDeck } = useDecks();
@@ -49,8 +61,12 @@ export function Layout({ children }: LayoutProps) {
     const deckId = match?.[1];
     if (!deckId) return null;
     const deck = getDeck(deckId);
-    return { type: "deck" as const, id: deckId, label: deck?.title || "" };
-  }, [location.pathname, getDeck]);
+    return {
+      type: "deck" as const,
+      id: deckId,
+      label: getDeckChatScopeLabel(deck?.title, t("agent.thisDeck")),
+    };
+  }, [location.pathname, getDeck, t]);
 
   useEffect(() => {
     setSidebarOpen(false);
@@ -65,6 +81,25 @@ export function Layout({ children }: LayoutProps) {
   }, []);
 
   const ownToolbar = pageHasOwnToolbar(location.pathname);
+  const editorSidebarOverrideForLocation =
+    editorSidebarOverride?.locationKey === location.key
+      ? editorSidebarOverride.collapsed
+      : undefined;
+  const effectiveSidebarCollapsed = getEffectiveSlidesSidebarCollapsed({
+    pathname: location.pathname,
+    persistedCollapsed: sidebarCollapsed,
+    editorOverride: editorSidebarOverrideForLocation,
+  });
+  const toggleSidebarCollapsed = () => {
+    if (isSlidesEditorRoute(location.pathname)) {
+      setEditorSidebarOverride({
+        locationKey: location.key,
+        collapsed: !effectiveSidebarCollapsed,
+      });
+      return;
+    }
+    void setSidebarCollapsed((prev) => !prev);
+  };
 
   return (
     <HeaderActionsProvider>
@@ -98,15 +133,13 @@ export function Layout({ children }: LayoutProps) {
             )}
           >
             <Sidebar
-              collapsed={sidebarCollapsed && !sidebarOpen}
+              collapsed={effectiveSidebarCollapsed && !sidebarOpen}
               // In the mobile drawer the sidebar is forced expanded, so the
               // desktop collapse toggle would be a silent no-op (worse: it'd
               // mutate the desktop preference). Hide it while the drawer is
               // open.
               onToggleCollapsed={
-                sidebarOpen
-                  ? undefined
-                  : () => setSidebarCollapsed((prev) => !prev)
+                sidebarOpen ? undefined : toggleSidebarCollapsed
               }
             />
           </div>

package/corpus/templates/slides/app/components/layout/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
-import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
+import { useT } from "@agent-native/core/client/i18n";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
@@ -91,9 +91,6 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
       <TooltipContent side="right">{t("root.searchDecks")}</TooltipContent>
     </Tooltip>
   );
-  const translateButton = (
-    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
-  );
   const feedbackButton = (
     <FeedbackButton
       variant={collapsed ? "icon" : "sidebar"}
@@ -156,7 +153,6 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
         <SidebarFooterActions
           collapsed
           feedback={feedbackButton}
-          translate={translateButton}
           search={searchButton}
           collapse={collapseButton}
         />
@@ -241,7 +237,6 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
           </div>
           <SidebarFooterActions
             feedback={feedbackButton}
-            translate={translateButton}
             search={searchButton}
             collapse={collapseButton}
             className="px-0 py-0"

package/corpus/templates/slides/app/components/layout/layout-route-policy.ts

@@ -0,0 +1,23 @@
+export function isSlidesEditorRoute(pathname: string): boolean {
+  return /^\/deck\/[^/]+\/?$/.test(pathname);
+}
+
+export function getDeckChatScopeLabel(
+  deckTitle: string | undefined,
+  untitledDeckLabel: string,
+): string {
+  return deckTitle === "Untitled Deck" ? untitledDeckLabel : deckTitle || "";
+}
+
+export function getEffectiveSlidesSidebarCollapsed({
+  pathname,
+  persistedCollapsed,
+  editorOverride,
+}: {
+  pathname: string;
+  persistedCollapsed: boolean;
+  editorOverride?: boolean;
+}): boolean {
+  if (!isSlidesEditorRoute(pathname)) return persistedCollapsed;
+  return editorOverride ?? true;
+}

package/corpus/templates/slides/app/components/visual-editor/DrawOverlay.tsx

@@ -296,7 +296,6 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
                 e.preventDefault();
                 commitTextAnnotation();
               }
-              if (e.key === "Escape") setTextInput(null);
             }}
             className="h-7 w-48 border-primary bg-background text-sm"
             autoFocus
@@ -414,7 +413,6 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
           onChange={(e) => setInstruction(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === "Enter" && hasContent) send();
-            if (e.key === "Escape") onClose();
           }}
           placeholder={t("raw.tellAgentDo")}
           className="h-7 w-48 border-border bg-background text-xs sm:w-56"

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

@@ -130,6 +130,8 @@ export interface Deck {
   designSystemId?: string;
   /** Per-deck tweak overrides (accent color, title case, etc.) */
   tweaks?: Record<string, string | number | boolean>;
+  /** Starred decks are offered first in the new-deck reference picker. */
+  starred?: boolean;
   /** Slide aspect ratio (defaults to 16:9 when absent for backwards compat) */
   aspectRatio?: AspectRatio;
 }

package/corpus/templates/slides/app/global.css

@@ -104,6 +104,66 @@ button[title="Open agent sidebar"] {
   --sidebar-ring: 0 0% 65%;
 }
 
+/* Slides keeps the shared visual inspector behavior, but the dock needs the
+   flatter, filled-control treatment used by the slide editor. */
+.slide-style-inspector {
+  --slides-inspector-control-background: hsl(var(--muted) / 0.82);
+  --slides-inspector-divider: hsl(var(--border) / 0.7);
+}
+
+.slide-style-inspector > div:first-child {
+  min-height: 2.75rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.slide-style-inspector > div:first-child > div > div:first-child {
+  font-size: 0.75rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.slide-style-inspector > div:last-child {
+  max-height: none;
+  padding: 0;
+}
+
+.slide-style-inspector .slides-inspector-section {
+  border-bottom: 1px solid var(--slides-inspector-divider);
+  border-radius: 0;
+  padding: 0.625rem 0.75rem;
+}
+
+.slide-style-inspector .slides-inspector-section > div:first-child {
+  margin-bottom: 0.5rem;
+  padding: 0;
+  font-size: 0.6875rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.slide-style-inspector label[for] {
+  border: 0;
+  background: transparent;
+}
+
+.slide-style-inspector input {
+  border: 0;
+  border-radius: 0.125rem;
+  background: var(--slides-inspector-control-background);
+  box-shadow: none;
+}
+
+.slide-style-inspector input:focus {
+  border: 0;
+}
+
+.slide-style-inspector .slides-inspector-segment {
+  min-height: 1.5rem;
+  border: 0;
+  border-radius: 0.125rem;
+  background: var(--slides-inspector-control-background);
+}
+
 @layer base {
   body {
     @apply bg-background text-foreground antialiased;

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

@@ -2,25 +2,96 @@ import {
   useAgentChatGenerating,
   type AgentChatMessage,
 } from "@agent-native/core/client/agent-chat";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// This is only a lost-signal recovery guard. A long deck legitimately takes
+// several minutes because each slide is written and fit-checked separately.
+const MAX_GENERATING_MS = 30 * 60 * 1000;
+
+// Gateway continuations can briefly report a stopped chat between model/tool
+// chunks. Keep generation UI and presence steady across that transport gap.
+export const CHAT_STOP_DEBOUNCE_MS = 4_000;
+
+type AgentGeneratingSubmitOptions = Pick<
+  AgentChatMessage,
+  "newTab" | "openSidebar"
+> & {
+  reuseEmptyTab?: boolean;
+};
 
 /**
  * Tracks whether an agent chat submission is in progress.
- * Wraps @agent-native/core's useAgentChatGenerating hook.
+ * Wraps @agent-native/core's useAgentChatGenerating hook, with a timeout
+ * fallback so a run that never reports completion can't spin forever.
  */
 export function useAgentGenerating() {
   const [generating, send] = useAgentChatGenerating();
+  const [recentlyGenerating, setRecentlyGenerating] = useState(false);
+  const [timedOut, setTimedOut] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const stopDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearWatchdog = useCallback(() => {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const clearStopDebounce = useCallback(() => {
+    if (stopDebounceRef.current !== null) {
+      clearTimeout(stopDebounceRef.current);
+      stopDebounceRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (generating) {
+      clearStopDebounce();
+      setRecentlyGenerating(true);
+    } else if (recentlyGenerating) {
+      clearStopDebounce();
+      stopDebounceRef.current = setTimeout(() => {
+        stopDebounceRef.current = null;
+        setRecentlyGenerating(false);
+      }, CHAT_STOP_DEBOUNCE_MS);
+    }
+
+    if (!generating && !recentlyGenerating) {
+      clearWatchdog();
+      setTimedOut(false);
+    }
+
+    return clearStopDebounce;
+  }, [generating, recentlyGenerating, clearStopDebounce, clearWatchdog]);
+
+  useEffect(
+    () => () => {
+      clearWatchdog();
+      clearStopDebounce();
+    },
+    [clearStopDebounce, clearWatchdog],
+  );
 
   const submit = useCallback(
     (
       message: string,
       context: string,
-      options?: Pick<AgentChatMessage, "newTab" | "openSidebar">,
+      options?: AgentGeneratingSubmitOptions,
     ) => {
+      setTimedOut(false);
+      clearWatchdog();
+      timeoutRef.current = setTimeout(
+        () => setTimedOut(true),
+        MAX_GENERATING_MS,
+      );
       send({ message, context, submit: true, ...options });
     },
-    [send],
+    [send, clearWatchdog],
   );
 
-  return { generating, submit };
+  return {
+    generating: (generating || recentlyGenerating) && !timedOut,
+    submit,
+  };
 }

package/corpus/templates/slides/app/hooks/use-workspace-defaults.ts

@@ -0,0 +1,26 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+
+export type WorkspaceDefaultRef =
+  | { id: string; title: string; unavailable?: false }
+  | { id: string; title: null; unavailable: true }
+  | null;
+
+export interface WorkspaceDefaultsResult {
+  referenceDeck: WorkspaceDefaultRef;
+  designSystem: WorkspaceDefaultRef;
+  canManage: boolean;
+}
+
+export function useWorkspaceDefaults() {
+  const { data, isLoading, error, refetch } =
+    useActionQuery<WorkspaceDefaultsResult>("get-workspace-defaults");
+
+  return {
+    referenceDeck: data?.referenceDeck ?? null,
+    designSystem: data?.designSystem ?? null,
+    canManage: data?.canManage ?? false,
+    isLoading,
+    error,
+    refetch,
+  };
+}

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

@@ -44,6 +44,7 @@ const messages = {
   },
   agent: {
     emptyState: "Ask me anything about your presentations",
+    thisDeck: "This Deck",
     suggestionPitch: "Build a 10-slide pitch from this doc",
     suggestionBrand: "Apply our brand to this deck",
     suggestionHero: "Generate a hero image for this slide",
@@ -220,11 +221,9 @@ const messages = {
     slideTools: "Slide tools",
     elementAnimations: "Element animations",
     tweaks: "Tweaks",
-    drawOnSlide: "Draw on slide",
+    drawOnSlide: "Annotate slide",
     addTextBox: "Add text box",
     pinComments: "Pin comments",
-    pinCommentsDescription:
-      "Click spots on the slide to queue several edits, then send them all at once.",
     undo: "Undo",
     undoWithShortcut: "Undo ({{shortcut}})",
     redo: "Redo",
@@ -263,6 +262,7 @@ const messages = {
     downloadHtml: "Download as HTML",
     exportPdf: "Export as PDF",
     exportPptx: "Export as PPTX",
+    connectGoogle: "Connect Google",
     openInGoogleSlides: "Open in Google Slides",
     googleSlidesCreated: "Opened in Google Slides",
     googleSlidesCreatedHint:
@@ -383,6 +383,23 @@ const messages = {
     spacing: "Spacing",
     x: "X",
     y: "Y",
+    position: "Position",
+    horizontal: "Horizontal",
+    vertical: "Vertical",
+    top: "Top",
+    middle: "Middle",
+    bottom: "Bottom",
+    rotation: "Rotation",
+    layoutDimensions: "Layout & dimensions",
+    width: "Width",
+    height: "Height",
+    appearance: "Appearance",
+    opacity: "Opacity",
+    cornerRadius: "Corner radius",
+    strokeWeight: "Weight",
+    typography: "Typography",
+    mixed: "Mixed",
+    textColor: "Text color",
     primary: "Primary",
     secondary: "Secondary",
     accent: "Accent",
@@ -605,6 +622,25 @@ const messages = {
     newDeckPlaceholder: "Describe your deck, visual, or diagram...",
     skipPrompt: "Skip prompt",
     designSystem: "Design system",
+    referenceDeck: "Reference deck",
+    referenceDeckPlaceholder: "Match the style of an existing deck",
+    referenceDeckNone: "Don't use one",
+    referenceDeckStarredGroup: "Starred",
+    referenceDeckOtherGroup: "Other decks",
+    workspaceDefaultBadge: "Workspace default",
+    setWorkspaceDefault: "Set as workspace default",
+    clearWorkspaceDefault: "Clear workspace default",
+    workspaceDefaultSet: "Set as the workspace default",
+    workspaceDefaultCleared: "Workspace default cleared",
+    workspaceDefaultFailed: "Couldn't update the workspace default",
+    workspaceDefaultConfirmTitle: "Set as workspace default?",
+    workspaceDefaultDeckShareBody:
+      '"{{title}}" is private. Setting it as the workspace default shares it with every member of this workspace, and new decks will use it as their style reference. Members can select a different reference deck when they create a deck.',
+    workspaceDefaultSystemShareBody:
+      '"{{title}}" is private. Setting it as the workspace default shares it with every member of this workspace, and new decks will use it. Members who have set their own default keep it.',
+    workspaceDefaultConfirmAction: "Set as default",
+    starDeck: "Star deck",
+    unstarDeck: "Unstar deck",
     none: "None",
     defaultSuffix: " (Default)",
     signInTitle: "Sign in to create a deck",

package/corpus/templates/slides/app/lib/generation-state.ts

@@ -10,12 +10,22 @@ export function shouldShowNewDeckGeneratingOverlay({
   return generating && isNewDeckCreation && (slideCount ?? 0) === 0;
 }
 
+export function shouldShowNewDeckGeneratingProgress({
+  generating,
+  isNewDeckCreation,
+}: {
+  generating: boolean;
+  isNewDeckCreation: boolean;
+}): boolean {
+  return generating && isNewDeckCreation;
+}
+
 export function shouldClearNewDeckGeneratingState({
   generating,
-  slideCount,
+  generationStarted,
 }: {
   generating: boolean;
-  slideCount?: number | null;
+  generationStarted: boolean;
 }): boolean {
-  return !generating || (slideCount ?? 0) > 0;
+  return generationStarted && !generating;
 }

package/corpus/templates/slides/app/lib/slide-image-replacement.ts

@@ -156,14 +156,35 @@ export function insertImageIntoSlideHtml(
     return serializeFragment(doc);
   }
 
-  const img = imageElementForPlaceholder(
-    doc,
-    null,
-    newSrc,
-    cleanAlt(options.alt),
+  // No placeholder to slot into: .fmd-slide is a flex column, so a plain
+  // appended <img> becomes a flex item that competes for space with (and
+  // visually squishes) the slide's existing content. Position it as a
+  // full-bleed background layer behind the existing content instead, which
+  // matches how the agent already inserts generated images onto slides that
+  // have none.
+  const img = doc.createElement("img");
+  img.setAttribute("src", newSrc);
+  img.setAttribute("alt", cleanAlt(options.alt));
+  img.className = "fmd-img-uploaded";
+  img.setAttribute(
+    "style",
+    "position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;",
   );
   const slideRoot = doc.body.querySelector<HTMLElement>(".fmd-slide");
-  (slideRoot || doc.body).appendChild(img);
+  const root = slideRoot || doc.body;
+  if (
+    slideRoot &&
+    !/(?:^|;)\s*position\s*:/i.test(slideRoot.getAttribute("style") ?? "")
+  ) {
+    slideRoot.setAttribute(
+      "style",
+      `${(slideRoot.getAttribute("style") ?? "").trim().replace(/;+\s*$/, "")}; position: relative;`.replace(
+        /^;\s*/,
+        "",
+      ),
+    );
+  }
+  root.insertBefore(img, root.firstChild);
   return serializeFragment(doc);
 }
 

package/corpus/templates/slides/app/lib/text-tool-shortcut.ts

@@ -0,0 +1,62 @@
+export interface TextToolShortcutEvent {
+  key: string;
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  defaultPrevented: boolean;
+  repeat: boolean;
+  isComposing: boolean;
+  target: EventTarget | null;
+}
+
+const EDITABLE_OR_BLOCKING_SELECTOR = [
+  "input",
+  "textarea",
+  "select",
+  "[contenteditable='true']",
+  "[role='textbox']",
+  "[role='dialog']",
+  "[role='menu']",
+  "[role='listbox']",
+].join(", ");
+
+function isEditableOrBlockingTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest(EDITABLE_OR_BLOCKING_SELECTOR) !== null
+  );
+}
+
+export function shouldActivateTextTool(
+  event: TextToolShortcutEvent,
+  {
+    canEdit,
+    activeElement,
+    blockingSurfaceOpen,
+  }: {
+    canEdit: boolean;
+    activeElement: Element | null;
+    blockingSurfaceOpen: boolean;
+  },
+): boolean {
+  if (
+    !canEdit ||
+    event.defaultPrevented ||
+    event.repeat ||
+    event.isComposing ||
+    event.key.toLowerCase() !== "t" ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey ||
+    blockingSurfaceOpen
+  ) {
+    return false;
+  }
+
+  return (
+    !isEditableOrBlockingTarget(event.target) &&
+    !isEditableOrBlockingTarget(activeElement)
+  );
+}