dsh-report-ledger 0.1.0 → 0.2.1

package/lib/client.js

@@ -5,9 +5,39 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react = require("react");
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region src/client/timeline-model.ts
 		/**
+		* The timeline's ordering: by time, and at the same instant a session before a
+		* report.
+		*
+		* Extracted so that INSERTING a row uses the same rule as SORTING rows — two
+		* copies would drift, and the synthesized row would land somewhere the sort
+		* disagrees with.
+		* @param left - one row.
+		* @param right - the other row.
+		* @returns the comparison result.
+		*/
+		function byTime(left, right) {
+			return left.at - right.at || (left.kind === right.kind ? 0 : left.kind === "session" ? -1 : 1);
+		}
+		/**
+		* The depth of every session in one payload, keyed by session id.
+		*
+		* Exported because the views need the same map for a row they synthesize rather
+		* than build: the open report keeps the indentation of the session that authored
+		* it, and asking the model for the map is what stops a second copy of "depth
+		* means the author's depth" from growing in the view.
+		* @param payload - the endpoint payload.
+		* @returns session id to depth.
+		*/
+		function sessionDepths(payload) {
+			const depth = /* @__PURE__ */ new Map();
+			for (const node of payload.sessions) depth.set(node.id, node.depth);
+			return depth;
+		}
+		/**
 		* Build the merged, time-ordered row list.
 		*
 		* Sessions are placed at their creation time and reports at theirs, so the list
@@ -15,34 +45,110 @@ window.__ModuleLoader__.load({
 		* branched, a report where it was opened. Report depth comes from the session
 		* that authored it, which is what keeps the indentation meaningful even when the
 		* session row itself is filtered out.
+		*
+		* A report row's own `at` is also the timestamp its row prints, so the list can
+		* never be ordered by one axis and read as sorted by another.
 		* @param payload - the endpoint payload.
 		* @param basis - whether to place a report at its creation or its last activity.
 		* @returns the rows, oldest first.
 		*/
 		function buildRows(payload, basis = "created") {
-			const depth = /* @__PURE__ */ new Map();
+			const depth = sessionDepths(payload);
 			const rows = [];
-			for (const node of payload.sessions) {
-				depth.set(node.id, node.depth);
-				rows.push({
-					kind: "session",
-					at: node.createdAt ?? 0,
-					id: node.id,
-					depth: node.depth,
-					delegated: node.delegated,
-					live: node.live,
-					...node.title === void 0 ? {} : { title: node.title }
-				});
-			}
+			for (const node of payload.sessions) rows.push({
+				kind: "session",
+				at: node.createdAt ?? 0,
+				id: node.id,
+				depth: node.depth,
+				delegated: node.delegated,
+				live: node.live,
+				...node.title === void 0 ? {} : { title: node.title }
+			});
 			for (const front of payload.reports) rows.push({
 				kind: "report",
 				at: basis === "created" ? front.created : front.updated,
 				depth: depth.get(front.from) ?? 0,
 				front
 			});
-			rows.sort((left, right) => left.at - right.at || (left.kind === right.kind ? 0 : left.kind === "session" ? -1 : 1));
+			rows.sort(byTime);
 			return rows;
 		}
+		/**
+		* Shorten a session id so a digest row can be read.
+		*
+		* A session id is 36 characters and a report's recipients are a list of them, so
+		* an unabbreviated meta line is mostly uuid and carries almost no information a
+		* human can use. Eight characters of the leading segment stay unique within one
+		* collaboration and, unlike a session title, are bounded: titles are the first
+		* prompt of a session ("You are doing READ-ONLY research"), so swapping ids for
+		* titles trades one unreadable line for another.
+		*
+		* This is a DENSE-ROW display only. The detail panel keeps full ids, because
+		* that is the view somebody copies an id out of, and the tooltip on every
+		* shortened id carries the full value.
+		* @param id - the session id.
+		* @param length - how many characters to keep.
+		* @returns the shortened id.
+		*/
+		function shortId(id, length = 8) {
+			const bare = id.startsWith("session-") ? id.slice(8) : id;
+			return bare.length <= length ? bare : bare.slice(0, length);
+		}
+		/**
+		* Display titles for the sessions in one payload, keyed by session id.
+		*
+		* Titles are resolved only for the subtree, so an id from another tree simply
+		* has none — which is why every caller must fall back to the shortened id
+		* rather than assuming a name exists.
+		* @param payload - the endpoint payload.
+		* @returns the titles that were resolved.
+		*/
+		function sessionTitles(payload) {
+			const titles = /* @__PURE__ */ new Map();
+			for (const node of payload.sessions) if (typeof node.title === "string" && node.title !== "") titles.set(node.id, node.title);
+			return titles;
+		}
+		/**
+		* Make sure the open report has a row, and put it where it belongs.
+		*
+		* The detail panel is anchored to a report row, so the open report must HAVE
+		* one. Two real user paths would otherwise leave the panel with nowhere to
+		* render: a thread link pointing at a report outside this tree's payload, and
+		* any filter applied while a report is open. In the first case the panel is also
+		* the only place the "not in this tree" notice can appear, so the panel is not
+		* hoisted out of the list — a row is synthesized instead.
+		*
+		* The synthesized row is INSERTED at its own place on the time axis rather than
+		* appended. Appending made a report created at 11:12 appear below one created at
+		* 14:30, which reads as a broken sort at exactly the moment the user is trying
+		* to understand why something is missing.
+		*
+		* The depth is passed in rather than assumed: the caller has the payload and can
+		* ask `sessionDepths` for the author's depth, and a row that loses its
+		* indentation when a filter hides it would be a second, quieter broken sort.
+		* Reports whose author is outside the subtree are at the root (depth 0).
+		* @param kept - the rows that survived the filter.
+		* @param front - the digest of the open report.
+		* @param basis - the active time basis, so the row moves with the rest.
+		* @param depth - the author's depth from the payload, or 0 outside the subtree.
+		* @returns the rows, with the open report present exactly once.
+		*/
+		function withSynthesizedRow(kept, front, basis, depth) {
+			if (kept.some((row) => row.kind === "report" && row.front.report === front.report)) return [...kept];
+			const row = {
+				kind: "report",
+				at: basis === "created" ? front.created : front.updated,
+				depth,
+				front
+			};
+			const index = kept.findIndex((candidate) => byTime(row, candidate) < 0);
+			if (index < 0) return [...kept, row];
+			return [
+				...kept.slice(0, index),
+				row,
+				...kept.slice(index)
+			];
+		}
 		/** Every string a report row can be found by. */
 		function reportHaystack(front) {
 			return [
@@ -54,7 +160,9 @@ window.__ModuleLoader__.load({
 				...front.cc,
 				...front.authors,
 				front.task ?? "",
-				...front.artifacts
+				...front.artifacts,
+				front.worktree?.branch ?? "",
+				front.worktree?.path ?? ""
 			].join("\n").toLowerCase();
 		}
 		/** Every string a session row can be found by. */
@@ -113,6 +221,51 @@ window.__ModuleLoader__.load({
 			return filter.status !== "all" || filter.text.trim() !== "";
 		}
 		/**
+		* Index the payload's working-tree lanes by report id.
+		*
+		* The lanes carry the lease state, which the digests do not: liveness is derived
+		* from the hop stream, and the host derives it once rather than each half of the
+		* plugin deriving it separately.
+		* @param payload - the endpoint payload.
+		* @returns report id to lane.
+		*/
+		function laneIndex(payload) {
+			return new Map(payload.worktrees.map((lane) => [lane.report, lane]));
+		}
+		/**
+		* How a lease state should read at a glance.
+		*
+		* A live claim is the only state that means someone is working *now*, so it is
+		* the only one that earns a positive tone. A cleared checkout is deliberately
+		* plain rather than alarming: the ledger tidying up after itself is not a
+		* problem to be surfaced, and giving it a warning tone would teach a reader to
+		* ignore warnings.
+		*/
+		const LEASE_TONE = {
+			held: "success",
+			released: "info",
+			reclaimed: "neutral",
+			none: "neutral"
+		};
+		/** The last path segment, for naming a checkout that has no branch. */
+		function lastSegment(path) {
+			const parts = path.split(/[\\/]/);
+			return parts[parts.length - 1] || path;
+		}
+		/**
+		* The short name a checkout is shown under.
+		*
+		* Taken from the binding rather than from the lane, because a report opened by
+		* id can be rendered before it is in the payload's lane list — the binding is
+		* always on the row, the lane is not.
+		* @param binding - the row's binding, when it has one.
+		* @returns the label, or `undefined` when the report is not bound.
+		*/
+		function worktreeLabel(binding) {
+			if (binding === void 0) return void 0;
+			return binding.branch ?? lastSegment(binding.path);
+		}
+		/**
 		* Count how many report rows are visible under a filter.
 		* @param rows - every assembled row.
 		* @param filter - the active filter.
@@ -124,6 +277,32 @@ window.__ModuleLoader__.load({
 			return count;
 		}
 		/**
+		* Decide which empty-state message applies.
+		*
+		* An empty ledger and a filter that matched nothing look identical on screen but
+		* mean opposite things: one says "nothing has happened in this tree yet", the
+		* other says "you are looking at a subset of what happened". Saying the wrong
+		* one makes a working ledger look broken, so the choice is made here — where it
+		* is pinned by tests — rather than inline in the view.
+		*
+		* Counted on REPORT rows only. Session rows always survive a status chip, so
+		* counting them would let a tree full of sessions report itself as "you have
+		* filtered everything out" while the actual reason is that no report exists.
+		*
+		* The `no-reports` case deliberately wins over the filter: when the ledger holds
+		* nothing, a filter cannot be the reason nothing is on screen, and blaming it
+		* would send the reader looking for a filter to clear that they never set.
+		* @param payload - the endpoint payload.
+		* @param rows - every assembled row.
+		* @param filter - the active filter.
+		* @returns which message the view should show, if any.
+		*/
+		function emptyState(payload, rows, filter) {
+			if (payload.reports.length === 0) return "no-reports";
+			if (!isFiltering(filter)) return "none";
+			return visibleReports(rows, filter) === 0 ? "filtered-out" : "none";
+		}
+		/**
 		* The report ids present in one payload.
 		*
 		* A thread link can point outside the subtree — a report answering one opened by
@@ -164,725 +343,3414 @@ window.__ModuleLoader__.load({
 				truncated: true
 			};
 		}
-		//#endregion
-		//#region src/client/ReportsView.tsx
 		/**
-		* The report timeline view — the `conversation.view` tab this plugin registers.
+		* Close a code fence left hanging by truncation.
 		*
-		* It renders one top-to-bottom timeline of the collaboration: the session
-		* subtree as it branched, interleaved with the reports those sessions produced
-		* or were copied on. Rows carry only the digest, so a long-running tree stays
-		* scannable; clicking a report opens its transfer path and body on demand.
+		* Cutting Markdown at a character count is not the same operation as cutting
+		* plain text: the result can be a document that does not parse as written. The
+		* one construct that changes the meaning of everything after it is a code fence,
+		* so a body cut inside a fenced block hands the renderer an unterminated one and
+		* leaves it to decide where the block ends.
 		*
-		* Data comes from this plugin's own read-only endpoint rather than a generated
-		* remote: the host assembles the subtree and filters the ledger to the sessions
-		* in it, which the browser cannot do on its own because a report's transfer path
-		* is a host-side file, not session state.
+		* The renderer here does cope (measured: a body cut mid-fence renders as one
+		* closed code block with no trailing artifact), which is exactly why this is
+		* cheap insurance rather than a fix for something visibly broken: the renderer is
+		* a shell platform module this plugin does not own, and its leniency is not a
+		* contract. Balancing the document costs one line and makes the plugin's output
+		* valid Markdown no matter who renders it.
 		*
-		* A blank session never reaches this component — the conversation slot is
-		* omitted entirely in that state.
+		* Balanced text is returned untouched, so this only ever adds the fence the cut
+		* removed. Only backtick fences are counted; `~~~` fences are rare enough in
+		* report bodies that guessing which convention the author used would be worse
+		* than leaving them alone.
 		*
-		* @module dsh-report-ledger/client/ReportsView
+		* A fence is a RUN, not a token: CommonMark lets an opener use four backticks
+		* precisely so the body can contain a literal three-backtick line, and requires
+		* the closer to be at least as long as the opener. Counting every line that
+		* merely starts with three backticks therefore gets exactly the documents this
+		* function exists for backwards — the nested block would look balanced while its
+		* real (longer) fence stayed open. So the opener's length is remembered and only
+		* a same-character run of at least that length closes it.
+		* @param text - the already-truncated head.
+		* @returns the head, with an unclosed fence closed.
 		*/
-		const TIMELINE_URL = "/api/report-ledger/timeline";
-		const REPORT_URL = "/api/report-ledger/report";
-		/** Read one endpoint and unwrap its result envelope. */
-		async function getJson(url) {
-			const response = await fetch(url, {
-				credentials: "same-origin",
-				headers: { accept: "application/json" }
-			});
-			let body;
-			try {
-				body = await response.json();
-			} catch {
-				throw new Error(`HTTP ${response.status}`);
+		function closeOpenFence(text) {
+			let open;
+			for (const line of text.split("\n")) {
+				const stripped = line.trimStart();
+				if (!stripped.startsWith("```")) continue;
+				let run = 0;
+				while (stripped[run] === "`") run += 1;
+				if (open === void 0) open = run;
+				else if (run >= open) open = void 0;
 			}
-			const envelope = body;
-			if (envelope.ok !== true) throw new Error(envelope.code ?? `HTTP ${response.status}`);
-			return envelope.value;
+			return open === void 0 ? text : `${text}\n${"`".repeat(open)}`;
 		}
-		/** Substitute `{name}` placeholders. */
+		//#endregion
+		//#region src/client/format.ts
+		/**
+		* The two text helpers both report surfaces need.
+		*
+		* Tiny and pure on purpose: `fill` is the `{name}` substitution every dictionary
+		* template is written in, and `stamp` is the one timestamp format the ledger
+		* uses. They live outside the views because there are now two of them — the
+		* conversation tab and the right column's canvas tab — and a second copy of
+		* either would be a second answer to the same question.
+		*
+		* @module dsh-report-ledger/client/format
+		*/
+		/** Substitute `{name}` placeholders, leaving unknown names alone. */
 		function fill(template, params) {
 			return template.replace(/\{(\w+)\}/g, (whole, name) => Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : whole);
 		}
-		/** Format one timestamp for a timeline row. */
+		/** Format one timestamp for a timeline row or a hop. */
 		function stamp(at) {
 			if (at === void 0 || at <= 0) return "";
 			return new Date(at).toLocaleString();
 		}
-		/** Colour a status chip from the theme's state tokens. */
-		function statusStyle(status) {
-			if (status === "acked") return {
-				color: "var(--dsw-alias-state-success-label, #1a7f37)",
-				background: "var(--dsw-alias-state-success-bg, rgba(26,127,55,0.10))"
-			};
-			if (status === "closed") return {
-				color: "var(--dsw-alias-label-tertiary, #888)",
-				background: "var(--dsw-alias-bg-layer-2, rgba(0,0,0,0.04))"
-			};
-			return {
-				color: "var(--dsw-alias-state-warn-label, #9a6700)",
-				background: "var(--dsw-alias-state-warn-bg, rgba(154,103,0,0.10))"
-			};
-		}
-		/** Storage key for the remembered status filter. */
-		const FILTER_KEY = "dsh.reportLedger.filter.v1";
-		/** Read the remembered status filter, tolerating absent or damaged storage. */
-		function rememberedStatus() {
-			try {
-				const raw = globalThis.localStorage?.getItem(FILTER_KEY);
-				if (typeof raw === "string") {
-					const parsed = JSON.parse(raw);
-					if (parsed.status === "open" || parsed.status === "acked" || parsed.status === "closed") return parsed.status;
-				}
-			} catch {}
-			return "all";
-		}
+		/** How long the path's copy control shows its "copied" state. */
+		const COPIED_HOLD_MS = 1200;
+		//#endregion
+		//#region src/client/locales.ts
+		/** Chinese dictionary — the source of truth for the key set. */
+		const zh = {
+			"view.tab": "汇报",
+			"view.loading": "正在读取账本…",
+			"view.summary": "{sessions} 个会话 · {reports} 份汇报",
+			"view.empty": "这个会话树下还没有汇报。代理用 report_author 开一份汇报后，这里会出现它的缩略卡。",
+			"view.refresh": "刷新",
+			"view.retry": "重试",
+			"view.error": "读取失败：{code}",
+			"view.live": "在线",
+			"view.delegated": "子代理",
+			"view.detail.loading": "正在读取传递路径…",
+			"view.detail.route": "传递路径",
+			"view.detail.routeEmpty": "（还没有记录跳）",
+			"view.detail.pending": "仍在等待送达：{targets}",
+			"view.detail.body": "正文",
+			"view.detail.path": "账本文件",
+			"view.copyPath": "复制账本路径",
+			"row.hops": "{count} 跳",
+			"row.authors": "{count} 位共写",
+			"row.filterByTask": "只看任务「{task}」",
+			"row.filterByWorktree": "只看检出「{worktree}」",
+			"row.leaseHeld": "工作区：正在被这份汇报占用",
+			"row.leaseReleased": "工作区：占用已结束，检出仍留在磁盘上",
+			"row.leaseReclaimed": "工作区：已被账本回收清除",
+			"row.leaseNone": "工作区：绑定已记录，但从未被占用",
+			"row.expand": "展开 {report}",
+			"row.collapse": "收起 {report}",
+			"row.last": "最后",
+			"hop.authored": "发起",
+			"hop.contributed": "共写",
+			"hop.sent": "主送",
+			"hop.delivered": "送达",
+			"hop.cc": "抄送",
+			"hop.forwarded": "转呈",
+			"hop.copied": "副本",
+			"hop.read": "阅读",
+			"hop.acked": "回执",
+			"hop.leased": "认领工作区",
+			"hop.released": "释放工作区",
+			"hop.reclaimed": "回收工作区",
+			"hop.amended": "修正",
+			"hop.closed": "结案",
+			"hop.reopened": "重开",
+			"filter.all": "全部",
+			"filter.open": "进行中",
+			"filter.acked": "已回执",
+			"filter.closed": "已结案",
+			"filter.search": "搜索主题、编号、会话或收发…",
+			"filter.clear": "清除",
+			"filter.showing": "显示 {visible}/{total} 份汇报",
+			"filter.none": "没有符合当前筛选的汇报。",
+			"filter.hint": "状态筛选只作用于汇报；搜索会同时匹配会话标题与编号，以及任务标签和检出名。",
+			"basis.created": "按创建",
+			"basis.updated": "按最近活动",
+			"basis.hint": "汇报按创建时间还是按最后一次活动排入时间线；会话始终按创建时间。",
+			"detail.thread": "线程",
+			"detail.parent": "上溯",
+			"detail.children": "下递",
+			"detail.openLinked": "打开 {report}",
+			"detail.outside": "{report} 不在当前会话树的列表里（它可能属于另一条线）；正文与路径仍可读取。",
+			"detail.filteredOut": "{report} 在当前筛选下被隐藏了（用「清除」恢复）。",
+			"detail.backToList": "回到列表",
+			"detail.bodyTruncated": "正文过长，此处只显示开头 {chars} 字；完整内容见账本文件。",
+			"cardgraph.external": "树外",
+			"cardgraph.zoomIn": "放大",
+			"cardgraph.zoomOut": "缩小",
+			"cardgraph.zoom": "{percent}%",
+			"cardgraph.fit": "填满宽度",
+			"cardgraph.summary": "{frames} 个框 · {cards} 份汇报",
+			"cardgraph.empty": "没有汇报",
+			"cardgraph.gestureHint": "滚轮平移 · Ctrl+滚轮缩放",
+			"sidebar.guideTitle": "汇报画布",
+			"sidebar.guideDescription": "把拓扑画布停靠进右侧栏",
+			"sidebar.chip": "汇报画布",
+			"body.copy": "复制",
+			"body.copied": "已复制",
+			"body.footnotes": "脚注"
+		};
+		/** English dictionary, checked against the Chinese key set. */
+		const en = {
+			"view.tab": "Reports",
+			"view.loading": "Reading the ledger…",
+			"view.summary": "{sessions} sessions · {reports} reports",
+			"view.empty": "No reports in this session tree yet. Once an agent opens one with report_author, its digest card appears here.",
+			"view.refresh": "Refresh",
+			"view.retry": "Retry",
+			"view.error": "Read failed: {code}",
+			"view.live": "live",
+			"view.delegated": "subagent",
+			"view.detail.loading": "Reading the transfer path…",
+			"view.detail.route": "Transfer path",
+			"view.detail.routeEmpty": "(no hops recorded yet)",
+			"view.detail.pending": "Still owed to: {targets}",
+			"view.detail.body": "Body",
+			"view.detail.path": "Ledger file",
+			"view.copyPath": "Copy the ledger path",
+			"row.hops": "{count} hops",
+			"row.authors": "{count} authors",
+			"row.filterByTask": "Show only task \"{task}\"",
+			"row.filterByWorktree": "Show only checkout \"{worktree}\"",
+			"row.leaseHeld": "Checkout: currently claimed by this report",
+			"row.leaseReleased": "Checkout: claim ended, the checkout is still on disk",
+			"row.leaseReclaimed": "Checkout: cleared away by the ledger",
+			"row.leaseNone": "Checkout: bound but never claimed",
+			"row.expand": "Expand {report}",
+			"row.collapse": "Collapse {report}",
+			"row.last": "last",
+			"hop.authored": "authored",
+			"hop.contributed": "contributed",
+			"hop.sent": "sent",
+			"hop.delivered": "delivered",
+			"hop.cc": "cc",
+			"hop.forwarded": "forwarded",
+			"hop.copied": "copied",
+			"hop.read": "read",
+			"hop.acked": "acked",
+			"hop.leased": "leased",
+			"hop.released": "released",
+			"hop.reclaimed": "reclaimed",
+			"hop.amended": "amended",
+			"hop.closed": "closed",
+			"hop.reopened": "reopened",
+			"filter.all": "All",
+			"filter.open": "Open",
+			"filter.acked": "Acked",
+			"filter.closed": "Closed",
+			"filter.search": "Search subject, id, session, or people…",
+			"filter.clear": "Clear",
+			"filter.showing": "Showing {visible}/{total} reports",
+			"filter.none": "No reports match the current filter.",
+			"filter.hint": "The status filter narrows reports only; search matches every row, including session titles and ids, task labels and checkout names.",
+			"basis.created": "By creation",
+			"basis.updated": "By activity",
+			"basis.hint": "Whether reports are placed at creation or at their latest activity; sessions always keep their creation time.",
+			"detail.thread": "Thread",
+			"detail.parent": "Answers",
+			"detail.children": "Answered by",
+			"detail.openLinked": "Open {report}",
+			"detail.outside": "{report} is not in this session tree's list (it may belong to another line); its body and path are still readable.",
+			"detail.filteredOut": "{report} is hidden by the current filter (use Clear to restore it).",
+			"detail.backToList": "Back to the list",
+			"detail.bodyTruncated": "Body is long, so only the first {chars} characters are shown here; the ledger file has the whole thing.",
+			"cardgraph.external": "outside",
+			"cardgraph.zoomIn": "Zoom in",
+			"cardgraph.zoomOut": "Zoom out",
+			"cardgraph.zoom": "{percent}%",
+			"cardgraph.fit": "Fill width",
+			"cardgraph.summary": "{frames} frames · {cards} reports",
+			"cardgraph.empty": "no reports",
+			"cardgraph.gestureHint": "Wheel pans · Ctrl+wheel zooms",
+			"sidebar.guideTitle": "Report canvas",
+			"sidebar.guideDescription": "Dock the topology canvas into the right sidebar",
+			"sidebar.chip": "Report canvas",
+			"body.copy": "Copy",
+			"body.copied": "Copied",
+			"body.footnotes": "Footnotes"
+		};
 		/**
-		* Render the report timeline.
-		* @param props - the session binding and the locale seat.
-		* @returns the tab content.
+		* Lifecycle state → dictionary key.
+		*
+		* Deliberately the SAME keys the toolbar's filter chips use. A card's status
+		* chip and the filter that selects it name one state, so giving them two
+		* vocabularies (raw `open` on the card, 进行中 in the toolbar) made the reader
+		* build the mapping themselves — and the mapping was the bug, not the words.
 		*/
-		function ReportsView(props) {
-			const { sessionId, t } = props;
-			const [payload, setPayload] = (0, react.useState)(void 0);
-			const [error, setError] = (0, react.useState)(void 0);
-			const [nonce, setNonce] = (0, react.useState)(0);
-			const [openReport, setOpenReport] = (0, react.useState)(void 0);
-			const [detail, setDetail] = (0, react.useState)(void 0);
-			const [detailError, setDetailError] = (0, react.useState)(void 0);
-			const [status, setStatus] = (0, react.useState)(rememberedStatus);
-			const [text, setText] = (0, react.useState)("");
-			const [basis, setBasis] = (0, react.useState)("created");
-			(0, react.useEffect)(() => {
-				try {
-					globalThis.localStorage?.setItem(FILTER_KEY, JSON.stringify({ status }));
-				} catch {}
-			}, [status]);
-			(0, react.useEffect)(() => {
-				if (sessionId === void 0 || sessionId === "") {
-					setError("no-session");
-					return;
-				}
-				let cancelled = false;
-				setError(void 0);
-				getJson(`${TIMELINE_URL}?root=${encodeURIComponent(sessionId)}`).then((value) => {
-					if (!cancelled) setPayload(value);
-				}).catch((cause) => {
-					if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause));
-				});
-				return () => {
-					cancelled = true;
-				};
-			}, [sessionId, nonce]);
-			(0, react.useEffect)(() => {
-				if (openReport === void 0) return;
-				let cancelled = false;
-				setDetail(void 0);
-				setDetailError(void 0);
-				getJson(`${REPORT_URL}?id=${encodeURIComponent(openReport)}`).then((value) => {
-					if (!cancelled) setDetail(value);
-				}).catch((cause) => {
-					if (!cancelled) setDetailError(cause instanceof Error ? cause.message : String(cause));
-				});
-				return () => {
-					cancelled = true;
-				};
-			}, [openReport, nonce]);
-			const rows = (0, react.useMemo)(() => payload === void 0 ? [] : buildRows(payload, basis), [payload, basis]);
-			const counts = (0, react.useMemo)(() => statusCounts(payload?.reports ?? []), [payload]);
-			const inList = (0, react.useMemo)(() => payload === void 0 ? /* @__PURE__ */ new Set() : reportIds(payload), [payload]);
-			const shownBody = (0, react.useMemo)(() => displayBody(detail?.body ?? ""), [detail]);
-			const filter = (0, react.useMemo)(() => ({
-				status,
-				text
-			}), [status, text]);
-			const visible = (0, react.useMemo)(() => {
-				const kept = filterRows(rows, filter);
-				if (openReport === void 0 || detail === void 0) return kept;
-				if (kept.some((row) => row.kind === "report" && row.front.report === openReport)) return kept;
-				return [...kept, {
-					kind: "report",
-					at: detail.front.created,
-					depth: 0,
-					front: detail.front
-				}];
-			}, [
-				rows,
-				filter,
-				openReport,
-				detail
-			]);
-			const filteredReportIds = (0, react.useMemo)(() => {
-				const ids = /* @__PURE__ */ new Set();
-				for (const row of filterRows(rows, filter)) if (row.kind === "report") ids.add(row.front.report);
-				return ids;
-			}, [rows, filter]);
-			const filtering = isFiltering(filter);
-			const visibleReportCount = (0, react.useMemo)(() => visibleReports(rows, filter), [rows, filter]);
-			const refresh = (0, react.useCallback)(() => {
-				setNonce((value) => value + 1);
+		const STATUS_LABEL = {
+			open: "filter.open",
+			acked: "filter.acked",
+			closed: "filter.closed"
+		};
+		/**
+		* Lifecycle state → the shell's chip tone.
+		*
+		* Colour-coded status is the point of the chip, and the shell's palette already
+		* has the three tones this needs — so the states ride `Tag` instead of a
+		* hand-mixed background. `open` reads as the one that wants attention. The tone
+		* names are the ones the shell's CSS actually defines (`[data-tone=…]`), which
+		* is a longer list than the shipped views happen to use.
+		*/
+		const STATUS_TONE = {
+			open: "warning",
+			acked: "success",
+			closed: "neutral"
+		};
+		/**
+		* Edge kind → the word the drawing calls it.
+		*
+		* The drawing borrows the transfer path's own vocabulary rather than inventing a
+		* second one: an arrow in the canvas and a row in the panel name the same
+		* relation, so they say the same thing.
+		*/
+		const EDGE_LABEL = {
+			to: "hop.sent",
+			cc: "hop.cc",
+			author: "hop.contributed",
+			thread: "detail.thread"
+		};
+		/** Lease-state description, for the checkout chip's tooltip. */
+		const LEASE_HINT = {
+			held: "row.leaseHeld",
+			released: "row.leaseReleased",
+			reclaimed: "row.leaseReclaimed",
+			none: "row.leaseNone"
+		};
+		/**
+		* Transfer-path hop action → dictionary key.
+		*
+		* These are ledger vocabulary: the model and the ledger files keep the raw
+		* tokens (`authored`, `delivered`, …), and only the human view speaks a
+		* language. Keyed by the full action union so a new hop action cannot ship
+		* without a word for it.
+		*/
+		const HOP_LABEL = {
+			authored: "hop.authored",
+			contributed: "hop.contributed",
+			sent: "hop.sent",
+			delivered: "hop.delivered",
+			cc: "hop.cc",
+			forwarded: "hop.forwarded",
+			copied: "hop.copied",
+			read: "hop.read",
+			acked: "hop.acked",
+			leased: "hop.leased",
+			released: "hop.released",
+			reclaimed: "hop.reclaimed",
+			amended: "hop.amended",
+			closed: "hop.closed",
+			reopened: "hop.reopened"
+		};
+		//#endregion
+		//#region src/client/ReportDetailView.tsx
+		/**
+		* One report's detail: its transfer path, its thread links, and its body.
+		*
+		* Shared by the two surfaces that show a report — the conversation tab, where it
+		* opens in place under its row, and the right column's canvas tab, where it opens
+		* under the drawing. One implementation on purpose: the two are read side by
+		* side, and the same report must not read differently in them.
+		*
+		* The two variants differ in exactly two ways, both about who owns the space:
+		* a row's panel grows with the timeline's own scroll (so it has no inner scroll
+		* box — a nested scroller would only steal the wheel), while a docked panel hands
+		* over a finite height and the detail takes its share of it and scrolls inside.
+		*
+		* @module dsh-report-ledger/client/ReportDetailView
+		*/
+		const time = {
+			color: "var(--dsw-alias-label-caption, #999)",
+			fontSize: "var(--dsw-font-xxxs-11, 11)",
+			whiteSpace: "nowrap"
+		};
+		/**
+		* The same caption look, for content that must be allowed to WRAP.
+		*
+		* `time` sets `white-space: nowrap`, which is right for a timestamp and wrong for
+		* anything whose length the ledger decides: a nowrap element's min-content width
+		* is its whole unbreakable line, so inside a `1fr` grid track it grows the track
+		* past its container. Recipient lists and hop notes are exactly that — which is
+		* how the transfer path used to push the whole tab into a horizontal scrollbar.
+		*/
+		const wrap = {
+			...time,
+			whiteSpace: "normal",
+			minWidth: 0,
+			overflowWrap: "anywhere"
+		};
+		/** The frame the rendered body sits in — a block, not a scroll box. */
+		const bodyFrame = {
+			padding: "8px 10px",
+			background: "var(--dsw-alias-bg-base, rgba(0,0,0,0.02))",
+			border: "1px solid var(--dsw-alias-border-l1, rgba(0,0,0,0.06))",
+			borderRadius: "4px"
+		};
+		/** The footer line: ledger path plus its copy control. */
+		const pathRow = {
+			...wrap,
+			marginTop: "6px",
+			display: "flex",
+			alignItems: "baseline",
+			gap: "6px"
+		};
+		/** A row's inline panel: indented under its row, growing with the page. */
+		const rowBox = {
+			margin: "4px 0 10px 24px",
+			padding: "10px 12px",
+			borderRadius: "6px",
+			background: "var(--dsw-alias-bg-layer-2, rgba(0,0,0,0.03))",
+			border: "1px solid var(--dsw-alias-border-l1, rgba(0,0,0,0.06))"
+		};
+		/** A docked panel's share: a column that owns its height and scrolls inside it. */
+		const pane = {
+			display: "flex",
+			flexDirection: "column",
+			height: "100%",
+			minHeight: 0,
+			padding: "8px 12px 10px",
+			borderTop: "1px solid var(--dsw-alias-border-l1, rgba(0,0,0,0.08))",
+			background: "var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.02))"
+		};
+		const paneHead = {
+			display: "flex",
+			alignItems: "center",
+			gap: "8px",
+			marginBottom: "6px"
+		};
+		const paneBody = {
+			flex: "1 1 auto",
+			minHeight: 0,
+			overflow: "auto"
+		};
+		/**
+		* Render one report: route, thread, body and path.
+		* @param props - the read result, the copy seat, and how the box is dressed.
+		* @returns the detail block.
+		*/
+		function ReportDetailView(props) {
+			const { report, detail, error, t, idHint, id, variant, onOpenReport, inList, visibleInFilter, onClose } = props;
+			const [copiedPath, setCopiedPath] = (0, react.useState)(false);
+			const copyTimer = (0, react.useRef)(void 0);
+			(0, react.useEffect)(() => () => {
+				if (copyTimer.current !== void 0) globalThis.clearTimeout(copyTimer.current);
 			}, []);
-			const shell = {
-				padding: "16px 20px",
-				overflowY: "auto",
-				height: "100%",
-				font: "var(--dsw-font-xs-13, 13px/1.6 system-ui, sans-serif)",
-				color: "var(--dsw-alias-label-primary, inherit)"
-			};
-			const head = {
-				display: "flex",
-				alignItems: "baseline",
-				gap: "12px",
-				marginBottom: "12px"
-			};
-			const summary = {
-				color: "var(--dsw-alias-label-tertiary, #888)",
-				fontSize: "var(--dsw-font-xxs-12, 12)",
-				flex: "1 1 auto"
-			};
-			const button = {
-				font: "inherit",
-				color: "var(--dsw-alias-label-secondary, inherit)",
-				background: "var(--dsw-alias-bg-layer-2, transparent)",
-				border: "1px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.12))",
-				borderRadius: "6px",
-				padding: "3px 10px",
-				cursor: "pointer"
-			};
-			const chip = (extra) => ({
-				display: "inline-block",
-				padding: "0 6px",
-				borderRadius: "999px",
-				fontSize: "var(--dsw-font-xxxs-11, 11)",
-				lineHeight: "17px",
-				marginRight: "6px",
-				...extra
-			});
-			const tools = {
-				display: "flex",
-				alignItems: "center",
-				flexWrap: "wrap",
-				gap: "6px",
-				marginBottom: "10px"
-			};
-			const time = {
-				color: "var(--dsw-alias-label-caption, #999)",
-				fontSize: "var(--dsw-font-xxxs-11, 11)",
-				whiteSpace: "nowrap"
-			};
-			if (error !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: shell,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: { color: "var(--dsw-alias-state-error-label, #b00)" },
-					children: t("view.error", { code: error })
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: { marginTop: "8px" },
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						style: button,
-						onClick: refresh,
-						children: t("view.retry")
+			const shownBody = (0, react.useMemo)(() => displayBody(detail?.body ?? ""), [detail]);
+			const bodyText = (0, react.useMemo)(() => {
+				const text = shownBody.text.trim();
+				return shownBody.truncated ? closeOpenFence(text) : text;
+			}, [shownBody]);
+			/** Strings for the prose renderer's own controls, from this plugin's dictionary. */
+			const markdownLabels = (0, react.useMemo)(() => ({
+				code: {
+					copyLabel: t("body.copy"),
+					copiedLabel: t("body.copied")
+				},
+				footnotes: t("body.footnotes")
+			}), [t]);
+			/**
+			* Copy the ledger path.
+			*
+			* Uses the shell's `writeClipboard` rather than `navigator.clipboard`, so the
+			* plugin inherits whatever fallback chain the rest of the GUI relies on.
+			*/
+			const copyPath = (0, react.useCallback)((path) => {
+				(0, _deepseek_ai_dsh_client_ui_primitives.writeClipboard)(path).then((ok) => {
+					if (!ok) return;
+					setCopiedPath(true);
+					if (copyTimer.current !== void 0) globalThis.clearTimeout(copyTimer.current);
+					copyTimer.current = globalThis.setTimeout(() => {
+						setCopiedPath(false);
+					}, COPIED_HOLD_MS);
+				});
+			}, []);
+			const link = (target) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: { marginRight: "6px" },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+					label: fill(t("detail.openLinked"), { report: target }),
+					side: "bottom",
+					delayMs: 400,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => {
+							onOpenReport(target);
+						},
+						children: target
 					})
-				})]
-			});
-			if (payload === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: shell,
-				children: t("view.loading")
-			});
-			const statusLabel = {
-				all: "filter.all",
-				open: "filter.open",
-				acked: "filter.acked",
-				closed: "filter.closed"
-			};
-			const statusCount = {
-				all: counts.all,
-				open: counts.open,
-				acked: counts.acked,
-				closed: counts.closed
-			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: shell,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: head,
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("view.tab") }),
+				})
+			}, target);
+			const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				error !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { color: "var(--dsw-alias-state-error-primary, #b00)" },
+					children: t("view.error", { code: error })
+				}) : null,
+				detail === void 0 && error === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: time,
+					children: t("view.detail.loading")
+				}) : null,
+				detail === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { marginBottom: "6px" },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("view.detail.route") })
+					}),
+					detail.hops.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: time,
+						children: t("view.detail.routeEmpty")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: "auto auto auto 1fr",
+							gap: "2px 10px",
+							marginBottom: "8px"
+						},
+						children: detail.hops.map((hop, hopIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								style: summary,
-								children: filtering ? t("filter.showing", {
-									visible: visibleReportCount,
-									total: counts.all
-								}) : t("view.summary", {
-									sessions: payload.sessions.length,
-									reports: payload.reports.length
+								style: time,
+								children: stamp(hop.at)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t(HOP_LABEL[hop.action]) }) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: wrap,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+									label: idHint(hop.actor),
+									side: "bottom",
+									delayMs: 400,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hop.actor })
 								})
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								style: button,
-								onClick: refresh,
-								children: t("view.refresh")
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: wrap,
+								children: hop.to.length === 0 ? hop.note ?? "" : `→ ${hop.to.join(", ")}${hop.note === void 0 ? "" : ` (${hop.note})`}`
 							})
-						]
+						] }, `h-${hopIndex}`))
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: tools,
-						title: t("filter.hint"),
+					detail.pending.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							...wrap,
+							display: "flex",
+							alignItems: "baseline",
+							gap: "6px"
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+							state: "warning",
+							size: 8
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: fill(t("view.detail.pending"), { targets: detail.pending.join(", ") }) })]
+					}),
+					(() => {
+						const parent = detail.front.parent;
+						const children = detail.front.children;
+						if (parent === void 0 && children.length === 0) return null;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: { marginBottom: "8px" },
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("detail.thread") }),
+								parent === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									style: { marginTop: "2px" },
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: time,
+										children: `${t("detail.parent")}: `
+									}), link(parent)]
+								}),
+								children.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									style: { marginTop: "2px" },
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: time,
+										children: `${t("detail.children")}: `
+									}), children.map(link)]
+								})
+							]
+						});
+					})(),
+					inList ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							...wrap,
+							marginBottom: "8px"
+						},
 						children: [
-							[
-								"all",
-								"open",
-								"acked",
-								"closed"
-							].map((candidate) => {
-								const active = status === candidate;
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									"aria-pressed": active,
-									onClick: () => {
-										setStatus(candidate);
-									},
-									style: {
-										...button,
-										...active ? {
-											color: "var(--dsw-alias-label-primary, inherit)",
-											background: "var(--dsw-alias-interactive-bg-active, rgba(0,0,0,0.08))",
-											borderColor: "var(--dsw-alias-border-l3, rgba(0,0,0,0.20))"
-										} : {}
-									},
-									children: `${t(statusLabel[candidate])} ${statusCount[candidate]}`
-								}, candidate);
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type: "search",
-								value: text,
-								placeholder: t("filter.search"),
-								"aria-label": t("filter.search"),
-								onChange: (event) => {
-									setText(event.target.value);
-								},
-								style: {
-									flex: "1 1 200px",
-									minWidth: "140px",
-									padding: "3px 8px",
-									font: "inherit",
-									color: "var(--dsw-alias-label-primary, inherit)",
-									background: "var(--dsw-alias-bg-base, rgba(0,0,0,0.02))",
-									border: "1px solid var(--dsw-alias-border-l2, rgba(0,0,0,0.12))",
-									borderRadius: "6px"
-								}
-							}),
-							filtering ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								style: button,
-								onClick: () => {
-									setStatus("all");
-									setText("");
-								},
-								children: t("filter.clear")
-							}) : null,
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								style: button,
-								title: t("basis.hint"),
+							fill(t("detail.outside"), { report: detail.front.report }),
+							" ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "outline",
 								onClick: () => {
-									setBasis(basis === "created" ? "updated" : "created");
+									onOpenReport(void 0);
 								},
-								children: t(basis === "created" ? "basis.created" : "basis.updated")
+								children: t("detail.backToList")
 							})
 						]
 					}),
-					rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: { color: "var(--dsw-alias-label-tertiary, #888)" },
-						children: t("view.empty")
+					inList && !visibleInFilter ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							...wrap,
+							marginBottom: "8px"
+						},
+						children: fill(t("detail.filteredOut"), { report: detail.front.report })
 					}) : null,
-					rows.length > 0 && visible.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: { color: "var(--dsw-alias-label-tertiary, #888)" },
-						children: t("filter.none")
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { margin: "8px 0 4px" },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("view.detail.body") })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: bodyFrame,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.MarkdownText, {
+							text: bodyText,
+							labels: markdownLabels
+						})
+					}),
+					shownBody.truncated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							...wrap,
+							marginTop: "4px"
+						},
+						children: fill(t("detail.bodyTruncated"), { chars: shownBody.text.trim().length })
 					}) : null,
-					visible.map((row, index) => {
-						const pad = 8 + row.depth * 18;
-						if (row.kind === "session") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: {
-								display: "flex",
-								gap: "8px",
-								padding: `4px 0 4px ${pad}px`,
-								alignItems: "baseline"
-							},
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: { color: "var(--dsw-alias-label-tertiary, #999)" },
-									children: "●"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									style: { flex: "1 1 auto" },
-									children: [
-										row.delegated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											style: chip({
-												color: "var(--dsw-alias-state-business-label, #0969da)",
-												background: "var(--dsw-alias-state-business-bg, rgba(9,105,218,0.10))"
-											}),
-											children: t("view.delegated")
-										}) : null,
-										row.live ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											style: chip({
-												color: "var(--dsw-alias-state-success-label, #1a7f37)",
-												background: "var(--dsw-alias-state-success-bg, rgba(26,127,55,0.10))"
-											}),
-											children: t("view.live")
-										}) : null,
-										row.title ?? row.id
-									]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: time,
-									children: stamp(row.at)
-								})
-							]
-						}, `s-${row.id}-${index}`);
-						const front = row.front;
-						const expanded = openReport === front.report;
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: { paddingLeft: `${pad}px` },
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								role: "button",
-								tabIndex: 0,
-								onClick: () => {
-									setOpenReport(expanded ? void 0 : front.report);
-								},
-								onKeyDown: (event) => {
-									if (event.key === "Enter" || event.key === " ") {
-										event.preventDefault();
-										setOpenReport(expanded ? void 0 : front.report);
-									}
-								},
-								style: {
-									display: "flex",
-									gap: "8px",
-									alignItems: "baseline",
-									padding: "5px 8px",
-									margin: "2px 0",
-									borderRadius: "6px",
-									cursor: "pointer",
-									background: "var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.02))",
-									border: "1px solid var(--dsw-alias-border-l1, rgba(0,0,0,0.06))"
-								},
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: { color: "var(--dsw-alias-label-tertiary, #999)" },
-										children: expanded ? "▾" : "▸"
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-										style: { flex: "1 1 auto" },
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												style: chip(statusStyle(front.status)),
-												children: front.status
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: front.report }),
-											" ",
-											front.subject,
-											front.task === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												title: fill(t("row.filterByTask"), { task: front.task }),
-												onClick: (event) => {
-													event.stopPropagation();
-													setText(front.task);
-												},
-												style: {
-													...chip({
-														color: "var(--dsw-alias-state-business-label, #0969da)",
-														background: "var(--dsw-alias-state-business-bg, rgba(9,105,218,0.10))"
-													}),
-													border: 0,
-													cursor: "pointer",
-													font: "inherit"
-												},
-												children: front.task
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												style: {
-													...time,
-													marginTop: "2px"
-												},
-												children: [
-													`from=${front.from}`,
-													front.to.length > 0 ? ` → ${front.to.join(", ")}` : "",
-													front.cc.length > 0 ? ` cc ${front.cc.join(", ")}` : "",
-													` · ${fill(t("row.hops"), { count: front.hops })}`,
-													front.authors.length > 1 ? ` · ${fill(t("row.authors"), { count: front.authors.length })}` : "",
-													front.last === void 0 ? "" : ` · last=${front.last.action}`
-												]
-											})
-										]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: time,
-										children: stamp(front.updated)
-									})
-								]
-							}), expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								style: {
-									margin: "4px 0 10px 24px",
-									padding: "10px 12px",
-									borderRadius: "6px",
-									background: "var(--dsw-alias-bg-layer-2, rgba(0,0,0,0.03))",
-									border: "1px solid var(--dsw-alias-border-l1, rgba(0,0,0,0.06))"
-								},
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: pathRow,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+								state: "idle",
+								size: 6
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								style: { wordBreak: "break-all" },
 								children: [
-									detailError !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										style: { color: "var(--dsw-alias-state-error-label, #b00)" },
-										children: t("view.error", { code: detailError })
-									}) : null,
-									detail === void 0 && detailError === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										style: time,
-										children: t("view.detail.loading")
-									}) : null,
-									detail === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: { marginBottom: "6px" },
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("view.detail.route") })
-										}),
-										detail.hops.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: time,
-											children: t("view.detail.routeEmpty")
-										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: {
-												display: "grid",
-												gridTemplateColumns: "auto auto auto 1fr",
-												gap: "2px 10px",
-												marginBottom: "8px"
-											},
-											children: detail.hops.map((hop, hopIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													style: time,
-													children: stamp(hop.at)
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: hop.action }) }),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													style: time,
-													children: hop.actor
-												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													style: time,
-													children: hop.to.length === 0 ? hop.note ?? "" : `→ ${hop.to.join(", ")}${hop.note === void 0 ? "" : ` (${hop.note})`}`
-												})
-											] }, `h-${hopIndex}`))
-										}),
-										detail.pending.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: {
-												...time,
-												color: "var(--dsw-alias-state-warn-label, #9a6700)"
-											},
-											children: fill(t("view.detail.pending"), { targets: detail.pending.join(", ") })
-										}),
-										(() => {
-											const parent = detail.front.parent;
-											const children = detail.front.children;
-											if (parent === void 0 && children.length === 0) return null;
-											const link = (target) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-												type: "button",
-												title: fill(t("detail.openLinked"), { report: target }),
-												onClick: () => {
-													setOpenReport(target);
-												},
-												style: {
-													...button,
-													marginRight: "6px",
-													font: "var(--dsw-font-xxxs-11, 11px/1.4 ui-monospace, monospace)"
-												},
-												children: target
-											}, target);
-											return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-												style: { marginBottom: "8px" },
-												children: [
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("detail.thread") }),
-													parent === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-														style: { marginTop: "2px" },
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															style: time,
-															children: `${t("detail.parent")}: `
-														}), link(parent)]
-													}),
-													children.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-														style: { marginTop: "2px" },
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															style: time,
-															children: `${t("detail.children")}: `
-														}), children.map(link)]
-													})
-												]
-											});
-										})(),
-										inList.has(detail.front.report) ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											style: {
-												...time,
-												marginBottom: "8px"
-											},
-											children: [
-												fill(t("detail.outside"), { report: detail.front.report }),
-												" ",
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-													type: "button",
-													style: button,
-													onClick: () => {
-														setOpenReport(void 0);
-													},
-													children: t("detail.backToList")
-												})
-											]
-										}),
-										inList.has(detail.front.report) && !filteredReportIds.has(detail.front.report) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: {
-												...time,
-												marginBottom: "8px"
-											},
-											children: fill(t("detail.filteredOut"), { report: detail.front.report })
-										}) : null,
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: { margin: "8px 0 4px" },
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("view.detail.body") })
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-											style: {
-												margin: 0,
-												padding: "8px 10px",
-												maxHeight: "320px",
-												overflow: "auto",
-												whiteSpace: "pre-wrap",
-												wordBreak: "break-word",
-												background: "var(--dsw-alias-bg-base, rgba(0,0,0,0.02))",
-												border: "1px solid var(--dsw-alias-border-l1, rgba(0,0,0,0.06))",
-												borderRadius: "4px",
-												font: "var(--dsw-font-xs-13, 13px/1.5 ui-monospace, monospace)"
-											},
-											children: shownBody.text.trim()
-										}),
-										shownBody.truncated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: {
-												...time,
-												marginTop: "4px"
-											},
-											children: fill(t("detail.bodyTruncated"), { chars: shownBody.text.trim().length })
-										}) : null,
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											style: {
-												...time,
-												marginTop: "6px",
-												wordBreak: "break-all"
-											},
-											children: [
-												t("view.detail.path"),
-												": ",
-												detail.path
-											]
-										})
-									] })
+									t("view.detail.path"),
+									": ",
+									detail.path
 								]
-							}) : null]
-						}, `r-${front.report}`);
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+								label: copiedPath ? t("body.copied") : t("view.copyPath"),
+								side: "bottom",
+								delayMs: 300,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									variant: "ghost",
+									size: "sm",
+									icon: copiedPath ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCheckOutlineRegular, { size: 16 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCopyOutlineRegular, { size: 16 }),
+									"aria-label": copiedPath ? t("body.copied") : t("view.copyPath"),
+									onClick: () => {
+										copyPath(detail.path);
+									}
+								})
+							})
+						]
 					})
-				]
+				] })
+			] });
+			if (variant === "pane") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: pane,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: paneHead,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: report }), onClose === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "ghost",
+						size: "sm",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { size: 14 }),
+						"aria-label": fill(t("row.collapse"), { report }),
+						onClick: onClose
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: paneBody,
+					children: content
+				})]
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id,
+				style: rowBox,
+				children: content
+			});
+		}
+		//#endregion
+		//#region src/client/timeline-source.ts
+		/**
+		* The ledger's browser-side read path: the two endpoints, the poll cadence, and
+		* the one way any view reads them.
+		*
+		* Two surfaces now draw the same ledger for the same session — the conversation
+		* tab and the canvas tab in the right column. Keeping the envelope unwrapping
+		* and the polling rule here is what stops the second surface from growing a
+		* second opinion about either; that kind of drift does not fail loudly, it just
+		* leaves one of the two views quietly rendering nothing.
+		*
+		* @module dsh-report-ledger/client/timeline-source
+		*/
+		/** The timeline read endpoint, addressed by the tree's root session. */
+		const TIMELINE_URL = "/api/report-ledger/timeline";
+		/** One report's detail: its transfer path and its body. */
+		const REPORT_URL = "/api/report-ledger/report";
+		/**
+		* How often a mounted view re-reads the timeline.
+		*
+		* The ledger is written by other agents in the background, so a view that loads
+		* once goes stale precisely when it matters — the human is watching for a report
+		* that has not been written yet. Ten seconds is quiet enough not to matter on a
+		* large ledger and still fast enough to watch a collaboration happen.
+		*/
+		const POLL_INTERVAL_MS = 1e4;
+		/** Read one endpoint and unwrap its result envelope. */
+		async function getJson(url) {
+			const response = await fetch(url, {
+				credentials: "same-origin",
+				headers: { accept: "application/json" }
+			});
+			let body;
+			try {
+				body = await response.json();
+			} catch {
+				throw new Error(`HTTP ${response.status}`);
+			}
+			const envelope = body;
+			if (envelope.ok !== true) throw new Error(envelope.code ?? `HTTP ${response.status}`);
+			return envelope.value;
+		}
+		/**
+		* Follow one session tree's timeline for as long as the caller is mounted.
+		*
+		* Reads on mount and on every session change, then on the poll cadence. Polling
+		* stops while the page is hidden and a returning page catches up immediately, so
+		* a background panel costs nothing and a foreground one is never behind.
+		* @param sessionId - the tree's root session; an empty value reads nothing.
+		* @returns the latest payload, its error, and a manual refresh.
+		*/
+		function useTimeline(sessionId) {
+			const [payload, setPayload] = (0, react.useState)(void 0);
+			const [error, setError] = (0, react.useState)(void 0);
+			const [nonce, setNonce] = (0, react.useState)(0);
+			(0, react.useEffect)(() => {
+				if (sessionId === "") {
+					setError("no-session");
+					return;
+				}
+				let cancelled = false;
+				setError(void 0);
+				getJson(`${TIMELINE_URL}?root=${encodeURIComponent(sessionId)}`).then((value) => {
+					if (!cancelled) setPayload(value);
+				}).catch((cause) => {
+					if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause));
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, [sessionId, nonce]);
+			(0, react.useEffect)(() => {
+				if (sessionId === "") return void 0;
+				const tick = () => {
+					if (globalThis.document?.visibilityState === "hidden") return;
+					setNonce((value) => value + 1);
+				};
+				const timer = globalThis.setInterval(tick, POLL_INTERVAL_MS);
+				const onVisibility = () => {
+					if (globalThis.document?.visibilityState !== "hidden") tick();
+				};
+				globalThis.document?.addEventListener("visibilitychange", onVisibility);
+				return () => {
+					globalThis.clearInterval(timer);
+					globalThis.document?.removeEventListener("visibilitychange", onVisibility);
+				};
+			}, [sessionId]);
+			return {
+				payload,
+				error,
+				refresh: (0, react.useCallback)(() => {
+					setNonce((value) => value + 1);
+				}, [])
+			};
+		}
+		/**
+		* Read one report's detail, for whichever surface is showing it.
+		*
+		* Not polled on its own: the caller owns the cadence, because the two surfaces
+		* want different ones — the conversation tab re-reads it when the reader hits
+		* refresh, while a docked panel passes its own timeline tick so a report being
+		* written under the reader's eyes keeps up.
+		*
+		* A re-read of the SAME report therefore keeps the previous detail on screen
+		* until the new one arrives: clearing it would turn every tick into a flash of
+		* "reading the transfer path" over a body the reader is in the middle of. A read
+		* for a DIFFERENT report is a different question, so the state is keyed by report
+		* id and anything read for another report is never returned — that is what stops
+		* one click from rendering the previous report's body under the new one, even for
+		* a frame.
+		*
+		* Errors follow the same rule: a failed re-read keeps the detail and reports the
+		* failure beside it, and only a successful read clears it.
+		* @param report - the report to read; `undefined` clears the read.
+		* @param nonce - bump to re-read the same report.
+		* @returns the detail for `report` only, its error, and nothing else.
+		*/
+		function useReportDetail(report, nonce) {
+			const [state, setState] = (0, react.useState)(void 0);
+			(0, react.useEffect)(() => {
+				if (report === void 0) return void 0;
+				let cancelled = false;
+				getJson(`${REPORT_URL}?id=${encodeURIComponent(report)}`).then((value) => {
+					if (!cancelled) setState({
+						report,
+						detail: value
+					});
+				}).catch((cause) => {
+					if (cancelled) return;
+					const message = cause instanceof Error ? cause.message : String(cause);
+					setState((previous) => previous !== void 0 && previous.report === report && previous.detail !== void 0 ? {
+						report,
+						detail: previous.detail,
+						error: message
+					} : {
+						report,
+						error: message
+					});
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, [report, nonce]);
+			if (report === void 0 || state === void 0 || state.report !== report) return {
+				detail: void 0,
+				error: void 0
+			};
+			return {
+				detail: state.detail,
+				error: state.error
+			};
+		}
+		//#endregion
+		//#region src/client/styles.ts
+		/**
+		* The plugin's own stylesheet.
+		*
+		* The shell's primitives ship their own CSS with the shell, which is the whole
+		* point of using them — a plugin gets the app's real look without carrying a
+		* theme. What is left for us is the one thing only a consumer can know:
+		*
+		*  **Layout that belongs to the consumer.** `Input` sizes itself to its content
+		*  (`display: inline-flex`, no width), which is right in a form and wrong in this
+		*  tab's toolbar, where the search seat takes the slack. The component puts the
+		*  `className` it is given on its own wrapper, so one rule is enough — and
+		*  targeting a class of our own keeps us off the hashed class names, which are
+		*  free to change between shell releases.
+		*
+		* Nothing here restyles a shell component; every library element keeps the look
+		* the shell gave it. The SVG drawing rules that used to live here went with the
+		* lane view they drew (R-0011): the topology is now painted by the card canvas,
+		* which carries its own painter, so a stylesheet entry for a rail or an edge had
+		* no consumer left.
+		*
+		* @module dsh-report-ledger/client/styles
+		*/
+		/** Class the tab puts on the toolbar's search seat. */
+		const SEARCH_CLASS = "report-ledger-search";
+		/** Element id, so a reload replaces the sheet instead of stacking one per apply. */
+		const STYLE_ID = "dsh-report-ledger-styles";
+		/** The adapter rules, kept in one place so the id and the text cannot drift. */
+		const CSS = `
+.${SEARCH_CLASS} { flex: 1 1 auto; min-width: 0; }
+`;
+		/**
+		* Mount the adapter stylesheet.
+		* @returns a disposer that removes it, owned by the plugin's effect scope.
+		*/
+		function installStyles() {
+			const doc = globalThis.document;
+			if (doc === void 0) return () => {};
+			doc.getElementById(STYLE_ID)?.remove();
+			const style = doc.createElement("style");
+			style.id = STYLE_ID;
+			style.textContent = CSS;
+			doc.head.append(style);
+			return () => {
+				style.remove();
+			};
+		}
+		//#endregion
+		//#region src/client/ReportsView.tsx
+		/**
+		* The report timeline view — the `conversation.view` tab this plugin registers.
+		*
+		* It renders one top-to-bottom timeline of the collaboration: the session
+		* subtree as it branched, interleaved with the reports those sessions produced
+		* or were copied on. Rows carry only the digest, so a long-running tree stays
+		* scannable; clicking a report opens its transfer path and body on demand.
+		*
+		* Data comes from this plugin's own read-only endpoint rather than a generated
+		* remote: the host assembles the subtree and filters the ledger to the sessions
+		* in it, which the browser cannot do on its own because a report's transfer path
+		* is a host-side file, not session state.
+		*
+		* A blank session never reaches this component — the conversation slot is
+		* omitted entirely in that state.
+		*
+		* @module dsh-report-ledger/client/ReportsView
+		*/
+		/** Storage key for the remembered status filter. */
+		const FILTER_KEY = "dsh.reportLedger.filter.v1";
+		/** Read the remembered status filter, tolerating absent or damaged storage. */
+		function rememberedStatus() {
+			try {
+				const raw = globalThis.localStorage?.getItem(FILTER_KEY);
+				if (typeof raw === "string") {
+					const parsed = JSON.parse(raw);
+					if (parsed.status === "open" || parsed.status === "acked" || parsed.status === "closed") return parsed.status;
+				}
+			} catch {}
+			return "all";
+		}
+		/**
+		* Render the report timeline.
+		* @param props - the session binding and the locale seat.
+		* @returns the tab content.
+		*/
+		function ReportsView(props) {
+			const { sessionId, t } = props;
+			const [payload, setPayload] = (0, react.useState)(void 0);
+			const [error, setError] = (0, react.useState)(void 0);
+			const [timelineNonce, setTimelineNonce] = (0, react.useState)(0);
+			const [detailNonce, setDetailNonce] = (0, react.useState)(0);
+			const [openReport, setOpenReport] = (0, react.useState)(void 0);
+			const [scrollTarget, setScrollTarget] = (0, react.useState)(void 0);
+			/** Row containers, so a thread jump can bring its target on screen. */
+			const rowRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+			const [status, setStatus] = (0, react.useState)(rememberedStatus);
+			const [text, setText] = (0, react.useState)("");
+			const [basis, setBasis] = (0, react.useState)("created");
+			const { detail, error: detailError } = useReportDetail(openReport, detailNonce);
+			const shown = detail !== void 0 && detail.front.report === openReport ? detail : void 0;
+			(0, react.useEffect)(() => {
+				try {
+					globalThis.localStorage?.setItem(FILTER_KEY, JSON.stringify({ status }));
+				} catch {}
+			}, [status]);
+			(0, react.useEffect)(() => {
+				setPayload(void 0);
+				setError(void 0);
+				setOpenReport(void 0);
+				setScrollTarget(void 0);
+			}, [sessionId]);
+			(0, react.useEffect)(() => {
+				if (sessionId === void 0 || sessionId === "") {
+					setError("no-session");
+					return;
+				}
+				let cancelled = false;
+				getJson(`${TIMELINE_URL}?root=${encodeURIComponent(sessionId)}`).then((value) => {
+					if (!cancelled) {
+						setPayload(value);
+						setError(void 0);
+					}
+				}).catch((cause) => {
+					if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause));
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, [sessionId, timelineNonce]);
+			(0, react.useEffect)(() => {
+				if (sessionId === void 0 || sessionId === "") return void 0;
+				const tick = () => {
+					if (globalThis.document?.visibilityState === "hidden") return;
+					setTimelineNonce((value) => value + 1);
+				};
+				const timer = globalThis.setInterval(tick, POLL_INTERVAL_MS);
+				const onVisibility = () => {
+					if (globalThis.document?.visibilityState !== "hidden") tick();
+				};
+				globalThis.document?.addEventListener("visibilitychange", onVisibility);
+				return () => {
+					globalThis.clearInterval(timer);
+					globalThis.document?.removeEventListener("visibilitychange", onVisibility);
+				};
+			}, [sessionId]);
+			const rows = (0, react.useMemo)(() => payload === void 0 ? [] : buildRows(payload, basis), [payload, basis]);
+			const counts = (0, react.useMemo)(() => statusCounts(payload?.reports ?? []), [payload]);
+			const inList = (0, react.useMemo)(() => payload === void 0 ? /* @__PURE__ */ new Set() : reportIds(payload), [payload]);
+			const lanes = (0, react.useMemo)(() => payload === void 0 ? /* @__PURE__ */ new Map() : laneIndex(payload), [payload]);
+			const depths = (0, react.useMemo)(() => payload === void 0 ? /* @__PURE__ */ new Map() : sessionDepths(payload), [payload]);
+			const filter = (0, react.useMemo)(() => ({
+				status,
+				text
+			}), [status, text]);
+			const visible = (0, react.useMemo)(() => {
+				const kept = filterRows(rows, filter);
+				if (openReport === void 0 || shown === void 0) return kept;
+				return withSynthesizedRow(kept, shown.front, basis, depths.get(shown.front.from) ?? 0);
+			}, [
+				rows,
+				filter,
+				openReport,
+				shown,
+				basis,
+				depths
+			]);
+			(0, react.useEffect)(() => {
+				if (scrollTarget === void 0) return;
+				if (openReport !== scrollTarget) {
+					setScrollTarget(void 0);
+					return;
+				}
+				const element = rowRefs.current.get(scrollTarget);
+				if (element === void 0) return;
+				setScrollTarget(void 0);
+				if (typeof element.scrollIntoView === "function") element.scrollIntoView({ block: "nearest" });
+			}, [
+				scrollTarget,
+				openReport,
+				visible
+			]);
+			const filteredReportIds = (0, react.useMemo)(() => {
+				const ids = /* @__PURE__ */ new Set();
+				for (const row of filterRows(rows, filter)) if (row.kind === "report") ids.add(row.front.report);
+				return ids;
+			}, [rows, filter]);
+			const filtering = isFiltering(filter);
+			const visibleReportCount = (0, react.useMemo)(() => visibleReports(rows, filter), [rows, filter]);
+			const empty = (0, react.useMemo)(() => payload === void 0 ? "none" : emptyState(payload, rows, filter), [
+				payload,
+				rows,
+				filter
+			]);
+			const titles = (0, react.useMemo)(() => payload === void 0 ? /* @__PURE__ */ new Map() : sessionTitles(payload), [payload]);
+			const idHint = (0, react.useCallback)((id) => {
+				const title = titles.get(id);
+				return title === void 0 ? id : `${title} · ${id}`;
+			}, [titles]);
+			/**
+			* One session id the way a dense row shows it: shortened, with the full value
+			* and the session title on hover. The hover is not decoration — it is where
+			* the human name lives, because titles are unbounded and a row is not.
+			*/
+			const idRef = (id) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+				label: idHint(id),
+				side: "bottom",
+				delayMs: 400,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: shortId(id) })
+			});
+			const refresh = (0, react.useCallback)(() => {
+				setTimelineNonce((value) => value + 1);
+				setDetailNonce((value) => value + 1);
+			}, []);
+			/**
+			* Open a report that was reached through a link rather than its own row.
+			*
+			* A row click expands in place — the row is already under the pointer and needs
+			* no help. A thread link is different: its target can be off screen, or have no
+			* row at all yet (outside this tree, or hidden by the filter), so the request to
+			* bring it on screen is recorded here and satisfied by the effect above when
+			* the row finally mounts.
+			*/
+			const openLinked = (0, react.useCallback)((report) => {
+				setOpenReport(report);
+				setScrollTarget(report);
+			}, []);
+			const shell = {
+				padding: "16px 20px",
+				overflowY: "auto",
+				height: "100%",
+				font: "var(--dsw-font-xs-13, 13px/1.6 system-ui, sans-serif)",
+				color: "var(--dsw-alias-label-primary, inherit)"
+			};
+			const head = {
+				display: "flex",
+				alignItems: "baseline",
+				gap: "12px",
+				marginBottom: "12px"
+			};
+			const summary = {
+				color: "var(--dsw-alias-label-tertiary, #888)",
+				fontSize: "var(--dsw-font-xxs-12, 12)",
+				flex: "1 1 auto"
+			};
+			/**
+			* The toolbar's search seat.
+			*
+			* `Input` renders its own wrapper around the field, so the flex sizing lives
+			* on this outer box rather than on the control itself.
+			*/
+			const searchBox = {
+				flex: "1 1 200px",
+				minWidth: "140px",
+				display: "flex"
+			};
+			const tools = {
+				display: "flex",
+				alignItems: "center",
+				flexWrap: "wrap",
+				gap: "6px",
+				marginBottom: "10px"
+			};
+			/** Chips sit next to a label; the shell's tags carry no spacing of their own. */
+			const tagRow = {
+				display: "inline-flex",
+				gap: "4px",
+				marginRight: "6px",
+				verticalAlign: "baseline"
+			};
+			/** Keeps the state dot on the row's text baseline. */
+			const dotCell = {
+				display: "inline-flex",
+				alignItems: "center"
+			};
+			/** The caption look for a timestamp; the digest's meta line reuses its colour. */
+			const time = {
+				color: "var(--dsw-alias-label-caption, #999)",
+				fontSize: "var(--dsw-font-xxxs-11, 11)",
+				whiteSpace: "nowrap"
+			};
+			/** The muted caption colour, for the empty-state sentences. */
+			const muted = { color: "var(--dsw-alias-label-tertiary, #888)" };
+			/**
+			* The strip that reports a failed re-read WITHOUT replacing the list.
+			*
+			* A warning, not an error: the ledger on screen is still the last thing that was
+			* successfully read, and the poll keeps trying. Colouring it like a page failure
+			* would teach the reader to stop believing the colour. The token is the shell's
+			* warn label rather than a mixed colour, so it follows the theme.
+			*/
+			const notice = {
+				display: "flex",
+				alignItems: "center",
+				gap: "6px",
+				marginBottom: "10px",
+				color: "var(--dsw-alias-state-warn-label, #a60)"
+			};
+			if (payload === void 0 && error !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: shell,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "6px"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+						state: "error",
+						size: 8
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("view.error", { code: error }) })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					style: { marginTop: "8px" },
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "outline",
+						onClick: refresh,
+						children: t("view.retry")
+					})
+				})]
+			});
+			if (payload === void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: shell,
+				children: t("view.loading")
+			});
+			const statusLabel = {
+				all: "filter.all",
+				open: "filter.open",
+				acked: "filter.acked",
+				closed: "filter.closed"
+			};
+			const statusCount = {
+				all: counts.all,
+				open: counts.open,
+				acked: counts.acked,
+				closed: counts.closed
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: shell,
+				children: [
+					error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: notice,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+								state: "warning",
+								size: 8
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: { flex: "1 1 auto" },
+								children: t("view.error", { code: error })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "outline",
+								onClick: refresh,
+								children: t("view.retry")
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: head,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("view.tab") }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: summary,
+								children: filtering ? t("filter.showing", {
+									visible: visibleReportCount,
+									total: counts.all
+								}) : t("view.summary", {
+									sessions: payload.sessions.length,
+									reports: payload.reports.length
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "outline",
+								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutlineRegular, { size: 16 }),
+								onClick: refresh,
+								children: t("view.refresh")
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: tools,
+						title: t("filter.hint"),
+						children: [
+							[
+								"all",
+								"open",
+								"acked",
+								"closed"
+							].map((candidate) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Pill, {
+								active: status === candidate,
+								"aria-pressed": status === candidate,
+								onClick: () => {
+									setStatus(candidate);
+								},
+								children: `${t(statusLabel[candidate])} ${statusCount[candidate]}`
+							}, candidate)),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: searchBox,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+									type: "search",
+									className: SEARCH_CLASS,
+									value: text,
+									placeholder: t("filter.search"),
+									"aria-label": t("filter.search"),
+									onChange: (event) => {
+										setText(event.target.value);
+									}
+								})
+							}),
+							filtering ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "outline",
+								onClick: () => {
+									setStatus("all");
+									setText("");
+								},
+								children: t("filter.clear")
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+								label: t("basis.hint"),
+								side: "bottom",
+								delayMs: 400,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									variant: "outline",
+									onClick: () => {
+										setBasis(basis === "created" ? "updated" : "created");
+									},
+									children: t(basis === "created" ? "basis.created" : "basis.updated")
+								})
+							})
+						]
+					}),
+					empty === "no-reports" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: muted,
+						children: t("view.empty")
+					}) : null,
+					empty === "filtered-out" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: muted,
+						children: t("filter.none")
+					}) : null,
+					visible.map((row) => {
+						const pad = 8 + row.depth * 18;
+						if (row.kind === "session") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								gap: "8px",
+								padding: `4px 0 4px ${pad}px`,
+								alignItems: "baseline"
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+									label: idHint(row.id),
+									side: "bottom",
+									delayMs: 400,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: dotCell,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, {
+											state: row.live ? "ongoing" : "idle",
+											size: 8
+										})
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									style: {
+										flex: "1 1 auto",
+										minWidth: 0
+									},
+									children: [row.delegated || row.live ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										style: tagRow,
+										children: [row.delegated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
+											tone: "info",
+											children: t("view.delegated")
+										}) : null, row.live ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
+											tone: "success",
+											children: t("view.live")
+										}) : null]
+									}) : null, row.title ?? shortId(row.id)]
+								}),
+								row.title === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+									label: row.id,
+									side: "right",
+									delayMs: 400,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: time,
+										children: shortId(row.id)
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: time,
+									children: stamp(row.at)
+								})
+							]
+						}, `s-${row.id}`);
+						const front = row.front;
+						const expanded = openReport === front.report;
+						const panelId = `report-ledger-panel-${front.report}`;
+						const wtLabel = worktreeLabel(front.worktree);
+						const wtLane = lanes.get(front.report);
+						const toggleLabel = fill(expanded ? t("row.collapse") : t("row.expand"), { report: front.report });
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							ref: (element) => {
+								if (element === null) rowRefs.current.delete(front.report);
+								else rowRefs.current.set(front.report, element);
+							},
+							style: { paddingLeft: `${pad}px` },
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								onClick: () => {
+									setOpenReport(expanded ? void 0 : front.report);
+								},
+								style: {
+									display: "flex",
+									gap: "8px",
+									alignItems: "baseline",
+									padding: "5px 8px",
+									margin: "2px 0",
+									borderRadius: "6px",
+									cursor: "pointer",
+									background: "var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.02))",
+									border: "1px solid var(--dsw-alias-border-l1, rgba(0,0,0,0.06))"
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+										variant: "ghost",
+										size: "sm",
+										icon: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { size: 14 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutlineRegular, { size: 14 }),
+										"aria-expanded": expanded,
+										...expanded ? { "aria-controls": panelId } : {},
+										"aria-label": toggleLabel,
+										title: toggleLabel,
+										onClick: (event) => {
+											event.stopPropagation();
+											setOpenReport(expanded ? void 0 : front.report);
+										}
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										style: {
+											flex: "1 1 auto",
+											minWidth: 0
+										},
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												style: tagRow,
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
+													tone: STATUS_TONE[front.status],
+													children: t(STATUS_LABEL[front.status])
+												})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: front.report }),
+											" ",
+											front.subject,
+											front.task === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Pill, {
+												title: fill(t("row.filterByTask"), { task: front.task }),
+												onClick: (event) => {
+													event.stopPropagation();
+													setStatus("all");
+													setText(front.task);
+												},
+												children: front.task
+											}),
+											wtLabel === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
+												tone: LEASE_TONE[wtLane?.state ?? "none"],
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													title: `${fill(t("row.filterByWorktree"), { worktree: wtLabel })} — ${t(LEASE_HINT[wtLane?.state ?? "none"])}`,
+													style: { cursor: "pointer" },
+													onClick: (event) => {
+														event.stopPropagation();
+														setStatus("all");
+														setText(wtLabel);
+													},
+													children: wtLabel
+												})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												style: {
+													...time,
+													marginTop: "2px",
+													overflow: "hidden",
+													textOverflow: "ellipsis"
+												},
+												children: [
+													`from=`,
+													idRef(front.from),
+													front.to.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" → ", front.to.map((id, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [index > 0 ? ", " : "", idRef(id)] }, id))] }) : null,
+													front.cc.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" cc ", front.cc.map((id, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [index > 0 ? ", " : "", idRef(id)] }, id))] }) : null,
+													` · ${fill(t("row.hops"), { count: front.hops })}`,
+													front.authors.length > 1 ? ` · ${fill(t("row.authors"), { count: front.authors.length })}` : "",
+													front.last === void 0 ? "" : ` · ${t("row.last")} ${t(HOP_LABEL[front.last.action])}`
+												]
+											})
+										]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: time,
+										children: stamp(row.at)
+									})
+								]
+							}), expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReportDetailView, {
+								report: front.report,
+								detail: shown,
+								error: detailError,
+								t,
+								idHint,
+								id: panelId,
+								variant: "row",
+								onOpenReport: openLinked,
+								inList: inList.has(front.report),
+								visibleInFilter: filteredReportIds.has(front.report)
+							}) : null]
+						}, `r-${front.report}`);
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/cardgraph-model.ts
+		/**
+		* Defaults.
+		*
+		* A full card is 240x110 — enough for a title, a status line and two lines of
+		* subject at a readable size. The chip tier is deliberately tiny: below 0.4 zoom
+		* a card is a colour, and drawing readable text there would be a lie about how
+		* much of the drawing the reader can actually take in.
+		*/
+		const DEFAULT_CARDGRAPH_OPTIONS = {
+			lod: "card",
+			cardMinZoom: .8,
+			compactMinZoom: .4,
+			sizes: {
+				card: {
+					width: 240,
+					height: 110
+				},
+				compact: {
+					width: 160,
+					height: 36
+				},
+				chip: {
+					width: 60,
+					height: 14
+				}
+			},
+			frameHeaderHeight: 26,
+			framePaddingX: 12,
+			framePaddingTop: 10,
+			framePaddingBottom: 12,
+			minFrameWidth: 180,
+			minFrameHeight: 96,
+			cardGap: 8,
+			columnGap: 48,
+			frameGap: 24,
+			margin: 24
+		};
+		/** How far out the drawing may be zoomed, in screen pixels per drawing unit. */
+		const MIN_ZOOM = .25;
+		/** How far in the drawing may be zoomed. */
+		const MAX_ZOOM = 2.5;
+		/** One step of the zoom controls, in screen pixels per drawing unit. */
+		const ZOOM_STEP = 1.25;
+		/**
+		* The most a fit may magnify.
+		*
+		* Filling the width on a drawing that holds one card would otherwise ask for
+		* several times the design's size: one card stretched across the whole box,
+		* larger than any reading needs and carrying no more in it, because a tier is
+		* drawn at a fixed size and zooming past 100% only magnifies. One control step
+		* is the ceiling, so the fit may lean in but never stretch.
+		*/
+		const MAX_FIT_ZOOM = ZOOM_STEP;
+		/**
+		* Which tier a zoom level calls for.
+		*
+		* Thresholds are inclusive on the low end, so 0.8 is a full card and 0.4 is a
+		* compact one: a zoom that lands exactly on a step reads as the richer of the
+		* two. A zoom that is not a usable number degrades to the cheapest tier instead
+		* of producing an infinite or negative box.
+		* @param zoom - the current scale.
+		* @param options - threshold overrides.
+		* @returns the tier to lay out at.
+		*/
+		function lodFor(zoom, options = {}) {
+			const opts = {
+				...DEFAULT_CARDGRAPH_OPTIONS,
+				...options
+			};
+			if (!Number.isFinite(zoom)) return "chip";
+			if (zoom >= opts.cardMinZoom) return "card";
+			if (zoom >= opts.compactMinZoom) return "compact";
+			return "chip";
+		}
+		/**
+		* The three tiers in the order a zoom sweep visits them, richest first.
+		*
+		* Exported so a painter can pre-build its text caches per tier without hardcoding
+		* the list in a second place.
+		*/
+		const CARDGRAPH_LODS = [
+			"card",
+			"compact",
+			"chip"
+		];
+		/** Whether two rectangles overlap. Touching edges do not count as overlapping. */
+		function intersects(a, b) {
+			return a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+		}
+		/** Whether a point is inside a rectangle. The top-left edges are inside, the bottom-right ones are not. */
+		function contains(rect, x, y) {
+			return x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height;
+		}
+		/** Grow a rectangle by `by` on every side. */
+		function grow(rect, by) {
+			return {
+				x: rect.x - by,
+				y: rect.y - by,
+				width: rect.width + by * 2,
+				height: rect.height + by * 2
+			};
+		}
+		/**
+		* The topmost item under a point.
+		*
+		* Free of the DOM on purpose: the canvas has no elements to hit, so picking is a
+		* function from a point and an ordered list to an item — and that function is
+		* testable here rather than only by clicking in a browser. The caller passes the
+		* list **topmost first**, which is what makes "a card wins over the frame holding
+		* it" a property of the order rather than of the arithmetic.
+		* @param items - candidates, topmost first.
+		* @param x - point, in drawing coordinates.
+		* @param y - point, in drawing coordinates.
+		* @returns the first hit, or `undefined`.
+		*/
+		function hitTest(items, x, y) {
+			return items.find((item) => contains(item.bounds, x, y));
+		}
+		/**
+		* The part of the drawing a viewport can see, in drawing coordinates.
+		*
+		* The inverse of the transform the painter applies, and the input to culling. A
+		* broken transform is treated as identity rather than propagated: a scale of zero
+		* or a NaN would otherwise turn the visible rect into an infinite or reversed box
+		* and either cull everything or draw everything.
+		* @param view - the transform and the size of the paint box.
+		* @param overscan - drawing units to keep on each side, so a pan does not reveal a
+		*   blank band before the next frame is painted.
+		* @returns the visible rect.
+		*/
+		function worldViewport(view, overscan = 0) {
+			const scale = Number.isFinite(view.scale) && view.scale > 0 ? view.scale : 1;
+			const width = Number.isFinite(view.width) ? Math.max(0, view.width) : 0;
+			const height = Number.isFinite(view.height) ? Math.max(0, view.height) : 0;
+			const offsetX = Number.isFinite(view.offsetX) ? view.offsetX : 0;
+			const offsetY = Number.isFinite(view.offsetY) ? view.offsetY : 0;
+			const rect = {
+				x: -offsetX / scale,
+				y: -offsetY / scale,
+				width: width / scale,
+				height: height / scale
+			};
+			return overscan === 0 ? rect : grow(rect, overscan);
+		}
+		/**
+		* Build the card graph.
+		*
+		* Frames come from the payload's sessions: column by subtree depth, vertical
+		* order by the payload's own order (the DFS pre-order the list indents by), so a
+		* session keeps its relative position across the two views. Cards are stacked
+		* inside their author's frame **by time**, because a frame is one session's own
+		* timeline; the reader who wants one timeline across all sessions has the list
+		* below. Only the reports handed in are drawn, so this is a filtered view rather
+		* than a second source of truth.
+		* @param payload - the endpoint payload, for the session frames.
+		* @param reports - the reports to plot; any order, since each frame sorts its own.
+		* @param options - geometry and tier overrides.
+		* @returns the layout; empty (and zero-sized) when there is nothing to draw.
+		*/
+		function buildCardgraph(payload, reports, options = {}) {
+			const opts = {
+				...DEFAULT_CARDGRAPH_OPTIONS,
+				...options
+			};
+			const size = opts.sizes[opts.lod];
+			const frameWidth = Math.max(opts.minFrameWidth, size.width + opts.framePaddingX * 2);
+			const sessions = payload.sessions;
+			const depths = [...new Set(sessions.map((node) => node.depth))].sort((a, b) => a - b);
+			const columnOfDepth = /* @__PURE__ */ new Map();
+			for (const [index, depth] of depths.entries()) columnOfDepth.set(depth, index);
+			const frameOf = /* @__PURE__ */ new Map();
+			const frames = sessions.map((node, index) => {
+				frameOf.set(node.id, index);
+				return {
+					...node.title === void 0 ? {} : { title: node.title },
+					id: node.id,
+					shortId: shortId(node.id),
+					depth: node.depth,
+					column: columnOfDepth.get(node.depth) ?? 0,
+					live: node.live,
+					external: false,
+					cards: 0
+				};
+			});
+			const mentions = (front) => [
+				front.from,
+				...front.to,
+				...front.cc,
+				...front.authors
+			];
+			const needsExternal = reports.some((front) => mentions(front).some((id) => id !== void 0 && !frameOf.has(id)));
+			const externalDepth = sessions.reduce((max, node) => Math.max(max, node.depth), -1) + 1;
+			if (needsExternal) frames.push({
+				shortId: "",
+				depth: externalDepth,
+				column: depths.length,
+				live: false,
+				external: true,
+				cards: 0
+			});
+			const externalIndex = needsExternal ? frames.length - 1 : -1;
+			const frameIndexById = (id) => id !== void 0 && frameOf.has(id) ? frameOf.get(id) : externalIndex;
+			const buckets = frames.map(() => []);
+			for (const front of reports) {
+				const target = frameIndexById(front.from);
+				if (target >= 0) buckets[target]?.push(front);
+			}
+			for (const bucket of buckets) bucket.sort((a, b) => a.created - b.created || (a.report < b.report ? -1 : a.report > b.report ? 1 : 0));
+			const columnX = (column) => opts.margin + column * (frameWidth + opts.columnGap);
+			const frameHeight = (count) => Math.max(opts.minFrameHeight, opts.frameHeaderHeight + opts.framePaddingTop + opts.framePaddingBottom + count * size.height + Math.max(0, count - 1) * opts.cardGap);
+			frames.forEach((frame, index) => {
+				frame.cards = buckets[index]?.length ?? 0;
+			});
+			const cursor = /* @__PURE__ */ new Map();
+			const fixed = frames.map((frame) => {
+				const height = frameHeight(frame.cards);
+				const y = cursor.get(frame.column) ?? opts.margin;
+				cursor.set(frame.column, y + height + opts.frameGap);
+				return {
+					x: columnX(frame.column),
+					y,
+					width: frameWidth,
+					height
+				};
+			});
+			const columnCount = depths.length + (needsExternal ? 1 : 0);
+			const heights = Array.from({ length: columnCount }, (_unused, column) => {
+				const stacked = fixed.filter((_box, index) => frames[index]?.column === column);
+				return stacked.length === 0 ? 0 : stacked.reduce((sum, box) => sum + box.height, 0) + (stacked.length - 1) * opts.frameGap;
+			});
+			const layoutFrames = frames.map((frame, index) => ({
+				...frame.id === void 0 ? {} : { id: frame.id },
+				...frame.title === void 0 ? {} : { title: frame.title },
+				index,
+				shortId: frame.shortId,
+				depth: frame.depth,
+				column: frame.column,
+				live: frame.live,
+				external: frame.external,
+				cards: frame.cards,
+				bounds: fixed[index]
+			}));
+			const columns = Array.from({ length: columnCount }, (_unused, column) => ({
+				depth: depths[column] ?? externalDepth,
+				index: column,
+				bounds: {
+					x: columnX(column),
+					y: opts.margin,
+					width: frameWidth,
+					height: Math.max(0, heights[column] ?? 0)
+				}
+			}));
+			const cards = [];
+			const cardIndexOf = /* @__PURE__ */ new Map();
+			layoutFrames.forEach((frame) => {
+				(buckets[frame.index] ?? []).forEach((front, slot) => {
+					cardIndexOf.set(front.report, cards.length);
+					cards.push({
+						report: front.report,
+						subject: front.subject,
+						status: front.status,
+						...front.task === void 0 ? {} : { task: front.task },
+						frame: frame.index,
+						column: frame.column,
+						slot,
+						lod: opts.lod,
+						bounds: {
+							x: frame.bounds.x + opts.framePaddingX,
+							y: frame.bounds.y + opts.frameHeaderHeight + opts.framePaddingTop + slot * (size.height + opts.cardGap),
+							width: size.width,
+							height: size.height
+						}
+					});
+				});
+			});
+			const cardEnd = (index, side) => {
+				const box = cards[index]?.bounds ?? {
+					x: 0,
+					y: 0,
+					width: 0,
+					height: 0
+				};
+				return {
+					kind: "card",
+					id: cards[index]?.report,
+					index,
+					side,
+					x: side === "right" ? box.x + box.width : side === "left" ? box.x : box.x + box.width / 2,
+					y: side === "bottom" ? box.y + box.height : side === "top" ? box.y : box.y + box.height / 2
+				};
+			};
+			const frameEnd = (index, side) => {
+				const box = fixed[index] ?? {
+					x: 0,
+					y: 0,
+					width: 0,
+					height: 0
+				};
+				return {
+					kind: "frame",
+					...frames[index]?.id === void 0 ? {} : { id: frames[index]?.id },
+					index,
+					side,
+					x: side === "right" ? box.x + box.width : box.x,
+					y: box.y + box.height / 2
+				};
+			};
+			const externalBetween = (a, b) => externalIndex >= 0 && (a === externalIndex || b === externalIndex) || false;
+			const pending = [];
+			/**
+			* The side a wire should bend through to reach another frame without crossing
+			* one.
+			*
+			* Two sessions in the **same column** — siblings, or any two frames at one
+			* depth — cannot be reached left-to-right: a straight line from the sender's
+			* card to the recipient's facing edge runs back across the recipient's own box,
+			* which reads as "this wire belongs to that frame". Such a wire bends down the
+			* gutter beside the column instead: out of the card, along the gutter, into the
+			* frame's edge on that same side. The gutter is on the right except in the last
+			* column, where that would run along the outside of the drawing.
+			*/
+			const gutterSide = (column) => column < columns.length - 1 ? "right" : "left";
+			const gutterX = (column, side) => {
+				const box = columns[column]?.bounds ?? {
+					x: 0,
+					y: 0,
+					width: 0,
+					height: 0
+				};
+				return side === "right" ? box.x + box.width + opts.columnGap / 2 : box.x - opts.columnGap / 2;
+			};
+			const frontByReport = new Map(reports.map((front) => [front.report, front]));
+			for (const [cardIndex, card] of cards.entries()) {
+				const front = frontByReport.get(card.report);
+				if (front === void 0) continue;
+				const ownFrame = card.frame;
+				const ownColumn = card.column;
+				for (const [kind, ids] of [["to", front.to], ["cc", front.cc]]) for (const id of new Set(ids)) {
+					const target = frameIndexById(id);
+					if (target < 0 || target === ownFrame) continue;
+					const targetColumn = frames[target]?.column ?? 0;
+					const sameColumn = targetColumn === ownColumn;
+					const side = sameColumn ? gutterSide(ownColumn) : targetColumn > ownColumn ? "right" : "left";
+					pending.push({
+						report: front.report,
+						kind,
+						from: cardEnd(cardIndex, side),
+						to: frameEnd(target, sameColumn ? side : side === "right" ? "left" : "right"),
+						external: externalBetween(ownFrame, target),
+						...sameColumn ? { viaX: gutterX(ownColumn, side) } : {}
+					});
+				}
+				for (const id of new Set(front.authors)) {
+					if (id === front.from) continue;
+					const source = frameIndexById(id);
+					if (source < 0 || source === ownFrame) continue;
+					const sourceColumn = frames[source]?.column ?? 0;
+					const sameColumn = sourceColumn === ownColumn;
+					const side = sameColumn ? gutterSide(ownColumn) : sourceColumn < ownColumn ? "right" : "left";
+					pending.push({
+						report: front.report,
+						kind: "author",
+						from: frameEnd(source, side),
+						to: cardEnd(cardIndex, sameColumn ? side : side === "right" ? "left" : "right"),
+						external: externalBetween(source, ownFrame),
+						...sameColumn ? { viaX: gutterX(ownColumn, side) } : {}
+					});
+				}
+				const parentIndex = front.parent === void 0 || front.parent === front.report ? void 0 : cardIndexOf.get(front.parent);
+				const parentCard = parentIndex === void 0 ? void 0 : cards[parentIndex];
+				if (parentIndex !== void 0 && parentCard !== void 0) {
+					const from = cardEnd(parentIndex, "bottom");
+					const to = cardEnd(cardIndex, "top");
+					const column = parentCard.column;
+					const target = card.column;
+					const side = target > column ? "right" : target < column ? "left" : gutterSide(column);
+					pending.push({
+						report: front.report,
+						kind: "thread",
+						from,
+						to,
+						external: externalBetween(parentCard.frame, ownFrame),
+						viaX: gutterX(column, side)
+					});
+				}
+			}
+			const groups = /* @__PURE__ */ new Map();
+			for (const edge of pending) for (const end of [edge.from, edge.to]) {
+				if (end.kind !== "frame") continue;
+				const other = end === edge.from ? edge.to : edge.from;
+				const key = `${end.index}|${end.side}`;
+				const list = groups.get(key) ?? [];
+				list.push({
+					end,
+					order: other.y,
+					tie: `${edge.report}|${edge.kind}`
+				});
+				groups.set(key, list);
+			}
+			for (const list of groups.values()) {
+				list.sort((a, b) => a.order - b.order || (a.tie < b.tie ? -1 : a.tie > b.tie ? 1 : 0));
+				const box = fixed[list[0]?.end.index ?? 0] ?? {
+					x: 0,
+					y: 0,
+					width: 0,
+					height: 0
+				};
+				const top = box.y + opts.frameHeaderHeight + opts.framePaddingTop;
+				const span = box.y + box.height - opts.framePaddingBottom - top;
+				list.forEach((entry, index) => {
+					entry.end.y = span > 0 ? top + (index + 1) * span / (list.length + 1) : box.y + box.height / 2;
+				});
+			}
+			const edges = pending.map((edge) => {
+				const xs = [
+					edge.from.x,
+					edge.to.x,
+					...edge.viaX === void 0 ? [] : [edge.viaX]
+				];
+				const ys = [edge.from.y, edge.to.y];
+				const minX = Math.min(...xs);
+				const minY = Math.min(...ys);
+				return {
+					report: edge.report,
+					kind: edge.kind,
+					from: { ...edge.from },
+					to: { ...edge.to },
+					external: edge.external,
+					...edge.viaX === void 0 ? {} : { viaX: edge.viaX },
+					bounds: {
+						x: minX,
+						y: minY,
+						width: Math.max(...xs) - minX,
+						height: Math.max(...ys) - minY
+					}
+				};
+			});
+			const contentWidth = columnCount === 0 ? 0 : opts.margin * 2 + columnCount * frameWidth + (columnCount - 1) * opts.columnGap;
+			const widest = heights.reduce((max, height) => Math.max(max, height), 0);
+			return {
+				lod: opts.lod,
+				columns,
+				frames: layoutFrames,
+				cards,
+				edges,
+				frameWidth,
+				frameHeaderHeight: opts.frameHeaderHeight,
+				cardWidth: size.width,
+				cardHeight: size.height,
+				width: columnCount === 0 ? 0 : contentWidth,
+				height: columnCount === 0 ? 0 : opts.margin * 2 + widest
+			};
+		}
+		/** How far a fitted drawing is kept from the box's left edge, in screen pixels. */
+		const FIT_LEFT_MIN = 8;
+		/** Where a fitted drawing starts, in screen pixels from the box's top. */
+		const FIT_TOP = 12;
+		/**
+		* The transform that fills a box's width with the drawing, at the richest tier
+		* that can afford it.
+		*
+		* Width is the target because time runs **down** here: a frame is a column, so
+		* the horizontal axis is what has to fit on screen and the vertical axis is what
+		* the reader pans along. Magnification stops at {@link MAX_FIT_ZOOM}, so a
+		* drawing too narrow to fill the box is left at its own size instead of
+		* stretched.
+		*
+		* The scale and the tier are mutually dependent — the tier is derived from the
+		* zoom ({@link lodFor}) and the zoom is computed from a layout — so one pass over
+		* the current layout can leave the view drawing one tier while its offset was
+		* centred for another. Probing every tier makes the result a function of the box
+		* alone: idempotent, and independent of whichever tier the reader arrived in.
+		*
+		* This lives beside the geometry rather than in the view because it *is*
+		* geometry: pure, byte-deterministic for one input, and the only part of the
+		* fitting that can be tested without a browser.
+		* @param payload - the endpoint payload, for the session frames.
+		* @param reports - the reports to plot.
+		* @param boxWidth - the paint box's width in screen pixels.
+		* @param options - geometry, tier and threshold overrides.
+		* @returns the transform, or `undefined` when there is nothing to fit into or
+		*   nothing to fit (an empty drawing, or a box with no width yet).
+		*/
+		function fitTransform(payload, reports, boxWidth, options = {}) {
+			const opts = {
+				...DEFAULT_CARDGRAPH_OPTIONS,
+				...options
+			};
+			if (!Number.isFinite(boxWidth) || boxWidth <= 0) return void 0;
+			const available = Math.max(0, boxWidth - opts.margin);
+			const bands = {
+				card: {
+					min: opts.cardMinZoom,
+					max: MAX_FIT_ZOOM
+				},
+				compact: {
+					min: opts.compactMinZoom,
+					max: opts.cardMinZoom
+				},
+				chip: {
+					min: MIN_ZOOM,
+					max: opts.compactMinZoom
+				}
+			};
+			const probes = CARDGRAPH_LODS.map((tier) => ({
+				tier,
+				drawing: buildCardgraph(payload, reports, {
+					...options,
+					lod: tier
+				})
+			})).filter((probe) => probe.drawing.width > 0);
+			if (probes.length === 0) return void 0;
+			const chosen = probes.find((probe) => available / probe.drawing.width >= bands[probe.tier].min) ?? probes[probes.length - 1];
+			const band = bands[chosen.tier];
+			let scale = Math.min(Math.max(available / chosen.drawing.width, band.min), band.max);
+			if (lodFor(scale, opts) !== chosen.tier) scale *= .999999999;
+			return {
+				lod: chosen.tier,
+				scale,
+				offsetX: Math.max(FIT_LEFT_MIN, (boxWidth - chosen.drawing.width * scale) / 2),
+				offsetY: FIT_TOP
+			};
+		}
+		//#endregion
+		//#region src/client/cardgraph-painter.ts
+		/** A guaranteed-visible theme, for a context with no tokens at all. */
+		const FALLBACK_THEME = {
+			canvas: "#ffffff",
+			frame: "#f6f7f9",
+			frameBar: "#eef0f3",
+			surface: "#ffffff",
+			border: "#d8dbe0",
+			frameBorder: "#c3c7ce",
+			text: "#1a1c1f",
+			secondary: "#4a4f57",
+			caption: "#70757d",
+			tertiary: "#9aa0a8",
+			accent: "#2f6fed",
+			warning: "#c77700",
+			success: "#1f9254",
+			error: "#d33a2c",
+			business: "#2f6fed",
+			fonts: {
+				title: {
+					size: 13,
+					weight: 500,
+					lineHeight: 18,
+					family: "system-ui, sans-serif"
+				},
+				id: {
+					size: 12,
+					weight: 600,
+					lineHeight: 16,
+					family: "system-ui, sans-serif"
+				},
+				body: {
+					size: 11,
+					weight: 400,
+					lineHeight: 15,
+					family: "system-ui, sans-serif"
+				},
+				meta: {
+					size: 11,
+					weight: 500,
+					lineHeight: 15,
+					family: "system-ui, sans-serif"
+				}
+			}
+		};
+		/** Token name → the field it fills. Keeping it as data means one reader, not twenty. */
+		const TOKENS = [
+			[
+				"canvas",
+				"--dsw-alias-bg-base",
+				FALLBACK_THEME.canvas
+			],
+			[
+				"frame",
+				"--dsw-alias-bg-layer-1",
+				FALLBACK_THEME.frame
+			],
+			[
+				"frameBar",
+				"--dsw-alias-bg-layer-2",
+				FALLBACK_THEME.frameBar
+			],
+			[
+				"surface",
+				"--dsw-alias-bg-layer-3",
+				FALLBACK_THEME.surface
+			],
+			[
+				"border",
+				"--dsw-alias-border-l1",
+				FALLBACK_THEME.border
+			],
+			[
+				"frameBorder",
+				"--dsw-alias-border-l2",
+				FALLBACK_THEME.frameBorder
+			],
+			[
+				"text",
+				"--dsw-alias-label-primary",
+				FALLBACK_THEME.text
+			],
+			[
+				"secondary",
+				"--dsw-alias-label-secondary",
+				FALLBACK_THEME.secondary
+			],
+			[
+				"caption",
+				"--dsw-alias-label-caption",
+				FALLBACK_THEME.caption
+			],
+			[
+				"tertiary",
+				"--dsw-alias-label-tertiary",
+				FALLBACK_THEME.tertiary
+			],
+			[
+				"accent",
+				"--dsw-alias-brand-primary",
+				FALLBACK_THEME.accent
+			],
+			[
+				"warning",
+				"--dsw-alias-state-warn-primary",
+				FALLBACK_THEME.warning
+			],
+			[
+				"success",
+				"--dsw-alias-state-success-primary",
+				FALLBACK_THEME.success
+			],
+			[
+				"error",
+				"--dsw-alias-state-error-primary",
+				FALLBACK_THEME.error
+			],
+			[
+				"business",
+				"--dsw-alias-state-business-primary",
+				FALLBACK_THEME.business
+			]
+		];
+		/** Font token → the field it fills. Each token carries its own size, weight and family. */
+		const FONT_TOKENS = [
+			[
+				"title",
+				"--dsw-font-xs-13",
+				FALLBACK_THEME.fonts.title
+			],
+			[
+				"id",
+				"--dsw-font-xxs-strong-12",
+				FALLBACK_THEME.fonts.id
+			],
+			[
+				"body",
+				"--dsw-font-xxxs-11",
+				FALLBACK_THEME.fonts.body
+			],
+			[
+				"meta",
+				"--dsw-font-xxxs-strong-11",
+				FALLBACK_THEME.fonts.meta
+			]
+		];
+		/** The one token a theme change always moves, so a repaint can detect it cheaply. */
+		const CANARY = "--dsw-alias-bg-base";
+		/** Assemble a canvas font string. */
+		function fontString(font) {
+			return `${font.weight} ${font.size}px ${font.family}`;
+		}
+		/** Read one font token, taking its size/weight/line-height/family parts. */
+		function readFont(read, token, fallback) {
+			const size = Number.parseFloat(read(`${token}-font-size`));
+			const weight = Number.parseFloat(read(`${token}-font-weight`));
+			const lineHeight = Number.parseFloat(read(`${token}-line-height`));
+			const family = read(`${token}-font-family`);
+			return {
+				size: Number.isFinite(size) && size > 0 ? size : fallback.size,
+				weight: Number.isFinite(weight) && weight > 0 ? weight : fallback.weight,
+				lineHeight: Number.isFinite(lineHeight) && lineHeight > 0 ? lineHeight : fallback.lineHeight,
+				family: family === "" ? fallback.family : family
+			};
+		}
+		/**
+		* Read the drawing's colours and fonts out of the live theme.
+		* @param read - a token reader, normally `getComputedStyle(root).getPropertyValue`.
+		* @returns the theme; every field falls back so a missing token cannot blank the drawing.
+		*/
+		function readTheme(read) {
+			const pick = (token, fallback) => {
+				const value = read(token).trim();
+				return value === "" ? fallback : value;
+			};
+			const colours = {};
+			for (const [field, token, fallback] of TOKENS) colours[field] = pick(token, fallback);
+			const fonts = {};
+			for (const [field, token, fallback] of FONT_TOKENS) fonts[field] = readFont(read, token, fallback);
+			return {
+				...FALLBACK_THEME,
+				...colours,
+				fonts: {
+					...FALLBACK_THEME.fonts,
+					...fonts
+				}
+			};
+		}
+		/** Whether the reader was handed a list of candidates rather than one element. */
+		const isElementList = (value) => Array.isArray(value);
+		/**
+		* Watch the theme through one token.
+		*
+		* `getComputedStyle(...).getPropertyValue` forces a style read, so doing twenty of
+		* them per repaint would be paying for the theme on every hover. The canary is the
+		* page background: if it did not move, nothing else did, and the cached theme is
+		* returned.
+		*
+		* **The palette lives on `body`, so the candidates are a chain.** DSH declares
+		* every `--dsw-alias-*` colour and every `--dsw-font-<tier>-*` part on `body` —
+		* `:root` carries only the family and the radii — and custom properties inherit
+		* downwards, so a reader pointed at `document.documentElement` reads the empty
+		* string for all of them and the whole drawing collapses onto the fallback theme
+		* (a white canvas in a dark shell). Handing over both elements, `body` first,
+		* keeps the drawing on the palette the shell actually painted it with, and still
+		* works if a host ever moves the tokens up to `:root`. The first candidate whose
+		* canary is non-empty is the source; the probe runs per read, not once, because a
+		* host may mount `body` after this reader exists.
+		* @param root - one element, or the candidates in order of preference.
+		* @param win - the window to read styles from.
+		* @returns the reader.
+		*/
+		function createThemeReader(root, win) {
+			const roots = isElementList(root) ? root : [root];
+			const sources = /* @__PURE__ */ new Map();
+			const readerOf = (element) => {
+				const known = sources.get(element);
+				if (known !== void 0) return known;
+				const style = win.getComputedStyle(element);
+				const read = (name) => style.getPropertyValue(name);
+				sources.set(element, read);
+				return read;
+			};
+			let canary;
+			let cached;
+			return { read() {
+				let current = "";
+				let source;
+				for (const element of roots) {
+					const read = readerOf(element);
+					const value = read(CANARY);
+					if (value === "") continue;
+					current = value;
+					source = read;
+					break;
+				}
+				if (cached !== void 0 && current === canary) return cached;
+				canary = current;
+				cached = readTheme(source ?? (() => ""));
+				return cached;
+			} };
+		}
+		/**
+		* Shorten text until it fits, ending it with an ellipsis.
+		* @param text - the text to fit.
+		* @param maxWidth - the room available.
+		* @param measure - width of a candidate string.
+		* @returns text that fits, or `'…'` when not even one character does.
+		*/
+		function elide(text, maxWidth, measure) {
+			if (measure(text) <= maxWidth) return text;
+			for (let take = text.length - 1; take > 0; take--) {
+				const candidate = `${text.slice(0, take).trimEnd()}…`;
+				if (measure(candidate) <= maxWidth) return candidate;
+			}
+			return "…";
+		}
+		/**
+		* Wrap text to a width, eliding whatever does not fit in the last line.
+		*
+		* Character-by-character, with one concession to Latin text: when a line has to
+		* break and there is a space far enough back, break at the space instead of mid
+		* word. Chinese has no spaces, so a word-based rule would leave a long subject on
+		* one line and elide most of it; this rule wraps it, and still avoids breaking
+		* "report-ledger" in half when it can.
+		* @param text - the text to lay out.
+		* @param maxWidth - the room available.
+		* @param measure - width of a candidate string.
+		* @param maxLines - how many lines to produce.
+		* @returns the lines, possibly empty.
+		*/
+		function foldText(text, maxWidth, measure, maxLines = 1) {
+			const clean = text.replace(/\s+/g, " ").trim();
+			if (clean === "" || maxWidth <= 0 || maxLines < 1) return [];
+			const lines = [];
+			let rest = clean;
+			while (rest !== "" && lines.length < maxLines) {
+				if (lines.length === maxLines - 1) {
+					lines.push(elide(rest, maxWidth, measure));
+					break;
+				}
+				if (measure(rest) <= maxWidth) {
+					lines.push(rest);
+					break;
+				}
+				let cut = 0;
+				for (let take = 1; take <= rest.length; take++) {
+					if (measure(rest.slice(0, take)) > maxWidth) break;
+					cut = take;
+				}
+				if (cut === 0) {
+					lines.push(elide(rest, maxWidth, measure));
+					break;
+				}
+				const space = rest.lastIndexOf(" ", cut);
+				if (space > cut / 3) cut = space;
+				lines.push(rest.slice(0, cut).trimEnd());
+				rest = rest.slice(cut).trimStart();
+			}
+			return lines;
+		}
+		/** Corner radius of a card. */
+		const CARD_RADIUS = 5;
+		/** Corner radius of a frame. */
+		const FRAME_RADIUS = 7;
+		/** Inset from a card's edge to its text. */
+		const CARD_PADDING = 9;
+		/** Width of the status stripe down a card's left edge. */
+		const STRIPE = 3;
+		/** Arrowhead length and half-width. */
+		const ARROW_LENGTH = 7;
+		const ARROW_HALF = 3.5;
+		/**
+		* How far the scrim pushes everything but the focused path back.
+		*
+		* **Measured, then corrected.** The first version reused the swimlane's dim value
+		* (0.18 left showing) and a screenshot of the real tab showed why that was wrong
+		* there and wrong here: at 0.18 the frames, their titles and every other card
+		* become unreadable, so tracing one path costs the reader the context the drawing
+		* exists to provide. The swimlane had already learned the same thing from the other
+		* side — *the relations recede, the participants stay* — and a canvas scrim is
+		* blunter than a per-shape dim, so it has to be gentler: 0.45 showing keeps every
+		* frame and card legible while the focused path, drawn back on top at full
+		* strength, still reads as the thing being pointed at.
+		*/
+		const SCRIM_ALPHA = .55;
+		/** Subject lines a full card has room for. */
+		const SUBJECT_LINES = 2;
+		/** The colour a status is drawn in, matching the tab's tones. */
+		function statusColour(status, theme) {
+			if (status === "open") return theme.warning;
+			if (status === "acked") return theme.success;
+			return theme.tertiary;
+		}
+		/**
+		* How each kind of wire is drawn: the token its colour comes from, its dash
+		* pattern, and its weight.
+		*
+		* Exported because the wires are canvas and the legend is DOM — the only way the
+		* two cannot drift is for the legend to read this table instead of restating it in
+		* CSS. The colour is a **token name**, not a value, so it resolves through the
+		* theme like everything else.
+		*/
+		const WIRE_TOKENS = {
+			to: {
+				colour: "--dsw-alias-label-secondary",
+				dash: [],
+				width: 1.4
+			},
+			cc: {
+				colour: "--dsw-alias-label-caption",
+				dash: [2, 3],
+				width: 1
+			},
+			author: {
+				colour: "--dsw-alias-label-caption",
+				dash: [1, 3],
+				width: 1
+			},
+			thread: {
+				colour: "--dsw-alias-state-business-primary",
+				dash: [],
+				width: 1.4
+			}
+		};
+		/** Reverse lookup: which theme field a token fills. */
+		const FIELD_OF_TOKEN = new Map(TOKENS.map(([field, token]) => [token, field]));
+		/** How one kind of wire is drawn, resolved against a theme. */
+		function wireStyle(kind, theme) {
+			const spec = WIRE_TOKENS[kind];
+			const field = FIELD_OF_TOKEN.get(spec.colour);
+			return {
+				stroke: field === void 0 ? theme.secondary : theme[field],
+				dash: spec.dash,
+				width: spec.width
+			};
+		}
+		/**
+		* The polyline a wire is drawn as.
+		*
+		* A wire with a gutter bends through it in three segments — out, along, in — which
+		* is what keeps a same-column wire from crossing the frame it lands on and a
+		* thread from crossing the cards between its ends.
+		* @param edge - the wire.
+		* @returns between two and four points, first to last.
+		*/
+		function wirePoints(edge) {
+			const from = {
+				x: edge.from.x,
+				y: edge.from.y
+			};
+			const to = {
+				x: edge.to.x,
+				y: edge.to.y
+			};
+			if (edge.viaX === void 0) return [from, to];
+			return [
+				from,
+				{
+					x: edge.viaX,
+					y: from.y
+				},
+				{
+					x: edge.viaX,
+					y: to.y
+				},
+				to
+			];
+		}
+		/** Trace a rounded rectangle into the current path. */
+		function pathRoundRect(ctx, rect, radius) {
+			const r = Math.max(0, Math.min(radius, rect.width / 2, rect.height / 2));
+			ctx.beginPath();
+			ctx.moveTo(rect.x + r, rect.y);
+			ctx.lineTo(rect.x + rect.width - r, rect.y);
+			ctx.arcTo(rect.x + rect.width, rect.y, rect.x + rect.width, rect.y + r, r);
+			ctx.lineTo(rect.x + rect.width, rect.y + rect.height - r);
+			ctx.arcTo(rect.x + rect.width, rect.y + rect.height, rect.x + rect.width - r, rect.y + rect.height, r);
+			ctx.lineTo(rect.x + r, rect.y + rect.height);
+			ctx.arcTo(rect.x, rect.y + rect.height, rect.x, rect.y + rect.height - r, r);
+			ctx.lineTo(rect.x, rect.y + r);
+			ctx.arcTo(rect.x, rect.y, rect.x + r, rect.y, r);
+			ctx.closePath();
+		}
+		/**
+		* Build a painter that draws into a canvas.
+		*
+		* One transform carries pan and zoom; everything after that is drawn in the
+		* layout's own coordinates. Coordinates are deliberately **not** snapped to
+		* pixels: draw.io rounds after its transform because its canvas is 1:1 screen
+		* space, while ours is scaled, so snapping would have to happen per point in
+		* screen space. Antialiasing is the honest default until a measurement says the
+		* blur costs readability.
+		* @param canvas - the canvas to draw into.
+		* @returns the painter.
+		*/
+		function createCanvasPainter(canvas) {
+			const ctx = canvas.getContext("2d");
+			if (ctx === null) throw new Error("card canvas: no 2d context");
+			let width = 0;
+			let height = 0;
+			let dpr = 1;
+			/** Measured text widths, keyed by font and text: measuring is a layout call. */
+			const widths = /* @__PURE__ */ new Map();
+			const measure = (text) => {
+				const key = `${ctx.font}\u0000${text}`;
+				const hit = widths.get(key);
+				if (hit !== void 0) return hit;
+				const value = ctx.measureText(text).width;
+				widths.set(key, value);
+				return value;
+			};
+			const line = (x1, y1, x2, y2, colour, dash, alpha) => {
+				ctx.globalAlpha = alpha;
+				ctx.strokeStyle = colour;
+				ctx.setLineDash(dash);
+				ctx.beginPath();
+				ctx.moveTo(x1, y1);
+				ctx.lineTo(x2, y2);
+				ctx.stroke();
+			};
+			/** The frame's outline alone, for the interaction layer: the box is already drawn. */
+			const drawFrameOutline = (frame, scene) => {
+				ctx.globalAlpha = 1;
+				pathRoundRect(ctx, frame.bounds, FRAME_RADIUS);
+				ctx.strokeStyle = scene.theme.accent;
+				ctx.lineWidth = 1.6;
+				ctx.stroke();
+			};
+			const drawFrame = (frame, scene) => {
+				const { theme } = scene;
+				ctx.globalAlpha = 1;
+				pathRoundRect(ctx, frame.bounds, FRAME_RADIUS);
+				ctx.fillStyle = theme.frame;
+				ctx.fill();
+				ctx.strokeStyle = theme.frameBorder;
+				ctx.lineWidth = 1;
+				ctx.stroke();
+				const bar = {
+					x: frame.bounds.x,
+					y: frame.bounds.y,
+					width: frame.bounds.width,
+					height: scene.layout.frameHeaderHeight
+				};
+				ctx.save();
+				pathRoundRect(ctx, frame.bounds, FRAME_RADIUS);
+				ctx.clip();
+				ctx.globalAlpha = 1;
+				ctx.fillStyle = theme.frameBar;
+				ctx.fillRect(bar.x, bar.y, bar.width, bar.height);
+				ctx.restore();
+				line(bar.x, bar.y + bar.height, bar.x + bar.width, bar.y + bar.height, theme.frameBorder, [], 1);
+				ctx.font = fontString(theme.fonts.title);
+				ctx.textAlign = "left";
+				ctx.textBaseline = "middle";
+				ctx.fillStyle = theme.secondary;
+				const label = frame.external ? scene.labels.external : frame.title ?? frame.shortId;
+				ctx.fillText(elide(label, frame.bounds.width - 24 - 10, measure), bar.x + 10, bar.y + bar.height / 2 + .5);
+				const cx = bar.x + bar.width - 13;
+				const cy = bar.y + bar.height / 2;
+				ctx.beginPath();
+				ctx.arc(cx, cy, 3.5, 0, Math.PI * 2);
+				if (frame.live) {
+					ctx.fillStyle = theme.success;
+					ctx.fill();
+				} else {
+					ctx.strokeStyle = theme.tertiary;
+					ctx.lineWidth = 1;
+					ctx.stroke();
+				}
+				if (frame.cards === 0) {
+					ctx.font = fontString(theme.fonts.body);
+					ctx.fillStyle = theme.tertiary;
+					ctx.fillText(scene.labels.empty, frame.bounds.x + CARD_PADDING, bar.y + bar.height + 18);
+				}
+			};
+			const drawWire = (edge, scene, alpha) => {
+				const { theme } = scene;
+				const style = wireStyle(edge.kind, theme);
+				const points = wirePoints(edge);
+				ctx.globalAlpha = alpha;
+				ctx.strokeStyle = style.stroke;
+				ctx.lineWidth = style.width;
+				ctx.setLineDash(style.dash);
+				ctx.beginPath();
+				points.forEach((point, index) => {
+					if (index === 0) ctx.moveTo(point.x, point.y);
+					else ctx.lineTo(point.x, point.y);
+				});
+				ctx.stroke();
+				const last = points[points.length - 2];
+				const end = points[points.length - 1];
+				if (last === void 0 || end === void 0) return;
+				const angle = Math.atan2(end.y - last.y, end.x - last.x);
+				const back = {
+					x: end.x - Math.cos(angle) * ARROW_LENGTH,
+					y: end.y - Math.sin(angle) * ARROW_LENGTH
+				};
+				const side = {
+					x: -Math.sin(angle) * ARROW_HALF,
+					y: Math.cos(angle) * ARROW_HALF
+				};
+				ctx.setLineDash([]);
+				ctx.fillStyle = style.stroke;
+				ctx.beginPath();
+				ctx.moveTo(end.x, end.y);
+				ctx.lineTo(back.x + side.x, back.y + side.y);
+				ctx.lineTo(back.x - side.x, back.y - side.y);
+				ctx.closePath();
+				ctx.fill();
+			};
+			const drawCard = (card, scene, accent) => {
+				const { theme } = scene;
+				const box = card.bounds;
+				ctx.globalAlpha = 1;
+				pathRoundRect(ctx, box, CARD_RADIUS);
+				ctx.fillStyle = card.lod === "chip" ? statusColour(card.status, theme) : theme.surface;
+				ctx.fill();
+				if (card.lod === "chip") return;
+				ctx.strokeStyle = accent ? theme.accent : theme.border;
+				ctx.lineWidth = accent ? 1.6 : 1;
+				ctx.stroke();
+				ctx.save();
+				pathRoundRect(ctx, box, CARD_RADIUS);
+				ctx.clip();
+				ctx.fillStyle = statusColour(card.status, theme);
+				ctx.fillRect(box.x, box.y, STRIPE, box.height);
+				ctx.restore();
+				const textLeft = box.x + CARD_PADDING + STRIPE;
+				const textWidth = box.width - CARD_PADDING * 2 - STRIPE;
+				ctx.textAlign = "left";
+				ctx.textBaseline = "top";
+				ctx.font = fontString(theme.fonts.id);
+				ctx.fillStyle = accent ? theme.accent : theme.secondary;
+				if (card.lod === "compact") {
+					const id = card.report;
+					const idWidth = measure(id);
+					ctx.fillText(id, textLeft, box.y + box.height / 2 - theme.fonts.id.size / 2 - 1);
+					ctx.font = fontString(theme.fonts.body);
+					ctx.fillStyle = theme.caption;
+					const rest = foldText(`· ${card.subject}`, textWidth - idWidth - 4, measure, 1)[0] ?? "";
+					ctx.fillText(rest, textLeft + idWidth + 4, box.y + box.height / 2 - theme.fonts.body.size / 2 - 1);
+					return;
+				}
+				ctx.fillText(card.report, textLeft, box.y + 8);
+				ctx.font = fontString(theme.fonts.body);
+				ctx.fillStyle = theme.text;
+				foldText(card.subject, textWidth, measure, SUBJECT_LINES).forEach((text, index) => {
+					ctx.fillText(text, textLeft, box.y + 28 + index * theme.fonts.body.lineHeight);
+				});
+				ctx.font = fontString(theme.fonts.meta);
+				const baseline = box.y + box.height - theme.fonts.meta.lineHeight - 6;
+				ctx.fillStyle = statusColour(card.status, theme);
+				const status = scene.labels.status[card.status] ?? card.status;
+				ctx.fillText(status, textLeft, baseline);
+				if (card.task !== void 0) {
+					const chipLeft = textLeft + measure(status) + 8;
+					const chipText = foldText(card.task, box.x + box.width - CARD_PADDING - chipLeft - 10, measure, 1)[0] ?? "";
+					if (chipText !== "") {
+						ctx.fillStyle = theme.frameBar;
+						const chipWidth = measure(chipText) + 10;
+						ctx.fillRect(chipLeft, baseline - 2, chipWidth, theme.fonts.meta.lineHeight + 2);
+						ctx.fillStyle = theme.caption;
+						ctx.fillText(chipText, chipLeft + 5, baseline);
+					}
+				}
+			};
+			return {
+				resize(w, h, ratio) {
+					width = Math.max(0, w);
+					height = Math.max(0, h);
+					dpr = Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+					canvas.width = Math.max(1, Math.round(width * dpr));
+					canvas.height = Math.max(1, Math.round(height * dpr));
+					canvas.style.width = `${width}px`;
+					canvas.style.height = `${height}px`;
+				},
+				reset() {
+					widths.clear();
+				},
+				paint(scene) {
+					const { layout, theme, viewport } = scene;
+					ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+					ctx.globalAlpha = 1;
+					ctx.setLineDash([]);
+					ctx.clearRect(0, 0, width, height);
+					ctx.fillStyle = theme.canvas;
+					ctx.fillRect(0, 0, width, height);
+					const world = worldViewport(viewport, scene.overscan ?? 0);
+					const visible = (rect) => intersects(rect, world);
+					ctx.save();
+					ctx.translate(viewport.offsetX, viewport.offsetY);
+					ctx.scale(viewport.scale, viewport.scale);
+					for (const frame of layout.frames) if (visible(frame.bounds)) drawFrame(frame, scene);
+					for (const edge of layout.edges) if (visible(edge.bounds)) drawWire(edge, scene, 1);
+					for (const card of layout.cards) {
+						if (!visible(card.bounds)) continue;
+						drawCard(card, scene, card.report === scene.focus?.selected);
+					}
+					ctx.globalAlpha = 1;
+					ctx.restore();
+				},
+				paintPath(scene) {
+					const { layout, theme, viewport } = scene;
+					const report = scene.focus?.report ?? scene.focus?.selected;
+					const frameIndex = scene.focus?.frame;
+					ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+					ctx.globalAlpha = 1;
+					ctx.setLineDash([]);
+					ctx.clearRect(0, 0, width, height);
+					if (report === void 0 && frameIndex === void 0) return;
+					ctx.save();
+					ctx.translate(viewport.offsetX, viewport.offsetY);
+					ctx.scale(viewport.scale, viewport.scale);
+					if (report === void 0) {
+						const frame = layout.frames[frameIndex];
+						if (frame !== void 0) drawFrameOutline(frame, scene);
+						ctx.restore();
+						return;
+					}
+					const world = worldViewport(viewport, 0);
+					ctx.globalAlpha = SCRIM_ALPHA;
+					ctx.fillStyle = theme.canvas;
+					ctx.fillRect(world.x, world.y, world.width, world.height);
+					ctx.globalAlpha = 1;
+					const edges = layout.edges.filter((edge) => edge.report === report);
+					const touched = /* @__PURE__ */ new Set();
+					for (const edge of edges) {
+						if (edge.from.kind === "frame") touched.add(edge.from.index);
+						if (edge.to.kind === "frame") touched.add(edge.to.index);
+					}
+					for (const frame of layout.frames) if (touched.has(frame.index)) drawFrameOutline(frame, scene);
+					for (const edge of edges) if (intersects(edge.bounds, world)) drawWire(edge, scene, 1);
+					for (const card of layout.cards) if (card.report === report) drawCard(card, scene, true);
+					ctx.restore();
+				}
+			};
+		}
+		//#endregion
+		//#region src/client/CardgraphView.tsx
+		/**
+		* The card canvas's view: two canvases, a pan/zoom transform, picking, and an
+		* invisible button layer.
+		*
+		* The drawing is split across two surfaces, and that split is the whole
+		* performance story:
+		*
+		*  - the **base** canvas holds frames, wires and cards, and is repainted only when
+		*    the drawing itself changes (layout, transform, size, theme);
+		*  - the **interaction** canvas holds one report's path over a scrim, and is
+		*    repainted on every hover. Its cost does not grow with the ledger, because it
+		*    never touches the shapes underneath.
+		*
+		* Picking is arithmetic rather than elements: the canvas has nothing to hit, so
+		* `hitTest` from the model is given the cards (topmost first) and then the frames.
+		* What the canvas also cannot offer is accessibility — so every card that is on
+		* screen gets a real, transparent `<button>` on top of it, which is what a keyboard
+		* or a screen reader reaches, and the list below stays the full accessible path.
+		*
+		* @module dsh-report-ledger/client/CardgraphView
+		*/
+		/**
+		* Wheel-zoom exponent per pixel of delta, so that one 100px notch — a mouse
+		* wheel's usual magnitude — is exactly the {@link ZOOM_STEP} the buttons take.
+		* A trackpad pinch arrives as the same event with much smaller deltas, which is
+		* why the zoom is exponential in the delta rather than one step per event.
+		*/
+		const WHEEL_ZOOM_RATE = Math.log(ZOOM_STEP) / 100;
+		/** How close to the box's edge a wheel-pan stops, in screen pixels. */
+		const EDGE_MARGIN = 12;
+		/** Drawing units to keep beyond the viewport, so a pan does not reveal a blank band. */
+		const OVERSCAN = 160;
+		/** How tall the canvas box is, inside the tab. */
+		const VIEW_HEIGHT = 420;
+		/** How far the pointer may travel before a press becomes a drag instead of a click. */
+		const DRAG_SLOP = 4;
+		/** The four kinds, in the order the legend lists them. */
+		const KINDS = [
+			"to",
+			"cc",
+			"author",
+			"thread"
+		];
+		/**
+		* Whether the pointer is on the same thing.
+		*
+		* A pointermove over one card is not a new hover: without this the state object is
+		* replaced on every move, which re-renders the drawing and repaints the overlay for
+		* no change at all.
+		*/
+		const sameHover = (a, b) => a.report === b.report && a.frame === b.frame;
+		/**
+		* The legend.
+		*
+		* Built from the painter's own wire table (`WIRE_TOKENS`) rather than from CSS, so
+		* a legend that disagreed with the lines beside it would take a change to that one
+		* table — the drift the swimlane's legend avoided a different way (by sharing a
+		* class name with its paths).
+		* @param props - the translator.
+		* @returns the legend row.
+		*/
+		function CardgraphLegend({ t }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: "12px",
+					flexWrap: "wrap"
+				},
+				children: KINDS.map((kind) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						gap: "6px",
+						fontSize: "var(--dsw-font-xxxs-11, 11px)",
+						color: "var(--dsw-alias-label-caption)"
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						width: "26",
+						height: "8",
+						"aria-hidden": "true",
+						focusable: "false",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: "0",
+							y1: "4",
+							x2: "26",
+							y2: "4",
+							stroke: `var(${WIRE_TOKENS[kind].colour})`,
+							strokeWidth: WIRE_TOKENS[kind].width,
+							...WIRE_TOKENS[kind].dash.length === 0 ? {} : { strokeDasharray: WIRE_TOKENS[kind].dash.join(" ") }
+						})
+					}), t(EDGE_LABEL[kind])]
+				}, kind))
+			});
+		}
+		/** Keep a number inside a range. */
+		const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+		/**
+		* The drawing.
+		* @param props - payload, the reports to plot, translations, and the open handler.
+		* @returns the canvas box with its controls.
+		*/
+		function CardgraphView({ payload, reports, t, openReport, onOpen, idHint, fill = false }) {
+			const boxRef = (0, react.useRef)(null);
+			const baseRef = (0, react.useRef)(null);
+			const pathRef = (0, react.useRef)(null);
+			const painter = (0, react.useRef)(null);
+			const pathPainter = (0, react.useRef)(null);
+			const reader = (0, react.useRef)(null);
+			const drag = (0, react.useRef)(null);
+			const [size, setSize] = (0, react.useState)({
+				width: 0,
+				height: VIEW_HEIGHT
+			});
+			const [zoom, setZoom] = (0, react.useState)(1);
+			const [offset, setOffset] = (0, react.useState)({
+				x: 0,
+				y: 0
+			});
+			const [hover, setHover] = (0, react.useState)({});
+			const [ready, setReady] = (0, react.useState)(false);
+			/** Bumped when the palette changed, so the theme is read again. */
+			const [themeTick, setThemeTick] = (0, react.useState)(0);
+			/** Bumped when font metrics may have arrived, so the measured text is dropped. */
+			const [fontTick, setFontTick] = (0, react.useState)(0);
+			/** Bumped when the device pixel ratio may have changed. */
+			const [dprTick, setDprTick] = (0, react.useState)(0);
+			const fitted = (0, react.useRef)(false);
+			/**
+			* Whether the transform on screen is still the fit's own.
+			*
+			* While this holds, the fit follows the box; the moment the reader zooms or pans
+			* the view themselves it stops following, because from then on the transform is
+			* a decision rather than a consequence — see the resize effect below.
+			*/
+			const fittedTransform = (0, react.useRef)(true);
+			/** The last box the resize effect saw, so a re-measure is not a resize. */
+			const measured = (0, react.useRef)({
+				width: 0,
+				height: 0
+			});
+			/** The transform as of this render, for the one listener that is attached once. */
+			const zoomRef = (0, react.useRef)(zoom);
+			const offsetRef = (0, react.useRef)(offset);
+			zoomRef.current = zoom;
+			offsetRef.current = offset;
+			const lod = lodFor(zoom);
+			const layout = (0, react.useMemo)(() => buildCardgraph(payload, reports, { lod }), [
+				payload,
+				reports,
+				lod
+			]);
+			/** The drawing as of this render, for that same listener: it needs its extent. */
+			const layoutRef = (0, react.useRef)(layout);
+			layoutRef.current = layout;
+			const labels = (0, react.useMemo)(() => {
+				const status = {};
+				for (const [state, key] of Object.entries(STATUS_LABEL)) status[state] = t(key);
+				return {
+					external: t("cardgraph.external"),
+					empty: t("cardgraph.empty"),
+					status
+				};
+			}, [t]);
+			(0, react.useEffect)(() => {
+				const base = baseRef.current;
+				const path = pathRef.current;
+				if (base === null || path === null) return;
+				painter.current = createCanvasPainter(base);
+				pathPainter.current = createCanvasPainter(path);
+				const doc = globalThis.document;
+				reader.current = createThemeReader([doc.body, doc.documentElement], globalThis.window);
+				const palette = new MutationObserver(() => {
+					setThemeTick((tick) => tick + 1);
+				});
+				palette.observe(doc.body, {
+					attributes: true,
+					attributeFilter: ["data-ds-dark-theme"]
+				});
+				doc.fonts.ready.then(() => {
+					painter.current?.reset();
+					pathPainter.current?.reset();
+					setFontTick((tick) => tick + 1);
+				});
+				setReady(true);
+				return () => {
+					palette.disconnect();
+					painter.current = null;
+					pathPainter.current = null;
+					reader.current = null;
+					setReady(false);
+				};
+			}, []);
+			(0, react.useEffect)(() => {
+				const box = boxRef.current;
+				if (box === null) return;
+				const measure = () => {
+					setSize({
+						width: box.clientWidth,
+						height: box.clientHeight
+					});
+				};
+				measure();
+				const observer = new ResizeObserver(measure);
+				observer.observe(box);
+				return () => {
+					observer.disconnect();
+				};
+			}, []);
+			(0, react.useEffect)(() => {
+				const win = globalThis.window;
+				const bump = () => {
+					setDprTick((tick) => tick + 1);
+				};
+				win.addEventListener("resize", bump);
+				return () => {
+					win.removeEventListener("resize", bump);
+				};
+			}, []);
+			const viewport = (0, react.useMemo)(() => ({
+				offsetX: offset.x,
+				offsetY: offset.y,
+				scale: zoom,
+				width: size.width,
+				height: size.height
+			}), [
+				offset,
+				zoom,
+				size
+			]);
+			/**
+			* The theme the drawing is painted in.
+			*
+			* Read through the reader (which caches until the canary token moves) and keyed by
+			* `ready` so the first real read happens once the reader exists, and by
+			* `themeTick` so a palette switch repaints without waiting for the next poll.
+			*/
+			const theme = (0, react.useMemo)(() => ready ? reader.current?.read() ?? FALLBACK_THEME : FALLBACK_THEME, [ready, themeTick]);
+			/**
+			* The base layer's scene.
+			*
+			* Carries the open report — the selected card is accented there — but deliberately
+			* **not** the hover: the bottom layer is repainted only when the drawing itself
+			* changes, and a pointer moving over the canvas is not a change to the drawing.
+			* The hover travels in {@link overlayScene}, which is what the second canvas is for.
+			*/
+			const baseScene = (0, react.useMemo)(() => ({
+				layout,
+				theme,
+				viewport,
+				labels,
+				overscan: OVERSCAN,
+				focus: openReport === void 0 ? {} : { selected: openReport }
+			}), [
+				layout,
+				theme,
+				viewport,
+				labels,
+				openReport
+			]);
+			/** The overlay's scene: the base scene plus what the pointer and the panel point at. */
+			const overlayScene = (0, react.useMemo)(() => ({
+				...baseScene,
+				focus: {
+					...openReport === void 0 ? {} : { selected: openReport },
+					...hover.report === void 0 ? {} : { report: hover.report },
+					...hover.frame === void 0 ? {} : { frame: hover.frame }
+				}
+			}), [
+				baseScene,
+				openReport,
+				hover
+			]);
+			(0, react.useEffect)(() => {
+				if (!ready) return;
+				const ratio = globalThis.devicePixelRatio || 1;
+				painter.current?.resize(size.width, size.height, ratio);
+				pathPainter.current?.resize(size.width, size.height, ratio);
+			}, [
+				ready,
+				size,
+				dprTick
+			]);
+			(0, react.useEffect)(() => {
+				const target = painter.current;
+				if (!ready || target === null) return;
+				target.paint(baseScene);
+			}, [
+				ready,
+				baseScene,
+				fontTick
+			]);
+			(0, react.useEffect)(() => {
+				const target = pathPainter.current;
+				if (!ready || target === null) return;
+				target.paintPath(overlayScene);
+			}, [
+				ready,
+				overlayScene,
+				fontTick
+			]);
+			/** Everything under the pointer, topmost first: cards, then the frames holding them. */
+			const targets = (0, react.useMemo)(() => [...[...layout.cards].reverse().map((card) => ({
+				kind: "card",
+				report: card.report,
+				bounds: card.bounds
+			})), ...[...layout.frames].reverse().map((frame) => ({
+				kind: "frame",
+				frame: frame.index,
+				bounds: frame.bounds
+			}))], [layout]);
+			const pick = (0, react.useCallback)((clientX, clientY) => {
+				const box = boxRef.current;
+				if (box === null) return void 0;
+				const rect = box.getBoundingClientRect();
+				const x = (clientX - rect.left - offset.x) / zoom;
+				const y = (clientY - rect.top - offset.y) / zoom;
+				return hitTest(targets, x, y);
+			}, [
+				targets,
+				offset,
+				zoom
+			]);
+			/**
+			* Fill the width, in the richest tier that can afford to.
+			*
+			* The geometry itself lives in the model ({@link fitTransform}): the scale and
+			* the tier are mutually dependent, so the probing belongs where it is pure,
+			* byte-deterministic, and reachable by the assertions. What stays here is the
+			* one thing that needs the DOM — which width to fit into — and the state write.
+			*/
+			const fit = (0, react.useCallback)(() => {
+				const box = boxRef.current;
+				if (box === null) return;
+				const next = fitTransform(payload, reports, box.clientWidth);
+				if (next === void 0) return;
+				fittedTransform.current = true;
+				setZoom(next.scale);
+				setOffset({
+					x: next.offsetX,
+					y: next.offsetY
+				});
+			}, [payload, reports]);
+			/**
+			* The `+`/`−` controls.
+			*
+			* An explicit zoom is the reader's decision, so the fit stops following the box
+			* from here — the same reason the wheel and the drag clear the flag.
+			* @param factor - what to multiply the current zoom by.
+			*/
+			const stepZoom = (0, react.useCallback)((factor) => {
+				fittedTransform.current = false;
+				setZoom((z) => clamp(z * factor, MIN_ZOOM, MAX_ZOOM));
+			}, []);
+			/**
+			* The first view is the fit — the same rule the control runs.
+			*
+			* It used to be a rule of its own (fit the width, never below the card tier,
+			* never above 100%) because the fit of the day — the whole drawing inside the
+			* box — landed around 57%, the compact tier, and opened the tab as a wall of
+			* one-line cards. With the fit now filling the width in the richest tier that
+			* can afford it, that special case has nothing left to correct, and one rule is
+			* one fewer way for the first sight and the control to disagree.
+			*/
+			(0, react.useEffect)(() => {
+				if (fitted.current || size.width === 0 || layout.cards.length === 0) return;
+				fitted.current = true;
+				fit();
+			}, [
+				fit,
+				layout,
+				size
+			]);
+			/**
+			* Follow the box, but only while the box is what chose the view.
+			*
+			* A dock, a split and a fullscreen switch all change the box under a transform
+			* computed for the old one. A drawing left carrying the old offset is clipped by
+			* the new box — it reads as a broken drawing rather than as a preserved view —
+			* so a view the fit chose is fitted again. A reader who zoomed in to read one
+			* card means it, so a view they took over is left exactly where they put it.
+			*
+			* The box is compared by value, not by identity: the observer hands over a fresh
+			* object on every measure, and a re-measure of the same box is not a resize.
+			*/
+			(0, react.useEffect)(() => {
+				const previous = measured.current;
+				measured.current = size;
+				if (size.width === 0 || previous.width === 0) return;
+				if (previous.width === size.width && previous.height === size.height) return;
+				if (fittedTransform.current) fit();
+			}, [fit, size]);
+			(0, react.useEffect)(() => {
+				const box = boxRef.current;
+				if (box === null) return;
+				const onWheel = (event) => {
+					event.preventDefault();
+					fittedTransform.current = false;
+					const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? box.clientHeight : 1;
+					const dy = event.deltaY * unit;
+					const dx = event.deltaX * unit;
+					const previous = offsetRef.current;
+					if (event.ctrlKey || event.metaKey) {
+						const rect = box.getBoundingClientRect();
+						const px = event.clientX - rect.left;
+						const py = event.clientY - rect.top;
+						const current = zoomRef.current;
+						const next = clamp(current * Math.exp(-dy * WHEEL_ZOOM_RATE), MIN_ZOOM, MAX_ZOOM);
+						const ratio = next / current;
+						setOffset({
+							x: px - (px - previous.x) * ratio,
+							y: py - (py - previous.y) * ratio
+						});
+						setZoom(next);
+						return;
+					}
+					const drawing = layoutRef.current;
+					const zoom = zoomRef.current;
+					const width = drawing.width * zoom;
+					const height = drawing.height * zoom;
+					const overflowX = width - box.clientWidth;
+					const overflowY = height - box.clientHeight;
+					const panX = event.shiftKey && dx === 0 ? dy : dx;
+					const panY = event.shiftKey ? 0 : dy;
+					setOffset({
+						x: overflowX > 0 ? clamp(previous.x - panX, box.clientWidth - width - EDGE_MARGIN, EDGE_MARGIN) : previous.x,
+						y: overflowY > 0 ? clamp(previous.y - panY, box.clientHeight - height - EDGE_MARGIN, EDGE_MARGIN) : previous.y
+					});
+				};
+				box.addEventListener("wheel", onWheel, { passive: false });
+				return () => {
+					box.removeEventListener("wheel", onWheel);
+				};
+			}, []);
+			/**
+			* Drag to pan, click to open. Distinguishing them by distance travelled.
+			*
+			* The pointer is captured on press, so a drag keeps following it outside the box
+			* instead of being abandoned at the edge (a mouse has no implicit capture; touch
+			* does). Only the primary pointer is followed, so a second finger cannot reset the
+			* drag's origin halfway through a pan.
+			*/
+			const onPointerDown = (0, react.useCallback)((event) => {
+				if (event.button !== 0 || !event.isPrimary) return;
+				event.currentTarget.setPointerCapture(event.pointerId);
+				drag.current = {
+					x: event.clientX,
+					y: event.clientY,
+					offsetX: offset.x,
+					offsetY: offset.y,
+					moved: false,
+					pointerId: event.pointerId
+				};
+			}, [offset]);
+			const onPointerMove = (0, react.useCallback)((event) => {
+				if (!event.isPrimary) return;
+				const pressing = drag.current;
+				if (pressing !== null) {
+					const dx = event.clientX - pressing.x;
+					const dy = event.clientY - pressing.y;
+					if (dx * dx + dy * dy > DRAG_SLOP * DRAG_SLOP) pressing.moved = true;
+					if (pressing.moved) {
+						fittedTransform.current = false;
+						setOffset({
+							x: pressing.offsetX + dx,
+							y: pressing.offsetY + dy
+						});
+						return;
+					}
+				}
+				const hit = pick(event.clientX, event.clientY);
+				const next = hit?.kind === "card" && hit.report !== void 0 ? { report: hit.report } : hit?.kind === "frame" && hit.frame !== void 0 ? { frame: hit.frame } : {};
+				setHover((current) => sameHover(current, next) ? current : next);
+			}, [pick]);
+			const onPointerUp = (0, react.useCallback)((event) => {
+				if (!event.isPrimary) return;
+				const pressing = drag.current;
+				drag.current = null;
+				if (pressing === null || pressing.moved) return;
+				const target = event.target;
+				if (target instanceof Element && target.closest("button") !== null) return;
+				const hit = pick(event.clientX, event.clientY);
+				if (hit?.kind === "card" && hit.report !== void 0) onOpen(hit.report);
+			}, [pick, onOpen]);
+			const onPointerLeave = (0, react.useCallback)((event) => {
+				const pressing = drag.current;
+				if (pressing !== null && event.currentTarget.hasPointerCapture(pressing.pointerId)) return;
+				drag.current = null;
+				setHover((current) => sameHover(current, {}) ? current : {});
+			}, []);
+			/** A cancelled pointer will never deliver a release, so the drag ends here. */
+			const onPointerCancel = (0, react.useCallback)((event) => {
+				if (!event.isPrimary) return;
+				drag.current = null;
+			}, []);
+			const visibleCards = (0, react.useMemo)(() => {
+				const left = -offset.x / zoom;
+				const top = -offset.y / zoom;
+				const right = (size.width - offset.x) / zoom;
+				const bottom = (size.height - offset.y) / zoom;
+				return layout.cards.filter((card) => card.bounds.x < right && left < card.bounds.x + card.bounds.width && card.bounds.y < bottom && top < card.bounds.y + card.bounds.height);
+			}, [
+				layout,
+				offset,
+				zoom,
+				size
+			]);
+			const percent = Math.round(zoom * 100);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: "6px",
+					...fill ? fillRoot : {}
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: controls,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "sm",
+							"aria-label": t("cardgraph.zoomOut"),
+							onClick: () => {
+								stepZoom(1 / ZOOM_STEP);
+							},
+							children: "−"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: percentStyle,
+							children: t("cardgraph.zoom", { percent })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "sm",
+							"aria-label": t("cardgraph.zoomIn"),
+							onClick: () => {
+								stepZoom(ZOOM_STEP);
+							},
+							children: "+"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: fit,
+							children: t("cardgraph.fit")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardgraphLegend, { t }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: percentStyle,
+							children: t("cardgraph.summary", {
+								frames: layout.frames.length,
+								cards: layout.cards.length
+							})
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: boxRef,
+					onPointerDown,
+					onPointerMove,
+					onPointerUp,
+					onPointerCancel,
+					onPointerLeave,
+					title: t("cardgraph.gestureHint"),
+					style: {
+						...box,
+						...fill ? fillBox : { height: `${VIEW_HEIGHT}px` },
+						cursor: drag.current?.moved === true ? "grabbing" : hover.report === void 0 ? "grab" : "pointer"
+					},
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+							ref: baseRef,
+							role: "img",
+							"aria-label": t("cardgraph.summary", {
+								frames: layout.frames.length,
+								cards: layout.cards.length
+							}),
+							style: layer
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+							ref: pathRef,
+							"aria-hidden": "true",
+							style: layer
+						}),
+						visibleCards.map((card) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": `${card.report} · ${card.subject}`,
+							title: idHint(card.report),
+							onClick: () => {
+								onOpen(card.report);
+							},
+							onFocus: () => {
+								setHover({ report: card.report });
+							},
+							onBlur: () => {
+								setHover({});
+							},
+							style: {
+								position: "absolute",
+								left: `${card.bounds.x * zoom + offset.x}px`,
+								top: `${card.bounds.y * zoom + offset.y}px`,
+								width: `${card.bounds.width * zoom}px`,
+								height: `${card.bounds.height * zoom}px`,
+								padding: 0,
+								border: 0,
+								background: "transparent",
+								cursor: "pointer"
+							}
+						}, card.report))
+					]
+				})]
 			});
 		}
+		const controls = {
+			display: "flex",
+			alignItems: "center",
+			gap: "8px",
+			flexWrap: "wrap"
+		};
+		const percentStyle = {
+			fontSize: "var(--dsw-font-xxxs-11, 11px)",
+			color: "var(--dsw-alias-label-caption)",
+			fontVariantNumeric: "tabular-nums"
+		};
+		const box = {
+			position: "relative",
+			overflow: "hidden",
+			borderRadius: "6px",
+			border: "1px solid var(--dsw-alias-border-l1)",
+			touchAction: "none"
+		};
+		/**
+		* A filling host owns the height: the root takes the whole body and lets the
+		* measured box keep whatever the toolbar left. `minHeight` is what stops a flex
+		* child from refusing to shrink, which would push the toolbar off the top of a
+		* short panel instead of shrinking the drawing.
+		*/
+		const fillRoot = {
+			flex: "1 1 auto",
+			height: "100%",
+			minHeight: "0"
+		};
+		const fillBox = {
+			flex: "1 1 auto",
+			minHeight: "0"
+		};
+		const layer = {
+			position: "absolute",
+			inset: "0",
+			display: "block"
+		};
 		//#endregion
-		//#region src/client/locales.ts
+		//#region src/client/sidebar-tab.ts
 		/**
-		* Dictionary for the report timeline tab.
+		* The card canvas as a right-Sidebar tab — stage one and stage two of the tab
+		* system.
+		*
+		* The right column belongs to the product
+		* (`@deepseek-ai/dsh-client-ui-sidebar-right`), and a type from outside reaches
+		* it through **cordis services**, never through imports: the client bundle's
+		* purity gate rejects a cross-plugin value import, and that package's types are
+		* not part of a third-party plugin's resolvable dependency set anyway. So the
+		* two faces this module needs are asserted structurally here, exactly as
+		* `client/index.ts` already asserts the `slots` and `locale` faces.
+		*
+		* ## Why the registry is injected rather than read
+		*
+		* `sidebarRightTabs` is published by that package's own `apply`. Cordis has no
+		* optional-dependency form: a key on this plugin's `inject` list is a
+		* REQUIREMENT, and a missing one parks this plugin's fiber — on the web boot
+		* that is a white page, not a degraded view. `ctx.get` fails the other way: it
+		* reads the registry at this instant, so a host that publishes it a moment later
+		* would leave the tab silently unregistered forever. `ctx.inject` is the one
+		* form that is both optional and late — the callback runs when the service
+		* actually appears, and again if it comes back.
+		*
+		* ## Why the guide entry is not optional in practice
 		*
-		* Both shipped locales are required by the client locale service, and the key
-		* union drives the typed `t()` the view uses, so a missing translation is a
-		* type error rather than an empty label.
+		* The strip's `+` control only ever re-opens the guide page, and the guide lists
+		* registered types through exactly the entries they declare. Without one, this
+		* tab could only ever be opened by code.
 		*
-		* @module dsh-report-ledger/client/locales
+		* ## What the body draws
+		*
+		* The drawing the conversation tab used to carry, filling the panel instead of
+		* sitting in a fixed 420px box — the panel owns its height, and it can be split
+		* or taken fullscreen, which is most of the reason to put a drawing in this
+		* column at all. Picking a card opens that report's detail underneath, through
+		* the same view the conversation tab's rows use, so one report cannot read
+		* differently in the two places.
+		*
+		* @module dsh-report-ledger/client/sidebar-tab
 		*/
-		/** Chinese dictionary — the source of truth for the key set. */
-		const zh = {
-			"view.tab": "汇报",
-			"view.loading": "正在读取账本…",
-			"view.summary": "{sessions} 个会话 · {reports} 份汇报",
-			"view.empty": "这个会话树下还没有汇报。代理用 report_author 开一份汇报后，这里会出现它的缩略卡。",
-			"view.refresh": "刷新",
-			"view.retry": "重试",
-			"view.error": "读取失败：{code}",
-			"view.root": "本会话",
-			"view.live": "在线",
-			"view.delegated": "子代理",
-			"view.detail.loading": "正在读取传递路径…",
-			"view.detail.route": "传递路径",
-			"view.detail.routeEmpty": "（还没有记录跳）",
-			"view.detail.pending": "仍在等待送达：{targets}",
-			"view.detail.body": "正文",
-			"view.detail.path": "账本文件",
-			"row.hops": "{count} 跳",
-			"row.authors": "{count} 位共写",
-			"row.filterByTask": "只看任务「{task}」",
-			"filter.all": "全部",
-			"filter.open": "进行中",
-			"filter.acked": "已回执",
-			"filter.closed": "已结案",
-			"filter.search": "搜索主题、编号、会话或收发…",
-			"filter.clear": "清除",
-			"filter.showing": "显示 {visible}/{total} 份汇报",
-			"filter.none": "没有符合当前筛选的汇报。",
-			"filter.hint": "状态筛选只作用于汇报；搜索会同时匹配会话标题与编号。",
-			"basis.created": "按创建",
-			"basis.updated": "按最近活动",
-			"basis.hint": "汇报按创建时间还是按最后一次活动排入时间线；会话始终按创建时间。",
-			"detail.thread": "线程",
-			"detail.parent": "上溯",
-			"detail.children": "下递",
-			"detail.openLinked": "打开 {report}",
-			"detail.outside": "{report} 不在当前会话树的列表里（它可能属于另一条线）；正文与路径仍可读取。",
-			"detail.filteredOut": "{report} 在当前筛选下被隐藏了（用「清除」恢复）。",
-			"detail.backToList": "回到列表",
-			"detail.bodyTruncated": "正文过长，此处只显示开头 {chars} 字；完整内容见账本文件。"
+		/** This type's identity in the tab system: unique, and the key both seats use. */
+		const TAB_ID = "dsh-report-ledger/canvas";
+		/**
+		* What `openTab(kind)` names.
+		*
+		* Deliberately not derived from {@link TAB_ID}: the registry is looked up BY
+		* kind, and deriving one name from the other is a mistake the ecosystem has
+		* already paid for — a registration that says one thing while its opener says
+		* another only fails at click time.
+		*/
+		const TAB_KIND = "ledger-canvas";
+		/** The sentences that stand in for a drawing that cannot be made yet. */
+		const muted = {
+			padding: "12px",
+			color: "var(--dsw-alias-label-caption)"
 		};
-		/** English dictionary, checked against the Chinese key set. */
-		const en = {
-			"view.tab": "Reports",
-			"view.loading": "Reading the ledger…",
-			"view.summary": "{sessions} sessions · {reports} reports",
-			"view.empty": "No reports in this session tree yet. Once an agent opens one with report_author, its digest card appears here.",
-			"view.refresh": "Refresh",
-			"view.retry": "Retry",
-			"view.error": "Read failed: {code}",
-			"view.root": "this session",
-			"view.live": "live",
-			"view.delegated": "subagent",
-			"view.detail.loading": "Reading the transfer path…",
-			"view.detail.route": "Transfer path",
-			"view.detail.routeEmpty": "(no hops recorded yet)",
-			"view.detail.pending": "Still owed to: {targets}",
-			"view.detail.body": "Body",
-			"view.detail.path": "Ledger file",
-			"row.hops": "{count} hops",
-			"row.authors": "{count} authors",
-			"row.filterByTask": "Show only task \"{task}\"",
-			"filter.all": "All",
-			"filter.open": "Open",
-			"filter.acked": "Acked",
-			"filter.closed": "Closed",
-			"filter.search": "Search subject, id, session, or people…",
-			"filter.clear": "Clear",
-			"filter.showing": "Showing {visible}/{total} reports",
-			"filter.none": "No reports match the current filter.",
-			"filter.hint": "The status filter narrows reports only; search matches every row, including session titles and ids.",
-			"basis.created": "By creation",
-			"basis.updated": "By activity",
-			"basis.hint": "Whether reports are placed at creation or at their latest activity; sessions always keep their creation time.",
-			"detail.thread": "Thread",
-			"detail.parent": "Answers",
-			"detail.children": "Answered by",
-			"detail.openLinked": "Open {report}",
-			"detail.outside": "{report} is not in this session tree's list (it may belong to another line); its body and path are still readable.",
-			"detail.filteredOut": "{report} is hidden by the current filter (use Clear to restore it).",
-			"detail.backToList": "Back to the list",
-			"detail.bodyTruncated": "Body is long, so only the first {chars} characters are shown here; the ledger file has the whole thing."
+		/**
+		* The canvas over the open report's detail.
+		*
+		* The split is even on purpose: the drawing keeps half the panel while a report
+		* is read, and all of it otherwise. A reader who wants more of either has the
+		* panel's own fullscreen and split rather than a second control here.
+		*/
+		const stack = {
+			display: "flex",
+			flexDirection: "column",
+			height: "100%",
+			minHeight: "0"
 		};
+		/** The drawing alone: it takes whatever the panel has. */
+		const stackFull = {
+			flex: "1 1 auto",
+			minHeight: "0"
+		};
+		const stackCanvas = {
+			flex: "1 1 50%",
+			minHeight: "0"
+		};
+		const stackDetail = {
+			flex: "1 1 50%",
+			minHeight: "0",
+			overflow: "hidden"
+		};
+		/**
+		* Bind the tab body to the plugin's copy.
+		*
+		* The body is the *second* registration and carries the runtime face: a
+		* component, receiving the session it was opened in — which is the only input
+		* the drawing needs, since the ledger is read from the session tree's root.
+		* @param t - namespace-bound translate, read on every render.
+		* @returns the tab body component.
+		*/
+		function bodyFor(t) {
+			return function LedgerCanvasBody(props) {
+				const { payload, error } = useTimeline(typeof props.sessionId === "string" ? props.sessionId : "");
+				const [openReport, setOpenReport] = (0, react.useState)(void 0);
+				const { detail, error: detailError } = useReportDetail(openReport, payload?.generatedAt ?? 0);
+				const rows = (0, react.useMemo)(() => payload === void 0 ? [] : buildRows(payload), [payload]);
+				const reports = (0, react.useMemo)(() => rows.flatMap((row) => row.kind === "report" ? [row.front] : []), [rows]);
+				const inList = (0, react.useMemo)(() => payload === void 0 ? /* @__PURE__ */ new Set() : reportIds(payload), [payload]);
+				const titles = (0, react.useMemo)(() => payload === void 0 ? /* @__PURE__ */ new Map() : sessionTitles(payload), [payload]);
+				const idHint = (0, react.useCallback)((id) => {
+					const title = titles.get(id);
+					return title === void 0 ? id : `${title} · ${id}`;
+				}, [titles]);
+				const onOpen = (0, react.useCallback)((report) => {
+					setOpenReport((current) => current === report ? void 0 : report);
+				}, []);
+				if (error !== void 0) return (0, react.createElement)("div", { style: muted }, t("view.error", { code: error }));
+				if (payload === void 0) return (0, react.createElement)("div", { style: muted }, t("view.loading"));
+				if (reports.length === 0) return (0, react.createElement)("div", { style: muted }, t("view.empty"));
+				const canvasCell = (0, react.createElement)("div", { style: openReport === void 0 ? stackFull : stackCanvas }, (0, react.createElement)(CardgraphView, {
+					payload,
+					reports,
+					t,
+					...openReport === void 0 ? {} : { openReport },
+					onOpen,
+					idHint,
+					fill: true
+				}));
+				if (openReport === void 0) return (0, react.createElement)("div", { style: stack }, canvasCell);
+				return (0, react.createElement)("div", { style: stack }, canvasCell, (0, react.createElement)("div", { style: stackDetail }, (0, react.createElement)(ReportDetailView, {
+					report: openReport,
+					detail,
+					error: detailError,
+					t,
+					idHint,
+					variant: "pane",
+					onOpenReport: setOpenReport,
+					inList: inList.has(openReport),
+					visibleInFilter: true,
+					onClose: () => {
+						setOpenReport(void 0);
+					}
+				})));
+			};
+		}
+		/**
+		* Contribute the canvas tab: its type, its body, and its guide capsule.
+		* @param ctx - the client context (slots, plus the optional registry service).
+		* @param t - namespace-bound translate, read fresh on every label call.
+		*/
+		function installSidebarTab(ctx, t) {
+			ctx.inject(["sidebarRightTabs"], (scoped) => {
+				const tabs = scoped.get("sidebarRightTabs");
+				if (tabs === void 0) return;
+				scoped.effect(() => {
+					const disposeType = tabs.register({
+						id: TAB_ID,
+						kind: TAB_KIND,
+						priority: "extension",
+						title: () => t("sidebar.chip"),
+						guide: [{
+							id: "canvas",
+							order: 15,
+							title: () => t("sidebar.guideTitle"),
+							description: () => t("sidebar.guideDescription")
+						}]
+					});
+					const disposeBody = ctx.slots.inject("sidebar.right.pane.tab", () => ctx.slots.register({
+						name: "sidebar.right.pane.tab",
+						key: TAB_ID
+					}, bodyFor(t)));
+					return () => {
+						disposeBody();
+						disposeType();
+					};
+				}, "report-ledger: canvas tab");
+			});
+		}
 		//#endregion
 		//#region src/client/index.ts
 		/**
@@ -917,7 +3785,9 @@ window.__ModuleLoader__.load({
 				zh,
 				en
 			}), "report-ledger: dictionaries");
+			ctx.effect(() => installStyles(), "report-ledger: adapter styles");
 			const t = ctx.locale.bind(NS);
+			installSidebarTab(ctx, t);
 			ctx.slots.inject("conversation.view", () => ctx.slots.register({
 				name: "conversation.view",
 				id: VIEW_ID,