@kud/gh-ink 0.40.0 → 0.42.0

package/dist/index.js

@@ -1842,6 +1842,7 @@ var InboxHeader = ({
   refreshing,
   hasPending,
   pendingSummary,
+  appliedSummary,
   fetchedAt
 }) => {
   const total = sections.reduce((n, s) => n + topLevelCount(s), 0);
@@ -1849,7 +1850,7 @@ 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"] : fetchedAt ? [`updated ${agoText(fetchedAt)}`, void 0] : ["", void 0];
+  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 statusSeg = statusText ? statusText + "  " : "";
   const fill = Math.max(
     4,
@@ -1934,6 +1935,7 @@ var MERGED_FRAME_MS = 150;
 var MERGED_FRAMES = ["\u2726", "\u2727", "\u2736", "\u2727"];
 var MERGED_COLOUR = "#A371F7";
 var TRANSIT_HOLD_MS = 7e3;
+var TRANSIT_FRAME_TICKS = 3;
 var NO_TRANSIENTS = /* @__PURE__ */ new Map();
 var NO_HOLDS = /* @__PURE__ */ new Map();
 var TRANSIT_OUT_FRAMES = ["\u25C9", "\u25CE", "\u25CB", "\xB7"];
@@ -1950,20 +1952,12 @@ var TRANSIT_COLOUR = {
   "moved-out": "#FF8700"
 };
 var TRANSIT_LABEL = {
-  in: "NEW",
-  out: "GONE",
-  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"
-};
+  out: "GONE"};
 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}`;
+var tabMarker = (marked, id, frame = 0) => marked.has(id) ? `${TAB_PULSE[frame % TAB_PULSE.length]} ` : "  ";
+var TAB_PULSE = ["\xB7", "\u25CB", "\u25CE", "\u25C9"];
 var ItemRow = ({
   item,
   active,
@@ -1978,6 +1972,8 @@ var ItemRow = ({
   cols = COLS
 }) => {
   const transient = leaving ? "out" : refreshMark;
+  const transitFrame = Math.floor(sparkFrame / TRANSIT_FRAME_TICKS);
+  const farewellLabel = leaving ? TRANSIT_LABEL.out : "";
   if (item.kind === "repo-header")
     return /* @__PURE__ */ jsx(RepoHeaderRow, { repo: item.repo, gap: gap ?? false, active });
   if (item.kind === "subgroup-header")
@@ -2001,11 +1997,10 @@ var ItemRow = ({
     ] });
   if (item.kind === "task") {
     const note = item.note ?? "";
-    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 transitIcon = !transient ? " " : isDeparture(transient) ? TRANSIT_OUT_FRAMES[transitFrame % TRANSIT_OUT_FRAMES.length] : isArrival(transient) ? TRANSIT_IN_FRAMES[transitFrame % TRANSIT_IN_FRAMES.length] : "\u25C9";
     const titleMax2 = Math.max(
-      20,
-      cols - item.key.length - note.length - (item.pill ? pillWidth(item.pill) + 1 : 0) - transitLabel2.length - prefix.length - 12
+      1,
+      cols - item.key.length - note.length - (item.pill ? pillWidth(item.pill) + 1 : 0) - (farewellLabel ? pillWidth(farewellLabel) + 2 : 0) - prefix.length - 12
     );
     return /* @__PURE__ */ jsxs(Box, { marginTop: gap ? 1 : 0, children: [
       /* @__PURE__ */ jsx(Text3, { color: "cyan", children: active ? "\u276F " : "  " }),
@@ -2027,11 +2022,14 @@ var ItemRow = ({
         /* @__PURE__ */ jsx(Pill, { variant: item.pillVariant ?? "muted", children: item.pill })
       ] }) : null,
       note ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: ` ${note}` }) : null,
-      transitLabel2 ? /* @__PURE__ */ jsx(Text3, { bold: true, color: TRANSIT_COLOUR[transient], children: "  " + transitLabel2 }) : null
+      farewellLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text3, { children: "  " }),
+        /* @__PURE__ */ jsx(Pill, { color: TRANSIT_COLOUR.out, children: farewellLabel })
+      ] }) : null
     ] });
   }
   const { glyph: healthIcon, color: healthColor2 } = healthDisplay[item.health];
-  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 icon = merged ? MERGED_FRAMES[sparkFrame % MERGED_FRAMES.length] : transient && isDeparture(transient) ? TRANSIT_OUT_FRAMES[transitFrame % TRANSIT_OUT_FRAMES.length] : transient && isArrival(transient) ? TRANSIT_IN_FRAMES[transitFrame % 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"];
@@ -2040,17 +2038,36 @@ var ItemRow = ({
   const unresolvedLabel = item.unresolved > 0 ? `\uF086 ${item.unresolved}` : "";
   const ageLabel = item.activityAge && item.activityAge !== item.age ? `${item.activityAge} \xB7 ${item.age}` : item.age;
   const mergedLabel = merged ? "MERGED" : "";
-  const transitLabel = merged || !transient ? "" : TRANSIT_LABEL[transient];
-  const suffix = [
-    ageLabel || "",
-    unresolvedLabel,
-    showAuthor ? `by ${item.author}` : "",
+  const pillCaps = [mergedLabel, farewellLabel].filter(Boolean).length * 2;
+  const repoLabel = depthOf(item) > 0 ? item.repo : "";
+  const givingUp = { author: false, threads: false, age: false, repo: false };
+  const widthOf2 = () => {
+    const suffix2 = [
+      givingUp.age ? "" : ageLabel || "",
+      givingUp.threads ? "" : unresolvedLabel,
+      showAuthor && !givingUp.author ? `by ${item.author}` : "",
+      mergedLabel
+    ].filter(Boolean).join("  ");
+    return 2 + prefix.length + 2 + 2 + 7 + (givingUp.repo ? 0 : repoLabel.length) + suffix2.length + pillCaps + 6;
+  };
+  const MIN_TITLE = 24;
+  for (const give of [
+    () => givingUp.author = true,
+    () => givingUp.threads = true,
+    () => givingUp.repo = true,
+    () => givingUp.age = true
+  ]) {
+    if (cols - widthOf2() >= MIN_TITLE) break;
+    give();
+  }
+  [
+    givingUp.age ? "" : ageLabel || "",
+    givingUp.threads ? "" : unresolvedLabel,
+    showAuthor && !givingUp.author ? `by ${item.author}` : "",
     mergedLabel,
-    transitLabel
+    farewellLabel
   ].filter(Boolean).join("  ");
-  const repoLabel = depthOf(item) > 0 ? item.repo : "";
-  const fixedWidth = 2 + prefix.length + 2 + 2 + 7 + repoLabel.length + suffix.length + 6;
-  const titleMax = Math.max(20, cols - fixedWidth);
+  const titleMax = Math.max(1, cols - widthOf2());
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(Text3, { color: "cyan", children: active ? "\u276F " : "  " }),
     /* @__PURE__ */ jsx(Text3, { dimColor: true, children: prefix }),
@@ -2066,12 +2083,18 @@ var ItemRow = ({
         children: truncate2(item.title, titleMax) + "  "
       }
     ),
-    repoLabel ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: repoLabel }) : null,
-    unresolvedLabel ? /* @__PURE__ */ jsx(Text3, { bold: !spokeLast, color: spokeLast ? "#888888" : "#FF8700", children: "  " + unresolvedLabel }) : null,
-    showAuthor ? /* @__PURE__ */ jsx(Text3, { dimColor: true, italic: true, children: "  by " + item.author }) : null,
-    ageLabel ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: "  " + ageLabel }) : null,
-    mergedLabel ? /* @__PURE__ */ jsx(Text3, { bold: true, color: MERGED_COLOUR, children: "  " + mergedLabel }) : null,
-    transitLabel ? /* @__PURE__ */ jsx(Text3, { bold: true, color: TRANSIT_COLOUR[transient], children: "  " + transitLabel }) : null
+    repoLabel && !givingUp.repo ? /* @__PURE__ */ jsx(Text3, { dimColor: true, children: repoLabel }) : null,
+    unresolvedLabel && !givingUp.threads ? /* @__PURE__ */ jsx(Text3, { bold: !spokeLast, color: spokeLast ? "#888888" : "#FF8700", 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 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text3, { children: "  " }),
+      /* @__PURE__ */ jsx(Pill, { color: MERGED_COLOUR, children: mergedLabel })
+    ] }) : null,
+    farewellLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text3, { children: "  " }),
+      /* @__PURE__ */ jsx(Pill, { color: TRANSIT_COLOUR.out, children: farewellLabel })
+    ] }) : null
   ] });
 };
 var useActionMenu = () => {
@@ -2389,6 +2412,7 @@ var BrowseScreen = ({
   refreshing,
   hasPending,
   pendingSummary,
+  appliedSummary,
   fetchedAt,
   refreshError,
   hidden,
@@ -2517,7 +2541,12 @@ var BrowseScreen = ({
   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));
+  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
+  // exactly wrong now it lives on the bar: a tab you are not looking at is the
+  // whole case the pulse exists for — a marker inside it cannot be seen at all
+  // — and a ticker gated on the visible tab would leave that dot sitting still.
+  markedTabs.size > 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);
@@ -2999,6 +3028,7 @@ var BrowseScreen = ({
             refreshing,
             hasPending,
             pendingSummary,
+            appliedSummary,
             fetchedAt
           }
         ),
@@ -3013,8 +3043,16 @@ var BrowseScreen = ({
             active: section.id,
             items: localSections.map((s) => ({
               value: s.id,
-              label: tabLabel(s.label, markedTabs, s.id),
-              count: topLevelCount(s)
+              label: s.label,
+              count: topLevelCount(s),
+              // Its own cell, always two wide, so news arriving never slides the
+              // bar — and free to animate for exactly that reason.
+              marker: tabMarker(
+                markedTabs,
+                s.id,
+                Math.floor(sparkFrame / TRANSIT_FRAME_TICKS)
+              ),
+              markerColor: "#FF8700"
             }))
           }
         ) }),
@@ -3173,7 +3211,8 @@ var App = ({
       setState({ phase: "browse", sections, login });
       return;
     }
-    const { transients: fresh, union } = diffSections(before, sections);
+    const { transients: fresh, union, counts: counts2 } = diffSections(before, sections);
+    setAppliedSummary(summariseDiff(counts2));
     const marks = new Map(fresh);
     for (const [key, mark] of transients)
       if (!marks.has(key)) marks.set(key, mark);
@@ -3181,6 +3220,7 @@ var App = ({
     for (const key of [...marks.keys()]) if (!tabs.has(key)) marks.delete(key);
     if (marks.size === 0) {
       transitTabs.current = /* @__PURE__ */ new Map();
+      setAppliedSummary("");
       setTransients(NO_TRANSIENTS);
       setState({ phase: "browse", sections, login });
       return;
@@ -3377,6 +3417,7 @@ var App = ({
   const [budget, setBudget] = useState(
     () => cacheKey ? readCache(cacheKey)?.budget ?? null : null
   );
+  const [appliedSummary, setAppliedSummary] = useState("");
   const [sidebar, setSidebar] = useState(void 0);
   const [skippedForBudget, setSkippedForBudget] = useState(false);
   const [mergedUrls, setMergedUrls] = useState([]);
@@ -3473,6 +3514,7 @@ var App = ({
         refreshing,
         hasPending: pending !== null,
         pendingSummary,
+        appliedSummary: transients.size > 0 ? appliedSummary : "",
         fetchedAt,
         refreshError: refreshError ?? void 0,
         origin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/gh-ink",
-  "version": "0.40.0",
+  "version": "0.42.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.17.0",
+    "@kud/ink-ui": "0.19.0",
     "zx": "8.8.5"
   },
   "devDependencies": {