feat(ui): move between regions, name rows by identity, sort from the column

[Brad (bmethod)]

All of #38: the second design pass, and the last of the #24 work. Stacked on #50.

Replaces #45, which was opened against the phase-7 branch and never drew a review: this repository's automatic reviewer fires on a pull request's original open, and reopening one it has never reviewed does not re-arm it. The branch is unchanged; only the pull request is new.

The owner ran the app after the first design pass and asked for a second. Every item below was re-checked at 180x50 against a tree holding all seven phases, after a 200-second run so the charts held real history — anything already fixed was struck rather than filed.

Move between regions, not just within one

Home holds four regions and the keyboard reached them as one flat list. Arrows move within the focused region along its own axis; Tab and Shift+Tab move between regions. Left and right run along the horizontal tile row, up and down through a list, and Timeline keeps left and right for its time cursor.

The first draft had left and right leaving the region, which reads as one rule and is not: it makes moving along a horizontal row of tiles a matter of pressing down, and Timeline could not follow it at all because those keys already mean the cursor there. The agent building it flagged that rather than picking the nicer-feeling option, and the rule it exposed is the one shipped.

Tab no longer changes screens anywhere. The alternative was Tab moving regions on the two screens that have them and changing screens on the other five, which is the second rule this change exists to remove. The number keys 1-7 remain and are printed across the header at all times; the help panel now states them, since that route had been implied by Tab. A test pins that Tab leaves a single-region screen alone.

Regions exist on Home and Storage, the only screens with more than one selectable list.

A child line looks like a child

A vertical rule at the left of every continuation line, keeping the indent — drawn as a box's own left border, so it runs the full height of its content without anyone counting lines. Four sites through one helper: the concern detail, the capability diagnostic, the Storage drill-down, the agent detail sections.

One pattern for one idea

▸ collapsed, ▾ open, the count beside the name. Searching the UI sources for those glyphs finds them in widgets.tsx alone; five sites draw through one component, and a row draws its marker whether or not anything is open — so a reader can see what is worth pressing Enter on without pressing it.

Hold the order while reading

Busiest agents re-sorted every second and the reader's target moved under the cursor. o holds the row order while the values keep updating: a dashboard that freezes its data lies while you read it. A lane that ended drops out; a lane that climbed does not push in. The hold releases on leaving the screen. o rather than p, because pinning a sample and holding an order are different things.

An id is a column, not part of a name

The same list read .hclaude claude ken-1295 beside method PID 3405 beside .2claude claude dotfiles PID 2557288 — correct behaviour, since the id appeared only where names collided, and unreadable presentation, because to a reader it looks arbitrary.

The name column holds the name; a dim id column holds the process id for every row. distinguish is gone from the lane model, so no name is appended to.

Every list that draws lane names carries the column — Home, Agents and Builds. The builds lane model had no process id at all and carries one now. The agent detail already names its process in its identity line, which is where that belongs for a screen showing one lane, and a test holds it there.

The guard pins the property rather than the column: six lanes named method with every reading identical, rendered at two widths, and no two drawn rows may read the same. A future narrowing that drops the column fails it whatever the column is called.

Where Home's width cannot keep the name readable, the state column goes instead. A blocked or running lane already shows in its numbers; a name that identifies nothing shows in nothing.

Sort from the column

The sorted heading carries ↑ or ↓, chosen in one place. On a numeric column the arrow leads, so the heading still ends where its digits end — putting it after the label broke the alignment an earlier phase established.

Builds and Resources do not sort, each for a reason rather than by omission: Builds' rows are not lanes and have no comparator, and Resources is a tree that sorting would flatten.

Say what unread means

57 sources vsys cannot read named a mechanism and no consequence. It now names what a reader loses — every wait reading is blank rather than zero, and which screens those are. The interface and the system's own words stay in the drill-down, which is where someone goes to fix it rather than to understand what they are missing.

Separate what is separate

Recent changes truncated mid-sentence with no mark. It has three columns now, and its subject cuts through the same helper every other cell uses.

Proof

399 tests, 0 fail.

This line read 385 while the branch sat under #43 and #44. The stack was replayed onto the merged phase-5, which carries four tests the review rounds added there, and 385 was itself one too high — a duplicate entered during the test-file split and overstated every figure from that commit until it was found. #43 records why only the count could see it.

Plants throughout, and three of them caught a test rather than the code:

• a cut-mark assertion that passed when a row ended in whitespace — and the renderer pads every line to the terminal width, so it passed whatever the code did;
• a tile test that only ever pressed right, so a plant on left changed nothing observable;
• an identity fixture whose six rows differed by their CPU numbers, so the rows looked distinct while the names still named nothing.

One decision came from a capture rather than a test. The Agents list sheds optional columns as it narrows, ordered trend, id, pane — identity last, which sounded right. The 180-column frame showed an empty pane column surviving while every process id was dropped. The order is now trend, pane, id: identity that always exists outranks identity that usually does not. Four widths are pinned.

Closes #38. Part of #24.

https://claude.ai/code/session_01B4rKWUEy6WF5MRxtBEwFdB

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.