@cueloop/client 0.1.0-alpha.92 → 0.1.0-alpha.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.92",
+  "version": "0.1.0-alpha.93",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,10 +27,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.92",
-    "@cueloop/extension-api": "0.1.0-alpha.92",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.92",
-    "@cueloop/schema": "0.1.0-alpha.92",
+    "@cueloop/daemon": "0.1.0-alpha.93",
+    "@cueloop/extension-api": "0.1.0-alpha.93",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.93",
+    "@cueloop/schema": "0.1.0-alpha.93",
     "@opentui/core": "^0.5.11",
     "@opentui/keymap": "0.5.11",
     "@opentui/react": "^0.5.11",

package/src/App.deleted-scroll.test.tsx

@@ -0,0 +1,186 @@
+/** Keyboard scrolling in a changed-file tab uses caret navigation, even when the file was deleted. */
+
+import { expect, test } from "bun:test";
+import { mkdtempSync, rmSync, unlinkSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import React from "react";
+import { ScrollBoxRenderable, type Renderable } from "@opentui/core";
+import { DaemonServer } from "@cueloop/daemon";
+import { App } from "./App";
+import { annotationPaletteFor } from "./annotation-palette";
+import { DARK } from "./theme";
+import {
+  isolateUserConfig,
+  locateText,
+  press,
+  renderReadyApp,
+  settle,
+  waitForText,
+} from "./test-support";
+
+function findScrollbox(node: Renderable): ScrollBoxRenderable | null {
+  if (node.id === "diff-scroll" && node instanceof ScrollBoxRenderable) return node;
+
+  for (const child of node.getChildren()) {
+    const found = findScrollbox(child);
+
+    if (found) return found;
+  }
+
+  return null;
+}
+
+function hex(color: { toInts(): [number, number, number, number] }): string {
+  const [red, green, blue] = color.toInts();
+
+  return "#" + [red, green, blue].map((part) => part.toString(16).padStart(2, "0")).join("");
+}
+
+test("deleted file caret scrolls one row and stays at the file boundaries", async () => {
+  const home = mkdtempSync(join(tmpdir(), "cueloop-scroll-home-"));
+  const repo = mkdtempSync(join(tmpdir(), "cueloop-scroll-repo-"));
+  const restoreConfig = isolateUserConfig(home);
+  const server = new DaemonServer({ home, idleExitMs: 0 });
+  let setup: Awaited<ReturnType<typeof renderReadyApp>> | undefined;
+
+  try {
+    const file = join(repo, "long.md");
+    const lines = Array.from({ length: 180 }, (_, index) =>
+      index === 113
+        ? "[nodejs/node#36005](https://github.com/nodejs/node/issues/36005)."
+        : `row ${String(index).padStart(3, "0")} ${"a paragraph with wrapped text and a link [source](https://example.test/page) ".repeat((index % 3) + 1)}`,
+    );
+    const git = (args: string[]) => Bun.spawnSync(["git", "-C", repo, ...args]);
+
+    writeFileSync(file, lines.join("\n") + "\n");
+    git(["init", "-q"]);
+    git(["config", "user.email", "fixture@example.com"]);
+    git(["config", "user.name", "Fixture"]);
+    git(["add", "-A"]);
+    git(["commit", "-q", "-m", "seed"]);
+    unlinkSync(file);
+    server.start();
+    setup = await renderReadyApp(<App home={home} sessionId={undefined} cwd={repo} />, {
+      width: 180,
+      height: 48,
+    });
+    await waitForText(setup, "long.md");
+    const treeFile = locateText(setup, "long.md");
+
+    await setup.mockMouse.click(treeFile.column, treeFile.row);
+    await waitForText(setup, "row 00");
+    const box = findScrollbox(setup.renderer.root);
+
+    if (!box) throw new Error("file diff scrollbox missing");
+    for (let offset = 0; offset < 1000; offset += 20) {
+      box.scrollTo({ x: 0, y: offset });
+      await settle(setup);
+      if (setup.captureCharFrame().includes("row 130")) break;
+    }
+    const target = locateText(setup, "row 130");
+
+    await setup.mockMouse.click(target.column, target.row);
+    await press(setup, "escape");
+
+    const steps: number[] = [];
+    const caretCell = annotationPaletteFor(DARK).caretCell;
+    const frameTrace: Array<{ markers: number[]; caret: number }> = [];
+    const captureFrame = () => {
+      const lines = setup!.captureCharFrame().split("\n");
+      const markers = lines.flatMap((line, row) => (line.includes("▎") ? [row] : []));
+      const caret = setup!
+        .captureSpans()
+        .lines.findIndex((line) => line.spans.some((span) => hex(span.bg) === caretCell));
+
+      frameTrace.push({ markers, caret });
+    };
+
+    setup.renderer.on("frame", captureFrame);
+
+    for (let index = 0; index < 12; index++) {
+      const before = box.scrollTop;
+      await press(setup, "down");
+      steps.push(box.scrollTop - before);
+      const caretRow = setup
+        .captureSpans()
+        .lines.findIndex((line) => line.spans.some((span) => hex(span.bg) === caretCell));
+      const markerRows = setup
+        .captureCharFrame()
+        .split("\n")
+        .flatMap((line, row) => (line.includes("▎") ? [row] : []));
+
+      expect(caretRow).toBeGreaterThanOrEqual(0);
+      expect(markerRows).toEqual([caretRow]);
+    }
+
+    expect(Math.max(...steps)).toBeLessThanOrEqual(1);
+    expect(Math.min(...steps)).toBeGreaterThanOrEqual(0);
+    let anchored = false;
+
+    for (let index = 0; index < 80; index++) {
+      await press(setup, "up");
+      const marker = setup
+        .captureCharFrame()
+        .split("\n")
+        .findIndex((line) => line.includes("▎"));
+
+      if (marker === box.viewport.screenY) anchored = true;
+      if (anchored && box.scrollTop > 0) expect(marker).toBe(box.viewport.screenY);
+    }
+    expect(anchored).toBe(true);
+    box.scrollTo({ x: 0, y: 100000 });
+    await settle(setup);
+    const last = locateText(setup, "row 179");
+
+    await setup.mockMouse.click(last.column, last.row);
+    await press(setup, "escape");
+    let lastMarker = -1;
+
+    for (let index = 0; index < 12; index++) {
+      const traceStart = frameTrace.length;
+      const before = box.scrollTop;
+
+      await press(setup, "down");
+      const states = frameTrace.slice(traceStart);
+
+      expect(box.scrollTop).toBe(before);
+      expect(states.length).toBeGreaterThan(0);
+      for (const state of states) {
+        expect(state.markers).toEqual([state.caret]);
+        expect(state.caret).toBeGreaterThanOrEqual(lastMarker);
+        lastMarker = state.caret;
+      }
+    }
+    box.scrollTo({ x: 0, y: 0 });
+    await settle(setup);
+    const first = locateText(setup, "row 000");
+
+    await setup.mockMouse.click(first.column, first.row);
+    await press(setup, "escape");
+    let firstMarker = Number.POSITIVE_INFINITY;
+
+    for (let index = 0; index < 12; index++) {
+      const traceStart = frameTrace.length;
+      const before = box.scrollTop;
+
+      await press(setup, "up");
+      const states = frameTrace.slice(traceStart);
+
+      expect(box.scrollTop).toBe(before);
+      expect(states.length).toBeGreaterThan(0);
+      for (const state of states) {
+        expect(state.markers).toEqual([state.caret]);
+        expect(state.caret).toBeLessThanOrEqual(firstMarker);
+        firstMarker = state.caret;
+      }
+    }
+    setup.renderer.off("frame", captureFrame);
+  } finally {
+    setup?.renderer.destroy();
+    server.stop();
+    restoreConfig();
+    rmSync(home, { recursive: true, force: true });
+    rmSync(repo, { recursive: true, force: true });
+  }
+}, 30000);

package/src/App.diff.test.tsx

@@ -10,7 +10,6 @@ import type { Thread } from "@cueloop/schema";
 import { App } from "./App";
 import { pullRequestReviewLayout } from "./launch-layout";
 import { DARK } from "./theme";
-import { NERD } from "./components/primitives/icons";
 import {
   clickText,
   dragText,
@@ -220,7 +219,7 @@ describe("diff review", () => {
     await waitForText(setup, "● Existing note.");
   });
 
-  test("option+c folds the caret's file to its band; the chevron restores its body", async () => {
+  test("option+c folds the caret's file to its band; its title restores the body", async () => {
     // Arrange - the caret opens on the file's first code line
     const setup = await renderApp();
 
@@ -234,8 +233,8 @@ describe("diff review", () => {
     expect(collapsed).toContain("src/store.ts");
     expect(collapsed).toContain("+1");
 
-    // Act - the band's chevron unfolds it again
-    await clickText(setup, NERD.chevronRight);
+    // Act - the title unfolds it again
+    await clickText(setup, "src/store.ts");
 
     // Assert
     await waitForText(setup, "new Map()");

package/src/App.test.tsx

@@ -442,6 +442,7 @@ describe("the thread view and the menu", () => {
     const dialog = setup.captureCharFrame();
 
     expect(dialog).toContain("nav mode");
+    expect(dialog).toContain("open selected file or toggle folder");
     expect(dialog).toContain("place the caret");
     expect(dialog).not.toContain("grow/shrink");
 

package/src/App.toast.test.tsx

@@ -1,6 +1,6 @@
 /** The share toast is non-modal: while it is up, escape still cancels an open overlay. */
 
-import { afterEach, beforeEach, describe, mock, test } from "bun:test";
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
 import { mkdtempSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
@@ -13,6 +13,7 @@ import type { ShareTransport } from "./thread-controller";
 import {
   clickText,
   isolateUserConfig,
+  locateText,
   press,
   pressKey,
   typeText,
@@ -63,6 +64,31 @@ afterEach(() => {
 });
 
 describe("share toast", () => {
+  test("clicking outside dismisses the toast while clicking inside keeps it open", async () => {
+    const setup = await testRender(
+      <App home={home} sessionId={session.id} shareTransport={shareTransport} />,
+      { width: 120, height: 32 },
+    );
+
+    await waitForText(setup, "cueloop");
+    await pressKey(setup, "s", { ctrl: true });
+    await waitForText(setup, "+ new link");
+    await press(setup, "enter");
+    await press(setup, "enter");
+    await waitForText(setup, "link name");
+    await press(setup, "enter");
+    await waitForText(setup, "link copied");
+    await press(setup, "escape");
+    await waitForTextGone(setup, "share externally");
+    const body = locateText(setup, "ssh p_share01@cueloop.dev");
+
+    await setup.mockMouse.click(body.column, body.row);
+    expect(setup.captureCharFrame()).toContain("link copied");
+    await setup.mockMouse.click(1, 1);
+    await waitForTextGone(setup, "link copied");
+    setup.renderer.destroy();
+  });
+
   test("escape cancels an open composer even while the toast is up", async () => {
     // Arrange
     const setup = await testRender(

package/src/App.tsx

@@ -330,8 +330,8 @@ function ProjectPanelBody(props: {
   diffSourceKey: string;
   liveWorkingTree: boolean;
   frozenFiles?: readonly DiffFileContents[];
-  onOpenChangedFile: (path: string) => void;
-  onOpenProjectFile: (path: string) => void;
+  onOpenChangedFile: (path: string, persistent?: boolean) => void;
+  onOpenProjectFile: (path: string, persistent?: boolean) => void;
   commentCounts?: ReadonlyMap<string, number>;
   focused?: boolean;
   theme: Theme;
@@ -391,12 +391,20 @@ function usableScreenReached(
 /** The keybinds dialog content: the thread grammar while the thread view owns the keys. */
 function cheatsheetFor(keyBindings: KeyBindings, threadViewActive: boolean): CheatsheetSection[] {
   const base = keyBindings.cheatsheet();
+  const fileTree: CheatsheetSection = {
+    title: "Changes / Project files",
+    entries: [
+      { keys: "enter", label: "open selected file or toggle folder" },
+      { keys: "tab", label: "cycle panes" },
+    ],
+  };
 
   if (!threadViewActive) {
-    return base;
+    return [fileTree, ...base];
   }
 
   return [
+    fileTree,
     ...THREAD_VIEW_CHEATSHEET,
     { title: "Nav mode · session", entries: sessionCommandEntries() },
     { title: "Nav mode · diff", entries: diffCommandEntries() },
@@ -630,7 +638,7 @@ export function App({
   const [menuDialog, setMenuDialog] = useState<"keybinds" | "settings" | null>(null);
   const [shareDialogOpen, setShareDialogOpen] = useState(false);
   const [autoClose, setAutoClose] = useState<AutoClose>("off");
-  // unified or side-by-side diff; split only lays out when the Changes pane is zoomed
+  // unified or side-by-side diff; split lays out when the Changes pane is zoomed
   const [diffView, setDiffView] = useState<DiffViewMode>("split");
   const [defaultMessage, setDefaultMessage] = useState<MessageOutcome>("approved");
   const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | undefined>(undefined);
@@ -656,10 +664,6 @@ export function App({
   const [skills, setSkills] = useState<SlashItem[]>([]);
   const [reviewSkill, setReviewSkill] = useState("code-review");
   const [reviewWorkspace, setReviewWorkspace] = useState<ReviewWorkspaceMode>("worktree");
-  const reviewSkillOptions = useMemo(
-    () => [...new Set([reviewSkill, "code-review", ...skills.map((skill) => skill.name)])],
-    [reviewSkill, skills],
-  );
   const paletteNames = useMemo(
     () => new Set(mergeSlashItems(slashItemsFrom(quickActions), skills).map((item) => item.name)),
     [quickActions, skills],
@@ -767,8 +771,6 @@ export function App({
       setMode({ type: "renameSelf", text: identity.name ?? "" });
     },
     reviewSkill,
-    reviewSkillOptions,
-    setReviewSkill,
     reviewWorkspace,
     setReviewWorkspace,
   });
@@ -1116,6 +1118,7 @@ export function App({
             onPin={togglePin}
             onRename={(id, title) => setMode({ type: "renameThread", sessionId: id, text: title })}
             quickActions={quickActions}
+            diffView={diffView}
             onWelcomeComposingChange={setWelcomeComposing}
             layout={layout}
           />
@@ -1367,6 +1370,7 @@ export function App({
                   commentCounts={diffCommentCounts}
                   onFocusGroup={workbench.focusGroup}
                   onActivateTab={workbench.activate}
+                  onKeepTab={workbench.keepTab}
                   onCloseTab={workbench.close}
                   onSplit={workbench.split}
                   onZoom={workbench.toggleZoom}
@@ -1447,8 +1451,12 @@ export function App({
                   {...projectDiffFiles(activeSession)}
                   // the Changes navigator always opens a changed file as a diff - a diff review shows its
                   // captured snapshot, every other thread the live working-tree diff
-                  onOpenChangedFile={(path) => workbench.openFile(path, "diff")}
-                  onOpenProjectFile={(path) => workbench.openFile(path, "contents")}
+                  onOpenChangedFile={(path, persistent) =>
+                    workbench.openFile(path, "diff", persistent)
+                  }
+                  onOpenProjectFile={(path, persistent) =>
+                    workbench.openFile(path, "contents", persistent)
+                  }
                   commentCounts={diffCommentCounts}
                   focused={focusedPane === "project"}
                   theme={theme}
@@ -1466,6 +1474,7 @@ export function App({
                 theme={theme}
                 mode={mode}
                 toast={toast}
+                onDismissToast={() => controller.dismissToast()}
                 setMode={setMode}
                 dispatch={dispatch}
               />

package/src/App.workbench.test.tsx

@@ -113,6 +113,44 @@ const rightToggleColumn = (setup: Setup): number => toggleColumn(setup, NERD.sid
 const railToggleColumn = (setup: Setup): number => toggleColumn(setup, NERD.sidebarRightOff);
 
 describe("the four-pane workbench", () => {
+  test("rapid wheel scrolling a large Changes diff keeps the app responsive", async () => {
+    const filePatches = Array.from({ length: 40 }, (_, fileIndex) => [
+      `diff --git a/file-${fileIndex}.ts b/file-${fileIndex}.ts`,
+      `--- a/file-${fileIndex}.ts`,
+      `+++ b/file-${fileIndex}.ts`,
+      "@@ -0,0 +1,10 @@",
+      ...Array.from(
+        { length: 10 },
+        (_, lineIndex) => `+line ${lineIndex} ${"dense source text ".repeat(40)}`,
+      ),
+    ]).flat();
+    const large = server.core.sessionCreate({
+      workspace: { repoRoot: repo, branch: "main" },
+      artifact: {
+        type: "diff",
+        content: [...filePatches, ""].join("\n"),
+        meta: { title: "large changes" },
+      },
+    });
+    const setup = await renderReadyApp(<App home={home} sessionId={large.id} />, {
+      width: 160,
+      height: 20,
+    });
+
+    await waitForText(setup, "file-0.ts");
+    for (const [index, direction] of Array.from({ length: 500 }, () => "down" as const).entries()) {
+      // eslint-disable-next-line no-await-in-loop
+      await setup.mockMouse.scroll(75, 10, direction);
+      if (index % 25 === 0) {
+        // eslint-disable-next-line no-await-in-loop
+        await setup.waitForVisualIdle();
+      }
+    }
+    await setup.waitForVisualIdle();
+    expect(setup.captureCharFrame()).toContain("changes");
+    setup.renderer.destroy();
+  }, 60000);
+
   test("pair starts focused on the Project tree beside the zoomed Changes editor", async () => {
     const setup = await renderReadyApp(
       <App home={home} sessionId={session.id} layout={pairLayout()} />,
@@ -198,6 +236,8 @@ describe("the four-pane workbench", () => {
     expect(frame).toContain("cueloop");
     expect(frame).toContain("Changes");
     expect(frame).toContain("store.ts");
+    expect(frame).toContain("src/store.ts");
+    expect(frame).toContain(NERD.copy);
     // the diff (±) toggle exists in the Project header
     expect(diffToggleColumn(setup)).toBeGreaterThan(0);
   });
@@ -233,6 +273,43 @@ describe("the four-pane workbench", () => {
     expect(frame.split("\n")[HEADER_ROW]!).toContain("README.md");
   });
 
+  test("project clicks reuse one preview and a double-click keeps the file open once", async () => {
+    const setup = await renderApp();
+
+    await setup.mockMouse.click(treeToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForState(setup, () =>
+      setup.captureCharFrame().split("\n")[HEADER_ROW]!.includes("README.md"),
+    );
+
+    const folder = locateText(setup, "src");
+    await setup.mockMouse.click(folder.column, folder.row);
+    await waitForText(setup, "util.ts");
+    const util = locateText(setup, "util.ts");
+    await setup.mockMouse.click(util.column, util.row);
+    await waitForState(setup, () => {
+      const header = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+      return header.includes("util.ts") && !header.includes("README.md");
+    });
+
+    await setup.mockMouse.doubleClick(util.column, util.row);
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForState(setup, () => {
+      const header = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+      return header.includes("util.ts") && header.includes("README.md");
+    });
+    await setup.mockMouse.click(util.column, util.row);
+    const header = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+    expect(header.match(/util\.ts/g)).toHaveLength(1);
+    expect(header.match(/README\.md/g)).toHaveLength(1);
+    setup.renderer.destroy();
+  });
+
   test("the split control offers four directions and arrow-right makes two groups", async () => {
     const setup = await renderApp();
 
@@ -255,8 +332,15 @@ describe("the four-pane workbench", () => {
 
     // the arrow keys drive the popover: right splits the group into two
     await pressKey(setup, "ARROW_RIGHT");
-    await waitForState(setup, () => setup.captureCharFrame().split("split").length - 1 >= 2);
-    expect((setup.captureCharFrame().match(/README\.md/g) ?? []).length).toBeGreaterThanOrEqual(2);
+    await waitForState(setup, () =>
+      /│ Changes\s+│.*│ README\.md/.test(setup.captureCharFrame().split("\n")[HEADER_ROW]!),
+    );
+    expect(
+      setup
+        .captureCharFrame()
+        .split("\n")
+        [HEADER_ROW]!.match(/README\.md/g),
+    ).toHaveLength(1);
   });
 
   test("dismissing the Changes tab collapses the Changes pane but keeps the Project sidebar", async () => {
@@ -461,6 +545,28 @@ describe("the bare-launch welcome shell", () => {
     expect(setup.captureCharFrame()).toContain("README.md");
   });
 
+  test("Review shows only the skill selected in TOML", async () => {
+    writeFileSync(process.env.CUELOOP_CONFIG!, '[review]\nskill = "custom-review"\n');
+    const setup = await renderWelcome();
+
+    await setup.mockMouse.click(1, HEADER_ROW);
+    await waitForText(setup, "settings");
+    const settings = locateText(setup, "settings");
+
+    await setup.mockMouse.click(settings.column, settings.row);
+    await waitForText(setup, "General");
+    const review = locateText(setup, "Review");
+
+    await setup.mockMouse.click(review.column, review.row);
+    await waitForText(setup, "custom-review");
+    expect(setup.captureCharFrame()).not.toContain("research");
+    const skill = locateText(setup, "custom-review");
+
+    await setup.mockMouse.click(skill.column, skill.row);
+    expect(setup.captureCharFrame()).toContain("custom-review");
+    setup.renderer.destroy();
+  });
+
   test("the first comment in the bare shell creates and persists a per-repo workbench thread", async () => {
     const setup = await renderWelcome();
 
@@ -501,6 +607,63 @@ describe("the bare-launch welcome shell", () => {
     expect(setup.captureCharFrame()).toContain("README.md");
   });
 
+  test("a changed file tab keeps copy and expand without a collapse action", async () => {
+    const setup = await renderWelcome();
+
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForText(setup, "edited in the working tree");
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain(NERD.copy);
+    expect(frame).not.toContain("v README.md");
+    expect(frame).toContain("expand");
+    setup.renderer.destroy();
+  });
+
+  test("a bare changed-file tab uses Split only when zoomed in", async () => {
+    const setup = await renderWelcome();
+
+    await waitForText(setup, "README.md");
+    const readme = locateText(setup, "README.md");
+
+    await setup.mockMouse.click(readme.column, readme.row);
+    await waitForText(setup, "edited in the working tree");
+    const pairedLine = (line: string): boolean =>
+      line.includes("Workbench Fixture") && line.includes("+ # Fixture");
+
+    expect(setup.captureCharFrame().split("\n").some(pairedLine)).toBe(false);
+    const zoom = locateText(setup, NERD.zoom);
+
+    await setup.mockMouse.click(zoom.column, zoom.row);
+    await waitForState(setup, () => setup.captureCharFrame().split("\n").some(pairedLine));
+    expect(setup.captureCharFrame().split("\n").some(pairedLine)).toBe(true);
+    setup.renderer.destroy();
+  });
+
+  test("reopening Changes after dismissing Welcome keeps file actions", async () => {
+    const setup = await renderWelcome();
+    const welcome = locateText(setup, "Welcome");
+
+    await setup.mockMouse.click(welcome.column + 8, welcome.row);
+    await setup.mockMouse.click(diffToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "edited in the working tree");
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("README.md");
+    expect(frame).toContain(NERD.copy);
+    const title = locateText(setup, "README.md");
+
+    await setup.mockMouse.click(title.column, title.row);
+    await waitForTextGone(setup, "edited in the working tree");
+    expect(setup.captureCharFrame()).toContain("README.md");
+    await setup.mockMouse.click(title.column, title.row);
+    await waitForText(setup, "edited in the working tree");
+    setup.renderer.destroy();
+  });
+
   test("the changes tree clears after the launch repo becomes clean", async () => {
     const setup = await renderWelcome();
 
@@ -766,6 +929,49 @@ describe("the bare-launch welcome shell", () => {
     await waitForState(setup, () => diffToggleColumn(setup) === -1);
   });
 
+  test("the changes sidebar label opens one Changes tab beside Welcome and reactivates it", async () => {
+    const setup = await renderWelcome();
+
+    await setup.mockMouse.click(diffToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "edited in the working tree");
+    const firstHeader = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+    expect(firstHeader).toContain("Welcome");
+    expect(firstHeader).toContain("Changes");
+
+    const welcome = locateText(setup, "Welcome");
+
+    await setup.mockMouse.click(welcome.column, welcome.row);
+    await waitForText(setup, "Getting started");
+    await setup.mockMouse.click(diffToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "edited in the working tree");
+    expect(
+      setup
+        .captureCharFrame()
+        .split("\n")
+        [HEADER_ROW]!.match(/Changes/g),
+    ).toHaveLength(1);
+    setup.renderer.destroy();
+  });
+
+  test("the changes sidebar label activates Changes beside an open file tab", async () => {
+    const setup = await renderWelcome();
+
+    await waitForText(setup, "README.md");
+    const file = locateText(setup, "README.md");
+
+    await setup.mockMouse.click(file.column, file.row);
+    await waitForText(setup, "README.md");
+    await setup.mockMouse.click(diffToggleColumn(setup), HEADER_ROW);
+    await waitForText(setup, "edited in the working tree");
+    const header = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
+
+    expect(header).toContain("Welcome");
+    expect(header).toContain("README.md");
+    expect(header).toContain("Changes");
+    setup.renderer.destroy();
+  });
+
   test("a closed region draws its reopen divider in the header only, not full-height", async () => {
     const setup = await renderWelcome();