@agent-native/core 0.137.1 → 0.137.2

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

@@ -6,7 +6,6 @@ import {
   type AttributedRecentEdit,
   type CollabUser,
 } from "@agent-native/core/client/collab";
-import { PromptComposer } from "@agent-native/core/client/composer";
 import { useAvatarUrl } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { RecentEditHighlights } from "@agent-native/toolkit/collab-ui";
@@ -19,34 +18,23 @@ import { CSS } from "@dnd-kit/utilities";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
 import { hashSlideContent, type DeckFitState } from "@shared/slide-fit";
 import {
-  IconPlus,
   IconGripVertical,
   IconCopy,
   IconTrash,
   IconLoader2,
-  IconSquarePlus,
 } from "@tabler/icons-react";
-import { useState, useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import { useCallback } from "react";
-import { createPortal } from "react-dom";
-import { toast } from "sonner";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { SlideOverflowInfo } from "@/components/deck/SlideRenderer";
 import GeneratingSlidePreview from "@/components/editor/GeneratingSlidePreview";
-import { GoogleDocImportHint } from "@/components/editor/GoogleDocImportHint";
-import {
-  isInsidePortaledLayer,
-  type UploadedFile,
-} from "@/components/editor/PromptDialog";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import type { Slide } from "@/context/DeckContext";
-import { useAgentGenerating } from "@/hooks/use-agent-generating";
-import { addSlideAgentMessage } from "@/lib/agent-visible-message";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 import { TAB_ID } from "@/lib/tab-id";
 
@@ -54,11 +42,9 @@ interface EditorSidebarProps {
   slides: Slide[];
   activeSlideId: string;
   deckId: string;
-  deckTitle: string;
   onSelectSlide: (id: string) => void;
   onDuplicateSlide: (id: string) => void;
   onDeleteSlide: (id: string) => void;
-  onAddEmptySlide: () => void;
   /** Viewer-role decks get thumbnails only: no add, duplicate, or delete. */
   readOnly?: boolean;
   /** Presence map: slideId → list of users currently viewing that slide */
@@ -71,8 +57,6 @@ interface EditorSidebarProps {
   generatingSlide?: { index: number; content?: string | null };
   generatingSlideSelected?: boolean;
   onSelectGeneratingSlide?: () => void;
-  addSlideGenerating?: boolean;
-  onAddSlideGeneratingChange?: (generating: boolean) => void;
 }
 
 const DECK_FIT_STATE_KEYS = [
@@ -92,46 +76,6 @@ function slideIdFromEdit(edit: AttributedRecentEdit): string | null {
   return null;
 }
 
-const MAX_SOURCE_CONTEXT_CHARS = 60_000;
-
-function truncateSourceForContext(prompt: string): {
-  text: string;
-  truncated: boolean;
-} {
-  if (prompt.length <= MAX_SOURCE_CONTEXT_CHARS) {
-    return { text: prompt, truncated: false };
-  }
-  return {
-    text: prompt.slice(0, MAX_SOURCE_CONTEXT_CHARS),
-    truncated: true,
-  };
-}
-
-function describeUploadedFilesForAgent(
-  files: UploadedFile[],
-  deckId: string,
-): string {
-  if (files.length === 0) return "";
-  const fileList = files
-    .map(
-      (f) =>
-        `- ${f.originalName} (${f.type}, ${(f.size / 1024).toFixed(1)}KB) at path: ${f.path}${f.url ? `; embeddable URL: ${f.url}` : ""}`,
-    )
-    .join("\n");
-  return [
-    "",
-    `The user uploaded ${files.length} file(s). These paths are real uploaded files; process them with import actions before using their contents:`,
-    fileList,
-    "",
-    "File handling rules:",
-    `- PPTX files: call \`import-pptx --filePath "<path>" --deckId ${deckId}\` when the user wants the deck/slides imported, or to extract slide source from a presentation.`,
-    `- PDF and DOCX files: call \`import-file --filePath "<path>" --format auto --deckId ${deckId}\` and use the returned extracted text as source material. The returned text is capped for reliability; re-run with maxChars only if more context is needed.`,
-    "- Text-like files: use the uploaded-text-file blocks already included in the prompt; do not call import-file for them.",
-    '- Image files with an embeddable URL can be inserted directly into slide HTML as `<img src="...">` or used as visual references.',
-    "- Image files without a URL are visual/reference assets only; do not claim to have processed a PPTX/PDF/DOCX unless the relevant import action succeeds.",
-  ].join("\n");
-}
-
 /** Small presence avatar circle with hover card showing name + email */
 function PresenceAvatarTip({
   user,
@@ -192,6 +136,14 @@ function PresenceAvatarTip({
   );
 }
 
+// Thumbnail overlays sit on top of rendered slide artwork, which is arbitrary
+// user content rather than a themed app surface, so they use a fixed scrim.
+const THUMB_OVERLAY_CLASS =
+  // guard:allow-raw-color — matches the duplicate/delete overlays below.
+  "absolute top-2 left-7 rounded bg-black/60 p-1 backdrop-blur-sm border border-white/10 cursor-grab active:cursor-grabbing sm:opacity-0 sm:group-hover:opacity-100";
+// guard:allow-raw-color — same fixed scrim as the class above.
+const THUMB_OVERLAY_ICON_CLASS = "w-3 h-3 text-white/60";
+
 function SortableSlideThumb({
   slide,
   index,
@@ -245,28 +197,19 @@ function SortableSlideThumb({
         aria-label={t("editorSidebar.selectSlide", { number: index + 1 })}
         aria-current={isActive ? "true" : undefined}
         data-slide-thumbnail-id={slide.id}
-        className={`w-full text-left flex items-start gap-2 p-2 rounded-lg transition-[background-color,box-shadow] duration-150 ${
+        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-[#609FF8]/50" : "hover:bg-accent"
         } focus:outline-none`}
       >
-        {/* Drag handle */}
-        <div
-          {...attributes}
-          {...listeners}
-          className="flex-shrink-0 mt-2 cursor-grab active:cursor-grabbing sm:opacity-0 sm:group-hover:opacity-100"
-        >
-          <IconGripVertical className="w-3.5 h-3.5 text-muted-foreground/70" />
-        </div>
-
         {/* Index and slide presence share the fixed rail so presence does not resize the row. */}
-        <div className="relative flex-shrink-0 w-5 self-stretch mt-2">
-          <span className="block text-center text-[10px] font-medium text-muted-foreground/70">
+        <div className="relative flex-shrink-0 w-4 self-stretch">
+          <span className="block text-center text-[10px] font-medium leading-5 text-muted-foreground/70">
             {index + 1}
           </span>
           {presenceUsers.length > 0 && (
-            <div className="absolute left-1/2 top-6 z-10 flex -translate-x-1/2 flex-col items-center gap-1">
+            <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) => (
-                <PresenceAvatarTip key={i} user={u} size={16} />
+                <PresenceAvatarTip key={i} user={u} size={14} />
               ))}
               {presenceUsers.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">
@@ -297,6 +240,14 @@ function SortableSlideThumb({
         </div>
       </button>
 
+      {/* Drag handle — overlaid on the thumbnail instead of holding its own
+       * column, so the rail stays narrow. Mirrors the action buttons opposite. */}
+      {!readOnly && (
+        <div {...attributes} {...listeners} className={THUMB_OVERLAY_CLASS}>
+          <IconGripVertical className={THUMB_OVERLAY_ICON_CLASS} />
+        </div>
+      )}
+
       {/* Actions - always visible on touch devices */}
       {!readOnly && (
         <div className="absolute top-2 right-2 flex gap-0.5 sm:opacity-0 sm:group-hover:opacity-100">
@@ -360,9 +311,8 @@ function GeneratingSlideSkeleton({
       aria-current={selected ? "true" : undefined}
       onClick={onSelect}
     >
-      <div className="w-full flex items-start gap-2 p-2 rounded-lg bg-accent/30">
-        <div className="flex-shrink-0 mt-2 w-3.5 h-3.5" />
-        <span className="flex-shrink-0 w-5 mt-2 text-[10px] font-medium text-muted-foreground/70">
+      <div className="w-full flex items-start gap-1.5 p-1.5 rounded-lg bg-accent/30">
+        <span className="flex-shrink-0 w-4 text-center text-[10px] font-medium leading-5 text-muted-foreground/70">
           {index + 1}
         </span>
         <div className="flex-1 min-w-0">
@@ -377,218 +327,13 @@ function GeneratingSlideSkeleton({
   );
 }
 
-function AddSlidePopover({
-  open,
-  onOpenChange,
-  anchorRef,
-  deckId,
-  deckTitle,
-  activeSlideId,
-  slideCount,
-  activeSlideIndex,
-  agentSubmit,
-  onDuplicateCurrent,
-  onAddEmpty,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  anchorRef: React.RefObject<HTMLElement | null>;
-  deckId: string;
-  deckTitle: string;
-  activeSlideId: string;
-  slideCount: number;
-  activeSlideIndex: number;
-  agentSubmit: (message: string, context: string) => void;
-  onDuplicateCurrent?: () => void;
-  onAddEmpty?: () => void;
-}) {
-  const t = useT();
-  const panelRef = useRef<HTMLDivElement>(null);
-  const [promptText, setPromptText] = useState("");
-  const [googleDocContext, setGoogleDocContext] = useState("");
-
-  useEffect(() => {
-    if (!open) return;
-    const handleClick = (e: MouseEvent) => {
-      if (isInsidePortaledLayer(e.target)) return;
-      if (
-        panelRef.current &&
-        !panelRef.current.contains(e.target as Node) &&
-        anchorRef.current &&
-        !anchorRef.current.contains(e.target as Node)
-      ) {
-        onOpenChange(false);
-      }
-    };
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onOpenChange(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    document.addEventListener("keydown", handleKey);
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-      document.removeEventListener("keydown", handleKey);
-    };
-  }, [open, onOpenChange, anchorRef]);
-
-  const handleSubmit = useCallback(
-    async (text: string, files: File[]) => {
-      let uploaded: UploadedFile[] = [];
-      if (files.length > 0) {
-        try {
-          const formData = new FormData();
-          files.forEach((f) => formData.append("files", f));
-          const res = await fetch(`${appBasePath()}/api/uploads`, {
-            method: "POST",
-            body: formData,
-          });
-          if (!res.ok) {
-            const data = await res.json().catch(() => null);
-            throw new Error(data?.error || t("editorSidebar.uploadFailed"));
-          }
-          uploaded = (await res.json()) as UploadedFile[];
-        } catch (error) {
-          toast.error(t("editorSidebar.uploadFailed"), {
-            description:
-              error instanceof Error
-                ? error.message
-                : t("editorSidebar.uploadAttachedFileFailed"),
-          });
-          return;
-        }
-      }
-
-      const trimmedText = text.trim();
-      const googleDocSourceForContext =
-        truncateSourceForContext(googleDocContext);
-      const fileContext = describeUploadedFilesForAgent(uploaded, deckId);
-      const context = [
-        `Add a new slide to deck "${deckTitle}" (id: ${deckId}).`,
-        `Insert after slide ${activeSlideIndex + 1} of ${slideCount} (active slide id: ${activeSlideId}).`,
-        "The visible user message above contains the user's request and/or pasted source material for the new slide(s). Treat pasted memo content as source material even if the user did not explicitly say they are pasting it.",
-        googleDocSourceForContext.text,
-        googleDocSourceForContext.truncated
-          ? `The pasted source was longer than ${MAX_SOURCE_CONTEXT_CHARS} characters, so only the first ${MAX_SOURCE_CONTEXT_CHARS} characters were included to keep the agent request reliable.`
-          : "",
-        fileContext,
-        "",
-        "Create the slide content and insert it at the correct position using `add-slide` with --deckId=" +
-          deckId +
-          ".",
-        "Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels). Keep each slide within the density limits in AGENTS.md; split dense source material across more slides instead of packing it tightly.",
-        "If the user asked for multiple slides, call `add-slide` once per slide. Use positions starting at " +
-          (activeSlideIndex + 1) +
-          " so the new slides land after the active slide in order.",
-        "For larger requests, keep adding slides sequentially: wait for each add-slide result, then call add-slide for the next slide. Start slide 1 immediately; do not wait to design the entire sequence before adding it.",
-      ].join("\n");
-
-      agentSubmit(addSlideAgentMessage(trimmedText), context);
-      onOpenChange(false);
-    },
-    [
-      activeSlideId,
-      activeSlideIndex,
-      agentSubmit,
-      deckId,
-      deckTitle,
-      googleDocContext,
-      onOpenChange,
-      slideCount,
-    ],
-  );
-
-  useEffect(() => {
-    if (!open) {
-      setPromptText("");
-      setGoogleDocContext("");
-    }
-  }, [open]);
-
-  if (!open || !anchorRef.current) return null;
-
-  const rect = anchorRef.current.getBoundingClientRect();
-  const panelWidth = Math.min(420, window.innerWidth - 24);
-  const left = Math.max(
-    12,
-    Math.min(rect.left, window.innerWidth - panelWidth - 12),
-  );
-
-  return createPortal(
-    <div
-      ref={panelRef}
-      className="fixed w-[min(420px,calc(100vw-24px))] rounded-xl border border-border bg-popover shadow-2xl shadow-black/60 z-[200] p-3"
-      style={{
-        top: rect.bottom + 8,
-        left,
-      }}
-    >
-      <p className="px-1 pb-2 text-sm font-medium text-foreground/90">
-        {t("editorSidebar.addSlides")}
-      </p>
-      {(onAddEmpty || (onDuplicateCurrent && slideCount > 0)) && (
-        <>
-          {onAddEmpty && (
-            <button
-              type="button"
-              onClick={() => {
-                onAddEmpty();
-                onOpenChange(false);
-              }}
-              className="w-full mb-1 px-2.5 py-2 text-left text-sm rounded-md hover:bg-accent transition-colors flex items-center gap-2 text-foreground/90 cursor-pointer"
-            >
-              <IconSquarePlus className="w-4 h-4 text-muted-foreground" />
-              <span>{t("editorSidebar.addEmptySlide")}</span>
-              <span className="ml-auto text-[11px] text-muted-foreground">
-                {t("editorSidebar.noAi")}
-              </span>
-            </button>
-          )}
-          {onDuplicateCurrent && slideCount > 0 && (
-            <button
-              type="button"
-              onClick={() => {
-                onDuplicateCurrent();
-                onOpenChange(false);
-              }}
-              className="w-full mb-2 px-2.5 py-2 text-left text-sm rounded-md hover:bg-accent transition-colors flex items-center gap-2 text-foreground/90 cursor-pointer"
-            >
-              <IconCopy className="w-4 h-4 text-muted-foreground" />
-              <span>{t("editorSidebar.duplicateCurrentSlide")}</span>
-              <span className="ml-auto text-[11px] text-muted-foreground">
-                {t("editorSidebar.noAi")}
-              </span>
-            </button>
-          )}
-          <div className="-mx-3 mb-2 h-px bg-border" />
-        </>
-      )}
-      <PromptComposer
-        autoFocus
-        placeholder={t("editorSidebar.promptPlaceholder")}
-        draftScope={`slides:add-slide:${deckId}`}
-        onSubmit={handleSubmit}
-        onTextChange={setPromptText}
-      />
-      <div className="-mx-1 mt-2">
-        <GoogleDocImportHint
-          promptText={promptText}
-          onSourceContextChange={setGoogleDocContext}
-        />
-      </div>
-    </div>,
-    document.body,
-  );
-}
-
 export default function EditorSidebar({
   slides,
   activeSlideId,
   deckId,
-  deckTitle,
   onSelectSlide,
   onDuplicateSlide,
   onDeleteSlide,
-  onAddEmptySlide,
   readOnly = false,
   slidePresence,
   recentEdits,
@@ -596,13 +341,7 @@ export default function EditorSidebar({
   generatingSlide,
   generatingSlideSelected = false,
   onSelectGeneratingSlide,
-  addSlideGenerating = false,
-  onAddSlideGeneratingChange,
 }: EditorSidebarProps) {
-  const t = useT();
-  const activeIndex = slides.findIndex((s) => s.id === activeSlideId);
-  const [addOpen, setAddOpen] = useState(false);
-  const headerAddRef = useRef<HTMLButtonElement>(null);
   const slideButtonRefs = useRef(new Map<string, HTMLButtonElement>());
   const thumbScrollRef = useRef<HTMLDivElement>(null);
   const measurementsRef = useRef(
@@ -698,8 +437,6 @@ export default function EditorSidebar({
     },
     [],
   );
-  const { generating, submit: agentSubmit } = useAgentGenerating();
-
   const registerSlideButton = useCallback(
     (slideId: string, node: HTMLButtonElement | null) => {
       if (node) {
@@ -711,11 +448,6 @@ export default function EditorSidebar({
     [],
   );
 
-  // Reset addSlideGenerating when global generating stops
-  useEffect(() => {
-    if (!generating) onAddSlideGeneratingChange?.(false);
-  }, [generating, onAddSlideGeneratingChange]);
-
   // Arrow key navigation for slides
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -754,30 +486,7 @@ export default function EditorSidebar({
   }, [slides, activeSlideId, onSelectSlide]);
 
   return (
-    <div className="flex h-full min-h-0 w-56 flex-shrink-0 flex-col border-r border-border/70 bg-background/95 sm:w-64">
-      <div className="flex items-center justify-between border-b border-border/70 p-3">
-        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-          {t("editorSidebar.slides")}
-        </span>
-        {readOnly ? null : addSlideGenerating ? (
-          <IconLoader2 className="w-4 h-4 text-muted-foreground animate-spin" />
-        ) : (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                ref={headerAddRef}
-                onClick={() => setAddOpen(!addOpen)}
-                className="p-2 rounded-md hover:bg-accent transition-colors"
-                aria-label={t("editorSidebar.addSlides")}
-              >
-                <IconPlus className="w-4 h-4 text-muted-foreground" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>{t("editorSidebar.addSlides")}</TooltipContent>
-          </Tooltip>
-        )}
-      </div>
-
+    <div className="flex h-full min-h-0 w-48 flex-shrink-0 flex-col border-r border-border/70 bg-background/95 sm:w-52">
       <div
         ref={thumbScrollRef}
         className="relative min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2"
@@ -824,27 +533,6 @@ export default function EditorSidebar({
           />
         )}
       </div>
-
-      {!readOnly && (
-        <AddSlidePopover
-          open={addOpen}
-          onOpenChange={setAddOpen}
-          anchorRef={headerAddRef}
-          deckId={deckId}
-          deckTitle={deckTitle}
-          activeSlideId={activeSlideId}
-          slideCount={slides.length}
-          activeSlideIndex={activeIndex >= 0 ? activeIndex : 0}
-          agentSubmit={(msg, ctx) => {
-            onAddSlideGeneratingChange?.(true);
-            agentSubmit(msg, ctx);
-          }}
-          onDuplicateCurrent={
-            activeSlideId ? () => onDuplicateSlide(activeSlideId) : undefined
-          }
-          onAddEmpty={onAddEmptySlide}
-        />
-      )}
     </div>
   );
 }