@tomako/tools-runtime 0.1.0

package/src/features/tools/product-ui-generator/widget/result-shell.tsx

@@ -0,0 +1,118 @@
+"use client";
+import {
+    copyTextToClipboard,
+    downloadTextFile,
+} from "../../../../components/tools/workspace/tool-result-file-actions";
+import { Button } from "@tomako/ui/button";
+import {
+    stringifyProductUiOnePage,
+    type ProductUiResult
+} from "../../../../lib/tools/product-ui-generator-schema";
+import {
+    Copy,
+    Download
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { ScreenCard } from "./preview-panels";
+
+export function ResultView({
+  result,
+  labels,
+}: {
+  result: ProductUiResult;
+  labels: Record<string, string>;
+}) {
+  const onePage = useMemo(() => stringifyProductUiOnePage(result), [result]);
+  const [copied, setCopied] = useState(false);
+
+  function downloadOnePage() {
+    downloadTextFile({
+      filename: `${result.productName.toLowerCase().replace(/[^a-z0-9]+/gi, "-")}-ui-onepage.md`,
+      text: onePage,
+    });
+  }
+
+  async function copyOnePage() {
+    const copiedToClipboard = await copyTextToClipboard(onePage);
+    if (!copiedToClipboard) return;
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1800);
+  }
+
+  return (
+    <section className="scroll-mt-24 space-y-7" id="product-ui-result">
+      <div className="rounded-[1.75rem] bg-[#181614] p-6 text-white md:p-8">
+        <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-start">
+          <div className="max-w-3xl">
+            <p className="text-sm font-semibold uppercase text-[#F0B99D]">{labels.resultEyebrow}</p>
+            <h2 className="mt-3 text-4xl font-semibold leading-tight md:text-5xl">
+              {result.productName}
+            </h2>
+            <p className="mt-4 text-base leading-7 text-white/76">{result.summary}</p>
+          </div>
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Button type="button" variant="secondary" onClick={copyOnePage}>
+              <Copy className="mr-2 size-4" />
+              {copied ? labels.copied : labels.copy}
+            </Button>
+            <Button type="button" variant="secondary" onClick={downloadOnePage}>
+              <Download className="mr-2 size-4" />
+              {labels.download}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-5 lg:grid-cols-[0.9fr_1.1fr]">
+        <article className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-6">
+          <h3 className="text-2xl font-semibold text-[#111111]">{labels.thesis}</h3>
+          <p className="mt-3 text-sm leading-7 text-[#555555]">{result.designThesis}</p>
+        </article>
+        <article className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-6">
+          <h3 className="text-2xl font-semibold text-[#111111]">{labels.visualSystem}</h3>
+          <p className="mt-3 text-sm leading-6 text-[#555555]">{result.visualSystem.mood}</p>
+          <div className="mt-4 flex flex-wrap gap-2">
+            {result.visualSystem.palette.map((item) => (
+              <span key={item} className="rounded-full border border-[#D8D4CA] px-3 py-1 text-xs text-[#555555]">
+                {item}
+              </span>
+            ))}
+          </div>
+        </article>
+      </div>
+
+      <div className="space-y-4">
+        {result.screens.map((screen, index) => (
+          <ScreenCard key={screen.id} screen={screen} index={index} />
+        ))}
+      </div>
+
+      <div className="grid gap-5 lg:grid-cols-3">
+        <article className="rounded-[1.35rem] border border-[#D8D4CA] bg-white p-5">
+          <h3 className="text-lg font-semibold text-[#111111]">{labels.features}</h3>
+          <ul className="mt-3 space-y-2 text-sm leading-6 text-[#555555]">
+            {result.exportOnePage.featureDetails.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </article>
+        <article className="rounded-[1.35rem] border border-[#D8D4CA] bg-white p-5">
+          <h3 className="text-lg font-semibold text-[#111111]">{labels.requirements}</h3>
+          <ul className="mt-3 space-y-2 text-sm leading-6 text-[#555555]">
+            {result.exportOnePage.businessRequirements.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </article>
+        <article className="rounded-[1.35rem] border border-[#D8D4CA] bg-white p-5">
+          <h3 className="text-lg font-semibold text-[#111111]">{labels.flow}</h3>
+          <ul className="mt-3 space-y-2 text-sm leading-6 text-[#555555]">
+            {result.interactionFlow.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </article>
+      </div>
+    </section>
+  );
+}

package/src/features/tools/product-ui-generator/widget/types.ts

@@ -0,0 +1,9 @@
+import type { ProductUiInput, ProductUiResult } from "../../../../lib/tools/product-ui-generator-schema";
+
+export type GeneratorState =
+  | { phase: "idle" }
+  | { phase: "loading"; status: string; taskId?: string }
+  | { phase: "done"; data: ProductUiResult }
+  | { phase: "error"; message: string };
+
+export type FieldErrors = Partial<Record<keyof ProductUiInput, string>>;

package/src/features/tools/reddit-pain-point-finder/reddit-pain-point-finder.container.tsx

@@ -0,0 +1,113 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { RedditPainPointFinder } from "./widget";
+
+import {
+    ToolDividedFaqList,
+    ToolDividedRows,
+    ToolPlainTextGrid,
+    ToolSectionEyebrow,
+    type ToolFaqItem,
+} from "../shared/tool-content-sections";
+import { ToolCta } from "../shared/tool-cta";
+import { ToolImageVisual, ToolWorkspaceSection } from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+
+export async function RedditPainPointFinderContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.redditPainPointFinder.guide");
+  const sharedT = await createToolGuideTranslator(locale, "toolsPages.shared");
+
+  const values = t.raw("valueItems") as readonly string[];
+  const standards = t.raw("standardItems") as readonly string[];
+  const guidance = t.raw("resultGuidanceItems") as readonly string[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
+
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="immersive"
+      heroBackgroundImage="/tools/reddit-pain-point-finder-hero.webp"
+      heroBackgroundAlt={t("visualAlt.hero")}
+    >
+      <ToolWorkspaceSection
+        heading={sharedT("toolWorkspace")}
+        hint={sharedT("toolWorkspaceHint")}
+        badge={sharedT("keywords")}
+      >
+        <div className="grid gap-8 xl:grid-cols-[1fr_0.42fr] xl:items-start">
+          <RedditPainPointFinder />
+          <ToolImageVisual
+            src="/tools/reddit-pain-point-finder-workspace.webp"
+            alt={t("visualAlt.workspace")}
+          />
+        </div>
+      </ToolWorkspaceSection>
+
+      <section className="border-t border-[#E8E4DB] py-12 md:py-16">
+        <ToolSectionEyebrow>{t("valueKicker")}</ToolSectionEyebrow>
+        <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+          {t("valueTitle")}
+        </h2>
+        <div className="mt-7">
+          <ToolPlainTextGrid items={values} columns="four" />
+        </div>
+      </section>
+
+      <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[0.95fr_1.05fr] md:items-center md:py-16">
+        <div>
+          <ToolSectionEyebrow>{t("standardKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("standardTitle")}
+          </h2>
+          <div className="mt-5">
+            <ToolDividedRows items={standards} />
+          </div>
+        </div>
+        <ToolImageVisual
+          src="/tools/reddit-pain-point-finder-clusters.webp"
+          alt={t("visualAlt.clusters")}
+        />
+      </section>
+
+      <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[1.05fr_0.95fr] md:items-center md:py-16">
+        <ToolImageVisual
+          src="/tools/reddit-pain-point-finder-payment.webp"
+          alt={t("visualAlt.payment")}
+        />
+        <div>
+          <ToolSectionEyebrow>{t("resultKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("resultTitle")}
+          </h2>
+          <div className="mt-5">
+            <ToolDividedRows items={guidance} />
+          </div>
+        </div>
+      </section>
+
+      <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[1fr_0.75fr] md:items-start md:py-16">
+        <div>
+          <ToolSectionEyebrow>{t("faqKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("faqTitle")}
+          </h2>
+          <div className="mt-5">
+            <ToolDividedFaqList items={faqItems} />
+          </div>
+        </div>
+        <ToolImageVisual
+          src="/tools/reddit-pain-point-finder-angle.webp"
+          alt={t("visualAlt.angle")}
+        />
+      </section>
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools/startup-idea-research", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools/user-interview-guide-generator", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/reddit-pain-point-finder/reddit-pain-point-finder.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const redditPainPointFinderSpec: ToolSpec = {
+  slug: "reddit-pain-point-finder",
+  toolType: "analyzer",
+  riskLevel: "medium",
+  seo: {
+    "publishedAt": "2026-07-01",
+    "updatedAt": "2026-07-01",
+    "readingTime": "8 min",
+    "featured": false,
+    "ogImage": "/tools/reddit-pain-point-finder-hero.webp"
+  },
+  widget: {"id":"reddit-pain-point-finder","mode":"custom"},
+};

package/src/features/tools/reddit-pain-point-finder/widget/constants.ts

@@ -0,0 +1,5 @@
+
+export const PROGRESS_INTERVAL_MS = 16_000;
+export const GRACE_WINDOW_MS = 480_000;
+export const RESULT_RETRY_INTERVAL_MS = 1200;
+export const RESULT_RETRY_WINDOW_MS = 15_000;

package/src/features/tools/reddit-pain-point-finder/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const RedditPainPointFinder = dynamic(() =>
+  import("./reddit-pain-point-finder").then((module) => module.RedditPainPointFinder),
+);

package/src/features/tools/reddit-pain-point-finder/widget/preview-panels.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { Button } from "@tomako/ui/button";
+import { RefreshCw } from "lucide-react";
+import type { ProgressItem } from "./types";
+
+export function EmptyPanel({ title, hint }: { title: string; hint: string }) {
+  return (
+    <div className="flex min-h-[30rem] flex-col justify-center rounded-[1.5rem] border border-dashed border-[#D7D1C7] bg-[#FBFAF7] p-8">
+      <p className="text-xl font-semibold text-[#111111]">{title}</p>
+      <p className="mt-3 max-w-xl text-sm leading-6 text-[#666666]">{hint}</p>
+    </div>
+  );
+}
+
+export function RunningPanel({
+  title,
+  hint,
+  statusLabel,
+  progressItems,
+  progressTitle,
+}: {
+  title: string;
+  hint: string;
+  statusLabel: string;
+  progressItems: ProgressItem[];
+  progressTitle: string;
+}) {
+  return (
+    <div className="rounded-[1.5rem] border border-[#E2E6EC] bg-white p-6 shadow-[0_14px_38px_rgba(17,17,17,0.05)]">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <p className="text-xl font-semibold text-[#111111]">{title}</p>
+          <p className="mt-2 text-sm leading-6 text-[#666666]">{hint}</p>
+        </div>
+        <span className="rounded-full bg-[#F3F7EA] px-3 py-1 text-xs font-semibold text-[#3D5F28]">
+          {statusLabel}
+        </span>
+      </div>
+      <div className="mt-6">
+        <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">
+          {progressTitle}
+        </p>
+        <div className="mt-3 space-y-3">
+          {progressItems.map((item) => (
+            <div key={item.id} className="rounded-2xl bg-[#F7F6F2] px-4 py-3 text-sm leading-6 text-[#333333]">
+              {item.text}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ErrorPanel({
+  message,
+  retryLabel,
+  onRetry,
+}: {
+  message: string;
+  retryLabel: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div className="rounded-[1.5rem] border border-[#F2C7C7] bg-[#FFF7F7] p-6">
+      <p className="text-base font-semibold text-[#8A1F1F]">{message}</p>
+      <Button className="mt-4" variant="secondary" onClick={onRetry}>
+        <RefreshCw className="size-4" aria-hidden />
+        {retryLabel}
+      </Button>
+    </div>
+  );
+}

package/src/features/tools/reddit-pain-point-finder/widget/reddit-pain-point-finder.tsx

@@ -0,0 +1,281 @@
+"use client";
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import { NativeSelect, NativeSelectOption } from "@tomako/ui/native-select";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+    redditPainPointFinderInputSchema,
+    type RedditPainPointFinderResult,
+} from "../../../../lib/tools/reddit-pain-point-finder-schema";
+import {
+    fetchRedditPainPointFinderResult,
+    fetchRedditPainPointFinderTask,
+    submitRedditPainPointFinder,
+} from "../../../../host/client";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { GRACE_WINDOW_MS, PROGRESS_INTERVAL_MS, RESULT_RETRY_INTERVAL_MS, RESULT_RETRY_WINDOW_MS } from "./constants";
+import { EmptyPanel, ErrorPanel, RunningPanel } from "./preview-panels";
+import { PainPointReport } from "./result-shell";
+import type { ErrorCategory, ProgressItem, SourceMix, WidgetState } from "./types";
+
+export function RedditPainPointFinder() {
+  const t = useTranslations("toolsPages.redditPainPointFinder.widget");
+  const locale = useLocale() as AppLocale;
+
+  const [direction, setDirection] = useState("");
+  const [audience, setAudience] = useState("");
+  const [sourceMix, setSourceMix] = useState<SourceMix>("all");
+  const [fieldError, setFieldError] = useState<string | null>(null);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+  const [progressItems, setProgressItems] = useState<ProgressItem[]>([]);
+
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const cancelledRef = useRef(false);
+  const progressTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const progressStepIndexRef = useRef(0);
+  const settledRef = useRef(false);
+  const taskWatch = useLegacyLlmTaskWatch<RedditPainPointFinderResult>();
+  const progressMessages = useMemo(() => t.raw("progressSteps") as string[], [t]);
+
+  function cleanup() {
+    taskWatch.stop();
+    if (progressTimerRef.current) clearInterval(progressTimerRef.current);
+    progressTimerRef.current = null;
+  }
+
+  function pushProgressStep(text: string) {
+    setProgressItems((items) => [
+      ...items.slice(-5),
+      { id: `${Date.now()}-${items.length}`, text },
+    ]);
+  }
+
+  function startProgressTicker() {
+    setProgressItems([]);
+    progressStepIndexRef.current = 0;
+    if (progressMessages[0]) pushProgressStep(progressMessages[0]);
+    progressTimerRef.current = setInterval(() => {
+      progressStepIndexRef.current = Math.min(
+        progressStepIndexRef.current + 1,
+        progressMessages.length - 1,
+      );
+      const nextStep = progressMessages[progressStepIndexRef.current];
+      if (nextStep) pushProgressStep(nextStep);
+      if (progressStepIndexRef.current >= progressMessages.length - 1) {
+        if (progressTimerRef.current) clearInterval(progressTimerRef.current);
+        progressTimerRef.current = null;
+      }
+    }, PROGRESS_INTERVAL_MS);
+  }
+
+  useEffect(() => {
+    return () => {
+      cancelledRef.current = true;
+      taskWatch.stop();
+    };
+  }, [taskWatch]);
+
+  function finishDone(data: RedditPainPointFinderResult, taskId: string) {
+    if (cancelledRef.current || settledRef.current) return;
+    settledRef.current = true;
+    cleanup();
+    setState({ phase: "done", data, taskId });
+  }
+
+  function finishError(category: ErrorCategory) {
+    if (cancelledRef.current || settledRef.current) return;
+    settledRef.current = true;
+    cleanup();
+    setState({ phase: "error", category });
+  }
+
+  async function pollOnce(taskId: string) {
+    const result = await fetchRedditPainPointFinderTask(taskId);
+    if (cancelledRef.current || settledRef.current) {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+
+    if (result.data) {
+      return { settled: true as const, kind: "success" as const, data: result.data };
+    }
+    if (result.status === "FAILED") {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+    if (result.status === "RESULT_INVALID") {
+      return { settled: true as const, kind: "error" as const, category: "schema" as const };
+    }
+    setState({ phase: "running", status: result.status });
+    return { settled: false as const };
+  }
+
+  async function readResultAfterSignal(
+    taskId: string,
+    deadline = Date.now() + RESULT_RETRY_WINDOW_MS,
+  ) {
+    const result = await fetchRedditPainPointFinderResult(taskId);
+    if (cancelledRef.current || settledRef.current) return;
+    if (result.data) {
+      finishDone(result.data, taskId);
+      return;
+    }
+    if (result.status === "RESULT_INVALID") {
+      finishError("schema");
+      return;
+    }
+    if (Date.now() > deadline) {
+      finishError("timeout");
+      return;
+    }
+    window.setTimeout(() => {
+      void readResultAfterSignal(taskId, deadline);
+    }, RESULT_RETRY_INTERVAL_MS);
+  }
+
+  async function startResearch() {
+    const parsed = redditPainPointFinderInputSchema.safeParse({
+      direction,
+      audience: audience || undefined,
+      sourceMix,
+    });
+    if (!parsed.success) {
+      setFieldError(t("errors.invalid"));
+      setState({ phase: "error", category: "invalid" });
+      return;
+    }
+
+    setFieldError(null);
+    cancelledRef.current = false;
+    settledRef.current = false;
+    cleanup();
+    setState({ phase: "submitting" });
+    startProgressTicker();
+    resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+
+    let taskId: string;
+    try {
+      const submitted = await submitRedditPainPointFinder(parsed.data, locale);
+      taskId = submitted.taskId;
+    } catch {
+      finishError("submit");
+      return;
+    }
+
+    if (cancelledRef.current) return;
+    setState({ phase: "running", status: "PENDING" });
+
+    taskWatch.start(
+      taskId,
+      pollOnce,
+      {
+        onStatus: (status) => {
+          if (!cancelledRef.current && !settledRef.current) {
+            setState({ phase: "running", status });
+          }
+        },
+        onSuccess: () => {
+          pushProgressStep(t("progressResultReady"));
+          void readResultAfterSignal(taskId);
+        },
+        onError: (category) => finishError(category === "timeout" ? "timeout" : category),
+      },
+      { graceWindowMs: GRACE_WINDOW_MS },
+    );
+  }
+
+  function reset() {
+    cancelledRef.current = false;
+    settledRef.current = false;
+    cleanup();
+    setProgressItems([]);
+    setState({ phase: "idle" });
+  }
+
+  const busy = state.phase === "submitting" || state.phase === "running";
+  const statusLabel =
+    state.phase === "running"
+      ? t.has(`status.${state.status}`)
+        ? t(`status.${state.status}`)
+        : t("status.default")
+      : "";
+
+  return (
+    <div className="grid gap-8">
+      <section className="rounded-[1.5rem] border border-[#E2E6EC] bg-white p-5 shadow-[0_14px_38px_rgba(17,17,17,0.05)] md:p-6">
+        <Field label={t("directionLabel")}>
+          <Textarea
+            rows={5}
+            placeholder={t("directionPlaceholder")}
+            value={direction}
+            onChange={(event) => setDirection(event.target.value)}
+            disabled={busy}
+            aria-invalid={fieldError ? true : undefined}
+          />
+        </Field>
+        {fieldError ? (
+          <p className="mt-1.5 text-xs font-medium text-[#B91C1C]">{fieldError}</p>
+        ) : null}
+        <div className="mt-4 grid gap-4 sm:grid-cols-2">
+          <Field label={t("sourceMixLabel")}>
+            <NativeSelect
+              className="w-full bg-white"
+              value={sourceMix}
+              onChange={(event) => setSourceMix(event.target.value as SourceMix)}
+              disabled={busy}
+            >
+              <NativeSelectOption value="all">{t("sourceMix.all")}</NativeSelectOption>
+              <NativeSelectOption value="reddit">{t("sourceMix.reddit")}</NativeSelectOption>
+              <NativeSelectOption value="x">{t("sourceMix.x")}</NativeSelectOption>
+              <NativeSelectOption value="hacker_news">{t("sourceMix.hackerNews")}</NativeSelectOption>
+              <NativeSelectOption value="reddit_hn">{t("sourceMix.redditHn")}</NativeSelectOption>
+            </NativeSelect>
+          </Field>
+          <Field label={t("audienceLabel")}>
+            <Input
+              placeholder={t("audiencePlaceholder")}
+              value={audience}
+              onChange={(event) => setAudience(event.target.value)}
+              disabled={busy}
+            />
+          </Field>
+        </div>
+        <Button className="mt-5 w-full" onClick={() => void startResearch()} disabled={busy}>
+          {busy ? (
+            <>
+              <Loader2 className="size-4 animate-spin" aria-hidden />
+              {state.phase === "submitting" ? t("submitting") : t("running")}
+            </>
+          ) : (
+            t("submit")
+          )}
+        </Button>
+        <p className="mt-3 text-xs leading-5 text-[#777777]">{t("inputHint")}</p>
+      </section>
+
+      <section ref={resultRef} className="min-h-[30rem]">
+        {state.phase === "idle" ? <EmptyPanel title={t("emptyTitle")} hint={t("emptyHint")} /> : null}
+        {busy ? (
+          <RunningPanel
+            title={t("runningTitle")}
+            hint={t("runningHint")}
+            statusLabel={statusLabel}
+            progressItems={progressItems}
+            progressTitle={t("progressTitle")}
+          />
+        ) : null}
+        {state.phase === "error" ? (
+          <ErrorPanel
+            message={t(`errors.${state.category}`)}
+            retryLabel={t("retry")}
+            onRetry={() => void startResearch()}
+          />
+        ) : null}
+        {state.phase === "done" ? (
+          <PainPointReport data={state.data} taskId={state.taskId} t={t} onReset={reset} />
+        ) : null}
+      </section>
+    </div>
+  );
+}