dsh-plugin-lookatstudy 0.16.0 → 0.17.0

package/lib/client.js

@@ -301,6 +301,156 @@ window.__ModuleLoader__.load({
 .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)}
+
+/* ══════════ A-track (P10a): island zeroing — the 27+6 un-skinned leftovers ══════════ */
+/* buttons reset to UA buttontext/buttonface (black/light) — the panel's ink must flow through */
+.lks-ui button{color:inherit;background-color:transparent;border-color:transparent}
+/* A6 token completion: rgb-channel companions + concept-map palette (upstream :root) */
+.lks-ui{--brand-dark-rgb:70 163 2;--brand-light-rgb:126 217 87;
+  --accent-dark-rgb:10 140 220;--accent-light-rgb:94 212 255;
+  --gold-dark-rgb:217 158 0;--gold-light-rgb:255 230 128;
+  --warning-dark-rgb:230 43 43;--warning-light-rgb:255 117 117;
+  --exam-dark-rgb:126 34 206;--exam-light-rgb:192 132 252;
+  --cm-c0-fill:#1C3352;--cm-c0-line:#6F9FD4;--cm-c1-fill:#1F3A29;--cm-c1-line:#7FB37F;
+  --cm-c2-fill:#42301A;--cm-c2-line:#CFA05E;--cm-c3-fill:#3D3620;--cm-c3-line:#CBB75E;
+  --cm-c4-fill:#33294A;--cm-c4-line:#A48DCB}
+/* A1 in-chat quiz options (click = send answer; neutral pill, hover brand) */
+.lks-ui .lks14-opt{background:rgb(var(--ink-rgb)/0.05);border:2px solid transparent;color:var(--ink)}
+.lks-ui .lks14-opt:hover{border-color:var(--brand);background:rgb(var(--ink-rgb)/0.05)}
+.lks-ui .lks14-optletter{color:var(--brand-light)}
+.lks-ui .lks14-starter{background:transparent;border:1px solid var(--border-faint);color:var(--ink-muted)}
+.lks-ui .lks14-starter:hover{background:rgb(var(--ink-rgb)/0.06);color:var(--ink);border-color:var(--border)}
+.lks-ui .lks14-chatlesson{color:var(--ink-muted)}
+.lks-ui .lks14-meta{color:var(--ink-muted)}
+.lks-ui .lks14-dueitem{color:var(--ink-muted)}
+.lks-ui .lks14-hint{color:var(--ink-faint)}
+.lks-ui .lks-readbar-notice{color:var(--ink-faint)}
+.lks-ui .lks-cmap-legend{color:var(--ink-muted)}
+/* A2 quiz-card body family */
+.lks-ui .lks-qcard-prompt{color:var(--ink)}
+.lks-ui .lks-qcard-count{color:var(--ink-faint)}
+.lks-ui .lks-qcard-ans{color:var(--ink-faint)}
+.lks-ui .lks-qcard-expl{color:var(--ink-muted);border-left-color:var(--accent)}
+.lks-ui .lks-qcard-prompt.review.wrong{color:var(--warning-light)}
+.lks-ui .lks-qcard-q.review{border-bottom-color:var(--border)}
+/* A2 artifact bits */
+.lks-ui .lks-acard-expand{color:var(--ink-faint);border:none;background:none}
+.lks-ui .lks-acard-expand:hover{color:var(--ink);background:rgb(var(--ink-rgb)/0.06)}
+.lks-ui .lks-acard-modal-title{color:var(--ink-strong)}
+.lks-ui .lks-acard-guess-prompt{color:var(--ink)}
+.lks-ui .lks-acard-guess-wait{color:var(--ink-faint)}
+.lks-ui .lks-acard-note b{color:var(--ink-strong)}
+.lks-ui .lks-acard-stage{border-top-color:var(--border)}
+/* A2 note family */
+.lks-ui .lks-note-text{color:var(--ink-muted)}
+.lks-ui .lks-note-text th,.lks-ui .lks-note-text td{border-color:var(--border)}
+.lks-ui .lks-note-src{color:var(--ink-faint)}
+.lks-ui .lks-note-del{color:var(--ink-faint)}
+.lks-ui .lks-note-del:hover{color:var(--warning-light);background:rgb(var(--warning-rgb)/0.08)}
+.lks-ui .lks-note-del.armed{color:#fff;background:var(--warning)}
+.lks-ui .lks-note-q{color:var(--ink-muted)}
+.lks-ui .lks-note-title{color:var(--ink-strong)}
+/* A3 selection popover → surface-0 floating card */
+.lks-ui .lks-quote-btn{background:var(--surface-0);border:1px solid var(--border);box-shadow:0 4px 12px -2px rgb(var(--shadow-rgb)/0.14),0 1px 3px -1px rgb(var(--shadow-rgb)/0.08);border-radius:10px;overflow:hidden;animation:lks-confirm-enter 160ms var(--ease-out-back)}
+.lks-ui .lks-quote-btn button{color:var(--ink)}
+.lks-ui .lks-quote-btn button:hover{background:rgb(var(--ink-rgb)/0.06)}
+.lks-ui .lks-quote-btn button + button{border-left-color:var(--border)}
+/* A4 prose links / markers / strong / hr */
+.lks-ui .lks14-prose a,.lks-ui .lks-note-text a{color:rgb(var(--accent-rgb));text-decoration:none;font-weight:500}
+.lks-ui .lks14-prose a:hover,.lks-ui .lks-note-text a:hover{text-decoration:underline}
+.lks-ui .lks14-prose li::marker,.lks-ui .lks-note-text li::marker{color:rgb(var(--brand-rgb))}
+.lks-ui .lks14-prose strong,.lks-ui .lks-note-text strong{color:var(--ink-strong)}
+.lks-ui .lks14-prose hr,.lks-ui .lks-note-text hr{border-color:var(--border)}
+/* A8 table borders inside bubbles/cards/notes */
+.lks-ui .lks14-msg-assistant th,.lks-ui .lks14-msg-assistant td{border-color:var(--border)}
+.lks-ui .lks-acard-table th,.lks-ui .lks-acard-table td{border-color:var(--border)}
+.lks-ui .lks-acard-table th{border-bottom-color:var(--brand)}
+/* A5 scoped scrollbar (host-light chrome otherwise scrolls inside dark columns) */
+.lks-ui ::-webkit-scrollbar{width:8px;height:8px}
+.lks-ui ::-webkit-scrollbar-track{background:transparent}
+.lks-ui ::-webkit-scrollbar-thumb{background:var(--border);border-radius:9999px;border:2px solid transparent;background-clip:padding-box}
+.lks-ui ::-webkit-scrollbar-thumb:hover{background:var(--surface-3);background-clip:padding-box}
+/* A7 feedback/ambient animations (upstream values verbatim) */
+@keyframes lks-crown-sparkle{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 var(--gold))}50%{transform:scale(1.08);filter:drop-shadow(0 0 6px var(--gold-glow))}}
+.lks-ui .lks-bubble-mastered .lks-bubble-glyph{animation:lks-crown-sparkle 1.6s ease-in-out infinite;display:inline-flex}
+@keyframes lks-energy-breathe{0%,100%{opacity:.78;filter:drop-shadow(0 0 0 var(--gold))}50%{opacity:1;filter:drop-shadow(0 0 4px var(--gold-glow))}}
+@keyframes lks-flame-flicker{0%,100%{transform:scale(1) rotate(-2deg)}25%{transform:scale(1.06) rotate(1deg)}50%{transform:scale(.97) rotate(-1deg)}75%{transform:scale(1.04) rotate(2deg)}}
+.lks-ui .lks-hdr-xp .lks-hdr-glyph{display:inline-flex;animation:lks-energy-breathe 2s ease-in-out infinite}
+.lks-ui .lks-hdr-streak .lks-hdr-glyph{display:inline-flex;animation:lks-flame-flicker 1.2s ease-in-out infinite}
+@keyframes lks-answer-correct{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
+@keyframes lks-answer-wrong{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
+.lks-ui .lks-qcard-opt.right{animation:lks-answer-correct 350ms var(--ease-spring)}
+.lks-ui .lks-qcard-opt.wrong{animation:lks-answer-wrong 320ms ease-in-out}
+@keyframes lks-confirm-enter{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
+/* A7 toast enter/exit at upstream values (replaces the base sheet's simplified pair) */
+@keyframes lks-toast-in-up{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
+@keyframes lks-toast-out-up{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.97)}}
+.lks-ui .lks-toast{animation:lks-toast-in-up 220ms var(--ease-out-back)}
+.lks-ui .lks-toast.exiting{animation:lks-toast-out-up 180ms var(--ease-out-quart) forwards}
+.lks-ui .lks-toast-close{color:var(--ink-faint)}
+.lks-ui .lks-toast-close:hover{color:var(--ink);background:rgb(var(--ink-rgb)/0.08)}
+/* search rows: complete the half-covered pair */
+.lks-ui .lks14-searchrow{border-bottom-color:var(--border)}
+.lks-ui .lks14-searchrow-title{color:var(--ink-strong)}
+.lks-ui .lks14-searchrow-course{color:var(--ink-faint)}
+
+/* ══════════ B-track (P10b): the upstream rail frame + column skeletons ══════════ */
+/* the floating topbar (absolute over the scrolling panes) */
+.lks-ui .lks14-railtop{position:absolute;top:0;left:0;right:0;z-index:40;padding:8px;pointer-events:none}
+.lks-ui .lks-railtabs,.lks-ui .lks14-railhead{pointer-events:auto}
+.lks-ui .lks-railtabs{display:flex;padding:4px;border-radius:10px;gap:4px;margin-bottom:8px;
+  background:rgb(var(--surface-rail-rgb)/0.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
+.lks-ui .lks-railtab{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 0;border-radius:8px;
+  font-size:12.5px;font-weight:700;color:rgb(255 255 255/0.5)}
+.lks-ui .lks-railtab.on{background:rgb(var(--brand-rgb)/0.2);color:var(--brand)}
+/* the glass title card: title row / mastery row / entry pills row */
+.lks-ui .lks14-railhead{display:flex;flex-direction:column;gap:6px}
+.lks-ui .lks14-railcard-row{display:flex;align-items:center;gap:8px}
+.lks-ui .lks14-railpct{flex:none;font-size:12px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,0.6)}
+.lks-ui .lks14-masterybar{flex:1}
+.lks-ui .lks-railpill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;
+  background:rgb(255 255 255/0.05);box-shadow:inset 0 0 0 1px rgb(255 255 255/0.1);color:rgb(var(--ink-rgb)/0.6);font-size:11px;font-weight:700}
+.lks-ui .lks-railpill:hover{background:rgb(255 255 255/0.1)}
+.lks-ui .lks-railpill.due{background:rgb(var(--review-rgb)/0.2);box-shadow:inset 0 0 0 1px rgb(var(--review-rgb)/0.3);color:var(--review)}
+.lks-ui .lks-railpill-n{font-weight:800;font-variant-numeric:tabular-nums}
+/* the sliding two-pane body */
+.lks-ui .lks14-railbody{position:absolute;inset:0;overflow:hidden;z-index:10}
+.lks-ui .lks14-railtrack{display:flex;height:100%;width:200%;transition:transform .3s var(--ease-out-expo)}
+.lks-ui .lks14-railpane{width:50%;height:100%;position:relative}
+.lks-ui .lks14-railscroll{height:100%;overflow-y:auto;overflow-x:hidden;padding:196px 8px 16px}
+.lks-ui .lks-mapsec-list{display:flex;flex-direction:column;gap:24px}
+.lks-ui .lks-mapsec{padding:12px 8px 0}
+.lks-ui .lks14-railpane-import{height:100%;overflow-y:auto;padding:64px 12px 12px}
+.lks-ui .lks14-raillist{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
+.lks-ui .lks14-railcourse{text-align:left;padding:10px 12px;border-radius:12px;background:rgb(255 255 255/0.05);display:flex;flex-direction:column;gap:2px}
+.lks-ui .lks14-railcourse:hover{background:rgb(255 255 255/0.1)}
+.lks-ui .lks14-railcourse.on{background:rgb(var(--brand-rgb)/0.12);box-shadow:inset 0 0 0 1px rgb(var(--brand-rgb)/0.4)}
+.lks-ui .lks14-railcourse-title{font-size:13px;font-weight:700;color:var(--ink-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.lks-ui .lks14-railcourse.on .lks14-railcourse-title{color:var(--brand)}
+.lks-ui .lks14-railcourse-sub{font-size:10.5px;color:rgb(var(--ink-rgb)/0.4)}
+.lks-ui .lks14-raildemo{margin-bottom:10px}
+/* the full-rail overlays (search / review) */
+.lks-ui .lks-railoverlay{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;gap:8px;padding:12px;overflow-y:auto;
+  background:rgb(var(--surface-rail-rgb)/0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
+.lks-ui .lks-railoverlay-head{display:flex;gap:8px;align-items:center}
+.lks-ui .lks-railoverlay-head .lks14-search{flex:1}
+/* chat: thin current-lesson row (ThreadSwitcher empty-state voice) */
+.lks-ui .lks14-lessonrow{flex:none;padding:6px 14px;font-size:12px;font-weight:700;color:var(--ink-muted);opacity:.75}
+/* composer: the soul pills ride the capsule's first row */
+.lks-ui .lks14-soulrow{display:flex;align-items:center;gap:6px;padding:0 2px 6px}
+.lks-ui .lks14-soullabel{flex:none;font-size:11px;color:var(--ink-faint)}
+/* B6: assistant text is full-width prose (no card); user bubbles right-align */
+.lks-ui .lks14-msg-assistant{background:none;border:none;box-shadow:none;border-radius:0;padding:0;max-width:80ch;font-size:.9375rem}
+.lks-ui .lks14-msg-assistant.streaming{border:none;opacity:.85}
+.lks-ui .lks14-msg-user{align-self:flex-end;max-width:85%}
+/* B8: the empty state is a centered card with a 3D CTA */
+.lks-ui .lks14-emptycard{margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:24px;max-width:320px}
+.lks-ui .lks14-emptycard-title{font-size:1rem;font-weight:800;color:var(--ink-strong)}
+.lks-ui .lks14-emptycard-hint{font-size:.825rem;color:var(--ink-muted);line-height:1.6}
+/* B5: notebook tab capsule + 960px reading column */
+.lks-ui .lks14-notebody{margin:0 auto;max-width:960px;width:100%;padding:12px 20px 24px;box-sizing:border-box}
+.lks-ui .lks14-viewtabs{background:rgb(var(--ink-rgb)/0.08);border-radius:999px;padding:3px;align-self:flex-start}
+.lks-ui .lks14-readbar{position:sticky;top:0;z-index:20;background:var(--surface-2);border-radius:10px}
 `;
 		//#endregion
 		//#region src/client/styles.ts
@@ -362,10 +512,9 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .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)}
 
 /* 左 rail: course picker, tree, review, import */
-.lks14-rail{flex:0 0 240px;border-right:1px solid var(--dsw-alias-border-l1);padding:0 10px 10px;overflow-y:auto}
+.lks14-rail{flex:0 0 300px;border-right:none;padding:0;overflow:hidden;position:relative}
 .lks14-railhead{display:flex;align-items:center;gap:6px;margin-top:10px}
 .lks14-railtitle{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
 .lks14-railsub{font-size:12px;color:var(--dsw-alias-label-secondary);margin:6px 0}
@@ -383,13 +532,13 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-hint{font-size:11.5px;color:var(--dsw-alias-label-tertiary);margin-top:6px;line-height:1.6}
 
 /* 中 chat: the tutor stream + its own composer (upstream ChatStream/ChatComposer) */
-.lks14-chat{flex:1 1 46%;min-width:340px;border-right:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-0, transparent)}
+.lks14-chat{flex:0 0 auto;width:clamp(480px,45%,800px);min-width:0;border-right:none}
 .lks14-chatlesson{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;color:var(--dsw-alias-label-tertiary)}
 .lks14-pills{display:inline-flex;gap:2px}
 .lks14-pill{border:none;background:none;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:12px;padding:2px 8px;border-radius:7px;cursor:pointer}
 .lks14-pill:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-state-business-primary);outline:none}
 .lks14-pill.on{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}
-.lks14-stream{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
+.lks14-stream{flex:1;overflow-y:auto;padding:20px 20px 24px;display:flex;flex-direction:column;gap:24px}
 .lks14-msg{max-width:92%;line-height:1.65;font-size:13.5px}
 .lks14-msg-user{align-self:flex-end;background:var(--dsw-alias-bg-layer-2);border-radius:12px 12px 3px 12px;padding:7px 11px;white-space:pre-wrap}
 .lks14-msg-assistant{align-self:flex-start;background:var(--dsw-alias-bg-layer-1);border-radius:12px 12px 12px 3px;padding:8px 12px}
@@ -404,7 +553,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-opt:hover{background:var(--dsw-alias-bg-layer-2)}
 .lks14-opt:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-state-business-primary);outline:none}
 .lks14-optletter{flex:none;font-weight:700;color:var(--dsw-alias-business-primary)}
-.lks14-starters{flex:none;display:flex;flex-wrap:wrap;gap:4px;padding:6px 12px}
+.lks14-starters{flex:none;display:flex;flex-wrap:nowrap;gap:6px;padding:0 20px 6px;overflow-x:auto}
 .lks14-starter{border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;border-radius:14px;padding:3px 10px;cursor:pointer}
 .lks14-starter:hover{color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}
 .lks14-starter:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-state-business-primary);outline:none}
@@ -414,11 +563,11 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-composertext:focus{outline:none;border-color:var(--dsw-alias-state-business-primary)}
 
 /* 右 notebook: 讲解/概念图/笔记 (upstream NotebookPanel) */
-.lks14-note{flex:0 0 clamp(320px, 30vw, 460px);padding:0 12px 12px;overflow-y:auto}
+.lks14-note{flex:1 1 auto;min-width:440px;padding:0;overflow-y:auto}
 .lks14-lessonhead{margin:10px 0 6px}
 .lks14-lessonhead h2{margin:0 0 4px;font-size:16px}
 .lks14-meta{font-size:12px;color:var(--dsw-alias-label-secondary);margin:2px 0}
-.lks14-viewtabs{display:flex;gap:2px;margin:8px 0}
+.lks14-viewtabs{display:flex;gap:2px;margin:0 0 12px}
 .lks14-viewtab{border:none;background:none;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:12.5px;padding:4px 10px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
 .lks14-viewtab:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-state-business-primary);outline:none}
 .lks14-viewtab.on{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}
@@ -489,7 +638,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
   .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-chat{min-width:0;width:auto;flex:1 1 auto}
   .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,
@@ -890,6 +1039,51 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				fill: "currentColor"
 			}));
 		}
+		/** IconArrowUpFill16 — the 3D send button glyph (upstream: lucide Send direction) */
+		function IconArrowUpFill16({ 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: "M8 2.6 13.2 8h-3v5.4H5.8V8h-3L8 2.6Z",
+				fill: "currentColor"
+			}));
+		}
+		/** IconCloseFill16 — toast/modal close */
+		function IconCloseFill16({ 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: "M3.4 2 2 3.4 6.6 8 2 12.6 3.4 14 8 9.4l4.6 4.6 1.4-1.4L9.4 8 14 3.4 12.6 2 8 6.6 3.4 2Z",
+				fill: "currentColor"
+			}));
+		}
+		/** IconMaximizeOutline16 — artifact expand (upstream: lucide Maximize2 corners) */
+		function IconMaximizeOutline16({ 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: "M9.5 2H14v4.5M6.5 14H2V9.5M14 2 9.2 6.8M2 14l4.8-4.8",
+				stroke: "currentColor",
+				"stroke-width": 1.6,
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}));
+		}
 		//#endregion
 		//#region src/client/data.ts
 		/**
@@ -2001,6 +2195,15 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"map.node.locked": "锁定 — 先完成前面的课时",
 			"map.node.due": "到了复习时间",
 			"map.exam.locked": "考试未解锁 — 本章节全部课时掌握度 ≥50% 后开放",
+			"map.tab.map": "地图",
+			"map.tab.import": "导入",
+			"map.search.label": "搜索",
+			"map.review.label": "复习",
+			"map.overlay.close": "关闭",
+			"chat.start": "开始学习",
+			"chat.start.hint": "从当前课时的第一个开场动作开始",
+			"prompt.start": "你好，我们开始学这一课吧：先给我一个两三句话的导览，再从第一个知识点讲起。",
+			"mode.label": "风格：",
 			"companion.poke": "戳一戳伴学伙伴",
 			"companion.poked": "伴学伙伴向你眨了眨眼",
 			"companion.form.ember": "小焰",
@@ -2028,6 +2231,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"rail.due": "待复习 {count}",
 			"rail.due.over": "超{days}天",
 			"rail.due.start": "开始复习",
+			"rail.due.none": "暂时没有到期的复习，保持节奏！",
 			"rail.due.tag": "这课时的复习今天到期(SM-2)",
 			"rail.delete": "删除本课程",
 			"rail.delete.confirm": "确认删除?",
@@ -2204,6 +2408,15 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"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",
+			"map.tab.map": "Map",
+			"map.tab.import": "Import",
+			"map.search.label": "Search",
+			"map.review.label": "Review",
+			"map.overlay.close": "Close",
+			"chat.start": "Start learning",
+			"chat.start.hint": "Begin with this lesson’s first starter move",
+			"prompt.start": "Hi — let’s start this lesson: give me a two-sentence tour, then begin with the first concept.",
+			"mode.label": "Style: ",
 			"companion.poke": "Poke the companion",
 			"companion.poked": "The companion winks at you",
 			"companion.form.ember": "Ember",
@@ -2231,6 +2444,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"rail.due": "{count} due",
 			"rail.due.over": "{days}d overdue",
 			"rail.due.start": "Start reviewing",
+			"rail.due.none": "Nothing due right now — keep the streak!",
 			"rail.due.tag": "this lesson's review is due today (SM-2)",
 			"rail.delete": "Delete this course",
 			"rail.delete.confirm": "Delete?",
@@ -3375,7 +3589,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				onClick: () => {
 					setExpanded(true);
 				}
-			}, "⤢")), body, expanded ? (0, react.createElement)("div", {
+			}, (0, react.createElement)(IconMaximizeOutline16, { size: 13 }))), body, expanded ? (0, react.createElement)("div", {
 				className: "lks-acard-modal",
 				onClick: () => {
 					setExpanded(false);
@@ -3390,7 +3604,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				onClick: () => {
 					setExpanded(false);
 				}
-			}, "×")), failed ? (0, react.createElement)("pre", { className: "lks-acard-code" }, mermaid) : (0, react.createElement)("div", { ref: (el) => {
+			}, (0, react.createElement)(IconCloseFill16, { size: 13 }))), failed ? (0, react.createElement)("pre", { className: "lks-acard-code" }, mermaid) : (0, react.createElement)("div", { ref: (el) => {
 				if (el !== null) renderMermaidInto(el, mermaid, () => {
 					setFailed(true);
 				});
@@ -4381,10 +4595,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}), (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", {
+			}, (0, react.createElement)("span", { className: "lks-hdr-stat lks-hdr-glyph" }, (0, react.createElement)(IconBoltFill16, { size: 14 })), (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", {
+			}, (0, react.createElement)("span", { className: "lks-hdr-glyph" }, (0, react.createElement)(IconFlameFill16, { size: 14 })), 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, {
@@ -4469,7 +4683,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				onClick: () => {
 					toastStore.startExit(t.id);
 				}
-			}, "×"))));
+			}, (0, react.createElement)(IconCloseFill16, { size: 12 })))));
 		}
 		/** Module-level shell handle so the panel can suppress hand-back on internal opens. */
 		const PANEL_SHELL = { current: null };
@@ -4489,8 +4703,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				}));
 			};
 			const [confirmDelete, setConfirmDelete] = (0, react.useState)(false);
-			const [showImport, setShowImport] = (0, react.useState)(false);
 			const [error, setError] = (0, react.useState)(null);
+			const [panel, setPanel] = (0, react.useState)("map");
+			const [searchOpen, setSearchOpen] = (0, react.useState)(false);
+			const [reviewOpen, setReviewOpen] = (0, react.useState)(false);
 			const reportError = (err) => {
 				setError(err instanceof Error ? err.message : String(err));
 			};
@@ -4539,121 +4755,162 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				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" },
+			const courseId = data !== null && data.courses.length > 0 ? data.courses.some((c) => c.courseId === selectedCourse) ? selectedCourse : data.courses[0].courseId : null;
+			const course = data?.courses.find((c) => c.courseId === courseId) ?? null;
+			const topbar = data === null ? null : (0, react.createElement)("div", { className: "lks14-railtop" }, (0, react.createElement)("div", { className: "lks-railtabs" }, ...["map", "import"].map((tab) => (0, react.createElement)("button", {
+				key: tab,
+				className: `lks-railtab${panel === tab ? " on" : ""}`,
+				"aria-pressed": String(panel === tab),
 				onClick: () => {
-					send(tr("prompt.import", { url: "https://github.com/microsoft/AI-For-Beginners" }));
+					setPanel(tab);
 				}
-			}, (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", { 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) => {
-						setSelectedCourse(e.target.value);
-						setConfirmDelete(false);
-					}
-				}, ...data.courses.map((c) => (0, react.createElement)("option", {
-					key: c.courseId,
-					value: c.courseId
-				}, c.title))) : (0, react.createElement)("div", {
-					className: "lks14-railtitle",
-					title: course.title
-				}, course.title), (0, react.createElement)("button", {
-					className: `lks-btn ${confirmDelete ? "primary" : "ghost"}`,
-					title: confirmDelete ? tr("rail.delete.title.confirm") : tr("rail.delete"),
-					onClick: (e) => {
-						e.stopPropagation();
-						if (!confirmDelete) {
-							setConfirmDelete(true);
-							return;
-						}
-						setConfirmDelete(false);
-						deleteCourse(courseId).then(() => {
-							setSelectedCourse("");
-						}, reportError);
+			}, tr(tab === "map" ? "map.tab.map" : "map.tab.import")))), panel === "map" && course !== null ? (0, react.createElement)("div", { className: "lks14-railhead" }, (0, react.createElement)("div", { className: "lks14-railcard-row" }, data.courses.length > 1 ? (0, react.createElement)("select", {
+				className: "lks-set-select",
+				value: courseId ?? "",
+				onChange: (e) => {
+					setSelectedCourse(e.target.value);
+					setConfirmDelete(false);
+				}
+			}, ...data.courses.map((c) => (0, react.createElement)("option", {
+				key: c.courseId,
+				value: c.courseId
+			}, c.title))) : (0, react.createElement)("div", {
+				className: "lks14-railtitle",
+				title: course.title
+			}, course.title), (0, react.createElement)("button", {
+				className: `lks-btn ${confirmDelete ? "primary" : "ghost"}`,
+				title: confirmDelete ? tr("rail.delete.title.confirm") : tr("rail.delete"),
+				onClick: (e) => {
+					e.stopPropagation();
+					if (!confirmDelete) {
+						setConfirmDelete(true);
+						return;
 					}
-				}, confirmDelete ? tr("rail.delete.confirm") : (0, react.createElement)(IconTrashOutline16, { size: 14 }))), (0, react.createElement)("div", { className: "lks14-railsub" }, tr("rail.mastered", {
-					mastered: course.mastered,
-					total: course.total
-				})), (0, react.createElement)("div", {
-					className: `lks14-masterybar${course.avgMasteryPct === 100 ? " gold" : ""}`,
-					title: course.avgMasteryPct === null ? tr("rail.avg.none") : tr("rail.avg", { pct: course.avgMasteryPct })
-				}, (0, react.createElement)("i", { style: { transform: `scaleX(${(course.avgMasteryPct ?? 0) / 100})` } })), (0, react.createElement)("input", {
-					className: "lks14-search",
-					type: "search",
-					placeholder: tr("rail.search"),
-					value: query,
-					onChange: (e) => {
-						setQuery(e.target.value);
+					setConfirmDelete(false);
+					deleteCourse(courseId ?? "").then(() => {
+						setSelectedCourse("");
+					}, reportError);
+				}
+			}, confirmDelete ? tr("rail.delete.confirm") : (0, react.createElement)(IconTrashOutline16, { size: 14 }))), (0, react.createElement)("div", { className: "lks14-railcard-row" }, (0, react.createElement)("div", {
+				className: `lks14-masterybar${course.avgMasteryPct === 100 ? " gold" : ""}`,
+				title: course.avgMasteryPct === null ? tr("rail.avg.none") : tr("rail.avg", { pct: course.avgMasteryPct })
+			}, (0, react.createElement)("i", { style: { transform: `scaleX(${(course.avgMasteryPct ?? 0) / 100})` } })), (0, react.createElement)("span", { className: "lks14-railpct" }, `${String(course.avgMasteryPct ?? 0)}%`)), (0, react.createElement)("div", { className: "lks14-railcard-row" }, (0, react.createElement)("button", {
+				className: "lks-railpill",
+				title: tr("rail.search"),
+				onClick: () => {
+					setSearchOpen(true);
+				}
+			}, (0, react.createElement)(IconGlobeOutline14, { size: 13 }), tr("map.search.label")), (0, react.createElement)("button", {
+				className: `lks-railpill${data.dueCount > 0 ? " due" : ""}`,
+				title: data.dueCount > 0 ? tr("rail.due", { count: data.dueCount }) : tr("map.review.label"),
+				onClick: () => {
+					setReviewOpen(true);
+				}
+			}, (0, react.createElement)(IconBookFill16, { size: 13 }), tr("map.review.label"), data.dueCount > 0 ? (0, react.createElement)("span", { className: "lks-railpill-n" }, String(data.dueCount)) : null))) : null);
+			const mapPane = data === null ? (0, react.createElement)("div", { className: "lks14-empty" }, tr("loading")) : course === null ? null : (0, react.createElement)("div", { className: "lks14-railscroll" }, (0, react.createElement)("div", { className: "lks-mapsec-list" }, ...course.sections.flatMap((section) => {
+				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() !== "" || effectiveOpen(section.title, sectionDefaultOpen(section), sectionOverrides);
+				return [(0, react.createElement)(MapSectionView, {
+					key: section.title,
+					section: {
+						title: section.title,
+						index: section.index,
+						lessons
 					},
-					onKeyDown: (e) => {
-						if (e.key === "Escape") {
-							setQuery("");
-							setSearchRows([]);
-						}
-						if (e.key !== "Enter" || query.trim() === "") return;
-						const first = searchRows[0];
-						if (first !== void 0) {
-							setQuery("");
-							setSearchRows([]);
-							setFocus(first.lessonId).catch(reportError);
-						}
+					examAllowed,
+					open,
+					onToggle: () => {
+						toggleSection(section.title, !open);
+					},
+					onJump: (id) => {
+						setFocus(id).catch(reportError);
 					}
-				}), 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: () => {
+				})];
+			})));
+			const importPane = data === null ? null : (0, react.createElement)("div", { className: "lks14-railpane-import" }, data.courses.length > 1 ? (0, react.createElement)("div", { className: "lks14-raillist" }, ...data.courses.map((c) => (0, react.createElement)("button", {
+				key: c.courseId,
+				className: `lks14-railcourse${c.courseId === courseId ? " on" : ""}`,
+				onClick: () => {
+					setSelectedCourse(c.courseId);
+					setPanel("map");
+				}
+			}, (0, react.createElement)("span", { className: "lks14-railcourse-title" }, c.title), (0, react.createElement)("span", { className: "lks14-railcourse-sub" }, tr("rail.mastered", {
+				mastered: c.mastered,
+				total: c.total
+			}))))) : null, data.courses.length === 0 ? (0, react.createElement)("div", { className: "lks14-empty" }, tr("rail.empty.title")) : null, (0, react.createElement)("button", {
+				className: "lks-btn ghost lks14-raildemo",
+				onClick: () => {
+					send(tr("prompt.import", { url: "https://github.com/microsoft/AI-For-Beginners" }));
+				}
+			}, (0, react.createElement)(IconDownloadOutline16, null), tr("rail.empty.demo")), (0, react.createElement)(ImportRow, { send }));
+			const searchOverlay = searchOpen && data !== null ? (0, react.createElement)("div", { className: "lks-railoverlay" }, (0, react.createElement)("div", { className: "lks-railoverlay-head" }, (0, react.createElement)("input", {
+				className: "lks14-search",
+				type: "search",
+				placeholder: tr("rail.search"),
+				value: query,
+				autoFocus: true,
+				onChange: (e) => {
+					setQuery(e.target.value);
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Escape") {
 						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",
-					title: tr("review.jump"),
-					onClick: () => {
-						setFocus(d.lessonId).catch(reportError);
+						setSearchOpen(false);
 					}
-				}, (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" },
-					onClick: () => {
-						send(tr("prompt.review"));
-					}
-				}, tr("rail.due.start"))) : null, ...course.sections.flatMap((section) => {
-					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() !== "" || effectiveOpen(section.title, sectionDefaultOpen(section), sectionOverrides);
-					return [(0, react.createElement)(MapSectionView, {
-						key: section.title,
-						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" },
-					onClick: () => {
-						setShowImport(!showImport);
+					if (e.key !== "Enter" || query.trim() === "") return;
+					const first = searchRows[0];
+					if (first !== void 0) {
+						setQuery("");
+						setSearchRows([]);
+						setSearchOpen(false);
+						setFocus(first.lessonId).catch(reportError);
 					}
-				}, showImport ? tr("rail.import.close") : null, tr("rail.import.toggle")), showImport ? (0, react.createElement)(ImportRow, { send }) : null);
-			})();
-			return (0, react.createElement)("div", { className: "lks14-col lks14-rail" }, (0, react.createElement)("div", { className: "lks14-colhead" }, tr("col.rail")), body, (0, react.createElement)("div", { className: "lks-propcard-err" }, error));
+				}
+			}), (0, react.createElement)("button", {
+				className: "lks-btn ghost",
+				onClick: () => {
+					setQuery("");
+					setSearchRows([]);
+					setSearchOpen(false);
+				}
+			}, tr("map.overlay.close"))), 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([]);
+					setSearchOpen(false);
+					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) : null;
+			const reviewOverlay = reviewOpen && data !== null ? (0, react.createElement)("div", { className: "lks-railoverlay" }, (0, react.createElement)("div", { className: "lks-railoverlay-head" }, (0, react.createElement)("span", { className: "lks14-railtitle" }, data.dueCount > 0 ? tr("rail.due", { count: data.dueCount }) : tr("map.review.label")), (0, react.createElement)("button", {
+				className: "lks-btn ghost",
+				onClick: () => {
+					setReviewOpen(false);
+				}
+			}, tr("map.overlay.close"))), ...data.due.map((d) => (0, react.createElement)("button", {
+				key: d.lessonId,
+				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)), data.dueCount > 0 ? (0, react.createElement)("button", {
+				className: "lks-btn primary",
+				onClick: () => {
+					setReviewOpen(false);
+					send(tr("prompt.review"));
+				}
+			}, tr("rail.due.start")) : (0, react.createElement)("div", { className: "lks14-empty" }, tr("rail.due.none"))) : null;
+			const effectivePanel = data !== null && data.courses.length === 0 ? "import" : panel;
+			return (0, react.createElement)("div", { className: `lks14-col lks14-rail${courseId !== null ? ` lks-sky-${pickSky(courseId)}` : ""}` }, topbar, (0, react.createElement)("div", { className: "lks14-railbody" }, (0, react.createElement)("div", {
+				className: "lks14-railtrack",
+				style: { transform: effectivePanel === "map" ? "translateX(0)" : "translateX(-50%)" }
+			}, (0, react.createElement)("div", { className: "lks14-railpane" }, mapPane), (0, react.createElement)("div", { className: "lks14-railpane" }, importPane))), searchOverlay, reviewOverlay, (0, react.createElement)("div", { className: "lks-propcard-err" }, error));
 		}
 		function ImportRow({ send }) {
 			const [url, setUrl] = (0, react.useState)("");
@@ -4719,20 +4976,17 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				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),
-				"aria-disabled": dormant || void 0,
-				title: dormant ? tr("tutor.dormant") : tr(mode.hintKey),
-				onClick: () => {
-					if (!dormant) fire(setMode(mode.id));
-				}
-			}, tr(mode.labelKey))))), (0, react.createElement)("div", {
+			}, tr("proposal.decline"))) : null, lesson !== null || !dormant ? (0, react.createElement)("div", { className: "lks14-lessonrow" }, lesson !== null ? (0, react.createElement)("span", null, lesson.title) : (0, react.createElement)("span", null, tr("col.tutor"))) : null, (0, react.createElement)("div", {
 				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)), 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, {
+			}, rows.length === 0 ? (0, react.createElement)("div", { className: "lks14-emptycard" }, (0, react.createElement)("div", { className: "lks14-emptycard-title" }, dormant ? tr("tutor.dormant") : tr("tutor.empty")), (0, react.createElement)("div", { className: "lks14-emptycard-hint" }, tr("tutor.empty.hint")), !dormant ? (0, react.createElement)("button", {
+				className: "lks-btn primary",
+				title: tr("chat.start.hint"),
+				onClick: () => {
+					send(starters[0]?.message ?? tr("prompt.start"));
+				}
+			}, tr("chat.start")) : null) : 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,
@@ -4746,7 +5000,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				key: a.id,
 				artifact: a,
 				send
-			})), (0, react.createElement)("div", { className: "lks14-starters" }, ...starters.map((s) => (0, react.createElement)("button", {
+			})), rows.length > 0 ? (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,
@@ -4754,7 +5008,16 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				onClick: () => {
 					if (!dormant) send(s.message);
 				}
-			}, s.label))), (0, react.createElement)("div", { className: "lks14-composer" }, (0, react.createElement)("div", { className: "lks14-composer-card" }, (0, react.createElement)("textarea", {
+			}, s.label))) : null, (0, react.createElement)("div", { className: "lks14-composer" }, (0, react.createElement)("div", { className: "lks14-composer-card" }, (0, react.createElement)("div", { className: "lks14-soulrow" }, (0, react.createElement)("span", { className: "lks14-soullabel" }, tr("mode.label")), (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),
+				"aria-disabled": dormant || void 0,
+				title: dormant ? tr("tutor.dormant") : tr(mode.hintKey),
+				onClick: () => {
+					if (!dormant) fire(setMode(mode.id));
+				}
+			}, mode.id === "direct" ? (0, react.createElement)(IconBoltFill16, { size: 12 }) : mode.id === "guide" ? (0, react.createElement)(IconGoalOutline16, { size: 12 }) : (0, react.createElement)(IconBookFill16, { size: 12 }), tr(mode.labelKey))))), (0, react.createElement)("textarea", {
 				className: "lks14-composertext",
 				placeholder: busy ? tr("composer.busy") : tr("tutor.empty.hint"),
 				value: draft,
@@ -4774,7 +5037,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}, busy ? (0, react.createElement)(IconLoadingOutline16, {
 				size: 16,
 				className: "lks-spin"
-			}) : "↑")), sendError !== null || error !== null ? (0, react.createElement)("div", { className: "lks-propcard-err" }, sendError ?? error) : null));
+			}) : (0, react.createElement)(IconArrowUpFill16, { size: 18 }))), 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, send, companionEvent }) {
@@ -5004,7 +5267,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					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", {
+			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-viewtabs" }, (0, react.createElement)("button", {
 				className: `lks14-viewtab${tab === "teach" ? " on" : ""}`,
 				"aria-pressed": String(tab === "teach"),
 				onClick: () => {
@@ -5027,7 +5290,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 						setUnseenTick(Date.now());
 					}
 				}
-			}, 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", {
+			}, tr("bb.notes"), unseen.length > 0 ? (0, react.createElement)("span", { className: "lks-viewtab-badge" }, String(unseen.length)) : null)), tab !== "notes" ? (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 })}`))) : 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" }, ...[
@@ -5145,7 +5408,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				className: "lks-note-text",
 				dangerouslySetInnerHTML: { __html: renderMarkdown(n.text) }
 			}), n.quote !== null ? (0, react.createElement)("div", { className: "lks-note-q" }, `“${n.quote}”`) : null))))));
-			return (0, react.createElement)("div", { className: "lks14-col lks14-note" }, (0, react.createElement)("div", { className: "lks14-colhead" }, tr("col.bb")), body, (0, react.createElement)("div", { className: "lks-propcard-err" }, error));
+			return (0, react.createElement)("div", { className: "lks14-col lks14-note" }, body, (0, react.createElement)("div", { className: "lks-propcard-err" }, error));
 		}
 		//#endregion
 		//#region src/client/shell-entry.ts