dsh-plugin-lookatstudy 0.14.1 → 0.16.0

package/lib/client.js

@@ -4,10 +4,313 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		//#region \0rolldown/runtime.js
+		var __defProp = Object.defineProperty;
+		var __exportAll = (all, no_symbols) => {
+			let target = {};
+			for (var name in all) __defProp(target, name, {
+				get: all[name],
+				enumerable: true
+			});
+			if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+			return target;
+		};
+		//#endregion
 		let react = require("react");
 		let react_dom_client = require("react-dom/client");
+		//#region src/client/upstream-theme.ts
+		/**
+		* The upstream LookatStudy skin (0.16.0 P9a) — the 1:1 visual port. Upstream
+		* is a Duolingo-style dark-first design system defined in its tailwind.config
+		* + index.css :root; this module carries those EXACT tokens (scoped to the
+		* panel root `.lks-ui`) and redefines the panel's class vocabulary to match
+		* upstream's components: the three-column surface ladder (rail darkest / chat
+		* surface-1 / notebook surface-2, no borders — depth by color step), the
+		* floating blur app-header, 3D push-down buttons, the claude.ai-style
+		* composer capsule, chat bubbles, typing dots, and the toast capsules.
+		* Host-chrome surfaces (dock pill, settings, toolviews) keep the dsw tokens —
+		* only the study panel wears the upstream skin.
+		* @module dsh-plugin-lookatstudy/client/upstream-theme
+		*/
+		const UPSTREAM_CSS = `
+/* ── upstream design tokens (index.css :root, verbatim values) ── */
+.lks-ui{
+  --brand:#58CC01;--brand-rgb:88 204 2;--brand-dark:#46A302;--brand-light:#7ED957;
+  --brand-glow:#58CC0159;--brand-ring:#58CC0126;
+  --accent:#1DB0F6;--accent-rgb:28 176 246;--accent-dark:#098CDC;--accent-light:#65C6FF;
+  --accent-glow:#1DB0F64C;--accent-ring:#1DB0F626;
+  --gold:#FFC801;--gold-rgb:255 200 0;--gold-dark:#D59800;--gold-light:#FFE294;
+  --gold-glow:#FFC80173;--gold-ring:#FFC80133;
+  --warning:#FF4B4B;--warning-rgb:255 75 75;--warning-dark:#D01C29;--warning-light:#FF7E77;
+  --warning-glow:#FF4B4B4C;--warning-ring:#FF4B4B26;--warning-tint:#FF4B4B1A;--warning-tint-border:#FF4B4B40;
+  --review:#FA6E1D;--review-rgb:255 122 26;--review-glow:#FA6E1D26;--review-tint:#FA6E1D1A;
+  --exam:#A855F7;--exam-rgb:168 85 247;--exam-dark:#7E22CE;--exam-light:#C084FC;--exam-locked:#524569;
+  --exam-glow:#A855F759;--exam-ring:#A855F726;
+  --surface-rail:#08090B;--surface-rail-rgb:8 9 11;
+  --surface-0:#0C0D0F;--surface-0-rgb:12 13 15;
+  --surface-1:#111114;--surface-1-rgb:17 17 20;
+  --surface-2:#1A1A1D;--surface-2-rgb:26 26 29;
+  --surface-3:#2A2B2E;--surface-3-rgb:42 43 46;
+  --ink:#F1F2F4;--ink-rgb:245 245 250;
+  --ink-strong:#FAFAFA;--ink-strong-rgb:250 250 250;
+  --ink-muted:#9D9EA2;--ink-muted-rgb:166 166 176;
+  --ink-faint:#88898C;--ink-faint-rgb:136 137 140;
+  --border:#252629;--border-rgb:37 38 41;--border-faint:#1A1A1D;--border-faint-rgb:26 26 29;
+  --shadow-rgb:0 0 0;--inner-highlight:rgb(255 255 255/0.55);
+  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
+  --ease-out-back:cubic-bezier(0.34,1.2,0.64,1);
+  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
+  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);
+  font-family:'DIN Round',system-ui,-apple-system,sans-serif;
+  background:var(--surface-1);color:var(--ink);
+  font-feature-settings:'cv02','cv03','cv04','cv11';
+  -webkit-font-smoothing:antialiased;
+}
+/* the six-step type scale (rem, follows the host base) */
+.lks-ui .lks-t-caption{font-size:.75rem}.lks-ui .lks-t-label{font-size:.825rem}
+.lks-ui .lks-t-body{font-size:.875rem}.lks-ui .lks-t-lead{font-size:1rem}
+.lks-ui .lks-t-title{font-size:1.125rem}.lks-ui .lks-t-hero{font-size:1.5rem}
+
+/* ── the column ladder: no borders, depth by surface step (v0.6) ── */
+.lks-ui .lks14-rail{background:var(--surface-rail);border-right:none}
+.lks-ui .lks14-chat{background:var(--surface-1);border-right:none}
+.lks-ui .lks14-note{background:var(--surface-2)}
+.lks-ui .lks14-colhead{color:var(--ink-muted);border-bottom:1px solid var(--border-faint);letter-spacing:.02em;text-transform:none;font-size:.825rem}
+
+/* ── the floating app-header over the right half (blur + gradient fade) ── */
+.lks-ui .lks14-appheader{position:relative;z-index:30;flex:none;display:flex;align-items:center;height:46px;padding:0 14px;gap:10px}
+.lks-ui .lks14-appheader::before{content:'';position:absolute;inset:0;z-index:-1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
+  -webkit-mask:linear-gradient(to bottom,black 0%,black 65%,transparent 100%);mask:linear-gradient(to bottom,black 0%,black 65%,transparent 100%);
+  background:linear-gradient(to bottom,rgb(var(--surface-1-rgb)/0.85) 0%,rgb(var(--surface-1-rgb)/0.55) 60%,rgb(var(--surface-1-rgb)/0.15) 85%,transparent 100%)}
+.lks-ui .lks-hdr-title{flex:1;min-width:0;font-size:.825rem;font-weight:700;color:var(--ink-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lks-ui .lks-hdr-xp{display:flex;align-items:center;gap:5px;flex:none}
+.lks-ui .lks-hdr-xpbar{width:92px;height:10px;border-radius:999px;background:rgb(var(--ink-rgb)/0.08);overflow:hidden;box-shadow:inset 0 2px 3px rgb(var(--shadow-rgb)/0.3)}
+.lks-ui .lks-hdr-xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:999px;transition:width .5s var(--ease-out-expo)}
+.lks-ui .lks-hdr-stat{display:inline-flex;align-items:center;gap:4px;font-size:.825rem;font-weight:700;color:var(--ink);flex:none}
+.lks-ui .lks-hdr-streak{color:var(--review)}
+
+/* ── 3D push-down buttons (the signature style) ── */
+.lks-ui .lks-btn{border-radius:1rem;font-weight:700;transition:all .15s var(--ease-spring)}
+.lks-ui .lks-btn.primary{background:var(--brand);color:#fff;box-shadow:0 4px 0 0 var(--brand-dark)}
+.lks-ui .lks-btn.primary:hover{background:var(--brand-light)}
+.lks-ui .lks-btn.primary:active{transform:translateY(2px);box-shadow:0 1px 0 0 var(--brand-dark)}
+.lks-ui .lks-btn.primary:disabled{background:rgb(var(--ink-rgb)/0.15);color:var(--ink-faint);box-shadow:none;transform:none;cursor:not-allowed}
+.lks-ui .lks-btn.ghost{background:rgb(var(--ink-rgb)/0.06);color:var(--ink);border:none;box-shadow:0 3px 0 0 rgb(var(--shadow-rgb)/0.2)}
+.lks-ui .lks-btn.ghost:hover{color:var(--ink-strong);background:rgb(var(--ink-rgb)/0.1)}
+.lks-ui .lks-btn.ghost:active{transform:translateY(2px);box-shadow:0 1px 0 0 rgb(var(--shadow-rgb)/0.2)}
+
+/* ── chat stream: bubbles + typing dots ── */
+.lks-ui .lks14-msg-user{background:rgb(var(--ink-rgb)/0.04);border-radius:1rem 1rem .375rem 1rem;padding:.625rem 1rem;color:var(--ink-strong);animation:lks-msg-enter .2s var(--ease-out-expo)}
+.lks-ui .lks14-msg-assistant{background:var(--surface-2);border:1px solid var(--border-faint);border-radius:1rem;padding:1rem;box-shadow:0 1px 3px -1px rgb(var(--shadow-rgb)/0.08);animation:lks-msg-enter .2s var(--ease-out-expo);font-size:.875rem;line-height:1.65}
+.lks-ui .lks14-msg.streaming{opacity:1;border-style:dashed}
+@keyframes lks-msg-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+.lks-ui .lks14-thinking{gap:5px}
+@keyframes lks-typing-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
+.lks-ui .lks14-thinking i{width:6px;height:6px;border-radius:999px;background:var(--brand);display:inline-block;animation:lks-typing-dot 1.2s ease-in-out infinite}
+.lks-ui .lks14-thinking i:nth-child(2){animation-delay:.15s}
+.lks-ui .lks14-thinking i:nth-child(3){animation-delay:.3s}
+/* quiz options wear the neutral pill + brand hover */
+.lks-ui .lks-qcard-opt{background:rgb(var(--ink-rgb)/0.05);border:2px solid transparent;border-radius:.75rem;color:var(--ink)}
+.lks-ui .lks-qcard-opt:not(:disabled):hover{border-color:var(--brand)}
+.lks-ui .lks-qcard-opt.right{border-color:var(--brand);color:var(--brand-light);background:rgb(var(--brand-rgb)/0.08)}
+.lks-ui .lks-qcard-opt.wrong{border-color:var(--warning);color:var(--warning-light);background:var(--warning-tint)}
+.lks-ui .lks-qcard-next{background:var(--brand);color:#fff;box-shadow:0 3px 0 0 var(--brand-dark);border-radius:1rem}
+.lks-ui .lks-qcard-next:active{transform:translateY(2px);box-shadow:0 1px 0 0 var(--brand-dark)}
+.lks-ui .lks-qcard-action{background:rgb(var(--ink-rgb)/0.06);border:none;color:var(--ink)}
+.lks-ui .lks-qcard-action:hover{color:var(--ink-strong);background:rgb(var(--ink-rgb)/0.1)}
+
+/* ── the composer capsule (claude.ai style) + circular 3D send ── */
+.lks-ui .lks14-composer{border-top:none;background:linear-gradient(to bottom,transparent 0%,var(--surface-1) 40%)}
+.lks-ui .lks14-composer-card{flex:1;display:flex;align-items:flex-end;gap:8px;background:rgb(var(--ink-rgb)/0.05);border-radius:1rem;padding:.625rem .75rem .5rem .875rem;transition:background .15s}
+.lks-ui .lks14-composer-card:focus-within{background:rgb(var(--ink-rgb)/0.07)}
+.lks-ui .lks14-composertext{background:transparent;border:none;box-shadow:none;color:var(--ink-strong);font-size:.875rem}
+.lks-ui .lks14-composertext:focus{border-color:transparent}
+.lks-ui .lks14-composertext::placeholder{color:var(--ink-faint)}
+.lks-ui .lks-btn-send{width:36px;height:36px;border-radius:999px !important;padding:0 !important;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--brand);color:#fff;box-shadow:0 3px 0 0 var(--brand-dark);border:none;cursor:pointer;transition:all .15s var(--ease-spring)}
+.lks-ui .lks-btn-send:hover{background:var(--brand-light)}
+.lks-ui .lks-btn-send:active{transform:translateY(2px);box-shadow:0 1px 0 0 var(--brand-dark)}
+.lks-ui .lks-btn-send:disabled{background:rgb(var(--ink-rgb)/0.15);color:var(--ink-faint);box-shadow:none;transform:none;cursor:not-allowed}
+
+/* ── toast capsules on the upstream tokens ── */
+.lks-ui .lks-toast{background:var(--surface-0);color:var(--ink-strong);border:1px solid var(--border);box-shadow:0 8px 24px -4px rgb(var(--shadow-rgb)/0.18),0 2px 6px -2px rgb(var(--shadow-rgb)/0.12)}
+.lks-ui .lks-toast .lks-toast-glyph.ok{color:var(--brand)}
+.lks-ui .lks-toast .lks-toast-glyph.warn{color:var(--gold)}
+.lks-ui .lks-toast .lks-toast-glyph.err{color:var(--warning)}
+.lks-ui .lks-toast .lks-toast-glyph.info{color:var(--accent)}
+.lks-ui .lks-toast-action{color:var(--brand)}
+
+/* ── rail: signpost section heads + due box ── */
+.lks-ui .lks14-sechead{background:rgb(var(--surface-rail-rgb)/0.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid rgb(var(--gold-rgb)/0.18);border-top-color:rgb(var(--gold-rgb)/0.35);border-radius:.75rem;padding:7px 10px;margin:12px 0 6px;box-shadow:0 2px 8px rgb(var(--shadow-rgb)/0.35),inset 0 1px 0 rgb(255 255 255/0.06);color:var(--gold-light)}
+.lks-ui .lks14-secnum{background:rgb(var(--gold-rgb)/0.15);color:var(--gold-light)}
+.lks-ui .lks14-node{color:var(--ink);border-radius:.75rem}
+.lks-ui .lks14-node:hover{background:rgb(var(--ink-rgb)/0.05)}
+.lks-ui .lks14-node.focus{background:rgb(var(--accent-rgb)/0.1);outline:1px solid rgb(var(--accent-rgb)/0.25)}
+.lks-ui .lks14-node[aria-disabled='true']{color:var(--ink-faint)}
+.lks-ui .lks14-search,.lks-ui .lks-set-select{background:rgb(var(--ink-rgb)/0.05);border:1px solid var(--border-faint);color:var(--ink-strong)}
+.lks-ui .lks14-search:focus{border-color:var(--accent)}
+.lks-ui .lks14-duebox{background:var(--review-tint);border:1px solid rgb(var(--review-rgb)/0.25);color:var(--ink)}
+.lks-ui .lks14-over{color:var(--warning-light)}
+.lks-ui .lks14-tag.weak{color:var(--gold-light)}
+.lks-ui .lks14-masterybar{background:rgb(var(--ink-rgb)/0.08)}
+.lks-ui .lks14-masterybar i{background:var(--gold)}
+.lks-ui .lks14-bar{background:rgb(var(--ink-rgb)/0.08)}
+.lks-ui .lks14-bar i{background:var(--gold)}
+.lks-ui .lks14-pill{color:var(--ink-muted);border-radius:999px}
+.lks-ui .lks14-pill.on{background:rgb(var(--accent-rgb)/0.12);color:var(--accent-light)}
+
+/* ── notebook: teach prose + view tabs ── */
+.lks-ui .lks14-viewtab{color:var(--ink-muted);border-radius:999px}
+.lks-ui .lks14-viewtab.on{background:rgb(var(--ink-rgb)/0.08);color:var(--ink-strong)}
+.lks-ui .lks14-prose{color:var(--ink);font-size:.9375rem;line-height:1.65}
+.lks-ui .lks14-prose h1,.lks-ui .lks-note-text h1{font-size:1.25rem;font-weight:800;color:var(--ink-strong)}
+.lks-ui .lks14-prose h2,.lks-ui .lks-note-text h2{font-size:1.1rem;font-weight:700;color:var(--ink-strong);border-bottom:1px solid var(--border);padding-bottom:.3em}
+.lks-ui .lks14-prose h3,.lks-ui .lks-note-text h3{font-size:1rem;font-weight:700;color:var(--ink)}
+.lks-ui .lks14-prose pre,.lks-ui .lks-note-text pre{background:var(--surface-0);border:1px solid var(--border);color:var(--ink)}
+.lks-ui .lks14-prose code,.lks-ui .lks-note-text code{background:rgb(var(--surface-3-rgb)/0.6);color:var(--accent-light)}
+.lks-ui .lks14-prose blockquote{border-left:3px solid var(--accent);background:rgb(var(--accent-rgb)/0.06);color:var(--ink-muted)}
+.lks-ui .lks14-prose table thead{border-bottom:2px solid var(--brand)}
+.lks-ui .lks14-prose th{color:var(--ink-strong)}
+.lks-ui .lks14-prose tbody tr:nth-child(odd){background:rgb(var(--surface-3-rgb)/0.3)}
+.lks-ui .lks14-prose td,.lks-ui .lks14-prose th{border-color:var(--border)}
+.lks-ui .lks-note{background:var(--surface-1);border:1px solid var(--border-faint)}
+.lks-ui .lks-note .lks-note-q{border-left-color:var(--gold)}
+.lks-ui .lks14-zoneh{color:var(--ink-muted)}
+.lks-ui mark.lks-hl{background:rgb(var(--gold-rgb)/0.25);border-bottom:2px solid var(--gold)}
+
+/* ── artifact + rate + proposal cards on surface-card language ── */
+.lks-ui .lks-acard,.lks-ui .lks-qcard{background:var(--surface-2);border:1px solid var(--border-faint);border-radius:1rem;box-shadow:0 1px 3px -1px rgb(var(--shadow-rgb)/0.08)}
+.lks-ui .lks-acard-head,.lks-ui .lks-qcard-head{color:var(--ink-muted)}
+.lks-ui .lks-acard-table th{background:transparent;border-bottom:2px solid var(--brand);color:var(--ink-strong)}
+.lks-ui .lks-acard-table td{border-bottom:1px solid var(--border)}
+.lks-ui .lks-acard-code{background:var(--surface-0);border:1px solid var(--border)}
+.lks-ui .lks-acard-line i{color:var(--ink-faint)}
+.lks-ui .lks-acard-note{border-left-color:var(--accent);color:var(--ink-muted)}
+.lks-ui .lks-acard-modal-body{background:var(--surface-0);border-color:var(--border)}
+.lks-ui .lks-acard-guess-opt{background:rgb(var(--ink-rgb)/0.05);border:2px solid transparent;color:var(--ink)}
+.lks-ui .lks-acard-guess-opt:not(:disabled):hover{border-color:var(--accent)}
+.lks-ui .lks-acard-guess-opt.picked{border-color:var(--accent);background:rgb(var(--accent-rgb)/0.1);color:var(--accent-light)}
+.lks-ui .lks-ratecard{background:rgb(var(--review-rgb)/0.08);border:1px solid rgb(var(--review-rgb)/0.25)}
+.lks-ui .lks-ratecard-title{color:var(--ink-strong)}
+.lks-ui .lks-ratecard-opt{background:rgb(var(--ink-rgb)/0.05);border:2px solid transparent;color:var(--ink)}
+.lks-ui .lks-ratecard-opt:not(:disabled):hover{border-color:var(--brand)}
+.lks-ui .lks-ratecard-opt.best{background:var(--gold);color:#3A2E00;box-shadow:0 3px 0 0 var(--gold-dark);border-color:transparent}
+.lks-ui .lks-ratecard-opt.best:active{transform:translateY(2px);box-shadow:0 1px 0 0 var(--gold-dark)}
+.lks-ui .lks-propbanner{background:rgb(var(--gold-rgb)/0.06);border:1px solid rgb(var(--gold-rgb)/0.3);color:var(--ink)}
+.lks-ui .lks-viewtab-badge{background:var(--brand);color:#fff}
+
+/* ── the empty states + readbar + switcher ── */
+.lks-ui .lks14-empty{color:var(--ink-muted)}
+.lks-ui .lks-readbar-cur{border-left-color:var(--accent);color:var(--ink-muted)}
+.lks-ui .lks14-switch{background:rgb(var(--ink-rgb)/0.06);border:1px solid var(--border-faint)}
+.lks-ui .lks14-switch-btn.on{background:var(--brand);color:#fff}
+.lks-ui .lks14-searchpanel{background:var(--surface-0);border:1px solid var(--border);box-shadow:0 8px 24px -4px rgb(var(--shadow-rgb)/0.18)}
+.lks-ui .lks14-searchrow:hover{background:rgb(var(--ink-rgb)/0.05)}
+.lks-ui .lks14-searchrow-snip{color:var(--ink-muted)}
+.lks-ui .lks-propcard-err{color:var(--warning-light)}
+.lks-ui .lks14-thinking{color:var(--ink-muted)}
+
+/* ══════════ P9b: the balloon course map (upstream v0.28 MapRail, static path) ══════════ */
+.lks-ui{--exam-locked-mix:#A7A2B2}
+/* the sky: upstream's canvas presets reduced to layered gradients (essence port;
+   deterministic per-course via pickSky) */
+.lks-ui .lks-map{position:relative;min-height:100%;background-repeat:no-repeat}
+.lks-ui .lks-sky-day{background-image:
+  radial-gradient(1.5px 1.5px at 18% 12%,rgb(255 255 255/0.5),transparent 100%),
+  radial-gradient(1px 1px at 64% 8%,rgb(255 255 255/0.35),transparent 100%),
+  radial-gradient(1px 1px at 82% 22%,rgb(255 255 255/0.3),transparent 100%),
+  radial-gradient(120px 60px at 78% 6%,rgb(124 172 255/0.08),transparent 100%),
+  linear-gradient(to bottom,#16233F 0%,#0F1B33 55%,var(--surface-rail) 100%)}
+.lks-ui .lks-sky-dusk{background-image:
+  radial-gradient(1.5px 1.5px at 24% 10%,rgb(255 255 255/0.45),transparent 100%),
+  radial-gradient(1px 1px at 70% 16%,rgb(255 255 255/0.3),transparent 100%),
+  radial-gradient(140px 70px at 22% 10%,rgb(255 160 90/0.07),transparent 100%),
+  linear-gradient(to bottom,#2A2140 0%,#1D1A38 50%,var(--surface-rail) 100%)}
+.lks-ui .lks-sky-night{background-image:
+  radial-gradient(1.5px 1.5px at 12% 18%,rgb(255 255 255/0.55),transparent 100%),
+  radial-gradient(1px 1px at 38% 6%,rgb(255 255 255/0.4),transparent 100%),
+  radial-gradient(1px 1px at 58% 24%,rgb(255 255 255/0.35),transparent 100%),
+  radial-gradient(1.5px 1.5px at 88% 10%,rgb(255 255 255/0.5),transparent 100%),
+  radial-gradient(1px 1px at 76% 30%,rgb(255 255 255/0.3),transparent 100%),
+  radial-gradient(90px 90px at 84% 8%,rgb(200 214 255/0.06),transparent 100%),
+  linear-gradient(to bottom,#0B1024 0%,#0A0D1C 55%,var(--surface-rail) 100%)}
+.lks-ui .lks-mapsec{padding:12px 8px 4px}
+/* the signpost (map-signpost verbatim): frosted board with a gold rim */
+.lks-ui .lks-signpost{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border-radius:8px;font:inherit;cursor:pointer;text-align:left;
+  background:rgb(var(--surface-rail-rgb)/0.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
+  border:1px solid rgb(var(--gold-rgb)/0.18);border-top-color:rgb(var(--gold-rgb)/0.35);
+  box-shadow:0 2px 8px rgb(var(--shadow-rgb)/0.35),inset 0 1px 0 rgb(255 255 255/0.06)}
+.lks-ui .lks-signpost-num{width:24px;height:24px;border-radius:999px;background:var(--gold);color:#201500;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 2px rgb(var(--gold-rgb)/0.4)}
+.lks-ui .lks-signpost-title{flex:1;font-size:12.5px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,0.7)}
+.lks-ui .lks-signpost-caret{color:rgb(var(--ink-rgb)/0.5);font-size:10px}
+.lks-ui .lks-mapfield{position:relative}
+.lks-ui .lks-mapropes{position:absolute;inset:0;width:100%;pointer-events:none;overflow:visible}
+.lks-ui .lks-mapnode{position:absolute;width:110px;display:flex;flex-direction:column;align-items:center;
+  animation:lks-balloon-bob var(--bob-duration,6s) ease-in-out infinite;animation-delay:var(--bob-delay,0s)}
+@keyframes lks-balloon-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
+@keyframes lks-path-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
+@media (prefers-reduced-motion: reduce){.lks-ui .lks-mapnode{animation:none}.lks-ui .lks-bubble-available{animation:none}}
+/* the bubbles (lesson-bubble verbatim): 3D sphere lighting + ::before inner highlight */
+.lks-ui .lks-bubble{position:relative;width:56px;height:56px;border-radius:999px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .2s var(--ease-out-back);background-position:30% 25%}
+.lks-ui .lks-bubble::before{content:'';position:absolute;top:12%;left:22%;width:38%;height:28%;border-radius:50%;
+  background:radial-gradient(ellipse at center,var(--inner-highlight) 0%,rgb(255 255 255/0) 70%);pointer-events:none;z-index:1}
+.lks-ui .lks-bubble[aria-disabled='true']{cursor:not-allowed}
+.lks-ui .lks-bubble.selected{outline:4px solid var(--accent);outline-offset:3px}
+.lks-ui .lks-bubble-glyph{position:relative;z-index:2;color:#fff;display:inline-flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4))}
+.lks-ui .lks-bubble-glyph.dim{opacity:.5}
+.lks-ui .lks-bubble-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
+.lks-ui .lks-bubble-due{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:999px;background:var(--review);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface-rail);z-index:3}
+.lks-ui .lks-bubble-name{margin-top:4px;max-width:120px;font-size:11px;font-weight:700;color:#fff;background:rgb(var(--brand-rgb)/0.9);padding:2px 6px;border-radius:6px;text-align:center;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* locked: heavy sunken stone */
+.lks-ui .lks-bubble-locked{background:radial-gradient(circle at 35% 30%,var(--surface-3) 0%,var(--surface-2) 60%,var(--surface-1) 100%);
+  box-shadow:inset 0 3px 6px rgb(var(--shadow-rgb)/0.5),inset 0 -2px 4px rgb(255 255 255/0.04),0 2px 4px rgb(var(--shadow-rgb)/0.3)}
+.lks-ui .lks-bubble-locked::before{background:radial-gradient(ellipse at center,rgb(255 255 255/0.12) 0%,rgb(255 255 255/0) 70%)}
+/* available: bright glowing sphere, your move */
+.lks-ui .lks-bubble-available{background:radial-gradient(circle at 32% 28%,var(--brand-light) 0%,var(--brand) 45%,var(--brand-dark) 100%);
+  box-shadow:0 0 0 4px var(--brand-ring),0 0 16px var(--brand-glow),0 4px 10px rgb(var(--shadow-rgb)/0.25)}
+.lks-ui .lks-bubble-available:hover{transform:translateY(-3px) scale(1.03);
+  box-shadow:0 0 0 5px rgb(var(--brand-rgb)/0.2),0 0 22px rgb(var(--brand-rgb)/0.5),0 6px 14px rgb(var(--shadow-rgb)/0.3)}
+.lks-ui .lks-bubble-available:active{transform:translateY(2px) scale(0.97);
+  box-shadow:0 0 0 3px var(--brand-ring),0 0 10px rgb(var(--brand-rgb)/0.3),0 2px 6px rgb(var(--shadow-rgb)/0.2)}
+@keyframes lks-bubble-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
+.lks-ui .lks-bubble-available{animation:lks-bubble-pulse 2.4s ease-in-out infinite}
+/* in_progress: blue in motion */
+.lks-ui .lks-bubble-in-progress{background:radial-gradient(circle at 32% 28%,var(--accent-light) 0%,var(--accent) 45%,var(--accent-dark) 100%);
+  box-shadow:0 0 0 4px var(--accent-ring),0 0 14px var(--accent-glow),0 4px 10px rgb(var(--shadow-rgb)/0.25)}
+.lks-ui .lks-bubble-in-progress:hover{transform:translateY(-2px) scale(1.03);
+  box-shadow:0 0 0 5px rgb(var(--accent-rgb)/0.2),0 0 20px rgb(var(--accent-rgb)/0.45),0 6px 14px rgb(var(--shadow-rgb)/0.3)}
+/* mastered: gold crown halo, scaled up */
+.lks-ui .lks-bubble-mastered{background:radial-gradient(circle at 32% 28%,var(--gold-light) 0%,var(--gold) 45%,var(--gold-dark) 100%);
+  box-shadow:0 0 0 4px var(--gold-ring),0 0 22px var(--gold-glow),0 0 40px rgb(var(--gold-rgb)/0.15),0 4px 12px rgb(var(--shadow-rgb)/0.25);transform:scale(1.1)}
+.lks-ui .lks-bubble-mastered::before{background:radial-gradient(ellipse at center,rgb(255 255 255/0.7) 0%,rgb(255 255 255/0) 70%)}
+.lks-ui .lks-bubble-mastered:hover{transform:scale(1.13) translateY(-2px);
+  box-shadow:0 0 0 5px rgb(var(--gold-rgb)/0.25),0 0 28px rgb(var(--gold-rgb)/0.55),0 0 50px rgb(var(--gold-rgb)/0.2),0 6px 16px rgb(var(--shadow-rgb)/0.3)}
+/* exam: the section boss */
+.lks-ui .lks-exam{background:radial-gradient(circle at 32% 28%,var(--exam-light) 0%,var(--exam) 45%,var(--exam-dark) 100%);
+  box-shadow:0 0 0 4px var(--exam-ring),0 0 16px var(--exam-glow),0 4px 10px rgb(var(--shadow-rgb)/0.25)}
+.lks-ui .lks-exam-locked{background:radial-gradient(circle at 35% 30%,var(--exam-locked) 0%,var(--exam-locked-mix) 60%,var(--surface-1) 100%);
+  box-shadow:inset 0 3px 6px rgb(var(--shadow-rgb)/0.5),inset 0 -2px 4px rgb(255 255 255/0.04),0 2px 4px rgb(var(--shadow-rgb)/0.3)}
+.lks-ui .lks-exam-passed{background:radial-gradient(circle at 32% 28%,rgb(var(--exam-light-rgb,192 132 252)) 0%,var(--exam-light) 40%,var(--exam) 100%);
+  box-shadow:0 0 0 4px var(--gold-ring),0 0 18px var(--exam-glow),0 0 28px rgb(var(--gold-rgb)/0.15),0 4px 12px rgb(var(--shadow-rgb)/0.25)}
+/* the floating rail head card (upstream map-header card) */
+.lks-ui .lks14-railhead{background:rgb(var(--surface-rail-rgb)/0.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgb(255 255 255/0.06);border-radius:12px;padding:8px 10px}
+.lks-ui .lks14-railtitle{color:#fff;font-weight:800;font-size:.875rem;text-shadow:0 1px 3px rgba(0,0,0,0.6)}
+.lks-ui .lks14-railsub{color:rgb(var(--ink-rgb)/0.6)}
+.lks-ui .lks14-masterybar{height:10px;background:rgb(0 0 0/0.4);border-radius:999px;box-shadow:inset 0 0 0 1px rgb(255 255 255/0.1);overflow:hidden}
+.lks-ui .lks14-masterybar i{background:var(--brand)}
+.lks-ui .lks14-masterybar.gold i{background:var(--gold)}
+.lks-ui .lks14-search{background:rgb(0 0 0/0.25);border:1px solid rgb(255 255 255/0.15);color:var(--ink-strong);border-radius:10px}
+.lks-ui .lks14-search:focus{border-color:var(--brand);outline:none}
+.lks-ui .lks14-search::placeholder{color:rgb(var(--ink-rgb)/0.35)}
+`;
+		//#endregion
 		//#region src/client/styles.ts
 		/**
+		* The study stylesheet. The center-takeover visibility follows the stardeck
+		* panel doctrine: the shell view is display:none until the `<html>` active
+		* attribute flips, and the host conversation column's own children are hidden
+		* behind `!important` so React never fights the takeover.
+		*/
+		/**
 		* Style injection for the study surfaces: one `<style>` element carrying the
 		* `.lks14-*` panel classes (the sidebar-entry center-takeover, arranged like
 		* upstream LookatStudy) plus the shared `.lks-*` classes the host-native
@@ -21,12 +324,6 @@ window.__ModuleLoader__.load({
 		*/
 		/** Marker attribute proving the stylesheet is already in the document. */
 		const STYLE_ID = "data-dsh-plugin-lookatstudy";
-		/**
-		* The study stylesheet. The center-takeover visibility follows the stardeck
-		* panel doctrine: the shell view is display:none until the `<html>` active
-		* attribute flips, and the host conversation column's own children are hidden
-		* behind `!important` so React never fights the takeover.
-		*/
 		const STUDY_CSS = `
 /* State inks: small colored text must clear WCAG AA (4.5:1), but the host's
    raw state tokens (success/warn primaries) sit at 2.3–2.6:1 on light
@@ -38,7 +335,7 @@ window.__ModuleLoader__.load({
    every surface family that consumes the inks: .lks-root (dock pill,
    settings) and .lks-tv (toolview cards, which render in the host
    conversation with no .lks-root ancestor). */
-.lks-root,.lks-tv{--lks-warn-ink:color-mix(in srgb,var(--dsw-alias-state-warn-label) 45%,var(--dsw-alias-label-primary));--lks-ok-ink:color-mix(in srgb,var(--dsw-alias-state-success-primary) 40%,var(--dsw-alias-label-primary));--lks-err-ink:color-mix(in srgb,var(--dsw-alias-state-error-primary) 55%,var(--dsw-alias-label-primary))}
+.lks-root,.lks-tv,.lks14{--lks-warn-ink:color-mix(in srgb,var(--dsw-alias-state-warn-label) 45%,var(--dsw-alias-label-primary));--lks-ok-ink:color-mix(in srgb,var(--dsw-alias-state-success-primary) 40%,var(--dsw-alias-label-primary));--lks-err-ink:color-mix(in srgb,var(--dsw-alias-state-error-primary) 55%,var(--dsw-alias-label-primary))}
 .lks-root{font-family:var(--dsw-font-family)}
 .lks-root :where(button){font-family:var(--dsw-font-family);cursor:pointer;border:none;background:none;padding:0}
 
@@ -59,9 +356,11 @@ html[data-dsh-lookatstudy-active] .lks14-shell-view{display:flex;flex-direction:
 html[data-dsh-lookatstudy-active] [data-pane='conversation'] > :not([data-dsh-lookatstudy-view]),
 html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatstudy-view]){display:none !important}
 [data-dsh-lookatstudy-view]{container-type:inline-size}
-.lks14{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);overflow:hidden;font-family:var(--dsw-font-family)}
+.lks14{position:relative;background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);overflow:hidden;font-family:var(--dsw-font-family)}
 .lks14 button{font-family:var(--dsw-font-family);cursor:pointer}
 .lks14-body{display:flex;flex:1;min-width:0;min-height:0}
+.lks14-righthalf{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
+.lks14-row{flex:1;min-height:0;display:flex}
 .lks14-col{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
 .lks14-colhead{flex:none;display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:13px;font-weight:600;color:var(--dsw-alias-label-secondary);border-bottom:1px solid var(--dsw-alias-border-l1)}
 
@@ -78,22 +377,6 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-duebox{border:1px solid var(--dsw-alias-border-l1);border-radius:10px;padding:8px 10px;margin:8px 0;font-size:12.5px}
 .lks14-dueitem{display:flex;justify-content:space-between;gap:6px;padding:2px 0;color:var(--dsw-alias-label-secondary)}
 .lks14-over{color:var(--dsw-alias-state-error-primary)}
-.lks14-sechead{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12.5px;font-weight:600;padding:6px 2px;cursor:pointer;text-align:left}
-.lks14-sechead:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-state-business-primary);outline:none}
-.lks14-secnum{flex:none;width:18px;height:18px;border-radius:5px;background:var(--dsw-alias-bg-layer-2);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
-.lks14-secheadt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.lks14-node{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;padding:5px 6px;border-radius:8px;cursor:pointer;text-align:left}
-.lks14-node:hover{background:var(--dsw-alias-bg-layer-1)}
-.lks14-node:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-state-business-primary);outline:none}
-.lks14-node.focus{background:var(--dsw-alias-bg-layer-2)}
-.lks14-node[aria-disabled='true']{color:var(--dsw-alias-label-tertiary);cursor:default}
-.lks14-g{flex:none;display:inline-flex}
-.lks14-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.lks14-tag{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:10.5px;border-radius:6px;padding:1px 4px}
-.lks14-tag.weak{color:var(--dsw-alias-state-warn-primary)}
-.lks14-bar{flex:none;width:26px;height:4px;border-radius:2px;background:var(--dsw-alias-bg-layer-2);overflow:hidden}
-.lks14-bar i{display:block;height:100%;background:var(--dsw-alias-business-primary);transform-origin:left}
-.lks14-pct{flex:none;font-size:10.5px;color:var(--dsw-alias-label-tertiary)}
 .lks14-empty{color:var(--dsw-alias-label-tertiary);font-size:13px;padding:18px 6px;line-height:1.7}
 .lks14-import{margin:8px 0}
 .lks14-inputrow{display:flex;gap:6px}
@@ -152,6 +435,153 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-zone{margin-bottom:12px}
 .lks14-zoneh{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-secondary);margin-bottom:6px}
 
+
+/* toast capsules (P6, upstream Toast port): top-center under the panel head,
+   container inert to pointers, items auto; exit is an animation handshake —
+   reduced-motion keeps a .01ms duration so the end event still fires. */
+.lks-toasts{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;max-width:min(440px,90%)}
+.lks-toast{pointer-events:auto;display:flex;align-items:center;gap:8px;max-width:100%;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);border:1px solid var(--dsw-alias-border-l1);border-radius:999px;padding:6px 8px 6px 14px;font-size:13px;line-height:1.4;box-shadow:0 6px 24px rgba(0,0,0,.14);animation:lks-toast-in .18s ease}
+.lks-toast.exiting{animation:lks-toast-out .18s ease forwards}
+.lks-toast .lks-toast-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lks-toast .lks-toast-glyph{flex:none}
+.lks-toast .lks-toast-glyph.ok{color:var(--lks-ok-ink)}
+.lks-toast .lks-toast-glyph.warn{color:var(--lks-warn-ink)}
+.lks-toast .lks-toast-glyph.err{color:var(--lks-err-ink)}
+.lks-toast .lks-toast-glyph.info{color:var(--dsw-alias-state-business-primary)}
+.lks-toast-action{border:none;background:none;color:var(--dsw-alias-state-business-primary);font-weight:600;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:999px;flex:none}
+.lks-toast-action:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.lks-toast-action:focus-visible,.lks-toast-close:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-state-business-primary);outline:none}
+.lks-toast-close{border:none;background:none;color:var(--dsw-alias-label-tertiary);cursor:pointer;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:15px;line-height:1;padding:0;flex:none}
+.lks-toast-close:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}
+@keyframes lks-toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
+@keyframes lks-toast-out{to{opacity:0;transform:translateY(-6px)}}
+@media (prefers-reduced-motion:reduce){.lks-toast{animation-duration:.01ms}}
+
+
+
+
+
+
+
+
+/* the companion creature (P7): bottom-right of the panel; gentle bob idle,
+   bounce while talking, pop on celebration; reduced-motion = static (a11y). */
+.lks-companion{position:absolute;right:18px;bottom:14px;z-index:20;width:56px;height:56px;cursor:pointer;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));animation:lks-comp-bob 3.2s ease-in-out infinite}
+.lks-companion:focus-visible{outline:none;filter:drop-shadow(0 0 0 2px var(--dsw-alias-state-business-primary)) drop-shadow(0 4px 10px rgba(0,0,0,.18))}
+.lks-companion.mood-talking{animation:lks-comp-talk .6s ease-in-out infinite}
+.lks-companion.mood-celebrating{animation:lks-comp-pop .5s cubic-bezier(.34,1.56,.64,1) 3}
+.lks-companion.mood-encouraging{animation:lks-comp-nudge 1.2s ease-in-out 2}
+@keyframes lks-comp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
+@keyframes lks-comp-talk{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.06)}}
+@keyframes lks-comp-pop{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-8deg)}100%{transform:scale(1)}}
+@keyframes lks-comp-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-4deg)}75%{transform:translateX(5px) rotate(4deg)}}
+@media (prefers-reduced-motion:reduce){.lks-companion{animation:none}}
+
+/* P5: proposal banner (ConfirmCard semantics) + thinking row + narrow switch */
+.lks-propbanner{flex:none;display:flex;align-items:center;gap:8px;margin:8px 12px 0;padding:8px 12px;border-radius:10px;background:var(--dsw-alias-state-business-tertiary);border:1px solid var(--dsw-alias-border-l2);font-size:12.5px;color:var(--dsw-alias-label-primary-bluish)}
+.lks-propbanner .lks-propbanner-why{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lks14-thinking{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dsw-alias-label-secondary);padding:2px 2px}
+.lks14-switch{display:none;flex-direction:row;gap:2px;align-self:center;margin:8px 0 0;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-radius:999px;padding:3px}
+.lks14-switch-btn{border-radius:999px;padding:4px 16px;font-size:13px;color:var(--dsw-alias-label-secondary);background:transparent}
+.lks14-switch-btn:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.lks14-switch-btn.on{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 86%,#000);color:#fff;font-weight:600}
+@container (max-width: 900px){
+  .lks14-switch{display:flex}
+  .lks14-body{flex-direction:column}
+  .lks14-rail{flex:none;max-height:32vh;border-right:none;border-bottom:1px solid var(--dsw-alias-border-l1)}
+  .lks14-chat{min-width:0}
+  .lks14-note{flex:1 1 auto;min-height:0}
+  .lks14-body[data-pane='rail'] .lks14-righthalf{display:none}
+  .lks14-body[data-pane='chat'] .lks14-rail,.lks14-body[data-pane='chat'] .lks14-note,
+  .lks14-body[data-pane='note'] .lks14-rail,.lks14-body[data-pane='note'] .lks14-chat{display:none}
+  .lks14-body[data-pane='rail'] .lks14-rail{display:flex;max-height:none;flex:1 1 auto}
+  .lks14-body[data-pane='note'] .lks14-note{display:flex}
+}
+
+/* rail search results panel (P4, upstream CourseSearchPanel) */
+.lks14-searchpanel{margin:4px 0 6px;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1);overflow:hidden}
+.lks14-searchrow{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;font:inherit;padding:6px 10px;cursor:pointer;border-bottom:1px solid var(--dsw-alias-border-l1)}
+.lks14-searchrow:last-child{border-bottom:none}
+.lks14-searchrow:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.lks14-searchrow-title{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.lks14-searchrow-course{font-size:10.5px;color:var(--dsw-alias-label-tertiary)}
+.lks14-searchrow-snip{font-size:11px;color:var(--dsw-alias-label-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+
+/* review self-rating card (P3, upstream SelfRatingCard: three Memrise levels) */
+.lks-ratecard{flex:none;display:flex;flex-direction:column;gap:8px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-state-business-tertiary);padding:10px 12px;margin-bottom:8px}
+.lks-ratecard-title{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary-bluish)}
+.lks-ratecard-opts{display:flex;gap:6px}
+.lks-ratecard-opt{flex:1;font:inherit;font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:9px;padding:7px 10px;cursor:pointer}
+.lks-ratecard-opt:hover{border-color:var(--dsw-alias-state-business-primary)}
+.lks-ratecard-opt.again:hover{border-color:var(--dsw-alias-state-error-primary)}
+.lks-ratecard-opt.best{background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 86%,#000);color:#fff;border-color:transparent}
+.lks-ratecard-opt.best:hover{filter:brightness(1.1)}
+.lks-ratecard-opt:disabled{opacity:.6;cursor:default}
+.lks14-dueitem{font:inherit;text-align:left}
+
+/* selection-to-note (P2, upstream selection flow): the popover floats over
+   the prose; persisted highlights are soft amber marks. */
+.lks14-prosewrap{position:relative}
+.lks-quote-btn{position:absolute;z-index:12;display:flex;gap:2px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.16);transform:translateX(-50%)}
+.lks-quote-btn button{border:none;background:none;color:var(--dsw-alias-label-primary);font:inherit;font-size:12.5px;font-weight:600;padding:6px 10px;cursor:pointer;border-radius:10px}
+.lks-quote-btn button:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.lks-quote-btn button + button{border-left:1px solid var(--dsw-alias-border-l1)}
+mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border-bottom:2px solid var(--dsw-alias-state-warn-primary);padding:0 1px}
+
+/* artifact cards (P1b, upstream artifacts port): chat column + notebook zones */
+.lks-acard{flex:none;margin:2px 12px 8px;border:1px solid var(--dsw-alias-border-l1);border-radius:12px;background:var(--dsw-alias-bg-layer-1);padding:10px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
+.lks-acard-head{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-secondary)}
+.lks-acard-expand{margin-left:auto;border:none;background:none;color:var(--dsw-alias-label-tertiary);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}
+.lks-acard-expand:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}
+.lks-acard-table{border-collapse:collapse;display:block;max-width:100%;overflow-x:auto}
+.lks-acard-table th,.lks-acard-table td{border:1px solid var(--dsw-alias-border-l2);padding:4px 9px;font-size:12.5px;text-align:left}
+.lks-acard-table th{background:var(--dsw-alias-bg-layer-2)}
+.lks-acard-code{background:var(--dsw-alias-markdown-code-block);border-radius:8px;padding:8px 0;overflow-x:auto;font-family:var(--dsw-font-markdown-code-block-small);font-size:12px;line-height:1.6;margin:0}
+.lks-acard-line{display:block;white-space:pre}
+.lks-acard-line i{display:inline-block;width:2.2em;color:var(--dsw-alias-label-tertiary);font-style:normal;text-align:right;padding-right:8px;user-select:none}
+.lks-acard-notes{display:flex;flex-direction:column;gap:5px}
+.lks-acard-note{font-size:12.5px;line-height:1.6;color:var(--dsw-alias-label-secondary);border-left:2px solid var(--dsw-alias-state-business-primary);padding-left:8px}
+.lks-acard-note b{color:var(--dsw-alias-label-primary);font-weight:600;margin-right:4px}
+.lks-acard-diagram{overflow-x:auto;text-align:center}
+.lks-acard-diagram svg{max-width:100%;height:auto}
+.lks-acard-modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:32px}
+.lks-acard-modal-body{background:var(--dsw-alias-bg-base);border:1px solid var(--dsw-alias-border-l2);border-radius:14px;max-width:900px;max-height:100%;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
+.lks-acard-modal-title{display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.lks-acard-guess-prompt{font-size:13.5px;line-height:1.6;color:var(--dsw-alias-label-primary)}
+.lks-acard-guess-opts{display:flex;gap:8px}
+.lks-acard-guess-opt{flex:1;font:inherit;font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-radius:10px;padding:10px 12px;cursor:pointer}
+.lks-acard-guess-opt:not(:disabled):hover{border-color:var(--dsw-alias-state-business-primary)}
+.lks-acard-guess-opt.picked{border-color:var(--dsw-alias-state-business-primary);background:var(--dsw-alias-state-business-tertiary)}
+.lks-acard-guess-wait{font-size:12px;color:var(--dsw-alias-label-tertiary)}
+.lks-acard-stage{margin-top:14px;padding-top:10px;border-top:1px solid var(--dsw-alias-border-l1)}
+.lks-acard-stage .lks-acard{margin:0}
+.lks14-zone .lks-acard{margin:0 0 8px}
+/* notebook tab badge (unseen artifacts) */
+.lks-viewtab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:8px;background:var(--dsw-alias-state-business-primary);color:#fff;font-size:10px;font-weight:700;margin-left:5px;padding:0 4px}
+
+/* practice card (P1, upstream QuizArtifact port): chat column, below the stream */
+.lks-qcard{flex:none;margin:2px 12px 8px;border:1px solid var(--dsw-alias-border-l1);border-radius:12px;background:var(--dsw-alias-bg-layer-1);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
+.lks-qcard-head{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-secondary)}
+.lks-qcard-count{margin-left:auto;font-weight:400;color:var(--dsw-alias-label-tertiary)}
+.lks-qcard-q{display:flex;flex-direction:column;gap:6px}
+.lks-qcard-prompt{font-size:13.5px;line-height:1.55;color:var(--dsw-alias-label-primary)}
+.lks-qcard-opts{display:flex;flex-direction:column;gap:4px}
+.lks-qcard-opt{text-align:left;font:inherit;font-size:13px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-radius:9px;padding:6px 10px;cursor:pointer}
+.lks-qcard-opt:not(:disabled):hover{border-color:var(--dsw-alias-state-business-primary)}
+.lks-qcard-opt:disabled{cursor:default}
+.lks-qcard-opt.right{border-color:var(--dsw-alias-state-success-primary);color:var(--lks-ok-ink)}
+.lks-qcard-opt.wrong{border-color:var(--dsw-alias-state-error-primary);color:var(--lks-err-ink)}
+.lks-qcard-opt.dim{opacity:.75}
+.lks-qcard-expl{font-size:12.5px;line-height:1.6;color:var(--dsw-alias-label-secondary);border-left:2px solid var(--dsw-alias-state-business-primary);padding-left:8px}
+.lks-qcard-next{margin-top:2px;border:none;background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 86%,#000);color:#fff;font:inherit;font-size:12.5px;font-weight:600;border-radius:8px;padding:5px 14px;cursor:pointer}
+.lks-qcard-next:hover{filter:brightness(1.1)}
+.lks-qcard-review .lks-qcard-q.review{padding:6px 0;border-bottom:1px dashed var(--dsw-alias-border-l1)}
+.lks-qcard-review .lks-qcard-q.review.wrong .lks-qcard-prompt{color:var(--lks-err-ink)}
+.lks-qcard-ans{font-size:12.5px;color:var(--dsw-alias-label-secondary)}
+.lks-qcard-actions{display:flex;flex-wrap:wrap;gap:6px}
+.lks-qcard-action{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12.5px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);border-radius:999px;padding:4px 12px;cursor:pointer}
+.lks-qcard-action:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l3)}
+
 /* note cards (shared: panel notebook + settings-era shapes) */
 .lks-note{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:10px;padding:10px 14px;margin-bottom:8px}
 .lks-note .lks-note-src{float:right;font-size:11.5px;color:var(--dsw-alias-label-secondary)}
@@ -235,7 +665,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			if (existing !== null) return existing;
 			const style = document.createElement("style");
 			style.setAttribute(STYLE_ID, "");
-			style.textContent = STUDY_CSS;
+			style.textContent = STUDY_CSS + UPSTREAM_CSS;
 			document.head.appendChild(style);
 			return style;
 		}
@@ -346,6 +776,26 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				fill: "currentColor"
 			}));
 		}
+		/** IconWarningOutline16 */
+		function IconWarningOutline16({ size = 16, className }) {
+			return (0, react.createElement)("svg", {
+				width: size,
+				height: size,
+				className,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, (0, react.createElement)("path", {
+				d: "M6.3002 3.32843L7.69986 3.32843L7.69986 7.79657H6.3002L6.3002 3.32843Z",
+				fill: "currentColor"
+			}), (0, react.createElement)("path", {
+				d: "M6.3002 9.01935H7.69986V10.6711H6.3002V9.01935Z",
+				fill: "currentColor"
+			}), (0, react.createElement)("path", {
+				d: "M12.6328 6.99976C12.6328 3.88874 10.111 1.36694 7 1.36694C3.88899 1.36695 1.3672 3.88875 1.36719 6.99976C1.36719 10.1108 3.88899 12.6326 7 12.6326C10.111 12.6326 12.6328 10.1108 12.6328 6.99976ZM13.8582 6.99976C13.8582 10.7873 10.7876 13.8579 7 13.8579C3.21244 13.8579 0.141846 10.7873 0.141846 6.99976C0.141857 3.2122 3.21245 0.141612 7 0.141602C10.7876 0.141602 13.8581 3.21219 13.8582 6.99976Z",
+				fill: "currentColor"
+			}));
+		}
 		/**
 		* Plugin-original companions for learning-domain glyphs the host set does not
 		* carry (lock/star/book/crown/bolt/power/pin/flame) — authored here in the
@@ -556,6 +1006,30 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				});
 				this.refresh();
 			}
+			/** Save a learner selection as a record-zone note (the highlight anchor is the quote). */
+			async addUserNote(lessonId, quote) {
+				await fetchJson("/lookatstudy/api/note/user", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({
+						lessonId,
+						quote
+					})
+				});
+				this.refresh();
+			}
+			/** Record one SM-2 self-rating (1 again / 4 remembered / 5 mastered). */
+			async recordReview(lessonId, quality) {
+				await fetchJson("/lookatstudy/api/review", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({
+						lessonId,
+						quality
+					})
+				});
+				this.refresh();
+			}
 			/** Delete one notebook entry from a lesson's Cornell zones. */
 			async deleteNote(lessonId, noteId) {
 				await fetchJson("/lookatstudy/api/note/delete", {
@@ -643,6 +1117,8 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				searchLessons: studyStore.searchLessons.bind(studyStore),
 				deleteCourse: studyStore.deleteCourse.bind(studyStore),
 				deleteNote: studyStore.deleteNote.bind(studyStore),
+				addUserNote: studyStore.addUserNote.bind(studyStore),
+				recordReview: studyStore.recordReview.bind(studyStore),
 				bindLessonSession: studyStore.bindLessonSession.bind(studyStore)
 			};
 		}
@@ -822,6 +1298,12 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 		}
 		//#endregion
 		//#region src/client/enhance.ts
+		var enhance_exports = /* @__PURE__ */ __exportAll({
+			enhanceCode: () => enhanceCode,
+			enhanceDiagrams: () => enhanceDiagrams,
+			enhanceMath: () => enhanceMath,
+			enhanceRendered: () => enhanceRendered
+		});
 		/**
 		* Post-render blackboard enhancement (SPEC Phase 2): math (KaTeX), code
 		* highlighting (shiki), and mermaid diagrams — every dependency loaded from a
@@ -1445,8 +1927,8 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			"col.tutor": "导师",
 			"col.bb": "黑板",
 			"pane.rail": "课程",
-			"pane.tutor": "导师",
-			"pane.bb": "黑板",
+			"pane.chat": "对话",
+			"pane.note": "黑板",
 			"viewtab.teach": "讲解",
 			"viewtab.cmap": "概念图",
 			"viewtab.cmap.title": "本课概念之间的关系图",
@@ -1470,6 +1952,71 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			"rail.empty.placeholder": "GitHub 仓库链接,如 microsoft/AI-For-Beginners",
 			"rail.empty.button": "导入",
 			"composer.send": "发送",
+			"quiz.card.title": "练习",
+			"quiz.progress": "{cur}/{total}",
+			"quiz.next": "下一题",
+			"quiz.finish": "看成绩单",
+			"quiz.score": "成绩：{correct}/{total}",
+			"quiz.right": "答对了",
+			"quiz.wrong": "答错了",
+			"quiz.youChose": "你选了",
+			"quiz.answer": "正确答案",
+			"quiz.hook": "练习卡完成：{correct}/{total} 正确。请简短点评，针对错题讲讲思路。",
+			"quiz.action.explain-wrong": "讲讲错题",
+			"quiz.action.retry": "再来一组",
+			"quiz.action.go-deeper": "深入原理",
+			"quiz.action.mark-mastered": "标记我掌握了",
+			"quiz.action.markMastered.hint": "会让导师出综合题检验，通过即标记掌握",
+			"quiz.action.next-topic": "下一个知识点",
+			"artifact.lines": "第 {from}-{to} 行：",
+			"artifact.expand": "放大查看",
+			"artifact.guess.title": "猜一猜",
+			"artifact.guess.pick": "我选「{label}」",
+			"artifact.guess.wait": "已记下你的直觉——导师下回合揭晓，看看你想得对不对",
+			"artifact.sedimented": "有新的学习产物沉淀进笔记",
+			"zone.artifacts": "AI 产物",
+			"note.quote.ask": "提问这段",
+			"note.quote.save": "加到笔记",
+			"note.quote.template": "请讲解这段：「{text}」",
+			"note.saved": "已存入记录区笔记",
+			"review.rate.title": "复习自评——这课现在记得多牢？",
+			"review.again": "再来一次",
+			"review.remembered": "记住了",
+			"review.mastered": "完全掌握",
+			"review.done.good": "已安排下次复习",
+			"review.done.again": "明天再来一遍",
+			"review.jump": "点开这一课去复习",
+			"review.nudge": "有 {n} 课到了复习时间，先回来练一遍？",
+			"review.nudge.go": "去复习",
+			"rail.search.jump": "打开这一课",
+			"proposal.banner": "《{lesson}》可以提前毕业了",
+			"proposal.accept": "接受",
+			"proposal.decline": "再练练",
+			"proposal.accept.msg": "我接受《{lesson}》的掌握度提议，帮我标记为掌握。",
+			"proposal.decline.msg": "《{lesson}》我先再练练，暂不接受提前毕业。",
+			"tutor.thinking": "导师思考中…",
+			"header.xp": "经验值 {xp}",
+			"header.streak": "连续学习天数",
+			"header.level": "等级",
+			"map.node.locked": "锁定 — 先完成前面的课时",
+			"map.node.due": "到了复习时间",
+			"map.exam.locked": "考试未解锁 — 本章节全部课时掌握度 ≥50% 后开放",
+			"companion.poke": "戳一戳伴学伙伴",
+			"companion.poked": "伴学伙伴向你眨了眨眼",
+			"companion.form.ember": "小焰",
+			"companion.form.frost": "霜绒",
+			"companion.form.moss": "苔芽",
+			"companion.form.star": "星尘",
+			"companion.form.ink": "墨墨",
+			"settings.companion": "伴学伙伴",
+			"settings.companion.hint": "选择学习面板右下角的伴学生物形态。",
+			"quiz.msg.explain-wrong": "我刚才有题答错了，帮我讲讲为什么错、正确的思路是什么。",
+			"quiz.msg.retry": "再来一组类似的题巩固一下。",
+			"quiz.msg.go-deeper": "这组我答得不错，帮我深入讲讲背后的原理和容易混淆的地方。",
+			"quiz.msg.mark-mastered": "这课我觉得掌握了，帮我确认一下——出个综合题检验，通过了就标记为掌握。",
+			"quiz.msg.next-topic": "进入下一个知识点。",
+			"toast.region": "通知",
+			"toast.close": "关闭",
 			"composer.busy": "导师正在回复…",
 			"rail.empty.demo": "导入示例课程",
 			"rail.mastered": "毕业 {mastered}/{total} 课",
@@ -1583,8 +2130,8 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			"col.tutor": "Tutor",
 			"col.bb": "Blackboard",
 			"pane.rail": "Courses",
-			"pane.tutor": "Tutor",
-			"pane.bb": "Board",
+			"pane.chat": "Chat",
+			"pane.note": "Board",
 			"viewtab.teach": "Teach",
 			"viewtab.cmap": "Concepts",
 			"viewtab.cmap.title": "The lesson's concepts relate",
@@ -1608,6 +2155,71 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			"rail.empty.placeholder": "GitHub repo link, e.g. microsoft/AI-For-Beginners",
 			"rail.empty.button": "Import",
 			"composer.send": "Send",
+			"quiz.card.title": "Practice",
+			"quiz.progress": "{cur}/{total}",
+			"quiz.next": "Next",
+			"quiz.finish": "See score",
+			"quiz.score": "Score: {correct}/{total}",
+			"quiz.right": "Correct",
+			"quiz.wrong": "Wrong",
+			"quiz.youChose": "You chose",
+			"quiz.answer": "Answer",
+			"quiz.hook": "Practice card finished: {correct}/{total} correct. Please comment briefly and walk through the wrong ones.",
+			"quiz.action.explain-wrong": "Explain my wrong answers",
+			"quiz.action.retry": "Another set",
+			"quiz.action.go-deeper": "Go deeper",
+			"quiz.action.mark-mastered": "Mark me as mastered",
+			"quiz.action.markMastered.hint": "Asks the tutor to verify with a final question, then marks mastery",
+			"quiz.action.next-topic": "Next topic",
+			"artifact.lines": "Lines {from}-{to}: ",
+			"artifact.expand": "Expand",
+			"artifact.guess.title": "Take a guess",
+			"artifact.guess.pick": "I pick \"{label}\"",
+			"artifact.guess.wait": "Your instinct is noted — the tutor reveals next turn",
+			"artifact.sedimented": "A new artifact settled into the notebook",
+			"zone.artifacts": "AI artifacts",
+			"note.quote.ask": "Ask about this",
+			"note.quote.save": "Add note",
+			"note.quote.template": "Please explain this passage: \"{text}\"",
+			"note.saved": "Saved to the record zone",
+			"review.rate.title": "Review self-check — how well do you remember?",
+			"review.again": "Again",
+			"review.remembered": "Remembered",
+			"review.mastered": "Mastered",
+			"review.done.good": "Next review scheduled",
+			"review.done.again": "Back again tomorrow",
+			"review.jump": "Open this lesson to review",
+			"review.nudge": "{n} lessons are due for review — come practice first?",
+			"review.nudge.go": "Review now",
+			"rail.search.jump": "Open this lesson",
+			"proposal.banner": "{lesson} is ready to graduate early",
+			"proposal.accept": "Accept",
+			"proposal.decline": "Keep practicing",
+			"proposal.accept.msg": "I accept the mastery proposal for \"{lesson}\" — mark it mastered.",
+			"proposal.decline.msg": "I want more practice on \"{lesson}\" before graduating.",
+			"tutor.thinking": "The tutor is thinking…",
+			"header.xp": "{xp} XP",
+			"header.streak": "Day streak",
+			"header.level": "Level",
+			"map.node.locked": "Locked — finish the previous lessons first",
+			"map.node.due": "Due for review",
+			"map.exam.locked": "Exam locked — every lesson in this section needs ≥50% mastery",
+			"companion.poke": "Poke the companion",
+			"companion.poked": "The companion winks at you",
+			"companion.form.ember": "Ember",
+			"companion.form.frost": "Frost",
+			"companion.form.moss": "Moss",
+			"companion.form.star": "Stardust",
+			"companion.form.ink": "Ink",
+			"settings.companion": "Companion",
+			"settings.companion.hint": "Choose the companion creature in the study panel corner.",
+			"quiz.msg.explain-wrong": "I got some questions wrong — walk me through why and the right line of thinking.",
+			"quiz.msg.retry": "Give me another similar set to consolidate.",
+			"quiz.msg.go-deeper": "I did well on this set — go deeper into the principles and common confusions.",
+			"quiz.msg.mark-mastered": "I feel I have mastered this lesson — verify me with a final question and mark it mastered if I pass.",
+			"quiz.msg.next-topic": "Move on to the next topic.",
+			"toast.region": "Notifications",
+			"toast.close": "Close",
 			"composer.busy": "The tutor is replying…",
 			"rail.empty.demo": "Import the demo course",
 			"rail.mastered": "{mastered}/{total} lessons graduated",
@@ -2356,6 +2968,782 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			}
 		};
 		//#endregion
+		//#region src/client/toast.ts
+		/** Per-severity defaults (upstream Toast.tsx): error 6s, warning 5s, rest 4s. */
+		const SEVERITY_DURATION = {
+			default: 4e3,
+			success: 4e3,
+			info: 4e3,
+			warning: 5e3,
+			error: 6e3
+		};
+		const browserScheduler = (fn, ms) => {
+			const handle = window.setTimeout(fn, ms);
+			return () => {
+				window.clearTimeout(handle);
+			};
+		};
+		var ToastStore = class {
+			items = [];
+			nextId = 0;
+			listeners = /* @__PURE__ */ new Set();
+			cancellers = /* @__PURE__ */ new Map();
+			scheduler;
+			constructor(scheduler = browserScheduler) {
+				this.scheduler = scheduler;
+			}
+			getSnapshot() {
+				return this.items;
+			}
+			subscribe(listener) {
+				this.listeners.add(listener);
+				return () => {
+					this.listeners.delete(listener);
+				};
+			}
+			emit() {
+				for (const listener of this.listeners) listener();
+			}
+			/** Enqueue one toast; its auto-exit is scheduled at its duration. */
+			show(message, opts) {
+				const severity = opts?.severity ?? "default";
+				const id = ++this.nextId;
+				const item = {
+					id,
+					message,
+					severity,
+					duration: opts?.duration ?? SEVERITY_DURATION[severity],
+					action: opts?.action,
+					exiting: false
+				};
+				this.items = [...this.items, item];
+				this.cancellers.set(id, this.scheduler(() => this.startExit(id), item.duration));
+				this.emit();
+				return id;
+			}
+			/** Begin the exit (dismiss click or the duration timer); cancels the timer. */
+			startExit(id) {
+				const cancel = this.cancellers.get(id);
+				if (cancel !== void 0) {
+					cancel();
+					this.cancellers.delete(id);
+				}
+				this.items = this.items.map((t) => t.id === id ? {
+					...t,
+					exiting: true
+				} : t);
+				this.emit();
+			}
+			/** Actually remove — called by the view when the exit animation ends. */
+			finish(id) {
+				this.items = this.items.filter((t) => t.id !== id);
+				this.cancellers.delete(id);
+				this.emit();
+			}
+			/** Drop everything now (the panel unmounted — nothing outlives the panel). */
+			clear() {
+				for (const cancel of this.cancellers.values()) cancel();
+				this.cancellers.clear();
+				this.items = [];
+				this.emit();
+			}
+		};
+		/** The panel-wide singleton stack; consumers call showStudyToast. */
+		const toastStore = new ToastStore();
+		function showStudyToast(message, opts) {
+			return toastStore.show(message, opts);
+		}
+		/**
+		* The exits after one finished card — never fewer than two (the anti-dead-end
+		* promise). Wrong answers → patch the hole first; perfect + near-mastered →
+		* offer the mastery exit; perfect + already graduated → move on.
+		* Pure port of upstream getPostQuizActions.
+		*/
+		function getPostQuizActions(score, mastery) {
+			const { correct, total } = score;
+			const allCorrect = total > 0 && correct === total;
+			const hasWrong = total > 0 && correct < total;
+			const alreadyMastered = mastery !== null && mastery >= .9;
+			const nearMastered = mastery !== null && mastery >= .85;
+			if (hasWrong) return [{
+				id: "explain-wrong",
+				advancesMastery: false
+			}, {
+				id: "retry",
+				advancesMastery: false
+			}];
+			if (allCorrect && alreadyMastered) return [{
+				id: "next-topic",
+				advancesMastery: false
+			}, {
+				id: "go-deeper",
+				advancesMastery: false
+			}];
+			if (allCorrect && nearMastered) return [{
+				id: "mark-mastered",
+				advancesMastery: true
+			}, {
+				id: "go-deeper",
+				advancesMastery: false
+			}];
+			if (allCorrect) return [{
+				id: "go-deeper",
+				advancesMastery: false
+			}, {
+				id: "retry",
+				advancesMastery: false
+			}];
+			return [{
+				id: "explain-wrong",
+				advancesMastery: false
+			}, {
+				id: "retry",
+				advancesMastery: false
+			}];
+		}
+		/** localStorage key (upstream quizProgressKey semantics: per artifact). */
+		function quizProgressKey(lessonId, artifactId) {
+			return `dsh-plugin-lookatstudy:quiz:${lessonId}:${artifactId}`;
+		}
+		function loadQuizProgress(lessonId, artifactId, questionCount, storage = localStorage) {
+			try {
+				const raw = storage.getItem(quizProgressKey(lessonId, artifactId));
+				if (raw === null) return {
+					answers: Array(questionCount).fill(-1),
+					done: false
+				};
+				const parsed = JSON.parse(raw);
+				const answers = Array.isArray(parsed.answers) ? parsed.answers.map((a) => typeof a === "number" ? a : -1) : [];
+				const padded = Array(questionCount).fill(-1);
+				for (let i = 0; i < Math.min(answers.length, questionCount); i += 1) padded[i] = answers[i];
+				return {
+					answers: padded,
+					done: parsed.done === true
+				};
+			} catch {
+				return {
+					answers: Array(questionCount).fill(-1),
+					done: false
+				};
+			}
+		}
+		function saveQuizProgress(lessonId, artifactId, progress, storage = localStorage) {
+			try {
+				storage.setItem(quizProgressKey(lessonId, artifactId), JSON.stringify(progress));
+			} catch {}
+		}
+		/** The score over recorded answers (pure). */
+		function quizScore(data, answers) {
+			let correct = 0;
+			let total = 0;
+			data.questions.forEach((q, i) => {
+				const choice = answers[i];
+				if (choice === void 0 || choice < 0) return;
+				total += 1;
+				if (choice === q.answer) correct += 1;
+			});
+			return {
+				correct,
+				total
+			};
+		}
+		const ACTION_ICONS = {
+			"explain-wrong": IconBookFill16,
+			"retry": IconRefreshOutline16,
+			"go-deeper": IconBoltFill16,
+			"mark-mastered": IconCrownFill16,
+			"next-topic": IconStarFill16
+		};
+		/**
+		* The card: one question at a time, click-to-answer (instant local judge +
+		* explanation reveal — the cursor is explicit, so the reveal is never skipped),
+		* progress persisted per artifact; the score screen is an explicit step, and
+		* on first arrival its completion hook goes to the tutor exactly once.
+		*/
+		function QuizCard({ lessonId, artifactId, data, masteryPct, send, onFinished }) {
+			const questions = data.questions;
+			const [progress, setProgress] = (0, react.useState)(() => loadQuizProgress(lessonId, artifactId, questions.length));
+			const [cursor, setCursor] = (0, react.useState)(0);
+			const [showScore, setShowScore] = (0, react.useState)(false);
+			const [hookSent, setHookSent] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				const next = loadQuizProgress(lessonId, artifactId, questions.length);
+				setProgress(next);
+				setShowScore(next.done);
+				const firstUnanswered = next.answers.findIndex((a) => a < 0);
+				setCursor(firstUnanswered === -1 ? questions.length - 1 : firstUnanswered);
+				setHookSent(false);
+			}, [
+				lessonId,
+				artifactId,
+				questions.length
+			]);
+			const allAnswered = progress.answers.every((a) => a >= 0);
+			const score = quizScore(data, progress.answers);
+			const mastery = masteryPct === null ? null : masteryPct / 100;
+			(0, react.useEffect)(() => {
+				if (!showScore || !allAnswered || hookSent) return;
+				setHookSent(true);
+				onFinished?.(score.correct === score.total);
+				const next = {
+					answers: [...progress.answers],
+					done: true
+				};
+				setProgress(next);
+				saveQuizProgress(lessonId, artifactId, next);
+				send(tr("quiz.hook", {
+					correct: score.correct,
+					total: score.total
+				}));
+			}, [
+				showScore,
+				allAnswered,
+				hookSent,
+				lessonId,
+				artifactId,
+				progress.answers,
+				score.correct,
+				score.total,
+				send
+			]);
+			const answer = (choice) => {
+				const next = {
+					answers: [...progress.answers],
+					done: progress.done
+				};
+				next.answers[cursor] = choice;
+				setProgress(next);
+				saveQuizProgress(lessonId, artifactId, next);
+			};
+			if (showScore && allAnswered) {
+				const actions = getPostQuizActions(score, mastery);
+				return (0, react.createElement)("div", {
+					className: "lks-qcard",
+					"data-lks-quiz": artifactId
+				}, (0, react.createElement)("div", { className: "lks-qcard-head" }, (0, react.createElement)(IconStarFill16, { size: 14 }), tr("quiz.score", {
+					correct: score.correct,
+					total: score.total
+				})), (0, react.createElement)("div", { className: "lks-qcard-review" }, ...questions.map((q, i) => {
+					const choice = progress.answers[i] ?? -1;
+					const right = choice === q.answer;
+					return (0, react.createElement)("div", {
+						key: i,
+						className: `lks-qcard-q review${right ? "" : " wrong"}`
+					}, (0, react.createElement)("div", { className: "lks-qcard-prompt" }, `${i + 1}. ${q.prompt}`), (0, react.createElement)("div", { className: "lks-qcard-ans" }, right ? "" : `${tr("quiz.youChose")}：${q.options[choice] ?? "—"} · `, `${tr("quiz.answer")}：${q.options[q.answer] ?? "—"}`), (0, react.createElement)("div", { className: "lks-qcard-expl" }, q.explanation));
+				})), (0, react.createElement)("div", { className: "lks-qcard-actions" }, ...actions.map((a) => (0, react.createElement)("button", {
+					key: a.id,
+					className: "lks-qcard-action",
+					title: a.advancesMastery ? tr("quiz.action.markMastered.hint") : void 0,
+					onClick: () => {
+						send(tr(`quiz.msg.${a.id}`));
+					}
+				}, (0, react.createElement)(ACTION_ICONS[a.id], { size: 13 }), tr(`quiz.action.${a.id}`)))));
+			}
+			const q = questions[cursor];
+			const chosen = progress.answers[cursor] ?? -1;
+			const options = q.options.map((opt, i) => {
+				const picked = chosen === i;
+				const isRight = i === q.answer;
+				return (0, react.createElement)("button", {
+					key: i,
+					className: `lks-qcard-opt${chosen < 0 ? "" : picked ? isRight ? " right" : " wrong" : isRight ? " right dim" : ""}`,
+					disabled: chosen >= 0,
+					onClick: () => {
+						answer(i);
+					}
+				}, opt);
+			});
+			const explanation = chosen < 0 ? null : (0, react.createElement)("div", { className: "lks-qcard-expl" }, `${chosen === q.answer ? tr("quiz.right") : tr("quiz.wrong")} — ${q.explanation}`, (0, react.createElement)("div", { style: { marginTop: "6px" } }, (0, react.createElement)("button", {
+				className: "lks-qcard-next",
+				onClick: () => {
+					if (cursor + 1 < questions.length) setCursor(cursor + 1);
+					else setShowScore(true);
+				}
+			}, cursor + 1 < questions.length ? tr("quiz.next") : tr("quiz.finish"))));
+			return (0, react.createElement)("div", {
+				className: "lks-qcard",
+				"data-lks-quiz": artifactId
+			}, (0, react.createElement)("div", { className: "lks-qcard-head" }, (0, react.createElement)(IconBookFill16, { size: 14 }), data.title ?? tr("quiz.card.title"), (0, react.createElement)("span", { className: "lks-qcard-count" }, tr("quiz.progress", {
+				cur: cursor + 1,
+				total: questions.length
+			}))), (0, react.createElement)("div", { className: "lks-qcard-q" }, (0, react.createElement)("div", { className: "lks-qcard-prompt" }, q.prompt), (0, react.createElement)("div", { className: "lks-qcard-opts" }, ...options), explanation));
+		}
+		//#endregion
+		//#region src/client/artifact-cards.tsx
+		/**
+		* The artifact cards (0.15.0 P1b, upstream artifacts port): compare tables,
+		* code walkthroughs, mermaid diagrams (with the expand modal), and the
+		* opening guess — plus the seen-tracking that feeds the notebook badge and
+		* the "new artifact" toast. Rendering is lazy where it is heavy (mermaid via
+		* the enhance pipeline); everything else is plain dsw-token DOM.
+		* @module dsh-plugin-lookatstudy/client/artifact-cards
+		*/
+		/** localStorage key for the artifact ids the learner has already seen. */
+		function seenArtifactsKey(lessonId) {
+			return `dsh-plugin-lookatstudy:seen-artifacts:${lessonId}`;
+		}
+		/** Which artifact ids are new (not yet seen); pure over the stored set. */
+		function unseenArtifacts(lessonId, artifacts, storage = localStorage) {
+			let seen;
+			try {
+				const raw = storage.getItem(seenArtifactsKey(lessonId));
+				seen = new Set(Array.isArray(JSON.parse(raw ?? "[]")) ? JSON.parse(raw ?? "[]") : []);
+			} catch {
+				seen = /* @__PURE__ */ new Set();
+			}
+			return artifacts.filter((a) => !seen.has(a.id)).map((a) => a.id);
+		}
+		/** Mark artifact ids seen (opening the notebook counts as seeing them). */
+		function markArtifactsSeen(lessonId, ids, storage = localStorage) {
+			try {
+				let seen = [];
+				try {
+					const parsed = JSON.parse(storage.getItem(seenArtifactsKey(lessonId)) ?? "[]");
+					if (Array.isArray(parsed)) seen = parsed.filter((x) => typeof x === "string");
+				} catch {}
+				storage.setItem(seenArtifactsKey(lessonId), JSON.stringify([.../* @__PURE__ */ new Set([...seen, ...ids])]));
+			} catch {}
+		}
+		/** The cards render mermaid through the shared CDN pipeline
+		* (enhanceDiagrams consumes pre > code.lang-mermaid blocks). */
+		async function renderMermaidInto(el, code, onError) {
+			try {
+				const { enhanceDiagrams } = await Promise.resolve().then(() => enhance_exports);
+				el.textContent = "";
+				const pre = document.createElement("pre");
+				const codeEl = document.createElement("code");
+				codeEl.className = "lang-mermaid";
+				codeEl.textContent = code;
+				pre.appendChild(codeEl);
+				el.appendChild(pre);
+				if (await enhanceDiagrams(el) === 0) onError();
+			} catch {
+				onError();
+			}
+		}
+		/** Compare table card (headers + rows). */
+		function CompareTableCard({ artifact }) {
+			const headers = artifact.data.headers ?? [];
+			const rows = artifact.data.rows ?? [];
+			return (0, react.createElement)("div", {
+				className: "lks-acard",
+				"data-lks-artifact": artifact.id
+			}, (0, react.createElement)("div", { className: "lks-acard-head" }, artifact.title), (0, react.createElement)("table", { className: "lks-acard-table" }, (0, react.createElement)("thead", null, (0, react.createElement)("tr", null, ...headers.map((h, i) => (0, react.createElement)("th", { key: i }, h)))), (0, react.createElement)("tbody", null, ...rows.map((row, r) => (0, react.createElement)("tr", { key: r }, ...row.map((c, i) => (0, react.createElement)("td", { key: i }, c)))))));
+		}
+		/** Code walkthrough card: line-numbered code + per-segment notes. */
+		function CodeWalkthroughCard({ artifact }) {
+			const language = typeof artifact.data.language === "string" ? artifact.data.language : "text";
+			const code = typeof artifact.data.code === "string" ? artifact.data.code : "";
+			const annotations = artifact.data.annotations ?? [];
+			const lines = code.split("\n");
+			return (0, react.createElement)("div", {
+				className: "lks-acard",
+				"data-lks-artifact": artifact.id
+			}, (0, react.createElement)("div", { className: "lks-acard-head" }, `${artifact.title} · ${language}`), (0, react.createElement)("pre", { className: "lks-acard-code" }, ...lines.map((line, i) => (0, react.createElement)("span", {
+				key: i,
+				className: "lks-acard-line"
+			}, (0, react.createElement)("i", null, String(i + 1)), line, "\n"))), (0, react.createElement)("div", { className: "lks-acard-notes" }, ...annotations.map((a, i) => (0, react.createElement)("div", {
+				key: i,
+				className: "lks-acard-note"
+			}, (0, react.createElement)("b", null, `${tr("artifact.lines", {
+				from: a.lineStart,
+				to: a.lineEnd
+			})}`), a.note))));
+		}
+		/** Mermaid diagram card with an expand modal (upstream DiagramViewerModal). */
+		function DiagramCard({ artifact }) {
+			const mermaid = typeof artifact.data.mermaid === "string" ? artifact.data.mermaid : "";
+			const bodyRef = (0, react.useRef)(null);
+			const [failed, setFailed] = (0, react.useState)(false);
+			const [expanded, setExpanded] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				if (bodyRef.current === null) return;
+				renderMermaidInto(bodyRef.current, mermaid, () => {
+					setFailed(true);
+				});
+			}, [mermaid]);
+			const body = failed ? (0, react.createElement)("pre", { className: "lks-acard-code" }, mermaid) : (0, react.createElement)("div", {
+				className: "lks-acard-diagram",
+				ref: bodyRef
+			});
+			return (0, react.createElement)("div", {
+				className: "lks-acard",
+				"data-lks-artifact": artifact.id
+			}, (0, react.createElement)("div", { className: "lks-acard-head" }, artifact.title, (0, react.createElement)("button", {
+				className: "lks-acard-expand",
+				title: tr("artifact.expand"),
+				onClick: () => {
+					setExpanded(true);
+				}
+			}, "⤢")), body, expanded ? (0, react.createElement)("div", {
+				className: "lks-acard-modal",
+				onClick: () => {
+					setExpanded(false);
+				}
+			}, (0, react.createElement)("div", {
+				className: "lks-acard-modal-body",
+				onClick: (e) => {
+					e.stopPropagation();
+				}
+			}, (0, react.createElement)("div", { className: "lks-acard-modal-title" }, artifact.title, (0, react.createElement)("button", {
+				className: "lks-acard-expand",
+				onClick: () => {
+					setExpanded(false);
+				}
+			}, "×")), failed ? (0, react.createElement)("pre", { className: "lks-acard-code" }, mermaid) : (0, react.createElement)("div", { ref: (el) => {
+				if (el !== null) renderMermaidInto(el, mermaid, () => {
+					setFailed(true);
+				});
+			} }))) : null);
+		}
+		/** The opening guess: two big options, click = pick (sent to the tutor, who
+		* reveals next turn); unscored — no right/wrong language anywhere. */
+		function GuessCard({ artifact, send }) {
+			const prompt = typeof artifact.data.prompt === "string" ? artifact.data.prompt : "";
+			const options = artifact.data.options ?? [];
+			const [picked, setPicked] = (0, react.useState)(null);
+			(0, react.useEffect)(() => {
+				setPicked(null);
+			}, [artifact.id]);
+			return (0, react.createElement)("div", {
+				className: "lks-acard lks-acard-guess",
+				"data-lks-artifact": artifact.id
+			}, (0, react.createElement)("div", { className: "lks-acard-head" }, tr("artifact.guess.title")), (0, react.createElement)("div", { className: "lks-acard-guess-prompt" }, prompt), (0, react.createElement)("div", { className: "lks-acard-guess-opts" }, ...options.map((opt) => (0, react.createElement)("button", {
+				key: opt.id,
+				className: `lks-acard-guess-opt${picked === opt.id ? " picked" : ""}`,
+				disabled: picked !== null,
+				onClick: () => {
+					setPicked(opt.id);
+					send(tr("artifact.guess.pick", { label: opt.label }));
+				}
+			}, opt.label))), picked !== null ? (0, react.createElement)("div", { className: "lks-acard-guess-wait" }, tr("artifact.guess.wait")) : null);
+		}
+		/** Dispatch one artifact row to its card. */
+		function ArtifactCard({ artifact, send }) {
+			switch (artifact.artifactType) {
+				case "compare_table": return (0, react.createElement)(CompareTableCard, { artifact });
+				case "code_walkthrough": return (0, react.createElement)(CodeWalkthroughCard, { artifact });
+				case "diagram": return (0, react.createElement)(DiagramCard, { artifact });
+				case "guess": return (0, react.createElement)(GuessCard, {
+					artifact,
+					send
+				});
+				default: return null;
+			}
+		}
+		//#endregion
+		//#region src/client/companion.tsx
+		/**
+		* The companion creature — the upstream 伴学生物's minimal honest DOM port
+		* (0.15.0 P7): a small being in the panel's bottom-right corner with five
+		* forms, a pure mood machine (idle / talking / celebrating / encouraging),
+		* and the a11y iron rule carried over — reduced-motion renders it static.
+		* Upstream's Electron-native life (mic envelopes, typing squeeze, drag-throw)
+		* has no web-panel equivalent and stays unported by design.
+		* @module dsh-plugin-lookatstudy/client/companion
+		*/
+		const COMPANION_FORMS = [
+			{
+				id: "ember",
+				labelKey: "companion.form.ember",
+				body: "#f59e0b",
+				accent: "#dc2626"
+			},
+			{
+				id: "frost",
+				labelKey: "companion.form.frost",
+				body: "#7dd3fc",
+				accent: "#0284c7"
+			},
+			{
+				id: "moss",
+				labelKey: "companion.form.moss",
+				body: "#86efac",
+				accent: "#16a34a"
+			},
+			{
+				id: "star",
+				labelKey: "companion.form.star",
+				body: "#c4b5fd",
+				accent: "#7c3aed"
+			},
+			{
+				id: "ink",
+				labelKey: "companion.form.ink",
+				body: "#cbd5e1",
+				accent: "#334155"
+			}
+		];
+		/** Normalize a stored form id; junk falls back to 小焰 (upstream's default). */
+		function normalizeCompanionForm(stored) {
+			return COMPANION_FORMS.some((f) => f.id === stored) ? stored : "ember";
+		}
+		function storedCompanionForm() {
+			try {
+				return normalizeCompanionForm(localStorage.getItem("dsh-plugin-lookatstudy:companion-form"));
+			} catch {
+				return "ember";
+			}
+		}
+		function storeCompanionForm(id) {
+			try {
+				localStorage.setItem("dsh-plugin-lookatstudy:companion-form", id);
+			} catch {}
+		}
+		/**
+		* The mood machine — pure. `celebrate` and `encourage` are momentary (the
+		* view decays them back through `decay`); `talking` latches while read-aloud
+		* runs; poke is a self-echoing celebration.
+		*/
+		function nextCompanionMood(current, event) {
+			switch (event) {
+				case "talk-start": return "talking";
+				case "talk-end": return current === "talking" ? "idle" : current;
+				case "celebrate":
+				case "poke": return "celebrating";
+				case "encourage": return "encouraging";
+				case "decay": return current === "celebrating" || current === "encouraging" ? "idle" : current;
+				default: return current;
+			}
+		}
+		/** One creature face — the shared skin every form wears. */
+		function CompanionFace({ form, mood }) {
+			const skin = COMPANION_FORMS.find((f) => f.id === form) ?? COMPANION_FORMS[0];
+			const eye = mood === "celebrating" ? "M -3.4 0 q 1.7 -2.6 3.4 0" : "M -3.4 -1.4 a 1.4 1.4 0 1 0 0.01 0";
+			const mouth = mood === "celebrating" ? "M 20 21 q 4 4 8 0" : mood === "encouraging" ? "M 21 22 q 3 -2.5 6 0" : "M 21 21 q 3 2.4 6 0";
+			return (0, react.createElement)("svg", {
+				width: 64,
+				height: 64,
+				viewBox: "0 0 64 64",
+				"aria-hidden": "true"
+			}, (0, react.createElement)("g", null, (0, react.createElement)("circle", {
+				cx: 32,
+				cy: 34,
+				r: 20,
+				fill: skin.body,
+				stroke: skin.accent,
+				strokeWidth: 2
+			}), form === "ember" ? (0, react.createElement)("path", {
+				d: "M32 4 q6 8 3 12 q8 -2 9 6 q4 -1 4 4 l-2 4 H18 l-2 -4 q0 -5 4 -4 q1 -8 9 -6 q-3 -4 3 -12z",
+				fill: skin.accent,
+				opacity: .85
+			}) : form === "star" ? (0, react.createElement)("path", {
+				d: "M32 2 l4 8 9 1 -6.5 6 1.5 9 -8.5 -4.5 -8 4.5 1.5 -9 -6.5 -6 9 -1z",
+				fill: skin.accent,
+				opacity: .85
+			}) : form === "moss" ? (0, react.createElement)("path", {
+				d: "M32 2 q-2 6 2 10 q-8 0 -8 6 H40 q0 -6 -8 -6 q4 -4 0 -10z",
+				fill: skin.accent,
+				opacity: .85
+			}) : form === "ink" ? (0, react.createElement)("path", {
+				d: "M32 2 q8 12 8 18 a8 8 0 1 1 -16 0 q0 -6 8 -18z",
+				fill: skin.accent,
+				opacity: .55
+			}) : (0, react.createElement)("path", {
+				d: "M18 12 l3 5 5 -1 -1 5 5 3 -5 3 1 5 -5 -1 -3 5 -3 -5 -5 1 1 -5 -5 -3 5 -3 -1 -5 5 1z",
+				fill: skin.accent,
+				opacity: .7
+			}), (0, react.createElement)("path", {
+				d: eye,
+				transform: "translate(25 30)",
+				stroke: skin.accent,
+				strokeWidth: 1.6,
+				fill: mood === "celebrating" ? "none" : skin.accent,
+				strokeLinecap: "round"
+			}), (0, react.createElement)("path", {
+				d: eye,
+				transform: "translate(14 30)",
+				stroke: skin.accent,
+				strokeWidth: 1.6,
+				fill: mood === "celebrating" ? "none" : skin.accent,
+				strokeLinecap: "round"
+			}), (0, react.createElement)("path", {
+				d: mouth,
+				stroke: skin.accent,
+				strokeWidth: 1.8,
+				fill: "none",
+				strokeLinecap: "round"
+			})));
+		}
+		/** The creature: fixed bottom-right inside the panel, mood-animated, pokeable. */
+		function Companion({ mood, onPoke }) {
+			const form = storedCompanionForm();
+			return (0, react.createElement)("div", {
+				className: `lks-companion mood-${mood}`,
+				"data-lks-companion": form,
+				title: tr("companion.poke"),
+				role: "button",
+				tabIndex: 0,
+				"aria-label": tr("companion.poke"),
+				onClick: () => {
+					onPoke?.();
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						onPoke?.();
+					}
+				}
+			}, (0, react.createElement)(CompanionFace, {
+				form,
+				mood
+			}));
+		}
+		/** The hook driving one creature instance: event → mood, momentary decay. */
+		function useCompanionMood() {
+			const [mood, setMood] = (0, react.useState)("idle");
+			const moodRef = (0, react.useRef)(mood);
+			moodRef.current = mood;
+			const emit = (event) => {
+				const next = nextCompanionMood(moodRef.current, event);
+				if (next !== moodRef.current) {
+					moodRef.current = next;
+					setMood(next);
+				}
+			};
+			(0, react.useEffect)(() => {
+				if (mood !== "celebrating" && mood !== "encouraging") return;
+				const timer = setTimeout(() => {
+					moodRef.current = nextCompanionMood(moodRef.current, "decay");
+					setMood(moodRef.current);
+				}, 2400);
+				return () => {
+					clearTimeout(timer);
+				};
+			}, [mood]);
+			return {
+				mood,
+				emit
+			};
+		}
+		//#endregion
+		//#region src/client/highlights.ts
+		/**
+		* Locate a selection inside the model text: exact `selected` text search,
+		* disambiguated by a fuzzy `surrounding` fingerprint (the same sentence
+		* appearing twice resolves to the occurrence whose context matches).
+		* @returns the global [start, end) in model.text, or null when absent.
+		*/
+		function locateInModel(model, selected, surrounding) {
+			const needle = selected.trim();
+			if (needle.length < 2) return null;
+			const hits = [];
+			let from = 0;
+			for (;;) {
+				const hit = model.text.indexOf(needle, from);
+				if (hit === -1) break;
+				hits.push(hit);
+				from = hit + 1;
+			}
+			if (hits.length === 0) return null;
+			if (hits.length === 1 || surrounding === void 0 || surrounding.trim() === "") return {
+				start: hits[0],
+				end: hits[0] + needle.length
+			};
+			const finger = surrounding.replace(/\s+/g, "");
+			let best = hits[0];
+			let bestScore = -1;
+			for (const hit of hits) {
+				const context = model.text.slice(Math.max(0, hit - 30), hit + needle.length + 30).replace(/\s+/g, "");
+				let score = 0;
+				for (let i = 0; i < finger.length; i += 4) if (context.includes(finger.slice(i, i + 4))) score += 1;
+				if (score > bestScore) {
+					bestScore = score;
+					best = hit;
+				}
+			}
+			return {
+				start: best,
+				end: best + needle.length
+			};
+		}
+		/** Plan the per-node segments covering global [start, end) — pure. */
+		function planSegments(nodes, start, end) {
+			const segments = [];
+			nodes.forEach((entry, index) => {
+				if (entry.end <= start || entry.start >= end) return;
+				segments.push({
+					index,
+					localStart: Math.max(0, start - entry.start),
+					localEnd: Math.min(entry.end - entry.start, end - entry.start)
+				});
+			});
+			return segments;
+		}
+		/** Build the DOM text model for the prose container (the walker rules mirror
+		*  upstream: skip script/style and KaTeX glyph layers; skip existing marks so
+		*  save-time and apply-time models stay symmetric). */
+		function getTextModel(container, opts) {
+			const nodes = [];
+			let text = "";
+			const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, { acceptNode(node) {
+				const parent = node.parentElement;
+				if (parent === null) return NodeFilter.FILTER_REJECT;
+				const tag = parent.tagName;
+				if (tag === "SCRIPT" || tag === "STYLE") return NodeFilter.FILTER_REJECT;
+				if (parent.closest(".katex-html")) return NodeFilter.FILTER_REJECT;
+				if (parent.closest(".katex-mathml") !== null && parent.closest("annotation") === null) return NodeFilter.FILTER_REJECT;
+				if (opts?.includeMarks !== true && parent.closest("mark.lks-hl") !== null) return NodeFilter.FILTER_REJECT;
+				return NodeFilter.FILTER_ACCEPT;
+			} });
+			let n;
+			while ((n = walker.nextNode()) !== null) {
+				const t = n;
+				const content = t.textContent ?? "";
+				nodes.push({
+					node: t,
+					start: text.length,
+					end: text.length + content.length
+				});
+				text += content;
+			}
+			return {
+				text,
+				nodes
+			};
+		}
+		/** The mark class applied to persisted highlights. */
+		const HIGHLIGHT_MARK = "lks-hl";
+		/**
+		* Apply one highlight range to the live DOM: split the boundary text nodes
+		* and wrap the covering segments in marks. Returns the created marks.
+		*/
+		function wrapRange(model, start, end) {
+			const marks = [];
+			for (const seg of planSegments(model.nodes, start, end)) {
+				const node = model.nodes[seg.index].node;
+				if (node.parentElement === null) continue;
+				if (node.parentElement.closest(`mark.lks-hl`) !== null) continue;
+				const mid = seg.localStart > 0 ? node.splitText(seg.localStart) : node;
+				const localEnd = seg.localEnd - seg.localStart;
+				if (mid.textContent !== null && mid.textContent.length > localEnd) mid.splitText(localEnd);
+				const mark = document.createElement("mark");
+				mark.className = HIGHLIGHT_MARK;
+				mid.parentElement.insertBefore(mark, mid);
+				mark.appendChild(mid);
+				marks.push(mark);
+			}
+			return marks;
+		}
+		/**
+		* Render the persisted highlights for one lesson: each record-zone note with a
+		* quote anchors a mark. Idempotent per call — call on a freshly rendered
+		* (pre-mark) container; the model skips existing marks so re-entry is safe.
+		* @returns how many notes got at least one mark.
+		*/
+		function applyHighlights(container, quotes) {
+			let applied = 0;
+			for (const quote of quotes) {
+				const trimmed = quote.trim();
+				if (trimmed.length < 2) continue;
+				const model = getTextModel(container);
+				const located = locateInModel(model, trimmed, void 0);
+				if (located === null) continue;
+				if (wrapRange(model, located.start, located.end).length > 0) applied += 1;
+			}
+			return applied;
+		}
+		//#endregion
 		//#region src/client/views.tsx
 		/**
 		* Shared pure helpers for the study panel's pieces: chat-row shapes, tree
@@ -2423,6 +3811,56 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			return runs.at(-1) ?? [];
 		}
 		/**
+		* Merge the rail's two search tracks into the results panel: title hits
+		* (lessons whose name matches — they are also filtered into the tree) first,
+		* then full-text hits not already covered, snippets carried for the body
+		* matches. Pure; empty queries yield no panel.
+		*/
+		function mergeRailSearch(query, lessons, textHits) {
+			const keys = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+			if (keys.length === 0) return [];
+			const rows = [];
+			const seen = /* @__PURE__ */ new Set();
+			const matches = (title) => keys.every((k) => title.toLowerCase().includes(k));
+			for (const lesson of lessons) {
+				if (lesson.kind === "exam" || lesson.status === "locked" || !matches(lesson.title)) continue;
+				rows.push({
+					lessonId: lesson.id,
+					title: lesson.title,
+					snippet: "",
+					courseTitle: "",
+					fromTitle: true
+				});
+				seen.add(lesson.id);
+			}
+			for (const hit of textHits) {
+				if (seen.has(hit.lessonId)) continue;
+				rows.push({
+					lessonId: hit.lessonId,
+					title: hit.lessonTitle,
+					snippet: hit.snippet,
+					courseTitle: hit.courseTitle,
+					fromTitle: false
+				});
+				seen.add(hit.lessonId);
+			}
+			return rows.slice(0, 12);
+		}
+		/**
+		* A section's effective openness: the user's explicit toggle (persisted per
+		* course) overrides the frontier-based default. Pure.
+		*/
+		function effectiveOpen(sectionTitle, defaultOpen, overrides) {
+			return overrides[sectionTitle] ?? defaultOpen;
+		}
+		/**
+		* The narrow-mode pane picker: only valid ids, remembering the last choice
+		* (upstream's narrow switcher semantics). Pure.
+		*/
+		function pickNarrowPane(stored) {
+			return stored === "rail" || stored === "chat" || stored === "note" ? stored : "chat";
+		}
+		/**
 		* Default expansion for one rail section: collapsed when every study lesson is
 		* done (mastered) or not yet reachable (locked). The focus lesson's section
 		* stays open; exam nodes never force a section open. Pure.
@@ -2431,6 +3869,248 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			return section.lessons.some((l) => l.focus || l.kind !== "exam" && l.status !== "mastered" && l.status !== "locked");
 		}
 		//#endregion
+		//#region src/vendor/map-layout.ts
+		/** 容器宽度(章节内可用宽度,扣除 padding)。MapRail 章节容器 px-2。 */
+		const CONTAINER_WIDTH = 268;
+		const NODE_RADIUS = 28;
+		const NODE_SPACING_Y = 104;
+		const BALLOON_MARGIN = 18;
+		/** 首节点中心下限(防顶撞上方章节路牌)。MapRail 渲染偏移 +12 + NODE_H/2=38 → wrapper 顶 = y-26 ≥ 8。 */
+		const TOP_PAD = 34;
+		/** y 轴抖动幅度(px)。贪心兜底后,jitter 不再是重叠源,仅负责高低参差。 */
+		const Y_JITTER = 26;
+		/** 绳子下垂量(px,模拟重力)。让贝塞尔像被拽下来的绳子,而非 S 形箭头。 */
+		const ROPE_SAG = 22;
+		/**
+		* 确定性字符串哈希(FNV-1a 变体,32-bit)。
+		* 同输入永远同输出 → 同一节点 id 每次渲染算出的抖动相同 → 气球位置稳定不跳。
+		* 用于气球横向抖动 + bob 相位 + 星点位置 + 天体色切。
+		*/
+		function hashStr(s) {
+			let h = 2166136261;
+			for (let i = 0; i < s.length; i++) {
+				h ^= s.charCodeAt(i);
+				h = Math.imul(h, 16777619);
+			}
+			h ^= h >>> 16;
+			h = Math.imul(h, 2246822507);
+			h ^= h >>> 13;
+			h = Math.imul(h, 3266489909);
+			h ^= h >>> 16;
+			return h >>> 0;
+		}
+		/**
+		* 算某 section 的气球节点坐标 + 绳子连接路径。
+		* 容器高度由 nodes 数量决定(调用方据此设容器 min-height)。
+		*
+		* 抖动算法:v0.6 同时在 x 和 y 两轴抖动 → 气球真正"飘"在空中,
+		* 不再是呆板的直线/微弯列。x 大幅抖动(用满容器宽度),y 在基线上下 ±Y_JITTER。
+		* 两个独立哈希(x 用 seed:i,y 用 seed:i:y)→ 抖动方向不相关,分布更自然。
+		*
+		* v0.8 防重叠:抖动后跑一趟**贪心向下推**(确定性,只增 y,保持单调),
+		*   1) 首节点中心不低于 TOP_PAD —— 防顶撞上方章节路牌;
+		*   2) 相邻节点中心纵向距 ≥ MIN_GAP_Y(= 盒高 + 8px 呼吸)—— 视觉盒永不重叠。
+		* 任何 seed / 任何课数都保证不重叠(verify-map-layout T11 跨 240 种子穷举验证)。
+		*/
+		function computeBalloonLayout(lessonCount, containerWidth = CONTAINER_WIDTH, seed = "") {
+			const nodes = [];
+			const centerX = containerWidth / 2;
+			const maxDrift = containerWidth / 2 - BALLOON_MARGIN - NODE_RADIUS;
+			for (let i = 0; i < lessonCount; i++) {
+				const baseY = TOP_PAD + i * NODE_SPACING_Y;
+				const x = centerX + (hashStr(`${seed}:${i}`) / 4294967295 * 2 - 1) * maxDrift;
+				const y = baseY + (hashStr(`${seed}:${i}:y`) / 4294967295 * 2 - 1) * Y_JITTER;
+				nodes.push({
+					x,
+					y,
+					index: i
+				});
+			}
+			if (nodes.length > 0) {
+				if (nodes[0].y < TOP_PAD) nodes[0].y = TOP_PAD;
+				for (let i = 1; i < nodes.length; i++) {
+					const minY = nodes[i - 1].y + 84;
+					if (nodes[i].y < minY) nodes[i].y = minY;
+				}
+			}
+			const segments = [];
+			for (let i = 0; i < nodes.length - 1; i++) segments.push({
+				from: nodes[i],
+				to: nodes[i + 1],
+				index: i
+			});
+			return {
+				nodes,
+				segments,
+				height: nodes.length === 0 ? 40 : nodes[nodes.length - 1].y + 38 + 10
+			};
+		}
+		/**
+		* 两节点间的绳子贝塞尔(下垂)。
+		* 控制点:y 中点 + ROPE_SAG(向下垂,模拟重力);x 用各自端点 x。
+		* 比原 S 形软,像被拽下来的绳子。
+		*/
+		function balloonSegmentToPath(seg) {
+			const { from, to } = seg;
+			const controlY = (from.y + to.y) / 2 + ROPE_SAG;
+			return `M ${from.x} ${from.y} C ${from.x} ${controlY}, ${to.x} ${controlY}, ${to.x} ${to.y}`;
+		}
+		//#endregion
+		//#region src/client/maprail.tsx
+		/**
+		* MapRail balloon map (P9b) — the upstream v0.28 course map ported onto the
+		* plugin's rail: deterministic balloon layout (vendored mapLayout engine),
+		* sagging bezier ropes with path-draw on walked segments, state bubbles with
+		* 3D sphere lighting, signpost section heads, and the sky backdrop. This is
+		* upstream's own reduced-motion presentation (static layout + balloon-bob
+		* CSS), which is exactly the deterministic half of its physics map.
+		*/
+		/** Upstream bubbleClass port: the four study states + the three exam variants.
+		*  Status→class goes through a table (in_progress → in-progress, like upstream's switch). */
+		const STATUS_CLASS = {
+			locked: "locked",
+			available: "available",
+			in_progress: "in-progress",
+			mastered: "mastered"
+		};
+		function bubbleClasses(lesson, examAllowed) {
+			if (lesson.kind === "exam") {
+				if (!examAllowed) return "lks-bubble lks-exam-locked";
+				return lesson.status === "mastered" ? "lks-bubble lks-exam-passed" : "lks-bubble lks-exam";
+			}
+			return `lks-bubble lks-bubble-${STATUS_CLASS[lesson.status] ?? "locked"}`;
+		}
+		/** A rope segment is "walked" when its FROM node has been opened
+		*  (upstream ropeStyleIsPassed: mastered | in_progress | available). */
+		function ropePassed(from) {
+			return from.status === "mastered" || from.status === "in_progress" || from.status === "available";
+		}
+		/** Deterministic sky preset per course (upstream pickPreset's CSS-essence port). */
+		function pickSky(courseId) {
+			return [
+				"day",
+				"dusk",
+				"night"
+			][hashStr(courseId) % 3];
+		}
+		/** One section: signpost head (still the plugin's collapse toggle) + the balloon field. */
+		function MapSectionView({ section, examAllowed, open, onToggle, onJump }) {
+			const pathRef = (0, react.useRef)(null);
+			const [containerW, setContainerW] = (0, react.useState)(268);
+			(0, react.useEffect)(() => {
+				if (pathRef.current === null) return;
+				const measure = () => {
+					const w = pathRef.current?.clientWidth ?? 268;
+					setContainerW(w > 0 ? w : 268);
+				};
+				measure();
+				const ro = new ResizeObserver(measure);
+				ro.observe(pathRef.current);
+				return () => {
+					ro.disconnect();
+				};
+			}, [open]);
+			const lessons = section.lessons;
+			const layout = computeBalloonLayout(lessons.length, containerW, section.title);
+			return (0, react.createElement)("section", { className: "lks-mapsec" }, (0, react.createElement)("button", {
+				type: "button",
+				className: "lks-signpost",
+				"aria-expanded": String(open),
+				title: open ? tr("rail.section.collapse") : tr("rail.section.expand", { count: section.lessons.length }),
+				onClick: onToggle
+			}, (0, react.createElement)("span", { className: "lks-signpost-num" }, String(section.index + 1)), (0, react.createElement)("span", { className: "lks-signpost-title" }, section.title), (0, react.createElement)("span", { className: "lks-signpost-caret" }, open ? "▾" : "▸")), open && lessons.length > 0 ? (0, react.createElement)("div", {
+				ref: pathRef,
+				className: "lks-mapfield",
+				style: { minHeight: `${String(layout.height)}px` }
+			}, (0, react.createElement)("svg", {
+				className: "lks-mapropes",
+				"aria-hidden": "true",
+				style: { height: `${String(layout.height)}px` }
+			}, ...layout.segments.map((seg) => {
+				const passed = ropePassed(lessons[seg.index] ?? { status: "locked" });
+				return (0, react.createElement)("path", {
+					key: seg.index,
+					d: balloonSegmentToPath(seg),
+					stroke: passed ? "var(--brand)" : "var(--ink-faint)",
+					"stroke-width": passed ? "4" : "2.5",
+					"stroke-opacity": passed ? "0.6" : "0.5",
+					fill: "none",
+					"stroke-linecap": "round",
+					"stroke-dasharray": passed ? "none" : "3 7",
+					style: passed ? {
+						pathLength: 1,
+						animation: "lks-path-draw 600ms var(--ease-out-expo)"
+					} : void 0
+				});
+			})), ...lessons.map((lesson, i) => {
+				const node = layout.nodes[i];
+				if (node === void 0) return null;
+				const h = hashStr(lesson.id);
+				const locked = lesson.status === "locked" || lesson.kind === "exam" && !examAllowed;
+				const showRing = lesson.kind !== "exam" && (lesson.status === "in_progress" || lesson.status === "mastered");
+				const ringPct = lesson.status === "mastered" ? 100 : lesson.status === "in_progress" ? lesson.masteryPct ?? 0 : 0;
+				return (0, react.createElement)("div", {
+					key: lesson.id,
+					className: "lks-mapnode",
+					style: {
+						left: `${String(node.x - 55)}px`,
+						top: `${String(node.y - 38 + 10)}px`,
+						"--bob-delay": `${String(h % 40 / 10)}s`,
+						"--bob-duration": `${String(5 + h % 30 / 10)}s`
+					}
+				}, (0, react.createElement)("button", {
+					type: "button",
+					className: `${bubbleClasses(lesson, examAllowed)}${lesson.focus ? " selected" : ""}`,
+					"aria-disabled": locked || void 0,
+					title: `${lesson.title} — ${lesson.kind === "exam" && !examAllowed ? tr("map.exam.locked") : locked ? tr("map.node.locked") : lesson.due ? tr("map.node.due") : lesson.title}`,
+					onClick: () => {
+						if (!locked) onJump(lesson.id);
+					}
+				}, showRing ? (0, react.createElement)("svg", {
+					className: "lks-bubble-ring",
+					viewBox: "0 0 56 56",
+					"aria-hidden": "true"
+				}, (0, react.createElement)("circle", {
+					cx: 28,
+					cy: 28,
+					r: 25,
+					fill: "none",
+					stroke: "rgb(255 255 255 / 0.2)",
+					"stroke-width": 2.5
+				}), (0, react.createElement)("circle", {
+					cx: 28,
+					cy: 28,
+					r: 25,
+					fill: "none",
+					stroke: lesson.status === "mastered" ? "#ffc800" : "white",
+					"stroke-width": 2.5,
+					"stroke-linecap": "round",
+					"stroke-dasharray": `${String(ringPct / 100 * 157)} 157`
+				})) : null, lesson.kind === "exam" ? locked ? (0, react.createElement)(IconLockFill16, {
+					size: 22,
+					className: "lks-bubble-glyph dim"
+				}) : (0, react.createElement)(IconGoalOutline16, {
+					size: 24,
+					className: "lks-bubble-glyph"
+				}) : lesson.status === "locked" ? (0, react.createElement)(IconLockFill16, {
+					size: 20,
+					className: "lks-bubble-glyph dim"
+				}) : lesson.status === "mastered" ? (0, react.createElement)(IconCrownFill16, {
+					size: 24,
+					className: "lks-bubble-glyph"
+				}) : lesson.status === "in_progress" ? (0, react.createElement)(IconBookFill16, {
+					size: 24,
+					className: "lks-bubble-glyph"
+				}) : (0, react.createElement)(IconStarFill16, {
+					size: 24,
+					className: "lks-bubble-glyph"
+				}), lesson.due && !locked && lesson.kind !== "exam" ? (0, react.createElement)("span", {
+					className: "lks-bubble-due",
+					"aria-label": tr("map.node.due")
+				}, "!") : null), lesson.focus ? (0, react.createElement)("div", { className: "lks-bubble-name" }, lesson.title) : null);
+			})) : null);
+		}
+		//#endregion
 		//#region src/client/panel.tsx
 		/**
 		* The study panel — the sidebar-entry surface that takes over the center
@@ -2469,12 +4149,25 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			["record", "zone.record"],
 			["practice", "zone.practice"]
 		];
-		function statusIcon(kind, status) {
-			if (kind === "exam") return (0, react.createElement)(IconGoalOutline16, { size: 14 });
-			if (status === "mastered") return (0, react.createElement)(IconCrownFill16, { size: 14 });
-			if (status === "in_progress") return (0, react.createElement)(IconBookFill16, { size: 14 });
-			if (status === "available") return (0, react.createElement)(IconStarFill16, { size: 14 });
-			return (0, react.createElement)(IconLockFill16, { size: 14 });
+		/** Toast severity glyph (P6): the state color rides the icon, text stays ink. */
+		function toastIcon(severity) {
+			if (severity === "success") return (0, react.createElement)(IconStarFill16, {
+				size: 14,
+				className: "lks-toast-glyph ok"
+			});
+			if (severity === "warning") return (0, react.createElement)(IconWarningOutline16, {
+				size: 14,
+				className: "lks-toast-glyph warn"
+			});
+			if (severity === "error") return (0, react.createElement)(IconWarningOutline16, {
+				size: 14,
+				className: "lks-toast-glyph err"
+			});
+			if (severity === "info") return (0, react.createElement)(IconGlobeOutline14, {
+				size: 13,
+				className: "lks-toast-glyph info"
+			});
+			return null;
 		}
 		function examOpen(lessons) {
 			return lessons.every((l) => l.kind !== "study" || (l.masteryPct ?? 0) >= 50);
@@ -2540,10 +4233,30 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			const [rows, setRows] = (0, react.useState)([]);
 			const [feedAttached, setFeedAttached] = (0, react.useState)(false);
 			const [draft, setDraft] = (0, react.useState)("");
+			const [narrowPane, setNarrowPane] = (0, react.useState)(pickNarrowPane(null));
 			const lesson = data?.lesson ?? null;
 			const localBound = (0, react.useRef)(null);
 			const streamEl = (0, react.useRef)(null);
 			const boundId = localBound.current ?? (lesson !== null ? data?.lessonSessions[lesson.lessonId] ?? null : null);
+			const nudged = (0, react.useRef)(false);
+			(0, react.useEffect)(() => {
+				if (nudged.current || (data?.dueCount ?? 0) === 0) return;
+				nudged.current = true;
+				showStudyToast(tr("review.nudge", { n: data.dueCount }), {
+					severity: "warning",
+					action: {
+						label: tr("review.nudge.go"),
+						onClick: () => {
+							const first = data?.due[0];
+							if (first !== void 0) setFocus(first.lessonId).catch(() => {});
+						}
+					}
+				});
+			}, [
+				data?.dueCount,
+				data?.due,
+				setFocus
+			]);
 			(0, react.useEffect)(() => {
 				if (boundId === null) {
 					setRows([]);
@@ -2652,14 +4365,29 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 					}
 				})();
 			};
-			const body = (0, react.createElement)("div", { className: "lks14-body" }, (0, react.createElement)(CourseRail, {
+			const companion = useCompanionMood();
+			const setCompanionEvent = companion.emit;
+			const progress = data?.progress ?? null;
+			const body = (0, react.createElement)("div", {
+				className: "lks14-body",
+				"data-pane": narrowPane
+			}, (0, react.createElement)(CourseRail, {
 				data,
 				activate,
 				setFocus,
 				searchLessons,
 				deleteCourse,
 				send
-			}), (0, react.createElement)(ChatPane, {
+			}), (0, react.createElement)("div", { className: "lks14-righthalf" }, (0, react.createElement)("div", { className: "lks14-appheader" }, (0, react.createElement)("span", { className: "lks-hdr-title" }, lesson?.courseTitle ?? tr("tab.label")), (0, react.createElement)("span", {
+				className: "lks-hdr-xp",
+				title: tr("header.xp", { xp: progress?.totalXp ?? 0 })
+			}, (0, react.createElement)("span", { className: "lks-hdr-stat" }, "⚡"), (0, react.createElement)("span", { className: "lks-hdr-xpbar" }, (0, react.createElement)("i", { style: { width: `${Math.min(100, progress?.levelPct ?? 0)}%` } }))), (0, react.createElement)("span", {
+				className: "lks-hdr-stat lks-hdr-streak",
+				title: tr("header.streak")
+			}, "🔥", String(progress?.streak ?? 0)), (0, react.createElement)("span", {
+				className: "lks-hdr-stat",
+				title: tr("header.level")
+			}, `Lv${String(progress?.level ?? 1)}`)), (0, react.createElement)("div", { className: "lks14-row" }, (0, react.createElement)(ChatPane, {
 				data,
 				lesson,
 				rows,
@@ -2670,15 +4398,78 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				draft,
 				setDraft,
 				send,
-				setMode
+				setMode,
+				narrowPane,
+				companionEvent: setCompanionEvent
 			}), (0, react.createElement)(NotebookPane, {
 				data,
-				deleteNote
-			}));
+				deleteNote,
+				send,
+				companionEvent: setCompanionEvent
+			}))));
 			return (0, react.createElement)("div", {
-				className: "lks14",
+				className: "lks14 lks-ui",
 				"data-lks-panel": ""
-			}, body);
+			}, (0, react.createElement)(Companion, {
+				mood: companion.mood,
+				onPoke: () => {
+					setCompanionEvent("poke");
+					showStudyToast(tr("companion.poked"), { severity: "success" });
+				}
+			}), (0, react.createElement)("div", { className: "lks14-switch" }, ...[
+				"rail",
+				"chat",
+				"note"
+			].map((pane) => (0, react.createElement)("button", {
+				key: pane,
+				className: `lks14-switch-btn${narrowPane === pane ? " on" : ""}`,
+				"aria-pressed": String(narrowPane === pane),
+				onClick: () => {
+					setNarrowPane(pane);
+				}
+			}, tr(`pane.${pane}`)))), body, (0, react.createElement)(StudyToastStack));
+		}
+		/** P6: the panel's toast stack (upstream Toast port) — severity capsules,
+		* top-center, auto-dismiss with an exit-animation handshake; the store clears
+		* on unmount so no toast outlives the panel. */
+		function StudyToastStack() {
+			const [items, setItems] = (0, react.useState)([]);
+			(0, react.useEffect)(() => {
+				const update = () => {
+					setItems([...toastStore.getSnapshot()]);
+				};
+				update();
+				const unsubscribe = toastStore.subscribe(update);
+				return () => {
+					unsubscribe();
+					toastStore.clear();
+				};
+			}, []);
+			return (0, react.createElement)("div", {
+				className: "lks-toasts",
+				role: "region",
+				"aria-live": "polite",
+				"aria-label": tr("toast.region")
+			}, ...items.map((t) => (0, react.createElement)("div", {
+				key: t.id,
+				className: `lks-toast${t.exiting ? " exiting" : ""}`,
+				"data-severity": t.severity,
+				onAnimationEnd: t.exiting ? () => {
+					toastStore.finish(t.id);
+				} : void 0
+			}, toastIcon(t.severity), (0, react.createElement)("span", { className: "lks-toast-text" }, t.message), t.action === void 0 ? null : (0, react.createElement)("button", {
+				className: "lks-toast-action",
+				onClick: () => {
+					t.action?.onClick?.();
+					toastStore.startExit(t.id);
+				}
+			}, t.action.label), (0, react.createElement)("button", {
+				className: "lks-toast-close",
+				"aria-label": tr("toast.close"),
+				onClick: () => {
+					toastStore.startExit(t.id);
+				}
+			}, "×"))));
 		}
 		/** Module-level shell handle so the panel can suppress hand-back on internal opens. */
 		const PANEL_SHELL = { current: null };
@@ -2689,6 +4480,14 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 		function CourseRail({ data, activate, setFocus, searchLessons, deleteCourse, send }) {
 			const [selectedCourse, setSelectedCourse] = (0, react.useState)("");
 			const [query, setQuery] = (0, react.useState)("");
+			const [searchRows, setSearchRows] = (0, react.useState)([]);
+			const [sectionOverrides, setSectionOverrides] = (0, react.useState)({});
+			const toggleSection = (title, next) => {
+				setSectionOverrides((cur) => ({
+					...cur,
+					[title]: next
+				}));
+			};
 			const [confirmDelete, setConfirmDelete] = (0, react.useState)(false);
 			const [showImport, setShowImport] = (0, react.useState)(false);
 			const [error, setError] = (0, react.useState)(null);
@@ -2710,6 +4509,36 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 					window.removeEventListener("keydown", onKey);
 				};
 			}, [confirmDelete]);
+			(0, react.useEffect)(() => {
+				if (query.trim().length < 2 || data === null) {
+					setSearchRows([]);
+					return;
+				}
+				let cancelled = false;
+				const timer = setTimeout(() => {
+					searchLessons(query).then((textHits) => {
+						if (cancelled) return;
+						const lessons = (data.courses.find((c) => c.courseId === (data.courses.some((x) => x.courseId === selectedCourse) ? selectedCourse : data.courses[0]?.courseId))?.sections ?? []).flatMap((s) => s.lessons);
+						setSearchRows(mergeRailSearch(query, lessons.map((l) => ({
+							id: l.id,
+							title: l.title,
+							status: l.status,
+							kind: l.kind
+						})), textHits));
+					}).catch(() => {
+						if (!cancelled) setSearchRows([]);
+					});
+				}, 250);
+				return () => {
+					cancelled = true;
+					clearTimeout(timer);
+				};
+			}, [
+				query,
+				selectedCourse,
+				data,
+				searchLessons
+			]);
 			const body = data === null ? (0, react.createElement)("div", { className: "lks14-empty" }, tr("loading")) : data.courses.length === 0 ? (0, react.createElement)("div", { className: "lks14-empty" }, tr("rail.empty.title"), (0, react.createElement)("br"), (0, react.createElement)("button", {
 				className: "lks-btn primary",
 				style: { margin: "10px 0" },
@@ -2719,7 +4548,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			}, (0, react.createElement)(IconDownloadOutline16, null), tr("rail.empty.demo")), (0, react.createElement)(ImportRow, { send })) : (() => {
 				const courseId = data.courses.some((c) => c.courseId === selectedCourse) ? selectedCourse : data.courses[0].courseId;
 				const course = data.courses.find((c) => c.courseId === courseId);
-				return (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "lks14-railhead" }, data.courses.length > 1 ? (0, react.createElement)("select", {
+				return (0, react.createElement)("div", { className: `lks-map lks-sky-${pickSky(courseId)}` }, (0, react.createElement)("div", { className: "lks14-railhead" }, data.courses.length > 1 ? (0, react.createElement)("select", {
 					className: "lks-set-select",
 					value: courseId,
 					onChange: (e) => {
@@ -2761,25 +4590,34 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 						setQuery(e.target.value);
 					},
 					onKeyDown: (e) => {
+						if (e.key === "Escape") {
+							setQuery("");
+							setSearchRows([]);
+						}
 						if (e.key !== "Enter" || query.trim() === "") return;
-						for (const section of course.sections) {
-							const hit = section.lessons.find((l) => l.kind !== "exam" && l.status !== "locked" && titleMatches(l.title, query));
-							if (hit !== void 0) {
-								setFocus(hit.id).catch(reportError);
-								return;
-							}
+						const first = searchRows[0];
+						if (first !== void 0) {
+							setQuery("");
+							setSearchRows([]);
+							setFocus(first.lessonId).catch(reportError);
 						}
-						searchLessons(query).then((hits) => {
-							const hit = hits.find((h) => h.lessonId.startsWith(`${courseId}:`)) ?? hits[0];
-							if (hit !== void 0) {
-								setQuery("");
-								setFocus(hit.lessonId).catch(reportError);
-							}
-						}).catch(reportError);
 					}
-				}), data.dueCount > 0 ? (0, react.createElement)("div", { className: "lks14-duebox" }, (0, react.createElement)(IconRefreshOutline16, { size: 13 }), tr("rail.due", { count: data.dueCount }), ...data.due.map((d) => (0, react.createElement)("div", {
+				}), searchRows.length > 0 ? (0, react.createElement)("div", { className: "lks14-searchpanel" }, ...searchRows.map((row) => (0, react.createElement)("button", {
+					key: row.lessonId,
+					className: "lks14-searchrow",
+					title: tr("rail.search.jump"),
+					onClick: () => {
+						setQuery("");
+						setSearchRows([]);
+						setFocus(row.lessonId).catch(reportError);
+					}
+				}, (0, react.createElement)("span", { className: "lks14-searchrow-title" }, row.title), row.courseTitle !== "" ? (0, react.createElement)("span", { className: "lks14-searchrow-course" }, row.courseTitle) : null, row.snippet !== "" ? (0, react.createElement)("span", { className: "lks14-searchrow-snip" }, row.snippet) : null))) : null, data.dueCount > 0 ? (0, react.createElement)("div", { className: "lks14-duebox" }, (0, react.createElement)(IconRefreshOutline16, { size: 13 }), tr("rail.due", { count: data.dueCount }), ...data.due.map((d) => (0, react.createElement)("button", {
 					key: d.lessonId,
-					className: "lks14-dueitem"
+					className: "lks14-dueitem",
+					title: tr("review.jump"),
+					onClick: () => {
+						setFocus(d.lessonId).catch(reportError);
+					}
 				}, (0, react.createElement)("span", null, d.lessonTitle), d.overdueDays > 0 ? (0, react.createElement)("span", { className: "lks14-over" }, tr("rail.due.over", { days: d.overdueDays })) : null)), (0, react.createElement)("button", {
 					className: "lks-btn ghost",
 					style: { marginTop: "6px" },
@@ -2790,34 +4628,23 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 					const examAllowed = examOpen(section.lessons);
 					const lessons = section.lessons.filter((l) => query.trim() === "" || titleMatches(l.title, query) || l.focus);
 					if (lessons.length === 0) return [];
-					const open = query.trim() !== "" || sectionDefaultOpen(section);
-					return [(0, react.createElement)("button", {
+					const open = query.trim() !== "" || effectiveOpen(section.title, sectionDefaultOpen(section), sectionOverrides);
+					return [(0, react.createElement)(MapSectionView, {
 						key: section.title,
-						type: "button",
-						className: "lks14-sechead",
-						"aria-expanded": String(open),
-						title: open ? tr("rail.section.collapse") : tr("rail.section.expand", { count: section.lessons.length }),
-						onClick: () => {}
-					}, (0, react.createElement)("span", { className: "lks14-secnum" }, String(section.index + 1)), (0, react.createElement)("span", { className: "lks14-secheadt" }, section.title), (0, react.createElement)("span", { className: "lks14-secheadc" }, open ? "▾" : "▸")), ...open ? lessons.map((lesson) => {
-						const locked = lesson.status === "locked" || lesson.kind === "exam" && !examAllowed;
-						return (0, react.createElement)("button", {
-							key: lesson.id,
-							type: "button",
-							className: `lks14-node${lesson.focus ? " focus" : ""}`,
-							"aria-disabled": locked || void 0,
-							title: `${lesson.title} — ${statusTitle(lesson.kind, locked ? "locked" : lesson.status)}`,
-							onClick: () => {
-								if (locked) return;
-								setFocus(lesson.id).catch(reportError);
-							}
-						}, (0, react.createElement)("span", { className: "lks14-g" }, statusIcon(lesson.kind, locked ? "locked" : lesson.status)), (0, react.createElement)("span", { className: "lks14-t" }, lesson.title), lesson.weakConcepts > 0 ? (0, react.createElement)("span", {
-							className: "lks14-tag weak",
-							title: tr("tag.weak", { count: lesson.weakConcepts })
-						}, (0, react.createElement)(IconBoltFill16, { size: 10 }), String(lesson.weakConcepts)) : null, lesson.masteryPct !== null ? (0, react.createElement)("span", {
-							className: "lks14-bar",
-							title: tr("tag.mastery", { pct: lesson.masteryPct })
-						}, (0, react.createElement)("i", { style: { transform: `scaleX(${lesson.masteryPct / 100})` } })) : null, lesson.masteryPct !== null ? (0, react.createElement)("span", { className: "lks14-pct" }, `${lesson.masteryPct}%`) : null);
-					}) : []];
+						section: {
+							title: section.title,
+							index: section.index,
+							lessons
+						},
+						examAllowed,
+						open,
+						onToggle: () => {
+							toggleSection(section.title, !open);
+						},
+						onJump: (id) => {
+							setFocus(id).catch(reportError);
+						}
+					})];
 				}), (0, react.createElement)("button", {
 					className: "lks-btn ghost",
 					style: { marginTop: "10px" },
@@ -2850,7 +4677,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			}, tr("rail.empty.button"))), (0, react.createElement)("div", { className: "lks14-hint" }, tr("rail.empty.hint"), (0, react.createElement)("br"), tr("rail.empty.hint2")));
 		}
 		/** 中栏:the tutor chat stream with its own composer (upstream ChatStream + ChatComposer). */
-		function ChatPane({ data, lesson, rows, feedAttached, bound, busy, sendError, draft, setDraft, send, setMode }) {
+		function ChatPane({ data, lesson, rows, feedAttached, bound, busy, sendError, draft, setDraft, send, setMode, narrowPane, companionEvent }) {
 			const streamEl = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				const el = streamEl.current;
@@ -2873,7 +4700,26 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 					if (draft.trim() !== "" && !busy) send(draft);
 				}
 			};
-			return (0, react.createElement)("div", { className: "lks14-col lks14-chat" }, (0, react.createElement)("div", { className: "lks14-colhead" }, tr("col.tutor"), lesson !== null ? (0, react.createElement)("span", { className: "lks14-chatlesson" }, lesson.title) : null, (0, react.createElement)("span", { className: "lks14-pills" }, ...MODES$1.map((mode) => (0, react.createElement)("button", {
+			const proposal = data?.pendingProposals[0] ?? null;
+			return (0, react.createElement)("div", { className: "lks14-col lks14-chat" }, proposal !== null ? (0, react.createElement)("div", { className: "lks-propbanner" }, (0, react.createElement)(IconCrownFill16, { size: 14 }), (0, react.createElement)("span", { className: "lks-propbanner-why" }, tr("proposal.banner", { lesson: proposal.lessonTitle }), " — ", proposal.rationale), (0, react.createElement)("button", {
+				className: "lks-btn primary",
+				style: {
+					padding: "4px 12px",
+					fontSize: "12.5px"
+				},
+				onClick: () => {
+					send(tr("proposal.accept.msg", { lesson: proposal.lessonTitle }));
+				}
+			}, tr("proposal.accept")), (0, react.createElement)("button", {
+				className: "lks-btn ghost",
+				style: {
+					padding: "4px 12px",
+					fontSize: "12.5px"
+				},
+				onClick: () => {
+					send(tr("proposal.decline.msg", { lesson: proposal.lessonTitle }));
+				}
+			}, tr("proposal.decline"))) : null, (0, react.createElement)("div", { className: "lks14-colhead" }, tr("col.tutor"), lesson !== null ? (0, react.createElement)("span", { className: "lks14-chatlesson" }, lesson.title) : null, (0, react.createElement)("span", { className: "lks14-pills" }, ...MODES$1.map((mode) => (0, react.createElement)("button", {
 				key: mode.id,
 				className: `lks14-pill${data?.mode === mode.id ? " on" : ""}`,
 				"aria-pressed": String(data?.mode === mode.id),
@@ -2886,7 +4732,21 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				className: "lks14-stream",
 				ref: streamEl,
 				"data-lks-feed": rows.length > 0 ? `rows:${String(rows.length)}` : bound ? feedAttached ? "attached-empty" : "waiting" : "no-thread"
-			}, rows.length === 0 ? (0, react.createElement)("div", { className: "lks14-empty" }, dormant ? tr("tutor.dormant") : tr("tutor.empty"), (0, react.createElement)("br"), tr("tutor.empty.hint")) : rows.map((row, i) => chatRow(row, !dormant && i === lastAssistant ? { send } : void 0))), (0, react.createElement)("div", { className: "lks14-starters" }, ...starters.map((s) => (0, react.createElement)("button", {
+			}, rows.length === 0 ? (0, react.createElement)("div", { className: "lks14-empty" }, dormant ? tr("tutor.dormant") : tr("tutor.empty"), (0, react.createElement)("br"), tr("tutor.empty.hint")) : rows.map((row, i) => chatRow(row, !dormant && i === lastAssistant ? { send } : void 0)), rows.length > 0 && rows[rows.length - 1].role === "user" ? (0, react.createElement)("div", { className: "lks14-thinking" }, (0, react.createElement)("i", null), (0, react.createElement)("i", null), (0, react.createElement)("i", null)) : null), ...(lesson?.artifacts ?? []).filter((a) => a.artifactType === "quiz").map((a) => (0, react.createElement)(QuizCard, {
+				key: a.id,
+				lessonId: lesson.lessonId,
+				artifactId: a.id,
+				data: a.data,
+				masteryPct: lesson.masteryPct,
+				send,
+				onFinished: (allCorrect) => {
+					companionEvent(allCorrect ? "celebrate" : "encourage");
+				}
+			})), ...(lesson?.artifacts ?? []).filter((a) => a.artifactType !== "quiz").map((a) => (0, react.createElement)(ArtifactCard, {
+				key: a.id,
+				artifact: a,
+				send
+			})), (0, react.createElement)("div", { className: "lks14-starters" }, ...starters.map((s) => (0, react.createElement)("button", {
 				key: s.label,
 				className: "lks14-starter",
 				"aria-disabled": dormant || void 0,
@@ -2894,7 +4754,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				onClick: () => {
 					if (!dormant) send(s.message);
 				}
-			}, s.label))), (0, react.createElement)("div", { className: "lks14-composer" }, (0, react.createElement)("textarea", {
+			}, s.label))), (0, react.createElement)("div", { className: "lks14-composer" }, (0, react.createElement)("div", { className: "lks14-composer-card" }, (0, react.createElement)("textarea", {
 				className: "lks14-composertext",
 				placeholder: busy ? tr("composer.busy") : tr("tutor.empty.hint"),
 				value: draft,
@@ -2905,18 +4765,19 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				},
 				onKeyDown: onComposerKey
 			}), (0, react.createElement)("button", {
-				className: "lks-btn primary",
+				className: "lks-btn-send",
+				"aria-label": tr("composer.send"),
 				disabled: busy || dormant || draft.trim() === "",
 				onClick: () => {
 					send(draft);
 				}
 			}, busy ? (0, react.createElement)(IconLoadingOutline16, {
-				size: 13,
+				size: 16,
 				className: "lks-spin"
-			}) : null, tr("composer.send"))), sendError !== null || error !== null ? (0, react.createElement)("div", { className: "lks-propcard-err" }, sendError ?? error) : null);
+			}) : "↑")), sendError !== null || error !== null ? (0, react.createElement)("div", { className: "lks-propcard-err" }, sendError ?? error) : null));
 		}
 		/** 右栏:the notebook — 讲解/概念图/笔记 tabs (upstream NotebookPanel arrangement). */
-		function NotebookPane({ data, deleteNote }) {
+		function NotebookPane({ data, deleteNote, send, companionEvent }) {
 			const lesson = data?.lesson ?? null;
 			const [tab, setTab] = (0, react.useState)("teach");
 			const [error, setError] = (0, react.useState)(null);
@@ -2924,7 +4785,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			const [read, setRead] = (0, react.useState)(null);
 			const readCtl = (0, react.useRef)(null);
 			const [readError, setReadError] = (0, react.useState)(null);
-			const { tts } = useStudy();
+			const { tts, addUserNote, recordReview } = useStudy();
 			const proseRef = (0, react.useRef)(null);
 			const diagRef = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
@@ -2949,8 +4810,94 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 					setError(err instanceof Error ? err.message : String(err));
 				});
 			};
+			const artifacts = lesson?.artifacts ?? [];
+			const [, setUnseenTick] = (0, react.useState)(0);
+			const unseen = unseenArtifacts(lesson?.lessonId ?? "", artifacts);
+			const lastAnnounced = (0, react.useRef)(/* @__PURE__ */ new Set());
+			(0, react.useEffect)(() => {
+				const fresh = unseen.filter((id) => !lastAnnounced.current.has(id));
+				if (fresh.length === 0) return;
+				lastAnnounced.current = /* @__PURE__ */ new Set([...lastAnnounced.current, ...fresh]);
+				showStudyToast(tr("artifact.sedimented"), { severity: "info" });
+				setUnseenTick(Date.now());
+			}, [unseen.join(","), lesson?.lessonId]);
+			const heavy = artifacts.filter((a) => a.artifactType === "compare_table" || a.artifactType === "diagram" || a.artifactType === "code_walkthrough");
+			const latestHeavy = heavy.length > 0 ? heavy[heavy.length - 1] : null;
+			const [quoteBtn, setQuoteBtn] = (0, react.useState)(null);
+			const recordQuotes = (lesson?.notes ?? []).filter((n) => n.zone === "record" && n.quote !== null && n.quote.trim().length >= 2).map((n) => n.quote);
+			const evaluateSelection = () => {
+				const prose = proseRef.current;
+				const selection = window.getSelection();
+				if (prose === null || selection === null || selection.rangeCount === 0) return;
+				const text = selection.toString().trim();
+				if (text.length < 2 || text.length > 600) return;
+				const range = selection.getRangeAt(0);
+				if (prose.contains(range.commonAncestorContainer) !== true) return;
+				const model = getTextModel(prose);
+				const rect = range.getBoundingClientRect();
+				const box = prose.getBoundingClientRect();
+				const modelText = model.text;
+				const idx = locateInModel(model, text, void 0)?.start ?? modelText.indexOf(text);
+				const surrounding = idx >= 0 ? modelText.slice(Math.max(0, idx - 30), idx + text.length + 30) : text;
+				setQuoteBtn({
+					x: Math.min(Math.max(rect.left - box.left + rect.width / 2, 90), Math.max(box.width - 90, 90)),
+					y: rect.top - box.top - 38,
+					text,
+					surrounding
+				});
+			};
+			(0, react.useEffect)(() => {
+				const SETTLE = 250;
+				let settleTimer = null;
+				let hideTimer = null;
+				let gesture = false;
+				const selectionHasText = () => (window.getSelection()?.toString().trim().length ?? 0) >= 2;
+				const onChange = () => {
+					if (selectionHasText()) {
+						if (hideTimer !== null) {
+							clearTimeout(hideTimer);
+							hideTimer = null;
+						}
+						setQuoteBtn((cur) => cur === null ? cur : null);
+						if (settleTimer !== null) clearTimeout(settleTimer);
+						settleTimer = setTimeout(() => {
+							settleTimer = null;
+							if (!gesture && selectionHasText()) evaluateSelection();
+						}, SETTLE);
+					} else if (hideTimer === null) hideTimer = setTimeout(() => {
+						setQuoteBtn((cur) => cur === null ? cur : null);
+					}, 250);
+				};
+				const onDown = (e) => {
+					if (e.target?.closest?.("[data-lks-quote-btn]") !== null) return;
+					gesture = true;
+				};
+				const onUp = () => {
+					gesture = false;
+					if (settleTimer !== null) {
+						clearTimeout(settleTimer);
+						settleTimer = null;
+					}
+					if (hideTimer === null && selectionHasText()) evaluateSelection();
+				};
+				document.addEventListener("selectionchange", onChange);
+				window.addEventListener("pointerdown", onDown, true);
+				window.addEventListener("pointerup", onUp, true);
+				window.addEventListener("pointercancel", onUp, true);
+				return () => {
+					document.removeEventListener("selectionchange", onChange);
+					window.removeEventListener("pointerdown", onDown, true);
+					window.removeEventListener("pointerup", onUp, true);
+					window.removeEventListener("pointercancel", onUp, true);
+					if (settleTimer !== null) clearTimeout(settleTimer);
+					if (hideTimer !== null) clearTimeout(hideTimer);
+				};
+			}, []);
+			const [enhanceTick, setEnhanceTick] = (0, react.useState)(0);
+			const [rateBusy, setRateBusy] = (0, react.useState)(false);
 			const startReading = () => {
 				if (lesson === null || lesson.speechText.trim() === "") return;
+				companionEvent("talk-start");
 				readCtl.current?.stop();
 				const sentences = speechSentencesOf(lesson.speechText);
 				const voice = storedTtsVoice();
@@ -3031,6 +4978,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				});
 			};
 			const stopReading = () => {
+				companionEvent("talk-end");
 				readCtl.current?.stop();
 				setRead(null);
 			};
@@ -3051,7 +4999,10 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			]);
 			(0, react.useEffect)(() => {
 				if (tab !== "teach" || proseRef.current === null || lesson === null) return;
-				enhanceRendered(proseRef.current).catch(() => {});
+				enhanceRendered(proseRef.current).catch(() => {}).finally(() => {
+					applyHighlights(proseRef.current, recordQuotes);
+					setEnhanceTick(Date.now());
+				});
 			}, [tab, lesson?.html]);
 			const body = lesson === null ? (0, react.createElement)("div", { className: "lks14-empty" }, tr("bb.empty"), (0, react.createElement)("br"), tr("bb.empty.hint")) : (0, react.createElement)("div", { className: "lks14-notebody" }, (0, react.createElement)("div", { className: "lks14-lessonhead" }, (0, react.createElement)("h2", null, lesson.title), (0, react.createElement)("div", { className: "lks14-meta" }, `${lesson.courseTitle} · ${statusTitle("study", lesson.status)}` + (lesson.masteryPct === null ? "" : ` · ${tr("bb.mastery", { pct: lesson.masteryPct })}`))), (0, react.createElement)("div", { className: "lks14-viewtabs" }, (0, react.createElement)("button", {
 				className: `lks14-viewtab${tab === "teach" ? " on" : ""}`,
@@ -3071,8 +5022,34 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				"aria-pressed": String(tab === "notes"),
 				onClick: () => {
 					setTab("notes");
+					if (lesson !== null && unseen.length > 0) {
+						markArtifactsSeen(lesson.lessonId, unseen);
+						setUnseenTick(Date.now());
+					}
 				}
-			}, tr("bb.notes"))), tab === "teach" ? (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "lks-readbar" }, (0, react.createElement)("button", {
+			}, tr("bb.notes"), unseen.length > 0 ? (0, react.createElement)("span", { className: "lks-viewtab-badge" }, String(unseen.length)) : null)), tab === "teach" ? (0, react.createElement)("div", null, lesson.due ? (0, react.createElement)("div", {
+				className: "lks-ratecard",
+				"data-lks-rate": lesson.lessonId
+			}, (0, react.createElement)("div", { className: "lks-ratecard-title" }, tr("review.rate.title")), (0, react.createElement)("div", { className: "lks-ratecard-opts" }, ...[
+				["1", "review.again"],
+				["4", "review.remembered"],
+				["5", "review.mastered"]
+			].map(([q, key]) => (0, react.createElement)("button", {
+				key: q,
+				className: `lks-ratecard-opt${q === "1" ? " again" : q === "5" ? " best" : ""}`,
+				disabled: rateBusy,
+				onClick: () => {
+					setRateBusy(true);
+					recordReview(lesson.lessonId, Number(q)).then(() => {
+						companionEvent(Number(q) >= 4 ? "celebrate" : "encourage");
+						showStudyToast(Number(q) >= 4 ? tr("review.done.good", { days: 1 }) : tr("review.done.again"), { severity: Number(q) >= 4 ? "success" : "warning" });
+						setRateBusy(false);
+					}).catch((err) => {
+						setError(err instanceof Error ? err.message : String(err));
+						setRateBusy(false);
+					});
+				}
+			}, tr(key))))) : null, (0, react.createElement)("div", { className: "lks-readbar" }, (0, react.createElement)("button", {
 				className: "lks-btn ghost",
 				style: {
 					padding: "3px 8px",
@@ -3100,14 +5077,49 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				},
 				title: tr("read.stop"),
 				onClick: stopReading
-			}, tr("read.stop")) : null, read !== null && read.state !== "idle" && lesson !== null ? (0, react.createElement)("span", { className: "lks-readbar-cur" }, (speechSentencesOf(lesson.speechText)[read.index] ?? "").slice(0, 80)) : null, readError !== null ? (0, react.createElement)("span", { className: "lks-readbar-notice" }, readError) : null, read !== null && read.degraded ? (0, react.createElement)("span", { className: "lks-readbar-notice" }, tr("read.engine.system")) : null), (0, react.createElement)("div", {
+			}, tr("read.stop")) : null, read !== null && read.state !== "idle" && lesson !== null ? (0, react.createElement)("span", { className: "lks-readbar-cur" }, (speechSentencesOf(lesson.speechText)[read.index] ?? "").slice(0, 80)) : null, readError !== null ? (0, react.createElement)("span", { className: "lks-readbar-notice" }, readError) : null, read !== null && read.degraded ? (0, react.createElement)("span", { className: "lks-readbar-notice" }, tr("read.engine.system")) : null), (0, react.createElement)("div", { className: "lks14-prosewrap" }, (0, react.createElement)("div", {
 				className: "lks14-prose",
 				ref: proseRef,
 				dangerouslySetInnerHTML: { __html: lesson.html }
-			})) : tab === "cmap" ? (0, react.createElement)("div", {
+			}), quoteBtn !== null ? (0, react.createElement)("div", {
+				className: "lks-quote-btn",
+				"data-lks-quote-btn": "",
+				style: {
+					left: `${quoteBtn.x}px`,
+					top: `${quoteBtn.y}px`
+				}
+			}, (0, react.createElement)("button", { onClick: () => {
+				send(tr("note.quote.template", { text: quoteBtn.text.length > 200 ? `${quoteBtn.text.slice(0, 200)}…` : quoteBtn.text }));
+				setQuoteBtn(null);
+				window.getSelection()?.removeAllRanges();
+			} }, tr("note.quote.ask")), (0, react.createElement)("button", { onClick: () => {
+				if (lesson !== null) {
+					addUserNote(lesson.lessonId, quoteBtn.text).catch((err) => {
+						setError(err instanceof Error ? err.message : String(err));
+					});
+					applyHighlights(proseRef.current, [quoteBtn.text]);
+					showStudyToast(tr("note.saved"), { severity: "success" });
+				}
+				setQuoteBtn(null);
+				window.getSelection()?.removeAllRanges();
+			} }, tr("note.quote.save"))) : null), latestHeavy !== null ? (0, react.createElement)("div", { className: "lks-acard-stage" }, (0, react.createElement)(ArtifactCard, {
+				artifact: latestHeavy,
+				send: () => {}
+			})) : null) : tab === "cmap" ? (0, react.createElement)("div", {
 				className: "lks14-prose",
 				ref: diagRef
-			}) : (0, react.createElement)("div", { className: "lks14-zones" }, lesson.notes.length === 0 ? (0, react.createElement)("div", {
+			}) : (0, react.createElement)("div", { className: "lks14-zones" }, (() => {
+				const understand = artifacts.filter((a) => a.artifactType === "compare_table" || a.artifactType === "diagram" || a.artifactType === "code_walkthrough");
+				if (understand.length === 0) return null;
+				return (0, react.createElement)("div", {
+					key: "artifacts",
+					className: "lks14-zone"
+				}, (0, react.createElement)("div", { className: "lks14-zoneh" }, tr("zone.artifacts")), ...understand.map((a) => (0, react.createElement)(ArtifactCard, {
+					key: a.id,
+					artifact: a,
+					send: () => {}
+				})));
+			})(), lesson.notes.length === 0 ? (0, react.createElement)("div", {
 				className: "lks14-empty",
 				style: { padding: "16px 0" }
 			}, tr("bb.notes.empty")) : ZONES.filter(([zone]) => lesson.notes.some((n) => n.zone === zone)).map(([zone, labelKey]) => (0, react.createElement)("div", {
@@ -3388,6 +5400,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 			const { data, setMode, activate } = useStudy();
 			const [error, setError] = (0, react.useState)(null);
 			const [voice, setVoice] = (0, react.useState)(storedTtsVoice);
+			const [companion, setCompanion] = (0, react.useState)(storedCompanionForm);
 			const fire = (action) => {
 				action.then(() => {
 					setError(null);
@@ -3408,7 +5421,17 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 				onClick: () => {
 					if (data !== null) fire(activate(!data.active));
 				}
-			}, data?.active === true ? tr("settings.turnOff") : tr("settings.turnOn")), (0, react.createElement)("span", { className: "lks-set-state" }, data?.active === true ? tr("settings.on") : tr("settings.off")))), (0, react.createElement)("section", { className: "lks-set-row" }, (0, react.createElement)("h3", null, tr("settings.voice")), (0, react.createElement)("p", { className: "lks-set-hint" }, tr("settings.voice.hint")), (0, react.createElement)("div", null, (0, react.createElement)("select", {
+			}, data?.active === true ? tr("settings.turnOff") : tr("settings.turnOn")), (0, react.createElement)("span", { className: "lks-set-state" }, data?.active === true ? tr("settings.on") : tr("settings.off")))), (0, react.createElement)("section", { className: "lks-set-row" }, (0, react.createElement)("h3", null, tr("settings.companion")), (0, react.createElement)("p", { className: "lks-set-hint" }, tr("settings.companion.hint")), (0, react.createElement)("div", null, (0, react.createElement)("select", {
+				className: "lks-set-select",
+				value: companion,
+				onChange: (e) => {
+					storeCompanionForm(normalizeCompanionForm(e.target.value));
+					setCompanion(normalizeCompanionForm(e.target.value));
+				}
+			}, ...COMPANION_FORMS.map((f) => (0, react.createElement)("option", {
+				key: f.id,
+				value: f.id
+			}, tr(f.labelKey)))))), (0, react.createElement)("section", { className: "lks-set-row" }, (0, react.createElement)("h3", null, tr("settings.voice")), (0, react.createElement)("p", { className: "lks-set-hint" }, tr("settings.voice.hint")), (0, react.createElement)("div", null, (0, react.createElement)("select", {
 				className: "lks-set-select",
 				value: voice,
 				onChange: (e) => {