Skip to content

feat(web-ui): polish interaction motion and view transitions - #2257

Merged
bobleer merged 5 commits into
GCWing:mainfrom
bobleer:bob/web-ui-motion-polish
Aug 13, 2026
Merged

feat(web-ui): polish interaction motion and view transitions#2257
bobleer merged 5 commits into
GCWing:mainfrom
bobleer:bob/web-ui-motion-polish

Conversation

@bobleer

Copy link
Copy Markdown
Collaborator

Summary

  • add shared presence and view-transition primitives with interruptible pointer-driven motion
  • animate scene, navigation, settings, tab, editor, modal, popup, notification, disclosure, list, and status transitions without animating virtualized row mounts
  • replace broad or layout-heavy transitions with explicit transform/opacity/color properties and add reduced-motion fallbacks
  • add a Web UI motion inventory command and focused regression coverage for presence, scrolling, settings, tabs, lists, permissions, and overlays

Type and Areas

Type: UI/UX feature and regression fix

Areas: Web UI app shell, component library, FlowChat, settings, notifications, tools, shared infrastructure

Motivation / Impact

Interactive state changes previously hard-cut when React immediately unmounted the outgoing view, most visibly when opening Settings or switching settings sections. This change preserves spatial continuity for occasional pointer actions while keeping keyboard navigation, direct manipulation, streaming, and virtualized transcript mounts immediate.

Reduced-motion users receive short opacity-only transitions or immediate scrolling. No user-facing strings, persisted data, protocol shapes, or remote capability contracts change.

Verification

  • pnpm --dir src/web-ui run test:run src/flow_chat/components/modern/flowChatTailFollow.test.ts src/flow_chat/components/modern/useFlowChatFollowOutput.test.tsx src/flow_chat/components/modern/VirtualMessageList.session-boundary.test.tsx src/component-library/components/ViewTransitionBoundary/ViewTransitionBoundary.test.tsx src/component-library/components/Tabs/Tabs.test.tsx src/app/scenes/settings/SettingsScene.test.tsx src/app/stores/sceneStore.test.ts src/shared/utils/motionPreference.test.ts — 8 files / 133 tests passed before the reduced-motion merge regression was added
  • pnpm --dir src/web-ui run test:run src/flow_chat/components/modern/useFlowChatFollowOutput.test.tsx — 51 tests passed after the upstream merge resolution
  • pnpm run type-check:web — passed
  • pnpm --dir src/web-ui run lint — passed
  • pnpm run motion:audit — passed inventory: zero transition: all, scale(0), JavaScript smooth-scroll debt, unguarded infinite animation, or duplicate global keyframes
  • pnpm run appearance:contract-audit — passed with 16 existing shared-style ownership warnings
  • pnpm run check:repo-hygiene — passed
  • pnpm run build:web — passed, including generated protocol tests, production Vite build, Monaco asset verification, and WebKit compatibility verification
  • git diff --check — passed
  • Browser validation: Settings open/close, settings section switches, scene-to-empty transitions, and shared view-boundary frame progression
  • FlowChat manual viewport scenarios remain pending per the module verification policy

Remote scenarios: exercised in the local Web/desktop presentation path only. Remote workspace, remote control, Peer Device Mode, and Detached Dispatch were not separately exercised because this PR does not alter transport, persistence, commands, or cross-version contracts.

AI-assisted: yes. Testing level: fully automated for the changed contracts, with the FlowChat manual matrix explicitly pending.

Reviewer Notes

The branch was synchronized with the latest upstream main. The two FlowChat merge conflicts preserve upstream's distance-bounded jump-to-latest behavior and layer the existing reduced-motion preference on the final behavior. Turn navigation remains instant as required by the viewport contract.

Checklist

  • This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
  • Relevant verification is recorded above, or skipped checks are explained.
  • User-facing strings, docs, and locales are updated where applicable (no new strings).

@bobleer

Copy link
Copy Markdown
CollaboratorAuthor

CI follow-up pushed in f2dbcb351:

  • updated the startup lazy-dialog contract for PresenceBoundary
  • updated the intentional built-in appearance hashes after motion duration/easing changes
  • made configuration disclosures lazy before first open while retaining their 180 ms exit state
  • strengthened the raw MCP diagnostic assertion to use a unique sentinel

Local verification with the same Node 22 major as CI: 456 test files / 3221 tests passed. Type-check, ESLint, motion audit, and appearance contract audit also passed.

@bobleer
bobleer merged commit 33a0d09 into GCWing:mainAug 13, 2026
7 checks passed
Sign up for freeto 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

@bobleer