dsh-zen-remote 2.3.5 → 2.3.7

package/src/client/settings/SettingsSection.tsx

@@ -45,6 +45,7 @@ import {
   ADMIN_STATUS_ROUTE,
   CLIENT_CLAIM_ROUTE,
   CLIENT_CONFIG_ROUTE,
+  CLIENT_DEBUG_REPORT_ROUTE,
   CLIENT_RECONNECT_ROUTE,
   CLIENT_STATUS_ROUTE,
   claimDeviceNameOf,
@@ -58,6 +59,8 @@ import {
 } from '../../client-data/settings-form.ts'
 import { bridgeSectionState, togglePluginConsent } from '../../client-data/plugin-bridge.ts'
 import type { PluginBridgeStatusView } from '../../client-data/plugin-bridge.ts'
+import { CURRENT_SESSION_STORAGE_KEY, parseCurrentSessionStorage } from '../../client-data/current-session.ts'
+import { isRemoteSessionId } from '../../client-data/remote-drop.ts'
 import type {
   AdminStatusBody,
   ClaimRouteBody,
@@ -139,6 +142,45 @@ async function postJson(url: string, payload: Record<string, unknown>): Promise<
   }
 }
 
+/** CU-4: the export's download name, `zen-remote-debug-<role>-<yyyymmdd-hhmm>.json`,
+ * stamped in the browser's local time (the file is for the user's own
+ * folder; the report's `_meta.generatedAt` carries the exact UTC instant). */
+function debugExportFileName(role: 'host' | 'client', now: Date): string {
+  const pad = (n: number): string => String(n).padStart(2, '0')
+  const stamp = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}-${pad(now.getHours())}${pad(now.getMinutes())}`
+  return `zen-remote-debug-${role}-${stamp}.json`
+}
+
+/** CU-4: one transient notice for the export's outcome — the same inline-
+ * styled overlay habit the remote-drop guard's folder toast uses (styles
+ * stay inline: nothing of this goes into pwa/app.css or the style sheets),
+ * one at a time, gone after 3 s, never intercepting taps. */
+let debugToast: HTMLDivElement | undefined
+let debugToastTimer: number | undefined
+function showDebugToast(text: string): void {
+  if (debugToastTimer !== undefined) window.clearTimeout(debugToastTimer)
+  debugToast?.remove()
+  const el = document.createElement('div')
+  el.dataset.zenRemote = 'debug-export-toast'
+  el.textContent = text
+  el.style.cssText = [
+    'position:fixed', 'left:50%', 'transform:translateX(-50%)',
+    'bottom:calc(env(safe-area-inset-bottom, 0px) + 32px)',
+    'z-index:2147483000',
+    'background:rgba(0,0,0,.82)', 'color:#fff',
+    'font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
+    'padding:10px 16px', 'border-radius:10px', 'max-width:90vw', 'text-align:center',
+    'pointer-events:none',
+  ].join(';')
+  document.body.appendChild(el)
+  debugToast = el
+  debugToastTimer = window.setTimeout(() => {
+    el.remove()
+    if (debugToast === el) debugToast = undefined
+    debugToastTimer = undefined
+  }, 3000)
+}
+
 export function SettingsSection(props: SettingsSectionProps) {
   // The summary view is a one-liner only — it must not even fetch
   // admin/status, so every hook (and the fetch) lives in the page component.
@@ -228,6 +270,8 @@ function SettingsSectionPage({ config, shares, t }: SettingsSectionProps) {
   // JS dialog methods, so renames edit inline).
   const [renaming, setRenaming] = useState<{ id: string, draft: string } | null>(null)
   const [pushTest, setPushTest] = useState<PushTest>({ state: 'idle' })
+  // CU-4: the debug export's in-flight marker.
+  const [debugBusy, setDebugBusy] = useState(false)
 
   // The client group's pairing form (T16). The address prefills from the row
   // (once the shared form's document is served) until the user types into it;
@@ -571,6 +615,48 @@ function SettingsSectionPage({ config, shares, t }: SettingsSectionProps) {
     setPushTest(result.ok ? { state: 'ok', sent: result.sent, failed: result.failed } : { state: 'fail' })
   }
 
+  // CU-4 导出诊断信息: the backend's redacted report (both roles answer
+  // their own), merged with the two facts only THIS page can read — the
+  // attachment-entry guard's browser-side counters and whether the session
+  // open right now is a remote one — then downloaded as one JSON file. The
+  // browser plate carries counters and a boolean, nothing else: no session
+  // id, no storage dump.
+  const runDebugExport = async (): Promise<void> => {
+    setDebugBusy(true)
+    try {
+      const res = await fetch(CLIENT_DEBUG_REPORT_ROUTE)
+      if (!res.ok) throw new StatusError(res.status)
+      const report = await res.json() as Record<string, unknown>
+      let remote = false
+      try {
+        const current = parseCurrentSessionStorage(window.localStorage.getItem(CURRENT_SESSION_STORAGE_KEY))
+        remote = current.kind === 'open' && isRemoteSessionId(current.sessionId)
+      } catch { /* storage unreadable: report not-remote */ }
+      const merged = {
+        ...report,
+        browser: {
+          remoteDrop: remoteDropDiagnostics(),
+          currentSession: { remote },
+        },
+      }
+      const blob = new Blob([`${JSON.stringify(merged, null, 2)}\n`], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      const anchor = document.createElement('a')
+      anchor.href = url
+      anchor.download = debugExportFileName(clientRole ? 'client' : 'host', new Date())
+      document.body.appendChild(anchor)
+      anchor.click()
+      anchor.remove()
+      // Revoked on the next tick: some engines start the download only
+      // after the click handler returns.
+      window.setTimeout(() => { URL.revokeObjectURL(url) }, 0)
+      showDebugToast(t('settings.debug.done'))
+    } catch {
+      showDebugToast(t('settings.debug.fail'))
+    }
+    setDebugBusy(false)
+  }
+
   // --- client group (T16) ----------------------------------------------------
 
   // The address prefill reads the row's stored serverUrl while the user has
@@ -1201,9 +1287,10 @@ function SettingsSectionPage({ config, shares, t }: SettingsSectionProps) {
                   )}
                 </>
               )}
-              {/* RD-3: the remote drop guard's own line — installed state
-                  plus the five counters. Browser-side values, so unlike the
-                  rows above it never rides the client/status body. */}
+              {/* RD-3: the attachment-entry guard's own line — installed state
+                  plus the five counters, with the per-entry split below it
+                  (AU-2: drop / picker / paste). Browser-side values, so unlike
+                  the rows above it never rides the client/status body. */}
               {(dropDiag.installed || dropDiag.notInstalledReason !== undefined) && (
                 <div className="zr-settings-field">
                   <div className="zr-settings-head">
@@ -1220,6 +1307,18 @@ function SettingsSectionPage({ config, shares, t }: SettingsSectionProps) {
                       })
                       : t('settings.client.diagRemoteDropOff', { reason: dropDiag.notInstalledReason ?? '—' })}
                   </p>
+                  {dropDiag.installed && (
+                    <p className="zr-settings-hint">
+                      {t('settings.client.diagRemoteDropEntries', {
+                        dropI: dropDiag.interceptedBy.drop,
+                        pickerI: dropDiag.interceptedBy.picker,
+                        pasteI: dropDiag.interceptedBy.paste,
+                        dropP: dropDiag.passthroughBy.drop,
+                        pickerP: dropDiag.passthroughBy.picker,
+                        pasteP: dropDiag.passthroughBy.paste,
+                      })}
+                    </p>
+                  )}
                 </div>
               )}
               {/* RD-6: the upload-redirect (fetch-route intercept) line — rides
@@ -1300,6 +1399,24 @@ function SettingsSectionPage({ config, shares, t }: SettingsSectionProps) {
           )}
         </div>
       )}
+
+      {/* CU-4: the diagnostics export — the very bottom of the page, on
+          BOTH roles (a host's report has its own value: the gateway plate),
+          outside the form frame so it works while the namespace is
+          read-only. Existing classes only: no new style rules anywhere. */}
+      <div className="zr-settings-card">
+        <div className="zr-settings-field">
+          <div className="zr-settings-head">
+            {/* The row's control is a Button (not labelable): a span, not a control-less label. */}
+            <span className="zr-settings-head-title">{t('settings.debug.title')}</span>
+            <span style={{ flex: 1 }} />
+            <Button variant="outline" size="sm" disabled={debugBusy} onClick={() => { void runDebugExport() }}>
+              {debugBusy ? t('settings.debug.exporting') : t('settings.debug.export')}
+            </Button>
+          </div>
+          <p className="zr-settings-hint">{t('settings.debug.hint')}</p>
+        </div>
+      </div>
     </div>
   )
 }

package/src/client/styles/content.css.ts

@@ -84,15 +84,25 @@ export const CONTENT_CSS = `/* ---------- chat markdown content (< 768px) ------
     max-width: none !important;
   }
 
-  /* Turn-tail metadata (2026-08-18): the timing stats ("18:06 · 用时 29秒 ·
-     首 token 0.9秒 · 163 tok/s") are desktop-hover-revealed (official
-     [data-time-hover-root] gate holds them at opacity 0 until :hover /
-     :focus-within) — a phone never hovers, so they were simply invisible;
-     and even ignoring that, the row is nowrap + overflow:hidden (plus this
-     plugin's own legacy ellipsis clamp in layout.css.ts), which clipped the
-     text. On phones: always visible, own full-width line under the action
-     icons, wrapping freely, one type size down. !important + the extra
-     [class$="_actions"] hop out-specifies both upstream and layout.css.ts. */
+  /* Turn-tail metadata (2026-08-18; reshaped 2026-10-30 for DSH 0.2.x): the
+     tail's 24h clock is desktop-hover-revealed (official
+     [data-time-hover-root] gate holds it at opacity 0 until :hover /
+     :focus-within) — a phone never hovers, so it was simply invisible; and
+     the row is a fixed-height nowrap + overflow:hidden flex line (plus this
+     plugin's own clamp in layout.css.ts), which clipped it.
+
+     DSH 0.2.x (MessageIconActions, dsh-client-ui-chat) groups the usage
+     button (TurnUsagePanel) and the clock (_timeEnd) inside ONE inline-flex
+     _endInfo (min-width: 0; align-items: center; gap: 8px; margin-left: 8px)
+     that never wraps internally. The 0.1.x-era rule here gave _timeEnd
+     flex-basis: 100% + white-space: normal — inside _endInfo that no longer
+     reads as "own full-width line", it reads as "shrink to nothing and
+     break", and with the transcript-wide overflow-wrap: anywhere above,
+     "18:06" rendered as two lines. On phones now: always visible; the row
+     may grow in height and wrap; _endInfo drops to the next line as one
+     unit when icons + usage + clock do not fit; the clock itself never
+     shrinks or breaks. !important + the extra [class$="_actions"] hop
+     out-specifies both upstream and layout.css.ts. */
   /* Pin the tail row's width chain before allowing wrap: with wrap enabled
      the row's intrinsic (shrink-to-fit) width collapses to its widest
      single icon, taking the whole tail down to ~16px. */
@@ -100,9 +110,26 @@ export const CONTENT_CSS = `/* ---------- chat markdown content (< 768px) ------
   [data-chat-flow-kind="turn-tail"] [class$="_actions"] {
     width: 100%;
   }
+  /* height: auto releases the upstream fixed height: calc(28px + …);
+     overflow: visible beats layout.css.ts's overflow: hidden (same
+     specificity — this file is concatenated last, so it wins the tie). A
+     wrapped second line must not be cut off vertically; min-height keeps
+     the one-line case at the upstream height so nothing shifts when it
+     fits. */
   [data-chat-flow-kind="turn-tail"] [class$="_actions"] {
     flex-wrap: wrap;
     row-gap: 2px;
+    height: auto !important;
+    min-height: 28px;
+    overflow: visible !important;
+  }
+  /* _endInfo moves as a whole: flex: none so the usage + clock group is
+     never asked to shrink — when the row is too narrow the entire group
+     wraps to the next line instead of compressing the clock inside it.
+     max-width keeps an unusually long usage label inside the column. */
+  [data-chat-flow-kind="turn-tail"] [class$="_actions"] [class$="_endInfo"] {
+    flex: none;
+    max-width: 100%;
   }
   /* Wide companion to the rule below: mirrors the upstream hover-gate
      selector shape directly, with no assumptions about the tail's DOM
@@ -113,13 +140,16 @@ export const CONTENT_CSS = `/* ---------- chat markdown content (< 768px) ------
     opacity: 1 !important;
     transition: none !important;
   }
+  /* overflow-wrap / word-break: normal undo the [data-chat-flow]
+     overflow-wrap: anywhere inherited from the top of this block — that is
+     the rule that let "18:06" break between digits once its box was
+     squeezed. */
   [data-chat-flow-kind="turn-tail"] [class$="_actions"] [class$="_timeEnd"] {
     opacity: 1 !important;
-    flex-basis: 100% !important;
-    white-space: normal !important;
-    overflow: visible !important;
-    text-overflow: clip !important;
-    padding-left: 0 !important;
+    flex: none !important;
+    white-space: nowrap !important;
+    overflow-wrap: normal !important;
+    word-break: normal !important;
     font-size: 12px;
     line-height: 18px;
   }

package/src/client/styles/layout.css.ts

@@ -139,12 +139,18 @@ export const LAYOUT_CSS = `/* ---------- mobile-only layout ---------- */
   [data-phase] [class$="_actions"] {
     overflow: hidden !important;
   }
+  /* The 24h clock ("18:06" / "MM-DD 18:06") is a fixed-size item: it must
+     never be the thing that shrinks. DSH 0.2.x wraps it with the usage
+     button in an inline-flex _endInfo (min-width: 0), so a shrinkable
+     time (the old flex: 0 1 auto + min-width: 0) got squeezed inside that
+     non-wrapping box and "18:06" broke into two lines. flex: none pins its
+     width; the turn-tail rules in content.css.ts let _endInfo wrap as a
+     whole instead. */
   [data-phase] [class$="_actions"] [class$="_timeEnd"] {
-    flex: 0 1 auto !important;
-    min-width: 0 !important;
+    flex: none !important;
+    white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
-    white-space: nowrap !important;
   }
 
   [data-phase] [class$="_scroll"]:has(p) {

package/src/client/styles/misc.css.ts

@@ -125,4 +125,42 @@ export const MISC_CSS = `  /* ---------- hero composer on mobile ----------
     display: none !important;
   }
 }
+
+/* ---------- tablet standalone PWA: pay the safe area above 1023px ---------- */
+/* The gateway serves viewport-fit=cover to every non-desktop device (see
+   coverViewport in lan-gate-server), phone-chrome only manages the meta at
+   <=1023px, and every compensation rule in layout.css lives behind the same
+   1023px breakpoint and the data-mobile-nav frame marker MobileNavOverlay
+   only sets there. A wide tablet's home-screen PWA — iPad landscape, the
+   12.9"/13" iPad portrait at exactly 1024, Android tablets — therefore
+   painted under the status bar with nothing paying the inset: the top row
+   of controls sat in the system area and was hard to tap.
+
+   Anchor: the official AppFrame (ui-layout AppFrame.tsx) is the direct
+   parent of the [data-shell-overlay] layer — the same element
+   MobileNavOverlay's findFrame() resolves — and the frame already pads
+   ITSELF for the Windows titlebar (padding-top: --dsh-windows-titlebar-height
+   in AppFrame.module.css), so padding the frame is the host's own pattern
+   for system bars.
+
+   Structural no-op everywhere else, by construction:
+   - display-mode: standalone matches only an installed PWA; desktop
+     browsers report browser.
+   - The Electron app never receives this stylesheet at all (the
+     isDesktopShell gate in client/index.tsx) and never gets cover.
+   - env() insets are hard 0 in every desktop browser, so even a browser
+     that somehow matched the media query computes 0px padding; on iPads
+     the bottom inset is 0 too (no home indicator) — the bottom line only
+     ever pays out on Android tablets with a gesture/nav bar.
+   box-sizing is load-bearing (the S2.1 lesson, see the frame rule in
+   layout.css): the official frame is height:100% content-box, and padding
+   without border-box would grow it past the viewport instead of reserving
+   the strip. Pinned by scripts/check-tablet-safe-area.mjs. */
+@media (min-width: 1024px) and (display-mode: standalone) {
+  :has(> [data-shell-overlay]) {
+    box-sizing: border-box !important;
+    padding-top: var(--mnav-sat) !important;
+    padding-bottom: var(--mnav-sab) !important;
+  }
+}
 `

package/src/client-data/remote-drop.ts

@@ -125,3 +125,106 @@ export function decideRemoteDrop(input: RemoteDropInput): RemoteDropDecision {
 export function rewrapFiles(files: Iterable<File>): File[] {
   return Array.from(files, (file) => new File([file], file.name, { type: file.type, lastModified: file.lastModified }))
 }
+
+// ---------------------------------------------------------------------------
+// AU-1: the intake decision — the same three gates extended to the picker
+// (hidden file input's `change`) and paste entries. issue #49: the drop guard
+// alone left those two entries on the zero-copy path chip, so a REMOTE
+// session's attachment named a file on the sub-client's disk. The decision
+// keeps the drop semantics frozen in `decideRemoteDrop` (its truth table is a
+// regression pin) and answers the two new entries here, where the fix's
+// minimal-intervention rule can be expressed: only a file that CARRIES a path
+// and is NOT an image takes the bad zero-copy branch (addFiles), so only
+// those are worth intercepting — pathless and image files already upload
+// bytes and must stay untouched.
+// ---------------------------------------------------------------------------
+
+/** Which entry an intake item arrived through. `drop` keeps the redispatch
+ * semantics of {@link decideRemoteDrop} (any file intervenes); `picker` /
+ * `paste` intervene only on the path-carrying non-image files. */
+export type RemoteIntakeEntry = 'drop' | 'picker' | 'paste'
+
+/** One intake item, reduced to what the decision needs. `hasPath` is the
+ * bridge's `pathFor(file) !== ''` — the same fact the host's zero-copy
+ * branch keys on; `isImage` is `file.type` starting with `image/` (the
+ * host's own image classification). A `paste` item with no file behind it
+ * never becomes a descriptor (the effect only collects `kind: 'file'`
+ * clipboard items), so plain-text paste arrives as an EMPTY list. */
+export interface RemoteIntakeDescriptor {
+  entry: RemoteIntakeEntry
+  isDirectory: boolean
+  hasPath: boolean
+  isImage: boolean
+}
+
+/** Everything the intake decision may look at — the same three gates as
+ * {@link decideRemoteDrop}, injectable so no DOM is needed. */
+export interface RemoteIntakeInput {
+  /** `__DSH_HOST_PATHS__` exists — the Electron preload's zero-copy bridge. */
+  hasHostPaths: boolean
+  /** The currently open session id, or `undefined` when no signal. */
+  currentSessionId: string | undefined
+  /** `event.isTrusted` — the re-entry guard for our redispatched events. */
+  trusted: boolean
+  /** Descriptor per collected file. `undefined` means the caller could not
+   * even enumerate the items — with no inventory there is nothing safe to
+   * judge, so this passes through (today's behavior). */
+  items: readonly RemoteIntakeDescriptor[] | undefined
+}
+
+export type RemoteIntakeAction = 'passthrough' | 'redirect' | 'block-directories'
+
+/** Stable machine-readable why, one per branch, ordered by the gate sequence
+ * in {@link decideRemoteIntake}. */
+export type RemoteIntakeReason =
+  | 'untrusted-event'
+  | 'no-host-paths'
+  | 'not-remote-session'
+  | 'no-entry-api'
+  | 'contains-directory'
+  | 'no-files'
+  | 'no-path-or-image-only'
+  | 'remote-path-files'
+
+export interface RemoteIntakeDecision {
+  action: RemoteIntakeAction
+  reason: RemoteIntakeReason
+}
+
+/**
+ * The three gates, then the intervention rule. The gates are decideRemoteDrop's
+ * verbatim (all must affirmatively pass — a missing signal reads as local and
+ * never intervenes); the rule after them:
+ * 1. `items === undefined` — no inventory, pass through (`no-entry-api`;
+ *    deciding blind could eat a working flow);
+ * 2. any directory — `block-directories`, ahead of every redirect: a folder
+ *    cannot be fixed by single-file upload, the whole intake is stopped with
+ *    a toast (same semantics as the drop branch);
+ * 3. no items at all — passthrough (`no-files`; the plain-text paste shape);
+ * 4. otherwise — `redirect` when ANY item is a `drop` item (the frozen
+ *    "any file intervenes" semantics) or carries a path while not being an
+ *    image (the zero-copy bad branch — exactly what issue #49 broke on);
+ *    `no-path-or-image-only` passthrough when none does.
+ *
+ * Drop-entry parity pin: a `drop` item's intervention semantics here are
+ * kept EQUIVALENT to `decideRemoteDrop` — same gates, directory rule and
+ * "any file intervenes" — with exactly ONE deliberate divergence: when
+ * `items === undefined`, `decideRemoteDrop` redispatches (a drop always has
+ * a Files payload worth re-shaping) while this function passes through
+ * (`no-entry-api` — an intake caller that cannot even enumerate its items
+ * must not be intercepted blind). If either function's gate sequence or
+ * drop-entry rule changes, update the other in the same commit; the truth
+ * tables in scripts/check-remote-drop.mjs pin both sides.
+ */
+export function decideRemoteIntake(input: RemoteIntakeInput): RemoteIntakeDecision {
+  if (!input.trusted) return { action: 'passthrough', reason: 'untrusted-event' }
+  if (!input.hasHostPaths) return { action: 'passthrough', reason: 'no-host-paths' }
+  if (!isRemoteSessionId(input.currentSessionId)) return { action: 'passthrough', reason: 'not-remote-session' }
+  if (input.items === undefined) return { action: 'passthrough', reason: 'no-entry-api' }
+  if (input.items.some((item) => item.isDirectory)) return { action: 'block-directories', reason: 'contains-directory' }
+  if (input.items.length === 0) return { action: 'passthrough', reason: 'no-files' }
+  const intervenes = input.items.some((item) => item.entry === 'drop' || (item.hasPath && !item.isImage))
+  return intervenes
+    ? { action: 'redirect', reason: 'remote-path-files' }
+    : { action: 'passthrough', reason: 'no-path-or-image-only' }
+}

package/src/client-data/settings-form.ts

@@ -97,6 +97,9 @@ export const CLIENT_CLAIM_ROUTE = '/_dsh/zen-remote/client/claim'
 export const CLIENT_STATUS_ROUTE = '/_dsh/zen-remote/client/status'
 /** T43: one immediate reconnect — answered 409 unless the client is offline. */
 export const CLIENT_RECONNECT_ROUTE = '/_dsh/zen-remote/client/reconnect'
+/** CU-4: the redacted diagnostic report (GET, both roles, machine-local only
+ * — a gateway-forwarded fetch is refused server-side). */
+export const CLIENT_DEBUG_REPORT_ROUTE = '/_dsh/zen-remote/client/debug-report'
 
 /** The lightweight client-facing config route (host half, both roles): the
  * settings page's FALLBACK role probe (T17) — it registers wherever a

package/src/client-pairing.ts

@@ -39,6 +39,17 @@ function isHttpAllowedHost(hostname: string): boolean {
   return isAllowedIpv4(hostname)
 }
 
+/**
+ * Whether one hostname sits in a private/loopback network — the same verdict
+ * {@link isHttpAllowedHost} applies inside `normalizeServerUrl`, exported for
+ * the debug report's serverUrl shaper (CU-2): the one place outside the
+ * normalizer that needs the private-network fact, kept here so the address
+ * classes can never drift apart from what pairing actually accepts.
+ */
+export function isPrivateNetworkHost(hostname: string): boolean {
+  return isHttpAllowedHost(hostname)
+}
+
 /** Dotted-quad check against the allowed ranges. The hostname comes from a
  * parsed URL, so it is already canonical (the WHATWG parser folds exotic
  * spellings like `010.0x0A.0.3` into plain decimal before we ever see it). */