fix(ui-trajectory): timing provenance on sub-span lanes; assembled snapshot for both views

Responding to ds-review-bot on #664:

- SubSpanLane gains a 'timing' discriminant (measured | running | unknown).
  A settle-only replay entry (callTime null, start outside the window) was
  previously indistinguishable from a measured 0 ms span; it now renders
  hollow with a 'duration unknown' hover title, and durationMs stays null
  for anything unmeasured. Pairs with the client-runtime fix that stopped
  fabricating callTime = settle time (826c3696a on the live-parallel PR).

- The built-client Code Mode fixture snapshot now switches to the
  Trajectory and Waterfall tabs and pins the assembled rendering: three
  Sub cells with real +0.8s durations and three measured lanes with their
  hover titles — product-visible coverage through the real bundle graph,
  not just package-level jsdom fixtures.

Agent Note (both languages) updated for the timing contract; pairing
re-recorded.

packages/client/ui-trajectory/src/client/WaterfallView.tsx

@@ -55,12 +55,15 @@ export function WaterfallView({ useSession, pxPerNode }: ConvViewProps & Waterfa
                 <span className={css.subTag}>{lane.name}</span>
                 <span
                   className={`${css.bar} ${css.barSub}`}
-                  data-running={lane.durationMs === null || undefined}
+                  data-timing={lane.timing}
                   style={{
                     marginLeft: Math.round(lane.offsetFraction * SUB_LANE_PX),
                     width: Math.max(Math.round(lane.widthFraction * SUB_LANE_PX), 4),
                   }}
-                  title={lane.durationMs === null ? `${lane.name} · running` : `${lane.name} · ${(lane.durationMs / 1000).toFixed(2)}s`}
+                  title={lane.timing === 'measured'
+                    /* durationMs is non-null exactly when timing is measured. */
+                    ? `${lane.name} · ${((lane.durationMs ?? 0) / 1000).toFixed(2)}s`
+                    : lane.timing === 'running' ? `${lane.name} · running` : `${lane.name} · duration unknown`}
                 />
               </div>
             ))}

packages/client/ui-trajectory/src/client/spans.ts

@@ -9,8 +9,14 @@ import type { ConversationNode, ConversationSnapshot } from '@deepseek-ai/dsh-cl
 export interface SubSpanLane {
   callId: string
   name: string
-  /** Wall duration in ms; null while running (start seen, settle not). */
+  /** Wall duration in ms; null unless both endpoints were observed (`timing: 'measured'`). */
   durationMs: number | null
+  /**
+   * Timing provenance: `measured` = start/settle pair observed; `running` =
+   * start seen, settle pending; `unknown` = settle-only replay window (the
+   * start fell outside), so no duration claim is possible.
+   */
+  timing: 'measured' | 'running' | 'unknown'
   /** Start offset as a fraction of the parent turn's dispatch window [0, 1). */
   offsetFraction: number
   /** Width as a fraction of the window (running lanes extend to the window end). */
@@ -106,6 +112,9 @@ export function deriveSubSpans(
   for (const [parent, subs] of codeDispatches) {
     if (subs.length === 0) continue
     const turn = turnByCall.get(parent) ?? currentTurn
+    // A settle-only entry (callTime null: its start fell outside the replay
+    // window) anchors the window by its settle time — a real observation —
+    // but must never masquerade as a measured zero-duration span.
     const starts: number[] = []
     const ends: number[] = []
     for (const sub of subs) {
@@ -119,12 +128,14 @@ export function deriveSubSpans(
     const windowSpan = windowEnd - windowStart
     const lanes: SubSpanLane[] = subs.map((sub, i) => {
       const settled = 'kind' in sub
+      const timing = settled ? (sub.callTime === null ? 'unknown' as const : 'measured' as const) : 'running' as const
       const start = starts[i] ?? windowStart
       const end = settled ? sub.time : windowEnd
       return {
         callId: sub.callId,
         name: settled ? sub.call?.name ?? sub.callId : sub.name,
-        durationMs: settled ? Math.max(0, sub.time - start) : null,
+        durationMs: timing === 'measured' ? Math.max(0, end - start) : null,
+        timing,
         offsetFraction: (start - windowStart) / windowSpan,
         widthFraction: Math.max((end - start) / windowSpan, 0.02),
       }

packages/client/ui-trajectory/src/client/views.module.css

@@ -71,6 +71,12 @@
   background: var(--dsw-alias-state-business-primary);
 }
 
-.barSub[data-running] {
+.barSub[data-timing='running'] {
   opacity: 0.45;
 }
+
+/* Settle-only replay entries: no measured span — hollow, not a solid bar. */
+.barSub[data-timing='unknown'] {
+  background: transparent;
+  border: 1px dashed var(--dsw-alias-state-business-primary);
+}

packages/client/ui-trajectory/tests/views.spec.tsx

@@ -288,7 +288,7 @@ describe('deriveSubSpans (waterfall lanes)', () => {
     const turn3 = lanes.get(3)
     expect(turn3).toHaveLength(2)
     // Window = 6200..8200 (2000ms). bash: 0..0.4; read: 0.4..1.0.
-    expect(turn3?.[0]).toMatchObject({ name: 'bash', durationMs: 800, offsetFraction: 0 })
+    expect(turn3?.[0]).toMatchObject({ name: 'bash', durationMs: 800, timing: 'measured', offsetFraction: 0 })
     expect(turn3?.[0]?.widthFraction).toBeCloseTo(0.4)
     expect(turn3?.[1]).toMatchObject({ name: 'read', durationMs: 1200 })
     expect(turn3?.[1]?.offsetFraction).toBeCloseTo(0.4)
@@ -305,11 +305,23 @@ describe('deriveSubSpans (waterfall lanes)', () => {
     ]]]) as unknown as ConversationSnapshot['codeDispatches']
     const lanes = deriveSubSpans(dispatchNodes, codeDispatches)
     const running = lanes.get(3)?.find((lane) => lane.name === 'grep')
-    expect(running).toMatchObject({ durationMs: null })
+    expect(running).toMatchObject({ durationMs: null, timing: 'running' })
     // Extends from its start to the window end.
     expect(running!.offsetFraction + running!.widthFraction).toBeCloseTo(1)
   })
 
+  it('a settle-only entry (null callTime) is unknown timing, never a measured 0 ms', () => {
+    const codeDispatches = new Map([['p1', [
+      {
+        kind: 'tool-result', seq: 101, time: 8_000, callId: 'p1:code:1',
+        call: { name: 'bash', argsRaw: '{}' }, callTime: null,
+        content: [], isError: false, callView: null, resultView: null,
+      },
+    ]]]) as unknown as ConversationSnapshot['codeDispatches']
+    const lane = deriveSubSpans(dispatchNodes, codeDispatches).get(3)?.[0]
+    expect(lane).toMatchObject({ durationMs: null, timing: 'unknown' })
+  })
+
   it('waterfall renders sub-span lanes under the owning turn row', () => {
     const codeDispatches = new Map([['p1', [
       {
@@ -333,5 +345,30 @@ describe('deriveSubSpans (waterfall lanes)', () => {
     expect(lane).not.toBeNull()
     expect(lane!.textContent).toContain('bash')
     expect(lane!.querySelector('[title*="1.80s"]')).not.toBeNull()
+    expect(lane!.querySelector('[data-timing="measured"]')).not.toBeNull()
+  })
+
+  it('waterfall labels a settle-only lane as duration unknown', () => {
+    const codeDispatches = new Map([['p1', [
+      {
+        kind: 'tool-result', seq: 101, time: 8_000, callId: 'p1:code:1',
+        call: { name: 'read', argsRaw: '{}' }, callTime: null,
+        content: [], isError: false, callView: null, resultView: null,
+      },
+    ]]]) as unknown as ConversationSnapshot['codeDispatches']
+    const store = createSnapshotStore({
+      nodes: dispatchNodes, partial: null,
+      runningCalls: [] as ConversationSnapshot['runningCalls'], codeDispatches,
+    })
+    const props = {
+      sessionId: SID,
+      useSession: bindSnapshotSelector(store) as unknown as UseSession<ConversationSnapshot>,
+      useSessions: emptySessions(),
+      useWorkspaces: emptyWorkspaces(),
+    } as unknown as ConvViewProps
+    const view = render(createElement(WaterfallView as FC<ConvViewProps>, props))
+    const bar = view.container.querySelector('[data-timing="unknown"]')
+    expect(bar).not.toBeNull()
+    expect(bar!.getAttribute('title')).toContain('duration unknown')
   })
 })