[AGENT-2140] Live instance viewer — real-time action feed via Socket.IO, pause/stop/resume, token meter

[dnviti]

Code: AGENT-2140
Priority: MEDIUM
Section: Orchestration — Agent Orchestration Gateway (Phase 4: GUI)
Dependencies: AGENT-2127

Description

Create the live instance viewer that shows real-time execution of a running agent instance. The viewer connects via Socket.IO to the /agents namespace and displays a live action feed (like a terminal/log view), current LLM reasoning status, token usage meter, active sessions, and control buttons (pause, resume, stop). Approval requests are shown inline with approve/deny buttons.

Technical Details

Client — Live Instance Viewer (client/src/components/Agents/LiveInstanceViewer.tsx)

• Full-height panel (rendered inside agent detail view or as standalone dialog)
• Props: { instanceId, onClose }

Header:

• Instance ID, task description (truncated), status chip (live-updating)
• Control buttons: Pause (if RUNNING), Resume (if PAUSED), Stop (with confirmation)
• Duration counter (live)

Token Meter:

• Horizontal progress bar showing tokens used / budget
• Color: green (<60%), yellow (60-80%), red (>80%)
• Labels: "12,450 / 50,000 tokens (24.9%)"

Action Feed (main area):

• Scrollable, auto-scroll-to-bottom (with manual scroll lock like chat UIs)
• Each entry:
  • Timestamp (HH:mm:ss)
  • Icon by action type (terminal icon for SSH, database icon for DB, folder icon for SFTP, brain icon for LLM thinking)
  • Action summary: "SSH → prod-server-01: df -h" or "DB → analytics-db: SELECT count(*) FROM users"
  • Status indicator: spinner (running), green check (success), red X (failed), yellow lock (denied)
  • Expandable: full input/output
• LLM thinking indicator: animated "thinking..." entry while waiting for LLM response
• Approval requests: inline card with action description, reason, approve/deny buttons

Active Sessions Panel (collapsible sidebar):

• List of currently open sessions (SSH, DB)
• For each: connection name, type, duration, activity indicator

Client — Socket.IO Integration

• Connect to /agents namespace with JWT auth
• Subscribe to events for specific instanceId:
  • instance:action — new action in feed
  • instance:status — status change (RUNNING→PAUSED, etc.)
  • instance:token_update — token usage update
  • instance:approval_required — new approval request
• Reconnection handling with missed event catch-up

Client — API

• Add to agent.api.ts:
  • getInstanceDetails(instanceId) → full instance with recent actions
  • pauseInstance(instanceId) → void
  • resumeInstance(instanceId) → void
  • stopInstance(instanceId, reason?) → void
  • approveAction(requestId, note?) → void
  • denyAction(requestId, note?) → void

Client — Store

• Add to agentStore.ts: liveInstance state, Socket.IO connection management, action feed buffer

Files Involved

• CREATE client/src/components/Agents/LiveInstanceViewer.tsx — Real-time execution viewer
• CREATE client/src/components/Agents/ActionFeed.tsx — Scrollable action feed component
• CREATE client/src/components/Agents/TokenMeter.tsx — Token budget progress bar
• CREATE client/src/components/Agents/ApprovalCard.tsx — Inline approval request card
• MODIFY client/src/api/agent.api.ts — Add instance control and approval endpoints
• MODIFY client/src/store/agentStore.ts — Add live instance state management
• MODIFY client/src/components/Agents/AgentDetailView.tsx — Open live viewer for running instances

Reference: Agent Orchestration Gateway — Phase 4.4