Repository navigation
fix(webui): split Models screen, harden overflow hook and format cache - #1977
Merged
Merged
Conversation
ModelsLibrary held page state, the row-focus effect, the action handlers, the column renderers, the filter toolbar, and the page JSX in one 731-line function. Move the seams out for cohesion and reviewability: useRowFocus() owns the focus-follow refs, effect and callback-ref registry; libraryColumns(context) builds the table columns from one typed context; LibraryToolbar renders the search field and three filters. screen.tsx is now 433 lines. Behavior-preserving: the focus effect keeps its position after the inspector effects, and exports, rendered DOM, class names, test ids and handler order are unchanged. The existing Models unit tests pass unmodified. Refs #1976
useOverflowRegion resolved the region's table once at attach, so a table mounted or swapped later was never observed for content growth. A MutationObserver on the region (childList, subtree) now re-resolves the table, moves the ResizeObserver to the new one, and re-runs the overflow check on every content change. A focused box that stopped overflowing lost its tabindex, and the browser's focus fixup dropped focus to <body>. It now keeps its tab stop, role and name while focused and settles on a one-shot blur listener. disconnect tears down both observers and the listener. cached() had no size bound. Each map now holds at most CACHE_LIMIT (32) keys, evicting the oldest on insert. chat/time.ts drops its private unbounded copy and uses the shared helper. New tests in common-adapters.test.tsx and format.test.ts fail on main and pass here. Refs #1976
inureyes
added
status:review
The MutationObserver added for #1976 called update() synchronously in its callback, which runs as a microtask right after each React commit. update() reads scrollWidth and scrollHeight, so every commit that added, removed or reordered nodes in the Models table or the Activity slot table forced a layout before passive effects ran, once per commit in an SSE burst. The callback now re-resolves and re-observes the table synchronously (querySelector does not touch layout) and schedules a single requestAnimationFrame for the overflow check, so all commits in one frame share one read. disconnect cancels a pending frame. Without requestAnimationFrame it falls back to the direct check. The ResizeObserver path and the attach-time check stay synchronous. The late-table test waits one frame before asserting the region role; it still fails against main's hook. Typecheck, lint and the design-system, Models, Activity and chat unit tests pass. Refs #1976
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ModelsLibrary(731 lines) along its seams intorow-focus.ts(useRowFocus),columns.tsx(libraryColumns(context),LibraryRow,downloadRepo) andtoolbar.tsx(LibraryToolbar). Behavior-preserving and in its own commit:screen.tsxis 433 lines, exports, DOM, class names, test ids and handler order are unchanged, and the existing Models unit and Playwright tests pass unmodified.useOverflowRegionadds aMutationObserveron the region: it re-resolves the table, moves theResizeObserverto it, and re-runs the overflow check, so a table mounted or swapped after attach (or content that grows without a resize) is followed. The observer watcheschildListonly, and its overflow check is coalesced into onerequestAnimationFrame, so row churn from polls and SSE bursts costs at most one layout read per frame.blur, instead of dropping focus to<body>.disconnectremoves both observers and the listener.cached()is bounded atCACHE_LIMIT = 32keys with oldest-first eviction;chat/time.tsuses the shared helper instead of its private unbounded copy.docs/code-guidelines.mdsets 800, and the bullet now describes the cohesion concern this PR addresses.src/webui/assets(Node v26.5.1) and added the bilingual technical report underTECHNICAL_REPORTS/.Changes during review
ResizeObserverpaths stay synchronous. The security review found no CRITICAL or HIGH issues.Test plan
common-adapters.test.tsx(late table, focused shrink) andformat.test.ts(eviction) fail against the main code and pass here.pnpm --dir webui run typecheck,lint,unit(35 node + 713 Vitest), theme selectors.build_bundle.py --verify,check_binary_assets.py,check_webui_contract.py.Closes #1976