@sleep2agi/agent-network-dashboard 0.6.3-preview.37 → 0.6.3-preview.39

package/app/api/hub/files/[fileId]/route.ts

@@ -13,19 +13,111 @@ const FILE_ID_REGEX = /^[A-Za-z0-9_-]{8,64}$/;
  * Header allowlist for the pass-through. We deliberately do NOT forward
  * everything from the hub response — the browser must NOT see anything
  * that could leak the internal request path or the Bearer token.
- * Only the four headers the browser genuinely needs for a safe download.
+ *
+ * `content-disposition` and `x-content-type-options` are intentionally
+ * NOT in this list — they're stamped explicitly below (see JSDoc on
+ * the response builder). Passing them through the allowlist would
+ * silently defer to hub for the security-critical values, which is
+ * exactly the regression path 通信龙 flagged in the #47 review.
  */
 const HEADER_PASSTHROUGH = [
   'content-type',
   'content-length',
-  'content-disposition',
-  'x-content-type-options',
 ] as const;
 
+// ── #492 preview half: safe-inline-type detection ──────────────
+//
+// 🔴 STRUCTURAL SAFETY (通信龙 #46 review of the inline design):
+//   This proxy NEVER returns an inline response, regardless of the
+//   file's real type. `Content-Disposition: attachment` + `nosniff`
+//   stay stamped on every download, so no dashboard-origin URL can
+//   ever serve user-uploaded content as a rendered page — that entire
+//   XSS class is structurally impossible, not defended-by-whitelist.
+//
+// What we DO expose: a `X-Verified-Type` header carrying the true MIME
+// as detected by magic bytes. The client uses this header to decide:
+//   1. Fetch the bytes (browser downloads — no navigation)
+//   2. `new Blob([bytes], {type: xVerifiedType})`
+//   3. `URL.createObjectURL(blob)` → `<img>` / `<video>` src
+//
+// The blob URL is same-origin *to the browser's blob: scheme*, isolated
+// from the dashboard origin — a bug in whitelist can degrade UX (image
+// won't render) but can never become a cross-origin script vector.
+//
+// Detection rule: EXACT MIME match by per-format magic bytes at each
+// format's actual offset. No prefix matching (`image/*` would let SVG
+// in). No trust of upload-time mime/filename (both untrusted).
+type SafeMime =
+  | 'image/png'
+  | 'image/jpeg'
+  | 'image/gif'
+  | 'image/webp'
+  | 'video/mp4'
+  | 'video/webm';
+
+/**
+ * Peek magic bytes and return the safe MIME if the file matches one
+ * of our whitelisted formats.
+ *
+ * Per-format offset rules (not naive first-N compare — 通信龙 review):
+ *   - PNG:  offset 0, `89 50 4E 47 0D 0A 1A 0A`
+ *   - JPEG: offset 0, `FF D8 FF`
+ *   - GIF:  offset 0, `47 49 46 38 (37|39) 61` ("GIF87a" / "GIF89a")
+ *   - WebP: offset 0 `52 49 46 46` ("RIFF") + offset 8 `57 45 42 50` ("WEBP")
+ *   - MP4:  offset 4 `66 74 79 70` ("ftyp") — MP4/M4V/QT ISO BMFF box
+ *   - WebM: offset 0 `1A 45 DF A3` (EBML)
+ *
+ * Returns null for anything else (SVG, HTML, empty, corrupted, unknown).
+ */
+function detectSafeMime(head: Uint8Array): SafeMime | null {
+  const b = head;
+  if (b.length < 4) return null;
+
+  // PNG
+  if (
+    b.length >= 8 &&
+    b[0] === 0x89 && b[1] === 0x50 && b[2] === 0x4E && b[3] === 0x47 &&
+    b[4] === 0x0D && b[5] === 0x0A && b[6] === 0x1A && b[7] === 0x0A
+  ) return 'image/png';
+
+  // JPEG (FF D8 FF — final byte is FF E0 / FF E1 / FF DB variants; the FF prefix
+  // is enough to distinguish. Reject if not exactly the three-byte JPEG marker.)
+  if (b[0] === 0xFF && b[1] === 0xD8 && b[2] === 0xFF) return 'image/jpeg';
+
+  // GIF — "GIF87a" or "GIF89a"
+  if (
+    b.length >= 6 &&
+    b[0] === 0x47 && b[1] === 0x49 && b[2] === 0x46 && b[3] === 0x38 &&
+    (b[4] === 0x37 || b[4] === 0x39) && b[5] === 0x61
+  ) return 'image/gif';
+
+  // WebP — "RIFF????WEBP"
+  if (
+    b.length >= 12 &&
+    b[0] === 0x52 && b[1] === 0x49 && b[2] === 0x46 && b[3] === 0x46 &&
+    b[8] === 0x57 && b[9] === 0x45 && b[10] === 0x42 && b[11] === 0x50
+  ) return 'image/webp';
+
+  // WebM (EBML header) — 1A 45 DF A3
+  if (b[0] === 0x1A && b[1] === 0x45 && b[2] === 0xDF && b[3] === 0xA3) {
+    return 'video/webm';
+  }
+
+  // MP4 (ISO BMFF `ftyp` box at offset 4) — the first 4 bytes are a
+  // big-endian box size we don't need to validate; the "ftyp" marker
+  // is what we key on.
+  if (
+    b.length >= 8 &&
+    b[4] === 0x66 && b[5] === 0x74 && b[6] === 0x79 && b[7] === 0x70
+  ) return 'video/mp4';
+
+  return null;
+}
+
 /**
  * #492 — file download proxy: browser fetches `/api/hub/files/<file_id>`,
  * this proxy attaches the browser session's V3 user token as
- * `Authorization: Bearer <utok>` and streams the response through.
+ * `Authorization: Bearer <utok>` and forwards the response.
  *
  * Why proxy vs direct-browser-fetch to `/api/files/<id>`:
  *
@@ -40,18 +132,25 @@ const HEADER_PASSTHROUGH = [
  *   - By proxying, the token stays server-side. The client sends
  *     nothing but its own session cookie; the server adds the Bearer.
  *
- * Streaming — we forward `res.body` (a ReadableStream) directly rather
- * than buffering `await res.arrayBuffer()`. A 44 KB pptx (Vincent's
- * demo case) buffers fine, but users can upload up to the hub's
- * 12 MiB cap and bundle-loading that into node memory 100x per
- * concurrent request is a memory footgun. Streaming keeps the proxy
- * O(1) memory regardless of file size.
+ * Buffering vs streaming: this half of the proxy USED to stream (O(1)
+ * memory). The preview half needs to detect magic bytes before
+ * headers can be sent, so we now buffer the full body. Acceptable
+ * because hub caps uploads at 12 MiB; worst case is 12 MiB *
+ * concurrent-preview-requests per node process. If that becomes
+ * memory pressure the fix is to tee the ReadableStream and inspect
+ * the first chunk without buffering the rest — deferred until
+ * evidence shows it's worth the complexity.
  *
  * Content-Disposition + X-Content-Type-Options come from the hub
  * response and are passed through verbatim — the hub already stamps
  * `attachment` disposition + `nosniff` on downloads (issue #221),
  * meaning the browser will download-not-render even if the file
  * happens to be text/html. Do not add or alter those headers here.
+ *
+ * The response ALWAYS carries `attachment` disposition — the client
+ * reads `X-Verified-Type` and constructs a blob URL if it wants to
+ * inline the content. See `detectSafeMime` above for the security
+ * reasoning.
  */
 export async function GET(
   _req: Request,
@@ -76,7 +175,6 @@ export async function GET(
     hubRes = await fetch(url, {
       method: 'GET',
       headers: { Authorization: `Bearer ${userToken}` },
-      // Streaming: avoid Next.js caching of the file bytes.
       cache: 'no-store',
     });
   } catch (e: unknown) {
@@ -89,8 +187,6 @@ export async function GET(
   // Forward hub's status verbatim so a 404 (unknown file_id) surfaces
   // as a 404 the client can distinguish from a proxy error.
   if (!hubRes.ok) {
-    // Try to keep JSON error shape when the hub gave one; otherwise
-    // return a generic status-only response.
     const ct = hubRes.headers.get('content-type') || '';
     if (ct.includes('json')) {
       try {
@@ -103,6 +199,10 @@ export async function GET(
     return new Response(null, { status: hubRes.status });
   }
 
+  // Buffer full body — see JSDoc for the memory rationale.
+  const bytes = new Uint8Array(await hubRes.arrayBuffer());
+  const verifiedType = detectSafeMime(bytes.subarray(0, 32));
+
   // Build the response header set — only the allowlisted ones. This
   // strips anything the hub might leak (Set-Cookie, X-Hub-*, etc.).
   const outHeaders = new Headers();
@@ -110,12 +210,45 @@ export async function GET(
     const value = hubRes.headers.get(key);
     if (value !== null) outHeaders.set(key, value);
   }
+  // Content-Length may not survive if we re-emit the body; set from
+  // our own buffer length to be authoritative.
+  outHeaders.set('content-length', String(bytes.length));
+
   // Defense-in-depth: always stamp nosniff on downloads even if the
   // hub didn't (it does today per #221, but pinning here means a hub
   // regression can't retroactively make the browser sniff-execute).
+  // The polyglot-PNG-HTML adversarial sample in verify.sh depends on
+  // this exact header being present.
   outHeaders.set('x-content-type-options', 'nosniff');
 
-  return new Response(hubRes.body, {
+  // 🔴 SYMMETRIC PIN with nosniff (通信龙 review of PR #47):
+  //   "永不 inline" is the single load-bearing invariant of this
+  //   whole design. It CANNOT depend on hub always sending
+  //   `Content-Disposition: attachment`, because a hub regression =
+  //   proxy regression = XSS. Pin it here explicitly.
+  //
+  //   Filename preservation: if hub sent `attachment; filename="..."`
+  //   we keep the whole thing (users see the friendly name in their
+  //   download folder). If hub returns anything else (`inline; ...`,
+  //   or missing) we override to bare `attachment` with a
+  //   safe file_id-based filename fallback.
+  const hubDisposition = hubRes.headers.get('content-disposition') || '';
+  if (/^\s*attachment\b/i.test(hubDisposition)) {
+    outHeaders.set('content-disposition', hubDisposition);
+  } else {
+    outHeaders.set('content-disposition', `attachment; filename="${fileId}"`);
+  }
+
+  // Structural invariant: `X-Verified-Type` is INFORMATIONAL only.
+  // Adding it does not change the response's disposition or
+  // Content-Type. The client uses it to decide whether to construct
+  // a blob URL for inline rendering (browser-owned blob: scheme,
+  // isolated from the dashboard origin).
+  if (verifiedType) {
+    outHeaders.set('x-verified-type', verifiedType);
+  }
+
+  return new Response(bytes, {
     status: 200,
     headers: outHeaders,
   });

package/app/components/AttachmentBlock.tsx

@@ -1,6 +1,45 @@
 'use client';
 
-import { useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// ── #492 preview half — inline image/video display ───────────────
+//
+// See docs/design-492-inline-preview.md for the full design rationale
+// (通信龙 v2 review approved the "never inline" structure).
+//
+// The proxy at /api/hub/files/[fileId] ALWAYS returns bytes with
+// `Content-Disposition: attachment` + `nosniff`. It also stamps a
+// `X-Verified-Type` header when the file matches a magic-bytes-verified
+// safe-media type. Client:
+//   1. Fetches via the download proxy (browser downloads bytes to memory)
+//   2. Reads `X-Verified-Type` — if absent, falls back to download card
+//   3. Constructs `new Blob([bytes], {type: X-Verified-Type})`
+//   4. `URL.createObjectURL(blob)` → `<img>` / `<video>` src
+//
+// The blob URL is a browser-owned handle, isolated from the dashboard
+// origin. A whitelist bug can degrade rendering (image won't load) but
+// can NEVER become an XSS on the dashboard origin.
+
+/** Client-side ext hint — used ONLY to decide whether it's worth
+ *  fetching the file to try the preview. The SERVER decides
+ *  authoritatively whether to expose `X-Verified-Type` via magic
+ *  bytes; this list just avoids fetching a PDF just to learn it
+ *  isn't inline-able. Under-selection here = missed preview
+ *  opportunity (only a UX cost). Over-selection = wasted fetch that
+ *  falls back to card (only a bandwidth cost). Nothing security. */
+const PREVIEW_HINT_EXTS = new Set([
+  'png', 'jpg', 'jpeg', 'gif', 'webp',
+  'mp4', 'webm', 'mov', // .mov may or may not verify as mp4; server decides
+]);
+
+const IMAGE_MIMES = new Set(['image/png', 'image/jpeg', 'image/gif', 'image/webp']);
+const VIDEO_MIMES = new Set(['video/mp4', 'video/webm']);
+
+/** Auto-load images below this size. Larger images render as a
+ *  click-to-load card to protect mobile bandwidth. Vincent uses this
+ *  on his phone; a full 12 MiB image auto-loading over a random
+ *  cellular connection is not the right default. */
+const IMAGE_AUTOLOAD_MAX_BYTES = 5 * 1024 * 1024;
 
 /**
  * #492 attachment descriptor as it appears in `meta.attachments[]` on
@@ -113,9 +152,235 @@ function iconFor(mime: string, name: string): string {
  * the chat scroll position isn't lost. Two seconds of visible
  * feedback is enough for the user to see + retry.
  */
+/** Shared blob-URL fetcher — returns {blobUrl, verifiedType} or
+ *  throws. Used by both InlineImage/InlineVideo (for preview) and
+ *  the download button (for the save-to-disk flow). Caller owns the
+ *  returned blobUrl lifecycle (must revoke). */
+async function fetchVerified(fileId: string): Promise<{ blobUrl: string; verifiedType: string | null; blob: Blob }> {
+  const res = await fetch(`/api/hub/files/${encodeURIComponent(fileId)}`, {
+    credentials: 'include',
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  // Header lookup is case-insensitive; Next's Response uses this pattern.
+  const verifiedType = res.headers.get('x-verified-type');
+  // Only trust the whitelist values — anything else is dropped so a
+  // future server bug can't smuggle an arbitrary type in.
+  const trusted =
+    verifiedType && (IMAGE_MIMES.has(verifiedType) || VIDEO_MIMES.has(verifiedType))
+      ? verifiedType
+      : null;
+  const rawBlob = await res.blob();
+  const blob = trusted ? new Blob([rawBlob], { type: trusted }) : rawBlob;
+  return { blobUrl: URL.createObjectURL(blob), verifiedType: trusted, blob };
+}
+
+/** Filename extension helper — lowercase, no dot, empty for extensionless. */
+function extOf(name: string): string {
+  const i = name.lastIndexOf('.');
+  return i >= 0 ? name.slice(i + 1).toLowerCase() : '';
+}
+
+/** True when it's worth trying an inline preview (client-side hint
+ *  only — server decides authoritatively). */
+function shouldTryPreview(name: string, mime: string): boolean {
+  if (IMAGE_MIMES.has(mime) || VIDEO_MIMES.has(mime)) return true;
+  const ext = extOf(name);
+  return ext !== '' && PREVIEW_HINT_EXTS.has(ext);
+}
+
+/**
+ * Inline image preview. Auto-loads for images below
+ * IMAGE_AUTOLOAD_MAX_BYTES; renders a click-to-load card for larger
+ * images (mobile bandwidth protection). If the server doesn't return
+ * `X-Verified-Type` in the whitelist, or if the fetch fails, calls
+ * `onNotInlineable` so the parent falls back to the download card.
+ */
+function InlineImage({
+  fileId,
+  name,
+  size,
+  onNotInlineable,
+}: {
+  fileId: string;
+  name: string;
+  size: number | undefined;
+  onNotInlineable: () => void;
+}) {
+  const autoLoad = typeof size === 'number' && size <= IMAGE_AUTOLOAD_MAX_BYTES;
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const notInlineableRef = useRef(onNotInlineable);
+  notInlineableRef.current = onNotInlineable;
+
+  const load = useCallback(async () => {
+    if (loading || blobUrl) return;
+    setLoading(true);
+    try {
+      const { blobUrl: url, verifiedType } = await fetchVerified(fileId);
+      if (!verifiedType || !IMAGE_MIMES.has(verifiedType)) {
+        // Server declined — the file's real type isn't a safe image.
+        // Release the URL immediately and hand off to the download card.
+        URL.revokeObjectURL(url);
+        notInlineableRef.current();
+        return;
+      }
+      setBlobUrl(url);
+    } catch {
+      setFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [fileId, loading, blobUrl]);
+
+  useEffect(() => {
+    if (autoLoad) void load();
+  }, [autoLoad, load]);
+
+  // Revoke on unmount OR when blobUrl replaced.
+  useEffect(() => {
+    if (!blobUrl) return;
+    return () => URL.revokeObjectURL(blobUrl);
+  }, [blobUrl]);
+
+  if (failed) {
+    return (
+      <div className="mt-2 rounded-lg border border-amber-500/20 bg-amber-500/5 px-3 py-2 text-sm text-amber-200">
+        图片加载失败 · 请点击下方下载按钮查看
+      </div>
+    );
+  }
+
+  if (blobUrl) {
+    return (
+      <div className="mt-2 overflow-hidden rounded-lg border border-white/10 bg-black/20">
+        {/* eslint-disable-next-line @next/next/no-img-element -- blob: URL, next/image can't handle */}
+        <img
+          src={blobUrl}
+          alt={name}
+          className="block max-h-[50vh] w-auto max-w-full cursor-zoom-in object-contain"
+          // "Open in new tab" satisfies the "点开大图" acceptance gate
+          // without threading blob URLs through the multi-image
+          // TaskChatPanel lightbox (that integration is a follow-up).
+          onClick={() => window.open(blobUrl, '_blank', 'noopener')}
+        />
+      </div>
+    );
+  }
+
+  // Not loaded yet — either loading spinner or click-to-load card.
+  return (
+    <button
+      type="button"
+      onClick={load}
+      disabled={loading}
+      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-cyan-500/20 bg-cyan-500/5 px-3 py-2 text-left text-sm text-cyan-100 transition hover:border-cyan-400/40 hover:bg-cyan-500/10 disabled:cursor-wait disabled:opacity-60"
+    >
+      <span aria-hidden className="text-lg">🖼️</span>
+      <span className="min-w-0 flex-1 truncate">{name}</span>
+      <span className="shrink-0 text-xs text-cyan-300">
+        {loading ? '加载中…' : '点击查看'}
+      </span>
+    </button>
+  );
+}
+
+/**
+ * Inline video preview. NEVER auto-loads — 5 videos on-screen at
+ * 12 MiB each = 60 MiB memory spike. Renders a poster card that
+ * fetches + creates the blob only on click, then swaps to
+ * `<video controls autoplay>`.
+ *
+ * Trade-off (per design doc §5.2): blob URL means full file
+ * downloaded before first byte plays; there's no range/seek. Fine
+ * under the current 12 MiB hub cap; if the cap ever rises, this
+ * component needs a real streaming source (server-side signed URL
+ * with byte-range support), not a blob.
+ */
+function InlineVideo({
+  fileId,
+  name,
+  onNotInlineable,
+}: {
+  fileId: string;
+  name: string;
+  onNotInlineable: () => void;
+}) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const notInlineableRef = useRef(onNotInlineable);
+  notInlineableRef.current = onNotInlineable;
+
+  const load = useCallback(async () => {
+    if (loading || blobUrl) return;
+    setLoading(true);
+    try {
+      const { blobUrl: url, verifiedType } = await fetchVerified(fileId);
+      if (!verifiedType || !VIDEO_MIMES.has(verifiedType)) {
+        URL.revokeObjectURL(url);
+        notInlineableRef.current();
+        return;
+      }
+      setBlobUrl(url);
+    } catch {
+      setFailed(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [fileId, loading, blobUrl]);
+
+  useEffect(() => {
+    if (!blobUrl) return;
+    return () => URL.revokeObjectURL(blobUrl);
+  }, [blobUrl]);
+
+  if (failed) {
+    return (
+      <div className="mt-2 rounded-lg border border-amber-500/20 bg-amber-500/5 px-3 py-2 text-sm text-amber-200">
+        视频加载失败 · 请点击下方下载按钮查看
+      </div>
+    );
+  }
+
+  if (blobUrl) {
+    return (
+      <div className="mt-2 overflow-hidden rounded-lg border border-white/10 bg-black/20">
+        <video
+          src={blobUrl}
+          controls
+          autoPlay
+          className="block max-h-[50vh] w-full"
+        >
+          您的浏览器不支持内联视频播放，请下载后查看。
+        </video>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={load}
+      disabled={loading}
+      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-cyan-500/20 bg-cyan-500/5 px-3 py-2 text-left text-sm text-cyan-100 transition hover:border-cyan-400/40 hover:bg-cyan-500/10 disabled:cursor-wait disabled:opacity-60"
+    >
+      <span aria-hidden className="text-lg">🎬</span>
+      <span className="min-w-0 flex-1 truncate">{name}</span>
+      <span className="shrink-0 text-xs text-cyan-300">
+        {loading ? '加载中…' : '▶ 播放'}
+      </span>
+    </button>
+  );
+}
+
 export function AttachmentBlock({ attachment }: { attachment: Attachment }) {
   const [downloading, setDownloading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // Ext-based hint says "try preview" — set to false after the
+  // server declines (no X-Verified-Type) or after a hard fetch
+  // failure. Once false, only the download card renders.
+  const [previewGivenUp, setPreviewGivenUp] = useState(false);
 
   const safeName = sanitizeName(attachment.name);
   const safeMime = sanitizeMime(attachment.mime);
@@ -125,6 +390,15 @@ export function AttachmentBlock({ attachment }: { attachment: Attachment }) {
   const hasValidFileId =
     typeof attachment.file_id === 'string' && FILE_ID_REGEX.test(attachment.file_id);
 
+  const tryPreview = hasValidFileId && !previewGivenUp && shouldTryPreview(safeName, safeMime);
+  const ext = extOf(safeName);
+  // Client hint only — server verifies. We just pick which preview
+  // component to try first. If the ext is ambiguous (e.g. missing),
+  // default to image since image detection is cheap and safe.
+  const previewKind: 'image' | 'video' | null = tryPreview
+    ? (VIDEO_MIMES.has(safeMime) || ['mp4', 'webm', 'mov'].includes(ext) ? 'video' : 'image')
+    : null;
+
   async function handleDownload() {
     if (!hasValidFileId || !attachment.file_id) return;
     setError(null);
@@ -176,25 +450,48 @@ export function AttachmentBlock({ attachment }: { attachment: Attachment }) {
   }
 
   return (
-    <button
-      type="button"
-      onClick={handleDownload}
-      disabled={downloading}
-      className="mt-2 flex w-full items-center gap-2 rounded-lg border border-cyan-500/20 bg-cyan-500/5 px-3 py-2 text-left text-sm text-cyan-100 transition hover:border-cyan-400/40 hover:bg-cyan-500/10 disabled:cursor-wait disabled:opacity-60"
-      title={`Download ${safeName}`}
-    >
-      <span aria-hidden className="text-lg">{icon}</span>
-      <span className="min-w-0 flex-1 truncate">{safeName}</span>
-      {safeSize && <span className="shrink-0 text-xs text-neutral-400">{safeSize}</span>}
-      {safeMime && (
-        <span className="shrink-0 rounded bg-white/5 px-1.5 py-0.5 text-[10px] text-neutral-400">
-          {safeMime}
-        </span>
+    <div className="mt-2 flex flex-col">
+      {/* Inline preview: rendered when ext hint suggests media and the
+          server hasn't declined yet. On decline (`onNotInlineable`) or
+          hard failure, we drop back to just the download card below. */}
+      {previewKind === 'image' && attachment.file_id && (
+        <InlineImage
+          fileId={attachment.file_id}
+          name={safeName}
+          size={typeof attachment.size === 'number' ? attachment.size : undefined}
+          onNotInlineable={() => setPreviewGivenUp(true)}
+        />
       )}
-      <span className="shrink-0 text-xs text-cyan-300">
-        {downloading ? '下载中…' : error ? `⚠ ${error}` : '↓ 下载'}
-      </span>
-    </button>
+      {previewKind === 'video' && attachment.file_id && (
+        <InlineVideo
+          fileId={attachment.file_id}
+          name={safeName}
+          onNotInlineable={() => setPreviewGivenUp(true)}
+        />
+      )}
+      {/* Download card — always available for save-to-disk, even when
+          the preview is shown. Users still need a way to save a copy
+          off the ephemeral blob URL. */}
+      <button
+        type="button"
+        onClick={handleDownload}
+        disabled={downloading}
+        className="flex w-full items-center gap-2 rounded-lg border border-cyan-500/20 bg-cyan-500/5 px-3 py-2 text-left text-sm text-cyan-100 transition hover:border-cyan-400/40 hover:bg-cyan-500/10 disabled:cursor-wait disabled:opacity-60 mt-2 first:mt-0"
+        title={`Download ${safeName}`}
+      >
+        <span aria-hidden className="text-lg">{icon}</span>
+        <span className="min-w-0 flex-1 truncate">{safeName}</span>
+        {safeSize && <span className="shrink-0 text-xs text-neutral-400">{safeSize}</span>}
+        {safeMime && (
+          <span className="shrink-0 rounded bg-white/5 px-1.5 py-0.5 text-[10px] text-neutral-400">
+            {safeMime}
+          </span>
+        )}
+        <span className="shrink-0 text-xs text-cyan-300">
+          {downloading ? '下载中…' : error ? `⚠ ${error}` : '↓ 下载'}
+        </span>
+      </button>
+    </div>
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.6.3-preview.37",
+  "version": "0.6.3-preview.39",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "main": "apps/desktop/electron/main.cjs",
   "scripts": {

package/tests/e2e-492-inline-preview/verify-summary.md

@@ -0,0 +1,41 @@
+# #492 inline preview — verification summary
+
+## Hard invariants (通信龙 v2 review)
+
+Adopting 通信龙's structural fix: the proxy **never** returns an inline response, regardless of what the file's real type is. `Content-Disposition: attachment` + `X-Content-Type-Options: nosniff` stay stamped on every download. The client uses the `X-Verified-Type` header to decide whether to blob-and-inline; a bug in the whitelist can only degrade rendering, never become an XSS vector on the dashboard origin.
+
+## verify.sh — 14/14 PASS (witnessed-green)
+
+Real hub + real dashboard dev server. Every case builds real bytes, uploads via the dashboard proxy, fetches back, and asserts on response headers + body cmp.
+
+| # | Case | Assertion |
+|---|---|---|
+| 1 | Real PNG | `X-Verified-Type: image/png` + `nosniff` + `Content-Disposition: attachment` |
+| 2 | SVG-in-.png (mime says image/png) | `X-Verified-Type` absent; attachment |
+| 3 | HTML-in-.png | `X-Verified-Type` absent |
+| 4 | HTML-in-.mp4 (mime says video/mp4) | `X-Verified-Type` absent |
+| 5 | PNG/HTML polyglot | `X-Verified-Type: image/png` + `nosniff` (the pin that stops HTML sniffing) |
+| 6 | Real PDF | `X-Verified-Type` absent (not whitelisted) |
+| 7 | Byte-identical cmp vs original | identical (preview path didn't mangle bytes) |
+
+## witnessed-RED proof
+
+Broke `detectSafeMime` to always return `image/png` (i.e. accept everything as an image):
+
+```
+── 2. SVG in .png ──          ✗ x-verified-type should be absent
+── 3. HTML in .png ──         ✗ x-verified-type should be absent
+── 4. HTML in .mp4 ──         ✗ x-verified-type should be absent
+── 6. PDF ──                  ✗ x-verified-type should be absent
+── Summary ──   PASS=10  FAIL=4
+```
+
+Exactly the four adversarial cases turned red. The real PNG (case 1) and the PNG polyglot (case 5) stayed green because both are genuine PNGs by magic bytes — the broken impl was accidentally right about them. **This is the correct signal**: green-when-broken-shouldn't-be doesn't count as verification; the test needs to be able to fire red on the mutation it claims to protect against.
+
+Restored + re-ran (`grep -c "WITNESSED-RED" route.ts` → 0).
+
+## What this does NOT prove (deliberately deferred)
+
+- **Browser-side behaviour of the blob URL.** The proxy returns bytes + `X-Verified-Type`; the browser wraps them in a blob and feeds `<img>`/`<video>`. That last step is tested manually — the design keeps the security boundary at the proxy so blob-level bugs can only degrade rendering, not create XSS.
+- **Multi-image lightbox integration.** The current click-through opens the blob URL in a new tab (satisfies the "点开大图" gate literally). Threading blob URLs into `TaskChatPanel`'s multi-image lightbox is a follow-up.
+- **Audio.** Design doc §9 confirms this is deliberate; adding audio is two whitelist rows.