@dickpy/dsh-imagegen 1.0.2 → 1.0.4

package/lib/index.js

@@ -13,6 +13,8 @@ import { spawn } from "node:child_process";
 */
 /** Settings namespace this plugin owns (host settings seam + bridge). */
 const IMAGEGEN_SETTINGS_NAMESPACE = "dsh-imagegen";
+/** Published package version shared by the host updater and the client UI. */
+const PLUGIN_VERSION = "1.0.4";
 /** Same-origin route family (loopback-only, mirroring the dsh-ssh fence). */
 const SETTINGS_API = {
 	describe: "/api/dsh-imagegen/settings/describe",
@@ -438,7 +440,7 @@ async function readHistoryImage(file) {
 //#region src/updater.ts
 /** GitHub Release discovery and explicit, user-triggered plugin updates. */
 /** Keep this in sync with package.json for each published release. */
-const CURRENT_VERSION = "1.0.2";
+const CURRENT_VERSION = PLUGIN_VERSION;
 const PACKAGE_NAME = "@dickpy/dsh-imagegen";
 const RELEASES_URL = "https://api.github.com/repos/dickpy/dsh-imagegen/releases/latest";
 const CHECK_TIMEOUT_MS = 1e4;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dickpy/dsh-imagegen",
   "description": "AI 生图 (image generation) plugin for the dsh web GUI: text-to-image and image-to-image through a configurable OpenAI-compatible endpoint (gpt-image-2 / gpt-image-1 / dall-e-3), with a settings card for api_url / api_key and a sidebar entry opening a split-pane generation studio.",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/src/client/ImageGenPanel.tsx

@@ -42,6 +42,13 @@ const DETAILS = ['', 'standard', 'high'] as const
 
 const PROMPT_MAX = 2000
 const REF_IMAGE_MAX_BYTES = 10 * 1024 * 1024
+const PREVIEW_SCALE_MIN = 0.5
+const PREVIEW_SCALE_MAX = 3
+const PREVIEW_SCALE_STEP = 0.25
+
+function clampPreviewScale(scale: number): number {
+  return Math.min(PREVIEW_SCALE_MAX, Math.max(PREVIEW_SCALE_MIN, scale))
+}
 
 /** Read the current config from the settings scope snapshot. */
 function useConfig(scope: ImageGenScope): ImageGenConfig | undefined {
@@ -50,6 +57,13 @@ function useConfig(scope: ImageGenScope): ImageGenConfig | undefined {
   return value
 }
 
+/** Track the redacted api-key presence bit exposed by the settings bridge. */
+function useKeySet(scope: ImageGenScope): boolean {
+  const [keySet, setKeySet] = useState(scope.getKeySetSnapshot())
+  useEffect(() => scope.subscribeKeySet(() => { setKeySet(scope.getKeySetSnapshot()) }), [scope])
+  return keySet
+}
+
 /** Tick a seconds counter while `running`. */
 function useElapsed(running: boolean, startedAt: number | null): number {
   const [elapsed, setElapsed] = useState(0)
@@ -108,6 +122,8 @@ export function ImageGenPanel(props: {
   const enabled = config?.enabled ?? true
   const apiUrl = config?.apiUrl ?? ''
   const configured = apiUrl.trim() !== ''
+  const keySet = useKeySet(scope)
+  const connected = enabled && configured && keySet
 
   const [mode, setMode] = useState<GenerateMode>('text')
   const [prompt, setPrompt] = useState('')
@@ -124,6 +140,8 @@ export function ImageGenPanel(props: {
   const [history, setHistory] = useState<HistoryEntry[]>([])
   const [viewingHistoryId, setViewingHistoryId] = useState<string | null>(null)
   const [preview, setPreview] = useState<{ images: GeneratedImage[]; index: number } | null>(null)
+  const [previewScale, setPreviewScale] = useState(1)
+  const [promptCopied, setPromptCopied] = useState(false)
   const [update, setUpdate] = useState<UpdateInfo | null>(null)
   const [updating, setUpdating] = useState(false)
   const [updateMessage, setUpdateMessage] = useState<string | null>(null)
@@ -233,10 +251,20 @@ export function ImageGenPanel(props: {
   /** Open the full-screen image preview at a given index. */
   const openPreview = (previewImages: GeneratedImage[], index: number): void => {
     setPreview({ images: previewImages, index })
+    setPreviewScale(1)
+    setPromptCopied(false)
+  }
+
+  const closePreview = (): void => {
+    setPreview(null)
+    setPreviewScale(1)
+    setPromptCopied(false)
   }
 
   /** Step the preview by ±1, wrapping around. */
   const stepPreview = (delta: number): void => {
+    setPreviewScale(1)
+    setPromptCopied(false)
     setPreview(current => {
       if (current === null) return null
       const total = current.images.length
@@ -248,9 +276,12 @@ export function ImageGenPanel(props: {
   useEffect(() => {
     if (preview === null) return
     const onKey = (event: KeyboardEvent): void => {
-      if (event.key === 'Escape') setPreview(null)
+      if (event.key === 'Escape') closePreview()
       else if (event.key === 'ArrowLeft') stepPreview(-1)
       else if (event.key === 'ArrowRight') stepPreview(1)
+      else if (event.key === '+' || event.key === '=') setPreviewScale(current => clampPreviewScale(current + PREVIEW_SCALE_STEP))
+      else if (event.key === '-') setPreviewScale(current => clampPreviewScale(current - PREVIEW_SCALE_STEP))
+      else if (event.key === '0') setPreviewScale(1)
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
@@ -313,19 +344,58 @@ export function ImageGenPanel(props: {
   const viewingEntry = viewingHistoryId === null ? null : history.find(entry => entry.id === viewingHistoryId) ?? null
   const previewImage = preview === null ? null : preview.images[preview.index] ?? null
 
+  const copyPreviewPrompt = async (text: string): Promise<void> => {
+    try {
+      if (navigator.clipboard?.writeText !== undefined) {
+        await navigator.clipboard.writeText(text)
+      } else {
+        const textarea = document.createElement('textarea')
+        textarea.value = text
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        const copied = document.execCommand('copy')
+        textarea.remove()
+        if (!copied) throw new Error('copy failed')
+      }
+      setPromptCopied(true)
+      window.setTimeout(() => { setPromptCopied(false) }, 1800)
+    } catch {
+      setPromptCopied(false)
+    }
+  }
+
+  const addPreviewToEdit = (): void => {
+    if (previewImage === null || preview === null) return
+    setMode('edit')
+    setRefImage({
+      dataUrl: srcOf(previewImage),
+      name: `dsh-image-${preview.index + 1}.${extensionOf(previewImage.mime)}`,
+    })
+    if (prompt.trim() === '' && previewImage.revisedPrompt !== undefined) setPrompt(previewImage.revisedPrompt)
+    setError(null)
+    closePreview()
+  }
+
   return (
     <div className={css.panel}>
       <header className={css.panelHeader}>
-        <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
-        <span className={css.panelSubtitle}>{tt('panel.subtitle')}</span>
+        <span className={css.panelHeading}>
+          <h2 className={css.panelTitle}>{tt('panel.title')}</h2>
+          <span className={css.panelSubtitle}>{tt('panel.subtitle')}</span>
+        </span>
+        <button
+          type="button"
+          className={css.connectionStatus}
+          data-connected={connected ? 'true' : 'false'}
+          aria-label={tt(connected ? 'connection.connected' : 'connection.disconnected')}
+        >
+          <span className={css.connectionDot} aria-hidden="true" />
+          {tt(connected ? 'connection.connected' : 'connection.disconnected')}
+        </button>
       </header>
 
-      {!enabled
-        ? <div className={css.banner} data-kind="warn">{tt('config.disabled')}</div>
-        : !configured
-          ? <div className={css.banner} data-kind="warn">{tt('config.missing')}</div>
-          : <div className={css.banner} data-kind="ok">{tt('config.configured', { url: apiUrl })}</div>}
-
       {update !== null ? (
         <div className={css.updateBanner} data-kind={updateResult === 'success' ? 'ok' : 'warn'}>
           <span className={css.updateText}>
@@ -555,7 +625,7 @@ export function ImageGenPanel(props: {
                   <span className={css.canvasHistoryTag}>{tt('history.viewing', { time: formatTime(viewingEntry.createdAt) })}</span>
                 ) : null}
               </div>
-              <div className={css.grid}>
+              <div className={css.grid} data-count={images.length}>
                 {images.map((image, index) => (
                   <figure
                     key={index}
@@ -663,9 +733,9 @@ export function ImageGenPanel(props: {
             role="dialog"
             aria-modal="true"
             aria-label={tt('preview.title')}
-            onClick={() => { setPreview(null) }}
+            onClick={closePreview}
           >
-            <button type="button" className={css.lightboxClose} aria-label={tt('preview.close')} onClick={() => { setPreview(null) }}>
+            <button type="button" className={css.lightboxClose} aria-label={tt('preview.close')} title={tt('preview.close')} onClick={closePreview}>
               <svg viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
             </button>
             {preview.images.length > 1 ? (
@@ -679,25 +749,60 @@ export function ImageGenPanel(props: {
               </>
             ) : null}
             <figure className={css.lightboxFigure} onClick={(event) => { event.stopPropagation() }}>
-              <img
-                className={css.lightboxImage}
-                src={srcOf(previewImage)}
-                alt={previewImage.revisedPrompt ?? tt('preview.title')}
-              />
+              <div
+                className={css.lightboxStage}
+                onWheel={(event) => {
+                  event.preventDefault()
+                  setPreviewScale(current => clampPreviewScale(current + (event.deltaY < 0 ? PREVIEW_SCALE_STEP : -PREVIEW_SCALE_STEP)))
+                }}
+              >
+                <img
+                  className={css.lightboxImage}
+                  style={{ transform: `scale(${previewScale})` }}
+                  src={srcOf(previewImage)}
+                  alt={previewImage.revisedPrompt ?? tt('preview.title')}
+                />
+              </div>
+              <div className={css.lightboxTools} role="group" aria-label={tt('preview.zoomControls')}>
+                <button type="button" className={css.lightboxTool} aria-label={tt('preview.zoomOut')} title={tt('preview.zoomOut')} onClick={() => { setPreviewScale(current => clampPreviewScale(current - PREVIEW_SCALE_STEP)) }}>
+                  <svg viewBox="0 0 16 16" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" aria-hidden="true"><circle cx="7" cy="7" r="4.2"/><path d="M4.8 7h4.4M13 13l-2.8-2.8"/></svg>
+                </button>
+                <button type="button" className={css.lightboxZoomLevel} aria-label={tt('preview.zoomReset')} title={tt('preview.zoomReset')} onClick={() => { setPreviewScale(1) }}>
+                  {tt('preview.zoomLevel', { percent: Math.round(previewScale * 100) })}
+                </button>
+                <button type="button" className={css.lightboxTool} aria-label={tt('preview.zoomIn')} title={tt('preview.zoomIn')} onClick={() => { setPreviewScale(current => clampPreviewScale(current + PREVIEW_SCALE_STEP)) }}>
+                  <svg viewBox="0 0 16 16" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" aria-hidden="true"><circle cx="7" cy="7" r="4.2"/><path d="M7 4.8v4.4M4.8 7h4.4M13 13l-2.8-2.8"/></svg>
+                </button>
+              </div>
               {previewImage.revisedPrompt !== undefined ? (
-                <figcaption className={css.lightboxCaption} title={previewImage.revisedPrompt}>
-                  {tt('revisedPrompt', { prompt: previewImage.revisedPrompt })}
-                </figcaption>
+                <div className={css.lightboxCaptionRow}>
+                  <figcaption className={css.lightboxCaption} title={previewImage.revisedPrompt}>
+                    {tt('revisedPrompt', { prompt: previewImage.revisedPrompt })}
+                  </figcaption>
+                  <button type="button" className={css.lightboxCopy} aria-label={tt(promptCopied ? 'preview.copied' : 'preview.copyPrompt')} title={tt(promptCopied ? 'preview.copied' : 'preview.copyPrompt')} onClick={() => { void copyPreviewPrompt(previewImage.revisedPrompt!) }}>
+                    {promptCopied ? (
+                      <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8l3 3 7-7"/></svg>
+                    ) : (
+                      <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="5" y="5" width="7" height="8" rx="1"/><path d="M3 10V3.8c0-.44.36-.8.8-.8H9"/></svg>
+                    )}
+                    <span>{tt(promptCopied ? 'preview.copied' : 'preview.copyPrompt')}</span>
+                  </button>
+                </div>
               ) : null}
               <div className={css.lightboxMeta}>
                 <span className={css.lightboxIndex}>{tt('preview.index', { index: preview.index + 1, total: preview.images.length })}</span>
-                <a
-                  className={css.lightboxDownload}
-                  href={srcOf(previewImage)}
-                  download={`dsh-image-${preview.index + 1}.${extensionOf(previewImage.mime)}`}
-                >
-                  {tt('download')}
-                </a>
+                <span className={css.lightboxActions}>
+                  <button type="button" className={css.lightboxEdit} onClick={addPreviewToEdit}>
+                    {tt('preview.addToEdit')}
+                  </button>
+                  <a
+                    className={css.lightboxDownload}
+                    href={srcOf(previewImage)}
+                    download={`dsh-image-${preview.index + 1}.${extensionOf(previewImage.mime)}`}
+                  >
+                    {tt('download')}
+                  </a>
+                </span>
               </div>
             </figure>
           </div>,

package/src/client/SettingsCard.tsx

@@ -11,6 +11,7 @@ import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-cli
 import { createSnapshotStore, type SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
 import { CardForm, booleanField, secretField, textField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
 import type { ImageGenScope } from './settings-scope.ts'
+import { PLUGIN_VERSION } from '../protocol.ts'
 import css from './settings-card.module.css'
 
 /** The fields this card edits (the namespace's full schema). */
@@ -161,6 +162,10 @@ export function ImageGenSettingsCard(props: ImageGenSettingsCardProps) {
         ? (
           <div className={css.body}>
             {!state.writable ? <p className={css.readOnly} role="status">{t('settings.readOnly')}</p> : null}
+            <div className={css.versionRow}>
+              <span className={css.versionLabel}>{t('settings.currentVersion')}</span>
+              <code className={css.versionValue}>v{PLUGIN_VERSION}</code>
+            </div>
             <ValueField
               id="dsh-imagegen-settings-apikey"
               label={t('settings.apiKey')}

package/src/client/locales.ts

@@ -72,10 +72,20 @@ export const zh = {
   'preview.prev': '上一张',
   'preview.next': '下一张',
   'preview.index': '{index} / {total}',
+  'preview.zoomControls': '图片缩放控制',
+  'preview.zoomIn': '放大',
+  'preview.zoomOut': '缩小',
+  'preview.zoomReset': '重置缩放',
+  'preview.zoomLevel': '{percent}%',
+  'preview.copyPrompt': '复制提示词',
+  'preview.copied': '已复制',
+  'preview.addToEdit': '添加到图生图',
   // config banner
   'config.missing': '尚未配置 API：请前往「设置 → 插件 → 可配置」为 AI 生图填写 api_url 与 api_key。',
   'config.configured': '已连接 {url}',
   'config.disabled': '插件已停用，请在设置中重新启用。',
+  'connection.connected': '已连接',
+  'connection.disconnected': '未连接',
   // plugin update
   'update.available': '检测到新版本：{version}',
   'update.install': '在线更新',
@@ -86,6 +96,7 @@ export const zh = {
   // settings card
   'settings.title': 'AI 生图（dsh-imagegen）',
   'settings.description': '配置图像生成 API 地址与密钥',
+  'settings.currentVersion': '当前版本',
   'settings.apiUrl': 'API 地址（api_url）',
   'settings.apiUrlHint': 'OpenAI 兼容接口基址，如 https://api.openai.com/v1；将自动拼接 /images/generations 与 /images/edits',
   'settings.apiKey': 'API 密钥（api_key）',
@@ -175,9 +186,19 @@ export const en: Record<keyof typeof zh, string> = {
   'preview.prev': 'Previous',
   'preview.next': 'Next',
   'preview.index': '{index} / {total}',
+  'preview.zoomControls': 'Image zoom controls',
+  'preview.zoomIn': 'Zoom in',
+  'preview.zoomOut': 'Zoom out',
+  'preview.zoomReset': 'Reset zoom',
+  'preview.zoomLevel': '{percent}%',
+  'preview.copyPrompt': 'Copy prompt',
+  'preview.copied': 'Copied',
+  'preview.addToEdit': 'Add to image to image',
   'config.missing': 'API not configured: open "Settings → Plugins → Configurable" and fill in api_url and api_key for AI Image.',
   'config.configured': 'Connected to {url}',
   'config.disabled': 'The plugin is disabled — re-enable it in Settings.',
+  'connection.connected': 'Connected',
+  'connection.disconnected': 'Disconnected',
   'update.available': 'A new version is available: {version}',
   'update.install': 'Update online',
   'update.installing': 'Updating…',
@@ -186,6 +207,7 @@ export const en: Record<keyof typeof zh, string> = {
   'update.release': 'View Release',
   'settings.title': 'AI Image (dsh-imagegen)',
   'settings.description': 'Configure the image generation API endpoint and key',
+  'settings.currentVersion': 'Current version',
   'settings.apiUrl': 'API URL (api_url)',
   'settings.apiUrlHint': 'OpenAI-compatible base URL, e.g. https://api.openai.com/v1; /images/generations and /images/edits are appended',
   'settings.apiKey': 'API Key (api_key)',

package/src/client/panel.module.css

@@ -121,10 +121,18 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 }
 
 .panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: none;
+}
+
+.panelHeading {
   display: flex;
   align-items: baseline;
   gap: 10px;
-  flex: none;
+  min-width: 0;
 }
 
 .panelTitle {
@@ -143,27 +151,35 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   text-overflow: ellipsis;
 }
 
-/* --- banners ------------------------------------------------------------------ */
+/* --- connection status and update notice -------------------------------------- */
 
-.banner {
+.connectionStatus {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   flex: none;
-  padding: 7px 12px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-label-error);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-error);
+  font: inherit;
   font-size: 12px;
-  line-height: 1.5;
-  border-radius: 10px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  color: var(--dsw-alias-label-secondary);
-  overflow-wrap: anywhere;
+  line-height: 1;
+  white-space: nowrap;
 }
 
-.banner[data-kind='ok'] {
-  color: var(--dsw-alias-state-success-primary);
+.connectionStatus[data-connected='true'] {
   border-color: var(--dsw-alias-state-success-primary);
+  color: var(--dsw-alias-state-success-primary);
 }
 
-.banner[data-kind='warn'] {
-  color: var(--dsw-alias-state-warn-primary);
-  border-color: var(--dsw-alias-state-warn-primary);
+.connectionDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
 }
 
 .updateBanner {
@@ -205,6 +221,16 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 }
 
 @media (max-width: 700px) {
+  .panelHeader {
+    align-items: flex-start;
+  }
+
+  .panelHeading {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 2px;
+  }
+
   .updateBanner {
     align-items: flex-start;
     flex-direction: column;
@@ -772,9 +798,29 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  flex: 1;
+  min-height: 0;
   gap: 14px;
-  align-content: start;
+}
+
+.grid[data-count='1'] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.grid[data-count='2'] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.grid[data-count='3'] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.grid[data-count='4'] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
 }
 
 .imageCard {
@@ -787,6 +833,7 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   overflow: hidden;
   background: var(--dsw-alias-bg-layer-2);
   cursor: zoom-in;
+  min-height: 0;
 }
 
 .imageCard:focus-visible {
@@ -796,9 +843,10 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 
 .image {
   display: block;
+  flex: 1;
+  min-height: 0;
   width: 100%;
-  aspect-ratio: 1 / 1;
-  object-fit: cover;
+  object-fit: contain;
   background: var(--dsw-alias-bg-base);
 }
 
@@ -945,11 +993,11 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
 }
 
 .lightboxNav[data-dir='prev'] {
-  left: 16px;
+  left: max(20px, calc(50% - 640px));
 }
 
 .lightboxNav[data-dir='next'] {
-  right: 16px;
+  right: max(20px, calc(50% - 640px));
 }
 
 .lightboxFigure {
@@ -958,19 +1006,84 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   gap: 10px;
   margin: 0;
   max-width: min(1100px, calc(100vw - 160px));
-  max-height: calc(100vh - 48px);
+  width: min(1100px, calc(100vw - 160px));
+  height: min(820px, calc(100vh - 48px));
+  min-height: 0;
+}
+
+.lightboxStage {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  place-items: center;
+  overflow: auto;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .lightboxImage {
-  max-width: 100%;
-  max-height: calc(100vh - 160px);
+  max-width: calc(100% - 4px);
+  max-height: calc(100% - 4px);
   object-fit: contain;
   border-radius: 10px;
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
-  background: rgba(255, 255, 255, 0.04);
+  transition: transform 120ms ease;
+}
+
+.lightboxTools {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.lightboxTool,
+.lightboxZoomLevel,
+.lightboxCopy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  cursor: pointer;
+}
+
+.lightboxTool,
+.lightboxZoomLevel {
+  height: 32px;
+}
+
+.lightboxTool {
+  width: 32px;
+  border-radius: 50%;
+}
+
+.lightboxZoomLevel {
+  min-width: 58px;
+  padding: 0 9px;
+  border-radius: 999px;
+  font: inherit;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.lightboxTool:hover,
+.lightboxZoomLevel:hover,
+.lightboxCopy:hover {
+  background: rgba(255, 255, 255, 0.26);
+}
+
+.lightboxCaptionRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
 }
 
 .lightboxCaption {
+  flex: 1;
+  min-width: 0;
   font-size: 12px;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.9);
@@ -980,6 +1093,17 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   overflow: hidden;
 }
 
+.lightboxCopy {
+  flex: none;
+  gap: 5px;
+  min-height: 28px;
+  padding: 4px 9px;
+  border-radius: 999px;
+  font: inherit;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
 .lightboxMeta {
   display: flex;
   align-items: center;
@@ -993,8 +1117,16 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   font-variant-numeric: tabular-nums;
 }
 
-.lightboxDownload {
+.lightboxActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.lightboxDownload,
+.lightboxEdit {
   padding: 4px 14px;
+  font: inherit;
   font-size: 12.5px;
   font-weight: 500;
   color: #fff;
@@ -1002,12 +1134,51 @@ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ss
   border: 1px solid rgba(255, 255, 255, 0.28);
   border-radius: 999px;
   text-decoration: none;
+  cursor: pointer;
 }
 
-.lightboxDownload:hover {
+.lightboxDownload:hover,
+.lightboxEdit:hover {
   background: rgba(255, 255, 255, 0.26);
 }
 
+.lightboxEdit {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  border-radius: 999px;
+}
+
+@media (max-width: 720px) {
+  .lightbox {
+    padding: 16px;
+  }
+
+  .lightboxFigure {
+    width: calc(100vw - 32px);
+    max-width: none;
+  }
+
+  .lightboxNav[data-dir='prev'] {
+    left: 20px;
+  }
+
+  .lightboxNav[data-dir='next'] {
+    right: 20px;
+  }
+
+  .lightboxCaptionRow,
+  .lightboxMeta {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .lightboxCopy,
+  .lightboxActions {
+    align-self: flex-end;
+  }
+}
+
 @keyframes dshImageGenSpin {
   to { transform: rotate(360deg); }
 }