@windypro-rourou/dsh-code-studio 0.1.0

package/README.md

@@ -0,0 +1,42 @@
+# Code Studio 鈥?DSH Web GUI 鐨?VS Code + Cline 娣峰悎鎻掍欢
+
+鍦?DeepSeek Harness 鐨?Web 鐣岄潰锛坵ebui锛夐噷鐩存帴**娴忚銆佺紪杈戜唬鐮?*锛屽苟鍦?**Agent 淇敼鏂囦欢鏃跺儚 Cline 涓€鏍烽€愯鏄剧ず Diff**锛氭敼鍔ㄥ尯琛屽彿鍓嶆爣娉?`+`锛堟柊澧?缁胯壊锛夈€乣-`锛堝垹闄?绾㈣壊锛夈€乣~`锛堜慨鏀?榛勮壊锛夈€?
+## 鍔熻兘
+
+- 鏂囦欢鏍戯細宸︿晶鎳掑姞杞界洰褰曟爲锛岀偣鍑绘枃浠舵墦寮€锛堟敮鎸佹墦寮€宸ヤ綔鍖轰换鎰忚矾寰勶級銆?- 缂栬緫鍣細甯﹁鍙风殑浠ｇ爜缂栬緫瑙嗗浘锛汣trl+S 淇濆瓨锛孋trl+D 鍦?缂栬緫/Diff 闂村垏鎹€?- Cline 寮?Diff锛欴iff 瑙嗗浘鎸夎鏄剧ず before/after锛涜鍙峰墠鏂规湁绗﹀彿鍒楋紙+ - ~锛夛紝鏈敼鍔ㄥぇ娈佃嚜鍔ㄦ姌鍙犱负銆屸嫰 N 琛屾湭鏀瑰姩銆嶏紝鍙偣鍑诲睍寮€鍏ㄩ儴銆?- Agent 鍙樻洿璺熻釜锛欻ost 渚ч€掑綊鐩戝惉宸ヤ綔鍖猴紙fs.watch + mtime 杞鍏滃簳锛夛紝Agent 鍐欏叆鏂囦欢鍚庢祻瑙堝櫒瀹炴椂鏀跺埌浜嬩欢锛涙枃浠舵爲椤堕儴銆孉gent 鍙樻洿銆嶅垪琛ㄦ樉绀烘湁鍙樻洿鐨勬枃浠讹紙缁?鏂板缓銆侀粍=淇敼銆佺孩=鍒犻櫎锛夛紝鐐瑰嚮鍗崇湅 Diff銆?- 鍙樻洿鍘嗗彶锛氭瘡涓枃浠朵繚鐣欐渶杩?30 鏉?before/after 璁板綍锛?api/code-studio/history锛夈€?- 鍙岀鎻掍欢锛欻ost锛圢ode锛夋彁渚?/api/code-studio/* REST + SSE锛汣lient锛堟祻瑙堝櫒 bundle锛夋彁渚?UI銆?
+## 瀹夎锛堝凡瑁呭ソ锛?
+鎻掍欢宸插畨瑁呭埌 web profile锛?DSH_HOME/profiles/web锛夛細
+- 鍖呬綅浜?profiles/web/node_modules/@windypro-rourou/dsh-code-studio
+- cordis.patch.yml 宸叉彃鍏?code-studio 琛?- package.json 宸插姞鍏?link:F:/CycleMaster/dsh-code-studio 渚濊禆
+
+**鐢熸晥鏃舵満**锛欴SH 鐨勫鎴风鎻掍欢鍚嶅崟锛坆oot manifest锛夊湪鍚姩鏃跺浐鍖栵紝鏂版彃浠堕渶瑕?*閲嶅惎 dsh web**锛堟垨涓嬫鍚姩 harness锛夊悗鍑虹幇鍦ㄤ晶杈规爮銆傚綋鍓嶆鍦ㄨ繍琛岀殑 webui 鏃犳硶鐑姞杞芥柊鎻掍欢锛堣繖鏄钩鍙版満鍒讹紝闈炴彃浠剁己闄凤級銆?
+### 鎵嬪姩瀹夎锛堝叾浠栨満鍣級
+
+```powershell
+# 1. 鐢ㄥ畼鏂瑰懡浠ら摼鎺ユ彃浠讹紙浼氳嚜鍔ㄦ妸瀹冨姞鍏?profile bundles 灞傦級
+dsh plugin --profile web add link:F:/CycleMaster/dsh-code-studio
+
+# 2. 鎴栬€呭湪 profiles/web/cordis.patch.yml 杩藉姞锛?# - insert:
+#     - id: code-studio
+#       name: '@windypro-rourou/dsh-code-studio'
+```
+
+### 鐜板湪灏辨兂棰勮锛?
+```powershell
+dsh web --port 3081   # 浼氱湅鍒颁晶杈规爮鍑虹幇 "Code Studio" 鍏ュ彛
+```
+
+## 浣跨敤
+
+1. 鍒锋柊椤甸潰鍚庯紝宸︿晶杈规爮鍑虹幇 **Code Studio** 鍏ュ彛锛堜唬鐮佸浘鏍囷級銆?2. 鐐瑰嚮鎵撳紑鍏ㄥ睆闈㈡澘锛氬乏渚ф枃浠舵爲锛屼腑闂存爣绛鹃〉缂栬緫鍣ㄣ€?3. 璁?Agent 淇敼浠ｇ爜锛堝啓鏂囦欢/缂栬緫锛夛紝闈㈡澘椤堕儴銆孉gent 鍙樻洿銆嶅疄鏃跺垪鍑哄彉鍖栨枃浠躲€?4. 鐐瑰嚮鍙樻洿鏂囦欢 鈫?榛樿杩涘叆 Diff 瑙嗗浘锛氳鍙峰墠绗﹀彿 + 棰滆壊鑳屾櫙锛屼竴鐩簡鐒躲€?
+## 蹇嵎閿?
+| 鎸夐敭 | 鍔熻兘 |
+| --- | --- |
+| Ctrl+S | 淇濆瓨褰撳墠鏂囦欢 |
+| Ctrl+D | 鍒囨崲 缂栬緫 / Diff 瑙嗗浘 |
+
+## 鎶€鏈鏄?
+- Host锛歭ib/index.js 鈥?webServer.register 娉ㄥ唽 6 涓矾鐢憋紱fs.watch(recursive) + 1500ms mtime 杞锛涘姣忎釜鏂囦欢缁存姢鍩虹嚎蹇収锛屼粠鑰屼骇鍑虹簿纭殑 before/after銆?- Client锛歭ib/client.js 鈥?绾祻瑙堝櫒 bundle锛坵indow.__ModuleLoader__.load锛夛紝浠呬緷璧?react/react-dom锛涜嚜甯?LCS 琛岀骇 diff 寮曟搸涓庢牱寮忋€?- 璺緞瀹夊叏锛欰PI 浠呮帴鍙?loopback + 鍚屾簮鏍囪璇锋眰銆?
+## 宸茬煡闄愬埗
+
+- 鍗曟枃浠?> 512KB 涓嶈鍙栧唴瀹癸紙闃叉祻瑙堝櫒鍗℃锛夛紝浣嗕細鏍囪銆屾枃浠惰繃澶с€嶃€?- Diff 瑙嗗浘閽堝銆屾墦寮€鍚?涓婃璇诲彇鍚庛€嶇殑鍙樻洿鍋氬熀绾垮姣旓紝绗﹀悎 Cline 鐨勪細璇濊涔夈€?

package/cordis.patch.yml

@@ -0,0 +1,7 @@
+# dsh-code-studio bundle patch: inserts the Code Studio plugin row into the
+# web profile roster. Applied as a profile bundle layer (the dsh.bundle.patch
+# manifest field) over dsh-base; activate with
+#   dsh plugin --profile web add @windypro-rourou/dsh-code-studio
+- insert:
+    - id: code-studio
+      name: '@windypro-rourou/dsh-code-studio'

package/lib/client.js

@@ -0,0 +1,688 @@
+window.__ModuleLoader__.load({
+	id: "@windypro-rourou/dsh-code-studio",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let React = require("react");
+
+		const el = (type, props, ...children) => React.createElement(type, props ?? null, ...children);
+		const inject = ["slots"];
+
+		// ============================ API ============================
+		const API = "/api/code-studio";
+		async function api(path, init) {
+			const res = await fetch(API + path, init);
+			const body = await res.json().catch(() => ({}));
+			if (!res.ok) throw new Error(body.error ?? ("request failed: " + res.status));
+			return body;
+		}
+		const enc = encodeURIComponent;
+		const listDir = (path) => api("/tree?path=" + enc(path));
+		const readFile = (path) => api("/read?path=" + enc(path));
+		const historyApi = (path) => api("/history?path=" + enc(path));
+		const writeFile = (path, content) => api("/write", {
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({ path, content })
+		});
+		const getRoot = () => api("/root");
+
+		// ============================ diff engine ============================
+		function lineDiff(before, after) {
+			const a = before == null ? [] : String(before).split("\n");
+			const b = after == null ? [] : String(after).split("\n");
+			const n = a.length, m = b.length;
+			if (n === 0) return b.map((text, j) => ({ type: "add", oldNo: null, newNo: j + 1, text }));
+			if (m === 0) return a.map((text, i) => ({ type: "del", oldNo: i + 1, newNo: null, text }));
+			if (n * m > 2500000) return greedyDiff(a, b);
+			const dp = new Uint32Array((n + 1) * (m + 1));
+			for (let i = n - 1; i >= 0; i--) {
+				for (let j = m - 1; j >= 0; j--) {
+					dp[i * (m + 1) + j] = a[i] === b[j]
+						? dp[(i + 1) * (m + 1) + j + 1] + 1
+						: Math.max(dp[(i + 1) * (m + 1) + j], dp[i * (m + 1) + j + 1]);
+				}
+			}
+			const ops = [];
+			let i = 0, j = 0;
+			while (i < n && j < m) {
+				if (a[i] === b[j]) { ops.push({ type: "same", oldNo: i + 1, newNo: j + 1, text: a[i] }); i++; j++; }
+				else if (dp[(i + 1) * (m + 1) + j] >= dp[i * (m + 1) + j + 1]) { ops.push({ type: "del", oldNo: i + 1, newNo: null, text: a[i] }); i++; }
+				else { ops.push({ type: "add", oldNo: null, newNo: j + 1, text: b[j] }); j++; }
+			}
+			while (i < n) { ops.push({ type: "del", oldNo: i + 1, newNo: null, text: a[i] }); i++; }
+			while (j < m) { ops.push({ type: "add", oldNo: null, newNo: j + 1, text: b[j] }); j++; }
+			return ops;
+		}
+		function greedyDiff(a, b) {
+			let s = 0;
+			while (s < a.length && s < b.length && a[s] === b[s]) s++;
+			let e = 0;
+			while (e < a.length - s && e < b.length - s && a[a.length - 1 - e] === b[b.length - 1 - e]) e++;
+			const ops = [];
+			for (let k = 0; k < s; k++) ops.push({ type: "same", oldNo: k + 1, newNo: k + 1, text: a[k] });
+			for (let k = s; k < a.length - e; k++) ops.push({ type: "del", oldNo: k + 1, newNo: null, text: a[k] });
+			for (let k = s; k < b.length - e; k++) ops.push({ type: "add", oldNo: null, newNo: k + 1, text: b[k] });
+			for (let k = a.length - e; k < a.length; k++) ops.push({ type: "same", oldNo: k + 1, newNo: b.length - (a.length - k) + 1, text: a[k] });
+			return ops;
+		}
+		function mergeModified(ops) {
+			const out = [];
+			let i = 0;
+			while (i < ops.length) {
+				if (ops[i].type === "del") {
+					let di = i;
+					while (di < ops.length && ops[di].type === "del") di++;
+					let ai = di;
+					while (ai < ops.length && ops[ai].type === "add") ai++;
+					if (di - i === ai - di) {
+						for (let k = 0; k < di - i; k++) {
+							const oldNo = ops[i + k].oldNo, newNo = ops[di + k].newNo;
+							out.push({ type: "mod", oldNo, newNo, text: ops[i + k].text, side: "old" });
+							out.push({ type: "mod", oldNo, newNo, text: ops[di + k].text, side: "new" });
+						}
+						i = ai;
+						continue;
+					}
+				}
+				out.push(ops[i]);
+				i++;
+			}
+			return out;
+		}
+		function buildBlocks(ops, gapThreshold = 5) {
+			const blocks = [];
+			let same = [];
+			const flushSame = (keepTail) => {
+				if (same.length === 0) return;
+				if (same.length <= gapThreshold) { blocks.push({ kind: "lines", ops: same }); same = []; return; }
+				const head = same.slice(0, 2);
+				const tail = keepTail ? same.slice(-2) : [];
+				blocks.push({ kind: "lines", ops: head });
+				blocks.push({ kind: "gap", count: same.length - head.length - tail.length });
+				if (tail.length) blocks.push({ kind: "lines", ops: tail });
+				same = [];
+			};
+			for (const op of ops) {
+				if (op.type === "same") { same.push(op); continue; }
+				flushSame(true);
+				blocks.push({ kind: "lines", ops: [op] });
+			}
+			flushSame(false);
+			return blocks;
+		}
+		function fileStats(before, after) {
+			const diff = lineDiff(before, after);
+			let adds = 0, dels = 0;
+			for (const op of diff) { if (op.type === "add") adds++; else if (op.type === "del") dels++; }
+			return { adds, dels };
+		}
+
+		// ============================ syntax highlighting ============================
+		const KEYWORDS = new Set(["if","else","for","while","do","return","function","const","let","var","class","extends","new","import","export","from","default","async","await","try","catch","finally","throw","switch","case","break","continue","typeof","instanceof","in","of","this","super","static","get","set","public","private","protected","interface","implements","enum","package","void","yield","delegate","is","as","def","elif","lambda","pass","and","or","not","with","raise","global","nonlocal","assert","del","fun","val","data","object","when","override","open","internal","abstract","companion","lateinit","by","init","constructor","suspend","sealed","expect","actual","typealias","annotation","select","where","join","group","order","limit","offset","having","create","insert","update","delete","table","values","primary","foreign","key","index","unique","not","null","like","between","left","right","inner","outer","on","using","distinct","exists","union","all","grant","revoke","begin","commit","rollback","pragma","default","references"]);
+		const TYPES = new Set(["int","float","double","long","short","byte","boolean","char","String","List","Map","Set","Object","Array","Number","Boolean","Date","Promise","any","unknown","never","number","string","boolean","object","symbol","bigint","uint8","int8","int16","uint16","int32","uint32","int64","uint64","void","Unit","Any","Nothing","Byte","Short","Long","Char","Float","Double","Boolean","ArrayList","HashMap","HashSet","Integer","Runnable","Throwable","Exception","Error","Context","Activity","View","ViewGroup","Fragment","Intent","Bundle","Bitmap","RecyclerView","Adapter","ViewHolder","Handler","Thread","Task","TaskInfo"]);
+		const CONSTS = new Set(["true","false","null","undefined","NaN","Infinity","self","cls","it"]);
+		const TOKEN_RE = /(\/\/[^\n]*|\/\*[\s\S]*?\*\/|#[^\n]*|<!--[\s\S]*?-->|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|\b\d[\d_]*(?:\.\d+)?(?:[eE][+-]?\d+)?\b|#[0-9a-fA-F]{3,8}\b|@[A-Za-z_][\w]*|\b[A-Za-z_$][\w$]*(?=\s*\()|\b[A-Za-z_$][\w$]*\b)/g;
+		function tokenizeLine(line) {
+			const out = [];
+			let last = 0;
+			let m;
+			TOKEN_RE.lastIndex = 0;
+			while ((m = TOKEN_RE.exec(line)) !== null) {
+				if (m.index > last) out.push({ text: line.slice(last, m.index), cls: "" });
+				const tok = m[0];
+				let cls = "";
+				if (tok.startsWith("//") || tok.startsWith("/*") || tok.startsWith("#") || tok.startsWith("<!--")) cls = "cs-tok-cmt";
+				else if (tok[0] === "\"" || tok[0] === "'") cls = "cs-tok-str";
+				else if (/^[\d#@]/.test(tok)) cls = tok[0] === "@" ? "cs-tok-ann" : "cs-tok-num";
+				else if (tok.endsWith("(")) { const name = tok.slice(0, -1).trim(); cls = "cs-tok-fn"; }
+				else if (KEYWORDS.has(tok)) cls = "cs-tok-kw";
+				else if (TYPES.has(tok)) cls = "cs-tok-ty";
+				else if (CONSTS.has(tok)) cls = "cs-tok-cn";
+				out.push({ text: tok, cls });
+				last = m.index + tok.length;
+			}
+			if (last < line.length) out.push({ text: line.slice(last), cls: "" });
+			return out;
+		}
+		function extOf(path) {
+			const name = path.split(/[\\/]/).pop() || "";
+			const i = name.lastIndexOf(".");
+			return i >= 0 ? name.slice(i + 1).toLowerCase() : "";
+		}
+		function Highlighted({ text, path }) {
+			const toks = React.useMemo(() => tokenizeLine(text), [text]);
+			return el("span", null,
+				toks.map((t, i) => t.cls ? el("span", { className: t.cls, key: i }, t.text) : t.text)
+			);
+		}
+
+		// ============================ panel controller ============================
+		const panel = { open: false, listeners: new Set() };
+		function setPanelOpen(v) {
+			panel.open = !!v;
+			for (const fn of panel.listeners) fn(panel.open);
+		}
+		function subscribePanel(fn) { panel.listeners.add(fn); return () => panel.listeners.delete(fn); }
+
+		// ============================ CSS ============================
+		const CSS = [
+			".cs-root{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;background:var(--dsw-alias-bg-layer-1,#151922);color:var(--dsw-alias-label-primary,#d7dde6);border-left:1px solid var(--dsw-alias-border-l1,#262a33);font:13px/1.55 -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;z-index:30;box-shadow:-12px 0 32px rgba(0,0,0,.18);animation:csSlideIn .18s ease-out;--cs-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,\"Liberation Mono\",monospace}",
+			"@keyframes csSlideIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}",
+			".cs-root *{box-sizing:border-box}",
+			".cs-resize{position:absolute;left:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:6}",
+			".cs-resize:hover,.cs-resize.cs-drag{background:var(--dsw-alias-state-business-primary,#2f6fed);opacity:.35}",
+			".cs-head{display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;height:42px;flex:none;border-bottom:1px solid var(--dsw-alias-border-l1,#262a33);background:var(--dsw-alias-bg-layer-2,#1a1f2b)}",
+			".cs-title{font-weight:600;font-size:13px;display:flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}",
+			".cs-title .cs-dot{width:8px;height:8px;border-radius:50%;background:var(--dsw-alias-state-business-primary,#2f6fed);flex:none}",
+			".cs-count{margin-left:auto;font-size:11px;font-family:var(--cs-mono);color:var(--dsw-alias-label-tertiary,#8b93a3);background:var(--dsw-alias-bg-mask-1,rgba(255,255,255,.05));border:1px solid var(--dsw-alias-border-l1,#262a33);border-radius:10px;padding:1px 8px;white-space:nowrap}",
+			".cs-close{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--dsw-alias-label-tertiary,#8b93a3);cursor:pointer;font-size:13px;line-height:1}",
+			".cs-close:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.08));color:var(--dsw-alias-label-primary,#d7dde6)}",
+			".cs-tabs{display:flex;gap:2px;padding:6px 10px 0;flex:none;border-bottom:1px solid var(--dsw-alias-border-l1,#262a33);background:var(--dsw-alias-bg-layer-2,#1a1f2b)}",
+			".cs-tab{flex:none;padding:5px 12px;border-radius:7px 7px 0 0;font-size:12px;color:var(--dsw-alias-label-tertiary,#8b93a3);cursor:pointer;border:1px solid transparent;border-bottom:none}",
+			".cs-tab:hover{color:var(--dsw-alias-label-primary,#d7dde6)}",
+			".cs-tab.cs-on{color:var(--dsw-alias-label-primary,#d7dde6);background:var(--dsw-alias-bg-layer-1,#151922);border-color:var(--dsw-alias-border-l1,#262a33)}",
+			".cs-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}",
+			".cs-chg-list{flex:1;overflow:auto;padding:6px}",
+			".cs-chg{flex:none;border:1px solid var(--dsw-alias-border-l1,#262a33);border-radius:9px;margin:0 2px 6px;overflow:hidden;background:var(--dsw-alias-bg-base,#0f1115)}",
+			".cs-chg-row{display:flex;align-items:center;gap:6px;padding:6px 8px;cursor:pointer;font-family:var(--cs-mono);font-size:11.5px}",
+			".cs-chg-row:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.05))}",
+			".cs-caret{width:12px;flex:none;color:var(--dsw-alias-label-quaternary,#565e6e);font-size:9px;text-align:center}",
+			".cs-chg-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-secondary,#b6bdc9)}",
+			".cs-chg-path .cs-bad{font-size:9.5px;border-radius:4px;padding:0 4px;margin-left:6px;flex:none}",
+			".cs-bad-add{background:var(--dsw-alias-state-success-secondary,rgba(34,197,94,.16));color:var(--dsw-alias-state-success-primary,#22c55e)}",
+			".cs-bad-del{background:var(--dsw-alias-state-error-secondary,rgba(239,68,68,.14));color:var(--dsw-alias-state-error-primary,#ef4444)}",
+			".cs-plus{color:var(--dsw-alias-state-success-primary,#22c55e);flex:none;font-size:11px}",
+			".cs-minus{color:var(--dsw-alias-state-error-primary,#ef4444);flex:none;font-size:11px}",
+			".cs-chg-body{border-top:1px solid var(--dsw-alias-border-l1,#262a33)}",
+			".cs-dline{display:flex;font-family:var(--cs-mono);font-size:11.5px;line-height:1.5;min-width:max-content}",
+			".cs-dg{flex:none;display:flex;user-select:none}",
+			".cs-dsym{width:16px;flex:none;text-align:center;font-weight:700}",
+			".cs-dnum{min-width:34px;flex:none;text-align:right;padding-right:8px;color:var(--dsw-alias-label-quaternary,#565e6e);font-size:10.5px}",
+			".cs-dtxt{flex:1;white-space:pre;padding-right:10px;color:var(--dsw-alias-label-secondary,#b6bdc9)}",
+			".cs-dline.cs-add{background:var(--dsw-alias-state-success-secondary,rgba(34,197,94,.14))}.cs-dline.cs-add .cs-dsym{color:var(--dsw-alias-state-success-primary,#22c55e)}",
+			".cs-dline.cs-del{background:var(--dsw-alias-state-error-secondary,rgba(239,68,68,.13))}.cs-dline.cs-del .cs-dsym{color:var(--dsw-alias-state-error-primary,#ef4444)}.cs-dline.cs-del .cs-dtxt{text-decoration:line-through;text-decoration-color:rgba(239,68,68,.45)}",
+			".cs-dline.cs-mod{background:var(--dsw-alias-state-warn-secondary,rgba(234,179,8,.12))}.cs-dline.cs-mod .cs-dsym{color:var(--dsw-alias-state-warn-primary,#eab308)}",
+			".cs-dgap{display:flex;align-items:center;gap:8px;padding:0 10px;height:22px;cursor:pointer;color:var(--dsw-alias-label-tertiary,#8b93a3);font-size:10.5px;user-select:none}",
+			".cs-dgap:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.05))}",
+			".cs-dgap .cs-dgbar{flex:1;height:1px;background:var(--dsw-alias-border-l1,#262a33)}",
+			".cs-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--dsw-alias-label-tertiary,#8b93a3);font-size:12px;padding:24px}",
+			".cs-empty .cs-hint{font-size:11px;color:var(--dsw-alias-label-quaternary,#565e6e);max-width:280px;text-align:center;line-height:1.6}",
+			".cs-files{flex:1;display:flex;flex-direction:column;min-height:0}",
+			".cs-tree{flex:none;max-height:34%;overflow:auto;border-bottom:1px solid var(--dsw-alias-border-l1,#262a33);padding:4px 0;font-size:11.5px;background:var(--dsw-alias-bg-base,#0f1115)}",
+			".cs-node{display:flex;align-items:center;gap:5px;padding:2px 8px;cursor:pointer;white-space:nowrap;color:var(--dsw-alias-label-secondary,#b6bdc9);border-radius:5px}",
+			".cs-node:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06))}",
+			".cs-node.cs-sel{background:var(--dsw-alias-interactive-bg-active,rgba(47,111,237,.16));color:var(--dsw-alias-label-primary,#d7dde6)}",
+			".cs-node .cs-caret{width:11px;flex:none;color:var(--dsw-alias-label-quaternary,#565e6e);font-size:9px;text-align:center}",
+			".cs-node .cs-nm{overflow:hidden;text-overflow:ellipsis}",
+			".cs-node .cs-ico{flex:none;font-size:11px;opacity:.75}",
+			".cs-node .cs-badge{margin-left:auto;font-size:9.5px;color:var(--dsw-alias-state-warn-primary,#eab308);flex:none}",
+			".cs-editor{flex:1;display:flex;flex-direction:column;min-height:0}",
+			".cs-filebar{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid var(--dsw-alias-border-l1,#262a33);flex:none;font-family:var(--cs-mono);font-size:11px;color:var(--dsw-alias-label-tertiary,#8b93a3);background:var(--dsw-alias-bg-layer-2,#1a1f2b)}",
+			".cs-filebar .cs-fp{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+			".cs-btn{flex:none;background:transparent;border:1px solid var(--dsw-alias-border-l1,#262a33);color:var(--dsw-alias-label-secondary,#b6bdc9);border-radius:6px;padding:3px 8px;font-size:11px;cursor:pointer}",
+			".cs-btn:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.08))}",
+			".cs-btn.cs-pri{background:var(--dsw-alias-button-primary-fill,#2f6fed);border-color:var(--dsw-alias-button-primary-fill,#2f6fed);color:#fff}",
+			".cs-btn:disabled{opacity:.45;cursor:default}",
+			".cs-edit-wrap{flex:1;display:flex;min-height:0}",
+			".cs-edit-g{flex:none;overflow:hidden;text-align:right;padding-left:10px;user-select:none}",
+			".cs-edit-g .cs-gn{min-width:30px;padding:0 8px 0 0;color:var(--dsw-alias-label-quaternary,#565e6e);font-family:var(--cs-mono);font-size:12px;line-height:1.55;text-align:right}",
+			".cs-edit-overlay{position:relative;flex:1;min-width:0;overflow:hidden;background:var(--dsw-alias-markdown-code-block,transparent)}",
+			".cs-edit-overlay .cs-hl{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;margin:0;padding:0 10px 0 8px;white-space:pre;overflow:hidden;pointer-events:none;font-family:var(--cs-mono);font-size:12px;line-height:1.55;color:var(--dsw-alias-label-primary,#d7dde6)}",
+			".cs-edit-overlay .cs-ta{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:none;outline:none;color:transparent;caret-color:var(--dsw-alias-label-primary,#d7dde6);font-family:var(--cs-mono);font-size:12px;line-height:1.55;padding:0 10px 0 8px;resize:none;white-space:pre;overflow:auto;tab-size:2}",
+			".cs-edit-overlay .cs-ta::selection{background:rgba(47,111,237,.35)}",
+			".cs-tok-kw{color:#c678dd}.cs-tok-str{color:#98c379}.cs-tok-cmt{color:#7f848e;font-style:italic}.cs-tok-num{color:#d19a66}.cs-tok-fn{color:#61afef}.cs-tok-ty{color:#e5c07b}.cs-tok-cn{color:#56b6c2}.cs-tok-ann{color:#61afef;font-style:italic}",
+			".cs-status{display:flex;align-items:center;gap:10px;padding:4px 12px;border-top:1px solid var(--dsw-alias-border-l1,#262a33);flex:none;font-size:10.5px;color:var(--dsw-alias-label-tertiary,#8b93a3);font-family:var(--cs-mono);background:var(--dsw-alias-bg-layer-2,#1a1f2b)}",
+			".cs-status .cs-sdot{width:7px;height:7px;border-radius:50%;flex:none}",
+			".cs-status .cs-ok{background:var(--dsw-alias-state-success-primary,#22c55e)}",
+			".cs-status .cs-busy{background:var(--dsw-alias-state-warn-primary,#eab308)}",
+			".cs-status .cs-err{background:var(--dsw-alias-state-error-primary,#ef4444)}",
+			".cs-badge-f{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:var(--dsw-alias-bg-overlay,#1b2130);color:var(--dsw-alias-label-primary,#d7dde6);border:1px solid var(--dsw-alias-border-l1,#262a33);font-size:12px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3);animation:csSlideIn .2s ease-out}",
+			".cs-badge-f:hover{background:var(--dsw-alias-bg-layer-3,#222836)}",
+			".cs-badge-f .cs-bd{width:8px;height:8px;border-radius:50%;background:var(--dsw-alias-state-business-primary,#2f6fed);flex:none}"
+		].join("\n");
+
+		// ============================ diff view ============================
+		function DiffRows({ before, after, path, expanded }) {
+			const ops = React.useMemo(() => mergeModified(lineDiff(before, after)), [before, after]);
+			const [open, setOpen] = React.useState(false);
+			const showAll = expanded === true || open;
+			const blocks = React.useMemo(() => buildBlocks(ops), [ops]);
+			const rows = [];
+			const rowOf = (op, key) => {
+				const type = op.type;
+				const sym = type === "add" ? "+" : type === "del" ? "−" : type === "mod" ? "~" : " ";
+				const num = type === "del" ? op.oldNo : op.newNo;
+				return el("div", { className: "cs-dline cs-" + type, key },
+					el("span", { className: "cs-dsym" }, sym),
+					el("span", { className: "cs-dnum" }, num ?? ""),
+					el("span", { className: "cs-dtxt" }, el(Highlighted, { text: op.text, path }))
+				);
+			};
+			for (const block of blocks) {
+				if (block.kind === "gap") {
+					rows.push(el("div", { className: "cs-dgap", key: "g" + rows.length, onClick: () => setOpen(true) },
+						el("span", null, "⋯ " + block.count + " 行未改动"),
+						el("span", { className: "cs-dgbar" })
+					));
+				} else {
+					for (const op of block.ops) rows.push(rowOf(op, "r" + rows.length));
+				}
+			}
+			if (showAll) {
+				const all = ops.map((op, i) => rowOf(op, "e" + i));
+				return el("div", null, all);
+			}
+			return el("div", null, rows);
+		}
+
+		// ============================ file tree ============================
+		const SKIP_DIRS = new Set(["node_modules", ".git", "build", "dist", ".gradle", ".idea", ".kotlin", "out", "target", "__pycache__", ".venv", "venv", ".cxx", ".gitlab"]);
+		function FileTree({ root, selected, changed, onOpen }) {
+			const [dirs, setDirs] = React.useState({});
+			const [expanded, setExpanded] = React.useState({});
+			React.useEffect(() => {
+				setDirs({}); setExpanded({ [root]: true });
+				// auto-load the root so it is immediately usable (no "click to expand" stall)
+				if (root != null) {
+					setDirs((prev) => ({ ...prev, [root]: null }));
+					listDir(root).then((data) => setDirs((prev) => ({ ...prev, [root]: data.entries })))
+						.catch(() => setDirs((prev) => ({ ...prev, [root]: [] })));
+				}
+			}, [root]);
+			const loadDir = (path) => {
+				setDirs((prev) => (path in prev ? prev : { ...prev, [path]: null }));
+				listDir(path).then((data) => setDirs((prev) => ({ ...prev, [path]: data.entries })))
+					.catch(() => setDirs((prev) => ({ ...prev, [path]: [] })));
+			};
+			const toggle = (path, isDir) => {
+				if (!isDir) { onOpen(path); return; }
+				const nextOpen = !expanded[path];
+				setExpanded((prev) => ({ ...prev, [path]: nextOpen }));
+				if (nextOpen && !(path in dirs)) loadDir(path);
+			};
+			const renderDir = (path, depth) => {
+				if (path == null) return null;
+				const base = String(path);
+				const isOpen = !!expanded[path];
+				const entries = dirs[path];
+				const name = path === root ? (base.split(/[\\/]/).pop() || base) : base.split(/[\\/]/).pop();
+				const rows = [];
+				rows.push(el("div", {
+					key: "d" + path, className: "cs-node" + (path === selected ? " cs-sel" : ""),
+					style: { paddingLeft: 8 + depth * 13 },
+					onClick: () => toggle(path, true)
+				},
+					el("span", { className: "cs-caret" }, isOpen ? "▾" : "▸"),
+					el("span", { className: "cs-ico" }, "📁"),
+					el("span", { className: "cs-nm" }, name)
+				));
+				if (isOpen) {
+					if (entries === null) rows.push(el("div", { key: "l" + path, className: "cs-node", style: { paddingLeft: 8 + (depth + 1) * 13, color: "var(--dsw-alias-label-quaternary)" } }, "加载中…"));
+					else if (entries === void 0) rows.push(el("div", { key: "l" + path, className: "cs-node", style: { paddingLeft: 8 + (depth + 1) * 13, color: "var(--dsw-alias-label-quaternary)" } }, "点击展开"));
+					else for (const entry of entries) {
+						if (entry.type === "dir" && SKIP_DIRS.has(entry.name)) continue;
+						if (entry.type === "dir") rows.push(el(React.Fragment, { key: entry.path }, renderDir(entry.path, depth + 1)));
+						else rows.push(el("div", {
+							key: entry.path, className: "cs-node cs-file" + (entry.path === selected ? " cs-sel" : ""),
+							style: { paddingLeft: 8 + (depth + 1) * 13 },
+							onClick: () => onOpen(entry.path)
+						},
+							el("span", { className: "cs-caret" }, ""),
+							el("span", { className: "cs-ico" }, "•"),
+							el("span", { className: "cs-nm" }, entry.name),
+							changed.has(entry.path) ? el("span", { className: "cs-badge" }, "●") : null
+						));
+					}
+				}
+				return rows;
+			};
+			return el("div", { className: "cs-tree" }, renderDir(root, 0));
+		}
+
+		// ============================ editor (syntax highlighted overlay) ============================
+		function Editor({ file, onEdit, onSave, onDiff }) {
+			const gutterRef = React.useRef(null);
+			const hlRef = React.useRef(null);
+			const taRef = React.useRef(null);
+			const sync = (e) => {
+				const el2 = e ? e.currentTarget : taRef.current;
+				if (gutterRef.current) gutterRef.current.scrollTop = el2.scrollTop;
+				if (hlRef.current) hlRef.current.scrollTop = el2.scrollTop;
+			};
+			React.useEffect(() => { sync(null); }, [file.content]);
+			const lineCount = file.content == null ? 1 : file.content.split("\n").length;
+			const gutter = [];
+			for (let i = 1; i <= lineCount; i++) gutter.push(el("div", { className: "cs-gn", key: i }, String(i)));
+			const stats = file.baseline != null && file.content != null ? fileStats(file.baseline, file.content) : null;
+			const lines = (file.content ?? "").split("\n").map((line, i) =>
+				el("div", { key: i, style: { minHeight: "1.55em" } }, el(Highlighted, { text: line, path: file.path }))
+			);
+			return el("div", { className: "cs-editor" },
+				el("div", { className: "cs-filebar" },
+					el("span", { className: "cs-fp" }, file.path),
+					stats && (stats.adds > 0 || stats.dels > 0) ? el("span", null,
+						el("b", { style: { color: "var(--dsw-alias-state-success-primary)" } }, "+" + stats.adds),
+						"  ",
+						el("b", { style: { color: "var(--dsw-alias-state-error-primary)" } }, "−" + stats.dels)
+					) : null,
+					el("button", { className: "cs-btn", onClick: onDiff, title: "查看该文件的 Diff" }, "Diff"),
+					el("button", { className: "cs-btn cs-pri", onClick: onSave, disabled: !file.dirty || file.content == null }, "保存")
+				),
+				el("div", { className: "cs-edit-wrap" },
+					el("div", { className: "cs-edit-g", ref: gutterRef }, gutter),
+					el("div", { className: "cs-edit-overlay" },
+						el("pre", { className: "cs-hl", ref: hlRef, "aria-hidden": "true" }, lines),
+						el("textarea", {
+							ref: taRef, className: "cs-ta",
+							value: file.content ?? "",
+							onChange: (e) => onEdit(e.target.value),
+							onScroll: sync,
+							spellCheck: false,
+							autoCapitalize: "off",
+							autoCorrect: "off",
+							placeholder: ""
+						})
+					)
+				)
+			);
+		}
+
+		// ============================ panel ============================
+		function CodeStudioPanel() {
+			const [open, setOpen] = React.useState(panel.open);
+			const [tab, setTab] = React.useState("changes");
+			const [changes, setChanges] = React.useState([]);
+			const [expandedPath, setExpandedPath] = React.useState(null);
+			const [root, setRoot] = React.useState(null);
+			const [editor, setEditor] = React.useState(null);
+			const [conn, setConn] = React.useState("connecting");
+			const [connText, setConnText] = React.useState("连接中…");
+			const [width, setWidth] = React.useState(() => {
+				try {
+					const saved = Number(globalThis.localStorage?.getItem("cs.panelWidth"));
+					if (saved >= 280 && saved <= 900) return saved;
+				} catch { /* ignore */ }
+				return 400;
+			});
+			const dragRef = React.useRef(null);
+			const changedSet = React.useMemo(() => new Set(changes.map((c) => c.path)), [changes]);
+
+			React.useEffect(() => subscribePanel(setOpen), []);
+			React.useEffect(() => {
+				const tagId = "@windypro-rourou/dsh-code-studio/styles";
+				if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId + "\"]") === null) {
+					const tag = document.createElement("style");
+					tag.dataset.plugin = "@windypro-rourou/dsh-code-studio";
+					tag.dataset.pluginCss = tagId;
+					tag.textContent = CSS;
+					document.head.appendChild(tag);
+				}
+			}, []);
+			React.useEffect(() => {
+				getRoot().then((d) => setRoot(d.root)).catch((e) => { setConn("err"); setConnText(String(e.message)); });
+			}, []);
+
+			// SSE change feed + auto-appear
+			React.useEffect(() => {
+				let source;
+				const openSse = () => {
+					source = new EventSource(API + "/events");
+					source.onopen = () => { setConn("ok"); setConnText("已连接"); };
+					source.onerror = () => { setConn("err"); setConnText("事件流断开，重连中…"); };
+					source.onmessage = (msg) => {
+						try {
+							const ev = JSON.parse(msg.data);
+							if (!ev || typeof ev.path !== "string") return;
+							setConn("ok"); setConnText("已连接");
+							const name = ev.path.split(/[\\/]/).pop() || ev.path;
+							setChanges((prev) => {
+								const next = prev.filter((c) => c.path !== ev.path);
+								next.unshift({ path: ev.path, name, before: ev.before, after: ev.after, deleted: !!ev.deleted, ts: ev.ts });
+								return next.slice(0, 50);
+							});
+							setPanelOpen(true);
+							setExpandedPath(ev.path);
+						} catch { /* ignore */ }
+					};
+				};
+				openSse();
+				return () => { if (source) source.close(); };
+			}, []);
+
+			// Ctrl+S / Ctrl+D
+			React.useEffect(() => {
+				const onKey = (e) => {
+					if (!editor) return;
+					if ((e.ctrlKey || e.metaKey) && e.key === "s") { e.preventDefault(); void saveCurrent(); }
+					if ((e.ctrlKey || e.metaKey) && e.key === "d") { e.preventDefault(); viewDiff(editor.path); }
+				};
+				window.addEventListener("keydown", onKey);
+				return () => window.removeEventListener("keydown", onKey);
+			});
+
+			const openFile = (path) => {
+				setEditor({ path, content: null, baseline: null, dirty: false, loading: true });
+				setTab("files");
+				readFile(path).then((data) => {
+					setEditor((prev) => prev && prev.path === path ? { path, content: data.content, baseline: data.content, dirty: false, loading: false } : prev);
+				}).catch((e) => {
+					setEditor((prev) => prev && prev.path === path ? { path, content: null, baseline: null, dirty: false, loading: false, error: String(e.message) } : prev);
+				});
+			};
+			const editContent = (content) => setEditor((prev) => prev ? { ...prev, content, dirty: true } : prev);
+			const saveCurrent = async () => {
+				if (!editor || editor.content == null) return;
+				setConn("busy"); setConnText("保存中…");
+				try {
+					await writeFile(editor.path, editor.content);
+					setEditor((prev) => prev ? { ...prev, baseline: prev.content, dirty: false } : prev);
+					setConn("ok"); setConnText("已保存 " + new Date().toLocaleTimeString());
+				} catch (e) {
+					setConn("err"); setConnText("保存失败: " + e.message);
+				}
+			};
+			const viewDiff = (path) => {
+				setTab("changes");
+				setExpandedPath(path);
+				historyApi(path).then((data) => {
+					const last = data.events && data.events.length > 0 ? data.events[data.events.length - 1] : null;
+					if (!last) return;
+					const name = path.split(/[\\/]/).pop() || path;
+					setChanges((prev) => {
+						if (prev.some((c) => c.path === path)) return prev;
+						return [{ path, name, before: last.before, after: last.after, deleted: !!last.deleted, ts: last.ts }, ...prev];
+					});
+				}).catch(() => {});
+			};
+			const clearChanges = () => setChanges([]);
+
+			// drag to resize
+			const onResizeDown = (e) => {
+				dragRef.current = { x: e.clientX, w: width };
+				e.currentTarget.setPointerCapture(e.pointerId);
+				e.currentTarget.classList.add("cs-drag");
+			};
+			const onResizeMove = (e) => {
+				if (!dragRef.current) return;
+				const next = Math.min(900, Math.max(280, dragRef.current.w + (dragRef.current.x - e.clientX)));
+				setWidth(next);
+			};
+			const onResizeUp = (e) => {
+				if (!dragRef.current) return;
+				dragRef.current = null;
+				e.currentTarget.classList.remove("cs-drag");
+				try { globalThis.localStorage?.setItem("cs.panelWidth", String(width)); } catch { /* ignore */ }
+			};
+
+			if (!open) {
+				if (changes.length > 0) {
+					return el("div", { className: "cs-badge-f", onClick: () => setPanelOpen(true) },
+						el("span", { className: "cs-bd" }),
+						el("span", null, changes.length + " 个文件已变更"),
+						el("span", { style: { color: "var(--dsw-alias-label-tertiary)", fontSize: 11 } }, "查看 →")
+					);
+				}
+				return null;
+			}
+
+			return el("div", { className: "cs-root", style: { width } },
+				el("div", {
+					className: "cs-resize", onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp,
+					title: "拖拽调整宽度"
+				}),
+				el("div", { className: "cs-head" },
+					el("span", { className: "cs-title" },
+						el("span", { className: "cs-dot" }),
+						"Code Studio"
+					),
+					el("span", { className: "cs-count" }, changes.length > 0 ? changes.length + " 变更" : "就绪"),
+					el("button", { className: "cs-close", onClick: () => setPanelOpen(false), title: "关闭" }, "✕")
+				),
+				el("div", { className: "cs-tabs" },
+					el("div", { className: "cs-tab" + (tab === "changes" ? " cs-on" : ""), onClick: () => setTab("changes") }, "变更"),
+					el("div", { className: "cs-tab" + (tab === "files" ? " cs-on" : ""), onClick: () => setTab("files") }, "文件")
+				),
+				el("div", { className: "cs-body" },
+					tab === "changes" ? (
+						changes.length === 0
+							? el("div", { className: "cs-empty" },
+								el("div", null, "暂无文件变更"),
+								el("span", { className: "cs-hint" }, "Agent 修改文件时，这里会自动浮现逐行 Diff（+ 新增  − 删除  ~ 修改）")
+							)
+							: el("div", { className: "cs-chg-list" },
+								changes.map((c) => {
+									const stats = c.deleted ? { adds: 0, dels: 0 } : fileStats(c.before, c.after);
+									const isOpen = expandedPath === c.path;
+									return el("div", { className: "cs-chg", key: c.path },
+										el("div", { className: "cs-chg-row", onClick: () => setExpandedPath(isOpen ? null : c.path) },
+											el("span", { className: "cs-caret" }, isOpen ? "▾" : "▸"),
+											el("span", { className: "cs-chg-path" }, c.name,
+												c.deleted ? el("span", { className: "cs-bad cs-bad-del" }, "删除")
+													: c.before == null ? el("span", { className: "cs-bad cs-bad-add" }, "新建")
+													: null
+											),
+											el("span", { className: "cs-plus" }, "+" + stats.adds),
+											el("span", { className: "cs-minus" }, "−" + stats.dels)
+										),
+										isOpen ? el("div", { className: "cs-chg-body" },
+											c.deleted
+												? el("div", { className: "cs-empty" }, "文件已删除")
+												: el(DiffRows, { before: c.before, after: c.after, path: c.path })
+										) : null
+									);
+								}),
+								el("div", { style: { display: "flex", gap: 6, padding: "4px 2px" } },
+									el("button", { className: "cs-btn", onClick: clearChanges }, "清空列表")
+								)
+							)
+					) : (
+						el("div", { className: "cs-files" },
+							root ? el(FileTree, { root, selected: editor?.path, changed: changedSet, onOpen: openFile })
+								: el("div", { className: "cs-empty" }, "加载工作区…"),
+							editor ? (
+								editor.loading ? el("div", { className: "cs-empty" }, "加载中…")
+								: editor.error ? el("div", { className: "cs-empty" }, editor.error)
+								: el(Editor, { file: editor, onEdit: editContent, onSave: () => void saveCurrent(), onDiff: () => viewDiff(editor.path) })
+							) : el("div", { className: "cs-empty" },
+								el("div", null, "点击上方文件开始编辑"),
+								el("span", { className: "cs-hint" }, "打开文件后可编辑，Ctrl+S 保存，Ctrl+D 查看 Diff")
+							)
+						)
+					)
+				),
+				el("div", { className: "cs-status" },
+					el("span", { className: "cs-sdot cs-" + conn }),
+					el("span", null, connText),
+					el("span", { style: { marginLeft: "auto" } }, "变更 " + changes.length + " 文件"),
+					el("span", null, editor && editor.dirty ? "未保存" : "就绪")
+				)
+			);
+		}
+
+		// ============================ sidebar entry ============================
+		const ENTRY_SELECTOR = "[data-cs-entry]";
+		const ENTRY_VERSION = "4";
+		const ENTRY_ICON = "<svg viewBox=\"0 0 16 16\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 1.5h6l2.5 2.5v10.5a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z\"/><path d=\"M4 6h8M4 9h8M4 12h5\"/></svg>";
+		function sidebarRoot() {
+			const column = document.querySelector("[data-pane=\"sidebar\"], [class*=\"sidebarCol\"]");
+			if (column === null) return void 0;
+			return column.querySelector("[class*=\"logoRow\"]")?.parentElement ?? column.firstElementChild;
+		}
+		function newSessionButton(root) {
+			const nested = root.querySelector("button[class*=\"newSession\"]");
+			if (nested !== null) return nested;
+			for (const child of root.children) if (child.tagName === "BUTTON") return child;
+		}
+		function mountSidebarEntry() {
+			if (typeof document === "undefined") return () => {};
+			const existing = document.querySelector(ENTRY_SELECTOR);
+			if (existing !== null) {
+				if (existing.getAttribute("data-cs-ver") === ENTRY_VERSION) return () => {};
+				existing.remove();
+			}
+			const entry = document.createElement("button");
+			entry.type = "button";
+			entry.setAttribute("data-cs-entry", "");
+			entry.setAttribute("data-cs-ver", ENTRY_VERSION);
+			entry.setAttribute("data-dsh-plugin", "code-studio");
+			entry.setAttribute("data-dsh-part", "sidebar-entry");
+			entry.title = "Code Studio — 代码编辑与 Diff（拖拽面板左缘可调宽）";
+			entry.innerHTML = "<span>" + ENTRY_ICON + "</span><span>Code Studio</span>";
+			entry.style.cssText = "display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:transparent;border:none;color:inherit;cursor:pointer;font-size:13px;border-radius:8px;";
+			entry.addEventListener("click", () => setPanelOpen(!panel.open));
+			let root;
+			let placed = false;
+			const place = () => {
+				if (root !== void 0 && !root.isConnected) { root = void 0; placed = false; }
+				if (placed && document.body.contains(entry)) return;
+				root ??= sidebarRoot();
+				if (root === void 0) return;
+				const button = newSessionButton(root);
+				if (button === void 0) return;
+				root.insertBefore(entry, button.nextElementSibling);
+				placed = true;
+			};
+			const observer = new MutationObserver(place);
+			observer.observe(document.body, { childList: true, subtree: true });
+			place();
+			return () => { observer.disconnect(); entry.remove(); };
+		}
+
+		// ============================ apply ============================
+		let mounted = false;
+		function apply(ctx) {
+			if (mounted) return;
+			mounted = true;
+			ctx.effect(() => {
+				const disposers = [];
+				try {
+					disposers.push(mountSidebarEntry());
+				} catch (error) {
+					console.error("[code-studio] sidebar entry failed", error);
+				}
+				try {
+					const slots = ctx.get("slots");
+					if (slots !== void 0) {
+						disposers.push(slots.inject("shell.overlay", () => slots.register(
+							{ name: "shell.overlay", id: "code-studio", order: 100 },
+							CodeStudioPanel
+						)));
+					} else {
+						console.error("[code-studio] slots service unavailable");
+					}
+				} catch (error) {
+					console.error("[code-studio] overlay slot failed", error);
+				}
+				return () => {
+					for (const dispose of disposers.splice(0)) dispose();
+				};
+			}, "code-studio: browser UI");
+		}
+
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});

package/lib/index.js

@@ -0,0 +1,350 @@
+import { readFile, readdir, stat, writeFile } from "node:fs/promises";
+import { watch as fsWatch, statSync, realpathSync } from "node:fs";
+import { join, dirname, basename, resolve, isAbsolute } from "node:path";
+
+/**
+ * @local/dsh-code-studio - host half.
+ * Serves the /api/code-studio/* REST + SSE surface: file tree/read/write,
+ * a recursive workspace watcher, and per-file change history (before/after
+ * content pairs) so the browser half can render Cline-style line diffs.
+ */
+
+const name = "code-studio";
+const inject = ["webServer"];
+const PREFIX = "/api/code-studio";
+const HEARTBEAT_MS = 25000;
+const DEBOUNCE_MS = 120;
+const MAX_READ_BYTES = 512 * 1024; // protect the browser from huge files
+const HISTORY_LIMIT = 30;
+
+/* ---------- helpers ---------- */
+
+function json(res, status, body) {
+  const text = JSON.stringify(body);
+  res.writeHead(status, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" });
+  res.end(text);
+}
+
+function readBody(req, limit = 4 * 1024 * 1024) {
+  return new Promise((resolvePromise, reject) => {
+    const chunks = [];
+    let size = 0;
+    req.on("data", (chunk) => {
+      size += chunk.length;
+      if (size > limit) { reject(new Error("body-too-large")); req.destroy(); return; }
+      chunks.push(chunk);
+    });
+    req.on("end", () => {
+      try { resolvePromise(JSON.parse(Buffer.concat(chunks).toString("utf8"))); }
+      catch (error) { reject(new Error("invalid-json")); }
+    });
+    req.on("error", reject);
+  });
+}
+
+/** Loopback + same-origin tripwire; this is a localhost dev surface. */
+function isTrusted(req) {
+  const addr = req.socket?.remoteAddress ?? "";
+  if (addr !== "127.0.0.1" && addr !== "::1" && addr !== "::ffff:127.0.0.1") return false;
+  const sec = req.headers["sec-fetch-site"];
+  if (typeof sec === "string" && sec !== "same-origin" && sec !== "none") return false;
+  return true;
+}
+
+function safePath(raw) {
+  if (typeof raw !== "string" || raw === "") return void 0;
+  const path = resolve(raw);
+  return path;
+}
+
+/* ---------- watcher / history ---------- */
+
+class FileLedger {
+  constructor(root) {
+    this.root = root;
+    /** baseline cache: absolute path -> { content, mtimeMs, size } */
+    this.baseline = new Map();
+    /** change history: absolute path -> [{ ts, before, after, deleted }] */
+    this.history = new Map();
+    /** SSE subscribers */
+    this.subscribers = new Set();
+    this.debounce = new Map();
+    this.watcher = void 0;
+  }
+
+  snapshot(path) {
+    return this.baseline.get(path);
+  }
+
+  recordBaseline(path, content, mtimeMs, size) {
+    this.baseline.set(path, { content, mtimeMs, size });
+  }
+
+  async readCurrent(path) {
+    const st = await stat(path);
+    let content = null;
+    let tooLarge = false;
+    if (st.size <= MAX_READ_BYTES) {
+      content = await readFile(path, "utf8");
+    } else {
+      tooLarge = true;
+    }
+    return { content, mtimeMs: st.mtimeMs, size: st.size, tooLarge };
+  }
+
+  /** Directory names whose contents are not interesting for the change feed. */
+  static IGNORED = new Set(["node_modules", ".git", ".idea", "build", "dist", ".gradle", ".kotlin", ".cxx", "out", "target", "__pycache__", ".venv", "venv", ".gitlab", ".gitlab-ci", ".DS_Store", ".cache", ".cs-"]);
+  /** Whether a path lives under one of the ignored directories (any segment). */
+  static isNoise(path) {
+    const parts = String(path).split(/[\\/]/);
+    for (const part of parts) if (FileLedger.IGNORED.has(part)) return true;
+    return false;
+  }
+
+  /** Called when a file may have changed on disk. */
+  async handleChange(path) {
+    if (FileLedger.isNoise(path)) return;
+    let current;
+    try {
+      current = await this.readCurrent(path);
+    } catch (error) {
+      if (error.code === "ENOENT") {
+        const before = this.baseline.get(path);
+        this.baseline.delete(path);
+        this.push({ path, ts: Date.now(), before: before?.content ?? null, after: null, deleted: true });
+        this.addHistory(path, { ts: Date.now(), before: before?.content ?? null, after: null, deleted: true });
+        return;
+      }
+      return;
+    }
+    const prior = this.baseline.get(path);
+    const before = prior && !prior.tooLarge ? prior.content : null;
+    this.baseline.set(path, { ...current });
+    if (prior && prior.mtimeMs === current.mtimeMs && prior.size === current.size && prior.content === current.content) return;
+    const event = { path, ts: Date.now(), before, after: current.tooLarge ? null : current.content, deleted: false, tooLarge: current.tooLarge };
+    this.push(event);
+    this.addHistory(path, event);
+  }
+
+  addHistory(path, event) {
+    const list = this.history.get(path) ?? [];
+    list.push(event);
+    if (list.length > HISTORY_LIMIT) list.shift();
+    this.history.set(path, list);
+  }
+
+  push(event) {
+    for (const res of this.subscribers) {
+      try { res.write(`data: ${JSON.stringify(event)}\n\n`); } catch { /* ignore */ }
+    }
+  }
+
+  schedule(path) {
+    if (FileLedger.isNoise(path)) return;
+    const timer = this.debounce.get(path);
+    if (timer) clearTimeout(timer);
+    this.debounce.set(path, setTimeout(() => {
+      this.debounce.delete(path);
+      void this.handleChange(path);
+    }, DEBOUNCE_MS));
+  }
+
+  /** Cheap mtime poll of everything we know about; catches missed watch events. */
+  poll() {
+    for (const [path, prior] of this.baseline) {
+      try {
+        const st = statSync(path);
+        if (st.mtimeMs === prior.mtimeMs && st.size === prior.size) continue;
+        this.schedule(path);
+      } catch (error) {
+        if (error.code === "ENOENT") this.schedule(path);
+      }
+    }
+  }
+
+  start() {
+    try {
+      this.watcher = fsWatch(this.root, { recursive: true }, (_eventType, filename) => {
+        if (typeof filename !== "string") return;
+        this.schedule(join(this.root, filename));
+      });
+      this.watcher.on?.("error", () => { /* recursive watch may fail on some mounts; poll covers us */ });
+    } catch (error) {
+      this.watcher = void 0;
+    }
+  }
+
+  stop() {
+    for (const timer of this.debounce.values()) clearTimeout(timer);
+    this.debounce.clear();
+    if (this.watcher) { try { this.watcher.close(); } catch { /* ignore */ } }
+    for (const res of this.subscribers) { try { res.destroy(); } catch { /* ignore */ } }
+    this.subscribers.clear();
+  }
+}
+
+/* ---------- routes ---------- */
+
+function makeRoutes(ledger, root, cwd) {
+  const guard = (req, res) => {
+    if (isTrusted(req)) return true;
+    json(res, 403, { ok: false, error: "forbidden" });
+    return false;
+  };
+  const queryPath = (req) => {
+    const path = new URL(req.url ?? "/", "http://x").searchParams.get("path");
+    return safePath(path);
+  };
+  return [
+    {
+      kind: "exact",
+      path: `${PREFIX}/root`,
+      handler: (req, res) => {
+        if (req.method !== "GET") return json(res, 405, { ok: false, error: "method-not-allowed" });
+        if (!guard(req, res)) return;
+        json(res, 200, { ok: true, root, cwd, platform: process.platform });
+      }
+    },
+    {
+      kind: "exact",
+      path: `${PREFIX}/tree`,
+      handler: async (req, res) => {
+        if (req.method !== "GET") return json(res, 405, { ok: false, error: "method-not-allowed" });
+        if (!guard(req, res)) return;
+        const path = queryPath(req) ?? root;
+        let entries;
+        try {
+          const names = await readdir(path, { withFileTypes: true });
+          entries = await Promise.all(names.map(async (entry) => {
+            const full = join(path, entry.name);
+            let size = 0, mtimeMs = 0;
+            try {
+              const st = await stat(full);
+              size = st.size;
+              mtimeMs = st.mtimeMs;
+            } catch { /* broken link etc. */ }
+            return { name: entry.name, path: full, type: entry.isDirectory() ? "dir" : "file", size, mtimeMs };
+          }));
+        } catch (error) {
+          return json(res, 400, { ok: false, error: error.code === "ENOENT" ? "not-found" : String(error.message ?? error) });
+        }
+        entries.sort((a, b) => (a.type === b.type ? a.name.localeCompare(b.name) : a.type === "dir" ? -1 : 1));
+        json(res, 200, { ok: true, path, entries });
+      }
+    },
+    {
+      kind: "exact",
+      path: `${PREFIX}/read`,
+      handler: async (req, res) => {
+        if (req.method !== "GET") return json(res, 405, { ok: false, error: "method-not-allowed" });
+        if (!guard(req, res)) return;
+        const path = queryPath(req);
+        if (path === void 0) return json(res, 400, { ok: false, error: "path-required" });
+        let current;
+        try {
+          current = await ledger.readCurrent(path);
+        } catch (error) {
+          return json(res, 400, { ok: false, error: error.code === "ENOENT" ? "not-found" : String(error.message ?? error) });
+        }
+        if (current.tooLarge) return json(res, 413, { ok: false, error: "file-too-large" });
+        // First time we see this file: seed the baseline so a later agent edit
+        // produces a real before/after diff.
+        if (!ledger.snapshot(path)) ledger.recordBaseline(path, current.content, current.mtimeMs, current.size);
+        json(res, 200, { ok: true, path, content: current.content, mtimeMs: current.mtimeMs, size: current.size });
+      }
+    },
+    {
+      kind: "exact",
+      path: `${PREFIX}/write`,
+      handler: async (req, res) => {
+        if (req.method !== "POST") return json(res, 405, { ok: false, error: "method-not-allowed" });
+        if (!guard(req, res)) return;
+        let body;
+        try { body = await readBody(req); }
+        catch { return json(res, 400, { ok: false, error: "invalid-body" }); }
+        const path = safePath(body?.path);
+        if (path === void 0 || typeof body?.content !== "string") return json(res, 400, { ok: false, error: "path-and-content-required" });
+        try {
+          await writeFile(path, body.content, "utf8");
+        } catch (error) {
+          return json(res, 400, { ok: false, error: String(error.message ?? error) });
+        }
+        const st = await stat(path).catch(() => void 0);
+        const mtimeMs = st?.mtimeMs ?? Date.now();
+        const event = {
+          path,
+          ts: Date.now(),
+          before: ledger.snapshot(path)?.content ?? null,
+          after: body.content,
+          deleted: false,
+          source: "user"
+        };
+        ledger.recordBaseline(path, body.content, mtimeMs, body.content.length);
+        ledger.push(event);
+        ledger.addHistory(path, event);
+        json(res, 200, { ok: true, path, mtimeMs });
+      }
+    },
+    {
+      kind: "exact",
+      path: `${PREFIX}/history`,
+      handler: (req, res) => {
+        if (req.method !== "GET") return json(res, 405, { ok: false, error: "method-not-allowed" });
+        if (!guard(req, res)) return;
+        const path = queryPath(req);
+        json(res, 200, { ok: true, path, events: path === void 0 ? [] : (ledger.history.get(path) ?? []) });
+      }
+    },
+    {
+      kind: "exact",
+      path: `${PREFIX}/events`,
+      handler: (req, res) => {
+        if (req.method !== "GET" && req.method !== "HEAD") { res.writeHead(405); res.end(); return; }
+        if (!guard(req, res)) return;
+        res.writeHead(200, {
+          "content-type": "text/event-stream; charset=utf-8",
+          "cache-control": "no-cache",
+          connection: "keep-alive"
+        });
+        res.write(": connected\n\n");
+        ledger.subscribers.add(res);
+        const heartbeat = setInterval(() => { try { res.write(": ping\n\n"); } catch { /* ignore */ } }, HEARTBEAT_MS);
+        const close = () => {
+          clearInterval(heartbeat);
+          ledger.subscribers.delete(res);
+        };
+        req.once("close", close);
+        res.once("close", close);
+      }
+    }
+  ];
+}
+
+/* ---------- plugin ---------- */
+
+function apply(ctx, config) {
+  const root = realpathSync((config?.root && config.root !== "" ? config.root : process.env.DSH_WORKSPACE ?? process.cwd()));
+  const cwd = process.cwd();
+  const ledger = new FileLedger(root);
+  const pollIntervalMs = config?.pollIntervalMs ?? 1500;
+  ctx.effect(() => {
+    const disposers = [];
+    try {
+      for (const route of makeRoutes(ledger, root, cwd)) disposers.push(ctx.webServer.register(route));
+      ledger.start();
+      const timer = setInterval(() => ledger.poll(), pollIntervalMs);
+      timer.unref();
+      disposers.push(() => clearInterval(timer));
+    } catch (error) {
+      for (const dispose of disposers) dispose();
+      ledger.stop();
+      throw error;
+    }
+    return () => {
+      for (const dispose of disposers.splice(0)) dispose();
+      ledger.stop();
+    };
+  }, "code-studio: routes and watcher");
+}
+
+export { apply, inject, name };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@windypro-rourou/dsh-code-studio",
+  "description": "Code Studio for DSH Web GUI — a VS Code + Cline hybrid: file tree, syntax-highlighted editor, and Cline-style line-by-line diffs that auto-appear when the agent edits files.",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime"
+      ],
+      "platform": "web"
+    }
+  },
+  "keywords": [
+    "dsh-plugin",
+    "dsh",
+    "deepseek-harness",
+    "code-studio",
+    "cline",
+    "diff",
+    "editor",
+    "web-ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/windypro-rourou/dsh-code-studio.git"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "react": "^18.2.0"
+  },
+  "files": [
+    "lib/**/*.js",
+    "lib/**/*.d.ts",
+    "cordis.patch.yml",
+    "README.md",
+    "scripts"
+  ],
+  "license": "MIT"
+}

package/scripts/install.ps1

@@ -0,0 +1,36 @@
+# Install / refresh dsh-code-studio into the web profile.
+# Idempotent: safe to re-run after editing the plugin sources.
+$ErrorActionPreference = "Stop"
+$src = "F:\CycleMaster\dsh-code-studio"
+$profile = Join-Path $env:USERPROFILE ".dsh\profiles\web"
+
+Write-Host "==> Copying plugin package into profile node_modules..."
+$dest = Join-Path $profile "node_modules\@local\dsh-code-studio"
+New-Item -ItemType Directory -Force -Path (Split-Path $dest) | Out-Null
+Copy-Item -Recurse -Force $src $dest
+
+Write-Host "==> Ensuring package.json dependency..."
+$pkgPath = Join-Path $profile "package.json"
+$pkg = Get-Content $pkgPath -Raw | ConvertFrom-Json
+if (-not $pkg.dependencies."@local/dsh-code-studio") {
+  $pkg.dependencies | Add-Member -NotePropertyName "@local/dsh-code-studio" -NotePropertyValue "link:F:/CycleMaster/dsh-code-studio" -Force
+  ($pkg | ConvertTo-Json -Depth 10) | Set-Content $pkgPath -Encoding UTF8
+  Write-Host "    added dependency."
+} else {
+  Write-Host "    dependency already present."
+}
+
+Write-Host "==> Ensuring cordis.patch.yml insert row..."
+$patchPath = Join-Path $profile "cordis.patch.yml"
+$patch = Get-Content $patchPath -Raw
+if ($patch -notmatch "code-studio") {
+  $row = "- insert:" + [char]10 + "    - id: code-studio" + [char]10 + "      name: '@local/dsh-code-studio'" + [char]10
+  Add-Content $patchPath $row
+  Write-Host "    insert row added."
+} else {
+  Write-Host "    insert row already present."
+}
+
+Write-Host ""
+Write-Host "Done. The plugin activates on the next 'dsh web' start (client plugin roster is fixed at boot)."
+Write-Host "Preview now on another port:  dsh web --port 3081"