dsh-plugin-teamflow 0.1.6 → 0.1.8

package/lib/client.js

@@ -218,6 +218,60 @@ window.__ModuleLoader__.load({
 					p("sessionId")
 				],
 				result: strict
+			},
+			{
+				id: "dsh-plugin-teamflow#teamflow/products",
+				service: "teamflow",
+				namespace: "teamflow",
+				method: "products",
+				invocation: { kind: "direct" },
+				parameters: [p("sessionId")],
+				result: strict
+			},
+			{
+				id: "dsh-plugin-teamflow#teamflow/productView",
+				service: "teamflow",
+				namespace: "teamflow",
+				method: "productView",
+				invocation: { kind: "direct" },
+				parameters: [p("product")],
+				result: strict
+			},
+			{
+				id: "dsh-plugin-teamflow#teamflow/productRunDetail",
+				service: "teamflow",
+				namespace: "teamflow",
+				method: "productRunDetail",
+				invocation: { kind: "direct" },
+				parameters: [p("product"), p("runId")],
+				result: strict
+			},
+			{
+				id: "dsh-plugin-teamflow#teamflow/productStageDetail",
+				service: "teamflow",
+				namespace: "teamflow",
+				method: "productStageDetail",
+				invocation: { kind: "direct" },
+				parameters: [
+					p("product"),
+					p("runId"),
+					p("seq")
+				],
+				result: strict
+			},
+			{
+				id: "dsh-plugin-teamflow#teamflow/productItemDetail",
+				service: "teamflow",
+				namespace: "teamflow",
+				method: "productItemDetail",
+				invocation: { kind: "direct" },
+				parameters: [
+					p("product"),
+					p("kind"),
+					p("id"),
+					p("sessionId")
+				],
+				result: strict
 			}
 		]);
 		/** client 端 $mount 使用的贡献对象。 */
@@ -226,27 +280,14 @@ window.__ModuleLoader__.load({
 			descriptors: TEAMFLOW_DESCRIPTORS
 		});
 		//#endregion
-		//#region client/index.tsx
+		//#region client/shared.tsx
 		/**
-		* dsh-plugin-teamflow — browser half（v0.7 视觉重构：「精密工程控制台」）。
-		*
-		* 注册 conversation.view tab「🏭 团队工作台」（与 chat / 轨迹并列）：
-		* - 流水线图形工作流：阶段泳道 + 节点卡片（状态/耗时/token/子代理会话）+ 实时轮询
-		* - Backlog 拖拽看板：需求/任务/缺陷三组状态泳道，卡片拖拽流转（原生 HTML5 DnD，零依赖）
-		* - 成本中心：每阶段 token + 总计 + 运行时长
-		* - 人工介入中心：needs-human 项聚合 + 一键终态
-		* - 历史 run 切换
+		* dsh-plugin-teamflow — browser half 共享展示层（主题 token / 状态词表 / 格式化）。
 		*
-		* 视觉：全部使用 DSH 主题 token（--dsw-alias-*，自动适配深浅色）。
-		* Remote 接入：$mount 后 ctx.get('remote.teamflow') 取全局实例传给组件
-		* （不能 inject 'remote.teamflow'——自挂载自注入会让 fiber 死锁）。
+		* 会话内工作台（index.tsx）与全局面板（panel.tsx）共用：**只放无状态纯展示件**，
+		* 不放任何 Remote 调用或会话上下文逻辑——两边数据来源不同（sessionId / productKey），
+		* 展示语言必须一致。
 		*/
-		const inject = [
-			"remote",
-			"slots",
-			"sessions",
-			"locale"
-		];
 		const T = {
 			bg: "var(--dsw-alias-bg-base)",
 			layer1: "var(--dsw-alias-bg-layer-1)",
@@ -391,7 +432,7 @@ window.__ModuleLoader__.load({
 			gap: 6,
 			flexWrap: "wrap"
 		};
-		/** 状态徽章：半透明底 + 状态色文字 + 圆角 pill。 */
+		/** 状态徽章：半透明底 + 状态色文字 + 圆角 pill（超宽可省略：窄列/窄卡里不顶破外层）。 */
 		const chip = (text, color, opts = {}) => h("span", { style: {
 			display: "inline-flex",
 			alignItems: "center",
@@ -404,13 +445,17 @@ window.__ModuleLoader__.load({
 			background: `color-mix(in srgb, ${color} 14%, transparent)`,
 			color,
 			whiteSpace: "nowrap",
+			maxWidth: "100%",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
 			...opts.style || {}
 		} }, opts.dot ? h("span", { style: {
 			width: 5,
 			height: 5,
 			borderRadius: 999,
 			background: color,
-			display: "inline-block"
+			display: "inline-block",
+			flex: "0 0 auto"
 		} }) : null, text);
 		/** 可折叠长文本：默认只显示前几行预览，「展开全文」/「收起」双向切换（数据不动，纯展示层——summary/需求原文等富文本不再铺满抽屉）。 */
 		function FoldableText({ text, charLimit = 280, lineLimit = 5, style }) {
@@ -459,97 +504,1496 @@ window.__ModuleLoader__.load({
 					padding: 0,
 					cursor: "pointer"
 				}
-			}, `展开全文${more}`));
-		}
-		function fmtDur(a, b) {
-			if (!a) return "";
-			const ms = (b || Date.now()) - a;
-			if (ms < 0) return "";
-			const s = Math.floor(ms / 1e3);
-			if (s < 60) return `${s}s`;
-			return `${Math.floor(s / 60)}m${s % 60}s`;
-		}
-		function fmtTokens(n) {
-			if (n === null || n === void 0) return "";
-			if (n >= 1e6) return `${(n / 1e6).toFixed(2)}M`;
-			if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
-			return String(n);
-		}
-		/** 官方口径计费合计（billed input + output）。 */
-		function totalTokens(u) {
-			return (u.input || 0) + (u.cacheRead || 0) + (u.cacheWrite || 0) + (u.output || 0);
+			}, `展开全文${more}`));
+		}
+		function fmtTime(t) {
+			if (!t) return "—";
+			const d = new Date(t);
+			return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}:${String(d.getSeconds()).padStart(2, "0")}`;
+		}
+		function fmtDur(a, b) {
+			if (!a) return "";
+			const ms = (b || Date.now()) - a;
+			if (ms < 0) return "";
+			const s = Math.floor(ms / 1e3);
+			if (s < 60) return `${s}s`;
+			return `${Math.floor(s / 60)}m${s % 60}s`;
+		}
+		function fmtTokens(n) {
+			if (n === null || n === void 0) return "";
+			if (n >= 1e6) return `${(n / 1e6).toFixed(2)}M`;
+			if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+			return String(n);
+		}
+		/** 官方口径计费合计（billed input + output）。 */
+		function totalTokens(u) {
+			return (u.input || 0) + (u.cacheRead || 0) + (u.cacheWrite || 0) + (u.output || 0);
+		}
+		/** 官方口径工具函数（与 DeepSeek usage 账单对齐，零额外概念）：
+		*  - u.input       : 输入（缓存未命中）
+		*  - u.cacheRead   : 输入（缓存命中）
+		*  - u.cacheWrite  : 输入写入缓存
+		*  - u.output      : 输出
+		*  billed input = input + cacheRead + cacheWrite；命中率 = cacheRead / (input + cacheRead)。
+		*/
+		function hitRate(u) {
+			const total = (u.input || 0) + (u.cacheRead || 0);
+			return total > 0 ? Math.round((u.cacheRead || 0) / total * 100) : null;
+		}
+		function usageDetail(s) {
+			const k = (n) => n === null || n === void 0 ? "—" : fmtTokens(n);
+			if (s.usage) {
+				const u = s.usage;
+				const hit = hitRate(u);
+				return `输入(未命中) ${k(u.input)} / 输入(命中) ${k(u.cacheRead)} / 写缓存 ${k(u.cacheWrite)} / 输出 ${k(u.output)} · ${u.calls} 次调用${hit !== null ? ` · 缓存命中 ${hit}%` : ""}`;
+			}
+			return "无 usage 明细";
+		}
+		/** 节点卡主 token 行：官方口径 —— 输入(未命中)/输入(命中)/输出 + 缓存命中率。 */
+		function stageUsageLine(s) {
+			const u = s && s.usage;
+			if (u && (u.input || u.cacheRead || u.cacheWrite || u.output)) {
+				const hit = hitRate(u);
+				return `⇅${fmtTokens(u.input)} ⇅${fmtTokens(u.cacheRead)} ⬆${fmtTokens(u.output)}${hit !== null ? ` ·${hit}%` : ""}`;
+			}
+			return null;
+		}
+		const ROLE_NAME = {
+			pm: "产品",
+			design: "设计",
+			arch: "架构",
+			tech: "方案",
+			dev: "开发",
+			qa: "测试",
+			acceptance: "验收",
+			other: "其他"
+		};
+		const roleUsage = (u) => {
+			if (!u) return "";
+			const hit = hitRate(u);
+			return `⇅${fmtTokens(u.input || 0)}/${fmtTokens(u.cacheRead || 0)}·⬆${fmtTokens(u.output || 0)}${hit !== null ? `·${hit}%` : ""}`;
+		};
+		/** 任务卡按角色累计的真实 token 摘要（官方口径：未命中/命中输入 + 输出 + 命中率）。 */
+		function byRoleLine(task) {
+			const roles = task && task.byRole || {};
+			return Object.keys(roles).filter((k) => roles[k] && roles[k].input + roles[k].output + roles[k].cacheRead + roles[k].cacheWrite > 0).map((k) => `${ROLE_NAME[k] || k} ${roleUsage(roles[k])}`).join(" · ");
+		}
+		/** 多阶段 usage 汇总（官方口径）。 */
+		function totalUsage(stages) {
+			const t = {
+				input: 0,
+				cacheRead: 0,
+				cacheWrite: 0,
+				output: 0,
+				calls: 0
+			};
+			for (const s of stages || []) {
+				const u = s && s.usage;
+				if (!u) continue;
+				t.input += u.input || 0;
+				t.cacheRead += u.cacheRead || 0;
+				t.cacheWrite += u.cacheWrite || 0;
+				t.output += u.output || 0;
+				t.calls += u.calls || 0;
+			}
+			return t;
+		}
+		const stText = (s) => STATUS_TEXT[s] || s;
+		const stColor = (s) => STATUS_COLOR[s] || T.text2;
+		//#endregion
+		//#region client/panel.tsx
+		/**
+		* dsh-plugin-teamflow — 全局面板 + 右栏 run 详情 tab（v0.1.8 ①）。
+		*
+		* 与 conversation.view tab（会话内工作台）的分工：
+		* - 全局面板挂在**应用外壳**的 root slot 上：`sidebar.panellist`（侧边栏图标）+
+		*   `main`（中央主区，keyed，**必须与 panellist 同 id**——宿主 `layout.selectPanel`
+		*   对未注册的 main key 直接抛错）。它没有会话上下文，因此数据面按**产品线 key**
+		*   寻址（`remote.products/productView/...`），跨会话可用。
+		* - 右栏 run 详情 tab：tab 类型进 `ctx.sidebarRightTabs`，正文进 keyed seat
+		*   `sidebar.right.pane.tab`；地址由 host 生成（`dsh-resource://teamflow/run/<产品线>/<runId>`），
+		*   与产物预览同一条原则——client 不拼地址。右侧栏是 AppFrame 级 root slot，
+		*   全局面板占着中央区时它依然挂载（唯一失败态是"没有挂载会话"，此时降级为面板内联详情）。
+		*/
+		const RUN_TAB_ID = "dsh-plugin-teamflow/run";
+		const RUN_TAB_KIND = "teamflow-run";
+		const RUN_TAB_PATTERN = "dsh-resource://teamflow/run/**";
+		/** 解析 host 生成的 run 地址 → { product, runId }（不合法 → null）。 */
+		function parseRunAddress(address) {
+			const m = /^dsh-resource:\/\/teamflow\/run\/([^/]+)\/([^/?#]+)$/.exec(String(address || ""));
+			if (!m) return null;
+			try {
+				return {
+					product: decodeURIComponent(m[1]),
+					runId: decodeURIComponent(m[2])
+				};
+			} catch (e) {
+				return null;
+			}
+		}
+		/** 右栏 tab 类型定义（类型本身；正文在 sidebar.right.pane.tab 的 keyed seat）。 */
+		function runTabDefinition() {
+			return {
+				id: RUN_TAB_ID,
+				kind: RUN_TAB_KIND,
+				priority: "extension",
+				patterns: [RUN_TAB_PATTERN],
+				title: (address) => {
+					const p = parseRunAddress(address);
+					return p ? `TeamFlow · ${p.runId.slice(0, 14)}` : "TeamFlow Run";
+				}
+			};
+		}
+		/** Typert remote 信封解包（与会话内工作台同一约定）。
+		* 空信封（`{ok:true}` 但没有 `value`）是**真实故障态**：host 方法返回了 `undefined` / 结果被丢弃——
+		* 此时不能静默返回 undefined（调用方会把它再包成「未知错误」，丢掉定位信息），故显式报出原始信封。 */
+		function unwrap$1(res, what) {
+			if (!res || !res.ok) {
+				let detail = "未知错误";
+				try {
+					detail = res && res.error && (res.error.message || res.error.code) || JSON.stringify(res) || "未知错误";
+				} catch (e) {}
+				try {
+					console.warn("[teamflow] remote 调用失败", what, res);
+				} catch (e) {}
+				throw new Error(`${what || "remote"} 调用失败：${detail}`);
+			}
+			if (res.value === void 0) {
+				try {
+					console.warn("[teamflow] remote 返回空信封（ok 但无 value）", what, res);
+				} catch (e) {}
+				let raw = "";
+				try {
+					raw = JSON.stringify(res);
+				} catch (e) {
+					raw = String(res);
+				}
+				throw new Error(`${what || "remote"} 返回空结果（ok=true 但无 value；原始信封=${raw}）`);
+			}
+			return res.value;
+		}
+		/** 全局面板图标：三条泳道 + 节点（与工作台「流水线」语义一致），跟随选中态配色。 */
+		function TeamflowPanelIcon({ size = 16, active = false }) {
+			return h("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: active ? "currentColor" : "currentColor",
+				strokeWidth: 1.6,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				focusable: "false"
+			}, h("rect", {
+				x: 3,
+				y: 4,
+				width: 5.2,
+				height: 4,
+				rx: 1.2,
+				opacity: active ? 1 : .85
+			}), h("rect", {
+				x: 9.4,
+				y: 10,
+				width: 5.2,
+				height: 4,
+				rx: 1.2,
+				opacity: active ? 1 : .85
+			}), h("rect", {
+				x: 3,
+				y: 16,
+				width: 5.2,
+				height: 4,
+				rx: 1.2,
+				opacity: active ? 1 : .85
+			}), h("path", { d: "M8.4 6h3.3a1 1 0 0 1 1 1v3.4" }), h("path", { d: "M8.4 18h3.3a1 1 0 0 0 1-1v-3.4" }), h("path", { d: "M14.6 12h4.4" }));
+		}
+		const panelBtn = {
+			font: "inherit",
+			fontSize: 11,
+			fontWeight: 600,
+			padding: "3px 9px",
+			borderRadius: 7,
+			cursor: "pointer",
+			border: `1px solid ${T.border}`,
+			background: T.layer1,
+			color: T.text,
+			whiteSpace: "nowrap",
+			lineHeight: "16px"
+		};
+		const brandBtn = {
+			...panelBtn,
+			border: `1px solid color-mix(in srgb, ${T.brand} 40%, transparent)`,
+			background: `color-mix(in srgb, ${T.brand} 12%, transparent)`,
+			color: T.brand
+		};
+		const sectionTitle = (text, extra) => h("div", { style: {
+			...flexRow,
+			justifyContent: "space-between",
+			margin: "14px 0 8px"
+		} }, h("div", { style: {
+			fontSize: 12,
+			fontWeight: 700,
+			color: T.text,
+			letterSpacing: ".02em"
+		} }, text), extra || null);
+		const muted = (text, style = {}) => h("div", { style: {
+			fontSize: 11,
+			color: T.text2,
+			lineHeight: 1.6,
+			...style
+		} }, text);
+		const runUsageText = (u) => {
+			if (!u || !(u.input || u.cacheRead || u.cacheWrite || u.output)) return "无 token 数据";
+			const hit = hitRate(u);
+			return `⇅${fmtTokens(u.input)} ⇅${fmtTokens(u.cacheRead)} ⬆${fmtTokens(u.output)}${hit !== null ? ` ·${hit}%` : ""} · ${u.calls} 次`;
+		};
+		const RUN_PREVIEW = 8;
+		const TERMINAL_STATUSES = [
+			"accepted",
+			"closed",
+			"verified",
+			"cancelled"
+		];
+		function ProductRail({ products, current, loadingKey, onSelect, onRefresh, busy }) {
+			return h("div", { style: {
+				width: 236,
+				flex: "0 0 236px",
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column",
+				borderRight: `1px solid ${T.border}`,
+				background: `color-mix(in srgb, ${T.layer1} 40%, transparent)`
+			} }, h("div", { style: {
+				...flexRow,
+				justifyContent: "space-between",
+				padding: "10px 12px 8px"
+			} }, h("span", { style: {
+				fontSize: 11.5,
+				fontWeight: 700,
+				color: T.text2
+			} }, `产品线 · ${products.length}`), h("button", {
+				style: panelBtn,
+				onClick: onRefresh,
+				disabled: busy,
+				title: "重新扫描 $DSH_HOME/teamflow"
+			}, busy ? "刷新中" : "刷新")), h("div", { style: {
+				flex: 1,
+				minHeight: 0,
+				overflowY: "auto",
+				padding: "0 8px 12px"
+			} }, products.length === 0 ? muted("还没有产品线。在某个工作区跑过一次流水线后，这里会出现对应产品线（$DSH_HOME/teamflow/<key>）。", { padding: "10px 4px" }) : products.map((p) => {
+				const on = p.key === current;
+				return h("div", {
+					key: p.key,
+					onClick: () => onSelect(p.key),
+					title: p.path || p.key,
+					style: {
+						padding: "8px 10px",
+						marginBottom: 6,
+						borderRadius: 9,
+						cursor: "pointer",
+						border: `1px solid ${on ? `color-mix(in srgb, ${T.brand} 45%, transparent)` : T.border}`,
+						background: on ? `color-mix(in srgb, ${T.brand} 10%, ${T.layer1})` : "transparent"
+					}
+				}, h("div", { style: {
+					...flexRow,
+					justifyContent: "space-between"
+				} }, h("span", { style: {
+					fontSize: 12,
+					fontWeight: 600,
+					color: T.text,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				} }, p.title || p.key), p.activeRuns > 0 ? chip(`运行 ${p.activeRuns}`, T.brand, { dot: true }) : null), h("div", { style: {
+					fontSize: 10,
+					color: T.text2,
+					fontFamily: MONO,
+					marginTop: 2,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				} }, p.key), h("div", { style: {
+					...flexRow,
+					gap: 8,
+					marginTop: 3,
+					fontSize: 10,
+					color: T.text2
+				} }, h("span", null, `run ${p.totalRuns}`), p.updatedAt ? h("span", null, `更新 ${fmtTime(p.updatedAt)}`) : null, p.key === loadingKey ? h("span", { style: {
+					color: T.brand,
+					fontWeight: 600
+				} }, "读取中…") : null), p.lastRequirement ? h("div", { style: {
+					fontSize: 10.5,
+					color: T.text2,
+					marginTop: 3,
+					lineHeight: 1.45,
+					display: "-webkit-box",
+					WebkitLineClamp: 2,
+					WebkitBoxOrient: "vertical",
+					overflow: "hidden"
+				} }, p.lastRequirement) : null, p.lastVerdict ? h("div", { style: { marginTop: 4 } }, chip(`验收 ${p.lastVerdict}`, stColor(p.lastVerdict === "accepted" ? "accepted" : p.lastVerdict))) : null);
+			})));
+		}
+		function RunList({ runs, activeRunId, onOpenRun, onInlineRun }) {
+			if (!runs.length) return muted("该产品线还没有 run 记录。", { padding: "2px 2px 8px" });
+			return h("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 6
+			} }, runs.map((r) => {
+				const on = r.id === activeRunId;
+				const active = r.status === "running" || r.status === "pending";
+				return h("div", {
+					key: r.id,
+					style: {
+						padding: "8px 11px",
+						borderRadius: 9,
+						border: `1px solid ${on ? `color-mix(in srgb, ${T.brand} 45%, transparent)` : T.border}`,
+						borderLeft: `3px solid ${stColor(r.status)}`,
+						background: on ? `color-mix(in srgb, ${T.brand} 8%, ${T.layer1})` : T.layer1,
+						display: "flex",
+						alignItems: "center",
+						gap: 10,
+						cursor: "pointer"
+					},
+					onClick: () => onInlineRun(r)
+				}, h("div", { style: {
+					flex: 1,
+					minWidth: 0
+				} }, h("div", { style: {
+					...flexRow,
+					gap: 6
+				} }, chip(RUN_STATUS_TEXT[r.status] || r.status, stColor(r.status), { dot: true }), r.mode ? chip(String(r.mode), T.text2) : null, h("span", { style: {
+					fontFamily: MONO,
+					fontSize: 10,
+					color: T.text2
+				} }, r.id), active ? h("span", { style: {
+					fontSize: 10,
+					color: T.brand
+				} }, "进行中") : null), h("div", { style: {
+					fontSize: 11.5,
+					color: T.text,
+					marginTop: 3,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				} }, r.requirement || "(无需求描述)"), h("div", { style: {
+					...flexRow,
+					gap: 10,
+					marginTop: 3,
+					fontSize: 10,
+					color: T.text2,
+					fontFamily: MONO
+				} }, h("span", null, `阶段 ${r.doneStages}/${r.stageCount}`), h("span", null, runUsageText(r.usage)), h("span", null, `${fmtTime(r.startedAt)}${r.endedAt ? ` → ${fmtTime(r.endedAt)}` : ""} ${fmtDur(r.startedAt, r.endedAt)}`))), h("button", {
+					style: brandBtn,
+					title: "跳到该 run 的发起会话，并在那个会话的右侧栏打开详情（右侧栏是会话级的：挂到无关会话上没有意义）",
+					onClick: (e) => {
+						e.stopPropagation();
+						onOpenRun(r);
+					}
+				}, "去会话右栏"));
+			}));
+		}
+		function BacklogCard({ kind, item, onOpen }) {
+			const color = stColor(item.status);
+			return h("div", {
+				onClick: () => onOpen(kind, item.id),
+				style: {
+					padding: "6px 9px",
+					borderRadius: 8,
+					border: `1px solid ${T.border}`,
+					borderLeft: `3px solid ${color}`,
+					background: T.layer1,
+					cursor: "pointer",
+					minWidth: 0,
+					boxSizing: "border-box",
+					maxWidth: "100%",
+					overflow: "hidden"
+				}
+			}, h("div", { style: {
+				...flexRow,
+				gap: 5,
+				minWidth: 0
+			} }, h("span", { style: {
+				fontFamily: MONO,
+				fontSize: 10,
+				color: T.text2,
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			} }, item.id), chip(stText(item.status), color, { dot: true }), kind === "bug" && item.severity ? chip(String(item.severity), stColor("rework")) : null), h("div", { style: {
+				fontSize: 11.5,
+				color: T.text,
+				marginTop: 3,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			} }, item.title || item.id), (() => {
+				const roles = kind === "task" ? byRoleLine(item) : "";
+				return roles ? h("div", {
+					title: roles,
+					style: {
+						fontSize: 10,
+						color: T.text2,
+						fontFamily: MONO,
+						marginTop: 3,
+						minWidth: 0,
+						overflowWrap: "anywhere",
+						wordBreak: "break-word"
+					}
+				}, roles) : null;
+			})(), h("div", { style: {
+				...flexRow,
+				gap: 6,
+				marginTop: 3,
+				fontSize: 10,
+				color: T.text2
+			} }, item.devAssign ? h("span", null, `dev ${item.devAssign}`) : null, item.qaAssign ? h("span", null, `qa ${item.qaAssign}`) : null, item.acceptBy ? h("span", null, `验收 ${item.acceptBy}`) : null, item.retries ? h("span", { style: { color: T.warn } }, `重试 ${item.retries}`) : null, item.humanIntervention ? h("span", { style: { color: T.error } }, "需人工") : null));
+		}
+		/** 可点筛选徽章（多选）：单击切换该状态，选中态用状态色实心；再点取消。 */
+		const filterChip = (text, color, on, onToggle) => h("button", {
+			onClick: onToggle,
+			title: on ? "点击取消该状态筛选" : "点击只看该状态（可多选）",
+			style: {
+				font: "inherit",
+				fontSize: 11,
+				fontWeight: 600,
+				padding: "1px 8px",
+				borderRadius: 999,
+				cursor: "pointer",
+				lineHeight: "16px",
+				whiteSpace: "nowrap",
+				border: `1px solid ${on ? `color-mix(in srgb, ${color} 55%, transparent)` : T.border}`,
+				background: on ? `color-mix(in srgb, ${color} 26%, transparent)` : "transparent",
+				color: on ? color : T.text2
+			}
+		}, text);
+		/** run 状态展示顺序（可行动的在前）。 */
+		const RUN_STATUS_ORDER = [
+			"running",
+			"pending",
+			"interrupted",
+			"failed",
+			"cancelled",
+			"completed",
+			"superseded"
+		];
+		function BacklogGroups({ backlog, onOpen, productKey }) {
+			const [showDone, setShowDone] = react.default.useState({});
+			const [filters, setFilters] = react.default.useState({});
+			react.default.useEffect(() => {
+				setShowDone({});
+				setFilters({});
+			}, [productKey]);
+			if (!backlog) return null;
+			const groups = [
+				["req", backlog.requirements || []],
+				["task", (backlog.tasks || []).filter((t) => t.type !== "subtask")],
+				["bug", backlog.bugs || []]
+			];
+			if (!groups.reduce((a, [, arr]) => a + arr.length, 0)) return muted("backlog 为空（该产品线还没有立项卡片）。", { padding: "2px 2px 8px" });
+			return h("div", null, groups.map(([kind, list]) => {
+				if (!list.length) return null;
+				const done = list.filter((it) => TERMINAL_STATUSES.indexOf(it.status) !== -1 && !it.humanIntervention);
+				const active = list.filter((it) => done.indexOf(it) === -1);
+				const open = showDone[kind] === true;
+				const sel = filters[kind] || [];
+				const selSet = new Set(sel);
+				const filtering = sel.length > 0;
+				const matched = filtering ? list.filter((it) => selSet.has(it.status)) : list;
+				const byStatus = {};
+				for (const it of list) byStatus[it.status] = (byStatus[it.status] || 0) + 1;
+				const toggle = (st) => setFilters((m) => {
+					const cur = new Set(m[kind] || []);
+					if (cur.has(st)) cur.delete(st);
+					else cur.add(st);
+					return {
+						...m,
+						[kind]: [...cur]
+					};
+				});
+				const visible = filtering ? matched : open ? list : active;
+				return h("div", {
+					key: kind,
+					style: { marginBottom: 12 }
+				}, h("div", { style: {
+					...flexRow,
+					gap: 6,
+					marginBottom: 6,
+					minWidth: 0
+				} }, h("span", { style: {
+					fontSize: 11.5,
+					fontWeight: 700,
+					color: T.text,
+					flex: "0 0 auto"
+				} }, `${KIND_TITLE[kind]} · ${list.length}`), h("span", { style: {
+					fontSize: 10,
+					color: T.text2,
+					flex: "0 0 auto"
+				} }, `活动 ${active.length}`), ...Object.keys(byStatus).map((s) => filterChip(`${stText(s)} ${byStatus[s]}`, stColor(s), selSet.has(s), () => toggle(s))), filtering ? h("button", {
+					style: {
+						...panelBtn,
+						marginLeft: "auto",
+						flex: "0 0 auto"
+					},
+					title: "清除本组筛选",
+					onClick: () => setFilters((m) => ({
+						...m,
+						[kind]: []
+					}))
+				}, `筛选中 ${sel.length} 项 · 显示 ${matched.length}/${list.length} × 清除`) : done.length ? h("button", {
+					style: {
+						...panelBtn,
+						marginLeft: "auto",
+						flex: "0 0 auto"
+					},
+					title: open ? "收起已完成/已关闭卡片" : "展开已完成/已关闭卡片",
+					onClick: () => setShowDone((m) => ({
+						...m,
+						[kind]: !open
+					}))
+				}, open ? `收起已完成 ${done.length}` : `已完成 ${done.length} ▸`) : null), visible.length ? h("div", { style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(auto-fill, minmax(228px, 1fr))",
+					gap: 6
+				} }, visible.map((it) => h(BacklogCard, {
+					key: it.id,
+					kind,
+					item: it,
+					onOpen
+				}))) : muted("该筛选下没有卡片。", { fontSize: 10.5 }));
+			}));
+		}
+		function ItemDetailPane({ det, openArtifact, onClose }) {
+			if (!det) return null;
+			const row = (k, v) => v === null || v === void 0 || v === "" ? null : h("div", { style: {
+				...flexRow,
+				gap: 6,
+				fontSize: 11
+			} }, h("span", { style: {
+				color: T.text2,
+				flex: "0 0 auto"
+			} }, k), h("span", { style: {
+				color: T.text,
+				minWidth: 0,
+				wordBreak: "break-word"
+			} }, String(v)));
+			return h("div", { style: {
+				padding: "10px 12px",
+				display: "flex",
+				flexDirection: "column",
+				gap: 8,
+				minHeight: 0
+			} }, h("div", { style: {
+				...flexRow,
+				justifyContent: "space-between"
+			} }, h("div", { style: {
+				...flexRow,
+				gap: 6
+			} }, h("span", { style: {
+				fontFamily: MONO,
+				fontSize: 11,
+				color: T.text2
+			} }, det.id), chip(stText(det.status), stColor(det.status), { dot: true }), h("span", { style: {
+				fontSize: 10.5,
+				color: T.text2
+			} }, KIND_TITLE[det.kind] || det.kind)), h("button", {
+				style: panelBtn,
+				onClick: onClose
+			}, "关闭")), h("div", { style: {
+				fontSize: 13,
+				fontWeight: 600,
+				color: T.text,
+				lineHeight: 1.45
+			} }, det.title), h("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 3
+			} }, row("需求", det.reqId), row("负责人", det.owner), row("开发", det.devAssign), row("测试", det.qaAssign), row("验收", det.assignBy), row("重试", det.retries), row("任务夹", det.runDocs)), det.spec ? h("div", null, h("div", { style: {
+				fontSize: 11,
+				color: T.text2,
+				marginBottom: 3
+			} }, "规格"), h(FoldableText, { text: det.spec })) : null, det.summary ? h("div", null, h("div", { style: {
+				fontSize: 11,
+				color: T.text2,
+				marginBottom: 3
+			} }, "结论摘要"), h(FoldableText, { text: det.summary })) : null, det.artifacts && det.artifacts.length ? h("div", null, h("div", { style: {
+				fontSize: 11,
+				color: T.text2,
+				marginBottom: 4
+			} }, `任务夹产物 · ${det.artifacts.length}`), h("div", { style: {
+				...flexRow,
+				gap: 5
+			} }, det.artifacts.map((a) => h("button", {
+				key: a.name,
+				style: brandBtn,
+				title: `${a.address}\n（跳到产物所属会话后在该会话右侧栏打开）`,
+				onClick: () => openArtifact && openArtifact(a.address, a.name, det.runInfo && det.runInfo.ownerSession || null)
+			}, a.name)))) : muted("该条目没有可预览的任务夹产物（或缺少会话上下文，无法生成文件地址）。"), det.subtasks && det.subtasks.length ? h("div", null, h("div", { style: {
+				fontSize: 11,
+				color: T.text2,
+				marginBottom: 4
+			} }, `子卡 · ${det.subtasks.length}`), h("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 4
+			} }, det.subtasks.map((s) => h("div", {
+				key: s.id,
+				style: {
+					...flexRow,
+					gap: 6,
+					fontSize: 11,
+					padding: "4px 7px",
+					borderRadius: 7,
+					background: T.layer1,
+					border: `1px solid ${T.border}`
+				}
+			}, h("span", { style: {
+				fontFamily: MONO,
+				fontSize: 10,
+				color: T.text2
+			} }, s.id), chip(stText(s.status), stColor(s.status)), h("span", { style: {
+				color: T.text,
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			} }, s.title), s.failed ? chip("失败", T.error) : null)))) : null, det.bugs && det.bugs.length ? h("div", null, h("div", { style: {
+				fontSize: 11,
+				color: T.text2,
+				marginBottom: 4
+			} }, `关联缺陷 · ${det.bugs.length}`), h("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 4
+			} }, det.bugs.map((b) => h("div", {
+				key: b.id,
+				style: {
+					...flexRow,
+					gap: 6,
+					fontSize: 11,
+					padding: "4px 7px",
+					borderRadius: 7,
+					background: T.layer1,
+					border: `1px solid ${T.border}`
+				}
+			}, h("span", { style: {
+				fontFamily: MONO,
+				fontSize: 10,
+				color: T.text2
+			} }, b.id), b.severity ? chip(String(b.severity), T.warn) : null, chip(stText(b.status), stColor(b.status)), h("span", { style: {
+				color: T.text,
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			} }, b.title))))) : null, det.events && det.events.length ? h("div", null, h("div", { style: {
+				fontSize: 11,
+				color: T.text2,
+				marginBottom: 4
+			} }, `流转时间线 · 最近 ${Math.min(det.events.length, 30)} 条`), h("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 3,
+				fontFamily: MONO,
+				fontSize: 10,
+				color: T.text2
+			} }, det.events.slice(-30).map((e, i) => h("div", { key: i }, `${fmtTime(e.at)} ${e.from || "—"} → ${e.to || "—"}${e.by ? ` · ${e.by}` : ""}${e.reason ? ` · ${e.reason}` : ""}`)))) : null);
+		}
+		function RunDetailPane({ snap, product, api }) {
+			const [sel, setSel] = react.default.useState(null);
+			const [err, setErr] = react.default.useState(null);
+			react.default.useEffect(() => {
+				setSel(null);
+				setErr(null);
+			}, [snap && snap.id]);
+			if (!snap) return muted("未找到该 run（可能已被清理，或地址已过期）。", { padding: 12 });
+			const stages = snap.stages || [];
+			const totals = stages.reduce((a, s) => {
+				const u = s.usage;
+				if (u) {
+					a.input += u.input || 0;
+					a.cacheRead += u.cacheRead || 0;
+					a.cacheWrite += u.cacheWrite || 0;
+					a.output += u.output || 0;
+					a.calls += u.calls || 0;
+				}
+				return a;
+			}, {
+				input: 0,
+				cacheRead: 0,
+				cacheWrite: 0,
+				output: 0,
+				calls: 0
+			});
+			const openStage = async (s) => {
+				if (!api) return;
+				try {
+					setSel(await api.stageDetail(snap.id, s.seq));
+					setErr(null);
+				} catch (e) {
+					setErr(String(e && e.message || e));
+				}
+			};
+			const logs = (snap.logs || []).slice(-60);
+			return h("div", { style: {
+				padding: "10px 12px",
+				display: "flex",
+				flexDirection: "column",
+				gap: 10,
+				minHeight: 0,
+				overflowY: "auto"
+			} }, h("div", { style: {
+				...flexRow,
+				gap: 6
+			} }, chip(RUN_STATUS_TEXT[snap.status] || snap.status, stColor(snap.status), { dot: true }), snap.options && snap.options.mode ? chip(String(snap.options.mode), T.text2) : null, h("span", { style: {
+				fontFamily: MONO,
+				fontSize: 10.5,
+				color: T.text2
+			} }, snap.id), product ? h("span", { style: {
+				fontSize: 10,
+				color: T.text2,
+				fontFamily: MONO
+			} }, product) : null), h("div", { style: {
+				fontSize: 12,
+				color: T.text,
+				lineHeight: 1.5
+			} }, snap.requirement || "(无需求描述)"), h("div", { style: {
+				...flexRow,
+				gap: 12,
+				fontSize: 10.5,
+				color: T.text2,
+				fontFamily: MONO
+			} }, h("span", null, `${fmtTime(snap.startedAt)}${snap.endedAt ? ` → ${fmtTime(snap.endedAt)}` : " → 进行中"} · ${fmtDur(snap.startedAt, snap.endedAt)}`), h("span", null, `阶段 ${stages.filter((s) => s.status === "done").length}/${stages.length}`), h("span", null, `子代理 ${snap.agentsStarted || 0}`)), h("div", { style: {
+				...flexRow,
+				gap: 10,
+				fontSize: 10.5,
+				color: T.text2,
+				fontFamily: MONO,
+				padding: "6px 8px",
+				borderRadius: 8,
+				background: `color-mix(in srgb, ${T.layer2} 60%, transparent)`,
+				border: `1px solid ${T.border}`
+			} }, h("span", null, `输入(未命中) ${fmtTokens(totals.input) || "0"}`), h("span", null, `输入(命中) ${fmtTokens(totals.cacheRead) || "0"}`), h("span", null, `写缓存 ${fmtTokens(totals.cacheWrite) || "0"}`), h("span", null, `输出 ${fmtTokens(totals.output) || "0"}`), h("span", null, `${totals.calls} 次调用`), h("span", null, `合计 ${fmtTokens(totalTokens(totals)) || "0"}`)), sectionTitle(`阶段 · ${stages.length}`), h("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 4
+			} }, stages.map((s) => {
+				const on = sel && Number(sel.seq) === Number(s.seq);
+				const color = stColor(s.status);
+				return h("div", {
+					key: s.seq,
+					onClick: () => openStage(s),
+					style: {
+						padding: "6px 9px",
+						borderRadius: 8,
+						cursor: "pointer",
+						border: `1px solid ${on ? `color-mix(in srgb, ${T.brand} 45%, transparent)` : T.border}`,
+						borderLeft: `3px solid ${color}`,
+						background: on ? `color-mix(in srgb, ${T.brand} 7%, ${T.layer1})` : T.layer1
+					}
+				}, h("div", { style: {
+					...flexRow,
+					gap: 6
+				} }, h("span", { style: {
+					fontFamily: MONO,
+					fontSize: 10,
+					color: T.text2
+				} }, `#${s.seq}`), h("span", null, phaseIconOf(s.phase)), h("span", { style: {
+					fontSize: 11.5,
+					color: T.text,
+					fontWeight: 500
+				} }, s.label || phaseNameOf(s.phase)), chip(stText(s.status), color, { dot: true }), s.outcome && s.outcome !== "completed" ? chip(String(s.outcome), stColor(s.outcome)) : null, h("span", { style: {
+					marginLeft: "auto",
+					fontFamily: MONO,
+					fontSize: 10,
+					color: T.text2
+				} }, `${fmtTime(s.startedAt)}${s.endedAt ? ` · ${fmtDur(s.startedAt, s.endedAt)}` : ""}`)), h("div", { style: {
+					...flexRow,
+					gap: 10,
+					marginTop: 3,
+					fontFamily: MONO,
+					fontSize: 10,
+					color: T.text2
+				} }, h("span", null, stageUsageLine(s) || "无 token 数据"), s.childId ? h("span", { title: s.childId }, `子代理 ${String(s.childId).slice(0, 14)}`) : null), s.summary ? h("div", { style: {
+					fontSize: 10.5,
+					color: T.text2,
+					marginTop: 3,
+					lineHeight: 1.45
+				} }, String(s.summary).slice(0, 200)) : null);
+			})), err ? muted(`阶段详情读取失败：${err}`, { color: T.error }) : null, sel ? h("div", { style: {
+				padding: "9px 10px",
+				borderRadius: 9,
+				border: `1px solid ${T.border}`,
+				background: T.layer2,
+				display: "flex",
+				flexDirection: "column",
+				gap: 8
+			} }, h("div", { style: {
+				...flexRow,
+				justifyContent: "space-between"
+			} }, h("div", { style: {
+				...flexRow,
+				gap: 6
+			} }, h("span", { style: {
+				fontSize: 11.5,
+				fontWeight: 700,
+				color: T.text
+			} }, `阶段 #${sel.seq} 详情`), chip(stText(sel.status), stColor(sel.status))), h("button", {
+				style: panelBtn,
+				onClick: () => setSel(null)
+			}, "收起")), h("div", { style: {
+				fontSize: 10.5,
+				color: T.text2,
+				fontFamily: MONO
+			} }, `阶段 token：${stageUsageLine(sel) || "无"}`), sel.verifyEvidence ? h("div", null, h("div", { style: {
+				fontSize: 11,
+				color: T.success,
+				marginBottom: 3
+			} }, "🔬 验证证据"), h("div", { style: {
+				whiteSpace: "pre-wrap",
+				wordBreak: "break-word",
+				fontSize: 11,
+				lineHeight: 1.6,
+				color: T.text,
+				background: `color-mix(in srgb, ${T.layer1} 70%, transparent)`,
+				border: `1px solid ${T.border}`,
+				borderRadius: 8,
+				padding: "7px 9px",
+				maxHeight: 200,
+				overflowY: "auto",
+				fontFamily: MONO
+			} }, sel.verifyEvidence)) : muted("（缺失——契约未兑现，host 已记警告）", { color: T.warn }), sel.output ? h("div", null, h("div", { style: {
+				fontSize: 11,
+				color: T.text2,
+				marginBottom: 3
+			} }, "阶段产出"), h(FoldableText, {
+				text: sel.output,
+				charLimit: 400,
+				lineLimit: 8,
+				style: {
+					fontFamily: MONO,
+					fontSize: 11
+				}
+			})) : null, sel.attempts && sel.attempts.length > 1 ? h("div", null, h("div", { style: {
+				fontSize: 11,
+				color: T.text2,
+				marginBottom: 3
+			} }, `同任务尝试 · ${sel.attempts.length}`), h("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 3
+			} }, sel.attempts.map((a) => h("div", {
+				key: a.seq,
+				style: {
+					...flexRow,
+					gap: 6,
+					fontSize: 10.5,
+					fontFamily: MONO,
+					color: T.text2
+				}
+			}, h("span", null, `#${a.seq}`), chip(stText(a.status), stColor(a.status)), a.outcome ? h("span", null, a.outcome) : null, h("span", { style: { marginLeft: "auto" } }, `${fmtTime(a.startedAt)} · ${fmtDur(a.startedAt, a.endedAt)}`))))) : null) : null, logs.length ? h("div", null, sectionTitle(`日志 · 最近 ${logs.length} 条`), h("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 2,
+				fontFamily: MONO,
+				fontSize: 10,
+				color: T.text2,
+				maxHeight: 220,
+				overflowY: "auto"
+			} }, logs.map((l, i) => h("div", {
+				key: i,
+				style: { color: l.level === "error" ? T.error : l.level === "warn" ? T.warn : T.text2 }
+			}, `${fmtTime(l.t)} [${l.level}] ${l.message}`)))) : null);
+		}
+		/** 右栏 run 详情 tab 正文（地址来自宿主导航记录；host 只认自己的地址格式）。
+		*
+		* ⚠️ prop 名：宿主渲染器把 slot 的 `hooks: { tabInfo }` 绑成 **`useTabInfo`**（约定 `hooks.<name>` → `use<Name>`；
+		* 官方 `ui-sidebar-documentpreview/TextPreview.tsx` 即用 `useTabInfo`）。2026-09-11 实锤：写成 `tabInfo`
+		* 会恒 undefined → 地址取不到、错误也没设 → 永远停在「读取 run 详情中…」。
+		*/
+		function RunDetailTab(props) {
+			const readTab = props && (typeof props.useTabInfo === "function" ? props.useTabInfo : typeof props.tabInfo === "function" ? props.tabInfo : null);
+			let info = null;
+			try {
+				info = readTab ? readTab() : null;
+			} catch (e) {
+				info = null;
+			}
+			const tab = info && info.tab ? info.tab : null;
+			const address = tab && tab.navigation && tab.navigation.address || tab && tab.contentId || null;
+			const parsed = parseRunAddress(address);
+			const remote = props && props.remote;
+			const [snap, setSnap] = react.default.useState(null);
+			const [err, setErr] = react.default.useState(null);
+			const [nonce, setNonce] = react.default.useState(0);
+			const product = parsed ? parsed.product : null;
+			const runId = parsed ? parsed.runId : null;
+			const api = react.default.useMemo(() => remote && product ? productApi(remote, product) : null, [remote, product]);
+			const [, bump] = react.default.useReducer((n) => n + 1, 0);
+			react.default.useEffect(() => {
+				if (address) return void 0;
+				let tries = 0;
+				const timer = setInterval(() => {
+					tries += 1;
+					bump();
+					if (tries >= 12) clearInterval(timer);
+				}, 150);
+				return () => clearInterval(timer);
+			}, [address]);
+			react.default.useEffect(() => {
+				let alive = true;
+				if (!runId) {
+					setSnap(null);
+					setErr(address ? `无法解析 run 地址：${address}` : readTab ? "读取 tab 地址中…" : "宿主 tab 信息钩子不可用（useTabInfo 缺失）");
+					return;
+				}
+				if (!api) {
+					setSnap(null);
+					setErr("remote 不可用（插件未挂载或版本过旧）");
+					return;
+				}
+				api.runDetail(runId).then((v) => {
+					if (alive) {
+						setSnap(v);
+						setErr(null);
+					}
+				}, (e) => {
+					if (alive) setErr(String(e && e.message || e));
+				});
+				const timer = setInterval(() => {
+					api.runDetail(runId).then((v) => {
+						if (!alive) return;
+						setSnap(v);
+						if (!v || !(v.status === "running" || v.status === "pending")) clearInterval(timer);
+					}, () => {});
+				}, 5e3);
+				return () => {
+					alive = false;
+					clearInterval(timer);
+				};
+			}, [
+				api,
+				runId,
+				address,
+				nonce,
+				readTab
+			]);
+			if (err && !snap) {
+				const pending = !address && !!readTab;
+				return h("div", { style: {
+					padding: 12,
+					display: "flex",
+					flexDirection: "column",
+					gap: 8
+				} }, muted(pending ? "读取 tab 地址中…" : err, { color: pending ? T.text2 : T.error }), pending ? null : h("button", {
+					style: panelBtn,
+					onClick: () => {
+						setErr(null);
+						setNonce((n) => n + 1);
+					}
+				}, "重试"));
+			}
+			if (!snap) return muted("读取 run 详情中…", { padding: 12 });
+			return h(RunDetailPane, {
+				snap,
+				product,
+				api
+			});
+		}
+		function productApi(remote, product) {
+			return {
+				view: async () => unwrap$1(await remote.productView(product), "productView"),
+				runDetail: async (runId) => unwrap$1(await remote.productRunDetail(product, runId), "productRunDetail"),
+				stageDetail: async (runId, seq) => unwrap$1(await remote.productStageDetail(product, runId, seq), "productStageDetail"),
+				itemDetail: async (kind, id, sessionId) => unwrap$1(await remote.productItemDetail(product, kind, id, sessionId), "productItemDetail")
+			};
+		}
+		/** 全局面板 props：root scope 标准 props（useSessions 取当前会话）+ 插件注入（remote/打开回调）。 */
+		function GlobalPanel(props) {
+			const remote = props.remote;
+			const useSessions = props.useSessions;
+			const currentSessionId = (() => {
+				try {
+					return useSessions ? useSessions((s) => s.current) : void 0;
+				} catch (e) {
+					return;
+				}
+			})();
+			const [state, setState] = react.default.useState({
+				products: [],
+				current: null,
+				view: null,
+				err: null,
+				busy: false
+			});
+			const [detail, setDetail] = react.default.useState(null);
+			const [hint, setHint] = react.default.useState(null);
+			const [runsExpanded, setRunsExpanded] = react.default.useState(false);
+			const [panelTab, setPanelTab] = react.default.useState("run");
+			const [viewTick, setViewTick] = react.default.useState(0);
+			const [runFilter, setRunFilter] = react.default.useState([]);
+			/**
+			* 右侧栏的**会话内容**宿主只在「对话被选中」时渲染（`RightbarRoot` 门控 `activePanelId === null`），
+			* 而全局面板占着 `main` → seat 不存在 → `ctx.sidebarRight` 没有 binding（抛 `no session surface
+			* is mounted`，2026-09-11 用户实测 tf-mtvrsakj-l2vj5u）。所以：先切回对话，再小步重试
+			* （seat 在切换后的 effect 里才 `bindService`）；彻底失败才降级，并把原因显示在面板里。
+			*/
+			const openInConversationRightbar = (address, label, fallback) => {
+				const attempt = (quiet) => !!(props.openResource && address && props.openResource(address, label, quiet));
+				if (attempt(false)) return;
+				if (!address) {
+					setHint(`${label}：host 未生成可打开的地址（可能缺少会话上下文）`);
+					if (fallback) fallback();
+					return;
+				}
+				try {
+					if (props.layout && typeof props.layout.selectPanel === "function") props.layout.selectPanel(null);
+				} catch (e) {}
+				let tries = 0;
+				const tick = () => {
+					tries += 1;
+					if (attempt(true)) return;
+					if (tries < 12) {
+						setTimeout(tick, 120);
+						return;
+					}
+					setHint(`右侧栏打开失败（宿主只在对话视图挂载它）：${label}${fallback ? "——已在本面板内联显示" : ""}`);
+					if (fallback) fallback();
+				};
+				setTimeout(tick, 140);
+			};
+			/**
+			* **跳到资源所属的会话，再在那个会话的右栏打开**（全局面板的正确语义）。
+			* 右侧栏是会话级的：从全局面板看 tetris 的 run 却把 tab 挂到"用户当前所在会话"上没有意义
+			* （用户 2026-09-11 提出）。所以先 `sessions.open(ownerSession)`，等当前会话真的切过去、
+			* 且对话 seat 挂载 bind 之后再 openResource（两者都要等，故小步重试 + 就绪判据）。
+			* @param target.ownerSession - 资源所属会话（run 的发起会话 / 产物地址里的会话）
+			* @param target.address - host 生成的 dsh-resource 地址
+			* @param target.label - 提示用的名字
+			* @param target.fallback - 没有 ownerSession 或跳转失败时的降级（通常是面板内联详情）
+			*/
+			const goOwnerSessionAndOpen = (target) => {
+				const { ownerSession, address, label, fallback } = target || {};
+				const sessions = props.sessions;
+				if (!ownerSession || !sessions || typeof sessions.open !== "function") {
+					openInConversationRightbar(address, label, fallback);
+					return;
+				}
+				try {
+					sessions.open(ownerSession);
+				} catch (e) {
+					setHint(`发起会话 ${String(ownerSession).slice(0, 8)}… 不在会话列表里（可能已被清理）——已在本面板展示详情`);
+					if (fallback) fallback();
+					return;
+				}
+				try {
+					if (props.layout && typeof props.layout.selectPanel === "function") props.layout.selectPanel(null);
+				} catch (e) {}
+				let tries = 0;
+				const tick = () => {
+					tries += 1;
+					let nowCurrent = null;
+					try {
+						nowCurrent = sessions.list && sessions.list.getSnapshot ? sessions.list.getSnapshot().current : null;
+					} catch (e) {
+						nowCurrent = null;
+					}
+					if ((nowCurrent === ownerSession || tries >= 6) && props.openResource && address && props.openResource(address, label, tries < 6)) return;
+					if (tries < 14) {
+						setTimeout(tick, 130);
+						return;
+					}
+					setHint(`已切到发起会话，但右栏没打开（${label}）——可在该会话里用「⇥ 右栏打开」重试`);
+				};
+				setTimeout(tick, 140);
+			};
+			const loadProducts = react.default.useCallback(async (preferKey) => {
+				if (!remote || typeof remote.products !== "function") {
+					setState((s) => ({
+						...s,
+						err: "remote.products 不可用（插件未挂载或版本过旧）"
+					}));
+					return;
+				}
+				setState((s) => ({
+					...s,
+					busy: true
+				}));
+				try {
+					const v = unwrap$1(await remote.products(currentSessionId || null), "products") || {};
+					const list = v.products || [];
+					const key = preferKey || state.current || (v.current && list.some((p) => p.key === v.current) ? v.current : list[0] && list[0].key || null);
+					setState({
+						products: list,
+						current: key,
+						view: key === state.current ? state.view : null,
+						err: null,
+						busy: false
+					});
+					setViewTick((t) => t + 1);
+				} catch (e) {
+					setState((s) => ({
+						...s,
+						busy: false,
+						err: String(e && e.message || e)
+					}));
+				}
+			}, [
+				remote,
+				currentSessionId,
+				state.current,
+				state.view
+			]);
+			const loadView = react.default.useCallback(async (key, silent) => {
+				if (!remote || !key) return;
+				const api = productApi(remote, key);
+				try {
+					const v = await api.view();
+					setState((s) => ({
+						...s,
+						view: v,
+						err: null
+					}));
+				} catch (e) {
+					if (!silent) setState((s) => ({
+						...s,
+						err: String(e && e.message || e)
+					}));
+				}
+			}, [remote]);
+			/** 选中产品线：**同一个**产品线 = 刷新（保留现有视图，不清空 → 不会卡"读取中"且不闪）；不同产品线 = 清空 + 重新拉。 */
+			const selectProduct = (k) => {
+				closeDetail();
+				setRunsExpanded(false);
+				setRunFilter([]);
+				setState((s) => ({
+					...s,
+					current: k,
+					view: s.current === k ? s.view : null
+				}));
+				setViewTick((t) => t + 1);
+			};
+			/** run 状态筛选开关（多选）。 */
+			const toggleRunStatus = (st) => setRunFilter((cur) => cur.indexOf(st) === -1 ? cur.concat([st]) : cur.filter((x) => x !== st));
+			react.default.useEffect(() => {
+				loadProducts();
+			}, [currentSessionId]);
+			react.default.useEffect(() => {
+				if (state.current) loadView(state.current);
+			}, [
+				state.current,
+				viewTick,
+				loadView
+			]);
+			react.default.useEffect(() => {
+				if (!(state.view && state.view.runs || []).some((r) => r.status === "running" || r.status === "pending") || !state.current) return void 0;
+				const timer = setInterval(() => {
+					loadView(state.current, true);
+				}, 8e3);
+				return () => clearInterval(timer);
+			}, [
+				state.current,
+				state.view,
+				loadView
+			]);
+			const api = state.current && remote ? productApi(remote, state.current) : null;
+			const openItem = async (kind, id) => {
+				if (!api) return;
+				try {
+					setDetail({
+						kind: "item",
+						data: await api.itemDetail(kind, id, currentSessionId || null)
+					});
+				} catch (e) {
+					setState((s) => ({
+						...s,
+						err: String(e && e.message || e)
+					}));
+				}
+			};
+			const showInline = async (r) => {
+				if (!api) return;
+				try {
+					const snap = await api.runDetail(r.id);
+					setDetail({
+						kind: "run",
+						data: snap,
+						run: r
+					});
+				} catch (e) {
+					setState((s) => ({
+						...s,
+						err: String(e && e.message || e)
+					}));
+				}
+			};
+			const closeDetail = () => setDetail(null);
+			const openRun = (r) => {
+				goOwnerSessionAndOpen({
+					ownerSession: r.ownerSession,
+					address: r.address,
+					label: r.id,
+					fallback: () => {
+						showInline(r);
+					}
+				});
+			};
+			const openArtifactInPanel = (address, name, ownerSession) => {
+				goOwnerSessionAndOpen({
+					ownerSession,
+					address,
+					label: name
+				});
+			};
+			const view = state.view;
+			const product = view && view.product;
+			const runs = view && view.runs || [];
+			const detailOpen = !!detail;
+			const runSel = runFilter || [];
+			const runSelSet = new Set(runSel);
+			const runFiltering = runSel.length > 0;
+			const runsMatched = runFiltering ? runs.filter((r) => runSelSet.has(r.status)) : runs;
+			const runStatusCounts = {};
+			for (const r of runs) runStatusCounts[r.status] = (runStatusCounts[r.status] || 0) + 1;
+			const headRuns = runsMatched.slice(0, RUN_PREVIEW);
+			const headIds = new Set(headRuns.map((r) => r.id));
+			const pinnedActive = runsExpanded ? [] : runsMatched.filter((r) => (r.status === "running" || r.status === "pending") && !headIds.has(r.id));
+			const visibleRuns = runsExpanded || runsMatched.length <= RUN_PREVIEW ? runsMatched : pinnedActive.concat(headRuns);
+			const bl = view && view.backlog;
+			const backlogCount = bl ? (bl.requirements || []).length + (bl.tasks || []).filter((t) => t.type !== "subtask").length + (bl.bugs || []).length : 0;
+			/** 主区标签按钮（选中态用品牌色下划线）。 */
+			const panelTabBtn = (key, label) => h("button", {
+				key,
+				onClick: () => setPanelTab(key),
+				style: {
+					font: "inherit",
+					fontSize: 12,
+					fontWeight: panelTab === key ? 700 : 500,
+					padding: "6px 12px",
+					marginBottom: -1,
+					cursor: "pointer",
+					whiteSpace: "nowrap",
+					background: "transparent",
+					border: "none",
+					borderBottom: `2px solid ${panelTab === key ? T.brand : "transparent"}`,
+					color: panelTab === key ? T.text : T.text2
+				}
+			}, label);
+			return h("div", { style: {
+				height: "100%",
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column",
+				background: T.bg,
+				color: T.text,
+				fontFamily: SANS,
+				fontSize: 12
+			} }, h("div", { style: {
+				...flexRow,
+				justifyContent: "space-between",
+				padding: "10px 14px",
+				borderBottom: `1px solid ${T.border}`
+			} }, h("div", { style: {
+				...flexRow,
+				gap: 8
+			} }, h("span", { style: {
+				fontSize: 13,
+				fontWeight: 700
+			} }, "🏭 团队工作台"), h("span", { style: {
+				fontSize: 11,
+				color: T.text2
+			} }, "全局面板 · 按产品线"), currentSessionId ? h("span", { style: {
+				fontSize: 10,
+				color: T.text2,
+				fontFamily: MONO
+			} }, `当前会话 ${String(currentSessionId).slice(0, 8)}`) : h("span", { style: {
+				fontSize: 10,
+				color: T.text2
+			} }, "无当前会话")), h("div", { style: {
+				...flexRow,
+				gap: 6
+			} }, product ? h("button", {
+				style: panelBtn,
+				onClick: () => loadView(state.current)
+			}, "刷新数据") : null, h("button", {
+				style: panelBtn,
+				title: "回到对话（再点侧边栏图标即可切回本面板）",
+				onClick: () => {
+					try {
+						const layout = props.layout;
+						if (layout && layout.selectPanel) layout.selectPanel(null);
+					} catch (e) {}
+				}
+			}, "回到对话"))), state.err ? h("div", { style: {
+				padding: "6px 14px",
+				fontSize: 11,
+				color: T.error,
+				borderBottom: `1px solid ${T.border}`
+			} }, state.err) : null, hint ? h("div", { style: {
+				...flexRow,
+				justifyContent: "space-between",
+				gap: 8,
+				padding: "6px 14px",
+				fontSize: 11,
+				color: T.warn,
+				borderBottom: `1px solid ${T.border}`,
+				background: `color-mix(in srgb, ${T.warn} 8%, transparent)`
+			} }, h("span", null, hint), h("button", {
+				style: panelBtn,
+				onClick: () => setHint(null)
+			}, "知道了")) : null, h("div", { style: {
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				position: "relative"
+			} }, h(ProductRail, {
+				products: state.products,
+				current: state.current,
+				loadingKey: state.view ? null : state.current,
+				busy: state.busy,
+				onRefresh: () => loadProducts(state.current),
+				onSelect: selectProduct
+			}), h("div", { style: {
+				flex: 1,
+				minWidth: 0,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column"
+			} }, !state.current ? h("div", { style: { padding: "12px 14px" } }, muted("选择左侧产品线查看 backlog 与 run（首次进入默认选最近更新的产品线）。")) : !view ? h("div", { style: { padding: "12px 14px" } }, muted("读取产品线数据中…")) : h(react.default.Fragment, null, h("div", { style: {
+				...flexRow,
+				justifyContent: "space-between",
+				gap: 10,
+				padding: "12px 14px 6px"
+			} }, h("div", { style: { minWidth: 0 } }, h("div", { style: {
+				fontSize: 15,
+				fontWeight: 700,
+				color: T.text
+			} }, product.title || product.key), h("div", { style: {
+				fontSize: 10.5,
+				color: T.text2,
+				fontFamily: MONO,
+				marginTop: 2,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			} }, product.path || product.key)), h("div", { style: {
+				...flexRow,
+				gap: 6,
+				flex: "0 0 auto"
+			} }, chip(`run ${product.totalRuns}`, T.text2), product.activeRuns > 0 ? chip(`活跃 ${product.activeRuns}`, T.brand, { dot: true }) : null, product.lastVerdict ? chip(`验收 ${product.lastVerdict}`, stColor("accepted")) : null)), h("div", { style: {
+				display: "flex",
+				alignItems: "flex-end",
+				gap: 2,
+				padding: "0 14px",
+				borderBottom: `1px solid ${T.border}`
+			} }, panelTabBtn("run", `🚀 流水线 run · ${runs.length}`), panelTabBtn("backlog", `📋 Backlog · ${backlogCount}`), h("div", { style: {
+				marginLeft: "auto",
+				...flexRow,
+				gap: 6,
+				paddingBottom: 7
+			} }, panelTab === "run" && !runsExpanded && pinnedActive.length > 0 ? chip(`已置顶进行中 ${pinnedActive.length}`, T.brand, { dot: true }) : null, panelTab === "run" && runsMatched.length > RUN_PREVIEW ? h("button", {
+				style: panelBtn,
+				onClick: () => setRunsExpanded((v) => !v)
+			}, runsExpanded ? `只看最近 ${RUN_PREVIEW} 条` : `展开全部 ${runsMatched.length} 条`) : null)), h("div", { style: {
+				flex: 1,
+				minHeight: 0,
+				overflowY: "auto",
+				overflowX: "hidden",
+				padding: "12px 14px 18px"
+			} }, panelTab === "run" ? h(react.default.Fragment, null, h("div", { style: {
+				...flexRow,
+				gap: 6,
+				marginBottom: 8
+			} }, ...RUN_STATUS_ORDER.filter((st) => runStatusCounts[st]).map((st) => filterChip(`${RUN_STATUS_TEXT[st] || st} ${runStatusCounts[st]}`, stColor(st), runSelSet.has(st), () => toggleRunStatus(st))), runFiltering ? h("button", {
+				style: panelBtn,
+				title: "清除 run 状态筛选",
+				onClick: () => setRunFilter([])
+			}, `筛选中 ${runSel.length} 项 · 显示 ${runsMatched.length}/${runs.length} × 清除`) : null), visibleRuns.length ? h(RunList, {
+				runs: visibleRuns,
+				activeRunId: detail && detail.kind === "run" && detail.run ? detail.run.id : null,
+				onOpenRun: openRun,
+				onInlineRun: showInline
+			}) : muted("该筛选下没有 run。", { fontSize: 10.5 }), muted("点一行看详情浮层；「去会话右栏」= 跳到该 run 的发起会话并在其右侧栏打开（与任务夹产物并排）", {
+				fontSize: 10,
+				marginTop: 8
+			})) : h(react.default.Fragment, null, muted("点状态徽章可筛选（多选）；终态卡片默认收起，筛选时自动显示", {
+				fontSize: 10,
+				marginBottom: 8
+			}), h(BacklogGroups, {
+				backlog: view.backlog,
+				onOpen: openItem,
+				productKey: state.current
+			}))))), detailOpen ? h("div", { style: {
+				position: "absolute",
+				top: 8,
+				right: 12,
+				bottom: 8,
+				width: 440,
+				zIndex: 9,
+				overflowY: "auto",
+				overflowX: "hidden",
+				borderRadius: 12,
+				border: `1px solid ${T.border}`,
+				background: `color-mix(in srgb, ${T.layer1} 96%, transparent)`,
+				backdropFilter: "blur(12px)",
+				boxShadow: "0 14px 44px rgba(0,0,0,.28)"
+			} }, detail && detail.kind === "item" ? h(ItemDetailPane, {
+				det: detail.data,
+				openArtifact: openArtifactInPanel,
+				onClose: closeDetail
+			}) : h("div", null, h("div", { style: {
+				...flexRow,
+				justifyContent: "space-between",
+				padding: "10px 12px 0"
+			} }, h("span", { style: {
+				fontSize: 11.5,
+				fontWeight: 700,
+				color: T.text
+			} }, "run 详情"), h("div", { style: {
+				...flexRow,
+				gap: 6
+			} }, detail && detail.data && detail.data.address ? h("button", {
+				style: brandBtn,
+				title: "跳到该 run 的发起会话，并在那个会话的右侧栏打开（与任务夹产物并排看）",
+				onClick: () => goOwnerSessionAndOpen({
+					ownerSession: detail.data.ownerSession,
+					address: detail.data.address,
+					label: detail.data.id
+				})
+			}, "去发起会话") : null, h("button", {
+				style: panelBtn,
+				onClick: closeDetail
+			}, "关闭"))), h(RunDetailPane, {
+				snap: detail && detail.data,
+				product: state.current,
+				api
+			}))) : null));
 		}
-		/** 官方口径工具函数（与 DeepSeek usage 账单对齐，零额外概念）：
-		*  - u.input       : 输入（缓存未命中）
-		*  - u.cacheRead   : 输入（缓存命中）
-		*  - u.cacheWrite  : 输入写入缓存
-		*  - u.output      : 输出
-		*  billed input = input + cacheRead + cacheWrite；命中率 = cacheRead / (input + cacheRead)。
+		//#endregion
+		//#region client/index.tsx
+		/**
+		* dsh-plugin-teamflow — browser half（v0.7 视觉重构：「精密工程控制台」）。
+		*
+		* 注册 conversation.view tab「🏭 团队工作台」（与 chat / 轨迹并列）：
+		* - 流水线图形工作流：阶段泳道 + 节点卡片（状态/耗时/token/子代理会话）+ 实时轮询
+		* - Backlog 拖拽看板：需求/任务/缺陷三组状态泳道，卡片拖拽流转（原生 HTML5 DnD，零依赖）
+		* - 成本中心：每阶段 token + 总计 + 运行时长
+		* - 人工介入中心：needs-human 项聚合 + 一键终态
+		* - 历史 run 切换
+		*
+		* 视觉：全部使用 DSH 主题 token（--dsw-alias-*，自动适配深浅色）。
+		* Remote 接入：$mount 后 ctx.get('remote.teamflow') 取全局实例传给组件
+		* （不能 inject 'remote.teamflow'——自挂载自注入会让 fiber 死锁）。
 		*/
-		function hitRate(u) {
-			const total = (u.input || 0) + (u.cacheRead || 0);
-			return total > 0 ? Math.round((u.cacheRead || 0) / total * 100) : null;
-		}
-		function usageDetail(s) {
-			const k = (n) => n === null || n === void 0 ? "—" : fmtTokens(n);
-			if (s.usage) {
-				const u = s.usage;
-				const hit = hitRate(u);
-				return `输入(未命中) ${k(u.input)} / 输入(命中) ${k(u.cacheRead)} / 写缓存 ${k(u.cacheWrite)} / 输出 ${k(u.output)} · ${u.calls} 次调用${hit !== null ? ` · 缓存命中 ${hit}%` : ""}`;
-			}
-			return "无 usage 明细";
-		}
-		/** 节点卡主 token 行：官方口径 —— 输入(未命中)/输入(命中)/输出 + 缓存命中率。 */
-		function stageUsageLine(s) {
-			const u = s && s.usage;
-			if (u && (u.input || u.cacheRead || u.cacheWrite || u.output)) {
-				const hit = hitRate(u);
-				return `⇅${fmtTokens(u.input)} ⇅${fmtTokens(u.cacheRead)} ⬆${fmtTokens(u.output)}${hit !== null ? ` ·${hit}%` : ""}`;
-			}
-			return null;
-		}
-		const ROLE_NAME = {
-			pm: "产品",
-			design: "设计",
-			arch: "架构",
-			tech: "方案",
-			dev: "开发",
-			qa: "测试",
-			acceptance: "验收",
-			other: "其他"
-		};
-		const roleUsage = (u) => {
-			if (!u) return "";
-			const hit = hitRate(u);
-			return `⇅${fmtTokens(u.input || 0)}/${fmtTokens(u.cacheRead || 0)}·⬆${fmtTokens(u.output || 0)}${hit !== null ? `·${hit}%` : ""}`;
-		};
-		/** 任务卡按角色累计的真实 token 摘要（官方口径：未命中/命中输入 + 输出 + 命中率）。 */
-		function byRoleLine(task) {
-			const roles = task && task.byRole || {};
-			return Object.keys(roles).filter((k) => roles[k] && roles[k].input + roles[k].output + roles[k].cacheRead + roles[k].cacheWrite > 0).map((k) => `${ROLE_NAME[k] || k} ${roleUsage(roles[k])}`).join(" · ");
-		}
-		/** 多阶段 usage 汇总（官方口径）。 */
-		function totalUsage(stages) {
-			const t = {
-				input: 0,
-				cacheRead: 0,
-				cacheWrite: 0,
-				output: 0,
-				calls: 0
-			};
-			for (const s of stages || []) {
-				const u = s && s.usage;
-				if (!u) continue;
-				t.input += u.input || 0;
-				t.cacheRead += u.cacheRead || 0;
-				t.cacheWrite += u.cacheWrite || 0;
-				t.output += u.output || 0;
-				t.calls += u.calls || 0;
-			}
-			return t;
-		}
-		const stText = (s) => STATUS_TEXT[s] || s;
-		const stColor = (s) => STATUS_COLOR[s] || T.text2;
+		const inject = [
+			"remote",
+			"slots",
+			"sessions",
+			"locale"
+		];
 		const NODE_W = 300;
 		const PHASE_GAP = 88;
 		const WAVE = 56;
@@ -1261,7 +2705,8 @@ window.__ModuleLoader__.load({
 				onMouseLeave: onUp,
 				style: {
 					position: "relative",
-					height: 560,
+					flex: 1,
+					minHeight: 320,
 					borderRadius: 12,
 					overflow: "hidden",
 					touchAction: "none",
@@ -1392,7 +2837,7 @@ window.__ModuleLoader__.load({
 				sessions
 			}) : null);
 		}
-		function BoardPanel({ backlog, api, onRefresh, sessionId, onShowRun }) {
+		function BoardPanel({ backlog, api, onRefresh, sessionId, onShowRun, openArtifact }) {
 			const [drag, setDrag] = react.default.useState(null);
 			const [over, setOver] = react.default.useState(null);
 			const [det, setDet] = react.default.useState(null);
@@ -1458,6 +2903,10 @@ window.__ModuleLoader__.load({
 					padding: "7px 9px",
 					cursor: "grab",
 					fontSize: 12,
+					boxSizing: "border-box",
+					minWidth: 0,
+					maxWidth: "100%",
+					overflow: "hidden",
 					opacity: drag && drag.id === item.id ? .35 : 1,
 					transition: "opacity .1s ease, transform .12s ease",
 					boxShadow: "0 1px 2px rgba(0,0,0,.05)"
@@ -1466,25 +2915,36 @@ window.__ModuleLoader__.load({
 			}, h("div", { style: {
 				display: "flex",
 				alignItems: "center",
-				gap: 4
+				gap: 4,
+				minWidth: 0
 			} }, h("span", { style: {
 				fontFamily: MONO,
 				color: T.text2,
-				fontSize: 10.5
+				fontSize: 10.5,
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
 			} }, item.id), item.severity ? chip(item.severity, item.severity === "P0" ? T.error : item.severity === "P1" ? T.warn : T.text2) : null, item.owner ? h("span", { style: {
 				marginLeft: "auto",
 				fontSize: 10.5,
-				color: T.text2
+				color: T.text2,
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
 			} }, `👤 ${item.owner}`) : null), h("div", {
 				title: item.title || void 0,
 				style: {
 					fontWeight: 500,
 					margin: "3px 0 4px",
-					lineHeight: 1.4
+					lineHeight: 1.4,
+					overflowWrap: "anywhere"
 				}
 			}, (item.title || "").slice(0, 30)), h("div", { style: {
 				...flexRow,
-				marginTop: 2
+				marginTop: 2,
+				minWidth: 0
 			} }, chip(stText(item.status), stColor(item.status)), typeof item.retries === "number" && item.retries > 0 ? h("span", { style: {
 				fontSize: 10.5,
 				color: T.warn,
@@ -1498,7 +2958,8 @@ window.__ModuleLoader__.load({
 				marginTop: 3,
 				fontSize: 10.5,
 				color: T.text2,
-				fontFamily: MONO
+				fontFamily: MONO,
+				minWidth: 0
 			} }, item.devAssign ? h("span", {
 				title: `dev 分配\n${item.devAssign}`,
 				style: {
@@ -1507,7 +2968,8 @@ window.__ModuleLoader__.load({
 					gap: 3,
 					overflow: "hidden",
 					textOverflow: "ellipsis",
-					maxWidth: 130,
+					maxWidth: "100%",
+					minWidth: 0,
 					whiteSpace: "nowrap"
 				}
 			}, `👨‍💻${item.devAssign}`) : null, item.qaAssign ? h("span", {
@@ -1518,7 +2980,8 @@ window.__ModuleLoader__.load({
 					gap: 3,
 					overflow: "hidden",
 					textOverflow: "ellipsis",
-					maxWidth: 130,
+					maxWidth: "100%",
+					minWidth: 0,
 					whiteSpace: "nowrap"
 				}
 			}, `🧪${item.qaAssign}`) : null, item.acceptBy ? h("span", {
@@ -1529,7 +2992,8 @@ window.__ModuleLoader__.load({
 					gap: 3,
 					overflow: "hidden",
 					textOverflow: "ellipsis",
-					maxWidth: 130,
+					maxWidth: "100%",
+					minWidth: 0,
 					whiteSpace: "nowrap"
 				}
 			}, `✅${item.acceptBy}`) : null) : null, kind === "task" && byRoleLine(item) ? h("div", { style: {
@@ -1537,8 +3001,21 @@ window.__ModuleLoader__.load({
 				marginTop: 3,
 				fontSize: 10.5,
 				color: T.warn,
-				fontFamily: MONO
-			} }, h("span", { style: { color: T.text2 } }, "⛽"), byRoleLine(item)) : null, kind === "task" && (item.subtaskIds || []).length > 0 ? (() => {
+				fontFamily: MONO,
+				minWidth: 0,
+				maxWidth: "100%"
+			} }, h("span", { style: {
+				color: T.text2,
+				flex: "0 0 auto"
+			} }, "⛽"), h("span", {
+				title: byRoleLine(item),
+				style: {
+					minWidth: 0,
+					flex: "1 1 auto",
+					overflowWrap: "anywhere",
+					wordBreak: "break-word"
+				}
+			}, byRoleLine(item))) : null, kind === "task" && (item.subtaskIds || []).length > 0 ? (() => {
 				const subs = item.subtaskIds.map((id) => subtaskMap[id]).filter(Boolean);
 				if (subs.length === 0) return null;
 				const done = subs.filter((s) => s.status === "done").length;
@@ -1561,29 +3038,33 @@ window.__ModuleLoader__.load({
 						padding: "2px 6px",
 						borderRadius: 4,
 						marginBottom: 2,
+						minWidth: 0,
 						background: sub.status === "failed" ? `color-mix(in srgb, ${T.error} 7%, transparent)` : T.layer2,
 						border: `1px solid ${stColor(sub.status)}30`
 					}
 				}, h("span", { style: {
 					color: stColor(sub.status),
 					fontWeight: 600,
-					minWidth: 12
+					minWidth: 12,
+					flex: "0 0 auto"
 				} }, sub.status === "done" ? "✓" : sub.status === "failed" ? "✗" : sub.status === "running" ? "⟳" : "…"), h("span", {
 					title: sub.title || void 0,
 					style: {
+						flex: "1 1 auto",
+						minWidth: 0,
 						overflow: "hidden",
 						textOverflow: "ellipsis",
-						whiteSpace: "nowrap",
-						maxWidth: 130
+						whiteSpace: "nowrap"
 					}
 				}, (sub.title || "").replace(/^开发 · /, "")), sub.devAssign ? h("span", {
 					title: `dev 分配\n${sub.devAssign}`,
 					style: {
-						marginLeft: "auto",
+						flex: "0 1 auto",
 						color: T.text2,
 						overflow: "hidden",
 						textOverflow: "ellipsis",
 						maxWidth: 70,
+						minWidth: 0,
 						whiteSpace: "nowrap"
 					}
 				}, sub.devAssign) : null)));
@@ -1603,23 +3084,34 @@ window.__ModuleLoader__.load({
 				}
 			];
 			return h("div", { style: {
+				position: "relative",
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column"
+			} }, h("div", { style: {
+				flex: 1,
+				minHeight: 0,
+				overflowY: "auto",
 				display: "flex",
 				flexDirection: "column",
 				gap: 14,
-				maxHeight: "72vh",
-				overflowY: "auto",
 				paddingRight: 4
 			} }, groups.map(({ kind, list }) => {
 				const counts = {};
 				for (const s of COLUMNS[kind]) counts[s] = 0;
 				for (const item of list) counts[item.status] = (counts[item.status] || 0) + 1;
 				return h("div", { key: kind }, h("div", { style: {
+					position: "sticky",
+					top: 0,
+					zIndex: 3,
+					background: T.bg,
 					display: "flex",
 					alignItems: "center",
 					gap: 8,
 					fontWeight: 700,
 					fontSize: 13,
-					marginBottom: 8
+					padding: "6px 0 8px"
 				} }, h("span", { style: { fontSize: 14 } }, kind === "req" ? "📌" : kind === "task" ? "🔧" : "🐞"), KIND_TITLE[kind], h("span", { style: {
 					fontSize: 11,
 					fontWeight: 600,
@@ -1636,6 +3128,7 @@ window.__ModuleLoader__.load({
 				} }, COLUMNS[kind].map((s) => {
 					const isOver = over === `${kind}:${s}`;
 					const color = stColor(s);
+					const colBg = isOver ? `color-mix(in srgb, ${color} 8%, ${T.layer1})` : T.layer2;
 					return h("div", {
 						key: s,
 						onDragOver: (e) => {
@@ -1653,11 +3146,12 @@ window.__ModuleLoader__.load({
 							maxWidth: 172,
 							flex: "0 0 auto",
 							borderRadius: 10,
-							padding: 7,
+							padding: 0,
 							minHeight: 84,
 							maxHeight: 340,
 							overflowY: "auto",
-							background: isOver ? `color-mix(in srgb, ${color} 8%, ${T.layer1})` : T.layer2,
+							overflowX: "hidden",
+							background: colBg,
 							border: `1px dashed ${isOver ? color : T.border}`,
 							transition: "background .12s ease, border-color .12s ease"
 						}
@@ -1666,8 +3160,13 @@ window.__ModuleLoader__.load({
 						fontSize: 11,
 						fontWeight: 600,
 						color,
-						marginBottom: 6,
-						padding: "0 2px"
+						position: "sticky",
+						top: 0,
+						zIndex: 2,
+						background: colBg,
+						padding: "7px 9px 5px",
+						borderTopLeftRadius: 10,
+						borderTopRightRadius: 10
 					} }, h("span", null, stText(s)), h("span", { style: {
 						marginLeft: "auto",
 						fontFamily: MONO,
@@ -1676,13 +3175,16 @@ window.__ModuleLoader__.load({
 					} }, counts[s] || 0)), h("div", { style: {
 						display: "flex",
 						flexDirection: "column",
-						gap: 6
+						gap: 6,
+						padding: "0 7px 7px",
+						minWidth: 0
 					} }, list.filter((item) => item.status === s).map((item) => card(item, kind))));
 				})));
-			}), det ? h(ItemDetailDrawer, {
+			})), det ? h(ItemDetailDrawer, {
 				det,
 				onClose: () => setDet(null),
-				onShowRun
+				onShowRun,
+				openArtifact
 			}) : null);
 		}
 		function fmtAt(ts) {
@@ -1691,7 +3193,7 @@ window.__ModuleLoader__.load({
 				minute: "2-digit"
 			}) : "—";
 		}
-		function ItemDetailDrawer({ det, onClose, onShowRun }) {
+		function ItemDetailDrawer({ det, onClose, onShowRun, openArtifact }) {
 			const d = det && det.data;
 			const loading = det && det.loading;
 			const err = det && det.err;
@@ -1950,7 +3452,30 @@ window.__ModuleLoader__.load({
 					borderRadius: 8,
 					padding: "7px 10px",
 					wordBreak: "break-all"
-				} }, d.runDocs + "/")) : null,
+				} }, d.runDocs + "/"), Array.isArray(d.artifacts) && d.artifacts.length > 0 ? h("div", { style: {
+					display: "flex",
+					flexWrap: "wrap",
+					gap: 6,
+					marginTop: 1
+				} }, d.artifacts.map((a) => h("button", {
+					key: a.name,
+					onClick: () => {
+						if (openArtifact) openArtifact(a.address, a.name);
+					},
+					title: `在右侧栏预览 ${d.runDocs}/${a.name}`,
+					style: {
+						fontSize: 10.5,
+						fontWeight: 600,
+						padding: "3px 9px",
+						borderRadius: 6,
+						cursor: "pointer",
+						lineHeight: "16px",
+						border: `1px solid color-mix(in srgb, ${T.brand} 38%, transparent)`,
+						background: `color-mix(in srgb, ${T.brand} 10%, transparent)`,
+						color: T.brand,
+						whiteSpace: "nowrap"
+					}
+				}, `📄 ${String(a.name).replace(/\.md$/, "")}`))) : null) : null,
 				kind === "task" && d.usage ? h("div", { style: {
 					display: "flex",
 					flexDirection: "column",
@@ -2336,7 +3861,10 @@ window.__ModuleLoader__.load({
 				display: "flex",
 				flexDirection: "column",
 				gap: 10,
-				padding: "4px 16px"
+				padding: "4px 16px 10px",
+				height: "100%",
+				minHeight: 0,
+				overflow: "hidden"
 			} }, h("div", { style: {
 				display: "flex",
 				alignItems: "center",
@@ -2507,7 +4035,18 @@ window.__ModuleLoader__.load({
 			}) : h("span", { style: {
 				color: T.text2,
 				fontSize: 11.5
-			} }, "（暂无）")) : null), tab === "pipeline" ? h(PipelinePanel, {
+			} }, "（暂无）")) : null, tab === "pipeline" && activeRun && activeRun.address ? h("button", {
+				style: chipBtn(false),
+				title: "在右侧栏打开该 run 详情（与任务夹产物并排看）",
+				onClick: () => {
+					if (!(props.openResource && props.openResource(activeRun.address, activeRun.id))) console.warn("[teamflow] 右侧栏不可用，run 详情请在画布节点里查看");
+				}
+			}, "⇥ 右栏打开") : null), h("div", { style: {
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column"
+			} }, tab === "pipeline" ? h(PipelinePanel, {
 				active,
 				api,
 				runId: activeRun ? activeRun.id : null,
@@ -2518,11 +4057,12 @@ window.__ModuleLoader__.load({
 				api,
 				onRefresh: refresh,
 				sessionId: props.sessionId,
+				openArtifact: props.openArtifact,
 				onShowRun: (rid) => {
 					setTab("pipeline");
 					setRunId(rid);
 				}
-			}));
+			})));
 		}
 		if (typeof document !== "undefined") {
 			const styleEl = document.createElement("style");
@@ -2532,10 +4072,65 @@ window.__ModuleLoader__.load({
 @keyframes tf-flow { from { stroke-dashoffset: 0 } to { stroke-dashoffset: -28 } }`;
 			document.head.appendChild(styleEl);
 		}
-		/** 注册 conversation.view tab「团队工作台」+ input.right 团队选择按钮。 */
+		/**
+		* 注册三处：
+		* 1. `sidebar.panellist` + `main`（key = 'teamflow'）：**全局面板**——侧边栏图标 + 中央主区。
+		*    两者 id 必须一致：宿主 `layout.selectPanel(id)` 对未注册的 main key 直接抛错。
+		* 2. `conversation.view` tab（会话内工作台）+ `conversation.input.right`（团队选择按钮）。
+		* 3. 右栏 run 详情 tab 类型 + body（`sidebarRightTabs` + `sidebar.right.pane.tab`）。
+		*/
 		async function apply(ctx) {
 			await ctx.remote.$mount(TEAMFLOW_REMOTE_CONTRIBUTION);
 			const teamflow = ctx.get("remote.teamflow");
+			const openResourceSafe = (address, label, quiet) => {
+				try {
+					const sidebarRight = ctx.get("sidebarRight");
+					if (!sidebarRight || typeof sidebarRight.openResource !== "function") {
+						if (!quiet) console.warn("[teamflow] 右侧栏服务不可用", label);
+						return false;
+					}
+					sidebarRight.openResource(address);
+					return true;
+				} catch (e) {
+					if (!quiet) console.warn("[teamflow] 打开右侧栏失败", label, e && e.message);
+					return false;
+				}
+			};
+			const openArtifact = (address, name) => {
+				openResourceSafe(address, name);
+			};
+			ctx.slots.inject("sidebar.panellist", () => ctx.slots.register({
+				name: "sidebar.panellist",
+				id: "teamflow",
+				order: 60,
+				label: "团队工作台"
+			}, TeamflowPanelIcon));
+			ctx.slots.inject("main", () => ctx.slots.register({
+				name: "main",
+				key: "teamflow",
+				inject: () => ({
+					remote: teamflow,
+					sessions: ctx.get("sessions"),
+					layout: ctx.get("layout"),
+					openResource: openResourceSafe,
+					openArtifact
+				})
+			}, GlobalPanel));
+			try {
+				const tabs = ctx.get("sidebarRightTabs");
+				if (tabs && typeof tabs.register === "function") ctx.effect(() => tabs.register(runTabDefinition()), "teamflow: run tab type");
+				else console.warn("[teamflow] sidebarRightTabs 不可用，run 详情右栏 tab 未注册（面板内联详情仍可用）");
+			} catch (e) {
+				console.warn("[teamflow] 注册 run tab 类型失败", e && e.message);
+			}
+			ctx.slots.inject("sidebar.right.pane.tab", () => ctx.slots.register({
+				name: "sidebar.right.pane.tab",
+				key: RUN_TAB_ID,
+				inject: () => ({
+					remote: teamflow,
+					openArtifact
+				})
+			}, RunDetailTab));
 			ctx.slots.inject("conversation.view", () => ctx.slots.register({
 				name: "conversation.view",
 				id: "teamflow",
@@ -2544,7 +4139,9 @@ window.__ModuleLoader__.load({
 				inject: (sessionId) => ({
 					sessionId,
 					remote: teamflow,
-					sessions: ctx.get("sessions")
+					sessions: ctx.get("sessions"),
+					openArtifact,
+					openResource: openResourceSafe
 				})
 			}, TeamFlowView));
 			ctx.slots.inject("conversation.input.right", () => ctx.slots.register({