@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/mobile/views/MobileSearchModal.tsx

@@ -1,172 +0,0 @@
-// src/mobile/views/MobileSearchModal.tsx — fullscreen search modal for mobile.
-import { useEffect, useRef, useState } from 'react';
-import { Search, X, FileText, Bot, CheckSquare, Folder, Sliders } from 'lucide-react';
-import { api } from '../../lib/api';
-import type { SearchResult } from '../../lib/types';
-import { MobileModal } from '../components/MobileModal';
-
-type Props = {
-  open: boolean;
-  onClose: () => void;
-  onNavigate: (type: string, id: string) => void;
-};
-
-const SCOPES = ['all', 'tasks', 'agents', 'artifacts', 'projects', 'settings'] as const;
-type Scope = typeof SCOPES[number];
-
-const SCOPE_ICONS: Record<string, typeof FileText> = {
-  tasks: CheckSquare,
-  agents: Bot,
-  plans: FileText,
-  projects: Folder,
-  settings: Sliders,
-};
-
-export function MobileSearchModal({ open, onClose, onNavigate }: Props) {
-  const [query, setQuery] = useState('');
-  const [scope, setScope] = useState<Scope>('all');
-  const [results, setResults] = useState<SearchResult[]>([]);
-  const [loading, setLoading] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (open) {
-      setQuery('');
-      setResults([]);
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [open]);
-
-  useEffect(() => {
-    if (!query.trim()) {
-      setResults([]);
-      return;
-    }
-    const timer = setTimeout(async () => {
-      setLoading(true);
-      try {
-        const data = await api.get<{ results: SearchResult[] }>(
-          `/search?q=${encodeURIComponent(query)}&scope=${scope}`,
-        );
-        setResults(data.results || []);
-      } catch {
-        setResults([]);
-      } finally {
-        setLoading(false);
-      }
-    }, 250);
-    return () => clearTimeout(timer);
-  }, [query, scope]);
-
-  const handleResultClick = (r: SearchResult) => {
-    const item = r.item as Record<string, string>;
-    const id = item.id || item.slug || item.name || '';
-    onNavigate(r.type, id);
-    onClose();
-  };
-
-  const grouped = results.reduce<Record<string, SearchResult[]>>((acc, r) => {
-    if (!acc[r.type]) acc[r.type] = [];
-    acc[r.type].push(r);
-    return acc;
-  }, {});
-
-  return (
-    <MobileModal open={open} onClose={onClose} title="Search">
-      <div className="mobile-search-container">
-        {/* Search input */}
-        <div className="mobile-search-input-row">
-          <Search size={16} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
-          <input
-            ref={inputRef}
-            className="mobile-search-field"
-            type="text"
-            placeholder="Search…"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            enterKeyHint="search"
-            onKeyDown={(e) => {
-              if (e.key === 'Escape') onClose();
-              if (e.key === 'Enter' && results.length > 0) {
-                handleResultClick(results[0]);
-              }
-            }}
-          />
-          {query && (
-            <button
-              type="button"
-              className="mobile-icon-btn"
-              onClick={() => setQuery('')}
-              aria-label="Clear"
-            >
-              <X size={16} />
-            </button>
-          )}
-        </div>
-
-        {/* Scope chips */}
-        <div className="mobile-search-scopes">
-          {SCOPES.map((s) => (
-            <button
-              key={s}
-              type="button"
-              className={`mobile-scope-chip ${scope === s ? 'active' : ''}`}
-              onClick={() => setScope(s)}
-            >
-              {s === 'all' ? 'All' : s.charAt(0).toUpperCase() + s.slice(1)}
-            </button>
-          ))}
-        </div>
-
-        {/* Results */}
-        <div className="mobile-search-results">
-          {loading && <div className="mobile-search-loading">Searching…</div>}
-
-          {!loading && query && results.length === 0 && (
-            <div className="mobile-empty">
-              <Search size={32} />
-              <p>No results found</p>
-            </div>
-          )}
-
-          {!loading && !query && (
-            <div className="mobile-empty">
-              <p>Type to search across tasks, agents, plans, and more.</p>
-            </div>
-          )}
-
-          {Object.entries(grouped).map(([type, items]) => {
-            const Icon = SCOPE_ICONS[type] || FileText;
-            return (
-              <div key={type} className="mobile-search-group">
-                <h4 className="mobile-search-group-title">
-                  <Icon size={12} /> {type.charAt(0).toUpperCase() + type.slice(1)} ({items.length})
-                </h4>
-                {items.map((r, i) => {
-                  const item = r.item as Record<string, string>;
-                  return (
-                    <button
-                      key={i}
-                      type="button"
-                      className="mobile-search-result-item"
-                      onClick={() => handleResultClick(r)}
-                    >
-                      <span className="mobile-search-result-title">
-                        {item.title || item.name || item.slug || '(unnamed)'}
-                      </span>
-                      {item.description && (
-                        <span className="mobile-search-result-meta">
-                          {item.description.slice(0, 80)}
-                        </span>
-                      )}
-                    </button>
-                  );
-                })}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </MobileModal>
-  );
-}

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

@@ -1,363 +0,0 @@
-// src/mobile/views/MobileSettings.tsx — mobile settings with full desktop parity.
-import { useEffect, useState } from 'react';
-import { Smartphone, Sun, Moon, Monitor, Save } from 'lucide-react';
-import { api } from '../../lib/api';
-import { applyTheme, applyThemeTokens, type Settings, type Snapshot, type ThemeName } from '../../lib/types';
-import { QrCodePanel } from './QrCodePanel';
-
-type Props = {
-  settings: Settings;
-  snapshot: Snapshot | null;
-  onRefresh: () => Promise<void>;
-};
-
-type PairSession = { token: string; qrPayload: string; publicUrl: string; expiresAt: number };
-
-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);
-  const [pair, setPair] = useState<PairSession | null>(null);
-  const [pairing, setPairing] = 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);
-  };
-
-  const patchTop = <K extends keyof Settings>(key: K, value: Settings[K]) => {
-    setSettings((cur) => ({ ...cur, [key]: value }));
-    setDirty(true);
-  };
-
-  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);
-    }
-  };
-
-  const startPair = async () => {
-    setPairing(true);
-    try {
-      const res = await api.post<PairSession>('/pair/start');
-      setPair(res);
-    } catch {
-      // best-effort
-    } finally {
-      setPairing(false);
-    }
-  };
-
-  // remaining/expired are now managed inside QrCodePanel to keep
-  // qrcode.react out of the main mobile bundle chunk.
-
-  return (
-    <div className="mobile-view">
-      {/* Save bar */}
-      {dirty && (
-        <div className="mobile-settings-save-bar">
-          <span>Unsaved changes</span>
-          <button type="button" className="mobile-btn" disabled={saving} onClick={onSave}>
-            <Save size={14} /> {saving ? 'Saving…' : 'Save'}
-          </button>
-        </div>
-      )}
-
-      {/* Theme */}
-      <section className="mobile-section">
-        <h3 className="mobile-section-title">Appearance</h3>
-        <div className="mobile-card">
-          {/* Theme mode */}
-          <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>
-
-          {/* Accent swatches */}
-          <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}
-                />
-              ))}
-            </div>
-          </div>
-
-          {/* Font size slider */}
-          <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>
-
-          {/* Toggles */}
-          <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) => patchTop('defaultAgent', e.target.value)}
-          >
-            {(snapshot?.agents || []).map((a) => (
-              <option key={a.name} value={a.name}>@{a.name}</option>
-            ))}
-          </select>
-          <label className="mobile-field-label" style={{ marginTop: 8 }}>Default Model</label>
-          <input
-            className="mobile-input"
-            type="text"
-            placeholder="(auto)"
-            value={settings.defaultModel || ''}
-            onChange={(e) => patchTop('defaultModel', e.target.value)}
-          />
-        </div>
-      </section>
-
-      {/* Notifications */}
-      <section className="mobile-section">
-        <h3 className="mobile-section-title">Notifications</h3>
-        <div className="mobile-card">
-          <div className="mobile-setting-row">
-            <span className="mobile-setting-label">Agent completion</span>
-            <label className="mobile-toggle">
-              <input
-                type="checkbox"
-                checked={!!settings.notifications.onAgentComplete}
-                onChange={(e) => {
-                  setSettings((cur) => ({
-                    ...cur,
-                    notifications: { ...cur.notifications, onAgentComplete: e.target.checked },
-                  }));
-                  setDirty(true);
-                }}
-              />
-              <span className="mobile-toggle-slider" />
-            </label>
-          </div>
-          <div className="mobile-setting-row">
-            <span className="mobile-setting-label">Plan approval</span>
-            <label className="mobile-toggle">
-              <input
-                type="checkbox"
-                checked={!!settings.notifications.onPlanApproval}
-                onChange={(e) => {
-                  setSettings((cur) => ({
-                    ...cur,
-                    notifications: { ...cur.notifications, onPlanApproval: e.target.checked },
-                  }));
-                  setDirty(true);
-                }}
-              />
-              <span className="mobile-toggle-slider" />
-            </label>
-          </div>
-        </div>
-      </section>
-
-      {/* Agent behavior */}
-      <section className="mobile-section">
-        <h3 className="mobile-section-title">Agent Behavior</h3>
-        <div className="mobile-card">
-          <label className="mobile-field-label">Max parallel agents</label>
-          <input
-            className="mobile-input"
-            type="number"
-            inputMode="numeric"
-            min={1}
-            max={20}
-            value={settings.agents?.maxParallel ?? 6}
-            onChange={(e) => {
-              setSettings((cur) => ({
-                ...cur,
-                agents: { ...cur.agents, maxParallel: Math.max(1, Math.min(20, parseInt(e.target.value, 10) || 6)) },
-              }));
-              setDirty(true);
-            }}
-          />
-          <label className="mobile-field-label" style={{ marginTop: 8 }}>Stuck threshold (ms)</label>
-          <input
-            className="mobile-input"
-            type="number"
-            inputMode="numeric"
-            min={60000}
-            max={3600000}
-            step={60000}
-            value={settings.agents?.stuckThresholdMs ?? 600000}
-            onChange={(e) => {
-              setSettings((cur) => ({
-                ...cur,
-                agents: { ...cur.agents, stuckThresholdMs: Math.max(60000, parseInt(e.target.value, 10) || 600000) },
-              }));
-              setDirty(true);
-            }}
-          />
-          <div className="mobile-setting-row" style={{ marginTop: 8 }}>
-            <span className="mobile-setting-label">Auto-restart stuck agents</span>
-            <label className="mobile-toggle">
-              <input
-                type="checkbox"
-                checked={!!settings.agents?.autoRestart}
-                onChange={(e) => {
-                  setSettings((cur) => ({
-                    ...cur,
-                    agents: { ...cur.agents, autoRestart: e.target.checked },
-                  }));
-                  setDirty(true);
-                }}
-              />
-              <span className="mobile-toggle-slider" />
-            </label>
-          </div>
-        </div>
-      </section>
-
-      {/* Tailscale serve */}
-      <section className="mobile-section">
-        <h3 className="mobile-section-title">Tailscale Serve</h3>
-        <div className="mobile-card">
-          <p className="muted" style={{ fontSize: 13 }}>
-            Use <code>bizar service</code> commands in the terminal to configure Tailscale serve.
-          </p>
-        </div>
-      </section>
-
-      {/* Companion App */}
-      <section className="mobile-section">
-        <h3 className="mobile-section-title"><Smartphone size={14} /> Companion App</h3>
-        <div className="mobile-card">
-          {!pair && (
-            <button type="button" className="mobile-btn" onClick={startPair} disabled={pairing} style={{ width: '100%' }}>
-              <Smartphone size={14} /> {pairing ? 'Generating…' : 'Generate QR Code'}
-            </button>
-          )}
-          {pair && (
-            <QrCodePanel
-              pair={pair}
-              onStart={startPair}
-            />
-          )}
-        </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 className="mobile-setting-row">
-            <span className="mobile-setting-label">Plans</span>
-            <span className="mobile-setting-value">{snapshot?.artifacts.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>
-      </div>
-    </div>
-  );
-}

package/bizar-dash/src/web/mobile/views/MobileSkills.tsx

@@ -1,153 +0,0 @@
-// src/mobile/views/MobileSkills.tsx — skills list with detail sheet.
-import { useEffect, useState } from 'react';
-import { Sparkles, RefreshCw, Power } from 'lucide-react';
-import { api } from '../../lib/api';
-import type { Snapshot } from '../../lib/types';
-import { MobileBottomSheet } from '../components/MobileBottomSheet';
-
-type Skill = {
-  id: string;
-  name: string;
-  description: string;
-  category: string;
-  tags: string[];
-  version: string;
-  source: string;
-  enabled?: boolean;
-};
-
-type Props = {
-  snapshot: Snapshot;
-  onBack: () => void;
-};
-
-const CATEGORIES = ['languages', 'framework', 'design', 'testing', 'devops', 'data', 'security', 'integration'];
-
-export function MobileSkills({ snapshot, onBack }: Props) {
-  const [skills, setSkills] = useState<Skill[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState('');
-  const [categoryFilter, setCategoryFilter] = useState('');
-  const [detailSkill, setDetailSkill] = useState<Skill | null>(null);
-
-  const load = async () => {
-    try {
-      const data = await api.get<{ skills: Skill[] }>('/skills');
-      setSkills(data.skills || []);
-    } catch {
-      // best-effort
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { load(); }, []);
-
-  const toggleSkill = async (id: string, enabled: boolean) => {
-    try {
-      await api.patch(`/skills/${encodeURIComponent(id)}`, { enabled });
-      setSkills((cur) => cur.map((s) => (s.id === id ? { ...s, enabled } : s)));
-      if (detailSkill?.id === id) setDetailSkill((s) => s ? { ...s, enabled } : s);
-    } catch {
-      // best-effort
-    }
-  };
-
-  const filtered = skills.filter((s) => {
-    if (categoryFilter && s.category !== categoryFilter) return false;
-    if (filter) {
-      const q = filter.toLowerCase();
-      return s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q);
-    }
-    return true;
-  });
-
-  return (
-    <div className="mobile-view">
-      <div className="mobile-tasks-toolbar">
-        <input
-          className="mobile-search-input"
-          type="text"
-          placeholder="Search skills…"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-          style={{ flex: 1 }}
-        />
-        <button type="button" className="mobile-icon-btn" onClick={() => load()} aria-label="Refresh">
-          <RefreshCw size={16} />
-        </button>
-      </div>
-
-      <div className="mobile-search-scopes">
-        <button type="button" className={`mobile-scope-chip ${!categoryFilter ? 'active' : ''}`} onClick={() => setCategoryFilter('')}>All</button>
-        {CATEGORIES.map((c) => (
-          <button key={c} type="button" className={`mobile-scope-chip ${categoryFilter === c ? 'active' : ''}`} onClick={() => setCategoryFilter(c)}>
-            {c}
-          </button>
-        ))}
-      </div>
-
-      {loading ? (
-        <div className="mobile-loading"><p>Loading…</p></div>
-      ) : filtered.length === 0 ? (
-        <div className="mobile-empty">
-          <Sparkles size={40} />
-          <p>No skills found.</p>
-        </div>
-      ) : (
-        <div className="mobile-card-list">
-          {filtered.map((s) => (
-            <button
-              key={s.id}
-              type="button"
-              className="mobile-list-item mobile-list-item-interactive"
-              onClick={() => setDetailSkill(s)}
-            >
-              <div className="mobile-list-icon"><Sparkles size={16} /></div>
-              <div className="mobile-list-content">
-                <span className="mobile-list-title">{s.name}</span>
-                <span className="mobile-list-meta">{s.category} · v{s.version}</span>
-              </div>
-              <span className={`mobile-list-badge ${s.enabled ? 'badge-on' : 'badge-off'}`}>
-                {s.enabled ? 'on' : 'off'}
-              </span>
-            </button>
-          ))}
-        </div>
-      )}
-
-      {detailSkill && (
-        <MobileBottomSheet
-          open={true}
-          onClose={() => setDetailSkill(null)}
-          title={detailSkill.name}
-          actions={
-            <button
-              type="button"
-              className={`mobile-btn ${detailSkill.enabled ? 'mobile-btn-secondary' : ''}`}
-              style={{ width: '100%' }}
-              onClick={() => { if (detailSkill) toggleSkill(detailSkill.id, !detailSkill.enabled); }}
-            >
-              <Power size={14} /> {detailSkill.enabled ? 'Disable' : 'Enable'}
-            </button>
-          }
-        >
-          <div className="mobile-agent-detail">
-            <p className="mobile-agent-detail-desc">{detailSkill.description || 'No description.'}</p>
-            <div className="mobile-agent-detail-meta">
-              <div className="mobile-task-detail-row"><span>Category</span><span>{detailSkill.category}</span></div>
-              <div className="mobile-task-detail-row"><span>Version</span><span className="mono">{detailSkill.version}</span></div>
-              <div className="mobile-task-detail-row"><span>Source</span><span>{detailSkill.source}</span></div>
-              {detailSkill.tags.length > 0 && (
-                <div className="mobile-task-detail-row">
-                  <span>Tags</span>
-                  <span>{detailSkill.tags.join(', ')}</span>
-                </div>
-              )}
-            </div>
-          </div>
-        </MobileBottomSheet>
-      )}
-    </div>
-  );
-}