On first mount (and on session switch, via a sessionId key remount) the
chart scrolls to the right edge so the latest steps are visible
immediately; afterwards it only sticks to the end while the user is near
it, so scrolling back into earlier turns/steps is never fought. The edge
fades follow the scroll position as before. The render test's fake React
now keeps useRef stable across renders (like React), which is what the
effect needs to see the container.
The chart sliced to the newest 80 requests, so anything older was never
rendered. All requests the host provides (capped at 160) are now rendered
and reachable by horizontal scrolling; the scrollbar is thicker and
higher-contrast, edge fades appear whenever more history sits beyond the
viewport, and the hint mentions the sideways scroll.
A Step/Turn segmented control in the trend card header switches the chart
granularity. Turn mode collapses each turn into a single bar showing its
LAST step's record (the context state when the turn finished); the turn
strip, hover linking, and detail panel all follow the aggregated bars.
Each turn is now a colored block whose width spans exactly its bars'
columns (same grid math), so the partition lines up with the steps above.
Consecutive turns cycle a palette; the T-label sits on the block with a
tooltip fallback for narrow single-bar turns. Hover highlighting
(bidirectional with the bars) is unchanged.
The turn tick row is now an interactive strip: hovering a turn block
highlights that turn's bars in the chart (tinted columns), and hovering a
bar highlights its turn block — both follow one shared hover-only state,
so nothing glows by default. Leaving the strip or the chart clears it.
The Current composition stacked bar (and the request-detail mini bar)
now shows a theme-native tooltip on hover per segment — category, token
count, and share of the total — positioned at the pointer and clamped
inside the bar. Replaces the native title attribute; the wrapper keeps
the tooltip outside the rounded/clipped stack.
Hovering a trend bar links the detail panel to that request immediately
(hover wins over the pinned selection, which takes over again when the
pointer leaves; both fall back to the newest request). The hovered bar
gets a dashed outline, and the chart clears the preview on mouse leave.
- src/host.ts: typed fold model (Snapshot/RequestRecord/SurfaceNode/
ContextEventRecord), local drift-free service contracts for
connection/sessions/sessionQuery via declare module augmentation
- src/client.cts: typed client bundle (React types via @types/react,
locale/slots/connection contracts, typed component props); CJS-flavored
so esbuild keeps require/module.exports despite type:module
- tsconfig.json: strict, noEmit, verbatimModuleSyntax (runtime-free of
imports in the client bundle is enforced by the type system)
- scripts/build.mjs: esbuild transpile for both halves, loader wrap and
smoke checks unchanged; npm run typecheck added to the test suite
- note: @deepseek-ai/* service type packages publish broken dependency
chains on npm (dsh-paths 404), so local contracts replace them
- bars use a fixed 14px column width, so sparse histories no longer
stretch and dense histories scroll horizontally instead of compressing
- the chart sticks to the newest bars unless the user scrolls away
- a turn tick row under the bars groups consecutive requests of the same
T into one labeled range (T1 spans its bars with a connector line)
- test-client now renders the view tree with a stateful fake React and
asserts bar count, scroll container, and turn-range geometry
bowenliang123