@sleep2agi/agent-network-dashboard 0.6.3-preview.36 → 0.6.3-preview.38

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

@@ -22,10 +22,99 @@ const HEADER_PASSTHROUGH = [
   '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 +129,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 +172,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 +184,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 +196,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 +207,26 @@ 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, {
+  // 🔴 Structural invariant: we do NOT modify Content-Disposition
+  // based on `verifiedType`. Even if the file IS a safe PNG, the
+  // hub-served disposition (`attachment`) stays. Client uses the
+  // header below to decide whether to blob+inline.
+  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/app/components/StatsBar.tsx

@@ -126,7 +126,7 @@ function StatCard({ value, label, sub, color }: {
     <div className="anet-stat-card rounded-xl border border-[#26262b] bg-[#161618] px-3 sm:px-4 py-2.5 sm:py-3 transition-all">
       <div className={`text-2xl sm:text-3xl font-bold ${color} tabular-nums leading-tight`}>{value}</div>
       <div className="text-xs sm:text-sm text-gray-300 mt-0.5">{label}</div>
-      <div className="text-[10px] sm:text-xs text-gray-600 mt-1">{sub}</div>
+      <div className="text-[10px] sm:text-xs text-gray-500 mt-1">{sub}</div>
     </div>
   );
 }

package/app/globals.css

@@ -1777,6 +1777,31 @@ joining the R145
 /* P0-2: Active nav — collapse the 4-emerald stack (bg + border + text + ring)
    to a single accent cue: 3px left bar + medium-weight text. Dark themes
    keep the existing tinted-pill look. */
+/* Active nav = ONE calm cue for ALL themes (design-polish #17 R3): a 4px left
+   bar + brightened text, NO bg billboard. Light/mint override below with their
+   emerald accent; the default-dark + cyber themes previously fell through to
+   the heavier inline cyan tint+border+cyan-text (the "competing surface" the
+   final spec dropped) — this brings them to the same calm treatment, in cyan. */
+.anet-nav-active {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  border-left: 4px solid #22d3ee !important;
+  border-radius: 0 8px 8px 0 !important;
+  padding-left: calc(0.75rem - 4px) !important;
+  color: #e5e7eb !important;
+  font-weight: 600;
+}
+.anet-nav-active:hover {
+  background-color: #1c1c1f !important;
+}
+aside.w-16 .anet-nav-active {
+  border-radius: 8px !important;
+  padding-left: 0 !important;
+  border-left: 0 !important;
+  background-color: rgba(34, 211, 238, 0.08) !important;
+  color: #67e8f9 !important;
+}
+
 [data-theme="light"] .anet-nav-active,
 [data-theme="mint"] .anet-nav-active {
   /* 通信龙 final spec (Q1 + 3-piece lockdown): active nav = ONE cue.
@@ -1837,6 +1862,20 @@ joining the R145
 /* Mint reuses the same chevron — color picker would need its own gray, but
    accent is similar enough that the default chevron color reads OK. */
 
+/* Dark-theme KPI cards: parity with light/mint's hover lift (design-polish
+   #17 R2). Light/mint had a tactile hover; the default dark cards were flat
+   (the inline `transition-all` had nothing to animate). Pure interaction
+   feedback — a subtle border-brighten + 1px rise, no resting color (keeps the
+   #217 D2 restraint). The more-specific light/mint rules below still win. */
+.anet-stat-card {
+  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
+}
+.anet-stat-card:hover {
+  border-color: #34343c;
+  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.7);
+  transform: translateY(-1px);
+}
+
 /* KPI stat cards in light mode: kill the gradient wash (which reads as
    pale-mud on white), replace with a 2px top accent strip per color
    family + real elevation shadow. Dark themes keep the gradient. */

package/app/login/page.tsx

@@ -51,6 +51,9 @@ export default function LoginPage() {
           Dark themes get a faint radial wash; light themes show a low-contrast
           dotted grid for surface texture without noise. */}
       <div className="absolute inset-0 pointer-events-none anet-login-bg" aria-hidden />
+      {/* Soft brand glow behind the card — adds depth to the flat near-black
+          field without competing with the form (design-polish #17 R1). */}
+      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[460px] h-[460px] rounded-full bg-cyan-500/[0.045] blur-[110px] pointer-events-none" aria-hidden />
 
       <div className="relative w-full max-w-sm">
         <div className="text-center mb-7">
@@ -69,10 +72,10 @@ export default function LoginPage() {
             </svg>
           </div>
           <h1 className="text-[22px] sm:text-2xl font-semibold text-white tracking-tight">Agent Network</h1>
-          <p className="text-[13px] text-gray-500 mt-1.5 leading-snug">
+          <p className="text-[13px] text-gray-400 mt-1.5 leading-snug">
             {mode === 'login'
-              ? <>Welcome back · <span className="text-gray-600">Tasks · Mesh · Messages</span></>
-              : <>Create your account · <span className="text-gray-600">Free preview · no credit card</span></>}
+              ? <>Welcome back · <span className="text-gray-500">Tasks · Mesh · Messages</span></>
+              : <>Create your account · <span className="text-gray-500">Free preview · no credit card</span></>}
           </p>
         </div>
 

package/app/settings/page.tsx

@@ -83,7 +83,16 @@ export default function SettingsPage() {
                     style={{ backgroundColor: t.swatch }}
                   />
                   {t.label}
-                  {theme === t.id && <span className="ml-auto text-cyan-400">✓</span>}
+                  {/* R4 (#17): the selected-state marker was a raw "✓" text
+                      glyph — it renders font-dependently and sat a touch off
+                      the row's optical baseline. Swap to the same inline-SVG
+                      check the rest of the dashboard uses (round 59 emoji→SVG
+                      migration), so the icon language is consistent and crisp. */}
+                  {theme === t.id && (
+                    <svg aria-hidden className="ml-auto w-4 h-4 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M20 6 9 17l-5-5" />
+                    </svg>
+                  )}
                 </button>
               ))}
             </div>
@@ -124,7 +133,7 @@ export default function SettingsPage() {
               </span>
             </div>
             {config?.error && (
-              <div className="border-t border-[#26262b] pt-3 text-xs text-gray-600">
+              <div className="border-t border-[#26262b] pt-3 text-xs text-gray-500">
                 {config.error}
               </div>
             )}