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

2.2 KiB

Raw Blame History

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):

@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

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.

2.2 KiB Raw Blame History Unescape Escape