@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/ui/agents/AgentDetail.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Send, RotateCw, Octagon, ClipboardCopy, Activity as ActivityIcon } from 'lucide-react';
 import { Avatar } from '../data/Avatar.js';
 import { Badge } from '../data/Badge.js';
@@ -8,8 +8,12 @@ import { Stack } from '../primitives/Stack.js';
 import { Inline } from '../primitives/Inline.js';
 import { Textarea } from '../controls/Textarea.js';
 import { Skeleton } from '../feedback/Skeleton.js';
+import { Card, CardBody } from '../data/Card.js';
 import { AgentStreamPanel } from './AgentStreamPanel.js';
+import { AgentLiveOutput } from './AgentLiveOutput.js';
 import { fetchJson } from '../../data/fetcher.js';
+import { useFetch } from '../../data/useFetch.js';
+import type { Task } from '../../data/types.js';
 
 /**
  * AgentDetail — Sprint S11. Right-side Drawer with live agent
@@ -29,6 +33,11 @@ export interface AgentDetailProps {
   role: string;
   status: 'idle' | 'busy' | 'error' | 'paused';
   currentTask?: string;
+  startedAt?: number;
+  messageCount?: number;
+  lastMessageSnippet?: string;
+  successRate?: number;
+  tasksTotal?: number;
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
@@ -40,7 +49,10 @@ function parseId(agentId: string): { source: AgentSource; key: string } {
 }
 
 export function AgentDetail(props: AgentDetailProps): JSX.Element {
-  const { agentId, name, role, status, currentTask, open, onOpenChange } = props;
+  const {
+    agentId, name, role, status, currentTask, open, onOpenChange,
+    startedAt, messageCount, lastMessageSnippet, successRate, tasksTotal,
+  } = props;
   const { source, key } = parseId(agentId);
   const [prompt, setPrompt] = useState<string>('');
   const [busy, setBusy] = useState<string | null>(null);
@@ -48,6 +60,24 @@ export function AgentDetail(props: AgentDetailProps): JSX.Element {
   const [error, setError] = useState<string | null>(null);
   const [lastProcessId, setLastProcessId] = useState<string | null>(null);
 
+  // v9.5.0 S49 — agent↔task drilldown. `useFetch` is gated on `open` so
+  // we don't burn a request every time the Sheet is mounted-hidden. We
+  // client-filter for the current agent's name across both `workedBy`
+  // (Bizar task-store) and `metadata.agent` (task-store progress events).
+  const tasksQuery = useFetch<{ tasks?: Task[] }>(open ? '/api/tasks' : null);
+  const myTasks = useMemo<Task[]>(() => {
+    if (!open) return [];
+    const all = tasksQuery.data?.tasks ?? [];
+    return all.filter((t) => {
+      const md = (t.metadata ?? {}) as { agent?: unknown };
+      return (
+        (typeof (t as unknown as { workedBy?: unknown }).workedBy === 'string'
+          && (t as unknown as { workedBy: string }).workedBy === key)
+        || md.agent === key
+      );
+    });
+  }, [open, tasksQuery.data, key]);
+
   useEffect(() => {
     if (open) { setPrompt(''); setMessage(null); setError(null); setLastProcessId(null); }
   }, [open, agentId]);
@@ -92,10 +122,15 @@ export function AgentDetail(props: AgentDetailProps): JSX.Element {
   };
 
   const restart = async (): Promise<void> => {
+    const ok = typeof window !== 'undefined' && typeof window.confirm === 'function'
+      ? window.confirm(`Restart ${name}? The current session will be killed and a fresh one spawned.`)
+      : true;
+    if (!ok) return;
     if (source === 'claude-code') {
-      // CC background agents don't have a server-side restart — the user
-      // spawns a new one via the command palette. Surface that clearly.
-      setMessage('Use the command palette to spawn a fresh agent.');
+      // v9.0.5 — server now does kill+spawn in one shot, using the current
+      // prompt as the new session's seed (fallback to "continue").
+      const seed = prompt.trim() || 'continue from the last checkpoint';
+      await runAction('Restart', 'POST', `/api/cc-agents/${encodeURIComponent(key)}/restart`, { prompt: seed });
       return;
     }
     await runAction('Restart', 'POST', `/api/agents/${encodeURIComponent(key)}/restart`);
@@ -104,9 +139,29 @@ export function AgentDetail(props: AgentDetailProps): JSX.Element {
   const kill = async (): Promise<void> => {
     if (source === 'claude-code') {
       await runAction('Kill', 'POST', `/api/cc-agents/${encodeURIComponent(key)}/kill`);
-    } else {
-      // No kill route for Bizar agents; restart is the closest analog.
-      await runAction('Restart', 'POST', `/api/agents/${encodeURIComponent(key)}/restart`);
+      return;
+    }
+    // Confirm before destroying — DELETE is irreversible.
+    const ok = typeof window !== 'undefined' && typeof window.confirm === 'function'
+      ? window.confirm(`Delete Bizar agent "${key}"? This is irreversible.`)
+      : true;
+    if (!ok) return;
+    setBusy('Kill');
+    setMessage(null);
+    setError(null);
+    try {
+      await fetchJson<{ ok?: boolean; error?: string }>(
+        `/api/agents/${encodeURIComponent(key)}`,
+        { method: 'DELETE' },
+      );
+      setMessage(`Killed ${name}`);
+      // Server broadcasts agents:change; close the drawer so the user
+      // sees the agent disappear from the grid.
+      onOpenChange(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
     }
   };
 
@@ -127,15 +182,48 @@ export function AgentDetail(props: AgentDetailProps): JSX.Element {
           <Avatar name={name} status={status === 'busy' ? 'busy' : status === 'error' ? 'busy' : 'online'} />
           <div style={{ flex: 1, minWidth: 0 }}>
             <div style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)' }}>{role}</div>
-            <Inline gap={2} style={{ marginTop: 4 }}>
+            <Inline gap={2} style={{ marginTop: 4 }} wrap>
               <Badge tone={status === 'busy' ? 'info' : status === 'error' ? 'danger' : 'neutral'} dot>
                 {status}
               </Badge>
               <Badge tone="accent">{source === 'bizar' ? 'Bizar agent' : 'Claude Code'}</Badge>
+              {startedAt !== undefined && (
+                <Badge tone="neutral" title={new Date(startedAt).toLocaleString()}>
+                  up {formatDuration(Date.now() - startedAt)}
+                </Badge>
+              )}
+              {typeof messageCount === 'number' && (
+                <Badge tone="neutral">{messageCount} msg</Badge>
+              )}
+              {typeof tasksTotal === 'number' && (
+                <Badge tone="neutral">{tasksTotal} tasks</Badge>
+              )}
+              {typeof successRate === 'number' && (
+                <Badge tone={successRate >= 0.8 ? 'success' : successRate >= 0.5 ? 'warning' : 'danger'}>
+                  {Math.round(successRate * 100)}% success
+                </Badge>
+              )}
             </Inline>
           </div>
         </Inline>
 
+        {typeof lastMessageSnippet === 'string' && lastMessageSnippet.length > 0 && (
+          <div
+            style={{
+              padding: 'var(--space-2) var(--space-3)',
+              background: 'var(--surface-1)',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius-md)',
+              fontSize: 'var(--fs-12)',
+              color: 'var(--fg-muted)',
+              fontStyle: 'italic',
+            }}
+            title={lastMessageSnippet}
+          >
+            “{lastMessageSnippet.length > 240 ? `${lastMessageSnippet.slice(0, 240)}…` : lastMessageSnippet}”
+          </div>
+        )}
+
         {currentTask !== undefined && (
           <div
             style={{
@@ -189,8 +277,9 @@ export function AgentDetail(props: AgentDetailProps): JSX.Element {
               variant="danger"
               onClick={() => { void kill(); }}
               disabled={busy !== null}
+              title={source === 'claude-code' ? 'Kill the CC background session' : `Delete Bizar agent "${key}"`}
             >
-              <Octagon size={14} aria-hidden /> {source === 'claude-code' ? 'Kill' : 'Restart'}
+              <Octagon size={14} aria-hidden /> Kill
             </Button>
             <Button variant="ghost" onClick={() => { void copyId(); }}>
               <ClipboardCopy size={14} aria-hidden /> Copy id
@@ -260,6 +349,60 @@ export function AgentDetail(props: AgentDetailProps): JSX.Element {
 
         {/* Live stream — only meaningful for Claude Code sessions (they have
             a backing JSONL log). Bizar agents have no equivalent surface. */}
+        {/* v9.5.0 S49 — agent↔task drilldown. Renders the tasks this agent
+            is currently working on (filtered by workedBy / metadata.agent),
+            so the user can see "what is my orchestrator doing right now"
+            without bouncing between this Sheet and the Tasks board. */}
+        <Stack gap={2}>
+          <div
+            style={{
+              fontSize: 'var(--fs-12)',
+              color: 'var(--fg-muted)',
+              textTransform: 'uppercase',
+              letterSpacing: '0.04em',
+            }}
+          >
+            Assigned tasks ({myTasks.length})
+          </div>
+          {tasksQuery.loading && myTasks.length === 0 ? (
+            <Skeleton style={{ height: 48 }} />
+          ) : myTasks.length === 0 ? (
+            <Card variant="outlined">
+              <CardBody>
+                <span data-testid="agent-tasks-empty" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                  No tasks assigned to this agent.
+                </span>
+              </CardBody>
+            </Card>
+          ) : (
+            <Stack gap={1}>
+              {myTasks.map((t) => (
+                <div
+                  key={t.id}
+                  data-testid={`agent-tasks-${t.id}`}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 'var(--space-2)',
+                    padding: 'var(--space-2) var(--space-3)',
+                    background: 'var(--surface-0)',
+                    border: '1px solid var(--border)',
+                    borderRadius: 'var(--radius-sm)',
+                    fontSize: 'var(--fs-13)',
+                  }}
+                >
+                  <code style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>{t.id}</code>
+                  <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {t.title}
+                  </span>
+                  <Badge tone={t.status === 'doing' ? 'info' : t.status === 'blocked' ? 'danger' : 'neutral'}>
+                    {t.status ?? 'queued'}
+                  </Badge>
+                </div>
+              ))}
+            </Stack>
+          )}
+        </Stack>
         {source === 'claude-code' && (
           <Stack gap={2}>
             <div
@@ -271,13 +414,26 @@ export function AgentDetail(props: AgentDetailProps): JSX.Element {
               }}
             >
               <ActivityIcon size={12} aria-hidden style={{ verticalAlign: 'middle', marginRight: 4 }} />
-              Live stream
+              Live output
             </div>
-            <AgentStreamPanel sessionId={key} />
+            <AgentLiveOutput sessionId={key} paused={busy === 'Kill'} />
           </Stack>
         )}
       </Stack>
     </SheetContent>
     </Sheet>
   );
+}
+
+/** formatDuration — human-readable "3m 12s" / "1h 4m" / "2d 5h". */
+function formatDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return '—';
+  const sec = Math.floor(ms / 1000);
+  if (sec < 60) return `${sec}s`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ${sec % 60}s`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ${min % 60}m`;
+  const day = Math.floor(hr / 24);
+  return `${day}d ${hr % 24}h`;
 }

package/bizar-dash/src/web/v8/ui/agents/AgentLiveOutput.tsx

@@ -0,0 +1,252 @@
+import { useEffect, useRef, useState } from 'react';
+import { Pause, Play, RefreshCw } from 'lucide-react';
+import { Stack } from '../primitives/Stack.js';
+import { Inline } from '../primitives/Inline.js';
+import { Button } from '../controls/Button.js';
+
+/**
+ * AgentLiveOutput — Sprint S17. Live SSE tail of a CC agent's session
+ * JSONL. Subscribes to `/api/agent-stream/live?sessionId=...` and
+ * appends events as they arrive. Pause freezes the buffer (connection
+ * stays open). Clear wipes the buffer.
+ */
+
+interface StreamEvent {
+  type?: string;
+  role?: string;
+  content?: string;
+  name?: string;
+  input?: unknown;
+  tool?: { name?: string; input?: unknown };
+  result?: unknown;
+  ts?: number;
+  message?: string;
+}
+
+export interface AgentLiveOutputProps {
+  sessionId: string;
+  /** When true the parent wants us to stop connecting (e.g. agent was killed). */
+  paused?: boolean;
+}
+
+const MAX_EVENTS = 500;
+
+export function AgentLiveOutput(props: AgentLiveOutputProps): JSX.Element {
+  const { sessionId, paused } = props;
+  const [events, setEvents] = useState<StreamEvent[]>([]);
+  const [status, setStatus] = useState<'connecting' | 'live' | 'paused' | 'error' | 'closed'>('connecting');
+  const [error, setError] = useState<string | null>(null);
+  const [pausedLocal, setPausedLocal] = useState<boolean>(false);
+  const [autoScroll, setAutoScroll] = useState<boolean>(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const sourceRef = useRef<EventSource | null>(null);
+
+  useEffect(() => {
+    if (paused || pausedLocal) {
+      if (sourceRef.current) {
+        sourceRef.current.close();
+        sourceRef.current = null;
+      }
+      setStatus('paused');
+      return;
+    }
+    if (typeof window === 'undefined' || typeof EventSource === 'undefined') {
+      setStatus('error');
+      setError('EventSource not available in this environment.');
+      return;
+    }
+    setStatus('connecting');
+    setError(null);
+    const url = `/api/agent-stream/live?sessionId=${encodeURIComponent(sessionId)}`;
+    const src = new EventSource(url);
+    sourceRef.current = src;
+
+    const onSnapshot = (ev: MessageEvent): void => {
+      try {
+        const data = JSON.parse(ev.data) as { events?: StreamEvent[] };
+        if (Array.isArray(data.events)) setEvents(data.events.slice(-MAX_EVENTS));
+        setStatus('live');
+      } catch { /* malformed */ }
+    };
+    const onEvent = (ev: MessageEvent): void => {
+      try {
+        const data = JSON.parse(ev.data) as StreamEvent;
+        setEvents((prev) => {
+          const next = prev.length >= MAX_EVENTS ? prev.slice(prev.length - MAX_EVENTS + 1) : prev.slice();
+          next.push(data);
+          return next;
+        });
+        setStatus('live');
+      } catch { /* malformed */ }
+    };
+    const onEnd = (ev: MessageEvent): void => {
+      try {
+        const data = JSON.parse(ev.data) as { reason?: string };
+        setStatus('closed');
+        setError(data.reason ? `Stream ended: ${data.reason}` : null);
+      } catch { /* */ }
+    };
+    const onErrEv = (ev: MessageEvent): void => {
+      try {
+        const data = JSON.parse(ev.data) as { error?: string };
+        setStatus('error');
+        setError(data.error || 'stream error');
+      } catch { /* */ }
+    };
+    src.addEventListener('snapshot', onSnapshot);
+    src.addEventListener('event', onEvent);
+    src.addEventListener('agent:event', onEvent);
+    src.addEventListener('end', onEnd);
+    src.addEventListener('error', onErrEv);
+    src.onerror = () => {
+      setStatus('error');
+      setError('Connection dropped. Click Retry to reconnect.');
+    };
+    return () => {
+      src.close();
+      sourceRef.current = null;
+    };
+  }, [sessionId, paused, pausedLocal]);
+
+  useEffect(() => {
+    if (!autoScroll || !containerRef.current) return;
+    const el = containerRef.current;
+    el.scrollTop = el.scrollHeight;
+  }, [events, autoScroll]);
+
+  const renderEvent = (ev: StreamEvent, idx: number): JSX.Element => {
+    const tone =
+      ev.role === 'user' ? 'user' :
+      ev.role === 'assistant' ? 'assistant' :
+      ev.tool?.name ? 'tool' :
+      'system';
+    const label =
+      ev.tool?.name ? `${ev.tool.name}` :
+      ev.role ? ev.role : (ev.type || 'event');
+    const text =
+      typeof ev.content === 'string' ? ev.content :
+      ev.tool?.input ? JSON.stringify(ev.tool.input).slice(0, 240) :
+      typeof ev.message === 'string' ? ev.message :
+      ev.result ? JSON.stringify(ev.result).slice(0, 240) :
+      JSON.stringify(ev).slice(0, 240);
+    return (
+      <div
+        key={idx}
+        style={{
+          padding: '4px 8px',
+          borderRadius: 'var(--radius-sm)',
+          background:
+            tone === 'user' ? 'color-mix(in oklch, var(--accent) 8%, var(--surface-0))' :
+            tone === 'tool' ? 'color-mix(in oklch, var(--warning) 8%, var(--surface-0))' :
+            tone === 'system' ? 'var(--surface-1)' :
+            'var(--surface-0)',
+          fontFamily: 'var(--font-mono)',
+          fontSize: 'var(--fs-12)',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+        }}
+      >
+        <span style={{ color: 'var(--fg-muted)' }}>{label}: </span>
+        <span style={{ color: 'var(--fg)' }}>{text}</span>
+      </div>
+    );
+  };
+
+  return (
+    <Stack gap={2}>
+      <Inline align="center" justify="between">
+        <Inline align="center" gap={2}>
+          <span
+            aria-hidden
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: '50%',
+              background:
+                status === 'live' ? 'var(--success)' :
+                status === 'connecting' ? 'var(--warning)' :
+                status === 'paused' ? 'var(--fg-muted)' :
+                status === 'closed' ? 'var(--fg-muted)' :
+                'var(--danger)',
+            }}
+          />
+          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+            {status === 'live' ? 'Live' :
+             status === 'connecting' ? 'Connecting…' :
+             status === 'paused' ? 'Paused' :
+             status === 'closed' ? 'Closed' :
+             'Error'}
+            {' · '}{events.length} events
+          </span>
+        </Inline>
+        <Inline align="center" gap={1}>
+          <Button
+            variant="ghost"
+            onClick={() => setPausedLocal((p) => !p)}
+            title={pausedLocal ? 'Resume stream' : 'Pause stream'}
+            aria-label={pausedLocal ? 'Resume stream' : 'Pause stream'}
+          >
+            {pausedLocal ? <Play size={12} aria-hidden /> : <Pause size={12} aria-hidden />}
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => setEvents([])}
+            title="Clear buffer"
+            aria-label="Clear output"
+          >
+            Clear
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              setEvents([]);
+              setPausedLocal(false);
+            }}
+            title="Reconnect"
+            aria-label="Reconnect stream"
+          >
+            <RefreshCw size={12} aria-hidden /> Retry
+          </Button>
+          <label style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'var(--fs-12)', color: 'var(--fg-muted)', cursor: 'pointer' }}>
+            <input type="checkbox" checked={autoScroll} onChange={(e) => setAutoScroll(e.target.checked)} />
+            follow
+          </label>
+        </Inline>
+      </Inline>
+      {error !== null && (
+        <div role="alert" style={{ fontSize: 'var(--fs-12)', color: 'var(--danger)' }}>{error}</div>
+      )}
+      <div
+        ref={containerRef}
+        onScroll={(e) => {
+          const el = e.currentTarget;
+          const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 20;
+          setAutoScroll(atBottom);
+        }}
+        style={{
+          maxHeight: 280,
+          minHeight: 120,
+          overflowY: 'auto',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius-md)',
+          padding: 'var(--space-2)',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 4,
+          background: 'var(--surface-1)',
+        }}
+        role="log"
+        aria-live="polite"
+        aria-label="Agent live output"
+      >
+        {events.length === 0 ? (
+          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+            {status === 'connecting' ? 'Connecting to agent stream…' : 'No events yet.'}
+          </span>
+        ) : (
+          events.map(renderEvent)
+        )}
+      </div>
+    </Stack>
+  );
+}