diff --git a/packages/web/e2e/outline.spec.mjs b/packages/web/e2e/outline.spec.mjs
index 56a6340..d1d0b6e 100644
--- a/packages/web/e2e/outline.spec.mjs
+++ b/packages/web/e2e/outline.spec.mjs
@@ -4,10 +4,15 @@
* tick rail (it measures the free margin live and hides itself when a docked panel eats
* the room — also asserted here).
*
- * Flow: three exchanges in one session (the mock answers the first with
+ * Flow (test 1): five exchanges in one session (the mock answers the first with
* thinking + exec_command and later ones with plain text — hasToolResult is history-wide),
- * then a fresh session whose FIRST message is "slow stream test" for a 40-line tool output
- * long enough to scroll inside.
+ * crossing the outline's five-turn visibility gate on the way — at four turns neither the
+ * rail nor the toolbar fallback renders — then a fresh session whose FIRST message is
+ * "slow stream test" for a 40-line tool output long enough to scroll inside.
+ *
+ * Test 2 drives one session to 45 exchanges to watch the rail's sliding window: at most
+ * 20 ticks either side of the reading position, global turn numbers intact, ellipsis dots
+ * standing in for the turns hidden past an edge.
*/
import { test, expect } from "@playwright/test";
import { provisionAndLogin } from "./auth.mjs";
@@ -22,9 +27,11 @@ test.use({ viewport: { width: 1440, height: 860 } });
/** Reply completion marker: every mock turn-2 ends with this exact sentence. */
const REPLY = "Command finished";
-test("minimap ticks + hover preview + jump, sticky group header, ArrowUp history recall", async ({
- page,
-}) => {
+/**
+ * Provision the shared e2e user, point the project's default model at the mock LLM, and
+ * return a factory for fresh sessions in that project (idempotent — both tests call it).
+ */
+async function setup(page) {
await provisionAndLogin(page.request, U, P);
const projects = await (await page.request.get(`${BASE}/api/projects`)).json();
const projectId = projects.projects[0].projectId;
@@ -43,8 +50,7 @@ test("minimap ticks + hover preview + jump, sticky group header, ArrowUp history
},
});
expect(put.ok(), "put models").toBeTruthy();
-
- const newSession = async () => {
+ return async () => {
const res = await (
await page.request.post(`${BASE}/api/projects/${projectId}/agents/default_agent/sessions`, {
data: { provider: "custom", modelId: "claude-4-8", approvalMode: "allow-all" },
@@ -52,31 +58,62 @@ test("minimap ticks + hover preview + jump, sticky group header, ArrowUp history
).json();
return res.session.sessionId;
};
- const ta = page.getByPlaceholder(/输入消息/);
- const send = async (text, replies) => {
- await ta.click();
- await ta.fill(text);
- await page.keyboard.press("Enter");
- await page.waitForFunction(
- ([marker, want]) => document.body.innerText.split(marker).length - 1 >= want,
- [REPLY, replies],
- { timeout: 60000 },
- );
- };
+}
- // --- session 1: three exchanges -> outline entries, jump, scrollspy, history ---
+/** Send a message and wait until the body carries `replies` completed mock replies. */
+const sender = (page, ta) => async (text, replies) => {
+ await ta.click();
+ await ta.fill(text);
+ await page.keyboard.press("Enter");
+ await page.waitForFunction(
+ ([marker, want]) => document.body.innerText.split(marker).length - 1 >= want,
+ [REPLY, replies],
+ { timeout: 60000 },
+ );
+};
+
+test("minimap ticks + hover preview + jump, five-turn gate, sticky group header, ArrowUp history recall", async ({
+ page,
+}) => {
+ const newSession = await setup(page);
+ const ta = page.getByPlaceholder(/输入消息/);
+ const send = sender(page, ta);
+
+ // --- session 1: five exchanges -> visibility gate, outline entries, jump, scrollspy, history ---
await page.goto(`${BASE}/chat/${await newSession()}`);
await ta.waitFor();
await send("第一问：项目结构", 1);
await send("第二问：运行检查", 2);
await send("第三问：总结结果", 3);
+ await send("第四问：整理清单", 4);
- // One tick per exchange in the gutter minimap; auto-follow parked the stream at the
- // bottom, so the newest exchange is the active tick. Message text is NOT duplicated
- // into the DOM at rest — the preview card exists only while hovering.
+ // Below five turns neither outline shape renders: no rail ticks even though the gutter
+ // fits them…
const ticks = page.locator("[data-outline-tick]");
+ const menuButton = page.getByRole("button", { name: "对话索引" });
+ await expect(ticks).toHaveCount(0);
+ // …and no toolbar fallback either while a docked panel eats the gutter. Wait until the
+ // stream really is too narrow for the rail (the exact condition the fallback keys on)
+ // plus a paint, so the button's absence proves the gate — not a panel still opening.
+ await page.getByRole("button", { name: "打开工作区" }).click();
+ await page.waitForFunction(() => {
+ const c = document.querySelector("[data-outline-anchor]")?.closest(".overflow-y-auto");
+ return c ? (c.clientWidth - 768) / 2 < 56 : false;
+ });
+ await page.evaluate(
+ () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))),
+ );
+ await expect(menuButton).toHaveCount(0);
+ await page.getByRole("button", { name: "打开工作区" }).click();
+
+ // The fifth exchange crosses the gate: one tick per exchange in the gutter minimap;
+ // auto-follow parked the stream at the bottom, so the newest exchange is the active
+ // tick. Message text is NOT duplicated into the DOM at rest — the preview card exists
+ // only while hovering. Five entries don't outgrow the rail window: no overflow dots.
+ await send("第五问：回顾结论", 5);
const card = page.locator("[data-outline-card]");
- await expect(ticks).toHaveCount(3);
+ await expect(ticks).toHaveCount(5);
+ await expect(page.locator("[data-outline-overflow]")).toHaveCount(0);
// Park at the live bottom explicitly before asserting "bottom → newest tick active":
// that mapping is the semantic under test, not auto-follow's timing under load.
await page.evaluate(() => {
@@ -85,7 +122,7 @@ test("minimap ticks + hover preview + jump, sticky group header, ArrowUp history
});
await expect(page.locator("[data-outline-tick][aria-current]")).toHaveAttribute(
"aria-label",
- /第 3 轮/,
+ /第 5 轮/,
);
await expect(card).toHaveCount(0);
@@ -110,19 +147,19 @@ test("minimap ticks + hover preview + jump, sticky group header, ArrowUp history
expect(Math.abs(jumpDelta)).toBeLessThan(40);
// The rail lives in the free gutter: a docked panel that eats the slack hides it and
- // the index moves to the toolbar dropdown (navigation stays reachable); closing the
- // panel restores the rail (live measurement, not a breakpoint).
+ // the index moves to the toolbar dropdown (navigation stays reachable, and the dropdown
+ // lists ALL entries — no windowing there); closing the panel restores the rail (live
+ // measurement, not a breakpoint).
await page.getByRole("button", { name: "打开工作区" }).click();
await expect(ticks).toHaveCount(0);
- const menuButton = page.getByRole("button", { name: "对话索引" });
await menuButton.click();
const menuEntries = page.locator("[data-outline-menu-entry]");
- await expect(menuEntries).toHaveCount(3);
+ await expect(menuEntries).toHaveCount(5);
await expect(menuEntries.first()).toContainText("第一问：项目结构");
await menuEntries.nth(2).click(); // jump and close
await expect(menuEntries).toHaveCount(0);
await page.getByRole("button", { name: "打开工作区" }).click();
- await expect(ticks).toHaveCount(3);
+ await expect(ticks).toHaveCount(5);
await expect(menuButton).toHaveCount(0);
// Phone-narrow: no rail either, the toolbar index instead; the agents-panel button
@@ -132,14 +169,26 @@ test("minimap ticks + hover preview + jump, sticky group header, ArrowUp history
await expect(menuButton).toBeVisible();
await expect(page.getByText("智能体面板")).toBeHidden();
await page.setViewportSize({ width: 1440, height: 860 });
- await expect(ticks).toHaveCount(3);
+ await expect(ticks).toHaveCount(5);
+
+ // Scaled root font (browser font-size preference): the max-w-3xl column is rem-based,
+ // so at 20px root font it becomes 960px — on a 1000px stream a fixed 768px assumption
+ // would still call the gutter wide enough and leave the ticks ON the prose. The fit
+ // must track the real column width: rail hidden, toolbar fallback in its place.
+ await page.evaluate(() => (document.documentElement.style.fontSize = "20px"));
+ await page.setViewportSize({ width: 1000, height: 860 });
+ await expect(ticks).toHaveCount(0);
+ await expect(menuButton).toBeVisible();
+ await page.evaluate(() => (document.documentElement.style.fontSize = ""));
+ await page.setViewportSize({ width: 1440, height: 860 });
+ await expect(ticks).toHaveCount(5);
// ↑ walks back through this session's inputs, newest first; a second ↑ goes older.
await ta.click();
await page.keyboard.press("ArrowUp");
- await expect(ta).toHaveValue("第三问：总结结果");
+ await expect(ta).toHaveValue("第五问：回顾结论");
await page.keyboard.press("ArrowUp");
- await expect(ta).toHaveValue("第二问：运行检查");
+ await expect(ta).toHaveValue("第四问：整理清单");
// ↓ walks forward and past the newest restores the (empty) draft.
await page.keyboard.press("ArrowDown");
await page.keyboard.press("ArrowDown");
@@ -149,7 +198,7 @@ test("minimap ticks + hover preview + jump, sticky group header, ArrowUp history
await ta.press("End");
await page.keyboard.type("，补充");
await page.keyboard.press("ArrowUp");
- await expect(ta).toHaveValue("第三问：总结结果，补充");
+ await expect(ta).toHaveValue("第五问：回顾结论，补充");
await ta.fill("");
// --- session 2: long tool output -> sticky header ---
@@ -198,3 +247,58 @@ test("minimap ticks + hover preview + jump, sticky group header, ArrowUp history
expect(landed).toBeGreaterThan(-5);
expect(landed).toBeLessThan(300);
});
+
+test("the tick rail windows to the turns around the reading position on long conversations", async ({
+ page,
+}) => {
+ // 45 sequential exchanges against a 90s default budget: give the loop room. Only the
+ // first send takes the mock's two-round tool path (hasToolResult is history-wide), so
+ // the other 44 are single-round text replies.
+ test.setTimeout(300_000);
+ const TURNS = 45;
+ const WINDOW = 41; // 20 ticks before + the active one + 20 after
+
+ const newSession = await setup(page);
+ await page.goto(`${BASE}/chat/${await newSession()}`);
+ const ta = page.getByPlaceholder(/输入消息/);
+ const send = sender(page, ta);
+ await ta.waitFor();
+ for (let n = 1; n <= TURNS; n++) await send(`第 ${n} 问`, n);
+
+ // Parked at the live bottom the active turn is the newest, and the rail shows the LAST
+ // 41 turns: labels keep their GLOBAL numbers (the first visible tick is turn 5, not a
+ // renumbered turn 1) and the ellipsis dots mark the turns hidden above — none below.
+ const ticks = page.locator("[data-outline-tick]");
+ await page.evaluate(() => {
+ const c = document.querySelector("[data-outline-anchor]").closest(".overflow-y-auto");
+ c.scrollTop = c.scrollHeight;
+ });
+ await expect(ticks).toHaveCount(WINDOW);
+ await expect(page.locator("[data-outline-tick][aria-current]")).toHaveAttribute(
+ "aria-label",
+ /第 45 轮/,
+ );
+ await expect(ticks.first()).toHaveAttribute("aria-label", /第 5 轮/);
+ await expect(ticks.last()).toHaveAttribute("aria-label", /第 45 轮/);
+ await expect(page.locator('[data-outline-overflow="above"]')).toHaveCount(1);
+ await expect(page.locator('[data-outline-overflow="below"]')).toHaveCount(0);
+
+ // Jumping to the earliest visible tick (turn 5) recenters the window at the start:
+ // turns 1–41 render and the hidden turns move below the window.
+ await ticks.first().click();
+ await expect(page.locator("[data-outline-tick][aria-current]")).toHaveAttribute(
+ "aria-label",
+ /第 5 轮/,
+ );
+ await expect(ticks.first()).toHaveAttribute("aria-label", /第 1 轮/);
+ await expect(ticks.last()).toHaveAttribute("aria-label", /第 41 轮/);
+ await expect(page.locator('[data-outline-overflow="above"]')).toHaveCount(0);
+ await expect(page.locator('[data-outline-overflow="below"]')).toHaveCount(1);
+
+ // The toolbar dropdown (shown once the docked panel hides the rail) still lists EVERY
+ // turn — the window is rail-only; the dropdown list scrolls instead.
+ await page.getByRole("button", { name: "打开工作区" }).click();
+ await expect(ticks).toHaveCount(0);
+ await page.getByRole("button", { name: "对话索引" }).click();
+ await expect(page.locator("[data-outline-menu-entry]")).toHaveCount(TURNS);
+});
diff --git a/packages/web/src/features/chat/conversation-outline.tsx b/packages/web/src/features/chat/conversation-outline.tsx
index 4002514..aafebf0 100644
--- a/packages/web/src/features/chat/conversation-outline.tsx
+++ b/packages/web/src/features/chat/conversation-outline.tsx
@@ -10,15 +10,22 @@
* hit-transparent (pointer events only on the ticks), so wheel scrolling anywhere in
* the gutter keeps scrolling the stream. Rendered into MessageStream's relative wrapper
* via its `outline` slot, so the rail spans exactly the stream area — never the composer.
+ * Long conversations don't stack every turn: the rail renders a sliding window of ticks
+ * around the reading position (`windowOutline`, its width sized to the measured rail
+ * height so the stack can never spill over the toolbar or composer), tiny edge dots
+ * standing in for the turns hidden past it, and labels keep their global turn numbers.
*
* - `OutlineMenuButton` — the fallback for when the rail cannot show: a toolbar icon
* button (top right) opening a dropdown index of the same entries, tap to jump. Phones
* are the primary case (no hover pointer, no gutter), but it also covers a desktop
* window whose gutter a docked panel has eaten — navigation stays reachable either way.
+ * The dropdown list scrolls, so it stays complete — no windowing here.
*
* Which shape shows is the owner's call via `useOutlineRailFit`: the rail needs a
* hover-capable pointer and a live-measured gutter (ResizeObserver — window resizes and
* panel drags both count), and the menu button renders exactly when the rail cannot.
+ * Below OUTLINE_MIN_TURNS turns neither shape renders at all — that short a conversation
+ * needs no index.
*
* Jump targets are the [data-outline-anchor] wrappers MessageItems stamps at the top
* level only, queried scoped to the stream's scroll container (item ids repeat across
@@ -33,7 +40,13 @@ import { S } from "../../lib/strings";
import { Dropdown } from "../../components/ui/dropdown";
import { GlyphIcon } from "../../components/ui/glyph-icon";
import type { OutlineEntry } from "./outline-model";
-import { previewText } from "./outline-model";
+import {
+ OUTLINE_MIN_TURNS,
+ previewText,
+ railTickPitch,
+ railWindowHalf,
+ windowOutline,
+} from "./outline-model";
/** Panel-with-list glyph (24×24 line path) for the toolbar menu button. */
const OUTLINE_ICON =
@@ -52,16 +65,12 @@ const FLASH_MS = 1000;
*/
const GUTTER_MIN_PX = 56;
-/** The stream column cap the gutter derives from (Tailwind max-w-3xl). */
-const COLUMN_MAX_PX = 768;
+/** The stream column cap the gutter derives from (Tailwind max-w-3xl = 48rem). */
+const COLUMN_MAX_REM = 48;
/** The rail's hover-preview interaction needs a pointer that can hover. */
const HOVER_QUERY = "(hover: hover) and (pointer: fine)";
-/** Tick pitch bounds (px): compress toward MIN as turns outgrow the rail, never past hoverability. */
-const TICK_PITCH_MAX = 12;
-const TICK_PITCH_MIN = 5;
-
export interface OutlineRailFit {
/** Whether the rail can show: hover-capable pointer AND a wide-enough measured gutter. */
shown: boolean;
@@ -96,7 +105,11 @@ export function useOutlineRailFit(
const el = scrollRef.current;
if (!el) return;
const measure = () => {
- const gutter = (el.clientWidth - COLUMN_MAX_PX) / 2;
+ // The column cap is rem-based: resolve it against the live root font size, so
+ // browser font scaling (which widens the real column without touching the
+ // container) can't leave the rail sitting on top of the prose.
+ const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+ const gutter = (el.clientWidth - COLUMN_MAX_REM * rem) / 2;
setFit({ gutterOk: gutter >= GUTTER_MIN_PX, height: el.clientHeight });
};
measure();
@@ -156,6 +169,26 @@ function jumpToAnchor(container: HTMLElement | null, id: number): void {
flashTimer = window.setTimeout(() => anchor.classList.remove("outline-flash"), FLASH_MS);
}
+/**
+ * Edge hint for the rail's sliding window: a tiny vertical ellipsis of dots where turns
+ * are hidden past the window. Purely decorative and non-interactive — it never re-enables
+ * pointer events inside the hit-transparent overlay, and it hides from assistive tech
+ * (the ticks' global turn numbers already tell that story).
+ */
+function RailOverflowMark({ edge }: { edge: "above" | "below" }) {
+ return (
+
+ {[0, 1, 2].map((i) => (
+
+ ))}
+
+ );
+}
+
/** The turn's reply preview for a card/menu row: text, an "answering" pulse for the newest running turn, or "". */
function answerPreview(
entry: OutlineEntry,
@@ -194,7 +227,7 @@ export function ConversationOutline({
// cheap, and keying on version also re-binds after the stream remounts on a session switch.
useEffect(() => {
const el = scrollRef.current;
- if (!fit.shown || !el || entries.length === 0) return;
+ if (!fit.shown || !el || entries.length < OUTLINE_MIN_TURNS) return;
const ids = new Set(entries.map((entry) => entry.anchorId));
let raf: number | null = null;
const compute = () => {
@@ -215,7 +248,7 @@ export function ConversationOutline({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fit.shown, scrollRef, entries.length, version]);
- if (!fit.shown || entries.length === 0) return null;
+ if (!fit.shown || entries.length < OUTLINE_MIN_TURNS) return null;
/** Tick center Y relative to the rail overlay (the preview card anchors to it, clamped in render). */
const tickTop = (e: MouseEvent | FocusEvent) => {
@@ -223,14 +256,26 @@ export function ConversationOutline({
return rect.top + rect.height / 2 - (navRef.current?.getBoundingClientRect().top ?? 0);
};
- // Compress the pitch as turns outgrow the rail (~32px breathing room); past ~140 turns
- // at minimum pitch the stack simply clips — a conversation that long stopped being
- // scannable by any other means well before the map does.
- const pitch = Math.max(
- TICK_PITCH_MIN,
- Math.min(TICK_PITCH_MAX, Math.floor((fit.height - 32) / entries.length)),
+ // The rail renders a sliding window around the reading position, not every turn: an
+ // unbounded stack would outgrow the rail (and creep over the toolbar and composer) no
+ // matter how hard the pitch compresses. The half-width adapts to the measured rail
+ // height so the stack always fits; `start` is the windowed ticks' global offset —
+ // labels and active tracking stay in global turn numbers.
+ const half = railWindowHalf(fit.height);
+ const { start, end } = windowOutline(
+ entries.length,
+ entries.findIndex((en) => en.anchorId === activeId),
+ half,
+ half,
);
- const hovered = hover === null ? null : (entries.find((en) => en.anchorId === hover.id) ?? null);
+ const visible = entries.slice(start, end);
+
+ // Pitch compresses toward MIN as the window outgrows the rail; railWindowHalf already
+ // sized the window so the stack (plus edge dots) fits fit.height at minimum pitch.
+ const pitch = railTickPitch(fit.height, visible.length);
+ // Looked up in the windowed slice: a tick the window slid away from mid-hover unmounts
+ // without a mouseleave, and its card must not linger.
+ const hovered = hover === null ? null : (visible.find((en) => en.anchorId === hover.id) ?? null);
const cardAnswer = hovered === null ? "" : answerPreview(hovered, entries, running, 160);
return (
@@ -242,8 +287,12 @@ export function ConversationOutline({
aria-label={S.chat.outlineTitle}
className="pointer-events-none absolute inset-y-0 left-0 z-10 flex flex-col items-start justify-center"
>
-
- {entries.map((entry, i) => {
+ {/* max-h + clip is a safety net only: the height-adaptive window keeps the stack
+ inside the rail by construction, and this guarantees a mismeasure still can't
+ push ticks (which take pointer events) out over the toolbar or composer. */}
+