@polderlabs/bizar 4.5.1 → 4.7.0

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/Memory.tsx

@@ -7,7 +7,7 @@
 // semantic search) plus a config panel and a high-level overview. Each is a
 // standalone component under views/memory/.
 
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   Brain,
   FileText,
@@ -50,7 +50,7 @@ const SOURCES: Array<{
   { id: 'config', label: 'Config', icon: Sliders },
 ];
 
-export function Memory(_props: Props) {
+function MemoryInner(_props: Props) {
   const toast = useToast();
   const [active, setActive] = useState<SubPanel>('overview');
   const [refreshKey, setRefreshKey] = useState(0);
@@ -137,4 +137,5 @@ export function Memory(_props: Props) {
       </div>
     </div>
   );
-}
+}
+export const Memory = React.memo(MemoryInner);

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

@@ -8,7 +8,7 @@
 // (written by minimax.mjs after every chatCompletion / fetchRemains call).
 // The Usage Analytics tab is only shown when the key is configured.
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Coins,
   RefreshCw,
@@ -196,7 +196,7 @@ type TimeRange = '24h' | '7d' | '30d' | 'custom';
 
 // ─── Main component ────────────────────────────────────────────────────
 
-export function MiniMaxUsage({ activeTab, setActiveTab }: Props) {
+function MiniMaxUsageInner({ activeTab, setActiveTab }: Props) {
   // Share state between tabs.
   const [view, setView] = useState<'quota' | 'analytics'>('quota');
   const toast = useToast();
@@ -921,3 +921,4 @@ function OnboardingWizard({ step, setStep, keyDraft, setKeyDraft, showKey, setSh
     </div>
   );
 }
+export const MiniMaxUsage = React.memo(MiniMaxUsageInner);

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

@@ -1,5 +1,5 @@
 // src/views/Overview.tsx — v3.7.0 activity cards + SSE stream.
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Bot,
   CheckSquare,
@@ -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';
@@ -49,7 +50,7 @@ type Props = {
   refreshSnapshot: () => Promise<void>;
 };
 
-export function Overview({
+function OverviewInner({
   snapshot,
   settings,
   setActiveTab,
@@ -367,21 +368,23 @@ export function Overview({
           </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>
         )}
@@ -813,3 +816,5 @@ function ActivityFeedItem({
     </div>
   );
 }
+const OverviewMemo = React.memo(OverviewInner);
+export { OverviewMemo as Overview };

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

@@ -485,7 +485,7 @@ function UpdatesCard() {
   );
 }
 
-export function SettingsView({ settings: initial, refreshSnapshot }: Props) {
+function SettingsViewInner({ settings: initial, refreshSnapshot }: Props) {
   const toast = useToast();
   const [settings, setSettings] = useState<Settings>(initial);
   const [dirty, setDirty] = useState(false);
@@ -888,6 +888,7 @@ export function SettingsView({ 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 @@ export function SettingsView({ 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 @@ export function SettingsView({ 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 @@ export function SettingsView({ 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 @@ export function SettingsView({ 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 @@ export function SettingsView({ 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 }))}
@@ -1821,3 +1827,4 @@ function ActivityLogCard() {
     </Card>
   );
 }
+export const SettingsView = React.memo(SettingsViewInner);

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

@@ -1,5 +1,5 @@
 // src/views/Skills.tsx — v4.0.0 skills browser: scans all local SKILL.md sources.
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   Sparkles,
   Search,
@@ -58,7 +58,7 @@ const SOURCE_ICON: Record<string, typeof Package> = {
   project: Folder,
 };
 
-export function Skills({ snapshot, refreshSnapshot }: Props) {
+function SkillsInner({ snapshot, refreshSnapshot }: Props) {
   const toast = useToast();
   const modal = useModal();
   const [skills, setSkills]       = useState<Skill[]>([]);
@@ -377,3 +377,4 @@ function highlightMatch(text: string, q: string): React.ReactNode {
     </>
   );
 }
+export const Skills = React.memo(SkillsInner);

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

@@ -20,7 +20,7 @@
 // We keep the API contract (statuses: queued/doing/done/blocked/backlog)
 // so the dashboard doesn't break the existing server, tasks store, and
 // tests. The UI maps API statuses to friendlier labels.
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   CheckSquare,
   Plus,
@@ -76,7 +76,7 @@ const COLUMNS: { id: Task['status']; label: string; kind: StatusKind }[] = [
 const PRIORITIES = ['low', 'normal', 'high'] as const;
 type Priority = (typeof PRIORITIES)[number];
 
-export function Tasks({ snapshot, refreshSnapshot, setActiveTab }: Props) {
+function TasksInner({ snapshot, refreshSnapshot, setActiveTab }: Props) {
   const toast = useToast();
   const modal = useModal();
   const [tasks, setTasks] = useState<Task[]>(snapshot.tasks || []);
@@ -771,4 +771,5 @@ function openEditTaskModal(
       </div>
     ),
   });
-}
+}
+export const Tasks = React.memo(TasksInner);

package/bizar-dash/src/web/views/memory/MemoryOverview.tsx

@@ -98,14 +98,14 @@ export function MemoryOverview({ refreshKey, onRefresh, setActiveSubPanel }: Pro
   const [data, setData] = useState<MemoryOverviewData | null>(null);
   const [loading, setLoading] = useState(true);
 
-  const reload = async () => {
+  const reload = async (signal?: AbortSignal) => {
     setLoading(true);
     try {
       const [health, status, lightrag, storage] = await Promise.all([
-        api.get<HealthResponse>('/memory/health').catch(() => null),
-        api.get<MemoryStatus>('/memory/status').catch(() => null),
-        api.get<LightragStats>('/memory/lightrag/stats').catch(() => null),
-        api.get<StorageStats>('/memory/storage').catch(() => null),
+        api.get<HealthResponse>('/memory/health', signal).catch(() => null),
+        api.get<MemoryStatus>('/memory/status', signal).catch(() => null),
+        api.get<LightragStats>('/memory/lightrag/stats', signal).catch(() => null),
+        api.get<StorageStats>('/memory/storage', signal).catch(() => null),
       ]);
       setData({
         health: health || {
@@ -145,7 +145,9 @@ export function MemoryOverview({ refreshKey, onRefresh, setActiveSubPanel }: Pro
   };
 
   useEffect(() => {
-    reload();
+    const ctrl = new AbortController();
+    void reload(ctrl.signal);
+    return () => ctrl.abort();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refreshKey]);
 

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

@@ -0,0 +1,151 @@
+/**
+ * tests/cli-bugfixes.test.mjs — regression tests for CLI + installer bug fixes.
+ *
+ * Covers:
+ *   B1 — parseWithModsFlag exits with code 2 when no value follows --with-mods
+ *   B7 — check-deps.mjs uses path.join() (Windows fix) + covers all deps
+ *   B9 — --json flag works for `bizar doctor --json`
+ *   B10 — --debug flag sets DEBUG env var
+ *
+ * Run with: node --test bizar-dash/tests/cli-bugfixes.test.mjs
+ */
+import { describe, it, beforeEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { join } from 'node:path';
+
+const REPO = join(process.cwd());
+
+// ─── B1: parseWithModsFlag exits with code 2 on missing value ──────────────────
+
+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/commands/install.mjs');
+    let exitCode = null;
+    const origExit = process.exit;
+    // Mock process.exit to capture the code without terminating the test
+    try {
+      process.exit = (code) => { exitCode = code; throw new Error('exit:' + code); };
+      parseWithModsFlag(['install', '--with-mods']);
+    } catch (err) {
+      if (err.message.startsWith('exit:')) exitCode = parseInt(err.message.split(':')[1]);
+    } finally {
+      process.exit = origExit;
+    }
+    assert.strictEqual(exitCode, 2, 'should have called process.exit(2)');
+  });
+
+  it('exits with code 2 when next arg is another flag', async () => {
+    const { parseWithModsFlag } = await import('../../cli/commands/install.mjs');
+    let exitCode = null;
+    const origExit = process.exit;
+    try {
+      process.exit = (code) => { exitCode = code; throw new Error('exit:' + code); };
+      parseWithModsFlag(['install', '--with-mods', '--force']);
+    } catch (err) {
+      if (err.message.startsWith('exit:')) exitCode = parseInt(err.message.split(':')[1]);
+    } finally {
+      process.exit = origExit;
+    }
+    assert.strictEqual(exitCode, 2);
+  });
+
+  it('returns null when --with-mods is not present', async () => {
+    const { parseWithModsFlag } = await import('../../cli/commands/install.mjs');
+    let exitCode = null;
+    const origExit = process.exit;
+    try {
+      process.exit = (code) => { exitCode = code; throw new Error('exit:' + code); };
+      const result = parseWithModsFlag(['install', '--force']);
+      assert.strictEqual(result, null);
+      assert.strictEqual(exitCode, null);
+    } finally {
+      process.exit = origExit;
+    }
+  });
+
+  it('returns array of mod ids when value is provided', async () => {
+    const { parseWithModsFlag } = await import('../../cli/commands/install.mjs');
+    let exitCode = null;
+    const origExit = process.exit;
+    try {
+      process.exit = (code) => { exitCode = code; throw new Error('exit:' + code); };
+      const result = parseWithModsFlag(['install', '--with-mods', 'a,b,c']);
+      assert.deepStrictEqual(result, ['a', 'b', 'c']);
+      assert.strictEqual(exitCode, null);
+    } finally {
+      process.exit = origExit;
+    }
+  });
+});
+
+// ─── B7: check-deps.mjs cross-platform path joining ───────────────────────────
+
+describe('B7 — check-deps.mjs which() uses path.join()', () => {
+  it('covers all required dependencies', async () => {
+    const { checkDeps } = await import('../../scripts/check-deps.mjs');
+    const result = await checkDeps({ strict: false });
+    const names = [...result.present, ...result.missing].map(d => d.name);
+    const required = ['node', 'bun', 'opencode', 'tmux', 'git', 'python3', 'pip', 'jq', 'gh', 'headroom', 'semble', 'skills'];
+    for (const dep of required) {
+      assert.ok(names.includes(dep), `expected ${dep} to be checked`);
+    }
+  });
+
+  it('which() uses join() from node:path for path construction', async () => {
+    const { readFileSync } = await import('node:fs');
+    const src = readFileSync(join(process.cwd(), 'scripts', 'check-deps.mjs'), 'utf8');
+    assert.ok(src.includes("import { join } from 'node:path'"), 'should import join from node:path');
+    assert.ok(src.includes('join(dir, cmd + ext)'), 'should use join() for path construction');
+  });
+});
+
+// ─── B9: --json flag for doctor ───────────────────────────────────────────────
+
+describe('B9 — --json flag', () => {
+  it('doctor --json outputs valid JSON', async () => {
+    const { spawnSync } = await import('node:child_process');
+    const bin = join(REPO, 'cli', 'bin.mjs');
+    const result = spawnSync('node', [bin, 'doctor', '--json'], {
+      encoding: 'utf8',
+      timeout: 30000,
+    });
+    const out = result.stdout.trim();
+    // Should be parseable as JSON
+    let parsed;
+    try {
+      parsed = JSON.parse(out);
+    } catch {
+      assert.fail(`expected JSON output, got: ${out.slice(0, 200)}`);
+      return;
+    }
+    assert.ok('passed' in parsed, 'JSON should have passed field');
+    assert.ok('failed' in parsed, 'JSON should have failed field');
+    assert.ok('results' in parsed, 'JSON should have results field');
+    assert.ok(Array.isArray(parsed.results), 'results should be an array');
+  });
+});
+
+// ─── B10: --debug flag sets DEBUG env var ──────────────────────────────────────
+
+describe('B10 — --debug flag', () => {
+  it('dbg() helper is defined in bin.mjs', async () => {
+    const { readFileSync } = await import('node:fs');
+    const src = readFileSync(join(REPO, 'cli', 'bin.mjs'), 'utf8');
+    assert.ok(src.includes('function dbg('), 'dbg() helper should be defined');
+    assert.ok(src.includes("process.env.DEBUG = 'bizar:*'"), '--debug should set DEBUG=bizar:*');
+    assert.ok(src.includes("process.env.BIZAR_DEBUG = '1'"), '--debug should set BIZAR_DEBUG=1');
+  });
+
+  it('--debug flag is accepted without error', async () => {
+    const { spawnSync } = await import('node:child_process');
+    const bin = join(REPO, 'cli', 'bin.mjs');
+    // Just verify --debug doesn't cause a parse error or unknown flag
+    const result = spawnSync('node', [bin, '--help', '--debug'], {
+      encoding: 'utf8',
+      timeout: 10000,
+    });
+    // --debug should not cause an error (help should print)
+    assert.ok(result.status === 0 || result.stdout.includes('bizar'), '--debug should not error');
+  });
+});