dsh-llm-verifier 0.6.0 → 0.6.2

package/lib/client.js

@@ -213,6 +213,7 @@ window.__ModuleLoader__.load({
 			"recent.decisionPrompt": "提示词",
 			"recent.decisionOutput": "原始回答",
 			"recent.details": "查看详情",
+			"recent.detailsHide": "收起详情",
 			"recent.detail.criterion": "判据",
 			"recent.detail.score": "分数",
 			"recent.detail.threshold": "阈值",
@@ -238,6 +239,13 @@ window.__ModuleLoader__.load({
 			"models.calls": "{calls} 请求",
 			"models.tokens": "{tokens} Token",
 			"models.empty": "暂无模型调用",
+			"activity.route.classifying": "正在识别需要独立复核的对象…",
+			"activity.route.compare": "正在比较候选方案（约 {n} 次调用）…",
+			"activity.route.select": "正在为多个候选排名（约 {n} 次调用）…",
+			"activity.route.track": "正在复核任务进度（约 {n} 次调用）…",
+			"activity.final.accepting": "正在最终验收（约 {n} 次调用）…",
+			"activity.final.accepted": "最终验收通过",
+			"activity.final.rejected": "最终验收未通过",
 			"process.generating": "正在过程选优：生成 {n} 份候选…",
 			"process.comparing": "正在过程选优：裁判比较 {n} 份候选…",
 			"process.replaced": "过程选优完成：已改用更优的回复",
@@ -514,6 +522,7 @@ window.__ModuleLoader__.load({
 			"recent.decisionPrompt": "Prompt",
 			"recent.decisionOutput": "Raw answer",
 			"recent.details": "Details",
+			"recent.detailsHide": "Hide details",
 			"recent.detail.criterion": "Criterion",
 			"recent.detail.score": "Score",
 			"recent.detail.threshold": "Threshold",
@@ -539,6 +548,13 @@ window.__ModuleLoader__.load({
 			"models.calls": "{calls} Requests",
 			"models.tokens": "{tokens} Tokens",
 			"models.empty": "No model calls",
+			"activity.route.classifying": "Identifying what needs independent review…",
+			"activity.route.compare": "Comparing the candidate replies (about {n} calls)…",
+			"activity.route.select": "Ranking the candidate set (about {n} calls)…",
+			"activity.route.track": "Reviewing task progress (about {n} calls)…",
+			"activity.final.accepting": "Running the final acceptance (about {n} calls)…",
+			"activity.final.accepted": "Final acceptance passed",
+			"activity.final.rejected": "Final acceptance did not pass",
 			"process.generating": "Selecting the best reply: generating {n} candidates…",
 			"process.comparing": "Selecting the best reply: judging {n} candidates…",
 			"process.replaced": "Process selection: a better reply replaced the original",
@@ -636,20 +652,47 @@ window.__ModuleLoader__.load({
 			if (!params) return template;
 			return template.replace(/\{(\w+)\}/g, (match, key) => key in params ? String(params[key]) : match);
 		}
+		/** A count that is safe to print, falling back to the given minimum for a missing/garbled value. */
+		function activityCount(value, minimum) {
+			return typeof value === "number" && Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : minimum;
+		}
 		/**
-		* Render the process-selection chip, or nothing when there is nothing to say.
+		* Render the chat chip, or nothing when there is nothing to say.
 		*
 		* Pure on purpose (no React, no locale detection): both the chip and its regression tests read the
-		* same mapping. An unknown phase counts as generating — a newer host describing a phase this build
-		* does not know must still show that work is happening, not disappear.
+		* same mapping. Unknown enum values degrade to the least surprising copy — a newer host describing a
+		* phase or a stage this build does not know must still show that work is happening, not disappear.
 		* @param view - the server's activity view, or nothing.
 		* @param t - the active dictionary.
 		* @returns The tone and copy, or null to render no row at all.
 		*/
-		function processActivityText(view, t) {
+		function verifierActivityText(view, t) {
 			const active = view?.active;
 			if (active !== void 0 && active !== null) {
-				const candidates = typeof active.candidates === "number" && Number.isFinite(active.candidates) ? Math.max(2, Math.floor(active.candidates)) : 2;
+				if (active.stage === "route") {
+					if (active.phase !== "reviewing") return {
+						tone: "busy",
+						text: t["activity.route.classifying"]
+					};
+					const calls = activityCount(active.expectedCalls, 1);
+					if (active.destination === "select") return {
+						tone: "busy",
+						text: tFormat(t["activity.route.select"], { n: calls })
+					};
+					if (active.destination === "track") return {
+						tone: "busy",
+						text: tFormat(t["activity.route.track"], { n: calls })
+					};
+					return {
+						tone: "busy",
+						text: tFormat(t["activity.route.compare"], { n: calls })
+					};
+				}
+				if (active.stage === "final") return {
+					tone: "busy",
+					text: tFormat(t["activity.final.accepting"], { n: activityCount(active.expectedCalls, 1) })
+				};
+				const candidates = activityCount(active.candidates, 2);
 				return active.phase === "comparing" ? {
 					tone: "busy",
 					text: tFormat(t["process.comparing"], { n: candidates })
@@ -658,7 +701,19 @@ window.__ModuleLoader__.load({
 					text: tFormat(t["process.generating"], { n: candidates })
 				};
 			}
-			switch (view?.settled?.outcome) {
+			const settled = view?.settled;
+			if (settled?.stage === "final") {
+				if (settled.outcome === "accepted") return {
+					tone: "ok",
+					text: t["activity.final.accepted"]
+				};
+				if (settled.outcome === "rejected") return {
+					tone: "error",
+					text: t["activity.final.rejected"]
+				};
+				return null;
+			}
+			switch (settled?.outcome) {
 				case "replaced": return {
 					tone: "ok",
 					text: t["process.replaced"]
@@ -1917,7 +1972,7 @@ window.__ModuleLoader__.load({
 			fontSize: 12,
 			lineHeight: "18px",
 			cursor: "pointer",
-			color: "var(--dsw-alias-brand-primary, #4f8cff)"
+			color: "var(--dsw-alias-link)"
 		};
 		const row = {
 			display: "flex",
@@ -1964,7 +2019,7 @@ window.__ModuleLoader__.load({
 		const sliderStyle = {
 			width: "100%",
 			margin: 0,
-			accentColor: "var(--dsw-alias-brand-primary, #4f8cff)"
+			accentColor: "var(--dsw-alias-state-business-primary)"
 		};
 		const toolbarStyle = {
 			display: "flex",
@@ -1989,8 +2044,8 @@ window.__ModuleLoader__.load({
 			gap: 6,
 			padding: "10px 0 12px",
 			borderTop: "1px solid var(--dsw-alias-border-l2)",
-			background: "var(--dsw-alias-bg-module, #171925)",
-			boxShadow: "0 -10px 24px rgba(0,0,0,.18)"
+			background: "var(--dsw-alias-bg-module-platform)",
+			boxShadow: "0 -10px 24px var(--dsw-alias-bg-mask-2)"
 		};
 		const statusStyle = {
 			fontSize: 12,
@@ -2008,7 +2063,7 @@ window.__ModuleLoader__.load({
 			padding: "0 34px 0 12px",
 			borderRadius: 8,
 			color: "var(--dsw-alias-label-primary)",
-			background: "var(--dsw-alias-bg-input)",
+			background: "var(--dsw-specific-input-major)",
 			border: "1px solid var(--dsw-alias-border-l2)",
 			font: "inherit",
 			fontSize: 14,
@@ -2025,7 +2080,7 @@ window.__ModuleLoader__.load({
 			borderRadius: 999,
 			cursor: "pointer",
 			transition: "background .15s ease",
-			background: enabled ? "var(--dsw-alias-state-success-primary)" : "var(--dsw-alias-bg-input)"
+			background: enabled ? "var(--dsw-alias-state-success-primary)" : "var(--dsw-specific-input-major)"
 		});
 		const toggleThumbStyle = (enabled) => ({
 			position: "absolute",
@@ -2034,20 +2089,31 @@ window.__ModuleLoader__.load({
 			width: 16,
 			height: 16,
 			borderRadius: "50%",
-			background: "var(--dsw-static-neutral-00, #fff)",
+			background: "var(--dsw-static-neutral-00)",
 			boxShadow: "0 1px 3px rgba(0,0,0,.28)",
 			transition: "left .15s ease"
 		});
 		const dashboardCard = {
-			border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.13))",
-			background: "color-mix(in srgb, var(--dsw-alias-bg-module, #171925) 88%, transparent)",
+			border: "1px solid var(--dsw-alias-border-l2)",
+			background: "var(--dsw-alias-bg-module-platform)",
 			borderRadius: 16,
-			boxShadow: "0 12px 36px rgba(0,0,0,.12)"
+			boxShadow: "0 12px 36px var(--dsw-alias-bg-mask-2)"
 		};
 		const muted = {
-			color: "var(--dsw-text-secondary)",
+			color: "var(--dsw-alias-label-tertiary)",
 			fontSize: 12
 		};
+		/** Chart palette rides the state aliases so bars and line stay legible in both themes. */
+		const chartBarColor = "var(--dsw-alias-state-business-primary)";
+		const chartLineColor = "var(--dsw-alias-state-warn-primary)";
+		function toneChip(tone) {
+			const token = tone === "error" ? "var(--dsw-alias-state-error-primary)" : tone === "warn" ? "var(--dsw-alias-state-warn-primary)" : tone === "pass" ? "var(--dsw-alias-state-success-primary)" : "var(--dsw-alias-state-business-primary)";
+			return {
+				background: `color-mix(in srgb, ${token} 14%, transparent)`,
+				border: `1px solid color-mix(in srgb, ${token} 32%, transparent)`,
+				color: tone === "warn" ? "var(--dsw-alias-state-warn-label)" : token
+			};
+		}
 		const toolColors = {
 			verifier_route_classify: "#d97706",
 			verifier_compare: "#4f8cff",
@@ -2701,7 +2767,7 @@ window.__ModuleLoader__.load({
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
 							style: {
 								cursor: "pointer",
-								color: "var(--dsw-text-secondary)"
+								color: "var(--dsw-alias-label-secondary)"
 							},
 							children: tFormat(t["field.criteriaPreset.previewSummary"], { count: preset.length })
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
@@ -2710,8 +2776,8 @@ window.__ModuleLoader__.load({
 								wordBreak: "break-word",
 								maxHeight: 240,
 								overflow: "auto",
-								background: "var(--dsw-surface-sunken)",
-								border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.12))",
+								background: "var(--dsw-alias-markdown-code-block)",
+								border: "1px solid var(--dsw-alias-border-l1)",
 								borderRadius: 8,
 								padding: 10,
 								marginTop: 8
@@ -2921,7 +2987,7 @@ window.__ModuleLoader__.load({
 						style: {
 							padding: "10px 12px",
 							borderRadius: 8,
-							background: "var(--dsw-alias-state-warn-bg)",
+							background: "var(--dsw-alias-state-warn-tertiary)",
 							color: "var(--dsw-alias-state-warn-label)",
 							fontSize: 12,
 							lineHeight: "18px"
@@ -3095,13 +3161,13 @@ window.__ModuleLoader__.load({
 							x2: width - pad.r,
 							y1: pad.t + innerH * ratio,
 							y2: pad.t + innerH * ratio,
-							stroke: "rgba(148,163,184,.16)"
+							stroke: "var(--dsw-alias-border-l2)"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 							x: pad.l - 8,
 							y: pad.t + innerH * ratio + 4,
 							textAnchor: "end",
 							fontSize: "10",
-							fill: "var(--dsw-text-secondary)",
+							fill: "var(--dsw-alias-label-secondary)",
 							children: Math.round(max * (1 - ratio))
 						})] }, ratio)),
 						rows.map((row, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
@@ -3110,13 +3176,13 @@ window.__ModuleLoader__.load({
 							width: barWidth,
 							height: pad.t + innerH - y(row.invocations),
 							rx: "2",
-							fill: "#4f8cff",
+							fill: chartBarColor,
 							opacity: ".82"
 						}, row.date)),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", {
 							points,
 							fill: "none",
-							stroke: "#5ed7e8",
+							stroke: chartLineColor,
 							strokeWidth: "2.4",
 							strokeLinejoin: "round",
 							strokeLinecap: "round"
@@ -3126,7 +3192,7 @@ window.__ModuleLoader__.load({
 							y: height - 14,
 							textAnchor: "middle",
 							fontSize: "10",
-							fill: "var(--dsw-text-secondary)",
+							fill: "var(--dsw-alias-label-secondary)",
 							children: [
 								Number(row.date.slice(5, 7)),
 								"/",
@@ -3146,20 +3212,20 @@ window.__ModuleLoader__.load({
 						width: 8,
 						height: 8,
 						borderRadius: 2,
-						background: "#4f8cff",
+						background: chartBarColor,
 						marginRight: 6
 					} }), t["chart.legendToolCalls"]] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", { style: {
 						display: "inline-block",
 						width: 14,
 						height: 2,
-						background: "#5ed7e8",
+						background: chartLineColor,
 						marginRight: 6,
 						verticalAlign: "middle"
 					} }), t["chart.legendModelCalls"]] })]
 				})]
 			});
 		}
-		function StatisticsPage({ sessionId, rpc, isGlobal }) {
+		function StatisticsPage({ sessionId, rpc, isGlobal, blankComposerSeat }) {
 			const lang = useLanguage();
 			const t = dictionaries[lang];
 			const labels = toolLabels[lang];
@@ -3171,6 +3237,17 @@ window.__ModuleLoader__.load({
 			const [refresh, setRefresh] = (0, react.useState)(0);
 			const [snapshot, setSnapshot] = (0, react.useState)(null);
 			const snapshotRequest = (0, react.useRef)(0);
+			const [openDetails, setOpenDetails] = (0, react.useState)(null);
+			const seatHandle = (0, react.useRef)(blankComposerSeat);
+			seatHandle.current = blankComposerSeat;
+			(0, react.useEffect)(() => {
+				const take = seatHandle.current;
+				if (typeof take !== "function") return void 0;
+				const dispose = take();
+				return () => {
+					dispose();
+				};
+			}, []);
 			const toggleSnapshot = async (id) => {
 				if (snapshot?.id === id) {
 					setSnapshot(null);
@@ -3187,6 +3264,13 @@ window.__ModuleLoader__.load({
 					if (rpc && typeof rpc.call === "function") try {
 						const result = await rpc.call("/api", "llm-verifier/statistics", payload);
 						if (result && result.ok === true) record = result.value.decision;
+						else if (result && result.ok === false) {
+							if (snapshotRequest.current === request) setSnapshot({
+								id,
+								error: result.error?.message ?? t["recent.decisionMissing"]
+							});
+							return;
+						}
 					} catch (rpcError) {
 						console.warn("[llm-verifier] decision rpc.call failed, trying fetch fallback:", rpcError);
 					}
@@ -3317,7 +3401,7 @@ window.__ModuleLoader__.load({
 					overflow: "auto",
 					boxSizing: "border-box",
 					padding: "22px clamp(16px, 3vw, 38px) 48px",
-					color: "var(--dsw-text-primary)",
+					color: "var(--dsw-alias-label-primary)",
 					background: "radial-gradient(circle at 10% 0%, rgba(115,77,255,.09), transparent 32%), radial-gradient(circle at 100% 8%, rgba(47,197,201,.07), transparent 28%)"
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3350,8 +3434,8 @@ window.__ModuleLoader__.load({
 										width: 34,
 										height: 34,
 										borderRadius: 10,
-										background: "rgba(79,140,255,.14)",
-										color: "#6da0ff"
+										background: "color-mix(in srgb, var(--dsw-alias-state-business-primary) 14%, transparent)",
+										color: "var(--dsw-alias-state-business-primary)"
 									},
 									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDataOutline16, { size: 18 })
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
@@ -3380,8 +3464,8 @@ window.__ModuleLoader__.load({
 											display: "flex",
 											padding: 3,
 											borderRadius: 10,
-											background: "var(--dsw-surface-sunken)",
-											border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.12))"
+											background: "var(--dsw-alias-bg-multi-select)",
+											border: "1px solid var(--dsw-alias-border-l2)"
 										},
 										children: [
 											7,
@@ -3395,8 +3479,8 @@ window.__ModuleLoader__.load({
 												borderRadius: 7,
 												padding: "6px 10px",
 												cursor: "pointer",
-												color: days === value ? "#fff" : "var(--dsw-text-secondary)",
-												background: days === value ? "#3f68d8" : "transparent"
+												color: days === value ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-label-secondary)",
+												background: days === value ? "color-mix(in srgb, var(--dsw-alias-state-business-primary) 16%, transparent)" : "transparent"
 											},
 											children: tFormat(t["stats.daysUnit"], { days: value })
 										}, value))
@@ -3405,12 +3489,12 @@ window.__ModuleLoader__.load({
 										"aria-pressed": sessionOnly,
 										onClick: () => setSessionOnly((value) => !value),
 										style: {
-											border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.15))",
+											border: "1px solid var(--dsw-alias-border-l3)",
 											borderRadius: 9,
 											padding: "7px 11px",
 											cursor: "pointer",
-											color: "var(--dsw-text-primary)",
-											background: sessionOnly ? "rgba(79,140,255,.18)" : "var(--dsw-surface-sunken)"
+											color: sessionOnly ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-label-primary)",
+											background: sessionOnly ? "color-mix(in srgb, var(--dsw-alias-state-business-primary) 14%, transparent)" : "var(--dsw-alias-interactive-bg-hover)"
 										},
 										children: sessionOnly ? t["stats.currentSession"] : t["stats.allSessions"]
 									}),
@@ -3419,12 +3503,12 @@ window.__ModuleLoader__.load({
 										disabled: probe?.busy === true,
 										onClick: () => void runProbe(),
 										style: {
-											border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.15))",
+											border: "1px solid var(--dsw-alias-border-l3)",
 											borderRadius: 9,
 											padding: "7px 11px",
 											cursor: "pointer",
-											color: "var(--dsw-text-primary)",
-											background: "var(--dsw-surface-sunken)"
+											color: "var(--dsw-alias-label-primary)",
+											background: "var(--dsw-alias-interactive-bg-hover)"
 										},
 										children: probe?.busy === true ? t["probe.running"] : t["probe.button"]
 									}),
@@ -3437,9 +3521,9 @@ window.__ModuleLoader__.load({
 											width: 34,
 											height: 34,
 											borderRadius: 9,
-											border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.15))",
-											color: "var(--dsw-text-primary)",
-											background: "var(--dsw-surface-sunken)",
+											border: "1px solid var(--dsw-alias-border-l3)",
+											color: "var(--dsw-alias-label-primary)",
+											background: "var(--dsw-alias-interactive-bg-hover)",
 											cursor: "pointer"
 										},
 										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline16, { size: 16 })
@@ -3451,8 +3535,8 @@ window.__ModuleLoader__.load({
 							style: {
 								...dashboardCard,
 								padding: 18,
-								borderColor: "var(--dsw-danger, #e85858)",
-								color: "var(--dsw-danger, #e85858)"
+								borderColor: "var(--dsw-alias-state-error-primary)",
+								color: "var(--dsw-alias-state-error-primary)"
 							},
 							children: [error, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								style: {
@@ -3483,7 +3567,7 @@ window.__ModuleLoader__.load({
 									style: {
 										marginTop: 10,
 										fontSize: 12,
-										color: "#e76565"
+										color: "var(--dsw-alias-state-error-primary)"
 									},
 									children: probe.error
 								}),
@@ -3503,7 +3587,7 @@ window.__ModuleLoader__.load({
 										style: {
 											marginTop: 6,
 											fontSize: 12,
-											color: "#e3bd63"
+											color: "var(--dsw-alias-state-warn-label)"
 										},
 										children: tFormat(t["probe.rubricFallback"], { error: probe.value.rubric.error })
 									}),
@@ -3523,12 +3607,12 @@ window.__ModuleLoader__.load({
 												fontSize: 12,
 												padding: "9px 11px",
 												borderRadius: 9,
-												background: "var(--dsw-surface-sunken)"
+												background: "var(--dsw-alias-interactive-bg-hover)"
 											},
 											children: [
 												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 													style: {
-														color: judge.ok ? "#77d49b" : "#e76565",
+														color: judge.ok ? "var(--dsw-alias-state-success-primary)" : "var(--dsw-alias-state-error-primary)",
 														fontWeight: 600
 													},
 													children: judge.ok ? "OK" : t["probe.failed"]
@@ -3563,7 +3647,7 @@ window.__ModuleLoader__.load({
 														children: tFormat(t["probe.calls"], { calls: String(judge.calls) })
 													})
 												] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													style: { color: "#e76565" },
+													style: { color: "var(--dsw-alias-state-error-primary)" },
 													children: judge.error
 												})
 											]
@@ -3627,7 +3711,7 @@ window.__ModuleLoader__.load({
 											compact(totals?.successes ?? 0, lang),
 											" ",
 											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("small", {
-												style: { color: "#77d49b" },
+												style: { color: "var(--dsw-alias-state-success-primary)" },
 												children: [
 													"▲ ",
 													((totals?.successRate ?? 0) * 100).toFixed(1),
@@ -3662,7 +3746,7 @@ window.__ModuleLoader__.load({
 											hits: compact(totals?.cacheHits ?? 0, lang),
 											total: compact((totals?.cacheHits ?? 0) + (totals?.cacheMisses ?? 0), lang)
 										}),
-										accent: "#b7dd64"
+										accent: "var(--dsw-alias-state-success-primary)"
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Metric, {
 										label: t["metric.prefixCacheHitRate"],
@@ -3745,8 +3829,8 @@ window.__ModuleLoader__.load({
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 											style: {
 												textAlign: "left",
-												color: "var(--dsw-text-secondary)",
-												background: "var(--dsw-surface-sunken)"
+												color: "var(--dsw-alias-label-secondary)",
+												background: "var(--dsw-alias-interactive-bg-hover)"
 											},
 											children: [
 												t["table.colTool"],
@@ -3765,7 +3849,7 @@ window.__ModuleLoader__.load({
 												children: value
 											}, value))
 										}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tbody", { children: [(data?.tools ?? []).map((tool) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
-											style: { borderTop: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.1))" },
+											style: { borderTop: "1px solid var(--dsw-alias-border-l2)" },
 											children: [
 												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", {
 													style: { padding: "13px 12px" },
@@ -3795,7 +3879,7 @@ window.__ModuleLoader__.load({
 												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", {
 													style: {
 														padding: "13px 12px",
-														color: tool.successRate >= .9 ? "#77d49b" : tool.successRate >= .7 ? "#e3bd63" : "#ed7777"
+														color: tool.successRate >= .9 ? "var(--dsw-alias-state-success-primary)" : tool.successRate >= .7 ? "var(--dsw-alias-state-warn-label)" : "var(--dsw-alias-state-error-primary)"
 													},
 													children: [(tool.successRate * 100).toFixed(1), "%"]
 												}),
@@ -3866,258 +3950,196 @@ window.__ModuleLoader__.load({
 										},
 										children: [(data?.recent ?? []).map((item) => {
 											const verdictInfo = item.verdict ? formatVerdictDetails(item.verdict, t) : void 0;
+											const failed = !item.success || (verdictInfo ? verdictInfo.isFailed : false);
+											const detailsOpen = openDetails === item.id;
+											const panelStyle = {
+												margin: "8px 0 0 15px",
+												border: "1px solid var(--dsw-alias-border-l2)",
+												borderRadius: 8,
+												padding: "8px 10px",
+												background: "var(--dsw-alias-interactive-bg-hover)",
+												fontSize: 11
+											};
 											return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 												style: {
-													display: "grid",
-													gridTemplateColumns: "minmax(170px,1fr) auto",
-													gap: 12,
 													padding: "11px 8px",
-													borderTop: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.1))"
+													borderTop: "1px solid var(--dsw-alias-border-l2)"
 												},
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+												children: [
 													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 														style: {
-															display: "flex",
-															alignItems: "center",
-															gap: 8
-														},
-														children: [
-															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
-																width: 7,
-																height: 7,
-																borderRadius: "50%",
-																background: !item.success || (verdictInfo ? verdictInfo.isFailed : false) ? "#e76565" : "#59c985"
-															} }),
-															/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-																style: { fontSize: 13 },
-																children: labels[item.toolName] ?? item.toolName
-															}),
-															/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-																style: muted,
-																children: [
-																	item.provider,
-																	"/",
-																	item.model
-																]
-															})
-														]
-													}),
-													!item.success && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-														title: item.errorMessage,
-														style: {
-															margin: "5px 0 0 15px",
-															fontSize: 11,
-															color: "#e76565",
-															overflow: "hidden",
-															textOverflow: "ellipsis",
-															whiteSpace: "nowrap"
+															display: "grid",
+															gridTemplateColumns: "minmax(170px,1fr) auto",
+															gap: 12
 														},
-														children: item.errorMessage ?? item.errorName
-													}),
-													item.verdict && verdictInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-														style: {
-															display: "flex",
-															alignItems: "center",
-															flexWrap: "wrap",
-															gap: 6,
-															margin: "6px 0 0 15px",
-															fontSize: 11
-														},
-														children: [
-															verdictInfo.outcomeText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+															/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 																style: {
-																	padding: "1px 5px",
-																	borderRadius: 4,
-																	fontWeight: 500,
-																	fontSize: 11,
-																	background: verdictInfo.isFailed ? "rgba(231,101,101,.16)" : item.verdict.outcome === "tie" ? "rgba(227,189,99,.16)" : "rgba(89,201,133,.16)",
-																	color: verdictInfo.isFailed ? "#e76565" : item.verdict.outcome === "tie" ? "#e3bd63" : "#77d49b",
-																	border: `1px solid ${verdictInfo.isFailed ? "rgba(231,101,101,.3)" : item.verdict.outcome === "tie" ? "rgba(227,189,99,.3)" : "rgba(89,201,133,.3)"}`
-																},
-																children: verdictInfo.outcomeText
-															}),
-															verdictInfo.phaseText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																style: {
-																	padding: "1px 5px",
-																	borderRadius: 4,
-																	background: "var(--dsw-surface-sunken)",
-																	color: "var(--dsw-text-secondary)",
-																	border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.1))"
+																	display: "flex",
+																	alignItems: "center",
+																	gap: 8
 																},
-																children: verdictInfo.phaseText
-															}),
-															verdictInfo.scoreText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																style: { color: typeof item.verdict.threshold === "number" && typeof item.verdict.score === "number" && item.verdict.score < item.verdict.threshold ? "#e76565" : "var(--dsw-text-primary)" },
-																children: verdictInfo.scoreText
-															}),
-															verdictInfo.checkpointsText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																style: { color: "var(--dsw-text-secondary)" },
-																children: verdictInfo.checkpointsText
-															}),
-															verdictInfo.criteriaText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																style: { color: "var(--dsw-text-secondary)" },
-																children: verdictInfo.criteriaText
-															}),
-															verdictInfo.winnerText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																style: { color: "var(--dsw-text-secondary)" },
-																children: verdictInfo.winnerText
+																children: [
+																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+																		width: 7,
+																		height: 7,
+																		borderRadius: "50%",
+																		background: failed ? "var(--dsw-alias-state-error-primary)" : "var(--dsw-alias-state-success-primary)"
+																	} }),
+																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+																		style: { fontSize: 13 },
+																		children: labels[item.toolName] ?? item.toolName
+																	}),
+																	/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+																		style: muted,
+																		children: [
+																			item.provider,
+																			"/",
+																			item.model
+																		]
+																	})
+																]
 															}),
-															item.route && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															!item.success && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+																title: item.errorMessage,
 																style: {
-																	padding: "1px 5px",
-																	borderRadius: 4,
+																	margin: "5px 0 0 15px",
 																	fontSize: 11,
-																	background: "rgba(120,140,220,.14)",
-																	color: "var(--dsw-text-secondary)",
-																	border: "1px solid rgba(120,140,220,.3)"
+																	color: "var(--dsw-alias-state-error-primary)",
+																	overflow: "hidden",
+																	textOverflow: "ellipsis",
+																	whiteSpace: "nowrap"
 																},
-																children: tFormat(t["recent.route.badge"], {
-																	stage: item.route.stage,
-																	destination: item.route.destination
-																})
+																children: item.errorMessage ?? item.errorName
 															}),
-															item.stats.usageIncomplete === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															item.verdict && verdictInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 																style: {
-																	padding: "1px 5px",
-																	borderRadius: 4,
-																	fontSize: 11,
-																	background: "rgba(227,189,99,.16)",
-																	color: "#e3bd63",
-																	border: "1px solid rgba(227,189,99,.3)"
+																	display: "flex",
+																	alignItems: "center",
+																	flexWrap: "wrap",
+																	gap: 6,
+																	margin: "6px 0 0 15px",
+																	fontSize: 11
 																},
-																children: t["recent.detail.usageIncomplete"]
+																children: [
+																	verdictInfo.outcomeText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		style: {
+																			padding: "1px 5px",
+																			borderRadius: 4,
+																			fontWeight: 500,
+																			fontSize: 11,
+																			...toneChip(verdictInfo.isFailed ? "error" : item.verdict.outcome === "tie" ? "warn" : "pass")
+																		},
+																		children: verdictInfo.outcomeText
+																	}),
+																	verdictInfo.phaseText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		style: {
+																			padding: "1px 5px",
+																			borderRadius: 4,
+																			background: "var(--dsw-alias-interactive-bg-hover)",
+																			color: "var(--dsw-alias-label-secondary)",
+																			border: "1px solid var(--dsw-alias-border-l2)"
+																		},
+																		children: verdictInfo.phaseText
+																	}),
+																	verdictInfo.scoreText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		style: { color: typeof item.verdict.threshold === "number" && typeof item.verdict.score === "number" && item.verdict.score < item.verdict.threshold ? "var(--dsw-alias-state-error-primary)" : "var(--dsw-alias-label-primary)" },
+																		children: verdictInfo.scoreText
+																	}),
+																	verdictInfo.checkpointsText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		style: { color: "var(--dsw-alias-label-secondary)" },
+																		children: verdictInfo.checkpointsText
+																	}),
+																	verdictInfo.criteriaText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		style: { color: "var(--dsw-alias-label-secondary)" },
+																		children: verdictInfo.criteriaText
+																	}),
+																	verdictInfo.winnerText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		style: { color: "var(--dsw-alias-label-secondary)" },
+																		children: verdictInfo.winnerText
+																	}),
+																	item.route && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		style: {
+																			padding: "1px 5px",
+																			borderRadius: 4,
+																			fontSize: 11,
+																			color: "var(--dsw-alias-label-secondary)",
+																			...toneChip("neutral")
+																		},
+																		children: tFormat(t["recent.route.badge"], {
+																			stage: item.route.stage,
+																			destination: item.route.destination
+																		})
+																	}),
+																	item.stats.usageIncomplete === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																		style: {
+																			padding: "1px 5px",
+																			borderRadius: 4,
+																			fontSize: 11,
+																			...toneChip("warn")
+																		},
+																		children: t["recent.detail.usageIncomplete"]
+																	})
+																]
 															})
-														]
+														] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+															style: { textAlign: "right" },
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+																style: { fontSize: 12 },
+																children: duration(item.durationMs)
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+																style: {
+																	...muted,
+																	marginTop: 3
+																},
+																children: dateTime(item.startedAt, lang)
+															})]
+														})]
 													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-														style: { margin: "6px 0 0 15px" },
-														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														style: {
+															display: "flex",
+															alignItems: "center",
+															gap: 8,
+															margin: "6px 0 0 15px"
+														},
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 															type: "button",
+															"aria-expanded": snapshot?.id === item.id,
 															onClick: () => void toggleSnapshot(item.id),
 															style: {
 																fontSize: 11,
 																padding: "2px 7px",
 																borderRadius: 5,
 																cursor: "pointer",
-																color: "var(--dsw-text-secondary)",
-																background: "var(--dsw-surface-sunken)",
-																border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.14))"
+																color: "var(--dsw-alias-label-secondary)",
+																background: "var(--dsw-alias-interactive-bg-hover)",
+																border: "1px solid var(--dsw-alias-border-l2)"
 															},
 															children: snapshot?.id === item.id ? t["recent.decisionHide"] : t["recent.decision"]
-														})
-													}),
-													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-														style: { margin: "6px 0 0 15px" },
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+															type: "button",
+															"aria-expanded": detailsOpen,
+															onClick: () => setOpenDetails((current) => current === item.id ? null : item.id),
 															style: {
-																cursor: "pointer",
 																fontSize: 11,
-																color: "var(--dsw-text-secondary)"
-															},
-															children: t["recent.details"]
-														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-															style: {
-																marginTop: 8,
-																border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.14))",
-																borderRadius: 8,
-																padding: "8px 10px",
-																background: "var(--dsw-surface-sunken)",
-																fontSize: 11
+																padding: "2px 7px",
+																borderRadius: 5,
+																cursor: "pointer",
+																color: "var(--dsw-alias-label-secondary)",
+																background: "var(--dsw-alias-interactive-bg-hover)",
+																border: "1px solid var(--dsw-alias-border-l2)"
 															},
-															children: [(item.verdict?.criteria?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-																style: {
-																	display: "grid",
-																	gridTemplateColumns: "minmax(120px,1fr) auto auto",
-																	gap: "4px 14px",
-																	marginBottom: 8
-																},
-																children: [
-																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-																		style: { color: "var(--dsw-text-secondary)" },
-																		children: t["recent.detail.criterion"]
-																	}),
-																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-																		style: { color: "var(--dsw-text-secondary)" },
-																		children: t["recent.detail.score"]
-																	}),
-																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
-																		style: { color: "var(--dsw-text-secondary)" },
-																		children: t["recent.detail.threshold"]
-																	}),
-																	item.verdict.criteria.map((criterion) => {
-																		const threshold = typeof item.verdict.threshold === "number" ? item.verdict.threshold : void 0;
-																		const missed = threshold !== void 0 && criterion.score < threshold;
-																		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
-																			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: criterion.id }),
-																			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																				style: { color: missed ? "#e76565" : "#77d49b" },
-																				children: formatPercentage(criterion.score)
-																			}),
-																			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																				style: { color: "var(--dsw-text-secondary)" },
-																				children: threshold === void 0 ? "—" : formatPercentage(threshold)
-																			})
-																		] }, criterion.id);
-																	})
-																]
-															}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-																style: {
-																	display: "flex",
-																	flexWrap: "wrap",
-																	gap: 10,
-																	color: "var(--dsw-text-secondary)"
-																},
-																children: [
-																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.calls"], { calls: compact(item.stats.calls, lang) }) }),
-																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.tokens"], {
-																		input: compact(item.stats.inputTokens, lang),
-																		cached: compact(item.stats.cachedInputTokens, lang),
-																		output: compact(item.stats.outputTokens, lang)
-																	}) }),
-																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.scoreCache"], {
-																		hits: compact(item.stats.cacheHits, lang),
-																		misses: compact(item.stats.cacheMisses, lang)
-																	}) }),
-																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.prefixCache"], { rate: (item.stats.inputTokens + item.stats.cachedInputTokens > 0 ? (100 * item.stats.cachedInputTokens / (item.stats.inputTokens + item.stats.cachedInputTokens)).toFixed(0) : "0") + "%" }) }),
-																	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.cost"], { cost: money(item.stats.estimatedCostUsd) }) }),
-																	item.route && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.route"], {
-																		cycle: item.route.cycleId,
-																		trigger: item.route.trigger,
-																		stage: item.route.stage,
-																		destination: item.route.destination,
-																		attempt: item.route.attempt ?? 1
-																	}) }),
-																	item.route && item.route.reservedCalls !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.routeReserved"], {
-																		reserved: compact(item.route.reservedCalls, lang),
-																		actual: compact(item.stats.calls, lang)
-																	}) }),
-																	item.route?.skipReason !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.routeSkip"], { reason: item.route.skipReason }) }),
-																	item.route?.replayed !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.routeProcess"], {
-																		replayed: item.route.replayed === "candidate" ? t["recent.detail.replayCandidate"] : item.route.replayed === "original" ? t["recent.detail.replayOriginal"] : t["recent.detail.replayNone"],
-																		generated: compact(item.route.generatedCalls ?? 0, lang),
-																		judges: compact(item.route.judgeCalls ?? 0, lang)
-																	}) }),
-																	item.route?.sameCandidate === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t["recent.detail.routeSameCandidate"] }),
-																	item.route?.alternativeAugmented === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t["recent.detail.routeAugmented"] }),
-																	item.route?.alternativeModel !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.routeAlternativeModel"], { model: item.route.alternativeModel }) }),
-																	(item.stats.channelFallbacks ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.channelFallback"], { count: compact(item.stats.channelFallbacks ?? 0, lang) }) })
-																]
-															})]
+															children: detailsOpen ? t["recent.detailsHide"] : t["recent.details"]
 														})]
 													}),
 													snapshot?.id === item.id && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-														style: {
-															margin: "8px 0 2px 15px",
-															border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.14))",
-															borderRadius: 8,
-															padding: "8px 10px",
-															background: "var(--dsw-surface-sunken)"
-														},
+														style: panelStyle,
 														children: [
 															snapshot.error !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 																style: {
 																	fontSize: 11,
-																	color: "#e76565"
+																	color: "var(--dsw-alias-state-error-primary)"
 																},
 																children: snapshot.error
 															}),
@@ -4141,7 +4163,7 @@ window.__ModuleLoader__.load({
 																	/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 																		style: {
 																			fontSize: 11,
-																			color: "var(--dsw-text-secondary)"
+																			color: "var(--dsw-alias-label-secondary)"
 																		},
 																		children: [
 																			call.label,
@@ -4165,7 +4187,7 @@ window.__ModuleLoader__.load({
 																			fontSize: 11,
 																			whiteSpace: "pre-wrap",
 																			wordBreak: "break-word",
-																			background: "rgba(0,0,0,.2)",
+																			background: "var(--dsw-alias-markdown-code-block)",
 																			padding: "6px 8px",
 																			borderRadius: 6
 																		},
@@ -4186,7 +4208,7 @@ window.__ModuleLoader__.load({
 																			fontSize: 11,
 																			whiteSpace: "pre-wrap",
 																			wordBreak: "break-word",
-																			background: "rgba(0,0,0,.2)",
+																			background: "var(--dsw-alias-markdown-code-block)",
 																			padding: "6px 8px",
 																			borderRadius: 6
 																		},
@@ -4195,20 +4217,90 @@ window.__ModuleLoader__.load({
 																]
 															}, index))
 														]
+													}),
+													detailsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														style: panelStyle,
+														children: [(item.verdict?.criteria?.length ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+															style: {
+																display: "grid",
+																gridTemplateColumns: "minmax(120px,1fr) auto auto",
+																gap: "4px 14px",
+																marginBottom: 8
+															},
+															children: [
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+																	style: { color: "var(--dsw-alias-label-secondary)" },
+																	children: t["recent.detail.criterion"]
+																}),
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+																	style: { color: "var(--dsw-alias-label-secondary)" },
+																	children: t["recent.detail.score"]
+																}),
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+																	style: { color: "var(--dsw-alias-label-secondary)" },
+																	children: t["recent.detail.threshold"]
+																}),
+																item.verdict.criteria.map((criterion) => {
+																	const threshold = typeof item.verdict.threshold === "number" ? item.verdict.threshold : void 0;
+																	const missed = threshold !== void 0 && criterion.score < threshold;
+																	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+																		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: criterion.id }),
+																		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																			style: { color: missed ? "var(--dsw-alias-state-error-primary)" : "var(--dsw-alias-state-success-primary)" },
+																			children: formatPercentage(criterion.score)
+																		}),
+																		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																			style: { color: "var(--dsw-alias-label-secondary)" },
+																			children: threshold === void 0 ? "—" : formatPercentage(threshold)
+																		})
+																	] }, criterion.id);
+																})
+															]
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+															style: {
+																display: "flex",
+																flexWrap: "wrap",
+																gap: 10,
+																color: "var(--dsw-alias-label-secondary)"
+															},
+															children: [
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.calls"], { calls: compact(item.stats.calls, lang) }) }),
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.tokens"], {
+																	input: compact(item.stats.inputTokens, lang),
+																	cached: compact(item.stats.cachedInputTokens, lang),
+																	output: compact(item.stats.outputTokens, lang)
+																}) }),
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.scoreCache"], {
+																	hits: compact(item.stats.cacheHits, lang),
+																	misses: compact(item.stats.cacheMisses, lang)
+																}) }),
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.prefixCache"], { rate: (item.stats.inputTokens + item.stats.cachedInputTokens > 0 ? (100 * item.stats.cachedInputTokens / (item.stats.inputTokens + item.stats.cachedInputTokens)).toFixed(0) : "0") + "%" }) }),
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.cost"], { cost: money(item.stats.estimatedCostUsd) }) }),
+																item.route && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.route"], {
+																	cycle: item.route.cycleId,
+																	trigger: item.route.trigger,
+																	stage: item.route.stage,
+																	destination: item.route.destination,
+																	attempt: item.route.attempt ?? 1
+																}) }),
+																item.route && item.route.reservedCalls !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.routeReserved"], {
+																	reserved: compact(item.route.reservedCalls, lang),
+																	actual: compact(item.stats.calls, lang)
+																}) }),
+																item.route?.skipReason !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.routeSkip"], { reason: item.route.skipReason }) }),
+																item.route?.replayed !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.routeProcess"], {
+																	replayed: item.route.replayed === "candidate" ? t["recent.detail.replayCandidate"] : item.route.replayed === "original" ? t["recent.detail.replayOriginal"] : t["recent.detail.replayNone"],
+																	generated: compact(item.route.generatedCalls ?? 0, lang),
+																	judges: compact(item.route.judgeCalls ?? 0, lang)
+																}) }),
+																item.route?.sameCandidate === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t["recent.detail.routeSameCandidate"] }),
+																item.route?.alternativeAugmented === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t["recent.detail.routeAugmented"] }),
+																item.route?.alternativeModel !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.routeAlternativeModel"], { model: item.route.alternativeModel }) }),
+																(item.stats.channelFallbacks ?? 0) > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tFormat(t["recent.detail.channelFallback"], { count: compact(item.stats.channelFallbacks ?? 0, lang) }) })
+															]
+														})]
 													})
-												] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-													style: { textAlign: "right" },
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-														style: { fontSize: 12 },
-														children: duration(item.durationMs)
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-														style: {
-															...muted,
-															marginTop: 3
-														},
-														children: dateTime(item.startedAt, lang)
-													})]
-												})]
+												]
 											}, item.id);
 										}), (data?.recent.length ?? 0) === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											style: {
@@ -4235,7 +4327,7 @@ window.__ModuleLoader__.load({
 											style: {
 												padding: "11px 12px",
 												borderRadius: 10,
-												background: "var(--dsw-surface-sunken)"
+												background: "var(--dsw-alias-interactive-bg-hover)"
 											},
 											children: [
 												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4288,7 +4380,7 @@ window.__ModuleLoader__.load({
 					justifyContent: "center",
 					width: size,
 					height: size,
-					color: active ? "var(--dsw-alias-brand-primary, #4f8cff)" : "currentColor"
+					color: active ? "var(--dsw-alias-state-business-primary)" : "currentColor"
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDataOutline16, { size: Math.min(18, size) })
 			});
@@ -4330,20 +4422,20 @@ window.__ModuleLoader__.load({
 			"remote.session",
 			"remote.settings"
 		];
-		/** Poll interval of the process-selection chip while a turn runs (the answer is in-memory). */
-		const PROCESS_ACTIVITY_POLL_MS = 1e3;
+		/** Poll interval of the chat chip while a turn runs (the answer is in-memory and cheap). */
+		const VERIFIER_ACTIVITY_POLL_MS = 1e3;
 		/**
-		* Read the in-flight process-selection cycle of one session.
+		* Read what the plugin is doing for one session (P06 cycle, routed review, final acceptance).
 		*
-		* The chip explains a pause the chat cannot explain by itself (P06 buffers the reply, so no text
-		* streams while it runs), so a failed or refused read is SILENCE, never an error banner: the
-		* composer must not grow noise because a dashboard endpoint was unavailable.
+		* The chip explains a pause the chat cannot explain by itself, so a failed or refused read is
+		* SILENCE, never an error banner: the composer must not grow noise because a dashboard endpoint was
+		* unavailable.
 		* @param rpc - the host RPC handle, when the client exposes one.
 		* @param sessionId - the session to ask about.
 		* @param signal - abort signal of the owning effect.
 		* @returns The activity view, or null when there is nothing (or nothing readable).
 		*/
-		async function readProcessActivity(rpc, sessionId, signal) {
+		async function readVerifierActivity(rpc, sessionId, signal) {
 			const payload = {
 				kind: "process",
 				sessionId
@@ -4355,7 +4447,7 @@ window.__ModuleLoader__.load({
 					if (result && result.ok === false) return null;
 				} catch (rpcError) {
 					if (signal.aborted) return null;
-					console.warn("[llm-verifier] process activity rpc.call failed, trying fetch fallback:", rpcError);
+					console.warn("[llm-verifier] activity rpc.call failed, trying fetch fallback:", rpcError);
 				}
 				const body = await (await fetch("/api/llm-verifier/statistics", {
 					method: "POST",
@@ -4370,19 +4462,57 @@ window.__ModuleLoader__.load({
 			}
 		}
 		/**
-		* The chat-visible half of P06: what the bought cycle is doing while the reply is being buffered.
+		* Dock-card geometry, copied from the host's own composer-stack cards (Todo/Goal/Queue).
+		*
+		* Those cards share one width axis — the chat content column minus the composer clearances and the
+		* four dock insets — and the fallbacks below only matter on a host that does not publish the three
+		* custom properties. Without this clamp the status line stretches to the window edge and its text
+		* sits far left of the composer it belongs to, which is exactly the misplacement it is here to fix.
+		*/
+		const activityDock = {
+			boxSizing: "border-box",
+			width: "calc(100% - var(--dsh-composer-side-clearance, 16px) - var(--dsh-composer-side-clearance, 16px) - var(--dsh-composer-dock-inset, 8px) - var(--dsh-composer-dock-inset, 8px) - var(--dsh-composer-dock-inset, 8px) - var(--dsh-composer-dock-inset, 8px))",
+			margin: "0 auto"
+		};
+		const activityBar = {
+			boxSizing: "border-box",
+			display: "flex",
+			alignItems: "center",
+			gap: 10,
+			width: "100%",
+			maxWidth: "calc(var(--dsh-composer-card-max-width, 952px) - 4 * var(--dsh-composer-dock-inset, 8px))",
+			height: 36,
+			margin: "0 auto",
+			padding: "0 12px",
+			border: "0.5px solid var(--dsw-alias-border-l1)",
+			borderRadius: 12,
+			background: "var(--dsw-specific-tip)"
+		};
+		const activityTextStyle = {
+			minWidth: 0,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			fontSize: 13,
+			lineHeight: "20px",
+			color: "var(--dsw-alias-label-secondary)"
+		};
+		/**
+		* The chat-visible half of the automatic stages: what the plugin is doing for this session right now.
 		*
-		* Polls only while a read can change the answer — while the turn runs, and while a settled cycle is
-		* still inside its server-side TTL — so an idle conversation makes no requests at all.
+		* It answers the pauses the chat cannot explain: a P06 cycle buffers the reply, a routed review and
+		* the final acceptance hold the turn open while the judges run, and a PASSING acceptance otherwise
+		* says nothing at all. Polls only while a read can change the answer — while the turn runs, and
+		* while something is still being shown — so an idle conversation makes no requests.
 		* @param props - the input-dock owner values (the session snapshot) plus the injected RPC handle.
 		*/
-		function ProcessActivityChip({ session, rpc }) {
+		function VerifierActivityChip({ session, rpc }) {
 			const t = dictionaries[useLanguage()];
 			const raw = session?.sessionId;
 			const sessionId = raw === void 0 || raw === null || String(raw) === "" ? void 0 : String(raw);
 			const running = session?.running === true;
 			const [view, setView] = (0, react.useState)(null);
-			const rendered = processActivityText(view, t);
+			const rendered = verifierActivityText(view, t);
 			const showing = rendered !== null;
 			(0, react.useEffect)(() => {
 				if (sessionId === void 0) {
@@ -4396,13 +4526,13 @@ window.__ModuleLoader__.load({
 				let cancelled = false;
 				const controller = new AbortController();
 				const load = async () => {
-					const value = await readProcessActivity(rpc, sessionId, controller.signal);
+					const value = await readVerifierActivity(rpc, sessionId, controller.signal);
 					if (!cancelled) setView(value);
 				};
 				load();
 				const timer = setInterval(() => {
 					load();
-				}, PROCESS_ACTIVITY_POLL_MS);
+				}, VERIFIER_ACTIVITY_POLL_MS);
 				return () => {
 					cancelled = true;
 					clearInterval(timer);
@@ -4415,31 +4545,60 @@ window.__ModuleLoader__.load({
 				rpc
 			]);
 			if (rendered === null) return null;
-			const accent = rendered.tone === "busy" ? "#4f8cff" : rendered.tone === "ok" ? "#77d492" : "var(--dsw-danger, #e85858)";
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: {
-					display: "flex",
-					alignItems: "center",
-					gap: 8,
-					padding: "2px 4px 6px",
-					...muted
-				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					"aria-hidden": true,
-					style: {
-						flex: "0 0 auto",
-						width: 7,
-						height: 7,
-						borderRadius: "50%",
-						background: accent,
-						opacity: rendered.tone === "busy" ? .65 : 1
-					}
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: rendered.text })]
+			const dotState = rendered.tone === "busy" ? "ongoing" : rendered.tone === "ok" ? "done" : "error";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: activityDock,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: activityBar,
+					role: "status",
+					"aria-live": "polite",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+						state: dotState,
+						size: 8
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: activityTextStyle,
+						children: rendered.text
+					})]
+				})
 			});
 		}
+		/**
+		* Marker the blank-composer takeover elects with; the value itself is never read.
+		*
+		* Any non-null selector result elects the entry, so a shared frozen object keeps the selector pure
+		* and allocation-free.
+		*/
+		const BLANK_COMPOSER = Object.freeze({ blank: true });
 		function apply(ctx) {
 			const connection = ctx.get("connection");
 			const remote = ctx.remote;
+			/**
+			* Collapse the resident composer while the statistics View is the active one.
+			*
+			* The Conversation shell renders its composer for EVERY View — a View can only opt into the
+			* overlay geometry (`data-conversation-composer-overlay`), never into its absence — so the input
+			* card covers the very table the dashboard exists to show. The selector-routed composer chain is
+			* the host's own replacement point: while this View is mounted one entry elects an empty
+			* composer, and disposing that entry on unmount restores the real card with its draft intact.
+			* Tried LAST (`priority` is ascending) so a pending approval, question or subagent takeover still
+			* wins the seat. A host that does not know the key leaves the composer in place instead of
+			* failing the page.
+			* @returns Disposer that hands the seat back to the resident composer.
+			*/
+			const blankComposerSeat = () => {
+				try {
+					const dispose = ctx.slots.register({
+						name: "conversation.composer",
+						id: "llm-verifier-blank",
+						priority: 1e3,
+						select: () => BLANK_COMPOSER
+					}, (() => null));
+					return typeof dispose === "function" ? dispose : () => {};
+				} catch (error) {
+					console.warn("[llm-verifier] composer takeover registration failed:", error);
+					return () => {};
+				}
+			};
 			ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",
 				id: "llm-verifier",
@@ -4452,14 +4611,17 @@ window.__ModuleLoader__.load({
 				id: "llm-verifier-statistics",
 				order: 30,
 				label: () => detectLanguage() === "zh" ? zh["slot.statistics"] : en["slot.statistics"],
-				inject: () => ({ rpc: connection.rpc })
+				inject: () => ({
+					rpc: connection.rpc,
+					blankComposerSeat
+				})
 			}, StatisticsPage));
 			ctx.slots.inject("conversation.input.dock", () => ctx.slots.register({
 				name: "conversation.input.dock",
-				id: "llm-verifier-process",
+				id: "llm-verifier-activity",
 				order: 30,
 				inject: () => ({ rpc: connection.rpc })
-			}, ProcessActivityChip));
+			}, VerifierActivityChip));
 			const VERIFIER_TAB_KIND = "llm-verifier";
 			const VERIFIER_TAB_ID = "dsh-llm-verifier";
 			const registerRightSidebar = (tabs) => {
@@ -4504,11 +4666,11 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		exports.GlobalVerifierDashboard = GlobalVerifierDashboard;
-		exports.PROCESS_ACTIVITY_POLL_MS = PROCESS_ACTIVITY_POLL_MS;
-		exports.ProcessActivityChip = ProcessActivityChip;
 		exports.RightSidebarVerifierPanel = RightSidebarVerifierPanel;
 		exports.RightSidebarVerifierTitle = RightSidebarVerifierTitle;
 		exports.StatisticsPage = StatisticsPage;
+		exports.VERIFIER_ACTIVITY_POLL_MS = VERIFIER_ACTIVITY_POLL_MS;
+		exports.VerifierActivityChip = VerifierActivityChip;
 		exports.VerifierSettings = VerifierSettings;
 		exports.VerifierSidebarIcon = VerifierSidebarIcon;
 		exports.WORST_CASE_FINAL_CALLS_PER_JUDGE = WORST_CASE_FINAL_CALLS_PER_JUDGE;