@polderlabs/bizar 3.23.1 → 4.0.0

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

@@ -0,0 +1,79 @@
+// 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 opencode 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/BgStatusBadge.tsx

@@ -0,0 +1,32 @@
+// 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

@@ -0,0 +1,56 @@
+// 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>
+    );
+  },
+);

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

@@ -0,0 +1,68 @@
+// src/components/CanvasContextMenu.tsx — v3.3.2 reusable right-click context menu.
+import { useEffect, useRef } from 'react';
+import type { LucideIcon } from 'lucide-react';
+
+export type ContextMenuItem =
+  | { type?: 'item'; label: string; icon?: LucideIcon; onClick: () => void; disabled?: boolean }
+  | { type: 'separator' };
+
+export type ContextMenuState = {
+  x: number;
+  y: number;
+  items: ContextMenuItem[];
+} | null;
+
+type Props = {
+  menu: ContextMenuState;
+  onClose: () => void;
+};
+
+export function CanvasContextMenu({ menu, onClose }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menu) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    document.addEventListener('contextmenu', handler);
+    return () => {
+      document.removeEventListener('mousedown', handler);
+      document.removeEventListener('contextmenu', handler);
+    };
+  }, [menu, onClose]);
+
+  if (!menu) return null;
+
+  // Clamp so the menu doesn't overflow the viewport
+  const style: React.CSSProperties = {
+    left: Math.min(menu.x, window.innerWidth - 200),
+    top: Math.min(menu.y, window.innerHeight - 40),
+  };
+
+  return (
+    <div ref={ref} className="canvas-context-menu" style={style}>
+      {menu.items.map((item, i) =>
+        item.type === 'separator' ? (
+          <div key={`sep-${i}`} className="canvas-context-menu-sep" />
+        ) : (
+          <button
+            key={i}
+            className="canvas-context-menu-item"
+            disabled={item.disabled}
+            onClick={() => {
+              item.onClick();
+              onClose();
+            }}
+          >
+            {item.icon && <item.icon size={14} />}
+            {item.label}
+          </button>
+        ),
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+// src/components/Card.tsx — wrapper card.
+
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '../lib/utils';
+
+export type CardProps = HTMLAttributes<HTMLDivElement> & {
+  variant?: 'elevated' | 'outlined' | 'filled';
+  interactive?: boolean;
+  children?: ReactNode;
+};
+
+export function Card({
+  variant = 'elevated',
+  interactive = false,
+  className,
+  children,
+  ...rest
+}: CardProps) {
+  return (
+    <div
+      className={cn(
+        'card',
+        `card-${variant}`,
+        interactive && 'card-interactive',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardTitle({ children, className }: { children: ReactNode; className?: string }) {
+  return <h3 className={cn('card-title', className)}>{children}</h3>;
+}
+
+export function CardMeta({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn('card-meta', className)}>{children}</div>;
+}

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

@@ -0,0 +1,72 @@
+// src/components/CollapsibleSection.tsx — collapsible section.
+//
+// Stores its open/closed state in local component state (no need to
+// persist across the dashboard right now — these are visual aids).
+//
+// Usage:
+//   <CollapsibleSection title="Advanced" defaultOpen={false}>
+//     <p>Hidden until expanded.</p>
+//   </CollapsibleSection>
+
+import { useState, type ReactNode } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+type Props = {
+  title: ReactNode;
+  /** Optional right-aligned controls (e.g. a button) shown next to the title. */
+  actions?: ReactNode;
+  /** Initial open state. Default: false. */
+  defaultOpen?: boolean;
+  /** Controlled open state. If set, the parent owns the state. */
+  open?: boolean;
+  /** Called when the user toggles the section (only in uncontrolled mode). */
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+};
+
+export function CollapsibleSection({
+  title,
+  actions,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  children,
+}: Props) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const toggle = () => {
+    if (isControlled) {
+      onOpenChange?.(!controlledOpen);
+    } else {
+      setInternalOpen((v) => !v);
+    }
+  };
+
+  return (
+    <div className="collapsible-section">
+      <div
+        className="collapsible-section-header"
+        role="button"
+        tabIndex={0}
+        aria-expanded={open}
+        onClick={toggle}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggle();
+          }
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
+          <ChevronRight size={14} className={cn('collapsible-section-toggle', open && 'is-open')} />
+          <span className="collapsible-section-title">{title}</span>
+        </div>
+        {actions && <div onClick={(e) => e.stopPropagation()}>{actions}</div>}
+      </div>
+      {open && <div className="collapsible-section-body">{children}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+// src/components/CommandDialog.tsx — Generic dialog wrapper that routes to the
+// correct specific dialog component based on the DialogDescriptor's `component` field.
+
+import { VisualPlanDialog } from './VisualPlanDialog';
+import { ArtifactCreateDialog } from './ArtifactCreateDialog';
+import { ArtifactListDialog } from './ArtifactListDialog';
+import { HelpDialog } from './HelpDialog';
+import { AuditDialog } from './AuditDialog';
+import type { DialogDescriptor } from '../lib/types';
+
+export type { DialogDescriptor };
+
+function GenericDialog({ dialog, onClose }: { dialog: DialogDescriptor; onClose: () => void }) {
+  if (!dialog.data) {
+    return (
+      <div>
+        <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
+          {`Command: ${dialog.command}`}
+        </p>
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <button type="button" className="btn" onClick={onClose}>Close</button>
+        </div>
+      </div>
+    );
+  }
+
+  const { message, detail, url } = dialog.data as { message?: string; detail?: string; url?: string };
+
+  return (
+    <div>
+      <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
+        {message ?? `Command: ${dialog.command}`}
+      </p>
+      {detail && (
+        <p style={{ marginBottom: 16, color: 'var(--color-muted)', fontSize: 13 }}>
+          {detail}
+        </p>
+      )}
+      {url && (
+        <p style={{ marginBottom: 16 }}>
+          <a href={url} target="_blank" rel="noopener noreferrer">{url}</a>
+        </p>
+      )}
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <button type="button" className="btn" onClick={onClose}>Close</button>
+      </div>
+    </div>
+  );
+}
+
+export function CommandDialog({ dialog, onClose }: { dialog: DialogDescriptor; onClose: () => void }) {
+  switch (dialog.component) {
+    case 'visual-artifact':
+      return <VisualPlanDialog data={dialog.data} onClose={onClose} />;
+    case 'artifact-create':
+      return <ArtifactCreateDialog data={dialog.data} onClose={onClose} />;
+    case 'artifact-list':
+      return <ArtifactListDialog data={dialog.data} onClose={onClose} />;
+    case 'help':
+      return <HelpDialog data={dialog.data} onClose={onClose} />;
+    case 'audit':
+      return <AuditDialog data={dialog.data} onClose={onClose} />;
+    default:
+      return <GenericDialog dialog={dialog} onClose={onClose} />;
+  }
+}

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

@@ -0,0 +1,30 @@
+// src/components/EmptyState.tsx — friendly empty / error placeholder.
+
+import type { ReactNode } from 'react';
+import { Inbox } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export type EmptyStateProps = {
+  icon?: ReactNode;
+  title: string;
+  message?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+};
+
+export function EmptyState({
+  icon,
+  title,
+  message,
+  action,
+  className,
+}: EmptyStateProps) {
+  return (
+    <div className={cn('empty-state', className)}>
+      <div className="empty-icon">{icon ?? <Inbox size={32} />}</div>
+      <div className="empty-title">{title}</div>
+      {message && <div className="empty-message">{message}</div>}
+      {action && <div className="empty-action">{action}</div>}
+    </div>
+  );
+}