@tomako/tools-runtime 0.1.0

package/src/features/tools/product-name-generator/widget/product-name-generator.tsx

@@ -0,0 +1,776 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import { Checkbox } from "@tomako/ui/checkbox";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from "@tomako/ui/collapsible";
+import { Input, Textarea } from "@tomako/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import { resolvePrimaryLocale } from "../../../../i18n/locale-fallback";
+import { ApiError } from "../../../../lib/api/errors";
+import {
+    PRODUCT_NAME_MARKETS,
+    PRODUCT_NAME_TLDS,
+    productNameInputSchema,
+    stringifyProductNameScreen,
+    type ProductNameCandidate,
+    type ProductNameInput,
+    type ProductNameScreenResult,
+} from "../../../../lib/tools/product-name-generator-schema";
+import { cn } from "@tomako/ui/cn";
+import {
+    fetchProductNameDetailTask,
+    fetchProductNameScreenTask,
+    submitProductNameDetail,
+    submitProductNameScreen,
+    type LlmTaskWatchPollOutcome,
+} from "../../../../host/client";
+import { ChevronDown, Lightbulb } from "lucide-react";
+import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
+
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+    ToolActionBar,
+    ToolEmptyPanel,
+    ToolErrorPanel,
+    ToolField,
+    ToolLoadingPanel,
+    ToolPreviewPanel,
+    ToolPrimaryButton,
+    ToolResetButton,
+    ToolResultActions,
+    ToolResultHeader,
+    ToolWorkspaceLayout,
+    toolInputClass,
+    toolInvalidControlClass,
+    toolSelectTriggerClass,
+    toolTextareaClass,
+    type ToolLoadingStep,
+} from "../../../../components/tools/workspace";
+import { CandidateCard } from "./candidate-card";
+import {
+    DETAIL_RESULT_MAX_MISSING_ATTEMPTS,
+    DETAIL_RESULT_POLL_MS,
+    DETAIL_TASK_MAX_ATTEMPTS,
+    DETAIL_TASK_POLL_MS,
+    SCREEN_LOADING_STEP_COUNT,
+    defaultForm,
+} from "./constants";
+import { MultiSelectMenu, StyleSelect } from "./form-controls";
+import {
+    screenLoadingProgress,
+    screenLoadingStepIndex,
+    wait,
+} from "./helpers";
+import type {
+    DetailState,
+    FieldErrors,
+    FormCopy,
+    FormErrorKey,
+    ScreenState,
+} from "./types";
+
+export function ProductNameGenerator() {
+  const locale = useLocale();
+  const t = useTranslations("toolsPages.productNameGenerator.widget");
+  const [form, setForm] = useState<ProductNameInput>(defaultForm);
+  const [screenState, setScreenState] = useState<ScreenState>({
+    phase: "idle",
+  });
+  const [detailStates, setDetailStates] = useState<Record<string, DetailState>>(
+    {},
+  );
+  const [formError, setFormError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [copied, setCopied] = useState<string | null>(null);
+  const [revealedCount, setRevealedCount] = useState(0);
+  const activeScreenTaskIdRef = useRef<string | null>(null);
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const descriptionRef = useRef<HTMLTextAreaElement | null>(null);
+  const marketsRef = useRef<HTMLButtonElement | null>(null);
+  const tldsRef = useRef<HTMLButtonElement | null>(null);
+  const maxPriceRef = useRef<HTMLInputElement | null>(null);
+  const candidateNamesRef = useRef<HTMLTextAreaElement | null>(null);
+  const screenTaskWatch = useLegacyLlmTaskWatch<ProductNameScreenResult>();
+
+  useEffect(() => {
+    return () => {
+      screenTaskWatch.stop();
+      activeScreenTaskIdRef.current = null;
+    };
+  }, [screenTaskWatch]);
+
+  const copy = useMemo(
+    () =>
+      ({
+        styles: t.raw("styles"),
+        markets: t.raw("markets"),
+        tlds: t.raw("tlds"),
+        verdicts: t.raw("verdicts"),
+        stages: t.raw("stages"),
+      }) as FormCopy,
+    [t],
+  );
+
+  const result = screenState.phase === "done" ? screenState.data : null;
+  const visibleNames = result?.names.slice(0, revealedCount) ?? [];
+  const canSubmit = screenState.phase !== "loading";
+  const loadingStepTitles = useMemo(
+    () => (t.raw("loadingSteps") as readonly string[]).slice(0, SCREEN_LOADING_STEP_COUNT),
+    [t],
+  );
+  const loadingSteps = useMemo<readonly ToolLoadingStep[]>(() => {
+    const activeStep =
+      screenState.phase === "loading"
+        ? screenLoadingStepIndex(screenState.status)
+        : 0;
+
+    return loadingStepTitles.map((title, index) => ({
+      title,
+      status:
+        index < activeStep
+          ? "complete"
+          : index === activeStep
+            ? "active"
+            : "pending",
+      countdown:
+        screenState.phase === "loading" && index === activeStep
+          ? t("loadingCountdown")
+          : undefined,
+    }));
+  }, [loadingStepTitles, screenState, t]);
+
+  useEffect(() => {
+    if (!result) return;
+    setRevealedCount(result.names.length > 0 ? 1 : 0);
+    if (result.names.length <= 1) return;
+
+    let index = 1;
+    const timer = window.setInterval(() => {
+      index += 1;
+      setRevealedCount(Math.min(index, result.names.length));
+      if (index >= result.names.length) {
+        window.clearInterval(timer);
+      }
+    }, 420);
+
+    return () => window.clearInterval(timer);
+  }, [result]);
+
+  function update<K extends keyof ProductNameInput>(
+    key: K,
+    value: ProductNameInput[K],
+  ) {
+    setForm((current) => ({ ...current, [key]: value }));
+    clearFieldError(key);
+    setFormError(null);
+  }
+
+  function isFormErrorKey(key: PropertyKey): key is FormErrorKey {
+    return (
+      key === "productDescription" ||
+      key === "targetMarkets" ||
+      key === "tlds" ||
+      key === "maxPriceUsd" ||
+      key === "candidateNames"
+    );
+  }
+
+  function clearFieldError(key: PropertyKey) {
+    if (!isFormErrorKey(key)) return;
+    setFieldErrors((current) => {
+      if (!current[key]) return current;
+      const next = { ...current };
+      delete next[key];
+      return next;
+    });
+  }
+
+  function validationMessage(
+    issue: { path: PropertyKey[]; message?: string } | undefined,
+  ): string {
+    const field = issue?.path[0];
+    if (field === "productDescription") {
+      if (issue?.message === "description_meaningful") {
+        return t("errors.descriptionMeaningful");
+      }
+      return form.productDescription.trim()
+        ? t("errors.descriptionShort")
+        : t("errors.descriptionRequired");
+    }
+    if (field === "targetMarkets") return t("errors.market");
+    if (field === "tlds") return t("errors.domain");
+    if (field === "maxPriceUsd") return t("errors.maxPrice");
+    if (field === "candidateNames") return t("errors.candidateNames");
+    return t("errors.required");
+  }
+
+  function focusFirstError(field: FormErrorKey) {
+    if (field === "maxPriceUsd" || field === "candidateNames") {
+      setAdvancedOpen(true);
+    }
+
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        const target =
+          field === "productDescription"
+            ? descriptionRef.current
+            : field === "targetMarkets"
+              ? marketsRef.current
+              : field === "tlds"
+                ? tldsRef.current
+                : field === "maxPriceUsd"
+                  ? maxPriceRef.current
+                  : candidateNamesRef.current;
+
+        target?.focus();
+        target?.scrollIntoView({ behavior: "smooth", block: "center" });
+      });
+    });
+  }
+
+  function validateForm(): ProductNameInput | null {
+    const parsed = productNameInputSchema.safeParse(form);
+    if (!parsed.success) {
+      const nextFieldErrors: FieldErrors = {};
+      let firstErrorField: FormErrorKey | null = null;
+
+      for (const issue of parsed.error.issues) {
+        const field = issue.path[0];
+        if (!isFormErrorKey(field) || nextFieldErrors[field]) continue;
+        nextFieldErrors[field] = validationMessage(issue);
+        firstErrorField ??= field;
+      }
+
+      setFieldErrors(nextFieldErrors);
+      setFormError(t("errors.fixFields"));
+      if (firstErrorField) focusFirstError(firstErrorField);
+      return null;
+    }
+    setFieldErrors({});
+    setFormError(null);
+    return parsed.data;
+  }
+
+  function formatAgentError(err: unknown): string {
+    if (err instanceof ApiError) {
+      if (
+        err.status === 500 ||
+        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 formatDetailTaskError(error: string | undefined): string {
+    if (
+      error === "wrong_detail_result_type" ||
+      error === "invalid_detail_result"
+    ) {
+      return t("errors.invalidDetailResult");
+    }
+    return error || t("errors.noDetail");
+  }
+
+  function scrollToResult() {
+    window.requestAnimationFrame(() => {
+      resultRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    });
+  }
+
+  async function pollScreenOnce(taskId: string): Promise<LlmTaskWatchPollOutcome> {
+    const task = await fetchProductNameScreenTask(taskId);
+    if (activeScreenTaskIdRef.current !== taskId) {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+    if (task.data && task.data.names.length > 0) {
+      return { settled: true as const, kind: "success" as const, data: task.data };
+    }
+    if (task.status === "FAILED" || task.status === "RESULT_INVALID") {
+      return {
+        settled: true as const,
+        kind: "error" as const,
+        category: task.status === "RESULT_INVALID" ? ("schema" as const) : ("task" as const),
+      };
+    }
+    setScreenState({ phase: "loading", status: task.status, taskId });
+    return {
+      settled: false as const,
+      pendingWriteback:
+        task.status === "AWAITING_INPUT" || task.status === "SUCCEEDED",
+    };
+  }
+
+  async function generateWithAgent() {
+    const validatedForm = validateForm();
+    if (!validatedForm || !canSubmit) return;
+    screenTaskWatch.stop();
+    activeScreenTaskIdRef.current = null;
+    setCopied(null);
+    setRevealedCount(0);
+    setDetailStates({});
+    setScreenState({ phase: "loading", status: "PENDING" });
+    scrollToResult();
+
+    try {
+      const { taskId, status } = await submitProductNameScreen(
+        validatedForm,
+        locale,
+      );
+      console.info("[workspace-tool-qa] product-name-generator", taskId);
+      activeScreenTaskIdRef.current = taskId;
+      setScreenState({ phase: "loading", status, taskId });
+      screenTaskWatch.start(
+        taskId,
+        pollScreenOnce,
+        {
+          onStatus: (nextStatus) => {
+            setScreenState({ phase: "loading", status: nextStatus, taskId });
+          },
+          onSuccess: (data) => {
+            setScreenState({ phase: "done", data });
+            setDetailStates({});
+          },
+          onError: (category) => {
+            setScreenState({
+              phase: "error",
+              message:
+                category === "schema"
+                  ? t("errors.invalidResult")
+                  : category === "timeout"
+                    ? t("errors.noResult")
+                    : t("errors.agent"),
+            });
+          },
+        },
+        { graceWindowMs: 300_000 },
+      );
+    } catch (err) {
+      setScreenState({ phase: "error", message: formatAgentError(err) });
+    }
+  }
+
+  async function runDetail(candidate: ProductNameCandidate) {
+    if (!result) return;
+    const current = detailStates[candidate.name];
+    if (current?.phase === "loading") return;
+
+    setDetailStates((states) => ({
+      ...states,
+      [candidate.name]: { phase: "loading", status: "PENDING" },
+    }));
+
+    try {
+      const { taskId, status } = await submitProductNameDetail({
+        input: form,
+        locale,
+        selectedName: candidate,
+        currentResult: result,
+      });
+      setDetailStates((states) => ({
+        ...states,
+        [candidate.name]: { phase: "loading", status, taskId },
+      }));
+
+      let missingResultAttempts = 0;
+      for (let attempt = 0; attempt <= DETAIL_TASK_MAX_ATTEMPTS; attempt += 1) {
+        const task = await fetchProductNameDetailTask(taskId);
+        if (task.data) {
+          const detailData = task.data;
+          setDetailStates((states) => ({
+            ...states,
+            [candidate.name]: { phase: "done", data: detailData },
+          }));
+          return;
+        }
+        if (task.status === "FAILED" || task.status === "RESULT_INVALID") {
+          setDetailStates((states) => ({
+            ...states,
+            [candidate.name]: {
+              phase: "error",
+              message: formatDetailTaskError(task.error),
+            },
+          }));
+          return;
+        }
+
+        if (task.status === "AWAITING_RESULT") {
+          missingResultAttempts += 1;
+          if (missingResultAttempts > DETAIL_RESULT_MAX_MISSING_ATTEMPTS) {
+            setDetailStates((states) => ({
+              ...states,
+              [candidate.name]: { phase: "error", message: t("errors.noDetail") },
+            }));
+            return;
+          }
+        }
+
+        setDetailStates((states) => ({
+          ...states,
+          [candidate.name]: { phase: "loading", status: task.status, taskId },
+        }));
+        await wait(
+          task.status === "AWAITING_RESULT"
+            ? DETAIL_RESULT_POLL_MS
+            : DETAIL_TASK_POLL_MS,
+        );
+      }
+
+      setDetailStates((states) => ({
+        ...states,
+        [candidate.name]: { phase: "error", message: t("errors.noDetail") },
+      }));
+    } catch (err) {
+      setDetailStates((states) => ({
+        ...states,
+        [candidate.name]: { phase: "error", message: formatAgentError(err) },
+      }));
+    }
+  }
+
+  async function copyText(value: string) {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(value);
+      window.setTimeout(() => setCopied(null), 1500);
+    } catch {
+      setFormError(t("errors.copy"));
+    }
+  }
+
+  function reset() {
+    screenTaskWatch.stop();
+    activeScreenTaskIdRef.current = null;
+    setForm(defaultForm);
+    setScreenState({ phase: "idle" });
+    setDetailStates({});
+    setRevealedCount(0);
+    setFormError(null);
+    setFieldErrors({});
+    setAdvancedOpen(false);
+    setCopied(null);
+  }
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    void generateWithAgent();
+  }
+
+  const formPanel = (
+    <form className="flex min-h-full flex-col" onSubmit={handleSubmit}>
+      <div className="-mx-1 min-w-0 flex-1 space-y-5 overflow-x-hidden px-1 pb-5">
+        <ToolField
+          label={t("descriptionLabel")}
+          required
+          error={fieldErrors.productDescription}
+        >
+          <Textarea
+            ref={descriptionRef}
+            aria-invalid={Boolean(fieldErrors.productDescription)}
+            className={cn(
+              toolTextareaClass,
+              "min-h-36",
+              fieldErrors.productDescription ? toolInvalidControlClass : "",
+            )}
+            placeholder={t("descriptionPlaceholder")}
+            value={form.productDescription}
+            onChange={(event) => update("productDescription", event.target.value)}
+          />
+        </ToolField>
+
+        <ToolField label={t("targetUsersLabel")} hint={t("optional")}>
+          <Input
+            className={toolInputClass}
+            placeholder={t("targetUsersPlaceholder")}
+            value={form.targetUsers}
+            onChange={(event) => update("targetUsers", event.target.value)}
+          />
+        </ToolField>
+
+        <ToolField label={t("styleLabel")}>
+          <StyleSelect
+            labels={copy.styles}
+            value={form.style}
+            onChange={(value) => update("style", value)}
+          />
+        </ToolField>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <MultiSelectMenu
+            title={t("marketLabel")}
+            placeholder={t("marketPlaceholder")}
+            options={PRODUCT_NAME_MARKETS}
+            values={form.targetMarkets}
+            labels={copy.markets}
+            required
+            joiner={resolvePrimaryLocale(locale) === "zh" ? "、" : ", "}
+            error={fieldErrors.targetMarkets}
+            errorId="product-name-markets-error"
+            triggerRef={marketsRef}
+            onChange={(values) => update("targetMarkets", values)}
+          />
+
+          <MultiSelectMenu
+            title={t("domainLabel")}
+            placeholder={t("domainPlaceholder")}
+            options={PRODUCT_NAME_TLDS}
+            values={form.tlds}
+            labels={copy.tlds}
+            required
+            joiner={resolvePrimaryLocale(locale) === "zh" ? "、" : ", "}
+            error={fieldErrors.tlds}
+            errorId="product-name-tlds-error"
+            triggerRef={tldsRef}
+            onChange={(values) => update("tlds", values)}
+          />
+        </div>
+
+        <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+          <CollapsibleTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              className="h-11 w-full justify-between rounded-lg border-[#E4E9F1] bg-white px-3.5 text-sm font-semibold text-[#111111] shadow-none hover:bg-[#F6F7F8]"
+            >
+              {t("advancedLabel")}
+              <ChevronDown aria-hidden className="size-4 text-[#777777]" />
+            </Button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="mt-5 grid gap-5">
+            <ToolField label={t("workingNameLabel")} hint={t("optional")}>
+              <Input
+                className={toolInputClass}
+                placeholder={t("workingNamePlaceholder")}
+                value={form.workingName}
+                onChange={(event) => update("workingName", event.target.value)}
+              />
+            </ToolField>
+
+            <ToolField label={t("desiredVibeLabel")} hint={t("optional")}>
+              <Input
+                className={toolInputClass}
+                placeholder={t("desiredVibePlaceholder")}
+                value={form.desiredVibe}
+                onChange={(event) => update("desiredVibe", event.target.value)}
+              />
+            </ToolField>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <ToolField
+                label={t("maxPriceLabel")}
+                hint={t("optional")}
+                error={fieldErrors.maxPriceUsd}
+              >
+                <Input
+                  ref={maxPriceRef}
+                  aria-invalid={Boolean(fieldErrors.maxPriceUsd)}
+                  className={cn(
+                    toolInputClass,
+                    fieldErrors.maxPriceUsd ? toolInvalidControlClass : "",
+                  )}
+                  min={0}
+                  type="number"
+                  value={form.maxPriceUsd}
+                  onChange={(event) =>
+                    update("maxPriceUsd", Number(event.target.value || 0))
+                  }
+                />
+              </ToolField>
+              <ToolField label={t("countLabel")}>
+                <Select
+                  value={String(form.finalCount)}
+                  onValueChange={(value) => update("finalCount", Number(value))}
+                >
+                  <SelectTrigger className={toolSelectTriggerClass}>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[3, 4, 5].map((count) => (
+                      <SelectItem key={count} value={String(count)}>
+                        {count}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </ToolField>
+            </div>
+
+            <label className="flex cursor-pointer items-start gap-3 rounded-lg border border-[#E4E9F1] bg-[#FAFBFD] p-4 text-sm leading-6 text-[#555555]">
+              <Checkbox
+                checked={form.allowFallbackDomains}
+                className="mt-1 border-[#CFC9BC] data-[state=checked]:border-[#111111] data-[state=checked]:bg-[#111111] data-[state=checked]:text-white"
+                onCheckedChange={(checked) =>
+                  update("allowFallbackDomains", checked === true)
+                }
+              />
+              <span>
+                <span className="block font-semibold text-[#111111]">
+                  {t("fallbackLabel")}
+                </span>
+                {t("fallbackHint")}
+              </span>
+            </label>
+
+            <ToolField
+              label={t("candidateNamesLabel")}
+              hint={t("optional")}
+              error={fieldErrors.candidateNames}
+            >
+              <Textarea
+                ref={candidateNamesRef}
+                aria-invalid={Boolean(fieldErrors.candidateNames)}
+                className={cn(
+                  toolTextareaClass,
+                  fieldErrors.candidateNames ? toolInvalidControlClass : "",
+                )}
+                placeholder={t("candidateNamesPlaceholder")}
+                value={form.candidateNames}
+                onChange={(event) => update("candidateNames", event.target.value)}
+              />
+            </ToolField>
+          </CollapsibleContent>
+        </Collapsible>
+
+        {formError ? (
+          <p className="rounded-lg border border-[#F1C2B8] bg-[#FFF1EC] px-4 py-3 text-sm font-semibold leading-6 text-[#7A2818]">
+            {formError}
+          </p>
+        ) : null}
+      </div>
+
+      <ToolActionBar attached>
+        <ToolPrimaryButton type="submit" disabled={!canSubmit}>
+          {screenState.phase === "loading"
+            ? t("generatingAgent")
+            : t("generateAgent")}
+        </ToolPrimaryButton>
+        <ToolResetButton onClick={reset}>{t("reset")}</ToolResetButton>
+      </ToolActionBar>
+    </form>
+  );
+
+  const previewPanel = (
+    <ToolPreviewPanel contentClassName="bg-[#FAFAFA]">
+      <div ref={resultRef} className="scroll-mt-24" />
+
+      {screenState.phase === "idle" ? (
+        <ToolEmptyPanel
+          icon={
+            <span className="mx-auto flex size-12 items-center justify-center rounded-lg bg-white text-[#111111] shadow-sm">
+              <Lightbulb aria-hidden className="size-5" />
+            </span>
+          }
+          title={t("emptyTitle")}
+          body={t("emptyHint")}
+          className="min-h-0 flex-1 border-0 bg-transparent"
+        />
+      ) : null}
+
+      {screenState.phase === "loading" ? (
+        <ToolLoadingPanel
+          label={t("loadingTitle")}
+          progress={screenLoadingProgress(screenState.status)}
+          steps={loadingSteps}
+          tipLabel={t("loadingStatus")}
+          tip={t("loadingHint")}
+        />
+      ) : null}
+
+      {screenState.phase === "error" ? (
+        <div className="flex min-h-0 flex-1 items-center justify-center">
+          <div className="grid w-full max-w-xl gap-4">
+            <ToolErrorPanel
+              title={t("errorTitle")}
+              body={screenState.message}
+            />
+            <ToolPrimaryButton onClick={() => void generateWithAgent()}>
+              {t("retryAgent")}
+            </ToolPrimaryButton>
+          </div>
+        </div>
+      ) : null}
+
+      {result ? (
+        <div className="min-h-0 flex-1 overflow-y-auto pr-1">
+          <div className="grid gap-5">
+            <ToolResultHeader
+              eyebrow={t("agentResult")}
+              title={t("resultTitle")}
+              body={result.summary}
+              actions={
+                <ToolResultActions
+                  copied={Boolean(copied)}
+                  copyLabel={t("copyAll")}
+                  copiedLabel={t("copied")}
+                  resetLabel={t("reset")}
+                  onCopy={() => void copyText(stringifyProductNameScreen(result))}
+                  onReset={reset}
+                />
+              }
+            />
+            <p className="rounded-lg border border-[#F1C2B8] bg-[#FFF1EC] px-4 py-3 text-sm leading-6 text-[#7A2818]">
+              {result.disclaimer}
+            </p>
+
+            {visibleNames.map((candidate) => (
+              <CandidateCard
+                key={candidate.name}
+                candidate={candidate}
+                copy={copy}
+                labels={{
+                  score: t("score"),
+                  copy: t("copyName"),
+                  detail: t("expandDetail"),
+                  detailLoading: t("detailLoading"),
+                  detailAwaiting: t("detailAwaiting"),
+                  detailRunning: t("detailRunning"),
+                  domains: t("domains"),
+                  checks: t("checks"),
+                  coreIdea: t("coreIdea"),
+                  basics: t("basics"),
+                  seo: t("seoDetail"),
+                  trademark: t("trademarkDetail"),
+                  risks: t("risks"),
+                  nextChecks: t("nextChecks"),
+                  open: t("openLink"),
+                }}
+                detail={detailStates[candidate.name]}
+                onCopy={() => void copyText(candidate.name)}
+                onDetail={() => void runDetail(candidate)}
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </ToolPreviewPanel>
+  );
+
+  return (
+    <ToolWorkspaceLayout
+      form={formPanel}
+      preview={previewPanel}
+      contentClassName="min-h-[calc(100svh-11rem)]"
+      defaultFormWidth={460}
+      maxFormWidth={560}
+    />
+  );
+}