repoburg 1.3.185 → 1.3.186

package/agent-pane/frontend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "agent-pane-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "dompurify": "^3.2.0",
+    "lucide-react": "^0.469.0",
+    "marked": "^15.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.0.5",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}

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

@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { useStore } from './store/store.ts';
+import IdeWorkspace from './components/IdeWorkspace.tsx';
+import NewSessionDialog from './components/NewSessionDialog.tsx';
+import CommandPalette from './components/CommandPalette.tsx';
+import Toast from './components/Toast.tsx';
+import AppInitializer from './AppInitializer.tsx';
+
+export default function App() {
+  const loading = useStore((s) => s.loading);
+  const error = useStore((s) => s.error);
+  const sessions = useStore((s) => s.sessions);
+  const setShowCommandPalette = useStore((s) => s.setShowCommandPalette);
+
+  // Cmd+K / Ctrl+K listener
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setShowCommandPalette(true);
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [setShowCommandPalette]);
+
+  return (
+    <>
+      <AppInitializer />
+      {loading && sessions.length === 0 ? (
+        <div className="empty-state">Loading sessions…</div>
+      ) : error && sessions.length === 0 ? (
+        <div className="empty-state">Error: {error}</div>
+      ) : (
+        <>
+          <IdeWorkspace />
+          <NewSessionDialog />
+          <CommandPalette />
+          <Toast />
+        </>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { useStore } from './store/store.ts';
+import { connectWebSocket, disconnectWebSocket } from './api/websocket.ts';
+
+export default function AppInitializer() {
+  const init = useStore((s) => s.init);
+
+  useEffect(() => {
+    // Fetch initial sessions from REST API
+    init();
+
+    // Connect WebSocket for live streaming
+    connectWebSocket();
+
+    // visibilitychange — reconcile when tab returns to foreground
+    function handleVisibilityChange() {
+      if (document.visibilityState !== 'visible') return;
+
+      const state = useStore.getState();
+      const activeId = state.activeSessionId;
+      if (!activeId) return;
+
+      const detail = state.sessionDetails[activeId];
+
+      // If WS is not connected, reconnect
+      if (!state.wsConnected) {
+        connectWebSocket();
+      }
+
+      // If session was running, re-fetch to catch missed events
+      if (detail && detail.is_running === 1) {
+        state.refreshActiveSession();
+        state.addLogEntry('INFO', 'Tab returned — reconciling session state');
+      }
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      disconnectWebSocket();
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [init]);
+
+  return null;
+}

package/agent-pane/frontend/src/api/client.ts

@@ -0,0 +1,29 @@
+const API_BASE = '/api';
+
+export async function apiGet<T>(path: string): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`);
+  if (!res.ok) {
+    throw new Error(`GET ${path} failed: ${res.status} ${res.statusText}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+export async function apiPost<T>(path: string, body?: unknown): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  if (!res.ok) {
+    throw new Error(`POST ${path} failed: ${res.status} ${res.statusText}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+export async function apiDelete<T>(path: string): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, { method: 'DELETE' });
+  if (!res.ok) {
+    throw new Error(`DELETE ${path} failed: ${res.status} ${res.statusText}`);
+  }
+  return res.json() as Promise<T>;
+}

package/agent-pane/frontend/src/api/sessions.ts

@@ -0,0 +1,31 @@
+import { apiGet, apiPost, apiDelete } from './client.ts';
+import type { Session, SessionDetail, Turn } from '../types/index.ts';
+
+export function fetchSessions(): Promise<Session[]> {
+  return apiGet<Session[]>('/sessions');
+}
+
+export function fetchSessionDetail(id: string): Promise<SessionDetail> {
+  return apiGet<SessionDetail>(`/sessions/${id}`);
+}
+
+export function createSession(body: {
+  title?: string;
+  runtime_type?: string;
+  model?: string;
+  cwd?: string;
+}): Promise<Session> {
+  return apiPost<Session>('/sessions', body);
+}
+
+export function deleteSession(id: string): Promise<{ success: boolean }> {
+  return apiDelete<{ success: boolean }>(`/sessions/${id}`);
+}
+
+export function submitPrompt(sessionId: string, userPrompt: string): Promise<Turn> {
+  return apiPost<Turn>(`/sessions/${sessionId}/turns`, { user_prompt: userPrompt });
+}
+
+export function cancelTurn(sessionId: string): Promise<{ success: boolean }> {
+  return apiPost<{ success: boolean }>(`/sessions/${sessionId}/cancel`);
+}

package/agent-pane/frontend/src/api/websocket.ts

@@ -0,0 +1,139 @@
+import { useStore } from '../store/store.ts';
+import type { Item, TokenUsage } from '../types/index.ts';
+
+type WsEventHandler = (data: unknown) => void;
+
+let ws: WebSocket | null = null;
+let reconnectTimer: number | null = null;
+let reconnectDelay = 1000;
+const MAX_RECONNECT_DELAY = 10000;
+
+/** Build the WebSocket URL from the current page location. */
+function buildWsUrl(): string {
+  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${proto}//${window.location.host}/ws`;
+}
+
+/** Connect to the backend WebSocket server. Dispatches events to store actions. */
+export function connectWebSocket(): void {
+  if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+    return;
+  }
+
+  ws = new WebSocket(buildWsUrl());
+
+  ws.onopen = () => {
+    const wasDisconnected = reconnectDelay > 1000;
+    reconnectDelay = 1000; // reset backoff
+    useStore.getState().setWsConnected(true);
+    useStore.getState().addLogEntry('INFO', 'WebSocket connected');
+
+    // On reconnect (not initial connect): reconcile active session
+    if (wasDisconnected) {
+      const state = useStore.getState();
+      if (state.activeSessionId) {
+        state.refreshActiveSession();
+        state.addToast('info', 'WebSocket reconnected — session state reconciled');
+      }
+    }
+  };
+
+  ws.onclose = () => {
+    useStore.getState().setWsConnected(false);
+    useStore.getState().addLogEntry('WARN', 'WebSocket disconnected');
+    useStore.getState().addToast('warn', 'WebSocket disconnected — reconnecting…');
+    scheduleReconnect();
+  };
+
+  ws.onerror = () => {
+    // onclose will fire after onerror
+  };
+
+  ws.onmessage = (event: MessageEvent) => {
+    try {
+      const msg = JSON.parse(event.data as string);
+      const handler = HANDLERS[msg.event as string];
+      if (handler) {
+        handler(msg.data);
+      }
+    } catch {
+      // Ignore malformed messages
+    }
+  };
+}
+
+/** Disconnect the WebSocket (used on unmount). */
+export function disconnectWebSocket(): void {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  if (ws) {
+    ws.onclose = null; // prevent reconnect on intentional close
+    ws.close();
+    ws = null;
+  }
+  useStore.getState().setWsConnected(false);
+}
+
+/** Schedule a reconnect with exponential backoff. */
+function scheduleReconnect(): void {
+  if (reconnectTimer) return;
+  reconnectTimer = window.setTimeout(() => {
+    reconnectTimer = null;
+    connectWebSocket();
+  }, reconnectDelay);
+  reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY);
+}
+
+// --- Event handlers — dispatch to store actions ---
+
+interface TurnEventPayload {
+  sessionId: string;
+  turnId: string;
+}
+
+interface ItemEventPayload {
+  sessionId: string;
+  turnId: string;
+  item: Item;
+}
+
+interface TurnCompletedPayload {
+  sessionId: string;
+  turnId: string;
+  usage: TokenUsage;
+}
+
+interface TurnFailedPayload {
+  sessionId: string;
+  turnId: string;
+  error: string;
+}
+
+const HANDLERS: Record<string, WsEventHandler> = {
+  'turn:started': (data) => {
+    const p = data as TurnEventPayload;
+    useStore.getState().onTurnStarted(p.sessionId, p.turnId);
+  },
+  'item:started': (data) => {
+    const p = data as ItemEventPayload;
+    useStore.getState().onItemStarted(p.sessionId, p.turnId, p.item);
+  },
+  'item:updated': (data) => {
+    const p = data as ItemEventPayload;
+    useStore.getState().onItemUpdated(p.sessionId, p.turnId, p.item);
+  },
+  'item:completed': (data) => {
+    const p = data as ItemEventPayload;
+    useStore.getState().onItemCompleted(p.sessionId, p.turnId, p.item);
+  },
+  'turn:completed': (data) => {
+    const p = data as TurnCompletedPayload;
+    useStore.getState().onTurnCompleted(p.sessionId, p.turnId, p.usage);
+  },
+  'turn:failed': (data) => {
+    const p = data as TurnFailedPayload;
+    useStore.getState().onTurnFailed(p.sessionId, p.turnId, p.error);
+  },
+};

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

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { CornerDownLeft, Square } from 'lucide-react';
+import { useStore } from '../store/store.ts';
+
+export default function CommandInputBar() {
+  const [value, setValue] = useState('');
+  const { submitPrompt, cancelTurn } = useStore();
+  const detail = useStore((s) => (s.activeSessionId ? s.sessionDetails[s.activeSessionId] : null));
+  const isRunning = detail?.is_running === 1;
+
+  function handleSend() {
+    const v = value.trim();
+    if (!v || isRunning) return;
+    setValue(''); // Clear input immediately for visual feedback
+    submitPrompt(v);
+  }
+
+  return (
+    <div className="cmd-bar">
+      <input
+        className="cmd-input"
+        placeholder={isRunning ? 'Agent is running…' : 'Type a message to the agent…'}
+        autoComplete="off"
+        value={value}
+        disabled={isRunning}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !isRunning) handleSend();
+        }}
+      />
+      {isRunning ? (
+        <button className="cmd-send" style={{ background: 'var(--red)' }} onClick={() => cancelTurn()}>
+          <Square size={14} /> Cancel
+        </button>
+      ) : (
+        <button className="cmd-send" onClick={handleSend} disabled={!value.trim()}>
+          <CornerDownLeft size={14} /> Send
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,196 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { useStore } from '../store/store.ts';
+import {
+  Plus,
+  Trash2,
+  Send,
+  Square,
+  List,
+  BarChart3,
+  FileCode,
+  ScrollText,
+  X,
+  CornerDownLeft,
+} from 'lucide-react';
+import type { RightTab } from '../types/index.ts';
+
+interface Command {
+  id: string;
+  label: string;
+  hint: string;
+  icon: typeof Plus;
+  action: () => void;
+  available: boolean;
+}
+
+export default function CommandPalette() {
+  const show = useStore((s) => s.showCommandPalette);
+  const setShow = useStore((s) => s.setShowCommandPalette);
+  const store = useStore();
+
+  const [query, setQuery] = useState('');
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Build commands
+  const commands: Command[] = useMemo(() => {
+    const detail = store.activeSessionId ? store.sessionDetails[store.activeSessionId] : null;
+    const isRunning = detail?.is_running === 1;
+
+    return [
+      {
+        id: 'new-session',
+        label: 'New Session',
+        hint: 'Create a new Codex session',
+        icon: Plus,
+        action: () => store.setShowNewSessionDialog(true),
+        available: true,
+      },
+      {
+        id: 'delete-session',
+        label: 'Delete Session',
+        hint: 'Delete the active session',
+        icon: Trash2,
+        action: () => { if (store.activeSessionId) store.deleteSession(store.activeSessionId); },
+        available: !!store.activeSessionId,
+      },
+      {
+        id: 'send-message',
+        label: 'Send Message',
+        hint: 'Focus the message input',
+        icon: Send,
+        action: () => { const el = document.querySelector<HTMLInputElement>('.cmd-input'); el?.focus(); },
+        available: !!store.activeSessionId && !isRunning,
+      },
+      {
+        id: 'cancel-turn',
+        label: 'Cancel Turn',
+        hint: 'Cancel the running turn',
+        icon: Square,
+        action: () => store.cancelTurn(),
+        available: isRunning,
+      },
+      {
+        id: 'tab-turns',
+        label: 'Switch to Turns Tab',
+        hint: 'View conversation timeline',
+        icon: List,
+        action: () => store.switchRightTab('turns' as RightTab),
+        available: !!store.activeSessionId,
+      },
+      {
+        id: 'tab-metrics',
+        label: 'Switch to Metrics Tab',
+        hint: 'View token usage and session info',
+        icon: BarChart3,
+        action: () => store.switchRightTab('metrics' as RightTab),
+        available: !!store.activeSessionId,
+      },
+      {
+        id: 'tab-changes',
+        label: 'Switch to Changes Tab',
+        hint: 'View file changes',
+        icon: FileCode,
+        action: () => store.switchRightTab('changes' as RightTab),
+        available: !!store.activeSessionId,
+      },
+      {
+        id: 'tab-logs',
+        label: 'Switch to Logs Tab',
+        hint: 'View event log',
+        icon: ScrollText,
+        action: () => store.switchRightTab('logs' as RightTab),
+        available: !!store.activeSessionId,
+      },
+      {
+        id: 'close-tab',
+        label: 'Close Tab',
+        hint: 'Close the active session tab',
+        icon: X,
+        action: () => { if (store.activeSessionId) store.closeTab(store.activeSessionId); },
+        available: !!store.activeSessionId,
+      },
+    ];
+  }, [store]);
+
+  // Filter commands
+  const filtered = useMemo(() => {
+    const q = query.toLowerCase().trim();
+    const available = commands.filter((c) => c.available);
+    if (!q) return available;
+    return available.filter((c) =>
+      c.label.toLowerCase().includes(q) || c.hint.toLowerCase().includes(q),
+    );
+  }, [commands, query]);
+
+  // Reset on open
+  useEffect(() => {
+    if (show) {
+      setQuery('');
+      setSelectedIdx(0);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [show]);
+
+  // Keyboard navigation
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setSelectedIdx((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const cmd = filtered[selectedIdx];
+      if (cmd) {
+        cmd.action();
+        setShow(false);
+      }
+    } else if (e.key === 'Escape') {
+      setShow(false);
+    }
+  }
+
+  if (!show) return null;
+
+  return (
+    <div className="palette-overlay" onClick={() => setShow(false)}>
+      <div className="palette" onClick={(e) => e.stopPropagation()}>
+        <div className="palette-search">
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder="Type a command…"
+            value={query}
+            onChange={(e) => { setQuery(e.target.value); setSelectedIdx(0); }}
+            onKeyDown={handleKeyDown}
+          />
+          <span className="palette-esc">ESC</span>
+        </div>
+        {filtered.length === 0 ? (
+          <div className="palette-empty">No matching commands</div>
+        ) : (
+          <div className="palette-list">
+            {filtered.map((cmd, i) => {
+              const Icon = cmd.icon;
+              return (
+                <div
+                  key={cmd.id}
+                  className={`palette-item ${i === selectedIdx ? 'selected' : ''}`}
+                  onClick={() => { cmd.action(); setShow(false); }}
+                  onMouseEnter={() => setSelectedIdx(i)}
+                >
+                  <span className="palette-item-icon"><Icon size={16} /></span>
+                  <span className="palette-item-label">{cmd.label}</span>
+                  <span className="palette-item-hint">{cmd.hint}</span>
+                  {i === selectedIdx && <CornerDownLeft size={12} className="palette-item-enter" />}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import type { DiffLine } from '../types/index.ts';
+
+interface Props {
+  lines: DiffLine[];
+}
+
+export default function DiffViewer({ lines }: Props) {
+  return (
+    <div className="diff-body">
+      {lines.map((line, i) => {
+        const cls =
+          line.type === 'add' ? 'diff-line-add' :
+          line.type === 'del' ? 'diff-line-del' : 'diff-line-ctx';
+        const sign = line.type === 'add' ? '+' : line.type === 'del' ? '−' : ' ';
+
+        return (
+          <div key={i} className={`diff-line ${cls}`}>
+            <span className="diff-line-num">{line.oldLine ?? ''}</span>
+            <span className="diff-line-num">{line.newLine ?? ''}</span>
+            <span className="diff-sign">{sign}</span>
+            <span className="diff-line-content">{line.content}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+import WorkspaceSidebar from './WorkspaceSidebar.tsx';
+import SessionTabs from './SessionTabs.tsx';
+import RenderArea from './RenderArea.tsx';
+import CommandInputBar from './CommandInputBar.tsx';
+import RightPanel from './RightPanel.tsx';
+import StatusBar from './StatusBar.tsx';
+
+export default function IdeWorkspace() {
+  return (
+    <div className="ide-root">
+      <div className="ide-layout">
+        <WorkspaceSidebar />
+        <div className="ide-center">
+          <SessionTabs />
+          <div className="ide-render">
+            <RenderArea />
+          </div>
+          <CommandInputBar />
+        </div>
+        <RightPanel />
+      </div>
+      <StatusBar />
+    </div>
+  );
+}