@stofone/dsh-agent-roster 0.5.0 → 0.6.0

package/client.js

@@ -33,9 +33,11 @@ window.__ModuleLoader__.load({
     const ROSTERS_ROUTE = "/plugins/dsh-agent-roster/rosters";
     const INSTALL_ROUTE = "/plugins/dsh-agent-roster/install";
     const COLLECTION_ROUTE = "/plugins/dsh-agent-roster/collection";
+    const APPLY_ROUTE = "/plugins/dsh-agent-roster/apply";
 
     const EFFORTS = ["low", "medium", "high", "default"];
     const LANGUAGES = ["auto", "zh", "en"];
+    const REGIONS = ["auto", "global", "china"];
     const FORMATS = ["yaml", "json"];
     const STYLE_ID = "dsh-agent-roster-style";
 
@@ -156,10 +158,12 @@ window.__ModuleLoader__.load({
 
     function useLibrary() {
       const [state, setState] = useState({ status: "loading", data: null, error: false });
-      const load = useCallback(async () => {
+      const load = useCallback(async (options) => {
+        // 只有档案源那处会传 { refresh: true }：绕过 registry 的 TTL，强制回源。
+        const forced = options !== null && typeof options === "object" && options.refresh === true;
         setState((current) => ({ ...current, status: current.data === null ? "loading" : "refreshing" }));
         try {
-          const result = await readJson(LIBRARY_ROUTE);
+          const result = await readJson(forced ? `${LIBRARY_ROUTE}?refresh=1` : LIBRARY_ROUTE);
           if (!result.ok || result.body === null) throw new Error(String(result.status));
           setState({ status: "ready", data: result.body, error: false });
         } catch {
@@ -169,7 +173,7 @@ window.__ModuleLoader__.load({
       useEffect(() => {
         load();
       }, [load]);
-      return { ...state, reload: load };
+      return { ...state, reload: () => load(), refresh: () => load({ refresh: true }) };
     }
 
     /* ------------------------------------------------------------------ */
@@ -503,7 +507,152 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function RosterCard({ roster, deployment, onEdit, onDuplicate, onDelete, onCopy }) {
+    /**
+     * 队长卡：显示档案里声明的队长 + 与部署实际值的核对结果 + “应用”入口。
+     *
+     * 应用只做两件事：切会话模型、往会话里排一段建团队提示词。它不会、也不能
+     * 直接改部署配置——provider/model 不一致时，界面如实说“要改部署”，而不是假装成功。
+     */
+    function CaptainPanel({ roster, report, sessions, onToast }) {
+      useTranslation();
+      const captain = roster.captain ?? {};
+      const [mode, setMode] = useState("existing");
+      const [sessionId, setSessionId] = useState("");
+      const [cwd, setCwd] = useState("");
+      const [busy, setBusy] = useState(false);
+      const [result, setResult] = useState(null);
+
+      useEffect(() => {
+        if (sessionId === "" && sessions.length > 0) setSessionId(sessions[0].sessionId);
+      }, [sessions, sessionId]);
+
+      const checks = report?.checks ?? [];
+      const canApply = mode === "new" || sessionId !== "";
+
+      async function apply() {
+        if (!canApply || busy) return;
+        setBusy(true);
+        setResult(null);
+        try {
+          const payload = { rosterId: roster.id, mode };
+          if (mode === "existing") payload.sessionId = sessionId;
+          else if (cwd.trim() !== "") payload.cwd = cwd.trim();
+          const response = await readJson(APPLY_ROUTE, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(payload),
+          });
+          if (!response.ok || response.body?.ok !== true) {
+            setResult({ ok: false, code: response.body?.code ?? response.body?.error?.code ?? String(response.status) });
+            onToast(t("captain.applyFailed"));
+            return;
+          }
+          setResult({ ok: true, sessionId: response.body.sessionId });
+          onToast(t("captain.applied"));
+        } catch {
+          setResult({ ok: false, code: "network" });
+          onToast(t("misc.failed"));
+        } finally {
+          setBusy(false);
+        }
+      }
+
+      return h(
+        "section",
+        { className: "rstr-captain" },
+        h("div", { className: "rstr-section-title rstr-mt" }, t("captain.title")),
+        h("p", { className: "rstr-hint" }, t("captain.hint")),
+        h(
+          "div",
+          { className: "rstr-meta-grid" },
+          h("span", { className: "rstr-label" }, t("captain.declared")),
+          h("span", { className: "rstr-mono" }, captain.provider || "?") ,
+          h("span", { className: "rstr-mono" }, captain.model || "?"),
+          h("span", { className: "rstr-mono" }, captain.reasoningEffort || t("captain.effortDefault")),
+          h(
+            "span",
+            { className: "rstr-muted" },
+            String(captain.personaPrefix ?? "").trim() === "" ? t("captain.noPersona") : t("captain.hasPersona"),
+          ),
+        ),
+        checks.length === 0
+          ? h("p", { className: "rstr-hint" }, t("captain.noChecks"))
+          : h(
+              "ul",
+              { className: "rstr-checks" },
+              checks.map((check) =>
+                h(
+                  "li",
+                  { key: check.field, className: "rstr-check" },
+                  h("span", null, t(`captain.check.${check.field}`)),
+                  h(
+                    "span",
+                    { className: check.status === "match" ? "rstr-ok" : check.status === "differ" ? "rstr-bad" : "rstr-muted" },
+                    t(`captain.status.${check.status}`, { declared: check.declared || "?", actual: check.actual || "?" }),
+                  ),
+                ),
+              ),
+            ),
+        h(
+          "div",
+          { className: "rstr-apply" },
+          h("div", { className: "rstr-label" }, t("captain.applyTo")),
+          h(
+            "div",
+            { className: "rstr-segmented" },
+            h(
+              "button",
+              { type: "button", className: mode === "existing" ? "rstr-seg rstr-seg-on" : "rstr-seg", onClick: () => setMode("existing") },
+              t("captain.modeExisting"),
+            ),
+            h(
+              "button",
+              { type: "button", className: mode === "new" ? "rstr-seg rstr-seg-on" : "rstr-seg", onClick: () => setMode("new") },
+              t("captain.modeNew"),
+            ),
+          ),
+          mode === "existing"
+            ? h(
+                "select",
+                {
+                  className: "rstr-select",
+                  value: sessionId,
+                  onChange: (event) => setSessionId(event.target.value),
+                },
+                sessions.length === 0
+                  ? h("option", { value: "" }, t("captain.noSessions"))
+                  : sessions.map((session) =>
+                      h(
+                        "option",
+                        { key: session.sessionId, value: session.sessionId },
+                        `${session.sessionId.slice(0, 12)} · ${session.cwd || "?"}${
+                          session.model === null ? "" : ` · ${session.model.model}`
+                        }`,
+                      ),
+                    ),
+              )
+            : h("input", {
+                className: "rstr-input",
+                placeholder: t("captain.cwdPlaceholder"),
+                value: cwd,
+                onChange: (event) => setCwd(event.target.value),
+              }),
+          h(
+            "button",
+            { type: "button", className: "rstr-btn rstr-btn-primary", disabled: !canApply || busy, onClick: apply },
+            busy ? t("captain.applying") : t("captain.apply"),
+          ),
+        ),
+        result !== null && result.ok === false
+          ? h("p", { className: "rstr-bad rstr-small" }, t("captain.applyFailedCode", { code: result.code }))
+          : null,
+        result !== null && result.ok === true
+          ? h("p", { className: "rstr-ok rstr-small" }, t("captain.appliedTo", { session: result.sessionId }))
+          : null,
+      );
+    }
+
+    function RosterCard({ roster, deployment, captainReport, sessions, onToast, onEdit, onDuplicate, onDelete, onCopy }) {
       const [open, setOpen] = useState(false);
       const errors = (roster.diagnostics ?? []).filter((item) => item?.severity === "error").length;
       const deployed = deployment !== undefined && deployment.deployed > 0;
@@ -573,6 +722,9 @@ window.__ModuleLoader__.load({
               roster.members.length === 0
                 ? h("p", { className: "rstr-muted" }, t("roster.noMembers"))
                 : roster.members.map((member) => h(MemberBlock, { key: member.name, member })),
+              roster.captain === null || roster.captain === undefined
+                ? null
+                : h(CaptainPanel, { roster, report: captainReport, sessions: sessions ?? [], onToast }),
               h(DiagnosticList, { items: roster.diagnostics }),
             )
           : null,
@@ -1064,11 +1216,16 @@ window.__ModuleLoader__.load({
     /* 主面板                                                              */
     /* ------------------------------------------------------------------ */
 
+    // 面板本身拿不到 ctx：这里由 apply() 把宿主服务放进来，供设置弹窗使用。
+    const HOST = { form: null, openPanel: null };
+
     function Panel() {
       useTranslation();
       const library = useLibrary();
       const [tab, setTab] = useState("rosters");
       const [query, setQuery] = useState("");
+      const [selectedTags, setSelectedTags] = useState(() => new Set());
+      const [settingsOpen, setSettingsOpen] = useState(false);
       const [editor, setEditor] = useState(null);
       const [importing, setImporting] = useState(false);
       const [removing, setRemoving] = useState(null);
@@ -1082,17 +1239,47 @@ window.__ModuleLoader__.load({
 
       const snapshot = library.data;
       const rosters = useMemo(() => {
-        const all = snapshot?.workspaces?.flatMap((workspace) =>
+        return snapshot?.workspaces?.flatMap((workspace) =>
           (workspace.rosters ?? []).map((roster) => ({ ...roster, rootDir: workspace.rootDir })),
         ) ?? [];
+      }, [snapshot]);
+
+      // 标签池：整个库出现过的标签 + 各标签档案数，按出现次数降序（同数按字母）。
+      const tagPool = useMemo(() => {
+        const counts = new Map();
+        for (const roster of rosters) {
+          for (const tag of roster.tags ?? []) counts.set(tag, (counts.get(tag) ?? 0) + 1);
+        }
+        return [...counts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+      }, [rosters]);
+
+      const filtered = useMemo(() => {
         const needle = query.trim().toLowerCase();
-        if (needle === "") return all;
-        return all.filter((roster) =>
-          [roster.id, roster.title, roster.description, ...(roster.tags ?? []), ...(roster.members ?? []).map((member) => member.name)]
+        return rosters.filter((roster) => {
+          if (selectedTags.size > 0) {
+            const tags = roster.tags ?? [];
+            // 多选是“且”：勾了 revision 和 testing，就只看同时带这两个标签的档案。
+            for (const tag of selectedTags) if (!tags.includes(tag)) return false;
+          }
+          if (needle === "") return true;
+          return [roster.id, roster.title, roster.description, ...(roster.tags ?? []), ...(roster.members ?? []).map((member) => member.name)]
             .filter((value) => typeof value === "string")
-            .some((value) => value.toLowerCase().includes(needle)),
-        );
-      }, [snapshot, query]);
+            .some((value) => value.toLowerCase().includes(needle));
+        });
+      }, [rosters, query, selectedTags]);
+
+      function toggleTag(tag) {
+        setSelectedTags((current) => {
+          const next = new Set(current);
+          if (next.has(tag)) next.delete(tag);
+          else next.add(tag);
+          return next;
+        });
+      }
+
+      function clearTags() {
+        setSelectedTags(() => new Set());
+      }
 
       const teams = snapshot?.teams?.teams ?? [];
       const hints = snapshot?.hints ?? [];
@@ -1153,9 +1340,18 @@ window.__ModuleLoader__.load({
         h(
           "div",
           { className: "rstr-head-actions" },
-          h("button", { type: "button", className: "rstr-btn", onClick: library.reload, disabled: library.status === "refreshing" }, library.status === "refreshing" ? t("panel.refreshing") : t("panel.refresh")),
-          h("button", { type: "button", className: "rstr-btn", onClick: () => setImporting(true), disabled: targets.length === 0 }, t("panel.import")),
-          h("button", { type: "button", className: "rstr-btn rstr-btn-primary", onClick: () => setEditor({ roster: null, rootDir: defaultRoot }), disabled: targets.length === 0 }, t("panel.create")),
+          // 头部只留一个入口：导入/新建属于档案页，刷新索引属于档案源，各自回到自己的页签。
+          h(
+            "button",
+            {
+              type: "button",
+              className: "rstr-btn rstr-settings-btn",
+              onClick: () => setSettingsOpen(true),
+              title: t("panel.settings"),
+            },
+            h("span", { className: "rstr-settings-glyph", "aria-hidden": "true" }, "\u2699"),
+            t("panel.settings"),
+          ),
         ),
       );
 
@@ -1216,31 +1412,93 @@ window.__ModuleLoader__.load({
         } else {
           content = h(
             "div",
-            null,
-            h("input", {
-              className: "rstr-input rstr-search",
-              value: query,
-              placeholder: t("panel.searchPlaceholder"),
-              "aria-label": t("panel.search"),
-              onChange: (event) => setQuery(event.target.value),
-            }),
-            rosters.length === 0
-              ? h("p", { className: "rstr-muted" }, t("panel.noMatch"))
-              : h(
+            { className: "rstr-rosters" },
+            h("aside", { className: "rstr-tagpool", "aria-label": t("panel.tagPool") }, [
+              h("span", { className: "rstr-tagpool-title" }, t("panel.tagPool")),
+              tagPool.length === 0
+                ? h("p", { className: "rstr-muted rstr-small" }, t("panel.tagPoolEmpty"))
+                : h(
+                    "div",
+                    { className: "rstr-tagpool-list" },
+                    tagPool.map(([tag, count]) =>
+                      h(
+                        "button",
+                        {
+                          key: tag,
+                          type: "button",
+                          className: `rstr-tag${selectedTags.has(tag) ? " rstr-tag-on" : ""}`,
+                          "aria-pressed": selectedTags.has(tag),
+                          onClick: () => toggleTag(tag),
+                        },
+                        h("span", { className: "rstr-tag-name" }, tag),
+                        h("span", { className: "rstr-tag-count" }, String(count)),
+                      ),
+                    ),
+                  ),
+              selectedTags.size === 0
+                ? null
+                : h(
+                    "button",
+                    { type: "button", className: "rstr-btn rstr-btn-sm rstr-tag-clear", onClick: clearTags },
+                    t("panel.tagClear"),
+                  ),
+            ]),
+            h(
+              "div",
+              { className: "rstr-rosters-main" },
+              h(
+                "div",
+                { className: "rstr-toolbar" },
+                h("input", {
+                  className: "rstr-input rstr-search",
+                  value: query,
+                  placeholder: t("panel.searchPlaceholder"),
+                  "aria-label": t("panel.search"),
+                  onChange: (event) => setQuery(event.target.value),
+                }),
+                h(
                   "div",
-                  { className: "rstr-cards" },
-                  rosters.map((roster) =>
+                  { className: "rstr-toolbar-actions" },
+                  h(
+                    "button",
+                    { type: "button", className: "rstr-btn", onClick: () => setImporting(true), disabled: targets.length === 0 },
+                    t("panel.import"),
+                  ),
+                  h(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rstr-btn rstr-btn-primary",
+                      onClick: () => setEditor({ roster: null, rootDir: defaultRoot }),
+                      disabled: targets.length === 0,
+                    },
+                    t("panel.create"),
+                  ),
+                ),
+              ),
+              filtered.length === 0
+                ? h("p", { className: "rstr-muted" }, t("panel.noMatch"))
+                : h(
+                    "div",
+                    { className: "rstr-cards" },
+                    filtered.map((roster) =>
                     h(RosterCard, {
                       key: `${roster.rootDir}::${roster.id}`,
                       roster,
                       deployment: snapshot?.deployments?.[roster.id],
+                      captainReport: (snapshot?.captain?.reports ?? []).find(
+                        (item) => item.rosterId === roster.id && item.rootDir === roster.rootDir,
+                      ),
+                      sessions: snapshot?.sessions?.sessions ?? [],
+                      onToast: setToast,
                       onEdit: () => setEditor({ roster, rootDir: roster.rootDir }),
                       onDuplicate: () => setEditor({ roster, rootDir: roster.rootDir, duplicate: true }),
                       onDelete: () => setRemoving(roster),
                       onCopy: copyPayload,
                     }),
                   ),
-                ),
+              ),
+            ),
           );
         }
       }
@@ -1257,6 +1515,8 @@ window.__ModuleLoader__.load({
           remote: snapshot?.remote ?? null,
           onToast: setToast,
           onPulled: () => library.reload(),
+          onRefresh: () => library.refresh(),
+          refreshing: library.status === "refreshing",
         });
       }
 
@@ -1290,6 +1550,22 @@ window.__ModuleLoader__.load({
             : null,
         ),
         toast !== null ? h("div", { className: "rstr-toast", role: "status" }, toast) : null,
+        settingsOpen
+          ? h(
+              Modal,
+              { title: t("panel.settings"), onClose: () => setSettingsOpen(false), width: "560px" },
+              h(SettingsSection, {
+                form: HOST.form,
+                library,
+                onSaved: () => library.reload(),
+                inModal: true,
+                onOpenPanel: () => {
+                  setSettingsOpen(false);
+                  HOST.openPanel?.();
+                },
+              }),
+            )
+          : null,
         editor !== null
           ? h(Editor, {
               target: { roster: editor.roster, rootDir: editor.rootDir, duplicate: editor.duplicate === true },
@@ -1332,7 +1608,7 @@ window.__ModuleLoader__.load({
      * 拉取是**显式动作**：后端按内容比对，相同的跳过、不同的默认不覆盖（会把冲突数报回来）。
      * 前端不做这份判断——它只把结果说清楚，避免"点一下按钮，本地改动就没了"。
      */
-    function SourcesTab({ remote, onToast, onPulled }) {
+    function SourcesTab({ remote, onToast, onPulled, onRefresh, refreshing }) {
       useTranslation();
       const [pulling, setPulling] = useState("");
       const [openId, setOpenId] = useState("");
@@ -1387,10 +1663,33 @@ window.__ModuleLoader__.load({
         }
       }
 
+      // 刷新是档案源自己的动作：绕过 TTL 重新回源，而不是重读本地快照。
+      const head = h(
+        "div",
+        { className: "rstr-sources-head" },
+        h(
+          "p",
+          { className: "rstr-muted rstr-small" },
+          indexes.length > 0
+            ? indexes
+                .map((index) =>
+                  `${index.label} · ${index.stale ? t("source.stale") : t("source.fetchedAt", { when: index.fetchedAt ?? "-" })}`,
+                )
+                .join("   ")
+            : t("source.refreshHint"),
+        ),
+        h(
+          "button",
+          { type: "button", className: "rstr-btn", onClick: onRefresh, disabled: refreshing === true },
+          refreshing === true ? t("panel.refreshing") : t("source.refresh"),
+        ),
+      );
+
       if (collections.length === 0) {
         return h(
           "div",
-          null,
+          { className: "rstr-sources" },
+          head,
           h(EmptyState, { title: t("source.empty"), body: t("source.emptyHint") }),
           problems.length > 0 ? h(DiagnosticList, { items: problems }) : null,
         );
@@ -1399,17 +1698,7 @@ window.__ModuleLoader__.load({
       return h(
         "div",
         { className: "rstr-sources" },
-        indexes.length > 0
-          ? h(
-              "p",
-              { className: "rstr-muted rstr-small" },
-              indexes
-                .map((index) =>
-                  `${index.label} · ${index.stale ? t("source.stale") : t("source.fetchedAt", { when: index.fetchedAt ?? "-" })}`,
-                )
-                .join("   "),
-            )
-          : null,
+        head,
         h(
           "div",
           { className: "rstr-cards" },
@@ -1553,14 +1842,20 @@ window.__ModuleLoader__.load({
      * 语言之外的配置项只读展示——档案目录与状态目录属于"部署事实"，
      * 让它们出现在两个地方反而会让人分不清哪个生效。
      */
-    function SettingsSection({ form, library, onOpenPanel }) {
+    function SettingsSection({ form, library, onOpenPanel, onSaved, inModal }) {
       useTranslation();
-      const [language, setLanguage] = useState(() => readFormLanguage(form));
+      const [language, setLanguage] = useState(() => readLanguage(form));
+      const [region, setRegion] = useState(() => readFormValue(form, "region", "auto"));
+      const [dirs, setDirs] = useState(() => (library?.data?.config?.rosterDirs ?? []).join(", "));
+      const [saved, setSaved] = useState("");
       const [version, setVersion] = useState("");
 
       useEffect(() => {
         if (form?.subscribe === undefined) return undefined;
-        const off = form.subscribe(() => setLanguage(readFormLanguage(form)));
+        const off = form.subscribe(() => {
+          setLanguage(readLanguage(form));
+          setRegion(readFormValue(form, "region", "auto"));
+        });
         return () => {
           if (typeof off === "function") off();
         };
@@ -1568,12 +1863,42 @@ window.__ModuleLoader__.load({
 
       useEffect(() => {
         setVersion(String(library?.data?.version ?? ""));
-      }, [library?.data?.version]);
+        setDirs((library?.data?.config?.rosterDirs ?? []).join(", "));
+      }, [library?.data?.version, library?.data?.config?.rosterDirs]);
+
+      useEffect(() => {
+        if (saved === "") return undefined;
+        const timer = setTimeout(() => setSaved(""), 2000);
+        return () => clearTimeout(timer);
+      }, [saved]);
 
-      function change(next) {
+      function write(key, value) {
+        try {
+          form?.set?.(key, value);
+          setSaved(t("settings.saved"));
+        } catch {
+          setSaved(t("settings.saveFailed"));
+        }
+      }
+
+      function changeLanguage(next) {
         setLanguage(next);
-        // auto 用空串表示"跟随"：配置项的默认值就是 auto，写回字符串即可。
-        form?.set?.("language", next);
+        write("language", next);
+      }
+
+      function changeRegion(next) {
+        setRegion(next);
+        write("region", next);
+      }
+
+      function saveDirs() {
+        // 逗号/分号/空白都当分隔符：用户从别处粘路径时不该因为分隔符被卡住。
+        const list = dirs
+          .split(/[,;\n]/)
+          .map((item) => item.trim())
+          .filter((item) => item !== "");
+        write("rosterDirs", list);
+        onSaved?.();
       }
 
       return h(
@@ -1596,7 +1921,7 @@ window.__ModuleLoader__.load({
                   type: "button",
                   className: `rstr-seg${language === value ? " rstr-seg-on" : ""}`,
                   "aria-pressed": language === value,
-                  onClick: () => change(value),
+                  onClick: () => changeLanguage(value),
                 },
                 value === "auto" ? t("settings.languageAuto") : value === "zh" ? t("settings.languageZh") : t("settings.languageEn"),
               ),
@@ -1606,14 +1931,42 @@ window.__ModuleLoader__.load({
         h(
           "div",
           { className: "rstr-settings-row" },
+          h("span", { className: "rstr-label" }, t("settings.region")),
+          h(
+            "div",
+            { className: "rstr-segmented" },
+            REGIONS.map((value) =>
+              h(
+                "button",
+                {
+                  key: value,
+                  type: "button",
+                  className: `rstr-seg${region === value ? " rstr-seg-on" : ""}`,
+                  "aria-pressed": region === value,
+                  onClick: () => changeRegion(value),
+                },
+                value === "auto" ? t("settings.regionAuto") : value === "global" ? t("settings.regionGlobal") : t("settings.regionChina"),
+              ),
+            ),
+          ),
+        ),
+        h(
+          "div",
+          { className: "rstr-settings-field" },
           h("span", { className: "rstr-label" }, t("settings.rosterDirs")),
           h(
-            "code",
-            { className: "rstr-code rstr-truncate", title: (library?.data?.config?.rosterDirs ?? []).join(", ") },
-            (library?.data?.config?.rosterDirs ?? []).length > 0
-              ? library.data.config.rosterDirs.join(", ")
-              : `${t("settings.globalLibrary")} ${library?.data?.config?.defaultRoot ?? ""}`,
+            "div",
+            { className: "rstr-settings-inline" },
+            h("input", {
+              className: "rstr-input",
+              value: dirs,
+              placeholder: library?.data?.config?.defaultRoot ?? "~/.dsh/agent-roster",
+              "aria-label": t("settings.rosterDirs"),
+              onChange: (event) => setDirs(event.target.value),
+            }),
+            h("button", { type: "button", className: "rstr-btn rstr-btn-sm", onClick: saveDirs }, t("settings.save")),
           ),
+          h("span", { className: "rstr-muted rstr-small" }, t("settings.rosterDirsHint")),
         ),
         h(
           "div",
@@ -1636,11 +1989,28 @@ window.__ModuleLoader__.load({
           { className: "rstr-settings-row" },
           h("span", { className: "rstr-label" }, t("settings.version")),
           h("code", { className: "rstr-code" }, version),
-          h("button", { type: "button", className: "rstr-btn rstr-btn-sm", onClick: onOpenPanel }, t("settings.openPanel")),
+          inModal === true ? null : h("button", { type: "button", className: "rstr-btn rstr-btn-sm", onClick: onOpenPanel }, t("settings.openPanel")),
         ),
+        saved === "" ? null : h("p", { className: "rstr-muted rstr-small" }, saved),
       );
     }
 
+    /* 通用读表单值：volatile 字段在 getSnapshot().value 里，取不到就用兜底。 */
+    function readFormValue(form, key, fallback) {
+      try {
+        const value = form?.getSnapshot?.()?.value;
+        if (value !== null && typeof value === "object" && typeof value[key] === "string") return value[key];
+      } catch {
+        /* 表单不可用时按兜底值。 */
+      }
+      return fallback;
+    }
+
+    function readLanguage(form) {
+      const value = readFormValue(form, "language", "auto");
+      return LANGUAGES.includes(value) ? value : "auto";
+    }
+
     function readFormLanguage(form) {
       let value = "auto";
       try {
@@ -1668,7 +2038,7 @@ window.__ModuleLoader__.load({
      * 文本色一律显式给出（不用 inherit），避免继承到与背景同色的文本。
      */
     const CSS = `
-.rstr-page { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 32px; max-width: 1120px; margin: 0 auto; color: var(--dsw-alias-label-primary); font-size: 14px; line-height: 1.55; }
+.rstr-page { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 32px; width: 100%; box-sizing: border-box; color: var(--dsw-alias-label-primary); font-size: 14px; line-height: 1.55; }
 .rstr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
 .rstr-h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--dsw-alias-label-primary); }
 .rstr-muted { color: var(--dsw-alias-label-secondary); margin: 0; }
@@ -1678,6 +2048,13 @@ window.__ModuleLoader__.load({
 .rstr-code-strong { font-size: 13px; color: var(--dsw-alias-label-primary); font-weight: 600; }
 .rstr-truncate { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
 .rstr-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.rstr-settings-btn { display: inline-flex; align-items: center; gap: 6px; }
+.rstr-settings-glyph { font-size: 14px; line-height: 1; }
+.rstr-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
+.rstr-toolbar-actions { display: flex; gap: 8px; margin-left: auto; }
+.rstr-sources-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
+.rstr-settings { display: flex; flex-direction: column; gap: 10px; }
+.rstr-settings-title { margin: 0; font-size: 14px; font-weight: 600; }
 
 .rstr-btn { border: 1px solid var(--dsw-alias-border-l3); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-family: inherit; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
 .rstr-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
@@ -1708,7 +2085,19 @@ window.__ModuleLoader__.load({
 .rstr-tab-on { color: var(--dsw-alias-label-primary); border-bottom-color: var(--dsw-alias-state-business-primary); font-weight: 600; }
 .rstr-tab-count { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--dsw-alias-button-ghost-active-fill); color: var(--dsw-alias-label-secondary); }
 
-.rstr-cards { display: grid; gap: 12px; }
+.rstr-rosters { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
+@media (max-width: 860px) { .rstr-rosters { grid-template-columns: minmax(0, 1fr); } }
+.rstr-tagpool { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px; background: var(--dsw-alias-bg-layer-2); position: sticky; top: 12px; }
+.rstr-tagpool-title { font-size: 12px; font-weight: 600; color: var(--dsw-alias-label-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
+.rstr-tagpool-list { display: flex; flex-direction: column; gap: 4px; }
+.rstr-tag { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid transparent; background: transparent; color: var(--dsw-alias-label-secondary); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-family: inherit; cursor: pointer; text-align: left; }
+.rstr-tag:hover { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); }
+.rstr-tag:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary); outline-offset: 1px; }
+.rstr-tag-on { background: var(--dsw-alias-button-ghost-active-fill); border-color: var(--dsw-alias-border-l3); color: var(--dsw-alias-label-primary); font-weight: 600; }
+.rstr-tag-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rstr-tag-count { font-size: 11px; color: var(--dsw-alias-label-secondary); font-variant-numeric: tabular-nums; }
+.rstr-tag-clear { align-self: flex-start; }
+.rstr-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); align-items: start; }
 .rstr-card { border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px; padding: 14px 16px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); display: flex; flex-direction: column; gap: 10px; }
 .rstr-card-bad { border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 50%, transparent); }
 .rstr-card-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@@ -1768,6 +2157,13 @@ window.__ModuleLoader__.load({
 
 .rstr-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .rstr-editor-toolbar .rstr-input { width: 110px; }
+.rstr-captain { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--dsw-alias-border-l3); margin-top: 12px; padding-top: 10px; }
+.rstr-meta-grid { display: grid; grid-template-columns: auto repeat(4, minmax(0, auto)); gap: 6px 12px; align-items: baseline; font-size: 12px; }
+.rstr-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.rstr-check { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; border-bottom: 1px solid var(--dsw-alias-border-l1); padding-bottom: 3px; }
+.rstr-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.rstr-select { background: var(--dsw-alias-bg-l2); color: var(--dsw-alias-label-primary); border: 1px solid var(--dsw-alias-border-l3); border-radius: 8px; padding: 5px 8px; font-size: 12px; max-width: 320px; }
+.rstr-bad { color: var(--dsw-alias-state-error-primary); }
 .rstr-segmented { display: inline-flex; border: 1px solid var(--dsw-alias-border-l3); border-radius: 8px; overflow: hidden; }
 .rstr-seg { border: none; background: transparent; padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--dsw-alias-label-secondary); }
 .rstr-seg:hover { background: var(--dsw-alias-interactive-bg-hover); }
@@ -1786,10 +2182,11 @@ window.__ModuleLoader__.load({
 
 .rstr-foot { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 10px; margin-top: 4px; color: var(--dsw-alias-label-secondary); }
 
-.rstr-settings { display: flex; flex-direction: column; gap: 10px; }
-.rstr-settings-title { margin: 0; font-size: 14px; font-weight: 600; }
 .rstr-settings-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
 .rstr-settings-row .rstr-label { min-width: 120px; }
+.rstr-settings-field { display: flex; flex-direction: column; gap: 6px; }
+.rstr-settings-inline { display: flex; align-items: center; gap: 8px; }
+.rstr-settings-inline .rstr-input { flex: 1 1 auto; min-width: 0; }
 `;
 
     function ensureStyle() {
@@ -1889,7 +2286,8 @@ window.__ModuleLoader__.load({
         "agent-roster: language sync",
       );
 
-      const openPanel = () => {
+      HOST.form = form;
+      HOST.openPanel = () => {
         try {
           layout?.selectPanel?.(PANEL_ID);
         } catch {
@@ -1938,7 +2336,7 @@ window.__ModuleLoader__.load({
           { name: "settings.section", id: PANEL_ID, order: 55, locale: NS, label: () => t("settings.nav") },
           function AgentRosterSettings() {
             const library = useLibrary();
-            return h(SettingsSection, { form, library, onOpenPanel: openPanel });
+            return h(SettingsSection, { form, library, onOpenPanel: HOST.openPanel, inModal: false });
           },
         ),
       );