@polderlabs/bizar 3.23.1 → 4.2.0

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

@@ -0,0 +1,164 @@
+// src/components/chat/Composer.tsx — textarea + toolbar, used inside FloatingComposer.
+
+import { useRef } from 'react';
+import { Send, Paperclip, X, Sparkles } from 'lucide-react';
+import { enhancePrompt } from '../../lib/api';
+import { AgentChip } from './AgentChip';
+import { useAutoGrowTextarea } from './useAutoGrowTextarea';
+
+interface Props {
+  agent: string;
+  setAgent: (a: string) => void;
+  model: string;
+  setModel: (m: string) => void;
+  text: string;
+  setText: (t: string) => void;
+  sending: boolean;
+  onSend: () => void;
+  attachments: string[];
+  setAttachments: (a: string[] | ((prev: string[]) => string[])) => void;
+  suggestions: Array<{ cmd: string; desc: string }>;
+  onPickSuggestion: (cmd: string) => void;
+  agents: Array<{ name: string }>;
+  onAttach: () => void;
+}
+
+export function Composer({
+  agent,
+  setAgent,
+  model,
+  setModel,
+  text,
+  setText,
+  sending,
+  onSend,
+  attachments,
+  setAttachments,
+  suggestions,
+  onPickSuggestion,
+  agents,
+  onAttach,
+}: Props) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  useAutoGrowTextarea(inputRef, text, 200);
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      onSend();
+    } else if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSend();
+    } else if (e.key === 'Tab' && suggestions.length) {
+      e.preventDefault();
+      const base = suggestions[0].cmd.split(' ')[0];
+      setText(`${base} `);
+    }
+  };
+
+  const onFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+    const names: string[] = [];
+    for (let i = 0; i < files.length; i++) names.push(files[i].name);
+    setAttachments((cur) => [...cur, ...names]);
+    e.target.value = '';
+  };
+
+  return (
+    <div className="chat-composer">
+      {suggestions.length > 0 && (
+        <div className="chat-composer-suggestions">
+          {suggestions.map((s) => (
+            <button
+              key={s.cmd}
+              type="button"
+              className="chat-composer-suggestion"
+              onClick={() => {
+                const base = s.cmd.split(' ')[0];
+                setText(`${base} `);
+                inputRef.current?.focus();
+              }}
+            >
+              <span className="mono">{s.cmd}</span>
+              <span>{s.desc}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {attachments.length > 0 && (
+        <div className="chat-composer-attachments">
+          {attachments.map((a, i) => (
+            <span key={i} className="chat-composer-attachment-tag">
+              <Paperclip size={10} /> {a}
+              <button
+                type="button"
+                className="chat-composer-attachment-remove"
+                onClick={() => setAttachments((cur) => cur.filter((_, j) => j !== i))}
+                aria-label={`Remove ${a}`}
+              >
+                <X size={10} />
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div className="chat-composer-input">
+        <AgentChip agent={agent} setAgent={setAgent} agents={agents} />
+        <textarea
+          ref={inputRef}
+          className="chat-composer-textarea"
+          placeholder={sending ? 'Sending…' : 'Send a message…'}
+          rows={1}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={onKeyDown}
+          disabled={sending}
+          aria-label="Message"
+        />
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          style={{ display: 'none' }}
+          onChange={onFiles}
+        />
+        <button
+          type="button"
+          className="chat-attach-btn"
+          onClick={onAttach}
+          title="Attach files"
+          aria-label="Attach files"
+        >
+          <Paperclip size={14} />
+        </button>
+        <button
+          type="button"
+          className="chat-attach-btn"
+          onClick={async () => {
+            if (!text.trim()) return;
+            const enhanced = await enhancePrompt(text);
+            if (enhanced !== text) setText(enhanced);
+          }}
+          title="Enhance prompt with AI"
+          aria-label="Enhance prompt"
+        >
+          <Sparkles size={14} />
+        </button>
+        <button
+          type="button"
+          className="chat-send-btn"
+          onClick={onSend}
+          disabled={sending || !text.trim()}
+          title="Send (Enter)"
+          aria-label="Send message"
+        >
+          <Send size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+// src/components/chat/ConfirmModal.tsx — wraps the shared useModal hook.
+
+import { useModal } from '../Modal';
+import { AlertTriangle } from 'lucide-react';
+
+interface Props {
+  open: boolean;
+  title: string;
+  message: React.ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export function ConfirmModal({
+  open,
+  title,
+  message,
+  onConfirm,
+  onClose,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  destructive = false,
+}: Props) {
+  const modal = useModal();
+
+  if (open && !modal.isModalOpen) {
+    modal.open({
+      title,
+      children: (
+        <div className="confirm-modal-body">
+          {destructive && (
+            <div className="confirm-modal-warning"><AlertTriangle size={20} /></div>
+          )}
+          <p>{message}</p>
+          <div className="confirm-modal-actions">
+            <button type="button" className="btn btn-ghost" onClick={onClose}>{cancelLabel}</button>
+            <button
+              type="button"
+              className={`btn ${destructive ? 'btn-danger' : 'btn-primary'}`}
+              onClick={() => { onConfirm(); modal.close(); }}
+            >
+              {confirmLabel}
+            </button>
+          </div>
+        </div>
+      ),
+      onClose,
+    });
+  }
+  return null;
+}

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

@@ -0,0 +1,21 @@
+// src/components/chat/EmptyState.tsx — chat-local empty state (variant of shared EmptyState).
+
+import type { ReactNode } from 'react';
+
+interface Props {
+  icon?: ReactNode;
+  title: string;
+  message: ReactNode;
+  action?: ReactNode;
+}
+
+export function EmptyState({ icon, title, message, action }: Props) {
+  return (
+    <div className="chat-empty-state">
+      {icon && <div className="chat-empty-state-icon">{icon}</div>}
+      <h2 className="chat-empty-state-title">{title}</h2>
+      <p className="chat-empty-state-message">{message}</p>
+      {action && <div className="chat-empty-state-action">{action}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+// src/components/chat/FirstRunGreeting.tsx — first-run greeting with gradient text.
+
+interface Props {
+  userName: string;
+}
+
+export function FirstRunGreeting({ userName }: Props) {
+  const name = userName.trim() || 'there';
+  return (
+    <div className="chat-greeting">
+      <div>
+        <span className="chat-greeting-hello">Hello, </span>
+        <span className="chat-greeting-name">{name}.</span>
+      </div>
+      <div className="chat-greeting-subtitle">How can I help you today?</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+// src/components/chat/FloatingComposer.tsx — sticky bottom wrapper for the composer pill.
+
+import { Composer } from './Composer';
+
+interface Props {
+  agent: string;
+  setAgent: (a: string) => void;
+  model: string;
+  setModel: (m: string) => void;
+  text: string;
+  setText: (t: string) => void;
+  sending: boolean;
+  onSend: () => void;
+  attachments: string[];
+  setAttachments: (a: string[] | ((prev: string[]) => string[])) => void;
+  suggestions: Array<{ cmd: string; desc: string }>;
+  onPickSuggestion: (cmd: string) => void;
+  agents: Array<{ name: string }>;
+  onAttach: () => void;
+  sessionsOpen: boolean;
+  infoOpen: boolean;
+}
+
+export function FloatingComposer(props: Props) {
+  return (
+    <div className="chat-composer-wrap">
+      <div className="chat-composer-pill">
+        <Composer {...props} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,119 @@
+// src/components/chat/InfoPanel.tsx — compact 4-card info sidebar.
+
+import { useState } from 'react';
+import { MessageSquare, Bot, Server, Terminal, ChevronDown } from 'lucide-react';
+
+interface Props {
+  sessionId: string;
+  messages: Array<unknown>;
+  pinned: Set<number>;
+  agent: string;
+  model: string;
+  agents: Array<{ name: string; model?: string; mode?: string }>;
+  mcps: Array<{ id: string; command?: string; enabled?: boolean }>;
+  allCommands: Array<{ cmd: string; desc: string; mod?: string }>;
+}
+
+export function InfoPanel({
+  sessionId,
+  messages,
+  pinned,
+  agent,
+  model,
+  agents,
+  mcps,
+  allCommands,
+}: Props) {
+  const [showAllAgents, setShowAllAgents] = useState(false);
+  const [showCommands, setShowCommands] = useState(false);
+
+  const visibleAgents = showAllAgents ? agents : agents.slice(0, 4);
+  const visibleCommands = showCommands ? allCommands : allCommands.slice(0, 4);
+
+  return (
+    <div className="chat-info">
+      <div className="chat-info-card">
+        <div className="chat-info-card-title">
+          <MessageSquare size={14} /> Session
+        </div>
+        <dl className="env-table">
+          <dt>id</dt>
+          <dd className="mono">{sessionId || 'Live'}</dd>
+          <dt>Messages</dt>
+          <dd className="mono">{messages.length}</dd>
+          <dt>Pinned</dt>
+          <dd className="mono">{pinned.size}</dd>
+          <dt>Agent</dt>
+          <dd className="mono">{agent || '—'}</dd>
+          <dt>Model</dt>
+          <dd className="mono ellipsis" title={model}>{model || '—'}</dd>
+        </dl>
+      </div>
+
+      <div className="chat-info-card">
+        <div className="chat-info-card-title">
+          <Bot size={14} /> Agents
+          <span className="chat-info-card-count">{agents.length}</span>
+        </div>
+        <ul className="mod-mini-list">
+          {visibleAgents.map((a) => (
+            <li key={a.name} className="mod-mini">
+              <span className="mod-mini-name">@{a.name}</span>
+              <span className="mod-mini-meta">{a.model || a.mode || ''}</span>
+            </li>
+          ))}
+        </ul>
+        {agents.length > 4 && (
+          <button
+            type="button"
+            className="chat-info-card-toggle"
+            onClick={() => setShowAllAgents((v) => !v)}
+          >
+            {showAllAgents ? '− Show fewer' : `+ ${agents.length - 4} more`}
+          </button>
+        )}
+      </div>
+
+      <div className="chat-info-card">
+        <div className="chat-info-card-title">
+          <Server size={14} /> MCPs
+          <span className="chat-info-card-count">{mcps.length}</span>
+        </div>
+        <ul className="mod-mini-list">
+          {mcps.length === 0 ? <li className="muted">No MCPs configured.</li> : null}
+          {mcps.map((m) => (
+            <li key={m.id} className="mod-mini">
+              <span className="mod-mini-name">{m.id}</span>
+              <span className={`mod-mini-pill ${m.enabled ? 'on' : 'off'}`}>
+                {m.enabled ? 'on' : 'off'}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="chat-info-card">
+        <button
+          type="button"
+          className="chat-info-card-title chat-info-card-title-button"
+          onClick={() => setShowCommands((v) => !v)}
+          aria-expanded={showCommands}
+        >
+          <Terminal size={14} /> Slash commands
+          <span className="chat-info-card-count">{allCommands.length}</span>
+          <ChevronDown size={12} className={`chat-info-card-chevron ${showCommands ? 'open' : ''}`} />
+        </button>
+        {showCommands && (
+          <ul className="mod-mini-list">
+            {visibleCommands.map((c) => (
+              <li key={c.cmd}>
+                <code>{c.cmd}</code>
+                <span className="muted">{c.desc}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+// src/components/chat/LoadingSkeleton.tsx — pulsing skeleton bubbles while loading.
+
+interface Props {
+  count?: number;
+}
+
+export function LoadingSkeleton({ count = 3 }: Props) {
+  return (
+    <div className="chat-loading-skeleton" aria-label="Loading messages">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="chat-loading-skeleton-bubble">
+          <div className="chat-loading-skeleton-meta" />
+          <div className="chat-loading-skeleton-line" />
+          <div className="chat-loading-skeleton-line short" />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,60 @@
+// 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

@@ -0,0 +1,153 @@
+// 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[];
+  opencodeSessions: ChatSession[];
+  activeSessionId: string;
+  activeProject: { name: string } | null;
+  creating: boolean;
+  onCreateSession: () => void;
+  onSelectSession: (id: string) => void;
+}
+
+export function SessionList({
+  sessions,
+  opencodeSessions,
+  activeSessionId,
+  activeProject,
+  creating,
+  onCreateSession,
+  onSelectSession,
+}: Props) {
+  const [view, setView] = useState<'bizar' | 'all'>('all');
+  const [showAll, setShowAll] = useState(false);
+  const VISIBLE_LIMIT = 30;
+
+  const allSorted = view === 'all'
+    ? [...sessions, ...opencodeSessions].sort((a, b) => Number(b.mtime) - Number(a.mtime))
+    : sessions;
+  const displayedSessions = showAll ? allSorted : allSorted.slice(0, VISIBLE_LIMIT);
+
+  const totalOpencode = opencodeSessions.length;
+
+  const handleSelectSession = (s: ChatSession) => {
+    if (s.source === 'opencode' && s.opencodeUrl) {
+      window.open(s.opencodeUrl, '_blank', 'noopener,noreferrer');
+      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>
+
+      {totalOpencode > 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 ({totalOpencode} opencode)
+          </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 isActive = s.source !== 'opencode' && activeSessionId === s.id;
+            const isOpencode = s.source === 'opencode';
+            return (
+              <li
+                key={isOpencode ? `oc-${s.id}` : s.id}
+                className={`chat-sessions-item ${isActive ? 'active' : ''} ${isOpencode ? 'chat-sessions-item-opencode' : ''}`}
+                onClick={() => handleSelectSession(s)}
+                title={isOpencode ? `Open in opencode UI: ${s.title || s.id}` : s.id}
+              >
+                {isOpencode && (
+                  <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/StreamingIndicator.tsx

@@ -0,0 +1,9 @@
+// src/components/chat/StreamingIndicator.tsx — animated typing indicator.
+
+export function StreamingIndicator() {
+  return (
+    <div className="chat-streaming-indicator" aria-label="Assistant is typing">
+      <span /><span /><span />
+    </div>
+  );
+}