@kud/gh-ink 0.56.0 → 0.57.0

package/dist/index.d.ts

@@ -248,6 +248,22 @@ type DetailContext = {
      * once. Optional so a host that cannot merge need not implement it.
      */
     onMerged?: (item: GHItem) => void;
+    /**
+     * Where a drill publishes its PEEL — close the topmost layer it owns and say
+     * whether there was one. `esc` and `backspace` are bound once at the app root
+     * and routed here; a drill view binds neither itself, per `@kud/ink-ui`'s
+     * contract that a view exported from a `*-ink` package takes `onBack` and
+     * leaves the app's keys to the app.
+     *
+     * Returning `false` means "no layer of mine was open", at which point the root
+     * closes the drill itself.
+     */
+    registerPeel?: (peel: (() => boolean) | null) => void;
+    /**
+     * True while a text field inside the drill owns the keyboard — a reply box —
+     * so the root stands `q`, `esc` and `backspace` down and the field keeps them.
+     */
+    onTyping?: (typing: boolean) => void;
 };
 type Action = {
     label: string;

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, ProgressBar, StatusMessage, FooterHints, useListCursor, Tabs, pillWidth, Pill } from '@kud/ink-ui';
+import { useWindowSize, useInput, Text, Box } from 'ink';
+import { colors, ScrollView, TextInput, useAppKeys, 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';
@@ -8,7 +8,7 @@ import { spawn } from 'child_process';
 import { readFileSync, mkdirSync, writeFileSync, existsSync, readdirSync, statSync, watch, rmSync } from 'fs';
 import { join, dirname, basename } from 'path';
 import { homedir } from 'os';
-import { depthOf, checkoutDirs, profileOf, inboxConfig, relativeTime, filterBySearch, filterByRepos, filterByOrigin, PIN_MARK, sizeOf, sizePartsOf, impliedLabels, labelPriority } from '@kud/gh-workflow';
+import { PIN_MARK, depthOf, checkoutDirs, profileOf, inboxConfig, relativeTime, filterBySearch, filterByRepos, filterByOrigin, sizeOf, sizePartsOf, impliedLabels, labelPriority } from '@kud/gh-workflow';
 export { PIN_MARK, bandOf, checkoutDirs, configureInbox, filterByOrigin, filterByRepos, filterBySearch, impliedLabels, inboxConfig, insertRepoHeaders, labelPriority, layoutGHItems, profileOf, relativeTime, repoPriority, resetInboxConfig, sortByRecency, sortItems, whoseMove } from '@kud/gh-workflow';
 
 // src/components/comments-panel.tsx
@@ -1050,7 +1050,7 @@ var checksSentence = (d) => {
 var turnSentences = (item, login) => {
   if (item.pinned)
     return [
-      "You pinned this (!). It stays under Your move until you unpin it, whatever else the row says."
+      "You pinned this (+). It stays under Your move until you unpin it, whatever else the row says."
     ];
   if (!item.lastActor) return ["Nothing has been said on it yet."];
   const d = item.detail;
@@ -1060,9 +1060,9 @@ var turnSentences = (item, login) => {
   const them = item.author && item.author !== login ? item.author : null;
   if (!them)
     return [
-      `You spoke last (\u2192), ${when}. It is waiting on a reviewer, not on you.`
+      `You spoke last, ${when}. It is waiting on a reviewer, not on you.`
     ];
-  const lines = [`You spoke last (\u2192), ${when}. The ball is with ${them}.`];
+  const lines = [`You spoke last, ${when}. The ball is with ${them}.`];
   if (d?.lastCommitAt && d.lastEventAt && d.lastCommitAt < d.lastEventAt)
     lines.push(
       `Nothing has been pushed since ${relativeTime(
@@ -1849,7 +1849,7 @@ var InboxHeader = ({
         children: statusSeg
       }
     ) : null,
-    /* @__PURE__ */ jsx(Text3, { color: "cyan", dimColor: true, children: "\u254C".repeat(fill) })
+    /* @__PURE__ */ jsx(Text3, { color: colors.info, dimColor: true, children: "\u254C".repeat(fill) })
   ] });
 };
 var toCiStatusState = (status) => status ? { kind: "ready", status } : { kind: "error" };
@@ -1877,7 +1877,7 @@ var CiStatusLine = ({
     ] });
   if (state.kind === "error")
     return /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-      /* @__PURE__ */ jsx(Text3, { color: "red", bold: true, children: "  \u2717 " }),
+      /* @__PURE__ */ jsx(Text3, { color: colors.error, bold: true, children: "  \u2717 " }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: `${name}  no build / not configured` })
     ] });
   const { status } = state;
@@ -1902,9 +1902,17 @@ var RepoHeaderRow = ({
   const fill = Math.max(4, FENCE_COLS - label.length);
   const rule = "\u2500".repeat(fill);
   return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
-    /* @__PURE__ */ jsx(Text3, { color: "cyan", children: active ? "\u276F " : "  " }),
+    /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
     /* @__PURE__ */ jsx(Text3, { dimColor: !active, children: "\u2500\u2500 " }),
-    /* @__PURE__ */ jsx(Text3, { dimColor: !active, bold: active, children: repo }),
+    /* @__PURE__ */ jsx(
+      Text3,
+      {
+        dimColor: false,
+        color: active ? void 0 : colors.secondary,
+        bold: active,
+        children: repo
+      }
+    ),
     /* @__PURE__ */ jsx(Text3, { dimColor: !active, children: " " + rule })
   ] });
 };
@@ -1958,7 +1966,8 @@ var ItemRow = ({
   parent,
   sparkFrame = 0,
   cols = COLS,
-  markerCols = 0
+  markerCols = 0,
+  uniformLabels = []
 }) => {
   const backdropped = useBackdropped();
   const transient = leaving ? "out" : refreshMark;
@@ -1974,14 +1983,14 @@ var ItemRow = ({
     ] });
   if (item.kind === "show-more")
     return /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text3, { color: "cyan", children: active ? "\u276F " : "  " }),
+      /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: active ? "\u21B5 " : "  " }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: `+${item.hidden.length} more` })
     ] });
   if (item.kind === "show-less")
     return /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text3, { color: "cyan", children: active ? "\u276F " : "  " }),
+      /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: active ? "\u21B5 " : "  " }),
       /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "show less" })
@@ -1994,7 +2003,7 @@ var ItemRow = ({
       cols - item.key.length - note.length - (item.pill ? pillWidth(item.pill) + 1 : 0) - (farewellLabel ? pillWidth(farewellLabel) + 2 : 0) - prefix.length - (markerCols > 0 ? markerCols + 1 : 0) - 12
     );
     return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
-      /* @__PURE__ */ jsx(Text3, { color: "cyan", children: active ? "\u276F " : "  " }),
+      /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
       /* @__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 + " " }),
@@ -2032,17 +2041,18 @@ 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, colors.accent] : !login || !item.lastActor ? [" ", "white"] : spokeLast ? ["\u2192", colors.secondary] : ["\u2190", colors.accent];
+  const [turnIcon, turnColor] = item.pinned ? [PIN_MARK, colors.accent] : !login || !item.lastActor || spokeLast ? [" ", colors.muted] : ["\u2190", colors.accent];
   const numStr = `#${item.number}`.padEnd(7);
   const showAuthor = !!item.author && item.author !== login;
   const sizeLabel = sizeOf(item);
   const sizeParts = sizePartsOf(item);
   const unresolvedLabel = item.unresolved > 0 ? `\uF086 ${item.unresolved}` : "";
-  const ageLabel = item.activityAge && item.activityAge !== item.age ? `${item.activityAge} \xB7 ${item.age}` : item.age;
+  const agePair = item.activityAge && item.activityAge !== item.age ? { activity: item.activityAge, lifetime: item.age } : null;
+  const ageLabel = agePair ? `${agePair.activity} (${agePair.lifetime})` : item.age;
   const mergedLabel = merged ? "merged" : "";
   const pillCaps = [mergedLabel, farewellLabel].filter(Boolean).length * 2;
   const repoLabel = depthOf(item) > 0 ? item.repo : "";
-  const implied = impliedLabels(item.repo);
+  const implied = [...impliedLabels(item.repo), ...uniformLabels];
   const labelNames = (item.labels ?? []).filter((l) => !implied.includes(l)).sort((a, b) => labelPriority(a) - labelPriority(b) || a.localeCompare(b)).slice(0, 2);
   const givingUp = {
     author: false,
@@ -2097,7 +2107,7 @@ var ItemRow = ({
   const labelLabel = labelCell();
   const titleMax = Math.max(1, cols - widthOf2());
   return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Text3, { color: "cyan", children: active ? "\u276F " : "  " }),
+    /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
     /* @__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 + " " }),
@@ -2119,9 +2129,19 @@ var ItemRow = ({
       " ",
       /* @__PURE__ */ jsx(Text3, { color: colors.error, children: sizeParts.removed })
     ] }) : null,
-    unresolvedLabel && !givingUp.threads ? /* @__PURE__ */ jsx(Text3, { bold: !spokeLast, color: spokeLast ? colors.secondary : colors.accent, 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,
+    ageLabel && !givingUp.age ? agePair ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text3, { color: colors.secondary, children: "  " + agePair.activity }),
+      /* @__PURE__ */ jsx(Text3, { dimColor: true, children: ` (${agePair.lifetime})` })
+    ] }) : /* @__PURE__ */ jsx(Text3, { color: colors.secondary, children: "  " + ageLabel }) : null,
     mergedLabel && !backdropped ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Text3, { children: "  " }),
       /* @__PURE__ */ jsx(Pill, { color: MERGED_COLOUR, children: mergedLabel })
@@ -2170,15 +2190,15 @@ var ActionMenu = ({
     {
       flexDirection: "column",
       borderStyle: "round",
-      borderColor: "cyan",
+      borderColor: colors.info,
       backgroundColor: OVERLAY_BG,
       paddingX: 1,
       marginTop: 1,
       children: [
-        /* @__PURE__ */ jsx(Text3, { color: "cyan", bold: true, children: title }),
+        /* @__PURE__ */ jsx(Text3, { color: colors.info, bold: true, children: title }),
         /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "\u2500".repeat(32) }),
         actions.map((a, i) => /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Text3, { color: "cyan", children: i === cursor ? "\u276F " : "  " }),
+          /* @__PURE__ */ jsx(Text3, { color: colors.info, children: i === cursor ? "\u276F " : "  " }),
           /* @__PURE__ */ jsx(Text3, { bold: i === cursor, children: a.label }),
           /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "  " + a.hint })
         ] }, a.label)),
@@ -2189,8 +2209,8 @@ var ActionMenu = ({
   );
 };
 var TURN_LEGEND = [
-  ["\u2190", colors.accent, "They spoke last \xB7 your turn"],
-  ["\u2192", colors.secondary, "You spoke last \xB7 waiting on them"]
+  ["\u2190", colors.accent, "They spoke last \xB7 reply owed"],
+  [PIN_MARK, colors.accent, "Pinned \xB7 stays under Your move"]
 ];
 var CELL_GUTTER = 2;
 var COL_GAP = 3;
@@ -2347,13 +2367,13 @@ var HelpModal = ({
     {
       flexDirection: "column",
       borderStyle: "round",
-      borderColor: "cyan",
+      borderColor: colors.info,
       backgroundColor: OVERLAY_BG,
       paddingX: 1,
       width: contentWidth + MODAL_CHROME_COLS,
       children: [
         /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Text3, { color: "cyan", bold: true, children: "Legend" }),
+          /* @__PURE__ */ jsx(Text3, { color: colors.info, bold: true, children: "Legend" }),
           scrollable ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: `   ${offset + 1}\u2013${offset + shown} of ${totalRows}` }) : null
         ] }),
         /* @__PURE__ */ jsx(Box, { marginTop: 1, width: contentWidth, children: groups.map((group, index) => /* @__PURE__ */ jsx(
@@ -2377,7 +2397,7 @@ var ExplainModal = ({ item, login }) => /* @__PURE__ */ jsxs(
   {
     flexDirection: "column",
     borderStyle: "round",
-    borderColor: "cyan",
+    borderColor: colors.info,
     backgroundColor: OVERLAY_BG,
     paddingX: 1,
     width: Math.min(COLS, 78),
@@ -2409,19 +2429,19 @@ var RepoPicker = ({
     {
       flexDirection: "column",
       borderStyle: "round",
-      borderColor: "cyan",
+      borderColor: colors.info,
       backgroundColor: OVERLAY_BG,
       paddingX: 1,
       minWidth: 42,
       children: [
-        /* @__PURE__ */ jsx(Text3, { color: "cyan", bold: true, children: `Filter by repo  (${selected.size} on)` }),
+        /* @__PURE__ */ jsx(Text3, { color: colors.info, bold: true, children: `Filter by repo  (${selected.size} on)` }),
         /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "\u2500".repeat(36) }),
         visible.map((repo, i) => {
           const idx = start + i;
           const on = selected.has(repo);
           const active = idx === cursor;
           return /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsx(Text3, { color: "cyan", children: active ? "\u276F " : "  " }),
+            /* @__PURE__ */ jsx(Text3, { color: colors.info, children: active ? "\u276F " : "  " }),
             /* @__PURE__ */ jsx(Text3, { color: on ? "green" : void 0, children: on ? "\u25C9 " : "\u25CB " }),
             /* @__PURE__ */ jsx(Text3, { bold: active, children: repo })
           ] }, repo);
@@ -2454,6 +2474,8 @@ var BrowseScreen = ({
   fetchedAt,
   refreshError,
   hidden,
+  peelRef,
+  onTyping,
   onOpenPr,
   onOpenIssue,
   onOpenExt,
@@ -2475,7 +2497,6 @@ var BrowseScreen = ({
   liveLabel
 }) => {
   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);
@@ -2579,6 +2600,12 @@ var BrowseScreen = ({
     (w, i) => i.kind === "task" ? Math.max(w, [...i.marker ?? ""].length) : w,
     0
   );
+  const labelBearing = section.items.filter(
+    (i) => i.kind === "pr" || i.kind === "issue"
+  );
+  const uniformLabels = labelBearing.length > 1 ? (labelBearing[0]?.labels ?? []).filter(
+    (name) => labelBearing.every((i) => (i.labels ?? []).includes(name))
+  ) : [];
   const hasMore = viewStart + visibleCount < section.items.length;
   const activeItem = section.items[cursor];
   const showFlash = (msg) => {
@@ -2600,6 +2627,26 @@ 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 peel = () => {
+    if (help) return setHelp(false), true;
+    if (explain) return setExplain(false), true;
+    if (repoPicker) return setRepoPicker(false), true;
+    if (railActive) return setRailFocus(false), true;
+    if (menu.actions !== null) return menu.close(), true;
+    if (search != null) return setSearch(null), true;
+    if (repoFilter.size > 0) return setRepoFilter(/* @__PURE__ */ new Set()), true;
+    return false;
+  };
+  useEffect(() => {
+    if (!peelRef) return;
+    peelRef.current = peel;
+    return () => {
+      peelRef.current = null;
+    };
+  });
+  useEffect(() => {
+    onTyping?.(searchInput);
+  }, [searchInput, onTyping]);
   const railCols = railWidth(COLS);
   const listCols = showRail ? COLS - railCols : COLS;
   const [sparkFrame, setSparkFrame] = useState(0);
@@ -2709,7 +2756,7 @@ var BrowseScreen = ({
       return;
     }
     if (repoPicker) {
-      if (key.escape || key.return) return setRepoPicker(false);
+      if (key.return) return setRepoPicker(false);
       if (input === "a") return setRepoFilter(/* @__PURE__ */ new Set());
       if (input === " ") {
         const repo = allRepos[repoCursor];
@@ -2765,10 +2812,6 @@ var BrowseScreen = ({
         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) return;
@@ -2793,14 +2836,6 @@ var BrowseScreen = ({
       if (input !== "r" && input !== "q" && !key.leftArrow && !key.rightArrow)
         return;
     }
-    if (key.escape && search != null) {
-      setSearch(null);
-      return;
-    }
-    if (key.escape && repoFilter.size > 0) {
-      setRepoFilter(/* @__PURE__ */ new Set());
-      return;
-    }
     if (menu.handleKey(key)) return;
     if (key.upArrow) {
       const next = moveCursor(section.items, cursor, -1);
@@ -2818,10 +2853,7 @@ var BrowseScreen = ({
     }
     const step = key.leftArrow || key.tab && key.shift ? -1 : key.rightArrow || key.tab ? 1 : 0;
     if (step !== 0)
-      setTabIdx(
-        (i) => (i + step + localSections.length) % localSections.length
-      );
-    if (input === "q") exit();
+      setTabIdx((i) => (i + step + localSections.length) % localSections.length);
     if (input === "r") {
       onRefresh?.();
       return;
@@ -3172,9 +3204,9 @@ var BrowseScreen = ({
           }
         ) }),
         search != null ? /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-          /* @__PURE__ */ jsx(Text3, { color: "cyan", children: "  / " }),
+          /* @__PURE__ */ jsx(Text3, { color: colors.info, children: "  / " }),
           /* @__PURE__ */ jsx(Text3, { children: search }),
-          searchInput ? /* @__PURE__ */ jsx(Text3, { color: "cyan", children: "\u258F" }) : null,
+          searchInput ? /* @__PURE__ */ jsx(Text3, { color: colors.info, 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: colors.accent, children: "  \u25C9 " }),
@@ -3212,6 +3244,7 @@ var BrowseScreen = ({
                           sparkFrame,
                           cols: listCols,
                           markerCols,
+                          uniformLabels,
                           gap: i > 0 && gapsAbove(section.items, viewStart + i)
                         },
                         `${viewStart + i}:${rowKey(item)}`
@@ -3250,7 +3283,7 @@ var BrowseScreen = ({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: flash ? /* @__PURE__ */ jsx(Text3, { color: "green", children: flash }) : /* @__PURE__ */ jsx(FooterHints, { hints }) })
+        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: flash ? /* @__PURE__ */ jsx(Text3, { color: colors.success, children: flash }) : /* @__PURE__ */ jsx(FooterHints, { hints }) })
       ]
     }
   );
@@ -3260,9 +3293,7 @@ var NoRowsScreen = ({
   detail,
   onRetry
 }) => {
-  const { exit } = useApp();
   useInput((input) => {
-    if (input === "q") exit();
     if (input === "r") onRetry();
   });
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
@@ -3311,6 +3342,24 @@ var App = ({
 }) => {
   const { rows } = useWindowSize();
   const [state, setState] = useState({ phase: "loading" });
+  const browsePeel = useRef(null);
+  const drillPeel = useRef(null);
+  const [typing, setTyping] = useState(false);
+  useAppKeys({
+    isActive: !typing,
+    onBack: () => {
+      if (state.phase === "pr" || state.phase === "issue" || state.phase === "ext") {
+        if (drillPeel.current?.()) return true;
+        setState({
+          phase: "browse",
+          sections: state.sections,
+          login: state.login
+        });
+        return true;
+      }
+      return browsePeel.current?.() ?? false;
+    }
+  });
   const [pending, setPending] = useState(null);
   const [refreshing, setRefreshing] = useState(false);
   const [fetchedAt, setFetchedAt] = useState(null);
@@ -3675,6 +3724,8 @@ var App = ({
         budget,
         skippedForBudget,
         hidden: overlay !== null,
+        peelRef: browsePeel,
+        onTyping: setTyping,
         mergedUrls,
         leavingUrls,
         transitSince,
@@ -3712,6 +3763,10 @@ var App = ({
       item: overlay.item,
       kind: overlay.kind,
       login: state.login,
+      registerPeel: (peel) => {
+        drillPeel.current = peel;
+      },
+      onTyping: setTyping,
       onBack: toBrowse,
       onRefresh: applyOrRefresh,
       onRemove: markLeaving,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/gh-ink",
-  "version": "0.56.0",
+  "version": "0.57.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",
@@ -48,8 +48,8 @@
     "react": ">=19"
   },
   "dependencies": {
-    "@kud/gh": "0.16.0",
-    "@kud/gh-workflow": "0.12.0",
+    "@kud/gh": "0.17.0",
+    "@kud/gh-workflow": "0.12.1",
     "@kud/ink-ui": "0.29.0",
     "zx": "8.8.5"
   },