@polderlabs/bizar 9.0.0 → 10.0.5

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

package/bizar-dash/src/web/v8/ui/goals/GoalDetail.tsx

@@ -37,6 +37,23 @@ export interface GoalDetailProps {
 
 export function GoalDetail(props: GoalDetailProps): JSX.Element {
   const { goal, open, onOpenChange } = props;
+  const [deleting, setDeleting] = useState<boolean>(false);
+
+  const removeGoal = async (): Promise<void> => {
+    const ok = typeof window !== 'undefined' && typeof window.confirm === 'function'
+      ? window.confirm(`Delete goal "${goal.title}"? This removes it from PROGRESS.md.`)
+      : true;
+    if (!ok) return;
+    setDeleting(true);
+    try {
+      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}`, { method: 'DELETE' });
+      onOpenChange(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setDeleting(false);
+    }
+  };
   const [title, setTitle] = useState<string>(goal.title);
   const [status, setStatus] = useState<string>(goal.status);
   const [owner, setOwner] = useState<string>(goal.owner || '');
@@ -237,6 +254,16 @@ export function GoalDetail(props: GoalDetailProps): JSX.Element {
           </Inline>
         </Stack>
 
+        <div style={{ borderTop: '1px solid var(--border)', paddingTop: 'var(--space-3)' }}>
+          <Button
+            variant="danger"
+            onClick={() => { void removeGoal(); }}
+            disabled={deleting || busy !== null}
+          >
+            <Trash2 size={14} aria-hidden /> {deleting ? 'Deleting…' : 'Delete goal'}
+          </Button>
+        </div>
+
         {message !== null && (
           <div role="status" style={{ fontSize: 'var(--fs-12)', color: 'var(--success)' }}>{message}</div>
         )}

package/bizar-dash/src/web/v8/ui/index.ts

@@ -319,4 +319,10 @@ export {
   SettingsNav,
   type SettingsNavProps,
   type SettingsNavItem,
-} from './settings/SettingsNav.js';
+} from './settings/SettingsNav.js';
+
+// ── chat (Sprint S37, v9.3.0) ───────────────────────────────────────────
+
+export { readEventStream, type EventStreamHandlers, type EventStreamOptions } from './chat/EventStream.js';
+export { MessageBubble, EmptyTranscript, type MessageBubbleProps } from './chat/MessageBubble.js';
+export { ChatDrawer, type ChatDrawerProps } from './chat/ChatDrawer.js';