dsh-jiuling-remote-mobile 1.0.5 → 1.0.7

package/lib/client.js

@@ -38,54 +38,102 @@ window.__ModuleLoader__.load({
 		var react = require('react');
 		var h = react.createElement;
 
+		/**
+		 * 官方 UI 原子组件（对话框、按钮、分段页签、图标）。
+		 *
+		 * ⚠️ **这是「长得像官方」的唯一正解**：官方目录选择器
+		 * （`dsh-client-ui-directory-picker-browse`）自己也是这么 `require` 的，
+		 * 该模块已在页面模块注册表里，手机与桌面两端都有。
+		 *
+		 * 自己手搓 `div` + `style` 的代价是实打实的：先前那版写死了
+		 * `background:var(--dsw-alias-bg-primary,#1b1b1f)` —— 而
+		 * **`--dsw-alias-bg-primary` 这个令牌根本不存在**（官方真实名字是
+		 * `--dsw-alias-bg-layer-1` / `bg-l1` / `bg-base`），于是整块卡片永远走
+		 * 那个深色 fallback；`--dsw-alias-border-secondary` 同样不存在。
+		 * 表现就是手机上「两大坨黑色、跟官方 UI 完全脱钩」。
+		 */
+		var primitives = require('@deepseek-ai/dsh-client-ui-primitives');
+		var Modal = primitives.Modal;
+		var Button = primitives.Button;
+		var Input = primitives.Input;
+		var SegmentedTabs = primitives.SegmentedTabs;
+		var IconFolderCloseRegular = primitives.IconFolderCloseRegular;
+		var IconChevronRightOutlineRegular = primitives.IconChevronRightOutlineRegular;
+		var IconPlusOutlineRegular = primitives.IconPlusOutlineRegular;
+
 		/** 宿主桥的路由（同源，直接相对路径）。 */
 		var ROUTE_RPC = '/api/dsh-remote/rpc';
 		var ROUTE_STREAM = '/api/dsh-remote/stream';
 
-		/** 配色取自官方设计令牌，拿不到时回退到中性值，避免与官方 UI 撞色。 */
+		/**
+		 * 对话框卡片的 className（Modal 的 `className` 收字符串、不是 style 对象）。
+		 *
+		 * 尺寸与留白**逐条照抄**官方目录选择器对 Modal 的覆盖
+		 * （`.../dsh-client-ui-directory-picker-browse/lib/client.js` 里
+		 * `dialog{...gap:0;width:min(680px,100%);height:min(500px,100dvh - 32px);padding:0}`），
+		 * 只把宽度收窄到手机合适的 560px。背景、圆角、阴影、遮罩一律由官方
+		 * Modal 自己的 CSS 提供 —— 本插件**不再声明任何颜色**。
+		 */
+		var DIALOG_CLASS = 'jlm_dialog';
+
+		/**
+		 * 布局样式：取值全部照抄官方目录选择器的同义规则，令牌全部是
+		 * **真实存在**的官方设计令牌（`--dsw-alias-border-l3`、`bg-layer-*`、
+		 * `interactive-bg-hover`、`label-*` …），不写死任何颜色值。
+		 */
 		var CSS = {
-			overlay:
-				'position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;' +
-				'background:rgba(0,0,0,.42);padding:16px;',
-			panel:
-				'width:100%;max-width:520px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;' +
-				'border-radius:14px;background:var(--dsw-alias-bg-primary,#1b1b1f);' +
-				'color:var(--dsw-alias-label-primary,#e8e8ea);' +
-				'box-shadow:0 18px 48px rgba(0,0,0,.38);' +
-				'border:1px solid var(--dsw-alias-border-secondary,rgba(255,255,255,.1));',
-			head: 'display:flex;align-items:center;gap:10px;padding:14px 16px 10px;flex:none;',
-			title: 'font-size:15px;font-weight:600;letter-spacing:.01em;flex:1;min-width:0;',
-			tabs: 'display:flex;gap:6px;padding:0 16px 10px;flex:none;',
-			tab:
-				'flex:1;height:32px;border-radius:8px;border:1px solid transparent;cursor:pointer;' +
-				'font-size:13px;background:transparent;color:var(--dsw-alias-label-secondary,#9a9aa2);',
-			tabOn:
-				'flex:1;height:32px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;' +
-				'border:1px solid var(--dsw-alias-border-secondary,rgba(255,255,255,.14));' +
-				'background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.07));' +
-				'color:var(--dsw-alias-label-primary,#e8e8ea);',
-			path:
-				'display:flex;align-items:center;gap:8px;padding:8px 16px;flex:none;font-size:12px;' +
-				'color:var(--dsw-alias-label-tertiary,#7d7d85);' +
-				'border-top:1px solid var(--dsw-alias-border-secondary,rgba(255,255,255,.08));' +
-				'border-bottom:1px solid var(--dsw-alias-border-secondary,rgba(255,255,255,.08));',
+			dialog: 'gap:0;width:min(560px,100%);height:min(560px,100dvh - 32px);padding:0;',
+			// 官方用它把 header / content / footer 抬进 Modal 卡片的 flex 流里。
+			editorScope: 'display:contents;',
+			header:
+				'display:flex;flex-direction:column;flex:none;gap:8px;' +
+				'padding:16px 14px 8px 24px;border-bottom:.5px solid var(--dsw-alias-border-l3);',
+			title:
+				'display:flex;align-items:flex-end;min-height:28px;margin:0;' +
+				'font-size:16px;font-weight:510;line-height:24px;color:var(--dsw-alias-label-primary);',
+			crumbBar: 'display:flex;align-items:center;gap:8px;min-height:24px;',
 			pathText:
-				'flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;',
-			list: 'flex:1;min-height:120px;overflow:auto;padding:6px 8px;',
+				'flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' +
+				'color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:20px;',
+			content:
+				'display:flex;flex-direction:column;flex:1 1 auto;min-height:0;' +
+				'padding:16px 16px 16px 24px;position:relative;overflow:hidden;',
+			column:
+				'display:flex;flex-direction:column;flex:1 1 auto;gap:2px;min-height:0;' +
+				'padding-right:8px;overflow-y:auto;',
 			row:
-				'display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;' +
-				'border-radius:8px;border:none;background:transparent;cursor:pointer;font-size:14px;' +
-				'color:var(--dsw-alias-label-primary,#e8e8ea);',
-			foot: 'display:flex;gap:8px;padding:12px 16px;flex:none;justify-content:flex-end;',
-			btn:
-				'height:34px;padding:0 16px;border-radius:8px;cursor:pointer;font-size:13px;' +
-				'border:1px solid var(--dsw-alias-border-secondary,rgba(255,255,255,.16));' +
-				'background:transparent;color:var(--dsw-alias-label-primary,#e8e8ea);',
-			btnPrimary:
-				'height:34px;padding:0 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;' +
-				'border:none;background:var(--dsw-alias-state-business-primary,#4d6bfe);color:#fff;',
-			note: 'padding:10px 16px;font-size:12px;color:var(--dsw-alias-label-tertiary,#7d7d85);',
-			err: 'padding:10px 16px;font-size:12px;color:var(--dsw-alias-state-error-primary,#ff6b6b);word-break:break-all;',
+				'display:flex;align-items:center;gap:4px;width:100%;height:28px;padding:4px;' +
+				'border:none;border-radius:var(--dsw-radius-sm);background:0 0;' +
+				'text-align:left;cursor:pointer;flex:0 0 auto;',
+			rowIcon: 'flex:none;color:var(--dsw-alias-label-secondary);',
+			rowName:
+				'flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' +
+				'color:var(--dsw-alias-label-primary);font-size:13px;font-weight:500;line-height:20px;',
+			rowChevron: 'flex:none;color:var(--dsw-alias-label-tertiary);',
+			status:
+				'padding:4px 120px 4px 4px;font-size:12px;line-height:18px;' +
+				'color:var(--dsw-alias-label-secondary);',
+			error:
+				'padding:4px 120px 4px 4px;font-size:12px;line-height:18px;' +
+				'color:var(--dsw-alias-state-error-primary);word-break:break-all;',
+			note:
+				'padding:8px 4px 0;font-size:12px;line-height:18px;' +
+				'color:var(--dsw-alias-label-tertiary);',
+			footerBar:
+				'display:flex;flex-wrap:wrap;flex:none;align-items:center;gap:8px;' +
+				'padding:16px 24px;border-top:.5px solid var(--dsw-alias-border-l3);',
+			footerGap: 'flex:1 1 0;',
+			footerAction: 'min-width:72px;',
+			// —— 配对条（只在「电脑」页签下显示）——
+			pairBar:
+				'display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:none;' +
+				'padding:0 0 8px;',
+			pairWho:
+				'flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' +
+				'color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px;',
+			pairInput: 'width:140px;text-transform:uppercase;letter-spacing:2px;',
+			pairMsg: 'padding:0 4px 8px;font-size:12px;line-height:18px;',
+			pairOk: 'color:var(--dsw-alias-state-success-primary);',
 		};
 
 		/**
@@ -121,9 +169,48 @@ window.__ModuleLoader__.load({
 			return out;
 		}
 
+		// ⚠️ **先把文本留一份副本再转对象**：下面那个 `<style>` 标签拼的是 CSS
+		// **文本**，而第 162 行会把 `CSS` 就地改写成对象 —— 顺序反了就会拼出
+		// `[object Object]`，卡片尺寸规则整条失效（列表被 flex 压成 0 高、只剩空白）。
+		var DIALOG_CSS_TEXT = CSS.dialog;
+
 		// 就地转成对象：下游一律写 `style: CSS.xxx`，不会再碰到字符串形式。
 		for (var styleKey in CSS) CSS[styleKey] = toStyle(CSS[styleKey]);
 
+		/**
+		 * 注入官方风格的样式表。
+		 *
+		 * ⚠️ 卡片那层（背景/圆角/阴影/遮罩）**全部由官方 Modal 自己的 CSS 提供**，
+		 * 这里只覆盖尺寸与留白 —— 与官方目录选择器覆盖
+		 * `dialog` 类的方式完全一致。所以本插件**不声明任何颜色**，
+		 * 亮色/暗色主题都随官方走，不会再出现「一大坨黑」。
+		 *
+		 * 用 `<style data-plugin-css>` 注入（官方各 client 包的标准做法），
+		 * 而不是把样式塞进 React 的 `style` prop —— Modal 只接受 `className`。
+		 */
+		var STYLE_TAG_ID = 'dsh-jiuling-remote-mobile/DirectoryTabs.css';
+		if (
+			typeof document !== 'undefined' &&
+			document.querySelector('style[data-plugin-css=' + JSON.stringify(STYLE_TAG_ID) + ']') === null
+		) {
+			var styleTag = document.createElement('style');
+			styleTag.dataset.plugin = 'dsh-jiuling-remote-mobile';
+			styleTag.dataset.pluginCss = STYLE_TAG_ID;
+			styleTag.textContent =
+				'.' +
+				DIALOG_CLASS +
+				'{' +
+				DIALOG_CSS_TEXT +
+				'}' +
+				'.' +
+				DIALOG_CLASS +
+				' [role="tablist"]{flex:none;}' +
+				'.' +
+				DIALOG_CLASS +
+				' button:hover{background:var(--dsw-alias-interactive-bg-hover);}';
+			document.head.appendChild(styleTag);
+		}
+
 		/**
 		 * 调宿主桥的一条 RPC（令牌只在引擎进程里，浏览器侧不持有）。
 		 *
@@ -203,6 +290,10 @@ window.__ModuleLoader__.load({
 			var listDirectory = props.listDirectory;
 			var createDirectory = props.createDirectory;
 			var openSession = props.openSession;
+			/** 把宿主刚建好的会话登记进本地列表（见 `settleLocal`）。 */
+			var registerLocal = props.registerLocal;
+			/** 兜底：拉一次全量会话列表（登记失败时用）。 */
+			var refreshSessions = props.refreshSessions;
 
 			var statePair = react.useState({
 				tab: 'local',
@@ -215,6 +306,22 @@ window.__ModuleLoader__.load({
 			var state = statePair[0];
 			var setState = statePair[1];
 
+			/**
+			 * 配对状态（与目录浏览无关，所以单独一个 state）。
+			 *
+			 * `endpoint === null` 表示还没查过；`paired === false` 表示
+			 * 手机现在用的还是内置的默认地址与令牌，需要用户去电脑上取一个配对码。
+			 */
+			var pairPair = react.useState({ endpoint: null, paired: false, code: '', busy: false, message: null });
+			var pairState = pairPair[0];
+			var setPairState = pairPair[1];
+
+			var patchPair = react.useCallback(function (next) {
+				setPairState(function (prev) {
+					return Object.assign({}, prev, next);
+				});
+			}, []);
+
 			var patch = react.useCallback(function (next) {
 				setState(function (prev) {
 					return Object.assign({}, prev, next);
@@ -237,12 +344,39 @@ window.__ModuleLoader__.load({
 				[open, patch],
 			);
 
+			// 打开时查一次配对状态（只查一次，失败也不打扰用户 —— 未配对
+			// 本来就是这个流程的正常起点）。
+			react.useEffect(
+				function () {
+					if (!open) return undefined;
+					bridge('pairStatus', {}).then(
+						function (result) {
+							if (!aliveRef.current) return;
+							patchPair({ endpoint: result.endpoint, paired: result.paired === true });
+						},
+						function () {
+							/* 查不到就不显示那一条，用户仍然可以输码 */
+						},
+					);
+					return undefined;
+				},
+				[open, patchPair],
+			);
+
 			// 加载当前页签、当前路径的目录列表。
 			var tab = state.tab;
 			var path = state.path;
 			react.useEffect(
 				function () {
 					if (!open) return undefined;
+					// ⚠️ **没配对就别去问电脑要目录**。未配对时 `listDesktop`
+					// 会拿着内置的默认地址打过去，那台「电脑」并不存在 ——
+					// 用户看到的是转圈 10 秒后一句「远程请求失败: HTTP 502」，
+					// 完全不知道要先去配对。这里直接给出可操作的提示。
+					if (tab === 'desktop' && pairState.paired !== true) {
+						patch({ loading: false, listing: null, error: null });
+						return undefined;
+					}
 					patch({ loading: true, error: null });
 					var load =
 						tab === 'desktop'
@@ -264,7 +398,7 @@ window.__ModuleLoader__.load({
 					);
 					return undefined;
 				},
-				[open, tab, path, listDirectory, patch],
+				[open, tab, path, listDirectory, patch, pairState.paired],
 			);
 
 			if (!open) return null;
@@ -283,24 +417,176 @@ window.__ModuleLoader__.load({
 				onPicked(loc.path);
 			};
 
-			/** 「电脑」页签：在电脑的这个目录上开一个新会话，并跳到它。 */
+			/**
+			 * 提交配对码。
+			 *
+			 * 成功后**必须重拉一次目录列表**：配对的当下 `listDesktop` 是失败的
+			 * （那时还没配对），而上面那个 effect 的依赖里有 `paired`，
+			 * 状态一变它自己就会重跑 —— 这里只需要把 `paired` 翻过来。
+			 */
+			var submitPair = function () {
+				var code = pairState.code.trim();
+				if (code === '' || pairState.busy) return;
+				patchPair({ busy: true, message: null });
+				bridge('pair', { code: code }).then(
+					function (result) {
+						if (!aliveRef.current) return;
+						patchPair({
+							busy: false,
+							paired: true,
+							endpoint: result.endpoint,
+							code: '',
+							message: { kind: 'ok', text: '配对成功，正在连接电脑…' },
+						});
+						patch({ path: null, listing: null });
+					},
+					function (reason) {
+						if (!aliveRef.current) return;
+						patchPair({
+							busy: false,
+							message: { kind: 'error', text: String((reason && reason.message) || reason) },
+						});
+					},
+				);
+			};
+
+			/**
+			 * 「电脑」页签顶部的配对条。
+			 *
+			 * 已配对时只显示「连的是哪台电脑」，不显示令牌（令牌只在引擎进程里）。
+			 * 未配对时给一个输入框 —— **手输是主路径**：手机 App 的
+			 * `onPermissionRequest` 只放行录音权限，摄像头一律拒绝，
+			 * 页面里拿不到 `getUserMedia`，扫二维码这条路走不通。
+			 */
+			var pairBar = h(
+				'div',
+				{ style: CSS.pairBar },
+				pairState.paired === true
+					? h(
+							'span',
+							{ style: CSS.pairWho, title: pairState.endpoint || '' },
+							'已配对：' + (pairState.endpoint || ''),
+						)
+					: h(
+							'span',
+							{ style: CSS.pairWho },
+							'还没配对。请在电脑的「设置 → 手机远程」里生成 6 位配对码，填在这里。',
+						),
+				pairState.paired === true
+					? null
+					: h(Input, {
+							value: pairState.code,
+							onChange: function (event) {
+								patchPair({ code: event.target.value.toUpperCase() });
+							},
+							onKeyDown: function (event) {
+								if (event.key === 'Enter') submitPair();
+							},
+							placeholder: '6 位配对码',
+							'aria-label': '配对码',
+							maxLength: 8,
+							// ⚠️ 直接给对象：`CSS` 在模块加载时已就地转成对象了
+							//（见上面那个 `for (var styleKey in CSS)`），
+							// 再套一层 `toStyle()` 会得到 `[object Object]`。
+							style: CSS.pairInput,
+						}),
+				pairState.paired === true
+					? null
+					: h(
+							Button,
+							{
+								variant: 'outline',
+								size: 'sm',
+								onClick: submitPair,
+								disabled: pairState.busy || pairState.code.trim() === '',
+							},
+							pairState.busy ? '配对中…' : '配对',
+						),
+			);
+
+			var pairMsg = pairState.message === null
+				? null
+				: h(
+						'div',
+						{
+							// 同上：`CSS` 已是对象，直接拼对象即可。
+							style: pairState.message.kind === 'ok'
+								? Object.assign({}, CSS.pairMsg, CSS.pairOk)
+								: CSS.pairMsg,
+							role: pairState.message.kind === 'ok' ? undefined : 'alert',
+						},
+						pairState.message.text,
+					);
+
+			/** 「电脑」页签：在电脑的这个目录上开一个新对话，并跳到它。 */
 			var openDesktop = function () {
 				if (loc.path === '' || state.creating) return;
 				patch({ creating: true, error: null });
 				bridge('createSession', { path: loc.path }).then(
 					function (result) {
 						if (!aliveRef.current) return;
-						patch({ creating: false });
-						onCancel();
-						if (openSession !== undefined && result && result.sessionId) {
-							openSession(result.sessionId);
-						}
+						// ⚠️ **先登记、再打开**，顺序反了就会静默失败（见 `registerLocal`）。
+						return settleLocal(result).then(function () {
+							if (!aliveRef.current) return;
+							patch({ creating: false });
+							onCancel();
+							if (openSession !== undefined && result && result.sessionId) {
+								openSession(result.sessionId);
+							}
+						});
 					},
 					function (reason) {
 						if (!aliveRef.current) return;
 						patch({ creating: false, error: String((reason && reason.message) || reason) });
 					},
-				);
+				).then(null, function (reason) {
+					if (!aliveRef.current) return;
+					patch({ creating: false, error: String((reason && reason.message) || reason) });
+				});
+			};
+
+			/**
+			 * 把刚在电脑上建好的会话**登记进本地会话列表**。
+			 *
+			 * ⚠️ **这一步不能省，而且必须在 `openSession` 之前完成。**
+			 *
+			 * `uiWorkspace.openSession(id)` 最终走
+			 * `SessionManager.resolveTarget(id)`，它有**三道**身份检查，全不过就抛
+			 * `sessions.retain: unknown session <id>`：
+			 *
+			 * 1. `sessions.has(id)` —— 已物化的客户端实例；
+			 * 2. `summaries.some(...)` —— 客户端列表快照；
+			 * 3. `addresses` —— 子 agent 地址。
+			 *
+			 * 而会话是**宿主**建的，客户端只能靠 `api-session/added` 这条**异步推送**
+			 * 知道它 —— RPC 的响应会先到。所以直接在 RPC 回执里 `openSession()`
+			 * 是**必然的竞态**：抛出的异常还被 `openSession()` 同步吞掉，界面
+			 * 只表现为「点完没反应、又回到默认工作区」，控制台一句错都没有。
+			 *
+			 * 正解是走官方 client 自己的 `sessions.create({sessionId, cwd})`：
+			 * `SessionManager.create()` 在 RPC 返回后立刻
+			 * `recordMutation({kind:'placeholder'})` 把这一行写进列表快照，
+			 * 于是 `openSession()` 当场就能解析到它。
+			 *
+			 * 幂等性是安全的：宿主侧已经建过这个 id，`createOrAdopt` 看到
+			 * `agents.get(sessionId)` 活着就直接返回它，不会重复建、也不会撞 cwd。
+			 *
+			 * `cwd` 由宿主回执带回（手机本地的工作区路径，不是电脑路径）——
+			 * 两端各自的 cwd 互不相通，只在 `sessionId` 上对齐。
+			 *
+			 * @param result - 宿主 `createSession` 的回执 `{sessionId, cwd}`。
+			 * @returns 登记完成的 Promise（失败也 resolve，交由调用方决定下一步）。
+			 */
+			var settleLocal = function (result) {
+				if (!result || typeof result.sessionId !== 'string') return Promise.resolve();
+				var local = registerLocal === undefined
+					? Promise.resolve()
+					: Promise.resolve(registerLocal(result.sessionId, result.cwd)).then(null, function () {
+							// 登记失败（例如 `session/writer-held`）：退一步拉全量列表，
+							// 宿主那一行仍然会进来，`openSession` 同样能解析。
+							return refreshSessions === undefined ? null : Promise.resolve(refreshSessions()).then(null, function () { return null; });
+						});
+				return local;
 			};
 
 			var makeFolder = function () {
@@ -327,89 +613,43 @@ window.__ModuleLoader__.load({
 						key: full,
 						type: 'button',
 						style: CSS.row,
-						onMouseEnter: function (event) {
-							event.currentTarget.style.background =
-								'var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.07))';
-						},
-						onMouseLeave: function (event) {
-							event.currentTarget.style.background = 'transparent';
-						},
 						onClick: function () {
 							patch({ path: full });
 						},
 					},
-					h('span', { style: { opacity: 0.55, flex: 'none' } }, '\u25B8'),
-					h(
-						'span',
-						{
-							style: {
-								flex: '1',
-								minWidth: 0,
-								overflow: 'hidden',
-								textOverflow: 'ellipsis',
-								whiteSpace: 'nowrap',
-							},
-						},
-						nameOf(entry),
-					),
+					// ⚠️ 图标组件只解构 `size/className/strokeWidth`，**不透传 `style`**
+					// —— 上色要靠外层 span（官方图标本来就是 currentColor 描边）。
+					h('span', { style: CSS.rowIcon }, h(IconFolderCloseRegular, { size: 16 })),
+					h('span', { style: CSS.rowName }, nameOf(entry)),
+					h('span', { style: CSS.rowChevron }, h(IconChevronRightOutlineRegular, { size: 12 })),
 				);
 			});
 
-			return h(
+			var body = h(
 				'div',
-				{
-					style: CSS.overlay,
-					onClick: function (event) {
-						if (event.target === event.currentTarget) onCancel();
-					},
-				},
+				{ style: CSS.editorScope },
+				// —— 头部：标题 + 页签 + 路径行 ——
 				h(
 					'div',
-					{ style: CSS.panel, role: 'dialog', 'aria-label': '选择工作区目录' },
-					h(
-						'div',
-						{ style: CSS.head },
-						h('div', { style: CSS.title }, '选择工作区目录'),
-						h(
-							'button',
-							{ type: 'button', 'aria-label': '关闭', style: CSS.btn, onClick: onCancel },
-							'关闭',
-						),
-					),
+					{ style: CSS.header },
+					h('h2', { style: CSS.title }, '选择工作区目录'),
+					h(SegmentedTabs, {
+						label: '目录来源',
+						value: state.tab,
+						onChange: switchTab,
+						items: [
+							{ value: 'local', label: '手机' },
+							{ value: 'desktop', label: '电脑' },
+						],
+					}),
 					h(
 						'div',
-						{ style: CSS.tabs },
+						{ style: CSS.crumbBar },
 						h(
-							'button',
+							Button,
 							{
-								type: 'button',
-								style: state.tab === 'local' ? CSS.tabOn : CSS.tab,
-								onClick: function () {
-									switchTab('local');
-								},
-							},
-							'手机',
-						),
-						h(
-							'button',
-							{
-								type: 'button',
-								style: state.tab === 'desktop' ? CSS.tabOn : CSS.tab,
-								onClick: function () {
-									switchTab('desktop');
-								},
-							},
-							'电脑',
-						),
-					),
-					h(
-						'div',
-						{ style: CSS.path },
-						h(
-							'button',
-							{
-								type: 'button',
-								style: CSS.btn,
+								variant: 'outline',
+								size: 'sm',
 								disabled: loc.parent === '',
 								onClick: function () {
 									patch({ path: loc.parent === '' ? null : loc.parent });
@@ -417,16 +657,32 @@ window.__ModuleLoader__.load({
 							},
 							'上一级',
 						),
-						h('div', { style: CSS.pathText, title: loc.path }, loc.path || '（根）'),
+						h('span', { style: CSS.pathText, title: loc.path }, loc.path || '（根）'),
 					),
-					state.error !== null ? h('div', { style: CSS.err, role: 'alert' }, state.error) : null,
+				),
+				// —— 主体：目录列表 ——
+				h(
+					'div',
+					{ style: CSS.content },
+					// 配对条只在「电脑」页签下出现 —— 「手机」页签跟配对无关。
+					state.tab === 'desktop' ? pairBar : null,
+					state.tab === 'desktop' ? pairMsg : null,
 					state.loading
-						? h('div', { style: CSS.note }, '加载中…')
+						? h('div', { style: CSS.status, role: 'status' }, '加载中…')
 						: h(
 								'div',
-								{ style: CSS.list },
-								rows.length > 0 ? rows : h('div', { style: CSS.note }, '这里没有子文件夹'),
+								{ style: CSS.column },
+								rows.length > 0
+									? rows
+									: h(
+											'div',
+											{ style: CSS.status },
+											state.tab === 'desktop' && pairState.paired !== true
+												? '配对后这里会显示电脑上的文件夹'
+												: '这里没有子文件夹',
+										),
 							),
+					state.error !== null ? h('div', { style: CSS.error, role: 'alert' }, state.error) : null,
 					state.tab === 'desktop'
 						? h(
 								'div',
@@ -434,36 +690,63 @@ window.__ModuleLoader__.load({
 								'在电脑的这个目录上开一个新对话，手机上会同步显示它的全部过程。',
 							)
 						: null,
-					h(
-						'div',
-						{ style: CSS.foot },
-						state.tab === 'local' && createDirectory !== undefined
-							? h('button', { type: 'button', style: CSS.btn, onClick: makeFolder }, '新建文件夹')
-							: null,
-						state.tab === 'local'
-							? h(
-									'button',
-									{
-										type: 'button',
-										style: CSS.btnPrimary,
-										disabled: loc.path === '' || props.busy,
-										onClick: pickLocal,
-									},
-									props.busy ? '处理中…' : '选择此文件夹',
-								)
-							: h(
-									'button',
-									{
-										type: 'button',
-										style: CSS.btnPrimary,
-										disabled: loc.path === '' || state.creating,
-										onClick: openDesktop,
-									},
-									state.creating ? '正在电脑上新建…' : '在此新建对话',
-								),
-					),
+				),
+				// —— 底部动作栏 ——
+				h(
+					'div',
+					{ style: CSS.footerBar },
+					state.tab === 'local' && createDirectory !== undefined
+						? h(
+								Button,
+								{
+									variant: 'outline',
+									icon: h(IconPlusOutlineRegular, { size: 14 }),
+									onClick: makeFolder,
+								},
+								'新建文件夹',
+							)
+						: null,
+					h('span', { style: CSS.footerGap }),
+					h(Button, { variant: 'outline', style: CSS.footerAction, onClick: onCancel }, '取消'),
+					state.tab === 'local'
+						? h(
+								Button,
+								{
+									variant: 'primary',
+									style: CSS.footerAction,
+									disabled: loc.path === '' || props.busy,
+									onClick: pickLocal,
+								},
+								props.busy ? '处理中…' : '选择此文件夹',
+							)
+						: h(
+								Button,
+								{
+									variant: 'primary',
+									style: CSS.footerAction,
+									disabled: loc.path === '' || state.creating || pairState.paired !== true,
+									onClick: openDesktop,
+								},
+								state.creating ? '正在电脑上新建…' : '在此新建对话',
+							),
 				),
 			);
+
+			// 卡片本身（背景/圆角/阴影/遮罩/关闭按钮）全部交给官方 Modal；
+			// 我们只覆盖尺寸与留白（见 DIALOG_CLASS）。`headless` 才不会
+			// 再套一层官方自带的标题栏 —— 标题由我们放进 header 里。
+			return h(
+				Modal,
+				{
+					open: open,
+					onClose: onCancel,
+					title: '选择工作区目录',
+					closeLabel: '关闭',
+					className: DIALOG_CLASS,
+					headless: true,
+				},
+				body,
+			);
 		}
 
 		//#region 电脑流式帧 → 本地 transient
@@ -642,6 +925,34 @@ window.__ModuleLoader__.load({
 				listDirectory: (path, signal) => ctx.uiWorkspace.listDirectory(path, signal),
 				createDirectory: (path, name) => ctx.uiWorkspace.createDirectory(path, name),
 				openSession: (sessionId) => ctx.uiWorkspace.openSession(sessionId),
+				/**
+				 * 把宿主刚建好的会话登记进本地列表。
+				 *
+				 * 走官方 client 的 `sessions.create({sessionId, cwd})`：
+				 * `SessionManager.create()` 在 RPC 回执后立刻
+				 * `recordMutation({kind:'placeholder'})` 把这一行写进列表快照，
+				 * 于是 `openSession()` 当场就能解析到这个 id。
+				 * **不登记就直接 `openSession()` 是竞态**，会抛
+				 * `sessions.retain: unknown session` 并被静默吞掉
+				 * （详见组件里 `settleLocal` 的注释）。
+				 *
+				 * 传 `cwd`（宿主回执里的**手机本地**路径）而不是 `workspaceId`：
+				 * 宿主侧已经把这个会话挂进工作区了，这里只需要让客户端列表
+				 * 认识它；带上 cwd 才能让列表把它分进正确的工作区分组。
+				 *
+				 * 宿主侧已建过该 id ⇒ `createOrAdopt` 看到活着的 agent 直接返回，
+				 * 不会重复建。
+				 *
+				 * @param sessionId - 会话 id。
+				 * @param cwd - 宿主回执里的本地 cwd（两端只在 id 上对齐）。
+				 */
+				registerLocal: (sessionId, cwd) => {
+					const options = { sessionId };
+					if (cwd !== undefined && cwd !== '') options.cwd = cwd;
+					return ctx.sessions.create(options);
+				},
+				/** 兜底：拉一次全量会话列表。 */
+				refreshSessions: () => ctx.sessions.refresh(),
 			});
 
 			// 负 priority：single slot 取 entries[0]，entries 按 priority 升序 ⇒ 最先渲染。

package/lib/index.js

@@ -47,8 +47,8 @@
  * @module dsh-remote-mobile
  */
 
-import { randomUUID } from 'node:crypto';
-import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { createHash, randomUUID } from 'node:crypto';
+import { mkdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs';
 import { homedir } from 'node:os';
 import { join } from 'node:path';
 
@@ -73,6 +73,37 @@ const SESSIONS_PATH = join(STATE_DIR, 'sessions.json');
 /** 默认隧道地址。 */
 const DEFAULT_ENDPOINT = 'https://dsh-remote.jiulingssh.xyz';
 
+/**
+ * 配对服务地址。
+ *
+ * 与电脑端 `dsh-jiuling-remote-desktop/lib/pair.js` 的 `PAIR_ENDPOINT`
+ * **必须逐字相同** —— 两端各写一份是因为这两个包要能独立安装，
+ * 不能互相 import（一个是 host 插件、一个是另一台机器上的 host 插件）。
+ */
+const PAIR_ENDPOINT = 'https://pair.jiulingssh.xyz';
+
+/**
+ * 保存连接配置（配对成功后写）。
+ *
+ * ⚠️ 走「临时文件 + rename」：这个文件是手机端**唯一一份**凭据，
+ * 写一半断电就得重新配对一次。
+ *
+ * @param endpoint - 电脑的隧道地址。
+ * @param token - 访问令牌。
+ * @returns 落盘后的 `{ endpoint, token }`。
+ */
+function saveConfig(endpoint, token) {
+	const record = {
+		endpoint: String(endpoint).replace(/\/+$/, ''),
+		token: String(token),
+	};
+	mkdirSync(STATE_DIR, { recursive: true });
+	const tmp = `${CONFIG_PATH}.${process.pid}.tmp`;
+	writeFileSync(tmp, JSON.stringify(record, null, 2), { mode: 0o600 });
+	renameSync(tmp, CONFIG_PATH);
+	return record;
+}
+
 /**
  * 内置访问令牌 —— **必须与 `dsh-jiuling-remote-desktop` 里的内置值逐字相同**。
  *
@@ -203,6 +234,64 @@ async function callRemote(config, method, params = {}) {
 	return payload.result;
 }
 
+/**
+ * 调配对服务器的一条接口。
+ *
+ * ⚠️ 同样走 `remoteFetch`（专用 undici 池）：配对服务器也在公网上，
+ * 用全局 `fetch` 会撞上 Android 上那个 12 秒超时的连接策略问题（见 `remoteFetch`）。
+ *
+ * @param path - 例如 `/pair/claim`。
+ * @param body - 请求体；不传就发 GET。
+ * @returns 解析后的 JSON（失败抛错，错误文案直接可读）。
+ */
+async function pairFetch(path, body) {
+	const init = body === undefined
+		? { method: 'GET' }
+		: {
+				method: 'POST',
+				headers: { 'content-type': 'application/json' },
+				body: JSON.stringify(body),
+			};
+	const res = await remoteFetch(`${PAIR_ENDPOINT}${path}`, init);
+	let payload;
+	try {
+		payload = await res.json();
+	} catch {
+		throw new Error(`配对服务器返回了非 JSON（HTTP ${res.status}）`);
+	}
+	if (!res.ok) {
+		throw new Error(payload.message ?? payload.error ?? `配对失败: HTTP ${res.status}`);
+	}
+	// ⚠️ **不能要求 `payload.ok === true`**：配对服务器 `claim_handshake()` 的
+	// 成功响应体只有 `{hostname, accessToken, subdomain}`，**没有 `ok` 字段**
+	//（失败时才是 400 + `{error, message}`）。按 `ok` 判会让每一次正常配对
+	// 都报「配对失败: HTTP 200」，而 HTTP 状态码明明是对的。
+	if (payload.ok === false) {
+		throw new Error(payload.message ?? payload.error ?? '配对失败');
+	}
+	return payload;
+}
+
+/**
+ * 用 6 位配对码领取这台电脑的连接信息。
+ *
+ * ⚠️ **配对码是一次性的**：服务器在 `claim` 成功后立刻删掉它。所以这里的顺序
+ * 必须是「先领、后写盘」—— 反过来（先写盘再领）一旦写盘失败，码已经作废，
+ * 用户得回电脑上重新生成一个。
+ *
+ * @param code - 用户输入的 6 位码（大小写、空格、连字符都由服务器容错）。
+ * @returns 落盘后的 `{ endpoint, token }`。
+ */
+async function claimPairing(code) {
+	const payload = await pairFetch('/pair/claim', { pairCode: code });
+	const endpoint = `https://${payload.hostname}`;
+	const token = payload.accessToken;
+	if (typeof endpoint !== 'string' || typeof token !== 'string' || token === '') {
+		throw new Error('配对服务器没有返回完整的连接信息');
+	}
+	return saveConfig(endpoint, token);
+}
+
 /**
  * 把一个电脑事件写进手机本地会话。
  *
@@ -558,44 +647,70 @@ export function apply(ctx) {
 }
 
 /**
- * 挑一个**手机本地**的工作区给新建的远程会话用。
+ * 把电脑路径压成一个**文件名安全**的稳定 slug。
  *
- * ## ⚠️ 为什么不能直接用 `process.cwd()`
+ * 只用于镜像目录的命名（用户看不到），所以要求是「同一个电脑路径永远得到
+ * 同一个名字，不同路径几乎不可能撞」。`createHash` 那 8 位十六进制就是防撞的：
+ * 纯字符替换会把 `C:\a-b` 与 `C:\a\b` 压成同一个名字。
  *
- * 前端把会话归到哪个工作区，是**按 cwd 路径精确匹配**的
- * （`dsh-workspace/lib/index.js:102` 的 `sessionIds` getter：
- * `record.sessionIds.filter(id => host.sessionPath(id) === record.path)`，
- * 而 `sessionPath` 是 header.cwd 的 `realpathNormalize`）。
+ * @param desktopPath - 电脑上的绝对路径（win32 语义）。
+ * @returns 形如 `c-users-xiaopan-1a2b3c4d` 的 slug。
+ */
+function desktopSlug(desktopPath) {
+	const flat = desktopPath.replace(/[^a-zA-Z0-9]+/g, '-').replace(/^-+|-+$/g, '').toLowerCase();
+	const digest = createHash('sha256').update(desktopPath).digest('hex').slice(0, 8);
+	return `${flat === '' ? 'root' : flat}-${digest}`;
+}
+
+/**
+ * 取电脑路径的末段当工作区标题。
+ *
+ * ⚠️ **不能直接用 `node:path` 的 `basename`**：手机是 posix 语义，
+ * `basename('C:\\Users\\XIAOPAN')` 会把整串原样返回（反斜杠不是分隔符），
+ * 侧边栏就会显示一长条 `C:\Users\XIAOPAN`。这里两种分隔符都切。
+ *
+ * @param desktopPath - 电脑上的绝对路径。
+ * @returns 末段；没有末段（如 `C:\`）时退回去掉尾部斜杠的原串。
+ */
+function desktopTitle(desktopPath) {
+	const trimmed = desktopPath.replace(/[/\\]+$/, '');
+	const cut = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
+	const name = cut < 0 ? trimmed : trimmed.slice(cut + 1);
+	return name === '' ? desktopPath : name;
+}
+
+/**
+ * 为电脑上的一个目录，在手机本地建（或复用）一个**同名镜像工作区**。
+ *
+ * ## 为什么要建工作区，而不是塞进「默认工作区」
  *
- * 所以 cwd 落在任何已有工作区之外时，这个会话**不属于任何工作区**：
- * 侧边栏没有它、composer 也被判成「没选工作区」而禁用 —— 界面表现是停在
- * hero 页的「选择一个工作区开始」，看着像新会话没建成功，其实会话已经建好了
- * （磁盘上有日志、两端 sessionId 一致）。
+ * 前端把会话归到哪个工作区，是**按 cwd 路径精确匹配**的
+ * （`dsh-workspace/lib/index.js:102` 的 `sessionIds` getter）。
+ * 早先的实现把远程会话的 cwd 设成手机默认工作区的路径，于是**所有**远程会话
+ * 都堆在「默认工作区」底下 —— 用户在电脑页签里选了 `C:\Users\XIAOPAN`，
+ * 侧边栏却显示「默认工作区」，看起来就像「建完又回到默认工作去了」。
  *
- * 引擎的 `process.cwd()` 是 `files/workspace`，而手机默认工作区是
- * `files/workspace/deepseek-harness/default-workspace`（**更深一层**），
- * 两者不相等，正好踩中这个坑。
+ * 正解是给每个电脑目录配一个**独立的手机本地镜像目录**，用它注册一个独立
+ * 工作区，标题取电脑目录的末段（`XIAOPAN`）。镜像目录是空的、永远不会被写入
+ * —— 真正干活的是电脑那台机器，这里只是给前端一个可以挂载的 cwd 锚点。
  *
- * ⚠️ **光把 cwd 设对还不够**：`sessionPaths` 索引只在该注册表启动
- * （`indexHeader`）时建一次，新建的会话**不在索引里** ⇒ `sessionPath(id)`
- * 返回 `undefined` ≠ `record.path`，照样被 getter 过滤掉。
- * 所以创建完必须再 `attachSession()` 一次（见 `createSession`），
- * 它会 `rememberSessionPath()` 把这条补进索引。
+ * ⚠️ cwd 依然**不能**是电脑路径：Android 是 posix 语义，
+ * `path.posix.isAbsolute('C:/Users/...') === false`，而
+ * `createOrAdopt()` 里有 `await mkdir(cwd, {recursive:true})` —— 传电脑路径
+ * 会真在手机上建出一个叫 `C:\Users\...` 的怪目录。
  *
  * @param ctx - 宿主 Cordis 上下文。
- * @returns 工作区实体；没有可用工作区时 `undefined`。
+ * @param desktopPath - 电脑上的绝对路径（仅用于取名字，不会成为 cwd）。
+ * @returns 工作区实体（含 `.id` / `.path` / `.title`）。
  */
-function localWorkspaceFor(ctx) {
-	try {
-		const registry = ctx.get?.('workspaceRegistry');
-		const all = registry?.list?.() ?? [];
-		if (all.length === 0) return undefined;
-		const preferredId = registry?.state?.defaultWorkspaceId;
-		const chosen = all.find((entity) => entity.id === preferredId) ?? all[0];
-		return typeof chosen?.path === 'string' && chosen.path !== '' ? chosen : undefined;
-	} catch {
-		return undefined;
+async function ensureDesktopWorkspace(ctx, desktopPath) {
+	const registry = ctx.get?.('workspaceRegistry');
+	if (registry === undefined || typeof registry.create !== 'function') {
+		throw new Error('workspaceRegistry 不可用，无法为电脑目录建工作区');
 	}
+	const dir = join(STATE_DIR, 'workspaces', desktopSlug(desktopPath));
+	mkdirSync(dir, { recursive: true });
+	return await registry.create(dir, desktopTitle(desktopPath));
 }
 
 /**
@@ -633,8 +748,12 @@ async function handleBridge(ctx, config, io) {
 			// ⚠️ 手机端 cwd 必须是**手机本地**的绝对路径，绝不把电脑路径传进来
 			// （Android 是 posix 语义，`path.posix.isAbsolute('C:/...') === false`，
 			// 且官方 createOrAdopt 会 `mkdir(cwd, {recursive:true})` 真去建目录）。
-			const workspace = localWorkspaceFor(ctx);
-			const cwd = workspace?.path ?? process.cwd();
+			//
+			// 这里给它一个**电脑目录专属的镜像工作区**（标题 = 电脑目录末段），
+			// 而不是手机的「默认工作区」—— 否则所有远程会话都堆在「默认工作区」
+			// 底下，看起来就像「建完又回到默认工作去了」（见 `ensureDesktopWorkspace`）。
+			const workspace = await ensureDesktopWorkspace(ctx, params.path);
+			const cwd = workspace.path;
 			// ⚠️ **必须走 `sessionController.create`，不能走 `ctx.sessions.create`。**
 			//
 			// `ctx.sessions.create()` 只把会话塞进内存 store：持久化层既没
@@ -693,9 +812,31 @@ async function handleBridge(ctx, config, io) {
 		case 'isRemote':
 			return { remote: io.remoteSessions.has(params.sessionId) };
 
+		/**
+		 * 配对：用电脑上生成的 6 位码换回这台电脑的隧道地址与令牌。
+		 *
+		 * ⚠️ **必须就地改写 `config`**（`Object.assign` 而不是重新赋值）：
+		 * `config` 是 `apply()` 里 `loadConfig()` 的产物，被闭包里的 `prompt`
+		 * 拦截、`follow`、以及本函数共享。如果这里只写盘不更新对象，
+		 * 配对的**当下**仍然拿着旧的默认地址与令牌 —— 表现是「配对提示成功、
+		 * 一发消息就 401」，而重启 App 后又好了（重启才会重新 `loadConfig`）。
+		 */
+		case 'pair': {
+			if (typeof params.code !== 'string' || params.code.trim() === '') {
+				throw new Error('请输入电脑上显示的 6 位配对码');
+			}
+			const saved = await claimPairing(params.code.trim());
+			Object.assign(config, saved);
+			return { endpoint: saved.endpoint, tokenSet: saved.token !== '' };
+		}
+
+		/** 当前连的是哪台电脑（前端用来显示状态）。 */
+		case 'pairStatus':
+			return { endpoint: config.endpoint, paired: config.token !== DEFAULT_TOKEN };
+
 		default:
 			throw new Error(`unknown method "${String(io.body?.method)}"`);
 	}
 }
 
-export { callRemote, mirrorEvent, loadConfig, DEFAULT_ENDPOINT, CONFIG_PATH };
+export { callRemote, mirrorEvent, loadConfig, DEFAULT_ENDPOINT, CONFIG_PATH, PAIR_ENDPOINT, claimPairing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-jiuling-remote-mobile",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "DSH 远程目录（手机端）：在选文件夹流程里多出「电脑」页签，进入电脑目录、在电脑上发起对话，并把电脑的实时消息流同步到手机本地界面（只传文本，不映射桌面）。",
   "type": "module",
   "main": "./lib/index.js",