@polderlabs/bizar 3.23.1 → 4.2.0

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

@@ -0,0 +1,368 @@
+// 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,
+  History as HistoryIcon,
+  Search as SearchIcon,
+  ChevronDown,
+  Plus,
+  RefreshCw,
+  Power,
+  Sparkles,
+  Activity,
+  Radio,
+  type LucideIcon,
+} from 'lucide-react';
+import { cn } from '../lib/utils';
+import type { ProjectRecord, WsStatus, WsMessage, Settings, DirectoryListing } from '../lib/types';
+import { api } from '../lib/api';
+import { useModal } from './Modal';
+import { FileBrowser } from './FileBrowser';
+import { Button } from './Button';
+
+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: 'artifacts', label: 'Glyphs', icon: Map },
+  { id: 'tasks', label: 'Tasks', icon: CheckSquare },
+  { id: 'activity', label: 'Activity', icon: Activity },
+  { id: 'background', label: 'Active', icon: Radio },
+  { id: 'skills', label: 'Skills', icon: Sparkles },
+  { id: 'mods', label: 'Mods', icon: Puzzle },
+  { id: 'schedules', label: 'Schedules', icon: Clock },
+  { id: 'history', label: 'History', icon: HistoryIcon },
+  { 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;
+  settings?: Settings | null;
+  rightSlot?: ReactNode;
+  /**
+   * v3.3.0 — Optional slot for the notifications bell. The host
+   * (App.tsx) mounts the Notifications component here so it can
+   * subscribe to the same WebSocket the rest of the app uses.
+   */
+  notificationsSlot?: ReactNode;
+  /**
+   * Whether to render the tabs row. In sidebar/both layouts the sidebar
+   * carries navigation, so we hide this row to keep the topbar slim.
+   */
+  showTabs?: boolean;
+  /**
+   * v3.20.3 — Optional extra tabs (mod views) appended after the built-in
+   * tabs. Each entry is the same shape as TabDef with an `id` matching
+   * the mod view id (e.g. 'graphify:web').
+   */
+  extraTabs?: TabDef[];
+};
+
+export function Topbar({
+  activeTab,
+  onTabChange,
+  wsStatus,
+  version,
+  activeProject,
+  projects,
+  onProjectChange,
+  onProjectsRefresh,
+  onOpenSearch,
+  settings,
+  rightSlot,
+  notificationsSlot,
+  showTabs = true,
+  extraTabs,
+}: TopbarProps) {
+  return (
+    <header className="topbar">
+      <div className="topbar-row">
+        <div className="brand">
+          <span className="brand-logo" aria-hidden="true">ᛒ</span>
+          <span className="brand-title">Bizar</span>
+          <span className="brand-version">{version}</span>
+        </div>
+        <ProjectSelector
+          activeProject={activeProject}
+          projects={projects}
+          onChange={onProjectChange}
+          onRefresh={onProjectsRefresh}
+          settings={settings ?? null}
+        />
+        <button
+          type="button"
+          className="topbar-search"
+          onClick={onOpenSearch}
+          title="Search (Ctrl/Cmd+K)"
+          aria-label="Open search"
+        >
+          <SearchIcon size={14} />
+          <span className="muted">Search…</span>
+          <kbd>⌘K</kbd>
+        </button>
+        <div className="topbar-spacer" />
+        <div className="topbar-right">
+          {notificationsSlot}
+          {rightSlot}
+          <div className={cn('ws-status', `ws-${wsStatus}`)} title={`WebSocket: ${wsStatus}`}>
+            <span className="ws-dot" />
+            <span className="ws-label">{wsStatus}</span>
+          </div>
+        </div>
+      </div>
+      {showTabs && (
+        <nav className="tabs-row" 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>
+            );
+          })}
+          {extraTabs && extraTabs.length > 0 && (
+            <>
+              <span className="tab-separator" aria-hidden="true" />
+              {extraTabs.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', 'tab-mod', active && 'tab-active')}
+                    onClick={() => onTabChange(tab.id)}
+                    title={`${tab.label} (mod)`}
+                  >
+                    <Icon size={14} className="tab-icon" />
+                    <span className="tab-label">{tab.label}</span>
+                    <span className="tab-badge">mod</span>
+                  </button>
+                );
+              })}
+            </>
+          )}
+        </nav>
+      )}
+    </header>
+  );
+}
+
+function ProjectSelector({
+  activeProject,
+  projects,
+  onChange,
+  onRefresh,
+  settings,
+}: {
+  activeProject: ProjectRecord | null;
+  projects: ProjectRecord[];
+  onChange: (id: string) => void;
+  onRefresh: () => void;
+  settings: Settings | null;
+}) {
+  const [open, setOpen] = useState(false);
+  const modal = useModal();
+
+  useEffect(() => {
+    if (!open) return;
+    const onClick = () => setOpen(false);
+    document.addEventListener('click', onClick);
+    return () => document.removeEventListener('click', onClick);
+  }, [open]);
+
+  const onAdd = () => {
+    modal.open({
+      title: 'Add project',
+      children: (
+        <TopbarAddProjectDialog
+          settings={settings}
+          onAdd={async (path: string, name: string | null) => {
+            try {
+              await api.post('/projects', { path, name });
+              onRefresh();
+              setOpen(false);
+              modal.close();
+            } catch (err) {
+              alert(`Add failed: ${(err as Error).message}`);
+            }
+          }}
+        />
+      ),
+      footer: (
+        <div className="modal-footer-actions">
+          <Button variant="ghost" onClick={() => modal.close()}>Cancel</Button>
+        </div>
+      ),
+    });
+  };
+
+  return (
+    <div className="project-selector" onClick={(e) => e.stopPropagation()}>
+      <button
+        type="button"
+        className="project-selector-btn"
+        onClick={() => setOpen((v) => !v)}
+        title="Switch active project"
+        aria-haspopup="menu"
+        aria-expanded={open}
+      >
+        <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" aria-label="Refresh projects">
+                <RefreshCw size={12} />
+              </button>
+              <button type="button" className="icon-btn" onClick={onAdd} title="Add project" aria-label="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}>
+                <button
+                  type="button"
+                  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>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── TopbarAddProjectDialog ───────────────────────────────────────────────────
+
+function TopbarAddProjectDialog({
+  settings,
+  onAdd,
+}: {
+  settings: Settings | null;
+  onAdd: (path: string, name: string | null) => void;
+}) {
+  const [path, setPath] = useState(settings?.dashboard?.projectsDirectory ?? '');
+  const [name, setName] = useState('');
+  const [preflighting, setPreflighting] = useState(false);
+  const [preflightError, setPreflightError] = useState<string | null>(null);
+
+  const handleAdd = async () => {
+    if (!path) return;
+    setPreflighting(true);
+    setPreflightError(null);
+    try {
+      // Pre-flight: verify the path still exists
+      await api.get<DirectoryListing>('/fs?path=' + encodeURIComponent(path));
+      onAdd(path, name || null);
+    } catch (err) {
+      const apiErr = err as { status?: number; data?: { message?: string } };
+      if (apiErr.status === 404) {
+        setPreflightError('That folder no longer exists. Pick another.');
+      } else {
+        setPreflightError(
+          apiErr.data?.message ?? (err as Error).message ?? 'Validation failed.',
+        );
+      }
+    } finally {
+      setPreflighting(false);
+    }
+  };
+
+  return (
+    <div>
+      <label className="field-label">Folder</label>
+      <FileBrowser
+        value={path}
+        onChange={(p) => {
+          setPath(p);
+          setPreflightError(null);
+        }}
+        projectsDirectory={settings?.dashboard?.projectsDirectory}
+        height={320}
+      />
+      {preflightError && (
+        <p className="field-help" style={{ color: 'var(--error)', marginTop: 4 }}>
+          {preflightError}
+        </p>
+      )}
+      <div style={{ marginTop: 'var(--space-3)' }}>
+        <label className="field-label" htmlFor="topbar-add-project-name">Name (optional)</label>
+        <input
+          id="topbar-add-project-name"
+          className="input"
+          type="text"
+          placeholder="My App"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+      <div style={{ marginTop: 'var(--space-3)', display: 'flex', justifyContent: 'flex-end' }}>
+        <Button
+          variant="primary"
+          onClick={handleAdd}
+          disabled={!path || preflighting}
+        >
+          {preflighting ? <span className="btn-spinner" /> : null}
+          {preflighting ? 'Checking…' : 'Add'}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+// src/components/VisualPlanDialog.tsx — Dialog for /visual-plan command.
+
+import { Button } from './Button';
+
+type VisualPlanDialogProps = {
+  data?: Record<string, unknown>;
+  onClose: () => void;
+};
+
+export function VisualPlanDialog({ data, onClose }: VisualPlanDialogProps) {
+  const enabled = data?.enabled as boolean | undefined;
+  const previousEnabled = data?.previousEnabled as boolean | undefined;
+  const mode = data?.mode as string | undefined;
+  const defaultTemplate = data?.defaultTemplate as string | undefined;
+  const lastUsedSlug = data?.lastUsedSlug as string | null | undefined;
+
+  const wasToggled = mode === 'toggle';
+
+  return (
+    <div>
+      {wasToggled ? (
+        <p style={{ marginBottom: 16, lineHeight: 1.6 }}>
+          Visual plan mode has been <strong>{enabled ? 'enabled' : 'disabled'}</strong>.
+          {enabled
+            ? ' The agent will create a plan and wait for your feedback on complex tasks.'
+            : ' The agent will work without a visual plan canvas.'}
+        </p>
+      ) : (
+        <div style={{ marginBottom: 16 }}>
+          <p style={{ marginBottom: 8, fontWeight: 600 }}>
+            Visual Plan: <span style={{ color: enabled ? 'var(--color-success)' : 'var(--color-muted)' }}>
+              {enabled ? 'ON' : 'OFF'}
+            </span>
+          </p>
+          <p style={{ lineHeight: 1.6, color: 'var(--color-muted)', fontSize: 13 }}>
+            When enabled, the agent creates a visual plan and waits for your feedback before proceeding with complex tasks.
+          </p>
+          {defaultTemplate && (
+            <p style={{ marginTop: 8, fontSize: 13, color: 'var(--color-muted)' }}>
+              Default template: <code>{defaultTemplate}</code>
+            </p>
+          )}
+          {lastUsedSlug && (
+            <p style={{ fontSize: 13, color: 'var(--color-muted)' }}>
+              Last used plan: <code>{lastUsedSlug}</code>
+            </p>
+          )}
+          <p style={{ marginTop: 12, fontSize: 13, color: 'var(--color-muted)' }}>
+            Use <code>/visual-plan on</code> or <code>/visual-plan off</code> to toggle.
+          </p>
+        </div>
+      )}
+      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+        <Button variant="ghost" onClick={onClose}>Close</Button>
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/components/chat/AgentChip.tsx

@@ -0,0 +1,68 @@
+// src/components/chat/AgentChip.tsx — custom popover agent picker, replaces <select>.
+
+import { useEffect, useRef, useState } from 'react';
+import { Bot, ChevronDown } from 'lucide-react';
+
+interface Props {
+  agent: string;
+  setAgent: (a: string) => void;
+  agents: Array<{ name: string }>;
+}
+
+export function AgentChip({ agent, setAgent, agents }: Props) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const current = agent || 'no agent';
+  const display = current.startsWith('@') ? current.slice(1) : current;
+
+  return (
+    <div className="chat-agent-chip" ref={ref}>
+      <button
+        type="button"
+        className="chat-agent-chip-btn"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        <Bot size={14} />
+        <span>{display}</span>
+        <ChevronDown size={12} className={open ? 'rotated' : ''} />
+      </button>
+      {open && (
+        <div className="chat-agent-chip-menu" role="listbox">
+          <button
+            type="button"
+            role="option"
+            aria-selected={!agent}
+            onClick={() => { setAgent(''); setOpen(false); }}
+          >
+            <span>no agent</span>
+          </button>
+          {agents.map((a) => (
+            <button
+              key={a.name}
+              type="button"
+              role="option"
+              aria-selected={agent === a.name}
+              onClick={() => { setAgent(a.name); setOpen(false); }}
+            >
+              <span>@{a.name}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/bizar-dash/src/web/components/chat/ChatBubble.tsx

@@ -0,0 +1,60 @@
+// src/components/chat/ChatBubble.tsx — renders a single chat message with actions.
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Pin, Copy, RefreshCw, Trash2 } from 'lucide-react';
+import { cn, formatTime } from '../../lib/utils';
+import type { ChatMessage } from '../../lib/types';
+
+export type ChatBubbleProps = {
+  message: ChatMessage;
+  pinned: boolean;
+  onCopy: () => void;
+  onDelete: () => void;
+  onTogglePin: () => void;
+  onRegenerate: () => void;
+};
+
+export function ChatBubble({ message, pinned, onCopy, onDelete, onTogglePin, onRegenerate }: ChatBubbleProps) {
+  const role = (message.role || 'assistant').toLowerCase();
+  const ts = message.ts ? formatTime(message.ts) : '';
+  const content = message.content || message.message || '';
+
+  return (
+    <div
+      className={cn('chat-msg', `chat-msg-${role}`, pinned && 'chat-msg-pinned')}
+      role="region"
+      aria-label={`${role} message${message.agent ? ` from @${message.agent}` : ''}`}
+    >
+      <div className="chat-msg-meta">
+        <span className="chat-msg-role">{role}</span>
+        {message.agent && <span className="chat-msg-agent">@{message.agent}</span>}
+        {ts && <span className="chat-msg-ts tabular-nums">{ts}</span>}
+        {pinned && (
+          <span className="chat-msg-pin">
+            <Pin size={10} /> pinned
+          </span>
+        )}
+        <div className="chat-msg-actions">
+          <button type="button" className="icon-btn" aria-label="Copy" title="Copy" onClick={onCopy}>
+            <Copy size={12} />
+          </button>
+          {role !== 'user' && (
+            <button type="button" className="icon-btn" aria-label="Regenerate" title="Regenerate" onClick={onRegenerate}>
+              <RefreshCw size={12} />
+            </button>
+          )}
+          <button type="button" className="icon-btn" aria-label="Pin" title="Pin" onClick={onTogglePin}>
+            <Pin size={12} />
+          </button>
+          <button type="button" className="icon-btn icon-btn-danger" aria-label="Delete" title="Delete" onClick={onDelete}>
+            <Trash2 size={12} />
+          </button>
+        </div>
+      </div>
+      <div className="chat-msg-body markdown-body">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/components/chat/ChatThread.tsx

@@ -0,0 +1,88 @@
+// src/components/chat/ChatThread.tsx — message list, welcome screen, loading skeleton.
+
+import { useEffect, useRef } from 'react';
+import { LoadingSkeleton } from './LoadingSkeleton';
+import { WelcomeScreen } from './WelcomeScreen';
+import { MessageBubble } from './MessageBubble';
+
+interface Message {
+  role?: string;
+  content?: string;
+  message?: string;
+  agent?: string;
+  ts?: string | number;
+}
+
+interface Props {
+  messages: Message[];
+  loading: boolean;
+  activeProject: { name: string } | null;
+  sessionId: string;
+  pinned: Set<number>;
+  onPickSuggestion: (text: string) => void;
+  onCopy: (m: Message) => void;
+  onDelete: (idx: number) => void;
+  onTogglePin: (idx: number) => void;
+  onRegenerate: (messageId: string) => void;
+}
+
+export function ChatThread({
+  messages,
+  loading,
+  activeProject,
+  sessionId,
+  pinned,
+  onPickSuggestion,
+  onCopy,
+  onDelete,
+  onTogglePin,
+  onRegenerate,
+}: Props) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  if (loading) {
+    return (
+      <div className="chat-thread" ref={listRef}>
+        <LoadingSkeleton count={3} />
+      </div>
+    );
+  }
+
+  if (!activeProject) {
+    return (
+      <div className="chat-thread" ref={listRef}>
+        <WelcomeScreen variant="no-project" projectName="" onPickSuggestion={onPickSuggestion} />
+      </div>
+    );
+  }
+
+  if (messages.length === 0) {
+    return (
+      <div className="chat-thread" ref={listRef}>
+        <WelcomeScreen variant="empty" projectName={activeProject.name} onPickSuggestion={onPickSuggestion} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="chat-thread" ref={listRef}>
+      {messages.map((m, i) => (
+        <MessageBubble
+          key={`${i}-${m.ts ?? ''}`}
+          message={m}
+          pinned={pinned.has(i)}
+          onCopy={() => onCopy(m)}
+          onDelete={() => onDelete(i)}
+          onTogglePin={() => onTogglePin(i)}
+          onRegenerate={() => onRegenerate(String(m.ts ?? i))}
+        />
+      ))}
+    </div>
+  );
+}

package/bizar-dash/src/web/components/chat/ChatTopBar.tsx

@@ -0,0 +1,50 @@
+// src/components/chat/ChatTopBar.tsx — 48px topbar with project chip + panel toggles.
+
+import { Folder, ChevronDown } from 'lucide-react';
+
+interface Props {
+  activeProject: { name: string; path?: string } | null;
+  sessionCount: number;
+  sessionsOpen: boolean;
+  infoOpen: boolean;
+  onToggleSessions: () => void;
+  onToggleInfo: () => void;
+  onOpenOverview: () => void;
+}
+
+export function ChatTopBar({
+  activeProject,
+  sessionCount,
+  sessionsOpen,
+  infoOpen,
+  onToggleSessions,
+  onToggleInfo,
+  onOpenOverview,
+}: Props) {
+  return (
+    <header className="chat-topbar">
+      <button type="button" className="chat-topbar-project" onClick={onOpenOverview}>
+        <Folder size={14} />
+        <span className="chat-topbar-project-name">{activeProject?.name ?? 'No project'}</span>
+        <ChevronDown size={12} />
+      </button>
+      <div className="chat-topbar-spacer" />
+      <button
+        type="button"
+        className={`chat-topbar-btn ${sessionsOpen ? 'active' : ''}`}
+        onClick={onToggleSessions}
+        aria-pressed={sessionsOpen}
+      >
+        Sessions ({sessionCount})
+      </button>
+      <button
+        type="button"
+        className={`chat-topbar-btn ${infoOpen ? 'active' : ''}`}
+        onClick={onToggleInfo}
+        aria-pressed={infoOpen}
+      >
+        Info
+      </button>
+    </header>
+  );
+}