feat: move run timeline from side panel into inline chat turn activity panels

Replace the separate RunTimeline in the ActivityPanel with a generalized
TurnActivityPanel that renders inline in the chat pane between user
messages and assistant responses.

The new component:
- Shows all turn activities (thinking steps, tool calls, approvals,
  handoffs, run status) in a single collapsible panel
- Merges chat thinking messages with run timeline events into a
  chronological activity stream
- Auto-expands when a turn starts, auto-collapses on completion
- Displays a compact summary header (elapsed time, tool call count,
  handoff count, etc.) when collapsed
- Includes post-run git change summary with discard/commit actions
- Uses subtle entrance animations for rows

Removed components:
- ThinkingProcess.tsx (subsumed by TurnActivityPanel)
- RunTimeline.tsx (no longer needed as a standalone component)

The ActivityPanel retains its agents, session usage, and turn events
(diagnostics/hooks) sections.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-04-07 09:47:19 +02:00
co-authored by Copilot
parent a3e0bd9244
commit 3a71baf104
8 changed files with 468 additions and 615 deletions
+17 -5
View File
@@ -639,17 +639,28 @@ body {
animation: update-banner-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ── Thinking process section ────────────────────────────────── */
/* ── Turn activity panel ─────────────────────────────────────── */
@keyframes thinking-process-in {
@keyframes turn-activity-in {
from {
opacity: 0;
transform: translateY(-4px);
}
}
.thinking-process-enter {
animation: thinking-process-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
.turn-activity-enter {
animation: turn-activity-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes turn-activity-row-in {
from {
opacity: 0;
transform: translateX(-6px);
}
}
.turn-activity-row {
animation: turn-activity-row-in 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* ── Respect reduced motion ──────────────────────────────────── */
@@ -665,7 +676,8 @@ body {
.session-item-enter,
.banner-slide-enter,
.update-banner-enter,
.thinking-process-enter {
.turn-activity-enter,
.turn-activity-row {
animation: none;
}
}