TUI: 50/50 split layout with metadata & details panes

[Copilot]

The TUI previously showed only a left/right split with the full item detail on the right, requiring users to context-switch to see metadata, description, and comments together.

Layout restructure

• Top-left (65% × 50%): Work Items Tree (was 50% × 100%)
• Top-right (35% × 50%): New MetadataPane — status, stage, priority, #comments, tags, assignee, created/updated timestamps
• Bottom (100% × 50%): Description & Comments pane (was "Details", now full-width)

New MetadataPaneComponent

src/tui/components/metadata-pane.ts — blessed box with a single updateFromItem(item, commentCount) method. Called from updateDetailForIndex() on every selection change, keeping metadata in sync with the tree.

Focus cycling

• Ctrl-W w/h/l/p: now cycles 3 panes — list → metadata → detail (wrap)
• Tab / Shift-Tab: new screen-level handlers for the same cycle; suppressed while any dialog is open

Test changes

• tests/tui/focus-cycling-integration.test.ts: mock layout updated to include metadataPaneComponent; assertions updated for 3-pane wrap (was 2)
• test/tui-integration.test.ts: label lookups updated (' Details ' → ' Description & Comments '); focus cycle assertions updated accordingly
• tests/tui/layout.test.ts: MetadataPaneComponent added to interface assertions
• tests/tui/tui-50-50-layout.test.ts (new): 8 integration tests — metadata content, comment count propagation, Tab/Shift-Tab cycling, dialog suppression

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/graphql
  • Triggering command: /usr/bin/gh gh issue create --repo owner/name --title Item without GitHub mapping --body-file - worklog/data de/node/bin/bashrev-parse git -bin�� /tmp/wl-wt-first-Ismo6t/local-re/tmp/wl-wt-err-yXSZzJ/local-repo/.worklog/tmp-worktree-ioIV0F/wtbash rktree-ioIV0F/wt odules/npm/node_modules/@npmcli/run-script/lib/node-gyp-bin/bash first sync --show-toplevel k/node_modules/.rev-parse -data.jsonl (http block)
  • Triggering command: /usr/bin/gh gh issue create --repo owner/name --title Item 1 --body-file - XSZzJ/local-repo/home/REDACTED/work/Worklog/Worklog/tests/cli/mock-bin/git ache/node/24.13.rev-parse bash -bin�� -C /tmp/worklog-test-SNxA3Z/.worklog/tmp-worktree-BHEAD k/Worklog/Worklog/tests/cli/mock-bin/node -fdx add orklog/data bash (http block)
  • Triggering command: /usr/bin/gh gh issue create --repo owner/name --title Item 2 --body-file - XSZzJ/local-repo/home/REDACTED/work/Worklog/Worklog/tests/cli/mock-bin/git (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>TUI: 50/50 split layout with metadata & details panes</issue_title>
<issue_description>

TUI: 50/50 split layout with metadata & details panes — Intake Draft (WL-0MLORPQUE1B7X8C3)

Problem statement

• The TUI lacks a clear, single-screen layout that shows the Work Items Tree, item metadata, and selected item's description/comments together; users must switch views or context to see related information.

Users

• Primary: TUI users (contributors, producers) who browse, triage, and comment on work items from the terminal.
• Example user stories:
  • As a contributor, I want to view the work items tree and the metadata for the selected item side-by-side so I can triage without switching screens.
  • As a producer, I want to read and add comments to the selected item while seeing its metadata so I can make quick decisions and record rationale.

Success criteria

• On start the layout renders a vertical split: top half (≈50% height) and bottom half (≈50% height).
• Top half is horizontally split: left pane ≈65% width containing the Work Items Tree, right pane the Metadata pane showing state, stage, priority, #comments, tags, assignee, created_at, updated_at.
• Bottom half shows Description (top) and Comments (below), both scrollable; adding a comment via the input updates the comments list and #comments in metadata.
• Selecting an item in the Work Items Tree highlights it, updates the Metadata pane and bottom pane immediately.
• Focus can be moved between panes using Tab/Shift-Tab (tree → metadata → comment input) and existing tree navigation keys remain unchanged.
• Responsive behaviour: layout adapts to terminal sizes; verified at least on 80x24 and 120x40 terminal sizes.
• Automated test: an integration TUI test exercises selection propagation and comment creation, asserting metadata updates and visible comment count change.

Constraints

• Scope: TUI-only (front-end/layout and wiring). Do not change backend schema or add API endpoints in this work item; if missing fields are discovered create follow-up work items.
• Reuse existing components and CLI/DB wiring where possible (Work Items Tree, description/comment creation endpoints are available via existing wl commands / db.update flows).
• Preserve keyboard-first experience and existing keybindings except for adding Tab/Shift-Tab to cycle focus.

Existing state

• Current TUI code is concentrated in src/commands/tui.ts with many related modules under src/tui/* (layout, state, handlers, persistence). There is existing work to modularize and test TUI components.
• There are related items and PRs in the worklog that document refactors, tests, and smaller TUI features. See "Related work" below.

Desired change

• Implement a layout with: top vertical split (50/50), top-left Work Items Tree (~65% width), top-right MetadataPane, bottom Description+Comments pane with comment input.
• Create or reuse small components: MetadataPane, DescriptionView, CommentsList (integrate with existing comment create API/path).
• Wire selection state so the Metadata pane and bottom pane reflect the currently-selected item immediately.
• Add Tab/Shift-Tab focus cycling and ensure comment input focuses correctly for typing and submission.
• Add a small integration test under tests/tui/ that opens the TUI in headless/test mode, selects an item, adds a comment, and asserts metadata #comments increments and that the new comment text appears in the comments view.

Related work

• Refactor TUI: modularize and clean TUI code — WL-0MKX5ZBUR1MIA4QN (epic) — large refactor that extracted layout, state and handlers; implementing this layout should reuse those modules where present.
• TUI: Reparent items without typing IDs / Move mode related — WL-0MLQXVUI91SIY9KM / WL-0MLQXW5MX1YKW5H1 — shows prior work on tree interactions and move-mode state (useful for selection behavior and rendering hints).
• Add tests for TUI Update dialog / comment textbox — WL-0ML8KBZ9N19YFTDO / WL-0ML8KC1NW1LH5CT8 — existing test patterns for multi-field dialogs and multi-line comment boxes can be reused for the comment-input test.
• Escape key and mouse-guard fixes — WL-0MLOSX33C0KN340D / WL-0MLYZQ52Q0NH7VOD — caution: event handling and click-through guards exist and must be considered when wiring mouse/overlay behaviour.

Potentially related docs

• docs/opencode-tui.md — TUI design and OpenCode integration notes.
• TUI.md — user-facing help and keyboard shortcuts.
• src/commands/tui.ts — TUI command entrypoint and existing layout code.
• src/tui/layout.ts, src/tui/state.ts, src/tui/handlers.ts — modularized TUI helpers (may already exist in repo).

Derived keywords

• TUI, split-layout, metadata-pane, details-pane, comments, work-items

Verification & manual checks

• Manual verify layout proportions at 80x24 and 120x40 terminals.
• Manual verify Tab/Shift-Tab focus cycling and comment...

• Fixes TUI: 50/50 split layout with metadata & details panes #696

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.