@sleep2agi/agent-network-dashboard 0.6.3-preview.49 → 0.6.3-preview.50

package/app/tasks/page.tsx

@@ -1,459 +1,16 @@
 'use client';
 
-import { useEffect, useState, useCallback, Suspense } from 'react';
-import { useSearchParams } from 'next/navigation';
-import Link from 'next/link';
-import { useNetworkId } from '../lib/network-context';
-import { TaskDrawer } from '../components/TaskDrawer';
-import { EmptyState } from '../components/EmptyState';
-import { AliasAvatar } from '../components/AliasAvatar';
-import { previewContent } from '../components/utils';
-import { TASK_STATUSES, STATUS_CHIP_CLASS, STATUS_DOT_HEX, STATUS_BAR_CLASS } from '../lib/status';
+// #Stage-tasks: /tasks entry point. Thin wrapper — the whole layout
+// lives in TasksView so /tasks and /tasks/[id] share the same code
+// path (only diff: [id] page passes an initialSelectedId that seeds
+// the deep-link selection).
+//
+// The 21.5KB one-big-table + inline-expand + TaskDrawer implementation
+// that used to live here is replaced by the list+detail layout — see
+// TasksView.tsx header comment for the design rationale.
 
-interface Task {
-  task_id: string;
-  network_id?: string;
-  from_name: string;
-  to_name: string;
-  status: string;
-  priority: string;
-  content: string;
-  result: string;
-  created_at: string;
-  updated_at: string;
-  delivered_at: string;
-  started_at: string;
-  completed_at: string;
-  expires_at: string;
-}
-
-function statusBadge(status: string) {
-  const color = STATUS_CHIP_CLASS[status] || 'bg-gray-500/10 text-gray-400 border-gray-500/20';
-  return `text-xs px-2 py-0.5 rounded-md border ${color}`;
-}
-
-function priorityBadge(priority: string) {
-  if (priority === 'high') return 'text-red-400';
-  if (priority === 'low') return 'text-gray-600';
-  return 'text-gray-400';
-}
-
-function timeAgo(dateStr: string): string {
-  if (!dateStr) return '--';
-  const diff = Date.now() - new Date(dateStr.replace(' ', 'T') + 'Z').getTime();
-  const s = Math.floor(diff / 1000);
-  if (s < 60) return `${s}s ago`;
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-  return `${Math.floor(s / 86400)}d ago`;
-}
-
-function TasksContent() {
-  const searchParams = useSearchParams();
-  const { networkId } = useNetworkId();
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [count, setCount] = useState(0);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [expanded, setExpanded] = useState<Set<string>>(new Set());
-
-  const [filterStatus, setFilterStatus] = useState(searchParams.get('status') || '');
-  const [filterFrom, setFilterFrom] = useState('');
-  const [filterTo, setFilterTo] = useState('');
-  const [drawerTaskId, setDrawerTaskId] = useState<string | null>(null);
-
-  const toggleExpand = (taskId: string) => {
-    setExpanded(prev => {
-      const next = new Set(prev);
-      if (next.has(taskId)) next.delete(taskId);
-      else next.add(taskId);
-      return next;
-    });
-  };
-
-  const fetchTasks = useCallback(async () => {
-    try {
-      const params = new URLSearchParams();
-      if (networkId) params.set('network_id', networkId);
-      if (filterStatus) params.set('status', filterStatus);
-      if (filterFrom) params.set('from_name', filterFrom);
-      if (filterTo) params.set('to_name', filterTo);
-      params.set('limit', '100');
-
-      const res = await fetch(`/api/hub/tasks?${params.toString()}`);
-      if (res.status === 401) {
-        window.location.assign('/login');
-        return;
-      }
-      const data = await res.json();
-      setTasks(data.tasks || []);
-      setCount(data.count ?? (data.tasks?.length || 0));
-      setError('');
-    } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : 'fetch failed');
-    } finally {
-      setLoading(false);
-    }
-  }, [filterStatus, filterFrom, filterTo, networkId]);
-
-  useEffect(() => {
-    setLoading(true);
-    fetchTasks();
-    const interval = setInterval(fetchTasks, 5000);
-    return () => clearInterval(interval);
-  }, [fetchTasks]);
-
-  return (
-    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
-      {/* Header.
-          #209 R30 (mobile vertical rhythm — goal "大幅提升移动端体验",
-          extending R28's Overview pattern to /tasks): this mb-6 + the
-          From/To filter row mb-6 below both drop to mb-4 on phones,
-          restoring mb-6 from sm: up. Saves ~16 px per spot = ~32 px of
-          scroll reclaim on /tasks before the actual task rows. /tasks
-          is the second-most-trafficked page after Overview. */}
-      <div className="flex items-center gap-4 mb-4 sm:mb-6">
-        <h1 className="text-2xl font-bold text-white lg:ml-0 ml-10">Tasks</h1>
-        {/* Round 88 made this chip pagination-aware; #217 D6 hides it
-            entirely in the common case — the All tab right below shows
-            the same count. It only renders when it carries unique info
-            (loaded < total ⇒ the list is a slice). */}
-        {tasks.length < count && (
-          <span
-            className="text-xs bg-blue-900/30 text-blue-400 px-2 py-0.5 rounded-full border border-blue-800/30 tabular-nums"
-            title={`Showing ${tasks.length} of ${count} tasks`}
-          >
-            {tasks.length} / {count}
-          </span>
-        )}
-      </div>
-
-      {/* Round 75: hide the status tab strip + From/To filter row when
-          there are no tasks at all. Each tab would show "0" and the
-          filter inputs would have nothing to act on — pure noise above
-          the empty-state CTA. When at least one task exists, the chrome
-          comes back even if the current filter happens to hide
-          everything (so users can clear filters). */}
-      {tasks.length > 0 && <>
-      {/* Status Tabs — color-coded dots per status family so users can
-          scan the row at a glance. Active tab gets full chip styling
-          (bg + border + text color), inactive tabs only carry the dot
-          + neutral label so the active state remains the strong cue.
-          On narrow viewports (<sm) the row scrolls horizontally with
-          subtle gradient fade-edges (via .anet-tabstrip-wrap pseudo
-          elements) hinting more content. */}
-      <div className="anet-tabstrip-wrap mb-4">
-      <div className="anet-tabstrip flex sm:flex-wrap gap-1 bg-[#161618] rounded-lg border border-[#26262b] p-1 overflow-x-auto sm:overflow-x-visible scrollbar-thin">
-        {(() => {
-          // Round 56: compute per-status counts so the tab strip doubles as a
-          // status distribution dashboard. Matches Audit Log (r43) + Overview
-          // agent filter (r34) chip-with-count pattern.
-          const counts: Record<string, number> = {};
-          tasks.forEach(t => { counts[t.status] = (counts[t.status] || 0) + 1; });
-          return ['', ...TASK_STATUSES].map(s => {
-            const count = s === '' ? tasks.length : counts[s] || 0;
-            const isActive = filterStatus === s;
-            return (
-              <button
-                key={s}
-                onClick={() => setFilterStatus(s)}
-                disabled={count === 0 && s !== '' && !isActive}
-                className={`px-3 py-1.5 rounded-md text-xs transition-colors flex items-center gap-1.5 shrink-0 whitespace-nowrap disabled:opacity-30 disabled:cursor-not-allowed ${
-                  isActive
-                    ? `${STATUS_CHIP_CLASS[s] || 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20'} border`
-                    : 'text-gray-500 hover:text-gray-300 hover:bg-[#1c1c1f]/40'
-                }`}
-              >
-                {s && (
-                  <span
-                    aria-hidden
-                    className="inline-block w-1.5 h-1.5 rounded-full shrink-0"
-                    style={{ backgroundColor: STATUS_DOT_HEX[s] || '#6b7280' }}
-                  />
-                )}
-                <span>{s || 'All'}</span>
-                <span className={`text-[10px] tabular-nums ${isActive ? 'opacity-80' : 'text-gray-600'}`}>{count}</span>
-              </button>
-            );
-          });
-        })()}
-      </div>
-      </div>
-
-      {/* From/To Filters — same visual block as the status tabs above.
-          R30 (see header above): mb-6 → mb-4 sm:mb-6 mobile-tighten. */}
-      <div className="flex flex-wrap items-center gap-2 mb-4 sm:mb-6">
-        <div className="flex items-center gap-1.5 rounded-lg border border-[#26262b] bg-[#161618] px-2.5 py-1.5 focus-within:border-blue-500/40">
-          <span className="text-[10px] uppercase tracking-wide text-gray-600">From</span>
-          <input
-            type="text"
-            value={filterFrom}
-            onChange={e => setFilterFrom(e.target.value)}
-            placeholder="any node"
-            className="w-28 bg-transparent text-base sm:text-sm text-white placeholder-gray-700 focus:outline-none"
-          />
-        </div>
-        <div className="flex items-center gap-1.5 rounded-lg border border-[#26262b] bg-[#161618] px-2.5 py-1.5 focus-within:border-blue-500/40">
-          <span className="text-[10px] uppercase tracking-wide text-gray-600">To</span>
-          <input
-            type="text"
-            value={filterTo}
-            onChange={e => setFilterTo(e.target.value)}
-            placeholder="any node"
-            className="w-28 bg-transparent text-base sm:text-sm text-white placeholder-gray-700 focus:outline-none"
-          />
-        </div>
-        {(filterStatus || filterFrom || filterTo) && (
-          <button
-            type="button"
-            onClick={() => { setFilterStatus(''); setFilterFrom(''); setFilterTo(''); }}
-            className="rounded-lg border border-gray-700 px-2.5 py-1.5 text-[11px] text-gray-500 hover:text-gray-200 hover:border-gray-600"
-          >
-            Clear filters
-          </button>
-        )}
-      </div>
-      </>}
-
-      {/* Status distribution */}
-      {tasks.length > 0 && !filterStatus && (() => {
-        const stats: Record<string, number> = {};
-        tasks.forEach(t => { stats[t.status] = (stats[t.status] || 0) + 1; });
-        const total = tasks.length || 1;
-        // Round 67: derive from shared TASK_STATUSES + STATUS_BAR_CLASS in
-        // app/lib/status.ts. Adding a new lifecycle status updates badge,
-        // tab dots, and bar in one edit.
-        const bars = TASK_STATUSES
-          .map(key => ({ key, color: STATUS_BAR_CLASS[key] }))
-          .filter(b => stats[b.key]);
-        if (!bars.length) return null;
-        // Round 63: removed the per-status legend row beneath the bar —
-        // it duplicated the counts already shown in the tab chip strip
-        // since r56. The proportional bar stays because it adds a visual
-        // "shape of workload" that the chip numbers don't convey.
-        return (
-          <div className="mb-6">
-            <div className="flex h-2 rounded-full overflow-hidden bg-gray-800">
-              {bars.map(b => <div key={b.key} className={b.color} style={{ width: `${(stats[b.key]/total)*100}%` }} title={`${b.key}: ${stats[b.key]}`} />)}
-            </div>
-          </div>
-        );
-      })()}
-
-      {error && (
-        <div className="bg-red-900/20 border border-red-800/40 text-red-300 px-4 py-2 rounded-lg mb-6 text-sm">{error}</div>
-      )}
-
-      {loading ? (
-        <div className="animate-pulse space-y-3">
-          {[1, 2, 3, 4, 5].map(i => (
-            <div key={i} className="h-20 bg-gray-800/20 rounded-lg border border-gray-800/40" />
-          ))}
-        </div>
-      ) : tasks.length === 0 ? (
-        <EmptyState
-          variant="tasks"
-          sub={(filterStatus || filterFrom || filterTo)
-            ? 'No tasks match the current filters. Try clearing them.'
-            : 'Tasks will appear here when agents send them via CommHub.'}
-        />
-      ) : (
-        <div className="space-y-1 sm:space-y-2">
-          {/* Table header */}
-          <div className="hidden sm:grid sm:grid-cols-12 gap-2 px-4 py-2 text-xs text-gray-600 uppercase">
-            <div className="col-span-1">Status</div>
-            <div className="col-span-2">From</div>
-            <div className="col-span-2">To</div>
-            <div className="col-span-4">Content</div>
-            <div className="col-span-1">Priority</div>
-            <div className="col-span-2">Time</div>
-          </div>
-
-          {tasks.map(t => {
-            const isOpen = expanded.has(t.task_id);
-            return (
-            <div
-              key={t.task_id}
-              className={`anet-task-row group bg-[#161618] border rounded-lg px-3 py-2 sm:px-4 sm:py-3 transition-all duration-200 cursor-pointer ${
-                isOpen
-                  ? 'border-[#3a3a41] shadow-lg shadow-black/20'
-                  : 'border-[#26262b] hover:border-[#3a3a41] hover:bg-[#15152e]'
-              }`}
-              onClick={() => toggleExpand(t.task_id)}
-              role="button"
-              tabIndex={0}
-              aria-expanded={isOpen}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault();
-                  toggleExpand(t.task_id);
-                }
-              }}
-            >
-              {/* Desktop row */}
-              <div className="hidden sm:grid sm:grid-cols-12 gap-2 items-center">
-                <div className="col-span-1">
-                  <span className={statusBadge(t.status)}>{t.status}</span>
-                </div>
-                <div className="col-span-2 flex items-center gap-1.5 min-w-0" title={t.from_name}>
-                  {t.from_name && <AliasAvatar alias={t.from_name} size={18} />}
-                  <span className="truncate text-sm text-gray-200">{t.from_name || '--'}</span>
-                </div>
-                <div className="col-span-2 flex items-center gap-1.5 min-w-0" title={t.to_name}>
-                  {t.to_name && <AliasAvatar alias={t.to_name} size={18} />}
-                  <span className="truncate text-sm text-gray-200">{t.to_name || '--'}</span>
-                </div>
-                <div className="col-span-4 text-xs text-gray-400 truncate" title={t.content}>
-                  {previewContent(t.content)}
-                </div>
-                <div className="col-span-1">
-                  <span className={`text-xs ${priorityBadge(t.priority)}`}>{t.priority || 'normal'}</span>
-                </div>
-                <div className="col-span-2 text-xs text-gray-500 flex items-center justify-between gap-2" title={t.created_at}>
-                  <span className="truncate">{timeAgo(t.created_at)}</span>
-                  <svg
-                    aria-hidden
-                    className={`shrink-0 text-gray-600 group-hover:text-gray-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
-                    width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
-                  >
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
-                  </svg>
-                </div>
-              </div>
-
-              {/* Mobile layout — R8 of #190 mobile polish: 4-row stack
-                  → 3-row by inlining timeAgo onto the same row as the
-                  from→to alias header (it's already 4 small atoms, has
-                  room), plus space-y-2 → space-y-1 to trim ~4px per
-                  row × 200 tasks. */}
-              <div className="sm:hidden space-y-1">
-                <div className="flex items-center justify-between">
-                  <span className={statusBadge(t.status)}>{t.status}</span>
-                  <div className="flex items-center gap-2">
-                    <span className={`text-xs ${priorityBadge(t.priority)}`}>{t.priority || 'normal'}</span>
-                    <svg
-                      aria-hidden
-                      className={`text-gray-600 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
-                      width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
-                    >
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
-                    </svg>
-                  </div>
-                </div>
-                <div className="flex items-center gap-1.5 text-xs text-gray-300 min-w-0">
-                  {t.from_name && <AliasAvatar alias={t.from_name} size={16} />}
-                  <span className="truncate max-w-[35%]">{t.from_name || '--'}</span>
-                  <span className="text-gray-600">&rarr;</span>
-                  {t.to_name && <AliasAvatar alias={t.to_name} size={16} />}
-                  <span className="truncate max-w-[35%]">{t.to_name || '--'}</span>
-                  <span className="ml-auto shrink-0 text-[10px] text-gray-600">{timeAgo(t.created_at)}</span>
-                </div>
-                <div className="text-xs text-gray-400 line-clamp-1" title={t.content}>{previewContent(t.content)}</div>
-              </div>
-
-              {/* Expanded detail — always mounted; grid-rows 0fr↔1fr trick gives
-                  content-aware smooth max-height animation without measuring DOM. */}
-              <div
-                className={`grid transition-all duration-300 ease-out ${
-                  isOpen ? 'grid-rows-[1fr] opacity-100 mt-3' : 'grid-rows-[0fr] opacity-0'
-                }`}
-                aria-hidden={!isOpen}
-              >
-                <div className="overflow-hidden">
-                <div className="pt-3 border-t border-[#26262b] space-y-3">
-                  {t.content && (
-                    <div>
-                      <div className="text-xs text-gray-600 mb-1">Content</div>
-                      <div className="text-xs text-gray-300 whitespace-pre-wrap bg-[#0e0e10] rounded-lg px-3 py-2 border border-[#1c1c1f]">{t.content}</div>
-                    </div>
-                  )}
-                  {t.result && (
-                    <div>
-                      <div className="text-xs text-gray-600 mb-1">Result</div>
-                      <div className="text-xs text-gray-300 whitespace-pre-wrap bg-[#0e0e10] rounded-lg px-3 py-2 border border-[#1c1c1f] max-h-48 overflow-y-auto">{t.result}</div>
-                    </div>
-                  )}
-                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
-                    {[
-                      ['Created', t.created_at],
-                      ['Delivered', t.delivered_at],
-                      ['Started', t.started_at],
-                      ['Completed', t.completed_at],
-                    ].map(([label, val]) => (
-                      <div key={label as string}>
-                        <span className="text-gray-600">{label}: </span>
-                        <span className="text-gray-400">{val ? timeAgo(val as string) : '--'}</span>
-                      </div>
-                    ))}
-                  </div>
-                  {t.expires_at && (
-                    <div className="text-xs">
-                      <span className="text-gray-600">Expires: </span>
-                      <span className="text-orange-400">{t.expires_at}</span>
-                    </div>
-                  )}
-                  <div className="flex items-center justify-between gap-2">
-                    <div className="text-xs text-gray-600 truncate" title={t.task_id}>
-                      ID: {t.task_id}
-                    </div>
-                    <div className="flex gap-2 shrink-0">
-                      {(t.status === 'failed' || t.status === 'expired') && (
-                        <button
-                          onClick={async (e) => {
-                            e.stopPropagation();
-                            await fetch('/api/hub/send', {
-                              method: 'POST',
-                              headers: { 'Content-Type': 'application/json' },
-                              body: JSON.stringify({
-                                alias: t.to_name, task: t.content, priority: t.priority,
-                                // P0 network_id fix: retry in the task's own network.
-                                ...((t.network_id || networkId) ? { network_id: t.network_id || networkId } : {}),
-                              }),
-                            });
-                            fetchTasks();
-                          }}
-                          className="text-xs text-orange-400 hover:text-orange-300 px-2 py-0.5 rounded border border-orange-500/20 hover:bg-orange-500/10"
-                        >
-                          Retry
-                        </button>
-                      )}
-                      <button
-                        onClick={e => { e.stopPropagation(); setDrawerTaskId(t.task_id); }}
-                        className="text-xs text-cyan-400 hover:text-cyan-300"
-                      >
-                        Detail &rarr;
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                </div>
-              </div>
-            </div>
-            );
-          })}
-        </div>
-      )}
-
-      {drawerTaskId && <TaskDrawer taskId={drawerTaskId} onClose={() => setDrawerTaskId(null)} />}
-    </div>
-  );
-}
+import { TasksView } from './TasksView';
 
 export default function TasksPage() {
-  return (
-    <Suspense fallback={
-      // #209 R30 (playwright mobile-shot caught it): the bare Suspense
-      // fallback rendered "Loading tasks..." at p-6 with no left-indent,
-      // so the fixed top-3 left-3 mobile burger (56 px right-edge) sat
-      // right on top of "Loa" — the screenshot read as a broken page.
-      // Match the loaded layout: p-4 sm:p-6 page padding + ml-10 mobile
-      // indent on the text, so the burger clears and the loading state
-      // visually maps to the populated page.
-      <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
-        <div className="lg:ml-0 ml-10 text-gray-500 text-sm">Loading tasks…</div>
-      </div>
-    }>
-      <TasksContent />
-    </Suspense>
-  );
+  return <TasksView />;
 }

package/package.json

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

package/tests/e2e-sidebar-default.spec.ts

@@ -0,0 +1,141 @@
+import { test, expect, Page } from '@playwright/test';
+
+const BASE = process.env.TEST_URL || 'http://localhost:3100';
+
+// 07-31 fix — Sidebar default should be 'icon-rail' for NEW visitors,
+// but MUST NOT overwrite an existing choice in localStorage. The
+// two are trivially entangled: setting the initial `useState` to
+// 'icon-rail' fixes the first (default = narrow) and the useEffect
+// that reads `anet-sidebar-mode` preserves the second (existing
+// user's expanded/collapsed stays).
+//
+// 通信龙 07-31 review:
+// > 只写第一条是不够的 — 第二条正是"改默认"最容易顺手破坏的东西，
+// > 而且破坏了不会报错，用户只会觉得"这破玩意儿又变回去了"
+//
+// So we assert BOTH sides. Witnessed-red plan documented at the end
+// of this file — mutation "remove the useEffect body" leaves test A
+// green but reds test B, which is exactly the coverage claim.
+
+// Per-worker login cache — the dashboard rate-limits logins to
+// 10 / 15min / IP; per e2e-sidebar-icon-rail.spec.ts. Same pattern.
+let cachedCookie: string | undefined;
+
+async function login(context: Page['context'] extends () => infer C ? C : never) {
+  if (cachedCookie) {
+    await context.addCookies([{
+      name: 'anet_dashboard_session',
+      value: cachedCookie,
+      domain: new URL(BASE).hostname,
+      path: '/',
+    }]);
+    return;
+  }
+  const res = await context.request.post(`${BASE}/api/auth/login`, {
+    data: { password: process.env.ANET_DASHBOARD_PASSWORD || 'admin123' },
+  });
+  const setCookie = res.headers()['set-cookie'] || '';
+  const m = setCookie.match(/anet_dashboard_session=([^;]+)/);
+  if (m) {
+    cachedCookie = decodeURIComponent(m[1]);
+    await context.addCookies([{
+      name: 'anet_dashboard_session',
+      value: cachedCookie,
+      domain: new URL(BASE).hostname,
+      path: '/',
+    }]);
+  }
+}
+
+async function stubHub(page: Page) {
+  await page.route('**/api/hub/status**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ sessions: [] }) }));
+  await page.route('**/api/hub/nodes**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ nodes: [] }) }));
+  await page.route('**/api/hub/networks**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ networks: [{ network_id: 'net_x', network_name: 'net_x' }] }) }));
+  await page.route('**/api/hub/health', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true, version: '0.9.0-test', sse_connections: 0, sse_sessions: {} }) }));
+  await page.route('**/api/hub/tasks**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ tasks: [] }) }));
+  await page.route('**/api/hub/stats**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({}) }));
+  await page.route('**/api/hub/messages**', r =>
+    r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ messages: [] }) }));
+}
+
+test.describe('Sidebar default (07-31)', () => {
+  test('A — first-visit user (no localStorage) gets icon-rail by default, width ~56px', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    // Make sure NOTHING is in localStorage — first-visit simulation.
+    await page.addInitScript(() => window.localStorage.removeItem('anet-sidebar-mode'));
+    await page.goto(`${BASE}/`);
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'icon-rail', { timeout: 15000 });
+    // Numeric width — spec's 56px target. Sub-pixel wiggle allowed
+    // (rounding / scrollbar). N站马's measurement of 207px on the
+    // pre-fix build corresponded to expanded (w-52 = 208px), so any
+    // number in this range is unambiguously the narrow form.
+    const w = await page.locator('[data-anet-sidebar="true"]').first().evaluate(el => el.getBoundingClientRect().width);
+    expect(w).toBeGreaterThanOrEqual(48);
+    expect(w).toBeLessThanOrEqual(64);
+  });
+
+  test('B — returning user with expanded already stored is NOT overwritten', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    // Seed the "existing user chose expanded" scenario — this is
+    // exactly the case a naive "just change the default" would break.
+    await page.addInitScript(() => window.localStorage.setItem('anet-sidebar-mode', 'expanded'));
+    await page.goto(`${BASE}/`);
+    // The rendered mode MUST honor stored choice, not overwrite it.
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'expanded', { timeout: 15000 });
+    // Width should match expanded (w-52 = ~208px), NOT icon-rail (56px).
+    const w = await page.locator('[data-anet-sidebar="true"]').first().evaluate(el => el.getBoundingClientRect().width);
+    expect(w).toBeGreaterThan(180);
+    // Sibling positive assertion — labels visible (proves it's actually
+    // expanded, not "sidebar failed to render past hydration"). Without
+    // this, a bug that fails to render the whole aside would still
+    // satisfy "not icon-rail width".
+    await expect(page.locator('[data-nav-item][data-nav-href="/"]')).toContainText('Overview');
+    // localStorage still holds 'expanded' after mount — not silently
+    // rewritten to something else.
+    expect(await page.evaluate(() => window.localStorage.getItem('anet-sidebar-mode'))).toBe('expanded');
+  });
+
+  test('C — returning user with collapsed already stored is NOT overwritten either', async ({ page, context }) => {
+    await login(context);
+    await stubHub(page);
+    await page.addInitScript(() => window.localStorage.setItem('anet-sidebar-mode', 'collapsed'));
+    await page.goto(`${BASE}/`);
+    await expect(page.locator('[data-anet-sidebar="true"]')).toHaveAttribute('data-sidebar-mode', 'collapsed', { timeout: 15000 });
+    const w = await page.locator('[data-anet-sidebar="true"]').first().evaluate(el => el.getBoundingClientRect().width);
+    // w-16 = 64px
+    expect(w).toBeGreaterThanOrEqual(56);
+    expect(w).toBeLessThanOrEqual(80);
+  });
+});
+
+// Witnessed-red plan (executed manually, documented here for future
+// readers per 通信龙's "witnessed-red should show numbers" rule):
+//
+// Mutation: comment out the useEffect body in Sidebar.tsx that reads
+// localStorage — the store-preservation path.
+//
+//   useEffect(() => {
+//     // try {
+//     //   const v = localStorage.getItem(SIDEBAR_MODE_STORAGE);
+//     //   if (v && (SIDEBAR_MODES as readonly string[]).includes(v)) setMode(v as SidebarMode);
+//     // } catch {}
+//   }, []);
+//
+// Expected under mutation:
+//   - Test A stays GREEN. No LS means nothing to read anyway; default
+//     'icon-rail' still applies.
+//   - Test B REDS. Expected data-sidebar-mode='expanded', received
+//     'icon-rail'. Width also reds (Expected > 180, Received ~56).
+//   - Test C REDS. Same shape.
+//
+// If Test B stays green while A does too, the useEffect isn't actually
+// standing between us and the "silently overwriting" failure — the
+// two tests are testing the same thing and one of them is redundant.