@polderlabs/bizar-dash 3.0.0

package/src/web/components/SearchModal.tsx

@@ -0,0 +1,185 @@
+// src/components/SearchModal.tsx — fuzzy search modal opened by / or Cmd/Ctrl+K.
+import { useEffect, useRef, useState } from 'react';
+import { Search, X } from 'lucide-react';
+import { useToast } from './Toast';
+import { api } from '../lib/api';
+import type { SearchResult } from '../lib/types';
+import { cn } from '../lib/utils';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (r: SearchResult) => void;
+};
+
+const SCOPES = [
+  { id: 'all', label: 'All' },
+  { id: 'projects', label: 'Projects' },
+  { id: 'agents', label: 'Agents' },
+  { id: 'tasks', label: 'Tasks' },
+  { id: 'mods', label: 'Mods' },
+  { id: 'schedules', label: 'Schedules' },
+  { id: 'commands', label: 'Commands' },
+] as const;
+
+export function SearchModal({ open, onClose, onSelect }: Props) {
+  const toast = useToast();
+  const [q, setQ] = useState('');
+  const [scope, setScope] = useState<typeof SCOPES[number]['id']>('all');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setQ('');
+      setResults([]);
+      setActiveIdx(0);
+      setTimeout(() => inputRef.current?.focus(), 30);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (!q.trim()) {
+      setResults([]);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    const t = setTimeout(() => {
+      api
+        .get<{ results: SearchResult[] }>(`/search?q=${encodeURIComponent(q)}&scope=${scope}`)
+        .then((r) => {
+          if (cancelled) return;
+          setResults(r.results || []);
+          setActiveIdx(0);
+        })
+        .catch((err) => {
+          if (cancelled) return;
+          toast.error(`Search failed: ${(err as Error).message}`);
+        })
+        .finally(() => !cancelled && setLoading(false));
+    }, 150);
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [q, scope, open, toast]);
+
+  if (!open) return null;
+
+  const grouped: Record<string, SearchResult[]> = {};
+  for (const r of results) {
+    grouped[r.type] = grouped[r.type] || [];
+    grouped[r.type].push(r);
+  }
+
+  const flat: SearchResult[] = [];
+  for (const scope of SCOPES.map((s) => s.id)) {
+    if (grouped[scope]) flat.push(...grouped[scope]);
+  }
+
+  const onKey = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIdx((i) => Math.min(i + 1, flat.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter' && flat[activeIdx]) {
+      e.preventDefault();
+      onSelect(flat[activeIdx]);
+      onClose();
+    }
+  };
+
+  return (
+    <div className="search-modal-backdrop" onClick={onClose}>
+      <div className="search-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="search-modal-head">
+          <Search size={14} />
+          <input
+            ref={inputRef}
+            className="search-modal-input"
+            placeholder="Search tasks, plans, agents, projects, mods…"
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            onKeyDown={onKey}
+          />
+          <button
+            type="button"
+            className="icon-btn"
+            aria-label="Close"
+            onClick={onClose}
+          >
+            <X size={14} />
+          </button>
+        </div>
+        <div className="search-modal-scopes">
+          {SCOPES.map((s) => (
+            <button
+              key={s.id}
+              type="button"
+              className={cn('search-scope', scope === s.id && 'search-scope-active')}
+              onClick={() => setScope(s.id)}
+            >
+              {s.label}
+            </button>
+          ))}
+        </div>
+        <div className="search-modal-body">
+          {loading && <div className="muted">Searching…</div>}
+          {!loading && q && flat.length === 0 && <div className="muted">No results.</div>}
+          {!loading && !q && <div className="muted">Type to search…</div>}
+          {SCOPES.map((s) => {
+            const list = grouped[s.id];
+            if (!list || list.length === 0) return null;
+            return (
+              <div key={s.id} className="search-group">
+                <div className="search-group-head">{s.label}</div>
+                {list.map((r) => {
+                  const flatIdx = flat.indexOf(r);
+                  return (
+                    <button
+                      type="button"
+                      key={`${r.type}-${flatIdx}`}
+                      className={cn('search-result', flatIdx === activeIdx && 'search-result-active')}
+                      onMouseEnter={() => setActiveIdx(flatIdx)}
+                      onClick={() => {
+                        onSelect(r);
+                        onClose();
+                      }}
+                    >
+                      <span className="search-result-type">{r.type}</span>
+                      <span className="search-result-label">
+                        {summarize(r)}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+        <div className="search-modal-foot">
+          <span className="muted">↑↓ navigate · ↵ open · esc close</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function summarize(r: SearchResult): string {
+  const i = r.item || {};
+  if (r.type === 'project') return `${i.name} — ${i.path}`;
+  if (r.type === 'agent') return `${i.name} — ${i.description || i.model || ''}`;
+  if (r.type === 'task') return `${i.title} — ${(i.status || '')}`;
+  if (r.type === 'mod') return `${i.name} v${i.version} — ${i.description || ''}`;
+  if (r.type === 'schedule') return `${i.name} (${i.type}: ${i.schedule})`;
+  if (r.type === 'command') return `${i.name} — ${i.description || ''}`;
+  return JSON.stringify(i).slice(0, 80);
+}

package/src/web/components/Spinner.tsx

@@ -0,0 +1,19 @@
+// src/components/Spinner.tsx — loading indicator.
+
+import { cn } from '../lib/utils';
+
+export type SpinnerProps = {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  label?: string;
+};
+
+export function Spinner({ size = 'md', className, label }: SpinnerProps) {
+  return (
+    <span
+      className={cn('spinner', `spinner-${size}`, className)}
+      role="status"
+      aria-label={label || 'Loading'}
+    />
+  );
+}

package/src/web/components/StatusBadge.tsx

@@ -0,0 +1,25 @@
+// src/components/StatusBadge.tsx — small colored pill.
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/utils';
+
+export type StatusBadgeProps = {
+  kind?: 'success' | 'warning' | 'error' | 'info' | 'accent' | 'neutral';
+  children: ReactNode;
+  className?: string;
+  dot?: boolean;
+};
+
+export function StatusBadge({
+  kind = 'neutral',
+  children,
+  className,
+  dot = false,
+}: StatusBadgeProps) {
+  return (
+    <span className={cn('badge', `badge-${kind}`, className)}>
+      {dot && <span className="badge-dot" />}
+      {children}
+    </span>
+  );
+}

package/src/web/components/Tag.tsx

@@ -0,0 +1,28 @@
+// src/components/Tag.tsx — pill for tags.
+
+import type { ReactNode } from 'react';
+import { cn } from '../lib/utils';
+
+export type TagProps = {
+  children: ReactNode;
+  className?: string;
+  onRemove?: () => void;
+};
+
+export function Tag({ children, className, onRemove }: TagProps) {
+  return (
+    <span className={cn('tag', className)}>
+      {children}
+      {onRemove && (
+        <button
+          type="button"
+          className="tag-remove"
+          aria-label={`Remove ${typeof children === 'string' ? children : 'tag'}`}
+          onClick={onRemove}
+        >
+          ×
+        </button>
+      )}
+    </span>
+  );
+}

package/src/web/components/Toast.tsx

@@ -0,0 +1,142 @@
+// 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/web/components/Topbar.tsx

@@ -0,0 +1,203 @@
+// src/components/Topbar.tsx — header with brand, project selector, search, tabs, ws status.
+import { useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import {
+  LayoutDashboard,
+  MessageSquare,
+  Bot,
+  Map,
+  Folder,
+  CheckSquare,
+  Settings2,
+  Sliders,
+  Puzzle,
+  Clock,
+  Search as SearchIcon,
+  ChevronDown,
+  Plus,
+  RefreshCw,
+  Power,
+  type LucideIcon,
+} from 'lucide-react';
+import { cn } from '../lib/utils';
+import type { ProjectRecord, WsStatus } from '../lib/types';
+import { api } from '../lib/api';
+
+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: 'tasks', label: 'Tasks', icon: CheckSquare },
+  { id: 'mods', label: 'Mods', icon: Puzzle },
+  { id: 'schedules', label: 'Schedules', icon: Clock },
+  { 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;
+  activeProject: ProjectRecord | null;
+  projects: ProjectRecord[];
+  onProjectChange: (id: string) => void;
+  onProjectsRefresh: () => void;
+  onOpenSearch: () => void;
+  rightSlot?: ReactNode;
+};
+
+export function Topbar({
+  activeTab,
+  onTabChange,
+  wsStatus,
+  version,
+  activeProject,
+  projects,
+  onProjectChange,
+  onProjectsRefresh,
+  onOpenSearch,
+  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>
+      <ProjectSelector
+        activeProject={activeProject}
+        projects={projects}
+        onChange={onProjectChange}
+        onRefresh={onProjectsRefresh}
+      />
+      <button
+        type="button"
+        className="topbar-search"
+        onClick={onOpenSearch}
+        title="Search (Ctrl/Cmd+K)"
+      >
+        <SearchIcon size={14} />
+        <span className="muted">Search…</span>
+        <kbd>⌘K</kbd>
+      </button>
+      <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}
+            >
+              <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>
+  );
+}
+
+function ProjectSelector({
+  activeProject,
+  projects,
+  onChange,
+  onRefresh,
+}: {
+  activeProject: ProjectRecord | null;
+  projects: ProjectRecord[];
+  onChange: (id: string) => void;
+  onRefresh: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClick = () => setOpen(false);
+    document.addEventListener('click', onClick);
+    return () => document.removeEventListener('click', onClick);
+  }, [open]);
+
+  const onAdd = async () => {
+    const path = (prompt('Project path:') || '').trim();
+    if (!path) return;
+    try {
+      await api.post('/projects', { path });
+      onRefresh();
+    } catch (err) {
+      alert(`Add failed: ${(err as Error).message}`);
+    }
+  };
+
+  return (
+    <div className="project-selector" onClick={(e) => e.stopPropagation()}>
+      <button
+        type="button"
+        className="project-selector-btn"
+        onClick={() => setOpen((v) => !v)}
+        title="Switch active project"
+      >
+        <Folder size={14} />
+        <span className="project-selector-name">
+          {activeProject?.name || '(no project)'}
+        </span>
+        <ChevronDown size={12} />
+      </button>
+      {open && (
+        <div className="project-selector-menu">
+          <div className="project-selector-menu-head">
+            <span className="muted">{projects.length} project{projects.length === 1 ? '' : 's'}</span>
+            <div className="project-selector-menu-actions">
+              <button type="button" className="icon-btn" onClick={onRefresh} title="Refresh">
+                <RefreshCw size={12} />
+              </button>
+              <button type="button" className="icon-btn" onClick={onAdd} title="Add project">
+                <Plus size={12} />
+              </button>
+            </div>
+          </div>
+          <ul className="project-selector-list">
+            {projects.length === 0 && (
+              <li className="muted project-selector-empty">No projects. Add one to start.</li>
+            )}
+            {projects.map((p) => (
+              <li
+                key={p.id}
+                className={cn('project-selector-item', activeProject?.id === p.id && 'active')}
+                onClick={() => {
+                  onChange(p.id);
+                  setOpen(false);
+                }}
+              >
+                <span className="project-selector-item-name">{p.name}</span>
+                <span className="project-selector-item-status">{p.status}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/index.html

@@ -0,0 +1,17 @@
+<!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/web/lib/api.ts

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