fix(web): keep composer stable during quick search by Diyoncrz18 · Pull Request #4298 · nexu-io/open-design

Diyoncrz18 · 2026-06-14T15:06:32Z

Why

Opening quick file search with Command+P / Ctrl+P could leave the lower-left fixed composer visually affected while the user was interacting with the search overlay.

The composer could keep focus/highlight/layout styling even though quick search was the active interaction surface. This made the workspace look broken and distracted from file search.

What users will see

Quick file search opens and receives focus immediately.
The lower-left composer stays visually stable while quick search is open.
Composer focus chrome is suppressed only while quick search is active.
Closing quick search restores normal composer behavior.
Command+P / Ctrl+P behavior remains unchanged.

Surface area

Changed files:

apps/web/src/components/QuickSwitcher.tsx
- Focuses the quick search input as soon as it mounts.
apps/web/src/components/FileWorkspace.tsx
- Marks the document while quick search is open so fixed composer styling can stay stable.
apps/web/src/styles/viewer/routines.css
- Scopes composer focus-chrome suppression to the quick-search-active state.
apps/web/tests/components/FileWorkspace.test.tsx
- Adds regression coverage for the workspace/quick-search state.
apps/web/tests/styles/workspace-tabs-chrome.test.ts
- Covers the CSS contract for the quick-search composer suppression.

Bug fix verification

Regression path validated:

Reproduced the failing state by opening quick search while the lower-left composer could still show focus chrome.
Added coverage that opens QuickSwitcher from the workspace shortcut path and verifies the quick-search active document marker is applied and cleaned up.
Added CSS contract coverage so the fixed composer focus chrome is suppressed only while quick search is active.
Confirmed the focused tests pass with the fix.

Validation

pnpm --filter @open-design/web test -- tests/components/FileWorkspace.test.tsx tests/components/QuickSwitcher.test.tsx tests/styles/workspace-tabs-chrome.test.ts
pnpm --filter @open-design/web typecheck
pnpm --filter @open-design/web build
git diff --check

Not run locally:

Manual browser/Playwright visual check. This PR is marked for manual QA because it changes a visible quick-search/composer interaction.

lefarcen · 2026-06-14T15:10:54Z

Hi @Diyoncrz18! 👋

Thanks for jumping on the quick-search/composer interaction here — keeping the overlay focus isolated from the fixed composer is the right direction.

I’ve routed this through the normal review queue now, and I’ll keep the PR state tidy on our side while reviewers take a pass. ❤️

lefarcen

Hey @Diyoncrz18, the bug itself is clear from your write-up, and the repro path is easy to follow. Before pool review picks this up, could you reshape the description into the current PR template with Why, What users will see, Surface area, and Validation sections? That makes the user-facing impact and rollout surface faster to scan.

lefarcen · 2026-06-14T15:11:14Z

🧪 This PR changes a visible quick-search/composer interaction, so it needs a manual QA pass before merge — please hold off self-merging for now; we’ll loop QA in once it’s merge-ready (and design has signed off).

PerishCode

@Diyoncrz18 I reviewed the quick-search/composer focus fix across FileWorkspace, QuickSwitcher, the fixed-composer CSS, and the added regression coverage. The document marker is cleaned up on close/unmount, the palette input takes focus when mounted, and the CSS suppression stays scoped to the fixed composer while quick search is open. Nice focused fix; thanks for keeping the behavior and coverage tight.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

github-actions · 2026-06-14T15:14:19Z

Visual regression review

Head: d1b104c · Base: ab45324

0 changed · 53 unchanged · 0 new without baseline · 0 failed

Unchanged cases

Case	Main	PR	Diff
visual-avatar-local-agent-list _{0 px (0.00%)}
visual-avatar-local-agent-list-panel _{0 px (0.00%)}
visual-avatar-menu _{0 px (0.00%)}
visual-avatar-menu-panel _{0 px (0.00%)}
visual-avatar-open-design-account _{0 px (0.00%)}
visual-critical-settings _{0 px (0.00%)}
visual-critical-workspace _{0 px (0.00%)}
visual-critical-workspace-preview _{0 px (0.00%)}
visual-design-system-detail _{0 px (0.00%)}
visual-design-systems _{0 px (0.00%)}
visual-home _{0 px (0.00%)}
visual-home-catalog _{0 px (0.00%)}
visual-home-context-picker _{0 px (0.00%)}
visual-home-context-picker-popover _{0 px (0.00%)}
visual-home-plugin-filter _{0 px (0.00%)}
visual-home-plugin-use-staged _{0 px (0.00%)}
visual-home-plugin-use-with-query _{0 px (0.00%)}
visual-home-staged-attachment _{0 px (0.00%)}
visual-integrations _{0 px (0.00%)}
visual-integrations-mcp _{0 px (0.00%)}

Visual diff is advisory only and does not block merging.

Diyoncrz18 · 2026-06-14T15:27:36Z

Thanks! I reshaped the PR description into the requested Why / What users will see / Surface area / Validation sections.

lefarcen · 2026-06-14T15:33:36Z

Hey @Diyoncrz18 — thanks for tightening that up. The rewrite is much easier to scan now.

There are just two template bits still missing before the body is fully aligned:

check the applicable Surface area box(es) rather than leaving that section prose-only
add a short Bug fix verification note for the red→green seam you validated here

After that, the PR body side should be in good shape from my end.

Diyoncrz18 · 2026-06-14T15:39:21Z

Thanks! I added the Surface area checkboxes and a Bug fix verification note covering the red→green seam.

lefarcen · 2026-06-14T15:46:00Z

Hey @Diyoncrz18 — perfect, thank you. The PR body reads cleanly now and the template side looks complete from my end.

At this point I’m just leaving the existing design → QA handoff sequence in place.

AmyShang-alt · 2026-06-15T04:04:30Z

+body.od-quick-switcher-open .chat-composer-fixed-layer .composer-shell:focus-within {
+  border-color: var(--border);
+  box-shadow: none;
+}


This still leaves the reported visual state partially unfixed. Once QuickSwitcher focuses .qs-input, the fixed composer no longer matches :focus-within, so these rules stop applying while the composer layer and its child controls remain fully visible/interactive in the lower-left corner. The quick-search-open state should neutralize the fixed composer layer more broadly (for example inactive/pointer/hover/active chrome, depending on the intended design), and the regression test should assert the real composer visual state rather than only the body marker and input focus.

lefarcen · 2026-06-15T04:14:26Z

Hey @Diyoncrz18 — @AmyShang-alt has left some QA notes above (on routines.css) pointing out that the composer layer may still be visible and interactive in the lower-left corner once QuickSwitcher takes focus — the :focus-within suppression stops matching at that point, so the broader layer state (pointer, hover, active chrome) isn't fully neutralized. Worth reading through her comment and pushing an update when you're ready.

💡 To drive this PR to merge hands-free, paste this into your AI coding agent (Claude Code / Codex / opencode / Cursor …):
Take over nexu-io/open-design#4298 until it merges — read https://raw.githubusercontent.com/nexu-io/looper/main/skills/pr-takeover/SKILL.md and follow it.

Diyoncrz18 · 2026-06-15T04:47:43Z

Updated the QuickSwitcher open-state handling so the fixed composer layer is neutralized more broadly while the command palette is open.

Changes:

Disabled pointer interaction on .chat-composer-fixed-layer and its .composer child under body.od-quick-switcher-open.
Neutralized .composer-shell chrome for normal, hover, focus-within, and drag-active states, so the state stays neutral after focus moves to .qs-input.
Updated CSS contract coverage for the broader open-state selectors.
Updated the regression test to reproduce the screenshot scenario: focused/active composer, open QuickSwitcher, verify .qs-input focus, verify composer pointer interaction is suspended, verify shell chrome is neutralized, and verify behavior restores after close.

Validation:

pnpm --filter @open-design/web test -- tests/styles/workspace-tabs-chrome.test.ts tests/components/FileWorkspace.test.tsx passed: 2 files, 63 tests.
pnpm --filter @open-design/web typecheck passed.
pnpm typecheck passed.
git diff --check passed, with only Git’s Windows line-ending warning.
pnpm guard still fails due to unrelated pre-existing generated design-system manifest staleness across design-systems/*/manifest.json.

lefarcen · 2026-06-15T06:42:58Z

Hey @Diyoncrz18! @chaoxiaoche is asking for a quick visual before signing off on the design side — a screenshot or short GIF showing the QuickSwitcher/composer interaction in three states:

Before Cmd/Ctrl+P (normal composer)
During search (QuickSwitcher open, composer suppressed)
After dismissal (composer restored)

Nothing elaborate — even a screen-recorded GIF of the actual interaction works. Once she can see the before/after, she can give the design approval.

Diyoncrz18 · 2026-06-15T07:16:38Z

Added a short GIF showing the requested QuickSwitcher/composer states:

Before Cmd/Ctrl+P: composer visible normally.
During QuickSwitcher: search input focused and composer remains suppressed/stable without visually competing with the overlay.
After dismissal: composer restored.

Thanks!

AmyShang-alt · 2026-06-15T10:15:42Z

@Diyoncrz18 Re-tested the latest build (f1e362d) and #4148 still does not look fully fixed in light mode.

Repro:

Switch Open Design to light mode in Settings.
Open a workspace with the lower-left fixed composer visible.
Press Cmd+P / Ctrl+P to open QuickSwitcher.
Look at the lower-left composer while the QuickSwitcher input is focused.

Actual:
The page is dimmed and QuickSwitcher receives focus, but the composer input surface remains a bright white active-looking panel in the lower-left corner. It still visually competes with the QuickSwitcher overlay.

Expected:
While QuickSwitcher is open, the lower-left composer should be visually de-emphasized along with the rest of the workspace, so only the QuickSwitcher reads as the active input surface.

The latest update fixes pointer interaction and hover/focus/drag chrome, but it does not address the bright .composer-input-wrap / input surface in light mode. I don’t think this should close #4148 yet unless design explicitly accepts that remaining visual state.

I can add a screenshot showing the remaining light-mode state shortly.

lefarcen · 2026-06-15T20:05:55Z

Thanks for the follow-up push, @Diyoncrz18! The light-mode composer input surface iteration looks like the right direction. The diff has grown quite a bit with this round so we've bumped the label to size/L. Design review with @chaoxiaoche is continuing on the new head — we'll keep you posted once she's had a look.

Diyoncrz18 · 2026-06-15T20:15:47Z

Updated the fix and pushed commit 3991940c4.

The QuickSwitcher open state now also de-emphasizes the inner composer input surface in light mode, so the lower-left composer no longer appears as a bright active input while QuickSwitcher is focused. The composer still restores normally after dismissal.

Validation:

pnpm --filter @open-design/web test -- tests/styles/workspace-tabs-chrome.test.ts tests/components/FileWorkspace.test.tsx passed: 2 files, 63 tests.
git diff --check passed, with only CRLF warnings and no whitespace errors.

I also verified the light-mode interaction visually and attached the screenshot/GIF for review.

lefarcen · 2026-06-16T06:17:41Z

@Diyoncrz18 Design has signed off on the visual changes on this head — the composer de-emphasis across both dark and light mode looks good. 🎉

Next up is a code reviewer pass (to clear the merge gate) and then QA validation. Nothing needed from you right now — I'll update here once we're at the QA stage.

github-actions · 2026-06-19T07:51:37Z

@Diyoncrz18 friendly reminder: this PR has been waiting on an author response for more than 3 days after reviewer or maintainer feedback.

When you have a chance, please reply here or push an update. To keep the queue manageable, PRs with no author activity for more than 5 days after feedback may be closed automatically, but they can be reopened when work resumes.

github-actions · 2026-06-21T07:38:08Z

Closing this PR for now because it has been waiting on an author response for more than 5 days after reviewer or maintainer feedback.

This is only a queue-management step, not a rejection of the work. If you would like to continue, please leave a comment or push an update and reopen the PR when ready.

github-actions · 2026-06-27T12:28:05Z

Closing this PR for now because it has been waiting on an author response for more than 5 days after reviewer or maintainer feedback.

This is only a queue-management step, not a rejection of the work. If you would like to continue, please leave a comment or push an update and reopen the PR when ready.

AmyShang-alt

QA 验收通过。\n\n处理冲突时将 PR #4298 合并到最新 main，保留 quick search 打开时给 body 添加 od-quick-switcher-open 的逻辑，同时保留 main 新增的 sketch autosave 常量。\n\n本地验证：\n- pnpm --dir apps/web exec vitest run -c vitest.config.ts --maxWorkers=2 tests/components/FileWorkspace.test.tsx tests/components/QuickSwitcher.test.tsx tests/styles/workspace-tabs-chrome.test.ts：90 passed\n- pnpm --filter @open-design/web typecheck：通过\n- git diff --check / git diff --cached --check：通过

lefarcen · 2026-07-02T09:36:52Z

All gates look green here, so this is ready for maintainer merge. Thanks @Diyoncrz18, @PerishCode, and @AmyShang-alt!

* fix(web): keep composer stable during quick search * Fix quick switcher composer visual state * Fix quick switcher composer dim state --------- Co-authored-by: Amy <1184569493@qq.com>

fix(web): keep composer stable during quick search

c399b9d

lefarcen requested a review from PerishCode June 14, 2026 15:10

lefarcen added size/S PR changes 20-100 lines risk/medium Medium risk: regular code changes type/bugfix Bug fix labels Jun 14, 2026

lefarcen mentioned this pull request Jun 14, 2026

Quick file search causes lower-left composer to display incorrectly #4148

Closed

lefarcen reviewed Jun 14, 2026

View reviewed changes

lefarcen requested a review from chaoxiaoche June 14, 2026 15:11

lefarcen added the needs-validation Runtime change detected; needs human or /explore agent validation. label Jun 14, 2026

PerishCode approved these changes Jun 14, 2026

View reviewed changes

AmyShang-alt reviewed Jun 15, 2026

View reviewed changes

Fix quick switcher composer visual state

f1e362d

lefarcen added size/M PR changes 100-300 lines and removed size/S PR changes 20-100 lines labels Jun 15, 2026

Fix quick switcher composer dim state

3991940

lefarcen added size/L PR changes 300-700 lines and removed size/M PR changes 100-300 lines labels Jun 15, 2026

github-actions Bot closed this Jun 21, 2026

lefarcen reopened this Jun 27, 2026

github-actions Bot closed this Jun 27, 2026

lefarcen reopened this Jun 29, 2026

lefarcen added the exempt-from-stale Issue is exempt from automatic stale handling (set by stale-issues workflow). label Jun 29, 2026

Merge main into PR 4298

d1b104c

AmyShang-alt approved these changes Jul 2, 2026

View reviewed changes

AmyShang-alt added validated Runtime change validated (via /explore Pass or manual QA). and removed needs-validation Runtime change detected; needs human or /explore agent validation. labels Jul 2, 2026

AmyShang-alt requested a review from PerishCode July 2, 2026 08:33

lefarcen requested review from chaoxiaoche and xiaoche-hub July 2, 2026 08:35

PerishCode approved these changes Jul 2, 2026

View reviewed changes

AmyShang-alt added this pull request to the merge queue Jul 2, 2026

Merged via the queue into nexu-io:main with commit f0af7ed Jul 2, 2026
25 checks passed

Uh oh!

Conversation

Diyoncrz18 commented Jun 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

What users will see

Surface area

Bug fix verification

Validation

Uh oh!

lefarcen commented Jun 14, 2026

Uh oh!

lefarcen left a comment

Choose a reason for hiding this comment

Uh oh!

lefarcen commented Jun 14, 2026

Uh oh!

PerishCode left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Visual regression review

Uh oh!

Diyoncrz18 commented Jun 14, 2026

Uh oh!

lefarcen commented Jun 14, 2026

Uh oh!

Diyoncrz18 commented Jun 14, 2026

Uh oh!

lefarcen commented Jun 14, 2026

Uh oh!

AmyShang-alt Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lefarcen commented Jun 15, 2026

Uh oh!

Diyoncrz18 commented Jun 15, 2026

Uh oh!

lefarcen commented Jun 15, 2026

Uh oh!

Diyoncrz18 commented Jun 15, 2026

Uh oh!

AmyShang-alt commented Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lefarcen commented Jun 15, 2026

Uh oh!

Diyoncrz18 commented Jun 15, 2026

Uh oh!

lefarcen commented Jun 16, 2026

Uh oh!

github-actions Bot commented Jun 19, 2026

Uh oh!

github-actions Bot commented Jun 21, 2026

Uh oh!

github-actions Bot commented Jun 27, 2026

Uh oh!

AmyShang-alt left a comment

Choose a reason for hiding this comment

Uh oh!

lefarcen commented Jul 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Diyoncrz18 commented Jun 14, 2026 •

edited

Loading

github-actions Bot commented Jun 14, 2026 •

edited

Loading

AmyShang-alt Jun 15, 2026 •

edited

Loading

AmyShang-alt commented Jun 15, 2026 •

edited

Loading