@tomako/tools-runtime 0.1.0

package/src/features/tools/logo-generator/widget/logo-generator.tsx

@@ -0,0 +1,1244 @@
+"use client";
+
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import { ApiError } from "../../../../lib/api/errors";
+import {
+  LOGO_GENERATOR_FORMS,
+  LOGO_GENERATOR_SCHEME_COUNTS,
+  logoGeneratorInputSchema,
+  type LogoCandidate,
+  type LogoForm,
+  type LogoGeneratorAgentResult,
+  type LogoGeneratorInput,
+  type LogoSvgConversionResult,
+} from "../../../../lib/tools/logo-generator-schema";
+import {
+  fetchLogoGenerationTask,
+  fetchLogoSvgConversionTask,
+  streamTaskEvents,
+  submitLogoGeneration,
+  submitLogoSvgConversion,
+  type LogoGenerationErrorCode,
+  type LogoSvgConversionErrorCode,
+} from "../../../../host/client";
+import {
+  AlertTriangle,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  FileCode2,
+  FileImage,
+  Loader2,
+  Plus,
+  RefreshCcw,
+  Upload,
+  X,
+} from "lucide-react";
+import type { MutableRefObject } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+type GenerationState =
+  | { phase: "idle" }
+  | { phase: "loading"; status: string; taskId?: string; awaitingResult?: boolean }
+  | { phase: "partial"; status: string; taskId: string; data: LogoGeneratorAgentResult }
+  | { phase: "done"; data: LogoGeneratorAgentResult }
+  | { phase: "error"; message: string };
+
+type LogoGeneratorForm = LogoGeneratorInput & {
+  referenceImageDataUrl?: string;
+};
+
+type SvgConversionState =
+  | { phase: "idle" }
+  | { phase: "loading"; status: string; taskId?: string; candidateId: string }
+  | { phase: "done"; candidateId: string; data: LogoSvgConversionResult }
+  | { phase: "error"; candidateId?: string; message: string };
+
+type FormCopy = {
+  customPaletteSlots: Record<CustomPaletteKey, string>;
+  forms: Record<LogoForm, string>;
+  directions: Record<LogoCandidate["direction"], string>;
+};
+
+type ResolveOptions = {
+  final?: boolean;
+  retries?: number;
+};
+
+type StoredLogoTask = {
+  taskId: string;
+  form: LogoGeneratorInput;
+  createdAt: number;
+};
+
+const taskStorageKey = "tomako.logo-generator.task.v1";
+const taskStorageTtlMs = 1000 * 60 * 60 * 2;
+
+const defaultForm: LogoGeneratorForm = {
+  productUrl: "",
+  productName: "",
+  productContext: "",
+  industry: "",
+  audience: "",
+  schemeCount: 1,
+  customPalette: {
+    primary: "",
+    secondary: "",
+    accent: "",
+  },
+  form: "combination",
+  referenceImageName: "",
+  referenceImageUrl: "",
+  referenceImageDataUrl: undefined,
+};
+
+const customPaletteKeys = ["primary", "secondary", "accent"] as const;
+const customPaletteFallbacks: Record<CustomPaletteKey, string> = {
+  primary: "#111111",
+  secondary: "#D8D4CA",
+  accent: "#7C3AED",
+};
+type CustomPaletteKey = (typeof customPaletteKeys)[number];
+
+function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+function fileBase(value: string) {
+  return (
+    value
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/gi, "-")
+      .replace(/^-+|-+$/g, "") || "logo"
+  );
+}
+
+function readImageAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    if (!file.type.startsWith("image/")) {
+      reject(new Error("Unsupported image file"));
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("Failed to read image"));
+    reader.readAsDataURL(file);
+  });
+}
+
+function downloadRemoteImage(url: string, filename: string) {
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  link.click();
+}
+
+function downloadTextFile(content: string, filename: string, mimeType: string) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+function persistLogoTask(taskId: string, form: LogoGeneratorForm) {
+  if (typeof window === "undefined") return;
+  const schemaForm = logoGeneratorInputSchema.parse(form);
+  const payload: StoredLogoTask = {
+    taskId,
+    form: schemaForm,
+    createdAt: Date.now(),
+  };
+  window.sessionStorage.setItem(taskStorageKey, JSON.stringify(payload));
+}
+
+function readStoredLogoTask(): StoredLogoTask | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.sessionStorage.getItem(taskStorageKey);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as Partial<StoredLogoTask>;
+    if (!parsed.taskId || !parsed.form || !parsed.createdAt) return null;
+    if (Date.now() - parsed.createdAt > taskStorageTtlMs) {
+      window.sessionStorage.removeItem(taskStorageKey);
+      return null;
+    }
+    const form = logoGeneratorInputSchema.safeParse(parsed.form);
+    if (!form.success) {
+      window.sessionStorage.removeItem(taskStorageKey);
+      return null;
+    }
+    return {
+      taskId: parsed.taskId,
+      form: form.data,
+      createdAt: parsed.createdAt,
+    };
+  } catch {
+    window.sessionStorage.removeItem(taskStorageKey);
+    return null;
+  }
+}
+
+function clearStoredLogoTask() {
+  if (typeof window === "undefined") return;
+  window.sessionStorage.removeItem(taskStorageKey);
+}
+
+function isPartialLogoResult(result: LogoGeneratorAgentResult): boolean {
+  const totalCount = result.totalCount ?? result.source?.schemeCount ?? result.candidates.length;
+  return result.generationStatus === "partial" || result.candidates.length < totalCount;
+}
+
+export function LogoGenerator() {
+  const locale = useLocale();
+  const t = useTranslations("toolsUi.logoGenerator");
+  const [form, setForm] = useState<LogoGeneratorForm>(defaultForm);
+  const [state, setState] = useState<GenerationState>({ phase: "idle" });
+  const [svgState, setSvgState] = useState<SvgConversionState>({ phase: "idle" });
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [downloadError, setDownloadError] = useState<string | null>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const svgEventSourceRef = useRef<EventSource | null>(null);
+  const activeTaskIdRef = useRef<string | null>(null);
+  const activeSvgTaskIdRef = useRef<string | null>(null);
+  const resultLookupVersionRef = useRef(0);
+  const svgLookupVersionRef = useRef(0);
+  const customColorInputRefs = useRef<Record<CustomPaletteKey, HTMLInputElement | null>>({
+    primary: null,
+    secondary: null,
+    accent: null,
+  });
+
+  useEffect(() => {
+    return () => {
+      eventSourceRef.current?.close();
+      svgEventSourceRef.current?.close();
+      activeTaskIdRef.current = null;
+      activeSvgTaskIdRef.current = null;
+      resultLookupVersionRef.current += 1;
+      svgLookupVersionRef.current += 1;
+    };
+  }, []);
+
+  useEffect(() => {
+    const stored = readStoredLogoTask();
+    if (!stored) return;
+    const restoredForm: LogoGeneratorForm = {
+      ...defaultForm,
+      ...stored.form,
+      referenceImageDataUrl: undefined,
+    };
+    let cancelled = false;
+    activeTaskIdRef.current = stored.taskId;
+    queueMicrotask(() => {
+      if (cancelled) return;
+      setForm(restoredForm);
+      setState({
+        phase: "loading",
+        status: "RESTORING",
+        taskId: stored.taskId,
+        awaitingResult: true,
+      });
+      void resolveAgentTask(stored.taskId, {
+        retries: Math.max(160, restoredForm.schemeCount * 100),
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+    // Restore only once on mount. resolveAgentTask is a function declaration in this component.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const copy = useMemo(
+    () =>
+      ({
+        customPaletteSlots: t.raw("customPaletteSlots"),
+        forms: t.raw("forms"),
+        directions: t.raw("directions"),
+      }) as FormCopy,
+    [t],
+  );
+
+  const result = state.phase === "done" || state.phase === "partial" ? state.data : null;
+  const isPartialResult = state.phase === "partial";
+  const completedCount = result?.completedCount ?? result?.candidates.length ?? 0;
+  const totalCount = result?.totalCount ?? result?.source?.schemeCount ?? result?.candidates.length ?? 0;
+  const selectedCandidate = useMemo(
+    () => result?.candidates.find((candidate) => candidate.id === selectedId) ?? null,
+    [result, selectedId],
+  );
+  const lightboxCandidate = lightboxIndex === null ? null : result?.candidates[lightboxIndex] ?? null;
+  const canSubmit = state.phase !== "loading" && state.phase !== "partial";
+  const currentSvgResult =
+    selectedCandidate && svgState.phase === "done" && svgState.candidateId === selectedCandidate.id
+      ? svgState.data
+      : null;
+  const isConvertingSelectedSvg =
+    selectedCandidate &&
+    svgState.phase === "loading" &&
+    svgState.candidateId === selectedCandidate.id;
+
+  function update<K extends keyof LogoGeneratorForm>(key: K, value: LogoGeneratorForm[K]) {
+    setForm((current) => ({ ...current, [key]: value }));
+  }
+
+  function validateForm(): boolean {
+    const parsed = logoGeneratorInputSchema.safeParse(form);
+    if (!parsed.success) {
+      const customPaletteIssue = parsed.error.issues.some(
+        (issue) => issue.path[0] === "customPalette",
+      );
+      setError(customPaletteIssue ? t("errors.customPalette") : t("errors.required"));
+      return false;
+    }
+    setError(null);
+    return true;
+  }
+
+  function formatAgentError(err: unknown): string {
+    if (err instanceof ApiError) {
+      if (err.status === 502 || err.status === 503 || err.status === 504) {
+        return t("errors.gateway");
+      }
+      return t("errors.agent");
+    }
+    return err instanceof Error ? err.message : t("errors.agent");
+  }
+
+  function mapTaskError(code?: LogoGenerationErrorCode, message?: string): string {
+    if (code === "result_schema_invalid") return t("errors.schema");
+    if (code === "result_type_invalid") return t("errors.resultType");
+    if (code === "task_failed") return message || t("errors.taskFailed");
+    return message || t("errors.agent");
+  }
+
+  function mapSvgTaskError(code?: LogoSvgConversionErrorCode, message?: string): string {
+    if (code === "result_schema_invalid") return t("errors.svgSchema");
+    if (code === "result_type_invalid") return t("errors.svgResultType");
+    if (code === "task_failed") return message || t("errors.svgTaskFailed");
+    return message || t("errors.svgAgent");
+  }
+
+  function isActiveLookup(taskId: string, version: number): boolean {
+    return activeTaskIdRef.current === taskId && resultLookupVersionRef.current === version;
+  }
+
+  function isActiveSvgLookup(taskId: string, version: number): boolean {
+    return activeSvgTaskIdRef.current === taskId && svgLookupVersionRef.current === version;
+  }
+
+  function isAwaitingResultStatus(status: string): boolean {
+    return status === "AWAITING_INPUT" || status === "SUCCEEDED" || status === "RECONNECTING";
+  }
+
+  async function handleReferenceImage(file?: File) {
+    if (!file) return;
+    try {
+      const dataUrl = await readImageAsDataUrl(file);
+      setForm((current) => ({
+        ...current,
+        referenceImageName: file.name,
+        referenceImageDataUrl: dataUrl,
+        referenceImageUrl: "",
+      }));
+    } catch {
+      setError(t("errors.referenceImage"));
+    }
+  }
+
+  function clearReferenceImage() {
+    setForm((current) => ({
+      ...current,
+      referenceImageName: "",
+      referenceImageUrl: "",
+      referenceImageDataUrl: undefined,
+    }));
+  }
+
+  function openCustomColorPicker(key: CustomPaletteKey) {
+    customColorInputRefs.current[key]?.click();
+  }
+
+  function updateCustomColor(key: CustomPaletteKey, color: string) {
+    setForm((current) => ({
+      ...current,
+      customPalette: {
+        ...current.customPalette,
+        [key]: color.toUpperCase(),
+      },
+    }));
+  }
+
+  function removeCustomColor(key: CustomPaletteKey) {
+    setForm((current) => ({
+      ...current,
+      customPalette: {
+        ...current.customPalette,
+        [key]: "",
+      },
+    }));
+  }
+
+  async function resolveAgentTask(taskId: string, options: ResolveOptions = {}) {
+    const { final = false, retries = final ? 20 : 0 } = options;
+    const lookupVersion = ++resultLookupVersionRef.current;
+    let sawPartialResult = false;
+
+    for (let attempt = 0; attempt <= retries; attempt += 1) {
+      const task = await fetchLogoGenerationTask(taskId);
+      if (!isActiveLookup(taskId, lookupVersion)) return;
+
+      if (task.data && task.data.candidates.length > 0) {
+        const data = task.data;
+        const partial = isPartialLogoResult(data);
+        setSelectedId((current) =>
+          data.candidates.some((candidate: LogoCandidate) => candidate.id === current)
+            ? current
+            : data.candidates[0]?.id ?? null,
+        );
+        if (partial) {
+          sawPartialResult = true;
+          setState({ phase: "partial", status: task.status, taskId, data });
+          if (attempt < retries) {
+            await wait(1500);
+            continue;
+          }
+          return;
+        }
+        setState({ phase: "done", data });
+        return;
+      }
+
+      if (task.errorCode || task.status === "FAILED") {
+        setState({ phase: "error", message: mapTaskError(task.errorCode, task.error) });
+        return;
+      }
+
+      if (attempt < retries) {
+        setState((current) =>
+          current.phase === "partial" || current.phase === "done"
+            ? current
+            : {
+                phase: "loading",
+                status: task.status,
+                taskId,
+                awaitingResult: isAwaitingResultStatus(task.status),
+              },
+        );
+        await wait(1500);
+      }
+    }
+
+    if (isActiveLookup(taskId, lookupVersion) && final && !sawPartialResult) {
+      setState({ phase: "error", message: t("errors.noResult") });
+    }
+  }
+
+  async function resolveSvgTask(
+    taskId: string,
+    candidateId: string,
+    options: ResolveOptions = {},
+  ) {
+    const { final = false, retries = final ? 20 : 0 } = options;
+    const lookupVersion = ++svgLookupVersionRef.current;
+
+    for (let attempt = 0; attempt <= retries; attempt += 1) {
+      const task = await fetchLogoSvgConversionTask(taskId);
+      if (!isActiveSvgLookup(taskId, lookupVersion)) return;
+
+      if (task.data) {
+        setSvgState({ phase: "done", candidateId, data: task.data });
+        return;
+      }
+
+      if (task.errorCode || task.status === "FAILED") {
+        setSvgState({
+          phase: "error",
+          candidateId,
+          message: mapSvgTaskError(task.errorCode, task.error),
+        });
+        return;
+      }
+
+      if (attempt < retries) {
+        setSvgState({ phase: "loading", status: task.status, taskId, candidateId });
+        await wait(1500);
+      }
+    }
+
+    if (isActiveSvgLookup(taskId, lookupVersion) && final) {
+      setSvgState({ phase: "error", candidateId, message: t("errors.svgNoResult") });
+    }
+  }
+
+  async function generateWithAgent() {
+    if (!validateForm() || !canSubmit) return;
+    const resultPollingRetries = Math.max(160, form.schemeCount * 100);
+    eventSourceRef.current?.close();
+    activeTaskIdRef.current = null;
+    resultLookupVersionRef.current += 1;
+    setSelectedId(null);
+    setLightboxIndex(null);
+    setDownloadError(null);
+    setState({ phase: "loading", status: "PENDING" });
+
+    try {
+      const { taskId, status } = await submitLogoGeneration(form, locale);
+      activeTaskIdRef.current = taskId;
+      persistLogoTask(taskId, form);
+      setState({
+        phase: "loading",
+        status,
+        taskId,
+        awaitingResult: isAwaitingResultStatus(status),
+      });
+      eventSourceRef.current = streamTaskEvents(taskId, {
+        onStatus: (nextStatus: string) => {
+          setState((current) =>
+            current.phase === "partial" || current.phase === "done"
+              ? current
+              : {
+                  phase: "loading",
+                  status: nextStatus,
+                  taskId,
+                  awaitingResult: isAwaitingResultStatus(nextStatus),
+                },
+          );
+          if (
+            nextStatus === "AWAITING_INPUT" ||
+            nextStatus === "SUCCEEDED" ||
+            nextStatus === "FAILED"
+          ) {
+            void resolveAgentTask(taskId, {
+              final: nextStatus === "SUCCEEDED" || nextStatus === "FAILED",
+              retries: nextStatus === "AWAITING_INPUT" ? resultPollingRetries : 20,
+            });
+          }
+        },
+        onResult: async () => {
+          await resolveAgentTask(taskId, { retries: resultPollingRetries });
+        },
+        onError: () => {
+          if (activeTaskIdRef.current === taskId) {
+            setState((current) =>
+              current.phase === "partial" || current.phase === "done"
+                ? current
+                : { phase: "loading", status: "RECONNECTING", taskId, awaitingResult: true },
+            );
+          }
+        },
+        onDone: () => {
+          eventSourceRef.current = null;
+          void resolveAgentTask(taskId, { final: true, retries: 80 });
+        },
+      });
+      void resolveAgentTask(taskId, { retries: resultPollingRetries });
+    } catch (err) {
+      setState({ phase: "error", message: formatAgentError(err) });
+    }
+  }
+
+  function reset() {
+    eventSourceRef.current?.close();
+    svgEventSourceRef.current?.close();
+    eventSourceRef.current = null;
+    svgEventSourceRef.current = null;
+    activeTaskIdRef.current = null;
+    activeSvgTaskIdRef.current = null;
+    resultLookupVersionRef.current += 1;
+    svgLookupVersionRef.current += 1;
+    setSelectedId(null);
+    setLightboxIndex(null);
+    setSvgState({ phase: "idle" });
+    setError(null);
+    setDownloadError(null);
+    clearStoredLogoTask();
+    setState({ phase: "idle" });
+  }
+
+  function downloadGeneratedImage() {
+    if (!selectedCandidate) return;
+    downloadRemoteImage(selectedCandidate.imageUrl, `${fileBase(selectedCandidate.exportName)}.png`);
+  }
+
+  function downloadConvertedSvg() {
+    if (!currentSvgResult) return;
+    downloadTextFile(
+      currentSvgResult.svgText,
+      `${fileBase(currentSvgResult.exportName)}.svg`,
+      "image/svg+xml;charset=utf-8",
+    );
+  }
+
+  async function convertSelectedToSvg() {
+    if (!selectedCandidate || !result) {
+      setDownloadError(t("selectedEmpty"));
+      return;
+    }
+    svgEventSourceRef.current?.close();
+    activeSvgTaskIdRef.current = null;
+    svgLookupVersionRef.current += 1;
+    setDownloadError(null);
+    setSvgState({ phase: "loading", status: "PENDING", candidateId: selectedCandidate.id });
+
+    try {
+      const { taskId, status } = await submitLogoSvgConversion(
+        {
+          productName: form.productName || selectedCandidate.name,
+          productUrl: form.productUrl,
+          productContext: form.productContext,
+          form: form.form,
+          candidate: selectedCandidate,
+        },
+        locale,
+      );
+      activeSvgTaskIdRef.current = taskId;
+      setSvgState({ phase: "loading", status, taskId, candidateId: selectedCandidate.id });
+      svgEventSourceRef.current = streamTaskEvents(taskId, {
+        onStatus: (nextStatus: string) => {
+          setSvgState((current) =>
+            current.phase === "done"
+              ? current
+              : { phase: "loading", status: nextStatus, taskId, candidateId: selectedCandidate.id },
+          );
+          if (
+            nextStatus === "AWAITING_INPUT" ||
+            nextStatus === "SUCCEEDED" ||
+            nextStatus === "FAILED"
+          ) {
+            void resolveSvgTask(taskId, selectedCandidate.id, {
+              final: nextStatus === "SUCCEEDED" || nextStatus === "FAILED",
+              retries: nextStatus === "AWAITING_INPUT" ? 80 : 20,
+            });
+          }
+        },
+        onResult: async () => {
+          await resolveSvgTask(taskId, selectedCandidate.id, { retries: 80 });
+        },
+        onError: () => {
+          if (activeSvgTaskIdRef.current === taskId) {
+            setSvgState((current) =>
+              current.phase === "done"
+                ? current
+                : {
+                    phase: "loading",
+                    status: "RECONNECTING",
+                    taskId,
+                    candidateId: selectedCandidate.id,
+                  },
+            );
+          }
+        },
+        onDone: () => {
+          svgEventSourceRef.current = null;
+          void resolveSvgTask(taskId, selectedCandidate.id, { final: true, retries: 30 });
+        },
+      });
+      void resolveSvgTask(taskId, selectedCandidate.id, { retries: 80 });
+    } catch (err) {
+      setSvgState({
+        phase: "error",
+        candidateId: selectedCandidate.id,
+        message: formatAgentError(err),
+      });
+    }
+  }
+
+  function downloadAllGeneratedImages() {
+    if (!result?.candidates.length) return;
+    result.candidates.forEach((candidate, index) => {
+      window.setTimeout(() => {
+        downloadRemoteImage(candidate.imageUrl, `${fileBase(candidate.exportName)}.png`);
+      }, index * 120);
+    });
+  }
+
+  function openLightbox(candidate: LogoCandidate, index: number) {
+    setSelectedId(candidate.id);
+    setLightboxIndex(index);
+    setDownloadError(null);
+  }
+
+  function showAdjacentLightboxCandidate(direction: -1 | 1) {
+    if (!result?.candidates.length) return;
+    setLightboxIndex((current) => {
+      const currentIndex =
+        current ?? Math.max(result.candidates.findIndex((candidate) => candidate.id === selectedId), 0);
+      const nextIndex = (currentIndex + direction + result.candidates.length) % result.candidates.length;
+      setSelectedId(result.candidates[nextIndex]?.id ?? null);
+      return nextIndex;
+    });
+  }
+
+  return (
+    <section className="overflow-hidden rounded-[1.75rem] border border-[#CFC9BC] bg-white shadow-[0_22px_60px_rgba(17,17,17,0.08)]">
+      <div className="grid xl:grid-cols-[0.42fr_0.58fr]">
+        <div className="bg-white p-5 md:p-7">
+          <div className="mb-6 flex items-start justify-between gap-4 border-b border-[#D8D4CA] pb-5">
+            <div>
+              <p className="text-base font-semibold text-[#111111]">{t("formTitle")}</p>
+              <p className="mt-1 text-sm leading-6 text-[#555555]">{t("formHint")}</p>
+            </div>
+          </div>
+
+          <div className="grid gap-5">
+            <Field label={t("productUrlLabel")} hint={t("optional")}>
+              <Input
+                className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#111111]/15"
+                placeholder={t("productUrlPlaceholder")}
+                value={form.productUrl}
+                onChange={(event) => update("productUrl", event.target.value)}
+              />
+            </Field>
+
+            <Field label={t("productNameLabel")}>
+              <Input
+                aria-invalid={Boolean(error)}
+                className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#111111]/15"
+                placeholder={t("productNamePlaceholder")}
+                value={form.productName}
+                onChange={(event) => update("productName", event.target.value)}
+              />
+            </Field>
+
+            <Field label={t("contextLabel")} hint={t("optional")}>
+              <Textarea
+                className="min-h-24 rounded-2xl border-[#CFC9BC] bg-white text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#111111]/15"
+                placeholder={t("contextPlaceholder")}
+                value={form.productContext}
+                onChange={(event) => update("productContext", event.target.value)}
+              />
+            </Field>
+
+            <Field label={t("referenceImageLabel")} hint={t("optional")}>
+              <div className="grid gap-3">
+                <label className="flex min-h-12 cursor-pointer items-center justify-center gap-2 rounded-2xl border border-dashed border-[#CFC9BC] bg-white px-4 text-sm font-semibold text-[#111111] transition hover:border-[#111111]">
+                  <Upload aria-hidden className="size-4" />
+                  {form.referenceImageName || t("referenceImageUpload")}
+                  <input
+                    className="sr-only"
+                    type="file"
+                    accept="image/png,image/jpeg,image/webp"
+                    onChange={(event) => {
+                      void handleReferenceImage(event.target.files?.[0]);
+                      event.currentTarget.value = "";
+                    }}
+                  />
+                </label>
+                {form.referenceImageDataUrl ? (
+                  <div className="flex items-center gap-3 rounded-2xl border border-[#E1DDD3] bg-white p-3">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      alt={form.referenceImageName || t("referenceImagePreviewAlt")}
+                      className="size-14 rounded-xl object-cover"
+                      src={form.referenceImageDataUrl}
+                    />
+                    <p className="min-w-0 flex-1 truncate text-sm font-semibold text-[#555555]">
+                      {form.referenceImageName}
+                    </p>
+                    <button
+                      type="button"
+                      onClick={clearReferenceImage}
+                      className="flex size-9 shrink-0 items-center justify-center rounded-full border border-[#D8D4CA] text-[#111111]"
+                      aria-label={t("referenceImageRemove")}
+                    >
+                      <X aria-hidden className="size-4" />
+                    </button>
+                  </div>
+                ) : null}
+                <p className="text-xs leading-5 text-[#777777]">{t("referenceImageHint")}</p>
+              </div>
+            </Field>
+
+            <CustomPaletteControl
+              fallbackColors={customPaletteFallbacks}
+              hint={t("customPaletteHint")}
+              inputRefs={customColorInputRefs}
+              label={t("customPaletteLabel")}
+              onChange={updateCustomColor}
+              onOpen={openCustomColorPicker}
+              onRemove={removeCustomColor}
+              removeLabel={t("removeCustomColor")}
+              slots={copy.customPaletteSlots}
+              values={form.customPalette}
+            />
+
+            <SchemeCountGroup
+              label={t("schemeCountLabel")}
+              options={LOGO_GENERATOR_SCHEME_COUNTS}
+              selected={form.schemeCount}
+              labelFor={(count) => t(`schemeCountOptions.${count}`)}
+              onSelect={(schemeCount) => update("schemeCount", schemeCount)}
+            />
+
+            <details className="rounded-[1.25rem] border border-[#E1DDD3] bg-[#F7F6F2] p-4">
+              <summary className="cursor-pointer text-sm font-semibold text-[#111111]">
+                {t("advancedSettings")}
+              </summary>
+              <div className="mt-5 grid gap-5">
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Field label={t("industryLabel")} hint={t("optional")}>
+                    <Input
+                      className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#111111]/15"
+                      placeholder={t("industryPlaceholder")}
+                      value={form.industry}
+                      onChange={(event) => update("industry", event.target.value)}
+                    />
+                  </Field>
+                  <Field label={t("audienceLabel")} hint={t("optional")}>
+                    <Input
+                      className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#111111]/15"
+                      placeholder={t("audiencePlaceholder")}
+                      value={form.audience}
+                      onChange={(event) => update("audience", event.target.value)}
+                    />
+                  </Field>
+                </div>
+
+                <OptionGroup
+                  label={t("formLabel")}
+                  options={LOGO_GENERATOR_FORMS}
+                  selected={form.form}
+                  labelFor={(key) => copy.forms[key]}
+                  onSelect={(nextForm) => update("form", nextForm)}
+                />
+              </div>
+            </details>
+
+            {error ? (
+              <p className="rounded-2xl border border-[#FFD2C2] bg-[#FFF4EC] px-4 py-3 text-sm font-semibold leading-6 text-[#8A260F]">
+                {error}
+              </p>
+            ) : null}
+
+            <div className="grid gap-3">
+              <button
+                type="button"
+                onClick={() => void generateWithAgent()}
+                disabled={!canSubmit}
+                className="inline-flex min-h-12 w-full items-center justify-center rounded-full bg-[#111111] px-5 text-sm font-semibold text-white transition hover:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-55"
+              >
+                {state.phase === "loading" || state.phase === "partial"
+                  ? t("generatingAgent")
+                  : t("generateAgent")}
+              </button>
+              <button
+                type="button"
+                onClick={reset}
+                className="inline-flex min-h-11 items-center justify-center gap-2 rounded-full border border-[#CFC9BC] bg-white px-5 text-sm font-semibold text-[#111111] transition hover:-translate-y-0.5"
+              >
+                <RefreshCcw aria-hidden className="size-4" />
+                {t("reset")}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white p-5 md:p-7">
+          <div className="flex min-h-[760px] flex-col overflow-hidden rounded-[1.5rem] border border-[#E8E4DB] bg-[#FAFAFA] p-4 md:p-5">
+            <div className="flex flex-col justify-between gap-3 border-b border-[#E8E4DB] pb-4 md:flex-row md:items-start">
+              <div>
+                <p className="text-base font-semibold text-[#111111]">{t("conversationTitle")}</p>
+                <p className="mt-1 text-sm leading-6 text-[#666666]">{t("conversationHint")}</p>
+              </div>
+              {result ? (
+                <div className="flex shrink-0 flex-wrap gap-2 md:justify-end">
+                  <button
+                    type="button"
+                    onClick={downloadGeneratedImage}
+                    disabled={!selectedCandidate}
+                    className="inline-flex min-h-10 items-center gap-2 rounded-lg bg-[#111111] px-4 text-xs font-semibold text-white transition hover:bg-[#2A2A2A] disabled:pointer-events-none disabled:opacity-45"
+                  >
+                    <Download aria-hidden className="size-4" />
+                    {t("downloadPng")}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      currentSvgResult ? downloadConvertedSvg() : void convertSelectedToSvg()
+                    }
+                    disabled={!selectedCandidate || Boolean(isConvertingSelectedSvg)}
+                    className="inline-flex min-h-10 items-center gap-2 rounded-lg border border-[#D8D4CA] bg-white px-4 text-xs font-semibold text-[#111111] transition hover:bg-[#F4F4F4] disabled:pointer-events-none disabled:opacity-45"
+                  >
+                    {isConvertingSelectedSvg ? (
+                      <Loader2 aria-hidden className="size-4 animate-spin" />
+                    ) : currentSvgResult ? (
+                      <Download aria-hidden className="size-4" />
+                    ) : (
+                      <FileCode2 aria-hidden className="size-4" />
+                    )}
+                    {isConvertingSelectedSvg
+                      ? t("convertingSvg")
+                      : currentSvgResult
+                        ? t("downloadSvg")
+                        : t("convertToSvg")}
+                  </button>
+                  {result.candidates.length > 1 ? (
+                    <button
+                      type="button"
+                      onClick={downloadAllGeneratedImages}
+                      className="inline-flex min-h-10 items-center gap-2 rounded-lg border border-[#D8D4CA] bg-white px-4 text-xs font-semibold text-[#111111] transition hover:bg-[#F4F4F4]"
+                    >
+                      <Download aria-hidden className="size-4" />
+                      {t("downloadAllPng")}
+                    </button>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+
+            {downloadError ? (
+              <p className="mt-3 text-xs font-semibold leading-5 text-[#8E2A17]">
+                {downloadError}
+              </p>
+            ) : null}
+            {selectedCandidate &&
+            svgState.phase === "loading" &&
+            svgState.candidateId === selectedCandidate.id ? (
+              <p className="mt-3 text-xs font-semibold leading-5 text-[#555555]">
+                {t("svgLoadingHint")}
+              </p>
+            ) : null}
+            {selectedCandidate &&
+            svgState.phase === "done" &&
+            svgState.candidateId === selectedCandidate.id ? (
+              <p className="mt-3 text-xs font-semibold leading-5 text-[#2F5B40]">
+                {t("svgReadyHint", { count: svgState.data.conversion.pathCount })}
+              </p>
+            ) : null}
+            {selectedCandidate &&
+            svgState.phase === "error" &&
+            svgState.candidateId === selectedCandidate.id ? (
+              <p className="mt-3 text-xs font-semibold leading-5 text-[#8E2A17]">
+                {svgState.message}
+              </p>
+            ) : null}
+
+            {state.phase === "idle" ? (
+              <ResultPlaceholder title={t("emptyTitle")} hint={t("emptyHint")} />
+            ) : null}
+
+            {state.phase === "loading" ? (
+              <div className="mt-5 flex min-h-0 flex-1 flex-col items-center justify-center rounded-lg border border-[#E5E5E5] bg-white p-8 text-center">
+                <span className="flex size-12 items-center justify-center rounded-lg bg-[#F4F4F4] text-[#111111]">
+                  <Loader2 aria-hidden className="size-5 animate-spin" />
+                </span>
+                <h3 className="mt-4 text-lg font-semibold text-[#111111]">
+                  {state.awaitingResult ? t("awaitingResultTitle") : t("loadingTitle")}
+                </h3>
+                <p className="mx-auto mt-2 max-w-sm text-sm leading-6 text-[#555555]">
+                  {state.awaitingResult ? t("awaitingResultHint") : t("loadingHint")}
+                </p>
+              </div>
+            ) : null}
+
+            {state.phase === "error" ? (
+              <div className="mt-5 flex min-h-0 flex-1 items-center justify-center rounded-lg border border-[#FFD2C2] bg-[#FFF4EC] p-8 text-center">
+                <div className="max-w-md">
+                  <span className="mx-auto flex size-12 items-center justify-center rounded-lg bg-[#FF5A2E] text-white">
+                    <AlertTriangle aria-hidden className="size-5" />
+                  </span>
+                  <h3 className="mt-4 text-lg font-semibold text-[#111111]">{t("errorTitle")}</h3>
+                  <p className="mt-2 text-sm leading-6 text-[#6A382A]">
+                    {state.message || t("errors.agent")}
+                  </p>
+                  <button
+                    type="button"
+                    onClick={() => void generateWithAgent()}
+                    className="mt-5 inline-flex min-h-10 items-center justify-center rounded-lg bg-[#111111] px-4 text-sm font-semibold text-white"
+                  >
+                    {t("retryAgent")}
+                  </button>
+                </div>
+              </div>
+            ) : null}
+
+            {result ? (
+              <div className="mt-5 min-h-0 flex-1 overflow-y-auto pr-1">
+                <div className="mb-4">
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-xl font-semibold leading-tight text-[#111111]">
+                      {isPartialResult
+                        ? t("partialResultTitle", { completed: completedCount, total: totalCount })
+                        : t("resultTitle", { count: result.candidates.length })}
+                    </h3>
+                    {isPartialResult ? (
+                      <Loader2 aria-hidden className="size-4 animate-spin text-[#555555]" />
+                    ) : null}
+                  </div>
+                  <p className="mt-2 text-sm leading-6 text-[#666666]">
+                    {isPartialResult ? t("partialResultHint") : t("resultHint")}
+                  </p>
+                </div>
+                <div className="flex flex-wrap items-start gap-4">
+                  {result.candidates.map((candidate, index) => {
+                    const selected = selectedId === candidate.id;
+                    return (
+                      <button
+                        key={candidate.id}
+                        type="button"
+                        aria-label={candidate.name}
+                        aria-pressed={selected}
+                        onClick={() => openLightbox(candidate, index)}
+                        style={{
+                          borderColor: selected ? "#111111" : "#E1DDD3",
+                          borderWidth: selected ? 2 : 1,
+                          width: "min(100%, 280px)",
+                        }}
+                        className={`block overflow-hidden rounded-lg border-solid bg-white p-0 transition hover:border-[#111111] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111]/20 ${
+                          selected
+                            ? "shadow-[0_14px_34px_rgba(17,17,17,0.12)]"
+                            : "shadow-[0_8px_22px_rgba(17,17,17,0.05)]"
+                        }`}
+                      >
+                        <span className="block aspect-[3/2] w-full bg-white">
+                          {/* eslint-disable-next-line @next/next/no-img-element */}
+                          <img
+                            alt={candidate.name}
+                            className="h-full w-full object-contain"
+                            src={candidate.imageUrl}
+                          />
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      {lightboxCandidate ? (
+        <div
+          className="fixed inset-0 z-[80] flex items-center justify-center bg-black/85 p-4 backdrop-blur-sm md:p-8"
+          role="dialog"
+          aria-modal="true"
+          aria-label={lightboxCandidate.name}
+        >
+          <button
+            type="button"
+            aria-label={t("closePreview")}
+            onClick={() => setLightboxIndex(null)}
+            className="absolute right-4 top-4 z-10 flex size-11 items-center justify-center rounded-lg bg-white/10 p-0 text-white transition hover:bg-white/20"
+          >
+            <X aria-hidden className="size-5" />
+          </button>
+          {result && result.candidates.length > 1 ? (
+            <>
+              <button
+                type="button"
+                aria-label={t("previousPreview")}
+                onClick={() => showAdjacentLightboxCandidate(-1)}
+                className="absolute left-4 top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-lg bg-white/10 p-0 text-white transition hover:bg-white/20"
+              >
+                <ChevronLeft aria-hidden className="size-6" />
+              </button>
+              <button
+                type="button"
+                aria-label={t("nextPreview")}
+                onClick={() => showAdjacentLightboxCandidate(1)}
+                className="absolute right-4 top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-lg bg-white/10 p-0 text-white transition hover:bg-white/20"
+              >
+                <ChevronRight aria-hidden className="size-6" />
+              </button>
+            </>
+          ) : null}
+          <div className="flex h-full w-full items-center justify-center px-10 py-12 md:px-16">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              alt={lightboxCandidate.name}
+              className="block max-h-full max-w-full rounded-lg bg-white object-contain shadow-[0_28px_80px_rgba(0,0,0,0.45)]"
+              src={lightboxCandidate.imageUrl}
+            />
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+function CustomPaletteControl({
+  fallbackColors,
+  hint,
+  inputRefs,
+  label,
+  onChange,
+  onOpen,
+  onRemove,
+  removeLabel,
+  slots,
+  values,
+}: {
+  fallbackColors: Record<CustomPaletteKey, string>;
+  hint: string;
+  inputRefs: MutableRefObject<Record<CustomPaletteKey, HTMLInputElement | null>>;
+  label: string;
+  onChange: (key: CustomPaletteKey, color: string) => void;
+  onOpen: (key: CustomPaletteKey) => void;
+  onRemove: (key: CustomPaletteKey) => void;
+  removeLabel: string;
+  slots: Record<CustomPaletteKey, string>;
+  values: Record<CustomPaletteKey, string>;
+}) {
+  const hasAnyColor = Object.values(values).some(Boolean);
+
+  return (
+    <div className="grid gap-2">
+      <div
+        className={`flex min-h-14 items-center justify-between gap-4 rounded-2xl border-2 px-4 text-sm font-semibold transition ${
+          hasAnyColor
+            ? "border-[#111111] bg-[#F2F1EC] text-[#111111] shadow-[0_8px_18px_rgba(17,17,17,0.08)]"
+            : "border-[#E1DDD3] bg-white text-[#555555]"
+        }`}
+      >
+        <span className="min-w-0 text-[#111111]">{label}</span>
+        <span className="flex shrink-0 gap-2">
+          {customPaletteKeys.map((key) => {
+            const color = values[key];
+            return (
+              <span key={key} className="group relative flex size-9 items-center justify-center">
+                <button
+                  type="button"
+                  aria-label={slots[key]}
+                  className={`flex size-8 items-center justify-center rounded-full border transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111]/20 ${
+                    color ? "border-white/60" : "border-[#CFC9BC] bg-white text-[#777777]"
+                  }`}
+                  style={color ? { backgroundColor: color } : undefined}
+                  onClick={() => onOpen(key)}
+                >
+                  {color ? null : <Plus aria-hidden className="size-4" />}
+                </button>
+                {color ? (
+                  <button
+                    type="button"
+                    aria-label={`${removeLabel} ${slots[key]}`}
+                    className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full border border-white bg-[#111111] text-white opacity-0 shadow-[0_2px_8px_rgba(17,17,17,0.2)] transition group-hover:opacity-100 group-focus-within:opacity-100"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onRemove(key);
+                    }}
+                  >
+                    <X aria-hidden className="size-2.5" />
+                  </button>
+                ) : null}
+                <input
+                  ref={(node) => {
+                    inputRefs.current[key] = node;
+                  }}
+                  aria-label={slots[key]}
+                  className="sr-only"
+                  type="color"
+                  value={color || fallbackColors[key]}
+                  onChange={(event) => onChange(key, event.target.value)}
+                />
+              </span>
+            );
+          })}
+        </span>
+      </div>
+      <p className="text-xs leading-5 text-[#777777]">{hint}</p>
+    </div>
+  );
+}
+
+function OptionGroup<T extends string>({
+  label,
+  options,
+  selected,
+  labelFor,
+  onSelect,
+}: {
+  label: string;
+  options: readonly T[];
+  selected: T;
+  labelFor: (key: T) => string;
+  onSelect: (key: T) => void;
+}) {
+  return (
+    <div>
+      <p className="mb-3 text-[13px] font-semibold text-[#111111]">{label}</p>
+      <div className="flex flex-wrap gap-2">
+        {options.map((option) => {
+          const active = selected === option;
+          return (
+            <button
+              key={option}
+              type="button"
+              aria-pressed={active}
+              onClick={() => onSelect(option)}
+              style={active ? { borderColor: "#111111" } : undefined}
+              className={`min-h-10 rounded-full border-2 px-4 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111]/20 ${
+                active
+                  ? "border-[#111111] bg-[#F2F1EC] text-[#111111] shadow-[0_8px_18px_rgba(17,17,17,0.08)]"
+                  : "border-[#E1DDD3] bg-white text-[#555555] hover:border-[#8A857A] hover:text-[#111111]"
+              }`}
+            >
+              {labelFor(option)}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function SchemeCountGroup({
+  label,
+  options,
+  selected,
+  labelFor,
+  onSelect,
+}: {
+  label: string;
+  options: readonly number[];
+  selected: number;
+  labelFor: (count: number) => string;
+  onSelect: (count: number) => void;
+}) {
+  return (
+    <div>
+      <p className="mb-3 text-[13px] font-semibold text-[#111111]">{label}</p>
+      <div className="grid grid-cols-5 gap-2">
+        {options.map((option) => {
+          const active = selected === option;
+          return (
+            <button
+              key={option}
+              type="button"
+              aria-pressed={active}
+              onClick={() => onSelect(option)}
+              className={`flex min-h-11 items-center justify-center rounded-full border-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111]/20 ${
+                active
+                  ? "border-[#111111] bg-[#F2F1EC] text-[#111111] shadow-[0_8px_18px_rgba(17,17,17,0.08)]"
+                  : "border-[#E1DDD3] bg-white text-[#555555] hover:border-[#8A857A] hover:text-[#111111]"
+              }`}
+            >
+              {labelFor(option)}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function ResultPlaceholder({ title, hint }: { title: string; hint: string }) {
+  return (
+    <div className="mt-5 flex min-h-0 flex-1 flex-col items-center justify-center rounded-lg border border-[#E5E5E5] bg-white p-8 text-center">
+      <span className="mx-auto flex size-12 items-center justify-center rounded-lg bg-[#F4F4F4] text-[#111111]">
+        <FileImage aria-hidden className="size-5" />
+      </span>
+      <h3 className="mt-5 text-lg font-semibold leading-tight text-[#111111]">{title}</h3>
+      <p className="mx-auto mt-3 max-w-sm text-sm leading-6 text-[#555555]">{hint}</p>
+    </div>
+  );
+}