@agent-native/core 0.141.3 → 0.141.4

package/corpus/templates/slides/app/lib/create-deck-generation.ts

@@ -0,0 +1,305 @@
+import { callAction } from "@agent-native/core/client/hooks";
+import { extractGoogleDocUrls } from "@shared/google-docs";
+import { flushSync } from "react-dom";
+
+import type { NewDeckReferenceSelection } from "@/components/editor/NewDeckReferenceStep";
+import type { UploadedFile } from "@/components/editor/PromptDialog";
+import type { Deck } from "@/context/DeckContext";
+import { createDeckAgentMessage } from "@/lib/agent-visible-message";
+
+interface DesignSystemGenerationContextResult {
+  agentContext?: string;
+}
+
+async function loadDesignSystemGenerationContext(
+  designSystemId?: string | null,
+): Promise<string> {
+  if (!designSystemId) return "";
+  try {
+    const result = (await callAction(
+      "get-design-system",
+      { id: designSystemId },
+      { method: "GET" },
+    )) as DesignSystemGenerationContextResult | undefined;
+    if (result?.agentContext?.trim()) {
+      return [
+        "",
+        result.agentContext.trim(),
+        "",
+        "The selected design system context above was hydrated before this agent run. Follow it directly; do not replace it with generic colors, fonts, spacing, imagery, or slide components.",
+      ].join("\n");
+    }
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : "unknown loading error";
+    return [
+      "",
+      "## Selected Design System Context",
+      `The selected design system id "${designSystemId}" could not be loaded before generation: ${message}`,
+      "Before adding slides, call `get-design-system` for this id. If it still fails, stop and tell the user the selected design system is unavailable instead of improvising a generic style.",
+    ].join("\n");
+  }
+  return [
+    "",
+    "## Selected Design System Context",
+    `The selected design system id "${designSystemId}" returned no generation context.`,
+    "Call `get-design-system` for this id before adding slides. If it still has no usable tokens/docs, stop and ask the user to finish design-system indexing instead of improvising a generic style.",
+  ].join("\n");
+}
+
+interface ReferenceDeckContextResult {
+  agentContext?: string;
+}
+
+async function loadReferenceDeckGenerationContext(
+  referenceDeckId?: string | null,
+): Promise<string> {
+  if (!referenceDeckId) return "";
+  try {
+    const result = (await callAction(
+      "get-deck-reference-context",
+      { id: referenceDeckId },
+      { method: "GET" },
+    )) as ReferenceDeckContextResult | undefined;
+    if (result?.agentContext?.trim()) {
+      return `\n${result.agentContext.trim()}`;
+    }
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : "unknown loading error";
+    return [
+      "",
+      "## Reference Deck",
+      `The user picked deck "${referenceDeckId}" as a style reference, but it could not be loaded before generation: ${message}`,
+      "Before adding slides, call `get-deck-reference-context` for this id. If it still fails, tell the user the reference deck is unavailable instead of inventing a style.",
+    ].join("\n");
+  }
+  return [
+    "",
+    "## Reference Deck",
+    `The user picked deck "${referenceDeckId}" as a style reference, but it returned no usable context.`,
+    `Call \`get-deck --id ${referenceDeckId}\` before generating. If that deck is empty, tell the user instead of silently generating without a reference.`,
+  ].join("\n");
+}
+
+function describeUploadedFilesForAgent(
+  files: UploadedFile[],
+  deckId: string,
+): string {
+  if (files.length === 0) return "";
+  const fileList = files
+    .map(
+      (file) =>
+        `- ${file.originalName} (${file.type}, ${(file.size / 1024).toFixed(1)}KB) at path: ${file.path}${file.url ? `; embeddable URL: ${file.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}\` before adding or editing slides.`,
+    `- 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");
+}
+
+function mergeUploadedFilesForRetry(
+  savedFiles: UploadedFile[],
+  newFiles: UploadedFile[],
+): UploadedFile[] {
+  const seen = new Set<string>();
+  return [...savedFiles, ...newFiles].filter((file) => {
+    const key = file.path || file.url || file.filename;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+type Navigate = (
+  to: string,
+  options?: { flushSync?: boolean; replace?: boolean },
+) => void;
+
+type CreateDeck = (
+  title?: string,
+  options?: { noDefaultSlides?: boolean; designSystemId?: string | null },
+) => Deck;
+
+type SubmitAgent = (
+  message: string,
+  context: string,
+  options: {
+    newTab: boolean;
+    reuseEmptyTab: boolean;
+    openSidebar: boolean;
+  },
+) => void;
+
+export interface StartDeckGenerationOptions {
+  session: unknown | null;
+  prompt: string;
+  files: UploadedFile[];
+  retryFiles?: UploadedFile[];
+  referenceSelection?: NewDeckReferenceSelection;
+  selectedDesignSystemId?: string | null;
+  selectedReferenceDeckId?: string | null;
+  designSystems: Array<{ id: string; title: string }>;
+  createDeck: CreateDeck;
+  ensureDeckPersisted: (id: string) => Promise<boolean>;
+  deleteDeck: (id: string) => void;
+  navigate: Navigate;
+  agentSubmit: SubmitAgent;
+  onPromptClosed: () => void;
+  onUnauthenticated: (prompt: string, hadFiles: boolean) => void;
+  onPersistenceFailure: (prompt: string, files: UploadedFile[]) => void;
+}
+
+/** Create the optimistic deck, hydrate references, and start the agent run. */
+export async function startDeckGeneration({
+  session,
+  prompt,
+  files,
+  retryFiles = [],
+  referenceSelection = {},
+  selectedDesignSystemId,
+  selectedReferenceDeckId,
+  designSystems,
+  createDeck,
+  ensureDeckPersisted,
+  deleteDeck,
+  navigate,
+  agentSubmit,
+  onPromptClosed,
+  onUnauthenticated,
+  onPersistenceFailure,
+}: StartDeckGenerationOptions): Promise<
+  "started" | "failed" | "unauthenticated"
+> {
+  if (!session) {
+    onUnauthenticated(prompt, files.length > 0);
+    return "unauthenticated";
+  }
+
+  const filesForGeneration = mergeUploadedFilesForRetry(retryFiles, files);
+  const designSystemId =
+    referenceSelection.designSystemId !== undefined
+      ? referenceSelection.designSystemId
+      : selectedDesignSystemId && selectedDesignSystemId !== "none"
+        ? selectedDesignSystemId
+        : null;
+  const referenceDeckId =
+    referenceSelection.referenceDeckId !== undefined
+      ? referenceSelection.referenceDeckId
+      : selectedReferenceDeckId && selectedReferenceDeckId !== "none"
+        ? selectedReferenceDeckId
+        : null;
+  const selectedDesignSystem = designSystemId
+    ? designSystems.find((designSystem) => designSystem.id === designSystemId)
+    : undefined;
+
+  let deck: Deck | undefined;
+  flushSync(() => {
+    deck = createDeck(undefined, {
+      noDefaultSlides: true,
+      designSystemId: selectedDesignSystem?.id ?? null,
+    });
+  });
+  if (!deck) return "failed";
+  const deckId = deck.id;
+  onPromptClosed();
+
+  const persisted = await ensureDeckPersisted(deck.id);
+  if (!persisted) {
+    onPersistenceFailure(prompt, filesForGeneration);
+    deleteDeck(deckId);
+    return "failed";
+  }
+
+  navigate(`/deck/${deck.id}`, { flushSync: true });
+
+  const trimmedPrompt = prompt.trim();
+  const hasImportedGoogleDocContext = trimmedPrompt.includes("<google-doc ");
+  const googleDocUrls = hasImportedGoogleDocContext
+    ? []
+    : extractGoogleDocUrls(trimmedPrompt);
+  const fileContext = describeUploadedFilesForAgent(filesForGeneration, deckId);
+  const googleDocContext =
+    googleDocUrls.length > 0
+      ? [
+          "",
+          "The request includes Google Docs URL(s):",
+          ...googleDocUrls.map((url) => `- ${url}`),
+          "Before adding slides, call `import-google-doc` for each URL and use the returned text as source material.",
+          "If the action cannot read a private document, tell the user the exact sharing step from the action error instead of generating from the URL alone.",
+        ].join("\n")
+      : "";
+  const referenceDeckContext =
+    await loadReferenceDeckGenerationContext(referenceDeckId);
+  const hydratedDesignSystemContext = await loadDesignSystemGenerationContext(
+    selectedDesignSystem?.id,
+  );
+  const designSystemContext = selectedDesignSystem
+    ? [
+        "",
+        "Design system selection:",
+        `- Use "${selectedDesignSystem.title}" (id: ${selectedDesignSystem.id}).`,
+        "- The deck has already been linked to this design system.",
+        "- Use the hydrated design system context below for colors, typography, spacing, imagery, and slide defaults.",
+        hydratedDesignSystemContext,
+        "- Do not choose or apply a different design system.",
+      ].join("\n")
+    : [
+        "",
+        "Design system selection:",
+        "- None selected. Do not apply a design system unless the user asks for one.",
+      ].join("\n");
+  const referenceSource = referenceSelection.referenceSource;
+  const referenceSourceContext = referenceSource
+    ? [
+        "",
+        "Additional reference source selected in the reference step:",
+        `- ${referenceSource.kind}: ${referenceSource.value}`,
+        referenceSource.kind === "google-docs"
+          ? "Call `import-google-doc` before generating and use the returned text as source material."
+          : referenceSource.kind === "website"
+            ? "Call `import-from-url` before generating and use the returned page context as a reference."
+            : "Use the Figma source as the design reference. If Builder or Figma access is required, report the exact connection step instead of guessing.",
+      ].join("\n")
+    : "";
+
+  const context = [
+    `The user just created a new empty deck (id: "${deckId}") and wants to create a presentation or standalone visual.`,
+    "The visible user message above contains the user's request and/or pasted source material for the deck. Treat pasted memo content as source material even if the user did not explicitly say they are pasting it.",
+    googleDocContext,
+    fileContext,
+    referenceDeckContext,
+    designSystemContext,
+    referenceSourceContext,
+    "",
+    "Before generating, if the request or selected references leave a meaningful choice unresolved, use the `ask-question` tool to ask one concise, prompt-specific question in the inline guided-question flow. Generate the question wording and 2 to 4 options from the user's request and selected references, like Claude's design-question flow; do not use a fixed generic questionnaire. Ask only a choice that materially affects the deck, such as audience, tone, structure, or length. If the prompt already makes the choice clear, do not ask it again. Wait for the user's answer or skip before adding slides.",
+    "Start a `manage-progress` run so progress appears in the app header. Add the first slide as soon as it is ready, then continue one slide at a time so the editor visibly fills in.",
+    `After reading any requested or imported source material, but before adding the first slide, choose a concise, specific deck title from the user's request and source material. Call \`patch-deck\` with \`deckId: \"${deckId}\"\` and \`operations: [{ \"op\": \"patch-deck-fields\", \"fields\": { \"title\": \"<generated title>\" } }]\`. Include only \`title\` in \`fields\`; omit all other optional fields. Never leave a generated deck named \"Untitled Deck\" or another placeholder.`,
+    "If the user asks for a standalone visual, diagram, hero, one-pager, poster, or a couple of visuals, create only the requested one/few polished visual slides. Do not pad the result into a full presentation.",
+    `Add slides ONE AT A TIME using the \`add-slide\` action with --deckId=${deckId}. Wait for each \`add-slide\` result before calling it again; do not batch or parallelize slide writes.`,
+    "If the user asked for a specific slide count, keep going sequentially until that count is reached unless a tool error blocks you.",
+    "Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels, with 740x380px available inside standard 80px 110px padding). Keep the main content within that fit budget; split dense source material across more slides instead of packing it tightly. Never use zoom, transform: scale(), clipping, or scroll overflow to hide content overflow, and keep body text at least 16px.",
+    "Each slide's --content must be full HTML. Slide HTML templates are in your AGENTS.md.",
+    "Do NOT use create-deck (the deck already exists). Do NOT call db-schema, the resources tool, or search-files.",
+  ].join("\n");
+
+  navigate(`/deck/${deck.id}?generating=1`, {
+    replace: true,
+    flushSync: true,
+  });
+  agentSubmit(createDeckAgentMessage(trimmedPrompt), context, {
+    newTab: true,
+    reuseEmptyTab: true,
+    openSidebar: true,
+  });
+  return "started";
+}

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

@@ -34,7 +34,6 @@ import { DeckEditorSkeleton } from "@/components/editor/DeckEditorSkeleton";
 import { EditorActionCluster } from "@/components/editor/EditorActionCluster";
 import EditorSidebar from "@/components/editor/EditorSidebar";
 import EditorToolbar from "@/components/editor/EditorToolbar";
-import GeneratingOverlay from "@/components/editor/GeneratingOverlay";
 import GeneratingSlidePreview from "@/components/editor/GeneratingSlidePreview";
 import HistoryPanel from "@/components/editor/HistoryPanel";
 import ImageDropPromptPopover from "@/components/editor/ImageDropPromptPopover";
@@ -1157,18 +1156,19 @@ export default function DeckEditor() {
         )}
 
         {!generatingSlideSelected &&
-          showNewDeckGeneratingOverlay &&
+          generatingSlideVisible &&
           deck.slides.length === 0 &&
-          !showQuestionFlow && <GeneratingOverlay />}
-
-        {isNewDeckGenerating && deck.slides.length > 0 && !showQuestionFlow && (
-          <div className="pointer-events-none absolute left-1/2 top-3 z-30 -translate-x-1/2 rounded-lg border border-border bg-popover/95 px-3 py-2 text-sm text-popover-foreground shadow-lg backdrop-blur">
-            <span className="font-medium">{t("deckEditor.buildingDeck")}</span>
-            <span className="ml-2 text-muted-foreground">
-              {t("deckEditor.slidesAdded", { count: deck.slides.length })}
-            </span>
-          </div>
-        )}
+          !showQuestionFlow && (
+            <div className="flex min-h-0 flex-1 overflow-auto bg-background p-4 md:p-8">
+              <div className="m-auto w-full max-w-6xl">
+                <GeneratingSlidePreview
+                  content={streamedGeneratingSlideContent}
+                  aspectRatio={deck.aspectRatio}
+                  thumbnail={false}
+                />
+              </div>
+            </div>
+          )}
 
         {showCurrentSlideEditor && currentSlide && (
           <SlideEditor