Conversation
… home space, bottom bar, backgrounds) Establishes the design-token foundation the downstream cloud-UI token sweep depends on, plus the home/apps/widgets shell mechanics and platform fixes. Design tokens (styles/*.css): - semantic tokens downstream sweeps consume: --accent-hover, --status-* (success/warning/destructive), --scrim, --chain-* brand exceptions, plus text-2xs/3xs type steps and min-h-touch (44px) touch-target floor. Backgrounds + default field: - new default background is an ember-dark shader field (#160d07) with a warm ember glow (#ff6a1f) layered over it, replacing the old #ef5a1f orange flood that washed every surface out. Curated BACKGROUND_PRESETS become the single source of truth shared by swatches and the agent BACKGROUND action. - ImageBackground/ShaderBackground: one background layer invariant, legibility scrim always painted inside the image wallpaper via the --bg token. Shell mechanics: - HomeScreen / HomeLauncherSurface / StartupShell / DefaultHomeWidgets: home space + launcher surface + startup shell. - apps (AppsCatalogGrid, RunningAppsRow) + pages (AppsPageView, GeneratedViewHero) surfaces. - widgets: WidgetHost + home-priority ranking (home-priority.ts) with a 180-line test suite (home-priority.test.ts). Platform fixes: - iOS safe-area orange-band fix: safe-area floor div in App.tsx so the status bar inset no longer bleeds the accent. - same-origin WS base repair (web-ws-base-fix.ts) so plain-web serving does not point the socket at the wrong origin. - real eliza-logo PWA icons (android-chrome / apple-touch / brand favicons) + site.webmanifest, replacing the fallback-E placeholder. Co-authored-by: wakesync <shadow@shad0w.xyz>
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Contributor
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
This was referenced Jul 4, 2026
Collaborator
Author
|
UI overhaul series (stacked, merge in order):
Merge #13069 first; #13070 and #13073 then retarget to (A planned 4th PR for browser-bundle exports was dropped: #12919 and #12936 already landed those fixes on — [sol-orch] |
lalalune
pushed a commit
that referenced
this pull request
Jul 4, 2026
…rdcoded values to semantic tokens The cloud UI had accumulated hardcoded hex colors, white-opacity ladders (text-white/74 etc.), emoji icons, and ad-hoc backdrop-blur that made it effectively unthemeable and inconsistent across surfaces. This sweep converts those to the semantic tokens introduced by the design-token foundation. Scope (87 files under packages/ui/src/cloud/ and packages/ui/src/cloud-ui/): - ~800 hardcoded values converted to semantic tokens: status-success / status-warning / destructive, accent, muted, card, scrim. chain-brand colors are kept as documented exceptions (a chain's brand color is data, not theme). - lucide-react icons replace inline SVGs and emoji icons for consistent sizing, currentColor theming, and a11y. Real bugs found and fixed during the sweep: - broken group-hover on MCP cards (hover state never triggered because the group class was on the wrong ancestor). - invalid Tailwind classes like text-white/74 (not a real opacity step) that silently rendered as full-opacity white. - rgba stacking in invoice detail tables where overlapping semi-transparent fills compounded into the wrong final color. Zero behavior changes intended — this is a visual-token compliance pass. Stacked on the design-token foundation PR (#13069); needs its token defs to compile. Co-authored-by: wakesync <shadow@shad0w.xyz>
lalalune
pushed a commit
that referenced
this pull request
Jul 4, 2026
…rdcoded values to semantic tokens (#13073) The cloud UI had accumulated hardcoded hex colors, white-opacity ladders (text-white/74 etc.), emoji icons, and ad-hoc backdrop-blur that made it effectively unthemeable and inconsistent across surfaces. This sweep converts those to the semantic tokens introduced by the design-token foundation. Scope (87 files under packages/ui/src/cloud/ and packages/ui/src/cloud-ui/): - ~800 hardcoded values converted to semantic tokens: status-success / status-warning / destructive, accent, muted, card, scrim. chain-brand colors are kept as documented exceptions (a chain's brand color is data, not theme). - lucide-react icons replace inline SVGs and emoji icons for consistent sizing, currentColor theming, and a11y. Real bugs found and fixed during the sweep: - broken group-hover on MCP cards (hover state never triggered because the group class was on the wrong ancestor). - invalid Tailwind classes like text-white/74 (not a real opacity step) that silently rendered as full-opacity white. - rgba stacking in invoice detail tables where overlapping semi-transparent fills compounded into the wrong final color. Zero behavior changes intended — this is a visual-token compliance pass. Stacked on the design-token foundation PR (#13069); needs its token defs to compile. Co-authored-by: wakesync <shadow@shad0w.xyz>
This was referenced Jul 4, 2026
lalalune
pushed a commit
that referenced
this pull request
Jul 4, 2026
…ome typography, tray transparency (from #13069 overhaul) (#13466) * feat(ui): home + chat look layer — clouds/shader background polish, home typography, tray transparency (from #13069 overhaul) Upstream the AESTHETIC layer of the feat/ui-overhaul branch that never landed. The overhaul's mechanics + token plumbing merged overnight (57 PRs), but the actual LOOK did not. This ports the missing visual carriers so stock develop looks like the polished build. WHY THE LOOK NEVER LANDED (root cause found + fixed): The overhaul put its ember token system (warm accent #ff6a1f, warm near-black, --surface-1/2/3, --scrim) into theme.css AND base.css, but the running app only imports base.css + tailwind-theme.css via styles.css — theme.css is loaded ONLY by the e2e fixture bundler. So on stock develop, every `bg-scrim` / `bg-card` (=surface-1) usage already shipped (NotificationCenter, drawer, etc.) resolved to an UNDEFINED token → transparent at runtime. This lands the token layer in base.css (the file the app actually imports) so those usages resolve for real, in both light and dark. AREAS (per Shadow's named items + the rest of the look diff): - backgrounds/ShaderBackground.tsx: "midnight ember" field — a deep warm field with a low banked-ember glow breathing up from the composer, replacing the flat rim-pulse wall. Adds DEFAULT_BACKGROUND_GLOW (accent) to ui-preferences. - backgrounds/ImageBackground.tsx: legibility scrim (bg-bg/50) under any wallpaper so content wins over a bright photo, in both themes. - shell/DefaultHomeWidgets.tsx: the home time+weather TYPOGRAPHY — a 6xl left-aligned editorial clock with a quiet date/greeting stack (accent greeting) and a right-aligned weather cluster. Tokenized micro-text (text-xs-tight), no arbitrary text-[11px]. - shell/HomeScreen.tsx: full-height home column — editorial header anchored top, widgets in a flex-1 breathing region, AOSP tiles settled at the bottom. - shell/ContinuousChatOverlay.tsx: chat tray TRANSPARENCY fix (#1 "too transparent" complaint) — the open panel is now a SOLID warm-dark surface (--card) with a warm hairline edge, and the backdrop is a solid --scrim, so the ember field / home widgets no longer bleed through the open thread. Plus the full white/N-alpha → token migration (text-muted-strong, bg-surface, border-border, bg-scrim). STYLING ONLY — no gesture/scroll logic (kept clean for #13439's swipe rail to merge in any order). Uses --card (defined both themes) not --surface-1 (dark-only) so the panel is opaque in light mode too. - widgets/WidgetHost.tsx: home widgets read as full-width rows (hero dashboard), not cramped two-up truncated cards. - shell/HomeLauncherSurface.tsx: touch-pan-y so the home↔launcher flick isn't handed to the browser's scroll/back gesture. - styles/base.css: the runtime keystone — warm accent #ff6a1f (was #ff8a24), warm brown-black #140c07 (no pure #000), warm off-white, the soft radius ramp (6/8/11/14/18/22/28 vs the collapsed 3px), ember --surface-1/2/3, warm muted text, and --scrim (both themes). - styles/theme.css + tailwind-theme.css: the e2e/brand override layer kept in sync with base.css (adds --color-scrim mapping). - shell/ChatSurface.tsx: removed a backdrop-blur-sm that landed today via #13243 and was already failing the no-backdrop-blur battery gate on develop (flat system: solid bg-card + border, no blur/shadow). Unblocks the UI test lane. EXCLUDED as personal (Shadow-specific, not upstreamed): - bg-sunset.jpg wallpaper + the DEFAULT_BACKGROUND_CONFIG mode:"image" default. The "clouds background" Shadow named IS this personal photo wallpaper — the RENDERING support (ImageBackground + its scrim) ships, but the default stays the shader. BuildBadge / sol-build-info: untouched. RELATIONSHIP TO IN-FLIGHT PRs: - #13438 (ember-dark default bg): owns DEFAULT_BACKGROUND_COLOR + the App.tsx safe-area floor. This PR does NOT touch DEFAULT_BACKGROUND_COLOR, the config default, or the presets — only adds DEFAULT_BACKGROUND_GLOW (shader dep) and the base.css token values #13438 assumes. Merges cleanly in either order. - #13439 (swipe rail): owns the ContinuousChatOverlay gesture logic. This PR's overlay changes are STYLING-ONLY (no railX / usePullGesture / settle logic), so it merges clean regardless of order. Tests: targeted suites for every touched area pass (backgrounds, HomeScreen, DefaultHomeWidgets, HomeLauncherSurface, WidgetHost, ContinuousChatOverlay, ChatSurface, NotificationCenter token consumers) + the 4 anti-slop gates (backdrop-blur/focus-ring/widget-chrome/will-change) green + tsgo --noEmit clean over a real install + the home-screen e2e (Playwright) passes and its snapshot is regenerated. AppBackground.test updated for the shader's gradient-vs-flat paint + the new image scrim. One pre-existing develop failure (WidgetHost.home-launch "notifications widget when there is data") reproduces on stock develop and is unrelated to this change. Co-authored-by: wakesync <shadow@shad0w.xyz> * chore(ui): strip generated home artifact whitespace --------- Co-authored-by: wakesync <shadow@shad0w.xyz> Co-authored-by: Shaw <shawgotbags@gmail.com>
lalalune
pushed a commit
that referenced
this pull request
Jul 4, 2026
… background (#13438) * fix(ui): plain-web serving + iOS safe-area floor + ember-dark default background Lands three deferred polish items from the closed design-token foundation PR (#13069) that did not reach develop when the tokens were re-landed in scoped form via #13070. 1. iOS safe-area orange-band fix (App.tsx): a viewport-filling dark background-token floor (`app-safe-area-floor`, fixed inset-0 z-[-1] bg-bg) mounted on every route behind the shader. html/body/#root paint the orange launch guard (--launch-bg) as a FOUC color; on iOS the composer overlay is anchored by the visualViewport-derived bottom, so in the home-indicator safe-area the shader coverage could fall short and the orange host color bled through as a band under the composer. The floor makes every unpainted zone the dark BACKGROUND token, never accent. 2. Same-origin WS/API base repair (web-ws-base-fix.ts + first-side-effect import in main.tsx): the dev server injects a desktop-loopback __ELIZA_WS_BASE__ (ws://127.0.0.1:31337) that client-base reads first; on a reverse-proxied plain-web page the socket must be same-origin (wss://<host>/ws) and the REST base non-empty so connectWs()'s empty-base guard does not bail. The WS base is set via the __ELIZA_WS_BASE__ globals getInjectedWsBase() still reads directly; the REST base is set via setElizaApiBase() because the boot config (not a raw window global) is the single source of truth getElizaApiBase() reads on develop. No-op on desktop / native / loopback-dev contexts. App-branding globals untouched. 3. Ember-dark default background (ui-preferences.ts): DEFAULT_BACKGROUND_COLOR #ef5a1f -> #160d07 so the home reads as a banked ember in a dark room instead of flooding every surface with bright orange. The "orange" swatch preset keeps its own #ef5a1f literal so the curated palette is unchanged. Origin: #13069. Co-authored-by: wakesync <shadow@shad0w.xyz> * test(app): cover plain-web websocket base repair --------- Co-authored-by: wakesync <shadow@shad0w.xyz> Co-authored-by: Shaw <shawgotbags@gmail.com>
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.
Design-token foundation + shell mechanics
This PR establishes the design-token foundation that a follow-up cloud-UI token-compliance sweep depends on, plus the home / apps / widgets shell mechanics and a few platform fixes.
Design tokens (
packages/ui/src/styles/*.css)Adds the semantic tokens downstream sweeps consume:
--accent-hover,--status-success/--status-warning/--status-destructive,--scrim,--chain-*(brand exceptions)text-2xs/text-3xsmin-h-touch(44px touch-target floor)Backgrounds + default field
#160d07) with a warm ember glow (#ff6a1f) layered over it, replacing the old#ef5a1forange flood that washed every surface out.BACKGROUND_PRESETSbecome the single source of truth shared by the swatch picker and the agentBACKGROUNDaction ("use the green background" → same color the swatch sets).ImageBackground/ShaderBackground: one-background-layer invariant; the legibility scrim is always painted inside the image wallpaper via the--bgtoken so content stays legible over any wallpaper in both themes.Shell mechanics
HomeScreen/HomeLauncherSurface/StartupShell/DefaultHomeWidgets— home space + launcher surface + startup shell.AppsCatalogGrid,RunningAppsRow) + pages (AppsPageView,GeneratedViewHero).WidgetHost+ home-priority ranking (home-priority.ts) with a 180-line test suite (home-priority.test.ts).Platform fixes
App.tsxso the status-bar inset no longer bleeds the accent.web-ws-base-fix.ts) so plain-web serving doesn't point the socket at the wrong origin.site.webmanifest, replacing the fallback-Eplaceholder.File count
32 files changed (+958 / −243).
Validation
packages/uitsc --noEmit: clean (0 errors, after generating the i18n keyword data that is normally build-generated).home-priority.test.ts: all pass.AppBackground.test.tsx: extraction verified; one pre-existing test (renders the shader in the configured color by default) fails identically on the source branch due to a React 19 Suspense/act()timing issue in jsdom — not introduced by this PR.Series
Part of a UI overhaul carved into a stacked series. See linked sibling PRs.
— [sol-orch]