feat(gateway,admin-web): 面板可编辑 provider 推理形状 / 角色级路由 / multimodal 真语义（裁决 03.4.2/03.4.1）

- 后端：AdminLlmProvider 暴露 reasoning{kind}（恒下发，""=未声明=auto）、personaModels、personaProviders；
  顶层新增 reasoningKinds / personaProviderOptions 两个**取值域**（唯一来源＝ runtimeconfig 导出枚举，
  校验错误文案也由枚举拼接 ⇒ 不可能漂移）
- 读写共用同一映射（admin_llm_provider.go），避免「读侧少一个键 ⇒ 面板一保存就抹掉」
- 写侧语义：缺失=保留、给出=整块/整表替换；非法值一律 runtimeconfig.Group.Validate() ⇒ 400 bad_request
  （实测非法 kind 返回 400 且 models.json 完全不动，而非 500 静默失败）
- 前端：新增 LlmProviderRouting（推理形状下拉 + multimodal 开关 + 按角色路由编辑器）；
  目录能力位改三态（true/false/未标注），「未标注」不再谎称「不支持」；目录/角色清单不可用时
  **不阻塞编辑**且与「字段为空」是不同状态；绝无 mock/sample 回退
- 复核：build/vet 绿 + gateway/config 包测试绿 + tsc 0 错 + vite build 成功；2 条变异反证（删 reasoning
  补丁 → 2 例红；删 Group.Validate → 该 400 用例红）已还原
- 注意（主会话已知）：npm run build 把新 SPA 写进 frontend/web/dist，而运行中的二进制优先从磁盘读该目录
  ⇒ :10942 目前是「新面板 + 旧后端」，等阶段 5 全绿后按红线「先 build 到位、再一次 restart」切换

frontend/web/src/admin/modules/Llm.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useAsyncData } from "../../lib/useAsyncData";
-import { adminGetLlm, adminTestLlm, isNotImplemented } from "../../lib/api";
+import { adminGetLlm, adminListPersonas, adminTestLlm, isNotImplemented } from "../../lib/api";
 import type { AdminLlmProvider } from "../../lib/types";
 import { useAuditStore } from "../audit";
 import { Notice, PageHeader } from "../components";
@@ -8,8 +8,9 @@ import { Button, EmptyState, Surface, Tag } from "../../components/primitives";
 import { Icon } from "../../components/Icon";
 import { CatalogPanel } from "./llm/LlmCatalogPanel";
 import { LlmProviderForm } from "./llm/LlmProviderForm";
+import type { CatalogHint } from "./llm/LlmProviderRouting";
 
-/** 一个供应商分组行：身份 + 当前 token 预算 + 测试/编辑动作。 */
+/** 一个供应商分组行：身份 + token 预算 + 推理形状 + 路由 + 测试/编辑动作。 */
 function ProviderRow({
   p,
   busy,
@@ -21,6 +22,7 @@ function ProviderRow({
   onTest: (p: AdminLlmProvider) => void;
   onEdit: (p: AdminLlmProvider) => void;
 }): React.ReactNode {
+  const routes = Object.keys(p.personaModels ?? {}).length;
   return (
     <div className="flex flex-wrap items-center gap-3 rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2.5">
       <span className="font-medium">{p.name}</span>
@@ -29,9 +31,13 @@ function ProviderRow({
       <Tag tone={p.maxTokens ? "accent" : "neutral"}>
         {p.maxTokens ? `maxTokens ${p.maxTokens}` : "maxTokens 默认"}
       </Tag>
+      <Tag tone={p.reasoning?.kind ? "accent" : "neutral"}>
+        {`推理 ${p.reasoning?.kind || "未声明"}`}
+      </Tag>
+      {routes > 0 ? <Tag tone="accent">{`按角色路由 ${routes}`}</Tag> : null}
       <span className="ml-auto flex items-center gap-4">
         <Tag tone={p.enabled ? "ok" : "neutral"}>{p.enabled ? "启用" : "停用"}</Tag>
-        <Tag tone={p.multimodal ? "accent" : "neutral"}>{p.multimodal ? "多模态" : "文本"}</Tag>
+        <Tag tone={p.multimodal ? "accent" : "neutral"}>{p.multimodal ? "主模型可收图" : "主模型不收图"}</Tag>
         <Button size="sm" variant="ghost" disabled={busy} onClick={() => onEdit(p)}>
           编辑
         </Button>
@@ -131,7 +137,7 @@ function LlmPageStatus({ fail, result }: { fail: string | null; result: string |
     <>
       <PageHeader
         title="LLM 模型"
-        subtitle="供应商 + 模型配置(base/key/多模态检测/token 预算) + 测试(真实调用) + fallback + 按角色路由 + 用量"
+        subtitle="供应商 + 模型配置(base/key/主模型收图/token 预算/推理开关形状/按角色路由) + 测试(真实调用) + fallback"
       />
       {fail ? <Notice tone="err">{fail}</Notice> : null}
       {result ? <Notice tone="ok">{result}</Notice> : null}
@@ -139,26 +145,46 @@ function LlmPageStatus({ fail, result }: { fail: string | null; result: string |
   );
 }
 
-/** 生效链：只画接口真的返回过的分组与它们的备选模型，不臆造本地第三级
- *  或 per-persona 路由的运行态（那两个由后端配置决定，本端点不报告）。 */
+/** 一个分组已配置的 per-persona 路由（接口返回的配置真值）。两张表取并集，
+ *  使「只声明了协议没声明模型」的死配置也照实显示，而不是看不见。 */
+function PersonaRouteList({ p }: { p: AdminLlmProvider }): React.ReactNode {
+  const providers = p.personaProviders ?? {};
+  const models = p.personaModels ?? {};
+  const personas = [...new Set([...Object.keys(models), ...Object.keys(providers)])].sort();
+  if (personas.length === 0) return null;
+  return (
+    <p className="pl-1 text-xs text-[var(--mu-text-lo)]">
+      按角色路由：
+      {personas
+        .map((id) => `${id} → ${models[id] || "（未配模型，不生效）"}${providers[id] ? `（协议 ${providers[id]}）` : ""}`)
+        .join("，")}
+    </p>
+  );
+}
+
+/** 生效链：只画接口真的返回过的分组、它们的备选模型与已配置的 per-persona 路由；
+ *  本地第三级由后端开关决定、本端点不报告其运行态，因此不臆造。 */
 function FallbackChain({ providers }: { providers: AdminLlmProvider[] }): React.ReactNode {
   return (
     <Surface className="space-y-3">
-      <h3 className="text-sm font-semibold">生效链（来自接口返回的真实分组）</h3>
+      <h3 className="text-sm font-semibold">生效链与按角色路由（来自接口返回的真实分组）</h3>
       {providers.length === 0 ? (
         <p className="text-xs text-[var(--mu-text-lo)]">暂无分组：上面保存一个之后，这里会显示它的主/备链。</p>
       ) : (
         providers.map((p) => (
-          <div key={p.id} className="flex flex-wrap items-center gap-3 text-sm">
-            <Tag tone={p.enabled ? "ok" : "neutral"}>{p.enabled ? "生效组" : "备用组"}</Tag>
-            <span className="font-mono text-xs text-[var(--mu-text-lo)]">{p.model}</span>
-            <span className="text-[var(--mu-text-mid)]">→ {p.fallback || "无备选模型"}</span>
-            <span className="ml-auto text-xs text-[var(--mu-text-lo)]">接口报错自动降级</span>
+          <div key={p.id} className="space-y-1">
+            <div className="flex flex-wrap items-center gap-3 text-sm">
+              <Tag tone={p.enabled ? "ok" : "neutral"}>{p.enabled ? "生效组" : "备用组"}</Tag>
+              <span className="font-mono text-xs text-[var(--mu-text-lo)]">{p.model}</span>
+              <span className="text-[var(--mu-text-mid)]">→ {p.fallback || "无备选模型"}</span>
+              <span className="ml-auto text-xs text-[var(--mu-text-lo)]">接口报错自动降级</span>
+            </div>
+            <PersonaRouteList p={p} />
           </div>
         ))
       )}
       <Notice>
-        本地模型第三级与 per-persona 路由由后端开关/配置决定，本端点不报告它们的运行态，因此这里不显示，也不臆造。
+        本地模型第三级由后端开关与本地组配置决定，本端点不报告它的运行态，因此这里不显示，也不臆造。
       </Notice>
     </Surface>
   );
@@ -166,6 +192,8 @@ function FallbackChain({ providers }: { providers: AdminLlmProvider[] }): React.
 
 export function LlmModule(): React.ReactNode {
   const { data, error, loading, reload } = useAsyncData(adminGetLlm, []);
+  // 角色清单只作候选提示：取不到也不阻塞编辑（persona id 可手填）。
+  const personas = useAsyncData(adminListPersonas, []);
   const log = useAuditStore((s) => s.log);
   // 端点未实现 / 请求失败必须分开：前者是 404/501，后者是断连或 5xx。
   const unimplemented = isNotImplemented(error);
@@ -179,9 +207,12 @@ export function LlmModule(): React.ReactNode {
   const [busy, setBusy] = useState(false);
   const [fail, setFail] = useState<string | null>(null);
   const [result, setResult] = useState<string | null>(null);
+  // 目录候选带进来的能力建议（可推翻）；没有建议时是 null。
+  const [hint, setHint] = useState<CatalogHint | null>(null);
 
-  const edit = (p: AdminLlmProvider | null) => {
+  const edit = (p: AdminLlmProvider | null, next: CatalogHint | null) => {
     setEditing(p);
+    setHint(next);
     setDraftSeq((n) => n + 1);
   };
 
@@ -198,14 +229,14 @@ export function LlmModule(): React.ReactNode {
           unimplemented={unimplemented}
           busy={busy}
           onTest={(p) => runLlmTest(p, log, setBusy, setFail, setResult)}
-          onEdit={(p) => edit(p)}
+          onEdit={(p) => edit(p, null)}
         />
       </Surface>
 
       <CatalogPanel
-        onPick={(draft) => {
+        onPick={(draft, picked) => {
           log("llm.catalog.fill", "ok");
-          edit(draft);
+          edit(draft, picked);
         }}
       />
 
@@ -218,12 +249,17 @@ export function LlmModule(): React.ReactNode {
         onError={setFail}
         onSaved={reload}
         onCancel={() => setEditing(null)}
+        hint={hint}
+        reasoningKinds={data?.reasoningKinds ?? []}
+        personaProviderOptions={data?.personaProviderOptions ?? []}
+        personaIds={(personas.data ?? []).map((p) => p.id)}
+        personaListError={personas.error}
       />
 
       <FallbackChain providers={providers} />
 
       <Notice>
-        per-role 路由 + 降级逻辑由后端 loop 实现；面板保存即写入 models.json 并热更新运行中的 LLM provider（无需重启，design/04 §3.1）。.env 为兜底。每组 maxTokens 留空 = 保持原值 / 未设时回落 LLM_FALLBACK_MAX_TOKENS。目录候选来自 models.dev，由后端缓存成快照（离线仍可用），绝不进模型运行时热路径。
+        每组的 reasoning.kind（推理开关形状）按端点选：形状属于端点而不属于模型，选错会 400，因此面板只给出「未声明 / auto」与后端下发的几种形状。按角色路由（persona → 模型 / 协议）与降级链由后端 loop 真接线；面板保存即写入 models.json 并热更新运行中的 LLM provider（无需重启，design/04 §3.1），.env 为兜底。maxTokens 留空 = 保持原值 / 未设时回落 LLM_FALLBACK_MAX_TOKENS。multimodal 只表示主模型自己能否收图；图片/OCR 工具用的模型走 .env 的 LLM_VISION_MODEL / LLM_OCR_MODEL。目录候选来自 models.dev，由后端缓存成快照（离线仍可用），绝不进模型运行时热路径。
       </Notice>
     </div>
   );

frontend/web/src/admin/modules/llm/LlmCatalogPanel.tsx

@@ -4,6 +4,7 @@ import { adminGetLlmCatalog, isNotImplemented } from "../../../lib/api";
 import type { AdminLlmProvider } from "../../../lib/types";
 import { Notice } from "../../components";
 import { Button, Surface, Tag } from "../../../components/primitives";
+import type { CatalogHint } from "./LlmProviderRouting";
 
 /** 目录候选一次最多渲染多少行（其余用一行文字如实说明还有多少条）。 */
 const CATALOG_MAX_ROWS = 40;
@@ -12,9 +13,12 @@ const CATALOG_MAX_ROWS = 40;
 interface CatalogModel {
   id: string;
   name: string;
-  /** 接受图片/文件输入 → 表单的 multimodal。 */
-  attachment: boolean;
-  reasoning: boolean;
+  /** 接受图片/文件输入 → 表单的 multimodal。undefined = **目录未标注**该能力
+   *  （不是「不支持」），面板据此既不预填也不说反话。 */
+  attachment?: boolean;
+  /** 目录标注该模型会推理；undefined = 未标注。它**只描述模型**，不描述端点
+   *  的开关形状，因此面板只作提示，绝不据此猜 reasoning.kind。 */
+  reasoning?: boolean;
   toolCall: boolean;
   contextLimit: number;
   outputLimit: number;
@@ -60,8 +64,8 @@ function parseCatalogModel(raw: unknown, modelId: string): CatalogModel | null {
   return {
     id,
     name: str(obj.name) || id,
-    attachment: obj.attachment === true,
-    reasoning: obj.reasoning === true,
+    attachment: typeof obj.attachment === "boolean" ? obj.attachment : undefined,
+    reasoning: typeof obj.reasoning === "boolean" ? obj.reasoning : undefined,
     toolCall: obj.toolCall === true || obj.tool_call === true,
     contextLimit: num(obj.contextLimit) || (limit ? num(limit.context) : 0),
     outputLimit: num(obj.outputLimit) || (limit ? num(limit.output) : 0),
@@ -153,18 +157,27 @@ function protocolFromCatalog(p: CatalogProvider): string {
   return /anthropic/i.test(p.npm) || /anthropic/i.test(p.id) ? "anthropic" : "openai";
 }
 
-/** 目录候选 → 表单草稿。分组 id 取目录 id，重复填入即幂等更新同名分组；
- *  maxTokens 建议值取模型的输出上限（目录真值，没有任何猜测成分）。 */
-function draftFromCatalog(p: CatalogProvider, m: CatalogModel): AdminLlmProvider {
+/** 目录候选 → 表单草稿 + 能力建议。分组 id 取目录 id，重复填入即幂等更新同名
+ *  分组；multimodal 只在目录**明确标注**接受图片输入时预填，maxTokens 建议值取
+ *  模型的输出上限（目录真值，没有任何猜测成分）——两者都只是预填，用户可推翻。 */
+function draftFromCatalog(p: CatalogProvider, m: CatalogModel): { draft: AdminLlmProvider; hint: CatalogHint } {
   return {
-    id: p.id,
-    name: p.name,
-    provider: protocolFromCatalog(p),
-    baseUrl: p.api,
-    model: m.id,
-    multimodal: m.attachment,
-    enabled: false,
-    maxTokens: m.outputLimit || undefined,
+    draft: {
+      id: p.id,
+      name: p.name,
+      provider: protocolFromCatalog(p),
+      baseUrl: p.api,
+      model: m.id,
+      multimodal: m.attachment === true,
+      enabled: false,
+      maxTokens: m.outputLimit || undefined,
+    },
+    hint: {
+      provider: p.id,
+      model: m.id,
+      attachment: m.attachment,
+      supportsReasoning: m.reasoning === true,
+    },
   };
 }
 
@@ -182,8 +195,8 @@ function CatalogModelRow({
     <div className="flex flex-wrap items-center gap-2 rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2">
       <span className="text-sm font-medium">{model.name}</span>
       <span className="font-mono text-xs text-[var(--mu-text-lo)]">{model.id}</span>
-      {model.attachment ? <Tag tone="accent">多模态</Tag> : null}
-      {model.reasoning ? <Tag tone="neutral">推理</Tag> : null}
+      {model.attachment === true ? <Tag tone="accent">可收图</Tag> : null}
+      {model.reasoning === true ? <Tag tone="neutral">推理</Tag> : null}
       {model.toolCall ? <Tag tone="neutral">工具</Tag> : null}
       {model.outputLimit ? <Tag tone="neutral">{`输出上限 ${model.outputLimit}`}</Tag> : null}
       {provider.api ? null : <Tag tone="warn">目录未标 baseURL</Tag>}
@@ -207,7 +220,7 @@ function CatalogList({
   providers: CatalogProvider[];
   query: string;
   providerId: string;
-  onPick: (draft: AdminLlmProvider) => void;
+  onPick: (draft: AdminLlmProvider, hint: CatalogHint) => void;
 }): React.ReactNode {
   const q = query.trim().toLowerCase();
   const rows: { provider: CatalogProvider; model: CatalogModel }[] = [];
@@ -229,7 +242,10 @@ function CatalogList({
           key={`${provider.id}/${model.id}`}
           provider={provider}
           model={model}
-          onPick={() => onPick(draftFromCatalog(provider, model))}
+          onPick={() => {
+            const pick = draftFromCatalog(provider, model);
+            onPick(pick.draft, pick.hint);
+          }}
         />
       ))}
       {rows.length > shown.length ? (
@@ -373,7 +389,11 @@ function CatalogFilters({
 
 /** 目录面板：把「在线目录（后端快照 + 离线兜底）」与「粘贴导入」汇成同一份候选。
  *  任何失败都只影响本栏，绝不编造候选、也绝不改动表单内容。 */
-export function CatalogPanel({ onPick }: { onPick: (draft: AdminLlmProvider) => void }): React.ReactNode {
+export function CatalogPanel({
+  onPick,
+}: {
+  onPick: (draft: AdminLlmProvider, hint: CatalogHint) => void;
+}): React.ReactNode {
   // 第一次点「强制在线刷新」起，请求带上 ?refresh=1（再次点击即再刷一次）。
   const [refreshSeq, setRefreshSeq] = useState(0);
   const force = refreshSeq > 0;

frontend/web/src/admin/modules/llm/LlmProviderForm.tsx

@@ -2,7 +2,16 @@ import { useState } from "react";
 import { adminAddLlmProvider } from "../../../lib/api";
 import type { AdminLlmProvider, LlmProviderRequest } from "../../../lib/types";
 import { useAuditStore } from "../../audit";
-import { Button, Surface, Switch } from "../../../components/primitives";
+import { Button, Surface } from "../../../components/primitives";
+import {
+  MultimodalField,
+  PersonaRoutesEditor,
+  ReasoningField,
+  initPersonaRoutes,
+  personaRouteProblem,
+  routesToMaps,
+} from "./LlmProviderRouting";
+import type { CatalogHint, PersonaRouteDraft } from "./LlmProviderRouting";
 
 /** Add/edit form for one LLM provider group. The group list hands in an
  *  `initial` group to edit (remounted via key) or null to add a new one. The
@@ -17,6 +26,10 @@ interface FormState {
   apiKey: string;
   multimodal: boolean;
   maxTokens: string;
+  /** 推理开关形状；空串 = 未声明（等同 auto）。 */
+  reasoning: string;
+  /** per-persona 路由行（persona → 模型 / 协议覆盖）。 */
+  personaRoutes: PersonaRouteDraft[];
 }
 
 type FieldSetter = <K extends keyof FormState>(key: K, value: FormState[K]) => void;
@@ -30,11 +43,31 @@ function initState(initial: AdminLlmProvider | null): FormState {
     apiKey: "",
     multimodal: initial?.multimodal ?? false,
     maxTokens: initial?.maxTokens ? String(initial.maxTokens) : "",
+    reasoning: initial?.reasoning?.kind ?? "",
+    personaRoutes: initPersonaRoutes(initial),
   };
 }
 
 /** The form fields; state lives in the form component below. */
-function ProviderFields({ form, set, editing }: { form: FormState; set: FieldSetter; editing: boolean }): React.ReactNode {
+function ProviderFields({
+  form,
+  set,
+  editing,
+  hint,
+  reasoningKinds,
+  personaProviderOptions,
+  personaIds,
+  personaListError,
+}: {
+  form: FormState;
+  set: FieldSetter;
+  editing: boolean;
+  hint: CatalogHint | null;
+  reasoningKinds: string[];
+  personaProviderOptions: string[];
+  personaIds: string[];
+  personaListError: string | null;
+}): React.ReactNode {
   return (
     <>
       <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -84,9 +117,21 @@ function ProviderFields({ form, set, editing }: { form: FormState; set: FieldSet
           />
         </label>
       </div>
-      <div className="flex items-end gap-2 pb-[2px]">
-        <Switch checked={form.multimodal} onChange={(v) => set("multimodal", v)} label="多模态" />
-      </div>
+      <MultimodalField checked={form.multimodal} hint={hint} onChange={(v) => set("multimodal", v)} />
+      <ReasoningField
+        value={form.reasoning}
+        kinds={reasoningKinds}
+        provider={form.provider}
+        onChange={(v) => set("reasoning", v)}
+      />
+      <PersonaRoutesEditor
+        routes={form.personaRoutes}
+        knownIds={personaIds}
+        personaListError={personaListError}
+        providerOptions={personaProviderOptions}
+        groupProvider={form.provider}
+        onChange={(next) => set("personaRoutes", next)}
+      />
     </>
   );
 }
@@ -99,6 +144,16 @@ interface LlmProviderFormProps {
   onError: (msg: string | null) => void;
   onSaved: () => void;
   onCancel: () => void;
+  /** 目录候选带进来的能力建议（可推翻）；null = 没有建议。 */
+  hint: CatalogHint | null;
+  /** reasoning.kind 的可选取值，由后端下发（缺省 = 后端未报告）。 */
+  reasoningKinds: string[];
+  /** personaProviders 的可选取值，由后端下发（缺省 = 后端未报告）。 */
+  personaProviderOptions: string[];
+  /** 已知 persona id，仅作为候选提示（可手填）。 */
+  personaIds: string[];
+  /** 角色清单取不到时的原因；null = 清单可用。 */
+  personaListError: string | null;
 }
 
 /** Owns the field state and the save round-trip; the module supplies callbacks. */
@@ -110,25 +165,53 @@ export function LlmProviderForm({
   onError,
   onSaved,
   onCancel,
+  hint,
+  reasoningKinds,
+  personaProviderOptions,
+  personaIds,
+  personaListError,
 }: LlmProviderFormProps): React.ReactNode {
   const editing = initial !== null;
   const [form, setForm] = useState<FormState>(() => initState(initial));
   const log = useAuditStore((s) => s.log);
   const set: FieldSetter = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
 
-  const save = () => {
+  const buildRequest = (): LlmProviderRequest | null => {
     const budget = form.maxTokens.trim();
     if (budget !== "" && !/^\d+$/.test(budget)) {
       onError("maxTokens 必须为非负整数（留空 = 保持/默认）");
-      return;
+      return null;
     }
-    setBusy(true);
-    onError(null);
-    const req: LlmProviderRequest = { provider: form.provider, baseUrl: form.baseUrl, model: form.model, multimodal: form.multimodal };
+    const problem = personaRouteProblem(form.personaRoutes);
+    if (problem) {
+      onError(problem);
+      return null;
+    }
+    const { personaModels, personaProviders } = routesToMaps(form.personaRoutes);
+    const req: LlmProviderRequest = {
+      provider: form.provider,
+      baseUrl: form.baseUrl,
+      model: form.model,
+      multimodal: form.multimodal,
+      // reasoning 整块给出：kind 空串 = 显式回到「未声明」，否则面板无法把
+      // 已存形状改回去（缺省字段意味着「保留原值」）。
+      reasoning: { kind: form.reasoning },
+      // 两张路由表整表提交：面板删掉一行后要真的能从存储里删掉。
+      personaModels,
+      personaProviders,
+    };
     if (editing && initial) req.id = initial.id;
     else if (form.name.trim()) req.id = form.name.trim();
     if (form.apiKey.trim()) req.apiKey = form.apiKey.trim();
     if (budget !== "") req.maxTokens = Number(budget);
+    return req;
+  };
+
+  const save = () => {
+    const req = buildRequest();
+    if (!req) return;
+    setBusy(true);
+    onError(null);
     adminAddLlmProvider(req)
       .then((r) => {
         log("llm.addProvider", "ok");
@@ -155,13 +238,24 @@ export function LlmProviderForm({
           </Button>
         ) : null}
       </div>
-      <ProviderFields form={form} set={set} editing={editing} />
+      <ProviderFields
+        form={form}
+        set={set}
+        editing={editing}
+        hint={hint}
+        reasoningKinds={reasoningKinds}
+        personaProviderOptions={personaProviderOptions}
+        personaIds={personaIds}
+        personaListError={personaListError}
+      />
       <div className="flex items-center gap-2">
         <Button variant="primary" disabled={busy || !form.model || !form.baseUrl} onClick={save}>
           {editing ? "保存修改" : "保存模型"}
         </Button>
         <span className="text-xs text-[var(--mu-text-lo)]">
-          {editing ? "只提交本表单填写的字段，未填字段保持原值" : "保存后写入 models.json 并热更新运行中的 LLM provider"}
+          {editing
+            ? "只提交本表单填写的字段，未填字段保持原值（按角色路由与推理形状按当前表单内容整块提交）"
+            : "保存后写入 models.json 并热更新运行中的 LLM provider"}
         </span>
       </div>
     </Surface>
@@ -170,3 +264,4 @@ export function LlmProviderForm({
 
 const inputCls =
   "w-full rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-[var(--mu-accent)] disabled:opacity-60";
+

frontend/web/src/admin/modules/llm/LlmProviderRouting.tsx

@@ -0,0 +1,302 @@
+import type { AdminLlmProvider } from "../../../lib/types";
+import { Button, Switch, Tag } from "../../../components/primitives";
+
+/* ---------------------------------------------------------------------------
+ * 阶段 5 新增的字段（multimodal / reasoning.kind / per-persona 路由）的编辑界面。
+ * 取值域一律由后端下发（GET /admin/llm 的 reasoningKinds / personaProviderOptions），
+ * 本文件只提供展示文案与本地校验，不硬编码第二套枚举，也不拿任何示例值顶替。
+ * -------------------------------------------------------------------------*/
+
+/** 一个 persona 路由行的编辑草稿。 */
+export interface PersonaRouteDraft {
+  persona: string;
+  model: string;
+  provider: string;
+}
+
+/** 从已存分组播种路由行：两张表的键取并集，使「只声明了 provider、没声明模型」
+ *  的条目也照实显示（面板绝不悄悄丢掉已存配置）。 */
+export function initPersonaRoutes(p: AdminLlmProvider | null): PersonaRouteDraft[] {
+  const models = p?.personaModels ?? {};
+  const providers = p?.personaProviders ?? {};
+  const keys = [...new Set([...Object.keys(models), ...Object.keys(providers)])].sort();
+  return keys.map((persona) => ({
+    persona,
+    model: models[persona] ?? "",
+    provider: providers[persona] ?? "",
+  }));
+}
+
+/** 路由行 → 两张表。空 persona 的行是没填完的行（提交前已被拦下），不编造；
+ *  「有 provider 没 model」的行按原样保留在后端已有的 schema 语义里
+ *  （它不生效，面板在行上明说），因此绝不把已存配置悄悄变成别的形状。 */
+export function routesToMaps(routes: PersonaRouteDraft[]): {
+  personaModels: Record<string, string>;
+  personaProviders: Record<string, string>;
+} {
+  const personaModels: Record<string, string> = {};
+  const personaProviders: Record<string, string> = {};
+  routes.forEach((r) => {
+    const persona = r.persona.trim();
+    if (!persona) return;
+    const model = r.model.trim();
+    const provider = r.provider.trim();
+    if (model) personaModels[persona] = model;
+    if (provider) personaProviders[persona] = provider;
+  });
+  return { personaModels, personaProviders };
+}
+
+/** 路由行的本地校验。只拦两类确定会让整张表出错的输入：persona 没填就填了别的
+ *  东西（后端会 400），以及同一 persona 出现多次（对象键会悄悄合并成一条）。 */
+export function personaRouteProblem(routes: PersonaRouteDraft[]): string | null {
+  const seen = new Set<string>();
+  for (const r of routes) {
+    const persona = r.persona.trim();
+    if (!persona) {
+      if (r.model.trim() || r.provider.trim()) return "按角色路由：有行的 persona 没填（补上 persona，或删掉该行）";
+      continue;
+    }
+    if (seen.has(persona)) return `按角色路由：persona「${persona}」出现多次——同一 persona 只能有一条`;
+    seen.add(persona);
+  }
+  return null;
+}
+
+/** 目录（models.dev）对候选模型的能力标注，用于给面板**建议**。
+ *  attachment 为 undefined = 目录未标注该能力（不是「不支持」）。 */
+export interface CatalogHint {
+  provider: string;
+  model: string;
+  attachment?: boolean;
+  supportsReasoning: boolean;
+}
+
+/** multimodal 开关 + 语义说明 + 目录建议。目录只是建议，随时可推翻；
+ *  目录不可用时这一栏照常可编辑（hint 为 null）。 */
+export function MultimodalField({
+  checked,
+  hint,
+  onChange,
+}: {
+  checked: boolean;
+  hint: CatalogHint | null;
+  onChange: (next: boolean) => void;
+}): React.ReactNode {
+  return (
+    <div className="space-y-1">
+      <Switch checked={checked} onChange={onChange} label="主模型可收图（multimodal）" />
+      <p className="text-xs text-[var(--mu-text-lo)]">
+        勾选 = 主模型自己接收图片输入。图片识别 / OCR 工具用的模型由 .env 的 LLM_VISION_MODEL /
+        LLM_OCR_MODEL 另配，与这里无关。
+      </p>
+      {hint ? (
+        <p className="text-xs text-[var(--mu-text-mid)]">
+          目录（models.dev）对 {hint.model} 的标注：
+          {hint.attachment === true
+            ? "接受图片输入"
+            : hint.attachment === false
+              ? "不接受图片输入"
+              : "未标注该能力（请按你的端点实际能力填）"}
+          {hint.supportsReasoning ? " · 支持推理（开关形状仍需按端点选）" : ""} —— 只是建议，可随时推翻。
+        </p>
+      ) : (
+        <p className="text-xs text-[var(--mu-text-lo)]">未从目录带入建议（目录不可用或本次是手填），不影响编辑。</p>
+      )}
+    </div>
+  );
+}
+
+/** reasoning.kind 的展示文案：键是后端下发的取值，值是**形状说明**。
+ *  后端将来新增的取值没有文案时原样显示，不编造含义。 */
+const REASONING_LABEL: Record<string, string> = {
+  auto: "auto（按模型名 / baseURL 推断，形状有歧义就不下发）",
+  deepseek: "deepseek（顶层 thinking:{type} + reasoning_effort）",
+  openai: "openai（只有 reasoning_effort）",
+  vllm: "vllm（chat_template_kwargs.enable_thinking）",
+  dashscope: "dashscope（顶层 enable_thinking）",
+};
+
+/** 推理开关形状下拉框。候选值 = 后端下发的 reasoningKinds（外加「未声明」）；
+ *  已存值不在候选里时原样列出并标注，绝不悄悄改成别的值。 */
+export function ReasoningField({
+  value,
+  kinds,
+  provider,
+  onChange,
+}: {
+  value: string;
+  kinds: string[];
+  provider: string;
+  onChange: (next: string) => void;
+}): React.ReactNode {
+  const opts = kinds.map((k) => ({ value: k, label: REASONING_LABEL[k] ?? k }));
+  if (value && !kinds.includes(value)) {
+    opts.unshift({ value, label: `${value}（当前值：后端未把它列为可选形状）` });
+  }
+  return (
+    <div className="space-y-1">
+      <label className="block space-y-1">
+        <span className="text-xs text-[var(--mu-text-lo)]">推理开关形状 reasoning.kind</span>
+        <select value={value} onChange={(e) => onChange(e.target.value)} className={`${inputCls} w-full`}>
+          <option value="">未声明（等同 auto：按模型名 / baseURL 推断）</option>
+          {opts.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </label>
+      {kinds.length === 0 ? (
+        <p className="text-xs text-[var(--mu-warn)]">
+          后端未下发可选形状（响应缺少 reasoningKinds）：这里只能选「未声明」，或按 design/04 §3.2 手填后由后端校验（非法值会 400）。
+        </p>
+      ) : null}
+      {provider === "anthropic" && value !== "" && value !== "auto" ? (
+        <p className="text-xs text-[var(--mu-warn)]">
+          anthropic 组只接受「未声明 / auto」：这些形状属于 OpenAI 兼容端点，保存时后端会回 400。
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/** 一行 persona 路由：persona（可手填，已知角色作为候选）+ 模型 + 协议覆盖。 */
+function PersonaRouteRow({
+  route,
+  index,
+  providerOptions,
+  groupProvider,
+  listId,
+  onPatch,
+  onRemove,
+}: {
+  route: PersonaRouteDraft;
+  index: number;
+  providerOptions: string[];
+  groupProvider: string;
+  listId: string;
+  onPatch: (index: number, patch: Partial<PersonaRouteDraft>) => void;
+  onRemove: (index: number) => void;
+}): React.ReactNode {
+  const persona = route.persona.trim();
+  const hasModel = route.model.trim() !== "";
+  const providerValue = route.provider.trim();
+  const providerChoices = providerValue && !providerOptions.includes(providerValue)
+    ? [providerValue, ...providerOptions]
+    : providerOptions;
+  const dead = persona !== "" && providerValue !== "" && !hasModel;
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2">
+      <input
+        value={route.persona}
+        onChange={(e) => onPatch(index, { persona: e.target.value })}
+        list={listId}
+        placeholder="persona id"
+        className={`${inputCls} w-40`}
+        aria-label="persona id"
+      />
+      <input
+        value={route.model}
+        onChange={(e) => onPatch(index, { model: e.target.value })}
+        placeholder="模型名（留空 = 不绑定）"
+        className={`${inputCls} w-56 font-mono text-xs`}
+        aria-label="该 persona 的模型名"
+      />
+      <select
+        value={providerValue}
+        onChange={(e) => onPatch(index, { provider: e.target.value })}
+        className={`${inputCls} w-56`}
+        aria-label="该 persona 的协议覆盖"
+      >
+        <option value="">跟随本组协议（{groupProvider || "未定"}）</option>
+        {providerChoices.map((p) => (
+          <option key={p} value={p}>
+            {providerOptions.includes(p) ? p : `${p}（当前值：后端未把它列为可选）`}
+          </option>
+        ))}
+      </select>
+      {dead ? <Tag tone="warn">只有协议没有模型 → 不生效</Tag> : null}
+      <span className="ml-auto">
+        <Button size="sm" variant="ghost" onClick={() => onRemove(index)}>
+          删除
+        </Button>
+      </span>
+    </div>
+  );
+}
+
+/** per-persona 路由编辑器。角色清单只是**候选**（可手填 id）：清单取不到时
+ *  照常手填，绝不阻塞保存；每条路由的含义与生效条件在下方如实说明。 */
+export function PersonaRoutesEditor({
+  routes,
+  knownIds,
+  personaListError,
+  providerOptions,
+  groupProvider,
+  onChange,
+}: {
+  routes: PersonaRouteDraft[];
+  knownIds: string[];
+  personaListError: string | null;
+  providerOptions: string[];
+  groupProvider: string;
+  onChange: (next: PersonaRouteDraft[]) => void;
+}): React.ReactNode {
+  const listId = "llm-persona-ids";
+  const patch = (index: number, p: Partial<PersonaRouteDraft>): void =>
+    onChange(routes.map((r, i) => (i === index ? { ...r, ...p } : r)));
+  const remove = (index: number): void => onChange(routes.filter((_, i) => i !== index));
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-xs text-[var(--mu-text-lo)]">按角色路由（persona → 模型 / 协议）</span>
+        <span className="text-xs text-[var(--mu-text-lo)]">
+          未列出的 persona 一律用本组默认模型（协议 {groupProvider || "未定"}）
+        </span>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="ml-auto"
+          onClick={() => onChange([...routes, { persona: "", model: "", provider: "" }])}
+        >
+          添加一行
+        </Button>
+      </div>
+      <datalist id={listId}>
+        {knownIds.map((id) => (
+          <option key={id} value={id} />
+        ))}
+      </datalist>
+      {personaListError ? (
+        <p className="text-xs text-[var(--mu-warn)]">
+          角色清单未取到（{personaListError}）：persona id 仍可手填，不影响保存。
+        </p>
+      ) : null}
+      {routes.length === 0 ? (
+        <p className="text-xs text-[var(--mu-text-lo)]">没有 per-persona 路由：该组所有角色都用本组的 model。</p>
+      ) : (
+        routes.map((r, i) => (
+          <PersonaRouteRow
+            key={i}
+            route={r}
+            index={i}
+            providerOptions={providerOptions}
+            groupProvider={groupProvider}
+            listId={listId}
+            onPatch={patch}
+            onRemove={remove}
+          />
+        ))
+      )}
+      {providerOptions.length === 0 ? (
+        <p className="text-xs text-[var(--mu-warn)]">
+          后端未下发可选的 persona 协议（响应缺少 personaProviderOptions）：这里只能选「跟随本组协议」。
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+const inputCls =
+  "rounded-[var(--mu-radius)] bg-[var(--mu-surface-2)] px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-[var(--mu-accent)] disabled:opacity-60";