@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,418 +0,0 @@
-// src/web/components/HeadroomSettings.tsx
-//
-// v1.0.0 — Headroom settings card for the Settings view.
-// Displays live status and provides controls for install, wrap, proxy, and configuration.
-import React, { useEffect, useState, useCallback } from 'react';
-import {
-  Activity,
-  CheckCircle,
-  XCircle,
-  Download,
-  Play,
-  Square,
-  RefreshCw,
-  ExternalLink,
-  Zap,
-} from 'lucide-react';
-import { Card, CardTitle, CardMeta } from '../components/Card';
-import { Button } from '../components/Button';
-import { useToast } from '../components/Toast';
-import { api } from '../lib/api';
-import { type HeadroomSettings } from '../lib/types';
-
-type HeadroomStatus = {
-  installed: boolean;
-  version: string | null;
-  proxyRunning: boolean;
-  proxyPort: number | null;
-  proxyPid: number | null;
-  wrapped: boolean;
-  healthy: 'ok' | 'warn' | 'fail';
-  messages: string[];
-};
-
-type HeadroomStats = {
-  tokensSaved?: number;
-  compressionRatio?: number;
-  cacheHits?: number;
-  transforms?: number;
-  error?: string;
-};
-
-const BACKEND_OPTIONS = [
-  { value: 'anthropic', label: 'Anthropic' },
-  { value: 'anyllm', label: 'AnyLLM' },
-  { value: 'litellm-anthropic', label: 'LiteLLM (Anthropic)' },
-  { value: 'litellm-openai', label: 'LiteLLM (OpenAI)' },
-];
-
-type Props = {
-  settings: HeadroomSettings;
-  onPatch: (patch: Partial<HeadroomSettings>) => void;
-};
-
-export function HeadroomSettingsCard({ settings, onPatch }: Props) {
-  const toast = useToast();
-  const [status, setStatus] = useState<HeadroomStatus | null>(null);
-  const [stats, setStats] = useState<HeadroomStats | null>(null);
-  const [loadingStatus, setLoadingStatus] = useState(false);
-  const [installing, setInstalling] = useState(false);
-  const [wrapping, setWrapping] = useState(false);
-  const [unwrapping, setUnwrapping] = useState(false);
-  const [startingProxy, setStartingProxy] = useState(false);
-  const [stoppingProxy, setStoppingProxy] = useState(false);
-
-  const loadStatus = useCallback(async () => {
-    setLoadingStatus(true);
-    try {
-      const [s, st] = await Promise.all([
-        api.get<HeadroomStatus>('/headroom/status'),
-        api.get<HeadroomStats>('/headroom/stats?hours=24').catch(() => ({ error: 'no stats' })),
-      ]);
-      setStatus(s);
-      if (!st.error) setStats(st);
-    } catch (err) {
-      toast.error(`Failed to load Headroom status: ${(err as Error).message}`);
-    } finally {
-      setLoadingStatus(false);
-    }
-  }, [toast]);
-
-  useEffect(() => {
-    loadStatus();
-  }, [loadStatus]);
-
-  const handleInstall = async () => {
-    setInstalling(true);
-    try {
-      const r = await api.post<{ ok: boolean; installed: boolean; method: string }>('/headroom/install', { force: true });
-      if (r.installed) {
-        toast.success(`Headroom installed via ${r.method}.`);
-        await loadStatus();
-      } else {
-        toast.error('Headroom install failed. Try: pip install "headroom-ai[all]"');
-      }
-    } catch (err) {
-      toast.error(`Install failed: ${(err as Error).message}`);
-    } finally {
-      setInstalling(false);
-    }
-  };
-
-  const handleWrap = async () => {
-    setWrapping(true);
-    try {
-      const r = await api.post<{ ok: boolean }>('/headroom/wrap', { port: settings.port });
-      if (r.ok) {
-        toast.success('cline wrapped with Headroom.');
-        await loadStatus();
-      } else {
-        toast.error('Wrap failed.');
-      }
-    } catch (err) {
-      toast.error(`Wrap failed: ${(err as Error).message}`);
-    } finally {
-      setWrapping(false);
-    }
-  };
-
-  const handleUnwrap = async () => {
-    setUnwrapping(true);
-    try {
-      const r = await api.post<{ ok: boolean }>('/headroom/unwrap');
-      if (r.ok) {
-        toast.success('cline unwrapped from Headroom.');
-        await loadStatus();
-      } else {
-        toast.error('Unwrap failed.');
-      }
-    } catch (err) {
-      toast.error(`Unwrap failed: ${(err as Error).message}`);
-    } finally {
-      setUnwrapping(false);
-    }
-  };
-
-  const handleStartProxy = async () => {
-    setStartingProxy(true);
-    try {
-      const r = await api.post<{ ok: boolean }>('/headroom/proxy/start', {
-        port: settings.port,
-        host: settings.host,
-      });
-      if (r.ok) {
-        toast.success(`Headroom proxy started on ${settings.host}:${settings.port}.`);
-        await loadStatus();
-      } else {
-        toast.error('Proxy start failed.');
-      }
-    } catch (err) {
-      toast.error(`Proxy start failed: ${(err as Error).message}`);
-    } finally {
-      setStartingProxy(false);
-    }
-  };
-
-  const handleStopProxy = async () => {
-    setStoppingProxy(true);
-    try {
-      const r = await api.post<{ ok: boolean }>('/headroom/proxy/stop');
-      if (r.ok) {
-        toast.success('Headroom proxy stopped.');
-        await loadStatus();
-      } else {
-        toast.error('Proxy stop failed.');
-      }
-    } catch (err) {
-      toast.error(`Proxy stop failed: ${(err as Error).message}`);
-    } finally {
-      setStoppingProxy(false);
-    }
-  };
-
-  const handleOpenDashboard = async () => {
-    try {
-      const { spawn } = await import('node:child_process');
-      spawn('headroom', ['dashboard'], { detached: true, stdio: 'ignore' });
-    } catch {
-      toast.error('Could not open Headroom dashboard. Run `headroom dashboard` manually.');
-    }
-  };
-
-  const { installed, version, proxyRunning, proxyPort, wrapped } = status || {};
-  const ratio = stats?.compressionRatio ?? 0;
-  const saved = stats?.tokensSaved ?? 0;
-
-  return (
-    <div id="settings-headroom" data-section="headroom">
-      <Card>
-        <CardTitle>
-          <Activity size={14} style={{ color: proxyRunning ? 'var(--success)' : 'var(--text-dim)' }} />
-          Headroom
-          {installed && version && (
-            <span style={{ fontSize: 11, color: 'var(--text-dim)', marginLeft: 6 }}>
-              v{version} {proxyRunning ? '✓' : '✗'}
-            </span>
-          )}
-          {!installed && (
-            <span style={{ fontSize: 11, color: 'var(--error)', marginLeft: 6 }}>not installed</span>
-          )}
-        </CardTitle>
-        <CardMeta>
-          Context compression for token efficiency. Compresses tool outputs, logs, and conversation
-          history by 60–95% before they reach the model.
-        </CardMeta>
-
-        {/* Live status row */}
-        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 12, marginBottom: 12 }}>
-          <div className="headroom-status-item">
-            {installed ? (
-              <CheckCircle size={12} style={{ color: 'var(--success)' }} />
-            ) : (
-              <XCircle size={12} style={{ color: 'var(--error)' }} />
-            )}
-            <span>{installed ? 'Installed' : 'Not installed'}</span>
-          </div>
-          <div className="headroom-status-item">
-            {proxyRunning ? (
-              <CheckCircle size={12} style={{ color: 'var(--success)' }} />
-            ) : (
-              <XCircle size={12} style={{ color: 'var(--text-dim)' }} />
-            )}
-            <span>Proxy {proxyRunning ? `${proxyPort} ✓` : 'stopped'}</span>
-          </div>
-          <div className="headroom-status-item">
-            {wrapped ? (
-              <CheckCircle size={12} style={{ color: 'var(--success)' }} />
-            ) : (
-              <XCircle size={12} style={{ color: 'var(--text-dim)' }} />
-            )}
-            <span>cline {wrapped ? 'wrapped' : 'not wrapped'}</span>
-          </div>
-        </div>
-
-        {/* Stats */}
-        {(saved > 0 || ratio > 0) && (
-          <div style={{ display: 'flex', gap: 24, marginBottom: 12 }}>
-            <div>
-              <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--success)' }}>
-                {ratio > 0 ? `${Math.round(ratio * 100)}%` : '—'}
-              </div>
-              <div className="muted" style={{ fontSize: 11 }}>Compression ratio</div>
-            </div>
-            <div>
-              <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--accent)' }}>
-                {saved > 0 ? saved.toLocaleString() : '—'}
-              </div>
-              <div className="muted" style={{ fontSize: 11 }}>Tokens saved (24h)</div>
-            </div>
-          </div>
-        )}
-
-        {/* Action buttons */}
-        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 8 }}>
-          {!installed ? (
-            <Button variant="primary" size="sm" onClick={handleInstall} disabled={installing}>
-              {installing ? <span className="btn-spinner" /> : <Download size={13} />}
-              {installing ? 'Installing…' : 'Install Headroom'}
-            </Button>
-          ) : (
-            <>
-              <Button
-                variant="secondary"
-                size="sm"
-                onClick={handleWrap}
-                disabled={wrapping || wrapped}
-                title={wrapped ? 'cline is already wrapped' : 'Wrap cline to route through Headroom proxy'}
-              >
-                {wrapping ? <span className="btn-spinner" /> : <Zap size={13} />}
-                {wrapping ? 'Wrapping…' : wrapped ? 'Wrapped ✓' : 'Wrap cline'}
-              </Button>
-              {wrapped && (
-                <Button variant="ghost" size="sm" onClick={handleUnwrap} disabled={unwrapping}>
-                  {unwrapping ? <span className="btn-spinner" /> : <RefreshCw size={13} />}
-                  {unwrapping ? 'Unwrapping…' : 'Unwrap'}
-                </Button>
-              )}
-            </>
-          )}
-
-          {installed && (
-            <>
-              {proxyRunning ? (
-                <Button variant="secondary" size="sm" onClick={handleStopProxy} disabled={stoppingProxy}>
-                  {stoppingProxy ? <span className="btn-spinner" /> : <Square size={13} />}
-                  {stoppingProxy ? 'Stopping…' : 'Stop proxy'}
-                </Button>
-              ) : (
-                <Button variant="secondary" size="sm" onClick={handleStartProxy} disabled={startingProxy}>
-                  {startingProxy ? <span className="btn-spinner" /> : <Play size={13} />}
-                  {startingProxy ? 'Starting…' : 'Start proxy'}
-                </Button>
-              )}
-              <Button variant="ghost" size="sm" onClick={handleOpenDashboard}>
-                <ExternalLink size={13} />
-                Dashboard
-              </Button>
-            </>
-          )}
-
-          <Button variant="ghost" size="sm" onClick={loadStatus} disabled={loadingStatus}>
-            <RefreshCw size={13} className={loadingStatus ? 'spin' : ''} />
-          </Button>
-        </div>
-
-        {/* Settings */}
-        <div style={{ marginTop: 16 }}>
-          <label className="checkbox-row">
-            <input
-              type="checkbox"
-              checked={settings.enabled}
-              onChange={(e) => onPatch({ enabled: e.target.checked })}
-            />
-            <span>Enable Headroom</span>
-          </label>
-          <label className="checkbox-row">
-            <input
-              type="checkbox"
-              checked={settings.autoInstall}
-              onChange={(e) => onPatch({ autoInstall: e.target.checked })}
-            />
-            <span>Auto-install if missing on dashboard startup</span>
-          </label>
-          <label className="checkbox-row">
-            <input
-              type="checkbox"
-              checked={settings.autoStart}
-              onChange={(e) => onPatch({ autoStart: e.target.checked })}
-            />
-            <span>Auto-start proxy on dashboard startup</span>
-          </label>
-          <label className="checkbox-row">
-            <input
-              type="checkbox"
-              checked={settings.autoWrap}
-              onChange={(e) => onPatch({ autoWrap: e.target.checked })}
-            />
-            <span>Auto-wrap cline on dashboard startup</span>
-          </label>
-          <label className="checkbox-row">
-            <input
-              type="checkbox"
-              checked={settings.routeAllProviders}
-              onChange={(e) => onPatch({ routeAllProviders: e.target.checked })}
-            />
-            <span>Route all providers through Headroom proxy</span>
-          </label>
-
-          <div className="task-form-row" style={{ marginTop: 12 }}>
-            <div className="task-form-field">
-              <label className="field-label">Proxy port</label>
-              <input
-                type="number"
-                className="input"
-                value={settings.port}
-                min={1}
-                max={65535}
-                onChange={(e) => onPatch({ port: Math.max(1, Math.min(65535, parseInt(e.target.value, 10) || 8787)) })}
-              />
-            </div>
-            <div className="task-form-field">
-              <label className="field-label">Proxy host</label>
-              <input
-                type="text"
-                className="input"
-                value={settings.host}
-                onChange={(e) => onPatch({ host: e.target.value })}
-              />
-            </div>
-          </div>
-
-          <div className="task-form-row">
-            <div className="task-form-field">
-              <label className="field-label">Backend</label>
-              <select
-                className="select"
-                value={settings.backend}
-                onChange={(e) => onPatch({ backend: e.target.value })}
-              >
-                {BACKEND_OPTIONS.map((o) => (
-                  <option key={o.value} value={o.value}>{o.label}</option>
-                ))}
-              </select>
-            </div>
-            <div className="task-form-field">
-              <label className="field-label">Monthly budget (USD)</label>
-              <input
-                type="number"
-                className="input"
-                value={settings.budget}
-                min={0}
-                step={1}
-                onChange={(e) => onPatch({ budget: Math.max(0, parseFloat(e.target.value) || 0) })}
-              />
-              <span className="field-help">0 = unlimited</span>
-            </div>
-          </div>
-
-          <label className="checkbox-row">
-            <input
-              type="checkbox"
-              checked={settings.outputShaper}
-              onChange={(e) => onPatch({ outputShaper: e.target.checked })}
-            />
-            <span>Enable output shaper</span>
-          </label>
-          <label className="checkbox-row">
-            <input
-              type="checkbox"
-              checked={settings.telemetry}
-              onChange={(e) => onPatch({ telemetry: e.target.checked })}
-            />
-            <span>Enable telemetry</span>
-          </label>
-        </div>
-      </Card>
-    </div>
-  );
-}

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

@@ -1,158 +0,0 @@
-// src/web/components/HeadroomStatus.tsx
-//
-// v1.0.0 — Small status widget showing Headroom proxy status and live stats.
-// Shown on the Overview tab or wherever fits in the dashboard layout.
-import React, { useEffect, useState } from 'react';
-import { Activity, CheckCircle, XCircle, ExternalLink } from 'lucide-react';
-import { Card, CardTitle } from '../components/Card';
-import { api } from '../lib/api';
-import { cn } from '../lib/utils';
-
-type HeadroomStatus = {
-  installed: boolean;
-  version: string | null;
-  proxyRunning: boolean;
-  proxyPort: number | null;
-  proxyPid: number | null;
-  wrapped: boolean;
-  healthy: 'ok' | 'warn' | 'fail';
-  messages: string[];
-};
-
-type HeadroomStats = {
-  tokensSaved?: number;
-  compressionRatio?: number;
-  cacheHits?: number;
-  transforms?: number;
-  error?: string;
-};
-
-export function HeadroomStatus() {
-  const [status, setStatus] = useState<HeadroomStatus | null>(null);
-  const [stats, setStats] = useState<HeadroomStats | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const [s, st] = await Promise.all([
-          api.get<HeadroomStatus>('/headroom/status'),
-          api.get<HeadroomStats>('/headroom/stats?hours=24').catch(() => ({ error: 'no stats' })),
-        ]);
-        if (!cancelled) {
-          setStatus(s);
-          setStats(st.error ? null : st);
-        }
-      } catch {
-        if (!cancelled) setStatus(null);
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => { cancelled = true; };
-  }, []);
-
-  if (loading) {
-    return (
-      <Card>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <Activity size={14} className="spin" style={{ animation: 'spin 1s linear infinite' }} />
-          <span className="muted">Loading Headroom status…</span>
-        </div>
-      </Card>
-    );
-  }
-
-  if (!status) {
-    return (
-      <Card>
-        <div style={{ color: 'var(--error, #f85149)', display: 'flex', alignItems: 'center', gap: 8 }}>
-          <XCircle size={14} />
-          <span>Headroom unavailable</span>
-        </div>
-      </Card>
-    );
-  }
-
-  const { installed, version, proxyRunning, proxyPort, proxyPid, wrapped, healthy } = status;
-  const isHealthy = healthy === 'ok';
-  const ratio = stats?.compressionRatio ?? 0;
-  const saved = stats?.tokensSaved ?? 0;
-
-  return (
-    <Card>
-      <CardTitle>
-        <Activity size={14} style={{ color: isHealthy ? 'var(--success, #3fb950)' : 'var(--warning, #d29922)' }} />
-        Headroom
-        {installed && version && (
-          <span style={{ fontSize: 11, color: 'var(--text-dim)', marginLeft: 4 }}>v{version}</span>
-        )}
-      </CardTitle>
-
-      {/* Status pills */}
-      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
-        {installed ? (
-          <span className="status-pill status-pill-ok">
-            <CheckCircle size={10} /> Installed
-          </span>
-        ) : (
-          <span className="status-pill status-pill-error">
-            <XCircle size={10} /> Not installed
-          </span>
-        )}
-        {proxyRunning ? (
-          <span className="status-pill status-pill-ok">
-            <CheckCircle size={10} /> Proxy {proxyPort ? `@ ${proxyPort}` : ''}
-            {proxyPid ? ` (PID ${proxyPid})` : ''}
-          </span>
-        ) : (
-          <span className="status-pill status-pill-warn">
-            <XCircle size={10} /> Proxy stopped
-          </span>
-        )}
-        {wrapped ? (
-          <span className="status-pill status-pill-ok">
-            <CheckCircle size={10} /> Wrapped
-          </span>
-        ) : (
-          <span className="status-pill status-pill-warn">
-            <XCircle size={10} /> Not wrapped
-          </span>
-        )}
-      </div>
-
-      {/* Stats row */}
-      {(saved > 0 || ratio > 0) && (
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
-          <div className="stat-block">
-            <div className="stat-big">{ratio > 0 ? `${Math.round(ratio * 100)}%` : '—'}</div>
-            <div className="stat-label">Compression ratio</div>
-          </div>
-          <div className="stat-block">
-            <div className="stat-big">{saved > 0 ? saved.toLocaleString() : '—'}</div>
-            <div className="stat-label">Tokens saved (24h)</div>
-          </div>
-        </div>
-      )}
-
-      {/* Actions */}
-      <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
-        <a
-          href="#settings-headroom"
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 4,
-            fontSize: 12,
-            color: 'var(--accent, #8b5cf6)',
-            textDecoration: 'none',
-          }}
-        >
-          <ExternalLink size={12} />
-          Open settings
-        </a>
-      </div>
-    </Card>
-  );
-}

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

@@ -1,55 +0,0 @@
-// src/components/HelpDialog.tsx — Dialog for /help and /bizar commands.
-
-import { Button } from './Button';
-
-type HelpDialogProps = {
-  data?: Record<string, unknown>;
-  onClose: () => void;
-};
-
-type CmdEntry = { cmd: string; desc: string };
-
-export function HelpDialog({ data, onClose }: HelpDialogProps) {
-  const commands = (data?.commands as CmdEntry[]) ?? [];
-  const templates = (data?.templates as string[]) ?? [];
-  const statuses = (data?.statuses as string[]) ?? [];
-
-  return (
-    <div>
-      {commands.length > 0 ? (
-        <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 16, fontSize: 13 }}>
-          <tbody>
-            {commands.map((entry) => (
-              <tr key={entry.cmd} style={{ borderBottom: '1px solid var(--color-border)' }}>
-                <td style={{ padding: '5px 8px 5px 0', whiteSpace: 'nowrap' }}>
-                  <code style={{ fontSize: 12 }}>{entry.cmd}</code>
-                </td>
-                <td style={{ padding: '5px 0', color: 'var(--color-muted)' }}>{entry.desc}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      ) : (
-        <p style={{ marginBottom: 16, color: 'var(--color-muted)' }}>No commands available.</p>
-      )}
-
-      {templates.length > 0 && (
-        <div style={{ marginBottom: 12 }}>
-          <p style={{ fontSize: 12, color: 'var(--color-muted)', marginBottom: 4 }}>Available templates:</p>
-          <p style={{ fontSize: 13 }}>{templates.join(', ')}</p>
-        </div>
-      )}
-
-      {statuses.length > 0 && (
-        <div style={{ marginBottom: 12 }}>
-          <p style={{ fontSize: 12, color: 'var(--color-muted)', marginBottom: 4 }}>Available statuses:</p>
-          <p style={{ fontSize: 13 }}>{statuses.join(', ')}</p>
-        </div>
-      )}
-
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Button variant="ghost" onClick={onClose}>Close</Button>
-      </div>
-    </div>
-  );
-}