@cueloop/client 0.1.0-alpha.67 → 0.1.0-alpha.69

package/src/components/ChangesColumn.tsx

@@ -3,6 +3,7 @@
 // so the diff reclaims the width. Mirrors the left Threads column on the far side.
 // Co-located here: the state hook that opens it by context and the header toggle.
 
+import { ScrollArea } from "./ScrollArea";
 import React, { useMemo, useState } from "react";
 import type { DiffFileContents, ReviewSession } from "@cueloop/schema";
 import type { Theme } from "../theme";
@@ -115,7 +116,7 @@ export function ChangesFileTree({
   }, [nodes, collapsedIds]);
 
   return (
-    <scrollbox style={{ flexGrow: 1 }} focused={false}>
+    <ScrollArea>
       <Tree
         nodes={nodes}
         expandedIds={expandedIds}
@@ -135,7 +136,7 @@ export function ChangesFileTree({
         }
         theme={theme}
       />
-    </scrollbox>
+    </ScrollArea>
   );
 }
 

package/src/components/{DiffSheet.scroll.test.tsx → DiffContentView.scroll.test.tsx}

@@ -5,7 +5,7 @@ import React from "react";
 import { testRender } from "@opentui/react/test-utils";
 import { ScrollBoxRenderable, type Renderable } from "@opentui/core";
 import type { Annotation } from "@cueloop/schema";
-import { DiffSheet } from "./DiffSheet";
+import { DiffContentView } from "./DiffContentView";
 import { diffRows, marksByRows } from "../view-diff";
 import { DARK } from "../theme";
 import { annotationPaletteFor } from "../annotation-palette";
@@ -63,7 +63,7 @@ test("walking the caret down past wrapped discussion cards keeps it on screen an
     createdAt: "2026-01-01T00:00:00Z",
   }));
   const setup = await testRender(
-    <DiffSheet
+    <DiffContentView
       rows={rows}
       session={fixtureDiffSession({ annotations })}
       marks={marksByRows(annotations, rows)}

package/src/components/{DiffSheet.split.test.tsx → DiffContentView.split.test.tsx}

@@ -7,7 +7,7 @@
 import { describe, expect, test } from "bun:test";
 import { testRender } from "@opentui/react/test-utils";
 import React from "react";
-import { DiffSheet } from "./DiffSheet";
+import { DiffContentView } from "./DiffContentView";
 import { diffRows } from "../view-diff";
 import { allowEventLoopUpdates } from "../test-support";
 import { fixtureDiffSession } from "./story-fixtures";
@@ -37,7 +37,7 @@ const WRAPPING_PATCH = `diff --git a/app.ts b/app.ts
 
 async function splitFrameLines(width: number): Promise<string[]> {
   const setup = await testRender(
-    <DiffSheet
+    <DiffContentView
       rows={diffRows(WRAPPING_PATCH)}
       session={fixtureDiffSession()}
       marks={new Map()}
@@ -65,7 +65,7 @@ describe("split diff rendering", () => {
   test("the caret marks only the change side, not both columns", async () => {
     // Arrange - the caret opens on a context row, which is shown in both columns
     const setup = await testRender(
-      <DiffSheet
+      <DiffContentView
         rows={diffRows(WRAPPING_PATCH)}
         session={fixtureDiffSession()}
         marks={new Map()}

package/src/components/{DiffSheet.stories.tsx → DiffContentView.stories.tsx}

@@ -5,10 +5,10 @@ import { annotationPaletteFor } from "../annotation-palette";
 import { DEFAULT_QUICK_ACTIONS } from "../config";
 import { marksByRows } from "../view-diff";
 import type { Story, StoryMeta } from "./story";
-import { DiffSheet } from "./DiffSheet";
+import { DiffContentView } from "./DiffContentView";
 import { fixtureDiffRows, fixtureDiffSession } from "./story-fixtures";
 
-export const meta: StoryMeta = { title: "Surfaces/DiffSheet" };
+export const meta: StoryMeta = { title: "Surfaces/DiffContentView" };
 
 const palette = annotationPaletteFor(DARK);
 const noop = (): void => {};
@@ -27,7 +27,7 @@ function sheet(annotations: Annotation[], split = false): React.ReactNode {
   const session = fixtureDiffSession({ annotations });
 
   return (
-    <DiffSheet
+    <DiffContentView
       rows={rows}
       session={session}
       marks={marksByRows(annotations, rows)}

package/src/components/{DiffSheet.syntax.test.tsx → DiffContentView.syntax.test.tsx}

@@ -2,7 +2,7 @@ import { afterEach, beforeEach, expect, test } from "bun:test";
 import { testRender } from "@opentui/react/test-utils";
 import type { RGBA } from "@opentui/core";
 import React from "react";
-import { DiffSheet } from "./DiffSheet";
+import { DiffContentView } from "./DiffContentView";
 import { fixtureDiffSession } from "./story-fixtures";
 import { diffRows } from "../view-diff";
 import { DARK } from "../theme";
@@ -31,7 +31,7 @@ test("renders tree-sitter colors, with the changed word in the diff color on top
   // Arrange
   const noop = (): void => {};
   const setup = await testRender(
-    <DiffSheet
+    <DiffContentView
       rows={diffRows(PATCH)}
       session={fixtureDiffSession()}
       marks={new Map()}

package/src/components/{DiffSheet.tsx → DiffContentView.tsx}

@@ -27,7 +27,7 @@ import { useFrameMeasure } from "../use-frame-measure";
 import { useTerminalVirtualizer } from "../use-terminal-virtualizer";
 import { useAnnotationSurface, type LineSource } from "../use-annotation-surface";
 import { DiscussionMarkerRail } from "./DiscussionMarkerRail";
-import { coloredRowSpans } from "./diff-sheet-layout";
+import { coloredRowSpans } from "./diff-content-view-layout";
 
 /** Shared empty map so an unresolved/stale highlight state is a stable value. */
 const EMPTY_SYNTAX: Map<number, SyntaxSpan[]> = new Map();
@@ -41,9 +41,24 @@ const REJECTED_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: tru
 /** A file band renders its name in bold between an equal rule above and below. */
 const FILE_HEADER_ATTRIBUTES = createTextAttributes({ bold: true });
 
-/** The gutter before a code line: caret bar, four-digit line number, a space, the sign, a space. */
+/** The split-view gutter before a code line: caret bar, four-digit line number, a space, the sign, a space. */
 const GUTTER_COLUMNS = 8;
 
+/** The stacked gutter around its two line-number columns: caret bar, the space between them, a space, the sign, a space. */
+const UNIFIED_GUTTER_CHROME = 5;
+
+/** The widest line number in the diff, so the stacked gutter's two columns stay as narrow as the file allows. */
+function lineNumberWidth(rows: DiffRow[]): number {
+  let width = 1;
+
+  for (const row of rows) {
+    if (row.oldLine !== undefined) width = Math.max(width, String(row.oldLine).length);
+    if (row.newLine !== undefined) width = Math.max(width, String(row.newLine).length);
+  }
+
+  return width;
+}
+
 /** The per-file fold controls the file band renders; absent in read-only story renders. */
 export interface DiffFoldControls {
   isCollapsed: (file: string) => boolean;
@@ -54,13 +69,15 @@ export interface DiffFoldControls {
   onCopyPath: (file: string) => void;
 }
 
-export interface DiffSheetProps {
+export interface DiffContentViewProps {
   rows: DiffRow[];
   session: ReviewSession;
   /** Annotations resolved onto rows (marksByRows), with char ranges and spans. */
   marks: Map<number, Mark[]>;
   quickActions: QuickAction[];
   observer: boolean;
+  /** Whether comments can be drafted here; false for a non-diff thread's view-only live diff. */
+  commentsEnabled?: boolean;
   /** A verdict is in: no draft may open; the app answers with its read-only status. */
   resolved?: boolean;
   /** True while a menu, dialog, or overlay owns the keyboard. */
@@ -87,6 +104,8 @@ export interface DiffSheetProps {
   fileStats?: ReadonlyMap<string, { additions: number; deletions: number }>;
   /** Render old|new side by side instead of one inline column; the App gates this on zoom. */
   split?: boolean;
+  /** A plain-file view (all context rows): one line-number gutter, no +/- sign. */
+  fileView?: boolean;
   theme?: Theme;
 }
 
@@ -120,6 +139,26 @@ function FileCountsBadge({
   );
 }
 
+/** The file band's expand-all-lines toggle: the word "expand" stays put, its color carries the state
+ *  (active white when the file is expanded, inactive gray when collapsed to changes) so nothing shifts. */
+function ExpandToggle({
+  expanded,
+  onToggle,
+  tokens,
+}: {
+  expanded: boolean;
+  onToggle: () => void;
+  tokens: Theme;
+}): React.ReactNode {
+  return (
+    <box onMouseUp={onToggle} style={{ alignSelf: "center" }}>
+      <text fg={expanded ? tokens.text : tokens.textDim} style={{ wrapMode: "none" }}>
+        expand
+      </text>
+    </box>
+  );
+}
+
 /**
  * A file band: chevron, bold name, and the added/removed counts between an equal rule above and
  * below. `fold` absent (story renders) drops the controls.
@@ -173,10 +212,10 @@ function FileBand({
             />
           ) : null}
           {fold && canExpand ? (
-            <IconButton
-              glyph={NERD.unfold}
-              onPress={() => fold.onToggleExpand(file)}
-              tip={expanded ? "Collapse to changes" : "Expand all lines"}
+            <ExpandToggle
+              expanded={expanded}
+              onToggle={() => fold.onToggleExpand(file)}
+              tokens={tokens}
             />
           ) : null}
         </box>
@@ -293,6 +332,7 @@ function codeLineSpans(
   lineStart: number,
   lineRanges: MarkRange[],
   fgByColumn: string[],
+  emphasisBgByColumn: Array<string | undefined>,
   rejected: boolean,
   tokens: Theme,
   palette: AnnotationPalette,
@@ -301,11 +341,18 @@ function codeLineSpans(
   let column = 0;
 
   for (const run of runsFor(lineText, lineRanges)) {
-    const bg = run.caretOnly ? palette.caretCell : run.marked ? palette.markBackdrop : undefined;
+    // a caret or a comment mark owns the whole run's backdrop; otherwise the changed-word tint (if any)
+    // shows per column and the row box paints the soft band behind the rest
+    const runBackground = run.caretOnly
+      ? palette.caretCell
+      : run.marked
+        ? palette.markBackdrop
+        : undefined;
     const attributes = (run.marked ? UNDERLINE : 0) | (rejected ? REJECTED_ATTRIBUTES : 0);
 
     for (const character of run.text) {
       const fg = rejected ? tokens.textDim : (fgByColumn[lineStart + column] ?? tokens.textMuted);
+      const bg = runBackground ?? emphasisBgByColumn[lineStart + column];
       const previous = spans[spans.length - 1];
 
       if (
@@ -352,6 +399,45 @@ function rowBaseColor(row: DiffRow, tokens: Theme): string {
       : tokens.textMuted;
 }
 
+/** The soft band behind a whole added/removed row; context rows carry no band. */
+function rowBackground(row: DiffRow, tokens: Theme): string | undefined {
+  return row.kind === "add"
+    ? tokens.insertedBackground
+    : row.kind === "del"
+      ? tokens.deletedBackground
+      : undefined;
+}
+
+/** The stronger tint behind an add/del row's gutter chip and its intra-line changed words. */
+function rowEmphasisBackground(row: DiffRow, tokens: Theme): string | undefined {
+  return row.kind === "add"
+    ? tokens.insertedEmphasisBackground
+    : row.kind === "del"
+      ? tokens.deletedEmphasisBackground
+      : undefined;
+}
+
+/** Per-column emphasis backdrop: the changed words of a modified line, else none. */
+function emphasisBackgroundColumns(
+  text: string,
+  intraline: IntralineRun[] | undefined,
+  emphasisBackground: string | undefined,
+): Array<string | undefined> {
+  const columns: Array<string | undefined> = Array.from({ length: text.length }, () => undefined);
+
+  if (!intraline || !emphasisBackground) return columns;
+  let offset = 0;
+
+  for (const run of intraline) {
+    if (run.changed)
+      for (let index = 0; index < run.text.length && offset + index < text.length; index++)
+        columns[offset + index] = emphasisBackground;
+    offset += run.text.length;
+  }
+
+  return columns;
+}
+
 /** Async tree-sitter highlights, discarded when they belong to superseded rows. */
 function useSyntaxHighlights(rows: DiffRow[]): Map<number, SyntaxSpan[]> {
   const [highlighted, setHighlighted] = useState<{
@@ -365,9 +451,16 @@ function useSyntaxHighlights(rows: DiffRow[]): Map<number, SyntaxSpan[]> {
   useEffect(() => {
     let active = true;
 
-    void highlightDiffRows(rows).then((byRow) => {
-      if (active) setHighlighted({ rows, byRow });
-    });
+    highlightDiffRows(rows).then(
+      (byRow) => {
+        if (active) setHighlighted({ rows, byRow });
+      },
+      (error) => {
+        // a highlighter torn down mid-init rejects after unmount (active === false): expected, silent.
+        // a rejection while still mounted is a real failure - surface it and leave the rows unhighlighted
+        if (active) console.error("diff syntax highlighting failed", error);
+      },
+    );
 
     return () => {
       active = false;
@@ -377,12 +470,13 @@ function useSyntaxHighlights(rows: DiffRow[]): Map<number, SyntaxSpan[]> {
   return highlighted.rows === rows ? highlighted.byRow : EMPTY_SYNTAX;
 }
 
-export function DiffSheet({
+export function DiffContentView({
   rows,
   session,
   marks,
   quickActions,
   observer,
+  commentsEnabled = true,
   resolved = false,
   suspended = false,
   onComposingChange,
@@ -398,8 +492,9 @@ export function DiffSheet({
   fold,
   fileStats: fileStatsProp,
   split = false,
+  fileView = false,
   theme,
-}: DiffSheetProps): React.ReactNode {
+}: DiffContentViewProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   const scrollRef = useRef<ScrollBoxRenderable | null>(null);
   const source: LineSource = {
@@ -414,6 +509,7 @@ export function DiffSheet({
     quickActions,
     tokens,
     observer,
+    commentsEnabled,
     resolved,
     suspended,
     onComposingChange,
@@ -427,6 +523,8 @@ export function DiffSheet({
     onExit,
   });
   const { palette } = surface;
+  const numberWidth = useMemo(() => lineNumberWidth(rows), [rows]);
+  const unifiedGutterColumns = numberWidth * 2 + UNIFIED_GUTTER_CHROME;
   const intralineByRow = useMemo(() => intralineRunsByRow(rows), [rows]);
   const syntaxByRow = useSyntaxHighlights(rows);
   const splitRows = useMemo(() => (split ? splitDiffRows(rows) : []), [split, rows]);
@@ -438,10 +536,12 @@ export function DiffSheet({
     (left, right) => left === right,
     0,
   );
-  // two columns and a one-cell divider share the width; each column keeps its own gutter
-  const textWidth = split
-    ? Math.max(0, Math.floor((viewWidth - 1) / 2) - GUTTER_COLUMNS)
-    : Math.max(0, viewWidth - GUTTER_COLUMNS);
+  // a file view shows one number; split gives each column its own gutter; stacked shows old and new
+  const textWidth = fileView
+    ? Math.max(0, viewWidth - (numberWidth + 2))
+    : split
+      ? Math.max(0, Math.floor((viewWidth - 1) / 2) - GUTTER_COLUMNS)
+      : Math.max(0, viewWidth - unifiedGutterColumns);
 
   // Every visual line is its own text renderable (so a drag can hit-test it), and a large
   // diff has tens of thousands of them - more native text buffers than the renderer can
@@ -489,10 +589,72 @@ export function DiffSheet({
       syntaxByRow.get(rowIndex),
       tokens,
     );
+    const emphasisBgByColumn = emphasisBackgroundColumns(
+      text,
+      intralineByRow.get(rowIndex),
+      rowEmphasisBackground(row, tokens),
+    );
+    const rowBg = rowBackground(row, tokens);
     const rejected = rejectedRows.has(rowIndex);
     const isCaretRow = paintMarks && surface.head.blockIndex === rowIndex;
-    const lineNumber = row.kind === "del" ? row.oldLine : row.newLine;
-    const gutter = `${isCaretRow ? "▎" : " "}${String(lineNumber ?? "").padStart(4, " ")} ${rowSign(row)} `;
+    // split view carries one number per side; the stacked view shows the old and new numbers together
+    const splitLineNumber = row.kind === "del" ? row.oldLine : row.newLine;
+    const splitGutter = `${isCaretRow ? "▎" : " "}${String(splitLineNumber ?? "").padStart(4, " ")} ${rowSign(row)} `;
+    const barChar = isCaretRow ? "▎" : " ";
+    const barColor = isCaretRow ? tokens.accent : tokens.textDim;
+    const oldNumber =
+      row.kind === "add"
+        ? " ".repeat(numberWidth)
+        : String(row.oldLine ?? "").padStart(numberWidth);
+    const newNumber =
+      row.kind === "del"
+        ? " ".repeat(numberWidth)
+        : String(row.newLine ?? "").padStart(numberWidth);
+    const gutterFor = (lineIndex: number): React.ReactNode => {
+      if (fileView) {
+        // a plain file has no old/new sides, so one line number reads like an ordinary file viewer
+        return lineIndex === 0 ? (
+          <>
+            <span fg={barColor}>{barChar}</span>
+            <span fg={tokens.textDim}>{String(row.newLine ?? "").padStart(numberWidth)}</span>
+            <span> </span>
+          </>
+        ) : (
+          " ".repeat(numberWidth + 2)
+        );
+      }
+      if (split) {
+        return lineIndex === 0 ? (
+          <>
+            <span fg={isCaretRow ? tokens.accent : tokens.textDim}>{splitGutter.slice(0, 6)}</span>
+            <span fg={rowBaseColor(row, tokens)}>{splitGutter.slice(6)}</span>
+          </>
+        ) : (
+          " ".repeat(GUTTER_COLUMNS)
+        );
+      }
+      // stacked: caret bar, old new (each tinted red/green on its side), then the change sign;
+      // the numbers sit on the row's soft band, only the changed code carries the brighter backdrop
+      return lineIndex === 0 ? (
+        <>
+          <span fg={barColor}>{barChar}</span>
+          <span fg={row.kind === "del" ? tokens.deletedForeground : tokens.textDim}>
+            {oldNumber}
+          </span>
+          <span fg={tokens.textDim}> </span>
+          <span fg={row.kind === "add" ? tokens.insertedForeground : tokens.textDim}>
+            {newNumber}
+          </span>
+          <span> </span>
+          <span fg={rowBaseColor(row, tokens)}>{`${rowSign(row)} `}</span>
+        </>
+      ) : (
+        <>
+          <span fg={barColor}>{barChar}</span>
+          {" ".repeat(unifiedGutterColumns - 1)}
+        </>
+      );
+    };
     const lineNodes: React.ReactNode[] = [];
     const cards: React.ReactNode[] = [];
 
@@ -501,20 +663,16 @@ export function DiffSheet({
       const isLastLine = lineIndex === lines.length - 1;
 
       lineNodes.push(
-        <box key={`${keyPrefix}-line-${lineIndex}`} style={{ flexDirection: "row" }}>
+        <box
+          key={`${keyPrefix}-line-${lineIndex}`}
+          style={{ flexDirection: "row", backgroundColor: rowBg }}
+        >
           <text
             selectable={false}
             fg={isCaretRow && lineIndex === 0 ? tokens.accent : tokens.textDim}
             style={{ flexShrink: 0, wrapMode: "none" }}
           >
-            {lineIndex === 0 ? (
-              <>
-                <span fg={isCaretRow ? tokens.accent : tokens.textDim}>{gutter.slice(0, 6)}</span>
-                <span fg={rowBaseColor(row, tokens)}>{gutter.slice(6)}</span>
-              </>
-            ) : (
-              " ".repeat(GUTTER_COLUMNS)
-            )}
+            {gutterFor(lineIndex)}
           </text>
           <text
             selectable={false}
@@ -527,6 +685,7 @@ export function DiffSheet({
               line.start,
               lineMarkRanges(ranges, line),
               fgByColumn,
+              emphasisBgByColumn,
               rejected,
               tokens,
               palette,

package/src/components/DiscussionMarkerRail.tsx

@@ -14,7 +14,7 @@ import type { Discussion } from "../discussions";
 import { useFrameMeasure } from "../use-frame-measure";
 import { useComponentTheme } from "./theme-context";
 import { useRootOverlay } from "./RootOverlay";
-import { SurfaceScrollbar } from "./SurfaceScrollbar";
+import { OverlayScrollbar } from "./OverlayScrollbar";
 
 interface HoveredMarker {
   key: string;
@@ -175,7 +175,7 @@ export function DiscussionMarkerRail({
         onHover={setHovered}
         onJump={onJump}
       />
-      {scrollbox ? <SurfaceScrollbar scrollbox={scrollbox} theme={theme} /> : null}
+      {scrollbox ? <OverlayScrollbar scrollbox={scrollbox} theme={theme} /> : null}
     </>
   );
 }

package/src/components/EditorGrid.tabs.test.tsx

@@ -39,11 +39,24 @@ describe("visibleTabWindow", () => {
     // Act / Assert
     expect(visibleTabWindow(wide, 0, 0, 10)).toEqual({ first: 0, end: 1 });
   });
+
+  test("the comment badge counts toward a tab's width, so a commented run does not overflow", () => {
+    // Arrange - three 9-cell tabs fit a 27-cell strip exactly with no badge
+    const three = ["aaaa", "bbbb", "cccc"].map((name) => fileTab(name, name, "diff"));
+
+    // Act - without badges all three fit; a ` ● 2` badge on each widens them past the strip
+    const bare = visibleTabWindow(three, 0, 0, 27);
+    const badged = visibleTabWindow(three, 0, 0, 27, () => 2);
+
+    // Assert - the badge width narrows the window rather than clipping the last tab
+    expect(bare.end).toBe(3);
+    expect(badged.end).toBeLessThan(3);
+  });
 });
 
 const NAMES = [
   "AppShell.tsx",
-  "DiffSheet.tsx",
+  "DiffContentView.tsx",
   "IconButton.tsx",
   "EditorGrid.zoom.test.tsx",
   "ThreadView.tsx",
@@ -89,9 +102,9 @@ describe("editor tab strip", () => {
     // Assert - no squeezed labels: every visible tab reads in full up to the clip edge
     expect(row).toContain("Changes ");
     expect(row).toContain("AppShell.tsx ");
-    expect(row).toContain("DiffSheet.tsx ");
-    // and the header controls sit at the right edge, past the clipped strip
-    expect(row.trimEnd().endsWith(`search  ${NERD.zoom}`)).toBe(true);
+    expect(row).toContain("DiffContentView.tsx ");
+    // and the header controls sit at the right edge, past the clipped strip (search is out for now)
+    expect(row.trimEnd().endsWith(NERD.zoom)).toBe(true);
   });
 
   test("the strip scrolls to reveal the active tab", async () => {

package/src/components/EditorGrid.tsx

@@ -91,9 +91,11 @@ function EditorTabButton({
   );
 }
 
-/** Cells a tab occupies: its padding, the label, the close cell and its padding, the right rule. */
-function tabCellWidth(tab: EditorTab): number {
-  return tab.label.length + 5;
+/** Cells a tab occupies: padding, label, the ` ● N` comment badge when present, the close cell, the right rule. */
+export function tabCellWidth(tab: EditorTab, commentCount = 0): number {
+  const badge = commentCount > 0 ? 3 + String(commentCount).length : 0;
+
+  return tab.label.length + 5 + badge;
 }
 
 /** The run of tabs `[first, end)` the strip shows. */
@@ -108,9 +110,11 @@ export function visibleTabWindow(
   firstVisible: number,
   activeIndex: number,
   stripWidth: number,
+  commentCount: (tab: EditorTab) => number = () => 0,
 ): TabWindow {
   // unmeasured strip: show everything, the header clips until the width is known
   if (stripWidth <= 0) return { first: 0, end: tabs.length };
+  const width = (index: number): number => tabCellWidth(tabs[index]!, commentCount(tabs[index]!));
   const fitEnd = (first: number): number => {
     let used = first > 0 ? 1 : 0;
     let end = first;
@@ -118,8 +122,8 @@ export function visibleTabWindow(
     while (end < tabs.length) {
       const remaining = end + 1 < tabs.length ? 1 : 0;
 
-      if (used + tabCellWidth(tabs[end]!) + remaining > stripWidth) break;
-      used += tabCellWidth(tabs[end]!);
+      if (used + width(end) + remaining > stripWidth) break;
+      used += width(end);
       end++;
     }
 
@@ -192,12 +196,22 @@ function EditorGroupPane({
     0,
   );
   const [firstVisible, setFirstVisible] = useState(0);
+  // a zoom re-anchors the strip to the leftmost tab, so the new width fills from the left
+  // and the step markers disappear when every tab now fits
+  const [wasZoomed, setWasZoomed] = useState(props.zoomed);
+
+  if (wasZoomed !== props.zoomed) {
+    setWasZoomed(props.zoomed);
+    setFirstVisible(0);
+  }
   const activeIndex = Math.max(
     0,
     group.tabs.findIndex((tab) => tab.id === active?.id),
   );
   // derived every render: the manual offset is a floor the active tab can pull the window past
-  const tabWindow = visibleTabWindow(group.tabs, firstVisible, activeIndex, stripWidth);
+  const tabWindow = visibleTabWindow(group.tabs, firstVisible, activeIndex, stripWidth, (tab) =>
+    tab.path ? (props.commentCounts?.get(tab.path) ?? 0) : 0,
+  );
 
   return (
     <box
@@ -227,8 +241,16 @@ function EditorGroupPane({
           style={{ flexDirection: "row", flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 0 }}
         >
           {tabWindow.first > 0 ? (
-            <box onMouseUp={() => setFirstVisible(tabWindow.first - 1)} style={{ flexShrink: 0 }}>
-              <text fg={tokens.textDim}>{"‹"}</text>
+            <box
+              onMouseUp={(event) => {
+                event.stopPropagation();
+                setFirstVisible(tabWindow.first - 1);
+              }}
+              style={{ flexShrink: 0 }}
+            >
+              <text fg={tokens.textDim} selectable={false}>
+                {"‹"}
+              </text>
             </box>
           ) : null}
           {group.tabs.slice(tabWindow.first, tabWindow.end).map((tab) => (
@@ -243,29 +265,37 @@ function EditorGroupPane({
             />
           ))}
           {tabWindow.end < group.tabs.length ? (
-            <box onMouseUp={() => setFirstVisible(tabWindow.first + 1)} style={{ flexShrink: 0 }}>
-              <text fg={tokens.textDim}>{"›"}</text>
+            <box
+              onMouseUp={(event) => {
+                event.stopPropagation();
+                setFirstVisible(tabWindow.first + 1);
+              }}
+              style={{ flexShrink: 0 }}
+            >
+              <text fg={tokens.textDim} selectable={false}>
+                {"›"}
+              </text>
             </box>
           ) : null}
         </box>
         <box style={{ flexDirection: "row", flexShrink: 0, paddingLeft: 1, paddingRight: 1 }}>
-          <IconButton glyph="search" onPress={() => {}} marginRight={2} theme={tokens} />
-          <IconButton
-            glyph={NERD.zoom}
-            active={props.zoomed}
-            onPress={props.onZoom}
-            tip={props.zoomed ? "Zoom Out" : "Zoom In"}
-            marginRight={isFile ? 2 : 0}
-            theme={tokens}
-          />
+          {/* search sits out until it does something; split takes its place */}
           {isFile ? (
             <IconButton
               glyph="split"
               active={menuOpen}
               onPress={() => setMenuOpen((open) => !open)}
+              marginRight={2}
               theme={tokens}
             />
           ) : null}
+          <IconButton
+            glyph={NERD.zoom}
+            active={props.zoomed}
+            onPress={props.onZoom}
+            tip={props.zoomed ? "Zoom Out" : "Zoom In"}
+            theme={tokens}
+          />
         </box>
       </box>
       {menuOpen ? (