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

package/app/components/Sidebar.tsx

@@ -8,6 +8,35 @@ import useSWR from 'swr';
 import { useNetworkId } from '../lib/network-context';
 import { isOnline as presenceIsOnline, presenceStatus } from '../lib/presence';
 import { useHealth } from '../lib/hooks';
+import { useChatUnread, badgeLabel } from '../lib/chat-unread';
+
+// Sidebar has THREE render modes (通信龙 07-31 brief, dashboard 类飞书):
+//   'expanded'  — w-52, icons + labels. Original default; unchanged.
+//   'collapsed' — w-16, icons only, native `title=` tooltips. Existing
+//                 pre-icon-rail form; kept intact for users on it.
+//   'icon-rail' — w-14, Feishu-style narrow icon-only rail with
+//                 UNREAD BADGES on nav items that can carry them, and
+//                 tighter spacing. Distinguishes from 'collapsed' by
+//                 the badges + width — collapsed has neither.
+//
+// Cycle order (single toggle button, bottom-left arrow): expanded →
+// collapsed → icon-rail → expanded. localStorage key `anet-sidebar-mode`
+// persists the choice across reloads. Migration: pre-existing users
+// have no key set → default to 'expanded' (backward compat: nobody who
+// hadn't touched it gets a surprise on next visit).
+//
+// The `collapsed` bool that existing markup consumes is derived
+// (`mode !== 'expanded'`) — so all pre-icon-rail styling paths keep
+// working exactly as before, with icon-rail adding only its extras
+// (narrower width class + badges + a data attribute for tests).
+type SidebarMode = 'expanded' | 'collapsed' | 'icon-rail';
+const SIDEBAR_MODES: readonly SidebarMode[] = ['expanded', 'collapsed', 'icon-rail'] as const;
+const SIDEBAR_MODE_STORAGE = 'anet-sidebar-mode';
+const SIDEBAR_MODE_LABEL: Record<SidebarMode, string> = {
+  expanded: '展开',
+  collapsed: '折叠',
+  'icon-rail': '图标',
+};
 
 const networkFetcher = (url: string) => fetch(url).then(r => r.ok ? r.json() : { networks: [] });
 
@@ -38,7 +67,45 @@ const ROLE_ICON: Record<string, string> = { owner: '⭐', admin: '🔧', member:
 
 export function Sidebar() {
   const pathname = usePathname();
-  const [collapsed, setCollapsed] = useState(false);
+  // Default = 'icon-rail' per Vincent 07-31 "飞书同版体验": nobody clicks
+  // a toggle to make their sidebar narrow — the narrow form IS the
+  // experience. Existing user preferences (whoever has already picked
+  // expanded or collapsed via the cycle button) are preserved via the
+  // useEffect below, which is the ONLY thing standing between "sane
+  // new-user default" and "silently overwriting an existing choice" —
+  // the second failure is the one that reads to users as "the app
+  // forgot my setting" and it has no error surface, so it needs its
+  // own witnessed-red assertion (see e2e-sidebar-default.spec.ts).
+  const [mode, setMode] = useState<SidebarMode>('icon-rail');
+  useEffect(() => {
+    try {
+      const v = localStorage.getItem(SIDEBAR_MODE_STORAGE);
+      if (v && (SIDEBAR_MODES as readonly string[]).includes(v)) setMode(v as SidebarMode);
+    } catch {}
+  }, []);
+  const cycleMode = () => {
+    setMode(current => {
+      const idx = SIDEBAR_MODES.indexOf(current);
+      const next = SIDEBAR_MODES[(idx + 1) % SIDEBAR_MODES.length];
+      try { localStorage.setItem(SIDEBAR_MODE_STORAGE, next); } catch {}
+      return next;
+    });
+  };
+  // Derived: existing markup uses `collapsed` (any non-expanded state
+  // hides text + narrows). icon-rail behaves like collapsed by default
+  // but adds badges + narrower width class further down.
+  const collapsed = mode !== 'expanded';
+  const iconRail = mode === 'icon-rail';
+  // Only pulled in icon-rail mode so the SWR fetch cost (which happens
+  // anyway on other pages via useChatUnread) isn't duplicated for
+  // no visual gain when badges aren't drawn.
+  const { totalUnread } = useChatUnread();
+  // Which nav entries carry a badge in icon-rail mode. Kept as an
+  // exact map (not a fuzzy lookup) so a future nav-item rename can't
+  // silently orphan a badge onto the wrong route.
+  const NAV_BADGE: Partial<Record<string, number>> = {
+    '/nodes': totalUnread,
+  };
   // Theme switcher (Vincent 07-20 "主题还不能切换吗" — the Settings entry was
   // too buried; a sidebar control is findable from every page). Cycle order
   // matches Settings: 深色(默认) → 浅色 → Slack.
@@ -86,26 +153,95 @@ export function Sidebar() {
   };
 
   const nav = (
-    <nav className="flex flex-col gap-1 px-2 py-4">
-      {NAV_ITEMS.map(item => (
-        <Link
-          key={item.href}
-          href={item.href}
-          prefetch={false}
-          onClick={() => setMobileOpen(false)}
-          title={collapsed ? item.label : undefined}
-          className={`relative flex items-center gap-3 px-3 py-3 rounded-lg text-sm transition-colors active:bg-[#232327] ${
-            isActive(item.href)
-              ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20 anet-nav-active'
-              : 'text-gray-400 hover:text-gray-200 hover:bg-[#1c1c1f]'
-          } ${collapsed ? 'justify-center px-0' : ''}`}
-        >
-          <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-            <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
-          </svg>
-          {!collapsed && <span>{item.label}</span>}
-        </Link>
-      ))}
+    <nav
+      className={`flex flex-col ${iconRail ? 'gap-2 px-0 py-2 items-center' : 'gap-1 px-2 py-4'}`}
+      data-sidebar-nav
+    >
+      {NAV_ITEMS.map(item => {
+        const badge = iconRail ? (NAV_BADGE[item.href] ?? 0) : 0;
+        const active = isActive(item.href);
+        if (iconRail) {
+          // SPEC v1 (设计负责人, 07-31, /home/vansin/dashboard-ui-ref/SPEC.md §3):
+          //   - Container: 44×44 tap area (icon 24 + 10px padding all sides)
+          //   - Icon SVG: 24×24, centered
+          //   - Default icon color: #64748B; hover: #E2E8F0 + bg rgba(255,255,255,0.04)
+          //   - Selected: icon #7DD3FC + bg rgba(125,211,252,0.12) rounded 8px 40×40 + 3px left bar length 20px
+          //   - Gap between items: 8px (nav's gap-2)
+          //   - No border between rail and next column (contrast via bg brightness)
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              prefetch={false}
+              onClick={() => setMobileOpen(false)}
+              title={item.label}
+              aria-label={item.label}
+              data-nav-item
+              data-nav-href={item.href}
+              data-nav-active={active ? 'true' : undefined}
+              data-badge={badge > 0 ? String(badge) : undefined}
+              className="relative flex items-center justify-center w-11 h-11 group anet-nav-item-rail"
+            >
+              {/* 3px left indicator bar for selected — 20px length, 2px
+                  round, matches spec. Positioned absolute so it hangs
+                  off the container without moving the icon. */}
+              {active && (
+                <span
+                  aria-hidden
+                  data-nav-active-bar
+                  className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-[2px] bg-[#7DD3FC]"
+                />
+              )}
+              {/* 40×40 icon background square (selected only) — inner
+                  visual, centered inside the 44×44 tap container. */}
+              <span
+                className={`flex items-center justify-center w-10 h-10 rounded-lg transition-colors ${
+                  active
+                    ? 'bg-[rgba(125,211,252,0.12)] text-[#7DD3FC]'
+                    : 'text-[#64748B] hover:text-[#E2E8F0] hover:bg-[rgba(255,255,255,0.04)]'
+                }`}
+              >
+                <svg className="w-6 h-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
+                </svg>
+              </span>
+              {badge > 0 && (
+                <span
+                  aria-label={`${item.label} — ${badgeLabel(badge)} unread`}
+                  data-nav-badge
+                  className="absolute top-0 right-0 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[9px] font-semibold leading-4 text-center pointer-events-none"
+                >
+                  {badgeLabel(badge)}
+                </span>
+              )}
+            </Link>
+          );
+        }
+        // Non-icon-rail (expanded / collapsed) — unchanged legacy behavior.
+        return (
+          <Link
+            key={item.href}
+            href={item.href}
+            prefetch={false}
+            onClick={() => setMobileOpen(false)}
+            title={collapsed ? item.label : undefined}
+            aria-label={item.label}
+            data-nav-item
+            data-nav-href={item.href}
+            data-nav-active={active ? 'true' : undefined}
+            className={`relative flex items-center gap-3 rounded-lg text-sm transition-colors active:bg-[#232327] ${
+              active
+                ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20 anet-nav-active'
+                : 'text-gray-400 hover:text-gray-200 hover:bg-[#1c1c1f]'
+            } ${collapsed ? 'justify-center px-0 py-3' : 'px-3 py-3'}`}
+          >
+            <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
+            </svg>
+            {!collapsed && <span>{item.label}</span>}
+          </Link>
+        );
+      })}
     </nav>
   );
 
@@ -142,10 +278,14 @@ export function Sidebar() {
           in light themes so the sidebar reads as its own card.
           Round 47: explicit ease-out curve + slight shadow so the drawer
           edge "leaves a trail" as it slides in. */}
-      <aside data-anet-sidebar="true" className={`
-        fixed top-0 left-0 h-full z-40 bg-[#111113] border-r border-[#26262b]
+      <aside
+        data-anet-sidebar="true"
+        data-sidebar-mode={mode}
+        data-total-unread={totalUnread}
+        className={`
+        fixed top-0 left-0 h-full z-40
         transition-transform duration-200 ease-out
-        ${collapsed ? 'w-16' : 'w-52'}
+        ${mode === 'expanded' ? 'w-52 bg-[#111113] border-r border-[#26262b]' : mode === 'icon-rail' ? 'w-14 bg-[#0A0C14]' : 'w-16 bg-[#111113] border-r border-[#26262b]'}
         ${mobileOpen ? 'translate-x-0 shadow-2xl shadow-black/40 lg:shadow-none' : '-translate-x-full'}
         lg:translate-x-0 lg:static lg:shrink-0 lg:shadow-none
       `}>
@@ -252,12 +392,23 @@ export function Sidebar() {
           </button>
           <div className={`flex items-center ${collapsed ? 'flex-col px-0 py-2' : 'px-3 py-2 justify-end'}`}>
             <button
-              onClick={() => setCollapsed(!collapsed)}
-              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-              className="hidden lg:flex p-1.5 rounded text-gray-600 hover:text-gray-400 transition-colors"
-              aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+              onClick={cycleMode}
+              title={`当前：${SIDEBAR_MODE_LABEL[mode]} — 点击切换（展开 → 折叠 → 图标）`}
+              data-testid="sidebar-mode-cycle"
+              className="hidden lg:flex p-1.5 rounded text-gray-600 hover:text-gray-400 transition-colors items-center gap-1"
+              aria-label={`Cycle sidebar mode (current: ${mode})`}
             >
-              <svg className={`w-4 h-4 transition-transform ${collapsed ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              {/* Chevron rotates to hint at direction — expanded →
+                  points left (will collapse); collapsed → left too
+                  (will narrow further); icon-rail → right (will
+                  expand back to full width, wrapping the cycle). */}
+              <svg
+                className={`w-4 h-4 transition-transform ${mode === 'icon-rail' ? 'rotate-180' : ''}`}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
                 <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
               </svg>
             </button>

package/app/components/TaskChatPanel.tsx

@@ -1260,7 +1260,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
             mobile and the per-pair grouping (line 540) from space-y-2
             to space-y-1.5 so messages read denser without losing the
             speaker-turn rhythm. Desktop unchanged at sm: and up. */}
-        <div ref={scrollRef} onScroll={onMessagesScroll} className="flex-1 overflow-y-auto px-3 py-3 sm:px-4 sm:py-4 space-y-2 sm:space-y-4">
+        <div ref={scrollRef} onScroll={onMessagesScroll} data-testid="chat-messages-scroll" className="flex-1 overflow-y-auto px-3 py-3 sm:px-4 sm:py-4 space-y-2 sm:space-y-4">
           {searchOpen ? (
             <div className="sticky top-0 z-20 -mx-1 flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)]/95 px-2 py-1.5 shadow-lg shadow-black/30 backdrop-blur">
               <input

package/app/components/TaskDetail.tsx

@@ -0,0 +1,407 @@
+'use client';
+
+import { useState } from 'react';
+import useSWR from 'swr';
+import { AliasAvatar } from './AliasAvatar';
+import { STATUS_CHIP_CLASS as STATUS_CHIP } from '../lib/status';
+
+// Detail pane for the /tasks two-column layout.
+//
+// Feature-parity target (通信龙 07-31 parity 硬门, migrating from the
+// old full-page /tasks/[id]/page.tsx): five blocks, each with its own
+// positive assertion in tests + real data visible (not just "the div
+// is there"):
+//   1. Timeline card — steps: created / delivered / started / completed
+//   2. Info card     — task_id / from / to / priority / status / expires
+//   3. Content
+//   4. Result
+//   5. Events feed   — /api/hub/task-events?limit=50 (10s poll)
+//
+// Poll cadence — the old full-page useSWR was 5s (task) + 10s (events).
+// Do NOT widen either interval: "page's there but data's stale" is worse
+// than "page's not there" because it looks fine to anyone glancing at it.
+// The intervals are part of parity — tests should assert both refetch.
+
+interface TaskDetailData {
+  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;
+}
+
+interface TaskEvent {
+  id: number;
+  event_type: string;
+  from_status: string;
+  to_status: string;
+  detail: string;
+  created_at: string;
+}
+
+// 🔴 Poll cadences are declared as module-scope constants so the useSWR
+// refreshInterval and the DOM `data-poll-*-ms` attribute are *literally*
+// the same number. Two separate literals meant the attribute-based test
+// assertion could go green even if someone widened refreshInterval —
+// the assertion was watching the string, not the fact.
+// (通信龙 07-31 catch: "断言的是声明, 不是事实.")
+// Widen either interval only alongside a paired update to the test
+// asserting cadence, and re-run witnessed-red by bumping one of these
+// to a wrong value.
+const POLL_TASK_MS = 5000;
+const POLL_EVENTS_MS = 10000;
+
+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 priorityClass(priority: string) {
+  if (priority === 'high') return 'text-red-400';
+  if (priority === 'low') return 'text-gray-600';
+  return 'text-gray-400';
+}
+
+const fetcher = async (url: string) => {
+  const res = await fetch(url);
+  if (res.status === 401) {
+    window.location.assign('/login');
+    throw new Error('unauthorized');
+  }
+  return res.json();
+};
+
+export function TaskDetail({
+  taskId,
+  onClose,
+  onRetried,
+}: {
+  taskId: string;
+  /** X in the header — desktop returns pane to empty, mobile dismisses overlay.
+   *  Either way the URL drops back to /tasks (parent handles). Preserves the
+   *  返回入口 the old full-page detail had via its "← Tasks" link. */
+  onClose?: () => void;
+  /** After a successful retry so the parent list can refetch. */
+  onRetried?: () => void;
+}) {
+  // 🔴 Poll intervals are part of parity: 5s task, 10s events. Do not widen
+  // without updating the corresponding cadence assertion.
+  const { data: taskData, isLoading, error, mutate: refetchTask } = useSWR<{
+    tasks: TaskDetailData[];
+  }>(
+    `/api/hub/tasks?task_id=${encodeURIComponent(taskId)}`,
+    fetcher,
+    { refreshInterval: POLL_TASK_MS },
+  );
+  const { data: eventsData } = useSWR<{ events: TaskEvent[] }>(
+    `/api/hub/task-events?task_id=${encodeURIComponent(taskId)}&limit=50`,
+    fetcher,
+    { refreshInterval: POLL_EVENTS_MS },
+  );
+  const [retrying, setRetrying] = useState(false);
+
+  const task = taskData?.tasks?.[0];
+  const events = eventsData?.events || [];
+
+  const doRetry = async () => {
+    if (!task) return;
+    setRetrying(true);
+    try {
+      await fetch('/api/hub/send', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          alias: task.to_name,
+          task: task.content,
+          priority: task.priority,
+          ...(task.network_id ? { network_id: task.network_id } : {}),
+        }),
+      });
+      refetchTask();
+      onRetried?.();
+    } finally {
+      setRetrying(false);
+    }
+  };
+
+  const timelineSteps: { label: string; time: string; color: string }[] = task
+    ? [
+        { label: 'Created', time: task.created_at, color: 'text-gray-400' },
+        { label: 'Delivered', time: task.delivered_at, color: 'text-blue-400' },
+        { label: 'Started', time: task.started_at, color: 'text-green-400' },
+        { label: 'Completed', time: task.completed_at, color: 'text-purple-400' },
+      ]
+    : [];
+
+  return (
+    <div
+      data-testid="task-detail-pane"
+      data-task-id={taskId}
+      data-poll-task-ms={String(POLL_TASK_MS)}
+      data-poll-events-ms={String(POLL_EVENTS_MS)}
+      className="flex flex-col h-full max-h-screen overflow-hidden"
+    >
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[#1c1c1f]">
+        <div className="min-w-0 flex-1 flex items-center gap-2">
+          <div className="text-xs text-gray-500 truncate" title={taskId}>
+            <span className="text-gray-600">Task ID:</span>{' '}
+            <span className="font-mono">{taskId.slice(0, 12)}…</span>
+          </div>
+          {task && (
+            <span
+              data-testid="task-detail-status"
+              className={`text-xs px-2 py-0.5 rounded-md border ${
+                STATUS_CHIP[task.status] ||
+                'bg-gray-500/10 text-gray-400 border-gray-500/20'
+              }`}
+            >
+              {task.status}
+            </span>
+          )}
+        </div>
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close detail (返回 tasks 列表)"
+            data-testid="task-detail-close"
+            className="shrink-0 rounded-md border border-[#26262b] px-2 py-1 text-xs text-gray-400 hover:text-white hover:border-[#3a3a41]"
+          >
+            ←
+          </button>
+        )}
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+        {isLoading && !task && (
+          <div className="animate-pulse space-y-3">
+            <div className="h-6 w-1/3 bg-gray-800/40 rounded" />
+            <div className="h-24 bg-gray-800/40 rounded" />
+            <div className="h-24 bg-gray-800/40 rounded" />
+          </div>
+        )}
+        {error && (
+          <div className="bg-red-900/20 border border-red-800/40 text-red-300 px-3 py-2 rounded text-sm">
+            {error instanceof Error ? error.message : 'fetch failed'}
+          </div>
+        )}
+        {!isLoading && !error && !task && (
+          <div className="text-gray-400 text-sm">Task not found</div>
+        )}
+
+        {task && (
+          <>
+            {/* Block 1: Timeline card (parity #1) */}
+            <section
+              data-testid="task-detail-timeline"
+              data-block="timeline"
+              className="bg-[#161618] border border-[#26262b] rounded-xl p-4"
+            >
+              <h2 className="text-sm font-semibold text-gray-300 mb-4">Timeline</h2>
+              <div className="relative">
+                {timelineSteps.map((step, i) => {
+                  const done = !!step.time;
+                  const isLast = i === timelineSteps.length - 1;
+                  return (
+                    <div
+                      key={step.label}
+                      data-testid={`timeline-step-${step.label.toLowerCase()}`}
+                      data-timeline-step={step.label.toLowerCase()}
+                      data-timeline-done={done ? 'true' : 'false'}
+                      className="flex gap-3 pb-4 last:pb-0"
+                    >
+                      <div className="flex flex-col items-center">
+                        <div
+                          className={`w-3 h-3 rounded-full border-2 shrink-0 ${
+                            done ? `${step.color} border-current` : 'border-gray-700 bg-transparent'
+                          }`}
+                        />
+                        {!isLast && (
+                          <div
+                            className={`w-0.5 flex-1 mt-1 ${
+                              done && timelineSteps[i + 1]?.time
+                                ? 'bg-cyan-500/40'
+                                : 'bg-gray-800'
+                            }`}
+                          />
+                        )}
+                      </div>
+                      <div className="min-w-0 -mt-0.5">
+                        <div className={`text-sm font-medium ${done ? 'text-gray-200' : 'text-gray-600'}`}>
+                          {step.label}
+                        </div>
+                        <div
+                          className="text-xs text-gray-500"
+                          title={step.time || undefined}
+                        >
+                          {step.time ? `${timeAgo(step.time)} — ${step.time}` : 'Pending'}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </section>
+
+            {/* Block 2: Info card (parity #2) */}
+            <section
+              data-testid="task-detail-info"
+              data-block="info"
+              className="bg-[#161618] border border-[#26262b] rounded-xl p-4"
+            >
+              <h2 className="text-sm font-semibold text-gray-300 mb-3">Info</h2>
+              <div className="space-y-2 text-xs">
+                {[
+                  ['Task ID', task.task_id],
+                  ['From', task.from_name],
+                  ['To', task.to_name],
+                  ['Priority', task.priority],
+                  ['Status', task.status],
+                  ['Expires', task.expires_at],
+                ].map(([label, val]) => (
+                  <div key={label as string} className="flex justify-between gap-4">
+                    <span className="text-gray-500 shrink-0">{label}</span>
+                    <span
+                      data-info-field={String(label).toLowerCase().replace(/\s+/g, '-')}
+                      className="text-gray-300 truncate max-w-[240px] text-right"
+                      title={String(val || '')}
+                    >
+                      {String(val || '--')}
+                    </span>
+                  </div>
+                ))}
+              </div>
+              <div
+                className="mt-4 pt-3 border-t border-[#1c1c1f] flex items-center gap-2 text-sm text-gray-300"
+                data-testid="task-detail-participants"
+              >
+                {task.from_name && <AliasAvatar alias={task.from_name} size={20} />}
+                <span className="truncate">{task.from_name || '--'}</span>
+                <span className="text-gray-600 shrink-0">→</span>
+                {task.to_name && <AliasAvatar alias={task.to_name} size={20} />}
+                <span className="truncate">{task.to_name || '--'}</span>
+              </div>
+              <div className="mt-2 text-[10px]">
+                <span
+                  className={priorityClass(task.priority)}
+                  data-testid="task-detail-priority"
+                >
+                  Priority: {task.priority || 'normal'}
+                </span>
+              </div>
+            </section>
+
+            {/* Block 3: Content (parity #3) */}
+            <section
+              data-testid="task-detail-content"
+              data-block="content"
+              className="bg-[#161618] border border-[#26262b] rounded-xl p-4"
+            >
+              <h2 className="text-sm font-semibold text-gray-300 mb-2">Content</h2>
+              <pre
+                data-testid="task-detail-content-body"
+                className="text-xs text-gray-200 whitespace-pre-wrap break-words bg-[#0e0e10] rounded-lg px-3 py-2 border border-[#1c1c1f] max-h-64 overflow-y-auto font-sans"
+              >
+                {task.content || '--'}
+              </pre>
+            </section>
+
+            {/* Block 4: Result (parity #4) */}
+            {task.result && (
+              <section
+                data-testid="task-detail-result"
+                data-block="result"
+                className="bg-[#161618] border border-[#26262b] rounded-xl p-4"
+              >
+                <h2 className="text-sm font-semibold text-gray-300 mb-2">Result</h2>
+                <pre
+                  data-testid="task-detail-result-body"
+                  className="text-xs text-gray-200 whitespace-pre-wrap break-words bg-[#0e0e10] rounded-lg px-3 py-2 border border-[#1c1c1f] max-h-64 overflow-y-auto font-sans"
+                >
+                  {task.result}
+                </pre>
+              </section>
+            )}
+
+            {/* Block 5: Events feed (parity #5) — 10s poll, always rendered
+                even when empty so "no events" state is visible; a silently
+                missing block would hide the difference between "feed
+                gone" and "task has no events yet". */}
+            <section
+              data-testid="task-detail-events"
+              data-block="events"
+              data-events-count={events.length}
+              className="bg-[#161618] border border-[#26262b] rounded-xl p-4"
+            >
+              <h2 className="text-sm font-semibold text-gray-300 mb-3">
+                Events {events.length > 0 && <span className="text-gray-500">({events.length})</span>}
+              </h2>
+              {events.length === 0 ? (
+                <div className="text-xs text-gray-600 italic">No events yet.</div>
+              ) : (
+                <div className="space-y-2 max-h-64 overflow-y-auto">
+                  {events.map((e, i) => (
+                    <div
+                      key={e.id ?? i}
+                      data-testid="task-detail-event-row"
+                      className="flex items-center gap-2 text-xs"
+                    >
+                      <span
+                        aria-hidden
+                        className={`w-1.5 h-1.5 rounded-full shrink-0 ${
+                          e.to_status === 'running'
+                            ? 'bg-green-400'
+                            : e.to_status === 'replied'
+                              ? 'bg-purple-400'
+                              : e.to_status === 'failed'
+                                ? 'bg-red-400'
+                                : 'bg-blue-400'
+                        }`}
+                      />
+                      <span className="text-gray-400">{e.event_type}</span>
+                      {e.from_status && (
+                        <span className="text-gray-600">
+                          {e.from_status} → {e.to_status}
+                        </span>
+                      )}
+                      <span className="text-gray-600 ml-auto shrink-0" title={e.created_at}>
+                        {timeAgo(e.created_at)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </section>
+
+            {(task.status === 'failed' || task.status === 'expired') && (
+              <div>
+                <button
+                  onClick={doRetry}
+                  disabled={retrying}
+                  data-testid="task-detail-retry"
+                  className="text-xs text-orange-400 hover:text-orange-300 px-3 py-1.5 rounded-md border border-orange-500/30 hover:bg-orange-500/10 disabled:opacity-50 disabled:cursor-wait"
+                >
+                  {retrying ? 'Retrying…' : 'Retry task'}
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}