@kud/gh-ink 0.52.0 → 0.53.0

package/dist/index.d.ts

@@ -70,6 +70,14 @@ type Sidebar = {
     /** Heading for the rail. The host's vocabulary, never ours. */
     title: string;
     rows: SidebarRow[];
+    /**
+     * What to call `live` on screen, in the host's words — `4 on board` and `off
+     * board` on a ticket cockpit, say. Takes the number rather than a word pair
+     * because the two states need not share a sentence shape: "off board" has no
+     * N in it. `live` itself stays a number, so the absent-draws-nothing contract
+     * and the host's sort are untouched.
+     */
+    liveLabel?: (live: number) => string;
 };
 /**
  * The rail's width, INCLUDING its rule and padding. Exported because the list
@@ -86,15 +94,13 @@ type Sidebar = {
  */
 declare const SIDEBAR_COLS = 52;
 /**
- * The dim figures after the key: how far through, and how much is moving.
- *
- * Either half may be missing and the other still worth saying, so this is a join
- * of what is known rather than one of three fixed shapes. `done`/`total` are
- * treated as a pair — a numerator with no denominator is not progress, it is a
- * number — and a zero is printed wherever it was counted, because "nothing is
- * moving" is exactly the thing a roadmap is read to notice.
+ * The plain-text facts of a row, for a host or a test that wants them as one
+ * string: how far through, then how much is moving. Either half may be missing
+ * and the other still worth saying, and a zero is printed wherever it was
+ * counted, because "nothing is moving" is exactly the thing a roadmap is read
+ * to notice.
  */
-declare const counts: (row: SidebarRow) => string;
+declare const counts: (row: SidebarRow, liveLabel?: (live: number) => string) => string;
 /**
  * How many rows fit in `height` — one fewer than would physically fit whenever
  * that means anything is left over, to buy the line that says so.
@@ -108,10 +114,12 @@ declare const railCapacity: (height: number, rows: number) => number;
 /**
  * A right-hand rail of initiatives, standing beside the list.
  *
- * Two lines per row rather than one, because both halves are load-bearing and
- * neither survives the other being cut: a key with no words cannot be read at a
- * glance, and words with no key cannot be opened. Forty columns is not enough for
- * both on one line, so they stack.
+ * Label first, facts beneath, because a roadmap is read by name: nobody thinks
+ * "ACC-11312", they think "the OpenSearch migration". So the label is the
+ * bright line and the key drops to the facts line as what it is — a reference
+ * you follow, in the secondary tier. Two lines rather than one because both are
+ * load-bearing and neither survives the other being cut: words with no key
+ * cannot be opened, and a key with no words cannot be read at a glance.
  *
  * Presentational, like every other row renderer here: it DRAWS a cursor but does
  * not own one, and it never calls `useInput`. Where the cursor is, and whether

package/dist/index.js

@@ -1,6 +1,6 @@
 import React2, { createContext, useState, useRef, useEffect, useMemo, useContext } from 'react';
-import { useWindowSize, useInput, Text, Box } from 'ink';
-import { colors, ScrollView, TextInput, LoadingScreen, StatusMessage, FooterHints, useListCursor, Tabs, pillWidth, Pill } from '@kud/ink-ui';
+import { useWindowSize, useInput, Text, Box, useApp } from 'ink';
+import { colors, ScrollView, TextInput, LoadingScreen, ProgressBar, StatusMessage, FooterHints, useListCursor, Tabs, pillWidth, Pill } from '@kud/ink-ui';
 import { isPassCheck, isFailCheck, isInconclusiveCheck, resolveThread, unresolveThread, replyToThread, rerunFailedRun, mergePr, reRequestReviewer } from '@kud/gh';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { $ } from 'zx';
@@ -585,40 +585,75 @@ var HealthPanel = ({
     ] }) }) : note ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: colors.success, children: "  " + note }) }) : null
   ] });
 };
-var ACCENT = "#FF8700";
 var SIDEBAR_COLS = 52;
 var RULE = 1;
 var PAD = 2;
 var CONTENT = SIDEBAR_COLS - RULE - PAD;
-var LABEL_INDENT = 2;
-var RULE_COLOR = "gray";
-var counts = (row) => [
-  row.done !== void 0 && row.total !== void 0 ? `${row.done}/${row.total}` : "",
-  row.live !== void 0 ? `${row.live} live` : ""
-].filter(Boolean).join(" \xB7 ");
-var truncate = (text, max) => [...text].length <= max ? text : [...text].slice(0, Math.max(0, max - 1)).join("") + "\u2026";
+var MARKS = 4;
+var LABEL_COLS = CONTENT - MARKS;
+var FACTS_INDENT = 6;
+var KEY_COLS = 10;
+var BAR_COLS = 10;
+var FRACTION_COLS = 5;
+var GUTTER = "  ";
+var LIVE_COLS = CONTENT - FACTS_INDENT - KEY_COLS - BAR_COLS - FRACTION_COLS - GUTTER.length * 3;
+var defaultLiveLabel = (live) => live === 0 ? "nothing live" : `${live} live`;
+var fractionOf = (row) => row.done !== void 0 && row.total !== void 0 ? `${row.done}/${row.total}` : "";
+var counts = (row, liveLabel = defaultLiveLabel) => [fractionOf(row), row.live !== void 0 ? liveLabel(row.live) : ""].filter(Boolean).join(" \xB7 ");
+var DANGLING = /[\s:;,.\-—–(\[{]+$/u;
+var truncateWords = (text, max) => {
+  const chars = [...text];
+  if (chars.length <= max) return text;
+  const room = Math.max(0, max - 1);
+  const hard = chars.slice(0, room).join("");
+  const boundary = chars[room] === " " ? room : hard.lastIndexOf(" ");
+  const soft = boundary >= Math.floor(room * 0.6) ? hard.slice(0, boundary) : hard;
+  return soft.replace(DANGLING, "") + "\u2026";
+};
 var ROW_LINES = 3;
 var HEADING_LINES = 2;
 var railCapacity = (height, rows) => {
   const fits = Math.max(0, Math.floor((height - HEADING_LINES) / ROW_LINES));
   return fits >= rows ? rows : Math.max(0, fits - 1);
 };
+var percentOf = (done, total) => total === 0 ? 0 : Math.round(done / total * 100);
+var Progress = ({ row }) => {
+  const fraction = fractionOf(row);
+  const bar = row.done !== void 0 && row.total !== void 0 && row.total > 0 ? /* @__PURE__ */ jsx(
+    ProgressBar,
+    {
+      value: percentOf(row.done, row.total),
+      width: BAR_COLS,
+      color: colors.secondary
+    }
+  ) : /* @__PURE__ */ jsx(Text, { children: " ".repeat(BAR_COLS) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    bar,
+    /* @__PURE__ */ jsx(Text, { color: colors.secondary, children: GUTTER + fraction.padStart(FRACTION_COLS) })
+  ] });
+};
 var SidePanel = ({
   sidebar,
   height,
   focused = false,
   cursor = 0
 }) => {
+  const liveLabel = sidebar.liveLabel ?? defaultLiveLabel;
   const capacity = height === void 0 ? sidebar.rows.length : railCapacity(height, sidebar.rows.length);
   const start = focused && cursor >= capacity ? Math.min(cursor - capacity + 1, sidebar.rows.length - capacity) : 0;
   const shown = sidebar.rows.slice(start, start + capacity);
   const hidden = sidebar.rows.length - shown.length;
+  const focus = focused ? "  \u25CF focus" : "";
+  const rule = "\u254C".repeat(
+    Math.max(0, CONTENT - [...sidebar.title].length - focus.length - 1)
+  );
   return (
     // A rule down the left rather than a full box: the rail's other three edges
     // already have the frame's border a column or two away, and a second
     // rectangle inside the first reads as a nested panel — something you could
     // focus and act on, which this cannot be. One line is the whole claim: what
-    // is left of it is the list, what is right of it is not.
+    // is left of it is the list, what is right of it is not. In the frame's own
+    // colour and not dimmed, so the two rules read as one hierarchy.
     /* @__PURE__ */ jsxs(
       Box,
       {
@@ -627,31 +662,33 @@ var SidePanel = ({
         flexShrink: 0,
         height,
         borderStyle: "single",
-        borderColor: RULE_COLOR,
-        borderDimColor: true,
+        borderColor: colors.muted,
         borderTop: false,
         borderRight: false,
         borderBottom: false,
         paddingLeft: PAD,
         children: [
           /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-            /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: "\xBB " }),
             /* @__PURE__ */ jsx(Text, { bold: true, children: sidebar.title }),
-            focused ? /* @__PURE__ */ jsx(Text, { color: ACCENT, children: "  \u25CF focus" }) : null
+            focused ? /* @__PURE__ */ jsx(Text, { color: colors.accent, children: focus }) : null,
+            /* @__PURE__ */ jsx(Text, { color: colors.info, dimColor: true, children: ` ${rule}` })
           ] }),
-          sidebar.rows.length === 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: LABEL_INDENT, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "nothing open" }) }) : shown.map((row, i) => {
+          sidebar.rows.length === 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: MARKS, children: /* @__PURE__ */ jsx(Text, { color: colors.muted, children: "nothing open" }) }) : shown.map((row, i) => {
             const active = focused && start + i === cursor;
             return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
               /* @__PURE__ */ jsxs(Box, { children: [
-                /* @__PURE__ */ jsx(Text, { color: "cyan", children: active ? "\u276F " : "  " }),
-                /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: row.wantsYou ? "\u2190 " : "  " }),
-                /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: active, children: row.key }),
-                /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  ${counts(row)}` })
+                /* @__PURE__ */ jsx(Text, { color: colors.info, children: active ? "\u276F " : "  " }),
+                /* @__PURE__ */ jsx(Text, { color: colors.accent, bold: true, children: row.wantsYou ? "\u2190 " : "  " }),
+                /* @__PURE__ */ jsx(Text, { bold: active, children: truncateWords(row.label, LABEL_COLS) })
               ] }),
-              /* @__PURE__ */ jsx(Box, { paddingLeft: LABEL_INDENT + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: !active, children: truncate(row.label, CONTENT - LABEL_INDENT - 2) }) })
+              /* @__PURE__ */ jsxs(Box, { paddingLeft: FACTS_INDENT, children: [
+                /* @__PURE__ */ jsx(Text, { color: colors.secondary, children: row.key.padEnd(KEY_COLS) + GUTTER }),
+                /* @__PURE__ */ jsx(Progress, { row }),
+                /* @__PURE__ */ jsx(Text, { children: GUTTER + (row.live !== void 0 ? liveLabel(row.live).slice(0, LIVE_COLS) : "") })
+              ] })
             ] }, row.key);
           }),
-          hidden > 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: LABEL_INDENT, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: `+${hidden} more` }) }) : null
+          hidden > 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: MARKS, children: /* @__PURE__ */ jsx(Text, { color: colors.muted, children: `+${hidden} more` }) }) : null
         ]
       }
     )
@@ -1135,7 +1172,7 @@ var withHeaders = (items, idx) => {
     start--;
   return start;
 };
-var truncate2 = (str, max) => {
+var truncate = (str, max) => {
   if (str.length <= max) return str;
   const half = Math.floor((max - 1) / 2);
   return `${str.slice(0, half)}\u2026${str.slice(-half)}`;
@@ -1723,18 +1760,18 @@ var InboxHeader = ({
   const userSeg = loading || quiet ? "" : `@${login}  `;
   const workLabel = scopeLabel ? `  ${scopeLabel}  ` : "";
   const budgetSeg = budgetLabel ? budgetLabel + "  " : "";
-  const [statusText, statusColor] = hasPending ? [`\u25CF ${pendingSummary || "new"} \xB7 r apply`, "#FF8700"] : refreshing ? ["\u21BB refreshing\u2026", "cyan"] : appliedSummary ? [`\u25C9 ${appliedSummary}`, "#FF8700"] : fetchedAt ? [`updated ${agoText(fetchedAt)}`, void 0] : ["", void 0];
+  const [statusText, statusColor] = hasPending ? [`\u25CF ${pendingSummary || "new"} \xB7 r apply`, colors.accent] : refreshing ? ["\u21BB refreshing\u2026", "cyan"] : appliedSummary ? [`\u25C9 ${appliedSummary}`, colors.accent] : fetchedAt ? [`updated ${agoText(fetchedAt)}`, void 0] : ["", void 0];
   const statusSeg = statusText ? statusText + "  " : "";
   const fill = Math.max(
     4,
     COLS - brand.length - countSeg.length - userSeg.length - workLabel.length - budgetSeg.length - statusSeg.length
   );
   return /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-    /* @__PURE__ */ jsx(Text3, { color: "#FF8700", bold: true, children: brand }),
+    /* @__PURE__ */ jsx(Text3, { color: colors.accent, bold: true, children: brand }),
     /* @__PURE__ */ jsx(Text3, { dimColor: true, children: countSeg }),
     userSeg ? /* @__PURE__ */ jsx(Text3, { children: userSeg }) : null,
     scopeLabel ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: workLabel }) : null,
-    budgetLabel ? /* @__PURE__ */ jsx(Text3, { bold: true, color: budgetCritical ? "#FF5F5F" : "#FF8700", children: budgetSeg }) : null,
+    budgetLabel ? /* @__PURE__ */ jsx(Text3, { bold: true, color: budgetCritical ? "#FF5F5F" : colors.accent, children: budgetSeg }) : null,
     statusText ? /* @__PURE__ */ jsx(
       Text3,
       {
@@ -1783,7 +1820,7 @@ var CiStatusLine = ({
     /* @__PURE__ */ jsx(Text3, { color, bold: true, children: "\u25CF " }),
     /* @__PURE__ */ jsx(Text3, { bold: true, children: status.job }),
     /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "  " + label }),
-    /* @__PURE__ */ jsx(Text3, { color: "#FF8700", children: "  #" + status.buildNumber }),
+    /* @__PURE__ */ jsx(Text3, { color: colors.accent, children: "  #" + status.buildNumber }),
     status.age ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "  " + status.age }) : null
   ] });
 };
@@ -1825,13 +1862,13 @@ var TRANSIT_IN_FRAMES = ["\xB7", "\u25CB", "\u25CE", "\u25C9"];
 var TRANSIT_COLOUR = {
   in: "#3FB950",
   out: "#8B949E",
-  changed: "#FF8700",
+  changed: colors.accent,
   // A move is neither an arrival nor a departure, so it takes the colour of the
   // third thing that can happen to a row you already had: it changed. Both ends
   // of one move wear the same colour and the same word, which is what lets you
   // recognise the row you just watched leave when you land on the tab it went to.
-  "moved-in": "#FF8700",
-  "moved-out": "#FF8700"
+  "moved-in": colors.accent,
+  "moved-out": colors.accent
 };
 var TRANSIT_LABEL = {
   out: "gone"};
@@ -1863,7 +1900,7 @@ var ItemRow = ({
     return /* @__PURE__ */ jsx(RepoHeaderRow, { repo: item.repo, gap: gap ?? false, active });
   if (item.kind === "subgroup-header")
     return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
-      /* @__PURE__ */ jsx(Text3, { color: "#FF8700", bold: true, children: "  \xBB " }),
+      /* @__PURE__ */ jsx(Text3, { color: colors.accent, bold: true, children: "  \xBB " }),
       /* @__PURE__ */ jsx(Text3, { bold: true, children: item.label })
     ] });
   if (item.kind === "show-more")
@@ -1892,14 +1929,14 @@ var ItemRow = ({
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: parent ? "\u252C " : "  " }),
       /* @__PURE__ */ jsx(Text3, { bold: true, color: transient ? TRANSIT_COLOUR[transient] : void 0, children: transitIcon + " " }),
-      /* @__PURE__ */ jsx(Text3, { color: "#FF8700", bold: active, children: item.key + "  " }),
+      /* @__PURE__ */ jsx(Text3, { color: colors.accent, bold: active, children: item.key + "  " }),
       /* @__PURE__ */ jsx(
         Text3,
         {
           bold: active || !!transient && isArrival(transient),
           dimColor: !!transient && isDeparture(transient),
           strikethrough: transient === "out",
-          children: truncate2(item.summary, titleMax2)
+          children: truncate(item.summary, titleMax2)
         }
       ),
       item.pill && !backdropped ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1925,7 +1962,7 @@ var ItemRow = ({
   const icon = merged ? MERGED_FRAMES[sparkFrame % MERGED_FRAMES.length] : transient && isDeparture(transient) ? TRANSIT_OUT_FRAMES[rampAt(TRANSIT_OUT_FRAMES.length)] : transient && isArrival(transient) ? TRANSIT_IN_FRAMES[rampAt(TRANSIT_IN_FRAMES.length)] : healthIcon;
   const color = merged ? MERGED_COLOUR : transient ? TRANSIT_COLOUR[transient] : healthColor2;
   const spokeLast = !!login && !!item.lastActor && item.lastActor === login;
-  const [turnIcon, turnColor] = item.pinned ? [PIN_MARK, "#FF8700"] : !login || !item.lastActor ? [" ", "white"] : spokeLast ? ["\u2192", colors.secondary] : ["\u2190", "#FF8700"];
+  const [turnIcon, turnColor] = item.pinned ? [PIN_MARK, colors.accent] : !login || !item.lastActor ? [" ", "white"] : spokeLast ? ["\u2192", colors.secondary] : ["\u2190", colors.accent];
   const numStr = `#${item.number}`.padEnd(7);
   const showAuthor = !!item.author && item.author !== login;
   const sizeLabel = sizeOf(item);
@@ -1958,7 +1995,7 @@ var ItemRow = ({
       if (next.length <= LABEL_CELL_MAX) fitted.push(name);
     }
     if (fitted.length === 0) {
-      return `\uF02B ${truncate2(shown[0], LABEL_CELL_MAX)}`;
+      return `\uF02B ${truncate(shown[0], LABEL_CELL_MAX)}`;
     }
     return `\uF02B ${fitted.join(", ")}`;
   };
@@ -1994,14 +2031,14 @@ var ItemRow = ({
     /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
     /* @__PURE__ */ jsx(Text3, { color, bold: true, children: icon + " " }),
     /* @__PURE__ */ jsx(Text3, { color: turnColor, bold: turnIcon === "\u2190", children: turnIcon + " " }),
-    /* @__PURE__ */ jsx(Text3, { color: "#FF8700", children: numStr }),
+    /* @__PURE__ */ jsx(Text3, { color: colors.accent, children: numStr }),
     /* @__PURE__ */ jsx(
       Text3,
       {
         bold: active || !!transient && isArrival(transient),
         dimColor: !!transient && isDeparture(transient),
         strikethrough: transient === "out",
-        children: truncate2(item.title, titleMax) + "  "
+        children: truncate(item.title, titleMax) + "  "
       }
     ),
     labelLabel ? /* @__PURE__ */ jsx(Text3, { color: colors.secondary, children: labelLabel + "  " }) : null,
@@ -2012,7 +2049,7 @@ var ItemRow = ({
       " ",
       /* @__PURE__ */ jsx(Text3, { color: colors.error, children: sizeParts.removed })
     ] }) : null,
-    unresolvedLabel && !givingUp.threads ? /* @__PURE__ */ jsx(Text3, { bold: !spokeLast, color: spokeLast ? colors.secondary : "#FF8700", children: "  " + unresolvedLabel }) : null,
+    unresolvedLabel && !givingUp.threads ? /* @__PURE__ */ jsx(Text3, { bold: !spokeLast, color: spokeLast ? colors.secondary : colors.accent, children: "  " + unresolvedLabel }) : null,
     showAuthor && !givingUp.author ? /* @__PURE__ */ jsx(Text3, { dimColor: true, italic: true, children: "  by " + item.author }) : null,
     ageLabel && !givingUp.age ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "  " + ageLabel }) : null,
     mergedLabel && !backdropped ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2082,7 +2119,7 @@ var ActionMenu = ({
   );
 };
 var TURN_LEGEND = [
-  ["\u2190", "#FF8700", "They spoke last \xB7 your turn"],
+  ["\u2190", colors.accent, "They spoke last \xB7 your turn"],
   ["\u2192", colors.secondary, "You spoke last \xB7 waiting on them"]
 ];
 var CELL_GUTTER = 2;
@@ -2187,7 +2224,7 @@ var HelpModal = ({
       })),
       {
         cell: "\uF086",
-        color: "#FF8700",
+        color: colors.accent,
         bold: true,
         label: "Open-thread count"
       }
@@ -2200,7 +2237,7 @@ var HelpModal = ({
         title: "Tabs",
         rows: tabHelp.map(([tab, meaning]) => ({
           cell: tab,
-          color: "#FF8700",
+          color: colors.accent,
           label: meaning
         }))
       }
@@ -2275,7 +2312,7 @@ var ExplainModal = ({ item, login }) => /* @__PURE__ */ jsxs(
     paddingX: 1,
     width: Math.min(COLS, 78),
     children: [
-      /* @__PURE__ */ jsx(Text3, { color: "#FF8700", bold: true, children: `#${item.number} \xB7 ${item.repo}` }),
+      /* @__PURE__ */ jsx(Text3, { color: colors.accent, bold: true, children: `#${item.number} \xB7 ${item.repo}` }),
       /* @__PURE__ */ jsx(Text3, { children: item.title }),
       explainItem(item, login).map((section) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
         /* @__PURE__ */ jsx(Text3, { bold: true, dimColor: true, children: section.heading }),
@@ -2367,6 +2404,7 @@ var BrowseScreen = ({
   sidebar
 }) => {
   const { rows } = useWindowSize();
+  const { exit } = useApp();
   const applyWork = (secs) => origin ? filterByOrigin(secs, origin.show, origin.match, login) : secs;
   const initialSections = applyWork(sections);
   const [localSections, setLocalSections] = useState(initialSections);
@@ -2576,11 +2614,11 @@ var BrowseScreen = ({
     if (key.ctrl || key.meta) return;
     if (help) {
       if (helpRange.max > 0) {
-        const step = (n) => setHelpScroll((s) => Math.min(helpRange.max, Math.max(0, s + n)));
-        if (key.upArrow) return step(-1);
-        if (key.downArrow) return step(1);
-        if (key.pageUp) return step(-helpRange.page);
-        if (key.pageDown) return step(helpRange.page);
+        const step2 = (n) => setHelpScroll((s) => Math.min(helpRange.max, Math.max(0, s + n)));
+        if (key.upArrow) return step2(-1);
+        if (key.downArrow) return step2(1);
+        if (key.pageUp) return step2(-helpRange.page);
+        if (key.pageDown) return step2(helpRange.page);
       }
       setHelp(false);
       return;
@@ -2690,14 +2728,12 @@ var BrowseScreen = ({
       setCursors((p) => ({ ...p, [activeId]: next }));
       setViewStarts((p) => ({ ...p, [activeId]: newVs }));
     }
-    if (key.leftArrow) setTabIdx((i) => Math.max(0, i - 1));
-    if (key.rightArrow)
-      setTabIdx((i) => Math.min(localSections.length - 1, i + 1));
-    if (key.tab)
+    const step = key.leftArrow || key.tab && key.shift ? -1 : key.rightArrow || key.tab ? 1 : 0;
+    if (step !== 0)
       setTabIdx(
-        (i) => (i + (key.shift ? -1 : 1) + localSections.length) % localSections.length
+        (i) => (i + step + localSections.length) % localSections.length
       );
-    if (input === "q") process.exit(0);
+    if (input === "q") exit();
     if (input === "r") {
       onRefresh?.();
       return;
@@ -3010,7 +3046,7 @@ var BrowseScreen = ({
         ),
         ciStatusState ? /* @__PURE__ */ jsx(CiStatusLine, { state: ciStatusState, job: ciJob }) : null,
         skippedForBudget ? /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-          /* @__PURE__ */ jsx(Text3, { bold: true, color: "#FF8700", children: "  \u26A1 auto-refresh paused to save API budget" }),
+          /* @__PURE__ */ jsx(Text3, { bold: true, color: colors.accent, children: "  \u26A1 auto-refresh paused to save API budget" }),
           /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "   r refreshes anyway" })
         ] }) : null,
         /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(
@@ -3042,7 +3078,7 @@ var BrowseScreen = ({
                 s.id,
                 pulseSettled ? PULSE_SETTLED_FRAME : sparkFrame
               ),
-              markerColor: "#FF8700"
+              markerColor: colors.accent
             }))
           }
         ) }),
@@ -3052,7 +3088,7 @@ var BrowseScreen = ({
           searchInput ? /* @__PURE__ */ jsx(Text3, { color: "cyan", children: "\u258F" }) : null,
           /* @__PURE__ */ jsx(Text3, { dimColor: true, children: `   ${matchCount} match${matchCount !== 1 ? "es" : ""}${searchInput ? "  \u21B5 accept \xB7 esc clear" : "  esc clear"}` })
         ] }) : repoFilter.size > 0 ? /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-          /* @__PURE__ */ jsx(Text3, { color: "#FF8700", children: "  \u25C9 " }),
+          /* @__PURE__ */ jsx(Text3, { color: colors.accent, children: "  \u25C9 " }),
           /* @__PURE__ */ jsx(Text3, { children: `${repoFilter.size} repo${repoFilter.size !== 1 ? "s" : ""}` }),
           /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "   f edit \xB7 esc clear" })
         ] }) : null,
@@ -3132,8 +3168,9 @@ var NoRowsScreen = ({
   detail,
   onRetry
 }) => {
+  const { exit } = useApp();
   useInput((input) => {
-    if (input === "q") process.exit(0);
+    if (input === "q") exit();
     if (input === "r") onRetry();
   });
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
@@ -3594,4 +3631,4 @@ var matchesFilter = (repo, filter) => {
 };
 var parsePatterns = (value) => value.split(",").map((p) => p.trim()).filter(Boolean);
 
-export { ActionMenu, App, COLS, CiStatusLine, CommentsPanel, HealthPanel, SIDEBAR_COLS, SidePanel, budgetNotice, buildActions, buildCheckoutCmd, clipboard, counts, drillCmd, explainGhAction, explainItem, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, itermRun, jumpToRepo, jumpToRepoPane, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, railCapacity, readCache, renderMarkdown, reposInSections, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, toCiStatusState, truncate2 as truncate, useActionMenu, windowCount, withHeaders, withoutItem, workCount, writeCache };
+export { ActionMenu, App, COLS, CiStatusLine, CommentsPanel, HealthPanel, SIDEBAR_COLS, SidePanel, budgetNotice, buildActions, buildCheckoutCmd, clipboard, counts, drillCmd, explainGhAction, explainItem, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, itermRun, jumpToRepo, jumpToRepoPane, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, railCapacity, readCache, renderMarkdown, reposInSections, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, toCiStatusState, truncate, useActionMenu, windowCount, withHeaders, withoutItem, workCount, writeCache };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/gh-ink",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Ink components for rendering GitHub PR review comments and health — controlled, presentation-only, built on @kud/ink-ui and fed by @kud/gh.",
   "type": "module",
   "main": "dist/index.js",
@@ -49,8 +49,8 @@
   },
   "dependencies": {
     "@kud/gh": "0.16.0",
-    "@kud/gh-workflow": "0.10.0",
-    "@kud/ink-ui": "0.26.0",
+    "@kud/gh-workflow": "0.11.0",
+    "@kud/ink-ui": "0.29.0",
     "zx": "8.8.5"
   },
   "devDependencies": {