@agent-native/core 0.149.5 → 0.151.0

package/corpus/templates/slides/actions/import-file.ts

@@ -28,7 +28,10 @@ import {
   DEFAULT_ASPECT_RATIO,
   type AspectRatio,
 } from "../shared/aspect-ratios.js";
-import { isOpaqueDeckTitle } from "../shared/deck-title.js";
+import {
+  isOpaqueDeckTitle,
+  resolveImportedDeckTitle,
+} from "../shared/deck-title.js";
 import { readUserUploadedFile } from "./_uploaded-files.js";
 import { withDeckLock } from "./patch-deck.js";
 
@@ -182,17 +185,18 @@ export default defineAction({
                 presentation.slides[0].heightEmu,
               )
             : undefined;
-        await appendDeckSlides(
+        const importedTitle = await appendDeckSlides(
           deckId,
           title,
           slides,
           "import-file:pptx",
           aspectRatio,
           sourceImport,
+          pptxResults[0]?.sourceText,
         );
         return {
           format: "pptx",
-          title,
+          title: importedTitle,
           slideCount: slides.length,
           theme: presentation.theme,
           deckId,
@@ -241,10 +245,18 @@ export default defineAction({
           layout: "content",
           notes: "",
         }));
-        await appendDeckSlides(deckId, title, slides, "import-file:docx");
+        const importedTitle = await appendDeckSlides(
+          deckId,
+          title,
+          slides,
+          "import-file:docx",
+          undefined,
+          undefined,
+          doc.text,
+        );
         return {
           format: "docx",
-          title,
+          title: importedTitle,
           sectionCount: doc.sections.length,
           slideCount: slides.length,
           textLength: doc.text.length,
@@ -520,18 +532,19 @@ async function importPdfPagesWithFidelity(args: {
     slides: imported.map((entry) => entry.snapshot),
   });
 
-  await appendDeckSlides(
+  const importedTitle = await appendDeckSlides(
     deckId,
     title,
     slides,
     "import-file:pdf",
     aspectRatio,
     sourceImport,
+    imported[0]?.snapshot.text,
   );
 
   return {
     format: "pdf",
-    title,
+    title: importedTitle,
     pageCount: slides.length,
     slideCount: slides.length,
     aspectRatio,
@@ -674,7 +687,8 @@ async function appendDeckSlides(
   source: string,
   aspectRatio?: AspectRatio,
   sourceImport?: ReturnType<typeof buildSourceImportMetadata>,
-) {
+  titleSource?: unknown,
+): Promise<string> {
   await assertAccess("deck", deckId, "editor");
 
   // Read-modify-write under the shared per-deck lock used by patch-deck /
@@ -682,6 +696,7 @@ async function appendDeckSlides(
   // with another import or an editor/agent slide mutation on the same deck
   // could read stale data and clobber the other write when both save the
   // whole decks.data blob back.
+  let resolvedTitle = title;
   const now = await withDeckLock(deckId, async () => {
     const db = getDb();
     const existing = await db
@@ -706,7 +721,10 @@ async function appendDeckSlides(
     // had no slides yet, otherwise resizing the canvas mid-deck would distort
     // every slide already on it.
     const hadExistingSlides = previousSlides.length > 0;
-    const nextTitle = hadExistingSlides ? (existing[0].title ?? title) : title;
+    const nextTitle = hadExistingSlides
+      ? (existing[0].title ?? title)
+      : resolveImportedDeckTitle(title, titleSource ?? slides[0]?.content);
+    resolvedTitle = nextTitle;
     const nextSourceImport = sourceImport
       ? mergeSourceImportMetadata(
           sourceImportForDeck(previousData.sourceImport),
@@ -736,6 +754,7 @@ async function appendDeckSlides(
 
   notifyClients(deckId);
   await writeAppState("refresh-signal", { ts: now, source });
+  return resolvedTitle;
 }
 
 function safeParseDeckData(raw: string): Record<string, unknown> {

package/corpus/templates/slides/actions/view-screen.ts

@@ -162,12 +162,12 @@ export default defineAction({
           style?: Record<string, unknown>;
         }>;
       } | null;
-      if (
-        selection &&
-        (!selection.slideId || selection.slideId === currentSlide?.id)
-      ) {
+      if (selection && currentSlide && selection.slideId === currentSlide.id) {
         lines.push(``);
         lines.push(`### Current visual selection`);
+        lines.push(
+          `selectionSlideId: ${selection.slideId}   (matches currentSlideId)`,
+        );
         lines.push(`mode: ${selection.mode ?? "unknown"}`);
         lines.push(`activeTool: ${selection.activeTool ?? "select"}`);
         if (Array.isArray(selection.items) && selection.items.length > 0) {

package/corpus/templates/slides/app/components/design-system/DesignSystemSetup.tsx

@@ -581,8 +581,15 @@ export function DesignSystemSetup({
       }. Present a summary for review.`,
     );
 
+    const message =
+      parts[0] ?? "Set up a design system from the selected sources.";
+    const contextParts = parts.slice(1);
     openAgentSidebar();
-    sendToAgentChat({ message: parts.join("\n"), submit: true });
+    sendToAgentChat({
+      message,
+      context: contextParts.join("\n"),
+      submit: true,
+    });
     toast(t("designSystemSetup.generationStarted"), {
       description: t("designSystemSetup.generationStartedDescription"),
     });

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

@@ -0,0 +1,25 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { DEFAULT_AGENT_IDENTITY } from "@agent-native/toolkit/collab-ui";
+
+import { cn } from "@/lib/utils";
+
+/** The single compact marker used for every AI-editing state in Slides. */
+export function AiEditingMarker({ className }: { className?: string }) {
+  const t = useT();
+  const label = t("raw.aiEditing");
+
+  return (
+    <span
+      aria-label={label}
+      className={cn(
+        "inline-flex size-5 shrink-0 items-center justify-center rounded-full text-[9px] font-semibold leading-none text-primary-foreground",
+        className,
+      )}
+      role="img"
+      style={{ backgroundColor: DEFAULT_AGENT_IDENTITY.color }}
+      title={label}
+    >
+      AI
+    </span>
+  );
+}

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

@@ -2,13 +2,13 @@ import {
   agentNativePath,
   appBasePath,
 } from "@agent-native/core/client/api-path";
-import {
-  type AttributedRecentEdit,
-  type CollabUser,
+import type {
+  AttributedRecentEdit,
+  CollabUser,
 } from "@agent-native/core/client/collab";
 import { useAvatarUrl } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { RecentEditHighlights } from "@agent-native/toolkit/collab-ui";
+import { DEFAULT_AGENT_IDENTITY } from "@agent-native/toolkit/collab-ui";
 import {
   useSortable,
   SortableContext,
@@ -22,6 +22,7 @@ import { useCallback } from "react";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { SlideOverflowInfo } from "@/components/deck/SlideRenderer";
+import { AiEditingMarker } from "@/components/editor/AiEditingMarker";
 import GeneratingSlidePreview from "@/components/editor/GeneratingSlidePreview";
 import {
   Tooltip,
@@ -43,14 +44,14 @@ interface EditorSidebarProps {
   readOnly?: boolean;
   /** Presence map: slideId → list of users currently viewing that slide */
   slidePresence?: Map<string, CollabUser[]>;
-  /** Lingering recent edits (e.g. agent edits) to highlight over thumbnails. */
+  /** Lingering recent edits used to show the compact AI marker. */
   recentEdits?: AttributedRecentEdit[];
   /** Deck aspect ratio (defaults to 16:9 when omitted) */
   aspectRatio?: AspectRatio;
   /** Active deck design system used by slide content tokens. */
   designSystem?: DesignSystemData;
   /** The next slide while the agent is preparing its HTML. */
-  generatingSlide?: { index: number; content?: string | null };
+  generatingSlide?: { index: number };
   generatingSlideSelected?: boolean;
   onSelectGeneratingSlide?: () => void;
 }
@@ -72,6 +73,13 @@ function slideIdFromEdit(edit: AttributedRecentEdit): string | null {
   return null;
 }
 
+function isAgentPresenceUser(user: CollabUser): boolean {
+  return (
+    user.email.trim().toLowerCase() ===
+    DEFAULT_AGENT_IDENTITY.email.trim().toLowerCase()
+  );
+}
+
 /** Small presence avatar circle with hover card showing name + email */
 function PresenceAvatarTip({
   user,
@@ -143,6 +151,7 @@ function SortableSlideThumb({
   designSystem,
   onOverflowChange,
   readOnly = false,
+  aiEditing = false,
 }: {
   slide: Slide;
   index: number;
@@ -154,6 +163,7 @@ function SortableSlideThumb({
   aspectRatio?: AspectRatio;
   designSystem?: DesignSystemData;
   onOverflowChange: (info: SlideOverflowInfo) => void;
+  aiEditing?: boolean;
 }) {
   const t = useT();
   const {
@@ -175,6 +185,11 @@ function SortableSlideThumb({
   };
 
   const thumbDims = getAspectRatioDims(aspectRatio);
+  const agentPresent = presenceUsers.some(isAgentPresenceUser);
+  const humanPresenceUsers = presenceUsers.filter(
+    (user) => !isAgentPresenceUser(user),
+  );
+  const showAiMarker = aiEditing || agentPresent;
 
   return (
     <div ref={setNodeRef} style={style}>
@@ -189,7 +204,7 @@ function SortableSlideThumb({
         aria-current={isActive ? "true" : undefined}
         data-slide-thumbnail-id={slide.id}
         className={`w-full text-left flex items-start gap-1.5 p-1.5 rounded-lg transition-[background-color,box-shadow] duration-150 ${
-          isActive ? "bg-accent ring-1 ring-primary/50" : ""
+          isActive ? "bg-accent" : ""
         } ${
           readOnly ? "" : "cursor-grab active:cursor-grabbing"
         } focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1`}
@@ -199,14 +214,17 @@ function SortableSlideThumb({
           <span className="block text-center text-[10px] font-medium leading-5 text-muted-foreground/70">
             {index + 1}
           </span>
-          {presenceUsers.length > 0 && (
+          {(showAiMarker || humanPresenceUsers.length > 0) && (
             <div className="absolute left-1/2 top-5 z-10 flex -translate-x-1/2 flex-col items-center gap-1">
-              {presenceUsers.slice(0, 4).map((u, i) => (
+              {showAiMarker && (
+                <AiEditingMarker className="size-4 text-[8px]" />
+              )}
+              {humanPresenceUsers.slice(0, 4).map((u, i) => (
                 <PresenceAvatarTip key={i} user={u} size={14} />
               ))}
-              {presenceUsers.length > 4 && (
+              {humanPresenceUsers.length > 4 && (
                 <span className="flex h-4 min-w-4 items-center justify-center rounded-full bg-muted px-1 text-[8px] font-medium leading-none text-muted-foreground ring-1 ring-black/40">
-                  +{presenceUsers.length - 4}
+                  +{humanPresenceUsers.length - 4}
                 </span>
               )}
             </div>
@@ -224,8 +242,8 @@ function SortableSlideThumb({
             className="w-full overflow-hidden rounded border"
             style={{
               borderColor:
-                presenceUsers.length > 0
-                  ? presenceUsers[0].color + "66"
+                humanPresenceUsers.length > 0
+                  ? humanPresenceUsers[0].color + "66"
                   : "rgba(255,255,255,0.06)",
               aspectRatio: `${thumbDims.width} / ${thumbDims.height}`,
               contentVisibility: "auto",
@@ -248,14 +266,12 @@ function GeneratingSlideSkeleton({
   index,
   aspectRatio,
   designSystem,
-  content,
   selected,
   onSelect,
 }: {
   index: number;
   aspectRatio?: AspectRatio;
   designSystem?: DesignSystemData;
-  content?: string | null;
   selected?: boolean;
   onSelect?: () => void;
 }) {
@@ -263,20 +279,20 @@ function GeneratingSlideSkeleton({
   return (
     <button
       type="button"
-      className={`relative block w-full rounded-lg text-left transition-[box-shadow] ${
-        selected ? "ring-1 ring-primary" : ""
+      className={`relative block w-full rounded-lg text-left transition-colors ${
+        selected ? "bg-accent" : ""
       }`}
       aria-label={t("editorSidebar.generatingSlide")}
       aria-current={selected ? "true" : undefined}
       onClick={onSelect}
     >
       <div className="flex w-full items-start gap-1.5 rounded-lg p-1.5">
-        <span className="flex-shrink-0 w-4 text-center text-[10px] font-medium leading-5 text-muted-foreground/70">
+        <span className="flex flex-shrink-0 flex-col items-center gap-1 text-center text-[10px] font-medium leading-5 text-muted-foreground/70">
           {index + 1}
+          <AiEditingMarker className="size-4 text-[8px]" />
         </span>
         <div className="flex-1 min-w-0">
           <GeneratingSlidePreview
-            content={content}
             aspectRatio={aspectRatio}
             designSystem={designSystem}
             thumbnail
@@ -302,7 +318,6 @@ export default function EditorSidebar({
   onSelectGeneratingSlide,
 }: EditorSidebarProps) {
   const slideButtonRefs = useRef(new Map<string, HTMLButtonElement>());
-  const thumbScrollRef = useRef<HTMLDivElement>(null);
   const measurementsRef = useRef(
     new Map<
       string,
@@ -310,6 +325,12 @@ export default function EditorSidebar({
     >(),
   );
   const writeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const aiEditedSlideIds = new Set(
+    (recentEdits ?? [])
+      .filter((edit) => edit.isAgent)
+      .map(slideIdFromEdit)
+      .filter((slideId): slideId is string => Boolean(slideId)),
+  );
 
   const writeDeckFitState = useCallback(() => {
     const currentSlideIds = new Set(slides.map((slide) => slide.id));
@@ -383,19 +404,6 @@ export default function EditorSidebar({
     };
   }, []);
 
-  // Resolve a recent-edit descriptor (`slides.<id>`) to the on-screen rect of
-  // that slide's thumbnail button, relative to the scroll container, so the
-  // shared RecentEditHighlights overlay can draw a fading "AI edited" ring.
-  const resolveThumbRect = useCallback(
-    (edit: AttributedRecentEdit): DOMRect | null => {
-      const slideId = slideIdFromEdit(edit);
-      if (!slideId) return null;
-      const node = slideButtonRefs.current.get(slideId);
-      if (!node) return null;
-      return node.getBoundingClientRect();
-    },
-    [],
-  );
   const registerSlideButton = useCallback(
     (slideId: string, node: HTMLButtonElement | null) => {
       if (node) {
@@ -446,10 +454,7 @@ export default function EditorSidebar({
 
   return (
     <div className="flex h-full min-h-0 w-48 flex-shrink-0 flex-col bg-background sm:w-52">
-      <div
-        ref={thumbScrollRef}
-        className="relative min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2"
-      >
+      <div className="relative min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
         <SortableContext
           items={slides.map((s) => s.id)}
           strategy={verticalListSortingStrategy}
@@ -466,6 +471,7 @@ export default function EditorSidebar({
               presenceUsers={slidePresence?.get(slide.id) ?? []}
               aspectRatio={aspectRatio}
               designSystem={designSystem}
+              aiEditing={aiEditedSlideIds.has(slide.id)}
               onOverflowChange={(info) =>
                 handleSlideOverflowChange(slide, info)
               }
@@ -477,21 +483,10 @@ export default function EditorSidebar({
             index={generatingSlide.index}
             aspectRatio={aspectRatio}
             designSystem={designSystem}
-            content={generatingSlide.content}
             selected={generatingSlideSelected}
             onSelect={onSelectGeneratingSlide}
           />
         )}
-        {/* Fading "AI edited" highlights over the thumbnails of just-edited
-            slides (the component handles the fade + name/color tag). */}
-        {recentEdits && recentEdits.length > 0 && (
-          <RecentEditHighlights
-            edits={recentEdits}
-            resolveRect={resolveThumbRect}
-            containerRef={thumbScrollRef}
-            outlineOnly
-          />
-        )}
       </div>
     </div>
   );

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

@@ -590,12 +590,12 @@ export default function EditorToolbar({
         value={deckTitle}
         onChange={(e) => onTitleChange(e.target.value)}
         style={{ width: `${titleInputWidth}px` }}
-        className="min-w-0 max-w-[500px] flex-shrink bg-transparent text-sm font-medium text-foreground/90 outline-none focus:text-foreground"
+        className="min-w-0 max-w-[500px] shrink-0 bg-transparent text-sm font-medium text-foreground/90 outline-none focus:text-foreground"
         spellCheck={false}
       />
 
       {/* Spacer */}
-      <div className="flex-1 min-w-2" />
+      <div className="w-2 shrink-0" />
 
       <div
         ref={onWideContextToolbarSlotChange}
@@ -769,6 +769,13 @@ export default function EditorToolbar({
               </>
             )}
 
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem onSelect={onShowHistory}>
+                <IconHistory className="size-4" />
+                {t("editorToolbar.savedVersions")}
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <ExportMenu
               ref={exportMenuRef}
@@ -794,10 +801,6 @@ export default function EditorToolbar({
                 ? t("editorToolbar.importing")
                 : t("editorToolbar.importFile")}
             </DropdownMenuItem>
-            <DropdownMenuItem onSelect={onShowHistory}>
-              <IconHistory className="size-4" />
-              {t("editorToolbar.savedVersions")}
-            </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem
               onSelect={() => setTheme(isDark ? "light" : "dark")}

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

@@ -1,5 +1,4 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { IconLoader2 } from "@tabler/icons-react";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -47,7 +46,7 @@ export default function GeneratingSlidePreview({
   return (
     <div
       className={cn(
-        "relative w-full overflow-hidden rounded-lg border border-primary/70",
+        "relative w-full overflow-hidden rounded-lg border border-border bg-muted/20",
         className,
       )}
       style={{ aspectRatio: cssRatio }}
@@ -65,13 +64,6 @@ export default function GeneratingSlidePreview({
       ) : (
         <SlideLoadingArtwork />
       )}
-      <div className="pointer-events-none absolute left-2 top-2 inline-flex items-center gap-1.5 rounded-full border border-primary/70 px-2 py-1 text-[11px] font-medium text-primary">
-        <span className="size-1.5 rounded-full bg-primary" aria-hidden="true" />
-        {t("raw.aiEditing")}
-      </div>
-      <div className="absolute right-2 top-2 rounded-full bg-background/80 p-1.5 text-muted-foreground shadow-sm">
-        <IconLoader2 className="size-3.5 animate-spin" aria-hidden="true" />
-      </div>
     </div>
   );
 }

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

@@ -159,12 +159,14 @@ export default function ImageDropPromptPopover({
       if (payload.kind === "hosted") {
         sendToAgentChat({
           message: payload.message,
+          context: payload.context,
           submit: true,
           referenceImagePaths: payload.referenceImagePaths,
         });
       } else {
         sendToAgentChat({
           message: payload.message,
+          context: payload.context,
           submit: true,
           images: payload.images,
         });

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

@@ -3,10 +3,8 @@ import {
   IconPhoto,
   IconFolderOpen,
   IconUpload,
-  IconSearch,
   IconMaximize,
   IconMinimize,
-  IconGlobe,
 } from "@tabler/icons-react";
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
@@ -17,8 +15,6 @@ interface ImageOverlayProps {
   onGenerate: () => void;
   onLibrary: () => void;
   onUpload: () => void;
-  onSearch: () => void;
-  onLogo: () => void;
   onToggleObjectFit: () => void;
   onClose: () => void;
 }
@@ -29,8 +25,6 @@ export default function ImageOverlay({
   onGenerate,
   onLibrary,
   onUpload,
-  onSearch,
-  onLogo,
   onToggleObjectFit,
   onClose,
 }: ImageOverlayProps) {
@@ -106,26 +100,6 @@ export default function ImageOverlay({
         <IconUpload className="w-3.5 h-3.5 text-muted-foreground" />
         Upload
       </button>
-      <button
-        onClick={() => {
-          onSearch();
-          onClose();
-        }}
-        className="image-overlay-btn"
-      >
-        <IconSearch className="w-3.5 h-3.5 text-muted-foreground" />
-        Search
-      </button>
-      <button
-        onClick={() => {
-          onLogo();
-          onClose();
-        }}
-        className="image-overlay-btn"
-      >
-        <IconGlobe className="w-3.5 h-3.5 text-muted-foreground" />
-        Logo
-      </button>
       <div className="mx-1.5 border-t border-border" />
       <button onClick={onToggleObjectFit} className="image-overlay-btn">
         {objectFit === "cover" ? (