repoburg 1.3.186 → 1.3.188

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

@@ -1,14 +1,30 @@
 import { useStore } from '../store/store.ts';
 import TurnContent from './TurnContent.tsx';
 import type { Item } from '../types/index.ts';
-import { memo } from 'react';
+import { memo, useEffect, useRef } from 'react';
 
 function RenderAreaBase() {
-  const { activeSessionId, sessionDetails, activeTurnIndex, activeRightTab, changesScope, submittingPrompt } = useStore();
+  const { activeSessionId, sessionDetails, activeTurnIndex, activeRightTab, changesScope, submittingPrompt, loading, selectedChangePath, setSelectedChangePath } = useStore();
 
   const detail = activeSessionId ? sessionDetails[activeSessionId] : null;
   const turns = detail?.turns ?? [];
-  const turn = turns[activeTurnIndex];
+  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') {
@@ -20,7 +36,6 @@ function RenderAreaBase() {
       );
     }
 
-    // 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) => {
@@ -33,16 +48,11 @@ function RenderAreaBase() {
 
     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 });
-    }
+    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) {
@@ -56,7 +66,7 @@ function RenderAreaBase() {
     }
 
     return (
-      <div className="render-scroll">
+      <div className="render-scroll" ref={renderScrollRef}>
         <div className="render-content">
           <div style={{ marginBottom: '20px' }}>
             <span style={{ fontSize: '16px', fontWeight: 600, color: 'var(--text)' }}>
@@ -72,10 +82,11 @@ function RenderAreaBase() {
             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">
+                <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>}
@@ -96,12 +107,35 @@ function RenderAreaBase() {
     );
   }
 
-  // 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">
+  // 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">
@@ -115,40 +149,19 @@ function RenderAreaBase() {
             </div>
           </div>
         </div>
-      );
-    }
+      )}
 
-    return (
-      <div className="render-scroll">
+      {turns.length === 0 && !submittingPrompt && (
         <div className="empty-state">
-          {turns.length === 0 ? 'No turns yet. Send a message below to start.' : 'Select a turn to view content'}
+          No turns yet. Send a message below to start.
         </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} />
+      {turns.map((turn, idx) => (
+        <div key={turn.id} id={`turn-${idx}`} className="turn-block">
+          <TurnContent turn={turn} />
+        </div>
+      ))}
     </div>
   );
 }

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

@@ -1,6 +1,7 @@
 import { useStore } from '../store/store.ts';
-import { statusToDot } from '../types/index.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() {
@@ -11,16 +12,18 @@ export default function SessionTabs() {
       {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 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)}
-            {s.is_running === 1 && <StatusDot status={dot} />}
+            {dot && <StatusDot status={dot} />}
             <span
               className="ide-tab-close"
               onClick={(e) => {

package/agent-pane/frontend/src/components/StatusBar.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';
 import { Zap, Command } from 'lucide-react';
 
@@ -24,9 +24,17 @@ export default function StatusBar() {
   }
 
   const isRunning = session.is_running === 1;
-  const dot = statusToDot(session.status, isRunning);
-  const label = statusToLabel(session.status, isRunning);
-  const turnCount = detail?.turns.length ?? 0;
+  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">
@@ -52,7 +60,7 @@ export default function StatusBar() {
         <StatusDot status={dot} /> {label}
       </div>
       <div className="sb-divider">|</div>
-      <div className="sb-item">{turnCount} turn{turnCount !== 1 ? 's' : ''}</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/Toast.tsx

@@ -1,5 +1,6 @@
+import { useEffect, useRef } from 'react';
 import { useStore } from '../store/store.ts';
-import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+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> = {
@@ -9,26 +10,71 @@ const ICONS: Record<ToastType['type'], typeof CheckCircle> = {
   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);
-  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>
-        );
-      })}
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} />
+      ))}
     </div>
   );
 }

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

@@ -1,7 +1,9 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
-import { memo } from 'react';
+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 });
 
@@ -157,15 +159,65 @@ function ItemCard({ item }: { item: Item }) {
 }
 
 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 */}
+      {/* 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>
@@ -174,19 +226,52 @@ function TurnContentBase({ turn }: Props) {
         <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>
+      {/* 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>
       )}
 
-      {/* Pending state (no items yet) */}
+      {/* 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' }}>
@@ -194,6 +279,13 @@ function TurnContentBase({ turn }: Props) {
           </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>
   );
 }