@polderlabs/bizar 5.3.1 → 5.4.0

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

@@ -1,196 +1,251 @@
-// src/web/mobile/MobileSettings.tsx — minimal mobile settings (no companion app, no agent config).
-// Drops: Companion App (qrcode.react chunk), Tailscale Serve, Agent Behavior, Notifications toggles.
-import { useEffect, useState } from 'react';
-import { Sun, Moon, Monitor } from 'lucide-react';
-import { api } from '../lib/api';
-import { applyTheme, applyThemeTokens, type Settings, type Snapshot, type ThemeName } from '../lib/types';
+// 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 { cn } from '../lib/utils';
+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;
-  snapshot: Snapshot | null;
-  onRefresh: () => Promise<void>;
+  /** 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>;
 };
 
-const THEMES: { id: ThemeName; label: string; Icon: typeof Sun }[] = [
-  { id: 'dark', label: 'Dark', Icon: Moon },
-  { id: 'light', label: 'Light', Icon: Sun },
-  { id: 'system', label: 'System', Icon: Monitor },
-];
-
-const PRESET_ACCENTS = [
-  { name: 'Purple', accent: '#8b5cf6' },
-  { name: 'Blue', accent: '#3b82f6' },
-  { name: 'Green', accent: '#10b981' },
-  { name: 'Orange', accent: '#f97316' },
-  { name: 'Red', accent: '#ef4444' },
-  { name: 'Pink', accent: '#ec4899' },
-  { name: 'Cyan', accent: '#06b6d4' },
-  { name: 'Mono', accent: '#6b7280' },
-];
-
-export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props) {
-  const [settings, setSettings] = useState<Settings>(initial);
-  const [dirty, setDirty] = useState(false);
-  const [saving, setSaving] = useState(false);
-
-  useEffect(() => {
-    setSettings(initial);
-    setDirty(false);
-    if (initial.theme) applyThemeTokens(initial.theme);
-  }, [initial]);
-
-  const patchTheme = (patch: Partial<Settings['theme']>) => {
-    setSettings((cur) => {
-      const next = { ...cur, theme: { ...cur.theme, ...patch } };
-      applyTheme(next.theme);
-      applyThemeTokens(next.theme);
-      return next;
-    });
-    setDirty(true);
+// ─── 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}
+    />
+  );
+}
 
-  const onSave = async () => {
-    setSaving(true);
-    try {
-      const r = await api.put<{ data: Settings }>('/settings', settings);
-      setSettings(r.data);
-      setDirty(false);
-      applyTheme(r.data.theme);
-      applyThemeTokens(r.data.theme);
-      onRefresh();
-    } catch {
-      // best-effort
-    } finally {
-      setSaving(false);
-    }
+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 (
-    <div className="mobile-view">
-      {dirty && (
-        <div className="mobile-settings-save-bar">
-          <span>Unsaved changes</span>
-          <button type="button" className="mobile-btn" disabled={saving} onClick={onSave}>
-            {saving ? 'Saving…' : 'Save'}
-          </button>
-        </div>
-      )}
-
-      {/* Theme */}
-      <section className="mobile-section">
-        <h3 className="mobile-section-title">Appearance</h3>
-        <div className="mobile-card">
-          <div className="mobile-setting-row">
-            <span className="mobile-setting-label">Theme</span>
-            <div className="mobile-theme-btns">
-              {THEMES.map(({ id, label, Icon }) => (
-                <button
-                  key={id}
-                  type="button"
-                  className={`mobile-theme-btn ${settings.theme.mode === id ? 'active' : ''}`}
-                  onClick={() => patchTheme({ mode: id })}
-                >
-                  <Icon size={14} /> {label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="mobile-setting-row" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
-            <span className="mobile-setting-label">Accent color</span>
-            <div className="mobile-accent-swatches">
-              {PRESET_ACCENTS.map((p) => (
-                <button
-                  key={p.name}
-                  type="button"
-                  className={`mobile-accent-swatch ${settings.theme.accent === p.accent ? 'active' : ''}`}
-                  style={{ background: p.accent }}
-                  onClick={() => patchTheme({ accent: p.accent })}
-                  title={p.name}
+    <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={cn('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={cn('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>
-          </div>
-
-          <div className="mobile-setting-row" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
-            <span className="mobile-setting-label">Font size: {settings.theme.fontSize}px</span>
-            <input
-              type="range"
-              min={12}
-              max={20}
-              value={settings.theme.fontSize}
-              onChange={(e) => patchTheme({ fontSize: Number(e.target.value) })}
-              style={{ width: '100%' }}
-            />
-          </div>
-
-          <div className="mobile-setting-row">
-            <span className="mobile-setting-label">Compact mode</span>
-            <label className="mobile-toggle">
-              <input
-                type="checkbox"
-                checked={settings.theme.compactMode}
-                onChange={(e) => patchTheme({ compactMode: e.target.checked })}
-              />
-              <span className="mobile-toggle-slider" />
-            </label>
-          </div>
-          <div className="mobile-setting-row">
-            <span className="mobile-setting-label">Animations</span>
-            <label className="mobile-toggle">
-              <input
-                type="checkbox"
-                checked={settings.theme.animations}
-                onChange={(e) => patchTheme({ animations: e.target.checked })}
-              />
-              <span className="mobile-toggle-slider" />
-            </label>
-          </div>
-        </div>
-      </section>
-
-      {/* Chat defaults */}
-      <section className="mobile-section">
-        <h3 className="mobile-section-title">Chat Defaults</h3>
-        <div className="mobile-card">
-          <label className="mobile-field-label">Default Agent</label>
-          <select
-            className="mobile-input"
-            value={settings.defaultAgent || 'odin'}
-            onChange={(e) => setSettings((cur) => ({ ...cur, defaultAgent: e.target.value }))}
-          >
-            {(snapshot?.agents || []).map((a) => (
-              <option key={a.name} value={a.name}>@{a.name}</option>
-            ))}
-          </select>
-        </div>
-      </section>
-
-      {/* About */}
-      <section className="mobile-section">
-        <h3 className="mobile-section-title">About</h3>
-        <div className="mobile-card">
-          <div className="mobile-setting-row">
-            <span className="mobile-setting-label">Version</span>
-            <span className="mobile-setting-value mono">{settings.about?.version || '—'}</span>
-          </div>
-          <div className="mobile-setting-row">
-            <span className="mobile-setting-label">Agents</span>
-            <span className="mobile-setting-value">{snapshot?.agents?.length || 0}</span>
-          </div>
-          <div className="mobile-setting-row">
-            <span className="mobile-setting-label">Tasks</span>
-            <span className="mobile-setting-value">{snapshot?.tasks?.length || 0}</span>
-          </div>
-        </div>
-      </section>
-
-      {/* Switch to desktop */}
-      <div className="mobile-view-footer">
-        <a href="/?desktop=1" className="mobile-btn mobile-btn-secondary">
-          Switch to Desktop
-        </a>
+          );
+        })}
+        {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

@@ -0,0 +1,94 @@
+// 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 { cn } from '../lib/utils';
+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={cn('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.tsx

@@ -3,6 +3,7 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { MobileApp } from './MobileApp';
 import './styles/mobile.css';
+import './styles/mobile-layout.css';
 
 const root = document.getElementById('root');
 if (!root) throw new Error('Root element #root not found');