From 06182363cfa7941d12c7a00f04f14e8907922d4b Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Wed, 1 Jul 2026 15:05:50 +0000
Subject: [PATCH] Portal: render placeholder instead of recursing when embedded
 in an iframe

An un-routed app path falls back to serving the portal, which would otherwise
load the whole shell inside itself endlessly. Detect self-embedding and show a
'not available yet' placeholder instead.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/App.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index b5f9f76..b3a3fda 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,32 @@ import { Dashboard } from './pages/Dashboard'
 import { AppFrame } from './pages/AppFrame'
 import { AdminUsers } from './pages/AdminUsers'
 
+// The portal is only ever the top-level frame. If it finds itself loaded inside
+// an iframe, it means an app's path fell back to the portal (that app isn't
+// deployed or routed in NPM yet) — so render a placeholder instead of recursing
+// the whole shell endlessly inside itself.
+function EmbeddedFallback() {
+  return (
+    <div style={{
+      height: '100dvh', display: 'flex', alignItems: 'center', justifyContent: 'center',
+      textAlign: 'center', padding: '2rem', background: 'var(--navy-dark)', color: 'var(--text-muted)',
+    }}>
+      <div>
+        <div style={{ fontSize: '2.5rem', marginBottom: '0.75rem' }}>🚧</div>
+        <p style={{ fontSize: '1rem', color: 'var(--text)', marginBottom: '0.35rem' }}>
+          This app isn’t available yet
+        </p>
+        <p style={{ fontSize: '0.85rem' }}>
+          It hasn’t been deployed or routed on this site.
+        </p>
+      </div>
+    </div>
+  )
+}
+
 export default function App() {
+  if (window.self !== window.top) return <EmbeddedFallback />
+
   return (
     <BrowserRouter>
       <Routes>