Terminal Dashboard

One-Liner

The Terminal Dashboard provides a terminal-first workspace with resizable panes, floating panels, and integrated tools for session monitoring and orchestration.

---

Pain Points Solved

Pain Point	Current State	Terminal Dashboard Solution
Scattered terminals	Multiple terminal windows	Unified tmux-style grid layout
No context linkage	Can't associate terminal output with issues	Association highlight provider
Panel overload	Fixed layout wastes space	Floating panels (mutually exclusive)
Missing tools	Switch between apps	Integrated issues, queue, inspector, scheduler
Limited workspace	Can't see code and terminals together	Resizable three-column layout

---

Overview

Location: ccw/frontend/src/pages/TerminalDashboardPage.tsx

Purpose: Terminal-first layout for multi-terminal session management with integrated tools and resizable panels.

Access: Navigation → Terminal Dashboard (/terminal-dashboard)

Layout:

+--------------------------------------------------------------------------+
|  Dashboard Toolbar (panel toggles, layout presets, fullscreen)              |
+--------------------------------------------------------------------------+
|  +----------------+-------------------------------------------+------------+ |
|  | Session        |  Terminal Grid (tmux-style)             | File       | |
|  | Group Tree     |  +----------+  +----------+              | Sidebar    | |
|  | (resizable)    |  | Term 1   |  | Term 2   |              | (resizable)| |
|  |                |  +----------+  +----------+              |            | |
|  |                |  +----------+  +----------+              |            | |
|  |                |  | Term 3   |  | Term 4   |              |            | |
|  |                |  +----------+  +----------+              |            | |
|  +----------------+-------------------------------------------+------------+ |
+--------------------------------------------------------------------------+
|  [Floating Panel: Issues+Queue OR Inspector OR Execution OR Scheduler]   |
+--------------------------------------------------------------------------+

---

Live Demo

TerminalDashboardOverview

加载中...

demo TerminalLayoutPresets #TerminalLayoutPresets.tsx :::

Floating Panels Demo

FloatingPanelsDemo

加载中...

demo ResizablePanesDemo #ResizablePanesDemo.tsx :::

---

Configuration

Feature Flags

Flag	Controls
dashboardQueuePanelEnabled	Queue panel visibility
dashboardInspectorEnabled	Inspector panel visibility
dashboardExecutionMonitorEnabled	Execution Monitor panel visibility

Layout Presets

Preset	Layout
Single	One terminal pane
Split-H	Two panes side by side
Split-V	Two panes stacked vertically
Grid-2x2	Four panes in 2x2 grid

Panel Types

Panel	Content	Position	Feature Flag
Issues+Queue	Combined Issues panel + Queue list column	Left (overlay)	-
Queue	Full queue management panel	Right (overlay)	dashboardQueuePanelEnabled
Inspector	Association chain inspector	Right (overlay)	dashboardInspectorEnabled
Execution Monitor	Real-time execution tracking	Right (overlay)	dashboardExecutionMonitorEnabled
Scheduler	Queue scheduler controls	Right (overlay)	-

---

Accessibility

• Keyboard Navigation:

  • Tab - Navigate through toolbar buttons
  • Enter/Space - Activate toolbar buttons
  • Escape - Close floating panels
  • F11 - Toggle fullscreen mode

• ARIA Attributes:

  • aria-label on toolbar buttons
  • aria-expanded on sidebar toggles
  • aria-hidden on inactive floating panels
  • role="dialog" on floating panels

• Screen Reader Support:

  • Panel state announced when toggled
  • Layout changes announced
  • Focus management when panels open/close

---

Related Links

• Orchestrator - Visual workflow editor
• Sessions - Session management
• Issue Hub - Issues, queue, discovery
• Explorer - File explorer
• Queue - Queue management standalone page