@tomako/tools-runtime 0.1.5 → 0.1.7

package/src/features/tools/disclaimer-generator/disclaimer-generator.package.ts

@@ -40,9 +40,9 @@ export const disclaimerGeneratorPackage: ToolPackage = {
     },
   },
   copy: {
-    title: t("Disclaimer Generator", "免责声明生成器", "免責聲明產生器"),
+    title: t("Website Disclaimer Generator", "网站免责声明生成器", "網站免責聲明產生器"),
     description: t(
-      "Create a tailored website, affiliate, review, or professional-information disclaimer draft with placement guidance, missing facts, risk flags, and a human review checklist.",
+      "Draft a website, affiliate, review, or professional-information disclaimer with placement guidance, missing facts, risk flags, and a review checklist.",
       "根据业务和发布场景生成网站、联盟、评测或专业信息免责声明草案，并提供放置建议、缺失信息、风险提示与人工复核清单。",
       "依照業務與發布情境產生網站、聯盟、評測或專業資訊免責聲明草案，並提供放置建議、缺漏資訊、風險提示與人工複核清單。",
     ),
@@ -252,7 +252,7 @@ export const disclaimerGeneratorPackage: ToolPackage = {
   },
   page: {
     workspace: {
-      heading: t("Create a disclaimer you can review", "生成一份便于复核的免责声明", "產生一份便於複核的免責聲明"),
+      heading: t("Website disclaimer generator with review guidance", "网站免责声明生成器：草案与复核指引", "網站免責聲明產生器：草案與複核指引"),
       hint: t(
         "Describe your content and where it appears. Get a copyable draft, suggested placement, gaps to confirm, and a review checklist before you publish.",
         "描述你的内容和发布位置，获得可复制草案、建议放置位置、待确认缺口和发布前复核清单。",

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/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/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 {

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

@@ -3,6 +3,7 @@
 import { ChevronDown, FileImage } from "lucide-react";
 import {
     useMemo,
+    useEffect,
     useRef,
     useState,
     type ChangeEvent,
@@ -22,8 +23,10 @@ import {
     PRODUCT_POSTER_STYLES,
     productPosterGeneratorInputSchema,
     type ProductPosterFormat,
+    type ProductPosterGeneratorInput,
     type ProductPosterStyle,
 } from "../../../../lib/tools/product-poster-generator-schema";
+import { downloadBlob } from "../../../../lib/file/download";
 import { cn } from "@tomako/ui/cn";
 import {
     fetchProductPosterGenerationTask,
@@ -50,6 +53,11 @@ import {
     toolTextareaClass,
     type ToolLoadingStep,
 } from "../../../../components/tools/workspace";
+import {
+    clearToolTaskRecovery,
+    persistToolTaskRecovery,
+    readToolTaskRecovery,
+} from "../../../../components/tools/engine/task-recovery";
 import {
     MAX_TASK_POLL_ATTEMPTS,
     POSTER_FORMAT_OPTIONS,
@@ -70,6 +78,7 @@ import {
     getPosterIntentId,
     getPosterResultError,
     getSafeErrorMessage,
+    fetchProductPosterPng,
     loadingProgress,
     loadingStepIndex,
     readImageAsDataUrl,
@@ -86,6 +95,13 @@ import type {
     ResultState,
 } from "./types";
 
+const RECOVERY_SLUG = "product-poster-generator";
+
+type PosterTaskRecoveryInput = {
+  input: ProductPosterGeneratorInput;
+  settingsSummary: string;
+};
+
 export function ProductPosterGenerator() {
   const locale = useLocale();
   const taskLocale = locale as AppLocale;
@@ -99,6 +115,8 @@ export function ProductPosterGenerator() {
   const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
   const [formError, setFormError] = useState<string | null>(null);
   const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+  const [downloadError, setDownloadError] = useState<string | null>(null);
 
   const formatLabels = t.raw("formatLabels") as Record<ProductPosterFormat, string>;
   const styleLabels = t.raw("styleLabels") as Record<ProductPosterStyle, string>;
@@ -158,6 +176,39 @@ export function ProductPosterGenerator() {
 
   const busy = result.phase === "submitting" || result.phase === "polling";
 
+  useEffect(() => {
+    const recovered = readToolTaskRecovery<PosterTaskRecoveryInput>(RECOVERY_SLUG, {
+      parseInput: (value) => {
+        if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+        const candidate = value as Partial<PosterTaskRecoveryInput>;
+        const parsed = productPosterGeneratorInputSchema.safeParse(candidate.input);
+        if (!parsed.success || typeof candidate.settingsSummary !== "string") return null;
+        return { input: parsed.data, settingsSummary: candidate.settingsSummary };
+      },
+    });
+    if (!recovered) return;
+    const generationId = generationSeqRef.current + 1;
+    generationSeqRef.current = generationId;
+    setForm({
+      ...defaultForm,
+      ...recovered.input.input,
+      screenshotNames: [],
+      screenshotDataUrls: [],
+      logoName: undefined,
+      logoDataUrl: undefined,
+    });
+    void watchPosterTask(
+      recovered.taskId,
+      recovered.input.input,
+      recovered.input.settingsSummary,
+      generationId,
+      recovered.startedAtMs,
+      "RESTORING",
+    );
+    // Restore only once for this mounted tool route.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   function scrollToResult() {
     window.requestAnimationFrame(() => {
       resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -289,6 +340,7 @@ export function ProductPosterGenerator() {
     }
 
     setFormError(null);
+    setDownloadError(null);
     setFieldErrors({});
     const generationId = generationSeqRef.current + 1;
     generationSeqRef.current = generationId;
@@ -320,9 +372,39 @@ export function ProductPosterGenerator() {
     if (generationSeqRef.current !== generationId) return;
 
     const taskId = submitted.taskId;
-    setResult({ phase: "polling", taskId, status: submitted.status });
+    const startedAtMs = Date.now();
+    persistToolTaskRecovery<PosterTaskRecoveryInput>(
+      RECOVERY_SLUG,
+      taskId,
+      { input: posterInput, settingsSummary: posterSettingsSummary },
+      startedAtMs,
+    );
+    await watchPosterTask(
+      taskId,
+      posterInput,
+      posterSettingsSummary,
+      generationId,
+      startedAtMs,
+      submitted.status,
+    );
+  }
 
-    for (let attempt = 0; attempt < MAX_TASK_POLL_ATTEMPTS; attempt += 1) {
+  async function watchPosterTask(
+    taskId: string,
+    posterInput: ProductPosterGeneratorInput,
+    posterSettingsSummary: string,
+    generationId: number,
+    startedAtMs: number,
+    initialStatus: string,
+  ) {
+    setResult({ phase: "polling", taskId, status: initialStatus });
+    const elapsedAttempts = Math.max(
+      0,
+      Math.floor((Date.now() - startedAtMs) / TASK_POLL_INTERVAL_MS),
+    );
+    const remainingAttempts = Math.max(1, MAX_TASK_POLL_ATTEMPTS - elapsedAttempts);
+
+    for (let attempt = 0; attempt < remainingAttempts; attempt += 1) {
       try {
         const task = await fetchProductPosterGenerationTask(taskId);
         if (generationSeqRef.current !== generationId) return;
@@ -376,24 +458,40 @@ export function ProductPosterGenerator() {
     }
   }
 
-  function downloadPosterPng() {
-    if (result.phase !== "ready") return;
-    const link = document.createElement("a");
-    link.href = result.data.imageUrl;
-    link.download = `${result.data.fileBaseName}-poster.webp`;
-    link.target = "_blank";
-    link.rel = "noreferrer";
-    link.click();
+  async function downloadPosterPng() {
+    if (result.phase !== "ready" || downloading) return;
+    const generationId = generationSeqRef.current;
+    setDownloading(true);
+    setDownloadError(null);
+    try {
+      const file = await fetchProductPosterPng(
+        result.data.imageUrl,
+        result.data.fileBaseName,
+      );
+      if (generationSeqRef.current !== generationId) return;
+      downloadBlob(file.blob, file.fileName);
+    } catch {
+      if (generationSeqRef.current === generationId) {
+        setDownloadError(t("errors.downloadFailed"));
+      }
+    } finally {
+      if (generationSeqRef.current === generationId) {
+        setDownloading(false);
+      }
+    }
   }
 
   function reset() {
     generationSeqRef.current += 1;
+    clearToolTaskRecovery(RECOVERY_SLUG);
     if (logoInputRef.current) logoInputRef.current.value = "";
     if (screenshotInputRef.current) screenshotInputRef.current.value = "";
     setForm(defaultForm);
     setResult({ phase: "idle" });
     setFieldErrors({});
     setFormError(null);
+    setDownloadError(null);
+    setDownloading(false);
     setAdvancedOpen(false);
   }
 
@@ -599,14 +697,16 @@ export function ProductPosterGenerator() {
               body={result.data.summary ?? t("readyHint")}
               actions={
                 <ToolResultActions
-                  downloadLabel={t("downloadPng")}
+                  downloadLabel={downloading ? t("loadingSteps.finish") : t("downloadPng")}
                   resetLabel={t("reset")}
-                  onDownload={downloadPosterPng}
+                  onDownload={() => void downloadPosterPng()}
                   onReset={reset}
                 />
               }
             />
 
+            {downloadError ? <ToolErrorBanner>{downloadError}</ToolErrorBanner> : null}
+
             <figure className="flex min-h-[28rem] items-center justify-center overflow-hidden rounded-[1.25rem] border border-[#E4E9F1] bg-white p-3">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img