@tomako/tools-runtime 0.1.0

package/src/features/tools/community-feedback-inbox/widget/types.ts

@@ -0,0 +1,6 @@
+import type { CommunityFeedbackInboxReport } from "../../../../lib/tools/community-feedback-inbox-schema";
+
+export type InboxState =
+  | { phase: "idle" }
+  | { phase: "error"; code: "validation" | "weakInput" }
+  | { phase: "done"; report: CommunityFeedbackInboxReport };

package/src/features/tools/community-pain-point-extractor/community-pain-point-extractor.container.tsx

@@ -0,0 +1,124 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { CommunityPainPointExtractor } 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 CommunityPainPointExtractorContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.communityPainPointExtractor.guide");
+
+  const values = t.raw("valueItems") as readonly string[];
+  const standards = t.raw("standardItems") as readonly string[];
+  const boundary = t.raw("boundaryItems") 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}
+      heroBackgroundAlt={t("visualAlt.hero")}
+      heroBackgroundImage="/tools/community-pain-point-extractor-hero.webp"
+      heroVariant="immersive"
+    >
+      <ToolWorkspaceSection
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+      >
+        <CommunityPainPointExtractor
+          sideVisual={
+            <ToolImageVisual
+              src="/tools/community-pain-point-extractor-workspace.webp"
+              alt={t("visualAlt.workspace")}
+            />
+          }
+        />
+      </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/community-pain-point-extractor-value.webp"
+          alt={t("visualAlt.value")}
+        />
+      </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/community-pain-point-extractor-boundary.webp"
+          alt={t("visualAlt.boundary")}
+        />
+        <div>
+          <ToolSectionEyebrow>{t("boundaryKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("boundaryTitle")}
+          </h2>
+          <div className="mt-5">
+            <ToolDividedRows items={boundary} />
+          </div>
+        </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("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>
+        <ToolImageVisual
+          src="/tools/community-pain-point-extractor-use-case.webp"
+          alt={t("visualAlt.useCase")}
+        />
+      </section>
+
+      <section className="border-t border-[#E8E4DB] py-12 md:py-16">
+        <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 max-w-5xl">
+          <ToolDividedFaqList items={faqItems} />
+        </div>
+      </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/community-pain-point-extractor/community-pain-point-extractor.spec.ts

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

package/src/features/tools/community-pain-point-extractor/widget/community-pain-point-extractor.tsx

@@ -0,0 +1,404 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import type { ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+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 {
+    communityPainPointExtractorInputSchema,
+    type CommunityPainPointExtractorResult,
+} from "../../../../lib/tools/community-pain-point-extractor-schema";
+import {
+    fetchCommunityPainPointExtractorResult,
+    fetchCommunityPainPointExtractorTask,
+    submitCommunityPainPointExtractor,
+    type LlmTaskWatchPollOutcome,
+} from "../../../../host/client";
+
+import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+    GRACE_WINDOW_MS,
+    POLL_INTERVAL_MS,
+    PROGRESS_INTERVAL_MS,
+} from "./constants";
+import { EmptyPanel, ErrorPanel, RunningPanel } from "./progress-panels";
+import { Report } from "./result-shell";
+import type { ErrorCategory, PrimaryPlatform, ProgressItem, WidgetState } from "./types";
+
+export function CommunityPainPointExtractor({ sideVisual }: { sideVisual?: ReactNode } = {}) {
+  const t = useTranslations("toolsPages.communityPainPointExtractor.widget");
+  const locale = useLocale() as AppLocale;
+
+  const [direction, setDirection] = useState("");
+  const [targetUsers, setTargetUsers] = useState("");
+  const [market, setMarket] = useState("");
+  const [primaryPlatform, setPrimaryPlatform] = useState<PrimaryPlatform>("all");
+  const [focus, setFocus] = useState("");
+  const [fieldError, setFieldError] = useState<string | null>(null);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+  const [progressItems, setProgressItems] = useState<ProgressItem[]>([]);
+  const [timeNow, setTimeNow] = useState(() => Date.now());
+  const [runStartedAt, setRunStartedAt] = useState<number | null>(null);
+
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const runStartedAtRef = useRef<number | null>(null);
+  const cancelledRef = useRef(false);
+  const progressTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const progressStepIndexRef = useRef(0);
+  const settledRef = useRef(false);
+  const partialSeenRef = useRef(false);
+  const activeTaskIdRef = useRef<string | null>(null);
+  const taskWatch = useLegacyLlmTaskWatch<CommunityPainPointExtractorResult>();
+  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();
+      if (progressTimerRef.current) clearInterval(progressTimerRef.current);
+      progressTimerRef.current = null;
+    };
+  }, [taskWatch]);
+
+  useEffect(() => {
+    if (state.phase !== "submitting" && state.phase !== "running") return;
+    const timer = window.setInterval(() => setTimeNow(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, [state.phase]);
+
+  function finishDone(data: CommunityPainPointExtractorResult, 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): Promise<LlmTaskWatchPollOutcome> {
+    const [task, result] = await Promise.all([
+      fetchCommunityPainPointExtractorTask(taskId),
+      fetchCommunityPainPointExtractorResult(taskId),
+    ]);
+    if (cancelledRef.current || settledRef.current) {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+    if (result.data?.reportStatus === "final") {
+      return { settled: true as const, kind: "success" as const, data: result.data };
+    }
+    const partialData = result.data;
+    if (partialData?.reportStatus === "partial") {
+      partialSeenRef.current = true;
+      setState((current) =>
+        current.phase === "running"
+          ? {
+              ...current,
+              taskId,
+              status: task.status,
+              partialData,
+            }
+          : {
+              phase: "running",
+              taskId,
+              status: task.status,
+              partialData,
+            },
+      );
+      return { settled: false as const, pendingWriteback: true as const };
+    }
+    if (result.status === "RESULT_INVALID") {
+      return { settled: true as const, kind: "error" as const, category: "schema" as const };
+    }
+    if (task.status === "FAILED") {
+      return { settled: true as const, kind: "error" as const, category: "task" as const };
+    }
+    setState((current) =>
+      current.phase === "running"
+        ? { ...current, status: task.status, taskId }
+        : { phase: "running", status: task.status, taskId },
+    );
+    return { settled: false as const };
+  }
+
+  async function startResearch() {
+    const parsed = communityPainPointExtractorInputSchema.safeParse({
+      direction,
+      targetUsers: targetUsers || undefined,
+      market: market || undefined,
+      primaryPlatform,
+      focus: focus || undefined,
+    });
+    if (!parsed.success) {
+      setFieldError(t("errors.invalid"));
+      setState({ phase: "error", category: "invalid" });
+      return;
+    }
+
+    setFieldError(null);
+    cancelledRef.current = false;
+    settledRef.current = false;
+    partialSeenRef.current = false;
+    const startedAt = Date.now();
+    runStartedAtRef.current = startedAt;
+    setRunStartedAt(startedAt);
+    setTimeNow(startedAt);
+    cleanup();
+    setState({ phase: "submitting" });
+    startProgressTicker();
+    resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+
+    let taskId: string;
+    try {
+      const submitted = await submitCommunityPainPointExtractor(parsed.data, locale);
+      taskId = submitted.taskId;
+    } catch {
+      finishError("submit");
+      return;
+    }
+
+    if (cancelledRef.current) return;
+    activeTaskIdRef.current = taskId;
+    setState({ phase: "running", status: "PENDING", taskId });
+    taskWatch.start(
+      taskId,
+      pollOnce,
+      {
+        onStatus: (status) => {
+          if (!cancelledRef.current && !settledRef.current) {
+            setState((current) =>
+              current.phase === "running"
+                ? { ...current, status, taskId }
+                : { phase: "running", status, taskId },
+            );
+          }
+        },
+        onSuccess: (data) => {
+          pushProgressStep(t("progressResultReady"));
+          finishDone(data, taskId);
+        },
+        onError: (category) => {
+          if (category === "timeout" && partialSeenRef.current && activeTaskIdRef.current === taskId) {
+            taskWatch.start(
+              taskId,
+              pollOnce,
+              {
+                onStatus: (status) => {
+                  if (!cancelledRef.current && !settledRef.current) {
+                    setState((current) =>
+                      current.phase === "running"
+                        ? { ...current, status, taskId }
+                        : { phase: "running", status, taskId },
+                    );
+                  }
+                },
+                onSuccess: (data) => {
+                  pushProgressStep(t("progressResultReady"));
+                  finishDone(data, taskId);
+                },
+                onError: (nextCategory) =>
+                  finishError(nextCategory === "timeout" ? "timeout" : nextCategory),
+              },
+              { pollIntervalMs: POLL_INTERVAL_MS, graceWindowMs: GRACE_WINDOW_MS },
+            );
+            return;
+          }
+          finishError(category === "timeout" ? "timeout" : category);
+        },
+      },
+      { pollIntervalMs: POLL_INTERVAL_MS, graceWindowMs: GRACE_WINDOW_MS },
+    );
+  }
+
+  function reset() {
+    cancelledRef.current = false;
+    settledRef.current = false;
+    partialSeenRef.current = false;
+    activeTaskIdRef.current = null;
+    runStartedAtRef.current = null;
+    setRunStartedAt(null);
+    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")
+      : "";
+  const elapsedMs = runStartedAt ? Math.max(0, timeNow - runStartedAt) : 0;
+
+  return (
+    <div className="grid gap-8">
+      <div className="grid gap-8 xl:grid-cols-[minmax(20rem,0.42fr)_minmax(24rem,0.58fr)] xl:items-start">
+        <section className="rounded-[1.25rem] border border-[#E2E6EC] bg-white p-5 shadow-[0_14px_38px_rgba(17,17,17,0.05)] md:p-6 xl:max-w-[30rem]">
+          <Field label={t("directionLabel")}>
+            <Textarea
+              rows={7}
+              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("targetUsersLabel")}>
+              <Input
+                placeholder={t("targetUsersPlaceholder")}
+                value={targetUsers}
+                onChange={(event) => setTargetUsers(event.target.value)}
+                disabled={busy}
+              />
+            </Field>
+            <Field label={t("marketLabel")}>
+              <Input
+                placeholder={t("marketPlaceholder")}
+                value={market}
+                onChange={(event) => setMarket(event.target.value)}
+                disabled={busy}
+              />
+            </Field>
+          </div>
+          <div className="mt-4 grid gap-4 sm:grid-cols-2">
+            <Field label={t("platformLabel")}>
+              <NativeSelect
+                className="w-full bg-white"
+                value={primaryPlatform}
+                onChange={(event) => setPrimaryPlatform(event.target.value as PrimaryPlatform)}
+                disabled={busy}
+              >
+                <NativeSelectOption value="all">{t("platform.all")}</NativeSelectOption>
+                <NativeSelectOption value="reddit">{t("platform.reddit")}</NativeSelectOption>
+                <NativeSelectOption value="x">{t("platform.x")}</NativeSelectOption>
+                <NativeSelectOption value="hackernews">
+                  {t("platform.hackernews")}
+                </NativeSelectOption>
+              </NativeSelect>
+            </Field>
+            <Field label={t("focusLabel")}>
+              <Input
+                placeholder={t("focusPlaceholder")}
+                value={focus}
+                onChange={(event) => setFocus(event.target.value)}
+                disabled={busy}
+              />
+            </Field>
+          </div>
+          <Button
+            className="mt-5 w-full bg-[#111111] text-white shadow-none hover:bg-[#2A2A2A]"
+            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>
+
+        {sideVisual ? <div className="hidden xl:block">{sideVisual}</div> : null}
+      </div>
+
+      <section ref={resultRef} className="min-h-[22rem]">
+        {state.phase === "idle" ? (
+          <EmptyPanel title={t("emptyTitle")} hint={t("emptyHint")} />
+        ) : null}
+        {state.phase === "submitting" ? (
+          <RunningPanel
+            title={t("runningTitle")}
+            hint={t("runningHint")}
+            statusLabel={statusLabel}
+            progressItems={progressItems}
+            progressTitle={t("progressTitle")}
+            elapsedMs={elapsedMs}
+            t={t}
+          />
+        ) : null}
+        {state.phase === "running" && !state.partialData ? (
+          <RunningPanel
+            title={t("runningTitle")}
+            hint={t("runningHint")}
+            statusLabel={statusLabel}
+            progressItems={progressItems}
+            progressTitle={t("progressTitle")}
+            elapsedMs={elapsedMs}
+            t={t}
+          />
+        ) : null}
+        {state.phase === "running" && state.partialData ? (
+          <Report
+            data={state.partialData}
+            taskId={state.taskId ?? ""}
+            t={t}
+            onReset={reset}
+            isPartial
+            elapsedMs={elapsedMs}
+            statusLabel={statusLabel}
+          />
+        ) : null}
+        {state.phase === "error" ? (
+          <ErrorPanel
+            message={t(`errors.${state.category}`)}
+            retryLabel={t("retry")}
+            onRetry={() => void startResearch()}
+          />
+        ) : null}
+        {state.phase === "done" ? (
+          <Report data={state.data} taskId={state.taskId} t={t} onReset={reset} />
+        ) : null}
+      </section>
+    </div>
+  );
+}

package/src/features/tools/community-pain-point-extractor/widget/constants.ts

@@ -0,0 +1,41 @@
+import type {
+    CommunityPainPointConfidence,
+    CommunityPainPointFrequency,
+    CommunityPainPointSeverity,
+} from "../../../../lib/tools/community-pain-point-extractor-schema";
+
+import type { ReportModuleKey } from "./types";
+
+export const POLL_INTERVAL_MS = 4000;
+export const PROGRESS_INTERVAL_MS = 18_000;
+export const GRACE_WINDOW_MS = 480_000;
+export const MODULE_ESTIMATE_MS = 45_000;
+export const OVERALL_ESTIMATE_MS = 300_000;
+export const REPORT_MODULE_ORDER: ReportModuleKey[] = [
+  "summary",
+  "communities",
+  "paidIntent",
+  "entryFeatures",
+  "painClusters",
+  "landing",
+  "experiments",
+  "sources",
+];
+
+export const FREQUENCY_STYLE: Record<CommunityPainPointFrequency, string> = {
+  high: "border-[#A7E0B5] bg-[#F0FAF2] text-[#166534]",
+  medium: "border-[#F1D48B] bg-[#FFF8E1] text-[#854D0E]",
+  low: "border-[#D7DCE3] bg-[#F4F5F7] text-[#626A73]",
+};
+
+export const SEVERITY_STYLE: Record<CommunityPainPointSeverity, string> = {
+  high: "border-[#F3B4A3] bg-[#FFF2EE] text-[#9A3412]",
+  medium: "border-[#F1D48B] bg-[#FFF8E1] text-[#854D0E]",
+  low: "border-[#D7DCE3] bg-[#F4F5F7] text-[#626A73]",
+};
+
+export const CONFIDENCE_STYLE: Record<CommunityPainPointConfidence, string> = {
+  high: "border-[#A7E0B5] bg-[#F0FAF2] text-[#166534]",
+  medium: "border-[#F1D48B] bg-[#FFF8E1] text-[#854D0E]",
+  low: "border-[#D7DCE3] bg-[#F4F5F7] text-[#626A73]",
+};

package/src/features/tools/community-pain-point-extractor/widget/helpers.ts

@@ -0,0 +1,76 @@
+import type { CommunityPainPointExtractorResult } from "../../../../lib/tools/community-pain-point-extractor-schema";
+
+import { MODULE_ESTIMATE_MS, OVERALL_ESTIMATE_MS, REPORT_MODULE_ORDER } from "./constants";
+import type { ReportModuleKey, T } from "./types";
+
+export function formatElapsedSeconds(ms: number) {
+  return Math.max(0, Math.floor(ms / 1000));
+}
+
+export function overallProgress(elapsedMs: number) {
+  return Math.max(4, Math.min(96, Math.round((elapsedMs / OVERALL_ESTIMATE_MS) * 100)));
+}
+
+export function hasPaidIntentData(data: CommunityPainPointExtractorResult) {
+  return Boolean(
+    data.paidIntent.signals.length ||
+      data.paidIntent.objections.length ||
+      data.paidIntent.pricingClues.length,
+  );
+}
+
+export function hasSourceData(data: CommunityPainPointExtractorResult) {
+  return Boolean(data.sources.length || data.missingEvidence.length || data.disclaimer);
+}
+
+export function getNextReportModule(data: CommunityPainPointExtractorResult): ReportModuleKey | null {
+  if (!data.directionTitle && !data.summary) return "summary";
+  if (!data.communityMap.length) return "communities";
+  if (!hasPaidIntentData(data)) return "paidIntent";
+  if (!data.entryFeatures.length) return "entryFeatures";
+  if (data.painClusters.length < 4) return "painClusters";
+  if (!data.landingPageAngles.length) return "landing";
+  if (!data.validationExperiments.length) return "experiments";
+  if (!hasSourceData(data)) return "sources";
+  return null;
+}
+
+export function moduleProgress(moduleKey: ReportModuleKey, elapsedMs: number) {
+  const moduleIndex = REPORT_MODULE_ORDER.indexOf(moduleKey);
+  const moduleStartMs = moduleIndex * MODULE_ESTIMATE_MS;
+  const moduleEndMs = (moduleIndex + 1) * MODULE_ESTIMATE_MS;
+  const localElapsedMs = Math.max(0, elapsedMs - moduleStartMs);
+  const localProgress = Math.min(0.95, localElapsedMs / MODULE_ESTIMATE_MS);
+  const percent = Math.max(
+    6,
+    Math.min(96, Math.round(((moduleIndex + localProgress) / REPORT_MODULE_ORDER.length) * 100)),
+  );
+  const remainingSeconds = Math.max(0, Math.ceil((moduleEndMs - elapsedMs) / 1000));
+  return {
+    currentStep: moduleIndex + 1,
+    totalSteps: REPORT_MODULE_ORDER.length,
+    percent,
+    remainingSeconds,
+  };
+}
+
+export function formatReportForClipboard(data: CommunityPainPointExtractorResult, t: T) {
+  const lines = [data.directionTitle, data.summary, ""];
+  data.painClusters.forEach((cluster, index) => {
+    lines.push(`${index + 1}. ${cluster.title}`);
+    lines.push(cluster.summary);
+    lines.push(`${t("microFeature")}: ${cluster.suggestedMicroFeature}`);
+    lines.push(`${t("landingAngle")}: ${cluster.landingPageAngle}`);
+    cluster.userQuotes.slice(0, 2).forEach((quote) => {
+      lines.push(`- "${quote.quote}" (${quote.sourceLabel})`);
+    });
+    lines.push("");
+  });
+  if (data.landingPageAngles.length) {
+    lines.push(t("sections.landing"));
+    data.landingPageAngles.forEach((angle) => {
+      lines.push(`- ${angle.headline}: ${angle.promise}`);
+    });
+  }
+  return lines.join("\n");
+}

package/src/features/tools/community-pain-point-extractor/widget/index.ts

@@ -0,0 +1,8 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import type { ComponentType, ReactNode } from "react";
+
+export const CommunityPainPointExtractor = dynamic(() =>
+  import("./community-pain-point-extractor").then((module) => module.CommunityPainPointExtractor),
+) as ComponentType<{ sideVisual?: ReactNode }>;