@polderlabs/bizar 4.3.0 → 4.4.1

package/bizar-dash/src/web/components/chat/JumpToLatest.tsx

@@ -0,0 +1,58 @@
+// src/components/chat/JumpToLatest.tsx — floating pill above the composer.
+//
+// Two visual variants:
+//   - streaming (current session is being replied to): pulsing indigo
+//     border + 3-dot bounce + green "live" badge
+//   - idle: neutral pill + down-arrow icon + "N new" badge
+//
+// Hidden entirely when the user is already at the bottom of the thread
+// (controlled by the parent's `stickToBottom` flag).
+
+import { ArrowDown } from 'lucide-react';
+
+interface Props {
+  streaming: boolean;
+  newMessageCount: number;
+  onClick: () => void;
+  /** Optional label override (e.g. "Odin is replying"). */
+  streamingLabel?: string;
+}
+
+export function JumpToLatest({
+  streaming,
+  newMessageCount,
+  onClick,
+  streamingLabel = 'Odin is replying',
+}: Props) {
+  return (
+    <button
+      type="button"
+      className={`jump-to-latest${streaming ? ' is-streaming' : ''}`}
+      onClick={onClick}
+      aria-label="Jump to latest message"
+      title="Jump to latest (⌘/Ctrl+End)"
+    >
+      {streaming ? (
+        <>
+          <span className="jump-dots" aria-hidden>
+            <span />
+            <span />
+            <span />
+          </span>
+          <span>{streamingLabel}</span>
+          {newMessageCount > 0 && (
+            <span className="jump-badge jump-badge-live">live</span>
+          )}
+        </>
+      ) : (
+        <>
+          <ArrowDown size={14} aria-hidden />
+          <span>Jump to latest</span>
+          {newMessageCount > 0 && (
+            <span className="jump-badge">{newMessageCount} new</span>
+          )}
+        </>
+      )}
+    </button>
+  );
+}

package/bizar-dash/src/web/components/chat/MessageBlock.tsx

@@ -0,0 +1,260 @@
+// src/components/chat/MessageBlock.tsx — single chat bubble with hover actions
+// + phased halo animation while streaming.
+//
+// Mirrors the design HTML's MessageBlock component (lines 2266–2390 of
+// the source design). Each message has:
+//   - avatar (initial letter + halo pulse for phase think/stream/commit)
+//   - meta row (author + phase indicator + timestamp)
+//   - bubble (user or assistant styling)
+//   - hover action bar (copy / edit / regenerate / speak / thumbs-up / thumbs-down)
+//
+// Streaming flow (when `streaming: true` on the message):
+//   think (0–900ms)   → dots, halo pulse phase=think
+//   stream (900–5400ms) → cursor blinks, halo pulse phase=stream
+//   commit (5400–5800ms) → green halo pulse, bubble flashes ring
+//   idle (5800ms+)    → all animations stop, action bar fully visible
+
+import { useEffect, useState } from 'react';
+import {
+  Copy,
+  Edit,
+  RefreshCw,
+  Volume2,
+  ThumbsUp,
+  ThumbsDown,
+} from 'lucide-react';
+import { StreamingIndicator } from './StreamingIndicator';
+
+export type StreamingPhase = 'idle' | 'think' | 'stream' | 'commit';
+
+export type MessageRole = 'user' | 'assistant' | 'system';
+
+export type MessageContentBlock =
+  | { type: 'p'; text: string }
+  | { type: 'ul'; items: string[] }
+  | { type: 'code'; code: string }
+  | { type: 'text'; text: string };
+
+export interface MessageBlockProps {
+  id?: string;
+  role: MessageRole;
+  content: MessageContentBlock[] | string;
+  agent?: string;
+  ts?: string;
+  streaming?: boolean;
+  feedback?: 'up' | 'down' | null;
+  onCopy?: (text: string) => void;
+  onEdit?: (msg: MessageBlockProps) => void;
+  onRegenerate?: (msg: MessageBlockProps) => void;
+  onSpeak?: (msg: MessageBlockProps) => void;
+  onFeedback?: (msg: MessageBlockProps, value: 'up' | 'down' | null) => void;
+  onReady?: (msg: MessageBlockProps) => void;
+}
+
+function getInitial(agent?: string): string {
+  if (!agent) return 'A';
+  return agent.replace(/^@/, '').charAt(0).toUpperCase();
+}
+
+function flattenText(content: MessageContentBlock[] | string): string {
+  if (typeof content === 'string') return content;
+  return content
+    .map((b) =>
+      b.type === 'p' || b.type === 'text'
+        ? b.text
+        : b.type === 'ul'
+          ? (b.items ?? []).join('\n')
+          : b.type === 'code'
+            ? b.code
+            : '',
+    )
+    .join('\n\n');
+}
+
+export function MessageBlock(props: MessageBlockProps) {
+  const {
+    role,
+    content,
+    agent,
+    ts,
+    streaming = false,
+    feedback: feedbackProp = null,
+    onCopy,
+    onEdit,
+    onRegenerate,
+    onSpeak,
+    onFeedback,
+    onReady,
+  } = props;
+
+  const [copied, setCopied] = useState(false);
+  const [feedback, setFeedback] = useState<'up' | 'down' | null>(feedbackProp);
+  const [phase, setPhase] = useState<StreamingPhase>(streaming ? 'think' : 'idle');
+
+  useEffect(() => {
+    if (!streaming) {
+      setPhase('idle');
+      return;
+    }
+    const timers = [
+      window.setTimeout(() => setPhase('stream'), 900),
+      window.setTimeout(() => setPhase('commit'), 5400),
+      window.setTimeout(() => {
+        setPhase('idle');
+        onReady?.(props);
+      }, 5800),
+    ];
+    return () => timers.forEach(window.clearTimeout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [streaming]);
+
+  const handleCopy = () => {
+    const text = flattenText(content);
+    onCopy?.(text);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1400);
+  };
+
+  const handleFeedback = (kind: 'up' | 'down') => {
+    const next = feedback === kind ? null : kind;
+    setFeedback(next);
+    onFeedback?.(props, next);
+  };
+
+  if (role === 'system') {
+    return (
+      <div className="msg msg-system">
+        <span className="msg-system-dot" />
+        <span>{typeof content === 'string' ? content : flattenText(content)}</span>
+        {ts && <span className="msg-ts chat-muted">{ts}</span>}
+      </div>
+    );
+  }
+
+  const isStreaming = phase !== 'idle';
+  const text = flattenText(content);
+
+  if (role === 'user') {
+    return (
+      <div className="msg msg-user msg-enter">
+        <div className="msg-bubble-user-wrap">
+          <div className="msg-actions msg-actions-user">
+            <button
+              type="button"
+              className="msg-action-btn"
+              title="Copy"
+              onClick={handleCopy}
+            >
+              <Copy size={13} aria-hidden />
+              <span className="msg-action-label">{copied ? 'Copied' : 'Copy'}</span>
+            </button>
+            <button
+              type="button"
+              className="msg-action-btn"
+              title="Edit"
+              onClick={() => onEdit?.(props)}
+            >
+              <Edit size={13} aria-hidden />
+              <span className="msg-action-label">Edit</span>
+            </button>
+          </div>
+          <div className="msg-bubble msg-bubble-user">{text}</div>
+        </div>
+        <div className="msg-avatar msg-avatar-user">U</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`msg msg-assistant msg-enter msg-phase-${phase}`}>
+      <div className="msg-avatar msg-avatar-assistant">
+        <span className="msg-avatar-letter">{getInitial(agent)}</span>
+        {isStreaming && <span className={`msg-avatar-pulse phase-${phase}`} aria-hidden />}
+      </div>
+      <div className="msg-body">
+        <div className="msg-meta">
+          {agent && <span className="msg-author">{agent}</span>}
+          {isStreaming && <StreamingIndicator phase={phase} />}
+          {ts && <span className="msg-ts chat-muted">{ts}</span>}
+        </div>
+        <div className="msg-bubble-wrap">
+          <div className="msg-actions msg-actions-assistant">
+            <button
+              type="button"
+              className="msg-action-btn"
+              title="Copy"
+              onClick={handleCopy}
+            >
+              <Copy size={13} aria-hidden />
+              <span className="msg-action-label">{copied ? 'Copied' : 'Copy'}</span>
+            </button>
+            {phase === 'idle' && (
+              <button
+                type="button"
+                className="msg-action-btn"
+                title="Regenerate"
+                onClick={() => onRegenerate?.(props)}
+              >
+                <RefreshCw size={13} aria-hidden />
+                <span className="msg-action-label">Regenerate</span>
+              </button>
+            )}
+            <button
+              type="button"
+              className="msg-action-btn"
+              title="Read aloud"
+              onClick={() => onSpeak?.(props)}
+            >
+              <Volume2 size={13} aria-hidden />
+              <span className="msg-action-label">Speak</span>
+            </button>
+            <div className="msg-action-sep" />
+            <button
+              type="button"
+              className={`msg-action-btn msg-action-feedback${feedback === 'up' ? ' active' : ''}`}
+              title="Helpful"
+              onClick={() => handleFeedback('up')}
+            >
+              <ThumbsUp size={13} aria-hidden />
+            </button>
+            <button
+              type="button"
+              className={`msg-action-btn msg-action-feedback${feedback === 'down' ? ' active' : ''}`}
+              title="Not helpful"
+              onClick={() => handleFeedback('down')}
+            >
+              <ThumbsDown size={13} aria-hidden />
+            </button>
+          </div>
+          <div className="msg-bubble msg-bubble-assistant">
+            {typeof content === 'string'
+              ? <p>{content}</p>
+              : content.map((block, i) => {
+                  if (block.type === 'p' || block.type === 'text') {
+                    return <p key={i}>{block.text}</p>;
+                  }
+                  if (block.type === 'ul') {
+                    return (
+                      <ul key={i}>
+                        {(block.items ?? []).map((it, j) => (
+                          <li key={j}>{it}</li>
+                        ))}
+                      </ul>
+                    );
+                  }
+                  if (block.type === 'code') {
+                    return (
+                      <pre key={i} className="msg-code">
+                        <code>{block.code}</code>
+                      </pre>
+                    );
+                  }
+                  return null;
+                })}
+            {isStreaming && <span className="msg-cursor" aria-hidden />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/components/chat/SessionRowMenu.tsx

@@ -0,0 +1,206 @@
+// src/components/chat/SessionRowMenu.tsx — three-mode popover for a session rail row.
+//
+// Three modes:
+//   'main'           — Rename + Delete buttons
+//   'rename'         — Inline input with Cancel/Save
+//   'confirm-delete' — Inline confirmation with Cancel/Delete
+//
+// Rendered via createPortal on document.body so it isn't clipped by
+// the rail's overflow:auto scroll container. The parent row supplies
+// the anchor's bounding rect (or the menu uses an anchor prop).
+
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Edit, Trash2 } from 'lucide-react';
+
+export type SessionMenuMode = 'main' | 'rename' | 'confirm-delete';
+
+export interface SessionRowMenuAnchor {
+  /** Bounding rect of the trigger / row used to position the popover. */
+  rect: DOMRect;
+}
+
+export interface SessionRowMenuProps {
+  session: { id: string; title: string };
+  mode: SessionMenuMode;
+  anchor: SessionRowMenuAnchor;
+  renameDraft: string;
+  setRenameDraft: (s: string) => void;
+  onEdit: () => void;
+  onDeleteRequest: () => void;
+  onConfirmDelete: () => void;
+  onConfirmRename: () => void;
+  onClose: () => void;
+}
+
+export function SessionRowMenu({
+  session,
+  mode,
+  anchor,
+  renameDraft,
+  setRenameDraft,
+  onEdit,
+  onDeleteRequest,
+  onConfirmDelete,
+  onConfirmRename,
+  onClose,
+}: SessionRowMenuProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  // Position the popover just below the row's right edge.
+  const top = Math.round(anchor.rect.bottom + 2);
+  const right = Math.max(8, Math.round(window.innerWidth - anchor.rect.right));
+
+  // Close on outside click + Esc.
+  useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as Node | null;
+      if (!ref.current || !t) return;
+      if (ref.current.contains(t)) return;
+      onClose();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    // Defer attaching the outside-click handler so the click that opened
+    // the menu doesn't immediately close it.
+    const id = window.setTimeout(() => {
+      document.addEventListener('mousedown', onDown);
+      document.addEventListener('keydown', onKey);
+    }, 0);
+    return () => {
+      window.clearTimeout(id);
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [onClose]);
+
+  // Auto-focus the rename input when entering rename mode.
+  useEffect(() => {
+    if (mode !== 'rename') return;
+    const id = window.setTimeout(() => {
+      const input = ref.current?.querySelector<HTMLInputElement>('input.session-row-menu-input');
+      input?.focus();
+      input?.select();
+    }, 0);
+    return () => window.clearTimeout(id);
+  }, [mode]);
+
+  const body = (
+    <div
+      ref={ref}
+      className="session-row-menu"
+      role="menu"
+      aria-label={`Options for ${session.title}`}
+      style={{ position: 'fixed', top, right }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {mode === 'main' && (
+        <>
+          <button
+            type="button"
+            className="session-row-menu-item"
+            role="menuitem"
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit();
+            }}
+          >
+            <Edit size={13} aria-hidden />
+            <span>Rename</span>
+            <kbd>R</kbd>
+          </button>
+          <button
+            type="button"
+            className="session-row-menu-item session-row-menu-item-danger"
+            role="menuitem"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDeleteRequest();
+            }}
+          >
+            <Trash2 size={13} aria-hidden />
+            <span>Delete</span>
+            <kbd>⌫</kbd>
+          </button>
+        </>
+      )}
+      {mode === 'rename' && (
+        <div className="session-row-menu-inline">
+          <div className="session-row-menu-inline-label chat-mono">Rename session</div>
+          <input
+            type="text"
+            className="session-row-menu-input"
+            value={renameDraft}
+            onChange={(e) => setRenameDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                onConfirmRename();
+              } else if (e.key === 'Escape') {
+                e.preventDefault();
+                onClose();
+              }
+            }}
+            onClick={(e) => e.stopPropagation()}
+            aria-label="New session name"
+          />
+          <div className="session-row-menu-inline-actions">
+            <button
+              type="button"
+              className="btn btn-ghost"
+              onClick={(e) => {
+                e.stopPropagation();
+                onClose();
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={(e) => {
+                e.stopPropagation();
+                onConfirmRename();
+              }}
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      )}
+      {mode === 'confirm-delete' && (
+        <div className="session-row-menu-inline">
+          <div className="session-row-menu-inline-label chat-mono">Delete this session?</div>
+          <div className="session-row-menu-inline-message">
+            "{session.title}" and its sub-agents will be removed.
+          </div>
+          <div className="session-row-menu-inline-actions">
+            <button
+              type="button"
+              className="btn btn-ghost"
+              onClick={(e) => {
+                e.stopPropagation();
+                onClose();
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="btn btn-danger"
+              onClick={(e) => {
+                e.stopPropagation();
+                onConfirmDelete();
+              }}
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  return createPortal(body, document.body);
+}

package/bizar-dash/src/web/components/chat/StreamingIndicator.tsx

@@ -1,9 +1,37 @@
-// src/components/chat/StreamingIndicator.tsx — animated typing indicator.
+// src/components/chat/StreamingIndicator.tsx — phase indicator in the message meta row.
+//
+// Phase-driven label + 3-dot bounce. The dot animation duration
+// shortens as the message progresses (think → stream → commit), so
+// the visual rhythm matches the streaming cadence.
+//
+// The named export `StreamingIndicator` keeps its signature backward-
+// compatible: argumentless → defaults to "think" phase (legacy
+// dot-bounce used by WelcomeScreen + the old MessageBubble).
 
-export function StreamingIndicator() {
+import type { StreamingPhase } from './MessageBlock';
+
+interface Props {
+  /** Streaming phase. Defaults to 'think' for the legacy
+   *  argumentless call site. */
+  phase?: StreamingPhase;
+}
+
+const LABELS: Record<Exclude<StreamingPhase, 'idle'>, string> = {
+  think: 'thinking',
+  stream: 'streaming tokens',
+  commit: 'committing',
+};
+
+export function StreamingIndicator({ phase = 'think' }: Props) {
+  const label = phase === 'idle' ? null : LABELS[phase];
   return (
-    <div className="chat-streaming-indicator" aria-label="Assistant is typing">
-      <span /><span /><span />
-    </div>
+    <span className={`msg-stream-indicator phase-${phase}`}>
+      {label && <span className="msg-stream-label">{label}</span>}
+      <span className="msg-stream-dots" aria-hidden>
+        <span />
+        <span />
+        <span />
+      </span>
+    </span>
   );
 }

package/bizar-dash/src/web/components/chat/_legacy.ts

@@ -0,0 +1,30 @@
+// src/components/chat/_legacy.ts — backward-compatibility shim.
+//
+// MobileChat.tsx (mobile view) and any other consumer that imports the
+// original names (`SessionList`, `InfoPanel`, `FloatingComposer`)
+// continues to work even after the v3.22 redesign renamed these
+// components. Each renamed component keeps its NEW default export in
+// the new file; this module re-exports them under the OLD names.
+//
+// Notes for future maintainers:
+// - `ChatTopBar`, `ChatThread`, `useChat`, `useSlashCommands` keep
+//   their original filenames + exports; nothing to shim here.
+// - `SessionList`   → ChatRail
+// - `InfoPanel`     → ChatInfoPanel
+// - `FloatingComposer` → ChatComposer
+// - `MessageBubble` / `StreamingIndicator` / `AgentChip` / `WelcomeScreen`
+//   / `SuggestionCards` / `Composer` / `FirstRunGreeting` / `ConfirmModal`
+//   / `EmptyState` / `LoadingSkeleton` / `useAutoGrowTextarea` are
+//   unchanged and continue to be exported from `index.ts`.
+
+export { ChatRail as SessionList } from './ChatRail';
+export { ChatInfoPanel as InfoPanel } from './ChatInfoPanel';
+export { ChatComposer as FloatingComposer } from './ChatComposer';
+
+// Re-export the unchanged pieces too so this file is a single drop-in
+// for any consumer that wants to keep using old names in one place.
+export { ChatTopBar } from './ChatTopBar';
+export { ChatThread } from './ChatThread';
+export { useChat } from './useChat';
+export { useSlashCommands } from './useSlashCommands';
+export type { SlashCommand } from './useSlashCommands';

package/bizar-dash/src/web/components/chat/index.ts

@@ -3,15 +3,26 @@
 export { ChatTopBar } from './ChatTopBar';
 export { ChatThread } from './ChatThread';
 export { MessageBubble } from './MessageBubble';
+export { MessageBlock } from './MessageBlock';
 export { WelcomeScreen } from './WelcomeScreen';
 export { SuggestionCards } from './SuggestionCards';
 export { Composer } from './Composer';
 export { FloatingComposer } from './FloatingComposer';
+export { ChatComposer } from './ChatComposer';
 export { AgentChip } from './AgentChip';
 export { SessionList } from './SessionList';
+export { ChatRail } from './ChatRail';
+export type { DisplaySession, SessionState } from './ChatRail';
 export { InfoPanel } from './InfoPanel';
+export { ChatInfoPanel } from './ChatInfoPanel';
 export { LoadingSkeleton } from './LoadingSkeleton';
 export { StreamingIndicator } from './StreamingIndicator';
+export { JumpToLatest } from './JumpToLatest';
+export { AgentNode } from './AgentNode';
+export type { AgentTreeNode, AgentStatus } from './AgentNode';
+export { AgentTree, SubAgentList } from './AgentTree';
+export { SessionRowMenu } from './SessionRowMenu';
+export type { SessionMenuMode, SessionRowMenuAnchor, SessionRowMenuProps } from './SessionRowMenu';
 export { ConfirmModal } from './ConfirmModal';
 export { EmptyState } from './EmptyState';
 export { useChat } from './useChat';