diff --git a/TECH_DEBT.md b/TECH_DEBT.md
index 63591e87..b18ff77a 100644
--- a/TECH_DEBT.md
+++ b/TECH_DEBT.md
@@ -90,7 +90,7 @@ Completed query snapshots (including result rows) are cleaned up after `STACKABL
 
 ### Client-side row accumulation has no memory bound
 
-**File:** `src/routes/(app)/trino/query-runner.svelte.ts`
+**File:** `src/lib/trino/query-runner.svelte.ts`
 
 The client accumulates all result rows in memory up to `MAX_CLIENT_ROWS` (10,000). For wide result sets this could consume significant browser memory. Consider implementing streaming/virtual scrolling for large results.
 
@@ -98,7 +98,7 @@ The client accumulates all result rows in memory up to `MAX_CLIENT_ROWS` (10,000
 
 ### Displayed results not cleared on connection change
 
-**File:** `src/routes/(app)/trino/+page.svelte`
+**File:** `src/routes/(app)/trino/query-runner.svelte.ts`, `src/routes/(app)/trino/+page.svelte`
 
 After saving a new connection, the previous query results remain visible until a new query is run. Consider calling `runner.reset()` when the connection changes.
 
@@ -122,6 +122,34 @@ Mobile viewport tests (393×851, touch-enabled) are excluded from CI runs to red
 
 ## Infrastructure
 
+### Session cookie not configured for cross-origin iframe embedding
+
+**File:** `src/lib/server/auth.ts`
+
+The better-auth session cookie currently uses `SameSite=Lax` (the browser default when no `SameSite` attribute is set). Browsers do not send `SameSite=Lax` cookies when a page is loaded inside an `<iframe>` whose top-level frame is on a different origin, so authenticated users visiting `/trino?embed=1` or `/storage?embed=1` from an external host page will be silently redirected to `/auth/login`.
+
+To fix this, configure the session cookie with `SameSite=None; Secure` in `better-auth`:
+
+```typescript
+// src/lib/server/auth.ts
+export const auth = betterAuth({
+  advanced: {
+    cookies: {
+      session_token: {
+        attributes: { sameSite: 'none', secure: true }
+      }
+    }
+  }
+  // …rest of config
+});
+```
+
+**Why this is deferred:** `SameSite=None` is only accepted by browsers when the `Secure` flag is also set, which requires HTTPS. The current dev setup uses plain HTTP, so setting this unconditionally would break local development. The correct approach is to make it conditional on a production/HTTPS flag (e.g. `process.env.NODE_ENV === 'production'` or a dedicated env var) once a staging environment with HTTPS is available.
+
+**Also required for cross-origin embedding:** The embedding host page and the Cockpit server must both be on HTTPS, and the Cockpit server's CORS / CSP must explicitly trust the embedding origin if additional API restrictions are in place.
+
+---
+
 ### No Content Security Policy headers
 
 No CSP headers are set anywhere. This leaves the app exposed to XSS in ways that a strict CSP would mitigate. Should be added in a SvelteKit hook once the app stabilises.
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 0cd63943..9e7837b4 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -69,26 +69,55 @@ const handleAuthGuard: Handle = async ({ event, resolve }) => {
  * malformed / invalid header on any route.
  */
 const handleStorageConnection: Handle = async ({ event, resolve }) => {
-  if (
-    (event.route.id?.startsWith('/(app)/storage/') ||
-      event.route.id?.startsWith('/(app)/api/storage/')) &&
-    !storageBrowserEnabled
-  ) {
+  const routeId = event.route.id ?? '';
+  const isAppStorage = routeId.startsWith('/(app)/storage/');
+  const isStorageApi = routeId.startsWith('/(app)/api/storage/');
+
+  if ((isAppStorage || isStorageApi) && !storageBrowserEnabled) {
     throw error(404, 'Storage browser is not enabled');
   }
   event.locals.storageConfig = getConnectionFromHeader(event.request);
-  if (event.locals.storageConfig === null && event.route.id?.startsWith('/(app)/api/storage/')) {
+  if (event.locals.storageConfig === null && isStorageApi) {
     throw error(401, 'No storage connection configured');
   }
   return resolve(event);
 };
 
+/**
+ * Allow pages loaded with `?embed=1` to be displayed inside <iframe> elements
+ * from any origin. The `(app)` layout uses the same query parameter to hide
+ * the app shell (sidebar/header) so a single module can be embedded on its
+ * own.
+ *
+ * By default browsers block cross-origin framing when the server sets
+ * `X-Frame-Options: SAMEORIGIN` or a restrictive `frame-ancestors` CSP.
+ * SvelteKit does not set either header by default, so this hook is mainly a
+ * defence-in-depth measure and an explicit signal that embedding is intended.
+ *
+ * For cross-origin embedding to work the session cookie must also carry
+ * `SameSite=None; Secure`.  See TECH_DEBT.md for the outstanding action item.
+ */
+const handleEmbedHeaders: Handle = async ({ event, resolve }) => {
+  const response = await resolve(event);
+  if (event.url.searchParams.get('embed') === '1') {
+    response.headers.set('X-Frame-Options', 'ALLOWALL');
+    response.headers.set(
+      'Content-Security-Policy',
+      [response.headers.get('Content-Security-Policy'), 'frame-ancestors *']
+        .filter(Boolean)
+        .join('; ')
+    );
+  }
+  return response;
+};
+
 export const handle = sequence(
   requestLogger,
   handleMetrics,
   handleParaglide,
   ...(oidcEnabled ? [handleAuth, handleAuthGuard] : []),
-  handleStorageConnection
+  handleStorageConnection,
+  handleEmbedHeaders
 );
 
 export const handleError: HandleServerError = ({ error, event, status, message }) => {
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index f538f0f6..fb923039 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { browser } from '$app/environment';
+  import { beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import * as m from '$lib/paraglide/messages.js';
   import Sidebar from '$lib/components/layout/sidebar/Sidebar.svelte';
@@ -36,31 +37,77 @@
       (page.url.pathname.startsWith('/storage') ? m.page_title_storage : m.page_title_default)
     )()
   );
+
+  // ── Embed mode ───────────────────────────────────────────────────────────
+  // Loading any page with `?embed=1` hides the app shell (sidebar + header)
+  // so the module can be embedded in an iframe of another frontend. The mode
+  // is sticky per tab via sessionStorage so it survives full-page navigations
+  // (e.g. form submissions), and the query parameter is kept in the URL for
+  // client-side navigations via `beforeNavigate`.
+  const EMBED_KEY = 'cockpit_embed';
+  const embedParam = $derived(page.url.searchParams.get('embed') === '1');
+  let embedSticky = $state(false);
+
+  $effect(() => {
+    if (!browser) return;
+    if (embedParam) {
+      try {
+        sessionStorage.setItem(EMBED_KEY, '1');
+      } catch {
+        // sessionStorage unavailable (e.g. blocked); URL param still works
+      }
+      embedSticky = true;
+    } else {
+      try {
+        embedSticky = sessionStorage.getItem(EMBED_KEY) === '1';
+      } catch {
+        embedSticky = false;
+      }
+    }
+  });
+
+  const isEmbed = $derived(embedParam || embedSticky);
+
+  // Keep `?embed=1` in the URL for client-side navigations so reloads and
+  // open-in-new-tab keep the embedded layout.
+  beforeNavigate((nav) => {
+    if (isEmbed && nav.to?.url) {
+      nav.to.url.searchParams.set('embed', '1');
+    }
+  });
 </script>
 
 <svelte:head>
   <title>{title} | {m.page_title_suffix()}</title>
 </svelte:head>
 
-<div class="bg-base-100 flex h-dvh overflow-hidden">
-  <Sidebar
-    bind:collapsed={sidebarCollapsed}
-    bind:mobileOpen
-    storageBrowserEnabled={data.storageBrowserEnabled}
-  />
-
-  <div class="flex min-w-0 flex-1 flex-col">
-    <Header
-      {title}
-      {mobileOpen}
-      user={data.user}
-      onToggleMobile={() => (mobileOpen = !mobileOpen)}
-    />
-
+{#if isEmbed}
+  <div class="bg-base-100 flex h-dvh overflow-hidden">
     <main class="bg-base-200 flex-1 overflow-auto p-6">
       {@render children()}
     </main>
   </div>
-</div>
+{:else}
+  <div class="bg-base-100 flex h-dvh overflow-hidden">
+    <Sidebar
+      bind:collapsed={sidebarCollapsed}
+      bind:mobileOpen
+      storageBrowserEnabled={data.storageBrowserEnabled}
+    />
+
+    <div class="flex min-w-0 flex-1 flex-col">
+      <Header
+        {title}
+        {mobileOpen}
+        user={data.user}
+        onToggleMobile={() => (mobileOpen = !mobileOpen)}
+      />
+
+      <main class="bg-base-200 flex-1 overflow-auto p-6">
+        {@render children()}
+      </main>
+    </div>
+  </div>
+{/if}
 
 <ToastHost />
diff --git a/static/embed-demo.html b/static/embed-demo.html
new file mode 100644
index 00000000..9cd9fb26
--- /dev/null
+++ b/static/embed-demo.html
@@ -0,0 +1,378 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Acme Corp — Data Platform</title>
+    <style>
+      /*
+        Embed demo: simulates an entirely separate host application (Acme Corp
+        Data Platform) that pulls the Trino SQL editor and the Storage browser
+        out of Stackable Cockpit and shows them as embedded panels.
+
+        HOW TO USE (local development)
+        --------------------------------
+        Access this file through the Cockpit dev server so that the session
+        cookie is on the same origin as the iframes:
+
+            http://localhost:5173/embed-demo.html
+
+        Opening the file directly via file:// or from a different origin is
+        equivalent to cross-origin embedding (the session cookie will not be
+        sent to the Cockpit server) and requires the SameSite=None; Secure
+        fix described in TECH_DEBT.md before it can work.
+
+        CROSS-ORIGIN EMBEDDING (production)
+        ------------------------------------
+        1.  Configure the Cockpit session cookie with SameSite=None; Secure
+            (see TECH_DEBT.md).
+        2.  Both this page and the Cockpit server must be on HTTPS.
+        3.  Set COCKPIT_BASE_URL below to the Cockpit server's full URL.
+
+        PROXY / REQUEST HEADERS
+        -----------------------
+        No special header forwarding is needed.  The iframes load from the
+        Cockpit origin; all API calls made by the embedded apps go directly
+        from the browser to the Cockpit server without passing through this
+        page.  For future apps that rely on proxy-auth headers (e.g. NiFi
+        using X-Remote-User), configure the reverse proxy in front of the
+        Cockpit server to inject those headers for the embedded pages.
+      */
+
+      :root {
+        --bg: #f8fafc;
+        --surface: #ffffff;
+        --border: #e2e8f0;
+        --text: #1e293b;
+        --text-muted: #64748b;
+        --accent: #0ea5e9;
+        --accent-dark: #0284c7;
+        --sidebar-w: 13rem;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #0f172a;
+          --surface: #1e293b;
+          --border: #334155;
+          --text: #f1f5f9;
+          --text-muted: #94a3b8;
+        }
+      }
+
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          'Segoe UI',
+          sans-serif;
+        background: var(--bg);
+        color: var(--text);
+        height: 100dvh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      /* ---- Topbar ---- */
+      .topbar {
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+        padding: 0 1.5rem;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+      }
+
+      .topbar-brand {
+        font-size: 0.9rem;
+        font-weight: 700;
+        color: var(--accent);
+        letter-spacing: -0.01em;
+      }
+
+      .topbar-user {
+        font-size: 0.8rem;
+        color: var(--text-muted);
+      }
+
+      /* ---- Body: sidebar + content ---- */
+      .body {
+        flex: 1;
+        display: flex;
+        min-height: 0;
+      }
+
+      /* ---- Sidebar (Acme-specific nav — nothing to do with the Cockpit) ---- */
+      .sidebar {
+        width: var(--sidebar-w);
+        background: var(--surface);
+        border-right: 1px solid var(--border);
+        display: flex;
+        flex-direction: column;
+        padding: 1rem 0.5rem;
+        gap: 0.125rem;
+        flex-shrink: 0;
+        overflow-y: auto;
+      }
+
+      .sidebar-heading {
+        font-size: 0.65rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        padding: 0.75rem 0.75rem 0.25rem;
+      }
+
+      .sidebar a {
+        display: block;
+        padding: 0.4rem 0.75rem;
+        border-radius: 0.375rem;
+        font-size: 0.825rem;
+        color: var(--text-muted);
+        text-decoration: none;
+        transition:
+          background 0.1s,
+          color 0.1s;
+      }
+
+      .sidebar a:hover {
+        background: rgba(14, 165, 233, 0.08);
+        color: var(--text);
+      }
+
+      .sidebar a.active {
+        background: rgba(14, 165, 233, 0.12);
+        color: var(--accent);
+        font-weight: 600;
+      }
+
+      /* ---- Content area ---- */
+      .content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        min-height: 0;
+      }
+
+      /* ---- Auth notice ---- */
+      .auth-notice {
+        display: none;
+        background: #fef3c7;
+        color: #92400e;
+        font-size: 0.8rem;
+        padding: 0.5rem 1rem;
+        gap: 0.4rem;
+        align-items: center;
+        border-bottom: 1px solid #fde68a;
+        flex-shrink: 0;
+      }
+
+      .auth-notice.visible {
+        display: flex;
+      }
+
+      .auth-notice a {
+        color: #b45309;
+        font-weight: 600;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .auth-notice {
+          background: #451a03;
+          color: #fde68a;
+          border-color: #78350f;
+        }
+
+        .auth-notice a {
+          color: #fbbf24;
+        }
+      }
+
+      /* ---- Panels (iframe wrappers) ---- */
+      .panel {
+        flex: 1;
+        display: none;
+        min-height: 0;
+      }
+
+      .panel.visible {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .panel iframe {
+        flex: 1;
+        border: none;
+        width: 100%;
+        min-height: 0;
+      }
+
+      /* ---- Non-iframe panels (Acme's own pages) ---- */
+      .placeholder {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--text-muted);
+        font-size: 0.875rem;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+
+      .placeholder strong {
+        color: var(--text);
+        font-size: 1rem;
+      }
+
+      @media (max-width: 600px) {
+        .sidebar {
+          display: none;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Top bar: this host application's own branding -->
+    <div class="topbar">
+      <span class="topbar-brand">Acme Corp Data Platform</span>
+      <span class="topbar-user">alice@acme.example</span>
+    </div>
+
+    <!-- Auth notice (shown when the Cockpit session is missing) -->
+    <div class="auth-notice" id="authNotice">
+      ⚠ Not signed in to Stackable Cockpit.
+      <a id="loginLink" href="#" target="_blank">Sign in</a>
+      and reload this page.
+    </div>
+
+    <div class="body">
+      <!--
+        Sidebar: entirely Acme's own navigation — no Cockpit concepts here.
+        The embedded apps (SQL Query, Object Storage) are just two items
+        among many in Acme's own menu.
+      -->
+      <nav class="sidebar" aria-label="Main navigation">
+        <span class="sidebar-heading">Overview</span>
+        <a
+          href="#"
+          onclick="
+            showPanel('overview');
+            return false;
+          "
+          class="active"
+          id="nav-overview"
+          >Overview</a
+        >
+        <a href="#" onclick="return false;">Reports</a>
+        <a href="#" onclick="return false;">Alerts</a>
+
+        <span class="sidebar-heading">Data</span>
+        <a
+          href="#"
+          onclick="
+            showPanel('trino');
+            return false;
+          "
+          id="nav-trino"
+          >SQL Query</a
+        >
+        <a
+          href="#"
+          onclick="
+            showPanel('storage');
+            return false;
+          "
+          id="nav-storage"
+          >Object Storage</a
+        >
+        <a href="#" onclick="return false;">Pipelines</a>
+
+        <span class="sidebar-heading">Admin</span>
+        <a href="#" onclick="return false;">Users</a>
+        <a href="#" onclick="return false;">Settings</a>
+      </nav>
+
+      <div class="content">
+        <!-- Overview (Acme's own content, no iframe) -->
+        <div class="panel visible" id="panel-overview">
+          <div class="placeholder">
+            <strong>Acme Corp Data Platform</strong>
+            <span
+              >Select a section from the sidebar. The <em>SQL Query</em> and
+              <em>Object Storage</em> panels are powered by Stackable Cockpit embedded via
+              <code>&lt;iframe&gt;</code>.</span
+            >
+          </div>
+        </div>
+
+        <!-- Trino SQL editor — embedded from /trino?embed=1 -->
+        <div class="panel" id="panel-trino">
+          <iframe id="iframe-trino" title="SQL Query (powered by Stackable Cockpit)"></iframe>
+        </div>
+
+        <!-- Storage browser — embedded from /storage?embed=1 -->
+        <div class="panel" id="panel-storage">
+          <iframe
+            id="iframe-storage"
+            title="Object Storage (powered by Stackable Cockpit)"
+          ></iframe>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Set to the Cockpit server URL when this page is served from a different
+      // origin.  Leave empty when served from the same origin (e.g. in local dev
+      // via http://localhost:5173/embed-demo.html).
+      //
+      //   const COCKPIT_BASE_URL = 'https://cockpit.example.com';
+      const COCKPIT_BASE_URL = '';
+
+      const iframesLoaded = {};
+
+      function showPanel(name) {
+        document.querySelectorAll('.panel').forEach((p) => {
+          p.classList.toggle('visible', p.id === 'panel-' + name);
+        });
+        document.querySelectorAll('.sidebar a[id^="nav-"]').forEach((a) => {
+          a.classList.toggle('active', a.id === 'nav-' + name);
+        });
+
+        if ((name === 'trino' || name === 'storage') && !iframesLoaded[name]) {
+          const iframe = document.getElementById('iframe-' + name);
+          const path = name === 'trino' ? '/trino?embed=1' : '/storage?embed=1';
+          iframe.src = COCKPIT_BASE_URL + path;
+          iframesLoaded[name] = true;
+
+          iframe.addEventListener('load', () => {
+            try {
+              const path = iframe.contentWindow?.location?.pathname ?? '';
+              if (path.startsWith('/auth/')) showAuthNotice();
+            } catch {
+              // Cross-origin: cannot inspect iframe location.
+              // The app may still work if SameSite=None; Secure is configured.
+            }
+          });
+        }
+      }
+
+      function showAuthNotice() {
+        document.getElementById('loginLink').href = COCKPIT_BASE_URL + '/auth/login';
+        document.getElementById('authNotice').classList.add('visible');
+      }
+    </script>
+  </body>
+</html>