@linxin666/dsh-remote-web-ui 0.1.15 → 0.1.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-remote-web-ui",
   "description": "Mobile remote control for the dsh web GUI: scan-to-pair QR entry beside the settings button, one-time pairing tokens, live device status, and revocable mobile sessions",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "engines": {
     "node": "^22.19.0 || >=24.0.0"
@@ -30,6 +30,7 @@
     "lib/**/*.d.ts",
     "lib/**/*.d.ts.map",
     "src",
+    "assets",
     "cordis.patch.yml"
   ],
   "license": "Apache-2.0",

package/src/client/PluginSettingsCard.tsx

@@ -138,7 +138,13 @@ export function PluginSettingsCard<TKey extends string = string>(props: PluginSe
             {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}
             {props.children}
             <div className={css.footer}>
-              {state.failed ? <p className={css.failed} role="status">{props.t('settings.saveFailed')}</p> : null}
+              {state.failed
+                ? (
+                  <p className={css.failed} role="status">
+                    {props.t('settings.saveFailed')}{state.failedReason ? ' - ' + state.failedReason : ''}
+                  </p>
+                )
+                : null}
               <button
                 type="button"
                 className={css.discard}

package/src/client/UpdatePanel.tsx

@@ -198,6 +198,8 @@ function errorMessageOf(t: TranslateNS<"remote">, result: UpdateRunResult): stri
     case "not-found": return t("update.error.notFound")
     case "link": return t("update.error.link")
     case "pnpm-failed": return t("update.error.pnpmFailed", { code: String(result.exitCode ?? "?") })
+    case "stale": return t("update.error.stale")
+    case "verify-failed": return t("update.error.verifyFailed")
     default: return result.error ?? t("update.error.unknown")
   }
 }

package/src/client/locales.ts

@@ -102,6 +102,8 @@ export const zh = {
   'update.error.notFound': '未找到 dsh-web-ui 聚合包安装，无法更新。',
   'update.error.link': '当前为本地开发模式（链接安装），无法自动更新。',
   'update.error.pnpmFailed': '更新执行失败（pnpm 退出码 {code}），详见下方输出。',
+  'update.error.stale': '更新命令已执行，但安装版本未变化。常见原因：pnpm 11 的 minimumReleaseAge 门禁会静默跳过发布不足 24 小时的新版本。请在 profile 目录（~/.dsh/profiles/<profile>）的 pnpm-workspace.yaml 中配置 minimumReleaseAgeExclude（例如 "@linxin666/*"）或 minimumReleaseAge: 0 后重新点击更新。',
+  'update.error.verifyFailed': '更新命令已执行，但无法核对安装后的版本（可能是 registry 探测失败或安装路径变化）。请查看下方输出，或稍后重试。',
   'update.error.unknown': '更新失败，请重试。',
 } satisfies Record<string, string>
 
@@ -213,5 +215,7 @@ export const en = {
   'update.error.notFound': 'The dsh-web-ui aggregate package is not installed; nothing to update.',
   'update.error.link': 'Local development mode (link install) — automatic update is unavailable.',
   'update.error.pnpmFailed': 'The update failed (pnpm exited with code {code}); see the output below.',
+  'update.error.stale': 'The update command ran but the installed versions did not change. Likely cause: the pnpm 11 minimumReleaseAge gate silently skips releases published less than 24 hours ago. Add minimumReleaseAgeExclude (e.g. "@linxin666/*") or set minimumReleaseAge: 0 in pnpm-workspace.yaml under the profile directory (~/.dsh/profiles/<profile>), then run the update again.',
+  'update.error.verifyFailed': 'The update command ran but the installed versions could not be verified afterwards (registry probe failed or the install path changed). Inspect the output below, or retry later.',
   'update.error.unknown': 'Update failed; try again.',
 } satisfies Record<RemoteKey, string>

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

@@ -121,6 +121,9 @@
   margin: 0;
   font-size: 12px;
   line-height: 1.5;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .discard,

package/src/client/settings-form.ts

@@ -20,6 +20,14 @@ export type FieldWrite =
 export interface FieldSpec {
   /** Field name inside the namespace section. */
   field: string
+  /**
+   * Whether the Host treats this field as a secret and redacts its value from
+   * the read-back (role('secret') in the section schema). Redacted secrets are
+   * never compared against the draft on save; the field lands when the scope
+   * reports the write succeeded (its secret-set marker under the bridge), so
+   * a successful secret save is not misreported as failed.
+   */
+  secret?: boolean
   /** Render a stored value as draft text; the empty string when the section carries none. */
   format: (value: unknown) => string
   /**
@@ -61,6 +69,12 @@ export interface CardShell {
   saving: boolean
   /** Whether the last save did not land as staged; cleared by the next edit or save. */
   failed: boolean
+  /**
+   * The rejection code/message the Host returned for the last failed save,
+   * surfaced next to the generic failure text. Undefined while no save has
+   * failed (or the failure carried no server reason).
+   */
+  failedReason?: string
 }
 
 /** The write actions the card's slot entry injects. */
@@ -87,10 +101,52 @@ interface StagedEdit {
 interface PlannedWrite {
   /** Field this entry writes. */
   field: string
+  /** The durable write this entry performs, described for a batched scope. */
+  op: BatchedWrite
   /** Perform the write and report whether the Host holds the staged value afterwards. */
   run: (() => Promise<boolean>) | undefined
 }
 
+/** One durable write a batched settings scope performs. */
+export interface BatchedWrite {
+  /** Field this entry writes. */
+  field: string
+  /** set stores a value; unset drops the leaf. */
+  op: 'set' | 'unset'
+  /** Value for op set (absent for unset). */
+  value?: unknown
+}
+
+/** Per-field outcome of one batched scope write. */
+export interface BatchedFieldResult {
+  /** Field this entry writes. */
+  field: string
+  /** Whether the Host accepted this field's write (per the read-back view). */
+  landed: boolean
+}
+
+/**
+ * Result of a batched scope write. The bridge scope posts every planned write
+ * in one /mutate so the Host validate hook judges baseURL+model together; a
+ * batched refusal fails the whole save rather than per-field.
+ */
+export interface BatchResult {
+  /** Whether the whole mutate was accepted. */
+  ok: boolean
+  /** Per-field success, in the request order (always present when ok). */
+  fields: BatchedFieldResult[]
+  /** Host rejection code (mutate refused). */
+  code?: string
+  /** Host rejection message (mutate refused). */
+  message?: string
+}
+
+/** The optional batch surface the bridge scope adds over the SettingsScope contract. */
+interface BatchedSettingsScope {
+  /** Write every operation in one scope mutation, reporting per-field success. */
+  mutate: (writes: BatchedWrite[]) => Promise<BatchResult>
+}
+
 /** Constraints a numeric field's accepted drafts must satisfy, mirroring the host schema. */
 export interface NumberConstraints {
   /** The accepted value must be a whole number. */
@@ -129,6 +185,16 @@ export function textField(field: string): FieldSpec {
   }
 }
 
+/**
+ * A free-text field the Host treats as a secret and redacts from the read-back
+ * (role('secret') in the section schema). The card still edits it like text,
+ * but a save never compares the redacted value back and relies on the scope
+ * reporting the write landed.
+ */
+export function secretField(field: string): FieldSpec {
+  return { ...textField(field), secret: true }
+}
+
 /** A boolean field, edited through true/false draft text. */
 export function booleanField(field: string): FieldSpec {
   return {
@@ -170,6 +236,7 @@ export class CardForm<T> {
   private readonly listeners = new Set<() => void>()
   private saving = false
   private failed = false
+  private failedReason: string | undefined
 
   /** @param scope - the bound settings scope for this card's namespace. */
   constructor(
@@ -199,6 +266,7 @@ export class CardForm<T> {
       invalid: plan.some(item => item.run === undefined),
       saving: this.saving,
       failed: this.failed,
+      ...this.failedReason === undefined ? {} : { failedReason: this.failedReason },
     }
   }
 
@@ -229,6 +297,7 @@ export class CardForm<T> {
         if (this.staged.size === 0 && !this.failed) return
         this.staged.clear()
         this.failed = false
+        this.failedReason = undefined
         this.publish()
       },
     }
@@ -236,30 +305,57 @@ export class CardForm<T> {
 
   /**
    * Write every staged edit, then re-seed from what the Host accepted.
+   *
+   * When the scope carries the optional batch surface (the dsh-web-ui
+   * bridge scope), every planned write rides one mutation so cross-field
+   * validate hooks (baseURL+model) judge the batch as a unit instead of
+   * deadlocking on per-field writes. Otherwise the per-field loop runs.
+   * A field lands only when the Host reports it held the staged value; a
+   * landed field's draft is dropped, a failed one stays staged for the user.
    * @returns settlement after every write and the read-back.
    */
   async save(): Promise<void> {
     const plan = this.plan()
-    const writes = plan.flatMap(item => item.run === undefined ? [] : [item.run])
-    if (plan.length === 0 || this.saving || writes.length !== plan.length) return
+    const valid = plan.filter(item => item.run !== undefined)
+    if (plan.length === 0 || this.saving || valid.length !== plan.length) return
+    const plannedWrites = valid.map(item => item.op)
     // Snapshot the fields this save writes, so edits staged while it is in
     // flight survive: only the staged keys this save actually wrote are cleared.
     const fields = new Set(plan.map(item => item.field))
     this.saving = true
     this.failed = false
+    this.failedReason = undefined
     this.publish()
-    let landed = true
-    for (const write of writes) {
-      landed = await write() && landed
+    const landed = new Set<string>()
+    const batch = this.batchedScope()
+    if (batch !== undefined) {
+      const result = await batch.mutate(plannedWrites)
+      if (result.ok) {
+        for (const field of result.fields) {
+          if (field.landed) landed.add(field.field)
+        }
+      } else {
+        this.failedReason = result.message
+      }
+    } else {
+      for (const item of valid) {
+        if (await item.run!()) landed.add(item.field)
+      }
     }
-    if (landed) {
-      for (const field of fields) this.staged.delete(field)
+    for (const field of fields) {
+      if (landed.has(field)) this.staged.delete(field)
     }
     this.saving = false
-    this.failed = !landed
+    this.failed = landed.size !== fields.size
     this.publish()
   }
 
+  /** The scope's batch surface when it supports one; undefined conservatively otherwise. */
+  private batchedScope(): BatchedSettingsScope | undefined {
+    const candidate = this.scope as unknown as BatchedSettingsScope | undefined
+    return typeof candidate?.mutate === 'function' ? candidate : undefined
+  }
+
   /**
    * Every staged edit a save would write. An entry whose draft is not a value
    * its field accepts carries no write: the form is still dirty, and the save
@@ -272,14 +368,14 @@ export class CardForm<T> {
     for (const [field, staged] of this.staged) {
       const spec = this.specOf(field)
       if (staged.clear) {
-        if (this.stored(field)) plan.push({ field, run: () => this.clear(field) })
+        if (this.stored(field)) plan.push({ field, op: { field, op: 'unset' }, run: () => this.clear(field) })
         continue
       }
       if (staged.text === spec.format(this.sectionValue(field))) continue
       const write = spec.parse(staged.text)
-      if (write === undefined) plan.push({ field, run: undefined })
-      else if (write.kind === 'clear') plan.push({ field, run: () => this.clear(field) })
-      else plan.push({ field, run: () => this.store(field, write.value) })
+      if (write === undefined) plan.push({ field, op: { field, op: 'unset' }, run: undefined })
+      else if (write.kind === 'clear') plan.push({ field, op: { field, op: 'unset' }, run: () => this.clear(field) })
+      else plan.push({ field, op: { field, op: 'set', value: write.value }, run: () => this.store(field, write.value) })
     }
     return plan
   }
@@ -291,12 +387,18 @@ export class CardForm<T> {
 
   private async store(field: string, value: unknown): Promise<boolean> {
     await this.scope.set(field, value)
+    // A redacted secret never appears in the user layer read-back; judging it
+    // by value would misreport a successful secret save as failed. The bridge
+    // reports secret writes through its secret-set markers (batch path); on
+    // the per-field path the scope resolved, so the write is landed.
+    if (this.specOf(field).secret) return true
     return this.userLayer()?.[field] === value
   }
 
   private stage(field: string, edit: StagedEdit): void {
     this.staged.set(field, edit)
     this.failed = false
+    this.failedReason = undefined
     this.publish()
   }
 

package/src/index.ts

@@ -27,7 +27,7 @@ import {
   fetchLatestVersion,
   resolveAnchorManifest,
   resolveUpdateTarget,
-  runUpdate,
+  runUpdateVerified,
   type UpdateRunResult,
 } from './update.ts'
 import { makeUpdateRoutes } from './update-routes.ts'
@@ -238,19 +238,26 @@ export function apply(ctx: Context, config?: Config): void {
   }
   // ── remote update ────────────────────────────────────────────────────────
   // The dsh-web-ui self-update surface: probe the npm registry for family
-  // releases and run `pnpm update` in the owning profile. Resolutions anchor
-  // on the host process's own module graph, so the update always targets the
-  // profile the running web GUI was booted from. The probe path resolves once
-  // (the anchor stays the same package across updates); versions are re-read
-  // from disk per check.
+  // releases and run `pnpm update --latest` in the owning profile. Resolutions
+  // anchor on the host process's own module graph, so the update always
+  // targets the profile the running web GUI was booted from. The anchor path
+  // is re-resolved per operation: pnpm removes the old version's .pnpm
+  // directory on update, so a boot-time captured path would fail to read
+  // after a successful update; versions are re-read from disk per check.
   const requireFromHost = createRequire(import.meta.url)
-  const anchorManifestPath = resolveAnchorManifest(specifier => requireFromHost.resolve(specifier))
+  const resolveAnchorPath = (): string | undefined => resolveAnchorManifest(specifier => {
+    try {
+      return requireFromHost.resolve(specifier)
+    } catch {
+      return undefined
+    }
+  })
   const updateRoutes = makeUpdateRoutes({
     // Control endpoints are host-surface only: a LAN/phone origin must never
     // trigger a real install on this machine.
     fence: request => isTrustedApiRequest(request, []),
     check: () => checkUpdates({
-      anchorManifestPath,
+      anchorManifestPath: resolveAnchorPath(),
       resolve: specifier => {
         try {
           return requireFromHost.resolve(specifier)
@@ -261,7 +268,7 @@ export function apply(ctx: Context, config?: Config): void {
       fetchLatest: name => fetchLatestVersion(name, fetch),
     }),
     run: async (): Promise<UpdateRunResult> => {
-      const target = resolveUpdateTarget({ anchorManifestPath })
+      const target = resolveUpdateTarget({ anchorManifestPath: resolveAnchorPath() })
       if ('error' in target) {
         const code = target.error
         return {
@@ -272,7 +279,24 @@ export function apply(ctx: Context, config?: Config): void {
           errorCode: code,
         }
       }
-      return runUpdate({ profileDir: target.profileDir, packages: target.packages })
+      // Verify the versions actually moved after a green pnpm exit: the pnpm
+      // 11 minimumReleaseAge gate can silently keep the installed versions
+      // (same-day releases), which a plain exit-0 check would report as
+      // success — the user then restarts and nothing changed.
+      return runUpdateVerified({
+        run: { profileDir: target.profileDir, packages: target.packages },
+        check: {
+          anchorManifestPath: resolveAnchorPath(),
+          resolve: specifier => {
+            try {
+              return requireFromHost.resolve(specifier)
+            } catch {
+              return undefined
+            }
+          },
+          fetchLatest: name => fetchLatestVersion(name, fetch),
+        },
+      })
     },
   })
   const routes = [

package/src/mobile-api.ts

@@ -103,10 +103,23 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
   const { service, apiProxy, mobileEnterToSend } = deps
   const eventsHeartbeatMs = deps.eventsHeartbeatMs ?? DEFAULT_EVENTS_HEARTBEAT_MS
 
+  /**
+   * Refresh the paired device's presence and report whether it is live.
+   * The mobile surface (unlike the desktop Web UI) has no `/api/pair/heartbeat`
+   * sender, so any activity on the mobile channel — a gated RPC, or the live
+   * SSE stream staying open — must count as presence. Without this, an
+   * idle-but-connected phone ages past `offlineAfterMs` and the desktop panel
+   * wrongly reports it as disconnected.
+   */
+  const touchDeviceFor = (req: IncomingMessage): boolean => {
+    const deviceId = readCookie(req.headers.cookie, service.config.cookieName)
+    if (deviceId === undefined) return false
+    return service.touchDevice(deviceId)
+  }
+
   /** The phone gate: a live paired-device cookie, or nothing else proceeds. */
   const gateOk = (req: IncomingMessage): boolean => {
-    const deviceId = readCookie(req.headers.cookie, service.config.cookieName)
-    return deviceId !== undefined && service.hasDevice(deviceId)
+    return touchDeviceFor(req)
   }
 
   const writeJson = (res: ServerResponse, status: number, body: unknown): void => {
@@ -190,6 +203,10 @@ export function makeMobileApiRoutes(deps: MobileApiDeps): WebRoute[] {
     let closed = false
     const heartbeat = setInterval(() => {
       if (closed) return
+      // An open SSE stream proves the phone is still live even while the agent
+      // idles (no RPC traffic), so refresh presence alongside the transport
+      // keepalive — otherwise an idle phone drifts to "disconnected".
+      touchDeviceFor(req)
       try {
         res.write(': ping\n\n')
       } catch {

package/src/mobile-routes.ts

@@ -19,6 +19,11 @@ function mobileBundlePath(): string {
   return fileURLToPath(new URL('../lib/mobile.js', import.meta.url))
 }
 
+/** The apple-touch-icon shipped with the package (iOS home-screen icon, 180x180 PNG). */
+function appleTouchIconPath(): string {
+  return fileURLToPath(new URL('../assets/apple-touch-icon.png', import.meta.url))
+}
+
 /** The mobile page shell: minimal, offline-safe, no external assets. */
 function pageHtml(bundleUrl: string): string {
   return [
@@ -29,6 +34,10 @@ function pageHtml(bundleUrl: string): string {
     '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">',
     '<meta name="theme-color" content="#f3f5f9">',
     '<meta name="referrer" content="no-referrer">',
+    // iOS "Add to Home Screen" uses apple-touch-icon for the tile icon;
+    // the PNG ships with the package (opaque background — iOS composites
+    // transparency onto black, so the icon avoids transparent regions).
+    '<link rel="apple-touch-icon" href="/m/apple-touch-icon.png">',
     '<title>移动端远程控制</title>',
     '</head>',
     '<body>',
@@ -49,6 +58,16 @@ function writeStatic(res: ServerResponse, status: number, type: string, body: st
   res.end(body)
 }
 
+/** Send the PNG icon as a binary body (unlike text assets, the PNG must not be decoded to utf-8). */
+function writePng(res: ServerResponse, status: number, body: Buffer): void {
+  res.writeHead(status, {
+    'content-type': 'image/png',
+    'cache-control': 'public, max-age=31536000, immutable',
+    'referrer-policy': 'no-referrer',
+  })
+  res.end(body)
+}
+
 /**
  * Build the mobile page routes.
  * @returns the two exact routes to register on webServer.
@@ -70,8 +89,22 @@ export function makeMobileRoutes(): WebRoute[] {
       writeStatic(res, 500, 'text/plain', 'failed to read the mobile bundle')
     }
   }
+  const handleIcon = async (_req: IncomingMessage, res: ServerResponse): Promise<void> => {
+    const path = appleTouchIconPath()
+    if (!existsSync(path)) {
+      writeStatic(res, 404, 'text/plain', 'apple-touch-icon not found')
+      return
+    }
+    try {
+      const body = await readFile(path)
+      writePng(res, 200, body)
+    } catch {
+      writeStatic(res, 500, 'text/plain', 'failed to read the apple-touch-icon')
+    }
+  }
   return [
     { kind: 'exact', path: '/m', handler: handlePage },
     { kind: 'exact', path: '/m/mobile.js', handler: handleBundle },
+    { kind: 'exact', path: '/m/apple-touch-icon.png', handler: handleIcon },
   ]
 }