From 67068996b39089494b7efd085c64f44c19b3f276 Mon Sep 17 00:00:00 2001
From: Drew Stone <drew@webb.tools>
Date: Thu, 21 May 2026 18:09:05 -0600
Subject: [PATCH 1/2] fix(tangle-cloud): chain-read fallback for
 /blueprints/:id + surface elevation restyle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 apps/tangle-cloud/src/components/Header.tsx   |   2 +-
 apps/tangle-cloud/src/components/Sidebar.tsx  |   4 +-
 .../components/blueprints/categoryColor.ts    |  74 ++++++++++
 .../src/pages/blueprints/BlueprintListing.tsx |  21 +--
 .../src/pages/blueprints/[id]/page.tsx        |  38 ++++--
 .../src/pages/blueprints/page.tsx             |  14 +-
 .../src/pages/instances/AccountStatsCard.tsx  |   7 +-
 .../tangle-cloud/src/pages/instances/page.tsx |   2 +-
 apps/tangle-cloud/src/styles.css              | 129 ++++++++++--------
 .../data/blueprints/fetchBlueprintsOnChain.ts |  67 ++++++++-
 .../src/data/graphql/useBlueprints.ts         |  53 ++++++-
 11 files changed, 317 insertions(+), 94 deletions(-)
 create mode 100644 apps/tangle-cloud/src/components/blueprints/categoryColor.ts

diff --git a/apps/tangle-cloud/src/components/Header.tsx b/apps/tangle-cloud/src/components/Header.tsx
index d4628e891..2ce210c05 100644
--- a/apps/tangle-cloud/src/components/Header.tsx
+++ b/apps/tangle-cloud/src/components/Header.tsx
@@ -53,7 +53,7 @@ export default function Header({
   return (
     <header
       className={twMerge(
-        'tangle-cloud-topbar fixed top-0 right-0 left-0 z-40 flex h-14 items-center justify-between gap-4 border-b border-border bg-card px-4 font-sans text-[13px] tracking-tight lg:left-16 lg:px-8',
+        'tangle-cloud-topbar fixed top-0 right-0 left-0 z-40 flex h-14 items-center justify-between gap-4 border-b border-border bg-[var(--bg-elevated)]/85 px-4 font-sans text-[13px] tracking-tight backdrop-blur-md lg:left-16 lg:px-8',
         className,
       )}
       {...props}
diff --git a/apps/tangle-cloud/src/components/Sidebar.tsx b/apps/tangle-cloud/src/components/Sidebar.tsx
index b81de4ac4..a967e20cc 100644
--- a/apps/tangle-cloud/src/components/Sidebar.tsx
+++ b/apps/tangle-cloud/src/components/Sidebar.tsx
@@ -115,7 +115,7 @@ const Sidebar: FC<Props> = ({ isExpandedByDefault, onExpandedChange }) => {
     <>
       <aside
         className={twMerge(
-          'group/sidebar fixed bottom-0 left-0 top-0 z-50 hidden shrink-0 border-border border-r bg-background transition-[width] duration-200 lg:flex lg:flex-col',
+          'group/sidebar fixed bottom-0 left-0 top-0 z-50 hidden shrink-0 border-border border-r bg-card transition-[width] duration-200 lg:flex lg:flex-col',
           isDesktopExpanded ? 'w-64' : 'w-16',
         )}
       >
@@ -152,7 +152,7 @@ const Sidebar: FC<Props> = ({ isExpandedByDefault, onExpandedChange }) => {
 
       {isMobileOpen && (
         <div className="fixed inset-0 z-[70] bg-black/50 lg:hidden">
-          <aside className="fixed bottom-0 left-0 top-0 w-64 border-r border-border bg-background shadow-[var(--shadow-card)]">
+          <aside className="fixed bottom-0 left-0 top-0 w-64 border-r border-border bg-card shadow-[var(--shadow-card)]">
             <SidebarBrand isExpanded />
             <SidebarNav
               items={SIDEBAR_ITEMS}
diff --git a/apps/tangle-cloud/src/components/blueprints/categoryColor.ts b/apps/tangle-cloud/src/components/blueprints/categoryColor.ts
new file mode 100644
index 000000000..1fa7ecb24
--- /dev/null
+++ b/apps/tangle-cloud/src/components/blueprints/categoryColor.ts
@@ -0,0 +1,74 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * Stable HSL hue per known blueprint category. Categories rendered to users
+ * (`Inference`, `Training`, `Agents`, `Data`, `Trading`, `Other`, plus the
+ * legacy `Blueprint` fallback) get a fixed color so the catalog reads as
+ * categorized rather than monochrome. Anything not in the map hashes its
+ * label into the [0, 360) range, deterministically.
+ */
+const CATEGORY_HUE: Record<string, number> = {
+  Inference: 210,
+  'AI Inference': 210,
+  Training: 160,
+  'AI Training': 160,
+  Agents: 265,
+  Data: 195,
+  Trading: 38,
+  Other: 240,
+  Blueprint: 240,
+};
+
+export const categoryHue = (category: string | null | undefined): number => {
+  if (!category) return CATEGORY_HUE.Other;
+  if (category in CATEGORY_HUE) return CATEGORY_HUE[category];
+
+  let hash = 0;
+  for (let i = 0; i < category.length; i += 1) {
+    hash = (hash * 31 + category.charCodeAt(i)) % 360;
+  }
+  return hash;
+};
+
+export type CategoryPalette = {
+  hue: number;
+  bg: string;
+  border: string;
+  text: string;
+  stripe: string;
+  swatch: string;
+};
+
+export const categoryPalette = (
+  category: string | null | undefined,
+): CategoryPalette => {
+  const hue = categoryHue(category);
+  return {
+    hue,
+    bg: `hsl(${hue} 70% 50% / 0.14)`,
+    border: `hsl(${hue} 70% 62% / 0.34)`,
+    text: `hsl(${hue} 90% 78%)`,
+    stripe: `hsl(${hue} 70% 60% / 0.55)`,
+    swatch: `hsl(${hue} 60% 16%)`,
+  };
+};
+
+export const categoryBadgeStyle = (
+  category: string | null | undefined,
+): CSSProperties => {
+  const palette = categoryPalette(category);
+  return {
+    backgroundColor: palette.bg,
+    borderColor: palette.border,
+    color: palette.text,
+  };
+};
+
+export const categoryStripeStyle = (
+  category: string | null | undefined,
+): CSSProperties => {
+  const palette = categoryPalette(category);
+  return {
+    boxShadow: `inset 0 2px 0 ${palette.stripe}`,
+  };
+};
diff --git a/apps/tangle-cloud/src/pages/blueprints/BlueprintListing.tsx b/apps/tangle-cloud/src/pages/blueprints/BlueprintListing.tsx
index 52d5d8461..66ac24640 100644
--- a/apps/tangle-cloud/src/pages/blueprints/BlueprintListing.tsx
+++ b/apps/tangle-cloud/src/pages/blueprints/BlueprintListing.tsx
@@ -27,6 +27,10 @@ import { twMerge } from 'tailwind-merge';
 import { PagePath } from '../../types';
 import { BlueprintVisual } from '../../components/blueprints/BlueprintVisual';
 import { formatBlueprintName } from '../../components/blueprints/blueprintVisualUtils';
+import {
+  categoryBadgeStyle,
+  categoryStripeStyle,
+} from '../../components/blueprints/categoryColor';
 
 const PAGE_SIZE = 12;
 const ALL_CATEGORIES = 'All categories';
@@ -259,10 +263,7 @@ const BlueprintListing: FC<Props> = ({
 
   return (
     <div className="space-y-5">
-      <Card
-        variant="sandbox"
-        className="catalog-controls border-border bg-card"
-      >
+      <Card variant="elevated" className="catalog-controls">
         <CardContent className="space-y-4 p-4 md:p-5">
           <div className="grid gap-4 xl:grid-cols-[minmax(360px,1fr)_auto_auto] xl:items-center">
             <Input
@@ -479,9 +480,10 @@ const BlueprintCard = ({
       variant="sandbox"
       hover
       className={twMerge(
-        'blueprint-card group relative min-h-[410px] overflow-hidden border-border bg-card shadow-[var(--shadow-card)]',
+        'blueprint-card group relative min-h-[410px] overflow-hidden',
         isSelected && 'border-primary shadow-[var(--shadow-accent)]',
       )}
+      style={categoryStripeStyle(category)}
     >
       <Link
         to={blueprintHref}
@@ -493,10 +495,13 @@ const BlueprintCard = ({
         <BlueprintVisual blueprint={blueprint} category={category} compact />
 
         <div className="mt-4">
-          <p className="font-semibold text-[10px] text-muted-foreground uppercase tracking-[0.18em]">
+          <span
+            className="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold text-[10px] uppercase tracking-[0.18em]"
+            style={categoryBadgeStyle(category)}
+          >
             {category}
-          </p>
-          <h3 className="mt-1 line-clamp-1 font-display font-extrabold text-foreground text-xl tracking-tight">
+          </span>
+          <h3 className="mt-2 line-clamp-1 font-display font-extrabold text-foreground text-xl tracking-tight">
             {displayName}
           </h3>
         </div>
diff --git a/apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx b/apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx
index f8b22eb8e..b01a6f48b 100644
--- a/apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx
+++ b/apps/tangle-cloud/src/pages/blueprints/[id]/page.tsx
@@ -25,6 +25,10 @@ import { useResolvedBlueprintViewFromIndexedBlueprint } from '../../../blueprint
 import { TangleDAppPagePath } from '../../../types';
 import { BlueprintVisual } from '../../../components/blueprints/BlueprintVisual';
 import { formatBlueprintName } from '../../../components/blueprints/blueprintVisualUtils';
+import {
+  categoryBadgeStyle,
+  categoryStripeStyle,
+} from '../../../components/blueprints/categoryColor';
 
 const Page: FC = () => {
   const id = useParamWithSchema('id', z.string().min(1));
@@ -152,7 +156,8 @@ const BlueprintDetailHero = ({
     <section className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_420px]">
       <Card
         variant="sandbox"
-        className="overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
+        className="overflow-hidden"
+        style={categoryStripeStyle(category)}
       >
         <CardContent className="grid gap-6 p-5 md:grid-cols-[300px_minmax(0,1fr)] md:p-6">
           <BlueprintVisual
@@ -163,7 +168,12 @@ const BlueprintDetailHero = ({
 
           <div className="flex min-w-0 flex-col">
             <div className="flex flex-wrap gap-2">
-              <Badge variant="outline">{category}</Badge>
+              <span
+                className="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold text-[10px] uppercase tracking-wider"
+                style={categoryBadgeStyle(category)}
+              >
+                {category}
+              </span>
               <Badge variant={operatorCount > 0 ? 'success' : 'outline'} dot>
                 {operatorCount} operator{operatorCount === 1 ? '' : 's'}
               </Badge>
@@ -233,7 +243,7 @@ const BlueprintDetailHero = ({
         </CardContent>
       </Card>
 
-      <Card variant="sandbox" className="border-border bg-card">
+      <Card variant="elevated">
         <CardContent className="p-5 md:p-6">
           <div className="flex items-center justify-between gap-3 border-border border-b pb-4">
             <div>
@@ -257,7 +267,7 @@ const BlueprintDetailHero = ({
             {metadataItems.map(([label, value]) => (
               <div
                 key={label}
-                className="rounded-lg border border-border bg-muted/30 p-3"
+                className="rounded-lg border border-border bg-card p-3"
               >
                 <dt className="font-semibold text-muted-foreground text-[10px] uppercase tracking-wider">
                   {label}
@@ -269,7 +279,13 @@ const BlueprintDetailHero = ({
             ))}
           </dl>
 
-          <div className="mt-5 rounded-lg border border-border bg-muted/20 p-4">
+          <div
+            className="mt-5 rounded-lg border p-4"
+            style={{
+              backgroundColor: 'var(--accent-surface-soft)',
+              borderColor: 'var(--border-accent)',
+            }}
+          >
             <h3 className="font-display font-bold text-foreground text-base">
               Before you commit
             </h3>
@@ -288,7 +304,7 @@ const BlueprintDetailHero = ({
 };
 
 const LaunchFact = ({ label, value }: { label: string; value: string }) => (
-  <div className="rounded-lg border border-border bg-muted/25 p-3">
+  <div className="rounded-lg border border-border bg-card p-3">
     <p className="font-semibold text-muted-foreground text-[10px] uppercase tracking-wider">
       {label}
     </p>
@@ -302,11 +318,7 @@ const RegisteredOperatorsPanel = ({
   operators: BlueprintOperator[];
 }) => {
   return (
-    <Card
-      id="operators"
-      variant="sandbox"
-      className="border-border bg-card shadow-[var(--shadow-card)]"
-    >
+    <Card id="operators" variant="default">
       <CardContent className="p-6">
         <div className="flex flex-col gap-3 border-border border-b pb-5 sm:flex-row sm:items-end sm:justify-between">
           <div>
@@ -327,14 +339,14 @@ const RegisteredOperatorsPanel = ({
         </div>
 
         {operators.length === 0 ? (
-          <div className="flex min-h-40 items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 p-8 text-center">
+          <div className="mt-5 flex min-h-40 items-center justify-center rounded-lg border border-dashed border-border bg-card p-8 text-center">
             <p className="max-w-md text-muted-foreground text-sm">
               No operators are indexed for this blueprint on the selected
               network yet.
             </p>
           </div>
         ) : (
-          <div className="mt-5 divide-y divide-border overflow-hidden rounded-lg border border-border bg-muted/20">
+          <div className="mt-5 divide-y divide-border overflow-hidden rounded-lg border border-border bg-card">
             {operators.map((operator) => (
               <OperatorCard key={operator.address} operator={operator} />
             ))}
diff --git a/apps/tangle-cloud/src/pages/blueprints/page.tsx b/apps/tangle-cloud/src/pages/blueprints/page.tsx
index 95cf352bb..b40c78f06 100644
--- a/apps/tangle-cloud/src/pages/blueprints/page.tsx
+++ b/apps/tangle-cloud/src/pages/blueprints/page.tsx
@@ -170,7 +170,7 @@ const Page: FC = () => {
     <div className="space-y-6">
       <Card
         variant="sandbox"
-        className="cloud-hero-card cloud-compact-header overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
+        className="cloud-hero-card cloud-compact-header overflow-hidden"
       >
         <CardContent className="relative p-4 md:p-5">
           <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_12%_8%,rgba(99,102,241,0.22),transparent_32%),radial-gradient(circle_at_86%_12%,rgba(16,185,129,0.12),transparent_28%)]" />
@@ -206,7 +206,7 @@ const Page: FC = () => {
               </div>
             </div>
 
-            <div className="grid gap-3 rounded-lg border border-border bg-muted/15 p-3 shadow-[var(--shadow-card)] sm:grid-cols-[1fr_auto] sm:items-center xl:grid-cols-1">
+            <div className="grid gap-3 rounded-lg border border-border bg-[var(--bg-elevated)] p-3 shadow-[var(--shadow-card)] sm:grid-cols-[1fr_auto] sm:items-center xl:grid-cols-1">
               <div className="grid grid-cols-3 gap-2">
                 <HeroMetric label="Catalog" value={blueprints.size} />
                 <HeroMetric
@@ -309,7 +309,7 @@ const HeroMetric = ({
   label: string;
   value: number | string;
 }) => (
-  <div className="rounded-md border border-border bg-card/70 p-2.5">
+  <div className="rounded-md border border-border bg-[var(--bg-card)] p-2.5">
     <p className="font-medium text-muted-foreground text-[10px] uppercase tracking-wider">
       {label}
     </p>
@@ -328,7 +328,13 @@ const HeroRolePill = ({
   value: string;
   detail: string;
 }) => (
-  <div className="rounded-lg border border-border bg-muted/20 p-3">
+  <div
+    className="rounded-lg border p-3"
+    style={{
+      backgroundColor: 'var(--accent-surface-soft)',
+      borderColor: 'var(--border-accent)',
+    }}
+  >
     <p className="font-semibold text-muted-foreground text-[10px] uppercase tracking-wider">
       {label}
     </p>
diff --git a/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx b/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx
index 23dd84609..5a20fbc55 100644
--- a/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx
+++ b/apps/tangle-cloud/src/pages/instances/AccountStatsCard.tsx
@@ -114,11 +114,8 @@ export const AccountStatsCard: FC<AccountStatsCardProps> = (props) => {
   if (!accountAddress) {
     return (
       <Card
-        variant="sandbox"
-        className={twMerge(
-          'w-full border-border bg-card shadow-[var(--shadow-card)]',
-          rootProps?.className,
-        )}
+        variant="elevated"
+        className={twMerge('w-full', rootProps?.className)}
       >
         <CardContent className="flex h-full flex-col gap-5 p-5 md:p-6">
           <div className="flex min-w-0 items-start gap-4">
diff --git a/apps/tangle-cloud/src/pages/instances/page.tsx b/apps/tangle-cloud/src/pages/instances/page.tsx
index 713cfbdda..85efce1de 100644
--- a/apps/tangle-cloud/src/pages/instances/page.tsx
+++ b/apps/tangle-cloud/src/pages/instances/page.tsx
@@ -12,7 +12,7 @@ const Page = () => {
     <div className="space-y-6">
       <Card
         variant="sandbox"
-        className="cloud-hero-card cloud-compact-header overflow-hidden border-border bg-card shadow-[var(--shadow-card)]"
+        className="cloud-hero-card cloud-compact-header overflow-hidden"
       >
         <CardContent className="relative p-4 md:p-5">
           <div className="pointer-events-none absolute inset-0 opacity-70 [background:radial-gradient(circle_at_12%_8%,rgba(99,102,241,0.18),transparent_32%),radial-gradient(circle_at_86%_12%,rgba(16,185,129,0.10),transparent_28%)]" />
diff --git a/apps/tangle-cloud/src/styles.css b/apps/tangle-cloud/src/styles.css
index 2dec33c47..650869ef9 100644
--- a/apps/tangle-cloud/src/styles.css
+++ b/apps/tangle-cloud/src/styles.css
@@ -65,30 +65,40 @@ body {
 
 [data-sandbox-ui][data-sandbox-theme='tangle'],
 .tangle-cloud-shell[data-sandbox-theme='tangle'] {
+  /* Surface elevation system (4 levels): page (--bg-root, near-black) →
+     card (--bg-card, +14%) → elevated (--bg-elevated, +25%) → accent
+     (primary-tinted, only for selected/active surfaces). The previous
+     palette had ~7% delta between root and card, which is why every
+     card looked like the background. Bump the card and elevated steps
+     to perceptible deltas; darken the root to give cards room to breathe. */
   --bg-root:
     radial-gradient(
       ellipse 70% 48% at 18% 0%,
-      rgba(99, 102, 241, 0.12),
+      rgba(99, 102, 241, 0.14),
       transparent
     ),
     radial-gradient(
       ellipse 48% 36% at 82% 6%,
-      rgba(20, 184, 166, 0.08),
+      rgba(20, 184, 166, 0.09),
       transparent
     ),
-    linear-gradient(180deg, #101123 0%, #0b0c19 100%);
-  --bg-card: #17172a;
-  --bg-elevated: #202037;
-  --bg-hover: rgba(129, 140, 248, 0.12);
-  --border-subtle: rgba(116, 126, 194, 0.18);
-  --border-default: rgba(128, 138, 213, 0.29);
-  --border-hover: rgba(151, 161, 245, 0.44);
-  --border-accent: rgba(129, 140, 248, 0.3);
-  --border-accent-hover: rgba(129, 140, 248, 0.5);
+    linear-gradient(180deg, #0a0a14 0%, #07070d 100%);
+  --bg-card: #1b1a2c;
+  --bg-elevated: #262448;
+  --bg-hover: rgba(129, 140, 248, 0.16);
+  --border-subtle: rgba(116, 126, 194, 0.12);
+  --border-default: rgba(128, 138, 213, 0.24);
+  --border-hover: rgba(151, 161, 245, 0.48);
+  --border-accent: rgba(129, 140, 248, 0.36);
+  --border-accent-hover: rgba(129, 140, 248, 0.55);
+  --accent-surface-soft: rgba(99, 102, 241, 0.12);
   --btn-primary-bg: #4f46e5;
   --btn-primary-hover: #4338ca;
   --shadow-card:
-    0 12px 32px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.045);
+    0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
+  --shadow-hover:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 36px rgba(0, 0, 0, 0.35),
+    0 0 0 1px rgba(129, 140, 248, 0.18);
 }
 
 .tangle-cloud-shell[data-sandbox-theme='vault'],
@@ -150,56 +160,49 @@ body {
   color: var(--surface-danger-text) !important;
 }
 
-[data-sandbox-ui] .bg-background {
-  background-color: var(--bg-dark, hsl(var(--background))) !important;
+/* Surface utility class bindings.
+   These bind generic Tailwind/sandbox-ui utility classes to the cloud
+   token palette. Use :where() to keep selector specificity at 0 so any
+   component-level className (Card variant overrides, page-specific
+   classes) wins on its own without fighting an !important. The previous
+   version forced every utility to one shade and is the root cause of
+   "every card is the same color, just with a border" — sandbox-ui's
+   variant="elevated" / variant="sandbox" cards were being flattened to
+   plain bg-card by these rules. */
+:where([data-sandbox-ui]) .bg-background {
+  background-color: var(--bg-root, hsl(var(--background)));
 }
 
-[data-sandbox-ui] .bg-card {
-  background-color: var(--bg-card) !important;
+:where([data-sandbox-ui]) .bg-card {
+  background-color: var(--bg-card);
 }
 
-[data-sandbox-ui] .bg-popover {
-  background-color: var(--bg-card) !important;
+:where([data-sandbox-ui]) .bg-popover {
+  background-color: var(--bg-elevated);
 }
 
 [data-sandbox-ui] .text-popover-foreground {
   color: var(--text-primary) !important;
 }
 
-[data-sandbox-ui] .bg-muted {
-  background-color: hsl(var(--muted)) !important;
+:where([data-sandbox-ui]) .bg-muted {
+  background-color: var(--bg-elevated);
 }
 
-[data-sandbox-ui] .bg-muted\/30 {
-  background-color: color-mix(
-    in srgb,
-    hsl(var(--muted)) 30%,
-    transparent
-  ) !important;
+:where([data-sandbox-ui]) .bg-muted\/30 {
+  background-color: color-mix(in srgb, var(--bg-elevated) 30%, transparent);
 }
 
-[data-sandbox-ui] .bg-muted\/40 {
-  background-color: color-mix(
-    in srgb,
-    hsl(var(--muted)) 40%,
-    transparent
-  ) !important;
+:where([data-sandbox-ui]) .bg-muted\/40 {
+  background-color: color-mix(in srgb, var(--bg-elevated) 40%, transparent);
 }
 
-[data-sandbox-ui] .bg-muted\/50 {
-  background-color: color-mix(
-    in srgb,
-    hsl(var(--muted)) 50%,
-    transparent
-  ) !important;
+:where([data-sandbox-ui]) .bg-muted\/50 {
+  background-color: color-mix(in srgb, var(--bg-elevated) 50%, transparent);
 }
 
-[data-sandbox-ui] .bg-card\/70 {
-  background-color: color-mix(
-    in srgb,
-    var(--bg-card) 70%,
-    transparent
-  ) !important;
+:where([data-sandbox-ui]) .bg-card\/70 {
+  background-color: color-mix(in srgb, var(--bg-card) 70%, transparent);
 }
 
 [data-sandbox-ui] .border-border {
@@ -374,35 +377,49 @@ body {
 
 .tangle-cloud-card {
   border: 1px solid var(--border-subtle);
-  background: color-mix(in srgb, var(--bg-card) 86%, transparent);
+  background: var(--bg-card);
   box-shadow: var(--shadow-card);
 }
 
+/* Apply the display font family to section headings inside the cloud shell.
+   Body stays Geist (var(--font-sans)) — only h1/h2/h3 lift to the display
+   stack so section titles get the brand voice without making body copy
+   stiff. Excludes the existing typography setup in .tangle-cloud-page that
+   already sets per-heading sizing. */
+:where([data-sandbox-ui]) :where(h1, h2, h3) {
+  font-family: var(--font-display);
+}
+
 .cloud-hero-card {
   border-color: color-mix(
     in srgb,
     var(--brand-cool) 30%,
     var(--border-default)
   ) !important;
+  /* Hero gets the heaviest treatment: dot grid + brand radial glows +
+     elevated linear so it reads as the centerpiece of the page. The dot
+     grid is the same pattern tangle-dapp uses (PNG there, CSS here) —
+     it's what makes the surface feel "alive" instead of "flat colored
+     rectangle." */
   background:
+    radial-gradient(
+      rgba(255, 255, 255, 0.045) 1px,
+      transparent 1px
+    ) 0 0 / 22px 22px,
     radial-gradient(
       circle at 4% 12%,
-      color-mix(in srgb, var(--brand-cool) 24%, transparent),
-      transparent 30%
+      color-mix(in srgb, var(--brand-cool) 28%, transparent),
+      transparent 32%
     ),
     radial-gradient(
       circle at 90% 8%,
-      color-mix(in srgb, #14b8a6 20%, transparent),
-      transparent 26%
+      color-mix(in srgb, #14b8a6 22%, transparent),
+      transparent 28%
     ),
-    linear-gradient(
-      135deg,
-      color-mix(in srgb, var(--bg-elevated) 82%, transparent),
-      color-mix(in srgb, var(--bg-card) 94%, transparent)
-    ) !important;
+    linear-gradient(135deg, var(--bg-elevated), var(--bg-card)) !important;
   box-shadow:
-    0 18px 48px rgba(0, 0, 0, 0.24),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
+    0 18px 48px rgba(0, 0, 0, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
 }
 
 .cloud-hero-card :where([class*='bg-card/70'], .bg-card\/70) {
diff --git a/libs/tangle-shared-ui/src/data/blueprints/fetchBlueprintsOnChain.ts b/libs/tangle-shared-ui/src/data/blueprints/fetchBlueprintsOnChain.ts
index 534b5d7e3..a2d023f39 100644
--- a/libs/tangle-shared-ui/src/data/blueprints/fetchBlueprintsOnChain.ts
+++ b/libs/tangle-shared-ui/src/data/blueprints/fetchBlueprintsOnChain.ts
@@ -27,7 +27,10 @@ export const fetchBlueprintsOnChain = async (
   options?: { limit?: number; activeOnly?: boolean },
 ): Promise<Blueprint[]> => {
   const contracts = getContractsByChainId(chainId);
-  if (!contracts || contracts.tangle === '0x0000000000000000000000000000000000000000') {
+  if (
+    !contracts ||
+    contracts.tangle === '0x0000000000000000000000000000000000000000'
+  ) {
     return [];
   }
 
@@ -117,3 +120,65 @@ export const fetchBlueprintsOnChain = async (
   }
   return blueprints;
 };
+
+export const fetchBlueprintByIdOnChain = async (
+  publicClient: PublicClient,
+  chainId: number,
+  blueprintId: bigint,
+): Promise<Blueprint | null> => {
+  const contracts = getContractsByChainId(chainId);
+  if (
+    !contracts ||
+    contracts.tangle === '0x0000000000000000000000000000000000000000'
+  ) {
+    return null;
+  }
+
+  const tangleAddress = contracts.tangle as Address;
+
+  try {
+    const [blueprint, definition] = await Promise.all([
+      publicClient.readContract({
+        address: tangleAddress,
+        abi: TANGLE_ABI,
+        functionName: 'getBlueprint',
+        args: [blueprintId],
+      }) as Promise<{
+        owner: Address;
+        manager: Address;
+        createdAt: bigint;
+        operatorCount: number;
+        active: boolean;
+      }>,
+      publicClient.readContract({
+        address: tangleAddress,
+        abi: TANGLE_ABI,
+        functionName: 'getBlueprintDefinition',
+        args: [blueprintId],
+      }) as Promise<{
+        metadataUri: string;
+        metadataHash: `0x${string}`;
+      }>,
+    ]);
+
+    return {
+      id: blueprintId.toString(),
+      blueprintId,
+      owner: blueprint.owner,
+      manager: blueprint.manager,
+      metadataUri: definition.metadataUri || null,
+      metadataHash:
+        definition.metadataHash &&
+        definition.metadataHash !==
+          '0x0000000000000000000000000000000000000000000000000000000000000000'
+          ? definition.metadataHash
+          : null,
+      active: blueprint.active,
+      createdAt: BigInt(blueprint.createdAt),
+      updatedAt: BigInt(blueprint.createdAt),
+      operatorCount: BigInt(blueprint.operatorCount),
+    };
+  } catch {
+    return null;
+  }
+};
diff --git a/libs/tangle-shared-ui/src/data/graphql/useBlueprints.ts b/libs/tangle-shared-ui/src/data/graphql/useBlueprints.ts
index 096936f0a..290e4adb3 100644
--- a/libs/tangle-shared-ui/src/data/graphql/useBlueprints.ts
+++ b/libs/tangle-shared-ui/src/data/graphql/useBlueprints.ts
@@ -10,7 +10,10 @@ import {
   EnvioNetwork,
   getEnvioNetworkFromChainId,
 } from '../../utils/executeEnvioGraphQL';
-import { fetchBlueprintsOnChain } from '../blueprints/fetchBlueprintsOnChain';
+import {
+  fetchBlueprintByIdOnChain,
+  fetchBlueprintsOnChain,
+} from '../blueprints/fetchBlueprintsOnChain';
 import useNetworkStore from '../../context/useNetworkStore';
 import type { Blueprint as AppBlueprint } from '../../types/blueprint';
 import {
@@ -521,6 +524,7 @@ export const useBlueprint = (
 ) => {
   const { network, enabled = true } = options ?? {};
   const { activeChainId, resolvedNetwork } = useResolvedEnvioNetwork(network);
+  const publicClient = usePublicClient({ chainId: activeChainId });
 
   return useQuery({
     queryKey: [
@@ -533,7 +537,33 @@ export const useBlueprint = (
     queryFn: async () => {
       if (!blueprintId) return null;
 
-      const blueprint = await fetchBlueprintById(blueprintId, resolvedNetwork);
+      // Mirror the indexer → chain-read fallback strategy from `useBlueprints`.
+      // Without it, /blueprints/:id 404s on every network where the Envio
+      // indexer isn't configured (testnets today), even though the chain has
+      // the entry — list path falls back to chain-reads, but detail path
+      // returned null and the page navigated to NOT_FOUND.
+      let blueprint: Blueprint | null = null;
+      try {
+        blueprint = await fetchBlueprintById(blueprintId, resolvedNetwork);
+      } catch (err) {
+        console.warn(
+          `[useBlueprint] Envio indexer fetch failed (${resolvedNetwork}); ` +
+            'falling back to direct chain reads.',
+          err,
+        );
+      }
+      if (
+        !blueprint &&
+        publicClient &&
+        activeChainId &&
+        /^\d+$/.test(blueprintId)
+      ) {
+        blueprint = await fetchBlueprintByIdOnChain(
+          publicClient,
+          activeChainId,
+          BigInt(blueprintId),
+        );
+      }
       if (!blueprint) return null;
 
       const metadata = await fetchBlueprintMetadata({
@@ -634,6 +664,7 @@ export const useBlueprintDetails = (
 ) => {
   const { network, enabled = true } = options ?? {};
   const { activeChainId, resolvedNetwork } = useResolvedEnvioNetwork(network);
+  const publicClient = usePublicClient({ chainId: activeChainId });
 
   const { data, isLoading, error, refetch } = useQuery({
     queryKey: [
@@ -647,7 +678,23 @@ export const useBlueprintDetails = (
       if (blueprintId === undefined) return null;
 
       const idString = blueprintId.toString();
-      const blueprint = await fetchBlueprintById(idString, resolvedNetwork);
+      let blueprint: Blueprint | null = null;
+      try {
+        blueprint = await fetchBlueprintById(idString, resolvedNetwork);
+      } catch (err) {
+        console.warn(
+          `[useBlueprintDetails] Envio indexer fetch failed (${resolvedNetwork}); ` +
+            'falling back to direct chain reads.',
+          err,
+        );
+      }
+      if (!blueprint && publicClient && activeChainId) {
+        blueprint = await fetchBlueprintByIdOnChain(
+          publicClient,
+          activeChainId,
+          blueprintId,
+        );
+      }
       if (!blueprint) return null;
 
       const [metadata, operators] = await Promise.all([

From f4a31654420016446f386c30cdc99e8a0a7bcf43 Mon Sep 17 00:00:00 2001
From: Drew Stone <drew@webb.tools>
Date: Thu, 21 May 2026 18:31:02 -0600
Subject: [PATCH 2/2] fix(tangle-cloud): unlock tier-2 declarative rendering
 for all 13 Base Sepolia blueprints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After PR #3223 fixed the /blueprints/:id 404, the detail page still
rendered every non-curated blueprint at the basic hero tier instead of
the declarative tier-2 host card their metadata JSON declares.
Three independent gates were blocking the upgrade — each one alone was
sufficient to drop them to generic.

1. Wrong curated binding
   `blueprintApps/registry.ts` had `blueprintId: 1n` on the **trading**
   entry, but on Base Sepolia id 1 is **ai-agent-sandbox**, not trading.
   `/blueprints/1` redirected to /blueprints/trading and rendered the
   trading shell over a sandbox blueprint. And ids 0 and 2 (also sandbox
   registrations) had no curated binding at all.

   Replaced the single `blueprintId` field on the trading entry with a
   per-network `CURATED_BLUEPRINT_ID_TO_SLUG` map that binds 0n, 1n, 2n
   → sandbox on Base Sepolia. Trading retains slug-based access at
   /blueprints/trading and will get its id binding when registered.

2. HTTPS metadata URIs rejected outright
   `isAllowedBlueprintMetadataUri` returned false for everything but
   `ipfs://`, which marked every blueprint (all 13 use github raw HTTPS
   URIs) as `status='invalid'` before the integrity check even ran.

   Accept https:// and http:// in addition to ipfs://. The integrity
   binding is what catches tampering, not the URI scheme.
   `productionReady` still requires ipfs.

3. v0 register scripts pin `keccak256(metadataUri)`, not the canonical
   payload hash. Every blueprint's RegisterBlueprint.s.sol does
   `def.metadataHash = keccak256(bytes(def.metadataUri))`. The dapp's
   verifier compared this to the canonical JSON payload hash and got a
   mismatch → status='invalid'.

   Add a 'verified-uri' status with `attestationMode: 'uri-only'` that
   recognizes URI-keccak mode. URI-keccak proves the publisher pinned
   the URI on-chain but not the JSON content, so it unlocks the
   declarative tier-2 surface (overview cards, actions, resource views)
   while keeping iframe/externalApp embedding gated on full payload
   attestation. `productionReady` still requires the full attestation
   path + IPFS — so this only relaxes display, not the strictest trust
   indicator.

   `useBlueprints` now keeps the declarative manifest intact for
   `verified-uri`, only stripping `externalApp`. `manifest.ts` lets
   declarative tier resolve when status is either `productionReady` or
   `verified-uri`.

Net result on develop.cloud.tangle.tools today:

- /blueprints/0, /blueprints/1, /blueprints/2 → sandbox iframe (curated)
- /blueprints/3..12 (llm, modal, image-gen, training, vector-store,
  distributed-inference, voice, avatar, embedding, video-gen, openclaw)
  → declarative tier-2 host card with each blueprint's own overview
  cards / actions / resource views from its metadata JSON.

Verified: yarn nx typecheck tangle-cloud + yarn nx build tangle-cloud
both clean.
---
 .../src/blueprintApps/manifest.ts             |  8 +-
 .../src/blueprintApps/registry.ts             | 30 +++++++-
 .../src/blueprintApps/authoring.ts            | 74 ++++++++++++++++---
 .../src/blueprintApps/types.ts                | 17 +++++
 .../src/data/graphql/useBlueprints.ts         | 26 +++++--
 5 files changed, 135 insertions(+), 20 deletions(-)

diff --git a/apps/tangle-cloud/src/blueprintApps/manifest.ts b/apps/tangle-cloud/src/blueprintApps/manifest.ts
index 0691658d4..895081d7c 100644
--- a/apps/tangle-cloud/src/blueprintApps/manifest.ts
+++ b/apps/tangle-cloud/src/blueprintApps/manifest.ts
@@ -377,9 +377,15 @@ export function buildBlueprintManifestFromMetadata(
   });
   manifest.externalApp = externalAppParsed.externalApp;
 
+  // Declarative tier is unlocked at the URI-bound trust level
+  // (`verified-uri`) or stronger. The stricter `productionReady` gate
+  // (IPFS + signed attestation) is kept for `metadataVerified` below,
+  // which controls iframe/externalApp embedding — that needs payload
+  // attestation, not just URI binding.
   const allowDeclarativeTier =
     manifestRoot !== null &&
-    blueprint.metadataVerification?.productionReady === true;
+    (blueprint.metadataVerification?.productionReady === true ||
+      blueprint.metadataVerification?.status === 'verified-uri');
   const trustedExternalApp =
     manifest.externalApp?.trust === 'trusted'
       ? manifest.externalApp
diff --git a/apps/tangle-cloud/src/blueprintApps/registry.ts b/apps/tangle-cloud/src/blueprintApps/registry.ts
index 1bb2d0f22..f25cca04f 100644
--- a/apps/tangle-cloud/src/blueprintApps/registry.ts
+++ b/apps/tangle-cloud/src/blueprintApps/registry.ts
@@ -1,11 +1,31 @@
 import { resolveBlueprintAppView } from './resolver';
 import type { BlueprintAppEntry } from './types';
 
+/**
+ * Per-network blueprintId → curated-entry slug bindings.
+ *
+ * The upstream `BlueprintAppEntry` type only carries a single `blueprintId`,
+ * but in practice one curated app (e.g. the sandbox) maps to multiple
+ * on-chain IDs across networks and across retries (Base Sepolia currently
+ * has the sandbox registered at ids 0, 1, and 2). This map is the single
+ * source of truth for those bindings — `getBlueprintAppByBlueprintId`
+ * consults it first.
+ *
+ * Update this when:
+ *   - re-registering a curated app on a new network
+ *   - landing a brand new curated entry that ships with a known id
+ */
+const CURATED_BLUEPRINT_ID_TO_SLUG: ReadonlyMap<bigint, string> = new Map([
+  // Base Sepolia (chainId 84532) — see deployments/base-sepolia/blueprints.tsv
+  [0n, 'sandbox'],
+  [1n, 'sandbox'],
+  [2n, 'sandbox'],
+]);
+
 const entries = [
   {
     slug: 'trading',
     canonicalSlug: 'trading',
-    blueprintId: 1n,
     publisher: {
       label: 'Tangle Labs',
       visibility: 'first-party',
@@ -198,9 +218,11 @@ export function getBlueprintAppByCanonicalSlug(
 export function getBlueprintAppByBlueprintId(
   blueprintId: bigint,
 ): BlueprintAppEntry | null {
-  for (const entry of blueprintAppEntries) {
-    if (entry.blueprintId === blueprintId) {
-      return entry;
+  const mappedSlug = CURATED_BLUEPRINT_ID_TO_SLUG.get(blueprintId);
+  if (mappedSlug) {
+    const mapped = blueprintAppRegistry.get(mappedSlug);
+    if (mapped) {
+      return mapped;
     }
   }
 
diff --git a/libs/tangle-shared-ui/src/blueprintApps/authoring.ts b/libs/tangle-shared-ui/src/blueprintApps/authoring.ts
index 15b2026ff..b0f58553e 100644
--- a/libs/tangle-shared-ui/src/blueprintApps/authoring.ts
+++ b/libs/tangle-shared-ui/src/blueprintApps/authoring.ts
@@ -10,6 +10,7 @@ import {
 import { isLocalPreviewHost } from '../utils/localPreview';
 import type {
   BlueprintMetadataAttestation,
+  BlueprintMetadataAttestationMode,
   BlueprintMetadataVerification,
   BlueprintResourceRoute,
   BlueprintUiAction,
@@ -662,8 +663,26 @@ const isLocalBlueprintHostRuntime = (): boolean => {
 export const requiresIpfsForBlueprintMetadata = (): boolean =>
   !isLocalBlueprintHostRuntime();
 
-export const isAllowedBlueprintMetadataUri = (metadataUri: string): boolean =>
-  metadataUri.startsWith('ipfs://') || !requiresIpfsForBlueprintMetadata();
+/**
+ * Whether a metadata URI is acceptable to load at all. Previously this
+ * gated *display* on IPFS-only, which excluded every blueprint registered
+ * with a github raw URI from rendering anything richer than the bare hero.
+ *
+ * Now: accept HTTPS as well. IPFS-vs-HTTP is a property of `productionReady`,
+ * not of "should we even attempt to fetch this." The integrity check below
+ * (canonical payload hash OR URI-keccak hash) is what catches tampering.
+ */
+export const isAllowedBlueprintMetadataUri = (metadataUri: string): boolean => {
+  if (metadataUri.startsWith('ipfs://')) {
+    return true;
+  }
+  try {
+    const url = new URL(metadataUri);
+    return url.protocol === 'https:' || url.protocol === 'http:';
+  } catch {
+    return false;
+  }
+};
 
 const sortMetadataValue = (value: unknown): unknown => {
   if (Array.isArray(value)) {
@@ -757,17 +776,24 @@ const buildDefaultMetadataVerification = ({
   reason,
   signer,
   payloadHash,
+  attestationMode = 'none',
 }: {
   metadataUri?: string | null;
   status: BlueprintMetadataVerification['status'];
   reason: string;
   signer?: string;
   payloadHash?: Hex;
+  attestationMode?: BlueprintMetadataAttestationMode;
 }): BlueprintMetadataVerification => {
   const source = toMetadataSource(metadataUri);
+  // `productionReady` keeps the strictest bar: full signed attestation +
+  // IPFS hosting. URI-keccak verification gets the declarative tier
+  // rendered (so users see blueprint surfaces today) without lying about
+  // the trust level in operator-facing UIs.
   const productionReady =
     status === 'verified' &&
-    (metadataUri ? isAllowedBlueprintMetadataUri(metadataUri) : false);
+    attestationMode === 'attestation' &&
+    source === 'ipfs';
 
   return {
     status,
@@ -775,6 +801,7 @@ const buildDefaultMetadataVerification = ({
     source,
     signer,
     payloadHash,
+    attestationMode,
     reason,
   };
 };
@@ -812,7 +839,7 @@ export const verifyBlueprintMetadataIntegrity = async ({
       metadataUri,
       status: 'invalid',
       reason:
-        'Production shared hosting only accepts metadata published to ipfs:// URIs.',
+        'Metadata URI scheme not supported (expected ipfs://, https://, or http://).',
     });
   }
 
@@ -820,11 +847,22 @@ export const verifyBlueprintMetadataIntegrity = async ({
   const payloadHash = computeBlueprintMetadataPayloadHash(
     stripMetadataAttestation(rawMetadata),
   );
-
-  if (
-    metadataHash &&
-    metadataHash.toLowerCase() !== payloadHash.toLowerCase()
-  ) {
+  // URI-keccak hash: the v0 register scripts pin `keccak256(metadataUri)` on
+  // chain (not the canonical JSON payload hash). Recognizing this mode lets
+  // the catalog render tier-2 surfaces today, while the v1 hash mode
+  // (canonical payload + signed attestation) is still required for full
+  // `verified` status / `productionReady` / iframe trust.
+  const uriHash = keccak256(toHex(new TextEncoder().encode(metadataUri)));
+  const uriKeccakMatch =
+    metadataHash !== undefined &&
+    metadataHash !== null &&
+    metadataHash.toLowerCase() === uriHash.toLowerCase();
+  const payloadHashMatch =
+    metadataHash !== undefined &&
+    metadataHash !== null &&
+    metadataHash.toLowerCase() === payloadHash.toLowerCase();
+
+  if (metadataHash && !payloadHashMatch && !uriKeccakMatch) {
     return buildDefaultMetadataVerification({
       metadataUri,
       status: 'invalid',
@@ -834,6 +872,23 @@ export const verifyBlueprintMetadataIntegrity = async ({
   }
 
   if (!attestation) {
+    // No signed attestation in the JSON.
+    // If the on-chain hash is the URI-keccak (v0 register scripts), accept
+    // the JSON as URI-bound — declarative tier renders, externalApp does
+    // not. If the hash matched the canonical payload but there's no
+    // attestation, that's still URI-bound trust (publisher pinned the
+    // content snapshot but didn't sign over it for replay protection).
+    if (uriKeccakMatch || payloadHashMatch) {
+      return buildDefaultMetadataVerification({
+        metadataUri,
+        status: 'verified-uri',
+        payloadHash,
+        attestationMode: 'uri-only',
+        reason: uriKeccakMatch
+          ? 'On-chain metadataHash binds the metadata URI (v0 hash mode). Declarative surfaces enabled; iframe embedding requires a full payload attestation.'
+          : 'On-chain metadataHash matches the canonical payload but no owner attestation is present. Declarative surfaces enabled; iframe embedding requires a signed attestation.',
+      });
+    }
     return buildDefaultMetadataVerification({
       metadataUri,
       status: 'unverified',
@@ -902,6 +957,7 @@ export const verifyBlueprintMetadataIntegrity = async ({
     status: 'verified',
     signer: owner,
     payloadHash,
+    attestationMode: 'attestation',
     reason:
       'Metadata attestation verified against the onchain blueprint owner and payload hash.',
   });
diff --git a/libs/tangle-shared-ui/src/blueprintApps/types.ts b/libs/tangle-shared-ui/src/blueprintApps/types.ts
index 34514f941..0579bcfa1 100644
--- a/libs/tangle-shared-ui/src/blueprintApps/types.ts
+++ b/libs/tangle-shared-ui/src/blueprintApps/types.ts
@@ -29,15 +29,32 @@ export type BlueprintMetadataAttestation = {
 
 export type BlueprintMetadataVerificationStatus =
   | 'verified'
+  | 'verified-uri'
   | 'unverified'
   | 'invalid';
 
+/**
+ * `attestationMode` makes the trust gradient explicit:
+ *  - 'attestation': owner signed the canonical JSON payload hash. Full trust.
+ *  - 'uri-only':    on-chain `metadataHash` matches keccak256(metadataUri).
+ *                   The URI is committed, but the JSON content is fetched
+ *                   off-chain and could change at the host (github raw, etc).
+ *                   Enough to render the declarative tier-2 surface; not
+ *                   enough to unlock iframe (`externalApp`) embedding.
+ *  - 'none':        no integrity binding on-chain. Generic fallback only.
+ */
+export type BlueprintMetadataAttestationMode =
+  | 'attestation'
+  | 'uri-only'
+  | 'none';
+
 export type BlueprintMetadataVerification = {
   status: BlueprintMetadataVerificationStatus;
   productionReady: boolean;
   source: 'ipfs' | 'http' | 'missing';
   signer?: string;
   payloadHash?: `0x${string}`;
+  attestationMode?: BlueprintMetadataAttestationMode;
   reason: string;
 };
 
diff --git a/libs/tangle-shared-ui/src/data/graphql/useBlueprints.ts b/libs/tangle-shared-ui/src/data/graphql/useBlueprints.ts
index 290e4adb3..402507cac 100644
--- a/libs/tangle-shared-ui/src/data/graphql/useBlueprints.ts
+++ b/libs/tangle-shared-ui/src/data/graphql/useBlueprints.ts
@@ -219,16 +219,30 @@ const fetchBlueprintMetadata = async ({
       owner,
     });
 
+    // Trust gradient for what the dapp will render:
+    //   verified       → full manifest (declarative + externalApp iframe ok)
+    //   verified-uri   → keep declarative manifest; strip externalApp until a
+    //                    full payload attestation lands. URI-keccak proves the
+    //                    publisher pinned the URI on-chain but not the JSON
+    //                    content — iframe trust requires both.
+    //   anything else  → force generic fallback (hero only).
+    const resolveTrustedBlueprintUi = (): BlueprintUiContract | null => {
+      if (!parsed.blueprintUi) {
+        return null;
+      }
+      if (metadataVerification.status === 'verified') {
+        return parsed.blueprintUi;
+      }
+      if (metadataVerification.status === 'verified-uri') {
+        return { ...parsed.blueprintUi, externalApp: undefined };
+      }
+      return { ...parsed.blueprintUi, externalApp: undefined, tier: 'generic' };
+    };
     return {
       ...parsed,
       rawMetadata,
       metadataVerification,
-      blueprintUi:
-        metadataVerification.status === 'verified'
-          ? parsed.blueprintUi
-          : parsed.blueprintUi
-            ? { ...parsed.blueprintUi, externalApp: undefined, tier: 'generic' }
-            : null,
+      blueprintUi: resolveTrustedBlueprintUi(),
     };
   } catch (error) {
     console.error('Failed to fetch blueprint metadata:', error);