@linxin666/dsh-remote-web-ui 0.3.3 → 0.3.5

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/PluginSettingsCard.tsx

@@ -39,6 +39,8 @@ export interface PluginSettingsCardProps<TKey extends string = string> {
   titleKey: TKey
   /** Locale key of the line describing what this plugin's settings govern. */
   descriptionKey: TKey
+  /** Optional rich header description rendered instead of the plain t(descriptionKey) text (the plain text stays as the tooltip). */
+  descriptionNode?: ReactNode
   /** The card's form state: availability, writability, and what a save would do. */
   state: CardShell
   /** Write every staged edit. */
@@ -87,7 +89,7 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
       <div className={css.headerStatic}>
         <span className={css.headText}>
           <span className={css.name} title={title}>{title}</span>
-          <span className={css.description} title={description}>{description}</span>
+          <span className={css.description} title={description}>{props.descriptionNode ?? description}</span>
         </span>
         {state.dirty ? <span className={css.pending} title={props.t('settings.unsaved')}>{props.t('settings.unsaved')}</span> : null}
       </div>
@@ -102,7 +104,7 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
       >
         <span className={css.headText}>
           <span className={css.name} title={title}>{title}</span>
-          <span className={css.description} title={description}>{description}</span>
+          <span className={css.description} title={description}>{props.descriptionNode ?? description}</span>
         </span>
         {state.dirty ? <span className={css.pending} title={props.t('settings.unsaved')}>{props.t('settings.unsaved')}</span> : null}
         <svg

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.',

package/src/client/remote.module.css

@@ -484,23 +484,91 @@
   margin-top: 8px;
 }
 
-.fenceRetry {
+.fenceForm {
+  margin-top: 20px;
   width: 100%;
-  margin-top: 24px;
-  padding: 11px 16px;
+}
+
+.fenceInputRow {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+
+.fenceInput {
+  flex: 1;
+  min-width: 0;
+  padding: 10px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.fenceInput:focus {
+  outline: none;
+  border-color: var(--dsw-alias-brand-primary);
+  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.15);
+}
+
+.fencePairButton {
+  flex-shrink: 0;
+  padding: 10px 18px;
   border: 1px solid var(--dsw-alias-brand-primary);
   border-radius: 10px;
   background: var(--dsw-alias-brand-primary);
   color: #fff;
   font: inherit;
+  font-size: 13px;
   font-weight: 500;
   cursor: pointer;
+  transition: filter 120ms ease, opacity 120ms ease;
 }
 
-.fenceRetry:hover {
+.fencePairButton:hover:not(:disabled) {
   filter: brightness(0.96);
 }
 
+.fencePairButton:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.fencePairButton:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
+}
+
+.fenceError {
+  margin: 10px 0 0;
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: left;
+}
+
+.fenceRetry {
+  width: 100%;
+  margin-top: 12px;
+  padding: 10px 16px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.fenceRetry:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
 .fenceRetry:focus-visible {
   outline: 2px solid var(--dsw-alias-brand-primary);
   outline-offset: 3px;

package/src/client/settings-card.module.css

@@ -24,6 +24,10 @@
 .header {
   appearance: none;
   width: 100%;
+  /* The suite does not force a global border-box, so width:100% + padding
+     would stretch the row 32px past the card and push the trailing pending
+     badge (last flex item) outside the card border. */
+  box-sizing: border-box;
   font: inherit;
   color: inherit;
   text-align: left;
@@ -44,6 +48,7 @@
 
 .headerStatic {
   width: 100%;
+  box-sizing: border-box;
   border-radius: 12px;
   align-items: center;
   gap: 12px;

package/src/dsh-home.ts

@@ -7,11 +7,14 @@
 
 import { homedir } from 'node:os'
 import { isAbsolute, join } from 'node:path'
+import { isAbsolute as posixIsAbsolute, join as posixJoin } from 'node:path/posix'
 
 /** Expand a leading ~ (or ~user) in a path, platform-style. */
 export function expandHome(path: string, home: string = homedir()): string {
+  const isPosix = home.startsWith('/')
+  const j = isPosix ? posixJoin : join
   if (path === '~') return home
-  if (path.startsWith('~/') || path.startsWith('~\\')) return join(home, path.slice(2))
+  if (path.startsWith('~/') || path.startsWith('~\\')) return j(home, path.slice(2))
   return path
 }
 
@@ -22,12 +25,15 @@ export function expandHome(path: string, home: string = homedir()): string {
  * @returns the absolute DSH home path.
  */
 export function resolveDshHome(env: NodeJS.ProcessEnv = process.env, home: string = homedir()): string {
+  const isPosix = home.startsWith('/')
+  const j = isPosix ? posixJoin : join
+  const isAbs = isPosix ? posixIsAbsolute : isAbsolute
   const raw = env.DSH_HOME
   if (raw !== undefined && raw.trim() !== '') {
     const expanded = expandHome(raw.trim(), home)
-    return isAbsolute(expanded) ? expanded : join(process.cwd(), expanded)
+    return isAbs(expanded) ? expanded : j(process.cwd(), expanded)
   }
-  return join(home, '.dsh')
+  return j(home, '.dsh')
 }
 
 /** Resolve the DSH home directory from the live environment. */

package/src/index.ts

@@ -16,6 +16,8 @@ import type { Context } from '@deepseek-ai/cordis'
 import { installSettingsSection, settingsNamespace } from '@deepseek-ai/dsh-settings'
 import z from 'schemastery'
 import type {} from '@deepseek-ai/dsh-host-webserver'
+import type {} from '@deepseek-ai/dsh-agent'
+import type {} from '@deepseek-ai/dsh-commands'
 import { DEFAULT_IDLE_EXPIRE_MS, PairingService, type PairingConfig } from './pairing.ts'
 import { dshHome } from './dsh-home.ts'
 import { isPairedDeviceRequest, makeGateListener } from './gate.ts'
@@ -66,7 +68,7 @@ declare module '@deepseek-ai/cordis' {
 export const name = 'remote-web-ui'
 
 /** Services required before the pairing surfaces can mount. */
-export const inject = ['webServer', 'apiProxy']
+export const inject = ['webServer', 'apiProxy', 'commands', 'agents']
 
 /**
  * Settings namespace of the remote-control capability — the section the web
@@ -374,7 +376,23 @@ function applyImpl(ctx: Context, config?: Config): void {
     ...makeRoutes({ service, lanAddresses, requirePairingForLan: () => resolve().requirePairingForLan }),
     ...makeMobileRoutes(),
     ...(apiProxy !== undefined
-      ? makeMobileApiRoutes({ service, apiProxy, pendingTracker: new PendingTracker(), mobileEnterToSend: () => resolve().mobileEnterToSend })
+      ? makeMobileApiRoutes({
+          service,
+          apiProxy,
+          pendingTracker: new PendingTracker(),
+          mobileEnterToSend: () => resolve().mobileEnterToSend,
+          commandDispatcher: ctx.commands !== undefined && ctx.agents !== undefined
+            ? {
+                async execute(sessionId, line, signal) {
+                  const agent = ctx.agents.get(sessionId as never)
+                  if (agent === undefined) return { error: 'session-not-found' as const }
+                  const execution = await ctx.commands.execute(agent, line, [], signal)
+                  if (execution === undefined) return { error: 'unknown-command' as const }
+                  return { ok: true as const, result: execution.result }
+                },
+              }
+            : undefined,
+        })
       : []),
     ...(apiProxy !== undefined ? makePairedModelCatalogRoutes({ service, apiProxy, lanAddresses }) : []),
     // The remote desktop channel: policy-gated `/remote` prefix that
@@ -444,6 +462,12 @@ function applyImpl(ctx: Context, config?: Config): void {
     if (!resolve().enabled) 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 = (): void => {
     const value = resolve()
     service.config = pairingConfigOf(value)

package/src/mobile/api.ts

@@ -105,10 +105,9 @@ export async function prompt(sessionId: string, text: string): Promise<void> {
 
 /** Send one slash command line (e.g. `/permission workspace-write`). */
 export async function sendCommand(sessionId: string, line: string): Promise<unknown> {
-  return await callUnary<unknown>('session.prompt', {
+  return await callUnary<unknown>('mobile.command', {
     sessionId,
-    mode: 'queue',
-    content: [{ type: 'text', text: line }],
+    line,
   })
 }
 

package/src/mobile-api.ts

@@ -64,6 +64,8 @@ const MOBILE_ALLOWLIST = new Set([
 const MOBILE_PREFERENCES_METHOD = 'mobile.preferences'
 const MOBILE_PENDING_METHOD = 'mobile.pending'
 const MOBILE_RESPOND_METHOD = 'mobile.respond'
+/** Execute a slash command through the host command registry (#1125). */
+const MOBILE_COMMAND_METHOD = 'mobile.command'
 
 /** One session.list page (thin phones load incrementally). */
 const SESSION_PAGE_SIZE = 20
@@ -102,6 +104,19 @@ export interface MobileApiDeps {
   mobileEnterToSend: () => boolean
   /** SSE keep-alive ping cadence for the mux stream (default 15000 ms; test seam). */
   eventsHeartbeatMs?: number
+  /**
+   * Optional command dispatcher for executing slash commands on the mobile
+   * surface. When absent, `mobile.command` returns an error; the mobile UI
+   * can still fall back to `session.prompt` (which sends the line to the
+   * model, not the command registry).
+   */
+  commandDispatcher?: {
+    execute(
+      sessionId: string,
+      line: string,
+      signal: AbortSignal,
+    ): Promise<{ ok: true; result: unknown } | { error: string }>
+  }
 }
 
 /** Mobile API route paths. */
@@ -161,6 +176,7 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
     const local = method === MOBILE_PREFERENCES_METHOD 
       || method === MOBILE_PENDING_METHOD 
       || method === MOBILE_RESPOND_METHOD
+      || method === MOBILE_COMMAND_METHOD
     if (!MOBILE_ALLOWLIST.has(method) && !local) {
       writeJson(res, 403, { ok: false, error: { code: 'forbidden', message: `method ${method} is not exposed to the mobile surface` } })
       return
@@ -213,6 +229,49 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
             result: { ok: false, error: { code: 'internal', message } },
           })
         }
+      } else if (method === MOBILE_COMMAND_METHOD) {
+        const payload = parsed.payload as { sessionId?: string; line?: string } | undefined
+        const sessionId = payload?.sessionId
+        const line = payload?.line
+        if (typeof sessionId !== 'string' || typeof line !== 'string') {
+          writeJson(res, 200, {
+            type: 'server-response',
+            rpcId,
+            result: { ok: false, error: { code: 'bad-request', message: 'missing sessionId or line' } },
+          })
+        } else if (deps.commandDispatcher === undefined) {
+          writeJson(res, 200, {
+            type: 'server-response',
+            rpcId,
+            result: { ok: false, error: { code: 'unavailable', message: 'command dispatcher is not available' } },
+          })
+        } else {
+          try {
+            const abort = new AbortController()
+            res.on('close', () => { if (!res.writableEnded) abort.abort() })
+            const outcome = await deps.commandDispatcher.execute(sessionId, line, abort.signal)
+            if ('error' in outcome) {
+              writeJson(res, 200, {
+                type: 'server-response',
+                rpcId,
+                result: { ok: false, error: { code: outcome.error, message: outcome.error } },
+              })
+            } else {
+              writeJson(res, 200, {
+                type: 'server-response',
+                rpcId,
+                result: { ok: true, value: { matched: true, result: outcome.result } },
+              })
+            }
+          } catch (error) {
+            const message = error instanceof Error ? error.message : String(error)
+            writeJson(res, 200, {
+              type: 'server-response',
+              rpcId,
+              result: { ok: false, error: { code: 'internal', message } },
+            })
+          }
+        }
       }
       return
     }

package/src/mobile-routes.ts

@@ -8,6 +8,7 @@
 import { readFile } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
+import { gzipSync } from 'node:zlib'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import type { WebRoute } from '@deepseek-ai/dsh-host-webserver'
 
@@ -147,7 +148,8 @@ export function makeMobileRoutes(): WebRoute[] {
   // The bundle is immutable for the process lifetime (a rebuild requires a
   // host restart), so the body is read from disk once, not per phone.
   let bundleBody: string | undefined
-  const handleBundle = async (_req: IncomingMessage, res: ServerResponse): Promise<void> => {
+  let bundleGzip: Buffer | undefined
+  const handleBundle = async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
     if (bundleBody === undefined) {
       const path = mobileBundlePath()
       if (!existsSync(path)) {
@@ -156,12 +158,32 @@ export function makeMobileRoutes(): WebRoute[] {
       }
       try {
         bundleBody = await readFile(path, 'utf8')
+        bundleGzip = gzipSync(Buffer.from(bundleBody, 'utf8'))
       } catch {
         writeStatic(res, 500, 'text/plain', 'failed to read the mobile bundle')
         return
       }
     }
-    writeStatic(res, 200, 'text/javascript', bundleBody)
+    const acceptEncoding = req.headers['accept-encoding'] ?? ''
+    const acceptsGzip = typeof acceptEncoding === 'string' && acceptEncoding.includes('gzip') && bundleGzip !== undefined
+    if (acceptsGzip) {
+      res.writeHead(200, {
+        'content-type': 'text/javascript; charset=utf-8',
+        'content-encoding': 'gzip',
+        'cache-control': 'no-cache',
+        vary: 'Accept-Encoding',
+        'referrer-policy': 'no-referrer',
+      })
+      res.end(bundleGzip)
+    } else {
+      res.writeHead(200, {
+        'content-type': 'text/javascript; charset=utf-8',
+        'cache-control': 'no-cache',
+        vary: 'Accept-Encoding',
+        'referrer-policy': 'no-referrer',
+      })
+      res.end(bundleBody)
+    }
   }
 
   let workerBody: string | undefined