@polderlabs/bizar 5.5.1 → 5.5.2

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

@@ -43,6 +43,7 @@ import { BackgroundAgents } from './views/BackgroundAgents';
 import { Doctor } from './views/Doctor';
 import { Eval } from './views/Eval';
 import { EvalReport } from './views/EvalReport';
+import { SettingsNav } from './components/SettingsNav';
 import { Spinner } from './components/Spinner';
 import { Button } from './components/Button';
 import { AlertTriangle, Globe, LayoutTemplate, X } from 'lucide-react';
@@ -56,10 +57,16 @@ type ViewProps = {
   setActiveTab: (id: string) => void;
   refreshSnapshot: () => Promise<void>;
   /**
-   * v6.x — Optional settings section id. When set, the SettingsView
-   * renders only that section (each settings section is its own tab).
+   * v4.9.0 — When true, the sidebar shows the full settings navigation
+   * instead of the normal tab rail. Toggled by clicking the Settings tab.
    */
-  section?: string;
+  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
@@ -74,25 +81,6 @@ export type CrossViewState = {
   initialAgent?: string | null;
 };
 
-// v6.x — Each settings section is its own top-level tab. Registered with
-// the `settings-` prefix so they don't collide with runtime tabs (e.g. the
-// existing `agents` runtime tab vs. the new `settings-agents` settings tab).
-const SETTINGS_SECTION_IDS = [
-  'theme',
-  'updates',
-  'layout',
-  'general',
-  'env-vars',
-  'network',
-  'notifications',
-  'auth',
-  'agents',
-  'system-llm',
-  'headroom',
-  'activity-log',
-  'workspaces',
-] as const;
-
 const VIEW_MAP: Record<string, (p: ViewProps) => React.ReactNode> = {
   overview: Overview,
   chat: Chat,
@@ -103,6 +91,7 @@ const VIEW_MAP: Record<string, (p: ViewProps) => React.ReactNode> = {
   activity: Activity,
   background: BackgroundAgents,
   config: Config,
+  settings: SettingsView,
   marketplace: Marketplace,
   mods: Mods,
   schedules: Schedules,
@@ -121,12 +110,6 @@ const VIEW_MAP: Record<string, (p: ViewProps) => React.ReactNode> = {
   evalReport: EvalReport,
 };
 
-// Register each settings section as a dedicated VIEW_MAP entry.
-// The SettingsView component renders only the requested section.
-for (const sectionId of SETTINGS_SECTION_IDS) {
-  VIEW_MAP[`settings-${sectionId}`] = (p) => <SettingsView {...p} section={sectionId} />;
-}
-
 const VERSION = 'v4.5.0';
 
 /**
@@ -242,6 +225,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 }[]>([]);
@@ -657,10 +645,12 @@ function Shell() {
     [toast],
   );
 
-  // v6.x — Each settings section is its own tab. No special "settings mode"
-  // toggle needed; clicking a settings tab just switches to that section.
+  // 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
@@ -688,11 +678,14 @@ function Shell() {
         activeTab,
         setActiveTab: handleTabChange,
         refreshSnapshot,
+        settingsMode,
+        settingsActiveSection,
+        setSettingsActiveSection,
       };
       return renderActiveView(activeTab, viewProps, modViews, modViewsReloadKey);
     }
     return null;
-  }, [activeTab, snapshot, settings, modViews, modViewsReloadKey, refreshSnapshot, handleTabChange]);
+  }, [activeTab, snapshot, settings, modViews, modViewsReloadKey, refreshSnapshot, settingsMode, settingsActiveSection, setSettingsActiveSection, handleTabChange]);
 
   const refreshProjects = async () => {
     try {
@@ -735,16 +728,10 @@ function Shell() {
       toast.info(`/${(r.item as { name: string }).name} — run from the TUI`, 2500);
     } else if (t === 'setting') {
       // v3.0.4 — Jump to Settings view and scroll to the matching row.
-      // v6.x — Each settings section is its own tab; pick the right one
-      // based on the field key prefix (e.g. `theme.accent` -> `settings-theme`).
       const settingId = (r.item as { id?: string; path?: string }).id
         || (r.item as { path?: string }).path
         || '';
-      const sectionKey = settingId.split('.')[0] || '';
-      const sectionId = SETTINGS_SECTION_IDS.includes(sectionKey as typeof SETTINGS_SECTION_IDS[number])
-        ? `settings-${sectionKey}`
-        : 'settings-general';
-      handleTabChange(sectionId);
+      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.
@@ -827,11 +814,17 @@ function Shell() {
         </div>
       )}
       <div className="layout-body">
-        <Sidebar
-          tabs={mergedTabs}
-          activeTab={activeTab}
-          onTabChange={handleTabChange}
-        />
+        {layout !== 'topnav' && (
+          <Sidebar
+            tabs={mergedTabs}
+            activeTab={activeTab}
+            onTabChange={handleTabChange}
+            settingsMode={settingsMode}
+            settingsActiveSection={settingsActiveSection}
+            onSettingsSectionChange={setSettingsActiveSection}
+            onExitSettings={() => handleTabChange('overview')}
+          />
+        )}
         <main className="content" id="main-content" tabIndex={-1}>
           {bootError && (
             <div className="boot-error">

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

@@ -0,0 +1,92 @@
+// src/components/SettingsNav.tsx — v4.9.0 full-sidebar settings navigation.
+// Shown in the sidebar rail when settingsMode is active. All sections are
+// visible at once; clicking one scrolls the Settings view to that section.
+import { ChevronRight, Palette, Terminal, Cpu, RefreshCw, Gauge, ArrowLeft, LayoutGrid, type LucideIcon } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export type SettingsSection = {
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+};
+
+export type SettingsSectionGroup = {
+  label: string;
+  sections: SettingsSection[];
+};
+
+const SECTION_GROUPS: SettingsSectionGroup[] = [
+  {
+    label: 'General',
+    sections: [
+      { id: 'theme', label: 'Theme', icon: Palette },
+      { id: 'layout', label: 'Layout', icon: LayoutGrid },
+      { id: 'general', label: 'General', icon: LayoutGrid },
+    ],
+  },
+  {
+    label: 'Core',
+    sections: [
+      { id: 'env-vars', label: 'Env Vars', icon: Terminal },
+      { id: 'system-llm', label: 'System LLM', icon: Cpu },
+    ],
+  },
+  {
+    label: 'Experience',
+    sections: [
+      { id: 'updates', label: 'Updates', icon: RefreshCw },
+      { id: 'headroom', label: 'Headroom', icon: Gauge },
+    ],
+  },
+];
+
+export type SettingsNavProps = {
+  activeSection: string | null;
+  onSectionChange: (id: string | null) => void;
+  onExitSettings: () => void;
+};
+
+export function SettingsNav({ activeSection, onSectionChange, onExitSettings }: SettingsNavProps) {
+  return (
+    <div className="settings-nav-root" aria-label="Settings sections">
+      {/* Back button */}
+      <button
+        type="button"
+        className="settings-nav-back"
+        onClick={onExitSettings}
+        aria-label="Exit settings"
+      >
+        <ArrowLeft size={14} />
+        <span>Back</span>
+      </button>
+
+      <div className="settings-nav-divider" aria-hidden="true" />
+
+      {/* Section groups */}
+      {SECTION_GROUPS.map((group) => (
+        <div key={group.label} className="settings-nav-group">
+          <div className="settings-nav-group-label">{group.label}</div>
+          {group.sections.map((s) => {
+            const Icon = s.icon;
+            const active = activeSection === s.id;
+            return (
+              <button
+                key={s.id}
+                type="button"
+                className={cn('settings-nav-item', active && 'settings-nav-item-active')}
+                onClick={() => onSectionChange(active ? null : s.id)}
+                aria-current={active ? 'page' : undefined}
+              >
+                {Icon && <Icon size={14} className="settings-nav-item-icon" aria-hidden />}
+                <span className="settings-nav-item-label">{s.label}</span>
+                {active && (
+                  <ChevronRight size={12} className="settings-nav-item-chevron" aria-hidden />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -1,18 +1,37 @@
-// src/components/Sidebar.tsx — vertical navigation rail.
-// v6.x — Sidebar is always shown. Each settings section is its own tab in
-// the rail; there is no longer a "settings mode" that swaps the rail for
-// a sub-nav. The rail uses the same `.sidebar-tab` / `.sidebar-tab-active`
-// classes as before for a consistent visual language.
+// src/components/Sidebar.tsx — vertical navigation rail for sidebar/both layouts.
 import type { TabDef } from './Topbar';
+import { SettingsNav } from './SettingsNav';
 import { cn } from '../lib/utils';
 
 export type SidebarProps = {
   tabs: TabDef[];
   activeTab: string;
   onTabChange: (id: string) => void;
+  /** v4.9.0 — When true, show the full settings sidebar nav instead of tabs. */
+  settingsMode?: boolean;
+  /** v4.9.0 — The currently highlighted settings section. */
+  settingsActiveSection?: string | null;
+  /** v4.9.0 — Called when user clicks a section in the settings sidebar. */
+  onSettingsSectionChange?: (id: string | null) => void;
+  /** v4.9.0 — Called when user clicks the back button in settings mode. */
+  onExitSettings?: () => void;
 };
 
-export function Sidebar({ tabs, activeTab, onTabChange }: SidebarProps) {
+export function Sidebar({ tabs, activeTab, onTabChange, settingsMode, settingsActiveSection, onSettingsSectionChange, onExitSettings }: SidebarProps) {
+  // v4.9.0 — When settingsMode is active, render the full settings nav instead
+  // of the normal tab rail. This lets users see all sections at a glance.
+  if (settingsMode) {
+    return (
+      <aside className="sidebar sidebar-settings-mode" aria-label="Settings navigation">
+        <SettingsNav
+          activeSection={settingsActiveSection ?? null}
+          onSectionChange={onSettingsSectionChange ?? (() => {})}
+          onExitSettings={onExitSettings ?? (() => {})}
+        />
+      </aside>
+    );
+  }
+
   // 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.
@@ -67,4 +86,4 @@ export function Sidebar({ tabs, activeTab, onTabChange }: SidebarProps) {
       </nav>
     </aside>
   );
-}
+}

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

@@ -1,8 +1,4 @@
 // src/components/Topbar.tsx — header with brand, project selector, search, tabs, ws status.
-// v6.x — Each settings section is its own top-level tab in the rail
-// (handled by the Sidebar; the Topbar also surfaces them in its tabs row
-// when the topbar layout is active). Dropped the layout selector and the
-// `settings-mode-indicator` adornment.
 import { useEffect, useState } from 'react';
 import type { ReactNode } from 'react';
 import {
@@ -10,7 +6,9 @@ import {
   MessageSquare,
   Bot,
   Map,
+  Folder,
   CheckSquare,
+  Settings2,
   Sliders,
   Puzzle,
   Clock,
@@ -19,6 +17,8 @@ import {
   ChevronDown,
   Plus,
   RefreshCw,
+  Power,
+  Sparkles,
   Activity,
   Radio,
   Coins,
@@ -26,17 +26,6 @@ import {
   Stethoscope,
   ClipboardCheck,
   Store,
-  Palette,
-  LayoutGrid,
-  Terminal,
-  Wifi,
-  Bell,
-  Lock,
-  Cpu,
-  Gauge,
-  Folder,
-  Sparkles,
-  Settings2,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -78,25 +67,7 @@ export const TABS: TabDef[] = [
   // home screen and from the settings surface (where an operator
   // typically arrives after something looks off).
   { id: 'doctor', label: 'Doctor', icon: Stethoscope },
-  // v6.x — Settings: each section is its own top-level tab. Grouped
-  // visually with a divider before "Theme" so the rail still reads
-  // as "system tabs → settings tabs". Use distinct lucide icons so
-  // each section is recognisable at a glance instead of a generic
-  // gear icon for all of them.
-  { id: '__settings_divider__', label: '', icon: Settings2 },
-  { id: 'settings-theme', label: 'Theme', icon: Palette },
-  { id: 'settings-general', label: 'General', icon: Sliders },
-  { id: 'settings-layout', label: 'Layout', icon: LayoutGrid },
-  { id: 'settings-network', label: 'Network', icon: Wifi },
-  { id: 'settings-notifications', label: 'Notifications', icon: Bell },
-  { id: 'settings-auth', label: 'Auth', icon: Lock },
-  { id: 'settings-env-vars', label: 'Env Vars', icon: Terminal },
-  { id: 'settings-agents', label: 'Agents', icon: Bot },
-  { id: 'settings-system-llm', label: 'System LLM', icon: Cpu },
-  { id: 'settings-headroom', label: 'Headroom', icon: Gauge },
-  { id: 'settings-updates', label: 'Updates', icon: RefreshCw },
-  { id: 'settings-activity-log', label: 'Activity Log', icon: Activity },
-  { id: 'settings-workspaces', label: 'Workspaces', icon: Folder },
+  { id: 'settings', label: 'Settings', icon: Sliders },
 ];
 
 export type TopbarProps = {
@@ -118,7 +89,7 @@ export type TopbarProps = {
    */
   notificationsSlot?: ReactNode;
   /**
-   * Whether to render the tabs row. In sidebar layout the sidebar
+   * 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;
@@ -185,16 +156,6 @@ export function Topbar({
       {showTabs && (
         <nav className="tabs-row" role="tablist" aria-label="Primary tabs">
           {TABS.map((tab) => {
-            // v6.x — `__settings_divider__` is a layout-only entry; render a
-            // non-interactive separator that visually splits system tabs from
-            // settings tabs.
-            if (tab.id === '__settings_divider__') {
-              return (
-                <span key={tab.id} className="tab-separator tab-separator-settings" aria-hidden="true">
-                  <span className="tab-separator-label">Settings</span>
-                </span>
-              );
-            }
             const Icon = tab.icon;
             const active = tab.id === activeTab;
             return (
@@ -209,6 +170,11 @@ export function Topbar({
               >
                 <Icon size={14} className="tab-icon" />
                 <span className="tab-label">{tab.label}</span>
+                {tab.id === 'settings' && active && (
+                  <span className="settings-mode-indicator" title="Settings mode active">
+                    <Settings2 size={12} />
+                  </span>
+                )}
               </button>
             );
           })}
@@ -423,6 +389,3 @@ function TopbarAddProjectDialog({
     </div>
   );
 }
-
-// (No additional exports below this point — keep Topbar's public surface
-//  to the props, TABS, and the named Topbar component.)

package/bizar-dash/src/web/styles/main.css

@@ -9085,9 +9085,24 @@ select:focus-visible,
   margin-top: 1rem;
 }
 
-/* v4.9.0 settings-mode-banner / settings-mode-indicator removed in v6.x:
-   each settings section is its own tab, so there's no longer a "settings
-   mode" to banner or to mark with an indicator dot. */
+/* v4.9.0 — Banner shown in Settings view when settingsMode is active */
+.settings-mode-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 20px;
+  background: linear-gradient(to right, rgba(139, 92, 246, 0.1), transparent);
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text-dim);
+}
+
+.settings-mode-indicator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--accent, #8b5cf6);
+  margin-left: 6px;
+}
 
 /* ─── Toggle switch ──────────────────────────────────────────────── */
 

package/bizar-dash/src/web/styles/settings.css

@@ -595,9 +595,121 @@
   to { transform: rotate(360deg); }
 }
 
-/* v4.9.0 .sidebar-settings-mode and .settings-nav-* classes removed in v6.x:
-   each settings section is its own tab in the sidebar, which uses the
-   shared `.sidebar-tab` / `.sidebar-tab-active` styles. */
+/* ─────────────────────────────────────────────────────────────────────
+   v4.9.0 — Settings sidebar mode (sidebar layout only)
+   When settingsMode is active, the sidebar replaces the normal tab rail
+   with a full-width nav showing all settings sections grouped by category.
+   ───────────────────────────────────────────────────────────────────── */
+
+/* Sidebar when in settings mode — full height, scrollable */
+.sidebar-settings-mode {
+  width: var(--sidebar-width, 240px);
+  overflow-y: auto;
+  border-right: 1px solid var(--border);
+  background: var(--bg);
+}
+
+/* Settings nav root */
+.settings-nav-root {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-3);
+  gap: 2px;
+}
+
+/* Back button */
+.settings-nav-back {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-radius: var(--radius);
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background var(--motion-fast), color var(--motion-fast);
+  margin-bottom: var(--space-2);
+}
+
+.settings-nav-back:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+}
+
+.settings-nav-divider {
+  height: 1px;
+  background: var(--border);
+  margin: var(--space-2) 0;
+}
+
+/* Section groups */
+.settings-nav-group {
+  margin-bottom: var(--space-3);
+}
+
+.settings-nav-group-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+  font-weight: 600;
+  padding: 4px 8px 6px;
+}
+
+/* Individual nav items */
+.settings-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
+}
+
+.settings-nav-item:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+}
+
+.settings-nav-item-active {
+  background: var(--accent-bg);
+  color: var(--accent-2);
+  border-color: var(--accent-border);
+}
+
+.settings-nav-item-active:hover {
+  background: var(--accent-bg);
+  color: var(--accent-2);
+}
+
+.settings-nav-item-icon {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.settings-nav-item-active .settings-nav-item-icon {
+  opacity: 1;
+}
+
+.settings-nav-item-label {
+  flex: 1;
+}
+
+.settings-nav-item-chevron {
+  flex-shrink: 0;
+  opacity: 0.5;
+}
 
 /* ─────────────────────────────────────────────────────────────────────
    v5.4 — Mobile settings accordion (mobile-settings)