feat(web): React UI v2.0 — Phase 3 Tasks 32-35 (Shell components)

web/src/shell/FlowStrip.tsx

@@ -0,0 +1,167 @@
+import type { CSSProperties } from 'react';
+import type { AgentDefinition } from '@/api/types';
+
+export type NodeStatus = 'idle' | 'active' | 'done' | 'gated' | 'error';
+
+interface FlowStripProps {
+  agents: AgentDefinition[];
+  activeAgent: string | null;
+  graphVersion: string;
+  /** Agent-name → status overrides (e.g. session.agents_run derives done) */
+  statusByAgent?: Record<string, NodeStatus>;
+}
+
+const containerStyle: CSSProperties = {
+  height: 92,
+  display: 'flex',
+  flexDirection: 'column',
+  background: 'var(--bg-page)',
+  borderBottom: '1px solid var(--hair)',
+  fontFamily: 'var(--ff-sans)',
+  position: 'relative',
+};
+
+const NODE_W = 90;
+const NODE_W_ACTIVE = 100;
+const NODE_H = 40;
+const NODE_H_ACTIVE = 44;
+
+export function FlowStrip({ agents, activeAgent, graphVersion, statusByAgent }: FlowStripProps) {
+  if (agents.length === 0) {
+    return (
+      <div style={{ ...containerStyle, alignItems: 'center', justifyContent: 'center' }}>
+        <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>No agents loaded</span>
+      </div>
+    );
+  }
+
+  return (
+    <div style={containerStyle}>
+      <div
+        style={{
+          padding: '4px 16px 0',
+          fontSize: 10,
+          color: 'var(--ink-3)',
+          letterSpacing: '0.14em',
+          textTransform: 'uppercase',
+          fontFamily: 'var(--ff-mono)',
+        }}
+      >
+        Runtime · {agents.length} agents · graph {graphVersion}
+      </div>
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 32,
+          padding: '0 16px',
+          position: 'relative',
+        }}
+      >
+        {agents.map((a, i) => {
+          const isActive = a.name === activeAgent;
+          const status: NodeStatus = isActive
+            ? 'active'
+            : statusByAgent?.[a.name] ?? 'idle';
+          return (
+            <div key={a.name} style={{ display: 'flex', alignItems: 'center' }}>
+              <FlowNode agent={a} status={status} active={isActive} />
+              {i < agents.length - 1 && <FlowEdge />}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function FlowNode({
+  agent,
+  status,
+  active,
+}: {
+  agent: AgentDefinition;
+  status: NodeStatus;
+  active: boolean;
+}) {
+  const w = active ? NODE_W_ACTIVE : NODE_W;
+  const h = active ? NODE_H_ACTIVE : NODE_H;
+  const fills: Record<NodeStatus, string> = {
+    idle: 'var(--bg-elev)',
+    active: 'var(--acc-soft)',
+    done: 'var(--good-bg)',
+    gated: 'var(--warn-bg)',
+    error: 'var(--danger-bg)',
+  };
+  const strokes: Record<NodeStatus, string> = {
+    idle: 'var(--hair-strong)',
+    active: 'var(--acc)',
+    done: 'var(--good)',
+    gated: 'var(--warn)',
+    error: 'var(--danger)',
+  };
+  const labelStatusFor: Record<NodeStatus, string> = {
+    idle: 'IDLE',
+    active: 'ACTIVE',
+    done: 'DONE',
+    gated: 'GATED',
+    error: 'ERROR',
+  };
+  return (
+    <div
+      data-flow-node={agent.name}
+      data-active={active}
+      data-status={status}
+      style={{
+        width: w,
+        height: h,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: fills[status],
+        border: `${active ? 1.5 : 1}px solid ${strokes[status]}`,
+        borderRadius: 0,
+        position: 'relative',
+        animation: active ? 'asr-flow-halo 4s ease-in-out infinite' : 'none',
+      }}
+    >
+      <span
+        style={{
+          fontFamily: 'var(--ff-mono)',
+          fontSize: 12,
+          color: 'var(--ink-1)',
+          fontWeight: active ? 600 : 500,
+        }}
+      >
+        {agent.name}
+      </span>
+      <span
+        style={{
+          fontFamily: 'var(--ff-mono)',
+          fontSize: 9,
+          color: 'var(--ink-3)',
+          letterSpacing: '0.14em',
+          textTransform: 'uppercase',
+        }}
+      >
+        {labelStatusFor[status]}
+      </span>
+    </div>
+  );
+}
+
+function FlowEdge() {
+  return (
+    <svg width={32} height={NODE_H_ACTIVE} aria-hidden style={{ display: 'block' }}>
+      <path
+        d={`M 0 ${NODE_H_ACTIVE / 2} C 16 ${NODE_H_ACTIVE / 2}, 16 ${NODE_H_ACTIVE / 2}, 32 ${NODE_H_ACTIVE / 2}`}
+        stroke="var(--hair-strong)"
+        strokeWidth={1}
+        fill="none"
+      />
+    </svg>
+  );
+}

web/src/shell/SessionsRail.tsx

@@ -0,0 +1,211 @@
+import { useMemo, useState } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { SessionSummary } from '@/state/useSessionList';
+
+const ACTIVE_STATUSES = new Set(['new', 'in_progress', 'awaiting_input', 'matched']);
+
+interface SessionsRailProps {
+  sessions: SessionSummary[];
+  activeSid: string | null;
+  onSelect: (sid: string) => void;
+}
+
+const containerStyle: CSSProperties = {
+  width: 220,
+  display: 'flex',
+  flexDirection: 'column',
+  background: 'var(--bg-page)',
+  borderRight: '1px solid var(--hair)',
+  overflow: 'hidden',
+  fontFamily: 'var(--ff-sans)',
+};
+
+export function SessionsRail({ sessions, activeSid, onSelect }: SessionsRailProps) {
+  const [filter, setFilter] = useState('');
+  const filtered = useMemo(() => {
+    const q = filter.trim().toLowerCase();
+    if (!q) return sessions;
+    return sessions.filter(
+      (s) =>
+        s.id.toLowerCase().includes(q) ||
+        (s.label !== undefined && s.label.toLowerCase().includes(q)),
+    );
+  }, [sessions, filter]);
+
+  const active = filtered.filter((s) => ACTIVE_STATUSES.has(s.status));
+  const recent = filtered.filter((s) => !ACTIVE_STATUSES.has(s.status));
+
+  return (
+    <aside style={containerStyle}>
+      <header style={{ padding: '10px 12px', borderBottom: '1px solid var(--hair)' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'baseline',
+            marginBottom: 8,
+          }}
+        >
+          <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink-1)' }}>Sessions</span>
+          <span style={{ fontSize: 10, color: 'var(--ink-3)' }}>{sessions.length} total</span>
+        </div>
+        <input
+          type="text"
+          placeholder="Filter…"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          style={{
+            width: '100%',
+            height: 22,
+            padding: '0 8px',
+            fontFamily: 'var(--ff-sans)',
+            fontSize: 11,
+            color: 'var(--ink-1)',
+            background: 'var(--bg-elev)',
+            border: '1px solid var(--hair)',
+            borderRadius: 0,
+            outline: 'none',
+          }}
+        />
+      </header>
+      <div style={{ flex: 1, overflowY: 'auto' }}>
+        {sessions.length === 0 ? (
+          <div style={{ padding: 20, fontSize: 11, color: 'var(--ink-3)', textAlign: 'center' }}>
+            No sessions yet
+          </div>
+        ) : (
+          <>
+            <Group label="Active" count={active.length}>
+              {active.map((s) => (
+                <Row key={s.id} session={s} active={s.id === activeSid} onSelect={onSelect} />
+              ))}
+            </Group>
+            <Group label="Recent" count={recent.length}>
+              {recent.map((s) => (
+                <Row key={s.id} session={s} active={s.id === activeSid} onSelect={onSelect} />
+              ))}
+            </Group>
+          </>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+function Group({ label, count, children }: { label: string; count: number; children: ReactNode }) {
+  return (
+    <div>
+      <div
+        style={{
+          padding: '8px 12px 4px',
+          fontSize: 10,
+          color: 'var(--ink-3)',
+          letterSpacing: '0.14em',
+          textTransform: 'uppercase',
+          borderBottom: '1px solid var(--hair)',
+        }}
+      >
+        {label} · {count}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function Row({
+  session,
+  active,
+  onSelect,
+}: {
+  session: SessionSummary;
+  active: boolean;
+  onSelect: (sid: string) => void;
+}) {
+  const isPending = session.status === 'awaiting_input';
+  return (
+    <div
+      data-row
+      data-active={active}
+      onClick={() => onSelect(session.id)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+        padding: '6px 10px 6px 12px',
+        cursor: 'pointer',
+        background: active ? 'var(--bg-elev)' : 'transparent',
+        borderLeft: active ? '2px solid var(--acc)' : '2px solid transparent',
+        position: 'relative',
+      }}
+    >
+      <span
+        style={{
+          fontFamily: 'var(--ff-mono)',
+          fontSize: 11,
+          color: active ? 'var(--acc)' : 'var(--ink-2)',
+        }}
+      >
+        {session.id}
+      </span>
+      <span
+        style={{
+          flex: 1,
+          fontSize: 11,
+          color: 'var(--ink-2)',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {session.label ?? ''}
+      </span>
+      <span
+        style={{
+          fontFamily: 'var(--ff-mono)',
+          fontSize: 9,
+          color: 'var(--ink-3)',
+          letterSpacing: '0.14em',
+          textTransform: 'uppercase',
+        }}
+      >
+        {shortStatus(session.status)}
+      </span>
+      {isPending && (
+        <span
+          data-pending-dot
+          aria-label="pending approval"
+          style={{
+            display: 'inline-block',
+            width: 5,
+            height: 5,
+            borderRadius: '50%',
+            background: 'var(--warn)',
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function shortStatus(s: string): string {
+  switch (s) {
+    case 'in_progress':
+      return 'RUN';
+    case 'awaiting_input':
+      return 'WAIT';
+    case 'resolved':
+      return 'DONE';
+    case 'escalated':
+      return 'ESC';
+    case 'error':
+      return 'ERR';
+    case 'stopped':
+      return 'STOP';
+    case 'matched':
+      return 'MATCH';
+    case 'new':
+      return 'NEW';
+    default:
+      return s.slice(0, 4).toUpperCase();
+  }
+}