@kud/gh-ink 0.41.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(
       1,
-      cols - item.key.length - note.length - (item.pill ? pillWidth(item.pill) + 1 : 0) - (transitLabel2 ? pillWidth(transitLabel2) : 0) - prefix.length - 12
+      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,14 +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__ */ jsxs(Fragment, { children: [
+      farewellLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text3, { children: "  " }),
-        /* @__PURE__ */ jsx(Pill, { color: TRANSIT_COLOUR[transient], children: transitLabel2 })
+        /* @__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"];
@@ -2043,8 +2038,7 @@ 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 pillCaps = [mergedLabel, transitLabel].filter(Boolean).length * 2;
+  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 = () => {
@@ -2052,8 +2046,7 @@ var ItemRow = ({
       givingUp.age ? "" : ageLabel || "",
       givingUp.threads ? "" : unresolvedLabel,
       showAuthor && !givingUp.author ? `by ${item.author}` : "",
-      mergedLabel,
-      transitLabel
+      mergedLabel
     ].filter(Boolean).join("  ");
     return 2 + prefix.length + 2 + 2 + 7 + (givingUp.repo ? 0 : repoLabel.length) + suffix2.length + pillCaps + 6;
   };
@@ -2072,7 +2065,7 @@ var ItemRow = ({
     givingUp.threads ? "" : unresolvedLabel,
     showAuthor && !givingUp.author ? `by ${item.author}` : "",
     mergedLabel,
-    transitLabel
+    farewellLabel
   ].filter(Boolean).join("  ");
   const titleMax = Math.max(1, cols - widthOf2());
   return /* @__PURE__ */ jsxs(Box, { children: [
@@ -2098,9 +2091,9 @@ var ItemRow = ({
       /* @__PURE__ */ jsx(Text3, { children: "  " }),
       /* @__PURE__ */ jsx(Pill, { color: MERGED_COLOUR, children: mergedLabel })
     ] }) : null,
-    transitLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    farewellLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Text3, { children: "  " }),
-      /* @__PURE__ */ jsx(Pill, { color: TRANSIT_COLOUR[transient], children: transitLabel })
+      /* @__PURE__ */ jsx(Pill, { color: TRANSIT_COLOUR.out, children: farewellLabel })
     ] }) : null
   ] });
 };
@@ -2419,6 +2412,7 @@ var BrowseScreen = ({
   refreshing,
   hasPending,
   pendingSummary,
+  appliedSummary,
   fetchedAt,
   refreshError,
   hidden,
@@ -2547,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);
@@ -3029,6 +3028,7 @@ var BrowseScreen = ({
             refreshing,
             hasPending,
             pendingSummary,
+            appliedSummary,
             fetchedAt
           }
         ),
@@ -3043,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"
             }))
           }
         ) }),
@@ -3203,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);
@@ -3211,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;
@@ -3407,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([]);
@@ -3503,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.41.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.18.0",
+    "@kud/ink-ui": "0.19.0",
     "zx": "8.8.5"
   },
   "devDependencies": {