@polderlabs/bizar-dash 3.0.0

package/src/web/lib/markdown.tsx

@@ -0,0 +1,59 @@
+// 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/web/lib/types.ts

@@ -0,0 +1,388 @@
+// src/lib/types.ts — TypeScript types for the Bizar dashboard.
+// All shapes here mirror the JSON returned by src/server/api.mjs.
+
+export type ThemeName = 'dark' | 'light' | 'system';
+
+export type ThemeSettings = {
+  mode: ThemeName;
+  accent: string;
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+  fontFamily: string;
+  fontSize: number;
+  compactMode: boolean;
+  animations: boolean;
+};
+
+export type UiSettings = {
+  layout: 'topnav' | 'sidebar' | 'both';
+  showHeader: boolean;
+  showStatusBar: boolean;
+  defaultTab: string;
+  accentColor?: string;
+};
+
+export type Agent = {
+  name: string;
+  description: string;
+  model: string;
+  mode: string;
+  file: string;
+  path: string;
+  mtime: number;
+  tools?: string[];
+  color?: string;
+  prompt?: string;
+  permissions?: unknown;
+};
+
+export type ProjectRecord = {
+  id: string;
+  name: string;
+  path: string;
+  lastAccessed?: string;
+  status: 'active' | 'inactive' | 'error' | string;
+  summary?: string;
+};
+
+export type ProjectsResponse = {
+  projects: ProjectRecord[];
+  active: string | null;
+};
+
+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: ThemeSettings;
+  ui: UiSettings;
+  defaultAgent: string;
+  defaultModel: string;
+  notifications: {
+    onAgentComplete: boolean;
+    onPlanApproval: boolean;
+  };
+  dashboard: {
+    autoLaunchWeb: boolean;
+  };
+  service: {
+    enabled: boolean;
+    autostart: 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;
+  activeProject?: string | null;
+};
+
+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;
+  pinned?: boolean;
+};
+
+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;
+  assignee?: string | null;
+  parent?: string | null;
+  dependencies?: string[];
+  timeSpent?: number;
+  recurring?: { cron?: string; lastGenerated?: string } | null;
+  attachments?: string[];
+  comments?: { id: string; text: string; createdAt: string }[];
+  activity?: { id: string; type: string; ts: string; data?: unknown }[];
+  createdAt: string;
+  updatedAt: string;
+  completedAt?: string | null;
+};
+
+export type Schedule = {
+  id: string;
+  name: string;
+  type: 'cron' | 'interval' | 'once';
+  schedule: string;
+  action: {
+    type: 'command' | 'agent' | 'webhook';
+    target: string;
+    method?: string;
+    body?: unknown;
+  };
+  enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+  lastRun: string | null;
+  lastResult: string | null;
+  nextRun: string | null;
+  history: { ts: string; result: string; error: string | null }[];
+};
+
+export type Mod = {
+  id: string;
+  name: string;
+  version: string;
+  author: string;
+  description: string;
+  bizar: string;
+  type: string;
+  enabled: boolean;
+  permissions: string[];
+  entry: Record<string, string>;
+  files: { category: string; name: string; path: string }[];
+  path: string;
+  installedAt: string | null;
+};
+
+export type Provider = {
+  id: string;
+  name: string;
+  baseURL: string;
+  apiKey: string;
+  models: string[];
+  enabled: boolean;
+};
+
+export type McpServer = {
+  id: string;
+  command: string;
+  args: string[];
+  env: Record<string, string>;
+  enabled: boolean;
+};
+
+export type DiagnosticItem = {
+  line: string;
+  ts: string | null;
+};
+
+export type Diagnostics = {
+  version: string;
+  uptime: number;
+  uptimeMs: number;
+  nodeVersion: string;
+  platform: string;
+  memory: { rss: number; heapUsed: number; heapTotal: number };
+  counts: {
+    agents: number;
+    plans: number;
+    tasks: number;
+    projects: number;
+    activeProject: string | null;
+    mods: number;
+    schedules: number;
+    providers: number;
+    mcps: number;
+  };
+  errors: DiagnosticItem[];
+  service: { running: boolean; pid?: number; error?: string };
+};
+
+export type TailscaleStatus = {
+  installed: boolean;
+  version: string | null;
+  authenticated: boolean;
+  backend: string;
+  hostname: string;
+  settings: { enabled: boolean; port: number; https: boolean; hostname: string };
+};
+
+export type SearchResult = {
+  type: string;
+  score: number;
+  item: Record<string, unknown>;
+};
+
+export type Snapshot = {
+  overview: Overview;
+  agents: Agent[];
+  plans: Plan[];
+  projects: ProjectRecord[];
+  activeProject: ProjectRecord | null;
+  config: ConfigResponse;
+  settings: SettingsResponse;
+  tasks: Task[];
+  mods: Mod[];
+  schedules: Schedule[];
+  providers: Provider[];
+  mcps: McpServer[];
+};
+
+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: 'agents:change' }
+  | { type: 'schedules:change' }
+  | { type: 'project:change'; project?: ProjectRecord }
+  | { type: 'chat:message'; message: ChatMessage }
+  | { type: 'pong'; ts: number }
+  | { type: 'ping' }
+  | { type: 'refresh' };
+
+/** Resolve a theme to the actual key applied to <html data-theme="..."> */
+export function applyTheme(themeName: ThemeName | ThemeSettings): 'dark' | 'light' {
+  const mode = typeof themeName === 'string' ? themeName : themeName.mode;
+  const resolved: 'dark' | 'light' =
+    mode === 'system'
+      ? typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-color-scheme: light)').matches
+        ? 'light'
+        : 'dark'
+      : mode === 'light'
+        ? 'light'
+        : 'dark';
+  if (typeof document !== 'undefined') {
+    if (resolved === 'light') {
+      document.documentElement.setAttribute('data-theme', 'light');
+    } else {
+      document.documentElement.removeAttribute('data-theme');
+    }
+  }
+  return resolved;
+}
+
+/** Apply the full theme object — sets CSS variables. */
+export function applyThemeTokens(theme: ThemeSettings) {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  root.style.setProperty('--accent', theme.accent);
+  root.style.setProperty('--success', theme.success);
+  root.style.setProperty('--warning', theme.warning);
+  root.style.setProperty('--error', theme.error);
+  root.style.setProperty('--info', theme.info);
+  // Derive accent-bg/border lightly
+  root.style.setProperty('--accent-bg', hexToRgba(theme.accent, 0.12));
+  root.style.setProperty('--accent-border', hexToRgba(theme.accent, 0.4));
+  if (theme.fontFamily) {
+    root.style.setProperty('--font-sans', `'${theme.fontFamily}', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif`);
+  }
+  if (theme.fontSize) {
+    root.style.setProperty('--base-font-size', `${theme.fontSize}px`);
+  }
+  root.dataset.compactMode = theme.compactMode ? 'true' : 'false';
+  root.dataset.animations = theme.animations ? 'true' : 'false';
+}
+
+function hexToRgba(hex: string, alpha: number) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex || '');
+  if (!m) return `rgba(139, 92, 246, ${alpha})`;
+  const n = parseInt(m[1], 16);
+  const r = (n >> 16) & 255;
+  const g = (n >> 8) & 255;
+  const b = n & 255;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}

package/src/web/lib/utils.ts

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

package/src/web/lib/ws.ts

@@ -0,0 +1,132 @@
+// src/lib/ws.ts — WebSocket with auto-reconnect + status + handlers.
+import type { WsMessage, WsStatus } from './types';
+
+type Handler = (msg: WsMessage) => void;
+type StatusHandler = (status: WsStatus) => void;
+
+export class Ws {
+  private url: string;
+  private handlers = new Set<Handler>();
+  private statusHandlers = new Set<StatusHandler>();
+  private ws: WebSocket | null = null;
+  private reconnectDelay = 1000;
+  private readonly maxReconnectDelay = 15000;
+  private _status: WsStatus = 'connecting';
+  private pingTimer: ReturnType<typeof setInterval> | null = null;
+  private closed = false;
+
+  constructor(url?: string) {
+    this.url =
+      url ||
+      (typeof location !== 'undefined'
+        ? `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`
+        : 'ws://localhost/ws');
+    this.connect();
+  }
+
+  on(handler: Handler): () => void {
+    this.handlers.add(handler);
+    return () => {
+      this.handlers.delete(handler);
+    };
+  }
+
+  onStatus(handler: StatusHandler): () => void {
+    this.statusHandlers.add(handler);
+    // Fire current status immediately
+    handler(this._status);
+    return () => {
+      this.statusHandlers.delete(handler);
+    };
+  }
+
+  get status(): WsStatus {
+    return this._status;
+  }
+
+  send(msg: unknown): boolean {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(msg));
+      return true;
+    }
+    return false;
+  }
+
+  close(): void {
+    this.closed = true;
+    if (this.pingTimer) clearInterval(this.pingTimer);
+    this.pingTimer = null;
+    try {
+      this.ws?.close();
+    } catch {
+      /* ignore */
+    }
+  }
+
+  private connect(): void {
+    this.setStatus('connecting');
+    try {
+      this.ws = new WebSocket(this.url);
+    } catch (err) {
+      console.warn('[ws] construct failed:', err);
+      this.scheduleReconnect();
+      return;
+    }
+    this.ws.addEventListener('open', () => {
+      this.reconnectDelay = 1000;
+      this.setStatus('connected');
+      // Keep-alive ping every 30s
+      if (this.pingTimer) clearInterval(this.pingTimer);
+      this.pingTimer = setInterval(() => {
+        if (this._status === 'connected') this.send({ type: 'ping' });
+      }, 30_000);
+    });
+    this.ws.addEventListener('close', () => {
+      this.setStatus('disconnected');
+      if (this.pingTimer) {
+        clearInterval(this.pingTimer);
+        this.pingTimer = null;
+      }
+      if (!this.closed) this.scheduleReconnect();
+    });
+    this.ws.addEventListener('error', () => {
+      // 'close' will follow — keep this for logs
+      console.warn('[ws] error');
+    });
+    this.ws.addEventListener('message', (e) => {
+      let msg: WsMessage;
+      try {
+        msg = JSON.parse(e.data);
+      } catch {
+        console.warn('[ws] bad message');
+        return;
+      }
+      for (const h of this.handlers) {
+        try {
+          h(msg);
+        } catch (err) {
+          console.error('[ws] handler error:', err);
+        }
+      }
+    });
+  }
+
+  private scheduleReconnect(): void {
+    setTimeout(() => this.connect(), this.reconnectDelay);
+    this.reconnectDelay = Math.min(
+      this.reconnectDelay * 1.6,
+      this.maxReconnectDelay,
+    );
+  }
+
+  private setStatus(s: WsStatus): void {
+    this._status = s;
+    for (const h of this.statusHandlers) {
+      try {
+        h(s);
+      } catch (err) {
+        console.error('[ws] status handler error:', err);
+      }
+    }
+  }
+}

package/src/web/main.tsx

@@ -0,0 +1,12 @@
+// src/main.tsx — entry point.
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+const root = document.getElementById('root');
+if (!root) throw new Error('Root element #root not found');
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);