@tomako/tools-runtime 0.1.0

package/src/features/tools/commercial-bp-generator/widget/constants.ts

@@ -0,0 +1,32 @@
+import type { CommercialBpStylePreset } from "../../../../lib/tools/commercial-bp-generator-schema";
+import type { FormState } from "./types";
+
+export const POLL_INTERVAL_MS = 3000;
+export const GRACE_WINDOW_MS = 900_000;
+export const IMAGE_STATUS_POLL_MS = 5000;
+export const MAX_REFERENCE_IMAGE_DIMENSION = 1280;
+export const REFERENCE_IMAGE_QUALITY = 0.78;
+export const ACCEPTED_REFERENCE_IMAGE_TYPES = ["image/png", "image/jpeg", "image/webp"] as const;
+
+export const styleImages: Partial<Record<CommercialBpStylePreset, string>> = {
+  signalEditorial: "/tools/commercial-bp-generator-style-signal-editorial.webp",
+  operatorGrid: "/tools/commercial-bp-generator-style-operator-grid.webp",
+  marketAtlas: "/tools/commercial-bp-generator-style-market-atlas.webp",
+};
+
+export const defaultForm: FormState = {
+  contextMode: "url",
+  productUrl: "",
+  productName: "",
+  positioning: "",
+  targetUsers: "",
+  purpose: "combined",
+  productContext: "",
+  brandNotes: "",
+  referenceImages: [],
+  mustInclude: "",
+  mustAvoid: "",
+  stylePreset: "none",
+  language: "zh",
+  density: "standard",
+};

package/src/features/tools/commercial-bp-generator/widget/helpers.ts

@@ -0,0 +1,147 @@
+import {
+    COMMERCIAL_BP_MAX_REFERENCE_IMAGE_CHARS,
+    type CommercialBpReferenceImage,
+    type CommercialBpResult,
+} from "../../../../lib/tools/commercial-bp-generator-schema";
+
+import {
+    ACCEPTED_REFERENCE_IMAGE_TYPES,
+    MAX_REFERENCE_IMAGE_DIMENSION,
+    REFERENCE_IMAGE_QUALITY,
+} from "./constants";
+
+export function compact(value: string): string {
+  return value.trim().replace(/\s+/g, "").toLowerCase();
+}
+
+export function isPlaceholder(value: string): boolean {
+  const normalized = compact(value).replace(/[，。,.!?！？、:：;；"'“”‘’()（）[\]{}]/g, "");
+  return (
+    /^(test|demo|example|placeholder|随便|测试|示例|占位)+$/i.test(normalized) ||
+    /^[\d._-]+$/.test(normalized) ||
+    (normalized.length > 0 && new Set([...normalized]).size <= 2)
+  );
+}
+
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(1)} MB`;
+  return `${Math.max(1, Math.round(bytes / 1000))} KB`;
+}
+
+export function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === "string" && reader.result) resolve(reader.result);
+      else reject(new Error("read"));
+    };
+    reader.onerror = () => reject(new Error("read"));
+    reader.readAsDataURL(file);
+  });
+}
+
+export function loadReferenceImage(dataUrl: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new window.Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("read"));
+    image.src = dataUrl;
+  });
+}
+
+export function canvasToDataUrl(
+  image: HTMLImageElement,
+  maxDimension: number,
+  quality: number,
+): Pick<CommercialBpReferenceImage, "dataUrl" | "width" | "height" | "mimeType"> {
+  const scale = Math.min(1, maxDimension / Math.max(image.naturalWidth, image.naturalHeight));
+  const width = Math.max(1, Math.round(image.naturalWidth * scale));
+  const height = Math.max(1, Math.round(image.naturalHeight * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("read");
+  context.drawImage(image, 0, 0, width, height);
+  const webp = canvas.toDataURL("image/webp", quality);
+  if (webp.startsWith("data:image/webp")) {
+    return { dataUrl: webp, width, height, mimeType: "image/webp" };
+  }
+  return { dataUrl: canvas.toDataURL("image/jpeg", quality), width, height, mimeType: "image/jpeg" };
+}
+
+export async function normalizeReferenceImage(file: File): Promise<CommercialBpReferenceImage> {
+  if (!ACCEPTED_REFERENCE_IMAGE_TYPES.includes(file.type as (typeof ACCEPTED_REFERENCE_IMAGE_TYPES)[number])) {
+    throw new Error("type");
+  }
+  if (file.size > 8_000_000) throw new Error("size");
+
+  const sourceDataUrl = await readFileAsDataUrl(file);
+  const image = await loadReferenceImage(sourceDataUrl);
+  let normalized = canvasToDataUrl(image, MAX_REFERENCE_IMAGE_DIMENSION, REFERENCE_IMAGE_QUALITY);
+  if (normalized.dataUrl.length > COMMERCIAL_BP_MAX_REFERENCE_IMAGE_CHARS) {
+    normalized = canvasToDataUrl(image, 960, 0.68);
+  }
+  if (normalized.dataUrl.length > COMMERCIAL_BP_MAX_REFERENCE_IMAGE_CHARS) {
+    throw new Error("large");
+  }
+
+  return {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    name: file.name,
+    size: file.size,
+    ...normalized,
+  };
+}
+
+export function orderedSlides(result?: CommercialBpResult) {
+  return [...(result?.slides ?? [])].sort((a, b) => a.index - b.index);
+}
+
+export function resultProgress(result?: CommercialBpResult): number {
+  if (!result?.outline.length) return 0;
+  const ready = result.slides.filter((slide) => slide.status === "ready" && slide.imageUrl).length;
+  if (result.resultStatus === "final") return 100;
+  return Math.min(94, Math.max(18, Math.round((ready / result.outline.length) * 100)));
+}
+
+export function mergeImageTaskResult(result: CommercialBpResult, imageTaskId: string, status: string, imageUrl?: string) {
+  return {
+    ...result,
+    slides: result.slides.map((slide) => {
+      if (slide.imageTaskId !== imageTaskId) return slide;
+      if (status === "SUCCEEDED" && imageUrl) {
+        return {
+          ...slide,
+          status: "ready" as const,
+          imageUrl,
+          downloadUrl: slide.downloadUrl || imageUrl,
+        };
+      }
+      if (status === "FAILED") {
+        return {
+          ...slide,
+          status: "failed" as const,
+          qaNotes: slide.qaNotes.length
+            ? slide.qaNotes
+            : [`Image task failed: ${imageTaskId}`],
+        };
+      }
+      return {
+        ...slide,
+        status: slide.status === "queued" ? ("generating" as const) : slide.status,
+      };
+    }),
+  };
+}
+
+export function statusTone(status: string) {
+  if (status === "ready") return "border-[#CFE4C6] bg-[#F4FAEF] text-[#315F28]";
+  if (status === "generating") return "border-[#F1D7B8] bg-[#FFF7EA] text-[#8A5819]";
+  if (status === "failed") return "border-[#FFD2C2] bg-[#FFF4EC] text-[#8A2C16]";
+  return "border-[#E1DDD3] bg-[#F7F6F2] text-[#666666]";
+}

package/src/features/tools/commercial-bp-generator/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const CommercialBpGenerator = dynamic(() =>
+  import("./commercial-bp-generator").then((module) => module.CommercialBpGenerator),
+);

package/src/features/tools/commercial-bp-generator/widget/result-shell.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import { Field, Textarea } from "@tomako/ui/input";
+import { ProgressBar } from "@tomako/ui/progress";
+import { useTranslations } from "../../../../i18n/client";
+import {
+    commercialBpFileBase,
+    stringifyCommercialBpManifest,
+    type CommercialBpResult,
+} from "../../../../lib/tools/commercial-bp-generator-schema";
+import {
+    CheckCircle2,
+    Download,
+    FileArchive,
+    Loader2,
+    RefreshCw,
+    Send,
+} from "lucide-react";
+import Image from "next/image";
+
+import { downloadTextFile } from "../../../../components/tools/workspace/tool-result-file-actions";
+import { orderedSlides, resultProgress, statusTone } from "./helpers";
+import type { WidgetState } from "./types";
+
+export function ResultShell({
+  state,
+  t,
+  onRetry,
+  onRevise,
+  revision,
+  setRevision,
+  busy,
+}: {
+  state: WidgetState;
+  t: ReturnType<typeof useTranslations>;
+  onRetry: () => void;
+  onRevise: (result: CommercialBpResult, taskId: string) => void;
+  revision: string;
+  setRevision: (value: string) => void;
+  busy: boolean;
+}) {
+  const result =
+    state.phase === "done"
+      ? state.data
+      : state.phase === "running"
+        ? state.data
+        : state.phase === "error"
+          ? state.previous
+          : undefined;
+  const taskId =
+    state.phase === "done"
+      ? state.taskId
+      : state.phase === "running"
+        ? state.taskId
+        : state.phase === "error"
+          ? state.taskId
+          : undefined;
+  const slides = orderedSlides(result);
+  const progress = resultProgress(result);
+  const fileBase = commercialBpFileBase(result?.brandName ?? "business-plan-deck");
+
+  if (state.phase === "idle") {
+    return (
+      <div className="rounded-[1.5rem] border border-dashed border-[#D8D4CA] bg-white/65 p-8 text-center">
+        <p className="text-base font-semibold text-[#111111]">{t("emptyTitle")}</p>
+        <p className="mx-auto mt-2 max-w-xl text-sm leading-6 text-[#666666]">{t("emptyHint")}</p>
+      </div>
+    );
+  }
+
+  if (state.phase === "error" && !result) {
+    return (
+      <div className="rounded-[1.5rem] border border-[#FFD2C2] bg-[#FFF4EC] p-8">
+        <p className="text-lg font-semibold text-[#8A2C16]">{t(`errors.${state.category}`)}</p>
+        <p className="mt-2 text-sm leading-6 text-[#7A4B3A]">{t("errors.recover")}</p>
+        <Button type="button" variant="outline" className="mt-5" onClick={onRetry}>
+          <RefreshCw className="size-4" aria-hidden />
+          {t("retry")}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_16px_38px_rgba(17,17,17,0.06)] md:p-6">
+        <div className="flex flex-col justify-between gap-4 md:flex-row md:items-start">
+          <div>
+            <div className="flex items-center gap-2 text-sm font-semibold text-[#315F28]">
+              {state.phase === "done" ? (
+                <CheckCircle2 className="size-4" aria-hidden />
+              ) : (
+                <Loader2 className="size-4 animate-spin" aria-hidden />
+              )}
+              {state.phase === "done" ? t("resultReady") : t("resultRunning")}
+            </div>
+            <h3 className="mt-3 text-2xl font-semibold leading-tight text-[#111111]">
+              {result?.brandName || t("resultFallbackTitle")}
+            </h3>
+            <p className="mt-2 max-w-3xl text-sm leading-6 text-[#555555]">
+              {result?.summary || t("resultFallbackSummary")}
+            </p>
+          </div>
+          {result ? (
+            <div className="flex flex-wrap gap-2">
+              {result.downloads.packageUrl ? (
+                <Button
+                  asChild
+                  type="button"
+                  className="min-h-10 bg-[#111111] text-white hover:bg-[#2A2A2A]"
+                >
+                  <a href={result.downloads.packageUrl} download>
+                    <FileArchive className="size-4" aria-hidden />
+                    {t("downloadAll")}
+                  </a>
+                </Button>
+              ) : (
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="min-h-10"
+                  onClick={() =>
+                    downloadTextFile({
+                      filename: `${fileBase}-manifest.md`,
+                      text: stringifyCommercialBpManifest(result),
+                    })
+                  }
+                >
+                  <FileArchive className="size-4" aria-hidden />
+                  {t("downloadManifest")}
+                </Button>
+              )}
+              {result.downloads.contactSheetUrl ? (
+                <Button asChild type="button" variant="outline" className="min-h-10">
+                  <a href={result.downloads.contactSheetUrl} download>
+                    <Download className="size-4" aria-hidden />
+                    {t("downloadContactSheet")}
+                  </a>
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="mt-5">
+          <div className="mb-2 flex justify-between text-xs font-semibold text-[#666666]">
+            <span>{result?.inProgressSection || t("progressFallback")}</span>
+            <span>{progress}%</span>
+          </div>
+          <ProgressBar value={progress} />
+        </div>
+
+        {result?.thinkingSteps.length ? (
+          <div className="mt-5 grid gap-3 md:grid-cols-2 lg:grid-cols-4">
+            {result.thinkingSteps.map((step) => (
+              <div
+                key={step.id}
+                className={`rounded-[1rem] border p-4 ${statusTone(
+                  step.status === "active" ? "generating" : step.status === "done" ? "ready" : step.status,
+                )}`}
+              >
+                <p className="text-sm font-semibold">{step.title}</p>
+                {step.detail ? <p className="mt-2 text-xs leading-5 opacity-80">{step.detail}</p> : null}
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+
+      {result?.outline.length ? (
+        <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 md:p-6">
+          <h4 className="text-lg font-semibold text-[#111111]">{t("outlineTitle")}</h4>
+          <div className="mt-4 grid gap-3 md:grid-cols-2">
+            {result.outline.map((slide) => (
+              <article key={slide.slug} className="rounded-[1rem] border border-[#E1DDD3] p-4">
+                <p className="text-xs font-semibold text-[#888888]">
+                  {String(slide.index).padStart(2, "0")} / {slide.density}
+                </p>
+                <h5 className="mt-2 text-sm font-semibold text-[#111111]">{slide.title}</h5>
+                <p className="mt-1 text-xs leading-5 text-[#666666]">{slide.coreMessage}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {slides.length ? (
+        <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 md:p-6">
+          <h4 className="text-lg font-semibold text-[#111111]">{t("slidesTitle")}</h4>
+          <div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {slides.map((slide) => (
+              <article
+                key={`${slide.index}-${slide.slug}`}
+                className="overflow-hidden rounded-[1rem] border border-[#E1DDD3] bg-[#F7F6F2]"
+              >
+                <div className="relative aspect-video bg-[#EEEAE0]">
+                  {slide.imageUrl ? (
+                    <Image
+                      src={slide.imageUrl}
+                      alt={slide.title}
+                      fill
+                      sizes="(min-width: 1280px) 33vw, (min-width: 768px) 50vw, 100vw"
+                      unoptimized
+                      className="h-full w-full object-cover"
+                    />
+                  ) : (
+                    <div className="flex h-full items-center justify-center text-sm font-semibold text-[#777777]">
+                      {t(`slideStatus.${slide.status}`)}
+                    </div>
+                  )}
+                </div>
+                <div className="p-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <p className="text-xs font-semibold text-[#888888]">
+                        {String(slide.index).padStart(2, "0")}
+                      </p>
+                      <h5 className="mt-1 text-sm font-semibold text-[#111111]">{slide.title}</h5>
+                    </div>
+                    <span className={`rounded-full border px-2 py-1 text-[11px] font-semibold ${statusTone(slide.status)}`}>
+                      {t(`slideStatus.${slide.status}`)}
+                    </span>
+                  </div>
+                  {slide.coreMessage ? (
+                    <p className="mt-2 text-xs leading-5 text-[#666666]">{slide.coreMessage}</p>
+                  ) : null}
+                  {slide.imageUrl || slide.downloadUrl ? (
+                    <Button asChild type="button" variant="outline" className="mt-4 min-h-9 w-full">
+                      <a
+                        href={slide.downloadUrl || slide.imageUrl}
+                        download={slide.filename || `${String(slide.index).padStart(2, "0")}-${slide.slug}.png`}
+                      >
+                        <Download className="size-4" aria-hidden />
+                        {t("downloadSlide")}
+                      </a>
+                    </Button>
+                  ) : null}
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {result && taskId ? (
+        <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 md:p-6">
+          <Field label={t("revisionLabel")} hint={t("revisionHint")}>
+            <Textarea
+              rows={3}
+              value={revision}
+              placeholder={t("revisionPlaceholder")}
+              onChange={(event) => setRevision(event.target.value)}
+              disabled={busy}
+            />
+          </Field>
+          <Button
+            type="button"
+            variant="outline"
+            className="mt-4 min-h-10"
+            disabled={busy || revision.trim().length < 6}
+            onClick={() => onRevise(result, taskId)}
+          >
+            <Send className="size-4" aria-hidden />
+            {t("sendRevision")}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/features/tools/commercial-bp-generator/widget/style-option.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import type { CommercialBpStylePreset } from "../../../../lib/tools/commercial-bp-generator-schema";
+import { Sparkles } from "lucide-react";
+
+import { styleImages } from "./constants";
+import type { CopyMap } from "./types";
+
+export function StyleOption({
+  preset,
+  selected,
+  copy,
+  onSelect,
+  disabled,
+}: {
+  preset: CommercialBpStylePreset;
+  selected: boolean;
+  copy: CopyMap;
+  onSelect: () => void;
+  disabled: boolean;
+}) {
+  const image = styleImages[preset];
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onSelect}
+      className={`w-[clamp(11.5rem,32vw,13rem)] shrink-0 overflow-hidden rounded-[1rem] border bg-white text-left transition disabled:opacity-60 ${
+        selected
+          ? "border-[#111111] shadow-[0_0_0_2px_rgba(17,17,17,0.12)]"
+          : "border-[#D8D4CA] hover:border-[#999999]"
+      }`}
+    >
+      {image ? (
+        <span
+          role="img"
+          aria-label={copy.styles[preset].name}
+          className="block aspect-[4/3] w-full bg-cover bg-center"
+          style={{ backgroundImage: `url(${image})` }}
+        />
+      ) : (
+        <div className="flex aspect-[4/3] items-center justify-center bg-[#F7F6F2]">
+          <Sparkles className="size-6 text-[#777777]" aria-hidden />
+        </div>
+      )}
+      <div className="p-3">
+        <p className="text-sm font-semibold text-[#111111]">{copy.styles[preset].name}</p>
+        <p className="mt-1 line-clamp-2 text-xs leading-5 text-[#666666]">
+          {copy.styles[preset].summary}
+        </p>
+      </div>
+    </button>
+  );
+}

package/src/features/tools/commercial-bp-generator/widget/types.ts

@@ -0,0 +1,33 @@
+import type {
+    CommercialBpDensity,
+    CommercialBpInput,
+    CommercialBpLanguage,
+    CommercialBpPurpose,
+    CommercialBpResult,
+    CommercialBpStylePreset,
+} from "../../../../lib/tools/commercial-bp-generator-schema";
+
+export type ErrorCategory = "submit" | "task" | "timeout" | "schema" | "invalid" | "generic";
+
+export type WidgetState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; status: string; taskId: string; data?: CommercialBpResult }
+  | { phase: "done"; data: CommercialBpResult; taskId: string }
+  | { phase: "error"; category: ErrorCategory; taskId?: string; previous?: CommercialBpResult };
+
+export type FormState = CommercialBpInput;
+
+export type CopyMap = {
+  purposes: Record<CommercialBpPurpose, string>;
+  languages: Record<CommercialBpLanguage, string>;
+  densities: Record<CommercialBpDensity, string>;
+  styles: Record<
+    CommercialBpStylePreset,
+    {
+      name: string;
+      summary: string;
+      image?: string;
+    }
+  >;
+};

package/src/features/tools/community-feedback-inbox/community-feedback-inbox.container.tsx

@@ -0,0 +1,126 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { CommunityFeedbackInbox } from "./widget";
+
+import {
+    ToolCardGrid,
+    ToolFaqSection,
+    ToolPlainTextGrid,
+    ToolSection,
+    type ToolFaqItem,
+    type ToolTextCard,
+} from "../shared/tool-content-sections";
+import { ToolCta } from "../shared/tool-cta";
+import {
+    ToolGuideSection,
+    ToolImageVisual,
+    ToolWorkspaceSection,
+} from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+
+export async function CommunityFeedbackInboxContainer({
+  locale,
+  spec,
+}: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.communityFeedbackInbox.guide");
+  const outputItems = t.raw("outputItems") as readonly ToolTextCard[];
+  const supportItems = t.raw("supportItems") as readonly string[];
+  const boundaryItems = t.raw("boundaryItems") as readonly string[];
+  const resultUseItems = t.raw("resultUseItems") as readonly string[];
+  const whyTomakoItems = t.raw("whyTomakoItems") as readonly ToolTextCard[];
+  const standardItems = t.raw("standardItems") as readonly string[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
+
+  return (
+    <ToolPageShell
+      heroBackgroundAlt={t("heroVisualAlt")}
+      heroBackgroundImage="/tools/community-feedback-inbox-hero.webp"
+      heroVariant="immersive"
+      locale={locale}
+      spec={spec}
+    >
+      <ToolWorkspaceSection
+        badge={t("workspaceBadge")}
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+      >
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_420px] xl:items-start">
+          <CommunityFeedbackInbox />
+          <ToolImageVisual
+            alt={t("workspaceVisualAlt")}
+            src="/tools/community-feedback-inbox-workspace.webp"
+          />
+        </div>
+      </ToolWorkspaceSection>
+      <ToolSection heading={t("outputs")}>
+        <ToolCardGrid items={outputItems} columns="four" />
+      </ToolSection>
+      <ToolGuideSection
+        heading={t("supportHeading")}
+        visual={
+          <ToolImageVisual
+            alt={t("supportVisualAlt")}
+            src="/tools/community-feedback-inbox-value.webp"
+            wide
+          />
+        }
+      >
+        <ToolPlainTextGrid items={supportItems} />
+      </ToolGuideSection>
+      <ToolGuideSection
+        heading={t("boundaryHeading")}
+        reverse
+        visual={
+          <ToolImageVisual
+            alt={t("boundaryVisualAlt")}
+            src="/tools/community-feedback-inbox-support.webp"
+            wide
+          />
+        }
+      >
+        <ToolPlainTextGrid items={boundaryItems} />
+      </ToolGuideSection>
+      <ToolGuideSection
+        heading={t("resultUseHeading")}
+        visual={
+          <ToolImageVisual
+            alt={t("resultUseVisualAlt")}
+            src="/tools/community-feedback-inbox-use-case.webp"
+            wide
+          />
+        }
+      >
+        <ToolPlainTextGrid items={resultUseItems} />
+      </ToolGuideSection>
+      <ToolSection heading={t("whyTomakoHeading")}>
+        <ToolCardGrid items={whyTomakoItems} columns="four" />
+      </ToolSection>
+      <ToolGuideSection
+        heading={t("standardHeading")}
+        reverse
+        visual={
+          <ToolImageVisual
+            alt={t("standardVisualAlt")}
+            src="/tools/community-feedback-inbox-standard.webp"
+            wide
+          />
+        }
+      >
+        <ToolPlainTextGrid items={standardItems} />
+      </ToolGuideSection>
+      <ToolFaqSection heading={t("faq")} items={faqItems} />
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{
+          href: "/tools/user-interview-record-generator",
+          label: t("ctaPrimary"),
+        }}
+        secondary={{
+          href: "/tools/social-platform-asset-adapter",
+          label: t("ctaSecondary"),
+        }}
+      />
+    </ToolPageShell>
+  );
+}