@kud/gh-ink 0.38.1 → 0.40.0

package/dist/index.d.ts

@@ -44,8 +44,25 @@ type SidebarRow = {
      * hard 0 asserts the first from evidence for neither.
      */
     live?: number;
+    /**
+     * How far through it is — `done` of `total` children resolved.
+     *
+     * Both or neither, and only ever drawn together: a numerator with no
+     * denominator is not progress, it is a number. Absent for the same reason
+     * `live` is — a host that cannot count says nothing rather than claiming zero,
+     * and the two counts genuinely can be unavailable while `live` is known, since
+     * `live` is what the board already drew and this needs asking Jira again.
+     */
+    done?: number;
+    total?: number;
     /** Something under it is waiting on you. */
     wantsYou?: boolean;
+    /**
+     * Where ↵ takes you. Absent means the row is a label and nothing more — the
+     * cursor still lands on it, and pressing ↵ does nothing rather than flashing
+     * an error about a host decision the reader cannot change.
+     */
+    url?: string;
 };
 type Sidebar = {
     /** Heading for the rail. The host's vocabulary, never ours. */
@@ -53,13 +70,23 @@ type Sidebar = {
     rows: SidebarRow[];
 };
 /**
- * The rail's width, INCLUDING its one-column gutter. Exported because the list
+ * 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
  * against a budget, and a budget that does not know the rail is there overflows
  * by the rail's whole width — which in a frame sized to fill the terminal
  * scrolls the panel rather than clipping a row.
  */
-declare const SIDEBAR_COLS = 30;
+declare const SIDEBAR_COLS = 40;
+/**
+ * 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.
+ */
+declare const counts: (row: SidebarRow) => 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.
@@ -70,9 +97,26 @@ declare const SIDEBAR_COLS = 30;
  * initiative with nothing moving on it was invisible.
  */
 declare const railCapacity: (height: number, rows: number) => number;
-declare const SidePanel: ({ sidebar, height, }: {
+/**
+ * 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.
+ *
+ * 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, }: {
     sidebar: Sidebar;
     height?: number;
+    /** The arrows are pointed here, so this rail draws the cursor. */
+    focused?: boolean;
+    /** Which row the cursor is on. Only drawn while `focused`. */
+    cursor?: number;
 }) => React.JSX.Element;
 
 declare const renderMarkdown: (raw: string, width: number, fileLink?: (path: string, line?: number) => string) => StyledLine[];
@@ -675,4 +719,4 @@ declare const matchesFilter: (repo: string, filter: RepoFilter) => boolean;
  */
 declare const parsePatterns: (value: string) => string[];
 
-export { type Action, ActionMenu, type AnyItem, App, COLS, type CiStatus, CiStatusLine, type CiStatusState, CommentsPanel, type CommentsPanelProps, type DetailContext, type ExplainSection, type ExtensionTarget, type GHDetail, type GHItem, HealthPanel, type HealthPanelProps, type InboxBudget, type InboxConfig, type InboxExtension, type JiraTransition, type OriginSplit, PIN_MARK, type RepoFilter, type RepoHeader, type RepoProfile, SIDEBAR_COLS, type Section, type ShowLess, type ShowMore, SidePanel, type Sidebar, type SidebarRow, type Standing, type SubgroupHeader, type TaskRow, budgetNotice, buildActions, buildCheckoutCmd, checkoutDirs, clipboard, configureInbox, drillCmd, explainGhAction, explainItem, filterByOrigin, filterByRepos, filterBySearch, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, inboxConfig, insertRepoHeaders, itermRun, jumpToRepo, jumpToRepoPane, layoutGHItems, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, profileOf, railCapacity, readCache, relativeTime, renderMarkdown, repoPriority, reposInSections, resetInboxConfig, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, sortByRecency, sortItems, toCiStatusState, topLevelCount, truncate, useActionMenu, whoseMove, windowCount, withHeaders, withoutItem, writeCache };
+export { type Action, ActionMenu, type AnyItem, App, COLS, type CiStatus, CiStatusLine, type CiStatusState, CommentsPanel, type CommentsPanelProps, type DetailContext, type ExplainSection, type ExtensionTarget, type GHDetail, type GHItem, HealthPanel, type HealthPanelProps, type InboxBudget, type InboxConfig, type InboxExtension, type JiraTransition, type OriginSplit, PIN_MARK, type RepoFilter, type RepoHeader, type RepoProfile, SIDEBAR_COLS, type Section, type ShowLess, type ShowMore, SidePanel, type Sidebar, type SidebarRow, type Standing, type SubgroupHeader, type TaskRow, budgetNotice, buildActions, buildCheckoutCmd, checkoutDirs, clipboard, configureInbox, counts, drillCmd, explainGhAction, explainItem, filterByOrigin, filterByRepos, filterBySearch, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, inboxConfig, insertRepoHeaders, itermRun, jumpToRepo, jumpToRepoPane, layoutGHItems, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, profileOf, railCapacity, readCache, relativeTime, renderMarkdown, repoPriority, reposInSections, resetInboxConfig, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, sortByRecency, sortItems, toCiStatusState, topLevelCount, truncate, useActionMenu, whoseMove, windowCount, withHeaders, withoutItem, writeCache };

package/dist/index.js

@@ -584,9 +584,16 @@ var HealthPanel = ({
   ] });
 };
 var ACCENT = "#FF8700";
-var SIDEBAR_COLS = 30;
-var GUTTER = 1;
-var CONTENT = SIDEBAR_COLS - GUTTER;
+var SIDEBAR_COLS = 40;
+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 ROW_LINES = 3;
 var HEADING_LINES = 2;
@@ -596,33 +603,56 @@ var railCapacity = (height, rows) => {
 };
 var SidePanel = ({
   sidebar,
-  height
+  height,
+  focused = false,
+  cursor = 0
 }) => {
-  const shown = height === void 0 ? sidebar.rows : sidebar.rows.slice(0, railCapacity(height, sidebar.rows.length));
+  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;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      flexDirection: "column",
-      width: SIDEBAR_COLS,
-      flexShrink: 0,
-      height,
-      children: [
-        /* @__PURE__ */ jsxs(Box, { marginBottom: 1, paddingLeft: GUTTER, children: [
-          /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: "\xBB " }),
-          /* @__PURE__ */ jsx(Text, { bold: true, children: sidebar.title })
-        ] }),
-        sidebar.rows.length === 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: GUTTER + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "nothing open" }) }) : shown.map((row) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
-          /* @__PURE__ */ jsxs(Box, { paddingLeft: GUTTER, children: [
-            /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: row.wantsYou ? "\u2190 " : "  " }),
-            /* @__PURE__ */ jsx(Text, { color: ACCENT, children: row.key }),
-            row.live !== void 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  ${row.live} live` }) : null
+  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.
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        width: SIDEBAR_COLS,
+        flexShrink: 0,
+        height,
+        borderStyle: "single",
+        borderColor: RULE_COLOR,
+        borderDimColor: true,
+        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
           ] }),
-          /* @__PURE__ */ jsx(Box, { paddingLeft: GUTTER + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: truncate(row.label, CONTENT - 2) }) })
-        ] }, row.key)),
-        hidden > 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: GUTTER + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: `+${hidden} more` }) }) : null
-      ]
-    }
+          sidebar.rows.length === 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: LABEL_INDENT, children: /* @__PURE__ */ jsx(Text, { dimColor: true, 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(Box, { paddingLeft: LABEL_INDENT + 2, children: /* @__PURE__ */ jsx(Text, { dimColor: !active, children: truncate(row.label, CONTENT - LABEL_INDENT - 2) }) })
+            ] }, row.key);
+          }),
+          hidden > 0 ? /* @__PURE__ */ jsx(Box, { paddingLeft: LABEL_INDENT, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: `+${hidden} more` }) }) : null
+        ]
+      }
+    )
   );
 };
 var healthDisplay = {
@@ -832,11 +862,11 @@ var diffSections = (prev, next) => {
     counts: { added, removed, changed: changedRows.size }
   };
 };
-var summariseDiff = (counts) => {
+var summariseDiff = (counts2) => {
   const parts = [];
-  if (counts.added) parts.push(`${counts.added} new`);
-  if (counts.removed) parts.push(`${counts.removed} gone`);
-  if (counts.changed) parts.push(`${counts.changed} moved`);
+  if (counts2.added) parts.push(`${counts2.added} new`);
+  if (counts2.removed) parts.push(`${counts2.removed} gone`);
+  if (counts2.changed) parts.push(`${counts2.changed} moved`);
   return parts.join(" \xB7 ");
 };
 var transientOf = (transients, item, sectionId) => {
@@ -2478,8 +2508,13 @@ var BrowseScreen = ({
         out.add(s.id);
     return out;
   }, [localSections, transients]);
-  const [railOpen, setRailOpen] = useState(false);
+  const [railOpen, setRailOpen] = useState(true);
   const showRail = railOpen && !!sidebar;
+  const [railFocus, setRailFocus] = useState(false);
+  const [railCursor, setRailCursor] = useState(0);
+  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 [sparkFrame, setSparkFrame] = useState(0);
   const sparkling = (mergedUrls?.length ?? 0) > 0 || (leavingUrls?.length ?? 0) > 0 || !!transients?.size && section.items.some((item) => transientOf(transients, item, section.id));
@@ -2582,9 +2617,41 @@ var BrowseScreen = ({
       return;
     }
     if (input === "i" && sidebar) {
-      setRailOpen((open) => !open);
+      setRailOpen((open) => {
+        if (open) setRailFocus(false);
+        return !open;
+      });
       return;
     }
+    if (key.tab && showRail) {
+      setRailFocus((f) => !f);
+      return;
+    }
+    if (railActive) {
+      if (key.upArrow || input === "k") {
+        setRailCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        setRailCursor((c) => Math.min(railRows.length - 1, c + 1));
+        return;
+      }
+      if (key.escape) {
+        setRailFocus(false);
+        return;
+      }
+      if (key.return || input === "o") {
+        const row = railRows[railAt];
+        if (row?.url) {
+          quietly`open ${row.url}`.catch(() => {
+          });
+          showFlash(`\u2197 Opened ${row.key}`);
+        }
+        return;
+      }
+      if (input !== "r" && input !== "q" && !key.leftArrow && !key.rightArrow)
+        return;
+    }
     if (key.escape && search != null) {
       setSearch(null);
       return;
@@ -2857,7 +2924,19 @@ var BrowseScreen = ({
       menu.open(actions);
     }
   });
-  const hints = activeItem?.kind === "repo-header" ? [
+  const hints = railActive ? (
+    // The rail's own keymap while it holds focus, not the list's with a line
+    // bolted on. A footer advertising `m actions` beside a cursor that cannot
+    // reach a row is worse than a short footer: it names a key that does
+    // nothing where you are standing.
+    [
+      ["\u2191\u2193", "initiative"],
+      ["\u21B5", "open"],
+      ["\u21E5/esc", "back to list"],
+      ["?", "help"],
+      ["q", "quit"]
+    ]
+  ) : activeItem?.kind === "repo-header" ? [
     ["\u2191\u2193", "nav"],
     ["\u2190\u2192", "tab"],
     ["\u21B5", "open repo"],
@@ -2872,7 +2951,7 @@ var BrowseScreen = ({
     ["m", "actions"],
     // Advertised only where it does something, and named for what it
     // shows rather than for the furniture: nobody wants "a sidebar".
-    ...sidebar ? [["i", railOpen ? "hide" : sidebar.title.toLowerCase()]] : [],
+    ...showRail ? [["\u21E5", sidebar.title.toLowerCase()]] : sidebar ? [["i", sidebar.title.toLowerCase()]] : [],
     ["?", "help"],
     ["q", "quit"]
   ];
@@ -2996,7 +3075,15 @@ var BrowseScreen = ({
               ]
             }
           ),
-          showRail && sidebar ? /* @__PURE__ */ jsx(SidePanel, { sidebar, height: listHeight }) : null
+          showRail && sidebar ? /* @__PURE__ */ jsx(
+            SidePanel,
+            {
+              sidebar,
+              height: listHeight,
+              focused: railActive,
+              cursor: railAt
+            }
+          ) : null
         ] }),
         /* @__PURE__ */ jsx(Box, { marginTop: 1, children: flash ? /* @__PURE__ */ jsx(Text3, { color: "green", children: flash }) : /* @__PURE__ */ jsx(FooterHints, { hints }) })
       ]
@@ -3205,8 +3292,8 @@ var App = ({
       }
       showData(fresh.sections, fresh.login);
     } else if (freshKey !== displayedKey.current) {
-      const { counts } = diffSections(displayedSections.current, fresh.sections);
-      if (counts.added + counts.removed + counts.changed === 0)
+      const { counts: counts2 } = diffSections(displayedSections.current, fresh.sections);
+      if (counts2.added + counts2.removed + counts2.changed === 0)
         showData(fresh.sections, fresh.login);
       else setPending(fresh);
     } else {
@@ -3450,4 +3537,4 @@ var matchesFilter = (repo, filter) => {
 };
 var parsePatterns = (value) => value.split(",").map((p) => p.trim()).filter(Boolean);
 
-export { ActionMenu, App, COLS, CiStatusLine, CommentsPanel, HealthPanel, PIN_MARK, SIDEBAR_COLS, SidePanel, budgetNotice, buildActions, buildCheckoutCmd, checkoutDirs, clipboard, configureInbox, drillCmd, explainGhAction, explainItem, filterByOrigin, filterByRepos, filterBySearch, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, inboxConfig, insertRepoHeaders, itermRun, jumpToRepo, jumpToRepoPane, layoutGHItems, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, profileOf, railCapacity, readCache, relativeTime, renderMarkdown, repoPriority, reposInSections, resetInboxConfig, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, sortByRecency, sortItems, toCiStatusState, topLevelCount, truncate2 as truncate, useActionMenu, whoseMove, windowCount, withHeaders, withoutItem, writeCache };
+export { ActionMenu, App, COLS, CiStatusLine, CommentsPanel, HealthPanel, PIN_MARK, SIDEBAR_COLS, SidePanel, budgetNotice, buildActions, buildCheckoutCmd, checkoutDirs, clipboard, configureInbox, counts, drillCmd, explainGhAction, explainItem, filterByOrigin, filterByRepos, filterBySearch, fitCount, gapsAbove, healthColor, healthDisplay, healthGlyph, healthLegend, inboxConfig, insertRepoHeaders, itermRun, jumpToRepo, jumpToRepoPane, layoutGHItems, matchesFilter, maxViewStart, moveCursor, openInTab, parsePatterns, profileOf, railCapacity, readCache, relativeTime, renderMarkdown, repoPriority, reposInSections, resetInboxConfig, resolveRepoPath, runHere, runInPane, runInPaneHorizontal, sameCiStatusState, signatureOf, sortByRecency, sortItems, toCiStatusState, topLevelCount, truncate2 as truncate, useActionMenu, whoseMove, windowCount, withHeaders, withoutItem, writeCache };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/gh-ink",
-  "version": "0.38.1",
+  "version": "0.40.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",