b965285f28
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).
62 lines
1.9 KiB
Markdown
62 lines
1.9 KiB
Markdown
# 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):
|
|
|
|
```css
|
|
@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
|
|
|
|
1. styles.css: add the `content-enter` keyframe next to `traj-flash`.
|
|
2. 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.
|