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

package/app/components/TaskList.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { AliasAvatar } from './AliasAvatar';
+import { previewContent } from './utils';
+import { STATUS_CHIP_CLASS, STATUS_DOT_HEX } from '../lib/status';
+
+// Task-list rail for the /tasks two-column layout (类飞书 "list + detail").
+// Rendered inside TasksView's <aside> — this file is intentionally small
+// and only owns the list-row shape, so the same component can back both
+// desktop rail and (later) a mobile drawer without duplicating the row
+// template.
+//
+// #Stage-tasks: mirrors NodeList.tsx narrow-rail pattern. Row click calls
+// onSelect(task_id) so the parent can drive URL/state; row does NOT know
+// about routing.
+
+export interface TaskListItem {
+  task_id: string;
+  network_id?: string;
+  from_name: string;
+  to_name: string;
+  status: string;
+  priority: string;
+  content: string;
+  created_at: string;
+}
+
+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`;
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`;
+  return `${Math.floor(s / 86400)}d`;
+}
+
+export function TaskList({
+  tasks,
+  selectedId,
+  onSelect,
+}: {
+  tasks: TaskListItem[];
+  selectedId: string | null;
+  onSelect: (task_id: string) => void;
+}) {
+  return (
+    <div
+      data-testid="task-list-rail"
+      className="flex flex-col h-full max-h-screen overflow-y-auto"
+    >
+      {tasks.length === 0 ? (
+        <div className="px-4 py-6 text-xs text-gray-600 text-center">
+          没有匹配的任务
+        </div>
+      ) : (
+        <ul className="flex flex-col divide-y divide-[#1c1c1f]">
+          {tasks.map((t) => {
+            const active = t.task_id === selectedId;
+            return (
+              <li key={t.task_id}>
+                <button
+                  type="button"
+                  data-task-row
+                  data-task-id={t.task_id}
+                  data-selected={active ? 'true' : 'false'}
+                  onClick={() => onSelect(t.task_id)}
+                  className={`w-full text-left px-3 py-2.5 transition-colors ${
+                    active
+                      ? 'bg-cyan-500/10 border-l-2 border-cyan-500'
+                      : 'border-l-2 border-transparent hover:bg-[#1c1c1f]/40'
+                  }`}
+                >
+                  <div className="flex items-center gap-2 mb-1">
+                    {/* status dot + label */}
+                    <span
+                      aria-hidden
+                      className="inline-block w-1.5 h-1.5 rounded-full shrink-0"
+                      style={{ backgroundColor: STATUS_DOT_HEX[t.status] || '#6b7280' }}
+                    />
+                    <span
+                      className={`text-[10px] px-1.5 py-0.5 rounded border ${
+                        STATUS_CHIP_CLASS[t.status] ||
+                        'bg-gray-500/10 text-gray-400 border-gray-500/20'
+                      }`}
+                    >
+                      {t.status}
+                    </span>
+                    {t.priority === 'high' && (
+                      <span className="text-[10px] text-red-400 shrink-0">HIGH</span>
+                    )}
+                    <span className="ml-auto text-[10px] text-gray-600 tabular-nums shrink-0">
+                      {timeAgo(t.created_at)}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1 text-xs text-gray-300 min-w-0 mb-1">
+                    {t.from_name && <AliasAvatar alias={t.from_name} size={14} />}
+                    <span className="truncate max-w-[35%]">{t.from_name || '--'}</span>
+                    <span className="text-gray-600 shrink-0">→</span>
+                    {t.to_name && <AliasAvatar alias={t.to_name} size={14} />}
+                    <span className="truncate max-w-[35%]">{t.to_name || '--'}</span>
+                  </div>
+                  <div
+                    className="text-[11px] text-gray-500 line-clamp-2 leading-snug"
+                    title={t.content}
+                  >
+                    {previewContent(t.content) || <span className="italic">(no content)</span>}
+                  </div>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/app/nodes/NodesView.tsx

@@ -135,6 +135,28 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
     window.addEventListener('popstate', onPop);
     return () => window.removeEventListener('popstate', onPop);
   }, []);
+  // #Stage D: the shell above us (AppShell) keeps a ~28px HealthBanner in
+  // flow even when green, and its root is min-h (content-driven), so a
+  // plain h-[100dvh] here overflows the viewport by exactly the banner
+  // height and the document scrolls again. AppShell is shared by every
+  // page (out of Stage D scope) — instead, size this page to the space
+  // actually left below whatever the shell renders above us. The
+  // ResizeObserver on body re-measures when the banner appears/collapses/
+  // is dismissed. className keeps h-[100dvh] as the SSR first paint.
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const apply = () => {
+      const top = el.getBoundingClientRect().top + window.scrollY;
+      el.style.height = `${Math.max(240, window.innerHeight - top)}px`;
+    };
+    apply();
+    window.addEventListener('resize', apply);
+    const ro = new ResizeObserver(apply);
+    ro.observe(document.body);
+    return () => { window.removeEventListener('resize', apply); ro.disconnect(); };
+  }, []);
   const [showCreate, setShowCreate] = useState(false);
   // #Stage A (dashboard 3-col, 07-31): persistent narrow node list rail
   // to the left of the existing table. Default on; user can hide to
@@ -229,9 +251,10 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
 
   return (
     <div
+      ref={rootRef}
       data-testid="nodes-layout"
       data-rail-visible={showRail ? 'true' : 'false'}
-      className="min-h-screen max-w-full overflow-x-hidden bg-[#0b0b0d] text-gray-100 flex"
+      className="h-[100dvh] max-w-full overflow-hidden bg-[#0b0b0d] text-gray-100 flex"
     >
       {/* #Stage A rail — only mounted when showRail is true AND we're
           past the mobile breakpoint (below sm, rail is hidden by CSS
@@ -244,12 +267,14 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
       {(showRail || chatOpenDesktop) && sessions.length > 0 && (
         <aside
           data-testid="node-list-rail"
-          className="hidden sm:flex sm:flex-col w-[280px] shrink-0 min-h-screen sticky top-0"
+          className="hidden sm:flex sm:flex-col w-[280px] shrink-0 h-full min-h-0 bg-[#0F1320]"
         >
           <NodeList
             sessions={railSessions}
             selectedAlias={chatAlias}
             onSelect={selectNode}
+            search={search}
+            onSearchChange={setSearch}
           />
         </aside>
       )}
@@ -257,7 +282,7 @@ export function NodesView({ initialAlias = null }: { initialAlias?: string | nul
           only when NO node is selected on desktop — see chatOpenDesktop
           note above. Mobile keeps it always (chat is an overlay there). */}
       {!chatOpenDesktop && (
-      <div className="flex-1 min-w-0 max-w-full overflow-x-hidden p-4 sm:p-6">
+      <div className="flex-1 min-w-0 max-w-full h-full overflow-y-auto overflow-x-hidden p-4 sm:p-6">
       {/* #209 R31 (mobile vertical rhythm — goal "大幅提升移动端体验",
           extending R28's Overview pattern + R30's /tasks pattern):
           this header row + the status-bar wrapper + the filter row

package/app/tasks/TasksView.tsx

@@ -0,0 +1,353 @@
+'use client';
+
+import {
+  Suspense,
+  useCallback,
+  useEffect,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { useSearchParams } from 'next/navigation';
+import { useNetworkId } from '../lib/network-context';
+import { EmptyState } from '../components/EmptyState';
+import { TaskList, type TaskListItem } from '../components/TaskList';
+import { TaskDetail } from '../components/TaskDetail';
+import {
+  TASK_STATUSES,
+  STATUS_CHIP_CLASS,
+  STATUS_DOT_HEX,
+  STATUS_BAR_CLASS,
+} from '../lib/status';
+
+// #Stage-tasks (dashboard 类飞书 two-column, 07-31):
+//
+// /tasks moves from one-big-table + inline-expand + drawer to a
+// list-plus-detail layout with a shareable URL /tasks/[id]. Mirrors
+// /nodes NodesView (see app/nodes/NodesView.tsx for the pattern).
+//
+// Deliberately: the old expand-in-place row and the TaskDrawer side
+// sheet are gone from the /tasks page. The right pane replaces both
+// affordances so we don't leave the layout showing "one thing twice"
+// (通信龙 07-31 catch from /nodes: rail added alongside the table left
+// 199 nodes rendered in two places at once). Detail negative
+// assertions in the tests must be paired with a positive assertion so
+// "detail integrated into pane" and "detail feature gone" can't be
+// confused for each other.
+//
+// TaskDrawer.tsx itself is not deleted — no other file imports it,
+// but the boundary of this PR is app/tasks/**, and dead-code sweeps
+// are a separate concern.
+
+const MD_QUERY = '(min-width: 768px)';
+function subscribeMd(cb: () => void) {
+  const mql = window.matchMedia(MD_QUERY);
+  mql.addEventListener('change', cb);
+  return () => mql.removeEventListener('change', cb);
+}
+function useIsDesktop(): boolean {
+  return useSyncExternalStore(
+    subscribeMd,
+    () => window.matchMedia(MD_QUERY).matches,
+    () => true,
+  );
+}
+
+// Task IDs on the CommHub side are opaque strings — usually hex, but
+// treat them as arbitrary to match the alias precedent. Decode once
+// defensively (same shape as /nodes NodesView.decodeAliasSegment).
+export function decodeIdSegment(seg: string): string {
+  try {
+    return decodeURIComponent(seg);
+  } catch {
+    return seg;
+  }
+}
+
+function TasksViewInner({ initialSelectedId = null }: { initialSelectedId?: string | null }) {
+  const searchParams = useSearchParams();
+  const { networkId } = useNetworkId();
+  const [tasks, setTasks] = useState<TaskListItem[]>([]);
+  const [count, setCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const [filterStatus, setFilterStatus] = useState(searchParams.get('status') || '');
+  const [filterFrom, setFilterFrom] = useState('');
+  const [filterTo, setFilterTo] = useState('');
+
+  // #Stage-tasks: selection is seeded from /tasks/[id] URL, then plain
+  // client state kept in sync with pushState (shallow — no route remount,
+  // switching tasks swaps the right pane in place).
+  const [selectedId, setSelectedId] = useState<string | null>(initialSelectedId);
+  const isDesktop = useIsDesktop();
+
+  const selectTask = (task_id: string) => {
+    setSelectedId(task_id);
+    try {
+      window.history.pushState({}, '', `/tasks/${encodeURIComponent(task_id)}`);
+    } catch {}
+  };
+  const closeDetail = () => {
+    setSelectedId(null);
+    try {
+      window.history.pushState({}, '', '/tasks');
+    } catch {}
+  };
+
+  // Back/forward — mirror URL into state.
+  useEffect(() => {
+    const onPop = () => {
+      const m = window.location.pathname.match(/^\/tasks\/([^/]+)\/?$/);
+      setSelectedId(m ? decodeIdSegment(m[1]) : null);
+    };
+    window.addEventListener('popstate', onPop);
+    return () => window.removeEventListener('popstate', onPop);
+  }, []);
+
+  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]);
+
+  const counts: Record<string, number> = {};
+  tasks.forEach((t) => {
+    counts[t.status] = (counts[t.status] || 0) + 1;
+  });
+  const total = tasks.length || 1;
+  const bars = TASK_STATUSES.map((key) => ({ key, color: STATUS_BAR_CLASS[key] })).filter(
+    (b) => counts[b.key],
+  );
+
+  return (
+    <div
+      data-testid="tasks-layout"
+      data-selected-id={selectedId ?? ''}
+      className="min-h-screen max-w-full overflow-x-hidden bg-[#0b0b0d] text-gray-100 flex"
+    >
+      {/* Rail — desktop always visible; on mobile it holds the whole
+          page (detail becomes a full-screen overlay). No "toggle
+          rail" button on tasks: there is no dense one-column table
+          to fall back to (unlike /nodes where Vincent's 看全局 view
+          exists). Removing the old table is the whole point of this
+          refactor — 通信龙 07-31 catch from /nodes: don't leave the
+          layout showing "one thing twice". */}
+      <aside
+        data-testid="task-list-column"
+        className={`flex flex-col w-full sm:w-[380px] shrink-0 min-h-screen sticky top-0 border-r border-[#1c1c1f] ${
+          selectedId && !isDesktop ? 'hidden' : 'flex'
+        }`}
+      >
+        <div className="px-4 py-3 border-b border-[#1c1c1f]">
+          <div className="flex items-center gap-3 mb-3">
+            <h1 className="text-xl font-bold text-white lg:ml-0 ml-10">Tasks</h1>
+            {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>
+
+          {tasks.length > 0 && (
+            <>
+              {/* Status tab strip */}
+              <div className="anet-tabstrip-wrap mb-2">
+                <div className="anet-tabstrip flex flex-wrap gap-1 bg-[#161618] rounded-lg border border-[#26262b] p-1 overflow-x-auto scrollbar-thin">
+                  {['', ...TASK_STATUSES].map((s) => {
+                    const cnt = s === '' ? tasks.length : counts[s] || 0;
+                    const isActive = filterStatus === s;
+                    return (
+                      <button
+                        key={s || 'all'}
+                        onClick={() => setFilterStatus(s)}
+                        disabled={cnt === 0 && s !== '' && !isActive}
+                        className={`px-2.5 py-1 rounded-md text-xs transition-colors flex items-center gap-1 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'
+                          }`}
+                        >
+                          {cnt}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* From/To filters */}
+              <div className="flex flex-wrap items-center gap-1.5 mb-2">
+                <div className="flex items-center gap-1 rounded border border-[#26262b] bg-[#161618] px-2 py-1 focus-within:border-blue-500/40">
+                  <span className="text-[9px] uppercase tracking-wide text-gray-600">From</span>
+                  <input
+                    type="text"
+                    value={filterFrom}
+                    onChange={(e) => setFilterFrom(e.target.value)}
+                    placeholder="any"
+                    className="w-16 bg-transparent text-xs text-white placeholder-gray-700 focus:outline-none"
+                  />
+                </div>
+                <div className="flex items-center gap-1 rounded border border-[#26262b] bg-[#161618] px-2 py-1 focus-within:border-blue-500/40">
+                  <span className="text-[9px] uppercase tracking-wide text-gray-600">To</span>
+                  <input
+                    type="text"
+                    value={filterTo}
+                    onChange={(e) => setFilterTo(e.target.value)}
+                    placeholder="any"
+                    className="w-16 bg-transparent text-xs text-white placeholder-gray-700 focus:outline-none"
+                  />
+                </div>
+                {(filterStatus || filterFrom || filterTo) && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setFilterStatus('');
+                      setFilterFrom('');
+                      setFilterTo('');
+                    }}
+                    className="rounded border border-gray-700 px-2 py-0.5 text-[10px] text-gray-500 hover:text-gray-200 hover:border-gray-600"
+                  >
+                    Clear
+                  </button>
+                )}
+              </div>
+
+              {/* Status distribution bar (only when no status filter) */}
+              {!filterStatus && bars.length > 0 && (
+                <div className="flex h-1 rounded-full overflow-hidden bg-gray-800">
+                  {bars.map((b) => (
+                    <div
+                      key={b.key}
+                      className={b.color}
+                      style={{ width: `${(counts[b.key] / total) * 100}%` }}
+                      title={`${b.key}: ${counts[b.key]}`}
+                    />
+                  ))}
+                </div>
+              )}
+            </>
+          )}
+
+          {error && (
+            <div className="bg-red-900/20 border border-red-800/40 text-red-300 px-3 py-1.5 rounded mt-2 text-xs">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          {loading ? (
+            <div className="animate-pulse space-y-1 px-3 py-2">
+              {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+                <div key={i} className="h-14 bg-gray-800/40 rounded" />
+              ))}
+            </div>
+          ) : tasks.length === 0 ? (
+            <div className="px-3 py-6">
+              <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>
+          ) : (
+            <TaskList tasks={tasks} selectedId={selectedId} onSelect={selectTask} />
+          )}
+        </div>
+      </aside>
+
+      {/* Detail — desktop: right pane inside the flex row. Mobile: full-screen
+          overlay that hides the list column above. Both variants get onClose:
+          on desktop it returns the right pane to the empty state (preserves
+          the "← Tasks" return affordance the old full-page detail had);
+          on mobile it dismisses the overlay. Either way the URL drops back
+          to /tasks. 通信龙 07-31 constraint: 返回入口别丢. */}
+      {selectedId && isDesktop && (
+        <section
+          data-testid="task-detail-column"
+          className="flex-1 min-w-0 min-h-screen"
+        >
+          <TaskDetail taskId={selectedId} onClose={closeDetail} onRetried={fetchTasks} />
+        </section>
+      )}
+      {selectedId && !isDesktop && (
+        <section
+          data-testid="task-detail-mobile"
+          className="fixed inset-0 z-40 bg-[#0b0b0d]"
+        >
+          <TaskDetail taskId={selectedId} onClose={closeDetail} onRetried={fetchTasks} />
+        </section>
+      )}
+      {!selectedId && isDesktop && (
+        <section
+          data-testid="task-detail-empty"
+          className="flex-1 min-w-0 min-h-screen flex items-center justify-center text-sm text-gray-600"
+        >
+          请从左侧列表选择一条任务查看详情
+        </section>
+      )}
+    </div>
+  );
+}
+
+// useSearchParams needs a Suspense boundary in Next 14+ app-router. Same
+// shape the old page.tsx had (wrapper → Inner). Fallback matches the
+// loaded layout width so the burger button doesn't crash into "Loa…".
+export function TasksView({ initialSelectedId = null }: { initialSelectedId?: string | null }) {
+  return (
+    <Suspense
+      fallback={
+        <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>
+      }
+    >
+      <TasksViewInner initialSelectedId={initialSelectedId} />
+    </Suspense>
+  );
+}