dsh-diagnostic-tutor 0.1.0

package/lib/client.js

@@ -0,0 +1,2029 @@
+window.__ModuleLoader__.load({
+	id: "dsh-diagnostic-tutor",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region src/client/blocks.tsx
+		/**
+		* Block renderers.
+		*
+		* The registry is the whole extension story: a block type is a key in
+		* `BLOCK_RENDERERS`, so Formula, Code, Comparison, Practice or Resource arrive
+		* as one more entry and never as a rewrite of the lesson renderer.
+		*
+		* Unknown types are the interesting case. A lesson authored by a newer host
+		* will contain blocks this build has never heard of, and that must degrade —
+		* the block is announced by type and left legible, rather than throwing inside
+		* React and blanking the whole panel.
+		*
+		* Note what is absent: no percentage, no score, no stars, no progress bar.
+		* State is always a word from the skill's vocabulary plus a coloured mark.
+		*/
+		/**
+		* Inline formatting: `**bold**`, `` `code` ``, and inline math.
+		*
+		* Math is handled because the teaching brain writes it by convention —
+		* `\(...\)` inline and `\[...\]` display are the skill's own rule — and a
+		* STEM surface that prints the delimiters verbatim is unreadable.
+		*
+		* This is *styling*, not typesetting: the span is set apart and given a
+		* monospace face so the expression is legible. Real math rendering needs a
+		* typesetter (KaTeX or MathML), which is a later decision, not a silent gap.
+		*/
+		const INLINE_PATTERN = /(\*\*[^*]+\*\*|`[^`]+`|\\\([^)]*\\\))/g;
+		function inline(text) {
+			return text.split(INLINE_PATTERN).filter(Boolean).map((part, index) => {
+				if (part.startsWith("**") && part.endsWith("**")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: part.slice(2, -2) }, index);
+				if (part.startsWith("`") && part.endsWith("`")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: part.slice(1, -1) }, index);
+				if (part.startsWith("\\(") && part.endsWith("\\)")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dt-math",
+					children: part.slice(2, -2)
+				}, index);
+				return part;
+			});
+		}
+		/**
+		* Classify one line.
+		*
+		* The teaching brain writes ordinary light markdown — `###` headings, `-`
+		* bullets, `1.` steps — because that is how a person writes an explanation.
+		* Printing the markers verbatim is what makes a lesson look like a Markdown
+		* renderer instead of a lesson, so they are recognised here.
+		*
+		* This adds **no block type**: it is how the existing text and check blocks are
+		* displayed, which is the part of the surface the learner actually reads.
+		*/
+		function classify(line) {
+			const heading = /^(#{2,3})\s+(.*)$/.exec(line);
+			if (heading) return {
+				kind: "heading",
+				level: heading[1] === "##" ? 2 : 3,
+				text: heading[2]
+			};
+			const trimmed = line.trim();
+			if (trimmed.startsWith("\\[") && trimmed.endsWith("\\]")) return {
+				kind: "math",
+				text: trimmed.slice(2, -2).trim()
+			};
+			const bullet = /^\s*[-*•]\s+(.*)$/.exec(line);
+			if (bullet) return {
+				kind: "bullet",
+				text: bullet[1]
+			};
+			const ordered = /^\s*(\d+)[.)]\s+(.*)$/.exec(line);
+			if (ordered) return {
+				kind: "ordered",
+				marker: ordered[1],
+				text: ordered[2]
+			};
+			return {
+				kind: "text",
+				text: line
+			};
+		}
+		/** Group consecutive lines into runs that render as one element. */
+		function toRuns(md) {
+			const runs = [];
+			let current = [];
+			let currentKind = null;
+			const flush = () => {
+				if (current.length > 0) runs.push(current);
+				current = [];
+				currentKind = null;
+			};
+			for (const raw of md.split(/\n/)) {
+				const line = raw.trimEnd();
+				if (line.trim().length === 0) {
+					flush();
+					continue;
+				}
+				const parsed = classify(line);
+				if (!(parsed.kind === "text" ? currentKind === "text" : (parsed.kind === "bullet" || parsed.kind === "ordered") && currentKind === parsed.kind)) flush();
+				current.push(parsed);
+				currentKind = parsed.kind;
+			}
+			flush();
+			return runs;
+		}
+		/**
+		* Render a text body as a lesson rather than as source.
+		*
+		* Blank-line separated runs become paragraphs, `###` becomes a real heading,
+		* `-` and `1.` become real lists, and `\[...\]` becomes a display-math panel.
+		*/
+		function Paragraphs({ md }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: toRuns(md).map((run, index) => {
+				const first = run[0];
+				if (first.kind === "heading") {
+					const Tag = first.level === 2 ? "h3" : "h4";
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+						className: `dt-md-h${first.level}`,
+						children: inline(first.text)
+					}, index);
+				}
+				if (first.kind === "math") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dt-math-block",
+					children: first.text
+				}, index);
+				if (first.kind === "bullet") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					className: "dt-md-ul",
+					children: run.map((line, inner) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: inline(line.text) }, inner))
+				}, index);
+				if (first.kind === "ordered") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+					className: "dt-md-ol",
+					children: run.map((line, inner) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: inline(line.text) }, inner))
+				}, index);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dt-block-md",
+					children: inline(run.map((line) => line.text).join(" "))
+				}, index);
+			}) });
+		}
+		function TextBlockView({ block }) {
+			if (block.type !== "text") return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dt-block dt-block-text",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Paragraphs, { md: block.content.md })
+			});
+		}
+		function ExampleBlockView({ block }) {
+			if (block.type !== "example") return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-block dt-block-example",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dt-block-label",
+						children: "Worked example"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", { children: block.content.title }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", { children: block.content.steps.map((step, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: inline(step) }, index)) }),
+					block.content.takeaway !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dt-takeaway",
+						children: inline(block.content.takeaway)
+					})
+				]
+			});
+		}
+		function DiagramBlockView({ block }) {
+			if (block.type !== "diagram") return null;
+			const isMermaid = block.content.format === "mermaid";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-block dt-block-diagram",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dt-block-label",
+						children: "Diagram"
+					}),
+					isMermaid && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "dt-caption",
+						children: [
+							"Source shown as text — this build ships no ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: "mermaid" }),
+							" renderer."
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+						className: "dt-pre",
+						children: block.content.spec
+					}),
+					block.content.caption !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dt-caption",
+						children: block.content.caption
+					})
+				]
+			});
+		}
+		/**
+		* The check.
+		*
+		* Rendered as an invitation rather than a field: this surface has no input box,
+		* so the block has to make it obvious that the next move is the learner's and
+		* that it happens in the chat. The wording says so instead of leaving a dead
+		* question sitting in a panel.
+		*/
+		function CheckBlockView({ block }) {
+			if (block.type !== "check") return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-block dt-block-check",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dt-check-head",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dt-check-tag",
+							children: "Your turn"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dt-check-where",
+							children: "answer in the chat →"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dt-check-body",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Paragraphs, { md: block.content.prompt })
+					}),
+					block.content.hint !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "dt-check-hint",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Hint" }), inline(block.content.hint)]
+					})
+				]
+			});
+		}
+		/**
+		* The registry. Adding a block type means adding one entry here.
+		*
+		* Deliberately a plain object rather than a switch: a `Map`/record makes the
+		* extension point visible and keeps the fallback impossible to forget.
+		*/
+		const BLOCK_RENDERERS = {
+			text: TextBlockView,
+			example: ExampleBlockView,
+			diagram: DiagramBlockView,
+			check: CheckBlockView
+		};
+		/** Shown for a block type this build does not know. Never throws. */
+		function UnknownBlockView({ block }) {
+			const type = block.type;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-block dt-block-unknown",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: typeof type === "string" ? type : "unknown" }), " block — this build has no renderer for it. Update the plugin to see it."]
+			});
+		}
+		/**
+		* Render one block, degrading for anything unrecognised.
+		*
+		* @param props.block - the block to render.
+		* @returns the rendered block.
+		*/
+		function BlockView({ block }) {
+			const renderer = BLOCK_RENDERERS[block.type] ?? UnknownBlockView;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-block-type": block.type,
+				children: renderer({ block })
+			});
+		}
+		/**
+		* Render a whole lesson's blocks in order.
+		*
+		* @param props.blocks - the blocks to render.
+		* @returns the rendered list.
+		*/
+		function LessonBody({ blocks }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: blocks.map((block) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BlockView, { block }, block.id)) });
+		}
+		/**
+		* The recommendation card.
+		*
+		* The learner reads *why* before they move, and nothing moves until they press
+		* the button — the tutor decides, the runtime stores, the learner chooses. That
+		* ordering is the whole point of the card existing rather than an automatic
+		* jump.
+		*
+		* Wording follows the decision: a move names where it goes, a stay says so
+		* plainly. No percentage, no score, no completion estimate — how far along the
+		* learner is lives in the node's state and evidence, and nowhere else.
+		*/
+		function NextStepCard({ nextStep, onContinue, busy }) {
+			const moves = nextStep.targetNodeId !== null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-next",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "dt-next-label",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dt-next-arrow",
+							"aria-hidden": "true",
+							children: "↓"
+						}), "Next best step"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "dt-next-from",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-next-tick",
+								"aria-hidden": "true",
+								children: "✓"
+							}),
+							nextStep.fromNodeTitle,
+							" — ",
+							nextStep.action.replace(/-/g, " ")
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dt-next-target",
+						children: moves ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["Next: ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: nextStep.targetNodeTitle })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["Next: ", /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("b", { children: ["Stay on ", nextStep.fromNodeTitle] })] })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "dt-next-why",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-next-why-label",
+								children: "Why:"
+							}),
+							" ",
+							nextStep.reason
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dt-primary",
+						onClick: onContinue,
+						disabled: busy === true,
+						children: busy === true ? "Starting…" : moves ? "Continue learning" : "Continue"
+					})
+				]
+			});
+		}
+		/**
+		* The handoff progress line.
+		*
+		* A model turn is not instant, and a silent wait is indistinguishable from a
+		* broken button — so the wait is narrated: which stage it is in, how long it
+		* has been, and how many attempts. When it goes quiet the learner gets a retry
+		* rather than a dead end, and retrying **never touches the focus**: the record
+		* is a statement about the wait, never about where they are.
+		*
+		* The elapsed time is shown because it is honest. A tutor that takes ninety
+		* seconds should look like a tutor that takes ninety seconds, not like a hang.
+		*/
+		function HandoffLine({ handoff, onRetry }) {
+			const retryable = handoff.phase === "failed" || handoff.phase === "stalled";
+			const seconds = Math.round(handoff.elapsedMs / 1e3);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-handoff",
+				"data-phase": handoff.phase,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dt-handoff-dot",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dt-handoff-label",
+						children: handoff.label
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "dt-handoff-time",
+						children: [seconds, "s"]
+					}),
+					handoff.attempts > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "dt-handoff-try",
+						children: ["attempt ", handoff.attempts]
+					}),
+					handoff.detail !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dt-handoff-detail",
+						children: handoff.detail
+					}),
+					retryable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dt-handoff-retry",
+						onClick: onRetry,
+						children: "Ask again"
+					})
+				]
+			});
+		}
+		/**
+		* The learner's controls over their own data.
+		*
+		* Both promises this project makes about state are kept here: that it is
+		* **visible and exportable**, and that it can be **deleted**. An export that
+		* only existed as an API route would not be a promise kept, and a delete that
+		* happened on one click would be a trap — so the second click is the
+		* confirmation, inline, with no dialog to dismiss by reflex.
+		*/
+		function DataFooter({ onExport, onReset, busy }) {
+			const [confirming, setConfirming] = (0, react.useState)(false);
+			if (confirming) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-data dt-data-confirm",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dt-data-ask",
+					children: "Delete your goal, your map, every lesson and all the evidence behind it? This cannot be undone."
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dt-data-row",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dt-danger",
+						onClick: () => {
+							setConfirming(false);
+							onReset();
+						},
+						disabled: busy === true,
+						children: busy === true ? "Deleting…" : "Yes, delete everything"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dt-quiet",
+						onClick: () => setConfirming(false),
+						children: "Cancel"
+					})]
+				})]
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-data",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dt-quiet",
+						onClick: onExport,
+						disabled: busy === true,
+						children: "Export my data"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dt-quiet",
+						onClick: () => setConfirming(true),
+						disabled: busy === true,
+						children: "Delete everything"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dt-data-note",
+						children: "Stored on this machine only. Nothing is sent anywhere."
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/model.ts
+		/**
+		* Build the map tree from a flat node list.
+		*
+		* Ordering is insertion order within each level, which is the order the nodes
+		* were diagnosed in — the map reads as a history, not as a syllabus.
+		*
+		* Nodes whose parent is missing are promoted to roots rather than dropped: a
+		* dangling reference is a data problem, and silently hiding the node would be
+		* worse than showing it at the top level.
+		*
+		* @param nodes - the flat node views.
+		* @returns the roots, each with its subtree.
+		*/
+		function buildMapTree(nodes) {
+			const byId = /* @__PURE__ */ new Map();
+			for (const node of nodes) byId.set(node.id, node);
+			const childrenOf = /* @__PURE__ */ new Map();
+			for (const node of nodes) {
+				const parent = node.parentId !== null && byId.has(node.parentId) ? node.parentId : null;
+				const bucket = childrenOf.get(parent) ?? [];
+				bucket.push(node);
+				childrenOf.set(parent, bucket);
+			}
+			const rendered = /* @__PURE__ */ new Set();
+			const build = (parentId, depth, ancestors) => (childrenOf.get(parentId) ?? []).filter((node) => !ancestors.has(node.id)).map((node) => {
+				rendered.add(node.id);
+				const nextAncestors = new Set(ancestors).add(node.id);
+				return {
+					node,
+					depth,
+					children: build(node.id, depth + 1, nextAncestors)
+				};
+			});
+			const roots = build(null, 0, /* @__PURE__ */ new Set());
+			for (const node of nodes) {
+				if (rendered.has(node.id)) continue;
+				rendered.add(node.id);
+				roots.push({
+					node,
+					depth: 0,
+					children: build(node.id, 1, /* @__PURE__ */ new Set([node.id]))
+				});
+			}
+			return roots;
+		}
+		/**
+		* Flatten a tree back into render order, carrying depth.
+		*
+		* @param roots - the tree.
+		* @returns every node in top-down, left-to-right order.
+		*/
+		function flattenTree(roots) {
+			const out = [];
+			const walk = (nodes) => {
+				for (const entry of nodes) {
+					out.push(entry);
+					walk(entry.children);
+				}
+			};
+			walk(roots);
+			return out;
+		}
+		/** Human label for a relation, in the map's own terms. */
+		function relationLabel(relation) {
+			switch (relation) {
+				case "goal": return "goal";
+				case "part-of": return "part of";
+				case "prerequisite": return "prerequisite";
+				case "related": return "related";
+				default: return relation;
+			}
+		}
+		/**
+		* Only `confirmed` reads as a filled mark; every other state is an outline.
+		*
+		* There are deliberately no numeric or graded progressions here — the seven
+		* words are the entire vocabulary.
+		*/
+		function isFilledState(state) {
+			return state === "confirmed";
+		}
+		/** Short, non-learner-facing explanation of what a state means, for the detail pane. */
+		function stateExplanation(state) {
+			switch (state) {
+				case "unconfirmed": return "No evidence yet — nothing has been observed for this node.";
+				case "explained": return "It has been explained, but that alone does not prove understanding.";
+				case "practiced": return "Something was attempted at least once.";
+				case "checked": return "A check or near-transfer question was asked.";
+				case "weak": return "Partial or unstable — worth repairing before moving on.";
+				case "blocked": return "Cannot proceed: something here is missing or misunderstood.";
+				case "confirmed": return "Supported by a check or transfer observation. Re-checked, not assumed.";
+				default: return "Unknown state.";
+			}
+		}
+		//#endregion
+		//#region src/client/api.ts
+		/** Route prefix owned by this plugin; must match the host's `API_PREFIX`. */
+		const BASE = "/diagnostic-tutor/api";
+		/** Requests are local; anything slower than this is a problem worth surfacing. */
+		const TIMEOUT_MS = 8e3;
+		async function request(path, init) {
+			const controller = new AbortController();
+			const timer = setTimeout(() => controller.abort(), TIMEOUT_MS);
+			try {
+				const response = await fetch(`${BASE}${path}`, {
+					...init,
+					signal: controller.signal,
+					headers: {
+						accept: "application/json",
+						...init?.headers ?? {}
+					}
+				});
+				let body;
+				try {
+					body = await response.json();
+				} catch {
+					throw new Error(`unreadable response (HTTP ${response.status})`);
+				}
+				const envelope = body;
+				if (!response.ok || envelope.ok === false) throw new Error(envelope.error?.message ?? envelope.error?.code ?? `HTTP ${response.status}`);
+				return body;
+			} finally {
+				clearTimeout(timer);
+			}
+		}
+		/** The current course and its whole diagnosis map. */
+		function fetchOverview() {
+			return request("/overview");
+		}
+		/** One node, its evidence, its parent and its children. */
+		function fetchNode(nodeId) {
+			return request(`/node?id=${encodeURIComponent(nodeId)}`);
+		}
+		/** The lesson the tutor has written for a node; `lesson: null` until it has. */
+		function fetchLesson(nodeId) {
+			return request(`/lesson?nodeId=${encodeURIComponent(nodeId)}`);
+		}
+		/**
+		* Save everything the learner owns to a file.
+		*
+		* Deliberately a full download rather than a call that returns data: the point
+		* of an export is that the learner ends up holding it, and a file they can move,
+		* read and keep is the only version of that which survives this app.
+		*
+		* @returns the filename the browser was asked to save.
+		*/
+		async function downloadExport() {
+			const response = await fetch(`${BASE}/export`, { headers: { accept: "application/json" } });
+			if (!response.ok) throw new Error(`export failed (HTTP ${response.status})`);
+			const text = await response.text();
+			const name = `dsh-diagnostic-tutor-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.json`;
+			const url = URL.createObjectURL(new Blob([text], { type: "application/json" }));
+			try {
+				const anchor = document.createElement("a");
+				anchor.href = url;
+				anchor.download = name;
+				document.body.appendChild(anchor);
+				anchor.click();
+				anchor.remove();
+			} finally {
+				URL.revokeObjectURL(url);
+			}
+			return name;
+		}
+		/**
+		* Delete everything and return to first run.
+		*
+		* @returns nothing; the caller re-reads the overview.
+		*/
+		function resetState() {
+			return request("/reset", { method: "POST" });
+		}
+		/**
+		* Tell the host a surface has rendered the lesson.
+		*
+		* The last leg of the timing chain: everything before it is measured on the
+		* host, and this is the only part only the browser can answer.
+		*/
+		function reportObserved(nodeId) {
+			return request("/handoff/observed", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({ nodeId })
+			});
+		}
+		/**
+		* What the Start learning button does.
+		*
+		* Records the focus and asks the host to wake the tutor. `sessionId` is the
+		* session the panel is showing; without it the focus is still recorded and the
+		* response says the tutor was not reached.
+		*/
+		function startFocus(nodeId, sessionId) {
+			return request("/focus", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(sessionId === void 0 ? { nodeId } : {
+					nodeId,
+					sessionId
+				})
+			});
+		}
+		//#endregion
+		//#region src/client/use-learning.ts
+		/**
+		* Shared learning state for both surfaces.
+		*
+		* The plugin renders the same runtime in two places — the full-page panel and
+		* the docked right-sidebar tab — and both need identical behaviour: select a
+		* node, start learning, follow the tutor. Duplicating that would mean two
+		* implementations of the focus hand-off and two copies of the polling loop,
+		* which is exactly how two surfaces drift apart.
+		*
+		* So the behaviour lives here once, and the components are presentation.
+		*/
+		const defaultClient = {
+			fetchOverview,
+			fetchNode,
+			fetchLesson,
+			startFocus,
+			reportObserved,
+			downloadExport,
+			resetState
+		};
+		/**
+		* How often the surfaces re-read state while a focus is active.
+		*
+		* Polling rather than a push channel: DSH exposes no generic host→client push
+		* for third-party plugins, and the published UI plugins poll for the same
+		* reason. The interval only runs while something is being learned, so an idle
+		* surface makes no requests at all.
+		*/
+		const POLL_INTERVAL_MS = 2e3;
+		/**
+		* Read and follow the learning runtime.
+		*
+		* @param options.client - the API to talk to.
+		* @param options.sessionId - the session the tutor should be woken in.
+		* @param options.initialOverview - pre-supplied state, so the preview and tests
+		*   skip the first fetch.
+		* @returns the state and the two actions the surfaces offer.
+		*/
+		function useLearning(options) {
+			const { client, sessionId, initialOverview, onStarted } = options;
+			const [overview, setOverview] = (0, react.useState)(initialOverview ?? null);
+			const [selectedId, setSelectedId] = (0, react.useState)(null);
+			const [detail, setDetail] = (0, react.useState)(null);
+			const [lesson, setLesson] = (0, react.useState)(null);
+			const [note, setNote] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [starting, setStarting] = (0, react.useState)(false);
+			const [loading, setLoading] = (0, react.useState)(initialOverview === void 0);
+			const focus = overview?.focus ?? null;
+			const liveNodeId = focus?.nodeId ?? null ?? selectedId;
+			const liveRef = (0, react.useRef)(liveNodeId);
+			liveRef.current = liveNodeId;
+			/** The node whose lesson has already been reported as seen. */
+			const observedRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				if (initialOverview !== void 0) return;
+				let live = true;
+				client.fetchOverview().then((data) => {
+					if (live) setOverview(data);
+				}).catch((cause) => {
+					if (live) setError(cause.message);
+				}).finally(() => {
+					if (live) setLoading(false);
+				});
+				return () => {
+					live = false;
+				};
+			}, [client, initialOverview]);
+			const select = (0, react.useCallback)((nodeId) => {
+				setSelectedId(nodeId);
+				setError(null);
+				client.fetchNode(nodeId).then(setDetail).catch((cause) => setError(cause.message));
+			}, [client]);
+			const beginFocus = (0, react.useCallback)((nodeId) => {
+				setStarting(true);
+				setError(null);
+				setNote(null);
+				client.startFocus(nodeId, sessionId).then(async (result) => {
+					setNote(result.prompted ? "Started. The tutor is teaching this node in the chat — the surface updates as it writes." : `Focus recorded, but the tutor was not woken (${result.promptReason ?? "unknown reason"}). Say anything in the chat to continue.`);
+					const [nextOverview, nextLesson] = await Promise.all([client.fetchOverview(), client.fetchLesson(result.focus.nodeId)]);
+					setOverview(nextOverview);
+					setLesson(nextLesson.lesson);
+					onStarted?.();
+				}).catch((cause) => setError(cause.message)).finally(() => setStarting(false));
+			}, [
+				client,
+				sessionId,
+				onStarted
+			]);
+			const start = (0, react.useCallback)(() => {
+				if (selectedId === null) return;
+				beginFocus(selectedId);
+			}, [beginFocus, selectedId]);
+			const [dataNote, setDataNote] = (0, react.useState)(null);
+			/** Re-read everything, the same way the initial load does. */
+			const refresh = (0, react.useCallback)(() => client.fetchOverview().then((data) => {
+				setOverview(data);
+				setError(null);
+				return data;
+			}).catch((cause) => {
+				setError(cause.message);
+				return null;
+			}), [client]);
+			const exportData = (0, react.useCallback)(() => {
+				setDataNote(null);
+				client.downloadExport?.().then((name) => setDataNote(`Saved ${name}.`)).catch((cause) => setDataNote(`Could not export: ${cause.message}`));
+			}, [client]);
+			const resetAll = (0, react.useCallback)(() => {
+				setDataNote(null);
+				setDetail(null);
+				setLesson(null);
+				client.resetState?.().then(refresh).then(() => setDataNote("Everything was deleted.")).catch((cause) => setDataNote(`Could not delete: ${cause.message}`));
+			}, [client, refresh]);
+			(0, react.useEffect)(() => {
+				if (focus === null) return;
+				const nodeId = focus.nodeId;
+				let live = true;
+				const tick = async () => {
+					try {
+						const [nextOverview, nextLesson] = await Promise.all([client.fetchOverview(), client.fetchLesson(nodeId)]);
+						if (!live) return;
+						setOverview(nextOverview);
+						setLesson(nextLesson.lesson);
+						const watched = liveRef.current;
+						if (watched !== null) setDetail(await client.fetchNode(watched));
+						if (nextLesson.lesson !== null && observedRef.current !== nodeId) {
+							observedRef.current = nodeId;
+							client.reportObserved?.(nodeId)?.catch(() => {});
+						}
+					} catch {}
+				};
+				tick();
+				const timer = setInterval(() => void tick(), POLL_INTERVAL_MS);
+				return () => {
+					live = false;
+					clearInterval(timer);
+				};
+			}, [client, focus]);
+			return {
+				overview,
+				focus,
+				nextStep: overview?.nextStep ?? null,
+				handoff: overview?.handoff ?? null,
+				teachingBrain: overview?.teachingBrain ?? null,
+				selectedId,
+				detail,
+				lesson,
+				note,
+				error,
+				starting,
+				loading,
+				select,
+				start,
+				continueTo: beginFocus,
+				exportData,
+				resetAll,
+				dataNote,
+				dismissLesson: (0, react.useCallback)(() => setLesson(null), [])
+			};
+		}
+		//#endregion
+		//#region src/client/app.tsx
+		/** The status pill plus its mark. Never a number. */
+		function StateMark({ state }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `dt-dot dt-state-${state}`,
+				"data-filled": isFilledState(state)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `dt-state dt-state-${state}`,
+				children: state
+			})] });
+		}
+		/**
+		* The panel.
+		*
+		* @param props - injectable client, optional pre-supplied overview, session id.
+		* @returns the three-pane learning surface.
+		*/
+		function LearningPanel({ client, initialOverview, sessionId, onOpenChat, onFocusStarted }) {
+			const state = useLearning({
+				client: client ?? defaultClient,
+				sessionId,
+				initialOverview,
+				onStarted: onFocusStarted
+			});
+			const { overview, focus, nextStep, handoff, teachingBrain, dataNote, selectedId, detail, lesson, note, error, starting, loading } = state;
+			const rows = flattenTree(buildMapTree(overview?.nodes ?? []));
+			const confirmed = (overview?.nodes ?? []).filter((node) => node.state === "confirmed").length;
+			if (overview?.course == null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dt-root dt-root-welcome",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dt-welcome",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-welcome-eyebrow",
+							children: "Universal Diagnostic Tutor"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+							className: "dt-welcome-title",
+							children: "What do you want to learn?"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-welcome-body",
+							children: "Works with the Universal Diagnostic Tutor skill. Start by telling the tutor what you want to learn — in your own words, in the chat. Then this page fills in: a map of what you actually know, the lesson, and the evidence behind every status."
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dt-welcome-sample",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-welcome-sample-label",
+								children: "Try"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-welcome-sample-text",
+								children: "I want to learn machine learning. I know some Python, but my math is weak."
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-welcome-note",
+							children: "If tutoring doesn't start, make sure the UDT skill is available to your active DSH agent."
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-welcome-note",
+							children: "No account, no scores, no streak. Your goal, your map and the evidence behind it stay on this machine, and are yours to keep or delete."
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataFooter, {
+							onExport: state.exportData,
+							onReset: state.resetAll
+						}),
+						teachingBrain === false && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "dt-notice",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: "The Universal Diagnostic Tutor skill was not found." }), " This panel still records and shows your learning state, but no lesson will be written until the skill is available to your active DSH agent."]
+						})
+					]
+				})
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-root",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dt-pane",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-eyebrow",
+								children: "Current course"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+								className: "dt-course-title",
+								children: overview?.course?.title ?? "No goal yet"
+							}),
+							overview?.course != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "dt-goal",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: "Goal:" }),
+									" ",
+									overview.course.goal
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "dt-section-title",
+								children: ["Diagnosis map ", /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [rows.length, " nodes"] })]
+							}),
+							rows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-empty",
+								children: "Nothing on the map yet. State a goal in the chat and the runtime will record it."
+							}),
+							rows.map(({ node, depth }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: "dt-node",
+								style: { marginLeft: `${depth * 12}px` },
+								"aria-current": node.id === selectedId,
+								"data-focused": node.id === focus?.nodeId,
+								onClick: () => state.select(node.id),
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `dt-dot dt-state-${node.state}`,
+										"data-filled": isFilledState(node.state)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dt-node-title",
+										children: [node.title, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "dt-node-rel",
+											children: [
+												relationLabel(node.relation),
+												" · ",
+												node.evidenceCount,
+												" evidence"
+											]
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `dt-state dt-state-${node.state}`,
+										children: node.state
+									})
+								]
+							}, node.id)),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "dt-caption",
+								children: [
+									confirmed,
+									" of ",
+									rows.length,
+									" confirmed by evidence."
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dt-pane dt-detail",
+						children: detail === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-empty",
+							children: loading ? "Loading…" : "Pick a node on the map to see why it is there."
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-eyebrow",
+								children: "Selected node"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: detail.node.title }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dt-meta",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateMark, { state: detail.node.state }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dt-chip",
+										children: relationLabel(detail.node.relation)
+									}),
+									detail.parent !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dt-chip",
+										children: ["parent: ", detail.parent.title]
+									}),
+									detail.children.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dt-chip",
+										children: [detail.children.length, " children"]
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-why",
+								children: stateExplanation(detail.node.state)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "dt-section-title",
+								children: ["Evidence ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: detail.node.evidence.length })]
+							}),
+							detail.node.evidence.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-empty",
+								children: "Nothing recorded yet."
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+								className: "dt-evidence",
+								children: detail.node.evidence.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "kind",
+										children: [entry.kind, entry.readiness !== void 0 && ` · ${entry.readiness}`]
+									}),
+									entry.note !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: entry.note }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "when",
+										children: entry.at
+									})
+								] }, index))
+							}),
+							note !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-caption",
+								children: note
+							}),
+							error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-empty",
+								children: error
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dt-primary",
+								onClick: state.start,
+								disabled: starting,
+								children: starting ? "Starting…" : focus !== null && focus.nodeId === selectedId ? "Learning in progress" : "Start learning"
+							})
+						] })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dt-pane",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dt-lesson-head",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "dt-eyebrow",
+									children: "Learning surface"
+								}), lesson !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dt-origin",
+									children: lesson.origin
+								})]
+							}),
+							lesson === null ? focus !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-empty",
+								children: "The tutor is preparing this node…"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-caption",
+								children: "The teaching appears here as it is written, while the conversation continues in the chat."
+							})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "dt-empty",
+								children: [
+									"Choose a node and press ",
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: "Start learning" }),
+									". The teaching appears here, and the conversation stays in the chat."
+								]
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: lesson.title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: { marginTop: 14 },
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LessonBody, { blocks: lesson.blocks })
+							})] }),
+							handoff !== null && lesson === null && focus !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HandoffLine, {
+								handoff,
+								onRetry: () => state.continueTo(handoff.targetNodeId)
+							}),
+							nextStep !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NextStepCard, {
+								nextStep,
+								busy: starting,
+								onContinue: () => state.continueTo(nextStep.targetNodeId ?? nextStep.fromNodeId)
+							}),
+							onOpenChat !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dt-primary",
+								onClick: onOpenChat,
+								children: "Answer in the chat"
+							}),
+							lesson !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dt-secondary",
+								onClick: state.dismissLesson,
+								children: "Back to the node"
+							}),
+							dataNote !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-caption",
+								children: dataNote
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataFooter, {
+								onExport: state.exportData,
+								onReset: state.resetAll
+							})
+						]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/tab.tsx
+		/**
+		* The docked Learning tab.
+		*
+		* This is the surface that makes the loop usable. The full-page panel occupies
+		* the main column, which is also where the conversation lives — so with only
+		* that panel, answering a check means leaving the lesson. The right sidebar is
+		* a *separate column*, so the same runtime sits beside the chat and the learner
+		* never has to switch.
+		*
+		* Layout is deliberately narrow-first and ordered by what the learner needs
+		* next: **the lesson, then the recommendation, then the map, then the
+		* evidence.** The lesson leads because it is the teaching; the map and the
+		* evidence are reference material the learner consults, not the main event.
+		*
+		* It runs on the same `useLearning` state as the full panel, so the two cannot
+		* disagree about what is focused or what the tutor wrote.
+		*/
+		/** The tab chip's text. */
+		function LearningTabTitle() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: "Learning" });
+		}
+		function CompactMap({ nodes, selectedId, focusNodeId, onSelect }) {
+			const rows = (0, react.useMemo)(() => flattenTree(buildMapTree(nodes)), [nodes]);
+			const confirmed = nodes.filter((node) => node.state === "confirmed").length;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "dt-tab-section",
+					children: ["Diagnosis map ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: nodes.length })]
+				}),
+				rows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dt-empty",
+					children: "No map yet — state a goal in the chat."
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dt-tree",
+					children: rows.map(({ node, depth }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "dt-tab-node",
+						style: { paddingLeft: `${6 + depth * 14}px` },
+						"data-depth": depth > 0 ? Math.min(depth, 3) : void 0,
+						"data-attention": node.state === "blocked" || node.state === "weak" ? "true" : void 0,
+						"aria-current": node.id === selectedId,
+						"data-focused": node.id === focusNodeId,
+						onClick: () => onSelect(node.id),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `dt-dot dt-state-${node.state}`,
+								"data-filled": node.state === "confirmed"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-tab-node-title",
+								children: node.title
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `dt-tab-state dt-state-${node.state}`,
+								children: node.state
+							})
+						]
+					}, node.id))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "dt-caption",
+					children: [
+						confirmed,
+						" of ",
+						nodes.length,
+						" confirmed by evidence."
+					]
+				})
+			] });
+		}
+		/**
+		* The docked learning surface.
+		*
+		* @param props - injectable client and the session the tab belongs to.
+		* @returns the stacked node / map / lesson column.
+		*/
+		function LearningTab({ client, sessionId, initialOverview }) {
+			const state = useLearning({
+				client: client ?? defaultClient,
+				sessionId,
+				initialOverview
+			});
+			const { overview, focus, nextStep, handoff, teachingBrain, dataNote, selectedId, detail, lesson, note, error, starting, loading, select } = state;
+			(0, react.useEffect)(() => {
+				if (selectedId !== null) return;
+				const first = overview?.nodes?.[0]?.id;
+				if (first !== void 0) select(focus?.nodeId ?? first);
+			}, [
+				overview,
+				focus,
+				selectedId,
+				select
+			]);
+			const shownId = focus?.nodeId ?? selectedId;
+			const hasCourse = overview?.course != null;
+			const rows = overview?.nodes ?? [];
+			if (!hasCourse) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dt-tab",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dt-welcome",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-welcome-eyebrow",
+							children: "Universal Diagnostic Tutor"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+							className: "dt-welcome-title",
+							children: "What do you want to learn?"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-welcome-body",
+							children: "Works with the Universal Diagnostic Tutor skill. Start by telling the tutor what you want to learn — in your own words, in the chat."
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dt-welcome-sample",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-welcome-sample-label",
+								children: "Try"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-welcome-sample-text",
+								children: "I want to learn machine learning. I know some Python, but my math is weak."
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-welcome-note",
+							children: "If tutoring doesn't start, make sure the UDT skill is available to your active DSH agent."
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-welcome-note",
+							children: "No account, no scores, no streak. Your goal, your map and the evidence behind it stay on this machine, and are yours to keep or delete."
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataFooter, {
+							onExport: state.exportData,
+							onReset: state.resetAll
+						}),
+						teachingBrain === false && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "dt-notice",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: "The Universal Diagnostic Tutor skill was not found." }), " This panel still records and shows your learning state, but no lesson will be written until the skill is available to your active DSH agent."]
+						})
+					]
+				})
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dt-tab",
+				children: [
+					detail === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+						className: "dt-now",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-now-eyebrow",
+							children: "Now learning"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dt-empty",
+							children: loading ? "Loading…" : "Pick a node on the map below to begin."
+						})]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+						className: "dt-now",
+						"data-state": detail.node.state,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-now-eyebrow",
+								children: "Now learning"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+								className: "dt-now-title",
+								children: detail.node.title
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dt-now-meta",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: `dt-tab-state dt-state-${detail.node.state}`,
+										children: detail.node.state
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dt-now-rel",
+										children: relationLabel(detail.node.relation)
+									}),
+									detail.parent !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dt-now-rel",
+										children: ["in ", detail.parent.title]
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-now-note",
+								children: stateExplanation(detail.node.state)
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dt-primary dt-now-action",
+								onClick: state.start,
+								disabled: starting || shownId === null,
+								children: starting ? "Starting…" : focus !== null && focus.nodeId === shownId ? "Keep going" : "Start learning"
+							}),
+							note !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-caption",
+								children: note
+							}),
+							error !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-empty",
+								children: error
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: "dt-lesson",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-tab-section",
+								children: "Learning surface"
+							}),
+							handoff !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HandoffLine, {
+								handoff,
+								onRetry: () => state.continueTo(handoff.targetNodeId)
+							}),
+							lesson === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dt-empty",
+								children: focus !== null ? "The tutor is preparing this node…" : "Press Start learning and the teaching appears here, while the chat stays open beside it."
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
+								className: "dt-lesson-body",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dt-lesson-head",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+										className: "dt-lesson-title",
+										children: lesson.title
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dt-origin",
+										children: lesson.origin
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LessonBody, { blocks: lesson.blocks })]
+							})
+						]
+					}),
+					nextStep !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NextStepCard, {
+						nextStep,
+						busy: starting,
+						onContinue: () => {
+							const target = nextStep.targetNodeId ?? nextStep.fromNodeId;
+							select(target);
+							state.continueTo(target);
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactMap, {
+						nodes: rows,
+						selectedId: shownId,
+						focusNodeId: focus?.nodeId ?? null,
+						onSelect: select
+					}),
+					dataNote !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dt-caption",
+						children: dataNote
+					}),
+					detail !== null && detail.node.evidence.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "dt-tab-section",
+						children: ["Evidence ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: detail.node.evidence.length })]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+						className: "dt-evidence",
+						children: detail.node.evidence.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-ev-kind",
+								children: entry.kind
+							}),
+							entry.readiness !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-ev-readiness",
+								children: entry.readiness.replace(/-/g, " ")
+							}),
+							entry.note !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dt-ev-note",
+								children: entry.note
+							})
+						] }, index))
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataFooter, {
+						onExport: state.exportData,
+						onReset: state.resetAll
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/styles.ts
+		/**
+		* The panel's stylesheet.
+		*
+		* Injected as a `<style data-plugin>` element rather than imported as CSS,
+		* because styles never travel through the client bundler: the module table
+		* serves one JavaScript file per plugin, so a separate CSS artifact has nowhere
+		* to live. This is what the published UI plugins do too.
+		*
+		* The web styling guide forbids Tailwind and component libraries here, and
+		* recommends the design system's semantic custom properties. Every one of those
+		* tokens is used with a fallback, so the same stylesheet renders correctly in
+		* the standalone preview where no DSH theme is present.
+		*/
+		/** Marker attribute so the sheet is injected exactly once, and is findable. */
+		const STYLE_ATTR = "data-diagnostic-tutor-style";
+		const CSS = `.dt-root {
+  --dt-bg: var(--dsw-alias-bg-base, #ffffff);
+  --dt-surface: var(--dsw-alias-bg-elevated, #f7f8fa);
+  --dt-sunken: var(--dsw-alias-bg-sunken, #f1f3f6);
+  --dt-border: var(--dsw-alias-border-secondary, #e3e6ea);
+  --dt-border-strong: var(--dsw-alias-border-primary, #cfd4dc);
+  --dt-text: var(--dsw-alias-label-primary, #1c1f23);
+  --dt-muted: var(--dsw-alias-label-secondary, #6b7280);
+  --dt-accent: var(--dsw-alias-brand-primary, #4f46e5);
+  --dt-good: #1f8b4c;
+  --dt-warn: #b7791f;
+  --dt-stop: #c0392b;
+  --dt-radius: 10px;
+
+  display: grid;
+  grid-template-columns: minmax(260px, 300px) minmax(280px, 1fr) minmax(320px, 1.15fr);
+  gap: 0;
+  height: 100%;
+  min-height: 0;
+  background: var(--dt-bg);
+  color: var(--dt-text);
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: left;
+}
+@media (max-width: 1080px) {
+  .dt-root { grid-template-columns: 1fr; height: auto; }
+}
+
+.dt-pane { min-width: 0; min-height: 0; overflow: auto; padding: 16px 18px 40px; }
+.dt-pane + .dt-pane { border-left: 1px solid var(--dt-border); }
+@media (max-width: 1080px) {
+  .dt-pane + .dt-pane { border-left: 0; border-top: 1px solid var(--dt-border); }
+}
+
+/* ---- shared type ------------------------------------------------------- */
+.dt-eyebrow,
+.dt-tab-section,
+.dt-now-eyebrow,
+.dt-welcome-eyebrow,
+.dt-block-label,
+.dt-next-label {
+  font-size: 10px;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  color: var(--dt-muted);
+  margin: 0;
+}
+
+.dt-course-title { font-size: 17px; font-weight: 640; margin: 0 0 6px; letter-spacing: -.01em; }
+.dt-goal {
+  margin: 0 0 16px; padding: 9px 11px; border-radius: var(--dt-radius);
+  background: var(--dt-surface); border: 1px solid var(--dt-border);
+  color: var(--dt-muted); font-size: 12px;
+}
+.dt-goal b { color: var(--dt-text); font-weight: 560; }
+
+.dt-section-title {
+  display: flex; align-items: baseline; gap: 8px;
+  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
+  color: var(--dt-muted); margin: 22px 0 8px;
+}
+.dt-section-title span { text-transform: none; letter-spacing: 0; font-size: 11px; }
+
+.dt-caption { color: var(--dt-muted); font-size: 11px; margin: 6px 0 0; }
+.dt-empty { color: var(--dt-muted); font-size: 12.5px; margin: 8px 0; }
+.dt-cta-hint { margin-top: 14px; line-height: 1.6; }
+
+/* ---- first use --------------------------------------------------------- */
+/* The full-page variant has no columns to fill, so the question centres. */
+.dt-root-welcome { grid-template-columns: 1fr; place-items: center; }
+.dt-root-welcome .dt-welcome { max-width: 520px; padding: 8px 24px; }
+.dt-welcome { padding: 28px 4px 8px; }
+.dt-welcome-eyebrow { color: var(--dt-accent); }
+.dt-welcome-title {
+  font-size: 21px; font-weight: 660; letter-spacing: -.015em;
+  margin: 8px 0 10px; line-height: 1.25;
+}
+.dt-welcome-body { margin: 0 0 18px; color: var(--dt-muted); font-size: 13px; line-height: 1.65; }
+.dt-welcome-sample {
+  border: 1px solid var(--dt-accent); border-radius: var(--dt-radius);
+  background: var(--dt-surface); padding: 11px 13px;
+}
+.dt-welcome-sample-label {
+  display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
+  color: var(--dt-accent); margin-bottom: 6px;
+}
+.dt-welcome-sample-text { font-size: 13px; line-height: 1.55; }
+.dt-welcome-note {
+  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--dt-border);
+  color: var(--dt-muted); font-size: 11.5px; line-height: 1.6;
+}
+
+/* Shown when nothing will teach: honest, actionable, and not a crash. */
+.dt-notice {
+  margin: 16px 0 0; padding: 11px 13px; border-radius: var(--dt-radius);
+  border: 1px solid var(--dt-warn);
+  background: color-mix(in srgb, var(--dt-warn) 8%, var(--dt-bg));
+  color: var(--dt-text); font-size: 12px; line-height: 1.6;
+}
+.dt-notice b { font-weight: 640; }
+
+/* ---- learner data controls --------------------------------------------- */
+/* Quiet by default: these are rights, not calls to action. They sit below the
+   teaching so they are findable without competing with it. */
+.dt-data {
+  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--dt-border);
+  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+}
+.dt-quiet {
+  padding: 4px 10px; border-radius: 7px; border: 1px solid var(--dt-border);
+  background: transparent; color: var(--dt-muted);
+  font: inherit; font-size: 11.5px; cursor: pointer;
+}
+.dt-quiet:hover { background: var(--dt-surface); color: var(--dt-text); }
+.dt-quiet:disabled { opacity: .5; cursor: default; }
+.dt-data-note { flex-basis: 100%; color: var(--dt-muted); font-size: 11px; line-height: 1.5; }
+.dt-data-confirm {
+  border-top-color: var(--dt-stop);
+  background: color-mix(in srgb, var(--dt-stop) 6%, transparent);
+  border-radius: var(--dt-radius); padding: 12px 13px; margin-top: 26px;
+}
+.dt-data-ask { margin: 0 0 10px; font-size: 12px; line-height: 1.6; }
+.dt-data-row { display: flex; gap: 8px; flex-wrap: wrap; }
+.dt-danger {
+  padding: 5px 12px; border-radius: 7px; border: 1px solid var(--dt-stop);
+  background: var(--dt-stop); color: #fff;
+  font: inherit; font-size: 11.5px; font-weight: 550; cursor: pointer;
+}
+.dt-danger:disabled { opacity: .55; cursor: default; }
+
+/* ---- now learning ------------------------------------------------------ */
+.dt-now {
+  padding: 13px 14px 14px;
+  border: 1px solid var(--dt-border);
+  border-radius: var(--dt-radius);
+  background: var(--dt-surface);
+}
+/* The state is the headline fact about the node, so it colours the card edge. */
+.dt-now[data-state="blocked"] { border-left: 3px solid var(--dt-stop); }
+.dt-now[data-state="weak"] { border-left: 3px solid var(--dt-warn); }
+.dt-now[data-state="confirmed"] { border-left: 3px solid var(--dt-good); }
+.dt-now[data-state="checked"] { border-left: 3px solid #0f8f8f; }
+.dt-now[data-state="practiced"] { border-left: 3px solid #5b53d6; }
+.dt-now[data-state="explained"] { border-left: 3px solid #2f6feb; }
+.dt-now[data-state="unconfirmed"] { border-left: 3px solid var(--dt-border-strong); }
+
+.dt-now-eyebrow { color: var(--dt-muted); }
+.dt-now-title {
+  font-size: 17px; font-weight: 650; letter-spacing: -.015em;
+  margin: 6px 0 8px; line-height: 1.28; overflow-wrap: anywhere;
+}
+.dt-now-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; }
+.dt-now-rel { color: var(--dt-muted); font-size: 11.5px; }
+.dt-now-note { margin: 0; color: var(--dt-muted); font-size: 12px; line-height: 1.6; }
+.dt-now-action { margin-top: 13px; width: 100%; }
+
+/* ---- diagnosis map ----------------------------------------------------- */
+.dt-tree { display: flex; flex-direction: column; gap: 1px; }
+.dt-tab-node {
+  display: grid; grid-template-columns: auto 1fr auto;
+  align-items: center; gap: 8px; width: 100%;
+  padding: 6px 8px; margin: 0; border-radius: 7px;
+  border: 1px solid transparent; border-left: 3px solid transparent;
+  background: transparent; color: inherit; font: inherit;
+  text-align: left; cursor: pointer; position: relative;
+}
+/* Depth as a drawn guide rather than only as indentation: a nested node should
+   read as nested at a glance. */
+.dt-tab-node[data-depth]::before {
+  content: ''; position: absolute; left: 4px; top: 0; bottom: 0;
+  width: 1px; background: var(--dt-border);
+}
+.dt-tab-node[data-depth="2"]::before { left: 18px; }
+.dt-tab-node[data-depth="3"]::before { left: 32px; }
+.dt-tab-node:hover { background: var(--dt-surface); }
+.dt-tab-node[aria-current="true"] {
+  background: var(--dt-surface); border-color: var(--dt-border-strong);
+  border-left-color: var(--dt-accent);
+}
+/* A blocker should be findable without reading every row. */
+.dt-tab-node[data-attention] { background: rgba(192, 57, 43, .05); }
+.dt-tab-node[data-attention]:hover { background: rgba(192, 57, 43, .09); }
+.dt-tab-node-title { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
+.dt-tab-node[data-depth="0"] > .dt-tab-node-title { font-weight: 600; }
+
+.dt-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  border: 1.5px solid currentColor; background: transparent; flex: none;
+}
+.dt-dot[data-filled="true"] { background: currentColor; }
+
+.dt-state-unconfirmed { color: #8b93a1; }
+.dt-state-explained   { color: #2f6feb; }
+.dt-state-practiced   { color: #5b53d6; }
+.dt-state-checked     { color: #0f8f8f; }
+.dt-state-weak        { color: var(--dt-warn); }
+.dt-state-blocked     { color: var(--dt-stop); }
+.dt-state-confirmed   { color: var(--dt-good); }
+
+/* A tinted chip scans far better than coloured words alone. */
+.dt-tab-state {
+  font-size: 10.5px; font-weight: 560; letter-spacing: .01em;
+  padding: 1px 7px; border-radius: 999px;
+  border: 1px solid currentColor; white-space: nowrap;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+.dt-state { font-style: normal; }
+
+/* ---- node detail (full panel) ------------------------------------------ */
+.dt-detail h2 { font-size: 16px; margin: 0 0 8px; font-weight: 650; letter-spacing: -.01em; }
+.dt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
+.dt-chip {
+  font-size: 11px; color: var(--dt-muted);
+  border: 1px solid var(--dt-border); border-radius: 999px; padding: 1px 8px;
+}
+.dt-why { margin: 0 0 14px; color: var(--dt-muted); font-size: 12.5px; line-height: 1.6; }
+.dt-node {
+  display: grid; grid-template-columns: auto 1fr auto;
+  align-items: center; gap: 8px; width: 100%;
+  padding: 6px 8px; margin: 1px 0; border-radius: 7px;
+  border: 1px solid transparent; background: transparent;
+  color: inherit; font: inherit; text-align: left; cursor: pointer;
+}
+.dt-node:hover { background: var(--dt-surface); }
+.dt-node[aria-current="true"] { background: var(--dt-surface); border-color: var(--dt-border-strong); }
+.dt-node-title { min-width: 0; overflow-wrap: anywhere; }
+.dt-node-rel { display: block; color: var(--dt-muted); font-size: 11px; font-weight: 400; }
+
+/* ---- evidence ---------------------------------------------------------- */
+/* Compact on purpose: this is a record, not a reading surface. One row per
+   entry, with the note clamped so a long one cannot bury the next. */
+.dt-evidence { list-style: none; margin: 0; padding: 0; }
+.dt-evidence li {
+  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px;
+  padding: 7px 0 7px 10px; border-left: 2px solid var(--dt-border);
+  font-size: 11.5px; line-height: 1.5;
+}
+.dt-evidence li + li { margin-top: 2px; }
+.dt-ev-kind {
+  font-weight: 600; font-size: 11px; color: var(--dt-text);
+  text-transform: capitalize;
+}
+.dt-ev-readiness {
+  font-size: 10.5px; color: var(--dt-muted);
+  border: 1px solid var(--dt-border); border-radius: 999px; padding: 0 6px;
+  justify-self: start;
+}
+.dt-ev-note {
+  grid-column: 1 / -1; color: var(--dt-muted);
+  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ---- buttons ----------------------------------------------------------- */
+.dt-primary {
+  padding: 7px 14px; border-radius: 8px; border: 1px solid transparent;
+  background: var(--dt-accent); color: #fff;
+  font: inherit; font-weight: 550; cursor: pointer;
+}
+.dt-primary:hover { filter: brightness(1.07); }
+.dt-primary:disabled { opacity: .5; cursor: default; filter: none; }
+.dt-secondary {
+  margin-top: 8px; padding: 6px 12px; border-radius: 8px;
+  border: 1px solid var(--dt-border); background: transparent;
+  color: inherit; font: inherit; font-size: 12px; cursor: pointer;
+}
+.dt-secondary:hover { background: var(--dt-surface); }
+
+/* ---- lesson ------------------------------------------------------------ */
+.dt-lesson { margin-top: 20px; }
+.dt-lesson-body {
+  border: 1px solid var(--dt-border); border-radius: var(--dt-radius);
+  background: var(--dt-bg); padding: 16px 16px 6px;
+}
+.dt-lesson-head {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
+  padding-bottom: 10px; margin-bottom: 14px;
+  border-bottom: 1px solid var(--dt-border);
+}
+.dt-lesson-title { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -.01em; line-height: 1.35; }
+.dt-tab-lesson-title { font-weight: 600; }
+.dt-origin {
+  flex: none; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
+  color: var(--dt-muted); border: 1px solid var(--dt-border);
+  border-radius: 999px; padding: 1px 7px;
+}
+
+/* ---- blocks ------------------------------------------------------------ */
+.dt-block { margin: 0 0 18px; }
+/* A readable measure: full-width prose in a docked panel is tiring. */
+.dt-block-md { margin: 0 0 11px; line-height: 1.66; max-width: 62ch; }
+.dt-block-md:last-child { margin-bottom: 0; }
+.dt-block-md strong { font-weight: 640; }
+
+/* Headings the teaching brain writes inline as ### become real headings. */
+.dt-md-h2 {
+  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
+  margin: 20px 0 9px; line-height: 1.35;
+}
+.dt-md-h2:first-child, .dt-md-h3:first-child { margin-top: 0; }
+.dt-md-h3 {
+  font-size: 13.5px; font-weight: 650; color: var(--dt-text);
+  margin: 18px 0 7px; line-height: 1.4;
+}
+.dt-md-ul, .dt-md-ol { margin: 0 0 12px; padding-left: 20px; max-width: 62ch; }
+.dt-md-ul li, .dt-md-ol li { margin-bottom: 5px; line-height: 1.6; }
+.dt-md-ul { list-style: none; padding-left: 4px; }
+.dt-md-ul li { position: relative; padding-left: 16px; }
+.dt-md-ul li::before {
+  content: ''; position: absolute; left: 3px; top: .62em;
+  width: 4px; height: 4px; border-radius: 50%; background: var(--dt-border-strong);
+}
+.dt-md-ol { list-style: decimal; }
+.dt-md-ol li::marker { color: var(--dt-muted); font-variant-numeric: tabular-nums; }
+
+.dt-block-label {
+  color: var(--dt-accent); margin-bottom: 7px;
+}
+
+/* Worked example: a distinct panel, because it is a different kind of reading
+   from the prose around it. */
+.dt-block-example {
+  border: 1px solid var(--dt-border); border-left: 3px solid var(--dt-border-strong);
+  border-radius: var(--dt-radius); background: var(--dt-surface);
+  padding: 12px 14px 13px;
+}
+.dt-block-example h4 { margin: 0 0 9px; font-size: 13px; font-weight: 620; line-height: 1.4; }
+.dt-block-example ol { margin: 0; padding-left: 19px; max-width: 62ch; }
+.dt-block-example li { margin-bottom: 6px; line-height: 1.6; }
+.dt-block-example li::marker { color: var(--dt-muted); font-variant-numeric: tabular-nums; }
+.dt-takeaway {
+  margin: 11px 0 0; padding-top: 9px; border-top: 1px dashed var(--dt-border);
+  font-size: 12px; color: var(--dt-text);
+}
+
+/* Diagram: monospace deserves its own frame so it reads as a figure. */
+.dt-block-diagram { padding: 0; }
+.dt-pre {
+  margin: 0; padding: 12px 14px; overflow-x: auto;
+  background: var(--dt-sunken); border: 1px solid var(--dt-border);
+  border-radius: var(--dt-radius);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11.5px; line-height: 1.6; white-space: pre;
+}
+
+/* Check: this is the moment the lesson hands over to the learner, so it gets
+   the strongest treatment on the surface. */
+.dt-block-check {
+  border: 1px solid var(--dt-accent); border-radius: var(--dt-radius);
+  background: color-mix(in srgb, var(--dt-accent) 5%, var(--dt-bg));
+  padding: 0; overflow: hidden;
+}
+.dt-check-head {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 9px 14px; background: var(--dt-accent); color: #fff;
+}
+.dt-check-tag {
+  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 650;
+}
+.dt-check-where { font-size: 11px; opacity: .9; }
+.dt-check-body { padding: 13px 14px 4px; }
+.dt-check-body .dt-block-md:last-child { margin-bottom: 11px; }
+.dt-check-hint {
+  margin: 0; padding: 9px 14px 11px; border-top: 1px dashed var(--dt-border);
+  font-size: 11.5px; color: var(--dt-muted);
+}
+.dt-check-hint span {
+  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
+  margin-right: 7px; color: var(--dt-accent);
+}
+
+/* ---- math (styled, not typeset) ---------------------------------------- */
+.dt-math {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: .95em; padding: 0 3px; border-radius: 4px;
+  background: var(--dt-sunken); white-space: nowrap;
+}
+.dt-math-block {
+  margin: 0 0 12px; padding: 11px 13px; overflow-x: auto;
+  background: var(--dt-sunken); border: 1px solid var(--dt-border);
+  border-radius: var(--dt-radius);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px; white-space: pre-wrap;
+}
+
+/* ---- handoff progress -------------------------------------------------- */
+.dt-handoff {
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  margin: 0 0 12px; padding: 8px 11px; border-radius: 8px;
+  background: var(--dt-surface); border: 1px solid var(--dt-border);
+  font-size: 12px;
+}
+.dt-handoff-dot {
+  width: 7px; height: 7px; border-radius: 50%; background: var(--dt-accent);
+  animation: dt-pulse 1.4s ease-in-out infinite;
+}
+.dt-handoff[data-phase="lesson-ready"] {
+  border-color: color-mix(in srgb, var(--dt-good) 45%, var(--dt-border));
+  background: color-mix(in srgb, var(--dt-good) 7%, var(--dt-bg));
+}
+.dt-handoff[data-phase="lesson-ready"] .dt-handoff-dot { background: var(--dt-good); animation: none; }
+.dt-handoff[data-phase="failed"] .dt-handoff-dot,
+.dt-handoff[data-phase="stalled"] .dt-handoff-dot { background: var(--dt-stop); animation: none; }
+@keyframes dt-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
+.dt-handoff-label { font-weight: 550; }
+.dt-handoff-time, .dt-handoff-try, .dt-handoff-detail { color: var(--dt-muted); font-size: 11px; }
+.dt-handoff-detail { flex-basis: 100%; }
+.dt-handoff-retry {
+  margin-left: auto; padding: 3px 10px; border-radius: 6px;
+  border: 1px solid var(--dt-border); background: transparent;
+  color: inherit; font: inherit; font-size: 11px; cursor: pointer;
+}
+.dt-handoff-retry:hover { background: var(--dt-bg); }
+@media (prefers-reduced-motion: reduce) { .dt-handoff-dot { animation: none } }
+
+/* ---- next best step ---------------------------------------------------- */
+/* The conclusion of a node. It should be the most deliberate thing on the
+   surface: what just finished, where it sends you, why, and one button. */
+.dt-next {
+  margin: 20px 0 4px; padding: 14px 15px 15px; border-radius: var(--dt-radius);
+  border: 1px solid var(--dt-accent);
+  background: color-mix(in srgb, var(--dt-accent) 6%, var(--dt-bg));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
+}
+.dt-next-label {
+  display: flex; align-items: center; gap: 6px;
+  color: var(--dt-accent); font-weight: 650; margin-bottom: 10px;
+}
+.dt-next-arrow { font-size: 12px; }
+.dt-next-from { margin: 0 0 8px; color: var(--dt-muted); font-size: 11.5px; }
+.dt-next-tick { color: var(--dt-good); margin-right: 5px; }
+.dt-next-target {
+  margin: 0 0 10px; font-size: 14.5px; line-height: 1.4; letter-spacing: -.01em;
+}
+.dt-next-target b { font-weight: 660; }
+.dt-next-why { margin: 0; font-size: 12px; line-height: 1.6; color: var(--dt-text); }
+.dt-next-why-label { color: var(--dt-muted); }
+.dt-next .dt-primary { margin-top: 14px; width: 100%; }
+
+/* ---- docked tab -------------------------------------------------------- */
+.dt-tab { padding: 14px 14px 40px; font-size: 12.5px; color: var(--dt-text); text-align: left; }
+.dt-tab-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
+.dt-tab-title { font-size: 15px; font-weight: 650; margin: 0; }
+.dt-tab-meta { color: var(--dt-muted); font-size: 11px; margin: 4px 0 8px; }
+.dt-tab-action { margin-top: 10px; }
+.dt-tab-section {
+  display: flex; align-items: baseline; gap: 8px;
+  margin: 24px 0 8px; padding-top: 14px;
+  border-top: 1px solid var(--dt-border);
+}
+.dt-tab-section span { text-transform: none; letter-spacing: 0; font-size: 11px; }
+
+.dt-block-unknown {
+  border: 1px dashed var(--dt-border); border-radius: 8px;
+  padding: 10px 12px; color: var(--dt-muted);
+}
+
+`;
+		/**
+		* Inject the stylesheet once.
+		*
+		* @returns a disposer that removes the element, so an unload leaves no residue.
+		*/
+		function injectStyles() {
+			if (document.querySelector(`style[data-diagnostic-tutor-style]`)) return () => {};
+			const element = document.createElement("style");
+			element.setAttribute(STYLE_ATTR, "");
+			element.textContent = CSS;
+			document.head.appendChild(element);
+			return () => element.remove();
+		}
+		//#endregion
+		//#region src/client/index.tsx
+		/** Client module name; distinct from the host plugin's name. */
+		const name = "diagnostic-tutor-client";
+		/**
+		* `slots` is the only service needed.
+		*
+		* Declared here rather than in the host half because it is a *client* service:
+		* the browser half runs in its own Cordis context against the page's registry.
+		*/
+		const inject = [
+			"slots",
+			"layout",
+			"sidebarRightTabs"
+		];
+		/**
+		* Identifier shared by the sidebar entry and the main panel.
+		*
+		* These two must match — the sidebar's list `id` is what the layout uses to
+		* select the `main` key — so they are derived from one constant.
+		*/
+		const PANEL_ID = "diagnostic-tutor";
+		/**
+		* The docked tab's identity.
+		*
+		* A tab type has two names: `id` is the implementation's own identity and is
+		* what its body and title register under; `kind` is the discriminator `openTab`
+		* names. They are the same string here because this plugin ships exactly one
+		* implementation of exactly one kind.
+		*/
+		const TAB_ID = "diagnostic-tutor";
+		/** The sidebar icon: a small node graph, drawn inline so it needs no assets. */
+		function PanelIcon({ size, active }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: active ? 1.6 : 1.3,
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "8",
+						cy: "3",
+						r: "2"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "3.5",
+						cy: "12",
+						r: "2"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "12.5",
+						cy: "12",
+						r: "2"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+						d: "M8 5v2.2M8 7.2 4.6 10.3M8 7.2l3.4 3.1",
+						strokeLinecap: "round"
+					})
+				]
+			});
+		}
+		/**
+		* The panel body, with the session the tutor should be woken in threaded
+		* through, plus a way back to the conversation.
+		*
+		* That last part matters more than it looks. The map, the node detail and the
+		* learning surface occupy the **main** column, which is the same column the
+		* conversation lives in — so while the panel is open the learner cannot type.
+		* Checks are answered in the chat, so the surface needs a door back to it, and
+		* `ctx.layout.selectPanel(null)` is the documented way to show the conversation
+		* again.
+		*
+		* `useSessions` is part of the standard kit every root-scoped slot receives, so
+		* the panel can name the session it is looking at without any plumbing of its
+		* own. The host needs it to reach the right agent when the learner presses
+		* Start learning.
+		*/
+		function MainPanel({ useSessions, onOpenChat, onFocusStarted }) {
+			const sessionId = useSessions?.((state) => state.ids[0]);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LearningPanel, {
+				...typeof sessionId === "string" ? { sessionId } : {},
+				...onOpenChat === void 0 ? {} : { onOpenChat },
+				...onFocusStarted === void 0 ? {} : { onFocusStarted }
+			});
+		}
+		/**
+		* Load the browser half.
+		*
+		* @param ctx - the client Cordis context.
+		*/
+		function apply(ctx) {
+			ctx.effect(() => injectStyles());
+			ctx.slots.inject("sidebar.panellist", () => ctx.slots.register({
+				name: "sidebar.panellist",
+				id: PANEL_ID,
+				order: 40,
+				label: "Learn"
+			}, PanelIcon));
+			const layout = ctx.get("layout");
+			ctx.slots.inject("main", () => ctx.slots.register({
+				name: "main",
+				key: PANEL_ID
+			}, function BoundMainPanel(props) {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MainPanel, {
+					...props,
+					onOpenChat: () => {
+						layout?.selectPanel(null);
+						openDockedTab();
+					},
+					onFocusStarted: () => openDockedTab()
+				});
+			}));
+			ctx.sidebarRightTabs.register({
+				id: TAB_ID,
+				kind: TAB_ID,
+				title: () => "Learning",
+				priority: "extension"
+			});
+			/**
+			* Dock the tab, retrying briefly.
+			*
+			* The right sidebar hosts **session-scoped** tabs, so it can only accept one
+			* while a session surface is mounted — and while the full panel occupies the
+			* main column, no session surface exists. Returning to the conversation
+			* mounts one, so the useful moment to dock is just after that. Retrying
+			* covers the gap between the click and the surface mounting.
+			*/
+			const openDockedTab = (attempt = 0) => {
+				const sidebarRight = ctx.get("sidebarRight");
+				if (!sidebarRight) return;
+				try {
+					sidebarRight.openTab(TAB_ID);
+				} catch {
+					if (attempt < 8) setTimeout(() => openDockedTab(attempt + 1), 400);
+				}
+			};
+			ctx.slots.inject("sidebar.right.pane.tab", () => ctx.slots.register({
+				name: "sidebar.right.pane.tab",
+				key: TAB_ID
+			}, LearningTab));
+			ctx.slots.inject("sidebar.right.pane.tab.title", () => ctx.slots.register({
+				name: "sidebar.right.pane.tab.title",
+				key: TAB_ID
+			}, LearningTabTitle));
+			fetchOverview().then((overview) => {
+				if (overview.course !== null && overview.focus !== null) openDockedTab();
+			}).catch(() => {});
+		}
+		//#endregion
+		exports.BLOCK_RENDERERS = BLOCK_RENDERERS;
+		exports.BlockView = BlockView;
+		exports.LearningPanel = LearningPanel;
+		exports.LearningTab = LearningTab;
+		exports.LearningTabTitle = LearningTabTitle;
+		exports.LessonBody = LessonBody;
+		exports.PANEL_ID = PANEL_ID;
+		exports.TAB_ID = TAB_ID;
+		exports.apply = apply;
+		exports.inject = inject;
+		exports.name = name;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map