@polderlabs/bizar 3.23.1 → 4.2.0

package/bizar-dash/src/web/mobile/views/MobileChat.tsx

@@ -0,0 +1,180 @@
+// src/web/mobile/views/MobileChat.tsx — mobile-adapted chat using shared components.
+// Composer state (agent, model, text, attachments) is local.
+
+import { useEffect, useRef, useState } from 'react';
+import { ChatTopBar } from '../../components/chat/ChatTopBar';
+import { SessionList } from '../../components/chat/SessionList';
+import { ChatThread } from '../../components/chat/ChatThread';
+import { FloatingComposer } from '../../components/chat/FloatingComposer';
+import { InfoPanel } from '../../components/chat/InfoPanel';
+import { useChat } from '../../components/chat/useChat';
+import { useSlashCommands } from '../../components/chat/useSlashCommands';
+import { useToast } from '../../components/Toast';
+import { useModal } from '../../components/Modal';
+import { Button } from '../../components/Button';
+import type { Snapshot, Settings } from '../../lib/types';
+
+interface Props {
+  snapshot: Snapshot;
+  settings: Settings;
+  setActiveTab?: (id: string) => void;
+  initialTaskId?: string | null;
+  onClearTaskId?: () => void;
+}
+
+export function MobileChat({ snapshot, settings, setActiveTab, initialTaskId, onClearTaskId }: Props) {
+  const toast = useToast();
+  const modal = useModal();
+
+  const chat = useChat(snapshot, settings, initialTaskId ?? '');
+
+  const [text, setText] = useState('');
+  const [agent, setAgent] = useState(settings.defaultAgent || 'odin');
+  const [model, setModel] = useState(settings.defaultModel || '');
+  const [attachments, setAttachments] = useState<string[]>([]);
+  const [creating, setCreating] = useState(false);
+  const [sessionsOpen, setSessionsOpen] = useState(false);
+  const [infoOpen, setInfoOpen] = useState(false);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { allCommands, suggestions, setQuery } = useSlashCommands(snapshot);
+
+  useEffect(() => { setQuery(text); }, [text, setQuery]);
+
+  const onAttach = () => fileInputRef.current?.click();
+
+  const onFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+    const next: string[] = [];
+    for (let i = 0; i < files.length; i++) next.push(files[i].name);
+    setAttachments((cur) => {
+      const newNames = next.filter((n) => !cur.includes(n));
+      return [...cur, ...newNames];
+    });
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  const handleSend = () => {
+    const msg = text.trim();
+    if (!msg) return;
+    setText('');
+    setQuery('');
+    chat.onSend(msg, agent, model, attachments);
+  };
+
+  const handleCreateSession = async () => {
+    if (creating) return;
+    if (!snapshot.activeProject) {
+      toast.warning('Pick a project in Overview to scope chat sessions.', 4000);
+      return;
+    }
+    setCreating(true);
+    try {
+      const created = await fetch('/chat/sessions', { method: 'POST' }).then((r) => r.json());
+      chat.loadChat(created.id);
+      toast.success(`Session ${created.id} created.`);
+    } catch (err) {
+      toast.error(`Create failed: ${(err as Error).message}`);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleDelete = (idx: number) => {
+    modal.open({
+      title: 'Delete message?',
+      children: <p style={{ margin: 0 }}>This action cannot be undone.</p>,
+      footer: (
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+          <Button variant="secondary" size="sm" onClick={() => modal.close()}>Cancel</Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={() => {
+              modal.close();
+              chat.deleteMessage(idx);
+            }}
+          >
+            Delete
+          </Button>
+        </div>
+      ),
+    });
+  };
+
+  return (
+    <div className="chat-shell">
+      <ChatTopBar
+        activeProject={snapshot.activeProject}
+        sessionCount={chat.sessions.length}
+        sessionsOpen={sessionsOpen}
+        infoOpen={infoOpen}
+        onToggleSessions={() => setSessionsOpen((v) => !v)}
+        onToggleInfo={() => setInfoOpen((v) => !v)}
+        onOpenOverview={() => setActiveTab?.('overview')}
+      />
+      <div className="chat-body">
+        <aside className={`chat-sessions ${!sessionsOpen ? 'chat-sessions-hidden' : ''}`}>
+          <SessionList
+            sessions={chat.sessions}
+            opencodeSessions={chat.opencodeSessions}
+            activeSessionId={chat.sessionId}
+            activeProject={snapshot.activeProject}
+            onCreateSession={handleCreateSession}
+            onSelectSession={chat.loadChat}
+            creating={creating}
+          />
+        </aside>
+
+        <main className="chat-main">
+          <ChatThread
+            messages={chat.messages}
+            loading={chat.loading}
+            activeProject={snapshot.activeProject}
+            sessionId={chat.sessionId}
+            pinned={chat.pinned}
+            onPickSuggestion={(t) => setText(t)}
+            onCopy={(m) => chat.copyMessage(m as Parameters<typeof chat.copyMessage>[0])}
+            onDelete={handleDelete}
+            onTogglePin={chat.togglePin}
+            onRegenerate={chat.onRegenerate}
+          />
+          <FloatingComposer
+            agent={agent}
+            setAgent={setAgent}
+            model={model}
+            setModel={setModel}
+            text={text}
+            setText={setText}
+            sending={chat.sending}
+            onSend={handleSend}
+            attachments={attachments}
+            setAttachments={setAttachments}
+            suggestions={suggestions}
+            onPickSuggestion={(cmd) => setText(`${cmd.split(' ')[0]} `)}
+            agents={snapshot.agents || []}
+            onAttach={onAttach}
+            sessionsOpen={sessionsOpen}
+            infoOpen={infoOpen}
+          />
+          <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={onFiles} />
+        </main>
+
+        <aside className={`chat-info ${!infoOpen ? 'chat-info-hidden' : ''}`}>
+          <InfoPanel
+            sessionId={chat.sessionId}
+            messages={chat.messages}
+            pinned={chat.pinned}
+            agent={agent}
+            model={model}
+            agents={snapshot.agents || []}
+            mcps={snapshot.mcps || []}
+            allCommands={allCommands}
+          />
+        </aside>
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/mobile/views/MobileConfig.tsx

@@ -0,0 +1,175 @@
+// src/mobile/views/MobileConfig.tsx — config key-value editor with type-aware inputs.
+import { useEffect, useState } from 'react';
+import { Sliders, RefreshCw, RotateCcw, Save } from 'lucide-react';
+import { api } from '../../lib/api';
+
+type ConfigEntry = {
+  key: string;
+  value: unknown;
+  type: 'boolean' | 'number' | 'string' | 'object' | 'array' | 'unknown';
+  defaultValue?: unknown;
+};
+
+type Props = {
+  onBack: () => void;
+};
+
+export function MobileConfig({ onBack }: Props) {
+  const [entries, setEntries] = useState<ConfigEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [editing, setEditing] = useState<Record<string, unknown>>({});
+  const [saving, setSaving] = useState(false);
+
+  const load = async () => {
+    try {
+      const data = await api.get<Record<string, unknown>>('/config');
+      const entries: ConfigEntry[] = Object.entries(data).map(([key, value]) => ({
+        key,
+        value,
+        type: detectType(value),
+      }));
+      setEntries(entries);
+      setEditing(Object.fromEntries(Object.entries(data).map(([k, v]) => [k, v])));
+    } catch {
+      // best-effort
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const detectType = (v: unknown): ConfigEntry['type'] => {
+    if (typeof v === 'boolean') return 'boolean';
+    if (typeof v === 'number') return 'number';
+    if (typeof v === 'string') return 'string';
+    if (Array.isArray(v)) return 'array';
+    if (v && typeof v === 'object') return 'object';
+    return 'unknown';
+  };
+
+  const handleChange = (key: string, value: unknown) => {
+    setEditing((cur) => ({ ...cur, [key]: value }));
+  };
+
+  const saveAll = async () => {
+    setSaving(true);
+    try {
+      await api.patch('/config', editing);
+      await load();
+    } catch {
+      // best-effort
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const resetRow = (key: string, defaultValue?: unknown) => {
+    setEditing((cur) => ({ ...cur, [key]: defaultValue }));
+  };
+
+  const renderInput = (entry: ConfigEntry) => {
+    const value = editing[entry.key];
+    switch (entry.type) {
+      case 'boolean':
+        return (
+          <label className="mobile-toggle">
+            <input
+              type="checkbox"
+              checked={Boolean(value)}
+              onChange={(e) => handleChange(entry.key, e.target.checked)}
+            />
+            <span className="mobile-toggle-slider" />
+          </label>
+        );
+      case 'number':
+        return (
+          <input
+            className="mobile-input mobile-input-sm"
+            type="number"
+            inputMode="numeric"
+            value={String(value ?? '')}
+            onChange={(e) => handleChange(entry.key, Number(e.target.value))}
+          />
+        );
+      case 'string':
+        return (
+          <input
+            className="mobile-input mobile-input-sm"
+            type="text"
+            value={String(value ?? '')}
+            onChange={(e) => handleChange(entry.key, e.target.value)}
+          />
+        );
+      case 'object':
+      case 'array':
+        return (
+          <textarea
+            className="mobile-input mobile-input-sm"
+            rows={2}
+            value={JSON.stringify(value ?? null, null, 2)}
+            onChange={(e) => {
+              try {
+                handleChange(entry.key, JSON.parse(e.target.value));
+              } catch {
+                // invalid JSON
+              }
+            }}
+          />
+        );
+      default:
+        return <span className="mobile-setting-value mono">{String(value ?? 'null')}</span>;
+    }
+  };
+
+  return (
+    <div className="mobile-view">
+      <div className="mobile-tasks-toolbar">
+        <span style={{ fontSize: 14, color: 'var(--text-muted)', flex: 1 }}>{entries.length} config entries</span>
+        <button type="button" className="mobile-icon-btn" onClick={() => load()} aria-label="Refresh">
+          <RefreshCw size={16} />
+        </button>
+        <button
+          type="button"
+          className="mobile-btn"
+          disabled={saving}
+          onClick={() => saveAll()}
+        >
+          <Save size={14} /> {saving ? 'Saving…' : 'Save all'}
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="mobile-loading"><p>Loading…</p></div>
+      ) : entries.length === 0 ? (
+        <div className="mobile-empty">
+          <Sliders size={40} />
+          <p>No config entries.</p>
+        </div>
+      ) : (
+        <div className="mobile-config-list">
+          {entries.map((entry) => (
+            <div key={entry.key} className="mobile-config-row">
+              <div className="mobile-config-key">
+                <span className="mono">{entry.key}</span>
+                <span className="mobile-config-type">{entry.type}</span>
+              </div>
+              <div className="mobile-config-value">
+                {renderInput(entry)}
+              </div>
+              <button
+                type="button"
+                className="mobile-icon-btn"
+                onClick={() => resetRow(entry.key, entry.defaultValue)}
+                aria-label="Reset to default"
+                title="Reset"
+              >
+                <RotateCcw size={14} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/bizar-dash/src/web/mobile/views/MobileHistory.tsx

@@ -0,0 +1,191 @@
+// src/mobile/views/MobileHistory.tsx — session history list.
+import { useEffect, useState } from 'react';
+import { History, RefreshCw } from 'lucide-react';
+import { api } from '../../lib/api';
+import { MobileBottomSheet } from '../components/MobileBottomSheet';
+
+type HistoryEntry = {
+  id: string;
+  ts: string;
+  duration?: number;
+  agent?: string;
+  taskCount?: number;
+  summary?: string;
+  output?: string;
+};
+
+type HistoryEvent = {
+  ts: string;
+  kind: string;
+  text?: string;
+  projectId?: string;
+};
+
+type ProjectHistory = {
+  id: string;
+  name: string;
+  path: string;
+  status: string;
+  lastAccessed?: string | null;
+  tasks: { total: number; done: number; doing: number; blocked: number; queued: number };
+  plans: number;
+};
+
+type HistoryResponse = {
+  history?: HistoryEntry[];
+  events?: HistoryEvent[];
+  projects?: ProjectHistory[];
+};
+
+type Props = {
+  onBack: () => void;
+};
+
+export function MobileHistory({ onBack }: Props) {
+  const [entries, setEntries] = useState<HistoryEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [detail, setDetail] = useState<HistoryEntry | null>(null);
+  const [query, setQuery] = useState('');
+
+  const load = async () => {
+    try {
+      const data = await api.get<HistoryResponse>('/history');
+      if (Array.isArray(data.history)) {
+        setEntries(data.history);
+        return;
+      }
+
+      if (Array.isArray(data.projects)) {
+        const latestEventByProject = new Map<string, HistoryEvent>();
+        for (const event of data.events || []) {
+          const pid = event.projectId;
+          if (!pid) continue;
+          const current = latestEventByProject.get(pid);
+          if (!current || new Date(event.ts).getTime() > new Date(current.ts).getTime()) {
+            latestEventByProject.set(pid, event);
+          }
+        }
+
+        setEntries(
+          data.projects.map((project) => {
+            const latestEvent = latestEventByProject.get(project.id);
+            return {
+              id: project.id,
+              ts: project.lastAccessed || latestEvent?.ts || new Date(0).toISOString(),
+              agent: project.name,
+              taskCount: project.tasks.total,
+              summary: `${project.path} · ${project.tasks.done}/${project.tasks.total} done · ${project.plans} plan${project.plans === 1 ? '' : 's'}`,
+              output: latestEvent ? `${latestEvent.kind}${latestEvent.text ? ` — ${latestEvent.text}` : ''}` : 'No recent events.',
+            } satisfies HistoryEntry;
+          }),
+        );
+        return;
+      }
+
+      setEntries([]);
+    } catch {
+      // best-effort
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); }, []);
+
+  const formatDuration = (ms?: number): string => {
+    if (!ms) return '—';
+    const s = Math.floor(ms / 1000);
+    if (s < 60) return `${s}s`;
+    const m = Math.floor(s / 60);
+    const r = s % 60;
+    return `${m}m ${r}s`;
+  };
+
+  const formatTime = (ts: string): string => {
+    const d = new Date(ts);
+    return d.toLocaleString();
+  };
+
+  const filtered = query.trim()
+    ? entries.filter((entry) => {
+        const q = query.toLowerCase();
+        return (entry.agent || 'session').toLowerCase().includes(q)
+          || (entry.summary || '').toLowerCase().includes(q)
+          || (entry.output || '').toLowerCase().includes(q);
+      })
+    : entries;
+
+  return (
+    <div className="mobile-view">
+      <div className="mobile-tasks-toolbar">
+        <input
+          className="mobile-search-input"
+          type="text"
+          placeholder="Search history…"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          style={{ flex: 1 }}
+        />
+        <button type="button" className="mobile-icon-btn" onClick={() => load()} aria-label="Refresh">
+          <RefreshCw size={16} />
+        </button>
+      </div>
+
+      {loading ? (
+        <div className="mobile-loading"><p>Loading…</p></div>
+      ) : filtered.length === 0 ? (
+        <div className="mobile-empty">
+          <History size={40} />
+          <p>{entries.length === 0 ? 'No history yet.' : 'No matching sessions.'}</p>
+        </div>
+      ) : (
+        <div className="mobile-card-list">
+          {filtered.map((e) => (
+            <button
+              key={e.id}
+              type="button"
+              className="mobile-list-item mobile-list-item-interactive"
+              onClick={() => setDetail(e)}
+            >
+              <div className="mobile-list-icon"><History size={16} /></div>
+              <div className="mobile-list-content">
+                <span className="mobile-list-title">{e.agent || 'Session'}</span>
+                <span className="mobile-list-meta">
+                  {formatTime(e.ts)}
+                  {e.duration ? ` · ${formatDuration(e.duration)}` : ''}
+                  {e.taskCount ? ` · ${e.taskCount} tasks` : ''}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Detail sheet */}
+      {detail && (
+        <MobileBottomSheet open={true} onClose={() => setDetail(null)} title="Session Detail">
+          <div className="mobile-agent-detail-meta">
+            <div className="mobile-task-detail-row"><span>Agent</span><span>{detail.agent || '—'}</span></div>
+            <div className="mobile-task-detail-row"><span>Started</span><span>{formatTime(detail.ts)}</span></div>
+            <div className="mobile-task-detail-row"><span>Duration</span><span>{formatDuration(detail.duration)}</span></div>
+            <div className="mobile-task-detail-row"><span>Tasks</span><span>{detail.taskCount || 0}</span></div>
+          </div>
+          {detail.summary && (
+            <div style={{ marginTop: 12 }}>
+              <h4 style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 }}>Summary</h4>
+              <p style={{ fontSize: 13 }}>{detail.summary}</p>
+            </div>
+          )}
+          {detail.output && (
+            <div style={{ marginTop: 12 }}>
+              <h4 style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 }}>Output</h4>
+              <pre className="mono" style={{ fontSize: 11, whiteSpace: 'pre-wrap', wordBreak: 'break-all', background: 'var(--bg-elev-2)', padding: 8, borderRadius: 6 }}>
+                {detail.output.slice(0, 1000)}{detail.output.length > 1000 ? '…' : ''}
+              </pre>
+            </div>
+          )}
+        </MobileBottomSheet>
+      )}
+    </div>
+  );
+}

package/bizar-dash/src/web/mobile/views/MobileMods.tsx

@@ -0,0 +1,149 @@
+// src/mobile/views/MobileMods.tsx — mods list with detail sheet.
+import { useEffect, useState } from 'react';
+import { Sliders, RefreshCw, Power } from 'lucide-react';
+import { api } from '../../lib/api';
+import type { Mod, Snapshot } from '../../lib/types';
+import { MobileBottomSheet } from '../components/MobileBottomSheet';
+
+type Props = {
+  snapshot: Snapshot;
+  onBack: () => void;
+};
+
+export function MobileMods({ snapshot, onBack }: Props) {
+  const [mods, setMods] = useState<Mod[]>(snapshot.mods || []);
+  const [loading, setLoading] = useState(!snapshot.mods);
+  const [filter, setFilter] = useState('');
+  const [statusFilter, setStatusFilter] = useState<'all' | 'enabled' | 'disabled'>('all');
+  const [detailMod, setDetailMod] = useState<Mod | null>(null);
+
+  const reload = async () => {
+    try {
+      const data = await api.get<{ mods: Mod[] }>('/mods');
+      setMods(data.mods || []);
+    } catch {
+      // best-effort
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (snapshot.mods) {
+      setMods(snapshot.mods);
+      setLoading(false);
+    } else {
+      reload();
+    }
+  }, [snapshot.mods]);
+
+  const toggleMod = async (id: string, enabled: boolean) => {
+    try {
+      await api.patch(`/mods/${encodeURIComponent(id)}`, { enabled });
+      setMods((cur) => cur.map((m) => (m.id === id ? { ...m, enabled } : m)));
+      if (detailMod?.id === id) setDetailMod((m) => m ? { ...m, enabled } : m);
+    } catch {
+      // best-effort
+    }
+  };
+
+  const filtered = mods.filter((m) => {
+    if (statusFilter === 'enabled' && !m.enabled) return false;
+    if (statusFilter === 'disabled' && m.enabled) return false;
+    if (filter) {
+      const q = filter.toLowerCase();
+      return m.name.toLowerCase().includes(q) || m.description.toLowerCase().includes(q);
+    }
+    return true;
+  });
+
+  return (
+    <div className="mobile-view">
+      <div className="mobile-tasks-toolbar">
+        <input
+          className="mobile-search-input"
+          type="text"
+          placeholder="Search mods…"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          style={{ flex: 1 }}
+        />
+        <button type="button" className="mobile-icon-btn" onClick={() => reload()} aria-label="Refresh">
+          <RefreshCw size={16} />
+        </button>
+      </div>
+
+      <div className="mobile-search-scopes">
+        {(['all', 'enabled', 'disabled'] as const).map((s) => (
+          <button key={s} type="button" className={`mobile-scope-chip ${statusFilter === s ? 'active' : ''}`}
+            onClick={() => setStatusFilter(s)}>
+            {s.charAt(0).toUpperCase() + s.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="mobile-loading"><p>Loading…</p></div>
+      ) : filtered.length === 0 ? (
+        <div className="mobile-empty">
+          <Sliders size={40} />
+          <p>No mods found.</p>
+        </div>
+      ) : (
+        <div className="mobile-card-list">
+          {filtered.map((m) => (
+            <button
+              key={m.id}
+              type="button"
+              className="mobile-list-item mobile-list-item-interactive"
+              onClick={() => setDetailMod(m)}
+            >
+              <div className="mobile-list-icon"><Sliders size={16} /></div>
+              <div className="mobile-list-content">
+                <span className="mobile-list-title">{m.name}</span>
+                <span className="mobile-list-meta">v{m.version} · {m.author}</span>
+              </div>
+              <span className={`mobile-list-badge ${m.enabled ? 'badge-on' : 'badge-off'}`}>
+                {m.enabled ? 'on' : 'off'}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {detailMod && (
+        <MobileBottomSheet
+          open={true}
+          onClose={() => setDetailMod(null)}
+          title={detailMod.name}
+          actions={
+            <div className="mobile-task-detail-actions">
+              <button
+                type="button"
+                className="mobile-btn"
+                style={{ flex: 1 }}
+                onClick={() => { if (detailMod) toggleMod(detailMod.id, !detailMod.enabled); }}
+              >
+                <Power size={14} /> {detailMod.enabled ? 'Disable' : 'Enable'}
+              </button>
+            </div>
+          }
+        >
+          <div className="mobile-agent-detail">
+            <p className="mobile-agent-detail-desc">{detailMod.description || 'No description.'}</p>
+            <div className="mobile-agent-detail-meta">
+              <div className="mobile-task-detail-row"><span>Version</span><span className="mono">{detailMod.version}</span></div>
+              <div className="mobile-task-detail-row"><span>Author</span><span>{detailMod.author}</span></div>
+              <div className="mobile-task-detail-row"><span>Bizar</span><span className="mono">{detailMod.bizar}</span></div>
+              <div className="mobile-task-detail-row"><span>Type</span><span>{detailMod.type}</span></div>
+              <div className="mobile-task-detail-row"><span>Permissions</span><span>{detailMod.permissions.length}</span></div>
+              {detailMod.installedAt && (
+                <div className="mobile-task-detail-row"><span>Installed</span><span>{new Date(detailMod.installedAt).toLocaleDateString()}</span></div>
+              )}
+            </div>
+          </div>
+        </MobileBottomSheet>
+      )}
+    </div>
+  );
+}