@polderlabs/bizar 5.3.1 → 5.4.1

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

@@ -13,7 +13,7 @@ import type { Notification, Settings, Snapshot, WsMessage } from './lib/types';
 import { applyTheme, applyThemeTokens } from './lib/types';
 import { Ws } from './lib/ws';
 import { MobileBottomNav, type MobileTab } from './mobile/MobileBottomNav';
-import { MobileTopbar } from './mobile/MobileTopbar';
+import { MobileLayout, type DrawerTab } from './components/MobileLayout';
 import { MobileActivity } from './mobile/views/MobileActivity';
 import { MobileAgents } from './mobile/views/MobileAgents';
 import { MobileConfig } from './mobile/views/MobileConfig';
@@ -75,6 +75,7 @@ export function MobileApp() {
   const [activeTab, setActiveTab] = useState<MainTabId>('activity');
   const [stack, setStack] = useState<MobileView[]>([]);
   const [searchOpen, setSearchOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
   const [pendingChatTaskId, setPendingChatTaskId] = useState<string | null>(null);
   const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
   const [settings, setSettings] = useState<Settings | null>(null);
@@ -390,27 +391,24 @@ export function MobileApp() {
   }
 
   return (
-    <div className="mobile-app">
-      <MobileTopbar
-        activeTab={currentView.id}
-        snapshot={snapshot}
+    <>
+      <MobileLayout
+        activeTab={activeTab}
+        onTabChange={handleTabChange}
+        tabs={MAIN_TABS}
+        fullTabs={MAIN_TABS as DrawerTab[]}
+        onExitSettings={() => goToTab('activity')}
         onSearch={() => setSearchOpen(true)}
-        onNavigate={handleNavigate}
-      />
-
-      <main className="mobile-content">{renderView()}</main>
-
-      {stack.length === 0 && (
-        <MobileBottomNav tabs={MAIN_TABS} activeTab={activeTab} onChange={handleTabChange} />
-      )}
-
-      {stack.length > 0 && (
-        <button type="button" className="mobile-back-btn" onClick={popView} aria-label="Go back">
-          ← Back
-        </button>
-      )}
+      >
+        {stack.length > 0 && (
+          <button type="button" className="mobile-back-btn" onClick={popView} aria-label="Go back">
+            ← Back
+          </button>
+        )}
+        {renderView()}
+      </MobileLayout>
 
       <MobileSearchModal open={searchOpen} onClose={() => setSearchOpen(false)} onNavigate={handleNavigate} />
-    </div>
+    </>
   );
 }

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

@@ -0,0 +1,38 @@
+// src/web/components/MobileBottomNav.tsx — iOS/Android-style bottom tab bar.
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export type MobileTab = {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+type Props = {
+  tabs: MobileTab[];
+  activeTab: string;
+  onTabChange: (id: string) => void;
+};
+
+export function MobileBottomNav({ tabs, activeTab, onTabChange }: Props) {
+  return (
+    <nav className="mobile-bottom-nav" role="tablist" aria-label="Primary navigation">
+      {tabs.map((t) => {
+        const Icon = t.icon;
+        return (
+          <button
+            key={t.id}
+            role="tab"
+            aria-selected={activeTab === t.id}
+            className={cn('mobile-nav-item', activeTab === t.id && 'is-active')}
+            onClick={() => onTabChange(t.id)}
+            type="button"
+          >
+            <Icon size={20} />
+            <span className="mobile-nav-label">{t.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

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

@@ -0,0 +1,68 @@
+// src/web/components/MobileDrawer.tsx — slide-in drawer for secondary navigation.
+import { X } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export type DrawerTab = {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  tabs: DrawerTab[];
+  activeTab: string;
+  onTabChange: (id: string) => void;
+};
+
+export function MobileDrawer({ open, onClose, tabs, activeTab, onTabChange }: Props) {
+  return (
+    <>
+      {open && (
+        <div
+          className="mobile-drawer-overlay"
+          onClick={onClose}
+          aria-hidden="true"
+        />
+      )}
+      <aside
+        className={cn('mobile-drawer', open && 'is-open')}
+        role="dialog"
+        aria-modal="true"
+        aria-label="All views"
+      >
+        <div className="mobile-drawer-head">
+          <h2>All Views</h2>
+          <button
+            onClick={onClose}
+            aria-label="Close menu"
+            type="button"
+            className="mobile-drawer-close"
+          >
+            <X size={20} />
+          </button>
+        </div>
+        <div className="mobile-drawer-grid">
+          {tabs.map((t) => {
+            const Icon = t.icon;
+            return (
+              <button
+                key={t.id}
+                role="tab"
+                aria-selected={activeTab === t.id}
+                className={cn('mobile-drawer-item', activeTab === t.id && 'is-active')}
+                onClick={() => onTabChange(t.id)}
+                type="button"
+              >
+                <Icon size={22} />
+                <span>{t.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </aside>
+    </>
+  );
+}

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>
+  );
+}