perf+design: sandbox-ui 0.15.3 + dead-code purge + lazy routes + font WOFF2 + cache headers

apps/tangle-cloud/netlify.toml

@@ -58,3 +58,29 @@
     Permissions-Policy = "camera=(), microphone=(), geolocation=(), payment=(), usb=(), bluetooth=(), accelerometer=(), gyroscope=(), magnetometer=(), midi=(), serial=()"
     X-Frame-Options = "SAMEORIGIN"
     Referrer-Policy = "strict-origin-when-cross-origin"
+
+# ─── Cache headers ──────────────────────────────────────────────────────
+#
+# Vite emits hashed filenames into /assets, so the file at any given URL
+# is content-addressed and safe to mark immutable. Repeat-visit loads
+# become near-instant because the browser doesn't even revalidate.
+[[headers]]
+  for = "/assets/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+
+# Fonts are also content-addressed when present; mark them immutable and
+# permit cross-origin use so they can be loaded from sibling subdomains.
+[[headers]]
+  for = "/fonts/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+    Access-Control-Allow-Origin = "*"
+
+# index.html must NOT be cached aggressively — it's the entry point that
+# references the hashed asset bundles, so it has to be replaced atomically
+# on every deploy.
+[[headers]]
+  for = "/index.html"
+  [headers.values]
+    Cache-Control = "public, max-age=0, must-revalidate"

apps/tangle-cloud/src/app/app.tsx

@@ -50,7 +50,7 @@ const PaymentsPoolPage = lazy(() => import('../pages/payments/pool'));
 const PaymentsCreditsPage = lazy(() => import('../pages/payments/credits'));
 const NotFoundPage = lazy(() => import('../pages/notFound'));
 
-const PageFallback = () => (
+const RouteFallback = () => (
   <div className="mt-4 space-y-4">
     <Skeleton className="h-8 w-48 rounded-md" />
     <Skeleton className="h-4 w-96 max-w-full rounded-md" />
@@ -61,7 +61,7 @@ const PageFallback = () => (
 // Wrap lazy page in layout + Suspense so layout (with Header) stays visible during load
 const withLayout = (LayoutCmp: FC<{ children: ReactNode }>, Page: FC) => (
   <LayoutCmp>
-    <Suspense fallback={<PageFallback />}>
+    <Suspense fallback={<RouteFallback />}>
       <Page />
     </Suspense>
   </LayoutCmp>
@@ -87,15 +87,6 @@ const App: FC = () => {
             element={withLayout(InstancesLayout, ServiceDetailPage)}
           />
 
-          <Route
-            path={PagePath.SERVICE_DETAILS}
-            element={
-              <InstancesLayout>
-                <ServiceDetailPage />
-              </InstancesLayout>
-            }
-          />
-
           <Route path={PagePath.BLUEPRINTS}>
             <Route
               path={PagePath.BLUEPRINTS}
@@ -112,24 +103,6 @@ const App: FC = () => {
               element={withLayout(BlueprintsLayout, ManageBlueprintsPage)}
             />
 
-            <Route
-              path={PagePath.BLUEPRINTS_CREATE}
-              element={
-                <BlueprintsLayout>
-                  <CreateBlueprintPage />
-                </BlueprintsLayout>
-              }
-            />
-
-            <Route
-              path={PagePath.BLUEPRINTS_MANAGE}
-              element={
-                <BlueprintsLayout>
-                  <ManageBlueprintsPage />
-                </BlueprintsLayout>
-              }
-            />
-
             <Route
               path={PagePath.BLUEPRINTS_DETAILS}
               element={withLayout(BlueprintsLayout, BlueprintDetailsPage)}
@@ -209,7 +182,7 @@ const App: FC = () => {
           <Route
             path="*"
             element={
-              <Suspense fallback={<PageFallback />}>
+              <Suspense fallback={<RouteFallback />}>
                 <NotFoundPage />
               </Suspense>
             }

apps/tangle-cloud/src/blueprintApps/components/IframeAppApprovalModal.tsx

@@ -163,7 +163,7 @@ const IframeAppApprovalModal: FC<Props> = ({
   return (
     <Dialog
       open={pending !== null}
-      onOpenChange={(open) => {
+      onOpenChange={(open: boolean) => {
         if (!open && !submitting) handleReject();
       }}
     >

apps/tangle-cloud/src/blueprintApps/modules/sandbox/SandboxBlueprintServicePage.tsx

@@ -16,6 +16,7 @@ import {
   Button,
   Card,
   CardContent,
+  EmptyState,
 } from '@tangle-network/sandbox-ui/primitives';
 import { useAccount } from 'wagmi';
 import type { JobCall } from '@tangle-network/tangle-shared-ui/data/graphql';
@@ -192,11 +193,10 @@ const SandboxBlueprintServicePage: FC<Props> = ({ entry, serviceId }) => {
                     </div>
                   ))
                 ) : (
-                  <div className="rounded-lg border border-dashed border-border bg-muted/30 p-5">
-                    <p className="text-muted-foreground text-sm">
-                      No job activity indexed for this service yet.
-                    </p>
-                  </div>
+                  <EmptyState
+                    title="No job activity yet"
+                    description="No jobs have been indexed for this service yet."
+                  />
                 )}
               </div>