repoburg 1.3.185 → 1.3.188

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

@@ -0,0 +1,294 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { memo, useState, useEffect } from 'react';
+import { Layers, ChevronRight } from 'lucide-react';
+import type { Turn, Item } from '../types/index.ts';
+import CollapsibleToolCalls, { isToolItem } from './CollapsibleToolCalls.tsx';
+
+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);
+export { MemoItemCard };
+
+interface Props {
+  turn: Turn;
+}
+
+function TurnContentBase({ turn }: Props) {
+  const [intermediateExpanded, setIntermediateExpanded] = useState(false);
+
+  // Auto-expand Level 1 when turn is running/pending, auto-collapse when completed
+  useEffect(() => {
+    if (turn.status === 'running' || turn.status === 'pending') {
+      setIntermediateExpanded(true);
+    } else if (turn.status === 'completed') {
+      setIntermediateExpanded(false);
+    }
+  }, [turn.status]);
+
+  // Find the last agent_message item — that is the final response
+  let lastAgentIdx = -1;
+  for (let i = turn.items.length - 1; i >= 0; i--) {
+    if (turn.items[i].type === 'agent_message') {
+      lastAgentIdx = i;
+      break;
+    }
+  }
+
+  const hasFinalResponse = lastAgentIdx >= 0;
+  // Intermediate = everything before final agent_message (or ALL items if running)
+  const intermediateItems = hasFinalResponse
+    ? turn.items.slice(0, lastAgentIdx)
+    : turn.items;
+
+  // Group intermediate items into segments by agent_message boundaries
+  // Each segment: one agent_message + following tool/non-tool items until next agent_message
+  interface Segment {
+    agentMessage: Item | null;
+    toolItems: Item[];
+    otherItems: Item[];
+  }
+  const segments: Segment[] = [];
+  let currentSeg: Segment | null = null;
+  for (const item of intermediateItems) {
+    if (item.type === 'agent_message') {
+      if (currentSeg) segments.push(currentSeg);
+      currentSeg = { agentMessage: item, toolItems: [], otherItems: [] };
+    } else {
+      if (!currentSeg) currentSeg = { agentMessage: null, toolItems: [], otherItems: [] };
+      if (isToolItem(item)) currentSeg.toolItems.push(item);
+      else currentSeg.otherItems.push(item);
+    }
+  }
+  if (currentSeg) segments.push(currentSeg);
+
+  const intermediateCount = intermediateItems.length;
+
+  return (
+    <div className="turn-group">
+      {/* User prompt — always visible at top */}
+      <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>
+
+      {/* Level 1: Intermediate steps — collapsible (auto-expand while running, auto-collapse on complete) */}
+      {intermediateCount > 0 && (
+        <div className="tool-calls">
+          <div className="tool-calls-header" onClick={() => setIntermediateExpanded((e) => !e)}>
+            <span className="tool-calls-icon">
+              <Layers size={12} />
+            </span>
+            <span className="tool-calls-summary">
+              {intermediateCount} intermediate step{intermediateCount > 1 ? 's' : ''}
+            </span>
+            <ChevronRight
+              size={14}
+              className="tool-calls-chevron"
+              style={{ transform: intermediateExpanded ? 'rotate(90deg)' : 'none' }}
+            />
+          </div>
+          {intermediateExpanded && (
+            <div className="tool-calls-body">
+              {segments.map((seg, i) => (
+                <div key={i} className="intermediate-segment">
+                  {/* Agent message for this segment */}
+                  {seg.agentMessage && <MemoItemCard item={seg.agentMessage} />}
+                  {/* Non-tool items inline (reasoning, etc.) */}
+                  {seg.otherItems.map((item) => (
+                    <MemoItemCard key={item.id} item={item} />
+                  ))}
+                  {/* Level 2: Tool calls for this segment — collapsed by default */}
+                  {seg.toolItems.length > 0 && <CollapsibleToolCalls items={seg.toolItems} />}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Final agent message — always visible */}
+      {hasFinalResponse && (
+        <MemoItemCard key={turn.items[lastAgentIdx].id} item={turn.items[lastAgentIdx]} />
+      )}
+
+      {/* Items after final agent message (rare — errors, etc.) */}
+      {hasFinalResponse && turn.items.slice(lastAgentIdx + 1).map((item) => (
+        <MemoItemCard key={item.id} item={item} />
+      ))}
+
+      {/* Pending state (no items at all) */}
+      {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>
+      )}
+
+      {/* Turn error (if any) */}
+      {turn.error && (
+        <div className="render-content">
+          <pre className="cmd-output" style={{ color: 'var(--red)' }}><code>{turn.error}</code></pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const TurnContent = memo(TurnContentBase);
+export default TurnContent;

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

@@ -0,0 +1,350 @@
+import { useState, useRef, useEffect } from 'react';
+import { useStore } from '../store/store.ts';
+import { statusToDot, runtimeIcon } from '../types/index.ts';
+import type { Session, Workspace } from '../types/index.ts';
+import StatusDot from './StatusDot.tsx';
+import RuntimeIcon from './RuntimeIcon.tsx';
+import { Plus, ChevronDown, Folder, FolderPlus, Trash2, Edit3, CheckCircle2, RotateCcw } from 'lucide-react';
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  type: 'workspace' | 'session';
+  path?: string;
+  sessionId?: string;
+  sessionTitle?: string | null;
+  sessionLifecycle?: string;
+}
+
+interface WorkspaceGroup {
+  path: string;
+  label: string;
+  sessions: Session[];
+  workspace: Workspace | null;
+}
+
+/** Build workspace groups from active workspaces + session cwd values.
+ *  Deleted workspace paths are excluded from implicit groups. */
+function buildGroups(workspaces: Workspace[], sessions: Session[]): WorkspaceGroup[] {
+  const sessionByCwd = new Map<string, Session[]>();
+
+  for (const s of sessions) {
+    const key = s.cwd || '(no directory)';
+    const list = sessionByCwd.get(key) ?? [];
+    list.push(s);
+    sessionByCwd.set(key, list);
+  }
+
+  const seenPaths = new Set<string>();
+  const deletedPaths = new Set(workspaces.filter((w) => w.deleted === 1).map((w) => w.path));
+  const groups: WorkspaceGroup[] = [];
+
+  // Active explicit workspaces first (deleted = 0)
+  for (const ws of workspaces) {
+    if (ws.deleted === 1) {
+      seenPaths.add(ws.path);
+      continue;
+    }
+    seenPaths.add(ws.path);
+    groups.push({
+      path: ws.path,
+      label: ws.label || ws.path.split('/').pop() || ws.path,
+      sessions: sessionByCwd.get(ws.path) ?? [],
+      workspace: ws,
+    });
+  }
+
+  // Implicit groups — session cwd values not in any workspace (active or deleted)
+  for (const [path, sess] of sessionByCwd) {
+    if (seenPaths.has(path) || deletedPaths.has(path)) continue;
+    groups.push({
+      path,
+      label: path === '(no directory)' ? 'Other' : path.split('/').pop() || path,
+      sessions: sess,
+      workspace: null,
+    });
+  }
+
+  return groups;
+}
+
+export default function WorkspaceSidebar() {
+  const { sessions, workspaces, activeSessionId, selectSession, deleteSession, removeWorkspace, createSessionInWorkspace, pickAndAddWorkspace, renameSession, markFinished, reopenSession } = useStore();
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [subCollapsed, setSubCollapsed] = useState<Set<string>>(new Set());
+  const [ctxMenu, setCtxMenu] = useState<ContextMenuState | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const ctxRef = useRef<HTMLDivElement>(null);
+  const renameRef = useRef<HTMLInputElement>(null);
+
+  function toggleSection(path: string) {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }
+
+  function toggleSubGroup(key: string) {
+    setSubCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+
+  // Close context menu on outside click or Escape
+  useEffect(() => {
+    if (!ctxMenu) return;
+    function handleClick(e: MouseEvent) {
+      if (ctxRef.current && !ctxRef.current.contains(e.target as Node)) {
+        setCtxMenu(null);
+      }
+    }
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') setCtxMenu(null);
+    }
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [ctxMenu]);
+
+  // Focus rename input when it appears
+  useEffect(() => {
+    if (renamingId && renameRef.current) {
+      renameRef.current.focus();
+      renameRef.current.select();
+    }
+  }, [renamingId]);
+
+  function startRename(id: string, currentTitle: string) {
+    setRenamingId(id);
+    setRenameValue(currentTitle || id.slice(0, 8));
+  }
+
+  function confirmRename() {
+    if (renamingId) {
+      renameSession(renamingId, renameValue);
+    }
+    setRenamingId(null);
+  }
+
+  function cancelRename() {
+    setRenamingId(null);
+    setRenameValue('');
+  }
+
+  const groups = buildGroups(workspaces, sessions);
+
+  function renderSession(s: Session) {
+    const isActive = activeSessionId === s.id;
+    const isFinished = s.lifecycle === 'finished';
+    const dot = statusToDot(s.status, s.is_running === 1, s.has_unreviewed === 1, s.lifecycle);
+    const ri = runtimeIcon(s.runtime_type);
+    return (
+      <div
+        key={s.id}
+        className={`tree-item ${isActive ? 'active' : ''} ${isFinished ? 'tree-item-finished' : ''}`}
+        onClick={() => selectSession(s.id)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setCtxMenu({ x: e.clientX, y: e.clientY, type: 'session', sessionId: s.id, sessionTitle: s.title, sessionLifecycle: s.lifecycle });
+        }}
+      >
+        <RuntimeIcon iconClass={ri.iconClass} iconText={ri.iconText} size={16} />
+        {renamingId === s.id ? (
+          <input
+            ref={renameRef}
+            className="tree-rename-input"
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') confirmRename();
+              if (e.key === 'Escape') cancelRename();
+            }}
+            onBlur={confirmRename}
+          />
+        ) : (
+          <span className="tree-label">{s.title || s.id.slice(0, 8)}</span>
+        )}
+        {dot && <StatusDot status={dot} />}
+      </div>
+    );
+  }
+
+  return (
+    <div className="ide-sidebar">
+      <div className="sidebar-header">
+        <span className="sidebar-header-title">Workspaces</span>
+        <button className="sidebar-add" title="Add workspace" onClick={() => pickAndAddWorkspace()}>
+          <Plus size={14} />
+        </button>
+      </div>
+
+      {groups.length === 0 ? (
+        <div className="empty-state" style={{ padding: '16px' }}>
+          No workspaces yet. Click + to add one.
+        </div>
+      ) : (
+        groups.map((group) => {
+          const isCollapsed = collapsed.has(group.path);
+          const workingSessions = group.sessions.filter((s) => s.lifecycle !== 'finished');
+          const finishedSessions = group.sessions.filter((s) => s.lifecycle === 'finished');
+          const finishedKey = `${group.path}:finished`;
+          const finishedCollapsed = subCollapsed.has(finishedKey);
+
+          return (
+            <div key={group.path} className={`tree-section ${isCollapsed ? 'collapsed' : ''}`}>
+              <div
+                className="tree-section-header"
+                onClick={() => toggleSection(group.path)}
+                onContextMenu={(e) => {
+                  e.preventDefault();
+                  setCtxMenu({ x: e.clientX, y: e.clientY, type: 'workspace', path: group.path });
+                }}
+              >
+                <ChevronDown size={9} className="tree-chevron" />
+                <Folder size={14} />
+                <span className="tree-section-label">{group.label}</span>
+                <button
+                  className="tree-section-add"
+                  title="New session in this workspace"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    createSessionInWorkspace(group.path);
+                  }}
+                >
+                  <Plus size={11} />
+                </button>
+                <span className="tree-count">{group.sessions.length}</span>
+              </div>
+              <div className="tree-children">
+                {/* Working sessions — rendered directly, no sub-group header */}
+                {workingSessions.length === 0 && finishedSessions.length === 0 ? (
+                  <div className="tree-empty">No sessions</div>
+                ) : (
+                  workingSessions.map(renderSession)
+                )}
+
+                {/* Finished sub-group — only show if there are finished sessions */}
+                {finishedSessions.length > 0 && (
+                  <div className={`tree-subgroup ${finishedCollapsed ? 'collapsed' : ''}`}>
+                    <div className="tree-subgroup-header" onClick={() => toggleSubGroup(finishedKey)}>
+                      <ChevronDown size={8} className="tree-chevron" />
+                      <span className="tree-subgroup-label">Finished</span>
+                      <span className="tree-subgroup-count">{finishedSessions.length}</span>
+                    </div>
+                    {!finishedCollapsed && (
+                      <div className="tree-subgroup-items">
+                        {finishedSessions.map(renderSession)}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })
+      )}
+
+      <div className="sidebar-footer" onClick={() => pickAndAddWorkspace()}>
+        <FolderPlus size={14} />
+        <span>Add workspace</span>
+      </div>
+
+      {ctxMenu && (
+        <div
+          ref={ctxRef}
+          className="ctx-menu"
+          style={{ position: 'fixed', left: ctxMenu.x, top: ctxMenu.y, zIndex: 500 }}
+        >
+          {ctxMenu.type === 'workspace' && (
+            <>
+              <div
+                className="ctx-menu-item"
+                onClick={() => {
+                  createSessionInWorkspace(ctxMenu.path!);
+                  setCtxMenu(null);
+                }}
+              >
+                <Plus size={12} /> New Session
+              </div>
+              <div
+                className="ctx-menu-item ctx-danger"
+                onClick={() => {
+                  removeWorkspace(ctxMenu.path!);
+                  setCtxMenu(null);
+                }}
+              >
+                <Trash2 size={12} /> Hide Workspace
+              </div>
+            </>
+          )}
+          {ctxMenu.type === 'session' && (
+            <>
+              {ctxMenu.sessionLifecycle !== 'finished' ? (
+                <>
+                  <div
+                    className="ctx-menu-item"
+                    onClick={() => {
+                      startRename(ctxMenu.sessionId!, ctxMenu.sessionTitle ?? '');
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <Edit3 size={12} /> Rename
+                  </div>
+                  <div
+                    className="ctx-menu-item"
+                    onClick={() => {
+                      markFinished(ctxMenu.sessionId!);
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <CheckCircle2 size={12} /> Mark as Finished
+                  </div>
+                  <div
+                    className="ctx-menu-item ctx-danger"
+                    onClick={() => {
+                      deleteSession(ctxMenu.sessionId!);
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <Trash2 size={12} /> Delete Session
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div
+                    className="ctx-menu-item"
+                    onClick={() => {
+                      reopenSession(ctxMenu.sessionId!);
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <RotateCcw size={12} /> Reopen
+                  </div>
+                  <div
+                    className="ctx-menu-item ctx-danger"
+                    onClick={() => {
+                      deleteSession(ctxMenu.sessionId!);
+                      setCtxMenu(null);
+                    }}
+                  >
+                    <Trash2 size={12} /> Delete Session
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}