fix(timeline): thought-rail caps, continuity, and density

packages/app-bundle/overlay/packages/app/src/index.css

@@ -376,3 +376,33 @@
   }
 }
 
+/* The thought rail's live node: hollow and breathing while the step is in
+   flight, matching the website's rail-dot. Honours reduced motion.
+
+   It breathes by SCALE plus an expanding ring — never by its own opacity. Fading
+   it was the first approach here and it was wrong: at the old 0.45 floor the mark
+   composited to #3E3E3E on the dark ground = 1.87:1, well under the 3:1 a UI mark
+   needs. The one element telling you a step is in flight went sub-threshold for a
+   chunk of every cycle. Scale carries the motion instead, so the ink never moves
+   and the dot holds 4.58:1 dark / 5.74:1 light right through the loop. */
+[data-slot="thought-rail-dot"].thought-rail-dot--running {
+  animation: thought-rail-breathe 1.8s ease-in-out infinite;
+}
+@keyframes thought-rail-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
+  }
+  50% {
+    transform: scale(1.25);
+    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 0%, transparent);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="thought-rail-dot"].thought-rail-dot--running {
+    animation: none;
+    transform: none;
+    box-shadow: none;
+  }
+}

packages/app-bundle/overlay/packages/app/src/pages/session/timeline/message-timeline.tsx

@@ -19,6 +19,7 @@ import { useMutation } from "@tanstack/solid-query"
 import { createVirtualizer, defaultRangeExtractor, elementScroll, type VirtualItem } from "@tanstack/solid-virtual"
 import { Accordion } from "@opencode-ai/ui/accordion"
 import { AmicodeEntityRail } from "@opencode-ai/ui/amicode-entity-rail"
+import { ThoughtRail, ThoughtRailLabel, THOUGHT_RAIL_INSET, shouldRenderRail } from "./thought-rail"
 import { ThinkingLine, turnTokens } from "@opencode-ai/ui/amicode-thinking"
 import {
   AmicodeEntityView,
@@ -923,8 +924,6 @@ export function MessageTimeline(props: {
     const rawTitle = sessionTitle(sync().session.get(id)?.title) ?? childTitle() ?? "session"
     const safe = rawTitle.replace(/[^\w.-]+/g, "-").slice(0, 64) || "session"
     const filename = `${safe}-${id.slice(0, 8)}.md`
-    // VS Code webview (iframe): route through the extension's save-file bridge
-    // so the host writes the file with a save dialog. Plain browser: blob download.
     if (window.parent !== window) {
       try {
         const dataUrl = `data:text/markdown;base64,${btoa(unescape(encodeURIComponent(text)))}`
@@ -1318,6 +1317,19 @@ export function MessageTimeline(props: {
       const row = input.row()
       return row._tag === "AssistantPart" && row.previousAssistantPart
     }
+    const assistantPart = () => input.row()._tag === "AssistantPart"
+    const railLabel = () => {
+      const row = input.row()
+      return row._tag === "AssistantPart" ? row.railLabel : undefined
+    }
+    // The thought rail: a spine down a turn's assistant steps. Drawn per-row
+    // because the timeline is virtualised and consecutive rows share no ancestor.
+    const rail = () => {
+      const row = input.row()
+      if (row._tag !== "AssistantPart") return undefined
+      if (!shouldRenderRail(row)) return undefined
+      return { first: !row.previousAssistantPart, last: row.lastAssistantPart, running: row.turnRunning }
+    }
 
     return (
       <div
@@ -1332,7 +1344,15 @@ export function MessageTimeline(props: {
         }}
       >
         <div data-component="session-turn" class="min-w-0 w-full relative" style={{ height: "auto" }}>
-          {input.children}
+          <Show when={rail()}>{(r) => <ThoughtRail first={r().first} last={r().last} running={r().running} />}</Show>
+          {/* The gutter is reserved for EVERY assistant part, not only the ones
+              that draw a rail. Gating it on rail() left a single-step turn's
+              content 16px to the left of a multi-step turn's, so the column
+              stepped in and out as turns changed length. */}
+          <div classList={{ "min-w-0 w-full": true, [THOUGHT_RAIL_INSET]: assistantPart() }}>
+            <Show when={rail() && railLabel()}>{(label) => <ThoughtRailLabel label={label()} />}</Show>
+            {input.children}
+          </div>
         </div>
       </div>
     )