From 77f6346f3f1d74f9da918ee89485d96dc32a2ccb Mon Sep 17 00:00:00 2001
From: ddCat <2695092045@qq.com>
Date: Wed, 16 Sep 2026 23:45:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(agent):=20Agent=20=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=20-=20=E5=A4=8D=E7=94=A8=E5=88=9B=E9=80=A0?=
 =?UTF-8?q?=E9=A1=B5=E9=80=89=E6=8B=A9=E5=99=A8=E5=B9=B6=E5=8F=AA=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E6=96=87=E6=9C=AC=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/content/docs/progress/pending-test.mdx   |  6 +++++
 .../canvas/canvas-cloud-agent-panel.tsx       | 11 +++++---
 .../canvas/canvas-cloud-agent-settings.tsx    |  2 +-
 .../components/canvas/canvas-cloud-agent.css  |  5 ++++
 web/src/styles/workspace-product.css          |  2 +-
 web/test/agent-model-picker.test.ts           | 27 +++++++++++++++++++
 6 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 web/test/agent-model-picker.test.ts

diff --git a/docs/content/docs/progress/pending-test.mdx b/docs/content/docs/progress/pending-test.mdx
index a842e71a7..2d0fc3fdb 100644
--- a/docs/content/docs/progress/pending-test.mdx
+++ b/docs/content/docs/progress/pending-test.mdx
@@ -5,6 +5,12 @@ description: 当前项目已实现功能的手工验证清单与未确认边界
 
 # 待测试
 
+## Agent 对话模型选择器复用创造页样式
+
+- Agent 底部 Composer 与设置页「对话模型」改为复用画布节点 / 创造页的 `ModelPicker` `variant="creation"`：先选品牌、再选模型，不再把品牌挤成一行。
+- 目录只展示文本模型；图片、视频、音频模型不进入 Agent 对话选择。当前选中若不是文本模型，回退到第一个可用文本模型。
+- 待登录后打开画布 Agent：核对品牌列表为纵向卡片、点入后出现双栏模型列表且高度跟品牌列表走、不再被 300px 最小高度撑空；设置页同样；深浅主题与窄面板不裁切。
+
 ## 设置页页头与生成偏好精简
 
 - 设置页去掉「创作偏好 / 配置默认模型、生成参数和素材存储。」页头；仅在 `?continue=1` 时保留返回创作按钮。
diff --git a/web/src/components/canvas/canvas-cloud-agent-panel.tsx b/web/src/components/canvas/canvas-cloud-agent-panel.tsx
index 297c1dd17..f72038b01 100644
--- a/web/src/components/canvas/canvas-cloud-agent-panel.tsx
+++ b/web/src/components/canvas/canvas-cloud-agent-panel.tsx
@@ -21,7 +21,7 @@ import type { AgentMediaSettings } from "@/services/api/agent";
 import { CanvasAgentImageApprovalSettings } from "./canvas-agent-image-approval-settings";
 import { addSkill, listAddedSkills, listSkills, type Skill, type SkillCategory } from "@/services/api/skills";
 import { clearCloudAgentPendingSubmission, cloudAgentConversationTitle, loadCloudAgentConversations, loadCloudAgentPendingSubmission, saveCloudAgentConversations, saveCloudAgentPendingSubmission, type CloudAgentConversation, type CloudAgentPendingSubmission } from "@/services/cloud-agent-conversations";
-import { logicalModelIDForConfig, modelOptionName, resolveModelRequestConfig, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
+import { logicalModelIDForConfig, modelOptionName, resolveModelRequestConfig, selectableModelsByCapability, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
 import { useActiveTheme } from "@/stores/canvas/use-canvas-theme-store";
 import { applyAgentCanvasPatches, refreshCanvasAfterAgent, saveRemoteUserDataNow } from "@/services/user-data-sync";
 import { createAgentCanvasSync } from "@/services/agent-canvas-sync";
@@ -99,7 +99,11 @@ export function CanvasCloudAgentPanel({ canvasId, domainProjectId, nodeCount, re
     const currentScope = useRef(conversationScope);
     currentScope.current = conversationScope;
     const running = Boolean(run?.cleanupPending) || run?.status === "running" || run?.status === "queued" || run?.status === "waiting_approval";
-    const selectedModel = config.textModel || config.model || "";
+    const selectedModel = useMemo(() => {
+        const textModels = selectableModelsByCapability(config, "text");
+        const preferred = config.textModel || config.model || "";
+        return textModels.includes(preferred) ? preferred : (textModels[0] || "");
+    }, [config]);
     const reasoningSupported = Boolean(modelCapabilityConfigFor(config, selectedModel).text?.thinking);
     useEffect(() => { if (!reasoningSupported && reasoningMode !== "off") setReasoningMode("off"); }, [reasoningSupported, reasoningMode]);
     const installedSkills = useMemo(() => skills.filter((skill) => skill.isAdded), [skills]);
@@ -946,11 +950,12 @@ function ComposerControls({
                 value={selectedModel}
                 capability="text"
                 onChange={onModelChange}
+                variant="creation"
                 className="!h-8 !min-w-0 !w-36 !max-w-full !border-0 !bg-transparent !px-1.5 !shadow-none"
                 popoverClassName="agent-model-picker-popover"
                 showSelectedPrice={false}
                 showOptionPrices
-                placeholder="选择模型"
+                placeholder="选择文本模型"
             />
             {reasoningSupported ? <Dropdown trigger={["click"]} placement="topLeft" menu={{ items: reasoningMenuItems(reasoningMode, onReasoningModeChange) }}>
                 <button type="button" aria-label="选择 Agent 推理模式" title="推理模式：只用于规划和工具选择" className="flex h-8 shrink-0 items-center gap-1 rounded-md px-2 text-[11px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/25" style={{ color: reasoningMode === "off" ? theme.node.muted : theme.accent.primary, background: reasoningMode === "off" ? "transparent" : theme.node.fill }}>
diff --git a/web/src/components/canvas/canvas-cloud-agent-settings.tsx b/web/src/components/canvas/canvas-cloud-agent-settings.tsx
index 5a54297e8..01b94f366 100644
--- a/web/src/components/canvas/canvas-cloud-agent-settings.tsx
+++ b/web/src/components/canvas/canvas-cloud-agent-settings.tsx
@@ -102,7 +102,7 @@ function SettingsHome({ props, theme, onOpen }: { props: AgentSettingsProps; the
             <section>
                 <SettingLabel label="对话模型" hint="新运行生效" />
                 <div className="min-w-0 rounded-xl px-2 py-1.5" style={{ background: theme.node.fill }}>
-                    <ModelPicker config={props.config} value={props.selectedModel} capability="text" onChange={props.onModelChange} fullWidth showSelectedPrice showOptionPrices placeholder="选择 Agent 模型" className="!border-0 !bg-transparent !shadow-none" />
+                    <ModelPicker config={props.config} value={props.selectedModel} capability="text" onChange={props.onModelChange} variant="creation" fullWidth showSelectedPrice showOptionPrices placeholder="选择文本模型" className="!border-0 !bg-transparent !shadow-none" popoverClassName="agent-model-picker-popover" />
                 </div>
             </section>
             <section>
diff --git a/web/src/components/canvas/canvas-cloud-agent.css b/web/src/components/canvas/canvas-cloud-agent.css
index dd8de3a59..f3edc8ce4 100644
--- a/web/src/components/canvas/canvas-cloud-agent.css
+++ b/web/src/components/canvas/canvas-cloud-agent.css
@@ -3,6 +3,11 @@
     overscroll-behavior: contain;
 }
 
+/* Agent 浮窗高于普通画布层，模型菜单必须叠在对话窗之上。 */
+.agent-model-picker-popover {
+    z-index: calc(var(--z-modal-overlay) + 1000) !important;
+}
+
 /* Flex 子页必须允许收缩，长模型名和 Skill 文案不能决定窗口宽度。 */
 .canvas-agent-panel > div,
 .canvas-agent-settings,
diff --git a/web/src/styles/workspace-product.css b/web/src/styles/workspace-product.css
index 726889abb..735ff06ee 100644
--- a/web/src/styles/workspace-product.css
+++ b/web/src/styles/workspace-product.css
@@ -563,7 +563,7 @@
 
 .creation-model-picker-surface .creation-model-picker-menu.is-brand-list { width: min(360px, calc(100vw - 24px)) !important; }
 .creation-model-picker-surface .creation-model-picker-menu.is-model-list { width: min(720px, calc(100vw - 24px)) !important; }
-.creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-two-pane { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; min-height: 300px; }
+.creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-two-pane { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; min-height: 0; align-items: start; }
 .creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand-rail { display: grid; align-content: start; gap: 5px; border-right: 1px solid var(--workspace-border); padding-right: 14px; }
 .creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand { width: 100%; }
 .creation-model-picker-surface .creation-model-picker-menu.is-model-list .canvas-model-picker-brand.is-active { border-color: var(--workspace-border); background: var(--workspace-surface-hover); }
diff --git a/web/test/agent-model-picker.test.ts b/web/test/agent-model-picker.test.ts
new file mode 100644
index 000000000..1d06aa437
--- /dev/null
+++ b/web/test/agent-model-picker.test.ts
@@ -0,0 +1,27 @@
+import { expect, test } from "bun:test";
+
+test("Agent 对话和设置复用创作页模型选择器，并且只展示文本模型", async () => {
+    const panel = await Bun.file(new URL("../src/components/canvas/canvas-cloud-agent-panel.tsx", import.meta.url)).text();
+    const settings = await Bun.file(new URL("../src/components/canvas/canvas-cloud-agent-settings.tsx", import.meta.url)).text();
+    const css = await Bun.file(new URL("../src/components/canvas/canvas-cloud-agent.css", import.meta.url)).text();
+    const pickerCss = await Bun.file(new URL("../src/styles/workspace-product.css", import.meta.url)).text();
+
+    expect(panel).toContain('capability="text"');
+    expect(panel).toContain('variant="creation"');
+    expect(panel).toContain('popoverClassName="agent-model-picker-popover"');
+    expect(panel).toContain('selectableModelsByCapability(config, "text")');
+    expect(panel).toContain('placeholder="选择文本模型"');
+
+    expect(settings).toContain('capability="text"');
+    expect(settings).toContain('variant="creation"');
+    expect(settings).toContain('popoverClassName="agent-model-picker-popover"');
+    expect(settings).toContain('placeholder="选择文本模型"');
+
+    expect(css).toContain(".agent-model-picker-popover");
+    expect(css).toContain("z-index: calc(var(--z-modal-overlay) + 1000)");
+
+    const twoPane = pickerCss.match(/\.creation-model-picker-menu\.is-model-list \.canvas-model-picker-two-pane \{[^}]+\}/)?.[0] || "";
+    expect(twoPane).toContain("min-height: 0");
+    expect(twoPane).toContain("align-items: start");
+    expect(twoPane).not.toContain("min-height: 300px");
+});