feat(kanban): trim chrome to maximize horizontal space at narrow widths (#241)

* feat(kanban): trim chrome to maximize horizontal space at narrow widths

Strip column-level and screen-level chrome down to the minimum needed for
visual grouping so narrow terminals (~80 cols) stop wasting space — and
overflowing — on borders/padding/margins.

Changes:
- Drop column paddingX, marginRight, and the outer root paddingX.
- Remove the inter-group separator entirely; plan vs implementation grouping
  is now signaled by the column accent colors (blue / magenta) alone. Side
  effect: dropping the separator's flexGrow={1} also stops the wide-terminal
  mid-board void.
- Tighten the card secondary-text / approve-hint indent and chip marginLeft
  from 4 to 2.
- Lower MIN_COLUMN_WIDTH from 20 to 12 so narrow terminals shrink instead of
  overflowing the row.
- Recompute the slug-truncation, secondary-text-wrap, pendingNew, and title-
  truncation width budgets against the new chrome (named via
  COLUMN_BORDER_COLS / SLUG_ROW_GUTTER / SECONDARY_ROW_GUTTER).
- Keep paddingX={1} on the title bar and footer only (no border to ground them
  against the terminal edge).

Test:
- Add a per-size width-fit assertion to tracker-board-size.test.mjs so
  rendered rows never exceed termCols at any SIZE_COMBOS entry.

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

* docs(tracker): add implementation notes for kanban horizontal-space trims

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

* docs(changelog): note kanban horizontal-space trims

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

* docs(kanban): note MAX_COLUMN_WIDTH trade-off for wide terminals

Surface the wide-terminal slack inline so future readers don't mistake the
column cap for a layout bug. Addresses PR #241 review note.

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

* docs(kanban): compress chrome-constant comments to single lines

Match the one-line-when-warranted style from AGENTS.md.

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

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: agent-era-ai

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on Keep a Changelog, and this project adheres to Semantic Ve
 - Tracker detail view: tab strip across the top (Discovery / Requirements / Implement plus any extra `.md` files in the item dir); ←/→ moves tabs, ↑/↓ PgUp/PgDn g/G scroll. The first stage without an `.md` file shows a “press [enter] to advance” prompt; later empty stages are dimmed
 - Diff view: `.md` lines render as styled markdown (headings/bold/italic/code/lists/blockquotes/HRs) instead of raw source. A pre-rendering pass scans each `.md` file’s pre/post images so per-line styling has full block context (e.g. lines inside fenced code render verbatim)
 - 8 markdown themes (`bright`, `forest`, `sunset`, `ocean`, `neon`, `autumn`, `candy`, `mono`) with distinct colour palettes; press `[t]` to cycle
+- Kanban board uses the full terminal width: columns abut directly (no per-column margin, no inter-group separator, no internal padding) and the column floor drops to 12 cols so narrow terminals stop overflowing. Card secondary-row gutter tightens from 4 to 2 cols so descriptions have more room
 - Add changes here. The first bullet under each release is used as the short “what’s new” message in the app’s update notice.
 
 ## 1.1.2 - 2026-04-19

src/screens/TrackerBoardScreen.tsx

@@ -37,8 +37,13 @@ type PendingNew = {
 
 const SPINNER_CHARS = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 
-const MIN_COLUMN_WIDTH = 20;
+const MIN_COLUMN_WIDTH = 12;
+// At wide terminals the row may end before the right edge because columns cap here — accepted trade-off.
 const MAX_COLUMN_WIDTH = 50;
+// colWidth is border-box (1 left + 1 right border, no paddingX); card lines add SLUG_ROW_GUTTER (cursor+glyph) or SECONDARY_ROW_GUTTER (indent) inside.
+const COLUMN_BORDER_COLS = 2;
+const SLUG_ROW_GUTTER = 4;
+const SECONDARY_ROW_GUTTER = 2;
 const PLAN_COLOR = 'blue';
 const IMPL_COLOR = 'magenta';
 // Each item renders as up to 4 rows: slug + 2 secondary lines + marginBottom.
@@ -246,11 +251,11 @@ export default function TrackerBoardScreen({
   const availableTools = React.useMemo(() => getAvailableAITools(), [getAvailableAITools]);
   const {columns: termCols, rows: termRows} = useTerminalDimensions();
 
-  // Chrome per row: outer paddingX (2) + group separator (2) + n marginRights.
-  // Column width already includes its own border + paddingX (Ink uses border-box).
+  // Columns abut: no outer paddingX, no inter-group separator, no per-column marginRight.
+  // colWidth is border-box, so the row consumes exactly numColumns × colWidth.
   const numColumns = rawBoard.columns.length;
   const colWidth = numColumns > 0
-    ? Math.max(MIN_COLUMN_WIDTH, Math.min(MAX_COLUMN_WIDTH, Math.floor((termCols - 4 - numColumns) / numColumns)))
+    ? Math.max(MIN_COLUMN_WIDTH, Math.min(MAX_COLUMN_WIDTH, Math.floor(termCols / numColumns)))
     : MIN_COLUMN_WIDTH;
 
   // Build slug → worktree session lookup for this project
@@ -711,11 +716,10 @@ export default function TrackerBoardScreen({
   // accidentally render past the column's height.
   const scrollVisibleSlots = Math.max(1, Math.floor((itemAreaRows - 2) / ROWS_PER_ITEM));
 
-  // Each column in a group is rendered at colWidth + 1 marginRight, so a group of N
-  // columns spans N * (colWidth + 1). Pinning the group Box to that width stops the
-  // header row from expanding the group when the label+dashes would otherwise overflow,
-  // which was pushing one group's columns down and breaking alignment with the other.
-  const groupWidthFor = (count: number) => count * (colWidth + 1);
+  // Columns abut with no marginRight, so a group of N columns spans exactly N × colWidth.
+  // Pinning the group Box to that width keeps the planning and implementation groups the
+  // same total width when they have equal column counts, preserving header-row alignment.
+  const groupWidthFor = (count: number) => count * colWidth;
 
   const renderGroup = (colIndices: number[]) => {
     if (colIndices.length === 0) return null;
@@ -741,10 +745,10 @@ export default function TrackerBoardScreen({
     const moreAbove = scrollTop;
     const moreBelow = Math.max(0, total - (scrollTop + visibleCount));
 
-    // Title shares the header line with the count. Inside paddingX={1} the usable
-    // width is colWidth - 4 (2 border + 2 paddingX); the count takes its digits + 1 gap.
+    // Title shares the header line with the count. Usable width is colWidth - 2 (border-only;
+    // no internal paddingX); the count takes its digits + 1 gap.
     const countText = String(total);
-    const titleMax = Math.max(4, colWidth - 4 - countText.length - 1);
+    const titleMax = Math.max(4, colWidth - COLUMN_BORDER_COLS - countText.length - 1);
     const titleText = truncateDisplay(column.title, titleMax);
 
     return (
@@ -755,8 +759,6 @@ export default function TrackerBoardScreen({
         borderColor={isActiveColumn ? accent : 'gray'}
         width={colWidth}
         height={colHeight}
-        paddingX={1}
-        marginRight={1}
         flexShrink={0}
       >
         {/* Column header: title left, count right */}
@@ -805,10 +807,10 @@ export default function TrackerBoardScreen({
             const prChip = computePRChip(wt ? pullRequests[wt.path] : undefined);
             const cardChips = prChip ? [...runningChips, prChip] : runningChips;
 
-            // Slug row eats: 2 (border) + 2 (paddingX) + 2 (cursor) + 2 (status glyph) = 8 chars
-            const slug = truncateDisplay(item.slug, Math.max(4, colWidth - 8));
-            // Secondary row eats: 2 (border) + 2 (paddingX) + 4 (indent) = 8 chars
-            const secMax = Math.max(4, colWidth - 8);
+            // Slug row eats: 2 (border) + 2 (cursor) + 2 (status glyph) = 6 chars
+            const slug = truncateDisplay(item.slug, Math.max(4, colWidth - COLUMN_BORDER_COLS - SLUG_ROW_GUTTER));
+            // Secondary row eats: 2 (border) + 2 (indent) = 4 chars
+            const secMax = Math.max(4, colWidth - COLUMN_BORDER_COLS - SECONDARY_ROW_GUTTER);
             const secondary = !hasSession ? renderSecondary(item) : '';
 
             return (
@@ -846,7 +848,7 @@ export default function TrackerBoardScreen({
                       dimColor={display.secondaryDim}
                       wrap="truncate"
                     >
-                      {`    ${line}`}
+                      {`  ${line}`}
                     </Text>
                   ));
                 })()}
@@ -857,14 +859,14 @@ export default function TrackerBoardScreen({
                     to two lines. */}
                 {display.showApproveHint && isSelected && (
                   <Text color="green" bold>
-                    {`    ready to advance`}
+                    {`  ready to advance`}
                   </Text>
                 )}
                 {/* Chip row: tmux sessions plus the PR chip. Indented to the
                     secondary-text gutter; eats one of the budgeted rows.
                     Merged → gray pills. Inactive → plain text in chip color. */}
                 {cardChips.length > 0 && (
-                  <Box marginLeft={4}>
+                  <Box marginLeft={SECONDARY_ROW_GUTTER}>
                     {cardChips.map((chip, idx) => (
                       <React.Fragment key={chip.label}>
                         {idx > 0 && <Text> </Text>}
@@ -886,9 +888,9 @@ export default function TrackerBoardScreen({
               <Box>
                 <Text color={accent} bold>{'  '}</Text>
                 <Text color="yellow" bold>{SPINNER_CHARS[spinnerFrame]} </Text>
-                <Text color="yellow" wrap="truncate">{truncateDisplay(pendingNew.title, Math.max(4, colWidth - 8))}</Text>
+                <Text color="yellow" wrap="truncate">{truncateDisplay(pendingNew.title, Math.max(4, colWidth - COLUMN_BORDER_COLS - SLUG_ROW_GUTTER))}</Text>
               </Box>
-              <Text color="yellow" wrap="truncate">{`    ${truncateDisplay('deriving slug…', Math.max(4, colWidth - 8))}`}</Text>
+              <Text color="yellow" wrap="truncate">{`  ${truncateDisplay('deriving slug…', Math.max(4, colWidth - COLUMN_BORDER_COLS - SECONDARY_ROW_GUTTER))}`}</Text>
             </Box>
           )}
 
@@ -905,10 +907,10 @@ export default function TrackerBoardScreen({
   };
 
   return (
-    <Box flexDirection="column" flexGrow={1} paddingX={1} paddingY={0}>
+    <Box flexDirection="column" flexGrow={1} paddingY={0}>
       {/* Title bar — project name plus inline session-status summary so we don't burn
           three rows on a separate banner box. */}
-      <Box flexShrink={0}>
+      <Box flexShrink={0} paddingX={1}>
         <Text bold color="cyan">{project}</Text>
         <Text dimColor>  ·  tracker</Text>
         {waitingCount > 0 && (
@@ -922,29 +924,16 @@ export default function TrackerBoardScreen({
         )}
       </Box>
 
-      {/* Board — column borders/colors carry the planning vs implementation cue, so
-          the dedicated group-label row is dropped. */}
+      {/* Board — column borders + accent colors carry the planning vs implementation cue,
+          so the group-label row and the inter-group separator are both dropped. Columns
+          abut directly so every col goes to card content. */}
       <Box flexDirection="row" alignItems="flex-start" flexShrink={0}>
         {renderGroup(planColIndices)}
-
-        {/* Vertical separator between groups */}
-        <Box
-          flexDirection="column"
-          borderStyle="single"
-          borderColor="gray"
-          borderTop={false}
-          borderBottom={false}
-          borderRight={false}
-          marginRight={1}
-          flexGrow={1}
-          flexShrink={0}
-        />
-
         {renderGroup(implColIndices)}
       </Box>
 
       {/* Footer — no marginTop; the column borders themselves give visual breathing room. */}
-      <Box flexDirection="column" flexShrink={0}>
+      <Box flexDirection="column" flexShrink={0} paddingX={1}>
         {createMode && (
           <Text color="yellow">enter to create  ·  esc to cancel</Text>
         )}

tests/e2e/terminal/tracker-board-size.test.mjs

@@ -158,6 +158,23 @@ for (const [height, width] of SIZE_COMBOS) {
     } finally { cleanup(); }
   });
 
+  test(`tracker board ${height}x${width}: no rendered row exceeds terminal width`, async () => {
+    const {frame, cleanup} = await renderBoard({width, height});
+    try {
+      const text = frame();
+      const lines = text.split('\n');
+      const widest = lines.reduce(
+        (acc, line, idx) => (line.length > acc.length ? {length: line.length, idx, line} : acc),
+        {length: 0, idx: -1, line: ''}
+      );
+      assert.ok(
+        widest.length <= width,
+        `Row ${widest.idx} is ${widest.length} cols, exceeds terminal width ${width}. ` +
+        `Line: ${JSON.stringify(widest.line)}. Frame:\n${text}`
+      );
+    } finally { cleanup(); }
+  });
+
   test(`tracker board ${height}x${width}: planning and implementation column headers align vertically`, async () => {
     const {frame, cleanup} = await renderBoard({width, height});
     try {

tracker/items/maximize-kanban-horizontal-spa/implementation.md

@@ -0,0 +1,91 @@
+# Implementation — maximize horizontal space use in kanban view
+
+## What was built
+
+All chrome trims and width-math recomputation landed in a single commit on
+`src/screens/TrackerBoardScreen.tsx`, with a width-fit regression added to
+`tests/e2e/terminal/tracker-board-size.test.mjs`.
+
+Per-column chrome (border-box `width={colWidth}`):
+- Dropped `paddingX={1}` and `marginRight={1}` on each column box.
+- Adjacent columns now abut (`╮╭`), with the active column's accent border
+  color still distinguishing it from the gray neighbors.
+
+Screen-level chrome:
+- Removed the root `paddingX={1}`. Kept `paddingX={1}` only on the title bar
+  and footer rows, which lack a border to ground them against the terminal
+  edge — without it those rows would touch col 0.
+- Removed the entire inter-group separator `<Box>` (including its
+  `flexGrow={1}` that pooled wide-terminal slack into a center void). The
+  plan vs implementation cue is now carried by the column accent colors
+  (`PLAN_COLOR` blue / `IMPL_COLOR` magenta) alone.
+
+Card-level gutter:
+- Secondary-text indent: `'    '` → `'  '`.
+- Approve-hint indent: `'    '` → `'  '`.
+- Chip row: `marginLeft={4}` → `marginLeft={2}`.
+
+Width budget constants (added at the top of the file):
+- `COLUMN_BORDER_COLS = 2`
+- `SLUG_ROW_GUTTER = 4` (cursor 2 + status glyph 2)
+- `SECONDARY_ROW_GUTTER = 2` (matches the new indent)
+
+These replace the bare `8` / `4` constants previously inlined into the slug
+truncation, secondary-wrap width, `pendingNew` row width, and column-title
+truncation calcs.
+
+Column-width formula simplified to `floor(termCols / numColumns)` because the
+new chrome is fully internal to the per-column `width={colWidth}` border-box.
+
+Minimum column width lowered from 20 to 12 so the default 5-column board
+fits inside an 80-col terminal (5 × 12 = 60 ≤ 80) instead of forcing
+overflow.
+
+## Key decisions
+
+- **Kept title bar and footer paddings.** Strict AC #2 reads "outer root
+  `paddingX={1}` is removed." Removing it entirely would push the title text
+  and footer hints to col 0. Migrating the padding into the two unbordered
+  rows preserves the same visual edge spacing for those rows while letting
+  the board itself extend to the terminal edges — net effect on the board
+  matches the AC's intent.
+- **Card secondary indent at 2 (not 0).** The cursor + status glyph occupy
+  cols 0–3 of the inside-the-border content area; secondary text at indent 0
+  would sit flush left under nothing, looking visually detached from the
+  card. Two cols of indent keep it grouped with the slug without paying the
+  old 4-col tax.
+- **No new MAX_COLUMN_WIDTH change.** The brief was narrow-width focused;
+  raising or removing the cap is orthogonal and was explicitly out of scope
+  per the discovery clarification. The cap continues to apply at very wide
+  terminals.
+
+## Notes for cleanup
+
+- Verify the visual at very wide terminals (≥ 200 cols). With the cap at 50
+  the board no longer has a center void (separator gone), but if cumulative
+  column width hits the cap the columns will end before the terminal's right
+  edge — that's the expected trade-off and is consistent with the chosen
+  scope. If it looks ugly in practice, a follow-up could let the cap relax
+  or right-pad with an empty Box.
+- The footer at narrow widths (~100 cols) wraps awkwardly because there are
+  many keyboard shortcuts displayed. Pre-existing — not introduced here.
+- The chip row's `marginLeft={2}` makes the chips sit two cols to the right
+  of the cursor column. If a future change tightens the slug-row gutter,
+  keep `SLUG_ROW_GUTTER`/`SECONDARY_ROW_GUTTER` consistent so chips remain
+  aligned with the secondary text.
+
+## Tests
+
+- `npm run test:terminal` — 294 pass, 1 skipped. New width-fit assertion
+  passes at every `SIZE_COMBOS` entry (10×80 through 40×160).
+- `npm test` — 815 pass across 78 suites.
+- `npm run typecheck` — clean.
+
+## Stage review
+
+Discovery first surfaced a wide-terminal interpretation (raise the cap,
+strip the flexGrow); the user clarified the brief was small-width chrome
+reduction. Re-scoped to: trim column / root / separator / card-gutter
+chrome, lower MIN_COLUMN_WIDTH, recompute width math, add a width-fit
+regression. All landed in one commit. Removing the inter-group `flexGrow={1}`
+separator also incidentally fixes the wide-terminal mid-board void.