feat(webui): add prompt rail navigation

webui/src/tests/thread-viewport.test.tsx

@@ -170,6 +170,51 @@ describe("ThreadViewport", () => {
     expect(screen.getByText("message 299")).toBeInTheDocument();
   });
 
+  it("renders a prompt rail that jumps to user messages", async () => {
+    const promptMessages = makeLongMessages(5);
+    const { container } = render(
+      <ThreadViewport
+        messages={promptMessages}
+        isStreaming={false}
+        composer={<div />}
+      />,
+    );
+
+    const scroller = container.firstElementChild?.firstElementChild as HTMLElement;
+    const scrollTo = vi.fn();
+    Object.defineProperties(scroller, {
+      scrollHeight: { configurable: true, value: 1800 },
+      clientHeight: { configurable: true, value: 600 },
+      scrollTop: { configurable: true, value: 0 },
+      scrollTo: { configurable: true, value: scrollTo },
+    });
+
+    const promptEls = Array.from(
+      container.querySelectorAll<HTMLElement>("[data-user-prompt-id]"),
+    );
+    expect(promptEls).toHaveLength(5);
+    promptEls.forEach((el, index) => {
+      Object.defineProperty(el, "offsetTop", {
+        configurable: true,
+        value: index * 360,
+      });
+    });
+
+    await act(async () => {
+      window.dispatchEvent(new Event("resize"));
+      await new Promise<void>((resolve) => window.requestAnimationFrame(() => resolve()));
+    });
+
+    expect(screen.getByLabelText("User prompt navigation")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Jump to prompt: message 3" }));
+
+    expect(scrollTo).toHaveBeenCalledWith({
+      top: 1064,
+      behavior: "smooth",
+    });
+  });
+
   it("expands the window start to avoid cutting an agent activity cluster", () => {
     const clustered = makeLongMessages(200);
     clustered.splice(