@polderlabs/bizar 7.0.4 → 8.0.0

package/bizar-dash/src/web/mobile/MobileBottomNav.tsx

@@ -1,38 +0,0 @@
-// src/mobile/MobileBottomNav.tsx — bottom tab bar for mobile.
-import type { LucideIcon } from 'lucide-react';
-import { cx } from '../ui/utils/cx';
-
-export type MobileTab = {
-  id: string;
-  label: string;
-  icon: LucideIcon;
-};
-
-type Props = {
-  tabs: MobileTab[];
-  activeTab: string;
-  onChange: (id: string) => void;
-};
-
-export function MobileBottomNav({ tabs, activeTab, onChange }: Props) {
-  return (
-    <nav className="mobile-bottom-nav" role="navigation" aria-label="Mobile navigation">
-      {tabs.map((t) => {
-        const Icon = t.icon;
-        return (
-          <button
-            key={t.id}
-            type="button"
-            className={cx('mobile-nav-btn', { 'mobile-nav-btn-active': activeTab === t.id })}
-            onClick={() => onChange(t.id)}
-            aria-label={t.label}
-            aria-current={activeTab === t.id ? 'page' : undefined}
-          >
-            <Icon size={22} />
-            <span className="mobile-nav-label">{t.label}</span>
-          </button>
-        );
-      })}
-    </nav>
-  );
-}

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

@@ -1,138 +0,0 @@
-// src/web/mobile/MobileChat.tsx — mobile chat UI without info/sessions sidebars.
-// No OCR capture, no clipper, no sessions panel — pure chat thread.
-import { useEffect, useRef, useState } from 'react';
-import { ChatTopBar } from '../components/chat/ChatTopBar';
-import { ChatThread } from '../components/chat/ChatThread';
-import { FloatingComposer } from '../components/chat/FloatingComposer';
-import { useChat } from '../components/chat/useChat';
-import { useSlashCommands } from '../components/chat/useSlashCommands';
-import { useToast } from '../components/Toast';
-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 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 fileInputRef = useRef<HTMLInputElement>(null);
-
-  const { 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();
-  };
-
-  return (
-    <div className="chat-shell">
-      <ChatTopBar
-        activeProject={snapshot.activeProject}
-        sessionCount={chat.sessions.length}
-        sessionsOpen={false}
-        infoOpen={false}
-        onToggleSessions={() => undefined}
-        onToggleInfo={() => undefined}
-        onOpenOverview={() => setActiveTab?.('overview')}
-      />
-      <div className="chat-body">
-        <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={() => undefined}
-            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={false}
-            infoOpen={false}
-          />
-          <input
-            ref={fileInputRef}
-            type="file"
-            multiple
-            style={{ display: 'none' }}
-            onChange={onFiles}
-          />
-        </main>
-      </div>
-    </div>
-  );
-}

package/bizar-dash/src/web/mobile/MobileDoctor.tsx

@@ -1,80 +0,0 @@
-// src/web/mobile/MobileDoctor.tsx — v5.4 mobile doctor health view with 30s auto-refresh.
-import { useEffect, useState } from 'react';
-import { CheckCircle2, AlertTriangle, XCircle } from 'lucide-react';
-import { api } from '../lib/api';
-import type { DoctorStatus, DoctorCheck } from '../lib/types';
-
-type HealthResponse = {
-  status: DoctorStatus;
-  issues: DoctorCheck[];
-};
-
-const REFRESH_INTERVAL_MS = 30_000;
-
-export function MobileDoctor() {
-  const [data, setData] = useState<HealthResponse | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetch_ = () => {
-      api.get<HealthResponse>('/doctor/health')
-        .then((r) => {
-          setData(r);
-          setLoading(false);
-        })
-        .catch(() => setLoading(false));
-    };
-    fetch_();
-    const id = setInterval(fetch_, REFRESH_INTERVAL_MS);
-    return () => clearInterval(id);
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="mobile-loading">
-        <p>Running health checks…</p>
-      </div>
-    );
-  }
-
-  const status: DoctorStatus = data?.status ?? 'fail';
-  const issues: DoctorCheck[] = data?.issues ?? [];
-
-  return (
-    <div className="mobile-doctor">
-      <div className={`mobile-doctor-status is-${status}`}>
-        {status === 'ok' && <CheckCircle2 size={48} />}
-        {status === 'warn' && <AlertTriangle size={48} />}
-        {status === 'fail' && <XCircle size={48} />}
-        <div className="mobile-doctor-status-text">{status.toUpperCase()}</div>
-        <div className="mobile-doctor-status-sub">Auto-refreshes every 30s</div>
-      </div>
-
-      {issues.length > 0 && (
-        <div className="mobile-doctor-issues">
-          <h3>Issues ({issues.length})</h3>
-          {issues.map((i, idx) => (
-            <div key={idx} className={`mobile-doctor-issue is-${i.status}`}>
-              {i.status === 'warn' ? (
-                <AlertTriangle size={16} />
-              ) : (
-                <XCircle size={16} />
-              )}
-              <div>
-                <div className="mobile-doctor-issue-name">{i.name}</div>
-                <div className="mobile-doctor-issue-msg">{i.message}</div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {status === 'ok' && issues.length === 0 && (
-        <div className="mobile-doctor-ok">
-          <CheckCircle2 size={24} />
-          <p>All systems healthy.</p>
-        </div>
-      )}
-    </div>
-  );
-}

package/bizar-dash/src/web/mobile/MobileEval.tsx

@@ -1,167 +0,0 @@
-// src/web/mobile/MobileEval.tsx — v5.4 mobile eval view with runs and schedules tabs.
-import { useEffect, useState } from 'react';
-import { ClipboardCheck, Clock } from 'lucide-react';
-import { cx } from '../ui/utils/cx';
-import { api } from '../lib/api';
-import type { EvalRunSummary } from '../components/EvalRunCard';
-
-type EvalSchedule = {
-  id: string;
-  name: string;
-  suitePath: string;
-  cron: string;
-  agent: string;
-};
-
-function pickStatus(run: EvalRunSummary): 'pass' | 'warn' | 'fail' {
-  if (run.total <= 0) return 'fail';
-  if (run.failed === 0) return 'pass';
-  if (run.passed / run.total > 0.8) return 'warn';
-  return 'fail';
-}
-
-export function MobileEval() {
-  const [runs, setRuns] = useState<EvalRunSummary[]>([]);
-  const [schedules, setSchedules] = useState<EvalSchedule[]>([]);
-  const [tab, setTab] = useState<'runs' | 'schedules'>('runs');
-  const [loadingRuns, setLoadingRuns] = useState(true);
-  const [loadingSchedules, setLoadingSchedules] = useState(false);
-  const [selectedRun, setSelectedRun] = useState<EvalRunSummary | null>(null);
-
-  useEffect(() => {
-    api.get<{ runs: EvalRunSummary[] }>('/eval/runs')
-      .then((r) => setRuns(r.runs ?? []))
-      .catch(() => {/* best-effort */})
-      .finally(() => setLoadingRuns(false));
-  }, []);
-
-  const loadSchedules = () => {
-    setLoadingSchedules(true);
-    api.get<{ schedules: EvalSchedule[] }>('/eval/schedules')
-      .then((r) => setSchedules(r.schedules ?? []))
-      .catch(() => {/* best-effort */})
-      .finally(() => setLoadingSchedules(false));
-  };
-
-  useEffect(() => {
-    if (tab === 'schedules' && schedules.length === 0) {
-      loadSchedules();
-    }
-  }, [tab]);
-
-  return (
-    <div className="mobile-eval">
-      <div className="mobile-eval-tabs">
-        <button
-          type="button"
-          className={cx('mobile-eval-tab', tab === 'runs' && 'is-active')}
-          onClick={() => setTab('runs')}
-        >
-          <ClipboardCheck size={12} aria-hidden />
-          Runs
-        </button>
-        <button
-          type="button"
-          className={cx('mobile-eval-tab', tab === 'schedules' && 'is-active')}
-          onClick={() => setTab('schedules')}
-        >
-          <Clock size={12} aria-hidden />
-          Schedules
-        </button>
-      </div>
-
-      {tab === 'runs' && (
-        <div className="mobile-eval-runs">
-          {loadingRuns ? (
-            <div className="mobile-loading"><p>Loading runs…</p></div>
-          ) : runs.length === 0 ? (
-            <div className="mobile-empty">
-              <ClipboardCheck size={32} />
-              <p>No eval runs yet.</p>
-            </div>
-          ) : (
-            runs.map((r) => {
-              const status = pickStatus(r);
-              return (
-                <div
-                  key={r.id}
-                  className="mobile-eval-run-card"
-                  onClick={() => setSelectedRun(r)}
-                  role="button"
-                  tabIndex={0}
-                  onKeyDown={(e) => e.key === 'Enter' && setSelectedRun(r)}
-                >
-                  <div className={cx('mobile-eval-status', `is-${status}`)}>
-                    {r.passed}/{r.total}
-                  </div>
-                  <div className="mobile-eval-run-info">
-                    <div className="mobile-eval-run-id">{r.id}</div>
-                    <div className="mobile-eval-run-time">
-                      {new Date(r.startedAt).toLocaleString()}
-                    </div>
-                  </div>
-                </div>
-              );
-            })
-          )}
-        </div>
-      )}
-
-      {tab === 'schedules' && (
-        <div className="mobile-eval-schedules">
-          {loadingSchedules ? (
-            <div className="mobile-loading"><p>Loading schedules…</p></div>
-          ) : schedules.length === 0 ? (
-            <div className="mobile-empty">
-              <Clock size={32} />
-              <p>No eval schedules.</p>
-            </div>
-          ) : (
-            schedules.map((s) => (
-              <div key={s.id} className="mobile-eval-schedule-card">
-                <div className="mobile-eval-schedule-name">{s.name}</div>
-                <div className="mobile-eval-schedule-meta">
-                  {s.cron} · {s.suitePath} · agent:{s.agent || 'thor'}
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      )}
-
-      {selectedRun && (
-        <div className="mobile-eval-run-sheet">
-          <div className="mobile-bottom-sheet-header">
-            <h3>Run {selectedRun.id}</h3>
-            <button
-              type="button"
-              className="mobile-bottom-sheet-close"
-              onClick={() => setSelectedRun(null)}
-              aria-label="Close"
-            >
-              ×
-            </button>
-          </div>
-          <div className="mobile-eval-run-sheet-body">
-            <div className="mobile-eval-run-sheet-row">
-              <span>Suite</span>
-              <span>{selectedRun.suitePath}</span>
-            </div>
-            <div className="mobile-eval-run-sheet-row">
-              <span>Passed</span>
-              <span>{selectedRun.passed}</span>
-            </div>
-            <div className="mobile-eval-run-sheet-row">
-              <span>Failed</span>
-              <span>{selectedRun.failed}</span>
-            </div>
-            <div className="mobile-eval-run-sheet-row">
-              <span>Started</span>
-              <span>{new Date(selectedRun.startedAt).toLocaleString()}</span>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/bizar-dash/src/web/mobile/MobileMemory.tsx

@@ -1,108 +0,0 @@
-// src/web/mobile/MobileMemory.tsx — v5.4 mobile memory view with tabbed sources.
-// Tab bar at top, scrollable source panels below.
-import { useState } from 'react';
-import {
-  Brain,
-  BarChart,
-  FileText,
-  GitBranch,
-  Search,
-  Mic,
-  Settings,
-  Network,
-  Clipboard,
-  Scan,
-} from 'lucide-react';
-import { cx } from '../ui/utils/cx';
-import { MemoryOverview } from '../views/memory/MemoryOverview';
-import { LightragPanel } from '../views/memory/LightragPanel';
-import { ObsidianPanel } from '../views/memory/ObsidianPanel';
-import { GitSyncPanel } from '../views/memory/GitSyncPanel';
-import { SemanticSearchPanel } from '../views/memory/SemanticSearchPanel';
-import { ConfigPanel } from '../views/memory/ConfigPanel';
-import { MemoryGraphPanel } from '../views/memory/MemoryGraphPanel';
-import { VaultFromClipboardPanel } from '../views/memory/VaultFromClipboardPanel';
-import { FromScreenshotPanel } from '../views/memory/FromScreenshotPanel';
-import { VoiceNotesPanel } from '../components/VoiceNotesPanel';
-
-type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config' | 'graph' | 'webclip' | 'screenshot' | 'voice';
-
-type Props = {
-  snapshot?: unknown;
-  settings?: unknown;
-  vaultPath?: string;
-};
-
-const SOURCES: Array<{ id: SubPanel; label: string; icon: typeof BarChart }> = [
-  { id: 'overview', label: 'Overview', icon: BarChart },
-  { id: 'lightrag', label: 'LightRAG', icon: Brain },
-  { id: 'obsidian', label: 'Obsidian', icon: FileText },
-  { id: 'git', label: 'Git Sync', icon: GitBranch },
-  { id: 'semantic', label: 'Search', icon: Search },
-  { id: 'voice', label: 'Voice', icon: Mic },
-  { id: 'config', label: 'Config', icon: Settings },
-  { id: 'graph', label: 'Graph', icon: Network },
-  { id: 'webclip', label: 'Web Clip', icon: Clipboard },
-  { id: 'screenshot', label: 'OCR', icon: Scan },
-];
-
-export function MobileMemory({ vaultPath }: Props) {
-  const [activeSource, setActiveSource] = useState<SubPanel>('overview');
-  const [refreshKey, setRefreshKey] = useState(0);
-
-  const refresh = () => setRefreshKey((k) => k + 1);
-
-  const renderPanel = () => {
-    const key = refreshKey;
-    switch (activeSource) {
-      case 'overview':
-        return <MemoryOverview refreshKey={key} onRefresh={refresh} setActiveSubPanel={setActiveSource as (s: string) => void} />;
-      case 'lightrag':
-        return <LightragPanel refreshKey={key} />;
-      case 'obsidian':
-        return <ObsidianPanel refreshKey={key} />;
-      case 'git':
-        return <GitSyncPanel refreshKey={key} />;
-      case 'semantic':
-        return <SemanticSearchPanel refreshKey={key} />;
-      case 'config':
-        return <ConfigPanel refreshKey={key} />;
-      case 'graph':
-        return <MemoryGraphPanel refreshKey={key} />;
-      case 'webclip':
-        return <VaultFromClipboardPanel refreshKey={key} />;
-      case 'screenshot':
-        return <FromScreenshotPanel refreshKey={key} />;
-      case 'voice':
-        return <VoiceNotesPanel refreshKey={key} />;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="mobile-memory">
-      <div className="mobile-memory-tabs">
-        {SOURCES.map((s) => {
-          const Icon = s.icon;
-          return (
-            <button
-              key={s.id}
-              type="button"
-              className={cx('mobile-memory-tab', activeSource === s.id && 'is-active')}
-              onClick={() => setActiveSource(s.id)}
-              aria-pressed={activeSource === s.id}
-            >
-              <Icon size={14} aria-hidden />
-              {s.label}
-            </button>
-          );
-        })}
-      </div>
-
-      <div className="mobile-memory-content">
-        {renderPanel()}
-      </div>
-    </div>
-  );
-}