repoburg 1.3.186 → 1.3.188

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

@@ -1,60 +1,350 @@
+import { useState, useRef, useEffect } from 'react';
 import { useStore } from '../store/store.ts';
-import { statusToDot } from '../types/index.ts';
+import { statusToDot, runtimeIcon } from '../types/index.ts';
+import type { Session, Workspace } from '../types/index.ts';
 import StatusDot from './StatusDot.tsx';
-import { Plus, Trash2 } from 'lucide-react';
+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, activeSessionId, selectSession, setShowNewSessionDialog, deleteSession } = useStore();
+  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">Sessions</span>
-        <button className="sidebar-add" title="New Session" onClick={() => setShowNewSessionDialog(true)}>
+        <span className="sidebar-header-title">Workspaces</span>
+        <button className="sidebar-add" title="Add workspace" onClick={() => pickAndAddWorkspace()}>
           <Plus size={14} />
         </button>
       </div>
 
-      {sessions.length === 0 ? (
+      {groups.length === 0 ? (
         <div className="empty-state" style={{ padding: '16px' }}>
-          No sessions yet. Click + to create one.
+          No workspaces yet. Click + to add one.
         </div>
       ) : (
-        <div className="tree-children">
-          {sessions.map((s) => {
-            const isActive = activeSessionId === s.id;
-            const dot = statusToDot(s.status, s.is_running === 1);
-            return (
+        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
-                key={s.id}
-                className={`tree-item ${isActive ? 'active' : ''}`}
-                onClick={() => selectSession(s.id)}
+                className="tree-section-header"
+                onClick={() => toggleSection(group.path)}
+                onContextMenu={(e) => {
+                  e.preventDefault();
+                  setCtxMenu({ x: e.clientX, y: e.clientY, type: 'workspace', path: group.path });
+                }}
               >
-                <span className="tree-label">{s.title || s.id.slice(0, 8)}</span>
-                <StatusDot status={dot} />
-                {isActive && (
-                  <span
-                    className="ide-tab-close"
-                    title="Delete session"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      deleteSession(s.id);
-                    }}
-                  >
-                    <Trash2 size={11} />
-                  </span>
+                <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>
+          );
+        })
       )}
 
-      <div className="sidebar-footer">
-        <span style={{ color: 'var(--text-muted)', fontSize: '11px' }}>
-          {sessions.length} session{sessions.length !== 1 ? 's' : ''}
-        </span>
+      <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>
   );
 }

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

@@ -1,7 +1,7 @@
 import { useStore } from '../../store/store.ts';
 
 export default function ChangesPanel() {
-  const { activeSessionId, sessionDetails, changesScope, setChangesScope, activeTurnIndex } = useStore();
+  const { activeSessionId, sessionDetails, changesScope, setChangesScope, activeTurnIndex, setSelectedChangePath } = useStore();
   const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
   const turns = detail?.turns ?? [];
 
@@ -61,7 +61,11 @@ export default function ChangesPanel() {
             const dir = entry.path.replace('/' + fileName, '');
 
             return (
-              <div key={entry.path} className="file-change">
+              <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>}

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

@@ -1,5 +1,5 @@
 import { useStore } from '../../store/store.ts';
-import { statusToDot, statusToLabel } from '../../types/index.ts';
+import { statusToDot, statusToLabel, formatDuration } from '../../types/index.ts';
 import StatusDot from '../StatusDot.tsx';
 
 export default function MetricsPanel() {
@@ -31,14 +31,27 @@ export default function MetricsPanel() {
 
   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>
-        {session.cwd && <div className="metric-row"><span className="metric-label">CWD</span><span className="metric-val" style={{ fontSize: '11px' }}>{session.cwd}</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">

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

@@ -1,5 +1,5 @@
 import { useStore } from '../../store/store.ts';
-import { Wrench, User } from 'lucide-react';
+import { User } from 'lucide-react';
 
 export default function TurnsPanel() {
   const { activeSessionId, sessionDetails, activeTurnIndex, setActiveTurnIndex } = useStore();
@@ -10,72 +10,33 @@ export default function TurnsPanel() {
     return <div className="empty-state">No turns yet</div>;
   }
 
-  // Build display items: user prompt + grouped tool items + agent response
-  type DisplayItem = { kind: 'user'; idx: number; label: string } | { kind: 'agent'; idx: number; label: string } | { kind: 'tools'; idx: number; count: number };
-
-  const items: DisplayItem[] = [];
-
-  turns.forEach((turn, idx) => {
-    // User prompt is always first
-    const promptPreview = turn.user_prompt.length > 50
-      ? turn.user_prompt.slice(0, 50) + '…'
-      : turn.user_prompt;
-    items.push({ kind: 'user', idx, label: promptPreview });
-
-    // Count tool-type items
-    const toolItems = turn.items.filter(
-      (i) => i.type === 'command_execution' || i.type === 'file_change' || i.type === 'mcp_tool_call' || i.type === 'web_search',
-    );
-    if (toolItems.length > 0) {
-      items.push({ kind: 'tools', idx, count: toolItems.length });
-    }
-
-    // Agent response
-    if (turn.agent_response || turn.status === 'completed') {
-      const label = turn.agent_response
-        ? (turn.agent_response.length > 50 ? turn.agent_response.slice(0, 50) + '…' : turn.agent_response)
-        : 'Agent';
-      items.push({ kind: 'agent', idx, label });
-    } else if (turn.status === 'running' || turn.status === 'pending') {
-      items.push({ kind: 'agent', idx, label: 'Agent thinking…' });
-    } else if (turn.status === 'failed') {
-      items.push({ kind: 'agent', idx, label: 'Failed' });
-    } else if (turn.status === 'aborted') {
-      items.push({ kind: 'agent', idx, label: 'Aborted' });
-    }
-  });
+  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>
-      {items.map((item, i) => {
-        const isActive = item.idx === activeTurnIndex;
-        if (item.kind === 'tools') {
-          return (
-            <div
-              key={`tg-${i}`}
-              className={`turn-item ${isActive ? 'active' : ''}`}
-              onClick={() => setActiveTurnIndex(item.idx)}
-            >
-              <span className="turn-item-icon" style={{ background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-                <Wrench size={12} style={{ color: 'var(--text-3)' }} />
-              </span>
-              <span className="turn-item-label">{item.count} tool call{item.count > 1 ? 's' : ''}</span>
-            </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;
 
-        const isUser = item.kind === 'user';
         return (
           <div
-            key={`t-${i}`}
+            key={turn.id}
             className={`turn-item ${isActive ? 'active' : ''}`}
-            onClick={() => setActiveTurnIndex(item.idx)}
+            onClick={() => handleClick(idx)}
           >
-            <span className="turn-item-icon" style={isUser ? { background: 'var(--amber)', color: '#fff' } : { background: 'var(--surface-2)', color: 'var(--text-3)' }}>
-              {isUser ? <User size={12} /> : 'CX'}
+            <span className="turn-item-icon" style={{ background: 'var(--amber)', color: '#fff' }}>
+              <User size={12} />
             </span>
-            <span className="turn-item-label">{item.label}</span>
+            <span className="turn-item-label">{preview}</span>
           </div>
         );
       })}