git-coco 0.62.2 → 0.62.3

package/dist/index.esm.mjs

@@ -61,7 +61,7 @@ import { pathToFileURL } from 'url';
 /**
  * Current build version from package.json
  */
-const BUILD_VERSION = "0.62.2";
+const BUILD_VERSION = "0.62.3";
 
 const isInteractive = (config) => {
     return config?.mode === 'interactive' || !!config?.interactive;
@@ -34351,7 +34351,13 @@ function sidebarTabLabel(tab) {
  * Sliding window keeps the cursor in view as the user navigates a long
  * list; truncation hints surface the count of hidden rows.
  */
-function renderSelectableSidebarRows(h, Text, items, selectedIndex, focused, width, theme, toRowText, keyPrefix, visibleCount) {
+function renderSelectableSidebarRows(h, Text, items, selectedIndex, focused, width, theme, toRowText, keyPrefix, visibleCount, 
+// Optional per-row foreground colour (e.g. the current branch in
+// green). Applied only when the row is NOT the active selection —
+// the selection's inverse/background styling owns the row's colour in
+// that case, and layering a foreground under `inverse` would swap it
+// into an unexpected background tint.
+rowColor) {
     if (items.length === 0)
         return [];
     const window = getSidebarVisibleWindow(items.length, selectedIndex, visibleCount);
@@ -34368,10 +34374,12 @@ function renderSelectableSidebarRows(h, Text, items, selectedIndex, focused, wid
             break;
         const isSelected = focused && index === selectedIndex;
         const text = toRowText(items[index], index);
+        const color = isSelected ? undefined : rowColor?.(items[index], index);
         elements.push(h(Text, {
             key: `${keyPrefix}-row-${index}`,
             backgroundColor: isSelected && !theme.noColor ? theme.colors.selection : undefined,
             inverse: isSelected,
+            color,
         }, truncateCells(`  ${text}`, width - 4)));
     }
     if (window.truncatedBelow > 0) {
@@ -34481,7 +34489,11 @@ function renderActiveSidebarContent(h, Text, tab, state, context, contextStatus,
                     ? spin
                     : branchRowMarker(branch, { ascii: theme.ascii }).glyph;
                 return `${glyph} ${branch.shortName}`;
-            }, 'tab-branches', visibleListCount),
+            }, 'tab-branches', visibleListCount, 
+            // Paint the checked-out branch green so "where am I?" reads at a
+            // glance, matching the green HEAD marker the branches surface
+            // already uses. NO_COLOR themes fall back to the `*` glyph alone.
+            (branch) => (branch.current && !theme.noColor ? theme.colors.success : undefined)),
         ];
     }
     if (tab === 'tags') {
@@ -34982,11 +34994,16 @@ function renderBranchesSurface(ctx, spinnerFrame = 0) {
                 const truncated = truncateCells(fullText, Math.max(20, width - 4));
                 // If truncation chopped into the timestamp/divergence portion,
                 // fall back to a single Text to keep the visible width honest.
+                // The checked-out branch is painted green (matching its green
+                // HEAD marker) so "where am I?" reads at a glance. NO_COLOR
+                // themes fall back to the `*` glyph alone.
+                const currentColor = branch.current && !theme.noColor ? theme.colors.success : undefined;
                 if (truncated !== fullText) {
                     return h(Text, {
                         key: `branch-${index}`,
                         bold: isSelected,
                         dimColor: lineDim,
+                        color: currentColor,
                     }, truncated);
                 }
                 return h(Text, {
@@ -35001,7 +35018,12 @@ function renderBranchesSurface(ctx, spinnerFrame = 0) {
                 // no-upstream kinds return undefined from
                 // `getBranchRowMarkerColor`, so those markers inherit the
                 // row's dim and read as quiet chrome.
-                h(Text, { color: glyphColor, dimColor: glyphColor ? false : undefined }, glyph), trailingName, h(Text, { dimColor: true }, timestampPadded), trailingDivergence);
+                h(Text, { color: glyphColor, dimColor: glyphColor ? false : undefined }, glyph), 
+                // Name span: green for the current branch (dimColor:false keeps
+                // it bright), otherwise it inherits the row's normal styling.
+                currentColor
+                    ? h(Text, { color: currentColor, dimColor: false }, trailingName)
+                    : trailingName, h(Text, { dimColor: true }, timestampPadded), trailingDivergence);
             });
     // Scroll indicators — same "N more above/below" pattern as the
     // sidebar and help overlay so the user knows the list continues.
@@ -38800,6 +38822,15 @@ function renderReflogSurface(ctx) {
  * Extracted from `src/commands/log/inkRuntime.ts` as part of phase 5a.1
  * of #890. No behavior change.
  */
+const GAP = 2; // cells between columns
+/** Truncate to `w` cells, then pad to `w` (left = padEnd, right = padStart). */
+function cell(value, w, align = 'left') {
+    const t = truncateCells(value, w);
+    // padStart/padEnd count code units; refs / ages / counts / branch
+    // names are ASCII in practice, matching the branches surface's
+    // padEnd-based column alignment.
+    return align === 'right' ? t.padStart(w) : t.padEnd(w);
+}
 function renderStashSurface(ctx, spinnerFrame = 0) {
     const { h, components, state, context, contextStatus, bodyRows, width, theme } = ctx;
     const { Box, Text } = components;
@@ -38810,7 +38841,9 @@ function renderStashSurface(ctx, spinnerFrame = 0) {
         ? allStashes.filter((stash) => matchesPromotedFilter([stash.ref, stash.message], state.filter))
         : allStashes;
     const selected = Math.max(0, Math.min(state.selectedStashIndex, Math.max(0, stashes.length - 1)));
-    const listRows = Math.max(4, bodyRows - 4);
+    // One extra row reserved (vs the other surfaces' `- 4`) for the column
+    // header row below.
+    const listRows = Math.max(4, bodyRows - 5);
     const startIndex = Math.max(0, selected - Math.floor(listRows / 2));
     const visible = stashes.slice(startIndex, startIndex + listRows);
     const filterLabel = state.filter ? ` | filter: ${state.filter}` : '';
@@ -38820,10 +38853,67 @@ function renderStashSurface(ctx, spinnerFrame = 0) {
     const emptyLabel = formatLogInkStashEmpty({ filter: state.filter });
     const loadingLabel = formatLogInkLoading({ resource: 'stashes' });
     const now = getRenderNow();
-    // Available width for a row: box width minus the 2-cell horizontal
-    // padding. Truncate to it (with a small floor) instead of a magic 140
-    // so the richer meta degrades gracefully on narrow terminals.
-    const rowWidth = Math.max(20, width - 2);
+    // Usable interior width: panel width minus the border (2) and the
+    // paddingX:1 (2). The previous `width - 2` under-counted the border
+    // and made every near-full row overflow by 2 cells and wrap — the
+    // single biggest readability hit in the old list.
+    const contentWidth = Math.max(20, width - 4);
+    const ageOf = (s) => formatCompactRelativeDate(s.date, now);
+    // Column widths derived from the visible window (#833 pattern) so rows
+    // align without re-measuring the whole list. Each column is at least
+    // as wide as its header label so the header never truncates ("age",
+    // "branch", "files"); age tops out at 5 ("today" is the longest value
+    // formatCompactRelativeDate emits).
+    const refCol = visible.length
+        ? Math.min(11, Math.max(3, ...visible.map((s) => cellWidth(s.ref))))
+        : 9;
+    const ageCol = visible.length
+        ? Math.min(5, Math.max(3, ...visible.map((s) => cellWidth(ageOf(s)))))
+        : 3;
+    const branchColMax = visible.length
+        ? Math.max(0, ...visible.map((s) => cellWidth(s.branch || '')))
+        : 0;
+    const filesCol = visible.length
+        ? Math.max(5, ...visible.map((s) => String(s.files.length).length))
+        : 5;
+    // Responsive degradation. Keep ref + message always; when the message
+    // floor is threatened, shed columns the preview pane already shows —
+    // branch first, then age, then the file count — before squeezing the
+    // message.
+    // Widen to fit the "branch" header when any stash carries a branch;
+    // stays 0 (column dropped) when none do.
+    let branchCol = branchColMax > 0 ? Math.min(18, Math.max(6, branchColMax)) : 0;
+    let showAge = true;
+    let showFiles = true;
+    const fixedWidth = () => 2 + refCol +
+        (showAge ? GAP + ageCol : 0) +
+        (branchCol > 0 ? GAP + branchCol : 0) +
+        (showFiles ? GAP + filesCol : 0) +
+        GAP; // gap before the message column
+    let messageWidth = contentWidth - fixedWidth();
+    if (messageWidth < 24 && branchCol > 0) {
+        branchCol = 0;
+        messageWidth = contentWidth - fixedWidth();
+    }
+    if (messageWidth < 16 && showAge) {
+        showAge = false;
+        messageWidth = contentWidth - fixedWidth();
+    }
+    if (messageWidth < 12 && showFiles) {
+        showFiles = false;
+        messageWidth = contentWidth - fixedWidth();
+    }
+    messageWidth = Math.max(8, messageWidth);
+    // Column header. Right-aligned labels over the right-aligned numeric
+    // columns (age, files) so header and data share an edge.
+    let headerText = `  ${cell('ref', refCol)}`;
+    if (showAge)
+        headerText += `${' '.repeat(GAP)}${cell('age', ageCol, 'right')}`;
+    if (branchCol > 0)
+        headerText += `${' '.repeat(GAP)}${cell('branch', branchCol)}`;
+    if (showFiles)
+        headerText += `${' '.repeat(GAP)}${cell('files', filesCol, 'right')}`;
+    headerText += `${' '.repeat(GAP)}message`;
     const lines = loading
         ? [h(Text, { key: 'stash-loading', dimColor: true }, loadingLabel)]
         : stashes.length === 0
@@ -38832,32 +38922,22 @@ function renderStashSurface(ctx, spinnerFrame = 0) {
                 const index = startIndex + offset;
                 const isSelected = index === selected;
                 const cursor = isSelected ? '>' : ' ';
-                // Surface the metadata the StashEntry already carries — origin
-                // branch, file count, and relative age — between the ref and the
-                // message, so the list answers "which stash is this?" without an
-                // Enter→diff round trip.
-                const age = formatCompactRelativeDate(stash.date, now);
-                const fileCount = stash.files.length;
-                const meta = [
-                    stash.branch ? `on ${stash.branch}` : '',
-                    fileCount > 0 ? `${fileCount} file${fileCount === 1 ? '' : 's'}` : '',
-                    age,
-                ].filter(Boolean).join(' · ');
-                const rowText = meta
-                    ? `${cursor} ${stash.ref.padEnd(11)} ${meta}  ${stash.message}`
-                    : `${cursor} ${stash.ref.padEnd(11)} ${stash.message}`;
+                const deleting = isPendingItemAction(state.pendingItemAction, 'stash', stash.ref);
                 // The `stash@{N}` ref is an identifier, not a status icon, so a
                 // delete-in-flight appends an accent spinner at the row's end
-                // (2 cells reserved from the width budget).
-                const deleting = isPendingItemAction(state.pendingItemAction, 'stash', stash.ref);
+                // (2 cells reserved from the message budget).
                 const spinnerSpan = deleting
                     ? h(Text, { color: theme.noColor ? undefined : theme.colors.accent, dimColor: false }, ` ${inlineSpinnerGlyph(spinnerFrame, theme.ascii)}`)
                     : null;
+                const message = truncateCells(stash.message, messageWidth - (deleting ? 2 : 0));
+                // ref + message read as primary; age / branch / file-count are
+                // dim metadata (kept dim even on the bold selected row so the
+                // message stays the focal point).
                 return h(Text, {
                     key: `stash-${index}`,
                     bold: isSelected,
                     dimColor: !isSelected,
-                }, truncateCells(rowText, rowWidth - (deleting ? 2 : 0)), spinnerSpan);
+                }, `${cursor} `, cell(stash.ref, refCol), showAge ? h(Text, { dimColor: true }, `${' '.repeat(GAP)}${cell(ageOf(stash), ageCol, 'right')}`) : null, branchCol > 0 ? h(Text, { dimColor: true }, `${' '.repeat(GAP)}${cell(stash.branch || '', branchCol)}`) : null, showFiles ? h(Text, { dimColor: true }, `${' '.repeat(GAP)}${cell(String(stash.files.length), filesCol, 'right')}`) : null, `${' '.repeat(GAP)}${message}`, spinnerSpan);
             });
     const stashHasMoreAbove = startIndex > 0 && stashes.length > 0;
     const stashHasMoreBelow = startIndex + listRows < stashes.length;
@@ -38868,7 +38948,11 @@ function renderStashSurface(ctx, spinnerFrame = 0) {
         flexShrink: 0,
         paddingX: 1,
         width,
-    }, h(Box, { justifyContent: 'space-between' }, h(Text, { bold: true }, panelTitle('Stash', focused)), h(Text, { dimColor: true }, headerRight)), ...renderPromotedFilterAffordance(h, Text, state, theme), ...(stashHasMoreAbove
+    }, h(Box, { justifyContent: 'space-between' }, h(Text, { bold: true }, panelTitle('Stash', focused)), h(Text, { dimColor: true }, headerRight)), ...renderPromotedFilterAffordance(h, Text, state, theme), 
+    // Column header — only when there are rows to label.
+    ...(!loading && stashes.length > 0
+        ? [h(Text, { key: 'stash-col-header', dimColor: true }, truncateCells(headerText, contentWidth))]
+        : []), ...(stashHasMoreAbove
         ? [h(Text, { key: 'stash-more-above', dimColor: true }, `  ↑ ${startIndex} more above`)]
         : []), ...lines, ...(stashHasMoreBelow
         ? [h(Text, { key: 'stash-more-below', dimColor: true }, `  ↓ ${stashes.length - (startIndex + listRows)} more below`)]

package/dist/index.js

@@ -78,7 +78,7 @@ var readline__namespace = /*#__PURE__*/_interopNamespaceDefault(readline);
 /**
  * Current build version from package.json
  */
-const BUILD_VERSION = "0.62.2";
+const BUILD_VERSION = "0.62.3";
 
 const isInteractive = (config) => {
     return config?.mode === 'interactive' || !!config?.interactive;
@@ -34368,7 +34368,13 @@ function sidebarTabLabel(tab) {
  * Sliding window keeps the cursor in view as the user navigates a long
  * list; truncation hints surface the count of hidden rows.
  */
-function renderSelectableSidebarRows(h, Text, items, selectedIndex, focused, width, theme, toRowText, keyPrefix, visibleCount) {
+function renderSelectableSidebarRows(h, Text, items, selectedIndex, focused, width, theme, toRowText, keyPrefix, visibleCount, 
+// Optional per-row foreground colour (e.g. the current branch in
+// green). Applied only when the row is NOT the active selection —
+// the selection's inverse/background styling owns the row's colour in
+// that case, and layering a foreground under `inverse` would swap it
+// into an unexpected background tint.
+rowColor) {
     if (items.length === 0)
         return [];
     const window = getSidebarVisibleWindow(items.length, selectedIndex, visibleCount);
@@ -34385,10 +34391,12 @@ function renderSelectableSidebarRows(h, Text, items, selectedIndex, focused, wid
             break;
         const isSelected = focused && index === selectedIndex;
         const text = toRowText(items[index], index);
+        const color = isSelected ? undefined : rowColor?.(items[index], index);
         elements.push(h(Text, {
             key: `${keyPrefix}-row-${index}`,
             backgroundColor: isSelected && !theme.noColor ? theme.colors.selection : undefined,
             inverse: isSelected,
+            color,
         }, truncateCells(`  ${text}`, width - 4)));
     }
     if (window.truncatedBelow > 0) {
@@ -34498,7 +34506,11 @@ function renderActiveSidebarContent(h, Text, tab, state, context, contextStatus,
                     ? spin
                     : branchRowMarker(branch, { ascii: theme.ascii }).glyph;
                 return `${glyph} ${branch.shortName}`;
-            }, 'tab-branches', visibleListCount),
+            }, 'tab-branches', visibleListCount, 
+            // Paint the checked-out branch green so "where am I?" reads at a
+            // glance, matching the green HEAD marker the branches surface
+            // already uses. NO_COLOR themes fall back to the `*` glyph alone.
+            (branch) => (branch.current && !theme.noColor ? theme.colors.success : undefined)),
         ];
     }
     if (tab === 'tags') {
@@ -34999,11 +35011,16 @@ function renderBranchesSurface(ctx, spinnerFrame = 0) {
                 const truncated = truncateCells(fullText, Math.max(20, width - 4));
                 // If truncation chopped into the timestamp/divergence portion,
                 // fall back to a single Text to keep the visible width honest.
+                // The checked-out branch is painted green (matching its green
+                // HEAD marker) so "where am I?" reads at a glance. NO_COLOR
+                // themes fall back to the `*` glyph alone.
+                const currentColor = branch.current && !theme.noColor ? theme.colors.success : undefined;
                 if (truncated !== fullText) {
                     return h(Text, {
                         key: `branch-${index}`,
                         bold: isSelected,
                         dimColor: lineDim,
+                        color: currentColor,
                     }, truncated);
                 }
                 return h(Text, {
@@ -35018,7 +35035,12 @@ function renderBranchesSurface(ctx, spinnerFrame = 0) {
                 // no-upstream kinds return undefined from
                 // `getBranchRowMarkerColor`, so those markers inherit the
                 // row's dim and read as quiet chrome.
-                h(Text, { color: glyphColor, dimColor: glyphColor ? false : undefined }, glyph), trailingName, h(Text, { dimColor: true }, timestampPadded), trailingDivergence);
+                h(Text, { color: glyphColor, dimColor: glyphColor ? false : undefined }, glyph), 
+                // Name span: green for the current branch (dimColor:false keeps
+                // it bright), otherwise it inherits the row's normal styling.
+                currentColor
+                    ? h(Text, { color: currentColor, dimColor: false }, trailingName)
+                    : trailingName, h(Text, { dimColor: true }, timestampPadded), trailingDivergence);
             });
     // Scroll indicators — same "N more above/below" pattern as the
     // sidebar and help overlay so the user knows the list continues.
@@ -38817,6 +38839,15 @@ function renderReflogSurface(ctx) {
  * Extracted from `src/commands/log/inkRuntime.ts` as part of phase 5a.1
  * of #890. No behavior change.
  */
+const GAP = 2; // cells between columns
+/** Truncate to `w` cells, then pad to `w` (left = padEnd, right = padStart). */
+function cell(value, w, align = 'left') {
+    const t = truncateCells(value, w);
+    // padStart/padEnd count code units; refs / ages / counts / branch
+    // names are ASCII in practice, matching the branches surface's
+    // padEnd-based column alignment.
+    return align === 'right' ? t.padStart(w) : t.padEnd(w);
+}
 function renderStashSurface(ctx, spinnerFrame = 0) {
     const { h, components, state, context, contextStatus, bodyRows, width, theme } = ctx;
     const { Box, Text } = components;
@@ -38827,7 +38858,9 @@ function renderStashSurface(ctx, spinnerFrame = 0) {
         ? allStashes.filter((stash) => matchesPromotedFilter([stash.ref, stash.message], state.filter))
         : allStashes;
     const selected = Math.max(0, Math.min(state.selectedStashIndex, Math.max(0, stashes.length - 1)));
-    const listRows = Math.max(4, bodyRows - 4);
+    // One extra row reserved (vs the other surfaces' `- 4`) for the column
+    // header row below.
+    const listRows = Math.max(4, bodyRows - 5);
     const startIndex = Math.max(0, selected - Math.floor(listRows / 2));
     const visible = stashes.slice(startIndex, startIndex + listRows);
     const filterLabel = state.filter ? ` | filter: ${state.filter}` : '';
@@ -38837,10 +38870,67 @@ function renderStashSurface(ctx, spinnerFrame = 0) {
     const emptyLabel = formatLogInkStashEmpty({ filter: state.filter });
     const loadingLabel = formatLogInkLoading({ resource: 'stashes' });
     const now = getRenderNow();
-    // Available width for a row: box width minus the 2-cell horizontal
-    // padding. Truncate to it (with a small floor) instead of a magic 140
-    // so the richer meta degrades gracefully on narrow terminals.
-    const rowWidth = Math.max(20, width - 2);
+    // Usable interior width: panel width minus the border (2) and the
+    // paddingX:1 (2). The previous `width - 2` under-counted the border
+    // and made every near-full row overflow by 2 cells and wrap — the
+    // single biggest readability hit in the old list.
+    const contentWidth = Math.max(20, width - 4);
+    const ageOf = (s) => formatCompactRelativeDate(s.date, now);
+    // Column widths derived from the visible window (#833 pattern) so rows
+    // align without re-measuring the whole list. Each column is at least
+    // as wide as its header label so the header never truncates ("age",
+    // "branch", "files"); age tops out at 5 ("today" is the longest value
+    // formatCompactRelativeDate emits).
+    const refCol = visible.length
+        ? Math.min(11, Math.max(3, ...visible.map((s) => cellWidth(s.ref))))
+        : 9;
+    const ageCol = visible.length
+        ? Math.min(5, Math.max(3, ...visible.map((s) => cellWidth(ageOf(s)))))
+        : 3;
+    const branchColMax = visible.length
+        ? Math.max(0, ...visible.map((s) => cellWidth(s.branch || '')))
+        : 0;
+    const filesCol = visible.length
+        ? Math.max(5, ...visible.map((s) => String(s.files.length).length))
+        : 5;
+    // Responsive degradation. Keep ref + message always; when the message
+    // floor is threatened, shed columns the preview pane already shows —
+    // branch first, then age, then the file count — before squeezing the
+    // message.
+    // Widen to fit the "branch" header when any stash carries a branch;
+    // stays 0 (column dropped) when none do.
+    let branchCol = branchColMax > 0 ? Math.min(18, Math.max(6, branchColMax)) : 0;
+    let showAge = true;
+    let showFiles = true;
+    const fixedWidth = () => 2 + refCol +
+        (showAge ? GAP + ageCol : 0) +
+        (branchCol > 0 ? GAP + branchCol : 0) +
+        (showFiles ? GAP + filesCol : 0) +
+        GAP; // gap before the message column
+    let messageWidth = contentWidth - fixedWidth();
+    if (messageWidth < 24 && branchCol > 0) {
+        branchCol = 0;
+        messageWidth = contentWidth - fixedWidth();
+    }
+    if (messageWidth < 16 && showAge) {
+        showAge = false;
+        messageWidth = contentWidth - fixedWidth();
+    }
+    if (messageWidth < 12 && showFiles) {
+        showFiles = false;
+        messageWidth = contentWidth - fixedWidth();
+    }
+    messageWidth = Math.max(8, messageWidth);
+    // Column header. Right-aligned labels over the right-aligned numeric
+    // columns (age, files) so header and data share an edge.
+    let headerText = `  ${cell('ref', refCol)}`;
+    if (showAge)
+        headerText += `${' '.repeat(GAP)}${cell('age', ageCol, 'right')}`;
+    if (branchCol > 0)
+        headerText += `${' '.repeat(GAP)}${cell('branch', branchCol)}`;
+    if (showFiles)
+        headerText += `${' '.repeat(GAP)}${cell('files', filesCol, 'right')}`;
+    headerText += `${' '.repeat(GAP)}message`;
     const lines = loading
         ? [h(Text, { key: 'stash-loading', dimColor: true }, loadingLabel)]
         : stashes.length === 0
@@ -38849,32 +38939,22 @@ function renderStashSurface(ctx, spinnerFrame = 0) {
                 const index = startIndex + offset;
                 const isSelected = index === selected;
                 const cursor = isSelected ? '>' : ' ';
-                // Surface the metadata the StashEntry already carries — origin
-                // branch, file count, and relative age — between the ref and the
-                // message, so the list answers "which stash is this?" without an
-                // Enter→diff round trip.
-                const age = formatCompactRelativeDate(stash.date, now);
-                const fileCount = stash.files.length;
-                const meta = [
-                    stash.branch ? `on ${stash.branch}` : '',
-                    fileCount > 0 ? `${fileCount} file${fileCount === 1 ? '' : 's'}` : '',
-                    age,
-                ].filter(Boolean).join(' · ');
-                const rowText = meta
-                    ? `${cursor} ${stash.ref.padEnd(11)} ${meta}  ${stash.message}`
-                    : `${cursor} ${stash.ref.padEnd(11)} ${stash.message}`;
+                const deleting = isPendingItemAction(state.pendingItemAction, 'stash', stash.ref);
                 // The `stash@{N}` ref is an identifier, not a status icon, so a
                 // delete-in-flight appends an accent spinner at the row's end
-                // (2 cells reserved from the width budget).
-                const deleting = isPendingItemAction(state.pendingItemAction, 'stash', stash.ref);
+                // (2 cells reserved from the message budget).
                 const spinnerSpan = deleting
                     ? h(Text, { color: theme.noColor ? undefined : theme.colors.accent, dimColor: false }, ` ${inlineSpinnerGlyph(spinnerFrame, theme.ascii)}`)
                     : null;
+                const message = truncateCells(stash.message, messageWidth - (deleting ? 2 : 0));
+                // ref + message read as primary; age / branch / file-count are
+                // dim metadata (kept dim even on the bold selected row so the
+                // message stays the focal point).
                 return h(Text, {
                     key: `stash-${index}`,
                     bold: isSelected,
                     dimColor: !isSelected,
-                }, truncateCells(rowText, rowWidth - (deleting ? 2 : 0)), spinnerSpan);
+                }, `${cursor} `, cell(stash.ref, refCol), showAge ? h(Text, { dimColor: true }, `${' '.repeat(GAP)}${cell(ageOf(stash), ageCol, 'right')}`) : null, branchCol > 0 ? h(Text, { dimColor: true }, `${' '.repeat(GAP)}${cell(stash.branch || '', branchCol)}`) : null, showFiles ? h(Text, { dimColor: true }, `${' '.repeat(GAP)}${cell(String(stash.files.length), filesCol, 'right')}`) : null, `${' '.repeat(GAP)}${message}`, spinnerSpan);
             });
     const stashHasMoreAbove = startIndex > 0 && stashes.length > 0;
     const stashHasMoreBelow = startIndex + listRows < stashes.length;
@@ -38885,7 +38965,11 @@ function renderStashSurface(ctx, spinnerFrame = 0) {
         flexShrink: 0,
         paddingX: 1,
         width,
-    }, h(Box, { justifyContent: 'space-between' }, h(Text, { bold: true }, panelTitle('Stash', focused)), h(Text, { dimColor: true }, headerRight)), ...renderPromotedFilterAffordance(h, Text, state, theme), ...(stashHasMoreAbove
+    }, h(Box, { justifyContent: 'space-between' }, h(Text, { bold: true }, panelTitle('Stash', focused)), h(Text, { dimColor: true }, headerRight)), ...renderPromotedFilterAffordance(h, Text, state, theme), 
+    // Column header — only when there are rows to label.
+    ...(!loading && stashes.length > 0
+        ? [h(Text, { key: 'stash-col-header', dimColor: true }, truncateCells(headerText, contentWidth))]
+        : []), ...(stashHasMoreAbove
         ? [h(Text, { key: 'stash-more-above', dimColor: true }, `  ↑ ${startIndex} more above`)]
         : []), ...lines, ...(stashHasMoreBelow
         ? [h(Text, { key: 'stash-more-below', dimColor: true }, `  ↓ ${stashes.length - (startIndex + listRows)} more below`)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-coco",
-  "version": "0.62.2",
+  "version": "0.62.3",
   "description": "zero-effort git commits with coco.",
   "author": "gfargo <ghfargo@gmail.com>",
   "license": "MIT",