@kud/gh-ink 0.52.1 → 0.54.0

package/dist/index.d.ts

@@ -66,11 +66,26 @@ type SidebarRow = {
      */
     url?: string;
 };
+/**
+ * Plain data, deliberately: a host caches its last fetch to disk and paints it
+ * on the next launch, and this rides along in that file. A function on it would
+ * not survive the round trip, so the host's words for `live` travel as a prop
+ * on `SidePanel` instead — vocabulary is configuration, not data that goes
+ * stale.
+ */
 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.
+ */
+type LiveLabel = (live: number) => string;
 /**
  * The rail's width, INCLUDING its rule and padding. Exported because the list
  * beside it has to shrink by exactly this much: every row in that list truncates
@@ -83,18 +98,26 @@ type Sidebar = {
  * word and left the rail listing keys with an ellipsis after them. The key line
  * was never the constraint — the label is what makes a key readable, and a rail
  * you cannot read is forty columns spent on nothing.
+ *
+ * Widened again once the label became the row's first line: at 45 usable
+ * columns a real epic title still lost its last two words. But a 200-column
+ * terminal has room to give where a 120-column one does not — at 120 a rail
+ * this wide leaves the list 52 columns, which elides a PR title past its own
+ * key. So this is the CEILING, and `railWidth` sizes the rail to the frame:
+ * a third of it, never below the 52 the grid was laid out for, never above.
  */
-declare const SIDEBAR_COLS = 52;
+declare const SIDEBAR_COLS = 64;
+declare const MIN_SIDEBAR_COLS = 52;
+/** How wide the rail is in a frame of `cols` — pass the same number to `width`. */
+declare const railWidth: (cols: number) => number;
 /**
- * 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?: LiveLabel) => 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,18 +131,23 @@ 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
  * the arrows are pointed at this rail at all, are the host's state — which is
  * what lets a screen with two focus regions have exactly one of them lit.
  */
-declare const SidePanel: ({ sidebar, height, focused, cursor, }: {
+declare const SidePanel: ({ sidebar, liveLabel, width, height, focused, cursor, }: {
     sidebar: Sidebar;
+    liveLabel?: LiveLabel;
+    /** From `railWidth`, so the list beside it can subtract the same number. */
+    width?: number;
     height?: number;
     /** The arrows are pointed here, so this rail draws the cursor. */
     focused?: boolean;
@@ -184,12 +212,20 @@ type CachedCockpit = {
     login: string;
     at: number;
     budget?: InboxBudget;
+    /**
+     * The rail, when the host supplied one. Cached beside the rows because it is
+     * painted beside them: a launch that trusts the cache never refetches, so a
+     * rail left out of the file is a rail that does not exist until the next
+     * refresh — `i` did nothing and the footer did not even offer it.
+     */
+    sidebar?: Sidebar;
 };
 declare const readCache: (key: string) => CachedCockpit | null;
 declare const writeCache: (key: string, data: {
     sections: Section[];
     login: string;
     budget?: InboxBudget;
+    sidebar?: Sidebar;
 }) => void;
 
 type DetailContext = {
@@ -378,7 +414,7 @@ declare const ActionMenu: ({ item, actions, cursor, }: {
     cursor: number;
 }) => React.JSX.Element;
 declare const signatureOf: (sections: Section[]) => string;
-declare const App: ({ fetcher, cacheKey, title, detailFor, origin, jiraBase, jiraKeyRe, jiraTransitions, hasCiStatus, ciJob, ciFetcher, ciPollMs, watchPath, watchDebounceMs, watchJitterMs, extensions, tabHelp, emptyHint, }: {
+declare const App: ({ fetcher, cacheKey, title, detailFor, origin, jiraBase, jiraKeyRe, jiraTransitions, hasCiStatus, ciJob, ciFetcher, ciPollMs, watchPath, watchDebounceMs, watchJitterMs, extensions, tabHelp, emptyHint, liveLabel, }: {
     fetcher: () => Promise<{
         sections: Section[];
         login: string;
@@ -401,6 +437,13 @@ declare const App: ({ fetcher, cacheKey, title, detailFor, origin, jiraBase, jir
         sidebar?: Sidebar;
     }>;
     cacheKey?: string;
+    /**
+     * What the rail calls a row's `live` count, in this host's words — `4 on
+     * board` / `off board` on a ticket cockpit. A prop rather than part of the
+     * fetch result because it is vocabulary, not data: it never goes stale, and
+     * a function would not survive the cache the sidebar is painted from.
+     */
+    liveLabel?: LiveLabel;
     title?: string;
     detailFor?: (ctx: DetailContext) => React.ReactNode;
     /** A two-way repo split, and what to call the side on screen. See OriginSplit. */
@@ -453,4 +496,4 @@ declare const matchesFilter: (repo: string, filter: RepoFilter) => boolean;
  */
 declare const parsePatterns: (value: string) => string[];
 
-export { type Action, ActionMenu, App, COLS, CiStatusLine, type CiStatusState, CommentsPanel, type CommentsPanelProps, type DetailContext, type ExplainSection, type ExtensionTarget, HealthPanel, type HealthPanelProps, type InboxBudget, type InboxExtension, type JiraTransition, type RepoFilter, SIDEBAR_COLS, SidePanel, type Sidebar, type SidebarRow, 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 };
+export { type Action, ActionMenu, App, COLS, CiStatusLine, type CiStatusState, CommentsPanel, type CommentsPanelProps, type DetailContext, type ExplainSection, type ExtensionTarget, HealthPanel, type HealthPanelProps, type InboxBudget, type InboxExtension, type JiraTransition, type LiveLabel, MIN_SIDEBAR_COLS, type RepoFilter, SIDEBAR_COLS, SidePanel, type Sidebar, type SidebarRow, budgetNotice, buildActions, buildCheckoutCmd, clipboard, counts, drillCmd, explainGhAction, explainItem, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, itermRun, jumpToRepo, jumpToRepoPane, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, railCapacity, railWidth, readCache, renderMarkdown, reposInSections, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, toCiStatusState, truncate, useActionMenu, windowCount, withHeaders, withoutItem, workCount, writeCache };

package/dist/index.js

@@ -1,6 +1,6 @@
 import React2, { createContext, useState, useRef, useEffect, useMemo, useContext } from 'react';
 import { useWindowSize, useInput, Text, Box, useApp } from 'ink';
-import { colors, ScrollView, TextInput, LoadingScreen, StatusMessage, FooterHints, useListCursor, Tabs, pillWidth, Pill } from '@kud/ink-ui';
+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,73 +585,115 @@ 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 SIDEBAR_COLS = 64;
+var MIN_SIDEBAR_COLS = 52;
+var railWidth = (cols) => Math.max(MIN_SIDEBAR_COLS, Math.min(SIDEBAR_COLS, Math.round(cols / 3)));
 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 contentOf = (width) => width - RULE - PAD;
+var MARKS = 4;
+var FACTS_INDENT = 6;
+var KEY_COLS = 10;
+var BAR_COLS = 10;
+var FRACTION_COLS = 5;
+var GUTTER = "  ";
+var FACTS_FIXED = 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,
+  liveLabel = defaultLiveLabel,
+  width = SIDEBAR_COLS,
   height,
   focused = false,
   cursor = 0
 }) => {
+  const content = contentOf(width);
+  const labelCols = content - MARKS;
+  const liveCols = content - FACTS_FIXED;
   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,
       {
         flexDirection: "column",
-        width: SIDEBAR_COLS,
+        width,
         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, labelCols) })
               ] }),
-              /* @__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, liveCols) : "") })
+              ] })
             ] }, 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
         ]
       }
     )
@@ -720,7 +762,8 @@ var readCache = (key) => {
       sections: raw.sections,
       login: raw.login ?? "",
       at: raw.at ?? 0,
-      budget: raw.budget
+      budget: raw.budget,
+      ...Array.isArray(raw.sidebar?.rows) ? { sidebar: raw.sidebar } : {}
     };
   } catch {
     return null;
@@ -1135,7 +1178,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 +1766,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 +1826,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 +1868,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 +1906,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 +1935,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 +1968,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 +2001,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 +2037,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 +2055,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 +2125,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 +2230,7 @@ var HelpModal = ({
       })),
       {
         cell: "\uF086",
-        color: "#FF8700",
+        color: colors.accent,
         bold: true,
         label: "Open-thread count"
       }
@@ -2200,7 +2243,7 @@ var HelpModal = ({
         title: "Tabs",
         rows: tabHelp.map(([tab, meaning]) => ({
           cell: tab,
-          color: "#FF8700",
+          color: colors.accent,
           label: meaning
         }))
       }
@@ -2275,7 +2318,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 }),
@@ -2364,7 +2407,8 @@ var BrowseScreen = ({
   onLeave,
   transients,
   onTabChange,
-  sidebar
+  sidebar,
+  liveLabel
 }) => {
   const { rows } = useWindowSize();
   const { exit } = useApp();
@@ -2488,7 +2532,8 @@ var BrowseScreen = ({
   const railRows = sidebar?.rows ?? [];
   const railActive = showRail && railFocus && railRows.length > 0;
   const railAt = Math.min(railCursor, Math.max(0, railRows.length - 1));
-  const listCols = showRail ? COLS - SIDEBAR_COLS : COLS;
+  const railCols = railWidth(COLS);
+  const listCols = showRail ? COLS - railCols : COLS;
   const [sparkFrame, setSparkFrame] = useState(0);
   const sparkling = (mergedUrls?.length ?? 0) > 0 || (leavingUrls?.length ?? 0) > 0 || // Any MARKED TAB, not just rows on screen. The scope used to be this tab's
   // own items, which was right while the animation lived on the rows and is
@@ -2577,11 +2622,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;
@@ -2691,12 +2736,10 @@ 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") exit();
     if (input === "r") {
@@ -3011,7 +3054,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(
@@ -3043,7 +3086,7 @@ var BrowseScreen = ({
                 s.id,
                 pulseSettled ? PULSE_SETTLED_FRAME : sparkFrame
               ),
-              markerColor: "#FF8700"
+              markerColor: colors.accent
             }))
           }
         ) }),
@@ -3053,7 +3096,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,
@@ -3117,6 +3160,8 @@ var BrowseScreen = ({
             SidePanel,
             {
               sidebar,
+              liveLabel,
+              width: railCols,
               height: listHeight,
               focused: railActive,
               cursor: railAt
@@ -3179,7 +3224,8 @@ var App = ({
   watchJitterMs = 0,
   extensions,
   tabHelp,
-  emptyHint
+  emptyHint,
+  liveLabel
 }) => {
   const { rows } = useWindowSize();
   const [state, setState] = useState({ phase: "loading" });
@@ -3356,6 +3402,7 @@ var App = ({
       displayedKey.current = signatureOf(cached.sections);
       displayedSections.current = cached.sections;
       setFetchedAt(cached.at);
+      if (cached.sidebar) setSidebar(cached.sidebar);
       setState({
         phase: "browse",
         sections: cached.sections,
@@ -3400,6 +3447,7 @@ var App = ({
           const shared = cacheKey ? readCache(cacheKey) : null;
           if (shared && shared.at > firedAt) {
             receive({ sections: shared.sections, login: shared.login });
+            if (shared.sidebar) setSidebar(shared.sidebar);
             setFetchedAt(shared.at);
             return;
           }
@@ -3544,6 +3592,7 @@ var App = ({
         transients,
         onTabChange: setVisibleTab,
         sidebar,
+        liveLabel,
         ciStatusState: hasCiStatus ? ciStatusState : void 0,
         ciJob,
         tabHelp,
@@ -3596,4 +3645,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, MIN_SIDEBAR_COLS, 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, railWidth, 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.1",
+  "version": "0.54.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",
@@ -50,7 +50,7 @@
   "dependencies": {
     "@kud/gh": "0.16.0",
     "@kud/gh-workflow": "0.11.0",
-    "@kud/ink-ui": "0.28.2",
+    "@kud/ink-ui": "0.29.0",
     "zx": "8.8.5"
   },
   "devDependencies": {