@polderlabs/bizar 3.23.1 → 4.2.0

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

@@ -0,0 +1,224 @@
+// 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' },
+  { id: 'settings', label: 'Settings' },
+] as const;
+
+const RESULT_TYPE_BY_SCOPE: Record<(typeof SCOPES)[number]['id'], string | null> = {
+  all: null,
+  projects: 'project',
+  agents: 'agent',
+  tasks: 'task',
+  mods: 'mod',
+  schedules: 'schedule',
+  commands: 'command',
+  settings: 'setting',
+};
+
+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);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    let focusTimer: number | undefined;
+    if (open) {
+      previousFocusRef.current = document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+      setQ('');
+      setResults([]);
+      setActiveIdx(0);
+      focusTimer = window.setTimeout(() => inputRef.current?.focus(), 30);
+    }
+    return () => {
+      if (focusTimer) window.clearTimeout(focusTimer);
+      if (!open) return;
+      const previous = previousFocusRef.current;
+      if (previous && previous.isConnected) previous.focus();
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (!q.trim()) {
+      setResults([]);
+      setActiveIdx(0);
+      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) {
+    const type = r.type.toLowerCase();
+    grouped[type] = grouped[type] || [];
+    grouped[type].push(r);
+  }
+
+  const flat: SearchResult[] = [];
+  for (const scope of SCOPES.map((s) => s.id)) {
+    const resultType = RESULT_TYPE_BY_SCOPE[scope];
+    if (resultType && grouped[resultType]) flat.push(...grouped[resultType]);
+  }
+
+  const onKey = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose();
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (flat.length === 0) return;
+      setActiveIdx((i) => Math.min(i + 1, flat.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (flat.length === 0) return;
+      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" role="dialog" aria-modal="true" aria-labelledby="search-modal-title" onClick={(e) => e.stopPropagation()}>
+        <div className="search-modal-head">
+          <Search size={14} />
+          <span id="search-modal-title" className="sr-only">Search</span>
+          <input
+            ref={inputRef}
+            className="search-modal-input"
+            placeholder="Search tasks, agents, settings, projects…"
+            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 resultType = RESULT_TYPE_BY_SCOPE[s.id];
+            if (!resultType) return null;
+            const list = grouped[resultType];
+            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 || ''}`;
+  if (r.type === 'setting') {
+    const val = i.value === null || i.value === undefined
+      ? ''
+      : typeof i.value === 'string'
+        ? ` = ${i.value}`
+        : ` = ${JSON.stringify(i.value)}`;
+    return `${i.label}${val}  —  ${i.desc || ''}`.trim();
+  }
+  return JSON.stringify(i).slice(0, 80);
+}

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

@@ -0,0 +1,66 @@
+// src/components/Sidebar.tsx — vertical navigation rail for sidebar/both layouts.
+import type { TabDef } from './Topbar';
+import { cn } from '../lib/utils';
+
+export type SidebarProps = {
+  tabs: TabDef[];
+  activeTab: string;
+  onTabChange: (id: string) => void;
+};
+
+export function Sidebar({ tabs, activeTab, onTabChange }: SidebarProps) {
+  // Split tabs into built-in (no `isMod` flag) and mod-added entries.
+  // Render a separator + small "Mods" label between them so users can
+  // tell what's part of Bizar vs what an installed mod contributed.
+  const builtIn = tabs.filter((t) => !(t as TabDef & { isMod?: boolean }).isMod);
+  const modTabs = tabs.filter((t) => (t as TabDef & { isMod?: boolean }).isMod);
+
+  return (
+    <aside className="sidebar" aria-label="Primary navigation">
+      <nav className="sidebar-nav" role="tablist">
+        {builtIn.map((t) => {
+          const Icon = t.icon;
+          const active = t.id === activeTab;
+          return (
+            <button
+              key={t.id}
+              type="button"
+              role="tab"
+              aria-selected={active}
+              className={cn('sidebar-tab', active && 'sidebar-tab-active')}
+              onClick={() => onTabChange(t.id)}
+              title={t.label}
+            >
+              <Icon size={18} aria-hidden />
+              <span className="sidebar-tab-label">{t.label}</span>
+            </button>
+          );
+        })}
+        {modTabs.length > 0 && (
+          <>
+            <div className="sidebar-section-divider" aria-hidden="true" />
+            <div className="sidebar-section-label">Mods</div>
+            {modTabs.map((t) => {
+              const Icon = t.icon;
+              const active = t.id === activeTab;
+              return (
+                <button
+                  key={t.id}
+                  type="button"
+                  role="tab"
+                  aria-selected={active}
+                  className={cn('sidebar-tab', 'sidebar-tab-mod', active && 'sidebar-tab-active')}
+                  onClick={() => onTabChange(t.id)}
+                  title={`${t.label} (mod)`}
+                >
+                  <Icon size={18} aria-hidden />
+                  <span className="sidebar-tab-label">{t.label}</span>
+                </button>
+              );
+            })}
+          </>
+        )}
+      </nav>
+    </aside>
+  );
+}

package/bizar-dash/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/bizar-dash/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/bizar-dash/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/bizar-dash/src/web/components/Toast.tsx

@@ -0,0 +1,150 @@
+// src/components/Toast.tsx — toast context, provider hook, container.
+
+import {
+  createContext,
+  useEffect,
+  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],
+  );
+
+  useEffect(() => {
+    return () => {
+      for (const timer of timersRef.current.values()) clearTimeout(timer);
+      timersRef.current.clear();
+    };
+  }, []);
+
+  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>
+  );
+}