Repository navigation
OpenUI Observability: rework the trace diagram, feature cards and closing CTA - #1211
Merged
Merged
Conversation
The page was a set of sections that each looked right on a wide screen and came apart on a phone. This reworks the argument it makes and fixes what phone width did to it. - The trace gap diagram was two panels of badges, status marks and per-row descriptions. It is now one card split down the middle: a heading pair per side and four plain rows, each row opposite the one it answers. The halves share a height and their lists use equal rows, so line n on the left stays level with line n on the right whichever wraps. - The trust block moved from below the setup steps to directly under Insights, where the feature flow ends on what the product learns from a session and a reader starts wondering where that data goes. Setup keeps the grey; trust now sits on the page. - The closing CTA is a centred column rather than a title and a field on opposite sides of 1200px: offer, title, field, pricing. Its "View pricing" is now the same tertiary Button the trust section uses. - Feature cards on a phone read heading, image, then description. The orders are absolute rather than relative, because the cards alternate which side the art takes on desktop and a relative rule would have given odd and even cards different mobile orders. - The feature shots kept their artwork's own 1.8 ratio on a phone. A 4/3 stage was cutting a quarter of the width off every screenshot, straight through the UI, and the per-image object-position offsets underneath it were chasing that crop rather than removing it. - The setup snippet renders at its desktop measure and scales down, so the code keeps its proportions instead of losing its right-hand half. Three shared Cloud files gain opt-in hooks rather than new behaviour: --cloud-code-mobile-zoom, --cloud-code-mobile-padding-block and --cloud-setup-content-display all default to what they do today, so /cloud/gateway is unchanged. Verified: its panel still has zoom 1 and its steps still precede the code. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Aditya-thesys
approved these changes
Sep 21, 2026
… size
The WebP conversion behind the new artwork ran a lossless encode at minimal
compression effort and carried the source ICC profile through into a VP8X
container. Nothing was compressed to a lower quality; the encoder simply
did not try. The fourteen files landed at 9.03 MB against the 3.11 MB they
replaced.
Re-encoded with `cwebp -z 9 -metadata none`. Lossless at maximum effort,
which on flat UI screenshots with an alpha channel beats lossy -q 90 on
size as well as on fidelity, so there is no reason to take the quality hit.
before this branch 3.11 MB
as committed 9.03 MB
now 1.27 MB
Every file verified: decoded both versions to PNG and compared SHA-256.
Identical after decode, so this is a pure size change with no visual diff.
insights keeps the genuine 1440 -> 2880 upgrade this branch gave it.
Reproduce:
for f in docs/public/openui-observability/*.webp; do
dwebp -quiet "$f" -o /tmp/r.png &&
cwebp -quiet -z 9 -metadata none /tmp/r.png -o "$f"
done
Separate from this: the <Image> elements in FeaturesSection still set
`unoptimized`, so the sizes hint beside it is inert and a phone pulls the
full 2880px file into a ~343px slot.
Aditya-thesys
added a commit
that referenced
this pull request
Sep 22, 2026
…ges (#1206) * feat(home): product artwork, rebuilt compatibility diagram, shader stages Replaces the placeholder illustrations on the OpenUI and Gateway bands with real artwork, rebuilds the compatibility diagram, and adds a shader layer behind each product stage. The -light / -dark suffix on the artwork is the picture's own tone, not the page theme: the Cloud band is black on a light page and white on a dark one, so it needs the opposite asset in each. The compatibility diagram's centre is one element spanning all four rows rather than four stacked cells, because stacked cells each cast their shadow onto their neighbours, which are the rest of the same column. Llama, LlamaIndex and Mastra are left out of the diagram: no mark could be found for any of them, and a row is better short than represented by a related company's logo. --openui-foreground is pinned to white on the home page's own root rather than on .homeTheme. The token is declared in the react-ui package and read in 167 places across the site, and .homeTheme covers thirteen marketing routes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * feat(home): mobile artwork, accordion rows and layout for the product bands The bands were drawn wide. On a phone that meant a squeezed desktop picture, a horizontal card scroller, and a description stranded above the artwork it describes. Everything here is scoped to the 767px breakpoint; desktop renders exactly as it did before. - Phone artwork: each stage carries a second 1440x1200 drawing, switched by a display:contents wrapper so the existing theme rules still pick the tone. The wrapper sidesteps a specificity race, since [data-theme="dark"] .x outranks a .x inside a media query. - Shader: phone-width screens get more wave cycles and a thinner line, because a phone shows so little of the preset that it reads as one flat swell. Keyed off the viewport, so every shader on a screen matches. - Descriptions move below the stage: .lockup becomes display:contents and its children take an order, rather than duplicating the copy. - Gateway's cards render as FeatureGridSection accordion rows, matching the grid under the Lang band. So a band can re-point the grid's colours, each --fg-* token now reads a --feature-grid-* override first: .section declares --fg-* on itself, so a value inherited under the same name would lose to it. - The Cloud heading drops out, the band separator fades at both ends, and the Lang band sits closer to the grid that states its capabilities. Also fixes the tweet wall, which clipped the right edge off every card and overlapped its columns: the column sizes its border box, so a flat 230px basis left only 198px of content box while the slot inside was a fixed 320px. The column is now 262px (the card plus its 16px of shadow bleed) and the slot a percentage, which under zoom resolves in its own scaled space and so tracks the column. The feature grid's vertical dividers now fade at their ends, which shows on every page that uses it: benchmarks, cloud, gateway, observability, openclaw-os and pricing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * OpenUI Observability: rework the trace diagram, feature cards and closing CTA (#1211) * feat(observability): rework the page's diagram, features and closing CTA The page was a set of sections that each looked right on a wide screen and came apart on a phone. This reworks the argument it makes and fixes what phone width did to it. - The trace gap diagram was two panels of badges, status marks and per-row descriptions. It is now one card split down the middle: a heading pair per side and four plain rows, each row opposite the one it answers. The halves share a height and their lists use equal rows, so line n on the left stays level with line n on the right whichever wraps. - The trust block moved from below the setup steps to directly under Insights, where the feature flow ends on what the product learns from a session and a reader starts wondering where that data goes. Setup keeps the grey; trust now sits on the page. - The closing CTA is a centred column rather than a title and a field on opposite sides of 1200px: offer, title, field, pricing. Its "View pricing" is now the same tertiary Button the trust section uses. - Feature cards on a phone read heading, image, then description. The orders are absolute rather than relative, because the cards alternate which side the art takes on desktop and a relative rule would have given odd and even cards different mobile orders. - The feature shots kept their artwork's own 1.8 ratio on a phone. A 4/3 stage was cutting a quarter of the width off every screenshot, straight through the UI, and the per-image object-position offsets underneath it were chasing that crop rather than removing it. - The setup snippet renders at its desktop measure and scales down, so the code keeps its proportions instead of losing its right-hand half. Three shared Cloud files gain opt-in hooks rather than new behaviour: --cloud-code-mobile-zoom, --cloud-code-mobile-padding-block and --cloud-setup-content-display all default to what they do today, so /cloud/gateway is unchanged. Verified: its panel still has zoom 1 and its steps still precede the code. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(observability): re-encode the feature art, same pixels at 1/7 the size The WebP conversion behind the new artwork ran a lossless encode at minimal compression effort and carried the source ICC profile through into a VP8X container. Nothing was compressed to a lower quality; the encoder simply did not try. The fourteen files landed at 9.03 MB against the 3.11 MB they replaced. Re-encoded with `cwebp -z 9 -metadata none`. Lossless at maximum effort, which on flat UI screenshots with an alpha channel beats lossy -q 90 on size as well as on fidelity, so there is no reason to take the quality hit. before this branch 3.11 MB as committed 9.03 MB now 1.27 MB Every file verified: decoded both versions to PNG and compared SHA-256. Identical after decode, so this is a pure size change with no visual diff. insights keeps the genuine 1440 -> 2880 upgrade this branch gave it. Reproduce: for f in docs/public/openui-observability/*.webp; do dwebp -quiet "$f" -o /tmp/r.png && cwebp -quiet -z 9 -metadata none /tmp/r.png -o "$f" done Separate from this: the <Image> elements in FeaturesSection still set `unoptimized`, so the sizes hint beside it is inert and a phone pulls the full 2880px file into a ~343px slot. --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Aditya-thesys <aditya@thesys.dev> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Aditya-thesys <aditya@thesys.dev>
This branch was successfully deployed
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
2 participants
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.
Reworks the
/cloud/observabilitypage. Most of the change is the argument the page makes and what phone width was doing to it.Based on
home-white-background, notmain. The page rendersFadedDither, which only exists on that branch, so this cannot build againstmainuntil #1206 lands. Merge #1206 first and this retargets cleanly.What changed
Trace gap diagram. Was two panels of badges, status marks and per-row descriptions. Now one card split down the middle: a heading pair per side and four plain rows, each row sitting opposite the one it answers. The halves share a height and their lists use equal rows, so line n on the left stays level with line n on the right whichever one wraps. Component went 93 lines to 84, stylesheet 250 to 163.
Section order. The trust block moved from below the setup steps to directly under Insights, where the feature flow ends on what the product learns from a session and a reader starts wondering where that data goes. Setup keeps the grey band; trust now sits on the page.
Closing CTA. A centred column rather than a title and a field on opposite sides of 1200px: offer, title, field, pricing. "View pricing" is now the same tertiary
Buttonthe trust section uses, arrow and all.Mobile
object-positionoffsets underneath it were chasing that crop rather than removing it.Shared files
Three files under
cloud/gain opt-in hooks rather than new behaviour.--cloud-code-mobile-zoom,--cloud-code-mobile-padding-blockand--cloud-setup-content-displayall default to today's values, so only this page opts in.Verified
/cloud/gatewayis untouched: its code panel still reportszoom: 1and its steps still precede the code. (/cloudis a 307 redirect to/innext.config.mjs, so its page is unreachable.)Checks
tsc, ESLint and Prettier clean. Verified in the browser at 1326px and 375px, in both themes.🤖 Generated with Claude Code