@linxin666/dsh-remote-web-ui 0.3.23 → 0.3.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-remote-web-ui",
   "description": "Scan-to-pair remote access for the dsh web GUI that shares one official interface: a QR beside the settings button pairs phones and PCs into the same Web GUI (a portrait-touch adaptation layer for phones, full desktop on PCs) through one-time tokens and revocable device sessions, with a LAN bind toggle, optional Cloudflare tunnel, and one-click family self-update",
-  "version": "0.3.23",
+  "version": "0.3.24",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"

package/src/client/index.ts

@@ -39,6 +39,7 @@ import {
 import { FenceNotice } from './FenceNotice.tsx'
 import { reportDailyHeartbeat } from './telemetry.ts'
 import { startMobileAdapt, type RemoteAdaptGlobal } from './mobile-adapt.ts'
+import { installPluginCard } from './plugin-card-seat.ts'
 
 // Portrait-touch adaptation of the official UI: installed under the plugin
 // lifecycle (apply) so disabling the plugin in cordis patch (disabled: true)
@@ -232,25 +233,20 @@ export function apply(ctx: ClientContext): void {
   })
 
   // Plugin configuration card: one staged form over the `remote-web-ui`
-  // settings namespace, contributed to the Web UI plugin group.
+  // settings namespace, contributed to whichever plugin-card seat the running
+  // host declares (the family group's list seat, or the official keyed seat of
+  // the plugin-configuration tab when dsh-web-settings is not installed —
+  // issue #1589).
   const remoteSettings = new RemoteSettingsCardController(settingsScope)
-  ctx.slots.inject('web-ui.plugin.item', () => {
-    try {
-      const unregister = ctx.slots.register({
-        name: 'web-ui.plugin.item',
-        id: 'remote-web-ui',
-        order: 90,
-        locale: NS,
-        inject: () => remoteSettings.inject(),
-      }, RemoteSettingsCard)
-      return () => {
-        remoteSettings.dispose()
-        unregister()
-      }
-    } catch {
-      return () => {}
-    }
+  installPluginCard(ctx, {
+    namespace: REMOTE_WEB_UI_NS,
+    id: 'remote-web-ui',
+    order: 90,
+    locale: NS,
+    inject: () => remoteSettings.inject(),
+    component: RemoteSettingsCard,
   })
+  ctx.effect(() => () => { remoteSettings.dispose() }, 'remote-web-ui: settings card')
 
   // Phone-side boot flow + heartbeats. Loopback pages (the desktop) never
   // heartbeat; the server ignores unpaired heartbeats anyway. Both run only

package/src/client/mobile-adapt.ts

@@ -64,6 +64,12 @@ const EFFORT_BTN_ID = 'dshRemoteEffortPick'
 const COMPACT_CLASS = 'dsh-remote-compact-picker'
 /** Body class while the header actions are seated in the tabs row. */
 const HEADER_SEATED_CLASS = 'dsh-remote-header-seated'
+/**
+ * Width the seated header actions paint over the tabs row, as a CSS variable
+ * on <html>. The row caps its own width with it (see the v80 rules) instead of
+ * reserving the space with padding.
+ */
+const HEADER_RESERVE_VAR = '--dsh-remote-header-actions-reserve'
 /** The two composer picker entries the compact buttons drill into. */
 type PickerKind = 'model' | 'effort'
 /** Locale-dependent fast path for the official picker cells (zh/en). */
@@ -254,6 +260,20 @@ const ADAPT_CSS: readonly string[] = [
   // [class$="_tab"] misses the active tab (its class ends in "_tabActive")
   // — containment so BOTH tabs match.
   '[class$="_header"] [class$="_tabs"] [class*="_tab"]{font-size:12px;white-space:nowrap}',
+  // v80: the tabs row must give the painted actions their width up on its own.
+  // The v67 padding reservation could not do it: the row is a nowrap flex
+  // container, and once the tab labels plus their gaps overflow the reduced
+  // content box the flex items spill over the padding box, so the trailing
+  // tabs render underneath the actions (reported on a phone: a long agent
+  // preset label covered the last tabs). Cap the row against the reserve and
+  // let the labels scroll instead. The value rides a CSS variable on <html>
+  // because the update lands before React re-creates the row node, and an
+  // inline reservation on that node is dropped until the next sync tick.
+  // The 2px bottom padding keeps the active-tab underline inside the clipping
+  // box; the matching negative margin keeps the header height official.
+  `body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_tabs"]{max-width:max(0px,calc(100% - var(${HEADER_RESERVE_VAR},0px)));overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-bottom:-2px}`,
+  `body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_tabs"]::-webkit-scrollbar{display:none}`,
+  `body.${HEADER_SEATED_CLASS} [class$="_header"] [class$="_tabs"] > [class*="_tab"]{flex:0 0 auto}`,
   // Mobile scope: hide the plugin surfaces that do not fit a phone — the
   // right-hand details column and every desktop-oriented tool surface. The
   // list keys on the L2 semantic roots (data-dsh-plugin, ownership stays
@@ -764,9 +784,14 @@ export function startMobileAdapt(): void {
     let dx = translate !== null ? parseFloat(translate[1] ?? '0') : 0
     let dy = translate !== null ? parseFloat(translate[2] ?? '0') : 0
     const actionsRect = actions.getBoundingClientRect()
-    const tabsRect = tabs.getBoundingClientRect()
-    // Horizontal: the actions' right edge lands on the tabs row's right edge.
-    const rightDiff = tabsRect.right - actionsRect.right
+    // Horizontal: the actions' right edge lands on the header's content edge,
+    // NOT on the tabs row's right edge. The row caps its own width against the
+    // reserve below (v80), so anchoring to the row would let the pair walk
+    // leftwards on every measurement.
+    const headerRect = header.getBoundingClientRect()
+    const headerStyle = getComputedStyle(header)
+    const contentRight = headerRect.right - (parseFloat(headerStyle.paddingRight) || 0) - (parseFloat(headerStyle.borderRightWidth) || 0)
+    const rightDiff = contentRight - actionsRect.right
     if (Math.abs(rightDiff) >= 0.5) dx = Math.round((dx + rightDiff) * 10) / 10
     // Vertical: the actions' text bottom lands on the tab text bottom.
     const tabBottom = textBottom(tabBtn)
@@ -783,17 +808,26 @@ export function startMobileAdapt(): void {
     }
     const next = `translate(${dx}px, ${dy}px)`
     if (actions.style.transform !== next) actions.style.transform = next
-    // Reserve the painted width so the tab labels never slide under it.
+    // Reserve the painted width on the row itself, so the tab labels never
+    // slide under it. The value rides a CSS variable on <html>: React
+    // recreates the row node on re-render, which would drop an inline
+    // reservation until the next sync tick, and until then the labels render
+    // underneath the painted actions.
     const reserve = `${Math.ceil(actionsRect.width) + 8}px`
-    if (tabs.style.paddingRight !== reserve) tabs.style.paddingRight = reserve
+    const rootStyle = document.documentElement.style
+    if (rootStyle.getPropertyValue(HEADER_RESERVE_VAR) !== reserve) rootStyle.setProperty(HEADER_RESERVE_VAR, reserve)
   }
 
   function unseatHeaderActions(): void {
     document.body.classList.remove(HEADER_SEATED_CLASS)
+    document.documentElement.style.removeProperty(HEADER_RESERVE_VAR)
     const header = document.querySelector('[class$="_header"]')
     const tabs = header !== null ? header.querySelector('[class$="_tabs"]') : null
     const actions = header !== null ? header.querySelector('[class$="_titleCluster"] [class$="_headerActions"]') : null
     if (actions instanceof HTMLElement) actions.style.transform = ''
+    // The v67 padding reservation is gone with the v80 cap; clearing it keeps a
+    // profile that hot-updated from an older build from keeping a stale inline
+    // width on the row.
     if (tabs instanceof HTMLElement) tabs.style.paddingRight = ''
     if (headerObserver !== null) {
       headerObserver.disconnect()

package/src/client/plugin-card-seat.ts

@@ -0,0 +1,185 @@
+// Generated by scripts/sync-shared.mjs from shared/client/settings/plugin-card-seat.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * Family plugin-card seat.
+ *
+ * A family plugin contributes its settings card to whichever plugin-card seat
+ * the running host actually renders:
+ *
+ * - `web-ui.plugin.item` — the list seat declared by the dsh-web-settings
+ *   group section (this family's own first-level "Web UI plugins" section);
+ * - `settings.plugin.item` — the official keyed seat of the harness's
+ *   `ui-settings-plugins` tab, keyed by the settings namespace the card edits.
+ *
+ * SEAT SELECTION IS NOT A DECLARATION PROBE. The official `ui-settings-plugins`
+ * row belongs to the harness bundle and its `configurable` tab always declares
+ * `settings.plugin.item` before any external plugin's `apply()` runs, so
+ * "is the official seat declared?" answers yes even in the deployment whose
+ * whole point is the family group. Choosing on that probe sends every family
+ * card to the official Plugins tab and leaves the group's own section
+ * permanently empty — the family of reports where the section renders its
+ * heading and zero cards.
+ *
+ * The signal that actually distinguishes the two deployments is whether
+ * dsh-web-settings is loaded: it is the package that owns the group section and
+ * it publishes the `webUiSettings` service during `apply()`, which every
+ * family plugin already reads for its settings scope. Group loaded -> the family
+ * seat; group absent -> the official seat.
+ *
+ * The decision is re-evaluated on every `slots/changed` because the group may
+ * apply after this plugin (the family aggregate orders it first, a profile that
+ * installs the group separately need not): the initial contribution goes to the
+ * official seat, then moves to the family seat the moment the group's section
+ * registers. The entry is disposed before the replacement is registered, so a
+ * card is never in two seats at once.
+ *
+ * The shared tree has no client-SDK dependency, so this module reads its
+ * context through the structural shape below; callers pass the plugin's own
+ * `ctx`.
+ */
+
+/** The family list seat key. */
+export const FAMILY_PLUGIN_CARD_SEAT = 'web-ui.plugin.item'
+
+/** The official keyed plugin-card seat key. */
+export const OFFICIAL_PLUGIN_CARD_SEAT = 'settings.plugin.item'
+
+/** The service dsh-web-settings publishes while it is loaded. */
+export const FAMILY_GROUP_SERVICE = 'webUiSettings'
+
+/** The slot-registry member this helper uses (structurally satisfied by ctx.slots). */
+export interface PluginCardSlots {
+  /** Contribution of one card entry. */
+  register(options: never, component: never): unknown
+}
+
+/** The slice of the client context a card contribution needs. */
+export interface PluginCardContext {
+  slots: PluginCardSlots
+  /** Service lookup; absent on a context double that only models the slots. */
+  get?(name: string): unknown
+  /** Event subscription seat; absent on an event-less test double. */
+  on?(event: string, listener: (...args: never[]) => void): unknown
+}
+
+/** Owner share of a plugin card (both seats supply nothing). */
+export interface SettingsPluginItemOwnerProps {
+  /** Marker field: card owner props are intentionally empty. */
+  children?: never
+}
+
+/** One family plugin's card contribution. */
+export interface PluginCardSeat {
+  /** Settings namespace the card edits (the official seat's dispatch key). */
+  namespace: string
+  /** Family list-seat entry id. */
+  id: string
+  /** Family list-seat sort order. */
+  order?: number
+  /** Family list-seat display label; the official keyed seat carries none. */
+  label?: () => string
+  /** Locale namespace the card renders with. */
+  locale: string
+  /** Business-face factory of the registration. */
+  inject?: () => object
+  /**
+   * The card component. Its props type is the seat's composed shape, which is
+   * chosen at runtime, so the helper takes it erased; the registrant keeps its
+   * own precise typing at the call site.
+   */
+  component: unknown
+}
+
+/**
+ * Whether the family group (dsh-web-settings) is loaded in this page. The
+ * service is the group package's own contract, so the probe cannot be fooled
+ * by a harness release that starts declaring the official seat differently.
+ */
+export function familyGroupLoaded(ctx: PluginCardContext): boolean {
+  const get = ctx.get
+  if (typeof get !== 'function') return false
+  try {
+    return get.call(ctx, FAMILY_GROUP_SERVICE) !== undefined
+  } catch {
+    // A context that refuses the lookup: treat the group as absent, which
+    // falls back to the official seat the harness declares.
+    return false
+  }
+}
+
+/** Report a refused registration instead of leaving the user with no card. */
+function warnRefusedSeat(seat: string, error: unknown): void {
+  try {
+    console.warn(`[dsh-web] plugin card registration into "${seat}" was refused; the card will not render`, error)
+  } catch {
+    // Best-effort console write; a failed warning must not break the plugin.
+  }
+}
+
+/**
+ * Contribute one family plugin card to the seat this host renders, following
+ * the group if it loads later. The entry is disposed and re-registered on a
+ * seat change, never duplicated.
+ * @param ctx - client context (its slot registry decides the seat).
+ * @param seat - the card contribution.
+ */
+export function installPluginCard(ctx: PluginCardContext, seat: PluginCardSeat): void {
+  const slots = ctx.slots
+  const component = seat.component as never
+  const inject = seat.inject as never
+
+  let dispose: (() => void) | undefined
+  let current: string | undefined
+  /**
+   * Re-entrancy latch. The registry emits a change event synchronously from
+   * inside both `register` and the previous entry's disposer, so an unguarded
+   * reconcile would re-enter itself mid-move and register the card twice into
+   * the seat it is leaving ("already has an entry for key ...").
+   */
+  let reconciling = false
+
+  /** Reconcile the contribution with the currently live seat (no-op when unchanged). */
+  const reconcile = (): void => {
+    if (reconciling) return
+    const target = familyGroupLoaded(ctx) ? FAMILY_PLUGIN_CARD_SEAT : OFFICIAL_PLUGIN_CARD_SEAT
+    if (current === target) return
+    reconciling = true
+    const previous = dispose
+    dispose = undefined
+    current = undefined
+    previous?.()
+    try {
+      dispose = slots.register((target === FAMILY_PLUGIN_CARD_SEAT
+        ? {
+          name: FAMILY_PLUGIN_CARD_SEAT,
+          id: seat.id,
+          ...(seat.order === undefined ? {} : { order: seat.order }),
+          ...(seat.label === undefined ? {} : { label: seat.label }),
+          locale: seat.locale,
+          ...(seat.inject === undefined ? {} : { inject }),
+        }
+        : {
+          name: OFFICIAL_PLUGIN_CARD_SEAT,
+          key: seat.namespace,
+          locale: seat.locale,
+          ...(seat.inject === undefined ? {} : { inject }),
+        }) as never, component) as () => void
+      current = target
+    } catch (error) {
+      warnRefusedSeat(target, error)
+    } finally {
+      reconciling = false
+    }
+  }
+
+  if (typeof ctx.on === 'function') {
+    try {
+      ctx.on('slots/changed', () => { reconcile() })
+    } catch {
+      // An event seat that refuses the subscription leaves the initial
+      // decision in place; the card still renders in the seat chosen below.
+    }
+  }
+  // The initial decision: the group, when it is already loaded (the aggregate
+  // order), otherwise the official seat the harness declares.
+  reconcile()
+}

package/src/console-output.ts

@@ -0,0 +1,97 @@
+// Generated by scripts/sync-shared.mjs from shared/host/console-output.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * Console-output capture shared by the family's Host halves.
+ *
+ * A child process's stdout/stderr are raw bytes, and on Windows a console
+ * program writes the OEM code page (CP936/GBK on a zh-CN system), not UTF-8.
+ * Decoding each chunk on its own corrupts the text twice over: the
+ * encoding is guessed wrong, and a multi-byte character split across two reads
+ * decodes into two replacement characters. This capture accumulates raw bytes
+ * under a byte budget and decodes exactly once, at read time.
+ */
+
+/** Bounded byte accumulator for one child process's interleaved stdout/stderr. */
+export interface OutputCapture {
+  /** Append one raw chunk (the bytes are copied into the budget). */
+  push(chunk: Uint8Array): void
+  /**
+   * Decode everything captured so far. Idempotent, so a caller may read the
+   * tail both after a failure branch and at settlement.
+   */
+  read(): string
+}
+
+/** Count the U+FFFD replacement characters one candidate decode produced. */
+function replacementCount(text: string): number {
+  let count = 0
+  for (const character of text) {
+    if (character === '\uFFFD') count += 1
+  }
+  return count
+}
+
+/**
+ * Decode one console byte buffer. Strict UTF-8 wins whenever it is valid;
+ * otherwise the bytes are not UTF-8 at all and the console wrote its own code
+ * page, so the candidate that loses the least text is taken.
+ * @param bytes - the captured bytes.
+ * @returns the decoded text.
+ */
+export function decodeConsoleBytes(bytes: Uint8Array): string {
+  try {
+    return new TextDecoder('utf-8', { fatal: true }).decode(bytes)
+  } catch {
+    // Not valid UTF-8. Prefer whichever candidate leaves the fewest
+    // replacement characters so real UTF-8 text carrying one bad byte is not
+    // rewritten wholesale as GBK gibberish; without the legacy code page
+    // (small-ICU builds) the lenient UTF-8 pass is all that is left.
+    let best: string | undefined
+    let bestLoss = Number.POSITIVE_INFINITY
+    for (const label of ['gbk', 'utf-8']) {
+      let text: string
+      try {
+        text = new TextDecoder(label).decode(bytes)
+      } catch {
+        continue
+      }
+      const loss = replacementCount(text)
+      if (loss < bestLoss) {
+        best = text
+        bestLoss = loss
+      }
+    }
+    /* v8 ignore next 3 -- reachable only without the legacy code page AND without the lenient pass */
+    if (best === undefined) return Buffer.from(bytes).toString('utf8')
+    return best
+  }
+}
+
+/**
+ * Create a capture bounded to a byte budget. Overflow drops from the FRONT
+ * (the tail is what carries a failure reason), and the cut never lands inside
+ * a character: leading UTF-8 continuation bytes are dropped with it, and a
+ * legacy code page's dangling lead byte — indistinguishable from a real byte
+ * without knowing the encoding until the whole buffer is decoded — is removed
+ * with the one replacement character it produced, so an over-long stream still
+ * reads cleanly at the seam.
+ * @param maxBytes - maximum retained bytes.
+ * @returns the capture.
+ */
+export function createOutputCapture(maxBytes: number): OutputCapture {
+  let buffer = Buffer.alloc(0)
+  let trimmed = false
+  return {
+    push(chunk: Uint8Array): void {
+      buffer = buffer.length === 0 ? Buffer.from(chunk) : Buffer.concat([buffer, Buffer.from(chunk)])
+      if (buffer.length <= maxBytes) return
+      let start = buffer.length - maxBytes
+      while (start < buffer.length && (buffer[start] & 0xc0) === 0x80) start += 1
+      buffer = Buffer.from(buffer.subarray(start))
+      trimmed = true
+    },
+    read(): string {
+      const text = decodeConsoleBytes(buffer)
+      return trimmed && text.startsWith('\uFFFD') ? text.slice(1) : text
+    },
+  }
+}

package/src/update.ts

@@ -12,6 +12,7 @@
 import { readFileSync } from 'node:fs'
 import { dirname, join } from 'node:path'
 import { spawn } from 'node:child_process'
+import { decodeConsoleBytes } from './console-output.ts'
 
 /** npm registry base used for version probes. */
 export const NPM_REGISTRY = 'https://registry.npmjs.org'
@@ -573,18 +574,12 @@ const WIN_CMD_MISSING_RE = /not recognized as an internal or external command|
 /**
  * Decode process output with tolerant decoding:
  * Defaults to UTF-8; if invalid byte sequences are encountered (common on
- * Windows consoles using code page 936/GBK), falls back to GBK via TextDecoder.
+ * Windows consoles using code page 936/GBK), falls back to the code page that
+ * loses the least text. Bytes are decoded once per whole chunk by the caller's
+ * accumulator — decoding per \`data\` event would split multi-byte characters.
  */
 function decodeProcessChunk(chunk: Buffer): string {
-  try {
-    return new TextDecoder('utf-8', { fatal: true }).decode(chunk)
-  } catch {
-    try {
-      return new TextDecoder('gbk').decode(chunk)
-    } catch {
-      return chunk.toString('utf8')
-    }
-  }
+  return decodeConsoleBytes(chunk)
 }
 
 /**