@linxin666/dsh-remote-web-ui 0.2.4 → 0.2.6

package/src/client/remote-channel.ts

@@ -0,0 +1,269 @@
+/**
+ * The remote desktop channel — browser half. On a non-loopback origin (LAN
+ * address or public tunnel) fenced host routes refuse the request, and
+ * pairing is the real access control — so same-origin traffic the desktop
+ * issues is rewritten onto this plugin's gated `/remote` prefix (host half
+ * in src/remote-api.ts). The host then re-issues the call to 127.0.0.1 so
+ * plugin loopback fences pass.
+ *
+ * The rewrite is deliberately narrow:
+ * - loopback origins are untouched (the desktop at 127.0.0.1 keeps original paths);
+ * - the pairing routes (`/api/pair/*`) stay where they are — accept must
+ *   work BEFORE a device is paired;
+ * - the update endpoints (`/api/update/*`) stay loopback-only;
+ * - desktop-launcher create/shutdown (`/api/dsh-desktop-launcher/*`) stay
+ *   loopback-only (host-local files and process exit);
+ * - the family settings bridge (`/api/dsh-web-ui-settings/*`) stays
+ *   loopback-only (same plane as SDK settings.*);
+ * - `/api/*` (SDK methods and `/api/<plugin>/...` plugin namespaces),
+ *   `/sidebar/*`, `/git/*`, and `/pet/*` ride the channel;
+ * - fetch, EventSource, WebSocket, and img/script/iframe `src` are patched;
+ *   everything else calls the original unchanged.
+ *
+ * Pure helpers are exported for unit tests; `installRemoteChannel` patches
+ * the given window and returns their restore.
+ */
+
+/** The gated mirror prefix (must match src/remote-methods.ts). */
+export const REMOTE_PREFIX = '/remote'
+
+/** Connection-plugin method prefix under the gated channel. */
+export const REMOTE_API_PREFIX = `${REMOTE_PREFIX}/api`
+
+const API_PREFIX = '/api/'
+const PAIR_PREFIX = '/api/pair/'
+const UPDATE_PREFIX = '/api/update/'
+const DESKTOP_LAUNCHER_PREFIX = '/api/dsh-desktop-launcher'
+const SETTINGS_BRIDGE_PREFIX = '/api/dsh-web-ui-settings'
+const SIDEBAR_PREFIX = '/sidebar/'
+const GIT_PREFIX = '/git/'
+const PET_PREFIX = '/pet/'
+const WS_PATHS = new Set([
+  '/api/events.mux',
+  '/api/events.host',
+  '/sidebar/ws/terminal',
+  '/sidebar/ws/agent-terminals',
+  '/api/dsh-ssh/terminal',
+])
+
+/**
+ * Browser-safe loopback classification for the page origin (the SDK client
+ * exports its own; this copy keeps the module dependency-free).
+ * @param hostname - a location hostname (IPv6 without brackets).
+ * @returns true for localhost, IPv6 loopback, or any 127/8 literal.
+ */
+export function isLoopbackHostname(hostname: string): boolean {
+  if (hostname === 'localhost' || hostname === '::1') return true
+  const parts = hostname.split('.')
+  return parts.length === 4 && parts[0] === '127' && parts.every(part => /^\d{1,3}$/.test(part) && Number(part) <= 255)
+}
+
+/**
+ * Whether one same-origin path must ride the gated channel (fetch, EventSource,
+ * img/script/iframe src).
+ * @param pathname - the request URL pathname.
+ */
+export function shouldRewriteFetchPath(pathname: string): boolean {
+  if (pathname.startsWith(PAIR_PREFIX)) return false
+  if (pathname.startsWith(UPDATE_PREFIX)) return false
+  if (pathname === DESKTOP_LAUNCHER_PREFIX || pathname.startsWith(`${DESKTOP_LAUNCHER_PREFIX}/`)) return false
+  if (pathname === SETTINGS_BRIDGE_PREFIX || pathname.startsWith(`${SETTINGS_BRIDGE_PREFIX}/`)) return false
+  if (pathname.startsWith(API_PREFIX)) return true
+  if (pathname.startsWith(SIDEBAR_PREFIX) || pathname === '/sidebar') return true
+  if (pathname.startsWith(GIT_PREFIX) || pathname === '/git') return true
+  if (pathname.startsWith(PET_PREFIX) || pathname === '/pet') return true
+  return false
+}
+
+/**
+ * Whether one WebSocket path must ride the gated channel.
+ * @param pathname - the WebSocket URL pathname.
+ */
+export function shouldRewriteWsPath(pathname: string): boolean {
+  return WS_PATHS.has(pathname)
+}
+
+/** The gated twin of one fenced path (`/remote` + original pathname). */
+export function rewritePath(pathname: string): string {
+  return `${REMOTE_PREFIX}${pathname}`
+}
+
+/**
+ * Rewrite one raw URL string when it is same-origin and fenced. Relative
+ * inputs stay relative so resource loaders do not unexpectedly absolutize.
+ */
+export function rewriteRawUrl(raw: string, baseHref: string, origin: string): string {
+  let url: URL
+  try {
+    url = new URL(raw, baseHref)
+  } catch {
+    return raw
+  }
+  if (url.origin !== origin) return raw
+  if (!shouldRewriteFetchPath(url.pathname)) return raw
+  url.pathname = rewritePath(url.pathname)
+  if (raw.startsWith('/') && !raw.startsWith('//')) {
+    return `${url.pathname}${url.search}${url.hash}`
+  }
+  return url.href
+}
+
+/** A constructor that exposes a configurable `src` on its prototype. */
+interface SrcConstructor {
+  prototype: object
+}
+
+/** The subset of window the channel needs (injectable for tests). */
+export interface ChannelWindow {
+  fetch: typeof globalThis.fetch
+  WebSocket: typeof WebSocket
+  EventSource?: typeof EventSource
+  HTMLImageElement?: SrcConstructor
+  HTMLScriptElement?: SrcConstructor
+  HTMLIFrameElement?: SrcConstructor
+  location: { origin: string; href: string }
+}
+
+/** Options for {@link installRemoteChannel}. */
+export interface RemoteChannelOptions {
+  /** Called when a gated call came back unpaired (code `unpaired`). */
+  onUnpaired?: () => void
+  /** Called when a gated call succeeded (an unpaired banner can retire). */
+  onPaired?: () => void
+}
+
+/** Read an unpaired code from either the SDK envelope or a plugin JSON body. */
+function unpairedCodeOf(value: unknown): string | undefined {
+  if (typeof value !== 'object' || value === null) return undefined
+  const record = value as { result?: unknown; error?: unknown }
+  const nested = record.result
+  if (typeof nested === 'object' && nested !== null) {
+    const error = (nested as { error?: unknown }).error
+    if (typeof error === 'object' && error !== null && typeof (error as { code?: unknown }).code === 'string') {
+      return (error as { code: string }).code
+    }
+  }
+  const error = record.error
+  if (typeof error === 'object' && error !== null && typeof (error as { code?: unknown }).code === 'string') {
+    return (error as { code: string }).code
+  }
+  return undefined
+}
+
+/**
+ * Whether a gated 403 is the unpaired-device fence (not a loopback-only
+ * method denial, which uses the same status with code `forbidden`).
+ */
+export async function isUnpairedDenied(response: Response): Promise<boolean> {
+  if (response.status !== 403) return false
+  try {
+    return unpairedCodeOf(await response.json()) === 'unpaired'
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Wrap a prototype `src` setter so fenced same-origin URLs ride `/remote`.
+ * No-ops when the constructor is missing or `src` is not configurable.
+ */
+function patchSrcAccessor(ctor: SrcConstructor | undefined, rewrite: (value: string) => string): () => void {
+  if (ctor === undefined) return () => {}
+  const descriptor = Object.getOwnPropertyDescriptor(ctor.prototype, 'src')
+  if (descriptor === undefined || descriptor.configurable === false) return () => {}
+  if (descriptor.set === undefined) return () => {}
+  const originalSet = descriptor.set
+  const originalGet = descriptor.get
+  Object.defineProperty(ctor.prototype, 'src', {
+    configurable: true,
+    enumerable: descriptor.enumerable ?? true,
+    get: originalGet,
+    set(this: unknown, value: unknown) {
+      originalSet.call(this, rewrite(String(value)))
+    },
+  })
+  return () => {
+    Object.defineProperty(ctor.prototype, 'src', descriptor)
+  }
+}
+
+/**
+ * Patch `fetch`, `EventSource`, `WebSocket`, and resource `src` accessors on
+ * one window to route fenced traffic through the gated channel.
+ * @param window - the browser window (or a test double).
+ * @param options - the unpaired callback.
+ * @returns a function restoring the originals.
+ */
+export function installRemoteChannel(window: ChannelWindow, options: RemoteChannelOptions = {}): () => void {
+  const originalFetch = window.fetch
+  const OriginalWebSocket = window.WebSocket
+  const OriginalEventSource = window.EventSource
+
+  const sameOrigin = (url: URL): boolean => url.origin === window.location.origin
+  const rewrite = (raw: string): string => rewriteRawUrl(raw, window.location.href, window.location.origin)
+
+  const patchedFetch: typeof globalThis.fetch = (input, init) => {
+    const url = new URL(
+      typeof input === 'string' || input instanceof URL ? input.toString() : input.url,
+      window.location.href,
+    )
+    if (sameOrigin(url) && shouldRewriteFetchPath(url.pathname)) {
+      const rewritten = new URL(url)
+      rewritten.pathname = rewritePath(url.pathname)
+      const next: RequestInfo | URL = typeof input === 'string' || input instanceof URL
+        ? rewritten.toString()
+        : new Request(rewritten, input)
+      return Promise.resolve(originalFetch.call(window, next, init)).then(async (response) => {
+        if (await isUnpairedDenied(response.clone())) options.onUnpaired?.()
+        else options.onPaired?.()
+        return response
+      })
+    }
+    return originalFetch.call(window, input, init)
+  }
+
+  class PatchedWebSocket extends OriginalWebSocket {
+    constructor(url: string | URL, protocols?: string | string[]) {
+      const parsed = new URL(url.toString(), window.location.href)
+      const wsOrigin = parsed.protocol === 'wss:' ? `https://${parsed.host}` : parsed.protocol === 'ws:' ? `http://${parsed.host}` : ''
+      if (wsOrigin !== '' && wsOrigin === window.location.origin && shouldRewriteWsPath(parsed.pathname)) {
+        const rewritten = new URL(parsed)
+        rewritten.pathname = rewritePath(parsed.pathname)
+        super(rewritten, protocols)
+        return
+      }
+      super(url, protocols)
+    }
+  }
+
+  const restoreSrc = [
+    patchSrcAccessor(window.HTMLImageElement, rewrite),
+    patchSrcAccessor(window.HTMLScriptElement, rewrite),
+    patchSrcAccessor(window.HTMLIFrameElement, rewrite),
+  ]
+
+  window.fetch = patchedFetch
+  window.WebSocket = PatchedWebSocket as typeof WebSocket
+  if (OriginalEventSource !== undefined) {
+    class PatchedEventSource extends OriginalEventSource {
+      constructor(url: string | URL, eventSourceInitDict?: EventSourceInit) {
+        const parsed = new URL(url.toString(), window.location.href)
+        if (sameOrigin(parsed) && shouldRewriteFetchPath(parsed.pathname)) {
+          const rewritten = new URL(parsed)
+          rewritten.pathname = rewritePath(parsed.pathname)
+          super(rewritten, eventSourceInitDict)
+          return
+        }
+        super(url, eventSourceInitDict)
+      }
+    }
+    window.EventSource = PatchedEventSource
+  }
+
+  return () => {
+    window.fetch = originalFetch
+    window.WebSocket = OriginalWebSocket
+    if (OriginalEventSource !== undefined) window.EventSource = OriginalEventSource
+    for (const restore of restoreSrc) restore()
+  }
+}

package/src/client/remote.module.css

@@ -267,6 +267,7 @@
 }
 
 .link {
+  display: block;
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -276,6 +277,55 @@
   font-size: 12px;
 }
 
+.pairLinks {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.pairLinkRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-1);
+}
+
+.pairLinkText {
+  min-width: 0;
+  flex: 1;
+}
+
+.pairLinkLabel {
+  display: block;
+  margin-bottom: 3px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+}
+
+.copyLink {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 5px;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-button-elevated-fill);
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+}
+
+.oneTimeHint {
+  margin: 0;
+  color: var(--dsw-alias-label-caption);
+  font-size: 12px;
+}
+
 .stoppedHint {
   margin: 0;
   color: var(--dsw-alias-state-error-primary);
@@ -353,32 +403,110 @@
   font-size: 13px;
 }
 
-/* Failed-pair toast: fixed top-center diagnostic on the phone. */
-.notice {
+/* Unpaired remote desktop: opaque, blocking page above the shell. */
+.fencePage {
   position: fixed;
-  top: 16px;
-  left: 50%;
-  transform: translateX(-50%);
+  inset: 0;
   z-index: 2000;
-  max-width: min(420px, calc(100vw - 32px));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
   box-sizing: border-box;
-  padding: 12px 16px;
+  padding: 40px 24px;
+  background: var(--dsw-alias-bg-base);
+  text-align: center;
+}
+
+.fenceCard {
+  width: min(520px, 100%);
+  margin-inline: auto;
+  box-sizing: border-box;
+  padding: 36px 40px;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 12px;
-  background: var(--dsw-alias-bg-layer-2);
+  border-radius: 20px;
+  background: var(--dsw-alias-bg-layer-1);
   box-shadow: var(--dsw-shadow-lv3);
+  text-align: center;
 }
 
-.noticeTitle {
-  margin: 0;
+.fenceMark {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  margin-inline: auto;
+  border-radius: 50%;
+  background: var(--dsw-alias-state-error-secondary);
   color: var(--dsw-alias-state-error-primary);
-  font-weight: 500;
+  font-size: 24px;
+  line-height: 1;
 }
 
-.noticeDetail {
-  margin: 4px 0 0;
-  color: var(--dsw-alias-label-secondary);
+.fenceEyebrow {
+  margin: 22px 0 8px;
+  color: var(--dsw-alias-state-error-primary);
   font-size: 13px;
+  font-weight: 600;
+}
+
+.fenceTitle {
+  margin: 0;
+  color: var(--dsw-alias-label-primary);
+  font-size: 24px;
+  line-height: 1.35;
+}
+
+.fenceDetail {
+  margin: 12px 0 0;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+.fenceSteps {
+  margin: 24px auto 0;
+  padding: 20px 20px 20px 42px;
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
+  line-height: 1.65;
+  text-align: left;
+}
+
+.fenceSteps li + li {
+  margin-top: 8px;
+}
+
+.fenceRetry {
+  width: 100%;
+  margin-top: 24px;
+  padding: 11px 16px;
+  border: 1px solid var(--dsw-alias-brand-primary);
+  border-radius: 10px;
+  background: var(--dsw-alias-brand-primary);
+  color: #fff;
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.fenceRetry:hover {
+  filter: brightness(0.96);
+}
+
+.fenceRetry:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 3px;
+}
+
+.fenceFootnote {
+  margin: 14px 0 0;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 1.55;
 }
 
 /* Multi-homed address picker: one radio per constructible LAN literal. */
@@ -434,6 +562,101 @@
   font-size: 12px;
 }
 
+.devices {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 16px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 16px;
+  background: var(--dsw-alias-bg-layer-1);
+}
+
+.devicesTitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.devicesEmpty {
+  margin: 0;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+}
+
+.deviceList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.deviceRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.deviceMeta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.deviceName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.devicePresence {
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.deviceOnline {
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.deviceOffline {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.deviceSeen {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.deviceRevoke {
+  flex: none;
+  border: none;
+  border-radius: 8px;
+  padding: 6px 10px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.deviceRevoke:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.deviceRevoke:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);
+}
+
 /* Accessibility: collapse the interaction transitions for reduced-motion
    users. The panel chrome is already static; this just disables the
    hover/active/focus cross-fades added above. */
@@ -441,7 +664,8 @@
   .trigger,
   .close,
   .action,
-  .address {
+  .address,
+  .deviceRevoke {
     transition: none;
   }
 }

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

@@ -354,6 +354,8 @@
 }
 
 .selectOption {
+  /* 弹层是 max-height 受限的 flex 列：选项必须保持自然行高，超出交给弹层滚动 */
+  flex-shrink: 0;
   border-radius: 6px;
   padding: 6px 10px;
   font-size: 13px;

package/src/dsh-home.ts

@@ -0,0 +1,36 @@
+// Generated by scripts/sync-shared.mjs from shared/host/dsh-home.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * DSH_HOME resolution shared by the plugin family's Host halves: the
+ * environment override wins, the platform home fallback follows. Mirrors
+ * what dsh-pet and dsh-liangshen each used to implement locally.
+ */
+
+import { homedir } from 'node:os'
+import { isAbsolute, join } from 'node:path'
+
+/** Expand a leading ~ (or ~user) in a path, platform-style. */
+export function expandHome(path: string, home: string = homedir()): string {
+  if (path === '~') return home
+  if (path.startsWith('~/') || path.startsWith('~\\')) return join(home, path.slice(2))
+  return path
+}
+
+/**
+ * Resolve the DSH home directory.
+ * @param env - process environment to read DSH_HOME from.
+ * @param home - platform home directory fallback (test seam).
+ * @returns the absolute DSH home path.
+ */
+export function resolveDshHome(env: NodeJS.ProcessEnv = process.env, home: string = homedir()): string {
+  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 join(home, '.dsh')
+}
+
+/** Resolve the DSH home directory from the live environment. */
+export function dshHome(): string {
+  return resolveDshHome()
+}

package/src/gate.ts

@@ -84,13 +84,16 @@ export function makeGateListener(
   enabled: boolean | (() => boolean) = true,
 ): (request: IncomingMessage, method: string | undefined, next: () => boolean | Promise<boolean>) => boolean | Promise<boolean> {
   return (request, _method, next) => {
+    // Loopback clients (desktop at 127.0.0.1) always pass without cookie check.
     if (isLoopbackClient(request)) return next()
     const active = typeof enabled === 'function' ? enabled() : enabled
     if (!active) return false
     const require = typeof requirePairingForLan === 'function' ? requirePairingForLan() : requirePairingForLan
+    // When pairing is not required for LAN, non-loopback requests pass too.
     if (!require) return next()
-    // The paired-device cookie is a full host-API credential: it passes this
-    // gate for the whole ApiProxy surface, not just the /m/api allowlist.
+    // Non-loopback origin: verify paired-device cookie. Sibling plugins that
+    // own their own prefixes (/pet, /git, /sidebar, …) consult the same cookie
+    // through the remoteWebUiPairing service — this listener only covers /api.
     return isPairedDeviceRequest(service, request) ? next() : false
   }
 }