@polderlabs/bizar 7.0.4 → 8.0.0

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

@@ -1,260 +0,0 @@
-// 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/MessageBubble.tsx

@@ -1,60 +0,0 @@
-// src/components/chat/MessageBubble.tsx — user/assistant message with hover actions.
-
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { Copy, RefreshCw, Pin, Trash2 } from 'lucide-react';
-import { formatTime } from '../../lib/utils';
-
-interface Message {
-  role?: string;
-  content?: string;
-  message?: string;
-  agent?: string;
-  ts?: string | number;
-}
-
-interface Props {
-  message: Message;
-  pinned: boolean;
-  onCopy: () => void;
-  onDelete: () => void;
-  onTogglePin: () => void;
-  onRegenerate: () => void;
-}
-
-export function MessageBubble({ message, pinned, onCopy, onDelete, onTogglePin, onRegenerate }: Props) {
-  const role = (message.role || 'assistant').toLowerCase();
-  const ts = message.ts ? formatTime(message.ts) : '';
-  const content = message.content || message.message || '';
-  const isUser = role === 'user';
-
-  return (
-    <article className={`chat-message ${isUser ? 'chat-message-user' : 'chat-message-assistant'} ${pinned ? 'chat-message-pinned' : ''}`}>
-      <header className="chat-message-meta">
-        <span className="chat-message-role">{role}</span>
-        {message.agent && <span className="chat-message-agent">@{message.agent}</span>}
-        {ts && <time className="chat-message-time">{ts}</time>}
-        {pinned && <span className="chat-message-pin">pinned</span>}
-        <div className="chat-message-actions">
-          <button type="button" className="chat-msg-action-btn" onClick={onCopy} title="Copy" aria-label="Copy">
-            <Copy size={12} />
-          </button>
-          {!isUser && (
-            <button type="button" className="chat-msg-action-btn" onClick={onRegenerate} title="Regenerate" aria-label="Regenerate">
-              <RefreshCw size={12} />
-            </button>
-          )}
-          <button type="button" className="chat-msg-action-btn" onClick={onTogglePin} title="Pin" aria-label="Pin">
-            <Pin size={12} />
-          </button>
-          <button type="button" className="chat-msg-action-btn chat-msg-action-btn-danger" onClick={onDelete} title="Delete" aria-label="Delete">
-            <Trash2 size={12} />
-          </button>
-        </div>
-      </header>
-      <div className="chat-message-content markdown-body">
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
-      </div>
-    </article>
-  );
-}

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

@@ -1,163 +0,0 @@
-// src/components/chat/SessionList.tsx — sessions sidebar with create + select.
-
-import { useState } from 'react';
-import { Plus, Sparkles, Folder, ExternalLink } from 'lucide-react';
-import { Button } from '../Button';
-import { EmptyState } from './EmptyState';
-import { Spinner } from '../Spinner';
-import type { ChatSession } from '../../lib/types';
-
-interface Props {
-  sessions: ChatSession[];
-  clineSessions: ChatSession[];
-  activeSessionId: string;
-  /** The cline session currently displayed, or null. */
-  activeClineSessionId: string | null;
-  activeProject: { name: string } | null;
-  creating: boolean;
-  onCreateSession: () => void;
-  /** Called when a bizar session is selected. */
-  onSelectSession: (id: string) => void;
-  /** Called when an cline session is selected — renders it in-dash. */
-  onSelectClineSession: (s: ChatSession) => void;
-}
-
-export function SessionList({
-  sessions,
-  clineSessions,
-  activeSessionId,
-  activeClineSessionId,
-  activeProject,
-  creating,
-  onCreateSession,
-  onSelectSession,
-  onSelectClineSession,
-}: Props) {
-  const [view, setView] = useState<'bizar' | 'all'>('all');
-  const [showAll, setShowAll] = useState(false);
-  const VISIBLE_LIMIT = 30;
-
-  const allSorted = view === 'all'
-    ? [...sessions, ...clineSessions].sort((a, b) => Number(b.mtime) - Number(a.mtime))
-    : sessions;
-  const displayedSessions = showAll ? allSorted : allSorted.slice(0, VISIBLE_LIMIT);
-
-  const totalCline = clineSessions.length;
-
-  const handleSelectSession = (s: ChatSession) => {
-    if (s.source === 'cline') {
-      // Render cline session in-dash — no window.open redirect
-      onSelectClineSession(s);
-      return;
-    }
-    onSelectSession(s.id);
-  };
-
-  return (
-    <div className="chat-sessions">
-      <div className="chat-sessions-header">
-        <span className="chat-sessions-header-title">Sessions</span>
-        <span className="chat-sessions-count">{displayedSessions.length}</span>
-      </div>
-
-      {totalCline > 0 && (
-        <div className="chat-sessions-toggle">
-          <button
-            type="button"
-            className={`chat-sessions-toggle-btn ${view === 'bizar' ? 'active' : ''}`}
-            onClick={() => setView('bizar')}
-          >
-            Bizar
-          </button>
-          <button
-            type="button"
-            className={`chat-sessions-toggle-btn ${view === 'all' ? 'active' : ''}`}
-            onClick={() => setView('all')}
-          >
-            All ({totalCline} cline)
-          </button>
-        </div>
-      )}
-
-      <button
-        type="button"
-        className="chat-sessions-new"
-        onClick={onCreateSession}
-        disabled={creating || !activeProject}
-        title={activeProject ? 'Create new session' : 'Pick a project first'}
-        aria-label="Create new session"
-      >
-        {creating ? <Spinner size="sm" /> : <Plus size={14} />}
-        <span>{creating ? 'Creating…' : 'New session'}</span>
-      </button>
-
-      {sessions.length === 0 ? (
-        <div className="chat-sessions-empty">
-          <EmptyState
-            icon={<Sparkles size={20} />}
-            title={activeProject ? 'No sessions yet' : 'No project'}
-            message={
-              activeProject
-                ? 'Create your first session to start chatting.'
-                : 'Pick a project in Overview to scope chat sessions.'
-            }
-            action={
-              activeProject ? (
-                <Button variant="primary" size="sm" onClick={onCreateSession} loading={creating}>
-                  <Plus size={12} /> New session
-                </Button>
-              ) : (
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  onClick={() => { window.location.hash = '#overview'; }}
-                >
-                  <Folder size={12} /> Open Overview
-                </Button>
-              )
-            }
-          />
-        </div>
-      ) : (
-        <ul className="chat-sessions-list">
-          {displayedSessions.map((s) => {
-            const isCline = s.source === 'cline';
-            const isActive = isCline
-              ? activeClineSessionId === s.id
-              : activeSessionId === s.id;
-            return (
-              <li
-                key={isCline ? `oc-${s.id}` : s.id}
-                className={`chat-sessions-item ${isActive ? 'active' : ''} ${isCline ? 'chat-sessions-item-cline' : ''}`}
-                onClick={() => handleSelectSession(s)}
-                title={isCline ? `Open in dashboard: ${s.title || s.id}` : s.id}
-              >
-                {isCline && (
-                  <ExternalLink size={10} className="chat-sessions-item-icon" />
-                )}
-                <span className="chat-sessions-item-id">
-                  {s.title || s.id}
-                </span>
-                <span className="chat-sessions-item-meta">
-                  {new Date(Number(s.mtime)).toLocaleDateString()}
-                </span>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-
-      {allSorted.length > VISIBLE_LIMIT && (
-        <button
-          type="button"
-          className="chat-sessions-show-more"
-          onClick={() => setShowAll((v) => !v)}
-        >
-          {showAll
-            ? `Show less (${allSorted.length - VISIBLE_LIMIT} hidden)`
-            : `Show all ${allSorted.length} sessions`}
-        </button>
-      )}
-    </div>
-  );
-}

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

@@ -1,206 +0,0 @@
-// 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);
-}