repoburg 1.3.185 → 1.3.186

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

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { useStore } from '../store/store.ts';
+import { X } from 'lucide-react';
+
+export default function NewSessionDialog() {
+  const { showNewSessionDialog, setShowNewSessionDialog, createSession } = useStore();
+  const [title, setTitle] = useState('');
+  const [model, setModel] = useState('');
+  const [cwd, setCwd] = useState('');
+
+  if (!showNewSessionDialog) return null;
+
+  function handleSubmit() {
+    createSession({
+      title: title.trim() || undefined,
+      model: model.trim() || undefined,
+      cwd: cwd.trim() || undefined,
+      runtime_type: 'codex',
+    });
+    setTitle('');
+    setModel('');
+    setCwd('');
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Escape') {
+      setShowNewSessionDialog(false);
+    }
+  }
+
+  return (
+    <div className="dialog-overlay" onClick={() => setShowNewSessionDialog(false)}>
+      <div className="dialog" onClick={(e) => e.stopPropagation()} onKeyDown={handleKeyDown}>
+        <div className="dialog-header">
+          <span className="dialog-title">New Session</span>
+          <button className="dialog-close" onClick={() => setShowNewSessionDialog(false)}>
+            <X size={16} />
+          </button>
+        </div>
+        <div className="dialog-body">
+          <label className="dialog-label">
+            Title (optional)
+            <input
+              className="dialog-input"
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g. refactor auth module"
+              autoFocus
+            />
+          </label>
+          <label className="dialog-label">
+            Model (optional)
+            <input
+              className="dialog-input"
+              type="text"
+              value={model}
+              onChange={(e) => setModel(e.target.value)}
+              placeholder="e.g. gpt-5 (default: Codex picks)"
+            />
+          </label>
+          <label className="dialog-label">
+            Working Directory (optional)
+            <input
+              className="dialog-input"
+              type="text"
+              value={cwd}
+              onChange={(e) => setCwd(e.target.value)}
+              placeholder="e.g. /Users/me/projects/my-app"
+            />
+          </label>
+        </div>
+        <div className="dialog-footer">
+          <button className="dialog-btn-cancel" onClick={() => setShowNewSessionDialog(false)}>
+            Cancel
+          </button>
+          <button className="dialog-btn-create" onClick={handleSubmit}>
+            Create
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,157 @@
+import { useStore } from '../store/store.ts';
+import TurnContent from './TurnContent.tsx';
+import type { Item } from '../types/index.ts';
+import { memo } from 'react';
+
+function RenderAreaBase() {
+  const { activeSessionId, sessionDetails, activeTurnIndex, activeRightTab, changesScope, submittingPrompt } = useStore();
+
+  const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
+  const turns = detail?.turns ?? [];
+  const turn = turns[activeTurnIndex];
+
+  // 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>
+      );
+    }
+
+    // Collect all file_change items across turns
+    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') {
+      let start = activeTurnIndex;
+      while (start > 0 && turns[start] && false) start--; // no user/agent distinction in real turns
+      entries = allChanges.filter((c) => c.turnIdx === activeTurnIndex);
+    }
+
+    // Deduplicate by path (keep last)
+    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());
+
+    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">
+        <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';
+
+            return (
+              <div key={c.path}>
+                <div className="diff-file-header">
+                  <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>
+    );
+  }
+
+  // Default: render turn content
+  if (!turn) {
+    // Show "Sending…" if a prompt was just submitted but turn hasn't been created yet
+    if (submittingPrompt) {
+      return (
+        <div className="render-scroll">
+          <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>
+      );
+    }
+
+    return (
+      <div className="render-scroll">
+        <div className="empty-state">
+          {turns.length === 0 ? 'No turns yet. Send a message below to start.' : 'Select a turn to view content'}
+        </div>
+      </div>
+    );
+  }
+
+  // Error / aborted banner
+  let banner: React.ReactNode = null;
+  if (turn.status === 'failed' && turn.error) {
+    banner = (
+      <div className="error-banner">
+        <span className="banner-icon">!</span>
+        <span className="banner-text">{turn.error}</span>
+      </div>
+    );
+  } else if (turn.status === 'aborted') {
+    banner = (
+      <div className="aborted-banner">
+        <span className="banner-icon">■</span>
+        <span className="banner-text">Turn was cancelled by user.</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="render-scroll">
+      {banner}
+      <TurnContent turn={turn} />
+    </div>
+  );
+}
+
+const RenderArea = memo(RenderAreaBase);
+export default RenderArea;

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

@@ -0,0 +1,40 @@
+import { useStore } from '../store/store.ts';
+import TurnsPanel from './panels/TurnsPanel.tsx';
+import MetricsPanel from './panels/MetricsPanel.tsx';
+import ChangesPanel from './panels/ChangesPanel.tsx';
+import LogsPanel from './panels/LogsPanel.tsx';
+import type { RightTab } from '../types/index.ts';
+
+const TABS: { id: RightTab; label: string }[] = [
+  { id: 'turns', label: 'Turns' },
+  { id: 'metrics', label: 'Metrics' },
+  { id: 'changes', label: 'Changes' },
+  { id: 'logs', label: 'Logs' },
+];
+
+export default function RightPanel() {
+  const { activeRightTab, switchRightTab } = useStore();
+
+  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}
+          </div>
+        ))}
+      </div>
+
+      <div className="right-content">
+        {activeRightTab === 'turns' && <TurnsPanel />}
+        {activeRightTab === 'metrics' && <MetricsPanel />}
+        {activeRightTab === 'changes' && <ChangesPanel />}
+        {activeRightTab === 'logs' && <LogsPanel />}
+      </div>
+    </div>
+  );
+}

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

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

@@ -0,0 +1,41 @@
+import { useStore } from '../store/store.ts';
+import { statusToDot } from '../types/index.ts';
+import StatusDot from './StatusDot.tsx';
+import { X, Plus } from 'lucide-react';
+
+export default function SessionTabs() {
+  const { openTabs, activeSessionId, sessions, selectSession, closeTab, setShowNewSessionDialog } = useStore();
+
+  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);
+        const isActive = activeSessionId === sid;
+        return (
+          <div
+            key={sid}
+            className={`ide-tab ${isActive ? 'active' : ''}`}
+            onClick={() => selectSession(sid)}
+          >
+            {s.title || sid.slice(0, 8)}
+            {s.is_running === 1 && <StatusDot 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.tsx

@@ -0,0 +1,60 @@
+import { useStore } from '../store/store.ts';
+import { statusToDot, statusToLabel } from '../types/index.ts';
+import StatusDot from './StatusDot.tsx';
+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;
+
+  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 isRunning = session.is_running === 1;
+  const dot = statusToDot(session.status, isRunning);
+  const label = statusToLabel(session.status, isRunning);
+  const turnCount = detail?.turns.length ?? 0;
+
+  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}
+      </div>
+      {session.model && (
+        <>
+          <div className="sb-divider">|</div>
+          <div className="sb-item">{session.model}</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={dot} /> {label}
+      </div>
+      <div className="sb-divider">|</div>
+      <div className="sb-item">{turnCount} turn{turnCount !== 1 ? 's' : ''}</div>
+      <div className="sb-divider">|</div>
+      <div className="sb-item"><Command size={14} /> K</div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,34 @@
+import { useStore } from '../store/store.ts';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import type { Toast as ToastType } from '../store/store.ts';
+
+const ICONS: Record<ToastType['type'], typeof CheckCircle> = {
+  success: CheckCircle,
+  error: AlertCircle,
+  info: Info,
+  warn: AlertTriangle,
+};
+
+export default function Toast() {
+  const toasts = useStore((s) => s.toasts);
+  const removeToast = useStore((s) => s.removeToast);
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="toast-container">
+      {toasts.map((toast) => {
+        const Icon = ICONS[toast.type];
+        return (
+          <div key={toast.id} className={`toast toast-${toast.type}`}>
+            <Icon size={16} />
+            <span className="toast-message">{toast.message}</span>
+            <button className="toast-close" onClick={() => removeToast(toast.id)}>
+              <X size={14} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,202 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { memo } from 'react';
+import type { Turn, Item } from '../types/index.ts';
+
+marked.setOptions({ breaks: true, gfm: true });
+
+function renderMarkdown(content: string): string {
+  const raw = marked.parse(content) as string;
+  return DOMPurify.sanitize(raw);
+}
+
+/** Extract text from item data (agent_message / reasoning have {text}). */
+function itemText(item: Item): string {
+  if (item.data?.text) return item.data.text as string;
+  return '';
+}
+
+/** Render a single item as a turn card. */
+function ItemCard({ item }: { item: Item }) {
+  const isRunning = item.status === 'in_progress';
+
+  switch (item.type) {
+    case 'agent_message': {
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon ic-codex">CX</span>
+            <span className="turn-header-title">Agent</span>
+            {isRunning && <span className="turn-header-meta">writing…</span>}
+          </div>
+          <div dangerouslySetInnerHTML={{ __html: renderMarkdown(itemText(item) || '…') }} />
+        </div>
+      );
+    }
+
+    case 'reasoning': {
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>💭</span>
+            <span className="turn-header-title">Reasoning</span>
+          </div>
+          <div dangerouslySetInnerHTML={{ __html: renderMarkdown(itemText(item)) }} />
+        </div>
+      );
+    }
+
+    case 'command_execution': {
+      const data = item.data || {};
+      const command = (data.command as string) || '';
+      const output = (data.aggregated_output as string) || '';
+      const exitCode = data.exit_code as number | null;
+      const summary = isRunning ? 'running…' : (exitCode !== null ? `exit ${exitCode}` : '');
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>🔧</span>
+            <span className="turn-header-title">Command</span>
+            {summary && <span className="turn-header-meta">{summary}</span>}
+          </div>
+          <pre className="cmd-block"><code>{command}</code></pre>
+          {output && <pre className="cmd-output"><code>{output}</code></pre>}
+        </div>
+      );
+    }
+
+    case 'file_change': {
+      const changes = (item.data?.changes as Array<{ path: string; kind: string }>) || [];
+      const summary = `${changes.length} file${changes.length !== 1 ? 's' : ''}`;
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>📁</span>
+            <span className="turn-header-title">File Changes</span>
+            <span className="turn-header-meta">{summary}</span>
+          </div>
+          <div className="file-change-list">
+            {changes.map((c, i) => {
+              const statusChar = c.kind === 'add' ? 'A' : c.kind === 'delete' ? 'D' : 'M';
+              const statusClass = c.kind === 'add' ? 'fc-add' : c.kind === 'delete' ? 'fc-del' : 'fc-mod';
+              return (
+                <div key={i} className="file-change">
+                  <span className={`fc-status ${statusClass}`}>{statusChar}</span>
+                  <span className="fc-name">{c.path}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      );
+    }
+
+    case 'mcp_tool_call': {
+      const data = item.data || {};
+      const tool = (data.tool as string) || 'mcp';
+      const server = (data.server as string) || '';
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>🔌</span>
+            <span className="turn-header-title">MCP: {tool}</span>
+            {server && <span className="turn-header-meta">{server}</span>}
+          </div>
+        </div>
+      );
+    }
+
+    case 'web_search': {
+      const query = (item.data?.query as string) || '';
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>🔍</span>
+            <span className="turn-header-title">Web Search</span>
+          </div>
+          <p className="user-message">{query}</p>
+        </div>
+      );
+    }
+
+    case 'todo_list': {
+      const items = (item.data?.items as Array<{ text: string; completed: boolean }>) || [];
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>📋</span>
+            <span className="turn-header-title">Todo List</span>
+          </div>
+          <ul className="todo-list">
+            {items.map((t, i) => (
+              <li key={i} className={t.completed ? 'todo-done' : 'todo-pending'}>
+                {t.completed ? '✅' : '⬜'} {t.text}
+              </li>
+            ))}
+          </ul>
+        </div>
+      );
+    }
+
+    case 'error': {
+      const msg = (item.data?.message as string) || 'Unknown error';
+      return (
+        <div className="render-content">
+          <div className="turn-header">
+            <span className="turn-header-icon" style={{ background: 'var(--red)', color: '#fff' }}>!</span>
+            <span className="turn-header-title">Error</span>
+          </div>
+          <pre className="cmd-output" style={{ color: 'var(--red)' }}><code>{msg}</code></pre>
+        </div>
+      );
+    }
+
+    default:
+      return null;
+  }
+}
+
+const MemoItemCard = memo(ItemCard);
+
+interface Props {
+  turn: Turn;
+}
+
+function TurnContentBase({ turn }: Props) {
+  return (
+    <div className="turn-group">
+      {/* User prompt */}
+      <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">{turn.user_prompt}</p>
+      </div>
+
+      {/* Items in order */}
+      {turn.items.map((item) => (
+        <MemoItemCard key={item.id} item={item} />
+      ))}
+
+      {/* Turn error (if any) */}
+      {turn.error && (
+        <div className="render-content">
+          <pre className="cmd-output" style={{ color: 'var(--red)' }}><code>{turn.error}</code></pre>
+        </div>
+      )}
+
+      {/* Pending state (no items yet) */}
+      {turn.items.length === 0 && !turn.error && (turn.status === 'pending' || turn.status === 'running') && (
+        <div className="render-content">
+          <p style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>
+            {turn.status === 'running' ? 'Agent is thinking…' : 'Waiting to start…'}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const TurnContent = memo(TurnContentBase);
+export default TurnContent;