@polderlabs/bizar 9.0.0 → 10.0.7

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

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

@@ -0,0 +1,174 @@
+/**
+ * v8/ui/chat/MessageBubble.tsx — single chat message surface.
+ *
+ * Renders a single message from `/api/chat?session=…` as either a
+ * user / assistant / system / tool bubble. Uses the existing
+ * `react-markdown` dependency for assistant content (the only place
+ * where markdown formatting is needed) and renders plain text for the
+ * other roles.
+ *
+ * Tones (per v8 design):
+ *   - user:    right-aligned, accent background
+ *   - assistant: left-aligned, surface-1 background, markdown rendered
+ *   - system:  centered, fg-muted, no nesting
+ *   - tool:    left-aligned, surface-2 background, mono font
+ */
+
+import { memo, type ReactNode } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import type { ChatMessage } from '../../data/types.js';
+
+export interface MessageBubbleProps {
+  message: ChatMessage;
+  /** Regenerate handler, wired by the chat view. */
+  onRegenerate?: (message: ChatMessage) => void;
+}
+
+const ROLE_TONE: Record<ChatMessage['role'], 'user' | 'assistant' | 'system' | 'tool'> = {
+  user: 'user',
+  assistant: 'assistant',
+  system: 'system',
+  tool: 'tool',
+};
+
+const roleLabel = (role: ChatMessage['role']): string => {
+  switch (role) {
+    case 'user': return 'You';
+    case 'assistant': return 'Claude';
+    case 'system': return 'System';
+    case 'tool': return 'Tool';
+  }
+};
+
+const fmtTs = (iso: string): string => {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return '';
+  return new Date(t).toLocaleTimeString();
+};
+
+export const MessageBubble = memo(function MessageBubble({ message, onRegenerate }: MessageBubbleProps): JSX.Element {
+  const tone = ROLE_TONE[message.role] ?? 'assistant';
+  const ts = fmtTs(message.ts);
+  const isAssistant = message.role === 'assistant';
+  return (
+    <div
+      data-testid={`chat-bubble-${tone}`}
+      data-message-id={message.id}
+      style={{
+        display: 'flex',
+        flexDirection: tone === 'user' ? 'row-reverse' : 'row',
+        gap: 'var(--space-2)',
+        alignItems: 'flex-start',
+        padding: 'var(--space-2) 0',
+      }}
+    >
+      <div
+        aria-hidden="true"
+        style={{
+          width: 28,
+          height: 28,
+          borderRadius: 'var(--radius-pill)',
+          background:
+            tone === 'user'
+              ? 'var(--accent)'
+              : tone === 'tool'
+                ? 'var(--surface-2)'
+                : 'var(--surface-1)',
+          color: tone === 'user' ? 'var(--accent-fg)' : 'var(--fg)',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: 'var(--fs-11)',
+          fontWeight: 600,
+          flexShrink: 0,
+        }}
+      >
+        {roleLabel(message.role).slice(0, 2)}
+      </div>
+      <div
+        style={{
+          maxWidth: 'min(560px, 100%)',
+          padding: 'var(--space-3)',
+          borderRadius: 'var(--radius-md)',
+          background:
+            tone === 'user'
+              ? 'var(--surface-1)'
+              : tone === 'tool'
+                ? 'var(--surface-2)'
+                : 'var(--surface-0)',
+          border:
+            tone === 'user'
+              ? '1px solid var(--accent)'
+              : '1px solid var(--border)',
+          fontSize: 'var(--fs-13)',
+          lineHeight: 1.45,
+          wordBreak: 'break-word',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', marginBottom: 'var(--space-1)' }}>
+          <strong style={{ fontSize: 'var(--fs-12)' }}>{roleLabel(message.role)}</strong>
+          {message.agent && message.role !== 'user' && (
+            <code style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>
+              {message.agent}
+            </code>
+          )}
+          {ts && (
+            <span style={{ color: 'var(--fg-muted)', fontSize: 'var(--fs-11)' }}>{ts}</span>
+          )}
+        </div>
+        {isAssistant ? (
+          <div className="chat-markdown">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
+          </div>
+        ) : (
+          <div style={{ whiteSpace: 'pre-wrap' }}>{message.content}</div>
+        )}
+        {isAssistant && onRegenerate && (
+          <button
+            type="button"
+            onClick={() => onRegenerate(message)}
+            data-testid={`chat-regenerate-${message.id}`}
+            style={{
+              marginTop: 'var(--space-2)',
+              padding: 'var(--space-1) var(--space-2)',
+              borderRadius: 'var(--radius-sm)',
+              border: '1px solid var(--border)',
+              background: 'transparent',
+              color: 'var(--fg-muted)',
+              fontSize: 'var(--fs-11)',
+              cursor: 'pointer',
+            }}
+          >
+            Regenerate
+          </button>
+        )}
+        {message.attachments && message.attachments.length > 0 && (
+          <ul style={{ marginTop: 'var(--space-2)', marginBottom: 0, paddingLeft: 'var(--space-4)', fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>
+            {message.attachments.map((a, i) => (
+              <li key={i}>
+                {a.kind ?? 'attachment'}: {a.name ?? a.url ?? '(unnamed)'}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+});
+
+export function EmptyTranscript({ children }: { children?: ReactNode }): JSX.Element {
+  return (
+    <div
+      data-testid="chat-transcript-empty"
+      style={{
+        textAlign: 'center',
+        color: 'var(--fg-muted)',
+        fontSize: 'var(--fs-13)',
+        padding: 'var(--space-5)',
+      }}
+    >
+      {children ?? 'No messages yet. Send the first message to start a session.'}
+    </div>
+  );
+}

package/bizar-dash/src/web/v8/ui/data/ListHeader.tsx

@@ -0,0 +1,94 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * ListHeader — section header for list/grid views.
+ *
+ * Composes a label + count badge + optional sparkline + optional
+ * filter chips + right-aligned actions. Use at the top of a Card
+ * or as a standalone section divider.
+ *
+ * Two patterns supported:
+ * - Minimal: `<title> <count?> <actions?>`
+ * - Data-driven: `<title> <sparkline?> <chips?> <actions?>`
+ */
+export interface ListHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: ReactNode;
+  /** Optional numeric badge — e.g. `42` rendered as `42 items`. */
+  count?: number | null;
+  /** Inline sparkline (pass a Sparkline node, not raw data). */
+  sparkline?: ReactNode;
+  /** Inline filter chips — rendered as a wrapping row. */
+  filters?: ReactNode;
+  /** Right-aligned action area (buttons, refresh, etc). */
+  actions?: ReactNode;
+  /** Optional helper text under the title. */
+  description?: ReactNode;
+  testid?: string;
+}
+
+export const ListHeader = forwardRef<HTMLDivElement, ListHeaderProps>(function ListHeader(props, ref) {
+  const { title, count, sparkline, filters, actions, description, testid, className, ...rest } = props;
+  return (
+    <div
+      ref={ref}
+      data-testid={testid ?? 'list-header'}
+      className={cx('v8-list-header', className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+        marginBottom: 'var(--space-2)',
+      }}
+      {...rest}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-3)',
+          flexWrap: 'wrap',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', flex: 1, minWidth: 0 }}>
+          <h2 style={{ margin: 0, fontSize: 'var(--fs-16)', fontWeight: 600 }}>{title}</h2>
+          {count !== undefined && count !== null && (
+            <span
+              data-testid="list-header-count"
+              style={{
+                fontSize: 'var(--fs-12)',
+                color: 'var(--fg-muted)',
+                fontVariantNumeric: 'tabular-nums',
+                background: 'var(--surface-1)',
+                padding: '2px 8px',
+                borderRadius: 'var(--radius-pill)',
+                border: '1px solid var(--border)',
+              }}
+            >
+              {count}
+            </span>
+          )}
+          {sparkline !== undefined && (
+            <span data-testid="list-header-sparkline">{sparkline}</span>
+          )}
+          {description !== undefined && (
+            <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>{description}</span>
+          )}
+        </div>
+        {actions !== undefined && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-1)', flexShrink: 0 }}>
+            {actions}
+          </div>
+        )}
+      </div>
+      {filters !== undefined && (
+        <div
+          data-testid="list-header-filters"
+          style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-1)', flexWrap: 'wrap' }}
+        >
+          {filters}
+        </div>
+      )}
+    </div>
+  );
+});

package/bizar-dash/src/web/v8/ui/feedback/ErrorState.tsx

@@ -0,0 +1,116 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { AlertCircle, RefreshCcw } from 'lucide-react';
+import { Alert } from './Alert.js';
+import { Button } from '../controls/Button.js';
+
+/**
+ * ErrorState — surfaced error with optional retry CTA.
+ *
+ * Use when a view's primary fetch failed and we want to recover,
+ * not when the fetch succeeded with zero rows (use EmptyState).
+ *
+ * Two layout modes:
+ * - inline (default): Alert-tone=danger banner with optional retry button
+ * - block: centered icon + title + description + retry (mirrors EmptyState)
+ *
+ * `error` is the raw error (Error | string | null). When non-null,
+ * the message is rendered below the title. Use the `silent` flag to
+ * omit the message (e.g. when the parent already shows it).
+ */
+export interface ErrorStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title?: ReactNode;
+  description?: ReactNode;
+  error?: Error | string | null;
+  onRetry?: () => void;
+  retryLabel?: string;
+  /** Use the centered block layout instead of the inline Alert. */
+  block?: boolean;
+  /** Hide the error message (parent surfaces it elsewhere). */
+  silent?: boolean;
+  testid?: string;
+}
+
+function errMessage(error: Error | string | null | undefined): string {
+  if (error === null || error === undefined) return '';
+  return typeof error === 'string' ? error : error.message;
+}
+
+export const ErrorState = forwardRef<HTMLDivElement, ErrorStateProps>(function ErrorState(
+  props,
+  ref,
+) {
+  const {
+    title = 'Something went wrong',
+    description,
+    error,
+    onRetry,
+    retryLabel = 'Retry',
+    block = false,
+    silent = false,
+    testid,
+    className,
+    ...rest
+  } = props;
+
+  const message = silent ? '' : errMessage(error);
+
+  if (block) {
+    return (
+      <div
+        ref={ref}
+        data-testid={testid ?? 'error-state'}
+        className={className}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 'var(--space-3)',
+          padding: 'var(--space-12) var(--space-6)',
+          textAlign: 'center',
+          color: 'var(--fg-muted)',
+        }}
+        {...rest}
+      >
+        <div style={{ color: 'var(--danger)', display: 'inline-flex' }}>
+          <AlertCircle size={28} aria-hidden />
+        </div>
+        <div style={{ fontSize: 'var(--fs-16)', fontWeight: 600, color: 'var(--fg)' }}>{title}</div>
+        {description !== undefined && (
+          <div style={{ fontSize: 'var(--fs-13)', maxWidth: 480 }}>{description}</div>
+        )}
+        {message !== '' && (
+          <code style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>{message}</code>
+        )}
+        {onRetry !== undefined && (
+          <Button variant="primary" onClick={onRetry} data-testid="error-state-retry">
+            <RefreshCcw size={14} aria-hidden /> {retryLabel}
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={ref} data-testid={testid ?? 'error-state'} className={className} {...rest}>
+      <Alert
+        tone="danger"
+        title={title}
+        action={
+          onRetry !== undefined ? (
+            <Button variant="ghost" onClick={onRetry} data-testid="error-state-retry" aria-label={retryLabel}>
+              <RefreshCcw size={14} aria-hidden /> {retryLabel}
+            </Button>
+          ) : undefined
+        }
+      >
+        {description}
+        {message !== '' && (
+          <div style={{ marginTop: 'var(--space-1)', fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-12)' }}>
+            {message}
+          </div>
+        )}
+      </Alert>
+    </div>
+  );
+});