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).
71 lines
2.2 KiB
Markdown
71 lines
2.2 KiB
Markdown
# 005 — prefers-reduced-motion support
|
||
|
||
- **Status**: DONE
|
||
- **Commit**: (repo has no commits yet — uncommitted working tree, 2026-07-18)
|
||
- **Severity**: MEDIUM
|
||
- **Category**: Accessibility
|
||
- **Estimated scope**: 1 file (styles.css), 1 media query block
|
||
|
||
## Problem
|
||
|
||
styles.css has zero `prefers-reduced-motion` handling. Movement-based motion (toast slide, inspector slide-in from 002, content slide from 003, press scale from 004) plays regardless of the OS setting.
|
||
|
||
## Target
|
||
|
||
Reduced motion = drop position/scale changes, KEEP opacity feedback (comprehension aids stay):
|
||
|
||
```css
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.toast {
|
||
transform: none;
|
||
transition: opacity 200ms var(--ease-out);
|
||
}
|
||
.chat-split.inspector-open .inspector,
|
||
.wf-split.inspector-open .inspector {
|
||
transition: opacity 200ms var(--ease-out);
|
||
@starting-style {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
.traj-body,
|
||
.chat-activity[open] .activity-body,
|
||
.tree-turn[open] .tree-steps {
|
||
animation: none;
|
||
}
|
||
.segmented button:active,
|
||
.trajectory-toolbar button:active,
|
||
.drawer-actions button:active,
|
||
.row-tools button:active,
|
||
.fb-send:active,
|
||
.feedback-submit:active,
|
||
.new-session-button:active,
|
||
.activity-open-inspector:active {
|
||
transform: none;
|
||
}
|
||
.flash {
|
||
animation: none;
|
||
box-shadow: 0 0 0 3px rgba(10, 100, 255, .45);
|
||
}
|
||
}
|
||
```
|
||
|
||
Note `.flash` keeps a static highlight ring (the jump-target indicator is comprehension, not decoration) — it just stops pulsing. `.toast` keeps its opacity fade.
|
||
|
||
## Repo conventions to follow
|
||
|
||
- Depends on plans 001–004 (targets their rules). Place the block at the end of styles.css, before the responsive media queries.
|
||
|
||
## Steps
|
||
|
||
1. styles.css: add the media query block exactly as in Target.
|
||
|
||
## Boundaries
|
||
|
||
- Do NOT remove opacity transitions — reduced motion is fewer/gentler, not zero.
|
||
- Do NOT gate hover color changes (no movement involved).
|
||
|
||
## Verification
|
||
|
||
- **Feel check**: DevTools → Rendering → emulate `prefers-reduced-motion: reduce`. Toast fades without sliding; inspector fades in place; expanding rows appears instantly; jump-to still shows a static ring.
|
||
- **Done when**: with reduction on, nothing on screen translates or scales, but state feedback remains visible.
|