@polderlabs/bizar 5.1.0 → 5.2.0

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

@@ -0,0 +1,78 @@
+// src/components/EvalRunCard.tsx — v5.2.0
+//
+// Compact card summarizing a single eval run. Used in the EvalReport's
+// left rail to show the recent run history. Click selects the run.
+//
+// Status rules (per brief):
+//   failed === 0            → pass
+//   passed/total > 0.8      → warn
+//   otherwise               → fail
+
+import type { ReactNode } from 'react';
+import { Card, CardTitle, CardMeta } from './Card';
+import { cn, formatTime } from '../lib/utils';
+
+/**
+ * Summary of an eval run. The fields here are the subset returned by
+ * GET /api/eval/runs (the list endpoint) — `results` lives on the full
+ * run record returned by GET /api/eval/runs/:id and is not present here.
+ */
+export type EvalRunSummary = {
+  id: string;
+  startedAt: string;
+  finishedAt?: string;
+  suitePath: string;
+  total: number;
+  passed: number;
+  failed: number;
+};
+
+export type EvalRunCardProps = {
+  run: EvalRunSummary;
+  onClick?: () => void;
+  /** v5.2.0 — Marks the card as the currently selected run. */
+  selected?: boolean;
+  /** Optional aria-label override; falls back to the run id. */
+  ariaLabel?: string;
+};
+
+function pickStatus(run: EvalRunSummary): 'pass' | 'warn' | 'fail' {
+  if (run.total <= 0) return 'fail';
+  if (run.failed === 0) return 'pass';
+  if (run.passed / run.total > 0.8) return 'warn';
+  return 'fail';
+}
+
+export function EvalRunCard({ run, onClick, selected, ariaLabel }: EvalRunCardProps): ReactNode {
+  const status = pickStatus(run);
+  // Pass-rate as a fixed-percent string. toFixed guards against locale
+  // issues (e.g. some locales use "," as the decimal separator).
+  const passRate = run.total > 0
+    ? ((run.passed / run.total) * 100).toFixed(1)
+    : '0.0';
+  const interactive = Boolean(onClick);
+
+  return (
+    <Card
+      onClick={onClick}
+      interactive={interactive}
+      aria-label={ariaLabel ?? `Eval run ${run.id}`}
+      aria-pressed={interactive ? selected : undefined}
+      className={cn(
+        'eval-run-card',
+        selected && 'eval-run-card-selected',
+        `eval-run-${status}`,
+      )}
+    >
+      <div className="eval-run-head">
+        <CardTitle className="eval-run-title">{run.id}</CardTitle>
+        <span className={cn('eval-status', `is-${status}`)}>
+          {run.passed}/{run.total} ({passRate}%)
+        </span>
+      </div>
+      <CardMeta className="eval-run-meta">
+        {formatTime(run.startedAt)} · {run.suitePath}
+      </CardMeta>
+    </Card>
+  );
+}

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

@@ -0,0 +1,64 @@
+// src/web/components/PluginCard.tsx — card for one installed plugin with toggle, configure, and uninstall.
+
+import { Card, CardTitle, CardMeta } from './Card';
+import { Button } from './Button';
+import { Toggle } from './Toggle';
+import { PluginPermissions } from './PluginPermissions';
+
+export type InstalledPlugin = {
+  id: string;
+  name: string;
+  version: string;
+  description?: string;
+  permissions?: string[];
+  config?: Record<string, unknown>;
+  methodCount?: number;
+  invocations?: number;
+  lastInvokedAt?: string | null;
+  enabled?: boolean;
+};
+
+export type PluginCardProps = {
+  plugin: InstalledPlugin;
+  onToggle: (id: string) => void;
+  onUninstall: (id: string) => void;
+  onConfigure: (id: string) => void;
+};
+
+export function PluginCard({ plugin, onToggle, onUninstall, onConfigure }: PluginCardProps) {
+  return (
+    <Card>
+      <div className="plugin-card-head">
+        <div>
+          <CardTitle>{plugin.name}</CardTitle>
+          <CardMeta>
+            v{plugin.version} · {plugin.id}
+          </CardMeta>
+        </div>
+        <Toggle
+          checked={plugin.enabled ?? true}
+          onChange={() => onToggle(plugin.id)}
+          aria-label={`Toggle ${plugin.name} enabled`}
+        />
+      </div>
+      {plugin.description && (
+        <p className="plugin-description">{plugin.description}</p>
+      )}
+      <PluginPermissions permissions={plugin.permissions ?? []} />
+      <div className="plugin-card-actions">
+        <Button size="sm" onClick={() => onConfigure(plugin.id)}>
+          Configure
+        </Button>
+        <Button size="sm" variant="danger" onClick={() => onUninstall(plugin.id)}>
+          Uninstall
+        </Button>
+      </div>
+      <div className="plugin-card-stats">
+        {plugin.invocations ?? 0} invocations
+        {plugin.lastInvokedAt
+          ? ` · last used ${plugin.lastInvokedAt}`
+          : ' · never used'}
+      </div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,36 @@
+// src/web/components/PluginPermissions.tsx — renders permission chips for a plugin.
+
+import { Globe, FileText, Settings, Terminal, Shield, type LucideIcon } from 'lucide-react';
+
+const PERMISSION_LABELS: Record<string, { label: string; icon: LucideIcon; color: string; description: string }> = {
+  net: { label: 'Network access', icon: Globe, color: 'blue', description: 'Can make HTTP requests to external services' },
+  fs: { label: 'Filesystem', icon: FileText, color: 'yellow', description: 'Can read and write files' },
+  config: { label: 'Config access', icon: Settings, color: 'gray', description: 'Can read and write Bizar config' },
+  log: { label: 'Logging', icon: FileText, color: 'gray', description: 'Can write to the structured log' },
+  exec: { label: 'Shell execution', icon: Terminal, color: 'red', description: 'Can run shell commands' },
+};
+
+export type PluginPermissionsProps = {
+  permissions: string[];
+};
+
+export function PluginPermissions({ permissions }: PluginPermissionsProps) {
+  return (
+    <div className="plugin-permissions">
+      {permissions.map((perm) => {
+        const info = PERMISSION_LABELS[perm] ?? { label: perm, icon: Shield, color: 'gray', description: '' };
+        const Icon = info.icon;
+        return (
+          <div
+            key={perm}
+            className={`permission-chip is-${info.color}`}
+            title={info.description}
+          >
+            <Icon size={12} aria-hidden />
+            <span>{info.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,161 @@
+// src/web/components/TailscaleSettings.tsx
+//
+// v5.2 — Tailscale auth key integration UI.
+//
+// Allows users to authenticate with Tailscale using an auth key and
+// set up tailscale serve for the dashboard without using the CLI.
+import React, { useEffect, useState } from 'react';
+import { CheckCircle, Link as LinkIcon, Plug } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from './Card';
+import { Button } from './Button';
+import { api } from '../lib/api';
+import type { TailscaleStatus } from '../lib/types';
+
+type Props = {
+  /** Existing tailscale status from Settings-level fetch. If provided, used as initial value. */
+  initialStatus?: TailscaleStatus | null;
+};
+
+export function TailscaleSettings({ initialStatus }: Props) {
+  const [status, setStatus] = useState<TailscaleStatus | null>(initialStatus ?? null);
+  const [authKey, setAuthKey] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (status === null) {
+      api.get<TailscaleStatus>('/tailscale/status')
+        .then((r) => setStatus(r))
+        .catch(() => setStatus(null));
+    }
+  }, []);
+
+  const loadStatus = async () => {
+    try {
+      const r = await api.get<TailscaleStatus>('/tailscale/status');
+      setStatus(r);
+    } catch {
+      setError('Failed to load Tailscale status');
+    }
+  };
+
+  const handleAuthenticate = async () => {
+    if (!authKey.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await api.post('/tailscale/setup', { authKey: authKey.trim() });
+      await loadStatus();
+      setAuthKey('');
+    } catch (err) {
+      setError((err as Error).message || 'Authentication failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSetupServe = async () => {
+    if (!status) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await api.post('/tailscale/setup', {
+        port: status.settings?.port || 4321,
+        https: status.settings?.https !== false,
+        hostname: status.settings?.hostname || '',
+      });
+      await loadStatus();
+    } catch (err) {
+      setError((err as Error).message || 'Setup failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRemoveServe = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await api.post('/tailscale/unserve');
+      await loadStatus();
+    } catch (err) {
+      setError((err as Error).message || 'Remove failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isInstalled = status?.installed ?? false;
+  const isAuthenticated = status?.authenticated ?? false;
+  const isServeEnabled = status?.settings?.enabled ?? false;
+  const serveUrl = isServeEnabled ? `https://${status?.hostname || 'bizar-dash'}` : null;
+
+  if (!isInstalled) {
+    return (
+      <Card id="settings-tailscale-auth" data-section="tailscale">
+        <CardTitle><Plug size={14} /> Tailscale Integration</CardTitle>
+        <CardMeta>Tailscale is not installed on this machine.</CardMeta>
+        <p className="muted">
+          Install from{' '}
+          <a href="https://tailscale.com/download" target="_blank" rel="noreferrer">
+            tailscale.com/download
+          </a>
+        </p>
+      </Card>
+    );
+  }
+
+  return (
+    <Card id="settings-tailscale-auth" data-section="tailscale">
+      <CardTitle><Plug size={14} /> Tailscale Integration</CardTitle>
+      <CardMeta>Expose the dashboard over your Tailscale network using an auth key.</CardMeta>
+
+      {error && (
+        <p style={{ color: 'var(--color-error, #f85149)', fontSize: '0.85rem' }}>{error}</p>
+      )}
+
+      {isAuthenticated ? (
+        <>
+          <div className="status-row" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
+            <CheckCircle size={16} style={{ color: 'var(--color-success, #3fb950)' }} />
+            <span>Authenticated as <strong>{status?.hostname || 'unknown'}</strong></span>
+          </div>
+
+          {isServeEnabled && serveUrl ? (
+            <>
+              <div className="status-row" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
+                <LinkIcon size={16} />
+                <a href={serveUrl} target="_blank" rel="noreferrer">{serveUrl}</a>
+              </div>
+              <Button variant="secondary" size="sm" onClick={handleRemoveServe} disabled={loading}>
+                Remove serve
+              </Button>
+            </>
+          ) : (
+            <Button variant="primary" size="sm" onClick={handleSetupServe} disabled={loading}>
+              Set up Tailscale serve
+            </Button>
+          )}
+        </>
+      ) : (
+        <>
+          <p className="muted" style={{ marginBottom: '0.75rem' }}>Not authenticated with Tailscale.</p>
+          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+            <input
+              type="text"
+              className="input"
+              placeholder="tskey-..."
+              value={authKey}
+              onChange={(e) => setAuthKey(e.target.value)}
+              style={{ flex: 1, minWidth: '200px' }}
+              disabled={loading}
+            />
+            <Button variant="primary" size="sm" onClick={handleAuthenticate} disabled={loading || !authKey.trim()}>
+              Authenticate
+            </Button>
+          </div>
+        </>
+      )}
+    </Card>
+  );
+}

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

@@ -0,0 +1,31 @@
+// src/components/Toggle.tsx — toggle switch control.
+
+import { type InputHTMLAttributes, forwardRef } from 'react';
+import { cn } from '../lib/utils';
+
+export type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
+  /** Called with the new checked value on change. */
+  onChange?: (checked: boolean) => void;
+};
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+  function Toggle({ className, checked, onChange, onClick, ...rest }, ref) {
+    return (
+      <label className={cn('toggle', className)}>
+        <input
+          ref={ref}
+          type="checkbox"
+          role="switch"
+          aria-checked={checked}
+          checked={checked}
+          onChange={(e) => onChange?.(e.target.checked)}
+          onClick={(e) => {
+            onClick?.(e as unknown as React.MouseEvent<HTMLInputElement>);
+          }}
+          {...rest}
+        />
+        <span className="toggle-slider" aria-hidden />
+      </label>
+    );
+  },
+);

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

@@ -24,6 +24,7 @@ import {
   Coins,
   Brain,
   Stethoscope,
+  ClipboardCheck,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -51,8 +52,13 @@ export const TABS: TabDef[] = [
   { id: 'memory', label: 'Memory', icon: Brain },
   { id: 'mods', label: 'Mods', icon: Puzzle },
   { id: 'schedules', label: 'Schedules', icon: Clock },
+  { id: 'plugins', label: 'Plugins', icon: Puzzle },
   { id: 'history', label: 'History', icon: HistoryIcon },
   { id: 'minimax', label: 'Usage', icon: Coins },
+  // v5.2.0 — Eval framework UI. Lives next to Doctor (both are
+  // operator-quality surfaces) so the "did the last eval pass?"
+  // question is one click from the home screen.
+  { id: 'eval', label: 'Eval', icon: ClipboardCheck },
   // v6.0.0 — Doctor page. Lives between Overview and Settings so the
   // "is everything healthy?" question is always one click from the
   // home screen and from the settings surface (where an operator