@polderlabs/bizar 5.3.0 → 5.4.0

package/bizar-dash/src/web/components/MobileHeader.tsx

@@ -0,0 +1,50 @@
+// src/web/components/MobileHeader.tsx — sticky top bar with menu, title, and actions.
+import { Menu, Search, X } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+type Props = {
+  onMenuClick: () => void;
+  scrolled: boolean;
+  activeTab: string;
+  onSettings?: (() => void) | null;
+  onSearch?: () => void;
+};
+
+export function MobileHeader({ onMenuClick, scrolled, activeTab, onSettings, onSearch }: Props) {
+  return (
+    <header className={cn('mobile-header', scrolled && 'is-scrolled')}>
+      <button
+        onClick={onMenuClick}
+        className="mobile-menu-btn"
+        aria-label="Open menu"
+        type="button"
+      >
+        <Menu size={20} />
+      </button>
+
+      <h1 className="mobile-header-title">
+        {activeTab === 'settings' ? 'Settings' : 'Bizar'}
+      </h1>
+
+      {onSettings ? (
+        <button
+          onClick={onSettings}
+          className="mobile-settings-exit"
+          aria-label="Exit settings"
+          type="button"
+        >
+          <X size={20} />
+        </button>
+      ) : (
+        <button
+          onClick={onSearch}
+          className="mobile-search-btn"
+          aria-label="Search"
+          type="button"
+        >
+          <Search size={20} />
+        </button>
+      )}
+    </header>
+  );
+}

package/bizar-dash/src/web/components/MobileLayout.tsx

@@ -0,0 +1,63 @@
+// src/web/components/MobileLayout.tsx — main mobile shell: header + drawer + content + bottom nav.
+import { useState } from 'react';
+import { MobileHeader } from './MobileHeader';
+import { MobileDrawer, type DrawerTab } from './MobileDrawer';
+import { MobileBottomNav, type MobileTab } from './MobileBottomNav';
+
+// Re-export DrawerTab so consumers only need to import from MobileLayout.
+export { type DrawerTab } from './MobileDrawer';
+
+type Props = {
+  children: React.ReactNode;
+  activeTab: string;
+  onTabChange: (id: string) => void;
+  tabs: MobileTab[];
+  fullTabs: DrawerTab[];
+  onExitSettings?: () => void;
+  onSearch?: () => void;
+};
+
+export function MobileLayout({
+  children,
+  activeTab,
+  onTabChange,
+  tabs,
+  fullTabs,
+  onExitSettings,
+  onSearch,
+}: Props) {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  return (
+    <div className="mobile-layout">
+      <MobileHeader
+        onMenuClick={() => setDrawerOpen(true)}
+        scrolled={scrolled}
+        activeTab={activeTab}
+        onSettings={activeTab === 'settings' ? onExitSettings : null}
+        onSearch={onSearch}
+      />
+
+      <MobileDrawer
+        open={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+        tabs={fullTabs}
+        activeTab={activeTab}
+        onTabChange={(id) => {
+          onTabChange(id);
+          setDrawerOpen(false);
+        }}
+      />
+
+      <main
+        className="mobile-content"
+        onScroll={(e) => setScrolled(e.currentTarget.scrollTop > 10)}
+      >
+        {children}
+      </main>
+
+      <MobileBottomNav tabs={tabs} activeTab={activeTab} onTabChange={onTabChange} />
+    </div>
+  );
+}

package/bizar-dash/src/web/components/TaskCard.tsx

@@ -0,0 +1,69 @@
+// src/components/TaskCard.tsx — mobile-friendly task card with expandable details.
+import { useState } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { Button } from './Button';
+import { api } from '../lib/api';
+import { cn } from '../lib/utils';
+import type { Task } from '../lib/types';
+
+interface Props {
+  task: Task;
+  workspaceId?: string;
+}
+
+export function TaskCard({ task, workspaceId }: Props) {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleTransition = async (to: string) => {
+    try {
+      await api.post(`/tasks/${encodeURIComponent(task.id)}/transition`, { to });
+    } catch {
+      // best-effort — parent will refresh
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!confirm('Delete this task?')) return;
+    try {
+      await api.del(`/tasks/${encodeURIComponent(task.id)}`);
+    } catch {
+      // best-effort — parent will refresh
+    }
+  };
+
+  return (
+    <div className={cn('task-card-mobile', `is-${task.status === 'queued' ? 'todo' : task.status}`)}>
+      <div className="task-card-mobile-head" onClick={() => setExpanded(!expanded)} role="button" tabIndex={0} onKeyDown={(e) => e.key === 'Enter' && setExpanded(!expanded)}>
+        <div className={cn('task-card-mobile-status', `is-${task.status === 'queued' ? 'todo' : task.status}`)} />
+        <div className="task-card-mobile-body">
+          <div className="task-card-mobile-title">{task.title}</div>
+          {task.priority && task.priority !== 'normal' && (
+            <span className={cn('task-priority-badge', `is-${task.priority}`)}>{task.priority}</span>
+          )}
+        </div>
+        <ChevronRight size={16} className={cn('task-chevron', expanded && 'is-rotated')} />
+      </div>
+      {expanded && (
+        <div className="task-card-mobile-details">
+          {task.description && <p className="task-card-mobile-desc">{task.description}</p>}
+          <div className="task-card-mobile-meta">
+            {task.assignee && <span>@{task.assignee}</span>}
+            {task.dueDate && <span>{new Date(task.dueDate).toLocaleDateString()}</span>}
+            {task.tags?.map((t) => (
+              <span key={t} className="tag">{t}</span>
+            ))}
+          </div>
+          <div className="task-card-mobile-actions">
+            {task.status !== 'doing' && (
+              <Button size="sm" onClick={() => handleTransition('doing')}>Start</Button>
+            )}
+            {task.status !== 'done' && (
+              <Button size="sm" onClick={() => handleTransition('done')}>Done</Button>
+            )}
+            <Button size="sm" variant="danger" onClick={handleDelete}>Delete</Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/bizar-dash/src/web/components/TaskCreateSheet.tsx

@@ -0,0 +1,76 @@
+// src/components/TaskCreateSheet.tsx — bottom sheet for creating tasks.
+import { useState } from 'react';
+import { Button } from './Button';
+import { api } from '../lib/api';
+import { cn } from '../lib/utils';
+
+interface Props {
+  workspaceId?: string;
+  onClose: () => void;
+  onCreated: () => void;
+}
+
+export function TaskCreateSheet({ workspaceId, onClose, onCreated }: Props) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [priority, setPriority] = useState<'low' | 'medium' | 'high'>('medium');
+  const [submitting, setSubmitting] = useState(false);
+
+  const submit = async () => {
+    if (!title.trim()) return;
+    setSubmitting(true);
+    try {
+      const payload: Record<string, unknown> = { title, description, priority };
+      if (workspaceId) payload.workspaceId = workspaceId;
+      await api.post('/tasks', payload);
+      onCreated();
+      onClose();
+    } catch {
+      // best-effort — parent handles refresh via onCreated
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="sheet-backdrop" onClick={onClose} />
+      <div className="sheet-bottom" role="dialog" aria-modal="true" aria-labelledby="sheet-title">
+        <div className="sheet-handle" />
+        <h2 id="sheet-title" className="sheet-title">New Task</h2>
+        <input
+          autoFocus
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Task title..."
+          className="sheet-input"
+        />
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Description (optional)..."
+          className="sheet-textarea"
+          rows={3}
+        />
+        <div className="sheet-priority">
+          {(['low', 'medium', 'high'] as const).map((p) => (
+            <button
+              key={p}
+              type="button"
+              className={cn('sheet-priority-btn', priority === p && 'is-active', `is-${p}`)}
+              onClick={() => setPriority(p)}
+            >
+              {p}
+            </button>
+          ))}
+        </div>
+        <div className="sheet-actions">
+          <Button onClick={onClose} disabled={submitting}>Cancel</Button>
+          <Button variant="primary" onClick={submit} disabled={submitting || !title.trim()}>
+            {submitting ? 'Creating...' : 'Create'}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}

package/bizar-dash/src/web/main.tsx

@@ -12,6 +12,7 @@ setLocale('en', en);
 // from index.html (e.g. when the auto-redirect to /m is bypassed).
 import './styles/main.css';
 import './styles/mobile.css';
+import './styles/mobile-layout.css';
 import './styles/glyphs.css';
 import './styles/minimax-usage.css';
 import './styles/skills.css';

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

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

@@ -0,0 +1,167 @@
+// 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 { cn } from '../lib/utils';
+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={cn('mobile-eval-tab', tab === 'runs' && 'is-active')}
+          onClick={() => setTab('runs')}
+        >
+          <ClipboardCheck size={12} aria-hidden />
+          Runs
+        </button>
+        <button
+          type="button"
+          className={cn('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={cn('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/MobileMarketplace.tsx

@@ -0,0 +1,106 @@
+// src/web/mobile/MobileMarketplace.tsx — v5.4 mobile plugin marketplace with search.
+import { useEffect, useState } from 'react';
+import { Store, Search } from 'lucide-react';
+import { api } from '../lib/api';
+import { MarketplacePluginCard, type MarketplacePlugin } from '../components/MarketplacePluginCard';
+
+type RegistryResponse = {
+  plugins: MarketplacePlugin[];
+};
+
+export function MobileMarketplace() {
+  const [registry, setRegistry] = useState<RegistryResponse | null>(null);
+  const [search, setSearch] = useState('');
+  const [installing, setInstalling] = useState<MarketplacePlugin | null>(null);
+  const [selected, setSelected] = useState<MarketplacePlugin | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.get<RegistryResponse>('/plugins/registry')
+      .then((r) => setRegistry(r))
+      .catch(() => {/* best-effort */})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const install = async (plugin: MarketplacePlugin) => {
+    setInstalling(plugin);
+    try {
+      await api.post('/plugins/install', { pluginId: plugin.id });
+      setInstalling(null);
+      setSelected(null);
+    } catch {
+      setInstalling(null);
+    }
+  };
+
+  const filtered = (registry?.plugins ?? []).filter(
+    (p) => !search || p.name.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  if (loading) {
+    return (
+      <div className="mobile-loading">
+        <p>Loading marketplace…</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mobile-marketplace">
+      <div className="mobile-marketplace-search">
+        <Search size={16} aria-hidden />
+        <input
+          type="search"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search plugins…"
+          aria-label="Search plugins"
+        />
+      </div>
+
+      <div className="mobile-marketplace-list">
+        {filtered.length === 0 ? (
+          <div className="mobile-empty">
+            <Store size={32} />
+            <p>No plugins{search ? ` match "${search}"` : ' in marketplace'}.</p>
+          </div>
+        ) : (
+          filtered.map((p) => (
+            <MarketplacePluginCard
+              key={p.id}
+              plugin={p}
+              onInstall={() => setSelected(p)}
+              onView={() => setSelected(p)}
+            />
+          ))
+        )}
+      </div>
+
+      {selected && (
+        <div className="mobile-plugin-install-dialog">
+          <div className="mobile-plugin-install-dialog-head">
+            <h3>{selected.name}</h3>
+            <p>{selected.description}</p>
+          </div>
+          <div className="mobile-plugin-install-dialog-actions">
+            <button
+              type="button"
+              className="mobile-btn mobile-btn-secondary"
+              onClick={() => setSelected(null)}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="mobile-btn mobile-btn-primary"
+              disabled={installing?.id === selected.id}
+              onClick={() => install(selected)}
+            >
+              {installing?.id === selected.id ? 'Installing…' : 'Install'}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}