repoburg 1.3.202 → 1.3.209

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

@@ -1,170 +0,0 @@
-import { useStore } from '../store/store.ts';
-import TurnContent from './TurnContent.tsx';
-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 detail = activeSessionId ? sessionDetails[activeSessionId] : null;
-  const turns = detail?.turns ?? [];
-  const renderScrollRef = useRef<HTMLDivElement>(null);
-
-  // Auto-scroll to bottom when session changes or new turns are added
-  useEffect(() => {
-    if (renderScrollRef.current) {
-      renderScrollRef.current.scrollTop = renderScrollRef.current.scrollHeight;
-    }
-  }, [activeSessionId, turns.length]);
-
-  // F4: Scroll to selected change path when it changes
-  useEffect(() => {
-    if (!selectedChangePath || activeRightTab !== 'changes') return;
-    const timer = setTimeout(() => {
-      const sanitized = selectedChangePath.replace(/[^a-zA-Z0-9]/g, '-');
-      const el = document.getElementById(`diff-${sanitized}`);
-      if (el) {
-        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        el.classList.add('diff-highlight');
-        setTimeout(() => el.classList.remove('diff-highlight'), 1500);
-      }
-      setSelectedChangePath(null);
-    }, 50);
-    return () => clearTimeout(timer);
-  }, [selectedChangePath, activeRightTab, setSelectedChangePath]);
-
-  // When Changes tab is active, render file changes from items
-  if (activeRightTab === 'changes') {
-    if (!detail) {
-      return (
-        <div className="render-scroll">
-          <div className="empty-state">No session selected</div>
-        </div>
-      );
-    }
-
-    const deduped = collectFileChanges(turns, changesScope, activeTurnIndex);
-
-    if (deduped.length === 0) {
-      return (
-        <div className="render-scroll">
-          <div className="render-content">
-            <p style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>No file changes in this scope.</p>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div className="render-scroll" ref={renderScrollRef}>
-        <div className="render-content">
-          <div style={{ marginBottom: '20px' }}>
-            <span style={{ fontSize: '16px', fontWeight: 600, color: 'var(--text)' }}>
-              {changesScope === 'session' ? 'All Session Changes' : 'Current Turn Changes'}
-            </span>
-            <span style={{ fontSize: '12px', color: 'var(--text-muted)', marginLeft: '8px' }}>
-              {deduped.length} file{deduped.length > 1 ? 's' : ''}
-            </span>
-          </div>
-          {deduped.map((c) => {
-            const fileName = c.path.split('/').pop() || c.path;
-            const dir = c.path.replace('/' + fileName, '');
-            const statusLabel = c.kind === 'add' ? 'Added' : c.kind === 'delete' ? 'Deleted' : 'Modified';
-            const statusClass = c.kind === 'add' ? 'fc-add' : c.kind === 'delete' ? 'fc-del' : 'fc-mod';
-            const statusChar = c.kind === 'add' ? 'A' : c.kind === 'delete' ? 'D' : 'M';
-            const sanitizedId = c.path.replace(/[^a-zA-Z0-9]/g, '-');
-
-            return (
-              <div key={c.path}>
-                <div className="diff-file-header" id={`diff-${sanitizedId}`}>
-                  <span className={`diff-file-status ${statusClass}`}>{statusChar}</span>
-                  <span className="diff-file-name">
-                    {dir && <span style={{ color: 'var(--text-muted)' }}>{dir}/</span>}
-                    {fileName}
-                  </span>
-                  <span className="diff-file-stats">
-                    <span className={`diff-file-badge ${statusClass}`}>{statusLabel}</span>
-                  </span>
-                </div>
-                <p style={{ color: 'var(--text-muted)', fontSize: '12px', fontStyle: 'italic', padding: '8px 16px' }}>
-                  Diff content not available (Codex SDK limitation).
-                </p>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-
-  // F2: Skeleton loading when fetching session detail for the first time
-  if (loading && !detail) {
-    return (
-      <div className="render-scroll">
-        <div className="skeleton-bars">
-          <div className="skeleton-bar" />
-          <div className="skeleton-bar" />
-          <div className="skeleton-bar" />
-          <div className="skeleton-bar" />
-          <div className="skeleton-bar" />
-        </div>
-      </div>
-    );
-  }
-
-  if (!detail) {
-    return (
-      <div className="render-scroll">
-        <div className="empty-state">No session selected</div>
-      </div>
-    );
-  }
-
-  // Render ALL turns, scrollable
-  return (
-    <div className="render-scroll" ref={renderScrollRef}>
-      {/* Submitting prompt — shown at top while waiting for API response */}
-      {submittingPrompt && (
-        <div className="turn-block">
-          <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-title">You</span>
-              </div>
-              <p className="user-message">{submittingPrompt}</p>
-            </div>
-            <div className="render-content">
-              <p style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Sending…</p>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {turns.length === 0 && !submittingPrompt && (
-        <div className="empty-state">No turns yet. Send a message below to start.</div>
-      )}
-
-      {turns.filter((t) => !t.thread_id).map((turn, idx) => (
-        <div key={turn.id} id={`turn-${idx}`} className="turn-block">
-          <TurnContent turn={turn} runtimeType={detail.runtime_type} threads={detail.threads ?? []} />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-const RenderArea = memo(RenderAreaBase);
-export default RenderArea;

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

@@ -1,29 +0,0 @@
-import { useResizable, type ResizeSide } from '../hooks/useResizable.ts';
-
-interface ResizeHandleProps {
-  side: ResizeSide;
-  minWidth: number;
-  maxWidth: number;
-  getWidth: () => number;
-  setWidth: (w: number) => void;
-}
-
-/**
- * Thin draggable gutter rendered as its own CSS grid track. Sits between a
- * sidebar and the center pane. Dragging adjusts the adjacent sidebar width.
- */
-export default function ResizeHandle({ side, minWidth, maxWidth, getWidth, setWidth }: ResizeHandleProps) {
-  const { onPointerDown, dragging } = useResizable({ side, minWidth, maxWidth, getWidth, setWidth });
-
-  return (
-    <div
-      className={`resize-handle ${side}${dragging ? ' dragging' : ''}`}
-      onPointerDown={onPointerDown}
-      // Gutter shouldn't catch content scroll / text selection; keyboard a11y is non-goal here.
-      role="separator"
-      aria-orientation="vertical"
-      aria-label={`Resize ${side} panel`}
-      data-resizing={dragging ? '' : undefined}
-    />
-  );
-}

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

@@ -1,43 +0,0 @@
-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('Changes')).toBeInTheDocument();
-    expect(screen.getByText('Tasks')).toBeInTheDocument();
-    expect(screen.getByText('Threads')).toBeInTheDocument();
-  });
-
-  it('active tab has active class', () => {
-    resetStore({ activeRightTab: 'changes' });
-    render(<RightPanel />);
-    const changesTab = screen.getByText('Changes').closest('.right-tab');
-    expect(changesTab).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

@@ -1,46 +0,0 @@
-import { useStore } from '../store/store.ts';
-import TurnsPanel from './panels/TurnsPanel.tsx';
-import ChangesPanel from './panels/ChangesPanel.tsx';
-import TasksPanel from './panels/TasksPanel.tsx';
-import ThreadsPanel from './panels/ThreadsPanel.tsx';
-import type { RightTab } from '../types/index.ts';
-
-export default function RightPanel() {
-  const { activeRightTab, switchRightTab, activeSessionId, sessionDetails } = useStore();
-
-  // Badge: active background task count for the Tasks tab
-  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
-  const activeTaskCount = detail?.backgroundTasks?.length ?? 0;
-  const openThreadCount = detail?.threads?.filter((t) => t.status === 'open').length ?? 0;
-
-  const tabs: { id: RightTab; label: string; badge?: number }[] = [
-    { id: 'turns', label: 'Turns' },
-    { id: 'changes', label: 'Changes' },
-    { id: 'tasks', label: 'Tasks', badge: activeTaskCount || undefined },
-    { id: 'threads', label: 'Threads', badge: openThreadCount || undefined },
-  ];
-
-  return (
-    <div className="ide-right">
-      <div className="right-tabs">
-        {tabs.map((tab) => (
-          <div
-            key={tab.id}
-            className={`right-tab ${activeRightTab === tab.id ? 'active' : ''}`}
-            onClick={() => switchRightTab(tab.id)}
-          >
-            {tab.label}
-            {tab.badge ? <span className="right-tab-badge">{tab.badge}</span> : null}
-          </div>
-        ))}
-      </div>
-
-      <div className="right-content">
-        {activeRightTab === 'turns' && <TurnsPanel />}
-        {activeRightTab === 'changes' && <ChangesPanel />}
-        {activeRightTab === 'tasks' && <TasksPanel />}
-        {activeRightTab === 'threads' && <ThreadsPanel />}
-      </div>
-    </div>
-  );
-}

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

@@ -1,32 +0,0 @@
-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

@@ -1,16 +0,0 @@
-interface Props {
-  iconClass: string;
-  iconText: string;
-  size?: number;
-}
-
-export default function RuntimeIcon({ iconClass, iconText, size = 20 }: Props) {
-  return (
-    <span
-      className={`runtime-icon ${iconClass}`}
-      style={size !== 20 ? { width: size, height: size, fontSize: size * 0.45 } : undefined}
-    >
-      {iconText}
-    </span>
-  );
-}

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

@@ -1,72 +0,0 @@
-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,49 +0,0 @@
-import { useStore } from '../store/store.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 = 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 status = deriveSessionStatus(s);
-        const isActive = activeSessionId === sid;
-        return (
-          <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)}
-            {status.dot && <StatusDot status={status.dot} />}
-            <span
-              className="ide-tab-close"
-              onClick={(e) => {
-                e.stopPropagation();
-                closeTab(sid);
-              }}
-            >
-              <X size={12} />
-            </span>
-          </div>
-        );
-      })}
-
-      <div className="ide-tab-add" title="New Session" onClick={() => setShowNewSessionDialog(true)}>
-        <Plus size={14} />
-      </div>
-    </div>
-  );
-}

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

@@ -1,56 +0,0 @@
-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,129 +0,0 @@
-import { useStore } from '../store/store.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, Terminal } from 'lucide-react';
-import type { ContextUsage } from '../types/index.ts';
-
-/** Format a token count as compact K/M (e.g. 30000 → "30K", 1500000 → "1.5M"). */
-function formatTokens(n: number): string {
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`;
-  if (n >= 1_000) return `${Math.round(n / 1_000)}K`;
-  return String(n);
-}
-
-export default function StatusBar() {
-  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);
-  const switchRightTab = useStore((s) => s.switchRightTab);
-  const contextUsage = detail?.contextUsage ?? null;
-
-  if (!session) {
-    return (
-      <div className="ide-statusbar">
-        <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>
-    );
-  }
-
-  const status = deriveSessionStatus(session);
-  const duration = calcSessionDuration(detail, status.isRunning);
-
-  // Count active background tasks from two sources:
-  // 1. backgroundTasks (from background_tasks_changed WS event — Monitor only)
-  // 2. in_progress background_task items in turns (from item:started/updated — both Monitor & Subagent)
-  // Deduplicate by task_id.
-  const bgTasks = detail?.backgroundTasks ?? [];
-  const activeTaskIds = new Set<string>();
-  const activeTaskTypes = new Map<string, string>();
-
-  for (const t of bgTasks) {
-    activeTaskIds.add(t.task_id);
-    activeTaskTypes.set(t.task_id, t.task_type);
-  }
-
-  for (const turn of detail?.turns ?? []) {
-    for (const item of turn.items) {
-      if (item.type === 'background_task' && item.status === 'in_progress') {
-        const taskId = (item.data?.task_id as string) ?? item.external_item_id;
-        const taskType = (item.data?.task_type as string) ?? 'unknown';
-        activeTaskIds.add(taskId);
-        activeTaskTypes.set(taskId, taskType);
-      }
-    }
-  }
-
-  const monitorCount = [...activeTaskTypes.values()].filter((t) => t === 'local_bash').length;
-
-  return (
-    <div className="ide-statusbar">
-      <div className="sb-item">
-        <Zap size={14} /> AgentPane
-      </div>
-      <div className="sb-divider">|</div>
-      <ModelSelector />
-      {monitorCount > 0 && (
-        <>
-          <div className="sb-divider">|</div>
-          <div
-            className="sb-item"
-            style={{ color: 'var(--amber)', cursor: 'pointer' }}
-            title={`${monitorCount} Monitor task${monitorCount > 1 ? 's' : ''} running — click to view`}
-            onClick={() => switchRightTab('tasks')}
-          >
-            <Terminal size={14} /> {monitorCount}
-          </div>
-        </>
-      )}
-      <div className="sb-spacer" />
-      <div className="sb-item" title={wsConnected ? 'WebSocket connected' : 'WebSocket disconnected'}>
-        <span className={`status-dot ${wsConnected ? 'done' : 'error'}`} />
-        {wsConnected ? 'Live' : 'Offline'}
-      </div>
-      <div className="sb-divider">|</div>
-      <div className="sb-item" style={session.status === 'failed' ? { color: 'var(--red)' } : undefined}>
-        <StatusDot status={status.dot} /> {status.label}
-      </div>
-      {contextUsage && <ContextBar usage={contextUsage} />}
-      <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>
-  );
-}
-
-/** Compact context usage text — "%40 / 400K / 1M" format, hover tooltip. */
-function ContextBar({ usage }: { usage: ContextUsage }) {
-  const colorVar = usage.percentage >= 85 ? 'var(--red)' : usage.percentage >= 60 ? 'var(--amber)' : 'var(--green)';
-  const tooltip = `${formatTokens(usage.totalTokens)} / ${formatTokens(usage.contextWindow)} tokens`;
-
-  return (
-    <>
-      <div className="sb-divider">|</div>
-      <div className="sb-context" title={tooltip}>
-        <span className="sb-context-text" style={{ color: colorVar }}>
-          {Math.round(usage.percentage)}% / {formatTokens(usage.totalTokens)} / {formatTokens(usage.contextWindow)}
-        </span>
-      </div>
-    </>
-  );
-}

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

@@ -1,25 +0,0 @@
-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');
-  });
-});