@kud/gh-ink 0.35.0 → 0.37.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { PrComments, PrHealthData, PrCheck, Health } from '@kud/gh';
-import { StyledLine } from '@kud/ink-ui';
+import { StyledLine, PillVariant } from '@kud/ink-ui';
 
 type CommentsPanelProps = {
     repo: string;
@@ -204,6 +204,20 @@ type TaskRow = {
      * separately instead of being smuggled past the truncation maths.
      */
     note?: string;
+    /**
+     * A category this row BELONGS to — `epic`, `blocked`, `spike` — drawn as a
+     * filled pill after the summary.
+     *
+     * Deliberately not a second spelling of `note`, which the epic marker used to
+     * borrow. The two want opposite weights: a pill says the word itself is the
+     * information, while `note` is for a reference the reader follows — a parent
+     * ticket key, a source. Filling a breadcrumb gives it a weight it has not
+     * earned, and a row can legitimately carry both (a story under someone else's
+     * epic shows its parent's key AND, one day, a status of its own).
+     */
+    pill?: string;
+    /** Which fill the pill takes. See `@kud/ink-ui`'s `PillVariant`. */
+    pillVariant?: PillVariant;
     /**
      * The Jira issue key behind this row, when one exists. Its PRESENCE is what
      * turns on the ticket affordances — ↵ opens a menu led by `jira issue view`,

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 } from '@kud/ink-ui';
+import { colors, ScrollView, TextInput, LoadingScreen, 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';
@@ -676,6 +676,9 @@ var invalidateCache = (key) => {
 };
 
 // src/inbox/diff.ts
+var MARK_SEP = "\0";
+var markKey = (sectionId, rowKey) => `${sectionId}${MARK_SEP}${rowKey}`;
+var rowKeyOfMark = (mark) => mark.slice(mark.indexOf(MARK_SEP) + 1);
 var keyOf = (item) => {
   if (item.kind === "pr" || item.kind === "issue") return item.url;
   if (item.kind === "task") {
@@ -707,11 +710,27 @@ var indexRows = (sections) => {
   for (const section of sections) {
     section.items.forEach((item, index) => {
       const key = keyOf(item);
-      if (key) out.set(key, { item, sectionId: section.id, index });
+      if (key)
+        out.set(markKey(section.id, key), {
+          item,
+          sectionId: section.id,
+          index
+        });
     });
   }
   return out;
 };
+var rowsOf = (index) => {
+  const out = /* @__PURE__ */ new Map();
+  for (const [mark, placed] of index) {
+    const key = rowKeyOfMark(mark);
+    const seen = out.get(key);
+    if (seen) seen.add(placed.sectionId);
+    else out.set(key, /* @__PURE__ */ new Set([placed.sectionId]));
+  }
+  return out;
+};
+var sameSections = (a, b) => a.size === b.size && [...a].every((id) => b.has(id));
 var spliceBack = (next, leaving) => {
   if (leaving.length === 0) return next;
   const bySection = /* @__PURE__ */ new Map();
@@ -732,30 +751,43 @@ var spliceBack = (next, leaving) => {
 var diffSections = (prev, next) => {
   const before = indexRows(prev);
   const after = indexRows(next);
+  const boardBefore = rowsOf(before);
+  const boardAfter = rowsOf(after);
   const transients = /* @__PURE__ */ new Map();
   const leaving = [];
-  for (const [key] of after) if (!before.has(key)) transients.set(key, "in");
-  for (const [key, was] of before) {
-    const now = after.get(key);
+  for (const [mark] of after)
+    if (!before.has(mark))
+      transients.set(
+        mark,
+        boardBefore.has(rowKeyOfMark(mark)) ? "moved-in" : "in"
+      );
+  for (const [mark, was] of before) {
+    const now = after.get(mark);
     if (!now) {
-      transients.set(key, "out");
+      transients.set(
+        mark,
+        boardAfter.has(rowKeyOfMark(mark)) ? "moved-out" : "out"
+      );
       leaving.push(was);
     } else if (renderedState(was.item) !== renderedState(now.item)) {
-      transients.set(key, "changed");
+      transients.set(mark, "changed");
     }
   }
   let added = 0;
   let removed = 0;
-  let changed = 0;
-  for (const [, kind] of transients) {
-    if (kind === "in") added++;
-    else if (kind === "out") removed++;
-    else changed++;
+  const changedRows = /* @__PURE__ */ new Set();
+  for (const [mark, kind] of transients)
+    if (kind === "changed") changedRows.add(rowKeyOfMark(mark));
+  for (const [key, sections] of boardAfter) {
+    const had = boardBefore.get(key);
+    if (!had) added += 1;
+    else if (!sameSections(had, sections)) changedRows.add(key);
   }
+  for (const key of boardBefore.keys()) if (!boardAfter.has(key)) removed += 1;
   return {
     transients,
     union: spliceBack(next, leaving),
-    counts: { added, removed, changed }
+    counts: { added, removed, changed: changedRows.size }
   };
 };
 var summariseDiff = (counts) => {
@@ -765,17 +797,19 @@ var summariseDiff = (counts) => {
   if (counts.changed) parts.push(`${counts.changed} moved`);
   return parts.join(" \xB7 ");
 };
-var transientOf = (transients, item) => {
+var transientOf = (transients, item, sectionId) => {
   if (!transients?.size) return void 0;
   const key = keyOf(item);
-  return key ? transients.get(key) : void 0;
+  return key ? transients.get(markKey(sectionId, key)) : void 0;
 };
 var tabsOfMarks = (sections, marks) => {
   const out = /* @__PURE__ */ new Map();
   for (const section of sections)
     for (const item of section.items) {
       const key = keyOf(item);
-      if (key && marks.has(key)) out.set(key, section.id);
+      if (!key) continue;
+      const mark = markKey(section.id, key);
+      if (marks.has(mark)) out.set(mark, section.id);
     }
   return out;
 };
@@ -1835,13 +1869,26 @@ var TRANSIT_IN_FRAMES = ["\xB7", "\u25CB", "\u25CE", "\u25C9"];
 var TRANSIT_COLOUR = {
   in: "#3FB950",
   out: "#8B949E",
-  changed: "#FF8700"
+  changed: "#FF8700",
+  // 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"
 };
 var TRANSIT_LABEL = {
   in: "NEW",
   out: "GONE",
-  changed: "UPDATED"
-};
+  changed: "UPDATED",
+  // Never GONE. The row is still on the board, one tab over, and telling you it
+  // has gone is the marker lying about work you still own — which was the whole
+  // failure: an epic moving tab said nothing at all and simply vanished.
+  "moved-in": "MOVED",
+  "moved-out": "MOVED"
+};
+var isDeparture = (t) => t === "out" || t === "moved-out";
+var isArrival = (t) => t === "in" || t === "moved-in";
 var LEAVING_HOLD_MS = 2500;
 var TAB_MARK = "\u25CF";
 var tabLabel = (label, marked, id) => marked.size === 0 ? label : `${marked.has(id) ? TAB_MARK : " "} ${label}`;
@@ -1881,11 +1928,11 @@ var ItemRow = ({
     ] });
   if (item.kind === "task") {
     const note = item.note ?? "";
-    const transitIcon = !transient ? " " : transient === "out" ? TRANSIT_OUT_FRAMES[sparkFrame % TRANSIT_OUT_FRAMES.length] : transient === "in" ? TRANSIT_IN_FRAMES[sparkFrame % TRANSIT_IN_FRAMES.length] : "\u25C9";
+    const transitIcon = !transient ? " " : isDeparture(transient) ? TRANSIT_OUT_FRAMES[sparkFrame % TRANSIT_OUT_FRAMES.length] : isArrival(transient) ? TRANSIT_IN_FRAMES[sparkFrame % TRANSIT_IN_FRAMES.length] : "\u25C9";
     const transitLabel2 = transient ? TRANSIT_LABEL[transient] : "";
     const titleMax2 = Math.max(
       20,
-      COLS - item.key.length - note.length - transitLabel2.length - prefix.length - 12
+      COLS - item.key.length - note.length - (item.pill ? pillWidth(item.pill) + 1 : 0) - transitLabel2.length - prefix.length - 12
     );
     return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
       /* @__PURE__ */ jsx(Text2, { color: "cyan", children: active ? "\u276F " : "  " }),
@@ -1896,18 +1943,22 @@ var ItemRow = ({
       /* @__PURE__ */ jsx(
         Text2,
         {
-          bold: active || transient === "in",
-          dimColor: transient === "out",
+          bold: active || !!transient && isArrival(transient),
+          dimColor: !!transient && isDeparture(transient),
           strikethrough: transient === "out",
           children: truncate(item.summary, titleMax2)
         }
       ),
+      item.pill ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text2, { children: " " }),
+        /* @__PURE__ */ jsx(Pill, { variant: item.pillVariant ?? "muted", children: item.pill })
+      ] }) : null,
       note ? /* @__PURE__ */ jsx(Text2, { dimColor: true, children: ` ${note}` }) : null,
       transitLabel2 ? /* @__PURE__ */ jsx(Text2, { bold: true, color: TRANSIT_COLOUR[transient], children: "  " + transitLabel2 }) : null
     ] });
   }
   const { glyph: healthIcon, color: healthColor2 } = healthDisplay[item.health];
-  const icon = merged ? MERGED_FRAMES[sparkFrame % MERGED_FRAMES.length] : transient === "out" ? TRANSIT_OUT_FRAMES[sparkFrame % TRANSIT_OUT_FRAMES.length] : transient === "in" ? TRANSIT_IN_FRAMES[sparkFrame % TRANSIT_IN_FRAMES.length] : healthIcon;
+  const icon = merged ? MERGED_FRAMES[sparkFrame % MERGED_FRAMES.length] : transient && isDeparture(transient) ? TRANSIT_OUT_FRAMES[sparkFrame % TRANSIT_OUT_FRAMES.length] : transient && isArrival(transient) ? TRANSIT_IN_FRAMES[sparkFrame % 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", "#888888"] : ["\u2190", "#FF8700"];
@@ -1936,8 +1987,8 @@ var ItemRow = ({
     /* @__PURE__ */ jsx(
       Text2,
       {
-        bold: active || transient === "in",
-        dimColor: transient === "out",
+        bold: active || !!transient && isArrival(transient),
+        dimColor: !!transient && isDeparture(transient),
         strikethrough: transient === "out",
         children: truncate(item.title, titleMax) + "  "
       }
@@ -2379,11 +2430,12 @@ var BrowseScreen = ({
     const out = /* @__PURE__ */ new Set();
     if (!transients?.size) return out;
     for (const s of localSections)
-      if (s.items.some((item) => transientOf(transients, item))) out.add(s.id);
+      if (s.items.some((item) => transientOf(transients, item, s.id)))
+        out.add(s.id);
     return out;
   }, [localSections, transients]);
   const [sparkFrame, setSparkFrame] = useState(0);
-  const sparkling = (mergedUrls?.length ?? 0) > 0 || (leavingUrls?.length ?? 0) > 0 || !!transients?.size && section.items.some((item) => transientOf(transients, item));
+  const sparkling = (mergedUrls?.length ?? 0) > 0 || (leavingUrls?.length ?? 0) > 0 || !!transients?.size && section.items.some((item) => transientOf(transients, item, section.id));
   useEffect(() => {
     if (!sparkling) return;
     const id = setInterval(() => setSparkFrame((f) => f + 1), MERGED_FRAME_MS);
@@ -2853,7 +2905,7 @@ var BrowseScreen = ({
                 login,
                 merged: (item.kind === "pr" || item.kind === "issue") && !!mergedUrls?.includes(item.url),
                 leaving: (item.kind === "pr" || item.kind === "issue") && !!leavingUrls?.includes(item.url),
-                transient: transientOf(transients, item),
+                transient: transientOf(transients, item, section.id),
                 prefix: treePrefix(section.items, viewStart + i),
                 parent: item.kind === "task" && depthOf(section.items[viewStart + i + 1]) > depthOf(item),
                 sparkFrame,
@@ -2986,7 +3038,12 @@ var App = ({
   const settleTab = (tabId, marks) => {
     const keys = [...transitTabs.current].filter(([, tab]) => tab === tabId).map(([key]) => key);
     for (const key of keys) transitTabs.current.delete(key);
-    const gone = new Set(keys.filter((key) => marks.get(key) === "out"));
+    const gone = new Set(
+      keys.filter((key) => {
+        const mark = marks.get(key);
+        return !!mark && isDeparture(mark);
+      }).map(rowKeyOfMark)
+    );
     setTransients((prev) => {
       const next = new Map(prev);
       for (const key of keys) next.delete(key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/gh-ink",
-  "version": "0.35.0",
+  "version": "0.37.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,7 +49,7 @@
   },
   "dependencies": {
     "@kud/gh": "0.9.0",
-    "@kud/ink-ui": "0.14.0",
+    "@kud/ink-ui": "0.17.0",
     "zx": "8.8.5"
   },
   "devDependencies": {