repoburg 1.3.185 → 1.3.188

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>
+  );
+}

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,170 @@
+import { useStore } from '../store/store.ts';
+import TurnContent from './TurnContent.tsx';
+import type { Item } from '../types/index.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);
+
+  // 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 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') {
+      entries = allChanges.filter((c) => c.turnIdx === activeTurnIndex);
+    }
+
+    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" 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.map((turn, idx) => (
+        <div key={turn.id} id={`turn-${idx}`} className="turn-block">
+          <TurnContent turn={turn} />
+        </div>
+      ))}
+    </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,44 @@
+import { useStore } from '../store/store.ts';
+import { statusToDot, runtimeIcon } from '../types/index.ts';
+import StatusDot from './StatusDot.tsx';
+import RuntimeIcon from './RuntimeIcon.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, s.has_unreviewed === 1, s.lifecycle);
+        const isActive = activeSessionId === sid;
+        const ri = runtimeIcon(s.runtime_type);
+        return (
+          <div
+            key={sid}
+            className={`ide-tab ${isActive ? 'active' : ''}`}
+            onClick={() => selectSession(sid)}
+          >
+            <RuntimeIcon iconClass={ri.iconClass} iconText={ri.iconText} size={14} />
+            {s.title || sid.slice(0, 8)}
+            {dot && <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,68 @@
+import { useStore } from '../store/store.ts';
+import { statusToDot, statusToLabel, formatDuration } 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, session.has_unreviewed === 1, session.lifecycle);
+  const label = statusToLabel(session.status, isRunning, session.has_unreviewed === 1, session.lifecycle);
+
+  // Calculate duration
+  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);
+  }
+
+  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">{duration}</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,80 @@
+import { useEffect, useRef } from 'react';
+import { useStore } from '../store/store.ts';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle, Undo2 } 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,
+};
+
+const AUTO_DISMISS_MS = 4000;
+
+function ToastItem({ toast }: { toast: ToastType }) {
+  const removeToast = useStore((s) => s.removeToast);
+  const Icon = ICONS[toast.type];
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Manage auto-dismiss with hover-to-pause
+  useEffect(() => {
+    function startTimer() {
+      timerRef.current = setTimeout(() => removeToast(toast.id), AUTO_DISMISS_MS);
+    }
+    startTimer();
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [toast.id, removeToast]);
+
+  function handleMouseEnter() {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }
+
+  function handleMouseLeave() {
+    timerRef.current = setTimeout(() => removeToast(toast.id), 2000);
+  }
+
+  return (
+    <div
+      className={`toast toast-${toast.type}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <Icon size={16} />
+      <span className="toast-message">{toast.message}</span>
+      {toast.undoAction && (
+        <button
+          className="toast-undo"
+          onClick={() => {
+            toast.undoAction?.();
+            removeToast(toast.id);
+          }}
+        >
+          <Undo2 size={12} /> {toast.undoLabel || 'Undo'}
+        </button>
+      )}
+      <button className="toast-close" onClick={() => removeToast(toast.id)}>
+        <X size={14} />
+      </button>
+    </div>
+  );
+}
+
+export default function Toast() {
+  const toasts = useStore((s) => s.toasts);
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="toast-container">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} />
+      ))}
+    </div>
+  );
+}