@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,144 +0,0 @@
-// src/web/components/ArtifactViewer.tsx — modal viewer for rendered HTML artifacts.
-import { useEffect, useState } from 'react';
-import { X, ExternalLink, Download, FileText } from 'lucide-react';
-import { useModal } from './Modal';
-import { Spinner } from './Spinner';
-import { api } from '../lib/api';
-import { logger } from '../lib/logger';
-
-type ArtifactMeta = {
-  id: string;
-  name: string;
-  contentType: string;
-  size: number;
-  createdAt: string;
-};
-
-type Props = {
-  artifactId: string;
-  onClose: () => void;
-};
-
-export function ArtifactViewer({ artifactId, onClose }: Props) {
-  const [meta, setMeta] = useState<ArtifactMeta | null>(null);
-  const [content, setContent] = useState<string>('');
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      setLoading(true);
-      try {
-        const [metaData, contentData] = await Promise.all([
-          api.get<ArtifactMeta>(`/artifacts/${encodeURIComponent(artifactId)}`),
-          fetchRawContent(artifactId),
-        ]);
-        if (!cancelled) {
-          setMeta(metaData);
-          setContent(contentData);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          logger.error('Failed to load artifact:', err);
-        }
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => { cancelled = true; };
-  }, [artifactId]);
-
-  return (
-    <div className="modal-backdrop" onClick={(e) => { e.stopPropagation(); if (e.target === e.currentTarget) onClose(); }}>
-      <div className="modal artifact-viewer-modal" role="dialog" aria-modal="true">
-        <header className="modal-header">
-          <div className="modal-title-group">
-            <FileText size={16} />
-            <h2 className="modal-title">{meta?.name || 'Artifact'}</h2>
-            {meta && (
-              <span className="artifact-viewer-meta muted">
-                {meta.contentType} · {formatBytes(meta.size)}
-              </span>
-            )}
-          </div>
-          <div className="modal-header-actions">
-            {meta && (
-              <>
-                <a
-                  href={getArtifactContentUrl(artifactId)}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="icon-btn"
-                  aria-label="Open artifact in new tab"
-                  title="Open in new tab"
-                >
-                  <ExternalLink size={16} />
-                </a>
-                <a
-                  href={getArtifactContentUrl(artifactId)}
-                  download={meta.name || 'artifact.html'}
-                  className="icon-btn"
-                  aria-label="Download artifact"
-                  title="Download"
-                >
-                  <Download size={16} />
-                </a>
-              </>
-            )}
-            <button type="button" className="icon-btn" aria-label="Close" onClick={onClose}>
-              <X size={16} />
-            </button>
-          </div>
-        </header>
-        <div className="modal-body artifact-viewer-body">
-          {loading ? (
-            <div className="artifact-viewer-loading">
-              <Spinner />
-              <span className="muted">Loading artifact…</span>
-            </div>
-          ) : content ? (
-            <iframe
-              srcDoc={content}
-              className="artifact-viewer-iframe"
-              sandbox="allow-scripts allow-forms allow-popups allow-same-origin"
-              title={meta?.name || 'Artifact'}
-            />
-          ) : (
-            <div className="artifact-viewer-empty muted">
-              <FileText size={32} />
-              <p>No content available.</p>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-// Fetch raw text content — bypasses the JSON api wrapper.
-async function fetchRawContent(artifactId: string): Promise<string> {
-  const r = await fetch(getArtifactContentUrl(artifactId));
-  if (!r.ok) throw new Error(`HTTP ${r.status}`);
-  return r.text();
-}
-
-function getArtifactContentUrl(artifactId: string): string {
-  return api.urlWithToken(`/artifacts/${encodeURIComponent(artifactId)}/content`);
-}
-
-// v3.5.7 — Open the artifact in a new browser tab at full window size.
-// The artifact's own HTML renders edge-to-edge, which is what users want
-// for visual artifacts (they're meant to be viewed, not crammed in a modal).
-export function openArtifactViewer(
-  _modal: ReturnType<typeof useModal>,
-  artifactId: string,
-): void {
-  const url = getArtifactContentUrl(artifactId);
-  window.open(url, '_blank', 'noopener,noreferrer');
-}

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

@@ -1,79 +0,0 @@
-// src/components/AuditDialog.tsx — Dialog for /audit command.
-
-import { useState } from 'react';
-import { Button } from './Button';
-import { api } from '../lib/api';
-
-type AuditDialogProps = {
-  data?: Record<string, unknown>;
-  onClose: () => void;
-};
-
-type AuditResult = {
-  ok: boolean;
-  findings: string[];
-  error?: string;
-};
-
-export function AuditDialog({ data, onClose }: AuditDialogProps) {
-  const [running, setRunning] = useState(false);
-  const [result, setResult] = useState<AuditResult | null>(null);
-
-  const handleRunAudit = async () => {
-    setRunning(true);
-    setResult(null);
-    try {
-      // The audit is run by posting to /api/chat with an /audit message,
-      // which forwards to the cline serve child where the plugin handles it.
-      // We poll for a response via the chat session.
-      const res = await api.post<AuditResult>('/chat/audit', {});
-      setResult(res);
-    } catch (err) {
-      setResult({ ok: false, findings: [], error: (err as Error).message });
-    } finally {
-      setRunning(false);
-    }
-  };
-
-  return (
-    <div>
-      {result === null ? (
-        <>
-          <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
-            Run a security audit of your Bizar agent configuration. The audit checks for common misconfigurations, exposed secrets, and insecure defaults.
-          </p>
-          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-            <Button variant="ghost" onClick={onClose}>Cancel</Button>
-            <Button variant="primary" onClick={handleRunAudit} disabled={running}>
-              {running ? 'Running…' : 'Run Audit'}
-            </Button>
-          </div>
-        </>
-      ) : (
-        <>
-          {result.ok ? (
-            <div>
-              <p style={{ marginBottom: 12, fontWeight: 600, color: 'var(--color-success)' }}>
-                Audit passed — no issues found.
-              </p>
-              {result.findings.length > 0 && (
-                <ul style={{ marginBottom: 16, paddingLeft: 20 }}>
-                  {result.findings.map((f, i) => (
-                    <li key={i} style={{ marginBottom: 4, fontSize: 13 }}>{f}</li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          ) : (
-            <p style={{ marginBottom: 16, color: 'var(--color-danger)' }}>
-              Audit failed: {result.error ?? 'unknown error'}
-            </p>
-          )}
-          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button variant="ghost" onClick={onClose}>Close</Button>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

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

@@ -1,50 +0,0 @@
-// src/web/components/AutosaveField.tsx
-// Generic auto-saving field wrapper with inline save status animation.
-
-import React from 'react';
-import { Check, Loader, AlertCircle } from 'lucide-react';
-import { useAutosave } from '../hooks/useAutosave';
-
-export type { AutosaveStatus } from '../hooks/useAutosave';
-
-export function AutosaveField<T = string>({
-  initialValue,
-  saveFn,
-  delay = 800,
-  render,
-  className,
-}: {
-  initialValue: T;
-  saveFn: (value: T) => Promise<void>;
-  delay?: number;
-  render: (props: {
-    value: T;
-    onChange: (v: T) => void;
-    onBlur: () => void;
-  }) => React.ReactNode;
-  className?: string;
-}) {
-  const { value, setValue, status, save, clearDebounce, hasPendingDebounceRef, pendingValueRef } = useAutosave(initialValue, saveFn, { delay });
-
-  const handleBlur = React.useCallback(() => {
-    // If a debounce is pending (user was actively typing), clear the timeout
-    // and save immediately — the user is done typing.
-    if (hasPendingDebounceRef.current) {
-      clearDebounce();
-      // pendingValueRef.current holds the typed value not yet saved by debounce
-      if (pendingValueRef.current !== null) save(pendingValueRef.current);
-    }
-    // If no debounce is pending: do nothing (value was already saved or unchanged).
-  }, [clearDebounce, hasPendingDebounceRef, save, pendingValueRef]);
-
-  return (
-    <div className={`autosave-field ${className || ''} ${status}`}>
-      {render({ value, onChange: setValue, onBlur: handleBlur })}
-      <span className="autosave-status" role="status" aria-live="polite">
-        {status === 'saving' && <Loader className="spinning" size={12} />}
-        {status === 'saved' && <Check size={12} />}
-        {status === 'error' && <AlertCircle size={12} />}
-      </span>
-    </div>
-  );
-}

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

@@ -1,330 +0,0 @@
-// src/web/components/BackupRestore.tsx — v4.8.0 Backup/restore card for Settings.
-
-import React, { useEffect, useState, useCallback } from 'react';
-import { Download, Upload, Trash2, RefreshCw, CheckCircle, AlertCircle, Archive } from 'lucide-react';
-import { Button } from './Button';
-import { Card, CardTitle, CardMeta } from './Card';
-import { useModal } from './Modal';
-import { useToast } from './Toast';
-import { api } from '../lib/api';
-import { cn } from '../lib/utils';
-
-type BackupEntry = {
-  path: string;
-  name: string;
-  createdAt: string;
-  sizeBytes: number;
-  sizeFormatted: string;
-  manifest: {
-    version?: string;
-    createdAt?: string;
-    label?: string;
-    paths?: string[];
-  } | null;
-};
-
-type RestoreResult = {
-  ok: boolean;
-  restored: string[];
-  skipped: string[];
-  errors: string[];
-};
-
-function RestoreDialog({
-  backup,
-  onClose,
-}: {
-  backup: BackupEntry;
-  onClose: () => void;
-}) {
-  const toast = useToast();
-  const [dryRun, setDryRun] = useState(true);
-  const [strategy, setStrategy] = useState<'overwrite' | 'merge' | 'skip'>('merge');
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState<RestoreResult | null>(null);
-
-  const doRestore = async () => {
-    setLoading(true);
-    setResult(null);
-    try {
-      const r = await api.post<RestoreResult>('/backup/restore', {
-        backupPath: backup.path,
-        dryRun,
-        conflictStrategy: strategy,
-      });
-      setResult(r);
-      if (!r.ok && r.errors.length > 0) {
-        toast.error(`Restore completed with errors.`);
-      } else if (r.ok && !dryRun) {
-        toast.success('Restore complete.');
-        onClose();
-      }
-    } catch (err) {
-      toast.error(`Restore failed: ${(err as Error).message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      {backup.manifest && (
-        <div style={{ fontSize: 12, color: 'var(--text-muted, #8b949e)' }}>
-          <p><strong>Created:</strong> {new Date(backup.createdAt).toLocaleString()}</p>
-          <p><strong>Version:</strong> {backup.manifest.version || 'unknown'}</p>
-          <p><strong>Contents:</strong> {backup.manifest.paths?.join(', ') || 'unknown'}</p>
-          {backup.manifest.label && <p><strong>Label:</strong> {backup.manifest.label}</p>}
-        </div>
-      )}
-
-      <label className="checkbox-row">
-        <input
-          type="checkbox"
-          checked={dryRun}
-          onChange={(e) => setDryRun(e.target.checked)}
-        />
-        <span>Dry-run (preview only — no files will be modified)</span>
-      </label>
-
-      <div className="field">
-        <label className="field-label">Conflict strategy</label>
-        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 6 }}>
-          {(['overwrite', 'merge', 'skip'] as const).map((s) => (
-            <button
-              key={s}
-              type="button"
-              className={cn('theme-card', strategy === s && 'theme-card-active')}
-              onClick={() => setStrategy(s)}
-            >
-              <span className="theme-card-label" style={{ fontSize: 12 }}>
-                {s === 'overwrite' ? 'Replace all' : s === 'merge' ? 'Merge (newer wins)' : 'Skip existing'}
-              </span>
-            </button>
-          ))}
-        </div>
-        <p className="field-help">
-          {strategy === 'overwrite' && 'Replace every file in the backup — existing files will be overwritten.'}
-          {strategy === 'merge' && 'Copy newer files from backup over existing files. Existing files are kept if they are newer.'}
-          {strategy === 'skip' && 'Only create files that don\'t already exist. Existing files are never modified.'}
-        </p>
-      </div>
-
-      {result && (
-        <div style={{ fontSize: 12, padding: 12, background: 'var(--surface-2, #161b22)', borderRadius: 8 }}>
-          {result.restored.length > 0 && (
-            <p style={{ color: 'var(--success, #3fb950)' }}>
-              <CheckCircle size={12} style={{ display: 'inline', marginRight: 4 }} />
-              Restored: {result.restored.join(', ')}
-            </p>
-          )}
-          {result.skipped.length > 0 && (
-            <p style={{ color: 'var(--text-muted, #8b949e)' }}>
-              Skipped: {result.skipped.join(', ')}
-            </p>
-          )}
-          {result.errors.length > 0 && (
-            <p style={{ color: 'var(--error, #f85149)' }}>
-              <AlertCircle size={12} style={{ display: 'inline', marginRight: 4 }} />
-              Errors: {result.errors.join(', ')}
-            </p>
-          )}
-        </div>
-      )}
-
-      <div className="modal-footer-actions">
-        <Button variant="ghost" onClick={onClose}>Cancel</Button>
-        <Button
-          variant="primary"
-          disabled={loading}
-          onClick={doRestore}
-        >
-          {loading ? <span className="btn-spinner" /> : null}
-          {dryRun ? 'Preview restore' : 'Restore'}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export function BackupRestoreCard() {
-  const toast = useToast();
-  const modal = useModal();
-  const [backups, setBackups] = useState<BackupEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [creating, setCreating] = useState(false);
-  const [label, setLabel] = useState('');
-
-  const loadBackups = useCallback(async () => {
-    setLoading(true);
-    try {
-      const r = await api.get<{ ok: boolean; backups: BackupEntry[] }>('/backup/list');
-      setBackups(r.backups || []);
-    } catch (err) {
-      toast.error(`Load failed: ${(err as Error).message}`);
-    } finally {
-      setLoading(false);
-    }
-  }, [toast]);
-
-  useEffect(() => { loadBackups(); }, [loadBackups]);
-
-  const onCreate = async () => {
-    setCreating(true);
-    try {
-      const r = await api.post<{ ok: boolean; path: string; sizeBytes: number; durationMs: number }>('/backup/create', {
-        label: label.trim() || null,
-      });
-      if (r.ok) {
-        toast.success('Backup created.');
-        setLabel('');
-        await loadBackups();
-      } else {
-        toast.error('Backup failed.');
-      }
-    } catch (err) {
-      toast.error(`Create failed: ${(err as Error).message}`);
-    } finally {
-      setCreating(false);
-    }
-  };
-
-  const onVerify = async (backup: BackupEntry) => {
-    try {
-      const r = await api.post<{ ok: boolean; issues: string[] }>('/backup/verify', {
-        backupPath: backup.path,
-      });
-      if (r.ok) {
-        toast.success('Backup is valid.');
-      } else {
-        toast.error(`Backup has issues: ${r.issues.join(', ')}`);
-      }
-    } catch (err) {
-      toast.error(`Verify failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onDelete = async (backup: BackupEntry) => {
-    if (!confirm(`Delete backup?\n\n${backup.path}\n\nThis cannot be undone.`)) return;
-    try {
-      const encoded = encodeURIComponent(backup.path);
-      await api.del(`/backup/${encoded}`);
-      toast.success('Backup deleted.');
-      await loadBackups();
-    } catch (err) {
-      toast.error(`Delete failed: ${(err as Error).message}`);
-    }
-  };
-
-  const onRestore = (backup: BackupEntry) => {
-    modal.open({
-      title: `Restore backup`,
-      children: <RestoreDialog backup={backup} onClose={() => modal.close()} />,
-      width: 520,
-    });
-  };
-
-  const recent = backups.slice(0, 10);
-
-  return (
-    <Card id="settings-backup" data-section="backup">
-      <CardTitle><Archive size={14} /> Backup &amp; Restore</CardTitle>
-      <CardMeta>
-        Snapshot your BizarHarness config, memory, and usage logs.
-        Backups are stored under <code>~/.local/share/bizar/backups/</code>.
-      </CardMeta>
-
-      {/* Create backup */}
-      <div style={{ display: 'flex', gap: 8, marginTop: 12, marginBottom: 16, flexWrap: 'wrap', alignItems: 'flex-end' }}>
-        <div className="field" style={{ flex: '1 1 200px', margin: 0 }}>
-          <label className="field-label" htmlFor="backup-label" style={{ fontSize: 12 }}>
-            Label <span className="muted">(optional)</span>
-          </label>
-          <input
-            id="backup-label"
-            type="text"
-            className="input"
-            placeholder="e.g. before-upgrade"
-            value={label}
-            onChange={(e) => setLabel(e.target.value)}
-            onKeyDown={(e) => { if (e.key === 'Enter') onCreate(); }}
-            style={{ fontSize: 13 }}
-          />
-        </div>
-        <Button variant="primary" onClick={onCreate} disabled={creating}>
-          {creating ? <span className="btn-spinner" /> : <Download size={14} />}
-          {creating ? 'Creating…' : 'Create backup'}
-        </Button>
-      </div>
-
-      {/* Backup list */}
-      {loading ? (
-        <div className="muted" style={{ fontSize: 12, padding: '12px 0' }}>Loading backups…</div>
-      ) : recent.length === 0 ? (
-        <div className="muted" style={{ fontSize: 12, padding: '12px 0' }}>
-          No backups yet. Create one to protect your configuration.
-        </div>
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-          {recent.map((b) => (
-            <div
-              key={b.path}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8,
-                padding: '8px 10px',
-                borderRadius: 6,
-                border: '1px solid var(--border, #30363d)',
-                background: 'var(--surface-2, #161b22)',
-                flexWrap: 'wrap',
-              }}
-            >
-              <div style={{ flex: '1 1 200px', minWidth: 0 }}>
-                <div style={{ fontSize: 12, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {b.name}
-                </div>
-                <div style={{ fontSize: 11, color: 'var(--text-muted, #8b949e)' }}>
-                  {new Date(b.createdAt).toLocaleString()} · {b.sizeFormatted}
-                  {b.manifest?.label && <> · <em>{b.manifest.label}</em></>}
-                  {b.manifest?.version && <> · v{b.manifest.version}</>}
-                </div>
-              </div>
-              <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  onClick={() => onRestore(b)}
-                  title="Restore from this backup"
-                >
-                  <Upload size={12} /> Restore
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => onVerify(b)}
-                  title="Verify backup integrity"
-                >
-                  <RefreshCw size={12} />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => onDelete(b)}
-                  title="Delete this backup"
-                  style={{ color: 'var(--error, #f85149)' }}
-                >
-                  <Trash2 size={12} />
-                </Button>
-              </div>
-            </div>
-          ))}
-          {backups.length > 10 && (
-            <div style={{ fontSize: 11, color: 'var(--text-muted, #8b949e)', textAlign: 'center', padding: '4px 0' }}>
-              + {backups.length - 10} older backup{backups.length - 10 === 1 ? '' : 's'}
-            </div>
-          )}
-        </div>
-      )}
-    </Card>
-  );
-}

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

@@ -1,32 +0,0 @@
-// src/components/BgStatusBadge.tsx — status pill for background agent instances.
-// Maps BackgroundStatus values to badge kinds from StatusBadge.
-
-import { StatusBadge, type StatusBadgeProps } from './StatusBadge';
-
-const STATUS_KIND: Record<string, StatusBadgeProps['kind']> = {
-  pending: 'info',
-  running: 'accent',
-  done: 'success',
-  failed: 'error',
-  killed: 'neutral',
-  timed_out: 'warning',
-};
-
-const STATUS_LABELS: Record<string, string> = {
-  pending: 'Pending',
-  running: 'Running',
-  done: 'Done',
-  failed: 'Failed',
-  killed: 'Killed',
-  timed_out: 'Timed out',
-};
-
-export function BgStatusBadge({ status, dot }: { status: string; dot?: boolean }) {
-  const kind = STATUS_KIND[status] || 'neutral';
-  const label = STATUS_LABELS[status] || status;
-  return (
-    <StatusBadge kind={kind} dot={dot}>
-      {label}
-    </StatusBadge>
-  );
-}

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

@@ -1,56 +0,0 @@
-// src/components/Button.tsx — typed button with variants + sizes.
-
-import { type ButtonHTMLAttributes, forwardRef } from 'react';
-import { cn } from '../lib/utils';
-
-export type ButtonVariant =
-  | 'primary'
-  | 'secondary'
-  | 'ghost'
-  | 'danger'
-  | 'accent'
-  | 'success';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  iconOnly?: boolean;
-  loading?: boolean;
-};
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(
-    {
-      variant = 'secondary',
-      size = 'md',
-      iconOnly = false,
-      loading = false,
-      disabled,
-      className,
-      children,
-      ...rest
-    },
-    ref,
-  ) {
-    return (
-      <button
-        ref={ref}
-        type={rest.type ?? 'button'}
-        disabled={disabled || loading}
-        className={cn(
-          'btn',
-          `btn-${variant}`,
-          `btn-size-${size}`,
-          iconOnly && 'btn-icon',
-          loading && 'btn-loading',
-          className,
-        )}
-        {...rest}
-      >
-        {loading ? <span className="btn-spinner" aria-hidden /> : null}
-        {children}
-      </button>
-    );
-  },
-);