@tomako/tools-runtime 0.1.0

package/src/features/tools/market-forecast-report/market-forecast-report.container.tsx

@@ -0,0 +1,73 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+import { MarketForecastReport } from "../../../components/tools/market-forecast-report";
+
+import {
+  ToolCardGrid,
+  ToolFaqSection,
+  ToolSection,
+  ToolSectionEyebrow,
+  ToolTextRows,
+  type ToolFaqItem,
+  type ToolTextCard,
+} from "../shared/tool-content-sections";
+import { ToolCta } from "../shared/tool-cta";
+import { ToolWorkspaceSection } from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+
+export async function MarketForecastReportContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(
+    locale,
+     "toolsPages.marketForecastReport.guide",
+  );
+
+  const valueItems = t.raw("valueItems") as readonly ToolTextCard[];
+  const evidenceItems = t.raw("evidenceItems") as readonly string[];
+  const boundaryItems = t.raw("boundaryItems") as readonly string[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
+
+  return (
+    <ToolPageShell locale={locale} spec={spec} heroVariant="split">
+      <ToolWorkspaceSection
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+      >
+        <MarketForecastReport />
+      </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>
+        <p className="mt-4 max-w-3xl text-base leading-7 text-[#555555]">{t("valueIntro")}</p>
+        <div className="mt-7">
+          <ToolCardGrid items={valueItems} columns="three" size="prominent" />
+        </div>
+      </section>
+
+      <ToolSection heading={t("evidenceTitle")} intro={t("evidenceIntro")}>
+        <ToolSectionEyebrow>{t("evidenceKicker")}</ToolSectionEyebrow>
+        <div className="mt-5">
+          <ToolTextRows items={evidenceItems} />
+        </div>
+      </ToolSection>
+
+      <ToolSection heading={t("boundaryTitle")} intro={t("boundaryIntro")} reverse>
+        <ToolSectionEyebrow>{t("boundaryKicker")}</ToolSectionEyebrow>
+        <div className="mt-5">
+          <ToolTextRows items={boundaryItems} />
+        </div>
+      </ToolSection>
+
+      <ToolFaqSection heading={t("faqTitle")} intro={t("faqKicker")} items={faqItems} />
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools/social-listening-research-report", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools/pitch-deck-generator", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/market-forecast-report/market-forecast-report.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const marketForecastReportSpec: ToolSpec = {
+  slug: "market-forecast-report",
+  toolType: "analyzer",
+  riskLevel: "medium",
+  seo: {
+    publishedAt: "2026-07-07",
+    updatedAt: "2026-07-31",
+    readingTime: "9 min",
+    featured: false,
+    ogImage: "/tools/market-forecast-report-hero.webp",
+  },
+  widget: { id: "market-forecast-report", mode: "custom" },
+};

package/src/features/tools/million-user-growth-test/million-user-growth-test.container.tsx

@@ -0,0 +1,123 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { MillionUserGrowthTest } from "./widget";
+
+import {
+    ToolCardGrid,
+    ToolDividedFaqList,
+    ToolSectionEyebrow,
+    type ToolFaqItem,
+    type ToolTextCard,
+} 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 MillionUserGrowthTestContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.millionUserGrowthTest.guide");
+  const sharedT = await createToolGuideTranslator(locale, "toolsPages.shared");
+
+  const valueItems = t.raw("valueItems") as readonly ToolTextCard[];
+  const standards = t.raw("standards") as readonly ToolTextCard[];
+  const useCases = t.raw("useCases") as readonly ToolTextCard[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
+
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="immersive"
+      heroBackgroundImage="/tools/million-user-growth-test-hero.webp"
+      heroBackgroundAlt={t("visualAlt.hero")}
+    >
+      <ToolWorkspaceSection
+        heading={sharedT("toolWorkspace")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+      >
+        <MillionUserGrowthTest />
+      </ToolWorkspaceSection>
+
+      <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 tone="coral">{t("valueKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("valueTitle")}
+          </h2>
+          <p className="mt-4 text-base leading-7 text-[#555555]">{t("valueIntro")}</p>
+          <div className="mt-6">
+            <ToolCardGrid items={valueItems} columns="three" />
+          </div>
+        </div>
+        <ToolImageVisual
+          src="/tools/million-user-growth-test-workspace.webp"
+          alt={t("visualAlt.workspace")}
+        />
+      </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/million-user-growth-test-value.webp"
+          alt={t("visualAlt.value")}
+        />
+        <div>
+          <ToolSectionEyebrow tone="coral">{t("standardsKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("standardsTitle")}
+          </h2>
+          <p className="mt-4 text-base leading-7 text-[#555555]">{t("standardsIntro")}</p>
+          <div className="mt-6">
+            <ToolCardGrid items={standards} columns="three" />
+          </div>
+        </div>
+      </section>
+
+      <section className="border-t border-[#E8E4DB] py-12 md:py-16">
+        <div className="mb-8 max-w-3xl">
+          <ToolSectionEyebrow tone="coral">{t("useCasesKicker")}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {t("useCasesTitle")}
+          </h2>
+          <p className="mt-4 text-base leading-7 text-[#555555]">{t("useCasesIntro")}</p>
+        </div>
+        <ToolCardGrid items={useCases} columns="three" />
+        <div className="mt-8 grid gap-6 md:grid-cols-2">
+          <ToolImageVisual
+            src="/tools/million-user-growth-test-share.webp"
+            alt={t("visualAlt.share")}
+          />
+          <ToolImageVisual
+            src="/tools/million-user-growth-test-boundary.webp"
+            alt={t("visualAlt.boundary")}
+          />
+        </div>
+      </section>
+
+      <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[1fr_0.84fr] md:items-start md:py-16">
+        <div>
+          <ToolSectionEyebrow tone="coral">{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>
+        <aside className="rounded-[1.25rem] border border-[#E2D8CA] bg-white p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">
+            {t("boundaryKicker")}
+          </p>
+          <h3 className="mt-3 text-xl font-semibold text-[#111111]">{t("boundaryTitle")}</h3>
+          <p className="mt-3 text-sm leading-6 text-[#555555]">{t("boundaryBody")}</p>
+        </aside>
+      </section>
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools/community-post-risk-checker", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/million-user-growth-test/million-user-growth-test.spec.ts

@@ -0,0 +1,14 @@
+import type { ToolSpec } from "../types";
+
+export const millionUserGrowthTestSpec: ToolSpec = {
+  slug: "million-user-growth-test",
+  toolType: "generator",
+  riskLevel: "low",
+  seo: {
+    "updatedAt": "2026-07-02",
+    "readingTime": "4 min",
+    "featured": false,
+    "ogImage": "/tools/million-user-growth-test-hero.webp"
+  },
+  widget: {"id":"million-user-growth-test","mode":"custom"},
+};

package/src/features/tools/million-user-growth-test/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const MillionUserGrowthTest = dynamic(() =>
+  import("./million-user-growth-test").then((module) => module.MillionUserGrowthTest),
+);

package/src/features/tools/million-user-growth-test/widget/million-user-growth-test.tsx

@@ -0,0 +1,433 @@
+"use client";
+
+import { TrendingUp } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+
+import {
+    ToolErrorPanel,
+    ToolFormShell,
+    ToolResultActions,
+    ToolResultHeader,
+    copyTextToClipboard,
+} from "../../../../components/tools/workspace";
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+    createMillionUserGrowthTestResult,
+    type MillionUserGrowthTestCopyBank,
+} from "../../../../lib/tools/million-user-growth-test";
+import {
+    millionUserGrowthTestInputSchema,
+    type MillionUserGrowthTestInput,
+    type MillionUserGrowthTestResult,
+} from "../../../../lib/tools/million-user-growth-test-schema";
+import {
+    fetchMillionUserGrowthTestTask,
+    submitMillionUserGrowthTest,
+} from "../../../../host/client";
+
+type Option = { value: string; label: string };
+
+type WidgetState =
+  | { phase: "idle" }
+  | { phase: "error"; message: string }
+  | { phase: "running"; taskId: string; status: string }
+  | {
+      phase: "done";
+      result: MillionUserGrowthTestResult;
+      source: "agent" | "localFallback";
+      taskId?: string;
+    };
+
+const pollDelayMs = 2500;
+const maxPollAttempts = 72;
+
+const initialInput: MillionUserGrowthTestInput = {
+  productName: "",
+  productDescription: "",
+  currentUsers: "under_100",
+  growthMotion: "content",
+  founderMode: "shipping",
+};
+
+export function MillionUserGrowthTest() {
+  const locale = useLocale() as AppLocale;
+  const t = useTranslations("toolsPages.millionUserGrowthTest.widget");
+  const [input, setInput] = useState<MillionUserGrowthTestInput>(initialInput);
+  const [state, setState] = useState<WidgetState>({ phase: "idle" });
+  const [copied, setCopied] = useState(false);
+  const resultRef = useRef<HTMLDivElement | null>(null);
+
+  const currentUserOptions = t.raw("currentUserOptions") as Option[];
+  const growthMotionOptions = t.raw("growthMotionOptions") as Option[];
+  const founderModeOptions = t.raw("founderModeOptions") as Option[];
+  const previewItems = t.raw("previewItems") as readonly string[];
+  const copyBank = t.raw("copyBank") as MillionUserGrowthTestCopyBank;
+
+  function updateInput<K extends keyof MillionUserGrowthTestInput>(
+    key: K,
+    value: MillionUserGrowthTestInput[K],
+  ) {
+    setInput((current) => ({ ...current, [key]: value }));
+  }
+
+  function delay(ms: number) {
+    return new Promise((resolve) => window.setTimeout(resolve, ms));
+  }
+
+  function finishWithLocalFallback(fallbackInput: MillionUserGrowthTestInput) {
+    const result = {
+      ...createMillionUserGrowthTestResult(fallbackInput, copyBank),
+      tomakoCredit: t("localFallbackCredit"),
+    };
+    setCopied(false);
+    setState({ phase: "done", result, source: "localFallback" });
+  }
+
+  async function pollUntilDone(taskId: string, fallbackInput: MillionUserGrowthTestInput) {
+    for (let attempt = 0; attempt < maxPollAttempts; attempt += 1) {
+      const task = await fetchMillionUserGrowthTestTask(taskId);
+      if (task.data) {
+        setState({ phase: "done", result: task.data, source: "agent", taskId });
+        return;
+      }
+
+      if (task.status === "FAILED" || task.status === "RESULT_INVALID") {
+        finishWithLocalFallback(fallbackInput);
+        return;
+      }
+
+      setState({ phase: "running", taskId, status: task.status });
+      await delay(pollDelayMs);
+    }
+
+    finishWithLocalFallback(fallbackInput);
+  }
+
+  async function generateResult() {
+    const parsed = millionUserGrowthTestInputSchema.safeParse(input);
+    if (!parsed.success) {
+      setState({
+        phase: "error",
+        message:
+          parsed.error.issues[0]?.path[0] === "productName"
+            ? t("errors.productName")
+            : t("errors.productDescription"),
+      });
+      return;
+    }
+
+    setCopied(false);
+    requestAnimationFrame(() => {
+      resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+
+    try {
+      const submitted = await submitMillionUserGrowthTest(parsed.data, locale);
+      setState({
+        phase: "running",
+        taskId: submitted.taskId,
+        status: submitted.status,
+      });
+      await pollUntilDone(submitted.taskId, parsed.data);
+    } catch {
+      finishWithLocalFallback(parsed.data);
+    }
+
+    requestAnimationFrame(() => {
+      resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+  }
+
+  function reset() {
+    setState({ phase: "idle" });
+    setCopied(false);
+  }
+
+  async function copyResult() {
+    if (state.phase !== "done") return;
+    const didCopy = await copyTextToClipboard(buildShareText(state.result));
+    if (didCopy) setCopied(true);
+  }
+
+  const result = state.phase === "done" ? state.result : null;
+  const busy = state.phase === "running";
+  const previewProduct = input.productName.trim() || t("previewProduct");
+
+  return (
+    <div className="grid gap-8">
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,0.78fr)_minmax(0,1.22fr)] lg:items-start">
+        <div className="rounded-[1.25rem] border border-[#E2E6EC] bg-white shadow-[0_14px_38px_rgba(17,17,17,0.05)]">
+          <div className="grid gap-4">
+            <ToolFormShell
+              className="bg-white md:p-6"
+              hint={t("formFootnote")}
+              icon={<TrendingUp aria-hidden className="size-4 text-[#F2C66D]" />}
+              onSubmit={(event) => {
+                event.preventDefault();
+                void generateResult();
+              }}
+              title={t("previewCardKicker")}
+            >
+              <div className="grid gap-4">
+                <Field label={t("productNameLabel")}>
+                  <Input
+                    value={input.productName}
+                    placeholder={t("productNamePlaceholder")}
+                    onChange={(event) => updateInput("productName", event.target.value)}
+                  />
+                </Field>
+                <Field label={t("productDescriptionLabel")}>
+                  <Textarea
+                    rows={4}
+                    value={input.productDescription}
+                    placeholder={t("productDescriptionPlaceholder")}
+                    onChange={(event) =>
+                      updateInput("productDescription", event.target.value)
+                    }
+                  />
+                </Field>
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <SelectField
+                    label={t("currentUsersLabel")}
+                    value={input.currentUsers}
+                    options={currentUserOptions}
+                    onValueChange={(value) =>
+                      updateInput(
+                        "currentUsers",
+                        value as MillionUserGrowthTestInput["currentUsers"],
+                      )
+                    }
+                  />
+                  <SelectField
+                    label={t("growthMotionLabel")}
+                    value={input.growthMotion}
+                    options={growthMotionOptions}
+                    onValueChange={(value) =>
+                      updateInput(
+                        "growthMotion",
+                        value as MillionUserGrowthTestInput["growthMotion"],
+                      )
+                    }
+                  />
+                  <div className="sm:col-span-2">
+                    <SelectField
+                      label={t("founderModeLabel")}
+                      value={input.founderMode}
+                      options={founderModeOptions}
+                      onValueChange={(value) =>
+                        updateInput(
+                          "founderMode",
+                          value as MillionUserGrowthTestInput["founderMode"],
+                        )
+                      }
+                    />
+                  </div>
+                </div>
+
+                {state.phase === "error" ? (
+                  <ToolErrorPanel body={state.message} className="p-3" />
+                ) : null}
+
+                {state.phase === "running" ? (
+                  <p className="rounded-lg bg-[#F4F7FF] px-3 py-2 text-sm font-medium text-[#24407A]">
+                    {t("status.running", { status: state.status })}
+                  </p>
+                ) : null}
+
+                <Button
+                  className="h-11 w-full rounded-xl bg-[#111111] text-white shadow-none hover:bg-[#2A2A2A]"
+                  disabled={busy}
+                  type="submit"
+                >
+                  {busy ? t("status.submitting") : t("submit")}
+                </Button>
+              </div>
+            </ToolFormShell>
+          </div>
+        </div>
+
+        <div className="rounded-[1.5rem] border border-[#E4DCCD] bg-[#FFFDF7] p-5 md:p-6">
+          <p className="text-sm font-semibold text-[#111111]">{t("previewTitle")}</p>
+          <p className="mt-2 text-sm leading-6 text-[#6A5C4F]">{t("previewSubtitle")}</p>
+          <div className="mt-5 rounded-[1.25rem] border border-[#E6D9C7] bg-white p-5 shadow-[0_18px_46px_rgba(94,63,35,0.07)]">
+            <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#8A6A4E]">
+              {t("previewCardKicker")}
+            </p>
+            <h3 className="mt-3 text-3xl font-semibold leading-tight text-[#111111]">
+              {previewProduct}
+            </h3>
+            <p className="mt-4 text-5xl font-semibold leading-none text-[#D85435]">
+              {result?.eta ?? t("previewEta")}
+            </p>
+            <div className="mt-5 grid gap-3">
+              {(result?.reasons ?? previewItems).map((item) => (
+                <p
+                  key={item}
+                  className="rounded-xl border border-[#EFE8DD] bg-[#FBF8F1] px-4 py-3 text-sm leading-6 text-[#51473D]"
+                >
+                  {item}
+                </p>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div ref={resultRef}>
+        {state.phase === "done" ? (
+          <ResultPanel
+            result={state.result}
+            source={state.source}
+            taskId={state.taskId}
+            copied={copied}
+            onCopy={() => void copyResult()}
+            onReset={reset}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function SelectField({
+  label,
+  value,
+  options,
+  onValueChange,
+}: {
+  label: string;
+  value: string;
+  options: readonly Option[];
+  onValueChange: (value: string) => void;
+}) {
+  return (
+    <Field label={label}>
+      <Select value={value} onValueChange={onValueChange}>
+        <SelectTrigger className="w-full">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </Field>
+  );
+}
+
+function ResultPanel({
+  result,
+  source,
+  taskId,
+  copied,
+  onCopy,
+  onReset,
+}: {
+  result: MillionUserGrowthTestResult;
+  source: "agent" | "localFallback";
+  taskId?: string;
+  copied: boolean;
+  onCopy: () => void;
+  onReset: () => void;
+}) {
+  const t = useTranslations("toolsPages.millionUserGrowthTest.widget");
+  const scoreLabel = useMemo(() => `${result.score}/100`, [result.score]);
+
+  return (
+    <section className="grid gap-5 rounded-[1.5rem] border border-[#E2D8CA] bg-white p-5 shadow-[0_20px_60px_rgba(17,17,17,0.07)] md:p-7">
+      <ToolResultHeader
+        actions={
+          <div className="rounded-2xl border border-[#ECE4D8] bg-[#FAF7EF] px-4 py-3 text-right">
+            <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#88776B]">
+              {t("scoreLabel")}
+            </p>
+            <p className="mt-1 text-2xl font-semibold text-[#111111]">{scoreLabel}</p>
+          </div>
+        }
+        body={result.verdict}
+        eyebrow={t("resultKicker")}
+        title={result.eta}
+      />
+
+      <div className="grid gap-4 lg:grid-cols-[0.84fr_1.16fr]">
+        <div className="rounded-[1.25rem] border border-[#E6D9C7] bg-[#FFFDF7] p-5">
+          <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#8A6A4E]">
+            {t("shareCardLabel")}
+          </p>
+          <h4 className="mt-3 text-2xl font-semibold leading-tight text-[#111111]">
+            {result.productName}
+          </h4>
+          <p className="mt-4 text-4xl font-semibold leading-none text-[#D85435]">{result.eta}</p>
+          <p className="mt-4 rounded-full border border-[#E7D7C6] bg-white px-3 py-2 text-sm font-semibold text-[#3B3128]">
+            {result.archetype}
+          </p>
+          <p className="mt-5 text-xs leading-5 text-[#756A60]">{result.tomakoCredit}</p>
+          <p className="mt-2 text-[11px] leading-5 text-[#8A8A8A]">{result.disclaimer}</p>
+          <p className="mt-2 text-[11px] leading-5 text-[#8A8A8A]">
+            {source === "agent"
+              ? t("status.agentResult", { taskId: taskId ?? "" })
+              : t("status.localFallback")}
+          </p>
+        </div>
+
+        <div className="grid gap-4">
+          <div className="grid gap-3 md:grid-cols-3">
+            {result.reasons.map((reason) => (
+              <article
+                key={reason}
+                className="rounded-[1rem] border border-[#E7E0D5] bg-[#FBFAF6] p-4"
+              >
+                <p className="text-sm leading-6 text-[#3D3D3D]">{reason}</p>
+              </article>
+            ))}
+          </div>
+          <div className="rounded-[1rem] border border-[#E2E6EC] bg-white p-4">
+            <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">
+              {t("adviceLabel")}
+            </p>
+            <p className="mt-2 text-sm leading-6 text-[#3D3D3D]">{result.advice}</p>
+          </div>
+          <div className="rounded-[1rem] border border-[#E2E6EC] bg-[#F7F8FA] p-4">
+            <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">
+              {t("shareCopyLabel")}
+            </p>
+            <p className="mt-2 text-sm font-semibold text-[#111111]">{result.shareTitle}</p>
+            <p className="mt-1 text-sm leading-6 text-[#555555]">{result.shareBody}</p>
+          </div>
+        </div>
+      </div>
+
+      <ToolResultActions
+        copied={copied}
+        copiedLabel={t("copied")}
+        copyLabel={t("copy")}
+        onCopy={onCopy}
+        onReset={onReset}
+        resetLabel={t("reset")}
+      />
+    </section>
+  );
+}
+
+function buildShareText(result: MillionUserGrowthTestResult) {
+  return [
+    result.shareTitle,
+    result.shareBody,
+    "",
+    result.tomakoCredit,
+    result.disclaimer,
+  ].join("\n");
+}