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).
61 lines
1.9 KiB
Markdown
61 lines
1.9 KiB
Markdown
# 001 — Add easing token and upgrade existing transitions
|
||
|
||
- **Status**: DONE
|
||
- **Commit**: (repo has no commits yet — uncommitted working tree, 2026-07-18)
|
||
- **Severity**: LOW (foundation for 002–005)
|
||
- **Category**: Easing & duration / Cohesion & tokens
|
||
- **Estimated scope**: 1 file (styles.css), ~4 small edits
|
||
|
||
## Problem
|
||
|
||
No shared easing tokens exist; entrances use weak built-in `ease`:
|
||
|
||
```css
|
||
/* styles.css — current */
|
||
.toast {
|
||
transition: opacity .18s ease, transform .18s ease;
|
||
}
|
||
.main-pane {
|
||
transition: opacity .15s ease;
|
||
}
|
||
```
|
||
|
||
Built-in `ease` is too weak for deliberate motion; the toast enter feels mushy.
|
||
|
||
## Target
|
||
|
||
```css
|
||
:root {
|
||
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI */
|
||
}
|
||
.toast {
|
||
transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
|
||
}
|
||
.main-pane {
|
||
transition: opacity 150ms var(--ease-out);
|
||
}
|
||
```
|
||
|
||
Keep `.pane-divider::after { transition: background .12s ease }` unchanged — hover/color change correctly uses `ease`.
|
||
|
||
## Repo conventions to follow
|
||
|
||
- All custom properties live in the single `:root` block at the top of styles.css (e.g. `--blue: #0a64ff;`); add `--ease-out` there.
|
||
|
||
## Steps
|
||
|
||
1. styles.css `:root`: add `--ease-out: cubic-bezier(0.23, 1, 0.32, 1);`.
|
||
2. styles.css `.toast`: replace transition with `opacity 200ms var(--ease-out), transform 200ms var(--ease-out)`.
|
||
3. styles.css `.main-pane`: replace transition with `opacity 150ms var(--ease-out)`.
|
||
|
||
## Boundaries
|
||
|
||
- Do NOT touch app.js or index.html.
|
||
- Do NOT change the `.pane-divider` or `.tree-turn-head::before` transitions.
|
||
|
||
## Verification
|
||
|
||
- **Mechanical**: reload http://127.0.0.1:5173/ — no console errors.
|
||
- **Feel check**: trigger a toast (submit an annotation); it should decelerate crisply into place instead of easing symmetrically. Switch sessions; the loading fade should feel unchanged or slightly snappier.
|
||
- **Done when**: token exists and both rules reference it.
|