@linxin666/dsh-remote-web-ui 0.3.4 → 0.3.6

package/lib/types/client/FenceNotice.d.ts

@@ -1,22 +1,25 @@
-/**
- * Unpaired-desktop notice: a full-page blocking surface rendered when the remote channel
- * (see remote-channel.ts) refuses a call because this desktop browser has no
- * live paired-device cookie. Retires automatically once a gated call
- * succeeds (the channel reports pairing) or when the channel itself is
- * torn down (requirePairingForLan off / plugin disabled), so it never
- * outlives the unpaired state it describes.
- */
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots';
 /** Notice props: localized copy. */
 export interface FenceNoticeProps {
     t: TranslateNS<'remote'>;
     /** Retry after the user has opened a freshly issued computer pairing link. */
     onRetry: () => void;
+    /** Optional custom pairing acceptor for testing / dependency injection. */
+    onAccept?: (token: string) => Promise<{
+        ok: true;
+    } | {
+        ok: false;
+        code: 'invalid' | 'used' | 'forbidden';
+    }>;
 }
+/**
+ * Extract a pairing token from either a raw token string or a copied pairing link URL.
+ */
+export declare function extractPairToken(input: string): string | undefined;
 /**
  * Render the unpaired blocking page.
  * @param props - localized copy.
  * @returns the notice element.
  */
-export declare function FenceNotice({ t, onRetry }: FenceNoticeProps): import("react").JSX.Element;
+export declare function FenceNotice({ t, onRetry, onAccept }: FenceNoticeProps): import("react").JSX.Element;
 //# sourceMappingURL=FenceNotice.d.ts.map

package/lib/types/client/FenceNotice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FenceNotice.d.ts","sourceRoot":"","sources":["../../../src/client/FenceNotice.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAGnE,oCAAoC;AACpC,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IACxB,8EAA8E;IAC9E,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BAoB3D"}
+{"version":3,"file":"FenceNotice.d.ts","sourceRoot":"","sources":["../../../src/client/FenceNotice.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAInE,oCAAoC;AACpC,MAAM,WAAW,gBAAgB;IAC/B,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IACxB,8EAA8E;IAC9E,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,EAAE,EAAE,IAAI,CAAA;KAAE,GAAG;QAAE,EAAE,EAAE,KAAK,CAAC;QAAC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CAAA;KAAE,CAAC,CAAA;CAC5G;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAWlE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,QAAqB,EAAE,EAAE,gBAAgB,+BAgFlF"}

package/lib/types/client/FenceNotice.js

@@ -1,10 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Unpaired-desktop notice: a full-page blocking surface rendered when the remote channel
+ * (see remote-channel.ts) refuses a call because this desktop browser has no
+ * live paired-device cookie. Retires automatically once a gated call
+ * succeeds (the channel reports pairing) or when the channel itself is
+ * torn down (requirePairingForLan off / plugin disabled), so it never
+ * outlives the unpaired state it describes.
+ */
+import { useState } from 'react';
+import { acceptPair } from "./pair-api.js";
 import css from './remote.module.css';
+/**
+ * Extract a pairing token from either a raw token string or a copied pairing link URL.
+ */
+export function extractPairToken(input) {
+    const trimmed = input.trim();
+    if (trimmed === '')
+        return undefined;
+    try {
+        const url = new URL(trimmed);
+        const token = url.searchParams.get('pair');
+        if (token !== null && token !== '')
+            return token;
+    }
+    catch {
+        // Plain token string
+    }
+    return trimmed;
+}
 /**
  * Render the unpaired blocking page.
  * @param props - localized copy.
  * @returns the notice element.
  */
-export function FenceNotice({ t, onRetry }) {
-    return (_jsx("div", { className: css.fencePage, role: "dialog", "aria-modal": "true", "aria-labelledby": "remote-fence-title", children: _jsxs("main", { className: css.fenceCard, "data-dsh-plugin": "remote-web-ui", children: [_jsx("div", { className: css.fenceMark, "aria-hidden": "true", children: "\u00D7" }), _jsx("p", { className: css.fenceEyebrow, children: t('fence.unpaired.eyebrow') }), _jsx("h1", { id: "remote-fence-title", className: css.fenceTitle, children: t('fence.unpaired.title') }), _jsx("p", { className: css.fenceDetail, children: t('fence.unpaired.hint') }), _jsxs("ol", { className: css.fenceSteps, children: [_jsx("li", { children: t('fence.unpaired.stepDesktop') }), _jsx("li", { children: t('fence.unpaired.stepLink') }), _jsx("li", { children: t('fence.unpaired.stepOpen') })] }), _jsx("button", { className: css.fenceRetry, type: "button", onClick: onRetry, children: t('fence.unpaired.retry') }), _jsx("p", { className: css.fenceFootnote, children: t('fence.unpaired.footnote') })] }) }));
+export function FenceNotice({ t, onRetry, onAccept = acceptPair }) {
+    const [tokenInput, setTokenInput] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const [errorMsg, setErrorMsg] = useState(undefined);
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        const token = extractPairToken(tokenInput);
+        if (!token)
+            return;
+        setSubmitting(true);
+        setErrorMsg(undefined);
+        try {
+            const result = await onAccept(token);
+            if (result.ok) {
+                onRetry();
+                return;
+            }
+            if (result.code === 'invalid') {
+                setErrorMsg(t('fence.unpaired.tokenInvalid'));
+            }
+            else if (result.code === 'used') {
+                setErrorMsg(t('fence.unpaired.tokenUsed'));
+            }
+            else {
+                setErrorMsg(t('fence.unpaired.tokenFailed'));
+            }
+        }
+        catch {
+            setErrorMsg(t('fence.unpaired.tokenFailed'));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsx("div", { className: css.fencePage, role: "dialog", "aria-modal": "true", "aria-labelledby": "remote-fence-title", children: _jsxs("main", { className: css.fenceCard, "data-dsh-plugin": "remote-web-ui", children: [_jsx("div", { className: css.fenceMark, "aria-hidden": "true", children: "\u00D7" }), _jsx("p", { className: css.fenceEyebrow, children: t('fence.unpaired.eyebrow') }), _jsx("h1", { id: "remote-fence-title", className: css.fenceTitle, children: t('fence.unpaired.title') }), _jsx("p", { className: css.fenceDetail, children: t('fence.unpaired.hint') }), _jsxs("ol", { className: css.fenceSteps, children: [_jsx("li", { children: t('fence.unpaired.stepDesktop') }), _jsx("li", { children: t('fence.unpaired.stepLink') }), _jsx("li", { children: t('fence.unpaired.stepOpen') })] }), _jsxs("form", { className: css.fenceForm, onSubmit: handleSubmit, children: [_jsxs("div", { className: css.fenceInputRow, children: [_jsx("input", { type: "text", className: css.fenceInput, placeholder: t('fence.unpaired.tokenPlaceholder'), value: tokenInput, onChange: event => {
+                                        setTokenInput(event.target.value);
+                                        if (errorMsg !== undefined)
+                                            setErrorMsg(undefined);
+                                    }, disabled: submitting, "aria-label": t('fence.unpaired.tokenPlaceholder') }), _jsx("button", { className: css.fencePairButton, type: "submit", disabled: submitting || tokenInput.trim() === '', children: submitting ? t('fence.unpaired.pairing') : t('fence.unpaired.pairAction') })] }), errorMsg !== undefined && (_jsx("p", { className: css.fenceError, role: "alert", children: errorMsg }))] }), _jsx("button", { className: css.fenceRetry, type: "button", onClick: onRetry, children: t('fence.unpaired.retry') }), _jsx("p", { className: css.fenceFootnote, children: t('fence.unpaired.footnote') })] }) }));
 }

package/lib/types/client/locales.d.ts

@@ -36,6 +36,12 @@ export declare const zh: {
     'fence.unpaired.stepLink': string;
     'fence.unpaired.stepOpen': string;
     'fence.unpaired.retry': string;
+    'fence.unpaired.tokenPlaceholder': string;
+    'fence.unpaired.pairAction': string;
+    'fence.unpaired.pairing': string;
+    'fence.unpaired.tokenInvalid': string;
+    'fence.unpaired.tokenUsed': string;
+    'fence.unpaired.tokenFailed': string;
     'fence.unpaired.footnote': string;
     'posture.exposed': string;
     'posture.exposedHint': string;
@@ -178,6 +184,12 @@ export declare const en: {
     'fence.unpaired.stepLink': string;
     'fence.unpaired.stepOpen': string;
     'fence.unpaired.retry': string;
+    'fence.unpaired.tokenPlaceholder': string;
+    'fence.unpaired.pairAction': string;
+    'fence.unpaired.pairing': string;
+    'fence.unpaired.tokenInvalid': string;
+    'fence.unpaired.tokenUsed': string;
+    'fence.unpaired.tokenFailed': string;
     'fence.unpaired.footnote': string;
     'posture.exposed': string;
     'posture.exposedHint': string;

package/lib/types/client/locales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../../../src/client/locales.ts"],"names":[],"mappings":"AAAA,uEAAuE;AAEvE,mEAAmE;AACnE,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ImB,CAAA;AAElC,sCAAsC;AACtC,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,EAAE,CAAA;AAEvC,wDAAwD;AACxD,MAAM,MAAM,eAAe,GAAG,SAAS,CAAA;AAEvC,mEAAmE;AACnE,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0IsB,CAAA"}
+{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../../../src/client/locales.ts"],"names":[],"mappings":"AAAA,uEAAuE;AAEvE,mEAAmE;AACnE,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJmB,CAAA;AAElC,sCAAsC;AACtC,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,EAAE,CAAA;AAEvC,wDAAwD;AACxD,MAAM,MAAM,eAAe,GAAG,SAAS,CAAA;AAEvC,mEAAmE;AACnE,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJsB,CAAA"}

package/lib/types/client/locales.js

@@ -36,6 +36,12 @@ export const zh = {
     'fence.unpaired.stepLink': '在“设备配对”中复制电脑配对链接。',
     'fence.unpaired.stepOpen': '在当前浏览器打开该链接，完成授权后即可进入。',
     'fence.unpaired.retry': '重新检测',
+    'fence.unpaired.tokenPlaceholder': '或在此直接粘贴配对链接 / Token',
+    'fence.unpaired.pairAction': '立即配对',
+    'fence.unpaired.pairing': '配对中…',
+    'fence.unpaired.tokenInvalid': '配对链接或 Token 无效已过期',
+    'fence.unpaired.tokenUsed': '该配对链接已被使用',
+    'fence.unpaired.tokenFailed': '配对失败，请检查网络或重新获取链接',
     'fence.unpaired.footnote': '请勿使用他人提供的配对链接；管理员可随时取消此设备的授权。',
     'posture.exposed': '/api 通道对未配对设备敞开',
     'posture.exposedHint': '以下来源的请求未经配对即可访问完整桌面 API：{hosts}。请移除对应来源的 --trusted-host（配对机制已覆盖远程访问），或改为仅绑定 127.0.0.1 并使用隧道。',
@@ -176,6 +182,12 @@ export const en = {
     'fence.unpaired.stepLink': 'Copy the computer pairing link under Pair a device.',
     'fence.unpaired.stepOpen': 'Open that link in this browser. After authorization, the workspace will become available.',
     'fence.unpaired.retry': 'Check again',
+    'fence.unpaired.tokenPlaceholder': 'Or paste pairing link / token here',
+    'fence.unpaired.pairAction': 'Pair Now',
+    'fence.unpaired.pairing': 'Pairing…',
+    'fence.unpaired.tokenInvalid': 'Pairing link or token is invalid or expired',
+    'fence.unpaired.tokenUsed': 'This pairing link has already been used',
+    'fence.unpaired.tokenFailed': 'Pairing failed, please check network or issue a new link',
     'fence.unpaired.footnote': 'Do not use pairing links from people you do not trust. An administrator can revoke this device at any time.',
     'posture.exposed': 'The /api channel is open to unpaired devices',
     'posture.exposedHint': 'Requests from {hosts} reach the full desktop API without pairing. Remove --trusted-host for them (pairing already covers remote access), or bind loopback only and use the tunnel.',

package/lib/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAChD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAElD,OAAO,CAAC,MAAM,aAAa,CAAA;AAI3B,OAAO,EAA0C,KAAK,aAAa,EAAE,MAAM,cAAc,CAAA;AA6BzF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,MAAM;QACd;;;;;WAKG;QACH,UAAU,CACR,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,IAAI,EAAE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,GACrC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;KAC9B;CACF;AAED,iCAAiC;AACjC,eAAO,MAAM,IAAI,kBAAkB,CAAA;AAEnC,+DAA+D;AAC/D,eAAO,MAAM,MAAM,UAAkD,CAAA;AAErE;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,uDAAqC,CAAA;AAElF,qEAAqE;AACrE,MAAM,WAAW,MAAM;IACrB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;OAMG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,MAAM,CAY3B,CAAA;AAKF;;;;GAIG;AACH,KAAK,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,eAAe,GAAG,aAAa,CAAC,CAAC,GAAG;IAC9E,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,IAAI,CAC5C,cAAc,EACd,YAAY,GAAG,gBAAgB,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,GAAG,aAAa,CAC/F,GAAG,aAAa,CAShB;AAED,4EAA4E;AAC5E,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,MAAkB,GAAG,MAAM,CAEnE;AAiBD;;;;GAIG;AACH,eAAO,MAAM,KAAK,kBAAuD,CAAA;AAEzE,iBAAS,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAkVtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAChD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAElD,OAAO,CAAC,MAAM,aAAa,CAAA;AAI3B,OAAO,EAA0C,KAAK,aAAa,EAAE,MAAM,cAAc,CAAA;AA6BzF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,MAAM;QACd;;;;;WAKG;QACH,UAAU,CACR,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,IAAI,EAAE,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,GACrC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;KAC9B;CACF;AAED,iCAAiC;AACjC,eAAO,MAAM,IAAI,kBAAkB,CAAA;AAEnC,+DAA+D;AAC/D,eAAO,MAAM,MAAM,UAAkD,CAAA;AAErE;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,uDAAqC,CAAA;AAElF,qEAAqE;AACrE,MAAM,WAAW,MAAM;IACrB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;OAMG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,MAAM,CAY3B,CAAA;AAKF;;;;GAIG;AACH,KAAK,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,eAAe,GAAG,aAAa,CAAC,CAAC,GAAG;IAC9E,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,IAAI,CAC5C,cAAc,EACd,YAAY,GAAG,gBAAgB,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,GAAG,aAAa,CAC/F,GAAG,aAAa,CAShB;AAED,4EAA4E;AAC5E,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,MAAkB,GAAG,MAAM,CAEnE;AAiBD;;;;GAIG;AACH,eAAO,MAAM,KAAK,kBAAuD,CAAA;AAEzE,iBAAS,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAwVtD"}

package/lib/types/index.js

@@ -357,6 +357,10 @@ function applyImpl(ctx, config) {
             return false;
         return isPairedDeviceRequest(service, request);
     });
+    if (lanAddresses.length > 0) {
+        const urls = lanAddresses.map(ip => `http://${ip}:${String(ctx.webServer.port)}/m/`).join(' , ');
+        console.log(`remote-web-ui: mobile UI reachable on LAN at ${urls}`);
+    }
     const sync = () => {
         const value = resolve();
         service.config = pairingConfigOf(value);

package/lib/types/mobile/messages.d.ts

@@ -118,11 +118,19 @@ export declare function foldEvents(events: readonly WireEvent[], existing?: read
  * Incremental folder for one message stream. Live chat folds one event at a
  * time; rebuilding the five index maps by scanning every message per event
  * made that path O(n) per event (O(n * events) per turn). A folder keeps the
- * indexes alive across folds, applies each event in O(1) map operations, and
- * returns the previous snapshot identity unchanged when nothing applied, so
- * React skips the re-render entirely. Replayed events are no-ops: the maxSeq
- * watermark advanced by the first application skips them, which also makes a
- * double-invoked React state updater harmless.
+ * indexes alive across folds, applies each event in (near-)O(1) map
+ * operations, and returns the previous snapshot identity unchanged when
+ * nothing applied, so React skips the re-render entirely. Replayed events
+ * are no-ops: the maxSeq watermark advanced by the first application skips
+ * them, which also makes a double-invoked React state updater harmless.
+ *
+ * Cost contract: every fold that applies at least one event rebuilds the
+ * snapshot as one fresh O(messages) array copy (React needs the new
+ * identity), and replacement paths locate rows by an O(messages) identity
+ * scan. Both are amortized by the consumer folding bursts as ONE batch on a
+ * fixed cadence (see FOLD_FLUSH_MS in ChatView) instead of per event. An
+ * id-to-index map was measured and deliberately rejected: at realistic
+ * message counts the Map maintenance cost exceeds the identity-scan cost.
  */
 export declare class EventFolder {
     private state;

package/lib/types/mobile/messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../src/mobile/messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,WAAW,aAAa;IAC5B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,6EAA6E;IAC7E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;IAC/B,8EAA8E;IAC9E,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,sFAAsF;IACtF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE;QACf,WAAW,EAAE,MAAM,CAAA;QACnB,YAAY,EAAE,MAAM,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;IACD,sFAAsF;IACtF,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED,+EAA+E;AAC/E,MAAM,WAAW,YAAY;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,8BAA8B;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,qDAAqD;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,IAAI,CAAA;CAC1B;AAyeD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,EAAE,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,GAAG,aAAa,EAAE,CAE7G;AAED;;;;;;;;;GASG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,YAAY,CAA6B;IAEjD,gFAAgF;gBACpE,OAAO,CAAC,EAAE,SAAS,aAAa,EAAE;IAI9C,uEAAuE;IACvE,IAAI,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,GAAG,aAAa,EAAE;IAanD,kEAAkE;IAClE,IAAI,CAAC,QAAQ,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IAK9C,uEAAuE;IACvE,OAAO,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IAK9C,uEAAuE;IACvE,QAAQ,IAAI,aAAa,EAAE;CAK5B"}
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../src/mobile/messages.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,WAAW,aAAa;IAC5B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,6EAA6E;IAC7E,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;IAC/B,8EAA8E;IAC9E,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,sFAAsF;IACtF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE;QACf,WAAW,EAAE,MAAM,CAAA;QACnB,YAAY,EAAE,MAAM,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;IACD,sFAAsF;IACtF,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,gEAAgE;IAChE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED,+EAA+E;AAC/E,MAAM,WAAW,YAAY;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,8BAA8B;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,qDAAqD;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,IAAI,CAAA;CAC1B;AAyeD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,EAAE,QAAQ,CAAC,EAAE,SAAS,aAAa,EAAE,GAAG,aAAa,EAAE,CAE7G;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,YAAY,CAA6B;IAEjD,gFAAgF;gBACpE,OAAO,CAAC,EAAE,SAAS,aAAa,EAAE;IAI9C,uEAAuE;IACvE,IAAI,CAAC,MAAM,EAAE,SAAS,SAAS,EAAE,GAAG,aAAa,EAAE;IAanD,kEAAkE;IAClE,IAAI,CAAC,QAAQ,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IAK9C,uEAAuE;IACvE,OAAO,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,GAAG,IAAI;IAK9C,uEAAuE;IACvE,QAAQ,IAAI,aAAa,EAAE;CAK5B"}

package/lib/types/mobile/messages.js

@@ -490,11 +490,19 @@ export function foldEvents(events, existing) {
  * Incremental folder for one message stream. Live chat folds one event at a
  * time; rebuilding the five index maps by scanning every message per event
  * made that path O(n) per event (O(n * events) per turn). A folder keeps the
- * indexes alive across folds, applies each event in O(1) map operations, and
- * returns the previous snapshot identity unchanged when nothing applied, so
- * React skips the re-render entirely. Replayed events are no-ops: the maxSeq
- * watermark advanced by the first application skips them, which also makes a
- * double-invoked React state updater harmless.
+ * indexes alive across folds, applies each event in (near-)O(1) map
+ * operations, and returns the previous snapshot identity unchanged when
+ * nothing applied, so React skips the re-render entirely. Replayed events
+ * are no-ops: the maxSeq watermark advanced by the first application skips
+ * them, which also makes a double-invoked React state updater harmless.
+ *
+ * Cost contract: every fold that applies at least one event rebuilds the
+ * snapshot as one fresh O(messages) array copy (React needs the new
+ * identity), and replacement paths locate rows by an O(messages) identity
+ * scan. Both are amortized by the consumer folding bursts as ONE batch on a
+ * fixed cadence (see FOLD_FLUSH_MS in ChatView) instead of per event. An
+ * id-to-index map was measured and deliberately rejected: at realistic
+ * message counts the Map maintenance cost exceeds the identity-scan cost.
  */
 export class EventFolder {
     state;

package/lib/types/mobile/views/ChatView.d.ts

@@ -25,6 +25,13 @@ export interface ChatViewProps {
  * history tail re-pull closes the seam.
  */
 export declare const MAX_TAIL_BUFFER_EVENTS = 500;
+/**
+ * Cadence for folding buffered live events into the message list. Streaming
+ * chunks can arrive at a far higher rate; flushing on this cadence caps fold
+ * and re-render work per second without visible lag, and keeps working in
+ * background tabs where requestAnimationFrame is paused.
+ */
+export declare const FOLD_FLUSH_MS = 50;
 /** One switchable permission preset (the `permissions` projection shape). */
 export interface PermissionOption {
     value: string;

package/lib/types/mobile/views/ChatView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAMjE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAGrC,+BAA+B;AAC/B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAA;AAqCzC,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;CACrB;AAqCD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,aAAa,+BAoe/D;AA2GD;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAA;AA6F5C,eAAO,MAAM,eAAe,OAAO,CAAA"}
+{"version":3,"file":"ChatView.d.ts","sourceRoot":"","sources":["../../../../src/mobile/views/ChatView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAMjE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAGrC,+BAA+B;AAC/B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAA;IACpB,6EAA6E;IAC7E,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3B,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAA;AAEzC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,KAAK,CAAA;AAqC/B,6EAA6E;AAC7E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iFAAiF;AACjF,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;CACrB;AAqCD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,aAAa,+BA2gB/D;AA2GD;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAA;AA6F5C,eAAO,MAAM,eAAe,OAAO,CAAA"}

package/lib/types/mobile/views/ChatView.js

@@ -24,6 +24,13 @@ import { ThemeToggle } from "../theme-toggle.js";
  * history tail re-pull closes the seam.
  */
 export const MAX_TAIL_BUFFER_EVENTS = 500;
+/**
+ * Cadence for folding buffered live events into the message list. Streaming
+ * chunks can arrive at a far higher rate; flushing on this cadence caps fold
+ * and re-render work per second without visible lag, and keeps working in
+ * background tabs where requestAnimationFrame is paused.
+ */
+export const FOLD_FLUSH_MS = 50;
 /** localStorage key for the tool-call display toggle (persisted on the /m origin). */
 const SHOW_TOOL_CALLS_KEY = 'dsh.mobile.showToolCalls';
 /** localStorage key for the injected-system-message display toggle. */
@@ -121,6 +128,14 @@ export function ChatView({ session, mux, onBack }) {
     const liveBufferRef = useRef([]);
     /** Incremental folder for this session's stream (indexes stay hot across events). */
     const folderRef = useRef(undefined);
+    /**
+     * Live events buffered between fold flushes. Folding every single event
+     * costs one O(messages) snapshot copy per event; flushing at a fixed
+     * cadence folds each burst once while keeping streaming text fluid.
+     */
+    const foldBufferRef = useRef([]);
+    /** Timer id of the scheduled fold flush, if any. */
+    const foldFlushTimerRef = useRef(undefined);
     /** True once the live buffer hit its cap (oldest events were dropped). */
     const liveBufferOverflowRef = useRef(false);
     /** The session's permission select (absent = capability not composed). */
@@ -238,7 +253,22 @@ export function ChatView({ session, mux, onBack }) {
     useEffect(() => {
         if (mux === undefined)
             return;
-        return mux.onFrame((frame) => {
+        /** Fold every buffered live event in one batch and publish the snapshot. */
+        const flushFoldBuffer = () => {
+            if (foldFlushTimerRef.current !== undefined) {
+                clearTimeout(foldFlushTimerRef.current);
+                foldFlushTimerRef.current = undefined;
+            }
+            const events = foldBufferRef.current;
+            if (events.length === 0)
+                return;
+            foldBufferRef.current = [];
+            setMessages(previous => {
+                const folder = folderRef.current;
+                return folder === undefined ? foldEvents(events, previous) : folder.fold(events);
+            });
+        };
+        const unsubscribe = mux.onFrame((frame) => {
             if (frame.type === 'session/event') {
                 if (frame.sessionId !== session.sessionId)
                     return;
@@ -264,10 +294,17 @@ export function ChatView({ session, mux, onBack }) {
                     liveBufferRef.current.push(event);
                     return;
                 }
-                setMessages(previous => {
-                    const folder = folderRef.current;
-                    return folder === undefined ? foldEvents([event], previous) : folder.fold([event]);
-                });
+                foldBufferRef.current.push(event);
+                // Only chunk streams batch on the flush cadence; every other event
+                // (final message, turn close, user echo, update/delete) flushes the
+                // buffer synchronously so settled UI states never wait for a timer.
+                const isChunk = event.type === 'assistant/chunk' || event.type === 'message/chunk';
+                if (!isChunk) {
+                    flushFoldBuffer();
+                }
+                else if (foldFlushTimerRef.current === undefined) {
+                    foldFlushTimerRef.current = setTimeout(flushFoldBuffer, FOLD_FLUSH_MS);
+                }
                 return;
             }
             // Live projection pushes keep the permission picker current.
@@ -307,6 +344,17 @@ export function ChatView({ session, mux, onBack }) {
                 return;
             }
         });
+        return () => {
+            unsubscribe();
+            // Drop the pending flush: its events belong to the session (or
+            // component instance) being torn down, and the next session reseeds
+            // its folder from a fresh history tail.
+            if (foldFlushTimerRef.current !== undefined) {
+                clearTimeout(foldFlushTimerRef.current);
+                foldFlushTimerRef.current = undefined;
+            }
+            foldBufferRef.current = [];
+        };
     }, [mux, session.sessionId]);
     // Weak-network polling fallback: when the assistant is running, poll for
     // pending approvals/questions every 1.5 s so the phone can act even if the

package/lib/types/mobile/views/ChatView.stream.test.js

@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { act, cleanup, render, screen } from '@testing-library/react';
-import { ChatView, STREAM_RENDER_INTERVAL_MS, LONG_TEXT_LIMIT } from "./ChatView.js";
+import { ChatView, STREAM_RENDER_INTERVAL_MS, LONG_TEXT_LIMIT, FOLD_FLUSH_MS } from "./ChatView.js";
 import { renderMarkdown } from "../markdown.js";
 // The api module is fully mocked; App.tsx's history wrapper is overridden to
 // feed a fixed empty history page, its pure helpers stay real.
@@ -134,8 +134,13 @@ describe('ChatView streaming markdown throttle', () => {
             '第三段 ~~删除线~~ 和 [链接](https://example.com/a)。',
         ];
         const full = parts.join('');
-        // The first chunk mounts the pending message; the mount render parses it.
-        await act(async () => { chunk(mux, parts[0] ?? '', 6); });
+        // The first chunk mounts the pending message on the next fold flush
+        // (chunk streams fold in batches on the FOLD_FLUSH_MS cadence); the mount
+        // render parses it.
+        await act(async () => {
+            chunk(mux, parts[0] ?? '', 6);
+            vi.advanceTimersByTime(FOLD_FLUSH_MS + 5);
+        });
         const afterMount = renderMarkdownMock.mock.calls.length;
         expect(afterMount).toBeGreaterThanOrEqual(1);
         // A burst of further chunks does not re-parse per chunk: at most one

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-remote-web-ui",
   "description": "Scan-to-pair mobile and PC remote control for the dsh web GUI: QR entry beside the settings button, one-time pairing tokens, a gated /remote/api desktop channel, live device status, and revocable sessions",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"

package/src/client/FenceNotice.tsx

@@ -6,7 +6,9 @@
  * torn down (requirePairingForLan off / plugin disabled), so it never
  * outlives the unpaired state it describes.
  */
+import { useState, type FormEvent } from 'react'
 import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import { acceptPair } from './pair-api.ts'
 import css from './remote.module.css'
 
 /** Notice props: localized copy. */
@@ -14,6 +16,24 @@ export interface FenceNoticeProps {
   t: TranslateNS<'remote'>
   /** Retry after the user has opened a freshly issued computer pairing link. */
   onRetry: () => void
+  /** Optional custom pairing acceptor for testing / dependency injection. */
+  onAccept?: (token: string) => Promise<{ ok: true } | { ok: false; code: 'invalid' | 'used' | 'forbidden' }>
+}
+
+/**
+ * Extract a pairing token from either a raw token string or a copied pairing link URL.
+ */
+export function extractPairToken(input: string): string | undefined {
+  const trimmed = input.trim()
+  if (trimmed === '') return undefined
+  try {
+    const url = new URL(trimmed)
+    const token = url.searchParams.get('pair')
+    if (token !== null && token !== '') return token
+  } catch {
+    // Plain token string
+  }
+  return trimmed
 }
 
 /**
@@ -21,7 +41,39 @@ export interface FenceNoticeProps {
  * @param props - localized copy.
  * @returns the notice element.
  */
-export function FenceNotice({ t, onRetry }: FenceNoticeProps) {
+export function FenceNotice({ t, onRetry, onAccept = acceptPair }: FenceNoticeProps) {
+  const [tokenInput, setTokenInput] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined)
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const token = extractPairToken(tokenInput)
+    if (!token) return
+
+    setSubmitting(true)
+    setErrorMsg(undefined)
+
+    try {
+      const result = await onAccept(token)
+      if (result.ok) {
+        onRetry()
+        return
+      }
+      if (result.code === 'invalid') {
+        setErrorMsg(t('fence.unpaired.tokenInvalid'))
+      } else if (result.code === 'used') {
+        setErrorMsg(t('fence.unpaired.tokenUsed'))
+      } else {
+        setErrorMsg(t('fence.unpaired.tokenFailed'))
+      }
+    } catch {
+      setErrorMsg(t('fence.unpaired.tokenFailed'))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
   return (
     <div className={css.fencePage} role="dialog" aria-modal="true" aria-labelledby="remote-fence-title">
       <main className={css.fenceCard} data-dsh-plugin="remote-web-ui">
@@ -34,6 +86,34 @@ export function FenceNotice({ t, onRetry }: FenceNoticeProps) {
           <li>{t('fence.unpaired.stepLink')}</li>
           <li>{t('fence.unpaired.stepOpen')}</li>
         </ol>
+
+        <form className={css.fenceForm} onSubmit={handleSubmit}>
+          <div className={css.fenceInputRow}>
+            <input
+              type="text"
+              className={css.fenceInput}
+              placeholder={t('fence.unpaired.tokenPlaceholder')}
+              value={tokenInput}
+              onChange={event => {
+                setTokenInput(event.target.value)
+                if (errorMsg !== undefined) setErrorMsg(undefined)
+              }}
+              disabled={submitting}
+              aria-label={t('fence.unpaired.tokenPlaceholder')}
+            />
+            <button
+              className={css.fencePairButton}
+              type="submit"
+              disabled={submitting || tokenInput.trim() === ''}
+            >
+              {submitting ? t('fence.unpaired.pairing') : t('fence.unpaired.pairAction')}
+            </button>
+          </div>
+          {errorMsg !== undefined && (
+            <p className={css.fenceError} role="alert">{errorMsg}</p>
+          )}
+        </form>
+
         <button className={css.fenceRetry} type="button" onClick={onRetry}>
           {t('fence.unpaired.retry')}
         </button>

package/src/client/locales.ts

@@ -37,6 +37,12 @@ export const zh = {
   'fence.unpaired.stepLink': '在“设备配对”中复制电脑配对链接。',
   'fence.unpaired.stepOpen': '在当前浏览器打开该链接，完成授权后即可进入。',
   'fence.unpaired.retry': '重新检测',
+  'fence.unpaired.tokenPlaceholder': '或在此直接粘贴配对链接 / Token',
+  'fence.unpaired.pairAction': '立即配对',
+  'fence.unpaired.pairing': '配对中…',
+  'fence.unpaired.tokenInvalid': '配对链接或 Token 无效已过期',
+  'fence.unpaired.tokenUsed': '该配对链接已被使用',
+  'fence.unpaired.tokenFailed': '配对失败，请检查网络或重新获取链接',
   'fence.unpaired.footnote': '请勿使用他人提供的配对链接；管理员可随时取消此设备的授权。',
   'posture.exposed': '/api 通道对未配对设备敞开',
   'posture.exposedHint': '以下来源的请求未经配对即可访问完整桌面 API：{hosts}。请移除对应来源的 --trusted-host（配对机制已覆盖远程访问），或改为仅绑定 127.0.0.1 并使用隧道。',
@@ -184,6 +190,12 @@ export const en = {
   'fence.unpaired.stepLink': 'Copy the computer pairing link under Pair a device.',
   'fence.unpaired.stepOpen': 'Open that link in this browser. After authorization, the workspace will become available.',
   'fence.unpaired.retry': 'Check again',
+  'fence.unpaired.tokenPlaceholder': 'Or paste pairing link / token here',
+  'fence.unpaired.pairAction': 'Pair Now',
+  'fence.unpaired.pairing': 'Pairing…',
+  'fence.unpaired.tokenInvalid': 'Pairing link or token is invalid or expired',
+  'fence.unpaired.tokenUsed': 'This pairing link has already been used',
+  'fence.unpaired.tokenFailed': 'Pairing failed, please check network or issue a new link',
   'fence.unpaired.footnote': 'Do not use pairing links from people you do not trust. An administrator can revoke this device at any time.',
   'posture.exposed': 'The /api channel is open to unpaired devices',
   'posture.exposedHint': 'Requests from {hosts} reach the full desktop API without pairing. Remove --trusted-host for them (pairing already covers remote access), or bind loopback only and use the tunnel.',