@tomako/tools-runtime 0.1.0

package/src/features/tools/pitch-deck-generator/widget/pitch-deck-generator.tsx

@@ -0,0 +1,763 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "@tomako/ui/collapsible";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@tomako/ui/tabs";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import { downloadBlob } from "../../../../lib/file/download";
+import {
+    PITCH_DECK_FUNDING_STAGES,
+    PITCH_DECK_LANGUAGES,
+    PITCH_DECK_STYLE_PRESETS,
+    pitchDeckInputSchema,
+    type PitchDeckFundingStage,
+    type PitchDeckInput,
+    type PitchDeckLanguage,
+    type PitchDeckResult
+} from "../../../../lib/tools/pitch-deck-generator-schema";
+import { packPitchDeckZip } from "../../../../lib/tools/pitch-deck-package";
+import { fetchImageGenerationResult } from "../../../../host/client";
+import {
+    fetchPitchDeckTask,
+    sendPitchDeckRevision,
+    sendPitchDeckSlideRevision,
+    submitPitchDeck,
+    type LlmTaskWatchPollOutcome,
+    type PitchDeckSlideRevision,
+} from "../../../../host/client";
+import {
+    ChevronDown,
+    Loader2
+} from "lucide-react";
+import Image from "next/image";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+    GRACE_WINDOW_MS,
+    IMAGE_STATUS_POLL_MS,
+    POLL_INTERVAL_MS,
+    defaultForm,
+} from "./constants";
+import {
+    isPlaceholder,
+    mergeImageTaskResult,
+    mergeSlides,
+    resultStamp,
+    wait
+} from "./result-helpers";
+import { ResultShell } from "./result-shell";
+import { SlideLightbox } from "./slide-lightbox";
+import { StyleOption } from "./style-option";
+import type {
+    CopyMap,
+    ErrorCategory,
+    FieldErrors,
+    FormState,
+    PackState,
+    WidgetState,
+} from "./types";
+
+export function PitchDeckGenerator() {
+  const t = useTranslations("toolsPages.pitchDeckGenerator.widget");
+  const locale = useLocale() as AppLocale;
+  const copy = t.raw("copy") as CopyMap;
+
+  const [form, setForm] = useState<FormState>(defaultForm);
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [revisionError, setRevisionError] = useState<string | null>(null);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+  const [revision, setRevision] = useState("");
+  const [slideHistory, setSlideHistory] = useState<Record<number, string[]>>({});
+  const [pendingSlides, setPendingSlides] = useState<ReadonlySet<number>>(new Set());
+  const [generatingSince, setGeneratingSince] = useState<Record<number, number>>({});
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+  const [nowMs, setNowMs] = useState(0);
+  const [packState, setPackState] = useState<PackState>({ phase: "idle" });
+
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const productUrlRef = useRef<HTMLInputElement | null>(null);
+  const productNameRef = useRef<HTMLInputElement | null>(null);
+  const productContextRef = useRef<HTMLTextAreaElement | null>(null);
+  const cancelledRef = useRef(false);
+  const imagePollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const settledRef = useRef(false);
+  const latestResultRef = useRef<PitchDeckResult | undefined>(undefined);
+  const baselineStampRef = useRef<string | null>(null);
+  const prevSlideUrlsRef = useRef<Record<number, string | undefined>>({});
+  const deadlineRef = useRef(0);
+  const taskWatch = useLegacyLlmTaskWatch<PitchDeckResult>();
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((current) => ({ ...current, [key]: value }));
+    if (key === "productUrl" || key === "productName" || key === "productContext") {
+      setFieldErrors((current) => ({ ...current, [key]: undefined }));
+    }
+  }
+
+  function cleanup() {
+    taskWatch.stop();
+    if (imagePollTimerRef.current) clearInterval(imagePollTimerRef.current);
+    imagePollTimerRef.current = null;
+  }
+
+  useEffect(() => {
+    return () => {
+      cancelledRef.current = true;
+      taskWatch.stop();
+      if (imagePollTimerRef.current) clearInterval(imagePollTimerRef.current);
+      imagePollTimerRef.current = null;
+    };
+  }, [taskWatch]);
+
+  /**
+   * Bookkeeping when a new result snapshot arrives (always from async
+   * callbacks, never during render): countdown start times, per-slide
+   * version history, and clearing regeneration markers.
+   */
+  function ingestResult(next: PitchDeckResult) {
+    const now = Date.now();
+    // Progress is happening — extend the watch deadline so a long deck run
+    // with live partials never flips into a full-page timeout.
+    deadlineRef.current = now + GRACE_WINDOW_MS;
+    const prevUrls = prevSlideUrlsRef.current;
+    const historyUpdates: Record<number, string> = {};
+    const sinceUpdates: Record<number, number> = {};
+    const resolvedPending: number[] = [];
+
+    for (const slide of next.slides) {
+      if (slide.status === "generating") sinceUpdates[slide.index] = now;
+      const prevUrl = prevUrls[slide.index];
+      if (slide.imageUrl && prevUrl && prevUrl !== slide.imageUrl) {
+        historyUpdates[slide.index] = prevUrl;
+        resolvedPending.push(slide.index);
+      }
+      if (slide.status === "failed") resolvedPending.push(slide.index);
+      prevUrls[slide.index] = slide.imageUrl ?? prevUrl;
+    }
+
+    if (Object.keys(sinceUpdates).length) {
+      setGeneratingSince((current) => {
+        const next = { ...current };
+        for (const [key, value] of Object.entries(sinceUpdates)) {
+          const index = Number(key);
+          if (!next[index]) next[index] = value;
+        }
+        return next;
+      });
+    }
+    if (Object.keys(historyUpdates).length) {
+      setSlideHistory((current) => {
+        const next = { ...current };
+        for (const [key, url] of Object.entries(historyUpdates)) {
+          const index = Number(key);
+          next[index] = [...(next[index] ?? []), url];
+        }
+        return next;
+      });
+    }
+    if (resolvedPending.length) {
+      setPendingSlides((current) => {
+        if (![...current].some((index) => resolvedPending.includes(index))) return current;
+        const next = new Set(current);
+        for (const index of resolvedPending) next.delete(index);
+        return next;
+      });
+    }
+  }
+
+  /**
+   * The server snapshot can lag behind the browser's own image-status
+   * polling: a slide we already resolved to ready+imageUrl may still be
+   * queued/generating in the next partial writeback. Overwriting would
+   * unmount the image (replaying mount animations in a loop), so keep the
+   * locally-known outcome until the server catches up with its own URL.
+   */
+  function reconcileWithLocal(data: PitchDeckResult): PitchDeckResult {
+    const local = latestResultRef.current;
+    if (!local) return data;
+    const localByIndex = new Map(local.slides.map((slide) => [slide.index, slide]));
+    return {
+      ...data,
+      slides: data.slides.map((slide) => {
+        const known = localByIndex.get(slide.index);
+        if (!known) return slide;
+        // A new imageTaskId means the Agent restarted this slide — trust the server.
+        const sameTask = !slide.imageTaskId || slide.imageTaskId === known.imageTaskId;
+        if (!slide.imageUrl && sameTask && known.imageUrl && known.status === "ready") {
+          return { ...slide, status: "ready", imageUrl: known.imageUrl, downloadUrl: known.downloadUrl };
+        }
+        if (!slide.imageUrl && sameTask && slide.status !== "failed" && known.status === "failed") {
+          return { ...slide, status: "failed", qaNotes: known.qaNotes };
+        }
+        return slide;
+      }),
+    };
+  }
+
+  function finishDone(rawData: PitchDeckResult, taskId: string) {
+    if (cancelledRef.current || settledRef.current) return;
+    const data = reconcileWithLocal(rawData);
+    ingestResult(data);
+    if (data.resultStatus !== "final") {
+      latestResultRef.current = data;
+      setState({ phase: "running", status: "AWAITING_FINAL", taskId, data });
+      return;
+    }
+    settledRef.current = true;
+    cleanup();
+    latestResultRef.current = data;
+    setPendingSlides(new Set());
+    setState({ phase: "done", data, taskId });
+  }
+
+  function finishError(category: ErrorCategory, taskId?: string) {
+    if (cancelledRef.current || settledRef.current) return;
+    settledRef.current = true;
+    cleanup();
+    setPendingSlides(new Set());
+    setState({ phase: "error", category, taskId, previous: latestResultRef.current });
+  }
+
+  async function pollOnce(taskId: string): Promise<LlmTaskWatchPollOutcome> {
+    const result = await fetchPitchDeckTask(taskId);
+    if (cancelledRef.current || settledRef.current) {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+
+    if (result.data) {
+      // During a revision, the endpoint keeps returning the pre-revision
+      // result until the Agent writes back; ignore that stale snapshot.
+      if (baselineStampRef.current && resultStamp(result.data) === baselineStampRef.current) {
+        return { settled: false as const, pendingWriteback: true as const };
+      }
+      baselineStampRef.current = null;
+      const data = reconcileWithLocal(result.data);
+      ingestResult(data);
+      latestResultRef.current = data;
+      setState({ phase: "running", status: result.status, taskId, data });
+      if (data.resultStatus === "final") {
+        return { settled: true as const, kind: "success" as const, data };
+      }
+      return { settled: false as const, pendingWriteback: true as const };
+    }
+    if (result.status === "FAILED") {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+    if (result.status === "RESULT_INVALID") {
+      return { settled: true as const, kind: "error" as const, category: "schema" as const };
+    }
+    setState({ phase: "running", status: result.status, taskId, data: latestResultRef.current });
+    return { settled: false as const };
+  }
+
+  function startWatch(taskId: string, initial?: PitchDeckResult) {
+    latestResultRef.current = initial;
+    setState({ phase: "running", status: "PENDING", taskId, data: initial });
+    if (!initial) {
+      void wait(80).then(() => {
+        resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+      });
+    }
+    deadlineRef.current = Date.now() + GRACE_WINDOW_MS;
+    taskWatch.start(
+      taskId,
+      pollOnce,
+      {
+        onStatus: (status) => {
+          if (!cancelledRef.current && !settledRef.current) {
+            setState({ phase: "running", status, taskId, data: latestResultRef.current });
+          }
+        },
+        onSuccess: (data) => finishDone(data, taskId),
+        onError: (category) => finishError(category === "timeout" ? "timeout" : category, taskId),
+      },
+      { pollIntervalMs: POLL_INTERVAL_MS, graceWindowMs: GRACE_WINDOW_MS },
+    );
+  }
+
+  function focusFirstError(errors: FieldErrors) {
+    const target = errors.productUrl
+      ? productUrlRef.current
+      : errors.productName
+        ? productNameRef.current
+        : errors.productContext
+          ? productContextRef.current
+          : null;
+    target?.scrollIntoView({ behavior: "smooth", block: "center" });
+    target?.focus({ preventScroll: true });
+  }
+
+  function validateInput(): PitchDeckInput | null {
+    const parsed = pitchDeckInputSchema.safeParse(form);
+    const errors: FieldErrors = {};
+
+    if (!parsed.success) {
+      for (const issue of parsed.error.issues) {
+        const key = issue.path[0];
+        if (key === "productUrl") errors.productUrl = t("fieldErrors.productUrl");
+        if (key === "productName") errors.productName = t("fieldErrors.productName");
+        if (key === "productContext") errors.productContext = t("fieldErrors.productContext");
+      }
+    }
+    if (form.contextMode === "url" && !errors.productUrl && isPlaceholder(form.productUrl)) {
+      errors.productUrl = t("fieldErrors.productUrl");
+    }
+    if (form.contextMode === "manual") {
+      if (!errors.productName && isPlaceholder(form.productName)) {
+        errors.productName = t("fieldErrors.productNamePlaceholder");
+      }
+      if (!errors.productContext && isPlaceholder(form.productContext)) {
+        errors.productContext = t("fieldErrors.productContextPlaceholder");
+      }
+    }
+
+    if (Object.values(errors).some(Boolean)) {
+      setFieldErrors(errors);
+      focusFirstError(errors);
+      return null;
+    }
+    setFieldErrors({});
+    return parsed.success ? parsed.data : null;
+  }
+
+  async function generateDeck() {
+    const parsed = validateInput();
+    if (!parsed) return;
+    cancelledRef.current = false;
+    settledRef.current = false;
+    baselineStampRef.current = null;
+    prevSlideUrlsRef.current = {};
+    setSlideHistory({});
+    setGeneratingSince({});
+    setPendingSlides(new Set());
+    setLightboxIndex(null);
+    cleanup();
+    setState({ phase: "submitting" });
+
+    try {
+      const submitted = await submitPitchDeck(parsed, locale);
+      startWatch(submitted.taskId);
+    } catch {
+      finishError("submit");
+    }
+  }
+
+  async function reviseDeck(current: PitchDeckResult, taskId: string) {
+    const parsed = validateInput();
+    if (!parsed) return;
+    if (revision.trim().length < 6) {
+      setRevisionError(t("errors.revision"));
+      return;
+    }
+    setRevisionError(null);
+    cancelledRef.current = false;
+    settledRef.current = false;
+    baselineStampRef.current = resultStamp(current);
+    cleanup();
+
+    try {
+      await sendPitchDeckRevision(taskId, parsed, locale, revision, current);
+      setRevision("");
+      startWatch(taskId, current);
+    } catch {
+      finishError("submit", taskId);
+    }
+  }
+
+  async function reviseSlide(
+    current: PitchDeckResult,
+    taskId: string,
+    request: PitchDeckSlideRevision,
+  ) {
+    cancelledRef.current = false;
+    settledRef.current = false;
+    baselineStampRef.current = resultStamp(current);
+    cleanup();
+    setGeneratingSince((currentMap) => ({ ...currentMap, [request.slideIndex]: Date.now() }));
+    setPendingSlides((currentSet) => new Set([...currentSet, request.slideIndex]));
+    setLightboxIndex(null);
+
+    try {
+      await sendPitchDeckSlideRevision(taskId, request, current);
+      startWatch(taskId, current);
+    } catch {
+      finishError("submit", taskId);
+    }
+  }
+
+  async function packAll(result: PitchDeckResult) {
+    setPackState({ phase: "packing", done: 0, total: 0 });
+    try {
+      const outcome = await packPitchDeckZip(result, ({ done, total }) => {
+        setPackState({ phase: "packing", done, total });
+      });
+      downloadBlob(outcome.blob, outcome.filename);
+      setPackState({ phase: "idle" });
+    } catch {
+      setPackState({ phase: "error" });
+    }
+  }
+
+  const busy = state.phase === "submitting" || state.phase === "running";
+  const selectedStyle = useMemo(() => form.stylePreset, [form.stylePreset]);
+  const currentResult =
+    state.phase === "done"
+      ? state.data
+      : state.phase === "running"
+        ? state.data
+        : state.phase === "error"
+          ? state.previous
+          : undefined;
+  const currentTaskId =
+    state.phase === "done"
+      ? state.taskId
+      : state.phase === "running"
+        ? state.taskId
+        : state.phase === "error"
+          ? state.taskId
+          : undefined;
+  const mergedSlides = useMemo(() => mergeSlides(currentResult), [currentResult]);
+
+  // 1s clock for countdowns while anything is generating.
+  const anyGenerating =
+    pendingSlides.size > 0 ||
+    (currentResult?.slides ?? []).some((slide) => slide.status === "generating");
+  useEffect(() => {
+    if (!anyGenerating) return;
+    const timer = window.setInterval(() => setNowMs(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, [anyGenerating]);
+
+  useEffect(() => {
+    const pendingTaskIds = [
+      ...new Set(
+        (currentResult?.slides ?? [])
+          .filter((slide) => slide.imageTaskId && !slide.imageUrl && slide.status !== "failed")
+          .map((slide) => slide.imageTaskId as string),
+      ),
+    ];
+
+    if (!pendingTaskIds.length) {
+      if (imagePollTimerRef.current) clearInterval(imagePollTimerRef.current);
+      imagePollTimerRef.current = null;
+      return;
+    }
+
+    let disposed = false;
+
+    async function refreshImageTasks() {
+      for (const imageTaskId of pendingTaskIds) {
+        try {
+          const imageResult = await fetchImageGenerationResult(imageTaskId);
+          if (disposed || !["SUCCEEDED", "FAILED", "PROCESSING", "PENDING"].includes(imageResult.status)) {
+            continue;
+          }
+          const base = latestResultRef.current;
+          if (!base) continue;
+          const nextResult = mergeImageTaskResult(
+            base,
+            imageTaskId,
+            imageResult.status,
+            imageResult.imageUrl,
+          );
+          latestResultRef.current = nextResult;
+          ingestResult(nextResult);
+          setState((current) => {
+            if (current.phase === "done") return { ...current, data: nextResult };
+            if (current.phase === "running") return { ...current, data: nextResult };
+            if (current.phase === "error") return { ...current, previous: nextResult };
+            return current;
+          });
+        } catch {}
+      }
+    }
+
+    void refreshImageTasks();
+    if (imagePollTimerRef.current) clearInterval(imagePollTimerRef.current);
+    imagePollTimerRef.current = setInterval(() => void refreshImageTasks(), IMAGE_STATUS_POLL_MS);
+
+    return () => {
+      disposed = true;
+    };
+  }, [currentResult?.slides]);
+
+  const lightboxSlide =
+    lightboxIndex === null
+      ? null
+      : (mergedSlides.find((merged) => merged.outline.index === lightboxIndex) ?? null);
+  const lightboxVersions = lightboxSlide
+    ? [
+        ...(slideHistory[lightboxSlide.outline.index] ?? []),
+        ...(lightboxSlide.slide?.imageUrl ? [lightboxSlide.slide.imageUrl] : []),
+      ]
+    : [];
+
+  return (
+    <div className="max-w-full overflow-hidden">
+      <div className="space-y-8">
+        <div className="grid min-w-0 gap-6 lg:grid-cols-[0.92fr_1.08fr] lg:items-start">
+          <div className="min-w-0 rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_16px_38px_rgba(17,17,17,0.06)] md:p-6">
+            <Tabs
+              value={form.contextMode}
+              onValueChange={(value) => update("contextMode", value as FormState["contextMode"])}
+              className="min-w-0 w-full"
+            >
+              <TabsList className="grid w-full grid-cols-2">
+                <TabsTrigger value="url" disabled={busy}>
+                  {t("urlMode")}
+                </TabsTrigger>
+                <TabsTrigger value="manual" disabled={busy}>
+                  {t("manualMode")}
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="url" className="mt-4">
+                <Field
+                  label={t("productUrlLabel")}
+                  error={fieldErrors.productUrl}
+                  errorId="pitch-deck-product-url-error"
+                >
+                  <Input
+                    ref={productUrlRef}
+                    value={form.productUrl}
+                    placeholder={t("productUrlPlaceholder")}
+                    onChange={(event) => update("productUrl", event.target.value)}
+                    disabled={busy}
+                    aria-invalid={fieldErrors.productUrl ? true : undefined}
+                    aria-describedby={
+                      fieldErrors.productUrl ? "pitch-deck-product-url-error" : undefined
+                    }
+                  />
+                </Field>
+              </TabsContent>
+              <TabsContent value="manual" className="mt-4 grid gap-4">
+                <Field
+                  label={t("productNameLabel")}
+                  error={fieldErrors.productName}
+                  errorId="pitch-deck-product-name-error"
+                >
+                  <Input
+                    ref={productNameRef}
+                    value={form.productName}
+                    placeholder={t("productNamePlaceholder")}
+                    onChange={(event) => update("productName", event.target.value)}
+                    disabled={busy}
+                    aria-invalid={fieldErrors.productName ? true : undefined}
+                    aria-describedby={
+                      fieldErrors.productName ? "pitch-deck-product-name-error" : undefined
+                    }
+                  />
+                </Field>
+                <Field
+                  label={t("productContextLabel")}
+                  error={fieldErrors.productContext}
+                  errorId="pitch-deck-product-context-error"
+                >
+                  <Textarea
+                    ref={productContextRef}
+                    rows={5}
+                    value={form.productContext}
+                    placeholder={t("productContextPlaceholder")}
+                    onChange={(event) => update("productContext", event.target.value)}
+                    disabled={busy}
+                    aria-invalid={fieldErrors.productContext ? true : undefined}
+                    aria-describedby={
+                      fieldErrors.productContext ? "pitch-deck-product-context-error" : undefined
+                    }
+                  />
+                </Field>
+              </TabsContent>
+            </Tabs>
+
+            <div className="mt-5 grid min-w-0 gap-4">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <Field label={t("fundingStageLabel")}>
+                  <Select
+                    value={form.fundingStage}
+                    onValueChange={(value) => update("fundingStage", value as PitchDeckFundingStage)}
+                    disabled={busy}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {PITCH_DECK_FUNDING_STAGES.map((stage) => (
+                        <SelectItem key={stage} value={stage}>
+                          {copy.fundingStages[stage]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+                <Field label={t("languageLabel")}>
+                  <Select
+                    value={form.language}
+                    onValueChange={(value) => update("language", value as PitchDeckLanguage)}
+                    disabled={busy}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {PITCH_DECK_LANGUAGES.map((language) => (
+                        <SelectItem key={language} value={language}>
+                          {copy.languages[language]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </div>
+
+              <div className="min-w-0 overflow-hidden">
+                <div className="mb-2 flex items-center justify-between">
+                  <p className="text-[12.5px] font-medium text-foreground">{t("styleLabel")}</p>
+                  <p className="text-[11px] text-faint">{t("styleHint")}</p>
+                </div>
+                <div className="w-full min-w-0 overflow-hidden">
+                  <div className="flex w-full min-w-0 gap-3 overflow-x-auto px-1 pb-2 [scrollbar-width:thin]">
+                    {PITCH_DECK_STYLE_PRESETS.map((preset) => (
+                      <StyleOption
+                        key={preset}
+                        preset={preset}
+                        selected={selectedStyle === preset}
+                        copy={copy}
+                        disabled={busy}
+                        onSelect={() => update("stylePreset", preset)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <Collapsible>
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className="group flex w-full items-center justify-between rounded-[0.75rem] border border-[#E1DDD3] bg-[#FBFAF7] px-3 py-2.5 text-left text-[12.5px] font-medium text-foreground transition hover:border-[#C9C4B8]"
+                    disabled={busy}
+                  >
+                    <span>{t("advancedLabel")}</span>
+                    <ChevronDown
+                      className="size-4 text-[#777777] transition-transform group-data-[state=open]:rotate-180"
+                      aria-hidden
+                    />
+                  </button>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="mt-4 grid gap-4">
+                  <Field label={t("brandNotesLabel")} hint={t("optional")}>
+                    <Textarea
+                      rows={3}
+                      value={form.brandNotes}
+                      placeholder={t("brandNotesPlaceholder")}
+                      onChange={(event) => update("brandNotes", event.target.value)}
+                      disabled={busy}
+                    />
+                  </Field>
+                  <Field label={t("mustAvoidLabel")} hint={t("optional")}>
+                    <Textarea
+                      rows={3}
+                      value={form.mustAvoid}
+                      placeholder={t("mustAvoidPlaceholder")}
+                      onChange={(event) => update("mustAvoid", event.target.value)}
+                      disabled={busy}
+                    />
+                  </Field>
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
+
+            <Button
+              type="button"
+              className="mt-5 min-h-11 w-full whitespace-normal bg-[#111111] text-white hover:bg-[#2A2A2A]"
+              onClick={() => void generateDeck()}
+              disabled={busy}
+            >
+              {busy ? (
+                <>
+                  <Loader2 className="size-4 animate-spin" aria-hidden />
+                  {state.phase === "submitting" ? t("submitting") : t("running")}
+                </>
+              ) : (
+                t("generate")
+              )}
+            </Button>
+          </div>
+
+          <div className="min-w-0 overflow-hidden rounded-[1.5rem] border border-[#D8D4CA] bg-[#F7F6F2] shadow-[0_16px_38px_rgba(17,17,17,0.04)]">
+            <Image
+              src="/tools/pitch-deck-generator-workspace.webp"
+              alt={t("workspaceVisualAlt")}
+              width={1600}
+              height={1000}
+              sizes="(min-width: 1024px) 50vw, 100vw"
+              priority
+              className="aspect-[16/10] h-auto w-full object-cover"
+            />
+          </div>
+        </div>
+
+        <div ref={resultRef} className="scroll-mt-24">
+          <ResultShell
+            state={state}
+            mergedSlides={mergedSlides}
+            pendingSlides={pendingSlides}
+            generatingSince={generatingSince}
+            nowMs={nowMs}
+            revision={revision}
+            revisionError={revisionError}
+            busy={busy}
+            packState={packState}
+            t={t}
+            setRevision={setRevision}
+            onRetryAll={() => void generateDeck()}
+            onRevise={(result, taskId) => void reviseDeck(result, taskId)}
+            onPackAll={(result) => void packAll(result)}
+            onSlideOpen={(index) => setLightboxIndex(index)}
+            onSlideRetry={(index) => {
+              if (!currentResult || !currentTaskId || state.phase !== "done") return;
+              void reviseSlide(currentResult, currentTaskId, {
+                slideIndex: index,
+                action: "retry",
+              });
+            }}
+          />
+        </div>
+      </div>
+
+      {lightboxSlide ? (
+        <SlideLightbox
+          key={`${lightboxSlide.outline.index}-${lightboxVersions.length}`}
+          merged={lightboxSlide}
+          versions={lightboxVersions}
+          busy={busy}
+          onClose={() => setLightboxIndex(null)}
+          onEdit={(editInstruction, originalImageUrl) => {
+            if (!currentResult || !currentTaskId || state.phase !== "done") return;
+            void reviseSlide(currentResult, currentTaskId, {
+              slideIndex: lightboxSlide.outline.index,
+              action: "edit",
+              editInstruction,
+              originalImageUrl,
+            });
+          }}
+          t={t}
+        />
+      ) : null}
+    </div>
+  );
+}
+