@qilin-agent/client-ui-sidebar-tasks 0.0.0-stage → 3.1.4

package/lib/client.js

@@ -0,0 +1,2006 @@
+window.__ModuleLoader__.load({
+	id: "@qilin-agent/client-ui-sidebar-tasks",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let _qilin_agent_client_ui_primitives = require("@qilin-agent/client-ui-primitives");
+		let react_jsx_runtime = require("react/jsx-runtime");
+		let react = require("react");
+		let _qilin_agent_client_store = require("@qilin-agent/client-store");
+		//#region lib/types/client/definition.js
+		/** The tab kind this package owns; `ctx.sidebarRight.openTab` names it. */
+		const TASKS_KIND = "tasks";
+		/** This implementation's identity in the tab system, and the key its body registers under. */
+		const TASKS_ID = "@qilin-agent/client-ui-sidebar-tasks";
+		/**
+		* The tasks type's registry definition.
+		* @param t - namespace-bound translate, read fresh on every label call.
+		* @returns the definition to register.
+		*/
+		function tasksDefinition(t) {
+			return {
+				id: TASKS_ID,
+				kind: TASKS_KIND,
+				priority: "builtin",
+				label: () => t("type.label"),
+				icon: _qilin_agent_client_ui_primitives.IconChecklistOutline14,
+				single: true,
+				title: () => t("type.label"),
+				guide: [{
+					id: "tasks",
+					order: 40,
+					title: () => t("guide.title"),
+					description: () => t("guide.description"),
+					icon: _qilin_agent_client_ui_primitives.IconChecklistOutline14
+				}]
+			};
+		}
+		//#endregion
+		//#region lib/types/client/face.js
+		/**
+		* Bind the page's actions to the service and Remote they call.
+		* @param sessions - the Client Session service's navigation and catalog reads.
+		* @param subagents - the generated `subagents` Remote namespace.
+		* @param jobs - the client jobs roster and its watcher.
+		* @returns the Slot `inject` face the body receives.
+		*/
+		function tasksFace(sessions, subagents, jobs) {
+			return {
+				...jobs,
+				openChild(target) {
+					sessions.openSubagent(target);
+				},
+				refresh(parentSessionId) {
+					sessions.refreshProjections(parentSessionId);
+				},
+				interruptChild(childSessionId, parentSessionId) {
+					subagents.interruptByParent(childSessionId, parentSessionId, "continuable");
+				}
+			};
+		}
+		//#endregion
+		//#region lib/types/client/rows.js
+		/** Stable empty job list, so a Session without jobs keeps one array identity. */
+		const NO_JOBS = [];
+		/**
+		* The read state of one parent's catalog, as the page draws it. A snapshot that
+		* has not settled is `loading` while it carries no catalog value and `ready`
+		* once it does, so a Session the Host described as childless reads as a settled
+		* empty catalog rather than as a pending one.
+		* @param snapshot - the Session's projection snapshot.
+		* @returns the catalog read state.
+		*/
+		function catalogState(snapshot) {
+			if (snapshot.state !== "idle") return snapshot.state;
+			return snapshot.values.subagentCatalog === void 0 ? "loading" : "ready";
+		}
+		/**
+		* Project the shared per-Session projection snapshots into the catalogs the page draws.
+		* @param projections - projection snapshots keyed by Session id.
+		* @param running - whether the Session list currently reports a Session as running.
+		* @returns one catalog per projected Session.
+		*/
+		function catalogsOf(projections, running) {
+			const catalogs = {};
+			for (const [key, snapshot] of Object.entries(projections)) {
+				const id = key;
+				const entries = snapshot.values.subagentCatalog ?? [];
+				catalogs[id] = {
+					state: catalogState(snapshot),
+					error: snapshot.error,
+					entries: entries.map((entry) => {
+						const below = projections[entry.id];
+						return {
+							kind: "child",
+							id: entry.id,
+							mode: entry.mode,
+							...entry.label === void 0 ? {} : { label: entry.label },
+							activity: running(entry.id) ? "running" : "inactive",
+							hasChildren: below === void 0 || catalogState(below) !== "ready" || (below.values.subagentCatalog?.length ?? 0) > 0
+						};
+					})
+				};
+			}
+			return catalogs;
+		}
+		/**
+		* One catalog entry as a row, under the parent whose catalog reported it.
+		* @param entry - the catalog's durable direct-child row.
+		* @param parentSessionId - the Session the entry is a direct child of.
+		* @param depth - nesting level under the section's root.
+		* @returns the row the section draws.
+		*/
+		function rowOf(entry, parentSessionId, depth) {
+			if (entry.kind === "diagnostic") return {
+				kind: "diagnostic",
+				id: entry.id,
+				depth,
+				reason: entry.reason
+			};
+			const address = {
+				parentSessionId,
+				childSessionId: entry.id,
+				mode: entry.mode
+			};
+			return {
+				kind: "child",
+				id: entry.id,
+				address,
+				label: entry.label ?? entry.id,
+				depth,
+				running: entry.activity === "running"
+			};
+		}
+		/**
+		* Flatten one Session's subagent topology from the catalogs in hand.
+		*
+		* A level is one parent's catalog, and the walk descends only into children
+		* whose own catalog has been read; a child the page has never opened
+		* contributes its own row and no rows below it. Siblings are newest-first
+		* because the Host orders a catalog by durable creation time. The seen set
+		* makes a repeated or cyclic parent an ordinary skip rather than an endless
+		* walk.
+		* @param catalogs - direct-child catalogs keyed by parent Session id.
+		* @param rootSessionId - the Session the section is rooted at.
+		* @returns rows in display order, depth-first.
+		*/
+		function subagentRows(catalogs, rootSessionId) {
+			const rows = [];
+			const seen = /* @__PURE__ */ new Set();
+			const visit = (parentSessionId, depth) => {
+				const catalog = catalogs[parentSessionId];
+				if (catalog === void 0) return;
+				for (const entry of [...catalog.entries].reverse()) {
+					if (seen.has(entry.id)) continue;
+					seen.add(entry.id);
+					rows.push(rowOf(entry, parentSessionId, depth));
+					if (entry.kind === "child" && entry.hasChildren) visit(entry.id, depth + 1);
+				}
+			};
+			visit(rootSessionId, 0);
+			return rows;
+		}
+		/**
+		* How many rows the subagents section counts as children. A diagnostic row is a
+		* child the Host could not describe, so it is drawn but never counted.
+		* @param rows - the section's rows.
+		* @returns the number of child rows.
+		*/
+		function childRowCount(rows) {
+			return rows.filter((row) => row.kind === "child").length;
+		}
+		/**
+		* The subagents section's stated total: the direct children the catalog
+		* reports, or the descendants the summary lineage records, whichever is
+		* greater.
+		*
+		* The lineage reaches subagents below the direct children, and the catalog is
+		* authoritative while the lineage is still converging, so taking the greater
+		* of the two is never an undercount during that window.
+		* @param children - child rows the catalog reports.
+		* @param descendants - lineage totals keyed by possible parent.
+		* @param rootSessionId - the Session the section is rooted at.
+		* @returns the total the section header states.
+		*/
+		function subagentTotal(children, descendants, rootSessionId) {
+			return Math.max(children, descendants.get(rootSessionId)?.count ?? 0);
+		}
+		/**
+		* Whether a job remains active in the registry.
+		* @param job - the Session job row.
+		* @returns whether the job is running or stopping.
+		*/
+		function isLive(job) {
+			return job.status === "running" || job.status === "stopping";
+		}
+		/**
+		* Live rows first in start order, then settled rows newest-first. Two jobs that
+		* settled in the same millisecond fall back to the later start, which is the
+		* same newest-first reading the settled order already uses, so the sort never
+		* depends on the Host's map iteration.
+		* @param jobs - the Session's job rows.
+		* @returns a new array in display order.
+		*/
+		function orderedJobs(jobs) {
+			return [...jobs].sort((left, right) => {
+				const liveLeft = isLive(left);
+				if (liveLeft !== isLive(right)) return liveLeft ? -1 : 1;
+				if (liveLeft) return left.startedAt - right.startedAt;
+				const settled = (right.finishedAt ?? right.startedAt) - (left.finishedAt ?? left.startedAt);
+				return settled !== 0 ? settled : right.startedAt - left.startedAt;
+			});
+		}
+		/**
+		* Elapsed milliseconds for one job row.
+		* @param job - the job.
+		* @param now - the clock sample a live duration measures against.
+		* @returns its span so far while it runs, its own span once it settled.
+		*/
+		function jobElapsed(job, now) {
+			return isLive(job) ? now - job.startedAt : (job.finishedAt ?? job.startedAt) - job.startedAt;
+		}
+		/**
+		* Elapsed time in at most two adjacent units. A background job that outlives an
+		* hour is already exceptional, so hours is the widest unit.
+		* @param elapsedMs - elapsed milliseconds.
+		* @param t - namespace-bound translate.
+		* @returns the duration as the dictionary phrases it.
+		*/
+		function formatDuration(elapsedMs, t) {
+			const total = Math.max(0, Math.floor(elapsedMs / 1e3));
+			const seconds = total % 60;
+			const minutes = Math.floor(total / 60) % 60;
+			const hours = Math.floor(total / 3600);
+			if (hours > 0) return t("tasks.duration.hours", {
+				hours,
+				minutes
+			});
+			if (minutes > 0) return t("tasks.duration.minutes", {
+				minutes,
+				seconds
+			});
+			return t("tasks.duration.seconds", { seconds });
+		}
+		/** Closed-union exhaustiveness fence for the wire status set. */
+		/* v8 ignore next 3 -- closed-union backstop; only reached if a status is forged */
+		function assertNever(value) {
+			throw new Error(`unhandled job status: ${JSON.stringify(value)}`);
+		}
+		/**
+		* Human status word for a row that carries no producer detail.
+		* @param status - the wire status.
+		* @param t - namespace-bound translate.
+		* @returns the word the row shows.
+		*/
+		function jobStatusLabel(status, t) {
+			switch (status) {
+				case "running": return t("tasks.status.running");
+				case "stopping": return t("tasks.status.stopping");
+				case "completed": return t("tasks.status.completed");
+				case "killed": return t("tasks.status.killed");
+				case "failed": return t("tasks.status.failed");
+				/* v8 ignore next -- closed wire status union */
+				default: return assertNever(status);
+			}
+		}
+		/**
+		* Status marker semantics. `stopping` and `killed` share the attention colour:
+		* both mean the work ended (or is ending) on request rather than on its own.
+		* @param status - the wire status.
+		* @returns the state the dot draws.
+		*/
+		function jobDotState(status) {
+			switch (status) {
+				case "running": return "ongoing";
+				case "stopping": return "warning";
+				case "completed": return "done";
+				case "killed": return "warning";
+				case "failed": return "error";
+				/* v8 ignore next -- closed wire status union */
+				default: return assertNever(status);
+			}
+		}
+		/**
+		* The work a chip badge counts for one Session: direct-child catalog rows whose
+		* activity is `running`, plus the jobs the registry still holds open.
+		*
+		* A chip re-renders on every strip pass, so this reads the two snapshots
+		* directly instead of walking the summary lineage; a running grandchild implies
+		* its parent is running too, so the direct children already account for work
+		* below them.
+		* @param catalogs - direct-child catalogs keyed by parent Session id.
+		* @param jobs - the Session's job rows.
+		* @param sessionId - the Session the chip belongs to.
+		* @returns the count, zero when nothing is active.
+		*/
+		function activeWorkCount(catalogs, jobs, sessionId) {
+			return (catalogs[sessionId]?.entries ?? []).filter((entry) => entry.kind === "child" && entry.activity === "running").length + jobs.filter(isLive).length;
+		}
+		//#endregion
+		//#region lib/types/client/work-sources.js
+		/**
+		* The live sources both tasks surfaces read: the Session list's summaries and
+		* running-subagent catalogs, and this Session's background-job rows.
+		*
+		* The surface owns the roster subscription for as long as it draws, so the hook
+		* keeps it here rather than in either component.
+		*/
+		/**
+		* Read the Session list and the job roster once per render and derive the
+		* running-work catalogs from them.
+		* @param sessionId - the Session whose job rows and subagent topology to read.
+		* @param seats - the standing Session list, the bound jobs roster, and its watcher.
+		* @returns this Session's job rows, the Session list summaries the surfaces fold over, and the running catalogs keyed by Session.
+		*/
+		function useWorkSources(sessionId, seats) {
+			const { useSessions, useJobs, watchRows } = seats;
+			const projections = useSessions((state) => state.projectionsBySession);
+			const summaries = useSessions((state) => state.byId);
+			const jobs = useJobs((state) => state.rows[sessionId]) ?? NO_JOBS;
+			(0, react.useEffect)(() => watchRows(sessionId), [sessionId, watchRows]);
+			return {
+				jobs,
+				summaries,
+				catalogs: (0, react.useMemo)(() => catalogsOf(projections, (id) => summaries[id]?.running === true), [projections, summaries])
+			};
+		}
+		//#endregion
+		//#region lib/types/client/TasksBadge.js
+		/**
+		* Render the running-work count, or nothing when the Session is idle.
+		* @param props - the Session scope's standard props.
+		* @returns the count, or null when no subagent and no job is running.
+		*/
+		function TasksBadge({ sessionId, useSessions, useJobs, watchRows }) {
+			const { catalogs, jobs } = useWorkSources(sessionId, {
+				useSessions,
+				useJobs,
+				watchRows
+			});
+			const active = activeWorkCount(catalogs, jobs, sessionId);
+			return active === 0 ? null : (0, react_jsx_runtime.jsx)(_qilin_agent_client_ui_primitives.Tag, {
+				tone: "outline",
+				children: active
+			});
+		}
+		//#endregion
+		//#region lib/types/client/locales.js
+		/** Dictionary namespace owned by this plugin. */
+		const NS = "sidebarTasks";
+		/** Simplified Chinese dictionary and key-set source of truth. */
+		const zh = {
+			"type.label": "任务",
+			"guide.title": "任务与子代理",
+			"guide.description": "查看子代理拓扑与后台任务",
+			empty: "这个会话还没有子代理或后台任务。",
+			"subagents.title": "子代理",
+			"subagents.count.one": "{count} 个子代理",
+			"subagents.count.other": "{count} 个子代理",
+			"subagents.loading": "正在读取子代理…",
+			"subagents.empty": "没有子代理",
+			"subagents.failed": "无法读取子代理目录",
+			"subagents.retry": "重试",
+			"subagents.refresh": "刷新子代理",
+			"subagents.interrupt": "中断",
+			"subagents.mode.oneShot": "一次性",
+			"subagents.mode.continuable": "可继续",
+			"subagents.diagnostic.corrupt": "这条子代理记录已损坏",
+			"subagents.diagnostic.unsupported": "这条子代理记录的版本不受支持",
+			"subagents.diagnostic.unavailable": "这条子代理记录暂不可读",
+			"tasks.title": "后台任务",
+			"tasks.count.one": "{count} 个后台任务",
+			"tasks.count.other": "{count} 个后台任务",
+			"tasks.empty": "没有后台任务",
+			"tasks.status.running": "运行中",
+			"tasks.status.stopping": "正在停止",
+			"tasks.status.completed": "已完成",
+			"tasks.status.killed": "已取消",
+			"tasks.status.failed": "已失败",
+			"tasks.duration.seconds": "{seconds}秒",
+			"tasks.duration.minutes": "{minutes}分{seconds}秒",
+			"tasks.duration.hours": "{hours}小时{minutes}分",
+			"tasks.duration.live": "已运行 {duration}",
+			"tasks.duration.done": "耗时 {duration}",
+			"more.expand": "展开更多（还有 {count} 条）",
+			"more.collapse": "收起",
+			"graph.toggle": "切换视图",
+			"graph.view": "图",
+			"graph.list": "列表",
+			"graph.zoomIn": "放大",
+			"graph.zoomOut": "缩小",
+			"graph.fit": "适配",
+			"graph.arrange": "自动整理",
+			"graph.mode.tree": "树形",
+			"graph.mode.compact": "紧凑",
+			"graph.mode.grid": "网格",
+			"graph.resetLayout": "重置布局",
+			"graph.status.running": "运行中",
+			"graph.status.idle": "空闲",
+			"graph.loading": "读取中…",
+			"graph.unphased": "未分相位",
+			"graph.badge.main": "主代理",
+			"graph.badge.subagent": "子代理",
+			"graph.badge.done": "已完成",
+			"graph.badge.standby": "待命",
+			"graph.badge.placeholder": "子代理",
+			"graph.badge.diagnostic": "不可读",
+			"graph.badge.run": "工作流",
+			"graph.badge.phase": "相位",
+			"graph.badge.member": "成员"
+		};
+		/** English dictionary, checked against the Chinese key set. */
+		const en = {
+			"type.label": "Tasks",
+			"guide.title": "Tasks and subagents",
+			"guide.description": "Review the subagent topology and background jobs",
+			empty: "This session has no subagents and no background jobs yet.",
+			"subagents.title": "Subagents",
+			"subagents.count.one": "{count} subagent",
+			"subagents.count.other": "{count} subagents",
+			"subagents.loading": "Reading subagents…",
+			"subagents.empty": "No subagents",
+			"subagents.failed": "Unable to read the subagent catalog",
+			"subagents.retry": "Retry",
+			"subagents.refresh": "Refresh subagents",
+			"subagents.interrupt": "Stop",
+			"subagents.mode.oneShot": "one-shot",
+			"subagents.mode.continuable": "continuable",
+			"subagents.diagnostic.corrupt": "This subagent record is damaged",
+			"subagents.diagnostic.unsupported": "This subagent record has an unsupported version",
+			"subagents.diagnostic.unavailable": "This subagent record is temporarily unreadable",
+			"tasks.title": "Background jobs",
+			"tasks.count.one": "{count} background job",
+			"tasks.count.other": "{count} background jobs",
+			"tasks.empty": "No background jobs",
+			"tasks.status.running": "running",
+			"tasks.status.stopping": "stopping",
+			"tasks.status.completed": "completed",
+			"tasks.status.killed": "cancelled",
+			"tasks.status.failed": "failed",
+			"tasks.duration.seconds": "{seconds}s",
+			"tasks.duration.minutes": "{minutes}m {seconds}s",
+			"tasks.duration.hours": "{hours}h {minutes}m",
+			"tasks.duration.live": "Running for {duration}",
+			"tasks.duration.done": "Took {duration}",
+			"more.expand": "Show more ({count} hidden)",
+			"more.collapse": "Show less",
+			"graph.toggle": "Switch view",
+			"graph.view": "Graph",
+			"graph.list": "List",
+			"graph.zoomIn": "Zoom in",
+			"graph.zoomOut": "Zoom out",
+			"graph.fit": "Fit",
+			"graph.arrange": "Arrange",
+			"graph.mode.tree": "Tree",
+			"graph.mode.compact": "Compact",
+			"graph.mode.grid": "Grid",
+			"graph.resetLayout": "Reset layout",
+			"graph.status.running": "running",
+			"graph.status.idle": "idle",
+			"graph.loading": "Loading…",
+			"graph.unphased": "Unphased",
+			"graph.badge.main": "Main agent",
+			"graph.badge.subagent": "Subagent",
+			"graph.badge.done": "Done",
+			"graph.badge.standby": "Standby",
+			"graph.badge.placeholder": "Subagent",
+			"graph.badge.diagnostic": "Unreadable",
+			"graph.badge.run": "Workflow",
+			"graph.badge.phase": "Phase",
+			"graph.badge.member": "Member"
+		};
+		//#endregion
+		//#region lib/types/client/tasks-graph-store.js
+		/**
+		* The tasks page's graph view state: which form the subagents section draws,
+		* which aggregate groups the user expanded, and the canvas's arrangement,
+		* manual node offsets, and camera — the state that survives the body's
+		* unmounts. One bucket per store instance; the registration is session-scoped,
+		* so a tree's framing comes back with its Session.
+		*/
+		/**
+		* Declare the graph view's store.
+		* @returns the store handle the registration declares.
+		*/
+		function createTasksGraphStore() {
+			return (0, _qilin_agent_client_store.defineStore)({
+				init: () => ({
+					view: "list",
+					expanded: {},
+					mode: "tree",
+					offsets: {},
+					camera: void 0
+				}),
+				actions: {
+					/**
+					* Switch the subagents section's form.
+					* @param d - draft state.
+					* @param view - the form to show.
+					*/
+					viewSet: (d, view) => {
+						d.view = view;
+					},
+					/**
+					* Expand or collapse one aggregate group. Collapsing removes the key, so
+					* the record stays minimal over long sessions.
+					* @param d - draft state.
+					* @param key - the aggregate's fold key.
+					*/
+					aggregateToggled: (d, key) => {
+						if (d.expanded[key] === true) Reflect.deleteProperty(d.expanded, key);
+						else d.expanded[key] = true;
+					},
+					/**
+					* Rearrange the canvas, dropping manual offsets and the camera.
+					* @param d - draft state.
+					* @param mode - the arrangement to apply.
+					*/
+					modeArranged: (d, mode) => {
+						d.mode = mode;
+						d.offsets = {};
+						d.camera = void 0;
+					},
+					/**
+					* Record one node drag's offsets. Offsets equal field-for-field to the
+					* ones in force write nothing, so a drag frame that settles cannot loop
+					* re-publishing itself.
+					* @param d - draft state.
+					* @param offsets - the offsets in force after this frame.
+					*/
+					offsetsDragged: (d, offsets) => {
+						const held = d.offsets;
+						const heldKeys = Object.keys(held);
+						const nextKeys = Object.keys(offsets);
+						if (heldKeys.length === nextKeys.length && heldKeys.every((key) => held[key]?.x === offsets[key]?.x && held[key]?.y === offsets[key]?.y)) return;
+						d.offsets = offsets;
+					},
+					/**
+					* Drop every manual offset.
+					* @param d - draft state.
+					*/
+					offsetsReset: (d) => {
+						d.offsets = {};
+					},
+					/**
+					* Move the canvas camera; an identical frame writes nothing.
+					* @param d - draft state.
+					* @param camera - the camera to put in force.
+					*/
+					cameraMoved: (d, camera) => {
+						const held = d.camera;
+						if (held !== void 0 && held.k === camera.k && held.tx === camera.tx && held.ty === camera.ty && held.userAdjusted === camera.userAdjusted) return;
+						d.camera = camera;
+					}
+				}
+			});
+		}
+		//#endregion
+		//#region ../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+		function r(e) {
+			var t, f, n = "";
+			if ("string" == typeof e || "number" == typeof e) n += e;
+			else if ("object" == typeof e) if (Array.isArray(e)) {
+				var o = e.length;
+				for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+			} else for (f in e) e[f] && (n && (n += " "), n += f);
+			return n;
+		}
+		function clsx() {
+			for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+			return n;
+		}
+		//#endregion
+		//#region lib/types/client/lineage.js
+		/** UI Sidebar Tasks-owned projection of descendant counts from Session summaries. */
+		/**
+		* Index uninterrupted subagent descendants under each ancestor.
+		* @param summaries - Session summaries keyed by id.
+		* @returns descendant totals keyed by possible parent id.
+		*/
+		function indexSubagentDescendants(summaries) {
+			const indexed = /* @__PURE__ */ new Map();
+			for (const descendant of Object.values(summaries)) {
+				if (descendant.origin !== "subagent") continue;
+				const seen = /* @__PURE__ */ new Set();
+				let current = descendant;
+				while (current?.origin === "subagent" && current.parentId !== void 0 && !seen.has(current.id)) {
+					seen.add(current.id);
+					const aggregate = indexed.get(current.parentId);
+					if (aggregate === void 0) indexed.set(current.parentId, {
+						count: 1,
+						runningCount: descendant.running ? 1 : 0
+					});
+					else {
+						aggregate.count += 1;
+						if (descendant.running) aggregate.runningCount += 1;
+					}
+					current = summaries[current.parentId];
+				}
+			}
+			return indexed;
+		}
+		/**
+		* How many summary children one parent has, for placeholders and subtree
+		* counts. The summary lineage reaches children the catalogs have not read,
+		* which is exactly the count a placeholder stands in for.
+		* @param summaries - Session summaries keyed by id.
+		* @param parentId - the parent whose children to count.
+		* @returns the number of recorded subagent children.
+		*/
+		function summaryChildCount(summaries, parentId) {
+			let count = 0;
+			for (const summary of Object.values(summaries)) if (summary.origin === "subagent" && summary.parentId === parentId) count += 1;
+			return count;
+		}
+		/**
+		* Build the tasks graph view model.
+		*
+		* A level is one parent's catalog, siblings in catalog order, and the walk
+		* descends only into a child whose own catalog has settled; a child the page
+		* has never read contributes one placeholder. The seen set makes a repeated
+		* or cyclic catalog an ordinary skip rather than an endless walk.
+		* @param input - the model's inputs.
+		* @returns pre-order nodes and the parent→children index.
+		*/
+		function buildTasksGraphModel(input) {
+			const { rootId, catalogs, summaries, expanded, currentSessionId, runs = [], labelOf, secondaryOf } = input;
+			const nodes = [];
+			const childrenOf = {};
+			const seen = /* @__PURE__ */ new Set();
+			/**
+			* One catalog-backed subagent node with its subtree attached below it.
+			*
+			* `parentId` is where the node hangs (a phase box re-parents a real child);
+			* `navParent` stays the Session whose catalog the entry came from, because
+			* the address every navigation and interrupt travels through must name the
+			* real durable parent.
+			*/
+			const buildSubtreeNode = (entry, parentId, navParent, depth) => {
+				const node = {
+					id: entry.id,
+					kind: "subagent",
+					parentId,
+					depth,
+					label: labelOf(entry, summaries[entry.id]),
+					secondary: secondaryOf(entry),
+					running: entry.activity === "running",
+					current: entry.id === currentSessionId,
+					address: {
+						parentSessionId: navParent,
+						childSessionId: entry.id,
+						mode: entry.mode
+					},
+					childCount: entry.hasChildren ? summaryChildCount(summaries, entry.id) : void 0,
+					aggregateKey: void 0
+				};
+				seen.add(entry.id);
+				nodes.push(node);
+				const below = catalogs[entry.id];
+				if (entry.hasChildren && below?.state !== "ready") {
+					const placeholder = {
+						id: `placeholder:${entry.id}`,
+						kind: "placeholder",
+						parentId: entry.id,
+						depth: depth + 1,
+						label: "",
+						secondary: "",
+						running: false,
+						current: false,
+						address: void 0,
+						childCount: summaryChildCount(summaries, entry.id),
+						aggregateKey: void 0
+					};
+					childrenOf[entry.id] = [placeholder];
+					nodes.push(placeholder);
+				} else if (entry.hasChildren) childrenOf[entry.id] = visit(entry.id, depth + 1);
+				return node;
+			};
+			/** One run node, its phase boxes, and their re-parented or synthesized members. */
+			const buildRun = (run, parentId, depth) => {
+				const memberCount = run.phases.reduce((sum, phase) => sum + phase.members.length, 0);
+				const runNode = {
+					id: `run:${run.runId}`,
+					kind: "run",
+					parentId,
+					depth,
+					label: run.name,
+					secondary: `${memberCount}`,
+					running: run.running,
+					current: false,
+					address: void 0,
+					childCount: memberCount,
+					aggregateKey: void 0
+				};
+				nodes.push(runNode);
+				const runChildren = [];
+				for (const phase of run.phases) {
+					const phaseNode = {
+						id: `phase:${run.runId}:${phase.phase ?? ""}`,
+						kind: "phase",
+						parentId: runNode.id,
+						depth: depth + 1,
+						label: phase.phase ?? "",
+						secondary: `${phase.members.length}`,
+						running: false,
+						current: false,
+						address: void 0,
+						childCount: phase.members.length,
+						aggregateKey: void 0
+					};
+					nodes.push(phaseNode);
+					runChildren.push(phaseNode);
+					const phaseChildren = [];
+					for (const member of phase.members) {
+						const real = catalogs[parentId]?.entries.find((entry) => entry.kind === "child" && entry.id === member.childId);
+						if (real !== void 0) {
+							if (!seen.has(member.childId)) phaseChildren.push(buildSubtreeNode(real, phaseNode.id, parentId, depth + 2));
+							continue;
+						}
+						const node = {
+							id: member.childId,
+							kind: "member",
+							parentId: phaseNode.id,
+							depth: depth + 2,
+							label: member.label,
+							secondary: member.outcome ?? "",
+							running: member.outcome === void 0,
+							current: member.childId === currentSessionId,
+							address: {
+								parentSessionId: parentId,
+								childSessionId: member.childId,
+								mode: "continuable"
+							},
+							childCount: void 0,
+							aggregateKey: void 0
+						};
+						nodes.push(node);
+						phaseChildren.push(node);
+					}
+					childrenOf[phaseNode.id] = phaseChildren;
+				}
+				childrenOf[runNode.id] = runChildren;
+				return runNode;
+			};
+			/** Walk one parent's catalog into that level's child nodes. */
+			const visit = (parentSessionId, depth) => {
+				const entries = catalogs[parentSessionId]?.entries ?? [];
+				const runsHere = runs.filter((run) => run.originSessionId === parentSessionId);
+				const claimed = /* @__PURE__ */ new Set();
+				for (const run of runsHere) for (const phase of run.phases) for (const member of phase.members) claimed.add(member.childId);
+				const live = [];
+				const done = [];
+				const standby = [];
+				for (const entry of entries) {
+					if (entry.kind === "diagnostic") {
+						live.push(entry);
+						continue;
+					}
+					if (claimed.has(entry.id)) continue;
+					if (entry.activity === "running") live.push(entry);
+					else if (entry.mode === "continuable") standby.push(entry);
+					else done.push(entry);
+				}
+				const children = [];
+				for (const entry of live) {
+					if (entry.kind === "diagnostic") {
+						const node = {
+							id: entry.id,
+							kind: "diagnostic",
+							parentId: parentSessionId,
+							depth,
+							label: entry.id,
+							secondary: "",
+							running: false,
+							current: false,
+							address: void 0,
+							childCount: void 0,
+							aggregateKey: void 0
+						};
+						seen.add(entry.id);
+						children.push(node);
+						nodes.push(node);
+						continue;
+					}
+					if (seen.has(entry.id)) continue;
+					children.push(buildSubtreeNode(entry, parentSessionId, parentSessionId, depth));
+				}
+				for (const group of [{
+					kind: "done-agg",
+					entries: done
+				}, {
+					kind: "standby-agg",
+					entries: standby
+				}]) {
+					const key = `${group.kind}:${parentSessionId}`;
+					if (group.entries.length < 6 || expanded.has(key)) {
+						for (const entry of group.entries) {
+							if (seen.has(entry.id)) continue;
+							children.push(buildSubtreeNode(entry, parentSessionId, parentSessionId, depth));
+						}
+						continue;
+					}
+					const names = group.entries.slice(0, 2).map((entry) => labelOf(entry, summaries[entry.id]));
+					const node = {
+						id: key,
+						kind: group.kind,
+						parentId: parentSessionId,
+						depth,
+						label: names.join(" · "),
+						secondary: `${group.entries.length}`,
+						running: false,
+						current: false,
+						address: void 0,
+						childCount: group.entries.length,
+						aggregateKey: key
+					};
+					children.push(node);
+					nodes.push(node);
+				}
+				for (const run of runsHere) children.push(buildRun(run, parentSessionId, depth));
+				childrenOf[parentSessionId] = children;
+				return children;
+			};
+			const rootSummary = summaries[rootId];
+			const rootNode = {
+				id: rootId,
+				kind: "main",
+				parentId: void 0,
+				depth: 0,
+				label: rootSummary === void 0 || rootSummary.displayTitle === "" ? rootId : rootSummary.displayTitle,
+				secondary: "",
+				running: rootSummary?.running === true,
+				current: currentSessionId === rootId,
+				address: void 0,
+				childCount: void 0,
+				aggregateKey: void 0
+			};
+			nodes.push(rootNode);
+			seen.add(rootId);
+			childrenOf[rootId] = visit(rootId, 1);
+			return {
+				nodes,
+				childrenOf
+			};
+		}
+		/** Per-mode gaps: horizontal between siblings / vertical between depth rows. */
+		const MODE_GAPS = {
+			tree: {
+				h: 36,
+				v: 64
+			},
+			compact: {
+				h: 14,
+				v: 38
+			},
+			grid: {
+				h: 10,
+				v: 26
+			}
+		};
+		/**
+		* Lay out the view model.
+		* @param model - the view model (pre-order nodes plus the children index).
+		* @param offsets - manual node offsets applied after auto placement.
+		* @param mode - the arrangement mode.
+		* @returns node boxes, edge paths, and the content box.
+		*/
+		function layoutTasksGraph(model, offsets = {}, mode = "tree") {
+			const boxes = [];
+			const edges = [];
+			const boxOf = /* @__PURE__ */ new Map();
+			let maxDepth = 0;
+			const vGap = MODE_GAPS[mode].v;
+			const hGap = MODE_GAPS[mode].h;
+			const rowSpan = 66 + vGap;
+			/** Place one subtree at `offsetX`; returns the width it occupies. */
+			const placeAt = (node, depth, offsetX) => {
+				maxDepth = Math.max(maxDepth, depth);
+				const kids = model.childrenOf[node.id] ?? [];
+				const y = depth * rowSpan;
+				if (kids.length === 0) {
+					const box = {
+						node,
+						x: offsetX,
+						y,
+						w: 208,
+						h: 66
+					};
+					boxes.push(box);
+					boxOf.set(node.id, box);
+					return 208;
+				}
+				let childX = offsetX;
+				let childEnd = offsetX;
+				for (const kid of kids) {
+					const w = placeAt(kid, depth + 1, childX);
+					childX += w + hGap;
+					childEnd = Math.max(childEnd, childX - hGap);
+				}
+				const subtreeWidth = childEnd - offsetX;
+				const box = {
+					node,
+					x: offsetX + (subtreeWidth - 208) / 2,
+					y,
+					w: 208,
+					h: 66
+				};
+				boxes.push(box);
+				boxOf.set(node.id, box);
+				return subtreeWidth;
+			};
+			/** Pre-measure one subtree's occupied width, for root centering. */
+			const measure = (id) => {
+				const kids = model.childrenOf[id] ?? [];
+				if (kids.length === 0) return 208;
+				let w = 0;
+				for (const kid of kids) w += measure(kid.id) + hGap;
+				return Math.max(208, w - hGap);
+			};
+			const rootNode = model.nodes[0];
+			let width = 208;
+			if (mode === "grid") {
+				const byDepth = /* @__PURE__ */ new Map();
+				for (const node of model.nodes) {
+					const row = byDepth.get(node.depth);
+					if (row === void 0) byDepth.set(node.depth, [node]);
+					else row.push(node);
+				}
+				let cursorY = 0;
+				for (const depth of [...byDepth.keys()].sort((left, right) => left - right)) {
+					/* v8 ignore next -- every keyed depth has a row. */
+					const row = byDepth.get(depth) ?? [];
+					const cols = Math.min(6, row.length);
+					const rowWidth = cols * 208 + (cols - 1) * hGap;
+					row.forEach((node, index) => {
+						const col = index % cols;
+						const line = Math.floor(index / cols);
+						const box = {
+							node,
+							x: col * (208 + hGap),
+							y: cursorY + line * rowSpan,
+							w: 208,
+							h: 66
+						};
+						boxes.push(box);
+						boxOf.set(node.id, box);
+					});
+					width = Math.max(width, rowWidth);
+					cursorY += Math.ceil(row.length / cols) * rowSpan;
+					maxDepth = Math.max(maxDepth, depth);
+				}
+			} else if (rootNode !== void 0) {
+				const roots = model.childrenOf[rootNode.id] ?? [];
+				let span = 0;
+				for (const kid of roots) span += measure(kid.id) + hGap;
+				span = Math.max(span - hGap, 208);
+				placeAt(rootNode, 0, 0);
+				width = span + hGap * 2;
+			}
+			let minX = 0;
+			let minY = 0;
+			let maxX = 0;
+			let maxY = 0;
+			const placed = boxes.map((box) => {
+				const offset = offsets[box.node.id];
+				if (offset === void 0) return box;
+				return {
+					...box,
+					x: box.x + offset.x,
+					y: box.y + offset.y
+				};
+			});
+			for (const box of placed) {
+				boxOf.set(box.node.id, box);
+				minX = Math.min(minX, box.x);
+				minY = Math.min(minY, box.y);
+				maxX = Math.max(maxX, box.x + box.w);
+				maxY = Math.max(maxY, box.y + box.h);
+			}
+			for (const box of placed) for (const kid of model.childrenOf[box.node.id] ?? []) {
+				const child = boxOf.get(kid.id);
+				/* v8 ignore next -- placement places every child before this walk. */
+				if (child === void 0) continue;
+				const x1 = box.x + box.w / 2;
+				const y1 = box.y + box.h;
+				const x2 = child.x + child.w / 2;
+				const y2 = child.y;
+				const bend = Math.max(vGap / 2, 18);
+				edges.push({
+					id: `${box.node.id}->${kid.id}`,
+					d: `M ${x1} ${y1} C ${x1} ${y1 + bend}, ${x2} ${y2 - bend}, ${x2} ${y2}`,
+					to: kid.id
+				});
+			}
+			const height = Math.max(maxY, (maxDepth + 1) * rowSpan);
+			return {
+				nodes: placed,
+				edges,
+				width: Math.max(width, maxX),
+				height,
+				minX,
+				minY
+			};
+		}
+		/**
+		* Every id in one node's subtree, the node itself first.
+		* @param model - the view model, for the children graph.
+		* @param nodeId - the subtree root.
+		* @returns the subtree ids in depth-first order.
+		*/
+		function subtreeIds(model, nodeId) {
+			const ids = [];
+			const walk = (id) => {
+				ids.push(id);
+				for (const kid of model.childrenOf[id] ?? []) walk(kid.id);
+			};
+			walk(nodeId);
+			return ids;
+		}
+		/**
+		* The offsets after dragging one node by (dx, dy).
+		*
+		* Always computed from the offsets captured when the gesture started plus the
+		* total delta, so a long drag cannot accumulate rounding drift. With
+		* `subtree` the descendants ride along — the default, since a card that owns
+		* other cards moves them naturally; the Alt key drags the single card.
+		* @param model - the view model, for the children graph.
+		* @param base - the offsets captured at gesture start.
+		* @param nodeId - the dragged node.
+		* @param dx - the total horizontal delta.
+		* @param dy - the total vertical delta.
+		* @param subtree - whether the node's descendants move too.
+		* @returns the next offsets.
+		*/
+		function dragOffsets(model, base, nodeId, dx, dy, subtree) {
+			const next = { ...base };
+			for (const id of subtree ? subtreeIds(model, nodeId) : [nodeId]) {
+				const current = base[id] ?? {
+					x: 0,
+					y: 0
+				};
+				next[id] = {
+					x: current.x + dx,
+					y: current.y + dy
+				};
+			}
+			return next;
+		}
+		/**
+		* Whether any manual offset is in effect; drives the reset affordance.
+		* @param offsets - the offsets in force.
+		* @returns whether at least one node is displaced.
+		*/
+		function hasOffsets(offsets) {
+			return Object.keys(offsets).length > 0;
+		}
+		//#endregion
+		//#region \0qilin-css:/home/runner/work/QiLin/QiLin/packages/client/ui-sidebar-tasks/src/client/TasksGraph.module.css.mjs
+		const css$1 = ".IZCJ0W_wrap{cursor:grab;touch-action:none;border:.5px solid var(--qilin-alias-border-l3);border-radius:10px;flex:none;height:clamp(280px,60vh,520px);margin:0 10px;position:relative;overflow:hidden}.IZCJ0W_wrap:active{cursor:grabbing}.IZCJ0W_svg{user-select:none;width:100%;height:100%;display:block}.IZCJ0W_edge{fill:none;stroke:var(--qilin-alias-border-l1);stroke-width:1.5px;opacity:.9}.IZCJ0W_card{fill:#0000;stroke:var(--qilin-alias-border-l2);stroke-width:1px}.IZCJ0W_sep{stroke:var(--qilin-alias-border-l2);stroke-width:1px}.IZCJ0W_bar{fill:var(--qilin-alias-interactive-bg-hover)}.IZCJ0W_badge{fill:var(--qilin-alias-label-tertiary);letter-spacing:.04em;font-size:9px}.IZCJ0W_label{fill:var(--qilin-alias-label-primary);font-size:12px}.IZCJ0W_status{fill:var(--qilin-alias-label-secondary);font-size:10px}.IZCJ0W_dotRunning{fill:var(--qilin-alias-interactive-bg-hover-accent)}.IZCJ0W_dotIdle{fill:var(--qilin-alias-label-tertiary)}.IZCJ0W_nodeCurrent .IZCJ0W_card{stroke:var(--qilin-alias-interactive-bg-hover-accent);stroke-width:1.6px}.IZCJ0W_nodeDone .IZCJ0W_sep,.IZCJ0W_nodeDone .IZCJ0W_bar{opacity:.4}.IZCJ0W_nodeStandby .IZCJ0W_card{stroke-dasharray:2 2;opacity:.75}.IZCJ0W_nodeStandby .IZCJ0W_bar{opacity:.5}.IZCJ0W_nodePlaceholder .IZCJ0W_card{stroke-dasharray:4 3}.IZCJ0W_nodeRun .IZCJ0W_card{stroke-width:1.4px}.IZCJ0W_nodePhase .IZCJ0W_card{stroke-dasharray:3 2}.IZCJ0W_node{cursor:grab}.IZCJ0W_nodeDragging{cursor:grabbing}.IZCJ0W_nodeDragging .IZCJ0W_card{stroke:var(--qilin-alias-interactive-bg-hover-accent);stroke-width:1.6px}.IZCJ0W_controls{align-items:center;gap:4px;display:flex;position:absolute;bottom:8px;right:8px}.IZCJ0W_controls button{min-width:26px;height:24px;color:var(--qilin-alias-label-secondary);cursor:pointer;border:.5px solid var(--qilin-alias-border-l2);background:0 0;border-radius:6px;padding:0 8px;font-size:11px}.IZCJ0W_controls button:hover{color:var(--qilin-alias-label-primary);background:var(--qilin-alias-interactive-bg-hover)}.IZCJ0W_modes{background:var(--qilin-alias-interactive-bg-hover);border-radius:8px;gap:2px;padding:2px;display:flex}.IZCJ0W_mode{min-width:0;color:var(--qilin-alias-label-secondary);font:var(--qilin-font-xxxs-11);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 6px;line-height:14px}.IZCJ0W_mode:hover{color:var(--qilin-alias-label-primary)}.IZCJ0W_modeActive{color:var(--qilin-alias-label-primary);font:var(--qilin-font-xxxs-strong-11);background:var(--qilin-alias-bg-layer-2,var(--qilin-alias-bg-base))}.IZCJ0W_reset{min-width:0;color:var(--qilin-alias-label-secondary);font:var(--qilin-font-xxxs-11);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:2px 6px;line-height:14px}.IZCJ0W_reset:hover{color:var(--qilin-alias-label-primary);background:var(--qilin-alias-interactive-bg-hover)}";
+		const tagId$1 = "@qilin-agent/client-ui-sidebar-tasks/TasksGraph.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@qilin-agent/client-ui-sidebar-tasks";
+			tag.dataset.pluginCss = tagId$1;
+			tag.textContent = css$1;
+			document.head.appendChild(tag);
+		}
+		var TasksGraph_module_css_default = {
+			"badge": "IZCJ0W_badge",
+			"bar": "IZCJ0W_bar",
+			"card": "IZCJ0W_card",
+			"controls": "IZCJ0W_controls",
+			"dotIdle": "IZCJ0W_dotIdle",
+			"dotRunning": "IZCJ0W_dotRunning",
+			"edge": "IZCJ0W_edge",
+			"label": "IZCJ0W_label",
+			"mode": "IZCJ0W_mode",
+			"modeActive": "IZCJ0W_modeActive",
+			"modes": "IZCJ0W_modes",
+			"node": "IZCJ0W_node",
+			"nodeCurrent": "IZCJ0W_nodeCurrent",
+			"nodeDone": "IZCJ0W_nodeDone",
+			"nodeDragging": "IZCJ0W_nodeDragging",
+			"nodePhase": "IZCJ0W_nodePhase",
+			"nodePlaceholder": "IZCJ0W_nodePlaceholder",
+			"nodeRun": "IZCJ0W_nodeRun",
+			"nodeStandby": "IZCJ0W_nodeStandby",
+			"reset": "IZCJ0W_reset",
+			"sep": "IZCJ0W_sep",
+			"status": "IZCJ0W_status",
+			"svg": "IZCJ0W_svg",
+			"wrap": "IZCJ0W_wrap"
+		};
+		//#endregion
+		//#region lib/types/client/TasksGraphView.js
+		/**
+		* The tasks graph canvas: layered node cards joined by bezier edges, drag to
+		* pan, wheel zoom-to-cursor, double-click to fit, node cards that drag off
+		* their auto-layout spots, and a bottom-right control cluster (zoom, arrange,
+		* fit, reset).
+		*
+		* Pure presentation over the view model: every shared fact — the section's
+		* form, the expanded aggregates, the arrangement, the manual offsets, the
+		* camera — lives in the declared graph store and reaches this component
+		* through its `useStore` / `actions` shares. Gesture-internal records are
+		* component-local refs.
+		*
+		* Interaction notes:
+		* - a pan or node drag that travelled past {@link CLICK_SLOP} is a drag, not a
+		*   click: the node's click handler reads the gesture records and skips
+		*   navigation for a moved pointer;
+		* - wheel zoom keeps the canvas point under the cursor stationary and needs a
+		*   non-passive native listener, attached through the wrap ref;
+		* - the auto-fit frames the content until the user pans or zooms; an arrange
+		*   hands steering back by clearing the camera.
+		*/
+		/** Drag distance under which a pointer sequence still counts as a click, in px. */
+		const CLICK_SLOP = 4;
+		/** Zoom clamps. */
+		const K_MIN = .2;
+		const K_MAX = 2.5;
+		/** The widest zoom a fit frames at; deeper zoom is the user's choice. */
+		const FIT_K_MAX = 1.25;
+		/** The camera the canvas starts from, before the first fit. */
+		const START_CAMERA = {
+			k: 1,
+			tx: 0,
+			ty: 0,
+			userAdjusted: false
+		};
+		/**
+		* The badge word one node kind carries.
+		* @param node - the node the card draws.
+		* @param t - namespace-bound translate.
+		* @returns the badge word.
+		*/
+		function badgeOf(node, t) {
+			switch (node.kind) {
+				case "main": return t("graph.badge.main");
+				case "subagent": return t("graph.badge.subagent");
+				case "done-agg": return t("graph.badge.done");
+				case "standby-agg": return t("graph.badge.standby");
+				case "placeholder": return t("graph.badge.placeholder");
+				case "diagnostic": return t("graph.badge.diagnostic");
+				case "run": return t("graph.badge.run");
+				case "phase": return t("graph.badge.phase");
+				case "member": return t("graph.badge.member");
+			}
+		}
+		/**
+		* The label one card draws, with the synthesized stand-ins for unread and
+		* unphased nodes.
+		* @param node - the node the card draws.
+		* @param t - namespace-bound translate.
+		* @returns the label text.
+		*/
+		function labelOf(node, t) {
+			if (node.kind === "phase" && node.label === "") return t("graph.unphased");
+			return node.label === "" ? t("graph.loading") : node.label;
+		}
+		/**
+		* The status line one card draws in its bottom bar.
+		* @param node - the node the card draws.
+		* @param t - namespace-bound translate.
+		* @returns the status text.
+		*/
+		function statusOf(node, t) {
+			switch (node.kind) {
+				case "done-agg":
+				case "standby-agg": return `${badgeOf(node, t)} ${node.childCount ?? ""}`.trim();
+				case "placeholder": return t("graph.loading");
+				case "phase": return `${node.childCount ?? 0}`;
+				case "member":
+					if (node.running) return t("graph.status.running");
+					return node.secondary !== "" ? node.secondary : t("graph.badge.member");
+				case "main":
+				case "subagent":
+				case "run":
+				case "diagnostic": return node.running ? t("graph.status.running") : t("graph.status.idle");
+			}
+		}
+		/**
+		* Truncate a display string to roughly fit one card line.
+		* @param text - the full text.
+		* @param max - the character budget.
+		* @returns the elided text.
+		*/
+		function ellipsize(text, max) {
+			return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+		}
+		/** The CSS class table indexes per key, so a class read may miss. */
+		function kindClassOf(node) {
+			switch (node.kind) {
+				case "done-agg": return TasksGraph_module_css_default.nodeDone;
+				case "standby-agg": return TasksGraph_module_css_default.nodeStandby;
+				case "placeholder": return TasksGraph_module_css_default.nodePlaceholder;
+				case "phase": return TasksGraph_module_css_default.nodePhase;
+				case "run": return TasksGraph_module_css_default.nodeRun;
+				default: return TasksGraph_module_css_default.node;
+			}
+		}
+		/**
+		* Whether a node activates: subagent cards and synthesized members navigate,
+		* aggregates toggle their fold, the main card opens the root, and a
+		* placeholder asks the page to read its level. Diagnostics, runs, and phases
+		* draw but do not activate.
+		* @param node - the node the card draws.
+		* @returns whether the card activates on click or keyboard.
+		*/
+		function clickableOf(node) {
+			return node.kind === "main" || node.kind === "subagent" || node.kind === "member" || node.kind === "placeholder" || node.aggregateKey !== void 0;
+		}
+		/**
+		* The tasks graph canvas.
+		* @param props - the model, the node gesture, the copy, and the store shares.
+		* @returns the canvas and its control cluster.
+		*/
+		function TasksGraphView({ model, onNodeClick, useStore, actions, t }) {
+			const wrapRef = (0, react.useRef)(null);
+			const camera = useStore((state) => state.camera);
+			const cameraRef = (0, react.useRef)(camera);
+			cameraRef.current = camera;
+			const offsets = useStore((state) => state.offsets);
+			const mode = useStore((state) => state.mode);
+			const [panning, setPanning] = (0, react.useState)(false);
+			const [draggingNode, setDraggingNode] = (0, react.useState)(null);
+			const panRef = (0, react.useRef)(null);
+			const nodeDragRef = (0, react.useRef)(null);
+			const layout = (0, react.useMemo)(() => layoutTasksGraph(model, offsets, mode), [
+				model,
+				offsets,
+				mode
+			]);
+			const view = camera ?? START_CAMERA;
+			const userAdjusted = camera?.userAdjusted ?? false;
+			/** Put one camera frame in force, ahead of the render and in the store. */
+			const moveCamera = (0, react.useCallback)((next, adjusted) => {
+				const frame = {
+					...next,
+					userAdjusted: adjusted
+				};
+				cameraRef.current = frame;
+				actions.cameraMoved(frame);
+			}, [actions]);
+			/** Center the content box in the viewport at a readable zoom. */
+			const fit = (0, react.useCallback)(() => {
+				const el = wrapRef.current;
+				/* v8 ignore next -- fit runs only from events a mounted canvas raised. */
+				const vw = el?.clientWidth ?? 0;
+				/* v8 ignore next -- fit runs only from events a mounted canvas raised. */
+				const vh = el?.clientHeight ?? 0;
+				if (vw <= 0 || vh <= 0) return;
+				const k = Math.min(FIT_K_MAX, Math.max(K_MIN, Math.min(vw / layout.width, vh / layout.height)));
+				moveCamera({
+					k,
+					tx: (vw - layout.width * k) / 2 - layout.minX * k,
+					ty: Math.max(8, (vh - layout.height * k) / 2) - layout.minY * k
+				}, false);
+			}, [layout, moveCamera]);
+			(0, react.useEffect)(() => {
+				if (userAdjusted) return;
+				fit();
+			}, [fit, userAdjusted]);
+			(0, react.useEffect)(() => {
+				const el = wrapRef.current;
+				/* v8 ignore next -- the wrap ref is set before effects run. */
+				if (el === null) return;
+				/* v8 ignore next -- a real browser defines ResizeObserver. */
+				if (typeof ResizeObserver === "undefined") return;
+				const observer = new ResizeObserver(() => {
+					if (!userAdjusted && panRef.current === null) fit();
+				});
+				observer.observe(el);
+				return () => {
+					observer.disconnect();
+				};
+			}, [fit, userAdjusted]);
+			(0, react.useEffect)(() => {
+				const el = wrapRef.current;
+				/* v8 ignore next -- the wrap ref is set before effects run. */
+				if (el === null) return;
+				const onWheel = (event) => {
+					event.preventDefault();
+					const current = cameraRef.current ?? START_CAMERA;
+					const k = Math.min(K_MAX, Math.max(K_MIN, current.k * Math.exp(-event.deltaY * .0015)));
+					const rect = el.getBoundingClientRect();
+					const px = event.clientX - rect.left;
+					const py = event.clientY - rect.top;
+					moveCamera({
+						k,
+						tx: px - (px - current.tx) / current.k * k,
+						ty: py - (py - current.ty) / current.k * k
+					}, true);
+				};
+				el.addEventListener("wheel", onWheel, { passive: false });
+				return () => {
+					el.removeEventListener("wheel", onWheel);
+				};
+			}, [moveCamera]);
+			const onPointerDown = (0, react.useCallback)((event) => {
+				if (event.button !== 0) return;
+				panRef.current = {
+					x: event.clientX,
+					y: event.clientY,
+					moved: 0
+				};
+				setPanning(true);
+			}, []);
+			(0, react.useEffect)(() => {
+				if (!panning) return;
+				const onMove = (event) => {
+					const drag = panRef.current;
+					/* v8 ignore next -- the effect subscribes only while the record exists. */
+					if (drag === null) return;
+					const dx = event.clientX - drag.x;
+					const dy = event.clientY - drag.y;
+					drag.moved += Math.abs(dx) + Math.abs(dy);
+					drag.x = event.clientX;
+					drag.y = event.clientY;
+					if (drag.moved <= CLICK_SLOP) return;
+					const current = cameraRef.current ?? START_CAMERA;
+					moveCamera({
+						k: current.k,
+						tx: current.tx + dx,
+						ty: current.ty + dy
+					}, true);
+				};
+				const onUp = () => {
+					setPanning(false);
+				};
+				window.addEventListener("pointermove", onMove);
+				window.addEventListener("pointerup", onUp);
+				window.addEventListener("pointercancel", onUp);
+				return () => {
+					window.removeEventListener("pointermove", onMove);
+					window.removeEventListener("pointerup", onUp);
+					window.removeEventListener("pointercancel", onUp);
+				};
+			}, [panning, moveCamera]);
+			(0, react.useEffect)(() => {
+				if (draggingNode === null) return;
+				const onMove = (event) => {
+					const drag = nodeDragRef.current;
+					/* v8 ignore next -- the effect subscribes only while the record exists. */
+					if (drag === null) return;
+					const dx = event.clientX - drag.x;
+					const dy = event.clientY - drag.y;
+					drag.moved = Math.abs(dx) + Math.abs(dy);
+					if (drag.moved < CLICK_SLOP) return;
+					const k = (cameraRef.current ?? START_CAMERA).k;
+					actions.offsetsDragged(dragOffsets(model, drag.base, drag.nodeId, dx / k, dy / k, drag.subtree));
+				};
+				const onUp = () => {
+					setDraggingNode(null);
+				};
+				window.addEventListener("pointermove", onMove);
+				window.addEventListener("pointerup", onUp);
+				window.addEventListener("pointercancel", onUp);
+				return () => {
+					window.removeEventListener("pointermove", onMove);
+					window.removeEventListener("pointerup", onUp);
+					window.removeEventListener("pointercancel", onUp);
+				};
+			}, [
+				draggingNode,
+				model,
+				actions
+			]);
+			const startNodeDrag = (0, react.useCallback)((event, nodeId) => {
+				if (event.button !== 0) return;
+				event.stopPropagation();
+				nodeDragRef.current = {
+					nodeId,
+					x: event.clientX,
+					y: event.clientY,
+					moved: 0,
+					base: offsets,
+					subtree: !event.altKey
+				};
+				setDraggingNode(nodeId);
+			}, [offsets]);
+			/** Zoom by one step around the viewport's center. */
+			const zoomBy = (0, react.useCallback)((factor) => {
+				const el = wrapRef.current;
+				/* v8 ignore next -- a control click implies a mounted canvas. */
+				const cx = (el?.clientWidth ?? 0) / 2;
+				/* v8 ignore next -- a control click implies a mounted canvas. */
+				const cy = (el?.clientHeight ?? 0) / 2;
+				const current = cameraRef.current ?? START_CAMERA;
+				const k = Math.min(K_MAX, Math.max(K_MIN, current.k * factor));
+				moveCamera({
+					k,
+					tx: cx - (cx - current.tx) / current.k * k,
+					ty: cy - (cy - current.ty) / current.k * k
+				}, true);
+			}, [moveCamera]);
+			const arrange = (0, react.useCallback)((next) => {
+				actions.modeArranged(next);
+			}, [actions]);
+			const resetOffsets = (0, react.useCallback)(() => {
+				actions.offsetsReset();
+			}, [actions]);
+			return (0, react_jsx_runtime.jsxs)("div", {
+				ref: wrapRef,
+				className: TasksGraph_module_css_default.wrap,
+				"data-tasks-graph": "",
+				onPointerDown,
+				onDoubleClick: fit,
+				children: [(0, react_jsx_runtime.jsx)("svg", {
+					className: TasksGraph_module_css_default.svg,
+					children: (0, react_jsx_runtime.jsxs)("g", {
+						"data-tasks-graph-frame": "",
+						transform: `translate(${view.tx} ${view.ty}) scale(${view.k})`,
+						children: [layout.edges.map((edge) => (0, react_jsx_runtime.jsx)("path", {
+							d: edge.d,
+							className: TasksGraph_module_css_default.edge
+						}, edge.id)), layout.nodes.map((box) => {
+							const node = box.node;
+							const clickable = clickableOf(node);
+							const name = `${node.label} ${node.secondary}`.trim();
+							return (0, react_jsx_runtime.jsxs)("g", {
+								"data-tasks-graph-node": node.id,
+								transform: `translate(${box.x} ${box.y})`,
+								className: clsx(kindClassOf(node), draggingNode === node.id && TasksGraph_module_css_default.nodeDragging),
+								onPointerDown: (event) => {
+									startNodeDrag(event, node.id);
+								},
+								onClick: () => {
+									const panned = panRef.current?.moved ?? 0;
+									const dragged = nodeDragRef.current?.moved ?? 0;
+									panRef.current = null;
+									nodeDragRef.current = null;
+									if (panned >= CLICK_SLOP || dragged >= CLICK_SLOP) return;
+									if (clickable) onNodeClick(node);
+								},
+								onKeyDown: clickable ? (event) => {
+									if (event.key !== "Enter" && event.key !== " ") return;
+									event.preventDefault();
+									onNodeClick(node);
+								} : void 0,
+								role: clickable ? "button" : void 0,
+								tabIndex: clickable ? 0 : void 0,
+								"aria-label": name,
+								"aria-current": node.current ? "true" : void 0,
+								"aria-disabled": !clickable ? "true" : void 0,
+								children: [
+									(0, react_jsx_runtime.jsx)("rect", {
+										width: 208,
+										height: 66,
+										rx: 8,
+										className: TasksGraph_module_css_default.card
+									}),
+									(0, react_jsx_runtime.jsx)("line", {
+										x1: 0,
+										y1: 46,
+										x2: 208,
+										y2: 46,
+										className: TasksGraph_module_css_default.sep
+									}),
+									(0, react_jsx_runtime.jsx)("text", {
+										x: 10,
+										y: 15,
+										className: TasksGraph_module_css_default.badge,
+										children: badgeOf(node, t)
+									}),
+									(0, react_jsx_runtime.jsxs)("text", {
+										x: 10,
+										y: 32,
+										className: TasksGraph_module_css_default.label,
+										children: [ellipsize(labelOf(node, t), 24), node.childCount !== void 0 ? ` +${node.childCount}` : ""]
+									}),
+									(0, react_jsx_runtime.jsx)("rect", {
+										y: 46,
+										width: 208,
+										height: 20,
+										className: TasksGraph_module_css_default.bar
+									}),
+									(0, react_jsx_runtime.jsx)("circle", {
+										cx: 12,
+										cy: 56,
+										r: 3,
+										className: node.running ? TasksGraph_module_css_default.dotRunning : TasksGraph_module_css_default.dotIdle
+									}),
+									(0, react_jsx_runtime.jsx)("text", {
+										x: 20,
+										y: 59.5,
+										className: TasksGraph_module_css_default.status,
+										children: statusOf(node, t)
+									}),
+									(0, react_jsx_runtime.jsx)("title", { children: name })
+								]
+							}, node.id);
+						})]
+					})
+				}), (0, react_jsx_runtime.jsxs)("div", {
+					className: TasksGraph_module_css_default.controls,
+					"data-tasks-graph-controls": "",
+					onPointerDown: (event) => {
+						event.stopPropagation();
+					},
+					children: [
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": t("graph.zoomIn"),
+							onClick: () => {
+								zoomBy(1.25);
+							},
+							children: "＋"
+						}),
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": t("graph.zoomOut"),
+							onClick: () => {
+								zoomBy(.8);
+							},
+							children: "－"
+						}),
+						(0, react_jsx_runtime.jsx)("span", {
+							className: TasksGraph_module_css_default.modes,
+							role: "group",
+							"aria-label": t("graph.arrange"),
+							children: [
+								"tree",
+								"compact",
+								"grid"
+							].map((value) => (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-tasks-graph-mode": value,
+								"aria-pressed": mode === value,
+								className: clsx(TasksGraph_module_css_default.mode, mode === value && TasksGraph_module_css_default.modeActive),
+								title: t("graph.arrange"),
+								onClick: () => {
+									arrange(value);
+								},
+								children: t(`graph.mode.${value}`)
+							}, value))
+						}),
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": t("graph.fit"),
+							onClick: fit,
+							children: t("graph.fit")
+						}),
+						hasOffsets(offsets) && (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: TasksGraph_module_css_default.reset,
+							"aria-label": t("graph.resetLayout"),
+							title: t("graph.resetLayout"),
+							"data-tasks-graph-reset": "",
+							onClick: resetOffsets,
+							children: ["⟲ ", t("graph.resetLayout")]
+						})
+					]
+				})]
+			});
+		}
+		//#endregion
+		//#region \0qilin-css:/home/runner/work/QiLin/QiLin/packages/client/ui-sidebar-tasks/src/client/TasksBody.module.css.mjs
+		const css = ".vdi1YG_root{height:100%;min-height:0;color:var(--qilin-alias-label-primary);font-size:var(--qilin-content-font-size-secondary,13px);scrollbar-gutter:stable;flex-direction:column;flex:auto;line-height:1.5;display:flex;overflow:auto}.vdi1YG_sectionHeader{box-sizing:border-box;border-bottom:.5px solid var(--qilin-alias-border-l3);flex:none;align-items:center;gap:4px;height:38px;padding:0 6px 0 10px;display:flex}.vdi1YG_sectionToggle{min-width:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;flex:auto;align-items:center;gap:6px;padding:4px 6px;display:flex}.vdi1YG_sectionToggle:hover{background:var(--qilin-alias-interactive-bg-hover)}.vdi1YG_chevron{color:var(--qilin-alias-label-tertiary);flex:none}.vdi1YG_sectionTitle{flex:none;font-weight:500}.vdi1YG_sectionCount{min-width:0;color:var(--qilin-alias-label-tertiary);white-space:nowrap;text-overflow:ellipsis;flex:auto;font-size:12px;overflow:hidden}.vdi1YG_viewToggle{border:.5px solid var(--qilin-alias-border-l2);border-radius:6px;flex:none;display:inline-flex;overflow:hidden}.vdi1YG_viewToggle button{color:var(--qilin-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:2px 8px;font-size:11px;line-height:16px}.vdi1YG_viewToggle button[aria-pressed=true]{color:var(--qilin-alias-label-primary);background:var(--qilin-alias-interactive-bg-hover)}.vdi1YG_sectionAction{width:28px;height:28px;color:var(--qilin-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:28px;flex:none;justify-content:center;align-items:center;padding:6px;line-height:1;display:inline-flex}.vdi1YG_sectionAction svg{width:15px;height:15px}.vdi1YG_sectionAction:hover{color:var(--qilin-alias-label-primary);background:var(--qilin-alias-interactive-bg-hover)}.vdi1YG_sectionBody{flex-direction:column;flex:none;gap:2px;padding:6px 0 10px;display:flex}.vdi1YG_list{margin:0;padding:0;list-style:none}.vdi1YG_row{min-width:0;color:var(--qilin-alias-label-primary);align-items:center;gap:6px;padding-right:10px;display:flex}.vdi1YG_settled{color:var(--qilin-alias-label-tertiary)}.vdi1YG_disabled{color:var(--qilin-alias-label-tertiary);padding-left:10px}.vdi1YG_open{min-width:0;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:auto;align-items:center;gap:6px;padding:5px 10px;display:flex}.vdi1YG_open:hover{background:var(--qilin-alias-interactive-bg-hover)}.vdi1YG_action{color:var(--qilin-alias-label-secondary);cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;padding:3px 8px;font-size:12px;line-height:18px}.vdi1YG_action:hover{color:var(--qilin-alias-label-primary);background:var(--qilin-alias-interactive-bg-hover)}.vdi1YG_dot{flex:none}.vdi1YG_kind{background:var(--qilin-alias-fill-l2);color:var(--qilin-alias-label-secondary);border-radius:5px;flex:none;padding:0 6px;font-size:11px;line-height:18px}.vdi1YG_label{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;overflow:hidden}.vdi1YG_secondary{max-width:40%;color:var(--qilin-alias-label-tertiary);white-space:nowrap;text-overflow:ellipsis;flex:none;font-size:11px;line-height:18px;overflow:hidden}.vdi1YG_duration{color:var(--qilin-alias-label-tertiary);font-variant-numeric:tabular-nums;flex:none;font-size:11px;line-height:18px}.vdi1YG_note{color:var(--qilin-alias-label-tertiary);margin:0;padding:6px 10px;font-size:12px}.vdi1YG_failure{align-items:center;gap:8px;padding:6px 10px;display:flex}.vdi1YG_failureText{min-width:0;color:var(--qilin-alias-state-error-primary);flex:auto;font-size:12px}.vdi1YG_retry{color:var(--qilin-alias-label-secondary);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:none;align-items:center;gap:4px;padding:3px 8px;font-size:12px;line-height:18px;display:inline-flex}.vdi1YG_retry:hover{color:var(--qilin-alias-label-primary);background:var(--qilin-alias-interactive-bg-hover)}.vdi1YG_retryIcon,.vdi1YG_refreshIcon{flex:none}.vdi1YG_more{color:var(--qilin-alias-label-secondary);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;margin:2px 10px;padding:4px 8px;font-size:12px;line-height:18px}.vdi1YG_more:hover{color:var(--qilin-alias-label-primary);background:var(--qilin-alias-interactive-bg-hover)}";
+		const tagId = "@qilin-agent/client-ui-sidebar-tasks/TasksBody.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@qilin-agent/client-ui-sidebar-tasks";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var TasksBody_module_css_default = {
+			"action": "vdi1YG_action",
+			"chevron": "vdi1YG_chevron",
+			"disabled": "vdi1YG_disabled",
+			"dot": "vdi1YG_dot",
+			"duration": "vdi1YG_duration",
+			"failure": "vdi1YG_failure",
+			"failureText": "vdi1YG_failureText",
+			"kind": "vdi1YG_kind",
+			"label": "vdi1YG_label",
+			"list": "vdi1YG_list",
+			"more": "vdi1YG_more",
+			"note": "vdi1YG_note",
+			"open": "vdi1YG_open",
+			"refreshIcon": "vdi1YG_refreshIcon",
+			"retry": "vdi1YG_retry",
+			"retryIcon": "vdi1YG_retryIcon",
+			"root": "vdi1YG_root",
+			"row": "vdi1YG_row",
+			"secondary": "vdi1YG_secondary",
+			"sectionAction": "vdi1YG_sectionAction",
+			"sectionBody": "vdi1YG_sectionBody",
+			"sectionCount": "vdi1YG_sectionCount",
+			"sectionHeader": "vdi1YG_sectionHeader",
+			"sectionTitle": "vdi1YG_sectionTitle",
+			"sectionToggle": "vdi1YG_sectionToggle",
+			"settled": "vdi1YG_settled",
+			"viewToggle": "vdi1YG_viewToggle"
+		};
+		/** The pixel indent one nesting level adds. */
+		const INDENT_PX = 14;
+		/** The clock interval a running job's duration needs. */
+		const TICK_MS = 1e3;
+		/**
+		* One collapsible section header: its chevron, its title, its stated count, and
+		* the section's own control in the header's trailing slot.
+		*/
+		function SectionHeader({ section, title, count, expanded, onToggle, action }) {
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: TasksBody_module_css_default.sectionHeader,
+				"data-tasks-section": section,
+				children: [(0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: TasksBody_module_css_default.sectionToggle,
+					"aria-expanded": expanded,
+					onClick: onToggle,
+					children: [
+						expanded ? (0, react_jsx_runtime.jsx)(_qilin_agent_client_ui_primitives.IconChevronDownOutline14, { className: TasksBody_module_css_default.chevron }) : (0, react_jsx_runtime.jsx)(_qilin_agent_client_ui_primitives.IconChevronRightOutline14, { className: TasksBody_module_css_default.chevron }),
+						(0, react_jsx_runtime.jsx)("span", {
+							className: TasksBody_module_css_default.sectionTitle,
+							children: title
+						}),
+						(0, react_jsx_runtime.jsx)("span", {
+							className: TasksBody_module_css_default.sectionCount,
+							children: count
+						})
+					]
+				}), action]
+			});
+		}
+		/**
+		* Why one child carries no readable record.
+		* @param reason - the catalog's diagnostic reason.
+		* @param t - namespace-bound translate.
+		* @returns the line the row shows.
+		*/
+		function diagnosticLabel(reason, t) {
+			switch (reason) {
+				case "corrupt": return t("subagents.diagnostic.corrupt");
+				case "unsupported": return t("subagents.diagnostic.unsupported");
+				case "unavailable": return t("subagents.diagnostic.unavailable");
+			}
+		}
+		/** One subagent row: the open gesture across the row, the interrupt beside it. */
+		function SubagentRowView({ row, t, onOpen, onInterrupt }) {
+			if (row.kind === "diagnostic") return (0, react_jsx_runtime.jsxs)("li", {
+				className: clsx(TasksBody_module_css_default.row, TasksBody_module_css_default.disabled),
+				"data-tasks-subagent": row.id,
+				"data-tasks-depth": row.depth,
+				children: [
+					(0, react_jsx_runtime.jsx)(_qilin_agent_client_ui_primitives.StateDot, {
+						state: "error",
+						className: TasksBody_module_css_default.dot
+					}),
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TasksBody_module_css_default.label,
+						children: row.id
+					}),
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TasksBody_module_css_default.secondary,
+						children: diagnosticLabel(row.reason, t)
+					})
+				]
+			});
+			return (0, react_jsx_runtime.jsxs)("li", {
+				className: TasksBody_module_css_default.row,
+				"data-tasks-subagent": row.id,
+				"data-tasks-depth": row.depth,
+				style: { paddingInlineStart: row.depth * INDENT_PX },
+				children: [(0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: TasksBody_module_css_default.open,
+					onClick: () => {
+						onOpen(row.address);
+					},
+					children: [
+						(0, react_jsx_runtime.jsx)(_qilin_agent_client_ui_primitives.StateDot, {
+							state: row.running ? "ongoing" : "done",
+							className: TasksBody_module_css_default.dot
+						}),
+						(0, react_jsx_runtime.jsx)("span", {
+							className: TasksBody_module_css_default.label,
+							children: row.label
+						}),
+						(0, react_jsx_runtime.jsx)("span", {
+							className: TasksBody_module_css_default.secondary,
+							children: t(row.address.mode === "one-shot" ? "subagents.mode.oneShot" : "subagents.mode.continuable")
+						})
+					]
+				}), row.running && row.address.mode === "continuable" && (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: TasksBody_module_css_default.action,
+					onClick: () => {
+						onInterrupt(row.address.childSessionId, row.address.parentSessionId);
+					},
+					children: t("subagents.interrupt")
+				})]
+			});
+		}
+		/** One job row: status marker, kind, label, the producer's detail, and elapsed time. */
+		function TaskRowView({ job, now, t }) {
+			const live = isLive(job);
+			const duration = formatDuration(jobElapsed(job, now), t);
+			const status = job.detail ?? jobStatusLabel(job.status, t);
+			return (0, react_jsx_runtime.jsxs)("li", {
+				className: clsx(TasksBody_module_css_default.row, !live && TasksBody_module_css_default.settled),
+				"data-tasks-job": job.id,
+				"data-tasks-status": job.status,
+				children: [
+					(0, react_jsx_runtime.jsx)(_qilin_agent_client_ui_primitives.StateDot, {
+						state: jobDotState(job.status),
+						className: TasksBody_module_css_default.dot
+					}),
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TasksBody_module_css_default.kind,
+						children: job.kind
+					}),
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TasksBody_module_css_default.label,
+						title: job.label,
+						children: job.label
+					}),
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TasksBody_module_css_default.secondary,
+						title: status,
+						children: status
+					}),
+					(0, react_jsx_runtime.jsx)("span", {
+						className: TasksBody_module_css_default.duration,
+						title: t(live ? "tasks.duration.live" : "tasks.duration.done", { duration }),
+						children: duration
+					})
+				]
+			});
+		}
+		/**
+		* The page body.
+		* @param props - the tab's runtime share, the injected face, the graph store
+		*   shares, and the copy.
+		* @returns the two sections, or the single line a Session with no work shows.
+		*/
+		function TasksBody({ sessionId, useSessions, useJobs, useStore, actions, watchRows, openChild, refresh, interruptChild, t }) {
+			const { catalogs, jobs, summaries } = useWorkSources(sessionId, {
+				useSessions,
+				useJobs,
+				watchRows
+			});
+			const catalog = catalogs[sessionId];
+			const [sections, setSections] = (0, react.useState)({
+				subagents: true,
+				tasks: true
+			});
+			const [allSubagents, setAllSubagents] = (0, react.useState)(false);
+			const [allTasks, setAllTasks] = (0, react.useState)(false);
+			const [now, setNow] = (0, react.useState)(() => Date.now());
+			const rows = (0, react.useMemo)(() => subagentRows(catalogs, sessionId), [catalogs, sessionId]);
+			const total = (0, react.useMemo)(() => subagentTotal(childRowCount(rows), indexSubagentDescendants(summaries), sessionId), [
+				rows,
+				summaries,
+				sessionId
+			]);
+			const tasks = (0, react.useMemo)(() => orderedJobs(jobs), [jobs]);
+			const liveTasks = (0, react.useMemo)(() => jobs.filter(isLive).length, [jobs]);
+			const view = useStore((state) => state.view);
+			const expandedKeys = useStore((state) => state.expanded);
+			const graphModel = (0, react.useMemo)(() => buildTasksGraphModel({
+				rootId: sessionId,
+				catalogs,
+				summaries,
+				expanded: new Set(Object.keys(expandedKeys).filter((key) => expandedKeys[key] === true)),
+				currentSessionId: sessionId,
+				labelOf: (entry, summary) => entry.label ?? summary?.displayTitle ?? entry.id,
+				secondaryOf: (entry) => t(entry.mode === "one-shot" ? "subagents.mode.oneShot" : "subagents.mode.continuable")
+			}), [
+				catalogs,
+				summaries,
+				expandedKeys,
+				sessionId,
+				t
+			]);
+			/** One node activation: aggregates fold, placeholders read their level, cards navigate. */
+			const onGraphNodeClick = (node) => {
+				if (node.aggregateKey !== void 0) {
+					actions.aggregateToggled(node.aggregateKey);
+					return;
+				}
+				if (node.kind === "placeholder") {
+					refresh(node.parentId);
+					return;
+				}
+				if (node.kind === "main") {
+					openChild(sessionId);
+					return;
+				}
+				/* v8 ignore next -- the page's catalogs give every remaining card an address. */
+				if (node.address !== void 0) openChild(node.address);
+			};
+			(0, react.useEffect)(() => {
+				if (liveTasks === 0) return;
+				setNow(Date.now());
+				const timer = setInterval(() => {
+					setNow(Date.now());
+				}, TICK_MS);
+				return () => {
+					clearInterval(timer);
+				};
+			}, [liveTasks]);
+			if (rows.length === 0 && tasks.length === 0 && catalog?.state === "ready") return (0, react_jsx_runtime.jsx)("div", {
+				className: TasksBody_module_css_default.root,
+				"data-tasks-state": "empty",
+				children: (0, react_jsx_runtime.jsx)("p", {
+					className: TasksBody_module_css_default.note,
+					children: t("empty")
+				})
+			});
+			const shownSubagents = allSubagents ? rows : rows.slice(0, 5);
+			const shownTasks = allTasks ? tasks : tasks.slice(0, 3);
+			const hiddenSubagents = rows.length - shownSubagents.length;
+			const hiddenTasks = tasks.length - shownTasks.length;
+			return (0, react_jsx_runtime.jsxs)("div", {
+				className: TasksBody_module_css_default.root,
+				"data-tasks-state": "ready",
+				children: [
+					(0, react_jsx_runtime.jsx)(SectionHeader, {
+						section: "subagents",
+						title: t("subagents.title"),
+						count: t(total === 1 ? "subagents.count.one" : "subagents.count.other", { count: total }),
+						expanded: sections.subagents,
+						onToggle: () => {
+							setSections((current) => ({
+								...current,
+								subagents: !current.subagents
+							}));
+						},
+						action: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsxs)("span", {
+							className: TasksBody_module_css_default.viewToggle,
+							role: "group",
+							"aria-label": t("graph.toggle"),
+							children: [(0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"aria-pressed": view === "graph",
+								"data-tasks-view": "graph",
+								onClick: () => {
+									actions.viewSet("graph");
+								},
+								children: t("graph.view")
+							}), (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"aria-pressed": view === "list",
+								"data-tasks-view": "list",
+								onClick: () => {
+									actions.viewSet("list");
+								},
+								children: t("graph.list")
+							})]
+						}), (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: TasksBody_module_css_default.sectionAction,
+							"aria-label": t("subagents.refresh"),
+							title: t("subagents.refresh"),
+							"data-tasks-refresh": true,
+							onClick: () => {
+								refresh(sessionId);
+							},
+							children: (0, react_jsx_runtime.jsx)(_qilin_agent_client_ui_primitives.IconRefreshOutline16, { className: TasksBody_module_css_default.refreshIcon })
+						})] })
+					}),
+					sections.subagents && (0, react_jsx_runtime.jsx)("div", {
+						className: TasksBody_module_css_default.sectionBody,
+						"data-tasks-panel": "subagents",
+						children: catalog?.state === "error" ? (0, react_jsx_runtime.jsxs)("div", {
+							className: TasksBody_module_css_default.failure,
+							children: [(0, react_jsx_runtime.jsx)("span", {
+								className: TasksBody_module_css_default.failureText,
+								children: catalog.error?.message ?? t("subagents.failed")
+							}), (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: TasksBody_module_css_default.retry,
+								onClick: () => {
+									refresh(sessionId);
+								},
+								children: [(0, react_jsx_runtime.jsx)(_qilin_agent_client_ui_primitives.IconRefreshOutline14, { className: TasksBody_module_css_default.retryIcon }), t("subagents.retry")]
+							})]
+						}) : view === "graph" && catalog?.state === "ready" ? (0, react_jsx_runtime.jsx)(TasksGraphView, {
+							model: graphModel,
+							onNodeClick: onGraphNodeClick,
+							useStore,
+							actions,
+							t
+						}) : rows.length === 0 ? (0, react_jsx_runtime.jsx)("p", {
+							className: TasksBody_module_css_default.note,
+							children: catalog === void 0 || catalog.state === "loading" ? t("subagents.loading") : t("subagents.empty")
+						}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("ul", {
+							className: TasksBody_module_css_default.list,
+							children: shownSubagents.map((row) => (0, react_jsx_runtime.jsx)(SubagentRowView, {
+								row,
+								t,
+								onOpen: openChild,
+								onInterrupt: interruptChild
+							}, row.id))
+						}), rows.length > 5 && (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: TasksBody_module_css_default.more,
+							"aria-expanded": allSubagents,
+							"data-tasks-more": "subagents",
+							onClick: () => {
+								setAllSubagents((current) => !current);
+							},
+							children: allSubagents ? t("more.collapse") : t("more.expand", { count: hiddenSubagents })
+						})] })
+					}),
+					(0, react_jsx_runtime.jsx)(SectionHeader, {
+						section: "tasks",
+						title: t("tasks.title"),
+						count: t(tasks.length === 1 ? "tasks.count.one" : "tasks.count.other", { count: tasks.length }),
+						expanded: sections.tasks,
+						onToggle: () => {
+							setSections((current) => ({
+								...current,
+								tasks: !current.tasks
+							}));
+						}
+					}),
+					sections.tasks && (0, react_jsx_runtime.jsx)("div", {
+						className: TasksBody_module_css_default.sectionBody,
+						"data-tasks-panel": "tasks",
+						children: tasks.length === 0 ? (0, react_jsx_runtime.jsx)("p", {
+							className: TasksBody_module_css_default.note,
+							children: t("tasks.empty")
+						}) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("ul", {
+							className: TasksBody_module_css_default.list,
+							children: shownTasks.map((job) => (0, react_jsx_runtime.jsx)(TaskRowView, {
+								job,
+								now,
+								t
+							}, job.id))
+						}), tasks.length > 3 && (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: TasksBody_module_css_default.more,
+							"aria-expanded": allTasks,
+							"data-tasks-more": "tasks",
+							onClick: () => {
+								setAllTasks((current) => !current);
+							},
+							children: allTasks ? t("more.collapse") : t("more.expand", { count: hiddenTasks })
+						})] })
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region lib/types/client/index.js
+		/**
+		* Required browser services: the tab registry, the keyed seats, the Session
+		* service and its subagent Remote, and copy.
+		*/
+		const inject = [
+			"slots",
+			"locale",
+			"sessions",
+			"sidebarRightTabs",
+			"remote",
+			"remote.subagents",
+			"jobs"
+		];
+		/**
+		* Client plugin body: register the type, its dictionaries, its body, and the
+		* chip's status pill.
+		* @param ctx - client root context carrying the registry, the slots, the Session service, and the Remote face.
+		*/
+		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(NS, {
+				zh,
+				en
+			}), "ui-sidebar-tasks: dictionaries");
+			const t = ctx.locale.bind(NS);
+			ctx.effect(() => ctx.sidebarRightTabs.register(tasksDefinition(t)), "ui-sidebar-tasks: tasks type");
+			const jobsFace = {
+				hooks: { jobs: ctx.jobs.state },
+				watchRows: (sessionId) => ctx.jobs.watchRows(sessionId)
+			};
+			const face = tasksFace({
+				openSubagent: (target) => {
+					ctx.uiWorkspace.openSession(target);
+				},
+				refreshProjections: (parentSessionId) => ctx.sessions.refreshProjections(parentSessionId)
+			}, ctx.remote.subagents, jobsFace);
+			const graphStore = createTasksGraphStore();
+			ctx.effect(() => ctx.slots.inject("sidebar.right.pane.tab", () => ctx.slots.register({
+				name: "sidebar.right.pane.tab",
+				key: TASKS_ID,
+				locale: NS,
+				store: graphStore,
+				inject: () => face
+			}, TasksBody)), "ui-sidebar-tasks: tasks tab body");
+			ctx.effect(() => ctx.slots.inject("sidebar.right.pane.tab.badge", () => ctx.slots.register({
+				name: "sidebar.right.pane.tab.badge",
+				key: TASKS_ID,
+				inject: () => jobsFace
+			}, TasksBadge)), "ui-sidebar-tasks: tasks tab badge");
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map