dsh-plugin-lookatstudy 0.20.1 → 0.21.1

package/lib/client.js

@@ -817,6 +817,11 @@ window.__ModuleLoader__.load({
 .lks-ui[data-lks-theme='light'] .lks14-threadmenu{background:rgb(255 255 255/0.98);border-color:var(--border-faint);box-shadow:0 12px 32px -8px rgb(0 0 0/0.18)}
 .lks-ui[data-lks-theme='light'] .lks14-ctxpanel{background:rgb(255 255 255/0.98);box-shadow:0 8px 24px rgb(0 0 0/0.12)}
 /* ambient glyph motion sleeps under reduced-motion (A7 never had a guard) */
+/* v0.29 pane-resize: the grip line lights the upstream accent under the skin
+   (base sheet's host-token color is the no-skin fallback; the handle itself
+   is structural lks14- and lives in styles.ts) */
+.lks-ui .lks14-panehandle:hover::after,.lks-ui .lks14-panehandle[data-dragging='true']::after{background:color-mix(in srgb,var(--accent) 55%,transparent)}
+
 @media (prefers-reduced-motion: reduce){
   .lks-ui .lks-lessorow.st-mastered .lks-lessorow-glyph svg,.lks-ui .lks-hdr-xp .lks-hdr-glyph,.lks-ui .lks-hdr-streak .lks-hdr-glyph{animation:none}
 }
@@ -887,7 +892,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-col{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
 
 /* 左 rail: course picker, tree, review, import */
-.lks14-rail{flex:0 0 300px;border-right:none;padding:0;overflow:hidden;position:relative}
+.lks14-rail{flex:0 0 var(--lks-rail-w,300px);border-right:none;padding:0;overflow:hidden;position:relative;transition:flex-basis 150ms ease}
 .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}
@@ -902,7 +907,7 @@ 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:0 0 auto;width:clamp(480px,45%,800px);min-width:0;border-right:none}
+.lks14-chat{flex:0 0 auto;width:var(--lks-chat-w,clamp(480px,45%,800px));min-width:0;border-right:none;transition:width 150ms ease}
 .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}
@@ -932,6 +937,28 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
 .lks14-composer{flex:none;display:flex;gap:6px;align-items:flex-end;padding:8px 12px 10px;border-top:1px solid var(--dsw-alias-border-l1)}
 .lks14-composertext{flex:1;font:inherit;font-size:13px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:10px;padding:7px 10px;resize:none;box-sizing:border-box}
 .lks14-composertext:focus{outline:none;border-color:var(--dsw-alias-state-business-primary)}
+/* issue #7: the composer's pending-attachment chip (thumbnail + name + remove) */
+.lks14-attachchip{flex:none;display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:5px 8px;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-2);max-width:100%}
+.lks14-attachchip-thumb{flex:none;width:44px;height:44px;object-fit:cover;border-radius:7px;border:1px solid var(--dsw-alias-border-l1)}
+.lks14-attachchip-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--dsw-alias-label-primary)}
+.lks14-attachchip-x{flex:none;border:none;background:none;color:var(--dsw-alias-label-secondary);font:inherit;font-size:13px;cursor:pointer;border-radius:6px;padding:2px 6px}
+.lks14-attachchip-x:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+
+/* ============================================================
+ * v0.29 pane-resize 拖拽手柄(PaneResizeHandle)——
+ * 栏间 6px 竖条,视觉握线默认隐形、hover/拖拽亮 accent;
+ * 命中区触屏 44px(触屏密度红线),细指针收窄 12px(不吃栏内容点击)。
+ * pane 分隔语汇 = surface 色阶不加描边:握线是 hover 才现身的交互
+ * affordance,不是常驻分隔线,不违反 v0.6「pane 间无 border」。
+ * ============================================================ */
+.lks14-panehandle{position:relative;flex:none;width:6px;cursor:col-resize;touch-action:none;z-index:5}
+.lks14-panehandle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%)}
+@media (pointer:fine){.lks14-panehandle::before{width:12px}}
+.lks14-panehandle::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);border-radius:1px;background:transparent;transition:background 120ms}
+.lks14-panehandle:hover::after,.lks14-panehandle[data-dragging='true']::after{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 55%,transparent)}
+/* 拖拽中:全局列宽光标 + 禁文本选择(宽度直写不经过 React) */
+body.pane-dragging{cursor:col-resize;user-select:none}
+body.pane-dragging *{cursor:col-resize}
 
 /* 右 notebook: 讲解/概念图/笔记 (upstream NotebookPanel) */
 .lks14-note{flex:1 1 auto;min-width:440px;padding:0;overflow-y:auto}
@@ -1001,6 +1028,7 @@ html[data-dsh-lookatstudy-active] [class*='centerCol'] > :not([data-dsh-lookatst
   .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-panehandle{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}
 }
@@ -2129,6 +2157,9 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"note.retryRender": "重试渲染",
 			"zoom.in": "放大面板字号",
 			"zoom.out": "缩小面板字号",
+			"pane.rail.aria": "调整课程栏宽度",
+			"pane.chat.aria": "调整对话栏宽度",
+			"pane.tip": "拖拽调宽,双击重置",
 			"palette.label": "命令面板",
 			"palette.placeholder": "搜索课时/课程,或选择动作…",
 			"palette.lessons": "课时",
@@ -2154,6 +2185,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"settings.budget.on": "开启历史预算",
 			"settings.budget.off": "关闭历史预算",
 			"attach.sent": "我发了一个文件:{name}(工作区路径 {path})——请读取它再继续。",
+			"attach.remove": "移除待发附件",
 			"attach.fail": "附件上传失败",
 			"attach.label": "附件(≤20MiB,存入学习工作区)",
 			"rail.mastered": "毕业 {mastered}/{total} 课",
@@ -2472,6 +2504,9 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"note.retryRender": "Retry render",
 			"zoom.in": "Increase panel font size",
 			"zoom.out": "Decrease panel font size",
+			"pane.rail.aria": "Resize the course pane width",
+			"pane.chat.aria": "Resize the chat pane width",
+			"pane.tip": "Drag to resize, double-click to reset",
 			"palette.label": "Command palette",
 			"palette.placeholder": "Search lessons/courses or pick an action…",
 			"palette.lessons": "Lesson",
@@ -2497,6 +2532,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			"settings.budget.on": "Enable history budget",
 			"settings.budget.off": "Disable history budget",
 			"attach.sent": "I attached a file: {name} (workspace path {path}) — read it before continuing.",
+			"attach.remove": "Remove pending attachment",
 			"attach.fail": "Attachment upload failed",
 			"attach.label": "Attach (≤20MiB, lands in the study workspace)",
 			"rail.mastered": "{mastered}/{total} lessons graduated",
@@ -2737,10 +2773,13 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 		}
 		/** Render inline markup (code, bold, italic, links, images) over escaped text.
 		* Image src allowlist: https?:// or data:image/ — folder imports inline local
-		* images as data URLs (capped), GitHub imports reference jsDelivr; anything
-		* else stays literal text (no broken relative images, no exotic schemes). */
+		* images as data URLs (capped), GitHub imports reference jsDelivr; the
+		* plugin's own attachment route (/lookatstudy/api/attachment/<name>, issue #7
+		* — same-origin, server-side validated) renders workspace attachments;
+		* anything else stays literal text (no broken relative images, no exotic
+		* schemes). */
 		function inline(escaped) {
-			return escaped.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/!\[([^\]]*)\]\((https?:\/\/[^)\s]+|data:image\/[^)\s]+)\)/g, (_m, alt, src) => `<img src="${src}" alt="${alt}" loading="lazy">`).replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, "<a href=\"$2\" target=\"_blank\" rel=\"noreferrer\">$1</a>");
+			return escaped.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/!\[([^\]]*)\]\((https?:\/\/[^)\s]+|data:image\/[^)\s]+|\/lookatstudy\/api\/attachment\/[^)\s]+)\)/g, (_m, alt, src) => `<img src="${src}" alt="${alt}" loading="lazy">`).replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, "<a href=\"$2\" target=\"_blank\" rel=\"noreferrer\">$1</a>");
 		}
 		/** True when the line opens a GFM table row (pipes with a delimiter row next). */
 		function isTableRow(line) {
@@ -3327,6 +3366,149 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}
 			return out.join("\n");
 		}
+		const CHAT_MAX = 1100;
+		const clampNum = (v, min, max) => Math.min(max, Math.max(min, v));
+		/** 对话栏未定制时的默认宽数值形式(= clamp(480px,45%,800px) 在 rowW 下;rowW = 容器宽 − rail 有效宽)。 */
+		function defaultChatWidth(rowW) {
+			return clampNum(rowW * .45, 480, 800);
+		}
+		/** 课程栏拖拽候选钳制:reserved = 对话栏有效宽 + NOTE_MIN + 手柄。 */
+		function clampRailCandidate(next, containerW, reserved) {
+			return clampNum(next, 240, Math.min(480, Math.max(240, containerW - reserved)));
+		}
+		/** 对话栏拖拽候选钳制:reserved = 课程栏有效宽 + NOTE_MIN;极端挤压允许压到硬底。 */
+		function clampChatCandidate(next, rowW, reserved) {
+			return clampNum(next, 480, Math.min(CHAT_MAX, Math.max(320, rowW - reserved)));
+		}
+		/** 存储值解析:空/非数/超区间 → null(回默认;历史脏值不硬吃)。 */
+		function parseStoredWidth(v, min, max) {
+			if (v == null || v.trim() === "") return null;
+			const n = Number(v);
+			if (!Number.isFinite(n) || n < min || n > max) return null;
+			return Math.round(n);
+		}
+		/**
+		* The panel root's font-zoom factor (E7 zoom scales the px-fixed layout) —
+		* getBoundingClientRect returns VISUAL px under zoom while flex-basis/width
+		* apply in LAYOUT px, so every drag measurement divides by this (upstream had
+		* no zoom; this is the one place our port must normalize).
+		*/
+		function panelZoomOf(el) {
+			const z = el?.closest(".lks14")?.style.zoom;
+			const n = z === void 0 || z === "" ? NaN : Number(z);
+			return Number.isFinite(n) && n > 0 ? n : 1;
+		}
+		/**
+		* 渲染时有效宽度求解(持久化值 × 当前容器宽):拖拽钳制保证提交时刻不溢出,
+		* 但宿主列后来变窄会破坏旧组合 —— 存储值按当前容器重新压回预算。
+		* 返回 null = 未定制(挂 CSS 默认)。求解序 acyclic:rail 基准(默认 300 是
+		* 常数)→ row 宽 → chat 默认(% 对 row)→ rail 预算按 chat 有效宽。
+		*/
+		function solvePaneWidths(railStored, chatStored, containerW) {
+			const rowW = Math.max(0, containerW - (railStored ?? 300) - 12);
+			const chat = chatStored == null ? null : clampChatCandidate(chatStored, rowW, 440);
+			const chatBasis = chat ?? defaultChatWidth(rowW);
+			return {
+				rail: railStored == null ? null : clampRailCandidate(railStored, containerW, chatBasis + 440 + 12),
+				chat
+			};
+		}
+		//#endregion
+		//#region src/client/paneresize.tsx
+		/**
+		* PaneResizeHandle —— 栏间拖拽手柄(ported from upstream LookatStudy v0.29
+		* issue #14, src/renderer/components/PaneResizeHandle.tsx @ v0.33.2, MIT —
+		* adapted 2026-09-12; structural deviations recorded here):
+		*  - the drag target is the handle's OWN previousElementSibling (the column it
+		*    follows in the DOM), not a document.querySelector testid anchor;
+		*  - rail widths apply through flex-basis (its class is flex:0 0 basis), chat
+		*    widths through width (flex-basis:auto) — the side prop picks the channel;
+		*  - on commit the parent's layout effect clears the inline width once the
+		*    container-level CSS vars carry the truth (same paint, no flash), so this
+		*    component only writes during the drag and hands over on finish.
+		*
+		* 命中区触屏 44px / 细指针 12px(styles.ts ::before);拖拽期宽度 imperative
+		* 直写目标元素(对话栏是消息流整树,逐帧 setState 不可接受),100ms 节流,
+		* 松手终值必达;双击 = 重置回响应式默认(清 inline + onCommit(null),类/clamp
+		* 接管)。a11y:role=separator + aria-label;键盘调整不在本期范围。
+		*/
+		/** 拖拽中宽度应用节流(松手必应用终值,不受节流影响)。 */
+		const DRAG_APPLY_MIN_MS = 100;
+		/** Inline width ← px;null clears it (class/var/CSS default takes over). */
+		function applyWidth(el, side, px) {
+			if (side === "rail") el.style.flexBasis = px === null ? "" : `${String(px)}px`;
+			else el.style.width = px === null ? "" : `${String(px)}px`;
+		}
+		function PaneResizeHandle(props) {
+			const [dragging, setDragging] = (0, react.useState)(false);
+			const dragRef = (0, react.useRef)(null);
+			/** props 进 effect 闭包会滞后:拖拽全程用 ref 取最新。 */
+			const propsRef = (0, react.useRef)(props);
+			propsRef.current = props;
+			(0, react.useEffect)(() => {
+				if (!dragging) return;
+				document.body.classList.add("pane-dragging");
+				const onMove = (e) => {
+					const d = dragRef.current;
+					if (d == null) return;
+					const now = performance.now();
+					if (now - d.lastAppliedAt < DRAG_APPLY_MIN_MS) return;
+					d.lastAppliedAt = now;
+					applyWidth(d.targetEl, propsRef.current.side, propsRef.current.clampLive(d.startW + (e.clientX - d.startX)));
+				};
+				const finish = (e) => {
+					const d = dragRef.current;
+					dragRef.current = null;
+					setDragging(false);
+					if (d == null) return;
+					d.targetEl.style.transition = "";
+					const finalW = propsRef.current.clampLive(d.startW + (e.clientX - d.startX));
+					applyWidth(d.targetEl, propsRef.current.side, finalW);
+					propsRef.current.onCommit(finalW);
+				};
+				window.addEventListener("pointermove", onMove);
+				window.addEventListener("pointerup", finish);
+				window.addEventListener("pointercancel", finish);
+				return () => {
+					document.body.classList.remove("pane-dragging");
+					window.removeEventListener("pointermove", onMove);
+					window.removeEventListener("pointerup", finish);
+					window.removeEventListener("pointercancel", finish);
+				};
+			}, [dragging]);
+			const startDrag = (e) => {
+				if (e.button !== 0) return;
+				const target = e.currentTarget.previousElementSibling;
+				if (!(target instanceof HTMLElement)) return;
+				e.preventDefault();
+				dragRef.current = {
+					startX: e.clientX,
+					startW: target.getBoundingClientRect().width / panelZoomOf(target),
+					lastAppliedAt: 0,
+					targetEl: target
+				};
+				target.style.transition = "none";
+				setDragging(true);
+				try {
+					e.currentTarget.setPointerCapture(e.pointerId);
+				} catch {}
+			};
+			return (0, react.createElement)("div", {
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": props.side === "rail" ? tr("pane.rail.aria") : tr("pane.chat.aria"),
+				"data-tooltip": tr("pane.tip"),
+				"data-testid": `pane-handle-${props.side}`,
+				"data-dragging": dragging ? "true" : void 0,
+				className: "lks14-panehandle",
+				onPointerDown: startDrag,
+				onDoubleClick: (e) => {
+					const target = e.currentTarget.previousElementSibling;
+					if (target instanceof HTMLElement) applyWidth(target, props.side, null);
+					props.onCommit(null);
+				}
+			});
+		}
 		//#endregion
 		//#region src/client/views.tsx
 		/**
@@ -6948,6 +7130,56 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					localStorage.setItem("dsh-plugin-lookatstudy:zoom", String(clamped));
 				} catch {}
 			};
+			const [railW, setRailW] = (0, react.useState)(() => parseStoredWidth(localStorage.getItem("dsh-plugin-lookatstudy:pane-rail"), 240, 480));
+			const [chatW, setChatW] = (0, react.useState)(() => parseStoredWidth(localStorage.getItem("dsh-plugin-lookatstudy:pane-chat"), 480, CHAT_MAX));
+			const [paneBoxW, setPaneBoxW] = (0, react.useState)(0);
+			const bodyEl = (0, react.useRef)(null);
+			const rowEl = (0, react.useRef)(null);
+			const panesCustom = railW !== null || chatW !== null;
+			(0, react.useEffect)(() => {
+				const el = bodyEl.current;
+				if (el === null || !panesCustom) return;
+				const ro = new ResizeObserver((entries) => {
+					for (const entry of entries) setPaneBoxW(Math.round(entry.contentRect.width));
+				});
+				ro.observe(el);
+				return () => {
+					ro.disconnect();
+				};
+			}, [panesCustom]);
+			const solvedPanes = solvePaneWidths(railW, chatW, paneBoxW > 0 ? paneBoxW : bodyEl.current?.clientWidth ?? 0);
+			(0, react.useLayoutEffect)(() => {
+				const el = bodyEl.current;
+				if (el === null) return;
+				if (solvedPanes.rail !== null) el.style.setProperty("--lks-rail-w", `${String(solvedPanes.rail)}px`);
+				else el.style.removeProperty("--lks-rail-w");
+				if (solvedPanes.chat !== null) el.style.setProperty("--lks-chat-w", `${String(solvedPanes.chat)}px`);
+				else el.style.removeProperty("--lks-chat-w");
+				for (const col of el.querySelectorAll(".lks14-rail, .lks14-chat")) {
+					col.style.flexBasis = "";
+					col.style.width = "";
+				}
+			}, [solvedPanes.rail, solvedPanes.chat]);
+			const commitPaneWidth = (which, px) => {
+				const key = which === "rail" ? "dsh-plugin-lookatstudy:pane-rail" : "dsh-plugin-lookatstudy:pane-chat";
+				const value = px === null ? null : Math.round(px);
+				if (which === "rail") setRailW(value);
+				else setChatW(value);
+				try {
+					if (value === null) localStorage.removeItem(key);
+					else localStorage.setItem(key, String(value));
+				} catch {}
+			};
+			const railClampLive = (px) => {
+				const el = bodyEl.current;
+				const containerW = (el?.getBoundingClientRect().width ?? 1280) / panelZoomOf(el);
+				const rowW = Math.max(0, containerW - 300 - 12);
+				return clampRailCandidate(px, containerW, (solvedPanes.chat ?? defaultChatWidth(rowW)) + 440 + 12);
+			};
+			const chatClampLive = (px) => {
+				const el = rowEl.current;
+				return clampChatCandidate(px, (el?.getBoundingClientRect().width ?? 900) / panelZoomOf(el), 440);
+			};
 			const paletteBus = (0, react.useRef)({});
 			const [paletteOpen, setPaletteOpen] = (0, react.useState)(false);
 			(0, react.useEffect)(() => {
@@ -7279,6 +7511,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			const progress = data?.progress ?? null;
 			const body = (0, react.createElement)("div", {
 				className: "lks14-body",
+				ref: bodyEl,
 				"data-pane": narrowPane,
 				onTouchStart: (e) => {
 					const t = e.touches[0];
@@ -7310,6 +7543,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				importProgress,
 				stop,
 				paletteBus
+			}), (0, react.createElement)(PaneResizeHandle, {
+				side: "rail",
+				clampLive: railClampLive,
+				onCommit: (px) => commitPaneWidth("rail", px)
 			}), (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",
 				"data-tooltip": tr("header.xp", { xp: progress?.totalXp ?? 0 })
@@ -7339,7 +7576,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				onClick: () => {
 					setZoom(zoomTier + .1);
 				}
-			}, "A+"))), (0, react.createElement)("div", { className: "lks14-row" }, examLessonActive ? (0, react.createElement)("div", { className: "lks14-col lks14-chat" }, (0, react.createElement)(ExamView, {
+			}, "A+"))), (0, react.createElement)("div", {
+				className: "lks14-row",
+				ref: rowEl
+			}, examLessonActive ? (0, react.createElement)("div", { className: "lks14-col lks14-chat" }, (0, react.createElement)(ExamView, {
 				lessonId: lesson.lessonId,
 				sectionTitle: lesson.sectionTitle,
 				paused: examLeave !== null,
@@ -7365,6 +7605,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				contextMeter,
 				contextBreakdown: breakdown,
 				uploadAttachment
+			}), (0, react.createElement)(PaneResizeHandle, {
+				side: "chat",
+				clampLive: chatClampLive,
+				onCommit: (px) => commitPaneWidth("chat", px)
 			}), (0, react.createElement)(NotebookPane, {
 				data,
 				deleteNote,
@@ -8271,6 +8515,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			const stuck = (0, react.useRef)(true);
 			const [showFab, setShowFab] = (0, react.useState)(false);
 			const [threadsOpen, setThreadsOpen] = (0, react.useState)(false);
+			const [pendingAttach, setPendingAttach] = (0, react.useState)(null);
 			const onStreamScroll = () => {
 				const el = streamEl.current;
 				if (el === null) return;
@@ -8522,18 +8767,31 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					for (let i = 0; i < bytes.length; i += CHUNK) bin += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
 					return uploadAttachment(file.name, btoa(bin));
 				}).then((path) => {
-					send(tr("attach.sent", {
+					setPendingAttach({
 						name: file.name,
-						path
-					}));
+						path,
+						image: /\.(?:png|jpe?g|gif|webp|bmp)$/i.test(file.name)
+					});
 				}, () => {
 					showStudyToast(tr("attach.fail"), { severity: "error" });
 				});
 			};
+			/** One send = draft + pending attachment merged into a single message (issue #7). */
+			const submitComposer = () => {
+				if (busy) return;
+				const text = draft.trim();
+				if (text === "" && pendingAttach === null) return;
+				const attachLine = pendingAttach === null ? "" : tr("attach.sent", {
+					name: pendingAttach.name,
+					path: pendingAttach.path
+				});
+				setPendingAttach(null);
+				send(attachLine === "" ? text : text === "" ? attachLine : `${text}\n\n${attachLine}`);
+			};
 			const onComposerKey = (e) => {
 				if (e.key === "Enter" && !e.shiftKey) {
 					e.preventDefault();
-					if (draft.trim() !== "" && !busy) send(draft);
+					if ((draft.trim() !== "" || pendingAttach !== null) && !busy) submitComposer();
 				}
 			};
 			const proposal = data?.pendingProposals[0] ?? null;
@@ -8660,7 +8918,18 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				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", {
+			}, 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))))), pendingAttach !== null ? (0, react.createElement)("div", { className: "lks14-attachchip" }, pendingAttach.image ? (0, react.createElement)("img", {
+				className: "lks14-attachchip-thumb",
+				src: `/lookatstudy/api/attachment/${encodeURIComponent(pendingAttach.path.split("/").pop() ?? "")}`,
+				alt: pendingAttach.name
+			}) : null, (0, react.createElement)("span", { className: "lks14-attachchip-name" }, pendingAttach.name), (0, react.createElement)("button", {
+				className: "lks14-attachchip-x",
+				"aria-label": tr("attach.remove"),
+				"data-tooltip": tr("attach.remove"),
+				onClick: () => {
+					setPendingAttach(null);
+				}
+			}, "✕")) : null, (0, react.createElement)("textarea", {
 				className: "lks14-composertext",
 				placeholder: busy ? tr("composer.busy") : tr("tutor.empty.hint"),
 				value: draft,
@@ -8750,9 +9019,9 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}, (0, react.createElement)(IconCloseFill16, { size: 14 })) : (0, react.createElement)("button", {
 				className: "lks-btn-send",
 				"aria-label": tr("composer.send"),
-				disabled: dormant || draft.trim() === "",
+				disabled: dormant || draft.trim() === "" && pendingAttach === null,
 				onClick: () => {
-					send(draft);
+					submitComposer();
 				}
 			}, (0, react.createElement)(IconArrowUpFill16, { size: 18 }))), showFab ? (0, react.createElement)("button", {
 				className: `lks14-scrollfab${busy ? " streaming" : ""}`,
@@ -8775,6 +9044,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			const [zoneOverrides, setZoneOverrides] = (0, react.useState)({});
 			const zoneCounts = (0, react.useRef)({});
 			const [editingNote, setEditingNote] = (0, react.useState)(null);
+			const [noteRev, setNoteRev] = (0, react.useState)(0);
 			const [editDraft, setEditDraft] = (0, react.useState)("");
 			const [pendingLocate, setPendingLocate] = (0, react.useState)(null);
 			const [cmapExpanded, setCmapExpanded] = (0, react.useState)(false);
@@ -9198,7 +9468,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 						}));
 					}
 				}, tr(labelKey), (0, react.createElement)("span", { className: "lks14-zonecount" }, String(zoneNotes.length)), (0, react.createElement)("span", { className: "lks14-zonecaret" }, open ? "▾" : "▸")), ...open ? zoneNotes.map((n) => (0, react.createElement)("div", {
-					key: n.id,
+					key: `${n.id}:${String(noteRev)}`,
 					className: `lks-note${n.pinned ? " pinned" : ""}`
 				}, (0, react.createElement)("span", { className: "lks-note-src" }, tr("note.src." + n.source)), (0, react.createElement)("button", {
 					className: "lks-note-act",
@@ -9259,6 +9529,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					disabled: editDraft.trim() === "",
 					onClick: () => {
 						setEditingNote(null);
+						setNoteRev((r) => r + 1);
 						fire(editNote(lesson.lessonId, n.id, editDraft));
 					}
 				}, tr("note.save")))) : (0, react.createElement)(ContentBoundary, {
@@ -9266,7 +9537,10 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					boundaryKey: `note-${n.id}`
 				}, (0, react.createElement)("div", {
 					className: "lks-note-text",
-					dangerouslySetInnerHTML: { __html: renderMarkdown(n.text) }
+					ref: (el) => {
+						if (el !== null) enhanceRendered(el).catch(() => {});
+					},
+					dangerouslySetInnerHTML: { __html: renderMarkdown(normalizeMathNotation(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" }, body, confirmNoteDel !== null ? (0, react.createElement)(ConfirmCard, {