repoburg 1.3.185 → 1.3.188

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

@@ -0,0 +1,81 @@
+import { useStore } from '../../store/store.ts';
+
+export default function ChangesPanel() {
+  const { activeSessionId, sessionDetails, changesScope, setChangesScope, activeTurnIndex, setSelectedChangePath } = useStore();
+  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
+  const turns = detail?.turns ?? [];
+
+  // Collect file_change items
+  type ChangeEntry = { path: string; kind: string };
+  const entries: ChangeEntry[] = [];
+
+  if (changesScope === 'session') {
+    turns.forEach((turn) => {
+      turn.items.forEach((item) => {
+        if (item.type === 'file_change' && item.data?.changes) {
+          const changes = item.data.changes as Array<{ path: string; kind: string }>;
+          changes.forEach((c) => entries.push({ path: c.path, kind: c.kind }));
+        }
+      });
+    });
+  } else {
+    // Current turn only
+    const turn = turns[activeTurnIndex];
+    if (turn) {
+      turn.items.forEach((item) => {
+        if (item.type === 'file_change' && item.data?.changes) {
+          const changes = item.data.changes as Array<{ path: string; kind: string }>;
+          changes.forEach((c) => entries.push({ path: c.path, kind: c.kind }));
+        }
+      });
+    }
+  }
+
+  // Deduplicate by path (keep last occurrence)
+  const seen = new Map<string, ChangeEntry>();
+  for (const e of entries) seen.set(e.path, e);
+  const deduped = Array.from(seen.values());
+
+  return (
+    <>
+      <div className="changes-scope-toggle">
+        <button
+          className={`scope-btn ${changesScope === 'session' ? 'active' : ''}`}
+          onClick={() => setChangesScope('session')}
+        >Session</button>
+        <button
+          className={`scope-btn ${changesScope === 'turngroup' ? 'active' : ''}`}
+          onClick={() => setChangesScope('turngroup')}
+        >Current Turn</button>
+      </div>
+
+      {deduped.length === 0 ? (
+        <div className="empty-state">No file changes in this scope</div>
+      ) : (
+        <div className="right-section">
+          <div className="right-section-title">Changed Files ({deduped.length})</div>
+          {deduped.map((entry) => {
+            const statusClass = entry.kind === 'add' ? 'fc-add' : entry.kind === 'delete' ? 'fc-del' : 'fc-mod';
+            const statusChar = entry.kind === 'add' ? 'A' : entry.kind === 'delete' ? 'D' : 'M';
+            const fileName = entry.path.split('/').pop() || entry.path;
+            const dir = entry.path.replace('/' + fileName, '');
+
+            return (
+              <div
+                key={entry.path}
+                className="file-change clickable"
+                onClick={() => setSelectedChangePath(entry.path)}
+              >
+                <span className={`fc-status ${statusClass}`}>{statusChar}</span>
+                <span className="fc-name">
+                  {dir && <span style={{ color: 'var(--text-muted)' }}>{dir}/</span>}
+                  {fileName}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,25 @@
+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.tsx

@@ -0,0 +1,82 @@
+import { useStore } from '../../store/store.ts';
+import { statusToDot, statusToLabel, formatDuration } from '../../types/index.ts';
+import StatusDot from '../StatusDot.tsx';
+
+export default function MetricsPanel() {
+  const { activeSessionId, sessions, sessionDetails } = useStore();
+  const session = sessions.find((s) => s.id === activeSessionId);
+  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
+
+  if (!session) {
+    return <div className="empty-state">No session selected</div>;
+  }
+
+  const isRunning = session.is_running === 1;
+  const dot = statusToDot(session.status, isRunning);
+  const label = statusToLabel(session.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;
+
+  // Calculate duration from first turn created_at to last turn updated_at (or now if running)
+  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);
+  }
+
+  // Repo name = basename of cwd
+  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={dot} size={5} /> {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>
+    </>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { useStore } from '../../store/store.ts';
+import { User } from 'lucide-react';
+
+export default function TurnsPanel() {
+  const { activeSessionId, sessionDetails, activeTurnIndex, setActiveTurnIndex } = useStore();
+  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
+  const turns = detail?.turns ?? [];
+
+  if (turns.length === 0) {
+    return <div className="empty-state">No turns yet</div>;
+  }
+
+  function handleClick(idx: number) {
+    setActiveTurnIndex(idx);
+    // Scroll render area to turn position
+    requestAnimationFrame(() => {
+      document.getElementById(`turn-${idx}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  }
+
+  return (
+    <div className="right-section">
+      <div className="right-section-title">Conversation</div>
+      {turns.map((turn, idx) => {
+        const isActive = idx === activeTurnIndex;
+        const preview = turn.user_prompt.length > 50
+          ? turn.user_prompt.slice(0, 50) + '…'
+          : turn.user_prompt;
+
+        return (
+          <div
+            key={turn.id}
+            className={`turn-item ${isActive ? 'active' : ''}`}
+            onClick={() => handleClick(idx)}
+          >
+            <span className="turn-item-icon" style={{ background: 'var(--amber)', color: '#fff' }}>
+              <User size={12} />
+            </span>
+            <span className="turn-item-label">{preview}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/agent-pane/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './styles/app.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);