feat(app): travelling harmonic dot + bottom-up card entry animation

The harmonic dot now tracks the LAST prose-fragment card within a running
text-part row rather than staying pinned to the first text line. As new
paragraph cards settle during streaming, the dot slides smoothly down the
rail (CSS transition, 150ms ease-out), keeping the loading indicator
visible near the newest content.

Changes:
- measureDotCentre targets last [data-prose-fragment] instead of first text
  node when fragments are present (works for both running and done states)
- ThoughtRail accepts a settled prop; dot gets .thought-rail-dot--settled
  class after first measurement to gate the transition (prevents slide on
  initial mount)
- Rail line gets matching height transition so spine extends in sync
- Prose-fragment cards get a dedicated entry animation: 150ms ease-out,
  translateY(10px) + opacity fade, no blur (snappier than the general
  timeline-enter)
- All transitions/animations honour prefers-reduced-motion: reduce
- Sanity ceiling (80px) removed for fragment-targeting measurements since
  the dot can travel far down a long response

Closes #265

Author: jeonghun-jj-lee

packages/app/src/design-polish.css

@@ -209,6 +209,23 @@
 [data-part-enter] {
   animation: timeline-enter var(--motion-enter-duration) var(--motion-enter-ease) backwards;
 }
+/* Prose-fragment cards get a snappier, blur-free entrance (#265): 150ms
+   ease-out, 10px rise, no blur. Faster than the general timeline-enter because
+   these settle during active streaming — the eye is already watching the bottom
+   edge, so the entrance can be crisp without startling. */
+[data-prose-fragment][data-part-enter] {
+  animation: prose-fragment-enter 150ms ease-out backwards;
+}
+@keyframes prose-fragment-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 /* The open cascade holds at frame 0 (opacity 0, risen, blurred) until the
    timeline has settled at the bottom — released by removing
    [data-entrance-pending] (message-timeline.tsx entranceReady). Also keeps
@@ -262,6 +279,9 @@
     --motion-enter-rise: 0px;
     --motion-enter-blur: 0px;
   }
+  [data-prose-fragment][data-part-enter] {
+    animation: none;
+  }
 }
 
 /* ── inline code: readable in both schemes ── */

packages/app/src/index.css

@@ -382,6 +382,18 @@
 .thought-rail-dot--harmonic {
   animation: thought-rail-grow 150ms ease-out both;
 }
+/* Travelling dot (#265): after the first measurement settles, the dot
+   transitions smoothly to track the latest prose-fragment card. The settled
+   class gates the transition so the initial mount uses the grow animation
+   alone — no slide from top:0 to the first measured position. */
+.thought-rail-dot--settled {
+  transition: top 150ms ease-out;
+}
+/* The rail line extends in sync with the dot — same timing so the spine
+   grows as the dot descends. */
+[data-slot="thought-rail-line"] {
+  transition: height 150ms ease-out;
+}
 @keyframes thought-rail-grow {
   from {
     transform: scale(0.538); /* 7/13 — starts at done-dot size */
@@ -400,4 +412,10 @@
     /* SMIL respects this; browsers also pause SMIL under reduced-motion */
     display: none;
   }
+  .thought-rail-dot--settled {
+    transition: none;
+  }
+  [data-slot="thought-rail-line"] {
+    transition: none;
+  }
 }

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

@@ -1465,10 +1465,18 @@ export function MessageTimeline(props: {
     // the count is bounded by the virtualizer's window.
     let turnEl: HTMLDivElement | undefined
     const [dotCentre, setDotCentre] = createSignal(DEFAULT_DOT_CENTRE)
+    const [dotSettled, setDotSettled] = createSignal(false)
     const measureDotCentre = () => {
       if (!turnEl || !rail()) return
       const hostTop = turnEl.getBoundingClientRect().top
-      const walker = document.createTreeWalker(turnEl, NodeFilter.SHOW_TEXT)
+      // Travelling dot (#265): when the row has prose-fragment cards, target
+      // the LAST one so the dot (running or done) aligns with the newest
+      // settled chunk. This applies in both running and done states — the
+      // done-dot should stay at the last card, not jump back to the first.
+      const fragments = turnEl.querySelectorAll("[data-prose-fragment]")
+      const lastFragment = fragments.length > 0 ? (fragments[fragments.length - 1] as HTMLElement) : null
+      const target = lastFragment ?? turnEl
+      const walker = document.createTreeWalker(target, NodeFilter.SHOW_TEXT)
       let node: Node | null
       while ((node = walker.nextNode())) {
         if (!node.textContent?.trim()) continue
@@ -1477,10 +1485,12 @@ export function MessageTimeline(props: {
         const rect = range.getClientRects()[0]
         if (!rect || rect.height === 0) continue
         const centre = rect.top + rect.height / 2 - hostTop
-        // Half-px grid; never above the default (a dot poking into the
-        // inter-row gap would detach from its own tail cap), and a sanity
-        // ceiling against mid-virtualisation nonsense measurements.
-        if (centre > 0 && centre < 80) setDotCentre(Math.max(DEFAULT_DOT_CENTRE, Math.round(centre * 2) / 2))
+        // When targeting a fragment, the dot can be anywhere down the row
+        // (no ceiling). For non-fragment rows the 80px ceiling guards against
+        // mid-virtualisation nonsense measurements.
+        const maxCentre = lastFragment ? Infinity : 80
+        if (centre > 0 && centre < maxCentre) setDotCentre(Math.max(DEFAULT_DOT_CENTRE, Math.round(centre * 2) / 2))
+        if (!dotSettled()) setDotSettled(true)
         return
       }
     }
@@ -1512,7 +1522,7 @@ export function MessageTimeline(props: {
         >
           <Show when={rail()}>
             {(r) => (
-              <ThoughtRail first={r().first} last={r().last} running={r().running} dotCentre={dotCentre()} />
+              <ThoughtRail first={r().first} last={r().last} running={r().running} dotCentre={dotCentre()} settled={dotSettled()} />
             )}
           </Show>
           {/* The gutter is reserved for EVERY assistant part, not only the ones

packages/app/src/pages/session/timeline/thought-rail.tsx

@@ -128,6 +128,9 @@ export function ThoughtRail(props: {
   /** measured centre of the row's first text line (px from the row's top);
    *  defaults to DEFAULT_DOT_CENTRE for unmeasured/prose rows */
   dotCentre?: number
+  /** true once the first measurement has landed — gates the CSS transition
+   *  so the initial mount uses the grow animation alone (#265) */
+  settled?: boolean
 }) {
   // Only the tail of a still-running turn is hollow. Everything above it has,
   // by definition, been succeeded. (Rule 4 — adjacency.)
@@ -172,8 +175,10 @@ export function ThoughtRail(props: {
         // RUNNING: spherical-harmonic morphing dot — 13px SVG centred on LINE_X.
         // The grow animation (7→13px) is a CSS @keyframes on mount; the morph
         // cycles Y_l^m silhouettes via SMIL; slow rotation via CSS on the <g>.
+        // The settled class gates the top transition (#265): after the first
+        // measurement, subsequent dotCentre changes slide smoothly.
         <HarmonicDot
-          class="pointer-events-none absolute thought-rail-dot--harmonic"
+          class={`pointer-events-none absolute thought-rail-dot--harmonic${props.settled ? " thought-rail-dot--settled" : ""}`}
           style={{
             top: `${dotCentre() - HARMONIC_SIZE / 2}px`,
             left: `${LINE_X - HARMONIC_SIZE / 2}px`,

packages/app/src/pages/session/timeline/travelling-dot.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from "bun:test"
+import { readFileSync } from "node:fs"
+import { resolve } from "node:path"
+
+// Regression guard for the travelling dot + bottom-up card animation (#265).
+// These CSS declarations are load-bearing: removing them silently breaks the
+// dot's smooth travel and the card entry motion.
+
+const indexCss = readFileSync(resolve(__dirname, "../../../index.css"), "utf8")
+const polishCss = readFileSync(resolve(__dirname, "../../../design-polish.css"), "utf8")
+
+describe("travelling dot transition (#265)", () => {
+  test("settled dot has top transition", () => {
+    expect(indexCss).toContain("thought-rail-dot--settled")
+    expect(indexCss).toMatch(/thought-rail-dot--settled[^}]*transition[^}]*top/)
+  })
+
+  test("rail line has height transition", () => {
+    expect(indexCss).toMatch(/thought-rail-line[^}]*transition[^}]*height/)
+  })
+
+  test("reduced motion disables dot transition", () => {
+    // Inside a prefers-reduced-motion block, the settled class gets transition: none
+    expect(indexCss).toMatch(/prefers-reduced-motion[\s\S]*thought-rail-dot--settled[\s\S]*transition:\s*none/)
+  })
+
+  test("reduced motion disables rail line transition", () => {
+    expect(indexCss).toMatch(/prefers-reduced-motion[\s\S]*thought-rail-line[\s\S]*transition:\s*none/)
+  })
+})
+
+describe("prose fragment entry animation (#265)", () => {
+  test("prose-fragment-enter keyframe exists", () => {
+    expect(polishCss).toContain("prose-fragment-enter")
+  })
+
+  test("prose-fragment-enter uses translateY", () => {
+    expect(polishCss).toMatch(/prose-fragment-enter[\s\S]*translateY\(10px\)/)
+  })
+
+  test("prose-fragment cards use prose-fragment-enter animation", () => {
+    expect(polishCss).toMatch(/data-prose-fragment.*data-part-enter[\s\S]*prose-fragment-enter/)
+  })
+
+  test("prose-fragment-enter has 150ms duration", () => {
+    expect(polishCss).toMatch(/data-prose-fragment.*data-part-enter[\s\S]*150ms/)
+  })
+
+  test("reduced motion disables prose-fragment entrance", () => {
+    expect(polishCss).toMatch(/prefers-reduced-motion[\s\S]*data-prose-fragment.*data-part-enter[\s\S]*animation:\s*none/)
+  })
+})