@linxin666/dsh-remote-web-ui 0.4.3 → 0.4.4

package/src/client/mobile-adapt.ts

@@ -54,6 +54,17 @@ const ADAPT_CSS_ID = 'dsh-remote-web-ui/mobile-adapt.css'
 const ACTIVE_CLASS = 'dsh-remote-portrait'
 /** Body class while the collapsed rail is hidden behind the whale. */
 const RAIL_HIDDEN_CLASS = 'dsh-remote-rail-hidden'
+/**
+ * The official sidebar column root. Also the scope of the row sweep: every row
+ * the drag suppression covers is a descendant of it, so the document-wide scan
+ * it replaces only ever returned these.
+ */
+const SIDEBAR_SELECTOR = '[class*="_sidebarCol"]'
+/** The official draggable session/project rows (see disableRowDrag). */
+const ROW_SELECTOR = '[class*="_sessionRow"], [class*="_projectRow"]'
+/** The injected stylesheet, addressed through the same cached lookup. */
+const STYLE_SELECTOR = `style[data-plugin-css="${ADAPT_CSS_ID}"]`
+
 /** Whale button id. */
 const WHALE_ID = 'dshRemoteWhale'
 /** Compact picker: synthesized model button id. */
@@ -346,6 +357,8 @@ export function startMobileAdapt(): void {
   let whaleObserver: MutationObserver | null = null
   /** Header subtree observer: marks the geometry measurement dirty on re-render. */
   let headerObserver: MutationObserver | null = null
+  /** Document child-list observer: invalidates the cached-absent selector set. */
+  let domObserver: MutationObserver | null = null
   let observedHeader: Element | null = null
   /** Whether the seated-actions geometry needs re-measuring (see alignActionsText). */
   let headerGeometryDirty = true
@@ -368,17 +381,28 @@ export function startMobileAdapt(): void {
    * rail compaction) while the body class stays.
    */
   function ensureAdaptStyle(): void {
-    if (nodeOf(`style[data-plugin-css="${ADAPT_CSS_ID}"]`) !== null) return
+    if (nodeOf(STYLE_SELECTOR) !== null) return
     const tag = document.createElement('style')
     tag.dataset.plugin = 'remote-web-ui'
     tag.dataset.pluginCss = ADAPT_CSS_ID
     tag.textContent = ADAPT_CSS.join('')
     document.head.appendChild(tag)
+    // Seed the lookup cache: the tag is created here, outside nodeOf, so the
+    // negative cache could otherwise report it missing for one more tick and
+    // stack a duplicate stylesheet.
+    nodeCache.set(STYLE_SELECTOR, tag)
+    nodeMissCache.delete(STYLE_SELECTOR)
   }
 
   function apply(): void {
     if (active) return
     active = true
+    // First statement of the activation, before any lookup: nothing observed the
+    // document while the layer was reverted (the observer is created below), so
+    // no "absent" verdict recorded earlier may be served now. Clearing here
+    // rather than beside the observer also covers the lookups this path runs
+    // before that point.
+    forgetAbsentSelectors()
     document.body.classList.add(ACTIVE_CLASS)
     // A details panel opened before the viewport rotated into portrait (or
     // restored across reloads) would sit behind the display:none above;
@@ -397,6 +421,7 @@ export function startMobileAdapt(): void {
       meta.setAttribute('content', `${savedViewportContent}, viewport-fit=cover`)
     }
     ensureWhale()
+    ensureDomObserver()
     syncWhale()
     // React builds nodes with attributes before inserting them, so
     // attribute observers miss the initial collapsed state — a light
@@ -429,6 +454,45 @@ export function startMobileAdapt(): void {
       whaleObserver.disconnect()
       whaleObserver = null
     }
+    if (domObserver !== null) {
+      domObserver.disconnect()
+      domObserver = null
+    }
+    // Nothing observes the document from here on; a verdict recorded now could
+    // not be trusted after the next apply().
+    forgetAbsentSelectors()
+  }
+
+  /**
+   * Observe the document for the two kinds of change that can make a cached-absent
+   * target discoverable again (see nodeOf): node insertion/removal, and the
+   * class / compat-stamp attributes the cached selectors match on.
+   *
+   * Body class writes are excluded by target: the layer toggles three body
+   * classes every tick, and counting those would invalidate the negative cache
+   * on every tick and restore the very scan this cache removes. They cannot
+   * create a target either — every cached selector matches an element other
+   * than <body>.
+   *
+   * The record queue is drained on a microtask, so this stays off the layout
+   * path; a chat turn's insertions are a handful per second, not per element.
+   */
+  function ensureDomObserver(): void {
+    if (domObserver !== null || typeof MutationObserver === 'undefined' || !document.body) return
+    domObserver = new MutationObserver((records) => {
+      for (const record of records) {
+        if (record.type === 'childList' || record.target !== document.body) {
+          noteDomChange()
+          return
+        }
+      }
+    })
+    domObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['class', 'data-dsh-frame'],
+    })
   }
 
   /** Start/stop the 600ms sync tick; a no-op when already in the asked state. */
@@ -702,7 +766,7 @@ export function startMobileAdapt(): void {
   const dragOverridden = new Map<Element, string | null>()
   function disableRowDrag(): void {
     if (!active) return
-    const rows = document.querySelectorAll('[class*="_sidebarCol"] [class*="_sessionRow"], [class*="_sidebarCol"] [class*="_projectRow"]')
+    const rows = sidebarRows()
     for (const row of rows) {
       if (row.getAttribute('draggable') !== 'false') {
         if (!dragOverridden.has(row)) dragOverridden.set(row, row.getAttribute('draggable'))
@@ -731,15 +795,90 @@ export function startMobileAdapt(): void {
    * node on a major re-render, which the isConnected guard detects.
    */
   const nodeCache = new Map<string, Element>()
+  /**
+   * Selectors known to be absent as of {@link domGeneration}. A miss is the
+   * common case, not the exception: the layer holds no overlay of its own, and
+   * several official surfaces it looks for (tabs row, tools row, sidebar rows)
+   * legitimately do not exist at once. Re-walking a conversation-sized document
+   * for the same absent selector on every 600ms tick was waste that almost
+   * always resolved to null: five document-wide lookups per tick on the measured
+   * fixture, zero after this cache. That is a lookup count — the wall-clock
+   * saving is real while the mounted content is quiet and shrinks to the
+   * row-scope saving when a turn streams (see the Agent Note for the harness and
+   * the before/after numbers).
+   *
+   * A miss is trusted only while the observed content has not changed, so a
+   * surface that appears is still found on the very next tick — the same
+   * discovery latency the unconditional probe had. The cache is never aged by a
+   * clock: it is cleared by {@link noteDomChange} while the observer is live and
+   * by {@link forgetAbsentSelectors} across the windows where it is not (apply
+   * and revert). One blind spot is deliberate and load-bearing: the observer
+   * watches <body>, so a head-resident target is not covered by that signal —
+   * the one such target is seeded into the cache where it is created (see
+   * ensureAdaptStyle).
+   */
+  const nodeMissCache = new Set<string>()
+  /**
+   * Bumped whenever a cached target may have appeared or disappeared. A surface
+   * qualifies on a class token or on the aggregate compat stamp
+   * (`data-dsh-frame`), so both insertions/removals AND those two attributes
+   * can change the answer. Nothing the layer writes per tick lands here: its own
+   * class writes are all on <body>, and its row/transform/label writes touch
+   * other attributes entirely (see ensureDomObserver).
+   */
+  let domGeneration = 0
+  /** The generation the negative cache was recorded against. */
+  let missGeneration = -1
+
+  function noteDomChange(): void {
+    domGeneration += 1
+  }
+
+  /**
+   * Drop every cached "absent" verdict. Called on apply and revert: while the
+   * observer is disconnected the layer is blind to insertions, so a verdict
+   * recorded before the gap could otherwise outlive the change that falsified
+   * it and be served without a probe. The positive cache needs no equivalent —
+   * its `isConnected` guard already re-resolves a replaced node.
+   */
+  function forgetAbsentSelectors(): void {
+    nodeMissCache.clear()
+    domGeneration += 1
+  }
+
   function nodeOf(selector: string): Element | null {
     const cached = nodeCache.get(selector)
-    if (cached !== undefined && cached.isConnected) return cached
+    if (cached !== undefined) {
+      // A node React replaced is no longer connected; drop it and fall through
+      // so the lookup below can find its replacement.
+      if (cached.isConnected) return cached
+      nodeCache.delete(selector)
+    }
+    if (missGeneration !== domGeneration) {
+      nodeMissCache.clear()
+      missGeneration = domGeneration
+    }
+    if (nodeMissCache.has(selector)) return null
     const found = document.querySelector(selector)
-    if (found === null) nodeCache.delete(selector)
-    else nodeCache.set(selector, found)
+    if (found === null) {
+      nodeMissCache.add(selector)
+      return null
+    }
+    nodeCache.set(selector, found)
     return found
   }
 
+  /**
+   * The session/project rows the drag suppression covers, scoped to the cached
+   * sidebar root. Each row carries the sidebar column class as an ancestor, so
+   * the document-wide scan this replaces only ever returned rows from here.
+   */
+  function sidebarRows(): Element[] {
+    const sidebar = nodeOf(SIDEBAR_SELECTOR)
+    if (sidebar === null) return []
+    return Array.from(sidebar.querySelectorAll(ROW_SELECTOR))
+  }
+
   /** The official application frame, through the same cached lookup. */
   function frameEl(): HTMLElement | null {
     const frame = nodeOf(APP_FRAME_SELECTOR)

package/src/index.ts

@@ -736,18 +736,22 @@ function applyImpl(ctx: Context, config?: ResolvedConfigFields): void {
     console.warn('remote-web-ui: LAN-exposed bind — pairing gates the /remote channel; direct /api stays under the harness fence + browser auth (stop() does not revoke an already-redeemed browser credential)')
   }
 
-  // Apply the effective configuration to the running surfaces once per
-  // activation: the service tunables, the LAN-bind block/firewall, the tunnel
-  // plan, the pairing routes, the presence sweep, and the posture probe.
-  const sync = (): void => {
-    const value = resolve()
-    service.config = pairingConfigOf(value)
-    // LAN bind toggle: only write the managed patch block once the user has
-    // flipped it (undefined = untouched, never write). Desired host/port come
-    // from the CLI flags when given (flags win), else from the toggle and
-    // the currently bound port. The block takes effect on the next start, so
-    // the re-assert at every boot keeps it in sync with both the toggle and
-    // the flags.
+  // LAN bind toggle: only write the managed patch block once the user has
+  // flipped it (undefined = untouched, never write). Desired host/port come
+  // from the CLI flags when given (flags win), else from the toggle and
+  // the currently bound port. The block takes effect on the next start, so
+  // the re-assert at every boot keeps it in sync with both the toggle and
+  // the flags.
+  //
+  // This work must leave the caller's async context first: a settings save
+  // runs inside the Host's hmr.runExclusive, and cordis.patch.yml is exactly
+  // the file the HMR config watcher refreshes from. A write issued on that
+  // same context makes the watcher's refresh re-enter runExclusive, which
+  // rejects with "HMR transactions cannot be nested" and fails the user's
+  // save (issue #1751). setImmediate starts a fresh AsyncLocalStorage store,
+  // so the assertion runs outside the transaction; it is idempotent, so the
+  // coalesced follow-up sync() re-reading the same block writes nothing.
+  const applyLanBindWork = (value: ResolvedConfig): void => {
     if (value.lanBind !== undefined) {
       const startup = ctx.get('webStartup') as StartupFacts | undefined
       const desiredHost = desiredBindHost(value.lanBind === true, startup?.host)
@@ -785,6 +789,36 @@ function applyImpl(ctx: Context, config?: ResolvedConfigFields): void {
         }
       }
     }
+  }
+
+  // The LAN bind assertion never blocks the caller: one pending work item is
+  // enough, and it always re-reads the config through `resolve()` at run time
+  // so a toggle flipped twice before the tick lands on the last value.
+  let lanBindWorkPending = false
+  const scheduleLanBindWork = (): void => {
+    if (lanBindWorkPending) return
+    lanBindWorkPending = true
+    setImmediate(() => {
+      lanBindWorkPending = false
+      try {
+        applyLanBindWork(resolve())
+      } catch (error) {
+        // A deferred assertion must never surface as an unhandled rejection:
+        // the settings save that triggered it already answered, and the card
+        // reads the live block state back on its own poll.
+        console.error(`remote-web-ui: the deferred lan-bind assertion failed: ${error instanceof Error ? error.message : String(error)}`)
+      }
+    })
+  }
+  ctx.effect(() => () => { lanBindWorkPending = false }, 'remote-web-ui: lan-bind work')
+
+  // Apply the effective configuration to the running surfaces once per
+  // activation: the service tunables, the LAN-bind block/firewall, the tunnel
+  // plan, the pairing routes, the presence sweep, and the posture probe.
+  const sync = (): void => {
+    const value = resolve()
+    service.config = pairingConfigOf(value)
+    scheduleLanBindWork()
     // The plugin-managed tunnels own the public base while one runs: the URL
     // lands in the service through the tunnel's phase listener (the minted
     // quick URL, or the named tunnel's fixed public hostname). The manual

package/src/pairing.ts

@@ -24,7 +24,7 @@
 import { randomBytes } from 'node:crypto'
 import { mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
 import { dirname } from 'node:path'
-import type { PostureSnapshot } from './posture.ts'
+import type { PostureHost, PostureSnapshot } from './posture.ts'
 
 /** The observable pairing phases the panel renders. */
 export type PairingPhase =
@@ -663,6 +663,7 @@ function snapshotsEqual(a: PairingSnapshot, b: PairingSnapshot): boolean {
     && a.publicUrl === b.publicUrl
     && tunnelEqual(a.tunnel, b.tunnel)
     && relayEqual(a.relay, b.relay)
+    && postureEqual(a.posture, b.posture)
     && a.tokenId === b.tokenId
     && a.tokenExpiresAt === b.tokenExpiresAt
     && a.deviceCount === b.deviceCount
@@ -695,6 +696,48 @@ function relayEqual(a: RelayStatus | undefined, b: RelayStatus | undefined): boo
     && a.state === b.state && a.url === b.url && a.error === b.error)
 }
 
+/**
+ * Posture equality. A probe round can change this frame while every other field
+ * stays put — the common case, since the probe re-runs on a settings change and
+ * on a tunnel reaching running, and a quick-tunnel restart churns the probed
+ * host set. Leaving the frame out of the comparison suppressed those emits, so
+ * the loopback SSE stream and the desktop panel could sit on a stale "exposed"
+ * (or stale "clean") verdict for as long as the phase and roster stayed put.
+ */
+function postureEqual(a: PostureSnapshot | undefined, b: PostureSnapshot | undefined): boolean {
+  if (a === b) return true
+  // A frame that is not an object at all (a hand-built context can pass
+  // anything) counts as changed instead of throwing out of the setter.
+  if (!isPostureFrame(a) || !isPostureFrame(b)) return false
+  return a.checkedAt === b.checkedAt && hostsEqual(a.hosts, b.hosts)
+}
+
+/** Whether a value has the shape a posture frame is compared on. */
+function isPostureFrame(value: unknown): value is PostureSnapshot {
+  return typeof value === 'object' && value !== null
+}
+
+/**
+ * Per-host posture equality (a round's verdicts, in probe order). Tolerates a
+ * frame that is not the expected shape: this runs inside the emit path, outside
+ * the listener error containment, so a malformed snapshot handed in by another
+ * host-fiber caller must degrade to "changed" instead of throwing out of the
+ * setter that produced it.
+ */
+function hostsEqual(a: readonly PostureHost[] | undefined, b: readonly PostureHost[] | undefined): boolean {
+  if (a === b) return true
+  if (!Array.isArray(a) || !Array.isArray(b)) return false
+  return a.length === b.length && a.every((host, index) => {
+    const other = b[index]
+    return isPostureHost(host) && isPostureHost(other) && host.host === other.host && host.exposed === other.exposed
+  })
+}
+
+/** Whether a value has the shape one probed host is compared on. */
+function isPostureHost(value: unknown): value is PostureHost {
+  return typeof value === 'object' && value !== null
+}
+
 /** Element-wise string list equality (interface order is meaningful). */
 function sameStrings(a: readonly string[], b: readonly string[]): boolean {
   return a.length === b.length && a.every((value, index) => value === b[index])

package/src/remote-api.ts

@@ -182,7 +182,19 @@ export function makeRemoteApiRoutes(deps: RemoteApiDeps): WebRoute[] {
 }
 
 /**
- * Map one outer upgrade URL onto the loopback path (query string included).
+ * Map one outer upgrade URL onto the loopback path, dropping the cookieless
+ * device credential on the way in.
+ *
+ * The outer handshake carries the device id as `?device=<id>` because WebSocket
+ * handshakes cannot carry headers from the Web API. That id is a live session
+ * credential — it opens the full host API through this same channel — and the
+ * inner leg is a request the rest of the loopback origin sees (on a WebSocket
+ * leg, a raw handshake request line written to a loopback socket), so forwarding
+ * it handed a working credential to every other observer of the local port for
+ * no benefit: the gate above has already authenticated the caller, and no
+ * upstream route reads the parameter (the gateway mux matches on path alone).
+ * The rest of the query rides through unchanged, so a caller's own parameters
+ * still reach the upstream.
  */
 export function upgradeInnerPath(reqUrl: string | undefined, fallbackPath: string): string {
   if (reqUrl === undefined || reqUrl === '') return fallbackPath
@@ -194,6 +206,7 @@ export function upgradeInnerPath(reqUrl: string | undefined, fallbackPath: strin
   }
   const inner = innerPathOf(url.pathname)
   if (inner === undefined) return fallbackPath
+  url.searchParams.delete(REMOTE_DEVICE_QUERY)
   return `${inner}${url.search}`
 }