@tomako/tools-runtime 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomako/tools-runtime",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Shared interactive tools runtime for Tomako-FE workspace dialogs and Tomako-SEO tool pages",
   "type": "module",
   "exports": {

package/src/components/tools/engine/use-legacy-llm-task.ts

@@ -9,12 +9,33 @@ import {
 
 export type LegacyTaskErrorCategory = "task" | "schema" | "timeout";
 
+export type LegacyTaskProgress = {
+  stage?: string;
+  detail?: string;
+  updatedAt?: string;
+  state?: string;
+  completedCount?: number;
+  totalCount?: number;
+  tasks?: Array<{
+    id: string;
+    title: string;
+    status: "pending" | "in_progress" | "completed" | "failed";
+  }>;
+};
+
 export type LegacyTaskWatchHandlers<TResult> = {
   onStatus: (status: string) => void;
+  onProgress?: (progress: LegacyTaskProgress) => void;
   onSuccess: (data: TResult) => void;
   onError: (category: LegacyTaskErrorCategory) => void;
 };
 
+function legacyErrorCategory(category: string): LegacyTaskErrorCategory {
+  if (category === "timeout") return "timeout";
+  if (category === "schema" || category === "invalid") return "schema";
+  return "task";
+}
+
 /**
  * Legacy custom widget 任务监听：封装 watchLlmTask（SSE + 自适应轮询），
  * 替代各 widget 内手写的 setInterval / 重复 SSE 逻辑。
@@ -53,8 +74,9 @@ export function useLegacyLlmTaskWatch<TResult>() {
         pollOnce,
         handlers: {
           onStatus: handlers.onStatus,
+          onProgress: handlers.onProgress,
           onSuccess: (data: TResult) => handlers.onSuccess(data as TResult),
-          onError: handlers.onError,
+          onError: (category: string) => handlers.onError(legacyErrorCategory(category)),
         },
         isCancelled: () => cancelledRef.current,
         pollIntervalMs: options?.pollIntervalMs,

package/src/components/tools/engine/use-task-activity.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+function formatClock(elapsedMs: number): string {
+  const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  return hours > 0
+    ? `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`
+    : `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function timestampMs(value: string | undefined): number | null {
+  if (!value) return null;
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+/** Honest task timing: elapsed wall time and age of the last real progress update. */
+export function useTaskActivity(startedAtMs: number, progressUpdatedAt?: string) {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  return useMemo(() => {
+    const lastActivityAt = timestampMs(progressUpdatedAt);
+    return {
+      elapsed: formatClock(now - startedAtMs),
+      lastActivityAgo:
+        lastActivityAt === null ? null : formatClock(now - lastActivityAt),
+    };
+  }, [now, progressUpdatedAt, startedAtMs]);
+}

package/src/components/tools/workspace/tool-loading-panel.tsx

@@ -226,20 +226,34 @@ export function ToolLoadingPanel({
   steps,
   tipLabel,
   tip,
+  activity,
 }: {
   label: string;
-  progress: number;
+  progress?: number;
   steps: readonly ToolLoadingStep[];
   tipLabel?: ReactNode;
   tip?: ReactNode;
+  activity?: ReactNode;
 }) {
   return (
     <div className="flex min-h-0 flex-1 items-center justify-center px-5 py-8 text-center md:px-8">
       <div className="w-full max-w-[34rem]">
         <TomatoParticleLoader label={label} />
         <div className="mx-auto mt-6 w-full max-w-[18rem]">
-          <ProgressBar value={progress} className="h-1.5 bg-[#EEF1F5] [&_[data-slot=progress-indicator]]:bg-[#111111]" />
+          <ProgressBar
+            value={progress ?? 100}
+            className={cn(
+              "h-1.5 bg-[#EEF1F5] [&_[data-slot=progress-indicator]]:bg-[#111111]",
+              progress === undefined &&
+                "[&_[data-slot=progress-indicator]]:animate-pulse [&_[data-slot=progress-indicator]]:opacity-60",
+            )}
+          />
         </div>
+        {activity ? (
+          <div className="mx-auto mt-3 w-full max-w-[18rem] text-xs leading-5 text-[#777777]">
+            {activity}
+          </div>
+        ) : null}
         <div className="mx-auto mt-7 grid w-full max-w-[18rem] gap-2 text-left">
           {steps.map((step, index) => {
             const isComplete = step.status === "complete";

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import {
     ToolActionBar,
@@ -27,7 +27,10 @@ import {
     submitColdStartChannelSelector,
 } from "../../../../host/client";
 
-import { useLegacyLlmTaskWatch } from "../../../../components/tools/engine/use-legacy-llm-task";
+import {
+  useLegacyLlmTaskWatch,
+  type LegacyTaskProgress,
+} from "../../../../components/tools/engine/use-legacy-llm-task";
 import {
   clearToolTaskRecovery,
   persistToolTaskRecovery,
@@ -66,7 +69,22 @@ export function ColdStartChannelSelector() {
   const stageOptions = t.raw("stageOptions") as Option[];
   const weeklyHoursOptions = t.raw("weeklyHoursOptions") as Option[];
   const budgetOptions = t.raw("budgetOptions") as Option[];
-  const loadingSteps = t.raw("loadingSteps") as readonly LoadingStep[];
+  const loadingSteps = useMemo<readonly LoadingStep[]>(() => {
+    const progress = state.phase === "running" ? state.progress : undefined;
+    if (progress?.tasks?.length) {
+      return progress.tasks.map((task) => ({
+        title: task.title,
+        status:
+          task.status === "in_progress"
+            ? "active"
+            : task.status === "completed"
+              ? "complete"
+              : "pending",
+        countdown: "",
+      }));
+    }
+    return [{ title: progress?.detail ?? t("runningWaiting"), status: "active", countdown: "" }];
+  }, [state, t]);
 
   const busy = state.phase === "submitting" || state.phase === "running";
 
@@ -137,18 +155,40 @@ export function ColdStartChannelSelector() {
     if (result.status === "RESULT_INVALID") {
       return { settled: true as const, kind: "error" as const, category: "schema" as const };
     }
-    return { settled: false as const };
+    const progress: LegacyTaskProgress | undefined =
+      result.progressStage || result.progressDetail || result.progressUpdatedAt
+        ? {
+            stage: result.progressStage,
+            detail: result.progressDetail,
+            updatedAt: result.progressUpdatedAt,
+          }
+        : undefined;
+    return { settled: false as const, status: result.status, progress };
   }
 
   function watchAnalysis(taskId: string, startedAtMs?: number) {
-    setState({ phase: "running", status: startedAtMs ? "RESTORING" : "PENDING" });
+    const startedAt = startedAtMs ?? Date.now();
+    setState({ phase: "running", status: startedAtMs ? "RESTORING" : "PENDING", startedAtMs: startedAt });
     taskWatch.start(
       taskId,
       pollOnce,
       {
         onStatus: (status) => {
           if (!cancelledRef.current && !settledRef.current) {
-            setState({ phase: "running", status });
+            setState((current) =>
+              current.phase === "running"
+                ? { ...current, status }
+                : { phase: "running", status, startedAtMs: startedAt },
+            );
+          }
+        },
+        onProgress: (progress) => {
+          if (!cancelledRef.current && !settledRef.current) {
+            setState((current) =>
+              current.phase === "running"
+                ? { ...current, progress }
+                : { phase: "running", status: "STREAMING", startedAtMs: startedAt, progress },
+            );
           }
         },
         onSuccess: (data) => finishDone(data),
@@ -187,7 +227,7 @@ export function ColdStartChannelSelector() {
     cancelledRef.current = false;
     settledRef.current = false;
     cleanup();
-    setState({ phase: "submitting" });
+    setState({ phase: "submitting", startedAtMs: Date.now() });
 
     let taskId: string;
     try {
@@ -424,10 +464,14 @@ export function ColdStartChannelSelector() {
               <div className="min-h-0 flex-1 overflow-y-auto pt-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                 {state.phase === "submitting" || state.phase === "running" ? (
                   <RunningPanel
+                    startedAtMs={state.startedAtMs}
+                    progress={state.phase === "running" ? state.progress : undefined}
                     statusLabel={t("runningStatusLabel")}
                     steps={loadingSteps}
                     tip={t("loadingTip")}
                     tipLabel={t("runningTipLabel")}
+                    elapsedLabel={(time) => t("runningElapsed", { time })}
+                    lastActivityLabel={(time) => t("runningLastActivity", { time })}
                   />
                 ) : state.phase === "error" ? (
                   <div className="flex min-h-full items-center">

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

@@ -6,6 +6,8 @@ import { useEffect, useRef } from "react";
 import { ProgressBar } from "@tomako/ui/progress";
 import { cn } from "@tomako/ui/cn";
 
+import type { LegacyTaskProgress } from "../../../../components/tools/engine/use-legacy-llm-task";
+import { useTaskActivity } from "../../../../components/tools/engine/use-task-activity";
 import { tomatoParticlePalette, type TomatoParticle } from "./constants";
 import {
     clamp01,
@@ -181,22 +183,40 @@ export function RunningPanel({
   tip,
   tipLabel,
   statusLabel,
+  startedAtMs,
+  progress,
+  elapsedLabel,
+  lastActivityLabel,
 }: {
   steps: readonly LoadingStep[];
   tip: string;
   tipLabel: string;
   statusLabel: string;
+  startedAtMs: number;
+  progress?: LegacyTaskProgress;
+  elapsedLabel: (time: string) => string;
+  lastActivityLabel: (time: string) => string;
 }) {
+  const activity = useTaskActivity(startedAtMs, progress?.updatedAt);
+
   return (
     <div className="flex min-h-full items-center justify-center px-2 py-4 text-center">
       <div className="w-full max-w-[34rem]">
         <TomatoParticleLoader statusLabel={statusLabel} />
         <div className="mx-auto mt-8 w-full max-w-[16rem]">
           <ProgressBar
-            value={42}
-            className="h-1.5 bg-[#EEF1F5] [&_[data-slot=progress-indicator]]:bg-[#111111]"
+            value={100}
+            className={cn(
+              "h-1.5 bg-[#EEF1F5] [&_[data-slot=progress-indicator]]:bg-[#111111]",
+              "[&_[data-slot=progress-indicator]]:animate-pulse [&_[data-slot=progress-indicator]]:opacity-60",
+            )}
           />
         </div>
+        <div className="mx-auto mt-3 w-full max-w-[18rem] text-xs leading-5 text-[#777777]">
+          <p>{elapsedLabel(activity.elapsed)}</p>
+          {progress?.detail ? <p className="mt-1 text-[#555555]">{progress.detail}</p> : null}
+          {activity.lastActivityAgo ? <p>{lastActivityLabel(activity.lastActivityAgo)}</p> : null}
+        </div>
         <div className="mx-auto mt-8 grid w-full max-w-[18rem] gap-2.5 text-left">
           {steps.map((step) => {
             const isComplete = step.status === "complete";

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

@@ -1,12 +1,18 @@
 import type { useTranslations } from "../../../../i18n/client";
 import type { ColdStartChannelSelectorResult } from "../../../../lib/tools/cold-start-channel-selector-schema";
+import type { LegacyTaskProgress } from "../../../../components/tools/engine/use-legacy-llm-task";
 
 export type ErrorCategory = "submit" | "task" | "timeout" | "schema" | "validation";
 
 export type WidgetState =
   | { phase: "idle" }
-  | { phase: "submitting" }
-  | { phase: "running"; status: string }
+  | { phase: "submitting"; startedAtMs: number }
+  | {
+      phase: "running";
+      status: string;
+      startedAtMs: number;
+      progress?: LegacyTaskProgress;
+    }
   | { phase: "done"; data: ColdStartChannelSelectorResult }
   | { phase: "error"; category: ErrorCategory };
 

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

@@ -38,7 +38,11 @@ import {
 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 {
+  useLegacyLlmTaskWatch,
+  type LegacyTaskProgress,
+} from "../../../../components/tools/engine/use-legacy-llm-task";
+import { useTaskActivity } from "../../../../components/tools/engine/use-task-activity";
 import {
   clearToolTaskRecovery,
   persistToolTaskRecovery,
@@ -72,11 +76,7 @@ import {
     defaultForm,
 } from "./constants";
 import { MultiSelectMenu, StyleSelect } from "./form-controls";
-import {
-    screenLoadingProgress,
-    screenLoadingStepIndex,
-    wait,
-} from "./helpers";
+import { wait } from "./helpers";
 import type {
     DetailState,
     FieldErrors,
@@ -103,6 +103,7 @@ export function ProductNameGenerator() {
   const [copied, setCopied] = useState<string | null>(null);
   const [revealedCount, setRevealedCount] = useState(0);
   const activeScreenTaskIdRef = useRef<string | null>(null);
+  const idleClockStartedAtRef = useRef(Date.now());
   const resultRef = useRef<HTMLDivElement | null>(null);
   const descriptionRef = useRef<HTMLTextAreaElement | null>(null);
   const marketsRef = useRef<HTMLButtonElement | null>(null);
@@ -148,30 +149,31 @@ export function ProductNameGenerator() {
   const result = screenState.phase === "done" ? screenState.data : null;
   const visibleNames = result?.names.slice(0, revealedCount) ?? [];
   const canSubmit = screenState.phase !== "loading";
-  const loadingStepTitles = useMemo(
-    () => (t.raw("loadingSteps") as readonly string[]).slice(0, SCREEN_LOADING_STEP_COUNT),
-    [t],
-  );
+  const screenProgress = screenState.phase === "loading" ? screenState.progress : undefined;
+  const screenStartedAtMs =
+    screenState.phase === "loading" ? screenState.startedAtMs : idleClockStartedAtRef.current;
+  const taskActivity = useTaskActivity(screenStartedAtMs, screenProgress?.updatedAt);
   const loadingSteps = useMemo<readonly ToolLoadingStep[]>(() => {
-    const activeStep =
-      screenState.phase === "loading"
-        ? screenLoadingStepIndex(screenState.status)
-        : 0;
-
-    return loadingStepTitles.map((title, index) => ({
-      title,
-      status:
-        index < activeStep
-          ? "complete"
-          : index === activeStep
+    if (screenProgress?.tasks?.length) {
+      return screenProgress.tasks.slice(0, SCREEN_LOADING_STEP_COUNT).map((task) => ({
+        title: task.title,
+        status:
+          task.status === "in_progress"
             ? "active"
-            : "pending",
-      countdown:
-        screenState.phase === "loading" && index === activeStep
-          ? t("loadingCountdown")
-          : undefined,
-    }));
-  }, [loadingStepTitles, screenState, t]);
+            : task.status === "completed"
+              ? "complete"
+              : "pending",
+      }));
+    }
+    const status = screenState.phase === "loading" ? screenState.status : "PENDING";
+    const title =
+      status === "AWAITING_RESULT" || status === "AWAITING_INPUT" || status === "SUCCEEDED"
+        ? t("loadingStateFinalizing")
+        : status === "PENDING" || status === "RESTORING"
+          ? t("loadingStatePending")
+          : t("loadingStateRunning");
+    return [{ title: screenProgress?.detail ?? title, status: "active" }];
+  }, [screenProgress, screenState, t]);
 
   useEffect(() => {
     if (!result) return;
@@ -334,9 +336,18 @@ export function ProductNameGenerator() {
         category: task.status === "RESULT_INVALID" ? ("schema" as const) : ("task" as const),
       };
     }
-    setScreenState({ phase: "loading", status: task.status, taskId });
+    const progress: LegacyTaskProgress | undefined =
+      task.progressStage || task.progressDetail || task.progressUpdatedAt
+        ? {
+            stage: task.progressStage,
+            detail: task.progressDetail,
+            updatedAt: task.progressUpdatedAt,
+          }
+        : undefined;
     return {
       settled: false as const,
+      status: task.status,
+      progress,
       pendingWriteback:
         task.status === "AWAITING_INPUT" || task.status === "SUCCEEDED",
     };
@@ -347,14 +358,26 @@ export function ProductNameGenerator() {
     status: string,
     startedAtMs?: number,
   ) {
+    const startedAt = startedAtMs ?? Date.now();
     activeScreenTaskIdRef.current = taskId;
-    setScreenState({ phase: "loading", status, taskId });
+    setScreenState({ phase: "loading", status, taskId, startedAtMs: startedAt });
     screenTaskWatch.start(
       taskId,
       pollScreenOnce,
       {
         onStatus: (nextStatus) => {
-          setScreenState({ phase: "loading", status: nextStatus, taskId });
+          setScreenState((current) =>
+            current.phase === "loading"
+              ? { ...current, status: nextStatus, taskId }
+              : { phase: "loading", status: nextStatus, taskId, startedAtMs: startedAt },
+          );
+        },
+        onProgress: (progress) => {
+          setScreenState((current) =>
+            current.phase === "loading"
+              ? { ...current, progress, taskId }
+              : { phase: "loading", status: "STREAMING", taskId, startedAtMs: startedAt, progress },
+          );
         },
         onSuccess: (data) => {
           setScreenState({ phase: "done", data });
@@ -384,7 +407,7 @@ export function ProductNameGenerator() {
     setCopied(null);
     setRevealedCount(0);
     setDetailStates({});
-    setScreenState({ phase: "loading", status: "PENDING" });
+    setScreenState({ phase: "loading", status: "PENDING", startedAtMs: Date.now() });
     scrollToResult();
 
     try {
@@ -721,10 +744,18 @@ export function ProductNameGenerator() {
       {screenState.phase === "loading" ? (
         <ToolLoadingPanel
           label={t("loadingTitle")}
-          progress={screenLoadingProgress(screenState.status)}
           steps={loadingSteps}
           tipLabel={t("loadingStatus")}
           tip={t("loadingHint")}
+          activity={
+            <>
+              <p>{t("loadingElapsed", { time: taskActivity.elapsed })}</p>
+              {screenProgress?.detail ? <p className="mt-1 text-[#555555]">{screenProgress.detail}</p> : null}
+              {taskActivity.lastActivityAgo ? (
+                <p>{t("loadingLastActivity", { time: taskActivity.lastActivityAgo })}</p>
+              ) : null}
+            </>
+          }
         />
       ) : null}
 

package/src/features/tools/product-name-generator/widget/types.ts

@@ -5,10 +5,17 @@ import type {
     ProductNameStyle,
     ProductNameTld
 } from "../../../../lib/tools/product-name-generator-schema";
+import type { LegacyTaskProgress } from "../../../../components/tools/engine/use-legacy-llm-task";
 
 export type ScreenState =
   | { phase: "idle" }
-  | { phase: "loading"; status: string; taskId?: string }
+  | {
+      phase: "loading";
+      status: string;
+      taskId?: string;
+      startedAtMs: number;
+      progress?: LegacyTaskProgress;
+    }
   | { phase: "done"; data: ProductNameScreenResult }
   | { phase: "error"; message: string };
 

package/src/features/tools/startup-idea-research/startup-idea-research.container.tsx

@@ -46,7 +46,7 @@ export async function StartupIdeaResearchContainer({ locale, spec }: ToolPagePro
         <div className="grid gap-8 xl:grid-cols-[1fr_0.42fr] xl:items-start">
           <StartupIdeaResearch />
           <ToolImageVisual
-            src="/tools/startup-idea-research-hero.webp"
+            src="/tools/startup-idea-research-workflow.webp"
             alt={t("visualAlt.workspace")}
           />
         </div>
@@ -72,11 +72,11 @@ export async function StartupIdeaResearchContainer({ locale, spec }: ToolPagePro
             <ToolDividedRows items={standards} />
           </div>
         </div>
-        <ToolImageVisual src="/tools/startup-idea-research-hero.webp" alt={t("visualAlt.value")} />
+        <ToolImageVisual src="/tools/startup-idea-research-evidence.webp" alt={t("visualAlt.value")} />
       </section>
 
       <section className="grid gap-8 border-t border-[#E8E4DB] py-12 md:grid-cols-[1.05fr_0.95fr] md:items-center md:py-16">
-        <ToolImageVisual src="/tools/startup-idea-research-hero.webp" alt={t("visualAlt.support")} />
+        <ToolImageVisual src="/tools/startup-idea-research-experiments.webp" alt={t("visualAlt.support")} />
         <div>
           <ToolSectionEyebrow>{t("resultKicker")}</ToolSectionEyebrow>
           <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
@@ -98,7 +98,7 @@ export async function StartupIdeaResearchContainer({ locale, spec }: ToolPagePro
             <ToolDividedFaqList items={faqItems} />
           </div>
         </div>
-        <ToolImageVisual src="/tools/startup-idea-research-hero.webp" alt={t("visualAlt.useCase")} />
+        <ToolImageVisual src="/tools/startup-idea-research-recruiting.webp" alt={t("visualAlt.useCase")} />
       </section>
 
       <ToolCta

package/src/i18n/messages/en/tools/app-store-screenshot-generator.ts

@@ -41,7 +41,7 @@ const appStoreScreenshotGenerator = {
       },
       {
         title: "Recoverable failure hints",
-        body: "Missing URLs, missing screenshots, unsupported file types, and export failures return actionable messages instead of empty creatives.",
+        body: "Missing screenshots, unsupported file types, public URL fetch failures, and export failures return actionable messages instead of empty creatives.",
       },
     ],
     comparisonHeading: "What a good app store screenshot generator should do",
@@ -80,7 +80,7 @@ const appStoreScreenshotGenerator = {
       "Apple App Store and Google Play directions are supported, including complete screenshot sets, portrait screenshots, and feature graphics.",
       "This version uses an online image generation workflow to submit live image tasks, but it does not connect to App Store Connect or Google Play Console.",
       "If a screenshot includes test accounts, real users, private data, or unauthorized brands, redact it before use.",
-      "If no result appears, check that the URL is not empty, the uploaded file is PNG/JPG/WebP, browser file reading is allowed, and the selected input source matches your data.",
+      "If no result appears, confirm that a PNG/JPG/WebP screenshot is uploaded and browser file reading is allowed. If you added a product URL, confirm that its public page is reachable.",
       "Before real submission, review the latest platform dimensions, review policies, trademark or copyright permissions, privacy content, copy claims, and readability on target devices.",
     ],
     resultGuidanceHeading: "How to use the downloaded listing images",

package/src/i18n/messages/en/tools/cold-start-channel-selector.ts

@@ -318,7 +318,7 @@ const coldStartChannelSelector = {
     ],
     runningTitle: "Building your channel strategy",
     runningHint:
-      "We are comparing your product context and constraints to build your first-channel strategy. This can take a minute or two.",
+      "We are comparing your product context and constraints. The page shows actual elapsed time and any real progress available.",
     loadingSteps: [
       { status: "complete", title: "Reading product context", countdown: "" },
       { status: "active", title: "Comparing channel options", countdown: "" },
@@ -327,6 +327,9 @@ const coldStartChannelSelector = {
     loadingTip:
       "Cold-start channels usually work better when one low-cost community, content, or partner path is validated before heavier ads or long-term SEO.",
     runningStatusLabel: "Generating your channel strategy",
+    runningWaiting: "Task submitted; waiting for the next real progress update",
+    runningElapsed: "Running for {time}",
+    runningLastActivity: "Last progress update {time} ago",
     runningTipLabel: "Tip",
     reportTitle: "Customer acquisition channel strategy",
     copyReport: "Copy report",

package/src/i18n/messages/en/tools/product-name-generator.ts

@@ -281,9 +281,14 @@ const productNameGenerator = {
       "Workspace side visual showing rough naming inputs becoming three candidate directions and domain-extension signals.",
     loadingTitle: "Generating and screening",
     loadingStatus: "Preparing the name shortlist",
-    loadingCountdown: "about 1 min",
+    loadingCountdown: "updates live",
+    loadingStatePending: "Task submitted; waiting for the Agent to start",
+    loadingStateRunning: "The Agent is working on the task",
+    loadingStateFinalizing: "Analysis finished; waiting for the structured result",
+    loadingElapsed: "Running for {time}",
+    loadingLastActivity: "Last progress update {time} ago",
     loadingHint:
-      "Generating name candidates from your product idea and running basic pronunciation, length, and domain-extension screening. The first pass does not perform full trademark clearance.",
+      "Generating name candidates from your product idea and running basic pronunciation, length, and domain-extension screening. Real progress appears automatically; the first pass does not perform full trademark clearance.",
     loadingSteps: [
       "Build naming strategy and candidates",
       "Run pronunciation, length, and brand-fit screening",

package/src/i18n/messages/en/tools/startup-idea-research.ts

@@ -107,11 +107,11 @@ const startupIdeaResearch = {
     workspaceHint: "Describe the idea and target users to get public demand signals, assumptions to challenge, and the next validation test.",
     workspaceBadge: "Startup idea validation",
     visualAlt: {
-      hero: "Startup idea validation report preview (asset pending)",
-      workspace: "From rough idea to validation report and recruiting assets (asset pending)",
-      value: "Pain, user, and payment signal visual (asset pending)",
-      support: "Comparable product and validation experiment visual (asset pending)",
-      useCase: "Recruiting copy and poster draft visual (asset pending)",
+      hero: "Startup idea validation report preview",
+      workspace: "Three-step flow from public evidence to a validation report and editable recruiting draft",
+      value: "Evidence dashboard for pain signals, user segments, and willingness-to-pay clues",
+      support: "Competitor evidence matrix and interview, landing-page, and payment validation experiments",
+      useCase: "Founder-review recruiting poster, post draft, and an empty state awaiting real responses",
     },
     valueKicker: "What you get",
     valueTitle: "Not a pep talk: an evidence map for the riskiest assumptions",

package/src/i18n/messages/zh/tools/app-store-screenshot-generator.ts

@@ -41,7 +41,7 @@ const appStoreScreenshotGenerator = {
       },
       {
         title: "失败原因提示",
-        body: "缺 URL、未上传截图、格式不支持或导出失败时，结果区会给出可恢复提示，而不是生成空素材。",
+        body: "未上传截图、格式不支持、公开 URL 读取失败或导出失败时，结果区会给出可恢复提示，而不是生成空素材。",
       },
     ],
     comparisonHeading: "一个好的上架图生成器应该具备什么",
@@ -80,7 +80,7 @@ const appStoreScreenshotGenerator = {
       "支持 Apple App Store 和 Google Play 两类平台方向，并提供完整截图套图、竖版截图或横版 feature graphic。",
       "当前通过在线图像生成流程提交真实生图任务，但不连接 App Store Connect 或 Google Play Console 后台。",
       "如果截图含测试账号、真实用户、隐私数据或未授权品牌，请先脱敏或不要上传。",
-      "如果没有结果，先检查 URL 是否为空、上传文件是否为 PNG/JPG/WebP、浏览器是否阻止本地文件读取，以及是否选择了正确的输入来源。",
+      "如果没有结果，先检查是否已上传 PNG/JPG/WebP 截图、浏览器是否阻止本地文件读取；填写了产品 URL 时，再确认该公开页面可以访问。",
       "正式上架前仍要复核最新尺寸、审核政策、商标/版权授权、隐私内容、文案承诺和不同设备上的可读性。",
     ],
     resultGuidanceHeading: "下载后怎么使用这些上架图",

package/src/i18n/messages/zh/tools/cold-start-channel-selector.ts

@@ -317,7 +317,7 @@ const coldStartChannelSelector = {
     ],
     runningTitle: "正在生成你的渠道策略",
     runningHint:
-      "正在结合产品信息和限制条件，生成你的首轮渠道策略，可能需要一两分钟。",
+      "正在结合产品信息和限制条件生成首轮渠道策略；页面会显示实际耗时和可用的真实进展。",
     loadingSteps: [
       { status: "complete", title: "读取产品信息", countdown: "" },
       { status: "active", title: "比较渠道选项", countdown: "" },
@@ -326,6 +326,9 @@ const coldStartChannelSelector = {
     loadingTip:
       "冷启动通常先验证一个低成本社区、内容或伙伴渠道，再扩展到更重的广告和长期 SEO。",
     runningStatusLabel: "正在生成渠道策略",
+    runningWaiting: "任务已提交，等待下一条真实进展",
+    runningElapsed: "已运行 {time}",
+    runningLastActivity: "最近进展更新于 {time} 前",
     runningTipLabel: "提示",
     reportTitle: "客户获取渠道策略",
     copyReport: "复制报告",

package/src/i18n/messages/zh/tools/product-name-generator.ts

@@ -281,9 +281,14 @@ const productNameGenerator = {
       "工作台右侧视觉，展示粗略命名输入被整理成三个候选方向和域名后缀信号。",
     loadingTitle: "正在生成与快筛",
     loadingStatus: "正在准备候选名短名单",
-    loadingCountdown: "约 1 分钟内",
+    loadingCountdown: "持续更新",
+    loadingStatePending: "任务已提交，正在等待 Agent 接手",
+    loadingStateRunning: "Agent 正在处理任务",
+    loadingStateFinalizing: "Agent 已完成分析，正在等待结构化结果",
+    loadingElapsed: "已运行 {time}",
+    loadingLastActivity: "最近进展更新于 {time} 前",
     loadingHint:
-      "正在根据产品想法生成候选名，并做基础读音、长度和域名后缀快筛。首轮不会做完整商标清关。",
+      "正在根据产品想法生成候选名，并做基础读音、长度和域名后缀快筛。真实进展会自动更新；首轮不会做完整商标清关。",
     loadingSteps: [
       "生成命名策略和候选名",
       "运行读音、长度和基础品牌筛选",

package/src/i18n/messages/zh/tools/startup-idea-research.ts

@@ -103,11 +103,11 @@ const startupIdeaResearch = {
     workspaceHint: "描述想法和目标用户，获得公开需求信号、待验证假设与下一步实验。",
     workspaceBadge: "创业想法验证",
     visualAlt: {
-      hero: "创业 idea 调研报告预览（配图待补）",
-      workspace: "从粗糙想法到验证报告和招募素材的视觉物料（配图待补）",
-      value: "痛点、用户和付费信号分析视觉物料（配图待补）",
-      support: "竞品证据和验证实验视觉物料（配图待补）",
-      useCase: "招募文案和海报草案视觉物料（配图待补）",
+      hero: "创业 idea 调研报告预览",
+      workspace: "公开证据被整理成验证报告与可编辑招募草案的三步流程",
+      value: "痛点信号、用户群体与付费意愿线索的证据分析面板",
+      support: "竞品证据矩阵与访谈、落地页、付费验证实验",
+      useCase: "待创始人审核的招募海报、短帖草案与真实反馈空状态",
     },
     valueKicker: "你会得到什么",
     valueTitle: "不是替你拍脑袋，而是把 idea 拆成可验证证据",

package/src/i18n/messages/zh-tw/tools/cold-start-channel-selector.ts

@@ -317,7 +317,7 @@ const coldStartChannelSelector = {
     ],
     runningTitle: "正在產生你的通路策略",
     runningHint:
-      "正在結合產品資訊和限制條件，產生你的首輪通路策略，可能需要一兩分鐘。",
+      "正在結合產品資訊和限制條件產生首輪通路策略；頁面會顯示實際耗時和可用的真實進展。",
     loadingSteps: [
       { status: "complete", title: "讀取產品資訊", countdown: "" },
       { status: "active", title: "比較通路選項", countdown: "" },
@@ -326,6 +326,9 @@ const coldStartChannelSelector = {
     loadingTip:
       "冷啟動通常先驗證一個低成本社區、內容或夥伴通路，再擴展到更重的廣告和長期 SEO。",
     runningStatusLabel: "正在產生通路策略",
+    runningWaiting: "任務已提交，等待下一條真實進展",
+    runningElapsed: "已運行 {time}",
+    runningLastActivity: "最近進展更新於 {time} 前",
     runningTipLabel: "提示",
     reportTitle: "客戶獲取通路策略",
     copyReport: "複製報告",

package/src/i18n/messages/zh-tw/tools/product-name-generator.ts

@@ -281,9 +281,14 @@ const productNameGenerator = {
       "工作區右側視覺，展示粗略命名輸入被整理成三個候選方向和網域名稱後綴信號。",
     loadingTitle: "正在產生與快篩",
     loadingStatus: "正在準備候選名短名單",
-    loadingCountdown: "約 1 分鐘內",
+    loadingCountdown: "持續更新",
+    loadingStatePending: "任務已提交，正在等待 Agent 接手",
+    loadingStateRunning: "Agent 正在處理任務",
+    loadingStateFinalizing: "Agent 已完成分析，正在等待結構化結果",
+    loadingElapsed: "已運行 {time}",
+    loadingLastActivity: "最近進展更新於 {time} 前",
     loadingHint:
-      "正在根據產品想法產生候選名，並做基礎讀音、長度和網域名稱後綴快篩。首輪不會做完整商標清關。",
+      "正在根據產品想法產生候選名，並做基礎讀音、長度和網域名稱後綴快篩。真實進展會自動更新；首輪不會做完整商標清關。",
     loadingSteps: [
       "產生命名策略和候選名",
       "運行讀音、長度和基礎品牌篩選",

package/src/i18n/messages/zh-tw/tools/startup-idea-research.ts

@@ -103,11 +103,11 @@ const startupIdeaResearch = {
     workspaceHint: "描述想法和目標使用者，獲得公開需求信號、待驗證假設與下一步實驗。",
     workspaceBadge: "創業想法驗證",
     visualAlt: {
-      hero: "創業 idea 調研報告預覽（配圖待補）",
-      workspace: "從粗糙想法到驗證報告和招募素材的視覺物料（配圖待補）",
-      value: "痛點、用戶和付費信號分析視覺物料（配圖待補）",
-      support: "競品證據和驗證實驗視覺物料（配圖待補）",
-      useCase: "招募文案和海報草案視覺物料（配圖待補）",
+      hero: "創業 idea 調研報告預覽",
+      workspace: "公開證據被整理成驗證報告與可編輯招募草案的三步流程",
+      value: "痛點訊號、用戶群體與付費意願線索的證據分析面板",
+      support: "競品證據矩陣與訪談、落地頁、付費驗證實驗",
+      useCase: "待創辦人審核的招募海報、短帖草案與真實回饋空狀態",
     },
     valueKicker: "你會得到什麼",
     valueTitle: "不是替你拍腦袋，而是把 idea 拆成可驗證證據",

package/src/lib/static-asset.test.ts

@@ -0,0 +1,36 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import { staticAsset } from "./static-asset.ts";
+
+function withStaticOrigin(value: string | undefined, run: () => void) {
+  const previous = process.env.NEXT_PUBLIC_STATIC_ORIGIN;
+  if (value === undefined) delete process.env.NEXT_PUBLIC_STATIC_ORIGIN;
+  else process.env.NEXT_PUBLIC_STATIC_ORIGIN = value;
+  try {
+    run();
+  } finally {
+    if (previous === undefined) delete process.env.NEXT_PUBLIC_STATIC_ORIGIN;
+    else process.env.NEXT_PUBLIC_STATIC_ORIGIN = previous;
+  }
+}
+
+describe("staticAsset", () => {
+  it("keeps public assets same-origin until a CDN origin is explicitly configured", () => {
+    withStaticOrigin(undefined, () => {
+      assert.equal(
+        staticAsset("/tools/mrr-calculator-section-primary-8bit.webp"),
+        "/tools/mrr-calculator-section-primary-8bit.webp",
+      );
+    });
+  });
+
+  it("uses the configured CDN origin when it is available", () => {
+    withStaticOrigin("https://static.tomako.ai/", () => {
+      assert.equal(
+        staticAsset("/tools/mrr-calculator-section-primary-8bit.webp"),
+        "https://static.tomako.ai/static/tools/mrr-calculator-section-primary-8bit.webp",
+      );
+    });
+  });
+});

package/src/lib/static-asset.ts

@@ -1,5 +1,5 @@
 /**
- * Resolve root-relative marketing asset paths to the static CDN.
+ * Resolve root-relative marketing asset paths to an explicitly configured static CDN.
  * Mirrors `@tomako/public-chrome` staticAsset so tools-runtime stays free of
  * a chrome peer dependency.
  *
@@ -10,8 +10,6 @@
 const STYLE_SUFFIX_PATTERN = /!(default|256|640|960|1600|2560)$/;
 const RASTER_EXT = /\.(png|jpe?g|webp|gif|bmp|tiff?)$/i;
 
-export const DEFAULT_STATIC_ORIGIN = "https://static.tomako.ai";
-
 export type OssImageStyle =
   | "default"
   | "256"
@@ -20,13 +18,9 @@ export type OssImageStyle =
   | "1600"
   | "2560";
 
-function readStaticOrigin(): string {
-  const raw = process.env.NEXT_PUBLIC_STATIC_ORIGIN;
-  if (raw !== undefined) {
-    const value = raw.trim().replace(/\/$/, "");
-    if (value.length > 0) return value;
-  }
-  return DEFAULT_STATIC_ORIGIN;
+function readStaticOrigin(): string | undefined {
+  const value = process.env.NEXT_PUBLIC_STATIC_ORIGIN?.trim().replace(/\/$/, "");
+  return value || undefined;
 }
 
 export function staticAsset(path: string, style?: OssImageStyle): string {
@@ -39,6 +33,9 @@ export function staticAsset(path: string, style?: OssImageStyle): string {
 
   const normalized = path.startsWith("/") ? path : `/${path}`;
   const origin = readStaticOrigin();
+  // A deployed page always has the corresponding public/ asset. CDN is an
+  // optional performance layer, never the only way to render a tool visual.
+  if (!origin) return normalized;
   const absolute = `${origin}/static${normalized}`;
   if (!style || !RASTER_EXT.test(normalized.replace(STYLE_SUFFIX_PATTERN, ""))) {
     return absolute;