Files

Jason Woltje 79ff308aad feat(cli): TUI component architecture — status bars, message list, input bar

- Split monolithic app.tsx into composable components:
  - TopBar: connection indicator (●/○), gateway URL, model name, conversation ID
  - BottomBar: cwd, git branch, token usage
  - MessageList: timestamped messages, tool call indicators, thinking display
  - InputBar: context-aware prompt with streaming/disconnect states
- Extract socket logic into useSocket hook with typed events
- Extract git/cwd info into useGitInfo hook
- Quiet disconnect: single indicator instead of error flood
- Add @mosaic/types dependency for typed Socket.IO events
- Add PRD and task tracking docs

Tasks: TUI-001 through TUI-007 (Wave 1)

2026-03-15 13:33:37 -05:00

2.8 KiB

Raw Blame History

PRD: TUI Improvements — Phase 7

Branch: feat/p7-tui-improvements Package: packages/cli Status: In Progress

Problem Statement

The current Mosaic CLI TUI (packages/cli/src/tui/app.tsx) is a minimal single-file Ink application with:

Flat message list with no visual hierarchy
No system context visibility (cwd, branch, model, tokens)
Noisy error messages when gateway is disconnected
No conversation management (list, switch, rename, delete)
No multi-panel layout or navigation
No tool call visibility during agent execution
No thinking/reasoning display

The TUI should be the power-user interface to Mosaic — informative, responsive, and visually clean.

Goals

Wave 1 — Status Bar & Polish (MVP)

Provide essential context at a glance and reduce noise.

Top status bar — shows: connection indicator (●/○), gateway URL, agent model name
Bottom status bar — shows: cwd, git branch, token usage (input/output/total)
Better message formatting — distinct visual treatment for user vs assistant messages, timestamps, word wrap
Quiet disconnect — single-line indicator when gateway is offline instead of flooding error messages; auto-reconnect silently
Tool call display — inline indicators when agent uses tools (spinner + tool name during execution, ✓/✗ on completion)
Thinking/reasoning display — collapsible dimmed block for agent:thinking events

Multi-panel layout with keyboard navigation.

Conversation sidebar — list conversations, create new, switch between them
Keybinding system — Ctrl+N (new conversation), Ctrl+L (conversation list toggle), Ctrl+K (command palette concept)
Scrollable message history — viewport with PgUp/PgDn/arrow key scrolling
Message search — find in current conversation

Wave 3 — Advanced Features

Project/mission views — show active projects, missions, tasks
Agent status monitoring — real-time agent state, queue depth
Settings/config screen — view/edit connection settings, model preferences
Multiple agent sessions — split view or tab-based multi-agent

Technical Approach

Ink 5 (React for CLI) — already in deps
Component architecture — break monolithic app.tsx into composable components
Typed Socket.IO events — leverage @mosaic/types ServerToClientEvents / ClientToServerEvents
Local state only (Wave 1) — cwd/branch read from process.cwd() and git at startup
Gateway metadata (future) — extend socket handshake or add REST endpoint for model info, token usage

Non-Goals (for now)

Image rendering in terminal
File editor integration
SSH/remote gateway auto-discovery

2.8 KiB Raw Blame History