Review fixes: stop the title growing over the header's own furniture

Two real defects the reviewer found, both reproduced in a browser before
believing them and after fixing them.

The header is a three-column grid whose centre track is `auto`, and an `auto`
track is sized to its max-content BEFORE the two `1fr` side tracks get
anything. So a wide title does not shrink — it takes its width out of its
neighbours, and the title's box grows over the logo on one side and the close
button on the other. Measured at a 900px window in a 2x2: `[Agent-manager]
claude-code-8` overlapped `.ph-left` by 4px, and a 31-character name overlapped
both sides by 28px and 16px. The long-name half of that is on main already; the
prefix made it reachable at ordinary names. A `min-content` floor on the two
side tracks fixes both: the title is capped at what is actually free and
ellipsises inside its own box.

Second, `flex-shrink` distributes a deficit proportionally, so weighting the
group heavier still took a sliver off the name — and a name that misses its
natural width by 0.03px renders an ellipsis anyway. `claude-code-8` read
`claude-code…` in every tile of a 2x2 at 900px. The name now has shrink 0 and
is bounded by `max-width` instead, which also puts the ellipsis on the name
itself when the name alone is too long for the header.

Also from the review: `align-items: center` rather than a synthesised baseline
on two overflow-clipped boxes, drop the `text-align` that a blockified flex
item ignores, and cite the endpoint the app actually reads (`/api/tree`) rather
than the agent roster.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/src/lib/sessionTitle.ts

@@ -14,9 +14,11 @@
 /**
  * The group's display name, or null when the session sits loose in the tree.
  *
- * Ungrouped is an absence here, not a word: the tree simply has no group that
- * lists the session, and `/api/agents` serialises that as `group: null`. So the
- * empty cases all collapse to the same bare name — there is no `[None] foo`.
+ * Ungrouped is an absence here, not a word: `/api/tree` gives the app groups
+ * with their `sessionIds`, so a loose session is simply one no group lists and
+ * the caller has nothing to pass. Every empty shape collapses to the same bare
+ * name — there is no `[None] foo`. (The roster that agents read, `/api/agents`,
+ * spells the same absence as `group: null`.)
  */
 export function groupLabel(name?: string | null): string | null {
   const trimmed = (name ?? '').trim();

web/src/styles.css

@@ -560,16 +560,28 @@ body {
 .welcome-reopen { font-size: 11px; color: var(--muted); }
 .welcome-foot .btn-primary { flex: none; padding: 8px 18px; }
 
-.pane-head { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 9px; padding: 7px 11px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 12px; flex: none; }
+/* The side columns keep a min-content floor. Without one the centre track is
+   sized to its max-content BEFORE the two `1fr` tracks get anything, so a wide
+   title takes its width out of its neighbours: the logo and the close button
+   keep their place in the flow but the title's box grows over them. That was
+   already reachable with a long enough agent name; putting the group in front
+   of the name made it reachable at ordinary ones. With the floor the title is
+   capped at what is actually free and ellipsises instead. */
+.pane-head { container-type: inline-size; display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr); align-items: center; gap: 9px; padding: 7px 11px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 12px; flex: none; }
 .pane-head .ph-left { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; }
-.pane-head .ph-title { grid-column: 2; min-width: 0; max-width: 100%; display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; text-align: center; font-family: var(--font-mono); font-weight: 600; white-space: nowrap; overflow: hidden; cursor: text; }
-/* `[Group] name` is one title in two parts, and the group is the part that
-   gives way: it is weighted to shrink hundreds of times faster than the name,
-   so a tile too narrow for both truncates the context rather than the thing you
-   are looking for. Below a tile width where a clipped prefix would say nothing
-   anyway, it drops out entirely and the name gets the whole header. */
-.pane-head .ph-group { flex: 0 500 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
-.pane-head .ph-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pane-head .ph-title { grid-column: 2; min-width: 0; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--font-mono); font-weight: 600; white-space: nowrap; overflow: hidden; cursor: text; }
+/* `[Group] name` is one title in two parts, and the group is the only part that
+   gives way: a tile too narrow for both truncates the context, never the thing
+   you are looking for. The squeeze passes through a band where the prefix reads
+   as a stub (`[Agent-man…`); below a tile width where that is all it could ever
+   be, it drops out entirely and the name has the header to itself. */
+.pane-head .ph-group { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
+/* flex-shrink 0, not a small weight: shrinking is proportional, so ANY shared
+   deficit takes a sliver off the name too — and a name that misses by 0.03px
+   still renders an ellipsis. So the name never shrinks, and `max-width` is what
+   bounds it: it can fill the whole title but no more, which is what puts the
+   ellipsis on the name itself when the name alone is too long for the header. */
+.pane-head .ph-name { flex: 0 0 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pane-head .ph-right { grid-column: 3; min-width: 0; display: inline-flex; align-items: center; justify-self: end; gap: 6px; }
 .pane-head .ph-path { min-width: 0; max-width: min(24vw, 220px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; }
 .pane-head .ph-title-input { width: 100%; text-align: center; font: inherit; font-family: var(--font-mono); font-weight: 600; padding: 1px 6px; border: 1px solid var(--accent); border-radius: var(--r-sm); background: var(--panel-2); color: var(--text); min-width: 0; }
@@ -577,8 +589,8 @@ body {
 @container (max-width: 520px) {
   .pane-head .ph-path { display: none; }
 }
-/* Narrower than this a prefix could only ever be a sliver of itself, and a
-   header that reads "[A… name" is worse than one that just reads "name". */
+/* Narrower than this the prefix could only ever be a stub, and a header that
+   reads "[A… name" is worse than one that just reads "name". */
 @container (max-width: 260px) {
   .pane-head .ph-group { display: none; }
 }