feat(web): polish desktop reading, controls, and motion

[testikun]

Problem

Closes #867

Desktop chat controls and transitions are inconsistent: the sidebar, conversation, and tools headers end at different heights; many icon actions lack visible explanations; long code and long prompts consume awkward amounts of space. Model controls, attachment inspection, and reading position also need more predictable feedback.

Value

Makes extended coding conversations easier to read and operate while preserving OpenPI's palette, elapsed-time separators, and Pi execution facts. Motion explains actual opening, resizing, selection, and progress without adding artificial delays to model output.

Approach

• Align all three desktop headers at 64px. At narrower conversation widths, show a compact context summary and retain full usage in the tooltip and details popover.
• Reuse the existing Tooltip component for icon actions across navigation, messages, composer, attachments, and tools. Preserve accessible names, keyboard focus, and Escape dismissal; explain unavailable actions where applicable.
• Add lazy, cached code highlighting after streaming finishes, bounded previews for long code, manual expansion of the prompt editor, compact queued-prompt summaries, and gentle activity-label transitions with stable elapsed digits. Keep the thinking picker compact.
• Refine model selection, long labels, icon alignment, and IME handling. Coordinate menu, dialog, disclosure, and attachment motion while preserving someone’s reading position.
• Add image navigation, anchored zoom, bounded panning, and thumbnail-to-preview transitions with draft ownership and focus restoration. Improve code wrapping/copy feedback, Bash evidence, split/unified diffs, and exact old/new line references.
• Clarify question review, child-session states, usage details, and pane resizing; rebuild tracked web assets. Remove a redundant workbar tab-height constraint after confirming that alignment remains intact.
• Use instant scroll writes inside the existing transcript animation loop so user scrolling cancels following completely. Keep the easing in one animation loop.

Validation

• bun run check passed: configuration/docs/discipline contracts, frontend build, formatting, lint, and type checks.
• bun run test passed on 44446cab: 2,658 Node tests, 9 existing skips; 1,536 UI tests across 99 files. Used an isolated PI_CODING_AGENT_DIR. Integrated main through 708a44b5, preserving its streaming and history-read cost fixes.
• The complete Web E2E suite passed locally in Chrome: 157/157 cases, including browser integration, queue persistence, thinking controls, keyboard focus, and accessibility.
• The Plan Provider suite passed 5/5 cases, including strict reading-position assertions in light and dark themes, planning authority, and handoff. It also passed in CI for this commit.
• The affected mobile keyboard/accessibility cases passed 10 repeated runs across 320px and 390px widths. Existing tests wait for actual menu/dialog dismissal before measuring layout or contrast; cancellation, focus, draft ownership, Session scope, and contrast assertions remain intact.
• CI for 44446cab passed all 17 jobs: the Linux/Windows Node and UI matrix, both Web E2E shards, Plan Provider handoff, and aggregate gates.
• Real-browser inspection of the built UI with synthetic, non-private data: 1600px and 1280px desktop layouts, dark theme, sidebar collapse/expand, editor expansion, code/toolbar hints, usage details, keyboard focus, and Escape dismissal. All three headers measure 64px after the change. The 1280px conversation header previously grew to about 105px.
• The comparison below covers the header/help follow-up. Its “before” build already includes the earlier reading/composer work. It does not claim model, provider, or backend performance results.

Download the self-contained HTML comparison and open it locally to switch versions and viewport sizes.

Impact

• User-visible: desktop reading, control discoverability, alignment, and interaction polish; existing light/dark themes and reduced-motion behavior are retained.
• Model-visible context/tools, runtime/lifecycle, persisted configuration/data: no new surfaces or contracts. Existing ownership, cancellation, and focus/reading restoration remain in place.
• Compatibility: desktop is the validation focus. Existing responsive behavior is retained; dedicated mobile polish and exhaustive platform/provider smoke are outside this change.