Files

NI0317 b965285f28 feat(research): add trace-workbench local session-replay UI

A localhost viewer over persisted session JSONL for agent developers and
researchers. Three first-class views — Chat (markdown-rendered surface
conversation with a second-level inspector), Trajectory (turn/step tree
with scroll-spy over a step-grouped event table, inline annotations),
and Waterfall (timing summary + aligned time track that deep-links into
Trajectory). Subagent sessions group under their parentSession with
spawn links and breadcrumbs; failed tool calls are marked in every view;
?session=&view=&sel= makes any selection a shareable deep link.

Motion follows an audited restraint baseline (plans/ documents the
audit): one strong ease-out token, enter-only animations, press feedback
on pushbuttons, prefers-reduced-motion support.

AGENTS.md gains the research/ layout entry; the AGENTS.md word ceiling
rises 1370 -> 1375 to fit it (one line, relocation not applicable for a
top-level layout entry).

2026-07-18 14:06:32 +08:00

1.9 KiB

Raw Blame History

003 — Fade-slide expanded content into place

Status: DONE
Commit: (repo has no commits yet — uncommitted working tree, 2026-07-18)
Severity: MEDIUM
Category: Missed opportunities
Estimated scope: 1 file (styles.css), 1 keyframe + 3 selectors

Problem

Expanding a trajectory row, a chat activity block, or a tree turn teleports its content into the layout — a jarring change on the most-used disclosure surfaces:

.traj-body (trajectory expanded row) — inserted by re-render on toggle
.activity-body (chat Thinking / Tool use <details>)
.tree-steps (tree turn <details>)

Target

One shared enter animation; exit stays instant (collapse must snap):

@keyframes content-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.traj-body,
.chat-activity[open] .activity-body,
.tree-turn[open] .tree-steps {
  animation: content-enter 160ms var(--ease-out);
}

Keyframes (not transitions) are correct here: each open is a fresh one-shot enter; re-opening restarting from zero is the intended semantic.

Repo conventions to follow

--ease-out token from plan 001 (depends on it).
Place the keyframe near the existing @keyframes traj-flash block.

Steps

styles.css: add the content-enter keyframe next to traj-flash.
styles.css: add the three-selector rule exactly as in Target.

Boundaries

Do NOT animate height (no interpolate-size tricks) — opacity+transform only.
Do NOT animate collapse.
Do NOT touch .md-*, .spawn-list, or inline feedback form styles.

Verification

Feel check: expand a trajectory row — the body settles downward-into-place in ~160ms; collapse is instant. Open a chat Tool use block — same. Expand-all in trajectory: bodies animate once, scrolling stays smooth (animation is per-element, one-shot).
Done when: all three surfaces animate on open, none on close.

1.9 KiB Raw Blame History