@polderlabs/bizar 4.4.13 → 4.5.1

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,
@@ -34,6 +34,7 @@ import { Mods } from './views/Mods';
 import { ModView, type ModView as ModViewType } from './views/ModView';
 import { Schedules } from './views/Schedules';
 import { Skills } from './views/Skills';
+import { Memory } from './views/Memory';
 import { History } from './views/History';
 import { MiniMaxUsage } from './views/MiniMaxUsage';
 import { BackgroundAgents } from './views/BackgroundAgents';
@@ -67,6 +68,7 @@ const VIEW_MAP: Record<string, (p: ViewProps) => React.ReactNode> = {
   chat: Chat,
   agents: Agents,
   artifacts: Artifacts,
+  memory: Memory,
   tasks: Tasks,
   activity: Activity,
   background: BackgroundAgents,
@@ -79,7 +81,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 +115,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 +196,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 +260,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 +282,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 +778,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>
+  );
+}