dsh-report-ledger 0.1.0 → 0.2.0

package/lib/client.js

@@ -5,9 +5,24 @@ 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);
+		}
+		/**
 		* Build the merged, time-ordered row list.
 		*
 		* Sessions are placed at their creation time and reports at theirs, so the list
@@ -40,9 +55,79 @@ window.__ModuleLoader__.load({
 				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.
+		* @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.
+		* @returns the rows, with the open report present exactly once.
+		*/
+		function withSynthesizedRow(kept, front, basis = "created") {
+			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: 0,
+				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 +139,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 +200,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,44 +256,1975 @@ window.__ModuleLoader__.load({
 			return count;
 		}
 		/**
-		* The report ids present in one payload.
+		* 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
+		* an unrelated session, for instance — and the detail endpoint is ledger-scoped,
+		* so such a report still opens. Knowing which ids are in the list is what lets
+		* the view say so instead of silently showing a card that is not in the timeline.
+		* @param payload - the endpoint payload.
+		* @returns the ids of every report in the payload.
+		*/
+		function reportIds(payload) {
+			const ids = /* @__PURE__ */ new Set();
+			for (const front of payload.reports) ids.add(front.report);
+			return ids;
+		}
+		/** Body length above which the detail panel shows only a head. */
+		const BODY_DISPLAY_LIMIT = 4e3;
+		/** How much of an over-long body is shown. */
+		const BODY_HEAD_LIMIT = 1200;
+		/**
+		* Trim a body for the detail panel.
+		*
+		* Mirrors what `report_read` already does for the model: the full text stays in
+		* the ledger file, and both readers get a bounded view plus a pointer rather than
+		* an unbounded paste. Keeping the human view and the model view bounded the same
+		* way means neither can be surprised by what the other sees.
+		* @param body - the raw body.
+		* @param limit - length above which truncation applies.
+		* @param head - how many characters to keep when truncating.
+		* @returns the display text and whether it was cut.
+		*/
+		function displayBody(body, limit = BODY_DISPLAY_LIMIT, head = BODY_HEAD_LIMIT) {
+			if (body.length <= limit) return {
+				text: body,
+				truncated: false
+			};
+			return {
+				text: body.slice(0, head),
+				truncated: true
+			};
+		}
+		/**
+		* Close a code fence left hanging by truncation.
+		*
+		* 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.
+		*
+		* 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.
+		*
+		* 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.
+		* @param text - the already-truncated head.
+		* @returns the head, with an unclosed fence closed.
+		*/
+		function closeOpenFence(text) {
+			let open = false;
+			for (const line of text.split("\n")) if (line.trimStart().startsWith("```")) open = !open;
+			return open ? `${text}\n\`\`\`` : text;
+		}
+		//#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
+		};
+		/**
+		* 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";
+		}
+		/** 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,
+				cardWidth: size.width,
+				cardHeight: size.height,
+				width: columnCount === 0 ? 0 : contentWidth,
+				height: columnCount === 0 ? 0 : opts.margin * 2 + widest
+			};
+		}
+		//#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
+				}
+			};
+		}
+		/**
+		* 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.
+		* @param root - the element carrying the tokens, normally `document.documentElement`.
+		* @param win - the window to read styles from.
+		* @returns the reader.
+		*/
+		function createThemeReader(root, win) {
+			const style = win.getComputedStyle(root);
+			const read = (name) => style.getPropertyValue(name);
+			let canary;
+			let cached;
+			return { read() {
+				const current = read(CANARY);
+				if (cached === void 0 || current !== canary) {
+					canary = current;
+					cached = readTheme(read);
+				}
+				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: 26
+				};
+				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);
+					const rest = foldText(`· ${card.subject}`, textWidth - idWidth - 4, measure, 1)[0] ?? "";
+					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;
+					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/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.root": "本会话",
+			"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} 字；完整内容见账本文件。",
+			"topology.title": "拓扑",
+			"topology.summary": "{lanes} 条泳道 · {reports} 份汇报",
+			"topology.show": "展开拓扑",
+			"topology.hide": "收起拓扑",
+			"topology.external": "树外",
+			"topology.externalHint": "不属于本树的会话",
+			"topology.openHint": "点击在列表中打开",
+			"cardgraph.zoomIn": "放大",
+			"cardgraph.zoomOut": "缩小",
+			"cardgraph.zoom": "{percent}%",
+			"cardgraph.fit": "适应窗口",
+			"cardgraph.summary": "{frames} 个框 · {cards} 份汇报",
+			"cardgraph.empty": "没有汇报",
+			"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.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",
+			"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.",
+			"topology.title": "Topology",
+			"topology.summary": "{lanes} lanes · {reports} reports",
+			"topology.show": "Show topology",
+			"topology.hide": "Hide topology",
+			"topology.external": "outside",
+			"topology.externalHint": "Sessions outside this tree",
+			"topology.openHint": "Click to open it in the list",
+			"cardgraph.zoomIn": "Zoom in",
+			"cardgraph.zoomOut": "Zoom out",
+			"cardgraph.zoom": "{percent}%",
+			"cardgraph.fit": "Fit",
+			"cardgraph.summary": "{frames} frames · {cards} reports",
+			"cardgraph.empty": "no reports",
+			"body.copy": "Copy",
+			"body.copied": "Copied",
+			"body.footnotes": "Footnotes"
+		};
+		/**
+		* 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.
+		*/
+		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 topology borrows the transfer path's own vocabulary rather than inventing
+		* a second one: an arrow in the graph 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"
+		};
+		/**
+		* 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.
+		*/
+		/** Lease-state description, for the checkout chip's tooltip. */
+		const LEASE_HINT = {
+			held: "row.leaseHeld",
+			released: "row.leaseReleased",
+			reclaimed: "row.leaseReclaimed",
+			none: "row.leaseNone"
+		};
+		/** Hop action label, for the transfer-path rendering. */
+		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/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
+		*/
+		/** How far the reader may zoom out and in. */
+		const MIN_ZOOM = .25;
+		const MAX_ZOOM = 2.5;
+		/** One wheel notch. */
+		const ZOOM_STEP = 1.25;
+		/** 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"
+		];
+		/**
+		* 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 }) {
+			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);
+			const fitted = (0, react.useRef)(false);
+			/** 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
+			]);
+			const labels = (0, react.useMemo)(() => {
+				const status = {};
+				for (const [state, key] of Object.entries(STATUS_LABEL)) status[state] = t(key);
+				return {
+					external: t("topology.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);
+				reader.current = createThemeReader(globalThis.document.documentElement, globalThis.window);
+				setReady(true);
+				return () => {
+					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();
+				};
+			}, []);
+			const viewport = (0, react.useMemo)(() => ({
+				offsetX: offset.x,
+				offsetY: offset.y,
+				scale: zoom,
+				width: size.width,
+				height: size.height
+			}), [
+				offset,
+				zoom,
+				size
+			]);
+			const focus = (0, react.useMemo)(() => ({
+				...hover.report === void 0 ? {} : { report: hover.report },
+				...hover.frame === void 0 ? {} : { frame: hover.frame },
+				...openReport === void 0 ? {} : { selected: openReport }
+			}), [hover, openReport]);
+			const scene = (0, react.useMemo)(() => ({
+				layout,
+				theme: reader.current?.read() ?? FALLBACK_THEME,
+				viewport,
+				focus,
+				labels,
+				overscan: OVERSCAN
+			}), [
+				layout,
+				viewport,
+				focus,
+				labels
+			]);
+			(0, react.useEffect)(() => {
+				const target = painter.current;
+				if (!ready || target === null) return;
+				target.resize(size.width, size.height, globalThis.devicePixelRatio || 1);
+				target.paint({
+					...scene,
+					focus: openReport === void 0 ? {} : { selected: openReport }
+				});
+			}, [
+				ready,
+				scene,
+				size,
+				openReport
+			]);
+			(0, react.useEffect)(() => {
+				const target = pathPainter.current;
+				if (!ready || target === null) return;
+				target.resize(size.width, size.height, globalThis.devicePixelRatio || 1);
+				target.paintPath(scene);
+			}, [
+				ready,
+				scene,
+				size
+			]);
+			/** 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
+			]);
+			const fit = (0, react.useCallback)(() => {
+				const box = boxRef.current;
+				if (box === null || layout.width <= 0 || layout.height <= 0) return;
+				const width = box.clientWidth;
+				const height = box.clientHeight;
+				const next = clamp(Math.min((width - 24) / layout.width, (height - 24) / layout.height), MIN_ZOOM, 1);
+				setZoom(next);
+				setOffset({
+					x: Math.max(8, (width - layout.width * next) / 2),
+					y: Math.max(8, (height - layout.height * next) / 2)
+				});
+			}, [layout]);
+			/**
+			* The first view, which is deliberately **not** the fit.
+			*
+			* Fitting the whole drawing into a 420px box on a three-column tree lands around
+			* 57%, which is the compact tier — so the reader's first sight of a card canvas
+			* would be a wall of one-line cards with the subjects this design is about elided.
+			* Measured on the real tab, not reasoned about: the first screenshot of the wiring
+			* came out at 57% and proved the point.
+			*
+			* So the first view fits the **width** and never drops below the card tier: frames,
+			* columns and readable cards all visible at once, and the reader scrolls down
+			* instead of squinting. `适应窗口` still gives the whole picture on demand.
+			*/
+			(0, react.useEffect)(() => {
+				if (fitted.current || size.width === 0 || layout.cards.length === 0) return;
+				fitted.current = true;
+				const next = clamp((size.width - 24) / Math.max(layout.width, 1), .8, 1);
+				setZoom(next);
+				setOffset({
+					x: Math.max(8, (size.width - layout.width * next) / 2),
+					y: 12
+				});
+			}, [layout, size]);
+			(0, react.useEffect)(() => {
+				const box = boxRef.current;
+				if (box === null) return;
+				const onWheel = (event) => {
+					event.preventDefault();
+					const rect = box.getBoundingClientRect();
+					const px = event.clientX - rect.left;
+					const py = event.clientY - rect.top;
+					const current = zoomRef.current;
+					const next = clamp(current * (event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP), MIN_ZOOM, MAX_ZOOM);
+					const ratio = next / current;
+					const previous = offsetRef.current;
+					setOffset({
+						x: px - (px - previous.x) * ratio,
+						y: py - (py - previous.y) * ratio
+					});
+					setZoom(next);
+				};
+				box.addEventListener("wheel", onWheel, { passive: false });
+				return () => {
+					box.removeEventListener("wheel", onWheel);
+				};
+			}, []);
+			/** Drag to pan, click to open. Distinguishing them by distance travelled. */
+			const onPointerDown = (0, react.useCallback)((event) => {
+				if (event.button !== 0) return;
+				drag.current = {
+					x: event.clientX,
+					y: event.clientY,
+					offsetX: offset.x,
+					offsetY: offset.y,
+					moved: false
+				};
+			}, [offset]);
+			const onPointerMove = (0, react.useCallback)((event) => {
+				const pressing = drag.current;
+				if (pressing !== null) {
+					const dx = event.clientX - pressing.x;
+					const dy = event.clientY - pressing.y;
+					if (Math.abs(dx) + Math.abs(dy) > DRAG_SLOP) pressing.moved = true;
+					if (pressing.moved) {
+						setOffset({
+							x: pressing.offsetX + dx,
+							y: pressing.offsetY + dy
+						});
+						return;
+					}
+				}
+				const hit = pick(event.clientX, event.clientY);
+				setHover(hit?.kind === "card" && hit.report !== void 0 ? { report: hit.report } : hit?.kind === "frame" && hit.frame !== void 0 ? { frame: hit.frame } : {});
+			}, [pick]);
+			const onPointerUp = (0, react.useCallback)((event) => {
+				const pressing = drag.current;
+				drag.current = null;
+				if (pressing === null || pressing.moved) 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)(() => {
+				drag.current = null;
+				setHover({});
+			}, []);
+			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"
+				},
+				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: () => {
+								setZoom((z) => clamp(z / ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));
+							},
+							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: () => {
+								setZoom((z) => clamp(z * ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));
+							},
+							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,
+					onPointerLeave,
+					style: {
+						...box,
+						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"
+		};
+		const layer = {
+			position: "absolute",
+			inset: "0",
+			display: "block"
+		};
+		//#endregion
+		//#region src/client/styles.ts
+		/**
+		* The plugin's own stylesheet.
 		*
-		* A thread link can point outside the subtree — a report answering one opened by
-		* an unrelated session, for instance — and the detail endpoint is ledger-scoped,
-		* so such a report still opens. Knowing which ids are in the list is what lets
-		* the view say so instead of silently showing a card that is not in the timeline.
-		* @param payload - the endpoint payload.
-		* @returns the ids of every report in the payload.
+		* 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 are the two things only a consumer can know:
+		*
+		*  1. **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.
+		*
+		*  2. **Drawing the topology.** The graph is made of elements the shell has no
+		*     primitive for — edges, lane rails, row separators, the hover dimming — so
+		*     these rules style OUR OWN svg and divs. Nothing here restyles a shell
+		*     component; every library element keeps the look the shell gave it.
+		*
+		* Every colour comes from a `--dsw-*` token, so the drawing follows the theme
+		* (light or dark) without knowing anything about it.
+		*
+		* @module dsh-report-ledger/client/styles
 		*/
-		function reportIds(payload) {
-			const ids = /* @__PURE__ */ new Set();
-			for (const front of payload.reports) ids.add(front.report);
-			return ids;
-		}
-		/** Body length above which the detail panel shows only a head. */
-		const BODY_DISPLAY_LIMIT = 4e3;
-		/** How much of an over-long body is shown. */
-		const BODY_HEAD_LIMIT = 1200;
+		/** Class the tab puts on the toolbar's search seat. */
+		const SEARCH_CLASS = "report-ledger-search";
+		/** Applied to everything that is not part of the hovered report's path. */
+		const DIM_CLASS = "report-ledger-dim";
+		/** 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; }
+
+/* ── topology: our own drawing primitives ──────────────────────────────────
+   Rails and row separators are hairlines; edges carry the relation, so only
+   they get colour and dash pattern. Everything reads through theme tokens. */
+.report-ledger-rail { stroke: var(--dsw-alias-border-l1); stroke-width: 1; }
+.report-ledger-rowsep { stroke: var(--dsw-alias-border-l1); stroke-width: 1; opacity: .45; }
+.report-ledger-headsep { stroke: var(--dsw-alias-border-l2); stroke-width: 1; }
+.report-ledger-edge { fill: none; }
+.report-ledger-edge-to { stroke: var(--dsw-alias-label-secondary); stroke-width: 1.4; }
+.report-ledger-edge-cc { stroke: var(--dsw-alias-label-caption); stroke-width: 1; stroke-dasharray: 2 3; }
+.report-ledger-edge-author { stroke: var(--dsw-alias-label-caption); stroke-width: 1; stroke-dasharray: 1 3; }
+.report-ledger-edge-thread { stroke: var(--dsw-alias-state-business-label, var(--dsw-alias-label-secondary)); stroke-width: 1.2; }
+.report-ledger-arrow-to { fill: var(--dsw-alias-label-secondary); }
+.report-ledger-arrow-cc { fill: var(--dsw-alias-label-caption); }
+.report-ledger-arrow-author { fill: var(--dsw-alias-label-caption); }
+.report-ledger-arrow-thread { fill: var(--dsw-alias-state-business-label, var(--dsw-alias-label-secondary)); }
+/* A hover label over a line needs its own backing, or the line runs through the word. */
+.report-ledger-edge-label {
+  padding: 0 4px;
+  border-radius: 3px;
+  font-size: var(--dsw-font-xxxs-11, 11px);
+  line-height: 15px;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-base);
+}
+/* ── hover focus ───────────────────────────────────────────────────────────
+   The dim goes on ONE element — the edge layer — and never through a descendant
+   selector. Measured on a 300-report drawing: flipping a data attribute that a
+   descendant rule matches costs ~35ms per hover on its own, because the browser
+   recalculates style for the whole subtree whether or not the result changes
+   anything visible; dimming 831 individual groups cost ~89ms. One class on one
+   layer costs neither.
+
+   Nodes are deliberately NOT dimmed: while tracing one report's path it is the
+   *relations* that need to recede, not the participants. */
+.${DIM_CLASS} { opacity: .18; }
+`;
 		/**
-		* Trim a body for the detail panel.
-		*
-		* Mirrors what `report_read` already does for the model: the full text stays in
-		* the ledger file, and both readers get a bounded view plus a pointer rather than
-		* an unbounded paste. Keeping the human view and the model view bounded the same
-		* way means neither can be surprised by what the other sees.
-		* @param body - the raw body.
-		* @param limit - length above which truncation applies.
-		* @param head - how many characters to keep when truncating.
-		* @returns the display text and whether it was cut.
+		* Mount the adapter stylesheet.
+		* @returns a disposer that removes it, owned by the plugin's effect scope.
 		*/
-		function displayBody(body, limit = BODY_DISPLAY_LIMIT, head = BODY_HEAD_LIMIT) {
-			if (body.length <= limit) return {
-				text: body,
-				truncated: false
-			};
-			return {
-				text: body.slice(0, head),
-				truncated: true
+		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
@@ -186,6 +2249,15 @@ window.__ModuleLoader__.load({
 		*/
 		const TIMELINE_URL = "/api/report-ledger/timeline";
 		const REPORT_URL = "/api/report-ledger/report";
+		/**
+		* How often the tab re-reads the timeline while it is on screen.
+		*
+		* 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, {
@@ -211,21 +2283,17 @@ window.__ModuleLoader__.load({
 			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))"
-			};
+		/** Dom id of one report's card, so the topology can scroll to it. */
+		function rowDomId(report) {
+			return `report-ledger-row-${report}`;
 		}
+		/**
+		* How long the copy control keeps its "copied" label.
+		*
+		* The chat view uses the same one-second acknowledgement through the same
+		* `writeClipboard`, so a copy here feels like a copy there.
+		*/
+		const COPIED_HOLD_MS = 1e3;
 		/** Storage key for the remembered status filter. */
 		const FILTER_KEY = "dsh.reportLedger.filter.v1";
 		/** Read the remembered status filter, tolerating absent or damaged storage. */
@@ -248,13 +2316,22 @@ window.__ModuleLoader__.load({
 			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 [timelineNonce, setTimelineNonce] = (0, react.useState)(0);
+			const [detailNonce, setDetailNonce] = (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");
+			const [copiedPath, setCopiedPath] = (0, react.useState)(false);
+			const copyTimer = (0, react.useRef)(void 0);
+			const [showTopology, setShowTopology] = (0, react.useState)(true);
+			/** Set when the topology asks for a card, so the list can scroll to it once. */
+			const scrollTo = (0, react.useRef)(void 0);
+			(0, react.useEffect)(() => () => {
+				if (copyTimer.current !== void 0) globalThis.clearTimeout(copyTimer.current);
+			}, []);
 			(0, react.useEffect)(() => {
 				try {
 					globalThis.localStorage?.setItem(FILTER_KEY, JSON.stringify({ status }));
@@ -275,7 +2352,23 @@ window.__ModuleLoader__.load({
 				return () => {
 					cancelled = true;
 				};
-			}, [sessionId, nonce]);
+			}, [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]);
 			(0, react.useEffect)(() => {
 				if (openReport === void 0) return;
 				let cancelled = false;
@@ -289,11 +2382,24 @@ window.__ModuleLoader__.load({
 				return () => {
 					cancelled = true;
 				};
-			}, [openReport, nonce]);
+			}, [openReport, detailNonce]);
 			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 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]);
 			const filter = (0, react.useMemo)(() => ({
 				status,
 				text
@@ -301,18 +2407,13 @@ window.__ModuleLoader__.load({
 			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
-				}];
+				return withSynthesizedRow(kept, detail.front, basis);
 			}, [
 				rows,
 				filter,
 				openReport,
-				detail
+				detail,
+				basis
 			]);
 			const filteredReportIds = (0, react.useMemo)(() => {
 				const ids = /* @__PURE__ */ new Set();
@@ -321,8 +2422,75 @@ window.__ModuleLoader__.load({
 			}, [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]);
+			/**
+			* The reports the topology plots.
+			*
+			* Taken from the same filtered row set the list renders, so the graph is a view
+			* of the current filter rather than a second source of truth — narrowing the
+			* toolbar narrows both.
+			*/
+			const plotted = (0, react.useMemo)(() => filterRows(rows, filter).flatMap((row) => row.kind === "report" ? [row.front] : []), [rows, filter]);
+			/**
+			* 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)(() => {
-				setNonce((value) => value + 1);
+				setTimelineNonce((value) => value + 1);
+				setDetailNonce((value) => value + 1);
+			}, []);
+			/**
+			* Open a report from the topology.
+			*
+			* The graph does not get its own detail surface: it opens the card in the list
+			* and brings it into view, which keeps one reading surface for the body and the
+			* transfer path — and inherits the card's guarantees for free (a filtered-out
+			* report still gets a row to render into).
+			*/
+			const openFromTopology = (0, react.useCallback)((report) => {
+				scrollTo.current = report;
+				setOpenReport(report);
+			}, []);
+			(0, react.useEffect)(() => {
+				const target = scrollTo.current;
+				if (target === void 0 || openReport !== target) return;
+				scrollTo.current = void 0;
+				globalThis.document?.getElementById(rowDomId(target))?.scrollIntoView({
+					block: "center",
+					behavior: "smooth"
+				});
+			}, [openReport]);
+			/**
+			* Copy the ledger path, acknowledging through the control's own label.
+			*
+			* 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 shell = {
 				padding: "16px 20px",
@@ -342,24 +2510,17 @@ window.__ModuleLoader__.load({
 				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"
+			/**
+			* 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 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",
@@ -367,21 +2528,88 @@ window.__ModuleLoader__.load({
 				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"
+			};
 			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 has a
+			* min-content width equal to its whole unbreakable line, so inside a `1fr`
+			* grid track — or a flex item without `min-width: 0` — it grows the track past
+			* its container. Recipient lists and hop notes are exactly that: unbounded
+			* text, which is how the transfer path used to push the whole tab into a
+			* horizontal scrollbar and cut the notes off screen.
+			*/
+			const wrap = {
+				...time,
+				whiteSpace: "normal",
+				minWidth: 0,
+				overflowWrap: "anywhere"
+			};
+			/** The muted caption colour, for the empty-state sentences. */
+			const muted = { color: "var(--dsw-alias-label-tertiary, #888)" };
+			/** 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 transcript's footer line: ledger path plus its copy control. */
+			const pathRow = {
+				...wrap,
+				marginTop: "6px",
+				display: "flex",
+				alignItems: "baseline",
+				gap: "6px"
+			};
+			/** The topology's frame: an overview that sits above the list, not instead of it. */
+			const topoSection = {
+				marginBottom: "12px",
+				border: "1px solid var(--dsw-alias-border-l1, rgba(0,0,0,0.06))",
+				borderRadius: "6px",
+				background: "var(--dsw-alias-bg-layer-1, rgba(0,0,0,0.02))",
+				overflow: "hidden"
+			};
+			const topoHead = {
+				display: "flex",
+				alignItems: "center",
+				gap: "10px",
+				padding: "6px 10px",
+				borderBottom: "1px solid var(--dsw-alias-border-l1, rgba(0,0,0,0.06))"
+			};
 			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 })
+				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)("button", {
-						type: "button",
-						style: button,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "outline",
 						onClick: refresh,
 						children: t("view.retry")
 					})
@@ -420,9 +2648,9 @@ window.__ModuleLoader__.load({
 									reports: payload.reports.length
 								})
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								style: button,
+							/* @__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")
 							})
@@ -437,72 +2665,79 @@ window.__ModuleLoader__.load({
 								"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);
+							].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);
 								},
-								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"
-								}
+								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)("button", {
-								type: "button",
-								style: button,
+							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)("button", {
-								type: "button",
-								style: button,
-								title: t("basis.hint"),
-								onClick: () => {
-									setBasis(basis === "created" ? "updated" : "created");
-								},
-								children: t(basis === "created" ? "basis.created" : "basis.updated")
+							/* @__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")
+								})
 							})
 						]
 					}),
-					rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: { color: "var(--dsw-alias-label-tertiary, #888)" },
+					empty === "no-reports" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: muted,
 						children: t("view.empty")
 					}) : null,
-					rows.length > 0 && visible.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: { color: "var(--dsw-alias-label-tertiary, #888)" },
+					empty === "filtered-out" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: muted,
 						children: t("filter.none")
 					}) : null,
+					payload !== void 0 && plotted.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						style: topoSection,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: topoHead,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("topology.title") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+								variant: "ghost",
+								size: "sm",
+								icon: showTopology ? /* @__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 }),
+								onClick: () => {
+									setShowTopology((value) => !value);
+								},
+								children: showTopology ? t("topology.hide") : t("topology.show")
+							})]
+						}), showTopology ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardgraphView, {
+							payload,
+							reports: plotted,
+							t,
+							idHint,
+							openReport,
+							onOpen: openFromTopology
+						}) : null]
+					}) : null,
 					visible.map((row, index) => {
 						const pad = 8 + row.depth * 18;
 						if (row.kind === "session") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -513,29 +2748,42 @@ window.__ModuleLoader__.load({
 								alignItems: "baseline"
 							},
 							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									style: { color: "var(--dsw-alias-label-tertiary, #999)" },
-									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" },
-									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))"
-											}),
+									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)("span", {
-											style: chip({
-												color: "var(--dsw-alias-state-success-label, #1a7f37)",
-												background: "var(--dsw-alias-state-success-bg, rgba(26,127,55,0.10))"
-											}),
+										}) : null, row.live ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tag, {
+											tone: "success",
 											children: t("view.live")
-										}) : null,
-										row.title ?? row.id
-									]
+										}) : 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,
@@ -545,20 +2793,17 @@ window.__ModuleLoader__.load({
 						}, `s-${row.id}-${index}`);
 						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", {
+							id: rowDomId(front.report),
 							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",
@@ -571,50 +2816,72 @@ window.__ModuleLoader__.load({
 									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.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,
+										"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" },
+										style: {
+											flex: "1 1 auto",
+											minWidth: 0
+										},
 										children: [
 											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												style: chip(statusStyle(front.status)),
-												children: front.status
+												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)("button", {
-												type: "button",
+											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);
 												},
-												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
 											}),
+											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"
+													marginTop: "2px",
+													overflow: "hidden",
+													textOverflow: "ellipsis"
 												},
 												children: [
-													`from=${front.from}`,
-													front.to.length > 0 ? ` → ${front.to.join(", ")}` : "",
-													front.cc.length > 0 ? ` cc ${front.cc.join(", ")}` : "",
+													`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 ? "" : ` · last=${front.last.action}`
+													front.last === void 0 ? "" : ` · ${t("row.last")} ${t(HOP_LABEL[front.last.action])}`
 												]
 											})
 										]
@@ -625,6 +2892,7 @@ window.__ModuleLoader__.load({
 									})
 								]
 							}), expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								id: panelId,
 								style: {
 									margin: "4px 0 10px 24px",
 									padding: "10px 12px",
@@ -661,40 +2929,53 @@ window.__ModuleLoader__.load({
 													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", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t(HOP_LABEL[hop.action]) }) }),
 												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													style: time,
-													children: hop.actor
+													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)("span", {
-													style: time,
+													style: wrap,
 													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", {
+										detail.pending.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											style: {
-												...time,
-												color: "var(--dsw-alias-state-warn-label, #9a6700)"
+												...wrap,
+												display: "flex",
+												alignItems: "baseline",
+												gap: "6px"
 											},
-											children: fill(t("view.detail.pending"), { targets: detail.pending.join(", ") })
+											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;
-											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
+											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: () => {
+															setOpenReport(target);
+														},
+														children: target
+													})
+												})
 											}, target);
 											return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 												style: { marginBottom: "8px" },
@@ -719,15 +3000,14 @@ window.__ModuleLoader__.load({
 										})(),
 										inList.has(detail.front.report) ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											style: {
-												...time,
+												...wrap,
 												marginBottom: "8px"
 											},
 											children: [
 												fill(t("detail.outside"), { report: detail.front.report }),
 												" ",
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-													type: "button",
-													style: button,
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+													variant: "outline",
 													onClick: () => {
 														setOpenReport(void 0);
 													},
@@ -737,7 +3017,7 @@ window.__ModuleLoader__.load({
 										}),
 										inList.has(detail.front.report) && !filteredReportIds.has(detail.front.report) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											style: {
-												...time,
+												...wrap,
 												marginBottom: "8px"
 											},
 											children: fill(t("detail.filteredOut"), { report: detail.front.report })
@@ -746,38 +3026,49 @@ window.__ModuleLoader__.load({
 											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()
+										/* @__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: {
-												...time,
+												...wrap,
 												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"
-											},
+											style: pathRow,
 											children: [
-												t("view.detail.path"),
-												": ",
-												detail.path
+												/* @__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: [
+														t("view.detail.path"),
+														": ",
+														detail.path
+													]
+												}),
+												/* @__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);
+														}
+													})
+												})
 											]
 										})
 									] })
@@ -789,101 +3080,6 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region src/client/locales.ts
-		/**
-		* Dictionary for the report timeline tab.
-		*
-		* 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.
-		*
-		* @module dsh-report-ledger/client/locales
-		*/
-		/** 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} 字；完整内容见账本文件。"
-		};
-		/** 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."
-		};
-		//#endregion
 		//#region src/client/index.ts
 		/**
 		* Browser half of dsh-report-ledger — runs inside the dsh web GUI.
@@ -917,6 +3113,7 @@ window.__ModuleLoader__.load({
 				zh,
 				en
 			}), "report-ledger: dictionaries");
+			ctx.effect(() => installStyles(), "report-ledger: adapter styles");
 			const t = ctx.locale.bind(NS);
 			ctx.slots.inject("conversation.view", () => ctx.slots.register({
 				name: "conversation.view",