@goodandready/dsh-image-gen 0.10.23 → 0.10.25

package/README.md

@@ -41,6 +41,20 @@
 
 ---
 
+## 🚀 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”.
+* **Design-System Alignment**: Renamed residual `fal-` CSS class prefixes to the `ig-` system and bound colors to DSH theme variables via `var(--dsw-alias-*, <fallback>)`.
+* **Sensitive File Hardening**: History, cache meta/data, and spend-meter writes now enforce `0600` permissions after write.
+* **Dead Code Removal & Module Split**: Removed unused `listCuratedStyles`; split oversized server modules — `providers.js` utils extracted to `provider-utils.js`, `processing.js` into `processing-basic.js` + `processing-advanced.js`. Client file split is tracked separately (#244).
+
 ## 🚀 Updates v0.10.23: In-App Auto-Updater, Settings Synchronization, Active Probes & Language Purity (#232)
 * **One-Click In-App Auto-Updater**: Direct 1-click update support inside the plugin Settings Card (`UpdaterSection`) backed by `/api/dsh-image-gen/update`. Fetches the npm registry for release manifests, verifies semver differences, and securely triggers `dsh plugin add @goodandready/dsh-image-gen@latest` restricted to loopback and private LAN connections.
 * **1:1 Settings Synchronization**: Fully synchronized host `Config` schema in `lib/index.js` with client UI fields (`lib/client.js`), exposing `autoEnhancePrompt` and `defaultStylePreset` under the `✨ Enhancer` tab.
@@ -110,6 +124,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,20 @@
 </div>
 
 ---
+## 🚀 Обновления 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».
+* **Выравнивание с дизайн-системой**: остаточные CSS-классы `fal-` переименованы в префикс `ig-`; цвета привязаны к переменным темы DSH через `var(--dsw-alias-*, <fallback>)`.
+* **Защита чувствительных файлов**: запись history, cache meta/data и spend-meter после записи получает права `0600`.
+* **Удаление мёртвого кода и разбиение модулей**: удалён неиспользуемый `listCuratedStyles`; укрупнённые server-модули разнесены — утилиты `providers.js` → `provider-utils.js`, `processing.js` → `processing-basic.js` + `processing-advanced.js`. Разбиение client отложено в #244.
+
 ## 🚀 Обновления v0.10.23: Встроенное автообновление, синхронизация настроек, диагностические пробы и чистота языка (#232)
 * **Встроенное обновление в 1 клик**: Прямая проверка и обновление плагина прямо из карточки настроек (`UpdaterSection`) через эндпоинт `/api/dsh-image-gen/update`. Опрашивает реестр npm, сравнивает semver-версии и безопасно запускает установку через `dsh plugin add` с защитой по loopback и доверенной локальной сети (RFC 1918).
 * **Синхронизация настроек 1:1**: Полное выравнивание схемы хоста `Config` в `lib/index.js` и полей UI `FIELDS` в `lib/client.js` — во вкладку «✨ Промпт и стили» добавлены тумблеры `autoEnhancePrompt` и выпадающий список `defaultStylePreset`.
@@ -150,6 +164,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,20 @@
 
 ---
 
+## 🚀 更新 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”。
+* **对齐设计系统**: 将残留的 `fal-` CSS 类前缀改为 `ig-`，并以 `var(--dsw-alias-*, <fallback>)` 绑定 DSH 主题变量。
+* **敏感文件加固**: 历史记录、缓存 meta/data 与花费计量写入后强制 `0600` 权限。
+* **死代码清理与模块拆分**: 删除未使用的 `listCuratedStyles`；拆分过大的服务端模块 — `providers.js` 工具函数抽到 `provider-utils.js`，`processing.js` 拆为 `processing-basic.js` + `processing-advanced.js`。客户端拆分见 #244。
+
 ## 🚀 更新 v0.10.23: 应用内一键更新、设置同步、真实探针与语言规范 (#232)
 * **应用内一键自动更新**: 设置卡片内新增「插件更新」模块（`UpdaterSection`），配合 `/api/dsh-image-gen/update` 接口。自动查询 npm 官方注册表，对比语义化版本号，并在本地回环或私有局域网安全授权下执行 `dsh plugin add @goodandready/dsh-image-gen@latest`。
 * **1:1 核心配置与界面设置同步**: 严格对齐 `lib/index.js` 宿主 `Config` 与 `lib/client.js` 界面字段，在「✨ 提示词增强」标签页下完整呈现 `autoEnhancePrompt`（智能自动增强提示词）与 `defaultStylePreset`（默认风格预设）。
@@ -64,6 +78,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/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',
@@ -22,7 +23,7 @@ window.__ModuleLoader__.load({
       try {
         runtime = require(id)
         if (runtime && typeof runtime.createSnapshotStore === 'function') break
-      } catch (_) {}
+      } catch (_) { /* module not available in this build; try next */ }
     }
 
     const NS = '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}
@@ -99,23 +100,23 @@ window.__ModuleLoader__.load({
 .ig-btn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-4, var(--dsw-alias-bg-layer-2));border-color:var(--dsw-alias-label-dimmed, var(--dsw-alias-border-l2))}
 .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:rgba(239,68,68,0.3)}
-.ig-btn-danger:hover:not(:disabled){background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.5)}
+.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, 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: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: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)}
-.fal-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}
-.fal-meta{font-size:11px;color:var(--dsw-alias-label-secondary);margin-top:6px}
-.fal-err{padding:10px;border-radius:6px;background:rgba(239,68,68,0.1);color:var(--dsw-alias-state-error-primary);font-size:12px}
+.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, 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)
     }
@@ -328,7 +329,7 @@ window.__ModuleLoader__.load({
         }
       }
       shell() {
-        const snapshot = (this.scope && this.scope.getSnapshot && this.scope.getSnapshot()) || { status: 'ready', writable: true }
+        const snapshot = (this.scope && this.scope.getSnapshot && this.scope.getSnapshot()) || { status: 'unavailable', writable: false }
         const plan = this.plan()
         return {
           available: snapshot.status === 'ready',
@@ -826,9 +827,9 @@ window.__ModuleLoader__.load({
                     left: 0,
                     right: 0,
                     padding: '4px 6px',
-                    background: 'linear-gradient(transparent, 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: '#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: '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: '#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: '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',
@@ -1038,7 +1039,7 @@ window.__ModuleLoader__.load({
 
       const state = (typeof props.useFalSettingsCard === 'function'
         ? props.useFalSettingsCard((s) => s)
-        : null) || props.state || { available: true, writable: true, provider: { text: 'fal' } }
+        : null) || props.state || { available: false, writable: false, provider: { text: 'fal' } }
 
       const disabled = !state.writable
       const currentProvider = (state.provider && state.provider.text) || 'fal'
@@ -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()
@@ -1299,7 +1371,7 @@ window.__ModuleLoader__.load({
           args = JSON.parse(raw)
           prompt = args.prompt || ''
         }
-      } catch (_) {}
+      } catch (_) { /* malformed tool args; use empty prompt */ }
 
       const [copied, setCopied] = react.useState(false)
 
@@ -1310,7 +1382,7 @@ window.__ModuleLoader__.load({
           const binding = current && sessions.binding(current)
           const session = binding && binding.session
           if (session && session.prompt) await session.prompt([{ type: 'text', text }], 'queue')
-        } catch (_) {}
+        } catch (_) { /* session prompt delivery failed; non-fatal */ }
       }
 
       const onCopyPrompt = () => {
@@ -1344,10 +1416,68 @@ window.__ModuleLoader__.load({
 
       const body = []
       if (prompt) {
-        body.push(react.createElement('div', { className: 'fal-prompt', key: 'p' }, prompt))
+        body.push(react.createElement('div', { className: 'ig-prompt', key: 'p' }, prompt))
       }
       if (failed) {
-        body.push(react.createElement('div', { className: 'fal-err', key: 'e' }, parsed.text || t('card.unknownError')))
+        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',
@@ -2008,7 +2136,7 @@ window.__ModuleLoader__.load({
               console.warn('[dsh-image-gen] native sidebar registration failed', e)
             }
           })
-        } catch (e) {}
+        } catch (e) { /* native sidebar unavailable */ }
 
         try {
           ctx.inject(['betterSidebar'], (sctx) => {
@@ -2026,7 +2154,7 @@ window.__ModuleLoader__.load({
               console.warn('[dsh-image-gen] betterSidebar registerTab failed', e)
             }
           })
-        } catch (e) {}
+        } catch (e) { /* betterSidebar unavailable */ }
       }
 
       // Conversation header utilities chip (quick-access gallery button in chat header)

package/lib/cost-meter.js

@@ -4,6 +4,7 @@
 import { homedir } from 'node:os'
 import { join } from 'node:path'
 import { readFileSync, writeFileSync, mkdirSync } from 'node:fs'
+import { enforceSecurePermissions } from './security.js'
 
 /**
  * Standard pricing table per provider and resolution (USD per generation).
@@ -87,7 +88,7 @@ export function loadDailySpend() {
     if (data && data.date === today) {
       return data
     }
-  } catch {}
+  } catch { /* spend file unreadable; return zero */ }
   return { date: today, totalSpendUsd: 0, generations: 0 }
 }
 
@@ -107,6 +108,7 @@ export function recordSpend(usdAmount, { ctx, meta = {} } = {}) {
   try {
     mkdirSync(join(filePath, '..'), { recursive: true })
     writeFileSync(filePath, JSON.stringify(current, null, 2), 'utf8')
+    enforceSecurePermissions(filePath)
   } catch (err) {
     // Non-fatal write failure
   }
@@ -122,7 +124,7 @@ export function recordSpend(usdAmount, { ctx, meta = {} } = {}) {
         meta,
       })
     }
-  } catch {}
+  } catch { /* cost-meter service unavailable */ }
 
   return current
 }

package/lib/generation-cache.js

@@ -4,6 +4,7 @@
 import { homedir } from 'node:os'
 import { join } from 'node:path'
 import { existsSync, mkdirSync, readFileSync, writeFileSync, statSync, unlinkSync, readdirSync } from 'node:fs'
+import { enforceSecurePermissions } from './security.js'
 
 const DEFAULT_CACHE_MAX_BYTES = 500 * 1024 * 1024 // 500 MB
 
@@ -107,6 +108,8 @@ export function setCachedGeneration(hash, { bytes, mediaType = 'image/png', widt
     writeFileSync(metaPath, JSON.stringify(cacheMeta, null, 2), 'utf8')
     const binBuf = Buffer.isBuffer(bytes) ? bytes : Buffer.from(bytes)
     writeFileSync(dataPath, binBuf)
+    enforceSecurePermissions(metaPath)
+    enforceSecurePermissions(dataPath)
 
     setToL1(hash, {
       bytes: binBuf,
@@ -151,7 +154,7 @@ export function pruneCacheToLimit(maxBytes = DEFAULT_CACHE_MAX_BYTES) {
           size,
           lastAccessed: meta.lastAccessed || meta.createdAt || 0,
         })
-      } catch {}
+      } catch { /* entry meta unreadable; skip */ }
     }
 
     if (totalSize <= maxBytes) return
@@ -165,7 +168,7 @@ export function pruneCacheToLimit(maxBytes = DEFAULT_CACHE_MAX_BYTES) {
         if (existsSync(entry.metaPath)) unlinkSync(entry.metaPath)
         if (existsSync(entry.dataPath)) unlinkSync(entry.dataPath)
         totalSize -= entry.size
-      } catch {}
+      } catch { /* entry unlink failed; skip */ }
     }
-  } catch {}
+  } catch { /* cache dir unreadable; prune skipped */ }
 }

package/lib/index.js

@@ -15,6 +15,7 @@
 import z from '@deepseek-ai/schemastery'
 import { credentialRef } from '@deepseek-ai/dsh-credentials'
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { enforceSecurePermissions } from './security.js'
 import { existsSync, unlinkSync } from 'node:fs'
 import os from 'node:os'
 import path from 'node:path'
@@ -122,7 +123,7 @@ export async function saveAndAttachResult(ctx, exec, cfg, {
   })
 }
 
-export const name = 'dsh-image-gen'
+export const name = '@goodandready/dsh-image-gen'
 
 /** Settings namespace the Web card edits. */
 const NS = 'dsh-image-gen'
@@ -472,6 +473,7 @@ 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 */ }
 }
 

package/lib/loop-guard.js

@@ -55,6 +55,7 @@ export function trackAndAssertLoopGuard(sessionId, {
 /**
  * Resets loop guard counter for a session.
  */
+/** @internal — test helper; not part of the plugin runtime API */
 export function resetLoopGuard(sessionId) {
   const sid = String(sessionId || 'default_session')
   sessionStates.delete(sid)
@@ -63,6 +64,7 @@ export function resetLoopGuard(sessionId) {
 /**
  * Gets current state for debugging/testing.
  */
+/** @internal — test helper; not part of the plugin runtime API */
 export function getLoopGuardState(sessionId) {
   const sid = String(sessionId || 'default_session')
   return sessionStates.get(sid) || { count: 0, lastPrompt: '', lastTimestamp: 0 }