@polderlabs/bizar 4.4.12 → 4.5.0

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 },
 ];