@polderlabs/bizar 4.5.1 → 4.7.0

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

@@ -1,6 +1,6 @@
 // src/App.tsx — root shell. Wires data + contexts + tab routing.
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Component, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Topbar, TABS } from './components/Topbar';
 import { Sidebar } from './components/Sidebar';
 import { ModalProvider, useModal } from './components/Modal';
@@ -394,10 +394,6 @@ function Shell() {
         const m = msg;
         const file = m.path?.split('/').pop() || m.path || '';
         toast.info(`File changed: ${file}`, 2500);
-        api
-          .get<Snapshot>('/snapshot')
-          .then((s) => setSnapshot((cur) => ({ ...(cur ?? ({} as Snapshot)), ...s })))
-          .catch(() => undefined);
       } else if (msg.type === 'tasks:change') {
         const m = msg;
         setSnapshot((cur) => {
@@ -798,7 +794,11 @@ function Shell() {
               <p>Loading Bizar…</p>
             </div>
           )}
-          {renderedView}
+          {renderedView && (
+            <Suspense fallback={<div className="loading"><Spinner size="lg" /><p>Loading…</p></div>}>
+              <ViewErrorBoundary>{renderedView}</ViewErrorBoundary>
+            </Suspense>
+          )}
         </main>
       </div>
       <SearchModal
@@ -809,3 +809,37 @@ function Shell() {
     </div>
   );
 }
+
+// v4.5.x — Catches render-time errors in the active view so a single bad
+// component doesn't bring down the whole dashboard (topbar, sidebar, WS).
+// Falls back to a friendly error card with a Retry button that re-mounts
+// the wrapped subtree by remounting the boundary via React `key` bumps.
+class ViewErrorBoundary extends Component<
+  { children: React.ReactNode },
+  { err: Error | null }
+> {
+  state: { err: Error | null } = { err: null };
+  static getDerivedStateFromError(err: Error): { err: Error | null } {
+    return { err };
+  }
+  componentDidCatch(err: Error, info: { componentStack?: string }) {
+    // eslint-disable-next-line no-console
+    console.error('[ViewErrorBoundary] caught render error:', err, info?.componentStack);
+  }
+  reset = () => this.setState({ err: null });
+  override render() {
+    if (this.state.err) {
+      return (
+        <div className="view-error-fallback" role="alert">
+          <AlertTriangle size={20} />
+          <div className="view-error-body">
+            <strong>This view crashed.</strong>
+            <pre>{this.state.err.message}</pre>
+            <Button variant="secondary" size="sm" onClick={this.reset}>Retry</Button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

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

@@ -128,8 +128,8 @@ export function SearchModal({ open, onClose, onSelect }: Props) {
   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} />
+        <div className="search-modal-head" role="search">
+          <Search size={14} aria-hidden />
           <span id="search-modal-title" className="sr-only">Search</span>
           <input
             ref={inputRef}
@@ -138,6 +138,7 @@ export function SearchModal({ open, onClose, onSelect }: Props) {
             value={q}
             onChange={(e) => setQ(e.target.value)}
             onKeyDown={onKey}
+            aria-label="Search"
           />
           <button
             type="button"

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

@@ -134,7 +134,7 @@ function ToastItem({
 }) {
   const Icon = ICONS[toast.kind];
   return (
-    <div className={`toast toast-${toast.kind}`} role="status">
+    <div className={`toast toast-${toast.kind}`} role="alert" aria-live="assertive" aria-atomic="true">
       <Icon size={16} className="toast-icon" />
       <span className="toast-message">{toast.message}</span>
       <button

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

@@ -139,7 +139,7 @@ export function Topbar({
         </div>
       </div>
       {showTabs && (
-        <nav className="tabs-row" role="tablist">
+        <nav className="tabs-row" role="tablist" aria-label="Primary tabs">
           {TABS.map((tab) => {
             const Icon = tab.icon;
             const active = tab.id === activeTab;

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

@@ -0,0 +1,53 @@
+// src/web/components/VirtualList.tsx — hand-rolled virtual scrolling (no external deps).
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+
+export function VirtualList<T>({
+  items,
+  renderItem,
+  itemHeight = 80,
+  height = 400,
+  overscan = 5,
+  className,
+}: {
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+  itemHeight?: number;
+  height?: number;
+  overscan?: number;
+  className?: string;
+}) {
+  const [scrollTop, setScrollTop] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const visibleRange = useMemo(() => {
+    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+    const end = Math.min(
+      items.length,
+      Math.ceil((scrollTop + height) / itemHeight) + overscan,
+    );
+    return { start, end };
+  }, [scrollTop, itemHeight, height, overscan, items.length]);
+
+  const totalHeight = items.length * itemHeight;
+  const offsetY = visibleRange.start * itemHeight;
+  const visibleItems = items.slice(visibleRange.start, visibleRange.end);
+
+  return (
+    <div
+      ref={containerRef}
+      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+      style={{ height, overflowY: 'auto' }}
+      className={className}
+    >
+      <div style={{ height: totalHeight, position: 'relative' }}>
+        <div style={{ transform: `translateY(${offsetY}px)` }}>
+          {visibleItems.map((item, i) => (
+            <div key={visibleRange.start + i} style={{ height: itemHeight }}>
+              {renderItem(item, visibleRange.start + i)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -8,6 +8,7 @@ import { useEffect, useRef } from 'react';
 import { LoadingSkeleton } from './LoadingSkeleton';
 import { WelcomeScreen } from './WelcomeScreen';
 import { MessageBubble } from './MessageBubble';
+import { VirtualList } from '../VirtualList';
 
 interface Message {
   role?: string;
@@ -105,17 +106,22 @@ export function ChatThread({
 
   return (
     <div className="chat-thread legacy" ref={innerRef}>
-      {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))}
-        />
-      ))}
+      <VirtualList
+        items={messages}
+        itemHeight={120}
+        height={800}
+        className="chat-thread-virtual"
+        renderItem={(m, i) => (
+          <MessageBubble
+            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/hooks/useI18n.ts

@@ -0,0 +1,13 @@
+// src/web/hooks/useI18n.ts — React hook for translations.
+import { useState } from 'react';
+import { t, setLocale, getLocale } from '../lib/i18n';
+
+export function useI18n() {
+  const [, force] = useState(0);
+  return {
+    t,
+    setLocale,
+    locale: getLocale(),
+    rerender: () => force((n) => n + 1),
+  };
+}

package/bizar-dash/src/web/lib/api.ts

@@ -135,8 +135,8 @@ class ApiClient {
    * @example
    *   const r = await api.get<ProjectList>('/projects');
    */
-  async get<T>(path: string): Promise<T> {
-    return this.req<T>('GET', path);
+  async get<T>(path: string, signal?: AbortSignal): Promise<T> {
+    return this.req<T>('GET', path, undefined, signal);
   }
 
   /**
@@ -145,8 +145,8 @@ class ApiClient {
    * IMPORTANT: do NOT include the `/api` prefix in `path` — the
    * wrapper adds it. Use the unprefixed form: `api.post('/fs/mkdir', body)`.
    */
-  async post<T>(path: string, body?: unknown): Promise<T> {
-    return this.req<T>('POST', path, body);
+  async post<T>(path: string, body?: unknown, signal?: AbortSignal): Promise<T> {
+    return this.req<T>('POST', path, body, signal);
   }
 
   /**
@@ -155,8 +155,8 @@ class ApiClient {
    * IMPORTANT: do NOT include the `/api` prefix in `path` — the
    * wrapper adds it. Use the unprefixed form: `api.put('/settings', body)`.
    */
-  async put<T>(path: string, body?: unknown): Promise<T> {
-    return this.req<T>('PUT', path, body);
+  async put<T>(path: string, body?: unknown, signal?: AbortSignal): Promise<T> {
+    return this.req<T>('PUT', path, body, signal);
   }
 
   /**
@@ -165,8 +165,8 @@ class ApiClient {
    * IMPORTANT: do NOT include the `/api` prefix in `path` — the
    * wrapper adds it. Use the unprefixed form: `api.patch('/settings', body)`.
    */
-  async patch<T>(path: string, body?: unknown): Promise<T> {
-    return this.req<T>('PATCH', path, body);
+  async patch<T>(path: string, body?: unknown, signal?: AbortSignal): Promise<T> {
+    return this.req<T>('PATCH', path, body, signal);
   }
 
   /**
@@ -175,11 +175,11 @@ class ApiClient {
    * IMPORTANT: do NOT include the `/api` prefix in `path` — the
    * wrapper adds it. Use the unprefixed form: `api.del('/projects/123')`.
    */
-  async del<T = unknown>(path: string): Promise<T> {
-    return this.req<T>('DELETE', path);
+  async del<T = unknown>(path: string, signal?: AbortSignal): Promise<T> {
+    return this.req<T>('DELETE', path, undefined, signal);
   }
 
-  private async req<T>(method: string, path: string, body?: unknown): Promise<T> {
+  private async req<T>(method: string, path: string, body?: unknown, signal?: AbortSignal): Promise<T> {
     const headers: Record<string, string> = { 'Content-Type': 'application/json' };
     const tok = this.getToken();
     if (tok) headers.Authorization = `Bearer ${tok}`;
@@ -187,6 +187,7 @@ class ApiClient {
     if (body !== undefined && body !== null) {
       opts.body = typeof body === 'string' ? body : JSON.stringify(body);
     }
+    if (signal) opts.signal = signal;
     const r = await fetch(this.base + path, opts);
     const ct = r.headers.get('content-type') || '';
     if (ct.includes('application/json')) {

package/bizar-dash/src/web/lib/i18n.ts

@@ -0,0 +1,25 @@
+// src/web/lib/i18n.ts — tiny key-based translation system.
+export type Locale = 'en' | string;
+export type Translations = Record<string, string>;
+
+let currentLocale: Locale = 'en';
+const translations: Record<Locale, Translations> = { en: {} };
+
+export function setLocale(locale: Locale, dict?: Translations) {
+  currentLocale = locale;
+  if (dict) translations[locale] = dict;
+}
+
+export function t(key: string, vars?: Record<string, string | number>): string {
+  let s = translations[currentLocale]?.[key] || translations['en']?.[key] || key;
+  if (vars) {
+    for (const [k, v] of Object.entries(vars)) {
+      s = s.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v));
+    }
+  }
+  return s;
+}
+
+export function getLocale(): Locale {
+  return currentLocale;
+}

package/bizar-dash/src/web/locales/en.json

@@ -0,0 +1,52 @@
+{
+  "settings.title": "Settings",
+  "settings.general": "General",
+  "settings.envVars": "Environment Variables",
+  "settings.providers": "Providers",
+  "settings.theme": "Theme",
+  "settings.themeMode": "Mode",
+  "settings.themeAccent": "Accent",
+  "settings.layout": "Layout",
+  "settings.notifications": "Notifications",
+  "settings.activity": "Activity",
+  "settings.save": "Save",
+  "settings.reset": "Reset",
+  "settings.reload": "Reload",
+  "settings.dashboard": "Dashboard",
+  "settings.background": "Background Agents",
+  "settings.systemLlm": "System LLM API",
+  "settings.headroom": "Headroom",
+  "settings.updates": "Updates",
+  "settings.about": "About",
+  "settings.auth": "Authentication",
+  "settings.agents": "Agent Behavior",
+  "settings.service": "Service",
+  "settings.tailscale": "Tailscale Serve",
+  "chat.title": "Chat",
+  "chat.newSession": "New session",
+  "chat.sendMessage": "Send message",
+  "chat.placeholder": "Type your message…",
+  "chat.export": "Export transcript",
+  "chat.rename": "Rename session",
+  "chat.delete": "Delete session",
+  "memory.title": "Memory",
+  "memory.overview": "Overview",
+  "memory.lightrag": "LightRAG",
+  "memory.obsidian": "Obsidian Vault",
+  "memory.gitSync": "Git Sync",
+  "memory.semantic": "Semantic Search",
+  "memory.config": "Config",
+  "memory.refresh": "Refresh memory",
+  "tasks.title": "Tasks",
+  "tasks.create": "Create task",
+  "tasks.complete": "Mark complete",
+  "tasks.delete": "Delete task",
+  "activity.title": "Activity",
+  "activity.live": "Live",
+  "activity.paused": "Paused",
+  "activity.refresh": "Refresh",
+  "history.title": "History",
+  "history.export": "Export",
+  "overview.title": "Overview",
+  "overview.submit": "Submit to Odin"
+}

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

@@ -3,6 +3,11 @@ import { StrictMode, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import { MobileApp } from './MobileApp';
+import en from './locales/en.json';
+import { setLocale } from './lib/i18n';
+
+// Initialize i18n
+setLocale('en', en);
 // Import mobile CSS so the MobileApp renders with styles when served
 // from index.html (e.g. when the auto-redirect to /m is bypassed).
 import './styles/main.css';

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

@@ -1376,6 +1376,8 @@
   border-radius: var(--radius-lg); padding: 0.875rem 1.125rem;
   transition: border-color var(--motion-base) var(--motion-ease);
   max-width: 880px; width: 100%; align-self: flex-start;
+  content-visibility: auto;
+  contain-intrinsic-size: 0 80px;
 }
 .chat-message-user { background: var(--bg-2); }
 .chat-message-pinned { border-left: 2px solid var(--accent); }

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

@@ -129,10 +129,10 @@ pre,
   --accent-glow: rgba(139, 92, 246, 0.18);
   --accent-soft: rgba(139, 92, 246, 0.08);
 
-  --success: #34d399;
-  --warning: #fbbf24;
-  --error: #f87171;
-  --info: #60a5fa;
+  --success: oklch(0.72 0.16 145);
+  --warning: oklch(0.78 0.14 70);
+  --error: oklch(0.66 0.20 25);
+  --info: oklch(0.72 0.13 235);
   --success-soft: rgba(52, 211, 153, 0.15);
   --error-soft: rgba(248, 113, 113, 0.12);
   --warning-soft: rgba(251, 191, 36, 0.15);
@@ -155,7 +155,7 @@ pre,
     'Inter var', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
     sans-serif;
 
-  /* Spacing scale (8pt) */
+  /* Spacing scale (8pt + extra for spacious layouts) */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
@@ -165,6 +165,9 @@ pre,
   --space-8: 32px;
   --space-10: 40px;
   --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
 
   /* v4.6.0 — Semantic spacing aliases. These mirror the existing
      --space-* numeric scale so existing rules stay untouched, and
@@ -179,10 +182,10 @@ pre,
   --spacing-xl: var(--space-6);  /* 24px — page-level padding */
 
   /* Radius */
-  --radius-sm: 4px;
+  --radius-sm: 6px;
   --radius: 8px;
   --radius-md: 10px;
-  --radius-lg: 12px;
+  --radius-lg: 14px;
   --radius-xl: 16px;
 
   /* Shadows */
@@ -197,28 +200,15 @@ pre,
 
   /* Motion */
   --motion-fast: 120ms;
-  --motion-base: 180ms;
-  --motion-slow: 280ms;
+  --motion-base: 200ms;
+  --motion-slow: 320ms;
   --ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
 
   /* v3.21.x — Semantic and surface tokens for chat UI overhaul */
   --surface-0: var(--bg);
   --surface-1: color-mix(in oklab, var(--bg) 92%, var(--text) 8%);
   --surface-2: color-mix(in oklab, var(--bg) 84%, var(--text) 16%);
-  --success: oklch(0.72 0.16 145);
-  --warning: oklch(0.78 0.14 70);
-  --error: oklch(0.66 0.20 25);
-  --info: oklch(0.72 0.13 235);
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --motion-fast: 120ms;
-  --motion-base: 200ms;
-  --motion-slow: 320ms;
-  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
-  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
-  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
-  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
 
   /* v3.21.x — Gemini-inspired surface tokens for chat UI overhaul.
      --bg-1, --bg-2 are NEW names that don't conflict with --bg / --bg-elev. */
@@ -429,6 +419,41 @@ pre,
   font-size: 12px;
 }
 
+/* v4.5.x — Per-view render-error fallback shown by App's ErrorBoundary.
+   Different from .boot-error (which fires before any view mounts). */
+.view-error-fallback {
+  max-width: 560px;
+  margin: var(--space-12) auto;
+  padding: var(--space-6);
+  background: var(--bg-elev);
+  border: 1px solid var(--error);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-2);
+  display: flex;
+  gap: var(--space-4);
+  align-items: flex-start;
+}
+.view-error-fallback > svg {
+  color: var(--error);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.view-error-fallback .view-error-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.view-error-fallback pre {
+  background: var(--bg);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+}
+
 /* v3.6.2 — Token-entry form on boot-error screen */
 .token-entry-form {
   margin: var(--space-4) 0;
@@ -1438,6 +1463,8 @@ pre,
   font-family: var(--font-mono);
   border-left: 2px solid var(--border);
   align-items: baseline;
+  content-visibility: auto;
+  contain-intrinsic-size: 0 80px;
 }
 
 .activity-item:hover {
@@ -3207,6 +3234,8 @@ pre,
     box-shadow var(--motion-base) var(--ease),
     transform var(--motion-fast) var(--ease),
     background var(--motion-base) var(--ease);
+  content-visibility: auto;
+  contain-intrinsic-size: 0 80px;
 }
 .task-card::before {
   content: '';

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

@@ -162,6 +162,8 @@
   cursor: grab;
   transition: transform var(--motion-fast) var(--ease),
     border-color var(--motion-base) var(--ease);
+  content-visibility: auto;
+  contain-intrinsic-size: 0 80px;
 }
 
 .task-card:hover {

package/bizar-dash/src/web/views/Activity.tsx

@@ -35,6 +35,7 @@ import { Button } from '../components/Button';
 import { Card, CardTitle } from '../components/Card';
 import { EmptyState } from '../components/EmptyState';
 import { Spinner } from '../components/Spinner';
+import { VirtualList } from '../components/VirtualList';
 import { useToast } from '../components/Toast';
 import { useModal } from '../components/Modal';
 import { api } from '../lib/api';
@@ -776,23 +777,29 @@ export function Activity({ snapshot, refreshSnapshot }: Props) {
                     <p>No events yet.</p>
                   </div>
                 ) : (
-                  [...events].reverse().map((ev, i) => {
-                    const Icon =
-                      ev.author ? Bot : ev.kind === 'task' ? CheckSquare : ev.kind === 'bg' ? Cpu : ActivityIcon;
-                    return (
-                      <div key={`${ev.ts}-${i}`} className="tl-stream-event">
-                        <span className="tl-stream-event-time">
-                          {new Date(ev.ts).toLocaleTimeString('en-GB', { hour12: false })}
-                        </span>
-                        <span className="tl-stream-event-icon" style={{ color: statusColor(ev.kind) }}>
-                          <Icon size={12} />
-                        </span>
-                        <span className="tl-stream-event-text">
-                          {ev.author || ev.text || ev.kind}
-                        </span>
-                      </div>
-                    );
-                  })
+                  <VirtualList
+                    items={[...events].reverse()}
+                    itemHeight={40}
+                    height={400}
+                    className="tl-stream-virtual"
+                    renderItem={(ev) => {
+                      const Icon =
+                        ev.author ? Bot : ev.kind === 'task' ? CheckSquare : ev.kind === 'bg' ? Cpu : ActivityIcon;
+                      return (
+                        <div className="tl-stream-event">
+                          <span className="tl-stream-event-time">
+                            {new Date(ev.ts).toLocaleTimeString('en-GB', { hour12: false })}
+                          </span>
+                          <span className="tl-stream-event-icon" style={{ color: statusColor(ev.kind) }}>
+                            <Icon size={12} />
+                          </span>
+                          <span className="tl-stream-event-text">
+                            {ev.author || ev.text || ev.kind}
+                          </span>
+                        </div>
+                      );
+                    }}
+                  />
                 )}
               </div>
             </aside>