@polderlabs/bizar 7.0.2 → 8.0.0

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

@@ -1,166 +0,0 @@
-// 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, 160);
-
-  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}
-          aria-label="Attach files"
-          tabIndex={-1}
-        />
-        <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

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

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

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

@@ -1,38 +0,0 @@
-// 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;
-  /** Which stream will receive the next message — propagates the
-   *  pill border color and a small "→ cline" hint. */
-  activeSource?: 'bizar' | 'cline' | null;
-}
-
-export function FloatingComposer(props: Props) {
-  const { activeSource } = props;
-  return (
-    <div
-      className={`chat-composer-wrap chat-composer-source-${activeSource ?? 'none'} legacy`}
-    >
-      <div className="chat-composer-pill">
-        <Composer {...props} />
-      </div>
-    </div>
-  );
-}

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

@@ -1,184 +0,0 @@
-// src/components/chat/InfoPanel.tsx — mobile-compact info sidebar.
-//
-// v4.2.5 — overhauled: shows activeSource badge, message count,
-// session metadata, model/provider, and rename/delete actions for
-// the active session.
-
-import { useState } from 'react';
-import {
-  MessageSquare,
-  Bot,
-  Server,
-  Terminal,
-  ChevronDown,
-  Trash2,
-  Pencil,
-} 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 }>;
-  activeSource?: 'bizar' | 'cline' | null;
-  /** Optional rename handler — when omitted the rename button is hidden. */
-  onRename?: () => void;
-  /** Optional delete handler — when omitted the delete button is hidden. */
-  onDelete?: () => void;
-}
-
-export function InfoPanel({
-  sessionId,
-  messages,
-  pinned,
-  agent,
-  model,
-  agents,
-  mcps,
-  allCommands,
-  activeSource = 'bizar',
-  onRename,
-  onDelete,
-}: 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);
-
-  // Derive a friendly provider from the model id (e.g.
-  // "cline/deepseek-v4-flash-free" → provider "cline").
-  const provider = model.includes('/') ? model.split('/')[0] : '';
-
-  return (
-    <div className="chat-info">
-      <div className="chat-info-card">
-        <div className="chat-info-card-title">
-          <MessageSquare size={14} /> Session
-          <span
-            className={`chat-source-badge chat-source-${activeSource ?? 'none'}`}
-            style={{ marginLeft: 'auto' }}
-          >
-            {activeSource === 'cline' ? 'cline' : 'bizar chat'}
-          </span>
-        </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>
-          {provider && (
-            <>
-              <dt>Provider</dt>
-              <dd className="mono">{provider}</dd>
-            </>
-          )}
-        </dl>
-        {(onRename || onDelete) && (
-          <div className="chat-info-actions">
-            {onRename && (
-              <button
-                type="button"
-                className="btn btn-ghost btn-sm"
-                onClick={onRename}
-              >
-                <Pencil size={12} aria-hidden /> Rename
-              </button>
-            )}
-            {onDelete && (
-              <button
-                type="button"
-                className="btn btn-ghost btn-danger btn-sm"
-                onClick={onDelete}
-              >
-                <Trash2 size={12} aria-hidden /> Delete
-              </button>
-            )}
-          </div>
-        )}
-      </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/JumpToLatest.tsx

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

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