@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,213 +0,0 @@
-// src/mobile/MobileOverview.tsx — mobile-optimized overview with vertical scrolling
-// stat cards, a submit hero, recent activity feed, and quick action shortcuts.
-import { useState } from 'react';
-import {
-  CheckSquare,
-  Clock,
-  Bot,
-  Coins,
-  Plus,
-  MessageSquare,
-  Stethoscope,
-  Send,
-} from 'lucide-react';
-import { api } from '../lib/api';
-import type { Snapshot } from '../lib/types';
-
-type Props = {
-  snapshot: Snapshot | null;
-  refreshSnapshot: () => Promise<void>;
-};
-
-type StatColor = 'blue' | 'purple' | 'green' | 'yellow';
-
-export function MobileOverview({ snapshot, refreshSnapshot }: Props) {
-  const [submitText, setSubmitText] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const tasks = snapshot?.tasks || [];
-  const schedules = snapshot?.schedules || [];
-  const agents = snapshot?.agents || [];
-  const activeAgents = agents.filter((a) => a.status === 'running' || a.status === 'active').length;
-
-  const handleSubmit = async () => {
-    const text = submitText.trim();
-    if (!text || submitting) return;
-    setSubmitting(true);
-    try {
-      await api.post('/chat', { message: text, agent: 'odin' });
-      setSubmitText('');
-      await refreshSnapshot().catch(() => undefined);
-    } catch {
-      // best-effort; the input stays so the user can retry
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const goToTasks = () => {
-    window.dispatchEvent(new CustomEvent('mobile-navigate', { detail: { tab: 'tasks' } }));
-  };
-  const goToChat = () => {
-    window.dispatchEvent(new CustomEvent('mobile-navigate', { detail: { tab: 'chat' } }));
-  };
-  const runDoctor = () => {
-    window.dispatchEvent(new CustomEvent('mobile-navigate', { detail: { view: 'doctor' } }));
-  };
-
-  return (
-    <div className="mobile-overview mobile-view">
-      <HeroCard
-        value={submitText}
-        onChange={setSubmitText}
-        onSubmit={handleSubmit}
-        submitting={submitting}
-      />
-
-      <div className="mobile-stats-stack">
-        <StatCard
-          icon={<CheckSquare size={20} />}
-          label="Tasks"
-          value={tasks.length}
-          subtext={`${tasks.filter((t) => t.status === 'doing').length} active`}
-          color="blue"
-        />
-        <StatCard
-          icon={<Clock size={20} />}
-          label="Schedules"
-          value={schedules.length}
-          color="purple"
-        />
-        <StatCard
-          icon={<Bot size={20} />}
-          label="Active Agents"
-          value={activeAgents}
-          color="green"
-        />
-        <StatCard
-          icon={<Coins size={20} />}
-          label="API Tokens"
-          value={'0'}
-          subtext="last 24h"
-          color="yellow"
-        />
-      </div>
-
-      <RecentActivityCard snapshot={snapshot} />
-
-      <QuickActionsCard onNewTask={goToTasks} onNewChat={goToChat} onRunDoctor={runDoctor} />
-    </div>
-  );
-}
-
-type HeroCardProps = {
-  value: string;
-  onChange: (next: string) => void;
-  onSubmit: () => void;
-  submitting: boolean;
-};
-
-function HeroCard({ value, onChange, onSubmit, submitting }: HeroCardProps) {
-  return (
-    <div className="mobile-hero">
-      <h1>What do you want to do?</h1>
-      <p>
-        Describe what you want — Odin will split it into tasks, create a plan, delegate to
-        background agents, and track progress in real time.
-      </p>
-      <textarea
-        placeholder="e.g. Implement user authentication with email + password..."
-        className="mobile-hero-input"
-        rows={3}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-      />
-      <button
-        type="button"
-        className="mobile-hero-submit"
-        onClick={onSubmit}
-        disabled={!value.trim() || submitting}
-      >
-        {submitting ? 'Submitting…' : (
-          <>
-            <Send size={14} /> Submit
-          </>
-        )}
-      </button>
-    </div>
-  );
-}
-
-type StatCardProps = {
-  icon: React.ReactNode;
-  label: string;
-  value: number | string;
-  subtext?: string;
-  color: StatColor;
-};
-
-function StatCard({ icon, label, value, subtext, color }: StatCardProps) {
-  return (
-    <div className={`mobile-stat-card is-${color}`}>
-      <div className="mobile-stat-icon">{icon}</div>
-      <div className="mobile-stat-body">
-        <div className="mobile-stat-label">{label}</div>
-        <div className="mobile-stat-value">{value}</div>
-        {subtext && <div className="mobile-stat-subtext">{subtext}</div>}
-      </div>
-    </div>
-  );
-}
-
-function RecentActivityCard({ snapshot }: { snapshot: Snapshot | null }) {
-  const items = (snapshot?.overview?.recentActivity || []).slice(0, 8);
-  return (
-    <div className="mobile-activity-card">
-      <h3>Recent Activity</h3>
-      {items.length === 0 ? (
-        <p className="mobile-empty">No recent activity</p>
-      ) : (
-        <ul className="mobile-activity-list">
-          {items.map((a, i) => {
-            const ts = typeof a.ts === 'string' ? a.ts : '';
-            const text = (a as Record<string, unknown>).message
-              || (a as Record<string, unknown>).text
-              || (a as Record<string, unknown>).title
-              || a.kind
-              || '';
-            return (
-              <li key={`${ts}-${i}`} className="mobile-activity-item">
-                <span className="mobile-activity-time">
-                  {ts ? new Date(ts).toLocaleTimeString() : ''}
-                </span>
-                <span className="mobile-activity-text">{String(text)}</span>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </div>
-  );
-}
-
-type QuickActionsCardProps = {
-  onNewTask: () => void;
-  onNewChat: () => void;
-  onRunDoctor: () => void;
-};
-
-function QuickActionsCard({ onNewTask, onNewChat, onRunDoctor }: QuickActionsCardProps) {
-  return (
-    <div className="mobile-quick-actions">
-      <button type="button" className="mobile-quick-action" onClick={onNewTask}>
-        <Plus size={16} /> New task
-      </button>
-      <button type="button" className="mobile-quick-action" onClick={onNewChat}>
-        <MessageSquare size={16} /> New chat
-      </button>
-      <button type="button" className="mobile-quick-action" onClick={onRunDoctor}>
-        <Stethoscope size={16} /> Run doctor
-      </button>
-    </div>
-  );
-}

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

@@ -1,251 +0,0 @@
-// src/web/mobile/MobileSettings.tsx — v5.4 mobile settings with full desktop parity.
-// All 9 sections in an accordion layout with search.
-import { useState } from 'react';
-import {
-  Settings2, Brain, KeyRound, Cpu, RefreshCw, Globe, Info, ChevronRight,
-} from 'lucide-react';
-import { cx } from '../ui/utils/cx';
-import type { Settings, Snapshot } from '../lib/types';
-
-// Sub-section components — each renders its section content inline.
-import { GeneralSection } from '../views/settings/GeneralSection';
-import { EnvVarsSection } from '../views/settings/EnvVarsSection';
-import { MemorySection } from '../views/settings/MemorySection';
-import { SystemLlmSection } from '../views/settings/SystemLlmSection';
-import { UpdatesSection } from '../views/settings/UpdatesSection';
-import { HeadroomSection } from '../views/settings/HeadroomSection';
-import { TailscaleSettings } from '../components/TailscaleSettings';
-import { ActivitySection } from '../views/settings/ActivitySection';
-
-// Lazy-load heavy sections that pull in large dependencies.
-import React from 'react';
-
-type Props = {
-  settings: Settings;
-  /** Called when the user changes any top-level setting */
-  onSettingsChange?: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
-  /** Debounced auto-save to API (key, value) */
-  autoSave?: (key: keyof Settings, value: Settings[keyof Settings]) => void;
-  /** Optional snapshot for counts / agent list */
-  snapshot?: Snapshot | null;
-  /** v5.3 compatibility — called after settings are saved (MobileApp.tsx passes refreshSnapshot) */
-  onRefresh?: () => Promise<void>;
-};
-
-// ─── Section definitions ─────────────────────────────────────────────────────
-
-function GeneralSettings({ settings, onSettingsChange, autoSave }: Props) {
-  const patchTop = <K extends keyof Settings>(key: K, value: Settings[K]) => {
-    onSettingsChange?.(key, value);
-    autoSave?.(key, value);
-  };
-  const patchUi = (patch: Partial<Settings['ui']>) => {
-    onSettingsChange?.('ui', { ...settings.ui, ...patch });
-    autoSave?.('ui', { ...settings.ui, ...patch });
-  };
-  return (
-    <GeneralSection
-      settings={settings}
-      patchUi={patchUi}
-      patchTop={patchTop}
-      autoSave={autoSave}
-    />
-  );
-}
-
-function ProvidersSettings({ settings, onSettingsChange, autoSave }: Props) {
-  // Providers are managed server-side; show a link to the desktop providers view.
-  // Mobile can't add/edit providers without more complex auth flow.
-  void settings; void onSettingsChange; void autoSave;
-  return (
-    <div style={{ fontSize: 13, color: 'var(--text-dim)', padding: '8px 0' }}>
-      <p style={{ marginBottom: 8 }}>
-        Provider management is available on desktop.
-      </p>
-      <a href="/?desktop=1#settings-providers" className="mobile-btn mobile-btn-secondary" style={{ display: 'inline-block', fontSize: 12, padding: '6px 12px' }}>
-        Open desktop to manage providers
-      </a>
-    </div>
-  );
-}
-
-function EnvVarsSettings() {
-  return <EnvVarsSection />;
-}
-
-function MemorySettings() {
-  return <MemorySection />;
-}
-
-function SystemLlmSettings({ settings, onSettingsChange, autoSave }: Props) {
-  const patchTop = <K extends keyof Settings>(key: K, value: Settings[K]) => {
-    onSettingsChange?.(key, value);
-    autoSave?.(key, value);
-  };
-  return <SystemLlmSection settings={settings} patchTop={patchTop} />;
-}
-
-function UpdatesSettings() {
-  return <UpdatesSection />;
-}
-
-function HeadroomSettingsSection({ settings }: { settings: Settings }) {
-  const [localSettings, setLocalSettings] = useState(settings);
-  const [dirty, setDirty] = useState(false);
-  return (
-    <HeadroomSection
-      settings={localSettings}
-      setSettings={setLocalSettings as React.Dispatch<React.SetStateAction<Settings>>}
-      setDirty={setDirty}
-    />
-  );
-}
-
-function TailscaleSettingsMobile() {
-  return <TailscaleSettings />;
-}
-
-function AboutSection({ settings }: { settings: Settings }) {
-  const about = settings.about || { version: '—', homepage: 'https://github.com/DrB0rk/BizarHarness', license: 'MIT' };
-  return <ActivitySection about={about} />;
-}
-
-// ─── Main component ──────────────────────────────────────────────────────────
-
-export function MobileSettings({ settings, onSettingsChange, autoSave, snapshot }: Props) {
-  const [search, setSearch] = useState('');
-  const [expandedSection, setExpandedSection] = useState<string | null>(null);
-
-  const sections = [
-    {
-      id: 'general',
-      title: 'General',
-      icon: Settings2,
-      description: 'Theme, accent, layout',
-      component: <GeneralSettings settings={settings} onSettingsChange={onSettingsChange} autoSave={autoSave} />,
-    },
-    {
-      id: 'providers',
-      title: 'AI Providers',
-      icon: Brain,
-      description: `${snapshot?.providers?.length ?? 0} configured`,
-      component: <ProvidersSettings settings={settings} onSettingsChange={onSettingsChange} autoSave={autoSave} />,
-    },
-    {
-      id: 'env-vars',
-      title: 'Environment Variables',
-      icon: KeyRound,
-      description: 'API keys, secrets',
-      component: <EnvVarsSettings />,
-    },
-    {
-      id: 'memory',
-      title: 'Memory Vault',
-      icon: Brain,
-      description: 'Git remote, LightRAG config',
-      component: <MemorySettings />,
-    },
-    {
-      id: 'system-llm',
-      title: 'System LLM',
-      icon: Cpu,
-      description: settings.systemLlm?.model || 'not set',
-      component: <SystemLlmSettings settings={settings} onSettingsChange={onSettingsChange} autoSave={autoSave} />,
-    },
-    {
-      id: 'updates',
-      title: 'Updates',
-      icon: RefreshCw,
-      description: 'Check for updates',
-      component: <UpdatesSettings />,
-    },
-    {
-      id: 'headroom',
-      title: 'Headroom',
-      icon: Cpu,
-      description: settings.headroom?.enabled ? 'Enabled' : 'Disabled',
-      component: <HeadroomSettingsSection settings={settings} />,
-    },
-    {
-      id: 'tailscale',
-      title: 'Tailscale',
-      icon: Globe,
-      description: 'Tailscale serve & auth',
-      component: <TailscaleSettingsMobile />,
-    },
-    {
-      id: 'about',
-      title: 'About',
-      icon: Info,
-      description: `Bizar v${settings.about?.version || '—'}`,
-      component: <AboutSection settings={settings} />,
-    },
-  ];
-
-  const filtered = sections.filter(
-    (s) =>
-      !search ||
-      s.title.toLowerCase().includes(search.toLowerCase()) ||
-      s.description.toLowerCase().includes(search.toLowerCase()),
-  );
-
-  return (
-    <div className="mobile-settings">
-      <div className="mobile-settings-search">
-        <SearchIcon />
-        <input
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder="Search settings..."
-          aria-label="Search settings"
-        />
-      </div>
-
-      <div className="mobile-settings-list">
-        {filtered.map((s) => {
-          const Icon = s.icon;
-          const isExpanded = expandedSection === s.id;
-          return (
-            <div key={s.id} className={cx('mobile-settings-item', isExpanded && 'is-expanded')}>
-              <button
-                className="mobile-settings-item-head"
-                onClick={() => setExpandedSection(isExpanded ? null : s.id)}
-                aria-expanded={isExpanded}
-                aria-controls={`mobile-settings-body-${s.id}`}
-              >
-                <div className="mobile-settings-item-icon">
-                  <Icon size={18} />
-                </div>
-                <div className="mobile-settings-item-text">
-                  <div className="mobile-settings-item-title">{s.title}</div>
-                  <div className="mobile-settings-item-desc">{s.description}</div>
-                </div>
-                <ChevronRight
-                  size={16}
-                  className={cx('mobile-settings-item-chevron', isExpanded && 'is-rotated')}
-                />
-              </button>
-              {isExpanded && (
-                <div id={`mobile-settings-body-${s.id}`} className="mobile-settings-item-body">
-                  {s.component}
-                </div>
-              )}
-            </div>
-          );
-        })}
-        {filtered.length === 0 && (
-          <div className="mobile-settings-empty">No settings match "{search}"</div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function SearchIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="11" cy="11" r="8" />
-      <path d="m21 21-4.35-4.35" />
-    </svg>
-  );
-}

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

@@ -1,94 +0,0 @@
-// src/mobile/MobileTasks.tsx — filter-tab task list with search and FAB create sheet.
-import { useState } from 'react';
-import { Search, Plus } from 'lucide-react';
-import { cx } from '../ui/utils/cx';
-import { TaskCard } from '../components/TaskCard';
-import { TaskCreateSheet } from '../components/TaskCreateSheet';
-import type { Snapshot } from '../lib/types';
-
-type Filter = 'all' | 'todo' | 'doing' | 'done' | 'failed';
-
-interface Props {
-  snapshot: Snapshot;
-  refreshSnapshot: () => Promise<void>;
-  userId?: string;
-  workspaceId?: string;
-}
-
-export function MobileTasks({ snapshot, refreshSnapshot, userId, workspaceId }: Props) {
-  const [filter, setFilter] = useState<Filter>('all');
-  const [showCreate, setShowCreate] = useState(false);
-  const [search, setSearch] = useState('');
-
-  const tasks = (snapshot?.tasks || []).filter((t) => {
-    if (filter === 'todo' && t.status !== 'queued' && t.status !== 'todo') return false;
-    if (filter === 'doing' && t.status !== 'doing') return false;
-    if (filter === 'done' && t.status !== 'done') return false;
-    if (filter === 'failed' && t.status !== 'failed' && t.status !== 'blocked') return false;
-    if (search && !(t.title || '').toLowerCase().includes(search.toLowerCase())) return false;
-    return true;
-  });
-
-  const counts: Record<Filter, number> = {
-    all: snapshot?.tasks?.length || 0,
-    todo: snapshot?.tasks?.filter((t) => t.status === 'queued' || t.status === 'todo').length || 0,
-    doing: snapshot?.tasks?.filter((t) => t.status === 'doing').length || 0,
-    done: snapshot?.tasks?.filter((t) => t.status === 'done').length || 0,
-    failed: snapshot?.tasks?.filter((t) => t.status === 'failed' || t.status === 'blocked').length || 0,
-  };
-
-  return (
-    <div className="mobile-tasks">
-      <div className="mobile-tasks-search">
-        <Search size={16} className="mobile-tasks-search-icon" />
-        <input
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder="Search tasks..."
-          className="mobile-tasks-search-input"
-        />
-      </div>
-
-      <div className="mobile-tasks-tabs">
-        {(['all', 'todo', 'doing', 'done', 'failed'] as Filter[]).map((f) => (
-          <button
-            key={f}
-            type="button"
-            className={cx('mobile-tasks-tab', filter === f && 'is-active')}
-            onClick={() => setFilter(f)}
-          >
-            {f.charAt(0).toUpperCase() + f.slice(1)}
-            <span className="mobile-tasks-count">{counts[f]}</span>
-          </button>
-        ))}
-      </div>
-
-      <div className="mobile-tasks-list">
-        {tasks.length === 0 ? (
-          <p className="mobile-empty">No tasks. Create one to get started.</p>
-        ) : (
-          tasks.map((t) => (
-            <TaskCard key={t.id} task={t} workspaceId={workspaceId} />
-          ))
-        )}
-      </div>
-
-      <button
-        type="button"
-        className="mobile-fab"
-        onClick={() => setShowCreate(true)}
-        aria-label="Create new task"
-      >
-        <Plus size={24} />
-      </button>
-
-      {showCreate && (
-        <TaskCreateSheet
-          workspaceId={workspaceId}
-          onClose={() => setShowCreate(false)}
-          onCreated={refreshSnapshot}
-        />
-      )}
-    </div>
-  );
-}

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

@@ -1,115 +0,0 @@
-// src/mobile/MobileTopbar.tsx — compact top bar with search, notifications, project selector.
-import { useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-import type { Snapshot } from '../lib/types';
-import { api } from '../lib/api';
-import { MobileNotifications } from './views/MobileNotifications';
-import { MobileBottomSheet } from './components/MobileBottomSheet';
-
-type Props = {
-  activeTab: string;
-  snapshot: Snapshot | null;
-  onSearch: () => void;
-  onNavigate: (type: string, id: string, meta?: Record<string, unknown> | null) => void;
-};
-
-const TAB_LABELS: Record<string, string> = {
-  activity: 'Activity',
-  chat: 'Chat',
-  tasks: 'Tasks',
-  settings: 'Settings',
-  more: 'More',
-  plans: 'Plans',
-  agents: 'Agents',
-  skills: 'Skills',
-  mods: 'Mods',
-  schedules: 'Schedules',
-  history: 'History',
-  config: 'Config',
-  'plan-detail': 'Plan',
-  'agent-detail': 'Agent',
-  'task-detail': 'Task',
-};
-
-export function MobileTopbar({ activeTab, snapshot, onSearch, onNavigate }: Props) {
-  const [projectSheetOpen, setProjectSheetOpen] = useState(false);
-
-  const handleProjectSelect = async (projectId: string) => {
-    try {
-      await api.post(`/projects/${encodeURIComponent(projectId)}/activate`);
-      setProjectSheetOpen(false);
-      // Force reload by navigating to activity
-      window.location.reload();
-    } catch {
-      // best-effort
-    }
-  };
-
-  return (
-    <header className="mobile-topbar">
-      <div className="mobile-topbar-left">
-        <span className="mobile-logo">ᛒ</span>
-        {snapshot?.activeProject && (
-          <button
-            type="button"
-            className="mobile-project-btn"
-            onClick={() => setProjectSheetOpen(true)}
-            aria-label="Select project"
-          >
-            <span className="mobile-project-name">{snapshot.activeProject.name}</span>
-            <ChevronDown size={14} />
-          </button>
-        )}
-        <span className="mobile-title">{TAB_LABELS[activeTab] || 'Bizar'}</span>
-      </div>
-
-      <div className="mobile-topbar-right">
-        <button
-          type="button"
-          className="mobile-icon-btn"
-          onClick={onSearch}
-          aria-label="Search"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <circle cx="11" cy="11" r="8" />
-            <path d="m21 21-4.35-4.35" />
-          </svg>
-        </button>
-
-        <MobileNotifications
-          onSelect={(notification) => {
-            onNavigate('notification', notification.link || '', notification.meta ?? null);
-          }}
-        />
-
-        {snapshot?.activeProject && (
-          <MobileBottomSheet
-            open={projectSheetOpen}
-            onClose={() => setProjectSheetOpen(false)}
-            title="Projects"
-          >
-            <div className="mobile-project-list">
-              {(snapshot.projects || []).map((p) => (
-                <button
-                  key={p.id}
-                  type="button"
-                  className={`mobile-project-item ${p.id === snapshot.activeProject?.id ? 'active' : ''}`}
-                  onClick={() => handleProjectSelect(p.id)}
-                >
-                  <div className="mobile-project-status" data-status={p.status} />
-                  <div className="mobile-project-info">
-                    <span className="mobile-project-item-name">{p.name}</span>
-                    <span className="mobile-project-item-path">{p.path}</span>
-                  </div>
-                  {p.id === snapshot.activeProject?.id && (
-                    <span className="mobile-active-badge">active</span>
-                  )}
-                </button>
-              ))}
-            </div>
-          </MobileBottomSheet>
-        )}
-      </div>
-    </header>
-  );
-}