Skip to content

Polish web UI UX: scroll anchoring, composer, perf (Phase 1)#267

Closed
edwin-zvs wants to merge 1 commit into
mainfrom
webui-ux-phase1
Closed

Polish web UI UX: scroll anchoring, composer, perf (Phase 1)#267
edwin-zvs wants to merge 1 commit into
mainfrom
webui-ux-phase1

Conversation

@edwin-zvs

Copy link
Copy Markdown
Contributor

Phase 1 of a web UI polish pass aimed at Apple-grade feel. These are small, high-leverage fixes targeting the four most-noticed rough edges. All changes are confined to crates/daemon/assets/index.html.

The four issues this addresses

  • (a) Clicking jumps the scroll to a random place — two compounding causes: the session list's innerHTML rebuild reset scrollTop to 0, and scroll-behavior: smooth animated every programmatic scroll over a still-settling layout.
  • (b) Full re-replay flash/lurch on session load — the force-scroll animated from top to bottom; removing smooth-scroll + landing synchronously kills the lurch. (Off-DOM build + tail-windowing is Phase 2.)
  • (c) Insert vs Enter confusion — for non-PTY chat sessions the two buttons were byte-for-byte identical.
  • (d) Sluggishness — the header matrix loop did a getBoundingClientRect every animation frame (~60fps) and never idled.

Changes

Scroll anchoring

  • Drop scroll-behavior: smooth on .transcript-pane — programmatic "stick to bottom" lands instantly.
  • Capture/restore sessionListEl.scrollTop across the innerHTML rebuild (interim until the Phase 2 in-place reconcile).
  • rAF-coalesce scrollToBottom with a passively-tracked _atBottom flag — no forced reflow per streamed token.

Composer

  • Collapse Insert/Enter to a single Send for chat/headless sessions; show a secondary Type only for PTY-backed sessions.
  • Add title/aria-label + a Shift+Enter hint.
  • Restore the typed text if a send fails, guarded so a session switch mid-send can't leak text into another session's composer.

Performance

  • Throttle the matrix loop before its layout read and gate it on document.hidden (~60 → ~8fps; zero cost when the tab is backgrounded), with a visibilitychange repaint on return.

Polish / a11y

  • Composer button :hover/:active/:focus-visible + transition.
  • Global :focus-visible ring (low specificity, so component focus styles still win).
  • Global @media (prefers-reduced-motion: reduce) block.
  • On-accent contrast fixes (#fff#06160c, ×4) and operator-row grid alignment.

Verification

  • Inline JS syntax-checked.
  • 6-area adversarial regression review: 0 critical / 0 high / 0 medium / 4 low. Three lows are acceptable-by-design (pixel-based list restore → proper row-anchoring deferred to Phase 2; a headless-only matrix artifact note; contrast verified correct). The fourth — a cross-session text-restore leak — is fixed in this PR.
  • No test or Rust code depends on the changed button labels/placeholder; no transitionend/animationend listeners exist, so the reduced-motion block can't stall any state machine. The e2e web_smoke painted assertion still holds (canvas is painted synchronously at init).

🤖 Generated with Claude Code

Phase 1 of the web UI polish pass — small, high-leverage fixes for the
four most-noticed rough edges (scroll jumps on click, the flash/lurch on
session load, the confusing Insert/Enter buttons, and sluggishness):

- Scroll anchoring: drop `scroll-behavior: smooth` on the transcript so
  programmatic "stick to bottom" lands instantly; preserve the session
  list's scrollTop across its innerHTML rebuild so clicks/background
  updates no longer teleport it to the top; rAF-coalesce scrollToBottom
  with a passively-tracked at-bottom flag (no forced reflow per token).
- Composer: collapse Insert/Enter to a single "Send" for chat sessions
  (byte-identical there); show a secondary "Type" only for PTY-backed
  sessions; add titles/aria + a Shift+Enter hint; restore typed text if
  a send fails (guarded against session switches).
- Performance: throttle the header matrix loop before its layout read
  and gate it on document.hidden (~60 -> ~8fps; idle when backgrounded).
- Polish/a11y: composer button hover/active/focus-visible states, a
  global :focus-visible ring, a global prefers-reduced-motion block,
  on-accent contrast fixes (#fff -> #06160c), and operator-row alignment.

All changes are confined to crates/daemon/assets/index.html and were
adversarially reviewed for regressions.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@edwin-zvs

Copy link
Copy Markdown
Contributor Author

Closing as redundant: the Phase 1 web UI changes from this branch are already in main — they were folded into commit 8a30660 (#275) during a history rewrite, rather than merged through this PR. The branch commit (a2cd2e1) is not an ancestor of main, but the file content it carries is present. Nothing to merge here. (The related terminal scroll-button focus fix landed separately as #280.)

@edwin-zvs edwin-zvs closed this May 30, 2026
@edwin-zvs
edwin-zvs deleted the webui-ux-phase1 branch May 30, 2026 22:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant