feat(desktop): unified overlay design system, BrandMark & onboarding redesign#40708
Merged
Conversation
Replace raw <button> action/text controls across the modal layer (boot failure, install, update, onboarding, clarify, model-visibility, notifications, gateway menu) with the shared Button + its variants (text / ghost / icon-xs). Drops the bespoke square-cornered styling so every dialog matches the app's slightly-rounded button system, and swaps clarify-tool's hardcoded "Skip" for the existing i18n string.
Contributor
🔎 Lint report:
|
A code-split, DEV-gated harness (toggle ⌘/Ctrl+Alt+Shift+D) that triggers every dialog/overlay so their buttons can be eyeballed in one place: store-driven overlays (boot failure, updates, notifications, sudo/secret) plus in-place dialogs (confirm, profile create/rename, attach-url, model picker/visibility, clarify, tool approval). Never ships to production.
The Cmd/Ctrl+Alt+Shift+D chord is impractical on macOS (Option mangles the keypress). Ctrl+Shift+D is the same chord on every platform and uses neither Cmd nor Option.
Action buttons hardcoded size-4 icons, overriding the Button component's built-in size-3.5. That extra 2px is why boot-failure / onboarding / gateway buttons looked chunkier than the settings "Apply" (size-3.5 spinner) despite being the same component+size. Drop the overrides so icons inherit 3.5.
New BrandMark renders the white logo.png on a hardcoded brand-blue tile (#0000F2 light / #222 dark), replacing the generic Sparkles hero glyph in the "update available" overlay. Trying it here first to iterate on the look. NOTE: apps/desktop/public/logo.png is currently a 1x1 placeholder — the tile renders now; the glyph appears once the real white logo art is dropped in.
logo.png is blue line-art on transparent, so force it white via filter to read on both the brand-blue (#0000F2) and near-black (#222) tiles. Bump the glyph to 62% of the tile for the portrait aspect.
Drop the white filter, the hardcoded light-mode blue tile, the radius, and the inner padding. Logo now fills the tile over a transparent surface in light mode; dark keeps the #222 tile.
Swap the BrandMark glyph to karb.webp, downscaled from 1129x1418/888KB to 254x320/81KB for the hero badge.
Key the white background to transparent so only the black line-art remains (384px/20KB webp). Light mode shows black art; dark mode flips it white via dark:invert on the #222 tile. Drop the now-unused karb.webp and logo.png.
The dark-mode invert read as a creepy negative. Use the opaque black-on-white mark unchanged in both themes; drop the white-key, dark:invert, and #222 tile.
The outline variant used bg-background (the chrome color), so on cards/overlays with a different surface it rendered as an odd gray-blue fill (visible on the boot overlay's Repair install / Use local gateway). Make it bg-transparent so it inherits the surface like a real outline. Reverts the unrelated --theme-secondary tweak.
Drop shadow-xs and the resting fills (light chrome bg, dark bg-input/30) so outline is just a thin clean border with a subtle hover, in both themes.
A global [data-variant='outline'] rule set background: var(--ui-bg-tertiary), which (attribute-selector specificity) overrode the cva bg-transparent — so outline buttons always showed the pale tertiary fill on cards/overlays regardless of the variant classes. Scope that fill to secondary only; outline is now a true transparent border.
Overlays/dialogs/toasts share a custom shadow-nous (downward-weighted) and --stroke-nous hairline instead of hard borders: boot-failure, install, notifications, model-picker, onboarding, prompt-overlays, updates, Dialog. - button: outline is a 1px inset ring (no fill/shadow); chrome lives in Button - BrandMark: 256px nous-girl mark replaces sparkle glyphs (updates/onboarding/about) - onboarding: conditional header, lemniscate-bloom loaders, OTP device-code boxes, NOUS CONNECTED hero (ascii decode) + cuneiform easter egg, "Begin" matrix exit - shared LogView + ErrorState; math/ascii loaders over "Loading..." text - appearance-settings flattened to SegmentedControl/ListRow; keybind-panel on shadow-nous + text-variant reset - restore flat-UI clobbered by #38631's stale-squash (4a1907b): command-center, profiles, skills, messaging, cron de-boxed; shared SearchField + PAGE_INSET_X; profiles back on OverlaySplitLayout; skills tabs+search one row, no row dividers
- log-view: drop unused `bare` prop + forwardRef (no caller uses ref)
- install-overlay: drop `stateOverride` (only the removed dev gallery used it)
- profiles: ProfilesViewProps down to { onClose } (drop vestigial section/titlebar)
- onboarding: hoist shared PROVIDER_ROW_CLASS (was duplicated 2x)
- brand-mark / error-state: tighten comments, fix stale AlertCircle reference
OutThisLife
added a commit
that referenced
this pull request
Jun 6, 2026
De-box the master/detail Cron page ahead of #40708's flat-UI system: drop the two rounded-lg border/bg cards for a single --ui-stroke-tertiary hairline between list and detail, swap the header divider and schedule- preview chip onto the same stroke/bg-quinary tokens. No --stroke-nous (that lands with #40708); only tokens already on this branch.
changman
pushed a commit
to changman/hermes-agent
that referenced
this pull request
Jun 10, 2026
…redesign (NousResearch#40708) * fix(desktop): unify dialog/overlay buttons on shared Button component Replace raw <button> action/text controls across the modal layer (boot failure, install, update, onboarding, clarify, model-visibility, notifications, gateway menu) with the shared Button + its variants (text / ghost / icon-xs). Drops the bespoke square-cornered styling so every dialog matches the app's slightly-rounded button system, and swaps clarify-tool's hardcoded "Skip" for the existing i18n string. * feat(desktop): add dev-only dialog gallery for auditing overlays A code-split, DEV-gated harness (toggle ⌘/Ctrl+Alt+Shift+D) that triggers every dialog/overlay so their buttons can be eyeballed in one place: store-driven overlays (boot failure, updates, notifications, sudo/secret) plus in-place dialogs (confirm, profile create/rename, attach-url, model picker/visibility, clarify, tool approval). Never ships to production. * fix(desktop): use Ctrl+Shift+D for dialog gallery (mac-friendly) The Cmd/Ctrl+Alt+Shift+D chord is impractical on macOS (Option mangles the keypress). Ctrl+Shift+D is the same chord on every platform and uses neither Cmd nor Option. * fix(desktop): stop overriding button icon size to size-4 Action buttons hardcoded size-4 icons, overriding the Button component's built-in size-3.5. That extra 2px is why boot-failure / onboarding / gateway buttons looked chunkier than the settings "Apply" (size-3.5 spinner) despite being the same component+size. Drop the overrides so icons inherit 3.5. * feat(desktop): add BrandMark, use it in the updates overlay hero New BrandMark renders the white logo.png on a hardcoded brand-blue tile (#0000F2 light / NousResearch#222 dark), replacing the generic Sparkles hero glyph in the "update available" overlay. Trying it here first to iterate on the look. NOTE: apps/desktop/public/logo.png is currently a 1x1 placeholder — the tile renders now; the glyph appears once the real white logo art is dropped in. * feat(desktop): add real logo.png asset, render it white in BrandMark logo.png is blue line-art on transparent, so force it white via filter to read on both the brand-blue (#0000F2) and near-black (NousResearch#222) tiles. Bump the glyph to 62% of the tile for the portrait aspect. * fix(desktop): BrandMark renders logo as-is, no light bg/radius/padding Drop the white filter, the hardcoded light-mode blue tile, the radius, and the inner padding. Logo now fills the tile over a transparent surface in light mode; dark keeps the NousResearch#222 tile. * fix(desktop): bump updates-overlay BrandMark to size-16 * feat(desktop): use downscaled karb.webp in BrandMark Swap the BrandMark glyph to karb.webp, downscaled from 1129x1418/888KB to 254x320/81KB for the hero badge. * feat(desktop): use nous-girl mark in BrandMark, invert in dark Key the white background to transparent so only the black line-art remains (384px/20KB webp). Light mode shows black art; dark mode flips it white via dark:invert on the NousResearch#222 tile. Drop the now-unused karb.webp and logo.png. * fix(desktop): BrandMark uses nous-girl as-is (no transparent/invert) The dark-mode invert read as a creepy negative. Use the opaque black-on-white mark unchanged in both themes; drop the white-key, dark:invert, and NousResearch#222 tile. * fix(desktop): give BrandMark an explicit white bg tile * fix(desktop): use nous-girl.jpg directly in BrandMark * perf(desktop): downscale nous-girl.jpg to 256x256 (466KB -> 19KB) * style(desktop): bump nous light --theme-secondary to 14% blue * fix(desktop): outline button is transparent, not chrome-filled The outline variant used bg-background (the chrome color), so on cards/overlays with a different surface it rendered as an odd gray-blue fill (visible on the boot overlay's Repair install / Use local gateway). Make it bg-transparent so it inherits the surface like a real outline. Reverts the unrelated --theme-secondary tweak. * fix(desktop): clean outline button — thin border, no shadow/fill Drop shadow-xs and the resting fills (light chrome bg, dark bg-input/30) so outline is just a thin clean border with a subtle hover, in both themes. * fix(desktop): stop forcing tertiary bg on outline buttons A global [data-variant='outline'] rule set background: var(--ui-bg-tertiary), which (attribute-selector specificity) overrode the cva bg-transparent — so outline buttons always showed the pale tertiary fill on cards/overlays regardless of the variant classes. Scope that fill to secondary only; outline is now a true transparent border. * style(desktop): unified overlay design system + restore NousResearch#38631 flat-UI Overlays/dialogs/toasts share a custom shadow-nous (downward-weighted) and --stroke-nous hairline instead of hard borders: boot-failure, install, notifications, model-picker, onboarding, prompt-overlays, updates, Dialog. - button: outline is a 1px inset ring (no fill/shadow); chrome lives in Button - BrandMark: 256px nous-girl mark replaces sparkle glyphs (updates/onboarding/about) - onboarding: conditional header, lemniscate-bloom loaders, OTP device-code boxes, NOUS CONNECTED hero (ascii decode) + cuneiform easter egg, "Begin" matrix exit - shared LogView + ErrorState; math/ascii loaders over "Loading..." text - appearance-settings flattened to SegmentedControl/ListRow; keybind-panel on shadow-nous + text-variant reset - restore flat-UI clobbered by NousResearch#38631's stale-squash (4a1907b): command-center, profiles, skills, messaging, cron de-boxed; shared SearchField + PAGE_INSET_X; profiles back on OverlaySplitLayout; skills tabs+search one row, no row dividers * refactor(desktop): clean pass — drop dead code, dedupe, fix stale docs - log-view: drop unused `bare` prop + forwardRef (no caller uses ref) - install-overlay: drop `stateOverride` (only the removed dev gallery used it) - profiles: ProfilesViewProps down to { onClose } (drop vestigial section/titlebar) - onboarding: hoist shared PROVIDER_ROW_CLASS (was duplicated 2x) - brand-mark / error-state: tighten comments, fix stale AlertCircle reference
changman
pushed a commit
to changman/hermes-agent
that referenced
this pull request
Jun 10, 2026
De-box the master/detail Cron page ahead of NousResearch#40708's flat-UI system: drop the two rounded-lg border/bg cards for a single --ui-stroke-tertiary hairline between list and detail, swap the header divider and schedule- preview chip onto the same stroke/bg-quinary tokens. No --stroke-nous (that lands with NousResearch#40708); only tokens already on this branch.
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
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
Started as "put every dialog/overlay button on the shared
Button" and grew into a cohesive overlay design pass — one shadow, one border token, one logo, one loader vocabulary — plus restoring the flat-UI work from #38631 that a later stale-branch squash (4a1907bd1) silently reverted.Screen.Recording.2026-06-06.at.15.44.58.mov
Overlay system
shadow-nous+--stroke-nous. Custom downward-weighted shadow and acurrentColor-10% hairline replace hard borders on every overlay/dialog/toast: boot-failure, install, notifications, model-picker, onboarding, prompt-overlays, updates, and the baseDialog. Both are CSS vars, tweakable in one place.outlineis now a 1px inset ring (no fill/shadow); all sizing/radius/chrome flows fromButtonvariants — no per-call overrides.BrandMark
BrandMarkrenders the 256×256nous-girlmark (downscaled 466KB → 19KB), white-on-dark inverted. Replaces the scattered Sparkles glyphs in updates / onboarding / about.Onboarding redesign
lemniscate-bloomloaders replace bare spinners.NOUS CONNECTEDhero decoded from scrambled ASCII, model line below, cuneiform-glyph easter egg on the model name +Begin, and a choreographed "matrix" fade-down exit (video above).Shared primitives
LogView(unified log styling: tight padding, small mono) used by boot-failure + install.ErrorStatefor error fallbacks; math/ascii loaders over "Loading…" text.Flat-UI restore (regressions from #38631)
4a1907bd1was squash-merged from a branch behindmainand clobbered the flat layouts. Restored, adapted to current i18n/features:SearchField+PAGE_INSET_Xgutters.OverlaySplitLayout(dropped the bespoke titlebar shell + vestigial props).SegmentedControl/ListRow; keybind-panel onshadow-nous+ text-variant reset.Test plan
tsc -bclean