repoburg 1.3.196 → 1.3.197

package/agent-pane/frontend/src/components/panels/LogsPanel.test.tsx

@@ -1,58 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { render, screen, cleanup } from '@testing-library/react';
-import LogsPanel from './LogsPanel.tsx';
-import { useStore } from '../../store/store.ts';
-import { resetStore } from '../../test/component-helpers.ts';
-
-describe('LogsPanel', () => {
-  beforeEach(() => {
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('shows empty state when no events', () => {
-    render(<LogsPanel />);
-    expect(screen.getByText('No events logged yet')).toBeInTheDocument();
-  });
-
-  it('renders log entries', () => {
-    useStore.setState({
-      eventLog: [
-        { time: '10:00:00', level: 'INFO', message: 'First event' },
-        { time: '10:01:00', level: 'ERROR', message: 'Second event' },
-      ],
-    });
-    render(<LogsPanel />);
-    expect(screen.getByText('First event')).toBeInTheDocument();
-    expect(screen.getByText('Second event')).toBeInTheDocument();
-  });
-
-  it('shows entries in reverse chronological order', () => {
-    useStore.setState({
-      eventLog: [
-        { time: '10:00:00', level: 'INFO', message: 'First' },
-        { time: '10:01:00', level: 'INFO', message: 'Second' },
-      ],
-    });
-    render(<LogsPanel />);
-    const entries = document.querySelectorAll('.log-entry');
-    expect(entries[0].textContent).toContain('Second');
-    expect(entries[1].textContent).toContain('First');
-  });
-
-  it('renders log level with correct CSS class', () => {
-    useStore.setState({
-      eventLog: [
-        { time: '10:00:00', level: 'INFO', message: 'OK' },
-        { time: '10:01:00', level: 'ERROR', message: 'Failed' },
-      ],
-    });
-    render(<LogsPanel />);
-    // Entries are reversed (newest first): ERROR then INFO
-    const levels = document.querySelectorAll('.log-level');
-    expect(levels[0]).toHaveClass('log-error');
-    expect(levels[1]).toHaveClass('log-info');
-  });
-});

package/agent-pane/frontend/src/components/panels/LogsPanel.tsx

@@ -1,25 +0,0 @@
-import { useStore } from '../../store/store.ts';
-
-export default function LogsPanel() {
-  const eventLog = useStore((s) => s.eventLog);
-
-  if (eventLog.length === 0) {
-    return <div className="empty-state">No events logged yet</div>;
-  }
-
-  // Show in reverse chronological order (newest first)
-  const logs = [...eventLog].reverse();
-
-  return (
-    <div className="right-section">
-      <div className="right-section-title">Event Log</div>
-      {logs.map((entry, i) => (
-        <div key={i} className="log-entry">
-          <span className="log-time">{entry.time}</span>
-          <span className={`log-level log-${entry.level.toLowerCase()}`}>{entry.level}</span>
-          <span className="log-msg">{entry.message}</span>
-        </div>
-      ))}
-    </div>
-  );
-}

package/agent-pane/frontend/src/components/panels/MetricsPanel.test.tsx

@@ -1,71 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { render, screen, cleanup } from '@testing-library/react';
-import MetricsPanel from './MetricsPanel.tsx';
-import { resetStore } from '../../test/component-helpers.ts';
-import { makeSession, makeDetail, makeTurn, makeUsage } from '../../test/fixtures.ts';
-
-describe('MetricsPanel', () => {
-  beforeEach(() => {
-    resetStore();
-  });
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('shows empty state when no session', () => {
-    render(<MetricsPanel />);
-    expect(screen.getByText('No session selected')).toBeInTheDocument();
-  });
-
-  it('shows session model or "default" when null', () => {
-    const session = makeSession('s1', { model: null });
-    resetStore({ activeSessionId: 's1', sessions: [session] });
-    render(<MetricsPanel />);
-    expect(screen.getByText('default')).toBeInTheDocument();
-  });
-
-  it('shows repo name from cwd', () => {
-    const session = makeSession('s1', { cwd: '/home/user/my-project' });
-    resetStore({ activeSessionId: 's1', sessions: [session] });
-    render(<MetricsPanel />);
-    expect(screen.getByText('my-project')).toBeInTheDocument();
-  });
-
-  it('shows "—" when cwd is null', () => {
-    const session = makeSession('s1', { cwd: null });
-    resetStore({ activeSessionId: 's1', sessions: [session] });
-    render(<MetricsPanel />);
-    // "—" appears in both Repo and Cost rows — check the Repo label row
-    const repoLabel = screen.getByText('Repo');
-    const repoVal = repoLabel.closest('.metric-row')!.querySelector('.metric-val')!;
-    expect(repoVal.textContent).toBe('—');
-  });
-
-  it('shows turn count', () => {
-    const session = makeSession('s1');
-    const detail = makeDetail('s1', [makeTurn('t1', 's1'), makeTurn('t2', 's1')]);
-    resetStore({ activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
-    render(<MetricsPanel />);
-    expect(screen.getByText('2')).toBeInTheDocument();
-  });
-
-  it('shows token totals from all turns', () => {
-    const session = makeSession('s1');
-    const t1 = makeTurn('t1', 's1', { token_usage: makeUsage({ input_tokens: 100, output_tokens: 200 }) });
-    const t2 = makeTurn('t2', 's1', { token_usage: makeUsage({ input_tokens: 300, output_tokens: 400 }) });
-    const detail = makeDetail('s1', [t1, t2]);
-    resetStore({ activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
-    render(<MetricsPanel />);
-    expect(screen.getByText('400')).toBeInTheDocument(); // total input
-    expect(screen.getByText('600')).toBeInTheDocument(); // total output
-  });
-
-  it('shows reasoning tokens only when > 0', () => {
-    const session = makeSession('s1');
-    const t1 = makeTurn('t1', 's1', { token_usage: makeUsage({ reasoning_output_tokens: 500 }) });
-    const detail = makeDetail('s1', [t1]);
-    resetStore({ activeSessionId: 's1', sessions: [session], sessionDetails: { s1: detail } });
-    render(<MetricsPanel />);
-    expect(screen.getByText('500')).toBeInTheDocument();
-  });
-});

package/agent-pane/frontend/src/components/panels/MetricsPanel.tsx

@@ -1,114 +0,0 @@
-import { useStore } from '../../store/store.ts';
-import StatusDot from '../StatusDot.tsx';
-import { deriveSessionStatus } from '../../hooks/useSessionStatus.ts';
-import { calcSessionDuration } from '../../utils/duration.ts';
-
-export default function MetricsPanel() {
-  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));
-
-  if (!session) {
-    return <div className="empty-state">No session selected</div>;
-  }
-
-  const status = deriveSessionStatus(session);
-  const duration = calcSessionDuration(detail, status.isRunning);
-
-  // Aggregate token usage from all completed turns
-  let totalIn = 0;
-  let totalOut = 0;
-  let totalReasoning = 0;
-  if (detail) {
-    for (const turn of detail.turns) {
-      if (turn.token_usage) {
-        totalIn += turn.token_usage.input_tokens;
-        totalOut += turn.token_usage.output_tokens;
-        totalReasoning += turn.token_usage.reasoning_output_tokens;
-      }
-    }
-  }
-
-  const turnCount = detail?.turns.length ?? 0;
-  const repoName = session.cwd ? session.cwd.split('/').pop() || session.cwd : '—';
-
-  return (
-    <>
-      <div className="right-section">
-        <div className="right-section-title">Session</div>
-        <div className="metric-row">
-          <span className="metric-label">Runtime</span>
-          <span className="metric-val">Codex</span>
-        </div>
-        <div className="metric-row">
-          <span className="metric-label">Model</span>
-          <span className="metric-val">{session.model || 'default'}</span>
-        </div>
-        <div className="metric-row">
-          <span className="metric-label">Repo</span>
-          <span className="metric-val" title={session.cwd || undefined}>
-            {repoName}
-          </span>
-        </div>
-        <div className="metric-row">
-          <span className="metric-label">Turns</span>
-          <span className="metric-val">{turnCount}</span>
-        </div>
-        <div className="metric-row">
-          <span className="metric-label">Duration</span>
-          <span className="metric-val">{duration}</span>
-        </div>
-        <div className="metric-row">
-          <span className="metric-label">Status</span>
-          <span className="metric-val">
-            <span className="badge badge-running">
-              <StatusDot status={status.dot} size={5} /> {status.label}
-            </span>
-          </span>
-        </div>
-      </div>
-
-      <div className="right-section">
-        <div className="right-section-title">Resources</div>
-        <div className="metric-row">
-          <span className="metric-label">Tokens In</span>
-          <span className="metric-val">{totalIn.toLocaleString()}</span>
-        </div>
-        <div className="metric-row">
-          <span className="metric-label">Tokens Out</span>
-          <span className="metric-val">{totalOut.toLocaleString()}</span>
-        </div>
-        {totalReasoning > 0 && (
-          <div className="metric-row">
-            <span className="metric-label">Reasoning</span>
-            <span className="metric-val">{totalReasoning.toLocaleString()}</span>
-          </div>
-        )}
-        <div className="metric-row">
-          <span className="metric-label">Cost</span>
-          <span className="metric-val" style={{ color: 'var(--amber)' }}>
-            —
-          </span>
-        </div>
-      </div>
-
-      <div className="right-section">
-        <div className="right-section-title">Metadata</div>
-        <div className="metric-row">
-          <span className="metric-label">Created</span>
-          <span className="metric-val" style={{ fontSize: '11px' }}>
-            {new Date(session.created_at).toLocaleString()}
-          </span>
-        </div>
-        <div className="metric-row">
-          <span className="metric-label">Thread ID</span>
-          <span className="metric-val" style={{ fontSize: '10px', color: 'var(--text-muted)' }}>
-            {session.external_thread_id ? session.external_thread_id.slice(0, 16) + '…' : '—'}
-          </span>
-        </div>
-      </div>
-    </>
-  );
-}