dsh-cliproxyapi-pro 1.7.0 → 1.8.0

package/lib/client.js

@@ -22,6 +22,7 @@ window.__ModuleLoader__.load({
       save: "api/dsh-cliproxyapi/save",
       addAccount: "api/dsh-cliproxyapi/accounts/add",
       removeAccount: "api/dsh-cliproxyapi/accounts/remove",
+      testAccount: "api/dsh-cliproxyapi/accounts/test",
       updateStatus: "api/dsh-cliproxyapi/updates/status",
       updateCheck: "api/dsh-cliproxyapi/updates/check",
       updateSave: "api/dsh-cliproxyapi/updates/save",
@@ -29,6 +30,14 @@ window.__ModuleLoader__.load({
       quotaStatus: "api/dsh-cliproxyapi/quota/status",
       quotaRefresh: "api/dsh-cliproxyapi/quota/refresh",
       quotaSave: "api/dsh-cliproxyapi/quota/save",
+      mediaStatus: "api/dsh-cliproxyapi/media/status",
+      mediaSave: "api/dsh-cliproxyapi/media/save",
+      mediaDiagnose: "api/dsh-cliproxyapi/media/diagnose",
+      mediaSession: "api/dsh-cliproxyapi/media/session",
+      mediaSessionSave: "api/dsh-cliproxyapi/media/session/save",
+      mediaFile: "api/dsh-cliproxyapi/media/file",
+      mediaCommand: "api/dsh-cliproxyapi/media/command",
+      mediaConfirm: "api/dsh-cliproxyapi/media/confirm",
     };
 
     // Public, versioned dshmarket Update API (UPDATE-API-V1.md in dshmarket).
@@ -350,6 +359,192 @@ window.__ModuleLoader__.load({
       secondsUnit: "秒 · 所有账号共用",
       paramsHintShort: "修改后点底部「保存并应用」生效。",
       qProviderOther: "其他",
+      tabMedia: "生成",
+      mediaIntro: "该账号 CPA 上识别为生图 / 生视频的模型。它们由 CPA 的图片和视频接口提供，不会出现在对话模型选择器中。下面的修改会立即保存。",
+      mediaLoading: "正在读取生成模型…",
+      mediaLoadError: "无法读取生成模型：{error}",
+      mediaImageGroup: "生图模型",
+      mediaVideoGroup: "生视频模型",
+      mediaNone: "该账号的模型目录里没有识别到生图或生视频模型。",
+      mediaNoCatalog: "还没有读取到该账号的模型目录。请先在「连接」页连接 CPA，或从标题右侧的 ⋯ 菜单立即探测。",
+      mediaEnabledLabel: "提供 {model} 用于生成",
+      mediaKindFor: "{model} 的类型",
+      mediaKindLabel: "类型",
+      mediaKindImage: "生图",
+      mediaKindVideo: "生视频",
+      mediaKindChat: "对话模型",
+      mediaDetectedTag: "自动识别",
+      mediaOverriddenTag: "手动指定",
+      mediaResetKind: "恢复自动识别",
+      mediaAliasTag: "→ {target}",
+      mediaAliasHint: "CPA 会把这个模型 id 改写为 {target} 调用。",
+      mediaMovedTitle: "已改为对话模型",
+      mediaMovedHint: "这些模型被自动识别为生成模型，但你把它们改成了对话模型，因此出现在「模型」页。",
+      mediaMarkTitle: "把其他模型标记为生成模型",
+      mediaMarkHint: "自动识别漏掉时使用。标记后，该模型会离开「模型」页和对话模型选择器。",
+      mediaMarkSelect: "选择模型…",
+      mediaMarkBtn: "标记",
+      mediaSaved: "已保存",
+      mediaKindSaved: "已保存，对话模型选择器已重新同步",
+      mediaSettingsInvalid: "media-settings.json 无法读取，当前使用默认设置；下次保存时会把损坏的文件另存一份。",
+      mediaErrInvalidAccount: "账号不存在或已删除，请刷新页面。",
+      mediaErrInvalidRequest: "请求无效，请刷新页面后重试。",
+      mediaErrNoEndpoint: "该账号还没有可用的服务地址，请先在「连接」页连接 CPA。",
+      mediaErrGeneric: "操作失败：{error}",
+      diagTitle: "只读诊断",
+      diagHint: "只发送 GET 请求：用该账号的 Key 读取两份模型目录；再不带 Key 探测两个视频接口是否存在（存在的接口会直接返回 401）。不会生成内容，也不会消耗额度。如果 CPA 没有要求 Key，探测会用一个不存在的任务 id 查询一次，仍是只读请求。",
+      diagRun: "运行诊断",
+      diagRunning: "正在诊断…",
+      diagNoKey: "该账号没有配置 API Key，模型目录可能读取失败。",
+      diagEnriched: "模型目录（client_version=pi）",
+      diagListing: "模型列表（/v1/models）",
+      diagCatalogOk: "共 {n} 个模型，其中 {m} 个疑似生成模型",
+      diagCatalogFail: "读取失败（{reason}）",
+      diagRoutes: "视频接口",
+      diagPresent: "存在",
+      diagMissing: "不存在（CPA 版本可能较旧）",
+      diagUnknown: "无法判断（HTTP {status}）",
+      diagUnreachable: "无法连接",
+      diagRaw: "完整结果（JSON，不含 Key）",
+      diagCopy: "复制结果",
+      diagCopied: "已复制",
+      mediaChipLabel: "生图模型：{model}",
+      mediaChipChoose: "选择生图模型",
+      mediaChipTitle: "生成模型",
+      mediaChipHint: "输入 /cpa-image 加提示词生成图片；附带图片即可改图。",
+      mediaChipVideoHint: "输入 /cpa-video 加提示词生成视频；可附带一张首帧图，提交后无法取消。",
+      mediaChipHintBoth: "/cpa-image 生成图片（附带图片即可改图）；/cpa-video 生成视频（可附带一张首帧图，提交后无法取消）。",
+      mediaChipVideoLabel: "生视频模型：{model}",
+      mediaChipVideoChoose: "选择生视频模型",
+      mediaChipJoin: "；",
+      mediaChipInherited: "本会话还没有单独选择，正在沿用上一次的选择。",
+      mediaAgentSettings: "agent 生成设置",
+      mediaBack: "返回",
+      mediaActOpen: "用默认应用打开",
+      mediaActReveal: "显示文件位置",
+      mediaActRevealExplorer: "在文件资源管理器中显示",
+      mediaActRevealFinder: "在访达中显示",
+      mediaActRevealFiles: "在文件管理器中显示",
+      mediaActOpenWith: "用 {app} 打开",
+      mediaActOpenWithDefault: "用 {app} 打开（默认）",
+      mediaActAppsLoading: "正在读取可用的应用…",
+      mediaActOpenFolder: "打开文件夹",
+      mediaActCopyImage: "复制图片",
+      mediaActCopyPath: "复制文件路径",
+      mediaActCopied: "已复制",
+      mediaActOpenFailed: "DSH 没能打开这个路径。",
+      mediaActCopyFailed: "复制失败：{error}",
+      mediaActMenu: "图片操作",
+      mediaActMore: "更多操作",
+      mediaClosePreview: "收起",
+      mediaPickFailed: "无法切换模型：{error}",
+      mediaOutputTitle: "保存位置",
+      mediaVideoDefaults: "视频默认值",
+      mediaVideoDefaultsHint: "/cpa-video 没有写 -s / -r 时使用的时长和分辨率。所有账号共用。视频按秒计费，提交后无法取消。",
+      mediaVideoSeconds: "时长",
+      mediaVideoResolution: "分辨率",
+      mediaSecondsOption: "{n} 秒",
+      mediaOutputHint: "生成的文件保存在这里。相对路径以会话的工作目录为基准，也可以填写绝对路径。所有账号共用。",
+      mediaOutputSave: "保存",
+      mediaErrInvalidOutputDir: "保存位置无效：不能为空、不能含控制字符，且不超过 260 个字符。",
+      mediaErrInvalidModel: "该模型已不可用，请刷新后重试。",
+      mediaErrInvalidSession: "会话无效，请刷新页面。",
+      mediaCardSubmitting: "正在提交…",
+      mediaCardRunning: "正在生成 · {time}",
+      mediaCardEditing: "正在改图 · {time}",
+      mediaCardVideoQueued: "排队中 · {time}",
+      mediaCardVideoProgress: "正在生成 {progress}% · {time}",
+      mediaCardVideoSaving: "正在保存视频 · {time}",
+      mediaCardVideoNoStop: "视频提交后无法取消，会照常计费；可以继续对话。重载插件或重启 DSH（3 小时内）后会继续等待并保存。",
+      mediaCardFirstFrame: "首帧图",
+      mediaModeReference: "参考图 ×{n}",
+      mediaModeFirstLast: "首尾帧",
+      mediaModeLastFrame: "尾帧",
+      mediaModeEdit: "编辑视频",
+      mediaModeExtend: "延长 +{n} 秒",
+      mediaEditOpen: "编辑视频…",
+      mediaExtendOpen: "延长视频…",
+      mediaEditPlaceholder: "要怎么改？例如：把衣服换成红色，其他保持不变",
+      mediaExtendPlaceholder: "接下来发生什么？例如：她转身走出画面",
+      mediaExtendSeconds: "延长时长",
+      mediaEditSubmit: "提交编辑",
+      mediaExtendSubmit: "提交延长",
+      mediaEditCancel: "取消",
+      mediaEditNote: "使用 grok-imagine-video，结果出现在对话下方新的一行；提交后无法取消，会照常计费。约 1 小时内直接用 xAI 的视频链接，之后把本地文件随请求发送。",
+      mediaSourceTag: "源：{name}",
+      mediaCopyInput: "复制原始输入",
+      mediaLocale: "zh",
+      mediaConfirmWaiting: "等待你确认",
+      mediaConfirmTitle: "agent 想生成图片",
+      mediaConfirmTitleVideo: "agent 想生成视频",
+      mediaConfirmAllow: "允许生成",
+      mediaConfirmDecline: "拒绝",
+      mediaConfirmNote: "确认前不会提交生成。10 分钟内没有回答视为不同意；可在生成设置里调整本会话的确认方式。",
+      mediaConfirmDeliveryFailed: "回答未送达，请重试；生成尚未获准。",
+      mediaConfirmAllowed: "已允许，开始生成",
+      mediaConfirmDeclined: "已拒绝",
+      mediaConfirmFailed: "没有送达：{error}",
+      mediaAgentTitle: "允许 agent 生成图片 / 视频",
+      mediaAgentHint: "打开后，对话里的 agent 可以调用 generate_media 工具，用上面启用的生成模型生图、生视频、编辑或延长视频，文件保存到会话工作目录下的保存位置。关闭时不注册这个工具，不占用上下文。斜杠命令和输入框旁的按钮不受影响。",
+      mediaAgentOnNote: "已开启：agent 可以调用 generate_media。确认方式和秒数上限可在输入框旁的生成按钮里按会话单独修改。",
+      mediaAgentOffNote: "已关闭：agent 看不到生成工具。",
+      mediaVideoConfirm: "agent 生成视频时",
+      mediaImageConfirm: "agent 生成图片时",
+      mediaConfirmAsk: "每次先问我",
+      mediaConfirmAuto: "直接生成",
+      mediaVideoBudget: "每个会话的 agent 视频上限",
+      mediaVideoBudgetHint: "按视频秒数累计（子 agent 计入所属会话）。只在「直接生成」时拦截超出上限的视频；「每次先问我」时只计数，确认框里会显示已用秒数。修改上限或改为直接生成时重新计数。你手动用 /cpa-video 不计数。",
+      mediaBudgetSeconds: "{n} 秒",
+      mediaBudgetUnlimited: "不限",
+      mediaFollowGlobal: "跟随全局（{value}）",
+      mediaAgentSection: "本会话的 agent 生成",
+      mediaAgentUsed: "本会话 agent 已用视频 {used} / {limit} 秒",
+      mediaAgentUsedUnlimited: "本会话 agent 已用视频 {used} 秒（不限）",
+      mediaCardInterpreting: "正在理解参数 · {time}",
+      mediaInterpreted: "参数由 {by} 从提示词中读出：{items}",
+      mediaInterpretedNone: "{by} 没有从提示词中读出其他参数",
+      mediaInterpretFailed: "参数解读失败（{by}），按命令里的选项和原文发送",
+      mediaInterpretedPrompt: "；已从提示词中去掉这些参数的说法",
+      mediaSentText: "模式：纯文字生成（没有附带图片）",
+      mediaSentFirstFrame: "模式：首帧 — 附带的图片就是视频的第一帧",
+      mediaSentReference: "模式：参考图 ×{n} — 带入图中的人物、服装、物品，不锁定第一帧",
+      mediaSentFirstLast: "模式：首尾帧 — 第 1 张图是第一帧，第 2 张图是最后一帧",
+      mediaSentLastFrame: "模式：尾帧 — 视频最后停在附带的图片上",
+      mediaSentEdit: "模式：编辑视频（grok-imagine-video）— 原视频：{source}",
+      mediaSentExtend: "模式：延长 +{n} 秒（grok-imagine-video）— 原视频：{source}",
+      mediaSentImageText: "模式：文生图",
+      mediaSentImageEdit: "模式：改图 — {n} 张附带图片作为参考",
+      mediaSourceUpload: "上传本地文件 {name}",
+      mediaSourceUrl: "公开链接（{name}），由 xAI 下载",
+      mediaSourceLink: "本会话生成的视频（xAI 结果链接）",
+      mediaSourceSession: "本会话生成的视频",
+      mediaIgnoredTag: "已忽略 {words}（编辑 / 延长沿用原视频的设置）",
+      mediaCopiedInput: "已复制原始输入",
+      mediaEditSubmitted: "已提交，结果见对话下方新的一行。",
+      mediaEditFailed: "提交失败。",
+      mediaDurationS: "{s} 秒",
+      mediaDurationMS: "{m} 分 {s} 秒",
+      mediaCardNoStop: "生成开始后无法中途停止；可以继续对话，完成后图片会出现在这里。",
+      mediaCardDone: "用时 {time} · 已保存到 {folder}",
+      mediaCardDoneShort: "已完成",
+      mediaCardFailed: "生成失败",
+      mediaCardMissing: "图片文件已移动或删除，或已超出每个会话保留的最近 48 条生成记录。",
+      mediaCardDetails: "详情",
+      mediaCardFiles: "文件",
+      mediaCardFolder: "保存目录",
+      mediaCardRevised: "上游改写后的提示词",
+      mediaCardImage: "图片 {n}",
+      mediaCardCount: "{n} 张",
+      mediaCardRefs: "{n} 张参考图",
+      mediaRunErrInterrupted: "插件重新加载或 DSH 关闭，生成已中断。",
+      mediaRunErrTimeout: "CPA 在 3 分钟内没有返回结果。",
+      mediaRunErrNetwork: "无法连接 CPA。",
+      mediaRunErrNoImage: "CPA 没有返回图片。",
+      mediaRunErrInvalid: "CPA 返回的数据不是 PNG、JPEG、WebP 或 GIF 图片。",
+      mediaRunErrWrite: "无法写入文件。",
+      mediaRunErrExpired: "CPA 已不再记得这个视频：提交已超过 3 小时。",
+      mediaRunErrInvalidVideo: "CPA 返回的数据不是 MP4、MOV 或 WebM 视频。",
+      mediaRunErrVideoTooLarge: "视频超过 200 MiB，未保存。",
     };
 
     const en = {
@@ -660,6 +855,192 @@ window.__ModuleLoader__.load({
       secondsUnit: "s · all accounts",
       paramsHintShort: "Click Save & Apply at the bottom to apply changes.",
       qProviderOther: "Other",
+      tabMedia: "Generation",
+      mediaIntro: "Models on this account's CPA recognized as image or video generators. CPA serves them through its image and video endpoints, so they never appear in the chat model picker. Changes here are saved at once.",
+      mediaLoading: "Loading generation models…",
+      mediaLoadError: "Could not load generation models: {error}",
+      mediaImageGroup: "Image models",
+      mediaVideoGroup: "Video models",
+      mediaNone: "No image or video models were recognized in this account's catalog.",
+      mediaNoCatalog: "This account's catalog has not been read yet. Connect CPA on the Connection tab, or probe now from the ⋯ menu next to the title.",
+      mediaEnabledLabel: "Offer {model} for generation",
+      mediaKindFor: "Kind of {model}",
+      mediaKindLabel: "Kind",
+      mediaKindImage: "Image",
+      mediaKindVideo: "Video",
+      mediaKindChat: "Chat model",
+      mediaDetectedTag: "Detected",
+      mediaOverriddenTag: "Set by you",
+      mediaResetKind: "Use detected kind",
+      mediaAliasTag: "→ {target}",
+      mediaAliasHint: "CPA rewrites this model id and calls {target}.",
+      mediaMovedTitle: "Changed to chat models",
+      mediaMovedHint: "These models were detected as media models, but you changed them to chat models, so they appear on the Models tab.",
+      mediaMarkTitle: "Mark another model as a media model",
+      mediaMarkHint: "For models detection missed. A marked model leaves the Models tab and the chat model picker.",
+      mediaMarkSelect: "Choose a model…",
+      mediaMarkBtn: "Mark",
+      mediaSaved: "Saved",
+      mediaKindSaved: "Saved; the chat model picker was re-synchronized",
+      mediaSettingsInvalid: "media-settings.json is unreadable; defaults apply. The next save keeps a copy of the damaged file.",
+      mediaErrInvalidAccount: "The account does not exist or was removed. Refresh the page.",
+      mediaErrInvalidRequest: "Invalid request. Refresh the page and try again.",
+      mediaErrNoEndpoint: "This account has no usable server address yet. Connect CPA on the Connection tab first.",
+      mediaErrGeneric: "Failed: {error}",
+      diagTitle: "Read-only diagnostic",
+      diagHint: "Sends GET requests only: reads both model catalogs with this account's key, then probes two video routes without the key (a route that exists answers 401 at once). Generates nothing and spends no quota. If CPA does not require a key, the probe looks up one nonexistent job id, which is still read-only.",
+      diagRun: "Run diagnostic",
+      diagRunning: "Diagnosing…",
+      diagNoKey: "This account has no API key; reading the catalogs may fail.",
+      diagEnriched: "Catalog (client_version=pi)",
+      diagListing: "Listing (/v1/models)",
+      diagCatalogOk: "{n} models, {m} look like media models",
+      diagCatalogFail: "Failed ({reason})",
+      diagRoutes: "Video routes",
+      diagPresent: "Present",
+      diagMissing: "Missing (CPA may be outdated)",
+      diagUnknown: "Undetermined (HTTP {status})",
+      diagUnreachable: "Unreachable",
+      diagRaw: "Full result (JSON, no keys)",
+      diagCopy: "Copy result",
+      diagCopied: "Copied",
+      mediaChipLabel: "Image model: {model}",
+      mediaChipChoose: "Choose image model",
+      mediaChipTitle: "Generation models",
+      mediaChipHint: "Type /cpa-image followed by a prompt to generate an image; attach images to edit them.",
+      mediaChipHintBoth: "/cpa-image generates images (attach images to edit them); /cpa-video generates a video (attach one image as the first frame; a submitted video cannot be cancelled).",
+      mediaChipVideoLabel: "Video model: {model}",
+      mediaChipVideoChoose: "Choose video model",
+      mediaChipJoin: "; ",
+      mediaChipInherited: "No pick for this session yet; your last pick is used.",
+      mediaChipVideoHint: "Type /cpa-video followed by a prompt to generate a video; you can attach one image as the first frame. A submitted video cannot be cancelled.",
+      mediaAgentSettings: "Agent generation settings",
+      mediaBack: "Back",
+      mediaActOpen: "Open with default app",
+      mediaActReveal: "Show file location",
+      mediaActRevealExplorer: "Show in File Explorer",
+      mediaActRevealFinder: "Show in Finder",
+      mediaActRevealFiles: "Show in Files",
+      mediaActOpenWith: "Open with {app}",
+      mediaActOpenWithDefault: "Open with {app} (default)",
+      mediaActAppsLoading: "Looking up applications…",
+      mediaActOpenFolder: "Open folder",
+      mediaActCopyImage: "Copy image",
+      mediaActCopyPath: "Copy file path",
+      mediaActCopied: "Copied",
+      mediaActOpenFailed: "DSH could not open this path.",
+      mediaActCopyFailed: "Copy failed: {error}",
+      mediaActMenu: "Image actions",
+      mediaActMore: "More actions",
+      mediaClosePreview: "Close",
+      mediaPickFailed: "Could not switch the model: {error}",
+      mediaOutputTitle: "Save location",
+      mediaVideoDefaults: "Video defaults",
+      mediaVideoDefaultsHint: "Length and resolution /cpa-video uses when -s / -r are not given. Shared by all accounts. Videos are billed by the second and cannot be cancelled once submitted.",
+      mediaVideoSeconds: "Length",
+      mediaVideoResolution: "Resolution",
+      mediaSecondsOption: "{n} s",
+      mediaOutputHint: "Generated files are saved here. A relative path is resolved against the session's working directory; an absolute path also works. Shared by all accounts.",
+      mediaOutputSave: "Save",
+      mediaErrInvalidOutputDir: "Invalid save location: it must not be empty, must not contain control characters and is at most 260 characters.",
+      mediaErrInvalidModel: "That model is no longer available. Refresh and try again.",
+      mediaErrInvalidSession: "Invalid session. Refresh the page.",
+      mediaCardSubmitting: "Submitting…",
+      mediaCardRunning: "Generating · {time}",
+      mediaCardEditing: "Editing · {time}",
+      mediaCardVideoQueued: "Queued · {time}",
+      mediaCardVideoProgress: "Generating {progress}% · {time}",
+      mediaCardVideoSaving: "Saving the video · {time}",
+      mediaCardVideoNoStop: "A submitted video cannot be cancelled and is billed as usual; you can keep chatting. After a plugin reload or a DSH restart (within 3 hours) it is still awaited and saved.",
+      mediaCardFirstFrame: "first frame",
+      mediaModeReference: "references ×{n}",
+      mediaModeFirstLast: "first & last frame",
+      mediaModeLastFrame: "last frame",
+      mediaModeEdit: "video edit",
+      mediaModeExtend: "extend +{n} s",
+      mediaEditOpen: "Edit video…",
+      mediaExtendOpen: "Extend video…",
+      mediaEditPlaceholder: "What should change? e.g. make the dress red, keep everything else",
+      mediaExtendPlaceholder: "What happens next? e.g. she turns and walks out of frame",
+      mediaExtendSeconds: "Extension length",
+      mediaEditSubmit: "Submit edit",
+      mediaExtendSubmit: "Submit extension",
+      mediaEditCancel: "Cancel",
+      mediaEditNote: "Uses grok-imagine-video; the result appears in a new row below. A submitted video cannot be cancelled and is billed as usual. For about an hour xAI's own video link is used; after that the local file is sent with the request.",
+      mediaSourceTag: "source: {name}",
+      mediaCopyInput: "Copy original input",
+      mediaLocale: "en",
+      mediaConfirmWaiting: "Waiting for your confirmation",
+      mediaConfirmTitle: "The agent wants to generate images",
+      mediaConfirmTitleVideo: "The agent wants to generate a video",
+      mediaConfirmAllow: "Allow",
+      mediaConfirmDecline: "Decline",
+      mediaConfirmNote: "Nothing is submitted before confirmation. No answer within 10 minutes counts as declined; change this session's confirmation mode in generation settings.",
+      mediaConfirmDeliveryFailed: "Answer not delivered. Retry; generation has not been approved.",
+      mediaConfirmAllowed: "Allowed; generating",
+      mediaConfirmDeclined: "Declined",
+      mediaConfirmFailed: "Not delivered: {error}",
+      mediaAgentTitle: "Let the agent generate images / videos",
+      mediaAgentHint: "When on, the chat agent can call the generate_media tool to generate images and videos, or edit / extend videos, with the generation models enabled above; files go to the save location under the session's working directory. When off the tool is not registered and takes no context. Slash commands and the composer button work either way.",
+      mediaAgentOnNote: "On: the agent can call generate_media. Confirmation and the seconds limit can be changed per session in the generation button next to the composer.",
+      mediaAgentOffNote: "Off: the agent has no generation tool.",
+      mediaVideoConfirm: "Agent videos",
+      mediaImageConfirm: "Agent images",
+      mediaConfirmAsk: "Ask me each time",
+      mediaConfirmAuto: "Generate directly",
+      mediaVideoBudget: "Agent video limit per session",
+      mediaVideoBudgetHint: "Counted in video seconds (a sub-agent counts against its session). Videos over the limit are refused only when generating directly; when asking, they are counted and the prompt shows the seconds used. Changing the limit or switching to direct generation starts the count again. Your own /cpa-video is not counted.",
+      mediaBudgetSeconds: "{n} s",
+      mediaBudgetUnlimited: "No limit",
+      mediaFollowGlobal: "Follow global ({value})",
+      mediaAgentSection: "Agent generation in this session",
+      mediaAgentUsed: "Agent videos in this session: {used} of {limit} s",
+      mediaAgentUsedUnlimited: "Agent videos in this session: {used} s (no limit)",
+      mediaCardInterpreting: "Reading parameters · {time}",
+      mediaInterpreted: "Parameters {by} read from the prompt: {items}",
+      mediaInterpretedNone: "{by} found no further parameters in the prompt",
+      mediaInterpretFailed: "Reading parameters failed ({by}); sent with the command's options and the prompt as written",
+      mediaInterpretedPrompt: "; the words stating them were taken out of the prompt",
+      mediaSentText: "Mode: text only (no attached images)",
+      mediaSentFirstFrame: "Mode: first frame — the attached image is the video's first frame",
+      mediaSentReference: "Mode: references ×{n} — brings in the people, clothing and objects shown, without fixing the first frame",
+      mediaSentFirstLast: "Mode: first & last frame — image 1 is the first frame, image 2 the last",
+      mediaSentLastFrame: "Mode: last frame — the video ends on the attached image",
+      mediaSentEdit: "Mode: video edit (grok-imagine-video) — source: {source}",
+      mediaSentExtend: "Mode: extend +{n} s (grok-imagine-video) — source: {source}",
+      mediaSentImageText: "Mode: text to image",
+      mediaSentImageEdit: "Mode: image edit — {n} attached image(s) as references",
+      mediaSourceUpload: "uploaded local file {name}",
+      mediaSourceUrl: "public link ({name}), downloaded by xAI",
+      mediaSourceLink: "a video made in this session (xAI result link)",
+      mediaSourceSession: "a video made in this session",
+      mediaIgnoredTag: "ignored {words} (edits / extensions keep the source's settings)",
+      mediaCopiedInput: "Original input copied",
+      mediaEditSubmitted: "Submitted; the result appears in a new row below.",
+      mediaEditFailed: "Could not submit.",
+      mediaDurationS: "{s} s",
+      mediaDurationMS: "{m} min {s} s",
+      mediaCardNoStop: "A started generation cannot be stopped; you can keep chatting, and the images appear here when ready.",
+      mediaCardDone: "{time} · saved to {folder}",
+      mediaCardDoneShort: "Done",
+      mediaCardFailed: "Generation failed",
+      mediaCardMissing: "The image files were moved or deleted, or fell out of the last 48 generation records kept per session.",
+      mediaCardDetails: "Details",
+      mediaCardFiles: "Files",
+      mediaCardFolder: "Folder",
+      mediaCardRevised: "Prompt as rewritten upstream",
+      mediaCardImage: "Image {n}",
+      mediaCardCount: "{n} images",
+      mediaCardRefs: "{n} reference image(s)",
+      mediaRunErrInterrupted: "Stopped because the plugin was reloaded or DSH closed.",
+      mediaRunErrTimeout: "CPA did not answer within 3 minutes.",
+      mediaRunErrNetwork: "Could not reach CPA.",
+      mediaRunErrNoImage: "CPA returned no image.",
+      mediaRunErrInvalid: "CPA returned data that is not a PNG, JPEG, WebP or GIF image.",
+      mediaRunErrWrite: "Could not write the file.",
+      mediaRunErrExpired: "CPA no longer knows this video: more than 3 hours have passed since it was submitted.",
+      mediaRunErrInvalidVideo: "CPA returned data that is not an MP4, MOV or WebM video.",
+      mediaRunErrVideoTooLarge: "The video is larger than 200 MiB and was not saved.",
     };
 
     const CSS = `
@@ -1763,6 +2144,151 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
 .dcpa-models .dcpa-model-row:hover { background: var(--dsw-alias-interactive-bg-hover, transparent); }
 .dcpa-models .dcpa-badge { border: 0; background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2)); border-radius: 999px; padding: 1px 8px; }
 .dcpa-models .dcpa-editor { border-top: 0; padding: 4px 0 6px 25px; }
+/* Generation tab: flat rows without checkboxes, kind select + switch on the right. */
+.dcpa-media .dcpa-model-row { cursor: default; }
+.dcpa-media .dcpa-model-left { flex-wrap: wrap; }
+.dcpa-media-block { display: flex; flex-direction: column; }
+.dcpa-media-group { display: flex; align-items: center; gap: 4px; margin: 12px 0 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--dsw-alias-label-primary); }
+select.dcpa-q-input.dcpa-media-kind { flex: none; width: auto; height: 28px; font-size: 12px; }
+.dcpa-media-card { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 0.5px solid var(--dsw-alias-border-l2); }
+.dcpa-media-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.dcpa-media-diag { display: flex; flex-direction: column; gap: 10px; }
+.dcpa-media-diag-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 18px; }
+.dcpa-media-diag-list { margin: 4px 0 0; padding-left: 16px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
+.dcpa-media-raw > summary { font-size: 12px; color: var(--dsw-alias-label-secondary); cursor: pointer; }
+.dcpa-media-raw { display: flex; flex-direction: column; gap: 6px; }
+/* Generation-model buttons and menus (composer / hero). */
+.dcpa-m-chip-group { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
+.dcpa-m-chip-button { min-width: 0; max-width: 190px; }
+.dcpa-m-chip-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
+.dcpa-m-chip-button[data-compact] { max-width: none; }
+.dcpa-m-chip-part { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
+.dcpa-m-chip-sep { flex: none; width: 1px; height: 14px; background: var(--dsw-alias-border-l1); }
+.dcpa-m-section + .dcpa-m-section { margin-top: 4px; padding-top: 4px; border-top: 0.5px solid var(--dsw-alias-border-l1); }
+.dcpa-m-section-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+.dcpa-m-chip svg { flex: none; }
+.dcpa-m-chip:disabled { cursor: default; opacity: 0.6; }
+.dcpa-m-group { padding: 8px 8px 2px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+.dcpa-m-option { display: flex; align-items: center; gap: 6px; width: 100%; }
+.dcpa-m-option[aria-checked="true"] { font-weight: 500; }
+.dcpa-m-check { width: 14px; flex: none; color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary)); }
+.dcpa-m-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.dcpa-m-link { font-size: 12px; color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary)); }
+.dcpa-m-foot { margin: 6px 4px 4px; padding-top: 6px; border-top: 0.5px solid var(--dsw-alias-border-l1); }
+.dcpa-m-agent-open { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; }
+.dcpa-m-agent-pane { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 8px; }
+.dcpa-m-agent-head { display: flex; align-items: center; gap: 6px; }
+.dcpa-m-back { flex: none; }
+/* /cpa-image chat row: the request as a user bubble, the result as a reply. */
+.dcpa-chat { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 4px 0; }
+.dcpa-chat-user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
+.dcpa-chat-bubble {
+  max-width: min(calc(var(--dsh-chat-content-width, 748px) * 0.702), 82%);
+  padding: 10px 16px;
+  border-radius: var(--dsw-radius-xl, 18px);
+  background: var(--dsw-specific-bubble, var(--dsw-alias-bg-layer-2));
+  color: var(--dsw-alias-label-primary);
+  font-size: var(--dsh-content-font-size, 14px);
+  line-height: calc(22px + var(--dsh-content-font-delta, 0px));
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.dcpa-chat-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-chat-tags button.dcpa-chat-copy { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
+.dcpa-chat-tags button.dcpa-chat-copy:hover { color: var(--dsw-alias-label-secondary, var(--dsw-alias-label-primary)); }
+.dcpa-chat-tags button.dcpa-chat-copy:focus-visible { outline: 2px solid var(--dsw-alias-interactive-focus, var(--dsw-alias-label-secondary)); outline-offset: 2px; border-radius: 2px; }
+.dcpa-chat-reply { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
+.dcpa-chat-head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--dsh-content-font-size-secondary, 13px); line-height: 22px; color: var(--dsw-alias-label-secondary); }
+.dcpa-chat-head svg { flex: none; }
+.dcpa-chat-model { color: var(--dsw-alias-label-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dcpa-media-agent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.dcpa-media-agent-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+.dcpa-media-card[data-agent="off"] .dcpa-media-agent-row { opacity: 0.6; }
+.dcpa-m-policy-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--dsw-alias-label-secondary); }
+.dcpa-m-policy-row select { max-width: 60%; }
+.dcpa-confirm-dock { width: 100%; min-width: 0; color: var(--dsw-alias-label-primary); }
+.dcpa-chat-confirm { margin: 6px 0; padding: 10px 12px; border-radius: var(--dsw-radius-md, 8px); border: 1px solid var(--dsw-alias-border-default, var(--dsw-alias-label-tertiary)); background: var(--dsw-alias-bg-secondary, transparent); }
+.dcpa-chat-confirm-title { margin: 0 0 4px; font-weight: 600; color: var(--dsw-alias-label-primary); }
+.dcpa-chat-confirm-text { margin: 0 0 8px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
+.dcpa-chat-mode { margin: 0; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
+.dcpa-chat-sep { flex: none; width: 2px; height: 2px; border-radius: 1px; background: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-chat-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dcpa-chat-status[data-tone="running"] {
+  background: linear-gradient(90deg, var(--dsw-alias-label-tertiary, #888) 0%, var(--dsw-alias-label-primary, #444) 50%, var(--dsw-alias-label-tertiary, #888) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: dcpa-shimmer 1.6s linear infinite;
+}
+.dcpa-chat-error { margin: 0; font-size: var(--dsh-content-font-size-secondary, 13px); line-height: 20px; color: var(--dsw-alias-state-error-primary); overflow-wrap: anywhere; }
+.dcpa-chat-note { margin: 0; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-chat-grid { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
+.dcpa-chat-thumb {
+  padding: 0;
+  border: 0.5px solid var(--dsw-alias-border-l1);
+  border-radius: var(--dsw-radius-lg, 12px);
+  overflow: hidden;
+  background: var(--dsw-alias-bg-layer-2);
+  cursor: zoom-in;
+  max-width: 100%;
+}
+.dcpa-chat-thumb img { display: block; width: 200px; height: 200px; object-fit: cover; }
+.dcpa-chat-grid[data-count="1"] .dcpa-chat-thumb img { width: auto; height: auto; max-width: min(100%, 420px); max-height: 420px; object-fit: contain; }
+.dcpa-chat-skeleton {
+  width: 200px;
+  max-width: 100%;
+  border-radius: var(--dsw-radius-lg, 12px);
+  background: linear-gradient(90deg, var(--dsw-alias-bg-layer-2) 0%, var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-1)) 50%, var(--dsw-alias-bg-layer-2) 100%);
+  background-size: 200% 100%;
+  animation: dcpa-shimmer 1.6s linear infinite;
+}
+.dcpa-chat-grid[data-count="1"] .dcpa-chat-skeleton { width: 280px; }
+.dcpa-chat[data-kind="video"] .dcpa-chat-skeleton { width: 360px; }
+.dcpa-chat-videos { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
+.dcpa-chat-edit { display: flex; flex-direction: column; gap: 6px; width: min(100%, 560px); }
+.dcpa-chat-edit-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; font: inherit; }
+.dcpa-chat-video { display: block; width: min(100%, 560px); max-height: 480px; border-radius: var(--dsw-radius-lg, 12px); background: var(--dsw-alias-bg-layer-2); }
+.dcpa-media-sublabel { font-size: 12px; color: var(--dsw-alias-label-secondary); }
+.dcpa-media-select { width: auto; min-width: 88px; }
+.dcpa-chat-thumb:focus-visible, .dcpa-chat-full-btn:focus-visible { outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-brand-primary)); outline-offset: 1px; }
+.dcpa-chat-full { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
+.dcpa-chat-full-btn { padding: 0; border: 0; background: transparent; cursor: zoom-out; max-width: 100%; }
+.dcpa-chat-full-btn img { display: block; max-width: min(100%, 720px); max-height: 640px; border-radius: var(--dsw-radius-lg, 12px); }
+.dcpa-q-pop.dcpa-chat-menu { width: 240px; display: flex; flex-direction: column; }
+.dcpa-chat-menu .dcpa-menu-item { width: 100%; text-align: left; }
+.dcpa-chat-menu-item { display: flex; align-items: center; gap: 8px; }
+.dcpa-chat-menu-icon { width: 16px; height: 16px; flex: none; object-fit: contain; }
+.dcpa-chat-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dcpa-chat-menu-sep { height: 0.5px; margin: 4px 6px; background: var(--dsw-alias-border-l1); }
+.dcpa-chat-menu-hint { padding: 4px 8px; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-chat-link { padding: 0; border: 0; background: transparent; font: inherit; text-align: left; color: var(--dsw-alias-state-business-primary, var(--dsw-alias-brand-primary)); cursor: pointer; overflow-wrap: anywhere; }
+.dcpa-chat-link:hover { text-decoration: underline; }
+.dcpa-chat-link:focus-visible { outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-brand-primary)); outline-offset: 1px; }
+.dcpa-chat-files { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
+.dcpa-chat-note[data-tone="error"] { color: var(--dsw-alias-state-error-primary); }
+.dcpa-chat-details > summary { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); cursor: pointer; }
+.dcpa-chat-details dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 4px 0 0; font-size: 12px; line-height: 18px; }
+.dcpa-chat-details dt { color: var(--dsw-alias-label-tertiary, var(--dsw-alias-label-secondary)); }
+.dcpa-chat-details dd { margin: 0; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; white-space: pre-wrap; }
+@keyframes dcpa-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .dcpa-chat-status[data-tone="running"], .dcpa-chat-skeleton { animation: none; }
+}
+.dcpa-media-pre {
+  margin: 6px 0;
+  max-height: 280px;
+  overflow: auto;
+  padding: 8px;
+  border-radius: var(--dsw-radius-sm, 8px);
+  background: var(--dsw-alias-bg-layer-3, var(--dsw-alias-bg-base));
+  color: var(--dsw-alias-label-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  line-height: 16px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
 /* ---- Composer badge: same metrics as the model selector trigger ---- */
 .dcpa-q-wrap { display: inline-flex; align-items: center; flex: none; }
 .dcpa-q-badge {
@@ -1895,9 +2421,10 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
         headers: { "content-type": "application/json" },
         body: JSON.stringify(body ?? {}),
       });
-      const payload = await res.json();
-      if (!res.ok || payload.ok === false) {
-        throw new Error(payload.error || `HTTP ${res.status}`);
+      let payload = null;
+      try { payload = await res.json(); } catch {}
+      if (!res.ok || payload === null || typeof payload !== "object" || payload.ok === false) {
+        throw new Error(payload?.error || `HTTP ${res.status}`);
       }
       return payload;
     }
@@ -2943,6 +3470,11 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
             setNotice({ tone: "ok", text: t("removedToast") });
           });
         },
+        // Fresh account status from another request (a media reclassification
+        // re-synced routes); drafts stay, so `rev` is not bumped.
+        adopt: (payload) => {
+          if (Array.isArray(payload?.accounts)) setData(payload);
+        },
         // Reload the drafts from the saved config.
         discard: () => {
           dirtyRef.current = false;
@@ -3234,11 +3766,16 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
       const effectiveUrl = account.config?.effectiveBaseURL || "";
       const enabled = account.config?.enabled !== false;
 
+      // Chat models only: image / video models live on the Generation tab.
       const allModels = useMemo(() => {
-        if (Array.isArray(st.allModels) && st.allModels.length > 0) return st.allModels;
-        if (Array.isArray(st.models)) return st.models;
-        return [];
+        const list =
+          Array.isArray(st.allModels) && st.allModels.length > 0 ? st.allModels : Array.isArray(st.models) ? st.models : [];
+        return list.filter((m) => (m.kind ?? "chat") === "chat");
       }, [st.allModels, st.models]);
+      const mediaCount = useMemo(
+        () => (Array.isArray(st.allModels) ? st.allModels.filter((m) => m.kind === "image" || m.kind === "video").length : 0),
+        [st.allModels]
+      );
 
       const families = useMemo(() => {
         const counts = new Map();
@@ -3265,6 +3802,12 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
         });
       }, [allModels, search, tabFilter, familyFilter, selectedIds]);
 
+      // A saved selection may still name a model that is now a media model; it
+      // stays saved but is not counted here.
+      const selectedChatCount = useMemo(
+        () => allModels.reduce((n, m) => n + (selectedIds.has(m.id) ? 1 : 0), 0),
+        [allModels, selectedIds]
+      );
       const currentIdsKey = useMemo(() => [...selectedIds].sort().join("\0"), [selectedIds]);
       const currentOverridesKey = useMemo(() => overridesKey(modelOverrides), [modelOverrides]);
       const draftConnection = {
@@ -3385,7 +3928,8 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
 
       const tabs = [
         ["connection", t("tabConnection")],
-        ["models", `${t("tabModels")} ${selectedIds.size}`],
+        ["models", `${t("tabModels")} ${selectedChatCount}`],
+        ["media", mediaCount > 0 ? `${t("tabMedia")} ${mediaCount}` : t("tabMedia")],
         ["quota", quotaFloor === null ? t("tabQuota") : `${t("tabQuota")} ${pctText(quotaFloor)}`],
       ];
 
@@ -3570,7 +4114,7 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
                   "data-active": tabFilter === "selected" ? "true" : "false",
                   onClick: () => setTabFilter("selected"),
                 },
-                `${t("filterSelected")} (${selectedIds.size})`
+                `${t("filterSelected")} (${selectedChatCount})`
               ),
               h(
                 "button",
@@ -3580,7 +4124,7 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
                   "data-active": tabFilter === "unselected" ? "true" : "false",
                   onClick: () => setTabFilter("unselected"),
                 },
-                `${t("filterUnselected")} (${Math.max(0, allModels.length - selectedIds.size)})`
+                `${t("filterUnselected")} (${Math.max(0, allModels.length - selectedChatCount)})`
               )
             ),
             h(
@@ -4008,7 +4552,13 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
         h(
           "div",
           { id: `dcpa-tabpanel-${account.id}-${tab}`, role: "tabpanel", "aria-labelledby": `dcpa-tab-${account.id}-${tab}` },
-          tab === "connection" ? connectionTab : tab === "models" ? modelsTab : h(QuotaPanel, { t, store: sharedQuota, accountId: account.id })
+          tab === "connection"
+            ? connectionTab
+            : tab === "models"
+            ? modelsTab
+            : tab === "media"
+            ? h(MediaPanel, { t, account, onStatus: actions.adopt })
+            : h(QuotaPanel, { t, store: sharedQuota, accountId: account.id })
         ),
         dirty || notice
           ? h(
@@ -4051,1033 +4601,2874 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
       );
     }
 
-    // #region Quota (额度): shared store, model matching, tab page, composer badge
+    // #region Media (生成): per-account media models and the read-only diagnostic
 
-    const QUOTA_POLL_MS = 60 * 1000;
-    // While the host is still collecting a refresh, look again soon.
-    const QUOTA_BUSY_POLL_MS = 4 * 1000;
-    const PROVIDER_NAMES = {
-      claude: "Claude",
-      anthropic: "Claude",
-      codex: "Codex",
-      openai: "OpenAI",
-      devin: "Devin",
-      antigravity: "Antigravity",
-      "gemini-cli": "Gemini CLI",
-      gemini: "Gemini",
-      vertex: "Vertex",
-      aistudio: "AI Studio",
-      kimi: "Kimi",
-      meta: "Meta",
-      xai: "xAI / Grok",
-      qwen: "Qwen",
-      iflow: "iFlow",
-      glm: "GLM",
-      deepseek: "DeepSeek",
-      copilot: "GitHub Copilot",
-    };
-    const WINDOW_KEYS = { "5h": "qWin5h", "7d": "qWin7d", "30d": "qWin30d", "1d": "qWin1d" };
-    const QUOTA_ERROR_KEYS = {
-      unauthorized: "qErrUnauthorized",
-      forbidden: "qErrForbidden",
-      network: "qErrNetwork",
-      timeout: "qErrTimeout",
-      http: "qErrHttp",
-      "invalid-response": "qErrInvalid",
-      "no-endpoint": "qErrNoEndpoint",
-    };
-    const STATUS_KEYS = {
-      active: "qStatusActive",
-      disabled: "qStatusDisabled",
-      unavailable: "qStatusUnavailable",
-      error: "qStatusError",
+    const MEDIA_ERROR_KEYS = {
+      "invalid-account": "mediaErrInvalidAccount",
+      "invalid-request": "mediaErrInvalidRequest",
+      "no-endpoint": "mediaErrNoEndpoint",
+      "invalid-output-dir": "mediaErrInvalidOutputDir",
+      "invalid-model": "mediaErrInvalidModel",
+      "invalid-session": "mediaErrInvalidSession",
     };
-    const MATCH_KEYS = { "model-list": "qMatchModelList", prefix: "qMatchPrefix", family: "qMatchFamily" };
+    const MEDIA_KIND_KEYS = { image: "mediaKindImage", video: "mediaKindVideo", chat: "mediaKindChat" };
 
-    function fmt(t, key, vars = {}) {
-      let out = String(t(key));
-      for (const [name, value] of Object.entries(vars)) out = out.split(`{${name}}`).join(String(value));
-      return out;
+    function mediaErrorText(t, err) {
+      const code = err instanceof Error ? err.message : String(err);
+      return MEDIA_ERROR_KEYS[code] ? t(MEDIA_ERROR_KEYS[code]) : fmt(t, "mediaErrGeneric", { error: code });
     }
 
-    function providerName(t, provider) {
-      const key = String(provider ?? "").toLowerCase();
-      return PROVIDER_NAMES[key] ?? (key === "" ? t("qProviderOther") : key);
+    function diagRouteText(t, route) {
+      if (route.verdict === "present") return t("diagPresent");
+      if (route.verdict === "missing") return t("diagMissing");
+      if (route.verdict === "unreachable") return t("diagUnreachable");
+      return fmt(t, "diagUnknown", { status: route.status ?? "?" });
     }
 
-    function quotaErrorText(t, account) {
-      const key = QUOTA_ERROR_KEYS[account?.errorCode];
-      if (key === undefined) return null;
-      return fmt(t, key, { status: account.errorStatus ?? "?" });
+    function diagCatalogText(t, catalog) {
+      if (catalog?.ok) return fmt(t, "diagCatalogOk", { n: catalog.count ?? 0, m: catalog.media?.length ?? 0 });
+      return fmt(t, "diagCatalogFail", { reason: catalog?.status ? `HTTP ${catalog.status}` : catalog?.error ?? "?" });
     }
 
-    function windowLabel(t, w) {
-      const base = WINDOW_KEYS[w.kind] !== undefined ? t(WINDOW_KEYS[w.kind]) : w.label || t("qWinOther");
-      return w.group ? `${w.group} · ${base}` : base;
+    function diagFieldsText(fields) {
+      return Object.entries(fields ?? {})
+        .map(([key, value]) => `${key}: ${Array.isArray(value) ? `[${value.join(", ")}]` : String(value)}`)
+        .join(" · ");
     }
 
-    function durationText(t, ms) {
-      const total = Math.max(1, Math.ceil(ms / 60000));
-      const d = Math.floor(total / 1440);
-      const hrs = Math.floor((total % 1440) / 60);
-      const m = total % 60;
-      if (d > 0) return fmt(t, "qDurDH", { d, h: hrs });
-      if (hrs > 0) return fmt(t, "qDurHM", { h: hrs, m });
-      return fmt(t, "qDurM", { m });
-    }
+    /**
+     * The Generation tab of one account. Hook order matters for the test
+     * harness, which seeds slot 0 (data) and slot 1 (loading).
+     */
+    /** Seconds limits offered for the agent's videos (plus the current value). */
+    const MEDIA_BUDGET_CHOICES = [30, 60, 120, 300, 600, 1800, 3600];
+    const budgetValue = (budget) => (budget?.mode === "limited" ? `limited:${budget.seconds}` : "unlimited");
+    const budgetFromValue = (value) => (value === "unlimited" ? { mode: "unlimited" } : { mode: "limited", seconds: Number(String(value).split(":")[1]) });
+    const budgetChoices = (current) => {
+      const list = MEDIA_BUDGET_CHOICES.slice();
+      if (current?.mode === "limited" && !list.includes(current.seconds)) list.push(current.seconds);
+      return list.sort((a, b) => a - b);
+    };
 
-    function resetText(t, iso, now) {
-      const at = Date.parse(iso ?? "");
-      if (!Number.isFinite(at)) return "";
-      return at <= now ? t("qResetSoon") : fmt(t, "qResetIn", { time: durationText(t, at - now) });
-    }
+    function MediaPanel({ t, account, onStatus }) {
+      const [data, setData] = useState(null);
+      const [loading, setLoading] = useState(true);
+      const [error, setError] = useState(null);
+      const [busy, setBusy] = useState(null); // null | "save" | "diag"
+      const [notice, setNotice] = useState(null);
+      const [diag, setDiag] = useState(null);
+      const [diagError, setDiagError] = useState(null);
+      const [markId, setMarkId] = useState("");
+      const [markKind, setMarkKind] = useState("image");
+      const [copied, setCopied] = useState(false);
+      // null = not edited; the saved value is shown.
+      const [outputDraft, setOutputDraft] = useState(null);
+      const mounted = useRef(true);
 
-    function agoText(t, iso, now) {
-      const at = Date.parse(iso ?? "");
-      if (!Number.isFinite(at)) return "";
-      const s = Math.max(0, Math.floor((now - at) / 1000));
-      if (s < 10) return t("qAgoJustNow");
-      if (s < 60) return fmt(t, "qAgoSeconds", { n: s });
-      if (s < 3600) return fmt(t, "qAgoMinutes", { n: Math.floor(s / 60) });
-      if (s < 86400) return fmt(t, "qAgoHours", { n: Math.floor(s / 3600) });
-      return fmt(t, "qAgoDays", { n: Math.floor(s / 86400) });
-    }
+      useEffect(() => {
+        mounted.current = true;
+        return () => {
+          mounted.current = false;
+        };
+      }, []);
 
-    function quotaLevel(pct) {
-      if (typeof pct !== "number" || !Number.isFinite(pct)) return "unknown";
-      if (pct <= 0) return "empty";
-      if (pct < 20) return "low";
-      if (pct < 50) return "mid";
-      return "ok";
-    }
+      const load = useCallback(async (signal) => {
+        try {
+          const res = await fetch(API.mediaStatus, { cache: "no-store", signal });
+          const body = await res.json();
+          if (!res.ok || body.ok === false) throw new Error(body.error || `HTTP ${res.status}`);
+          if (signal?.aborted) return;
+          setData(body.media ?? null);
+          setError(null);
+        } catch (err) {
+          if (signal?.aborted) return;
+          setError(err instanceof Error ? err.message : String(err));
+        } finally {
+          if (!signal?.aborted) setLoading(false);
+        }
+      }, []);
 
-    function pctText(pct) {
-      return typeof pct === "number" && Number.isFinite(pct) ? `${Math.round(pct)}%` : "—";
-    }
+      // Reload when the account's catalog changes (a probe or save elsewhere).
+      useEffect(() => {
+        const controller = new AbortController();
+        void load(controller.signal);
+        return () => controller.abort();
+      }, [load, account.id, account.status?.refreshedAt, account.status?.totalDiscovered]);
 
-    function bareModel(id) {
-      const lower = String(id ?? "").toLowerCase();
-      const slash = lower.indexOf("/");
-      return slash >= 0 ? lower.slice(slash + 1) : lower;
-    }
+      useEffect(() => {
+        if (notice?.tone !== "ok") return undefined;
+        const id = setTimeout(() => {
+          if (mounted.current) setNotice(null);
+        }, 4000);
+        return () => clearTimeout(id);
+      }, [notice]);
 
-    /** Whether a quota window applies to `modelId` (untagged windows apply to every model). */
-    function windowAppliesTo(w, modelId) {
-      if (!modelId) return true;
-      const full = String(modelId).toLowerCase();
-      const bare = bareModel(modelId);
-      if (Array.isArray(w.modelIds) && w.modelIds.length > 0) {
-        return w.modelIds.some((m) => {
-          const x = String(m).toLowerCase();
-          return x === full || x === bare || bareModel(x) === bare;
-        });
-      }
-      if (Array.isArray(w.modelPrefixes) && w.modelPrefixes.length > 0) {
-        return w.modelPrefixes.some((p) => bare.startsWith(String(p).toLowerCase()));
-      }
-      return true;
-    }
+      useEffect(() => {
+        if (!copied) return undefined;
+        const id = setTimeout(() => {
+          if (mounted.current) setCopied(false);
+        }, 2000);
+        return () => clearTimeout(id);
+      }, [copied]);
+
+      const mine = (data?.accounts ?? []).find((a) => a.id === account.id);
+      const models = Array.isArray(mine?.models) ? mine.models : [];
+      const images = models.filter((m) => m.kind === "image");
+      const videos = models.filter((m) => m.kind === "video");
+      const movedToChat = Object.entries(mine?.kindOverrides ?? {})
+        .filter(([, kind]) => kind === "chat")
+        .map(([id]) => id);
+      const markable = (mine?.chatModelIds ?? []).filter((id) => !movedToChat.includes(id));
+
+      const save = async (accountPatch) => {
+        setBusy("save");
+        setNotice(null);
+        try {
+          const body = await postJson(API.mediaSave, { account: { accountId: account.id, ...accountPatch } });
+          if (!mounted.current) return;
+          setData(body.media ?? null);
+          if (body.status !== undefined) onStatus?.(body.status);
+          setNotice({ tone: "ok", text: t(body.status !== undefined ? "mediaKindSaved" : "mediaSaved") });
+        } catch (err) {
+          if (mounted.current) setNotice({ tone: "error", text: mediaErrorText(t, err) });
+        } finally {
+          if (mounted.current) setBusy(null);
+        }
+      };
 
-    function credentialWindows(cred, modelId) {
-      const windows = Array.isArray(cred?.windows) ? cred.windows : [];
-      return modelId ? windows.filter((w) => windowAppliesTo(w, modelId)) : windows;
-    }
+      // Global (all-account) preferences, each saved on its own.
+      const saveGlobal = async (patch, after) => {
+        setBusy("save");
+        setNotice(null);
+        try {
+          const body = await postJson(API.mediaSave, patch);
+          if (!mounted.current) return;
+          setData(body.media ?? null);
+          after?.();
+          setNotice({ tone: "ok", text: t("mediaSaved") });
+        } catch (err) {
+          if (mounted.current) setNotice({ tone: "error", text: mediaErrorText(t, err) });
+        } finally {
+          if (mounted.current) setBusy(null);
+        }
+      };
+      const saveOutputDir = async () => {
+        if (outputDraft === null) return;
+        await saveGlobal({ outputDir: outputDraft.trim() }, () => setOutputDraft(null));
+      };
 
-    /** The tightest remaining percentage of the windows that apply, or null. */
-    function credentialHeadroom(cred, modelId) {
-      const values = credentialWindows(cred, modelId)
-        .map((w) => w.remainingPercent)
-        .filter((v) => typeof v === "number" && Number.isFinite(v));
-      return values.length > 0 ? Math.min(...values) : null;
-    }
+      const toggleEnabled = (model) => {
+        const off = Array.isArray(mine?.disabledModels) ? mine.disabledModels : [];
+        const next = model.enabled ? [...new Set([...off, model.id])] : off.filter((id) => id !== model.id);
+        return save({ disabledModels: next });
+      };
 
-    function quotaAccountForRoute(data, route) {
-      const accounts = Array.isArray(data?.accounts) ? data.accounts : [];
-      return accounts.find((a) => Array.isArray(a.routes) && a.routes.includes(route)) ?? null;
-    }
+      const setKind = (model, kind) =>
+        save({ kindOverrides: { [model.id]: kind === model.detectedKind ? null : kind } });
 
-    function byHeadroomDesc(a, b) {
-      const ua = a.cred.status === "active" ? 0 : 1;
-      const ub = b.cred.status === "active" ? 0 : 1;
-      if (ua !== ub) return ua - ub;
-      const ha = a.headroom ?? -1;
-      const hb = b.headroom ?? -1;
-      return hb - ha;
-    }
+      const runDiagnostic = async () => {
+        setBusy("diag");
+        setDiagError(null);
+        try {
+          const body = await postJson(API.mediaDiagnose, { accountId: account.id });
+          if (mounted.current) setDiag(body.diagnostic ?? null);
+        } catch (err) {
+          if (mounted.current) setDiagError(mediaErrorText(t, err));
+        } finally {
+          if (mounted.current) setBusy(null);
+        }
+      };
 
-    /**
-     * Quota for one picker selection: the account owning the route, then
-     * exactly the credentials the host matched for this model id on that
-     * server (modelIndex), never credentials of another account.
-     */
-    function summarizeModelQuota(data, route, modelId) {
-      const account = quotaAccountForRoute(data, route);
-      if (account === null) return null;
-      const credentials = Array.isArray(account.credentials) ? account.credentials : [];
-      const byId = new Map(credentials.map((c) => [c.id, c]));
-      const ids = Array.isArray(account.modelIndex?.[modelId]) ? account.modelIndex[modelId] : [];
-      const entries = ids
-        .map((id) => byId.get(id))
-        .filter(Boolean)
-        .map((cred) => ({ cred, headroom: credentialHeadroom(cred, modelId), windows: credentialWindows(cred, modelId) }))
-        .sort(byHeadroomDesc);
-      const usable = entries.filter((e) => e.cred.status === "active");
-      const known = usable.map((e) => e.headroom).filter((v) => v !== null);
-      return {
-        account,
-        entries,
-        usableCount: usable.length,
-        best: known.length > 0 ? Math.max(...known) : null,
+      const copyDiagnostic = async () => {
+        try {
+          if (typeof navigator === "undefined" || typeof navigator.clipboard?.writeText !== "function") return;
+          await navigator.clipboard.writeText(JSON.stringify(diag, null, 2));
+          if (mounted.current) setCopied(true);
+        } catch {}
       };
-    }
 
-    /** Totals for the overview tiles. */
-    function quotaStats(credentials) {
-      const out = { total: 0, healthy: 0, low: 0, empty: 0, issue: 0, unknown: 0 };
-      for (const cred of credentials) {
-        out.total++;
-        if (cred.status !== "active" || cred.quotaState === "error") {
-          out.issue++;
-          continue;
-        }
-        const level = quotaLevel(credentialHeadroom(cred));
-        if (level === "empty") out.empty++;
-        else if (level === "low") out.low++;
-        else if (level === "ok" || level === "mid") out.healthy++;
-        else out.unknown++;
-      }
-      return out;
-    }
+      const kindSelect = (model) =>
+        h(
+          "select",
+          {
+            className: "dcpa-q-input dcpa-media-kind",
+            value: model.kind,
+            "aria-label": fmt(t, "mediaKindFor", { model: model.id }),
+            disabled: busy !== null,
+            onChange: (e) => void setKind(model, e.target.value),
+          },
+          ["image", "video", "chat"].map((kind) => h("option", { key: kind, value: kind }, t(MEDIA_KIND_KEYS[kind])))
+        );
 
-    /**
-     * One page-wide quota client: GET the host snapshot (cached by the host,
-     * which refreshes stale accounts in the background) while anything is
-     * subscribed; POST refresh / key changes. Disposed with the activation.
-     */
-    function createQuotaStore(io = {}) {
-      const fetchImpl = io.fetch ?? ((...args) => fetch(...args));
-      const setT = io.setTimeout ?? ((fn, ms) => setTimeout(fn, ms));
-      const clearT = io.clearTimeout ?? ((id) => clearTimeout(id));
-      const listeners = new Set();
-      let state = { data: null, loading: false, error: null, busy: null, busyAccount: null, loadedAt: 0 };
-      let timer = null;
-      let disposed = false;
-      let seq = 0;
-      const inflight = new Set();
-
-      const emit = (patch) => {
-        if (disposed) return;
-        state = { ...state, ...patch };
-        for (const fn of [...listeners]) fn();
-      };
-
-      const request = async (url, init) => {
-        const controller = new AbortController();
-        inflight.add(controller);
-        try {
-          const res = await fetchImpl(url, { cache: "no-store", ...init, signal: controller.signal });
-          let body = null;
-          try {
-            body = await res.json();
-          } catch {}
-          if (!res.ok || body === null || body.ok === false) {
-            throw new Error(body?.error || `HTTP ${res.status}`);
-          }
-          return body;
-        } finally {
-          inflight.delete(controller);
-        }
-      };
-
-      const schedule = () => {
-        if (timer !== null) clearT(timer);
-        timer = null;
-        if (disposed || listeners.size === 0) return;
-        const delay = state.data?.refreshing ? QUOTA_BUSY_POLL_MS : QUOTA_POLL_MS;
-        timer = setT(() => {
-          timer = null;
-          void load().finally(schedule);
-        }, delay);
-      };
-
-      const load = async () => {
-        const mine = ++seq;
-        emit({ loading: true });
-        try {
-          const body = await request(API.quotaStatus);
-          if (mine === seq) emit({ data: body.quota ?? null, error: null, loading: false, loadedAt: Date.now() });
-        } catch (error) {
-          if (disposed) return;
-          if (mine === seq) emit({ error: error instanceof Error ? error.message : String(error), loading: false });
-        }
-      };
+      const modelRow = (model) =>
+        h(
+          "div",
+          { key: model.id, className: "dcpa-model-row dcpa-media-row" },
+          h(
+            "div",
+            { className: "dcpa-model-left" },
+            h("span", { className: "dcpa-model-id" }, model.id),
+            model.name && model.name !== model.id ? h("span", { className: "dcpa-model-name" }, model.name) : null,
+            model.aliasOf
+              ? h(
+                  "span",
+                  { className: "dcpa-model-tags" },
+                  h("span", { className: "dcpa-q-tag", "data-tone": "info" }, fmt(t, "mediaAliasTag", { target: model.aliasOf })),
+                  h(InfoTip, { t, text: fmt(t, "mediaAliasHint", { target: model.aliasOf }) })
+                )
+              : null,
+            h(
+              "span",
+              { className: "dcpa-q-tag", ...(model.overridden ? { "data-tone": "warning" } : {}) },
+              t(model.overridden ? "mediaOverriddenTag" : "mediaDetectedTag")
+            )
+          ),
+          h(
+            "div",
+            { className: "dcpa-q-actions" },
+            kindSelect(model),
+            model.overridden
+              ? h(
+                  "button",
+                  { type: "button", className: "dcpa-q-btn", disabled: busy !== null, onClick: () => void save({ kindOverrides: { [model.id]: null } }) },
+                  t("mediaResetKind")
+                )
+              : null,
+            h(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                className: "dcpa-switch",
+                "aria-checked": model.enabled === true,
+                "aria-label": fmt(t, "mediaEnabledLabel", { model: model.id }),
+                disabled: busy !== null,
+                onClick: () => void toggleEnabled(model),
+              },
+              h("span", { className: "dcpa-switch-thumb" })
+            )
+          )
+        );
 
-      const mutate = async (kind, url, payload) => {
-        const mine = ++seq;
-        emit({ busy: kind, busyAccount: payload?.accountId ?? null, error: null });
-        try {
-          const body = await request(url, {
-            method: "POST",
-            headers: { "content-type": "application/json" },
-            body: JSON.stringify(payload ?? {}),
-          });
-          if (mine === seq) emit({ data: body.quota ?? state.data, loadedAt: Date.now() });
-          emit({ busy: null, busyAccount: null });
-          schedule();
-          return { ok: true };
-        } catch (error) {
-          const message = error instanceof Error ? error.message : String(error);
-          emit({ busy: null, busyAccount: null, ...(mine === seq ? { error: message } : {}) });
-          return { ok: false, error: message };
-        }
-      };
+      const group = (titleKey, list) =>
+        list.length === 0
+          ? null
+          : h(
+              "div",
+              { className: "dcpa-media-block" },
+              h("h4", { className: "dcpa-media-group" }, `${t(titleKey)} (${list.length})`),
+              h("div", { className: "dcpa-model-list" }, list.map(modelRow))
+            );
 
-      return {
-        getSnapshot: () => state,
-        subscribe(fn) {
-          listeners.add(fn);
-          if (listeners.size === 1) {
-            if (state.data === null || Date.now() - state.loadedAt > QUOTA_POLL_MS) void load().finally(schedule);
-            else schedule();
-          }
-          return () => {
-            listeners.delete(fn);
-            if (listeners.size === 0 && timer !== null) {
-              clearT(timer);
-              timer = null;
-            }
-          };
-        },
-        load,
-        refresh: (accountId) => mutate("refresh", API.quotaRefresh, accountId ? { accountId } : {}),
-        saveKey: (accountId, managementKey) => mutate("save", API.quotaSave, { accountId, managementKey }),
-        clearKey: (accountId) => mutate("clear", API.quotaSave, { accountId, clear: true }),
-        dispose() {
-          disposed = true;
-          if (timer !== null) clearT(timer);
-          timer = null;
-          for (const c of inflight) c.abort();
-          inflight.clear();
-          listeners.clear();
-        },
-      };
-    }
+      const catalogRead = (mine?.discovered ?? 0) > 0;
 
-    let sharedQuota = null;
+      const diagnostic = h(
+        "div",
+        { className: "dcpa-media-card" },
+        h(
+          "div",
+          { className: "dcpa-media-card-head" },
+          h("span", { className: "dcpa-frow-label" }, t("diagTitle"), h(InfoTip, { t, text: t("diagHint") })),
+          h(
+            "button",
+            { type: "button", className: "dcpa-q-btn", "data-variant": "outline", disabled: busy !== null, onClick: () => void runDiagnostic() },
+            busy === "diag" ? t("diagRunning") : t("diagRun")
+          )
+        ),
+        diagError ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, diagError) : null,
+        diag
+          ? h(
+              "div",
+              { className: "dcpa-media-diag" },
+              diag.keyConfigured === false ? h("p", { className: "dcpa-q-sub" }, t("diagNoKey")) : null,
+              [
+                ["diagEnriched", diag.catalogs?.enriched],
+                ["diagListing", diag.catalogs?.listing],
+              ].map(([labelKey, catalog]) =>
+                h(
+                  "div",
+                  { key: labelKey, className: "dcpa-media-diag-item" },
+                  h(
+                    "div",
+                    { className: "dcpa-media-diag-row" },
+                    h("span", null, t(labelKey)),
+                    h("span", { className: "dcpa-q-sub" }, diagCatalogText(t, catalog))
+                  ),
+                  Array.isArray(catalog?.media) && catalog.media.length > 0
+                    ? h(
+                        "ul",
+                        { className: "dcpa-media-diag-list" },
+                        catalog.media.map((entry) =>
+                          h(
+                            "li",
+                            { key: entry.id },
+                            h("span", { className: "dcpa-model-id" }, entry.id),
+                            ` · ${t(MEDIA_KIND_KEYS[entry.kind] ?? "mediaKindChat")}`,
+                            entry.fields && Object.keys(entry.fields).length > 0 ? ` · ${diagFieldsText(entry.fields)}` : ""
+                          )
+                        )
+                      )
+                    : null
+                )
+              ),
+              h(
+                "div",
+                { className: "dcpa-media-diag-item" },
+                h("div", { className: "dcpa-media-diag-row" }, h("span", null, t("diagRoutes"))),
+                h(
+                  "ul",
+                  { className: "dcpa-media-diag-list" },
+                  (diag.routes ?? []).map((route) =>
+                    h("li", { key: route.route }, h("span", { className: "dcpa-model-id" }, route.route), ` · ${diagRouteText(t, route)}`)
+                  )
+                )
+              ),
+              h(
+                "details",
+                { className: "dcpa-media-raw" },
+                h("summary", null, t("diagRaw")),
+                h("pre", { className: "dcpa-media-pre" }, JSON.stringify(diag, null, 2)),
+                h(
+                  "button",
+                  { type: "button", className: "dcpa-q-btn", "data-variant": "outline", onClick: () => void copyDiagnostic() },
+                  copied ? t("diagCopied") : t("diagCopy")
+                )
+              )
+            )
+          : null
+      );
 
-    /** Subscribe a component to the shared quota store (null when inactive). */
-    function useQuota(store) {
-      const [, setTick] = useState(0);
-      useEffect(() => {
-        if (store === null || store === undefined) return undefined;
-        let alive = true;
-        const off = store.subscribe(() => {
-          if (alive) setTick((n) => n + 1);
-        });
-        return () => {
-          alive = false;
-          off();
-        };
-      }, [store]);
-      return store ? store.getSnapshot() : { data: null, loading: false, error: null, busy: null };
-    }
+      // The optional agent tool (generate_media): switch, confirmation and the video seconds limit.
+      const agentOn = data?.settings?.agentTool === true;
+      const confirmSelect = (field, labelKey) =>
+        h(
+          "label",
+          { className: "dcpa-inline dcpa-media-agent-row" },
+          h("span", { className: "dcpa-media-sublabel" }, t(labelKey)),
+          h(
+            "select",
+            {
+              className: "dcpa-q-input dcpa-media-select",
+              value: data?.settings?.[field] ?? (field === "videoConfirm" ? "ask" : "auto"),
+              disabled: busy !== null || !agentOn,
+              onChange: (e) => void saveGlobal({ [field]: e.target.value }),
+            },
+            h("option", { value: "ask" }, t("mediaConfirmAsk")),
+            h("option", { value: "auto" }, t("mediaConfirmAuto"))
+          )
+        );
+      const globalBudget = data?.settings?.videoBudget ?? { mode: "limited", seconds: 60 };
+      const agentCard = h(
+        "div",
+        { className: "dcpa-media-card", "data-agent": agentOn ? "on" : "off" },
+        h(
+          "div",
+          { className: "dcpa-media-agent-head" },
+          h("span", { className: "dcpa-frow-label" }, t("mediaAgentTitle"), h(InfoTip, { t, text: t("mediaAgentHint") })),
+          h(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              className: "dcpa-switch",
+              "aria-checked": agentOn,
+              "aria-label": t("mediaAgentTitle"),
+              disabled: busy !== null,
+              onClick: () => void saveGlobal({ agentTool: !agentOn }),
+            },
+            h("span", { className: "dcpa-switch-thumb" })
+          )
+        ),
+        h("p", { className: "dcpa-q-sub" }, t(agentOn ? "mediaAgentOnNote" : "mediaAgentOffNote")),
+        confirmSelect("videoConfirm", "mediaVideoConfirm"),
+        confirmSelect("imageConfirm", "mediaImageConfirm"),
+        h(
+          "div",
+          { className: "dcpa-inline dcpa-media-agent-row" },
+          h("span", { className: "dcpa-media-sublabel" }, t("mediaVideoBudget"), h(InfoTip, { t, text: t("mediaVideoBudgetHint") })),
+          h(
+            "select",
+            {
+              className: "dcpa-q-input dcpa-media-select",
+              "aria-label": t("mediaVideoBudget"),
+              value: budgetValue(globalBudget),
+              disabled: busy !== null || !agentOn,
+              onChange: (e) => void saveGlobal({ videoBudget: budgetFromValue(e.target.value) }),
+            },
+            budgetChoices(globalBudget).map((n) => h("option", { key: n, value: `limited:${n}` }, fmt(t, "mediaBudgetSeconds", { n }))),
+            h("option", { value: "unlimited" }, t("mediaBudgetUnlimited"))
+          )
+        )
+      );
 
-    /**
-     * Which sessions currently have a composer badge mounted. The composer
-     * renders conversation.input.right only once the session is bound (its
-     * input state exists), but the New Session hero shows the model selector
-     * earlier. The hero badge (conversation.hero.options) therefore renders
-     * only while no composer badge is mounted for the same session, so the
-     * user always sees exactly one badge. Plain in-memory counts; no DOM.
-     */
-    function createBadgePresence() {
-      const counts = new Map();
-      const listeners = new Set();
-      const notify = () => {
-        for (const fn of [...listeners]) fn();
-      };
-      return {
-        add(id) {
-          counts.set(id, (counts.get(id) ?? 0) + 1);
-          notify();
-          let done = false;
-          return () => {
-            if (done) return;
-            done = true;
-            const n = (counts.get(id) ?? 1) - 1;
-            if (n > 0) counts.set(id, n);
-            else counts.delete(id);
-            notify();
-          };
-        },
-        has: (id) => (counts.get(id) ?? 0) > 0,
-        subscribe(fn) {
-          listeners.add(fn);
-          return () => listeners.delete(fn);
-        },
-      };
-    }
-    const composerBadges = createBadgePresence();
+      if (loading && data === null) {
+        return h("div", { className: "dcpa-tabbody dcpa-models dcpa-media" }, h("p", { className: "dcpa-q-sub" }, t("mediaLoading")));
+      }
 
-    /**
-     * Composer placement announces itself for its session; hero placement
-     * reports whether a composer badge already covers the session.
-     */
-    function useBadgePlacement(placement, sessionId, presence = composerBadges) {
-      const [, setTick] = useState(0);
-      useEffect(() => {
-        if (typeof sessionId !== "string" || sessionId === "") return undefined;
-        if (placement === "hero") {
-          let alive = true;
-          const off = presence.subscribe(() => {
-            if (alive) setTick((n) => n + 1);
-          });
-          setTick((n) => n + 1);
-          return () => {
-            alive = false;
-            off();
-          };
-        }
-        return presence.add(sessionId);
-      }, [placement, sessionId, presence]);
-      return placement === "hero" && typeof sessionId === "string" && presence.has(sessionId);
+      return h(
+        "div",
+        { className: "dcpa-tabbody dcpa-models dcpa-media" },
+        h("p", { className: "dcpa-q-sub" }, t("mediaIntro")),
+        error ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, fmt(t, "mediaLoadError", { error })) : null,
+        data?.settingsError ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, t("mediaSettingsInvalid")) : null,
+        notice ? h("p", { className: "dcpa-q-msg", "data-tone": notice.tone, role: notice.tone === "error" ? "alert" : "status" }, notice.text) : null,
+        mine && models.length === 0
+          ? h("p", { className: "dcpa-hint" }, t(catalogRead ? "mediaNone" : "mediaNoCatalog"))
+          : null,
+        group("mediaImageGroup", images),
+        group("mediaVideoGroup", videos),
+        movedToChat.length > 0
+          ? h(
+              "div",
+              { className: "dcpa-media-block" },
+              h("h4", { className: "dcpa-media-group" }, t("mediaMovedTitle"), h(InfoTip, { t, text: t("mediaMovedHint") })),
+              h(
+                "div",
+                { className: "dcpa-model-list" },
+                movedToChat.map((id) =>
+                  h(
+                    "div",
+                    { key: id, className: "dcpa-model-row dcpa-media-row" },
+                    h("div", { className: "dcpa-model-left" }, h("span", { className: "dcpa-model-id" }, id)),
+                    h(
+                      "button",
+                      { type: "button", className: "dcpa-q-btn", disabled: busy !== null, onClick: () => void save({ kindOverrides: { [id]: null } }) },
+                      t("mediaResetKind")
+                    )
+                  )
+                )
+              )
+            )
+          : null,
+        markable.length > 0
+          ? h(
+              "div",
+              { className: "dcpa-media-card" },
+              h("span", { className: "dcpa-frow-label" }, t("mediaMarkTitle"), h(InfoTip, { t, text: t("mediaMarkHint") })),
+              h(
+                "div",
+                { className: "dcpa-inline" },
+                h(
+                  "select",
+                  {
+                    className: "dcpa-q-input",
+                    value: markId,
+                    "aria-label": t("mediaMarkSelect"),
+                    onChange: (e) => setMarkId(e.target.value),
+                  },
+                  h("option", { value: "" }, t("mediaMarkSelect")),
+                  markable.map((id) => h("option", { key: id, value: id }, id))
+                ),
+                h(
+                  "select",
+                  {
+                    className: "dcpa-q-input dcpa-media-kind",
+                    value: markKind,
+                    "aria-label": t("mediaKindLabel"),
+                    onChange: (e) => setMarkKind(e.target.value),
+                  },
+                  ["image", "video"].map((kind) => h("option", { key: kind, value: kind }, t(MEDIA_KIND_KEYS[kind])))
+                ),
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    className: "dcpa-q-btn",
+                    "data-variant": "outline",
+                    disabled: busy !== null || markId === "",
+                    onClick: () => {
+                      const id = markId;
+                      setMarkId("");
+                      void save({ kindOverrides: { [id]: markKind } });
+                    },
+                  },
+                  t("mediaMarkBtn")
+                )
+              )
+            )
+          : null,
+        h(
+          "div",
+          { className: "dcpa-media-card" },
+          h("label", { className: "dcpa-frow-label", htmlFor: `dcpa-media-out-${account.id}` }, t("mediaOutputTitle"), h(InfoTip, { t, text: t("mediaOutputHint") })),
+          h(
+            "div",
+            { className: "dcpa-inline" },
+            h("input", {
+              id: `dcpa-media-out-${account.id}`,
+              className: "dcpa-q-input",
+              value: outputDraft ?? data?.settings?.outputDir ?? "",
+              onChange: (e) => setOutputDraft(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") void saveOutputDir();
+              },
+            }),
+            h(
+              "button",
+              {
+                type: "button",
+                className: "dcpa-q-btn",
+                "data-variant": "outline",
+                disabled: busy !== null || outputDraft === null || outputDraft.trim() === (data?.settings?.outputDir ?? ""),
+                onClick: () => void saveOutputDir(),
+              },
+              t("mediaOutputSave")
+            )
+          )
+        ),
+        videos.length > 0
+          ? h(
+              "div",
+              { className: "dcpa-media-card" },
+              h("div", { className: "dcpa-frow-label" }, t("mediaVideoDefaults"), h(InfoTip, { t, text: t("mediaVideoDefaultsHint") })),
+              h(
+                "div",
+                { className: "dcpa-inline" },
+                h("label", { className: "dcpa-media-sublabel", htmlFor: `dcpa-media-vs-${account.id}` }, t("mediaVideoSeconds")),
+                h(
+                  "select",
+                  {
+                    id: `dcpa-media-vs-${account.id}`,
+                    className: "dcpa-q-input dcpa-media-select",
+                    value: String(data?.settings?.defaultVideoSeconds ?? 6),
+                    disabled: busy !== null,
+                    onChange: (e) => void saveGlobal({ defaultVideoSeconds: Number(e.target.value) }),
+                  },
+                  Array.from({ length: 15 }, (_, i) => h("option", { key: i + 1, value: String(i + 1) }, fmt(t, "mediaSecondsOption", { n: i + 1 })))
+                ),
+                h("label", { className: "dcpa-media-sublabel", htmlFor: `dcpa-media-vr-${account.id}` }, t("mediaVideoResolution")),
+                h(
+                  "select",
+                  {
+                    id: `dcpa-media-vr-${account.id}`,
+                    className: "dcpa-q-input dcpa-media-select",
+                    value: data?.settings?.defaultVideoResolution ?? "720p",
+                    disabled: busy !== null,
+                    onChange: (e) => void saveGlobal({ defaultVideoResolution: e.target.value }),
+                  },
+                  ["480p", "720p"].map((r) => h("option", { key: r, value: r }, r))
+                )
+              )
+            )
+          : null,
+        images.length + videos.length > 0 ? agentCard : null,
+        diagnostic
+      );
+    }
+
+    // #endregion
+
+    // #region Quota (额度): shared store, model matching, tab page, composer badge
+
+    const QUOTA_POLL_MS = 60 * 1000;
+    // While the host is still collecting a refresh, look again soon.
+    const QUOTA_BUSY_POLL_MS = 4 * 1000;
+    const PROVIDER_NAMES = {
+      claude: "Claude",
+      anthropic: "Claude",
+      codex: "Codex",
+      openai: "OpenAI",
+      devin: "Devin",
+      antigravity: "Antigravity",
+      "gemini-cli": "Gemini CLI",
+      gemini: "Gemini",
+      vertex: "Vertex",
+      aistudio: "AI Studio",
+      kimi: "Kimi",
+      meta: "Meta",
+      xai: "xAI / Grok",
+      qwen: "Qwen",
+      iflow: "iFlow",
+      glm: "GLM",
+      deepseek: "DeepSeek",
+      copilot: "GitHub Copilot",
+    };
+    const WINDOW_KEYS = { "5h": "qWin5h", "7d": "qWin7d", "30d": "qWin30d", "1d": "qWin1d" };
+    const QUOTA_ERROR_KEYS = {
+      unauthorized: "qErrUnauthorized",
+      forbidden: "qErrForbidden",
+      network: "qErrNetwork",
+      timeout: "qErrTimeout",
+      http: "qErrHttp",
+      "invalid-response": "qErrInvalid",
+      "no-endpoint": "qErrNoEndpoint",
+    };
+    const STATUS_KEYS = {
+      active: "qStatusActive",
+      disabled: "qStatusDisabled",
+      unavailable: "qStatusUnavailable",
+      error: "qStatusError",
+    };
+    const MATCH_KEYS = { "model-list": "qMatchModelList", prefix: "qMatchPrefix", family: "qMatchFamily" };
+
+    function fmt(t, key, vars = {}) {
+      let out = String(t(key));
+      for (const [name, value] of Object.entries(vars)) out = out.split(`{${name}}`).join(String(value));
+      return out;
+    }
+
+    function providerName(t, provider) {
+      const key = String(provider ?? "").toLowerCase();
+      return PROVIDER_NAMES[key] ?? (key === "" ? t("qProviderOther") : key);
+    }
+
+    function quotaErrorText(t, account) {
+      const key = QUOTA_ERROR_KEYS[account?.errorCode];
+      if (key === undefined) return null;
+      return fmt(t, key, { status: account.errorStatus ?? "?" });
+    }
+
+    function windowLabel(t, w) {
+      const base = WINDOW_KEYS[w.kind] !== undefined ? t(WINDOW_KEYS[w.kind]) : w.label || t("qWinOther");
+      return w.group ? `${w.group} · ${base}` : base;
+    }
+
+    function durationText(t, ms) {
+      const total = Math.max(1, Math.ceil(ms / 60000));
+      const d = Math.floor(total / 1440);
+      const hrs = Math.floor((total % 1440) / 60);
+      const m = total % 60;
+      if (d > 0) return fmt(t, "qDurDH", { d, h: hrs });
+      if (hrs > 0) return fmt(t, "qDurHM", { h: hrs, m });
+      return fmt(t, "qDurM", { m });
+    }
+
+    function resetText(t, iso, now) {
+      const at = Date.parse(iso ?? "");
+      if (!Number.isFinite(at)) return "";
+      return at <= now ? t("qResetSoon") : fmt(t, "qResetIn", { time: durationText(t, at - now) });
+    }
+
+    function agoText(t, iso, now) {
+      const at = Date.parse(iso ?? "");
+      if (!Number.isFinite(at)) return "";
+      const s = Math.max(0, Math.floor((now - at) / 1000));
+      if (s < 10) return t("qAgoJustNow");
+      if (s < 60) return fmt(t, "qAgoSeconds", { n: s });
+      if (s < 3600) return fmt(t, "qAgoMinutes", { n: Math.floor(s / 60) });
+      if (s < 86400) return fmt(t, "qAgoHours", { n: Math.floor(s / 3600) });
+      return fmt(t, "qAgoDays", { n: Math.floor(s / 86400) });
+    }
+
+    function quotaLevel(pct) {
+      if (typeof pct !== "number" || !Number.isFinite(pct)) return "unknown";
+      if (pct <= 0) return "empty";
+      if (pct < 20) return "low";
+      if (pct < 50) return "mid";
+      return "ok";
+    }
+
+    function pctText(pct) {
+      return typeof pct === "number" && Number.isFinite(pct) ? `${Math.round(pct)}%` : "—";
+    }
+
+    function bareModel(id) {
+      const lower = String(id ?? "").toLowerCase();
+      const slash = lower.indexOf("/");
+      return slash >= 0 ? lower.slice(slash + 1) : lower;
+    }
+
+    /** Whether a quota window applies to `modelId` (untagged windows apply to every model). */
+    function windowAppliesTo(w, modelId) {
+      if (!modelId) return true;
+      const full = String(modelId).toLowerCase();
+      const bare = bareModel(modelId);
+      if (Array.isArray(w.modelIds) && w.modelIds.length > 0) {
+        return w.modelIds.some((m) => {
+          const x = String(m).toLowerCase();
+          return x === full || x === bare || bareModel(x) === bare;
+        });
+      }
+      if (Array.isArray(w.modelPrefixes) && w.modelPrefixes.length > 0) {
+        return w.modelPrefixes.some((p) => bare.startsWith(String(p).toLowerCase()));
+      }
+      return true;
+    }
+
+    function credentialWindows(cred, modelId) {
+      const windows = Array.isArray(cred?.windows) ? cred.windows : [];
+      return modelId ? windows.filter((w) => windowAppliesTo(w, modelId)) : windows;
+    }
+
+    /** The tightest remaining percentage of the windows that apply, or null. */
+    function credentialHeadroom(cred, modelId) {
+      const values = credentialWindows(cred, modelId)
+        .map((w) => w.remainingPercent)
+        .filter((v) => typeof v === "number" && Number.isFinite(v));
+      return values.length > 0 ? Math.min(...values) : null;
+    }
+
+    function quotaAccountForRoute(data, route) {
+      const accounts = Array.isArray(data?.accounts) ? data.accounts : [];
+      return accounts.find((a) => Array.isArray(a.routes) && a.routes.includes(route)) ?? null;
+    }
+
+    function byHeadroomDesc(a, b) {
+      const ua = a.cred.status === "active" ? 0 : 1;
+      const ub = b.cred.status === "active" ? 0 : 1;
+      if (ua !== ub) return ua - ub;
+      const ha = a.headroom ?? -1;
+      const hb = b.headroom ?? -1;
+      return hb - ha;
     }
 
     /**
-     * The session's model-directory store, resolved at render time. DSH caches
-     * a slot entry's inject() result per session binding, and right after a
-     * page load, host restart or session switch `directoryFor()` can still
-     * throw (no scope/binding yet). Resolving inside inject would cache that
-     * miss for good, so inject hands over a resolver and this hook retries
-     * (1 s for the first 30 s, then every 5 s) until the directory exists.
+     * Quota for one picker selection: the account owning the route, then
+     * exactly the credentials the host matched for this model id on that
+     * server (modelIndex), never credentials of another account.
      */
-    function useDirectory(direct, resolve) {
+    function summarizeModelQuota(data, route, modelId) {
+      const account = quotaAccountForRoute(data, route);
+      if (account === null) return null;
+      const credentials = Array.isArray(account.credentials) ? account.credentials : [];
+      const byId = new Map(credentials.map((c) => [c.id, c]));
+      const ids = Array.isArray(account.modelIndex?.[modelId]) ? account.modelIndex[modelId] : [];
+      const entries = ids
+        .map((id) => byId.get(id))
+        .filter(Boolean)
+        .map((cred) => ({ cred, headroom: credentialHeadroom(cred, modelId), windows: credentialWindows(cred, modelId) }))
+        .sort(byHeadroomDesc);
+      const usable = entries.filter((e) => e.cred.status === "active");
+      const known = usable.map((e) => e.headroom).filter((v) => v !== null);
+      return {
+        account,
+        entries,
+        usableCount: usable.length,
+        best: known.length > 0 ? Math.max(...known) : null,
+      };
+    }
+
+    /** Totals for the overview tiles. */
+    function quotaStats(credentials) {
+      const out = { total: 0, healthy: 0, low: 0, empty: 0, issue: 0, unknown: 0 };
+      for (const cred of credentials) {
+        out.total++;
+        if (cred.status !== "active" || cred.quotaState === "error") {
+          out.issue++;
+          continue;
+        }
+        const level = quotaLevel(credentialHeadroom(cred));
+        if (level === "empty") out.empty++;
+        else if (level === "low") out.low++;
+        else if (level === "ok" || level === "mid") out.healthy++;
+        else out.unknown++;
+      }
+      return out;
+    }
+
+    /**
+     * One page-wide quota client: GET the host snapshot (cached by the host,
+     * which refreshes stale accounts in the background) while anything is
+     * subscribed; POST refresh / key changes. Disposed with the activation.
+     */
+    function createQuotaStore(io = {}) {
+      const fetchImpl = io.fetch ?? ((...args) => fetch(...args));
+      const setT = io.setTimeout ?? ((fn, ms) => setTimeout(fn, ms));
+      const clearT = io.clearTimeout ?? ((id) => clearTimeout(id));
+      const listeners = new Set();
+      let state = { data: null, loading: false, error: null, busy: null, busyAccount: null, loadedAt: 0 };
+      let timer = null;
+      let disposed = false;
+      let seq = 0;
+      const inflight = new Set();
+
+      const emit = (patch) => {
+        if (disposed) return;
+        state = { ...state, ...patch };
+        for (const fn of [...listeners]) fn();
+      };
+
+      const request = async (url, init) => {
+        const controller = new AbortController();
+        inflight.add(controller);
+        try {
+          const res = await fetchImpl(url, { cache: "no-store", ...init, signal: controller.signal });
+          let body = null;
+          try {
+            body = await res.json();
+          } catch {}
+          if (!res.ok || body === null || body.ok === false) {
+            throw new Error(body?.error || `HTTP ${res.status}`);
+          }
+          return body;
+        } finally {
+          inflight.delete(controller);
+        }
+      };
+
+      const schedule = () => {
+        if (timer !== null) clearT(timer);
+        timer = null;
+        if (disposed || listeners.size === 0) return;
+        const delay = state.data?.refreshing ? QUOTA_BUSY_POLL_MS : QUOTA_POLL_MS;
+        timer = setT(() => {
+          timer = null;
+          void load().finally(schedule);
+        }, delay);
+      };
+
+      const load = async () => {
+        const mine = ++seq;
+        emit({ loading: true });
+        try {
+          const body = await request(API.quotaStatus);
+          if (mine === seq) emit({ data: body.quota ?? null, error: null, loading: false, loadedAt: Date.now() });
+        } catch (error) {
+          if (disposed) return;
+          if (mine === seq) emit({ error: error instanceof Error ? error.message : String(error), loading: false });
+        }
+      };
+
+      const mutate = async (kind, url, payload) => {
+        const mine = ++seq;
+        emit({ busy: kind, busyAccount: payload?.accountId ?? null, error: null });
+        try {
+          const body = await request(url, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(payload ?? {}),
+          });
+          if (mine === seq) emit({ data: body.quota ?? state.data, loadedAt: Date.now() });
+          emit({ busy: null, busyAccount: null });
+          schedule();
+          return { ok: true };
+        } catch (error) {
+          const message = error instanceof Error ? error.message : String(error);
+          emit({ busy: null, busyAccount: null, ...(mine === seq ? { error: message } : {}) });
+          return { ok: false, error: message };
+        }
+      };
+
+      return {
+        getSnapshot: () => state,
+        subscribe(fn) {
+          listeners.add(fn);
+          if (listeners.size === 1) {
+            if (state.data === null || Date.now() - state.loadedAt > QUOTA_POLL_MS) void load().finally(schedule);
+            else schedule();
+          }
+          return () => {
+            listeners.delete(fn);
+            if (listeners.size === 0 && timer !== null) {
+              clearT(timer);
+              timer = null;
+            }
+          };
+        },
+        load,
+        refresh: (accountId) => mutate("refresh", API.quotaRefresh, accountId ? { accountId } : {}),
+        saveKey: (accountId, managementKey) => mutate("save", API.quotaSave, { accountId, managementKey }),
+        clearKey: (accountId) => mutate("clear", API.quotaSave, { accountId, clear: true }),
+        dispose() {
+          disposed = true;
+          if (timer !== null) clearT(timer);
+          timer = null;
+          for (const c of inflight) c.abort();
+          inflight.clear();
+          listeners.clear();
+        },
+      };
+    }
+
+    let sharedQuota = null;
+
+    /** Subscribe a component to the shared quota store (null when inactive). */
+    function useQuota(store) {
+      const [, setTick] = useState(0);
+      useEffect(() => {
+        if (store === null || store === undefined) return undefined;
+        let alive = true;
+        const off = store.subscribe(() => {
+          if (alive) setTick((n) => n + 1);
+        });
+        return () => {
+          alive = false;
+          off();
+        };
+      }, [store]);
+      return store ? store.getSnapshot() : { data: null, loading: false, error: null, busy: null };
+    }
+
+    /**
+     * Which sessions currently have a composer badge mounted. The composer
+     * renders conversation.input.right only once the session is bound (its
+     * input state exists), but the New Session hero shows the model selector
+     * earlier. The hero badge (conversation.hero.options) therefore renders
+     * only while no composer badge is mounted for the same session, so the
+     * user always sees exactly one badge. Plain in-memory counts; no DOM.
+     */
+    function createBadgePresence() {
+      const counts = new Map();
+      const listeners = new Set();
+      const notify = () => {
+        for (const fn of [...listeners]) fn();
+      };
+      return {
+        add(id) {
+          counts.set(id, (counts.get(id) ?? 0) + 1);
+          notify();
+          let done = false;
+          return () => {
+            if (done) return;
+            done = true;
+            const n = (counts.get(id) ?? 1) - 1;
+            if (n > 0) counts.set(id, n);
+            else counts.delete(id);
+            notify();
+          };
+        },
+        has: (id) => (counts.get(id) ?? 0) > 0,
+        subscribe(fn) {
+          listeners.add(fn);
+          return () => listeners.delete(fn);
+        },
+      };
+    }
+    const composerBadges = createBadgePresence();
+    // The generation-model button has its own composer/hero presence.
+    const mediaChips = createBadgePresence();
+
+    /**
+     * Composer placement announces itself for its session; hero placement
+     * reports whether a composer badge already covers the session.
+     */
+    function useBadgePlacement(placement, sessionId, presence = composerBadges) {
+      const [, setTick] = useState(0);
+      useEffect(() => {
+        if (typeof sessionId !== "string" || sessionId === "") return undefined;
+        if (placement === "hero") {
+          let alive = true;
+          const off = presence.subscribe(() => {
+            if (alive) setTick((n) => n + 1);
+          });
+          setTick((n) => n + 1);
+          return () => {
+            alive = false;
+            off();
+          };
+        }
+        return presence.add(sessionId);
+      }, [placement, sessionId, presence]);
+      return placement === "hero" && typeof sessionId === "string" && presence.has(sessionId);
+    }
+
+    /**
+     * The session's model-directory store, resolved at render time. DSH caches
+     * a slot entry's inject() result per session binding, and right after a
+     * page load, host restart or session switch `directoryFor()` can still
+     * throw (no scope/binding yet). Resolving inside inject would cache that
+     * miss for good, so inject hands over a resolver and this hook retries
+     * (1 s for the first 30 s, then every 5 s) until the directory exists.
+     */
+    function useDirectory(direct, resolve) {
+      const [, setTick] = useState(0);
+      let resolved = direct ?? null;
+      if (resolved === null && typeof resolve === "function") {
+        try {
+          resolved = resolve() ?? null;
+        } catch {
+          resolved = null;
+        }
+      }
+      const missing = resolved === null && typeof resolve === "function";
+      useEffect(() => {
+        if (!missing) return undefined;
+        let alive = true;
+        let id = null;
+        let tries = 0;
+        const tick = () => {
+          id = null;
+          if (!alive) return;
+          tries += 1;
+          setTick((n) => n + 1);
+          id = setTimeout(tick, tries < 30 ? 1000 : 5000);
+        };
+        id = setTimeout(tick, 300);
+        return () => {
+          alive = false;
+          if (id !== null) clearTimeout(id);
+        };
+      }, [missing, resolve]);
+      return resolved;
+    }
+
+    /** Re-render every `ms` so relative times stay current. */
+    function useNow(ms) {
+      const [now, setNow] = useState(() => Date.now());
+      useEffect(() => {
+        const id = setInterval(() => setNow(Date.now()), ms);
+        return () => clearInterval(id);
+      }, [ms]);
+      return now;
+    }
+
+    function QuotaMeter({ t, w, now }) {
+      const pct = typeof w.remainingPercent === "number" ? Math.max(0, Math.min(100, w.remainingPercent)) : null;
+      const level = quotaLevel(pct);
+      const reset = resetText(t, w.resetAt, now);
+      const label = windowLabel(t, w);
+      return h(
+        "div",
+        { className: "dcpa-q-meter", "data-level": level },
+        h(
+          "div",
+          { className: "dcpa-q-meter-top" },
+          h("span", { title: label }, label),
+          h("span", { className: "dcpa-q-pct" }, pctText(pct))
+        ),
+        h(
+          "div",
+          {
+            className: "dcpa-q-track",
+            role: "meter",
+            "aria-label": label,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            ...(pct === null ? {} : { "aria-valuenow": Math.round(pct) }),
+          },
+          h("span", { className: "dcpa-q-fill", style: { width: `${pct ?? 0}%` } })
+        ),
+        reset ? h("span", { className: "dcpa-q-reset" }, reset) : null
+      );
+    }
+
+    function CredentialTags({ t, cred }) {
+      return [
+        cred.plan ? h("span", { key: "plan", className: "dcpa-q-tag", "data-tone": "info" }, cred.plan) : null,
+        cred.prefix ? h("span", { key: "prefix", className: "dcpa-q-tag" }, `${cred.prefix}/`) : null,
+        cred.status && cred.status !== "active"
+          ? h("span", { key: "status", className: "dcpa-q-tag", "data-tone": "danger" }, t(STATUS_KEYS[cred.status] ?? "qStatusError"))
+          : null,
+      ];
+    }
+
+    function CredentialWindows({ t, cred, windows, now }) {
+      if (windows.length > 0) {
+        return h(
+          "div",
+          { className: "dcpa-q-meters" },
+          windows.map((w, i) => h(QuotaMeter, { key: w.id ?? i, t, w, now }))
+        );
+      }
+      const lines = [
+        cred.quotaState === "error"
+          ? h("p", { key: "q", className: "dcpa-q-note", "data-tone": "error" }, t("qQuotaError"))
+          : h("p", { key: "q", className: "dcpa-q-note" }, t(cred.quotaState === "unsupported" ? "qQuotaUnsupported" : "qQuotaNone")),
+        cred.recent ? h("p", { key: "r", className: "dcpa-q-note" }, fmt(t, "qRecent", cred.recent)) : null,
+      ];
+      return h("div", { className: "dcpa-q-meters" }, h("div", null, lines));
+    }
+
+    function CredentialRow({ t, cred, now, pickerIds }) {
+      const [open, setOpen] = useState(false);
+      const models = Array.isArray(cred.models) ? cred.models : null;
+      return h(
+        "div",
+        { className: "dcpa-q-cred", "data-status": cred.status ?? "active" },
+        h(
+          "div",
+          { className: "dcpa-q-who" },
+          h("div", { className: "dcpa-q-name", title: cred.label || cred.id }, cred.label || cred.id),
+          h(
+            "div",
+            { className: "dcpa-q-meta" },
+            CredentialTags({ t, cred }),
+            models === null
+              ? h("span", null, t("qModelsUnknown"))
+              : h(
+                  "button",
+                  { type: "button", className: "dcpa-q-link", "aria-expanded": open, onClick: () => setOpen((v) => !v) },
+                  open ? t("qHideModels") : fmt(t, "qShowModels", { n: models.length })
+                ),
+            cred.statusMessage ? h("span", { title: cred.statusMessage }, cred.statusMessage) : null
+          )
+        ),
+        h(CredentialWindows, { t, cred, windows: credentialWindows(cred), now }),
+        open && models !== null
+          ? h(
+              "div",
+              { className: "dcpa-q-models" },
+              models.map((m) => h("code", { key: m, "data-picker": pickerIds.has(m) ? "true" : "false" }, m))
+            )
+          : null
+      );
+    }
+
+    function ModelChannelMap({ t, account }) {
+      const picker = Array.isArray(account.pickerModels) ? account.pickerModels : [];
+      return h(
+        "details",
+        { className: "dcpa-q-map" },
+        h(
+          "summary",
+          null,
+          h(
+            "div",
+            { className: "dcpa-q-row-main" },
+            h("div", { className: "dcpa-q-title" }, t("qMapTitle"), h(InfoTip, { t, text: t("qMapHint") }))
+          )
+        ),
+        picker.length === 0
+          ? h("p", { className: "dcpa-q-msg" }, t("qMapEmpty"))
+          : picker.map((m) => {
+              const summary = summarizeModelQuota({ accounts: [account] }, m.route, m.id);
+              const entries = summary?.entries ?? [];
+              const matchedBy = account.modelMatch?.[m.id];
+              return h(
+                "div",
+                { key: `${m.route}:${m.id}`, className: "dcpa-q-map-row" },
+                h("span", { className: "dcpa-q-map-model" }, m.id),
+                h(
+                  "span",
+                  { className: "dcpa-q-map-creds" },
+                  entries.length === 0
+                    ? h("span", null, t("qMapNone"))
+                    : entries.map(({ cred }) =>
+                        h(
+                          "span",
+                          { key: cred.id, className: "dcpa-q-tag", "data-tone": cred.status === "active" ? undefined : "danger", title: cred.label || cred.id },
+                          `${providerName(t, cred.provider)} · ${cred.label || cred.id}`
+                        )
+                      ),
+                  matchedBy && MATCH_KEYS[matchedBy] ? h("span", null, t(MATCH_KEYS[matchedBy])) : null
+                ),
+                h("span", { className: "dcpa-q-map-pct dcpa-q-pct" }, pctText(summary?.best))
+              );
+            })
+      );
+    }
+
+    function QuotaSummary({ t, credentials }) {
+      const stats = quotaStats(credentials);
+      const parts = [
+        ["ok", stats.healthy, "qStatHealthy"],
+        ["low", stats.low, "qStatLow"],
+        ["empty", stats.empty, "qStatEmpty"],
+        ["issue", stats.issue, "qStatIssue"],
+        ["unknown", stats.unknown, "qStatUnknown"],
+      ];
+      return h(
+        "div",
+        { className: "dcpa-q-summary" },
+        h(
+          "div",
+          { className: "dcpa-q-dist", role: "img", "aria-label": fmt(t, "qTotalCreds", { n: stats.total }) },
+          parts.filter(([, n]) => n > 0).map(([level, n]) => h("span", { key: level, "data-level": level, style: { flex: `${n} 1 0` } }))
+        ),
+        h(
+          "div",
+          { className: "dcpa-q-legend" },
+          h("span", null, fmt(t, "qTotalCreds", { n: stats.total })),
+          parts.filter(([level, n]) => level !== "unknown" || n > 0).map(([level, n, key]) =>
+            h("span", { key: level, "data-level": level }, h("i", { className: "dcpa-q-swatch" }), t(key), h("b", null, String(n)))
+          )
+        )
+      );
+    }
+
+    /** The "额度" tab: flat DSH settings rows, one account at a time. */
+    function QuotaPanel({ t, store = sharedQuota, accountId }) {
+      const snap = useQuota(store);
+      const now = useNow(30 * 1000);
+      const [activeId, setActiveId] = useState(null);
+      const [keyDraft, setKeyDraft] = useState("");
+      const [notice, setNotice] = useState(null);
+      const [providerFilter, setProviderFilter] = useState("all");
+      const [search, setSearch] = useState("");
+
+      const accounts = Array.isArray(snap.data?.accounts) ? snap.data.accounts : [];
+      const scoped = accountId !== undefined;
+      const account = scoped
+        ? accounts.find((a) => a.accountId === accountId) ?? null
+        : accounts.find((a) => a.accountId === activeId) ?? accounts[0] ?? null;
+      const credentials = Array.isArray(account?.credentials) ? account.credentials : [];
+      const pickerIds = useMemo(() => new Set((account?.pickerModels ?? []).map((m) => m.id)), [account]);
+      const busy = snap.busy !== null;
+
+      const providers = useMemo(() => {
+        const counts = new Map();
+        for (const c of credentials) counts.set(c.provider || "", (counts.get(c.provider || "") ?? 0) + 1);
+        return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+      }, [credentials]);
+
+      const groups = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        const map = new Map();
+        for (const c of credentials) {
+          if (providerFilter !== "all" && (c.provider || "") !== providerFilter) continue;
+          if (
+            q !== "" &&
+            !String(c.label ?? "").toLowerCase().includes(q) &&
+            !String(c.id ?? "").toLowerCase().includes(q) &&
+            !(Array.isArray(c.models) && c.models.some((m) => String(m).toLowerCase().includes(q)))
+          ) continue;
+          const key = c.provider || "";
+          if (!map.has(key)) map.set(key, []);
+          map.get(key).push(c);
+        }
+        // Problems first, then least remaining, so what needs attention is on top.
+        const rank = (c) => (c.status !== "active" ? 1 : 0);
+        return [...map.entries()].map(([key, list]) => [
+          key,
+          [...list].sort((a, b) => rank(a) - rank(b) || (credentialHeadroom(a) ?? 101) - (credentialHeadroom(b) ?? 101)),
+        ]);
+      }, [credentials, providerFilter, search]);
+
+      if (store === null || store === undefined) return null;
+
+      const saveKey = async () => {
+        if (account === null || keyDraft.trim() === "") return;
+        setNotice(null);
+        const result = await store.saveKey(account.accountId, keyDraft.trim());
+        if (result.ok) {
+          setKeyDraft("");
+          setNotice(t("qKeySaved"));
+        }
+      };
+      const clearKey = async () => {
+        if (account === null) return;
+        const name = account.displayName || account.accountId;
+        if (typeof window !== "undefined" && typeof window.confirm === "function" && !window.confirm(fmt(t, "qKeyClearConfirm", { name }))) return;
+        setNotice(null);
+        const result = await store.clearKey(account.accountId);
+        if (result.ok) setNotice(t("qKeyCleared"));
+      };
+
+      const errorText = account ? quotaErrorText(t, account) : null;
+      const refreshing = account?.refreshing === true || (snap.busy === "refresh" && snap.busyAccount === account?.accountId);
+      const shown = groups.reduce((n, [, list]) => n + list.length, 0);
+
+      return h(
+        "div",
+        { className: "dcpa-q", "data-dsh-plugin": MODULE_ID },
+        scoped
+          ? null
+          : h(
+              "div",
+              { className: "dcpa-q-head" },
+              h("h3", { className: "dcpa-q-h" }, t("qTitle")),
+              h("p", { className: "dcpa-q-desc" }, t("qSubtitle"))
+            ),
+        scoped && account === null ? h("p", { className: "dcpa-q-msg" }, t("qPeekLoading")) : null,
+        !scoped && accounts.length > 1
+          ? h(
+              "div",
+              { className: "dcpa-q-seg", role: "tablist", "aria-label": t("qAccountsLabel") },
+              accounts.map((a) =>
+                h(
+                  "button",
+                  {
+                    key: a.accountId,
+                    type: "button",
+                    role: "tab",
+                    className: "dcpa-q-seg-tab",
+                    "aria-selected": account?.accountId === a.accountId,
+                    onClick: () => {
+                      setActiveId(a.accountId);
+                      setKeyDraft("");
+                      setNotice(null);
+                      setProviderFilter("all");
+                      setSearch("");
+                    },
+                  },
+                  a.displayName || a.accountId,
+                  a.keyConfigured ? null : h("span", { className: "dcpa-q-seg-note" }, t("qKeyStatusUnset"))
+                )
+              )
+            )
+          : null,
+        snap.data !== null && accounts.length === 0 ? h("p", { className: "dcpa-q-msg" }, t("qNoAccounts")) : null,
+        account
+          ? h(
+              "div",
+              { className: "dcpa-q-row" },
+              h(
+                "div",
+                { className: "dcpa-q-row-main" },
+                h(
+                  "div",
+                  { className: "dcpa-q-title" },
+                  h("label", { htmlFor: `dcpa-q-key-${account.accountId}` }, t("qKeyLabel")),
+                  h(InfoTip, { t, text: fmt(t, "qKeyHint", { ref: account.keyRef ?? "" }) })
+                )
+              ),
+              h(
+                "div",
+                { className: "dcpa-q-actions" },
+                h(
+                  "span",
+                  { className: "dcpa-q-tag", "data-tone": account.keyConfigured ? "success" : undefined },
+                  account.keyConfigured ? t("qKeyStatusSet") : t("qKeyStatusUnset")
+                )
+              )
+            )
+          : null,
+        account
+          ? h(
+              "div",
+              { className: "dcpa-q-form" },
+              h("input", {
+                id: `dcpa-q-key-${account.accountId}`,
+                className: "dcpa-q-input",
+                type: "password",
+                autoComplete: "off",
+                spellCheck: false,
+                value: keyDraft,
+                placeholder: account.keyConfigured ? t("qKeySetPlaceholder") : t("qKeyUnsetPlaceholder"),
+                onChange: (e) => setKeyDraft(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") void saveKey();
+                },
+              }),
+              h(
+                "button",
+                { type: "button", className: "dcpa-q-btn", "data-variant": "primary", disabled: busy || keyDraft.trim() === "", onClick: () => void saveKey() },
+                snap.busy === "save" ? t("qKeySaving") : t("qKeySave")
+              ),
+              account.keyConfigured
+                ? h(
+                    "button",
+                    { type: "button", className: "dcpa-q-btn", "data-variant": "danger", disabled: busy, onClick: () => void clearKey() },
+                    t("qKeyClear")
+                  )
+                : null
+            )
+          : null,
+        account && account.keyConfigured
+          ? h(
+              "div",
+              { className: "dcpa-q-row" },
+              h(
+                "div",
+                { className: "dcpa-q-row-main" },
+                h("div", { className: "dcpa-q-title" }, t("qDataLabel")),
+                h(
+                  "div",
+                  { className: "dcpa-q-sub" },
+                  refreshing
+                    ? t("qRefreshing")
+                    : account.fetchedAt
+                    ? fmt(t, "qUpdated", { time: agoText(t, account.fetchedAt, now) })
+                    : t("qNeverUpdated"),
+                  account.enabled === false ? ` · ${t("qAccountDisabled")}` : ""
+                )
+              ),
+              h(
+                "div",
+                { className: "dcpa-q-actions" },
+                h(
+                  "button",
+                  { type: "button", className: "dcpa-q-btn", "data-variant": "outline", disabled: busy || refreshing, onClick: () => void store.refresh(account.accountId) },
+                  t("qRefresh")
+                )
+              )
+            )
+          : null,
+        errorText ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, errorText, credentials.length > 0 ? ` ${t("qStale")}` : "") : null,
+        snap.error ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, fmt(t, "qErrLoad", { error: snap.error })) : null,
+        notice ? h("p", { className: "dcpa-q-msg", "data-tone": "ok", role: "status" }, notice) : null,
+        account && account.keyConfigured && credentials.length === 0 && account.state === "ok"
+          ? h("p", { className: "dcpa-q-msg" }, t("qNoCredentials"))
+          : null,
+        account && account.keyConfigured && credentials.length > 0 ? h(QuotaSummary, { t, credentials }) : null,
+        account && account.keyConfigured && (providers.length > 1 || credentials.length > 8)
+          ? h(
+              "div",
+              { className: "dcpa-q-tools" },
+              providers.length > 1
+                ? [["all", credentials.length], ...providers].map(([key, count]) =>
+                    h(
+                      "button",
+                      {
+                        key: key || "_",
+                        type: "button",
+                        className: "dcpa-q-filter",
+                        "aria-pressed": providerFilter === key,
+                        onClick: () => setProviderFilter(key),
+                      },
+                      key === "all" ? t("qFilterAll") : providerName(t, key),
+                      h("small", null, String(count))
+                    )
+                  )
+                : null,
+              credentials.length > 8
+                ? h("input", {
+                    className: "dcpa-q-input",
+                    type: "search",
+                    value: search,
+                    placeholder: t("qSearchPlaceholder"),
+                    "aria-label": t("qSearchPlaceholder"),
+                    onChange: (e) => setSearch(e.target.value),
+                  })
+                : null
+            )
+          : null,
+        account && account.keyConfigured && credentials.length > 0 && shown === 0 ? h("p", { className: "dcpa-q-msg" }, t("qNoMatch")) : null,
+        account && account.keyConfigured
+          ? groups.map(([key, list]) =>
+              h(
+                "section",
+                { key: key || "_", "aria-label": providerName(t, key) },
+                h("div", { className: "dcpa-q-group-title" }, providerName(t, key), h("small", null, String(list.length))),
+                list.map((cred) => h(CredentialRow, { key: cred.id, t, cred, now, pickerIds }))
+              )
+            )
+          : null,
+        account && account.keyConfigured && credentials.length > 0 ? h(ModelChannelMap, { t, account }) : null
+      );
+    }
+
+    /** The CLIProxyAPI settings section: accounts, each with 连接 / 模型 / 额度 tabs. */
+    function CpaSectionPage({ t }) {
+      return h(CpaSettingsPanel, { t });
+    }
+
+    /** Snapshot of the session's model directory (current or pending selection). */
+    function useSelection(directory) {
       const [, setTick] = useState(0);
-      let resolved = direct ?? null;
-      if (resolved === null && typeof resolve === "function") {
-        try {
-          resolved = resolve() ?? null;
-        } catch {
-          resolved = null;
-        }
-      }
-      const missing = resolved === null && typeof resolve === "function";
       useEffect(() => {
-        if (!missing) return undefined;
+        if (!directory || typeof directory.subscribe !== "function") return undefined;
         let alive = true;
-        let id = null;
-        let tries = 0;
-        const tick = () => {
-          id = null;
-          if (!alive) return;
-          tries += 1;
-          setTick((n) => n + 1);
-          id = setTimeout(tick, tries < 30 ? 1000 : 5000);
-        };
-        id = setTimeout(tick, 300);
+        const off = directory.subscribe(() => {
+          if (alive) setTick((n) => n + 1);
+        });
         return () => {
           alive = false;
-          if (id !== null) clearTimeout(id);
+          off?.();
         };
-      }, [missing, resolve]);
-      return resolved;
+      }, [directory]);
+      const snapshot = directory && typeof directory.getSnapshot === "function" ? directory.getSnapshot() : null;
+      const current = snapshot?.pending ?? snapshot?.current ?? null;
+      return current && typeof current.provider === "string" && typeof current.model === "string" ? current : null;
     }
 
-    /** Re-render every `ms` so relative times stay current. */
-    function useNow(ms) {
-      const [now, setNow] = useState(() => Date.now());
-      useEffect(() => {
-        const id = setInterval(() => setNow(Date.now()), ms);
-        return () => clearInterval(id);
-      }, [ms]);
-      return now;
-    }
+    /**
+     * Composer badge left of the model picker: signal bars + best remaining
+     * percentage of the credentials that serve the selected model on the
+     * selected model's own CPA account; click opens a peek list. Accounts
+     * without a management key show nothing.
+     */
+    function QuotaBadge({ t, directory: directProp = null, resolveDirectory = null, store = sharedQuota, sessionId = null, placement = "composer", presence = composerBadges }) {
+      const shadowed = useBadgePlacement(placement, sessionId, presence);
+      const directory = useDirectory(directProp, shadowed ? null : resolveDirectory);
+      const selection = useSelection(shadowed ? null : directory);
+      const snap = useQuota(selection ? store : null);
+      const now = useNow(60 * 1000);
+      const [open, setOpen] = useState(false);
+      const [pos, setPos] = useState(null);
+      const wrapRef = useRef(null);
+      const buttonRef = useRef(null);
 
-    function QuotaMeter({ t, w, now }) {
-      const pct = typeof w.remainingPercent === "number" ? Math.max(0, Math.min(100, w.remainingPercent)) : null;
-      const level = quotaLevel(pct);
-      const reset = resetText(t, w.resetAt, now);
-      const label = windowLabel(t, w);
-      return h(
-        "div",
-        { className: "dcpa-q-meter", "data-level": level },
-        h(
-          "div",
-          { className: "dcpa-q-meter-top" },
-          h("span", { title: label }, label),
-          h("span", { className: "dcpa-q-pct" }, pctText(pct))
-        ),
-        h(
-          "div",
-          {
-            className: "dcpa-q-track",
-            role: "meter",
-            "aria-label": label,
-            "aria-valuemin": 0,
-            "aria-valuemax": 100,
-            ...(pct === null ? {} : { "aria-valuenow": Math.round(pct) }),
-          },
-          h("span", { className: "dcpa-q-fill", style: { width: `${pct ?? 0}%` } })
-        ),
-        reset ? h("span", { className: "dcpa-q-reset" }, reset) : null
-      );
-    }
+      const summary = selection ? summarizeModelQuota(snap.data, selection.provider, selection.model) : null;
+      const visible = !shadowed && summary !== null && summary.account.keyConfigured === true;
 
-    function CredentialTags({ t, cred }) {
-      return [
-        cred.plan ? h("span", { key: "plan", className: "dcpa-q-tag", "data-tone": "info" }, cred.plan) : null,
-        cred.prefix ? h("span", { key: "prefix", className: "dcpa-q-tag" }, `${cred.prefix}/`) : null,
-        cred.status && cred.status !== "active"
-          ? h("span", { key: "status", className: "dcpa-q-tag", "data-tone": "danger" }, t(STATUS_KEYS[cred.status] ?? "qStatusError"))
-          : null,
-      ];
-    }
+      useEffect(() => {
+        if (!open) return undefined;
+        const place = () => {
+          const rect = buttonRef.current?.getBoundingClientRect?.();
+          if (!rect || typeof window === "undefined") return;
+          const width = Math.min(340, window.innerWidth - 32);
+          const left = Math.max(16, Math.min(rect.left, window.innerWidth - width - 16));
+          setPos({ left, bottom: Math.max(16, window.innerHeight - rect.top + 6), width });
+        };
+        place();
+        const onDown = (e) => {
+          if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+        };
+        const onKey = (e) => {
+          if (e.key === "Escape") {
+            setOpen(false);
+            buttonRef.current?.focus?.();
+          }
+        };
+        document.addEventListener("mousedown", onDown, true);
+        document.addEventListener("keydown", onKey, true);
+        window.addEventListener("resize", place);
+        return () => {
+          document.removeEventListener("mousedown", onDown, true);
+          document.removeEventListener("keydown", onKey, true);
+          window.removeEventListener("resize", place);
+        };
+      }, [open]);
 
-    function CredentialWindows({ t, cred, windows, now }) {
-      if (windows.length > 0) {
-        return h(
-          "div",
-          { className: "dcpa-q-meters" },
-          windows.map((w, i) => h(QuotaMeter, { key: w.id ?? i, t, w, now }))
-        );
-      }
-      const lines = [
-        cred.quotaState === "error"
-          ? h("p", { key: "q", className: "dcpa-q-note", "data-tone": "error" }, t("qQuotaError"))
-          : h("p", { key: "q", className: "dcpa-q-note" }, t(cred.quotaState === "unsupported" ? "qQuotaUnsupported" : "qQuotaNone")),
-        cred.recent ? h("p", { key: "r", className: "dcpa-q-note" }, fmt(t, "qRecent", cred.recent)) : null,
-      ];
-      return h("div", { className: "dcpa-q-meters" }, h("div", null, lines));
-    }
+      useEffect(() => {
+        if (!visible && open) setOpen(false);
+      }, [visible, open]);
 
-    function CredentialRow({ t, cred, now, pickerIds }) {
-      const [open, setOpen] = useState(false);
-      const models = Array.isArray(cred.models) ? cred.models : null;
-      return h(
-        "div",
-        { className: "dcpa-q-cred", "data-status": cred.status ?? "active" },
-        h(
-          "div",
-          { className: "dcpa-q-who" },
-          h("div", { className: "dcpa-q-name", title: cred.label || cred.id }, cred.label || cred.id),
-          h(
-            "div",
-            { className: "dcpa-q-meta" },
-            CredentialTags({ t, cred }),
-            models === null
-              ? h("span", null, t("qModelsUnknown"))
-              : h(
-                  "button",
-                  { type: "button", className: "dcpa-q-link", "aria-expanded": open, onClick: () => setOpen((v) => !v) },
-                  open ? t("qHideModels") : fmt(t, "qShowModels", { n: models.length })
-                ),
-            cred.statusMessage ? h("span", { title: cred.statusMessage }, cred.statusMessage) : null
-          )
-        ),
-        h(CredentialWindows, { t, cred, windows: credentialWindows(cred), now }),
-        open && models !== null
-          ? h(
-              "div",
-              { className: "dcpa-q-models" },
-              models.map((m) => h("code", { key: m, "data-picker": pickerIds.has(m) ? "true" : "false" }, m))
-            )
-          : null
-      );
-    }
+      if (!visible) return null;
+      const { account, entries, best, usableCount } = summary;
+      const loadingFirst = account.fetchedAt === undefined && (account.state === "loading" || account.refreshing === true || account.state === "idle");
+      const level = quotaLevel(best);
+      const label = fmt(t, "qBadgeLabel", { model: selection.model });
+      const errorText = quotaErrorText(t, account);
+      const refreshing = account.refreshing === true || snap.busy === "refresh";
 
-    function ModelChannelMap({ t, account }) {
-      const picker = Array.isArray(account.pickerModels) ? account.pickerModels : [];
-      return h(
-        "details",
-        { className: "dcpa-q-map" },
-        h(
-          "summary",
-          null,
-          h(
+      const peek = open
+        ? h(
             "div",
-            { className: "dcpa-q-row-main" },
-            h("div", { className: "dcpa-q-title" }, t("qMapTitle"), h(InfoTip, { t, text: t("qMapHint") }))
-          )
-        ),
-        picker.length === 0
-          ? h("p", { className: "dcpa-q-msg" }, t("qMapEmpty"))
-          : picker.map((m) => {
-              const summary = summarizeModelQuota({ accounts: [account] }, m.route, m.id);
-              const entries = summary?.entries ?? [];
-              const matchedBy = account.modelMatch?.[m.id];
-              return h(
+            {
+              className: "dcpa-q-pop",
+              role: "dialog",
+              "aria-label": label,
+              style: pos ? { left: `${pos.left}px`, bottom: `${pos.bottom}px`, width: `${pos.width}px` } : { visibility: "hidden" },
+            },
+            h(
+              "div",
+              { className: "dcpa-q-pop-head" },
+              h("div", { className: "dcpa-q-pop-model" }, selection.model),
+              h("div", { className: "dcpa-q-pop-sub" }, `${account.displayName || account.accountId} · ${fmt(t, "qPeekCreds", { n: usableCount })}`)
+            ),
+            errorText ? h("p", { className: "dcpa-q-pop-text", "data-tone": "error" }, errorText) : null,
+            loadingFirst ? h("p", { className: "dcpa-q-pop-text" }, t("qPeekLoading")) : null,
+            !loadingFirst && entries.length === 0 ? h("p", { className: "dcpa-q-pop-text" }, t("qPeekNoCreds")) : null,
+            entries.map(({ cred, windows, headroom }, index) =>
+              h(
                 "div",
-                { key: `${m.route}:${m.id}`, className: "dcpa-q-map-row" },
-                h("span", { className: "dcpa-q-map-model" }, m.id),
+                { key: cred.id, className: "dcpa-q-pop-cred" },
                 h(
-                  "span",
-                  { className: "dcpa-q-map-creds" },
-                  entries.length === 0
-                    ? h("span", null, t("qMapNone"))
-                    : entries.map(({ cred }) =>
-                        h(
-                          "span",
-                          { key: cred.id, className: "dcpa-q-tag", "data-tone": cred.status === "active" ? undefined : "danger", title: cred.label || cred.id },
-                          `${providerName(t, cred.provider)} · ${cred.label || cred.id}`
-                        )
-                      ),
-                  matchedBy && MATCH_KEYS[matchedBy] ? h("span", null, t(MATCH_KEYS[matchedBy])) : null
+                  "div",
+                  { className: "dcpa-q-pop-who" },
+                  h("span", { className: "dcpa-q-tag" }, providerName(t, cred.provider)),
+                  h("span", { className: "dcpa-q-name", title: cred.label || cred.id }, cred.label || cred.id),
+                  index === 0 && cred.status === "active" && headroom !== null && entries.length > 1
+                    ? h("span", { className: "dcpa-q-tag", "data-tone": "success" }, t("qPeekBest"))
+                    : null,
+                  CredentialTags({ t, cred })
                 ),
-                h("span", { className: "dcpa-q-map-pct dcpa-q-pct" }, pctText(summary?.best))
-              );
-            })
-      );
-    }
+                h(CredentialWindows, { t, cred, windows, now })
+              )
+            ),
+            h(
+              "div",
+              { className: "dcpa-q-pop-foot" },
+              h("span", null, account.fetchedAt ? fmt(t, "qUpdated", { time: agoText(t, account.fetchedAt, now) }) : t("qPeekFooter")),
+              h(
+                "button",
+                {
+                  type: "button",
+                  className: "dcpa-q-btn",
+                  disabled: snap.busy !== null || account.refreshing === true,
+                  onClick: () => void store?.refresh(account.accountId),
+                },
+                refreshing ? t("qRefreshing") : t("qRefresh")
+              )
+            )
+          )
+        : null;
 
-    function QuotaSummary({ t, credentials }) {
-      const stats = quotaStats(credentials);
-      const parts = [
-        ["ok", stats.healthy, "qStatHealthy"],
-        ["low", stats.low, "qStatLow"],
-        ["empty", stats.empty, "qStatEmpty"],
-        ["issue", stats.issue, "qStatIssue"],
-        ["unknown", stats.unknown, "qStatUnknown"],
-      ];
       return h(
-        "div",
-        { className: "dcpa-q-summary" },
+        "span",
+        { ref: wrapRef, className: "dcpa-q-wrap", "data-placement": placement, "data-dsh-plugin": MODULE_ID },
         h(
-          "div",
-          { className: "dcpa-q-dist", role: "img", "aria-label": fmt(t, "qTotalCreds", { n: stats.total }) },
-          parts.filter(([, n]) => n > 0).map(([level, n]) => h("span", { key: level, "data-level": level, style: { flex: `${n} 1 0` } }))
+          "button",
+          {
+            ref: buttonRef,
+            type: "button",
+            className: "dcpa-q-badge",
+            "data-level": level,
+            "aria-label": label,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            title: label,
+            onClick: () => setOpen((v) => !v),
+          },
+          h("span", { className: "dcpa-q-bars", "data-level": level, "aria-hidden": "true" }, h("i"), h("i"), h("i")),
+          h("span", { className: "dcpa-q-badge-pct" }, loadingFirst ? "…" : pctText(best))
         ),
-        h(
-          "div",
-          { className: "dcpa-q-legend" },
-          h("span", null, fmt(t, "qTotalCreds", { n: stats.total })),
-          parts.filter(([level, n]) => level !== "unknown" || n > 0).map(([level, n, key]) =>
-            h("span", { key: level, "data-level": level }, h("i", { className: "dcpa-q-swatch" }), t(key), h("b", null, String(n)))
-          )
-        )
+        peek
       );
     }
 
-    /** The "额度" tab: flat DSH settings rows, one account at a time. */
-    function QuotaPanel({ t, store = sharedQuota, accountId }) {
-      const snap = useQuota(store);
-      const now = useNow(30 * 1000);
-      const [activeId, setActiveId] = useState(null);
-      const [keyDraft, setKeyDraft] = useState("");
-      const [notice, setNotice] = useState(null);
-      const [providerFilter, setProviderFilter] = useState("all");
-      const [search, setSearch] = useState("");
+    // #endregion
 
-      const accounts = Array.isArray(snap.data?.accounts) ? snap.data.accounts : [];
-      const scoped = accountId !== undefined;
-      const account = scoped
-        ? accounts.find((a) => a.accountId === accountId) ?? null
-        : accounts.find((a) => a.accountId === activeId) ?? accounts[0] ?? null;
-      const credentials = Array.isArray(account?.credentials) ? account.credentials : [];
-      const pickerIds = useMemo(() => new Set((account?.pickerModels ?? []).map((m) => m.id)), [account]);
-      const busy = snap.busy !== null;
+    // #region Generation-model button (composer / hero)
 
-      const providers = useMemo(() => {
-        const counts = new Map();
-        for (const c of credentials) counts.set(c.provider || "", (counts.get(c.provider || "") ?? 0) + 1);
-        return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
-      }, [credentials]);
+    function mediaFileURL(sessionId, id) {
+      return `${API.mediaFile}?sessionId=${encodeURIComponent(sessionId)}&id=${encodeURIComponent(id)}`;
+    }
 
-      const groups = useMemo(() => {
-        const q = search.trim().toLowerCase();
-        const map = new Map();
-        for (const c of credentials) {
-          if (providerFilter !== "all" && (c.provider || "") !== providerFilter) continue;
-          if (
-            q !== "" &&
-            !String(c.label ?? "").toLowerCase().includes(q) &&
-            !String(c.id ?? "").toLowerCase().includes(q) &&
-            !(Array.isArray(c.models) && c.models.some((m) => String(m).toLowerCase().includes(q)))
-          ) continue;
-          const key = c.provider || "";
-          if (!map.has(key)) map.set(key, []);
-          map.get(key).push(c);
-        }
-        // Problems first, then least remaining, so what needs attention is on top.
-        const rank = (c) => (c.status !== "active" ? 1 : 0);
-        return [...map.entries()].map(([key, list]) => [
-          key,
-          [...list].sort((a, b) => rank(a) - rank(b) || (credentialHeadroom(a) ?? 101) - (credentialHeadroom(b) ?? 101)),
-        ]);
-      }, [credentials, providerFilter, search]);
+    function mediaSessionURL(sessionId) {
+      return typeof sessionId === "string" && sessionId !== "" ? `${API.mediaSession}?sessionId=${encodeURIComponent(sessionId)}` : API.mediaSession;
+    }
 
-      if (store === null || store === undefined) return null;
+    const IMAGE_ICON = () =>
+      h(
+        "svg",
+        { width: 14, height: 14, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+        h("rect", { x: 1.75, y: 2.75, width: 12.5, height: 10.5, rx: 2, stroke: "currentColor", strokeWidth: 1.3 }),
+        h("circle", { cx: 5.5, cy: 6.25, r: 1.25, fill: "currentColor" }),
+        h("path", { d: "M2.5 12l3.6-3.4 2.4 2.2 2.2-2 2.8 2.6", stroke: "currentColor", strokeWidth: 1.3, strokeLinejoin: "round" })
+      );
 
-      const saveKey = async () => {
-        if (account === null || keyDraft.trim() === "") return;
-        setNotice(null);
-        const result = await store.saveKey(account.accountId, keyDraft.trim());
-        if (result.ok) {
-          setKeyDraft("");
-          setNotice(t("qKeySaved"));
+    /** Composer row width (px) below which the image / video buttons show icons only. */
+    const MEDIA_COMPACT_WIDTH = 640;
+
+    const VIDEO_ICON = () =>
+      h(
+        "svg",
+        { width: 14, height: 14, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+        h("rect", { x: 1.75, y: 3.75, width: 9, height: 8.5, rx: 2, stroke: "currentColor", strokeWidth: 1.3 }),
+        h("path", { d: "M10.75 7l3.5-2v6l-3.5-2", stroke: "currentColor", strokeWidth: 1.3, strokeLinejoin: "round" })
+      );
+
+    const AGENT_ICON = () =>
+      h(
+        "svg",
+        { width: 14, height: 14, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" },
+        h("circle", { cx: 8, cy: 8, r: 2.15, stroke: "currentColor", strokeWidth: 1.25 }),
+        h("path", {
+          d: "M8 1.9v1.5M8 12.6v1.5M1.9 8h1.5M12.6 8h1.5M3.7 3.7l1.1 1.1M11.2 11.2l1.1 1.1M12.3 3.7l-1.1 1.1M4.8 11.2l-1.1 1.1",
+          stroke: "currentColor",
+          strokeWidth: 1.2,
+          strokeLinecap: "round",
+        })
+      );
+
+    /**
+     * Pick the session's image and video models next to the composer (results
+     * show in the /cpa-image and /cpa-video chat rows). Each kind has its own
+     * button and menu; the agent rules are a secondary menu of either one.
+     * Renders nothing without a generation model.
+     * Hook order: slot 0 = data, slot 1 = loading (test harness).
+     */
+    function MediaChip({ t, sessionId = null, placement = "composer", presence = mediaChips }) {
+      const [data, setData] = useState(null);
+      const [loading, setLoading] = useState(true);
+      // Which kind's model menu is open (image / video), or null.
+      const [openKind, setOpenKind] = useState(null);
+      const [pos, setPos] = useState(null);
+      const [busy, setBusy] = useState(false);
+      const [error, setError] = useState(null);
+      // Bumped to reload while no image model is known yet.
+      const [retry, setRetry] = useState(0);
+      // Secondary menu: this session's agent tool rules.
+      const [agentPane, setAgentPane] = useState(false);
+      const wrapRef = useRef(null);
+      const buttonRef = useRef(null);
+      const mounted = useRef(true);
+      const shadowed = useBadgePlacement(placement, sessionId, presence);
+      // Icon-only buttons while the composer row is narrow (names move to aria-label).
+      const [compact, setCompact] = useState(false);
+      useEffect(() => {
+        // Measure the composer card (the nearest ancestor holding the text input),
+        // not the small button cluster this chip sits in.
+        if (typeof document === "undefined") return undefined;
+        let row = wrapRef.current?.parentElement ?? null;
+        for (let el = row; el && el !== document.body; el = el.parentElement) {
+          if (el.querySelector?.("textarea, [contenteditable='true'], [contenteditable='plaintext-only']")) { row = el; break; }
         }
-      };
-      const clearKey = async () => {
-        if (account === null) return;
-        const name = account.displayName || account.accountId;
-        if (typeof window !== "undefined" && typeof window.confirm === "function" && !window.confirm(fmt(t, "qKeyClearConfirm", { name }))) return;
-        setNotice(null);
-        const result = await store.clearKey(account.accountId);
-        if (result.ok) setNotice(t("qKeyCleared"));
+        if (!row || typeof ResizeObserver === "undefined") return undefined;
+        const measure = () => setCompact(row.clientWidth > 0 && row.clientWidth < MEDIA_COMPACT_WIDTH);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(row);
+        return () => observer.disconnect();
+      }, [shadowed, data !== null]);
+
+      const closeMenu = () => {
+        setOpenKind(null);
+        setAgentPane(false);
       };
 
-      const errorText = account ? quotaErrorText(t, account) : null;
-      const refreshing = account?.refreshing === true || (snap.busy === "refresh" && snap.busyAccount === account?.accountId);
-      const shown = groups.reduce((n, [, list]) => n + list.length, 0);
+      useEffect(() => {
+        mounted.current = true;
+        return () => {
+          mounted.current = false;
+        };
+      }, []);
 
-      return h(
-        "div",
-        { className: "dcpa-q", "data-dsh-plugin": MODULE_ID },
-        scoped
-          ? null
-          : h(
-              "div",
-              { className: "dcpa-q-head" },
-              h("h3", { className: "dcpa-q-h" }, t("qTitle")),
-              h("p", { className: "dcpa-q-desc" }, t("qSubtitle"))
-            ),
-        scoped && account === null ? h("p", { className: "dcpa-q-msg" }, t("qPeekLoading")) : null,
-        !scoped && accounts.length > 1
-          ? h(
-              "div",
-              { className: "dcpa-q-seg", role: "tablist", "aria-label": t("qAccountsLabel") },
-              accounts.map((a) =>
-                h(
-                  "button",
-                  {
-                    key: a.accountId,
-                    type: "button",
-                    role: "tab",
-                    className: "dcpa-q-seg-tab",
-                    "aria-selected": account?.accountId === a.accountId,
-                    onClick: () => {
-                      setActiveId(a.accountId);
-                      setKeyDraft("");
-                      setNotice(null);
-                      setProviderFilter("all");
-                      setSearch("");
-                    },
-                  },
-                  a.displayName || a.accountId,
-                  a.keyConfigured ? null : h("span", { className: "dcpa-q-seg-note" }, t("qKeyStatusUnset"))
-                )
-              )
-            )
-          : null,
-        snap.data !== null && accounts.length === 0 ? h("p", { className: "dcpa-q-msg" }, t("qNoAccounts")) : null,
-        account
-          ? h(
-              "div",
-              { className: "dcpa-q-row" },
-              h(
-                "div",
-                { className: "dcpa-q-row-main" },
-                h(
-                  "div",
-                  { className: "dcpa-q-title" },
-                  h("label", { htmlFor: `dcpa-q-key-${account.accountId}` }, t("qKeyLabel")),
-                  h(InfoTip, { t, text: fmt(t, "qKeyHint", { ref: account.keyRef ?? "" }) })
-                )
-              ),
-              h(
-                "div",
-                { className: "dcpa-q-actions" },
-                h(
-                  "span",
-                  { className: "dcpa-q-tag", "data-tone": account.keyConfigured ? "success" : undefined },
-                  account.keyConfigured ? t("qKeyStatusSet") : t("qKeyStatusUnset")
-                )
-              )
-            )
-          : null,
-        account
-          ? h(
-              "div",
-              { className: "dcpa-q-form" },
-              h("input", {
-                id: `dcpa-q-key-${account.accountId}`,
-                className: "dcpa-q-input",
-                type: "password",
-                autoComplete: "off",
-                spellCheck: false,
-                value: keyDraft,
-                placeholder: account.keyConfigured ? t("qKeySetPlaceholder") : t("qKeyUnsetPlaceholder"),
-                onChange: (e) => setKeyDraft(e.target.value),
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") void saveKey();
-                },
-              }),
-              h(
-                "button",
-                { type: "button", className: "dcpa-q-btn", "data-variant": "primary", disabled: busy || keyDraft.trim() === "", onClick: () => void saveKey() },
-                snap.busy === "save" ? t("qKeySaving") : t("qKeySave")
-              ),
-              account.keyConfigured
-                ? h(
-                    "button",
-                    { type: "button", className: "dcpa-q-btn", "data-variant": "danger", disabled: busy, onClick: () => void clearKey() },
-                    t("qKeyClear")
-                  )
-                : null
-            )
-          : null,
-        account && account.keyConfigured
-          ? h(
+      // Load on mount, on session change and whenever a model menu opens. While
+      // the host reports no generation model, or says its catalog missed the
+      // plain listing that carries some image models, look again after 3 s,
+      // 10 s, then every 30 s; otherwise there is no background polling.
+      useEffect(() => {
+        if (shadowed) return undefined;
+        const controller = new AbortController();
+        let again = null;
+        (async () => {
+          let needsRetry = true;
+          try {
+            const res = await fetch(mediaSessionURL(sessionId), { cache: "no-store", signal: controller.signal });
+            const body = await res.json();
+            if (controller.signal.aborted) return;
+            if (!res.ok || body.ok === false) throw new Error(body.error || `HTTP ${res.status}`);
+            setData(body.session ?? null);
+            needsRetry = body.session?.catalogIncomplete === true ||
+              !["image", "video"].some((kind) => Array.isArray(body.session?.options?.[kind]) && body.session.options[kind].length > 0);
+          } catch (err) {
+            if (!controller.signal.aborted) setError(err instanceof Error ? err.message : String(err));
+          } finally {
+            if (!controller.signal.aborted) setLoading(false);
+          }
+          // 3 s, 10 s, then every 30 s (the host also syncs once on this request).
+          if (needsRetry && !controller.signal.aborted) again = setTimeout(() => setRetry((n) => n + 1), [3000, 10000][retry] ?? 30 * 1000);
+        })();
+        return () => {
+          controller.abort();
+          if (again !== null) clearTimeout(again);
+        };
+      }, [sessionId, shadowed, openKind, retry]);
+
+      useEffect(() => {
+        if (openKind === null) return undefined;
+        const place = () => {
+          // Anchor the menu to the whole two-button group; it sits left of the
+          // model selector either way.
+          const rect = wrapRef.current?.getBoundingClientRect?.();
+          if (!rect || typeof window === "undefined") return;
+          const width = Math.min(340, window.innerWidth - 32);
+          const left = Math.max(16, Math.min(rect.left, window.innerWidth - width - 16));
+          setPos({ left, bottom: Math.max(16, window.innerHeight - rect.top + 6), width });
+        };
+        place();
+        const onDown = (e) => {
+          if (wrapRef.current && !wrapRef.current.contains(e.target)) closeMenu();
+        };
+        const onKey = (e) => {
+          if (e.key === "Escape") {
+            closeMenu();
+            buttonRef.current?.focus?.();
+          }
+        };
+        document.addEventListener("mousedown", onDown, true);
+        document.addEventListener("keydown", onKey, true);
+        window.addEventListener("resize", place);
+        return () => {
+          document.removeEventListener("mousedown", onDown, true);
+          document.removeEventListener("keydown", onKey, true);
+          window.removeEventListener("resize", place);
+        };
+      }, [openKind]);
+
+      const hasSession = typeof sessionId === "string" && sessionId !== "";
+      const agent = data?.agent ?? null;
+      const agentAvailable = agent?.enabled === true && hasSession;
+      const kinds = ["image", "video"]
+        .map((kind) => {
+          const options = Array.isArray(data?.options?.[kind]) ? data.options[kind] : [];
+          const currentRef = data?.current?.[kind]?.ref ?? null;
+          const current = options.find((o) => o.ref === currentRef) ?? null;
+          return { kind, options, currentRef, source: data?.current?.[kind]?.source ?? null, name: current ? current.name || current.modelId : null };
+        })
+        .filter((k) => k.options.length > 0);
+      if (shadowed || kinds.length === 0) return null;
+
+      const imageKind = kinds.find((k) => k.kind === "image") ?? null;
+      const videoKind = kinds.find((k) => k.kind === "video") ?? null;
+      const activeKind = openKind === "image" ? imageKind : openKind === "video" ? videoKind : null;
+      const showingAgent = openKind !== null && agentPane && agentAvailable;
+      const kindLabel = (k) =>
+        k.name
+          ? fmt(t, k.kind === "image" ? "mediaChipLabel" : "mediaChipVideoLabel", { model: k.name })
+          : t(k.kind === "image" ? "mediaChipChoose" : "mediaChipVideoChoose");
+      const openMenu = (kind, element) => {
+        if (openKind === kind) {
+          closeMenu();
+          return;
+        }
+        buttonRef.current = element ?? null;
+        setAgentPane(false);
+        setOpenKind(kind);
+      };
+
+      const pick = async (kind, ref) => {
+        setBusy(true);
+        setError(null);
+        try {
+          const body = await postJson(API.mediaSessionSave, { ...(hasSession ? { sessionId } : {}), kind, ref });
+          if (mounted.current) setData(body.session ?? null);
+        } catch (err) {
+          if (mounted.current) setError(mediaErrorText(t, err));
+        } finally {
+          if (mounted.current) setBusy(false);
+        }
+      };
+
+      const optionGroups = (k) => {
+        const groups = [];
+        for (const option of k.options) {
+          const group = groups.find((g) => g.accountId === option.accountId);
+          if (group) group.items.push(option);
+          else groups.push({ accountId: option.accountId, name: option.accountName, items: [option] });
+        }
+        return h(
+          "div",
+          { className: "dcpa-m-section", "data-kind": k.kind },
+          k.source !== null && k.source !== "session" && hasSession ? h("p", { className: "dcpa-q-pop-text" }, t("mediaChipInherited")) : null,
+          groups.map((group) =>
+            h(
               "div",
-              { className: "dcpa-q-row" },
-              h(
-                "div",
-                { className: "dcpa-q-row-main" },
-                h("div", { className: "dcpa-q-title" }, t("qDataLabel")),
-                h(
-                  "div",
-                  { className: "dcpa-q-sub" },
-                  refreshing
-                    ? t("qRefreshing")
-                    : account.fetchedAt
-                    ? fmt(t, "qUpdated", { time: agoText(t, account.fetchedAt, now) })
-                    : t("qNeverUpdated"),
-                  account.enabled === false ? ` · ${t("qAccountDisabled")}` : ""
-                )
-              ),
-              h(
-                "div",
-                { className: "dcpa-q-actions" },
+              { key: group.accountId, role: "group", "aria-label": group.name },
+              groups.length > 1 ? h("div", { className: "dcpa-m-group" }, group.name) : null,
+              group.items.map((option) =>
                 h(
                   "button",
-                  { type: "button", className: "dcpa-q-btn", "data-variant": "outline", disabled: busy || refreshing, onClick: () => void store.refresh(account.accountId) },
-                  t("qRefresh")
+                  {
+                    key: option.ref,
+                    type: "button",
+                    role: "menuitemradio",
+                    "aria-checked": option.ref === k.currentRef,
+                    className: "dcpa-menu-item dcpa-m-option",
+                    disabled: busy,
+                    onClick: () => void pick(k.kind, option.ref),
+                  },
+                  h("span", { className: "dcpa-m-check", "aria-hidden": "true" }, option.ref === k.currentRef ? "✓" : ""),
+                  h("span", { className: "dcpa-m-name" }, option.name || option.modelId),
+                  option.aliasOf ? h("span", { className: "dcpa-q-tag", "data-tone": "info" }, fmt(t, "mediaAliasTag", { target: option.aliasOf })) : null
                 )
               )
             )
-          : null,
-        errorText ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, errorText, credentials.length > 0 ? ` ${t("qStale")}` : "") : null,
-        snap.error ? h("p", { className: "dcpa-q-msg", "data-tone": "error", role: "alert" }, fmt(t, "qErrLoad", { error: snap.error })) : null,
-        notice ? h("p", { className: "dcpa-q-msg", "data-tone": "ok", role: "status" }, notice) : null,
-        account && account.keyConfigured && credentials.length === 0 && account.state === "ok"
-          ? h("p", { className: "dcpa-q-msg" }, t("qNoCredentials"))
-          : null,
-        account && account.keyConfigured && credentials.length > 0 ? h(QuotaSummary, { t, credentials }) : null,
-        account && account.keyConfigured && (providers.length > 1 || credentials.length > 8)
+          )
+        );
+      };
+
+      // This session's rules for the agent tool: a secondary menu reached from
+      // either model menu, never mixed into the model lists.
+      const setPolicy = async (patch) => {
+        setBusy(true);
+        setError(null);
+        try {
+          const body = await postJson(API.mediaSessionSave, { sessionId, ...patch });
+          if (mounted.current) setData(body.session ?? null);
+        } catch (err) {
+          if (mounted.current) setError(mediaErrorText(t, err));
+        } finally {
+          if (mounted.current) setBusy(false);
+        }
+      };
+      const policySelect = (field, labelKey) =>
+        h(
+          "label",
+          { className: "dcpa-m-policy-row" },
+          h("span", null, t(labelKey)),
+          h(
+            "select",
+            {
+              className: "dcpa-q-input dcpa-media-select",
+              value: agent.sources?.[field] === "session" ? agent[field] : "inherit",
+              disabled: busy,
+              onChange: (e) => void setPolicy({ [field]: e.target.value }),
+            },
+            h("option", { value: "inherit" }, fmt(t, "mediaFollowGlobal", { value: t((agent.global?.[field] ?? agent[field]) === "ask" ? "mediaConfirmAsk" : "mediaConfirmAuto") })),
+            h("option", { value: "ask" }, t("mediaConfirmAsk")),
+            h("option", { value: "auto" }, t("mediaConfirmAuto"))
+          )
+        );
+      const sessionBudget = agent?.videoBudget ?? null;
+      const agentSettings = !agentAvailable ? null : h(
+        "div",
+        { className: "dcpa-m-agent-pane", "data-kind": "agent" },
+        policySelect("videoConfirm", "mediaVideoConfirm"),
+        policySelect("imageConfirm", "mediaImageConfirm"),
+        h(
+          "label",
+          { className: "dcpa-m-policy-row" },
+          h("span", null, t("mediaVideoBudget")),
+          h(
+            "select",
+            {
+              className: "dcpa-q-input dcpa-media-select",
+              value: agent.sources?.videoBudget === "session" ? budgetValue(sessionBudget) : "inherit",
+              disabled: busy,
+              onChange: (e) => void setPolicy({ videoBudget: e.target.value === "inherit" ? "inherit" : budgetFromValue(e.target.value) }),
+            },
+            h(
+              "option",
+              { value: "inherit" },
+              fmt(t, "mediaFollowGlobal", { value: (agent.global?.videoBudget ?? sessionBudget)?.mode === "limited" ? fmt(t, "mediaBudgetSeconds", { n: (agent.global?.videoBudget ?? sessionBudget).seconds }) : t("mediaBudgetUnlimited") })
+            ),
+            budgetChoices(sessionBudget).map((n) => h("option", { key: n, value: `limited:${n}` }, fmt(t, "mediaBudgetSeconds", { n }))),
+            h("option", { value: "unlimited" }, t("mediaBudgetUnlimited"))
+          )
+        ),
+        h(
+          "p",
+          { className: "dcpa-q-pop-text", "data-agent-used": String(agent.used ?? 0) },
+          sessionBudget?.mode === "limited"
+            ? fmt(t, "mediaAgentUsed", { used: agent.used ?? 0, limit: sessionBudget.seconds })
+            : fmt(t, "mediaAgentUsedUnlimited", { used: agent.used ?? 0 })
+        )
+      );
+      const agentButton = h(
+        "button",
+        { type: "button", className: "dcpa-q-btn dcpa-m-agent-open", onClick: () => setAgentPane(true) },
+        h(AGENT_ICON),
+        h("span", null, t("mediaAgentSettings"))
+      );
+      const popVisible = openKind !== null && (showingAgent || activeKind !== null);
+      const head = !popVisible
+        ? null
+        : showingAgent
+        ? h(
+            "div",
+            { className: "dcpa-q-pop-head dcpa-m-agent-head" },
+            h(
+              "button",
+              { type: "button", className: "dcpa-q-btn dcpa-m-back", "aria-label": t("mediaBack"), onClick: () => setAgentPane(false) },
+              "‹ ",
+              t("mediaBack")
+            ),
+            h("div", { className: "dcpa-q-pop-model" }, t("mediaAgentSection"))
+          )
+        : h(
+            "div",
+            { className: "dcpa-q-pop-head" },
+            h("div", { className: "dcpa-q-pop-model" }, t(activeKind.kind === "image" ? "mediaImageGroup" : "mediaVideoGroup")),
+            h("div", { className: "dcpa-q-pop-sub" }, t(activeKind.kind === "image" ? "mediaChipHint" : "mediaChipVideoHint"))
+          );
+
+      const pop = popVisible
           ? h(
               "div",
-              { className: "dcpa-q-tools" },
-              providers.length > 1
-                ? [["all", credentials.length], ...providers].map(([key, count]) =>
-                    h(
-                      "button",
-                      {
-                        key: key || "_",
-                        type: "button",
-                        className: "dcpa-q-filter",
-                        "aria-pressed": providerFilter === key,
-                        onClick: () => setProviderFilter(key),
-                      },
-                      key === "all" ? t("qFilterAll") : providerName(t, key),
-                      h("small", null, String(count))
-                    )
-                  )
-                : null,
-              credentials.length > 8
-                ? h("input", {
-                    className: "dcpa-q-input",
-                    type: "search",
-                    value: search,
-                    placeholder: t("qSearchPlaceholder"),
-                    "aria-label": t("qSearchPlaceholder"),
-                    onChange: (e) => setSearch(e.target.value),
-                  })
-                : null
-            )
-          : null,
-        account && account.keyConfigured && credentials.length > 0 && shown === 0 ? h("p", { className: "dcpa-q-msg" }, t("qNoMatch")) : null,
-        account && account.keyConfigured
-          ? groups.map(([key, list]) =>
-              h(
-                "section",
-                { key: key || "_", "aria-label": providerName(t, key) },
-                h("div", { className: "dcpa-q-group-title" }, providerName(t, key), h("small", null, String(list.length))),
-                list.map((cred) => h(CredentialRow, { key: cred.id, t, cred, now, pickerIds }))
-              )
+              {
+                className: "dcpa-q-pop dcpa-m-pop",
+                role: "dialog",
+                "aria-label": showingAgent ? t("mediaAgentSection") : t(activeKind.kind === "image" ? "mediaImageGroup" : "mediaVideoGroup"),
+                style: pos ? { left: `${pos.left}px`, bottom: `${pos.bottom}px`, width: `${pos.width}px` } : { visibility: "hidden" },
+              },
+              head,
+              ...(showingAgent ? [agentSettings] : [optionGroups(activeKind), agentAvailable ? h("div", { className: "dcpa-m-foot" }, agentButton) : null]),
+              error ? h("p", { className: "dcpa-q-pop-text", "data-tone": "error", role: "alert" }, fmt(t, "mediaPickFailed", { error })) : null
             )
-          : null,
-        account && account.keyConfigured && credentials.length > 0 ? h(ModelChannelMap, { t, account }) : null
+          : null;
+
+      const chipButton = (k) =>
+        h(
+          "button",
+          {
+            type: "button",
+            className: "dcpa-q-badge dcpa-m-chip dcpa-m-chip-button",
+            "data-kind": k.kind,
+            "data-compact": compact ? "true" : undefined,
+            "aria-label": kindLabel(k),
+            "aria-haspopup": "dialog",
+            "aria-expanded": openKind === k.kind,
+            disabled: loading && data === null,
+            onClick: (e) => openMenu(k.kind, e?.currentTarget ?? null),
+          },
+          h(
+            "span",
+            { className: "dcpa-m-chip-part" },
+            h(k.kind === "image" ? IMAGE_ICON : VIDEO_ICON),
+            compact ? null : h("span", { className: "dcpa-m-chip-label" }, k.name ?? t(k.kind === "image" ? "mediaChipChoose" : "mediaChipVideoChoose"))
+          )
+        );
+
+      return h(
+        "span",
+        { ref: wrapRef, className: "dcpa-q-wrap dcpa-m-chip-group", "data-placement": placement, "data-dsh-plugin": MODULE_ID },
+        imageKind !== null ? chipButton(imageKind) : null,
+        imageKind !== null && videoKind !== null ? h("span", { className: "dcpa-m-chip-sep", "aria-hidden": "true" }) : null,
+        videoKind !== null ? chipButton(videoKind) : null,
+        pop
       );
     }
+    // #endregion
 
-    /** The CLIProxyAPI settings section: accounts, each with 连接 / 模型 / 额度 tabs. */
-    function CpaSectionPage({ t }) {
-      return h(CpaSettingsPanel, { t });
+    // #region generate_media tool rows (tool.call.toolview, key "generate_media")
+
+    /** The run id the host derives from a tool call id (mirrors lib/media.js toolRunId). */
+    function toolRunId(callId) {
+      const raw = String(callId ?? "").replace(/[^A-Za-z0-9._:-]/g, "_").replace(/^[^A-Za-z0-9]+/, "").slice(0, 119);
+      return /^[A-Za-z0-9][A-Za-z0-9._:-]{0,119}$/.test(raw) ? raw : null;
     }
 
-    /** Snapshot of the session's model directory (current or pending selection). */
-    function useSelection(directory) {
-      const [, setTick] = useState(0);
+    // Compatibility path for profiles without the native question service.
+    // Only the composer owns these controls; chat rows never ask for consent.
+    function MediaConfirmationDock({ t, sessionId = null }) {
+      const [data, setData] = useState(null);
+      const [loading, setLoading] = useState(true);
+      const [notice, setNotice] = useState(null);
+      const [busy, setBusy] = useState(null);
+      const lifetime = useRef(null);
+      const answering = useRef(null);
+      const answered = useRef(new Set());
       useEffect(() => {
-        if (!directory || typeof directory.subscribe !== "function") return undefined;
-        let alive = true;
-        const off = directory.subscribe(() => {
-          if (alive) setTick((n) => n + 1);
-        });
-        return () => {
-          alive = false;
-          off?.();
+        const controller = new AbortController();
+        lifetime.current = controller;
+        answering.current = null;
+        answered.current = new Set();
+        setData(null);
+        setNotice(null);
+        setBusy(null);
+        let timer;
+        const load = async () => {
+          try {
+            const res = await fetch(mediaSessionURL(sessionId), { cache: "no-store", signal: controller.signal });
+            const body = await res.json();
+            if (controller.signal.aborted) return;
+            if (!res.ok || body.ok === false) throw new Error(`HTTP ${res.status}`);
+            setData(body.session?.sessionId === sessionId ? body.session : null);
+          } catch {
+            // Missing/offline service is not an empty consent grant. Retry;
+            // pending Host requests still time out closed.
+          } finally {
+            if (!controller.signal.aborted) {
+              setLoading(false);
+              timer = setTimeout(load, 2000);
+            }
+          }
         };
-      }, [directory]);
-      const snapshot = directory && typeof directory.getSnapshot === "function" ? directory.getSnapshot() : null;
-      const current = snapshot?.pending ?? snapshot?.current ?? null;
-      return current && typeof current.provider === "string" && typeof current.model === "string" ? current : null;
+        if (typeof sessionId === "string" && sessionId !== "") void load();
+        return () => { controller.abort(); clearTimeout(timer); };
+      }, [sessionId]);
+      const confirms = data?.sessionId === sessionId && Array.isArray(data.pendingConfirmations)
+        ? data.pendingConfirmations.filter((item) => !answered.current.has(item.commandId)) : [];
+      const answer = async (commandId, allow) => {
+        if (answering.current !== null || answered.current.has(commandId)) return;
+        const controller = lifetime.current;
+        if (!controller || controller.signal.aborted) return;
+        answering.current = commandId;
+        setBusy(commandId);
+        try {
+          await postJson(API.mediaConfirm, { sessionId, commandId, allow });
+          if (controller.signal.aborted) return;
+          answered.current.add(commandId);
+          setData((current) => current ? { ...current, pendingConfirmations: current.pendingConfirmations.filter((item) => item.commandId !== commandId) } : current);
+          setNotice(null);
+        } catch {
+          if (!controller.signal.aborted) setNotice(t("mediaConfirmDeliveryFailed"));
+        } finally {
+          if (!controller.signal.aborted) { answering.current = null; setBusy(null); }
+        }
+      };
+      if (loading || confirms.length === 0) return null;
+      return h("section", { className: "dcpa-confirm-dock", role: "region", "aria-label": t("mediaConfirmWaiting") },
+        ...confirms.map((confirm) => h("div", { className: "dcpa-chat-confirm", key: confirm.commandId, role: "group", "aria-label": t(confirm.kind === "video" ? "mediaConfirmTitleVideo" : "mediaConfirmTitle") },
+          h("p", { className: "dcpa-chat-confirm-title" }, t(confirm.kind === "video" ? "mediaConfirmTitleVideo" : "mediaConfirmTitle")),
+          h("p", { className: "dcpa-chat-confirm-text" }, t("mediaLocale") === "zh" ? confirm.zh : confirm.en),
+          h("div", { className: "dcpa-q-actions" },
+            h("button", { type: "button", className: "dcpa-q-btn", "data-variant": "primary", disabled: busy !== null, onClick: () => void answer(confirm.commandId, true) }, t("mediaConfirmAllow")),
+            h("button", { type: "button", className: "dcpa-q-btn", disabled: busy !== null, onClick: () => void answer(confirm.commandId, false) }, t("mediaConfirmDecline"))),
+          h("p", { className: "dcpa-chat-note" }, t("mediaConfirmNote")))),
+        notice ? h("p", { role: "alert", className: "dcpa-chat-note" }, notice) : null);
+    }
+
+    const MEDIA_NODE_KIND = "dsh-cliproxyapi-media";
+
+    // Fold the actual durable tool lifecycle, not an invented user command.
+    // A tool result carries no tool name, so unrelated result-only contexts
+    // intentionally remain invisible until a matching start is loaded.
+    const mediaEventResult = (event) => event.type === "tool/result" ? event.data : event.type === "tool/ptc-dispatch" ? {
+      message: { content: event.data.content ?? [], isError: event.data.isError === true },
+      meta: event.data.meta,
+    } : null;
+    const mediaDispatchMatch = (event) => event.data?.name === "generate_media" && typeof event.data.subCallId === "string"
+      ? { id: event.data.subCallId, role: "start" } : null;
+    const mediaConversationDefinition = {
+      kind: MEDIA_NODE_KIND,
+      target: "chat",
+      match: {
+        "tool/call": (event) => event.data?.name === "generate_media" && typeof event.data.callId === "string"
+          ? { id: event.data.callId, role: "start" } : null,
+        "tool/result": (event) => event.surfaceOp === "append" && typeof event.data?.message?.source?.callId === "string"
+          ? { id: event.data.message.source.callId, role: "update" } : null,
+        "tool/ptc-dispatch-start": mediaDispatchMatch,
+        "tool/ptc-dispatch": mediaDispatchMatch,
+      },
+      start: (_context, match) => ({
+        callId: match.event.data.callId ?? match.event.data.subCallId,
+        argsRaw: typeof match.event.data.arguments === "string" ? match.event.data.arguments : JSON.stringify(match.event.data.arguments ?? {}),
+        result: mediaEventResult(match.event),
+      }),
+      update: (context, match) => {
+        if (context.state == null) return null;
+        const result = mediaEventResult(match.event);
+        return result === null ? context.state : { ...context.state, result };
+      },
+      buildViewNode: (context) => {
+        if (context.state == null || context.start === undefined) return null;
+        const { callId, argsRaw, result } = context.state;
+        const location = context.start.location;
+        const interrupted = result === null && (
+          location?.kind === "step" && location.step.status === "closed" ||
+          (location?.kind === "step" || location?.kind === "turn") && location.turn.status === "closed"
+        );
+        const done = result !== null || interrupted;
+        const block = done ? {
+          kind: "tool-result", callId,
+          call: { name: "generate_media", argsRaw },
+          content: result?.message?.content ?? [],
+          isError: interrupted || result?.message?.isError === true,
+          ...(interrupted ? { error: { code: "interrupted" } } : {}),
+          meta: result?.meta,
+        } : { callId, phase: "start", argsRaw };
+        return {
+          key: context.key, id: context.id, kind: MEDIA_NODE_KIND, target: "chat",
+          anchorSeq: context.start.event.seq, location,
+          visibility: "visible",
+          // Explicitly outside process. Keeping the source step location alone
+          // (as the old synthetic command did) leaves it inside thinking.
+          groupTree: "turn",
+          data: { callId, phase: done ? "result" : "start", block },
+        };
+      },
+    };
+
+    /** Read only the typed, wrapped chat nodes, never flat legacy payloads. */
+    function hasMediaNode(snapshot, runId) {
+      return runId !== null && Array.isArray(snapshot?.order) && typeof snapshot.nodes?.get === "function" &&
+        snapshot.order.some((key) => {
+          const node = snapshot.nodes.get(key);
+          return node?.kind === MEDIA_NODE_KIND && toolRunId(node.data?.callId) === runId;
+        });
     }
 
     /**
-     * Composer badge left of the model picker: signal bars + best remaining
-     * percentage of the credentials that serve the selected model on the
-     * selected model's own CPA account; click opens a peek list. Accounts
-     * without a management key show nothing.
+     * The agent tool's call row, drawn like the matching slash command's row:
+     * the request as a bubble, then progress and the result (polled through
+     * `media/command` with the run id derived from the call id).
+     * Owner props from DSH: `{ callId, phase, block }`.
      */
-    function QuotaBadge({ t, directory: directProp = null, resolveDirectory = null, store = sharedQuota, sessionId = null, placement = "composer", presence = composerBadges }) {
-      const shadowed = useBadgePlacement(placement, sessionId, presence);
-      const directory = useDirectory(directProp, shadowed ? null : resolveDirectory);
-      const selection = useSelection(shadowed ? null : directory);
-      const snap = useQuota(selection ? store : null);
-      const now = useNow(60 * 1000);
-      const [open, setOpen] = useState(false);
-      const [pos, setPos] = useState(null);
-      const wrapRef = useRef(null);
-      const buttonRef = useRef(null);
+    function MediaToolRow({ t, owner = {}, sessionId = null, fileActions = null, runCommand = null, useChat = null, standalone = false }) {
+      const block = owner.block ?? null;
+      const done = block !== null && typeof block === "object" && "kind" in block;
+      const runId = toolRunId(owner.callId ?? block?.callId);
+      // New calls are mirrored as a top-level command row by the host. If that
+      // row exists, drawing the full card here as well showed the same run
+      // twice: once inside the folded process group and once as the command
+      // row. Older calls have no mirrored row, so they keep their card.
+      const mirrored = typeof useChat === "function"
+        ? useChat((snapshot) => {
+            return hasMediaNode(snapshot, runId);
+          })
+        : false;
+      if (!standalone && mirrored) return null;
+      let args = null;
+      try {
+        const raw = done ? block.call?.argsRaw : block?.argsRaw;
+        const parsed = typeof raw === "string" && raw !== "" ? JSON.parse(raw) : null;
+        args = parsed !== null && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+      } catch {
+        args = null;
+      }
+      const video = args?.kind === "video";
+      const name = !video ? "cpa-image" : args.mode === "edit" ? "cpa-video-edit" : args.mode === "extend" ? "cpa-video-extend" : "cpa-video";
+      const errorText = done && block.isError
+        ? (Array.isArray(block.content) ? block.content.filter((c) => c?.type === "text").map((c) => c.text).join("\n") : "").replace(/^Error:\s*/, "") || t("mediaCardFailed")
+        : null;
+      const outcome = errorText !== null ? { kind: "error", text: errorText } : done ? { kind: "success" } : owner.phase === "preparing" || args === null ? null : { kind: "success" };
+      const node = { name, commandId: toolRunId(owner.callId ?? block?.callId), args: typeof args?.prompt === "string" ? `-- ${args.prompt}` : "", outcome };
+      return h(ImageCommandCard, { t, node, sessionId, fileActions, runCommand, pending: !done, label: "generate_media", showCopy: false, showConfirm: false });
+    }
+
+    function MediaCommandRow({ useChat = null, node = null, ...props }) {
+      const mirrored = typeof useChat === "function" ? useChat((snapshot) => hasMediaNode(snapshot, node?.commandId ?? null)) : false;
+      return mirrored ? null : h(ImageCommandCard, { ...props, node, showConfirm: false });
+    }
+
+    // #endregion
+
+    // #region /cpa-image and /cpa-video chat rows (conversation.chat.commandview, keys "cpa-image" / "cpa-video")
+
+    /** Leading `/cpa-image` / `/cpa-video` options of a recorded command line, then the prompt (mirrors the host parsers, never throws). */
+    function splitImageArgs(raw) {
+      let rest = String(raw ?? "").trim();
+      const out = { prompt: "" };
+      for (;;) {
+        if (rest.startsWith("-- ") || rest === "--") {
+          rest = rest.slice(2).trim();
+          break;
+        }
+        const match = rest.match(/^(-m|--model|--aspect|-n|--count|-s|--seconds|-r|--resolution)(?:=|\s+)(\S+)(?:\s+|$)/);
+        if (match === null) break;
+        if (match[1] === "-m" || match[1] === "--model") out.model = match[2];
+        else if (match[1] === "--aspect") out.aspect = match[2];
+        else if (match[1] === "-s" || match[1] === "--seconds") out.seconds = Number(match[2]) || undefined;
+        else if (match[1] === "-r" || match[1] === "--resolution") out.resolution = match[2].toLowerCase();
+        else out.count = Number(match[2]) || undefined;
+        rest = rest.slice(match[0].length);
+      }
+      out.prompt = rest;
+      return out;
+    }
+
+    const RUN_ERROR_KEYS = {
+      interrupted: "mediaRunErrInterrupted",
+      timeout: "mediaRunErrTimeout",
+      network: "mediaRunErrNetwork",
+      "no-image": "mediaRunErrNoImage",
+      "invalid-image": "mediaRunErrInvalid",
+      "invalid-response": "mediaRunErrInvalid",
+      "write-failed": "mediaRunErrWrite",
+      expired: "mediaRunErrExpired",
+      "invalid-video": "mediaRunErrInvalidVideo",
+      "video-too-large": "mediaRunErrVideoTooLarge",
+    };
+
+    /** "9 秒" / "1 分 23 秒" (zh), "9 s" / "1 min 23 s" (en). */
+    const elapsedText = (t, seconds) => {
+      const s = Math.max(0, Math.round(seconds));
+      return s < 60 ? fmt(t, "mediaDurationS", { s }) : fmt(t, "mediaDurationMS", { m: Math.floor(s / 60), s: s % 60 });
+    };
+
+    const secondsBetween = (from, to) => {
+      const start = Date.parse(from ?? "");
+      return Number.isFinite(start) ? Math.max(0, Math.round((to - start) / 1000)) : 0;
+    };
+
+    const REVEAL_KEYS = { explorer: "mediaActRevealExplorer", finder: "mediaActRevealFinder", filemanager: "mediaActRevealFiles" };
+
+    /** An application icon the Host reported: images by data URL or same-origin path only. */
+    function safeIconSource(value) {
+      if (typeof value !== "string" || value === "" || value.length > 200000) return null;
+      if (/^data:image\/(png|jpeg|gif|webp|svg\+xml|x-icon|vnd\.microsoft\.icon);/i.test(value)) return value;
+      return /^(\/|\.{0,2}\/|[a-z0-9-]+\/)/i.test(value) && !/^[a-z][a-z0-9+.-]*:/i.test(value) ? value : null;
+    }
+
+    /** Copy one generated image as PNG (the clipboard takes PNG only, so other types are re-encoded). */
+    async function copyImageToClipboard(url) {
+      if (typeof navigator === "undefined" || !navigator.clipboard?.write || typeof ClipboardItem === "undefined") throw new Error("clipboard unavailable");
+      const png = (async () => {
+        const res = await fetch(url, { cache: "no-store" });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const blob = await res.blob();
+        if (blob.type === "image/png") return blob;
+        const bitmap = await createImageBitmap(blob);
+        const canvas = document.createElement("canvas");
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        canvas.getContext("2d").drawImage(bitmap, 0, 0);
+        return await new Promise((resolve, reject) => canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("png"))), "image/png"));
+      })();
+      // A pending blob keeps the click's user activation for the write.
+      await navigator.clipboard.write([new ClipboardItem({ "image/png": png })]);
+    }
+
+    async function copyTextToClipboard(text) {
+      if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) throw new Error("clipboard unavailable");
+      await navigator.clipboard.writeText(text);
+    }
+
+    /**
+     * Replaces the generic command row of `/cpa-image` with a short exchange:
+     * the request as a user bubble, then the result as a reply — progress while
+     * the background job runs (polled through `media/command`), the images
+     * when done (click to enlarge, right-click for open / show in folder /
+     * copy), or the reason it failed. `fileActions` opens and reveals paths
+     * through DSH's Session Remote; without it those items are hidden.
+     * Hook order: slot 0 = data ({ run, files, folderPath }), slot 1 = loading (test harness).
+     */
+    // `pending`: an agent tool call still executing (its run record may not exist yet);
+    // `label` replaces the command tag; `showCopy` hides "Copy original input" for tool rows.
+    function ImageCommandCard({ t, node = null, sessionId = null, fileActions = null, runCommand = null, pending = false, label = null, showCopy = true, showConfirm = false }) {
+      const [data, setData] = useState(null);
+      const [loading, setLoading] = useState(true);
+      const [expanded, setExpanded] = useState(null);
+      const [now, setNow] = useState(() => Date.now());
+      const [menu, setMenu] = useState(null);
+      const [notice, setNotice] = useState(null);
+      const [canOpen, setCanOpen] = useState(false);
+      // path → Host applications for it (array), "loading", or null after a failure.
+      const [apps, setApps] = useState({});
+      // Inline "edit / extend this video" form: null | "edit" | "extend".
+      const [editMode, setEditMode] = useState(null);
+      const [editDraft, setEditDraft] = useState("");
+      const [editSeconds, setEditSeconds] = useState(6);
+      const [editBusy, setEditBusy] = useState(false);
+      const [confirmBusy, setConfirmBusy] = useState(false);
+      const menuRef = useRef(null);
+      const mounted = useRef(true);
+      const outcome = node?.outcome ?? null;
+      const commandId = typeof node?.commandId === "string" ? node.commandId : null;
+      const admitted = outcome?.kind === "success";
+      const canLoad = admitted && typeof sessionId === "string" && sessionId !== "" && commandId !== null;
+      const run = data?.run ?? null;
+      const kind = String(node?.name ?? "").startsWith("cpa-video") || run?.kind === "video" ? "video" : "image";
+      const video = kind === "video";
+      const running = outcome === null || (admitted && (run === null ? pending || (canLoad && loading) : run.status === "running"));
+      const files = Array.isArray(data?.files) ? data.files : [];
+      // The generated files this row shows (images, or the one video).
+      const images = files.filter((f) => f.kind === kind);
 
-      const summary = selection ? summarizeModelQuota(snap.data, selection.provider, selection.model) : null;
-      const visible = !shadowed && summary !== null && summary.account.keyConfigured === true;
+      useEffect(() => {
+        mounted.current = true;
+        return () => {
+          mounted.current = false;
+        };
+      }, []);
 
+      // Load once; while the run is still going, look again every 2 s.
       useEffect(() => {
-        if (!open) return undefined;
-        const place = () => {
-          const rect = buttonRef.current?.getBoundingClientRect?.();
-          if (!rect || typeof window === "undefined") return;
-          const width = Math.min(340, window.innerWidth - 32);
-          const left = Math.max(16, Math.min(rect.left, window.innerWidth - width - 16));
-          setPos({ left, bottom: Math.max(16, window.innerHeight - rect.top + 6), width });
+        if (!canLoad) return undefined;
+        const controller = new AbortController();
+        let timer = null;
+        let failures = 0;
+        const load = async () => {
+          let again = false;
+          try {
+            const url = `${API.mediaCommand}?sessionId=${encodeURIComponent(sessionId)}&commandId=${encodeURIComponent(commandId)}`;
+            const res = await fetch(url, { cache: "no-store", signal: controller.signal });
+            const body = await res.json();
+            if (controller.signal.aborted) return;
+            if (res.ok && body.ok !== false) {
+              setData({
+                run: body.run ?? null,
+                files: Array.isArray(body.files) ? body.files : [],
+                folderPath: typeof body.folderPath === "string" ? body.folderPath : null,
+                desktop: typeof body.desktop === "string" ? body.desktop : null,
+                ...(body.confirm && typeof body.confirm === "object" ? { confirm: body.confirm } : {}),
+                ...(body.actions && typeof body.actions === "object" ? { actions: body.actions } : {}),
+              });
+              again = body.run?.status === "running" || (pending && (body.run ?? null) === null);
+            }
+          } catch {
+            if (controller.signal.aborted) return;
+            again = ++failures < 5;
+          } finally {
+            if (!controller.signal.aborted) setLoading(false);
+          }
+          if (again && !controller.signal.aborted) timer = setTimeout(load, video ? 3000 : 2000);
         };
-        place();
+        void load();
+        return () => {
+          controller.abort();
+          if (timer !== null) clearTimeout(timer);
+        };
+      }, [canLoad, sessionId, commandId, video, pending]);
+
+      // The elapsed-time clock, only while running.
+      useEffect(() => {
+        if (!running) return undefined;
+        const timer = setTimeout(() => setNow(Date.now()), 1000);
+        return () => clearTimeout(timer);
+      }, [running, now]);
+
+      // Whether the Host desktop can open paths (asked once per page by fileActions).
+      const hasFiles = images.length > 0;
+      useEffect(() => {
+        if (!hasFiles || fileActions === null) return undefined;
+        let live = true;
+        fileActions.available().then((value) => {
+          if (live) setCanOpen(value === true);
+        }, () => {});
+        return () => {
+          live = false;
+        };
+      }, [hasFiles, fileActions]);
+
+      // A transient notice ("Copied", a failure) under the images.
+      useEffect(() => {
+        if (notice === null) return undefined;
+        const timer = setTimeout(() => setNotice(null), 2500);
+        return () => clearTimeout(timer);
+      }, [notice]);
+
+      // The context menu closes on an outside press, Escape, scroll or resize.
+      useEffect(() => {
+        if (menu === null || typeof document === "undefined") return undefined;
+        const close = () => setMenu(null);
         const onDown = (e) => {
-          if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+          if (menuRef.current && !menuRef.current.contains(e.target)) close();
         };
         const onKey = (e) => {
-          if (e.key === "Escape") {
-            setOpen(false);
-            buttonRef.current?.focus?.();
-          }
+          if (e.key === "Escape") close();
         };
         document.addEventListener("mousedown", onDown, true);
         document.addEventListener("keydown", onKey, true);
-        window.addEventListener("resize", place);
+        window.addEventListener("resize", close);
+        window.addEventListener("scroll", close, true);
         return () => {
           document.removeEventListener("mousedown", onDown, true);
           document.removeEventListener("keydown", onKey, true);
-          window.removeEventListener("resize", place);
+          window.removeEventListener("resize", close);
+          window.removeEventListener("scroll", close, true);
         };
-      }, [open]);
-
-      useEffect(() => {
-        if (!visible && open) setOpen(false);
-      }, [visible, open]);
-
-      if (!visible) return null;
-      const { account, entries, best, usableCount } = summary;
-      const loadingFirst = account.fetchedAt === undefined && (account.state === "loading" || account.refreshing === true || account.state === "idle");
-      const level = quotaLevel(best);
-      const label = fmt(t, "qBadgeLabel", { model: selection.model });
-      const errorText = quotaErrorText(t, account);
-      const refreshing = account.refreshing === true || snap.busy === "refresh";
+      }, [menu]);
 
-      const peek = open
-        ? h(
-            "div",
-            {
-              className: "dcpa-q-pop",
-              role: "dialog",
-              "aria-label": label,
-              style: pos ? { left: `${pos.left}px`, bottom: `${pos.bottom}px`, width: `${pos.width}px` } : { visibility: "hidden" },
+      const say = (tone, text) => {
+        if (mounted.current) setNotice({ tone, text });
+      };
+      const act = async (action, file, application) => {
+        setMenu(null);
+        try {
+          if (action === "copy-image") {
+            await copyImageToClipboard(mediaFileURL(sessionId, file.id));
+            say("ok", t("mediaActCopied"));
+          } else if (action === "copy-path") {
+            await copyTextToClipboard(file.path);
+            say("ok", t("mediaActCopied"));
+          } else if (fileActions !== null) {
+            const ok = await fileActions.open(file.path, action === "reveal" ? "reveal" : "open", action === "app" ? application : undefined);
+            if (!ok) say("error", t("mediaActOpenFailed"));
+          }
+        } catch (err) {
+          say("error", fmt(t, "mediaActCopyFailed", { error: err instanceof Error ? err.message : String(err) }));
+        }
+      };
+      // The Host desktop's file manager names the reveal item (Explorer / Finder / Files).
+      const revealLabel = t(REVEAL_KEYS[data?.desktop] ?? "mediaActReveal");
+      /** The always-available actions: the buttons under an enlarged image. */
+      const baseEntries = (file) => [
+        ...(canOpen && file.path
+          ? [
+              { key: "open", label: t("mediaActOpen"), run: () => act("open", file) },
+              { key: "reveal", label: revealLabel, run: () => act("reveal", file) },
+            ]
+          : []),
+        ...(file.kind === "image" ? [{ key: "copy-image", label: t("mediaActCopyImage"), run: () => act("copy-image", file) }] : []),
+        ...(file.path ? [{ key: "copy-path", label: t("mediaActCopyPath"), run: () => act("copy-path", file) }] : []),
+      ];
+      /**
+       * The context menu: the Host's applications for this file (default
+       * first, as DSH's document preview lists them), the file manager, then
+       * the copy actions. While the list loads or when it is empty or failed,
+       * a single "open with the default app" item stands in.
+       */
+      const menuEntries = (file) => {
+        const out = [];
+        if (canOpen && file.path) {
+          const list = Array.isArray(apps[file.path]) ? apps[file.path] : [];
+          const sorted = [...list.filter((app) => app.default), ...list.filter((app) => !app.default)];
+          if (sorted.length > 0) {
+            for (const app of sorted) {
+              out.push({
+                key: `app:${app.id}`,
+                label: fmt(t, app.default ? "mediaActOpenWithDefault" : "mediaActOpenWith", { app: app.name }),
+                icon: safeIconSource(app.icon),
+                run: () => act("app", file, app.id),
+              });
+            }
+          } else {
+            out.push({ key: "open", label: t("mediaActOpen"), run: () => act("open", file) });
+          }
+          out.push({ key: "reveal", label: revealLabel, separated: true, run: () => act("reveal", file) });
+        }
+        if (file.kind === "image") out.push({ key: "copy-image", label: t("mediaActCopyImage"), separated: out.length > 0, run: () => act("copy-image", file) });
+        if (file.path) out.push({ key: "copy-path", label: t("mediaActCopyPath"), separated: file.kind !== "image" && out.length > 0, run: () => act("copy-path", file) });
+        return out;
+      };
+      const openMenu = (file) => (e) => {
+        e.preventDefault?.();
+        // Ask the Host which applications open this file (once per path).
+        if (canOpen && file.path && fileActions?.applications && apps[file.path] === undefined) {
+          setApps((current) => ({ ...current, [file.path]: "loading" }));
+          fileActions.applications(file.path).then(
+            (list) => {
+              if (mounted.current) setApps((current) => ({ ...current, [file.path]: Array.isArray(list) ? list.slice(0, 12) : null }));
             },
-            h(
+            () => {
+              if (mounted.current) setApps((current) => ({ ...current, [file.path]: null }));
+            }
+          );
+        }
+        const width = 240;
+        const height = 64 + 32 * (6 + (Array.isArray(apps[file.path]) ? apps[file.path].length : 1));
+        const vw = (typeof window === "undefined" ? 0 : window.innerWidth) || 1024;
+        const vh = (typeof window === "undefined" ? 0 : window.innerHeight) || 768;
+        setMenu({ id: file.id, left: Math.max(8, Math.min(e.clientX ?? 0, vw - width - 8)), top: Math.max(8, Math.min(e.clientY ?? 0, vh - height - 8)) });
+      };
+      const parsed = splitImageArgs(node?.args);
+      const rawArgs = typeof node?.args === "string" ? node.args.trim() : "";
+      const rawLine = showCopy && rawArgs !== "" ? `/${node?.name ?? "cpa-image"} ${rawArgs}` : null;
+      const prompt = run?.prompt || parsed.prompt;
+      const aspect = run?.aspect ?? parsed.aspect;
+      const count = video ? 1 : run?.count ?? parsed.count ?? 1;
+      const seconds = run?.seconds ?? parsed.seconds;
+      const resolution = run?.resolution ?? parsed.resolution;
+      const references = run?.references ?? 0;
+      const modelName = run?.modelName || parsed.model || node?.name || "cpa-image";
+      const shown = expanded ? images.find((f) => f.id === expanded) : undefined;
+      const menuFile = menu ? images.find((f) => f.id === menu.id) : undefined;
+
+      let errorText = null;
+      if (outcome?.kind === "error") errorText = String(outcome.text ?? "").replace(/^\/cpa-image:\s*/, "") || t("mediaCardFailed");
+      else if (run?.status === "error") errorText = RUN_ERROR_KEYS[run.errorCode] ? t(RUN_ERROR_KEYS[run.errorCode]) : run.error || t("mediaCardFailed");
+
+      let status;
+      if (errorText !== null) status = t("mediaCardFailed");
+      else if (run === null && data?.confirm) status = t("mediaConfirmWaiting");
+      else if (outcome === null || (run === null && (pending || (canLoad && loading)))) status = t("mediaCardSubmitting");
+      else if (run?.status === "running") {
+        const time = elapsedText(t, secondsBetween(run.startedAt, now));
+        if (run.phase === "interpreting") status = fmt(t, "mediaCardInterpreting", { time });
+        else if (!video) status = fmt(t, references > 0 ? "mediaCardEditing" : "mediaCardRunning", { time });
+        else if (run.phase === "submitting") status = t("mediaCardSubmitting");
+        else if (run.phase === "downloading") status = fmt(t, "mediaCardVideoSaving", { time });
+        else if (run.phase === "queued") status = fmt(t, "mediaCardVideoQueued", { time });
+        else status = run.progress !== undefined ? fmt(t, "mediaCardVideoProgress", { time, progress: run.progress }) : fmt(t, "mediaCardRunning", { time });
+      } else if (run?.status === "done" && run.folder) {
+        status = fmt(t, "mediaCardDone", { time: elapsedText(t, secondsBetween(run.startedAt, Date.parse(run.finishedAt ?? "") || now)), folder: run.folder });
+      }
+      else status = t("mediaCardDoneShort");
+      const tone = errorText !== null ? "error" : running ? "running" : "done";
+
+      const mode = run?.mode ?? (node?.name === "cpa-video-edit" ? "edit" : node?.name === "cpa-video-extend" ? "extend" : undefined);
+      // What was actually sent, stated in the reply: the mode the host chose
+      // (from the images and flags) and, for edits / extensions, the source.
+      // Runs recorded before modes existed: an attached image was the first frame.
+      const sentMode = video ? mode ?? (references > 0 ? "first-frame" : "text") : references > 0 ? "image-edit" : "image-text";
+      const sourceName = typeof run?.sourceName === "string" && run.sourceName !== "" ? run.sourceName : null;
+      const sourceText =
+        run?.sourceKind === "upload" ? fmt(t, "mediaSourceUpload", { name: sourceName ?? "" })
+        : run?.sourceKind === "url" ? fmt(t, "mediaSourceUrl", { name: sourceName ?? "" })
+        : run?.sourceKind === "link" ? t("mediaSourceLink")
+        : sourceName !== null ? fmt(t, "mediaSourceTag", { name: sourceName })
+        : null;
+      const modeLine = run === null
+        ? null
+        : sentMode === "reference" ? fmt(t, "mediaSentReference", { n: references })
+        : sentMode === "edit" || sentMode === "extend"
+          ? fmt(t, sentMode === "edit" ? "mediaSentEdit" : "mediaSentExtend", { n: seconds ?? 6, source: sourceText ?? t("mediaSourceSession") })
+        : sentMode === "image-edit" ? fmt(t, "mediaSentImageEdit", { n: references })
+        : t({ text: "mediaSentText", "first-frame": "mediaSentFirstFrame", "first-last": "mediaSentFirstLast", "last-frame": "mediaSentLastFrame", "image-text": "mediaSentImageText" }[sentMode] ?? "mediaSentText");
+      // A generate_media call waiting for the user's confirmation in this row.
+      const confirm = showConfirm && run === null && data?.confirm ? data.confirm : null;
+      const answerConfirm = async (allow) => {
+        if (confirm === null || commandId === null || confirmBusy) return;
+        setConfirmBusy(true);
+        try {
+          await postJson(API.mediaConfirm, { sessionId, commandId, allow });
+          if (mounted.current) setData((current) => (current ? { ...current, confirm: undefined } : current));
+          if (mounted.current) setNotice({ tone: "ok", text: t(allow ? "mediaConfirmAllowed" : "mediaConfirmDeclined") });
+        } catch (err) {
+          if (mounted.current) setNotice({ tone: "error", text: fmt(t, "mediaConfirmFailed", { error: err instanceof Error ? err.message : String(err) }) });
+        } finally {
+          if (mounted.current) setConfirmBusy(false);
+        }
+      };
+      const confirmBox =
+        confirm !== null
+          ? h(
               "div",
-              { className: "dcpa-q-pop-head" },
-              h("div", { className: "dcpa-q-pop-model" }, selection.model),
-              h("div", { className: "dcpa-q-pop-sub" }, `${account.displayName || account.accountId} · ${fmt(t, "qPeekCreds", { n: usableCount })}`)
-            ),
-            errorText ? h("p", { className: "dcpa-q-pop-text", "data-tone": "error" }, errorText) : null,
-            loadingFirst ? h("p", { className: "dcpa-q-pop-text" }, t("qPeekLoading")) : null,
-            !loadingFirst && entries.length === 0 ? h("p", { className: "dcpa-q-pop-text" }, t("qPeekNoCreds")) : null,
-            entries.map(({ cred, windows, headroom }, index) =>
+              { className: "dcpa-chat-confirm", role: "group", "aria-label": t("mediaConfirmTitle") },
+              h("p", { className: "dcpa-chat-confirm-title" }, t(confirm.kind === "video" ? "mediaConfirmTitleVideo" : "mediaConfirmTitle")),
+              h("p", { className: "dcpa-chat-confirm-text" }, t("mediaLocale") === "zh" ? confirm.zh : confirm.en),
               h(
                 "div",
-                { key: cred.id, className: "dcpa-q-pop-cred" },
-                h(
-                  "div",
-                  { className: "dcpa-q-pop-who" },
-                  h("span", { className: "dcpa-q-tag" }, providerName(t, cred.provider)),
-                  h("span", { className: "dcpa-q-name", title: cred.label || cred.id }, cred.label || cred.id),
-                  index === 0 && cred.status === "active" && headroom !== null && entries.length > 1
-                    ? h("span", { className: "dcpa-q-tag", "data-tone": "success" }, t("qPeekBest"))
-                    : null,
-                  CredentialTags({ t, cred })
-                ),
-                h(CredentialWindows, { t, cred, windows, now })
+                { className: "dcpa-q-actions" },
+                h("button", { type: "button", className: "dcpa-q-btn", "data-variant": "primary", disabled: confirmBusy, onClick: () => void answerConfirm(true) }, t("mediaConfirmAllow")),
+                h("button", { type: "button", className: "dcpa-q-btn", disabled: confirmBusy, onClick: () => void answerConfirm(false) }, t("mediaConfirmDecline"))
+              ),
+              h("p", { className: "dcpa-chat-note" }, t("mediaConfirmNote"))
+            )
+          : null;
+      // Which parameters the session's chat model read from the prompt.
+      const interp = run?.interpreted ?? null;
+      const interpretLine = interp === null || typeof interp.by !== "string"
+        ? null
+        : interp.failed ? fmt(t, "mediaInterpretFailed", { by: interp.by })
+        : (Array.isArray(interp.items) && interp.items.length > 0 ? fmt(t, "mediaInterpreted", { by: interp.by, items: interp.items.join(" · ") }) : fmt(t, "mediaInterpretedNone", { by: interp.by }))
+          + (interp.prompt ? t("mediaInterpretedPrompt") : "");
+      const tags = [
+        label ?? "/" + (node?.name ?? "cpa-image"),
+        ...(aspect ? [aspect] : []),
+        ...(video && seconds && mode !== "edit" && mode !== "extend" ? [fmt(t, "mediaSecondsOption", { n: seconds })] : []),
+        ...(video && resolution ? [resolution] : []),
+        ...(count > 1 ? [fmt(t, "mediaCardCount", { n: count })] : []),
+        ...(video && Array.isArray(run?.ignored) && run.ignored.length > 0 ? [fmt(t, "mediaIgnoredTag", { words: run.ignored.join(" ") })] : []),
+      ];
+
+      const ratio = /^(\d+):(\d+)$/.exec(aspect ?? (video ? "16:9" : ""));
+      const skeletons = running && errorText === null
+        ? h(
+            "div",
+            { className: "dcpa-chat-grid", "data-count": String(count), "aria-hidden": "true" },
+            Array.from({ length: Math.min(4, Math.max(1, count)) }, (_, index) =>
+              h("div", { key: index, className: "dcpa-chat-skeleton", style: { aspectRatio: ratio ? `${ratio[1]} / ${ratio[2]}` : "1 / 1" } })
+            )
+          )
+        : null;
+
+      const actionButtons = (file) =>
+        baseEntries(file).map((entry) => h("button", { key: entry.key, type: "button", className: "dcpa-q-btn", onClick: () => void entry.run() }, entry.label));
+
+      const gallery = video
+        ? images.length > 0
+          ? h(
+              "div",
+              { className: "dcpa-chat-videos" },
+              images.map((file) =>
+                h("video", {
+                  key: file.id,
+                  className: "dcpa-chat-video",
+                  src: mediaFileURL(sessionId, file.id),
+                  controls: true,
+                  preload: "metadata",
+                  playsInline: true,
+                  "aria-label": file.name,
+                  onContextMenu: openMenu(file),
+                })
               )
+            )
+          : null
+        : shown
+        ? h(
+            "div",
+            { className: "dcpa-chat-full" },
+            h(
+              "button",
+              { type: "button", className: "dcpa-chat-full-btn", "aria-label": t("mediaClosePreview"), onClick: () => setExpanded(null), onContextMenu: openMenu(shown) },
+              h("img", { src: mediaFileURL(sessionId, shown.id), alt: shown.name })
             ),
             h(
               "div",
-              { className: "dcpa-q-pop-foot" },
-              h("span", null, account.fetchedAt ? fmt(t, "qUpdated", { time: agoText(t, account.fetchedAt, now) }) : t("qPeekFooter")),
+              { className: "dcpa-q-actions" },
+              actionButtons(shown),
+              h("button", { type: "button", className: "dcpa-q-btn", onClick: () => setExpanded(null) }, t("mediaClosePreview"))
+            )
+          )
+        : images.length > 0
+        ? h(
+            "div",
+            { className: "dcpa-chat-grid", "data-count": String(images.length) },
+            images.map((file, index) =>
               h(
                 "button",
                 {
+                  key: file.id,
                   type: "button",
-                  className: "dcpa-q-btn",
-                  disabled: snap.busy !== null || account.refreshing === true,
-                  onClick: () => void store?.refresh(account.accountId),
+                  className: "dcpa-chat-thumb",
+                  "aria-label": fmt(t, "mediaCardImage", { n: index + 1 }),
+                  onClick: () => setExpanded(file.id),
+                  onContextMenu: openMenu(file),
                 },
-                refreshing ? t("qRefreshing") : t("qRefresh")
+                h("img", { src: mediaFileURL(sessionId, file.id), alt: file.name, loading: "lazy" })
               )
             )
           )
         : null;
 
+      const contextMenu = menuFile
+        ? h(
+            "div",
+            { ref: menuRef, className: "dcpa-q-pop dcpa-chat-menu", role: "menu", "aria-label": t("mediaActMenu"), style: { left: `${menu.left}px`, top: `${menu.top}px` } },
+            menuEntries(menuFile).flatMap((entry) => [
+              entry.separated ? h("div", { key: `${entry.key}-sep`, role: "separator", className: "dcpa-chat-menu-sep" }) : null,
+              h(
+                "button",
+                { key: entry.key, type: "button", role: "menuitem", className: "dcpa-menu-item dcpa-chat-menu-item", onClick: () => void entry.run() },
+                entry.icon ? h("img", { className: "dcpa-chat-menu-icon", src: entry.icon, alt: "", "aria-hidden": "true" }) : h("span", { className: "dcpa-chat-menu-icon", "aria-hidden": "true" }),
+                h("span", { className: "dcpa-chat-menu-label" }, entry.label)
+              ),
+            ]),
+            menuFile.path && canOpen && apps[menuFile.path] === "loading" ? h("div", { key: "loading", className: "dcpa-chat-menu-hint", role: "status" }, t("mediaActAppsLoading")) : null
+          )
+        : null;
+
+      const pathLink = (path, label, action) =>
+        canOpen
+          ? h("button", { type: "button", className: "dcpa-chat-link", onClick: () => void act(action, { path }) }, label)
+          : h("span", null, label);
+
+      const finished = admitted && !running && errorText === null;
+      const actions = finished && video ? data?.actions ?? null : null;
+      const submitEdit = async () => {
+        const prompt = editDraft.trim();
+        if (prompt === "" || runCommand === null || commandId === null) return;
+        setEditBusy(true);
+        const line = `/cpa-video-${editMode} --from ${commandId} ${editMode === "extend" ? `-s ${editSeconds} ` : ""}-- ${prompt}`;
+        const outcome = await runCommand(sessionId, line);
+        if (!mounted.current) return;
+        setEditBusy(false);
+        if (outcome.ok) {
+          setEditMode(null);
+          setEditDraft("");
+          say("ok", t("mediaEditSubmitted"));
+        } else {
+          say("error", outcome.text || t("mediaEditFailed"));
+        }
+      };
+      const editForm =
+        editMode !== null
+          ? h(
+              "div",
+              { className: "dcpa-chat-edit" },
+              h("textarea", {
+                className: "dcpa-q-input dcpa-chat-edit-input",
+                rows: 2,
+                value: editDraft,
+                placeholder: t(editMode === "extend" ? "mediaExtendPlaceholder" : "mediaEditPlaceholder"),
+                "aria-label": t(editMode === "extend" ? "mediaExtendPlaceholder" : "mediaEditPlaceholder"),
+                disabled: editBusy,
+                onChange: (e) => setEditDraft(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent?.isComposing) {
+                    e.preventDefault?.();
+                    void submitEdit();
+                  }
+                },
+              }),
+              h(
+                "div",
+                { className: "dcpa-q-actions" },
+                editMode === "extend"
+                  ? h(
+                      "select",
+                      {
+                        className: "dcpa-q-input dcpa-media-select",
+                        "aria-label": t("mediaExtendSeconds"),
+                        value: String(editSeconds),
+                        disabled: editBusy,
+                        onChange: (e) => setEditSeconds(Number(e.target.value)),
+                      },
+                      Array.from({ length: 9 }, (_, i) => h("option", { key: i + 2, value: String(i + 2) }, fmt(t, "mediaModeExtend", { n: i + 2 })))
+                    )
+                  : null,
+                h("button", { type: "button", className: "dcpa-q-btn", "data-variant": "primary", disabled: editBusy || editDraft.trim() === "", onClick: () => void submitEdit() }, t(editMode === "extend" ? "mediaExtendSubmit" : "mediaEditSubmit")),
+                h("button", { type: "button", className: "dcpa-q-btn", disabled: editBusy, onClick: () => setEditMode(null) }, t("mediaEditCancel"))
+              ),
+              h("p", { className: "dcpa-chat-note" }, t("mediaEditNote"))
+            )
+          : null;
+      const editButtons =
+        actions !== null && runCommand !== null && editMode === null && (actions.edit || actions.extend)
+          ? [
+              actions.edit ? h("button", { key: "edit", type: "button", className: "dcpa-q-btn", onClick: () => setEditMode("edit") }, t("mediaEditOpen")) : null,
+              actions.extend ? h("button", { key: "extend", type: "button", className: "dcpa-q-btn", onClick: () => setEditMode("extend") }, t("mediaExtendOpen")) : null,
+            ]
+          : [];
+      const folderPath = typeof data?.folderPath === "string" ? data.folderPath : null;
+      const details = finished && (images.length > 0 || run?.revisedPrompt)
+        ? h(
+            "details",
+            { className: "dcpa-chat-details" },
+            h("summary", null, t("mediaCardDetails")),
+            h(
+              "dl",
+              null,
+              folderPath ? [h("dt", { key: "dt" }, t("mediaCardFolder")), h("dd", { key: "dd" }, pathLink(folderPath, folderPath, "open"))] : null,
+              images.length > 0
+                ? [
+                    h("dt", { key: "ft" }, t("mediaCardFiles")),
+                    h("dd", { key: "fd", className: "dcpa-chat-files" }, images.map((f) => h("span", { key: f.id }, f.path ? pathLink(f.path, f.name, "open") : f.name))),
+                  ]
+                : null,
+              run?.revisedPrompt ? [h("dt", { key: "rt" }, t("mediaCardRevised")), h("dd", { key: "rd" }, run.revisedPrompt)] : null
+            )
+          )
+        : null;
+
       return h(
-        "span",
-        { ref: wrapRef, className: "dcpa-q-wrap", "data-placement": placement, "data-dsh-plugin": MODULE_ID },
+        "div",
+        { className: "dcpa-chat", "data-dsh-plugin": MODULE_ID, "data-state": tone, "data-kind": kind },
         h(
-          "button",
-          {
-            ref: buttonRef,
-            type: "button",
-            className: "dcpa-q-badge",
-            "data-level": level,
-            "aria-label": label,
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            title: label,
-            onClick: () => setOpen((v) => !v),
-          },
-          h("span", { className: "dcpa-q-bars", "data-level": level, "aria-hidden": "true" }, h("i"), h("i"), h("i")),
-          h("span", { className: "dcpa-q-badge-pct" }, loadingFirst ? "…" : pctText(best))
+          "div",
+          { className: "dcpa-chat-user" },
+          prompt !== "" ? h("div", { className: "dcpa-chat-bubble" }, prompt) : null,
+          h(
+            "div",
+            { className: "dcpa-chat-tags" },
+            tags.map((tag, index) => h("span", { key: index }, tag)),
+            // The command line exactly as typed (the bubble shows the parsed prompt).
+            rawLine !== null
+              ? h(
+                  "button",
+                  {
+                    key: "copy",
+                    type: "button",
+                    className: "dcpa-chat-copy",
+                    onClick: () => {
+                      copyTextToClipboard(rawLine).then(
+                        () => say("ok", t("mediaCopiedInput")),
+                        (err) => say("error", fmt(t, "mediaActCopyFailed", { error: err instanceof Error ? err.message : String(err) }))
+                      );
+                    },
+                  },
+                  t("mediaCopyInput")
+                )
+              : null
+          )
         ),
-        peek
+        h(
+          "div",
+          { className: "dcpa-chat-reply" },
+          h(
+            "div",
+            { className: "dcpa-chat-head" },
+            h(IMAGE_ICON),
+            h("span", { className: "dcpa-chat-model" }, run?.accountName ? `${modelName} · ${run.accountName}` : modelName),
+            h("span", { className: "dcpa-chat-sep", "aria-hidden": "true" }),
+            h("span", { className: "dcpa-chat-status", "data-tone": tone, role: running ? "status" : undefined }, status)
+          ),
+          modeLine !== null ? h("p", { className: "dcpa-chat-mode", "data-mode": sentMode }, modeLine) : null,
+          interpretLine !== null ? h("p", { className: "dcpa-chat-mode", "data-interpreted": interp.failed ? "failed" : "ok" }, interpretLine) : null,
+          confirmBox,
+          errorText !== null ? h("p", { className: "dcpa-chat-error", role: "alert" }, errorText) : null,
+          skeletons,
+          running && errorText === null && admitted && run !== null ? h("p", { className: "dcpa-chat-note" }, t(video ? "mediaCardVideoNoStop" : "mediaCardNoStop")) : null,
+          video && finished && images.length > 0 ? h("div", { className: "dcpa-q-actions" }, actionButtons(images[0]), editButtons) : null,
+          editForm,
+          gallery,
+          notice ? h("p", { className: "dcpa-chat-note", role: "status", "data-tone": notice.tone }, notice.text) : null,
+          finished && !loading && data !== null && images.length === 0 ? h("p", { className: "dcpa-chat-note" }, t("mediaCardMissing")) : null,
+          details
+        ),
+        contextMenu
       );
     }
-
     // #endregion
-
     const inject = ["slots", "locale"];
 
     function apply(ctx) {
       ctx.effect(() => ctx.locale.register(NS, { zh, en }), "dsh-cliproxyapi: dictionaries");
       const t = ctx.locale.bind(NS);
 
+      // Open / reveal generated files through DSH's own Session Remote (the
+      // same calls the document preview uses); the Host re-verifies each path.
+      // Desktop availability is asked once per activation.
+      let desktopAvailable = null;
+      // The generated Remote namespace is its own service, "remote.session".
+      const sessionRemote = () => {
+        try {
+          return ctx.get?.("remote.session") ?? ctx.get?.("remote")?.session;
+        } catch {
+          return undefined;
+        }
+      };
+      // Run a follow-up slash command (edit / extend a video) in the session,
+      // the way the composer does; its row appears in the conversation.
+      const runCommand = async (sessionId, line) => {
+        try {
+          const commands = ctx.get?.("remote.commands") ?? ctx.get?.("remote")?.commands;
+          if (typeof commands?.execute !== "function" || typeof sessionId !== "string") return { ok: false };
+          const result = await commands.execute(sessionId, line, []);
+          if (result?.ok !== true || result.value === undefined) return { ok: false, text: result?.error?.message };
+          const outcome = result.value.result;
+          return outcome?.kind === "error" ? { ok: false, text: outcome.text } : { ok: true };
+        } catch (error) {
+          return { ok: false, text: error instanceof Error ? error.message : String(error) };
+        }
+      };
+      const fileActions = {
+        available() {
+          if (desktopAvailable !== null) return desktopAvailable;
+          const remote = sessionRemote();
+          // Not mounted yet: answer no for now and ask again next time.
+          if (typeof remote?.canOpenWorkspacePath !== "function") return Promise.resolve(false);
+          desktopAvailable = (async () => {
+            try {
+              const result = await remote.canOpenWorkspacePath();
+              return result?.ok === true && result.value === true;
+            } catch {
+              desktopAvailable = null;
+              return false;
+            }
+          })();
+          return desktopAvailable;
+        },
+        async applications(path) {
+          try {
+            const result = await sessionRemote()?.workspacePathApplications?.({ path });
+            return result?.ok === true && Array.isArray(result.value)
+              ? result.value.filter((app) => app && typeof app.id === "string" && typeof app.name === "string")
+              : null;
+          } catch {
+            return null;
+          }
+        },
+        async open(path, action, application) {
+          try {
+            const result = await sessionRemote()?.openWorkspacePath?.(
+              action === "reveal" ? { path, action } : application === undefined ? { path } : { path, application }
+            );
+            return result?.ok === true;
+          } catch {
+            return false;
+          }
+        },
+      };
+
       // Each activation owns its stylesheet. A hot reload can start the new
       // activation before the old one is disposed; sharing one element would
       // let the old disposal remove the new activation's styles.
@@ -5177,6 +7568,79 @@ select.dcpa-q-input { appearance: auto; padding-right: 8px; }
         });
       }
 
+      // Generation-model button, left of the quota badge. It only needs the
+      // session id; like the badge, the hero copy steps aside while the
+      // composer copy of the same session is mounted.
+      const mediaEntry = (name, id, placement) =>
+        ctx.slots.inject(name, () =>
+          registerListEntry(
+            ctx.slots,
+            {
+              name,
+              id,
+              order: 9990,
+              label: () => t("tabMedia"),
+              locale: NS,
+              inject: (sessionId) => ({ sessionId: typeof sessionId === "string" ? sessionId : null }),
+            },
+            (props = {}) => h(MediaChip, { t, sessionId: props.sessionId ?? null, placement })
+          )
+        );
+      mediaEntry("conversation.input.right", `${NS}:media`, "composer");
+      mediaEntry("conversation.hero.options", `${NS}:media-hero`, "hero");
+
+      // A real Conversation node explicitly escapes both process folds. Its
+      // definition is replayed by DSH; no session rescans or synthetic events.
+      if (typeof ctx.inject === "function") {
+        ctx.inject(["uiConversation"], (scope) => {
+          if (typeof scope.uiConversation?.events?.register !== "function") return;
+          scope.effect(() => scope.uiConversation.events.register(mediaConversationDefinition), "cpa: media conversation");
+          scope.slots.inject("conversation.chat.node", () => registerListEntry(scope.slots, {
+            name: "conversation.chat.node", key: MEDIA_NODE_KIND, locale: NS,
+            inject: (sessionId) => ({ sessionId: typeof sessionId === "string" ? sessionId : null }),
+          }, (props = {}) => h(MediaToolRow, {
+            t, owner: props.node?.data ?? {}, sessionId: props.sessionId ?? null,
+            fileActions, runCommand, standalone: true,
+          })));
+        });
+      }
+
+      ctx.slots.inject("conversation.composer.dock", () => registerListEntry(ctx.slots, {
+        name: "conversation.composer.dock", id: `${NS}:media-confirmation`, order: -10, locale: NS,
+        inject: (sessionId) => ({ sessionId: typeof sessionId === "string" ? sessionId : null }),
+      }, (props = {}) => h(MediaConfirmationDock, { t, sessionId: props.sessionId ?? null })));
+
+      // The /cpa-image and /cpa-video chat rows, keyed by command name; other
+      // commands keep the generic row.
+      for (const key of ["cpa-image", "cpa-video", "cpa-video-edit", "cpa-video-extend"]) {
+        ctx.slots.inject("conversation.chat.commandview", () =>
+          registerListEntry(
+            ctx.slots,
+            {
+              name: "conversation.chat.commandview",
+              key,
+              locale: NS,
+              inject: (sessionId) => ({ sessionId: typeof sessionId === "string" ? sessionId : null }),
+            },
+            (props = {}) => h(MediaCommandRow, { t, node: props.node ?? null, sessionId: props.sessionId ?? null, fileActions, runCommand, useChat: props.useChat ?? null })
+          )
+        );
+      }
+
+      // The generate_media agent tool's call row (replaces DSH's generic tool row).
+      ctx.slots.inject("tool.call.toolview", () =>
+        registerListEntry(
+          ctx.slots,
+          {
+            name: "tool.call.toolview",
+            key: "generate_media",
+            locale: NS,
+            inject: (sessionId) => ({ sessionId: typeof sessionId === "string" ? sessionId : null }),
+          },
+          (props = {}) => h(MediaToolRow, { t, owner: props, sessionId: props.sessionId ?? null, fileActions, runCommand, useChat: props.useChat ?? null })
+        )
+      );
+
       // 1. Accounts and models: a page of its own in the Settings dialog's left
       //    navigation (like dshmarket's "Market" section). The slot owner gives
       //    unregistered ids the default nav glyph; no DOM is touched here.