From b32d872a52fc97fa7f34713c841bcff6d17fe776 Mon Sep 17 00:00:00 2001
From: David McKay <david@copilotkit.ai>
Date: Sun, 8 Nov 2026 20:40:44 -0800
Subject: [PATCH] Keep a conversation's rail of turns clear of the Bot's
 replies

The rail drew from a 768px scroller, sized for the old 672px column. The column is 768px now, so between 768px and about 850px the rail's marks sat on the first letters of the Bot's replies. It now draws from 896px, where the column leaves 64px either side for the marks and a gap. A real-browser test sweeps the widths and checks the text starts at least 24px clear of the marks wherever the rail draws.
---
 .github/workflows/ci.yml                      |   6 +-
 CHANGELOG.md                                  |   2 +
 .../components/channels/transcript-rail.tsx   |   8 +-
 .../transcript-rail-clearance.fixture.tsx     |  52 +++++
 app/tests/transcript-rail-clearance.test.tsx  | 208 ++++++++++++++++++
 5 files changed, 269 insertions(+), 7 deletions(-)
 create mode 100644 app/tests/transcript-rail-clearance.fixture.tsx
 create mode 100644 app/tests/transcript-rail-clearance.test.tsx

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f96577d1e8..8620b3d9d4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -159,14 +159,14 @@ jobs:
       # The app's real-browser tests, here because this job has the browser: a running step's words
       # under reduced motion, where onboarding's Back lands beside the Mac window's buttons, the name
       # step's orb drawn whole under the step dashes, and the New Bot sheet's first four frameworks
-      # clearing its footer in an 800px window, which only a browser's layout resolves. The root
-      # playwright-core is the same version as
+      # clearing its footer in an 800px window, and a conversation's rail of turns clear of the Bot's
+      # text, which only a browser's layout resolves. The root playwright-core is the same version as
       # agent-computer's playwright, so it finds the Chromium installed above. The onboarding frame
       # reads the generated app config, which `bun test` alone doesn't write (the test script's
       # pretest does).
       - run: |
           bun run generate:app-config
-          bun test app/tests/tool-line-reduced-motion.test.tsx app/tests/onboarding-window-buttons.test.tsx app/tests/onboarding-orb-room.test.tsx app/tests/new-bot-sheet-fit.test.tsx
+          bun test app/tests/tool-line-reduced-motion.test.tsx app/tests/onboarding-window-buttons.test.tsx app/tests/onboarding-orb-room.test.tsx app/tests/new-bot-sheet-fit.test.tsx app/tests/transcript-rail-clearance.test.tsx
         env:
           OPENBOT_APP_BROWSER: '1'
       # Headed is the default for hosted computers, so it is tested as one: the computer starting its
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d9d58ddd9..9ceaad4eed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -168,6 +168,8 @@ deployment:
   host-grant-15407-… for shopper-bot".
 - An opened "Looked for a tool" step lists the tools the Bot found by name ("Send email on Gmail"),
   where it showed their ids and the descriptions the search returned to the Bot.
+- The marks for each turn on the left of a conversation no longer sit on the first letters of a
+  Bot's replies. They show only where the window leaves room for them beside the messages.
 
 ### Personal edition
 
diff --git a/app/src/components/channels/transcript-rail.tsx b/app/src/components/channels/transcript-rail.tsx
index 3c8b82b3fb..60c9b1f004 100644
--- a/app/src/components/channels/transcript-rail.tsx
+++ b/app/src/components/channels/transcript-rail.tsx
@@ -40,9 +40,9 @@ export function sameRail(a: RailProps, b: RailProps): boolean {
  * Hovering or focusing a mark previews its turn — what the person sent, and the start of the
  * reply — and choosing it goes there.
  *
- * Only where the margin is wide enough to hold it (`@3xl` of the scroller: the transcript's
- * `max-w-2xl` column and a gutter either side), and only once there is more than one turn to move
- * between.
+ * Only where the margin is wide enough to hold it clear of the messages (`@4xl` of the scroller,
+ * 896px: the transcript's 768px `max-w-3xl` column, and 64px either side for the marks and a gap
+ * after them), and only once there is more than one turn to move between.
  */
 export const TranscriptRail = memo(function TranscriptRail({
   turns,
@@ -64,7 +64,7 @@ export const TranscriptRail = memo(function TranscriptRail({
   return (
     <nav
       aria-label="Turns"
-      className="pointer-events-none absolute inset-y-0 left-2 z-10 hidden items-center @3xl:flex"
+      className="pointer-events-none absolute inset-y-0 left-2 z-10 hidden items-center @4xl:flex"
     >
       <ol
         className="pointer-events-auto flex max-h-[min(60vh,32rem)] flex-col overflow-y-auto py-2 [scrollbar-width:none]"
diff --git a/app/tests/transcript-rail-clearance.fixture.tsx b/app/tests/transcript-rail-clearance.fixture.tsx
new file mode 100644
index 0000000000..cce3c07fd8
--- /dev/null
+++ b/app/tests/transcript-rail-clearance.fixture.tsx
@@ -0,0 +1,52 @@
+import type { Message } from "@ag-ui/core";
+import { CopilotKitProvider } from "@copilotkit/react-core/v2";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createRoot } from "react-dom/client";
+import { ChatTranscript } from "@/components/channels/chat-transcript";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+/**
+ * A conversation of several turns, the transcript filling the window, as a page of its own for
+ * transcript-rail-clearance.test.tsx to bundle and load in Chromium. Enough turns for the rail to
+ * draw; the Bot's replies are prose, a list and a code block, so their text and their boxes start
+ * at the column's left edge.
+ */
+const REPLIES = [
+  "Here is what changed in the quarterly numbers since last week, and where the gap came from.",
+  "Three things stand out:\n\n- Signups rose in the second half\n- Churn held flat\n- Expansion revenue doubled",
+  "The query I ran:\n\n```sql\nselect region, sum(amount) from orders group by region;\n```",
+  "Shall I draft the summary for the team channel, or send it to you first?",
+];
+const messages: Message[] = REPLIES.flatMap((reply, index) => [
+  {
+    id: `u${index}`,
+    role: "user" as const,
+    content: `Question number ${index + 1} about the numbers`,
+  },
+  { id: `a${index}`, role: "assistant" as const, content: reply },
+]);
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+});
+
+const root = document.getElementById("root");
+if (root) {
+  createRoot(root).render(
+    <QueryClientProvider client={queryClient}>
+      <CopilotKitProvider runtimeUrl="/api/copilotkit">
+        <TooltipProvider>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              height: "100vh",
+            }}
+          >
+            <ChatTranscript messages={messages} restoring={false} />
+          </div>
+        </TooltipProvider>
+      </CopilotKitProvider>
+    </QueryClientProvider>,
+  );
+}
diff --git a/app/tests/transcript-rail-clearance.test.tsx b/app/tests/transcript-rail-clearance.test.tsx
new file mode 100644
index 0000000000..aaa0cde558
--- /dev/null
+++ b/app/tests/transcript-rail-clearance.test.tsx
@@ -0,0 +1,208 @@
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
+import { existsSync, mkdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import type { Browser, Page } from "playwright-core";
+import { compile } from "tailwindcss";
+
+/**
+ * The rail of turns beside a conversation never sits on the messages. Wherever it draws, the
+ * column's text starts at least 24px to the right of its marks.
+ *
+ * The rail sits in the scroller's left margin, its marks 8px to 40px from the edge. The column is
+ * 768px and centred, so its text starts 16px inside a margin of half of what is left over. With
+ * the rail shown from a 768px scroller, the margin was nothing at 768px and under 40px until about
+ * 850px, and the rail's marks drew over the first letters of the Bot's replies.
+ *
+ * Rendered in a real Chromium, because where the text lands beside the rail is the browser's
+ * layout. The transcript is the real component, bundled from the fixture beside this file; the
+ * stylesheet is the app's own `styles.css` built by Tailwind for exactly the classes on the page.
+ * The window is swept through the widths around where the rail starts to draw.
+ *
+ *   OPENBOT_APP_BROWSER=1 bun test app/tests/transcript-rail-clearance.test.tsx
+ *
+ * With OPENBOT_APP_SHOTS=<dir> it also saves screenshots at 1280px, 900px and 800px wide.
+ */
+const asked = process.env.OPENBOT_APP_BROWSER === "1";
+const shots = process.env.OPENBOT_APP_SHOTS;
+
+const APP = join(import.meta.dir, "..");
+const ORIGIN = "http://openbot.test";
+/** The least room between the rail's marks and the column's text. */
+const CLEARANCE = 24;
+const LAST_REPLY = "Shall I draft the summary";
+
+/** The fixture bundled for the browser. `@/lib/marks` is Vite's `import.meta.glob`, so no marks. */
+async function bundle(): Promise<string> {
+  const built = await Bun.build({
+    entrypoints: [
+      join(import.meta.dir, "transcript-rail-clearance.fixture.tsx"),
+    ],
+    target: "browser",
+    define: { "process.env.NODE_ENV": JSON.stringify("production") },
+    plugins: [
+      {
+        name: "no-marks",
+        setup(build) {
+          build.onResolve({ filter: /^@\/lib\/marks$/ }, () => ({
+            path: "marks",
+            namespace: "no-marks",
+          }));
+          build.onLoad({ filter: /.*/, namespace: "no-marks" }, () => ({
+            contents: "export const markFor = () => null;",
+            loader: "js",
+          }));
+        },
+      },
+    ],
+  });
+  if (!built.success) throw new AggregateError(built.logs, "bundle failed");
+  const script = built.outputs.find((output) => output.kind === "entry-point");
+  if (!script) throw new Error("bundle has no entry point");
+  return script.text();
+}
+
+/** Where `@import "<package>[/<file>]"` lands, by the package's `style` export as Vite reads it. */
+function packageStylesheet(id: string): string {
+  const parts = id.split("/");
+  const name = id.startsWith("@") ? parts.slice(0, 2).join("/") : parts[0];
+  const dir = [
+    join(APP, "node_modules", name),
+    join(APP, "..", "node_modules", name),
+  ].find(existsSync);
+  if (!dir) throw new Error(`no package for ${id}`);
+  const pkg = JSON.parse(readFileSync(join(dir, "package.json"), "utf8"));
+  const subpath = `.${id.slice(name.length)}`;
+  const entry = pkg.exports?.[subpath];
+  const file =
+    typeof entry === "string"
+      ? entry
+      : (entry?.style ?? entry?.default ?? pkg.main ?? "index.css");
+  return join(dir, file);
+}
+
+/** The app's stylesheet, built by Tailwind for these classes, as the app's build does. */
+async function stylesheet(classes: string[]): Promise<string> {
+  const tailwind = dirname(Bun.resolveSync("tailwindcss/package.json", APP));
+  const entry = join(APP, "src", "styles.css");
+  const compiler = await compile(readFileSync(entry, "utf8"), {
+    base: dirname(entry),
+    loadStylesheet: async (id, base) => {
+      const path =
+        id === "tailwindcss"
+          ? join(tailwind, "index.css")
+          : id.startsWith(".")
+            ? join(base, id)
+            : packageStylesheet(id);
+      return { path, base: dirname(path), content: readFileSync(path, "utf8") };
+    },
+  });
+  return compiler.build(classes);
+}
+
+let browser: Browser;
+let script: string;
+
+beforeAll(async () => {
+  if (!asked) return;
+  script = await bundle();
+  const { chromium } = await import("playwright-core");
+  // The CI job installs full Chromium without the headless shell.
+  browser = await chromium.launch({ channel: "chromium" });
+});
+
+afterAll(async () => {
+  await browser?.close();
+});
+
+/** The conversation open in a window this size, styled once it has drawn. */
+async function open(width: number, height: number): Promise<Page> {
+  const page = await browser.newPage({ viewport: { width, height } });
+  page.on("pageerror", (error) => console.error(error));
+  await page.route(`${ORIGIN}/**`, (route) => {
+    const path = new URL(route.request().url()).pathname;
+    if (path === "/")
+      return route.fulfill({
+        contentType: "text/html",
+        body: '<!doctype html><html lang="en"><head><meta charset="utf-8"></head><body><div id="root"></div><script type="module" src="/transcript.js"></script></body></html>',
+      });
+    if (path === "/transcript.js")
+      return route.fulfill({ contentType: "text/javascript", body: script });
+    return route.fulfill({ status: 404 });
+  });
+  await page.goto(`${ORIGIN}/`);
+  await page.getByText(LAST_REPLY).waitFor({ timeout: 8000 });
+  const classes = await page.evaluate(() => [
+    ...new Set(
+      [...document.querySelectorAll("[class]")].flatMap((element) => [
+        ...element.classList,
+      ]),
+    ),
+  ]);
+  await page.addStyleTag({ content: await stylesheet(classes) });
+  return page;
+}
+
+/** Whether the rail draws, its marks' right edge, and where the column's leftmost text starts. */
+function measure(page: Page) {
+  return page.evaluate(async () => {
+    await new Promise((done) =>
+      requestAnimationFrame(() => requestAnimationFrame(done)),
+    );
+    const rail = document.querySelector('nav[aria-label="Turns"]');
+    const marks = [...document.querySelectorAll('[data-slot="rail-mark"]')];
+    const shown = rail !== null && getComputedStyle(rail).display !== "none";
+    const railRight = Math.max(
+      ...marks.map((mark) => mark.getBoundingClientRect().right),
+    );
+    const column = document.querySelector(
+      '[data-slot="message-scroller-content"]',
+    );
+    let textLeft = Number.POSITIVE_INFINITY;
+    if (column) {
+      const walker = document.createTreeWalker(column, NodeFilter.SHOW_TEXT);
+      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        if (!node.textContent?.trim()) continue;
+        const range = document.createRange();
+        range.selectNodeContents(node);
+        for (const rect of range.getClientRects()) {
+          if (rect.width > 0) textLeft = Math.min(textLeft, rect.left);
+        }
+      }
+    }
+    return { shown, railRight, textLeft };
+  });
+}
+
+describe.skipIf(!asked)("the rail of turns beside a conversation", () => {
+  test("wherever it draws, the Bot's text starts clear of its marks", async () => {
+    const page = await open(1280, 800);
+    try {
+      const crowded: string[] = [];
+      let drawn = 0;
+      const widths = [];
+      for (let width = 740; width <= 1040; width += 8) widths.push(width);
+      widths.push(1280);
+      for (const width of widths) {
+        await page.setViewportSize({ width, height: 800 });
+        const { shown, railRight, textLeft } = await measure(page);
+        if (!shown) continue;
+        drawn += 1;
+        const gap = Math.round(textLeft - railRight);
+        if (gap < CLEARANCE) crowded.push(`${width}px wide: ${gap}px`);
+      }
+      if (shots) {
+        mkdirSync(shots, { recursive: true });
+        for (const width of [1280, 900, 800]) {
+          await page.setViewportSize({ width, height: 800 });
+          await measure(page);
+          await page.screenshot({ path: join(shots, `${width}.png`) });
+        }
+      }
+      // It does draw where there is room, so the clearance above was measured, not skipped.
+      expect(drawn).toBeGreaterThan(0);
+      expect(crowded).toEqual([]);
+    } finally {
+      await page.close();
+    }
+  }, 60_000);
+});