@polderlabs/bizar 2.3.0 → 2.6.0

package/src/views/Agents.tsx

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

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

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