@polderlabs/bizar 9.0.0 → 10.0.5

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>
+  );
+}

package/bizar-dash/src/web/v8/ui/chat/ChatDrawer.tsx

@@ -0,0 +1,208 @@
+/**
+ * v8/ui/chat/ChatDrawer.tsx — reusable right-side prompt Sheet.
+ *
+ * Used by:
+ *  - v8/views/Chat/ChatView.tsx (the full chat surface)
+ *  - v8/views/Agents/AgentsView.tsx (Send-prompt escalation per F-053)
+ *  - v8/views/ClaudeSessions/ClaudeSessionDetail.tsx (follow-up send)
+ *
+ * Accepts an arbitrary `onSubmit(message, opts)` that the parent
+ * implements (POST `/api/chat` or POST `/api/cc-agents/:id/send`,
+ * etc.). The drawer:
+ *   - Resets the textarea when re-opened with a new sessionId.
+ *   - Streams via readEventStream() into the local `streaming` state.
+ *   - Shows the streaming preview as a translucent assistant bubble
+ *     so the user sees tokens arriving in real time.
+ *   - Surfaces submit errors via inline error pill (no window.alert).
+ */
+
+import { useEffect, useState } from 'react';
+import { Send, RefreshCw, X } from 'lucide-react';
+import { Sheet, SheetContent } from '../feedback/Sheet.js';
+import { Button } from '../controls/Button.js';
+import { Textarea } from '../controls/Textarea.js';
+import { Stack } from '../primitives/Stack.js';
+import { Inline } from '../primitives/Inline.js';
+import { readEventStream } from './EventStream.js';
+import { MessageBubble, EmptyTranscript } from './MessageBubble.js';
+import type { ChatMessage } from '../../data/types.js';
+
+export interface ChatDrawerProps {
+  /** Whether the drawer is mounted. Controlled by the parent. */
+  open: boolean;
+  /** Session id if resuming an existing chat session; else a new session is created on submit. */
+  sessionId?: string | null;
+  /** Display title in the sheet header. */
+  title: string;
+  /** Short description for the sheet subheader. */
+  description?: string;
+  /** Optional agent hint. POSTed as `body.agent` and rendered on the assistant bubble. */
+  agent?: string | null;
+  /** Submit handler. Receives the user's text + an optional streaming-callback hook. */
+  onSubmit: (
+    message: string,
+    opts: {
+      sessionId?: string | null;
+      agent?: string | null;
+      onStream?: (chunk: string) => void;
+      signal: AbortSignal;
+    },
+  ) => Promise<void>;
+  onClose: () => void;
+  /** Optional initial transcript (used when resuming a session). */
+  messages?: ChatMessage[];
+}
+
+export function ChatDrawer({
+  open,
+  sessionId,
+  title,
+  description,
+  agent,
+  onSubmit,
+  onClose,
+  messages: initialMessages = [],
+}: ChatDrawerProps): JSX.Element {
+  const [draft, setDraft] = useState<string>('');
+  const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
+  const [streaming, setStreaming] = useState<string>('');
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset when re-opened against a different session.
+  useEffect(() => {
+    setMessages(initialMessages);
+    setStreaming('');
+    setError(null);
+    setDraft('');
+  }, [sessionId, open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const submit = async (): Promise<void> => {
+    const text = draft.trim();
+    if (!text || busy) return;
+    setError(null);
+    setBusy(true);
+    setDraft('');
+    const userMsg: ChatMessage = {
+      id: `local_${Date.now().toString(36)}`,
+      ts: new Date().toISOString(),
+      role: 'user',
+      content: text,
+    };
+    setMessages((prev) => [...prev, userMsg]);
+    setStreaming('');
+    const ctrl = new AbortController();
+    try {
+      await onSubmit(text, {
+        sessionId,
+        agent,
+        signal: ctrl.signal,
+        onStream: (chunk) => {
+          setStreaming((cur) => cur + chunk);
+        },
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message);
+    } finally {
+      setBusy(false);
+      setStreaming('');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <SheetContent
+        side="right"
+        title={title}
+        description={description}
+        style={{ width: 'min(560px, 100vw)', padding: 0 }}
+        data-testid="chat-drawer"
+      >
+        <Stack gap={2} style={{ height: '100%', padding: 'var(--space-3)' }}>
+          <Inline align="center" justify="between">
+            <Inline align="center" gap={2}>
+              {agent && <code style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>{agent}</code>}
+            </Inline>
+            <Button variant="ghost" onClick={onClose} data-testid="chat-drawer-close">
+              <X size={14} aria-hidden /> Close
+            </Button>
+          </Inline>
+
+          <div
+            data-testid="chat-drawer-transcript"
+            style={{
+              flex: 1,
+              minHeight: 0,
+              overflowY: 'auto',
+              background: 'var(--surface-0)',
+              border: '1px solid var(--border)',
+              borderRadius: 'var(--radius-md)',
+              padding: 'var(--space-3)',
+            }}
+          >
+            {messages.length === 0 && streaming === '' ? (
+              <EmptyTranscript>Send a message to start.</EmptyTranscript>
+            ) : (
+              <Stack gap={1}>
+                {messages.map((m) => (
+                  <MessageBubble key={m.id} message={m} />
+                ))}
+                {streaming !== '' && (
+                  <MessageBubble
+                    message={{
+                      id: 'streaming',
+                      ts: new Date().toISOString(),
+                      role: 'assistant',
+                      content: streaming,
+                    }}
+                  />
+                )}
+              </Stack>
+            )}
+          </div>
+
+          {error && (
+            <div
+              role="alert"
+              data-testid="chat-drawer-error"
+              style={{
+                padding: 'var(--space-2) var(--space-3)',
+                borderRadius: 'var(--radius-sm)',
+                background: 'color-mix(in oklch, var(--danger) 12%, transparent)',
+                color: 'var(--danger)',
+                fontSize: 'var(--fs-12)',
+              }}
+            >
+              {error}
+            </div>
+          )}
+
+          <Inline align="end" gap={2}>
+            <span style={{ flex: 1, color: 'var(--fg-muted)', fontSize: 'var(--fs-11)' }}>
+              Shift+Enter for newline · Enter to send
+            </span>
+            <Button variant="primary" onClick={() => void submit()} disabled={busy || draft.trim() === ''} data-testid="chat-drawer-send">
+              {busy ? <RefreshCw size={14} aria-hidden /> : <Send size={14} aria-hidden />}
+              {busy ? 'Sending…' : 'Send'}
+            </Button>
+          </Inline>
+
+          <Textarea
+            value={draft}
+            placeholder="Ask Claude anything…"
+            rows={4}
+            data-testid="chat-drawer-input"
+            onChange={(e) => setDraft((e.target as HTMLTextAreaElement).value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                void submit();
+              }
+            }}
+          />
+        </Stack>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/bizar-dash/src/web/v8/ui/chat/EventStream.tsx

@@ -0,0 +1,83 @@
+/**
+ * v8/ui/chat/EventStream.tsx — text/event-stream reader.
+ *
+ * Thin helper over `fetch()` that parses `data:` lines from a server
+ * response and yields each event to a callback. Used by the chat
+ * composer (POST /api/chat sends, response is a stream) and by the
+ * Claude session detail (GET /api/claude-sessions/:id/stream).
+ *
+ * The server emits either:
+ *   - JSON envelopes per line (`fetchJson`-compatible), used when
+ *     handlers prefer that shape;
+ *   - SSE-formatted `data:` lines for streaming tokens.
+ *
+ * This reader handles both. JSON-only payloads (no `data:` prefix)
+ * are forwarded verbatim. `event:` lines are split into separate
+ * callbacks when present.
+ */
+
+export interface EventStreamHandlers {
+  onChunk?: (text: string) => void;
+  onEvent?: (event: string, data: string) => void;
+  onDone?: () => void;
+  onError?: (err: Error) => void;
+}
+
+export interface EventStreamOptions extends EventStreamHandlers {
+  signal?: AbortSignal;
+}
+
+export async function readEventStream(
+  url: string,
+  init: RequestInit,
+  handlers: EventStreamOptions,
+): Promise<void> {
+  const { signal, onChunk, onEvent, onDone, onError } = handlers;
+  try {
+    const response = await fetch(url, { ...init, signal });
+    if (!response.ok || response.body === null) {
+      throw new Error(`HTTP ${response.status} reading ${url}`);
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let sawDone = false;
+    // pump until the stream is fully drained or the caller aborts
+    while (!sawDone) {
+      if (signal?.aborted) break;
+      const { value, done } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      // SSE frames are separated by a blank line. Split and process.
+      const frames = buffer.split('\n\n');
+      buffer = frames.pop() ?? '';
+      for (const frame of frames) {
+        const lines = frame.split('\n').filter((l) => l.length > 0);
+        let data = '';
+        let event = 'message';
+        for (const line of lines) {
+          if (line.startsWith('data:')) {
+            data += line.slice(5).trim();
+          } else if (line.startsWith('event:')) {
+            event = line.slice(6).trim();
+          }
+        }
+        if (data.length === 0) continue;
+        if (event === 'done') {
+          sawDone = true;
+          onDone?.();
+          break;
+        }
+        if (event !== 'message') {
+          onEvent?.(event, data);
+        } else {
+          onChunk?.(data);
+        }
+      }
+    }
+    onDone?.();
+  } catch (err) {
+    if (signal?.aborted) return;
+    onError?.(err instanceof Error ? err : new Error(String(err)));
+  }
+}