dsh-thinking-guard 0.1.20 → 0.1.22

package/lib/client.js

@@ -2687,7 +2687,7 @@ async function waitForMcpTools(remote, serverName, retryDelays) {
 * second enable switch here.
 */
 const CSS_ID$1 = "capability-menu-location-css";
-const CSS$1 = `
+const CSS$2 = `
 .lm-block{display:flex;flex-direction:column;gap:8px}
 .lm-btn{border:1px solid var(--dsw-alias-border-l2);border-radius:6px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;line-height:20px;padding:0 10px;cursor:pointer;white-space:nowrap}
 .lm-btn:hover{border-color:var(--dsw-alias-border-l3);background:var(--dsw-alias-interactive-bg-hover)}
@@ -2731,7 +2731,7 @@ textarea.lm-input{resize:vertical;font-family:var(--dsw-font-markdown-code-block
 if (typeof document !== "undefined" && document.querySelector(`style[data-css-id="${CSS_ID$1}"]`) === null) {
 	const tag = document.createElement("style");
 	tag.dataset.cssId = CSS_ID$1;
-	tag.textContent = CSS$1;
+	tag.textContent = CSS$2;
 	document.head.appendChild(tag);
 }
 /** Render a key/value map as `Key: Value` lines. */
@@ -3228,6 +3228,196 @@ function LocationModal(props) {
 		})]
 	});
 }
+//#endregion
+//#region src/client/v3-ui.ts
+/**
+* v3 设计层（D-044）——设置页四个子页面共用的 token、容器脚手架与块级词汇表。
+*
+* WHY A SHARED MODULE: v3 的视觉识别来自一套统一的 token 与块（panel / stats /
+* board / rank / table / gitem / catstat）。四个页面各写一份必然漂移，所以跨页面
+* 复用的部分集中在这里；页面专属样式仍留在各自文件里（call-index.tsx 的
+* `CallIndexStyles()`、CapabilitySection.tsx 的 mc-* 样式块）。
+*
+* CONTAINER, NOT VIEWPORT: 设置面板是宿主写死的 800px 弹窗，内容列只有 564px，
+* 与视口宽度无关（D-044 实测）。因此 v3 的断点全部写成 `@container v3`，页面根
+* 节点加上 `v3-root` 即成为容器。用 `@media` 会在 1200px 窗口里误判成「宽」，
+* 画出实际放不下的双栏。
+*
+* THEME: v3 原始 CSS 写死深色；这里全部映射到宿主 `--dsw-alias-*`，深浅色跟随
+* 应用。卡片底色用「label-primary 的 4% 叠在 bg-layer-2 上」而不是半透明白，
+* 否则浅色主题下会发脏。
+*
+* 本模块只输出样式与一个 style 元素，不假设任何 DOM 结构。
+*/
+/** Every rule the v3 pages share. Class names are global like the existing mc-*. */
+const CSS$1 = [
+	".v3-root{container:v3 / inline-size;--v3-bg:var(--dsw-alias-bg-layer-2,Canvas);--v3-panel:color-mix(in srgb,var(--dsw-alias-label-primary,CanvasText) 4%,var(--dsw-alias-bg-layer-2,Canvas));--v3-panel-2:color-mix(in srgb,var(--dsw-alias-label-primary,CanvasText) 8%,var(--dsw-alias-bg-layer-2,Canvas));--v3-line:color-mix(in srgb,var(--dsw-alias-label-primary,CanvasText) 10%,transparent);--v3-line-2:color-mix(in srgb,var(--dsw-alias-label-primary,CanvasText) 17%,transparent);--v3-t1:var(--dsw-alias-label-primary,CanvasText);--v3-t2:var(--dsw-alias-label-secondary,var(--dsw-alias-label-primary,CanvasText));--v3-t3:var(--dsw-alias-label-tertiary,var(--dsw-alias-label-secondary,CanvasText));--v3-t4:var(--dsw-alias-label-caption,var(--dsw-alias-label-tertiary,CanvasText));--v3-ok:var(--dsw-alias-state-success-primary,#18894a);--v3-bad:var(--dsw-alias-state-error-primary,#c92b2b);--v3-warn:var(--dsw-alias-state-warn-primary,#a2730a);--v3-info:var(--dsw-alias-link,var(--dsw-alias-brand-primary,#2066c4));--v3-ok-dim:color-mix(in srgb,var(--v3-ok) 16%,transparent);--v3-bad-dim:color-mix(in srgb,var(--v3-bad) 14%,transparent);--v3-warn-dim:color-mix(in srgb,var(--v3-warn) 14%,transparent);--v3-info-dim:color-mix(in srgb,var(--v3-info) 14%,transparent);--v3-r-sm:var(--dsw-radius-sm,6px);--v3-r-md:var(--dsw-radius-md,9px);--v3-r-lg:var(--dsw-radius-lg,12px);--v3-font-code:var(--dsw-font-markdown-code-font-family,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);color:var(--v3-t1);font-size:13px;line-height:20px}",
+	".v3-num{font-variant-numeric:tabular-nums}",
+	".v3-mono{font-family:var(--v3-font-code)}",
+	".v3-statusline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--v3-t3);padding:5px 10px;border-radius:999px;background:var(--v3-panel);border:1px solid var(--v3-line);min-width:0}",
+	".v3-statusline b{color:var(--v3-t1);font-weight:600}",
+	".v3-statusline[data-tone='bad']{background:var(--v3-bad-dim);border-color:color-mix(in srgb,var(--v3-bad) 30%,transparent)}",
+	".v3-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;background:var(--v3-t4)}",
+	".v3-dot[data-tone='ok']{background:var(--v3-ok);box-shadow:0 0 0 3px var(--v3-ok-dim)}",
+	".v3-dot[data-tone='bad']{background:var(--v3-bad);box-shadow:0 0 0 3px var(--v3-bad-dim)}",
+	".v3-dot[data-tone='warn']{background:var(--v3-warn);box-shadow:0 0 0 3px var(--v3-warn-dim)}",
+	".v3-dot[data-tone='run']{width:8px;height:8px;background:transparent;border:1.5px solid var(--v3-t3);border-top-color:transparent;animation:v3-spin .9s linear infinite;box-shadow:none}",
+	"@keyframes v3-spin{to{transform:rotate(360deg)}}",
+	".v3-panel{background:var(--v3-panel);border:1px solid var(--v3-line);border-radius:var(--v3-r-lg);padding:13px 15px;min-width:0}",
+	".v3-ph{display:flex;align-items:center;gap:8px;margin-bottom:11px;min-height:18px;flex-wrap:wrap}",
+	".v3-pt{margin:0;font-size:11px;font-weight:600;color:var(--v3-t3);letter-spacing:.07em;text-transform:uppercase}",
+	".v3-pn{margin-left:auto;font-size:11px;color:var(--v3-t4);white-space:nowrap;text-transform:none;letter-spacing:0}",
+	".v3-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--v3-line);border:1px solid var(--v3-line);border-radius:var(--v3-r-lg);overflow:hidden}",
+	".v3-stat{background:var(--v3-panel);padding:13px 15px;min-width:0}",
+	".v3-stat-l{font-size:11px;color:var(--v3-t3);letter-spacing:.02em}",
+	".v3-stat-v{font-size:26px;line-height:34px;font-weight:650;letter-spacing:-.025em;margin-top:3px;font-variant-numeric:tabular-nums}",
+	".v3-stat-v small{font-size:12px;font-weight:400;color:var(--v3-t3);margin-left:4px;letter-spacing:0}",
+	".v3-stat-d{font-size:11px;color:var(--v3-t4);margin-top:2px;display:flex;align-items:center;gap:5px}",
+	".v3-spark{margin-top:8px;display:block;width:100%;height:22px;overflow:visible}",
+	".v3-spark .v3-spark-ln{fill:none;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}",
+	".v3-spark .v3-spark-fl{opacity:.14}",
+	".v3-board{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);gap:12px;align-items:stretch}",
+	".v3-chartbox{position:relative;min-width:0}",
+	".v3-chart{display:block;width:100%;height:212px;overflow:visible}",
+	".v3-chart .v3-grid{stroke:var(--v3-line);stroke-width:1}",
+	".v3-chart .v3-axis{fill:var(--v3-t4);font-size:9.5px}",
+	".v3-chart .v3-area{fill:var(--v3-info);opacity:.13}",
+	".v3-chart .v3-line{fill:none;stroke:var(--v3-info);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}",
+	".v3-chart .v3-pt{fill:var(--v3-panel);stroke:var(--v3-info);stroke-width:1.6}",
+	".v3-chart .v3-bar-er{fill:var(--v3-bad);opacity:.85}",
+	".v3-chart .v3-hlbox{fill:var(--v3-info-dim);stroke:var(--v3-info);stroke-width:1;stroke-dasharray:3 3}",
+	".v3-chart .v3-lbl{fill:var(--v3-t2);font-size:10px}",
+	".v3-chart .v3-lbl-b{fill:var(--v3-t1);font-size:10.5px;font-weight:600}",
+	".v3-legend{display:flex;gap:16px;margin-top:8px;font-size:11px;color:var(--v3-t4);flex-wrap:wrap}",
+	".v3-legend span{display:inline-flex;align-items:center;gap:6px}",
+	".v3-legend i{width:14px;height:2px;border-radius:1px;flex:none;background:var(--v3-info)}",
+	".v3-legend i[data-mark='square']{width:8px;height:8px;border-radius:2px;background:var(--v3-bad)}",
+	".v3-donut-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}",
+	".v3-donut{flex:none;width:104px;height:104px;position:relative}",
+	".v3-donut svg{width:104px;height:104px;transform:rotate(-90deg)}",
+	".v3-donut .v3-trk{fill:none;stroke:var(--v3-panel-2);stroke-width:9}",
+	".v3-donut .v3-seg{fill:none;stroke:var(--v3-t4);stroke-width:9}",
+	".v3-donut .v3-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}",
+	".v3-donut .v3-mid b{font-size:17px;font-weight:650;letter-spacing:-.02em;line-height:20px}",
+	".v3-donut .v3-mid span{font-size:9.5px;color:var(--v3-t4);line-height:12px;letter-spacing:.04em}",
+	".v3-src-list{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:5px}",
+	".v3-src{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--v3-t2);min-width:0}",
+	".v3-src i{width:7px;height:7px;border-radius:2px;flex:none;background:var(--v3-t4);opacity:.5}",
+	".v3-src .v3-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+	".v3-src b{margin-left:auto;color:var(--v3-t1);font-weight:600;font-variant-numeric:tabular-nums}",
+	".v3-src em{font-style:normal;color:var(--v3-t4);min-width:44px;text-align:right;font-variant-numeric:tabular-nums;font-size:11px}",
+	".v3-src-note{margin:9px 0 0;padding-top:9px;border-top:1px solid var(--v3-line);font-size:11px;line-height:17px;color:var(--v3-t4)}",
+	".v3-rank{display:flex;flex-direction:column;gap:1px;margin-top:-2px}",
+	".v3-rank-row{display:flex;align-items:center;gap:9px;min-height:27px;font-size:12px;padding:0 2px;border-radius:4px}",
+	".v3-rank-row:hover{background:var(--v3-panel-2)}",
+	".v3-rank-row .v3-nm{font-family:var(--v3-font-code);font-size:11.5px;color:var(--v3-t2);width:158px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+	".v3-rank-row .v3-bar{flex:1 1 auto;min-width:30px;height:6px;background:var(--v3-panel-2);border-radius:3px;position:relative;overflow:hidden}",
+	".v3-rank-row .v3-bar span{position:absolute;left:0;top:0;bottom:0;min-width:3px;background:var(--v3-info);opacity:.65;border-radius:3px}",
+	".v3-rank-row .v3-bar span[data-bad='true']{background:var(--v3-bad);opacity:.85}",
+	".v3-rank-row .v3-n{width:52px;flex:none;text-align:right;font-variant-numeric:tabular-nums;color:var(--v3-t2);white-space:nowrap}",
+	".v3-rank-row .v3-e{flex:none;text-align:right;font-variant-numeric:tabular-nums;font-size:11px;color:var(--v3-t4);white-space:nowrap}",
+	".v3-rank-row .v3-e[data-bad='true']{color:var(--v3-bad);font-weight:600}",
+	".v3-ts{max-height:min(60vh,560px);overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--v3-line)}",
+	".v3-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}",
+	".v3-table thead th{position:sticky;top:0;z-index:2;background:var(--v3-panel);color:var(--v3-t4);font-weight:500;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:0 11px;height:29px;white-space:nowrap;border-bottom:1px solid var(--v3-line)}",
+	".v3-table thead th.v3-r{text-align:right}",
+	".v3-table tbody td{padding:0 11px;height:32px;border-bottom:1px solid var(--v3-line);vertical-align:middle;white-space:nowrap}",
+	".v3-table tbody tr:last-child td{border-bottom:0}",
+	".v3-table tbody tr:hover td{background:var(--v3-panel-2)}",
+	".v3-table td.v3-r{text-align:right;font-variant-numeric:tabular-nums;color:var(--v3-t2)}",
+	".v3-c-tool{display:flex;align-items:center;gap:7px;min-width:0}",
+	".v3-c-tool .v3-nm{font-family:var(--v3-font-code);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}",
+	".v3-c-tool .v3-srv{font-size:10.5px;color:var(--v3-t4)}",
+	".v3-srcnote{flex:none;font-size:9px;line-height:13px;height:13px;padding:0 4px;border-radius:3px;color:var(--v3-t4);background:var(--v3-panel-2)}",
+	".v3-rt{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}",
+	".v3-rt .v3-tk{width:34px;height:3px;border-radius:2px;background:var(--v3-panel-2);overflow:hidden;flex:none}",
+	".v3-rt .v3-fl{display:block;height:100%;background:var(--v3-ok);border-radius:2px}",
+	".v3-rt .v3-fl[data-bad='true']{background:var(--v3-bad)}",
+	".v3-rt b{font-weight:500;min-width:40px;text-align:right;font-variant-numeric:tabular-nums}",
+	".v3-tfoot{display:flex;align-items:center;gap:9px;padding:9px 15px;border-top:1px solid var(--v3-line);color:var(--v3-t4);font-size:11px;flex-wrap:wrap}",
+	".v3-empty{background:var(--v3-panel);border:1px solid var(--v3-line);border-radius:var(--v3-r-lg);padding:34px 24px;text-align:center}",
+	".v3-empty h3{margin:0 0 5px;font-size:14px;font-weight:600;color:var(--v3-t1)}",
+	".v3-empty p{margin:0 auto;max-width:56ch;font-size:12.5px;line-height:20px;color:var(--v3-t3)}",
+	".v3-banner{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:var(--v3-r-md);background:var(--v3-bad-dim);border:1px solid color-mix(in srgb,var(--v3-bad) 32%,transparent);font-size:12px;line-height:19px;color:var(--v3-t2)}",
+	".v3-banner b{display:block;font-size:12.5px;margin-bottom:2px;color:var(--v3-t1)}",
+	".v3-banner code{font-family:var(--v3-font-code);font-size:10.5px;padding:1px 5px;border-radius:3px;background:var(--v3-panel-2);color:var(--v3-t3);margin-left:5px}",
+	".v3-faultcard{background:var(--v3-panel);border:1px solid var(--v3-line);border-left:3px solid var(--v3-bad);border-radius:var(--v3-r-md);overflow:hidden}",
+	".v3-faultcard .v3-fh{display:flex;align-items:center;gap:8px;padding:9px 13px}",
+	".v3-faultcard .v3-fh b{font-size:12.5px;font-weight:600}",
+	".v3-faultcard .v3-fh code{font-family:var(--v3-font-code);font-size:10.5px;padding:1px 5px;border-radius:3px;background:var(--v3-panel-2);color:var(--v3-t3)}",
+	".v3-faultcard p{margin:0;padding:0 13px 9px;font-size:11.5px;line-height:18px;color:var(--v3-t3)}",
+	".v3-gpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}",
+	".v3-gitem{background:var(--v3-panel);border:1px solid var(--v3-line);border-radius:var(--v3-r-lg);padding:13px 15px;min-width:0}",
+	".v3-gitem .v3-gh{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}",
+	".v3-gitem .v3-gnm{font-size:13px;font-weight:600}",
+	".v3-gitem .v3-gid{font-family:var(--v3-font-code);font-size:10.5px;color:var(--v3-t4)}",
+	".v3-gitem p{margin:0;font-size:11.5px;line-height:18px;color:var(--v3-t3)}",
+	".v3-gitem .v3-gfoot{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:10.5px;color:var(--v3-t4);padding-top:9px;border-top:1px solid var(--v3-line);flex-wrap:wrap}",
+	".v3-kbd{font-family:var(--v3-font-code);font-size:10.5px;padding:1px 5px;border-radius:3px;background:var(--v3-panel-2);color:var(--v3-t2);border:1px solid var(--v3-line)}",
+	".v3-notebox{margin:0;padding:11px 13px;border-radius:var(--v3-r-md);background:var(--v3-panel);border:1px solid var(--v3-line);color:var(--v3-t3);font-size:11.5px;line-height:18px}",
+	".v3-notebox b{color:var(--v3-t2);font-weight:600}",
+	".v3-sw{position:relative;width:34px;height:19px;border:0;border-radius:999px;padding:0;cursor:pointer;flex:none;background:color-mix(in srgb,var(--dsw-alias-label-primary,CanvasText) 16%,transparent);transition:background .16s}",
+	".v3-sw::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--dsw-alias-switch-thumb,var(--v3-bg));transition:transform .16s}",
+	".v3-sw[aria-checked='true']{background:var(--v3-ok)}",
+	".v3-sw[aria-checked='true']::after{transform:translateX(15px)}",
+	".v3-sw:disabled{opacity:.55;cursor:default}",
+	".v3-sw:focus-visible{outline:2px solid var(--v3-info);outline-offset:2px}",
+	".v3-catgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}",
+	".v3-catstat{display:flex;background:var(--v3-panel);border:1px solid var(--v3-line);border-radius:var(--v3-r-lg);overflow:hidden;margin-bottom:12px}",
+	".v3-catstat>div{flex:1 1 0;padding:11px 14px;min-width:0}",
+	".v3-catstat>div+div{border-left:1px solid var(--v3-line)}",
+	".v3-catstat .v3-l{font-size:10.5px;color:var(--v3-t4);letter-spacing:.05em;text-transform:uppercase}",
+	".v3-catstat .v3-v{font-size:19px;font-weight:650;margin-top:2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}",
+	".v3-catstat .v3-v small{font-size:11px;font-weight:400;color:var(--v3-t3);margin-left:4px;letter-spacing:0}",
+	".v3-group{background:var(--v3-panel);border:1px solid var(--v3-line);border-radius:var(--v3-r-md);overflow:hidden;margin-bottom:10px;min-width:0}",
+	".v3-group:last-child{margin-bottom:0}",
+	".v3-group>summary{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;list-style:none;min-height:36px;flex-wrap:wrap}",
+	".v3-group>summary::-webkit-details-marker{display:none}",
+	".v3-group>summary:hover{background:var(--v3-panel-2)}",
+	".v3-group[open]>summary{border-bottom:1px solid var(--v3-line)}",
+	".v3-group>summary .v3-chev{width:10px;height:10px;color:var(--v3-t4);flex:none;transition:transform .14s}",
+	".v3-group[open]>summary .v3-chev{transform:rotate(90deg)}",
+	".v3-group>summary .v3-gnm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}",
+	".v3-group>summary .v3-cnt{font-size:10.5px;color:var(--v3-t4);flex:none}",
+	".v3-group>summary .v3-right{margin-left:auto;display:flex;gap:4px;align-items:center;flex:none}",
+	".v3-trow{display:flex;align-items:center;gap:8px;padding:0 12px 0 29px;min-height:30px;border-top:1px solid var(--v3-line);font-size:12px;min-width:0}",
+	".v3-trow:first-of-type{border-top:0}",
+	".v3-trow:hover{background:var(--v3-panel-2)}",
+	".v3-trow .v3-nm{font-family:var(--v3-font-code);font-size:11.5px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+	".v3-trow .v3-uses{flex:none;font-size:11px;color:var(--v3-t4);font-variant-numeric:tabular-nums;white-space:nowrap}",
+	".v3-tag{display:inline-flex;align-items:center;gap:4px;height:17px;padding:0 6px;border-radius:4px;font-size:10px;line-height:17px;white-space:nowrap;color:var(--v3-t3);background:var(--v3-panel-2)}",
+	".v3-tag[data-tone='info']{color:var(--v3-info);background:var(--v3-info-dim)}",
+	".v3-tag[data-tone='warn']{color:var(--v3-warn);background:var(--v3-warn-dim)}",
+	".v3-tag[data-tone='bad']{color:var(--v3-bad);background:var(--v3-bad-dim)}",
+	".v3-hint{margin:0;font-size:11px;line-height:17px;color:var(--v3-t4)}",
+	".v3-scopehint{display:flex;align-items:center;gap:7px;margin-top:9px;padding:6px 10px;border-radius:var(--v3-r-sm);background:var(--v3-panel-2);font-size:11.5px;line-height:17px;color:var(--v3-t3);flex-wrap:wrap}",
+	".v3-scopehint .v3-id{font-family:var(--v3-font-code);font-size:11px;color:var(--v3-t2);padding:1px 5px;border-radius:3px;background:var(--v3-panel);border:1px solid var(--v3-line)}",
+	".v3-scopehint[data-tone='warn']{background:var(--v3-warn-dim);color:var(--v3-t2)}",
+	".v3-scan{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:11.5px;color:var(--v3-t3)}",
+	".v3-scan .v3-track{position:relative;flex:1 1 auto;height:5px;border-radius:3px;background:var(--v3-panel-2);overflow:hidden;min-width:70px}",
+	".v3-scan .v3-fill{position:absolute;inset:0 auto 0 0;background:var(--v3-info);border-radius:3px;transition:width .3s ease}",
+	".v3-scan[data-running='true'] .v3-fill{width:34% !important;animation:v3-indet 1.25s ease-in-out infinite}",
+	"@keyframes v3-indet{0%{left:-34%}100%{left:100%}}",
+	".v3-scan .v3-pct{font-variant-numeric:tabular-nums;color:var(--v3-t2);font-weight:600;min-width:38px;text-align:right}",
+	"@container v3 (max-width:980px){.v3-board{grid-template-columns:minmax(0,1fr)}}",
+	"@container v3 (max-width:900px){.v3-gpanel,.v3-catgrid{grid-template-columns:minmax(0,1fr)}}",
+	"@container v3 (max-width:720px){.v3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.v3-catstat{flex-wrap:wrap}.v3-catstat>div{flex:1 1 45%}.v3-catstat>div+div{border-left:0}}",
+	"@container v3 (max-width:620px){.v3-rank-row .v3-nm{width:104px}}",
+	"@media (prefers-reduced-motion:reduce){.v3-dot[data-tone='run'],.v3-scan[data-running='true'] .v3-fill{animation:none}}",
+	"[hidden]{display:none !important}"
+].join("");
+/**
+* Mount the shared v3 stylesheet once per document.
+*
+* React does not dedupe <style> elements across the four pages, and all four
+* render their own root, so the element carries a marker attribute and an
+* identical copy in the DOM is harmless. Kept as an element (not a singleton
+* side effect at import time) so the hook-free views stay pure and the test
+* suite can still walk the tree.
+*/
+function V3Styles() {
+	return (0, react.createElement)("style", { "data-v3-style": "true" }, CSS$1);
+}
 /**
 * dsh's source labels for a project's own skill roots — the `project`-prefixed
 * providers of `@deepseek-ai/dsh-skill-filesystem`, which scan
@@ -3717,6 +3907,42 @@ body[data-ds-dark-theme] .mc-count--disabled{color:#b8abad}
 .mc-guard-switch--on{background:var(--dsw-alias-state-business-primary)}
 .mc-guard-switch--on::after{transform:translateX(14px)}
 .mc-guard-switch:disabled{opacity:.5;cursor:not-allowed}
+/* ---- v3 工具与技能（V3-c）：仅新增，不改动上面任何 .mc-* / .mc-guard-* ---- */
+.v3-dot[data-tone='info']{background:var(--v3-info)}
+.v3-trow{cursor:pointer}
+.v3-trow:focus-visible{outline:2px solid var(--v3-info);outline-offset:-2px}
+.v3-racts{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
+.v3-uses-bad{color:var(--v3-bad)}
+button.v3-tag.v3-tag--act{color:var(--v3-t3);background:transparent}
+button.v3-tag.v3-tag--act:hover{color:var(--v3-t1);background:var(--v3-panel-2)}
+button.v3-tag{border:0;cursor:pointer;font-family:inherit}
+button.v3-tag:disabled{opacity:.55;cursor:default}
+.v3-group>summary:focus-visible{outline:2px solid var(--v3-info);outline-offset:-2px}
+.v3-tools{display:flex;flex-direction:column}
+/* ---- v3 catalog rework: 一行工具栏 / 能力诊断卡片 / 卡片向总览看齐 ---- */
+.mc-cat-root{display:flex;flex-direction:column;gap:12px;min-width:0}
+.mc-cat-root .v3-catstat{margin-bottom:0}
+.mc-cat-bar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
+.mc-cat-bar>.mc-cat-actions{flex:none}
+.mc-cat-bar .mc-cat-actions button{font-size:11px;white-space:nowrap}
+.mc-cat-tabs{display:flex;align-items:center;flex:none;min-width:0}
+.mc-cat-tabs .mc-main-tabs{border-bottom:0}
+.mc-cat-search{flex:1 1 auto;width:auto;min-width:96px;max-width:220px;display:flex}
+.mc-cat-search input{box-sizing:border-box;width:100%;height:28px;padding:0 9px;border:1px solid var(--v3-line-2);border-radius:var(--v3-r-sm);background:var(--v3-panel);color:var(--v3-t1);font:inherit;font-size:12.5px}
+.mc-cat-search input:hover{border-color:var(--v3-line-2)}
+.mc-cat-search input:focus-visible{outline:2px solid var(--v3-info);outline-offset:1px;border-color:transparent}
+.mc-cat-actions{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto;flex-wrap:nowrap}
+.mc-cat-diag{background:var(--v3-panel);border:1px solid var(--v3-line);border-radius:var(--v3-r-lg);overflow:hidden}
+.mc-cat-diag>summary{display:flex;align-items:center;gap:8px;padding:11px 15px;min-height:38px;cursor:pointer;list-style:none;font-size:12.5px;font-weight:600;color:var(--v3-t2)}
+.mc-cat-diag>summary::-webkit-details-marker{display:none}
+.mc-cat-diag>summary:hover{background:var(--v3-panel-2)}
+.mc-cat-diag[open]>summary{border-bottom:1px solid var(--v3-line)}
+.mc-cat-diag-body{display:flex;flex-direction:column;gap:4px;padding:11px 15px;font-size:11.5px;line-height:18px;color:var(--v3-t3)}
+.v3-root .v3-catgrid{gap:14px}
+.v3-root .v3-group{border-radius:var(--v3-r-lg);margin-bottom:0}
+.v3-root .v3-group>summary{padding:11px 15px;min-height:38px}
+.v3-root .v3-tag{font-size:11px;height:19px;line-height:19px;padding:0 7px}
+.v3-root .v3-trow{min-height:34px;font-size:12.5px}
 `;
 if (typeof document !== "undefined" && document.querySelector(`style[data-css-id="${CSS_ID}"]`) === null) {
 	const tag = document.createElement("style");
@@ -3789,14 +4015,6 @@ function MarkdownFilePreview(props) {
 	})] });
 }
 /**
-* Which build of the plugin is on screen. Several rounds of "is my profile
-* running the version I just installed?" had to be answered by grepping
-* `node_modules`, because the panel said nothing about itself. The value is
-* inlined by `tsdown` (see `src/client/env.d.ts`).
-*/
-const PLUGIN_VERSION = "0.1.20";
-const PLUGIN_TITLE = `capability-menu v${PLUGIN_VERSION}`;
-/**
 * dsh's skill source labels, shown on rows this plugin cannot edit — so "why is
 * there no 编辑 button" has a visible answer. Labels that name one directory are
 * shown as that path; the rest name a category and go through the dictionary, so
@@ -3821,6 +4039,200 @@ function sourceLabel(source, t) {
 	const key = SOURCE_LABEL_KEYS[source];
 	return key === void 0 ? source : t(key);
 }
+/** Tone of a class chip / state dot, mapped to the v3 `data-tone` palette. */
+const CLASS_TONE = {
+	resident: "info",
+	"on-demand": "warn",
+	disabled: "bad"
+};
+/** State-dot tone inside a row: resident=info, on-demand=warn, disabled=neutral. */
+const CLASS_DOT_TONE = {
+	resident: "info",
+	"on-demand": "warn",
+	disabled: ""
+};
+/** The four-cell `.v3-catstat` strip at the top of the catalog page. */
+function CatalogStatStrip(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "v3-catstat",
+		"data-v3-catstat": "true",
+		children: props.cells.map((cell, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "v3-l",
+			children: cell.label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "v3-v",
+			children: [cell.value, cell.hint !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: cell.hint }) : null]
+		})] }, index))
+	});
+}
+/** Zero-call capability count when a usage map exists, else an honest dash. */
+function zeroCallCount(usage, rows) {
+	if (usage === void 0) return "—";
+	return rows.filter((row) => {
+		const entry = usage.get(row.id);
+		return entry === void 0 || entry.uses === 0;
+	}).length;
+}
+/** Strip a tool’s mcp__<server>__ prefix for display, like the old row did. */
+function displayToolName(server, name) {
+	const prefix = "mcp__" + server + "__";
+	return server !== "built-in" && name.startsWith(prefix) ? name.slice(prefix.length) : name;
+}
+/**
+* Two-column `.v3-catgrid` of native `<details>` server groups, each summary
+* carrying the chevron and the class-count tags, each row a 30px `.v3-trow`.
+* Pure: every interaction is a callback.
+*/
+function ToolGroupsView(props) {
+	const { t, groups, openServers, busy, usage } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "v3-catgrid",
+		"data-v3-catgrid": "true",
+		children: groups.map(({ server, tools }) => {
+			const open = openServers.has(server);
+			const counts = CLASS_KEYS.map((cls) => ({
+				cls,
+				count: countByClass(tools, cls)
+			}));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+				className: "v3-group",
+				open,
+				"data-v3-group": server,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
+					onClick: (e) => {
+						e.preventDefault();
+						props.onToggle(server);
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							className: "v3-chev",
+							viewBox: "0 0 12 12",
+							fill: "none",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+								d: "M4.5 2.5 8 6l-3.5 3.5",
+								stroke: "currentColor",
+								strokeWidth: 1.4,
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "v3-gnm",
+							children: server === "built-in" ? t("builtInGroup") : server
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "v3-cnt",
+							children: tools.length
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "v3-right",
+							children: [counts.filter(({ count }) => count > 0).map(({ cls, count }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: "v3-tag",
+								"data-tone": CLASS_TONE[cls],
+								disabled: busy,
+								title: t("cycleHint"),
+								onClick: (e) => {
+									e.stopPropagation();
+									props.onCycle(tools.filter((tool) => tool.class === cls).map((tool) => tool.id), "tool");
+								},
+								children: [
+									t(CLASS_SHORT_KEYS[cls]),
+									" ",
+									count
+								]
+							}, cls)), server !== "built-in" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "v3-tag v3-tag--act",
+								disabled: busy,
+								onClick: (e) => {
+									e.stopPropagation();
+									props.onEditServer(server);
+								},
+								children: t("edit")
+							})]
+						})
+					]
+				}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "v3-tools",
+					children: tools.map((tool) => {
+						const rowUsage = usage === void 0 ? void 0 : usage.get(tool.id);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "v3-trow",
+							title: tool.classLabel,
+							role: "button",
+							tabIndex: 0,
+							"aria-label": tool.name,
+							onClick: () => props.onOpenDetail(tool.id),
+							onKeyDown: (e) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									props.onOpenDetail(tool.id);
+								}
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "v3-dot",
+									"data-tone": CLASS_DOT_TONE[tool.class],
+									"aria-hidden": "true"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "v3-nm",
+									title: tool.name,
+									children: displayToolName(server, tool.name)
+								}),
+								rowUsage !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "v3-uses",
+									children: [
+										rowUsage.uses,
+										" 次",
+										rowUsage.failures !== void 0 && rowUsage.failures > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "v3-uses-bad",
+											children: [" · 失败 ", rowUsage.failures]
+										}) : null
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "v3-racts",
+									children: [
+										tool.mandatory && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "v3-tag",
+											children: t("mandatory")
+										}),
+										tool.class === "on-demand" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "v3-tag v3-tag--act",
+											title: t("editSearchMetadata"),
+											onClick: (e) => {
+												e.stopPropagation();
+												props.onEditSearch(tool.id);
+											},
+											children: t("searchMetadataButton")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "v3-tag",
+											"data-tone": CLASS_TONE[tool.class],
+											disabled: busy || tool.mandatory,
+											title: tool.classLabel,
+											"aria-label": tool.classLabel,
+											onClick: (e) => {
+												e.stopPropagation();
+												props.onCycle([tool.id], "tool");
+											},
+											children: t(CLASS_SHORT_KEYS[tool.class])
+										})
+									]
+								})
+							]
+						}, tool.id);
+					})
+				})]
+			}, server);
+		})
+	});
+}
 /**
 * Whether the document is visible. A hidden settings tab does no polling and
 * takes no re-reads; coming back is itself a revalidation trigger.
@@ -3836,7 +4248,7 @@ function useDocumentVisible() {
 	return visible;
 }
 function CapabilitySection(props) {
-	const { remote, t, mountError, subscribeSignals } = props;
+	const { remote, t, mountError, subscribeSignals, usage } = props;
 	const [state, setState] = (0, react.useState)(() => {
 		const cached = cachedSnapshot();
 		return cached === void 0 ? { status: "loading" } : {
@@ -4169,13 +4581,14 @@ function CapabilitySection(props) {
 				onCycle: cycleClass,
 				onRefresh: () => void refreshCatalog(),
 				onRefreshMcp: (serverName) => void refreshRegisteredMcp(serverName),
-				onNotice: setNotice
+				onNotice: setNotice,
+				...usage === void 0 ? {} : { usage }
 			})
 		]
 	});
 }
 function ReadyBody(props) {
-	const { remote, snapshot, diagnostics, openServers, busy, activeTab, t, onTabChange, onToggleServer, onCycle, onRefresh, onRefreshMcp, onNotice } = props;
+	const { remote, snapshot, diagnostics, openServers, busy, activeTab, t, onTabChange, onToggleServer, onCycle, onRefresh, onRefreshMcp, onNotice, usage } = props;
 	const [updateStatus, setUpdateStatus] = (0, react.useState)(null);
 	const [updatePhase, setUpdatePhase] = (0, react.useState)("idle");
 	const [updateError, setUpdateError] = (0, react.useState)("");
@@ -4463,347 +4876,204 @@ function ReadyBody(props) {
 		t
 	]);
 	const skillDiagnosticCount = diagnostics === null ? 0 : diagnostics.unavailableSkills.length + diagnostics.shadowedSkills.length + diagnostics.brokenPresets.length + diagnostics.unbrowseableSkills.length + diagnostics.undocumentedSkills.length;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mc-heading-row",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mc-heading-meta",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-						className: "mc-heading",
-						children: t("title")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "mc-version",
-						title: PLUGIN_TITLE,
-						children: ["v", PLUGIN_VERSION]
-					}),
-					updateStatus?.updateAvailable && (updateStatus.updatable || updateStatus.reason === "local") && updatePhase !== "done" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-						type: "button",
-						variant: "primary",
-						size: "sm",
-						className: "mc-update-check",
-						title: t("updateAvailable", { version: updateStatus.latest }),
-						disabled: updatePhase === "installing",
-						onClick: () => setUpdateDialogOpen(true),
-						children: t("newVersion")
-					})
-				]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mc-heading-actions",
+	const catalogUsage = usage;
+	const classCount = (cls) => summary.find((entry) => entry.cls === cls)?.count ?? 0;
+	const statCells = [
+		{
+			label: t("tierResident"),
+			value: classCount("resident")
+		},
+		{
+			label: t("tierOnDemand"),
+			value: classCount("on-demand")
+		},
+		{
+			label: t("tierDisabled"),
+			value: classCount("disabled")
+		},
+		{
+			label: t("catalogZeroCall"),
+			value: zeroCallCount(catalogUsage, statRows),
+			hint: t("catalogZeroCallHint")
+		}
+	];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "v3-root mc-cat-root",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(V3Styles, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mc-cat-bar",
+				"data-v3-catalog-bar": "true",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-						size: "sm",
-						variant: "outline",
-						onClick: () => setRegisterOpen(true),
-						children: t("registerCapability")
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-cat-tabs",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
+							className: "mc-main-tabs",
+							items: [{
+								value: "tools",
+								id: "mc-tab-tools",
+								panelId: "mc-panel-tools",
+								label: t("toolsGroup")
+							}, {
+								value: "skills",
+								id: "mc-tab-skills",
+								panelId: "mc-panel-skills",
+								label: t("skillsGroup")
+							}],
+							value: activeTab,
+							onChange: onTabChange,
+							label: t("title")
+						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-						size: "sm",
-						variant: "outline",
-						onClick: () => void openCatalogDocs(),
-						children: t("viewCatalog")
+					snapshot.rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-cat-search",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+							type: "search",
+							value: filter,
+							placeholder: t("filterByName"),
+							"aria-label": t("filterByName"),
+							title: t("filterHint"),
+							onChange: (e) => setFilter(e.target.value)
+						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-						className: "mc-feedback-link",
-						href: "https://github.com/PKUfudawei/dsh-capability-menu",
-						target: "_blank",
-						rel: "noopener noreferrer",
-						"aria-label": t("feedback"),
-						children: t("feedback")
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mc-cat-actions",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								size: "sm",
+								variant: "outline",
+								onClick: () => setRegisterOpen(true),
+								children: t("registerCapability")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								size: "sm",
+								variant: "outline",
+								onClick: () => void openCatalogDocs(),
+								children: t("viewCatalog")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								type: "button",
+								size: "sm",
+								variant: "outline",
+								onClick: () => window.open("https://github.com/PKUfudawei/dsh-capability-menu", "_blank", "noopener,noreferrer"),
+								children: t("feedback")
+							}),
+							updateStatus?.updateAvailable && (updateStatus.updatable || updateStatus.reason === "local") && updatePhase !== "done" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								type: "button",
+								variant: "primary",
+								size: "sm",
+								className: "mc-update-check",
+								title: t("updateAvailable", { version: updateStatus.latest }),
+								disabled: updatePhase === "installing",
+								onClick: () => setUpdateDialogOpen(true),
+								children: t("newVersion")
+							})
+						]
 					})
 				]
-			})]
-		}),
-		(updatePhase === "done" || updateStatus?.updateAvailable && !updateStatus.updatable && updateStatus.reason !== "local") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mc-update-status",
-			role: "status",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: updatePhase === "done" ? t(updateStatus?.reason === "local" ? "pluginSwitched" : "pluginUpdated") : t("updateAvailable", { version: updateStatus?.latest ?? "" }) }), updatePhase !== "done" && updateStatus?.updateAvailable && !updateStatus.updatable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(updateStatus.reason === "non-registry" ? "pluginNonRegistrySource" : "pluginProfileUnavailable") })]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "mc-desc",
-			children: t("desc")
-		}),
-		diagnostics !== null && skillDiagnosticCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-			className: "mc-diagnostics",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("diagnosticTitle", { count: skillDiagnosticCount }) }),
-				diagnostics.unavailableSkills.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticUnavailable", {
-					name: item.name,
-					source: item.source,
-					preset: item.preset ?? ""
-				}) }, `unavailable-${item.name}-${item.preset ?? ""}-${index}`)),
-				diagnostics.shadowedSkills.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticShadowed", {
-					name: item.name,
-					winner: item.selectedFrom,
-					hidden: item.shadowedFrom
-				}) }, `shadowed-${item.name}-${item.shadowedFrom}-${index}`)),
-				diagnostics.brokenPresets.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticBroken", {
-					id: item.id,
-					reason: item.reason
-				}) }, `broken-${item.id}`)),
-				diagnostics.unbrowseableSkills.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticUnbrowseable", {
-					name: item.name,
-					reason: item.reason
-				}) }, `browse-${item.name}`)),
-				diagnostics.undocumentedSkills.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticUndocumented", {
-					name: item.name,
-					summary: item.summary
-				}) }, `undocumented-${item.name}`))
-			]
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mc-tabs",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
-				className: "mc-main-tabs",
-				items: [{
-					value: "tools",
-					id: "mc-tab-tools",
-					panelId: "mc-panel-tools",
-					label: t("toolsGroup")
-				}, {
-					value: "skills",
-					id: "mc-tab-skills",
-					panelId: "mc-panel-skills",
-					label: t("skillsGroup")
-				}],
-				value: activeTab,
-				onChange: onTabChange,
-				label: t("title")
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mc-summary",
-				children: summary.map(({ cls, count }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: `mc-chip mc-chip--${cls}`,
+			}),
+			(updatePhase === "done" || updateStatus?.updateAvailable && !updateStatus.updatable && updateStatus.reason !== "local") && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mc-update-status",
+				role: "status",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: updatePhase === "done" ? t(updateStatus?.reason === "local" ? "pluginSwitched" : "pluginUpdated") : t("updateAvailable", { version: updateStatus?.latest ?? "" }) }), updatePhase !== "done" && updateStatus?.updateAvailable && !updateStatus.updatable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(updateStatus.reason === "non-registry" ? "pluginNonRegistrySource" : "pluginProfileUnavailable") })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CatalogStatStrip, { cells: statCells }),
+			diagnostics !== null && skillDiagnosticCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+				className: "mc-cat-diag",
+				"data-v3-catalog-diagnostics": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("diagnosticTitle", { count: skillDiagnosticCount }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mc-cat-diag-body",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: `mc-dot mc-dot--${cls}`,
-							"aria-hidden": "true"
-						}),
-						t(CLASS_SHORT_KEYS[cls]),
-						" · ",
-						count
+						diagnostics.unavailableSkills.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticUnavailable", {
+							name: item.name,
+							source: item.source,
+							preset: item.preset ?? ""
+						}) }, `unavailable-${item.name}-${item.preset ?? ""}-${index}`)),
+						diagnostics.shadowedSkills.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticShadowed", {
+							name: item.name,
+							winner: item.selectedFrom,
+							hidden: item.shadowedFrom
+						}) }, `shadowed-${item.name}-${item.shadowedFrom}-${index}`)),
+						diagnostics.brokenPresets.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticBroken", {
+							id: item.id,
+							reason: item.reason
+						}) }, `broken-${item.id}`)),
+						diagnostics.unbrowseableSkills.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticUnbrowseable", {
+							name: item.name,
+							reason: item.reason
+						}) }, `browse-${item.name}`)),
+						diagnostics.undocumentedSkills.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: t("diagnosticUndocumented", {
+							name: item.name,
+							summary: item.summary
+						}) }, `undocumented-${item.name}`))
 					]
-				}, cls))
-			})]
-		}),
-		snapshot.rows.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mc-filter",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
-				type: "search",
-				value: filter,
-				placeholder: t("filterByName"),
-				"aria-label": t("filterByName"),
-				title: t("filterHint"),
-				onChange: (e) => setFilter(e.target.value)
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			role: "tabpanel",
-			id: "mc-panel-tools",
-			"aria-labelledby": "mc-tab-tools",
-			hidden: activeTab !== "tools",
-			className: "mc-panel",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mc-panel-inner",
-				children: servers.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "mc-empty",
-					children: needle === "" ? t("emptyTools") : t("filterNoMatch")
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: servers.map(({ server, tools }) => {
-					const open = openServers.has(server);
-					const counts = CLASS_KEYS.map((cls) => ({
-						cls,
-						count: countByClass(tools, cls)
-					}));
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mc-group",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "mc-group-header",
-							role: "button",
-							tabIndex: 0,
-							"aria-expanded": open,
-							onClick: () => onToggleServer(server),
-							onKeyDown: (e) => {
-								if (e.key === "Enter" || e.key === " ") {
-									e.preventDefault();
-									onToggleServer(server);
-								}
-							},
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconTriangleRightFill, {
-									size: 12,
-									className: `mc-chevron${open ? " mc-chevron--open" : ""}`
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "mc-server-name",
-									children: server === "built-in" ? t("builtInGroup") : server
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "mc-server-count",
-									children: t("toolCount", { count: tools.length })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "mc-server-meta",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "mc-counts",
-										children: counts.filter(({ count }) => count > 0).map(({ cls, count }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-											type: "button",
-											className: `mc-count mc-count--${cls}`,
-											disabled: busy,
-											title: t("cycleHint"),
-											onClick: (e) => {
-												e.stopPropagation();
-												onCycle(tools.filter((t) => t.class === cls).map((t) => t.id), "tool");
-											},
-											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: `mc-dot mc-dot--${cls}`,
-													"aria-hidden": "true"
-												}),
-												t(CLASS_SHORT_KEYS[cls]),
-												" ",
-												count
-											]
-										}, cls))
-									}), server !== "built-in" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "mc-count mc-count--action",
-										disabled: busy,
-										onClick: (e) => {
-											e.stopPropagation();
-											openMcpEdit(server);
-										},
-										children: t("edit")
-									})]
-								})
-							]
-						}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mc-tools",
-							children: tools.map((tool) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "mc-tool",
-								title: tool.classLabel,
-								role: "button",
-								tabIndex: 0,
-								"aria-label": tool.name,
-								onClick: () => void openToolDetail(tool.id),
-								onKeyDown: (e) => {
-									if (e.key === "Enter" || e.key === " ") {
-										e.preventDefault();
-										openToolDetail(tool.id);
-									}
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "mc-tool-name",
-									title: tool.name,
-									children: server !== "built-in" && tool.name.startsWith(`mcp__${server}__`) ? tool.name.slice(`mcp__${server}__`.length) : tool.name
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "mc-tool-meta",
-									children: [
-										tool.mandatory && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, { children: t("mandatory") }),
-										tool.class === "on-demand" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-											size: "sm",
-											variant: "ghost",
-											className: "mc-count--action",
-											title: t("editSearchMetadata"),
-											onClick: (e) => {
-												e.stopPropagation();
-												openSearchEdit(tool.id, "tool");
-											},
-											children: t("searchMetadataButton")
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											type: "button",
-											className: `mc-dot-btn mc-count--${tool.class}`,
-											disabled: busy || tool.mandatory,
-											title: tool.classLabel,
-											"aria-label": tool.classLabel,
-											onClick: (e) => {
-												e.stopPropagation();
-												onCycle([tool.id], "tool");
-											},
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: `mc-dot mc-dot--${tool.class}`,
-												"aria-hidden": "true"
-											})
-										})
-									]
-								})]
-							}, tool.id))
-						})]
-					}, server);
-				}) })
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			role: "tabpanel",
-			id: "mc-panel-skills",
-			"aria-labelledby": "mc-tab-skills",
-			hidden: activeTab !== "skills",
-			className: `mc-panel${skills.length > 0 ? " mc-panel--tight" : ""}`,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "mc-panel-inner",
-				children: skills.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "mc-empty",
-					children: needle === "" ? t("emptySkills") : t("filterNoMatch")
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mc-subtabs",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
-						items: [
-							{
-								value: "global",
-								id: "mc-skill-tab-global",
-								panelId: "mc-skill-panel-global",
-								label: t("globalSkills")
-							},
-							{
-								value: "project",
-								id: "mc-skill-tab-project",
-								panelId: "mc-skill-panel-project",
-								label: t("projectSkills")
-							},
-							{
-								value: "preset",
-								id: "mc-skill-tab-preset",
-								panelId: "mc-skill-panel-preset",
-								label: t("presetSkills")
-							}
-						],
-						value: skillTab,
-						onChange: setSkillTab,
-						label: t("skillsGroup")
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "tabpanel",
+				id: "mc-panel-tools",
+				"aria-labelledby": "mc-tab-tools",
+				hidden: activeTab !== "tools",
+				className: "mc-panel",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mc-panel-inner",
+					children: servers.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mc-empty",
+						children: needle === "" ? t("emptyTools") : t("filterNoMatch")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolGroupsView, {
+						t,
+						groups: servers,
+						openServers,
+						busy,
+						usage: catalogUsage,
+						onToggle: onToggleServer,
+						onCycle,
+						onOpenDetail: (id) => void openToolDetail(id),
+						onEditServer: (server) => void openMcpEdit(server),
+						onEditSearch: (id) => void openSearchEdit(id, "tool")
 					})
-				}), skillTab === "global" ? globalSkills.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillList, {
-					skills: globalSkills,
-					remote,
-					busy,
-					t,
-					onCycle,
-					editableSkills,
-					onEditSkill: openSkillEdit,
-					onAdoptSkill: adoptSkill,
-					onEditSearch: (id) => void openSearchEdit(id, "skill")
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "mc-empty",
-					children: t("emptyGlobalSkills")
-				}) : skillTab === "project" ? projectSkills.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillList, {
-					skills: projectSkills,
-					remote,
-					busy,
-					t,
-					onCycle,
-					editableSkills,
-					onEditSkill: openSkillEdit,
-					onAdoptSkill: adoptSkill,
-					onEditSearch: (id) => void openSearchEdit(id, "skill")
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "mc-empty",
-					children: t("emptyProjectSkills")
-				}) : presetGroups.length > 0 ? presetGroups.map(([preset, group]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "mc-skill-group",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "mc-skill-group-title",
-						children: preset
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillList, {
-						skills: group,
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "tabpanel",
+				id: "mc-panel-skills",
+				"aria-labelledby": "mc-tab-skills",
+				hidden: activeTab !== "skills",
+				className: `mc-panel${skills.length > 0 ? " mc-panel--tight" : ""}`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mc-panel-inner",
+					children: skills.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mc-empty",
+						children: needle === "" ? t("emptySkills") : t("filterNoMatch")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-subtabs",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
+							items: [
+								{
+									value: "global",
+									id: "mc-skill-tab-global",
+									panelId: "mc-skill-panel-global",
+									label: t("globalSkills")
+								},
+								{
+									value: "project",
+									id: "mc-skill-tab-project",
+									panelId: "mc-skill-panel-project",
+									label: t("projectSkills")
+								},
+								{
+									value: "preset",
+									id: "mc-skill-tab-preset",
+									panelId: "mc-skill-panel-preset",
+									label: t("presetSkills")
+								}
+							],
+							value: skillTab,
+							onChange: setSkillTab,
+							label: t("skillsGroup")
+						})
+					}), skillTab === "global" ? globalSkills.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillList, {
+						skills: globalSkills,
 						remote,
 						busy,
 						t,
@@ -4812,307 +5082,339 @@ function ReadyBody(props) {
 						onEditSkill: openSkillEdit,
 						onAdoptSkill: adoptSkill,
 						onEditSearch: (id) => void openSearchEdit(id, "skill")
-					})]
-				}, preset)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "mc-empty",
-					children: t("emptyPresetSkills")
-				})] })
-			})
-		}),
-		toolDetail !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
-			open: true,
-			onClose: () => setToolDetail(null),
-			title: toolDetail.detail?.name ?? toolDetail.id,
-			closeLabel: t("previewClose"),
-			children: [
-				toolDetail.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mc-preview-hint",
-					children: "…"
-				}),
-				toolDetail.status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mc-preview-hint",
-					children: toolDetail.message
-				}),
-				toolDetail.status === "ready" && toolDetail.detail !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "mc-preview-body",
-					children: [toolDetail.detail.description.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "mc-tool-description",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownPreview, {
-							text: toolDetail.detail.description,
-							t
-						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-						className: "mc-preview-plain",
-						children: JSON.stringify({
-							type: "function",
-							function: {
-								name: toolDetail.detail.name,
-								parameters: toolDetail.detail.parameters
-							}
-						}, null, 2)
-					})]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mc-empty",
+						children: t("emptyGlobalSkills")
+					}) : skillTab === "project" ? projectSkills.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillList, {
+						skills: projectSkills,
+						remote,
+						busy,
+						t,
+						onCycle,
+						editableSkills,
+						onEditSkill: openSkillEdit,
+						onAdoptSkill: adoptSkill,
+						onEditSearch: (id) => void openSearchEdit(id, "skill")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mc-empty",
+						children: t("emptyProjectSkills")
+					}) : presetGroups.length > 0 ? presetGroups.map(([preset, group]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mc-skill-group",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mc-skill-group-title",
+							children: preset
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkillList, {
+							skills: group,
+							remote,
+							busy,
+							t,
+							onCycle,
+							editableSkills,
+							onEditSkill: openSkillEdit,
+							onAdoptSkill: adoptSkill,
+							onEditSearch: (id) => void openSearchEdit(id, "skill")
+						})]
+					}, preset)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mc-empty",
+						children: t("emptyPresetSkills")
+					})] })
 				})
-			]
-		}),
-		updateDialogOpen && updateStatus?.updateAvailable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
-			open: true,
-			onClose: closeUpdateDialog,
-			title: t("updateDialogTitle"),
-			closeLabel: t("previewClose"),
-			className: "mc-update-dialog",
-			footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mc-confirm-actions mc-update-actions",
+			}),
+			toolDetail !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+				open: true,
+				onClose: () => setToolDetail(null),
+				title: toolDetail.detail?.name ?? toolDetail.id,
+				closeLabel: t("previewClose"),
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-						type: "button",
-						variant: "outline",
-						size: "sm",
-						className: "mc-update-cancel",
-						disabled: updatePhase === "installing",
-						onClick: closeUpdateDialog,
-						children: t("cancel")
+					toolDetail.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-preview-hint",
+						children: "…"
 					}),
-					updateStatus.reason === "local" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-						type: "button",
-						variant: "outline",
-						size: "sm",
-						disabled: updatePhase === "installing",
-						onClick: () => setSourceStepsOpen((value) => !value),
-						children: t(sourceStepsOpen ? "updateSourceStepsHide" : "updateSourceSteps")
+					toolDetail.status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-preview-hint",
+						children: toolDetail.message
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-						type: "button",
-						variant: "primary",
-						size: "sm",
-						disabled: updatePhase === "installing",
-						onClick: () => void installUpdate(updateStatus.reason === "local" ? "local" : "registry"),
-						children: t(updateStatus.reason === "local" ? "switchAndInstall" : "installUpdate")
+					toolDetail.status === "ready" && toolDetail.detail !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mc-preview-body",
+						children: [toolDetail.detail.description.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "mc-tool-description",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownPreview, {
+								text: toolDetail.detail.description,
+								t
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+							className: "mc-preview-plain",
+							children: JSON.stringify({
+								type: "function",
+								function: {
+									name: toolDetail.detail.name,
+									parameters: toolDetail.detail.parameters
+								}
+							}, null, 2)
+						})]
 					})
 				]
 			}),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("updateVersionComparison", {
-					current: updateStatus.current,
-					latest: updateStatus.latest
-				}) }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(updateStatus.reason === "local" ? "updateLocalNote" : "updateNpmNote") }),
-				updateStatus.reason === "local" && sourceStepsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "mc-update-steps",
+			updateDialogOpen && updateStatus?.updateAvailable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+				open: true,
+				onClose: closeUpdateDialog,
+				title: t("updateDialogTitle"),
+				closeLabel: t("previewClose"),
+				className: "mc-update-dialog",
+				footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mc-confirm-actions mc-update-actions",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("updateSourceStepsIntro") }),
-						updateStatus.sourcePath && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mc-confirm-path",
-							children: updateStatus.sourcePath
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", { children: "git pull\npnpm install\npnpm run build" }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("updateSourceStepsRestart") })
-					]
-				}),
-				updatePhase === "installing" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					role: "status",
-					children: t("updatingPlugin")
-				}),
-				updatePhase === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-					className: "mc-error",
-					role: "alert",
-					children: [
-						t("pluginUpdateFailed"),
-						" ",
-						updateError
-					]
-				})
-			]
-		}),
-		searchEdit !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
-			open: true,
-			onClose: () => setSearchEdit(null),
-			title: `${t("editSearchMetadata")} · ${searchEdit.id}`,
-			closeLabel: t("previewClose"),
-			className: "mc-search-dialog",
-			children: [
-				searchEdit.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mc-preview-hint",
-					children: "…"
-				}),
-				searchEdit.status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mc-preview-hint",
-					children: searchEdit.message
-				}),
-				searchEdit.status === "ready" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "mc-confirm-body",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "mc-search-field",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "mc-search-label-row",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-									htmlFor: "mc-search-description",
-									children: t("searchDescription")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									id: "mc-search-description-note",
-									children: t("searchMetadataNote")
-								})]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-								id: "mc-search-description",
-								"aria-describedby": "mc-search-description-note",
-								value: searchDescription,
-								maxLength: searchEdit.metadata?.maxChars,
-								disabled: searchSaving,
-								onChange: (e) => setSearchDescription(e.target.value)
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "mc-search-hint",
-							children: [
-								searchDescription.length,
-								"/",
-								searchEdit.metadata?.maxChars
-							]
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							className: "mc-update-cancel",
+							disabled: updatePhase === "installing",
+							onClick: closeUpdateDialog,
+							children: t("cancel")
 						}),
-						searchEdit.message !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mc-error",
-							children: searchEdit.message
+						updateStatus.reason === "local" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							disabled: updatePhase === "installing",
+							onClick: () => setSourceStepsOpen((value) => !value),
+							children: t(sourceStepsOpen ? "updateSourceStepsHide" : "updateSourceSteps")
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "mc-confirm-actions",
-							children: [searchDescription !== searchEdit.metadata?.defaultDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								size: "sm",
-								variant: "ghost",
-								disabled: searchSaving,
-								title: t("searchMetadataRestoreHint"),
-								onClick: () => setSearchDescription(searchEdit.metadata?.defaultDescription ?? ""),
-								children: t("searchMetadataRestore")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								size: "sm",
-								variant: "primary",
-								disabled: searchSaving,
-								onClick: () => void saveSearchEdit(),
-								children: t("searchMetadataSave")
-							})]
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							type: "button",
+							variant: "primary",
+							size: "sm",
+							disabled: updatePhase === "installing",
+							onClick: () => void installUpdate(updateStatus.reason === "local" ? "local" : "registry"),
+							children: t(updateStatus.reason === "local" ? "switchAndInstall" : "installUpdate")
 						})
 					]
-				})
-			]
-		}),
-		(registerOpen || editMcp !== void 0 || editSkill !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LocationModal, {
-			remote,
-			t,
-			defaultKind: activeTab === "skills" ? "skill" : "mcp",
-			...editMcp !== void 0 ? { editMcp } : {},
-			...editSkill !== void 0 ? { editSkill } : {},
-			onClose: () => {
-				setRegisterOpen(false);
-				setEditMcp(void 0);
-				setEditSkill(void 0);
-			},
-			onChanged: (notice, refreshMcpServer) => {
-				if (refreshMcpServer !== void 0) onRefreshMcp(refreshMcpServer);
-				else onRefresh();
-				if (notice !== void 0) onNotice(notice);
-			}
-		}),
-		catalogDocs !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
-			open: true,
-			onClose: () => setCatalogDocs(null),
-			title: t("viewCatalog"),
-			closeLabel: t("previewClose"),
-			children: [
-				catalogDocs.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mc-preview-hint",
-					children: "…"
-				}),
-				catalogDocs.status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mc-preview-hint",
-					children: catalogDocs.message
 				}),
-				catalogDocs.status === "ready" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mc-subtabs mc-catalog-tabs",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
-						items: [{
-							value: "policy",
-							id: "mc-cat-tab-policy",
-							panelId: "mc-cat-panel-policy",
-							label: t("catalogPolicy")
-						}, {
-							value: "catalog",
-							id: "mc-cat-tab-catalog",
-							panelId: "mc-cat-panel-catalog",
-							label: t("catalogOnDemand")
-						}],
-						value: catalogTab,
-						onChange: setCatalogTab,
-						label: t("viewCatalog")
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("updateVersionComparison", {
+						current: updateStatus.current,
+						latest: updateStatus.latest
+					}) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t(updateStatus.reason === "local" ? "updateLocalNote" : "updateNpmNote") }),
+					updateStatus.reason === "local" && sourceStepsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mc-update-steps",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("updateSourceStepsIntro") }),
+							updateStatus.sourcePath && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mc-confirm-path",
+								children: updateStatus.sourcePath
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", { children: "git pull\npnpm install\npnpm run build" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("updateSourceStepsRestart") })
+						]
+					}),
+					updatePhase === "installing" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						role: "status",
+						children: t("updatingPlugin")
+					}),
+					updatePhase === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "mc-error",
+						role: "alert",
+						children: [
+							t("pluginUpdateFailed"),
+							" ",
+							updateError
+						]
 					})
-				}), catalogTab === "policy" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "mc-catalog-path",
-					children: t("catalogPolicyNote")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-					className: "mc-preview-body",
-					children: catalogDocs.docs.policyYaml
-				})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mc-catalog-toolbar",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mc-catalog-path",
-							children: t("catalogSearchNote", { count: catalogDocs.docs.onDemand.length })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "mc-summary-setting",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-									htmlFor: "mc-summary-limit",
-									children: t("summaryLimit")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									id: "mc-summary-limit",
-									type: "number",
-									min: 20,
-									step: 1,
-									value: summaryLimitDraft,
-									disabled: !catalogDocs.docs.searchSettingsEnabled || summaryLimitSaving,
-									onChange: (e) => {
-										setSummaryLimitDraft(e.target.value);
-										setSummaryLimitError(void 0);
-									}
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("summaryLimitUnit") }),
-								catalogDocs.docs.searchSettingsEnabled && summaryLimitDraft !== String(catalogDocs.docs.summaryMaxChars) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				]
+			}),
+			searchEdit !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+				open: true,
+				onClose: () => setSearchEdit(null),
+				title: `${t("editSearchMetadata")} · ${searchEdit.id}`,
+				closeLabel: t("previewClose"),
+				className: "mc-search-dialog",
+				children: [
+					searchEdit.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-preview-hint",
+						children: "…"
+					}),
+					searchEdit.status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-preview-hint",
+						children: searchEdit.message
+					}),
+					searchEdit.status === "ready" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mc-confirm-body",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "mc-search-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mc-search-label-row",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+										htmlFor: "mc-search-description",
+										children: t("searchDescription")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										id: "mc-search-description-note",
+										children: t("searchMetadataNote")
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+									id: "mc-search-description",
+									"aria-describedby": "mc-search-description-note",
+									value: searchDescription,
+									maxLength: searchEdit.metadata?.maxChars,
+									disabled: searchSaving,
+									onChange: (e) => setSearchDescription(e.target.value)
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "mc-search-hint",
+								children: [
+									searchDescription.length,
+									"/",
+									searchEdit.metadata?.maxChars
+								]
+							}),
+							searchEdit.message !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mc-error",
+								children: searchEdit.message
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "mc-confirm-actions",
+								children: [searchDescription !== searchEdit.metadata?.defaultDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									size: "sm",
+									variant: "ghost",
+									disabled: searchSaving,
+									title: t("searchMetadataRestoreHint"),
+									onClick: () => setSearchDescription(searchEdit.metadata?.defaultDescription ?? ""),
+									children: t("searchMetadataRestore")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 									size: "sm",
 									variant: "primary",
-									disabled: summaryLimitSaving,
-									onClick: () => void saveSummaryLimit(),
+									disabled: searchSaving,
+									onClick: () => void saveSearchEdit(),
 									children: t("searchMetadataSave")
-								}),
-								!catalogDocs.docs.searchSettingsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("summaryLimitDisabled") })
-							]
-						})]
+								})]
+							})
+						]
+					})
+				]
+			}),
+			(registerOpen || editMcp !== void 0 || editSkill !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LocationModal, {
+				remote,
+				t,
+				defaultKind: activeTab === "skills" ? "skill" : "mcp",
+				...editMcp !== void 0 ? { editMcp } : {},
+				...editSkill !== void 0 ? { editSkill } : {},
+				onClose: () => {
+					setRegisterOpen(false);
+					setEditMcp(void 0);
+					setEditSkill(void 0);
+				},
+				onChanged: (notice, refreshMcpServer) => {
+					if (refreshMcpServer !== void 0) onRefreshMcp(refreshMcpServer);
+					else onRefresh();
+					if (notice !== void 0) onNotice(notice);
+				}
+			}),
+			catalogDocs !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
+				open: true,
+				onClose: () => setCatalogDocs(null),
+				title: t("viewCatalog"),
+				closeLabel: t("previewClose"),
+				children: [
+					catalogDocs.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-preview-hint",
+						children: "…"
 					}),
-					summaryLimitError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "mc-error mc-catalog-limit-error",
-						children: summaryLimitError
+					catalogDocs.status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-preview-hint",
+						children: catalogDocs.message
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					catalogDocs.status === "ready" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-subtabs mc-catalog-tabs",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
+							items: [{
+								value: "policy",
+								id: "mc-cat-tab-policy",
+								panelId: "mc-cat-panel-policy",
+								label: t("catalogPolicy")
+							}, {
+								value: "catalog",
+								id: "mc-cat-tab-catalog",
+								panelId: "mc-cat-panel-catalog",
+								label: t("catalogOnDemand")
+							}],
+							value: catalogTab,
+							onChange: setCatalogTab,
+							label: t("viewCatalog")
+						})
+					}), catalogTab === "policy" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mc-catalog-path",
+						children: t("catalogPolicyNote")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
 						className: "mc-preview-body",
-						children: [catalogDocs.docs.onDemand.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mc-preview-hint",
-							children: t("catalogEmpty")
-						}), catalogDocs.docs.onDemand.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "mc-search-result",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "mc-search-result-head",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: row.kind === "tool" ? "Tool" : "Skill" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "mc-search-result-id",
-									children: row.id
-								})]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-								className: "mc-search-result-summary",
-								children: row.summary
+						children: catalogDocs.docs.policyYaml
+					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mc-catalog-toolbar",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mc-catalog-path",
+								children: t("catalogSearchNote", { count: catalogDocs.docs.onDemand.length })
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "mc-summary-setting",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+										htmlFor: "mc-summary-limit",
+										children: t("summaryLimit")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										id: "mc-summary-limit",
+										type: "number",
+										min: 20,
+										step: 1,
+										value: summaryLimitDraft,
+										disabled: !catalogDocs.docs.searchSettingsEnabled || summaryLimitSaving,
+										onChange: (e) => {
+											setSummaryLimitDraft(e.target.value);
+											setSummaryLimitError(void 0);
+										}
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("summaryLimitUnit") }),
+									catalogDocs.docs.searchSettingsEnabled && summaryLimitDraft !== String(catalogDocs.docs.summaryMaxChars) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+										size: "sm",
+										variant: "primary",
+										disabled: summaryLimitSaving,
+										onClick: () => void saveSummaryLimit(),
+										children: t("searchMetadataSave")
+									}),
+									!catalogDocs.docs.searchSettingsEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("summaryLimitDisabled") })
+								]
 							})]
-						}, `${row.kind}:${row.id}`))]
-					})
-				] })] })
-			]
-		})
-	] });
+						}),
+						summaryLimitError !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "mc-error mc-catalog-limit-error",
+							children: summaryLimitError
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mc-preview-body",
+							children: [catalogDocs.docs.onDemand.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "mc-preview-hint",
+								children: t("catalogEmpty")
+							}), catalogDocs.docs.onDemand.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "mc-search-result",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mc-search-result-head",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: row.kind === "tool" ? "Tool" : "Skill" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "mc-search-result-id",
+										children: row.id
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "mc-search-result-summary",
+									children: row.summary
+								})]
+							}, `${row.kind}:${row.id}`))]
+						})
+					] })] })
+				]
+			})
+		]
+	});
 }
 function projectRootForSkill(path) {
 	return path.match(/^(.*)\/(?:\.dsh|\.agents)\/skills(?:\/.*)?$/)?.[1] ?? path;
@@ -5298,111 +5600,118 @@ function SkillList(props) {
 	show the directory the click will link. */
 	const confirmAdoptRow = confirmAdopt === null ? void 0 : skills.find((row) => row.id === confirmAdopt);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		skills.map((skill) => {
-			const open = openSkill === skill.id;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mc-skill",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "mc-skill-row",
-					role: "button",
-					tabIndex: 0,
-					"aria-expanded": open,
-					onClick: () => void toggleSkill(skill.id),
-					onKeyDown: (e) => {
-						if (e.key === "Enter" || e.key === " ") {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "v3-catgrid",
+			children: skills.map((skill) => {
+				const open = openSkill === skill.id;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+					className: "v3-group",
+					open,
+					"data-v3-skill": skill.id,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", {
+						onClick: (e) => {
 							e.preventDefault();
 							toggleSkill(skill.id);
-						}
-					},
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconTriangleRightFill, {
-							size: 12,
-							className: `mc-chevron${open ? " mc-chevron--open" : ""}`
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "mc-skill-name",
-							children: skill.name
-						}),
-						PROJECT_SKILL_SOURCES.has(skill.source ?? "") && skill.path !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "mc-source",
-							title: skill.path,
-							children: t("projectRootLabel", { path: projectRootForSkill(skill.path) })
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "mc-skill-meta",
-							children: [
-								skill.mandatory && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, { children: t("mandatory") }),
-								skill.class === "on-demand" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-									size: "sm",
-									variant: "ghost",
-									className: "mc-count--action",
-									title: t("editSearchMetadata"),
-									onClick: (e) => {
-										e.stopPropagation();
-										onEditSearch(skill.id);
-									},
-									children: t("searchMetadataButton")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-									type: "button",
-									className: `mc-count mc-count--${skill.class}`,
-									disabled: busy || skill.mandatory,
-									title: skill.classLabel,
-									onClick: (e) => {
-										e.stopPropagation();
-										onCycle([skill.id], "skill");
-									},
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: `mc-dot mc-dot--${skill.class}`,
-										"aria-hidden": "true"
-									}), t(CLASS_SHORT_KEYS[skill.class])]
-								}),
-								!editableSkills.has(skill.id) && (skill.preset !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "mc-source",
-									title: t("skillFromPresetHint"),
-									children: t("skillFromPreset", { preset: skill.preset })
-								}) : ADOPTABLE_SKILL_SOURCES.has(skill.source ?? "") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "mc-count mc-count--action",
-									disabled: busy,
-									title: t("adoptSkillHint"),
-									onClick: (e) => {
-										e.stopPropagation();
-										setConfirmAdopt(skill.id);
-									},
-									children: t("adoptSkill")
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "mc-source",
-									title: t("skillSourceHint"),
-									children: t("skillSource", { source: sourceLabel(skill.source, t) })
-								})),
-								editableSkills.has(skill.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "mc-count mc-count--action",
-									disabled: busy,
-									onClick: (e) => {
-										e.stopPropagation();
-										onEditSkill(skill.id, skill.source);
-									},
-									children: t("edit")
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+								className: "v3-chev",
+								viewBox: "0 0 12 12",
+								fill: "none",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+									d: "M4.5 2.5 8 6l-3.5 3.5",
+									stroke: "currentColor",
+									strokeWidth: 1.4,
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
 								})
-							]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "v3-gnm",
+								children: skill.name
+							}),
+							PROJECT_SKILL_SOURCES.has(skill.source ?? "") && skill.path !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "v3-cnt",
+								title: skill.path,
+								children: t("projectRootLabel", { path: projectRootForSkill(skill.path) })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "v3-right",
+								children: [
+									skill.mandatory && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "v3-tag",
+										children: t("mandatory")
+									}),
+									skill.class === "on-demand" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "v3-tag v3-tag--act",
+										title: t("editSearchMetadata"),
+										onClick: (e) => {
+											e.stopPropagation();
+											onEditSearch(skill.id);
+										},
+										children: t("searchMetadataButton")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "v3-tag",
+										"data-tone": CLASS_TONE[skill.class],
+										disabled: busy || skill.mandatory,
+										title: skill.classLabel,
+										onClick: (e) => {
+											e.stopPropagation();
+											onCycle([skill.id], "skill");
+										},
+										children: t(CLASS_SHORT_KEYS[skill.class])
+									}),
+									!editableSkills.has(skill.id) && (skill.preset !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "v3-tag",
+										title: t("skillFromPresetHint"),
+										children: t("skillFromPreset", { preset: skill.preset })
+									}) : ADOPTABLE_SKILL_SOURCES.has(skill.source ?? "") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "v3-tag v3-tag--act",
+										disabled: busy,
+										title: t("adoptSkillHint"),
+										onClick: (e) => {
+											e.stopPropagation();
+											setConfirmAdopt(skill.id);
+										},
+										children: t("adoptSkill")
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "v3-tag",
+										title: t("skillSourceHint"),
+										children: t("skillSource", { source: sourceLabel(skill.source, t) })
+									})),
+									editableSkills.has(skill.id) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "v3-tag v3-tag--act",
+										disabled: busy,
+										onClick: (e) => {
+											e.stopPropagation();
+											onEditSkill(skill.id, skill.source);
+										},
+										children: t("edit")
+									})
+								]
+							})
+						]
+					}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "mc-skill-body",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mc-tree",
+							children: [browseErrors[`${skill.id}:`] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "mc-preview-hint",
+								children: browseErrors[`${skill.id}:`]
+							}), renderEntries(tree.dirs[`${skill.id}:`], skill.id, "") ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "mc-tree-row",
+								children: "…"
+							})]
 						})
-					]
-				}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "mc-skill-body",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "mc-tree",
-						children: [browseErrors[`${skill.id}:`] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mc-preview-hint",
-							children: browseErrors[`${skill.id}:`]
-						}), renderEntries(tree.dirs[`${skill.id}:`], skill.id, "") ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "mc-tree-row",
-							children: "…"
-						})]
-					})
-				})]
-			}, skill.id);
+					})]
+				}, skill.id);
+			})
 		}),
 		confirmAdopt !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
 			open: true,
@@ -6208,11 +6517,7 @@ const COVERAGE_LABELS = Object.freeze({
 	partial: "部分",
 	unknown: "未知"
 });
-/**
-* Zero-count placeholders. Required for `plugin-tool` / `skill`; the other
-* kinds get a neutral line so no zero is ever presented as "未使用".
-*/
-const CALL_INDEX_ZERO_SOURCE_NOTES = Object.freeze({
+Object.freeze({
 	mcp: "本次索引未解析到 MCP 来源的调用；覆盖不完整时不能据此判定未使用。",
 	native: "本次索引未解析到原生工具调用；覆盖不完整时不能据此判定未使用。",
 	"plugin-tool": "本次索引未解析出插件工具归属（插件 owner 不可证明），0 在这里不等于未使用。",
@@ -6251,10 +6556,6 @@ function formatCallIndexCount(value, totalExact) {
 	const text = Math.trunc(value).toLocaleString("en-US");
 	return totalExact === true ? text : `≥${text}`;
 }
-/** Human label for the time filter. */
-function callIndexRangeLabel(range) {
-	return range === "all" ? "全部" : `${range} 天`;
-}
 /**
 * Local-day window for `range`, expressed as the wire's half-open
 * `[fromMs, toMs)`. `'all'` carries no lower bound.
@@ -6499,24 +6800,6 @@ function callIndexOutcomeMix(summary) {
 		total: summary.total
 	};
 }
-/**
-* `bySource` for display. Always returns all five kinds in a fixed order, so
-* the distribution never reshuffles between reads; a zero carries its
-* placeholder instead of disappearing.
-*/
-function callIndexSourceData(bySource) {
-	const total = bySource === void 0 ? 0 : SOURCE_DISPLAY_ORDER.reduce((sum, kind) => sum + bySource[kind], 0);
-	return SOURCE_DISPLAY_ORDER.map((kind) => {
-		const count = bySource?.[kind] ?? 0;
-		return {
-			kind,
-			label: CALL_INDEX_SOURCE_LABELS[kind],
-			count,
-			share: total > 0 ? count / total : 0,
-			...count === 0 ? { zeroNote: CALL_INDEX_ZERO_SOURCE_NOTES[kind] } : {}
-		};
-	});
-}
 /** Fixed chart box; the SVG scales with CSS but the geometry is deterministic. */
 const CALL_INDEX_TREND_GEOMETRY = Object.freeze({
 	width: 640,
@@ -6697,25 +6980,293 @@ function callIndexOverviewMetrics(overview, status) {
 		...status?.task === void 0 ? {} : { tasks: status.task }
 	};
 }
-/** True when `plugin-tool` and `skill` both resolved to zero. */
-function callIndexHasUnexplainedSources(aggregates) {
-	if (aggregates === void 0) return false;
-	return aggregates.bySource["plugin-tool"] === 0 && aggregates.bySource.skill === 0;
-}
 /** Short Session id for a dense table cell; the full id stays in `title`. */
 function shortCallIndexSessionId(sessionId) {
 	return sessionId.length <= 12 ? sessionId : sessionId.slice(0, 12);
 }
 /** Inline stylesheet; a `<style>` element keeps this file dependency-free. */
 function CallIndexStyles() {
-	return (0, react.createElement)("style", { "data-call-index-style": "true" }, ".mc-ci-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.mc-ci-filter label{display:flex;gap:4px;align-items:center;font-size:12px}.mc-ci-table-scroll{width:100%;overflow:auto;max-height:min(60vh,560px);overscroll-behavior:contain}.mc-ci-table{width:100%;border-collapse:collapse;font-size:12px}.mc-ci-table thead th{position:sticky;top:0;z-index:1;background:var(--mc-surface,Canvas);box-shadow:inset 0 -1px 0 color-mix(in srgb,currentColor 12%,transparent)}.mc-ci-progress{display:flex;flex-direction:column;gap:4px;margin:8px 0}.mc-ci-progress-track{height:6px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,currentColor 12%,transparent)}.mc-ci-progress-fill{height:100%;border-radius:999px;background:color-mix(in srgb,currentColor 55%,transparent);transition:width .3s ease}.mc-ci-progress-fill.is-indeterminate{animation:mc-ci-indeterminate 1.1s ease-in-out infinite}@keyframes mc-ci-indeterminate{0%{transform:translateX(-60%)}100%{transform:translateX(340%)}}@media (prefers-reduced-motion:reduce){.mc-ci-progress-fill{transition:none}.mc-ci-progress-fill.is-indeterminate{animation:none;width:100%!important;opacity:.4}}.mc-ci-session-picker{display:inline-flex;align-items:center;gap:6px;font-size:12px}.mc-ci-session-picker-label{opacity:.7}.mc-ci-session-select{max-width:280px;padding:3px 6px;border-radius:6px;font-size:12px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:transparent;color:inherit}.mc-ci-session-select:disabled{opacity:.5}.mc-ci-progress-meta{display:flex;gap:8px;align-items:baseline;font-size:12px}.mc-ci-progress-value{font-variant-numeric:tabular-nums;font-weight:600}.mc-ci-progress-detail{opacity:.72}.mc-ci-table th,.mc-ci-table td{padding:4px 6px;text-align:left;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent);white-space:nowrap}.mc-ci-table tbody tr{cursor:pointer}.mc-ci-table tbody tr[aria-selected=\"true\"]{background:color-mix(in srgb,currentColor 8%,transparent)}.mc-ci-table td:nth-child(2),.mc-ci-table td:nth-child(4){max-width:220px;overflow:hidden;text-overflow:ellipsis}.mc-ci-table th:nth-child(2),.mc-ci-table th:nth-child(4){max-width:220px}.mc-ci-num{font-variant-numeric:tabular-nums}.mc-ci-bar{display:flex;height:8px;gap:1px;margin:4px 0}.mc-ci-bar > span{display:block;height:100%;min-width:2px}.mc-ci-aside{border-left:1px solid color-mix(in srgb,currentColor 15%,transparent);padding-left:12px;min-width:240px;font-size:12px}.mc-ci-metric{display:inline-flex;flex-direction:column;margin-right:18px;min-width:110px;vertical-align:top}.mc-ci-metric-label{font-size:11px;opacity:.7}.mc-ci-metric-value{font-size:18px;font-variant-numeric:tabular-nums}.mc-ci-metric-hint{font-size:11px;opacity:.75}.mc-ci-trend svg{width:100%;max-width:640px;height:auto}");
+	return (0, react.createElement)("style", { "data-call-index-style": "true" }, ".mc-ci-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.mc-ci-filter label{display:flex;gap:4px;align-items:center;font-size:12px}.mc-ci-table-scroll{width:100%;overflow:auto;max-height:min(60vh,560px);overscroll-behavior:contain}.mc-ci-table{width:100%;border-collapse:collapse;font-size:12px}.mc-ci-table thead th{position:sticky;top:0;z-index:1;background:var(--mc-surface,Canvas);box-shadow:inset 0 -1px 0 color-mix(in srgb,currentColor 12%,transparent)}.mc-ci-progress{display:flex;flex-direction:column;gap:4px;margin:8px 0}.mc-ci-progress-track{height:6px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,currentColor 12%,transparent)}.mc-ci-progress-fill{height:100%;border-radius:999px;background:color-mix(in srgb,currentColor 55%,transparent);transition:width .3s ease}.mc-ci-progress-fill.is-indeterminate{animation:mc-ci-indeterminate 1.1s ease-in-out infinite}@keyframes mc-ci-indeterminate{0%{transform:translateX(-60%)}100%{transform:translateX(340%)}}@media (prefers-reduced-motion:reduce){.mc-ci-progress-fill{transition:none}.mc-ci-progress-fill.is-indeterminate{animation:none;width:100%!important;opacity:.4}}.mc-ci-session-picker{display:inline-flex;align-items:center;gap:6px;font-size:12px}.mc-ci-session-picker-label{opacity:.7}.mc-ci-session-select{max-width:280px;padding:3px 6px;border-radius:6px;font-size:12px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:transparent;color:inherit}.mc-ci-session-select:disabled{opacity:.5}.mc-ci-progress-meta{display:flex;gap:8px;align-items:baseline;font-size:12px}.mc-ci-progress-value{font-variant-numeric:tabular-nums;font-weight:600}.mc-ci-progress-detail{opacity:.72}.mc-ci-table th,.mc-ci-table td{padding:4px 6px;text-align:left;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent);white-space:nowrap}.mc-ci-table tbody tr{cursor:pointer}.mc-ci-table tbody tr[aria-selected=\"true\"]{background:color-mix(in srgb,currentColor 8%,transparent)}.mc-ci-table td:nth-child(2),.mc-ci-table td:nth-child(4){max-width:220px;overflow:hidden;text-overflow:ellipsis}.mc-ci-table th:nth-child(2),.mc-ci-table th:nth-child(4){max-width:220px}.mc-ci-num{font-variant-numeric:tabular-nums}.mc-ci-bar{display:flex;height:8px;gap:1px;margin:4px 0}.mc-ci-bar > span{display:block;height:100%;min-width:2px}.mc-ci-aside{border-left:1px solid color-mix(in srgb,currentColor 15%,transparent);padding-left:12px;min-width:240px;font-size:12px}.mc-ci-metric{display:inline-flex;flex-direction:column;margin-right:18px;min-width:110px;vertical-align:top}.mc-ci-metric-label{font-size:11px;opacity:.7}.mc-ci-metric-value{font-size:18px;font-variant-numeric:tabular-nums}.mc-ci-metric-hint{font-size:11px;opacity:.75}.mc-ci-trend svg{width:100%;max-width:640px;height:auto}.v3-status-pills{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}.v3-statusline.v3-status-dash{border-style:dashed;color:var(--v3-t4)}.v3-filtercard{padding:11px 14px 13px}.v3-filter-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}.v3-search{display:flex;align-items:center;gap:6px;height:26px;padding:0 8px;border:1px solid var(--v3-line);border-radius:var(--v3-r-sm);background:var(--v3-panel-2);min-width:150px;flex:1 1 150px}.v3-search input{border:0;background:transparent;color:var(--v3-t1);font:inherit;font-size:12px;width:100%;outline:0;min-width:0}.v3-search input::placeholder{color:var(--v3-t4)}.v3-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.v3-kv-l{font-size:11px;color:var(--v3-t4)}.v3-kv-v{font-size:12px;color:var(--v3-t2);margin-top:2px;overflow-wrap:anywhere}.v3-ts.v3-ts--h330{max-height:330px}.v3-chartview{overflow-x:auto;cursor:grab;overscroll-behavior-x:contain;scrollbar-width:thin;user-select:none;-webkit-user-select:none}.v3-chartview:active{cursor:grabbing}.v3-chartview svg{display:block}.v3-src i[data-zero=\"true\"]{background:var(--v3-panel-2)}");
+}
+/** One v3 `.v3-stat` cell: label, big value, optional hint line, optional sparkline. */
+function V3Stat(props) {
+	return (0, react.createElement)("div", {
+		className: "v3-stat",
+		"data-call-index-metric": props.label
+	}, (0, react.createElement)("div", { className: "v3-stat-l" }, props.label), (0, react.createElement)("div", { className: "v3-stat-v v3-num" }, props.value), props.hint === void 0 ? null : (0, react.createElement)("div", { className: "v3-stat-d" }, props.hint), props.spark ?? null);
+}
+/** Values → `x,y` points inside a 100×22 viewBox, baselined at 0. */
+function sparkPoints(values) {
+	const W = 100, H = 22;
+	const max = values.reduce((m, v) => Math.max(m, v), 0);
+	const scale = max > 0 ? max : 1;
+	const xAt = (i) => values.length <= 1 ? W / 2 : i * W / (values.length - 1);
+	const yAt = (v) => 20 - v / scale * 18;
+	const pts = values.map((v, i) => `${xAt(i).toFixed(1)},${yAt(v).toFixed(1)}`);
+	return {
+		line: pts.join(" "),
+		area: `0,${H} ${pts.join(" ")} ${W},${H}`
+	};
+}
+/** 22px trend sparkline: a line plus a translucent area fill, coloured by tone. */
+function Sparkline(props) {
+	if (props.values.length < 2) return null;
+	const points = sparkPoints(props.values);
+	const colour = props.tone === "ok" ? "var(--v3-ok)" : props.tone === "bad" ? "var(--v3-bad)" : "var(--v3-info)";
+	return (0, react.createElement)("svg", {
+		className: "v3-spark",
+		viewBox: "0 0 100 22",
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		"data-call-index-spark": props.tone
+	}, (0, react.createElement)("polygon", {
+		className: "v3-spark-fl",
+		points: points.area,
+		fill: colour
+	}), (0, react.createElement)("polyline", {
+		className: "v3-spark-ln",
+		points: points.line,
+		stroke: colour
+	}));
+}
+/** `server · tool` for an `mcp__` name, otherwise the bare tool name. */
+function toolDisplayLabel(toolName) {
+	if (toolName.startsWith("mcp__")) {
+		const parts = toolName.split("__");
+		return parts.length >= 3 ? `${parts[1]} · ${parts.slice(2).join("__")}` : toolName;
+	}
+	return toolName;
+}
+/** Pixel width of the trend for `days` buckets: days x min column, floored. */
+function callIndexTrendWidth(days) {
+	return Math.max(320, (Number.isFinite(days) && days > 0 ? Math.floor(days) : 1) * 34);
 }
-/** Small label + value cell used by both pages. */
-function Metric(label, value, hint) {
+/**
+* The v3 overview trend: a line + area (calls), failure底柱 (error), a dashed
+* "recent week" band and a peak label, drawn inside a horizontally scrollable
+* strip so a long series can be panned instead of squeezed.
+*
+* Geometry comes from `callIndexTrend`'s bars (one data path). The SVG is
+* days x min-column wide (never narrower than the card), so day labels stay
+* legible; the wrapper scrolls and supports pointer drag-to-pan. The last day
+* label is right-anchored at the padding edge so it cannot overlap the one
+* before it.
+*/
+function OverviewTrendSvg(props) {
+	const { chart } = props;
+	const bars = chart.bars;
+	const n = bars.length;
+	const W = callIndexTrendWidth(n), H = 212, padL = 34, padR = 22, padT = 12;
+	const plotW = W - padL - padR;
+	const plotH = 174;
+	const maxV = chart.maxCalls > 0 ? Math.ceil(chart.maxCalls / 10) * 10 : 1;
+	const xAt = (i) => padL + (n <= 1 ? plotW / 2 : i * plotW / (n - 1));
+	const yAt = (v) => 186 - v / maxV * plotH;
+	const points = bars.map((bar, i) => xAt(i).toFixed(1) + "," + yAt(bar.calls).toFixed(1));
+	let peak = 0;
+	for (let i = 1; i < n; i++) if (bars[i].calls > bars[peak].calls) peak = i;
+	const children = [];
+	if (n > 0) {
+		const start = Math.max(0, n - 7);
+		const slot = n > 1 ? plotW / (n - 1) : plotW;
+		const left = Math.max(padL, xAt(start) - slot / 2);
+		const right = Math.min(W - padR, xAt(n - 1) + slot / 2);
+		children.push((0, react.createElement)("rect", {
+			key: "hl",
+			className: "v3-hlbox",
+			x: left.toFixed(1),
+			y: padT,
+			width: Math.max(0, right - left).toFixed(1),
+			height: plotH.toFixed(1),
+			rx: 4
+		}));
+	}
+	for (let g = 0; g <= 4; g++) {
+		const value = maxV * g / 4;
+		const y = yAt(value);
+		children.push((0, react.createElement)("line", {
+			key: "grid-" + g,
+			className: "v3-grid",
+			x1: padL,
+			y1: y.toFixed(1),
+			x2: W - padR,
+			y2: y.toFixed(1)
+		}));
+		children.push((0, react.createElement)("text", {
+			key: "tick-" + g,
+			className: "v3-axis",
+			x: 27,
+			y: (y + 3.5).toFixed(1),
+			"text-anchor": "end"
+		}, String(Math.round(value))));
+	}
+	const barWidth = Math.max(4, plotW / Math.max(1, n) - 8);
+	bars.forEach((bar, i) => {
+		if (bar.error <= 0) return;
+		const errH = Math.max(2.5, bar.error / maxV * plotH);
+		children.push((0, react.createElement)("rect", {
+			key: "err-" + bar.day,
+			className: "v3-bar-er",
+			x: (xAt(i) - barWidth / 2).toFixed(1),
+			y: (186 - errH).toFixed(1),
+			width: barWidth.toFixed(1),
+			height: errH.toFixed(1),
+			rx: 1.5
+		}, (0, react.createElement)("title", null, bar.day + "：失败 " + bar.error + " 次")));
+	});
+	children.push((0, react.createElement)("polygon", {
+		key: "area",
+		className: "v3-area",
+		points: "34,186 " + points.join(" ") + " " + (W - padR) + ",186"
+	}));
+	children.push((0, react.createElement)("polyline", {
+		key: "line",
+		className: "v3-line",
+		points: points.join(" ")
+	}));
+	bars.forEach((bar, i) => {
+		if (i % 4 !== 0 && i !== n - 1 && i !== peak) return;
+		children.push((0, react.createElement)("circle", {
+			key: "pt-" + bar.day,
+			className: "v3-pt",
+			cx: xAt(i).toFixed(1),
+			cy: yAt(bar.calls).toFixed(1),
+			r: 2.6
+		}, (0, react.createElement)("title", null, bar.day + "：" + bar.calls + " 次调用，失败 " + bar.error + " 次")));
+	});
+	if (n > 0) {
+		children.push((0, react.createElement)("text", {
+			key: "peak",
+			className: "v3-lbl-b",
+			x: (xAt(peak) - 8).toFixed(1),
+			y: (yAt(bars[peak].calls) - 9).toFixed(1),
+			"text-anchor": "end"
+		}, "峰值 " + bars[peak].calls));
+		const step = Math.max(1, Math.ceil(n / 6));
+		for (let m = 0; m < n - 1; m += step) children.push((0, react.createElement)("text", {
+			key: "xl-" + m,
+			className: "v3-axis",
+			x: xAt(m).toFixed(1),
+			y: 204,
+			"text-anchor": "middle"
+		}, bars[m].day.slice(5)));
+		children.push((0, react.createElement)("text", {
+			key: "xl-last",
+			className: "v3-axis",
+			x: (W - padR).toFixed(1),
+			y: 204,
+			"text-anchor": "end",
+			"data-call-index-lasttick": "true"
+		}, bars[n - 1].day.slice(5)));
+	}
+	const svg = (0, react.createElement)("svg", {
+		className: "v3-chart",
+		viewBox: "0 0 " + W + " 212",
+		preserveAspectRatio: "none",
+		role: "img",
+		width: W,
+		height: H,
+		style: {
+			width: W + "px",
+			minWidth: "100%",
+			height: "212px"
+		},
+		"aria-label": "每日调用与失败数：" + n + " 天，峰值 " + chart.maxCalls + " 次",
+		"data-call-index-svg": "trend",
+		"data-call-index-width": String(W)
+	}, ...children);
+	let dragging = false;
+	let startX = 0;
+	let startScroll = 0;
 	return (0, react.createElement)("div", {
-		className: "mc-ci-metric",
-		"data-call-index-metric": label
-	}, (0, react.createElement)("div", { className: "mc-ci-metric-label" }, label), (0, react.createElement)("div", { className: "mc-ci-metric-value mc-ci-num" }, value), hint === void 0 ? null : (0, react.createElement)("div", { className: "mc-ci-metric-hint" }, hint));
+		className: "v3-chartview",
+		"data-call-index-chartview": "true",
+		onPointerDown: (event) => {
+			dragging = true;
+			startX = event.clientX;
+			startScroll = event.currentTarget.scrollLeft;
+			event.currentTarget.style.cursor = "grabbing";
+			if (event.pointerId !== void 0 && typeof event.currentTarget.setPointerCapture === "function") try {
+				event.currentTarget.setPointerCapture(event.pointerId);
+			} catch {}
+		},
+		onPointerMove: (event) => {
+			if (!dragging) return;
+			event.currentTarget.scrollLeft = startScroll - (event.clientX - startX);
+		},
+		onPointerUp: (event) => {
+			dragging = false;
+			event.currentTarget.style.cursor = "grab";
+		},
+		onPointerLeave: (event) => {
+			if (!dragging) return;
+			dragging = false;
+			event.currentTarget.style.cursor = "grab";
+		}
+	}, svg);
+}
+/**
+* 来源构成，按工具名前缀启发式分类。
+*
+* NOT Host attribution: the Host cannot prove a plugin owner, so this card does
+* not pretend to. It splits the already-read per-tool rows by a plain rule —
+* a `mcp__` prefix is MCP, everything else is native — and says so at the foot.
+* When the per-tool read has not happened there is nothing to classify, so the
+* card shows 「来源未解析」 and explains that this is not a zero count.
+*/
+function OverviewSourcePanel(props) {
+	const note = (0, react.createElement)("p", { className: "v3-src-note" }, (0, react.createElement)("span", null, "按工具名前缀推断，不是 Host 归属。"), (0, react.createElement)("b", { style: { color: "var(--v3-t3)" } }, " 0 在这里不等于未使用"));
+	if (props.tools === void 0) return (0, react.createElement)("div", { className: "v3-panel" }, (0, react.createElement)("div", { className: "v3-ph" }, (0, react.createElement)("span", { className: "v3-pt" }, "来源构成")), (0, react.createElement)("p", {
+		className: "v3-hint",
+		"data-call-index-missing": "by-source"
+	}, "尚未读取逐工具明细，来源未解析；这不是「全部为 0」。"), note);
+	const mcpCalls = props.tools.filter((row) => row.toolName.startsWith("mcp__")).reduce((sum, row) => sum + row.calls, 0);
+	const nativeCalls = props.tools.reduce((sum, row) => sum + row.calls, 0) - mcpCalls;
+	const total = mcpCalls + nativeCalls;
+	const data = [{
+		kind: "mcp",
+		label: CALL_INDEX_SOURCE_LABELS.mcp,
+		count: mcpCalls,
+		color: "var(--v3-info)"
+	}, {
+		kind: "native",
+		label: CALL_INDEX_SOURCE_LABELS.native,
+		count: nativeCalls,
+		color: "var(--v3-ok)"
+	}];
+	const radius = 43;
+	const circumference = 2 * Math.PI * radius;
+	let offset = 0;
+	const segments = data.filter((item) => item.count > 0).map((item) => {
+		const length = total > 0 ? item.count / total * circumference : 0;
+		const circle = (0, react.createElement)("circle", {
+			key: item.kind,
+			className: "v3-seg",
+			cx: 52,
+			cy: 52,
+			r: radius,
+			"data-seg": item.kind,
+			strokeDasharray: `${length.toFixed(1)} ${(circumference - length).toFixed(1)}`,
+			strokeDashoffset: (-offset).toFixed(1),
+			style: { stroke: item.color }
+		});
+		offset += length;
+		return circle;
+	});
+	return (0, react.createElement)("div", { className: "v3-panel" }, (0, react.createElement)("div", { className: "v3-ph" }, (0, react.createElement)("span", { className: "v3-pt" }, "来源构成"), (0, react.createElement)("span", { className: "v3-pn" }, `${formatCallIndexCount(total, props.totalExact)} 次`)), (0, react.createElement)("div", { className: "v3-donut-wrap" }, (0, react.createElement)("div", { className: "v3-donut" }, (0, react.createElement)("svg", {
+		viewBox: "0 0 104 104",
+		"aria-hidden": "true"
+	}, (0, react.createElement)("circle", {
+		className: "v3-trk",
+		cx: 52,
+		cy: 52,
+		r: radius
+	}), ...segments), (0, react.createElement)("div", { className: "v3-mid" }, (0, react.createElement)("b", { className: "v3-num" }, formatCallIndexCount(total, props.totalExact)), (0, react.createElement)("span", null, "次调用"))), (0, react.createElement)("div", { className: "v3-src-list" }, ...data.map((item) => (0, react.createElement)("div", {
+		key: item.kind,
+		className: "v3-src",
+		"data-source-row": item.kind,
+		"data-source-count": String(item.count)
+	}, (0, react.createElement)("i", item.count === 0 ? { "data-zero": "true" } : {}), (0, react.createElement)("span", { className: "v3-nm" }, item.label), (0, react.createElement)("b", null, formatCallIndexCount(item.count, props.totalExact)), (0, react.createElement)("em", null, total > 0 ? `${Math.round(item.count / total * 100)}%` : "0%"))))), note);
 }
 function callIndexDiagnostics(input) {
 	const items = [];
@@ -6775,96 +7326,6 @@ function StateNotice({ state, failure }) {
 		"data-call-index-state": state.kind
 	}, (0, react.createElement)("strong", null, state.title), state.detail === "" ? null : (0, react.createElement)("p", { className: "mc-desc" }, state.detail), failure?.retryable === true && state.canRetry ? (0, react.createElement)("p", { className: "mc-desc" }, "这是一个可重试的错误；重试会重新读取，不会重放旧游标。") : null);
 }
-/** Source distribution bars (bySource). */
-function CallIndexSourceBars(props) {
-	const data = callIndexSourceData(props.bySource);
-	const present = data.filter((item) => item.count > 0);
-	return (0, react.createElement)("div", {
-		className: "mc-ci-sources",
-		"data-call-index-block": "by-source"
-	}, (0, react.createElement)("h4", {
-		className: "mc-heading",
-		style: { fontSize: 13 }
-	}, "来源分布"), props.bySource === void 0 ? (0, react.createElement)("p", {
-		className: "mc-empty",
-		"data-call-index-missing": "by-source"
-	}, "Host 未返回来源分布（bySource）；这不是「全部为 0」。") : (0, react.createElement)("div", {
-		className: "mc-ci-bar",
-		role: "img",
-		"aria-label": "来源分布条"
-	}, ...present.map((item) => (0, react.createElement)("span", {
-		key: item.kind,
-		"data-source-kind": item.kind,
-		title: `${item.label}：${formatCallIndexCount(item.count, props.totalExact)}`,
-		style: {
-			flexGrow: item.count,
-			background: `var(--mc-source-${item.kind}, currentColor)`,
-			opacity: .65
-		}
-	}))), ...data.map((item) => (0, react.createElement)("div", {
-		className: "mc-ci-source-row",
-		key: item.kind,
-		"data-source-row": item.kind
-	}, (0, react.createElement)("span", { className: "mc-source" }, item.label), (0, react.createElement)("span", { className: "mc-ci-num" }, formatCallIndexCount(item.count, props.totalExact)), item.zeroNote === void 0 ? null : (0, react.createElement)("span", {
-		className: "mc-desc",
-		"data-call-index-zero": item.kind
-	}, item.zeroNote))));
-}
-/** Self-drawn SVG trend: no chart library, deterministic geometry. */
-function CallIndexTrendChart(props) {
-	const chart = callIndexTrend(props.aggregates?.byDay);
-	const geometry = CALL_INDEX_TREND_GEOMETRY;
-	if (props.aggregates === void 0) return (0, react.createElement)("div", {
-		className: "mc-ci-trend",
-		"data-call-index-block": "trend"
-	}, (0, react.createElement)("h4", {
-		className: "mc-heading",
-		style: { fontSize: 13 }
-	}, "按日趋势"), (0, react.createElement)("p", {
-		className: "mc-empty",
-		"data-call-index-missing": "aggregates"
-	}, "Host 未返回按日聚合（aggregates）；这不是「没有调用」，趋势不可用。"));
-	if (!chart.available) return (0, react.createElement)("div", {
-		className: "mc-ci-trend",
-		"data-call-index-block": "trend"
-	}, (0, react.createElement)("h4", {
-		className: "mc-heading",
-		style: { fontSize: 13 }
-	}, "按日趋势"), (0, react.createElement)("p", {
-		className: "mc-empty",
-		"data-call-index-missing": "by-day"
-	}, "该筛选在所选范围内没有任何按日桶，趋势为空；单个日粒度为 0 不参与绘制。"));
-	return (0, react.createElement)("div", {
-		className: "mc-ci-trend",
-		"data-call-index-block": "trend"
-	}, (0, react.createElement)("h4", {
-		className: "mc-heading",
-		style: { fontSize: 13 }
-	}, "按日趋势"), (0, react.createElement)("svg", {
-		viewBox: `0 0 ${geometry.width} ${geometry.height}`,
-		role: "img",
-		"aria-label": `按日调用趋势（已索引部分）：${chart.bars.length} 天，峰值 ${chart.maxCalls} 次`,
-		"data-call-index-svg": "trend"
-	}, ...chart.bars.map((bar) => (0, react.createElement)("rect", {
-		key: bar.day,
-		x: bar.x,
-		y: bar.y,
-		width: bar.width,
-		height: bar.height,
-		"data-day": bar.day,
-		"data-calls": bar.calls,
-		fill: bar.error > 0 ? "var(--mc-trend-error, currentColor)" : "currentColor",
-		opacity: bar.error > 0 ? .85 : .55
-	})), ...chart.bars.map((bar) => (0, react.createElement)("text", {
-		key: `label-${bar.day}`,
-		x: bar.x + bar.width / 2,
-		y: geometry.height - 6,
-		"font-size": 9,
-		"text-anchor": "middle",
-		fill: "currentColor",
-		opacity: .7
-	}, bar.day.slice(5)))), (0, react.createElement)("p", { className: "mc-desc" }, `图上 ${chart.bars.length} 天、${chart.totalCalls} 次调用；峰值 ${chart.maxCalls} 次/天。柱高按峰值归一。趋势只统计已索引部分，覆盖不完整时右侧天数与总数都可能偏少。`));
-}
 /**
 * Turn the index census into a progress percentage.
 *
@@ -7033,26 +7494,73 @@ function callIndexToolRows(page) {
 		...entry.durationCount === 0 ? {} : { averageDurationMs: entry.durationSum / entry.durationCount }
 	})).sort((a, b) => b.calls - a.calls || a.toolName.localeCompare(b.toolName));
 }
-function CallIndexCallTable(props) {
-	const { page } = props;
-	const rows = callIndexToolRows(page);
-	return (0, react.createElement)("div", { className: "mc-ci-table-scroll" }, (0, react.createElement)("table", {
-		className: "mc-ci-table",
+/** Short source marker for the tool cell: MCP / 技能 / 插件 / 来源未解析. */
+function sourceNoteForKind(kind) {
+	switch (kind) {
+		case "mcp": return "MCP";
+		case "skill": return "技能";
+		case "plugin-tool": return "插件";
+		case "unknown": return "来源未解析";
+		default: return;
+	}
+}
+/**
+* The v3 "完整工具表": one sticky-header row per TOOL, inside a bounded
+* `.v3-ts` scroller (330px here — the two charts above it already tell the big
+* picture). Takes pre-computed rows so the same filtered set feeds the charts.
+*/
+function CallIndexToolTable(props) {
+	return (0, react.createElement)("div", { className: "v3-ts v3-ts--h330" }, (0, react.createElement)("table", {
+		className: "v3-table",
 		"data-call-index-table": "tools"
 	}, (0, react.createElement)("thead", null, (0, react.createElement)("tr", null, ...[
-		"时间",
-		"工具",
-		"来源",
-		"成功",
-		"失败",
-		"平均耗时"
-	].map((title) => (0, react.createElement)("th", {
-		key: title,
-		scope: "col"
-	}, title)))), (0, react.createElement)("tbody", null, ...rows.map((row) => (0, react.createElement)("tr", {
-		key: row.toolName + "::" + row.sourceKind,
-		"data-call-index-tool": row.toolName
-	}, (0, react.createElement)("td", { className: "mc-ci-num" }, formatCallIndexTime(row.lastAt)), (0, react.createElement)("td", { title: row.toolName }, row.toolName), (0, react.createElement)("td", null, CALL_INDEX_SOURCE_LABELS[row.sourceKind]), (0, react.createElement)("td", { className: "mc-ci-num" }, String(row.success)), (0, react.createElement)("td", { className: "mc-ci-num" }, String(row.error)), (0, react.createElement)("td", { className: "mc-ci-num" }, formatCallIndexDuration(row.averageDurationMs)))))));
+		{
+			label: "工具",
+			right: false
+		},
+		{
+			label: "调用",
+			right: true
+		},
+		{
+			label: "失败",
+			right: true
+		},
+		{
+			label: "成功率",
+			right: true
+		},
+		{
+			label: "平均耗时",
+			right: true
+		},
+		{
+			label: "最近调用",
+			right: true
+		}
+	].map((col) => (0, react.createElement)("th", {
+		key: col.label,
+		scope: "col",
+		...col.right ? { className: "v3-r" } : {}
+	}, col.label)))), (0, react.createElement)("tbody", null, ...props.rows.map((row) => {
+		const known = row.success + row.error;
+		const rate = known > 0 ? row.success / known : void 0;
+		const bad = row.error > 0 && row.error / row.calls >= .2;
+		const note = sourceNoteForKind(row.sourceKind);
+		const server = row.toolName.startsWith("mcp__") ? row.toolName.split("__")[1] : void 0;
+		const shortName = row.sourceKind === "mcp" && row.toolName.startsWith("mcp__") ? row.toolName.split("__").slice(2).join("__") : row.toolName;
+		return (0, react.createElement)("tr", {
+			key: row.toolName + "::" + row.sourceKind,
+			"data-call-index-tool": row.toolName
+		}, (0, react.createElement)("td", null, (0, react.createElement)("div", { className: "v3-c-tool" }, note === void 0 ? null : (0, react.createElement)("span", { className: "v3-srcnote" }, note), (0, react.createElement)("span", {
+			className: "v3-nm",
+			title: row.toolName
+		}, shortName), server === void 0 ? null : (0, react.createElement)("span", { className: "v3-srv" }, server))), (0, react.createElement)("td", { className: "v3-r" }, String(row.calls)), (0, react.createElement)("td", { className: "v3-r" }, String(row.error)), (0, react.createElement)("td", { className: "v3-r" }, (0, react.createElement)("span", { className: "v3-rt" }, (0, react.createElement)("span", { className: "v3-tk" }, (0, react.createElement)("span", {
+			className: "v3-fl",
+			...bad ? { "data-bad": "true" } : {},
+			style: { width: `${Math.round((rate ?? 0) * 100)}%` }
+		})), (0, react.createElement)("b", null, formatCallIndexRate(rate)))), (0, react.createElement)("td", { className: "v3-r" }, formatCallIndexDuration(row.averageDurationMs)), (0, react.createElement)("td", { className: "v3-r" }, formatCallIndexTime(row.lastAt)));
+	}))));
 }
 function callIndexRates(summary) {
 	if (summary === void 0) return {};
@@ -7084,7 +7592,7 @@ function formatCallIndexRate(value) {
 * Modal; the container decides it from a media query, so this stays pure.
 */
 function CallIndexDetailPanelView(props) {
-	const { query, status, page, loading, loadingMore, failure, onQueryChange, onResolveScope, catalog, moreFailure, startFailure, startTask } = props;
+	const { query, status, page, loading, loadingMore, failure, onQueryChange, onResolveScope, catalog, moreFailure, startFailure, startTask, search, onSearchChange } = props;
 	const state = callIndexDetailState({
 		status,
 		page,
@@ -7093,95 +7601,362 @@ function CallIndexDetailPanelView(props) {
 		...failure === void 0 ? {} : { failure }
 	});
 	const totalText = page === void 0 ? void 0 : formatCallIndexCount(page.total ?? page.summary.total, page.totalExact);
-	const activity = loading === true ? page === void 0 ? "正在读取…" : "正在刷新…" : page === void 0 ? "尚未读取" : `快照代 ${page.generation}`;
+	const scanning = status !== void 0 && (status.phase === "running" || (status.sessions?.pending ?? 0) > 0 || (status.sessions?.pendingLive ?? 0) > 0);
+	const statusText = page === void 0 ? loading === true ? "正在读取调用明细…" : "尚未读取调用明细" : scanning ? "索引仍在扫描，数字会继续增加" : "索引已完成";
 	const rates = callIndexRates(page?.summary);
 	const successStats = rates.success;
 	const failureStats = rates.failure;
 	const rateText = (value) => formatCallIndexRate(value);
 	const rateHint = (stats) => stats === void 0 ? "没有已知结果的调用，无法计算比例" : `${stats.numerator} / ${stats.denominator} 次已知结果`;
 	const suggestionCount = page === void 0 ? void 0 : (page.summary.unresolved ?? 0) + page.summary.error;
-	const suggestionText = () => suggestionCount === void 0 ? "—" : String(suggestionCount);
 	const suggestionHint = () => page === void 0 ? "尚未读取" : `失败 ${page.summary.error} + 未配对 ${page.summary.unresolved ?? 0}；未配对表示没有捕获到结果，不等于失败`;
+	const allRows = page === void 0 ? [] : callIndexToolRows(page);
+	const term = (search ?? "").trim().toLowerCase();
+	const rows = term === "" ? allRows : allRows.filter((row) => row.toolName.toLowerCase().includes(term));
+	const durations = page === void 0 ? [] : page.items.map((item) => item.durationMs).filter((ms) => ms !== void 0 && Number.isFinite(ms));
+	const averageDuration = durations.length > 0 ? durations.reduce((sum, ms) => sum + ms, 0) / durations.length : void 0;
+	const readCalls = rows.reduce((sum, row) => sum + row.calls, 0);
+	const totalCalls = page === void 0 ? void 0 : page.total ?? page.summary.total;
+	const readIsPartial = totalCalls !== void 0 && readCalls < totalCalls;
+	const rankRows = rows.slice(0, 12);
+	const rankMax = rankRows.length > 0 ? rankRows[0].calls : 1;
+	const failingRows = rows.filter((row) => row.error > 0).slice().sort((a, b) => b.error - a.error);
+	const failMax = failingRows.length > 0 ? failingRows[0].error : 1;
+	const searchInput = (0, react.createElement)("label", { className: "v3-search" }, (0, react.createElement)("svg", {
+		width: 12,
+		height: 12,
+		viewBox: "0 0 14 14",
+		fill: "none",
+		"aria-hidden": "true",
+		style: {
+			color: "var(--v3-t4)",
+			flex: "none"
+		}
+	}, (0, react.createElement)("circle", {
+		cx: 6.2,
+		cy: 6.2,
+		r: 4.4,
+		stroke: "currentColor",
+		"stroke-width": 1.3
+	}), (0, react.createElement)("path", {
+		d: "m9.6 9.6 3 3",
+		stroke: "currentColor",
+		"stroke-width": 1.3,
+		"stroke-linecap": "round"
+	})), (0, react.createElement)("input", onSearchChange === void 0 ? {
+		type: "search",
+		placeholder: "筛选工具名…",
+		"aria-label": "筛选工具名",
+		defaultValue: search ?? "",
+		"data-call-index-search": "true"
+	} : {
+		type: "search",
+		placeholder: "筛选工具名…",
+		"aria-label": "筛选工具名",
+		value: search ?? "",
+		"data-call-index-search": "true",
+		onChange: (event) => onSearchChange(event.target.value)
+	}));
 	const indexBlockedReason = status === void 0 ? "尚未收到索引状态，无法判断索引进度（Host 未应答或回复被拒绝）" : status.scope.status !== "ready" ? "索引范围未启用，插件不会自动索引历史会话" : void 0;
 	return (0, react.createElement)("section", {
-		className: "mc-section",
+		className: "v3-root mc-section",
 		"aria-label": "调用明细",
 		"aria-busy": loading === true
-	}, CallIndexStyles(), (0, react.createElement)("header", { className: "mc-heading-row" }, (0, react.createElement)("div", { className: "mc-heading-meta" }, (0, react.createElement)("h2", { className: "mc-heading" }, "调用明细"), (0, react.createElement)("span", { className: "mc-version" }, activity)), null), (0, react.createElement)("p", { className: "mc-desc" }, "按工具调用记录会话内的每一次调用；只统计调用次数与元数据，不代表 Token 数，也不包含参数与返回值。"), indexBlockedReason === void 0 ? null : (0, react.createElement)("p", {
-		className: "mc-desc",
-		"data-call-index-note": "index-blocked",
-		role: "status"
-	}, `自动索引不可用：${indexBlockedReason}`), CallIndexFilters({
+	}, CallIndexStyles(), V3Styles(), (0, react.createElement)("div", { className: "v3-status-pills" }, (0, react.createElement)("span", {
+		className: "v3-statusline",
+		...state.kind === "failure" || state.kind === "disconnected" ? { "data-tone": "bad" } : {}
+	}, (0, react.createElement)("span", {
+		className: "v3-dot",
+		"data-tone": state.kind === "failure" || state.kind === "disconnected" ? "bad" : scanning ? "run" : "ok",
+		"aria-hidden": "true"
+	}), (0, react.createElement)("span", null, statusText))), (0, react.createElement)("div", { className: "v3-panel v3-filtercard" }, (0, react.createElement)("div", { className: "v3-filter-row" }, CallIndexFilters({
 		query,
 		...onQueryChange === void 0 ? {} : { onChange: onQueryChange },
 		...onResolveScope === void 0 ? {} : { onResolveScope },
 		...catalog === void 0 ? {} : { catalog }
-	}), CallIndexScanBar({ ...status === void 0 ? {} : { status } }), (0, react.createElement)(StateNotice, {
+	}), searchInput), CallIndexScanBar({ ...status === void 0 ? {} : { status } })), (0, react.createElement)(StateNotice, {
 		state,
 		...failure === void 0 ? {} : { failure }
 	}), startFailure === void 0 ? null : (0, react.createElement)("p", {
-		className: "mc-desc",
+		className: "v3-hint",
 		"data-call-index-note": "start-failure",
 		role: "status"
 	}, `自动索引失败：${callIndexFailureText(startFailure)}`), startTask === void 0 ? null : (0, react.createElement)("p", {
-		className: "mc-desc",
+		className: "v3-hint",
 		"data-call-index-note": "start-task"
-	}, `自动索引：${startTask.phase}${startTask.mode === "full" ? "（全量）" : "（增量）"} · 任务 ${startTask.taskId.slice(0, 8)}`), CallIndexDiagnostics({
+	}, `自动索引：${startTask.phase}${startTask.mode === "full" ? "（全量）" : "（增量）"} · 任务 ${startTask.taskId.slice(0, 8)}`), indexBlockedReason === void 0 ? null : (0, react.createElement)("p", {
+		className: "v3-hint",
+		"data-call-index-note": "index-blocked",
+		role: "status"
+	}, `自动索引不可用：${indexBlockedReason}`), CallIndexDiagnostics({
 		...status === void 0 ? {} : { status },
 		...page === void 0 ? {} : { page },
 		...failure === void 0 ? {} : { failure },
 		...startFailure === void 0 ? {} : { startFailure },
 		...moreFailure === void 0 ? {} : { moreFailure }
 	}), (0, react.createElement)("div", {
-		className: "mc-ci-summary",
+		className: "v3-stats",
 		"data-call-index-summary": "rates"
-	}, Metric("成功率", rateText(successStats?.rate), `${rateHint(successStats)}${totalText === void 0 ? "" : ` · 本页合计 ${totalText}`}`), Metric("失败率", rateText(failureStats?.rate), rateHint(failureStats)), Metric("建议", suggestionText(), suggestionHint())), page !== void 0 && page.droppedItems > 0 ? (0, react.createElement)("p", {
-		className: "mc-desc",
-		"data-call-index-note": "dropped"
-	}, `本页有 ${page.droppedItems} 行未通过白名单投影（字段不合法），已丢弃，未计入合计。`) : null, (0, react.createElement)("div", null, (0, react.createElement)("div", { style: { minWidth: 0 } }, page !== void 0 && page.items.length > 0 ? (0, react.createElement)(CallIndexCallTable, { page }) : null, page?.nextCursor !== void 0 && loadingMore === true ? (0, react.createElement)("p", {
-		className: "mc-desc",
-		"data-call-index-note": "loading-more"
+	}, V3Stat({
+		label: "成功率",
+		value: rateText(successStats?.rate),
+		hint: totalText === void 0 ? rateHint(successStats) : `${rateHint(successStats)} · 本页合计 ${totalText}`
+	}), V3Stat({
+		label: "失败率",
+		value: rateText(failureStats?.rate),
+		hint: rateHint(failureStats)
+	}), V3Stat({
+		label: "需要关注",
+		value: suggestionCount === void 0 ? "—" : String(suggestionCount),
+		hint: suggestionHint()
+	}), V3Stat({
+		label: "平均耗时",
+		value: formatCallIndexDuration(averageDuration),
+		hint: "按有耗时的调用平均"
+	})), page !== void 0 && page.droppedItems > 0 ? (0, react.createElement)("p", {
+		className: "v3-hint",
+		"data-call-index-note": "dropped",
+		style: { marginTop: 8 }
+	}, `本页有 ${page.droppedItems} 行未通过白名单投影（字段不合法），已丢弃，未计入合计。`) : null, (0, react.createElement)("div", {
+		className: "v3-board",
+		style: { marginTop: 12 }
+	}, (0, react.createElement)("div", { className: "v3-panel" }, (0, react.createElement)("div", { className: "v3-ph" }, (0, react.createElement)("span", { className: "v3-pt" }, "调用量分布（本范围工具）"), (0, react.createElement)("span", { className: "v3-pn" }, term === "" ? "前 12 名" : "筛选结果")), rankRows.length === 0 ? (0, react.createElement)("p", { className: "v3-hint" }, term === "" ? "当前范围没有工具调用。" : "没有匹配的工具。") : (0, react.createElement)("div", { className: "v3-rank" }, ...rankRows.map((row) => {
+		const bad = row.error > 0 && row.error / row.calls >= .2;
+		return (0, react.createElement)("div", {
+			key: row.toolName + "::" + row.sourceKind,
+			className: "v3-rank-row",
+			title: row.toolName
+		}, (0, react.createElement)("span", { className: "v3-nm" }, toolDisplayLabel(row.toolName)), (0, react.createElement)("span", { className: "v3-bar" }, (0, react.createElement)("span", {
+			...bad ? { "data-bad": "true" } : {},
+			style: { width: `${Math.max(3, Math.round(row.calls / rankMax * 100))}%` }
+		})), (0, react.createElement)("span", { className: "v3-n" }, String(row.calls)));
+	})), (0, react.createElement)("p", {
+		className: "v3-hint",
+		style: { marginTop: 9 }
+	}, `条长 = 调用量，按最大值归一；失败率 ≥ 20% 的条变红。${readIsPartial ? `本页已读取 ${formatCallIndexCount(readCalls, page?.totalExact)} 次调用，全部共 ${formatCallIndexCount(totalCalls, page?.totalExact)} 次，未读取部分不参与排行。` : ""}`)), (0, react.createElement)("div", { className: "v3-panel" }, (0, react.createElement)("div", { className: "v3-ph" }, (0, react.createElement)("span", { className: "v3-pt" }, "失败与耗时"), (0, react.createElement)("span", { className: "v3-pn" }, "按失败数排序")), failingRows.length === 0 ? (0, react.createElement)("p", { className: "v3-hint" }, "当前范围没有失败调用。") : (0, react.createElement)("div", { className: "v3-rank" }, ...failingRows.slice(0, 8).map((row) => {
+		const perTool = Math.round(row.error / row.calls * 100);
+		return (0, react.createElement)("div", {
+			key: "fail-" + row.toolName + "::" + row.sourceKind,
+			className: "v3-rank-row",
+			title: row.toolName
+		}, (0, react.createElement)("span", { className: "v3-nm" }, toolDisplayLabel(row.toolName)), (0, react.createElement)("span", { className: "v3-bar" }, (0, react.createElement)("span", {
+			"data-bad": "true",
+			style: { width: `${Math.max(4, Math.round(row.error / failMax * 100))}%` }
+		})), (0, react.createElement)("span", {
+			className: "v3-n",
+			style: {
+				color: "var(--v3-bad)",
+				fontWeight: 600
+			}
+		}, `${row.error} 次`), (0, react.createElement)("span", {
+			className: "v3-e",
+			"data-bad": "true"
+		}, `占该工具 ${perTool}%`));
+	})), (0, react.createElement)("p", {
+		className: "v3-hint",
+		style: { marginTop: 9 }
+	}, `条长 = 失败次数（不是失败率）。共 ${failingRows.length} 个工具出现过失败。`))), (0, react.createElement)("div", {
+		className: "v3-panel",
+		style: { marginTop: 12 }
+	}, (0, react.createElement)("div", { className: "v3-ph" }, (0, react.createElement)("span", { className: "v3-pt" }, "完整工具表"), (0, react.createElement)("span", { className: "v3-pn" }, `${rows.length} 行 · 表内滚动`)), (0, react.createElement)(CallIndexToolTable, { rows }), (0, react.createElement)("div", { className: "v3-tfoot" }, (0, react.createElement)("span", null, `${rows.length} 个工具 · 表内滚动`))), page?.nextCursor !== void 0 && loadingMore === true ? (0, react.createElement)("p", {
+		className: "v3-hint",
+		"data-call-index-note": "loading-more",
+		style: { marginTop: 8 }
 	}, "正在加载其余工具…") : null, moreFailure === void 0 ? null : (0, react.createElement)("p", {
-		className: "mc-desc",
+		className: "v3-hint",
 		"data-call-index-note": "more-failure",
-		role: "status"
-	}, `加载失败：${callIndexFailureText(moreFailure)}`))));
+		role: "status",
+		style: { marginTop: 8 }
+	}, `加载失败：${callIndexFailureText(moreFailure)}`));
 }
-/** Pure view for 总览. */
+/** Pure view for 总览 (v3 看板). */
 function CallIndexOverviewPanelView(props) {
-	const { status, overview, loading, failure, onRefresh } = props;
+	const { status, overview, loading, failure, onRefresh, tools, toolsLoading, toolsFailure } = props;
 	const metrics = callIndexOverviewMetrics(overview, status);
-	const rangeLabel = callIndexRangeLabel("all");
 	const exact = metrics.callsTotalExact;
 	const mix = callIndexOutcomeMix(overview?.summary);
 	const aggregates = metrics.aggregates;
 	const notice = failure === void 0 ? void 0 : failure.disconnected ? `与 Host 断连：${callIndexFailureText(failure)}${failure.hostCode === void 0 ? "" : `（${failure.hostCode}）`}` : callIndexFailureText(failure);
+	const coverageLabel = status === void 0 ? "未知" : COVERAGE_LABELS[status.coverage];
+	const scanning = status !== void 0 && (status.phase === "running" || (status.sessions?.pending ?? 0) > 0 || (status.sessions?.pendingLive ?? 0) > 0);
+	const pendingSessions = status?.sessions?.pending ?? 0;
+	const scanPhrase = status !== void 0 && status.phase === "running" ? "仍在扫描" : pendingSessions > 0 ? `还有 ${pendingSessions} 个会话待补扫` : "扫描已完成";
+	const statusSentence = `已索引 ${metrics.sessionsListed ?? "—"} 个会话 · 覆盖${coverageLabel} · ${scanPhrase}`;
+	const coverageHint = exact === true ? (0, react.createElement)("span", { style: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 5
+	} }, (0, react.createElement)("span", {
+		className: "v3-dot",
+		"data-tone": "ok",
+		"aria-hidden": "true"
+	}), "覆盖完整，计数精确") : (0, react.createElement)("span", { style: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 5
+	} }, (0, react.createElement)("span", {
+		className: "v3-dot",
+		"data-tone": "warn",
+		"aria-hidden": "true"
+	}), "覆盖部分，实际更多");
+	const failHint = (0, react.createElement)("span", { style: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 5
+	} }, (0, react.createElement)("span", {
+		className: "v3-dot",
+		"data-tone": "bad",
+		"aria-hidden": "true"
+	}), `另有 ${formatCallIndexCount(mix?.unresolved, exact)} 次未配对`);
+	const rates = callIndexRates(overview?.summary);
+	const rateHint = (stats) => stats === void 0 ? "没有已知结果的调用" : `${stats.numerator} / ${stats.denominator} 次已知结果`;
+	const trend = callIndexTrend(aggregates?.byDay);
+	const callSpark = aggregates?.byDay === void 0 ? void 0 : aggregates.byDay.map((bucket) => bucket.calls);
+	const successSpark = aggregates?.byDay === void 0 ? void 0 : aggregates.byDay.map((bucket) => bucket.calls > 0 ? bucket.success / bucket.calls : 0);
+	const errorSpark = aggregates?.byDay === void 0 ? void 0 : aggregates.byDay.map((bucket) => bucket.error);
+	const totalToolCalls = tools === void 0 ? 0 : tools.reduce((sum, row) => sum + row.calls, 0);
+	const topRows = tools === void 0 ? void 0 : tools.slice(0, 12);
+	const rankMax = topRows !== void 0 && topRows.length > 0 ? topRows[0].calls : 1;
+	const topCoverage = topRows === void 0 || totalToolCalls === 0 ? void 0 : Math.round(topRows.reduce((sum, row) => sum + row.calls, 0) / totalToolCalls * 100);
+	const failingRows = tools === void 0 ? void 0 : tools.filter((row) => row.error > 0).slice().sort((a, b) => b.error - a.error);
+	const failingTop = failingRows === void 0 ? [] : failingRows.slice(0, 3);
+	const failingRest = failingRows === void 0 ? [] : failingRows.slice(3);
+	const failingRestErrors = failingRest.reduce((sum, row) => sum + row.error, 0);
+	const toolsNotice = tools === void 0 ? (0, react.createElement)("p", {
+		className: "v3-hint",
+		"data-call-index-note": "tools"
+	}, toolsFailure !== void 0 ? `逐工具明细读取失败：${callIndexFailureText(toolsFailure)}` : toolsLoading === true ? "正在读取逐工具明细…" : "尚未读取逐工具明细；上方调用总量与趋势来自总览快照，排行需要逐工具数据。") : tools.length === 0 ? (0, react.createElement)("p", {
+		className: "v3-hint",
+		"data-call-index-note": "tools"
+	}, "该范围没有逐工具调用记录。") : null;
+	const sessionInfo = status?.sessions;
+	const taskNote = metrics.tasks === void 0 ? null : (0, react.createElement)("p", {
+		className: "v3-hint",
+		"data-call-index-note": "task",
+		style: { marginTop: 9 }
+	}, `最近一次扫描：${metrics.tasks.mode} / ${metrics.tasks.phase}（开始 ${formatCallIndexTime(metrics.tasks.startedAt)}）`);
 	return (0, react.createElement)("section", {
-		className: "mc-section",
+		className: "v3-root mc-section",
 		"aria-label": "调用统计总览",
 		"aria-busy": loading === true
-	}, CallIndexStyles(), (0, react.createElement)("header", { className: "mc-heading-row" }, (0, react.createElement)("div", { className: "mc-heading-meta" }, (0, react.createElement)("h2", { className: "mc-heading" }, "总览"), (0, react.createElement)("span", { className: "mc-version" }, loading === true ? "正在读取…" : rangeLabel === "全部" ? "范围：全部已索引会话" : `范围：最近 ${rangeLabel}`)), (0, react.createElement)("div", { className: "mc-heading-actions" }, (0, react.createElement)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+	}, CallIndexStyles(), V3Styles(), (0, react.createElement)("div", { style: {
+		display: "flex",
+		justifyContent: "flex-end"
+	} }, (0, react.createElement)(_deepseek_ai_dsh_client_ui_primitives.Button, {
 		size: "sm",
 		variant: "outline",
 		disabled: loading === true || onRefresh === void 0,
 		onClick: () => onRefresh?.()
-	}, "刷新"))), (0, react.createElement)("p", { className: "mc-desc" }, "调用索引的总览：调用次数、Session 覆盖、来源构成与按日趋势。所有统计口径以覆盖状态为准，未知一律如实标注。"), notice === void 0 ? null : (0, react.createElement)("div", {
+	}, "刷新")), notice === void 0 ? null : (0, react.createElement)("div", {
 		className: "mc-notice",
 		role: failure?.disconnected === true ? "alert" : "status",
 		"data-call-index-state": failure?.disconnected === true ? "disconnected" : "failure"
-	}, notice), (0, react.createElement)("div", {
-		className: "mc-ci-metrics",
+	}, notice), (0, react.createElement)("div", { className: "v3-status-pills" }, (0, react.createElement)("span", { className: "v3-statusline" }, (0, react.createElement)("span", {
+		className: "v3-dot",
+		"data-tone": scanning ? "run" : "ok",
+		"aria-hidden": "true"
+	}), (0, react.createElement)("span", null, statusSentence))), (0, react.createElement)("div", {
+		className: "v3-stats",
 		"data-call-index-metrics": "overview"
-	}, Metric("总调用", formatCallIndexCount(metrics.calls, exact), mix === void 0 ? void 0 : `成功 ${formatCallIndexCount(mix.succeeded, exact)}`), Metric("失败 / 未完成", metrics.failed === void 0 ? "—" : `${formatCallIndexCount(metrics.failed, exact)} / ${formatCallIndexCount(metrics.unfinished, exact)}`, "未完成 = 未配对结果 + 进行中"), Metric("已索引 / 可见 Session", metrics.sessionsListed === void 0 ? "—" : `${formatCallIndexCount(metrics.sessionsVisible)} / ${formatCallIndexCount(metrics.sessionsListed)}`, "可见 = 当前 Scope 仍可读，已索引 = 扫描覆盖到的"), Metric("不同工具数", formatCallIndexCount(metrics.distinctTools, exact), aggregates === void 0 ? "Host 未返回聚合" : "按 toolName 去重")), callIndexHasUnexplainedSources(aggregates) ? (0, react.createElement)("p", {
-		className: "mc-desc",
-		"data-call-index-note": "unexplained-sources"
-	}, "插件工具与技能执行入口的归属目前都解析为 0：Host 无法证明插件 owner，技能执行归属也未验证，所以这两个 0 表示「未解析出」，不表示「未使用」。") : null, (0, react.createElement)(CallIndexTrendChart, { aggregates }), (0, react.createElement)(CallIndexSourceBars, {
-		bySource: aggregates?.bySource,
+	}, V3Stat({
+		label: "调用次数",
+		value: formatCallIndexCount(metrics.calls, exact),
+		hint: coverageHint,
+		...callSpark === void 0 ? {} : { spark: Sparkline({
+			values: callSpark,
+			tone: "info"
+		}) }
+	}), V3Stat({
+		label: "成功率",
+		value: formatCallIndexRate(rates.success?.rate),
+		hint: rateHint(rates.success),
+		...successSpark === void 0 ? {} : { spark: Sparkline({
+			values: successSpark,
+			tone: "ok"
+		}) }
+	}), V3Stat({
+		label: "失败",
+		value: formatCallIndexCount(metrics.failed, exact),
+		hint: failHint,
+		...errorSpark === void 0 ? {} : { spark: Sparkline({
+			values: errorSpark,
+			tone: "bad"
+		}) }
+	}), V3Stat({
+		label: "不同工具",
+		value: formatCallIndexCount(metrics.distinctTools, exact),
+		hint: "按 toolName 去重"
+	})), (0, react.createElement)("div", {
+		className: "v3-board",
+		style: { marginTop: 12 }
+	}, (0, react.createElement)("div", { className: "v3-panel" }, (0, react.createElement)("div", { className: "v3-ph" }, (0, react.createElement)("span", { className: "v3-pt" }, "按日调用趋势"), (0, react.createElement)("span", { className: "v3-pn" }, aggregates === void 0 ? "趋势不可用" : `合计 ${trend.totalCalls} 次 · 峰值 ${trend.maxCalls} 次`)), aggregates === void 0 ? (0, react.createElement)("p", {
+		className: "v3-hint",
+		"data-call-index-missing": "aggregates"
+	}, "Host 未返回按日聚合（aggregates）；这不是「没有调用」，趋势不可用。") : !trend.available ? (0, react.createElement)("p", {
+		className: "v3-hint",
+		"data-call-index-missing": "by-day"
+	}, "该筛选在所选范围内没有任何按日桶，趋势为空；单个日粒度为 0 不参与绘制。") : (0, react.createElement)(OverviewTrendSvg, { chart: trend }), aggregates === void 0 || !trend.available ? null : (0, react.createElement)("div", { className: "v3-legend" }, (0, react.createElement)("span", null, (0, react.createElement)("i", { style: { background: "var(--v3-info)" } }), "每日调用量（折线 + 面积）"), (0, react.createElement)("span", null, (0, react.createElement)("i", {
+		"data-mark": "square",
+		style: { background: "var(--v3-bad)" }
+	}), "每日失败数（底柱）"), (0, react.createElement)("span", null, (0, react.createElement)("i", { style: {
+		background: "var(--v3-info)",
+		opacity: .3,
+		height: 8,
+		borderRadius: 2
+	} }), "最近一周"))), OverviewSourcePanel({
+		...tools === void 0 ? {} : { tools },
 		...exact === void 0 ? {} : { totalExact: exact }
-	}), metrics.tasks === void 0 ? null : (0, react.createElement)("p", {
-		className: "mc-desc",
-		"data-call-index-note": "task"
-	}, `最近一次扫描：${metrics.tasks.mode} / ${metrics.tasks.phase}（开始 ${formatCallIndexTime(metrics.tasks.startedAt)}）`));
+	})), (0, react.createElement)("div", {
+		className: "v3-board",
+		style: { marginTop: 12 }
+	}, (0, react.createElement)("div", { className: "v3-panel" }, (0, react.createElement)("div", { className: "v3-ph" }, (0, react.createElement)("span", { className: "v3-pt" }, "工具调用排行"), (0, react.createElement)("span", { className: "v3-pn" }, topRows === void 0 ? "前 12 名" : `前 12 名${topCoverage === void 0 ? "" : ` · 占已读取调用的 ${topCoverage}%`}` + (metrics.calls !== void 0 && totalToolCalls < metrics.calls ? ` · 已读取 ${formatCallIndexCount(totalToolCalls, exact)} / 共 ${formatCallIndexCount(metrics.calls, exact)} 次` : ""))), toolsNotice !== null ? toolsNotice : (0, react.createElement)("div", { className: "v3-rank" }, ...topRows.map((row) => {
+		const bad = row.error > 0 && row.error / row.calls >= .2;
+		return (0, react.createElement)("div", {
+			key: "rank-" + row.toolName + "::" + row.sourceKind,
+			className: "v3-rank-row",
+			title: row.toolName
+		}, (0, react.createElement)("span", { className: "v3-nm" }, toolDisplayLabel(row.toolName)), (0, react.createElement)("span", { className: "v3-bar" }, (0, react.createElement)("span", {
+			...bad ? { "data-bad": "true" } : {},
+			style: { width: `${Math.max(3, Math.round(row.calls / rankMax * 100))}%` }
+		})), (0, react.createElement)("span", { className: "v3-n" }, String(row.calls)), (0, react.createElement)("span", {
+			className: "v3-e",
+			...bad ? { "data-bad": "true" } : {},
+			...row.error === 0 ? { "data-zero": "true" } : {}
+		}, `失败 ${row.error}`));
+	}))), (0, react.createElement)("div", { className: "v3-panel" }, (0, react.createElement)("div", { className: "v3-ph" }, (0, react.createElement)("span", { className: "v3-pt" }, "工具调用失败"), (0, react.createElement)("span", { className: "v3-pn" }, tools === void 0 ? "按失败数排序" : `${formatCallIndexCount(metrics.failed, exact)} 次失败`)), toolsNotice !== null ? toolsNotice : failingRows === void 0 || failingRows.length === 0 ? (0, react.createElement)("p", { className: "v3-hint" }, "当前范围没有失败调用。") : (0, react.createElement)("div", {
+		className: "v3-rank",
+		"data-call-index-failures": "true"
+	}, ...failingTop.map((row) => (0, react.createElement)("div", {
+		key: "fc-" + row.toolName + "::" + row.sourceKind,
+		className: "v3-rank-row"
+	}, (0, react.createElement)("span", {
+		className: "v3-nm",
+		style: {
+			width: "auto",
+			flex: "1 1 auto"
+		}
+	}, toolDisplayLabel(row.toolName)), (0, react.createElement)("span", {
+		className: "v3-n",
+		style: {
+			color: "var(--v3-bad)",
+			fontWeight: 600
+		}
+	}, `${row.error} 次`))), ...failingRest.length === 0 ? [] : [(0, react.createElement)("div", {
+		key: "fc-rest",
+		className: "v3-rank-row"
+	}, (0, react.createElement)("span", {
+		className: "v3-nm",
+		style: {
+			width: "auto",
+			flex: "1 1 auto"
+		}
+	}, `其余 ${failingRest.length} 个工具合计`), (0, react.createElement)("span", {
+		className: "v3-n",
+		style: { color: "var(--v3-t2)" }
+	}, `${failingRestErrors} 次`))]))), (0, react.createElement)("div", {
+		className: "v3-panel",
+		style: { marginTop: 12 }
+	}, (0, react.createElement)("div", { className: "v3-ph" }, (0, react.createElement)("span", { className: "v3-pt" }, "索引状态"), (0, react.createElement)("span", { className: "v3-pn" }, metrics.tasks === void 0 ? "最近扫描未记录" : `最近扫描 ${metrics.tasks.mode} · ${metrics.tasks.phase}`)), (0, react.createElement)("div", { className: "v3-kv" }, (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "v3-kv-l" }, "数据范围"), (0, react.createElement)("div", { className: "v3-kv-v" }, overview?.corpus === "persisted-plus-observed-live" ? "已持久化 + 挂载后实时观测" : "Host 未声明")), (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "v3-kv-l" }, "Session 列出 / 可见"), (0, react.createElement)("div", { className: "v3-kv-v v3-num" }, sessionInfo === void 0 ? "—" : `${sessionInfo.listed} / ${sessionInfo.visible}`)), (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "v3-kv-l" }, "待处理 / 失败"), (0, react.createElement)("div", { className: "v3-kv-v v3-num" }, sessionInfo === void 0 ? "—" : `${sessionInfo.pending} / ${sessionInfo.failed}`)), (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "v3-kv-l" }, "覆盖（事件 / 枚举 / 语义）"), (0, react.createElement)("div", { className: "v3-kv-v" }, status === void 0 ? "—" : `${COVERAGE_LABELS[status.eventCoverage]} / ${COVERAGE_LABELS[status.enumerationCoverage]} / ${COVERAGE_LABELS[status.coverage]}`))), taskNote));
 }
 function useNarrowViewport() {
 	const [narrow, setNarrow] = (0, react.useState)(false);
@@ -7239,6 +8014,14 @@ function detailAfterRefresh(previous, page) {
 		detailFailure: void 0
 	};
 }
+/** Pure policy decision, so the container's refresh strategy is testable. */
+function callIndexRefreshPolicy(status) {
+	const scanning = status !== void 0 && (status.phase === "running" || status.sessions.pending > 0 || status.sessions.pendingLive > 0);
+	return {
+		scanning,
+		mode: scanning ? "status-only" : "full"
+	};
+}
 /**
 * Container for 调用明细: owns the query, the paging cursor and the detail read.
 * Keeps the previous page visible while the next one loads, so a range click
@@ -7252,6 +8035,7 @@ function CallIndexDetailPanel({ api, initialQuery, resolveScopeTarget, resolveSe
 		loadingDetail: false
 	});
 	const [refreshToken, setRefreshToken] = (0, react.useState)(0);
+	const [search, setSearch] = (0, react.useState)("");
 	const generation = (0, react.useRef)(0);
 	const pageAnchor = (0, react.useRef)(void 0);
 	/** How many extra pages 加载更多 has appended; 0 means only the first page. */
@@ -7313,23 +8097,35 @@ function CallIndexDetailPanel({ api, initialQuery, resolveScopeTarget, resolveSe
 		refreshToken
 	]);
 	/**
-	* Re-read while a scan is running.
+	* Refresh status/progress while a scan is running — WITHOUT re-reading calls.
 	*
-	* The 刷新 button is gone (D-031): indexing starts by itself, so the page must
-	* also refresh by itself or it would freeze on the first, empty snapshot. This
-	* polls ONLY while the Host reports an unfinished scan, then stops — it is not
-	* a permanent timer, and it never triggers indexing, only reads.
+	* The old loop bumped `refreshToken`, which re-read status + calls + sessions
+	* every 2s and replaced the data page under the operator mid-scan. Now it polls
+	* `getStatus` only, keeps the current rows untouched, and triggers ONE full read
+	* when the scan finishes (or on the explicit 刷新 button).
 	*/
-	const scanningNow = state.status !== void 0 && (state.status.phase === "running" || state.status.sessions.pending > 0);
+	const scanningNow = callIndexRefreshPolicy(state.status).scanning;
 	(0, react.useEffect)(() => {
 		if (!scanningNow) return;
-		const timer = setTimeout(() => setRefreshToken((value) => value + 1), 2e3);
-		return () => clearTimeout(timer);
-	}, [
-		scanningNow,
-		refreshToken,
-		state.page?.generation
-	]);
+		let active = true;
+		const id = setInterval(() => {
+			(async () => {
+				const result = await api.getStatus();
+				if (!active || !result.ok) return;
+				const next = result.value;
+				const stillScanning = callIndexRefreshPolicy(next).scanning;
+				setState((previous) => ({
+					...previous,
+					status: next
+				}));
+				if (!stillScanning) setRefreshToken((value) => value + 1);
+			})();
+		}, 2e3);
+		return () => {
+			active = false;
+			clearInterval(id);
+		};
+	}, [scanningNow, api]);
 	/**
 	* Append the next page.
 	*
@@ -7488,6 +8284,8 @@ function CallIndexDetailPanel({ api, initialQuery, resolveScopeTarget, resolveSe
 		loadingMore: state.loadingMore,
 		loadingDetail: state.loadingDetail,
 		narrow,
+		search,
+		onSearchChange: setSearch,
 		onQueryChange: setQuery,
 		onRefresh: () => setRefreshToken((value) => value + 1),
 		onStartIndex: startIndex,
@@ -7498,8 +8296,12 @@ function CallIndexDetailPanel({ api, initialQuery, resolveScopeTarget, resolveSe
 	});
 }
 /**
-* Container for 总览. Reads the status once and one 30-day summary; the window
-* is stated in the header so no metric is silently scoped.
+* Container for 总览. Reads the status once, one all-time summary, AND one
+* `listCalls` snapshot — because the overview reply carries no per-tool counts,
+* and the v3 ranking / fault panels need them. The per-tool read fills up to
+* `MAX_AUTO_PAGES` pages (same bound the detail page uses) then aggregates with
+* the shared pure `callIndexToolRows`. Failing to read rows never blocks the
+* headline numbers; it only shows an honest empty state in the two panels.
 */
 function CallIndexOverviewPanel({ api }) {
 	const [state, setState] = (0, react.useState)({ loading: true });
@@ -7511,26 +8313,80 @@ function CallIndexOverviewPanel({ api }) {
 			loading: true
 		}));
 		const query = { range: "all" };
+		const anchor = Date.now();
 		(async () => {
-			const [statusResult, overviewResult] = await Promise.all([api.getStatus(), api.getOverview(query)]);
+			const [statusResult, overviewResult, callsResult] = await Promise.all([
+				api.getStatus(),
+				api.getOverview(query),
+				api.listCalls(query, void 0, anchor)
+			]);
 			if (!active) return;
 			const failure = overviewResult.ok ? statusResult.ok ? void 0 : statusResult : overviewResult;
+			let tools;
+			let toolsFailure;
+			if (callsResult.ok) {
+				const items = [...callsResult.value.items];
+				let cursor = callsResult.value.nextCursor;
+				let pages = 0;
+				while (cursor !== void 0 && pages < 20) {
+					const next = await api.listCalls(query, cursor, anchor);
+					if (!next.ok) {
+						toolsFailure = next;
+						break;
+					}
+					items.push(...next.value.items);
+					cursor = next.value.nextCursor;
+					pages += 1;
+				}
+				tools = callIndexToolRows({
+					...callsResult.value,
+					items
+				});
+			} else toolsFailure = callsResult;
+			if (!active) return;
 			setState({
 				loading: false,
 				...statusResult.ok ? { status: statusResult.value } : {},
 				...overviewResult.ok ? { overview: overviewResult.value } : {},
-				...failure === void 0 ? {} : { failure }
+				...failure === void 0 ? {} : { failure },
+				...tools === void 0 ? {} : { tools },
+				...toolsFailure === void 0 ? {} : { toolsFailure }
 			});
 		})();
 		return () => {
 			active = false;
 		};
 	}, [api, refreshToken]);
+	const scanning = callIndexRefreshPolicy(state.status).scanning;
+	(0, react.useEffect)(() => {
+		if (!scanning) return;
+		let active = true;
+		const id = setInterval(() => {
+			(async () => {
+				const result = await api.getStatus();
+				if (!active || !result.ok) return;
+				const next = result.value;
+				const stillScanning = callIndexRefreshPolicy(next).scanning;
+				setState((previous) => ({
+					...previous,
+					status: next
+				}));
+				if (!stillScanning) setRefreshToken((value) => value + 1);
+			})();
+		}, 2e3);
+		return () => {
+			active = false;
+			clearInterval(id);
+		};
+	}, [scanning, api]);
 	return (0, react.createElement)(CallIndexOverviewPanelView, {
 		...state.status === void 0 ? {} : { status: state.status },
 		...state.overview === void 0 ? {} : { overview: state.overview },
+		...state.tools === void 0 ? {} : { tools: state.tools },
+		...state.toolsFailure === void 0 ? {} : { toolsFailure: state.toolsFailure },
 		...state.failure === void 0 ? {} : { failure: state.failure },
 		loading: state.loading,
+		toolsLoading: state.loading,
 		onRefresh: () => setRefreshToken((value) => value + 1)
 	});
 }
@@ -7659,18 +8515,26 @@ function OverviewContainer(props) {
 //#endregion
 //#region src/client/GuardPanel.tsx
 /**
-* 思考限制 — the Guard configuration surface.
+* 思考限制 — the Guard configuration surface (v3 · 数据看板, D-044).
 *
-* Three sections, in the order the product specified: repeated identical calls,
-* alternating cycles, no-progress protection. Each carries a model-side
-* identifier (`duplicate_call` / `alternating_cycle` / `no_progress`) shown as
-* plain text, because the reminder text injected into the conversation is
-* English while the label a user reads here is Chinese. The identifier is what
-* ties the two together, so it is displayed rather than hidden.
+* Three sections, in product order: repeated identical calls, alternating
+* cycles, no-progress protection. Each carries a model-side identifier
+* ('duplicate_call' / 'alternating_cycle' / 'no_progress') shown as plain text,
+* because the reminder injected into the conversation is English while the label
+* a user reads here is Chinese. The identifier ties the two together.
 *
-* NO summary panel: the current effective state is not repeated here. The
-* 总览 page owns "what is on right now"; duplicating it produced two places to
-* read the same thing and a second place to keep in sync.
+* v3 SHAPE: a two-column grid of .v3-gitem cards (>900px two columns, auto single
+* column via the container query in v3-ui.ts). The Guard counters sit at the very
+* top as a four-cell .v3-stats strip, followed by one short boundary hint. No page
+* title, no "activity" sub-title, no "counting since" line — the tab already says
+* what this page is.
+*
+* DOM CONTRACT kept for the shared test suite: nine <li class="mc-guard-point">
+* whose text still comes from t(); the three data-guard-section values in order;
+* the threshold editor wrapped in data-guard-thresholds (now three number inputs,
+* values from the Host); the four data-guard-stat cells and data-guard-stats; and
+* three role="switch" buttons whose aria-checked follows the props. No Chinese
+* colon ('：') is introduced by this file — spacing does the separating instead.
 *
 * Kept hook-free and prop-driven so the settings test suite (no DOM harness) can
 * walk the returned tree.
@@ -7678,9 +8542,12 @@ function OverviewContainer(props) {
 /**
 * Section id → localized title plus the lines that explain what the switch does.
 *
-* The descriptions are part of the contract, not decoration: a bare switch does
+* the descriptions are part of the contract, not decoration: a bare switch does
 * not tell a reader whether turning it off stops reminders only or also stops
 * local denials. Each bullet states the real behaviour the detector implements.
+*
+* v3 keeps all three bullets (nine <li class="mc-guard-point"> in total, as the
+* shared suite asserts) but lays them out as one compact wrapped row per card.
 */
 const SECTIONS = [
 	{
@@ -7711,52 +8578,67 @@ const SECTIONS = [
 		]
 	}
 ];
-/** `—` for a counter the Host did not report; never a fabricated 0. */
+/**
+* Page-specific rules for the v3 Guard grid. Everything else comes from
+* v3-ui.ts; the only local vocabulary here is the compact bullet row, the
+* threshold editor chrome and the per-card "fired" foot. Colours are always v3
+* semantic variables — nothing is hard-coded, so light and dark themes both
+* track the host.
+*/
+const GUARD_CSS = [
+	".mc-section.v3-root{display:flex;flex-direction:column;gap:12px}",
+	".v3-gpoints{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px}",
+	".v3-gpoints>.mc-guard-point{font-size:11.5px;line-height:18px;color:var(--v3-t3)}",
+	".v3-gpoints>.mc-guard-point+.mc-guard-point::before{content:'·';margin-right:5px;color:var(--v3-t4)}",
+	".v3-gitem--info{background:var(--v3-panel-2)}",
+	".v3-gitem .v3-gh .v3-sw{margin-left:auto}",
+	".v3-gfoot-edit{margin-top:9px}",
+	".v3-guard-stats{margin:0}",
+	".v3-gfoot-note{color:var(--v3-t4)}",
+	".mc-guard-threshold-edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap}",
+	".mc-guard-threshold-edit-label{font-size:11.5px;color:var(--v3-t3)}",
+	".mc-guard-threshold-num{width:56px;padding:3px 6px;border-radius:var(--v3-r-sm);font-size:12px;text-align:center;font-family:var(--v3-font-code);color:var(--v3-t1);background:var(--v3-panel-2);border:1px solid var(--v3-line)}",
+	".mc-guard-threshold-num:focus-visible{outline:2px solid var(--v3-info);outline-offset:1px}",
+	".mc-guard-threshold-num:disabled{opacity:.6}",
+	".mc-guard-threshold-hint{margin:6px 0 0}"
+].join("");
+/** '—' for a counter the Host did not report; never a fabricated 0. */
 function statText(value) {
 	return value === void 0 || !Number.isFinite(value) ? "—" : String(value);
 }
 /**
-* The Guard's real activity board.
+* The Guard's real activity board, restyled as a v3 stat strip.
 *
 * Answers the two questions the page previously could not: 「它是否在工作」
-* (observations / since) and 「调用成功还是失败」 (outcome split). Every number
-* comes from the Host; a missing counter renders `—`, so an older Host reads as
-* "unknown" rather than "zero".
+* (observations) and 「调用成功还是失败」 (outcome split). Every number comes
+* from the Host; a missing counter renders '—', so an older Host reads as
+* "unknown" rather than "zero". The four data-guard-stat cells and the
+* data-guard-stats hook are the published contract. No sub-title and no
+* "counting since" line: the strip is the first thing on the page.
 */
 function GuardStatsBoard(props) {
 	const { t, stats } = props;
 	const outcomes = stats?.outcomes;
 	const reminders = stats?.reminders;
 	const cell = (label, value, hint) => (0, react.createElement)("div", {
-		className: "mc-guard-stat",
+		className: "v3-stat",
 		"data-guard-stat": label
-	}, (0, react.createElement)("div", { className: "mc-guard-stat-label" }, label), (0, react.createElement)("div", { className: "mc-guard-stat-value" }, value), hint === void 0 ? null : (0, react.createElement)("div", { className: "mc-guard-stat-hint" }, hint));
-	return (0, react.createElement)("div", {
-		className: "mc-guard-stats",
+	}, (0, react.createElement)("div", { className: "v3-stat-l" }, label), (0, react.createElement)("div", { className: "v3-stat-v" }, value), hint === void 0 ? null : (0, react.createElement)("div", { className: "v3-stat-d" }, hint));
+	return (0, react.createElement)("div", { className: "v3-guard-stats" }, (0, react.createElement)("div", {
+		className: "v3-stats",
 		"data-guard-stats": "true",
 		role: "group",
 		"aria-label": t("guardStatsTitle")
-	}, cell(t("guardStatObservations"), statText(stats?.observations), t("guardStatObservationsHint")), cell(t("guardStatOutcomes"), `${statText(outcomes?.success)} / ${statText(outcomes?.error)}`, t("guardStatOutcomesHint")), cell(t("guardStatReminders"), `${statText(reminders?.repeat)} / ${statText(reminders?.cycle)}`, t("guardStatRemindersHint")), cell(t("guardStatDenials"), statText(stats?.denials), t("guardStatDenialsHint")), stats?.since === void 0 ? null : (0, react.createElement)("p", {
-		className: "mc-guard-stats-since",
-		"data-guard-stats-since": "true"
-	}, `${t("guardStatsSince")} ${formatGuardTime(stats.since)}`));
-}
-/** `YYYY-MM-DD HH:mm` in the browser zone; `—` when unknown. */
-function formatGuardTime(time) {
-	if (time === void 0 || !Number.isFinite(time)) return "—";
-	const date = new Date(time);
-	if (Number.isNaN(date.getTime())) return "—";
-	const pad = (value) => String(value).padStart(2, "0");
-	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+	}, cell(t("guardStatObservations"), statText(stats?.observations), t("guardStatObservationsHint")), cell(t("guardStatOutcomes"), statText(outcomes?.success) + " / " + statText(outcomes?.error), t("guardStatOutcomesHint")), cell(t("guardStatReminders"), statText(reminders?.repeat) + " / " + statText(reminders?.cycle), t("guardStatRemindersHint")), cell(t("guardStatDenials"), statText(stats?.denials), t("guardStatDenialsHint"))));
 }
 /**
 * Editable reminder thresholds.
 *
-* The thresholds were a hard-coded 3/5/8 the operator could read but not change,
-* which made the section look decorative. They are now one comma-separated
-* field: the list is short, order matters, and a number-per-input row would be
-* more chrome than content. Invalid input is refused by the Host and reported
-* back, so this input never claims a value the detector rejected.
+* Three plain number inputs instead of one comma-separated text field: the
+* operator sees one box per firing point and never has to learn a syntax. Values
+* always come from the Host; a keystroke is assembled into a fresh array and
+* handed to onThresholdsChange, and an older Host that does not accept a write
+* gets disabled boxes. data-guard-thresholds marks the wrapper.
 */
 function GuardThresholdEditor(props) {
 	const { t, thresholds, onChange } = props;
@@ -7765,81 +8647,84 @@ function GuardThresholdEditor(props) {
 	return (0, react.createElement)("div", {
 		className: "mc-guard-threshold-edit",
 		"data-guard-thresholds": "true"
-	}, (0, react.createElement)("label", {
-		className: "mc-guard-threshold-edit-label",
-		htmlFor: "mc-guard-thresholds-input"
-	}, t("guardThresholds")), (0, react.createElement)("input", {
-		id: "mc-guard-thresholds-input",
-		className: "mc-guard-threshold-edit-input",
-		type: "text",
-		inputMode: "numeric",
-		value: thresholds.join(", "),
+	}, (0, react.createElement)("label", { className: "mc-guard-threshold-edit-label" }, t("guardThresholds")), ...thresholds.map((value, index) => (0, react.createElement)("input", {
+		key: index,
+		type: "number",
+		min: 2,
+		max: 50,
+		step: 1,
+		className: "mc-guard-threshold-num",
+		value: String(value),
 		readOnly: !editable,
 		disabled: !editable,
-		"aria-label": t("guardThresholds"),
+		"aria-label": t("guardThresholds") + " " + String(index + 1),
 		onChange: (event) => {
 			if (!editable) return;
-			const parsed = parseGuardThresholds(event.target.value);
-			if (parsed === void 0) return;
-			onChange(parsed);
+			const raw = Number(event.target.value);
+			if (!Number.isSafeInteger(raw) || raw < 2 || raw > 50) return;
+			const next = thresholds.slice();
+			next[index] = raw;
+			onChange(next);
 		}
-	}), (0, react.createElement)("span", { className: "mc-guard-threshold-edit-hint" }, editable ? t("guardThresholdsEditableHint") : t("guardThresholdsFixedHint")));
+	})));
 }
-/**
-* Parse `3, 5, 8` into a threshold list.
-*
-* Returns `undefined` for anything the Host would reject (empty, non-integer,
-* out of range, not strictly increasing). Parsing here as well as on the Host is
-* deliberate: it keeps an invalid keystroke from round-tripping through the
-* remote and flickering the field.
-*/
-function parseGuardThresholds(text) {
-	const parts = text.split(",").map((part) => part.trim()).filter((part) => part !== "");
-	if (parts.length === 0 || parts.length > 5) return void 0;
-	const parsed = [];
-	for (const part of parts) {
-		if (!/^\d+$/.test(part)) return void 0;
-		const value = Number(part);
-		if (!Number.isSafeInteger(value) || value < 2 || value > 50) return void 0;
-		if (parsed.length > 0 && value <= parsed[parsed.length - 1]) return void 0;
-		parsed.push(value);
-	}
-	return parsed;
+/** The counter a card reports as "fired", per the product mapping. */
+function firedValue(id, stats) {
+	if (id === "duplicate_call") return stats?.reminders?.repeat;
+	if (id === "alternating_cycle") return stats?.reminders?.cycle;
+	return stats?.denials;
 }
 function GuardPanel(props) {
 	const { t, enabled, duplicateThresholds, onToggle, onThresholdsChange, stats, onReset } = props;
 	const section = (entry) => {
 		const isOn = enabled?.[entry.id] ?? false;
 		const canToggle = onToggle !== void 0;
+		const dot = isOn ? (0, react.createElement)("span", {
+			className: "v3-dot",
+			"data-tone": "ok",
+			"aria-hidden": "true"
+		}) : (0, react.createElement)("span", {
+			className: "v3-dot",
+			"aria-hidden": "true"
+		});
+		const belowBullets = entry.id === "duplicate_call" ? (0, react.createElement)("div", { className: "v3-gfoot-edit" }, (0, react.createElement)(GuardThresholdEditor, {
+			t,
+			thresholds: duplicateThresholds,
+			...onThresholdsChange === void 0 ? {} : { onChange: onThresholdsChange }
+		}), (0, react.createElement)("p", { className: "v3-hint mc-guard-threshold-hint" }, t("guardThresholdHint"))) : (0, react.createElement)("p", { className: "v3-hint" }, t(entry.id === "alternating_cycle" ? "guardPurposeB" : "guardPurposeC"));
+		const footNote = entry.id === "alternating_cycle" ? (0, react.createElement)("span", { className: "v3-gfoot-note" }, t("guardFootCycle")) : entry.id === "no_progress" ? (0, react.createElement)("span", { className: "v3-gfoot-note" }, t("guardFootNoProgress")) : null;
 		return (0, react.createElement)("div", {
 			key: entry.id,
-			className: "mc-guard-card",
+			className: "v3-gitem",
 			"data-guard-section": entry.id
-		}, (0, react.createElement)("div", { className: "mc-guard-head" }, (0, react.createElement)("span", { className: "mc-guard-title" }, t(entry.titleKey)), (0, react.createElement)("span", { className: "mc-guard-model" }, `${t("guardModelLabel")} ${entry.id}`), (0, react.createElement)("button", {
+		}, (0, react.createElement)("div", { className: "v3-gh" }, dot, (0, react.createElement)("span", { className: "v3-gnm" }, t(entry.titleKey)), (0, react.createElement)("span", { className: "v3-gid" }, entry.id), (0, react.createElement)("button", {
 			type: "button",
 			role: "switch",
 			"aria-checked": isOn ? "true" : "false",
 			"aria-label": t(entry.titleKey),
-			className: `mc-guard-switch${isOn ? " mc-guard-switch--on" : ""}`,
+			className: "v3-sw",
 			disabled: !canToggle,
 			onClick: () => canToggle && onToggle(entry.id, !isOn)
-		})), (0, react.createElement)("div", { className: "mc-guard-body" }, (0, react.createElement)("ul", { className: "mc-guard-points" }, ...entry.bodyKeys.map((key) => (0, react.createElement)("li", {
+		})), (0, react.createElement)("ul", { className: "v3-gpoints" }, ...entry.bodyKeys.map((key) => (0, react.createElement)("li", {
 			key,
 			className: "mc-guard-point"
-		}, t(key)))), entry.id === "duplicate_call" && duplicateThresholds !== void 0 && (0, react.createElement)("div", { className: "mc-guard-thresholds" }, (0, react.createElement)(GuardThresholdEditor, {
-			t,
-			thresholds: duplicateThresholds,
-			...onThresholdsChange === void 0 ? {} : { onChange: onThresholdsChange }
-		}))));
+		}, t(key)))), belowBullets, (0, react.createElement)("div", { className: "v3-gfoot" }, (0, react.createElement)("span", null, t("guardFired")), (0, react.createElement)("span", { className: "v3-kbd" }, statText(firedValue(entry.id, stats))), footNote));
 	};
-	return (0, react.createElement)("section", { className: "mc-section" }, (0, react.createElement)("header", { className: "mc-heading-row" }, (0, react.createElement)("h2", { className: "mc-heading" }, t("guardTitle")), (0, react.createElement)("div", { className: "mc-heading-actions" }, onReset !== void 0 && (0, react.createElement)("button", {
+	const scopeCell = (0, react.createElement)("div", {
+		key: "scope",
+		className: "v3-gitem v3-gitem--info"
+	}, (0, react.createElement)("div", { className: "v3-gh" }, (0, react.createElement)("span", { className: "v3-gnm" }, t("guardScopeTitle"))), (0, react.createElement)("p", null, t("guardScopeBody")), (0, react.createElement)("div", { className: "v3-gfoot" }, (0, react.createElement)("span", null, t("guardScopeFoot"))));
+	return (0, react.createElement)("section", { className: "mc-section v3-root" }, V3Styles(), (0, react.createElement)("style", { "data-guard-style": "true" }, GUARD_CSS), onReset === void 0 ? null : (0, react.createElement)("div", { style: {
+		display: "flex",
+		justifyContent: "flex-end"
+	} }, (0, react.createElement)("button", {
 		type: "button",
 		className: "mc-count mc-count--action",
 		onClick: onReset
-	}, t("guardReset")))), (0, react.createElement)("p", { className: "mc-desc" }, t("guardDesc")), (0, react.createElement)("p", { className: "mc-guard-boundary" }, t("guardBoundary")), (0, react.createElement)(GuardStatsBoard, {
+	}, t("guardReset"))), (0, react.createElement)(GuardStatsBoard, {
 		t,
 		...stats === void 0 ? {} : { stats }
-	}), ...SECTIONS.map(section));
+	}), (0, react.createElement)("p", { className: "v3-hint" }, t("guardBoundaryShort")), (0, react.createElement)("div", { className: "v3-gpanel" }, ...SECTIONS.map(section), scopeCell));
 }
 //#endregion
 //#region src/client/GuardContainer.tsx
@@ -8136,6 +9021,7 @@ function PluginSection(props) {
 	const [active, setActive] = (0, react.useState)("overview");
 	const callIndexApi = callIndexApiFor(props.callIndexRemote);
 	const [diagnostics, setDiagnostics] = (0, react.useState)(void 0);
+	const [catalogUsage, setCatalogUsage] = (0, react.useState)(void 0);
 	(0, react.useEffect)(() => {
 		let live = true;
 		(async () => {
@@ -8147,6 +9033,35 @@ function PluginSection(props) {
 			live = false;
 		};
 	}, [callIndexApi]);
+	(0, react.useEffect)(() => {
+		let live = true;
+		(async () => {
+			const result = await callIndexApi.listCalls({ range: "all" });
+			if (!live || !result.ok) return;
+			const map = /* @__PURE__ */ new Map();
+			for (const row of callIndexToolRows(result.value)) map.set(row.toolName, {
+				uses: row.calls,
+				failures: row.error
+			});
+			setCatalogUsage(map);
+		})();
+		return () => {
+			live = false;
+		};
+	}, [callIndexApi]);
+	/**
+	* Reset the settings content scroller when the category changes.
+	*
+	* The shell owns the scrolling column and swaps panels with `hidden`, so the
+	* previous tab's scrollTop survives the switch and the next page opens halfway
+	* down (observed: 执行保护 opened below its counter board). Reset the nearest
+	* scrollable ancestor of the active panel.
+	*/
+	(0, react.useEffect)(() => {
+		let node = document.getElementById("mc-category-panel-" + active);
+		while (node !== null && !(node.scrollHeight > node.clientHeight + 4)) node = node.parentElement;
+		if (node !== null) node.scrollTop = 0;
+	}, [active]);
 	return (0, react.createElement)(PluginSectionView, {
 		capability: props.capability,
 		usageApi: props.usageApi,
@@ -8157,7 +9072,8 @@ function PluginSection(props) {
 		t: props.t,
 		active,
 		onSelect: setActive,
-		...diagnostics === void 0 ? {} : { diagnostics }
+		...diagnostics === void 0 ? {} : { diagnostics },
+		...catalogUsage === void 0 ? {} : { catalogUsage }
 	});
 }
 /**
@@ -8166,7 +9082,7 @@ function PluginSection(props) {
 * `UsagePanelView`.
 */
 function PluginSectionView(props) {
-	const { capability, usageApi, callIndexRemote, scopeTarget, sessionCatalog, guardRemote, t, active, onSelect, diagnostics } = props;
+	const { capability, usageApi, callIndexRemote, scopeTarget, sessionCatalog, guardRemote, t, active, onSelect, diagnostics, catalogUsage } = props;
 	const callIndexApi = callIndexApiFor(callIndexRemote);
 	const panel = (category, children) => (0, react.createElement)("div", {
 		role: "tabpanel",
@@ -8199,7 +9115,10 @@ function PluginSectionView(props) {
 			5,
 			8
 		]
-	})), panel("catalog", (0, react.createElement)(CapabilitySection, capability)), panel("usage", callIndexRemote === void 0 && usageApi !== void 0 ? (0, react.createElement)(UsagePanel, { api: usageApi }) : (0, react.createElement)(CallIndexDetailPanel, {
+	})), panel("catalog", (0, react.createElement)(CapabilitySection, {
+		...capability,
+		...catalogUsage === void 0 ? {} : { usage: catalogUsage }
+	})), panel("usage", callIndexRemote === void 0 && usageApi !== void 0 ? (0, react.createElement)(UsagePanel, { api: usageApi }) : (0, react.createElement)(CallIndexDetailPanel, {
 		api: callIndexApi,
 		...scopeTarget === void 0 ? {} : { resolveScopeTarget: scopeTarget },
 		...sessionCatalog === void 0 ? {} : { resolveSessionCatalog: sessionCatalog }
@@ -8279,6 +9198,17 @@ async function apply(ctx) {
 		guardDesc: "只针对有证据的重复与无进展拦截具体操作；不因总步数、工具总次数或任务时长终止任务。",
 		guardBoundary: "统计与限制是两件事：Step、工具调用次数、任务时长只用于统计与诊断，不构成硬停止条件。Quick / Normal / Deep 三档里的 Step、工具次数、时长阈值（soft* / hard*）是兼容字段与统计口径，只参与配置校验与计数，不产生提醒，也不停止任务。单个工具自身的超时另由宿主或该工具负责。",
 		guardReset: "恢复默认",
+		guardScopeTitle: "生效范围",
+		guardScopeBody: "三个开关按 Agent / Turn 隔离，不跨 Session 继承；关闭只停止对应的提醒与局部拒绝，不改动任何配置或历史。",
+		guardScopeFoot: "恢复默认只写回开关值，不重写其他配置",
+		guardBoundaryLabel: "边界",
+		guardBoundaryShort: "这里的数字只用于展示，不构成硬停止；三档阈值只参与校验与计数，不产生提醒也不停止任务。",
+		guardThresholdHint: "默认 3 / 5 / 8 次；改的是第几次重复时提醒，只提醒、不拦截。",
+		guardFired: "实际触发",
+		guardPurposeB: "作用：识别 A→B→A→B 这类交替循环并提醒，避免来回空转。",
+		guardPurposeC: "作用：证据明确时拦下已证实的重复操作，其余情况只提醒。",
+		guardFootCycle: "命中后只给出说明，不阻断调用",
+		guardFootNoProgress: "降级条件　日志缺失 · 结果不可比较 · 识别不确定",
 		guardSectionA: "A · 相同调用重复提醒",
 		guardSectionB: "B · 交替循环识别",
 		guardSectionC: "C · 无进展保护",
@@ -8327,7 +9257,7 @@ async function apply(ctx) {
 		emptyGlobalSkills: "暂无全局技能",
 		emptyProjectSkills: "暂无项目技能",
 		emptyPresetSkills: "暂无预设技能",
-		filterByName: "按名称、分组或正则表达式筛选…",
+		filterByName: "筛选名称或分组",
 		filterHint: "忽略大小写。匹配工具/技能名称、MCP 服务器、技能来源标签与预设 ID；也可以输入正则表达式，例如 cordis|ptc 或 /^mcp__dbx/。",
 		filterNoMatch: "没有匹配的能力（清空过滤框可恢复完整列表）",
 		emptyTools: "暂无工具",
@@ -8336,6 +9266,8 @@ async function apply(ctx) {
 		residentShort: "常驻",
 		onDemandShort: "按需",
 		disabledShort: "禁用",
+		catalogZeroCall: "零调用",
+		catalogZeroCallHint: "按已索引调用统计",
 		cycleHint: "点击标签切换分类（按需 → 禁用 → 常驻）",
 		notPreviewable: "该文件不是可预览的文本文件",
 		previewClose: "关闭",
@@ -8428,7 +9360,7 @@ async function apply(ctx) {
 		summaryLimitInvalid: "请输入不小于 20 的整数",
 		summaryLimitDisabled: "检索信息存储未启用",
 		summaryLimitSaved: "检索描述上限已保存",
-		diagnosticTitle: "能力诊断：{count} 项",
+		diagnosticTitle: "能力诊断 · {count} 项",
 		diagnosticUnavailable: "不可调用：{name}（来源 {source}{preset}）",
 		diagnosticShadowed: "同名覆盖：{name} 保留 {winner}，隐藏 {hidden}",
 		diagnosticBroken: "损坏的预设：{id}（{reason}；受影响技能数量由 DSH 未提供）",
@@ -8477,6 +9409,17 @@ async function apply(ctx) {
 		guardDesc: "Blocks specific operations only when there is evidence of repetition or no progress; never stops a task for step count, tool count or duration.",
 		guardBoundary: "Counting and limiting are separate: steps, tool calls and task duration are statistics and diagnostics only, never hard-stop conditions. The per-level (Quick / Normal / Deep) step, tool-call and duration thresholds (soft* / hard*) are compatibility fields and counting units: they only take part in config validation and tallies, never producing a reminder or stopping a task. A single tool timeout stays with the host or that tool.",
 		guardReset: "Restore defaults",
+		guardScopeTitle: "Scope",
+		guardScopeBody: "The three switches are isolated per Agent / turn and never inherited across Sessions; turning one off stops only its reminders and local denials, and changes no configuration or history.",
+		guardScopeFoot: "Restoring defaults writes only the switch values; no other configuration is rewritten.",
+		guardBoundaryLabel: "Boundary",
+		guardBoundaryShort: "These numbers are informational only and never stop a task; the three tier thresholds participate in validation and counting only.",
+		guardThresholdHint: "Defaults are 3 / 5 / 8; editing changes when the reminder fires. Reminders never block a call.",
+		guardFired: "Fired",
+		guardPurposeB: "Purpose: detect alternating A→B→A→B cycles and remind, so the agent stops going in circles.",
+		guardPurposeC: "Purpose: block a confirmed repeat when the evidence is clear; otherwise only remind.",
+		guardFootCycle: "Fires an explanation only; it never blocks the call.",
+		guardFootNoProgress: "Degrades when: logs missing · results incomparable · match uncertain",
 		guardSectionA: "A · Repeated identical calls",
 		guardSectionB: "B · Alternating cycle detection",
 		guardSectionC: "C · No-progress protection",
@@ -8525,7 +9468,7 @@ async function apply(ctx) {
 		emptyGlobalSkills: "No global skills",
 		emptyProjectSkills: "No project skills",
 		emptyPresetSkills: "No preset skills",
-		filterByName: "Filter by name, group, or regex…",
+		filterByName: "Filter name or group",
 		filterHint: "Case-insensitive. Matches tool/skill names, MCP servers, skill source labels and preset ids; a regular expression works too, e.g. cordis|ptc or /^mcp__dbx/.",
 		filterNoMatch: "No capability matches (clear the filter to see the full list)",
 		emptyTools: "No tools",
@@ -8534,6 +9477,8 @@ async function apply(ctx) {
 		residentShort: "Resident",
 		onDemandShort: "On-demand",
 		disabledShort: "Disabled",
+		catalogZeroCall: "No calls",
+		catalogZeroCallHint: "Based on indexed calls",
 		cycleHint: "Click a tag to cycle its classification (On-demand → Disabled → Resident)",
 		notPreviewable: "This file is not a previewable text file",
 		previewClose: "Close",