From 20a3973fccf63a61a10a2cf8c755d6d9090535e1 Mon Sep 17 00:00:00 2001
From: F3l1x1vo <fli@ordix.de>
Date: Thu, 30 Jul 2026 08:58:28 +0200
Subject: [PATCH 1/4] add iframe modularization to apps

---
 TECH_DEBT.md                                  |  34 +-
 src/hooks.server.ts                           |  41 +-
 .../trino/query-runner.svelte.ts              |   0
 src/{routes/(app) => lib}/trino/validation.ts |   0
 src/routes/(app)/api/trino/query/+server.ts   |   2 +-
 src/routes/(app)/trino/+page.server.ts        |   2 +-
 src/routes/(app)/trino/+page.svelte           |   4 +-
 src/routes/embed/+layout.svelte               |  26 +
 src/routes/embed/storage/+error.svelte        |  66 ++
 src/routes/embed/storage/+layout.server.ts    |  15 +
 src/routes/embed/storage/+layout.svelte       |  39 +
 src/routes/embed/storage/+layout.ts           |  44 +
 src/routes/embed/storage/+page.server.ts      |  65 ++
 src/routes/embed/storage/+page.svelte         |  37 +
 .../[bucket]/[...prefix]/+page.server.ts      |   7 +
 .../storage/[bucket]/[...prefix]/+page.svelte |  84 ++
 .../storage/[bucket]/[...prefix]/+page.ts     |  50 +
 .../embed/storage/connections/+page.server.ts |   8 +
 .../embed/storage/connections/+page.svelte    | 195 ++++
 .../storage/connections/[id]/+layout.svelte   |  22 +
 .../connections/[id]/edit/+page.server.ts     |  64 ++
 .../connections/[id]/edit/+page.svelte        | 366 +++++++
 src/routes/embed/trino/+page.server.ts        |  55 ++
 src/routes/embed/trino/+page.svelte           | 910 ++++++++++++++++++
 static/embed-demo.html                        | 473 +++++++++
 25 files changed, 2595 insertions(+), 14 deletions(-)
 rename src/{routes/(app) => lib}/trino/query-runner.svelte.ts (100%)
 rename src/{routes/(app) => lib}/trino/validation.ts (100%)
 create mode 100644 src/routes/embed/+layout.svelte
 create mode 100644 src/routes/embed/storage/+error.svelte
 create mode 100644 src/routes/embed/storage/+layout.server.ts
 create mode 100644 src/routes/embed/storage/+layout.svelte
 create mode 100644 src/routes/embed/storage/+layout.ts
 create mode 100644 src/routes/embed/storage/+page.server.ts
 create mode 100644 src/routes/embed/storage/+page.svelte
 create mode 100644 src/routes/embed/storage/[bucket]/[...prefix]/+page.server.ts
 create mode 100644 src/routes/embed/storage/[bucket]/[...prefix]/+page.svelte
 create mode 100644 src/routes/embed/storage/[bucket]/[...prefix]/+page.ts
 create mode 100644 src/routes/embed/storage/connections/+page.server.ts
 create mode 100644 src/routes/embed/storage/connections/+page.svelte
 create mode 100644 src/routes/embed/storage/connections/[id]/+layout.svelte
 create mode 100644 src/routes/embed/storage/connections/[id]/edit/+page.server.ts
 create mode 100644 src/routes/embed/storage/connections/[id]/edit/+page.svelte
 create mode 100644 src/routes/embed/trino/+page.server.ts
 create mode 100644 src/routes/embed/trino/+page.svelte
 create mode 100644 static/embed-demo.html

diff --git a/TECH_DEBT.md b/TECH_DEBT.md
index 63591e87..991b352c 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/lib/trino/query-runner.svelte.ts`, `src/routes/(app)/trino/+page.svelte`, `src/routes/embed/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.
 
@@ -106,7 +106,7 @@ After saving a new connection, the previous query results remain visible until a
 
 ### No validation that the connection target is a Trino instance
 
-**File:** `src/routes/(app)/trino/+page.server.ts`
+**File:** `src/routes/(app)/trino/+page.server.ts`, `src/routes/embed/trino/+page.server.ts`
 
 The query action sends whatever SQL the user provides to the configured connection URL without first verifying that the endpoint is actually a Trino instance. A user could point the URL at any HTTP server, and the app would blindly POST to it. We should validate new connections (e.g. by calling Trino's `/v1/info` endpoint) and reject URLs that do not respond as a Trino server.
 
@@ -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 `/embed/trino` or `/embed/storage` 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..a1f6c668 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -69,26 +69,53 @@ 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 isEmbedStorage = routeId.startsWith('/embed/storage/');
+  const isStorageApi = routeId.startsWith('/(app)/api/storage/');
+
+  if ((isAppStorage || isEmbedStorage || 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 embed routes to be loaded inside <iframe> elements from any origin.
+ *
+ * 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 intentional.
+ *
+ * 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.pathname.startsWith('/embed/')) {
+    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)/trino/query-runner.svelte.ts b/src/lib/trino/query-runner.svelte.ts
similarity index 100%
rename from src/routes/(app)/trino/query-runner.svelte.ts
rename to src/lib/trino/query-runner.svelte.ts
diff --git a/src/routes/(app)/trino/validation.ts b/src/lib/trino/validation.ts
similarity index 100%
rename from src/routes/(app)/trino/validation.ts
rename to src/lib/trino/validation.ts
diff --git a/src/routes/(app)/api/trino/query/+server.ts b/src/routes/(app)/api/trino/query/+server.ts
index e726f836..a75b0ee3 100644
--- a/src/routes/(app)/api/trino/query/+server.ts
+++ b/src/routes/(app)/api/trino/query/+server.ts
@@ -8,7 +8,7 @@ import {
   removeTabQuery
 } from '$lib/server/trino/queries.js';
 import { resolveTrinoClient } from '$lib/server/trino/client.js';
-import { StatementRequestSchema, TabIdSchema } from '../../../trino/validation.js';
+import { StatementRequestSchema, TabIdSchema } from '$lib/trino/validation.js';
 import type { RequestHandler } from './$types';
 
 export const POST: RequestHandler = async ({ request, locals }) => {
diff --git a/src/routes/(app)/trino/+page.server.ts b/src/routes/(app)/trino/+page.server.ts
index 38dcb714..fd62b457 100644
--- a/src/routes/(app)/trino/+page.server.ts
+++ b/src/routes/(app)/trino/+page.server.ts
@@ -6,7 +6,7 @@ import { getAllQuerySummaries, cancelQuery } from '$lib/server/trino/queries.js'
 import { trinoConfigured } from '$lib/server/trino/client.js';
 import { completionEnabled } from '$lib/server/feature-flags.js';
 import { createUserTrinoClient, getUserTrinoClient } from '$lib/server/trino/user-clients.js';
-import { ConnectionSchema, type ConnectionMessage } from './validation.js';
+import { ConnectionSchema, type ConnectionMessage } from '$lib/trino/validation.js';
 import type { Actions, PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals }) => {
diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index 97db2496..e445bba8 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -7,10 +7,10 @@
   import CatalogBrowser from '$lib/components/catalog/CatalogBrowser.svelte';
   import Modal from '$lib/components/Modal.svelte';
   import { superForm } from 'sveltekit-superforms';
-  import { ConnectionSchema, type ConnectionMessage } from './validation.js';
+  import { ConnectionSchema, type ConnectionMessage } from '$lib/trino/validation.js';
   import TabBar from '$lib/components/TabBar.svelte';
   import { tabStore, MAX_SQL_LENGTH } from '$lib/stores/tab-store.svelte.js';
-  import { getOrCreateQueryRunner, destroyQueryRunner } from './query-runner.svelte.js';
+  import { getOrCreateQueryRunner, destroyQueryRunner } from '$lib/trino/query-runner.svelte.js';
   import { isTerminal } from '$lib/types/query';
   import {
     splitStatements,
diff --git a/src/routes/embed/+layout.svelte b/src/routes/embed/+layout.svelte
new file mode 100644
index 00000000..11eb3ac8
--- /dev/null
+++ b/src/routes/embed/+layout.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import ToastHost from '$lib/components/ToastHost.svelte';
+
+  let { children } = $props();
+</script>
+
+<!--
+  Embed layout: a full-viewport shell with no sidebar or header.
+  All routes under /embed/* use this layout so they can be loaded inside
+  an <iframe> by any host frontend.
+
+  Cross-origin embedding notes:
+  - The session cookie must be SameSite=None; Secure when the embedding page
+    is on a different origin.  Configure this in src/lib/server/auth.ts
+    advanced.cookies before deploying to production.
+  - The embedding page and this server must be on HTTPS for SameSite=None to
+    work (browsers reject SameSite=None without Secure).
+  - See TECH_DEBT.md for the outstanding work item.
+-->
+<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>
+
+<ToastHost />
diff --git a/src/routes/embed/storage/+error.svelte b/src/routes/embed/storage/+error.svelte
new file mode 100644
index 00000000..c3fdbcfd
--- /dev/null
+++ b/src/routes/embed/storage/+error.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { resolve } from '$app/paths';
+  import IconWarning from 'virtual:icons/material-symbols/warning';
+  import * as m from '$lib/paraglide/messages.js';
+
+  // page.params.bucket may be absent when a client-side universal load throws an
+  // error (the error boundary sits at the parent /embed/storage level, and SvelteKit
+  // may not populate child-route params on the page store in that case).
+  // Fall back to parsing the bucket segment directly from the URL path.
+  const bucket = $derived(
+    page.params.bucket ||
+      decodeURIComponent(page.url?.pathname?.split('/').filter(Boolean)[2] ?? '')
+  );
+
+  function bucketErrorMessage(status: number, name: string): string | null {
+    if (!name) return null;
+    if (status === 403) return m.storage_error_access_denied({ bucket: name });
+    if (status === 404) return m.storage_error_not_found({ bucket: name });
+    if (status === 502) return m.storage_error_storage_error({ bucket: name });
+    return null;
+  }
+
+  const errorMessage = $derived(bucketErrorMessage(page.status, bucket));
+</script>
+
+<div
+  class="
+    flex flex-1 flex-col items-center justify-center gap-6 p-8 text-center
+  "
+>
+  <div
+    class="
+      bg-error/10 text-error flex size-20 items-center justify-center
+      rounded-full
+    "
+    aria-hidden="true"
+  >
+    <IconWarning class="size-10" aria-hidden="true" />
+  </div>
+
+  <div>
+    <p
+      class="
+        text-base-content/50 mb-1 text-sm font-medium tracking-widest uppercase
+      "
+    >
+      {m.storage_error_title()}
+    </p>
+    <h1 class="text-base-content text-3xl font-bold">
+      {page.status}
+    </h1>
+    <p class="text-base-content/70 mt-2 max-w-sm text-sm">
+      {errorMessage ?? page.error?.message ?? ''}
+    </p>
+  </div>
+
+  <div class="flex flex-wrap items-center justify-center gap-3">
+    <a href={resolve('/embed/storage')} class="btn btn-sm btn-primary">
+      {m.storage_error_back_to_storage()}
+    </a>
+    <button type="button" class="btn btn-ghost btn-sm" onclick={() => history.back()}>
+      {m.storage_error_go_back()}
+    </button>
+  </div>
+</div>
diff --git a/src/routes/embed/storage/+layout.server.ts b/src/routes/embed/storage/+layout.server.ts
new file mode 100644
index 00000000..5df88252
--- /dev/null
+++ b/src/routes/embed/storage/+layout.server.ts
@@ -0,0 +1,15 @@
+import type { LayoutServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { storageBrowserEnabled } from '$lib/server/feature-flags.js';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+  if (!storageBrowserEnabled) {
+    throw error(404, 'Not found');
+  }
+
+  locals.logger.debug('loading storage layout (embed)');
+
+  // Connected state and bucket list are determined client-side from localStorage
+  // and populated by the universal +layout.ts load after hydration.
+  return { connected: false, buckets: [] as string[], connectionType: null };
+};
diff --git a/src/routes/embed/storage/+layout.svelte b/src/routes/embed/storage/+layout.svelte
new file mode 100644
index 00000000..1f8e4681
--- /dev/null
+++ b/src/routes/embed/storage/+layout.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { page } from '$app/state';
+  import BucketList from '$lib/components/storage/sidebar/BucketList.svelte';
+  import { StorageState } from '$lib/storage/state.svelte.js';
+  import { setStorageState } from '$lib/storage/context.js';
+
+  let { children, data } = $props();
+
+  const storage = untrack(
+    () =>
+      new StorageState({
+        connected: data.connected,
+        buckets: data.buckets,
+        connectionId: data.connectionId
+      })
+  );
+  setStorageState(storage);
+
+  // Keep layout-level data in sync when SvelteKit re-runs the load function
+  $effect(() => {
+    storage.connected = data.connected;
+    storage.buckets = data.buckets;
+  });
+
+  // Connections management pages have their own full-page layout — no sidebar.
+  const isConnectionsRoute = $derived(page.url.pathname.startsWith('/embed/storage/connections'));
+</script>
+
+{#if data.connected && !isConnectionsRoute}
+  <div class="flex h-full min-h-0 gap-4">
+    <BucketList />
+    <div class="flex min-w-0 flex-1 flex-col">
+      {@render children()}
+    </div>
+  </div>
+{:else}
+  {@render children()}
+{/if}
diff --git a/src/routes/embed/storage/+layout.ts b/src/routes/embed/storage/+layout.ts
new file mode 100644
index 00000000..2f159430
--- /dev/null
+++ b/src/routes/embed/storage/+layout.ts
@@ -0,0 +1,44 @@
+import { browser } from '$app/environment';
+import { loadConnectionLocally, getConnectionHeader } from '$lib/storage/connection-storage.js';
+import type { LayoutLoad } from './$types';
+
+const DISCONNECTED = {
+  connected: false,
+  buckets: [] as string[],
+  connectionType: null
+};
+
+/**
+ * Client-side load: reads the connection from localStorage and fetches the bucket
+ * list from the server. During SSR this returns the disconnected default — the
+ * layout re-runs on the client after hydration to populate the real state.
+ */
+export const load: LayoutLoad = async ({ fetch, url }) => {
+  if (!browser) return DISCONNECTED;
+
+  // When the user has just explicitly disconnected, skip the auto-reconnect.
+  if (url.searchParams.has('disconnected')) return DISCONNECTED;
+
+  const connection = loadConnectionLocally();
+  if (!connection) return DISCONNECTED;
+
+  const header = getConnectionHeader(connection);
+
+  try {
+    const res = await fetch('/api/storage/buckets', {
+      headers: { 'x-storage-connection': header }
+    });
+
+    if (!res.ok) return DISCONNECTED;
+
+    const buckets = (await res.json()) as string[];
+    return {
+      connected: true,
+      buckets,
+      connectionType: connection.type,
+      connectionId: connection.id
+    };
+  } catch {
+    return DISCONNECTED;
+  }
+};
diff --git a/src/routes/embed/storage/+page.server.ts b/src/routes/embed/storage/+page.server.ts
new file mode 100644
index 00000000..49c9c449
--- /dev/null
+++ b/src/routes/embed/storage/+page.server.ts
@@ -0,0 +1,65 @@
+import { fail, redirect } from '@sveltejs/kit';
+import { superValidate, message } from 'sveltekit-superforms';
+import { zod4 as zod } from 'sveltekit-superforms/adapters';
+import type { Actions, PageServerLoad } from './$types';
+import { StorageConnectionSchema } from '$lib/storage/schemas.js';
+import { listBuckets } from '$lib/server/storage/service.js';
+import type { S3ConnectionConfig } from '$lib/server/storage/types.js';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const connectionForm = await superValidate(
+    { tls: { verification: 'Full' } },
+    zod(StorageConnectionSchema),
+    { errors: false }
+  );
+  locals.logger.debug('loading storage page (embed)');
+  return { connectionForm };
+};
+
+export const actions: Actions = {
+  connect: async ({ request, locals }) => {
+    const log = locals.logger;
+    const form = await superValidate(request, zod(StorageConnectionSchema));
+
+    if (!form.valid) {
+      log.debug({ errors: form.errors }, 'storage connection form validation failed');
+      return fail(400, { form });
+    }
+
+    const { type, host, port, tls, accessStyle, region, credentials } = form.data;
+
+    if (type !== 's3') {
+      return message(form, 'HDFS connections are not yet supported', { status: 400 });
+    }
+
+    const resolvedCredentials =
+      credentials.accessKey && credentials.secretKey ? credentials : undefined;
+
+    const config: S3ConnectionConfig = {
+      type: 's3',
+      host,
+      port,
+      tls,
+      accessStyle,
+      region,
+      credentials: resolvedCredentials
+    };
+
+    try {
+      await listBuckets(config);
+      log.info({ storage_type: type }, 'user storage connection verified');
+    } catch (err) {
+      log.warn({ err }, 'storage connection test failed');
+      return message(form, 'Could not connect — check the endpoint and credentials.', {
+        status: 400
+      });
+    }
+
+    throw redirect(303, '/embed/storage');
+  },
+
+  disconnect: async ({ locals }) => {
+    locals.logger.info('user storage connection cleared');
+    throw redirect(303, '/embed/storage?disconnected=1');
+  }
+};
diff --git a/src/routes/embed/storage/+page.svelte b/src/routes/embed/storage/+page.svelte
new file mode 100644
index 00000000..47b44f51
--- /dev/null
+++ b/src/routes/embed/storage/+page.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { navigating } from '$app/state';
+  import * as m from '$lib/paraglide/messages.js';
+  import { getStorageState } from '$lib/storage/context.js';
+  import BucketGrid from '$lib/components/storage/landing/BucketGrid.svelte';
+  import StorageConnectForm from '$lib/components/storage/landing/StorageConnectForm.svelte';
+  import RecentItems from '$lib/components/storage/landing/RecentItems.svelte';
+
+  let { data } = $props();
+  const storage = getStorageState();
+
+  let mounted = $state(false);
+  onMount(() => {
+    mounted = true;
+  });
+</script>
+
+{#if data.connected}
+  <div class="relative flex h-full min-h-0 flex-col overflow-hidden p-2">
+    {#if navigating?.to?.url.pathname.startsWith('/embed/storage/')}
+      <div
+        class="bg-base-100/70 absolute inset-0 z-10 flex items-center justify-center rounded-xl"
+        aria-live="polite"
+        aria-label={m.storage_loading()}
+      >
+        <span class="loading loading-md loading-spinner text-primary" aria-hidden="true"></span>
+      </div>
+    {/if}
+    <h1 class="mb-1 text-xl font-semibold">{m.storage_buckets_label()}</h1>
+    <p class="text-base-content/60 mb-6 text-sm">{m.storage_buckets_subtitle()}</p>
+    <BucketGrid buckets={storage.buckets} />
+    <RecentItems />
+  </div>
+{:else if mounted}
+  <StorageConnectForm connectionForm={data.connectionForm} />
+{/if}
diff --git a/src/routes/embed/storage/[bucket]/[...prefix]/+page.server.ts b/src/routes/embed/storage/[bucket]/[...prefix]/+page.server.ts
new file mode 100644
index 00000000..32a557c6
--- /dev/null
+++ b/src/routes/embed/storage/[bucket]/[...prefix]/+page.server.ts
@@ -0,0 +1,7 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+  const prefix = params.prefix ? params.prefix + '/' : '';
+  const bucket = params.bucket;
+  return { bucket, prefix };
+};
diff --git a/src/routes/embed/storage/[bucket]/[...prefix]/+page.svelte b/src/routes/embed/storage/[bucket]/[...prefix]/+page.svelte
new file mode 100644
index 00000000..e7781ca1
--- /dev/null
+++ b/src/routes/embed/storage/[bucket]/[...prefix]/+page.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import { getStorageState } from '$lib/storage/context.js';
+  import FileExplorer from '$lib/components/storage/explorer/FileExplorer.svelte';
+  import IconWarning from 'virtual:icons/material-symbols/warning';
+  import * as m from '$lib/paraglide/messages.js';
+
+  let { data } = $props();
+  const storage = getStorageState();
+
+  // Inject navigation handler — page owns URL construction
+  storage.setNavigationHandler((prefix, continuationToken, pageSize) => {
+    const encodedPrefix = prefix
+      ? prefix.replace(/\/$/, '').split('/').map(encodeURIComponent).join('/')
+      : '';
+
+    const basePath = resolve('/embed/storage/[bucket]/[...prefix]', {
+      bucket: encodeURIComponent(data.bucket),
+      prefix: encodedPrefix
+    });
+
+    const url = new URL(basePath, location.origin);
+    if (continuationToken) url.searchParams.set('continuationToken', String(continuationToken));
+    if (pageSize) url.searchParams.set('pageSize', String(pageSize));
+
+    // eslint-disable-next-line svelte/no-navigation-without-resolve -- base path is built with resolve(); URL object is needed to append query params
+    goto(url, { replaceState: false });
+  });
+
+  // Sync server data into state whenever SvelteKit load runs
+  $effect(() => {
+    storage.syncFromServer(data.bucket, data.prefix, data.objects);
+  });
+</script>
+
+{#if data.accessDenied}
+  <!--
+    403 is rendered inline rather than via +error.svelte because throwing from a
+    universal load during initial hydration (when data.connected=true causes
+    BucketList to mount) can escape the storage error boundary and fall through
+    to the root fallback. Rendering inline keeps the sidebar visible.
+  -->
+  <div
+    class="
+      flex flex-1 flex-col items-center justify-center gap-6 p-8 text-center
+    "
+  >
+    <div
+      class="
+        bg-error/10 text-error flex size-20 items-center justify-center
+        rounded-full
+      "
+      aria-hidden="true"
+    >
+      <IconWarning class="size-10" aria-hidden="true" />
+    </div>
+
+    <div>
+      <p
+        class="
+          text-base-content/50 mb-1 text-sm font-medium tracking-widest uppercase
+        "
+      >
+        {m.storage_error_title()}
+      </p>
+      <h1 class="text-base-content text-3xl font-bold">403</h1>
+      <p class="text-base-content/70 mt-2 max-w-sm text-sm">
+        {m.storage_error_access_denied({ bucket: data.bucket })}
+      </p>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-center gap-3">
+      <a href={resolve('/embed/storage')} class="btn btn-sm btn-primary">
+        {m.storage_error_back_to_storage()}
+      </a>
+      <button type="button" class="btn btn-ghost btn-sm" onclick={() => history.back()}>
+        {m.storage_error_go_back()}
+      </button>
+    </div>
+  </div>
+{:else}
+  <FileExplorer />
+{/if}
diff --git a/src/routes/embed/storage/[bucket]/[...prefix]/+page.ts b/src/routes/embed/storage/[bucket]/[...prefix]/+page.ts
new file mode 100644
index 00000000..3eb2b99f
--- /dev/null
+++ b/src/routes/embed/storage/[bucket]/[...prefix]/+page.ts
@@ -0,0 +1,50 @@
+import { browser } from '$app/environment';
+import { error, redirect } from '@sveltejs/kit';
+import { loadConnectionLocally, getConnectionHeader } from '$lib/storage/connection-storage.js';
+import type { PageLoad } from './$types';
+import type { StoragePage } from '$lib/storage/types.js';
+
+const EMPTY_PAGE: StoragePage = {
+  objects: [],
+  hasNextPage: false,
+  currentPage: 1,
+  pageSize: 25
+};
+
+/**
+ * Client-side load: fetches the object list from the server using the connection
+ * config from localStorage. Redirects to /embed/storage if no connection is available.
+ * During SSR this returns an empty page — the load re-runs on the client.
+ */
+export const load: PageLoad = async ({ fetch, url, data }) => {
+  // Always pass server data through so PageData includes bucket/prefix.
+  const { bucket, prefix } = data;
+
+  if (!browser) return { bucket, prefix, objects: EMPTY_PAGE };
+
+  const connection = loadConnectionLocally();
+  if (!connection) throw redirect(303, '/embed/storage');
+
+  const continuationToken = url.searchParams.get('continuationToken');
+  const pageSizeParam = url.searchParams.get('pageSize');
+
+  const query = new URLSearchParams({ bucket, prefix: prefix ?? '' });
+  if (continuationToken) query.set('continuationToken', continuationToken);
+  if (pageSizeParam) query.set('pageSize', pageSizeParam);
+
+  const res = await fetch(`/api/storage/objects?${query}`, {
+    headers: { 'x-storage-connection': getConnectionHeader(connection) }
+  });
+
+  if (!res.ok) {
+    if (res.status === 401) throw redirect(303, '/embed/storage');
+    // For 403 we return an accessDenied flag rather than throwing error().
+    if (res.status === 403)
+      return { bucket, prefix, objects: EMPTY_PAGE, accessDenied: true as const };
+    const body = (await res.json().catch(() => ({}))) as { message?: string };
+    throw error(res.status, body.message ?? 'Failed to load objects');
+  }
+
+  const objects = (await res.json()) as StoragePage;
+  return { bucket, prefix, objects };
+};
diff --git a/src/routes/embed/storage/connections/+page.server.ts b/src/routes/embed/storage/connections/+page.server.ts
new file mode 100644
index 00000000..cf837762
--- /dev/null
+++ b/src/routes/embed/storage/connections/+page.server.ts
@@ -0,0 +1,8 @@
+import type { PageServerLoad } from './$types';
+
+// The connections list is managed entirely in localStorage on the client.
+// The server only provides an empty shell so the route is authenticated.
+export const load: PageServerLoad = async ({ locals }) => {
+  locals.logger.debug('loading storage connections management page');
+  return {};
+};
diff --git a/src/routes/embed/storage/connections/+page.svelte b/src/routes/embed/storage/connections/+page.svelte
new file mode 100644
index 00000000..0db2fb7d
--- /dev/null
+++ b/src/routes/embed/storage/connections/+page.svelte
@@ -0,0 +1,195 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { resolve } from '$app/paths';
+  import IconStorage from 'virtual:icons/material-symbols/storage';
+  import IconEdit from 'virtual:icons/material-symbols/edit';
+  import IconDelete from 'virtual:icons/material-symbols/delete';
+  import IconMoreHoriz from 'virtual:icons/material-symbols/more-horiz';
+  import IconArrowBack from 'virtual:icons/material-symbols/arrow-back';
+  import * as m from '$lib/paraglide/messages.js';
+  import {
+    loadAllConnectionsLocally,
+    removeConnectionById,
+    type SavedConnection
+  } from '$lib/storage/connection-storage.js';
+  import DeleteConnectionModal from '$lib/components/storage/DeleteConnectionModal.svelte';
+
+  let connections = $state<SavedConnection[]>([]);
+  let loaded = $state(false);
+  let deleteCandidate = $state<SavedConnection | null>(null);
+  let deleteModalOpen = $state(false);
+
+  // Context menu
+  let menuConn: SavedConnection | null = $state(null);
+  let menuEl: HTMLUListElement | null = $state(null);
+  let menuRawPos = $state({ left: 0, top: 0 });
+
+  const menuPos = $derived.by(() => {
+    if (!menuConn) return { left: 0, top: 0 };
+    if (!menuEl) return menuRawPos;
+    const rect = menuEl.getBoundingClientRect();
+    return {
+      left:
+        menuRawPos.left + rect.width > window.innerWidth
+          ? menuRawPos.left - rect.width
+          : menuRawPos.left,
+      top:
+        menuRawPos.top + rect.height > window.innerHeight
+          ? menuRawPos.top - rect.height
+          : menuRawPos.top
+    };
+  });
+
+  onMount(() => {
+    connections = loadAllConnectionsLocally();
+    loaded = true;
+  });
+
+  function connectionLabel(conn: SavedConnection): string {
+    if (conn.name) return conn.name;
+    return conn.port ? `${conn.host}:${conn.port}` : conn.host;
+  }
+
+  function openContextMenu(e: MouseEvent, conn: SavedConnection) {
+    e.preventDefault();
+    e.stopPropagation();
+    menuRawPos = { left: e.clientX, top: e.clientY };
+    menuConn = conn;
+  }
+
+  function closeContextMenu() {
+    menuConn = null;
+  }
+
+  function handleOutsideClick(e: MouseEvent) {
+    if (menuConn && menuEl && !menuEl.contains(e.target as Node)) closeContextMenu();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (menuConn && e.key === 'Escape') closeContextMenu();
+  }
+
+  function requestDelete(conn: SavedConnection) {
+    closeContextMenu();
+    deleteCandidate = conn;
+    deleteModalOpen = true;
+  }
+
+  function confirmDelete() {
+    if (!deleteCandidate) return;
+    removeConnectionById(deleteCandidate.id);
+    connections = loadAllConnectionsLocally();
+    deleteModalOpen = false;
+    deleteCandidate = null;
+  }
+
+  function cancelDelete() {
+    deleteModalOpen = false;
+    deleteCandidate = null;
+  }
+</script>
+
+<svelte:document onclick={handleOutsideClick} />
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="mx-auto max-w-4xl p-6">
+  <a href={resolve('/embed/storage') + '?disconnected=1'} class="btn btn-ghost btn-sm mb-4 -ml-2">
+    <IconArrowBack class="size-4" aria-hidden="true" />
+    {m.storage_connections_back()}
+  </a>
+
+  <h1 class="mb-1 text-xl font-semibold">{m.storage_connections_title()}</h1>
+  <p class="text-base-content/60 mb-6 text-sm">{m.storage_connections_subtitle()}</p>
+
+  {#if !loaded}
+    <div class="flex items-center justify-center py-12">
+      <span class="loading loading-spinner loading-md text-base-content/40"></span>
+    </div>
+  {:else if connections.length === 0}
+    <p class="text-base-content/50 text-sm">{m.storage_connections_empty()}</p>
+  {:else}
+    <div class="overflow-x-auto">
+      <table class="table-sm table">
+        <thead>
+          <tr>
+            <th>{m.storage_connections_col_name()}</th>
+            <th>{m.storage_connections_col_host()}</th>
+            <th>{m.storage_connections_col_type()}</th>
+            <th class="w-10"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each connections as conn (conn.id)}
+            <tr
+              class="group hover:bg-base-300 cursor-default select-none"
+              class:outline={menuConn?.id === conn.id}
+              class:bg-base-200={menuConn?.id === conn.id}
+              oncontextmenu={(e) => openContextMenu(e, conn)}
+            >
+              <td>
+                <div class="flex items-center gap-2">
+                  <IconStorage class="text-primary size-4 shrink-0" aria-hidden="true" />
+                  <span class="font-medium">{connectionLabel(conn)}</span>
+                </div>
+              </td>
+              <td class="text-base-content/60 font-mono text-xs">
+                {conn.port ? `${conn.host}:${conn.port}` : conn.host}
+              </td>
+              <td class="text-base-content/60 text-xs uppercase">{conn.type}</td>
+              <td>
+                <button
+                  type="button"
+                  class="btn btn-ghost btn-xs btn-square opacity-0 group-hover:opacity-100"
+                  aria-label={m.storage_connections_options({ label: connectionLabel(conn) })}
+                  onclick={(e) => openContextMenu(e, conn)}
+                >
+                  <IconMoreHoriz class="size-4" aria-hidden="true" />
+                </button>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</div>
+
+<!-- Context menu (right-click or ⋯ button) -->
+{#if menuConn}
+  <ul
+    bind:this={menuEl}
+    class="menu menu-sm border-base-300 bg-base-100 fixed z-50 w-36 rounded-lg border p-1 shadow-lg"
+    role="menu"
+    tabindex="-1"
+    style="left: {menuPos.left}px; top: {menuPos.top}px;"
+  >
+    <li role="none">
+      <a
+        href={resolve(`/embed/storage/connections/${menuConn.id}/edit`)}
+        role="menuitem"
+        onclick={closeContextMenu}
+      >
+        <IconEdit class="size-4 shrink-0" aria-hidden="true" />
+        {m.storage_connections_edit()}
+      </a>
+    </li>
+    <li role="none">
+      <button
+        type="button"
+        role="menuitem"
+        class="text-error"
+        onclick={() => requestDelete(menuConn!)}
+      >
+        <IconDelete class="size-4 shrink-0" aria-hidden="true" />
+        {m.storage_connections_delete()}
+      </button>
+    </li>
+  </ul>
+{/if}
+
+<DeleteConnectionModal
+  bind:open={deleteModalOpen}
+  connection={deleteCandidate}
+  onconfirm={confirmDelete}
+  oncancel={cancelDelete}
+/>
diff --git a/src/routes/embed/storage/connections/[id]/+layout.svelte b/src/routes/embed/storage/connections/[id]/+layout.svelte
new file mode 100644
index 00000000..157f1255
--- /dev/null
+++ b/src/routes/embed/storage/connections/[id]/+layout.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import { page } from '$app/state';
+  import StorageConnectionSidebar from '$lib/components/storage/sidebar/StorageConnectionSidebar.svelte';
+  import type { SavedConnection } from '$lib/storage/connection-storage.js';
+
+  let { children } = $props();
+
+  const connectionId = $derived(page.params.id);
+
+  function handleSelect(conn: SavedConnection) {
+    goto(resolve(`/embed/storage/connections/${conn.id}/edit`));
+  }
+</script>
+
+<div class="flex flex-col gap-4 md:flex-row md:items-start">
+  <StorageConnectionSidebar activeId={connectionId} onselect={handleSelect} />
+  <div class="min-w-0 flex-1">
+    {@render children()}
+  </div>
+</div>
diff --git a/src/routes/embed/storage/connections/[id]/edit/+page.server.ts b/src/routes/embed/storage/connections/[id]/edit/+page.server.ts
new file mode 100644
index 00000000..534a4c56
--- /dev/null
+++ b/src/routes/embed/storage/connections/[id]/edit/+page.server.ts
@@ -0,0 +1,64 @@
+import { fail } from '@sveltejs/kit';
+import { superValidate, message } from 'sveltekit-superforms';
+import { zod4 as zod } from 'sveltekit-superforms/adapters';
+import type { Actions, PageServerLoad } from './$types';
+import { EditStorageConnectionSchema } from '$lib/storage/schemas.js';
+import { listBuckets } from '$lib/server/storage/service.js';
+import type { S3ConnectionConfig } from '$lib/server/storage/types.js';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const editForm = await superValidate(
+    { tls: { verification: 'Full' } },
+    zod(EditStorageConnectionSchema),
+    { errors: false }
+  );
+  locals.logger.debug('loading storage connection edit page');
+  return { editForm };
+};
+
+export const actions: Actions = {
+  update: async ({ request, locals }) => {
+    const log = locals.logger;
+    const form = await superValidate(request, zod(EditStorageConnectionSchema));
+
+    if (!form.valid) {
+      log.debug({ errors: form.errors }, 'storage connection edit form validation failed');
+      return fail(400, { form });
+    }
+
+    const { type, host, port, tls, accessStyle, region, credentials } = form.data;
+
+    if (type !== 's3') {
+      return message(form, 'HDFS connections are not yet supported', { status: 400 });
+    }
+
+    const resolvedCredentials =
+      credentials.accessKey && credentials.secretKey ? credentials : undefined;
+
+    const config: S3ConnectionConfig = {
+      type: 's3',
+      host,
+      port,
+      tls,
+      accessStyle,
+      region,
+      credentials: resolvedCredentials
+    };
+
+    // If no credentials were submitted the user chose to keep the existing ones,
+    // so skip the live connection test (it was already verified when first saved).
+    if (resolvedCredentials) {
+      try {
+        await listBuckets(config);
+        log.info({ storage_type: type }, 'storage connection edit verified');
+      } catch (err) {
+        log.warn({ err }, 'storage connection edit test failed');
+        return message(form, 'Could not connect — check the endpoint and credentials.', {
+          status: 400
+        });
+      }
+    }
+
+    return message(form, 'ok');
+  }
+};
diff --git a/src/routes/embed/storage/connections/[id]/edit/+page.svelte b/src/routes/embed/storage/connections/[id]/edit/+page.svelte
new file mode 100644
index 00000000..7d1c7ab6
--- /dev/null
+++ b/src/routes/embed/storage/connections/[id]/edit/+page.svelte
@@ -0,0 +1,366 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto, beforeNavigate } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import { page } from '$app/state';
+  import { superForm } from 'sveltekit-superforms';
+  import { zod4 as zod } from 'sveltekit-superforms/adapters';
+  import { untrack } from 'svelte';
+  import IconInfo from 'virtual:icons/material-symbols/info';
+  import * as m from '$lib/paraglide/messages.js';
+  import Modal from '$lib/components/Modal.svelte';
+  import { EditStorageConnectionSchema } from '$lib/storage/schemas.js';
+  import {
+    loadConnectionById,
+    loadConnectionLocally,
+    updateConnectionLocally,
+    type SavedConnection
+  } from '$lib/storage/connection-storage.js';
+
+  let { data } = $props();
+
+  const uid = $props.id();
+
+  // Loaded client-side from localStorage
+  let connection = $state<SavedConnection | null>(null);
+  let loaded = $state(false);
+  let isActiveConnection = $state(false);
+
+  // Unsaved-changes guard
+  let initialSnapshot = $state.raw('');
+  let confirmLeaveOpen = $state(false);
+  let pendingNavigation = $state<string | null>(null);
+  // Set to true just before a programmatic goto so beforeNavigate doesn't re-intercept it.
+  let bypassDirtyCheck = false;
+
+  // Extract the id from the URL via SvelteKit's page state
+  const connectionId = page.params.id;
+
+  const { form, errors, enhance, submitting, message } = superForm(
+    untrack(() => data.editForm),
+    {
+      dataType: 'json',
+      validators: zod(EditStorageConnectionSchema),
+      onResult: ({ result, cancel }) => {
+        if (result.type === 'success' && result.data?.form?.message === 'ok') {
+          if (connection) {
+            // If credentials were left blank, preserve the existing stored credentials.
+            const savedCredentials =
+              $form.credentials.accessKey && $form.credentials.secretKey
+                ? $form.credentials
+                : (connection.credentials ?? { accessKey: '', secretKey: '' });
+            updateConnectionLocally(connection.id, { ...$form, credentials: savedCredentials });
+          }
+          // Prevent superforms from resetting the form and calling invalidateAll(),
+          // which would race with the navigation.
+          cancel();
+          // Bypass the dirty-check guard so the post-save redirect isn't intercepted.
+          bypassDirtyCheck = true;
+          goto(resolve('/embed/storage/connections'));
+        }
+      }
+    }
+  );
+
+  function isFormDirty(): boolean {
+    return loaded && !!initialSnapshot && JSON.stringify($form) !== initialSnapshot;
+  }
+
+  onMount(() => {
+    if (!connectionId) {
+      goto(resolve('/embed/storage/connections'));
+      return;
+    }
+    const found = loadConnectionById(connectionId);
+    if (!found) {
+      goto(resolve('/embed/storage/connections'));
+      return;
+    }
+    connection = found;
+
+    // Pre-fill form with current values
+    $form.id = found.id;
+    $form.name = found.name ?? '';
+    $form.type = found.type;
+    $form.host = found.host;
+    $form.port = found.port;
+    $form.tls = found.tls;
+    $form.accessStyle = found.accessStyle;
+    $form.region = found.region;
+    // Pre-fill access key but never expose the stored secret key.
+    $form.credentials = { accessKey: found.credentials?.accessKey ?? '', secretKey: '' };
+
+    // Check if this is the currently active connection
+    const active = loadConnectionLocally();
+    isActiveConnection = active?.id === found.id;
+
+    // Snapshot the pre-filled form so we can detect unsaved changes.
+    initialSnapshot = JSON.stringify($form);
+    loaded = true;
+  });
+
+  beforeNavigate(({ cancel: cancelNav, to }) => {
+    if (!bypassDirtyCheck && isFormDirty() && to?.url) {
+      cancelNav();
+      pendingNavigation = to.url.pathname + to.url.search + to.url.hash;
+      confirmLeaveOpen = true;
+    }
+  });
+
+  function confirmLeave() {
+    const dest = pendingNavigation!;
+    confirmLeaveOpen = false;
+    pendingNavigation = null;
+    bypassDirtyCheck = true;
+    goto(dest);
+  }
+
+  function cancelLeave() {
+    confirmLeaveOpen = false;
+    pendingNavigation = null;
+  }
+
+  function handleBeforeUnload(e: BeforeUnloadEvent) {
+    if (isFormDirty()) {
+      e.preventDefault();
+    }
+  }
+
+  function parseHostInput() {
+    const v = $form.host?.trim();
+    if (!v?.includes('://')) return;
+    try {
+      const url = new URL(v);
+      $form.host = url.hostname;
+      if (url.port) $form.port = Number(url.port);
+      $form.tls = url.protocol === 'https:' ? { verification: 'Full' } : undefined;
+    } catch {
+      // Not a parseable URL — leave unchanged
+    }
+  }
+</script>
+
+<svelte:window onbeforeunload={handleBeforeUnload} />
+
+<Modal bind:open={confirmLeaveOpen} class="modal">
+  <div class="modal-box">
+    <h3 class="text-lg font-semibold">{m.storage_connection_edit_unsaved_title()}</h3>
+    <p class="text-base-content/70 mt-2 text-sm">{m.storage_connection_edit_unsaved_body()}</p>
+    <div class="modal-action">
+      <button type="button" class="btn btn-ghost" onclick={cancelLeave}>
+        {m.storage_connection_edit_unsaved_stay()}
+      </button>
+      <button type="button" class="btn btn-error" onclick={confirmLeave}>
+        {m.storage_connection_edit_unsaved_leave()}
+      </button>
+    </div>
+  </div>
+</Modal>
+
+<h1 class="mb-1 text-xl font-semibold">{m.storage_connection_edit_title()}</h1>
+
+{#if !loaded}
+  <div class="flex items-center justify-center py-12">
+    <span class="loading loading-spinner loading-md text-base-content/40"></span>
+  </div>
+{:else}
+  {#if isActiveConnection}
+    <div role="note" class="alert alert-info mb-4 flex gap-2">
+      <IconInfo class="size-5 shrink-0" aria-hidden="true" />
+      <span class="text-sm">{m.storage_connection_edit_active_notice()}</span>
+    </div>
+  {/if}
+
+  <form method="POST" action="?/update" use:enhance class="flex flex-col gap-4">
+    <input type="hidden" name="id" value={$form.id} />
+
+    <!-- Connection name -->
+    <div>
+      <label for="{uid}-name" class="label mb-1 text-sm font-medium">
+        {m.storage_connection_edit_name()}
+      </label>
+      <input
+        id="{uid}-name"
+        name="name"
+        type="text"
+        class="input-bordered input w-full"
+        placeholder={m.storage_connection_edit_name_placeholder()}
+        bind:value={$form.name}
+      />
+      <p class="text-base-content/50 mt-1 text-xs">{m.storage_connection_edit_name_hint()}</p>
+    </div>
+
+    <!-- Backend type (hidden — editing type not supported) -->
+    <input type="hidden" name="type" value={$form.type} />
+
+    <!-- Host -->
+    <div>
+      <label for="{uid}-host" class="label mb-1 text-sm font-medium">
+        {m.storage_connect_host()}
+      </label>
+      <input
+        id="{uid}-host"
+        name="host"
+        type="text"
+        class={['input-bordered input w-full', $errors?.host && 'input-error']}
+        placeholder={m.storage_connect_host_placeholder()}
+        bind:value={$form.host}
+        onblur={parseHostInput}
+      />
+      {#if $errors?.host}
+        <p class="text-error mt-1 text-xs">{$errors.host}</p>
+      {/if}
+    </div>
+
+    <!-- Port -->
+    <div>
+      <label for="{uid}-port" class="label mb-1 text-sm font-medium">
+        {m.storage_connect_port()}
+      </label>
+      <input
+        id="{uid}-port"
+        name="port"
+        type="number"
+        min="1"
+        max="65535"
+        class={['input-bordered input w-full', $errors?.port && 'input-error']}
+        placeholder={m.storage_connect_port_placeholder()}
+        bind:value={$form.port}
+      />
+      <p class="text-base-content/50 mt-1 text-xs">{m.storage_connect_port_hint()}</p>
+      {#if $errors?.port}
+        <p class="text-error mt-1 text-xs">{$errors.port}</p>
+      {/if}
+    </div>
+
+    <!-- TLS -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <label for="{uid}-tls" class="label text-sm font-medium">
+          {m.storage_connect_tls()}
+        </label>
+        <p class="text-base-content/50 mt-0.5 text-xs">{m.storage_connect_tls_hint()}</p>
+      </div>
+      <input
+        id="{uid}-tls"
+        type="checkbox"
+        class="toggle toggle-primary mt-1 shrink-0"
+        checked={!!$form.tls}
+        onchange={(e) => {
+          $form.tls = e.currentTarget.checked ? { verification: 'Full' } : undefined;
+        }}
+      />
+    </div>
+
+    <!-- TLS verification -->
+    {#if $form.tls}
+      <div class="flex items-start justify-between gap-4 pl-4">
+        <div>
+          <label for="{uid}-tls-verification" class="label text-sm font-medium">
+            {m.storage_connect_tls_verification()}
+          </label>
+          <p class="text-base-content/50 mt-0.5 text-xs">
+            {m.storage_connect_tls_verification_hint()}
+          </p>
+        </div>
+        <input
+          id="{uid}-tls-verification"
+          type="checkbox"
+          class="toggle toggle-primary mt-1 shrink-0"
+          checked={$form.tls.verification === 'Full'}
+          onchange={(e) => {
+            $form.tls = { verification: e.currentTarget.checked ? 'Full' : 'None' };
+          }}
+        />
+      </div>
+    {/if}
+
+    <!-- Access style -->
+    <div>
+      <label for="{uid}-access-style" class="label mb-1 text-sm font-medium">
+        {m.storage_connect_access_style()}
+      </label>
+      <select
+        id="{uid}-access-style"
+        name="accessStyle"
+        class="select-bordered select w-full"
+        bind:value={$form.accessStyle}
+      >
+        <option value="Path">{m.storage_connect_access_style_path()}</option>
+        <option value="VirtualHosted">{m.storage_connect_access_style_virtual_hosted()}</option>
+      </select>
+    </div>
+
+    <!-- Region -->
+    <div>
+      <label for="{uid}-region" class="label mb-1 text-sm font-medium">
+        {m.storage_connect_region()}
+      </label>
+      <input
+        id="{uid}-region"
+        name="region.name"
+        type="text"
+        class={['input-bordered input w-full', $errors?.region?.name && 'input-error']}
+        bind:value={$form.region.name}
+      />
+      {#if $errors?.region?.name}
+        <p class="text-error mt-1 text-xs">{$errors.region.name}</p>
+      {/if}
+    </div>
+
+    <!-- Access key -->
+    <div>
+      <label for="{uid}-access-key" class="label mb-1 text-sm font-medium">
+        {m.storage_connect_access_key()}
+      </label>
+      <input
+        id="{uid}-access-key"
+        name="credentials.accessKey"
+        type="text"
+        class={['input-bordered input w-full', $errors?.credentials?.accessKey && 'input-error']}
+        autocomplete="username"
+        bind:value={$form.credentials.accessKey}
+      />
+      {#if $errors?.credentials?.accessKey}
+        <p class="text-error mt-1 text-xs">{$errors.credentials.accessKey}</p>
+      {/if}
+    </div>
+
+    <!-- Secret key -->
+    <div>
+      <label for="{uid}-secret-key" class="label mb-1 text-sm font-medium">
+        {m.storage_connect_secret_key()}
+      </label>
+      <input
+        id="{uid}-secret-key"
+        name="credentials.secretKey"
+        type="password"
+        class={['input-bordered input w-full', $errors?.credentials?.secretKey && 'input-error']}
+        autocomplete="current-password"
+        bind:value={$form.credentials.secretKey}
+      />
+      <p class="text-base-content/50 mt-1 text-xs">
+        {m.storage_connection_edit_credentials_hint()}
+      </p>
+      {#if $errors?.credentials?.secretKey}
+        <p class="text-error mt-1 text-xs">{$errors.credentials.secretKey}</p>
+      {/if}
+    </div>
+
+    {#if $message && $message !== 'ok'}
+      <p class="text-error text-sm">{$message}</p>
+    {/if}
+
+    <div class="flex items-center gap-3">
+      <button type="submit" class="btn btn-primary" disabled={$submitting}>
+        {#if $submitting}
+          <span class="loading loading-sm loading-spinner"></span>
+        {/if}
+        {m.storage_connection_edit_save()}
+      </button>
+      <a href={resolve('/embed/storage/connections')} class="btn btn-ghost">
+        ← {m.storage_connections_title()}
+      </a>
+    </div>
+  </form>
+{/if}
diff --git a/src/routes/embed/trino/+page.server.ts b/src/routes/embed/trino/+page.server.ts
new file mode 100644
index 00000000..fd62b457
--- /dev/null
+++ b/src/routes/embed/trino/+page.server.ts
@@ -0,0 +1,55 @@
+import { fail } from '@sveltejs/kit';
+import { superValidate, message } from 'sveltekit-superforms';
+import { zod4 as zod } from 'sveltekit-superforms/adapters';
+import { getUserId } from '$lib/server/auth-utils.js';
+import { getAllQuerySummaries, cancelQuery } from '$lib/server/trino/queries.js';
+import { trinoConfigured } from '$lib/server/trino/client.js';
+import { completionEnabled } from '$lib/server/feature-flags.js';
+import { createUserTrinoClient, getUserTrinoClient } from '$lib/server/trino/user-clients.js';
+import { ConnectionSchema, type ConnectionMessage } from '$lib/trino/validation.js';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  locals.logger.debug('loading Trino page');
+  const connectionForm = await superValidate(zod(ConnectionSchema));
+  const userId = getUserId(locals);
+  const activeQueries = getAllQuerySummaries(userId);
+  const userClientExists = getUserTrinoClient(userId) !== null;
+  return { connectionForm, activeQueries, trinoConfigured, userClientExists, completionEnabled };
+};
+
+export const actions: Actions = {
+  save: async ({ request, locals }) => {
+    const log = locals.logger;
+
+    if (trinoConfigured) {
+      return fail(400, { error: 'Connection is managed via environment variables' });
+    }
+
+    const form = await superValidate(request, zod(ConnectionSchema));
+
+    if (!form.valid) {
+      log.debug({ errors: form.errors }, 'connection form validation failed');
+      return fail(400, { form });
+    }
+
+    const userId = getUserId(locals);
+
+    // Cancel any running query before replacing the connection.
+    for (const tabId of Object.keys(getAllQuerySummaries(userId))) {
+      await cancelQuery(userId, tabId);
+    }
+
+    const { connectionUrl, authType, authUsername, authPassword } = form.data;
+
+    createUserTrinoClient(userId, {
+      url: connectionUrl,
+      authType,
+      username: authUsername,
+      password: authPassword
+    });
+
+    log.info({ trino_url: connectionUrl }, 'user connection saved');
+    return message(form, { type: 'success' } satisfies ConnectionMessage);
+  }
+};
diff --git a/src/routes/embed/trino/+page.svelte b/src/routes/embed/trino/+page.svelte
new file mode 100644
index 00000000..e445bba8
--- /dev/null
+++ b/src/routes/embed/trino/+page.svelte
@@ -0,0 +1,910 @@
+<script lang="ts">
+  import { onMount, untrack } from 'svelte';
+  import { SvelteMap } from 'svelte/reactivity';
+  import { browser } from '$app/environment';
+  import * as m from '$lib/paraglide/messages.js';
+  import MonacoEditor from '$lib/components/editor/MonacoEditor.svelte';
+  import CatalogBrowser from '$lib/components/catalog/CatalogBrowser.svelte';
+  import Modal from '$lib/components/Modal.svelte';
+  import { superForm } from 'sveltekit-superforms';
+  import { ConnectionSchema, type ConnectionMessage } from '$lib/trino/validation.js';
+  import TabBar from '$lib/components/TabBar.svelte';
+  import { tabStore, MAX_SQL_LENGTH } from '$lib/stores/tab-store.svelte.js';
+  import { getOrCreateQueryRunner, destroyQueryRunner } from '$lib/trino/query-runner.svelte.js';
+  import { isTerminal } from '$lib/types/query';
+  import {
+    splitStatements,
+    getStatementAtOffset,
+    getStatementsInRange,
+    type SqlStatement
+  } from '$lib/editor/split-statements.js';
+  import type { PageData } from './$types';
+  import StatementResult from '$lib/components/trino/StatementResult.svelte';
+
+  let { data }: { data: PageData } = $props();
+
+  const uid = $props.id();
+
+  function getStoredValue(key: string, fallback: string): string {
+    try {
+      return localStorage.getItem(key) ?? fallback;
+    } catch {
+      return fallback;
+    }
+  }
+
+  // Connection config - local state persisted to localStorage.
+  let connectionUrl = $state('');
+  let authType = $state<'none' | 'basic'>('none');
+  let authUsername = $state('');
+  let authPassword = $state('');
+  let connectionOpen = $state(false);
+
+  let sql = $state(tabStore.activeTab.sql);
+  let defaultCatalog = $state('');
+  let defaultSchema = $state('');
+  let hydrated = $state(false);
+
+  // Signal to trigger catalog browser load (1 = load on mount).
+  let catalogVersion = $state(0);
+
+  // Catalog browser state. On mobile, always start closed; on desktop, restore from localStorage.
+  function getInitialCatalogOpen(): boolean {
+    if (!browser) return false;
+    try {
+      const isMobile = !window.matchMedia('(min-width: 1024px)').matches;
+      if (isMobile) return false;
+      return (localStorage.getItem('trino_catalog_browser_open') ?? 'true') === 'true';
+    } catch {
+      return false;
+    }
+  }
+  let catalogBrowserOpen = $state(getInitialCatalogOpen());
+  let monacoEditor = $state<MonacoEditor | undefined>(undefined);
+  let mobileCatalogOpen = $state(false);
+
+  const viewStates = new SvelteMap<
+    string,
+    import('monaco-editor').editor.ICodeEditorViewState | null
+  >();
+
+  // Non-reactive tracker for tab switching.
+  let lastTabId: string | null = null;
+
+  // Get the query runner for the active tab.
+  const runner = $derived(getOrCreateQueryRunner(tabStore.activeTabId));
+
+  // Tab bar items derived from tab store.
+  const tabItems = $derived(
+    tabStore.tabs.map((t) => ({
+      id: t.id,
+      label: tabStore.getTabLabel(t)
+    }))
+  );
+
+  onMount(() => {
+    if (!data.trinoConfigured) {
+      connectionUrl = getStoredValue('trino_url', '');
+      authType = getStoredValue('trino_auth_type', 'none') as 'none' | 'basic';
+      authUsername = getStoredValue('trino_username', '');
+    }
+    defaultCatalog = getStoredValue('trino_default_catalog', '');
+    defaultSchema = getStoredValue('trino_default_schema', '');
+    hydrated = true;
+    lastTabId = tabStore.activeTabId;
+
+    if (data.trinoConfigured || data.userClientExists) {
+      // Server already has a connection (env-based or per-user); load catalogues.
+      catalogVersion++;
+    } else if (connectionUrl && authType === 'none') {
+      // Re-establish server-side connection from localStorage on page reload.
+      // Only possible for unauthenticated connections since the password is not persisted.
+      const body = new FormData();
+      body.set('connectionUrl', connectionUrl);
+      body.set('authType', authType);
+      body.set('authUsername', '');
+      body.set('authPassword', '');
+      fetch('?/save', {
+        method: 'POST',
+        body,
+        headers: { 'x-sveltekit-action': 'true' }
+      })
+        .then(() => {
+          catalogVersion++;
+        })
+        .catch(() => {
+          // Server-side connection could not be re-established from localStorage.
+          // Clear stale state so the user is prompted to re-enter.
+          connectionUrl = '';
+          authType = 'none';
+          authUsername = '';
+        });
+    } else if (connectionUrl && authType === 'basic') {
+      // Password is not persisted; prompt the user to re-enter credentials.
+      connectionOpen = true;
+    }
+
+    // Initialise runners from lightweight summaries (rows fetched on demand).
+    for (const [tabId, snapshot] of Object.entries(data.activeQueries)) {
+      getOrCreateQueryRunner(tabId).initialise(snapshot);
+    }
+    getOrCreateQueryRunner(tabStore.activeTabId).fetchResults();
+  });
+
+  // Connection form (SuperForms).
+  const {
+    enhance: connectionEnhance,
+    errors: connectionErrors,
+    message: connectionMessage
+  } = superForm(
+    untrack(() => data.connectionForm),
+    {
+      onSubmit({ cancel }) {
+        const result = ConnectionSchema.safeParse({
+          connectionUrl,
+          authType,
+          authUsername,
+          authPassword
+        });
+        if (!result.success) {
+          const errors: Record<string, string[]> = {};
+          for (const issue of result.error.issues) {
+            const key = String(issue.path[0]);
+            (errors[key] ??= []).push(issue.message);
+          }
+          $connectionErrors = {
+            connectionUrl: errors.connectionUrl,
+            authType: errors.authType,
+            authUsername: errors.authUsername,
+            authPassword: errors.authPassword
+          };
+          cancel();
+        }
+      },
+      onUpdated({ form }) {
+        const msg = form.message as ConnectionMessage | undefined;
+        if (msg?.type === 'success') {
+          catalogVersion++;
+        } else if (msg?.type === 'error') {
+          connectionOpen = true;
+        }
+      }
+    }
+  );
+
+  const isActive = $derived(runner.state !== 'IDLE' && !isTerminal(runner.state));
+  const skippedStatements = $derived.by(() => {
+    if (isActive || !runner.scriptProgress) return 0;
+    return runner.scriptProgress.totalStatements - runner.results.length;
+  });
+
+  // Persist connection config to localStorage (only in per-user mode).
+  // Password is intentionally excluded -- credentials should not be stored client-side.
+  $effect(() => {
+    if (!hydrated || data.trinoConfigured) return;
+    localStorage.setItem('trino_url', connectionUrl);
+    localStorage.setItem('trino_auth_type', authType);
+    localStorage.setItem('trino_username', authUsername);
+  });
+
+  // Persist settings.
+  $effect(() => {
+    if (!hydrated) return;
+    localStorage.setItem('trino_default_catalog', defaultCatalog);
+    localStorage.setItem('trino_default_schema', defaultSchema);
+    localStorage.setItem('trino_catalog_browser_open', String(catalogBrowserOpen));
+  });
+
+  // Handle tab switches: save/restore Monaco view state.
+  $effect(() => {
+    const currentTabId = tabStore.activeTabId;
+    // Only read activeTabId reactively; use untrack for the rest.
+    untrack(() => {
+      if (lastTabId && lastTabId !== currentTabId && monacoEditor) {
+        viewStates.set(lastTabId, monacoEditor.getViewState());
+      }
+
+      if (monacoEditor && currentTabId) {
+        const tab = tabStore.activeTab;
+        monacoEditor.setValue(tab.sql);
+        sql = tab.sql;
+        const savedState = viewStates.get(currentTabId) ?? null;
+        monacoEditor.restoreViewState(savedState);
+      }
+
+      lastTabId = currentTabId;
+      getOrCreateQueryRunner(currentTabId).fetchResults();
+    });
+  });
+
+  // Sync Monaco content changes back to the tab store.
+  $effect(() => {
+    if (!hydrated) return;
+    // Read sql reactively to trigger on changes; untrack the store call
+    // to avoid re-running when activeTabId changes.
+    const value = sql;
+    untrack(() => tabStore.updateSql(tabStore.activeTabId, value));
+  });
+
+  const connectionSummary = $derived.by(() => {
+    const host = connectionUrl ? connectionUrl.replace(/^https?:\/\//, '').replace(/\/$/, '') : '-';
+    const auth = authType === 'basic' ? m.trino_auth_basic() : m.trino_auth_none();
+    return `${host} \u00b7 ${auth}`;
+  });
+
+  const stateLabel = $derived.by(() => {
+    const stateMap: Record<string, () => string> = {
+      SUBMITTING: m.trino_state_submitting,
+      QUEUED: m.trino_state_queued,
+      PLANNING: m.trino_state_planning,
+      RUNNING: m.trino_state_running,
+      FINISHING: m.trino_state_finishing,
+      FINISHED: m.trino_state_finished,
+      FAILED: m.trino_state_failed,
+      CANCELLED: m.trino_state_cancelled
+    };
+    return stateMap[runner.state]?.() ?? null;
+  });
+
+  const stateBadgeClass = $derived.by(() => {
+    switch (runner.state) {
+      case 'QUEUED':
+      case 'PLANNING':
+        return 'badge-warning';
+      case 'RUNNING':
+      case 'FINISHING':
+      case 'SUBMITTING':
+        return 'badge-info';
+      case 'FINISHED':
+        return 'badge-success';
+      case 'FAILED':
+        return 'badge-error';
+      case 'CANCELLED':
+        return 'badge-neutral';
+      default:
+        return '';
+    }
+  });
+
+  const charLimitReached = $derived(sql.length >= MAX_SQL_LENGTH);
+
+  const execOptions = $derived({
+    catalog: defaultCatalog || undefined,
+    schema: defaultSchema || undefined
+  });
+
+  let submittedStatements = $state.raw<SqlStatement[]>([]);
+
+  function runStatements(statements: SqlStatement[]) {
+    if (statements.length === 0) return;
+    submittedStatements = statements;
+    runner.executeScript(statements, execOptions);
+  }
+
+  /** Ctrl+Enter: run the single statement at the cursor. */
+  function handleRunAtCursor() {
+    const offset = monacoEditor?.getCursorOffset();
+    const stmt = offset != null ? getStatementAtOffset(sql, offset) : null;
+    if (stmt) runStatements([stmt]);
+  }
+
+  /** Run all statements in the editor, ignoring any selection. */
+  function handleRunAll() {
+    monacoEditor?.clearSelection();
+    runStatements(splitStatements(sql));
+  }
+
+  /** Run only the statements overlapping the current selection. */
+  function handleRunSelected() {
+    const selection = monacoEditor?.getSelection();
+    monacoEditor?.clearSelection();
+    if (!selection) return;
+    runStatements(getStatementsInRange(sql, selection.startOffset, selection.endOffset));
+  }
+
+  const hasSelection = $derived(monacoEditor?.getSelection() != null);
+
+  type RunMode = 'cursor' | 'all';
+  let runMode = $state<RunMode>('cursor');
+
+  function handleRun() {
+    // If text is selected, always run selected statements regardless of mode.
+    if (monacoEditor?.getSelection()) {
+      handleRunSelected();
+      return;
+    }
+    if (runMode === 'cursor') {
+      handleRunAtCursor();
+    } else {
+      handleRunAll();
+    }
+  }
+
+  function selectRunMode(mode: RunMode) {
+    runMode = mode;
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  }
+
+  const runButtonLabel = $derived.by(() => {
+    if (runMode === 'all') {
+      return hasSelection ? m.trino_run_selected() : m.trino_run_all();
+    }
+    return m.trino_run_at_cursor();
+  });
+
+  // Clear submitted statements when the user edits, so highlighting stops.
+  const highlightOffsets = $derived.by(() => {
+    const progress = runner.scriptProgress;
+    if (!progress || progress.totalStatements <= 1 || isTerminal(runner.state)) return null;
+    return submittedStatements[progress.currentStatementIndex] ?? null;
+  });
+
+  const runShortcutLabel = $derived(runMode === 'cursor' ? 'Ctrl+↵' : 'Ctrl+Shift+↵');
+
+  function handleKeydown(event: KeyboardEvent) {
+    // Monaco handles its own keybindings — skip if the event originated from the editor.
+    if (event.target instanceof HTMLElement && event.target.closest('[data-ready]')) return;
+
+    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === 'Enter') {
+      event.preventDefault();
+      handleRunAll();
+    } else if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+      event.preventDefault();
+      handleRunAtCursor();
+    }
+  }
+
+  function toggleCatalogBrowser() {
+    if (browser && !window.matchMedia('(min-width: 1024px)').matches) {
+      mobileCatalogOpen = !mobileCatalogOpen;
+    } else {
+      catalogBrowserOpen = !catalogBrowserOpen;
+    }
+  }
+
+  function handleTabSelect(id: string) {
+    tabStore.switchTab(id);
+  }
+
+  function handleTabClose(id: string) {
+    destroyQueryRunner(id);
+    viewStates.delete(id);
+    tabStore.closeTab(id);
+    // Clean up server-side query state for this tab.
+    fetch(`/api/trino/query?tabId=${encodeURIComponent(id)}&cleanup=true`, { method: 'DELETE' });
+  }
+
+  function handleTabAdd() {
+    tabStore.createTab();
+  }
+
+  function handleTabRename(id: string, newLabel: string) {
+    tabStore.renameTab(id, newLabel);
+  }
+
+  function handleTabReorder(from: number, to: number) {
+    tabStore.reorderTabs(from, to);
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#snippet closeIcon()}
+  <svg
+    class="size-4"
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
+  >
+{/snippet}
+
+<div class="flex h-full gap-4">
+  <!-- Catalog browser panel (desktop) — always in DOM, collapses via width transition -->
+  <aside
+    class="
+      border-base-300 bg-base-100 hidden shrink-0 flex-col overflow-hidden rounded-xl
+      border transition-[width] duration-200 ease-out
+      lg:flex
+      {catalogBrowserOpen ? 'w-72' : 'invisible w-0 border-0'}"
+  >
+    <div
+      class="
+        border-base-300 flex w-72 items-center justify-between border-b px-3
+        py-2
+      "
+    >
+      <span class="text-base-content/60 text-sm font-medium">{m.trino_catalog_browser()}</span>
+    </div>
+    <div class="w-72">
+      <CatalogBrowser
+        connectionVersion={catalogVersion}
+        bind:defaultCatalog
+        bind:defaultSchema
+        onInsert={(name) => monacoEditor?.insertAtCursor(name)}
+      />
+    </div>
+  </aside>
+
+  <!-- Mobile catalog browser overlay -->
+  <Modal
+    bind:open={mobileCatalogOpen}
+    class="
+      bg-base-100 fixed inset-0 z-40 size-full max-h-full max-w-full p-0
+      lg:hidden
+    "
+  >
+    <div class="flex h-full flex-col">
+      <div
+        class="
+          border-base-300 flex items-center justify-between border-b px-3 py-2
+        "
+      >
+        <span class="text-base-content/60 text-sm font-medium">{m.trino_catalog_browser()}</span>
+        <button
+          class="btn btn-ghost btn-xs"
+          onclick={() => (mobileCatalogOpen = false)}
+          aria-label={m.trino_catalog_browser_toggle()}
+        >
+          {@render closeIcon()}
+        </button>
+      </div>
+      <CatalogBrowser
+        connectionVersion={catalogVersion}
+        bind:defaultCatalog
+        bind:defaultSchema
+        onInsert={(name) => {
+          monacoEditor?.insertAtCursor(name);
+          mobileCatalogOpen = false;
+        }}
+      />
+    </div>
+  </Modal>
+
+  <!-- Main editor + results column -->
+  <div class="flex min-w-0 flex-1 flex-col">
+    <!-- Connection config form (hidden when Trino is env-configured) -->
+    {#if !data.trinoConfigured}
+      <form method="POST" action="?/save" use:connectionEnhance class="px-2 pt-1">
+        <input type="hidden" name="connectionUrl" value={connectionUrl} />
+        <input type="hidden" name="authType" value={authType} />
+        <input type="hidden" name="authUsername" value={authUsername} />
+        <input type="hidden" name="authPassword" value={authPassword} />
+
+        <div class="border-base-300 bg-base-100 collapse rounded-xl border">
+          <input
+            type="checkbox"
+            class="peer"
+            aria-label={m.trino_connection_label()}
+            bind:checked={connectionOpen}
+          />
+          <div
+            class="
+              collapse-title text-base-content flex items-center justify-between pr-4
+              text-sm font-medium
+            "
+          >
+            <span>{m.trino_connection_label()}</span>
+            <span class="text-base-content/50 font-mono text-xs">{connectionSummary}</span>
+          </div>
+          <div class="collapse-content flex flex-col gap-4">
+            <!-- URL -->
+            <div class="flex flex-col gap-1">
+              <label for="{uid}-conn-url" class="label text-sm">
+                {m.trino_connection_url()}
+              </label>
+              <input
+                id="{uid}-conn-url"
+                type="url"
+                class="input input-sm w-full font-mono"
+                class:input-error={$connectionErrors.connectionUrl}
+                placeholder={m.trino_connection_url_placeholder()}
+                bind:value={connectionUrl}
+              />
+              {#if $connectionErrors.connectionUrl}
+                <p class="text-error text-xs">{$connectionErrors.connectionUrl}</p>
+              {/if}
+            </div>
+
+            <!-- Auth type toggle -->
+            <div class="flex flex-col gap-1">
+              <span class="label text-sm">{m.trino_connection_auth()}</span>
+              <div class="join" role="group" aria-label={m.trino_connection_auth()}>
+                <input
+                  id="{uid}-auth-none"
+                  class="btn join-item btn-sm"
+                  type="radio"
+                  name="{uid}-auth"
+                  aria-label={m.trino_auth_none()}
+                  value="none"
+                  bind:group={authType}
+                />
+                <input
+                  id="{uid}-auth-basic"
+                  class="btn join-item btn-sm"
+                  type="radio"
+                  name="{uid}-auth"
+                  aria-label={m.trino_auth_basic()}
+                  value="basic"
+                  bind:group={authType}
+                />
+              </div>
+            </div>
+
+            <!-- Basic auth credentials -->
+            {#if authType === 'basic'}
+              <div
+                class="
+                  grid grid-cols-1 gap-3
+                  sm:grid-cols-2
+                "
+              >
+                <div class="flex flex-col gap-1">
+                  <label for="{uid}-auth-username" class="label text-sm">
+                    {m.trino_auth_username()}
+                  </label>
+                  <input
+                    id="{uid}-auth-username"
+                    type="text"
+                    class="input input-sm font-mono"
+                    class:input-error={$connectionErrors.authUsername}
+                    autocomplete="username"
+                    bind:value={authUsername}
+                  />
+                  {#if $connectionErrors.authUsername}
+                    <p class="text-error text-xs">{$connectionErrors.authUsername}</p>
+                  {/if}
+                </div>
+                <div class="flex flex-col gap-1">
+                  <label for="{uid}-auth-password" class="label text-sm">
+                    {m.trino_auth_password()}
+                  </label>
+                  <input
+                    id="{uid}-auth-password"
+                    type="password"
+                    class="input input-sm font-mono"
+                    class:input-error={$connectionErrors.authPassword}
+                    autocomplete="current-password"
+                    bind:value={authPassword}
+                  />
+                  {#if $connectionErrors.authPassword}
+                    <p class="text-error text-xs">{$connectionErrors.authPassword}</p>
+                  {/if}
+                </div>
+              </div>
+            {/if}
+
+            <!-- Save button -->
+            <div class="flex justify-end">
+              <button type="submit" class="btn btn-sm btn-primary">
+                {m.trino_save_connection()}
+              </button>
+            </div>
+
+            {#if $connectionMessage}
+              {@const msg = $connectionMessage as ConnectionMessage}
+              {#if msg.type === 'success'}
+                <p class="text-success text-sm">{m.trino_connection_saved()}</p>
+              {:else}
+                <p class="text-error text-sm">{msg.message}</p>
+              {/if}
+            {/if}
+          </div>
+        </div>
+      </form>
+    {/if}
+
+    <!-- Tab bar -->
+    <div class="px-2 pt-1">
+      <TabBar
+        items={tabItems}
+        activeId={tabStore.activeTabId}
+        onSelect={handleTabSelect}
+        onClose={handleTabClose}
+        onAdd={handleTabAdd}
+        onRename={handleTabRename}
+        onReorder={handleTabReorder}
+        maxItems={tabStore.maxTabs}
+      />
+    </div>
+
+    <!-- Persistence warning -->
+    {#if tabStore.persistError}
+      <div class="px-2" role="alert">
+        <div class="alert alert-warning text-sm">
+          {m.trino_tabs_persist_error()}
+        </div>
+      </div>
+    {/if}
+
+    <!-- Content card (editor + status + results) -->
+    <div
+      class="
+        border-base-300 bg-base-100 flex min-h-0 flex-1 flex-col rounded-t-none
+        rounded-b-xl border
+      "
+      role="tabpanel"
+      aria-labelledby="tab-{tabStore.activeTabId}"
+    >
+      <div
+        class="
+          border-base-300 flex items-center justify-between border-b px-4 py-2
+        "
+      >
+        <div class="flex items-center gap-2">
+          <div class="tooltip tooltip-right" data-tip={m.trino_catalog_browser_toggle()}>
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs"
+              onclick={toggleCatalogBrowser}
+              aria-label={m.trino_catalog_browser_toggle()}
+            >
+              {#if catalogBrowserOpen}
+                <svg
+                  class="
+                    hidden size-4
+                    lg:block
+                  "
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  ><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /><path
+                    d="m14 9-3 3 3 3"
+                  /></svg
+                >
+                <svg
+                  class="
+                    size-4
+                    lg:hidden
+                  "
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16" /></svg
+                >
+              {:else}
+                <svg
+                  class="size-4"
+                  aria-hidden="true"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  ><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /><path
+                    d="m12 9 3 3-3 3"
+                  /></svg
+                >
+              {/if}
+            </button>
+          </div>
+          <span class="text-base-content/60 text-sm font-medium">{m.trino_editor_label()}</span>
+          {#if charLimitReached}
+            <span class="text-warning text-xs" role="status"
+              >{m.trino_editor_char_limit_reached({ limit: MAX_SQL_LENGTH.toLocaleString() })}</span
+            >
+          {/if}
+        </div>
+        <div class="flex gap-2">
+          {#if isActive}
+            <button
+              type="button"
+              class="btn btn-sm btn-error"
+              onclick={() => runner.cancel()}
+              aria-label={m.trino_cancel_query()}
+            >
+              {m.trino_cancel_query()}
+            </button>
+          {/if}
+          {#snippet runOption(label: string, shortcut: string)}
+            <span class="flex flex-col items-start text-xs font-semibold">
+              <span>{label}</span>
+              <kbd class="kbd kbd-xs text-base-content opacity-60">{shortcut}</kbd>
+            </span>
+          {/snippet}
+
+          <div class="dropdown dropdown-end">
+            <div class="join">
+              <button
+                type="button"
+                class="btn join-item btn-primary py-1.5"
+                disabled={isActive}
+                aria-label={runButtonLabel}
+                onclick={handleRun}
+              >
+                {#if isActive}
+                  <span class="loading loading-xs loading-spinner"></span>
+                  {m.trino_running()}
+                {:else}
+                  <span
+                    class="
+                      grid
+                      *:[grid-area:1/1]
+                    "
+                  >
+                    <!-- Invisible sizers: longest option sets width -->
+                    <span class="invisible" aria-hidden="true">
+                      {@render runOption(m.trino_run_at_cursor(), 'Ctrl+Shift+↵')}
+                    </span>
+                    <span class="invisible" aria-hidden="true">
+                      {@render runOption(
+                        hasSelection ? m.trino_run_selected() : m.trino_run_all(),
+                        'Ctrl+Shift+↵'
+                      )}
+                    </span>
+                    {@render runOption(runButtonLabel, runShortcutLabel)}
+                  </span>
+                {/if}
+              </button>
+              <button
+                type="button"
+                class="
+                  btn join-item border-l-primary-content/20 btn-primary
+                  self-stretch border-l px-2
+                "
+                class:pointer-events-none={isActive}
+                aria-haspopup="true"
+                aria-label={m.trino_run_mode_select()}
+              >
+                <svg class="size-3" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor">
+                  <path
+                    fill-rule="evenodd"
+                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+            <div
+              class="
+                dropdown-content rounded-box bg-primary text-primary-content z-10 mt-1 flex
+                w-full flex-col gap-1 p-1.5 shadow-lg
+              "
+            >
+              <button
+                type="button"
+                class="
+                  rounded-btn hover:bg-primary-content/20 cursor-pointer px-3 py-1.5
+                  text-left
+                  {runMode === 'cursor' ? 'bg-primary-content/15' : ''}"
+                onclick={() => selectRunMode('cursor')}
+              >
+                {@render runOption(m.trino_run_at_cursor(), 'Ctrl+↵')}
+              </button>
+              <button
+                type="button"
+                class="
+                  rounded-btn hover:bg-primary-content/20 cursor-pointer px-3 py-1.5
+                  text-left
+                  {runMode === 'all' ? 'bg-primary-content/15' : ''}"
+                onclick={() => selectRunMode('all')}
+              >
+                {@render runOption(
+                  hasSelection ? m.trino_run_selected() : m.trino_run_all(),
+                  'Ctrl+Shift+↵'
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="h-64 px-4 py-2">
+        <MonacoEditor
+          bind:this={monacoEditor}
+          bind:value={sql}
+          {highlightOffsets}
+          {defaultCatalog}
+          {defaultSchema}
+          completionEnabled={data.completionEnabled}
+          onExecute={handleRun}
+          onExecuteAll={handleRunAll}
+        />
+      </div>
+
+      <!-- Status display -->
+      {#if runner.state !== 'IDLE'}
+        <div
+          class="
+            border-base-300 flex flex-wrap items-center gap-3 border-t px-4 py-2
+          "
+          aria-live="polite"
+          data-query-state={runner.state}
+        >
+          {#if runner.scriptProgress}
+            <span class="text-base-content/60 text-xs font-medium">
+              {m.trino_script_progress({
+                current: runner.scriptProgress.currentStatementIndex + 1,
+                total: runner.scriptProgress.totalStatements
+              })}
+            </span>
+            {#if skippedStatements > 0}
+              <span class="text-error text-xs font-medium">
+                {skippedStatements === 1
+                  ? m.trino_statements_skipped_one()
+                  : m.trino_statements_skipped_other({ count: skippedStatements })}
+              </span>
+            {/if}
+          {/if}
+          {#if stateLabel}
+            <span
+              class="
+                badge
+                {stateBadgeClass}">{stateLabel}</span
+            >
+          {/if}
+          {#if runner.state === 'RUNNING'}
+            <span class="text-base-content/60 text-xs tabular-nums"
+              >{Math.round(runner.progress.progressPercentage)}%</span
+            >
+            <progress
+              class="progress progress-primary shrink-0"
+              style="width: 8rem"
+              value={runner.progress.progressPercentage}
+              max="100"
+            ></progress>
+          {/if}
+          {#if runner.progress.processedRows > 0 || runner.progress.elapsedTimeMillis > 0}
+            <span class="text-base-content/60 text-xs">
+              {m.trino_progress_info({
+                rows: runner.progress.processedRows.toLocaleString(),
+                elapsed: (runner.progress.elapsedTimeMillis / 1000).toFixed(1)
+              })}
+            </span>
+          {/if}
+          {#if runner.currentTrinoQueryUrl}
+            <a
+              href={runner.currentTrinoQueryUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn btn-ghost btn-xs"
+            >
+              {m.trino_view_in_trino()}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-3.5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
+                />
+                <path
+                  d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
+                />
+              </svg>
+            </a>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- Results section -->
+      <div class="border-base-300 flex items-center border-t px-4 py-2">
+        <span class="text-base-content/60 text-sm font-medium">{m.trino_results_label()}</span>
+      </div>
+
+      <div class="min-h-0 flex-1 overflow-auto">
+        {#if runner.results.length > 0}
+          {#each runner.results as result, idx (idx)}
+            <StatementResult {result} index={idx} totalStatements={runner.results.length} />
+          {/each}
+        {:else if !isActive}
+          <p class="text-base-content/40 py-8 text-center text-sm">{m.trino_results_empty()}</p>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/static/embed-demo.html b/static/embed-demo.html
new file mode 100644
index 00000000..be055738
--- /dev/null
+++ b/static/embed-demo.html
@@ -0,0 +1,473 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Embedded Apps Demo — Another Frontend</title>
+    <style>
+      /* -----------------------------------------------------------------------
+         This file simulates an external / host frontend that embeds the Trino
+         SQL editor and the Storage browser from the Stackable Cockpit via
+         <iframe>.  It is intentionally self-contained (no framework, no build
+         step) to keep the demo as simple as possible.
+
+         HOW TO USE
+         ----------
+         Serve this file from the same origin as the Stackable Cockpit during
+         local development (e.g. copy it to `static/embed-demo.html` and open
+         http://localhost:5173/embed-demo.html) so that the session cookie is
+         shared automatically.
+
+         For cross-origin embedding (the file served from a different domain):
+         1. The Cockpit server must set `SameSite=None; Secure` on its session
+            cookie — see TECH_DEBT.md for the outstanding action item.
+         2. Both the Cockpit server and this page must be on HTTPS (browsers
+            refuse to send SameSite=None cookies over HTTP).
+         3. Update COCKPIT_BASE_URL below to the production Cockpit URL.
+
+         PROXY / REQUEST HEADERS
+         -----------------------
+         The iframe loads its content from the Cockpit origin, so all API
+         requests made by the embedded app's JavaScript go directly to that
+         same origin.  No special forwarding of proxy headers (X-Forwarded-For,
+         X-Forwarded-Host, etc.) is required because the browser sends those
+         requests to the Cockpit server directly — not via this host page.
+
+         If a future embedded app (e.g. NiFi) uses proxy-based authentication
+         headers (X-Remote-User, X-Webauth-User, etc.) the reverse proxy in
+         front of the Cockpit server must be configured to pass those headers
+         for requests arriving at the /embed/* routes.
+      ----------------------------------------------------------------------- */
+
+      :root {
+        --accent: #6366f1;
+        --accent-dark: #4f46e5;
+        --bg: #0f172a;
+        --surface: #1e293b;
+        --border: #334155;
+        --text: #f1f5f9;
+        --text-muted: #94a3b8;
+        --tab-active: #6366f1;
+        --tab-inactive: #334155;
+        --radius: 0.5rem;
+      }
+
+      *,
+      *::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;
+      }
+
+      /* ---- Top bar ---- */
+      header {
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+        padding: 0 1.25rem;
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        height: 3.25rem;
+        flex-shrink: 0;
+      }
+
+      header h1 {
+        font-size: 0.9rem;
+        font-weight: 700;
+        color: var(--text-muted);
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+      }
+
+      header .badge {
+        font-size: 0.65rem;
+        font-weight: 600;
+        background: var(--accent);
+        color: #fff;
+        padding: 0.15rem 0.45rem;
+        border-radius: 9999px;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+      }
+
+      /* ---- Tab bar ---- */
+      nav {
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+        display: flex;
+        gap: 0.25rem;
+        padding: 0 1.25rem;
+        flex-shrink: 0;
+      }
+
+      nav button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 0.85rem;
+        font-weight: 500;
+        padding: 0.6rem 1rem;
+        color: var(--text-muted);
+        border-bottom: 2px solid transparent;
+        transition:
+          color 0.15s,
+          border-color 0.15s;
+        white-space: nowrap;
+      }
+
+      nav button:hover {
+        color: var(--text);
+      }
+
+      nav button.active {
+        color: var(--accent);
+        border-bottom-color: var(--accent);
+      }
+
+      /* ---- Content area ---- */
+      main {
+        flex: 1;
+        display: flex;
+        min-height: 0;
+      }
+
+      /* ---- Left sidebar (fake nav items in the host app) ---- */
+      aside {
+        width: 14rem;
+        background: var(--surface);
+        border-right: 1px solid var(--border);
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        padding: 0.75rem 0.5rem;
+        flex-shrink: 0;
+      }
+
+      aside a {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        padding: 0.45rem 0.75rem;
+        border-radius: var(--radius);
+        font-size: 0.875rem;
+        color: var(--text-muted);
+        text-decoration: none;
+        transition:
+          background 0.12s,
+          color 0.12s;
+      }
+
+      aside a:hover {
+        background: rgba(255, 255, 255, 0.06);
+        color: var(--text);
+      }
+
+      aside a.active {
+        background: rgba(99, 102, 241, 0.15);
+        color: var(--accent);
+        font-weight: 600;
+      }
+
+      aside .section-label {
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+        padding: 0.4rem 0.75rem 0.1rem;
+        margin-top: 0.5rem;
+      }
+
+      /* ---- iframe panel ---- */
+      .panel {
+        flex: 1;
+        display: none;
+        min-width: 0;
+      }
+
+      .panel.visible {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .panel iframe {
+        flex: 1;
+        border: none;
+        width: 100%;
+        height: 100%;
+      }
+
+      /* ---- Auth banner ---- */
+      .auth-banner {
+        display: none;
+        background: #7c3aed;
+        color: #fff;
+        font-size: 0.8rem;
+        padding: 0.5rem 1.25rem;
+        gap: 0.5rem;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .auth-banner.visible {
+        display: flex;
+      }
+
+      .auth-banner a {
+        color: #c4b5fd;
+        font-weight: 600;
+      }
+
+      /* ---- Loading overlay ---- */
+      .frame-loading {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--text-muted);
+        font-size: 0.875rem;
+      }
+
+      @media (max-width: 640px) {
+        aside {
+          display: none;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <!-- -------------------------------------------------------------------- -->
+    <!-- Top bar: branding for the "host" frontend                             -->
+    <!-- -------------------------------------------------------------------- -->
+    <header>
+      <h1>My Portal</h1>
+      <span class="badge">Demo host frontend</span>
+    </header>
+
+    <!-- -------------------------------------------------------------------- -->
+    <!-- Auth warning: shown when the embedded page is not authenticated       -->
+    <!-- -------------------------------------------------------------------- -->
+    <div class="auth-banner" id="authBanner">
+      ⚠ Not signed in to Stackable Cockpit.
+      <a id="loginLink" href="#" target="_blank">Sign in</a>
+      and then reload this page.
+      <span id="sameSiteNote" style="display: none">
+        (Cross-origin embedding also requires
+        <code>SameSite=None; Secure</code> on the session cookie — see
+        <strong>TECH_DEBT.md</strong>.)
+      </span>
+    </div>
+
+    <!-- -------------------------------------------------------------------- -->
+    <!-- Tab bar: selects which embedded app to show                           -->
+    <!-- -------------------------------------------------------------------- -->
+    <nav>
+      <button class="active" id="tab-home" onclick="showPanel('home')">Home</button>
+      <button id="tab-trino" onclick="showPanel('trino')">SQL Editor</button>
+      <button id="tab-storage" onclick="showPanel('storage')">Storage</button>
+    </nav>
+
+    <!-- -------------------------------------------------------------------- -->
+    <!-- Main content: left sidebar + iframe panels                            -->
+    <!-- -------------------------------------------------------------------- -->
+    <main>
+      <aside>
+        <span class="section-label">Platform</span>
+        <a
+          href="#"
+          class="active"
+          onclick="
+            showPanel('home');
+            return false;
+          "
+        >
+          <!-- Home icon -->
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+          </svg>
+          Dashboard
+        </a>
+
+        <span class="section-label">Data Tools</span>
+        <a
+          href="#"
+          id="nav-trino"
+          onclick="
+            showPanel('trino');
+            return false;
+          "
+        >
+          <!-- Database icon -->
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path
+              d="M12 3C7.58 3 4 4.79 4 7s3.58 4 8 4 8-1.79 8-4-3.58-4-8-4zm0 14c-4.42 0-8-1.79-8-4v3c0 2.21 3.58 4 8 4s8-1.79 8-4v-3c0 2.21-3.58 4-8 4zm0-5c-4.42 0-8-1.79-8-4v3c0 2.21 3.58 4 8 4s8-1.79 8-4V8c0 2.21-3.58 4-8 4z"
+            />
+          </svg>
+          SQL Editor
+        </a>
+        <a
+          href="#"
+          id="nav-storage"
+          onclick="
+            showPanel('storage');
+            return false;
+          "
+        >
+          <!-- Folder icon -->
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path
+              d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"
+            />
+          </svg>
+          Storage
+        </a>
+      </aside>
+
+      <!-- Home "page" (fake content, no iframe) -->
+      <div class="panel visible" id="panel-home">
+        <div class="frame-loading" style="flex-direction: column; gap: 1rem">
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            style="color: #6366f1"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+            />
+          </svg>
+          <div style="text-align: center">
+            <p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem">
+              Welcome to My Portal
+            </p>
+            <p style="color: #94a3b8; max-width: 28rem; line-height: 1.6">
+              This page simulates a host frontend that embeds the
+              <strong>Trino SQL Editor</strong> and the <strong>Storage Browser</strong> from
+              Stackable Cockpit via <code>&lt;iframe&gt;</code>. Click a tab or sidebar link to open
+              an embedded app.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Trino SQL Editor iframe -->
+      <div class="panel" id="panel-trino">
+        <iframe id="iframe-trino" title="Trino SQL Editor" allow="clipboard-write"></iframe>
+      </div>
+
+      <!-- Storage Browser iframe -->
+      <div class="panel" id="panel-storage">
+        <iframe id="iframe-storage" title="Storage Browser"></iframe>
+      </div>
+    </main>
+
+    <script>
+      // -----------------------------------------------------------------------
+      // Configuration
+      // -----------------------------------------------------------------------
+
+      // Base URL of the Stackable Cockpit server.
+      // When this demo is served from the same origin (e.g. /embed-demo.html)
+      // leave this as an empty string so relative URLs are used automatically.
+      // For cross-origin embedding set this to the full Cockpit URL, e.g.:
+      //   const COCKPIT_BASE_URL = 'https://cockpit.example.com';
+      const COCKPIT_BASE_URL = '';
+
+      // -----------------------------------------------------------------------
+      // State
+      // -----------------------------------------------------------------------
+
+      let activePanel = 'home';
+      const iframesLoaded = {};
+
+      // -----------------------------------------------------------------------
+      // Panel switching
+      // -----------------------------------------------------------------------
+
+      function showPanel(name) {
+        // Update tab buttons
+        document.querySelectorAll('nav button').forEach((btn) => {
+          btn.classList.toggle('active', btn.id === 'tab-' + name);
+        });
+
+        // Update sidebar links
+        document.querySelectorAll('aside a').forEach((a) => {
+          const target = a.id?.replace('nav-', '');
+          a.classList.toggle('active', target === name || (!target && name === 'home'));
+        });
+
+        // Show/hide panels
+        document.querySelectorAll('.panel').forEach((p) => {
+          p.classList.toggle('visible', p.id === 'panel-' + name);
+        });
+
+        // Lazy-load the iframe src the first time the panel is shown
+        if ((name === 'trino' || name === 'storage') && !iframesLoaded[name]) {
+          loadIframe(name);
+        }
+
+        activePanel = name;
+      }
+
+      function loadIframe(name) {
+        const iframe = document.getElementById('iframe-' + name);
+        if (!iframe) return;
+
+        const path = name === 'trino' ? '/embed/trino' : '/embed/storage';
+        iframe.src = COCKPIT_BASE_URL + path;
+        iframesLoaded[name] = true;
+
+        // Detect auth redirects: if the iframe navigates to /auth/login the user
+        // is not authenticated on the Cockpit server.
+        iframe.addEventListener('load', function onLoad() {
+          try {
+            const iframePath = iframe.contentWindow?.location?.pathname ?? '';
+            if (iframePath.startsWith('/auth/login') || iframePath.startsWith('/auth/')) {
+              showAuthBanner(name);
+            }
+          } catch {
+            // Cross-origin: we cannot read the iframe location.
+            // Show a note about the SameSite cookie requirement.
+            showAuthBanner(name, true);
+          }
+        });
+      }
+
+      // -----------------------------------------------------------------------
+      // Auth banner
+      // -----------------------------------------------------------------------
+
+      function showAuthBanner(appName, crossOrigin) {
+        const banner = document.getElementById('authBanner');
+        const loginLink = document.getElementById('loginLink');
+        const sameSiteNote = document.getElementById('sameSiteNote');
+
+        loginLink.href = COCKPIT_BASE_URL + '/auth/login';
+        if (crossOrigin) {
+          sameSiteNote.style.display = '';
+        }
+        banner.classList.add('visible');
+      }
+    </script>
+  </body>
+</html>

From b4e7fe42aa8464693684daf279fba667a4d3c74f Mon Sep 17 00:00:00 2001
From: F3l1x1vo <fli@ordix.de>
Date: Thu, 30 Jul 2026 10:18:55 +0200
Subject: [PATCH 2/4] fix shared components being shown in iframes

---
 .../storage/landing/BucketGrid.svelte         |  10 +-
 .../storage/landing/RecentItems.svelte        |  12 +-
 .../storage/sidebar/BucketList.svelte         |  16 +-
 .../sidebar/StorageConnectionSidebar.svelte   |  13 +-
 src/lib/storage/display-helpers.ts            |  36 +-
 src/lib/storage/route-context.ts              |  46 ++
 src/routes/(app)/storage/+layout.svelte       |   2 +
 src/routes/embed/storage/+layout.svelte       |   2 +
 static/embed-demo.html                        | 537 +++++++-----------
 9 files changed, 320 insertions(+), 354 deletions(-)
 create mode 100644 src/lib/storage/route-context.ts

diff --git a/src/lib/components/storage/landing/BucketGrid.svelte b/src/lib/components/storage/landing/BucketGrid.svelte
index 41cad839..9e507a9c 100644
--- a/src/lib/components/storage/landing/BucketGrid.svelte
+++ b/src/lib/components/storage/landing/BucketGrid.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
   import IconBucket from '../shared/BucketIcon.svelte';
   import * as m from '$lib/paraglide/messages.js';
-  import { resolve } from '$app/paths';
+  import { getStorageRouteBase } from '$lib/storage/route-context.js';
 
   interface Props {
     buckets?: string[];
   }
 
   let { buckets = [] }: Props = $props();
+
+  const routes = getStorageRouteBase();
 </script>
 
 {#if buckets.length > 0}
@@ -21,11 +23,9 @@
   >
     {#each buckets as bucket (bucket)}
       <div class="tooltip tooltip-bottom" data-tip={bucket}>
+        <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
         <a
-          href={resolve('/(app)/storage/[bucket]/[...prefix]', {
-            bucket: encodeURIComponent(bucket),
-            prefix: ''
-          })}
+          href={routes.storageHref(bucket, '')}
           data-sveltekit-preload-data="off"
           class="
               border-base-300 bg-base-100 hover:border-primary hover:bg-primary/5 flex flex-col items-center
diff --git a/src/lib/components/storage/landing/RecentItems.svelte b/src/lib/components/storage/landing/RecentItems.svelte
index 58622dfd..99a64a89 100644
--- a/src/lib/components/storage/landing/RecentItems.svelte
+++ b/src/lib/components/storage/landing/RecentItems.svelte
@@ -9,6 +9,7 @@
   import * as m from '$lib/paraglide/messages.js';
   import { formatFileSize } from '$lib/storage/utils.js';
   import { getStorageState } from '$lib/storage/context.js';
+  import { getStorageRouteBase } from '$lib/storage/route-context.js';
   import {
     fileName,
     fileHref,
@@ -21,6 +22,7 @@
   import TimestampDisplay from '$lib/components/storage/shared/TimestampDisplay.svelte';
 
   const storage = getStorageState();
+  const routes = getStorageRouteBase();
 
   type Tab = 'files' | 'locations';
   let activeTab = $state<Tab>('files');
@@ -69,7 +71,7 @@
           <td>
             <!-- eslint-disable svelte/no-navigation-without-resolve -->
             <a
-              href={fileHref(file)}
+              href={fileHref(file, routes.storageHref)}
               data-sveltekit-preload-data="off"
               class="text-base-content/60 hover:text-primary truncate text-xs"
             >
@@ -97,7 +99,7 @@
               <div class="tooltip tooltip-left" data-tip={m.storage_recent_open_folder()}>
                 <!-- eslint-disable svelte/no-navigation-without-resolve -->
                 <a
-                  href={fileHref(file)}
+                  href={fileHref(file, routes.storageHref)}
                   data-sveltekit-preload-data="off"
                   class="btn btn-ghost btn-xs"
                   aria-label="{m.storage_recent_open_folder()} — {fileName(file.key)}"
@@ -136,7 +138,7 @@
               {/if}
               <!-- eslint-disable svelte/no-navigation-without-resolve -->
               <a
-                href={locationHref(loc)}
+                href={locationHref(loc, routes.storageHref)}
                 data-sveltekit-preload-data="off"
                 class="hover:text-primary font-medium">{locationName(loc)}</a
               >
@@ -146,7 +148,7 @@
           <td>
             <!-- eslint-disable svelte/no-navigation-without-resolve -->
             <a
-              href={locationHref(loc)}
+              href={locationHref(loc, routes.storageHref)}
               data-sveltekit-preload-data="off"
               class="text-base-content/60 hover:text-primary truncate text-xs"
             >
@@ -161,7 +163,7 @@
             <div class="tooltip tooltip-left" data-tip={m.storage_recent_go_to_location()}>
               <!-- eslint-disable svelte/no-navigation-without-resolve -->
               <a
-                href={locationHref(loc)}
+                href={locationHref(loc, routes.storageHref)}
                 data-sveltekit-preload-data="off"
                 class="btn btn-ghost btn-xs"
                 aria-label="{m.storage_recent_go_to_location()} — {locationName(loc)}"
diff --git a/src/lib/components/storage/sidebar/BucketList.svelte b/src/lib/components/storage/sidebar/BucketList.svelte
index 5a1de726..537ad2ba 100644
--- a/src/lib/components/storage/sidebar/BucketList.svelte
+++ b/src/lib/components/storage/sidebar/BucketList.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import { resolve } from '$app/paths';
   import { beforeNavigate } from '$app/navigation';
   import IconClose from 'virtual:icons/material-symbols/close';
   import IconMoreHoriz from 'virtual:icons/material-symbols/more-horiz';
@@ -12,12 +11,14 @@
   import Modal from '$lib/components/Modal.svelte';
   import * as m from '$lib/paraglide/messages.js';
   import { getStorageState } from '$lib/storage/context.js';
+  import { getStorageRouteBase } from '$lib/storage/route-context.js';
   import type { PinnedLocation, StorageLocation } from '$lib/storage/types.js';
   import { pinnedLabel, pinnedHref } from '$lib/storage/display-helpers.js';
   import { createResizablePanel } from './resizable-panel.svelte.js';
   import ResizeHandle from './ResizeHandle.svelte';
 
   const storage = getStorageState();
+  const routes = getStorageRouteBase();
 
   const resize = createResizablePanel({
     storageKey: 'storage_sidebar_width',
@@ -40,7 +41,7 @@
   // with optional chaining to avoid crashing the layout and escalating the
   // error to the root fallback handler.
   const activeBucket = $derived.by(() => {
-    const match = page.url?.pathname?.match(/^\/storage\/([^/]+)/);
+    const match = page.url?.pathname?.match(routes.activeBucketRegex);
     return match ? decodeURIComponent(match[1]) : null;
   });
   const activePrefix = $derived(page.params.prefix ? page.params.prefix + '/' : '');
@@ -157,7 +158,7 @@
             >
               <!-- eslint-disable svelte/no-navigation-without-resolve -->
               <a
-                href={pinnedHref(pin)}
+                href={pinnedHref(pin, routes.storageHref)}
                 data-sveltekit-preload-data="off"
                 class="
                 hover:bg-base-200 flex w-full min-w-0 items-center gap-2 px-3 py-1.5
@@ -205,7 +206,7 @@
       {m.storage_buckets_label()}
     </span>
     <a
-      href={resolve('/storage')}
+      href={routes.storageRoot}
       data-sveltekit-preload-data="off"
       class="btn btn-ghost btn-xs group tooltip tooltip-right z-150 before:z-200"
       title={m.storage_view_all_buckets()}
@@ -227,10 +228,7 @@
       {#each storage.buckets as bucket (bucket)}
         <li role="none">
           <a
-            href={resolve('/(app)/storage/[bucket]/[...prefix]', {
-              bucket: encodeURIComponent(bucket),
-              prefix: ''
-            })}
+            href={routes.storageHref(bucket, '')}
             data-sveltekit-preload-data="off"
             class="
               hover:bg-base-200 tooltip tooltip-right flex items-center gap-2 px-3
@@ -251,7 +249,7 @@
 
   <!-- Disconnect button -->
   <div class="border-base-300 border-t p-2">
-    <form bind:this={disconnectForm} method="POST" action="/storage?/disconnect">
+    <form bind:this={disconnectForm} method="POST" action={routes.disconnectAction}>
       <button
         type="button"
         class="btn text-base-content/60 btn-ghost btn-xs hover:text-error w-full"
diff --git a/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte b/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte
index 10080e85..20dbb255 100644
--- a/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte
+++ b/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte
@@ -7,8 +7,8 @@
   import DeleteConnectionModal from '$lib/components/storage/DeleteConnectionModal.svelte';
   import { createResizablePanel } from './resizable-panel.svelte.js';
   import ResizeHandle from './ResizeHandle.svelte';
-  import { resolve } from '$app/paths';
   import * as m from '$lib/paraglide/messages.js';
+  import { getStorageRouteBase } from '$lib/storage/route-context.js';
   import {
     loadAllConnectionsLocally,
     removeConnectionLocally,
@@ -24,6 +24,8 @@
 
   let { activeId, onselect }: Props = $props();
 
+  const routes = getStorageRouteBase();
+
   let allConnections: SavedConnection[] = $state([]);
   let connectionsLoaded = $state(false);
   let forgetCandidate: SavedConnection | null = $state(null);
@@ -115,7 +117,7 @@
   >
     <li role="none">
       <a
-        href={resolve(`/storage/connections/${menuConn.id}/edit`)}
+        href={`${routes.connectionsRoot}/${menuConn.id}/edit`}
         role="menuitem"
         onclick={closeContextMenu}
         class="justify-start"
@@ -188,7 +190,7 @@
       {/each}
     </div>
     <div class="mt-2 text-right">
-      <a href={resolve('/storage/connections')} class="link link-primary text-xs">
+      <a href={routes.connectionsRoot} class="link link-primary text-xs">
         {m.storage_connect_manage()}
       </a>
     </div>
@@ -261,10 +263,7 @@
   </ul>
 
   <div class="border-base-300 border-t p-2">
-    <a
-      href={resolve('/storage/connections')}
-      class="btn btn-ghost btn-xs w-full justify-start text-xs"
-    >
+    <a href={routes.connectionsRoot} class="btn btn-ghost btn-xs w-full justify-start text-xs">
       {m.storage_connect_manage()}
     </a>
   </div>
diff --git a/src/lib/storage/display-helpers.ts b/src/lib/storage/display-helpers.ts
index d9e4874f..3ef8dde5 100644
--- a/src/lib/storage/display-helpers.ts
+++ b/src/lib/storage/display-helpers.ts
@@ -2,16 +2,22 @@ import { resolve } from '$app/paths';
 import type { ResolvedPathname } from '$app/types';
 import type { PinnedLocation, RecentFile, RecentLocation } from './types.js';
 
-const STORAGE_ROUTE = '/(app)/storage/[bucket]/[...prefix]' as const;
+const APP_STORAGE_ROUTE = '/(app)/storage/[bucket]/[...prefix]' as const;
 
 // ── URL helpers ──────────────────────────────────────────────────────────────
 
+/**
+ * Default (app-route) href for a bucket/prefix. Components that are used in
+ * both `(app)/storage` and `embed/storage` should receive a custom `hrefFn`
+ * obtained from `getStorageRouteBase().storageHref` so links stay within the
+ * correct route tree.
+ */
 export function storageHref(bucket: string, prefix: string): ResolvedPathname {
   const encodedBucket = encodeURIComponent(bucket);
   const encodedPrefix = prefix
     ? prefix.replace(/\/$/, '').split('/').map(encodeURIComponent).join('/')
     : '';
-  return resolve(STORAGE_ROUTE, { bucket: encodedBucket, prefix: encodedPrefix });
+  return resolve(APP_STORAGE_ROUTE, { bucket: encodedBucket, prefix: encodedPrefix });
 }
 
 // ── Pinned location helpers ──────────────────────────────────────────────────
@@ -22,8 +28,11 @@ export function pinnedLabel(pin: PinnedLocation): string {
   return parts[parts.length - 1] ?? pin.bucket;
 }
 
-export function pinnedHref(pin: PinnedLocation): ResolvedPathname {
-  return storageHref(pin.bucket, pin.prefix);
+export function pinnedHref(
+  pin: PinnedLocation,
+  hrefFn: (bucket: string, prefix: string) => string = storageHref
+): string {
+  return hrefFn(pin.bucket, pin.prefix);
 }
 
 // ── Recent file helpers ──────────────────────────────────────────────────────
@@ -39,14 +48,14 @@ export function fileLocation(file: RecentFile): string {
   return parts.length > 0 ? `${file.bucket} / ${parts.join(' / ')}` : file.bucket;
 }
 
-export function fileHref(file: RecentFile): ResolvedPathname {
+export function fileHref(
+  file: RecentFile,
+  hrefFn: (bucket: string, prefix: string) => string = storageHref
+): string {
   const parts = file.key.split('/').filter(Boolean);
   parts.pop();
-  const encodedPrefix = parts.map(encodeURIComponent).join('/');
-  return resolve(STORAGE_ROUTE, {
-    bucket: encodeURIComponent(file.bucket),
-    prefix: encodedPrefix
-  });
+  // hrefFn encodes each segment internally; pass raw (unencoded) parts joined
+  return hrefFn(file.bucket, parts.join('/'));
 }
 
 // ── Recent location helpers ──────────────────────────────────────────────────
@@ -63,6 +72,9 @@ export function locationPath(loc: RecentLocation): string {
   return `${loc.bucket} / ${parts.join(' / ')}`;
 }
 
-export function locationHref(loc: RecentLocation): ResolvedPathname {
-  return storageHref(loc.bucket, loc.prefix);
+export function locationHref(
+  loc: RecentLocation,
+  hrefFn: (bucket: string, prefix: string) => string = storageHref
+): string {
+  return hrefFn(loc.bucket, loc.prefix);
 }
diff --git a/src/lib/storage/route-context.ts b/src/lib/storage/route-context.ts
new file mode 100644
index 00000000..c735f7e8
--- /dev/null
+++ b/src/lib/storage/route-context.ts
@@ -0,0 +1,46 @@
+import { createContext } from 'svelte';
+import { resolve } from '$app/paths';
+import type { ResolvedPathname } from '$app/types';
+
+export interface StorageRoutes {
+  /** Generate a URL to a bucket/prefix path (raw, unencoded inputs). */
+  storageHref: (bucket: string, prefix: string) => ResolvedPathname;
+  /** Root path for storage, e.g. `/storage` or `/embed/storage`. */
+  storageRoot: string;
+  /** Connections root, e.g. `/storage/connections` or `/embed/storage/connections`. */
+  connectionsRoot: string;
+  /** Form action for disconnect, e.g. `/storage?/disconnect`. */
+  disconnectAction: string;
+  /** Regex to extract the active bucket name from `page.url.pathname`. */
+  activeBucketRegex: RegExp;
+}
+
+function makeStorageHref(
+  route: '/(app)/storage/[bucket]/[...prefix]' | '/embed/storage/[bucket]/[...prefix]'
+) {
+  return (bucket: string, prefix: string): ResolvedPathname => {
+    const encodedBucket = encodeURIComponent(bucket);
+    const encodedPrefix = prefix
+      ? prefix.replace(/\/$/, '').split('/').map(encodeURIComponent).join('/')
+      : '';
+    return resolve(route, { bucket: encodedBucket, prefix: encodedPrefix });
+  };
+}
+
+export const APP_STORAGE_ROUTES: StorageRoutes = {
+  storageHref: makeStorageHref('/(app)/storage/[bucket]/[...prefix]'),
+  storageRoot: '/storage',
+  connectionsRoot: '/storage/connections',
+  disconnectAction: '/storage?/disconnect',
+  activeBucketRegex: /^\/storage\/([^/]+)/
+};
+
+export const EMBED_STORAGE_ROUTES: StorageRoutes = {
+  storageHref: makeStorageHref('/embed/storage/[bucket]/[...prefix]'),
+  storageRoot: '/embed/storage',
+  connectionsRoot: '/embed/storage/connections',
+  disconnectAction: '/embed/storage?/disconnect',
+  activeBucketRegex: /^\/embed\/storage\/([^/]+)/
+};
+
+export const [getStorageRouteBase, setStorageRouteBase] = createContext<StorageRoutes>();
diff --git a/src/routes/(app)/storage/+layout.svelte b/src/routes/(app)/storage/+layout.svelte
index 47be34ba..949da9ee 100644
--- a/src/routes/(app)/storage/+layout.svelte
+++ b/src/routes/(app)/storage/+layout.svelte
@@ -4,6 +4,7 @@
   import BucketList from '$lib/components/storage/sidebar/BucketList.svelte';
   import { StorageState } from '$lib/storage/state.svelte.js';
   import { setStorageState } from '$lib/storage/context.js';
+  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
 
   let { children, data } = $props();
 
@@ -16,6 +17,7 @@
       })
   );
   setStorageState(storage);
+  setStorageRouteBase(APP_STORAGE_ROUTES);
 
   // Keep layout-level data in sync when SvelteKit re-runs the load function
   $effect(() => {
diff --git a/src/routes/embed/storage/+layout.svelte b/src/routes/embed/storage/+layout.svelte
index 1f8e4681..895e2d52 100644
--- a/src/routes/embed/storage/+layout.svelte
+++ b/src/routes/embed/storage/+layout.svelte
@@ -4,6 +4,7 @@
   import BucketList from '$lib/components/storage/sidebar/BucketList.svelte';
   import { StorageState } from '$lib/storage/state.svelte.js';
   import { setStorageState } from '$lib/storage/context.js';
+  import { setStorageRouteBase, EMBED_STORAGE_ROUTES } from '$lib/storage/route-context.js';
 
   let { children, data } = $props();
 
@@ -16,6 +17,7 @@
       })
   );
   setStorageState(storage);
+  setStorageRouteBase(EMBED_STORAGE_ROUTES);
 
   // Keep layout-level data in sync when SvelteKit re-runs the load function
   $effect(() => {
diff --git a/static/embed-demo.html b/static/embed-demo.html
index be055738..afdac9fe 100644
--- a/static/embed-demo.html
+++ b/static/embed-demo.html
@@ -3,53 +3,61 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Embedded Apps Demo — Another Frontend</title>
+    <title>Acme Corp — Data Platform</title>
     <style>
-      /* -----------------------------------------------------------------------
-         This file simulates an external / host frontend that embeds the Trino
-         SQL editor and the Storage browser from the Stackable Cockpit via
-         <iframe>.  It is intentionally self-contained (no framework, no build
-         step) to keep the demo as simple as possible.
-
-         HOW TO USE
-         ----------
-         Serve this file from the same origin as the Stackable Cockpit during
-         local development (e.g. copy it to `static/embed-demo.html` and open
-         http://localhost:5173/embed-demo.html) so that the session cookie is
-         shared automatically.
-
-         For cross-origin embedding (the file served from a different domain):
-         1. The Cockpit server must set `SameSite=None; Secure` on its session
-            cookie — see TECH_DEBT.md for the outstanding action item.
-         2. Both the Cockpit server and this page must be on HTTPS (browsers
-            refuse to send SameSite=None cookies over HTTP).
-         3. Update COCKPIT_BASE_URL below to the production Cockpit URL.
-
-         PROXY / REQUEST HEADERS
-         -----------------------
-         The iframe loads its content from the Cockpit origin, so all API
-         requests made by the embedded app's JavaScript go directly to that
-         same origin.  No special forwarding of proxy headers (X-Forwarded-For,
-         X-Forwarded-Host, etc.) is required because the browser sends those
-         requests to the Cockpit server directly — not via this host page.
-
-         If a future embedded app (e.g. NiFi) uses proxy-based authentication
-         headers (X-Remote-User, X-Webauth-User, etc.) the reverse proxy in
-         front of the Cockpit server must be configured to pass those headers
-         for requests arriving at the /embed/* routes.
-      ----------------------------------------------------------------------- */
+      /*
+        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 /embed/* requests.
+      */
 
       :root {
-        --accent: #6366f1;
-        --accent-dark: #4f46e5;
-        --bg: #0f172a;
-        --surface: #1e293b;
-        --border: #334155;
-        --text: #f1f5f9;
-        --text-muted: #94a3b8;
-        --tab-active: #6366f1;
-        --tab-inactive: #334155;
-        --radius: 0.5rem;
+        --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;
+        }
       }
 
       *,
@@ -74,130 +82,130 @@
         overflow: hidden;
       }
 
-      /* ---- Top bar ---- */
-      header {
+      /* ---- Topbar ---- */
+      .topbar {
         background: var(--surface);
         border-bottom: 1px solid var(--border);
-        padding: 0 1.25rem;
+        padding: 0 1.5rem;
+        height: 3rem;
         display: flex;
         align-items: center;
-        gap: 1rem;
-        height: 3.25rem;
+        justify-content: space-between;
         flex-shrink: 0;
       }
 
-      header h1 {
+      .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);
-        letter-spacing: 0.04em;
-        text-transform: uppercase;
       }
 
-      header .badge {
-        font-size: 0.65rem;
-        font-weight: 600;
-        background: var(--accent);
-        color: #fff;
-        padding: 0.15rem 0.45rem;
-        border-radius: 9999px;
-        letter-spacing: 0.05em;
-        text-transform: uppercase;
+      /* ---- Body: sidebar + content ---- */
+      .body {
+        flex: 1;
+        display: flex;
+        min-height: 0;
       }
 
-      /* ---- Tab bar ---- */
-      nav {
+      /* ---- Sidebar (Acme-specific nav — nothing to do with the Cockpit) ---- */
+      .sidebar {
+        width: var(--sidebar-w);
         background: var(--surface);
-        border-bottom: 1px solid var(--border);
+        border-right: 1px solid var(--border);
         display: flex;
-        gap: 0.25rem;
-        padding: 0 1.25rem;
+        flex-direction: column;
+        padding: 1rem 0.5rem;
+        gap: 0.125rem;
         flex-shrink: 0;
+        overflow-y: auto;
       }
 
-      nav button {
-        background: none;
-        border: none;
-        cursor: pointer;
-        font-size: 0.85rem;
-        font-weight: 500;
-        padding: 0.6rem 1rem;
+      .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);
-        border-bottom: 2px solid transparent;
+        text-decoration: none;
         transition:
-          color 0.15s,
-          border-color 0.15s;
-        white-space: nowrap;
+          background 0.1s,
+          color 0.1s;
       }
 
-      nav button:hover {
+      .sidebar a:hover {
+        background: rgba(14, 165, 233, 0.08);
         color: var(--text);
       }
 
-      nav button.active {
+      .sidebar a.active {
+        background: rgba(14, 165, 233, 0.12);
         color: var(--accent);
-        border-bottom-color: var(--accent);
+        font-weight: 600;
       }
 
       /* ---- Content area ---- */
-      main {
+      .content {
         flex: 1;
         display: flex;
+        flex-direction: column;
+        min-width: 0;
         min-height: 0;
       }
 
-      /* ---- Left sidebar (fake nav items in the host app) ---- */
-      aside {
-        width: 14rem;
-        background: var(--surface);
-        border-right: 1px solid var(--border);
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-        padding: 0.75rem 0.5rem;
+      /* ---- 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;
       }
 
-      aside a {
+      .auth-notice.visible {
         display: flex;
-        align-items: center;
-        gap: 0.6rem;
-        padding: 0.45rem 0.75rem;
-        border-radius: var(--radius);
-        font-size: 0.875rem;
-        color: var(--text-muted);
-        text-decoration: none;
-        transition:
-          background 0.12s,
-          color 0.12s;
       }
 
-      aside a:hover {
-        background: rgba(255, 255, 255, 0.06);
-        color: var(--text);
-      }
-
-      aside a.active {
-        background: rgba(99, 102, 241, 0.15);
-        color: var(--accent);
+      .auth-notice a {
+        color: #b45309;
         font-weight: 600;
       }
 
-      aside .section-label {
-        font-size: 0.7rem;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        color: var(--text-muted);
-        padding: 0.4rem 0.75rem 0.1rem;
-        margin-top: 0.5rem;
+      @media (prefers-color-scheme: dark) {
+        .auth-notice {
+          background: #451a03;
+          color: #fde68a;
+          border-color: #78350f;
+        }
+
+        .auth-notice a {
+          color: #fbbf24;
+        }
       }
 
-      /* ---- iframe panel ---- */
+      /* ---- Panels (iframe wrappers) ---- */
       .panel {
         flex: 1;
         display: none;
-        min-width: 0;
+        min-height: 0;
       }
 
       .panel.visible {
@@ -209,264 +217,161 @@
         flex: 1;
         border: none;
         width: 100%;
-        height: 100%;
-      }
-
-      /* ---- Auth banner ---- */
-      .auth-banner {
-        display: none;
-        background: #7c3aed;
-        color: #fff;
-        font-size: 0.8rem;
-        padding: 0.5rem 1.25rem;
-        gap: 0.5rem;
-        align-items: center;
-        flex-shrink: 0;
-      }
-
-      .auth-banner.visible {
-        display: flex;
-      }
-
-      .auth-banner a {
-        color: #c4b5fd;
-        font-weight: 600;
+        min-height: 0;
       }
 
-      /* ---- Loading overlay ---- */
-      .frame-loading {
+      /* ---- 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;
       }
 
-      @media (max-width: 640px) {
-        aside {
+      .placeholder strong {
+        color: var(--text);
+        font-size: 1rem;
+      }
+
+      @media (max-width: 600px) {
+        .sidebar {
           display: none;
         }
       }
     </style>
   </head>
   <body>
-    <!-- -------------------------------------------------------------------- -->
-    <!-- Top bar: branding for the "host" frontend                             -->
-    <!-- -------------------------------------------------------------------- -->
-    <header>
-      <h1>My Portal</h1>
-      <span class="badge">Demo host frontend</span>
-    </header>
-
-    <!-- -------------------------------------------------------------------- -->
-    <!-- Auth warning: shown when the embedded page is not authenticated       -->
-    <!-- -------------------------------------------------------------------- -->
-    <div class="auth-banner" id="authBanner">
+    <!-- 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 then reload this page.
-      <span id="sameSiteNote" style="display: none">
-        (Cross-origin embedding also requires
-        <code>SameSite=None; Secure</code> on the session cookie — see
-        <strong>TECH_DEBT.md</strong>.)
-      </span>
+      and reload this page.
     </div>
 
-    <!-- -------------------------------------------------------------------- -->
-    <!-- Tab bar: selects which embedded app to show                           -->
-    <!-- -------------------------------------------------------------------- -->
-    <nav>
-      <button class="active" id="tab-home" onclick="showPanel('home')">Home</button>
-      <button id="tab-trino" onclick="showPanel('trino')">SQL Editor</button>
-      <button id="tab-storage" onclick="showPanel('storage')">Storage</button>
-    </nav>
-
-    <!-- -------------------------------------------------------------------- -->
-    <!-- Main content: left sidebar + iframe panels                            -->
-    <!-- -------------------------------------------------------------------- -->
-    <main>
-      <aside>
-        <span class="section-label">Platform</span>
+    <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="#"
-          class="active"
           onclick="
-            showPanel('home');
+            showPanel('overview');
             return false;
           "
+          class="active"
+          id="nav-overview"
+          >Overview</a
         >
-          <!-- Home icon -->
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-          </svg>
-          Dashboard
-        </a>
-
-        <span class="section-label">Data Tools</span>
+        <a href="#" onclick="return false;">Reports</a>
+        <a href="#" onclick="return false;">Alerts</a>
+
+        <span class="sidebar-heading">Data</span>
         <a
           href="#"
-          id="nav-trino"
           onclick="
             showPanel('trino');
             return false;
           "
+          id="nav-trino"
+          >SQL Query</a
         >
-          <!-- Database icon -->
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <path
-              d="M12 3C7.58 3 4 4.79 4 7s3.58 4 8 4 8-1.79 8-4-3.58-4-8-4zm0 14c-4.42 0-8-1.79-8-4v3c0 2.21 3.58 4 8 4s8-1.79 8-4v-3c0 2.21-3.58 4-8 4zm0-5c-4.42 0-8-1.79-8-4v3c0 2.21 3.58 4 8 4s8-1.79 8-4V8c0 2.21-3.58 4-8 4z"
-            />
-          </svg>
-          SQL Editor
-        </a>
         <a
           href="#"
-          id="nav-storage"
           onclick="
             showPanel('storage');
             return false;
           "
+          id="nav-storage"
+          >Object Storage</a
         >
-          <!-- Folder icon -->
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <path
-              d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"
-            />
-          </svg>
-          Storage
-        </a>
-      </aside>
-
-      <!-- Home "page" (fake content, no iframe) -->
-      <div class="panel visible" id="panel-home">
-        <div class="frame-loading" style="flex-direction: column; gap: 1rem">
-          <svg
-            width="48"
-            height="48"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            style="color: #6366f1"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-            />
-          </svg>
-          <div style="text-align: center">
-            <p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem">
-              Welcome to My Portal
-            </p>
-            <p style="color: #94a3b8; max-width: 28rem; line-height: 1.6">
-              This page simulates a host frontend that embeds the
-              <strong>Trino SQL Editor</strong> and the <strong>Storage Browser</strong> from
-              Stackable Cockpit via <code>&lt;iframe&gt;</code>. Click a tab or sidebar link to open
-              an embedded app.
-            </p>
+        <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>
-      </div>
 
-      <!-- Trino SQL Editor iframe -->
-      <div class="panel" id="panel-trino">
-        <iframe id="iframe-trino" title="Trino SQL Editor" allow="clipboard-write"></iframe>
-      </div>
+        <!-- Trino SQL editor — embedded from /embed/trino -->
+        <div class="panel" id="panel-trino">
+          <iframe id="iframe-trino" title="SQL Query (powered by Stackable Cockpit)"></iframe>
+        </div>
 
-      <!-- Storage Browser iframe -->
-      <div class="panel" id="panel-storage">
-        <iframe id="iframe-storage" title="Storage Browser"></iframe>
+        <!-- Storage browser — embedded from /embed/storage -->
+        <div class="panel" id="panel-storage">
+          <iframe
+            id="iframe-storage"
+            title="Object Storage (powered by Stackable Cockpit)"
+          ></iframe>
+        </div>
       </div>
-    </main>
+    </div>
 
     <script>
-      // -----------------------------------------------------------------------
-      // Configuration
-      // -----------------------------------------------------------------------
-
-      // Base URL of the Stackable Cockpit server.
-      // When this demo is served from the same origin (e.g. /embed-demo.html)
-      // leave this as an empty string so relative URLs are used automatically.
-      // For cross-origin embedding set this to the full Cockpit URL, e.g.:
+      // 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 = '';
 
-      // -----------------------------------------------------------------------
-      // State
-      // -----------------------------------------------------------------------
-
-      let activePanel = 'home';
       const iframesLoaded = {};
 
-      // -----------------------------------------------------------------------
-      // Panel switching
-      // -----------------------------------------------------------------------
-
       function showPanel(name) {
-        // Update tab buttons
-        document.querySelectorAll('nav button').forEach((btn) => {
-          btn.classList.toggle('active', btn.id === 'tab-' + name);
-        });
-
-        // Update sidebar links
-        document.querySelectorAll('aside a').forEach((a) => {
-          const target = a.id?.replace('nav-', '');
-          a.classList.toggle('active', target === name || (!target && name === 'home'));
-        });
-
-        // Show/hide panels
         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);
+        });
 
-        // Lazy-load the iframe src the first time the panel is shown
         if ((name === 'trino' || name === 'storage') && !iframesLoaded[name]) {
-          loadIframe(name);
-        }
-
-        activePanel = name;
-      }
-
-      function loadIframe(name) {
-        const iframe = document.getElementById('iframe-' + name);
-        if (!iframe) return;
-
-        const path = name === 'trino' ? '/embed/trino' : '/embed/storage';
-        iframe.src = COCKPIT_BASE_URL + path;
-        iframesLoaded[name] = true;
-
-        // Detect auth redirects: if the iframe navigates to /auth/login the user
-        // is not authenticated on the Cockpit server.
-        iframe.addEventListener('load', function onLoad() {
-          try {
-            const iframePath = iframe.contentWindow?.location?.pathname ?? '';
-            if (iframePath.startsWith('/auth/login') || iframePath.startsWith('/auth/')) {
-              showAuthBanner(name);
+          const iframe = document.getElementById('iframe-' + name);
+          const path = name === 'trino' ? '/embed/trino' : '/embed/storage';
+          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.
             }
-          } catch {
-            // Cross-origin: we cannot read the iframe location.
-            // Show a note about the SameSite cookie requirement.
-            showAuthBanner(name, true);
-          }
-        });
+          });
+        }
       }
 
-      // -----------------------------------------------------------------------
-      // Auth banner
-      // -----------------------------------------------------------------------
-
-      function showAuthBanner(appName, crossOrigin) {
-        const banner = document.getElementById('authBanner');
-        const loginLink = document.getElementById('loginLink');
-        const sameSiteNote = document.getElementById('sameSiteNote');
-
-        loginLink.href = COCKPIT_BASE_URL + '/auth/login';
-        if (crossOrigin) {
-          sameSiteNote.style.display = '';
-        }
-        banner.classList.add('visible');
+      function showAuthNotice() {
+        document.getElementById('loginLink').href = COCKPIT_BASE_URL + '/auth/login';
+        document.getElementById('authNotice').classList.add('visible');
       }
     </script>
   </body>

From 2760dfd0d24bed1d407eab28db469b797d4d7213 Mon Sep 17 00:00:00 2001
From: F3l1x1vo <fli@ordix.de>
Date: Thu, 30 Jul 2026 13:43:11 +0200
Subject: [PATCH 3/4] fix unit tests

---
 .../explorer/__tests__/ContextWrapper.svelte  |  6 +-
 .../storage/landing/BucketGrid.svelte.spec.ts | 22 +++----
 .../landing/StorageConnectForm.svelte.spec.ts | 62 +++++++++----------
 .../__tests__/BucketGridWrapper.svelte        | 14 +++++
 .../__tests__/RecentItemsWrapper.svelte       |  6 +-
 .../StorageConnectFormWrapper.svelte          | 11 ++++
 .../__tests__/BucketListWrapper.svelte        |  6 +-
 7 files changed, 82 insertions(+), 45 deletions(-)
 create mode 100644 src/lib/components/storage/landing/__tests__/BucketGridWrapper.svelte
 create mode 100644 src/lib/components/storage/landing/__tests__/StorageConnectFormWrapper.svelte

diff --git a/src/lib/components/storage/explorer/__tests__/ContextWrapper.svelte b/src/lib/components/storage/explorer/__tests__/ContextWrapper.svelte
index 4e200081..72c30a22 100644
--- a/src/lib/components/storage/explorer/__tests__/ContextWrapper.svelte
+++ b/src/lib/components/storage/explorer/__tests__/ContextWrapper.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { setStorageState } from '$lib/storage/context.js';
+  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
   import type { StorageState } from '$lib/storage/state.svelte.js';
   import type { Snippet } from 'svelte';
 
@@ -10,7 +11,10 @@
   }
 
   let { state, children }: Props = $props();
-  untrack(() => setStorageState(state));
+  untrack(() => {
+    setStorageState(state);
+    setStorageRouteBase(APP_STORAGE_ROUTES);
+  });
 </script>
 
 {@render children()}
diff --git a/src/lib/components/storage/landing/BucketGrid.svelte.spec.ts b/src/lib/components/storage/landing/BucketGrid.svelte.spec.ts
index fb093e5f..eccddff5 100644
--- a/src/lib/components/storage/landing/BucketGrid.svelte.spec.ts
+++ b/src/lib/components/storage/landing/BucketGrid.svelte.spec.ts
@@ -2,22 +2,22 @@ import { page } from 'vitest/browser';
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { faker } from '@faker-js/faker';
-import BucketGrid from './BucketGrid.svelte';
+import BucketGridWrapper from './__tests__/BucketGridWrapper.svelte';
 
 describe('BucketGrid', () => {
   it('should show empty message when no buckets provided', async () => {
-    render(BucketGrid);
+    render(BucketGridWrapper);
     await expect.element(page.getByText('No buckets found')).toBeInTheDocument();
   });
 
   it('should show empty message when buckets array is empty', async () => {
-    render(BucketGrid, { buckets: [] });
+    render(BucketGridWrapper, { buckets: [] });
     await expect.element(page.getByText('No buckets found')).toBeInTheDocument();
   });
 
   it('should render bucket links when buckets are provided', async () => {
     const buckets = ['my-bucket', 'other-bucket'];
-    render(BucketGrid, { buckets });
+    render(BucketGridWrapper, { buckets });
 
     const links = page.getByRole('link');
     await expect.element(links.nth(0)).toBeInTheDocument();
@@ -26,7 +26,7 @@ describe('BucketGrid', () => {
 
   it('should display bucket name in each link', async () => {
     const buckets = ['data-lake', 'backups'];
-    render(BucketGrid, { buckets });
+    render(BucketGridWrapper, { buckets });
 
     await expect.element(page.getByText('data-lake')).toBeInTheDocument();
     await expect.element(page.getByText('backups')).toBeInTheDocument();
@@ -34,7 +34,7 @@ describe('BucketGrid', () => {
 
   it('should encode bucket names in href', async () => {
     const buckets = ['bucket with spaces'];
-    render(BucketGrid, { buckets });
+    render(BucketGridWrapper, { buckets });
 
     const link = page.getByRole('link');
     await expect
@@ -44,7 +44,7 @@ describe('BucketGrid', () => {
 
   it('should handle special characters in bucket names', async () => {
     const buckets = ['my-bucket/special', 'name+plus', 'unicode-ñ-ü'];
-    render(BucketGrid, { buckets });
+    render(BucketGridWrapper, { buckets });
 
     await expect.element(page.getByText('my-bucket/special')).toBeInTheDocument();
     await expect.element(page.getByText('name+plus')).toBeInTheDocument();
@@ -53,7 +53,7 @@ describe('BucketGrid', () => {
 
   it('should have tooltip with bucket name', async () => {
     const buckets = ['tooltip-bucket'];
-    render(BucketGrid, { buckets });
+    render(BucketGridWrapper, { buckets });
 
     const tooltip = page.getByText('tooltip-bucket').element().closest('[data-tip]');
     expect(tooltip?.getAttribute('data-tip')).toBe('tooltip-bucket');
@@ -61,7 +61,7 @@ describe('BucketGrid', () => {
 
   it('should render a large number of buckets', async () => {
     const buckets = Array.from({ length: 100 }, () => faker.string.alphanumeric(10));
-    render(BucketGrid, { buckets });
+    render(BucketGridWrapper, { buckets });
 
     const links = page.getByRole('link');
     await expect.element(links.nth(99)).toBeInTheDocument();
@@ -69,14 +69,14 @@ describe('BucketGrid', () => {
 
   it('should handle very long bucket names', async () => {
     const longName = faker.string.alphanumeric(200);
-    render(BucketGrid, { buckets: [longName] });
+    render(BucketGridWrapper, { buckets: [longName] });
 
     await expect.element(page.getByText(longName)).toBeInTheDocument();
   });
 
   it('should handle unicode bucket names', async () => {
     const buckets = ['日本語バケット', '中文桶', 'émojis-🪣'];
-    render(BucketGrid, { buckets });
+    render(BucketGridWrapper, { buckets });
 
     await expect.element(page.getByText('日本語バケット')).toBeInTheDocument();
     await expect.element(page.getByText('中文桶')).toBeInTheDocument();
diff --git a/src/lib/components/storage/landing/StorageConnectForm.svelte.spec.ts b/src/lib/components/storage/landing/StorageConnectForm.svelte.spec.ts
index 3655e81f..e3c6558c 100644
--- a/src/lib/components/storage/landing/StorageConnectForm.svelte.spec.ts
+++ b/src/lib/components/storage/landing/StorageConnectForm.svelte.spec.ts
@@ -2,10 +2,10 @@ import { page } from 'vitest/browser';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import type { ComponentProps } from 'svelte';
-import StorageConnectForm from './StorageConnectForm.svelte';
+import StorageConnectFormWrapper from './__tests__/StorageConnectFormWrapper.svelte';
 import type { SavedConnection } from '$lib/storage/connection-storage.js';
 
-type ConnectionFormProp = ComponentProps<typeof StorageConnectForm>['connectionForm'];
+type ConnectionFormProp = ComponentProps<typeof StorageConnectFormWrapper>['connectionForm'];
 
 /** Build a minimal StoredConnection fixture with a stable UUID. */
 function makeConn(
@@ -117,14 +117,14 @@ describe('StorageConnectForm', () => {
   });
 
   it('should render the form title and subtitle', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('Connect to Storage')).toBeInTheDocument();
     await expect.element(page.getByText('Enter your connection details')).toBeInTheDocument();
   });
 
   it('should render all form fields with labels', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect.element(page.getByLabelText('Backend type')).toBeInTheDocument();
     await expect.element(page.getByLabelText('Host')).toBeInTheDocument();
@@ -137,7 +137,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should render backend type as a select with S3 option', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     const select = page.getByLabelText('Backend type');
     await expect.element(select).toBeInTheDocument();
@@ -146,28 +146,28 @@ describe('StorageConnectForm', () => {
   });
 
   it('should render host as text input', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     const input = page.getByLabelText('Host');
     await expect.element(input).toHaveAttribute('type', 'text');
   });
 
   it('should render port as number input', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     const input = page.getByLabelText('Port');
     await expect.element(input).toHaveAttribute('type', 'number');
   });
 
   it('should render TLS as a checkbox toggle', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     const toggle = page.getByLabelText('Use TLS');
     await expect.element(toggle).toHaveAttribute('type', 'checkbox');
   });
 
   it('should show verify certificate toggle when TLS is enabled', async () => {
-    render(StorageConnectForm, {
+    render(StorageConnectFormWrapper, {
       connectionForm: createMockForm({ data: { tls: { verification: 'Full' } } })
     });
 
@@ -175,7 +175,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should hide verify certificate toggle when TLS is disabled', async () => {
-    render(StorageConnectForm, {
+    render(StorageConnectFormWrapper, {
       connectionForm: createMockForm({ data: { tls: undefined } })
     });
 
@@ -183,20 +183,20 @@ describe('StorageConnectForm', () => {
   });
 
   it('should render secret key as password input', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     const input = page.getByLabelText('Secret key');
     await expect.element(input).toHaveAttribute('type', 'password');
   });
 
   it('should render connect button', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect.element(page.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
   });
 
   it('should show no saved connections message when none exist', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('No saved connections yet')).toBeInTheDocument();
   });
@@ -212,7 +212,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('minio.example.com:9000').first()).toBeInTheDocument();
   });
@@ -227,7 +227,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect
       .element(page.getByRole('button', { name: 'Forget s3.test.io' }))
@@ -244,7 +244,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     const forgetBtn = page.getByRole('button', { name: 'Forget s3.remove.io' });
     await forgetBtn.click();
@@ -282,7 +282,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('first.example.com').first()).toBeInTheDocument();
     await expect.element(page.getByText('second.example.com:9000').first()).toBeInTheDocument();
@@ -299,20 +299,20 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect.element(page.getByRole('list').first()).toBeInTheDocument();
     await expect.element(page.getByRole('listitem').first()).toBeInTheDocument();
   });
 
   it('should render port hint text', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('Leave blank for default port')).toBeInTheDocument();
   });
 
   it('should render form with POST method', async () => {
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     const form = page.getByRole('button', { name: 'Connect' }).element().closest('form');
     expect(form?.getAttribute('method')).toBe('POST');
@@ -328,7 +328,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await page.getByRole('button', { name: 'Forget s3.cancel.io' }).click();
     await expect
@@ -351,7 +351,7 @@ describe('StorageConnectForm', () => {
     });
     vi.mocked(loadAllConnectionsLocally).mockReturnValue([conn]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await page.getByRole('button', { name: 'Forget s3.forget.io' }).click();
     // After clicking forget, mock returns empty list
@@ -363,7 +363,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display host error when form has host errors', async () => {
-    render(StorageConnectForm, {
+    render(StorageConnectFormWrapper, {
       connectionForm: createMockForm({
         errors: { host: ['Host is required'] }
       })
@@ -376,7 +376,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display region error when form has region errors', async () => {
-    render(StorageConnectForm, {
+    render(StorageConnectFormWrapper, {
       connectionForm: createMockForm({
         errors: { region: { name: ['Region name is required'] } }
       })
@@ -388,7 +388,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display access key error', async () => {
-    render(StorageConnectForm, {
+    render(StorageConnectFormWrapper, {
       connectionForm: createMockForm({
         errors: {
           credentials: { accessKey: ['Access key is required when secret key is provided'] }
@@ -404,7 +404,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display secret key error', async () => {
-    render(StorageConnectForm, {
+    render(StorageConnectFormWrapper, {
       connectionForm: createMockForm({
         errors: {
           credentials: { secretKey: ['Secret key is required when access key is provided'] }
@@ -420,7 +420,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display server message when present', async () => {
-    render(StorageConnectForm, {
+    render(StorageConnectFormWrapper, {
       connectionForm: createMockForm({
         message: 'Connection refused: unable to reach endpoint'
       })
@@ -444,7 +444,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     // Click the saved connection button (first match — mobile card)
     await page.getByRole('button', { name: 's3.select.io:9000', exact: true }).first().click();
@@ -466,13 +466,13 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('Saved connections').first()).toBeInTheDocument();
   });
 
   it('should display multiple field errors simultaneously', async () => {
-    render(StorageConnectForm, {
+    render(StorageConnectFormWrapper, {
       connectionForm: createMockForm({
         errors: {
           host: ['Host is required'],
@@ -503,7 +503,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectForm, { connectionForm: createMockForm() });
+    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
 
     await page.getByRole('button', { name: 'Forget s3.backdrop.io' }).click();
     await expect
diff --git a/src/lib/components/storage/landing/__tests__/BucketGridWrapper.svelte b/src/lib/components/storage/landing/__tests__/BucketGridWrapper.svelte
new file mode 100644
index 00000000..b894957c
--- /dev/null
+++ b/src/lib/components/storage/landing/__tests__/BucketGridWrapper.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
+  import BucketGrid from '../BucketGrid.svelte';
+
+  interface Props {
+    buckets?: string[];
+  }
+
+  let { buckets = [] }: Props = $props();
+  untrack(() => setStorageRouteBase(APP_STORAGE_ROUTES));
+</script>
+
+<BucketGrid {buckets} />
diff --git a/src/lib/components/storage/landing/__tests__/RecentItemsWrapper.svelte b/src/lib/components/storage/landing/__tests__/RecentItemsWrapper.svelte
index 4f3cf0eb..b9532216 100644
--- a/src/lib/components/storage/landing/__tests__/RecentItemsWrapper.svelte
+++ b/src/lib/components/storage/landing/__tests__/RecentItemsWrapper.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { setStorageState } from '$lib/storage/context.js';
+  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
   import type { StorageState } from '$lib/storage/state.svelte.js';
   import RecentItems from '../RecentItems.svelte';
 
@@ -9,7 +10,10 @@
   }
 
   let { state }: Props = $props();
-  untrack(() => setStorageState(state));
+  untrack(() => {
+    setStorageState(state);
+    setStorageRouteBase(APP_STORAGE_ROUTES);
+  });
 </script>
 
 <RecentItems />
diff --git a/src/lib/components/storage/landing/__tests__/StorageConnectFormWrapper.svelte b/src/lib/components/storage/landing/__tests__/StorageConnectFormWrapper.svelte
new file mode 100644
index 00000000..202ae05b
--- /dev/null
+++ b/src/lib/components/storage/landing/__tests__/StorageConnectFormWrapper.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { ComponentProps } from 'svelte';
+  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
+  import StorageConnectForm from '../StorageConnectForm.svelte';
+
+  let { connectionForm }: ComponentProps<typeof StorageConnectForm> = $props();
+  untrack(() => setStorageRouteBase(APP_STORAGE_ROUTES));
+</script>
+
+<StorageConnectForm {connectionForm} />
diff --git a/src/lib/components/storage/sidebar/__tests__/BucketListWrapper.svelte b/src/lib/components/storage/sidebar/__tests__/BucketListWrapper.svelte
index 622b879f..03cbd8cb 100644
--- a/src/lib/components/storage/sidebar/__tests__/BucketListWrapper.svelte
+++ b/src/lib/components/storage/sidebar/__tests__/BucketListWrapper.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { setStorageState } from '$lib/storage/context.js';
+  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
   import type { StorageState } from '$lib/storage/state.svelte.js';
   import BucketList from '../BucketList.svelte';
 
@@ -9,7 +10,10 @@
   }
 
   let { state }: Props = $props();
-  untrack(() => setStorageState(state));
+  untrack(() => {
+    setStorageState(state);
+    setStorageRouteBase(APP_STORAGE_ROUTES);
+  });
 </script>
 
 <BucketList />

From 255490f4239035a87df621adc5dd66eb4e29e128 Mon Sep 17 00:00:00 2001
From: F3l1x1vo <fli@ordix.de>
Date: Fri, 31 Jul 2026 10:38:57 +0200
Subject: [PATCH 4/4] Replace iframe route duplication with embed query
 parameter

Previously the trino and storage browser applications were duplicated
under /embed/* routes just to hide the app shell. Instead, a single
`?embed=1` query parameter now hides the sidebar and header via the
(app) layout, keeping the embed mode sticky across navigations.

The /embed route tree, the storage route-context indirection and the
trino helper duplication are removed; the embed response headers are
now keyed on the query parameter instead of the path prefix.
---
 TECH_DEBT.md                                  |   6 +-
 src/hooks.server.ts                           |  12 +-
 .../explorer/__tests__/ContextWrapper.svelte  |   6 +-
 .../storage/landing/BucketGrid.svelte         |  10 +-
 .../storage/landing/BucketGrid.svelte.spec.ts |  22 +-
 .../storage/landing/RecentItems.svelte        |  12 +-
 .../landing/StorageConnectForm.svelte.spec.ts |  62 +-
 .../__tests__/BucketGridWrapper.svelte        |  14 -
 .../__tests__/RecentItemsWrapper.svelte       |   6 +-
 .../StorageConnectFormWrapper.svelte          |  11 -
 .../storage/sidebar/BucketList.svelte         |  16 +-
 .../sidebar/StorageConnectionSidebar.svelte   |  13 +-
 .../__tests__/BucketListWrapper.svelte        |   6 +-
 src/lib/storage/display-helpers.ts            |  36 +-
 src/lib/storage/route-context.ts              |  46 -
 src/routes/(app)/+layout.svelte               |  79 +-
 src/routes/(app)/api/trino/query/+server.ts   |   2 +-
 src/routes/(app)/storage/+layout.svelte       |   2 -
 src/routes/(app)/trino/+page.server.ts        |   2 +-
 src/routes/(app)/trino/+page.svelte           |   4 +-
 .../(app)}/trino/query-runner.svelte.ts       |   0
 src/{lib => routes/(app)}/trino/validation.ts |   0
 src/routes/embed/+layout.svelte               |  26 -
 src/routes/embed/storage/+error.svelte        |  66 --
 src/routes/embed/storage/+layout.server.ts    |  15 -
 src/routes/embed/storage/+layout.svelte       |  41 -
 src/routes/embed/storage/+layout.ts           |  44 -
 src/routes/embed/storage/+page.server.ts      |  65 --
 src/routes/embed/storage/+page.svelte         |  37 -
 .../[bucket]/[...prefix]/+page.server.ts      |   7 -
 .../storage/[bucket]/[...prefix]/+page.svelte |  84 --
 .../storage/[bucket]/[...prefix]/+page.ts     |  50 -
 .../embed/storage/connections/+page.server.ts |   8 -
 .../embed/storage/connections/+page.svelte    | 195 ----
 .../storage/connections/[id]/+layout.svelte   |  22 -
 .../connections/[id]/edit/+page.server.ts     |  64 --
 .../connections/[id]/edit/+page.svelte        | 366 -------
 src/routes/embed/trino/+page.server.ts        |  55 --
 src/routes/embed/trino/+page.svelte           | 910 ------------------
 static/embed-demo.html                        |   8 +-
 40 files changed, 164 insertions(+), 2266 deletions(-)
 delete mode 100644 src/lib/components/storage/landing/__tests__/BucketGridWrapper.svelte
 delete mode 100644 src/lib/components/storage/landing/__tests__/StorageConnectFormWrapper.svelte
 delete mode 100644 src/lib/storage/route-context.ts
 rename src/{lib => routes/(app)}/trino/query-runner.svelte.ts (100%)
 rename src/{lib => routes/(app)}/trino/validation.ts (100%)
 delete mode 100644 src/routes/embed/+layout.svelte
 delete mode 100644 src/routes/embed/storage/+error.svelte
 delete mode 100644 src/routes/embed/storage/+layout.server.ts
 delete mode 100644 src/routes/embed/storage/+layout.svelte
 delete mode 100644 src/routes/embed/storage/+layout.ts
 delete mode 100644 src/routes/embed/storage/+page.server.ts
 delete mode 100644 src/routes/embed/storage/+page.svelte
 delete mode 100644 src/routes/embed/storage/[bucket]/[...prefix]/+page.server.ts
 delete mode 100644 src/routes/embed/storage/[bucket]/[...prefix]/+page.svelte
 delete mode 100644 src/routes/embed/storage/[bucket]/[...prefix]/+page.ts
 delete mode 100644 src/routes/embed/storage/connections/+page.server.ts
 delete mode 100644 src/routes/embed/storage/connections/+page.svelte
 delete mode 100644 src/routes/embed/storage/connections/[id]/+layout.svelte
 delete mode 100644 src/routes/embed/storage/connections/[id]/edit/+page.server.ts
 delete mode 100644 src/routes/embed/storage/connections/[id]/edit/+page.svelte
 delete mode 100644 src/routes/embed/trino/+page.server.ts
 delete mode 100644 src/routes/embed/trino/+page.svelte

diff --git a/TECH_DEBT.md b/TECH_DEBT.md
index 991b352c..b18ff77a 100644
--- a/TECH_DEBT.md
+++ b/TECH_DEBT.md
@@ -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/lib/trino/query-runner.svelte.ts`, `src/routes/(app)/trino/+page.svelte`, `src/routes/embed/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.
 
@@ -106,7 +106,7 @@ After saving a new connection, the previous query results remain visible until a
 
 ### No validation that the connection target is a Trino instance
 
-**File:** `src/routes/(app)/trino/+page.server.ts`, `src/routes/embed/trino/+page.server.ts`
+**File:** `src/routes/(app)/trino/+page.server.ts`
 
 The query action sends whatever SQL the user provides to the configured connection URL without first verifying that the endpoint is actually a Trino instance. A user could point the URL at any HTTP server, and the app would blindly POST to it. We should validate new connections (e.g. by calling Trino's `/v1/info` endpoint) and reject URLs that do not respond as a Trino server.
 
@@ -126,7 +126,7 @@ Mobile viewport tests (393×851, touch-enabled) are excluded from CI runs to red
 
 **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 `/embed/trino` or `/embed/storage` from an external host page will be silently redirected to `/auth/login`.
+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`:
 
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index a1f6c668..9e7837b4 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -71,10 +71,9 @@ const handleAuthGuard: Handle = async ({ event, resolve }) => {
 const handleStorageConnection: Handle = async ({ event, resolve }) => {
   const routeId = event.route.id ?? '';
   const isAppStorage = routeId.startsWith('/(app)/storage/');
-  const isEmbedStorage = routeId.startsWith('/embed/storage/');
   const isStorageApi = routeId.startsWith('/(app)/api/storage/');
 
-  if ((isAppStorage || isEmbedStorage || isStorageApi) && !storageBrowserEnabled) {
+  if ((isAppStorage || isStorageApi) && !storageBrowserEnabled) {
     throw error(404, 'Storage browser is not enabled');
   }
   event.locals.storageConfig = getConnectionFromHeader(event.request);
@@ -85,19 +84,22 @@ const handleStorageConnection: Handle = async ({ event, resolve }) => {
 };
 
 /**
- * Allow embed routes to be loaded inside <iframe> elements from any origin.
+ * 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 intentional.
+ * 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.pathname.startsWith('/embed/')) {
+  if (event.url.searchParams.get('embed') === '1') {
     response.headers.set('X-Frame-Options', 'ALLOWALL');
     response.headers.set(
       'Content-Security-Policy',
diff --git a/src/lib/components/storage/explorer/__tests__/ContextWrapper.svelte b/src/lib/components/storage/explorer/__tests__/ContextWrapper.svelte
index 72c30a22..4e200081 100644
--- a/src/lib/components/storage/explorer/__tests__/ContextWrapper.svelte
+++ b/src/lib/components/storage/explorer/__tests__/ContextWrapper.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { setStorageState } from '$lib/storage/context.js';
-  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
   import type { StorageState } from '$lib/storage/state.svelte.js';
   import type { Snippet } from 'svelte';
 
@@ -11,10 +10,7 @@
   }
 
   let { state, children }: Props = $props();
-  untrack(() => {
-    setStorageState(state);
-    setStorageRouteBase(APP_STORAGE_ROUTES);
-  });
+  untrack(() => setStorageState(state));
 </script>
 
 {@render children()}
diff --git a/src/lib/components/storage/landing/BucketGrid.svelte b/src/lib/components/storage/landing/BucketGrid.svelte
index 9e507a9c..41cad839 100644
--- a/src/lib/components/storage/landing/BucketGrid.svelte
+++ b/src/lib/components/storage/landing/BucketGrid.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
   import IconBucket from '../shared/BucketIcon.svelte';
   import * as m from '$lib/paraglide/messages.js';
-  import { getStorageRouteBase } from '$lib/storage/route-context.js';
+  import { resolve } from '$app/paths';
 
   interface Props {
     buckets?: string[];
   }
 
   let { buckets = [] }: Props = $props();
-
-  const routes = getStorageRouteBase();
 </script>
 
 {#if buckets.length > 0}
@@ -23,9 +21,11 @@
   >
     {#each buckets as bucket (bucket)}
       <div class="tooltip tooltip-bottom" data-tip={bucket}>
-        <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
         <a
-          href={routes.storageHref(bucket, '')}
+          href={resolve('/(app)/storage/[bucket]/[...prefix]', {
+            bucket: encodeURIComponent(bucket),
+            prefix: ''
+          })}
           data-sveltekit-preload-data="off"
           class="
               border-base-300 bg-base-100 hover:border-primary hover:bg-primary/5 flex flex-col items-center
diff --git a/src/lib/components/storage/landing/BucketGrid.svelte.spec.ts b/src/lib/components/storage/landing/BucketGrid.svelte.spec.ts
index eccddff5..fb093e5f 100644
--- a/src/lib/components/storage/landing/BucketGrid.svelte.spec.ts
+++ b/src/lib/components/storage/landing/BucketGrid.svelte.spec.ts
@@ -2,22 +2,22 @@ import { page } from 'vitest/browser';
 import { describe, expect, it } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import { faker } from '@faker-js/faker';
-import BucketGridWrapper from './__tests__/BucketGridWrapper.svelte';
+import BucketGrid from './BucketGrid.svelte';
 
 describe('BucketGrid', () => {
   it('should show empty message when no buckets provided', async () => {
-    render(BucketGridWrapper);
+    render(BucketGrid);
     await expect.element(page.getByText('No buckets found')).toBeInTheDocument();
   });
 
   it('should show empty message when buckets array is empty', async () => {
-    render(BucketGridWrapper, { buckets: [] });
+    render(BucketGrid, { buckets: [] });
     await expect.element(page.getByText('No buckets found')).toBeInTheDocument();
   });
 
   it('should render bucket links when buckets are provided', async () => {
     const buckets = ['my-bucket', 'other-bucket'];
-    render(BucketGridWrapper, { buckets });
+    render(BucketGrid, { buckets });
 
     const links = page.getByRole('link');
     await expect.element(links.nth(0)).toBeInTheDocument();
@@ -26,7 +26,7 @@ describe('BucketGrid', () => {
 
   it('should display bucket name in each link', async () => {
     const buckets = ['data-lake', 'backups'];
-    render(BucketGridWrapper, { buckets });
+    render(BucketGrid, { buckets });
 
     await expect.element(page.getByText('data-lake')).toBeInTheDocument();
     await expect.element(page.getByText('backups')).toBeInTheDocument();
@@ -34,7 +34,7 @@ describe('BucketGrid', () => {
 
   it('should encode bucket names in href', async () => {
     const buckets = ['bucket with spaces'];
-    render(BucketGridWrapper, { buckets });
+    render(BucketGrid, { buckets });
 
     const link = page.getByRole('link');
     await expect
@@ -44,7 +44,7 @@ describe('BucketGrid', () => {
 
   it('should handle special characters in bucket names', async () => {
     const buckets = ['my-bucket/special', 'name+plus', 'unicode-ñ-ü'];
-    render(BucketGridWrapper, { buckets });
+    render(BucketGrid, { buckets });
 
     await expect.element(page.getByText('my-bucket/special')).toBeInTheDocument();
     await expect.element(page.getByText('name+plus')).toBeInTheDocument();
@@ -53,7 +53,7 @@ describe('BucketGrid', () => {
 
   it('should have tooltip with bucket name', async () => {
     const buckets = ['tooltip-bucket'];
-    render(BucketGridWrapper, { buckets });
+    render(BucketGrid, { buckets });
 
     const tooltip = page.getByText('tooltip-bucket').element().closest('[data-tip]');
     expect(tooltip?.getAttribute('data-tip')).toBe('tooltip-bucket');
@@ -61,7 +61,7 @@ describe('BucketGrid', () => {
 
   it('should render a large number of buckets', async () => {
     const buckets = Array.from({ length: 100 }, () => faker.string.alphanumeric(10));
-    render(BucketGridWrapper, { buckets });
+    render(BucketGrid, { buckets });
 
     const links = page.getByRole('link');
     await expect.element(links.nth(99)).toBeInTheDocument();
@@ -69,14 +69,14 @@ describe('BucketGrid', () => {
 
   it('should handle very long bucket names', async () => {
     const longName = faker.string.alphanumeric(200);
-    render(BucketGridWrapper, { buckets: [longName] });
+    render(BucketGrid, { buckets: [longName] });
 
     await expect.element(page.getByText(longName)).toBeInTheDocument();
   });
 
   it('should handle unicode bucket names', async () => {
     const buckets = ['日本語バケット', '中文桶', 'émojis-🪣'];
-    render(BucketGridWrapper, { buckets });
+    render(BucketGrid, { buckets });
 
     await expect.element(page.getByText('日本語バケット')).toBeInTheDocument();
     await expect.element(page.getByText('中文桶')).toBeInTheDocument();
diff --git a/src/lib/components/storage/landing/RecentItems.svelte b/src/lib/components/storage/landing/RecentItems.svelte
index 99a64a89..58622dfd 100644
--- a/src/lib/components/storage/landing/RecentItems.svelte
+++ b/src/lib/components/storage/landing/RecentItems.svelte
@@ -9,7 +9,6 @@
   import * as m from '$lib/paraglide/messages.js';
   import { formatFileSize } from '$lib/storage/utils.js';
   import { getStorageState } from '$lib/storage/context.js';
-  import { getStorageRouteBase } from '$lib/storage/route-context.js';
   import {
     fileName,
     fileHref,
@@ -22,7 +21,6 @@
   import TimestampDisplay from '$lib/components/storage/shared/TimestampDisplay.svelte';
 
   const storage = getStorageState();
-  const routes = getStorageRouteBase();
 
   type Tab = 'files' | 'locations';
   let activeTab = $state<Tab>('files');
@@ -71,7 +69,7 @@
           <td>
             <!-- eslint-disable svelte/no-navigation-without-resolve -->
             <a
-              href={fileHref(file, routes.storageHref)}
+              href={fileHref(file)}
               data-sveltekit-preload-data="off"
               class="text-base-content/60 hover:text-primary truncate text-xs"
             >
@@ -99,7 +97,7 @@
               <div class="tooltip tooltip-left" data-tip={m.storage_recent_open_folder()}>
                 <!-- eslint-disable svelte/no-navigation-without-resolve -->
                 <a
-                  href={fileHref(file, routes.storageHref)}
+                  href={fileHref(file)}
                   data-sveltekit-preload-data="off"
                   class="btn btn-ghost btn-xs"
                   aria-label="{m.storage_recent_open_folder()} — {fileName(file.key)}"
@@ -138,7 +136,7 @@
               {/if}
               <!-- eslint-disable svelte/no-navigation-without-resolve -->
               <a
-                href={locationHref(loc, routes.storageHref)}
+                href={locationHref(loc)}
                 data-sveltekit-preload-data="off"
                 class="hover:text-primary font-medium">{locationName(loc)}</a
               >
@@ -148,7 +146,7 @@
           <td>
             <!-- eslint-disable svelte/no-navigation-without-resolve -->
             <a
-              href={locationHref(loc, routes.storageHref)}
+              href={locationHref(loc)}
               data-sveltekit-preload-data="off"
               class="text-base-content/60 hover:text-primary truncate text-xs"
             >
@@ -163,7 +161,7 @@
             <div class="tooltip tooltip-left" data-tip={m.storage_recent_go_to_location()}>
               <!-- eslint-disable svelte/no-navigation-without-resolve -->
               <a
-                href={locationHref(loc, routes.storageHref)}
+                href={locationHref(loc)}
                 data-sveltekit-preload-data="off"
                 class="btn btn-ghost btn-xs"
                 aria-label="{m.storage_recent_go_to_location()} — {locationName(loc)}"
diff --git a/src/lib/components/storage/landing/StorageConnectForm.svelte.spec.ts b/src/lib/components/storage/landing/StorageConnectForm.svelte.spec.ts
index e3c6558c..3655e81f 100644
--- a/src/lib/components/storage/landing/StorageConnectForm.svelte.spec.ts
+++ b/src/lib/components/storage/landing/StorageConnectForm.svelte.spec.ts
@@ -2,10 +2,10 @@ import { page } from 'vitest/browser';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { render } from 'vitest-browser-svelte';
 import type { ComponentProps } from 'svelte';
-import StorageConnectFormWrapper from './__tests__/StorageConnectFormWrapper.svelte';
+import StorageConnectForm from './StorageConnectForm.svelte';
 import type { SavedConnection } from '$lib/storage/connection-storage.js';
 
-type ConnectionFormProp = ComponentProps<typeof StorageConnectFormWrapper>['connectionForm'];
+type ConnectionFormProp = ComponentProps<typeof StorageConnectForm>['connectionForm'];
 
 /** Build a minimal StoredConnection fixture with a stable UUID. */
 function makeConn(
@@ -117,14 +117,14 @@ describe('StorageConnectForm', () => {
   });
 
   it('should render the form title and subtitle', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('Connect to Storage')).toBeInTheDocument();
     await expect.element(page.getByText('Enter your connection details')).toBeInTheDocument();
   });
 
   it('should render all form fields with labels', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect.element(page.getByLabelText('Backend type')).toBeInTheDocument();
     await expect.element(page.getByLabelText('Host')).toBeInTheDocument();
@@ -137,7 +137,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should render backend type as a select with S3 option', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     const select = page.getByLabelText('Backend type');
     await expect.element(select).toBeInTheDocument();
@@ -146,28 +146,28 @@ describe('StorageConnectForm', () => {
   });
 
   it('should render host as text input', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     const input = page.getByLabelText('Host');
     await expect.element(input).toHaveAttribute('type', 'text');
   });
 
   it('should render port as number input', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     const input = page.getByLabelText('Port');
     await expect.element(input).toHaveAttribute('type', 'number');
   });
 
   it('should render TLS as a checkbox toggle', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     const toggle = page.getByLabelText('Use TLS');
     await expect.element(toggle).toHaveAttribute('type', 'checkbox');
   });
 
   it('should show verify certificate toggle when TLS is enabled', async () => {
-    render(StorageConnectFormWrapper, {
+    render(StorageConnectForm, {
       connectionForm: createMockForm({ data: { tls: { verification: 'Full' } } })
     });
 
@@ -175,7 +175,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should hide verify certificate toggle when TLS is disabled', async () => {
-    render(StorageConnectFormWrapper, {
+    render(StorageConnectForm, {
       connectionForm: createMockForm({ data: { tls: undefined } })
     });
 
@@ -183,20 +183,20 @@ describe('StorageConnectForm', () => {
   });
 
   it('should render secret key as password input', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     const input = page.getByLabelText('Secret key');
     await expect.element(input).toHaveAttribute('type', 'password');
   });
 
   it('should render connect button', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect.element(page.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
   });
 
   it('should show no saved connections message when none exist', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('No saved connections yet')).toBeInTheDocument();
   });
@@ -212,7 +212,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('minio.example.com:9000').first()).toBeInTheDocument();
   });
@@ -227,7 +227,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect
       .element(page.getByRole('button', { name: 'Forget s3.test.io' }))
@@ -244,7 +244,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     const forgetBtn = page.getByRole('button', { name: 'Forget s3.remove.io' });
     await forgetBtn.click();
@@ -282,7 +282,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('first.example.com').first()).toBeInTheDocument();
     await expect.element(page.getByText('second.example.com:9000').first()).toBeInTheDocument();
@@ -299,20 +299,20 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect.element(page.getByRole('list').first()).toBeInTheDocument();
     await expect.element(page.getByRole('listitem').first()).toBeInTheDocument();
   });
 
   it('should render port hint text', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('Leave blank for default port')).toBeInTheDocument();
   });
 
   it('should render form with POST method', async () => {
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     const form = page.getByRole('button', { name: 'Connect' }).element().closest('form');
     expect(form?.getAttribute('method')).toBe('POST');
@@ -328,7 +328,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await page.getByRole('button', { name: 'Forget s3.cancel.io' }).click();
     await expect
@@ -351,7 +351,7 @@ describe('StorageConnectForm', () => {
     });
     vi.mocked(loadAllConnectionsLocally).mockReturnValue([conn]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await page.getByRole('button', { name: 'Forget s3.forget.io' }).click();
     // After clicking forget, mock returns empty list
@@ -363,7 +363,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display host error when form has host errors', async () => {
-    render(StorageConnectFormWrapper, {
+    render(StorageConnectForm, {
       connectionForm: createMockForm({
         errors: { host: ['Host is required'] }
       })
@@ -376,7 +376,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display region error when form has region errors', async () => {
-    render(StorageConnectFormWrapper, {
+    render(StorageConnectForm, {
       connectionForm: createMockForm({
         errors: { region: { name: ['Region name is required'] } }
       })
@@ -388,7 +388,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display access key error', async () => {
-    render(StorageConnectFormWrapper, {
+    render(StorageConnectForm, {
       connectionForm: createMockForm({
         errors: {
           credentials: { accessKey: ['Access key is required when secret key is provided'] }
@@ -404,7 +404,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display secret key error', async () => {
-    render(StorageConnectFormWrapper, {
+    render(StorageConnectForm, {
       connectionForm: createMockForm({
         errors: {
           credentials: { secretKey: ['Secret key is required when access key is provided'] }
@@ -420,7 +420,7 @@ describe('StorageConnectForm', () => {
   });
 
   it('should display server message when present', async () => {
-    render(StorageConnectFormWrapper, {
+    render(StorageConnectForm, {
       connectionForm: createMockForm({
         message: 'Connection refused: unable to reach endpoint'
       })
@@ -444,7 +444,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     // Click the saved connection button (first match — mobile card)
     await page.getByRole('button', { name: 's3.select.io:9000', exact: true }).first().click();
@@ -466,13 +466,13 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await expect.element(page.getByText('Saved connections').first()).toBeInTheDocument();
   });
 
   it('should display multiple field errors simultaneously', async () => {
-    render(StorageConnectFormWrapper, {
+    render(StorageConnectForm, {
       connectionForm: createMockForm({
         errors: {
           host: ['Host is required'],
@@ -503,7 +503,7 @@ describe('StorageConnectForm', () => {
       })
     ]);
 
-    render(StorageConnectFormWrapper, { connectionForm: createMockForm() });
+    render(StorageConnectForm, { connectionForm: createMockForm() });
 
     await page.getByRole('button', { name: 'Forget s3.backdrop.io' }).click();
     await expect
diff --git a/src/lib/components/storage/landing/__tests__/BucketGridWrapper.svelte b/src/lib/components/storage/landing/__tests__/BucketGridWrapper.svelte
deleted file mode 100644
index b894957c..00000000
--- a/src/lib/components/storage/landing/__tests__/BucketGridWrapper.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
-  import BucketGrid from '../BucketGrid.svelte';
-
-  interface Props {
-    buckets?: string[];
-  }
-
-  let { buckets = [] }: Props = $props();
-  untrack(() => setStorageRouteBase(APP_STORAGE_ROUTES));
-</script>
-
-<BucketGrid {buckets} />
diff --git a/src/lib/components/storage/landing/__tests__/RecentItemsWrapper.svelte b/src/lib/components/storage/landing/__tests__/RecentItemsWrapper.svelte
index b9532216..4f3cf0eb 100644
--- a/src/lib/components/storage/landing/__tests__/RecentItemsWrapper.svelte
+++ b/src/lib/components/storage/landing/__tests__/RecentItemsWrapper.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { setStorageState } from '$lib/storage/context.js';
-  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
   import type { StorageState } from '$lib/storage/state.svelte.js';
   import RecentItems from '../RecentItems.svelte';
 
@@ -10,10 +9,7 @@
   }
 
   let { state }: Props = $props();
-  untrack(() => {
-    setStorageState(state);
-    setStorageRouteBase(APP_STORAGE_ROUTES);
-  });
+  untrack(() => setStorageState(state));
 </script>
 
 <RecentItems />
diff --git a/src/lib/components/storage/landing/__tests__/StorageConnectFormWrapper.svelte b/src/lib/components/storage/landing/__tests__/StorageConnectFormWrapper.svelte
deleted file mode 100644
index 202ae05b..00000000
--- a/src/lib/components/storage/landing/__tests__/StorageConnectFormWrapper.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import type { ComponentProps } from 'svelte';
-  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
-  import StorageConnectForm from '../StorageConnectForm.svelte';
-
-  let { connectionForm }: ComponentProps<typeof StorageConnectForm> = $props();
-  untrack(() => setStorageRouteBase(APP_STORAGE_ROUTES));
-</script>
-
-<StorageConnectForm {connectionForm} />
diff --git a/src/lib/components/storage/sidebar/BucketList.svelte b/src/lib/components/storage/sidebar/BucketList.svelte
index 537ad2ba..5a1de726 100644
--- a/src/lib/components/storage/sidebar/BucketList.svelte
+++ b/src/lib/components/storage/sidebar/BucketList.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
+  import { resolve } from '$app/paths';
   import { beforeNavigate } from '$app/navigation';
   import IconClose from 'virtual:icons/material-symbols/close';
   import IconMoreHoriz from 'virtual:icons/material-symbols/more-horiz';
@@ -11,14 +12,12 @@
   import Modal from '$lib/components/Modal.svelte';
   import * as m from '$lib/paraglide/messages.js';
   import { getStorageState } from '$lib/storage/context.js';
-  import { getStorageRouteBase } from '$lib/storage/route-context.js';
   import type { PinnedLocation, StorageLocation } from '$lib/storage/types.js';
   import { pinnedLabel, pinnedHref } from '$lib/storage/display-helpers.js';
   import { createResizablePanel } from './resizable-panel.svelte.js';
   import ResizeHandle from './ResizeHandle.svelte';
 
   const storage = getStorageState();
-  const routes = getStorageRouteBase();
 
   const resize = createResizablePanel({
     storageKey: 'storage_sidebar_width',
@@ -41,7 +40,7 @@
   // with optional chaining to avoid crashing the layout and escalating the
   // error to the root fallback handler.
   const activeBucket = $derived.by(() => {
-    const match = page.url?.pathname?.match(routes.activeBucketRegex);
+    const match = page.url?.pathname?.match(/^\/storage\/([^/]+)/);
     return match ? decodeURIComponent(match[1]) : null;
   });
   const activePrefix = $derived(page.params.prefix ? page.params.prefix + '/' : '');
@@ -158,7 +157,7 @@
             >
               <!-- eslint-disable svelte/no-navigation-without-resolve -->
               <a
-                href={pinnedHref(pin, routes.storageHref)}
+                href={pinnedHref(pin)}
                 data-sveltekit-preload-data="off"
                 class="
                 hover:bg-base-200 flex w-full min-w-0 items-center gap-2 px-3 py-1.5
@@ -206,7 +205,7 @@
       {m.storage_buckets_label()}
     </span>
     <a
-      href={routes.storageRoot}
+      href={resolve('/storage')}
       data-sveltekit-preload-data="off"
       class="btn btn-ghost btn-xs group tooltip tooltip-right z-150 before:z-200"
       title={m.storage_view_all_buckets()}
@@ -228,7 +227,10 @@
       {#each storage.buckets as bucket (bucket)}
         <li role="none">
           <a
-            href={routes.storageHref(bucket, '')}
+            href={resolve('/(app)/storage/[bucket]/[...prefix]', {
+              bucket: encodeURIComponent(bucket),
+              prefix: ''
+            })}
             data-sveltekit-preload-data="off"
             class="
               hover:bg-base-200 tooltip tooltip-right flex items-center gap-2 px-3
@@ -249,7 +251,7 @@
 
   <!-- Disconnect button -->
   <div class="border-base-300 border-t p-2">
-    <form bind:this={disconnectForm} method="POST" action={routes.disconnectAction}>
+    <form bind:this={disconnectForm} method="POST" action="/storage?/disconnect">
       <button
         type="button"
         class="btn text-base-content/60 btn-ghost btn-xs hover:text-error w-full"
diff --git a/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte b/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte
index 20dbb255..10080e85 100644
--- a/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte
+++ b/src/lib/components/storage/sidebar/StorageConnectionSidebar.svelte
@@ -7,8 +7,8 @@
   import DeleteConnectionModal from '$lib/components/storage/DeleteConnectionModal.svelte';
   import { createResizablePanel } from './resizable-panel.svelte.js';
   import ResizeHandle from './ResizeHandle.svelte';
+  import { resolve } from '$app/paths';
   import * as m from '$lib/paraglide/messages.js';
-  import { getStorageRouteBase } from '$lib/storage/route-context.js';
   import {
     loadAllConnectionsLocally,
     removeConnectionLocally,
@@ -24,8 +24,6 @@
 
   let { activeId, onselect }: Props = $props();
 
-  const routes = getStorageRouteBase();
-
   let allConnections: SavedConnection[] = $state([]);
   let connectionsLoaded = $state(false);
   let forgetCandidate: SavedConnection | null = $state(null);
@@ -117,7 +115,7 @@
   >
     <li role="none">
       <a
-        href={`${routes.connectionsRoot}/${menuConn.id}/edit`}
+        href={resolve(`/storage/connections/${menuConn.id}/edit`)}
         role="menuitem"
         onclick={closeContextMenu}
         class="justify-start"
@@ -190,7 +188,7 @@
       {/each}
     </div>
     <div class="mt-2 text-right">
-      <a href={routes.connectionsRoot} class="link link-primary text-xs">
+      <a href={resolve('/storage/connections')} class="link link-primary text-xs">
         {m.storage_connect_manage()}
       </a>
     </div>
@@ -263,7 +261,10 @@
   </ul>
 
   <div class="border-base-300 border-t p-2">
-    <a href={routes.connectionsRoot} class="btn btn-ghost btn-xs w-full justify-start text-xs">
+    <a
+      href={resolve('/storage/connections')}
+      class="btn btn-ghost btn-xs w-full justify-start text-xs"
+    >
       {m.storage_connect_manage()}
     </a>
   </div>
diff --git a/src/lib/components/storage/sidebar/__tests__/BucketListWrapper.svelte b/src/lib/components/storage/sidebar/__tests__/BucketListWrapper.svelte
index 03cbd8cb..622b879f 100644
--- a/src/lib/components/storage/sidebar/__tests__/BucketListWrapper.svelte
+++ b/src/lib/components/storage/sidebar/__tests__/BucketListWrapper.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { setStorageState } from '$lib/storage/context.js';
-  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
   import type { StorageState } from '$lib/storage/state.svelte.js';
   import BucketList from '../BucketList.svelte';
 
@@ -10,10 +9,7 @@
   }
 
   let { state }: Props = $props();
-  untrack(() => {
-    setStorageState(state);
-    setStorageRouteBase(APP_STORAGE_ROUTES);
-  });
+  untrack(() => setStorageState(state));
 </script>
 
 <BucketList />
diff --git a/src/lib/storage/display-helpers.ts b/src/lib/storage/display-helpers.ts
index 3ef8dde5..d9e4874f 100644
--- a/src/lib/storage/display-helpers.ts
+++ b/src/lib/storage/display-helpers.ts
@@ -2,22 +2,16 @@ import { resolve } from '$app/paths';
 import type { ResolvedPathname } from '$app/types';
 import type { PinnedLocation, RecentFile, RecentLocation } from './types.js';
 
-const APP_STORAGE_ROUTE = '/(app)/storage/[bucket]/[...prefix]' as const;
+const STORAGE_ROUTE = '/(app)/storage/[bucket]/[...prefix]' as const;
 
 // ── URL helpers ──────────────────────────────────────────────────────────────
 
-/**
- * Default (app-route) href for a bucket/prefix. Components that are used in
- * both `(app)/storage` and `embed/storage` should receive a custom `hrefFn`
- * obtained from `getStorageRouteBase().storageHref` so links stay within the
- * correct route tree.
- */
 export function storageHref(bucket: string, prefix: string): ResolvedPathname {
   const encodedBucket = encodeURIComponent(bucket);
   const encodedPrefix = prefix
     ? prefix.replace(/\/$/, '').split('/').map(encodeURIComponent).join('/')
     : '';
-  return resolve(APP_STORAGE_ROUTE, { bucket: encodedBucket, prefix: encodedPrefix });
+  return resolve(STORAGE_ROUTE, { bucket: encodedBucket, prefix: encodedPrefix });
 }
 
 // ── Pinned location helpers ──────────────────────────────────────────────────
@@ -28,11 +22,8 @@ export function pinnedLabel(pin: PinnedLocation): string {
   return parts[parts.length - 1] ?? pin.bucket;
 }
 
-export function pinnedHref(
-  pin: PinnedLocation,
-  hrefFn: (bucket: string, prefix: string) => string = storageHref
-): string {
-  return hrefFn(pin.bucket, pin.prefix);
+export function pinnedHref(pin: PinnedLocation): ResolvedPathname {
+  return storageHref(pin.bucket, pin.prefix);
 }
 
 // ── Recent file helpers ──────────────────────────────────────────────────────
@@ -48,14 +39,14 @@ export function fileLocation(file: RecentFile): string {
   return parts.length > 0 ? `${file.bucket} / ${parts.join(' / ')}` : file.bucket;
 }
 
-export function fileHref(
-  file: RecentFile,
-  hrefFn: (bucket: string, prefix: string) => string = storageHref
-): string {
+export function fileHref(file: RecentFile): ResolvedPathname {
   const parts = file.key.split('/').filter(Boolean);
   parts.pop();
-  // hrefFn encodes each segment internally; pass raw (unencoded) parts joined
-  return hrefFn(file.bucket, parts.join('/'));
+  const encodedPrefix = parts.map(encodeURIComponent).join('/');
+  return resolve(STORAGE_ROUTE, {
+    bucket: encodeURIComponent(file.bucket),
+    prefix: encodedPrefix
+  });
 }
 
 // ── Recent location helpers ──────────────────────────────────────────────────
@@ -72,9 +63,6 @@ export function locationPath(loc: RecentLocation): string {
   return `${loc.bucket} / ${parts.join(' / ')}`;
 }
 
-export function locationHref(
-  loc: RecentLocation,
-  hrefFn: (bucket: string, prefix: string) => string = storageHref
-): string {
-  return hrefFn(loc.bucket, loc.prefix);
+export function locationHref(loc: RecentLocation): ResolvedPathname {
+  return storageHref(loc.bucket, loc.prefix);
 }
diff --git a/src/lib/storage/route-context.ts b/src/lib/storage/route-context.ts
deleted file mode 100644
index c735f7e8..00000000
--- a/src/lib/storage/route-context.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { createContext } from 'svelte';
-import { resolve } from '$app/paths';
-import type { ResolvedPathname } from '$app/types';
-
-export interface StorageRoutes {
-  /** Generate a URL to a bucket/prefix path (raw, unencoded inputs). */
-  storageHref: (bucket: string, prefix: string) => ResolvedPathname;
-  /** Root path for storage, e.g. `/storage` or `/embed/storage`. */
-  storageRoot: string;
-  /** Connections root, e.g. `/storage/connections` or `/embed/storage/connections`. */
-  connectionsRoot: string;
-  /** Form action for disconnect, e.g. `/storage?/disconnect`. */
-  disconnectAction: string;
-  /** Regex to extract the active bucket name from `page.url.pathname`. */
-  activeBucketRegex: RegExp;
-}
-
-function makeStorageHref(
-  route: '/(app)/storage/[bucket]/[...prefix]' | '/embed/storage/[bucket]/[...prefix]'
-) {
-  return (bucket: string, prefix: string): ResolvedPathname => {
-    const encodedBucket = encodeURIComponent(bucket);
-    const encodedPrefix = prefix
-      ? prefix.replace(/\/$/, '').split('/').map(encodeURIComponent).join('/')
-      : '';
-    return resolve(route, { bucket: encodedBucket, prefix: encodedPrefix });
-  };
-}
-
-export const APP_STORAGE_ROUTES: StorageRoutes = {
-  storageHref: makeStorageHref('/(app)/storage/[bucket]/[...prefix]'),
-  storageRoot: '/storage',
-  connectionsRoot: '/storage/connections',
-  disconnectAction: '/storage?/disconnect',
-  activeBucketRegex: /^\/storage\/([^/]+)/
-};
-
-export const EMBED_STORAGE_ROUTES: StorageRoutes = {
-  storageHref: makeStorageHref('/embed/storage/[bucket]/[...prefix]'),
-  storageRoot: '/embed/storage',
-  connectionsRoot: '/embed/storage/connections',
-  disconnectAction: '/embed/storage?/disconnect',
-  activeBucketRegex: /^\/embed\/storage\/([^/]+)/
-};
-
-export const [getStorageRouteBase, setStorageRouteBase] = createContext<StorageRoutes>();
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/src/routes/(app)/api/trino/query/+server.ts b/src/routes/(app)/api/trino/query/+server.ts
index a75b0ee3..e726f836 100644
--- a/src/routes/(app)/api/trino/query/+server.ts
+++ b/src/routes/(app)/api/trino/query/+server.ts
@@ -8,7 +8,7 @@ import {
   removeTabQuery
 } from '$lib/server/trino/queries.js';
 import { resolveTrinoClient } from '$lib/server/trino/client.js';
-import { StatementRequestSchema, TabIdSchema } from '$lib/trino/validation.js';
+import { StatementRequestSchema, TabIdSchema } from '../../../trino/validation.js';
 import type { RequestHandler } from './$types';
 
 export const POST: RequestHandler = async ({ request, locals }) => {
diff --git a/src/routes/(app)/storage/+layout.svelte b/src/routes/(app)/storage/+layout.svelte
index 949da9ee..47be34ba 100644
--- a/src/routes/(app)/storage/+layout.svelte
+++ b/src/routes/(app)/storage/+layout.svelte
@@ -4,7 +4,6 @@
   import BucketList from '$lib/components/storage/sidebar/BucketList.svelte';
   import { StorageState } from '$lib/storage/state.svelte.js';
   import { setStorageState } from '$lib/storage/context.js';
-  import { setStorageRouteBase, APP_STORAGE_ROUTES } from '$lib/storage/route-context.js';
 
   let { children, data } = $props();
 
@@ -17,7 +16,6 @@
       })
   );
   setStorageState(storage);
-  setStorageRouteBase(APP_STORAGE_ROUTES);
 
   // Keep layout-level data in sync when SvelteKit re-runs the load function
   $effect(() => {
diff --git a/src/routes/(app)/trino/+page.server.ts b/src/routes/(app)/trino/+page.server.ts
index fd62b457..38dcb714 100644
--- a/src/routes/(app)/trino/+page.server.ts
+++ b/src/routes/(app)/trino/+page.server.ts
@@ -6,7 +6,7 @@ import { getAllQuerySummaries, cancelQuery } from '$lib/server/trino/queries.js'
 import { trinoConfigured } from '$lib/server/trino/client.js';
 import { completionEnabled } from '$lib/server/feature-flags.js';
 import { createUserTrinoClient, getUserTrinoClient } from '$lib/server/trino/user-clients.js';
-import { ConnectionSchema, type ConnectionMessage } from '$lib/trino/validation.js';
+import { ConnectionSchema, type ConnectionMessage } from './validation.js';
 import type { Actions, PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals }) => {
diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index e445bba8..97db2496 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -7,10 +7,10 @@
   import CatalogBrowser from '$lib/components/catalog/CatalogBrowser.svelte';
   import Modal from '$lib/components/Modal.svelte';
   import { superForm } from 'sveltekit-superforms';
-  import { ConnectionSchema, type ConnectionMessage } from '$lib/trino/validation.js';
+  import { ConnectionSchema, type ConnectionMessage } from './validation.js';
   import TabBar from '$lib/components/TabBar.svelte';
   import { tabStore, MAX_SQL_LENGTH } from '$lib/stores/tab-store.svelte.js';
-  import { getOrCreateQueryRunner, destroyQueryRunner } from '$lib/trino/query-runner.svelte.js';
+  import { getOrCreateQueryRunner, destroyQueryRunner } from './query-runner.svelte.js';
   import { isTerminal } from '$lib/types/query';
   import {
     splitStatements,
diff --git a/src/lib/trino/query-runner.svelte.ts b/src/routes/(app)/trino/query-runner.svelte.ts
similarity index 100%
rename from src/lib/trino/query-runner.svelte.ts
rename to src/routes/(app)/trino/query-runner.svelte.ts
diff --git a/src/lib/trino/validation.ts b/src/routes/(app)/trino/validation.ts
similarity index 100%
rename from src/lib/trino/validation.ts
rename to src/routes/(app)/trino/validation.ts
diff --git a/src/routes/embed/+layout.svelte b/src/routes/embed/+layout.svelte
deleted file mode 100644
index 11eb3ac8..00000000
--- a/src/routes/embed/+layout.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-  import ToastHost from '$lib/components/ToastHost.svelte';
-
-  let { children } = $props();
-</script>
-
-<!--
-  Embed layout: a full-viewport shell with no sidebar or header.
-  All routes under /embed/* use this layout so they can be loaded inside
-  an <iframe> by any host frontend.
-
-  Cross-origin embedding notes:
-  - The session cookie must be SameSite=None; Secure when the embedding page
-    is on a different origin.  Configure this in src/lib/server/auth.ts
-    advanced.cookies before deploying to production.
-  - The embedding page and this server must be on HTTPS for SameSite=None to
-    work (browsers reject SameSite=None without Secure).
-  - See TECH_DEBT.md for the outstanding work item.
--->
-<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>
-
-<ToastHost />
diff --git a/src/routes/embed/storage/+error.svelte b/src/routes/embed/storage/+error.svelte
deleted file mode 100644
index c3fdbcfd..00000000
--- a/src/routes/embed/storage/+error.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/state';
-  import { resolve } from '$app/paths';
-  import IconWarning from 'virtual:icons/material-symbols/warning';
-  import * as m from '$lib/paraglide/messages.js';
-
-  // page.params.bucket may be absent when a client-side universal load throws an
-  // error (the error boundary sits at the parent /embed/storage level, and SvelteKit
-  // may not populate child-route params on the page store in that case).
-  // Fall back to parsing the bucket segment directly from the URL path.
-  const bucket = $derived(
-    page.params.bucket ||
-      decodeURIComponent(page.url?.pathname?.split('/').filter(Boolean)[2] ?? '')
-  );
-
-  function bucketErrorMessage(status: number, name: string): string | null {
-    if (!name) return null;
-    if (status === 403) return m.storage_error_access_denied({ bucket: name });
-    if (status === 404) return m.storage_error_not_found({ bucket: name });
-    if (status === 502) return m.storage_error_storage_error({ bucket: name });
-    return null;
-  }
-
-  const errorMessage = $derived(bucketErrorMessage(page.status, bucket));
-</script>
-
-<div
-  class="
-    flex flex-1 flex-col items-center justify-center gap-6 p-8 text-center
-  "
->
-  <div
-    class="
-      bg-error/10 text-error flex size-20 items-center justify-center
-      rounded-full
-    "
-    aria-hidden="true"
-  >
-    <IconWarning class="size-10" aria-hidden="true" />
-  </div>
-
-  <div>
-    <p
-      class="
-        text-base-content/50 mb-1 text-sm font-medium tracking-widest uppercase
-      "
-    >
-      {m.storage_error_title()}
-    </p>
-    <h1 class="text-base-content text-3xl font-bold">
-      {page.status}
-    </h1>
-    <p class="text-base-content/70 mt-2 max-w-sm text-sm">
-      {errorMessage ?? page.error?.message ?? ''}
-    </p>
-  </div>
-
-  <div class="flex flex-wrap items-center justify-center gap-3">
-    <a href={resolve('/embed/storage')} class="btn btn-sm btn-primary">
-      {m.storage_error_back_to_storage()}
-    </a>
-    <button type="button" class="btn btn-ghost btn-sm" onclick={() => history.back()}>
-      {m.storage_error_go_back()}
-    </button>
-  </div>
-</div>
diff --git a/src/routes/embed/storage/+layout.server.ts b/src/routes/embed/storage/+layout.server.ts
deleted file mode 100644
index 5df88252..00000000
--- a/src/routes/embed/storage/+layout.server.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { LayoutServerLoad } from './$types';
-import { error } from '@sveltejs/kit';
-import { storageBrowserEnabled } from '$lib/server/feature-flags.js';
-
-export const load: LayoutServerLoad = async ({ locals }) => {
-  if (!storageBrowserEnabled) {
-    throw error(404, 'Not found');
-  }
-
-  locals.logger.debug('loading storage layout (embed)');
-
-  // Connected state and bucket list are determined client-side from localStorage
-  // and populated by the universal +layout.ts load after hydration.
-  return { connected: false, buckets: [] as string[], connectionType: null };
-};
diff --git a/src/routes/embed/storage/+layout.svelte b/src/routes/embed/storage/+layout.svelte
deleted file mode 100644
index 895e2d52..00000000
--- a/src/routes/embed/storage/+layout.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import { page } from '$app/state';
-  import BucketList from '$lib/components/storage/sidebar/BucketList.svelte';
-  import { StorageState } from '$lib/storage/state.svelte.js';
-  import { setStorageState } from '$lib/storage/context.js';
-  import { setStorageRouteBase, EMBED_STORAGE_ROUTES } from '$lib/storage/route-context.js';
-
-  let { children, data } = $props();
-
-  const storage = untrack(
-    () =>
-      new StorageState({
-        connected: data.connected,
-        buckets: data.buckets,
-        connectionId: data.connectionId
-      })
-  );
-  setStorageState(storage);
-  setStorageRouteBase(EMBED_STORAGE_ROUTES);
-
-  // Keep layout-level data in sync when SvelteKit re-runs the load function
-  $effect(() => {
-    storage.connected = data.connected;
-    storage.buckets = data.buckets;
-  });
-
-  // Connections management pages have their own full-page layout — no sidebar.
-  const isConnectionsRoute = $derived(page.url.pathname.startsWith('/embed/storage/connections'));
-</script>
-
-{#if data.connected && !isConnectionsRoute}
-  <div class="flex h-full min-h-0 gap-4">
-    <BucketList />
-    <div class="flex min-w-0 flex-1 flex-col">
-      {@render children()}
-    </div>
-  </div>
-{:else}
-  {@render children()}
-{/if}
diff --git a/src/routes/embed/storage/+layout.ts b/src/routes/embed/storage/+layout.ts
deleted file mode 100644
index 2f159430..00000000
--- a/src/routes/embed/storage/+layout.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { browser } from '$app/environment';
-import { loadConnectionLocally, getConnectionHeader } from '$lib/storage/connection-storage.js';
-import type { LayoutLoad } from './$types';
-
-const DISCONNECTED = {
-  connected: false,
-  buckets: [] as string[],
-  connectionType: null
-};
-
-/**
- * Client-side load: reads the connection from localStorage and fetches the bucket
- * list from the server. During SSR this returns the disconnected default — the
- * layout re-runs on the client after hydration to populate the real state.
- */
-export const load: LayoutLoad = async ({ fetch, url }) => {
-  if (!browser) return DISCONNECTED;
-
-  // When the user has just explicitly disconnected, skip the auto-reconnect.
-  if (url.searchParams.has('disconnected')) return DISCONNECTED;
-
-  const connection = loadConnectionLocally();
-  if (!connection) return DISCONNECTED;
-
-  const header = getConnectionHeader(connection);
-
-  try {
-    const res = await fetch('/api/storage/buckets', {
-      headers: { 'x-storage-connection': header }
-    });
-
-    if (!res.ok) return DISCONNECTED;
-
-    const buckets = (await res.json()) as string[];
-    return {
-      connected: true,
-      buckets,
-      connectionType: connection.type,
-      connectionId: connection.id
-    };
-  } catch {
-    return DISCONNECTED;
-  }
-};
diff --git a/src/routes/embed/storage/+page.server.ts b/src/routes/embed/storage/+page.server.ts
deleted file mode 100644
index 49c9c449..00000000
--- a/src/routes/embed/storage/+page.server.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { fail, redirect } from '@sveltejs/kit';
-import { superValidate, message } from 'sveltekit-superforms';
-import { zod4 as zod } from 'sveltekit-superforms/adapters';
-import type { Actions, PageServerLoad } from './$types';
-import { StorageConnectionSchema } from '$lib/storage/schemas.js';
-import { listBuckets } from '$lib/server/storage/service.js';
-import type { S3ConnectionConfig } from '$lib/server/storage/types.js';
-
-export const load: PageServerLoad = async ({ locals }) => {
-  const connectionForm = await superValidate(
-    { tls: { verification: 'Full' } },
-    zod(StorageConnectionSchema),
-    { errors: false }
-  );
-  locals.logger.debug('loading storage page (embed)');
-  return { connectionForm };
-};
-
-export const actions: Actions = {
-  connect: async ({ request, locals }) => {
-    const log = locals.logger;
-    const form = await superValidate(request, zod(StorageConnectionSchema));
-
-    if (!form.valid) {
-      log.debug({ errors: form.errors }, 'storage connection form validation failed');
-      return fail(400, { form });
-    }
-
-    const { type, host, port, tls, accessStyle, region, credentials } = form.data;
-
-    if (type !== 's3') {
-      return message(form, 'HDFS connections are not yet supported', { status: 400 });
-    }
-
-    const resolvedCredentials =
-      credentials.accessKey && credentials.secretKey ? credentials : undefined;
-
-    const config: S3ConnectionConfig = {
-      type: 's3',
-      host,
-      port,
-      tls,
-      accessStyle,
-      region,
-      credentials: resolvedCredentials
-    };
-
-    try {
-      await listBuckets(config);
-      log.info({ storage_type: type }, 'user storage connection verified');
-    } catch (err) {
-      log.warn({ err }, 'storage connection test failed');
-      return message(form, 'Could not connect — check the endpoint and credentials.', {
-        status: 400
-      });
-    }
-
-    throw redirect(303, '/embed/storage');
-  },
-
-  disconnect: async ({ locals }) => {
-    locals.logger.info('user storage connection cleared');
-    throw redirect(303, '/embed/storage?disconnected=1');
-  }
-};
diff --git a/src/routes/embed/storage/+page.svelte b/src/routes/embed/storage/+page.svelte
deleted file mode 100644
index 47b44f51..00000000
--- a/src/routes/embed/storage/+page.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { navigating } from '$app/state';
-  import * as m from '$lib/paraglide/messages.js';
-  import { getStorageState } from '$lib/storage/context.js';
-  import BucketGrid from '$lib/components/storage/landing/BucketGrid.svelte';
-  import StorageConnectForm from '$lib/components/storage/landing/StorageConnectForm.svelte';
-  import RecentItems from '$lib/components/storage/landing/RecentItems.svelte';
-
-  let { data } = $props();
-  const storage = getStorageState();
-
-  let mounted = $state(false);
-  onMount(() => {
-    mounted = true;
-  });
-</script>
-
-{#if data.connected}
-  <div class="relative flex h-full min-h-0 flex-col overflow-hidden p-2">
-    {#if navigating?.to?.url.pathname.startsWith('/embed/storage/')}
-      <div
-        class="bg-base-100/70 absolute inset-0 z-10 flex items-center justify-center rounded-xl"
-        aria-live="polite"
-        aria-label={m.storage_loading()}
-      >
-        <span class="loading loading-md loading-spinner text-primary" aria-hidden="true"></span>
-      </div>
-    {/if}
-    <h1 class="mb-1 text-xl font-semibold">{m.storage_buckets_label()}</h1>
-    <p class="text-base-content/60 mb-6 text-sm">{m.storage_buckets_subtitle()}</p>
-    <BucketGrid buckets={storage.buckets} />
-    <RecentItems />
-  </div>
-{:else if mounted}
-  <StorageConnectForm connectionForm={data.connectionForm} />
-{/if}
diff --git a/src/routes/embed/storage/[bucket]/[...prefix]/+page.server.ts b/src/routes/embed/storage/[bucket]/[...prefix]/+page.server.ts
deleted file mode 100644
index 32a557c6..00000000
--- a/src/routes/embed/storage/[bucket]/[...prefix]/+page.server.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ params }) => {
-  const prefix = params.prefix ? params.prefix + '/' : '';
-  const bucket = params.bucket;
-  return { bucket, prefix };
-};
diff --git a/src/routes/embed/storage/[bucket]/[...prefix]/+page.svelte b/src/routes/embed/storage/[bucket]/[...prefix]/+page.svelte
deleted file mode 100644
index e7781ca1..00000000
--- a/src/routes/embed/storage/[bucket]/[...prefix]/+page.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import { resolve } from '$app/paths';
-  import { getStorageState } from '$lib/storage/context.js';
-  import FileExplorer from '$lib/components/storage/explorer/FileExplorer.svelte';
-  import IconWarning from 'virtual:icons/material-symbols/warning';
-  import * as m from '$lib/paraglide/messages.js';
-
-  let { data } = $props();
-  const storage = getStorageState();
-
-  // Inject navigation handler — page owns URL construction
-  storage.setNavigationHandler((prefix, continuationToken, pageSize) => {
-    const encodedPrefix = prefix
-      ? prefix.replace(/\/$/, '').split('/').map(encodeURIComponent).join('/')
-      : '';
-
-    const basePath = resolve('/embed/storage/[bucket]/[...prefix]', {
-      bucket: encodeURIComponent(data.bucket),
-      prefix: encodedPrefix
-    });
-
-    const url = new URL(basePath, location.origin);
-    if (continuationToken) url.searchParams.set('continuationToken', String(continuationToken));
-    if (pageSize) url.searchParams.set('pageSize', String(pageSize));
-
-    // eslint-disable-next-line svelte/no-navigation-without-resolve -- base path is built with resolve(); URL object is needed to append query params
-    goto(url, { replaceState: false });
-  });
-
-  // Sync server data into state whenever SvelteKit load runs
-  $effect(() => {
-    storage.syncFromServer(data.bucket, data.prefix, data.objects);
-  });
-</script>
-
-{#if data.accessDenied}
-  <!--
-    403 is rendered inline rather than via +error.svelte because throwing from a
-    universal load during initial hydration (when data.connected=true causes
-    BucketList to mount) can escape the storage error boundary and fall through
-    to the root fallback. Rendering inline keeps the sidebar visible.
-  -->
-  <div
-    class="
-      flex flex-1 flex-col items-center justify-center gap-6 p-8 text-center
-    "
-  >
-    <div
-      class="
-        bg-error/10 text-error flex size-20 items-center justify-center
-        rounded-full
-      "
-      aria-hidden="true"
-    >
-      <IconWarning class="size-10" aria-hidden="true" />
-    </div>
-
-    <div>
-      <p
-        class="
-          text-base-content/50 mb-1 text-sm font-medium tracking-widest uppercase
-        "
-      >
-        {m.storage_error_title()}
-      </p>
-      <h1 class="text-base-content text-3xl font-bold">403</h1>
-      <p class="text-base-content/70 mt-2 max-w-sm text-sm">
-        {m.storage_error_access_denied({ bucket: data.bucket })}
-      </p>
-    </div>
-
-    <div class="flex flex-wrap items-center justify-center gap-3">
-      <a href={resolve('/embed/storage')} class="btn btn-sm btn-primary">
-        {m.storage_error_back_to_storage()}
-      </a>
-      <button type="button" class="btn btn-ghost btn-sm" onclick={() => history.back()}>
-        {m.storage_error_go_back()}
-      </button>
-    </div>
-  </div>
-{:else}
-  <FileExplorer />
-{/if}
diff --git a/src/routes/embed/storage/[bucket]/[...prefix]/+page.ts b/src/routes/embed/storage/[bucket]/[...prefix]/+page.ts
deleted file mode 100644
index 3eb2b99f..00000000
--- a/src/routes/embed/storage/[bucket]/[...prefix]/+page.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { browser } from '$app/environment';
-import { error, redirect } from '@sveltejs/kit';
-import { loadConnectionLocally, getConnectionHeader } from '$lib/storage/connection-storage.js';
-import type { PageLoad } from './$types';
-import type { StoragePage } from '$lib/storage/types.js';
-
-const EMPTY_PAGE: StoragePage = {
-  objects: [],
-  hasNextPage: false,
-  currentPage: 1,
-  pageSize: 25
-};
-
-/**
- * Client-side load: fetches the object list from the server using the connection
- * config from localStorage. Redirects to /embed/storage if no connection is available.
- * During SSR this returns an empty page — the load re-runs on the client.
- */
-export const load: PageLoad = async ({ fetch, url, data }) => {
-  // Always pass server data through so PageData includes bucket/prefix.
-  const { bucket, prefix } = data;
-
-  if (!browser) return { bucket, prefix, objects: EMPTY_PAGE };
-
-  const connection = loadConnectionLocally();
-  if (!connection) throw redirect(303, '/embed/storage');
-
-  const continuationToken = url.searchParams.get('continuationToken');
-  const pageSizeParam = url.searchParams.get('pageSize');
-
-  const query = new URLSearchParams({ bucket, prefix: prefix ?? '' });
-  if (continuationToken) query.set('continuationToken', continuationToken);
-  if (pageSizeParam) query.set('pageSize', pageSizeParam);
-
-  const res = await fetch(`/api/storage/objects?${query}`, {
-    headers: { 'x-storage-connection': getConnectionHeader(connection) }
-  });
-
-  if (!res.ok) {
-    if (res.status === 401) throw redirect(303, '/embed/storage');
-    // For 403 we return an accessDenied flag rather than throwing error().
-    if (res.status === 403)
-      return { bucket, prefix, objects: EMPTY_PAGE, accessDenied: true as const };
-    const body = (await res.json().catch(() => ({}))) as { message?: string };
-    throw error(res.status, body.message ?? 'Failed to load objects');
-  }
-
-  const objects = (await res.json()) as StoragePage;
-  return { bucket, prefix, objects };
-};
diff --git a/src/routes/embed/storage/connections/+page.server.ts b/src/routes/embed/storage/connections/+page.server.ts
deleted file mode 100644
index cf837762..00000000
--- a/src/routes/embed/storage/connections/+page.server.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { PageServerLoad } from './$types';
-
-// The connections list is managed entirely in localStorage on the client.
-// The server only provides an empty shell so the route is authenticated.
-export const load: PageServerLoad = async ({ locals }) => {
-  locals.logger.debug('loading storage connections management page');
-  return {};
-};
diff --git a/src/routes/embed/storage/connections/+page.svelte b/src/routes/embed/storage/connections/+page.svelte
deleted file mode 100644
index 0db2fb7d..00000000
--- a/src/routes/embed/storage/connections/+page.svelte
+++ /dev/null
@@ -1,195 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { resolve } from '$app/paths';
-  import IconStorage from 'virtual:icons/material-symbols/storage';
-  import IconEdit from 'virtual:icons/material-symbols/edit';
-  import IconDelete from 'virtual:icons/material-symbols/delete';
-  import IconMoreHoriz from 'virtual:icons/material-symbols/more-horiz';
-  import IconArrowBack from 'virtual:icons/material-symbols/arrow-back';
-  import * as m from '$lib/paraglide/messages.js';
-  import {
-    loadAllConnectionsLocally,
-    removeConnectionById,
-    type SavedConnection
-  } from '$lib/storage/connection-storage.js';
-  import DeleteConnectionModal from '$lib/components/storage/DeleteConnectionModal.svelte';
-
-  let connections = $state<SavedConnection[]>([]);
-  let loaded = $state(false);
-  let deleteCandidate = $state<SavedConnection | null>(null);
-  let deleteModalOpen = $state(false);
-
-  // Context menu
-  let menuConn: SavedConnection | null = $state(null);
-  let menuEl: HTMLUListElement | null = $state(null);
-  let menuRawPos = $state({ left: 0, top: 0 });
-
-  const menuPos = $derived.by(() => {
-    if (!menuConn) return { left: 0, top: 0 };
-    if (!menuEl) return menuRawPos;
-    const rect = menuEl.getBoundingClientRect();
-    return {
-      left:
-        menuRawPos.left + rect.width > window.innerWidth
-          ? menuRawPos.left - rect.width
-          : menuRawPos.left,
-      top:
-        menuRawPos.top + rect.height > window.innerHeight
-          ? menuRawPos.top - rect.height
-          : menuRawPos.top
-    };
-  });
-
-  onMount(() => {
-    connections = loadAllConnectionsLocally();
-    loaded = true;
-  });
-
-  function connectionLabel(conn: SavedConnection): string {
-    if (conn.name) return conn.name;
-    return conn.port ? `${conn.host}:${conn.port}` : conn.host;
-  }
-
-  function openContextMenu(e: MouseEvent, conn: SavedConnection) {
-    e.preventDefault();
-    e.stopPropagation();
-    menuRawPos = { left: e.clientX, top: e.clientY };
-    menuConn = conn;
-  }
-
-  function closeContextMenu() {
-    menuConn = null;
-  }
-
-  function handleOutsideClick(e: MouseEvent) {
-    if (menuConn && menuEl && !menuEl.contains(e.target as Node)) closeContextMenu();
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (menuConn && e.key === 'Escape') closeContextMenu();
-  }
-
-  function requestDelete(conn: SavedConnection) {
-    closeContextMenu();
-    deleteCandidate = conn;
-    deleteModalOpen = true;
-  }
-
-  function confirmDelete() {
-    if (!deleteCandidate) return;
-    removeConnectionById(deleteCandidate.id);
-    connections = loadAllConnectionsLocally();
-    deleteModalOpen = false;
-    deleteCandidate = null;
-  }
-
-  function cancelDelete() {
-    deleteModalOpen = false;
-    deleteCandidate = null;
-  }
-</script>
-
-<svelte:document onclick={handleOutsideClick} />
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="mx-auto max-w-4xl p-6">
-  <a href={resolve('/embed/storage') + '?disconnected=1'} class="btn btn-ghost btn-sm mb-4 -ml-2">
-    <IconArrowBack class="size-4" aria-hidden="true" />
-    {m.storage_connections_back()}
-  </a>
-
-  <h1 class="mb-1 text-xl font-semibold">{m.storage_connections_title()}</h1>
-  <p class="text-base-content/60 mb-6 text-sm">{m.storage_connections_subtitle()}</p>
-
-  {#if !loaded}
-    <div class="flex items-center justify-center py-12">
-      <span class="loading loading-spinner loading-md text-base-content/40"></span>
-    </div>
-  {:else if connections.length === 0}
-    <p class="text-base-content/50 text-sm">{m.storage_connections_empty()}</p>
-  {:else}
-    <div class="overflow-x-auto">
-      <table class="table-sm table">
-        <thead>
-          <tr>
-            <th>{m.storage_connections_col_name()}</th>
-            <th>{m.storage_connections_col_host()}</th>
-            <th>{m.storage_connections_col_type()}</th>
-            <th class="w-10"></th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each connections as conn (conn.id)}
-            <tr
-              class="group hover:bg-base-300 cursor-default select-none"
-              class:outline={menuConn?.id === conn.id}
-              class:bg-base-200={menuConn?.id === conn.id}
-              oncontextmenu={(e) => openContextMenu(e, conn)}
-            >
-              <td>
-                <div class="flex items-center gap-2">
-                  <IconStorage class="text-primary size-4 shrink-0" aria-hidden="true" />
-                  <span class="font-medium">{connectionLabel(conn)}</span>
-                </div>
-              </td>
-              <td class="text-base-content/60 font-mono text-xs">
-                {conn.port ? `${conn.host}:${conn.port}` : conn.host}
-              </td>
-              <td class="text-base-content/60 text-xs uppercase">{conn.type}</td>
-              <td>
-                <button
-                  type="button"
-                  class="btn btn-ghost btn-xs btn-square opacity-0 group-hover:opacity-100"
-                  aria-label={m.storage_connections_options({ label: connectionLabel(conn) })}
-                  onclick={(e) => openContextMenu(e, conn)}
-                >
-                  <IconMoreHoriz class="size-4" aria-hidden="true" />
-                </button>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
-  {/if}
-</div>
-
-<!-- Context menu (right-click or ⋯ button) -->
-{#if menuConn}
-  <ul
-    bind:this={menuEl}
-    class="menu menu-sm border-base-300 bg-base-100 fixed z-50 w-36 rounded-lg border p-1 shadow-lg"
-    role="menu"
-    tabindex="-1"
-    style="left: {menuPos.left}px; top: {menuPos.top}px;"
-  >
-    <li role="none">
-      <a
-        href={resolve(`/embed/storage/connections/${menuConn.id}/edit`)}
-        role="menuitem"
-        onclick={closeContextMenu}
-      >
-        <IconEdit class="size-4 shrink-0" aria-hidden="true" />
-        {m.storage_connections_edit()}
-      </a>
-    </li>
-    <li role="none">
-      <button
-        type="button"
-        role="menuitem"
-        class="text-error"
-        onclick={() => requestDelete(menuConn!)}
-      >
-        <IconDelete class="size-4 shrink-0" aria-hidden="true" />
-        {m.storage_connections_delete()}
-      </button>
-    </li>
-  </ul>
-{/if}
-
-<DeleteConnectionModal
-  bind:open={deleteModalOpen}
-  connection={deleteCandidate}
-  onconfirm={confirmDelete}
-  oncancel={cancelDelete}
-/>
diff --git a/src/routes/embed/storage/connections/[id]/+layout.svelte b/src/routes/embed/storage/connections/[id]/+layout.svelte
deleted file mode 100644
index 157f1255..00000000
--- a/src/routes/embed/storage/connections/[id]/+layout.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import { resolve } from '$app/paths';
-  import { page } from '$app/state';
-  import StorageConnectionSidebar from '$lib/components/storage/sidebar/StorageConnectionSidebar.svelte';
-  import type { SavedConnection } from '$lib/storage/connection-storage.js';
-
-  let { children } = $props();
-
-  const connectionId = $derived(page.params.id);
-
-  function handleSelect(conn: SavedConnection) {
-    goto(resolve(`/embed/storage/connections/${conn.id}/edit`));
-  }
-</script>
-
-<div class="flex flex-col gap-4 md:flex-row md:items-start">
-  <StorageConnectionSidebar activeId={connectionId} onselect={handleSelect} />
-  <div class="min-w-0 flex-1">
-    {@render children()}
-  </div>
-</div>
diff --git a/src/routes/embed/storage/connections/[id]/edit/+page.server.ts b/src/routes/embed/storage/connections/[id]/edit/+page.server.ts
deleted file mode 100644
index 534a4c56..00000000
--- a/src/routes/embed/storage/connections/[id]/edit/+page.server.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { fail } from '@sveltejs/kit';
-import { superValidate, message } from 'sveltekit-superforms';
-import { zod4 as zod } from 'sveltekit-superforms/adapters';
-import type { Actions, PageServerLoad } from './$types';
-import { EditStorageConnectionSchema } from '$lib/storage/schemas.js';
-import { listBuckets } from '$lib/server/storage/service.js';
-import type { S3ConnectionConfig } from '$lib/server/storage/types.js';
-
-export const load: PageServerLoad = async ({ locals }) => {
-  const editForm = await superValidate(
-    { tls: { verification: 'Full' } },
-    zod(EditStorageConnectionSchema),
-    { errors: false }
-  );
-  locals.logger.debug('loading storage connection edit page');
-  return { editForm };
-};
-
-export const actions: Actions = {
-  update: async ({ request, locals }) => {
-    const log = locals.logger;
-    const form = await superValidate(request, zod(EditStorageConnectionSchema));
-
-    if (!form.valid) {
-      log.debug({ errors: form.errors }, 'storage connection edit form validation failed');
-      return fail(400, { form });
-    }
-
-    const { type, host, port, tls, accessStyle, region, credentials } = form.data;
-
-    if (type !== 's3') {
-      return message(form, 'HDFS connections are not yet supported', { status: 400 });
-    }
-
-    const resolvedCredentials =
-      credentials.accessKey && credentials.secretKey ? credentials : undefined;
-
-    const config: S3ConnectionConfig = {
-      type: 's3',
-      host,
-      port,
-      tls,
-      accessStyle,
-      region,
-      credentials: resolvedCredentials
-    };
-
-    // If no credentials were submitted the user chose to keep the existing ones,
-    // so skip the live connection test (it was already verified when first saved).
-    if (resolvedCredentials) {
-      try {
-        await listBuckets(config);
-        log.info({ storage_type: type }, 'storage connection edit verified');
-      } catch (err) {
-        log.warn({ err }, 'storage connection edit test failed');
-        return message(form, 'Could not connect — check the endpoint and credentials.', {
-          status: 400
-        });
-      }
-    }
-
-    return message(form, 'ok');
-  }
-};
diff --git a/src/routes/embed/storage/connections/[id]/edit/+page.svelte b/src/routes/embed/storage/connections/[id]/edit/+page.svelte
deleted file mode 100644
index 7d1c7ab6..00000000
--- a/src/routes/embed/storage/connections/[id]/edit/+page.svelte
+++ /dev/null
@@ -1,366 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { goto, beforeNavigate } from '$app/navigation';
-  import { resolve } from '$app/paths';
-  import { page } from '$app/state';
-  import { superForm } from 'sveltekit-superforms';
-  import { zod4 as zod } from 'sveltekit-superforms/adapters';
-  import { untrack } from 'svelte';
-  import IconInfo from 'virtual:icons/material-symbols/info';
-  import * as m from '$lib/paraglide/messages.js';
-  import Modal from '$lib/components/Modal.svelte';
-  import { EditStorageConnectionSchema } from '$lib/storage/schemas.js';
-  import {
-    loadConnectionById,
-    loadConnectionLocally,
-    updateConnectionLocally,
-    type SavedConnection
-  } from '$lib/storage/connection-storage.js';
-
-  let { data } = $props();
-
-  const uid = $props.id();
-
-  // Loaded client-side from localStorage
-  let connection = $state<SavedConnection | null>(null);
-  let loaded = $state(false);
-  let isActiveConnection = $state(false);
-
-  // Unsaved-changes guard
-  let initialSnapshot = $state.raw('');
-  let confirmLeaveOpen = $state(false);
-  let pendingNavigation = $state<string | null>(null);
-  // Set to true just before a programmatic goto so beforeNavigate doesn't re-intercept it.
-  let bypassDirtyCheck = false;
-
-  // Extract the id from the URL via SvelteKit's page state
-  const connectionId = page.params.id;
-
-  const { form, errors, enhance, submitting, message } = superForm(
-    untrack(() => data.editForm),
-    {
-      dataType: 'json',
-      validators: zod(EditStorageConnectionSchema),
-      onResult: ({ result, cancel }) => {
-        if (result.type === 'success' && result.data?.form?.message === 'ok') {
-          if (connection) {
-            // If credentials were left blank, preserve the existing stored credentials.
-            const savedCredentials =
-              $form.credentials.accessKey && $form.credentials.secretKey
-                ? $form.credentials
-                : (connection.credentials ?? { accessKey: '', secretKey: '' });
-            updateConnectionLocally(connection.id, { ...$form, credentials: savedCredentials });
-          }
-          // Prevent superforms from resetting the form and calling invalidateAll(),
-          // which would race with the navigation.
-          cancel();
-          // Bypass the dirty-check guard so the post-save redirect isn't intercepted.
-          bypassDirtyCheck = true;
-          goto(resolve('/embed/storage/connections'));
-        }
-      }
-    }
-  );
-
-  function isFormDirty(): boolean {
-    return loaded && !!initialSnapshot && JSON.stringify($form) !== initialSnapshot;
-  }
-
-  onMount(() => {
-    if (!connectionId) {
-      goto(resolve('/embed/storage/connections'));
-      return;
-    }
-    const found = loadConnectionById(connectionId);
-    if (!found) {
-      goto(resolve('/embed/storage/connections'));
-      return;
-    }
-    connection = found;
-
-    // Pre-fill form with current values
-    $form.id = found.id;
-    $form.name = found.name ?? '';
-    $form.type = found.type;
-    $form.host = found.host;
-    $form.port = found.port;
-    $form.tls = found.tls;
-    $form.accessStyle = found.accessStyle;
-    $form.region = found.region;
-    // Pre-fill access key but never expose the stored secret key.
-    $form.credentials = { accessKey: found.credentials?.accessKey ?? '', secretKey: '' };
-
-    // Check if this is the currently active connection
-    const active = loadConnectionLocally();
-    isActiveConnection = active?.id === found.id;
-
-    // Snapshot the pre-filled form so we can detect unsaved changes.
-    initialSnapshot = JSON.stringify($form);
-    loaded = true;
-  });
-
-  beforeNavigate(({ cancel: cancelNav, to }) => {
-    if (!bypassDirtyCheck && isFormDirty() && to?.url) {
-      cancelNav();
-      pendingNavigation = to.url.pathname + to.url.search + to.url.hash;
-      confirmLeaveOpen = true;
-    }
-  });
-
-  function confirmLeave() {
-    const dest = pendingNavigation!;
-    confirmLeaveOpen = false;
-    pendingNavigation = null;
-    bypassDirtyCheck = true;
-    goto(dest);
-  }
-
-  function cancelLeave() {
-    confirmLeaveOpen = false;
-    pendingNavigation = null;
-  }
-
-  function handleBeforeUnload(e: BeforeUnloadEvent) {
-    if (isFormDirty()) {
-      e.preventDefault();
-    }
-  }
-
-  function parseHostInput() {
-    const v = $form.host?.trim();
-    if (!v?.includes('://')) return;
-    try {
-      const url = new URL(v);
-      $form.host = url.hostname;
-      if (url.port) $form.port = Number(url.port);
-      $form.tls = url.protocol === 'https:' ? { verification: 'Full' } : undefined;
-    } catch {
-      // Not a parseable URL — leave unchanged
-    }
-  }
-</script>
-
-<svelte:window onbeforeunload={handleBeforeUnload} />
-
-<Modal bind:open={confirmLeaveOpen} class="modal">
-  <div class="modal-box">
-    <h3 class="text-lg font-semibold">{m.storage_connection_edit_unsaved_title()}</h3>
-    <p class="text-base-content/70 mt-2 text-sm">{m.storage_connection_edit_unsaved_body()}</p>
-    <div class="modal-action">
-      <button type="button" class="btn btn-ghost" onclick={cancelLeave}>
-        {m.storage_connection_edit_unsaved_stay()}
-      </button>
-      <button type="button" class="btn btn-error" onclick={confirmLeave}>
-        {m.storage_connection_edit_unsaved_leave()}
-      </button>
-    </div>
-  </div>
-</Modal>
-
-<h1 class="mb-1 text-xl font-semibold">{m.storage_connection_edit_title()}</h1>
-
-{#if !loaded}
-  <div class="flex items-center justify-center py-12">
-    <span class="loading loading-spinner loading-md text-base-content/40"></span>
-  </div>
-{:else}
-  {#if isActiveConnection}
-    <div role="note" class="alert alert-info mb-4 flex gap-2">
-      <IconInfo class="size-5 shrink-0" aria-hidden="true" />
-      <span class="text-sm">{m.storage_connection_edit_active_notice()}</span>
-    </div>
-  {/if}
-
-  <form method="POST" action="?/update" use:enhance class="flex flex-col gap-4">
-    <input type="hidden" name="id" value={$form.id} />
-
-    <!-- Connection name -->
-    <div>
-      <label for="{uid}-name" class="label mb-1 text-sm font-medium">
-        {m.storage_connection_edit_name()}
-      </label>
-      <input
-        id="{uid}-name"
-        name="name"
-        type="text"
-        class="input-bordered input w-full"
-        placeholder={m.storage_connection_edit_name_placeholder()}
-        bind:value={$form.name}
-      />
-      <p class="text-base-content/50 mt-1 text-xs">{m.storage_connection_edit_name_hint()}</p>
-    </div>
-
-    <!-- Backend type (hidden — editing type not supported) -->
-    <input type="hidden" name="type" value={$form.type} />
-
-    <!-- Host -->
-    <div>
-      <label for="{uid}-host" class="label mb-1 text-sm font-medium">
-        {m.storage_connect_host()}
-      </label>
-      <input
-        id="{uid}-host"
-        name="host"
-        type="text"
-        class={['input-bordered input w-full', $errors?.host && 'input-error']}
-        placeholder={m.storage_connect_host_placeholder()}
-        bind:value={$form.host}
-        onblur={parseHostInput}
-      />
-      {#if $errors?.host}
-        <p class="text-error mt-1 text-xs">{$errors.host}</p>
-      {/if}
-    </div>
-
-    <!-- Port -->
-    <div>
-      <label for="{uid}-port" class="label mb-1 text-sm font-medium">
-        {m.storage_connect_port()}
-      </label>
-      <input
-        id="{uid}-port"
-        name="port"
-        type="number"
-        min="1"
-        max="65535"
-        class={['input-bordered input w-full', $errors?.port && 'input-error']}
-        placeholder={m.storage_connect_port_placeholder()}
-        bind:value={$form.port}
-      />
-      <p class="text-base-content/50 mt-1 text-xs">{m.storage_connect_port_hint()}</p>
-      {#if $errors?.port}
-        <p class="text-error mt-1 text-xs">{$errors.port}</p>
-      {/if}
-    </div>
-
-    <!-- TLS -->
-    <div class="flex items-start justify-between gap-4">
-      <div>
-        <label for="{uid}-tls" class="label text-sm font-medium">
-          {m.storage_connect_tls()}
-        </label>
-        <p class="text-base-content/50 mt-0.5 text-xs">{m.storage_connect_tls_hint()}</p>
-      </div>
-      <input
-        id="{uid}-tls"
-        type="checkbox"
-        class="toggle toggle-primary mt-1 shrink-0"
-        checked={!!$form.tls}
-        onchange={(e) => {
-          $form.tls = e.currentTarget.checked ? { verification: 'Full' } : undefined;
-        }}
-      />
-    </div>
-
-    <!-- TLS verification -->
-    {#if $form.tls}
-      <div class="flex items-start justify-between gap-4 pl-4">
-        <div>
-          <label for="{uid}-tls-verification" class="label text-sm font-medium">
-            {m.storage_connect_tls_verification()}
-          </label>
-          <p class="text-base-content/50 mt-0.5 text-xs">
-            {m.storage_connect_tls_verification_hint()}
-          </p>
-        </div>
-        <input
-          id="{uid}-tls-verification"
-          type="checkbox"
-          class="toggle toggle-primary mt-1 shrink-0"
-          checked={$form.tls.verification === 'Full'}
-          onchange={(e) => {
-            $form.tls = { verification: e.currentTarget.checked ? 'Full' : 'None' };
-          }}
-        />
-      </div>
-    {/if}
-
-    <!-- Access style -->
-    <div>
-      <label for="{uid}-access-style" class="label mb-1 text-sm font-medium">
-        {m.storage_connect_access_style()}
-      </label>
-      <select
-        id="{uid}-access-style"
-        name="accessStyle"
-        class="select-bordered select w-full"
-        bind:value={$form.accessStyle}
-      >
-        <option value="Path">{m.storage_connect_access_style_path()}</option>
-        <option value="VirtualHosted">{m.storage_connect_access_style_virtual_hosted()}</option>
-      </select>
-    </div>
-
-    <!-- Region -->
-    <div>
-      <label for="{uid}-region" class="label mb-1 text-sm font-medium">
-        {m.storage_connect_region()}
-      </label>
-      <input
-        id="{uid}-region"
-        name="region.name"
-        type="text"
-        class={['input-bordered input w-full', $errors?.region?.name && 'input-error']}
-        bind:value={$form.region.name}
-      />
-      {#if $errors?.region?.name}
-        <p class="text-error mt-1 text-xs">{$errors.region.name}</p>
-      {/if}
-    </div>
-
-    <!-- Access key -->
-    <div>
-      <label for="{uid}-access-key" class="label mb-1 text-sm font-medium">
-        {m.storage_connect_access_key()}
-      </label>
-      <input
-        id="{uid}-access-key"
-        name="credentials.accessKey"
-        type="text"
-        class={['input-bordered input w-full', $errors?.credentials?.accessKey && 'input-error']}
-        autocomplete="username"
-        bind:value={$form.credentials.accessKey}
-      />
-      {#if $errors?.credentials?.accessKey}
-        <p class="text-error mt-1 text-xs">{$errors.credentials.accessKey}</p>
-      {/if}
-    </div>
-
-    <!-- Secret key -->
-    <div>
-      <label for="{uid}-secret-key" class="label mb-1 text-sm font-medium">
-        {m.storage_connect_secret_key()}
-      </label>
-      <input
-        id="{uid}-secret-key"
-        name="credentials.secretKey"
-        type="password"
-        class={['input-bordered input w-full', $errors?.credentials?.secretKey && 'input-error']}
-        autocomplete="current-password"
-        bind:value={$form.credentials.secretKey}
-      />
-      <p class="text-base-content/50 mt-1 text-xs">
-        {m.storage_connection_edit_credentials_hint()}
-      </p>
-      {#if $errors?.credentials?.secretKey}
-        <p class="text-error mt-1 text-xs">{$errors.credentials.secretKey}</p>
-      {/if}
-    </div>
-
-    {#if $message && $message !== 'ok'}
-      <p class="text-error text-sm">{$message}</p>
-    {/if}
-
-    <div class="flex items-center gap-3">
-      <button type="submit" class="btn btn-primary" disabled={$submitting}>
-        {#if $submitting}
-          <span class="loading loading-sm loading-spinner"></span>
-        {/if}
-        {m.storage_connection_edit_save()}
-      </button>
-      <a href={resolve('/embed/storage/connections')} class="btn btn-ghost">
-        ← {m.storage_connections_title()}
-      </a>
-    </div>
-  </form>
-{/if}
diff --git a/src/routes/embed/trino/+page.server.ts b/src/routes/embed/trino/+page.server.ts
deleted file mode 100644
index fd62b457..00000000
--- a/src/routes/embed/trino/+page.server.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { fail } from '@sveltejs/kit';
-import { superValidate, message } from 'sveltekit-superforms';
-import { zod4 as zod } from 'sveltekit-superforms/adapters';
-import { getUserId } from '$lib/server/auth-utils.js';
-import { getAllQuerySummaries, cancelQuery } from '$lib/server/trino/queries.js';
-import { trinoConfigured } from '$lib/server/trino/client.js';
-import { completionEnabled } from '$lib/server/feature-flags.js';
-import { createUserTrinoClient, getUserTrinoClient } from '$lib/server/trino/user-clients.js';
-import { ConnectionSchema, type ConnectionMessage } from '$lib/trino/validation.js';
-import type { Actions, PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async ({ locals }) => {
-  locals.logger.debug('loading Trino page');
-  const connectionForm = await superValidate(zod(ConnectionSchema));
-  const userId = getUserId(locals);
-  const activeQueries = getAllQuerySummaries(userId);
-  const userClientExists = getUserTrinoClient(userId) !== null;
-  return { connectionForm, activeQueries, trinoConfigured, userClientExists, completionEnabled };
-};
-
-export const actions: Actions = {
-  save: async ({ request, locals }) => {
-    const log = locals.logger;
-
-    if (trinoConfigured) {
-      return fail(400, { error: 'Connection is managed via environment variables' });
-    }
-
-    const form = await superValidate(request, zod(ConnectionSchema));
-
-    if (!form.valid) {
-      log.debug({ errors: form.errors }, 'connection form validation failed');
-      return fail(400, { form });
-    }
-
-    const userId = getUserId(locals);
-
-    // Cancel any running query before replacing the connection.
-    for (const tabId of Object.keys(getAllQuerySummaries(userId))) {
-      await cancelQuery(userId, tabId);
-    }
-
-    const { connectionUrl, authType, authUsername, authPassword } = form.data;
-
-    createUserTrinoClient(userId, {
-      url: connectionUrl,
-      authType,
-      username: authUsername,
-      password: authPassword
-    });
-
-    log.info({ trino_url: connectionUrl }, 'user connection saved');
-    return message(form, { type: 'success' } satisfies ConnectionMessage);
-  }
-};
diff --git a/src/routes/embed/trino/+page.svelte b/src/routes/embed/trino/+page.svelte
deleted file mode 100644
index e445bba8..00000000
--- a/src/routes/embed/trino/+page.svelte
+++ /dev/null
@@ -1,910 +0,0 @@
-<script lang="ts">
-  import { onMount, untrack } from 'svelte';
-  import { SvelteMap } from 'svelte/reactivity';
-  import { browser } from '$app/environment';
-  import * as m from '$lib/paraglide/messages.js';
-  import MonacoEditor from '$lib/components/editor/MonacoEditor.svelte';
-  import CatalogBrowser from '$lib/components/catalog/CatalogBrowser.svelte';
-  import Modal from '$lib/components/Modal.svelte';
-  import { superForm } from 'sveltekit-superforms';
-  import { ConnectionSchema, type ConnectionMessage } from '$lib/trino/validation.js';
-  import TabBar from '$lib/components/TabBar.svelte';
-  import { tabStore, MAX_SQL_LENGTH } from '$lib/stores/tab-store.svelte.js';
-  import { getOrCreateQueryRunner, destroyQueryRunner } from '$lib/trino/query-runner.svelte.js';
-  import { isTerminal } from '$lib/types/query';
-  import {
-    splitStatements,
-    getStatementAtOffset,
-    getStatementsInRange,
-    type SqlStatement
-  } from '$lib/editor/split-statements.js';
-  import type { PageData } from './$types';
-  import StatementResult from '$lib/components/trino/StatementResult.svelte';
-
-  let { data }: { data: PageData } = $props();
-
-  const uid = $props.id();
-
-  function getStoredValue(key: string, fallback: string): string {
-    try {
-      return localStorage.getItem(key) ?? fallback;
-    } catch {
-      return fallback;
-    }
-  }
-
-  // Connection config - local state persisted to localStorage.
-  let connectionUrl = $state('');
-  let authType = $state<'none' | 'basic'>('none');
-  let authUsername = $state('');
-  let authPassword = $state('');
-  let connectionOpen = $state(false);
-
-  let sql = $state(tabStore.activeTab.sql);
-  let defaultCatalog = $state('');
-  let defaultSchema = $state('');
-  let hydrated = $state(false);
-
-  // Signal to trigger catalog browser load (1 = load on mount).
-  let catalogVersion = $state(0);
-
-  // Catalog browser state. On mobile, always start closed; on desktop, restore from localStorage.
-  function getInitialCatalogOpen(): boolean {
-    if (!browser) return false;
-    try {
-      const isMobile = !window.matchMedia('(min-width: 1024px)').matches;
-      if (isMobile) return false;
-      return (localStorage.getItem('trino_catalog_browser_open') ?? 'true') === 'true';
-    } catch {
-      return false;
-    }
-  }
-  let catalogBrowserOpen = $state(getInitialCatalogOpen());
-  let monacoEditor = $state<MonacoEditor | undefined>(undefined);
-  let mobileCatalogOpen = $state(false);
-
-  const viewStates = new SvelteMap<
-    string,
-    import('monaco-editor').editor.ICodeEditorViewState | null
-  >();
-
-  // Non-reactive tracker for tab switching.
-  let lastTabId: string | null = null;
-
-  // Get the query runner for the active tab.
-  const runner = $derived(getOrCreateQueryRunner(tabStore.activeTabId));
-
-  // Tab bar items derived from tab store.
-  const tabItems = $derived(
-    tabStore.tabs.map((t) => ({
-      id: t.id,
-      label: tabStore.getTabLabel(t)
-    }))
-  );
-
-  onMount(() => {
-    if (!data.trinoConfigured) {
-      connectionUrl = getStoredValue('trino_url', '');
-      authType = getStoredValue('trino_auth_type', 'none') as 'none' | 'basic';
-      authUsername = getStoredValue('trino_username', '');
-    }
-    defaultCatalog = getStoredValue('trino_default_catalog', '');
-    defaultSchema = getStoredValue('trino_default_schema', '');
-    hydrated = true;
-    lastTabId = tabStore.activeTabId;
-
-    if (data.trinoConfigured || data.userClientExists) {
-      // Server already has a connection (env-based or per-user); load catalogues.
-      catalogVersion++;
-    } else if (connectionUrl && authType === 'none') {
-      // Re-establish server-side connection from localStorage on page reload.
-      // Only possible for unauthenticated connections since the password is not persisted.
-      const body = new FormData();
-      body.set('connectionUrl', connectionUrl);
-      body.set('authType', authType);
-      body.set('authUsername', '');
-      body.set('authPassword', '');
-      fetch('?/save', {
-        method: 'POST',
-        body,
-        headers: { 'x-sveltekit-action': 'true' }
-      })
-        .then(() => {
-          catalogVersion++;
-        })
-        .catch(() => {
-          // Server-side connection could not be re-established from localStorage.
-          // Clear stale state so the user is prompted to re-enter.
-          connectionUrl = '';
-          authType = 'none';
-          authUsername = '';
-        });
-    } else if (connectionUrl && authType === 'basic') {
-      // Password is not persisted; prompt the user to re-enter credentials.
-      connectionOpen = true;
-    }
-
-    // Initialise runners from lightweight summaries (rows fetched on demand).
-    for (const [tabId, snapshot] of Object.entries(data.activeQueries)) {
-      getOrCreateQueryRunner(tabId).initialise(snapshot);
-    }
-    getOrCreateQueryRunner(tabStore.activeTabId).fetchResults();
-  });
-
-  // Connection form (SuperForms).
-  const {
-    enhance: connectionEnhance,
-    errors: connectionErrors,
-    message: connectionMessage
-  } = superForm(
-    untrack(() => data.connectionForm),
-    {
-      onSubmit({ cancel }) {
-        const result = ConnectionSchema.safeParse({
-          connectionUrl,
-          authType,
-          authUsername,
-          authPassword
-        });
-        if (!result.success) {
-          const errors: Record<string, string[]> = {};
-          for (const issue of result.error.issues) {
-            const key = String(issue.path[0]);
-            (errors[key] ??= []).push(issue.message);
-          }
-          $connectionErrors = {
-            connectionUrl: errors.connectionUrl,
-            authType: errors.authType,
-            authUsername: errors.authUsername,
-            authPassword: errors.authPassword
-          };
-          cancel();
-        }
-      },
-      onUpdated({ form }) {
-        const msg = form.message as ConnectionMessage | undefined;
-        if (msg?.type === 'success') {
-          catalogVersion++;
-        } else if (msg?.type === 'error') {
-          connectionOpen = true;
-        }
-      }
-    }
-  );
-
-  const isActive = $derived(runner.state !== 'IDLE' && !isTerminal(runner.state));
-  const skippedStatements = $derived.by(() => {
-    if (isActive || !runner.scriptProgress) return 0;
-    return runner.scriptProgress.totalStatements - runner.results.length;
-  });
-
-  // Persist connection config to localStorage (only in per-user mode).
-  // Password is intentionally excluded -- credentials should not be stored client-side.
-  $effect(() => {
-    if (!hydrated || data.trinoConfigured) return;
-    localStorage.setItem('trino_url', connectionUrl);
-    localStorage.setItem('trino_auth_type', authType);
-    localStorage.setItem('trino_username', authUsername);
-  });
-
-  // Persist settings.
-  $effect(() => {
-    if (!hydrated) return;
-    localStorage.setItem('trino_default_catalog', defaultCatalog);
-    localStorage.setItem('trino_default_schema', defaultSchema);
-    localStorage.setItem('trino_catalog_browser_open', String(catalogBrowserOpen));
-  });
-
-  // Handle tab switches: save/restore Monaco view state.
-  $effect(() => {
-    const currentTabId = tabStore.activeTabId;
-    // Only read activeTabId reactively; use untrack for the rest.
-    untrack(() => {
-      if (lastTabId && lastTabId !== currentTabId && monacoEditor) {
-        viewStates.set(lastTabId, monacoEditor.getViewState());
-      }
-
-      if (monacoEditor && currentTabId) {
-        const tab = tabStore.activeTab;
-        monacoEditor.setValue(tab.sql);
-        sql = tab.sql;
-        const savedState = viewStates.get(currentTabId) ?? null;
-        monacoEditor.restoreViewState(savedState);
-      }
-
-      lastTabId = currentTabId;
-      getOrCreateQueryRunner(currentTabId).fetchResults();
-    });
-  });
-
-  // Sync Monaco content changes back to the tab store.
-  $effect(() => {
-    if (!hydrated) return;
-    // Read sql reactively to trigger on changes; untrack the store call
-    // to avoid re-running when activeTabId changes.
-    const value = sql;
-    untrack(() => tabStore.updateSql(tabStore.activeTabId, value));
-  });
-
-  const connectionSummary = $derived.by(() => {
-    const host = connectionUrl ? connectionUrl.replace(/^https?:\/\//, '').replace(/\/$/, '') : '-';
-    const auth = authType === 'basic' ? m.trino_auth_basic() : m.trino_auth_none();
-    return `${host} \u00b7 ${auth}`;
-  });
-
-  const stateLabel = $derived.by(() => {
-    const stateMap: Record<string, () => string> = {
-      SUBMITTING: m.trino_state_submitting,
-      QUEUED: m.trino_state_queued,
-      PLANNING: m.trino_state_planning,
-      RUNNING: m.trino_state_running,
-      FINISHING: m.trino_state_finishing,
-      FINISHED: m.trino_state_finished,
-      FAILED: m.trino_state_failed,
-      CANCELLED: m.trino_state_cancelled
-    };
-    return stateMap[runner.state]?.() ?? null;
-  });
-
-  const stateBadgeClass = $derived.by(() => {
-    switch (runner.state) {
-      case 'QUEUED':
-      case 'PLANNING':
-        return 'badge-warning';
-      case 'RUNNING':
-      case 'FINISHING':
-      case 'SUBMITTING':
-        return 'badge-info';
-      case 'FINISHED':
-        return 'badge-success';
-      case 'FAILED':
-        return 'badge-error';
-      case 'CANCELLED':
-        return 'badge-neutral';
-      default:
-        return '';
-    }
-  });
-
-  const charLimitReached = $derived(sql.length >= MAX_SQL_LENGTH);
-
-  const execOptions = $derived({
-    catalog: defaultCatalog || undefined,
-    schema: defaultSchema || undefined
-  });
-
-  let submittedStatements = $state.raw<SqlStatement[]>([]);
-
-  function runStatements(statements: SqlStatement[]) {
-    if (statements.length === 0) return;
-    submittedStatements = statements;
-    runner.executeScript(statements, execOptions);
-  }
-
-  /** Ctrl+Enter: run the single statement at the cursor. */
-  function handleRunAtCursor() {
-    const offset = monacoEditor?.getCursorOffset();
-    const stmt = offset != null ? getStatementAtOffset(sql, offset) : null;
-    if (stmt) runStatements([stmt]);
-  }
-
-  /** Run all statements in the editor, ignoring any selection. */
-  function handleRunAll() {
-    monacoEditor?.clearSelection();
-    runStatements(splitStatements(sql));
-  }
-
-  /** Run only the statements overlapping the current selection. */
-  function handleRunSelected() {
-    const selection = monacoEditor?.getSelection();
-    monacoEditor?.clearSelection();
-    if (!selection) return;
-    runStatements(getStatementsInRange(sql, selection.startOffset, selection.endOffset));
-  }
-
-  const hasSelection = $derived(monacoEditor?.getSelection() != null);
-
-  type RunMode = 'cursor' | 'all';
-  let runMode = $state<RunMode>('cursor');
-
-  function handleRun() {
-    // If text is selected, always run selected statements regardless of mode.
-    if (monacoEditor?.getSelection()) {
-      handleRunSelected();
-      return;
-    }
-    if (runMode === 'cursor') {
-      handleRunAtCursor();
-    } else {
-      handleRunAll();
-    }
-  }
-
-  function selectRunMode(mode: RunMode) {
-    runMode = mode;
-    if (document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-  }
-
-  const runButtonLabel = $derived.by(() => {
-    if (runMode === 'all') {
-      return hasSelection ? m.trino_run_selected() : m.trino_run_all();
-    }
-    return m.trino_run_at_cursor();
-  });
-
-  // Clear submitted statements when the user edits, so highlighting stops.
-  const highlightOffsets = $derived.by(() => {
-    const progress = runner.scriptProgress;
-    if (!progress || progress.totalStatements <= 1 || isTerminal(runner.state)) return null;
-    return submittedStatements[progress.currentStatementIndex] ?? null;
-  });
-
-  const runShortcutLabel = $derived(runMode === 'cursor' ? 'Ctrl+↵' : 'Ctrl+Shift+↵');
-
-  function handleKeydown(event: KeyboardEvent) {
-    // Monaco handles its own keybindings — skip if the event originated from the editor.
-    if (event.target instanceof HTMLElement && event.target.closest('[data-ready]')) return;
-
-    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === 'Enter') {
-      event.preventDefault();
-      handleRunAll();
-    } else if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
-      event.preventDefault();
-      handleRunAtCursor();
-    }
-  }
-
-  function toggleCatalogBrowser() {
-    if (browser && !window.matchMedia('(min-width: 1024px)').matches) {
-      mobileCatalogOpen = !mobileCatalogOpen;
-    } else {
-      catalogBrowserOpen = !catalogBrowserOpen;
-    }
-  }
-
-  function handleTabSelect(id: string) {
-    tabStore.switchTab(id);
-  }
-
-  function handleTabClose(id: string) {
-    destroyQueryRunner(id);
-    viewStates.delete(id);
-    tabStore.closeTab(id);
-    // Clean up server-side query state for this tab.
-    fetch(`/api/trino/query?tabId=${encodeURIComponent(id)}&cleanup=true`, { method: 'DELETE' });
-  }
-
-  function handleTabAdd() {
-    tabStore.createTab();
-  }
-
-  function handleTabRename(id: string, newLabel: string) {
-    tabStore.renameTab(id, newLabel);
-  }
-
-  function handleTabReorder(from: number, to: number) {
-    tabStore.reorderTabs(from, to);
-  }
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-{#snippet closeIcon()}
-  <svg
-    class="size-4"
-    aria-hidden="true"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
-  >
-{/snippet}
-
-<div class="flex h-full gap-4">
-  <!-- Catalog browser panel (desktop) — always in DOM, collapses via width transition -->
-  <aside
-    class="
-      border-base-300 bg-base-100 hidden shrink-0 flex-col overflow-hidden rounded-xl
-      border transition-[width] duration-200 ease-out
-      lg:flex
-      {catalogBrowserOpen ? 'w-72' : 'invisible w-0 border-0'}"
-  >
-    <div
-      class="
-        border-base-300 flex w-72 items-center justify-between border-b px-3
-        py-2
-      "
-    >
-      <span class="text-base-content/60 text-sm font-medium">{m.trino_catalog_browser()}</span>
-    </div>
-    <div class="w-72">
-      <CatalogBrowser
-        connectionVersion={catalogVersion}
-        bind:defaultCatalog
-        bind:defaultSchema
-        onInsert={(name) => monacoEditor?.insertAtCursor(name)}
-      />
-    </div>
-  </aside>
-
-  <!-- Mobile catalog browser overlay -->
-  <Modal
-    bind:open={mobileCatalogOpen}
-    class="
-      bg-base-100 fixed inset-0 z-40 size-full max-h-full max-w-full p-0
-      lg:hidden
-    "
-  >
-    <div class="flex h-full flex-col">
-      <div
-        class="
-          border-base-300 flex items-center justify-between border-b px-3 py-2
-        "
-      >
-        <span class="text-base-content/60 text-sm font-medium">{m.trino_catalog_browser()}</span>
-        <button
-          class="btn btn-ghost btn-xs"
-          onclick={() => (mobileCatalogOpen = false)}
-          aria-label={m.trino_catalog_browser_toggle()}
-        >
-          {@render closeIcon()}
-        </button>
-      </div>
-      <CatalogBrowser
-        connectionVersion={catalogVersion}
-        bind:defaultCatalog
-        bind:defaultSchema
-        onInsert={(name) => {
-          monacoEditor?.insertAtCursor(name);
-          mobileCatalogOpen = false;
-        }}
-      />
-    </div>
-  </Modal>
-
-  <!-- Main editor + results column -->
-  <div class="flex min-w-0 flex-1 flex-col">
-    <!-- Connection config form (hidden when Trino is env-configured) -->
-    {#if !data.trinoConfigured}
-      <form method="POST" action="?/save" use:connectionEnhance class="px-2 pt-1">
-        <input type="hidden" name="connectionUrl" value={connectionUrl} />
-        <input type="hidden" name="authType" value={authType} />
-        <input type="hidden" name="authUsername" value={authUsername} />
-        <input type="hidden" name="authPassword" value={authPassword} />
-
-        <div class="border-base-300 bg-base-100 collapse rounded-xl border">
-          <input
-            type="checkbox"
-            class="peer"
-            aria-label={m.trino_connection_label()}
-            bind:checked={connectionOpen}
-          />
-          <div
-            class="
-              collapse-title text-base-content flex items-center justify-between pr-4
-              text-sm font-medium
-            "
-          >
-            <span>{m.trino_connection_label()}</span>
-            <span class="text-base-content/50 font-mono text-xs">{connectionSummary}</span>
-          </div>
-          <div class="collapse-content flex flex-col gap-4">
-            <!-- URL -->
-            <div class="flex flex-col gap-1">
-              <label for="{uid}-conn-url" class="label text-sm">
-                {m.trino_connection_url()}
-              </label>
-              <input
-                id="{uid}-conn-url"
-                type="url"
-                class="input input-sm w-full font-mono"
-                class:input-error={$connectionErrors.connectionUrl}
-                placeholder={m.trino_connection_url_placeholder()}
-                bind:value={connectionUrl}
-              />
-              {#if $connectionErrors.connectionUrl}
-                <p class="text-error text-xs">{$connectionErrors.connectionUrl}</p>
-              {/if}
-            </div>
-
-            <!-- Auth type toggle -->
-            <div class="flex flex-col gap-1">
-              <span class="label text-sm">{m.trino_connection_auth()}</span>
-              <div class="join" role="group" aria-label={m.trino_connection_auth()}>
-                <input
-                  id="{uid}-auth-none"
-                  class="btn join-item btn-sm"
-                  type="radio"
-                  name="{uid}-auth"
-                  aria-label={m.trino_auth_none()}
-                  value="none"
-                  bind:group={authType}
-                />
-                <input
-                  id="{uid}-auth-basic"
-                  class="btn join-item btn-sm"
-                  type="radio"
-                  name="{uid}-auth"
-                  aria-label={m.trino_auth_basic()}
-                  value="basic"
-                  bind:group={authType}
-                />
-              </div>
-            </div>
-
-            <!-- Basic auth credentials -->
-            {#if authType === 'basic'}
-              <div
-                class="
-                  grid grid-cols-1 gap-3
-                  sm:grid-cols-2
-                "
-              >
-                <div class="flex flex-col gap-1">
-                  <label for="{uid}-auth-username" class="label text-sm">
-                    {m.trino_auth_username()}
-                  </label>
-                  <input
-                    id="{uid}-auth-username"
-                    type="text"
-                    class="input input-sm font-mono"
-                    class:input-error={$connectionErrors.authUsername}
-                    autocomplete="username"
-                    bind:value={authUsername}
-                  />
-                  {#if $connectionErrors.authUsername}
-                    <p class="text-error text-xs">{$connectionErrors.authUsername}</p>
-                  {/if}
-                </div>
-                <div class="flex flex-col gap-1">
-                  <label for="{uid}-auth-password" class="label text-sm">
-                    {m.trino_auth_password()}
-                  </label>
-                  <input
-                    id="{uid}-auth-password"
-                    type="password"
-                    class="input input-sm font-mono"
-                    class:input-error={$connectionErrors.authPassword}
-                    autocomplete="current-password"
-                    bind:value={authPassword}
-                  />
-                  {#if $connectionErrors.authPassword}
-                    <p class="text-error text-xs">{$connectionErrors.authPassword}</p>
-                  {/if}
-                </div>
-              </div>
-            {/if}
-
-            <!-- Save button -->
-            <div class="flex justify-end">
-              <button type="submit" class="btn btn-sm btn-primary">
-                {m.trino_save_connection()}
-              </button>
-            </div>
-
-            {#if $connectionMessage}
-              {@const msg = $connectionMessage as ConnectionMessage}
-              {#if msg.type === 'success'}
-                <p class="text-success text-sm">{m.trino_connection_saved()}</p>
-              {:else}
-                <p class="text-error text-sm">{msg.message}</p>
-              {/if}
-            {/if}
-          </div>
-        </div>
-      </form>
-    {/if}
-
-    <!-- Tab bar -->
-    <div class="px-2 pt-1">
-      <TabBar
-        items={tabItems}
-        activeId={tabStore.activeTabId}
-        onSelect={handleTabSelect}
-        onClose={handleTabClose}
-        onAdd={handleTabAdd}
-        onRename={handleTabRename}
-        onReorder={handleTabReorder}
-        maxItems={tabStore.maxTabs}
-      />
-    </div>
-
-    <!-- Persistence warning -->
-    {#if tabStore.persistError}
-      <div class="px-2" role="alert">
-        <div class="alert alert-warning text-sm">
-          {m.trino_tabs_persist_error()}
-        </div>
-      </div>
-    {/if}
-
-    <!-- Content card (editor + status + results) -->
-    <div
-      class="
-        border-base-300 bg-base-100 flex min-h-0 flex-1 flex-col rounded-t-none
-        rounded-b-xl border
-      "
-      role="tabpanel"
-      aria-labelledby="tab-{tabStore.activeTabId}"
-    >
-      <div
-        class="
-          border-base-300 flex items-center justify-between border-b px-4 py-2
-        "
-      >
-        <div class="flex items-center gap-2">
-          <div class="tooltip tooltip-right" data-tip={m.trino_catalog_browser_toggle()}>
-            <button
-              type="button"
-              class="btn btn-ghost btn-xs"
-              onclick={toggleCatalogBrowser}
-              aria-label={m.trino_catalog_browser_toggle()}
-            >
-              {#if catalogBrowserOpen}
-                <svg
-                  class="
-                    hidden size-4
-                    lg:block
-                  "
-                  aria-hidden="true"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  ><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /><path
-                    d="m14 9-3 3 3 3"
-                  /></svg
-                >
-                <svg
-                  class="
-                    size-4
-                    lg:hidden
-                  "
-                  aria-hidden="true"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16" /></svg
-                >
-              {:else}
-                <svg
-                  class="size-4"
-                  aria-hidden="true"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  ><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /><path
-                    d="m12 9 3 3-3 3"
-                  /></svg
-                >
-              {/if}
-            </button>
-          </div>
-          <span class="text-base-content/60 text-sm font-medium">{m.trino_editor_label()}</span>
-          {#if charLimitReached}
-            <span class="text-warning text-xs" role="status"
-              >{m.trino_editor_char_limit_reached({ limit: MAX_SQL_LENGTH.toLocaleString() })}</span
-            >
-          {/if}
-        </div>
-        <div class="flex gap-2">
-          {#if isActive}
-            <button
-              type="button"
-              class="btn btn-sm btn-error"
-              onclick={() => runner.cancel()}
-              aria-label={m.trino_cancel_query()}
-            >
-              {m.trino_cancel_query()}
-            </button>
-          {/if}
-          {#snippet runOption(label: string, shortcut: string)}
-            <span class="flex flex-col items-start text-xs font-semibold">
-              <span>{label}</span>
-              <kbd class="kbd kbd-xs text-base-content opacity-60">{shortcut}</kbd>
-            </span>
-          {/snippet}
-
-          <div class="dropdown dropdown-end">
-            <div class="join">
-              <button
-                type="button"
-                class="btn join-item btn-primary py-1.5"
-                disabled={isActive}
-                aria-label={runButtonLabel}
-                onclick={handleRun}
-              >
-                {#if isActive}
-                  <span class="loading loading-xs loading-spinner"></span>
-                  {m.trino_running()}
-                {:else}
-                  <span
-                    class="
-                      grid
-                      *:[grid-area:1/1]
-                    "
-                  >
-                    <!-- Invisible sizers: longest option sets width -->
-                    <span class="invisible" aria-hidden="true">
-                      {@render runOption(m.trino_run_at_cursor(), 'Ctrl+Shift+↵')}
-                    </span>
-                    <span class="invisible" aria-hidden="true">
-                      {@render runOption(
-                        hasSelection ? m.trino_run_selected() : m.trino_run_all(),
-                        'Ctrl+Shift+↵'
-                      )}
-                    </span>
-                    {@render runOption(runButtonLabel, runShortcutLabel)}
-                  </span>
-                {/if}
-              </button>
-              <button
-                type="button"
-                class="
-                  btn join-item border-l-primary-content/20 btn-primary
-                  self-stretch border-l px-2
-                "
-                class:pointer-events-none={isActive}
-                aria-haspopup="true"
-                aria-label={m.trino_run_mode_select()}
-              >
-                <svg class="size-3" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor">
-                  <path
-                    fill-rule="evenodd"
-                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </div>
-            <div
-              class="
-                dropdown-content rounded-box bg-primary text-primary-content z-10 mt-1 flex
-                w-full flex-col gap-1 p-1.5 shadow-lg
-              "
-            >
-              <button
-                type="button"
-                class="
-                  rounded-btn hover:bg-primary-content/20 cursor-pointer px-3 py-1.5
-                  text-left
-                  {runMode === 'cursor' ? 'bg-primary-content/15' : ''}"
-                onclick={() => selectRunMode('cursor')}
-              >
-                {@render runOption(m.trino_run_at_cursor(), 'Ctrl+↵')}
-              </button>
-              <button
-                type="button"
-                class="
-                  rounded-btn hover:bg-primary-content/20 cursor-pointer px-3 py-1.5
-                  text-left
-                  {runMode === 'all' ? 'bg-primary-content/15' : ''}"
-                onclick={() => selectRunMode('all')}
-              >
-                {@render runOption(
-                  hasSelection ? m.trino_run_selected() : m.trino_run_all(),
-                  'Ctrl+Shift+↵'
-                )}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="h-64 px-4 py-2">
-        <MonacoEditor
-          bind:this={monacoEditor}
-          bind:value={sql}
-          {highlightOffsets}
-          {defaultCatalog}
-          {defaultSchema}
-          completionEnabled={data.completionEnabled}
-          onExecute={handleRun}
-          onExecuteAll={handleRunAll}
-        />
-      </div>
-
-      <!-- Status display -->
-      {#if runner.state !== 'IDLE'}
-        <div
-          class="
-            border-base-300 flex flex-wrap items-center gap-3 border-t px-4 py-2
-          "
-          aria-live="polite"
-          data-query-state={runner.state}
-        >
-          {#if runner.scriptProgress}
-            <span class="text-base-content/60 text-xs font-medium">
-              {m.trino_script_progress({
-                current: runner.scriptProgress.currentStatementIndex + 1,
-                total: runner.scriptProgress.totalStatements
-              })}
-            </span>
-            {#if skippedStatements > 0}
-              <span class="text-error text-xs font-medium">
-                {skippedStatements === 1
-                  ? m.trino_statements_skipped_one()
-                  : m.trino_statements_skipped_other({ count: skippedStatements })}
-              </span>
-            {/if}
-          {/if}
-          {#if stateLabel}
-            <span
-              class="
-                badge
-                {stateBadgeClass}">{stateLabel}</span
-            >
-          {/if}
-          {#if runner.state === 'RUNNING'}
-            <span class="text-base-content/60 text-xs tabular-nums"
-              >{Math.round(runner.progress.progressPercentage)}%</span
-            >
-            <progress
-              class="progress progress-primary shrink-0"
-              style="width: 8rem"
-              value={runner.progress.progressPercentage}
-              max="100"
-            ></progress>
-          {/if}
-          {#if runner.progress.processedRows > 0 || runner.progress.elapsedTimeMillis > 0}
-            <span class="text-base-content/60 text-xs">
-              {m.trino_progress_info({
-                rows: runner.progress.processedRows.toLocaleString(),
-                elapsed: (runner.progress.elapsedTimeMillis / 1000).toFixed(1)
-              })}
-            </span>
-          {/if}
-          {#if runner.currentTrinoQueryUrl}
-            <a
-              href={runner.currentTrinoQueryUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              class="btn btn-ghost btn-xs"
-            >
-              {m.trino_view_in_trino()}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="size-3.5"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
-                />
-                <path
-                  d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
-                />
-              </svg>
-            </a>
-          {/if}
-        </div>
-      {/if}
-
-      <!-- Results section -->
-      <div class="border-base-300 flex items-center border-t px-4 py-2">
-        <span class="text-base-content/60 text-sm font-medium">{m.trino_results_label()}</span>
-      </div>
-
-      <div class="min-h-0 flex-1 overflow-auto">
-        {#if runner.results.length > 0}
-          {#each runner.results as result, idx (idx)}
-            <StatementResult {result} index={idx} totalStatements={runner.results.length} />
-          {/each}
-        {:else if !isActive}
-          <p class="text-base-content/40 py-8 text-center text-sm">{m.trino_results_empty()}</p>
-        {/if}
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/static/embed-demo.html b/static/embed-demo.html
index afdac9fe..9cd9fb26 100644
--- a/static/embed-demo.html
+++ b/static/embed-demo.html
@@ -36,7 +36,7 @@
         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 /embed/* requests.
+        Cockpit server to inject those headers for the embedded pages.
       */
 
       :root {
@@ -318,12 +318,12 @@
           </div>
         </div>
 
-        <!-- Trino SQL editor — embedded from /embed/trino -->
+        <!-- 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 /embed/storage -->
+        <!-- Storage browser — embedded from /storage?embed=1 -->
         <div class="panel" id="panel-storage">
           <iframe
             id="iframe-storage"
@@ -353,7 +353,7 @@
 
         if ((name === 'trino' || name === 'storage') && !iframesLoaded[name]) {
           const iframe = document.getElementById('iframe-' + name);
-          const path = name === 'trino' ? '/embed/trino' : '/embed/storage';
+          const path = name === 'trino' ? '/trino?embed=1' : '/storage?embed=1';
           iframe.src = COCKPIT_BASE_URL + path;
           iframesLoaded[name] = true;