repoburg 1.3.188 → 1.3.196

package/agent-pane/frontend/src/components/RenderArea.test.tsx

@@ -0,0 +1,160 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import RenderArea from './RenderArea.tsx';
+import { resetStore } from '../test/component-helpers.ts';
+import { makeDetail, makeTurn, makeItem } from '../test/fixtures.ts';
+
+
+describe('RenderArea', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('shows "No session selected" when no active session and not loading', () => {
+    render(<RenderArea />);
+    expect(screen.getByText('No session selected')).toBeInTheDocument();
+  });
+
+  it('shows skeleton bars when loading and no detail', () => {
+    resetStore({ loading: true });
+    render(<RenderArea />);
+    expect(document.querySelector('.skeleton-bars')).toBeInTheDocument();
+  });
+
+  it('renders turns when session has detail', () => {
+    const turn = makeTurn('t1', 's1', { user_prompt: 'Hello agent' });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<RenderArea />);
+    expect(screen.getByText('Hello agent')).toBeInTheDocument();
+  });
+
+  it('shows "No turns yet" when session has no turns', () => {
+    const detail = makeDetail('s1', []);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail } });
+    render(<RenderArea />);
+    expect(screen.getByText('No turns yet. Send a message below to start.')).toBeInTheDocument();
+  });
+
+  it('shows submitting prompt at top while waiting', () => {
+    const detail = makeDetail('s1', []);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, submittingPrompt: 'pending msg' });
+    render(<RenderArea />);
+    expect(screen.getByText('pending msg')).toBeInTheDocument();
+    expect(screen.getByText('Sending…')).toBeInTheDocument();
+  });
+
+  it('changes tab shows file changes when present', () => {
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = { changes: [{ path: 'src/app.ts', kind: 'modify' }] };
+    const turn = makeTurn('t1', 's1', { items: [item] });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
+    render(<RenderArea />);
+    expect(screen.getByText(/app\.ts/)).toBeInTheDocument();
+  });
+
+  it('changes tab shows "No file changes" when empty', () => {
+    const detail = makeDetail('s1', [makeTurn('t1', 's1')]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
+    render(<RenderArea />);
+    expect(screen.getByText('No file changes in this scope.')).toBeInTheDocument();
+  });
+
+  it('changes tab shows "No session selected" when no session', () => {
+    resetStore({ activeRightTab: 'changes' });
+    render(<RenderArea />);
+    expect(screen.getByText('No session selected')).toBeInTheDocument();
+  });
+
+  // --- selectedChangePath scroll effect ---
+
+  it('selectedChangePath scrolls to diff element and clears path', () => {
+    // Stub scrollIntoView on Element prototype (jsdom doesn't implement it)
+    const proto = Element.prototype as unknown as { scrollIntoView: unknown };
+    const orig = proto.scrollIntoView;
+    proto.scrollIntoView = vi.fn();
+
+    vi.useFakeTimers();
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = { changes: [{ path: 'src/app.ts', kind: 'modify' }] };
+    const turn = makeTurn('t1', 's1', { items: [item] });
+    const detail = makeDetail('s1', [turn]);
+    const setSelectedChangePath = vi.fn();
+    resetStore({
+      activeSessionId: 's1',
+      sessionDetails: { s1: detail },
+      activeRightTab: 'changes',
+      selectedChangePath: 'src/app.ts',
+      setSelectedChangePath,
+    });
+
+    render(<RenderArea />);
+    vi.advanceTimersByTime(100);
+
+    expect(setSelectedChangePath).toHaveBeenCalledWith(null);
+    vi.useRealTimers();
+    proto.scrollIntoView = orig;
+  });
+
+  // --- changes tab edge cases ---
+
+  it('changes tab shows "files" plural when multiple changes', () => {
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = {
+      changes: [
+        { path: 'src/a.ts', kind: 'add' },
+        { path: 'src/b.ts', kind: 'delete' },
+      ],
+    };
+    const turn = makeTurn('t1', 's1', { items: [item] });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
+    render(<RenderArea />);
+    expect(screen.getByText('2 files')).toBeInTheDocument();
+  });
+
+  it('changes tab shows add and delete status badges', () => {
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = {
+      changes: [
+        { path: 'src/new.ts', kind: 'add' },
+        { path: 'src/old.ts', kind: 'delete' },
+      ],
+    };
+    const turn = makeTurn('t1', 's1', { items: [item] });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
+    render(<RenderArea />);
+    expect(screen.getByText('Added')).toBeInTheDocument();
+    expect(screen.getByText('Deleted')).toBeInTheDocument();
+  });
+
+  it('changes tab shows directory path split', () => {
+    const item = makeItem('i1', 't1', 'file_change');
+    item.data = { changes: [{ path: 'src/components/Foo.tsx', kind: 'modify' }] };
+    const turn = makeTurn('t1', 's1', { items: [item] });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({ activeSessionId: 's1', sessionDetails: { s1: detail }, activeRightTab: 'changes' });
+    render(<RenderArea />);
+    expect(screen.getByText('Foo.tsx')).toBeInTheDocument();
+  });
+
+  // --- loading + detail edge case ---
+
+  it('loading with existing detail renders turns, not skeleton', () => {
+    const turn = makeTurn('t1', 's1', { user_prompt: 'Hello' });
+    const detail = makeDetail('s1', [turn]);
+    resetStore({
+      activeSessionId: 's1',
+      sessionDetails: { s1: detail },
+      loading: true,
+    });
+    render(<RenderArea />);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+    expect(document.querySelector('.skeleton-bars')).not.toBeInTheDocument();
+  });
+});

package/agent-pane/frontend/src/components/RenderArea.tsx

@@ -1,10 +1,20 @@
 import { useStore } from '../store/store.ts';
 import TurnContent from './TurnContent.tsx';
-import type { Item } from '../types/index.ts';
+import { collectFileChanges } from '../utils/changes.ts';
 import { memo, useEffect, useRef } from 'react';
 
 function RenderAreaBase() {
-  const { activeSessionId, sessionDetails, activeTurnIndex, activeRightTab, changesScope, submittingPrompt, loading, selectedChangePath, setSelectedChangePath } = useStore();
+  const {
+    activeSessionId,
+    sessionDetails,
+    activeTurnIndex,
+    activeRightTab,
+    changesScope,
+    submittingPrompt,
+    loading,
+    selectedChangePath,
+    setSelectedChangePath,
+  } = useStore();
 
   const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
   const turns = detail?.turns ?? [];
@@ -36,24 +46,7 @@ function RenderAreaBase() {
       );
     }
 
-    const allChanges: Array<{ path: string; kind: string; turnIdx: number }> = [];
-    turns.forEach((t, tIdx) => {
-      t.items.forEach((item: Item) => {
-        if (item.type === 'file_change' && item.data?.changes) {
-          const changes = item.data.changes as Array<{ path: string; kind: string }>;
-          changes.forEach((c) => allChanges.push({ path: c.path, kind: c.kind, turnIdx: tIdx }));
-        }
-      });
-    });
-
-    let entries = allChanges;
-    if (changesScope === 'turngroup') {
-      entries = allChanges.filter((c) => c.turnIdx === activeTurnIndex);
-    }
-
-    const seen = new Map<string, { path: string; kind: string }>();
-    for (const c of entries) seen.set(c.path, { path: c.path, kind: c.kind });
-    const deduped = Array.from(seen.values());
+    const deduped = collectFileChanges(turns, changesScope, activeTurnIndex);
 
     if (deduped.length === 0) {
       return (
@@ -139,7 +132,9 @@ function RenderAreaBase() {
           <div className="turn-group">
             <div className="render-content">
               <div className="turn-header">
-                <span className="turn-header-icon" style={{ background: 'var(--amber)', color: '#fff' }}>U</span>
+                <span className="turn-header-icon" style={{ background: 'var(--amber)', color: '#fff' }}>
+                  U
+                </span>
                 <span className="turn-header-title">You</span>
               </div>
               <p className="user-message">{submittingPrompt}</p>
@@ -152,9 +147,7 @@ function RenderAreaBase() {
       )}
 
       {turns.length === 0 && !submittingPrompt && (
-        <div className="empty-state">
-          No turns yet. Send a message below to start.
-        </div>
+        <div className="empty-state">No turns yet. Send a message below to start.</div>
       )}
 
       {turns.map((turn, idx) => (
@@ -167,4 +160,4 @@ function RenderAreaBase() {
 }
 
 const RenderArea = memo(RenderAreaBase);
-export default RenderArea;
+export default RenderArea;

package/agent-pane/frontend/src/components/RightPanel.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import RightPanel from './RightPanel.tsx';
+import { resetStore } from '../test/component-helpers.ts';
+
+describe('RightPanel', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders 4 tab buttons', () => {
+    render(<RightPanel />);
+    expect(screen.getByText('Turns')).toBeInTheDocument();
+    expect(screen.getByText('Metrics')).toBeInTheDocument();
+    expect(screen.getByText('Changes')).toBeInTheDocument();
+    expect(screen.getByText('Logs')).toBeInTheDocument();
+  });
+
+  it('active tab has active class', () => {
+    resetStore({ activeRightTab: 'metrics' });
+    render(<RightPanel />);
+    const metricsTab = screen.getByText('Metrics').closest('.right-tab');
+    expect(metricsTab).toHaveClass('active');
+  });
+
+  it('click on tab calls switchRightTab', () => {
+    const switchRightTab = vi.fn();
+    resetStore({ switchRightTab });
+    render(<RightPanel />);
+    fireEvent.click(screen.getByText('Changes'));
+    expect(switchRightTab).toHaveBeenCalledWith('changes');
+  });
+
+  it('renders TurnsPanel when activeRightTab is turns', () => {
+    resetStore({ activeRightTab: 'turns' });
+    render(<RightPanel />);
+    // TurnsPanel renders "No turns yet" when no active session
+    expect(screen.getByText('No turns yet')).toBeInTheDocument();
+  });
+});

package/agent-pane/frontend/src/components/RightPanel.tsx

@@ -37,4 +37,4 @@ export default function RightPanel() {
       </div>
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/RuntimeIcon.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import RuntimeIcon from './RuntimeIcon.tsx';
+
+describe('RuntimeIcon', () => {
+  it('renders span with runtime-icon and iconClass', () => {
+    const { container } = render(<RuntimeIcon iconClass="ic-codex" iconText="CX" />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.tagName).toBe('SPAN');
+    expect(span.className).toBe('runtime-icon ic-codex');
+  });
+
+  it('renders iconText as child content', () => {
+    const { container } = render(<RuntimeIcon iconClass="ic-claude" iconText="CL" />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.textContent).toBe('CL');
+  });
+
+  it('does not set inline style when size is default (20)', () => {
+    const { container } = render(<RuntimeIcon iconClass="ic-codex" iconText="CX" />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.style.cssText).toBe('');
+  });
+
+  it('sets width, height, and fontSize inline style when size is custom', () => {
+    const { container } = render(<RuntimeIcon iconClass="ic-codex" iconText="CX" size={14} />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.style.width).toBe('14px');
+    expect(span.style.height).toBe('14px');
+    expect(span.style.fontSize).toBe('6.3px'); // 14 * 0.45
+  });
+});

package/agent-pane/frontend/src/components/RuntimeIcon.tsx

@@ -13,4 +13,4 @@ export default function RuntimeIcon({ iconClass, iconText, size = 20 }: Props) {
       {iconText}
     </span>
   );
-}
+}

package/agent-pane/frontend/src/components/SessionTabs.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import SessionTabs from './SessionTabs.tsx';
+import { resetStore } from '../test/component-helpers.ts';
+import { makeSession } from '../test/fixtures.ts';
+
+describe('SessionTabs', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders one tab per openTabs entry', () => {
+    const s1 = makeSession('s1', { title: 'Session 1' });
+    const s2 = makeSession('s2', { title: 'Session 2' });
+    resetStore({
+      openTabs: ['s1', 's2'],
+      sessions: [s1, s2],
+      activeSessionId: 's1',
+    });
+    render(<SessionTabs />);
+    expect(screen.getByText('Session 1')).toBeInTheDocument();
+    expect(screen.getByText('Session 2')).toBeInTheDocument();
+  });
+
+  it('active tab has active class', () => {
+    const s1 = makeSession('s1', { title: 'Tab One' });
+    resetStore({ openTabs: ['s1'], sessions: [s1], activeSessionId: 's1' });
+    render(<SessionTabs />);
+    const tab = screen.getByText('Tab One').closest('.ide-tab');
+    expect(tab).toHaveClass('active');
+  });
+
+  it('click on tab calls selectSession', () => {
+    const selectSession = vi.fn().mockResolvedValue(undefined);
+    const s1 = makeSession('s1', { title: 'Tab One' });
+    const s2 = makeSession('s2', { title: 'Tab Two' });
+    resetStore({ openTabs: ['s1', 's2'], sessions: [s1, s2], activeSessionId: 's1', selectSession });
+    render(<SessionTabs />);
+    fireEvent.click(screen.getByText('Tab Two'));
+    expect(selectSession).toHaveBeenCalledWith('s2');
+  });
+
+  it('close button calls closeTab with correct id', () => {
+    const closeTab = vi.fn();
+    const s1 = makeSession('s1', { title: 'Close Me' });
+    resetStore({ openTabs: ['s1'], sessions: [s1], activeSessionId: 's1', closeTab });
+    render(<SessionTabs />);
+    const closeBtn = screen.getByText('Close Me').closest('.ide-tab')!.querySelector('.ide-tab-close')!;
+    fireEvent.click(closeBtn);
+    expect(closeTab).toHaveBeenCalledWith('s1');
+  });
+
+  it('plus button calls setShowNewSessionDialog(true)', () => {
+    const setShowNewSessionDialog = vi.fn();
+    resetStore({ openTabs: [], sessions: [], setShowNewSessionDialog });
+    render(<SessionTabs />);
+    const addBtn = document.querySelector('.ide-tab-add')!;
+    fireEvent.click(addBtn);
+    expect(setShowNewSessionDialog).toHaveBeenCalledWith(true);
+  });
+
+  it('missing session in openTabs returns null for that tab', () => {
+    resetStore({ openTabs: ['s1'], sessions: [], activeSessionId: null });
+    render(<SessionTabs />);
+    // No tab content rendered — only the + button
+    expect(document.querySelectorAll('.ide-tab')).toHaveLength(0);
+    expect(document.querySelector('.ide-tab-add')).toBeInTheDocument();
+  });
+});

package/agent-pane/frontend/src/components/SessionTabs.tsx

@@ -1,29 +1,29 @@
 import { useStore } from '../store/store.ts';
-import { statusToDot, runtimeIcon } from '../types/index.ts';
 import StatusDot from './StatusDot.tsx';
 import RuntimeIcon from './RuntimeIcon.tsx';
+import { deriveSessionStatus } from '../hooks/useSessionStatus.ts';
 import { X, Plus } from 'lucide-react';
 
 export default function SessionTabs() {
-  const { openTabs, activeSessionId, sessions, selectSession, closeTab, setShowNewSessionDialog } = useStore();
+  const openTabs = useStore((s) => s.openTabs);
+  const activeSessionId = useStore((s) => s.activeSessionId);
+  const sessions = useStore((s) => s.sessions);
+  const selectSession = useStore((s) => s.selectSession);
+  const closeTab = useStore((s) => s.closeTab);
+  const setShowNewSessionDialog = useStore((s) => s.setShowNewSessionDialog);
 
   return (
     <div className="ide-tabs">
       {openTabs.map((sid) => {
         const s = sessions.find((x) => x.id === sid);
         if (!s) return null;
-        const dot = statusToDot(s.status, s.is_running === 1, s.has_unreviewed === 1, s.lifecycle);
+        const status = deriveSessionStatus(s);
         const isActive = activeSessionId === sid;
-        const ri = runtimeIcon(s.runtime_type);
         return (
-          <div
-            key={sid}
-            className={`ide-tab ${isActive ? 'active' : ''}`}
-            onClick={() => selectSession(sid)}
-          >
-            <RuntimeIcon iconClass={ri.iconClass} iconText={ri.iconText} size={14} />
+          <div key={sid} className={`ide-tab ${isActive ? 'active' : ''}`} onClick={() => selectSession(sid)}>
+            <RuntimeIcon iconClass={status.iconClass} iconText={status.iconText} size={14} />
             {s.title || sid.slice(0, 8)}
-            {dot && <StatusDot status={dot} />}
+            {status.dot && <StatusDot status={status.dot} />}
             <span
               className="ide-tab-close"
               onClick={(e) => {
@@ -41,4 +41,4 @@ export default function SessionTabs() {
       </div>
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/StatusBar.test.tsx

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import StatusBar from './StatusBar.tsx';
+import { resetStore } from '../test/component-helpers.ts';
+import { makeSession, makeDetail, makeTurn } from '../test/fixtures.ts';
+
+describe('StatusBar', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('shows AgentPane and Offline when no session', () => {
+    render(<StatusBar />);
+    expect(screen.getByText('AgentPane')).toBeInTheDocument();
+    expect(screen.getByText('Offline')).toBeInTheDocument();
+  });
+
+  it('shows Live when wsConnected is true', () => {
+    resetStore({ wsConnected: true });
+    render(<StatusBar />);
+    expect(screen.getByText('Live')).toBeInTheDocument();
+  });
+
+  it('shows Offline when wsConnected is false', () => {
+    resetStore({ wsConnected: false });
+    render(<StatusBar />);
+    expect(screen.getByText('Offline')).toBeInTheDocument();
+  });
+
+  it('shows status label for active session', () => {
+    const session = makeSession('s1', { status: 'active', is_running: 1 });
+    resetStore({ activeSessionId: 's1', sessions: [session], sessionDetails: { s1: makeDetail('s1') } });
+    render(<StatusBar />);
+    expect(screen.getByText('Running')).toBeInTheDocument();
+  });
+
+  it('shows duration for active session', () => {
+    const session = makeSession('s1', { status: 'active', is_running: 0 });
+    const t1 = makeTurn('t1', 's1', {
+      created_at: '2025-01-01T00:00:00Z',
+      updated_at: '2025-01-01T00:00:05Z',
+    });
+    const detail = makeDetail('s1', [t1]);
+    resetStore({
+      activeSessionId: 's1',
+      sessions: [session],
+      sessionDetails: { s1: detail },
+    });
+    render(<StatusBar />);
+    // Duration = 5 seconds between first turn created_at and last turn updated_at
+    expect(screen.getByText('5s')).toBeInTheDocument();
+  });
+});

package/agent-pane/frontend/src/components/StatusBar.tsx

@@ -1,55 +1,47 @@
 import { useStore } from '../store/store.ts';
-import { statusToDot, statusToLabel, formatDuration } from '../types/index.ts';
 import StatusDot from './StatusDot.tsx';
+import ModelSelector from './ModelSelector.tsx';
+import { deriveSessionStatus } from '../hooks/useSessionStatus.ts';
+import { calcSessionDuration } from '../utils/duration.ts';
 import { Zap, Command } from 'lucide-react';
 
 export default function StatusBar() {
-  const { activeSessionId, sessions, sessionDetails, wsConnected } = useStore();
-  const session = sessions.find((s) => s.id === activeSessionId);
-  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
+  const activeSessionId = useStore((s) => s.activeSessionId);
+  const session = useStore((s) =>
+    activeSessionId ? (s.sessions.find((x) => x.id === activeSessionId) ?? null) : null,
+  );
+  const detail = useStore((s) => (activeSessionId ? (s.sessionDetails[activeSessionId] ?? null) : null));
+  const wsConnected = useStore((s) => s.wsConnected);
 
   if (!session) {
     return (
       <div className="ide-statusbar">
-        <div className="sb-item"><Zap size={14} /> AgentPane</div>
+        <div className="sb-item">
+          <Zap size={14} /> AgentPane
+        </div>
         <div className="sb-divider">|</div>
         <div className="sb-item" title={wsConnected ? 'WebSocket connected' : 'WebSocket disconnected'}>
           <span className={`status-dot ${wsConnected ? 'done' : 'error'}`} />
           {wsConnected ? 'Live' : 'Offline'}
         </div>
         <div className="sb-spacer" />
-        <div className="sb-item"><Command size={14} /> K</div>
+        <div className="sb-item">
+          <Command size={14} /> K
+        </div>
       </div>
     );
   }
 
-  const isRunning = session.is_running === 1;
-  const dot = statusToDot(session.status, isRunning, session.has_unreviewed === 1, session.lifecycle);
-  const label = statusToLabel(session.status, isRunning, session.has_unreviewed === 1, session.lifecycle);
-
-  // Calculate duration
-  let duration = '—';
-  if (detail && detail.turns.length > 0) {
-    const firstTurn = detail.turns[0];
-    const lastTurn = detail.turns[detail.turns.length - 1];
-    const endISO = isRunning ? null : lastTurn.updated_at;
-    duration = formatDuration(firstTurn.created_at, endISO);
-  }
+  const status = deriveSessionStatus(session);
+  const duration = calcSessionDuration(detail, status.isRunning);
 
   return (
     <div className="ide-statusbar">
-      <div className="sb-item"><Zap size={14} /> AgentPane</div>
-      <div className="sb-divider">|</div>
       <div className="sb-item">
-        <span className={`runtime-icon ic-codex`} style={{ width: 16, height: 16, fontSize: 8 }}>CX</span>
-        {session.runtime_type}
+        <Zap size={14} /> AgentPane
       </div>
-      {session.model && (
-        <>
-          <div className="sb-divider">|</div>
-          <div className="sb-item">{session.model}</div>
-        </>
-      )}
+      <div className="sb-divider">|</div>
+      <ModelSelector />
       <div className="sb-spacer" />
       <div className="sb-item" title={wsConnected ? 'WebSocket connected' : 'WebSocket disconnected'}>
         <span className={`status-dot ${wsConnected ? 'done' : 'error'}`} />
@@ -57,12 +49,14 @@ export default function StatusBar() {
       </div>
       <div className="sb-divider">|</div>
       <div className="sb-item" style={session.status === 'failed' ? { color: 'var(--red)' } : undefined}>
-        <StatusDot status={dot} /> {label}
+        <StatusDot status={status.dot} /> {status.label}
       </div>
       <div className="sb-divider">|</div>
       <div className="sb-item">{duration}</div>
       <div className="sb-divider">|</div>
-      <div className="sb-item"><Command size={14} /> K</div>
+      <div className="sb-item">
+        <Command size={14} /> K
+      </div>
     </div>
   );
-}
+}

package/agent-pane/frontend/src/components/StatusDot.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import StatusDot from './StatusDot.tsx';
+
+describe('StatusDot', () => {
+  it('renders span with status-dot and status class', () => {
+    const { container } = render(<StatusDot status="running" />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.tagName).toBe('SPAN');
+    expect(span.className).toBe('status-dot running');
+  });
+
+  it('does not set inline style when size is default (6)', () => {
+    const { container } = render(<StatusDot status="error" />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.style.cssText).toBe('');
+  });
+
+  it('sets width and height inline style when size is custom', () => {
+    const { container } = render(<StatusDot status="queued" size={10} />);
+    const span = container.firstChild as HTMLElement;
+    expect(span.style.width).toBe('10px');
+    expect(span.style.height).toBe('10px');
+  });
+});

package/agent-pane/frontend/src/components/StatusDot.tsx

@@ -4,10 +4,5 @@ interface Props {
 }
 
 export default function StatusDot({ status, size = 6 }: Props) {
-  return (
-    <span
-      className={`status-dot ${status}`}
-      style={size !== 6 ? { width: size, height: size } : undefined}
-    />
-  );
-}
+  return <span className={`status-dot ${status}`} style={size !== 6 ? { width: size, height: size } : undefined} />;
+}