feat(tui): redesign Activity and Live panels in ActivityVisualizer

[JeremyDev87]

Overview

The current ActivityVisualizer component contains two sub-panels — Activity (left, 60%) and Live (right, 40%) — that overlap in purpose and expose too little meaningful information. This issue tracks the redesign of both panels.

Current Problems

Panel	Issue
Activity	Shows a bar chart of tool call frequency — tool names are truncated and the bars add little value
Live	Shows Mode + recent unique tool calls with age indicators — duplicates Activity's intent, agentId and toolName display as the same string when agent is unknown

---

New Design

Activity Panel (left) — Agent/Skill Tree

Replace renderBarChart with renderAgentTree.

Instead of tool call frequency, show the hierarchy of agents and skills spawned by the main agent, using edges for parent-child relationships and activeSkills for active skill names.

Example output:

📊 Activity
● main-agent         [running]
  ├ ◉ solution-architect
  ├ ◉ brainstorming     (skill)
  └ ○ sub-agent-2       [done]

Rendering rules:

• Build tree from edges (parent → child), rooted at the primary agent
• Status icons: ● running · ◉ active skill · ○ done/idle
• Skills from activeSkills are shown as leaf nodes with (skill) label
• Truncate to available width; prioritize top-level nodes when height is constrained

---

Live Panel (right) — Active Agent Status Card

Replace renderLiveContext with renderAgentStatusCard.

Show a status card for the currently focused agent with mode, name, objective, and active skills.

Example output:

💬 Live
⟫ Mode: PLAN
🤖 solution-architect
   ● running
─────────────────────
📎 Design Activity/Live
   panels for TUI HUD
─────────────────────
⚙ brainstorming

Rendering rules:

• Header: current mode (state.currentMode)
• Agent: focusedAgent.name + status label
• Separator line (fill width with ─)
• Objective: first item from objectives[], word-wrapped to width
• Separator line
• Active skills: activeSkills[] each prefixed with ⚙, up to remaining height

---

Implementation Plan

1. Update ActivityVisualizerProps

File: apps/mcp-server/src/tui/components/ActivityVisualizer.tsx

Remove toolCalls. Add:

interface ActivityVisualizerProps {
  currentMode: Mode | null;
  focusedAgent: DashboardNode | null;   // for Live panel
  agents: Map<string, DashboardNode>;   // for Activity panel
  edges: EdgeRecord[];                  // for Activity panel (parent-child)
  activeSkills: string[];               // shared by both panels
  objectives: string[];                 // for Live panel
  width: number;
  height: number;
}

2. Replace pure render functions

File: apps/mcp-server/src/tui/components/activity-visualizer.pure.ts

Remove	Add
aggregateForBarChart	renderAgentTree(agents, edges, activeSkills, width, height)
renderBarChart	(replaced by above)
renderLiveContext	renderAgentStatusCard(focusedAgent, currentMode, objectives, activeSkills, width, height)
BarChartItem interface	AgentTreeNode interface (internal helper)
BAR_FIXED_OVERHEAD, TOOL_NAME_WIDTH constants	New layout constants as needed

3. Update dashboard-app.tsx

File: apps/mcp-server/src/tui/dashboard-app.tsx

<ActivityVisualizer
  currentMode={state.currentMode}
  focusedAgent={focusedAgent}
  agents={state.agents}
  edges={state.edges}
  activeSkills={state.activeSkills}
  objectives={state.objectives}
  width={grid.monitorPanel.width}
  height={grid.monitorPanel.height}
/>

Remove toolCalls prop.

4. Update tests

Files:

• apps/mcp-server/src/tui/components/ActivityVisualizer.spec.tsx
• apps/mcp-server/src/tui/components/activity-visualizer.pure.spec.ts

Replace existing bar chart / live context tests with:

• renderAgentTree: tree structure, icon mapping, truncation, empty state
• renderAgentStatusCard: mode line, agent name, objective word-wrap, skill list, empty state

---

Acceptance Criteria

• Activity panel displays agent/skill tree rooted at primary agent
• Activity panel correctly distinguishes running / done / skill nodes with icons
• Live panel displays focused agent name and status
• Live panel displays first objective, word-wrapped to panel width
• Live panel lists active skills in remaining space
• toolCalls prop removed from ActivityVisualizer
• All existing tests updated; no new type errors (tsc --noEmit)
• Spec coverage maintained for both pure functions

---

Files to Change

apps/mcp-server/src/tui/components/ActivityVisualizer.tsx
apps/mcp-server/src/tui/components/activity-visualizer.pure.ts
apps/mcp-server/src/tui/components/ActivityVisualizer.spec.tsx
apps/mcp-server/src/tui/components/activity-visualizer.pure.spec.ts
apps/mcp-server/src/tui/dashboard-app.tsx

Related

• FocusedAgentPanel already shows detailed agent info for the right column — the new Live panel is a lightweight complement, not a replacement.
• FlowMap uses the same agents + edges data for the graph view above ActivityVisualizer.