@dickpy/dsh-imagegen 1.2.2 → 1.3.0

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 / grok-imagine-image / dall-e-3, with native xAI Grok Imagine request shaping), with a settings card for api_url / api_key and a sidebar entry opening a split-pane generation studio.",
-  "version": "1.2.2",
+  "description": "AI image generation plugin for the dsh web GUI: text-to-image and image-to-image through configurable provider channels (gpt-image-2 / grok-imagine-image / nanobanana series / seedream-5.0-pro / dall-e-3, with native xAI Grok Imagine, Google Nano Banana and ByteDance Seedream request shaping), with per-channel model catalogs and a sidebar entry opening a split-pane generation studio.",
+  "version": "1.3.0",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/src/agent-image-tools.ts

@@ -2,20 +2,20 @@
 
 import type { Context } from '@deepseek-ai/cordis'
 import { defineTool } from '@deepseek-ai/dsh-tools'
+import type { ToolResult, ToolResultView } from '@deepseek-ai/dsh-tools'
 import type { ImageAttachmentRef, ImageMediaType } from '@deepseek-ai/dsh-attachment'
 import type {} from '@deepseek-ai/dsh-attachment'
 import type {} from '@deepseek-ai/dsh-tools'
 import { ImageGenError } from './engine.ts'
-import { ImageGenerationRuntime } from './generation-runtime.ts'
-import { normalizeImageModels } from './image-models.ts'
+import { ImageGenerationRuntime, type RuntimeChannel } from './generation-runtime.ts'
+import { detectImageMime } from './image-format.ts'
 import type { GenerationTask, GeneratedImage } from './protocol.ts'
 
 export interface AgentImageToolConfig {
   enabled: boolean
   allowAgentImageGeneration: boolean
-  apiUrl: string
-  apiKey: string
-  imageModels: string[]
+  channels: RuntimeChannel[]
+  defaultChannelId: string
 }
 
 interface AgentImageRef {
@@ -97,12 +97,62 @@ function imageDataUrl(image: { data: Uint8Array; ref: ImageAttachmentRef }): str
   return `data:${image.ref.mediaType};base64,${Buffer.from(image.data).toString('base64')}`
 }
 
-function renderTaskResult(value: AgentTaskResult): Array<{ type: 'text'; text: string } | { type: 'image'; attachment: ImageAttachmentRef }> {
-  const text = JSON.stringify(value)
-  return [
-    { type: 'text', text },
-    ...value.images.map(image => ({ type: 'image' as const, attachment: restoreRef(image) })),
-  ]
+function renderTaskResult(value: AgentTaskResult): Array<{ type: 'text'; text: string }> {
+  // Generated images are presentation output, not model input. Keeping the
+  // model-facing result textual lets image generation work with text-only
+  // conversation models while preserving the attachment references needed by
+  // edit_image.
+  return [{ type: 'text', text: JSON.stringify(value) }]
+}
+
+/** The UI-only projection that keeps generated images beside the tool call. */
+function imagePresentationMeta(value: AgentTaskResult): { images: Array<Record<string, string | number>> } {
+  return {
+    images: value.images.map(image => {
+      const ref: Record<string, string | number> = {
+        attachment_id: image.attachment_id,
+        media_type: image.media_type,
+        bytes: image.bytes,
+        width: image.width,
+        height: image.height,
+      }
+      if (image.name !== undefined) ref.name = image.name
+      return ref
+    }),
+  }
+}
+
+function imageBlocksFromMeta(meta: unknown): Array<{ type: 'image'; attachment: ImageAttachmentRef }> {
+  if (typeof meta !== 'object' || meta === null || Array.isArray(meta)) return []
+  const images = (meta as { images?: unknown }).images
+  if (!Array.isArray(images)) return []
+  return images.flatMap((value): Array<{ type: 'image'; attachment: ImageAttachmentRef }> => {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) return []
+    const raw = value as Record<string, unknown>
+    if (typeof raw.attachment_id !== 'string'
+      || typeof raw.media_type !== 'string'
+      || typeof raw.bytes !== 'number'
+      || typeof raw.width !== 'number'
+      || typeof raw.height !== 'number') return []
+    try {
+      return [{ type: 'image', attachment: restoreRef({
+        attachment_id: raw.attachment_id,
+        media_type: raw.media_type,
+        bytes: raw.bytes,
+        width: raw.width,
+        height: raw.height,
+        ...typeof raw.name === 'string' ? { name: raw.name } : {},
+      }) }]
+    } catch {
+      return []
+    }
+  })
+}
+
+/** Rehydrate image attachments for the host-computed tool result view only. */
+function presentImageResult(_args: unknown, result: ToolResult): ToolResultView | undefined {
+  const content = result.isError ? [] : imageBlocksFromMeta(result.meta)
+  return content.length === 0 ? undefined : { card: 'generic', content }
 }
 
 /** Register the global Agent tools and unregister them with the plugin lifecycle. */
@@ -112,15 +162,37 @@ export function registerAgentImageTools(ctx: Context, runtime: ImageGenerationRu
     const config = resolve()
     if (!config.enabled) throw new ImageGenError('AI image generation is disabled. Open Settings > Plugins > AI Image and enable it.', 'plugin-disabled')
     if (!config.allowAgentImageGeneration) throw new ImageGenError('Agent image generation is disabled in Settings > Plugins > AI Image.', 'agent-generation-disabled')
-    if (config.apiUrl.trim() === '' || config.apiKey.trim() === '') throw new ImageGenError('Image API credentials are not configured. Open Settings > Plugins > AI Image and fill in API URL and API key.', 'image-api-not-configured')
+    const usable = config.channels.some(channel => channel.apiUrl.trim() !== '' && channel.apiKey.trim() !== '')
+    if (!usable) throw new ImageGenError('Image API credentials are not configured. Open Settings > Plugins > AI Image, add a channel and fill in its API URL and API key.', 'image-api-not-configured')
   }
-  const selectedModel = (requested: unknown): string => {
-    const models = normalizeImageModels(resolve().imageModels)
-    const model = typeof requested === 'string' && requested.trim() !== '' ? requested.trim() : models[0]
-    if (!models.includes(model)) {
-      throw new ImageGenError(`Image model "${model}" is not configured. Choose one of: ${models.join(', ')}.`, 'image-model-not-configured')
+
+  /**
+   * Resolve the requested model alias onto a channel. Rules:
+   *  - a named alias must exist in some channel's catalog (several channels
+   *    may host it; the default channel wins);
+   *  - with no alias, a single configured model is used directly, while
+   *    multiple models require the Agent to ask the user first.
+   * @returns the channel plus the alias and its upstream id.
+   */
+  const resolveModel = (requested: unknown): { channel: RuntimeChannel; alias: string; upstream: string } => {
+    const config = resolve()
+    const entries = config.channels.flatMap(channel => channel.models.map(model => ({ channel, alias: model.alias, upstream: model.id })))
+    if (entries.length === 0) {
+      throw new ImageGenError('No image models are configured. Open Settings > Plugins > AI Image and add a channel with at least one model.', 'no-models-configured')
+    }
+    const wanted = typeof requested === 'string' && requested.trim() !== '' ? requested.trim() : ''
+    if (wanted === '') {
+      if (entries.length === 1) return entries[0]!
+      const options = config.channels.flatMap(channel => channel.models.map(model => `"${channel.name} · ${model.alias}"`)).join(', ')
+      throw new ImageGenError(`Multiple image models are available — ask the user which channel and model to use, then call this tool again with that exact model name. Options: ${options}.`, 'model-choice-required')
     }
-    return model
+    const hosting = entries.filter(entry => entry.alias === wanted)
+    if (hosting.length === 0) {
+      const available = [...new Set(entries.map(entry => entry.alias))].join(', ')
+      throw new ImageGenError(`Image model "${wanted}" is not configured in any channel. Choose one of: ${available}.`, 'image-model-not-configured')
+    }
+    const preferred = hosting.find(entry => entry.channel.id === config.defaultChannelId)
+    return preferred ?? hosting[0]!
   }
   const materializeTaskImages = (task: GenerationTask): Promise<AgentImageRef[]> => {
     if (task.status !== 'completed') return Promise.resolve([])
@@ -140,7 +212,7 @@ export function registerAgentImageTools(ctx: Context, runtime: ImageGenerationRu
       task_id: task.id,
       status: task.status,
       message: task.status === 'completed'
-        ? 'Generation completed. The images are attached below and can be reused as source_image in edit_image.'
+        ? 'Generation completed. The images are shown beside this tool call and can be reused as source_image in edit_image.'
         : task.status === 'failed'
           ? 'Generation failed.'
           : task.status === 'cancelled'
@@ -218,7 +290,7 @@ export function registerAgentImageTools(ctx: Context, runtime: ImageGenerationRu
   const disposers = [
     ctx.tools.register(defineTool({
       name: 'generate_image',
-      description: 'Generate an image. By default this tool call stays pending until the task reaches a final state, and completed images are returned directly as tool-result attachments without creating a user message. Set wait_for_completion to false for background mode, then use get_image_generation_task explicitly. Only use models configured for this plugin; omit model to use the first configured image model.',
+      description: 'Generate an image. By default this tool call stays pending until the task reaches a final state; completed images are shown beside this tool call, while the model receives their attachment references, without creating a user message. Set wait_for_completion to false for background mode, then use get_image_generation_task explicitly. Only use models configured for this plugin; omit model to use the first configured image model.',
       parameters: {
         prompt: { type: 'string', required: true, description: 'Detailed image-generation prompt.' },
         model: { type: 'string', description: 'One of the configured image models. Defaults to the first configured model.' },
@@ -228,12 +300,21 @@ export function registerAgentImageTools(ctx: Context, runtime: ImageGenerationRu
         detail: { type: 'string', description: 'Optional provider detail value, for example standard or high.' },
         wait_for_completion: { type: 'boolean', description: 'Wait for images and return them in this tool result. Defaults to true; set false for background mode.' },
       },
-      output: { schema: taskResultSchema, render: (_args, value) => renderTaskResult(value) },
+      output: {
+        schema: taskResultSchema,
+        render: (_args, value) => renderTaskResult(value),
+        presentationMeta: (_args, value) => imagePresentationMeta(value),
+      },
+      presentResult: presentImageResult,
       async execute(args, exec) {
         ensureConfigured()
+        const picked = resolveModel(args.model)
         const task = runtime.queue.submit({
           mode: 'text',
-          model: selectedModel(args.model),
+          model: picked.alias,
+          upstream: picked.upstream,
+          channelId: picked.channel.id,
+          channel: picked.channel.name,
           prompt: args.prompt.trim(),
           size: args.size ?? 'auto',
           quality: args.quality ?? 'auto',
@@ -245,7 +326,7 @@ export function registerAgentImageTools(ctx: Context, runtime: ImageGenerationRu
     })),
     ctx.tools.register(defineTool({
       name: 'edit_image',
-      description: 'Edit an image. By default this tool call stays pending until the task reaches a final state, and completed images are returned directly as tool-result attachments without creating a user message. Set wait_for_completion to false for background mode, then use get_image_generation_task explicitly. source_image must be an image reference returned by a completed generation or get_image_generation_task; pass that entire object unchanged. Only configured image models are allowed; omit model to use the first configured model.',
+      description: 'Edit an image. By default this tool call stays pending until the task reaches a final state; completed images are shown beside this tool call, while the model receives their attachment references, without creating a user message. Set wait_for_completion to false for background mode, then use get_image_generation_task explicitly. source_image must be an image reference returned by a completed generation or get_image_generation_task; pass that entire object unchanged. Only configured image models are allowed; omit model to use the first configured model.',
       parameters: {
         prompt: { type: 'string', required: true, description: 'How to transform the source image.' },
         source_image: { ...imageRefSchema, required: true, description: 'Image reference returned by get_image_generation_task.' },
@@ -256,13 +337,22 @@ export function registerAgentImageTools(ctx: Context, runtime: ImageGenerationRu
         detail: { type: 'string', description: 'Optional provider detail value.' },
         wait_for_completion: { type: 'boolean', description: 'Wait for images and return them in this tool result. Defaults to true; set false for background mode.' },
       },
-      output: { schema: taskResultSchema, render: (_args, value) => renderTaskResult(value) },
+      output: {
+        schema: taskResultSchema,
+        render: (_args, value) => renderTaskResult(value),
+        presentationMeta: (_args, value) => imagePresentationMeta(value),
+      },
+      presentResult: presentImageResult,
       async execute(args, exec) {
         ensureConfigured()
         const reference = await ctx.attachments.readImage(restoreRef(args.source_image), exec.signal)
+        const picked = resolveModel(args.model)
         const task = runtime.queue.submit({
           mode: 'edit',
-          model: selectedModel(args.model),
+          model: picked.alias,
+          upstream: picked.upstream,
+          channelId: picked.channel.id,
+          channel: picked.channel.name,
           prompt: args.prompt.trim(),
           size: args.size ?? 'auto',
           quality: args.quality ?? 'auto',
@@ -276,9 +366,14 @@ export function registerAgentImageTools(ctx: Context, runtime: ImageGenerationRu
     })),
     ctx.tools.register(defineTool({
       name: 'get_image_generation_task',
-      description: 'Check an image-generation task status. Completed tasks return image references and image attachments for edit_image. Generation tools normally wait for completion, so use this for explicit recovery or status checks.',
+      description: 'Check an image-generation task status. Completed tasks return image references; their images are shown beside this tool call and the references can be passed to edit_image. Generation tools normally wait for completion, so use this for explicit recovery or status checks.',
       parameters: { task_id: { type: 'string', required: true, description: 'Task id returned by generate_image or edit_image.' } },
-      output: { schema: taskResultSchema, render: (_args, value) => renderTaskResult(value) },
+      output: {
+        schema: taskResultSchema,
+        render: (_args, value) => renderTaskResult(value),
+        presentationMeta: (_args, value) => imagePresentationMeta(value),
+      },
+      presentResult: presentImageResult,
       async execute(args) {
         ensureConfigured()
         return taskResult(findTask(args.task_id))
@@ -288,7 +383,12 @@ export function registerAgentImageTools(ctx: Context, runtime: ImageGenerationRu
       name: 'cancel_image_generation_task',
       description: 'Cancel a queued or running image generation task.',
       parameters: { task_id: { type: 'string', required: true, description: 'Task id returned by generate_image or edit_image.' } },
-      output: { schema: taskResultSchema, render: (_args, value) => renderTaskResult(value) },
+      output: {
+        schema: taskResultSchema,
+        render: (_args, value) => renderTaskResult(value),
+        presentationMeta: (_args, value) => imagePresentationMeta(value),
+      },
+      presentResult: presentImageResult,
       async execute(args) {
         ensureConfigured()
         const task = runtime.queue.cancel(args.task_id)
@@ -307,9 +407,11 @@ function isFinalTask(task: GenerationTask): boolean {
 }
 
 function toSaveImage(image: GeneratedImage, taskId: string, index: number): { data: Uint8Array; mediaType: ImageMediaType; name: string } {
-  const mediaType = acceptedMediaType(image.mime) ? image.mime : 'image/png'
+  const data = Buffer.from(image.b64, 'base64')
+  const declaredMediaType = acceptedMediaType(image.mime) ? image.mime : 'image/png'
+  const mediaType = detectImageMime(data) ?? declaredMediaType
   return {
-    data: Buffer.from(image.b64, 'base64'),
+    data,
     mediaType,
     name: `imagegen-${taskId}-${index + 1}.${mediaType === 'image/jpeg' ? 'jpg' : mediaType.slice('image/'.length)}`,
   }

package/src/client/ImageGenPanel.tsx

@@ -16,7 +16,8 @@ import { errorMessage, tt } from './helpers.ts'
 import { TemplateLibrary } from './TemplateLibrary.tsx'
 import type { GeneratedImage, GenerateMode, GenerateRequest, GenerationTask, HistoryEntry, HistoryImageRef, UpdateInfo } from '../protocol.ts'
 import type { ImageGenConfig, ImageGenScope } from './settings-scope.ts'
-import { DEFAULT_IMAGE_MODELS, normalizeImageModels } from '../image-models.ts'
+import { imageModelOptions } from './settings-scope.ts'
+import { normalizeImageModels } from '../image-models.ts'
 import css from './panel.module.css'
 
 /** Size options, presented as aspect ratios (auto = let the model decide).
@@ -102,10 +103,15 @@ function useSecretSet(scope: ImageGenScope, field: string): boolean {
 function useElapsed(running: boolean, startedAt: number | null): number {
   const [elapsed, setElapsed] = useState(0)
   useEffect(() => {
-    if (!running || startedAt === null) return
-    const timer = window.setInterval(() => {
+    if (!running || startedAt === null) {
+      setElapsed(0)
+      return
+    }
+    const update = (): void => {
       setElapsed(Math.max(1, Math.round((Date.now() - startedAt) / 1000)))
-    }, 1000)
+    }
+    update()
+    const timer = window.setInterval(update, 1000)
     return () => window.clearInterval(timer)
   }, [running, startedAt])
   return elapsed
@@ -160,12 +166,23 @@ export function ImageGenPanel(props: {
   const { api, scope } = props
   const config = useConfig(scope)
   const enabled = config?.enabled ?? true
-  const apiUrl = config?.apiUrl ?? ''
+  // Channel-aware model options: the panel lists every configured alias
+  // (default channel first); legacy flat fields remain the upgrade fallback.
+  const modelOptions = imageModelOptions(config)
+  const hasChannels = (config?.channels ?? []).length > 0
+  // With channels configured, the model list is exactly the configured aliases
+  // (possibly empty — never fall back to the hardcoded legacy defaults).
+  const imageModels = hasChannels ? modelOptions.models : normalizeImageModels(config?.imageModels)
+  const defaultChannelId = modelOptions.defaultChannelId
+  const apiUrl = defaultChannelId !== undefined && (config?.channels ?? []).length > 0
+    ? (config!.channels!.find(channel => channel.id === defaultChannelId)?.apiUrl ?? '')
+    : (config?.apiUrl ?? '')
   const configured = apiUrl.trim() !== ''
-  const apiKeySet = useSecretSet(scope, 'apiKey')
+  const legacyKeySet = useSecretSet(scope, 'apiKey')
   const promptKeySet = useSecretSet(scope, 'promptApiKey')
+  const channelKeySet = (config?.channels ?? []).some(channel => scope.getSecretSetSnapshot(`channelSecrets.${channel.id}`))
+  const apiKeySet = (config?.channels ?? []).length > 0 ? channelKeySet : legacyKeySet
   const connected = enabled && configured && apiKeySet
-  const imageModels = normalizeImageModels(config?.imageModels)
 
   const [tab, setTab] = useState<PanelTab>('text')
   const [prompt, setPrompt] = useState('')
@@ -173,17 +190,18 @@ export function ImageGenPanel(props: {
   const [quality, setQuality] = useState<string>('auto')
   const [count, setCount] = useState(1)
   const [detail, setDetail] = useState('')
-  const [model, setModel] = useState<string>(DEFAULT_IMAGE_MODELS[0])
+  const [model, setModel] = useState<string>('')
   const [compareEnabled, setCompareEnabled] = useState(false)
-  const [compareModels, setCompareModels] = useState<string[]>([...DEFAULT_IMAGE_MODELS])
+  const [compareModels, setCompareModels] = useState<string[]>([])
   const [modelOpen, setModelOpen] = useState(false)
   const [refImage, setRefImage] = useState<{ dataUrl: string; name: string } | null>(null)
   const [images, setImages] = useState<GeneratedImage[]>([])
   const [error, setError] = useState<string | null>(null)
-  const [generating, setGenerating] = useState(false)
+  // Submission is brief; actual generation stays visible until the host
+  // queue reports that every queued/running task has finished.
+  const [submitting, setSubmitting] = useState(false)
   const [enhancing, setEnhancing] = useState(false)
   const [configGuide, setConfigGuide] = useState<'generation' | 'enhancement' | 'disabled' | null>(null)
-  const [startedAt, setStartedAt] = useState<number | null>(null)
   const [history, setHistory] = useState<HistoryEntry[]>([])
   const [viewingHistoryId, setViewingHistoryId] = useState<string | null>(null)
   const [gallery, setGallery] = useState<HistoryEntry[]>([])
@@ -218,7 +236,11 @@ export function ImageGenPanel(props: {
   const [comparisonFullscreen, setComparisonFullscreen] = useState(false)
   const fileInput = useRef<HTMLInputElement>(null)
   const previewStage = useRef<HTMLDivElement>(null)
-  const elapsed = useElapsed(generating, startedAt)
+  const activeTasks = tasks.filter(task => task.status === 'queued' || task.status === 'running')
+  const activeTask = activeTasks.find(task => task.status === 'running') ?? activeTasks[0]
+  const generating = submitting || activeTasks.length > 0
+  const generationStartedAt = activeTask?.startedAt ?? activeTask?.createdAt ?? null
+  const elapsed = useElapsed(generating, generationStartedAt)
 
   // A saved settings change is authoritative. Keep the active selection and
   // comparison choices in that allow-list without disturbing valid choices.
@@ -389,7 +411,7 @@ export function ImageGenPanel(props: {
 
   /** Run one generation. */
   const handleGenerate = async (): Promise<void> => {
-    if (generating) return
+    if (submitting) return
     if (!enabled) {
       openSettingsGuide('disabled')
       return
@@ -415,10 +437,12 @@ export function ImageGenPanel(props: {
       quality,
       n: count,
       detail,
+      ...defaultChannelId !== undefined ? { channelId: defaultChannelId } : {},
       ...tab === 'edit' && refImage !== null ? { image: refImage.dataUrl } : {},
       ...tab === 'edit' && refImage !== null ? { refName: refImage.name } : {},
     }
     setError(null)
+    setSubmitting(true)
     try {
       const targetModels = (compareEnabled ? compareModels : [request.model]).filter(candidate => imageModels.includes(candidate))
       if (targetModels.length === 0) {
@@ -430,6 +454,8 @@ export function ImageGenPanel(props: {
       setComparison(targetModels.length > 1 ? { taskIds: submitted.map(task => task.id), prompt: promptText } : null)
     } catch (caught) {
       setError(errorMessage(caught))
+    } finally {
+      setSubmitting(false)
     }
   }
 
@@ -714,7 +740,7 @@ export function ImageGenPanel(props: {
     })
   }
 
-  const generateDisabled = generating
+  const generateDisabled = submitting
   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
@@ -1011,7 +1037,7 @@ export function ImageGenPanel(props: {
                 <button
                   type="button"
                   className={css.modelSelect}
-                  disabled={generating}
+                  disabled={submitting}
                   aria-haspopup="listbox"
                   aria-expanded={modelOpen}
                   onClick={() => { setModelOpen(open => !open) }}
@@ -1127,7 +1153,7 @@ export function ImageGenPanel(props: {
                           <span className={css.galleryBadge}>{entry.mode === 'edit' ? tt('mode.edit') : tt('mode.text')}</span>
                         </button>
                         <div className={css.galleryCardFooter}>
-                          <span className={css.galleryAvatar}>{entry.model.startsWith('grok') ? 'G' : 'D'}</span>
+                          <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}>
                             <strong>{entry.prompt || tt('gallery.untitled')}</strong>
                             <small>{entry.model} · {normalizeSize(entry.size)} · {formatTime(entry.createdAt)}</small>
@@ -1157,7 +1183,7 @@ export function ImageGenPanel(props: {
               <header className={css.taskTrayHeader}>
                 <button type="button" className={css.taskTrayToggle} aria-expanded={taskTrayOpen} onClick={() => { setTaskTrayOpen(open => !open) }}>
                   <span>{tt('tasks.title')}</span>
-                  <span className={css.taskTrayCount}>{tasks.filter(task => task.status === 'queued' || task.status === 'running').length}</span>
+                  <span className={css.taskTrayCount}>{activeTasks.length}</span>
                   <span className={css.taskTrayChevron} aria-hidden="true">{taskTrayOpen ? '⌃' : '⌄'}</span>
                 </button>
                 {taskTrayOpen ? <button type="button" className={css.taskTrayClose} aria-label={tt('preview.close')} onClick={() => { setTaskTrayOpen(false) }}>×</button> : null}
@@ -1188,10 +1214,20 @@ export function ImageGenPanel(props: {
             </section>
           ) : null}
           {generating ? (
-            <div className={css.canvasState} role="status">
+            <div className={css.canvasState} data-generation-state={activeTask?.status ?? 'submitting'} role="status">
               <span className={css.bigSpinner} />
-              <span className={css.canvasStateTitle}>{tt('canvas.generating')}</span>
-              <span className={css.canvasStateHint}>{tt('canvas.elapsed', { seconds: elapsed })}</span>
+              <span className={css.canvasStateTitle}>
+                {submitting && activeTask === undefined
+                  ? tt('canvas.submitting')
+                  : activeTask?.status === 'queued'
+                    ? tt('canvas.queued')
+                    : tt('canvas.generating')}
+              </span>
+              <span className={css.canvasStateHint}>
+                {activeTask?.status === 'queued'
+                  ? tt('canvas.queueHint', { count: activeTasks.length })
+                  : tt('canvas.elapsed', { seconds: elapsed })}
+              </span>
             </div>
           ) : null}