dsh-zen-remote 2.3.6 → 2.3.8

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

@@ -1,13 +1,16 @@
 import type { ClientContext } from '../compat/types.ts'
-import { decideRemoteDrop, rewrapFiles } from '../../client-data/remote-drop.ts'
-import type { RemoteDropItemDescriptor } from '../../client-data/remote-drop.ts'
+import { decideRemoteDrop, decideRemoteIntake, isRemoteSessionId, rewrapFiles } from '../../client-data/remote-drop.ts'
+import type { RemoteDropItemDescriptor, RemoteIntakeDescriptor } from '../../client-data/remote-drop.ts'
 import { CURRENT_SESSION_STORAGE_KEY, parseCurrentSessionStorage } from '../../client-data/current-session.ts'
 import { en, zh } from '../locales.ts'
 
 /**
- * The remote-session drop guard (RD-2): a document-level CAPTURE-phase drop
- * listener that re-shapes file drops landing in a remote session before the
- * host's own (bubble-phase, F4) handler sees them.
+ * The remote attachment-entry guard (RD-2 + AU-2): document-level CAPTURE-phase
+ * listeners on the three entries a desktop file reaches the composer through —
+ * the `drop` event, the composer's hidden picker (`change` on the unlabelled
+ * `<input type=file multiple hidden>`), and the editor's `paste` — that
+ * re-shape each intake landing in a remote session before the host's own
+ * handlers see it.
  *
  * The desktop app's zero-copy fast path is the problem: a File dragged from
  * the OS keeps its disk path, the host turns it into an `@/absolute/path`
@@ -22,14 +25,22 @@ import { en, zh } from '../locales.ts'
  * cleanup, busy rejection, directory detection and the addFiles branch all
  * stay the host's own code; nothing downstream is reimplemented here.
  *
- * Gates (all three must pass, decided by RD-1's pure function): the event
+ * Gates (all three must pass, decided by RD-1's pure functions): the event
  * is trusted (our redispatch is untrusted — that alone makes the guard
  * loop-free), the Electron bridge exists (phone / plain-browser hosts are
- * already on the upload branch), and the current session (`dsh.sessions.
+ * already on the upload branch — the mount's capability check declines, so
+ * no listener exists at all there), and the current session (`dsh.sessions.
  * current`, read fresh at event time) is a `zr~` virtual id. A missing
  * signal counts as a local session — the conservative direction: the only
- * misfire a stale signal can cause is uploading bytes for a local drop,
- * never losing one.
+ * misfire a stale signal can cause is uploading bytes for a local intake,
+ * never losing one. The two NEW entries (picker / paste) additionally
+ * intervene only on the zero-copy bad branch — a file that CARRIES a disk
+ * path and is NOT an image; pathless and image files already upload bytes
+ * and pass through untouched (issue #49: only that branch breaks remotely).
+ * Counting is per-entry too: the two NEW entries check the remote gate
+ * BEFORE counting, so everyday local picker/paste traffic never shows up in
+ * the diagnostics; the drop entry keeps its 2.2.6 behavior, where a local
+ * file drop still records one passthrough.
  *
  * Degrades to not-installed when DragEvent / DataTransfer construction is
  * unavailable — back to exactly today's behavior (RD-4's interface.md
@@ -41,26 +52,41 @@ interface StorageLike {
   getItem(key: string): string | null
 }
 
+/** Which entry a counted event came through. */
+type IntakeEntry = 'drop' | 'picker' | 'paste'
+
+export interface RemoteDropEntryCounts {
+  drop: number
+  picker: number
+  paste: number
+}
+
 export interface RemoteDropDiagnostics {
-  /** The listener is mounted and armed (capability check passed, effect
+  /** The listeners are mounted and armed (capability check passed, effect
    * not yet disposed). */
   installed: boolean
   /** Why the capability check declined to install; `undefined` while
    * installed (and after a dispose, which keeps the counters readable). */
   notInstalledReason: string | undefined
-  /** Drops this guard stopped from reaching the host (both the blocked and
-   * the redispatched kind). */
+  /** Intakes this guard stopped from reaching the host (both the blocked and
+   * the redirected kind) — the sum of the three entries below. */
   intercepted: number
-  /** Synthetic path-stripped drops actually dispatched. */
+  /** Synthetic path-stripped drops actually dispatched (= redirected sum). */
   redispatched: number
-  /** Drops stopped because they carried a folder (toast shown, nothing
-   * dispatched). */
+  /** Intakes stopped because they carried a folder (toast shown, nothing
+   * dispatched) (= blocked sum). */
   blockedDirectories: number
-  /** Drops judged not-ours and released untouched. */
+  /** Intakes judged not-ours and released untouched (= passthrough sum). */
   passthrough: number
   /** Redispatches aborted because a re-wrap or a DataTransfer add threw —
    * the original event was released instead (宁坏勿丢). */
   rewrapFailed: number
+  /** The same four counters split by entry (AU-2); the scalars above are
+   * their sums, so existing readers keep working unchanged. */
+  interceptedBy: RemoteDropEntryCounts
+  redirectedBy: RemoteDropEntryCounts
+  blockedBy: RemoteDropEntryCounts
+  passthroughBy: RemoteDropEntryCounts
 }
 
 /** Module-level singleton: the bundle has one document, so one guard state.
@@ -68,13 +94,36 @@ export interface RemoteDropDiagnostics {
 let diagnostics: RemoteDropDiagnostics = freshDiagnostics()
 
 function freshDiagnostics(): RemoteDropDiagnostics {
-  return { installed: false, notInstalledReason: undefined, intercepted: 0, redispatched: 0, blockedDirectories: 0, passthrough: 0, rewrapFailed: 0 }
+  return {
+    installed: false,
+    notInstalledReason: undefined,
+    intercepted: 0,
+    redispatched: 0,
+    blockedDirectories: 0,
+    passthrough: 0,
+    rewrapFailed: 0,
+    interceptedBy: { drop: 0, picker: 0, paste: 0 },
+    redirectedBy: { drop: 0, picker: 0, paste: 0 },
+    blockedBy: { drop: 0, picker: 0, paste: 0 },
+    passthroughBy: { drop: 0, picker: 0, paste: 0 },
+  }
 }
 
 /** A snapshot for the diagnostics carriers (settings page). Copying keeps
- * callers from holding a live reference into a later mount's state. */
+ * callers from holding a live reference into a later mount's state — the
+ * per-entry objects are copied too, or a caller would keep counting. */
 export function remoteDropDiagnostics(): RemoteDropDiagnostics {
-  return { ...diagnostics }
+  return {
+    ...diagnostics,
+    interceptedBy: { ...diagnostics.interceptedBy },
+    redirectedBy: { ...diagnostics.redirectedBy },
+    blockedBy: { ...diagnostics.blockedBy },
+    passthroughBy: { ...diagnostics.passthroughBy },
+  }
+}
+
+function bump(counts: RemoteDropEntryCounts, entry: IntakeEntry): void {
+  counts[entry] += 1
 }
 
 /** The contextBridge global's existence only — never touched otherwise
@@ -83,6 +132,24 @@ function hostPathsOf(): unknown {
   return (globalThis as { __DSH_HOST_PATHS__?: unknown }).__DSH_HOST_PATHS__
 }
 
+/** The bridge's `pathFor` — the preload's `webUtils.getPathForFile`. A
+ * non-empty string means the File still carries its disk path, the exact
+ * fact the host's zero-copy branch keys on. Anything else (bridge shape,
+ * non-string answer, a throw) reads as "no path" — the conservative
+ * direction: the file is treated as already byte-uploading and stays
+ * untouched. */
+function bridgePathFor(bridge: unknown, file: File): string {
+  if (bridge === null || typeof bridge !== 'object') return ''
+  const pathFor = (bridge as { pathFor?: unknown }).pathFor
+  if (typeof pathFor !== 'function') return ''
+  try {
+    const result = (pathFor as (file: File) => unknown).call(bridge, file)
+    return typeof result === 'string' ? result : ''
+  } catch {
+    return ''
+  }
+}
+
 /** The current-session signal, read AT EVENT TIME (the selection changes
  * while the page is open; a mount-time snapshot would go stale). Any
  * storage failure reads as "no signal" = local session = passthrough. */
@@ -141,6 +208,28 @@ function dismissHostDropOverlay(): void {
   }
 }
 
+/** Build the redispatch payload WITHOUT touching any event: re-wrap the files
+ * (path-stripped) and pack them into a fresh DataTransfer. `undefined` means
+ * the file list was empty (nothing to dispatch — the caller passes through);
+ * a throw means a re-wrap or an items.add failed (0-byte / exotic File) and
+ * the caller releases the original event untouched (宁坏勿丢). Shared by all
+ * three entries — the payload shape is the redispatch contract, and the
+ * drop entry's behavior is frozen by its existing tests. */
+function buildDropPayload(files: readonly File[]): DataTransfer | undefined {
+  const rewrapped = rewrapFiles(files)
+  if (rewrapped.length === 0) return undefined
+  const payload = new DataTransfer()
+  for (const file of rewrapped) payload.items.add(file)
+  return payload
+}
+
+/** Dispatch the host-shaped synthetic drop on document, bubble phase — the
+ * host's own drop handler (mask reset, busy rejection, addFiles) digests it;
+ * our capture listener skips it via the isTrusted gate. */
+function dispatchSyntheticDrop(payload: DataTransfer): void {
+  document.dispatchEvent(new DragEvent('drop', { bubbles: true, cancelable: true, dataTransfer: payload }))
+}
+
 export function mountRemoteDropGuard(ctx: ClientContext): void {
   ctx.effect(() => {
     // Fresh state per mount: a plugin reload re-runs apply() and must not
@@ -216,6 +305,7 @@ export function mountRemoteDropGuard(ctx: ClientContext): void {
       })
       if (decision.action === 'passthrough') {
         diagnostics.passthrough += 1
+        bump(diagnostics.passthroughBy, 'drop')
         return
       }
       if (decision.action === 'block-directories') {
@@ -225,7 +315,9 @@ export function mountRemoteDropGuard(ctx: ClientContext): void {
         event.stopPropagation()
         dismissHostDropOverlay()
         diagnostics.intercepted += 1
+        bump(diagnostics.interceptedBy, 'drop')
         diagnostics.blockedDirectories += 1
+        bump(diagnostics.blockedBy, 'drop')
         showToast()
         return
       }
@@ -234,22 +326,23 @@ export function mountRemoteDropGuard(ctx: ClientContext): void {
       // host still receives today's (path-chip) behavior instead of
       // nothing at all.
       try {
-        const rewrapped = rewrapFiles(Array.from(transfer.files))
-        if (rewrapped.length === 0) {
+        const payload = buildDropPayload(Array.from(transfer.files))
+        if (payload === undefined) {
           diagnostics.passthrough += 1
+          bump(diagnostics.passthroughBy, 'drop')
           return
         }
-        const payload = new DataTransfer()
-        for (const file of rewrapped) payload.items.add(file)
         event.preventDefault()
         event.stopPropagation()
         diagnostics.intercepted += 1
+        bump(diagnostics.interceptedBy, 'drop')
         // The host's drop handler sits on document, bubble phase (F4): a
         // bubbling synthetic drop on document reaches it. Its own handler
         // does the preventDefault / mask reset / addFiles work; our capture
         // listener skips this event via the isTrusted gate above.
-        document.dispatchEvent(new DragEvent('drop', { bubbles: true, cancelable: true, dataTransfer: payload }))
+        dispatchSyntheticDrop(payload)
         diagnostics.redispatched += 1
+        bump(diagnostics.redirectedBy, 'drop')
       } catch {
         // A re-wrap or a single items.add threw (0-byte / exotic File):
         // count it and let the original event flow — 宁坏勿丢.
@@ -258,8 +351,162 @@ export function mountRemoteDropGuard(ctx: ClientContext): void {
     }
     document.addEventListener('drop', onDrop, true)
 
+    // --- the picker entry (AU-2): the composer's hidden file selector -------
+    // F1: the host composer's picker is an `input[type=file][multiple][hidden]`
+    // with NO accept attribute, and its React onChange feeds intakeFiles →
+    // addFiles — the same zero-copy branch the drop entry guards. Judged by
+    // STRUCTURE, never by class names (hash classes cannot be anchored): an
+    // input with an accept attribute (import / restore pickers), a visible
+    // one, or a `webkitdirectory` folder picker (a third-party composition
+    // could combine all four) is somebody else's and passes through. The
+    // host composer has none of those, so the hit is unchanged.
+    const onChange = (event: Event): void => {
+      if (!event.isTrusted) return
+      const input = event.target
+      if (!(input instanceof HTMLInputElement)) return
+      if (input.type !== 'file' || !input.multiple || !input.hidden || input.hasAttribute('accept') || input.webkitdirectory) return
+      const files = Array.from(input.files ?? [])
+      if (files.length === 0) return
+      // The remote gate first, BEFORE counting: a local session's everyday
+      // picker use must not show up in the diagnostics at all (the counters
+      // are a record of what the guard saw in remote sessions).
+      if (!isRemoteSessionId(readCurrentSessionId())) return
+      const bridge = hostPathsOf()
+      const items: RemoteIntakeDescriptor[] = files.map((file) => ({
+        entry: 'picker',
+        // A picker yields plain files; directories are structurally
+        // impossible, so the block-directories branch is unreachable here
+        // (defensive passthrough below).
+        isDirectory: false,
+        hasPath: bridgePathFor(bridge, file) !== '',
+        isImage: file.type.startsWith('image/'),
+      }))
+      const decision = decideRemoteIntake({
+        hasHostPaths: bridge !== undefined,
+        currentSessionId: readCurrentSessionId(),
+        trusted: event.isTrusted,
+        items,
+      })
+      if (decision.action !== 'redirect') {
+        // passthrough, or the defensive block branch that cannot happen for
+        // a picker — either way zero intervention.
+        diagnostics.passthrough += 1
+        bump(diagnostics.passthroughBy, 'picker')
+        return
+      }
+      // Build the payload BEFORE stopping the event (宁坏勿丢): a re-wrap
+      // failure releases the change untouched — the host keeps today's
+      // (path-chip) behavior instead of losing the pick entirely.
+      try {
+        const payload = buildDropPayload(files)
+        if (payload === undefined) {
+          diagnostics.passthrough += 1
+          bump(diagnostics.passthroughBy, 'picker')
+          return
+        }
+        // stopPropagation keeps the event from reaching React's delegated
+        // onChange at the root container (F5); clearing the value lets the
+        // SAME file trigger a later change again (the host's own onPickFiles
+        // habit, applied here since the host's handler no longer runs).
+        event.stopPropagation()
+        input.value = ''
+        diagnostics.intercepted += 1
+        bump(diagnostics.interceptedBy, 'picker')
+        dispatchSyntheticDrop(payload)
+        diagnostics.redispatched += 1
+        bump(diagnostics.redirectedBy, 'picker')
+      } catch {
+        diagnostics.rewrapFailed += 1
+      }
+    }
+    document.addEventListener('change', onChange, true)
+
+    // --- the paste entry (AU-2): the editor's clipboard files ---------------
+    // F2: the composer editor (a contenteditable root) reads file items off
+    // clipboardData; a path-carrying non-image lands on the same zero-copy
+    // branch. Pasting into any other target (settings fields, search) is not
+    // ours. clipboardData is read-only, so a redirect can only re-dispatch
+    // — preventDefault keeps the editor from inserting anything.
+    const onPaste = (event: ClipboardEvent): void => {
+      if (!event.isTrusted) return
+      const transfer = event.clipboardData
+      if (transfer === null) return
+      const firstElement = event.composedPath().find((node): node is Element => node instanceof Element)
+      if (firstElement === undefined || firstElement.closest('[contenteditable="true"]') === null) return
+      // The remote gate BEFORE any per-item work (same rationale as picker):
+      // a local session's paste — including pasted FILES — returns here, so
+      // it never runs bridgePathFor per file and never reaches the counters.
+      // Everything after this point still runs inside this one synchronous
+      // handler, within the dispatch lifetime clipboardData requires.
+      if (!isRemoteSessionId(readCurrentSessionId())) return
+      const bridge = hostPathsOf()
+      const files: File[] = []
+      const items: RemoteIntakeDescriptor[] = []
+      for (const item of Array.from(transfer.items)) {
+        if (item.kind !== 'file') continue
+        const file = item.getAsFile()
+        if (file === null) continue
+        // Directory detection with the host's own default: no entry API
+        // reads as "not a directory". Items without a File behind them never
+        // reach the descriptors, so a plain-text paste arrives as an empty
+        // list — the pure no-files passthrough.
+        const entry = typeof item.webkitGetAsEntry === 'function' ? item.webkitGetAsEntry() : null
+        files.push(file)
+        items.push({
+          entry: 'paste',
+          isDirectory: entry?.isDirectory === true,
+          hasPath: bridgePathFor(bridge, file) !== '',
+          isImage: file.type.startsWith('image/'),
+        })
+      }
+      const decision = decideRemoteIntake({
+        hasHostPaths: bridge !== undefined,
+        currentSessionId: readCurrentSessionId(),
+        trusted: event.isTrusted,
+        items,
+      })
+      if (decision.action === 'block-directories') {
+        // A folder paste cannot be fixed by single-file upload: same toast
+        // semantics as the drop branch (no overlay to dismiss — paste never
+        // opened one).
+        event.preventDefault()
+        event.stopPropagation()
+        diagnostics.intercepted += 1
+        bump(diagnostics.interceptedBy, 'paste')
+        diagnostics.blockedDirectories += 1
+        bump(diagnostics.blockedBy, 'paste')
+        showToast()
+        return
+      }
+      if (decision.action !== 'redirect') {
+        diagnostics.passthrough += 1
+        bump(diagnostics.passthroughBy, 'paste')
+        return
+      }
+      try {
+        const payload = buildDropPayload(files)
+        if (payload === undefined) {
+          diagnostics.passthrough += 1
+          bump(diagnostics.passthroughBy, 'paste')
+          return
+        }
+        event.preventDefault()
+        event.stopPropagation()
+        diagnostics.intercepted += 1
+        bump(diagnostics.interceptedBy, 'paste')
+        dispatchSyntheticDrop(payload)
+        diagnostics.redispatched += 1
+        bump(diagnostics.redirectedBy, 'paste')
+      } catch {
+        diagnostics.rewrapFailed += 1
+      }
+    }
+    document.addEventListener('paste', onPaste, true)
+
     return () => {
       document.removeEventListener('drop', onDrop, true)
+      document.removeEventListener('change', onChange, true)
+      document.removeEventListener('paste', onPaste, true)
       removeToast()
       // Keep the counters readable after a dispose (the settings page may
       // still be open mid-reload); `installed` is the armed flag only.

package/src/client/locales.ts

@@ -255,15 +255,23 @@ export const zh = {
   'settings.client.diagRecentFailures': '最近的远程调用失败',
   'settings.client.diagCompatGroups': '指纹有差异的组：{groups}',
   'settings.client.diagCompatCalls': '最近的不兼容调用',
-  // --- RD-3 远程会话拖拽守卫的诊断行（浏览器端计数，渲染时现读） ---
-  'settings.client.diagRemoteDrop': '远程拖拽守卫',
+  // --- RD-3/AU-3 附件入口守卫的诊断行（浏览器端计数，渲染时现读） ---
+  'settings.client.diagRemoteDrop': '附件入口守卫',
   'settings.client.diagRemoteDropOk': '已安装 · 拦截 {intercepted} · 重派发 {redispatched} · 文件夹 {blocked} · 放行 {passthrough} · 重包失败 {failed}',
+  'settings.client.diagRemoteDropEntries': '分入口 · 拦截 拖拽 {dropI} / 回形针 {pickerI} / 粘贴 {pasteI} · 放行 拖拽 {dropP} / 回形针 {pickerP} / 粘贴 {pasteP}',
   'settings.client.diagRemoteDropOff': '未安装（{reason}）',
   // --- RD-6 上传改道（fetch-route 拦截）的诊断行：读 remote-status 的 serviceProbe ---
   'settings.client.diagUploadRedirect': '上传改道',
   'settings.client.diagUploadRedirectOk': '已安装 · 上传已接管',
   'settings.client.diagUploadRedirectRefused': '拒装：{reason}',
   'settings.client.diagUploadRedirectPending': '服务注入未触发 · connection {connection} · fileUploads {fileUploads}',
+  // --- CU-4 诊断信息导出（设置页最底部，两种角色都有） ---
+  'settings.debug.title': '诊断信息',
+  'settings.debug.export': '导出诊断信息',
+  'settings.debug.exporting': '正在生成…',
+  'settings.debug.hint': '下载一份脱敏后的诊断文件（版本、配置形态、连接诊断、插件日志）。令牌与密钥、对话内容、附件和完整文件路径一律不包含，服务器地址只保留类型。建议从机与主服务器各导一份，可直接附到 GitHub issue。',
+  'settings.debug.done': '诊断文件已下载',
+  'settings.debug.fail': '导出失败：无法生成诊断报告',
   // --- PB-5 插件桥：主服务端同意小节 + 子客户端诊断小节 ---
   'settings.bridge.title': '插件桥',
   'settings.bridge.empty': '暂无插件登记插件桥',
@@ -766,16 +774,24 @@ export const en: Record<MobileNavKey, string> = {
   'settings.client.diagRecentFailures': 'Recent remote call failures',
   'settings.client.diagCompatGroups': 'Groups with fingerprint differences: {groups}',
   'settings.client.diagCompatCalls': 'Recent incompatible calls',
-  // --- RD-3: the remote drop guard's diagnostics line (browser-side
+  // --- RD-3/AU-3: the attachment-entry guard's diagnostics line (browser-side
   // counters, read at render time) ---
-  'settings.client.diagRemoteDrop': 'Remote drop guard',
+  'settings.client.diagRemoteDrop': 'Attachment entry guard',
   'settings.client.diagRemoteDropOk': 'Installed · intercepted {intercepted} · redispatched {redispatched} · folders {blocked} · passthrough {passthrough} · rewrap failed {failed}',
+  'settings.client.diagRemoteDropEntries': 'By entry · intercepted drop {dropI} / picker {pickerI} / paste {pasteI} · passthrough drop {dropP} / picker {pickerP} / paste {pasteP}',
   'settings.client.diagRemoteDropOff': 'Not installed ({reason})',
   // --- RD-6: the upload-redirect (fetch-route intercept) diagnostics row ---
   'settings.client.diagUploadRedirect': 'Upload redirect',
   'settings.client.diagUploadRedirectOk': 'Installed · upload wrapped',
   'settings.client.diagUploadRedirectRefused': 'Refused: {reason}',
   'settings.client.diagUploadRedirectPending': 'Service inject never fired · connection {connection} · fileUploads {fileUploads}',
+  // --- CU-4: the diagnostics export (bottom of the settings page, both roles) ---
+  'settings.debug.title': 'Diagnostics',
+  'settings.debug.export': 'Export diagnostics',
+  'settings.debug.exporting': 'Generating…',
+  'settings.debug.hint': 'Download a redacted diagnostics file (versions, config shape, connection diagnostics, plugin log). Tokens and secrets, conversation content, attachments and full file paths are never included; server addresses keep only their type. Export one on the client and one on the server — both can be attached to a GitHub issue as-is.',
+  'settings.debug.done': 'Diagnostics file downloaded',
+  'settings.debug.fail': 'Export failed: the diagnostics report could not be generated',
   // --- PB-5 plugin bridge: host consent section + sub-client diagnostics ---
   'settings.bridge.title': 'Plugin bridge',
   'settings.bridge.empty': 'No plugin has registered a bridge yet',

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>
   )
 }