@tomako/tools-runtime 0.1.0

package/src/components/tools/market-forecast-report.tsx

@@ -0,0 +1,1150 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Copy, ExternalLink, Loader2, RefreshCw } from "lucide-react";
+
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import { NativeSelect, NativeSelectOption } from "@tomako/ui/native-select";
+import { useLegacyLlmTaskWatch } from "../../components/tools/engine/use-legacy-llm-task";
+import { useLocale, useTranslations } from "../../i18n/client";
+import type { AppLocale } from "../../i18n/locale";
+import {
+  marketForecastReportInputSchema,
+  type MarketForecastReportResult,
+} from "../../lib/tools/market-forecast-report-schema";
+import {
+  fetchMarketForecastReportResult,
+  fetchMarketForecastReportTask,
+  submitMarketForecastReport,
+} from "../../host/client";
+
+type ErrorCategory = "submit" | "task" | "timeout" | "schema" | "invalid";
+type ForecastHorizon = "one_year" | "three_year" | "five_year";
+type WidgetState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; status: string; partial?: MarketForecastReportResult }
+  | { phase: "done"; data: MarketForecastReportResult; taskId: string }
+  | { phase: "error"; category: ErrorCategory; partial?: MarketForecastReportResult };
+
+type ProgressItem = {
+  id: string;
+  text: string;
+};
+
+const POLL_INTERVAL_MS = 4000;
+const PROGRESS_INTERVAL_MS = 15_000;
+const GRACE_WINDOW_MS = 720_000;
+
+export function MarketForecastReport() {
+  const t = useTranslations("toolsPages.marketForecastReport.widget");
+  const locale = useLocale() as AppLocale;
+
+  const [productContext, setProductContext] = useState("");
+  const [targetUsers, setTargetUsers] = useState("");
+  const [market, setMarket] = useState("");
+  const [currentUsers, setCurrentUsers] = useState("");
+  const [metrics, setMetrics] = useState("");
+  const [forecastHorizon, setForecastHorizon] = useState<ForecastHorizon>("three_year");
+  const [fieldError, setFieldError] = useState<string | null>(null);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+  const [progressItems, setProgressItems] = useState<ProgressItem[]>([]);
+  const {
+    start: startTaskWatch,
+    stop: stopTaskWatch,
+  } = useLegacyLlmTaskWatch<MarketForecastReportResult>();
+
+  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 currentPartialRef = useRef<MarketForecastReportResult | undefined>(undefined);
+  const progressMessages = useMemo(() => t.raw("progressSteps") as string[], [t]);
+
+  function cleanup() {
+    stopTaskWatch();
+    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;
+      stopTaskWatch();
+      if (progressTimerRef.current) clearInterval(progressTimerRef.current);
+    };
+  }, [stopTaskWatch]);
+
+  function updatePartial(data: MarketForecastReportResult) {
+    if (cancelledRef.current || settledRef.current) return;
+    currentPartialRef.current = data;
+    setState((current) => {
+      if (current.phase === "running") return { ...current, partial: data };
+      return { phase: "running", status: "AWAITING_RESULT", partial: data };
+    });
+  }
+
+  function finishDone(data: MarketForecastReportResult, 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, partial: currentPartialRef.current });
+  }
+
+  async function pollStatusOnce(taskId: string) {
+    const [task, result] = await Promise.all([
+      fetchMarketForecastReportTask(taskId),
+      fetchMarketForecastReportResult(taskId),
+    ]);
+    if (cancelledRef.current || settledRef.current) {
+      return { settled: false as const };
+    }
+    if (result.data) {
+      if (result.data.reportStatus === "final") {
+        return {
+          settled: true as const,
+          kind: "success" as const,
+          data: result.data,
+        };
+      }
+      updatePartial(result.data);
+    }
+    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) => ({
+      phase: "running",
+      status: task.status,
+      partial: current.phase === "running" ? current.partial : currentPartialRef.current,
+    }));
+    return { settled: false as const, pendingWriteback: true };
+  }
+
+  async function startResearch() {
+    const parsed = marketForecastReportInputSchema.safeParse({
+      productContext,
+      targetUsers,
+      market: market || undefined,
+      currentUsers: currentUsers || undefined,
+      currentRevenue: metrics || undefined,
+      pricing: metrics || undefined,
+      paidConversionRate: metrics || undefined,
+      growthHistory: metrics || undefined,
+      communityKeywords: targetUsers || undefined,
+      forecastHorizon,
+    });
+
+    if (!parsed.success) {
+      setFieldError(t("errors.invalid"));
+      setState({ phase: "error", category: "invalid" });
+      return;
+    }
+
+    setFieldError(null);
+    currentPartialRef.current = undefined;
+    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 submitMarketForecastReport(parsed.data, locale);
+      taskId = submitted.taskId;
+    } catch {
+      finishError("submit");
+      return;
+    }
+
+    if (cancelledRef.current) return;
+    setState({ phase: "running", status: "PENDING" });
+
+    startTaskWatch(
+      taskId,
+      pollStatusOnce,
+      {
+        onStatus: (status) => {
+          if (!cancelledRef.current && !settledRef.current) {
+            setState((current) => ({
+              phase: "running",
+              status,
+              partial:
+                current.phase === "running"
+                  ? current.partial
+                  : currentPartialRef.current,
+            }));
+          }
+        },
+        onSuccess: (data) => {
+          pushProgressStep(t("progressResultReady"));
+          finishDone(data, taskId);
+        },
+        onError: (category) => {
+          finishError(category);
+        },
+      },
+      {
+        pollIntervalMs: POLL_INTERVAL_MS,
+        graceWindowMs: GRACE_WINDOW_MS,
+      },
+    );
+  }
+
+  function reset() {
+    cancelledRef.current = false;
+    settledRef.current = false;
+    currentPartialRef.current = undefined;
+    cleanup();
+    setProgressItems([]);
+    setState({ phase: "idle" });
+  }
+
+  const busy = state.phase === "submitting" || state.phase === "running";
+  const partial =
+    state.phase === "running" || state.phase === "error" ? state.partial : undefined;
+  const statusLabel =
+    state.phase === "running"
+      ? t.has(`status.${state.status}`)
+        ? t(`status.${state.status}`)
+        : t("status.default")
+      : "";
+
+  return (
+    <div className="grid gap-8 xl:grid-cols-[0.42fr_0.58fr] xl:items-start">
+      <section className="rounded-[1.25rem] border border-[#D9DEE7] bg-white p-5 shadow-[0_16px_44px_rgba(32,41,58,0.07)] md:p-6">
+        <Field label={t("productLabel")} error={fieldError || undefined}>
+          <Textarea
+            rows={6}
+            placeholder={t("productPlaceholder")}
+            value={productContext}
+            onChange={(event) => setProductContext(event.target.value)}
+            disabled={busy}
+            aria-invalid={fieldError ? true : undefined}
+          />
+        </Field>
+        <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>
+          <Field label={t("currentUsersLabel")}>
+            <Input
+              placeholder={t("currentUsersPlaceholder")}
+              value={currentUsers}
+              onChange={(event) => setCurrentUsers(event.target.value)}
+              disabled={busy}
+            />
+          </Field>
+          <Field label={t("horizonLabel")}>
+            <NativeSelect
+              className="w-full bg-white"
+              value={forecastHorizon}
+              onChange={(event) => setForecastHorizon(event.target.value as ForecastHorizon)}
+              disabled={busy}
+            >
+              <NativeSelectOption value="one_year">{t("horizon.oneYear")}</NativeSelectOption>
+              <NativeSelectOption value="three_year">{t("horizon.threeYear")}</NativeSelectOption>
+              <NativeSelectOption value="five_year">{t("horizon.fiveYear")}</NativeSelectOption>
+            </NativeSelect>
+          </Field>
+        </div>
+        <div className="mt-4">
+          <Field label={t("metricsLabel")} hint={t("metricsHint")}>
+            <Textarea
+              rows={4}
+              placeholder={t("metricsPlaceholder")}
+              value={metrics}
+              onChange={(event) => setMetrics(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-[#666666]">{t("inputHint")}</p>
+      </section>
+
+      <section ref={resultRef} className="min-h-[34rem]">
+        {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}
+        {partial ? <ForecastReport data={partial} t={t} variant="partial" onReset={reset} /> : null}
+        {state.phase === "error" ? (
+          <ErrorPanel
+            message={t(`errors.${state.category}`)}
+            retryLabel={t("retry")}
+            onRetry={() => void startResearch()}
+          />
+        ) : null}
+        {state.phase === "done" ? (
+          <ForecastReport data={state.data} taskId={state.taskId} t={t} variant="final" onReset={reset} />
+        ) : null}
+      </section>
+    </div>
+  );
+}
+
+function EmptyPanel({ title, hint }: { title: string; hint: string }) {
+  return (
+    <div className="flex min-h-[34rem] flex-col justify-center rounded-[1.25rem] border border-dashed border-[#CDD4DE] bg-[#FAFAF7] 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>
+  );
+}
+
+function RunningPanel({
+  title,
+  hint,
+  statusLabel,
+  progressItems,
+  progressTitle,
+}: {
+  title: string;
+  hint: string;
+  statusLabel: string;
+  progressItems: ProgressItem[];
+  progressTitle: string;
+}) {
+  return (
+    <div className="mb-5 rounded-[1.25rem] border border-[#D9DEE7] bg-white p-6 shadow-[0_16px_44px_rgba(32,41,58,0.07)]">
+      <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-[#EEF2F6] px-3 py-1 text-xs font-semibold text-[#2F3A48]">
+          {statusLabel}
+        </span>
+      </div>
+      <div className="mt-6">
+        <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#667085]">
+          {progressTitle}
+        </p>
+        <div className="mt-3 space-y-3">
+          {progressItems.map((item) => (
+            <div key={item.id} className="rounded-md bg-[#F6F7F8] px-4 py-3 text-sm leading-6 text-[#333333]">
+              {item.text}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ErrorPanel({
+  message,
+  retryLabel,
+  onRetry,
+}: {
+  message: string;
+  retryLabel: string;
+  onRetry: () => void;
+}) {
+  return (
+    <div className="mt-5 rounded-[1.25rem] 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>
+  );
+}
+
+function ForecastReport({
+  data,
+  taskId,
+  t,
+  variant,
+  onReset,
+}: {
+  data: MarketForecastReportResult;
+  taskId?: string;
+  t: ReturnType<typeof useTranslations>;
+  variant: "partial" | "final";
+  onReset: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const marketDefinition = data.marketDefinition;
+  const evidenceBreakdown = data.evidenceStrengthBreakdown.length
+    ? data.evidenceStrengthBreakdown
+    : buildEvidenceBreakdown(data);
+
+  async function copyReport() {
+    const lines = [
+      data.reportTitle,
+      data.executiveSummary,
+      "",
+      t("sections.forecast"),
+      ...data.forecastScenarios.map(
+        (item) =>
+          `${item.scenario}: ${item.users}, ${item.paidUsers}, ${item.paidConversionRate}, ARR ${item.arr}`,
+      ),
+      "",
+      t("sections.evidence"),
+      ...data.evidenceItems.map((item) => `${item.claim} | ${item.sourceLabel}`),
+      "",
+      data.boundaryNote,
+      data.disclaimer,
+    ];
+    await navigator.clipboard.writeText(lines.filter(Boolean).join("\n"));
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1600);
+  }
+
+  return (
+    <div className="rounded-[1.25rem] border border-[#D9DEE7] bg-white p-5 shadow-[0_16px_44px_rgba(32,41,58,0.07)] md:p-6">
+      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-start">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#47647C]">
+            {variant === "partial" ? t("report.partialKicker") : t("report.kicker")}
+          </p>
+          <h3 className="mt-2 text-2xl font-semibold leading-tight text-[#111111]">
+            {data.reportTitle}
+          </h3>
+          <p className="mt-3 max-w-3xl text-sm leading-6 text-[#555555]">
+            {data.executiveSummary || t("report.partialSummary")}
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button variant="secondary" onClick={() => void copyReport()} disabled={variant === "partial" && !data.forecastScenarios.length}>
+            <Copy className="size-4" aria-hidden />
+            {copied ? t("copied") : t("copy")}
+          </Button>
+          <Button variant="secondary" onClick={onReset}>
+            <RefreshCw className="size-4" aria-hidden />
+            {t("analyzeAnother")}
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-3 md:grid-cols-4">
+        <Metric label={t("report.confidence")} value={t(`confidence.${data.confidence}`)} />
+        <Metric label={t("report.scenarios")} value={String(data.forecastScenarios.length)} />
+        <Metric label={t("report.sources")} value={String(data.sources.length || data.evidenceItems.length)} />
+        <Metric label={t("report.taskId")} value={taskId || t("report.inProgress")} />
+      </div>
+
+      {(data.researchProtocol || data.stabilityCheck) ? (
+        <ProtocolAndStability data={data} t={t} />
+      ) : null}
+
+      {evidenceBreakdown.length ? (
+        <EvidenceStrengthSummary
+          title={t("report.evidenceStrength")}
+          items={evidenceBreakdown}
+          t={t}
+        />
+      ) : null}
+
+      {marketDefinition ? (
+        <ReportSection title={t("sections.market")}>
+          <div className="grid gap-4 md:grid-cols-3">
+            <EstimateCard title="TAM" item={marketDefinition.tam} />
+            <EstimateCard title="SAM" item={marketDefinition.sam} />
+            <EstimateCard title="SOM" item={marketDefinition.som} />
+          </div>
+          <p className="mt-4 text-sm leading-6 text-[#555555]">
+            {marketDefinition.category} / {marketDefinition.targetSegment}
+            {marketDefinition.region ? ` / ${marketDefinition.region}` : ""}
+          </p>
+        </ReportSection>
+      ) : null}
+
+      {data.forecastScenarios.length ? (
+        <ReportSection title={t("sections.forecast")}>
+          <div className="grid gap-4 lg:grid-cols-3">
+            {data.forecastScenarios.map((scenario) => (
+              <article key={`${scenario.scenario}-${scenario.horizon}`} className="rounded-[1rem] border border-[#E1E5EA] p-5">
+                <div className="flex items-center justify-between gap-3">
+                  <h4 className="text-base font-semibold text-[#111111]">
+                    {t(`scenario.${scenario.scenario}`)}
+                  </h4>
+                  <span className="rounded-full bg-[#EEF2F6] px-3 py-1 text-xs font-semibold text-[#405266]">
+                    {t(`confidence.${scenario.confidence}`)}
+                  </span>
+                </div>
+                <div className="mt-4 grid gap-3">
+                  <Metric label={t("forecast.users")} value={scenario.users} />
+                  <Metric label={t("forecast.paidUsers")} value={scenario.paidUsers} />
+                  <Metric label={t("forecast.conversion")} value={scenario.paidConversionRate} />
+                  <Metric label={t("forecast.arr")} value={scenario.arr} />
+                </div>
+                {scenario.formula ? (
+                  <FormulaBlock title={t("forecast.formula")} formula={scenario.formula} />
+                ) : null}
+                <ListBlock title={t("forecast.assumptions")} items={scenario.assumptions} compact />
+              </article>
+            ))}
+          </div>
+        </ReportSection>
+      ) : null}
+
+      {data.dataVisuals.length ? (
+        <ReportSection title={t("sections.dataVisuals")}>
+          <div className="grid gap-4 md:grid-cols-2">
+            {data.dataVisuals.map((visual) => (
+              <DataVisualCard key={visual.title} visual={visual} t={t} />
+            ))}
+          </div>
+        </ReportSection>
+      ) : null}
+
+      {data.evidenceItems.length ? (
+        <ReportSection title={t("sections.evidence")}>
+          <div className="space-y-3">
+            {data.evidenceItems.slice(0, 8).map((item) => (
+              <article key={`${item.claim}-${item.sourceLabel}`} className="rounded-[1rem] border border-[#E1E5EA] p-4">
+                <div className="flex flex-col justify-between gap-2 md:flex-row md:items-start">
+                  <p className="text-sm font-semibold leading-6 text-[#111111]">{item.claim}</p>
+                  <span className="shrink-0 rounded-full bg-[#F7F4EC] px-3 py-1 text-xs font-semibold text-[#6E5636]">
+                    {item.sourceType}
+                  </span>
+                </div>
+                {item.metric ? <p className="mt-2 text-sm text-[#405266]">{item.metric}</p> : null}
+                <p className="mt-2 text-xs leading-5 text-[#666666]">
+                  {item.sourceUrl ? (
+                    <a className="font-semibold underline-offset-4 hover:underline" href={item.sourceUrl} target="_blank" rel="noreferrer">
+                      {item.sourceLabel}
+                    </a>
+                  ) : (
+                    item.sourceLabel
+                  )}
+                  {" | "}
+                  {item.relevance}
+                </p>
+              </article>
+            ))}
+          </div>
+        </ReportSection>
+      ) : null}
+
+      {(data.communitySignals.length || data.policyTrends.length) ? (
+        <ReportSection title={t("sections.signals")}>
+          <div className="grid gap-4 md:grid-cols-2">
+            <CommunitySignalsCard title={t("report.community")} items={data.communitySignals} t={t} />
+            <PolicyTrendsCard title={t("report.policy")} items={data.policyTrends} t={t} />
+          </div>
+        </ReportSection>
+      ) : null}
+
+      {data.comparableCases.length ? (
+        <ReportSection title={t("sections.comparables")}>
+          <div className="grid gap-4 md:grid-cols-2">
+            {data.comparableCases.map((item) => (
+              <ComparableCaseCard key={item.name} item={item} t={t} />
+            ))}
+          </div>
+        </ReportSection>
+      ) : null}
+
+      <ReportSection title={t("sections.diligence")}>
+        <div className="grid gap-4 md:grid-cols-2">
+          <ListBlock
+            title={t("report.sensitivity")}
+            items={data.sensitivityAnalysis.map(
+              (item) => `${item.variable}: ${item.whyItMatters}`,
+            )}
+          />
+          <ListBlock title={t("report.checklist")} items={data.investorDiligenceChecklist} />
+          <ListBlock title={t("report.missingEvidence")} items={data.missingEvidence} />
+          <SourceList title={t("report.sources")} items={data.sources} />
+        </div>
+      </ReportSection>
+
+      <p className="mt-6 rounded-md bg-[#F6F7F8] p-4 text-xs leading-5 text-[#666666]">
+        {data.boundaryNote || data.disclaimer || t("boundaryFallback")}
+      </p>
+    </div>
+  );
+}
+
+function ProtocolAndStability({
+  data,
+  t,
+}: {
+  data: MarketForecastReportResult;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const protocol = data.researchProtocol;
+  const stability = data.stabilityCheck;
+  return (
+    <section className="mt-6 grid gap-4 md:grid-cols-2">
+      {protocol ? (
+        <article className="rounded-[1rem] border border-[#E1E5EA] p-5">
+          <h4 className="text-base font-semibold text-[#111111]">{t("report.researchProtocol")}</h4>
+          <div className="mt-3 space-y-3 text-sm leading-6 text-[#555555]">
+            {protocol.primaryMarketDefinition ? (
+              <p>
+                <span className="font-semibold text-[#111111]">{t("protocol.market")}:</span>{" "}
+                {protocol.primaryMarketDefinition}
+              </p>
+            ) : null}
+            {protocol.marketBoundary ? (
+              <p>
+                <span className="font-semibold text-[#111111]">{t("protocol.boundary")}:</span>{" "}
+                {protocol.marketBoundary}
+              </p>
+            ) : null}
+            {protocol.recencyRule ? (
+              <p>
+                <span className="font-semibold text-[#111111]">{t("protocol.recency")}:</span>{" "}
+                {protocol.recencyRule}
+              </p>
+            ) : null}
+            {protocol.forecastFormula ? (
+              <p>
+                <span className="font-semibold text-[#111111]">{t("protocol.formula")}:</span>{" "}
+                {protocol.forecastFormula}
+              </p>
+            ) : null}
+            {protocol.sourceBucketsCovered.length ? (
+              <div className="flex flex-wrap gap-2">
+                {protocol.sourceBucketsCovered.map((item) => (
+                  <span key={item} className="rounded-full bg-[#F6F7F8] px-3 py-1 text-xs font-semibold text-[#405266]">
+                    {item}
+                  </span>
+                ))}
+              </div>
+            ) : null}
+            {protocol.evidenceChannelPlan ? (
+              <ChannelPlan plan={protocol.evidenceChannelPlan} t={t} />
+            ) : null}
+          </div>
+        </article>
+      ) : null}
+      {stability ? (
+        <article className="rounded-[1rem] border border-[#E1E5EA] p-5">
+          <div className="flex items-start justify-between gap-3">
+            <h4 className="text-base font-semibold text-[#111111]">{t("report.stabilityCheck")}</h4>
+            <span className="rounded-full bg-[#EEF2F6] px-3 py-1 text-xs font-semibold text-[#405266]">
+              {t(`volatility.${stability.volatilityRisk}`)}
+            </span>
+          </div>
+          {stability.conclusionBand ? (
+            <p className="mt-3 text-sm leading-6 text-[#555555]">{stability.conclusionBand}</p>
+          ) : null}
+          {stability.likelyVarianceDrivers.length ? (
+            <ListBlock title={t("report.varianceDrivers")} items={stability.likelyVarianceDrivers} compact />
+          ) : null}
+          {stability.sanityChecks.length ? (
+            <div className="mt-4 space-y-2">
+              {stability.sanityChecks.slice(0, 6).map((check) => (
+                <div key={check.name} className="rounded-md bg-[#FAFAF7] p-3 text-xs leading-5 text-[#555555]">
+                  <span className="font-semibold text-[#111111]">{check.name}</span>
+                  <span className="ml-2 rounded-full bg-white px-2 py-0.5 font-semibold text-[#405266]">
+                    {t(`checkStatus.${check.status}`)}
+                  </span>
+                  <p className="mt-1">{check.note}</p>
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </article>
+      ) : null}
+    </section>
+  );
+}
+
+function ChannelPlan({
+  plan,
+  t,
+}: {
+  plan: NonNullable<NonNullable<MarketForecastReportResult["researchProtocol"]>["evidenceChannelPlan"]>;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <div className="mt-4 rounded-md bg-[#FAFAF7] p-4">
+      <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#667085]">
+        {t("protocol.channelPlan")}
+      </p>
+      {plan.channelSelectionRationale ? (
+        <p className="mt-2 text-xs leading-5 text-[#666666]">{plan.channelSelectionRationale}</p>
+      ) : null}
+      <div className="mt-3 flex flex-wrap gap-2 text-xs">
+        {plan.marketArchetype ? <SignalBadge label={t("protocol.archetype")} value={plan.marketArchetype} /> : null}
+        {plan.geo ? <SignalBadge label={t("protocol.geo")} value={plan.geo} /> : null}
+        {plan.language ? <SignalBadge label={t("protocol.language")} value={plan.language} /> : null}
+      </div>
+      {plan.channels.length ? (
+        <div className="mt-4 space-y-2">
+          {plan.channels.slice(0, 10).map((channel) => (
+            <div key={`${channel.name}-${channel.role}`} className="rounded-md bg-white p-3 text-xs leading-5 text-[#555555]">
+              <div className="flex items-start justify-between gap-3">
+                <span className="font-semibold text-[#111111]">{channel.name}</span>
+                <span className="shrink-0 rounded-full bg-[#EEF2F6] px-2 py-0.5 font-semibold text-[#405266]">
+                  {t(`channelRole.${channel.role}`)}
+                </span>
+              </div>
+              <p className="mt-1">{channel.reason}</p>
+              <p className="mt-1 text-[#777777]">{channel.evidenceUse}</p>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function buildEvidenceBreakdown(data: MarketForecastReportResult) {
+  const counts = new Map<string, number>();
+  for (const item of data.evidenceItems) {
+    counts.set(item.sourceType, (counts.get(item.sourceType) ?? 0) + 1);
+  }
+  for (const item of data.sources) {
+    counts.set(item.type, Math.max(counts.get(item.type) ?? 0, 1));
+  }
+  return Array.from(counts.entries()).map(([sourceType, evidenceCount]) => ({
+    sourceType: sourceType as MarketForecastReportResult["evidenceItems"][number]["sourceType"],
+    evidenceCount,
+    strength: evidenceCount >= 3 ? ("strong" as const) : evidenceCount >= 2 ? ("mixed" as const) : ("weak" as const),
+    note: undefined,
+  }));
+}
+
+function ReportSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mt-8 border-t border-[#E5E8EC] pt-6">
+      <h3 className="text-xl font-semibold text-[#111111]">{title}</h3>
+      <div className="mt-4">{children}</div>
+    </section>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-md bg-[#F6F7F8] p-4">
+      <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#667085]">{label}</p>
+      <p className="mt-2 break-words text-sm font-semibold text-[#111111]">{value}</p>
+    </div>
+  );
+}
+
+function EvidenceStrengthSummary({
+  title,
+  items,
+  t,
+}: {
+  title: string;
+  items: MarketForecastReportResult["evidenceStrengthBreakdown"];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const max = Math.max(...items.map((item) => item.evidenceCount), 1);
+  return (
+    <section className="mt-6 rounded-[1rem] border border-[#E1E5EA] p-5">
+      <h4 className="text-base font-semibold text-[#111111]">{title}</h4>
+      <div className="mt-4 space-y-3">
+        {items.map((item) => (
+          <div key={item.sourceType}>
+            <div className="flex items-center justify-between gap-4 text-xs font-semibold text-[#667085]">
+              <span>{item.sourceType}</span>
+              <span>
+                {item.evidenceCount} / {t(`strength.${item.strength}`)}
+              </span>
+            </div>
+            <div className="mt-2 h-2 rounded-full bg-[#EEF2F6]">
+              <div
+                className="h-2 rounded-full bg-[#47647C]"
+                style={{ width: `${Math.max(10, (item.evidenceCount / max) * 100)}%` }}
+              />
+            </div>
+            {item.note ? <p className="mt-1 text-xs leading-5 text-[#777777]">{item.note}</p> : null}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function FormulaBlock({
+  title,
+  formula,
+}: {
+  title: string;
+  formula: NonNullable<MarketForecastReportResult["forecastScenarios"][number]["formula"]>;
+}) {
+  const rows = [
+    ["Reachable", formula.reachableUsers],
+    ["Acquire", formula.acquisitionRate],
+    ["Active", formula.activeUsers],
+    ["Paid", formula.paidConversionRate],
+    ["ARPU/ACV", formula.arpuOrAcv],
+  ].filter((row): row is [string, string] => Boolean(row[1]));
+  return (
+    <div className="mt-4 rounded-md bg-[#FAFAF7] p-4">
+      <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#667085]">{title}</p>
+      {formula.arrFormula ? (
+        <p className="mt-2 text-sm font-semibold leading-6 text-[#111111]">{formula.arrFormula}</p>
+      ) : null}
+      {rows.length ? (
+        <dl className="mt-3 grid gap-2 text-xs text-[#555555]">
+          {rows.map(([label, value]) => (
+            <div key={label} className="flex justify-between gap-3">
+              <dt className="text-[#667085]">{label}</dt>
+              <dd className="text-right font-semibold text-[#333333]">{value}</dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+      {formula.rationale ? <p className="mt-3 text-xs leading-5 text-[#666666]">{formula.rationale}</p> : null}
+    </div>
+  );
+}
+
+function DataVisualCard({
+  visual,
+  t,
+}: {
+  visual: MarketForecastReportResult["dataVisuals"][number];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const max = Math.max(...visual.dataPoints.map((point) => parseLooseNumber(point.value)), 1);
+  return (
+    <article className="rounded-[1rem] border border-[#E1E5EA] p-5">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h4 className="text-base font-semibold text-[#111111]">{visual.title}</h4>
+          <p className="mt-2 text-sm leading-6 text-[#555555]">{visual.summary}</p>
+        </div>
+        <span className="shrink-0 rounded-full bg-[#EEF2F6] px-3 py-1 text-xs font-semibold text-[#405266]">
+          {t(`confidence.${visual.confidence}`)}
+        </span>
+      </div>
+      <div className="mt-5 space-y-4">
+        {visual.dataPoints.map((point) => {
+          const numeric = parseLooseNumber(point.value);
+          return (
+            <div key={`${visual.title}-${point.label}`}>
+              <div className="flex items-center justify-between gap-4 text-sm">
+                <span className="font-semibold text-[#111111]">{point.label}</span>
+                <span className="text-[#405266]">{point.value}</span>
+              </div>
+              <div className="mt-2 h-2 rounded-full bg-[#EEF2F6]">
+                <div
+                  className="h-2 rounded-full bg-[#6E5636]"
+                  style={{ width: `${Math.max(8, (numeric / max) * 100)}%` }}
+                />
+              </div>
+              {point.note || point.sourceLabel ? (
+                <p className="mt-1 text-xs leading-5 text-[#777777]">
+                  {point.note}
+                  {point.sourceLabel ? (
+                    <>
+                      {" "}
+                      <SourceLink label={point.sourceLabel} url={point.sourceUrl} />
+                    </>
+                  ) : null}
+                </p>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    </article>
+  );
+}
+
+function parseLooseNumber(value: string) {
+  const text = value.toLowerCase().replace(/,/g, "");
+  const match = text.match(/[\d.]+/);
+  if (!match) return 1;
+  const base = Number(match[0]) || 1;
+  if (text.includes("b") || text.includes("亿")) return base * 1_000;
+  if (text.includes("m") || text.includes("百万") || text.includes("万")) return base;
+  return base;
+}
+
+function CommunitySignalsCard({
+  title,
+  items,
+  t,
+}: {
+  title: string;
+  items: MarketForecastReportResult["communitySignals"];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <div className="rounded-[1rem] border border-[#E1E5EA] p-5">
+      <p className="text-sm font-semibold text-[#111111]">{title}</p>
+      <div className="mt-4 space-y-4">
+        {items.length ? (
+          items.map((item) => (
+            <article key={`${item.platform}-${item.communityOrQuery}`} className="rounded-md bg-[#FAFAF7] p-4">
+              <div className="flex flex-col justify-between gap-2 sm:flex-row sm:items-start">
+                <div>
+                  <h4 className="text-sm font-semibold text-[#111111]">{item.platform}</h4>
+                  <p className="mt-1 text-xs leading-5 text-[#667085]">{item.communityOrQuery}</p>
+                </div>
+                <span className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#405266]">
+                  {t(`intent.${item.buyingIntent ?? "unknown"}`)}
+                </span>
+              </div>
+              <p className="mt-3 text-sm leading-6 text-[#333333]">{item.activeSignal}</p>
+              {item.repeatedPain ? <p className="mt-2 text-sm leading-6 text-[#555555]">{item.repeatedPain}</p> : null}
+              <div className="mt-3 flex flex-wrap gap-2">
+                {item.observedMetric ? <SignalBadge label={t("report.observedMetric")} value={item.observedMetric} /> : null}
+                {item.observedPeriod ? <SignalBadge label={t("report.observedPeriod")} value={item.observedPeriod} /> : null}
+                <SignalBadge label={t("report.sourceStatus")} value={t(`sourceStatus.${item.evidenceStatus}`)} />
+              </div>
+              <div className="mt-3 space-y-1 text-xs leading-5 text-[#666666]">
+                {item.sourceLabel ? <SourceLink label={item.sourceLabel} url={item.sourceUrl} /> : null}
+                {item.sampleLinks.length ? (
+                  <div className="flex flex-wrap gap-x-3 gap-y-1">
+                    {item.sampleLinks.slice(0, 4).map((link) => (
+                      <SourceLink key={`${link.label}-${link.url}`} label={link.label} url={link.url} />
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            </article>
+          ))
+        ) : (
+          <p className="text-sm text-[#777777]">-</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PolicyTrendsCard({
+  title,
+  items,
+  t,
+}: {
+  title: string;
+  items: MarketForecastReportResult["policyTrends"];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <div className="rounded-[1rem] border border-[#E1E5EA] p-5">
+      <p className="text-sm font-semibold text-[#111111]">{title}</p>
+      <div className="mt-4 space-y-4">
+        {items.length ? (
+          items.map((item) => (
+            <article key={item.title} className="rounded-md bg-[#FAFAF7] p-4">
+              <div className="flex items-start justify-between gap-3">
+                <h4 className="text-sm font-semibold leading-6 text-[#111111]">{item.title}</h4>
+                <span className="shrink-0 rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#405266]">
+                  {t(`policy.${item.direction}`)}
+                </span>
+              </div>
+              <p className="mt-2 text-sm leading-6 text-[#555555]">{item.impactOnAdoption}</p>
+              {item.impactOnCostOrSalesCycle ? (
+                <p className="mt-2 text-xs leading-5 text-[#666666]">{item.impactOnCostOrSalesCycle}</p>
+              ) : null}
+              {item.sourceLabel ? (
+                <p className="mt-2 text-xs leading-5 text-[#666666]">
+                  <SourceLink label={item.sourceLabel} url={item.sourceUrl} />
+                </p>
+              ) : null}
+            </article>
+          ))
+        ) : (
+          <p className="text-sm text-[#777777]">-</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ComparableCaseCard({
+  item,
+  t,
+}: {
+  item: MarketForecastReportResult["comparableCases"][number];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <article className="rounded-[1rem] border border-[#E1E5EA] p-5">
+      <div className="flex items-start justify-between gap-3">
+        <h4 className="text-base font-semibold text-[#111111]">{item.name}</h4>
+        <span className="rounded-full bg-[#EEF2F6] px-3 py-1 text-xs font-semibold text-[#405266]">
+          {t(`confidence.${item.confidence}`)}
+        </span>
+      </div>
+      <p className="mt-3 text-xs font-semibold uppercase tracking-[0.08em] text-[#667085]">
+        {item.comparableDimension}
+      </p>
+      <p className="mt-2 text-sm leading-6 text-[#333333]">{item.relevance}</p>
+      <p className="mt-3 rounded-md bg-[#FAFAF7] p-3 text-xs leading-5 text-[#666666]">
+        {item.limitation}
+      </p>
+      {item.sourceLabel ? (
+        <p className="mt-3 text-xs leading-5 text-[#666666]">
+          <SourceLink label={item.sourceLabel} url={item.sourceUrl} />
+        </p>
+      ) : null}
+    </article>
+  );
+}
+
+function SignalBadge({ label, value }: { label: string; value: string }) {
+  return (
+    <span className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#405266]">
+      {label}: {value}
+    </span>
+  );
+}
+
+function SourceList({
+  title,
+  items,
+}: {
+  title: string;
+  items: MarketForecastReportResult["sources"];
+}) {
+  return (
+    <div className="rounded-[1rem] border border-[#E1E5EA] p-5">
+      <p className="text-sm font-semibold text-[#111111]">{title}</p>
+      <ul className="mt-3 space-y-2 text-sm leading-6 text-[#555555]">
+        {items.length ? (
+          items.map((item) => (
+            <li key={`${item.label}-${item.url ?? item.type}`}>
+              <SourceLink label={item.label} url={item.url} />
+              <span className="text-[#777777]"> / {item.type}</span>
+            </li>
+          ))
+        ) : (
+          <li className="text-[#777777]">-</li>
+        )}
+      </ul>
+    </div>
+  );
+}
+
+function SourceLink({ label, url }: { label: string; url?: string }) {
+  if (!url) return <span>{label}</span>;
+  return (
+    <a
+      className="inline-flex items-center gap-1 font-semibold text-[#2F516B] underline-offset-4 hover:underline"
+      href={url}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {label}
+      <ExternalLink className="size-3" aria-hidden />
+    </a>
+  );
+}
+
+function EstimateCard({
+  title,
+  item,
+}: {
+  title: string;
+  item: { estimate: string; rationale: string; confidence: "low" | "medium" | "high" };
+}) {
+  return (
+    <article className="rounded-[1rem] border border-[#E1E5EA] p-5">
+      <div className="flex items-center justify-between gap-3">
+        <h4 className="text-base font-semibold text-[#111111]">{title}</h4>
+        <span className="rounded-full bg-[#EEF2F6] px-3 py-1 text-xs font-semibold text-[#405266]">
+          {item.confidence}
+        </span>
+      </div>
+      <p className="mt-3 text-lg font-semibold text-[#111111]">{item.estimate}</p>
+      <p className="mt-2 text-sm leading-6 text-[#555555]">{item.rationale}</p>
+    </article>
+  );
+}
+
+function ListBlock({
+  title,
+  items,
+  compact = false,
+}: {
+  title: string;
+  items: string[];
+  compact?: boolean;
+}) {
+  return (
+    <div className={compact ? "mt-4" : "rounded-[1rem] border border-[#E1E5EA] p-5"}>
+      <p className="text-sm font-semibold text-[#111111]">{title}</p>
+      <ul className="mt-3 space-y-2 text-sm leading-6 text-[#555555]">
+        {items.length ? items.map((item) => <li key={item}>{item}</li>) : <li className="text-[#777777]">-</li>}
+      </ul>
+    </div>
+  );
+}