@tomako/tools-runtime 0.1.4 → 0.1.6

package/src/features/tools/email-template-generator/email-template-generator.container.tsx

@@ -3,216 +3,88 @@ import { createToolGuideTranslator } from "../shared/tool-message-translator";
 import { EmailTemplateGenerator } from "./widget";
 
 import {
-    ToolCardGrid,
-    ToolFaqSection,
+  ToolBoundarySection,
+  ToolFaqSection,
+  ToolSection,
+  ToolStandardsSection,
+  ToolTextRows,
+  ToolUseCasesSection,
+  ToolValueSection,
+  type ToolBoundaryGroup,
+  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";
 
-type TextCard = {
-  title: string;
-  body: string;
-};
-
-type BoundaryGroup = {
-  title: string;
-  items: readonly string[];
-};
-
-type FaqItem = {
-  question: string;
-  answer: string;
-};
-
-function OutputSection({
-  heading,
-  intro,
-  items,
-  visualAlt,
-}: {
-  heading: string;
-  intro: string;
-  items: readonly TextCard[];
-  visualAlt: string;
-}) {
-  return (
-    <section className="border-t border-[#E1DDD3] py-14 md:py-16">
-      <div className="grid gap-8 md:grid-cols-[0.92fr_1.08fr] md:items-center">
-        <div>
-          <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
-            {heading}
-          </h2>
-          <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
-        </div>
-        <ToolImageVisual src="/tools/email-template-generator-value.webp" alt={visualAlt} wide />
-      </div>
-      <div className="mt-8">
-        <ToolCardGrid items={items} />
-      </div>
-    </section>
-  );
-}
-
-function StandardsSection({
-  heading,
-  intro,
-  items,
-}: {
-  heading: string;
-  intro: string;
-  items: readonly TextCard[];
-}) {
-  return (
-    <section className="border-t border-[#E1DDD3] py-14 md:py-16">
-      <div className="max-w-3xl">
-        <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
-          {heading}
-        </h2>
-        <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
-      </div>
-      <div className="mt-7">
-        <ToolCardGrid items={items} />
-      </div>
-    </section>
-  );
-}
-
-function BoundarySection({
-  heading,
-  intro,
-  groups,
-  visualAlt,
-}: {
-  heading: string;
-  intro: string;
-  groups: readonly BoundaryGroup[];
-  visualAlt: string;
-}) {
-  return (
-    <section className="grid gap-8 border-t border-[#E1DDD3] py-14 md:grid-cols-[0.98fr_1.02fr] md:items-center md:py-16">
-      <ToolImageVisual src="/tools/email-template-generator-support.webp" alt={visualAlt} />
-      <div>
-        <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
-          {heading}
-        </h2>
-        <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
-        <div className="mt-6 grid gap-3">
-          {groups.map((group) => (
-            <article
-              key={group.title}
-              className="rounded-[1.25rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_12px_28px_rgba(17,17,17,0.05)]"
-            >
-              <h3 className="text-base font-semibold leading-tight text-[#111111]">
-                {group.title}
-              </h3>
-              <ul className="mt-3 list-disc space-y-2 pl-5 text-sm leading-6 text-[#555555]">
-                {group.items.map((item) => (
-                  <li key={item}>{item}</li>
-                ))}
-              </ul>
-            </article>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function GuidanceSection({
-  heading,
-  intro,
-  items,
-  visualAlt,
-}: {
-  heading: string;
-  intro: string;
-  items: readonly string[];
-  visualAlt: string;
-}) {
-  return (
-    <section className="grid gap-8 border-t border-[#E1DDD3] py-14 md:grid-cols-[1fr_1fr] md:items-center md:py-16">
-      <div>
-        <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
-          {heading}
-        </h2>
-        <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
-        <div className="mt-6 space-y-4">
-          {items.map((item) => (
-            <p key={item} className="text-base leading-7 text-[#3D3D3D]">
-              {item}
-            </p>
-          ))}
-        </div>
-      </div>
-      <ToolImageVisual src="/tools/email-template-generator-export.webp" alt={visualAlt} />
-    </section>
-  );
-}
-
 export async function EmailTemplateGeneratorContainer({ locale, spec }: ToolPageProps) {
   const t = await createToolGuideTranslator(locale, "toolsPages.emailTemplateGenerator.guide");
-  const outputItems = t.raw("outputItems") as readonly TextCard[];
-  const standardsItems = t.raw("standardsItems") as readonly TextCard[];
-  const boundaryGroups = t.raw("boundaryGroups") as readonly BoundaryGroup[];
+  const outputItems = t.raw("outputItems") as readonly ToolTextCard[];
+  const standardsItems = t.raw("standardsItems") as readonly ToolTextCard[];
+  const boundaryGroups = t.raw("boundaryGroups") as readonly ToolBoundaryGroup[];
   const guidance = t.raw("guidanceItems") as readonly string[];
-  const useCases = t.raw("useCaseItems") as readonly TextCard[];
-  const faqItems = t.raw("faqItems") as readonly FaqItem[];
+  const useCases = t.raw("useCaseItems") as readonly ToolTextCard[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
 
   return (
-    <ToolPageShell
-      locale={locale}
-      spec={spec}
-      heroVariant="immersive"
-      heroBackgroundImage="/tools/email-template-generator-hero.webp"
-      heroBackgroundAlt={t("heroImageAlt")}
-    >
+    <ToolPageShell locale={locale} spec={spec} showDefaultHeader={false}>
       <ToolWorkspaceSection
         heading={t("workspaceHeading")}
         hint={t("workspaceHint")}
+        headingLevel="h1"
       >
         <EmailTemplateGenerator />
       </ToolWorkspaceSection>
 
-      <OutputSection
+      <ToolValueSection
         heading={t("outputs")}
         intro={t("outputsIntro")}
         items={outputItems}
-        visualAlt={t("valueVisualAlt")}
+        visual={
+          <ToolImageVisual
+            src="/tools/email-template-generator-value.webp"
+            alt={t("valueVisualAlt")}
+            wide
+          />
+        }
       />
 
-      <StandardsSection
+      <ToolStandardsSection
         heading={t("standards")}
         intro={t("standardsIntro")}
         items={standardsItems}
       />
 
-      <BoundarySection
+      <ToolBoundarySection
         heading={t("boundary")}
         intro={t("boundaryIntro")}
         groups={boundaryGroups}
-        visualAlt={t("supportVisualAlt")}
+        reverse
+        visual={
+          <ToolImageVisual
+            src="/tools/email-template-generator-support.webp"
+            alt={t("supportVisualAlt")}
+          />
+        }
       />
 
-      <GuidanceSection
+      <ToolSection
         heading={t("guidance")}
         intro={t("guidanceIntro")}
-        items={guidance}
-        visualAlt={t("exportVisualAlt")}
-      />
-
-      <section className="border-t border-[#E1DDD3] py-14 md:py-16">
-        <h2 className="text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
-          {t("useCases")}
-        </h2>
-        <div className="mt-7">
-          <ToolCardGrid items={useCases} />
-        </div>
-      </section>
+        visual={
+          <ToolImageVisual
+            src="/tools/email-template-generator-export.webp"
+            alt={t("exportVisualAlt")}
+          />
+        }
+      >
+        <ToolTextRows items={guidance} />
+      </ToolSection>
 
+      <ToolUseCasesSection heading={t("useCases")} items={useCases} />
       <ToolFaqSection heading={t("faq")} items={faqItems} />
-
       <ToolCta
         heading={t("ctaTitle")}
         hint={t("ctaHint")}

package/src/features/tools/email-template-generator/email-template-generator.spec.ts

@@ -5,7 +5,7 @@ export const emailTemplateGeneratorSpec: ToolSpec = {
   toolType: "generator",
   seo: {
     "publishedAt": "2026-06-29",
-    "updatedAt": "2026-06-29",
+    "updatedAt": "2026-08-30",
     "readingTime": "6 min",
     "featured": false,
     "ogImage": "/tools/email-template-generator-hero.webp"

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

@@ -1,9 +1,13 @@
 "use client";
 
 import { ChevronDown, Loader2 } from "lucide-react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+  persistToolTaskRecovery,
+  readToolTaskRecovery,
+} from "../../../../components/tools/engine/task-recovery";
 import { copyTextToClipboard } from "../../../../components/tools/workspace/tool-result-file-actions";
 import { Button } from "@tomako/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@tomako/ui/collapsible";
@@ -38,6 +42,8 @@ import { defaultForm, fileBase, isPlaceholder, wait } from "./helpers";
 import { EmailPreviewPanel } from "./preview-panel";
 import type { CopyMap, ErrorCategory, FormState, WidgetState } from "./types";
 
+const RECOVERY_SLUG = "email-template-generator";
+
 export function EmailTemplateGenerator() {
   const t = useTranslations("toolsPages.emailTemplateGenerator.widget");
   const locale = useLocale() as AppLocale;
@@ -76,8 +82,17 @@ export function EmailTemplateGenerator() {
     setState({ phase: "error", category, taskId, previous });
   }
 
-  function startWatch(taskId: string, previous?: EmailTemplateResult) {
-    setState({ phase: "running", status: "PENDING", taskId, previous });
+  function startWatch(
+    taskId: string,
+    previous?: EmailTemplateResult,
+    startedAtMs?: number,
+  ) {
+    setState({
+      phase: "running",
+      status: startedAtMs ? "RESTORING" : "PENDING",
+      taskId,
+      previous,
+    });
     void wait(80).then(() => {
       resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
     });
@@ -103,10 +118,26 @@ export function EmailTemplateGenerator() {
       {
         pollIntervalMs: 3500,
         graceWindowMs: 300_000,
+        startedAtMs,
       },
     );
   }
 
+  useEffect(() => {
+    const recovered = readToolTaskRecovery(RECOVERY_SLUG, {
+      parseInput: (value) => {
+        const parsed = emailTemplateInputSchema.safeParse(value);
+        return parsed.success ? parsed.data : null;
+      },
+    });
+    if (!recovered) return;
+    setForm(recovered.input);
+    settledRef.current = false;
+    startWatch(recovered.taskId, undefined, recovered.startedAtMs);
+    // Restore only once for this mounted tool route.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [taskWatch]);
+
   function validateInput(): EmailTemplateInput | null {
     const parsed = emailTemplateInputSchema.safeParse(form);
     if (!parsed.success || isPlaceholder(form.productName) || isPlaceholder(form.brief)) {
@@ -126,7 +157,9 @@ export function EmailTemplateGenerator() {
 
     try {
       const submitted = await submitEmailTemplate(parsed, locale);
-      startWatch(submitted.taskId);
+      const startedAtMs = Date.now();
+      persistToolTaskRecovery(RECOVERY_SLUG, submitted.taskId, parsed, startedAtMs);
+      startWatch(submitted.taskId, undefined, startedAtMs);
     } catch {
       finishError("submit");
     }

package/src/features/tools/package/to-tool-module.ts

@@ -1,4 +1,6 @@
 import type { ToolModule } from "../types";
+import type { AppLocale } from "../../../i18n/locale";
+import { pickL10n } from "./l10n";
 import { loadToolPackage } from "./package-loaders";
 import { createPackageContainer } from "./package-container";
 import { createPackageToolSpec } from "./to-tool-spec";
@@ -18,3 +20,16 @@ export async function loadPackageToolModule(
   const pkg = await loadToolPackage(slug);
   return pkg ? createPackageToolModule(pkg) : undefined;
 }
+
+/** Package FAQ data lives beside the package page, not in legacy toolsPages messages. */
+export async function loadPackageToolFaqItems(
+  slug: string,
+  locale: AppLocale,
+): Promise<Array<{ question: string; answer: string }> | undefined> {
+  const pkg = await loadToolPackage(slug);
+  if (!pkg) return undefined;
+  return pkg.page.faq.map((item) => ({
+    question: pickL10n(item.question, locale),
+    answer: pickL10n(item.answer, locale),
+  }));
+}

package/src/features/tools/product-name-generator/product-name-generator.spec.ts

@@ -5,7 +5,7 @@ export const productNameGeneratorSpec: ToolSpec = {
   toolType: "generator",
   seo: {
     "publishedAt": "2026-06-25",
-    "updatedAt": "2026-08-04",
+    "updatedAt": "2026-08-30",
     "readingTime": "6 min",
     "featured": true,
     "ogImage": "/tools/product-name-generator-section-primary-8bit-v2.webp",

package/src/features/tools/product-name-generator/widget/product-name-generator.tsx

@@ -39,6 +39,11 @@ import { ChevronDown, Lightbulb } from "lucide-react";
 import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
 
 import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+  clearToolTaskRecovery,
+  persistToolTaskRecovery,
+  readToolTaskRecovery,
+} from "../../../../components/tools/engine/task-recovery";
 import {
     ToolActionBar,
     ToolEmptyPanel,
@@ -80,6 +85,8 @@ import type {
     ScreenState,
 } from "./types";
 
+const RECOVERY_SLUG = "product-name-generator";
+
 export function ProductNameGenerator() {
   const locale = useLocale();
   const t = useTranslations("toolsPages.productNameGenerator.widget");
@@ -111,6 +118,21 @@ export function ProductNameGenerator() {
     };
   }, [screenTaskWatch]);
 
+  useEffect(() => {
+    const recovered = readToolTaskRecovery(RECOVERY_SLUG, {
+      parseInput: (value) => {
+        const parsed = productNameInputSchema.safeParse(value);
+        return parsed.success ? parsed.data : null;
+      },
+    });
+    if (!recovered) return;
+    setForm(recovered.input);
+    activeScreenTaskIdRef.current = recovered.taskId;
+    watchScreenTask(recovered.taskId, "RESTORING", recovered.startedAtMs);
+    // Restore only once for this mounted tool route.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenTaskWatch]);
+
   const copy = useMemo(
     () =>
       ({
@@ -320,6 +342,40 @@ export function ProductNameGenerator() {
     };
   }
 
+  function watchScreenTask(
+    taskId: string,
+    status: string,
+    startedAtMs?: number,
+  ) {
+    activeScreenTaskIdRef.current = taskId;
+    setScreenState({ phase: "loading", status, taskId });
+    screenTaskWatch.start(
+      taskId,
+      pollScreenOnce,
+      {
+        onStatus: (nextStatus) => {
+          setScreenState({ phase: "loading", status: nextStatus, taskId });
+        },
+        onSuccess: (data) => {
+          setScreenState({ phase: "done", data });
+          setDetailStates({});
+        },
+        onError: (category) => {
+          setScreenState({
+            phase: "error",
+            message:
+              category === "schema"
+                ? t("errors.invalidResult")
+                : category === "timeout"
+                  ? t("errors.noResult")
+                  : t("errors.agent"),
+          });
+        },
+      },
+      { graceWindowMs: 300_000, startedAtMs },
+    );
+  }
+
   async function generateWithAgent() {
     const validatedForm = validateForm();
     if (!validatedForm || !canSubmit) return;
@@ -337,33 +393,9 @@ export function ProductNameGenerator() {
         locale,
       );
       console.info("[workspace-tool-qa] product-name-generator", taskId);
-      activeScreenTaskIdRef.current = taskId;
-      setScreenState({ phase: "loading", status, taskId });
-      screenTaskWatch.start(
-        taskId,
-        pollScreenOnce,
-        {
-          onStatus: (nextStatus) => {
-            setScreenState({ phase: "loading", status: nextStatus, taskId });
-          },
-          onSuccess: (data) => {
-            setScreenState({ phase: "done", data });
-            setDetailStates({});
-          },
-          onError: (category) => {
-            setScreenState({
-              phase: "error",
-              message:
-                category === "schema"
-                  ? t("errors.invalidResult")
-                  : category === "timeout"
-                    ? t("errors.noResult")
-                    : t("errors.agent"),
-            });
-          },
-        },
-        { graceWindowMs: 300_000 },
-      );
+      const startedAtMs = Date.now();
+      persistToolTaskRecovery(RECOVERY_SLUG, taskId, validatedForm, startedAtMs);
+      watchScreenTask(taskId, status, startedAtMs);
     } catch (err) {
       setScreenState({ phase: "error", message: formatAgentError(err) });
     }
@@ -460,6 +492,7 @@ export function ProductNameGenerator() {
   function reset() {
     screenTaskWatch.stop();
     activeScreenTaskIdRef.current = null;
+    clearToolTaskRecovery(RECOVERY_SLUG);
     setForm(defaultForm);
     setScreenState({ phase: "idle" });
     setDetailStates({});

package/src/features/tools/product-poster-generator/product-poster-generator.spec.ts

@@ -6,7 +6,7 @@ export const productPosterGeneratorSpec: ToolSpec = {
   riskLevel: "medium",
   seo: {
     "publishedAt": "2026-06-29",
-    "updatedAt": "2026-07-13",
+    "updatedAt": "2026-08-30",
     "readingTime": "6 min",
     "featured": false,
     "ogImage": "/tools/product-poster-generator-section-primary-8bit-v2.webp"

package/src/features/tools/product-poster-generator/widget/constants.ts

@@ -122,4 +122,6 @@ export const BRAND_COLOR_PRESETS: readonly BrandColorPreset[] = [
 ] as const;
 
 export const TASK_POLL_INTERVAL_MS = 2500;
-export const MAX_TASK_POLL_ATTEMPTS = 120;
+// Match the Portal STREAMING timeout. The previous 5-minute client deadline
+// abandoned valid image tasks while the server still allowed them to finish.
+export const MAX_TASK_POLL_ATTEMPTS = 240;

package/src/features/tools/product-poster-generator/widget/helpers.test.ts

@@ -0,0 +1,51 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { fetchProductPosterPng } from "./helpers";
+
+test("fetchProductPosterPng fetches through the image proxy and returns a .png download", async () => {
+  let requestedUrl = "";
+  let requestedInit: RequestInit | undefined;
+  const fetcher = async (input: RequestInfo | URL, init?: RequestInit) => {
+    requestedUrl = String(input);
+    requestedInit = init;
+    return new Response(new Uint8Array([137, 80, 78, 71]), {
+      status: 200,
+      headers: { "content-type": "image/png" },
+    });
+  };
+
+  const file = await fetchProductPosterPng(
+    "https://cdn.example.com/generated/poster.png",
+    "example-product",
+    fetcher,
+  );
+
+  assert.equal(
+    requestedUrl,
+    "/tools-api/image-download?url=https%3A%2F%2Fcdn.example.com%2Fgenerated%2Fposter.png",
+  );
+  assert.equal(requestedInit?.cache, "no-store");
+  assert.equal(file.fileName, "example-product-poster.png");
+  assert.equal(file.blob.type, "image/png");
+  assert.equal(file.blob.size, 4);
+});
+
+test("fetchProductPosterPng rejects failed or non-PNG responses", async () => {
+  await assert.rejects(
+    fetchProductPosterPng("https://cdn.example.com/poster.png", "poster", async () =>
+      new Response(null, { status: 502 }),
+    ),
+    /Poster download failed: 502/,
+  );
+
+  await assert.rejects(
+    fetchProductPosterPng("https://cdn.example.com/poster.webp", "poster", async () =>
+      new Response(new Uint8Array([1]), {
+        status: 200,
+        headers: { "content-type": "image/webp" },
+      }),
+    ),
+    /Poster download returned image\/webp/,
+  );
+});

package/src/features/tools/product-poster-generator/widget/helpers.ts

@@ -5,6 +5,7 @@ import type {
     ProductPosterGeneratorInput,
     ProductPosterScene,
 } from "../../../../lib/tools/product-poster-generator-schema";
+import { imageDownloadUrl } from "../../../../lib/tools/image-download";
 
 import { BRAND_COLOR_PRESETS, POSTER_INTENT_OPTIONS } from "./constants";
 import type {
@@ -65,6 +66,32 @@ export function slugifyFileName(value: string) {
   );
 }
 
+export async function fetchProductPosterPng(
+  imageUrl: string,
+  fileBaseName: string,
+  fetcher: typeof fetch = fetch,
+) {
+  const response = await fetcher(imageDownloadUrl(imageUrl), { cache: "no-store" });
+  if (!response.ok) {
+    throw new Error(`Poster download failed: ${response.status}`);
+  }
+
+  const contentType = response.headers.get("content-type")?.toLowerCase() ?? "";
+  if (!contentType.startsWith("image/png")) {
+    throw new Error(`Poster download returned ${contentType || "an unknown content type"}`);
+  }
+
+  const blob = await response.blob();
+  if (blob.size === 0) {
+    throw new Error("Poster download returned an empty PNG");
+  }
+
+  return {
+    blob,
+    fileName: `${fileBaseName}-poster.png`,
+  };
+}
+
 export function sizeToDimensions(size: string) {
   const [width, height] = size.split("x").map((part) => Number(part));
   return {