@polderlabs/bizar 5.0.0 → 5.0.2

package/bizar-dash/src/web/App.tsx

@@ -38,6 +38,8 @@ import { Memory } from './views/Memory';
 import { History } from './views/History';
 import { MiniMaxUsage } from './views/MiniMaxUsage';
 import { BackgroundAgents } from './views/BackgroundAgents';
+import { Doctor } from './views/Doctor';
+import { SettingsNav } from './components/SettingsNav';
 import { Spinner } from './components/Spinner';
 import { Button } from './components/Button';
 import { AlertTriangle, Globe, LayoutTemplate, X } from 'lucide-react';
@@ -49,6 +51,17 @@ type ViewProps = {
   activeTab: string;
   setActiveTab: (id: string) => void;
   refreshSnapshot: () => Promise<void>;
+  /**
+   * v4.9.0 — When true, the sidebar shows the full settings navigation
+   * instead of the normal tab rail. Toggled by clicking the Settings tab.
+   */
+  settingsMode: boolean;
+  /**
+   * v4.9.0 — The active settings section highlighted in the sidebar nav.
+   * Null means "show all". Managed at App level so Sidebar can read it.
+   */
+  settingsActiveSection: string | null;
+  setSettingsActiveSection: (id: string | null) => void;
   /**
    * v3.3.0 — Cross-view scratch state. The "Open in chat" button
    * on the Agents tab sets `pendingInitialAgent`, which the Chat
@@ -79,6 +92,10 @@ const VIEW_MAP: Record<string, (p: ViewProps) => React.ReactNode> = {
   skills: Skills,
   history: History,
   minimax: MiniMaxUsage,
+  // v6.0.0 — Doctor page (system health + diagnostics surface).
+  // Registered here so the tab id 'doctor' from Topbar.tsx TABS
+  // resolves to a real view instead of falling back to Overview.
+  doctor: Doctor,
 };
 
 const VERSION = 'v4.5.0';
@@ -196,6 +213,11 @@ function Shell() {
   const [settings, setSettings] = useState<Settings | null>(null);
   const [wsStatus, setWsStatus] = useState<WsStatus>('connecting');
   const [bootError, setBootError] = useState<string | null>(null);
+  // v4.9.0 — Settings mode: when true, sidebar shows all settings sections
+  const [settingsMode, setSettingsMode] = useState(false);
+  // v4.9.0 — The active settings section shown in the sidebar nav.
+  // Null means "show all sections". Managed here so Sidebar can read it.
+  const [settingsActiveSection, setSettingsActiveSection] = useState<string | null>(null);
   const [authPromptOpen, setAuthPromptOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const [stuckAgents, setStuckAgents] = useState<{ name: string }[]>([]);
@@ -592,7 +614,7 @@ function Shell() {
       const id = map[e.key];
       if (id) {
         e.preventDefault();
-        setActiveTab(id);
+        handleTabChange(id);
       }
     };
     document.addEventListener('keydown', handler);
@@ -611,6 +633,14 @@ function Shell() {
     [toast],
   );
 
+  // v4.9.0 — Settings mode: entering settings tab activates the sidebar layout.
+  // Navigating to any other tab exits settings mode.
+  const handleTabChange = useCallback((id: string) => {
+    setActiveTab(id);
+    if (id === 'settings') setSettingsMode(true);
+    else setSettingsMode(false);
+  }, []);
+
   // v3.20.3 — Merge built-in tabs with installed mod views. Mod views
   // are appended after the built-in tabs and use the same rendering
   // surface; their tab ids are mod view ids (e.g. 'graphify:web').
@@ -634,13 +664,16 @@ function Shell() {
         snapshot,
         settings,
         activeTab,
-        setActiveTab: setActiveTab,
+        setActiveTab: handleTabChange,
         refreshSnapshot,
+        settingsMode,
+        settingsActiveSection,
+        setSettingsActiveSection,
       };
       return renderActiveView(activeTab, viewProps, modViews, modViewsReloadKey);
     }
     return null;
-  }, [activeTab, snapshot, settings, modViews, modViewsReloadKey, refreshSnapshot]);
+  }, [activeTab, snapshot, settings, modViews, modViewsReloadKey, refreshSnapshot, settingsMode, settingsActiveSection, setSettingsActiveSection, handleTabChange]);
 
   const refreshProjects = async () => {
     try {
@@ -671,10 +704,10 @@ function Shell() {
 
   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');
+    if (t === 'agent') handleTabChange('agents');
+    else if (t === 'task') handleTabChange('tasks');
+    else if (t === 'mod') handleTabChange('mods');
+    else if (t === 'schedule') handleTabChange('schedules');
     else if (t === 'project') {
       const id = (r.item as ProjectRecord).id;
       onActivateProject(id);
@@ -686,7 +719,7 @@ function Shell() {
       const settingId = (r.item as { id?: string; path?: string }).id
         || (r.item as { path?: string }).path
         || '';
-      setActiveTab('settings');
+      handleTabChange('settings');
       // Defer the scroll to allow the view to mount, then apply a brief
       // CSS highlight. We poll a few times because the Settings view
       // mounts lazily after tab switch.
@@ -725,7 +758,7 @@ function Shell() {
       {showHeader && (
         <Topbar
           activeTab={activeTab}
-          onTabChange={setActiveTab}
+          onTabChange={handleTabChange}
           wsStatus={wsStatus}
           version={VERSION}
           activeProject={snapshot?.activeProject || null}
@@ -752,7 +785,7 @@ function Shell() {
             variant="secondary"
             size="sm"
             onClick={() => {
-              setActiveTab('agents');
+              handleTabChange('agents');
               setStuckBannerDismissed(true);
             }}
           >
@@ -773,7 +806,11 @@ function Shell() {
           <Sidebar
             tabs={mergedTabs}
             activeTab={activeTab}
-            onTabChange={setActiveTab}
+            onTabChange={handleTabChange}
+            settingsMode={settingsMode}
+            settingsActiveSection={settingsActiveSection}
+            onSettingsSectionChange={setSettingsActiveSection}
+            onExitSettings={() => handleTabChange('overview')}
           />
         )}
         <main className="content" id="main-content" tabIndex={-1}>

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

@@ -0,0 +1,50 @@
+// src/web/components/AutosaveField.tsx
+// Generic auto-saving field wrapper with inline save status animation.
+
+import React from 'react';
+import { Check, Loader, AlertCircle } from 'lucide-react';
+import { useAutosave } from '../hooks/useAutosave';
+
+export type { AutosaveStatus } from '../hooks/useAutosave';
+
+export function AutosaveField<T = string>({
+  initialValue,
+  saveFn,
+  delay = 800,
+  render,
+  className,
+}: {
+  initialValue: T;
+  saveFn: (value: T) => Promise<void>;
+  delay?: number;
+  render: (props: {
+    value: T;
+    onChange: (v: T) => void;
+    onBlur: () => void;
+  }) => React.ReactNode;
+  className?: string;
+}) {
+  const { value, setValue, status, save, clearDebounce, hasPendingDebounceRef, pendingValueRef } = useAutosave(initialValue, saveFn, { delay });
+
+  const handleBlur = React.useCallback(() => {
+    // If a debounce is pending (user was actively typing), clear the timeout
+    // and save immediately — the user is done typing.
+    if (hasPendingDebounceRef.current) {
+      clearDebounce();
+      // pendingValueRef.current holds the typed value not yet saved by debounce
+      if (pendingValueRef.current !== null) save(pendingValueRef.current);
+    }
+    // If no debounce is pending: do nothing (value was already saved or unchanged).
+  }, [clearDebounce, hasPendingDebounceRef, save, pendingValueRef]);
+
+  return (
+    <div className={`autosave-field ${className || ''} ${status}`}>
+      {render({ value, onChange: setValue, onBlur: handleBlur })}
+      <span className="autosave-status" role="status" aria-live="polite">
+        {status === 'saving' && <Loader className="spinning" size={12} />}
+        {status === 'saved' && <Check size={12} />}
+        {status === 'error' && <AlertCircle size={12} />}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,160 @@
+// src/components/DoctorPanel.tsx — v6.0.0 reusable Doctor panel.
+//
+// A Card-wrapped section of the Doctor page that renders a list of
+// `DoctorCheck` rows with status pills, plus an optional info list
+// (e.g. counts) below the checks. Each `category` carries a default
+// icon and title so callers only need to pass the data.
+
+import React from 'react';
+import {
+  Activity,
+  AlertOctagon,
+  CheckCircle2,
+  CircleDot,
+  type LucideIcon,
+  Server,
+  Settings2,
+  Wrench,
+  Zap,
+} from 'lucide-react';
+import { Card, CardTitle, CardMeta } from './Card';
+import { StatusBadge } from './StatusBadge';
+import { EmptyState } from './EmptyState';
+import { cn } from '../lib/utils';
+import type {
+  DoctorCategory,
+  DoctorCheck,
+  DoctorPanelProps,
+} from '../lib/types';
+
+const CATEGORY_DEFAULTS: Record<
+  DoctorCategory,
+  { title: string; icon: LucideIcon; emptyTitle: string; emptyMessage: string }
+> = {
+  system: {
+    title: 'System health',
+    icon: Server,
+    emptyTitle: 'No system checks',
+    emptyMessage: 'System checks did not return any rows.',
+  },
+  services: {
+    title: 'Services',
+    icon: Zap,
+    emptyTitle: 'No service probes',
+    emptyMessage: 'Service probes did not return any rows.',
+  },
+  counts: {
+    title: 'Counts',
+    icon: Activity,
+    emptyTitle: 'No counts',
+    emptyMessage: 'No counts reported by the dashboard stores.',
+  },
+  errors: {
+    title: 'Recent errors',
+    icon: AlertOctagon,
+    emptyTitle: 'No recent errors',
+    emptyMessage: 'No error lines in the service log within the last hour.',
+  },
+  actions: {
+    title: 'Actions',
+    icon: Wrench,
+    emptyTitle: 'No actions',
+    emptyMessage: 'No actions available.',
+  },
+};
+
+function statusIcon(status: DoctorCheck['status']) {
+  if (status === 'ok') return CheckCircle2;
+  if (status === 'warn') return CircleDot;
+  return AlertOctagon;
+}
+
+function statusLabel(status: DoctorCheck['status']) {
+  if (status === 'ok') return 'ok';
+  if (status === 'warn') return 'warn';
+  return 'fail';
+}
+
+/**
+ * Reusable Doctor panel. Used by both the Doctor page and any future
+ * settings sub-panels that want a consistent status-list render.
+ *
+ * When `children` is supplied, the default check-list render is
+ * skipped — useful for the "Actions" category where the body is
+ * a row of buttons, not a list of checks.
+ */
+export function DoctorPanel({
+  category,
+  title,
+  icon,
+  checks,
+  info,
+  meta,
+  children,
+  className,
+}: DoctorPanelProps) {
+  const def = CATEGORY_DEFAULTS[category];
+  const Icon = icon ?? def.icon;
+  const heading = title ?? def.title;
+  const hasContent = checks.length > 0 || (info && info.length > 0) || children;
+  return (
+    <Card className={cn('doctor-panel', `doctor-panel-${category}`, className)}>
+      <CardTitle>
+        <Icon size={14} aria-hidden />
+        <span>{heading}</span>
+        {meta ? <span className="card-meta-inline muted">{meta}</span> : null}
+      </CardTitle>
+      {!hasContent ? (
+        <EmptyState
+          icon={<Icon size={28} aria-hidden />}
+          title={def.emptyTitle}
+          message={def.emptyMessage}
+        />
+      ) : (
+        <div className="doctor-panel-body">
+          {children}
+          {checks.length > 0 ? (
+            <ul className="doctor-check-list" role="list">
+              {checks.map((c) => {
+                const CheckIcon = statusIcon(c.status);
+                return (
+                  <li key={c.name} className={cn('doctor-check-row', `doctor-check-${c.status}`)}>
+                    <span className="doctor-check-icon" aria-hidden>
+                      <CheckIcon
+                        size={14}
+                        className={cn(
+                          'doctor-check-icon-svg',
+                          c.status === 'ok' && 'doctor-check-icon-ok',
+                          c.status === 'warn' && 'doctor-check-icon-warn',
+                          c.status === 'fail' && 'doctor-check-icon-fail',
+                        )}
+                      />
+                    </span>
+                    <span className="doctor-check-name mono">{c.name}</span>
+                    <span className="doctor-check-message">{c.message}</span>
+                    <StatusBadge kind={c.status} dot>
+                      {statusLabel(c.status)}
+                    </StatusBadge>
+                  </li>
+                );
+              })}
+            </ul>
+          ) : null}
+          {info && info.length > 0 ? (
+            <dl className="doctor-info-list">
+              {info.map((row) => (
+                <React.Fragment key={row.label}>
+                  <dt>{row.label}</dt>
+                  <dd className="tabular-nums">{row.value}</dd>
+                </React.Fragment>
+              ))}
+            </dl>
+          ) : null}
+        </div>
+      )}
+    </Card>
+  );
+}
+
+// Re-export the Settings icon so callers can override without an extra import.
+export { Settings2 };