@goodandready/dsh-image-gen 0.10.24 → 0.10.26

package/README.md

@@ -41,6 +41,19 @@
 
 ---
 
+## 🚀 Updates v0.10.26: Architecture Decomposition & Repository Sanitization (#235, #238, #239)
+* **Architecture & Modular Decomposition (#239)**: All server modules in `lib/` now strictly meet the <= 600 line threshold: extracted `lib/tools/generation-pack.js` (74 lines, reduces `lib/tools/generation.js` to 547 lines), `lib/history.js` (93 lines), and `lib/attachment-helper.js` (82 lines, reduces `lib/index.js` to 557 lines). Client codebase modularized across 15 sub-modules in `src/client/*` (all <= 337 lines).
+* **Repository Sanitization (#235)**: Internal agent workflow files (`AGENTS.md`, `index.md`) fully untracked from Git and excluded via `.gitignore` and `.gitattributes`.
+* **Theme Parity Completed (#238)**: Full verification and closure of zero-standalone-color rule across all Web UI surfaces with native `--dsw-alias-*` variables and `color-mix(...)` state tints.
+* **Package Integrity**: Added canonical `README.ru.md` and `README.zh.md` to npm package `files` allowlist.
+
+## 🚀 Updates v0.10.25: Theme Color Parity, Responsive Mockups, Patterns & Spritesheets (#173, #177, #178, #238)
+* **100% Theme Color Parity (#238)**: Completely replaced all hardcoded `rgba(...)` and hex color literals in the Web UI (`src/client/10-css.js`, `src/client/80-gallery.js`) with native DSH theme variables (`--dsw-alias-*`) and dynamic `color-mix(...)`. Badges, alerts, and modal overlays automatically adapt to light and dark themes with zero hardcoded values.
+* **Responsive Multi-Device Mockup Generator (`generate_responsive_mockups`, #173)**: Single product prompt generates coherent Mobile (9:16), Tablet (3:4), and Desktop (16:9) viewports in parallel via `asyncPool` concurrency limit (3). Interactive toolview with tabbed preview navigation.
+* **Seamless Pattern Generator (`generate_seamless_pattern`, #178)**: Automated tileable background texture generation with periodic boundary condition checks and CSS tiling preview.
+* **2D Spritesheet Generator (`generate_spritesheet`, #177)**: Produces horizontal animation strips with CSS keyframe generator and multi-frame SVG previews for 2D game dev and web UI animations.
+* **Client Modular Source Build (#244)**: Decomposed monolithic `lib/client.js` into 15 structured fragments under `src/client/*` with automated build runner `scripts/build-client.mjs`. Preflight check `FAIL=0`, 179/179 automated tests passing.
+
 ## 🚀 Updates v0.10.24: Quality Block — Publication Boundary, Settings Status, Theme Colors & Module Split (#235–#242)
 * **Publication Boundary**: Added `.gitattributes` with `export-ignore` for `AGENTS.md`, `index.md`, `docs/`, and `.gitea/` so GitHub source archives and `git archive` no longer ship internal workflow files.
 * **Settings Status Fallback**: Corrected provider/config status handling in the Settings Card so partial/unknown states no longer show a false “unavailable”.
@@ -117,6 +130,7 @@
 * **`vectorize_image`**: Convert raster graphics to clean scalable SVG vectors with palette quantization.
 * **`blend_images`**: Multi-reference composition mixing.
 * **`generate_image_pack`**: Simultaneous multi-aspect ratio rendering with graceful partial recovery.
+* **`generate_responsive_mockups` (#173)**: One shared product prompt rendered as Mobile (9:16), Tablet (3:4) and Desktop (16:9) UI mockups in parallel. Keeps style/palette coherent across viewports, saves `mockup-mobile.png` / `mockup-tablet.png` / `mockup-desktop.png`, and shows a tabbed viewport preview in chat.
 * **`compare_images`**: Pixel-level visual difference ratio comparison.
 * **`inspect_image_quality`**: Automated visual audit, Laplacian sharpness scoring, and defect detection.
 * **`extract_design_tokens`**: Extract CSS Variables, Tailwind color palettes, and W3C Design Tokens from concept art (#172).

package/README.ru.md

@@ -34,6 +34,19 @@
 </div>
 
 ---
+## 🚀 Обновления v0.10.26: Архитектурная декомпозиция и чистота репозитория (#235, #238, #239)
+* **Архитектурная декомпозиция модулей (#239)**: Все серверные модули в `lib/` приведены к проектному стандарту <= 600 строк: генерация пакетов вынесена в `lib/tools/generation-pack.js` (74 строки, `generation.js` снижен до 547 строк), кэш и история — в `lib/history.js` (93 строки), вложения и сайдкары — в `lib/attachment-helper.js` (82 строки, `index.js` снижен до 557 строк). Клиентский код полностью разбит на 15 модулей в `src/client/*` (каждый <= 337 строк).
+* **Чистота репозитория (#235)**: Служебные файлы агентов (`AGENTS.md`, `index.md`) сняты с git-отслеживания и защищены правилами в `.gitignore` и `.gitattributes`.
+* **Паритет тем оформления (#238)**: Полная верификация и закрытие правила нулевого хардкода цветов для всех поверхностей UI через системные токены `--dsw-alias-*` и `color-mix(...)`.
+* **Целостность пакета**: Манифест `files` в `package.json` расширен языковыми файлами `README.ru.md` и `README.zh.md`.
+
+## 🚀 Обновления v0.10.25: Чистота темы DSH, адаптивные мокапы, бесшовные паттерны и спрайтшиты (#173, #177, #178, #238)
+* **100% адаптация под переменные темы DSH (#238)**: Полностью устранены все захардкоженные литералы `rgba(...)` и hex-цветов в клиентской части (`src/client/10-css.js`, `src/client/80-gallery.js`). Полупрозрачные статусные фоны бейджей, алертов и модальных оверлеев переведены на динамическое смешивание токенов темы через `color-mix(...)`.
+* **Генератор адаптивных интерфейсных мокапов (`generate_responsive_mockups`, #173)**: Генерация согласованного набора экранов Mobile (9:16), Tablet (3:4) и Desktop (16:9) по единому промпту с параллельным выполнением через `asyncPool` (concurrency 3) и интерактивным таб-интерфейсом в карточке чата.
+* **Генератор бесшовных текстур и паттернов (`generate_seamless_pattern`, #178)**: Создание тайлящихся фоновых текстур со встроенным контролем швов и готовым CSS-предпросмотром.
+* **Генератор 2D-спрайтшитов (`generate_spritesheet`, #177)**: Формирование горизонтальных раскадровок анимации персонажей и UI с автогенерацией CSS `@keyframes` и SVG-превью полосы кадров.
+* **Модульная сборка клиента (#244)**: Клиентская часть разнесена на 15 структурированных модулей в `src/client/*` со скриптом сборки `scripts/build-client.mjs`. Preflight-проверка `FAIL=0`, 179 из 179 тестов успешно пройдены.
+
 ## 🚀 Обновления v0.10.24: Блок качества — публикационная граница, статусы настроек, цвета темы и разбиение модулей (#235–#242)
 * **Публикационная граница**: добавлен `.gitattributes` c `export-ignore` для `AGENTS.md`, `index.md`, `docs/` и `.gitea/` — архивы GitHub source и `git archive` больше не содержат внутренние файлы workflow.
 * **Статусы настроек**: исправлен fallback статуса провайдера/конфигурации в карточке настроек — промежуточные/неизвестные состояния больше не показываются ложным «unavailable».
@@ -157,6 +170,7 @@ graph LR
 | **`vectorize_image`** | Векторизация растра в чистый SVG с квантованием палитры | `image`, `color_mode`, `paletteSize` |
 | **`blend_images`** | Смешивание нескольких изображений в единую композицию | `images`, `weights`, `prompt` |
 | **`generate_image_pack`** | Пакетный рендеринг форматов 1:1, 16:9, 9:16 с сохранением частичных результатов | `prompt`, `aspect_ratios` |
+| **`generate_responsive_mockups`** | Пакетная адаптивная генерация UI-mockup под Mobile 9:16, Tablet 3:4 и Desktop 16:9 с единой палитрой/стилем; табы в toolview (#173) | `prompt`, `devices`, `style_preset`, `palette_colors`, `seed` |
 | **`compare_images`** | Сравнение двух картинок (доля различий пикселей) | `image_a`, `image_b` |
 | **`inspect_image_quality`** | Аудит качества, расчет резкости и проверка дефектов | `image`, `expected_elements` |
 

package/README.zh.md

@@ -47,6 +47,19 @@
 
 ---
 
+## 🚀 更新 v0.10.26: 架构模块化拆分与仓库源码净化 (#235, #238, #239)
+* **架构模块化拆分 (#239)**：所有服务端模块均严格符合 <= 600 行规范：提取 `lib/tools/generation-pack.js` (74行，`generation.js` 降至 547行)、`lib/history.js` (93行) 与 `lib/attachment-helper.js` (82行，`index.js` 降至 557行)。客户端源码解耦为 `src/client/*` 15 个子模块（均 <= 337 行）。
+* **仓库源码净化 (#235)**：内部智能体指令文件 (`AGENTS.md`, `index.md`) 已从 Git 索引彻底移除并加入 `.gitignore` 与 `.gitattributes`。
+* **主题规范对齐 (#238)**：全面完成所有 Web UI 界面的零硬编码颜色验证与关闭，深度适配 `--dsw-alias-*` 与 `color-mix(...)`。
+* **包分发完整性**：正式将 `README.ru.md` 与 `README.zh.md` 收录至 npm `files` 发布白名单。
+
+## 🚀 更新 v0.10.25: DSH 主题颜色适配、响应式多端原型、无缝纹理与精灵图导出 (#173, #177, #178, #238)
+* **100% 主题变量原生适配 (#238)**: 彻底移除客户端代码中的所有写死 `rgba(...)` 和 Hex 颜色（`src/client/10-css.js`、`src/client/80-gallery.js`），徽章、提示栏和画廊遮罩全部通过 `color-mix(...)` 配合 `--dsw-alias-*` 主题变量动态生成，完美兼容深色与浅色主题。
+* **多端响应式原型生成器 (`generate_responsive_mockups`, #173)**: 输入单个产品提示词，并发生成风格统一的移动端 (9:16)、平板端 (3:4) 与桌面端 (16:9) UI 原型，支持聊天卡片中的分栏切换预览。
+* **无缝平铺纹理生成器 (`generate_seamless_pattern`, #178)**: 自动生成四方连续平铺背景图，内置接缝平滑度校验与 CSS 平铺预览参数。
+* **2D 逐帧精灵图生成器 (`generate_spritesheet`, #177)**: 自动化横向动画序列帧渲染，内置 CSS `@keyframes` 动画代码与 SVG 多帧预览条。
+* **客户端源码模块化重构 (#244)**: 将原本庞大的单文件拆分为 `src/client/*` 目录下 15 个独立职责模块，配套 `scripts/build-client.mjs` 构建机制。Preflight 检查 `FAIL=0`，179/179 项自动化测试全绿。
+
 ## 🚀 更新 v0.10.24: 质量加固 — 发布边界、设置状态、主题颜色与模块拆分 (#235–#242)
 * **发布边界**: 新增 `.gitattributes`，对 `AGENTS.md`、`index.md`、`docs/`、`.gitea/` 设置 `export-ignore`，GitHub source 归档与 `git archive` 不再包含内部工作流文件。
 * **设置状态回退**: 修正设置卡片中的提供方/配置状态处理，部分或未知状态不再误显示为 “unavailable”。
@@ -71,6 +84,7 @@
 * **智能比例无损画布裁切器 (`smart_crop_image`)**: 快速裁切适配各大社交与设计标准比例 (`1:1`, `16:9`, `9:16`, `4:3`, `3:2`, `2:3`)，支持自动对焦、三分法构图 (`rule_of_thirds`) 与黑边留白 (`letterbox`)。
 * **品牌资源套件导出器 (`export_asset_pack`)**: 一键生成生产级网站与 PWA 资源套件：SVG Favicon、PWA 推荐图标套件 (`icon-192.svg`, `icon-512.svg`)、`manifest.webmanifest`、1200×630 社交分享预览卡片 (`og-card.svg`) 与索引 `catalog.json`。
 * **覆盖 12 大视觉工具的交互 Toolview**: 在对话中直接提供重混、放大、裁切与栅格拼图的可视化操作。
+* **响应式多端 Mockup 套件 (`generate_responsive_mockups`, #173)**: 同一产品提示词并行生成 Mobile 9:16、Tablet 3:4、Desktop 16:9 三端 UI mockup，统一风格与品牌色，保存为 `mockup-mobile.png` / `mockup-tablet.png` / `mockup-desktop.png`，对话内以三标签页预览。
 * **严谨的中英双语界面**: 完整的 `zh` 和 `en` 词典覆盖。
 
 ## 🚀 更新 v0.10.19: 侧边栏内置图库、连接诊断与风格引擎 (#224)

package/lib/attachment-helper.js

@@ -0,0 +1,82 @@
+import path from 'node:path'
+import { mkdir, writeFile } from 'node:fs/promises'
+import { saveAttachmentSafe, buildSidecar, toLosslessJson } from './providers.js'
+import { buildDualOutputMarkdown } from './resolve-image.js'
+
+export async function saveAndAttachResult(ctx, exec, cfg, {
+  bytes,
+  mediaType,
+  name,
+  stem,
+  prompt,
+  size,
+  format,
+  seed,
+  provider,
+  model,
+  cost,
+  sourceUrl,
+  deliverAs,
+  args = {},
+  action = 'generated',
+}) {
+  const { attachment, localUrl } = await saveAttachmentSafe(ctx, { bytes, mediaType, name })
+
+  const sessionCwd = exec?.agent?.session?.header?.cwd
+  const targetDir = (args.output_dir && String(args.output_dir).trim()) || cfg.outputDir || 'generated/images'
+  const outDir = path.resolve(sessionCwd || process.cwd(), targetDir)
+  await mkdir(outDir, { recursive: true })
+  const filePath = path.join(outDir, name)
+  await writeFile(filePath, bytes)
+
+  await writeFile(
+    path.join(outDir, `${stem}.json`),
+    JSON.stringify(buildSidecar({
+      prompt,
+      size,
+      format,
+      seed,
+      provider,
+      deliverAs,
+      width: attachment.width,
+      height: attachment.height,
+      mediaType,
+      attachmentId: attachment.attachmentId,
+      url: deliverAs === 'image' && sourceUrl ? sourceUrl : localUrl,
+      cost,
+    }), null, 2),
+  )
+
+  const summary = buildDualOutputMarkdown({
+    action,
+    filePath,
+    width: attachment.width,
+    height: attachment.height,
+    mediaType,
+    seed,
+    provider,
+    model: model || cfg.model || cfg.customModel || 'default',
+    cost,
+    attachmentId: attachment.attachmentId,
+  })
+
+  return toLosslessJson({
+    summary,
+    path: filePath,
+    url: deliverAs === 'image' && sourceUrl ? sourceUrl : localUrl,
+    width: attachment.width,
+    height: attachment.height,
+    seed,
+    prompt,
+    cost,
+    format: mediaType.replace('image/', ''),
+    attachment: {
+      attachmentId: attachment.attachmentId,
+      mediaType: attachment.mediaType,
+      bytes: attachment.bytes,
+      width: attachment.width,
+      height: attachment.height,
+      name: attachment.name,
+    },
+  })
+}

package/lib/client.js

@@ -1,3 +1,4 @@
+// GENERATED by scripts/build-client.mjs — do not edit. Sources: src/client/*
 // Plugin Settings Card (settings.plugin.item) and Toolviews for @goodandready/dsh-image-gen
 window.__ModuleLoader__.load({
   id: '@goodandready/dsh-image-gen',
@@ -75,9 +76,9 @@ window.__ModuleLoader__.load({
 .ig-stat-lbl{font-size:12px;color:var(--dsw-alias-label-secondary)}
 
 .ig-badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);display:inline-flex;align-items:center;gap:5px;font-weight:500}
-.ig-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:rgba(16,185,129,0.08)}
-.ig-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:rgba(245,158,11,0.08)}
-.ig-badge-bad{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:rgba(239,68,68,0.08)}
+.ig-badge-ok{border-color:var(--dsw-alias-state-success-primary);color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 8%, transparent)}
+.ig-badge-warn{border-color:var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);background:color-mix(in srgb, var(--dsw-alias-state-warning-primary) 8%, transparent)}
+.ig-badge-bad{border-color:var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent)}
 
 .ig-tabs{display:flex;gap:6px;border-bottom:1px solid var(--dsw-alias-border-l2);padding-bottom:8px;margin-bottom:6px;overflow-x:auto}
 .ig-tab-btn{appearance:none;font:inherit;cursor:pointer;border:1px solid transparent;border-radius:6px;padding:6px 12px;font-size:13px;background:transparent;color:var(--dsw-alias-label-secondary);font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:all .15s ease}
@@ -100,22 +101,22 @@ window.__ModuleLoader__.load({
 .ig-btn-primary{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3);border-color:transparent}
 .ig-btn-primary:hover:not(:disabled){opacity:0.9}
 .ig-btn-danger{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary)}
-.ig-btn-danger:hover:not(:disabled){background:var(--dsw-alias-state-error-bg,rgba(239,68,68,0.12));border-color:var(--dsw-alias-state-error-primary)}
+.ig-btn-danger:hover:not(:disabled){background:var(--dsw-alias-state-error-bg, color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent));border-color:var(--dsw-alias-state-error-primary)}
 .ig-btn-disabled{opacity:0.5;cursor:not-allowed}
 
 .ig-reset{font-size:11px;color:var(--dsw-alias-state-brand-primary);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline}
 .ig-reset:hover{opacity:0.8}
 
-.ig-alert-ok{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-success-bg,rgba(16,185,129,0.1));color:var(--dsw-alias-state-success-primary);font-size:13px}
-.ig-alert-bad{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-error-bg,rgba(239,68,68,0.1));color:var(--dsw-alias-state-error-primary);font-size:13px}
-.ig-alert-err{padding:10px 14px;border-radius:8px;background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);font-size:13px}
-.ig-banner-warning{padding:12px 16px;border-radius:8px;background:rgba(245,158,11,0.12);border:1px solid var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);font-size:13px;display:flex;align-items:center;gap:10px;font-weight:500}
+.ig-alert-ok{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-success-bg, color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent));color:var(--dsw-alias-state-success-primary);font-size:13px}
+.ig-alert-bad{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-error-bg, color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent));color:var(--dsw-alias-state-error-primary);font-size:13px}
+.ig-alert-err{padding:10px 14px;border-radius:8px;background:var(--dsw-alias-state-error-bg, color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent));color:var(--dsw-alias-state-error-primary);font-size:13px}
+.ig-banner-warning{padding:12px 16px;border-radius:8px;background:var(--dsw-alias-state-warning-bg, color-mix(in srgb, var(--dsw-alias-state-warning-primary) 12%, transparent));border:1px solid var(--dsw-alias-state-warning-primary);color:var(--dsw-alias-state-warning-primary);font-size:13px;display:flex;align-items:center;gap:10px;font-weight:500}
 
 /* Backward-compatibility alias styles for toolview */
 .fal_head{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--dsw-alias-label-primary)}
 .ig-prompt{font-size:13px;padding:8px 12px;background:var(--dsw-alias-bg-layer-2);border-radius:6px;border:1px solid var(--dsw-alias-border-l2);margin-bottom:8px;word-break:break-word}
 .ig-meta{font-size:11px;color:var(--dsw-alias-label-secondary);margin-top:6px}
-.ig-err{padding:10px;border-radius:6px;background:var(--dsw-alias-state-error-bg,rgba(239,68,68,0.1));color:var(--dsw-alias-state-error-primary);font-size:12px}
+.ig-err{padding:10px;border-radius:6px;background:var(--dsw-alias-state-error-bg, color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent));color:var(--dsw-alias-state-error-primary);font-size:12px}
 `
       document.head.appendChild(style)
     }
@@ -826,9 +827,9 @@ window.__ModuleLoader__.load({
                     left: 0,
                     right: 0,
                     padding: '4px 6px',
-                    background: 'linear-gradient(transparent, var(--dsw-alias-overlay-scrim,rgba(0,0,0,0.8)))',
+                    background: 'linear-gradient(transparent, var(--dsw-alias-overlay-scrim, color-mix(in srgb, var(--dsw-alias-bg-layer-0, black) 80%, transparent)))',
                     fontSize: '10px',
-                    color: 'var(--dsw-alias-label-on-overlay,#fff)',
+                    color: 'var(--dsw-alias-label-on-overlay, var(--dsw-alias-label-primary, white))',
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
@@ -846,7 +847,7 @@ window.__ModuleLoader__.load({
               style: {
                 position: 'fixed',
                 inset: 0,
-                background: 'var(--dsw-alias-overlay-backdrop,rgba(0,0,0,0.7))',
+                background: 'var(--dsw-alias-overlay-backdrop, color-mix(in srgb, var(--dsw-alias-bg-layer-0, black) 70%, transparent))',
                 zIndex: 10000,
                 display: 'flex',
                 alignItems: 'center',
@@ -889,7 +890,7 @@ window.__ModuleLoader__.load({
               ),
               react.createElement('img', {
                 src: selected.thumbnailUrl || (selected.attachmentId ? '/dsh-image-gen/image?id=' + encodeURIComponent(selected.attachmentId) : ''),
-                style: { width: '100%', borderRadius: '8px', maxHeight: '340px', objectFit: 'contain', background: 'var(--dsw-alias-bg-layer-1,#0a0a0c)' },
+                style: { width: '100%', borderRadius: '8px', maxHeight: '340px', objectFit: 'contain', background: 'var(--dsw-alias-bg-layer-1, var(--dsw-alias-bg-layer-2, transparent))' },
               }),
               react.createElement(
                 'div',
@@ -1002,7 +1003,7 @@ window.__ModuleLoader__.load({
                 background: 'var(--dsw-alias-bg-layer-3)',
                 border: '1px solid var(--dsw-alias-border-l2)',
                 borderRadius: '12px',
-                boxShadow: 'var(--dsw-alias-shadow-overlay,0 8px 32px rgba(0,0,0,0.4))',
+                boxShadow: 'var(--dsw-alias-shadow-overlay, 0 8px 32px color-mix(in srgb, var(--dsw-alias-bg-layer-0, black) 40%, transparent))',
                 zIndex: 9999,
                 padding: '16px',
                 overflowY: 'auto',
@@ -1276,16 +1277,87 @@ window.__ModuleLoader__.load({
       }
     }
 
+    function tryParseJsonObject(text) {
+      if (typeof text !== 'string') return null
+      const start = text.indexOf('{')
+      const end = text.lastIndexOf('}')
+      if (start < 0 || end <= start) return null
+      try {
+        return JSON.parse(text.slice(start, end + 1))
+      } catch (_) {
+        return null
+      }
+    }
+
+    function attachmentImageUrl(a) {
+      if (!a) return ''
+      if (a.url && typeof a.url === 'string') return a.url
+      const query = 'id=' + encodeURIComponent(a.attachmentId ?? a.id ?? '')
+        + '&mt=' + encodeURIComponent(a.mediaType || 'image/png')
+        + '&b=' + encodeURIComponent(String(a.bytes ?? 0))
+        + '&w=' + encodeURIComponent(String(a.width ?? 0))
+        + '&h=' + encodeURIComponent(String(a.height ?? 0))
+      return '/dsh-image-gen/image?' + query
+    }
+
+    function readResponsiveImages(block) {
+      if (!block) return []
+      const text = String(block.output || block.text || '')
+      const tagMatch = text.match(/<dsh-image-gen-responsive>([\s\S]*?)<\/dsh-image-gen-responsive>/)
+      const bag = [
+        block.images,
+        block.result && block.result.images,
+        block.data && block.data.images,
+        tagMatch && tryParseJsonObject(tagMatch[1])?.images,
+        tryParseJsonObject(text)?.images,
+        tryParseJsonObject(block.result)?.images,
+      ]
+      for (const list of bag) {
+        if (!Array.isArray(list)) continue
+        const images = list
+          .map((item, index) => {
+            if (!item || typeof item !== 'object') return null
+            const attachment = item.attachment || null
+            const url = attachmentImageUrl(attachment) || item.url || ''
+            const rawDevice = String(item.device || '').toLowerCase()
+            const device = ['mobile', 'tablet', 'desktop'].includes(rawDevice)
+              ? rawDevice
+              : `device-${index + 1}`
+            const label = item.label
+              || (device === 'mobile' ? 'Mobile'
+                : device === 'tablet' ? 'Tablet'
+                  : device === 'desktop' ? 'Desktop'
+                    : `#${index + 1}`)
+            return {
+              device,
+              label,
+              aspect: item.aspect || '',
+              width: item.width || (attachment && attachment.width) || 0,
+              height: item.height || (attachment && attachment.height) || 0,
+              url,
+              attachment,
+              path: item.path || '',
+              seed: item.seed,
+            }
+          })
+          .filter(Boolean)
+        if (images.length >= 2) return images
+      }
+      return []
+    }
+
     function FalImageCard(props) {
       const block = props.block
       const running = !('kind' in (block || {}))
       const failed = block && (block.isError || block.error !== undefined)
       const parsed = readResult(block)
+      const responsiveImages = !failed && !running ? readResponsiveImages(block) : []
       const t = props.t || ((k) => k)
       const [remixOpen, setRemixOpen] = react.useState(false)
       const [remixStrength, setRemixStrength] = react.useState(0.45)
       const [remixPrompt, setRemixPrompt] = react.useState('')
       const [copiedRemix, setCopiedRemix] = react.useState(false)
+      const [responsiveTab, setResponsiveTab] = react.useState(0)
 
       react.useEffect(() => {
         ensureCss()
@@ -1348,6 +1420,64 @@ window.__ModuleLoader__.load({
       }
       if (failed) {
         body.push(react.createElement('div', { className: 'ig-err', key: 'e' }, parsed.text || t('card.unknownError')))
+      } else if (responsiveImages.length) {
+        const activeIdx = Math.min(responsiveTab, responsiveImages.length - 1)
+        const active = responsiveImages[activeIdx]
+        body.push(
+          react.createElement(
+            'div',
+            {
+              className: 'ig-tabs',
+              role: 'tablist',
+              'aria-label': t('card.responsiveTabs') || 'Responsive viewports',
+              key: 'rtabs',
+            },
+            responsiveImages.map((img, idx) =>
+              react.createElement(
+                'button',
+                {
+                  key: img.device,
+                  type: 'button',
+                  role: 'tab',
+                  'aria-selected': idx === activeIdx,
+                  className: idx === activeIdx ? 'ig-tab-btn ig-tab-btn-active' : 'ig-tab-btn',
+                  onClick: () => setResponsiveTab(idx),
+                },
+                (img.label || img.device) + (img.aspect ? ' · ' + img.aspect : '')
+              )
+            )
+          ),
+          active && active.url
+            ? react.createElement('img', {
+              key: 'ri',
+              src: active.url,
+              alt: prompt || (active.label + ' responsive mockup'),
+              loading: 'lazy',
+              style: {
+                maxWidth: '100%',
+                borderRadius: '8px',
+                border: '1px solid var(--dsw-alias-border-l2)',
+              },
+            })
+            : null,
+          active
+            ? react.createElement(
+              'div',
+              {
+                key: 'rmeta',
+                style: {
+                  marginTop: '6px',
+                  fontSize: '11px',
+                  color: 'var(--dsw-alias-label-secondary)',
+                },
+              },
+              [
+                active.width && active.height ? `${active.width}×${active.height}` : null,
+                active.path ? String(active.path) : null,
+              ].filter(Boolean).join(' · ')
+            )
+            : null
+        )
       } else if (!parsed.attachment && parsed.url) {
         body.push(react.createElement('img', {
           key: 'i',
@@ -1358,14 +1488,9 @@ window.__ModuleLoader__.load({
         }))
       } else if (parsed.attachment) {
         const a = parsed.attachment
-        const query = 'id=' + encodeURIComponent(a.attachmentId ?? a.id ?? '')
-          + '&mt=' + encodeURIComponent(a.mediaType || 'image/png')
-          + '&b=' + encodeURIComponent(String(a.bytes ?? 0))
-          + '&w=' + encodeURIComponent(String(a.width ?? 0))
-          + '&h=' + encodeURIComponent(String(a.height ?? 0))
         body.push(react.createElement('img', {
           key: 'i',
-          src: '/dsh-image-gen/image?' + query,
+          src: attachmentImageUrl(a),
           alt: prompt || 'generated image',
           loading: 'lazy',
           style: { maxWidth: '100%', borderRadius: '8px', border: '1px solid var(--dsw-alias-border-l2)' },
@@ -1373,7 +1498,7 @@ window.__ModuleLoader__.load({
       }
 
       const actions = []
-      if (!running && !failed && (parsed.url || parsed.attachment)) {
+      if (!running && !failed && (parsed.url || parsed.attachment || responsiveImages.length)) {
         actions.push(
           react.createElement('button', { key: 'remix', type: 'button', className: 'ig-btn', onClick: () => setRemixOpen(!remixOpen) }, '⚡ ' + (t('card.remix') || 'Remix')),
           react.createElement('button', { key: 'reroll', type: 'button', className: 'ig-btn', onClick: onReroll }, '🎲 ' + t('card.reroll')),
@@ -1519,6 +1644,7 @@ window.__ModuleLoader__.load({
       'card.copyPrompt': 'Copy Prompt',
       'card.origPrompt': 'Original Prompt',
       'card.remix': 'Remix',
+      'card.responsiveTabs': 'Responsive viewports',
       'remix.drawer_title': 'Variations & Style Remix Workbench',
       'remix.creativity_label': 'Creativity / Denoising Strength',
       'remix.prompt_placeholder': 'Describe stylistic adjustments, new background, or variations...',
@@ -1722,6 +1848,7 @@ window.__ModuleLoader__.load({
       'card.copyPrompt': '复制提示词',
       'card.origPrompt': '原始提示词',
       'card.remix': '重混变体',
+      'card.responsiveTabs': '响应式视口',
       'remix.drawer_title': '变体与风格重混工作台',
       'remix.creativity_label': '创意度 / 去噪强度',
       'remix.prompt_placeholder': '描述风格调整、新背景或变体细节...',
@@ -1932,6 +2059,7 @@ window.__ModuleLoader__.load({
         'remix_image',
         'blend_images',
         'generate_image_pack',
+        'generate_responsive_mockups',
         'remove_background',
         'upscale_image',
         'vectorize_image',

package/lib/history.js

@@ -0,0 +1,93 @@
+import path from 'node:path'
+import os from 'node:os'
+import { existsSync, unlinkSync } from 'node:fs'
+import { readFile, writeFile, mkdir } from 'node:fs/promises'
+import { enforceSecurePermissions } from './security.js'
+
+export function historyFile() {
+  return path.join(process.env.DSH_HOME || path.join(os.homedir(), '.dsh'), 'dsh-image-gen', 'history.json')
+}
+
+/** Read history from disk file (empty array if not found). */
+/** Find history entry matching seed+prompt if file exists. */
+/** Find history entry matching prompt text if file exists. */
+export function findCachedGeneration(entries, hash) {
+  if (!hash || !Array.isArray(entries)) return undefined
+  return entries.find((e) => e.cacheHash === hash)
+}
+
+export async function findCachedByPrompt(entries, prompt) {
+  return entries.find((e) => e.prompt === prompt)
+}
+
+export async function findCached(entries, seed, prompt) {
+  if (seed === undefined) return undefined
+  return entries.find((e) => e.seed === seed && e.prompt === prompt)
+}
+
+/** Return cached entry if file exists on disk, otherwise undefined. */
+export async function cachedResult(entry) {
+  if (!entry || !entry.path) return undefined
+  if (!entry.path || !existsSync(entry.path)) return undefined
+  return {
+    path: entry.path,
+    url: entry.attachmentId ? `/dsh-image-gen/image?id=${encodeURIComponent(entry.attachmentId)}` : '',
+    thumbnailUrl: entry.thumbnailUrl || (entry.attachmentId ? `/dsh-image-gen/image?id=${encodeURIComponent(entry.attachmentId)}` : ''),
+    width: entry.width || 1024,
+    height: entry.height || 1024,
+    seed: entry.seed,
+    prompt: entry.prompt,
+    cost: 0,
+    format: (entry.mediaType || 'image/png').replace('image/', ''),
+    cached: true,
+    attachment: entry.attachmentId ? {
+      attachmentId: entry.attachmentId,
+      mediaType: entry.mediaType || 'image/png',
+      bytes: entry.bytes || 0,
+      width: entry.width || 1024,
+      height: entry.height || 1024,
+      name: entry.name || '',
+    } : undefined,
+  }
+}
+
+/** Prune files and history records older than pruneDays (including sidecars). */
+export async function pruneHistory(entries, pruneDays) {
+  if (!pruneDays || pruneDays <= 0) return entries
+  const cutoff = Date.now() - pruneDays * 86400000
+  const kept = []
+  for (const e of entries) {
+    const created = e.createdAt ? Date.parse(e.createdAt) : NaN
+    if (Number.isFinite(created) && created < cutoff) {
+      try { unlinkSync(e.path) } catch (err) { /* file already deleted */ }
+      try { unlinkSync(e.path.replace(/\.[^.]+$/, '.json')) } catch (err) { /* sidecar */ }
+      continue
+    }
+    kept.push(e)
+  }
+  return kept
+}
+
+export async function readHistory() {
+  try {
+    const raw = await readFile(historyFile(), 'utf-8')
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? parsed : []
+  } catch (e) {
+    return []
+  }
+}
+
+/** Save history to disk file (atomic overwrite). */
+export async function writeHistory(entries) {
+  try {
+    await mkdir(path.dirname(historyFile()), { recursive: true })
+    await writeFile(historyFile(), JSON.stringify(entries, null, 2))
+    enforceSecurePermissions(historyFile())
+  } catch (e) { /* history write failure is non-fatal */ }
+}
+
+/** Filter entries whose files exist on disk; newest first. */
+export function filterHistory(entries, exists) {
+  return entries.filter((e) => exists(e.path)).slice(0, 50)
+}