@goodandready/dsh-image-gen 0.10.18 → 0.10.20

package/lib/client.js

@@ -503,6 +503,397 @@ window.__ModuleLoader__.load({
       )
     }
 
+
+    // -------------------------------------------------------------- Diagnostics Panel
+    function DiagnosticsPanel(props) {
+      const t = props.t || ((k) => k)
+      const [testing, setTesting] = react.useState(false)
+      const [result, setResult] = react.useState(null)
+
+      const handleTest = async () => {
+        setTesting(true)
+        setResult(null)
+        try {
+          const res = await fetch('/dsh-image-gen/diagnostics/test?provider=' + encodeURIComponent(props.provider || 'fal'))
+          const data = await res.json()
+          setResult(data)
+        } catch (e) {
+          setResult({ ok: false, message: e.message })
+        } finally {
+          setTesting(false)
+        }
+      }
+
+      return react.createElement(
+        'div',
+        {
+          style: {
+            padding: '10px 14px',
+            border: '1px solid var(--dsw-alias-border-l2)',
+            borderRadius: '8px',
+            background: 'var(--dsw-alias-bg-layer-2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '12px',
+          },
+        },
+        react.createElement(
+          'div',
+          { style: { display: 'flex', flexDirection: 'column', gap: '2px' } },
+          react.createElement('span', { style: { fontSize: '13px', fontWeight: '600', color: 'var(--dsw-alias-label-primary)' } }, t('diagnostics.title')),
+          result
+            ? react.createElement(
+                'span',
+                {
+                  style: {
+                    fontSize: '12px',
+                    fontWeight: '500',
+                    color: result.ok ? 'var(--dsw-alias-state-success-primary)' : 'var(--dsw-alias-state-error-primary)',
+                  },
+                },
+                (result.ok ? '🟢 ' : '🔴 ') + (result.message || (result.ok ? t('diagnostics.ready') : 'Failed')) + (result.latencyMs ? ' (' + result.latencyMs + 'ms)' : '')
+              )
+            : react.createElement('span', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' } }, t('diagnostics.desc'))
+        ),
+        react.createElement(
+          'button',
+          {
+            type: 'button',
+            disabled: testing,
+            onClick: handleTest,
+            className: 'ig-save-btn',
+            style: { padding: '5px 12px', fontSize: '12px', opacity: testing ? 0.7 : 1 },
+          },
+          testing ? t('diagnostics.testing') : t('diagnostics.test')
+        )
+      )
+    }
+
+    // -------------------------------------------------------------- Gallery View
+    function GalleryView(props) {
+      const t = props.t || ((k) => k)
+      const [items, setItems] = react.useState([])
+      const [loading, setLoading] = react.useState(true)
+      const [selected, setSelected] = react.useState(null)
+      const [copiedPrompt, setCopiedPrompt] = react.useState(false)
+      const [copiedLink, setCopiedLink] = react.useState(false)
+
+      const loadHistory = () => {
+        setLoading(true)
+        fetch('/dsh-image-gen/history')
+          .then((r) => r.json())
+          .then((data) => {
+            setItems(Array.isArray(data) ? data : [])
+            setLoading(false)
+          })
+          .catch(() => {
+            setItems([])
+            setLoading(false)
+          })
+      }
+
+      react.useEffect(() => {
+        loadHistory()
+      }, [])
+
+      if (loading) {
+        return react.createElement(
+          'div',
+          { style: { padding: '24px', textAlign: 'center', color: 'var(--dsw-alias-label-secondary)', fontSize: '13px' } },
+          'Loading recent generations...'
+        )
+      }
+
+      if (items.length === 0) {
+        return react.createElement(
+          'div',
+          {
+            style: {
+              padding: '32px 16px',
+              textAlign: 'center',
+              color: 'var(--dsw-alias-label-secondary)',
+              fontSize: '13px',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '8px',
+            },
+          },
+          react.createElement('span', { style: { fontSize: '24px' } }, '🖼️'),
+          react.createElement('p', null, t('gallery.empty')),
+          react.createElement(
+            'button',
+            {
+              type: 'button',
+              onClick: loadHistory,
+              className: 'ig-tab-btn',
+              style: { border: '1px solid var(--dsw-alias-border-l2)', marginTop: '6px' },
+            },
+            '🔄 Refresh'
+          )
+        )
+      }
+
+      return react.createElement(
+        'div',
+        { style: { display: 'flex', flexDirection: 'column', gap: '12px', width: '100%' } },
+        react.createElement(
+          'div',
+          { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: '6px' } },
+          react.createElement('span', { style: { fontSize: '13px', fontWeight: '600', color: 'var(--dsw-alias-label-primary)' } }, t('gallery.title') + ' (' + items.length + ')'),
+          react.createElement('button', { type: 'button', onClick: loadHistory, className: 'ig-tab-btn', style: { padding: '3px 8px', fontSize: '12px' } }, '🔄 Refresh')
+        ),
+        react.createElement(
+          'div',
+          {
+            style: {
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))',
+              gap: '10px',
+              maxHeight: '480px',
+              overflowY: 'auto',
+              padding: '2px',
+            },
+          },
+          items.map((item, idx) => {
+            const thumb = item.thumbnailUrl || (item.attachmentId ? '/dsh-image-gen/image?id=' + encodeURIComponent(item.attachmentId) : '')
+            return react.createElement(
+              'div',
+              {
+                key: item.attachmentId || item.path || idx,
+                onClick: () => setSelected(item),
+                style: {
+                  position: 'relative',
+                  borderRadius: '8px',
+                  overflow: 'hidden',
+                  border: '1px solid var(--dsw-alias-border-l2)',
+                  background: 'var(--dsw-alias-bg-layer-2)',
+                  cursor: 'pointer',
+                  aspectRatio: '1',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                },
+              },
+              thumb
+                ? react.createElement('img', {
+                    src: thumb,
+                    alt: item.prompt || 'Generated image',
+                    loading: 'lazy',
+                    style: { width: '100%', height: '100%', objectFit: 'cover' },
+                  })
+                : react.createElement('span', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' } }, '🖼️'),
+              react.createElement(
+                'div',
+                {
+                  style: {
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    padding: '4px 6px',
+                    background: 'linear-gradient(transparent, rgba(0,0,0,0.8))',
+                    fontSize: '10px',
+                    color: '#fff',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  },
+                },
+                item.prompt || 'Untitled'
+              )
+            )
+          })
+        ),
+        selected &&
+          react.createElement(
+            'div',
+            {
+              style: {
+                position: 'fixed',
+                inset: 0,
+                background: 'rgba(0,0,0,0.7)',
+                zIndex: 10000,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '20px',
+              },
+              onClick: () => setSelected(null),
+            },
+            react.createElement(
+              'div',
+              {
+                style: {
+                  background: 'var(--dsw-alias-bg-layer-3)',
+                  border: '1px solid var(--dsw-alias-border-l2)',
+                  borderRadius: '12px',
+                  maxWidth: '560px',
+                  width: '100%',
+                  maxHeight: '90vh',
+                  overflowY: 'auto',
+                  padding: '18px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '12px',
+                },
+                onClick: (e) => e.stopPropagation(),
+              },
+              react.createElement(
+                'div',
+                { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
+                react.createElement('span', { style: { fontWeight: '700', fontSize: '14px', color: 'var(--dsw-alias-label-primary)' } }, t('gallery.inspector')),
+                react.createElement(
+                  'button',
+                  {
+                    type: 'button',
+                    onClick: () => setSelected(null),
+                    style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '16px', color: 'var(--dsw-alias-label-secondary)' },
+                  },
+                  '✕'
+                )
+              ),
+              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' },
+              }),
+              react.createElement(
+                'div',
+                { style: { display: 'flex', flexWrap: 'wrap', gap: '6px', fontSize: '11px' } },
+                selected.seed !== undefined && react.createElement('span', { className: 'ig-badge' }, 'Seed: ' + selected.seed),
+                selected.provider && react.createElement('span', { className: 'ig-badge' }, 'Provider: ' + selected.provider),
+                selected.width && react.createElement('span', { className: 'ig-badge' }, selected.width + '×' + selected.height),
+                selected.cost ? react.createElement('span', { className: 'ig-badge' }, '$' + Number(selected.cost).toFixed(4)) : null
+              ),
+              react.createElement(
+                'div',
+                { style: { display: 'flex', flexDirection: 'column', gap: '4px' } },
+                react.createElement('span', { style: { fontSize: '11px', fontWeight: '600', color: 'var(--dsw-alias-label-secondary)' } }, 'Prompt:'),
+                react.createElement(
+                  'p',
+                  {
+                    style: {
+                      fontSize: '12px',
+                      color: 'var(--dsw-alias-label-primary)',
+                      lineHeight: '1.4',
+                      background: 'var(--dsw-alias-bg-layer-2)',
+                      padding: '8px',
+                      borderRadius: '6px',
+                      margin: 0,
+                    },
+                  },
+                  selected.prompt || 'No prompt recorded'
+                )
+              ),
+              react.createElement(
+                'div',
+                { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '4px' } },
+                react.createElement(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'ig-tab-btn',
+                    style: { border: '1px solid var(--dsw-alias-border-l2)' },
+                    onClick: () => {
+                      if (typeof navigator !== 'undefined' && navigator.clipboard && selected.prompt) {
+                        navigator.clipboard.writeText(selected.prompt)
+                        setCopiedPrompt(true)
+                        setTimeout(() => setCopiedPrompt(false), 2000)
+                      }
+                    },
+                  },
+                  copiedPrompt ? '✓ Copied!' : t('gallery.copy_prompt')
+                ),
+                react.createElement(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'ig-save-btn',
+                    onClick: () => {
+                      const url = selected.thumbnailUrl || (selected.attachmentId ? '/dsh-image-gen/image?id=' + encodeURIComponent(selected.attachmentId) : '')
+                      if (typeof navigator !== 'undefined' && navigator.clipboard && url) {
+                        navigator.clipboard.writeText('![' + (selected.prompt || 'Image') + '](' + url + ')')
+                        setCopiedLink(true)
+                        setTimeout(() => setCopiedLink(false), 2000)
+                      }
+                    },
+                  },
+                  copiedLink ? '✓ Copied!' : t('gallery.copy_link')
+                )
+              )
+            )
+          )
+      )
+    }
+
+    // -------------------------------------------------------------- Header Quick-Access Chip
+    function GalleryHeaderChip(props) {
+      const [open, setOpen] = react.useState(false)
+      return react.createElement(
+        'div',
+        { style: { display: 'inline-flex', alignItems: 'center', position: 'relative' } },
+        react.createElement(
+          'button',
+          {
+            type: 'button',
+            title: 'Image Studio Gallery',
+            onClick: () => setOpen(!open),
+            style: {
+              appearance: 'none',
+              background: 'none',
+              border: '1px solid var(--dsw-alias-border-l2)',
+              borderRadius: '6px',
+              padding: '4px 8px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '5px',
+              fontSize: '12px',
+              color: 'var(--dsw-alias-label-secondary)',
+            },
+          },
+          react.createElement('span', null, '🖼️'),
+          react.createElement('span', null, 'Gallery')
+        ),
+        open &&
+          react.createElement(
+            'div',
+            {
+              style: {
+                position: 'fixed',
+                top: '56px',
+                right: '16px',
+                width: '380px',
+                maxHeight: '520px',
+                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)',
+                zIndex: 9999,
+                padding: '16px',
+                overflowY: 'auto',
+              },
+            },
+            react.createElement(
+              'div',
+              { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' } },
+              react.createElement('span', { style: { fontWeight: '700', fontSize: '14px', color: 'var(--dsw-alias-label-primary)' } }, 'Image Studio Gallery'),
+              react.createElement(
+                'button',
+                {
+                  type: 'button',
+                  onClick: () => setOpen(false),
+                  style: { background: 'none', border: 'none', cursor: 'pointer', fontSize: '14px', color: 'var(--dsw-alias-label-secondary)' },
+                },
+                '✕'
+              )
+            ),
+            react.createElement(GalleryView, { ctx: props.ctx })
+          )
+      )
+    }
+
     function FalSettingsCard(props) {
       const t = props.t || ((k) => k)
       const [open, setOpen] = react.useState(props.defaultOpen ?? true)
@@ -538,6 +929,7 @@ window.__ModuleLoader__.load({
       const tabs = [
         { id: 'general', label: t('tab.general'), icon: '⚙️' },
         { id: 'provider', label: t('tab.provider') + ' (' + currentProvider.toUpperCase() + ')', icon: '🔌' },
+        { id: 'gallery', label: t('tab.gallery'), icon: '🖼️' },
         { id: 'enhancer', label: t('tab.enhancer'), icon: '✨' },
         { id: 'safety', label: t('tab.safety'), icon: '🛡️' },
         { id: 'cache', label: t('tab.cache'), icon: '⚡' },
@@ -1037,6 +1429,177 @@ window.__ModuleLoader__.load({
       'p.cacheTtlDays': '0',
     }
 
+    const zh = {
+      'tab.general': '常规',
+      'tab.provider': '提供商',
+      'tab.gallery': '图库',
+      'tab.enhancer': '提示词增强',
+      'tab.safety': '安全与预算',
+      'tab.cache': '缓存与性能',
+
+      'diagnostics.title': '提供商连接诊断',
+      'diagnostics.desc': '即时检查与所选生成服务 API 的连接状态和延迟。',
+      'diagnostics.test': '测试连接',
+      'diagnostics.testing': '测试中...',
+      'diagnostics.ready': '正常',
+
+      'gallery.title': '最近生成记录',
+      'gallery.empty': '暂无生成记录。生成一张图片后将显示在此处。',
+      'gallery.inspector': '生成记录详情',
+      'gallery.copy_prompt': '复制提示词',
+      'gallery.copy_link': '复制 Markdown 链接',
+
+      'title': 'AI 图像工坊',
+      'subtitle': '多提供商支持的图像生成、编辑、局部重绘与矢量化。',
+      'card.title': 'AI 图像工坊',
+      'card.desc': '配置多提供商图像生成、局部重绘、放大及矢量化设置。',
+      'card.dirty': '有未保存的修改',
+      'card.saving': '保存中...',
+      'card.save': '保存修改',
+      'card.discard': '放弃修改',
+      'card.failed': '保存失败，请检查填写内容。',
+
+      'settings.overridden': '已自定义',
+      'settings.reset': '重置',
+      'settings.invalidNumber': '请输入有效数值',
+      'settings.unavailable': '设置命名空间当前不可用。',
+
+      'f.enabled': '启用图像生成',
+      'f.enabledHint': '关闭后将禁用所有图像生成及处理工具。',
+      'f.provider': '默认图像提供商',
+      'f.providerHint': '用于图像生成的默认引擎（fal, custom, replicate, seedream, gemini, local, codex, grok）。',
+      'f.defaultSize': '默认图像尺寸',
+      'f.defaultSizeHint': '未指定尺寸时的默认生成分辨率。',
+      'f.defaultFormat': '输出格式',
+      'f.defaultFormatHint': '生成图像的默认文件格式（png 或 webp）。',
+      'f.deliverAs': '输出投递方式',
+      'f.deliverAsHint': 'link 模式仅返回链接；image 模式同时返回图像自身数据。',
+      'f.outputDir': '存储目录',
+      'f.outputDirHint': '已生成图像在会话工作空间内的保存目录。',
+      'p.outputDir': 'generated/images',
+      'f.historyLimit': '历史记录数量',
+      'f.historyLimitHint': '保存在内存历史列表中的最大条目数。',
+      'p.historyLimit': '50',
+
+      'f.model': 'FAL 模型 ID',
+      'f.modelHint': '调用的 FAL 队列模型标识符。',
+      'p.model': 'fal-ai/flux-2/klein/9b',
+      'f.apiKeyEnv': 'FAL 凭证名称',
+      'f.apiKeyEnvHint': '存储 FAL API 密钥的环境变量或凭证名称。',
+      'p.apiKeyEnv': 'FAL_API_KEY',
+      'f.baseURL': 'FAL 基础地址',
+      'f.baseURLHint': 'FAL 队列服务基础 URL。',
+      'p.baseURL': 'https://queue.fal.run',
+      'f.pollIntervalMs': '轮询间隔（毫秒）',
+      'f.pollIntervalMsHint': '异步队列状态检查的时间间隔。',
+      'p.pollIntervalMs': '2000',
+      'f.timeoutMs': '超时上限（毫秒）',
+      'f.timeoutMsHint': '单次生成作业的总执行时限。',
+      'p.timeoutMs': '180000',
+
+      'f.customBaseURL': 'Custom API 地址',
+      'f.customBaseURLHint': '兼容 OpenAI 图像接口的基础地址。',
+      'p.customBaseURL': 'https://api.openai.com/v1',
+      'f.customModel': 'Custom 模型 ID',
+      'f.customModelHint': '自定义接口的模型标识符。',
+      'p.customModel': 'gpt-image-1',
+      'f.customKeyEnv': 'Custom 凭证名称',
+      'f.customKeyEnvHint': '存储自定义接口 API 密钥的凭证名称。',
+      'p.customKeyEnv': 'OPENAI_API_KEY',
+      'f.customSize': 'Custom 固定尺寸',
+      'f.customSizeHint': '发送至自定义接口的指定分辨率（如 1024x1024）。',
+      'p.customSize': '1024x1024',
+
+      'f.replicateModel': 'Replicate 模型 ID',
+      'f.replicateModelHint': 'Replicate 平台上的目标模型。',
+      'p.replicateModel': 'black-forest-labs/flux-schnell',
+      'f.replicateKeyEnv': 'Replicate 凭证名称',
+      'f.replicateKeyEnvHint': '存储 Replicate API Token 的凭证名称。',
+      'p.replicateKeyEnv': 'REPLICATE_API_TOKEN',
+
+      'f.seedreamModel': 'SeaDream 模型 ID',
+      'f.seedreamModelHint': '字节跳动 SeaDream 图像模型标识符。',
+      'p.seedreamModel': 'seedream-4.0',
+      'f.seedreamKeyEnv': 'SeaDream 凭证名称',
+      'f.seedreamKeyEnvHint': '存储 SeaDream 接口密钥的凭证名称。',
+      'p.seedreamKeyEnv': 'SEEDREAM_API_KEY',
+      'f.seedreamBaseURL': 'SeaDream 接口地址',
+      'f.seedreamBaseURLHint': 'SeaDream API 基础地址（火山引擎 Ark）。',
+      'p.seedreamBaseURL': 'https://api.bytedanceapi.com/v1',
+
+      'f.geminiModel': 'Gemini 模型 ID',
+      'f.geminiModelHint': 'Google Gemini 图像生成模型标识符。',
+      'p.geminiModel': 'gemini-2.0-flash-exp-image-generation',
+      'f.geminiKeyEnv': 'Gemini 凭证名称',
+      'f.geminiKeyEnvHint': '存储 Google Gemini 密钥的凭证名称。',
+      'p.geminiKeyEnv': 'GEMINI_API_KEY',
+
+      'f.localKind': '本地引擎架构',
+      'f.localKindHint': '在 ComfyUI API 或 Automatic1111 WebUI 架构间选择。',
+      'f.localBaseURL': '本地服务地址',
+      'f.localBaseURLHint': '服务网络地址（如 http://127.0.0.1:8188）。',
+      'p.localBaseURL': 'http://127.0.0.1:8188',
+      'f.localModel': '本地模型 / Checkpoint',
+      'f.localModelHint': '本地模型文件名或 ComfyUI 工作流名称。',
+      'p.localModel': 'v1-5-pruned-emaonly.safetensors',
+      'f.localSteps': '采样步数',
+      'f.localStepsHint': '去噪采样的计算步数。',
+      'p.localSteps': '20',
+      'f.localCfg': 'CFG Scale',
+      'f.localCfgHint': '无分类器引导系数。',
+      'p.localCfg': '7',
+      'f.localComfyUrl': '本地 ComfyUI 地址 (Legacy)',
+      'f.localComfyUrlHint': '直接指向 ComfyUI 的服务地址。',
+      'p.localComfyUrl': 'http://127.0.0.1:8188',
+      'f.localA1111Url': '本地 A1111 地址 (Legacy)',
+      'f.localA1111UrlHint': '直接指向 Automatic1111 的服务地址。',
+      'p.localA1111Url': 'http://127.0.0.1:7860',
+
+      'f.subscriptionQuality': '订阅质量',
+      'f.subscriptionQualityHint': 'Codex 或 Grok 订阅通道的质量档位。',
+
+      'f.autoEnhancePrompt': '智能自动增强提示词',
+      'f.autoEnhancePromptHint': '自动为提示词补充最佳摄影、光影与构图词汇。',
+      'f.defaultStylePreset': '默认风格预设',
+      'f.defaultStylePresetHint': '生成图像时应用的默认艺术或摄影风格（如 cinematic, anime 等）。',
+      'p.defaultStylePreset': 'none',
+
+      'f.enhancePrompt': 'LLM 提示词扩展',
+      'f.enhancePromptHint': '在生成前由会话模型自动丰富短提示词细节。',
+      'f.enableLlmEnhancer': '启用 LLM 提示词增强 (Legacy)',
+      'f.enableLlmEnhancerHint': '提示词扩展的历史遗留开关。',
+      'f.enhanceModel': '增强模型',
+      'f.enhanceModelHint': '用于扩展提示词的独立大语言模型（留空使用会话模型）。',
+      'p.enhanceModel': '留空表示使用当前会话模型',
+      'f.enhanceBelowChars': '扩展长度阈值',
+      'f.enhanceBelowCharsHint': '长于此字数的提示词将直接生成，不予额外扩展。',
+      'p.enhanceBelowChars': '200',
+      'f.stylePreset': '艺术风格后缀',
+      'f.stylePresetHint': '自动追加到所有生成提示词末尾的风格后缀。',
+
+      'f.qualityGate': '静默质量门禁',
+      'f.qualityGateHint': '自动检测破损或空白输出，并在后台静默重新生成。',
+      'f.dailyBudgetUsd': '每日开销预算 ($ USD)',
+      'f.dailyBudgetUsdHint': '所有图像工具每 24 小时的支出预算上限（0 为不限制）。',
+      'p.dailyBudgetUsd': '0.00',
+      'f.loopGuardLimit': '防死循环守卫 (Loop Guard)',
+      'f.loopGuardLimitHint': '无需用户交互的连续生成操作上限（0 为禁用）。',
+      'p.loopGuardLimit': '3',
+
+      'f.diskCache': '按内容哈希的磁盘缓存',
+      'f.diskCacheHint': '重复生成完全相同的请求时实现毫秒级瞬间返回与零支出。',
+      'f.cacheBySeed': '按 Seed 与提示词命中缓存',
+      'f.cacheBySeedHint': '当 Seed 和提示词均完全一致时直接命中缓存。',
+      'f.cacheByPrompt': '按提示词命中缓存',
+      'f.cacheByPromptHint': '当提示词文本一致时直接命中缓存。',
+      'f.pruneDays': '文件保留天数',
+      'f.pruneDaysHint': '自动清理超过该天数的已生成图像（0 表示永久保留）。',
+      'p.pruneDays': '0',
+      'f.cacheTtlDays': '缓存生命周期 (Legacy)',
+      'f.cacheTtlDaysHint': '已废弃的缓存保留时长参数。',
+      'p.cacheTtlDays': '0',
+    }
+
     const ru = {
       'settings.navLabel': 'Image Studio',
       'settings.title': 'Генерация изображений',
@@ -1227,6 +1790,7 @@ window.__ModuleLoader__.load({
     function apply(ctx) {
       if (ctx.locale && typeof ctx.locale.define === 'function') {
         ctx.locale.define('en', NS, en)
+        ctx.locale.define('zh', NS, zh)
         ctx.locale.define('ru', NS, ru)
       }
 
@@ -1274,6 +1838,7 @@ window.__ModuleLoader__.load({
         'remove_background',
         'upscale_image',
         'vectorize_image',
+        'assemble_image_grid',
       ]
 
       for (const toolName of toolviewTools) {
@@ -1290,6 +1855,95 @@ window.__ModuleLoader__.load({
         )
       }
 
+
+      // Native Sidebar Right Pane Tab & BetterSidebar
+      if (typeof ctx.inject === 'function') {
+        try {
+          ctx.inject(['sidebarRightTabs'], (sctx) => {
+            const tabs = sctx && sctx.sidebarRightTabs
+            if (!tabs || typeof tabs.register !== 'function') return
+            try {
+              const def = {
+                id: '@goodandready/dsh-image-gen:gallery',
+                kind: 'image-gallery',
+                priority: 'extension',
+                title: () => 'Gallery',
+                guide: [
+                  {
+                    order: 45,
+                    title: () => 'Image Studio Gallery',
+                    description: () => 'Browse and inspect recent image generations',
+                    icon: () => react.createElement('span', null, '🖼️'),
+                  },
+                ],
+              }
+              if (typeof sctx.effect === 'function') {
+                sctx.effect(() => tabs.register(def))
+              } else {
+                tabs.register(def)
+              }
+
+              if (ctx.slots) {
+                const registerPaneTab = () => {
+                  try {
+                    return ctx.slots.register(
+                      {
+                        name: 'sidebar.right.pane.tab',
+                        key: '@goodandready/dsh-image-gen:gallery',
+                        locale: NS,
+                        inject: () => ({ ctx }),
+                      },
+                      (props) => react.createElement(ErrorBoundary, null, react.createElement(GalleryView, { ...props, ctx }))
+                    )
+                  } catch (e) {
+                    console.warn('[dsh-image-gen] native sidebar pane tab register failed', e)
+                  }
+                }
+                if (typeof ctx.slots.inject === 'function') {
+                  ctx.slots.inject('sidebar.right.pane.tab', registerPaneTab)
+                } else {
+                  registerPaneTab()
+                }
+              }
+            } catch (e) {
+              console.warn('[dsh-image-gen] native sidebar registration failed', e)
+            }
+          })
+        } catch (e) {}
+
+        try {
+          ctx.inject(['betterSidebar'], (sctx) => {
+            const svc = sctx && sctx.betterSidebar
+            if (!svc || typeof svc.registerTab !== 'function') return
+            try {
+              svc.registerTab({
+                id: 'dsh-image-gen:gallery',
+                title: () => 'Gallery',
+                icon: () => react.createElement('span', null, '🖼️'),
+                order: 45,
+                component: ({ scope }) => react.createElement(ErrorBoundary, null, react.createElement(GalleryView, { ctx, scope })),
+              })
+            } catch (e) {
+              console.warn('[dsh-image-gen] betterSidebar registerTab failed', e)
+            }
+          })
+        } catch (e) {}
+      }
+
+      // Conversation header utilities chip (quick-access gallery button in chat header)
+      registerSlotWhenReady('conversation.session.header.utilities', () =>
+        ctx.slots.register(
+          {
+            name: 'conversation.session.header.utilities',
+            id: 'dsh-image-gen-gallery-chip',
+            order: 8,
+            locale: NS,
+            inject: () => ({ ctx }),
+          },
+          (props) => react.createElement(GalleryHeaderChip, { ...props, ctx })
+        )
+      )
+
       // Settings card item
       registerSlotWhenReady('settings.plugin.item', () =>
         ctx.slots.register(
@@ -1308,4 +1962,4 @@ window.__ModuleLoader__.load({
     exports.inject = inject
     return module.exports
   },
-})
+})