From 2530ddada6723bf8407a59e471e106c459aa8ecf Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 22 Jul 2026 09:49:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                 |    2 +
 frontend-admin/src/views/ModelsView.vue    |   28 +-
 frontend/src/components/ChatInput.vue      |  643 ++----------
 frontend/src/components/ImageWorkbench.vue | 1085 ++++++++++++++++++++
 frontend/src/components/MessageItem.vue    |  387 ++++++-
 frontend/src/components/MessageList.vue    |  161 ++-
 frontend/src/stores/chat.js                |  106 +-
 package.json                               |    6 +
 scripts/run-conversation-adversarial.ps1   |   56 +
 scripts/run-stability-suite.ps1            |   87 ++
 10 files changed, 1932 insertions(+), 629 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 frontend/src/components/ImageWorkbench.vue
 create mode 100644 scripts/run-conversation-adversarial.ps1
 create mode 100644 scripts/run-stability-suite.ps1

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d40fa88
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+logs/stability/
+logs/conversation/
diff --git a/frontend-admin/src/views/ModelsView.vue b/frontend-admin/src/views/ModelsView.vue
index 74a9914..2284ac2 100644
--- a/frontend-admin/src/views/ModelsView.vue
+++ b/frontend-admin/src/views/ModelsView.vue
@@ -159,6 +159,18 @@
                 <input v-model="form.seed_node" class="form-input" placeholder="自动识别，如 30:3" />
               </div>
             </div>
+            <div class="form-row-2">
+              <div class="form-group">
+                <label>img2img 重绘强度</label>
+                <input v-model.number="form.img2img_denoise" type="number" min="0.01" max="1" step="0.01" class="form-input" />
+                <p class="field-hint">默认 0.45；越低越保留原图，越高变化越明显。</p>
+              </div>
+              <div class="form-group">
+                <label>inpaint 重绘强度</label>
+                <input v-model.number="form.inpaint_denoise" type="number" min="0.01" max="1" step="0.01" class="form-input" />
+                <p class="field-hint">默认 0.72；仅作用于白色遮罩区域。</p>
+              </div>
+            </div>
             <p class="field-hint">
               必须使用 <code>Save (API Format)</code> 导出的 JSON（节点含 class_type）。
               UI Format（含 nodes/links）导入后会秒结束且不出图。
@@ -310,6 +322,8 @@ const form = reactive({
   workflow_json: '',
   prompt_node: '',
   seed_node: '',
+  img2img_denoise: 0.45,
+  inpaint_denoise: 0.72,
   refine_prompt: true,
   system_prompt: ''
 })
@@ -385,14 +399,16 @@ function onProviderChange() {
 }
 
 function parseExtraConfig(extra) {
-  if (!extra) return { workflow_json: '', prompt_node: '', seed_node: '', refine_prompt: true, system_prompt: '' }
+  if (!extra) return { workflow_json: '', prompt_node: '', seed_node: '', img2img_denoise: 0.45, inpaint_denoise: 0.72, refine_prompt: true, system_prompt: '' }
   if (typeof extra === 'string') {
-    try { extra = JSON.parse(extra) } catch { return { workflow_json: '', prompt_node: '', seed_node: '', refine_prompt: true, system_prompt: '' } }
+    try { extra = JSON.parse(extra) } catch { return { workflow_json: '', prompt_node: '', seed_node: '', img2img_denoise: 0.45, inpaint_denoise: 0.72, refine_prompt: true, system_prompt: '' } }
   }
   return {
     workflow_json: extra.workflow ? JSON.stringify(extra.workflow, null, 2) : '',
     prompt_node: extra.prompt_node || '',
     seed_node: extra.seed_node || '',
+    img2img_denoise: Number(extra.img2img_denoise ?? 0.45),
+    inpaint_denoise: Number(extra.inpaint_denoise ?? 0.72),
     refine_prompt: extra.refine_prompt === undefined ? true : !!extra.refine_prompt,
     system_prompt: extra.system_prompt || ''
   }
@@ -437,6 +453,8 @@ function buildExtraConfig() {
   }
   if ((form.prompt_node || '').trim()) config.prompt_node = form.prompt_node.trim()
   if ((form.seed_node || '').trim()) config.seed_node = form.seed_node.trim()
+  config.img2img_denoise = Math.max(0.01, Math.min(1, Number(form.img2img_denoise) || 0.45))
+  config.inpaint_denoise = Math.max(0.01, Math.min(1, Number(form.inpaint_denoise) || 0.72))
   if ((form.system_prompt || '').trim()) config.system_prompt = form.system_prompt.trim()
   config.refine_prompt = !!form.refine_prompt
   return config
@@ -485,7 +503,7 @@ function openCreate() {
     name: '', provider: 'openai', model_id: '', api_base_url: 'https://api.openai.com/v1',
     api_key: '', max_tokens: 4096, temperature: 0.7, is_default: false, enabled: true, support_context: true, support_image: true,
     frequency_penalty: 0, presence_penalty: 0,
-    workflow_json: '', prompt_node: '', seed_node: '', refine_prompt: true, system_prompt: ''
+    workflow_json: '', prompt_node: '', seed_node: '', img2img_denoise: 0.45, inpaint_denoise: 0.72, refine_prompt: true, system_prompt: ''
   })
   showModal.value = true
 }
@@ -510,6 +528,8 @@ function openEdit(m) {
     workflow_json: extra.workflow_json,
     prompt_node: extra.prompt_node,
     seed_node: extra.seed_node,
+    img2img_denoise: extra.img2img_denoise,
+    inpaint_denoise: extra.inpaint_denoise,
     refine_prompt: extra.refine_prompt,
     system_prompt: extra.system_prompt
   })
@@ -540,6 +560,8 @@ async function saveModel() {
   delete payload.workflow_json
   delete payload.prompt_node
   delete payload.seed_node
+  delete payload.img2img_denoise
+  delete payload.inpaint_denoise
   delete payload.refine_prompt
   delete payload.system_prompt
 
diff --git a/frontend/src/components/ChatInput.vue b/frontend/src/components/ChatInput.vue
index 91ff904..75d98b8 100644
--- a/frontend/src/components/ChatInput.vue
+++ b/frontend/src/components/ChatInput.vue
@@ -39,87 +39,7 @@
       </div>
     </div>
 
-    <div class="input-wrapper" :class="{ 'image-mode': isComfyModel, 'agent-enabled': activeAgent && !isComfyModel }">
-      <Transition name="agent-panel">
-        <section
-          v-if="showAgentPanel && !isComfyModel"
-          class="agent-panel"
-          aria-label="选择 Agent"
-        >
-          <header class="agent-panel-header">
-            <div>
-              <span class="agent-eyebrow">Agent 工作台</span>
-              <h3>选择处理这项任务的方式</h3>
-              <p>Agent 会为当前请求加入稳定的分析步骤和输出规范。</p>
-            </div>
-            <button
-              class="agent-panel-close"
-              type="button"
-              aria-label="关闭 Agent 面板"
-              @click="showAgentPanel = false"
-            >
-              <IconX :size="18" :stroke-width="1.8" />
-            </button>
-          </header>
-
-          <div class="agent-options">
-            <button
-              v-for="agent in settings.agents"
-              :key="agent.id"
-              class="agent-option"
-              :class="{ selected: activeAgent?.id === agent.id }"
-              type="button"
-              @click="selectAgent(agent)"
-            >
-              <span class="agent-option-icon" :data-accent="agent.accent">
-                <component :is="agentIcon(agent.icon)" :size="20" :stroke-width="1.75" />
-              </span>
-              <span class="agent-option-copy">
-                <span class="agent-option-heading">
-                  <strong>{{ agent.name }}</strong>
-                  <span v-for="tag in agent.tags" :key="tag" class="agent-tag">{{ tag }}</span>
-                </span>
-                <small>{{ agent.description }}</small>
-              </span>
-              <IconCircleCheckFilled
-                v-if="activeAgent?.id === agent.id"
-                class="agent-option-check"
-                :size="18"
-              />
-            </button>
-          </div>
-
-          <footer v-if="activeAgent" class="agent-panel-footer">
-            <div class="agent-starters">
-              <span>快速开始</span>
-              <button
-                v-for="starter in activeAgent.starters"
-                :key="starter"
-                type="button"
-                @click="applyAgentStarter(starter)"
-              >{{ starter }}</button>
-            </div>
-            <button class="agent-disable" type="button" @click="clearAgent">
-              不使用 Agent
-            </button>
-          </footer>
-        </section>
-      </Transition>
-
-      <div v-if="activeAgent && !isComfyModel" class="active-agent-strip">
-        <span class="active-agent-icon" :data-accent="activeAgent.accent">
-          <component :is="agentIcon(activeAgent.icon)" :size="18" :stroke-width="1.8" />
-        </span>
-        <span class="active-agent-copy">
-          <strong>{{ activeAgent.name }}</strong>
-          <small>{{ activeAgent.description }}</small>
-        </span>
-        <button type="button" class="active-agent-adjust" @click="showAgentPanel = true">调整</button>
-        <button type="button" class="active-agent-remove" aria-label="关闭当前 Agent" @click="clearAgent">
-          <IconX :size="16" :stroke-width="1.9" />
-        </button>
-      </div>
-
+    <div class="input-wrapper" :class="{ 'image-mode': isComfyModel }">
       <textarea
         ref="textareaRef"
         v-model="content"
@@ -164,21 +84,21 @@
           />
 
           <button
-            v-if="!isComfyModel && settings.agents.length"
+            v-if="settings.agents.length"
             class="agent-trigger"
             :class="{ active: activeAgent }"
             type="button"
-            :title="activeAgent ? `当前 Agent：${activeAgent.name}` : '选择 Agent'"
-            :aria-label="activeAgent ? `当前 Agent：${activeAgent.name}` : '选择 Agent'"
-            :aria-expanded="showAgentPanel"
-            @click="showAgentPanel = !showAgentPanel"
+            :title="activeAgent ? '关闭 Agent 自动模式' : '开启 Agent 自动模式'"
+            :aria-label="activeAgent ? '关闭 Agent 自动模式' : '开启 Agent 自动模式'"
+            :aria-pressed="!!activeAgent"
+            @click="toggleAgent"
           >
             <IconRobot :size="17" :stroke-width="1.8" />
-            <span class="agent-trigger-label">{{ activeAgent?.short_name || 'Agent' }}</span>
+            <span class="agent-trigger-label">Agent</span>
             <span v-if="activeAgent" class="agent-live-dot" aria-hidden="true" />
           </button>
 
-          <div class="mode-switch" role="tablist" aria-label="创作模式">
+          <div v-if="!activeAgent" class="mode-switch" role="tablist" aria-label="创作模式">
             <button
               class="mode-tab"
               :class="{ active: !isComfyModel }"
@@ -207,7 +127,7 @@
             </button>
           </div>
 
-          <label v-if="settings.models.length" class="model-picker" title="选择模型">
+          <label v-if="!activeAgent && settings.models.length" class="model-picker" title="选择模型">
             <IconSparkles :size="16" :stroke-width="1.8" />
             <select
               :value="selectedModelValue"
@@ -243,7 +163,7 @@
             class="send-btn"
             type="button"
             aria-label="发送消息"
-            :disabled="!canSend || sending"
+            :disabled="!canSend || chat.sending"
             @click="handleSend"
           >
             <IconArrowUp :size="19" :stroke-width="2" />
@@ -253,10 +173,13 @@
     </div>
 
     <p v-if="uploadingFiles.length" class="input-hint">正在上传 {{ uploadingFiles.length }} 个文件</p>
-    <p v-else-if="isComfyModel && pendingAttachments.length" class="input-hint input-hint-warn">
-      当前工作流仅支持文生图，请移除附件后输入图片描述
+    <p v-else-if="isComfyModel && pendingAttachments.length" class="input-hint">
+      第一张为原图；需要局部重绘时，第二张请上传同尺寸黑白遮罩（白色区域会被修改）
+    </p>
+    <p v-else-if="isComfyModel" class="input-hint">可直接文生图，也可上传原图进行 img2img / inpaint 图片处理</p>
+    <p v-else-if="activeAgent" class="input-hint">
+      Agent 会自动识别任务，并调用合适的语言或图片生成模型
     </p>
-    <p v-else-if="isComfyModel" class="input-hint">当前是图片生成模式，发送提示词后会在对话中返回图片</p>
     <p v-else-if="auth.isGuest && features.upload_image" class="input-hint input-hint-warn">
       游客模式不支持发送图片，登录后即可上传
     </p>
@@ -266,7 +189,7 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useSettingsStore } from '@/stores/settings'
 import { useAuthStore } from '@/stores/auth'
 import { useChatStore } from '@/stores/chat'
@@ -280,12 +203,7 @@ import IconPaperclip from '@tabler/icons-vue/dist/esm/icons/IconPaperclip.mjs'
 import IconPhoto from '@tabler/icons-vue/dist/esm/icons/IconPhoto.mjs'
 import IconPhotoUp from '@tabler/icons-vue/dist/esm/icons/IconPhotoUp.mjs'
 import IconRobot from '@tabler/icons-vue/dist/esm/icons/IconRobot.mjs'
-import IconRoute from '@tabler/icons-vue/dist/esm/icons/IconRoute.mjs'
-import IconCodeDots from '@tabler/icons-vue/dist/esm/icons/IconCodeDots.mjs'
-import IconPencilBolt from '@tabler/icons-vue/dist/esm/icons/IconPencilBolt.mjs'
-import IconChartDots3 from '@tabler/icons-vue/dist/esm/icons/IconChartDots3.mjs'
 import IconSparkles from '@tabler/icons-vue/dist/esm/icons/IconSparkles.mjs'
-import IconX from '@tabler/icons-vue/dist/esm/icons/IconX.mjs'
 import api from '@/api'
 
 const emit = defineEmits(['send'])
@@ -299,8 +217,6 @@ const content = ref('')
 const pendingAttachments = ref([])
 const uploadingFiles = ref([])
 const showEmoji = ref(false)
-const showAgentPanel = ref(false)
-const sending = ref(false)
 const fileInput = ref(null)
 const textareaRef = ref(null)
 const isDragging = ref(false)
@@ -318,31 +234,30 @@ const activeModel = computed(() => {
   return settings.models.find(m => m.is_default) || settings.models[0] || null
 })
 
-const isComfyModel = computed(() => activeModel.value?.provider === 'comfy')
+const activeAgent = computed(() => {
+  const selected = settings.agents.find(item => item.id === chat.selectedAgentId)
+  if (selected) return selected
+  return chat.selectedAgentId ? settings.agents.find(item => item.id === 'auto') || null : null
+})
+const isComfyModel = computed(() => activeModel.value?.provider === 'comfy' && !activeAgent.value)
 const imageModelOptions = computed(() => settings.models.filter(m => m.provider === 'comfy'))
 const textModelOptions = computed(() => settings.models.filter(m => m.provider !== 'comfy'))
 const selectedModelValue = computed(() => chat.selectedModelId == null ? '' : String(chat.selectedModelId))
-const activeAgent = computed(() => {
-  return settings.agents.find(agent => agent.id === chat.selectedAgentId) || null
-})
-
-const agentIcons = {
-  route: IconRoute,
-  code: IconCodeDots,
-  pencil: IconPencilBolt,
-  chart: IconChartDots3
-}
 
 const inputPlaceholder = computed(() => {
-  if (isComfyModel.value) return '描述你想要的图片，比如场景、主体、风格、镜头和光线'
+  if (isComfyModel.value) return '描述要生成或处理的图片；可上传原图后说“去水印、换背景、修复照片”'
   if (activeAgent.value?.placeholder) return activeAgent.value.placeholder
   return '给我一段需求，我可以继续对话，也可以帮你联动图片生成'
 })
 
 const modelSupportsImage = computed(() => {
-  if (!activeModel.value) return true
-  if (isComfyModel.value) return false
-  return activeModel.value.support_image !== 0 && activeModel.value.support_image !== false
+  const model = activeAgent.value && activeModel.value?.provider === 'comfy'
+    ? textModelOptions.value.find(item => item.is_default) || textModelOptions.value[0]
+    : activeModel.value
+  if (!model) return false
+  if (isComfyModel.value) return true
+  if (activeAgent.value && imageModelOptions.value.length) return true
+  return model.support_image !== 0 && model.support_image !== false
 })
 
 const canUploadImage = computed(() => !auth.isGuest && features.value.upload_image && perms.value.can_upload_image && modelSupportsImage.value)
@@ -373,13 +288,13 @@ const acceptTypes = computed(() => {
 
 const canSend = computed(() => {
   return (content.value.trim() || pendingAttachments.value.length) &&
-    !sending.value &&
+    !chat.sending &&
     !uploadingFiles.value.length
 })
 
 const capabilityText = computed(() => {
-  if (isComfyModel.value) return '已连接图片生成模型'
-  if (activeAgent.value) return `${activeAgent.value.name}已就绪`
+  if (activeAgent.value) return `${activeAgent.value.name} · 自动选择语言 / 生图模型`
+  if (isComfyModel.value) return '已连接图片生成 / 编辑模型'
   return '已连接语言模型'
 })
 
@@ -418,39 +333,15 @@ function autoResize() {
 }
 
 function handleKeydown(e) {
-  if (e.key === 'Escape' && showAgentPanel.value) {
-    e.preventDefault()
-    showAgentPanel.value = false
-    return
-  }
-
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault()
     handleSend()
   }
 }
 
-function agentIcon(icon) {
-  return agentIcons[icon] || IconRobot
-}
-
-function selectAgent(agent) {
-  chat.setSelectedAgent(agent.id)
-}
-
-function clearAgent() {
-  chat.setSelectedAgent(null)
-  showAgentPanel.value = false
-  textareaRef.value?.focus()
-}
-
-async function applyAgentStarter(starter) {
-  content.value = content.value.trim()
-    ? `${content.value.trim()}\n${starter}`
-    : starter
-  showAgentPanel.value = false
-  await nextTick()
-  autoResize()
+function toggleAgent() {
+  const automaticAgent = settings.agents.find(agent => agent.id === 'auto') || settings.agents[0]
+  chat.setSelectedAgent(activeAgent.value ? null : automaticAgent?.id || null)
   textareaRef.value?.focus()
 }
 
@@ -635,7 +526,6 @@ async function handleModelChange(e) {
 
   try {
     await chat.setSelectedModel(value === '' ? null : Number(value))
-    if (targetModel?.provider === 'comfy') showAgentPanel.value = false
   } catch (err) {
     notification.error(err, { title: '模型切换失败' })
   }
@@ -650,19 +540,22 @@ async function switchToImageMode() {
   if (!target) return
   try {
     await chat.setSelectedModel(Number(target.id))
-    showAgentPanel.value = false
   } catch (err) {
     notification.error(err, { title: '图片模式切换失败' })
   }
 }
 
 function preventImageModeSwitchForAttachments() {
-  if (!pendingAttachments.value.length && !uploadingFiles.value.length) return false
+  if (!uploadingFiles.value.length && pendingAttachments.value.every(att => att?.type === 'image')) {
+    return false
+  }
 
   notification.show({
     type: 'error',
-    title: '请先处理已添加的附件',
-    message: '当前图片仍属于语言模型消息。请先发送给语言模型，或点击缩略图上的 × 移除附件后，再切换到图片生成模式。',
+    title: '图片模式只接受已上传完成的图片',
+    message: uploadingFiles.value.length
+      ? '请等待附件上传完成后再切换图片模式。'
+      : '请先移除文档或视频附件；img2img / inpaint 只接受图片。',
     duration: 6000
   })
   textareaRef.value?.focus()
@@ -724,6 +617,18 @@ async function uploadFile(file) {
     return
   }
 
+  if (isComfyModel.value
+    && isImageFile(file)
+    && pendingAttachments.value.length + uploadingFiles.value.length >= 2) {
+    notification.show({
+      type: 'error',
+      title: '图片数量已达上限',
+      message: '图片处理最多使用一张原图和一张黑白遮罩。',
+      duration: 4500
+    })
+    return
+  }
+
   const id = `up-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
   const controller = new AbortController()
   const entry = { id, name: file.name, progress: 0, controller }
@@ -793,14 +698,23 @@ async function handleSend() {
     return
   }
 
-  if (isComfyModel.value && pendingAttachments.value.length) {
+  if (isComfyModel.value && pendingAttachments.value.some(att => att?.type !== 'image')) {
     notification.show({
       type: 'error',
-      title: '当前不支持图生图',
-      message: '当前 ComfyUI 工作流仅支持文字生成图片。请移除附件并输入图片描述；如需识别图片，请切换到语言模型。',
+      title: '图片处理只接受图片附件',
+      message: '请移除文档或视频；第一张图片作为原图，第二张可作为黑白遮罩。',
+      duration: 6000
+    })
+    return
+  }
+
+  if (isComfyModel.value && pendingAttachments.value.length > 2) {
+    notification.show({
+      type: 'error',
+      title: '图片数量过多',
+      message: '最多上传两张图片：第一张原图，第二张同尺寸黑白遮罩。',
       duration: 6000
     })
-    textareaRef.value?.focus()
     return
   }
 
@@ -815,7 +729,6 @@ async function handleSend() {
     return
   }
 
-  sending.value = true
   const text = content.value.trim()
   const attachments = pendingAttachments.value.map(a => ({
     type: a.type,
@@ -840,9 +753,8 @@ async function handleSend() {
   emit('send', {
     content: text,
     attachments,
-    agentId: isComfyModel.value ? null : activeAgent.value?.id || null
+    agentId: activeAgent.value?.id || null
   })
-  sending.value = false
 }
 </script>
 
@@ -1033,324 +945,6 @@ async function handleSend() {
   transition: border-color 0.18s ease, box-shadow 0.18s ease;
 }
 
-.agent-panel {
-  position: absolute;
-  right: 0;
-  bottom: calc(100% + 10px);
-  left: 0;
-  z-index: 40;
-  max-height: min(58dvh, 430px);
-  padding: 18px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  border: 1px solid #dce3ec;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.98);
-  box-shadow: 0 24px 64px rgba(31, 49, 78, 0.17), 0 2px 8px rgba(31, 49, 78, 0.06);
-  backdrop-filter: blur(16px);
-}
-
-.agent-panel-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 2px 2px 14px;
-}
-
-.agent-eyebrow {
-  display: block;
-  margin-bottom: 5px;
-  color: var(--accent);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-}
-
-.agent-panel-header h3 {
-  color: var(--text-primary);
-  font-size: 18px;
-  font-weight: 680;
-  letter-spacing: -0.025em;
-  line-height: 1.35;
-}
-
-.agent-panel-header p {
-  margin-top: 4px;
-  color: var(--text-muted);
-  font-size: 12px;
-  line-height: 1.55;
-}
-
-.agent-panel-close,
-.active-agent-remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--text-muted);
-  transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
-}
-
-.agent-panel-close {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-}
-
-.agent-panel-close:hover,
-.active-agent-remove:hover {
-  background: #edf1f6;
-  color: var(--text-primary);
-}
-
-.agent-panel-close:active,
-.active-agent-remove:active {
-  transform: scale(0.94);
-}
-
-.agent-options {
-  overflow: hidden;
-  border-top: 1px solid #e8edf3;
-  border-bottom: 1px solid #e8edf3;
-}
-
-.agent-option {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  min-height: 72px;
-  padding: 10px 10px 10px 8px;
-  color: var(--text-primary);
-  text-align: left;
-  transition: background 0.16s ease, transform 0.16s ease;
-}
-
-.agent-option + .agent-option {
-  border-top: 1px solid #edf1f5;
-}
-
-.agent-option::before {
-  position: absolute;
-  top: 13px;
-  bottom: 13px;
-  left: 0;
-  width: 3px;
-  border-radius: 3px;
-  background: var(--accent);
-  content: '';
-  opacity: 0;
-  transform: scaleY(0.55);
-  transition: opacity 0.16s ease, transform 0.18s ease;
-}
-
-.agent-option:hover {
-  background: #f8fafc;
-}
-
-.agent-option:active {
-  transform: scale(0.995);
-}
-
-.agent-option.selected {
-  background: #f2f6fc;
-}
-
-.agent-option.selected::before {
-  opacity: 1;
-  transform: scaleY(1);
-}
-
-.agent-option-icon,
-.active-agent-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  background: #eaf1ff;
-  color: #2d66da;
-}
-
-.agent-option-icon {
-  width: 42px;
-  height: 42px;
-  border-radius: 13px;
-}
-
-.agent-option-icon[data-accent='teal'],
-.active-agent-icon[data-accent='teal'] {
-  background: #e7f5f1;
-  color: #177565;
-}
-
-.agent-option-icon[data-accent='amber'],
-.active-agent-icon[data-accent='amber'] {
-  background: #fff3dd;
-  color: #94600b;
-}
-
-.agent-option-icon[data-accent='slate'],
-.active-agent-icon[data-accent='slate'] {
-  background: #edf0f4;
-  color: #4b5b70;
-}
-
-.agent-option-copy {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.agent-option-heading {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.agent-option-heading strong {
-  margin-right: 3px;
-  font-size: 14px;
-  font-weight: 650;
-}
-
-.agent-option-copy small {
-  margin-top: 5px;
-  overflow: hidden;
-  color: var(--text-muted);
-  font-size: 12px;
-  line-height: 1.4;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.agent-tag {
-  padding: 2px 6px;
-  border: 1px solid #e0e6ee;
-  border-radius: 5px;
-  background: #fff;
-  color: #67758a;
-  font-size: 10px;
-  line-height: 1.4;
-}
-
-.agent-option-check {
-  flex-shrink: 0;
-  color: var(--accent);
-}
-
-.agent-panel-footer {
-  display: flex;
-  align-items: flex-end;
-  gap: 18px;
-  padding: 14px 2px 1px;
-}
-
-.agent-starters {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  gap: 7px;
-  min-width: 0;
-}
-
-.agent-starters > span {
-  width: 100%;
-  color: var(--text-muted);
-  font-size: 10px;
-  font-weight: 650;
-  letter-spacing: 0.05em;
-}
-
-.agent-starters button {
-  max-width: 100%;
-  padding: 6px 9px;
-  overflow: hidden;
-  border: 1px solid #dfe6ef;
-  border-radius: 8px;
-  background: #f8fafc;
-  color: var(--text-secondary);
-  font-size: 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
-}
-
-.agent-starters button:hover {
-  border-color: #c9d7ed;
-  background: #f1f6fd;
-  color: var(--accent);
-}
-
-.agent-disable {
-  flex-shrink: 0;
-  padding: 7px 4px;
-  color: var(--text-muted);
-  font-size: 11px;
-}
-
-.agent-disable:hover {
-  color: var(--danger);
-}
-
-.active-agent-strip {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  min-height: 48px;
-  margin: 9px 10px 0;
-  padding: 6px 7px;
-  border: 1px solid #e1e7ef;
-  border-radius: 12px;
-  background: #f7f9fc;
-}
-
-.active-agent-icon {
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-}
-
-.active-agent-copy {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.active-agent-copy strong {
-  color: var(--text-primary);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.35;
-}
-
-.active-agent-copy small {
-  margin-top: 2px;
-  overflow: hidden;
-  color: var(--text-muted);
-  font-size: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.active-agent-adjust {
-  padding: 5px 7px;
-  color: var(--accent);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.active-agent-remove {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-}
-
 .agent-trigger {
   position: relative;
   display: inline-flex;
@@ -1393,18 +987,6 @@ async function handleSend() {
   box-shadow: 0 0 0 3px rgba(47, 141, 115, 0.1);
 }
 
-.agent-panel-enter-active,
-.agent-panel-leave-active {
-  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
-  transform-origin: center bottom;
-}
-
-.agent-panel-enter-from,
-.agent-panel-leave-to {
-  opacity: 0;
-  transform: translateY(8px) scale(0.985);
-}
-
 .input-wrapper:focus-within {
   border-color: rgba(45, 102, 218, 0.54);
   box-shadow: 0 0 0 3px rgba(45, 102, 218, 0.09), var(--shadow-composer);
@@ -1652,89 +1234,6 @@ async function handleSend() {
     border-radius: 18px;
   }
 
-  .agent-panel {
-    bottom: calc(100% + 8px);
-    max-height: min(57dvh, 460px);
-    padding: 14px;
-    border-radius: 18px;
-  }
-
-  .agent-panel-header {
-    gap: 12px;
-    padding-bottom: 11px;
-  }
-
-  .agent-panel-header h3 {
-    font-size: 16px;
-  }
-
-  .agent-panel-header p {
-    max-width: 270px;
-    font-size: 11px;
-  }
-
-  .agent-option {
-    min-height: 64px;
-    gap: 10px;
-    padding: 8px 7px 8px 6px;
-  }
-
-  .agent-option-icon {
-    width: 38px;
-    height: 38px;
-    border-radius: 11px;
-  }
-
-  .agent-option-copy small {
-    margin-top: 3px;
-    font-size: 11px;
-  }
-
-  .agent-tag {
-    display: none;
-  }
-
-  .agent-panel-footer {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 6px;
-    padding-top: 11px;
-  }
-
-  .agent-starters {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  .agent-starters > span {
-    display: none;
-  }
-
-  .agent-starters button {
-    flex: 0 0 auto;
-    max-width: 86%;
-  }
-
-  .agent-disable {
-    align-self: flex-end;
-  }
-
-  .active-agent-strip {
-    min-height: 44px;
-    margin: 7px 8px 0;
-    padding: 5px 6px;
-  }
-
-  .active-agent-icon {
-    width: 32px;
-    height: 32px;
-  }
-
-  .active-agent-copy small {
-    max-width: 42vw;
-  }
-
   .input-textarea {
     min-height: 66px;
     padding: 14px 12px 8px;
@@ -1841,8 +1340,6 @@ async function handleSend() {
   .mode-tab,
   .model-picker,
   .send-btn,
-  .agent-panel,
-  .agent-option,
   .agent-trigger,
   .upload-progress-fill {
     transition: none;
diff --git a/frontend/src/components/ImageWorkbench.vue b/frontend/src/components/ImageWorkbench.vue
new file mode 100644
index 0000000..d3320de
--- /dev/null
+++ b/frontend/src/components/ImageWorkbench.vue
@@ -0,0 +1,1085 @@
+<template>
+  <div class="workbench" role="dialog" aria-modal="true" aria-label="AI 图片工作台">
+    <aside class="workbench-sidebar" :class="{ 'sidebar-workflow': usesMainWorkflowPanel }">
+      <header class="sidebar-header">
+        <div>
+          <strong>AI 图片工作台</strong>
+          <span>对话与工具共用同一张图片</span>
+        </div>
+        <button type="button" class="icon-button" title="关闭" @click="$emit('close')">
+          <IconX :size="20" />
+        </button>
+      </header>
+
+      <section class="ops-panel" aria-label="操作历史">
+        <strong class="ops-title">操作</strong>
+        <div class="result-strip">
+          <button
+            v-for="(item, index) in history"
+            :key="`${item.url}-${index}`"
+            type="button"
+            :class="{ active: index === historyIndex }"
+            @click="selectHistory(index)"
+          >
+            <img :src="item.url" :alt="item.name || '图片版本'" />
+            <span v-if="historyChip(index)" class="tool-chip">{{ historyChip(index) }}</span>
+          </button>
+        </div>
+      </section>
+
+      <section class="tool-note">
+        <strong>{{ activeTool.label }}</strong>
+        <p>{{ activeTool.help }}</p>
+        <button v-if="activeTool.mask" type="button" class="clear-mask" @click="clearMask">
+          <IconEraser :size="15" /> 清空涂抹
+        </button>
+      </section>
+
+      <section v-if="commandLog.length" class="command-log" aria-label="本次操作记录">
+        <strong>本次操作</strong>
+        <ul>
+          <li v-for="(item, index) in commandLog" :key="`${item.at}-${index}`">
+            <span class="command-tool">{{ item.tool }}</span>
+            <span class="command-text">{{ item.text }}</span>
+          </li>
+        </ul>
+      </section>
+
+      <div v-if="!usesMainWorkflowPanel" class="suggestions">
+        <button v-for="suggestion in activeTool.suggestions" :key="suggestion" type="button" @click="instruction = suggestion">
+          {{ suggestion }}
+        </button>
+      </div>
+
+      <div v-if="activeTool.id === 'outpaint'" class="outpaint-side-note">
+        <span>目标比例 {{ selectedAspect }}</span>
+        <p>原图内容完整保留，AI 会把四周扩展区域无缝补成同一张完整画面，而不是白底贴图。</p>
+      </div>
+
+      <div v-if="!usesMainWorkflowPanel" class="composer">
+        <textarea v-model="instruction" :placeholder="activeTool.placeholder" @keydown.ctrl.enter.prevent="runTool" />
+        <div class="composer-footer">
+          <span>{{ composerHint }}</span>
+          <button type="button" :disabled="busy" @click="runTool">
+            <IconLoader2 v-if="busy" class="spin" :size="18" />
+            <IconArrowUp v-else :size="18" />
+          </button>
+        </div>
+      </div>
+      <p v-if="status" class="status" :class="{ error: errorText }">{{ status }}</p>
+    </aside>
+
+    <main class="workbench-main">
+      <nav class="tool-bar" aria-label="图片处理工具">
+        <button
+          v-for="tool in tools"
+          :key="tool.id"
+          type="button"
+          :class="{ active: tool.id === activeTool.id }"
+          :disabled="busy"
+          @click="chooseTool(tool)"
+        >
+          <component :is="tool.icon" :size="19" :stroke-width="1.8" />
+          <span>{{ tool.label }}</span>
+        </button>
+        <div class="toolbar-spacer" />
+        <button
+          type="button"
+          class="icon-button history-action"
+          title="撤销（Ctrl+Z）"
+          aria-label="撤销"
+          :disabled="!canUndo || busy"
+          @click="undo"
+        >
+          <IconArrowBackUp :size="20" />
+        </button>
+        <button
+          type="button"
+          class="icon-button history-action"
+          title="重做（Ctrl+Shift+Z）"
+          aria-label="重做"
+          :disabled="!canRedo || busy"
+          @click="redo"
+        >
+          <IconArrowForwardUp :size="20" />
+        </button>
+        <a class="icon-button" :href="currentImage.url" :download="currentImage.name || 'ai-image.png'" title="下载图片">
+          <IconDownload :size="20" />
+        </a>
+        <button type="button" class="icon-button" title="关闭" @click="$emit('close')"><IconX :size="21" /></button>
+      </nav>
+
+      <section v-if="activeTool.id === 'replace'" class="workflow-panel replace-panel" aria-label="局部替换设置">
+        <div class="selection-tools" role="toolbar" aria-label="选区工具">
+          <button type="button" :class="{ active: maskMode === 'smart' }" title="智能大选区" :aria-pressed="maskMode === 'smart'" @click="maskMode = 'smart'">
+            <IconPointer :size="20" />
+          </button>
+          <button type="button" :class="{ active: maskMode === 'brush' }" title="画笔涂抹" :aria-pressed="maskMode === 'brush'" @click="maskMode = 'brush'">
+            <IconBrush :size="20" />
+          </button>
+          <button type="button" :class="{ active: maskMode === 'eraser' }" title="擦除选区" :aria-pressed="maskMode === 'eraser'" @click="maskMode = 'eraser'">
+            <IconEraser :size="20" />
+          </button>
+          <i />
+          <label class="background-toggle">
+            <input v-model="recognizeBackground" type="checkbox" />
+            <span>识别背景</span>
+          </label>
+        </div>
+        <div class="workflow-command">
+          <IconSparkles :size="20" />
+          <input v-model="instruction" type="text" placeholder="请涂抹要替换区域，并输入替换的内容" @keydown.enter.prevent="runTool" />
+          <button type="button" aria-label="开始局部替换" :disabled="busy || !hasMaskReactive || !instruction.trim()" @click="runTool">
+            <IconLoader2 v-if="busy" class="spin" :size="19" />
+            <IconArrowUp v-else :size="19" />
+          </button>
+        </div>
+        <p v-if="status" class="panel-status" :class="{ error: errorText }">{{ status }}</p>
+      </section>
+
+      <section v-if="activeTool.id === 'outpaint'" class="workflow-panel outpaint-panel" aria-label="扩图比例设置">
+        <div class="ratio-options">
+          <button
+            v-for="ratio in aspectRatios"
+            :key="ratio.label"
+            type="button"
+            :class="{ active: selectedAspect === ratio.label }"
+            :aria-pressed="selectedAspect === ratio.label"
+            @click="selectedAspect = ratio.label"
+          >
+            <i :style="{ aspectRatio: ratio.value }" />
+            <span>{{ ratio.label }}</span>
+          </button>
+        </div>
+        <i class="panel-divider" />
+        <button type="button" class="primary-workflow-button" :disabled="busy" @click="runTool">
+          <IconLoader2 v-if="busy" class="spin" :size="18" />
+          <span>{{ busy ? '正在扩图' : '立即扩图' }}</span>
+        </button>
+        <p v-if="status" class="panel-status" :class="{ error: errorText }">{{ status }}</p>
+      </section>
+
+      <div class="canvas-shell" :class="{ 'outpaint-mode': activeTool.id === 'outpaint' }" @wheel.prevent="zoomByWheel">
+        <div class="canvas-frame" :class="{ 'outpaint-frame': activeTool.id === 'outpaint' }" :style="outpaintFrameStyle">
+          <div class="canvas-stage" :style="activeTool.id === 'outpaint' ? outpaintStageStyle : stageStyle">
+            <img ref="imageRef" :src="currentImage.url" :alt="currentImage.name || '待处理图片'" @load="syncCanvas" />
+            <canvas
+              v-show="activeTool.mask"
+              ref="maskCanvas"
+              :class="{ drawing: activeTool.mask, erasing: maskMode === 'eraser' }"
+              @pointerdown="startDraw"
+              @pointermove="draw"
+              @pointerup="stopDraw"
+              @pointercancel="stopDraw"
+              @pointerleave="stopDraw"
+            />
+            <div v-if="showProgressOverlay" class="restore-overlay" :class="{ 'outpaint-overlay': activeTool.id === 'outpaint' }">
+              <div class="restore-progress">
+                <IconSparkles :size="20" />
+                <span>{{ progressLabel }} {{ operationProgress }}%...</span>
+                <button type="button" @click.stop="cancelOperation">取消</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <footer class="canvas-footer">
+        <button type="button" @click="zoom = Math.max(0.25, zoom - 0.1)"><IconMinus :size="17" /></button>
+        <span>{{ Math.round(zoom * 100) }}%</span>
+        <button type="button" @click="zoom = Math.min(3, zoom + 0.1)"><IconPlus :size="17" /></button>
+        <i />
+        <button type="button" @click="zoom = 1"><IconMaximize :size="17" /> 适合窗口</button>
+      </footer>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import {
+  IconArrowBackUp, IconArrowForwardUp, IconArrowUp, IconBackground, IconCrop,
+  IconBrush, IconDownload, IconDropletOff, IconEraser, IconFocus2, IconLetterT,
+  IconLoader2, IconMaximize, IconMinus, IconPhotoUp, IconPlus, IconRestore,
+  IconPointer, IconSparkles, IconX
+} from '@tabler/icons-vue'
+import api from '@/api'
+import { useChatStore } from '@/stores/chat'
+
+const props = defineProps({ image: { type: Object, required: true } })
+defineEmits(['close'])
+
+const chat = useChatStore()
+const imageRef = ref(null)
+const maskCanvas = ref(null)
+const currentImage = ref({ ...props.image })
+const history = ref([{ ...props.image }])
+const historyLabels = ref(['原图'])
+const historyIndex = ref(0)
+const zoom = ref(1)
+const instruction = ref('')
+const commandLog = ref([])
+const busy = ref(false)
+const status = ref('')
+const errorText = ref(false)
+const maskMode = ref('brush')
+const recognizeBackground = ref(false)
+const selectedAspect = ref('4:3')
+const operationProgress = ref(0)
+const imageDimensions = ref({ width: 1, height: 1 })
+let drawing = false
+let lastPoint = null
+let hasMask = false
+let currentStroke = null
+let maskStrokes = []
+let redoMaskStrokes = []
+const maskRevision = ref(0)
+let operationController = null
+let progressTimer = null
+let cancelRequested = false
+
+const aspectRatios = [
+  { label: '16:9', value: 16 / 9 },
+  { label: '3:2', value: 3 / 2 },
+  { label: '4:3', value: 4 / 3 },
+  { label: '1:1', value: 1 },
+  { label: '3:4', value: 3 / 4 },
+  { label: '2:3', value: 2 / 3 },
+  { label: '9:16', value: 9 / 16 }
+]
+
+const tools = [
+  { id: 'enhance', label: '变清晰', icon: markRaw(IconSparkles), mask: false, help: '提升分辨率、纹理和边缘细节，尽量保持原图不变。', placeholder: '可补充：人物脸部保持不变、去除噪点…', suggestions: ['高清修复，保持构图不变', '增强细节并去除噪点'] },
+  { id: 'erase', label: '消除', icon: markRaw(IconEraser), mask: true, help: '在图片上涂抹要删除的对象，AI 会补全后面的内容。', placeholder: '例如：移除涂抹区域的人物并自然修复该区域', suggestions: ['移除涂抹区域并自然修复该区域', '去掉涂抹区域的水印'] },
+  { id: 'watermark', label: '去水印', icon: markRaw(IconDropletOff), mask: true, help: '可涂抹水印位置精确去除；不涂抹时会自动处理常见角落水印。', placeholder: '可补充：只去右下角水印，保留标题和人物不变', suggestions: ['去掉右下角水印并自然修复该区域', '只清除涂抹区域内的水印'] },
+  { id: 'cutout', label: '抠图', icon: markRaw(IconBackground), mask: false, help: '识别主要对象并生成干净的透明背景素材。', placeholder: '例如：保留人物和头发细节，背景透明', suggestions: ['抠出主要人物，保留发丝细节', '提取商品主体，背景透明'] },
+  { id: 'outpaint', label: '扩图', icon: markRaw(IconCrop), mask: false, help: '扩展画面内容，可在要求中指定横版、竖版或比例。', placeholder: '例如：扩展为 16:9 横图，主体保持居中', suggestions: ['扩展为 16:9 横图', '向左右扩展画面并自然补全'] },
+  { id: 'replace', label: '局部替换', icon: markRaw(IconFocus2), mask: true, help: '涂抹要修改的区域，并描述替换后的内容。', placeholder: '例如：把涂抹区域的衣服替换成红色夹克', suggestions: ['把涂抹区域替换成自然匹配的新内容', '只修改涂抹区域，其他地方完全不变'] },
+  { id: 'text', label: '添加文字', icon: markRaw(IconLetterT), mask: true, help: '涂抹文字放置区域，文字由浏览器精确排版，不再交给图片模型猜字。', placeholder: '例如：添加“夏日旅行”，白色粗体；或删除原文字', suggestions: ['添加“夏日旅行”，白色粗体', '替换为“新品上市”，红色粗体', '删除涂抹区域的文字'] },
+  { id: 'restore', label: '图片修复', icon: markRaw(IconRestore), mask: true, help: '修复破损、划痕、缺失和压缩瑕疵。可涂抹局部，也可不涂抹整图修复。', placeholder: '例如：修复旧照片划痕并恢复人物面部细节', suggestions: ['修复划痕和破损，保持原始质感', '修复人物面部和模糊细节'] },
+  { id: 'creative', label: '更多', icon: markRaw(IconPhotoUp), mask: false, help: '用自然语言描述任何图片改动。', placeholder: '直接描述你想看到的最终画面', suggestions: ['生成卡通手绘版本', '改成适合游戏使用的素材'] }
+]
+const activeTool = ref(tools[0])
+const stageStyle = computed(() => ({ transform: `scale(${zoom.value})` }))
+const usesMainWorkflowPanel = computed(() => ['replace', 'outpaint'].includes(activeTool.value.id))
+const hasMaskReactive = computed(() => {
+  maskRevision.value
+  return hasMask
+})
+const selectedAspectRatio = computed(() => aspectRatios.find(item => item.label === selectedAspect.value)?.value || 4 / 3)
+const sourceAspectRatio = computed(() => Math.max(
+  0.2,
+  Math.min(5, (imageDimensions.value.width || 1) / (imageDimensions.value.height || 1))
+))
+const outpaintFrameStyle = computed(() => ({
+  '--outpaint-ratio': selectedAspectRatio.value,
+  '--source-ratio': sourceAspectRatio.value
+}))
+const outpaintStageStyle = computed(() => {
+  const sourceRatio = sourceAspectRatio.value
+  const targetRatio = selectedAspectRatio.value
+  const base = { ...stageStyle.value, aspectRatio: sourceRatio }
+  // Fill the limiting side so empty expansion areas stay visible like Baidu.
+  if (sourceRatio >= targetRatio) {
+    return { ...base, width: '100%', height: 'auto', maxWidth: '100%', maxHeight: '100%' }
+  }
+  return { ...base, height: '100%', width: 'auto', maxWidth: '100%', maxHeight: '100%' }
+})
+
+watch(selectedAspect, value => {
+  if (activeTool.value.id === 'outpaint' && !busy.value) {
+    status.value = `选择目标比例后点击「立即扩图」，将扩展为 ${value}`
+    errorText.value = false
+  }
+})
+
+function historyChip(index) {
+  if (index === historyIndex.value && (busy.value || activeTool.value.id === 'outpaint')) {
+    return activeTool.value.label
+  }
+  return historyLabels.value[index] || ''
+}
+const showProgressOverlay = computed(() => busy.value && ['restore', 'outpaint', 'enhance'].includes(activeTool.value.id))
+const progressLabel = computed(() => {
+  if (activeTool.value.id === 'outpaint') return '正在扩图'
+  if (activeTool.value.id === 'enhance') return '正在变清晰'
+  return '正在将图片变高清'
+})
+const composerHint = computed(() => {
+  if (activeTool.value.id === 'watermark') return '可直接自动识别，也可涂抹精确定位'
+  if (activeTool.value.id === 'restore') return hasMaskReactive.value ? '仅修复白色涂抹区域' : '未涂抹时将修复整张图片'
+  return activeTool.value.mask ? '白色涂抹区域会被修改' : '将处理整张图片'
+})
+const canUndo = computed(() => {
+  maskRevision.value
+  return (activeTool.value.mask && maskStrokes.length > 0) || historyIndex.value > 0
+})
+const canRedo = computed(() => {
+  maskRevision.value
+  return (activeTool.value.mask && redoMaskStrokes.length > 0) || historyIndex.value < history.value.length - 1
+})
+
+watch(() => props.image, image => {
+  currentImage.value = { ...image }
+  history.value = [{ ...image }]
+  historyLabels.value = ['原图']
+  historyIndex.value = 0
+  commandLog.value = []
+  clearMask()
+})
+
+onMounted(() => window.addEventListener('keydown', handleHistoryShortcut))
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleHistoryShortcut)
+  if (progressTimer) clearInterval(progressTimer)
+  operationController?.abort()
+})
+
+function chooseTool(tool) {
+  if (busy.value) return
+  activeTool.value = tool
+  instruction.value = ''
+  maskMode.value = 'brush'
+  recognizeBackground.value = false
+  status.value = tool.id === 'watermark'
+    ? '可直接执行自动去水印，也可先涂抹水印位置'
+    : (tool.id === 'outpaint'
+        ? `选择目标比例后点击「立即扩图」，将扩展为 ${selectedAspect.value}`
+        : (tool.id === 'restore'
+            ? '可直接修复整张图片，也可先涂抹定位破损区域'
+            : (tool.mask ? '请先在图片上涂抹要处理的区域' : '')))
+  errorText.value = false
+  nextTick(() => {
+    syncCanvas()
+    clearMask()
+  })
+}
+
+function syncCanvas() {
+  const image = imageRef.value
+  const canvas = maskCanvas.value
+  if (!image || !canvas || !image.naturalWidth) return
+  canvas.width = image.naturalWidth
+  canvas.height = image.naturalHeight
+  imageDimensions.value = { width: image.naturalWidth, height: image.naturalHeight }
+  canvas.style.width = `${image.clientWidth}px`
+  canvas.style.height = `${image.clientHeight}px`
+  clearMask()
+}
+
+function canvasPoint(event) {
+  const canvas = maskCanvas.value
+  const rect = canvas.getBoundingClientRect()
+  return { x: (event.clientX - rect.left) * canvas.width / rect.width, y: (event.clientY - rect.top) * canvas.height / rect.height }
+}
+
+function startDraw(event) {
+  if (!activeTool.value.mask) return
+  drawing = true
+  lastPoint = canvasPoint(event)
+  currentStroke = { mode: maskMode.value, points: [lastPoint] }
+  event.currentTarget.setPointerCapture(event.pointerId)
+  paintSegment(lastPoint, lastPoint, currentStroke.mode)
+  if (currentStroke.mode !== 'eraser') hasMask = true
+  maskRevision.value++
+}
+
+function draw(event) {
+  if (!drawing) return
+  const point = canvasPoint(event)
+  paintSegment(lastPoint, point, currentStroke.mode)
+  currentStroke.points.push(point)
+  lastPoint = point
+  if (currentStroke.mode !== 'eraser') hasMask = true
+}
+
+function paintSegment(from, to, mode = 'brush') {
+  const canvas = maskCanvas.value
+  if (!canvas || !from || !to) return
+  const ctx = canvas.getContext('2d')
+  ctx.save()
+  ctx.globalCompositeOperation = mode === 'eraser' ? 'destination-out' : 'source-over'
+  ctx.strokeStyle = mode === 'eraser'
+    ? 'rgba(0, 0, 0, 1)'
+    : (activeTool.value.id === 'replace' ? 'rgba(105, 74, 194, .68)' : 'rgba(255, 75, 92, .76)')
+  ctx.lineWidth = mode === 'smart'
+    ? Math.max(34, canvas.width * 0.065)
+    : Math.max(18, canvas.width * 0.035)
+  ctx.lineCap = 'round'
+  ctx.lineJoin = 'round'
+  ctx.beginPath()
+  ctx.moveTo(from.x, from.y)
+  ctx.lineTo(to.x, to.y)
+  ctx.stroke()
+  ctx.restore()
+}
+
+function stopDraw() {
+  if (drawing && currentStroke?.points?.length) {
+    maskStrokes.push(currentStroke)
+    redoMaskStrokes = []
+  }
+  drawing = false
+  lastPoint = null
+  currentStroke = null
+  refreshMaskPresence()
+}
+
+function redrawMask() {
+  const canvas = maskCanvas.value
+  if (!canvas) return
+  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
+  for (const stroke of maskStrokes) {
+    if (!stroke?.points?.length) continue
+    paintSegment(stroke.points[0], stroke.points[0], stroke.mode)
+    for (let index = 1; index < stroke.points.length; index++) {
+      paintSegment(stroke.points[index - 1], stroke.points[index], stroke.mode)
+    }
+  }
+  refreshMaskPresence()
+}
+
+function refreshMaskPresence() {
+  const canvas = maskCanvas.value
+  if (!canvas?.width || !canvas?.height) {
+    hasMask = false
+    maskRevision.value++
+    return
+  }
+  const alpha = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data
+  hasMask = false
+  for (let index = 3; index < alpha.length; index += 16) {
+    if (alpha[index] > 0) {
+      hasMask = true
+      break
+    }
+  }
+  maskRevision.value++
+}
+
+function clearMask() {
+  const canvas = maskCanvas.value
+  if (canvas) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
+  maskStrokes = []
+  redoMaskStrokes = []
+  currentStroke = null
+  drawing = false
+  lastPoint = null
+  hasMask = false
+  maskRevision.value++
+}
+
+function undo() {
+  if (busy.value) return
+  if (activeTool.value.mask && maskStrokes.length) {
+    redoMaskStrokes.push(maskStrokes.pop())
+    redrawMask()
+    status.value = maskStrokes.length ? '已撤销上一笔涂抹' : '已撤销涂抹'
+    errorText.value = false
+    return
+  }
+  if (historyIndex.value > 0) selectHistory(historyIndex.value - 1)
+}
+
+function redo() {
+  if (busy.value) return
+  if (activeTool.value.mask && redoMaskStrokes.length) {
+    maskStrokes.push(redoMaskStrokes.pop())
+    redrawMask()
+    status.value = '已恢复涂抹'
+    errorText.value = false
+    return
+  }
+  if (historyIndex.value < history.value.length - 1) selectHistory(historyIndex.value + 1)
+}
+
+function handleHistoryShortcut(event) {
+  if (!(event.ctrlKey || event.metaKey)) return
+  if (['INPUT', 'TEXTAREA'].includes(event.target?.tagName)) return
+  const key = event.key.toLowerCase()
+  if (key === 'z' && !event.shiftKey) {
+    event.preventDefault()
+    undo()
+  } else if ((key === 'z' && event.shiftKey) || key === 'y') {
+    event.preventDefault()
+    redo()
+  }
+}
+
+async function uploadMask() {
+  const source = maskCanvas.value
+  if (!source?.width || !source?.height) throw new Error('蒙版画布尚未准备完成')
+  const sourcePixels = source.getContext('2d').getImageData(0, 0, source.width, source.height)
+  const output = document.createElement('canvas')
+  output.width = source.width
+  output.height = source.height
+  const ctx = output.getContext('2d')
+  const pixels = ctx.createImageData(output.width, output.height)
+  for (let i = 0; i < pixels.data.length; i += 4) {
+    const selected = sourcePixels.data[i + 3] > 0
+    pixels.data[i] = pixels.data[i + 1] = pixels.data[i + 2] = selected ? 255 : 0
+    pixels.data[i + 3] = 255
+  }
+  ctx.putImageData(pixels, 0, 0)
+  return uploadCanvas(output, 'selection-mask.png')
+}
+
+async function uploadCanvas(canvas, filename) {
+  const blob = await new Promise((resolve, reject) => {
+    canvas.toBlob(value => value ? resolve(value) : reject(new Error('图片画布导出失败')), 'image/png')
+  })
+  const form = new FormData()
+  form.append('file', blob, filename)
+  const response = await api.post('/upload', form, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 120000 })
+  return response.data.data
+}
+
+function roundToEight(value) {
+  return Math.max(8, Math.round(value / 8) * 8)
+}
+
+function requestedAspectRatio() {
+  if (activeTool.value.id === 'outpaint') return selectedAspectRatio.value
+  const match = instruction.value.match(/(\d+(?:\.\d+)?)\s*[:：/]\s*(\d+(?:\.\d+)?)/)
+  if (!match) return 16 / 9
+  const width = Number(match[1])
+  const height = Number(match[2])
+  return width > 0 && height > 0 ? Math.min(4, Math.max(0.25, width / height)) : 16 / 9
+}
+
+function fillOutpaintCanvasForGeneration(ctx, image, offsetX, offsetY, drawnWidth, drawnHeight, targetWidth, targetHeight) {
+  // Never mirror or stretch source pixels into the generation area. The server
+  // uses comfyui-inpaint-nodes (Navier-Stokes fill + masked blur) to create a
+  // low-frequency colour guide before the Fooocus inpaint sampler generates
+  // genuinely new content.
+  ctx.fillStyle = '#808080'
+  ctx.fillRect(0, 0, targetWidth, targetHeight)
+  ctx.drawImage(image, offsetX, offsetY, drawnWidth, drawnHeight)
+}
+
+function clampUnit(value) {
+  return Math.min(1, Math.max(0, value))
+}
+
+function analyzeOutpaintEdgeComplexity(image) {
+  const maxSampleSide = 256
+  const scale = Math.min(1, maxSampleSide / Math.max(image.naturalWidth, image.naturalHeight))
+  const width = Math.max(8, Math.round(image.naturalWidth * scale))
+  const height = Math.max(8, Math.round(image.naturalHeight * scale))
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  ctx.drawImage(image, 0, 0, width, height)
+  const data = ctx.getImageData(0, 0, width, height).data
+
+  const luminanceAt = (x, y) => {
+    const index = (y * width + x) * 4
+    return data[index] * 0.2126 + data[index + 1] * 0.7152 + data[index + 2] * 0.0722
+  }
+  const scoreSide = (side) => {
+    const vertical = side === 'left' || side === 'right'
+    const depth = Math.max(4, Math.round((vertical ? width : height) * 0.14))
+    const startX = side === 'right' ? width - depth : 0
+    const endX = side === 'left' ? depth : width
+    const startY = side === 'bottom' ? height - depth : 0
+    const endY = side === 'top' ? depth : height
+    let count = 0
+    let luminanceSum = 0
+    let luminanceSquaredSum = 0
+    let gradientSum = 0
+    let chromaSum = 0
+
+    for (let y = startY; y < endY; y++) {
+      for (let x = startX; x < endX; x++) {
+        const index = (y * width + x) * 4
+        const luminance = luminanceAt(x, y)
+        const inwardX = side === 'left' ? Math.min(width - 1, x + 1)
+          : (side === 'right' ? Math.max(0, x - 1) : x)
+        const inwardY = side === 'top' ? Math.min(height - 1, y + 1)
+          : (side === 'bottom' ? Math.max(0, y - 1) : y)
+        const tangentX = vertical ? x : Math.min(width - 1, x + 1)
+        const tangentY = vertical ? Math.min(height - 1, y + 1) : y
+        const inwardGradient = Math.abs(luminance - luminanceAt(inwardX, inwardY))
+        const tangentGradient = Math.abs(luminance - luminanceAt(tangentX, tangentY))
+        const red = data[index]
+        const green = data[index + 1]
+        const blue = data[index + 2]
+
+        count++
+        luminanceSum += luminance
+        luminanceSquaredSum += luminance * luminance
+        gradientSum += (inwardGradient + tangentGradient) * 0.5
+        chromaSum += Math.max(red, green, blue) - Math.min(red, green, blue)
+      }
+    }
+
+    const mean = luminanceSum / Math.max(1, count)
+    const variance = Math.max(0, luminanceSquaredSum / Math.max(1, count) - mean * mean)
+    const contrast = clampUnit(Math.sqrt(variance) / 58)
+    const detail = clampUnit((gradientSum / Math.max(1, count)) / 34)
+    const chroma = clampUnit((chromaSum / Math.max(1, count)) / 105)
+    return clampUnit(contrast * 0.52 + detail * 0.38 + chroma * 0.10)
+  }
+
+  return {
+    left: scoreSide('left'),
+    right: scoreSide('right'),
+    top: scoreSide('top'),
+    bottom: scoreSide('bottom')
+  }
+}
+
+function calculateAdaptiveOutpaintFeathers(image, drawnWidth, drawnHeight, paddings) {
+  const complexity = analyzeOutpaintEdgeComplexity(image)
+  const minDimension = Math.min(drawnWidth, drawnHeight)
+  const sizeFor = (side, padding, axisLength) => {
+    if (padding <= 0) return 0
+    const minimum = Math.max(32, Math.min(80, minDimension * 0.065))
+    const textureWidth = minDimension * (0.072 + complexity[side] * 0.13)
+    const paddingWidth = padding * (0.42 + complexity[side] * 0.20)
+    const maximum = Math.max(32, Math.min(
+      axisLength * 0.24,
+      minDimension * 0.24,
+      Math.max(32, padding * 1.4)
+    ))
+    return Math.round(Math.min(maximum, Math.max(minimum, textureWidth, paddingWidth)))
+  }
+
+  return {
+    left: sizeFor('left', paddings.left, drawnWidth),
+    right: sizeFor('right', paddings.right, drawnWidth),
+    top: sizeFor('top', paddings.top, drawnHeight),
+    bottom: sizeFor('bottom', paddings.bottom, drawnHeight)
+  }
+}
+
+function buildSoftOutpaintMask(targetWidth, targetHeight, offsetX, offsetY, drawnWidth, drawnHeight, feathers) {
+  const soft = document.createElement('canvas')
+  soft.width = targetWidth
+  soft.height = targetHeight
+  const softCtx = soft.getContext('2d')
+  const pixels = softCtx.createImageData(targetWidth, targetHeight)
+  const paddingLeft = Math.max(0, offsetX)
+  const paddingTop = Math.max(0, offsetY)
+  const paddingRight = Math.max(0, targetWidth - offsetX - drawnWidth)
+  const paddingBottom = Math.max(0, targetHeight - offsetY - drawnHeight)
+  const innerLeft = offsetX
+  const innerTop = offsetY
+  const innerRight = offsetX + drawnWidth
+  const innerBottom = offsetY + drawnHeight
+
+  // Build a true one-way feather instead of blurring a hard rectangle and then
+  // clipping it at the source edge. The clipped blur jumped from 255 outside to
+  // roughly 128 on the first source pixel, which exposed a vertical colour seam
+  // (most visibly where mountains or other high-contrast forms meet the bottom).
+  // This distance field is 255 on both sides of the source boundary and eases to
+  // zero only as it moves inward, so final compositing is continuous and never
+  // mixes generated pixels with the neutral padded canvas.
+  for (let y = 0; y < targetHeight; y++) {
+    const insideY = y >= innerTop && y < innerBottom
+    for (let x = 0; x < targetWidth; x++) {
+      const i = (y * targetWidth + x) * 4
+      const insideImage = insideY && x >= innerLeft && x < innerRight
+      let value = 255
+      if (insideImage) {
+        let normalizedDistance = Number.POSITIVE_INFINITY
+        if (paddingLeft > 0) normalizedDistance = Math.min(normalizedDistance, (x - innerLeft) / feathers.left)
+        if (paddingRight > 0) normalizedDistance = Math.min(normalizedDistance, (innerRight - 1 - x) / feathers.right)
+        if (paddingTop > 0) normalizedDistance = Math.min(normalizedDistance, (y - innerTop) / feathers.top)
+        if (paddingBottom > 0) normalizedDistance = Math.min(normalizedDistance, (innerBottom - 1 - y) / feathers.bottom)
+
+        if (!Number.isFinite(normalizedDistance)) {
+          value = 0
+        } else {
+          const progress = clampUnit(normalizedDistance)
+          const smoothStep = progress * progress * (3 - 2 * progress)
+          value = Math.round(255 * (1 - smoothStep))
+        }
+      }
+      pixels.data[i] = pixels.data[i + 1] = pixels.data[i + 2] = value
+      pixels.data[i + 3] = 255
+    }
+  }
+  softCtx.putImageData(pixels, 0, 0)
+  return soft
+}
+
+async function prepareOutpaintAttachments() {
+  const image = imageRef.value
+  if (!image?.naturalWidth || !image?.naturalHeight) throw new Error('原图尚未加载完成')
+
+  const ratio = requestedAspectRatio()
+  const sourceWidth = image.naturalWidth
+  const sourceHeight = image.naturalHeight
+  let targetWidth = sourceWidth
+  let targetHeight = sourceHeight
+  if (sourceWidth / sourceHeight < ratio) targetWidth = sourceHeight * ratio
+  else targetHeight = sourceWidth / ratio
+
+  const maxSide = 1536
+  const scale = Math.min(1, maxSide / Math.max(targetWidth, targetHeight))
+  const drawnWidth = roundToEight(sourceWidth * scale)
+  const drawnHeight = roundToEight(sourceHeight * scale)
+  targetWidth = roundToEight(Math.max(drawnWidth, drawnHeight * ratio))
+  targetHeight = roundToEight(Math.max(drawnHeight, drawnWidth / ratio))
+  const offsetX = Math.floor((targetWidth - drawnWidth) / 2)
+  const offsetY = Math.floor((targetHeight - drawnHeight) / 2)
+  const paddings = {
+    left: Math.max(0, offsetX),
+    top: Math.max(0, offsetY),
+    right: Math.max(0, targetWidth - offsetX - drawnWidth),
+    bottom: Math.max(0, targetHeight - offsetY - drawnHeight)
+  }
+  const feathers = calculateAdaptiveOutpaintFeathers(
+    image,
+    drawnWidth,
+    drawnHeight,
+    paddings
+  )
+
+  const sourceCanvas = document.createElement('canvas')
+  sourceCanvas.width = targetWidth
+  sourceCanvas.height = targetHeight
+  const sourceContext = sourceCanvas.getContext('2d')
+  fillOutpaintCanvasForGeneration(
+    sourceContext,
+    image,
+    offsetX,
+    offsetY,
+    drawnWidth,
+    drawnHeight,
+    targetWidth,
+    targetHeight
+  )
+
+  const maskCanvasOutput = buildSoftOutpaintMask(
+    targetWidth,
+    targetHeight,
+    offsetX,
+    offsetY,
+    drawnWidth,
+    drawnHeight,
+    feathers
+  )
+
+  const sideLabels = { left: '左', right: '右', top: '上', bottom: '下' }
+  const activeFeathers = Object.entries(feathers)
+    .filter(([, value]) => value > 0)
+    .map(([side, value]) => `${sideLabels[side]} ${value}px`)
+    .join('、')
+  status.value = `正在准备扩图，自适应融合：${activeFeathers}`
+  const [expandedSource, expandedMask] = await Promise.all([
+    uploadCanvas(sourceCanvas, 'outpaint-source.png'),
+    uploadCanvas(maskCanvasOutput, 'outpaint-mask.png')
+  ])
+  return [expandedSource, expandedMask]
+}
+
+function defaultPrompt() {
+  const map = {
+    enhance: '高清修复当前图片，提升清晰度、纹理与边缘细节，保持主体、构图和颜色不变。',
+    erase: '移除白色蒙版区域中的对象，并用周围自然连续的内容修复该区域，只修改蒙版区域。',
+    watermark: '去除图片中的水印并自然修复该区域纹理，只修改水印区域，保留人物、标题和其他内容。',
+    cutout: '抠出图片中的主要主体，完整保留轮廓、发丝和半透明边缘，输出透明背景素材。',
+    outpaint: 'OUTPAINT_FULL_BLEED: Generate genuinely new visual content beyond the original image edges. Continue the adjacent scene, lighting, perspective, depth, textures, colors, objects, and atmosphere seamlessly. Preserve the entire original center exactly. Do not mirror, flip, tile, copy, duplicate, stretch, or repeat any person, text, logo, object, or source-image region. The source is the scene itself, never a framed picture, poster, card, screen, or mockup.',
+    replace: '局部重绘白色蒙版区域，只修改蒙版内内容，蒙版外完全保持不变。',
+    text: '修改白色蒙版区域中的文字或排版，保持图片其余部分完全不变。',
+    restore: '修复图片破损、划痕、模糊和缺失细节，保持人物身份、构图和年代质感。',
+    creative: '根据要求修改当前图片，保持未提及区域不变。'
+  }
+  return map[activeTool.value.id]
+}
+
+function parseTextInstruction(value) {
+  const raw = value.trim()
+  const deleteOnly = /(?:删除|去掉|去除|清除|不要)(?:涂抹区域(?:内|的)?|选区(?:内|的)?|原有|原来)?(?:的)?文字/.test(raw)
+  const quoted = raw.match(/[“"]([^”"]+)[”"]/) || raw.match(/'([^']+)'/)
+  let text = quoted?.[1]?.trim() || raw
+
+  if (deleteOnly && !quoted) return { text: '', eraseBackground: true }
+
+  text = text
+    .replace(/^(?:请)?(?:在(?:涂抹区域|选区|图片上)?(?:里|内|中)?\s*)?(?:添加|增加|加上|写上|写入|替换为|替换成|改成|改为)\s*/u, '')
+    .replace(/[，,。；;]\s*(?:使用|保持|字体|颜色|字号|白色|黑色|红色|蓝色|绿色|黄色|粗体|细体).*$/u, '')
+    .trim()
+
+  if (!text || /^(?:文字|文本|替换文字|添加文字)$/u.test(text)) {
+    throw new Error('请输入要添加的准确文字，例如：添加“夏日旅行”，白色粗体')
+  }
+  return { text, eraseBackground: /替换|改成|改为|覆盖|原文字|原有文字/u.test(raw) }
+}
+
+function getMaskBounds() {
+  const canvas = maskCanvas.value
+  if (!canvas?.width || !canvas?.height) throw new Error('涂抹选区尚未准备完成')
+  const pixels = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data
+  let minX = canvas.width
+  let minY = canvas.height
+  let maxX = -1
+  let maxY = -1
+  for (let y = 0; y < canvas.height; y++) {
+    for (let x = 0; x < canvas.width; x++) {
+      if (pixels[(y * canvas.width + x) * 4 + 3] === 0) continue
+      minX = Math.min(minX, x)
+      minY = Math.min(minY, y)
+      maxX = Math.max(maxX, x)
+      maxY = Math.max(maxY, y)
+    }
+  }
+  if (maxX < minX || maxY < minY) throw new Error('请先涂抹文字放置区域')
+  return { x: minX, y: minY, width: maxX - minX + 1, height: maxY - minY + 1 }
+}
+
+function requestedTextColor(value) {
+  const colors = [
+    [/黑色|黑字/u, '#111827'], [/红色|红字/u, '#dc2626'], [/蓝色|蓝字/u, '#2563eb'],
+    [/绿色|绿字/u, '#16a34a'], [/黄色|黄字/u, '#facc15'], [/橙色|橙字/u, '#f97316'],
+    [/紫色|紫字/u, '#7c3aed'], [/白色|白字/u, '#ffffff']
+  ]
+  return colors.find(([pattern]) => pattern.test(value))?.[1] || '#ffffff'
+}
+
+function wrapText(ctx, text, maxWidth) {
+  const output = []
+  for (const paragraph of text.split(/\r?\n/)) {
+    let line = ''
+    for (const character of Array.from(paragraph)) {
+      const candidate = line + character
+      if (line && ctx.measureText(candidate).width > maxWidth) {
+        output.push(line)
+        line = character
+      } else {
+        line = candidate
+      }
+    }
+    output.push(line || ' ')
+  }
+  return output
+}
+
+function drawExactText(ctx, text, bounds, styleText) {
+  const maxWidth = Math.max(20, bounds.width * 0.9)
+  const maxHeight = Math.max(20, bounds.height * 0.86)
+  const weight = /细体|常规|普通/u.test(styleText) ? 400 : 700
+  const family = '"Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif'
+  let size = Math.max(10, Math.min(220, Math.round(maxHeight * 0.72)))
+  let lines = []
+  for (; size >= 10; size--) {
+    ctx.font = `${weight} ${size}px ${family}`
+    lines = wrapText(ctx, text, maxWidth)
+    if (lines.length * size * 1.2 <= maxHeight) break
+  }
+
+  const color = requestedTextColor(styleText)
+  const darkText = ['#111827', '#2563eb', '#7c3aed', '#dc2626'].includes(color)
+  ctx.font = `${weight} ${size}px ${family}`
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.lineJoin = 'round'
+  ctx.fillStyle = color
+  ctx.strokeStyle = darkText ? 'rgba(255,255,255,.88)' : 'rgba(17,24,39,.72)'
+  ctx.lineWidth = Math.max(2, size * 0.07)
+  const lineHeight = size * 1.2
+  const firstY = bounds.y + bounds.height / 2 - (lines.length - 1) * lineHeight / 2
+  lines.forEach((line, index) => {
+    const x = bounds.x + bounds.width / 2
+    const y = firstY + index * lineHeight
+    if (!/无描边/u.test(styleText)) ctx.strokeText(line, x, y, maxWidth)
+    ctx.fillText(line, x, y, maxWidth)
+  })
+}
+
+async function renderTextLocally() {
+  const image = imageRef.value
+  if (!image?.naturalWidth || !image?.naturalHeight) throw new Error('原图尚未加载完成')
+  const parsed = parseTextInstruction(instruction.value)
+  const bounds = getMaskBounds()
+  const output = document.createElement('canvas')
+  output.width = image.naturalWidth
+  output.height = image.naturalHeight
+  const ctx = output.getContext('2d')
+  ctx.drawImage(image, 0, 0, output.width, output.height)
+
+  if (parsed.eraseBackground) {
+    const blurred = document.createElement('canvas')
+    blurred.width = output.width
+    blurred.height = output.height
+    const blurredContext = blurred.getContext('2d')
+    blurredContext.filter = `blur(${Math.max(8, Math.round(Math.min(output.width, output.height) * 0.012))}px)`
+    blurredContext.drawImage(image, 0, 0, output.width, output.height)
+    blurredContext.filter = 'none'
+    blurredContext.globalCompositeOperation = 'destination-in'
+    blurredContext.drawImage(maskCanvas.value, 0, 0, output.width, output.height)
+    ctx.drawImage(blurred, 0, 0)
+  }
+
+  if (parsed.text) drawExactText(ctx, parsed.text, bounds, instruction.value)
+  return { canvas: output, text: parsed.text }
+}
+
+function commitHistory(image, label = activeTool.value.label) {
+  history.value = history.value.slice(0, historyIndex.value + 1)
+  historyLabels.value = historyLabels.value.slice(0, historyIndex.value + 1)
+  history.value.push({ ...image })
+  historyLabels.value.push(label)
+  historyIndex.value = history.value.length - 1
+  currentImage.value = { ...image }
+}
+
+function startOperationProgress() {
+  if (progressTimer) clearInterval(progressTimer)
+  operationProgress.value = 4
+  progressTimer = setInterval(() => {
+    operationProgress.value = Math.min(94, operationProgress.value + Math.max(1, Math.round((96 - operationProgress.value) * 0.07)))
+  }, 900)
+}
+
+function stopOperationProgress() {
+  if (progressTimer) clearInterval(progressTimer)
+  progressTimer = null
+}
+
+function cancelOperation() {
+  if (!busy.value || !operationController) return
+  cancelRequested = true
+  status.value = '正在取消本次处理…'
+  operationController.abort()
+}
+
+async function runTool() {
+  if (busy.value) return
+  if (activeTool.value.mask && !hasMask && !['restore', 'watermark'].includes(activeTool.value.id)) {
+    status.value = '请先在右侧图片上涂抹要处理的区域'
+    errorText.value = true
+    return
+  }
+  if (activeTool.value.id === 'replace' && !instruction.value.trim()) {
+    status.value = '请输入涂抹区域要替换成的内容'
+    errorText.value = true
+    return
+  }
+  busy.value = true
+  cancelRequested = false
+  operationController = new AbortController()
+  if (['restore', 'outpaint', 'enhance'].includes(activeTool.value.id)) startOperationProgress()
+  errorText.value = false
+  status.value = activeTool.value.id === 'outpaint' ? '正在准备扩图…' : '正在提交图片处理任务…'
+  try {
+    const previousUrls = new Set(chat.messages.flatMap(m => (m.attachments || []).map(a => a?.url).filter(Boolean)))
+    if (activeTool.value.id === 'text') {
+      status.value = '正在精确排版文字…'
+      const rendered = await renderTextLocally()
+      const uploaded = await uploadCanvas(rendered.canvas, 'text-edited.png')
+      const action = rendered.text ? `已添加准确文字“${rendered.text}”` : '已删除选区文字'
+      commandLog.value = [...commandLog.value, { tool: activeTool.value.label, text: instruction.value.trim() || action, at: Date.now() }].slice(-12)
+      await chat.sendMessage(action, [{ ...uploaded, type: 'image', hidden: true }], null, { imageTool: 'commit', signal: operationController.signal })
+      const result = findNewImage(previousUrls)
+      if (!result) throw new Error('文字图片已生成，但保存到会话失败')
+      commitHistory(result)
+      clearMask()
+      status.value = '文字处理完成，可撤销或继续修改'
+      return
+    }
+
+    let attachments = [{ ...currentImage.value, type: 'image' }]
+    if (activeTool.value.id === 'outpaint') {
+      attachments = await prepareOutpaintAttachments()
+    } else if (activeTool.value.mask && hasMask) {
+      status.value = '正在上传涂抹选区…'
+      attachments.push(await uploadMask())
+    }
+    // Never treat uploaded source/mask canvases as finished AI results.
+    attachments.forEach(item => {
+      if (item?.url) previousUrls.add(item.url)
+    })
+    let extraInstruction = instruction.value.trim()
+    if (activeTool.value.id === 'replace' && recognizeBackground.value) {
+      extraInstruction = `${extraInstruction}\n自动识别并完整保留前景主体，只替换所选背景区域。`
+    }
+    const prompt = `${defaultPrompt()}\n${extraInstruction}`.trim()
+    const commandText = extraInstruction
+      || (activeTool.value.id === 'watermark'
+        ? '自动识别并去除角落水印'
+        : (activeTool.value.id === 'outpaint' ? `扩展为 ${selectedAspect.value}` : activeTool.value.label))
+    commandLog.value = [
+      ...commandLog.value,
+      { tool: activeTool.value.label, text: commandText, at: Date.now() }
+    ].slice(-12)
+    status.value = activeTool.value.id === 'outpaint'
+      ? `正在扩图为 ${selectedAspect.value}，等待 AI 生成…`
+      : '本地图片模型正在处理，完成后会自动显示…'
+    await chat.sendMessage(prompt, attachments.map(item => ({ ...item, hidden: true })), null, {
+      imageTool: activeTool.value.id,
+      signal: operationController.signal
+    })
+    let result = findNewImage(previousUrls)
+    for (let attempt = 0; !result && attempt < 180; attempt++) {
+      if (operationController.signal.aborted) throw new DOMException('已取消', 'AbortError')
+      const pending = chat.messages.some(message => message?.pending_job)
+      const label = activeTool.value.id === 'outpaint' ? '扩图生成' : '生成图片'
+      status.value = `${pending ? 'AI 正在后台' : 'AI 正在'}${label}${'.'.repeat((attempt % 3) + 1)}`
+      await new Promise(resolve => setTimeout(resolve, 2500))
+      await chat.loadMessages(chat.currentId, { quiet: true })
+      result = findNewImage(previousUrls)
+    }
+    if (!result) throw new Error('图片任务仍在后台处理，可关闭工作台后在对话中查看')
+    operationProgress.value = 100
+    commitHistory(result)
+    clearMask()
+    status.value = '处理完成，可以继续修改'
+  } catch (error) {
+    if (cancelRequested || error?.name === 'AbortError') {
+      status.value = '已取消等待，后台任务若已提交仍会在对话中完成'
+      errorText.value = false
+    } else {
+      status.value = error.message || '图片处理失败'
+      errorText.value = true
+    }
+  } finally {
+    stopOperationProgress()
+    operationController = null
+    cancelRequested = false
+    busy.value = false
+  }
+}
+
+function findNewImage(previousUrls) {
+  // Comfy jobs often stay pending after sendMessage returns. Until then the only
+  // "new" image in the thread is the uploaded outpaint-source / mask canvas —
+  // which looks like flat edge colors and must never be committed as the result.
+  if (chat.messages.some(message => message?.pending_job)) return null
+
+  const junkName = /outpaint-(?:source|mask)|selection-mask|watermark_mask|cutout-source/i
+  return [...chat.messages].reverse()
+    .filter(message => message?.role === 'assistant' && !message?.pending_job)
+    .flatMap(message => message.attachments || [])
+    .find(attachment => {
+      if (!attachment || attachment.type !== 'image' || !attachment.url || attachment.hidden) return false
+      if (previousUrls.has(attachment.url)) return false
+      const label = `${attachment.name || ''} ${attachment.url || ''}`
+      return !junkName.test(label)
+    })
+}
+
+function selectHistory(index) {
+  if (index < 0 || index >= history.value.length) return
+  historyIndex.value = index
+  currentImage.value = { ...history.value[index] }
+  status.value = index === 0 ? '已回到原图' : `已切换到版本 ${index + 1}`
+  errorText.value = false
+  nextTick(syncCanvas)
+}
+function zoomByWheel(event) { zoom.value = Math.min(3, Math.max(0.25, zoom.value + (event.deltaY < 0 ? 0.08 : -0.08))) }
+</script>
+
+<style scoped>
+.workbench{position:fixed;inset:0;z-index:1200;display:grid;grid-template-columns:minmax(280px,30vw) 1fr;background:#f7f8fa;color:#172033}.workbench-sidebar{display:flex;min-width:0;flex-direction:column;border-right:1px solid #dfe3ea;background:#fff}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e8ebf0}.sidebar-header div{display:flex;flex-direction:column;gap:3px}.sidebar-header strong{font-size:16px}.sidebar-header span,.composer-footer span{color:#7a8495;font-size:11px}.icon-button{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:10px;color:#4b5565}.icon-button:hover{background:#f0f3f7}.icon-button:disabled{cursor:not-allowed;opacity:.34}.icon-button:disabled:hover{background:transparent}.history-action{flex:0 0 auto}.ops-panel{display:flex;min-height:0;flex:1;flex-direction:column;gap:10px;padding:14px 16px;border-bottom:1px solid #edf0f4;overflow:auto}.ops-title{color:#667085;font-size:12px;font-weight:650}.result-strip{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.result-strip button{display:flex;width:108px;flex-direction:column;align-items:stretch;gap:6px;padding:0;border:0;background:transparent}.result-strip button img{width:108px;height:108px;border:2px solid transparent;border-radius:12px;object-fit:cover;background:#f0f2f5;box-shadow:0 6px 18px rgba(34,45,66,.08)}.result-strip button.active img{border-color:#376fe8}.tool-chip{display:inline-flex;align-self:flex-start;padding:3px 8px;border-radius:999px;background:#eef3ff;color:#285fcf;font-size:11px;font-weight:650;line-height:1.4}.tool-note{padding:16px 20px 8px;flex:0 0 auto}.tool-note strong{font-size:15px}.tool-note p{margin:8px 0 0;color:#667085;font-size:13px;line-height:1.65}.clear-mask{display:inline-flex;align-items:center;gap:5px;margin-top:10px;color:#376fe8;font-size:12px}.outpaint-side-note{margin:4px 20px 10px;padding:12px 14px;border:1px solid #e4e9f2;border-radius:12px;background:#f8fafc}.outpaint-side-note span{display:block;color:#285fcf;font-size:12px;font-weight:650}.outpaint-side-note p{margin:6px 0 0;color:#667085;font-size:12px;line-height:1.55}.command-log{padding:0 20px 8px;border-bottom:1px solid #edf0f4;flex:0 0 auto}.command-log strong{display:block;margin-bottom:8px;color:#526074;font-size:12px}.command-log ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;max-height:140px;overflow:auto}.command-log li{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px solid #e8ebf0;border-radius:10px;background:#f8fafc}.command-tool{color:#376fe8;font-size:11px;font-weight:650}.command-text{color:#303a4a;font-size:12px;line-height:1.5;word-break:break-word}.suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:8px 20px;flex:0 0 auto}.sidebar-workflow .ops-panel{flex:1}.suggestions button{padding:8px 11px;border:1px solid #dfe4ec;border-radius:10px;color:#526074;font-size:12px;text-align:left}.suggestions button:hover{border-color:#b9c8e5;background:#f5f8fd}.composer{margin:auto 18px 14px;border:1.5px solid #7fa4f6;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(46,75,130,.09);flex:0 0 auto}.composer textarea{width:100%;min-height:92px;padding:14px 15px;border:0;outline:0;resize:none;background:transparent;color:#172033;font:inherit;line-height:1.55}.composer-footer{display:flex;align-items:center;justify-content:space-between;padding:7px 9px 9px 14px}.composer-footer button{display:flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;background:#4c78ee;color:#fff}.composer-footer button:disabled{opacity:.55}.status{margin:0 20px 15px;color:#376fe8;font-size:12px}.status.error{color:#d53b4c}.workbench-main{display:grid;min-width:0;grid-template-rows:auto minmax(0,1fr) auto}.tool-bar{display:flex;align-items:center;gap:2px;min-height:64px;padding:9px 14px;border-bottom:1px solid #dfe3ea;background:#fff;overflow-x:auto}.tool-bar>button:not(.icon-button){display:flex;min-width:72px;height:46px;align-items:center;justify-content:center;gap:6px;padding:0 10px;border-radius:10px;color:#303a4a;font-size:13px;white-space:nowrap}.tool-bar>button:hover,.tool-bar>button.active{background:#eef3ff;color:#285fcf}.toolbar-spacer{flex:1}.canvas-shell{display:flex;min-width:0;min-height:0;align-items:center;justify-content:center;overflow:auto;padding:42px;background:#f0f2f5}.canvas-stage{position:relative;transform-origin:center;transition:transform .15s ease;background-color:#fff;background-image:linear-gradient(45deg,#e3e6eb 25%,transparent 25%),linear-gradient(-45deg,#e3e6eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e6eb 75%),linear-gradient(-45deg,transparent 75%,#e3e6eb 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.canvas-stage img{display:block;max-width:min(76vw,1100px);max-height:calc(100dvh - 180px);object-fit:contain;box-shadow:0 18px 50px rgba(34,45,66,.16)}.canvas-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.canvas-stage canvas.drawing{cursor:crosshair}.canvas-footer{display:flex;min-height:52px;align-items:center;justify-content:flex-end;gap:9px;padding:0 22px;border-top:1px solid #dfe3ea;background:#fff}.canvas-footer button{display:inline-flex;align-items:center;gap:5px;padding:7px;border-radius:8px;color:#526074}.canvas-footer button:hover{background:#f0f3f7}.canvas-footer span{min-width:48px;text-align:center;font-size:12px}.canvas-footer i{width:1px;height:20px;background:#dfe3ea}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:800px){.workbench{grid-template-columns:1fr}.workbench-sidebar{position:absolute;inset:auto 8px 8px;z-index:2;max-height:46dvh;border:1px solid #dfe3ea;border-radius:16px;box-shadow:0 18px 50px rgba(26,38,61,.2)}.sidebar-header,.ops-panel,.tool-note,.suggestions,.command-log,.outpaint-side-note{display:none}.composer{margin:10px}.tool-bar{padding-right:54px}.tool-bar>button:not(.icon-button){min-width:58px;flex-direction:column;gap:2px;font-size:10px}.canvas-shell{padding:20px 10px 48dvh}.canvas-stage img{max-width:94vw;max-height:45dvh}}@media(prefers-reduced-motion:reduce){.canvas-stage{transition:none}.spin{animation:none}}
+
+.workbench-main{display:flex;flex-direction:column}.tool-bar>button:disabled{cursor:not-allowed;opacity:.42}.workflow-panel{display:flex;width:min(880px,calc(100% - 40px));flex:0 0 auto;align-self:center;margin:18px auto 0;border:1px solid #dfe3ea;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(46,75,130,.06)}.replace-panel{flex-direction:column;padding:0 16px}.selection-tools{display:flex;min-height:54px;align-items:center;gap:6px;border-bottom:1px solid #edf0f4}.selection-tools>button{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:11px;color:#4f5969}.selection-tools>button:hover,.selection-tools>button.active{background:#eef3ff;color:#285fcf}.selection-tools>i{width:1px;height:25px;margin:0 6px;background:#dfe3ea}.background-toggle{display:flex;align-items:center;gap:8px;color:#3f4857;font-size:13px;cursor:pointer}.background-toggle input{width:18px;height:18px;accent-color:#376fe8}.workflow-command{display:flex;min-height:62px;align-items:center;gap:11px}.workflow-command>svg{flex:0 0 auto;color:#4c78ee}.workflow-command input{min-width:0;flex:1;border:0;outline:0;color:#172033;font:inherit;font-size:14px}.workflow-command input::placeholder{color:#8b95a5}.workflow-command>button{display:flex;width:38px;height:38px;flex:0 0 auto;align-items:center;justify-content:center;border-radius:50%;background:#4c78ee;color:#fff}.workflow-command>button:disabled{cursor:not-allowed;opacity:.3}.outpaint-panel{min-height:64px;align-items:center;justify-content:center;gap:10px;padding:8px 12px}.ratio-options{display:flex;align-items:center;gap:3px}.ratio-options button{display:flex;height:46px;align-items:center;gap:6px;padding:0 10px;border-radius:11px;color:#3e4756;font-size:13px;white-space:nowrap}.ratio-options button:hover,.ratio-options button.active{background:#eef3ff;color:#285fcf}.ratio-options button>i{display:block;width:21px;max-height:20px;border:1.8px solid currentColor;border-radius:3px}.panel-divider{width:1px;height:30px;background:#dfe3ea}.primary-workflow-button{display:flex;min-width:112px;height:42px;align-items:center;justify-content:center;gap:7px;padding:0 18px;border-radius:12px;background:#4c78ee;color:#fff;font-size:14px;font-weight:650;white-space:nowrap}.primary-workflow-button:disabled{cursor:not-allowed;opacity:.55}.panel-status{width:100%;margin:0 4px 8px;color:#376fe8;font-size:12px}.panel-status.error{color:#d53b4c}.outpaint-panel .panel-status{position:absolute;transform:translateY(46px);text-align:center;pointer-events:none}.canvas-shell{position:relative;flex:1}.canvas-frame:not(.outpaint-frame){display:contents}.outpaint-mode{padding:28px;align-items:center;justify-content:center}.outpaint-frame{display:flex;position:relative;width:min(78vw,calc((100dvh - 260px) * var(--outpaint-ratio)));height:min(calc(100dvh - 260px),720px);max-width:100%;aspect-ratio:var(--outpaint-ratio);align-items:center;justify-content:center;border:1px dashed #aeb8c8;background-color:#eef1f5;background-image:radial-gradient(circle,#d5dbe6 1.1px,transparent 1.2px);background-size:16px 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}.outpaint-frame .canvas-stage{display:block;background:none;transform-origin:center center}.outpaint-frame .canvas-stage img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;box-shadow:0 10px 28px rgba(34,45,66,.16)}.canvas-stage canvas.erasing{cursor:cell}.restore-overlay{display:flex;position:absolute;inset:0;z-index:3;align-items:flex-end;justify-content:center;padding:0 20px 28px;background:rgba(13,18,28,.64)}.restore-overlay.outpaint-overlay{background:rgba(13,18,28,.28)}.restore-progress{display:flex;min-height:54px;align-items:center;gap:10px;padding:0 18px;border:1px solid rgba(255,255,255,.48);border-radius:14px;background:rgba(255,255,255,.96);color:#303a4a;font-size:14px;box-shadow:0 14px 38px rgba(17,27,45,.24)}.restore-progress>svg{color:#4c78ee}.restore-progress button{margin-left:8px;color:#285fcf;font-weight:650}.restore-progress button:hover{text-decoration:underline}.workflow-panel button:active,.tool-bar button:active{transform:translateY(1px)}
+
+.workflow-panel{position:relative}
+@media(max-width:1100px){.ratio-options button{padding:0 7px}.ratio-options button>i{display:none}.workflow-panel{width:calc(100% - 24px)}.primary-workflow-button{min-width:96px;padding:0 12px}}
+@media(max-width:800px){.workflow-panel{position:absolute;right:8px;bottom:calc(46dvh + 18px);left:8px;z-index:3;width:auto;margin:0}.outpaint-panel{overflow-x:auto;justify-content:flex-start}.outpaint-frame{width:min(94vw,calc(38dvh * var(--outpaint-ratio)));height:min(38dvh,520px);max-width:94vw}.restore-overlay{padding-bottom:16px}.restore-progress{min-height:46px;padding:0 12px;font-size:12px}}
+@media(prefers-reduced-motion:reduce){.workflow-panel button:active,.tool-bar button:active{transform:none}}
+</style>
diff --git a/frontend/src/components/MessageItem.vue b/frontend/src/components/MessageItem.vue
index b6ab096..854a3c8 100644
--- a/frontend/src/components/MessageItem.vue
+++ b/frontend/src/components/MessageItem.vue
@@ -4,16 +4,25 @@
       <IconUser v-if="message.role === 'user'" :size="16" :stroke-width="1.8" />
       <IconSparkles v-else :size="16" :stroke-width="1.8" />
     </div>
-    <div class="message-body">
-      <div v-if="attachments.length" class="attachments">
+    <div ref="messageBodyRef" class="message-body" :class="{ 'wide-image-message': isAssistantImageGrid || showImageSkeleton }">
+      <div v-if="showImageSkeleton" class="image-loading-grid" aria-label="正在生成四张图片">
+        <span class="generation-progress"><IconSparkles :size="15" :stroke-width="1.8" /> {{ generationProgress }}%</span>
+        <i v-for="index in 4" :key="index" />
+      </div>
+      <div v-if="attachments.length" class="attachments" :class="{ 'image-grid': isAssistantImageGrid }">
         <template v-for="(att, i) in attachments" :key="i">
           <img
             v-if="att?.type === 'image' && features.image && !brokenImages[i]"
             :src="att.url"
             :alt="att.name || '生成图片'"
             class="att-image"
+            role="button"
+            tabindex="0"
+            :aria-label="`放大查看${att.name || '图片'}`"
             @error="markBroken(i)"
-            @click="previewImage(att.url)"
+            @click="previewImage(att)"
+            @keydown.enter="previewImage(att)"
+            @keydown.space.prevent="previewImage(att)"
           />
           <a
             v-else-if="att?.type === 'image'"
@@ -58,11 +67,26 @@
         v-html="renderedContent"
       />
 
-      <div v-if="message.content && !isStreaming" class="message-actions">
+      <div
+        v-if="(message.content || firstImage) && !isStreaming"
+        class="message-actions"
+        :class="{ 'has-image': firstImage }"
+      >
         <button
+          v-if="firstImage"
+          class="message-action-btn image-edit-btn"
+          type="button"
+          aria-label="在 AI 图片工作台中编辑"
+          @click="previewImage(firstImage)"
+        >
+          <IconEdit :size="15" :stroke-width="1.8" />
+          <span>AI 编辑</span>
+        </button>
+        <button
+          v-if="message.content || firstImage"
           class="message-action-btn"
           type="button"
-          :aria-label="copied ? '消息内容已复制' : '复制消息内容'"
+          :aria-label="copied ? '消息图文内容已复制' : '复制消息图文内容'"
           @click="copyContent"
         >
           <IconCheck v-if="copied" :size="15" :stroke-width="2" />
@@ -75,10 +99,11 @@
 </template>
 
 <script setup>
-import { computed, reactive, ref, onBeforeUnmount } from 'vue'
+import { computed, reactive, ref, onBeforeUnmount, watch } from 'vue'
 import IconCheck from '@tabler/icons-vue/dist/esm/icons/IconCheck.mjs'
 import IconCopy from '@tabler/icons-vue/dist/esm/icons/IconCopy.mjs'
 import IconFileText from '@tabler/icons-vue/dist/esm/icons/IconFileText.mjs'
+import IconEdit from '@tabler/icons-vue/dist/esm/icons/IconEdit.mjs'
 import IconPhoto from '@tabler/icons-vue/dist/esm/icons/IconPhoto.mjs'
 import IconSparkles from '@tabler/icons-vue/dist/esm/icons/IconSparkles.mjs'
 import IconUser from '@tabler/icons-vue/dist/esm/icons/IconUser.mjs'
@@ -90,22 +115,61 @@ const props = defineProps({
   message: { type: Object, required: true },
   isStreaming: Boolean
 })
+const emit = defineEmits(['preview-image'])
 
 const settings = useSettingsStore()
 const notification = useNotificationStore()
 const features = computed(() => settings.features)
 const copied = ref(false)
+const messageBodyRef = ref(null)
+const generationProgress = ref(4)
+const fourImageLoading = ref(false)
 let copiedTimer = null
+let progressTimer = null
 
 onBeforeUnmount(() => {
   if (copiedTimer) clearTimeout(copiedTimer)
+  if (progressTimer) clearInterval(progressTimer)
 })
 
 const attachments = computed(() => {
   const raw = props.message.attachments
   const list = Array.isArray(raw) ? raw : (raw && typeof raw === 'object' ? Object.values(raw) : [])
-  return list.filter(att => att && typeof att === 'object')
+  return list.filter(att => att && typeof att === 'object' && !att.hidden)
 })
+const firstImage = computed(() => attachments.value.find(att => att?.type === 'image' && att?.url) || null)
+const imageAttachments = computed(() => attachments.value.filter(att => att?.type === 'image' && att?.url))
+const isAssistantImageGrid = computed(() => props.message.role === 'assistant' && imageAttachments.value.length >= 2)
+const pendingImageCount = computed(() => Number(props.message.pending_image_count || 0))
+const showImageSkeleton = computed(() => fourImageLoading.value && !imageAttachments.value.length)
+
+watch(
+  () => [props.isStreaming, props.message.pending_job, pendingImageCount.value, props.message.content, imageAttachments.value.length],
+  ([streaming, pending, count, content, images]) => {
+    if (images) {
+      fourImageLoading.value = false
+      return
+    }
+    if ((pending && Number(count) >= 4) || (streaming && /正在生成\s*4\s*张图片|正在生成图片|图片生成中/u.test(String(content || '')))) {
+      fourImageLoading.value = true
+      return
+    }
+    if (!pending && !streaming) fourImageLoading.value = false
+  },
+  { immediate: true }
+)
+
+watch(showImageSkeleton, active => {
+  if (progressTimer) {
+    clearInterval(progressTimer)
+    progressTimer = null
+  }
+  if (!active) return
+  generationProgress.value = 4
+  progressTimer = setInterval(() => {
+    generationProgress.value = Math.min(92, generationProgress.value + Math.max(1, Math.round((94 - generationProgress.value) * 0.08)))
+  }, 800)
+}, { immediate: true })
 
 const useMarkdown = computed(() => {
   return features.value.markdown && props.message.role === 'assistant'
@@ -131,38 +195,229 @@ function markBroken(index) {
   brokenImages[index] = true
 }
 
-function previewImage(url) {
-  window.open(url, '_blank', 'noopener')
+function previewImage(attachment) {
+  if (!attachment?.url) return
+  emit('preview-image', {
+    url: attachment.url,
+    name: attachment.name || '图片预览'
+  })
 }
 
-function legacyCopy(text) {
-  const textarea = document.createElement('textarea')
-  textarea.value = text
-  textarea.setAttribute('readonly', '')
-  textarea.style.position = 'fixed'
-  textarea.style.inset = '-9999px auto auto -9999px'
-  document.body.appendChild(textarea)
-  textarea.select()
+const COPY_STYLE_PROPERTIES = [
+  'background-color', 'border', 'border-collapse', 'border-radius', 'box-shadow',
+  'color', 'display', 'font-family', 'font-size', 'font-style', 'font-weight',
+  'height', 'letter-spacing', 'line-height', 'list-style-position', 'list-style-type',
+  'margin', 'margin-bottom', 'margin-left', 'margin-right', 'margin-top', 'max-height',
+  'max-width', 'min-width', 'padding', 'padding-bottom', 'padding-left', 'padding-right',
+  'padding-top', 'text-align', 'text-decoration', 'vertical-align', 'white-space', 'width'
+]
+
+function inlineCopyStyles(source, clone) {
+  if (!(source instanceof Element) || !(clone instanceof Element)) return
+  const computedStyle = window.getComputedStyle(source)
+  COPY_STYLE_PROPERTIES.forEach(property => {
+    const value = computedStyle.getPropertyValue(property)
+    if (value) clone.style.setProperty(property, value)
+  })
+
+  clone.removeAttribute('class')
+  clone.removeAttribute('role')
+  clone.removeAttribute('tabindex')
+  clone.removeAttribute('aria-label')
+  if (clone instanceof HTMLImageElement) {
+    const rect = source.getBoundingClientRect()
+    if (rect.width > 0) clone.style.width = `${Math.round(rect.width)}px`
+    clone.style.height = 'auto'
+    clone.style.cursor = 'default'
+  }
+
+  const sourceChildren = Array.from(source.children)
+  const cloneChildren = Array.from(clone.children)
+  sourceChildren.forEach((child, index) => inlineCopyStyles(child, cloneChildren[index]))
+}
+
+function blobToDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result || ''))
+    reader.onerror = () => reject(reader.error || new Error('图片读取失败'))
+    reader.readAsDataURL(blob)
+  })
+}
+
+async function fetchImageBlob(url) {
+  const response = await fetch(url, { credentials: 'include' })
+  if (!response.ok) throw new Error(`图片读取失败（${response.status}）`)
+  const blob = await response.blob()
+  if (!blob.type.startsWith('image/')) throw new Error('附件不是图片')
+  return blob
+}
+
+function imageBlobToPng(blob) {
+  if (blob.type === 'image/png') return Promise.resolve(blob)
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    const objectUrl = URL.createObjectURL(blob)
+    image.onload = () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = image.naturalWidth
+      canvas.height = image.naturalHeight
+      const context = canvas.getContext('2d')
+      if (!context) {
+        URL.revokeObjectURL(objectUrl)
+        reject(new Error('浏览器无法转换图片'))
+        return
+      }
+      context.drawImage(image, 0, 0)
+      URL.revokeObjectURL(objectUrl)
+      canvas.toBlob(result => {
+        if (result) resolve(result)
+        else reject(new Error('浏览器无法转换图片'))
+      }, 'image/png')
+    }
+    image.onerror = () => {
+      URL.revokeObjectURL(objectUrl)
+      reject(new Error('图片解码失败'))
+    }
+    image.src = objectUrl
+  })
+}
+
+function prepareRichCopyPayload() {
+  const sourceBody = messageBodyRef.value
+  const container = document.createElement('div')
+  container.setAttribute('data-ai-chat-message', '')
+  container.style.cssText = 'max-width:720px;color:#1f2937;font-family:Arial,"Microsoft YaHei",sans-serif;font-size:15px;line-height:1.75;'
+
+  if (sourceBody) {
+    Array.from(sourceBody.children).forEach(source => {
+      if (!source.classList.contains('attachments') && !source.classList.contains('message-content')) return
+      const clone = source.cloneNode(true)
+      inlineCopyStyles(source, clone)
+      if (source.classList.contains('attachments')) {
+        clone.style.display = 'block'
+        clone.style.width = '100%'
+      }
+      container.appendChild(clone)
+    })
+  }
+
+  if (!container.children.length && props.message.content) {
+    const content = document.createElement('div')
+    content.innerHTML = renderedContent.value
+    container.appendChild(content)
+  }
+
+  const imageJobs = Array.from(container.querySelectorAll('img')).map((image, index) => {
+    const attachment = imageAttachments.value[index]
+    const url = attachment?.url || image.getAttribute('src') || ''
+    const absoluteUrl = url ? new URL(url, window.location.href).href : ''
+    if (absoluteUrl) image.src = absoluteUrl
+    return { image, url: absoluteUrl }
+  }).filter(job => job.url)
+
+  const textParts = []
+  if (props.message.content) textParts.push(String(props.message.content))
+  if (!props.message.content && imageAttachments.value.length) {
+    textParts.push(...imageAttachments.value.map(att => att.name || '图片'))
+  }
+
+  return {
+    container,
+    text: textParts.join('\n\n'),
+    imageJobs
+  }
+}
+
+async function resolveRichCopyPayload(prepared) {
+  const blobs = []
+  await Promise.all(prepared.imageJobs.map(async ({ image, url }, index) => {
+    try {
+      const blob = await fetchImageBlob(url)
+      blobs[index] = blob
+      image.src = await blobToDataUrl(blob)
+    } catch {
+      // Keep the absolute URL so rich-text targets can still retrieve the image.
+      image.src = url
+    }
+  }))
+
+  return {
+    html: prepared.container.outerHTML,
+    text: prepared.text,
+    primaryImage: blobs.find(Boolean) || null
+  }
+}
+
+function legacyCopy(payload) {
+  const holder = document.createElement('div')
+  holder.contentEditable = 'true'
+  holder.innerHTML = payload.html
+  holder.style.position = 'fixed'
+  holder.style.left = '-10000px'
+  holder.style.top = '0'
+  holder.style.opacity = '0'
+  document.body.appendChild(holder)
+
+  const selection = window.getSelection()
+  const previousRanges = []
+  if (selection) {
+    for (let index = 0; index < selection.rangeCount; index += 1) {
+      previousRanges.push(selection.getRangeAt(index).cloneRange())
+    }
+    selection.removeAllRanges()
+    const range = document.createRange()
+    range.selectNodeContents(holder)
+    selection.addRange(range)
+  }
+
   const success = document.execCommand('copy')
-  textarea.remove()
+  selection?.removeAllRanges()
+  previousRanges.forEach(range => selection?.addRange(range))
+  holder.remove()
   if (!success) throw new Error('浏览器未允许复制')
 }
 
+function writeRichClipboard(prepared) {
+  const immediatePayload = {
+    html: prepared.container.outerHTML,
+    text: prepared.text
+  }
+
+  if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
+    legacyCopy(immediatePayload)
+    return Promise.resolve()
+  }
+
+  // Start the Clipboard API call inside the click event. The payload promises may
+  // finish later, but the browser's transient user activation is retained.
+  const payloadPromise = resolveRichCopyPayload(prepared)
+  const representations = {
+    'text/html': payloadPromise.then(payload => new Blob([payload.html], { type: 'text/html' })),
+    'text/plain': new Blob([prepared.text], { type: 'text/plain' })
+  }
+  if (prepared.imageJobs.length) {
+    representations['image/png'] = payloadPromise.then(payload => {
+      if (!payload.primaryImage) throw new Error('图片数据读取失败')
+      return imageBlobToPng(payload.primaryImage)
+    })
+  }
+
+  return navigator.clipboard.write([new ClipboardItem(representations)])
+}
+
 async function copyContent() {
   const text = String(props.message.content || '')
-  if (!text) return
+  if (!text && !imageAttachments.value.length) return
 
   let success = false
+  const prepared = prepareRichCopyPayload()
   try {
-    if (navigator.clipboard?.writeText) {
-      await navigator.clipboard.writeText(text)
-    } else {
-      legacyCopy(text)
-    }
+    await writeRichClipboard(prepared)
     success = true
   } catch {
     try {
-      legacyCopy(text)
+      legacyCopy({ html: prepared.container.outerHTML, text: prepared.text })
       success = true
     } catch {
       success = false
@@ -240,6 +495,11 @@ async function copyContent() {
   align-items: flex-start;
 }
 
+.message.assistant .message-body.wide-image-message {
+  width: 100%;
+  max-width: 100%;
+}
+
 .message-content {
   display: inline-block;
   max-width: 100%;
@@ -261,6 +521,19 @@ async function copyContent() {
   transition: opacity 0.16s ease;
 }
 
+.image-edit-btn {
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.message-actions.has-image {
+  height: auto;
+  margin-top: 7px;
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+}
+
 .message.user .message-actions {
   justify-content: flex-end;
 }
@@ -339,6 +612,55 @@ async function copyContent() {
   margin-bottom: 8px;
 }
 
+.attachments.image-grid,
+.image-loading-grid {
+  display: grid;
+  position: relative;
+  width: 100%;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 4px;
+  overflow: hidden;
+  border-radius: 16px;
+}
+
+.attachments.image-grid .att-image {
+  width: 100%;
+  max-width: none;
+  height: auto;
+  max-height: none;
+  aspect-ratio: 1 / 1;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.image-loading-grid i {
+  display: block;
+  aspect-ratio: 1 / 1;
+  background: linear-gradient(115deg, #edf2ff 8%, #f5f1ff 38%, #eaf3ff 64%, #edf2ff 92%);
+  background-size: 240% 100%;
+  animation: image-skeleton 1.8s ease-in-out infinite;
+}
+
+.generation-progress {
+  display: inline-flex;
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  left: 10px;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 8px;
+  border: 1px solid rgba(214, 223, 241, .9);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, .92);
+  color: #4b5565;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 650;
+  box-shadow: 0 5px 16px rgba(38, 59, 92, .08);
+}
+
 .message.user .attachments {
   justify-content: flex-end;
 }
@@ -407,6 +729,11 @@ async function copyContent() {
   46%, 100% { opacity: 0; }
 }
 
+@keyframes image-skeleton {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+
 @media (max-width: 768px) {
   .message {
     gap: 8px;
@@ -445,6 +772,12 @@ async function copyContent() {
     max-height: 420px;
     border-radius: 14px;
   }
+
+  .attachments.image-grid,
+  .image-loading-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    border-radius: 14px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -457,5 +790,9 @@ async function copyContent() {
   .att-document {
     transition: none;
   }
+
+  .image-loading-grid i {
+    animation: none;
+  }
 }
 </style>
diff --git a/frontend/src/components/MessageList.vue b/frontend/src/components/MessageList.vue
index 4017f25..e3bd05e 100644
--- a/frontend/src/components/MessageList.vue
+++ b/frontend/src/components/MessageList.vue
@@ -14,7 +14,7 @@
             <IconSparkles :size="25" :stroke-width="1.7" />
           </div>
           <h2>一个输入框，完成对话与图片创作</h2>
-          <p>选择语言模型或图片生成模型，描述你的需求就可以开始。</p>
+          <p>描述需求即可开始；使用 Agent 时会自动选择语言或图片生成模型。</p>
         </div>
       </div>
 
@@ -28,12 +28,14 @@
         v-for="msg in visibleMessages"
         :key="msg.id"
         :message="msg"
+        @preview-image="openImagePreview"
       />
 
       <MessageItem
         v-if="hasStreaming"
         :message="{ role: 'assistant', content: streaming, content_type: 'mixed', attachments: streamingAttachments }"
         :is-streaming="true"
+        @preview-image="openImagePreview"
       />
 
       <div v-if="sending && !hasStreaming" class="typing-indicator" aria-label="AI 正在回复">
@@ -54,14 +56,19 @@
         <span>回到最新</span>
       </button>
     </Transition>
+
+    <Teleport to="body">
+      <ImageWorkbench v-if="previewedImage" :image="previewedImage" @close="closeImagePreview" />
+    </Teleport>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, nextTick, computed } from 'vue'
+import { ref, watch, nextTick, computed, onMounted, onBeforeUnmount } from 'vue'
 import IconArrowDown from '@tabler/icons-vue/dist/esm/icons/IconArrowDown.mjs'
 import IconSparkles from '@tabler/icons-vue/dist/esm/icons/IconSparkles.mjs'
 import MessageItem from './MessageItem.vue'
+import ImageWorkbench from './ImageWorkbench.vue'
 
 const props = defineProps({
   messages: { type: Array, default: () => [] },
@@ -74,6 +81,9 @@ const props = defineProps({
 const listRef = ref(null)
 const autoScrollEnabled = ref(true)
 const isAtBottom = ref(true)
+const previewedImage = ref(null)
+let previousBodyOverflow = ''
+let previewLocksBody = false
 let touchY = null
 
 const BOTTOM_EPSILON = 2
@@ -142,6 +152,44 @@ function resumeAutoScroll() {
   scrollToBottom()
 }
 
+function openImagePreview(image) {
+  if (!image?.url) return
+  previewedImage.value = image
+}
+
+function closeImagePreview() {
+  previewedImage.value = null
+}
+
+function handlePreviewKeydown(event) {
+  if (event.key === 'Escape' && previewedImage.value) {
+    closeImagePreview()
+  }
+}
+
+watch(previewedImage, (image, previousImage) => {
+  if (image && !previousImage) {
+    previousBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    previewLocksBody = true
+  } else if (!image && previousImage && previewLocksBody) {
+    document.body.style.overflow = previousBodyOverflow
+    previewLocksBody = false
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('keydown', handlePreviewKeydown)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handlePreviewKeydown)
+  if (previewLocksBody) {
+    document.body.style.overflow = previousBodyOverflow
+    previewLocksBody = false
+  }
+})
+
 watch(
   () => {
     const last = visibleMessages.value[visibleMessages.value.length - 1]
@@ -235,6 +283,97 @@ watch(
   transform: translateX(-50%) translateY(7px);
 }
 
+.image-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  padding: 58px 28px 22px;
+  background: rgba(12, 19, 31, 0.88);
+  backdrop-filter: blur(14px);
+}
+
+.image-preview-stage {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-preview-full {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 94vw;
+  max-height: calc(100vh - 112px);
+  border-radius: 14px;
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
+  object-fit: contain;
+  user-select: none;
+}
+
+.image-preview-close {
+  position: fixed;
+  top: 18px;
+  right: 20px;
+  z-index: 1;
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+  transition: background 0.16s ease, transform 0.16s ease;
+}
+
+.image-preview-close:hover,
+.image-preview-close:focus-visible {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.image-preview-close:active {
+  transform: scale(0.95);
+}
+
+.image-preview-caption {
+  max-width: min(80vw, 720px);
+  margin: 14px auto 0;
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-preview-enter-active,
+.image-preview-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.image-preview-enter-active .image-preview-full,
+.image-preview-leave-active .image-preview-full {
+  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+}
+
+.image-preview-enter-from,
+.image-preview-leave-to {
+  opacity: 0;
+}
+
+.image-preview-enter-from .image-preview-full,
+.image-preview-leave-to .image-preview-full {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
 .welcome {
   display: flex;
   align-items: center;
@@ -380,10 +519,28 @@ watch(
     max-width: 310px;
     font-size: 13px;
   }
+
+  .image-preview-overlay {
+    padding: 54px 12px 16px;
+  }
+
+  .image-preview-full {
+    max-width: calc(100vw - 24px);
+    max-height: calc(100vh - 100px);
+    border-radius: 10px;
+  }
+
+  .image-preview-close {
+    top: 12px;
+    right: 12px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .scroll-bottom-btn,
+  .image-preview-overlay,
+  .image-preview-full,
+  .image-preview-close,
   .welcome-panel,
   .loading-state span,
   .typing-indicator span {
diff --git a/frontend/src/stores/chat.js b/frontend/src/stores/chat.js
index 8f85e1b..233ecd3 100644
--- a/frontend/src/stores/chat.js
+++ b/frontend/src/stores/chat.js
@@ -193,36 +193,44 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
-  async function sendMessage(content, attachments = [], agentId = selectedAgentId.value) {
-    if (!currentId.value) {
-      await createConversation(selectedModelId.value)
-    } else if (selectedModelId.value != null) {
-      // 发送前确保当前会话已绑定侧边栏所选模型
-      const conv = conversations.value.find(c => c.id === currentId.value)
-      if (conv && Number(conv.model_id) !== Number(selectedModelId.value)) {
-        await setSelectedModel(selectedModelId.value)
-      }
-    }
+  async function sendMessage(content, attachments = [], agentId = selectedAgentId.value, options = {}) {
+    if (sending.value) return
 
-    const userMsg = {
-      id: Date.now(),
-      role: 'user',
-      content,
-      attachments,
-      created_at: new Date().toISOString()
-    }
-    messages.value.push(userMsg)
     sending.value = true
     streamingContent.value = ''
     streamingAttachments.value = []
+    let userMsg = null
 
     try {
-      await streamChat(content, attachments, agentId)
+      if (!currentId.value) {
+        await createConversation(selectedModelId.value)
+      } else if (selectedModelId.value != null) {
+        // 发送前确保当前会话已绑定侧边栏所选模型
+        const conv = conversations.value.find(c => c.id === currentId.value)
+        if (conv && Number(conv.model_id) !== Number(selectedModelId.value)) {
+          await setSelectedModel(selectedModelId.value)
+        }
+      }
+
+      userMsg = {
+        id: Date.now(),
+        role: 'user',
+        content,
+        attachments,
+        created_at: new Date().toISOString()
+      }
+      messages.value.push(userMsg)
+
+      await streamChat(content, attachments, agentId, options)
       await loadMessages()
     } catch (e) {
       // 连接断开/代理超时：任务可能已落库为 pending，先同步再决定是否抛错
-      messages.value = messages.value.filter(m => m.id !== userMsg.id)
+      const cancelled = e?.name === 'AbortError' || options.signal?.aborted
+      if (userMsg) {
+        messages.value = messages.value.filter(m => m.id !== userMsg.id)
+      }
       await loadMessages().catch(() => {})
+      if (cancelled) throw e
       if (hasPendingJobs(messages.value)) {
         startPendingJobPolling()
         return
@@ -235,7 +243,7 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
-  async function streamChat(content, attachments, agentId = null) {
+  async function streamChat(content, attachments, agentId = null, options = {}) {
     const token = localStorage.getItem('token')
     const response = await fetch('/api/chat/completions', {
       method: 'POST',
@@ -243,11 +251,13 @@ export const useChatStore = defineStore('chat', () => {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${token}`
       },
+      signal: options.signal,
       body: JSON.stringify({
         conversation_id: currentId.value,
         content,
         attachments,
         agent_id: agentId || null,
+        image_tool: options.imageTool || null,
         stream: true
       })
     })
@@ -268,8 +278,47 @@ export const useChatStore = defineStore('chat', () => {
     const decoder = new TextDecoder()
     let buffer = ''
     let fullContent = ''
+    let receivedContent = ''
     let gotAttachments = false
     let pendingDone = false
+    let agentRenderVersion = 0
+    let agentRenderQueue = Promise.resolve()
+    const isAgentStream = !!agentId
+
+    const appendVisibleContent = (content) => {
+      if (!content) return
+      receivedContent += content
+
+      if (!isAgentStream) {
+        fullContent += content
+        streamingContent.value = fullContent
+        return
+      }
+
+      const version = agentRenderVersion
+      const characters = Array.from(content)
+      const frameCount = Math.min(10, Math.max(2, Math.ceil(characters.length / 8)))
+      const frameSize = Math.ceil(characters.length / frameCount)
+
+      agentRenderQueue = agentRenderQueue.then(async () => {
+        for (let index = 0; index < characters.length; index += frameSize) {
+          if (version !== agentRenderVersion) return
+          fullContent += characters.slice(index, index + frameSize).join('')
+          streamingContent.value = fullContent
+          if (index + frameSize < characters.length) {
+            await new Promise(resolve => setTimeout(resolve, 14))
+          }
+        }
+      })
+    }
+
+    const replaceVisibleContent = (content) => {
+      agentRenderVersion++
+      agentRenderQueue = Promise.resolve()
+      receivedContent = content
+      fullContent = content
+      streamingContent.value = content
+    }
 
     while (true) {
       const { done, value } = await reader.read()
@@ -285,6 +334,7 @@ export const useChatStore = defineStore('chat', () => {
         const { event, data } = parseSseBlock(block)
 
         if (event === 'error') {
+          agentRenderVersion++
           throw new Error(data?.message || 'AI 请求失败')
         }
 
@@ -298,8 +348,11 @@ export const useChatStore = defineStore('chat', () => {
         }
 
         if (event === 'message' && data?.content) {
-          fullContent += data.content
-          streamingContent.value = fullContent
+          appendVisibleContent(data.content)
+        }
+
+        if (event === 'replace' && typeof data?.content === 'string') {
+          replaceVisibleContent(data.content)
         }
 
         if (event === 'done') {
@@ -309,9 +362,8 @@ export const useChatStore = defineStore('chat', () => {
               streamingContent.value = data.content
             }
           }
-          if (data?.content && !fullContent) {
-            fullContent = data.content
-            streamingContent.value = fullContent
+          if (data?.content && !receivedContent) {
+            appendVisibleContent(data.content)
           }
           if (Array.isArray(data?.attachments) && data.attachments.length) {
             streamingAttachments.value = data.attachments
@@ -321,6 +373,8 @@ export const useChatStore = defineStore('chat', () => {
       }
     }
 
+    await agentRenderQueue
+
     if (pendingDone) {
       await loadMessages().catch(() => {})
       startPendingJobPolling()
diff --git a/package.json b/package.json
index b315901..e2f4906 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,12 @@
     "build:member": "npm --prefix frontend run build",
     "build:admin": "npm --prefix frontend-admin run build",
     "deploy:static": "node scripts/deploy-static.js",
+    "test:agent:100": "php backend/tests/agent_100_round_regression.php",
+    "test:llm:100": "php backend/tests/llm_100_round_regression.php",
+    "test:image:regression": "php backend/tests/comfy_image_edit_regression.php",
+    "test:image:integration": "php backend/tests/comfy_image_edit_integration.php",
+    "test:stability:1000": "powershell -ExecutionPolicy Bypass -File scripts/run-stability-suite.ps1",
+    "test:conversation:3000": "powershell -NoProfile -ExecutionPolicy Bypass -File scripts/run-conversation-adversarial.ps1 -Rounds 3000",
     "preview:member": "npm --prefix frontend run preview",
     "preview:admin": "npm --prefix frontend-admin run preview"
   }
diff --git a/scripts/run-conversation-adversarial.ps1 b/scripts/run-conversation-adversarial.ps1
new file mode 100644
index 0000000..c8f24a9
--- /dev/null
+++ b/scripts/run-conversation-adversarial.ps1
@@ -0,0 +1,56 @@
+param(
+  [ValidateScript({ $_ -ge 100 -and $_ % 100 -eq 0 })]
+  [int]$Rounds = 3000
+)
+
+$ErrorActionPreference = "Stop"
+$utf8Encoding = New-Object System.Text.UTF8Encoding($false)
+[Console]::OutputEncoding = $utf8Encoding
+$OutputEncoding = $utf8Encoding
+
+$mutex = New-Object System.Threading.Mutex($false, "Local\AiChat-Conversation-Adversarial")
+$ownsMutex = $false
+
+try {
+  try {
+    $ownsMutex = $mutex.WaitOne(0)
+  } catch [System.Threading.AbandonedMutexException] {
+    $ownsMutex = $true
+  }
+
+  if (!$ownsMutex) {
+    Write-Host ">> Another conversation adversarial run is active; skipping overlap." -ForegroundColor Yellow
+    exit 0
+  }
+
+  $root = Split-Path -Parent $PSScriptRoot
+  $logRoot = Join-Path $root "logs\conversation"
+  if (!(Test-Path $logRoot)) {
+    New-Item -ItemType Directory -Path $logRoot -Force | Out-Null
+  }
+
+  $timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
+  $logFile = Join-Path $logRoot "conversation-adversarial-$timestamp.log"
+  $summaryFile = Join-Path $logRoot "conversation-adversarial-$timestamp.summary.json"
+  $testScript = Join-Path $root "backend\tests\conversation_adversarial_regression.php"
+
+  Write-Host ">> Running $Rounds adversarial conversation rounds" -ForegroundColor Cyan
+  & php $testScript $Rounds $summaryFile 2>&1 | ForEach-Object {
+    $line = [string]$_
+    Write-Host $line
+    Add-Content -Path $logFile -Value $line -Encoding UTF8
+  }
+  $exitCode = $LASTEXITCODE
+
+  if ($exitCode -ne 0) {
+    Write-Error "Conversation adversarial test failed with exit code $exitCode. Log: $logFile"
+    exit $exitCode
+  }
+
+  Write-Host ">> Conversation adversarial test passed. Log: $logFile" -ForegroundColor Green
+} finally {
+  if ($ownsMutex) {
+    $mutex.ReleaseMutex()
+  }
+  $mutex.Dispose()
+}
diff --git a/scripts/run-stability-suite.ps1 b/scripts/run-stability-suite.ps1
new file mode 100644
index 0000000..384b256
--- /dev/null
+++ b/scripts/run-stability-suite.ps1
@@ -0,0 +1,87 @@
+param(
+  [ValidateRange(1, 1000000)]
+  [int]$Rounds = 1000
+)
+
+$ErrorActionPreference = "Stop"
+$utf8Encoding = New-Object System.Text.UTF8Encoding($false)
+[Console]::OutputEncoding = $utf8Encoding
+$OutputEncoding = $utf8Encoding
+
+$mutex = New-Object System.Threading.Mutex($false, "Local\AiChat-Stability-Suite")
+$ownsMutex = $false
+try {
+  try {
+    $ownsMutex = $mutex.WaitOne(0)
+  } catch [System.Threading.AbandonedMutexException] {
+    $ownsMutex = $true
+  }
+
+  if (!$ownsMutex) {
+    Write-Host ">> Another stability run is already active; skipping this overlapping run." -ForegroundColor Yellow
+    exit 0
+  }
+
+$root = Split-Path -Parent $PSScriptRoot
+$logRoot = Join-Path $root "logs\stability"
+if (!(Test-Path $logRoot)) {
+  New-Item -ItemType Directory -Path $logRoot -Force | Out-Null
+}
+
+$timestamp = Get-Date -Format "yyyyMMdd-HHmmss"
+$logFile = Join-Path $logRoot "stability-$timestamp.log"
+$summaryFile = Join-Path $logRoot "stability-$timestamp.summary.json"
+
+function Invoke-StabilitySuite {
+  param(
+    [string]$SuiteName
+  )
+
+  $testScript = Join-Path $root "backend\tests\stability_1000_round.php"
+  Write-Host ">> Running $SuiteName suite ($Rounds rounds)" -ForegroundColor Cyan
+  Add-Content -Path $logFile -Value "===== $SuiteName =====" -Encoding UTF8
+
+  # Windows PowerShell wraps native stderr as ErrorRecord objects. With the
+  # script-wide Stop preference, a failing suite used to abort this runner
+  # before the exit code, remaining suites, and JSON summary were recorded.
+  $previousErrorActionPreference = $ErrorActionPreference
+  try {
+    $ErrorActionPreference = "Continue"
+    & php $testScript $Rounds $SuiteName 2>&1 | ForEach-Object {
+      $line = [string]$_
+      Write-Host $line
+      Add-Content -Path $logFile -Value $line -Encoding UTF8
+    }
+    $exitCode = $LASTEXITCODE
+  } finally {
+    $ErrorActionPreference = $previousErrorActionPreference
+  }
+  Add-Content -Path $logFile -Value "" -Encoding UTF8
+
+  return [PSCustomObject]@{
+    suite = $SuiteName
+    requestedRounds = $Rounds
+    exitCode = $exitCode
+    completedAt = (Get-Date).ToString("s")
+  }
+}
+
+$summary = @()
+foreach ($suite in @("agent", "image", "llm")) {
+  $summary += Invoke-StabilitySuite -SuiteName $suite
+}
+
+$summary | ConvertTo-Json -Depth 4 | Set-Content -Path $summaryFile -Encoding UTF8
+$failedSuites = @($summary | Where-Object { $_.exitCode -ne 0 })
+if ($failedSuites.Count -gt 0) {
+  Write-Error "Stability run failed in $($failedSuites.Count) suite(s). Log: $logFile"
+  exit 1
+}
+
+Write-Host ">> Stability suites completed. Log: $logFile" -ForegroundColor Green
+} finally {
+  if ($ownsMutex) {
+    $mutex.ReleaseMutex()
+  }
+  $mutex.Dispose()
+}