feat(cli): TUI complete overhaul — components, sidebar, search, branding #157

2026-03-15T22:17:10Z

jason.woltje commented

2026-03-15 22:17:10 +00:00

Complete TUI rewrite with componentized architecture:

Components: TopBar (branded mosaic icon), BottomBar (git/token/model info), InputBar, MessageList, Sidebar, SearchBar
Hooks: useSocket (typed Socket.IO), useConversations, useSearch, useViewport, useAppMode, useGitInfo
Features: conversation sidebar (Ctrl+L), message search with highlighting (Ctrl+K), scrollable history (PgUp/PgDn), keybinding system, thinking level cycling (Ctrl+T)
Gateway: token usage, model info, and thinking level events wired through chat gateway
Types: typed Socket.IO event maps in @mosaic/types/chat/events
Review fixes: wired initialModel/initialProvider through useSocket, added error handling on floating promises, added provider/modelId to ChatMessagePayload type

Complete TUI rewrite with componentized architecture: - **Components**: TopBar (branded mosaic icon), BottomBar (git/token/model info), InputBar, MessageList, Sidebar, SearchBar - **Hooks**: useSocket (typed Socket.IO), useConversations, useSearch, useViewport, useAppMode, useGitInfo - **Features**: conversation sidebar (Ctrl+L), message search with highlighting (Ctrl+K), scrollable history (PgUp/PgDn), keybinding system, thinking level cycling (Ctrl+T) - **Gateway**: token usage, model info, and thinking level events wired through chat gateway - **Types**: typed Socket.IO event maps in @mosaic/types/chat/events - **Review fixes**: wired initialModel/initialProvider through useSocket, added error handling on floating promises, added provider/modelId to ChatMessagePayload type

jason.woltje added 26 commits 2026-03-15 22:17:11 +00:00

feat(cli): TUI component architecture — status bars, message list, input bar 9ae1bac614

- 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)

chore: update TUI task tracker — Wave 1 complete 3e7e860984

feat(cli): match TUI footer to reference design e42d6eadff

- Remove borders from input bar — clean '❯ message mosaic…' prompt
- Two-line footer without borders:
  - Line 1: compact cwd (branch) | Gateway: Connected/Disconnected
  - Line 2: token stats (^in v_out R_cache W_cache $cost ctx%) | (provider) model
- Extend TokenUsage with cacheRead, cacheWrite, cost, contextPercent, contextWindow
- Add providerName to socket hook return
- Reorder layout: top bar → messages → input → footer

fix(cli): ensure footer line 2 always renders e6708c18ed

- Show '^0  v0  $0.000' instead of '—' when no token data yet
- Always show model slot ('awaiting model' as placeholder)
- Add minHeight={1} to prevent line collapse

fix(cli): restore border around input bar d7a03fd68b

feat(cli): simplify top bar — title + host only 16409ff42d

- Show 'Mosaic Stack TUI' on left, gateway host on right
- Remove connection status from top bar (lives in footer)
- Remove model/conversation from top bar (lives in footer)

fix(cli): use ↑↓ arrows for token usage in footer 06887e59c7

feat(gateway,cli,types): wire token usage, model info, and thinking levels f0b31d9983

Gateway:
- Emit session:info on session creation with provider, model, thinking level
- Include SessionUsagePayload in agent:end with token stats, cost, context usage
- Handle set:thinking client event to cycle thinking levels
- Respond with updated session:info after thinking level change

Types (@mosaic/types):
- Add SessionUsagePayload (tokens, cost, context) to AgentEndPayload
- Add SessionInfoPayload (provider, model, thinking level, available levels)
- Add SetThinkingPayload and set:thinking to ClientToServerEvents
- Add session:info to ServerToClientEvents

CLI TUI:
- useSocket now tracks tokenUsage, modelName, providerName, thinkingLevel
- Updates from both session:info and agent:end usage payload
- Ctrl+T cycles thinking level via set:thinking socket event
- Footer shows thinking level next to model (e.g. 'claude-opus-4-6 • medium')
- Token stats populate with real ↑in ↓out Rcache Wcache $cost ctx%

feat(cli): branded top bar with mosaic windmill icon fb40ed0af0

- ASCII art mosaic windmill: 4 colored tiles (blue, purple, teal, amber)
  with pink center, matching the Mosaic Stack brand
- 3-line info block (Claude Code style):
  Line 1: 'Mosaic Stack v0.0.0'
  Line 2: model (context) · thinking · agent name
  Line 3: ● host connection status
- Remove bordered box in favor of open layout with icon

fix(cli): tighten mosaic icon to compact 3×3 grid 6ddf3dfd99

- Use half-block chars (▐█ █▌) for outer tiles to reduce width
- Center pink tile fits snugly between the four corners
- Matches the mosaic windmill proportions from the web UI

feat(cli): full 3×3 mosaic icon with 9 colored tiles c2d573c85f

Brand colors (blue, purple, teal, amber, pink) plus complementary
fills (indigo, sky, rose, green) arranged in a gradient flow:
  blue    indigo  purple
  sky     pink    rose
  amber   green   teal

feat(cli): mosaic icon windmill cross — brand tiles with black gaps 4085338918

blue  ··  purple
··  pink  ··
amber ··  teal

fix(cli): add extra margin between mosaic icon and text 78cbaf869a

fix(cli): preserve two-space gaps in mosaic icon tiles c67ffe3e51

Extract gap string to const to prevent prettier from collapsing
the double-space literals between icon tiles.

fix(cli): add bottom margin after header 4e4058abff

fix(cli): prevent header text artifacts on re-render 2936cef884

Add flexGrow={1} to the text column so it fills the full terminal
width. This ensures Ink clears the entire line when content changes
(e.g. 'awaiting model' → 'llama3.2 (8k)'), preventing leftover
characters from previous renders.

feat(cli): show session/conversation ID in footer 9e6479d7a8

Adds a third line to the footer, right-aligned beneath Gateway status:
'session: a1b2c3d4' (first 8 chars) or 'no session' when not connected.

fix(cli): rearrange footer — gateway top-right, cwd on line 2 3d2ad87ccd

1. (blank) ··· Gateway: Connected
2. ~/path (branch) ··· Session: a1b2c3d4
3. ↑5k ↓72 $0.12 ··· (provider) model • thinking

docs: update TUI task tracker with handoff notes for Wave 2 9628fe5a82

feat(cli): add scrollable message history with PgUp/PgDn (TUI-010) 836652b868

- Create use-viewport hook tracking scroll offset, viewport size, auto-follow
- Update MessageList to slice visible messages and show scroll indicator
- Wire PgUp/PgDn keybindings in app.tsx

feat(cli): conversation sidebar with list/create/switch/delete (TUI-008) b900e0625b

feat(cli): keybinding system — Ctrl+L sidebar, Ctrl+N new, Ctrl+K search (TUI-009) d1ae3ae1a0

feat(cli): message search with highlighting (TUI-011) 9e8f9f4896

docs: mark Wave 2 tasks complete, update file structure and design decisions 9789db5633

fix(cli): restore componentized app.tsx after rebase, accept initialModel/initialProvider props

ci/woodpecker/push/ci Pipeline was successful

Details

4259829d65

fix(cli): wire initialModel/initialProvider through useSocket, add error handling

ci/woodpecker/push/ci Pipeline was successful

Details

28860c9f42

- Pass initialModel/initialProvider from CLI flags into useSocket hook
- Include provider/modelId in socket message emit (restores PR #144 functionality)
- Add provider/modelId optional fields to ChatMessagePayload type
- Add .catch() to floating promises in createConversation/deleteConversation

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>

jason.woltje merged commit 82c10a7b33 into main

2026-03-15 22:17:20 +00:00

jason.woltje referenced this issue from a commit

2026-03-15 22:17:24 +00:00

feat(cli): TUI complete overhaul — components, sidebar, search, branding (#157)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: mosaicstack/stack#157