@tomako/tools-runtime 0.1.0

package/src/features/tools/pitch-deck-generator/widget/result-helpers.ts

@@ -0,0 +1,102 @@
+import type {
+    PitchDeckResult
+} from "../../../../lib/tools/pitch-deck-generator-schema";
+
+import type { MergedSlide } from "./types";
+
+export function compact(value: string): string {
+  return value.trim().replace(/\s+/g, "").toLowerCase();
+}
+
+export function isPlaceholder(value: string): boolean {
+  const normalized = compact(value).replace(/[，。,.!?！？、:：;；"'“”‘’()（）[\]{}]/g, "");
+  return (
+    /^(test|demo|example|placeholder|随便|测试|示例|占位)+$/i.test(normalized) ||
+    /^[\d._-]+$/.test(normalized) ||
+    (normalized.length > 0 && new Set([...normalized]).size <= 2)
+  );
+}
+
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+export function readySlideCount(result?: PitchDeckResult): number {
+  return (result?.slides ?? []).filter((slide) => slide.status === "ready" && slide.imageUrl)
+    .length;
+}
+
+export function resultProgress(result?: PitchDeckResult): number {
+  if (!result?.outline.length) return 0;
+  const ready = readySlideCount(result);
+  if (result.resultStatus === "final") return 100;
+  return Math.min(94, Math.max(18, Math.round((ready / result.outline.length) * 100)));
+}
+
+export function resultStamp(result: PitchDeckResult): string {
+  const urls = [...result.slides]
+    .sort((a, b) => a.index - b.index)
+    .map((slide) => `${slide.index}:${slide.imageUrl ?? ""}:${slide.status}`)
+    .join("|");
+  return `${result.generatedAt ?? ""}#${urls}`;
+}
+
+export function mergeSlides(result?: PitchDeckResult): MergedSlide[] {
+  if (!result?.outline.length) return [];
+  const byIndex = new Map(result.slides.map((slide) => [slide.index, slide]));
+  return [...result.outline]
+    .sort((a, b) => a.index - b.index)
+    .map((outline) => ({ outline, slide: byIndex.get(outline.index) }));
+}
+
+/**
+ * Slide-generation progress is shown in the deck grid itself; keep only
+ * context/outline thinking steps to avoid a duplicated status module.
+ */
+export function visibleThinkingSteps(result: PitchDeckResult) {
+  return result.thinkingSteps.filter(
+    (step) => !/(slide|image|render|图像|幻灯|生图|绘制)/i.test(`${step.id} ${step.title}`),
+  );
+}
+
+export function mergeImageTaskResult(
+  result: PitchDeckResult,
+  imageTaskId: string,
+  status: string,
+  imageUrl?: string,
+) {
+  return {
+    ...result,
+    slides: result.slides.map((slide) => {
+      if (slide.imageTaskId !== imageTaskId) return slide;
+      if (status === "SUCCEEDED" && imageUrl) {
+        return {
+          ...slide,
+          status: "ready" as const,
+          imageUrl,
+          downloadUrl: slide.downloadUrl || imageUrl,
+        };
+      }
+      if (status === "FAILED") {
+        return {
+          ...slide,
+          status: "failed" as const,
+          qaNotes: slide.qaNotes.length
+            ? slide.qaNotes
+            : [`Image task failed: ${imageTaskId}`],
+        };
+      }
+      return {
+        ...slide,
+        status: slide.status === "queued" ? ("generating" as const) : slide.status,
+      };
+    }),
+  };
+}
+
+export function statusTone(status: string) {
+  if (status === "ready") return "border-[#CFE4C6] bg-[#F4FAEF] text-[#315F28]";
+  if (status === "generating") return "border-[#F1D7B8] bg-[#FFF7EA] text-[#8A5819]";
+  if (status === "failed") return "border-[#FFD2C2] bg-[#FFF4EC] text-[#8A2C16]";
+  return "border-[#E1DDD3] bg-[#F7F6F2] text-[#666666]";
+}

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

@@ -0,0 +1,263 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import { Field, Textarea } from "@tomako/ui/input";
+import { ProgressBar } from "@tomako/ui/progress";
+import { useTranslations } from "../../../../i18n/client";
+import type { PitchDeckResult } from "../../../../lib/tools/pitch-deck-generator-schema";
+import {
+    CheckCircle2,
+    Download,
+    FileArchive,
+    Loader2,
+    RefreshCw,
+    Send
+} from "lucide-react";
+
+import { CeremonyLine } from "./ceremony-line";
+import { SLIDE_ETA_SECONDS } from "./constants";
+import {
+    readySlideCount,
+    resultProgress,
+    statusTone,
+    visibleThinkingSteps,
+} from "./result-helpers";
+import { SlideFrame } from "./slide-frame";
+import type { MergedSlide, PackState, WidgetState } from "./types";
+
+export function ResultShell({
+  state,
+  mergedSlides,
+  pendingSlides,
+  generatingSince,
+  nowMs,
+  revision,
+  revisionError,
+  busy,
+  packState,
+  t,
+  setRevision,
+  onRetryAll,
+  onRevise,
+  onSlideOpen,
+  onSlideRetry,
+  onPackAll,
+}: {
+  state: WidgetState;
+  mergedSlides: MergedSlide[];
+  pendingSlides: ReadonlySet<number>;
+  generatingSince: Record<number, number>;
+  nowMs: number;
+  revision: string;
+  revisionError: string | null;
+  busy: boolean;
+  packState: PackState;
+  t: ReturnType<typeof useTranslations>;
+  setRevision: (value: string) => void;
+  onRetryAll: () => void;
+  onRevise: (result: PitchDeckResult, taskId: string) => void;
+  onSlideOpen: (index: number) => void;
+  onSlideRetry: (index: number) => void;
+  onPackAll: (result: PitchDeckResult) => void;
+}) {
+  const result =
+    state.phase === "done"
+      ? state.data
+      : state.phase === "running"
+        ? state.data
+        : state.phase === "error"
+          ? state.previous
+          : undefined;
+  const taskId =
+    state.phase === "done"
+      ? state.taskId
+      : state.phase === "running"
+        ? state.taskId
+        : state.phase === "error"
+          ? state.taskId
+          : undefined;
+  const ceremonyMessages = t.raw("ceremony") as readonly string[];
+  const progress = resultProgress(result);
+  const readyCount = readySlideCount(result);
+  const slideInteractive = state.phase === "done";
+
+  if (state.phase === "idle") {
+    return (
+      <div className="rounded-[1.5rem] border border-dashed border-[#D8D4CA] bg-white/65 p-8 text-center">
+        <p className="text-base font-semibold text-[#111111]">{t("emptyTitle")}</p>
+        <p className="mx-auto mt-2 max-w-xl text-sm leading-6 text-[#666666]">{t("emptyHint")}</p>
+      </div>
+    );
+  }
+
+  if (state.phase === "error" && !result) {
+    return (
+      <div className="rounded-[1.5rem] border border-[#FFD2C2] bg-[#FFF4EC] p-8">
+        <p className="text-lg font-semibold text-[#8A2C16]">{t(`errors.${state.category}`)}</p>
+        <p className="mt-2 text-sm leading-6 text-[#7A4B3A]">{t("errors.recover")}</p>
+        <Button type="button" variant="outline" className="mt-5" onClick={onRetryAll}>
+          <RefreshCw className="size-4" aria-hidden />
+          {t("retry")}
+        </Button>
+      </div>
+    );
+  }
+
+  const visibleSteps = result ? visibleThinkingSteps(result) : [];
+
+  function slideCountdown(index: number): number | null {
+    const since = generatingSince[index];
+    if (!since) return null;
+    if (!nowMs) return SLIDE_ETA_SECONDS;
+    return Math.max(0, SLIDE_ETA_SECONDS - Math.floor((nowMs - since) / 1000));
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_16px_38px_rgba(17,17,17,0.06)] md:p-6">
+        <div className="flex flex-col justify-between gap-4 md:flex-row md:items-start">
+          <div>
+            <div className="flex items-center gap-2 text-sm font-semibold text-[#315F28]">
+              {state.phase === "done" ? (
+                <CheckCircle2 className="size-4" aria-hidden />
+              ) : (
+                <Loader2 className="size-4 animate-spin" aria-hidden />
+              )}
+              {state.phase === "done" ? t("resultReady") : t("resultRunning")}
+            </div>
+            <h3 className="mt-3 text-2xl font-semibold leading-tight text-[#111111]">
+              {result?.brandName || t("resultFallbackTitle")}
+            </h3>
+            <p className="mt-2 max-w-3xl text-sm leading-6 text-[#555555]">
+              {result?.summary || t("resultFallbackSummary")}
+            </p>
+          </div>
+          {result ? (
+            <div className="flex flex-col items-start gap-2 md:items-end">
+              <div className="flex flex-wrap gap-2">
+                {readyCount > 0 ? (
+                  <Button
+                    type="button"
+                    className="min-h-10 bg-[#111111] text-white hover:bg-[#2A2A2A]"
+                    disabled={packState.phase === "packing"}
+                    onClick={() => onPackAll(result)}
+                  >
+                    {packState.phase === "packing" ? (
+                      <>
+                        <Loader2 className="size-4 animate-spin" aria-hidden />
+                        {t("packing", { done: packState.done, total: packState.total })}
+                      </>
+                    ) : (
+                      <>
+                        <FileArchive className="size-4" aria-hidden />
+                        {t("downloadAll")}
+                      </>
+                    )}
+                  </Button>
+                ) : null}
+                {result.downloads.contactSheetUrl ? (
+                  <Button asChild type="button" variant="outline" className="min-h-10">
+                    <a href={result.downloads.contactSheetUrl} download>
+                      <Download className="size-4" aria-hidden />
+                      {t("downloadContactSheet")}
+                    </a>
+                  </Button>
+                ) : null}
+              </div>
+              {packState.phase === "error" ? (
+                <p className="text-xs font-semibold text-[#9A2C15]">{t("packError")}</p>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="mt-5">
+          <div className="mb-2 flex justify-between text-xs font-semibold text-[#666666]">
+            <span>{result?.inProgressSection || t("progressFallback")}</span>
+            <span>
+              {result?.outline.length
+                ? t("slideProgress", { ready: readyCount, total: result.outline.length })
+                : `${progress}%`}
+            </span>
+          </div>
+          <ProgressBar value={progress} />
+          <CeremonyLine messages={ceremonyMessages} active={state.phase === "running"} />
+        </div>
+
+        {visibleSteps.length ? (
+          <div className="mt-5 grid gap-3 md:grid-cols-2">
+            {visibleSteps.map((step) => (
+              <div
+                key={step.id}
+                className={`rounded-[1rem] border p-4 ${statusTone(
+                  step.status === "active" ? "generating" : step.status === "done" ? "ready" : step.status,
+                )}`}
+              >
+                <p className="text-sm font-semibold">{step.title}</p>
+                {step.detail ? <p className="mt-2 text-xs leading-5 opacity-80">{step.detail}</p> : null}
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      {mergedSlides.length ? (
+        <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 md:p-6">
+          <div className="flex items-center justify-between gap-3">
+            <h4 className="text-lg font-semibold text-[#111111]">{t("outlineTitle")}</h4>
+            <p className="text-xs text-[#999999]">{t("deckGridHint")}</p>
+          </div>
+          <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {mergedSlides.map((merged) => (
+              <SlideFrame
+                key={merged.outline.index}
+                merged={merged}
+                regenerating={pendingSlides.has(merged.outline.index)}
+                countdownSeconds={
+                  pendingSlides.has(merged.outline.index) || merged.slide?.status === "generating"
+                    ? slideCountdown(merged.outline.index)
+                    : null
+                }
+                interactive={slideInteractive}
+                t={t}
+                onOpen={() => onSlideOpen(merged.outline.index)}
+                onRetry={() => onSlideRetry(merged.outline.index)}
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {result && taskId && state.phase === "done" ? (
+        <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 md:p-6">
+          <Field
+            label={t("revisionLabel")}
+            hint={t("revisionHint")}
+            error={revisionError ?? undefined}
+            errorId="pitch-deck-revision-error"
+          >
+            <Textarea
+              rows={3}
+              value={revision}
+              placeholder={t("revisionPlaceholder")}
+              onChange={(event) => setRevision(event.target.value)}
+              disabled={busy}
+              aria-invalid={revisionError ? true : undefined}
+              aria-describedby={revisionError ? "pitch-deck-revision-error" : undefined}
+            />
+          </Field>
+          <Button
+            type="button"
+            variant="outline"
+            className="mt-4 min-h-10"
+            disabled={busy || revision.trim().length < 6}
+            onClick={() => onRevise(result, taskId)}
+          >
+            <Send className="size-4" aria-hidden />
+            {t("sendRevision")}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import { useTranslations } from "../../../../i18n/client";
+import { Loader2, RefreshCw } from "lucide-react";
+import Image from "next/image";
+
+import type { MergedSlide } from "./types";
+
+export function SlideFrame({
+  merged,
+  regenerating,
+  countdownSeconds,
+  interactive,
+  t,
+  onOpen,
+  onRetry,
+}: {
+  merged: MergedSlide;
+  regenerating: boolean;
+  countdownSeconds: number | null;
+  interactive: boolean;
+  t: ReturnType<typeof useTranslations>;
+  onOpen: () => void;
+  onRetry: () => void;
+}) {
+  const { outline, slide } = merged;
+  const label = `${String(outline.index).padStart(2, "0")} · ${outline.title}`;
+  const showImage = !!slide?.imageUrl && !regenerating;
+  const failed = slide?.status === "failed" && !regenerating;
+  const generating = regenerating || slide?.status === "generating";
+
+  if (showImage) {
+    return (
+      <button
+        type="button"
+        className="group relative block aspect-video w-full overflow-hidden rounded-[1rem] border border-[#E1DDD3] bg-[#EEEAE0] text-left focus-visible:ring-2 focus-visible:ring-[#111111]/30"
+        onClick={onOpen}
+        aria-label={t("openSlide", { label })}
+      >
+        <div className="animate-fade-in-up absolute inset-0">
+          <Image
+            src={slide!.imageUrl!}
+            alt={outline.title}
+            fill
+            sizes="(min-width: 1280px) 33vw, (min-width: 768px) 50vw, 100vw"
+            unoptimized
+            className="h-full w-full object-cover"
+          />
+        </div>
+        <span className="absolute bottom-2 left-2 rounded-md bg-black/55 px-2 py-1 text-[11px] font-semibold text-white opacity-0 transition group-hover:opacity-100">
+          {label}
+        </span>
+      </button>
+    );
+  }
+
+  if (failed) {
+    return (
+      <div className="relative flex aspect-video w-full flex-col justify-between overflow-hidden rounded-[1rem] border border-[#FFD2C2] bg-[#FFF4EC] p-4">
+        <div>
+          <p className="text-xs font-semibold text-[#8A2C16]">{label}</p>
+          <p className="mt-1.5 line-clamp-2 text-xs leading-5 text-[#7A4B3A]">
+            {outline.coreMessage}
+          </p>
+        </div>
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-xs font-semibold text-[#8A2C16]">{t("slideFailed")}</span>
+          {interactive ? (
+            <Button type="button" variant="outline" className="min-h-8 px-3 text-xs" onClick={onRetry}>
+              <RefreshCw className="size-3.5" aria-hidden />
+              {t("retrySlide")}
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex aspect-video w-full flex-col justify-between overflow-hidden rounded-[1rem] border border-[#E1DDD3] bg-white p-4">
+      <div>
+        <p className="text-xs font-semibold text-[#888888]">{label}</p>
+        <p className="mt-1.5 line-clamp-3 text-xs leading-5 text-[#666666]">
+          {outline.coreMessage}
+        </p>
+      </div>
+      <div className="flex items-center gap-2 text-xs font-semibold">
+        {generating ? (
+          <>
+            <Loader2 className="size-3.5 animate-spin text-[#8A5819]" aria-hidden />
+            <span className="text-[#8A5819]">
+              {countdownSeconds === null
+                ? t("slideGenerating")
+                : countdownSeconds > 0
+                  ? t("slideCountdown", { seconds: countdownSeconds })
+                  : t("slideStillWorking")}
+            </span>
+          </>
+        ) : (
+          <span className="text-[#999999]">{t("slideStatus.queued")}</span>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,149 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+} from "@tomako/ui/dialog";
+import { Field, Textarea } from "@tomako/ui/input";
+import { useTranslations } from "../../../../i18n/client";
+import {
+    ChevronLeft,
+    ChevronRight,
+    Download,
+    Send,
+} from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+
+import type { MergedSlide } from "./types";
+
+export function SlideLightbox({
+  merged,
+  versions,
+  busy,
+  onClose,
+  onEdit,
+  t,
+}: {
+  merged: MergedSlide;
+  versions: string[];
+  busy: boolean;
+  onClose: () => void;
+  onEdit: (editInstruction: string, originalImageUrl: string) => void;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const [versionIndex, setVersionIndex] = useState(() => Math.max(0, versions.length - 1));
+  const [editText, setEditText] = useState("");
+  const [editError, setEditError] = useState(false);
+
+  const { outline, slide } = merged;
+  const currentUrl = versions[versionIndex];
+  const label = `${String(outline.index).padStart(2, "0")} · ${outline.title}`;
+
+  function submitEdit() {
+    if (editText.trim().length < 4) {
+      setEditError(true);
+      return;
+    }
+    setEditError(false);
+    onEdit(editText.trim(), versions[versions.length - 1]);
+  }
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent size="xl">
+        <DialogHeader title={label} />
+        <DialogBody className="max-h-[66vh] overflow-y-auto">
+          <div className="relative aspect-video w-full overflow-hidden rounded-[0.75rem] border border-[#E1DDD3] bg-[#EEEAE0]">
+            {currentUrl ? (
+              <Image
+                src={currentUrl}
+                alt={outline.title}
+                fill
+                sizes="(min-width: 1024px) 960px, 100vw"
+                unoptimized
+                className="object-contain"
+              />
+            ) : null}
+          </div>
+          {versions.length > 1 ? (
+            <div className="mt-3 flex items-center justify-center gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                className="min-h-8 px-2.5"
+                disabled={versionIndex <= 0}
+                onClick={() => setVersionIndex((index) => Math.max(0, index - 1))}
+                aria-label={t("prevVersion")}
+              >
+                <ChevronLeft className="size-4" aria-hidden />
+              </Button>
+              <span className="text-xs font-semibold text-[#666666]">
+                {t("versionLabel", { current: versionIndex + 1, total: versions.length })}
+                {versionIndex === versions.length - 1 ? ` · ${t("latestVersion")}` : ""}
+              </span>
+              <Button
+                type="button"
+                variant="outline"
+                className="min-h-8 px-2.5"
+                disabled={versionIndex >= versions.length - 1}
+                onClick={() =>
+                  setVersionIndex((index) => Math.min(versions.length - 1, index + 1))
+                }
+                aria-label={t("nextVersion")}
+              >
+                <ChevronRight className="size-4" aria-hidden />
+              </Button>
+            </div>
+          ) : null}
+          <div className="mt-4">
+            <Field
+              label={t("editLabel")}
+              hint={busy ? t("editDisabledHint") : t("editHint")}
+              error={editError ? t("editError") : undefined}
+              errorId="pitch-deck-slide-edit-error"
+            >
+              <Textarea
+                rows={2}
+                value={editText}
+                placeholder={t("editPlaceholder")}
+                onChange={(event) => setEditText(event.target.value)}
+                disabled={busy}
+                aria-invalid={editError ? true : undefined}
+                aria-describedby={editError ? "pitch-deck-slide-edit-error" : undefined}
+              />
+            </Field>
+          </div>
+        </DialogBody>
+        <DialogFooter className="justify-between">
+          <div className="flex items-center gap-2">
+            {slide?.imageUrl || slide?.downloadUrl ? (
+              <Button asChild type="button" variant="outline" className="min-h-9">
+                <a
+                  href={slide.downloadUrl || slide.imageUrl}
+                  download={slide.filename || `${String(outline.index).padStart(2, "0")}-${outline.slug}.png`}
+                >
+                  <Download className="size-4" aria-hidden />
+                  {t("downloadSlide")}
+                </a>
+              </Button>
+            ) : null}
+          </div>
+          <Button
+            type="button"
+            className="min-h-9 bg-[#111111] text-white hover:bg-[#2A2A2A]"
+            disabled={busy || editText.trim().length < 4}
+            onClick={submitEdit}
+          >
+            <Send className="size-4" aria-hidden />
+            {t("editSubmit")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,54 @@
+"use client";
+
+import type { PitchDeckStylePreset } from "../../../../lib/tools/pitch-deck-generator-schema";
+import { Sparkles } from "lucide-react";
+
+import { styleImages } from "./constants";
+import type { CopyMap } from "./types";
+
+export function StyleOption({
+  preset,
+  selected,
+  copy,
+  onSelect,
+  disabled,
+}: {
+  preset: PitchDeckStylePreset;
+  selected: boolean;
+  copy: CopyMap;
+  onSelect: () => void;
+  disabled: boolean;
+}) {
+  const image = styleImages[preset];
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onSelect}
+      className={`w-[clamp(11.5rem,32vw,13rem)] shrink-0 overflow-hidden rounded-[1rem] border bg-white text-left transition disabled:opacity-60 ${
+        selected
+          ? "border-[#111111] shadow-[0_0_0_2px_rgba(17,17,17,0.12)]"
+          : "border-[#D8D4CA] hover:border-[#999999]"
+      }`}
+    >
+      {image ? (
+        <span
+          role="img"
+          aria-label={copy.styles[preset].name}
+          className="block aspect-[4/3] w-full bg-cover bg-center"
+          style={{ backgroundImage: `url(${image})` }}
+        />
+      ) : (
+        <div className="flex aspect-[4/3] items-center justify-center bg-[#F7F6F2]">
+          <Sparkles className="size-6 text-[#777777]" aria-hidden />
+        </div>
+      )}
+      <div className="p-3">
+        <p className="text-sm font-semibold text-[#111111]">{copy.styles[preset].name}</p>
+        <p className="mt-1 line-clamp-2 text-xs leading-5 text-[#666666]">
+          {copy.styles[preset].summary}
+        </p>
+      </div>
+    </button>
+  );
+}