refactor(workspace): drop the page header, move Add lane and Tools onto the lanes

The title and the four counters said a second time what the lane strip
already shows lane by lane (liveness dot, ⚠ marker), so they only cost a row
of height on a screen whose point is the terminal. `GET /api/lanes` still
returns `counts` for other callers.

Add lane becomes the strip's FIRST tile — creating a lane is the same kind of
act as picking one — and the per-lane Tools menu (agents install / mcp sync /
sync-base check) moves onto the lane-detail header row beside the pipeline
picker and the Model select, next to the lane it acts on.
This commit is contained in:
2026-09-17 13:20:14 +07:00
parent af2ad63a18
commit 0e38d42cf9
3 changed files with 35 additions and 122 deletions
+8 -22
View File
@@ -328,19 +328,11 @@ afterEach(() => {
});
describe("Workspace page — lane integration", () => {
it("lane strip lists lanes and counters match the API response", async () => {
it("lane strip lists the lanes the API returned", async () => {
await renderWorkspace();
// Verify lanes are rendered
expect(screen.getByTestId("lane-tile-1").textContent).toContain("Lane A");
expect(screen.getByTestId("lane-tile-2").textContent).toContain("Lane B");
// Verify counters are rendered with correct values
const counterTexts = screen.getAllByText((_, element) => {
if (!element) return false;
return element.textContent?.includes("2 lanes") || false;
});
expect(counterTexts.length).toBeGreaterThan(0);
});
it("selecting a lane switches the pipeline and run id", async () => {
@@ -497,22 +489,16 @@ describe("Workspace page — lane integration", () => {
});
describe("Workspace layout", () => {
it("shows the four counters with the values the API reported", async () => {
countsToReturn = { total: 2, running: 1, needs_you: 3, dead: 4 };
it("opens the add-lane modal from the strip's first tile", async () => {
const user = userEvent.setup();
await renderWorkspace();
expect(screen.getByTestId("count-total").textContent).toContain("2");
expect(screen.getByTestId("count-running").textContent).toContain("1");
expect(screen.getByTestId("count-needs-you").textContent).toContain("3");
expect(screen.getByTestId("count-dead").textContent).toContain("4");
});
// The tile leads the strip, so it is reachable without scrolling past lanes.
const strip = screen.getByTestId("lane-strip");
expect(strip.firstElementChild).toBe(screen.getByTestId("lane-tile-add"));
it("hides the needs-you and dead counters when they are zero", async () => {
countsToReturn = { total: 2, running: 1, needs_you: 0, dead: 0 };
await renderWorkspace();
expect(screen.queryByTestId("count-needs-you")).toBeNull();
expect(screen.queryByTestId("count-dead")).toBeNull();
await user.click(screen.getByTestId("lane-tile-add"));
expect(await screen.findByText("Create a lane from a working directory")).toBeInTheDocument();
});
it("gives every lane a tile in the carousel", async () => {
@@ -5097,42 +5097,20 @@ exports[`screen snapshots > Run 1`] = `
class="space-y-5"
>
<div
class="flex flex-wrap items-center gap-3 border-b border-border pb-3"
class="flex min-h-0 flex-1 flex-col gap-4"
>
<h2
class="text-base font-semibold tracking-tight text-fg-primary"
>
Lanes
</h2>
<div
class="flex flex-wrap items-center gap-1.5 text-xs"
>
<span
class="rounded-full bg-surface-2 px-2.5 py-0.5 text-fg-secondary"
data-testid="count-total"
>
0
lanes
</span>
<span
class="rounded-full bg-blue-600/20 px-2.5 py-0.5 text-blue-400"
data-testid="count-running"
>
0
running
</span>
</div>
<div
class="ml-auto flex items-center gap-2"
class="flex shrink-0 flex-row gap-2 overflow-x-auto pb-1"
data-testid="lane-strip"
>
<button
class="flex items-center gap-1.5 rounded border border-border-light px-3 py-1 text-xs text-fg-secondary transition-colors hover:border-border-light hover:text-fg-primary"
class="flex w-56 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-border-light p-3 text-[13px] font-medium text-fg-secondary transition-colors hover:border-accent hover:bg-accent/5 hover:text-fg-primary"
data-testid="lane-tile-add"
title="Create a lane from a working directory"
type="button"
>
<svg
class="lucide lucide-plus h-3.5 w-3.5"
class="lucide lucide-plus h-4 w-4"
fill="none"
height="24"
stroke="currentColor"
@@ -5152,15 +5130,6 @@ exports[`screen snapshots > Run 1`] = `
</svg>
Add lane
</button>
</div>
</div>
<div
class="flex min-h-0 flex-1 flex-col gap-4"
>
<div
class="flex shrink-0 flex-row gap-2 overflow-x-auto pb-1"
data-testid="lane-strip"
>
<p
class="text-sm text-fg-muted"
>