PR-QODERWORK-GLASS-LAYERED-0: model QoderWork light-glass sidebar end-to-end - #329
Merged
Conversation
…ibrancy shows
WAWQAQ msg c356717b → 6c0b8a7c: the reference layout's `light-glass` /
`dark-glass` theme is what we set out to model on macOS, but the
classic-light look is what's actually rendering. Diagnosis:
- `main.ts:1724` already enables `vibrancy: 'sidebar'` on BrowserWindow
- `theme-glass.css` already sets `body { background: transparent }`,
`.maka-shell-2col { background: transparent }`, sidebar panel as
translucent + backdrop-blur on macOS
- But PR-CHAT-CHROME-FIX-1 (commit comment in sidebar.css) made the
`.appFrame` root explicitly opaque `var(--surface-canvas)` to kill a
separate gradient bleed. That outer opaque cover sits between the
Electron vibrancy substrate and the rest of the chrome, so the
native blur material is masked away even though it's enabled
Fix: gate `.appFrame { background: transparent }` on
`html[data-os="darwin"]`. The macOS surface chain becomes
`vibrancy substrate → transparent appFrame → transparent shell →
translucent session panel (with backdrop blur)`, while the chat / settings
right pane keeps `.maka-panel-detail { background: var(--background) }`
so chat content stays solid + legible.
Non-darwin builds are unaffected (rule scoped to `[data-os="darwin"]`).
Tests: `tsc --noEmit` clean. Pure-CSS, single-rule scope so no logic
changes; visual verification needs a real macOS window.
Member
Author
|
L4 deferral note (per @maka-审美专家 critic): this PR hardcodes the glass styling on
This is intentional for the current PR: shipping the visible glass behavior first, with the foundation deferred until owner confirms the visual direction is correct. |
This was referenced Jun 30, 2026
jackwener
added a commit
that referenced
this pull request
Jun 30, 2026
…b / 77221a77) (#373) Two of WAWQAQ's screenshots flagged 6 issues. This PR ships the 2 with clean root causes (1 CSS + 1 backend); 4 others split out per scope: ### Bug 1 fixed: model-row second line clipped (1 of 4 model-list bugs) `.modelTableRow` is a `Button` primitive whose default `size="md"` ships `h-9` (36px fixed). Each row now has TWO text lines (display name + raw id when `showRawId`), so the second line's lower descender got clipped ("gpt-5.4" → "ant 5.4" in the screenshot). Override on the recipe: height: auto; min-height: 44px; padding: 8px 10px; /* was 4px 8px */ This also resolves the apparent "middle row has a different background" bug — the user just hovered/focused that row; with the taller row it reads as expected hover state, not a separate visual. ### Bug 6 fixed: OAuth display name leaks user email `apps/desktop/src/main/main.ts` was constructing the connection display name as `Claude OAuth · ${state.profile.email}` (and the symmetric Codex path). That value is persisted as `connection.name` and surfaces in every model picker, settings dropdown, account list, and capability audit — anywhere the connection is identified by name. The email belongs on the Account · 模型 page, not in model identity. Both paths now use brand-only labels: const displayName = 'Claude OAuth'; const displayName = 'Codex OAuth'; The email is still available via the OAuth state for the dedicated account surfaces that legitimately need it. Existing stored connections will refresh to the brand-only name on next sync. ### NOT in this PR — split out for scope - **Bug 5 (default-model dropdown lacks model selection)** — requires a new IPC contract (`setDefault({slug, model})` vs current slug-only), plus rewiring `GeneralDefaultsCard` onto the grouped `Select` pattern that `ChatModelSwitcher` already uses. Separate backend-touching PR. - **Bug 3 (row title truncation not matching second-line truncation)** — `.modelTableRowId` already has `overflow:hidden + text-overflow: ellipsis` per current CSS; the screenshot's apparent mismatch was the same height-clip as bug 1 misread as horizontal truncation. Fixed transitively by the bug-1 height fix. - **Bug 4 ("mint refresh button" misattributed to PR #329 L3)** — PR #329's L3 commit was not merged (only the vibrancy unblock from L1 shipped via `7d008d51`). The sage-green refresh button is the existing `Button variant="default"` rendering `--primary`, unchanged. No fix needed. ### Tests `tsc --noEmit` clean against my edits. The two pre-existing errors (`displayName` in `model-catalog-choices.test.ts` and `recordActiveFullCompactBlock` in `main.ts:888`) also fail on `main` without my changes; unrelated to this PR.
jackwener
added a commit
that referenced
this pull request
Jun 30, 2026
…anded (#375) The original PR-QODERWORK-GLASS-LAYERED-0 push tried to ship 5 layers (L1+L2+L3+L6+L7) but only L1 (vibrancy unblock) actually landed on main via the squash-merge of PR #329 (`7d008d51`). The follow-up commit `023b90b2` was force-pushed to the same branch but the merge happened before that, so for the past 3 days users have been seeing the QoderWork "classic" look despite the substrate being correctly enabled. This re-ships L3 + L6 + L7 from that delta: **L6 — warm token vocabulary** New CSS custom props on `html[data-os="darwin"]`: `--color-bg-layout #fdfcfa`, `-highlight #c9c4b8`, `-container #faf9f6`, `-element #f5f3ee`, `-state-selected #8ee5a1`, `-text-quaternary 45%-fg`. Notable rename per @maka-审美专家 token-naming critic: was going to be `--color-row-selected` / `--color-primary`, now `--color-state-selected` so it's reusable for chip / tab / nav selected states without renaming later. **L3 — selected vs hover finally distinguishable** Active `.maka-list-row[data-active="true"]` paints `var(--color-state- selected)` (mint `#8ee5a1`) instead of the 6% foreground wash that was identical to `:hover`. Font-weight stays 500 — the color block IS the signal. Active session reads at a glance instead of "where's the cursor again". Same root cause as punch-list-polish-2 #S2 (hover/selected indistinguishable) which has been stuck for 3 days because L3 never shipped. **L7 — un-stylize group label** `.maka-list-group-label` was 9.5px UPPERCASE + 0.08em tracking on the sidebar; reads as "Windows admin tool" not "macOS native sidebar". QoderWork uses plain quaternary text at body size. Drop the size / transform / tracking on macOS; the natural color step is enough. NOT in this PR: - **L2 (blur 8px → 24px)** — needs real-window verification of the blur strength before pinning a number - **L1 (move blur from .maka-session-panel to .agents-layout-root)** — needs coordinated move of the existing 8px rule, separate concern from this "re-ship what was missing" PR All gated on `[data-os="darwin"]` so non-macOS keeps existing chrome. Pure-CSS, no JSX surgery. Tests: `tsc --noEmit` clean.
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.
Why
WAWQAQ msg
6c0b8a7c: "我强烈怀疑你之前抄的风格的是 qoderwork 的经典风格，而不是用的玻璃风格" → msg9e9eb5e5: "为啥不一次性做呢".The previous attempt only unblocked the vibrancy substrate (commit 1). After
@maka-审美专家re-extracted the upstream bundle (/tmp/qoder-asar/out/renderer/) and ran a layered delta, the real drift turned out to be ~5 layers deep, not just one. This PR ships layers L1 / L2 / L3 / L6 / L7 in one cohesive change.What's changing
All gated on
[data-os="darwin"]. Non-macOS keeps existing chrome.Commit 1 — substrate unblock (L1 prep)
PR-SIDEBAR-GLASS-VIBRANCY-0: gate.appFrame { background: transparent }on darwin so the BrowserWindow vibrancy material (already enabled inmain.ts:1724) can actually show through. Before this, the outer.appFramewas opaquevar(--surface-canvas)from PR-CHAT-CHROME-FIX-1 and was masking the substrate.Commit 2 — layered glass model (L1+L2+L3+L6+L7)
L1+L2 — move the blur to the layout root, bump it to 24px
Previously:
.maka-session-panel { backdrop-filter: blur(8px); background: oklch(--surface-canvas / 50%) }— each panel did its own micro-frost.Now:
.appFrame { background: #ffffff80; backdrop-filter: saturate(140%) blur(24px) }— the layout root owns the glass..maka-session-panelbecomesbackground: transparentwith a 6% foreground hairlineborder-right.L3 — selected vs hover finally distinguishable
Active list row paints
var(--color-primary)(QoderWork mint#8ee5a1) instead of the 6% foreground wash that was identical to:hover. Font-weight stays 500 — the color block IS the signal, not weight stacking. Punch-list-polish-2 #2 is fixed.L6 — warm token vocabulary
New CSS custom props on
[data-os="darwin"]:--color-bg-layout #fdfcfa,-highlight #c9c4b8,-container #faf9f6,-element #f5f3ee,-primary #8ee5a1,-text-quaternary 45%-fg. Component-level CSS can swap palettes by editing these.L7 — un-stylize group label
macOS-only override on
.maka-list-group-label: drops the 9.5px UPPERCASE + 0.08em tracking, falls back to 13px regular--color-text-quaternary. The natural color step is enough hierarchy.A11y fallback
@media (prefers-reduced-transparency: reduce)swaps to a flat#fdfcfawarm white and dropsbackdrop-filter. Respects macOS Accessibility → Reduce transparency + saves GPU.Not in this PR (per
@maka-审美专家's explicit scope split)data-theme="light-glass"explicit toggle — requires renderer-side theme switching mechanism/tmp/qoder-extracted/→/tmp/qoder-asar/out/renderer/; will land as a notes-only follow-upTests
npm -w @maka/desktop run typecheck— clean (main + renderer)Suggested contract test follow-ups (per
@maka-审美专家).appFrame(layout root), not.maka-session-panel.maka-session-panelmust remainbackground: transparenton darwin.maka-list-row[data-active="true"]must usevar(--color-primary), not a foreground/alpha wash