@polderlabs/bizar 2.6.1 → 3.0.0

package/src/components/Toast.tsx

@@ -1,142 +0,0 @@
-// src/components/Toast.tsx — toast context, provider hook, container.
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { CheckCircle2, AlertTriangle, AlertCircle, Info, X } from 'lucide-react';
-
-export type ToastKind = 'info' | 'success' | 'error' | 'warning';
-
-export type Toast = {
-  id: number;
-  kind: ToastKind;
-  message: string;
-};
-
-export type ToastApi = {
-  show: (message: string, kind?: ToastKind, durationMs?: number) => void;
-  info: (message: string, durationMs?: number) => void;
-  success: (message: string, durationMs?: number) => void;
-  error: (message: string, durationMs?: number) => void;
-  warning: (message: string, durationMs?: number) => void;
-  dismiss: (id: number) => void;
-  toasts: Toast[];
-};
-
-const ToastContext = createContext<ToastApi | null>(null);
-
-export function useToast(): ToastApi {
-  const ctx = useContext(ToastContext);
-  if (!ctx) {
-    // Fallback no-op so tests/Storybook don't crash
-    return {
-      show: () => undefined,
-      info: () => undefined,
-      success: () => undefined,
-      error: () => undefined,
-      warning: () => undefined,
-      dismiss: () => undefined,
-      toasts: [],
-    };
-  }
-  return ctx;
-}
-
-const ICONS: Record<ToastKind, typeof Info> = {
-  info: Info,
-  success: CheckCircle2,
-  error: AlertCircle,
-  warning: AlertTriangle,
-};
-
-export function ToastProvider({ children }: { children: React.ReactNode }) {
-  const [toasts, setToasts] = useState<Toast[]>([]);
-  const idRef = useRef(1);
-  const timersRef = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());
-
-  const dismiss = useCallback((id: number) => {
-    setToasts((cur) => cur.filter((t) => t.id !== id));
-    const timer = timersRef.current.get(id);
-    if (timer) {
-      clearTimeout(timer);
-      timersRef.current.delete(id);
-    }
-  }, []);
-
-  const show = useCallback<ToastApi['show']>(
-    (message, kind = 'info', durationMs = 4000) => {
-      const id = idRef.current++;
-      setToasts((cur) => [...cur, { id, kind, message }]);
-      if (durationMs > 0) {
-        const timer = setTimeout(() => dismiss(id), durationMs);
-        timersRef.current.set(id, timer);
-      }
-    },
-    [dismiss],
-  );
-
-  const api = useMemo<ToastApi>(
-    () => ({
-      show,
-      info: (m, d) => show(m, 'info', d),
-      success: (m, d) => show(m, 'success', d),
-      error: (m, d) => show(m, 'error', d),
-      warning: (m, d) => show(m, 'warning', d),
-      dismiss,
-      toasts,
-    }),
-    [show, dismiss, toasts],
-  );
-
-  return (
-    <ToastContext.Provider value={api}>
-      {children}
-      <ToastContainer toasts={toasts} onDismiss={dismiss} />
-    </ToastContext.Provider>
-  );
-}
-
-export function ToastContainer({
-  toasts,
-  onDismiss,
-}: {
-  toasts: Toast[];
-  onDismiss: (id: number) => void;
-}) {
-  return (
-    <div className="toast-stack" aria-live="polite">
-      {toasts.map((t) => (
-        <ToastItem key={t.id} toast={t} onDismiss={onDismiss} />
-      ))}
-    </div>
-  );
-}
-
-function ToastItem({
-  toast,
-  onDismiss,
-}: {
-  toast: Toast;
-  onDismiss: (id: number) => void;
-}) {
-  const Icon = ICONS[toast.kind];
-  return (
-    <div className={`toast toast-${toast.kind}`} role="status">
-      <Icon size={16} className="toast-icon" />
-      <span className="toast-message">{toast.message}</span>
-      <button
-        type="button"
-        className="toast-close"
-        aria-label="Dismiss"
-        onClick={() => onDismiss(toast.id)}
-      >
-        <X size={14} />
-      </button>
-    </div>
-  );
-}

package/src/components/Topbar.tsx

@@ -1,88 +0,0 @@
-// src/components/Topbar.tsx — header with brand, tab nav, ws status.
-
-import type { ReactNode } from 'react';
-import {
-  LayoutDashboard,
-  MessageSquare,
-  Bot,
-  Map,
-  Folder,
-  CheckSquare,
-  Settings2,
-  Sliders,
-  type LucideIcon,
-} from 'lucide-react';
-import { cn } from '../lib/utils';
-import type { WsStatus } from '../lib/types';
-
-export type TabDef = {
-  id: string;
-  label: string;
-  icon: LucideIcon;
-};
-
-export const TABS: TabDef[] = [
-  { id: 'overview', label: 'Overview', icon: LayoutDashboard },
-  { id: 'chat', label: 'Chat', icon: MessageSquare },
-  { id: 'agents', label: 'Agents', icon: Bot },
-  { id: 'plans', label: 'Plans', icon: Map },
-  { id: 'projects', label: 'Projects', icon: Folder },
-  { id: 'tasks', label: 'Tasks', icon: CheckSquare },
-  { id: 'config', label: 'Config', icon: Settings2 },
-  { id: 'settings', label: 'Settings', icon: Sliders },
-];
-
-export type TopbarProps = {
-  activeTab: string;
-  onTabChange: (id: string) => void;
-  wsStatus: WsStatus;
-  version: string;
-  rightSlot?: ReactNode;
-};
-
-export function Topbar({
-  activeTab,
-  onTabChange,
-  wsStatus,
-  version,
-  rightSlot,
-}: TopbarProps) {
-  return (
-    <header className="topbar">
-      <div className="brand">
-        <span className="brand-logo" aria-hidden>
-          🪩
-        </span>
-        <span className="brand-title">Bizar</span>
-        <span className="brand-version">{version}</span>
-      </div>
-      <nav className="tabs" role="tablist">
-        {TABS.map((tab) => {
-          const Icon = tab.icon;
-          const active = tab.id === activeTab;
-          return (
-            <button
-              key={tab.id}
-              type="button"
-              role="tab"
-              aria-selected={active}
-              className={cn('tab', active && 'tab-active')}
-              onClick={() => onTabChange(tab.id)}
-              title={`${tab.label} (${TABS.findIndex((t) => t.id === tab.id) + 1})`}
-            >
-              <Icon size={14} className="tab-icon" />
-              <span className="tab-label">{tab.label}</span>
-            </button>
-          );
-        })}
-      </nav>
-      <div className="topbar-right">
-        {rightSlot}
-        <div className={cn('ws-status', `ws-${wsStatus}`)} title={`WebSocket: ${wsStatus}`}>
-          <span className="ws-dot" />
-          <span className="ws-label">{wsStatus}</span>
-        </div>
-      </div>
-    </header>
-  );
-}

package/src/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Bizar Dashboard</title>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪩</text></svg>" />
-    <link rel="preconnect" href="https://rsms.me/" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/main.tsx"></script>
-  </body>
-</html>

package/src/lib/api.ts

@@ -1,71 +0,0 @@
-// src/lib/api.ts — REST client. Single instance, type-safe wrappers.
-
-export class ApiError extends Error {
-  status: number;
-  data: unknown;
-  constructor(message: string, status: number, data?: unknown) {
-    super(message);
-    this.name = 'ApiError';
-    this.status = status;
-    this.data = data;
-  }
-}
-
-class ApiClient {
-  base = '/api';
-
-  async get<T>(path: string): Promise<T> {
-    return this.req<T>('GET', path);
-  }
-  async post<T>(path: string, body?: unknown): Promise<T> {
-    return this.req<T>('POST', path, body);
-  }
-  async put<T>(path: string, body?: unknown): Promise<T> {
-    return this.req<T>('PUT', path, body);
-  }
-  async patch<T>(path: string, body?: unknown): Promise<T> {
-    return this.req<T>('PATCH', path, body);
-  }
-  async del<T = unknown>(path: string): Promise<T> {
-    return this.req<T>('DELETE', path);
-  }
-
-  private async req<T>(method: string, path: string, body?: unknown): Promise<T> {
-    const opts: RequestInit = {
-      method,
-      headers: { 'Content-Type': 'application/json' },
-    };
-    if (body !== undefined && body !== null) {
-      opts.body = typeof body === 'string' ? body : JSON.stringify(body);
-    }
-    const r = await fetch(this.base + path, opts);
-    const ct = r.headers.get('content-type') || '';
-    if (ct.includes('application/json')) {
-      const data = await r.json();
-      if (!r.ok) {
-        const msg =
-          (data && typeof data === 'object' && 'message' in data
-            ? (data as { message?: string }).message
-            : undefined) || `${method} ${path}: ${r.status}`;
-        throw new ApiError(msg, r.status, data);
-      }
-      return data as T;
-    }
-    const text = await r.text();
-    if (!r.ok) {
-      throw new ApiError(
-        `${method} ${path}: ${r.status} — ${text.slice(0, 200)}`,
-        r.status,
-        text,
-      );
-    }
-    try {
-      return JSON.parse(text) as T;
-    } catch {
-      return text as unknown as T;
-    }
-  }
-}
-
-export const api = new ApiClient();
-export { ApiClient };

package/src/lib/markdown.tsx

@@ -1,59 +0,0 @@
-// src/lib/markdown.ts — pretty JSON syntax highlighter for the JSON tree panel.
-// Replaces the old utils.highlightJSON; we render to React nodes, not strings.
-
-import { Fragment } from 'react';
-
-type Token = { kind: 'key' | 'string' | 'number' | 'boolean' | 'null' | 'punct' | 'space'; value: string };
-
-function tokenize(json: string): Token[] {
-  const out: Token[] = [];
-  const re = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b)|(\bnull\b)|([{}\[\],])|(\s+)/g;
-  let m: RegExpExecArray | null;
-  while ((m = re.exec(json)) !== null) {
-    if (m[1] !== undefined) {
-      out.push({ kind: m[2] ? 'key' : 'string', value: m[1] });
-      if (m[2]) out.push({ kind: 'punct', value: m[2] });
-    } else if (m[3] !== undefined) {
-      out.push({ kind: 'number', value: m[3] });
-    } else if (m[4] !== undefined) {
-      out.push({ kind: 'boolean', value: m[4] });
-    } else if (m[5] !== undefined) {
-      out.push({ kind: 'null', value: m[5] });
-    } else if (m[6] !== undefined) {
-      out.push({ kind: 'punct', value: m[6] });
-    } else if (m[7] !== undefined) {
-      out.push({ kind: 'space', value: m[7] });
-    }
-  }
-  return out;
-}
-
-const COLOR: Record<Token['kind'], string | undefined> = {
-  key: 'var(--syntax-key)',
-  string: 'var(--syntax-string)',
-  number: 'var(--syntax-number)',
-  boolean: 'var(--syntax-boolean)',
-  null: 'var(--syntax-null)',
-  punct: undefined,
-  space: undefined,
-};
-
-/** Render highlighted JSON as React fragments. */
-export function JsonHighlight({ value }: { value: unknown }) {
-  const json = JSON.stringify(value, null, 2);
-  if (json === undefined) return null;
-  const tokens = tokenize(json);
-  return (
-    <>
-      {tokens.map((t, i) => {
-        const color = COLOR[t.kind];
-        if (!color) return <Fragment key={i}>{t.value}</Fragment>;
-        return (
-          <span key={i} style={{ color }}>
-            {t.value}
-          </span>
-        );
-      })}
-    </>
-  );
-}

package/src/lib/types.ts

@@ -1,200 +0,0 @@
-// src/lib/types.ts — TypeScript types for the Bizar dashboard.
-// All shapes here mirror the JSON returned by cli/dashboard/api.mjs.
-
-export type ThemeName = 'dark' | 'light' | 'system';
-
-export type Agent = {
-  name: string;
-  description: string;
-  model: string;
-  mode: string;
-  file: string;
-  path: string;
-  mtime: number;
-};
-
-export type Project = {
-  name: string;
-  path: string;
-  projectMdSize: number;
-  hindsightCount: number;
-  mtime: number;
-  active: boolean;
-};
-
-export type Plan = {
-  slug: string;
-  title: string;
-  status: string;
-  source: 'worktree' | 'global' | string;
-  elementCount: number | null;
-  commentCount: number | null;
-  mtime: number;
-  planUrl: string | null;
-};
-
-export type CanvasElement = {
-  id: string;
-  type: string;
-  title?: string;
-  content?: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
-export type CanvasConnection = {
-  id: string;
-  fromElementId?: string;
-  from?: string;
-  toElementId?: string;
-  to?: string;
-};
-
-export type CanvasComment = {
-  id: string;
-  elementId?: string;
-  text: string;
-  author: string;
-  created: string;
-  thread?: { author: string; text: string }[];
-};
-
-export type CanvasViewport = { x: number; y: number; zoom: number };
-
-export type Canvas = {
-  schemaVersion?: number;
-  title: string;
-  elements: CanvasElement[];
-  connections: CanvasConnection[];
-  comments: CanvasComment[];
-  viewport: CanvasViewport;
-};
-
-export type ConfigResponse = {
-  path: string;
-  data: unknown;
-  raw: string;
-  exists: boolean;
-};
-
-export type Settings = {
-  theme: ThemeName;
-  defaultAgent: string;
-  defaultModel: string;
-  notifications: {
-    onAgentComplete: boolean;
-    onPlanApproval: boolean;
-  };
-  about: {
-    version: string;
-    homepage: string;
-    license: string;
-  };
-};
-
-export type SettingsResponse = {
-  path: string;
-  data: Settings;
-  exists: boolean;
-};
-
-export type OverviewCounts = {
-  agents: number;
-  plans: number;
-  projects: number;
-  sessions: number;
-};
-
-export type OverviewVersions = {
-  node: string;
-  platform: string;
-  projectRoot: string;
-  bizarRoot: string;
-};
-
-export type ActivityItem = {
-  ts: string;
-  kind: string;
-  [k: string]: unknown;
-};
-
-export type Overview = {
-  counts: OverviewCounts;
-  recentActivity: ActivityItem[];
-  versions: OverviewVersions;
-  generatedAt: string;
-};
-
-export type ChatMessage = {
-  role: 'user' | 'assistant' | 'system' | string;
-  content?: string;
-  message?: string;
-  agent?: string;
-  ts?: string | number;
-};
-
-export type ChatSession = {
-  id: string;
-  file: string;
-  mtime: number;
-  size: number;
-};
-
-export type ChatResponse = {
-  messages: ChatMessage[];
-  sessions: ChatSession[];
-};
-
-export type Task = {
-  id: string;
-  title: string;
-  description: string;
-  status: 'queued' | 'doing' | 'done' | string;
-  tags: string[];
-  priority: 'low' | 'normal' | 'high' | string;
-  createdAt: string;
-  updatedAt: string;
-};
-
-export type Snapshot = {
-  overview: Overview;
-  agents: Agent[];
-  plans: Plan[];
-  projects: Project[];
-  config: ConfigResponse;
-  settings: SettingsResponse;
-  tasks: Task[];
-};
-
-export type WsStatus = 'connecting' | 'connected' | 'disconnected';
-
-export type WsMessage =
-  | { type: 'snapshot'; ts: number; data: Snapshot }
-  | { type: 'change'; event: string; path: string; ts: number }
-  | { type: 'tasks:change'; task: Task }
-  | { type: 'tasks:delete'; id: string }
-  | { type: 'settings:change'; settings: Settings }
-  | { type: 'pong'; ts: number }
-  | { type: 'ping' }
-  | { type: 'refresh' };
-
-/** Resolve a theme to the actual key applied to <html data-theme="..."> */
-export function applyTheme(theme: ThemeName): 'dark' | 'light' {
-  const resolved: 'dark' | 'light' =
-    theme === 'system'
-      ? typeof window !== 'undefined' &&
-        window.matchMedia('(prefers-color-scheme: light)').matches
-        ? 'light'
-        : 'dark'
-      : theme;
-  if (typeof document !== 'undefined') {
-    if (resolved === 'light') {
-      document.documentElement.setAttribute('data-theme', 'light');
-    } else {
-      document.documentElement.removeAttribute('data-theme');
-    }
-  }
-  return resolved;
-}

package/src/lib/utils.ts

@@ -1,79 +0,0 @@
-// src/lib/utils.ts — tiny shared helpers.
-
-export function cn(...parts: (string | false | null | undefined)[]): string {
-  return parts.filter(Boolean).join(' ');
-}
-
-/** Compact relative time. */
-export function formatRelative(ts: number | string | Date | undefined | null): string {
-  if (!ts && ts !== 0) return '';
-  const t = typeof ts === 'number' ? ts : new Date(ts).getTime();
-  if (Number.isNaN(t)) return '';
-  const diff = Date.now() - t;
-  if (diff < 0) return 'just now';
-  if (diff < 60_000) return 'just now';
-  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
-  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
-  if (diff < 7 * 86_400_000) return `${Math.floor(diff / 86_400_000)}d ago`;
-  return new Date(t).toLocaleDateString();
-}
-
-/** Full localized timestamp. */
-export function formatTime(ts: number | string | Date | undefined | null): string {
-  if (!ts) return '';
-  const d = typeof ts === 'number' ? new Date(ts) : new Date(ts);
-  if (Number.isNaN(d.getTime())) return '';
-  return d.toLocaleString();
-}
-
-/** Trailing-suffix truncation. */
-export function truncate(s: string | undefined | null, max = 160): string {
-  if (!s) return '';
-  return s.length > max ? s.slice(0, max) + '…' : s;
-}
-
-/** Debounce. */
-export function debounce<T extends (...args: never[]) => void>(
-  fn: T,
-  ms = 200,
-): (...args: Parameters<T>) => void {
-  let timer: ReturnType<typeof setTimeout> | null = null;
-  return (...args: Parameters<T>) => {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => fn(...args), ms);
-  };
-}
-
-/** Color helpers (status badges). */
-export const priorityColors: Record<string, string> = {
-  low: 'var(--text-dim)',
-  normal: 'var(--info)',
-  high: 'var(--error)',
-};
-
-export const statusBadgeKind = (
-  status: string,
-): 'success' | 'warning' | 'error' | 'info' | 'accent' | '' => {
-  switch (status) {
-    case 'approved':
-    case 'done':
-      return 'success';
-    case 'draft':
-    case 'queued':
-      return '';
-    case 'in-progress':
-    case 'doing':
-      return 'info';
-    case 'rejected':
-      return 'error';
-    default:
-      return 'accent';
-  }
-};
-
-/** Cheap hash for change-detection on text (e.g. raw JSON). */
-export function hashText(s: string): string {
-  let h = 5381;
-  for (let i = 0; i < s.length; i++) h = ((h << 5) + h) ^ s.charCodeAt(i);
-  return (h >>> 0).toString(36);
-}