@polderlabs/bizar 4.9.0 → 5.0.1

package/bizar-dash/src/web/views/Doctor.tsx

@@ -0,0 +1,317 @@
+// src/views/Doctor.tsx — v6.0.0 Doctor page.
+//
+// Full-page Doctor view: shows system health, service health, counts,
+// recent errors, and action buttons. Refreshes every 30 seconds via
+// the cheap `/api/doctor/health` endpoint and re-fetches the full
+// snapshot on demand (initial mount, manual Refresh, or after a
+// single-check POST so the operator sees the immediate result).
+//
+// The page deliberately leans on the existing Card component and the
+// StatusBadge variants added in v6.0.0 (`ok`/`warn`/`fail`). Layout
+// is a single column on narrow viewports, two columns on desktop —
+// matching the rest of the dashboard's grid.
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  CheckCircle2,
+  AlertTriangle,
+  AlertOctagon,
+  Download,
+  FileText,
+  RefreshCw,
+  PlayCircle,
+  Stethoscope,
+  Clock,
+} from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../components/Card';
+import { Button } from '../components/Button';
+import { DoctorPanel } from '../components/DoctorPanel';
+import { StatusBadge } from '../components/StatusBadge';
+import { Spinner } from '../components/Spinner';
+import { useToast } from '../components/Toast';
+import { api } from '../lib/api';
+import { cn, formatTime } from '../lib/utils';
+import type { DoctorSnapshot, DoctorCheck, Settings, Snapshot } from '../lib/types';
+
+const REFRESH_INTERVAL_MS = 30_000;
+
+type Props = {
+  snapshot: Snapshot;
+  settings: Settings;
+  activeTab: string;
+  setActiveTab: (id: string) => void;
+  refreshSnapshot: () => Promise<void>;
+};
+
+function DoctorInner({
+  setActiveTab,
+}: Props) {
+  const toast = useToast();
+  const [data, setData] = useState<DoctorSnapshot | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [lastFetched, setLastFetched] = useState<number | null>(null);
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const cancelledRef = useRef(false);
+
+  const fetchSnapshot = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      const r = await api.get<DoctorSnapshot>('/doctor');
+      if (!cancelledRef.current) {
+        setData(r);
+        setLastFetched(Date.now());
+        setLoading(false);
+      }
+    } catch (err) {
+      if (!cancelledRef.current) {
+        setLoading(false);
+        toast.error(`Doctor refresh failed: ${(err as Error).message}`);
+      }
+    } finally {
+      if (!cancelledRef.current) setRefreshing(false);
+    }
+  }, [toast]);
+
+  // Initial fetch on mount
+  useEffect(() => {
+    cancelledRef.current = false;
+    fetchSnapshot();
+    return () => { cancelledRef.current = true; };
+  }, [fetchSnapshot]);
+
+  // 30s auto-refresh via the cheap health endpoint so the page
+  // stays current without burning a full snapshot every tick. We
+  // only trigger a full snapshot fetch if status changed.
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const tick = async () => {
+      try {
+        const r = await api.get<{ status: string; issues: DoctorCheck[] }>('/doctor/health');
+        setData((cur) => {
+          if (!cur) return cur;
+          if (cur.health.status !== r.status || cur.health.issues.length !== r.issues.length) {
+            // Status changed — re-fetch the full snapshot
+            fetchSnapshot();
+          }
+          return cur;
+        });
+      } catch { /* non-fatal */ }
+    };
+    const id = setInterval(tick, REFRESH_INTERVAL_MS);
+    return () => clearInterval(id);
+  }, [autoRefresh, fetchSnapshot]);
+
+  const onRunCheck = async (checkName: string) => {
+    try {
+      const r = await api.post<DoctorCheck>('/doctor/check', { checkName });
+      toast.info(`${r.name}: ${r.message}`, 4000);
+      // Re-fetch so the panel reflects the fresh result
+      await fetchSnapshot();
+    } catch (err) {
+      const apiErr = err as { status?: number; data?: { message?: string } };
+      toast.error(`Check failed: ${apiErr.data?.message ?? (err as Error).message}`);
+    }
+  };
+
+  const onExportJson = () => {
+    if (!data) return;
+    try {
+      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `doctor-snapshot-${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      toast.error(`Export failed: ${(err as Error).message}`);
+    }
+  };
+
+  const onViewLogs = () => {
+    // Logs live on the Settings → Activity Log surface (already
+    // implemented). Set the tab and let the user browse.
+    setActiveTab('settings');
+  };
+
+  const counts = data?.counts;
+  const countsInfo = useMemo(() => {
+    if (!counts) return [];
+    return [
+      { label: 'Tasks', value: counts.tasks },
+      { label: 'Schedules', value: counts.schedules },
+      { label: 'Mods', value: counts.mods },
+      { label: 'Providers', value: counts.providers },
+      { label: 'MCPs', value: counts.mcps },
+      { label: 'Agents', value: counts.agents },
+      { label: 'Projects', value: counts.projects },
+      { label: 'Workspaces', value: counts.workspaces },
+      { label: 'Voice notes', value: counts.voiceNotes },
+      { label: 'Eval runs', value: counts.evalRuns },
+      { label: 'Backups', value: counts.backups },
+    ];
+  }, [counts]);
+
+  if (loading) {
+    return (
+      <div className="view view-doctor view-loading">
+        <Spinner size="lg" />
+        <p>Running health checks…</p>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="view view-doctor">
+        <Card>
+          <CardTitle>
+            <AlertOctagon size={14} /> Doctor unavailable
+          </CardTitle>
+          <CardMeta>Could not reach /api/doctor.</CardMeta>
+          <div className="doctor-fallback-actions">
+            <Button variant="primary" onClick={fetchSnapshot}>
+              <RefreshCw size={12} /> Retry
+            </Button>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  const overall = data.health.status;
+  const OverallIcon =
+    overall === 'ok' ? CheckCircle2 : overall === 'warn' ? AlertTriangle : AlertOctagon;
+  const overallLabel =
+    overall === 'ok' ? 'Healthy' : overall === 'warn' ? 'Warning' : 'Failed';
+
+  return (
+    <div className="view view-doctor" data-overall={overall}>
+      <div className="doctor-header">
+        <div className="doctor-header-row">
+          <div className="doctor-header-title">
+            <Stethoscope size={20} aria-hidden />
+            <h1>Doctor</h1>
+          </div>
+          <div className="doctor-header-status">
+            <span className={cn('doctor-overall-pill', `doctor-overall-${overall}`)}>
+              <OverallIcon size={14} aria-hidden />
+              <span className="doctor-overall-label">{overallLabel}</span>
+              <StatusBadge kind={overall} dot>
+                {data.health.issues.length} issue{data.health.issues.length === 1 ? '' : 's'}
+              </StatusBadge>
+            </span>
+          </div>
+        </div>
+        <div className="doctor-header-meta muted">
+          <Clock size={12} aria-hidden />
+          <span>
+            v{data.bizarVersion} · {data.platform}/{data.arch} ·{' '}
+            up {Math.floor(data.uptime)}s
+            {lastFetched ? ` · refreshed ${formatTime(new Date(lastFetched))}` : ''}
+          </span>
+        </div>
+      </div>
+
+      <div className="doctor-grid">
+        <DoctorPanel
+          category="system"
+          checks={data.checks.system}
+          meta={`${data.platform}/${data.arch}`}
+        />
+        <DoctorPanel
+          category="services"
+          checks={data.checks.services}
+          meta={
+            data.services.opencode?.reachable
+              ? `opencode on ${data.services.opencode.port ?? '?'}`
+              : 'opencode not connected'
+          }
+        />
+        <DoctorPanel
+          category="counts"
+          checks={[]}
+          info={countsInfo}
+          meta={counts?.activeProject ? `active: ${counts.activeProject}` : 'no active project'}
+        />
+        <Card className="doctor-errors-card">
+          <CardTitle>
+            <AlertOctagon size={14} aria-hidden />
+            <span>Recent errors (last hour)</span>
+            <span className="card-meta-inline muted">
+              {data.recentErrors.length} line{data.recentErrors.length === 1 ? '' : 's'}
+            </span>
+          </CardTitle>
+          {data.recentErrors.length === 0 ? (
+            <div className="muted doctor-errors-empty">No errors in the last hour. Nice.</div>
+          ) : (
+            <ul className="doctor-errors-list" role="list">
+              {data.recentErrors.map((e, idx) => (
+                <li key={`${e.tsMs ?? idx}-${idx}`} className="doctor-error-row">
+                  <span className="doctor-error-ts mono">
+                    {e.ts ? formatTime(new Date(e.ts)) : '??:??:??'}
+                  </span>
+                  <span className="doctor-error-line mono">{e.line}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Card>
+        <Card className="doctor-actions-card">
+          <CardTitle>
+            <PlayCircle size={14} aria-hidden /> Actions
+          </CardTitle>
+          <CardMeta>Run a check, view logs, or export the snapshot.</CardMeta>
+          <div className="doctor-actions-row">
+            <Button variant="primary" onClick={fetchSnapshot} disabled={refreshing}>
+              {refreshing ? <Spinner size="sm" /> : <RefreshCw size={12} />}
+              {refreshing ? 'Running…' : 'Run Health Check Now'}
+            </Button>
+            <Button variant="secondary" onClick={onViewLogs}>
+              <FileText size={12} /> View Full Logs
+            </Button>
+            <Button variant="secondary" onClick={onExportJson}>
+              <Download size={12} /> Export Diagnostics as JSON
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => setAutoRefresh((v) => !v)}
+              title="Toggle auto-refresh"
+            >
+              {autoRefresh ? 'Pause auto-refresh' : 'Resume auto-refresh'}
+            </Button>
+          </div>
+          {data.checks.services.some((c) => c.status !== 'ok') ||
+          data.checks.config.some((c) => c.status !== 'ok') ? (
+            <div className="doctor-actions-rerun">
+              <span className="muted">Rerun a single check:</span>
+              <div className="doctor-actions-rerun-row">
+                {[
+                  ...data.checks.services,
+                  ...data.checks.config,
+                ]
+                  .filter((c) => c.status !== 'ok')
+                  .map((c) => (
+                    <Button
+                      key={c.name}
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onRunCheck(c.name)}
+                      title={`Run check: ${c.name}`}
+                    >
+                      <PlayCircle size={10} /> {c.name}
+                    </Button>
+                  ))}
+              </div>
+            </div>
+          ) : null}
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+export const Doctor = React.memo(DoctorInner);

package/bizar-dash/src/web/views/Memory.tsx

@@ -10,11 +10,14 @@
 import React, { useCallback, useState } from 'react';
 import {
   Brain,
+  Clipboard,
   FileText,
   GitBranch,
   LayoutDashboard,
+  Mic,
   Network,
   RefreshCw,
+  Scan,
   Search as SearchIcon,
   Sliders,
 } from 'lucide-react';
@@ -28,8 +31,11 @@ import { GitSyncPanel } from './memory/GitSyncPanel';
 import { SemanticSearchPanel } from './memory/SemanticSearchPanel';
 import { ConfigPanel } from './memory/ConfigPanel';
 import { MemoryGraphPanel } from './memory/MemoryGraphPanel';
+import { FromScreenshotPanel } from './memory/FromScreenshotPanel';
+import { VaultFromClipboardPanel } from './memory/VaultFromClipboardPanel';
+import { VoiceNotesPanel } from '../components/VoiceNotesPanel';
 
-type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config' | 'graph';
+type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config' | 'graph' | 'webclip' | 'screenshot' | 'voice';
 
 type Props = {
   snapshot: unknown;
@@ -51,6 +57,9 @@ const SOURCES: Array<{
   { id: 'semantic', label: 'Semantic Search', icon: SearchIcon },
   { id: 'config', label: 'Config', icon: Sliders },
   { id: 'graph', label: 'Memory Graph', icon: Network },
+  { id: 'webclip', label: 'Web Clip', icon: Clipboard },
+  { id: 'screenshot', label: 'Screenshot OCR', icon: Scan },
+  { id: 'voice', label: 'Voice Notes', icon: Mic },
 ];
 
 function MemoryInner(_props: Props) {
@@ -83,6 +92,12 @@ function MemoryInner(_props: Props) {
         return <ConfigPanel refreshKey={refreshKey} />;
       case 'graph':
         return <MemoryGraphPanel refreshKey={refreshKey} />;
+      case 'webclip':
+        return <VaultFromClipboardPanel refreshKey={refreshKey} />;
+      case 'screenshot':
+        return <FromScreenshotPanel refreshKey={refreshKey} />;
+      case 'voice':
+        return <VoiceNotesPanel refreshKey={refreshKey} />;
       default:
         return <Card>Unknown panel: {active}</Card>;
     }
@@ -97,7 +112,7 @@ function MemoryInner(_props: Props) {
             <Brain size={18} /> Memory
           </h2>
           <p className="view-subtitle">
-            LightRAG, Obsidian vault, git sync, and semantic search — all in one place.
+            LightRAG, Obsidian vault, git sync, semantic search, web clips, and screenshot OCR — all in one place.
           </p>
         </div>
         <div className="view-actions">

package/bizar-dash/src/web/views/MiniMaxUsage.tsx

@@ -784,6 +784,7 @@ function QuotaBar({ icon, label, remainingPct, consumedPct, used, total, resetIn
       <div className="minimax-quota-head">
         <span className="minimax-quota-label">{icon} {label}</span>
         <span className="minimax-quota-remaining">{remainingPct}% remaining</span>
+        <span className="minimax-quota-consumed">· {consumedPct}% used</span>
       </div>
       <div className="minimax-bar">
         <div className="minimax-bar-fill" style={{ width: `${consumedPct}%` }} aria-label={`${consumedPct}% consumed`} />

package/bizar-dash/src/web/views/Schedules.tsx

@@ -13,6 +13,7 @@ import {
   RefreshCw,
   History,
   ChevronDown,
+  LayoutTemplate,
 } from 'lucide-react';
 import { Card, CardTitle, CardMeta } from '../components/Card';
 import { Button } from '../components/Button';
@@ -23,6 +24,8 @@ import { useModal } from '../components/Modal';
 import { api } from '../lib/api';
 import { formatRelative } from '../lib/utils';
 import type { Schedule, Settings, Snapshot } from '../lib/types';
+import { ScheduleTemplateCard } from '../components/ScheduleTemplateCard';
+import type { ScheduleTemplate } from '../components/ScheduleTemplateCard';
 
 type Props = {
   snapshot: Snapshot;
@@ -221,6 +224,9 @@ export function Schedules({ snapshot, refreshSnapshot }: Props) {
   const modal = useModal();
   const [schedules, setSchedules] = useState<Schedule[]>(snapshot.schedules || []);
   const [loading, setLoading] = useState(!snapshot.schedules);
+  const [activeSection, setActiveSection] = useState<'schedules' | 'templates'>('schedules');
+  const [templates, setTemplates] = useState<ScheduleTemplate[]>([]);
+  const [templatesLoading, setTemplatesLoading] = useState(false);
 
   const reload = async () => {
     try {
@@ -235,6 +241,18 @@ export function Schedules({ snapshot, refreshSnapshot }: Props) {
     }
   };
 
+  const loadTemplates = async () => {
+    setTemplatesLoading(true);
+    try {
+      const r = await api.get<{ templates: ScheduleTemplate[] }>('/schedules/templates');
+      setTemplates(r.templates || []);
+    } catch (err) {
+      toast.error(`Templates load failed: ${(err as Error).message}`);
+    } finally {
+      setTemplatesLoading(false);
+    }
+  };
+
   useEffect(() => {
     if (snapshot.schedules?.length || snapshot.schedules) {
       setSchedules(snapshot.schedules || []);
@@ -245,6 +263,12 @@ export function Schedules({ snapshot, refreshSnapshot }: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [snapshot.schedules]);
 
+  useEffect(() => {
+    if (activeSection === 'templates' && templates.length === 0) {
+      loadTemplates();
+    }
+  }, [activeSection]);
+
   const openEditor = (initial?: Schedule) => {
     modal.open({
       title: initial ? `Edit schedule: ${initial.name}` : 'New schedule',
@@ -294,6 +318,20 @@ export function Schedules({ snapshot, refreshSnapshot }: Props) {
     }
   };
 
+  const onUseTemplate = async (template: ScheduleTemplate) => {
+    try {
+      const saved = await api.post<Schedule>('/schedules/from-template', {
+        templateId: template.id,
+      });
+      setSchedules((cur) => [...cur, saved]);
+      setActiveSection('schedules');
+      toast.success(`Schedule "${saved.name}" created from template.`);
+      await refreshSnapshot();
+    } catch (err) {
+      toast.error(`Failed to create schedule: ${(err as Error).message}`);
+    }
+  };
+
   if (loading) {
     return (
       <div className="view-loading"><Spinner size="lg" /></div>
@@ -304,25 +342,69 @@ export function Schedules({ snapshot, refreshSnapshot }: Props) {
     <div className="view view-schedules">
       <header className="view-header">
         <div className="view-header-text">
-          <h2 className="view-title">
-            <Clock size={18} /> Schedules ({schedules.length})
-          </h2>
+          <div className="view-title-row">
+            <h2 className="view-title">
+              <Clock size={18} /> Schedules
+            </h2>
+            <div className="view-section-tabs">
+              <button
+                type="button"
+                className={`tab-btn ${activeSection === 'schedules' ? 'tab-btn-active' : ''}`}
+                onClick={() => setActiveSection('schedules')}
+              >
+                Schedules ({schedules.length})
+              </button>
+              <button
+                type="button"
+                className={`tab-btn ${activeSection === 'templates' ? 'tab-btn-active' : ''}`}
+                onClick={() => setActiveSection('templates')}
+              >
+                <LayoutTemplate size={14} /> Templates
+              </button>
+            </div>
+          </div>
           <p className="view-subtitle">
-            Recurring tasks for the active project: <strong>{snapshot.activeProject?.name || '(none)'}</strong>.
-            Service daemon runs them at the right time.
+            {activeSection === 'schedules'
+              ? <>Recurring tasks for <strong>{snapshot.activeProject?.name || '(none)'}</strong>. Service daemon runs them at the right time.</>
+              : 'Example schedules you can use as a starting point.'}
           </p>
         </div>
         <div className="view-actions">
-          <Button variant="secondary" size="sm" onClick={reload}>
-            <RefreshCw size={14} /> Refresh
-          </Button>
-          <Button variant="primary" size="sm" onClick={() => openEditor()}>
-            <Plus size={14} /> New schedule
-          </Button>
+          {activeSection === 'schedules' && (
+            <>
+              <Button variant="secondary" size="sm" onClick={reload}>
+                <RefreshCw size={14} /> Refresh
+              </Button>
+              <Button variant="primary" size="sm" onClick={() => openEditor()}>
+                <Plus size={14} /> New schedule
+              </Button>
+            </>
+          )}
+          {activeSection === 'templates' && (
+            <Button variant="secondary" size="sm" onClick={loadTemplates} disabled={templatesLoading}>
+              <RefreshCw size={14} /> Refresh
+            </Button>
+          )}
         </div>
       </header>
 
-      {schedules.length === 0 ? (
+      {activeSection === 'templates' ? (
+        templatesLoading ? (
+          <div className="view-loading"><Spinner size="lg" /></div>
+        ) : templates.length === 0 ? (
+          <EmptyState
+            icon={<LayoutTemplate size={32} />}
+            title="No templates"
+            message="No schedule templates found. Templates are loaded from templates/schedules/."
+          />
+        ) : (
+          <div className="schedule-template-grid">
+            {templates.map((t) => (
+              <ScheduleTemplateCard key={t.id} template={t} onUse={onUseTemplate} />
+            ))}
+          </div>
+        )
+      ) : schedules.length === 0 ? (
         <EmptyState
           icon={<Clock size={32} />}
           title="No schedules"