@polderlabs/bizar 4.4.13 → 4.5.0

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

@@ -7,8 +7,8 @@ import { ModalProvider, useModal } from './components/Modal';
 import { ToastProvider, useToast } from './components/Toast';
 import { SearchModal } from './components/SearchModal';
 import { Notifications } from './components/Notifications';
+import { api, ApiError } from './lib/api';
 import { CommandDialog, type DialogDescriptor } from './components/CommandDialog';
-import { api } from './lib/api';
 import { Ws } from './lib/ws';
 import {
   applyTheme,
@@ -79,7 +79,7 @@ const VIEW_MAP: Record<string, (p: ViewProps) => React.ReactNode> = {
   minimax: MiniMaxUsage,
 };
 
-const VERSION = 'v3.21.0';
+const VERSION = 'v4.5.0';
 
 /**
  * Render the active view. If `activeTab` matches a built-in tab id,
@@ -113,6 +113,67 @@ function renderActiveView(
   return <V {...viewProps} />;
 }
 
+// v3.6.2 — Inline token-entry form shown on the boot-error screen when
+// the server returns 401 (reverse-proxy / Tailscale Serve scenario).
+// The user pastes the token, it is saved to localStorage, and boot is
+// retried. The form closes on Escape or on successful save.
+function TokenEntryForm({ onSaved }: { onSaved: () => void }) {
+  const [value, setValue] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-focus the input on mount
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const submit = () => {
+    const tok = value.trim();
+    if (!tok) return;
+    api.setToken(tok);
+    onSaved();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      onSaved();
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      submit();
+    }
+  };
+
+  return (
+    <form
+      className="token-entry-form"
+      onSubmit={(e) => { e.preventDefault(); submit(); }}
+    >
+      <div className="token-entry-row">
+        <input
+          ref={inputRef}
+          type="password"
+          className="input mono"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="Paste auth token"
+          spellCheck={false}
+          autoComplete="off"
+          onKeyDown={handleKeyDown}
+        />
+        <Button type="submit" variant="primary" size="sm" disabled={!value.trim()}>
+          Save &amp; retry
+        </Button>
+      </div>
+      <p className="token-entry-hint">
+        Where do I find this token? Check the file{' '}
+        <code>~/.config/bizar/dashboard-secret</code> on the machine
+        running the dashboard, or look for it in the server output.
+      </p>
+    </form>
+  );
+}
+
 export function App() {
   return (
     <ToastProvider>
@@ -133,6 +194,7 @@ function Shell() {
   const [settings, setSettings] = useState<Settings | null>(null);
   const [wsStatus, setWsStatus] = useState<WsStatus>('connecting');
   const [bootError, setBootError] = useState<string | null>(null);
+  const [authPromptOpen, setAuthPromptOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const [stuckAgents, setStuckAgents] = useState<{ name: string }[]>([]);
   const [stuckBannerDismissed, setStuckBannerDismissed] = useState(false);
@@ -196,9 +258,11 @@ function Shell() {
     return () => mql.removeEventListener('change', handler);
   }, [settings?.theme?.mode]);
 
-  // Initial fetch — runs once on mount
-  useEffect(() => {
+  // v3.6.2 — Boot logic extracted to retryBoot so it can be re-invoked
+  // after the user pastes a token in the inline recovery form.
+  const retryBoot = useCallback(async () => {
     let cancelled = false;
+
     const loadBootData = () =>
       Promise.all([
         api.get<Snapshot>('/snapshot').catch(() => null),
@@ -216,42 +280,59 @@ function Shell() {
       if (stuck?.stuck) setStuckAgents(stuck.stuck);
     };
 
-    (async () => {
-      try {
-        const auth = await api.probeAuthStatus();
-        const [snap, set, stuck] = await loadBootData();
-        if (cancelled) return;
+    try {
+      const auth = await api.probeAuthStatus();
+      const [snap, set, stuck] = await loadBootData();
+      if (cancelled) return;
 
-        applyBootData(snap, set, stuck);
-        if (snap || set) return;
+      applyBootData(snap, set, stuck);
+      if (snap || set) {
+        setBootError(null);
+        return;
+      }
 
-        if (!auth.loopback) {
-          setBootError('Dashboard server unreachable.');
-          return;
-        }
+      if (!auth.loopback) {
+        setBootError('Dashboard server unreachable.');
+        return;
+      }
 
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        if (cancelled) return;
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      if (cancelled) return;
 
-        const [retrySnap, retrySet, retryStuck] = await loadBootData();
-        if (cancelled) return;
+      const [retrySnap, retrySet, retryStuck] = await loadBootData();
+      if (cancelled) return;
 
-        applyBootData(retrySnap, retrySet, retryStuck);
-        if (!retrySnap && !retrySet) {
-          setBootError('Dashboard server unreachable.');
-        }
-      } catch (err) {
-        if (cancelled) return;
-        const msg = (err as Error)?.message ?? 'unknown error';
+      applyBootData(retrySnap, retrySet, retryStuck);
+      if (!retrySnap && !retrySet) {
+        setBootError('Dashboard server unreachable.');
+      }
+    } catch (err) {
+      if (cancelled) return;
+      const msg = (err as Error)?.message ?? 'unknown error';
+      // v3.6.2 — If we got a 401, the user needs to supply a token.
+      // Surface the form inline instead of just the error message.
+      if (err instanceof ApiError && err.status === 401) {
         setBootError(msg);
-        toast.error(`Failed to load: ${msg}`);
+        setAuthPromptOpen(true);
+        toast.error(`Auth required: ${msg}`);
+        return;
       }
-    })();
+      setBootError(msg);
+      toast.error(`Failed to load: ${msg}`);
+    }
+  }, [toast]);
 
+  // Initial fetch — runs once on mount
+  useEffect(() => {
+    let cancelled = false;
+    const id = setTimeout(() => {
+      if (!cancelled) retryBoot();
+    }, 0);
     return () => {
       cancelled = true;
+      clearTimeout(id);
     };
-  }, [toast]);
+  }, [retryBoot]);
 
   // Apply defaultTab ONCE on mount only — must NOT re-fire on toast changes
   useEffect(() => {
@@ -695,6 +776,14 @@ function Shell() {
             <div className="boot-error">
               <h2>Dashboard unavailable</h2>
               <p>{bootError}</p>
+              {authPromptOpen && (
+                <TokenEntryForm
+                  onSaved={() => {
+                    setAuthPromptOpen(false);
+                    retryBoot();
+                  }}
+                />
+              )}
               <p className="boot-error-hint">
                 Make sure the Bizar dashboard server is running. Try{' '}
                 <code>bizar-dash start</code> in your terminal.

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

@@ -0,0 +1,247 @@
+// src/web/components/EnvVarManager.tsx — manage BIZAR_* env vars from ~/.config/bizar/env.json
+import { useCallback, useEffect, useState } from 'react';
+import { Plus, Pencil, Trash2, Eye, EyeOff, RefreshCw, KeyRound, CheckCircle, X } from 'lucide-react';
+import { Button } from './Button';
+import { useToast } from './Toast';
+import { api } from '../lib/api';
+import { cn } from '../lib/utils';
+
+export type EnvVarEntry = {
+  name: string;
+  value: string; // masked on GET, full on edit
+  createdAt: string;
+  source: string;
+};
+
+type Props = {
+  onError?: (msg: string) => void;
+};
+
+export function EnvVarManager({ onError }: Props) {
+  const toast = useToast();
+  const [vars, setVars] = useState<EnvVarEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  // Which rows have the value revealed (edit mode shows real value)
+  const [revealed, setRevealed] = useState<Set<string>>(new Set());
+  // Currently editing name (null = none)
+  const [editing, setEditing] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+  // New var form
+  const [showAdd, setShowAdd] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newValue, setNewValue] = useState('');
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const r = await api.get<EnvVarEntry[]>('/env-vars');
+      setVars(r);
+    } catch (err) {
+      toast.error(`Load failed: ${(err as Error).message}`);
+      onError?.((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [toast, onError]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const toggleReveal = (name: string) => {
+    setRevealed((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  };
+
+  const handleAdd = async () => {
+    const name = newName.trim().toUpperCase();
+    const value = newValue.trim();
+    if (!name || !/^BIZAR_[A-Z0-9_]+$/.test(name)) {
+      toast.warning('Name must match BIZAR_<NAME> (e.g. BIZAR_MINIMAX_KEY)');
+      return;
+    }
+    if (!value) {
+      toast.warning('Value is required.');
+      return;
+    }
+    if (vars.some((v) => v.name === name)) {
+      toast.warning(`${name} already exists.`);
+      return;
+    }
+    setSaving(true);
+    try {
+      await api.post('/env-vars', { name, value });
+      toast.success(`${name} created.`);
+      setShowAdd(false);
+      setNewName('');
+      setNewValue('');
+      await load();
+    } catch (err) {
+      toast.error(`Create failed: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const startEdit = (v: EnvVarEntry) => {
+    setEditing(v.name);
+    setEditValue(v.value === v.value.replace(/\*/g, '') ? v.value : '');
+    setRevealed((prev) => { const next = new Set(prev); next.add(v.name); return next; });
+  };
+
+  const handleUpdate = async (name: string) => {
+    if (!editValue.trim()) {
+      toast.warning('Value cannot be empty.');
+      return;
+    }
+    setSaving(true);
+    try {
+      await api.put(`/env-vars/${encodeURIComponent(name)}`, { value: editValue.trim() });
+      toast.success(`${name} updated.`);
+      setEditing(null);
+      await load();
+    } catch (err) {
+      toast.error(`Update failed: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (name: string) => {
+    if (!confirm(`Delete ${name}? This cannot be undone.`)) return;
+    try {
+      await api.del(`/env-vars/${encodeURIComponent(name)}`);
+      toast.success(`${name} deleted.`);
+      await load();
+    } catch (err) {
+      toast.error(`Delete failed: ${(err as Error).message}`);
+    }
+  };
+
+  if (loading) {
+    return <div className="muted" style={{ padding: '16px 0', fontSize: 13 }}>Loading env vars…</div>;
+  }
+
+  return (
+    <div className="env-var-manager">
+      <div className="env-var-toolbar">
+        <Button variant="primary" size="sm" onClick={() => setShowAdd(true)}>
+          <Plus size={12} /> New variable
+        </Button>
+        <Button variant="ghost" size="sm" onClick={load} title="Reload">
+          <RefreshCw size={12} />
+        </Button>
+      </div>
+
+      {vars.length === 0 && !showAdd && (
+        <div className="env-var-empty">
+          <KeyRound size={20} />
+          <span>No BIZAR_* env vars yet.</span>
+          <span style={{ fontSize: 11 }}>Create one to store API keys securely.</span>
+        </div>
+      )}
+
+      {/* New var form */}
+      {showAdd && (
+        <div className="env-var-add-form">
+          <div className="env-var-add-row">
+            <input
+              className="input mono"
+              style={{ width: 240 }}
+              placeholder="BIZAR_NAME"
+              value={newName}
+              onChange={(e) => setNewName(e.target.value.toUpperCase())}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') setShowAdd(false); }}
+              autoFocus
+            />
+            <input
+              className="input mono"
+              type="password"
+              placeholder="value (API key, token, etc.)"
+              value={newValue}
+              onChange={(e) => setNewValue(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleAdd(); if (e.key === 'Escape') setShowAdd(false); }}
+            />
+            <Button variant="primary" size="sm" onClick={handleAdd} disabled={saving}>
+              <CheckCircle size={12} /> Create
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => { setShowAdd(false); setNewName(''); setNewValue(''); }}>
+              <X size={12} />
+            </Button>
+          </div>
+          <p style={{ fontSize: 11, color: 'var(--text-dim)', margin: 0 }}>
+            Names must match <code>BIZAR_<var>NAME</var></code> (uppercase letters, digits, underscores).
+          </p>
+        </div>
+      )}
+
+      {/* Var list */}
+      {vars.length > 0 && (
+        <div className="env-var-list">
+          {vars.map((v) => {
+            const isEditing = editing === v.name;
+            const isRevealed = revealed.has(v.name);
+            return (
+              <div key={v.name} className={cn('env-var-row', isEditing && 'env-var-row-editing')}>
+                <span className="env-var-name mono">{v.name}</span>
+                {isEditing ? (
+                  <input
+                    className="input mono"
+                    type="password"
+                    style={{ flex: 1, minWidth: 200 }}
+                    value={editValue}
+                    onChange={(e) => setEditValue(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') handleUpdate(v.name);
+                      if (e.key === 'Escape') setEditing(null);
+                    }}
+                    autoFocus
+                  />
+                ) : (
+                  <span className={cn('env-var-value mono', !isRevealed && 'env-var-value-masked')}>
+                    {isRevealed ? v.value : v.value}
+                  </span>
+                )}
+                <span className="env-var-source muted">{v.source}</span>
+                <div className="env-var-actions">
+                  {!isEditing && (
+                    <button
+                      type="button"
+                      className="icon-btn"
+                      title={isRevealed ? 'Hide' : 'Reveal'}
+                      onClick={() => toggleReveal(v.name)}
+                    >
+                      {isRevealed ? <EyeOff size={12} /> : <Eye size={12} />}
+                    </button>
+                  )}
+                  {isEditing ? (
+                    <>
+                      <Button variant="primary" size="sm" onClick={() => handleUpdate(v.name)} disabled={saving}>
+                        Save
+                      </Button>
+                      <Button variant="ghost" size="sm" onClick={() => setEditing(null)}>
+                        Cancel
+                      </Button>
+                    </>
+                  ) : (
+                    <>
+                      <button type="button" className="icon-btn" title="Edit" onClick={() => startEdit(v)}>
+                        <Pencil size={12} />
+                      </button>
+                      <button type="button" className="icon-btn icon-btn-danger" title="Delete" onClick={() => handleDelete(v.name)}>
+                        <Trash2 size={12} />
+                      </button>
+                    </>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,213 @@
+// src/web/components/SettingsSearch.tsx — fuzzy search across Settings sections with scroll-to highlight
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Search, X } from 'lucide-react';
+import Fuse from 'fuse.js';
+import { cn } from '../lib/utils';
+
+export type SettingsSection = {
+  id: string;
+  label: string;
+  icon?: string;
+  fields: SettingsField[];
+};
+
+export type SettingsField = {
+  key: string;       // e.g. "theme.accent"
+  label: string;     // e.g. "Accent color"
+  value?: string;    // current value (masked if secret)
+  section: string;   // parent section id
+};
+
+type Props = {
+  sections: SettingsSection[];
+  onJump: (sectionId: string, fieldKey?: string) => void;
+};
+
+type Match = {
+  item: SettingsField | SettingsSection;
+  score: number;
+  type: 'section' | 'field';
+  sectionId: string;
+  fieldKey?: string;
+};
+
+function fuseSearch(items: SettingsSection[], query: string): Match[] {
+  if (!query.trim()) return [];
+
+  const sectionFuse = new Fuse(items, {
+    keys: ['label'],
+    threshold: 0.4,
+    includeScore: true,
+  });
+
+  const fieldFuse = new Fuse(
+    items.flatMap((s) => s.fields.map((f) => ({ ...f, _sectionId: s.id }))),
+    { keys: ['label', 'key'], threshold: 0.4, includeScore: true },
+  );
+
+  const results: Match[] = [];
+
+  for (const r of sectionFuse.search(query)) {
+    results.push({
+      item: r.item,
+      score: r.score ?? 1,
+      type: 'section',
+      sectionId: r.item.id,
+    });
+  }
+
+  for (const r of fieldFuse.search(query)) {
+    results.push({
+      item: r.item as SettingsField,
+      score: r.score ?? 1,
+      type: 'field',
+      sectionId: (r.item as SettingsField & { _sectionId: string })._sectionId,
+      fieldKey: r.item.key,
+    });
+  }
+
+  // Deduplicate by sectionId+fieldKey, prefer lower score
+  const seen = new Set<string>();
+  return results
+    .filter((r) => {
+      const k = `${r.sectionId}::${r.fieldKey ?? ''}`;
+      if (seen.has(k)) return false;
+      seen.add(k);
+      return true;
+    })
+    .sort((a, b) => a.score - b.score)
+    .slice(0, 8);
+}
+
+export function SettingsSearch({ sections, onJump }: Props) {
+  const [q, setQ] = useState('');
+  const [matches, setMatches] = useState<Match[]>([]);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [highlighted, setHighlighted] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const search = useCallback(
+    (query: string) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (!query.trim()) {
+        setMatches([]);
+        setActiveIdx(0);
+        return;
+      }
+      debounceRef.current = setTimeout(() => {
+        setMatches(fuseSearch(sections, query));
+        setActiveIdx(0);
+      }, 200);
+    },
+    [sections],
+  );
+
+  useEffect(() => {
+    search(q);
+  }, [q, search]);
+
+  // Cleanup timers
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (highlightTimerRef.current) clearTimeout(highlightTimerRef.current);
+    };
+  }, []);
+
+  const highlightSection = (sectionId: string) => {
+    setHighlighted(sectionId);
+    if (highlightTimerRef.current) clearTimeout(highlightTimerRef.current);
+    highlightTimerRef.current = setTimeout(() => setHighlighted(null), 1500);
+    const el = document.querySelector(`[data-section="${sectionId}"]`);
+    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  const handleKey = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setQ('');
+      inputRef.current?.blur();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIdx((i) => Math.min(i + 1, matches.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter' && matches[activeIdx]) {
+      const m = matches[activeIdx];
+      highlightSection(m.sectionId);
+      onJump(m.sectionId, m.fieldKey);
+      setQ('');
+    }
+  };
+
+  const handleSelect = (m: Match) => {
+    highlightSection(m.sectionId);
+    onJump(m.sectionId, m.fieldKey);
+    setQ('');
+  };
+
+  return (
+    <div className="settings-search">
+      <div className="settings-search-input-wrap">
+        <Search size={13} className="settings-search-icon" />
+        <input
+          ref={inputRef}
+          className="settings-search-input"
+          placeholder="Search settings…"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          onKeyDown={handleKey}
+          aria-label="Search settings"
+        />
+        {q && (
+          <button
+            type="button"
+            className="icon-btn settings-search-clear"
+            onClick={() => setQ('')}
+            aria-label="Clear search"
+          >
+            <X size={12} />
+          </button>
+        )}
+      </div>
+
+      {q && matches.length > 0 && (
+        <div className="settings-search-results">
+          {matches.map((m, idx) => {
+            const label = m.type === 'section'
+              ? (m.item as SettingsSection).label
+              : (m.item as SettingsField).label;
+            const key = m.type === 'section'
+              ? (m.item as SettingsSection).id
+              : (m.item as SettingsField).key;
+            return (
+              <button
+                key={`${m.sectionId}::${key}`}
+                type="button"
+                className={cn('settings-search-result', idx === activeIdx && 'settings-search-result-active')}
+                onClick={() => handleSelect(m)}
+                onMouseEnter={() => setActiveIdx(idx)}
+              >
+                <span className={cn('settings-search-result-type', m.type === 'section' && 'settings-search-result-type-section')}>
+                  {m.type === 'section' ? 'section' : 'field'}
+                </span>
+                <span className="settings-search-result-label">
+                  {label}
+                </span>
+                {m.type === 'field' && (
+                  <span className="settings-search-result-key mono muted">{key}</span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {q && matches.length === 0 && (
+        <div className="settings-search-empty muted">No matching settings.</div>
+      )}
+    </div>
+  );
+}

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

@@ -50,7 +50,6 @@ export const TABS: TabDef[] = [
   { id: 'schedules', label: 'Schedules', icon: Clock },
   { id: 'history', label: 'History', icon: HistoryIcon },
   { id: 'minimax', label: 'Usage', icon: Coins },
-  { id: 'config', label: 'Config', icon: Settings2 },
   { id: 'settings', label: 'Settings', icon: Sliders },
 ];