@polderlabs/bizar 4.5.2 → 4.7.0

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/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/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>

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

@@ -2,7 +2,7 @@
 // Shows per-project timelines (task events, plan events, project lifecycle)
 // aggregated from the activity log.
 
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   History as HistoryIcon,
   RefreshCw,
@@ -17,6 +17,7 @@ import {
 import { Card, CardTitle, CardMeta } from '../components/Card';
 import { Button } from '../components/Button';
 import { Spinner } from '../components/Spinner';
+import { VirtualList } from '../components/VirtualList';
 import { useToast } from '../components/Toast';
 import { api } from '../lib/api';
 import { cn, formatRelative } from '../lib/utils';
@@ -65,6 +66,85 @@ const TIME_RANGES = [
   { id: 'all', label: 'All time', ms: 0 },
 ];
 
+function renderProjectCard(
+  p: ProjectHistory,
+  events: HistoryEvent[],
+  expanded: Set<string>,
+  toggleProject: (id: string) => void,
+): React.ReactNode {
+  const isOpen = expanded.has(p.id);
+  return (
+    <Card key={p.id} className="history-project" style={{ marginBottom: 4 }}>
+      <div className="history-project-head">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0, flex: 1 }}>
+          <div className="history-project-name">
+            <Folder size={16} /> {p.name}
+          </div>
+          <div className="history-project-meta">{p.path}</div>
+        </div>
+        <div className="history-project-stats">
+          <span className="history-project-stat">
+            <span className="history-project-stat-num">{p.tasks.done}</span>
+            <span className="muted">/ {p.tasks.total} done</span>
+          </span>
+          {p.tasks.doing > 0 && (
+            <span className="history-project-stat">
+              <span className="history-project-stat-num">{p.tasks.doing}</span>
+              <span className="muted">doing</span>
+            </span>
+          )}
+          {p.tasks.blocked > 0 && (
+            <span className="history-project-stat">
+              <span className="history-project-stat-num">{p.tasks.blocked}</span>
+              <span className="muted">blocked</span>
+            </span>
+          )}
+          <span className="history-project-stat">
+            <FileText size={11} /> <span className="history-project-stat-num">{p.plans}</span>
+            <span className="muted"> plan{p.plans === 1 ? '' : 's'}</span>
+          </span>
+          {p.lastAccessed && (
+            <span className="history-project-stat">
+              <span className="muted">last opened {formatRelative(p.lastAccessed)}</span>
+            </span>
+          )}
+        </div>
+        <button
+          type="button"
+          className="icon-btn"
+          onClick={() => toggleProject(p.id)}
+          aria-label={isOpen ? 'Collapse' : 'Expand'}
+        >
+          {isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        </button>
+      </div>
+
+      {isOpen && (
+        <div className="history-timeline-mini">
+          {events.length === 0 ? (
+            <div className="muted" style={{ padding: '12px 8px', fontSize: 12 }}>
+              No events in this time range.
+            </div>
+          ) : (
+            events.slice(-100).reverse().map((ev, i) => (
+              <div key={i} className="history-timeline-row">
+                <span className="history-timeline-ts">
+                  {new Date(ev.ts).toLocaleTimeString()}
+                </span>
+                <span className="history-timeline-kind">{ev.kind || 'event'}</span>
+                <span className="history-timeline-msg" title={String(ev.text || ev.title || '')}>
+                  {ev.author ? `@${ev.author} ` : ''}
+                  {String(ev.text ?? ev.title ?? ev.name ?? '')}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </Card>
+  );
+}
+
 export function History({ snapshot }: Props) {
   const toast = useToast();
   const [data, setData] = useState<HistoryResponse | null>(null);
@@ -203,80 +283,15 @@ export function History({ snapshot }: Props) {
             </Card>
           )}
 
-          {data.projects.map((p) => {
-            const events = eventsByProject.get(p.id) || [];
-            const isOpen = expanded.has(p.id);
-            return (
-              <Card key={p.id} className="history-project">
-                <div className="history-project-head">
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0, flex: 1 }}>
-                    <div className="history-project-name">
-                      <Folder size={16} /> {p.name}
-                    </div>
-                    <div className="history-project-meta">{p.path}</div>
-                  </div>
-                  <div className="history-project-stats">
-                    <span className="history-project-stat">
-                      <span className="history-project-stat-num">{p.tasks.done}</span>
-                      <span className="muted">/ {p.tasks.total} done</span>
-                    </span>
-                    {p.tasks.doing > 0 && (
-                      <span className="history-project-stat">
-                        <span className="history-project-stat-num">{p.tasks.doing}</span>
-                        <span className="muted">doing</span>
-                      </span>
-                    )}
-                    {p.tasks.blocked > 0 && (
-                      <span className="history-project-stat">
-                        <span className="history-project-stat-num">{p.tasks.blocked}</span>
-                        <span className="muted">blocked</span>
-                      </span>
-                    )}
-                    <span className="history-project-stat">
-                      <FileText size={11} /> <span className="history-project-stat-num">{p.plans}</span>
-                      <span className="muted"> plan{p.plans === 1 ? '' : 's'}</span>
-                    </span>
-                    {p.lastAccessed && (
-                      <span className="history-project-stat">
-                        <span className="muted">last opened {formatRelative(p.lastAccessed)}</span>
-                      </span>
-                    )}
-                  </div>
-                  <button
-                    type="button"
-                    className="icon-btn"
-                    onClick={() => toggleProject(p.id)}
-                    aria-label={isOpen ? 'Collapse' : 'Expand'}
-                  >
-                    {isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-                  </button>
-                </div>
-
-                {isOpen && (
-                  <div className="history-timeline-mini">
-                    {events.length === 0 ? (
-                      <div className="muted" style={{ padding: '12px 8px', fontSize: 12 }}>
-                        No events in this time range.
-                      </div>
-                    ) : (
-                      events.slice(-100).reverse().map((ev, i) => (
-                        <div key={i} className="history-timeline-row">
-                          <span className="history-timeline-ts">
-                            {new Date(ev.ts).toLocaleTimeString()}
-                          </span>
-                          <span className="history-timeline-kind">{ev.kind || 'event'}</span>
-                          <span className="history-timeline-msg" title={String(ev.text || ev.title || '')}>
-                            {ev.author ? `@${ev.author} ` : ''}
-                            {String(ev.text ?? ev.title ?? ev.name ?? '')}
-                          </span>
-                        </div>
-                      ))
-                    )}
-                  </div>
-                )}
-              </Card>
-            );
-          })}
+          {data.projects.length > 0 && (
+            <VirtualList
+              items={data.projects}
+              itemHeight={70}
+              height={Math.min(data.projects.length * 70, 500)}
+              className="history-virtual-list"
+              renderItem={(p) => renderProjectCard(p, eventsByProject.get(p.id) || [], expanded, toggleProject)}
+            />
+          )}
 
           {/* Global / unassigned events */}
           {eventsByProject.has('global') && (

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

@@ -33,6 +33,7 @@ import { Button } from '../components/Button';
 import { MemoryStatusCard } from './memory/MemoryStatusCard';
 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 { FileBrowser } from '../components/FileBrowser';
@@ -367,21 +368,23 @@ function OverviewInner({
           </div>
         ) : (
           <div className={cn('activity-feed-list-wrap', !activityExpanded && 'activity-feed-list-wrap-collapsed')}>
-            <div className="activity-feed-list">
-              {activityItems.slice(0, 30).map((it, idx) => {
-                const k = itemKey(it, idx);
-                if (hiddenKeys.has(k)) return null;
+            <VirtualList
+              items={activityItems.slice(0, 30).filter((it, idx) => !hiddenKeys.has(itemKey(it, idx)))}
+              itemHeight={60}
+              height={Math.min(activityItems.filter((it, idx) => !hiddenKeys.has(itemKey(it, idx))).length * 60, 480)}
+              className="activity-feed-list"
+              renderItem={(it, vlIdx) => {
+                const originalIdx = activityItems.slice(0, 30).findIndex((a) => a === it);
                 return (
                   <ActivityFeedItem
-                    key={`${it.ts}-${idx}`}
                     item={it}
-                    activityKey={k}
+                    activityKey={itemKey(it, originalIdx)}
                     onNavigate={setActiveTab}
                     onHide={onHide}
                   />
                 );
-              })}
-            </div>
+              }}
+            />
             {!activityExpanded && activityItems.length > 8 && <div className="activity-feed-fade" aria-hidden="true" />}
           </div>
         )}

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

@@ -888,6 +888,7 @@ function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
                   className="input"
                   value={settings.theme.accent}
                   onChange={(e) => patchTheme({ accent: e.target.value })}
+                  aria-label="Accent color hex"
                 />
               </div>
             </div>
@@ -906,6 +907,7 @@ function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
                   className="input"
                   value={settings.theme.success}
                   onChange={(e) => patchTheme({ success: e.target.value })}
+                  aria-label="Success color hex"
                 />
               </div>
             </div>
@@ -924,6 +926,7 @@ function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
                   className="input"
                   value={settings.theme.warning}
                   onChange={(e) => patchTheme({ warning: e.target.value })}
+                  aria-label="Warning color hex"
                 />
               </div>
             </div>
@@ -942,6 +945,7 @@ function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
                   className="input"
                   value={settings.theme.error}
                   onChange={(e) => patchTheme({ error: e.target.value })}
+                  aria-label="Error color hex"
                 />
               </div>
             </div>
@@ -960,6 +964,7 @@ function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
                   className="input"
                   value={settings.theme.info}
                   onChange={(e) => patchTheme({ info: e.target.value })}
+                  aria-label="Info color hex"
                 />
               </div>
             </div>
@@ -1144,8 +1149,9 @@ function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
                   />
                 </div>
                 <div className="task-form-field">
-                  <label className="field-label">Use HTTPS</label>
+                  <label className="field-label" htmlFor="tailscale-https">Use HTTPS</label>
                   <input
+                    id="tailscale-https"
                     type="checkbox"
                     checked={tailscaleDraft.https}
                     onChange={(e) => setTailscaleDraft((cur) => ({ ...cur, https: e.target.checked }))}

package/bizar-dash/tests/cli-bugfixes.test.mjs

@@ -20,7 +20,7 @@ const REPO = join(process.cwd());
 describe('B1 — parseWithModsFlag', () => {
   it('exits with code 2 when --with-mods is the last arg', async () => {
     // Import fresh each time to avoid module-level side effects
-    const { parseWithModsFlag } = await import('../../cli/bin.mjs');
+    const { parseWithModsFlag } = await import('../../cli/commands/install.mjs');
     let exitCode = null;
     const origExit = process.exit;
     // Mock process.exit to capture the code without terminating the test
@@ -36,7 +36,7 @@ describe('B1 — parseWithModsFlag', () => {
   });
 
   it('exits with code 2 when next arg is another flag', async () => {
-    const { parseWithModsFlag } = await import('../../cli/bin.mjs');
+    const { parseWithModsFlag } = await import('../../cli/commands/install.mjs');
     let exitCode = null;
     const origExit = process.exit;
     try {
@@ -51,7 +51,7 @@ describe('B1 — parseWithModsFlag', () => {
   });
 
   it('returns null when --with-mods is not present', async () => {
-    const { parseWithModsFlag } = await import('../../cli/bin.mjs');
+    const { parseWithModsFlag } = await import('../../cli/commands/install.mjs');
     let exitCode = null;
     const origExit = process.exit;
     try {
@@ -65,7 +65,7 @@ describe('B1 — parseWithModsFlag', () => {
   });
 
   it('returns array of mod ids when value is provided', async () => {
-    const { parseWithModsFlag } = await import('../../cli/bin.mjs');
+    const { parseWithModsFlag } = await import('../../cli/commands/install.mjs');
     let exitCode = null;
     const origExit = process.exit;
     try {