@agent-native/core 0.176.1 → 0.176.2-nightly-20260831185956

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

@@ -2,18 +2,10 @@ import {
   IconChevronDown,
   IconChevronRight,
   IconGripVertical,
-  IconLayersSubtract,
   IconX,
 } from "@tabler/icons-react";
 import { useState, type DragEvent } from "react";
 
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
 export interface SlidesLayerNode {
   id: string;
   label: string;
@@ -82,11 +74,12 @@ function LayerRow({
   return (
     <div
       role="treeitem"
+      aria-level={depth + 1}
       aria-expanded={children.length ? expanded : undefined}
       aria-selected={selected}
     >
       <div
-        className={`group flex min-h-9 items-center gap-1 rounded-md px-2 text-sm transition-colors ${selected ? "bg-accent text-accent-foreground" : "hover:bg-accent/60"} ${dragging ? "opacity-50" : ""}`}
+        className={`group flex h-8 items-center gap-1 rounded-[5px] px-2 text-xs text-foreground/90 transition-colors ${selected ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-foreground"} ${dragging ? "opacity-50" : ""}`}
         style={{ paddingLeft: `${8 + depth * 16}px` }}
         onDragOver={(event) => event.preventDefault()}
         onDragEnter={() => setDragging(true)}
@@ -96,14 +89,14 @@ function LayerRow({
         {children.length ? (
           <button
             type="button"
-            className="rounded p-0.5 text-muted-foreground hover:text-foreground"
+            className="rounded-sm p-0.5 text-muted-foreground outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring"
             aria-label={expanded ? labels.collapse : labels.expand}
             onClick={() => setExpanded((value) => !value)}
           >
             {expanded ? (
-              <IconChevronDown size={15} />
+              <IconChevronDown size={16} />
             ) : (
-              <IconChevronRight size={15} />
+              <IconChevronRight size={16} />
             )}
           </button>
         ) : (
@@ -112,7 +105,7 @@ function LayerRow({
         <button
           type="button"
           draggable
-          className="flex min-w-0 flex-1 items-center gap-2 py-1.5 text-left"
+          className="flex min-w-0 flex-1 items-center gap-2 py-0.5 text-left outline-none focus-visible:ring-1 focus-visible:ring-ring"
           onDragStart={(event) => {
             event.dataTransfer.setData("text/plain", node.id);
             event.dataTransfer.effectAllowed = "move";
@@ -126,7 +119,7 @@ function LayerRow({
           }
         >
           <IconGripVertical
-            size={15}
+            size={14}
             className="shrink-0 text-muted-foreground/60"
             aria-hidden="true"
           />
@@ -162,31 +155,24 @@ export function SlidesLayersPanel({
 }: SlidesLayersPanelProps) {
   return (
     <aside
-      className="flex h-full w-64 flex-col border-l border-border bg-background"
+      className="flex h-full w-72 min-w-0 flex-col bg-background"
       aria-label={labels.title}
     >
-      <header className="flex h-11 items-center justify-between border-b border-border px-3">
-        <div className="flex items-center gap-2 text-sm font-medium">
-          <IconLayersSubtract size={16} aria-hidden="true" />
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-border px-4">
+        <h2 className="text-sm font-semibold text-foreground">
           {labels.title}
-        </div>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-7"
-              onClick={onClose}
-              aria-label={labels.close}
-            >
-              <IconX size={16} />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>{labels.close}</TooltipContent>
-        </Tooltip>
+        </h2>
+        <button
+          type="button"
+          className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+          onClick={onClose}
+          aria-label={labels.close}
+        >
+          <IconX className="size-4" />
+        </button>
       </header>
       <div
-        className="min-h-0 flex-1 overflow-y-auto p-2"
+        className="min-h-0 flex-1 overflow-y-auto py-2"
         role="tree"
         aria-label={labels.title}
       >

package/corpus/templates/slides/app/components/editor/slide-style.ts

@@ -11,6 +11,8 @@ export interface SlideStyleSnapshot {
   textPreview: string;
   isText: boolean;
   isImage: boolean;
+  objectFit?: "cover" | "contain";
+  objectPosition?: string;
   isAbsolute: boolean;
   x: number;
   y: number;
@@ -20,6 +22,7 @@ export interface SlideStyleSnapshot {
   slideWidth: number;
   slideHeight: number;
   color: string;
+  fontFamily: string;
   backgroundColor: string;
   fontSize: number;
   fontWeight: string;
@@ -41,6 +44,7 @@ export interface SlideStyleSnapshot {
 
 export type SlideStylePatch = Partial<{
   color: string;
+  fontFamily: string;
   backgroundColor: string;
   fontSize: string;
   fontWeight: string;
@@ -66,6 +70,7 @@ export type SlideStylePatch = Partial<{
 
 const MULTI_STYLE_KEYS = [
   "color",
+  "fontFamily",
   "fontSize",
   "fontWeight",
   "fontStyle",

package/corpus/templates/slides/app/components/editor/style-clipboard.ts

@@ -19,6 +19,7 @@ export function setCopiedStyle(s: CopiedStyle | null): void {
 export type CopiedElementStyle = Pick<
   SlideStylePatch,
   | "color"
+  | "fontFamily"
   | "backgroundColor"
   | "fontSize"
   | "fontWeight"
@@ -48,6 +49,7 @@ export function copiedElementStyleFromSnapshot(
 ): CopiedElementStyle {
   return {
     color: snapshot.color,
+    fontFamily: snapshot.fontFamily,
     backgroundColor: snapshot.backgroundColor,
     fontSize: px(snapshot.fontSize),
     fontWeight: snapshot.fontWeight,

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

@@ -1,4 +1,8 @@
-import { focusAgentChat } from "@agent-native/core/client/agent-chat";
+import {
+  focusAgentChat,
+  SIDEBAR_STATE_CHANGE_EVENT,
+  type AgentSidebarStateChangeDetail,
+} from "@agent-native/core/client/agent-chat";
 import { useT } from "@agent-native/core/client/i18n";
 import { IconLoader2, IconMessageCircle } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
@@ -38,9 +42,19 @@ export function isAgentSidebarVisible() {
 
 function useAgentSidebarVisible() {
   const [visible, setVisible] = useState(false);
+  const sidebarStateRef = useRef<boolean | null>(null);
 
   useEffect(() => {
-    const update = () => setVisible(isAgentSidebarVisible());
+    const update = () => {
+      setVisible(sidebarStateRef.current ?? isAgentSidebarVisible());
+    };
+    const handleStateChange = (event: Event) => {
+      const detail = (event as CustomEvent<AgentSidebarStateChangeDetail>)
+        .detail;
+      if (typeof detail?.open !== "boolean") return;
+      sidebarStateRef.current = detail.open;
+      setVisible(detail.open);
+    };
     update();
 
     // The panel is a portal and is normally a direct child of body. Discover
@@ -78,6 +92,7 @@ function useAgentSidebarVisible() {
     discovery.observe(document.body, { childList: true });
     updateAndObserve();
     window.addEventListener("resize", update);
+    window.addEventListener(SIDEBAR_STATE_CHANGE_EVENT, handleStateChange);
     window.addEventListener("agent-panel:open", update);
     window.addEventListener("agent-panel:toggle", update);
     window.addEventListener("agent-panel:set-mode", update);
@@ -87,6 +102,7 @@ function useAgentSidebarVisible() {
       panelObserver?.disconnect();
       parentObserver?.disconnect();
       window.removeEventListener("resize", update);
+      window.removeEventListener(SIDEBAR_STATE_CHANGE_EVENT, handleStateChange);
       window.removeEventListener("agent-panel:open", update);
       window.removeEventListener("agent-panel:toggle", update);
       window.removeEventListener("agent-panel:set-mode", update);

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

@@ -11,7 +11,7 @@ import { useLocation } from "react-router";
 import { useDecks } from "@/context/DeckContext";
 
 const pageTitleKeys: Record<string, string> = {
-  "/": "header.decks",
+  "/home": "header.decks",
   "/design-systems": "header.designSystems",
   "/agent": "settings.agentTitle",
   "/settings": "header.settings",

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

@@ -1,4 +1,9 @@
-import { AgentSidebar } from "@agent-native/core/client/agent-chat";
+import {
+  AgentSidebar,
+  isAssistantChatHistoryVersion,
+  type AssistantChatHistoryConfig,
+  type AssistantChatHistoryVersion,
+} from "@agent-native/core/client/agent-chat";
 import { useT } from "@agent-native/core/client/i18n";
 import { InvitationBanner } from "@agent-native/core/client/org";
 import { CreativeContextComposerChip } from "@agent-native/creative-context/client";
@@ -8,7 +13,6 @@ import { IconMenu2 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router";
 
-import { useDecks } from "@/context/DeckContext";
 import { useSidebarCollapsed } from "@/hooks/use-sidebar-collapsed";
 import {
   hasCurrentSlideSelection,
@@ -60,10 +64,6 @@ export function Layout({ children }: LayoutProps) {
     useState<EditorSidebarOverride | null>(null);
   const { collapsed: sidebarCollapsed, setCollapsed: setSidebarCollapsed } =
     useSidebarCollapsed();
-  const { decks, loading: decksLoading } = useDecks();
-  const isEmptyDecksState =
-    location.pathname === "/" && !decksLoading && decks.length === 0;
-
   useEffect(() => {
     const onSelectionChanged = (event: Event) => {
       setSlidesSelection(
@@ -94,6 +94,34 @@ export function Layout({ children }: LayoutProps) {
       contextKey: "slides-current-context",
     };
   }, [location.pathname, slidesSelection, t]);
+  const deckChatHistory = useMemo<
+    AssistantChatHistoryConfig | undefined
+  >(() => {
+    if (!deckScope) return undefined;
+    const deckId = deckScope.id;
+    return {
+      list: {
+        action: "list-deck-versions",
+        args: { deckId, limit: 100 },
+        getVersions: (result: unknown) => {
+          const versions =
+            result && typeof result === "object"
+              ? (result as { versions?: unknown }).versions
+              : undefined;
+          return Array.isArray(versions)
+            ? versions.filter(isAssistantChatHistoryVersion)
+            : [];
+        },
+      },
+      restore: {
+        action: "restore-deck-version",
+        args: (version: AssistantChatHistoryVersion) => ({
+          deckId,
+          versionId: version.id,
+        }),
+      },
+    };
+  }, [deckScope]);
 
   useEffect(() => {
     setSidebarOpen(false);
@@ -141,6 +169,7 @@ export function Layout({ children }: LayoutProps) {
           t("agent.suggestionHero"),
         ]}
         scope={deckScope}
+        chatHistory={deckChatHistory}
         browserTabId={TAB_ID}
         agentPageHref="/settings/agent"
         suppressFirstRunOnboarding={isSlidesEditorRoute(location.pathname)}
@@ -155,7 +184,7 @@ export function Layout({ children }: LayoutProps) {
         }
       >
         <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
-          {!isEmptyDecksState && showAppSidebar && (
+          {showAppSidebar && (
             <>
               {sidebarOpen && (
                 <div
@@ -186,7 +215,7 @@ export function Layout({ children }: LayoutProps) {
           )}
           <div className="agent-layout-main-surface flex h-full min-w-0 flex-1 flex-col overflow-hidden">
             {/* Mobile-only nav strip with hamburger — only when there's no page toolbar */}
-            {!isEmptyDecksState && !ownToolbar && (
+            {!ownToolbar && (
               <div className="flex h-12 items-center border-b border-border px-4 md:hidden shrink-0">
                 <button
                   onClick={() => setSidebarOpen(true)}
@@ -197,8 +226,8 @@ export function Layout({ children }: LayoutProps) {
                 </button>
               </div>
             )}
-            {!isEmptyDecksState && !ownToolbar && <Header />}
-            {!isEmptyDecksState && <InvitationBanner />}
+            {!ownToolbar && <Header />}
+            <InvitationBanner />
             <main
               className={cn(
                 "agent-native-app-main min-h-0 flex-1",

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

@@ -1,9 +1,8 @@
-import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 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";
+import { AgentNativeIcon, FeedbackButton } from "@agent-native/core/client/ui";
 import { SidebarFooterActions } from "@agent-native/toolkit/app-shell";
 import {
   IconLayoutGrid,
@@ -23,7 +22,7 @@ import {
 import { cn } from "@/lib/utils";
 
 const navItems = [
-  { icon: IconLayoutGrid, labelKey: "navigation.decks", href: "/" },
+  { icon: IconLayoutGrid, labelKey: "navigation.decks", href: "/home" },
   {
     icon: IconComponents,
     labelKey: "navigation.designSystems",
@@ -47,8 +46,8 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
   const t = useT();
 
   const isItemActive = (href: string) =>
-    href === "/"
-      ? location.pathname === "/"
+    href === "/home"
+      ? location.pathname === "/home"
       : location.pathname.startsWith(href);
 
   const collapseButton = onToggleCollapsed ? (
@@ -106,21 +105,9 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
         collapsed ? "size-8 justify-center" : "min-w-0 flex-1",
       )}
     >
-      <img
-        src={appPath("/agent-native-icon-light.svg")}
-        alt=""
+      <AgentNativeIcon
         aria-hidden="true"
-        width={28}
-        height={16}
-        className="block h-4 w-7 shrink-0 object-contain object-center dark:hidden"
-      />
-      <img
-        src={appPath("/agent-native-icon-dark.svg")}
-        alt=""
-        aria-hidden="true"
-        width={28}
-        height={16}
-        className="hidden h-4 w-7 shrink-0 object-contain object-center dark:block"
+        className="h-3.5 w-6 shrink-0 text-sidebar-foreground"
       />
       {!collapsed && (
         <span className="truncate text-sm font-semibold tracking-tight">
@@ -273,7 +260,7 @@ export function Sidebar({ collapsed, onToggleCollapsed }: SidebarProps) {
             })}
           </nav>
 
-          <div className="px-3 py-2">
+          <div className="px-3 py-2 empty:hidden">
             <OrgSwitcher />
           </div>
 

package/corpus/templates/slides/app/components/presentation/PresenterView.tsx

@@ -7,7 +7,11 @@ import type { Slide } from "@/context/DeckContext";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 
 import type { DesignSystemData } from "../../../shared/api";
-import { openPresentChannel, type PresentMessage } from "./present-channel";
+import {
+  advancePresentIndex,
+  openPresentChannel,
+  type PresentMessage,
+} from "./present-channel";
 
 interface PresenterViewProps {
   slides: Slide[];
@@ -54,21 +58,36 @@ export default function PresenterView({
   }, [slides, startIndex]);
   const [index, setIndex] = useState(initialIndex);
   const [elapsed, setElapsed] = useState(0);
+  const safeSlides = useMemo(
+    () =>
+      Array.isArray(slides)
+        ? slides.filter(
+            (slide): slide is Slide => Boolean(slide) && !slide.skipped,
+          )
+        : [],
+    [slides],
+  );
   const channelRef = useRef<BroadcastChannel | null>(null);
+  const controllerConnectedRef = useRef(false);
   const indexRef = useRef(index);
   indexRef.current = index;
 
   useEffect(() => {
     const channel = openPresentChannel(deckId);
     channelRef.current = channel;
+    controllerConnectedRef.current = false;
     if (!channel) return;
     channel.onmessage = (event: MessageEvent<PresentMessage>) => {
-      if (event.data?.type === "state") setIndex(event.data.index);
+      if (event.data?.type === "state") {
+        controllerConnectedRef.current = true;
+        setIndex(event.data.index);
+      }
     };
     channel.postMessage({ type: "hello" } satisfies PresentMessage);
     return () => {
       channel.close();
       channelRef.current = null;
+      controllerConnectedRef.current = false;
     };
   }, [deckId]);
 
@@ -77,9 +96,20 @@ export default function PresenterView({
     return () => window.clearInterval(timer);
   }, []);
 
-  const send = useCallback((message: PresentMessage) => {
-    channelRef.current?.postMessage(message);
-  }, []);
+  const send = useCallback(
+    (message: PresentMessage) => {
+      const channel = channelRef.current;
+      if (message.type === "command" && !controllerConnectedRef.current) {
+        channel?.postMessage(message);
+        setIndex((current) =>
+          advancePresentIndex(current, message.command, safeSlides.length),
+        );
+        return;
+      }
+      channel?.postMessage(message);
+    },
+    [safeSlides.length],
+  );
 
   const goNext = useCallback(
     () => send({ type: "command", command: "next" }),
@@ -110,16 +140,6 @@ export default function PresenterView({
     return () => window.removeEventListener("keydown", handleKey);
   }, [goNext, goPrev]);
 
-  const safeSlides = useMemo(
-    () =>
-      Array.isArray(slides)
-        ? slides.filter(
-            (slide): slide is Slide => Boolean(slide) && !slide.skipped,
-          )
-        : [],
-    [slides],
-  );
-
   // One atomic effect handles both cases so they can't race each other:
   // - A genuine deep link or deck switch (startIndex/deckId changed) reseeds
   //   from initialIndex. This route is reused across decks (see the

package/corpus/templates/slides/app/components/presentation/present-channel.ts

@@ -9,6 +9,18 @@ export type PresentMessage =
   | { type: "command"; command: "next" | "prev" }
   | { type: "hello" };
 
+export function advancePresentIndex(
+  index: number,
+  command: "next" | "prev",
+  slideCount: number,
+): number {
+  if (slideCount <= 0) return 0;
+  const current = Math.max(0, Math.min(index, slideCount - 1));
+  return command === "next"
+    ? Math.min(slideCount - 1, current + 1)
+    : Math.max(0, current - 1);
+}
+
 export function openPresentChannel(deckId: string): BroadcastChannel | null {
   if (typeof BroadcastChannel === "undefined") return null;
   return new BroadcastChannel(`slides-present:${deckId}`);

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

@@ -1,4 +1,4 @@
-/* Self-hosted via @fontsource-variable/inter and @fontsource/poppins — no render-blocking Google Fonts request */
+/* Self-hosted via Fontsource; no render-blocking Google Fonts request */
 @import "@fontsource-variable/inter";
 /* Poppins has no variable-font Fontsource package; use static weights */
 @import "@fontsource/poppins/300.css";
@@ -7,6 +7,11 @@
 @import "@fontsource/poppins/600.css";
 @import "@fontsource/poppins/700.css";
 @import "@fontsource/poppins/800.css";
+/* JetBrains Mono is offered by the shared font-family picker. */
+@import "@fontsource/jetbrains-mono/400.css";
+@import "@fontsource/jetbrains-mono/500.css";
+@import "@fontsource/jetbrains-mono/600.css";
+@import "@fontsource/jetbrains-mono/700.css";
 
 @import "tailwindcss";
 @import "@agent-native/core/styles/agent-native.css";
@@ -1153,6 +1158,8 @@ button[title="Open agent sidebar"] {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
   animation: overlay-fade-in 0.12s ease-out;
 }
 
@@ -1171,23 +1178,15 @@ button[title="Open agent sidebar"] {
    Sits above the rendered slide so it reads as "in progress" instead of a
    static placeholder for the length of the generation run. */
 .slide-thumbnail-ai-shimmer {
-  background: linear-gradient(
+  background-image: linear-gradient(
     100deg,
     transparent 30%,
-    rgba(255, 255, 255, 0.16) 50%,
+    rgba(255, 255, 255, 0.058) 50%,
     transparent 70%
   );
+  background-position: 150% 0;
   background-size: 200% 100%;
-  animation: slide-thumbnail-shimmer 1.6s ease-in-out infinite;
-}
-
-@keyframes slide-thumbnail-shimmer {
-  from {
-    background-position: 150% 0;
-  }
-  to {
-    background-position: -50% 0;
-  }
+  animation: skeleton-shimmer 1.6s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1217,6 +1216,39 @@ button[title="Open agent sidebar"] {
   color: hsl(var(--popover-foreground));
 }
 
+.image-overlay-position {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: hsl(var(--popover-foreground) / 0.8);
+}
+
+.image-overlay-position:hover,
+.image-overlay-position:focus-within {
+  background: hsl(var(--accent));
+  color: hsl(var(--popover-foreground));
+}
+
+.image-overlay-position select {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.image-overlay-position option {
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+}
+
 /* ─── Inline Slide Editor (TipTap) ─── */
 
 .slide-tiptap-editor {

package/corpus/templates/slides/app/hooks/use-navigation-state.ts

@@ -150,7 +150,7 @@ export function useNavigationState() {
       method: "DELETE",
       headers: { "X-Agent-Native-CSRF": "1", "X-Request-Source": TAB_ID },
     }).catch(() => {});
-    let path = "/";
+    let path = "/home";
 
     if (cmd.deckId) {
       path = `/deck/${cmd.deckId}`;

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

@@ -421,6 +421,17 @@ const messages = {
     cornerRadius: "Corner radius",
     strokeWeight: "Weight",
     typography: "Typography",
+    fontFamily: "Font family",
+    fontFamilies: {
+      inherit: "Inherit",
+      sansSerif: "Sans Serif",
+      serif: "Serif",
+      monospace: "Monospace",
+      inter: "Inter",
+      poppins: "Poppins",
+      playfairDisplay: "Playfair Display",
+      jetBrainsMono: "JetBrains Mono",
+    },
     weight: "Weight",
     italic: "Italic",
     underline: "Underline",