@tomako/tools-runtime 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomako/tools-runtime",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Shared interactive tools runtime for Tomako-FE workspace dialogs and Tomako-SEO tool pages",
   "type": "module",
   "exports": {
@@ -31,6 +31,7 @@
     "./components/tools/engine/package-widget-runtime": "./src/components/tools/engine/package-widget-runtime.tsx",
     "./components/tools/engine/package-widget": "./src/components/tools/engine/package-widget.tsx",
     "./components/tools/engine/result-view": "./src/components/tools/engine/result-view.tsx",
+    "./components/tools/engine/task-recovery": "./src/components/tools/engine/task-recovery.ts",
     "./components/tools/engine/use-legacy-llm-task": "./src/components/tools/engine/use-legacy-llm-task.ts",
     "./components/tools/engine/use-tool-task": "./src/components/tools/engine/use-tool-task.ts",
     "./components/tools/market-forecast-report": "./src/components/tools/market-forecast-report.tsx",

package/src/components/tools/engine/package-widget-runtime.tsx

@@ -72,7 +72,7 @@ export function PackageWidgetRuntime({
 }) {
   const locale = useLocale() as AppLocale;
   const t = useTranslations("toolsPages.engine");
-  const { state, start, reset } = useToolTask(pkg, locale);
+  const { state, start, reset, recoveredValues } = useToolTask(pkg, locale);
   const resultRef = useRef<HTMLElement | null>(null);
   const artifactRegistrationRef = useRef<string | null>(null);
   const { brief: activityBrief } = useToolHandoff();
@@ -85,6 +85,10 @@ export function PackageWidgetRuntime({
     DEFAULT_DIRECT_MODEL_OPTION,
   );
 
+  useEffect(() => {
+    if (recoveredValues) setValues(recoveredValues);
+  }, [recoveredValues]);
+
   const busy = state.phase === "submitting" || state.phase === "running";
   const isWorkspace = variant === "workspace";
 

package/src/components/tools/engine/task-recovery.test.ts

@@ -0,0 +1,65 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import {
+  clearToolTaskRecovery,
+  persistToolTaskRecovery,
+  readToolTaskRecovery,
+  toolTaskRecoveryStorageKey,
+} from "./task-recovery";
+
+function memoryStorage() {
+  const values = new Map<string, string>();
+  return {
+    getItem: (key: string) => values.get(key) ?? null,
+    setItem: (key: string, value: string) => values.set(key, value),
+    removeItem: (key: string) => values.delete(key),
+  };
+}
+
+describe("tool task recovery", () => {
+  it("restores task identity and input without storing server result data", () => {
+    const storage = memoryStorage();
+    persistToolTaskRecovery(
+      "competitor-analysis",
+      "llm-0123456789abcdef",
+      { url: "https://example.com" },
+      1_000,
+      storage,
+    );
+
+    assert.deepEqual(
+      readToolTaskRecovery("competitor-analysis", {
+        nowMs: 2_000,
+        storage,
+      }),
+      {
+        version: 1,
+        taskId: "llm-0123456789abcdef",
+        input: { url: "https://example.com" },
+        startedAtMs: 1_000,
+      },
+    );
+    assert.equal(
+      storage.getItem(toolTaskRecoveryStorageKey("competitor-analysis"))?.includes("result"),
+      false,
+    );
+  });
+
+  it("removes expired or invalid recovery records", () => {
+    const storage = memoryStorage();
+    persistToolTaskRecovery("cold-start", "llm-task", { audience: "founders" }, 1_000, storage);
+    assert.equal(
+      readToolTaskRecovery("cold-start", { nowMs: 10_000, ttlMs: 100, storage }),
+      null,
+    );
+    assert.equal(storage.getItem(toolTaskRecoveryStorageKey("cold-start")), null);
+  });
+
+  it("clears recovery on an explicit reset", () => {
+    const storage = memoryStorage();
+    persistToolTaskRecovery("email-template-generator", "llm-task", {}, 1_000, storage);
+    clearToolTaskRecovery("email-template-generator", storage);
+    assert.equal(readToolTaskRecovery("email-template-generator", { storage }), null);
+  });
+});

package/src/components/tools/engine/task-recovery.ts

@@ -0,0 +1,109 @@
+export const TOOL_TASK_RECOVERY_TTL_MS = 24 * 60 * 60 * 1000;
+
+export type ToolTaskRecovery<TInput = unknown> = {
+  version: 1;
+  taskId: string;
+  input: TInput;
+  startedAtMs: number;
+};
+
+type RecoveryStorage = Pick<Storage, "getItem" | "setItem" | "removeItem">;
+
+function browserSessionStorage(): RecoveryStorage | null {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+export function toolTaskRecoveryStorageKey(slug: string): string {
+  return `tomako.tool-task.${slug.trim().toLowerCase()}.v1`;
+}
+
+/** Persist only task identity and user input; auth and result data stay server-owned. */
+export function persistToolTaskRecovery<TInput>(
+  slug: string,
+  taskId: string,
+  input: TInput,
+  startedAtMs = Date.now(),
+  storage: RecoveryStorage | null = browserSessionStorage(),
+): ToolTaskRecovery<TInput> | null {
+  if (!storage || !slug.trim() || !taskId.trim()) return null;
+  const recovery: ToolTaskRecovery<TInput> = {
+    version: 1,
+    taskId: taskId.trim(),
+    input,
+    startedAtMs,
+  };
+  try {
+    storage.setItem(toolTaskRecoveryStorageKey(slug), JSON.stringify(recovery));
+    return recovery;
+  } catch {
+    return null;
+  }
+}
+
+export function readToolTaskRecovery<TInput>(
+  slug: string,
+  options: {
+    ttlMs?: number;
+    nowMs?: number;
+    storage?: RecoveryStorage | null;
+    parseInput?: (input: unknown) => TInput | null;
+  } = {},
+): ToolTaskRecovery<TInput> | null {
+  const storage = options.storage === undefined
+    ? browserSessionStorage()
+    : options.storage;
+  if (!storage || !slug.trim()) return null;
+  const key = toolTaskRecoveryStorageKey(slug);
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as Partial<ToolTaskRecovery<unknown>>;
+    const nowMs = options.nowMs ?? Date.now();
+    const ttlMs = options.ttlMs ?? TOOL_TASK_RECOVERY_TTL_MS;
+    if (
+      parsed.version !== 1 ||
+      typeof parsed.taskId !== "string" ||
+      !parsed.taskId.trim() ||
+      typeof parsed.startedAtMs !== "number" ||
+      !Number.isFinite(parsed.startedAtMs) ||
+      parsed.startedAtMs > nowMs + 60_000 ||
+      nowMs - parsed.startedAtMs > ttlMs
+    ) {
+      storage.removeItem(key);
+      return null;
+    }
+    const input = options.parseInput
+      ? options.parseInput(parsed.input)
+      : (parsed.input as TInput);
+    if (input === null) {
+      storage.removeItem(key);
+      return null;
+    }
+    return {
+      version: 1,
+      taskId: parsed.taskId.trim(),
+      input,
+      startedAtMs: parsed.startedAtMs,
+    };
+  } catch {
+    storage.removeItem(key);
+    return null;
+  }
+}
+
+export function clearToolTaskRecovery(
+  slug: string,
+  storage: RecoveryStorage | null = browserSessionStorage(),
+) {
+  if (!storage || !slug.trim()) return;
+  try {
+    storage.removeItem(toolTaskRecoveryStorageKey(slug));
+  } catch {
+    // Recovery is best effort and must never block a user reset.
+  }
+}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
 import {
   watchLlmTask,
@@ -41,7 +41,11 @@ export function useLegacyLlmTaskWatch<TResult>() {
       taskId: string,
       pollOnce: (taskId: string) => Promise<LlmTaskWatchPollOutcome>,
       handlers: LegacyTaskWatchHandlers<TResult>,
-      options?: { pollIntervalMs?: number; graceWindowMs?: number },
+      options?: {
+        pollIntervalMs?: number;
+        graceWindowMs?: number;
+        startedAtMs?: number;
+      },
     ) => {
       stop();
       stopRef.current = watchLlmTask({
@@ -55,10 +59,19 @@ export function useLegacyLlmTaskWatch<TResult>() {
         isCancelled: () => cancelledRef.current,
         pollIntervalMs: options?.pollIntervalMs,
         graceWindowMs: options?.graceWindowMs,
+        startedAtMs: options?.startedAtMs,
       });
     },
     [stop],
   );
 
-  return { start, stop, isCancelled: () => cancelledRef.current };
+  const isCancelled = useCallback(() => cancelledRef.current, []);
+
+  // Consumers legitimately use the controller as an effect dependency. Keep
+  // its identity stable so a state update does not run their cleanup and stop
+  // the task watcher that was just started.
+  return useMemo(
+    () => ({ start, stop, isCancelled }),
+    [isCancelled, start, stop],
+  );
 }

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

@@ -15,6 +15,11 @@ import {
   submitPackageTask,
 } from "../../../host/client";
 import { watchLlmTask } from "../../../host/client";
+import {
+  clearToolTaskRecovery,
+  persistToolTaskRecovery,
+  readToolTaskRecovery,
+} from "./task-recovery";
 
 export type EngineErrorCode =
   | "validation"
@@ -47,6 +52,7 @@ export function useToolTask<TResult = unknown>(
   locale: AppLocale,
 ) {
   const [state, setState] = useState<ToolTaskState<TResult>>({ phase: "idle" });
+  const [recoveredValues, setRecoveredValues] = useState<FormValues | null>(null);
   const cancelledRef = useRef(false);
   const stopWatchRef = useRef<(() => void) | null>(null);
   const lastSnapshotRef = useRef<{ status: string; error?: string }>({
@@ -61,11 +67,76 @@ export function useToolTask<TResult = unknown>(
     };
   }, []);
 
+  const startAgentWatch = useCallback((taskId: string, startedAtMs?: number) => {
+    if (pkg.runtime.lane !== "agent") return;
+    const runtime = pkg.runtime;
+    setState({ phase: "running", taskId, status: startedAtMs ? "RESTORING" : "PENDING" });
+    stopWatchRef.current = watchLlmTask({
+      taskId,
+      startedAtMs,
+      pollIntervalMs: runtime.watch?.pollIntervalMs,
+      graceWindowMs: runtime.watch?.graceWindowMs,
+      isCancelled: () => cancelledRef.current,
+      pollOnce: async (id: string) => {
+        const snapshot = await fetchPackageTask<TResult>(pkg, id);
+        lastSnapshotRef.current = { status: snapshot.status, error: snapshot.error };
+        if (snapshot.data) {
+          return { settled: true, kind: "success", data: snapshot.data };
+        }
+        if (snapshot.status === "FAILED") {
+          return { settled: true, kind: "error", category: "task" };
+        }
+        if (snapshot.status === "RESULT_INVALID") {
+          return { settled: true, kind: "error", category: "schema" };
+        }
+        return { settled: false, pendingWriteback: true };
+      },
+      handlers: {
+        onStatus: (status: string) => {
+          setState((prev) =>
+            prev.phase === "running" ? { ...prev, status } : prev,
+          );
+        },
+        onSuccess: (data: TResult) => {
+          setState({ phase: "done", taskId, data: data as TResult });
+        },
+        onError: (category: string) => {
+          const { status, error } = lastSnapshotRef.current;
+          let code: EngineErrorCode;
+          if (category === "timeout") {
+            code =
+              status === "SUCCEEDED" || status === "AWAITING_RESULT"
+                ? "resultWritebackMissing"
+                : "resultTimeout";
+          } else if (category === "schema") {
+            code =
+              error === "wrong_result_type"
+                ? "wrongResultType"
+                : "invalidResultSchema";
+          } else {
+            code = "taskFailed";
+          }
+          setState({ phase: "error", code, taskId });
+        },
+      },
+    });
+  }, [pkg]);
+
+  useEffect(() => {
+    if (pkg.runtime.lane !== "agent") return;
+    const recovered = readToolTaskRecovery<FormValues>(pkg.meta.slug);
+    if (!recovered) return;
+    setRecoveredValues(recovered.input);
+    startAgentWatch(recovered.taskId, recovered.startedAtMs);
+  }, [pkg.meta.slug, pkg.runtime.lane, startAgentWatch]);
+
   const reset = useCallback(() => {
     stopWatchRef.current?.();
     stopWatchRef.current = null;
+    clearToolTaskRecovery(pkg.meta.slug);
+    setRecoveredValues(null);
     setState({ phase: "idle" });
-  }, []);
+  }, [pkg.meta.slug]);
 
   const start = useCallback(
     async (values: FormValues, options?: { directModel?: string }) => {
@@ -137,59 +208,12 @@ export function useToolTask<TResult = unknown>(
       }
 
       if (cancelledRef.current) return;
-      setState({ phase: "running", taskId, status: "PENDING" });
-
-      stopWatchRef.current = watchLlmTask({
-        taskId,
-        pollIntervalMs: pkg.runtime.watch?.pollIntervalMs,
-        graceWindowMs: pkg.runtime.watch?.graceWindowMs,
-        isCancelled: () => cancelledRef.current,
-        pollOnce: async (id: string) => {
-          const snapshot = await fetchPackageTask<TResult>(pkg, id);
-          lastSnapshotRef.current = { status: snapshot.status, error: snapshot.error };
-          if (snapshot.data) {
-            return { settled: true, kind: "success", data: snapshot.data };
-          }
-          if (snapshot.status === "FAILED") {
-            return { settled: true, kind: "error", category: "task" };
-          }
-          if (snapshot.status === "RESULT_INVALID") {
-            return { settled: true, kind: "error", category: "schema" };
-          }
-          return { settled: false, pendingWriteback: true };
-        },
-        handlers: {
-          onStatus: (status: string) => {
-            setState((prev) =>
-              prev.phase === "running" ? { ...prev, status } : prev,
-            );
-          },
-          onSuccess: (data: TResult) => {
-            setState({ phase: "done", taskId, data: data as TResult });
-          },
-          onError: (category: string) => {
-            const { status, error } = lastSnapshotRef.current;
-            let code: EngineErrorCode;
-            if (category === "timeout") {
-              code =
-                status === "SUCCEEDED" || status === "AWAITING_RESULT"
-                  ? "resultWritebackMissing"
-                  : "resultTimeout";
-            } else if (category === "schema") {
-              code =
-                error === "wrong_result_type"
-                  ? "wrongResultType"
-                  : "invalidResultSchema";
-            } else {
-              code = "taskFailed";
-            }
-            setState({ phase: "error", code, taskId });
-          },
-        },
-      });
+      const startedAtMs = Date.now();
+      persistToolTaskRecovery(pkg.meta.slug, taskId, values, startedAtMs);
+      startAgentWatch(taskId, startedAtMs);
     },
-    [locale, pkg],
+    [locale, pkg, startAgentWatch],
   );
 
-  return { state, start, reset } as const;
+  return { state, start, reset, recoveredValues } as const;
 }

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

@@ -44,7 +44,7 @@ import {
     buildGeneratedAssetSlots,
     clampAssetCount,
     dimensionsForAssetFormat,
-    widthForAssetFormat,
+    gridClassForAssetFormat,
 } from "./asset-slots";
 import {
     LOGO_REFERENCE_MAX_DATA_URL_LENGTH,
@@ -84,6 +84,13 @@ import type {
     OutputLanguageKey,
     StyleKey
 } from "./types";
+import {
+    clearToolTaskRecovery,
+    persistToolTaskRecovery,
+    readToolTaskRecovery,
+} from "../../../../components/tools/engine/task-recovery";
+
+const RECOVERY_SLUG = "app-store-screenshot-generator";
 
 export function AppStoreScreenshotGenerator() {
   const locale = useLocale();
@@ -114,6 +121,21 @@ export function AppStoreScreenshotGenerator() {
   const [logoDragActive, setLogoDragActive] = useState(false);
   const { brief: activityBrief } = useToolHandoff();
 
+  useEffect(() => {
+    const recovered = readToolTaskRecovery(RECOVERY_SLUG, {
+      parseInput: (value) => {
+        const parsed = appStoreScreenshotGeneratorInputSchema.safeParse(value);
+        return parsed.success ? parsed.data : null;
+      },
+    });
+    if (!recovered) return;
+    setDraft(recovered.input);
+    setScreenshotReferences(recovered.input.screenshotReferences);
+    void runGeneration(recovered.input, recovered.taskId, recovered.startedAtMs);
+    // Restore only once for this mounted tool route.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (!activityBrief || busy || !output) return;
     publishActivityArtifact(
@@ -138,9 +160,12 @@ export function AppStoreScreenshotGenerator() {
     () => downloadableAssets.filter((asset) => downloadSelectionIds.has(asset.id)),
     [downloadSelectionIds, downloadableAssets],
   );
+  const soleDownloadableAsset = downloadableAssets.length === 1 ? downloadableAssets[0] : null;
   const downloadButtonLabel = downloadSelectionMode
     ? `${t("download")} ${selectedDownloadAssets.length}/${downloadableAssets.length}`
-    : t("download");
+    : soleDownloadableAsset
+      ? t("downloadPng")
+      : t("download");
 
   async function submit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -179,8 +204,16 @@ export function AppStoreScreenshotGenerator() {
       return;
     }
 
+    await runGeneration(parsed.data);
+  }
+
+  async function runGeneration(
+    input: AppStoreScreenshotGeneratorInput,
+    recoveredTaskId?: string,
+    recoveredStartedAtMs?: number,
+  ) {
     try {
-      setDraft(parsed.data);
+      setDraft(input);
       setBusy(true);
       setOutput(null);
       setSelectedId(null);
@@ -190,16 +223,16 @@ export function AppStoreScreenshotGenerator() {
       setGenerationProgress({
         phase: "submitting",
         completedCount: 0,
-        totalCount: expectedAssetCount(parsed.data),
+        totalCount: expectedAssetCount(input),
         failedCount: 0,
-        estimatedRemainingSeconds: initialEstimatedSeconds(parsed.data),
+        estimatedRemainingSeconds: initialEstimatedSeconds(input),
       });
       requestAnimationFrame(() => {
         resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
       });
 
       const generated = await generateStoreAssets(
-        parsed.data,
+        input,
         locale,
         (progress) => {
           const parsedProgressOutput = appStoreScreenshotGeneratorOutputSchema.safeParse(
@@ -226,11 +259,18 @@ export function AppStoreScreenshotGenerator() {
           updateGenerationProgress({
             phase: "planning",
             completedCount: 0,
-            totalCount: expectedAssetCount(parsed.data),
+            totalCount: expectedAssetCount(input),
             failedCount: 0,
-            estimatedRemainingSeconds: initialEstimatedSeconds(parsed.data),
+            estimatedRemainingSeconds: initialEstimatedSeconds(input),
           });
         },
+        {
+          taskId: recoveredTaskId,
+          startedAtMs: recoveredStartedAtMs,
+          onTaskSubmitted: (taskId, startedAtMs) => {
+            persistToolTaskRecovery(RECOVERY_SLUG, taskId, input, startedAtMs);
+          },
+        },
       );
       const parsedOutput = appStoreScreenshotGeneratorOutputSchema.safeParse(generated.output);
 
@@ -286,6 +326,7 @@ export function AppStoreScreenshotGenerator() {
   }
 
   function reset() {
+    clearToolTaskRecovery(RECOVERY_SLUG);
     setOutput(null);
     setSelectedId(null);
     setLightboxIndex(null);
@@ -451,6 +492,14 @@ export function AppStoreScreenshotGenerator() {
     if (!downloadableAssets.length || downloading) return;
     setDownloadError(null);
 
+    if (soleDownloadableAsset) {
+      await downloadAssets([soleDownloadableAsset], {
+        forceZip: false,
+        zipName: buildScreenshotsZipName(draft, "selected"),
+      });
+      return;
+    }
+
     if (!downloadSelectionMode) {
       setDownloadSelectionMode(true);
       setDownloadSelectionIds(
@@ -483,6 +532,15 @@ export function AppStoreScreenshotGenerator() {
     });
   }
 
+  function handleDownloadSvgClick(asset: AppStoreScreenshotAsset) {
+    if (!asset.svg || downloading) return;
+    setDownloadError(null);
+    downloadBlob(
+      new Blob([asset.svg], { type: "image/svg+xml;charset=utf-8" }),
+      `${assetFileBase(draft, asset)}.svg`,
+    );
+  }
+
   function cancelDownloadSelection() {
     setDownloadSelectionMode(false);
     setDownloadSelectionIds(new Set());
@@ -960,6 +1018,18 @@ export function AppStoreScreenshotGenerator() {
                         {downloading ? t("downloading") : downloadButtonLabel}
                       </span>
                     </Button>
+                    {soleDownloadableAsset?.svg ? (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => handleDownloadSvgClick(soleDownloadableAsset)}
+                        disabled={downloading}
+                        className="h-10 rounded-lg border-[#D8D4CA] bg-white px-4 text-xs font-semibold text-[#111111] shadow-none hover:bg-[#F4F4F4] disabled:pointer-events-none disabled:opacity-55"
+                      >
+                        <Download aria-hidden className="size-4" />
+                        {t("downloadSvg")}
+                      </Button>
+                    ) : null}
                     {downloadSelectionMode ? (
                       <Button
                         type="button"
@@ -1057,7 +1127,13 @@ export function AppStoreScreenshotGenerator() {
                     </div>
                   </div>
                 ) : null}
-                <div className="flex flex-wrap items-start gap-4">
+                <div
+                  className={`grid items-start gap-4 ${
+                    resultSlots.length === 1
+                      ? "grid-cols-1"
+                      : "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
+                  }`}
+                >
                   {resultSlots.map(({ asset, format, slot }) => {
                     if (!asset) {
                       const dimensions = dimensionsForAssetFormat(format);
@@ -1066,11 +1142,8 @@ export function AppStoreScreenshotGenerator() {
                           key={`pending-${slot}`}
                           aria-label={t("pendingImageLoading", { index: slot })}
                           role="status"
-                          style={{
-                            aspectRatio: `${dimensions.width} / ${dimensions.height}`,
-                            width: widthForAssetFormat(format),
-                          }}
-                          className="flex max-w-full flex-col items-center justify-center rounded-lg border border-dashed border-[#D8D4CA] bg-white p-4 text-center shadow-[0_8px_22px_rgba(17,17,17,0.04)]"
+                          style={{ aspectRatio: `${dimensions.width} / ${dimensions.height}` }}
+                          className={`flex w-full max-w-full flex-col items-center justify-center rounded-lg border border-dashed border-[#D8D4CA] bg-white p-4 text-center shadow-[0_8px_22px_rgba(17,17,17,0.04)] ${gridClassForAssetFormat(format, resultSlots.length === 1)}`}
                         >
                           <span className="flex size-10 items-center justify-center rounded-lg bg-[#F4F4F4] text-[#111111]">
                             <Loader2 aria-hidden className="size-4 animate-spin" />
@@ -1092,8 +1165,7 @@ export function AppStoreScreenshotGenerator() {
                     return (
                       <div
                         key={asset.id}
-                        style={{ width: widthForAssetFormat(asset.format) }}
-                        className="relative max-w-full"
+                        className={`relative w-full max-w-full ${gridClassForAssetFormat(asset.format, resultSlots.length === 1)}`}
                       >
                         <button
                           type="button"

package/src/features/tools/app-store-screenshot-generator/widget/asset-slots.test.ts

@@ -0,0 +1,52 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+
+import type { AppStoreScreenshotAsset } from "../../../../lib/tools/app-store-screenshot-generator-schema";
+
+import {
+  buildGeneratedAssetSlots,
+  gridClassForAssetFormat,
+} from "./asset-slots";
+
+function asset(overrides: Partial<AppStoreScreenshotAsset>): AppStoreScreenshotAsset {
+  return {
+    id: "asset-1",
+    platform: "google",
+    format: "googlePhone",
+    width: 1080,
+    height: 1920,
+    imageUrl: "https://example.com/generated.png",
+    ...overrides,
+  };
+}
+
+describe("app store screenshot result slots", () => {
+  it("keeps completed and pending Google assets in the same ordered slot model", () => {
+    const slots = buildGeneratedAssetSlots({
+      assets: [asset({ id: "phone-2", slot: 2 })],
+      expectedCount: 3,
+      includePending: true,
+      platform: "google",
+      totalCount: 3,
+    });
+
+    assert.deepEqual(
+      slots.map(({ asset: result, format, slot }) => ({ id: result?.id, format, slot })),
+      [
+        { id: undefined, format: "featureGraphic", slot: 1 },
+        { id: "phone-2", format: "googlePhone", slot: 2 },
+        { id: undefined, format: "googlePhone", slot: 3 },
+      ],
+    );
+  });
+
+  it("lets feature graphics span the responsive result grid", () => {
+    assert.equal(gridClassForAssetFormat("featureGraphic"), "sm:col-span-2 xl:col-span-3");
+    assert.equal(gridClassForAssetFormat("iphone"), "");
+  });
+
+  it("centers a sole result at an inspectable width without creating implicit grid columns", () => {
+    assert.equal(gridClassForAssetFormat("featureGraphic", true), "mx-auto max-w-[340px]");
+    assert.equal(gridClassForAssetFormat("iphone", true), "mx-auto max-w-[340px]");
+  });
+});