@polderlabs/bizar 7.0.4 → 8.0.0

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

@@ -1,257 +0,0 @@
-// src/web/mobile/views/MobileChat.tsx — mobile chat (v4.2.5).
-//
-// v4.2.5 — matches Chat.tsx overhaul: cline session-create via the
-// new endpoint, source-routed composer (cline send vs. local chat),
-// source indicator badge, rename / delete / export on the info panel,
-// and matching busy flags.
-
-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 ?? '');
-  useEffect(() => {
-    chat.setToast({
-      error: (msg: string) => toast.error(msg),
-      success: (msg: string) => toast.success(msg),
-      info: (msg: string) => toast.info(msg),
-      warning: (msg: string) => toast.warning(msg),
-    });
-  }, [chat, toast]);
-
-  const [text, setText] = useState('');
-  const [agent, setAgent] = useState(settings.defaultAgent || 'odin');
-  const [model, setModel] = useState(settings.defaultModel || '');
-  const [attachments, setAttachments] = useState<string[]>([]);
-  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 = async () => {
-    const msg = text.trim();
-    if (!msg) return;
-    setText('');
-    setQuery('');
-    const result = await chat.onSend(msg, agent, model, attachments);
-    if (result.ok) chat.jumpToLatest();
-  };
-
-  const handleCreateSession = async () => {
-    if (chat.busy.create) return;
-    await chat.onCreateSession();
-    setSessionsOpen(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>
-      ),
-    });
-  };
-
-  const handleDeleteSession = (id: string, title: string) => {
-    modal.open({
-      title: 'Delete session?',
-      children: (
-        <p style={{ margin: 0 }}>
-          Delete <strong>{title}</strong>? This 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={async () => {
-              modal.close();
-              await chat.deleteSession(id);
-            }}
-          >
-            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}
-            clineSessions={chat.clineSessions}
-            activeSessionId={chat.sessionId}
-            activeClineSessionId={chat.activeClineSessionId}
-            activeProject={snapshot.activeProject}
-            onCreateSession={handleCreateSession}
-            onSelectSession={chat.selectBizarSession}
-            onSelectClineSession={(s) => chat.loadClineSession(s.id)}
-            creating={chat.busy.create}
-          />
-        </aside>
-
-        <main className="chat-main">
-          <ChatThread
-            messages={
-              chat.activeSource === 'cline'
-                ? chat.clineMessages
-                : chat.bizarMessages
-            }
-            loading={chat.loading}
-            activeProject={snapshot.activeProject}
-            sessionId={
-              chat.activeSource === 'cline'
-                ? chat.activeClineSessionId ?? chat.sessionId
-                : chat.sessionId
-            }
-            pinned={chat.pinned}
-            activeSource={chat.activeSource}
-            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}
-            activeSource={chat.activeSource}
-            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.activeSource === 'cline'
-                ? chat.activeClineSessionId ?? chat.sessionId
-                : chat.sessionId
-            }
-            messages={
-              chat.activeSource === 'cline'
-                ? chat.clineMessages
-                : chat.bizarMessages
-            }
-            pinned={chat.pinned}
-            agent={agent}
-            model={model}
-            agents={snapshot.agents || []}
-            mcps={snapshot.mcps || []}
-            allCommands={allCommands}
-            activeSource={chat.activeSource}
-            onDelete={() => {
-              const id =
-                chat.activeSource === 'cline'
-                  ? chat.activeClineSessionId
-                  : chat.sessionId;
-              if (!id) return;
-              handleDeleteSession(id, id);
-            }}
-          />
-        </aside>
-      </div>
-    </div>
-  );
-}

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

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

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