@lijian-ui/dsh-term 0.2.0 → 0.3.0

package/lib/client.js

@@ -10,6 +10,56 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let react_dom_client = require("react-dom/client");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region src/client/client-i18n.ts
+		/**
+		* 客户端 i18n 字典：dsh-term 面板的中英文翻译。
+		*
+		* 通过 ctx.locale.register('dsh-term', dicts) 注册，
+		* 组件中用 const t = ctx.locale.bind('dsh-term') 获取翻译函数。
+		*
+		* @module dsh-term/client-i18n
+		*/
+		const zh = {
+			"ui.panel.title": "终端",
+			"ui.panel.addTabTitle": "新建终端",
+			"ui.panel.collapseTitle": "收起",
+			"ui.panel.emptyHint": "点击 + 新建终端",
+			"ui.tab.closeAria": "关闭 {0}",
+			"msg.sessionExited": "[dsh-term] 进程已退出（code {0}）",
+			"msg.spawnFailed": "[dsh-term] 启动失败: {0}",
+			"ui.panel.shellTitle": "Shell",
+			"ui.shell.bash": "Bash",
+			"ui.shell.zsh": "Zsh",
+			"ui.shell.powershell": "PowerShell",
+			"ui.shell.cmd": "命令提示符",
+			"ui.shell.gitbash": "Git Bash",
+			"ui.panel.reopenTitle": "恢复终端",
+			"ui.panel.backgroundSessions": "后台终端",
+			"ui.panel.noBackground": "无后台终端",
+			"ui.panel.addToChat": "添加到对话",
+			"ui.dock.label": "终端"
+		};
+		const en = {
+			"ui.panel.title": "Terminal",
+			"ui.panel.addTabTitle": "New Terminal",
+			"ui.panel.collapseTitle": "Collapse",
+			"ui.panel.emptyHint": "Click + to create a terminal",
+			"ui.tab.closeAria": "Close {0}",
+			"msg.sessionExited": "[dsh-term] Process exited (code {0})",
+			"msg.spawnFailed": "[dsh-term] Spawn failed: {0}",
+			"ui.panel.shellTitle": "Shell",
+			"ui.shell.bash": "Bash",
+			"ui.shell.zsh": "Zsh",
+			"ui.shell.powershell": "PowerShell",
+			"ui.shell.cmd": "Command Prompt",
+			"ui.shell.gitbash": "Git Bash",
+			"ui.panel.reopenTitle": "Reopen terminal",
+			"ui.panel.backgroundSessions": "Background terminals",
+			"ui.panel.noBackground": "No background terminals",
+			"ui.panel.addToChat": "Add to chat",
+			"ui.dock.label": "Terminal"
+		};
+		//#endregion
 		//#region src/client/term/api.ts
 		async function call(path, body) {
 			const envelope = await (await fetch(path, {
@@ -41,10 +91,22 @@ window.__ModuleLoader__.load({
 					rows
 				});
 			}
-			/** Close one session. */
+			/** Close one session (kill the PTY). */
 			close(id) {
 				return call("/dsh-term/close", { id });
 			}
+			/** Detach a session (keep the PTY alive, mark as detached). */
+			detach(id) {
+				return call("/dsh-term/detach", { id });
+			}
+			/** Reattach to a detached session; returns the wire info. */
+			reattach(id) {
+				return call("/dsh-term/reattach", { id });
+			}
+			/** List available shells on the host. */
+			shells() {
+				return call("/dsh-term/shells");
+			}
 			/** Current session listing (used on reconnect). */
 			list() {
 				return call("/dsh-term/list");
@@ -7176,10 +7238,29 @@ window.__ModuleLoader__.load({
 			})()));
 		}));
 		//#endregion
-		//#region src/client/term/xterm-styles.ts
+		//#region src/client/term/chat-helper.ts
 		var import_xterm = require_xterm();
 		var import_addon_fit = require_addon_fit();
 		/**
+		* Append `text` to the current session's composer draft.
+		* Returns false when there is no active session or the conversation service
+		* is unavailable.
+		*/
+		function appendToConversationDraft(ctx, text) {
+			const sessionId = ctx.sessions.list.getSnapshot().current;
+			if (sessionId === void 0) return false;
+			const actx = ctx.sessions.scope(sessionId);
+			if (actx === void 0) return false;
+			const conversation = ctx.conversation;
+			if (conversation === void 0) return false;
+			const input = conversation.input.for(actx);
+			const draft = input.state.getSnapshot().draft;
+			input.setDraft(draft.trim() === "" ? text : `${draft}\n${text}`);
+			return true;
+		}
+		//#endregion
+		//#region src/client/term/xterm-styles.ts
+		/**
 		* Inlined xterm.js 5.3.0 core styles (MIT) — injected as a <style> tag at
 		* runtime because the client build compiles only *.module.css and the
 		* shell's css-modules pipeline rejects a raw :global block with xterm's
@@ -7362,7 +7443,7 @@ window.__ModuleLoader__.load({
 `;
 		//#endregion
 		//#region \0dsh-css:src/client/term/term.module.css.mjs
-		const css = ".WK4grq_col{border-left:1px solid var(--aion-border-base,#e5e6eb);background:var(--aion-bg-1,#f9fafb);width:100%;height:100%;font-family:var(--aion-font-sans,-apple-system, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif);flex-direction:column;display:flex;overflow:hidden}.WK4grq_title{color:var(--aion-text-primary,#1f2329);user-select:none;flex:none;padding:0 8px;font-size:12px;font-weight:600}.WK4grq_tabDivider{background:var(--aion-border-base,#e5e6eb);flex:none;width:1px;height:16px;margin:0 4px}.WK4grq_toolbar{border-bottom:1px solid var(--aion-border-base,#e5e6eb);background:var(--aion-bg-base,#fff);flex:none;align-items:center;gap:4px;height:32px;padding:0 6px;display:flex}.WK4grq_tab{height:22px;color:var(--aion-text-secondary,#454d5f);cursor:pointer;background:0 0;border:none;border-radius:5px;align-items:center;gap:6px;max-width:200px;padding:0 8px;font-size:12px;display:inline-flex}.WK4grq_tabActive{background:var(--aion-bg-2,#f2f3f5);color:var(--aion-text-primary,#000)}.WK4grq_tabClose{width:14px;height:14px;color:var(--aion-text-tertiary,#86909c);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;font-size:11px;line-height:1;display:inline-flex}.WK4grq_tabClose:hover{background:var(--aion-bg-3,#e5e6eb);color:var(--aion-text-primary,#000)}.WK4grq_addTab{width:22px;height:22px;color:var(--aion-text-secondary,#454d5f);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;font-size:14px;display:inline-flex}.WK4grq_addTab:hover{background:var(--aion-bg-2,#f2f3f5)}.WK4grq_spacer{flex:1}.WK4grq_collapse{width:22px;height:22px;color:var(--aion-text-secondary,#454d5f);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;font-size:13px;display:inline-flex}.WK4grq_collapse:hover{background:var(--aion-bg-2,#f2f3f5)}.WK4grq_stage{background:var(--aion-bg-base,#fff);flex:1;min-height:0;position:relative}.WK4grq_termWrap{padding:4px;display:none;position:absolute;inset:0}.WK4grq_termWrapActive{display:block}.WK4grq_emptyHint{color:var(--aion-text-tertiary,#86909c);justify-content:center;align-items:center;font-size:13px;display:flex;position:absolute;inset:0}";
+		const css = ".WK4grq_col{border-left:1px solid var(--aion-border-base,#e5e6eb);background:var(--aion-bg-1,#f9fafb);width:100%;height:100%;font-family:var(--aion-font-sans,-apple-system, \"Segoe UI\", \"PingFang SC\", \"Microsoft YaHei\", sans-serif);flex-direction:column;display:flex;overflow:hidden}.WK4grq_title{color:var(--aion-text-primary,#1f2329);user-select:none;flex:none;padding:0 8px;font-size:12px;font-weight:600}.WK4grq_tabDivider{background:var(--aion-border-base,#e5e6eb);flex:none;width:1px;height:16px;margin:0 4px}.WK4grq_toolbar{border-bottom:1px solid var(--aion-border-base,#e5e6eb);background:var(--aion-bg-base,#fff);flex:none;align-items:center;gap:4px;height:32px;padding:0 6px;display:flex}.WK4grq_tab{height:22px;color:var(--aion-text-secondary,#454d5f);cursor:pointer;background:0 0;border:none;border-radius:5px;align-items:center;gap:6px;max-width:200px;padding:0 8px;font-size:12px;display:inline-flex}.WK4grq_tabActive{background:var(--aion-bg-2,#f2f3f5);color:var(--aion-text-primary,#000)}.WK4grq_tabClose{width:14px;height:14px;color:var(--aion-text-tertiary,#86909c);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;font-size:11px;line-height:1;display:inline-flex}.WK4grq_tabClose:hover{background:var(--aion-bg-3,#e5e6eb);color:var(--aion-text-primary,#000)}.WK4grq_addTab{width:22px;height:22px;color:var(--aion-text-secondary,#454d5f);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;font-size:14px;display:inline-flex}.WK4grq_addTab:hover{background:var(--aion-bg-2,#f2f3f5)}.WK4grq_spacer{flex:1}.WK4grq_collapse{width:22px;height:22px;color:var(--aion-text-secondary,#454d5f);cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;font-size:13px;display:inline-flex}.WK4grq_collapse:hover{background:var(--aion-bg-2,#f2f3f5)}.WK4grq_stage{background:var(--aion-bg-base,#fff);flex:1;min-height:0;position:relative}.WK4grq_termWrap{padding:4px;display:none;position:absolute;inset:0}.WK4grq_termWrapActive{display:block}.WK4grq_emptyHint{color:var(--aion-text-tertiary,#86909c);justify-content:center;align-items:center;font-size:13px;display:flex;position:absolute;inset:0}.WK4grq_shellSelect{border:1px solid var(--aion-border-base,#e5e6eb);background:var(--aion-bg-base,#fff);height:22px;color:var(--aion-text-primary,#1f2329);cursor:pointer;border-radius:5px;outline:none;flex:none;padding:0 6px;font-size:12px}.WK4grq_shellSelect:hover{border-color:var(--aion-border-strong,#c9cdd4)}.WK4grq_shellSelect:focus{border-color:var(--aion-primary,#1677ff)}.WK4grq_reopenBtn{background:var(--aion-bg-2,#f2f3f5);height:22px;color:var(--aion-text-secondary,#454d5f);cursor:pointer;border:none;border-radius:5px;justify-content:center;align-items:center;gap:2px;padding:0 6px;font-size:12px;display:inline-flex}.WK4grq_reopenBtn:hover{background:var(--aion-bg-3,#e5e6eb);color:var(--aion-text-primary,#000)}.WK4grq_reopenDropdown{z-index:50;border:1px solid var(--aion-border-base,#e5e6eb);background:var(--aion-bg-base,#fff);border-radius:8px;min-width:180px;max-width:280px;padding:4px 0;position:absolute;top:32px;left:6px;box-shadow:0 4px 12px #00000014}.WK4grq_reopenHeader{color:var(--aion-text-tertiary,#86909c);user-select:none;padding:4px 10px;font-size:11px;font-weight:600}.WK4grq_reopenItem{align-items:center;gap:4px;padding:0 6px 0 4px;display:flex}.WK4grq_reopenItemBtn{height:28px;color:var(--aion-text-primary,#1f2329);cursor:pointer;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;border-radius:5px;flex:1;align-items:center;padding:0 8px;font-size:12px;display:flex;overflow:hidden}.WK4grq_reopenItemBtn:hover{background:var(--aion-bg-2,#f2f3f5)}.WK4grq_reopenItemKill{width:20px;height:20px;color:var(--aion-text-tertiary,#86909c);cursor:pointer;background:0 0;border:none;border-radius:4px;flex:none;justify-content:center;align-items:center;font-size:13px;display:inline-flex}.WK4grq_reopenItemKill:hover{background:var(--aion-bg-3,#e5e6eb);color:var(--aion-text-primary,#000)}.WK4grq_addToChatBtn{z-index:60;border:1px solid var(--aion-border-base,#e5e6eb);background:var(--aion-bg-base,#fff);height:28px;color:var(--aion-text-primary,#1f2329);cursor:pointer;white-space:nowrap;border-radius:14px;align-items:center;gap:4px;padding:0 10px;font-size:12px;font-weight:500;display:inline-flex;position:absolute;box-shadow:0 2px 8px #0000001a}.WK4grq_addToChatBtn:hover{background:var(--aion-bg-2,#f2f3f5);border-color:var(--aion-primary,#1677ff);color:var(--aion-primary,#1677ff)}";
 		const tagId = "@lijian-ui/dsh-term/term.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -7373,9 +7454,17 @@ window.__ModuleLoader__.load({
 		}
 		var term_module_css_default = {
 			"addTab": "WK4grq_addTab",
+			"addToChatBtn": "WK4grq_addToChatBtn",
 			"col": "WK4grq_col",
 			"collapse": "WK4grq_collapse",
 			"emptyHint": "WK4grq_emptyHint",
+			"reopenBtn": "WK4grq_reopenBtn",
+			"reopenDropdown": "WK4grq_reopenDropdown",
+			"reopenHeader": "WK4grq_reopenHeader",
+			"reopenItem": "WK4grq_reopenItem",
+			"reopenItemBtn": "WK4grq_reopenItemBtn",
+			"reopenItemKill": "WK4grq_reopenItemKill",
+			"shellSelect": "WK4grq_shellSelect",
 			"spacer": "WK4grq_spacer",
 			"stage": "WK4grq_stage",
 			"tab": "WK4grq_tab",
@@ -7399,10 +7488,57 @@ window.__ModuleLoader__.load({
 		* the web shell's frame, beside the file-manager panels (preview/explorer)
 		* when present. The panel itself only owns its inner content (header + stage).
 		*
-		* A-version scope: pure user terminal. No agent integration, no SSH targets
-		* yet — those are the B-version.
+		* Features: shell selector with availability detection, terminal reuse
+		* (close detaches — PTY keeps running; reopen re-attaches), 16-color ANSI
+		* palette, safe cwd fallback, selection → add to conversation.
 		* @module dsh-term/client/term/TerminalPanel
 		*/
+		/** All shell kinds in display order (used when detection fails). */
+		const FALLBACK_SHELLS = [
+			"zsh",
+			"bash",
+			"gitbash",
+			"powershell",
+			"cmd"
+		];
+		/** 16-color ANSI palette for dark backgrounds (One Dark inspired). */
+		const DARK_PALETTE = {
+			black: "#282c34",
+			red: "#e06c75",
+			green: "#98c379",
+			yellow: "#e5c07b",
+			blue: "#61afef",
+			magenta: "#c678dd",
+			cyan: "#56b6c2",
+			white: "#abb2bf",
+			brightBlack: "#5c6370",
+			brightRed: "#ef6e7e",
+			brightGreen: "#a3d978",
+			brightYellow: "#f0c674",
+			brightBlue: "#7ab8f5",
+			brightMagenta: "#d68adf",
+			brightCyan: "#6fd0dc",
+			brightWhite: "#d7dae0"
+		};
+		/** 16-color ANSI palette for light backgrounds (Nord inspired). */
+		const LIGHT_PALETTE = {
+			black: "#3b4252",
+			red: "#bf616a",
+			green: "#a3be8c",
+			yellow: "#ebcb8b",
+			blue: "#81a1c1",
+			magenta: "#b48ead",
+			cyan: "#8fbcbb",
+			white: "#4c566a",
+			brightBlack: "#4c566a",
+			brightRed: "#bf616a",
+			brightGreen: "#a3be8c",
+			brightYellow: "#ebcb8b",
+			brightBlue: "#81a1c1",
+			brightMagenta: "#b48ead",
+			brightCyan: "#8fbcbb",
+			brightWhite: "#2e3440"
+		};
 		/** Inject the xterm core styles once (idempotent). */
 		const XTERM_STYLE_ID = "dsh-term-xterm-style";
 		function adoptXtermStyles() {
@@ -7418,29 +7554,15 @@ window.__ModuleLoader__.load({
 				background: "#0e0e0e",
 				foreground: "#ced3da",
 				cursor: "#ced3da",
-				selectionBackground: "rgba(255,255,255,0.2)"
+				selectionBackground: "rgba(255,255,255,0.2)",
+				...DARK_PALETTE
 			};
 			return {
 				background: "#ffffff",
 				foreground: "#1f2329",
 				cursor: "#1f2329",
 				selectionBackground: "rgba(22,93,255,0.25)",
-				black: "#1f2329",
-				red: "#d4393b",
-				green: "#167c2e",
-				yellow: "#b58900",
-				blue: "#0a4d8c",
-				magenta: "#a020a0",
-				cyan: "#0379a6",
-				white: "#5a5f66",
-				brightBlack: "#6a6f76",
-				brightRed: "#e5585a",
-				brightGreen: "#1a9c3a",
-				brightYellow: "#d6a200",
-				brightBlue: "#1a6fcf",
-				brightMagenta: "#c040c0",
-				brightCyan: "#1aa0d6",
-				brightWhite: "#2f353b"
+				...LIGHT_PALETTE
 			};
 		}
 		/** Current workspace cwd from the session list ('' when none). */
@@ -7450,16 +7572,46 @@ window.__ModuleLoader__.load({
 			const cwd = sessionId === void 0 ? void 0 : snapshot.byId[sessionId]?.cwd;
 			return typeof cwd === "string" && cwd !== "" ? cwd : "";
 		}
-		/** The docked panel: header (title / tabs / new / collapse) + xterm stage. */
-		function TerminalPanel({ ctx, api, onClose }) {
+		/** The docked panel: header (title / shell / tabs / new / reopen / collapse) + xterm stage. */
+		function TerminalPanel({ ctx, api, onClose, t }) {
+			(0, react.useSyncExternalStore)((cb) => ctx.locale.subscribe(cb), () => ctx.locale.getSnapshot().revision);
 			const [tabs, setTabs] = (0, react.useState)([]);
 			const [active, setActive] = (0, react.useState)(null);
+			const [shells, setShells] = (0, react.useState)(null);
+			const [selectedShell, setSelectedShell] = (0, react.useState)("bash");
+			const [detachedSessions, setDetachedSessions] = (0, react.useState)([]);
+			const [showReopen, setShowReopen] = (0, react.useState)(false);
+			const [reopenLeft, setReopenLeft] = (0, react.useState)(6);
+			const [floatBtn, setFloatBtn] = (0, react.useState)(null);
 			const stageRef = (0, react.useRef)(null);
+			const panelRef = (0, react.useRef)(null);
 			const tabsRef = (0, react.useRef)(tabs);
 			tabsRef.current = tabs;
+			const floatBtnRef = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				adoptXtermStyles();
 			}, []);
+			(0, react.useEffect)(() => {
+				let cancelled = false;
+				api.shells().then((result) => {
+					if (cancelled) return;
+					const list = result.shells;
+					setShells(list);
+					if (list.length > 0) {
+						const preferred = navigator.userAgent.includes("Windows") ? "powershell" : "zsh";
+						const initial = list.some((s) => s.id === preferred) ? preferred : list[0].id;
+						setSelectedShell(initial);
+					}
+				}).catch(() => {
+					if (!cancelled) setShells(FALLBACK_SHELLS.map((id) => ({
+						id,
+						labelKey: `ui.shell.${id}`
+					})));
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, [api]);
 			(0, react.useEffect)(() => {
 				const applyTheme = () => {
 					const theme = themeOf();
@@ -7476,17 +7628,24 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				return api.subscribe((event) => {
 					if (event.kind === "output") {
-						tabsRef.current.find((t) => t.sessionId === event.id)?.term.write(event.data);
+						tabsRef.current.find((tb) => tb.sessionId === event.id)?.term.write(event.data);
 						return;
 					}
 					if (event.kind === "exit") {
-						const tab = tabsRef.current.find((t) => t.sessionId === event.id);
-						if (tab !== void 0) tab.term.write(`\r\n[dsh-term] 进程已退出（code ${event.exitCode}）\r\n`);
+						const tab = tabsRef.current.find((tb) => tb.sessionId === event.id);
+						if (tab !== void 0) tab.term.write(`\r\n${event.message ?? `\r\n[dsh-term] Process exited (code ${event.exitCode})`}\r\n`);
+						setDetachedSessions((prev) => prev.filter((s) => s.id !== event.id));
+						return;
+					}
+					if (event.kind === "detached") return;
+					if (event.kind === "reattached") {
+						setDetachedSessions((prev) => prev.filter((s) => s.id !== event.session.id));
+						return;
 					}
 				});
 			}, [api]);
 			/** Create a tab: xterm instance + host spawn, then attach output routing. */
-			const openTab = (0, react.useCallback)(async () => {
+			const openTab = (0, react.useCallback)(async (shell) => {
 				if (stageRef.current === null) return;
 				const wrap = document.createElement("div");
 				wrap.className = term_module_css_default.termWrap;
@@ -7505,18 +7664,19 @@ window.__ModuleLoader__.load({
 					fit.fit();
 				} catch {}
 				term.onData((data) => {
-					const tab = tabsRef.current.find((t) => t.term === term);
+					const tab = tabsRef.current.find((tb) => tb.term === term);
 					if (tab !== void 0) api.write(tab.sessionId, data);
 				});
 				let session;
 				try {
 					session = await api.spawn({
+						shell: shell ?? selectedShell,
 						cwd: currentCwd(ctx) || void 0,
 						cols: term.cols,
 						rows: term.rows
 					});
 				} catch (error) {
-					term.write(`\r\n[dsh-term] 启动失败: ${String(error)}\r\n`);
+					term.write(`\r\n${t("msg.spawnFailed", { 0: String(error) })}\r\n`);
 					return;
 				}
 				const tab = {
@@ -7530,15 +7690,62 @@ window.__ModuleLoader__.load({
 				setActive(session.id);
 				api.resize(session.id, term.cols, term.rows);
 				term.focus();
-			}, [api, ctx]);
+			}, [
+				api,
+				ctx,
+				selectedShell,
+				t
+			]);
+			/** Reattach to a detached session: create a fresh xterm and wire it up. */
+			const reopenTab = (0, react.useCallback)(async (sessionId) => {
+				if (stageRef.current === null) return;
+				let session;
+				try {
+					session = await api.reattach(sessionId);
+				} catch {
+					return;
+				}
+				const wrap = document.createElement("div");
+				wrap.className = term_module_css_default.termWrap;
+				stageRef.current.appendChild(wrap);
+				const term = new import_xterm.Terminal({
+					fontSize: 13,
+					fontFamily: "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace",
+					cursorBlink: true,
+					theme: themeOf(),
+					scrollback: 5e3
+				});
+				const fit = new import_addon_fit.FitAddon();
+				term.loadAddon(fit);
+				term.open(wrap);
+				try {
+					fit.fit();
+				} catch {}
+				term.onData((data) => {
+					const tab = tabsRef.current.find((tb) => tb.term === term);
+					if (tab !== void 0) api.write(tab.sessionId, data);
+				});
+				const tab = {
+					sessionId: session.id,
+					title: session.title,
+					term,
+					fit,
+					wrap
+				};
+				setTabs((prev) => [...prev, tab]);
+				setActive(session.id);
+				api.resize(session.id, term.cols, term.rows);
+				setShowReopen(false);
+				term.focus();
+			}, [api]);
 			(0, react.useEffect)(() => {
-				if (tabs.length === 0) openTab();
-			}, []);
+				if (tabs.length === 0 && shells !== null) openTab();
+			}, [shells]);
 			(0, react.useEffect)(() => {
 				const stage = stageRef.current;
 				if (stage === null) return;
 				const refit = () => {
-					const tab = tabsRef.current.find((t) => t.sessionId === active);
+					const tab = tabsRef.current.find((tb) => tb.sessionId === active);
 					if (tab === void 0) return;
 					try {
 						tab.fit.fit();
@@ -7552,7 +7759,7 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				for (const tab of tabsRef.current) tab.wrap.classList.toggle(term_module_css_default.termWrapActive, tab.sessionId === active);
 				if (active !== null) {
-					const tab = tabsRef.current.find((t) => t.sessionId === active);
+					const tab = tabsRef.current.find((tb) => tb.sessionId === active);
 					if (tab !== void 0) {
 						try {
 							tab.fit.fit();
@@ -7566,16 +7773,38 @@ window.__ModuleLoader__.load({
 				api,
 				tabs
 			]);
+			/** Close a tab: detach the PTY (keep it alive) and dispose the xterm locally. */
 			const closeTab = (sessionId) => {
-				const tab = tabsRef.current.find((t) => t.sessionId === sessionId);
+				const tab = tabsRef.current.find((tb) => tb.sessionId === sessionId);
 				if (tab !== void 0) {
-					api.close(sessionId);
+					api.detach(sessionId);
 					tab.term.dispose();
 					tab.wrap.remove();
 				}
-				const next = tabsRef.current.filter((t) => t.sessionId !== sessionId);
+				const next = tabsRef.current.filter((tb) => tb.sessionId !== sessionId);
 				setTabs(next);
 				if (active === sessionId) setActive(next[0]?.sessionId ?? null);
+				setDetachedSessions((prev) => {
+					if (prev.some((s) => s.id === sessionId)) return prev;
+					const tab2 = tabsRef.current.find((tb) => tb.sessionId === sessionId);
+					if (tab2 === void 0) return prev;
+					return [...prev, {
+						id: sessionId,
+						title: tab2.title,
+						cwd: "",
+						cols: 80,
+						rows: 24,
+						alive: true,
+						exitCode: null,
+						shell: "bash",
+						detached: true
+					}];
+				});
+			};
+			/** Kill a detached session permanently (remove from background list). */
+			const killDetached = (sessionId) => {
+				api.close(sessionId);
+				setDetachedSessions((prev) => prev.filter((s) => s.id !== sessionId));
 			};
 			(0, react.useEffect)(() => {
 				const current = tabsRef.current;
@@ -7587,57 +7816,185 @@ window.__ModuleLoader__.load({
 					}
 				};
 			}, []);
+			(0, react.useEffect)(() => {
+				const stage = stageRef.current;
+				const panel = panelRef.current;
+				if (stage === null || panel === null) return;
+				const onMouseUp = (e) => {
+					if (floatBtnRef.current !== null && floatBtnRef.current.contains(e.target)) return;
+					requestAnimationFrame(() => {
+						const sel = tabsRef.current.find((tb) => tb.sessionId === active)?.term.getSelection() ?? "";
+						if (!sel.trim()) {
+							setFloatBtn(null);
+							return;
+						}
+						const panelRect = panel.getBoundingClientRect();
+						const top = Math.max(e.clientY - panelRect.top, 44);
+						const left = Math.min(Math.max(e.clientX - panelRect.left, 70), panelRect.width - 70);
+						setFloatBtn({
+							top,
+							left,
+							content: sel
+						});
+					});
+				};
+				const onDocMouseDown = (e) => {
+					if (floatBtnRef.current !== null && floatBtnRef.current.contains(e.target)) return;
+					setFloatBtn(null);
+				};
+				stage.addEventListener("mouseup", onMouseUp);
+				document.addEventListener("mousedown", onDocMouseDown);
+				return () => {
+					stage.removeEventListener("mouseup", onMouseUp);
+					document.removeEventListener("mousedown", onDocMouseDown);
+				};
+			}, [active]);
+			(0, react.useEffect)(() => {
+				const tab = tabs.find((tb) => tb.sessionId === active);
+				if (tab === void 0) return;
+				const d = tab.term.onSelectionChange(() => {
+					if (!tab.term.hasSelection()) setFloatBtn(null);
+				});
+				return () => d.dispose();
+			}, [active, tabs]);
+			(0, react.useEffect)(() => {
+				if (!showReopen) return;
+				const onDown = (e) => {
+					const target = e.target;
+					if (target.closest(`[data-reopen-dropdown]`) !== null) return;
+					if (target.closest(`[data-reopen-btn]`) !== null) return;
+					setShowReopen(false);
+				};
+				document.addEventListener("mousedown", onDown);
+				return () => document.removeEventListener("mousedown", onDown);
+			}, [showReopen]);
+			const shellOptions = shells ?? FALLBACK_SHELLS.map((id) => ({
+				id,
+				labelKey: `ui.shell.${id}`
+			}));
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: term_module_css_default.col,
 				"data-dsh-term": "",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: term_module_css_default.toolbar,
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: term_module_css_default.title,
-							children: "终端"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: term_module_css_default.tabDivider }),
-						tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							className: `${term_module_css_default.tab}${tab.sessionId === active ? ` ${term_module_css_default.tabActive}` : ""}`,
-							onClick: () => setActive(tab.sessionId),
-							title: tab.title,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tab.title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								role: "button",
-								"aria-label": `关闭 ${tab.title}`,
-								className: term_module_css_default.tabClose,
-								onClick: (event) => {
-									event.stopPropagation();
-									closeTab(tab.sessionId);
+				ref: panelRef,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: term_module_css_default.toolbar,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: term_module_css_default.title,
+								children: t("ui.panel.title")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: term_module_css_default.tabDivider }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+								className: term_module_css_default.shellSelect,
+								value: selectedShell,
+								onChange: (e) => {
+									const next = e.target.value;
+									if (next === selectedShell) return;
+									setSelectedShell(next);
+									if (active !== null) closeTab(active);
+									openTab(next);
 								},
-								children: "×"
-							})]
-						}, tab.sessionId)),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: term_module_css_default.addTab,
-							title: "新建终端",
-							onClick: () => void openTab(),
-							children: "+"
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: term_module_css_default.spacer }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: term_module_css_default.collapse,
-							title: "收起",
-							onClick: onClose,
-							children: "—"
+								title: t("ui.panel.shellTitle"),
+								disabled: shells === null,
+								children: shellOptions.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+									value: s.id,
+									children: t(s.labelKey)
+								}, s.id))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: term_module_css_default.tabDivider }),
+							tabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: `${term_module_css_default.tab}${tab.sessionId === active ? ` ${term_module_css_default.tabActive}` : ""}`,
+								onClick: () => setActive(tab.sessionId),
+								title: tab.title,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: tab.title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									role: "button",
+									"aria-label": t("ui.tab.closeAria", { 0: tab.title }),
+									className: term_module_css_default.tabClose,
+									onClick: (event) => {
+										event.stopPropagation();
+										closeTab(tab.sessionId);
+									},
+									children: "×"
+								})]
+							}, tab.sessionId)),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: term_module_css_default.addTab,
+								title: t("ui.panel.addTabTitle"),
+								onClick: () => void openTab(),
+								children: "+"
+							}),
+							detachedSessions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								"data-reopen-btn": "",
+								className: term_module_css_default.reopenBtn,
+								title: t("ui.panel.reopenTitle"),
+								onClick: (e) => {
+									setReopenLeft(e.currentTarget.offsetLeft);
+									setShowReopen((v) => !v);
+								},
+								children: ["↻", detachedSessions.length]
+							}),
+							showReopen && detachedSessions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								"data-reopen-dropdown": "",
+								className: term_module_css_default.reopenDropdown,
+								style: { left: reopenLeft },
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: term_module_css_default.reopenHeader,
+									children: t("ui.panel.backgroundSessions")
+								}), detachedSessions.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: term_module_css_default.reopenItem,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: term_module_css_default.reopenItemBtn,
+										onClick: () => void reopenTab(s.id),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: s.title })
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: term_module_css_default.reopenItemKill,
+										title: "×",
+										onClick: () => killDetached(s.id),
+										children: "×"
+									})]
+								}, s.id))]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: term_module_css_default.spacer }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: term_module_css_default.collapse,
+								title: t("ui.panel.collapseTitle"),
+								onClick: onClose,
+								children: "—"
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: term_module_css_default.stage,
+						ref: stageRef,
+						children: tabs.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: term_module_css_default.emptyHint,
+							children: t("ui.panel.emptyHint")
 						})
-					]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: term_module_css_default.stage,
-					ref: stageRef,
-					children: tabs.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: term_module_css_default.emptyHint,
-						children: "点击 + 新建终端"
+					}),
+					floatBtn !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						ref: floatBtnRef,
+						className: term_module_css_default.addToChatBtn,
+						style: {
+							top: floatBtn.top,
+							left: floatBtn.left
+						},
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: () => {
+							appendToConversationDraft(ctx, floatBtn.content.replace(/\s+$/, ""));
+							setFloatBtn(null);
+							tabsRef.current.find((tb) => tb.sessionId === active)?.term.clearSelection();
+						},
+						title: t("ui.panel.addToChat"),
+						children: t("ui.panel.addToChat")
 					})
-				})]
+				]
 			});
 		}
 		//#endregion
@@ -7667,6 +8024,16 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/i18n-seat.ts
+		let _t = null;
+		function bindI18n(t) {
+			_t = t;
+		}
+		function getT() {
+			if (_t === null) return ((key) => key);
+			return _t;
+		}
+		//#endregion
 		//#region src/client/term/AnimatedDock.tsx
 		/**
 		* AnimatedDock — the terminal dock button rendered into the conversation
@@ -7688,6 +8055,7 @@ window.__ModuleLoader__.load({
 			terminalState: "dsh-dock:terminal-state"
 		};
 		function AnimatedDock() {
+			const t = getT();
 			const [active, setActive] = (0, react.useState)(false);
 			(0, react.useEffect)(() => {
 				const onState = (e) => setActive(Boolean(e.detail));
@@ -7696,7 +8064,7 @@ window.__ModuleLoader__.load({
 			}, []);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DockItem, {
 				active,
-				label: "终端",
+				label: t("ui.dock.label"),
 				onClick: () => window.dispatchEvent(new CustomEvent(EV$1.toggleTerminal)),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 					width: "16",
@@ -7738,8 +8106,13 @@ window.__ModuleLoader__.load({
 		* whole boot when a plugin apply throws.
 		* @module dsh-term/client
 		*/
-		/** Required services: sessions (for the workspace cwd). */
-		const inject = ["sessions"];
+		/** Required services: sessions (for the workspace cwd), conversation (for add-to-chat). */
+		const inject = [
+			"sessions",
+			"locale",
+			"slots",
+			"conversation"
+		];
 		/** Cross-plugin event names shared with the AnimatedDock header group. */
 		const EV = {
 			toggleTerminal: "dsh-dock:toggle-terminal",
@@ -7844,6 +8217,13 @@ window.__ModuleLoader__.load({
 		}
 		/** Apply the browser half. */
 		function apply(ctx) {
+			const I18N_NS = "dsh-term";
+			ctx.effect(() => ctx.locale.register(I18N_NS, {
+				zh,
+				en
+			}), "dsh-term: client dictionaries");
+			const t = ctx.locale.bind(I18N_NS);
+			bindI18n(t);
 			ctx.inject(["slots"], (scope) => {
 				scope.slots.inject("conversation.session.header.utilities", () => scope.slots.register({
 					name: "conversation.session.header.utilities",
@@ -7983,7 +8363,8 @@ window.__ModuleLoader__.load({
 					root.render((0, react.createElement)(TerminalPanel, {
 						ctx,
 						api,
-						onClose: () => setVisible(false)
+						onClose: () => setVisible(false),
+						t
 					}));
 					disposeFrame = () => {
 						keepLast.disconnect();