@polderlabs/bizar-dash 3.0.0

package/src/server/watcher.mjs

@@ -0,0 +1,81 @@
+/**
+ * cli/dashboard/watcher.mjs
+ *
+ * chokidar-backed file watcher. Translates low-level fs events into the
+ * shape the dashboard's WebSocket layer expects.
+ *
+ * The watcher ignores initial add events (the UI doesn't need a "you just
+ * started, here are 200 files that already existed" flood on connect).
+ */
+import chokidar from 'chokidar';
+
+/**
+ * @param {object} opts
+ * @param {string[]} opts.paths - files or directories to watch
+ * @param {(event: 'add'|'change'|'unlink', path: string) => void} opts.onChange
+ * @param {object} [opts.options] - extra chokidar options
+ */
+export function createWatcher({ paths, onChange, options = {} }) {
+  if (!Array.isArray(paths) || paths.length === 0) {
+    throw new Error('createWatcher requires a non-empty paths array');
+  }
+  if (typeof onChange !== 'function') {
+    throw new Error('createWatcher requires an onChange callback');
+  }
+
+  const watcher = chokidar.watch(paths, {
+    ignoreInitial: true,
+    persistent: true,
+    awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 },
+    // Ignore: any path segment named `node_modules` (anywhere), and any
+    // file/dir whose IMMEDIATE basename starts with `.` (covers .DS_Store,
+    // .swp, .bak, etc.). We must NOT walk the whole path — the watched
+    // root `~/.config/opencode/agents` contains the segment `.config`
+    // which would otherwise match and silently disable the watch.
+    ignored: (p) => {
+      const s = String(p);
+      const parts = s.split(/[\\/]/);
+      // Walk all segments — `node_modules` is fine to match anywhere.
+      if (parts.includes('node_modules')) return true;
+      // Last segment is the basename — check that ONLY, so `.config`
+      // in parent dirs doesn't disqualify the watched root.
+      const basename = parts[parts.length - 1] || '';
+      return basename.startsWith('.');
+    },
+    ...options,
+  });
+
+  const safe = (event, p) => {
+    try {
+      onChange(event, p);
+    } catch (err) {
+      // A faulty onChange must not crash the watcher
+      console.error('[dashboard watcher] onChange error:', err);
+    }
+  };
+
+  watcher.on('add', (p) => safe('add', p));
+  watcher.on('change', (p) => safe('change', p));
+  watcher.on('unlink', (p) => safe('unlink', p));
+  watcher.on('error', (err) => {
+    console.error('[dashboard watcher] chokidar error:', err);
+  });
+
+  return {
+    /** @returns {chokidar.FSWatcher} */
+    start() {
+      return watcher;
+    },
+    async stop() {
+      try {
+        await watcher.close();
+      } catch {
+        /* ignore */
+      }
+    },
+    /** Force a synthetic broadcast — useful after a self-mutation. */
+    poke(event = 'change', path = '<synthetic>') {
+      safe(event, path);
+    },
+  };
+}

package/src/web/App.tsx

@@ -0,0 +1,316 @@
+// src/App.tsx — root shell. Wires data + contexts + tab routing.
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Topbar, TABS } from './components/Topbar';
+import { ModalProvider } from './components/Modal';
+import { ToastProvider, useToast } from './components/Toast';
+import { SearchModal } from './components/SearchModal';
+import { api } from './lib/api';
+import { Ws } from './lib/ws';
+import {
+  applyTheme,
+  applyThemeTokens,
+  type Settings,
+  type SettingsResponse,
+  type Snapshot,
+  type WsMessage,
+  type WsStatus,
+  type ProjectRecord,
+  type SearchResult,
+} from './lib/types';
+import { Overview } from './views/Overview';
+import { Chat } from './views/Chat';
+import { Agents } from './views/Agents';
+import { Plans } from './views/Plans';
+import { Tasks } from './views/Tasks';
+import { Config } from './views/Config';
+import { SettingsView } from './views/Settings';
+import { Mods } from './views/Mods';
+import { Schedules } from './views/Schedules';
+import { Spinner } from './components/Spinner';
+import './styles/main.css';
+
+type ViewProps = {
+  snapshot: Snapshot;
+  settings: Settings;
+  activeTab: string;
+  setActiveTab: (id: string) => void;
+  refreshSnapshot: () => Promise<void>;
+};
+
+const VIEW_MAP: Record<string, (p: ViewProps) => React.ReactNode> = {
+  overview: Overview,
+  chat: Chat,
+  agents: Agents,
+  plans: Plans,
+  tasks: Tasks,
+  config: Config,
+  settings: SettingsView,
+  mods: Mods,
+  schedules: Schedules,
+};
+
+const VERSION = 'v3.0.0';
+
+export function App() {
+  return (
+    <ToastProvider>
+      <ModalProvider>
+        <Shell />
+      </ModalProvider>
+    </ToastProvider>
+  );
+}
+
+function Shell() {
+  const toast = useToast();
+  const [activeTab, setActiveTab] = useState<string>('overview');
+  const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
+  const [settings, setSettings] = useState<Settings | null>(null);
+  const [wsStatus, setWsStatus] = useState<WsStatus>('connecting');
+  const [bootError, setBootError] = useState<string | null>(null);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const wsRef = useRef<Ws | null>(null);
+
+  // Apply theme tokens
+  useEffect(() => {
+    if (settings?.theme) {
+      applyTheme(settings.theme);
+      applyThemeTokens(settings.theme);
+    }
+  }, [settings?.theme]);
+
+  // System-mode listener
+  useEffect(() => {
+    if (settings?.theme?.mode !== 'system') return;
+    const mql = window.matchMedia('(prefers-color-scheme: light)');
+    const handler = () => applyTheme(settings.theme.mode);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [settings?.theme?.mode]);
+
+  // Initial fetch
+  useEffect(() => {
+    let cancelled = false;
+    Promise.all([
+      api.get<Snapshot>('/snapshot').catch(() => null),
+      api.get<SettingsResponse>('/settings').catch(() => null),
+    ])
+      .then(([snap, set]) => {
+        if (cancelled) return;
+        if (snap) setSnapshot(snap);
+        if (set?.data) setSettings(set.data);
+        if (!snap && !set) setBootError('Dashboard server unreachable.');
+        if (set?.data?.ui?.defaultTab) setActiveTab(set.data.ui.defaultTab);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        const msg = (err as Error)?.message ?? 'unknown error';
+        setBootError(msg);
+        toast.error(`Failed to load: ${msg}`);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [toast]);
+
+  // WebSocket lifecycle
+  useEffect(() => {
+    const ws = new Ws();
+    wsRef.current = ws;
+    const offStatus = ws.onStatus((s) => setWsStatus(s));
+    const offMsg = ws.on((msg: WsMessage) => {
+      if (msg.type === 'snapshot' && 'data' in msg && msg.data) {
+        setSnapshot((cur) => ({ ...(cur ?? ({} as Snapshot)), ...msg.data }));
+      } else if (msg.type === 'change') {
+        const m = msg;
+        const file = m.path?.split('/').pop() || m.path || '';
+        toast.info(`File changed: ${file}`, 2500);
+        api
+          .get<Snapshot>('/snapshot')
+          .then((s) => setSnapshot((cur) => ({ ...(cur ?? ({} as Snapshot)), ...s })))
+          .catch(() => undefined);
+      } else if (msg.type === 'tasks:change') {
+        const m = msg;
+        setSnapshot((cur) => {
+          if (!cur) return cur;
+          const tasks = (cur.tasks || []).map((t) =>
+            t.id === m.task.id ? m.task : t,
+          );
+          const exists = tasks.some((t) => t.id === m.task.id);
+          return { ...cur, tasks: exists ? tasks : [m.task, ...tasks] };
+        });
+      } else if (msg.type === 'tasks:delete') {
+        const m = msg;
+        setSnapshot((cur) =>
+          cur
+            ? { ...cur, tasks: (cur.tasks || []).filter((t) => t.id !== m.id) }
+            : cur,
+        );
+      } else if (msg.type === 'settings:change') {
+        const m = msg;
+        if (m.settings) setSettings(m.settings);
+      } else if (msg.type === 'project:change') {
+        // Refresh the whole snapshot to pick up the new active project
+        api
+          .get<Snapshot>('/snapshot')
+          .then((s) => setSnapshot((cur) => ({ ...(cur ?? ({} as Snapshot)), ...s })))
+          .catch(() => undefined);
+      } else if (msg.type === 'agents:change' || msg.type === 'schedules:change') {
+        api
+          .get<Snapshot>('/snapshot')
+          .then((s) => setSnapshot((cur) => ({ ...(cur ?? ({} as Snapshot)), ...s })))
+          .catch(() => undefined);
+      }
+    });
+    return () => {
+      offStatus();
+      offMsg();
+      ws.close();
+    };
+  }, [toast]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const map: Record<string, string> = {};
+    TABS.forEach((t, i) => {
+      map[String(i + 1)] = t.id;
+    });
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setSearchOpen(true);
+        return;
+      }
+      if (e.key === '/' && !e.metaKey && !e.ctrlKey) {
+        const t = (e.target as HTMLElement | null)?.tagName?.toLowerCase();
+        if (t !== 'input' && t !== 'textarea' && !((e.target as HTMLElement)?.isContentEditable)) {
+          e.preventDefault();
+          setSearchOpen(true);
+          return;
+        }
+      }
+      const t = (e.target as HTMLElement | null)?.tagName?.toLowerCase();
+      if (
+        t === 'input' ||
+        t === 'textarea' ||
+        (e.target as HTMLElement)?.isContentEditable ||
+        e.metaKey ||
+        e.ctrlKey ||
+        e.altKey
+      )
+        return;
+      const id = map[e.key];
+      if (id) {
+        e.preventDefault();
+        setActiveTab(id);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
+
+  const View = VIEW_MAP[activeTab];
+
+  const refreshSnapshot = useMemo(
+    () => async () => {
+      try {
+        const s = await api.get<Snapshot>('/snapshot');
+        setSnapshot((cur) => ({ ...(cur ?? ({} as Snapshot)), ...s }));
+      } catch (err) {
+        toast.error(`Refresh failed: ${(err as Error).message}`);
+      }
+    },
+    [toast],
+  );
+
+  const refreshProjects = async () => {
+    try {
+      const r = await api.get<{ projects: ProjectRecord[]; active: string | null }>('/projects');
+      setSnapshot((cur) =>
+        cur ? { ...cur, projects: r.projects || [], activeProject: r.projects?.find((p) => p.id === r.active) || null } : cur,
+      );
+    } catch (err) {
+      toast.error(`Projects refresh failed: ${(err as Error).message}`);
+    }
+  };
+
+  const onActivateProject = async (id: string) => {
+    try {
+      await api.post(`/projects/${encodeURIComponent(id)}/activate`);
+      // WS will fire project:change and refresh; but also reflect locally
+      setSnapshot((cur) => {
+        if (!cur) return cur;
+        return {
+          ...cur,
+          activeProject: cur.projects.find((p) => p.id === id) || null,
+        };
+      });
+    } catch (err) {
+      toast.error(`Activate failed: ${(err as Error).message}`);
+    }
+  };
+
+  const onSearchSelect = (r: SearchResult) => {
+    const t = r.type;
+    if (t === 'agent') setActiveTab('agents');
+    else if (t === 'task') setActiveTab('tasks');
+    else if (t === 'mod') setActiveTab('mods');
+    else if (t === 'schedule') setActiveTab('schedules');
+    else if (t === 'project') {
+      const id = (r.item as ProjectRecord).id;
+      onActivateProject(id);
+    } else if (t === 'command') {
+      // No command page; just toast
+      toast.info(`/${(r.item as { name: string }).name} — run from the TUI`, 2500);
+    }
+  };
+
+  return (
+    <div className="app" data-layout={settings?.ui?.layout || 'topnav'}>
+      <Topbar
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        wsStatus={wsStatus}
+        version={VERSION}
+        activeProject={snapshot?.activeProject || null}
+        projects={snapshot?.projects || []}
+        onProjectChange={onActivateProject}
+        onProjectsRefresh={refreshProjects}
+        onOpenSearch={() => setSearchOpen(true)}
+      />
+      <main className="content">
+        {bootError && (
+          <div className="boot-error">
+            <h2>Dashboard unavailable</h2>
+            <p>{bootError}</p>
+            <p className="boot-error-hint">
+              Make sure the Bizar dashboard server is running. Try{' '}
+              <code>bizar-dash start</code> in your terminal.
+            </p>
+          </div>
+        )}
+        {!bootError && (!snapshot || !settings) && (
+          <div className="loading">
+            <Spinner size="lg" />
+            <p>Loading Bizar…</p>
+          </div>
+        )}
+        {snapshot && settings && View && (
+          <View
+            snapshot={snapshot}
+            settings={settings}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            refreshSnapshot={refreshSnapshot}
+          />
+        )}
+      </main>
+      <SearchModal
+        open={searchOpen}
+        onClose={() => setSearchOpen(false)}
+        onSelect={onSearchSelect}
+      />
+    </div>
+  );
+}

package/src/web/components/Button.tsx

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

package/src/web/components/Modal.tsx

@@ -0,0 +1,137 @@
+// src/components/Modal.tsx — modal context + provider + portal.
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+
+export type ModalProps = {
+  title?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  onClose?: () => void;
+  width?: number;
+};
+
+export type ModalApi = {
+  open: (props: ModalProps) => string;
+  close: (id?: string) => void;
+};
+
+const ModalContext = createContext<ModalApi | null>(null);
+
+export function useModal(): ModalApi {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    return { open: () => '', close: () => undefined };
+  }
+  return ctx;
+}
+
+type OpenModal = ModalProps & { id: string };
+
+export function ModalProvider({ children }: { children: ReactNode }) {
+  const [stack, setStack] = useState<OpenModal[]>([]);
+
+  const close = useCallback((id?: string) => {
+    setStack((cur) => {
+      if (!id) return [];
+      const idx = cur.findIndex((m) => m.id === id);
+      if (idx === -1) return cur;
+      // close only the top-most matching
+      if (idx !== cur.length - 1) return cur;
+      return cur.slice(0, -1);
+    });
+  }, []);
+
+  const open = useCallback((props: ModalProps) => {
+    const id = `m${Math.random().toString(36).slice(2, 9)}`;
+    setStack((cur) => [...cur, { ...props, id }]);
+    return id;
+  }, []);
+
+  // Escape key — close the topmost
+  useEffect(() => {
+    if (stack.length === 0) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        close();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [stack.length, close]);
+
+  return (
+    <ModalContext.Provider value={{ open, close }}>
+      {children}
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <div className="modal-stack" aria-hidden={stack.length === 0}>
+            {stack.map((m, idx) => (
+              <ModalShell
+                key={m.id}
+                modal={m}
+                onClose={() => {
+                  m.onClose?.();
+                  close(m.id);
+                }}
+                depth={idx}
+              />
+            ))}
+          </div>,
+          document.body,
+        )}
+    </ModalContext.Provider>
+  );
+}
+
+function ModalShell({
+  modal,
+  onClose,
+  depth,
+}: {
+  modal: OpenModal;
+  onClose: () => void;
+  depth: number;
+}) {
+  return (
+    <div
+      className="modal-backdrop"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+      style={depth > 0 ? { background: 'rgba(0,0,0,0.4)' } : undefined}
+    >
+      <div
+        className="modal"
+        role="dialog"
+        aria-modal="true"
+        style={modal.width ? { maxWidth: modal.width } : undefined}
+      >
+        {modal.title && (
+          <header className="modal-header">
+            <h2 className="modal-title">{modal.title}</h2>
+            <button
+              type="button"
+              className="icon-btn"
+              aria-label="Close"
+              onClick={onClose}
+            >
+              <X size={16} />
+            </button>
+          </header>
+        )}
+        <div className="modal-body">{modal.children}</div>
+        {modal.footer && <footer className="modal-footer">{modal.footer}</footer>}
+      </div>
+    </div>
+  );
+}