awslabs / awslabs/cli-agent-orchestrator

[Feat] Tabbed terminal agents in web UI for seamless multi-agent navigation

Open
#374 1 comment 0 reactions 1 assignee Claimed by @ThePlenkov View on GitHub
enhancement
Dominant language
Python
Stars
1.3k
Forks
267
Avg merge
1d 23h
Merged PRs (30d)
70

Description

## Overview
Add tabbed navigation for terminal agents in the CAO web UI. Currently, switching between multiple agent terminals requires closing and reopening each terminal session. Implementing a tab-based interface will allow operators to view and switch between multiple terminal agents without interrupting their sessions, significantly improving multi-agent orchestration workflow efficiency.

## User Stories
- As an **orchestration operator**, I want to **switch between multiple agent terminals via tabs** so that **I can monitor and coordinate multiple agents without losing context or having to close/reopen terminals**
- As a **CAO supervisor**, I want to **keep all active agent terminals open and visible** so that **I can quickly handoff tasks and track parallel execution across the fleet**
- As a **developer using CAO**, I want to **reference output from multiple terminal agents simultaneously** so that **I can correlate logs and debug multi-step workflows more efficiently**

## Acceptance Criteria
- Terminal agents are displayed as tabs in a tab bar within the Terminal View
- Clicking a tab switches the active terminal without closing the previous terminal
- Each tab displays a label (agent profile, terminal ID, provider) that remains visible and clickable
- Tab state persists during the session (switching between tabs doesn't terminate the underlying agent)
- Multiple terminals from the same or different sessions can be open in tabs simultaneously
- Visual indicator shows the currently active tab
- Closing a tab terminates that terminal's session (with optional confirmation)
- Each tab maintains its own terminal output state and scroll position
- Reference working example: Kilo Gastown's agent tab interface (one area with multiple agents as tabs)

## Proposed solution
**Frontend Components** (web/src/components/):
- Extend `TerminalView.tsx` to support a tab management system
- Create a new `TerminalTabs.tsx` component that manages an array of open terminals
- Implement tab bar rendering with: active tab highlighting, tab labels (agent_profile | provider | terminal_id), close buttons per tab
- Implement tab switching logic that updates the active terminal ID without closing background terminals

**State Management**:
- Modify the dashboard/home component to maintain an array of `{ terminalId, provider, agentProfile }` open tabs instead of a single `liveTerminal`
- Preserve each tab's WebSocket connection and terminal.js instance independently
- Store tab array in component state (or extend to localStorage for session persistence)

**API / Backend**:
- No backend changes required; existing `/terminals/{id}/ws` WebSocket endpoints already support concurrent connections
- Use existing `TerminalMeta` interface (id, tmux_session, provider, agent_profile)

**Related Code**:
- `web/src/components/TerminalView.tsx`: Current single-terminal renderer (lines 7–68)
- Uses xterm.js + WebSocket to render terminal output
- Manages terminal lifecycle (open, resize, close)
- `web/src/components/DashboardHome.tsx`: Terminal listing and selection (lines 255–440)
- Groups terminals by agent type and session
- Calls `onClose()` to exit terminal view
- `web/src/api.ts`: Terminal metadata and WebSocket API (lines 36–136)
- `TerminalMeta` interface defines terminal properties
- `getTerminalStatus()`, `getTerminalOutput()`, `sendInput()` all available

## Additional context

**Is your feature request related to a problem?**
Yes. When orchestrating multiple agents (e.g., a supervisor coordinating scouts, developers, and reviewers), operators must close one terminal to view another. This breaks context and forces repeated navigation. In contrast, modern agent platforms (e.g., Kilo Gastown) keep all agents visible in tabs, enabling real-time coordination and output comparison.

**Describe alternatives you've considered**
- **Split-view pane layout**: Dividing the terminal area into multiple panes. Tab-based navigation is lighter weight and more scalable for 5+ agents.
- **Separate browser windows**: Users could open multiple windows for each terminal, but this is cumbersome and breaks the unified dashboard paradigm.
- **Terminal multiplexing via tmux directly**: Users can already use tmux window commands, but the web UI doesn't expose this affordance clearly.

**Additional context**
- The CAO project already manages multiple terminals per session via tmux (see `TerminalMeta.tmux_session`, `tmux_window`).
- Web UI currently displays all terminals in a hierarchical list but only opens one in the Terminal View at a time.
- Reference implementation (Kilo Gastown): Agents shown in one area as tabs → easy context switching without terminal closure.
- This feature directly supports multi-agent workflows and the existing supervisor/worker model documented in the CAO architecture.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.