@polderlabs/bizar 2.6.1 → 3.0.1

package/src/views/Agents.tsx

@@ -1,199 +0,0 @@
-// src/views/Agents.tsx — agent grid + invoke modal.
-import { useEffect, useMemo, useState } from 'react';
-import { Bot, RefreshCw, Play, X } from 'lucide-react';
-import { Button } from '../components/Button';
-import { Card, CardTitle } from '../components/Card';
-import { EmptyState } from '../components/EmptyState';
-import { Spinner } from '../components/Spinner';
-import { StatusBadge } from '../components/StatusBadge';
-import { useModal } from '../components/Modal';
-import { useToast } from '../components/Toast';
-import { api } from '../lib/api';
-import { formatRelative, truncate } from '../lib/utils';
-import type { Agent, Settings, Snapshot } from '../lib/types';
-
-type Props = {
-  snapshot: Snapshot;
-  settings: Settings;
-  activeTab: string;
-  setActiveTab: (id: string) => void;
-  refreshSnapshot: () => Promise<void>;
-};
-
-export function Agents({ snapshot }: Props) {
-  const toast = useToast();
-  const modal = useModal();
-  const [agents, setAgents] = useState<Agent[]>(snapshot.agents || []);
-  const [loading, setLoading] = useState(!snapshot.agents);
-
-  useEffect(() => {
-    if (snapshot.agents?.length) {
-      setAgents(snapshot.agents);
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    api
-      .get<{ agents: Agent[] }>('/agents')
-      .then((d) => {
-        if (!cancelled) {
-          setAgents(d.agents || []);
-          setLoading(false);
-        }
-      })
-      .catch((err) => {
-        if (!cancelled) {
-          setLoading(false);
-          toast.error(`Could not load agents: ${(err as Error).message}`);
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [snapshot.agents, toast]);
-
-  const sorted = useMemo(
-    () => [...agents].sort((a, b) => a.name.localeCompare(b.name)),
-    [agents],
-  );
-
-  const refresh = async () => {
-    try {
-      const d = await api.get<{ agents: Agent[] }>('/agents');
-      setAgents(d.agents || []);
-      toast.info('Agents refreshed.', 1500);
-    } catch (err) {
-      toast.error(`Refresh failed: ${(err as Error).message}`);
-    }
-  };
-
-  return (
-    <div className="view view-agents">
-      <header className="view-header">
-        <div className="view-header-text">
-          <h2 className="view-title">
-            <Bot size={18} /> Agents ({sorted.length})
-          </h2>
-          <p className="view-subtitle">
-            The Norse pantheon — 13 specialized agents across 4 cost tiers.
-          </p>
-        </div>
-        <div className="view-actions">
-          <Button variant="secondary" size="sm" onClick={refresh}>
-            <RefreshCw size={14} /> Refresh
-          </Button>
-        </div>
-      </header>
-
-      {loading ? (
-        <div className="view-loading">
-          <Spinner size="lg" />
-        </div>
-      ) : sorted.length === 0 ? (
-        <EmptyState
-          icon={<Bot size={32} />}
-          title="No agents found"
-          message="Run bizar in the terminal to install Bizar."
-        />
-      ) : (
-        <div className="agent-grid">
-          {sorted.map((a) => (
-            <AgentCard key={a.name} agent={a} onInvoke={() => openInvoke(modal, a, toast, refresh)} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function AgentCard({
-  agent,
-  onInvoke,
-}: {
-  agent: Agent;
-  onInvoke: () => void;
-}) {
-  return (
-    <Card variant="elevated" interactive className="agent-card">
-      <div className="agent-card-head">
-        <div className="agent-card-name">{agent.name}</div>
-        <StatusBadge kind={agent.mode === 'primary' ? 'accent' : 'neutral'}>
-          {agent.mode || 'agent'}
-        </StatusBadge>
-      </div>
-      <p className="agent-card-desc">{truncate(agent.description, 200)}</p>
-      <div className="agent-card-meta">
-        <span className="mono" title={agent.model || ''}>
-          {agent.model || '—'}
-        </span>
-        <span className="tabular-nums muted">{formatRelative(agent.mtime)}</span>
-      </div>
-      <div className="agent-card-actions">
-        <Button variant="primary" size="sm" onClick={onInvoke}>
-          <Play size={12} /> Invoke
-        </Button>
-      </div>
-    </Card>
-  );
-}
-
-function openInvoke(
-  modal: ReturnType<typeof useModal>,
-  agent: Agent,
-  toast: ReturnType<typeof useToast>,
-  refresh: () => Promise<void>,
-) {
-  let promptEl: HTMLTextAreaElement | null = null;
-
-  const submit = async () => {
-    const prompt = (promptEl?.value || '').trim();
-    if (!prompt) {
-      toast.warning('Prompt is required.');
-      return;
-    }
-    try {
-      await api.post(`/agents/${encodeURIComponent(agent.name)}/invoke`, { prompt });
-      toast.success(`Invoked ${agent.name}.`);
-      modal.close();
-      await refresh();
-    } catch (err) {
-      toast.error(`Invoke failed: ${(err as Error).message}`);
-    }
-  };
-
-  modal.open({
-    title: `Invoke ${agent.name}`,
-    width: 560,
-    children: (
-      <div className="invoke-form">
-        <p className="muted invoke-form-meta mono">
-          {agent.model || '—'} · {agent.path}
-        </p>
-        <p className="invoke-form-desc">{agent.description}</p>
-        <label className="field-label" htmlFor="invoke-prompt">
-          Prompt
-        </label>
-        <textarea
-          ref={(el) => {
-            promptEl = el;
-          }}
-          id="invoke-prompt"
-          className="textarea"
-          rows={5}
-          placeholder="What should this agent do?"
-          autoFocus
-        />
-      </div>
-    ),
-    footer: (
-      <div className="modal-footer-actions">
-        <Button variant="ghost" onClick={() => modal.close()}>
-          <X size={14} /> Cancel
-        </Button>
-        <Button variant="primary" onClick={submit}>
-          <Play size={14} /> Invoke
-        </Button>
-      </div>
-    ),
-  });
-}

package/src/views/Chat.tsx

@@ -1,255 +0,0 @@
-// src/views/Chat.tsx — chat history + send box + slash suggestions.
-import { useEffect, useRef, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { MessageSquare, Send, RefreshCw, Eraser, CornerDownLeft } from 'lucide-react';
-import { Button } from '../components/Button';
-import { EmptyState } from '../components/EmptyState';
-import { Spinner } from '../components/Spinner';
-import { useToast } from '../components/Toast';
-import { api } from '../lib/api';
-import { cn, formatTime } from '../lib/utils';
-import type { ChatMessage, ChatResponse, Settings, Snapshot } from '../lib/types';
-
-type Props = {
-  snapshot: Snapshot;
-  settings: Settings;
-  activeTab: string;
-  setActiveTab: (id: string) => void;
-  refreshSnapshot: () => Promise<void>;
-};
-
-type SlashCommand = { cmd: string; desc: string };
-
-const SLASH_COMMANDS: SlashCommand[] = [
-  { cmd: '/plan new <slug>', desc: 'Create a new plan' },
-  { cmd: '/plan list', desc: 'List plans' },
-  { cmd: '/plan open <slug>', desc: 'Open a plan URL' },
-  { cmd: '/plan status <slug> <status>', desc: 'Set plan status' },
-  { cmd: '/visual-plan on|off', desc: 'Toggle visual plan mode' },
-  { cmd: '/bizar', desc: 'Show Bizar menu / launch dashboard' },
-  { cmd: '/audit', desc: 'Run security audit' },
-  { cmd: '/explain <q>', desc: 'Read-only code Q&A' },
-  { cmd: '/init', desc: 'Initialize .bizar/ in this project' },
-  { cmd: '/learn', desc: 'Extract patterns from session' },
-  { cmd: '/pr-review', desc: 'PR review with @mimir + @forseti' },
-  { cmd: '/help', desc: 'Show all slash commands' },
-];
-
-export function Chat(_: Props) {
-  const toast = useToast();
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [sessions, setSessions] = useState<{ id: string; mtime: number }[]>(
-    [],
-  );
-  const [loading, setLoading] = useState(true);
-  const [sessionId, setSessionId] = useState<string>('');
-  const [text, setText] = useState('');
-  const [sending, setSending] = useState(false);
-  const [suggestions, setSuggestions] = useState<SlashCommand[]>([]);
-  const listRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  const loadChat = async (sid?: string) => {
-    try {
-      const url = sid ? `/chat?session=${encodeURIComponent(sid)}` : '/chat?limit=200';
-      const data = await api.get<ChatResponse>(url);
-      setMessages(data.messages || []);
-      setSessions(data.sessions || []);
-    } catch (err) {
-      toast.error(`Chat load failed: ${(err as Error).message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadChat();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Auto-scroll on new messages
-  useEffect(() => {
-    if (listRef.current) {
-      listRef.current.scrollTop = listRef.current.scrollHeight;
-    }
-  }, [messages]);
-
-  // Slash-command suggestions
-  useEffect(() => {
-    if (text.startsWith('/') && !text.includes(' ')) {
-      const q = text.toLowerCase();
-      setSuggestions(
-        SLASH_COMMANDS.filter((c) => c.cmd.toLowerCase().startsWith(q)).slice(
-          0,
-          6,
-        ),
-      );
-    } else {
-      setSuggestions([]);
-    }
-  }, [text]);
-
-  const onSend = async () => {
-    const message = text.trim();
-    if (!message || sending) return;
-    setSending(true);
-    const optimistic: ChatMessage = {
-      role: 'user',
-      content: message,
-      ts: new Date().toISOString(),
-    };
-    setMessages((cur) => [...cur, optimistic]);
-    setText('');
-    setSuggestions([]);
-    try {
-      await api.post('/chat', { message });
-      toast.success('Message accepted. Open the TUI to dispatch.');
-    } catch (err) {
-      setMessages((cur) => cur.filter((m) => m !== optimistic));
-      toast.error(`Send failed: ${(err as Error).message}`);
-    } finally {
-      setSending(false);
-      inputRef.current?.focus();
-    }
-  };
-
-  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      onSend();
-    } else if (e.key === 'Tab' && suggestions.length) {
-      e.preventDefault();
-      const first = suggestions[0];
-      const base = first.cmd.split(' ')[0];
-      setText(`${base} `);
-      setSuggestions([]);
-    }
-  };
-
-  // Sort newest at the bottom for chat feel
-  const ordered = [...messages].reverse();
-
-  return (
-    <div className="view view-chat">
-      <header className="view-header chat-header">
-        <div className="view-header-text">
-          <h2 className="view-title">
-            <MessageSquare size={18} /> Chat
-          </h2>
-          <p className="view-subtitle">
-            Conversation history. Press Enter to send, Shift+Enter for newline.
-          </p>
-        </div>
-        <div className="view-actions">
-          <select
-            className="select select-sm"
-            value={sessionId}
-            onChange={(e) => {
-              const sid = e.target.value;
-              setSessionId(sid);
-              loadChat(sid || undefined);
-            }}
-          >
-            <option value="">All sessions ({sessions.length})</option>
-            {sessions.map((s) => (
-              <option key={s.id} value={s.id}>
-                {s.id.slice(0, 28)}… ·{' '}
-                {new Date(s.mtime).toLocaleDateString()}
-              </option>
-            ))}
-          </select>
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={() => loadChat(sessionId || undefined)}
-          >
-            <RefreshCw size={14} /> Refresh
-          </Button>
-          <Button variant="ghost" size="sm" onClick={() => setMessages([])}>
-            <Eraser size={14} /> Clear view
-          </Button>
-        </div>
-      </header>
-
-      <div className="chat-container">
-        <div className="chat-list" ref={listRef}>
-          {loading ? (
-            <div className="view-loading">
-              <Spinner />
-            </div>
-          ) : ordered.length === 0 ? (
-            <EmptyState
-              icon={<MessageSquare size={28} />}
-              title="No messages yet"
-              message="Type something below to start."
-            />
-          ) : (
-            ordered.map((m, idx) => <ChatBubble key={idx} message={m} />)
-          )}
-        </div>
-
-        <div className="chat-composer">
-          {suggestions.length > 0 && (
-            <div className="chat-suggestions">
-              {suggestions.map((s) => (
-                <button
-                  type="button"
-                  key={s.cmd}
-                  className="chat-suggestion"
-                  onClick={() => {
-                    const base = s.cmd.split(' ')[0];
-                    setText(`${base} `);
-                    inputRef.current?.focus();
-                  }}
-                >
-                  <span className="mono">{s.cmd}</span>
-                  <span className="chat-suggestion-desc">{s.desc}</span>
-                </button>
-              ))}
-            </div>
-          )}
-          <div className="chat-composer-row">
-            <textarea
-              ref={inputRef}
-              className="chat-input"
-              placeholder="Send a message… (Enter to send, Shift+Enter for newline, / for commands)"
-              rows={2}
-              value={text}
-              onChange={(e) => setText(e.target.value)}
-              onKeyDown={onKeyDown}
-              disabled={sending}
-            />
-            <Button
-              variant="primary"
-              onClick={onSend}
-              disabled={sending || !text.trim()}
-            >
-              {sending ? <Spinner size="sm" /> : <Send size={14} />}{' '}
-              <span>Send</span>{' '}
-              <CornerDownLeft size={12} className="hint-key" />
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ChatBubble({ message }: { message: ChatMessage }) {
-  const role = (message.role || 'assistant').toLowerCase();
-  const ts = message.ts ? formatTime(message.ts) : '';
-  const content = message.content || message.message || '';
-  return (
-    <div className={cn('chat-msg', `chat-msg-${role}`)}>
-      <div className="chat-msg-meta">
-        <span className="chat-msg-role">{role}</span>
-        {message.agent && <span className="chat-msg-agent">{message.agent}</span>}
-        {ts && <span className="chat-msg-ts tabular-nums">{ts}</span>}
-      </div>
-      <div className="chat-msg-body markdown-body">
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
-      </div>
-    </div>
-  );
-}

package/src/views/Config.tsx

@@ -1,250 +0,0 @@
-// src/views/Config.tsx — opencode.json editor with live validation.
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Settings2, RefreshCw, Save, FileCode2 } from 'lucide-react';
-import { Button } from '../components/Button';
-import { Card, CardTitle, CardMeta } from '../components/Card';
-import { useToast } from '../components/Toast';
-import { api } from '../lib/api';
-import { cn, debounce, hashText } from '../lib/utils';
-import { JsonHighlight } from '../lib/markdown';
-import type { ConfigResponse, Settings, Snapshot } from '../lib/types';
-
-type Props = {
-  snapshot: Snapshot;
-  settings: Settings;
-  activeTab: string;
-  setActiveTab: (id: string) => void;
-  refreshSnapshot: () => Promise<void>;
-};
-
-type Parsed = {
-  raw: string;
-  data: unknown | null;
-  error: string | null;
-};
-
-export function Config({ snapshot }: Props) {
-  const toast = useToast();
-  const initial: ConfigResponse | undefined = snapshot.config;
-  const [original, setOriginal] = useState<string>(
-    initial?.raw || (initial?.data ? JSON.stringify(initial.data, null, 2) : ''),
-  );
-  const [parsed, setParsed] = useState<Parsed>({
-    raw: initial?.raw || '',
-    data: initial?.data ?? null,
-    error: null,
-  });
-  const [dirty, setDirty] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [path, setPath] = useState<string>(initial?.path || '');
-  const [reloadPending, setReloadPending] = useState(false);
-  const taRef = useRef<HTMLTextAreaElement>(null);
-
-  const originalHash = useMemo(() => hashText(original), [original]);
-
-  // Refresh from server
-  const reload = async () => {
-    try {
-      const d = await api.post<ConfigResponse>('/config/reload');
-      const raw = d.raw || (d.data ? JSON.stringify(d.data, null, 2) : '');
-      setOriginal(raw);
-      setParsed({ raw, data: d.data ?? null, error: null });
-      setDirty(false);
-      setPath(d.path || '');
-      toast.info('Config reloaded.', 1500);
-    } catch (err) {
-      toast.error(`Reload failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onChange = (val: string) => {
-    setParsed((cur) => {
-      const next: Parsed = { raw: val, data: cur.data, error: null };
-      try {
-        next.data = JSON.parse(val);
-        next.error = null;
-      } catch (e) {
-        next.data = null;
-        next.error = (e as Error).message;
-      }
-      return next;
-    });
-  };
-
-  // Debounce sync of dirty state to avoid setState storms
-  const onChangeDebounced = useMemo(
-    () =>
-      debounce((val: string) => {
-        setDirty(hashText(val) !== originalHash);
-      }, 100),
-    [originalHash],
-  );
-
-  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const v = e.target.value;
-    onChange(v);
-    onChangeDebounced(v);
-  };
-
-  // Warn before navigating away with unsaved changes
-  useEffect(() => {
-    if (!dirty && !reloadPending) return;
-    const handler = (e: BeforeUnloadEvent) => {
-      if (dirty) {
-        e.preventDefault();
-        e.returnValue = '';
-      }
-    };
-    window.addEventListener('beforeunload', handler);
-    return () => window.removeEventListener('beforeunload', handler);
-  }, [dirty, reloadPending]);
-
-  const save = async () => {
-    if (!parsed.data || parsed.error || saving) return;
-    setSaving(true);
-    try {
-      const result = await api.put<ConfigResponse>('/config', parsed.data);
-      const raw = result.raw || JSON.stringify(result.data, null, 2);
-      setOriginal(raw);
-      setParsed({ raw, data: result.data ?? null, error: null });
-      setDirty(false);
-      toast.success('Config saved.');
-    } catch (err) {
-      toast.error(`Save failed: ${(err as Error).message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const canSave = !!parsed.data && !parsed.error && dirty && !saving;
-
-  return (
-    <div className="view view-config">
-      <header className="view-header">
-        <div className="view-header-text">
-          <h2 className="view-title">
-            <Settings2 size={18} /> Config
-          </h2>
-          <p className="view-subtitle mono ellipsis" title={path}>
-            {path}
-          </p>
-        </div>
-        <div className="view-actions">
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={() => {
-              if (dirty) {
-                setReloadPending(true);
-                if (
-                  // eslint-disable-next-line no-alert
-                  confirm('Discard unsaved changes and reload from disk?')
-                ) {
-                  reload();
-                }
-                setReloadPending(false);
-              } else {
-                reload();
-              }
-            }}
-          >
-            <RefreshCw size={14} /> Reload from disk
-          </Button>
-          <Button
-            variant="primary"
-            size="sm"
-            disabled={!canSave}
-            onClick={save}
-          >
-            {saving ? (
-              <span className="btn-spinner" />
-            ) : (
-              <Save size={14} />
-            )}
-            {saving ? 'Saving…' : 'Save'}
-          </Button>
-        </div>
-      </header>
-
-      <div className="config-grid">
-        <Card>
-          <CardTitle>
-            <FileCode2 size={14} /> JSON tree
-          </CardTitle>
-          <CardMeta>Parsed from current editor content</CardMeta>
-          <div className="json-tree">
-            {parsed.data != null ? (
-              <JsonHighlight value={parsed.data} />
-            ) : (
-              <span className="muted">
-                {parsed.error ? 'Invalid JSON' : 'No data'}
-              </span>
-            )}
-          </div>
-        </Card>
-        <Card>
-          <CardTitle>Raw JSON</CardTitle>
-          <CardMeta>
-            {parsed.error ? (
-              <span className="text-error">{parsed.error}</span>
-            ) : (
-              <span className="muted">Live validation as you type</span>
-            )}
-          </CardMeta>
-          <textarea
-            ref={taRef}
-            className={cn('textarea config-textarea', parsed.error && 'invalid')}
-            spellCheck={false}
-            value={parsed.raw}
-            onChange={handleInput}
-          />
-        </Card>
-      </div>
-
-      <Card className="diff-card">
-        <CardTitle>Diff vs last save</CardTitle>
-        <CardMeta>
-          {parsed.raw === original
-            ? 'No changes.'
-            : 'Line-level changes from disk.'}
-        </CardMeta>
-        <div className="diff-view mono">
-          {renderDiff(original, parsed.raw)}
-        </div>
-      </Card>
-    </div>
-  );
-}
-
-function renderDiff(a: string, b: string) {
-  if (a === b) return null;
-  const aLines = (a || '').split('\n');
-  const bLines = (b || '').split('\n');
-  const max = Math.max(aLines.length, bLines.length);
-  const out: React.ReactNode[] = [];
-  for (let i = 0; i < max; i++) {
-    const al = aLines[i] ?? '';
-    const bl = bLines[i] ?? '';
-    if (al === bl) {
-      out.push(
-        <div key={i} className="diff-line">
-          {al || ' '}
-        </div>,
-      );
-    } else {
-      if (al)
-        out.push(
-          <div key={`a${i}`} className="diff-line diff-line-removed">
-            - {al}
-          </div>,
-        );
-      if (bl)
-        out.push(
-          <div key={`b${i}`} className="diff-line diff-line-added">
-            + {bl}
-          </div>,
-        );
-    }
-  }
-  return out;
-}