dsh-plugin-lookatstudy 0.23.0 → 0.25.0

package/lib/client.js

@@ -156,6 +156,7 @@ window.__ModuleLoader__.load({
 .lks-ui .lks14-viewtab:hover{color:var(--ink)}
 .lks-ui .lks14-viewtab.on{background:rgb(var(--brand-rgb)/0.16);color:var(--brand)}
 .lks-ui .lks14-prose{color:var(--ink);font-size:.9375rem;line-height:1.65}
+.lks-ui .lks14-prose img{max-width:100%;height:auto}
 .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)}
@@ -361,8 +362,8 @@ window.__ModuleLoader__.load({
 .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:112px 8px 16px}
-.lks-ui .lks14-railpane-import{height:100%;overflow-y:auto;padding:64px 12px 12px}
+.lks-ui .lks14-railscroll{height:100%;overflow-y:auto;overflow-x:hidden;padding:112px 8px 16px;box-sizing:border-box}
+.lks-ui .lks14-railpane-import{height:100%;overflow-y:auto;padding:64px 12px 12px;box-sizing:border-box}
 .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)}
@@ -434,9 +435,27 @@ window.__ModuleLoader__.load({
 
 /* ══════════ P11b (C-track closure): chat parts, notes closure, tooltip, confirm ══════════ */
 /* C14: the collapsible reasoning block */
+/* 0.24.0: the host-style thinking disclosure (ReasoningRow port) — running
+   rows stream the latest line follow-end with the sweep, settled rows lead
+   with the first line, the expanded body reads the tertiary tier */
 .lks-ui .lks14-reasoning{border:1px solid var(--border-faint);border-radius:10px;padding:4px 10px;font-size:12px;color:var(--ink-faint)}
 .lks-ui .lks14-reasoning summary{cursor:pointer;font-weight:600;color:var(--ink-muted);user-select:none}
 .lks-ui .lks14-reasoning[open] summary{margin-bottom:4px}
+.lks-ui .lks14-reasoning-row{display:flex;align-items:center;gap:6px;min-width:0;position:relative;overflow:hidden}
+.lks-ui .lks14-reasoning-title{flex:none;font-weight:400;color:var(--ink-muted)}
+.lks-ui .lks14-reasoning-sep{flex:none;width:2px;height:2px;margin:0 4px;border-radius:1px;background:var(--ink-faint)}
+.lks-ui .lks14-reasoning-summary{min-width:0;overflow:hidden;flex:1 1 auto;color:var(--ink-faint);white-space:nowrap}
+.lks-ui .lks14-reasoning-sumtext{display:block;overflow:hidden;text-overflow:ellipsis}
+.lks-ui .lks14-reasoning-summary[data-follow-end]{display:flex;justify-content:flex-end}
+.lks-ui .lks14-reasoning-summary[data-follow-end] .lks14-reasoning-sumtext{flex:0 0 auto;width:max-content;min-width:100%;overflow:visible;text-align:start;text-overflow:clip}
+.lks-ui .lks14-reasoning[data-state='running'] .lks14-reasoning-row::after{content:'';position:absolute;inset-block:0;left:0;width:180px;background:linear-gradient(90deg,transparent 0%,rgb(var(--surface-2-rgb)/0.9) 55%,transparent 100%);animation:lks-reasoning-sweep 2.6s ease-out infinite;pointer-events:none}
+@keyframes lks-reasoning-sweep{0%{left:-180px}90%,100%{left:100%}}
+@media (prefers-reduced-motion: reduce){.lks-ui .lks14-reasoning[data-state='running'] .lks14-reasoning-row::after{animation:none}}
+.lks-ui .lks14-reasoning.open .lks14-reasoning-body,.lks-ui .lks14-reasoning[open] .lks14-reasoning-body{padding:4px 0 4px 20px;color:var(--ink-faint);white-space:pre-wrap;word-break:break-word}
+/* 0.24.0: the teach-tab 原文/对照/译文 segmented control */
+.lks-ui .lks-langview{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border-faint);border-radius:8px;background:rgb(var(--surface-2-rgb)/0.6)}
+.lks-ui .lks-langview button{border:0;background:transparent;color:var(--ink-muted);font-size:12px;line-height:1;padding:4px 8px;border-radius:6px;cursor:pointer}
+.lks-ui .lks-langview button.on{background:rgb(var(--brand-rgb)/0.16);color:var(--brand)}
 /* C14: the tool-call chip states */
 .lks-ui .lks14-toolchip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:600;
   padding:3px 10px;border-radius:999px;background:rgb(var(--ink-rgb)/0.05);color:var(--ink-muted)}
@@ -1802,6 +1821,16 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				});
 				this.refresh();
 			}
+			/** 0.24.0: push the host interface language (the panel reads <html lang>,
+			*  which the host keeps in sync with the active locale) — the apply-side
+			*  translation matching consumes it. */
+			async setInterfaceLang(lang) {
+				await fetchJson("/lookatstudy/api/prefs", {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ interfaceLang: lang })
+				});
+			}
 			/** E3: land one attachment verbatim in the study workspace; returns the workspace-relative path. */
 			async uploadAttachment(name, dataBase64) {
 				const body = await fetchJson("/lookatstudy/api/attachment", {
@@ -2084,6 +2113,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				activate: studyStore.activate.bind(studyStore),
 				setMode: studyStore.setMode.bind(studyStore),
 				setHistoryBudget: studyStore.setHistoryBudget.bind(studyStore),
+				setInterfaceLang: studyStore.setInterfaceLang.bind(studyStore),
 				uploadAttachment: studyStore.uploadAttachment.bind(studyStore),
 				setFocus: studyStore.setFocus.bind(studyStore),
 				searchLessons: studyStore.searchLessons.bind(studyStore),
@@ -2228,6 +2258,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"toast.close": "关闭",
 			"composer.busy": "导师正在回复…",
 			"rail.empty.demo": "导入示例课程",
+			"import.session.title": "课程导入",
 			"import.cta": "导入新课程",
 			"import.tab.url": "URL",
 			"import.tab.md": "MD",
@@ -2328,6 +2359,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"rail.due.start": "开始复习",
 			"rail.due.none": "暂时没有到期的复习，保持节奏！",
 			"chat.reasoning": "思考过程（{n} 字）",
+			"chat.think": "思考",
+			"langview.original": "原文",
+			"langview.bilingual": "对照",
+			"langview.translation": "译文",
 			"msg.speak": "朗读",
 			"note.pin": "置顶笔记",
 			"note.unpin": "取消置顶",
@@ -2595,6 +2630,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"toast.close": "Close",
 			"composer.busy": "The tutor is replying…",
 			"rail.empty.demo": "Import the demo course",
+			"import.session.title": "Course import",
 			"import.cta": "Import a new course",
 			"import.tab.url": "URL",
 			"import.tab.md": "MD",
@@ -2695,6 +2731,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"rail.due.start": "Start reviewing",
 			"rail.due.none": "Nothing due right now — keep the streak!",
 			"chat.reasoning": "Thinking ({n} chars)",
+			"chat.think": "Think",
+			"langview.original": "Original",
+			"langview.bilingual": "Both",
+			"langview.translation": "Translation",
 			"msg.speak": "Speak",
 			"note.pin": "Pin note",
 			"note.unpin": "Unpin",
@@ -3693,6 +3733,33 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			return (0, react.createElement)("div", { className: "lks-propcard-err" }, error);
 		}
 		/**
+		* The thinking disclosure's collapsed one-line summary (0.24.0, the host
+		* ReasoningRow contract verbatim): while RUNNING the LAST line rides (the
+		* summary visibly follows the stream's tail), settled the FIRST line leads;
+		* double-asterisk markers are omitted either way. Pure.
+		*/
+		function reasoningSummaryLine(text, running) {
+			return (running ? (() => {
+				const v = text.trimEnd();
+				const nl = v.lastIndexOf("\n");
+				return nl === -1 ? v : v.slice(nl + 1);
+			})() : (() => {
+				const nl = text.indexOf("\n");
+				return nl === -1 ? text : text.slice(0, nl);
+			})()).replaceAll("**", "");
+		}
+		/**
+		* The dedicated import session's host-list title (0.24.1): imports mint a
+		* course-less one-shot session that never rides a lesson thread — a uniform
+		* label keeps the host session list legible instead of auto-title noise.
+		* Label slugified to one line, whole title capped. Pure.
+		*/
+		function importSessionTitle(label, now, t = tr) {
+			const flat = label.replace(/[\u0000-\u001f\u007f]+/g, " ").replace(/\s+/g, " ").trim().slice(0, 24);
+			const date = `${String(now.getFullYear()).slice(2)}.${String(now.getMonth() + 1).padStart(2, "0")}.${String(now.getDate()).padStart(2, "0")}`;
+			return `${flat === "" ? t("import.session.title") : flat} · ${date}`;
+		}
+		/**
 		* Tooltip text for one course-tree status glyph. Pure (the translator is an
 		* optional parameter defaulting to the active one, evaluated per call).
 		*/
@@ -4755,6 +4822,27 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 		*/
 		const TURN_STALL_MS = 24e4;
 		/**
+		* 0.23.1 issue 3: how long an import funnel may sit with NO live turn before
+		* the panel reads the import as failed. The old failure exit armed on the
+		* turnActive prop having rendered true once — but a turn that dies inside one
+		* event-window notification batch (turn/start + turn/end between two reads,
+		* the keyless-provider fast fail; journal-verified: attempt → step/end →
+		* turn/end within seconds) never flips the prop, so the exit never armed and
+		* the funnel spun forever. This deadline needs no observation: past grace
+		* with the turn not active = failed. The grace only covers prompt queue
+		* latency (turn/start journals within seconds of the queue-time resolve); a
+		* live turn holds the funnel open for its whole life however long the import
+		* tools run.
+		*/
+		const IMPORT_FAIL_GRACE_MS = 3e4;
+		/**
+		* The funnel's failure decision (pure — the wall clock lives at the poll call
+		* site, mirroring {@link turnStalled}).
+		*/
+		function importJobDead(job, turnActive, now, grace = IMPORT_FAIL_GRACE_MS) {
+			return job !== null && !turnActive && now - job.startedAt > grace;
+		}
+		/**
 		* The stall decision (pure — the wall clock lives at the poll call site):
 		* an ACTIVE fold stays active while the window's top seq keeps advancing;
 		* once it has been frozen for longer than stallMs the panel treats the turn
@@ -4988,15 +5076,18 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					continue;
 				}
 				const chunk = event.data?.chunk;
-				if (chunk === void 0 || chunk.type !== "text-delta") continue;
+				if (chunk === void 0 || chunk.type !== "text-delta" && chunk.type !== "reasoning-delta") continue;
 				const attemptId = event.data?.attemptId ?? String(event.seq);
+				const delta = chunk.text ?? "";
 				const stream = streams.get(attemptId);
 				if (stream === void 0) streams.set(attemptId, {
-					text: chunk.text ?? "",
+					text: chunk.type === "text-delta" ? delta : "",
+					reasoning: chunk.type === "reasoning-delta" ? delta : "",
 					anchor: rows.length,
 					settled: false
 				});
-				else stream.text += chunk.text ?? "";
+				else if (chunk.type === "text-delta") stream.text += delta;
+				else stream.reasoning += delta;
 				latest = attemptId;
 			}
 			let askOpen = false;
@@ -5019,6 +5110,13 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					role: "streaming",
 					text
 				});
+				const reasoning = stream.reasoning.trim();
+				if (reasoning !== "") rows.splice(stream.anchor, 0, {
+					key: "streaming-reasoning",
+					role: "reasoning",
+					text: reasoning,
+					running: true
+				});
 			}
 			return rows;
 		}
@@ -7541,10 +7639,21 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				key: row.key,
 				className: "lks14-msg lks14-msg-user"
 			}, row.text);
-			if (row.role === "reasoning") return (0, react.createElement)("details", {
-				key: row.key,
-				className: "lks14-reasoning"
-			}, (0, react.createElement)("summary", null, tr("chat.reasoning", { n: String(row.text.length) })), row.text);
+			if (row.role === "reasoning") {
+				const running = row.running === true;
+				return (0, react.createElement)("details", {
+					key: row.key,
+					className: "lks14-reasoning",
+					"data-state": running ? "running" : "ok",
+					"data-testid": "reasoning-row"
+				}, (0, react.createElement)("summary", { className: "lks14-reasoning-row" }, (0, react.createElement)(IconThinkOutline16, { size: 14 }), (0, react.createElement)("span", { className: "lks14-reasoning-title" }, tr("chat.think")), (0, react.createElement)("span", {
+					className: "lks14-reasoning-sep",
+					"aria-hidden": true
+				}), (0, react.createElement)("span", {
+					className: "lks14-reasoning-summary",
+					"data-follow-end": running || void 0
+				}, (0, react.createElement)("span", { className: "lks14-reasoning-sumtext" }, reasoningSummaryLine(row.text, running)))), (0, react.createElement)("div", { className: "lks14-reasoning-body" }, row.text));
+			}
 			if (row.role === "tool") return (0, react.createElement)("div", {
 				key: row.key,
 				className: "lks14-toolchip " + String(row.toolState ?? "loading")
@@ -7620,7 +7729,23 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			};
 		}
 		function StudyPanelBody({ ctx }) {
-			const { data, activate, setMode, setFocus, searchLessons, deleteCourse, deleteNote, bindLessonSession, lessonThreadOp, setCourseScope, uploadAttachment } = useStudy();
+			const { data, activate, setMode, setFocus, searchLessons, deleteCourse, deleteNote, bindLessonSession, lessonThreadOp, setCourseScope, uploadAttachment, setInterfaceLang } = useStudy();
+			(0, react.useEffect)(() => {
+				const read = () => {
+					let lang = document.documentElement.lang;
+					if (!/^[a-z]{2,3}(-[A-Za-z0-9]+)*$/.test(lang)) lang = navigator.language;
+					if (/^[a-z]{2,3}(-[A-Za-z0-9]+)*$/.test(lang)) setInterfaceLang(lang).catch(() => {});
+				};
+				read();
+				const t1 = setTimeout(read, 600);
+				const t2 = setTimeout(read, 2400);
+				const off = ctx.locale?.subscribe(read);
+				return () => {
+					clearTimeout(t1);
+					clearTimeout(t2);
+					off?.();
+				};
+			}, []);
 			(0, react.useEffect)(() => {
 				wireCodeBlockCopy();
 			}, []);
@@ -7821,7 +7946,43 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				} else celebrate(ev.kind);
 				prevCelebrationRef.current = snapshot;
 			}, [data]);
-			const boundId = boundSessionOf(lesson !== null ? lesson.lessonId : null) ?? threadGroupOf(lesson !== null ? lesson.lessonId : null)?.active ?? (lesson !== null ? data?.lessonSessions[lesson.lessonId] ?? null : null);
+			const [importSessionId, setImportSessionId] = (0, react.useState)(null);
+			const sendImport = async (prompt, label) => {
+				if (data?.active !== true) await activate(true);
+				let sessionId = importSessionId;
+				if (sessionId === null || !sessionKnown(ctx, sessionId)) {
+					const area = await fetch("/lookatstudy/api/study-workspace");
+					if (!area.ok) throw new Error(`study area unavailable (HTTP ${String(area.status)})`);
+					const { path } = await area.json();
+					const workspace = await ctx.workspaces.create({ path });
+					sessionId = await ctx.sessions.create({ workspaceId: workspace.workspaceId });
+					setImportSessionId(sessionId);
+				}
+				const shell = PANEL_SHELL.current;
+				if (shell !== null) shell.suppressHandBack(() => {
+					ctx.sessions.open(sessionId);
+				});
+				else ctx.sessions.open(sessionId);
+				const actx = ctx.sessions.scope(sessionId);
+				const face = actx === void 0 ? void 0 : ctx.sessions.sessionOf(actx);
+				if (face === void 0) throw new Error("import session is not addressable yet");
+				activeFace.current = face;
+				try {
+					await face.rename?.(importSessionTitle(label, /* @__PURE__ */ new Date()));
+				} catch {}
+				const result = await face.prompt([{
+					type: "text",
+					text: prompt
+				}], "queue");
+				if (!result.ok) throw new Error(`prompt rejected: ${result.error.code}: ${result.error.message}`);
+			};
+			/** Forget the import session — called from every funnel exit. Unpinning
+			* re-runs the binding effect, which restages the focused lesson's thread. */
+			const endImportSession = (0, react.useCallback)(() => {
+				setImportSessionId(null);
+				activeFace.current = null;
+			}, []);
+			const boundId = importSessionId ?? boundSessionOf(lesson !== null ? lesson.lessonId : null) ?? threadGroupOf(lesson !== null ? lesson.lessonId : null)?.active ?? (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;
@@ -8063,6 +8224,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}, [send]);
 			const switchLessonThread = (sessionId) => {
 				if (lesson === null) return;
+				if (importSessionId !== null) return;
 				if (localBound.current?.lessonId === lesson.lessonId && localBound.current.sessionId === sessionId) return;
 				localBound.current = {
 					lessonId: lesson.lessonId,
@@ -8077,6 +8239,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			};
 			const startNewThread = () => {
 				if (lesson === null) return;
+				if (importSessionId !== null) return;
 				localBound.current = null;
 				bindLessonSession(lesson.lessonId, null);
 				setRows([]);
@@ -8139,6 +8302,8 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				turnActive: feedGen,
 				importProgress,
 				stop,
+				sendImport,
+				endImportSession,
 				paletteBus
 			}), (0, react.createElement)(PaneResizeHandle, {
 				side: "rail",
@@ -8550,7 +8715,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			PANEL_SHELL.current = shell;
 		}
 		/** 左栏:course picker, tree, review box, import. */
-		function CourseRail({ data, activate, setFocus, searchLessons, deleteCourse, send, onJumped, streamingLessonId, turnActive, importProgress, stop, paletteBus }) {
+		function CourseRail({ data, activate, setFocus, searchLessons, deleteCourse, send, onJumped, streamingLessonId, turnActive, importProgress, stop, paletteBus, sendImport, endImportSession }) {
 			const [selectedCourse, setSelectedCourse] = (0, react.useState)("");
 			const [query, setQuery] = (0, react.useState)("");
 			const [searchRows, setSearchRows] = (0, react.useState)([]);
@@ -8583,23 +8748,28 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			};
 			const [importJob, setImportJob] = (0, react.useState)(null);
 			const [importResult, setImportResult] = (0, react.useState)(null);
-			const sawTurnRef = (0, react.useRef)(false);
-			if (importJob !== null && turnActive) sawTurnRef.current = true;
 			const startImport = (label, prompt) => {
 				setImportResult(null);
-				sawTurnRef.current = false;
 				setImportJob({
 					label,
 					startedAt: Date.now(),
 					baselineIds: new Set((data?.courses ?? []).map((c) => c.courseId))
 				});
-				send(prompt);
+				sendImport(prompt, label).catch((err) => {
+					setImportJob(null);
+					endImportSession();
+					setImportResult({
+						ok: false,
+						msg: err instanceof Error ? err.message : String(err)
+					});
+				});
 			};
 			(0, react.useEffect)(() => {
 				if (importJob === null || data === null) return;
 				const fresh = data.courses.find((c) => !importJob.baselineIds.has(c.courseId));
 				if (fresh !== void 0) {
 					setImportJob(null);
+					endImportSession();
 					setImportResult({
 						ok: true,
 						msg: tr("import.success")
@@ -8608,8 +8778,9 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					setPanel("map");
 					return;
 				}
-				if (sawTurnRef.current && !turnActive) {
+				if (importJobDead(importJob, turnActive, Date.now())) {
 					setImportJob(null);
+					endImportSession();
 					setImportResult({
 						ok: false,
 						msg: tr("import.error.turn")
@@ -8807,7 +8978,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}))))) : 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" }));
+					startImport(tr("import.tab.url"), tr("prompt.import", { url: "https://github.com/microsoft/AI-For-Beginners" }));
 				}
 			}, (0, react.createElement)(IconDownloadOutline16, null), tr("rail.empty.demo")), (0, react.createElement)(ImportPanel, {
 				job: importJob,
@@ -8818,6 +8989,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				onCancel: () => {
 					stop();
 					setImportJob(null);
+					endImportSession();
 					setImportResult({
 						ok: false,
 						msg: tr("import.cancelled")
@@ -9845,6 +10017,17 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			const [read, setRead] = (0, react.useState)(null);
 			const readCtl = (0, react.useRef)(null);
 			const [readError, setReadError] = (0, react.useState)(null);
+			const [langView, setLangView] = (0, react.useState)("bilingual");
+			(0, react.useEffect)(() => {
+				if (lesson === null) return;
+				let next = "bilingual";
+				try {
+					const stored = localStorage.getItem(`lks-langview:${lesson.lessonId}`);
+					if (stored === "original" || stored === "bilingual" || stored === "translation") next = stored;
+				} catch {}
+				setLangView(next);
+			}, [lesson?.lessonId]);
+			const teachHtml = lesson === null ? "" : langView === "translation" && lesson.translationHtml !== void 0 ? lesson.translationHtml : langView === "bilingual" && lesson.bilingualHtml !== void 0 ? lesson.bilingualHtml : lesson.html;
 			const { tts, addUserNote, recordReview, editNote, pinNote } = useStudy();
 			const proseRef = (0, react.useRef)(null);
 			const diagRef = (0, react.useRef)(null);
@@ -10046,7 +10229,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					if (proseRef.current !== null) applyHighlights(proseRef.current, recordQuotes);
 					setEnhanceTick(Date.now());
 				});
-			}, [tab, lesson?.html]);
+			}, [tab, teachHtml]);
 			(0, react.useEffect)(() => {
 				if (pendingLocate === null || tab !== "teach" || proseRef.current === null) return;
 				locateNoteQuote(pendingLocate, proseRef.current);
@@ -10109,7 +10292,24 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 						setRateBusy(false);
 					});
 				}
-			}, tr(key))))) : null, (0, react.createElement)("div", { className: "lks-readbar" }, (0, react.createElement)("button", {
+			}, tr(key))))) : null, (0, react.createElement)("div", { className: "lks-readbar" }, lesson.bilingualHtml !== void 0 ? (0, react.createElement)("div", {
+				className: "lks-langview",
+				"data-testid": "langview"
+			}, [
+				"original",
+				"bilingual",
+				"translation"
+			].map((v) => (0, react.createElement)("button", {
+				key: v,
+				className: langView === v ? "on" : "",
+				"data-testid": `langview-${v}`,
+				onClick: () => {
+					setLangView(v);
+					try {
+						localStorage.setItem(`lks-langview:${lesson.lessonId}`, v);
+					} catch {}
+				}
+			}, tr(`langview.${v}`)))) : null, (0, react.createElement)("button", {
 				className: "lks-btn ghost",
 				style: {
 					padding: "3px 8px",
@@ -10143,7 +10343,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}, (0, react.createElement)("div", {
 				className: "lks14-prose",
 				ref: proseRef,
-				dangerouslySetInnerHTML: { __html: lesson.html }
+				dangerouslySetInnerHTML: { __html: teachHtml }
 			})), quoteBtn !== null ? (0, react.createElement)("div", {
 				className: "lks-quote-btn",
 				"data-lks-quote-btn": "",