@polderlabs/bizar 9.0.0 → 10.0.5

package/bizar-dash/src/web/v8/views/Providers/ProvidersView.tsx

@@ -0,0 +1,371 @@
+/**
+ * v8/views/Providers/ProvidersView.tsx — Sprint S42, v9.3.0.
+ *
+ * Provider list pulled from /api/providers (aggregated). Per-row:
+ * - active-key card (GET /api/providers/:id/active-key) with masked
+ *   key preview + label + status
+ * - rotate button (POST /api/providers/:id/rotate) with inline confirm
+ *
+ * Header actions:
+ * - Active default card (GET /api/providers/active)
+ * - Auto-detect (GET /api/providers/auto-detect)
+ *
+ * Inline confirm row pattern; no window.confirm.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { KeyRound, Pencil, Plus, Power, PowerOff, RotateCw, Sparkles, Star, Trash2, RefreshCcw, Cpu } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { ListHeader } from '../../ui/data/ListHeader.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { useFetch } from '../../data/useFetch.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+
+interface Provider {
+  id: string;
+  name?: string;
+  source?: string;
+  baseURL?: string;
+  models?: string[];
+  keys?: ProviderKey[];
+  active?: boolean;
+  enabled?: boolean;
+}
+
+interface ProviderKey {
+  envVar?: string;
+  label?: string;
+  status?: string;
+}
+
+interface ActiveKey {
+  envVar: string;
+  label?: string;
+  status?: string;
+  keyPreview: string;
+  keySet: boolean;
+}
+
+interface ActiveDefault {
+  providerId: string | null;
+  modelId: string | null;
+  source?: string | null;
+}
+
+export function ProvidersView(): JSX.Element {
+  const payload = useFetch<{ providers: Provider[]; count: number }>('/api/providers');
+  const activePayload = useFetch<ActiveDefault>('/api/providers/active');
+  const [confirmRotate, setConfirmRotate] = useState<string | null>(null);
+  const [activeKeys, setActiveKeys] = useState<Record<string, ActiveKey | null>>({});
+  const [error, setError] = useState<string | null>(null);
+  const [autoDetect, setAutoDetect] = useState<{ providers: Provider[] } | null>(null);
+  const [probing, setProbing] = useState<boolean>(false);
+
+  const providers = useMemo<Provider[]>(() => payload.data?.providers ?? [], [payload.data]);
+  const refresh = useCallback(() => { void payload.refetch(); void activePayload.refetch(); }, [payload, activePayload]);
+
+  // Fetch the active key for each provider (lazy, in parallel).
+  useEffect(() => {
+    if (!providers.length) return;
+    let cancelled = false;
+    (async () => {
+      const results = await Promise.all(
+        providers.map(async (p) => {
+          try {
+            const r = await fetchJson<{ ok: boolean; active: ActiveKey } | { ok: false; error: string }>(`/api/providers/${p.id}/active-key`);
+            return [p.id, ('active' in r ? r.active : null)] as const;
+          } catch {
+            return [p.id, null] as const;
+          }
+        }),
+      );
+      if (!cancelled) {
+        const map: Record<string, ActiveKey | null> = {};
+        for (const [id, ak] of results) map[id] = ak;
+        setActiveKeys(map);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [providers]);
+
+  const rotate = async (id: string): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/providers/${id}/rotate`, { method: 'POST' });
+      setConfirmRotate(null);
+      refresh();
+      // Re-fetch the new active key for this row.
+      try {
+        const r = await fetchJson<{ ok: boolean; active: ActiveKey }>(`/api/providers/${id}/active-key`);
+        setActiveKeys((m) => ({ ...m, [id]: r.active }));
+      } catch { /* ignore */ }
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const addKey = async (id: string): Promise<void> => {
+    const envVar = window.prompt(`Env var name to add to ${id} (e.g. ${id.toUpperCase()}_KEY_2)`);
+    if (!envVar?.trim()) return;
+    const label = window.prompt('Label (optional)') || undefined;
+    setError(null);
+    try {
+      await fetchJson(`/api/providers/${id}/keys`, { method: 'POST', body: { envVar, label } });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const runAutoDetect = async (): Promise<void> => {
+    setProbing(true);
+    setError(null);
+    try {
+      const r = await fetchJson<{ providers: Provider[] }>('/api/providers/auto-detect');
+      setAutoDetect({ providers: r.providers });
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setProbing(false);
+    }
+  };
+
+  const createProvider = async (): Promise<void> => {
+    const id = window.prompt('Provider id (lowercase, e.g. openai)');
+    if (!id?.trim()) return;
+    const name = window.prompt('Display name') || id;
+    const baseURL = window.prompt('Base URL (optional)') || '';
+    const apiKey = window.prompt('API key or env:VAR marker') || '';
+    setError(null);
+    try {
+      await fetchJson('/api/providers', { method: 'POST', body: { id, name, baseURL, apiKey } });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const editProvider = async (p: Provider): Promise<void> => {
+    const name = window.prompt(`Rename ${p.id}`, p.name || p.id);
+    if (!name?.trim()) return;
+    const baseURL = window.prompt('Base URL', p.baseURL || '');
+    setError(null);
+    try {
+      await fetchJson(`/api/providers/${encodeURIComponent(p.id)}`, {
+        method: 'PUT',
+        body: { name, baseURL: baseURL ?? '' },
+      });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const deleteProvider = async (id: string): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/providers/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const toggleEnabled = async (id: string, currentlyEnabled: boolean): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/providers/${encodeURIComponent(id)}/${currentlyEnabled ? 'disable' : 'enable'}`, { method: 'POST' });
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  return (
+    <Stack gap={4} data-testid="providers-view">
+      <ViewHeader
+        title="Providers"
+        description="Configured LLM providers + active key rotation."
+        actions={
+          <Inline align="center" gap={2}>
+            {error !== null && (
+              <span role="alert" data-testid="providers-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>
+                {error}
+              </span>
+            )}
+            <Button variant="ghost" onClick={() => void refresh()} data-testid="providers-refresh">
+              <RefreshCcw size={14} aria-hidden /> Refresh
+            </Button>
+            <Button variant="primary" onClick={() => void runAutoDetect()} disabled={probing} data-testid="providers-auto-detect">
+              <Sparkles size={14} aria-hidden /> {probing ? 'Probing…' : 'Auto-detect'}
+            </Button>
+            <Button variant="primary" onClick={() => void createProvider()} data-testid="providers-create">
+              <Plus size={14} aria-hidden /> New provider
+            </Button>
+          </Inline>
+        }
+      />
+      <ListHeader
+        title="Configured"
+        count={providers.length}
+        description={activePayload.data?.providerId ? `active: ${activePayload.data.providerId}` : undefined}
+        testid="providers-list-header"
+      />
+
+      {activePayload.data && (activePayload.data.providerId !== null || activePayload.data.modelId !== null) && (
+        <Card variant="default">
+          <CardBody>
+            <Inline align="center" justify="between" gap={2}>
+              <Inline align="center" gap={2}>
+                <Star size={14} aria-hidden style={{ color: 'var(--accent)' }} />
+                <strong>Active default:</strong>
+                <code data-testid="providers-active-provider">{activePayload.data.providerId ?? '—'}</code>
+                <span style={{ color: 'var(--fg-muted)' }}>·</span>
+                <code data-testid="providers-active-model">{activePayload.data.modelId ?? '—'}</code>
+                {activePayload.data.source && (
+                  <span style={{ color: 'var(--fg-subtle)', fontSize: 'var(--fs-12)' }}>({activePayload.data.source})</span>
+                )}
+              </Inline>
+            </Inline>
+          </CardBody>
+        </Card>
+      )}
+
+      {autoDetect !== null && (
+        <Card variant="default">
+          <CardBody>
+            <Stack gap={1}>
+              <strong style={{ fontSize: 'var(--fs-13)' }}>Auto-detect result</strong>
+              <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                {autoDetect.providers.length} candidate{autoDetect.providers.length === 1 ? '' : 's'} from env + config.
+              </span>
+            </Stack>
+          </CardBody>
+        </Card>
+      )}
+
+      <Card variant="default">
+        <CardBody>
+          {payload.loading && providers.length === 0 ? (
+            <Stack gap={1}>
+              <Skeleton style={{ height: 56 }} />
+              <Skeleton style={{ height: 56 }} />
+            </Stack>
+          ) : providers.length === 0 ? (
+            <EmptyState icon={<Cpu size={28} aria-hidden />} title="No providers" description="Run Auto-detect or add via Config → Providers." />
+          ) : (
+            <Stack gap={1}>
+              {providers.map((p) => {
+                const isConfirming = confirmRotate === p.id;
+                const ak = activeKeys[p.id];
+                return (
+                  <div
+                    key={p.id}
+                    data-testid={`provider-row-${p.id}`}
+                    style={{
+                      padding: 'var(--space-3)',
+                      border: '1px solid var(--border)',
+                      borderRadius: 'var(--radius-sm)',
+                      background: 'var(--surface-0)',
+                    }}
+                  >
+                    <Inline align="center" justify="between" gap={2}>
+                      <Stack gap={0}>
+                        <Inline align="center" gap={2}>
+                          <strong>{p.name || p.id}</strong>
+                          <code style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>{p.id}</code>
+                          {p.source && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>· {p.source}</span>}
+                          {p.active && (
+                            <span data-testid={`provider-active-${p.id}`} style={{ fontSize: 'var(--fs-11)', color: 'var(--success)', fontWeight: 600 }}>ACTIVE</span>
+                          )}
+                        </Inline>
+                        {p.baseURL && <code style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>{p.baseURL}</code>}
+                      </Stack>
+                      <Inline gap={1}>
+                        <Button
+                          variant="ghost"
+                          onClick={() => setConfirmRotate((cur) => (cur === p.id ? null : p.id))}
+                          data-testid={`provider-rotate-${p.id}`}
+                          aria-label={`Rotate ${p.id}`}
+                          disabled={!p.keys || p.keys.length < 2}
+                          title={!p.keys || p.keys.length < 2 ? 'Need ≥2 keys to rotate' : 'Rotate active key'}
+                        >
+                          <RotateCw size={14} aria-hidden /> Rotate
+                        </Button>
+                        <Button
+                          variant="primary"
+                          onClick={() => void addKey(p.id)}
+                          data-testid={`provider-add-key-${p.id}`}
+                          aria-label={`Add key to ${p.id}`}
+                        >
+                          <KeyRound size={14} aria-hidden /> Add key
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          onClick={() => void editProvider(p)}
+                          data-testid={`provider-edit-${p.id}`}
+                          aria-label={`Edit ${p.id}`}
+                        >
+                          <Pencil size={14} aria-hidden />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          onClick={() => void toggleEnabled(p.id, p.enabled ?? true)}
+                          data-testid={`provider-toggle-${p.id}`}
+                          aria-label={(p.enabled ?? true) ? `Disable ${p.id}` : `Enable ${p.id}`}
+                        >
+                          {(p.enabled ?? true) ? <PowerOff size={14} aria-hidden /> : <Power size={14} aria-hidden />}
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          onClick={() => void deleteProvider(p.id)}
+                          data-testid={`provider-delete-${p.id}`}
+                          aria-label={`Delete ${p.id}`}
+                        >
+                          <Trash2 size={14} aria-hidden />
+                        </Button>
+                      </Inline>
+                    </Inline>
+
+                    {/* Active-key sub-row */}
+                    <div data-testid={`provider-active-key-${p.id}`} style={{ marginTop: 'var(--space-2)', padding: 'var(--space-2)', background: 'var(--surface-1)', borderRadius: 'var(--radius-sm)' }}>
+                      <Inline align="center" gap={2}>
+                        <KeyRound size={12} aria-hidden style={{ color: 'var(--fg-muted)' }} />
+                        {ak === undefined ? (
+                          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>Probing active key…</span>
+                        ) : ak === null ? (
+                          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>No active key</span>
+                        ) : (
+                          <Inline align="center" gap={2} data-testid={`provider-active-key-detail-${p.id}`}>
+                            <code style={{ fontSize: 'var(--fs-12)' }}>{ak.envVar}</code>
+                            {ak.label && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>· {ak.label}</span>}
+                            {ak.status && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>· {ak.status}</span>}
+                            <code style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>{ak.keyPreview}</code>
+                          </Inline>
+                        )}
+                      </Inline>
+                    </div>
+
+                    {isConfirming && (
+                      <Inline gap={1} style={{ marginTop: 'var(--space-1)' }}>
+                        <Button variant="primary" onClick={() => void rotate(p.id)} data-testid={`provider-confirm-rotate-${p.id}`}>
+                          Confirm rotate
+                        </Button>
+                        <Button variant="ghost" onClick={() => setConfirmRotate(null)}>Cancel</Button>
+                      </Inline>
+                    )}
+                  </div>
+                );
+              })}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/Router.tsx

@@ -42,6 +42,81 @@ const SchedulesView = lazy(() =>
 const BackgroundJobsView = lazy(() =>
   import('./BackgroundJobs/BackgroundJobsView.js').then((m) => ({ default: m.BackgroundJobsView })),
 );
+const DoctorView = lazy(() =>
+  import('./Doctor/DoctorView.js').then((m) => ({ default: m.DoctorView })),
+);
+const UsageView = lazy(() =>
+  import('./Usage/UsageView.js').then((m) => ({ default: m.UsageView })),
+);
+const BackupView = lazy(() =>
+  import('./Backup/BackupView.js').then((m) => ({ default: m.BackupView })),
+);
+const NotificationsView = lazy(() =>
+  import('./Notifications/NotificationsView.js').then((m) => ({ default: m.NotificationsView })),
+);
+const DiagnosticsView = lazy(() =>
+  import('./Diagnostics/DiagnosticsView.js').then((m) => ({ default: m.DiagnosticsView })),
+);
+const HeadroomView = lazy(() =>
+  import('./Headroom/HeadroomView.js').then((m) => ({ default: m.HeadroomView })),
+);
+const EvalView = lazy(() =>
+  import('./Eval/EvalView.js').then((m) => ({ default: m.EvalView })),
+);
+const ChatView = lazy(() =>
+  import('./Chat/ChatView.js').then((m) => ({ default: m.ChatView })),
+);
+const ProjectsView = lazy(() =>
+  import('./Projects/ProjectsView.js').then((m) => ({ default: m.ProjectsView })),
+);
+const ClaudeSessionsView = lazy(() =>
+  import('./ClaudeSessions/ClaudeSessionsView.js').then((m) => ({ default: m.ClaudeSessionsView })),
+);
+const HistoryView = lazy(() =>
+  import('./History/HistoryView.js').then((m) => ({ default: m.HistoryView })),
+);
+const AdminView = lazy(() =>
+  import('./Admin/AdminView.js').then((m) => ({ default: m.AdminView })),
+);
+const AuthView = lazy(() =>
+  import('./Auth/AuthView.js').then((m) => ({ default: m.AuthView })),
+);
+const EnvVarsView = lazy(() =>
+  import('./EnvVars/EnvVarsView.js').then((m) => ({ default: m.EnvVarsView })),
+);
+const ConfigView = lazy(() =>
+  import('./Config/ConfigView.js').then((m) => ({ default: m.ConfigView })),
+);
+const DialogsView = lazy(() =>
+  import('./Dialogs/DialogsView.js').then((m) => ({ default: m.DialogsView })),
+);
+const ProvidersView = lazy(() =>
+  import('./Providers/ProvidersView.js').then((m) => ({ default: m.ProvidersView })),
+);
+const ModsView = lazy(() =>
+  import('./Mods/ModsView.js').then((m) => ({ default: m.ModsView })),
+);
+const UpdateView = lazy(() =>
+  import('./Update/UpdateView.js').then((m) => ({ default: m.UpdateView })),
+);
+const ArtifactsView = lazy(() =>
+  import('./Artifacts/ArtifactsView.js').then((m) => ({ default: m.ArtifactsView })),
+);
+const LightRAGView = lazy(() =>
+  import('./LightRAG/LightRAGView.js').then((m) => ({ default: m.LightRAGView })),
+);
+const VoiceView = lazy(() =>
+  import('./Voice/VoiceView.js').then((m) => ({ default: m.VoiceView })),
+);
+const ClipboardView = lazy(() =>
+  import('./Clipboard/ClipboardView.js').then((m) => ({ default: m.ClipboardView })),
+);
+const ObsidianView = lazy(() =>
+  import('./Obsidian/ObsidianView.js').then((m) => ({ default: m.ObsidianView })),
+);
+const MiscView = lazy(() =>
+  import('./Misc/MiscView.js').then((m) => ({ default: m.MiscView })),
+);
 
 // Library surfaces now pull live data inside the view itself.
 // LibraryItemProps is imported so its type stays exported via this
@@ -75,6 +150,56 @@ export function useViewForId(id: string): JSX.Element {
         return <SchedulesView />;
       case 'background':
         return <BackgroundJobsView />;
+      case 'doctor':
+        return <DoctorView />;
+      case 'usage':
+        return <UsageView />;
+      case 'backup':
+        return <BackupView />;
+      case 'notifications':
+        return <NotificationsView />;
+      case 'diagnostics':
+        return <DiagnosticsView />;
+      case 'headroom':
+        return <HeadroomView />;
+      case 'eval':
+        return <EvalView />;
+      case 'chat':
+        return <ChatView />;
+      case 'projects-list':
+        return <ProjectsView />;
+      case 'claude-sessions':
+        return <ClaudeSessionsView />;
+      case 'history':
+        return <HistoryView />;
+      case 'admin':
+        return <AdminView />;
+      case 'auth':
+        return <AuthView />;
+      case 'env-vars':
+        return <EnvVarsView />;
+      case 'config':
+        return <ConfigView />;
+      case 'dialogs':
+        return <DialogsView />;
+      case 'providers':
+        return <ProvidersView />;
+      case 'mods':
+        return <ModsView />;
+      case 'update':
+        return <UpdateView />;
+      case 'artifacts':
+        return <ArtifactsView />;
+      case 'lightrag':
+        return <LightRAGView />;
+      case 'voice':
+        return <VoiceView />;
+      case 'clipboard':
+        return <ClipboardView />;
+      case 'obsidian':
+        return <ObsidianView />;
+      case 'misc':
+        return <MiscView />;
       default:
         return <OverviewView />;
     }

package/bizar-dash/src/web/v8/views/Schedules/SchedulesView.tsx

@@ -53,6 +53,7 @@ interface Schedule {
 interface SchedulesResponse extends Array<Schedule> {}
 
 interface CreateDraft {
+  id?: string;
   name: string;
   type: ScheduleType;
   schedule: string;
@@ -145,17 +146,31 @@ export function SchedulesView(): JSX.Element {
       const action: ScheduleAction = { type: draft.actionType };
       if (draft.actionType === 'agent') action.prompt = draft.prompt;
       if (draft.actionType === 'command') action.command = draft.prompt;
-      await fetchJson('/api/schedules', {
-        method: 'POST',
-        body: {
-          name: draft.name,
-          type: draft.type,
-          schedule: draft.schedule,
-          timezone: draft.timezone || 'UTC',
-          action,
-          enabled: true,
-        },
-      });
+      if (draft.id) {
+        // Edit path — PATCH the existing schedule.
+        await fetchJson(`/api/schedules/${encodeURIComponent(draft.id)}`, {
+          method: 'PATCH',
+          body: {
+            name: draft.name,
+            type: draft.type,
+            schedule: draft.schedule,
+            timezone: draft.timezone || 'UTC',
+            action,
+          },
+        });
+      } else {
+        await fetchJson('/api/schedules', {
+          method: 'POST',
+          body: {
+            name: draft.name,
+            type: draft.type,
+            schedule: draft.schedule,
+            timezone: draft.timezone || 'UTC',
+            action,
+            enabled: true,
+          },
+        });
+      }
       setDraft(null);
       refresh();
     } catch (err) {
@@ -166,7 +181,7 @@ export function SchedulesView(): JSX.Element {
   };
 
   return (
-    <Stack gap={5}>
+    <Stack gap={5} data-testid="schedules-view">
       <ViewHeader
         title="Schedules"
         description="Recurring and one-time jobs. Toggle enabled, run on demand, or create new."
@@ -244,6 +259,23 @@ export function SchedulesView(): JSX.Element {
                     </Stack>
 
                     <Inline align="center" gap={2} justify="end">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setDraft({
+                          id: s.id,
+                          name: s.name,
+                          type: s.type,
+                          schedule: s.schedule,
+                          timezone: s.timezone || 'UTC',
+                          actionType: 'agent',
+                          prompt: (s.action && (s.action as { prompt?: string }).prompt) || '',
+                        })}
+                        data-testid={`schedule-edit-${s.id}`}
+                        title="Edit"
+                      >
+                        Edit
+                      </Button>
                       <Button
                         variant="secondary"
                         size="sm"
@@ -279,7 +311,7 @@ export function SchedulesView(): JSX.Element {
       )}
 
       <Sheet open={draft !== null} onOpenChange={(o) => { if (!o) setDraft(null); }}>
-        <SheetContent side="right" title="New schedule">
+        <SheetContent side="right" title={draft?.id ? 'Edit schedule' : 'New schedule'}>
           {draft !== null && (
             <Stack gap={4} style={{ padding: 'var(--space-4)' }}>
               <Stack gap={2}>
@@ -380,7 +412,7 @@ export function SchedulesView(): JSX.Element {
                   onClick={() => { void createSchedule(); }}
                   disabled={busy || !draft.name.trim() || !draft.schedule.trim()}
                 >
-                  Create
+                  {draft?.id ? 'Save' : 'Create'}
                 </Button>
                 <Button variant="ghost" onClick={() => setDraft(null)} disabled={busy}>
                   Cancel