@dickpy/dsh-imagegen 1.5.2 → 1.5.4

package/src/client/ImageGenPanel.tsx

@@ -17,7 +17,9 @@ import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment'
 import type { ImageGenApi } from './api.ts'
 import { errorMessage, tt } from './helpers.ts'
 import { TemplateLibrary } from './TemplateLibrary.tsx'
-import { InspirationGallery } from './InspirationGallery.tsx'
+import { InspirationGallery } from './InspirationGallery.tsx'
+import { CanvasWorkspace } from './CanvasWorkspace.tsx'
+import { useImageGenLanguageTick } from './use-language.ts'
 import type { EcommerceRefRole, GeneratedImage, GenerateMode, GenerateRequest, GenerationTask, GenerationTaskStatus, HistoryEntry, HistoryImageRef, ProductSetDraft, ProductSetSlot, UpdateInfo } from '../protocol.ts'
 import { AGENT_IMAGE_API } from '../protocol.ts'
 import type { ImageGenConfig, ImageGenScope } from './settings-scope.ts'
@@ -350,19 +352,38 @@ function formatTime(timestamp: number): string {
 
 function defaultEcommerceDraft(): ProductSetDraft {
   return {
-    projectId: '', projectName: '', category: '通用商品', platform: '通用', language: '中文', size: '1:1',
+    projectId: '', projectName: '', category: '通用商品', platform: '通用', language: '中文', customLanguage: '', size: '1:1',
     productName: '', sellingPoints: '', protectedFeatures: '', styleHint: '',
     slots: PRODUCT_SET_SLOTS.map(slot => ({ ...slot })),
   }
 }
 
+/** Standard copy-language choices; custom keeps uncommon locales usable. */
+const ECOMMERCE_COPY_LANGUAGES = [
+  ['中文', '中文'],
+  ['English', 'English'],
+  ['Русский', 'Русский'],
+  ['日本語', '日本語'],
+  ['한국어', '한국어'],
+  ['Français', 'Français'],
+  ['Deutsch', 'Deutsch'],
+  ['Español', 'Español'],
+  ['Português', 'Português'],
+  ['custom', '自定义'],
+] as const
+
+function effectiveEcommerceLanguage(draft: ProductSetDraft): string {
+  return draft.language === 'custom' ? draft.customLanguage?.trim() ?? '' : draft.language
+}
+
 function ecommercePrompt(draft: ProductSetDraft, slot: ProductSetSlot): string {
   const points = draft.sellingPoints.trim() || '突出商品真实材质、结构和核心价值'
   const protectedFeatures = draft.protectedFeatures.trim() || '保持商品颜色、形状、Logo、包装文字和结构真实，不添加不存在的配件'
+  const language = effectiveEcommerceLanguage(draft) || '中文'
   const refClause = slot.refRole !== undefined && slot.refRole !== 'none'
     ? `本图以上传的${ECOMMERCE_ROLE_PROMPT_LABELS[slot.refRole]}图片为参考，商品与风格必须与参考图保持一致；`
     : ''
-  return `电商${slot.label}：为${draft.productName.trim() || '该商品'}制作${slot.description}。商品品类：${draft.category}；平台：${draft.platform}；语言：${draft.language}。商品卖点：${points}。必须遵守：${protectedFeatures}。${refClause}整体要求：商品主体清晰、比例真实、光线自然、画面干净、适合电商发布；${draft.styleHint.trim()}`
+  return `电商${slot.label}：为${draft.productName.trim() || '该商品'}制作${slot.description}。商品品类：${draft.category}；平台：${draft.platform}；语言：${language}。商品卖点：${points}。必须遵守：${protectedFeatures}。${refClause}整体要求：商品主体清晰、比例真实、光线自然、画面干净、适合电商发布；${draft.styleHint.trim()}`
 }
 
 /** Consistency prefix for slots generated after the main image exists. */
@@ -375,7 +396,7 @@ type PanelTab = GenerateMode | 'gallery'
 
 /** Top-level workspaces inside the panel. 'normal' is the classic studio;
  *  more task-oriented modes (prototype, …) can join alongside 'ecommerce'. */
-type PanelWorkspace = 'normal' | 'ecommerce'
+type PanelWorkspace = 'normal' | 'ecommerce' | 'canvas'
 
 type GalleryFilter = string
 type ComparisonSession = { taskIds: string[]; prompt: string; comparisonId: string }
@@ -440,6 +461,10 @@ export function ImageGenPanel(props: {
 }) {
   const { api, scope, sessions, conversation } = props
   const config = useConfig(scope)
+  // The plugin language follows the DSH interface (bridged from ctx.locale);
+  // this tick re-renders the tree so every tt() switches live — the template
+  // library and the inspiration wall render inside this tree.
+  useImageGenLanguageTick()
   const enabled = config?.enabled ?? true
   // Channel-aware model options: the panel lists every configured alias
   // (default channel first); legacy flat fields remain the upgrade fallback.
@@ -459,13 +484,18 @@ export function ImageGenPanel(props: {
   const apiKeySet = (config?.channels ?? []).length > 0 ? channelKeySet : legacyKeySet
   const connected = enabled && configured && apiKeySet
 
-  const [tab, setTab] = useState<PanelTab>('text')
-  const [workspace, setWorkspace] = useState<PanelWorkspace>('normal')
+  const [tab, setTab] = useState<PanelTab>('text')
+  const [workspace, setWorkspace] = useState<PanelWorkspace>('normal')
+  const [canvasImportRequest, setCanvasImportRequest] = useState<{ source: 'history' | 'gallery'; entryId: string; imageIndex: number } | undefined>()
   /** Switch to a normal-generation tab, leaving any task workspace. */
-  const openTab = (next: PanelTab): void => {
-    setWorkspace('normal')
-    setTab(next)
-  }
+  const openTab = (next: PanelTab): void => {
+    setWorkspace('normal')
+    setTab(next)
+  }
+  const addEntryToCanvas = (source: 'history' | 'gallery', entryId: string, imageIndex = 0): void => {
+    setCanvasImportRequest({ source, entryId, imageIndex })
+    setWorkspace('canvas')
+  }
   const [prompt, setPrompt] = useState('')
   const [size, setSize] = useState<string>('auto')
   const [quality, setQuality] = useState<string>('auto')
@@ -479,6 +509,7 @@ export function ImageGenPanel(props: {
   const [images, setImages] = useState<GeneratedImage[]>([])
   const [addingToConversation, setAddingToConversation] = useState<number | string | null>(null)
   const [galleryConversationAddingId, setGalleryConversationAddingId] = useState<string | null>(null)
+  const [historyConversationAddingId, setHistoryConversationAddingId] = useState<string | null>(null)
   const [conversationMessage, setConversationMessage] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
   // Submission is brief; actual generation stays visible until the host
@@ -914,7 +945,7 @@ export function ImageGenPanel(props: {
         ...(asset !== undefined ? { image: asset.dataUrl, refName: asset.name } : {}),
         workflow: 'ecommerce' as const,
         projectId,
-        projectName: ecommerce.projectName.trim() || ecommerce.productName.trim(),
+        projectName: ecommerce.productName.trim(),
         slotKey: `${slot.key}-${index + 1}`,
         slotLabel: slot.label,
       }
@@ -1130,38 +1161,6 @@ export function ImageGenPanel(props: {
     }
   }
 
-  /** Restore one comparison group, including its selected model set. */
-  const restoreHistoryGroup = async (group: HistoryGroup): Promise<void> => {
-    const entry = group.entries[0]
-    if (entry === undefined) return
-    // The product-set form draft cannot be rebuilt from a compiled prompt, so
-    // restoring a product set reopens its grouped results canvas.
-    if (entry.workflow === 'ecommerce' && entry.projectId !== undefined) {
-      await viewEcommerceProject(group)
-      return
-    }
-    try {
-      const restored = await loadHistoryGroup(group)
-      openTab(entry.mode)
-      setPrompt(entry.prompt)
-      setSize(normalizeSize(entry.size))
-      setQuality(normalizeQuality(entry.quality))
-      setDetail((DETAILS as readonly string[]).includes(entry.detail) ? entry.detail : '')
-      setCount(entry.n >= 1 && entry.n <= 4 ? entry.n : 1)
-      setModel(imageModels.includes(entry.model) ? entry.model : imageModels[0])
-      setCompareModels(group.models.filter(candidate => imageModels.includes(candidate)))
-      setCompareEnabled(group.models.filter(candidate => imageModels.includes(candidate)).length > 1)
-      setRefImage(null)
-      setImages(restored)
-      setComparison(null)
-      setError(null)
-      setViewingHistoryId(entry.id)
-      setGalleryViewingId(null)
-    } catch (caught) {
-      setError(errorMessage(caught))
-    }
-  }
-
   /** Remove every persisted row belonging to one comparison group. */
   const deleteHistoryGroup = async (group: HistoryGroup): Promise<void> => {
     const ids = new Set(group.entries.map(entry => entry.id))
@@ -1309,6 +1308,21 @@ export function ImageGenPanel(props: {
     }
   }
 
+  /** Add one history entry's first image to the current chat draft. */
+  const addHistoryEntryToConversation = async (entry: HistoryEntry): Promise<void> => {
+    if (historyConversationAddingId !== null || addingToConversation !== null || galleryConversationAddingId !== null || entry.images.length === 0) return
+    setHistoryConversationAddingId(entry.id)
+    try {
+      const [image] = await historyImagesToGenerated(entry.images.slice(0, 1))
+      if (image === undefined) return
+      await addImageToConversation(image, 0, `history:${entry.id}`)
+    } catch (caught) {
+      setError(errorMessage(caught))
+    } finally {
+      setHistoryConversationAddingId(null)
+    }
+  }
+
   /** Load a persisted gallery image and add it to the current chat draft. */
   const addGalleryEntryToConversation = async (entry: HistoryEntry): Promise<void> => {
     if (galleryConversationAddingId !== null || addingToConversation !== null || entry.images.length === 0) return
@@ -1338,27 +1352,6 @@ export function ImageGenPanel(props: {
     }
   }
 
-  /** Restore a gallery entry's parameters (and its images) into the form. */
-  const restoreGalleryEntry = async (entry: HistoryEntry): Promise<void> => {
-    try {
-      const restored = await historyImagesToGenerated(entry.images)
-      openTab(entry.mode)
-      setPrompt(entry.prompt)
-      setSize(normalizeSize(entry.size))
-      setQuality(normalizeQuality(entry.quality))
-      setDetail((DETAILS as readonly string[]).includes(entry.detail) ? entry.detail : '')
-      setCount(entry.n >= 1 && entry.n <= 4 ? entry.n : 1)
-      setModel(imageModels.includes(entry.model) ? entry.model : imageModels[0])
-      setRefImage(null)
-      setImages(restored)
-      setError(null)
-      setViewingHistoryId(null)
-      setGalleryViewingId(null)
-    } catch (caught) {
-      setError(errorMessage(caught))
-    }
-  }
-
   /** Remove one gallery entry. */
   const deleteGalleryEntry = async (id: string): Promise<void> => {
     setGallery(gallery.filter(entry => entry.id !== id))
@@ -1449,7 +1442,7 @@ export function ImageGenPanel(props: {
   const generateDisabled = submitting || modeModels.length === 0
   const ecommerceSlots = ecommerce.slots.filter(slot => slot.enabled && slot.count > 0)
   const ecommerceTotal = ecommerceSlots.reduce((total, slot) => total + slot.count, 0)
-  const ecommerceGenerateDisabled = submitting || ecommerceGenerating || ecommerceSlots.length === 0 || ecommerce.productName.trim() === ''
+  const ecommerceGenerateDisabled = submitting || ecommerceGenerating || ecommerceSlots.length === 0 || ecommerce.productName.trim() === '' || (ecommerce.language === 'custom' && effectiveEcommerceLanguage(ecommerce) === '')
   const ecommerceFileInput = useRef<HTMLInputElement>(null)
   // The results canvas merges live tasks of the active project with restored
   // history entries of the same project; restored slots that were regenerated
@@ -1479,7 +1472,7 @@ export function ImageGenPanel(props: {
   const ecommerceResultGroups = [...new Set(ecommerceMergedItems.map(item => item.label))]
     .filter(label => label !== '')
     .map(label => ({ label, items: ecommerceMergedItems.filter(item => item.label === label) }))
-  const conversationBusy = addingToConversation !== null || galleryConversationAddingId !== null
+  const conversationBusy = addingToConversation !== null || galleryConversationAddingId !== null || historyConversationAddingId !== null
   const viewingEntry = viewingHistoryId === null ? null : history.find(entry => entry.id === viewingHistoryId) ?? null
   const viewingGalleryEntry = galleryViewingId === null ? null : gallery.find(entry => entry.id === galleryViewingId) ?? null
   const previewImage = preview === null ? null : preview.images[preview.index] ?? null
@@ -1562,6 +1555,16 @@ export function ImageGenPanel(props: {
           >
             <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" aria-hidden="true"><path d="M8 3v10M3 8h10" /></svg>
           </button>
+          <button
+            type="button"
+            className={css.historyNew}
+            data-history-open-folder=""
+            aria-label={tt('gallery.openFolder')}
+            title={tt('gallery.openFolderHint')}
+            onClick={() => { void api.openDataFolder() }}
+          >
+            <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M1.5 4.2A1.2 1.2 0 0 1 2.7 3h2.9l1.6 1.9h6.1A1.2 1.2 0 0 1 14.5 6.1v6.2a1.2 1.2 0 0 1-1.2 1.2H2.7a1.2 1.2 0 0 1-1.2-1.2z" /></svg>
+          </button>
           {history.length > 0 ? (
             <button type="button" className={css.historyClear} data-history-clear="" onClick={() => { void clearHistory() }}>
               {tt('history.clear')}
@@ -1623,22 +1626,53 @@ export function ImageGenPanel(props: {
                   </span>
                 </button>
                 <span className={css.historyActions}>
+                  {entry.images.length > 0 ? (
+                    <button
+                      type="button"
+                      className={css.historyIconAction}
+                      disabled={conversationBusy}
+                      title={`${tt('conversation.add')}：${tt('conversation.addHint')}`}
+                      aria-label={tt('conversation.add')}
+                      data-history-add-conversation=""
+                      onClick={() => { void addHistoryEntryToConversation(entry) }}
+                    >
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 2.5h8A1.5 1.5 0 0 1 13.5 4v5a1.5 1.5 0 0 1-1.5 1.5H8.5L5.5 13v-2.5H4A1.5 1.5 0 0 1 2.5 9V4A1.5 1.5 0 0 1 4 2.5z" /></svg>
+                    </button>
+                  ) : null}
                   {entry.images.length > 0 ? (
                     <button
                       type="button"
-                      className={css.historyAction}
+                      className={css.historyIconAction}
                       disabled={galleryAdding}
                       title={tt('gallery.add')}
+                      aria-label={tt('gallery.add')}
+                      data-history-add-gallery=""
                       onClick={() => { void addHistoryEntryToGallery(entry) }}
                     >
-                      {tt('gallery.add')}
-                    </button>
-                  ) : null}
-                  <button type="button" className={css.historyAction} onClick={() => { void restoreHistoryGroup(group) }}>
-                    {tt('history.restore')}
-                  </button>
-                  <button type="button" className={css.historyAction} data-danger onClick={() => { void deleteHistoryGroup(group) }}>
-                    {tt('history.delete')}
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2.5" y="3" width="11" height="10" rx="1.5" /><circle cx="5.9" cy="6.1" r="1" /><path d="M13.5 10.2l-3.1-3.1L4.6 13" /></svg>
+                    </button>
+                  ) : null}
+                  {entry.images.length > 0 ? (
+                    <button
+                      type="button"
+                      className={css.historyIconAction}
+                      title={tt('canvas.addToCanvas')}
+                      aria-label={tt('canvas.addToCanvas')}
+                      data-history-add-canvas=""
+                      onClick={() => { addEntryToCanvas('history', entry.id, 0) }}
+                    >
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2.5" y="2.5" width="11" height="11" rx="1.5" /><path d="M5 8h6M8 5v6" /></svg>
+                    </button>
+                  ) : null}
+                  <button
+                    type="button"
+                    className={css.historyIconAction}
+                    data-danger
+                    title={tt('history.delete')}
+                    aria-label={tt('history.delete')}
+                    onClick={() => { void deleteHistoryGroup(group) }}
+                  >
+                    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M2.5 4.5h11" /><path d="M6 4.5V3.2a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v1.3" /><path d="M4.3 4.5l.6 8.1a1 1 0 0 0 1 .9h4.2a1 1 0 0 0 1-.9l.6-8.1" /><path d="M6.7 7v4M9.3 7v4" /></svg>
                   </button>
                 </span>
               </div>
@@ -1665,11 +1699,12 @@ export function ImageGenPanel(props: {
             <svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
           </a>
         </span>
-        <nav className={css.topNav} role="tablist" aria-label={tt('workspace.label')}>
-          <button type="button" className={css.topNavItem} data-active={workspace === 'normal' && tab !== 'gallery' ? '' : undefined} onClick={() => { if (workspace !== 'normal' || tab === 'gallery') openTab('text') }}>{tt('workspace.normal')}</button>
-          <button type="button" className={css.topNavItem} data-active={workspace === 'normal' && tab === 'gallery' ? '' : undefined} onClick={() => { openTab('gallery') }}>{tt('gallery.title')}</button>
-          <span className={css.topNavDivider} aria-hidden="true" />
-          <button type="button" className={css.topNavItem} data-active={workspace === 'ecommerce' ? '' : undefined} onClick={() => { setWorkspace('ecommerce') }}>{tt('workspace.ecommerce')}<span className={css.previewBadge}>{tt('ecommerce.badge')}</span></button>
+        <nav className={css.topNav} role="tablist" aria-label={tt('workspace.label')}>
+          <button type="button" className={css.topNavItem} data-active={workspace === 'normal' && tab !== 'gallery' ? '' : undefined} onClick={() => { if (workspace !== 'normal' || tab === 'gallery') openTab('text') }}>{tt('workspace.normal')}</button>
+          <button type="button" className={css.topNavItem} data-active={workspace === 'normal' && tab === 'gallery' ? '' : undefined} onClick={() => { openTab('gallery') }}>{tt('gallery.title')}</button>
+          <span className={css.topNavDivider} aria-hidden="true" />
+          <button type="button" className={css.topNavItem} data-active={workspace === 'canvas' ? '' : undefined} onClick={() => { setWorkspace('canvas') }}>{tt('workspace.canvas')}</button>
+          <button type="button" className={css.topNavItem} data-active={workspace === 'ecommerce' ? '' : undefined} onClick={() => { setWorkspace('ecommerce') }}>{tt('workspace.ecommerce')}<span className={css.previewBadge}>{tt('ecommerce.badge')}</span></button>
         </nav>
         <span className={css.panelHeaderActions}>
           <button
@@ -1711,7 +1746,7 @@ export function ImageGenPanel(props: {
 
       <div className={css.studio}>
         {/* ------------------------------- left history + generation workspace */}
-        <div className={css.generation}>
+        <div className={css.generation} data-workspace={workspace}>
           {/* ------------------------------------------------ config sidebar */}
           <aside
             ref={configAsideRef}
@@ -1800,10 +1835,6 @@ export function ImageGenPanel(props: {
                     <span className={css.ecommerceFieldLabel}>{tt('ecommerce.productName')}</span>
                     <input value={ecommerce.productName} placeholder={tt('ecommerce.productName')} onChange={event => setEcommerce(previous => ({ ...previous, productName: event.target.value }))} />
                   </label>
-                  <label className={css.ecommerceField}>
-                    <span className={css.ecommerceFieldLabel}>{tt('ecommerce.projectName')}</span>
-                    <input value={ecommerce.projectName} placeholder={tt('ecommerce.projectName')} onChange={event => setEcommerce(previous => ({ ...previous, projectName: event.target.value }))} />
-                  </label>
                   {ecommerceAssets.length === 0 ? (
                     <button
                       type="button"
@@ -1867,7 +1898,18 @@ export function ImageGenPanel(props: {
                     </label>
                     <label className={css.ecommerceField}>
                       <span className={css.ecommerceFieldLabel}>{tt('ecommerce.languageLabel')}</span>
-                      <select value={ecommerce.language} onChange={event => setEcommerce(previous => ({ ...previous, language: event.target.value }))}><option>中文</option><option>English</option></select>
+                      <select aria-label={tt('ecommerce.languageLabel')} value={ecommerce.language} onChange={event => setEcommerce(previous => ({ ...previous, language: event.target.value }))}>
+                        {ECOMMERCE_COPY_LANGUAGES.map(([value, label]) => <option key={value} value={value}>{value === 'custom' ? tt('ecommerce.customLanguageOption') : label}</option>)}
+                      </select>
+                      {ecommerce.language === 'custom' ? (
+                        <input
+                          value={ecommerce.customLanguage ?? ''}
+                          maxLength={40}
+                          placeholder={tt('ecommerce.customLanguagePlaceholder')}
+                          aria-label={tt('ecommerce.customLanguageLabel')}
+                          onChange={event => setEcommerce(previous => ({ ...previous, customLanguage: event.target.value }))}
+                        />
+                      ) : null}
                     </label>
                     <label className={css.ecommerceField}>
                       <span className={css.ecommerceFieldLabel}>{tt('ecommerce.ratioLabel')}</span>
@@ -1913,12 +1955,12 @@ export function ImageGenPanel(props: {
                   </div>
                   {ecommerceSlots.length > 0 ? (
                     <>
-                      <button type="button" className={css.ecommerceAdvancedToggle} aria-expanded={ecommerceRefOpen} onClick={() => { setEcommerceRefOpen(open => !open) }}>
-                        {tt('ecommerce.refSettings')}
+                      <button type="button" className={css.ecommerceAdvancedToggle} aria-expanded={ecommerceRefOpen} aria-controls="dsh-ecommerce-reference-settings" onClick={() => { setEcommerceRefOpen(open => !open) }}>
+                        <span>{tt('ecommerce.refSettings')}</span>
                         <span className={css.ecommerceAdvancedChevron} aria-hidden="true">{ecommerceRefOpen ? '⌃' : '⌄'}</span>
                       </button>
                       {ecommerceRefOpen ? (
-                        <div className={css.ecommerceAdvancedBody}>
+                        <div id="dsh-ecommerce-reference-settings" className={css.ecommerceAdvancedBody}>
                           {ecommerceSlots.map(slot => (
                             <label key={slot.key} className={css.ecommerceRefRow}>
                               <span>{slot.label}</span>
@@ -2194,9 +2236,24 @@ export function ImageGenPanel(props: {
               ) : tt('generate')}
               </Button> : null}
             </section>
-          </aside>
-
-          {/* ------------------------------------------------------- canvas */}
+          </aside>
+
+          {workspace === 'canvas' ? (
+            <CanvasWorkspace
+              api={api}
+              imageModels={imageModels}
+              defaultChannelId={defaultChannelId}
+              connected={connected}
+              history={history}
+              gallery={gallery}
+              tasks={tasks}
+              importRequest={canvasImportRequest}
+              onImportRequestHandled={() => { setCanvasImportRequest(undefined) }}
+              onOpenSettings={() => { openSettingsGuide('generation') }}
+            />
+          ) : null}
+
+          {/* ------------------------------------------------------- canvas */}
           <section className={css.canvas} data-gallery={workspace === 'normal' && tab === 'gallery' ? 'true' : undefined}>
           {workspace === 'normal' && tab === 'gallery' ? (
             <div className={css.galleryWorkspace}>
@@ -2222,6 +2279,7 @@ export function ImageGenPanel(props: {
                     <option value="newest">{tt('gallery.newest')}</option>
                     <option value="oldest">{tt('gallery.oldest')}</option>
                   </select>
+                  <button type="button" className={css.galleryClear} data-gallery-open-folder="" title={tt('gallery.openFolderHint')} onClick={() => { void api.openDataFolder() }}>{tt('gallery.openFolder')}</button>
                   {gallery.length > 0 ? <button type="button" className={css.galleryClear} data-gallery-clear="" onClick={() => { void clearGalleryAll() }}>{tt('gallery.clear')}</button> : null}
                 </div>
               </header>
@@ -2252,7 +2310,7 @@ export function ImageGenPanel(props: {
                           <span className={css.galleryBadge}>{entry.mode === 'edit' ? tt('mode.edit') : tt('mode.text')}</span>
                         </button>
                         <div className={css.galleryCardActions}>
-                          <button
+                          <button
                             type="button"
                             className={css.galleryCardAction}
                             data-gallery-add-conversation=""
@@ -2261,9 +2319,19 @@ export function ImageGenPanel(props: {
                             onClick={(event) => { event.stopPropagation(); void addGalleryEntryToConversation(entry) }}
                           >
                             <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 4.5h10v7H3z"/><path d="M5.5 2.5h5M8 6v4M6 8h4"/></svg>
-                            {galleryConversationAddingId === entry.id || addingToConversation === `gallery:${entry.id}` ? tt('conversation.adding') : tt('conversation.add')}
-                          </button>
-                        </div>
+                            {galleryConversationAddingId === entry.id || addingToConversation === `gallery:${entry.id}` ? tt('conversation.adding') : tt('conversation.add')}
+                          </button>
+                          <button
+                            type="button"
+                            className={css.galleryCardAction}
+                            data-gallery-add-canvas=""
+                            title={tt('canvas.addToCanvas')}
+                            onClick={(event) => { event.stopPropagation(); addEntryToCanvas('gallery', entry.id, 0) }}
+                          >
+                            <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2.5" y="2.5" width="11" height="11" rx="1.5" /><path d="M5 8h6M8 5v6" /></svg>
+                            {tt('canvas.addToCanvas')}
+                          </button>
+                        </div>
                         <div className={css.galleryCardFooter}>
                           <span className={css.galleryAvatar}>{entry.model.toLowerCase().startsWith('nanobanana') ? 'N' : entry.model.toLowerCase().startsWith('seedream') ? 'S' : entry.model.startsWith('grok') ? 'G' : 'D'}</span>
                           <span className={css.galleryCardInfo}>