@tomako/tools-runtime 0.1.5 → 0.1.6

package/src/features/tools/app-store-screenshot-generator/widget/generation.ts

@@ -33,16 +33,30 @@ export async function generateStoreAssets(
   locale: AppLocale,
   onProgress: (progress: GeneratedStoreAssetsResult) => void,
   onPlanning: () => void,
+  options: {
+    taskId?: string;
+    startedAtMs?: number;
+    onTaskSubmitted?: (taskId: string, startedAtMs: number) => void;
+  } = {},
 ): Promise<GeneratedStoreAssetsResult> {
-  const submitted = await submitAppStoreScreenshotSet(input, locale);
+  const submitted = options.taskId
+    ? { taskId: options.taskId }
+    : await submitAppStoreScreenshotSet(input, locale);
+  const startedAtMs = options.startedAtMs ?? Date.now();
+  if (!options.taskId) options.onTaskSubmitted?.(submitted.taskId, startedAtMs);
   onPlanning();
-  const agentResult = await waitForAgentResult(submitted.taskId, (partialResult) => {
-    try {
-      onProgress(buildGeneratedStoreAssetsResult(partialResult, { allowMissingImageUrl: false }));
-    } catch {
-      // Ignore non-renderable intermediate snapshots and keep waiting for a usable result.
-    }
-  });
+  const agentResult = await waitForAgentResult(
+    submitted.taskId,
+    (partialResult) => {
+      try {
+        onProgress(buildGeneratedStoreAssetsResult(partialResult, { allowMissingImageUrl: false }));
+      } catch {
+        // Ignore non-renderable intermediate snapshots and keep waiting for a usable result.
+      }
+    },
+    expectedAssetCount(input),
+    { startedAtMs },
+  );
   return resolveGeneratedStoreAssetsResult(agentResult, input, onProgress);
 }
 
@@ -247,8 +261,17 @@ export function buildGeneratedStoreAssetsResult(
 export async function waitForAgentResult(
   taskId: string,
   onProgress: (result: AppStoreScreenshotAgentResult) => void,
+  expectedCount: number,
+  options: {
+    pollIntervalMs?: number;
+    timeoutMs?: number;
+    startedAtMs?: number;
+  } = {},
 ) {
-  const deadline = Date.now() + AGENT_RESULT_TIMEOUT_MS;
+  const deadline =
+    (options.startedAtMs ?? Date.now()) +
+    (options.timeoutMs ?? AGENT_RESULT_TIMEOUT_MS);
+  const pollIntervalMs = options.pollIntervalMs ?? AGENT_RESULT_POLL_INTERVAL_MS;
   let lastResult: AppStoreScreenshotAgentResult | null = null;
   let lastSignature = "";
 
@@ -261,7 +284,13 @@ export async function waitForAgentResult(
         lastSignature = signature;
         onProgress(task.data);
       }
-      if (task.data.reportStatus === "final" || hasResolvableAgentAssets(task.data)) {
+      // submit-only can finish the LLM task after writing the first partial batch while
+      // its background follower continues to append screenshot tasks. Do not treat the
+      // task's SUCCEEDED status or one resolvable asset as the completed image set.
+      if (
+        task.data.reportStatus === "final" ||
+        hasExpectedAgentAssetCount(task.data, expectedCount)
+      ) {
         return task.data;
       }
     }
@@ -269,15 +298,24 @@ export async function waitForAgentResult(
       if (lastResult) return lastResult;
       throw new AppStoreAgentGenerationError(task.errorCode, task.error);
     }
-    await wait(AGENT_RESULT_POLL_INTERVAL_MS);
+    await wait(pollIntervalMs);
   }
 
   if (lastResult) return lastResult;
   throw new AppStoreAgentGenerationError("task_failed", "Agent result timed out.");
 }
 
-export function hasResolvableAgentAssets(result: AppStoreScreenshotAgentResult) {
-  return result.assets.some((asset) => Boolean(asset.imageUrl || asset.imageTaskId));
+export function hasExpectedAgentAssetCount(
+  result: AppStoreScreenshotAgentResult,
+  expectedCount: number,
+) {
+  const settledAssetIds = new Set([
+    ...result.assets
+      .filter((asset) => Boolean(asset.imageUrl || asset.imageTaskId || asset.errorMessage))
+      .map((asset) => asset.id),
+    ...result.failures.map((failure) => failure.id),
+  ]);
+  return settledAssetIds.size >= clampAssetCount(expectedCount);
 }
 
 export function progressSignature(result: AppStoreScreenshotAgentResult) {
@@ -459,7 +497,7 @@ export function blobToImage(blob: Blob): Promise<HTMLImageElement> {
 }
 
 export function wait(ms: number): Promise<void> {
-  return new Promise((resolve) => window.setTimeout(resolve, ms));
+  return new Promise((resolve) => globalThis.setTimeout(resolve, ms));
 }
 
 export function formatGenerationError(

package/src/features/tools/cold-start-channel-selector/widget/cold-start-channel-selector.tsx

@@ -28,6 +28,11 @@ import {
 } from "../../../../host/client";
 
 import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+  clearToolTaskRecovery,
+  persistToolTaskRecovery,
+  readToolTaskRecovery,
+} from "../../../../components/tools/engine/task-recovery";
 import { GRACE_WINDOW_MS, initialInput } from "./constants";
 import { SelectField } from "./form-controls";
 import { EmptyPreview, RunningPanel } from "./preview-panels";
@@ -38,6 +43,8 @@ type FormFieldErrors = Partial<
   Record<"productUrl" | "productDescription", string>
 >;
 
+const RECOVERY_SLUG = "cold-start-channel-selector";
+
 export function ColdStartChannelSelector() {
   const t = useTranslations("toolsPages.coldStartChannelSelector.widget");
   const locale = useLocale() as AppLocale;
@@ -74,6 +81,22 @@ export function ColdStartChannelSelector() {
     };
   }, [taskWatch]);
 
+  useEffect(() => {
+    const recovered = readToolTaskRecovery(RECOVERY_SLUG, {
+      parseInput: (value) => {
+        const parsed = coldStartChannelSelectorInputSchema.safeParse(value);
+        return parsed.success ? parsed.data : null;
+      },
+    });
+    if (!recovered) return;
+    setInput(recovered.input);
+    cancelledRef.current = false;
+    settledRef.current = false;
+    watchAnalysis(recovered.taskId, recovered.startedAtMs);
+    // Restore only once for this mounted tool route.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [taskWatch]);
+
   function updateInput<K extends keyof ColdStartChannelSelectorInput>(
     key: K,
     value: ColdStartChannelSelectorInput[K],
@@ -117,6 +140,24 @@ export function ColdStartChannelSelector() {
     return { settled: false as const };
   }
 
+  function watchAnalysis(taskId: string, startedAtMs?: number) {
+    setState({ phase: "running", status: startedAtMs ? "RESTORING" : "PENDING" });
+    taskWatch.start(
+      taskId,
+      pollOnce,
+      {
+        onStatus: (status) => {
+          if (!cancelledRef.current && !settledRef.current) {
+            setState({ phase: "running", status });
+          }
+        },
+        onSuccess: (data) => finishDone(data),
+        onError: (category) => finishError(category === "timeout" ? "timeout" : category),
+      },
+      { graceWindowMs: GRACE_WINDOW_MS, startedAtMs },
+    );
+  }
+
   async function startAnalysis() {
     const parsed = coldStartChannelSelectorInputSchema.safeParse(input);
     if (!parsed.success) {
@@ -159,28 +200,16 @@ export function ColdStartChannelSelector() {
     }
 
     if (cancelledRef.current) return;
-    setState({ phase: "running", status: "PENDING" });
-
-    taskWatch.start(
-      taskId,
-      pollOnce,
-      {
-        onStatus: (status) => {
-          if (!cancelledRef.current && !settledRef.current) {
-            setState({ phase: "running", status });
-          }
-        },
-        onSuccess: (data) => finishDone(data),
-        onError: (category) => finishError(category === "timeout" ? "timeout" : category),
-      },
-      { graceWindowMs: GRACE_WINDOW_MS },
-    );
+    const startedAtMs = Date.now();
+    persistToolTaskRecovery(RECOVERY_SLUG, taskId, parsed.data, startedAtMs);
+    watchAnalysis(taskId, startedAtMs);
   }
 
   function resetResult() {
     cancelledRef.current = false;
     settledRef.current = false;
     cleanup();
+    clearToolTaskRecovery(RECOVERY_SLUG);
     setState({ phase: "idle" });
   }
 

package/src/features/tools/competitor-analysis/competitor-analysis.container.tsx

@@ -1,4 +1,4 @@
-import { ImageOff } from "lucide-react";
+import Image from "next/image";
 import { createToolGuideTranslator } from "../shared/tool-message-translator";
 
 import { CompetitorAnalysis } from "./widget";
@@ -17,30 +17,25 @@ import { ToolWorkspaceSection } from "../shared/tool-guide-section";
 import { ToolPageShell } from "../shared/tool-page-shell";
 import type { ToolPageProps } from "../types";
 
-/**
- * Gray-white image placeholder. The agent has no image-generation capability,
- * so first-pass bitmap assets are intentionally deferred (see release notes /
- * tool brief). Swap each placeholder for a real `public/tools/competitor-analysis-*.webp`
- * when assets are produced.
- */
-function ImagePlaceholder({
+function CompetitorVisual({
+  src,
   label,
   className = "",
 }: {
+  src: string;
   label: string;
   className?: string;
 }) {
   return (
-    <div
-      role="img"
-      aria-label={label}
-      className={`flex aspect-[16/10] w-full items-center justify-center rounded-[1.5rem] border border-dashed border-[#D7DCE3] bg-[#F4F5F7] text-[#A8B0BA] ${className}`}
-    >
-      <span className="flex flex-col items-center gap-2 text-xs font-medium">
-        <ImageOff className="size-6" aria-hidden />
-        {label}
-      </span>
-    </div>
+    <figure className={`relative aspect-[16/10] w-full overflow-hidden rounded-[1.5rem] border border-[#D7DCE3] bg-[#F4F5F7] ${className}`}>
+      <Image
+        src={src}
+        alt={label}
+        fill
+        sizes="(min-width: 1024px) 560px, 100vw"
+        className="object-cover"
+      />
+    </figure>
   );
 }
 
@@ -80,12 +75,18 @@ export async function CompetitorAnalysisContainer({ locale, spec }: ToolPageProp
             <p className="text-sm leading-6 text-[#777777]">{t("runtimeNote")}</p>
           </div>
         </div>
-        <ImagePlaceholder label={t("visualAlt.howToUse")} />
+        <CompetitorVisual
+          src="/tools/competitor-radar-how-it-works.webp"
+          label={t("visualAlt.howToUse")}
+        />
       </section>
 
       {/* Result guidance — visual-led split */}
       <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[1.08fr_0.92fr] md:items-center md:py-16">
-        <ImagePlaceholder label={t("visualAlt.result")} />
+        <CompetitorVisual
+          src="/tools/competitor-radar-trust-boundary.webp"
+          label={t("visualAlt.result")}
+        />
         <div>
           <ToolSectionEyebrow tone="blue">{t("resultKicker")}</ToolSectionEyebrow>
           <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
@@ -109,6 +110,11 @@ export async function CompetitorAnalysisContainer({ locale, spec }: ToolPageProp
           <p className="max-w-md text-sm leading-6 text-[#777777]">{t("useCasesIntro")}</p>
         </div>
         <ToolNumberedUseCaseGrid items={useCases} />
+        <CompetitorVisual
+          src="/tools/competitor-radar-use-cases.webp"
+          label={t("visualAlt.useCases")}
+          className="mt-8"
+        />
       </section>
 
       {/* FAQ + boundary */}

package/src/features/tools/competitor-analysis/widget/competitor-analysis.tsx

@@ -22,11 +22,18 @@ import {
 } from "../../../../host/client";
 
 import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+  clearToolTaskRecovery,
+  persistToolTaskRecovery,
+  readToolTaskRecovery,
+} from "../../../../components/tools/engine/task-recovery";
 import { GRACE_WINDOW_MS } from "./constants";
 import { EmptyPanel, ErrorPanel, RunningPanel } from "./preview-panels";
 import { Dossier } from "./result-shell";
 import type { ErrorCategory, WidgetState } from "./types";
 
+const RECOVERY_SLUG = "competitor-analysis";
+
 export function CompetitorAnalysis() {
   const t = useTranslations("toolsPages.competitorAnalysis.widget");
   const locale = useLocale() as AppLocale;
@@ -53,6 +60,24 @@ export function CompetitorAnalysis() {
     };
   }, [taskWatch]);
 
+  useEffect(() => {
+    const recovered = readToolTaskRecovery(RECOVERY_SLUG, {
+      parseInput: (value) => {
+        const parsed = competitorAnalysisInputSchema.safeParse(value);
+        return parsed.success ? parsed.data : null;
+      },
+    });
+    if (!recovered) return;
+    setUrl(recovered.input.competitorUrl);
+    setName(recovered.input.competitorName ?? "");
+    setNotes(recovered.input.notes ?? "");
+    cancelledRef.current = false;
+    settledRef.current = false;
+    watchAnalysis(recovered.taskId, recovered.startedAtMs);
+    // Restore only once for this mounted tool route.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [taskWatch]);
+
   useEffect(() => {
     if (!activityBrief || state.phase !== "done") return;
     publishActivityArtifact(
@@ -93,6 +118,24 @@ export function CompetitorAnalysis() {
     return { settled: false as const };
   }
 
+  function watchAnalysis(taskId: string, startedAtMs?: number) {
+    setState({ phase: "running", status: startedAtMs ? "RESTORING" : "PENDING" });
+    taskWatch.start(
+      taskId,
+      pollOnce,
+      {
+        onStatus: (status) => {
+          if (!cancelledRef.current && !settledRef.current) {
+            setState({ phase: "running", status });
+          }
+        },
+        onSuccess: (data) => finishDone(data, taskId),
+        onError: (category) => finishError(category === "timeout" ? "timeout" : category),
+      },
+      { graceWindowMs: GRACE_WINDOW_MS, startedAtMs },
+    );
+  }
+
   async function startAnalysis() {
     const parsed = competitorAnalysisInputSchema.safeParse({
       competitorUrl: url,
@@ -119,28 +162,16 @@ export function CompetitorAnalysis() {
       return;
     }
     if (cancelledRef.current) return;
-    setState({ phase: "running", status: "PENDING" });
-
-    taskWatch.start(
-      taskId,
-      pollOnce,
-      {
-        onStatus: (status) => {
-          if (!cancelledRef.current && !settledRef.current) {
-            setState({ phase: "running", status });
-          }
-        },
-        onSuccess: (data) => finishDone(data, taskId),
-        onError: (category) => finishError(category === "timeout" ? "timeout" : category),
-      },
-      { graceWindowMs: GRACE_WINDOW_MS },
-    );
+    const startedAtMs = Date.now();
+    persistToolTaskRecovery(RECOVERY_SLUG, taskId, parsed.data, startedAtMs);
+    watchAnalysis(taskId, startedAtMs);
   }
 
   function reset() {
     cancelledRef.current = false;
     settledRef.current = false;
     cleanup();
+    clearToolTaskRecovery(RECOVERY_SLUG);
     setState({ phase: "idle" });
   }
 

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;