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>