Fix re-pick horizontal scrolling and right-align hints block

renderTeamPickHeader now uses a sliding window algorithm:
- The focused team is always visible in [ brackets ], regardless of
  how many candidates exist and how narrow the available bar width is.
- Candidates hidden to the left/right of the visible window are indicated
  with '…' ellipsis markers (left and right independently).
- The window expands greedily right then left from the focused item to
  fill as much of maxWidth as possible.
- Previously the function always rendered from candidate 0 and clipped
  at the right; scrolling past the second item left the focused team
  off-screen even though the index was advancing.

Re-pick bar right-alignment:
- The hints block ('0/u restore  ← → move  ↵ confirm  Esc/t cancel')
  is now always anchored at the right terminal edge via padding, instead
  of being attached directly to the bar content (which caused it to drift
  left when the candidate bar was shorter than its allocated width).

New tests:
- renderTeamPickHeader: left ellipsis, both ellipses, focused always
  visible for all indices, window shift, clipped focused, symmetrical fill.
- renderGroups re-pick bar: right-alignment assertion (suffix ends at
  termWidth), suffix fixed position as focusedIndex changes, focused team
  visible for all 8 candidates on a narrow (80-char) terminal.

Author: shouze

src/render.test.ts

@@ -2059,4 +2059,91 @@ describe("renderGroups — re-pick mode hints bar", () => {
     // focusedIndex=1 → squad-beta is focused → should appear in [ brackets ]
     expect(stripped).toContain("[ squad-beta ]");
   });
+
+  it("suffix is right-aligned: hints block always ends at the terminal edge", () => {
+    // With a wide terminal, the bar is short but the hints must still be at the right edge.
+    const groups = [makeGroup("org/repo", ["a.ts"])];
+    const rows = buildRows(groups);
+    const termWidth = 100;
+    const out = renderGroups(groups, 0, rows, 40, 0, "q", "org", {
+      repickMode: {
+        active: true,
+        repoIndex: 0,
+        candidates: ["squad-a", "squad-b"], // short names → bar << barWidth
+        focusedIndex: 0,
+      },
+      termWidth,
+    });
+    const stripped = out.replace(/\x1b\[[0-9;]*m/g, "");
+    const repickLine = stripped.split("\n").find((l) => l.includes("Re-pick:"));
+    expect(repickLine).toBeDefined();
+    // Line should extend to termWidth (padded) — suffix anchored at right edge.
+    expect(repickLine!.length).toBe(termWidth);
+    // Suffix must be present and not truncated.
+    expect(repickLine!).toContain("0/u restore");
+    expect(repickLine!).toContain("Esc/t cancel");
+  });
+
+  it("suffix position stays fixed as focusedIndex changes", () => {
+    // Switching focus must not shift the suffix — only the middle bar content changes.
+    const groups = [makeGroup("org/repo", ["a.ts"])];
+    const rows = buildRows(groups);
+    const termWidth = 120;
+    const candidates = ["squad-alpha", "squad-beta", "squad-gamma"];
+
+    const lineFor = (focusedIndex: number) => {
+      const out = renderGroups(groups, 0, rows, 40, 0, "q", "org", {
+        repickMode: { active: true, repoIndex: 0, candidates, focusedIndex },
+        termWidth,
+      });
+      const stripped = out.replace(/\x1b\[[0-9;]*m/g, "");
+      return stripped.split("\n").find((l) => l.includes("Re-pick:"))!;
+    };
+
+    const line0 = lineFor(0);
+    const line1 = lineFor(1);
+    const line2 = lineFor(2);
+
+    // All lines same length (padded to termWidth).
+    expect(line0.length).toBe(termWidth);
+    expect(line1.length).toBe(termWidth);
+    expect(line2.length).toBe(termWidth);
+
+    // "Esc/t cancel" always ends at the same column (right edge).
+    const suffix = "Esc/t cancel";
+    expect(line0.endsWith(suffix)).toBe(true);
+    expect(line1.endsWith(suffix)).toBe(true);
+    expect(line2.endsWith(suffix)).toBe(true);
+  });
+
+  it("focused team is always visible with many candidates (windowing)", () => {
+    // 8 teams — the bar is too narrow to show all at once.
+    // Every focusedIndex must produce a line containing that team in [ brackets ].
+    const groups = [makeGroup("org/repo", ["a.ts"])];
+    const rows = buildRows(groups);
+    const termWidth = 80; // narrow: barWidth = 80−9−49 = 22
+    const candidates = [
+      "chapter-a",
+      "chapter-b",
+      "chapter-c",
+      "chapter-d",
+      "chapter-e",
+      "chapter-f",
+      "chapter-g",
+      "chapter-h",
+    ];
+
+    for (let focusedIndex = 0; focusedIndex < candidates.length; focusedIndex++) {
+      const out = renderGroups(groups, 0, rows, 40, 0, "q", "org", {
+        repickMode: { active: true, repoIndex: 0, candidates, focusedIndex },
+        termWidth,
+      });
+      const stripped = out.replace(/\x1b\[[0-9;]*m/g, "");
+      const repickLine = stripped.split("\n").find((l) => l.includes("Re-pick:"));
+      expect(repickLine).toBeDefined();
+      expect(repickLine!.length).toBeLessThanOrEqual(termWidth);
+      // The focused team must be visible in [ brackets ] no matter where focus is.
+      expect(repickLine!).toContain(`[ ${candidates[focusedIndex]} ]`);
+    }
+  });
 });

src/render.ts

@@ -467,22 +467,22 @@ export function renderGroups(
   // Fix: clip hints to termWidth visible chars so the line never wraps — see issue #105.
   if (opts.repickMode?.active) {
     const dm = opts.repickMode;
-    // Re-pick bar: same layout as pick mode — focused team in [ brackets ], others dimmed.
-    // Suffix with 0/u undo and Esc/t cancel hints. The entire constructed line is passed
-    // through clipAnsi() so it never wraps regardless of terminal width (including when
-    // termWidth is narrower than the "Re-pick: " prefix itself).
+    // Re-pick bar layout:
+    //   "Re-pick: " | <scrollable candidate bar> | <padding> | "  0/u restore  ← → …"
+    //
+    // The candidate bar uses a sliding window (renderTeamPickHeader) so the
+    // focused team is always visible regardless of how many teams exist.
+    // The suffix is right-aligned by padding with spaces between the bar and
+    // the suffix so the hints block always sits at the right terminal edge.
     const REPICK_PREFIX = "Re-pick: ";
     const REPICK_SUFFIX = "  0/u restore  ← → move  ↵ confirm  Esc/t cancel";
     const barWidth = Math.max(0, termWidth - REPICK_PREFIX.length - REPICK_SUFFIX.length);
     const bar = renderTeamPickHeader(dm.candidates, dm.focusedIndex, barWidth);
     const barPlain = stripAnsi(bar);
-    const suffix =
-      barPlain.length + REPICK_SUFFIX.length <= termWidth - REPICK_PREFIX.length
-        ? REPICK_SUFFIX
-        : barPlain.length < termWidth - REPICK_PREFIX.length
-          ? REPICK_SUFFIX.slice(0, termWidth - REPICK_PREFIX.length - barPlain.length)
-          : "";
-    lines.push(clipAnsi(pc.dim(REPICK_PREFIX) + bar + pc.dim(suffix), termWidth) + "\n");
+    // Pad between bar content and suffix to keep suffix right-aligned.
+    const padLen = Math.max(0, barWidth - barPlain.length);
+    const line = pc.dim(REPICK_PREFIX) + bar + " ".repeat(padLen) + pc.dim(REPICK_SUFFIX);
+    lines.push(clipAnsi(line, termWidth) + "\n");
   } else if (opts.teamPickMode?.active) {
     const PICK_HINTS = `Pick team: ← / → move focus  ↵ confirm  Esc cancel`;
     const clippedPick = PICK_HINTS.length > termWidth ? PICK_HINTS.slice(0, termWidth) : PICK_HINTS;

src/render/team-pick.test.ts

@@ -55,28 +55,101 @@ describe("renderTeamPickHeader — maxWidth clipping", () => {
     expect(result).toBe("[ squad-a ]  squad-b");
   });
 
-  it("clips and appends … when bar exceeds maxWidth", () => {
+  it("clips and appends … when focused=0 and bar exceeds maxWidth", () => {
     // "[ squad-a ]" = 11 chars; "  squad-b" = 9 more = 20 total; limit to 15
+    // Window=[0,0]: items(11) + right-ellipsis(3) = 14 ≤ 15 → show "[ squad-a ]  …"
     const result = strip(renderTeamPickHeader(["squad-a", "squad-b"], 0, 15));
     expect(result).toContain("[ squad-a ]");
     expect(result).toContain("…");
     expect(result).not.toContain("squad-b");
   });
 
-  it("omits … when even the ellipsis does not fit", () => {
-    // maxWidth=0: no room for any char, not even "…"
+  it("omits … when even the ellipsis does not fit (maxWidth=0)", () => {
     const result = strip(renderTeamPickHeader(["squad-a", "squad-b"], 0, 0));
     expect(result).not.toContain("…");
     expect(result).toBe("");
   });
 
-  it("clips three candidates to two + ellipsis", () => {
-    // "[ squad-a ]" = 11, "  squad-b" = 9 → 20 total; "  …" = 3 → needs maxWidth ≥ 23
-    // With maxWidth=23: squad-a + squad-b + "  …" fits; squad-c does not
+  it("clips three candidates to two + ellipsis when focused=0", () => {
+    // "[ squad-a ]" = 11, "  squad-b" = 9 → 20; "  …" = 3 → need ≥ 23
+    // With maxWidth=23: squad-a + squad-b (20) + right-ellipsis (3) = 23 ✓; squad-c hidden
     const result = strip(renderTeamPickHeader(["squad-a", "squad-b", "squad-c"], 0, 23));
     expect(result).toContain("[ squad-a ]");
     expect(result).toContain("squad-b");
     expect(result).toContain("…");
     expect(result).not.toContain("squad-c");
   });
 });
+
+// ─── renderTeamPickHeader — windowed scrolling (focused always visible) ────────
+
+describe("renderTeamPickHeader — windowed scrolling", () => {
+  it("shows left ellipsis when focused is not the first candidate", () => {
+    // candidates=["A","B","C"], focused=2, maxWidth=10
+    // "[ C ]"=5; window=[2,2]: items(5)+left(3)+right(0)=8 ≤ 10 ✓
+    // Try expand left to 1: items(5+2+1=8)+left(3)=11 > 10 ✗ → A not included
+    // Result: "…  [ C ]" (8 chars)
+    const result = strip(renderTeamPickHeader(["A", "B", "C"], 2, 10));
+    expect(result).toContain("[ C ]");
+    expect(result.startsWith("…")).toBe(true); // left ellipsis
+    expect(result).not.toContain("  A"); // A hidden on left
+  });
+
+  it("shows both ellipses when focused is in the middle and candidates overflow both sides", () => {
+    // 5 equal-width candidates ("tm1"–"tm5", each 3 chars); focused=2; maxWidth=16
+    // "[ tm3 ]"=7; + right(3)=10; + left(3)=13; expand right: 7+SEP+3=12 → 12+3+3=18>16
+    // window=[2,2]; totalWidth=7+3+3=13 ≤ 16; both ellipses shown → "…  [ tm3 ]  …" (13 chars)
+    const result = strip(renderTeamPickHeader(["tm1", "tm2", "tm3", "tm4", "tm5"], 2, 16));
+    expect(result).toContain("[ tm3 ]");
+    expect(result.startsWith("…")).toBe(true);
+    expect(result.endsWith("…")).toBe(true);
+    expect(result).not.toContain("tm1");
+    expect(result).not.toContain("tm5");
+  });
+
+  it("focused team is always visible regardless of focusedIndex", () => {
+    const teams = ["squad-a", "squad-b", "squad-c", "squad-d", "squad-e"];
+    // Use a narrow maxWidth so not all teams fit at once
+    const maxWidth = 22;
+    for (let i = 0; i < teams.length; i++) {
+      const result = strip(renderTeamPickHeader(teams, i, maxWidth));
+      expect(result).toContain(`[ ${teams[i]} ]`);
+      expect(result.length).toBeLessThanOrEqual(maxWidth);
+    }
+  });
+
+  it("window shifts rightward as focusedIndex increases", () => {
+    const teams = ["A", "B", "C", "D", "E"]; // 1 char each
+    // "[ X ]"=5 chars; with maxWidth=10: items(5)+right(3)=8 OR left(3)+items(5)=8
+    // Window holds 1 item at a time with ellipses
+    const result0 = strip(renderTeamPickHeader(teams, 0, 10));
+    const result4 = strip(renderTeamPickHeader(teams, 4, 10));
+    // First focused: no left ellipsis
+    expect(result0.startsWith("…")).toBe(false);
+    expect(result0).toContain("[ A ]");
+    // Last focused: no right ellipsis
+    expect(result4.endsWith("…")).toBe(false);
+    expect(result4).toContain("[ E ]");
+  });
+
+  it("shows the focused item clipped when it alone exceeds maxWidth", () => {
+    // "[ very-long-team-name ]" = 23 chars > maxWidth=10 → clip
+    const result = strip(renderTeamPickHeader(["very-long-team-name"], 0, 10));
+    expect(result.length).toBeLessThanOrEqual(10);
+    expect(result.endsWith("…")).toBe(true);
+  });
+
+  it("expands to fill available space symmetrically around focused", () => {
+    // 5 teams of 3 chars each; focused=2 (middle)
+    const teams = ["tm1", "tm2", "tm3", "tm4", "tm5"];
+    // maxWidth=30: "…  tm2  [ tm3 ]  tm4  …" = 3+3+2+7+2+3+3=23 ≤ 30 → add tm1 on left
+    // Let's use a width where all 5 fit: widths=[3,3,7,3,3], SEP between=(4*2)=8, total=19
+    const result = strip(renderTeamPickHeader(teams, 2, 30));
+    expect(result).toContain("tm1");
+    expect(result).toContain("tm2");
+    expect(result).toContain("[ tm3 ]");
+    expect(result).toContain("tm4");
+    expect(result).toContain("tm5");
+    expect(result).not.toContain("…"); // all teams fit → no ellipsis
+  });
+});

src/render/team-pick.ts

@@ -2,48 +2,121 @@ import pc from "picocolors";
 
 const SEP = "  ";
 
+// Visible-char cost of the overflow ellipsis indicators.
+// Left side:  "…" (1) + SEP before first windowed item (2) = 3
+// Right side: SEP after last windowed item (2) + "…" (1)  = 3
+const EL_LEFT = 1 + SEP.length; // 3
+const EL_RIGHT = SEP.length + 1; // 3
+
 /**
  * Renders a horizontal pick bar for team pick mode.
  *
  * The focused team is shown in bold + full colour (magenta); the others are
- * dimmed. Used as the section header content when team pick mode is active.
+ * dimmed. Used as the section header content when team pick mode is active or
+ * as the candidate list in the re-pick mode hints bar.
  *
- * When `maxWidth` is provided the bar is clipped to that many visible
- * characters (ANSI codes do not count) and a "…" is appended when candidates
- * are omitted, so the line never wraps.
+ * When `maxWidth` is provided the bar is rendered with a **sliding window** so
+ * that the focused team is always visible, regardless of how many other teams
+ * are listed. Candidates hidden to the left of the window are indicated with a
+ * leading `…`; candidates hidden to the right with a trailing `…` — like a
+ * horizontal tab strip. The total visible width (ANSI codes excluded) never
+ * exceeds `maxWidth`.
  *
  * Example output (focusedIndex = 0,
  *   candidates = ["squad-frontend", "squad-mobile"]):
  *
  *   [ squad-frontend ]  squad-mobile
+ *
+ * Example output when many candidates don't fit (focusedIndex = 2,
+ *   maxWidth constrains to 3 teams):
+ *
+ *   …  squad-b  [ squad-c ]  squad-d  …
  */
 export function renderTeamPickHeader(
   candidateTeams: string[],
   focusedIndex: number,
   maxWidth?: number,
 ): string {
-  const result: string[] = [];
-  let visibleWidth = 0;
-
-  for (let i = 0; i < candidateTeams.length; i++) {
-    const team = candidateTeams[i];
-    const visibleText = i === focusedIndex ? `[ ${team} ]` : team;
-    const sep = i > 0 ? SEP : "";
-    const cost = sep.length + visibleText.length;
-
-    if (maxWidth !== undefined && visibleWidth + cost > maxWidth) {
-      // Append "…" only if it fits within the remaining space.
-      const ellipsisWidth = (i > 0 ? SEP.length : 0) + 1;
-      if (visibleWidth + ellipsisWidth <= maxWidth) {
-        result.push((i > 0 ? SEP : "") + "…");
+  const n = candidateTeams.length;
+  // Pre-compute visible text for each candidate (focused gets [ ] brackets).
+  const texts = candidateTeams.map((t, i) => (i === focusedIndex ? `[ ${t} ]` : t));
+  const widths = texts.map((t) => t.length);
+
+  if (maxWidth === undefined) {
+    // No width constraint — render all candidates.
+    return texts
+      .map(
+        (text, i) =>
+          (i > 0 ? SEP : "") + (i === focusedIndex ? pc.bold(pc.magenta(text)) : pc.dim(text)),
+      )
+      .join("");
+  }
+
+  if (maxWidth <= 0) return "";
+
+  // If the focused item alone is wider than maxWidth, clip it.
+  if (widths[focusedIndex] > maxWidth) {
+    const clipped = texts[focusedIndex].slice(0, maxWidth - 1) + "…";
+    return pc.bold(pc.magenta(clipped));
+  }
+
+  // ── Windowed rendering ────────────────────────────────────────────────────
+  // Find the largest window [start, end] that contains focusedIndex and whose
+  // total visible width — including overflow ellipsis indicators — fits within
+  // maxWidth. Width model:
+  //
+  //   • items:        sum of widths[start..end] + (end-start) × SEP.length
+  //   • left ellipsis ("…" + SEP before first item):  EL_LEFT  = 3  (when start > 0)
+  //   • right ellipsis (SEP + "…" after last item):   EL_RIGHT = 3  (when end < n-1)
+  //
+  // Start with a single-item window at focusedIndex, then greedily expand
+  // right then left until neither direction fits any more.
+
+  let start = focusedIndex;
+  let end = focusedIndex;
+  let usedWidth = widths[focusedIndex]; // width of all items in [start,end] + inter-item SEPs
+
+  const totalWidth = (s: number, e: number, itemsW: number): number =>
+    itemsW + (s > 0 ? EL_LEFT : 0) + (e < n - 1 ? EL_RIGHT : 0);
+
+  for (;;) {
+    let expanded = false;
+    // Try expanding right.
+    if (end + 1 < n) {
+      const addCost = SEP.length + widths[end + 1];
+      if (totalWidth(start, end + 1, usedWidth + addCost) <= maxWidth) {
+        usedWidth += addCost;
+        end++;
+        expanded = true;
       }
-      break;
     }
+    // Try expanding left.
+    if (start > 0) {
+      const addCost = widths[start - 1] + SEP.length;
+      if (totalWidth(start - 1, end, usedWidth + addCost) <= maxWidth) {
+        usedWidth += addCost;
+        start--;
+        expanded = true;
+      }
+    }
+    if (!expanded) break;
+  }
+
+  // ── Build the bar string ──────────────────────────────────────────────────
+  // Guard: only emit overflow ellipsis when the items + both ellipses actually
+  // fit. In the edge case where the focused item fills maxWidth (leaving no
+  // room for a 3-char ellipsis), omit the indicator rather than overflowing.
+  const needed = totalWidth(start, end, usedWidth);
+  const addLeftEl = start > 0 && needed <= maxWidth;
+  const addRightEl = end < n - 1 && needed <= maxWidth;
 
-    const ansi = i === focusedIndex ? pc.bold(pc.magenta(visibleText)) : pc.dim(visibleText);
-    result.push(sep + ansi);
-    visibleWidth += cost;
+  const parts: string[] = [];
+  if (addLeftEl) parts.push(pc.dim("…"));
+  for (let i = start; i <= end; i++) {
+    if (i > start || addLeftEl) parts.push(SEP);
+    parts.push(i === focusedIndex ? pc.bold(pc.magenta(texts[i])) : pc.dim(texts[i]));
   }
+  if (addRightEl) parts.push(SEP + pc.dim("…"));
 
-  return result.join("");
+  return parts.join("");
 }