Skip to content

feat(tui): add /custom command to customize layout#3509

Merged
Sayt-0 merged 1 commit into
mainfrom
feat/custom-layout-command
Jul 7, 2026
Merged

feat(tui): add /custom command to customize layout#3509
Sayt-0 merged 1 commit into
mainfrom
feat/custom-layout-command

Conversation

@Sayt-0

@Sayt-0 Sayt-0 commented Jul 7, 2026

Copy link
Copy Markdown
Member

Summary

New /custom slash command (also in the command palette as "Customize Layout") opening a dialog to customize the chat layout: sidebar position and which sidebar sections are visible. Every change is previewed live (schematic inside the dialog plus immediate application to the UI behind it) and persisted in the user config.

Dialog preview

╭──────────────────────────────────────────────────────────╮
│                     Customize Layout                     │
│  ──────────────────────────────────────────────────────  │
│                                                          │
│       ╭───────────────────────────┬──────────────╮       │
│       │                           │ session      │       │
│       │                           │ usage        │       │
│       │           chat            │ agents       │       │
│       │                           │ tools        │       │
│       │                           │ todos        │       │
│       ├───────────────────────────┴──────────────┤       │
│       │ input                                    │       │
│       ╰──────────────────────────────────────────╯       │
│                                                          │
│  › Sidebar position                           ‹ Right ›  │
│                                                          │
│  Sidebar sections                                        │
│    [x] Token usage                                       │
│    [x] Agents                                            │
│    [x] Tools                                             │
│    [x] Todos                                             │
│                                                          │
│    ↑/↓ navigate  ←/→ change  enter apply  esc cancel     │
╰──────────────────────────────────────────────────────────╯

The schematic adapts to the selection: the sidebar box moves (left/right column, top/bottom band) and hidden sections disappear from it.

Features

Feature Detail
Sidebar position Right (default), Left (vertical, mirrored), Top / Bottom (compact horizontal band)
Section toggles Token usage, Agents, Tools, Todos (session block always visible, in the band too)
Live preview Schematic in the dialog plus immediate application to all tabs behind it
Persistence settings.layout in ~/.config/cagent/config.yaml, loaded at startup, defaults omitted
Keys ↑/↓ navigate, ←/→/space change, enter apply and persist, esc cancel and restore

Message flow

/custom → OpenCustomizeDialogMsg → customizeDialog
   value change → PreviewLayoutMsg       → applied to every tab (no save)
   enter        → ApplyLayoutMsg         → applied + saved to user config
   esc          → CancelLayoutPreviewMsg → original layout restored

Band rendering (top/bottom)

The band reuses the vertical sidebar's visual language (accent blocks, usage glyph, agent accent colors, todo status icons), in the same section order, via shared render helpers (workingDirLine, tokenUsageLine):

 ☆ New session
 █ ~/path (branch)                            ◉ 12.5K (6%) $0.07
 ▶ root anthropic/claude-sonnet-4-5 +1 · █ 12 tools, 2 skills · ◔ 1/3 todos
 ────────────────────────────────────────────────────────────────

Left position

The sidebar's internal edge padding is mirrored so it sits flush against the terminal edge, keeping the layout symmetric with the default right position:

right: [pad][ chat ][»][pad][ sidebar ][pad]
left:  [pad][ sidebar ][pad][«][ chat ][pad]

Implementation notes

  • pkg/tui/messages/layout.go: LayoutSettings type plus open/preview/apply/cancel messages
  • pkg/tui/dialog/customize.go: dialog with adaptive schematic preview
  • pkg/tui/page/chat: position-aware geometry, rendering, hit testing, and drag-resize direction
  • pkg/tui/components/sidebar: SectionVisibility (vertical sections and collapsed band), SetMirroredPadding, band info line (agents, tools, todos)
  • pkg/userconfig: settings.layout schema and defaults
  • Lean mode drops the command (no overlay support); --sidebar=false shows a notification

Testing

  • 38 new tests: dialog navigation/preview/apply/cancel, per-position geometry, band edge placement, section visibility (vertical and band), band summaries, mirrored padding, userconfig round trip, /custom parsing
  • go build, golangci-lint, and go run ./lint . pass; remaining test failures are network-dependent tests (pkg/config, pkg/httpclient, pkg/teamloader) that also fail on main in the sandbox

Add a layout customization dialog opened with /custom: move the
sidebar (right, left, top, bottom) and toggle the visibility of its
token usage, agents, tools, and todos sections. Changes are previewed
live (schematic in the dialog plus the real UI behind it), applied to
every tab, and persisted in the user config under settings.layout.

The top and bottom positions render the sidebar as a compact band
that reuses the vertical sidebar styling (accent blocks, usage glyph,
agent colors, todo icons) in the same section order. A left sidebar
mirrors its edge padding so it sits flush against the terminal edge,
keeping the layout symmetric with the default right position.
@Sayt-0 Sayt-0 requested a review from a team as a code owner July 7, 2026 12:34
@Sayt-0 Sayt-0 merged commit 10ecd60 into main Jul 7, 2026
18 checks passed
@Sayt-0 Sayt-0 deleted the feat/custom-layout-command branch July 7, 2026 12:41
Sayt-0 pushed a commit to EronWright/docker-agent that referenced this pull request Jul 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants