@tomako/tools-runtime 0.1.0

package/src/features/tools/email-template-generator/widget/preview-panel.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import { CheckCircle2, Copy, Download, Loader2, RefreshCw, Send } from "lucide-react";
+
+import {
+    downloadTextFile
+} from "../../../../components/tools/workspace/tool-result-file-actions";
+import { Button } from "@tomako/ui/button";
+import { Field, Textarea } from "@tomako/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@tomako/ui/tabs";
+import type { useTranslations } from "../../../../i18n/client";
+import type { EmailTemplateResult } from "../../../../lib/tools/email-template-generator-schema";
+import { stringifyEmailTemplatePackage } from "../../../../lib/tools/email-template-generator-schema";
+
+import { ResultTextBlock } from "./result-text-block";
+import type { ErrorCategory, FormState, WidgetState } from "./types";
+
+type PreviewPanelProps = {
+  base: string;
+  busy: boolean;
+  copied: string | null;
+  form: FormState;
+  onCopyText: (key: string, value: string) => void;
+  onGenerate: () => void;
+  onRevise: (current: EmailTemplateResult, taskId: string) => void;
+  resultRef: React.RefObject<HTMLDivElement | null>;
+  revision: string;
+  setRevision: (value: string) => void;
+  state: WidgetState;
+  status: string;
+  t: ReturnType<typeof useTranslations>;
+  taskId: string | undefined;
+  result: EmailTemplateResult | undefined;
+};
+
+export function EmailPreviewPanel({
+  base,
+  busy,
+  copied,
+  form,
+  onCopyText,
+  onGenerate,
+  onRevise,
+  resultRef,
+  revision,
+  setRevision,
+  state,
+  status,
+  t,
+  taskId,
+  result,
+}: PreviewPanelProps) {
+  return (
+    <div
+      ref={resultRef}
+      className="min-w-0 scroll-mt-24 overflow-hidden rounded-[1.5rem] border border-[#D8D4CA] bg-white shadow-[0_16px_38px_rgba(17,17,17,0.05)]"
+    >
+      <div className="flex min-h-full flex-col p-5 md:p-6">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <p className="text-base font-semibold text-[#111111]">{t("previewTitle")}</p>
+            <p className="mt-1 text-sm leading-6 text-[#666666]">{t("previewHint")}</p>
+          </div>
+          <span className="rounded-full border border-[#D8D4CA] bg-[#F7F6F2] px-3 py-1 text-xs font-semibold text-[#555555]">
+            {state.phase === "running" ? status : state.phase === "done" ? t("previewReady") : t("previewDraft")}
+          </span>
+        </div>
+
+        {result ? (
+          <div className="mt-5 min-w-0">
+            <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2 text-sm font-semibold text-[#2F5E00]">
+                  <CheckCircle2 className="size-4" aria-hidden />
+                  {t("resultReady")}
+                </div>
+                <h3 className="mt-3 break-words text-2xl font-semibold text-[#111111]">{result.subject}</h3>
+                <p className="mt-2 max-w-3xl text-sm leading-6 text-[#555555]">{result.preheader}</p>
+              </div>
+              <div className="flex shrink-0 flex-wrap gap-2">
+                <Button type="button" variant="outline" onClick={() => void onCopyText("package", stringifyEmailTemplatePackage(result))}>
+                  <Copy className="size-4" aria-hidden />
+                  {copied === "package" ? t("copied") : t("copyPackage")}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() =>
+                    downloadTextFile({
+                      filename: `${base}-email-template.md`,
+                      text: stringifyEmailTemplatePackage(result),
+                      type: "text/plain;charset=utf-8",
+                    })
+                  }
+                >
+                  <Download className="size-4" aria-hidden />
+                  {t("downloadPackage")}
+                </Button>
+              </div>
+            </div>
+
+            <Tabs defaultValue="preview" className="mt-6 min-w-0">
+              <TabsList className="h-auto max-w-full flex-wrap justify-start">
+                <TabsTrigger value="preview">{t("tabs.preview")}</TabsTrigger>
+                <TabsTrigger value="mjml">MJML</TabsTrigger>
+                <TabsTrigger value="html">HTML</TabsTrigger>
+                <TabsTrigger value="plain">{t("tabs.plain")}</TabsTrigger>
+                <TabsTrigger value="handoff">{t("tabs.handoff")}</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="preview" className="mt-5">
+                <div className="grid min-w-0 gap-5 xl:grid-cols-[1.1fr_0.9fr]">
+                  <iframe
+                    title={t("htmlPreviewTitle")}
+                    srcDoc={result.html}
+                    sandbox=""
+                    className="h-[34rem] w-full rounded-[1rem] border border-[#E1DDD3] bg-white"
+                  />
+                  <div className="min-w-0 rounded-[1rem] border border-[#E1DDD3] bg-[#F7F6F2] p-4">
+                    <p className="text-sm font-semibold text-[#111111]">{t("sectionsTitle")}</p>
+                    <div className="mt-3 max-h-[31rem] space-y-3 overflow-auto pr-1">
+                      {result.editableSections.map((section) => (
+                        <article key={section.id} className="rounded-xl bg-white p-3">
+                          <p className="text-sm font-semibold text-[#111111]">{section.label}</p>
+                          {section.purpose ? (
+                            <p className="mt-1 text-xs leading-5 text-[#777777]">{section.purpose}</p>
+                          ) : null}
+                          <p className="mt-2 line-clamp-4 text-sm leading-6 text-[#444444]">{section.content}</p>
+                        </article>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="mjml" className="mt-5">
+                <div className="mb-3 flex flex-wrap gap-2">
+                  <Button type="button" variant="outline" onClick={() => void onCopyText("mjml", result.mjml)}>
+                    <Copy className="size-4" aria-hidden />
+                    {copied === "mjml" ? t("copied") : t("copyMjml")}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() =>
+                      downloadTextFile({
+                        filename: `${base}.mjml`,
+                        text: result.mjml,
+                        type: "text/plain;charset=utf-8",
+                      })
+                    }
+                  >
+                    <Download className="size-4" aria-hidden />
+                    {t("downloadMjml")}
+                  </Button>
+                </div>
+                <ResultTextBlock value={result.mjml} />
+              </TabsContent>
+
+              <TabsContent value="html" className="mt-5">
+                <div className="mb-3 flex flex-wrap gap-2">
+                  <Button type="button" variant="outline" onClick={() => void onCopyText("html", result.html)}>
+                    <Copy className="size-4" aria-hidden />
+                    {copied === "html" ? t("copied") : t("copyHtml")}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() =>
+                      downloadTextFile({
+                        filename: `${base}.html`,
+                        text: result.html,
+                        type: "text/html;charset=utf-8",
+                      })
+                    }
+                  >
+                    <Download className="size-4" aria-hidden />
+                    {t("downloadHtml")}
+                  </Button>
+                </div>
+                <ResultTextBlock value={result.html} />
+              </TabsContent>
+
+              <TabsContent value="plain" className="mt-5">
+                <div className="mb-3 flex flex-wrap gap-2">
+                  <Button type="button" variant="outline" onClick={() => void onCopyText("plain", result.plainText)}>
+                    <Copy className="size-4" aria-hidden />
+                    {copied === "plain" ? t("copied") : t("copyPlain")}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() =>
+                      downloadTextFile({
+                        filename: `${base}.txt`,
+                        text: result.plainText,
+                        type: "text/plain;charset=utf-8",
+                      })
+                    }
+                  >
+                    <Download className="size-4" aria-hidden />
+                    {t("downloadPlain")}
+                  </Button>
+                </div>
+                <ResultTextBlock value={result.plainText} />
+              </TabsContent>
+
+              <TabsContent value="handoff" className="mt-5">
+                <div className="grid gap-4 md:grid-cols-2">
+                  {[
+                    [t("handoff.variables"), result.variables.map((item) => `{{${item.key}}}: ${item.description || item.example || ""}`)],
+                    [t("handoff.compliance"), result.complianceNotes],
+                    [t("handoff.developer"), result.developerNotes],
+                    [t("handoff.accessibility"), result.accessibilityNotes],
+                    [t("handoff.render"), result.renderChecklist],
+                    [t("handoff.missing"), result.missingInfo],
+                  ].map(([title, items]) => (
+                    <article key={String(title)} className="rounded-[1rem] border border-[#E1DDD3] bg-[#F7F6F2] p-4">
+                      <p className="text-sm font-semibold text-[#111111]">{String(title)}</p>
+                      {(items as string[]).length ? (
+                        <ul className="mt-3 list-disc space-y-2 pl-5 text-sm leading-6 text-[#555555]">
+                          {(items as string[]).map((item) => (
+                            <li key={item}>{item}</li>
+                          ))}
+                        </ul>
+                      ) : (
+                        <p className="mt-3 text-sm text-[#777777]">{t("handoff.empty")}</p>
+                      )}
+                    </article>
+                  ))}
+                </div>
+              </TabsContent>
+            </Tabs>
+
+            {taskId ? (
+              <div className="mt-6 rounded-[1rem] border border-[#D8D4CA] bg-[#F7F6F2] p-4">
+                <Field label={t("revisionLabel")} hint={t("revisionHint")}>
+                  <Textarea
+                    rows={3}
+                    value={revision}
+                    placeholder={String(t.raw("revisionPlaceholder"))}
+                    onChange={(event) => setRevision(event.target.value)}
+                    disabled={busy}
+                  />
+                </Field>
+                <Button
+                  type="button"
+                  className="mt-3 w-full bg-[#111111] text-white shadow-none hover:bg-[#2A2A2A] md:w-auto"
+                  onClick={() => void onRevise(result, taskId)}
+                  disabled={busy}
+                >
+                  <Send className="size-4" aria-hidden />
+                  {t("sendRevision")}
+                </Button>
+              </div>
+            ) : null}
+          </div>
+        ) : state.phase === "submitting" || state.phase === "running" ? (
+          <div className="mt-5 flex min-h-[28rem] flex-1 items-center justify-center rounded-[1rem] border border-[#E1DDD3] bg-[#F7F6F2] p-6 text-center">
+            <div className="max-w-sm">
+              <span className="mx-auto flex size-11 items-center justify-center rounded-full bg-white text-[#111111] shadow-sm">
+                <Loader2 className="size-5 animate-spin" aria-hidden />
+              </span>
+              <p className="mt-4 text-lg font-semibold text-[#111111]">{t("runningTitle")}</p>
+              <p className="mt-2 text-sm leading-6 text-[#666666]">{t("runningHint")}</p>
+            </div>
+          </div>
+        ) : state.phase === "error" ? (
+          <div className="mt-5 flex min-h-[28rem] flex-1 items-center justify-center rounded-[1rem] border border-[#FFD2C2] bg-[#FFF4EC] p-6 text-center">
+            <div className="max-w-sm">
+              <p className="text-lg font-semibold text-[#8A2C16]">{t(`errors.${state.category as ErrorCategory}`)}</p>
+              <p className="mt-2 text-sm leading-6 text-[#7A4B3A]">{t("errors.recover")}</p>
+              <Button type="button" variant="outline" className="mt-5" onClick={() => void onGenerate()}>
+                <RefreshCw className="size-4" aria-hidden />
+                {t("retry")}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="mt-5 grid flex-1 gap-4 md:grid-cols-[0.92fr_1.08fr]">
+            <div className="min-w-0 rounded-[1rem] border border-[#E1DDD3] bg-[#F7F6F2] p-4">
+              <p className="text-sm font-semibold text-[#777777]">{t("previewInput")}</p>
+              <p className="mt-4 break-words text-2xl font-semibold text-[#111111]">
+                {form.productName || t("previewProductFallback")}
+              </p>
+              <p className="mt-2 text-sm font-semibold text-[#555555]">
+                {form.audience || t("previewAudienceFallback")}
+              </p>
+              <p className="mt-4 line-clamp-6 text-sm leading-6 text-[#555555]">
+                {form.brief || t("previewBriefFallback")}
+              </p>
+            </div>
+            <div className="min-w-0 rounded-[1rem] border border-[#E1DDD3] bg-white p-4">
+              <p className="text-sm font-semibold text-[#777777]">{t("previewOutput")}</p>
+              <div className="mt-4 space-y-3">
+                {(t.raw("previewItems") as string[]).map((item) => (
+                  <div key={item} className="rounded-xl border border-[#E1DDD3] bg-[#F7F6F2] px-4 py-3 text-sm font-semibold text-[#111111]">
+                    {item}
+                  </div>
+                ))}
+              </div>
+              <div className="mt-5 rounded-xl border border-dashed border-[#D8D4CA] px-4 py-3 text-sm leading-6 text-[#666666]">
+                {t("previewFooter")}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/features/tools/email-template-generator/widget/result-text-block.tsx

@@ -0,0 +1,7 @@
+export function ResultTextBlock({ value }: { value: string }) {
+  return (
+    <pre className="max-h-[34rem] overflow-auto rounded-[1rem] border border-[#E1DDD3] bg-[#111111] p-4 text-xs leading-5 text-[#F7F6F2]">
+      {value}
+    </pre>
+  );
+}

package/src/features/tools/email-template-generator/widget/types.ts

@@ -0,0 +1,24 @@
+import type {
+    EmailTemplateInput,
+    EmailTemplateLanguage,
+    EmailTemplateResult,
+    EmailTemplateScenario,
+    EmailTemplateTone,
+} from "../../../../lib/tools/email-template-generator-schema";
+
+export type WidgetState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "running"; status: string; taskId: string; previous?: EmailTemplateResult }
+  | { phase: "done"; data: EmailTemplateResult; taskId: string }
+  | { phase: "error"; category: ErrorCategory; taskId?: string; previous?: EmailTemplateResult };
+
+export type ErrorCategory = "submit" | "task" | "timeout" | "schema" | "invalid" | "generic";
+
+export type FormState = EmailTemplateInput;
+
+export type CopyMap = {
+  scenarios: Record<EmailTemplateScenario, string>;
+  tones: Record<EmailTemplateTone, string>;
+  languages: Record<EmailTemplateLanguage, string>;
+};

package/src/features/tools/gtm-readiness-checklist/gtm-readiness-checklist.container.tsx

@@ -0,0 +1,75 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { GtmReadinessChecklistWidget } from "./widget";
+
+import {
+    ToolBoundarySection,
+    ToolCardGrid,
+    ToolFaqSection,
+    ToolNumberedRows,
+    ToolSection,
+    ToolUseCasesBandSection,
+    type ToolBoundaryGroup,
+    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 GtmReadinessChecklistContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(
+    locale,
+    "toolsPages.gtmReadinessChecklist.guide",
+  );
+  return (
+    <ToolPageShell locale={locale} spec={spec}>
+      <ToolWorkspaceSection
+        heading={t("workspaceTitle")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+      >
+        <GtmReadinessChecklistWidget />
+      </ToolWorkspaceSection>
+      <ToolSection
+        heading={t("whatItChecksHeading")}
+        intro={t("whatItChecksIntro")}
+      >
+        <ToolCardGrid
+          items={t.raw("whatItChecksItems") as readonly ToolTextCard[]}
+          columns="three"
+        />
+      </ToolSection>
+      <ToolSection heading={t("howToUseHeading")} intro={t("howToUseIntro")}>
+        <ToolNumberedRows items={t.raw("howToUseSteps") as readonly string[]} />
+      </ToolSection>
+      <ToolSection heading={t("scoreHeading")} intro={t("scoreIntro")}>
+        <ToolCardGrid
+          items={t.raw("scoreItems") as readonly ToolTextCard[]}
+          columns="three"
+        />
+      </ToolSection>
+      <ToolUseCasesBandSection
+        heading={t("useCasesHeading")}
+        intro={t("useCasesIntro")}
+        items={t.raw("useCaseItems") as readonly string[]}
+      />
+      <ToolBoundarySection
+        heading={t("boundaryHeading")}
+        intro={t("boundaryIntro")}
+        groups={t.raw("boundaryGroups") as readonly ToolBoundaryGroup[]}
+      />
+      <ToolFaqSection
+        heading={t("faqHeading")}
+        items={t.raw("faqItems") as readonly ToolFaqItem[]}
+      />
+      <ToolCta
+        heading={t("ctaHeading")}
+        hint={t("ctaHint")}
+        primary={{ href: "#tool-workspace", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools/cold-start-channel-selector", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/gtm-readiness-checklist/gtm-readiness-checklist.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const gtmReadinessChecklistSpec: ToolSpec = {
+  slug: "gtm-readiness-checklist",
+  toolType: "analyzer",
+  seo: {
+    "publishedAt": "2026-06-01",
+    "updatedAt": "2026-08-04",
+    "readingTime": "4 min",
+    "featured": true,
+    "ogImage": "/tools/gtm-readiness-checklist-result-guidance.webp"
+  },
+  mcp: {"enabled":true},
+  widget: {"id":"gtm-readiness-checklist","mode":"custom"},
+};

package/src/features/tools/gtm-readiness-checklist/widget/gtm-readiness-checklist.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import { AlertCircle, BadgeCheck, CheckCircle2 } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { GTM_CHECKLIST_SECTIONS } from "../../../../lib/tools/gtm-checklist-structure";
+import {
+    gtmReadinessChecklistHandler,
+    type GtmReadinessResult,
+} from "../../../../services/tools/handlers/gtm-readiness-checklist";
+
+export function GtmReadinessChecklistWidget() {
+  const locale = useLocale();
+  const contentLocale = locale === "en" ? "en" : "zh";
+  const t = useTranslations("toolsPages.gtmReadinessChecklist.widget");
+  const [answers, setAnswers] = useState<Record<string, boolean>>({});
+
+  const result = useMemo((): GtmReadinessResult => {
+    const output = gtmReadinessChecklistHandler.execute({
+      answers,
+      locale: contentLocale,
+    });
+    if (output instanceof Promise) {
+      throw new Error("GTM checklist handler must be synchronous in the widget");
+    }
+    return output;
+  }, [answers, contentLocale]);
+
+  const itemLabels = useTranslations("toolsPages.gtmReadinessChecklist.items");
+
+  function toggle(key: string) {
+    setAnswers((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  }
+
+  return (
+    <section className="overflow-hidden rounded-[1.5rem] border border-[#E8E4DB] bg-white shadow-[0_18px_50px_rgba(17,17,17,0.06)]">
+      <div className="grid lg:grid-cols-[1.12fr_0.88fr]">
+        <div className="bg-white p-5 md:p-7">
+          <p className="mb-6 max-w-2xl text-sm leading-6 text-[#555555]">{t("howToUse")}</p>
+          <div className="grid gap-5">
+            {GTM_CHECKLIST_SECTIONS.map((section) => (
+              <div key={section.id} className="rounded-[1.25rem] border border-[#E8E4DB] bg-[#F7F6F2] p-4">
+                <h3 className="mb-3 flex items-center gap-2 text-lg font-semibold text-[#111111]">
+                  <BadgeCheck aria-hidden className="size-5 text-[#075DF5]" />
+                  {t(`sections.${section.sectionKey}`)}
+                </h3>
+                <ul className="grid gap-2">
+                  {section.keys.map((key) => {
+                    const checked = answers[key] === true;
+                    return (
+                      <li key={key}>
+                        <label
+                          className={`flex cursor-pointer items-start gap-3 rounded-2xl border px-3 py-3 transition ${
+                            checked
+                              ? "border-[#B7FF3E] bg-[#F7FFE9]"
+                              : "border-[#E8E4DB] bg-white hover:border-[#D8D4CA]"
+                          }`}
+                        >
+                          <input
+                            checked={checked}
+                            className="mt-1 size-4 shrink-0 accent-[#111111]"
+                            onChange={() => toggle(key)}
+                            type="checkbox"
+                          />
+                          <span className="text-sm leading-6 text-[#3D3D3D]">
+                            {itemLabels(key)}
+                          </span>
+                        </label>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <aside className="bg-[#DAE3F6] p-5 md:p-7">
+          <div className="sticky top-6 rounded-[1.5rem] border border-white/70 bg-white/88 p-5 shadow-[0_24px_70px_rgba(17,17,17,0.12)] backdrop-blur md:p-6">
+            <p className="inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1.5 text-xs font-semibold text-white">
+              <CheckCircle2 aria-hidden className="size-4" />
+              {t("score")}
+            </p>
+            <div className="mt-6 flex items-end gap-2">
+              <span className="text-6xl font-semibold leading-none text-[#111111]">
+                {result.score}
+              </span>
+              <span className="pb-2 text-xl font-semibold text-[#555555]">%</span>
+            </div>
+            <div className="mt-5 h-3 overflow-hidden rounded-full bg-[#E8E4DB]">
+              <div
+                className="h-full rounded-full bg-[#B7FF3E]"
+                style={{ width: `${result.score}%` }}
+              />
+            </div>
+            <p className="mt-4 text-base font-semibold text-[#111111]">{result.tierLabel}</p>
+            <p className="mt-2 text-sm leading-6 text-[#555555]">{result.recommendation}</p>
+            <div className="mt-6 rounded-[1.25rem] border border-[#E8E4DB] bg-[#F7F6F2] p-4">
+              <p className="flex items-center gap-2 text-sm font-semibold text-[#111111]">
+                <AlertCircle aria-hidden className="size-4 text-[#075DF5]" />
+                {result.gaps.length > 0 ? t("gaps") : t("allDone")}
+              </p>
+              {result.gaps.length > 0 ? (
+                <ul className="mt-3 grid gap-2 text-sm leading-6 text-[#555555]">
+                  {result.gaps.map((gap) => (
+                    <li key={gap.key} className="rounded-2xl bg-white px-3 py-2">
+                      {gap.label}
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </div>
+          </div>
+        </aside>
+      </div>
+    </section>
+  );
+}

package/src/features/tools/gtm-readiness-checklist/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const GtmReadinessChecklistWidget = dynamic(() =>
+  import("./gtm-readiness-checklist").then((module) => module.GtmReadinessChecklistWidget),
+);