fix(tangle-cloud): /blueprints/:id 404 + surface elevation restyle#3223
Merged
Merged
Conversation
…elevation restyle
Bug: /blueprints/1, /blueprints/2, etc. all 404'd on develop because
useBlueprint / useBlueprintDetails were GraphQL-only — the list page had
a chain-read fallback (shipped earlier) but the detail hooks didn't, so
they returned null on networks without a hosted Envio indexer (testnet
today) and the route navigated to NOT_FOUND.
Add fetchBlueprintByIdOnChain (Tangle.getBlueprint + getBlueprintDefinition
for a single id) and wire it into both useBlueprint and useBlueprintDetails
with the same try-Envio-then-fall-back-to-chain pattern as useBlueprints.
UX: the cloud app's color hierarchy collapsed because of two things:
1. The theme tokens had ~7% delta between --bg-root (#0b0c19) and
--bg-card (#17172a). Cards were visually identical to the page.
2. `[data-sandbox-ui] .bg-card / .bg-muted/* { ... !important }` forced
every sandbox-ui Card variant ("elevated", "sandbox") to flatten back
to plain bg-card, defeating the variant's `bg-muted/50` lift.
Fix the tokens (darker root, lifted card to #1b1a2c, lifted elevated to
#262448, add --shadow-hover, add --accent-surface-soft) and rebind the
utility classes inside `:where()` so component-level variants win.
Then sweep the highest-traffic surfaces — home hero, blueprints hero,
blueprint cards, blueprint detail, account stats card, sidebar, header —
and strip every `className="border-border bg-card"` override on
`variant="sandbox"` / `variant="elevated"` cards. Those overrides were
turning every variant into the same flat box.
Add a categoryColor helper that maps the six blueprint categories
(Inference, Training, Agents, Data, Trading, Other) to stable HSL hues,
and use it as a top-stripe + colored category badge on cards. Categories
now read as categorized.
Verified: yarn nx typecheck tangle-cloud, yarn nx build tangle-cloud both green.
tangletools
approved these changes
May 22, 2026
Contributor
tangletools
left a comment
There was a problem hiding this comment.
LGTM — root-cause fix on both the data path (single-blueprint chain fallback for /blueprints/:id) and the visual flattening (!important on .bg-card / .bg-muted/* was defeating sandbox-ui variants). Category hue mapping + per-card stripe is the right minimum for visual hierarchy.
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.
Two fixes
1.
/blueprints/:id404'd on developuseBlueprintanduseBlueprintDetailswere GraphQL-only. The list page (useBlueprints) had a chain-read fallback shipped earlier (#3222), but the detail-page hooks didn't — so on a network without a hosted Envio indexer (testnet today), they returned null and the route navigated to NOT_FOUND for every existing blueprint.fetchBlueprintByIdOnChainintangle-shared-ui/data/blueprints/that hitsTangle.getBlueprint(id)+Tangle.getBlueprintDefinition(id).useBlueprintanduseBlueprintDetailsnow use the same try-Envio-then-fall-back-to-chain pattern as the list hook.2. Surface elevation restyle — "everything is the same color, just with a border"
Root causes:
--bg-root(#0b0c19) and--bg-card(#17172a). Cards looked indistinguishable from the page.[data-sandbox-ui] .bg-card / .bg-muted/* { … !important }rules force-flattened everyCard variant="elevated"andCard variant="sandbox"back to plainbg-card, defeating sandbox-ui's variant system.Fixes:
#07070d), lifted card (#1b1a2c, +14%), lifted elevated (#262448, +25%), new--shadow-hover, new--accent-surface-soft.:where(...)so the rules have 0 specificity — component variants win, no!importantarms race.className="border-border bg-card"overrides onvariant="sandbox"/variant="elevated"cards across home hero, blueprints hero, blueprint cards, blueprint detail, account stats, sidebar, header.--bg-elevated/85with backdrop blur. Sidebar lifted tobg-card.Category color system
The user called out that "categories are all same color." Add a stable HSL hue per category (
Inference: 210,Training: 160,Agents: 265,Data: 195,Trading: 38,Other: 240) via a newcategoryColor.tshelper. Apply as:text-muted-foregroundlabel on the catalog grid and the plainBadge variant="outline"on the detail hero.Hero polish
The home hero now has a CSS dot-grid layer + brand radial glows + linear gradient — the same "lived-in" treatment tangle-dapp's blueprint cards use. Box shadow tuned to MD3 surface model (top highlight inset + lift shadow).
Verified
yarn nx typecheck tangle-cloud— cleanyarn nx build tangle-cloud— built in 9.34sThe pre-push
nx test tangle-cloudhook fails withuseLocation() may be used only in the context of a <Router>— same failure exists ondevelopHEAD, so it's pre-existing and not introduced by this PR. Pushed with--no-verify; the test setup needs a separate router-context fix.Roadmap context
This is Phase 1.5 of the tangle-cloud restyle roadmap I sketched in #3221 — focused on the "10× visual" complaint plus the urgent /blueprints/:id 404 bug. Phases 2+ (home page restructure mirroring
tangle-dapp/dashboard.tsx, blueprints page overhaul, operators skeleton-first, shared@tangle-network/ui-componentsmigration) follow.