From 582b45204e70be8eb396b909ddb40ad65a31de82 Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Thu, 19 Feb 2026 14:52:27 +0100
Subject: [PATCH 01/19] add prom-client to provide prometheus metrics

---
 AGENTS.md                     | 22 +++++++++++++++++--
 package-lock.json             | 40 ++++++++++++++++++++++++++++++++++-
 package.json                  |  3 ++-
 src/hooks.server.ts           | 23 +++++++++++++++++---
 src/lib/server/metrics.ts     | 13 ++++++++++++
 src/routes/metrics/+server.ts |  8 +++++++
 6 files changed, 102 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/server/metrics.ts
 create mode 100644 src/routes/metrics/+server.ts

diff --git a/AGENTS.md b/AGENTS.md
index b8783f8d..d0c36f61 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -16,6 +16,7 @@ The application is designed with a **plugin/module architecture** so future Stac
 - **zod & superforms** - All forms are to use zod & superforms
 - **Generic OIDC** (openid-client) - Authentication via any OIDC provider
 - **OPA** - Authorisation / feature visibility
+- **prom-client** - Prometheus metrics, exposed at `/metrics`
 
 ## Project Structure
 
@@ -32,7 +33,7 @@ This is a **single SvelteKit application** (not a monorepo).
 │   └── hooks.server.ts   # Server hooks (auth middleware)
 ├── e2e/                  # Playwright E2E tests
 ├── static/               # Static assets
-├── Dockerfile            # Production container image
+├── docker/Dockerfile     # Production container image
 └── CLAUDE.md             # AI assistant instructions
 ```
 
@@ -69,6 +70,14 @@ The application must comply with **BITV 2.0** (German accessibility regulation,
 - The editor must be loaded client-side only
 - Use the custom `trinosql` language registration for Trino SQL support
 
+### Metrics
+
+The app exposes a Prometheus scrape endpoint at `/metrics` via `src/routes/metrics/+server.ts`. HTTP request duration is tracked automatically for all routes in `hooks.server.ts`.
+
+- **Adding custom metrics**: Define new counters, histograms, or gauges in `src/lib/server/metrics.ts` and import them in the relevant server-side code (e.g. track query execution counts, Trino errors, cache hits)
+- **Server-only**: Never import from `src/lib/server/metrics.ts` in client-side code or `.svelte` files
+- **When to add metrics**: New API endpoints, background operations, external service calls, and any operation where latency or error rates are operationally significant
+
 ### Code Style & Best Practices
 
 - Use spaces not tabs
@@ -84,7 +93,7 @@ The application must comply with **BITV 2.0** (German accessibility regulation,
   }
   throw redirect(303, '/path'); // Outside try-catch
   ```
-- **Public Routes**: Update `hooks.server.ts` when adding unauthenticated pages.
+- **Public Routes**: Update `hooks.server.ts` when adding unauthenticated pages. The `/metrics` endpoint is permanently public (Prometheus scraping) — never add auth in front of it.
 - **Label-Element Association**: Always explicitly associate `<label>` elements with their form controls using `for` and `id` attributes. Generate unique IDs with `$props.id()` (see https://svelte.dev/docs/svelte/$props#$props.id()). Never rely on implicit association (wrapping the input inside the label).
 
   ```svelte
@@ -112,6 +121,15 @@ The application uses **Paraglide-JS v2** for type-safe, compiler-based internati
 
 ## Commands
 
+### Node.js Version
+
+The required Node.js version is pinned in `.node-version`. Use `nvm` to install and activate it before running any `npm` commands — `npm` will hard-fail with engine errors otherwise (`.npmrc` sets `engine-strict=true`).
+
+```bash
+nvm install   # installs the version from .node-version
+nvm use       # activates it in the current shell
+```
+
 ### Development
 
 ```bash
diff --git a/package-lock.json b/package-lock.json
index 26db3387..efd9633f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "@stackable/stackable-ui",
       "version": "0.0.1",
       "dependencies": {
-        "@internationalized/date": "^3.11.0"
+        "@internationalized/date": "^3.11.0",
+        "prom-client": "^15.1.3"
       },
       "devDependencies": {
         "@eslint/compat": "^2.0.2",
@@ -511,6 +512,15 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/@pkgr/core": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz",
@@ -1968,6 +1978,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bintrees": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bintrees/-/bintrees-1.0.2.tgz",
+      "integrity": "sha512-VOMgTMwjAaUG580SXn3LacVgjurrbMme7ZZNYGSSV7mmtY6QQRh0Eg3pwIcntQ77DErK1L0NxkbetjcoXzVwKw==",
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -3872,6 +3888,19 @@
         }
       }
     },
+    "node_modules/prom-client": {
+      "version": "15.1.3",
+      "resolved": "https://registry.npmjs.org/prom-client/-/prom-client-15.1.3.tgz",
+      "integrity": "sha512-6ZiOBfCywsD4k1BN9IX0uZhF+tJkV8q8llP64G5Hajs4JOeVLPCwpPVcpXy3BwYiUGgyJzsJJQeOIv7+hDSq8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api": "^1.4.0",
+        "tdigest": "^0.1.1"
+      },
+      "engines": {
+        "node": "^16 || ^18 || >=20"
+      }
+    },
     "node_modules/property-expr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
@@ -4384,6 +4413,15 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tdigest": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tdigest/-/tdigest-0.1.2.tgz",
+      "integrity": "sha512-+G0LLgjjo9BZX2MfdvPfH+MKLCrxlXSYec5DaPYP1fe6Iyhf0/fSmJ0bFiZ1F8BT6cGXl2LpltQptzjXKWEkKA==",
+      "license": "MIT",
+      "dependencies": {
+        "bintrees": "1.0.2"
+      }
+    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
diff --git a/package.json b/package.json
index 9e4aa540..aae07cdc 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "zod": "^4.3.6"
   },
   "dependencies": {
-    "@internationalized/date": "^3.11.0"
+    "@internationalized/date": "^3.11.0",
+    "prom-client": "^15.1.3"
   }
 }
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index a8be42a8..91cafa63 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -1,7 +1,26 @@
 import { paraglideMiddleware } from '$lib/paraglide/server';
+import { httpRequestDuration } from '$lib/server/metrics';
 import { type Handle } from '@sveltejs/kit';
 import { sequence } from '@sveltejs/kit/hooks';
 
+const handleMetrics: Handle = async ({ event, resolve }) => {
+  if (event.route.id === '/metrics') {
+    return resolve(event);
+  }
+  const start = performance.now();
+  const response = await resolve(event);
+  const duration = (performance.now() - start) / 1000;
+  httpRequestDuration.observe(
+    {
+      method: event.request.method,
+      route: event.route.id ?? 'unknown',
+      status: response.status
+    },
+    duration
+  );
+  return response;
+};
+
 const handleParaglide: Handle = ({ event, resolve }) =>
   paraglideMiddleware(event.request, ({ request, locale }) => {
     event.request = request;
@@ -11,6 +30,4 @@ const handleParaglide: Handle = ({ event, resolve }) =>
     });
   });
 
-// Each function acts as a middleware, receiving the request handle
-// And returning a handle which gets passed to the next function
-export const handle = sequence(handleParaglide);
+export const handle = sequence(handleMetrics, handleParaglide);
diff --git a/src/lib/server/metrics.ts b/src/lib/server/metrics.ts
new file mode 100644
index 00000000..9e57bea2
--- /dev/null
+++ b/src/lib/server/metrics.ts
@@ -0,0 +1,13 @@
+import { collectDefaultMetrics, Histogram, Registry } from 'prom-client';
+
+export const register = new Registry();
+
+collectDefaultMetrics({ register });
+
+export const httpRequestDuration = new Histogram({
+  name: 'http_request_duration_seconds',
+  help: 'Duration of HTTP requests in seconds',
+  labelNames: ['method', 'route', 'status'],
+  buckets: [0.005, 0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1, 2.5, 5, 10],
+  registers: [register]
+});
diff --git a/src/routes/metrics/+server.ts b/src/routes/metrics/+server.ts
new file mode 100644
index 00000000..1033cd53
--- /dev/null
+++ b/src/routes/metrics/+server.ts
@@ -0,0 +1,8 @@
+import { register } from '$lib/server/metrics';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async () => {
+  return new Response(await register.metrics(), {
+    headers: { 'Content-Type': register.contentType }
+  });
+};

From 02624eda66c8c924496b69df5919f5cd3090166c Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Thu, 19 Feb 2026 14:55:05 +0100
Subject: [PATCH 02/19] readd deleted comment

---
 src/hooks.server.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 91cafa63..44c159b8 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -30,4 +30,6 @@ const handleParaglide: Handle = ({ event, resolve }) =>
     });
   });
 
+// Each function acts as a middleware, receiving the request handle
+// and returning a handle which gets passed to the next function
 export const handle = sequence(handleMetrics, handleParaglide);

From 8d16657907281406d8e69c3e0c1da4678206dcfe Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Mon, 23 Feb 2026 16:46:10 +0100
Subject: [PATCH 03/19] add monaco editor and simple trino client

---
 e2e/smoke.spec.ts                             |   5 +-
 e2e/trino.spec.ts                             | 252 +++++++++++++
 messages/de.json                              |  22 +-
 messages/en.json                              |  22 +-
 package-lock.json                             |  48 ++-
 package.json                                  |   6 +-
 src/lib/components/editor/MonacoEditor.svelte |  73 ++++
 src/lib/components/layout/Sidebar.svelte      |   4 +-
 src/routes/(app)/+layout.svelte               |   3 +-
 src/routes/(app)/trino/+page.svelte           | 351 ++++++++++++++++++
 src/routes/api/trino/query/+server.ts         | 211 +++++++++++
 11 files changed, 984 insertions(+), 13 deletions(-)
 create mode 100644 e2e/trino.spec.ts
 create mode 100644 src/lib/components/editor/MonacoEditor.svelte
 create mode 100644 src/routes/(app)/trino/+page.svelte
 create mode 100644 src/routes/api/trino/query/+server.ts

diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
index bcc29f04..2aa710b4 100644
--- a/e2e/smoke.spec.ts
+++ b/e2e/smoke.spec.ts
@@ -20,9 +20,10 @@ test.describe('Smoke tests', () => {
     // Dashboard content is rendered
     await expect(page.getByText('Welcome back')).toBeVisible();
 
-    // Trino nav item is present but disabled
+    // Trino nav item is present and navigable
     const trinoLink = page.getByRole('link', { name: 'Trino' });
-    await expect(trinoLink).toHaveAttribute('aria-disabled', 'true');
+    await expect(trinoLink).toBeVisible();
+    await expect(trinoLink).not.toHaveAttribute('aria-disabled', 'true');
   });
 
   test('theme toggle switches between light and dark', async ({ page }) => {
diff --git a/e2e/trino.spec.ts b/e2e/trino.spec.ts
new file mode 100644
index 00000000..77afb1d0
--- /dev/null
+++ b/e2e/trino.spec.ts
@@ -0,0 +1,252 @@
+import { test, expect, type Page } from '@playwright/test';
+
+const COLUMNS = [
+  { name: 'id', type: 'integer' },
+  { name: 'name', type: 'varchar' }
+];
+
+// In SvelteKit + Vite dev mode, the `load` event fires before all dynamic module
+// imports finish. Svelte 5 attaches event handlers only after those imports
+// complete (hydration). Poll for the theme key — the layout writes it on mount —
+// as a reliable signal that the app is fully hydrated and interactive.
+async function waitForHydration(page: Page) {
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem('theme')))
+    .toMatch(/^(light|dark)$/);
+}
+
+test.describe('Trino query editor', () => {
+  test.use({ locale: 'en-US' });
+
+  test.beforeEach(async ({ page }) => {
+    // Pre-populate localStorage so the connection config and SQL are ready without
+    // user interaction — addInitScript runs before any page scripts execute.
+    await page.addInitScript(() => {
+      localStorage.setItem('trino_url', 'http://trino.example.com:8080');
+      localStorage.setItem('trino_auth_type', 'none');
+      localStorage.setItem('trino_sql', 'SELECT id, name FROM users');
+    });
+  });
+
+  test('page renders with editor and results sections', async ({ page }) => {
+    await page.goto('/trino');
+
+    await expect(page.getByRole('heading', { name: 'Trino' })).toBeVisible();
+    await expect(page.getByText('SQL editor')).toBeVisible();
+    await expect(page.getByText('Query results')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Run query' })).toBeVisible();
+    await expect(page.getByText('No results')).toBeVisible();
+  });
+
+  test('Trino nav item is active when on /trino', async ({ page }) => {
+    await page.goto('/trino');
+
+    const trinoLink = page.getByRole('link', { name: 'Trino' });
+    await expect(trinoLink).toHaveAttribute('aria-current', 'page');
+  });
+
+  test('running a query displays the results table', async ({ page }) => {
+    await page.route('**/api/trino/query', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          queryId: 'q1',
+          columns: COLUMNS,
+          rows: [
+            [1, 'Alice'],
+            [2, 'Bob'],
+            [3, 'Carol']
+          ],
+          hasMore: false,
+          totalRows: 3
+        })
+      });
+    });
+
+    await page.goto('/trino');
+    await waitForHydration(page);
+    await page.getByRole('button', { name: 'Run query' }).click();
+
+    const table = page.getByRole('table', { name: 'Query results' });
+    await expect(table).toBeVisible();
+    await expect(table.getByRole('columnheader', { name: 'id' })).toBeVisible();
+    await expect(table.getByRole('columnheader', { name: 'name' })).toBeVisible();
+    await expect(table.getByRole('cell', { name: '1' })).toBeVisible();
+    await expect(table.getByRole('cell', { name: 'Alice' })).toBeVisible();
+    await expect(page.getByText('Rows 1–3 of 3')).toBeVisible();
+  });
+
+  test('Ctrl+Enter triggers query execution', async ({ page }) => {
+    let called = false;
+    await page.route('**/api/trino/query', async (route) => {
+      called = true;
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          queryId: 'q1',
+          columns: COLUMNS,
+          rows: [[1, 'Alice']],
+          hasMore: false,
+          totalRows: 1
+        })
+      });
+    });
+
+    await page.goto('/trino');
+    await waitForHydration(page);
+    await page.keyboard.press('Control+Enter');
+
+    await expect.poll(() => called).toBe(true);
+    await expect(page.getByRole('table', { name: 'Query results' })).toBeVisible();
+  });
+
+  test('query error is shown in an alert', async ({ page }) => {
+    await page.route('**/api/trino/query', async (route) => {
+      await route.fulfill({
+        status: 400,
+        contentType: 'application/json',
+        body: JSON.stringify({ error: 'syntax error at position 7' })
+      });
+    });
+
+    await page.goto('/trino');
+    await waitForHydration(page);
+    await page.getByRole('button', { name: 'Run query' }).click();
+
+    // Monaco also renders role="alert" nodes for its own accessibility — filter by content.
+    const alert = page.getByRole('alert').filter({ hasText: 'Query error' });
+    await expect(alert).toBeVisible();
+    await expect(alert.getByText('syntax error at position 7')).toBeVisible();
+  });
+
+  test('pagination navigates between pages', async ({ page }) => {
+    const allRows = Array.from({ length: 30 }, (_, i) => [i + 1, `Row ${i + 1}`]);
+
+    await page.route('**/api/trino/query', async (route) => {
+      const body = JSON.parse((await route.request().postData()) ?? '{}');
+      const pg: number = body.page ?? 0;
+      const ps = 25;
+      const slice = allRows.slice(pg * ps, pg * ps + ps);
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          queryId: 'q-pages',
+          columns: COLUMNS,
+          rows: slice,
+          hasMore: (pg + 1) * ps < allRows.length,
+          totalRows: allRows.length
+        })
+      });
+    });
+
+    await page.goto('/trino');
+    await waitForHydration(page);
+    await page.getByRole('button', { name: 'Run query' }).click();
+
+    await expect(page.getByText('Rows 1–25 of 30')).toBeVisible();
+
+    const nextBtn = page.getByRole('button', { name: 'Next page' });
+    const prevBtn = page.getByRole('button', { name: 'Previous page' });
+    await expect(prevBtn).toBeDisabled();
+    await expect(nextBtn).toBeEnabled();
+
+    await nextBtn.click();
+    await expect(page.getByText('Rows 26–30 of 30')).toBeVisible();
+    await expect(prevBtn).toBeEnabled();
+    await expect(nextBtn).toBeDisabled();
+
+    await prevBtn.click();
+    await expect(page.getByText('Rows 1–25 of 30')).toBeVisible();
+  });
+
+  test('session expired shows correct message', async ({ page }) => {
+    let call = 0;
+    await page.route('**/api/trino/query', async (route) => {
+      call++;
+      if (call === 1) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            queryId: 'exp-id',
+            columns: COLUMNS,
+            rows: [[1, 'Alice']],
+            hasMore: true,
+            totalRows: 50
+          })
+        });
+      } else {
+        await route.fulfill({
+          status: 404,
+          contentType: 'application/json',
+          body: JSON.stringify({ error: 'session_expired' })
+        });
+      }
+    });
+
+    await page.goto('/trino');
+    await waitForHydration(page);
+    await page.getByRole('button', { name: 'Run query' }).click();
+    await expect(page.getByRole('table')).toBeVisible();
+
+    await page.getByRole('button', { name: 'Next page' }).click();
+
+    const alert = page.getByRole('alert').filter({ hasText: 'Query session expired' });
+    await expect(alert).toBeVisible();
+  });
+
+  test('connection section expands to reveal URL and auth controls', async ({ page }) => {
+    await page.goto('/trino');
+
+    // The DaisyUI collapse uses a visually-hidden checkbox as its toggle.
+    await page.getByRole('checkbox', { name: 'Connection' }).check({ force: true });
+
+    const urlInput = page.getByRole('textbox', { name: 'URL' });
+    await expect(urlInput).toBeVisible();
+    await expect(urlInput).toHaveValue('http://trino.example.com:8080');
+  });
+
+  test('switching to basic auth reveals credential fields', async ({ page }) => {
+    await page.goto('/trino');
+    await page.getByRole('checkbox', { name: 'Connection' }).check({ force: true });
+
+    // No credentials visible for 'none' auth
+    await expect(page.getByLabel('Username')).not.toBeVisible();
+    await expect(page.getByLabel('Password')).not.toBeVisible();
+
+    // Switch to basic auth
+    await page.getByRole('radio', { name: 'Basic' }).check({ force: true });
+
+    await expect(page.getByLabel('Username')).toBeVisible();
+    await expect(page.getByLabel('Password')).toBeVisible();
+  });
+
+  test('null cell values render as italic null placeholder', async ({ page }) => {
+    await page.route('**/api/trino/query', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          queryId: 'q-null',
+          columns: [{ name: 'value', type: 'varchar' }],
+          rows: [[null], ['hello']],
+          hasMore: false,
+          totalRows: 2
+        })
+      });
+    });
+
+    await page.goto('/trino');
+    await waitForHydration(page);
+    await page.getByRole('button', { name: 'Run query' }).click();
+
+    const table = page.getByRole('table');
+    await expect(table).toBeVisible();
+    await expect(table.getByText('null')).toBeVisible();
+    await expect(table.getByText('hello')).toBeVisible();
+  });
+});
diff --git a/messages/de.json b/messages/de.json
index 9b3b2158..979e2548 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -33,8 +33,28 @@
   "page_title_dashboard": "Dashboard",
   "page_title_default": "Stackable",
   "page_title_suffix": "Stackable",
+  "page_title_trino": "Trino",
   "setup_steps_label": "Einrichtungsschritte",
   "language_label": "Sprache",
   "language_en": "English",
-  "language_de": "Deutsch"
+  "language_de": "Deutsch",
+  "trino_run_query": "Abfrage ausführen",
+  "trino_results_empty": "Keine Ergebnisse",
+  "trino_query_error": "Abfragefehler",
+  "trino_running": "Wird ausgeführt...",
+  "trino_connection_url_placeholder": "https://trino.example.com:8443",
+  "trino_editor_label": "SQL-Editor",
+  "trino_results_label": "Abfrageergebnisse",
+  "trino_rows_range": "Zeilen {start}–{end} von {total}",
+  "trino_session_expired": "Abfragesitzung abgelaufen – bitte Abfrage erneut ausführen.",
+  "trino_page_size": "Zeilen pro Seite",
+  "trino_prev_page": "Vorherige Seite",
+  "trino_next_page": "Nächste Seite",
+  "trino_connection_label": "Verbindung",
+  "trino_connection_url": "URL",
+  "trino_connection_auth": "Authentifizierung",
+  "trino_auth_none": "Keine",
+  "trino_auth_basic": "Basic",
+  "trino_auth_username": "Benutzername",
+  "trino_auth_password": "Passwort"
 }
diff --git a/messages/en.json b/messages/en.json
index ca545214..98683629 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -33,8 +33,28 @@
   "page_title_dashboard": "Dashboard",
   "page_title_default": "Stackable",
   "page_title_suffix": "Stackable",
+  "page_title_trino": "Trino",
   "setup_steps_label": "Setup steps",
   "language_label": "Language",
   "language_en": "English",
-  "language_de": "Deutsch"
+  "language_de": "Deutsch",
+  "trino_run_query": "Run query",
+  "trino_results_empty": "No results",
+  "trino_query_error": "Query error",
+  "trino_running": "Running...",
+  "trino_connection_url_placeholder": "https://trino.example.com:8443",
+  "trino_editor_label": "SQL editor",
+  "trino_results_label": "Query results",
+  "trino_rows_range": "Rows {start}–{end} of {total}",
+  "trino_session_expired": "Query session expired — please re-run the query.",
+  "trino_page_size": "Rows per page",
+  "trino_prev_page": "Previous page",
+  "trino_next_page": "Next page",
+  "trino_connection_label": "Connection",
+  "trino_connection_url": "URL",
+  "trino_connection_auth": "Auth",
+  "trino_auth_none": "No auth",
+  "trino_auth_basic": "Basic",
+  "trino_auth_username": "Username",
+  "trino_auth_password": "Password"
 }
diff --git a/package-lock.json b/package-lock.json
index 26db3387..8b661b6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,9 @@
       "name": "@stackable/stackable-ui",
       "version": "0.0.1",
       "dependencies": {
-        "@internationalized/date": "^3.11.0"
+        "@internationalized/date": "^3.11.0",
+        "monaco-editor": "^0.55.1",
+        "undici": "^7.22.0"
       },
       "devDependencies": {
         "@eslint/compat": "^2.0.2",
@@ -19,7 +21,7 @@
         "@sveltejs/kit": "^2.51.0",
         "@sveltejs/vite-plugin-svelte": "^6.2.4",
         "@tailwindcss/vite": "^4.1.18",
-        "@types/node": "^24",
+        "@types/node": "^24.10.13",
         "daisyui": "^5.5.18",
         "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
@@ -1490,7 +1492,7 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/validator": {
@@ -2266,6 +2268,15 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/effect": {
       "version": "3.19.17",
       "resolved": "https://registry.npmjs.org/effect/-/effect-3.19.17.tgz",
@@ -3362,6 +3373,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.23.0",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.23.0.tgz",
@@ -3399,6 +3422,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -4568,6 +4601,15 @@
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
+    "node_modules/undici": {
+      "version": "7.22.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.22.0.tgz",
+      "integrity": "sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/undici-types": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
diff --git a/package.json b/package.json
index 9e4aa540..c2022bb3 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@sveltejs/kit": "^2.51.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^24",
+    "@types/node": "^24.10.13",
     "daisyui": "^5.5.18",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
@@ -44,6 +44,8 @@
     "zod": "^4.3.6"
   },
   "dependencies": {
-    "@internationalized/date": "^3.11.0"
+    "@internationalized/date": "^3.11.0",
+    "monaco-editor": "^0.55.1",
+    "undici": "^7.22.0"
   }
 }
diff --git a/src/lib/components/editor/MonacoEditor.svelte b/src/lib/components/editor/MonacoEditor.svelte
new file mode 100644
index 00000000..4a75a366
--- /dev/null
+++ b/src/lib/components/editor/MonacoEditor.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { browser } from '$app/environment';
+
+  let {
+    value = $bindable(),
+    language = 'sql'
+  }: {
+    value?: string;
+    language?: string;
+  } = $props();
+
+  let container: HTMLDivElement;
+  let editor: import('monaco-editor').editor.IStandaloneCodeEditor | undefined;
+  let monaco: typeof import('monaco-editor') | undefined;
+  let observer: MutationObserver | undefined;
+
+  // Start loading in parallel with the rest of the page — not deferred to onMount.
+  // Guarded by `browser` because SvelteKit evaluates component scripts on the server too.
+  const workerImport = browser
+    ? import('monaco-editor/esm/vs/editor/editor.worker?worker')
+    : null;
+  const monacoImport = browser ? import('monaco-editor') : null;
+
+  // Detect current theme from DaisyUI data-theme attribute
+  function getMonacoTheme(): string {
+    if (!browser) return 'vs-dark';
+    return document.documentElement.dataset.theme === 'dark' ? 'vs-dark' : 'vs';
+  }
+
+  onMount(async () => {
+    // By the time onMount fires the imports are likely already resolved.
+    const EditorWorker = (await workerImport!).default;
+    self.MonacoEnvironment = {
+      getWorker: () => new EditorWorker()
+    };
+
+    monaco = await monacoImport!;
+
+    editor = monaco.editor.create(container, {
+      value,
+      language,
+      theme: getMonacoTheme(),
+      minimap: { enabled: false },
+      fontSize: 14,
+      lineNumbers: 'on',
+      scrollBeyondLastLine: false,
+      automaticLayout: true,
+      padding: { top: 12, bottom: 12 },
+      wordWrap: 'on'
+    });
+
+    editor.onDidChangeModelContent(() => {
+      value = editor!.getValue();
+    });
+
+    // Watch for theme changes
+    observer = new MutationObserver(() => {
+      monaco?.editor.setTheme(getMonacoTheme());
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
+  });
+
+  onDestroy(() => {
+    observer?.disconnect();
+    editor?.dispose();
+  });
+</script>
+
+<div bind:this={container} class="h-full w-full"></div>
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 9653898e..b0a9eaff 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -34,9 +34,7 @@
         {
           label: m.nav_trino(),
           href: '/trino',
-          icon: 'database',
-          badge: m.nav_badge_soon(),
-          disabled: true
+          icon: 'database'
         }
       ]
     }
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 09ab9a1f..6509644a 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -10,7 +10,8 @@
   let mobileOpen = $state(false);
 
   const pageTitles: Record<string, () => string> = {
-    '/': m.page_title_dashboard
+    '/': m.page_title_dashboard,
+    '/trino': m.page_title_trino
   };
 
   let title = $derived((pageTitles[page.url.pathname] ?? m.page_title_default)());
diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
new file mode 100644
index 00000000..ae317790
--- /dev/null
+++ b/src/routes/(app)/trino/+page.svelte
@@ -0,0 +1,351 @@
+<script lang="ts">
+  import * as m from '$lib/paraglide/messages.js';
+  import MonacoEditor from '$lib/components/editor/MonacoEditor.svelte';
+
+  const uid = $props.id();
+
+  const PAGE_SIZES = [25, 50, 100];
+
+  function ls(key: string, fallback: string): string {
+    try {
+      return localStorage.getItem(key) ?? fallback;
+    } catch {
+      return fallback;
+    }
+  }
+
+  let connectionUrl = $state(ls('trino_url', ''));
+  let authType = $state<'none' | 'basic'>(ls('trino_auth_type', 'none') as 'none' | 'basic');
+  let authUsername = $state(ls('trino_username', ''));
+  let authPassword = $state(ls('trino_password', ''));
+
+  let sql = $state(ls('trino_sql', 'SELECT 1'));
+  let running = $state(false);
+  let columns = $state<{ name: string; type: string }[]>([]);
+  let rows = $state<unknown[][]>([]);
+  let error = $state<string | null>(null);
+  let page = $state(0);
+  let pageSize = $state(25);
+  let hasMore = $state(false);
+  let queryId = $state<string | null>(null);
+  let totalRows = $state<number | null>(null);
+
+  let connectionSummary = $derived(() => {
+    const host = connectionUrl ? connectionUrl.replace(/^https?:\/\//, '').replace(/\/$/, '') : '—';
+    const auth = authType === 'basic' ? m.trino_auth_basic() : m.trino_auth_none();
+    return `${host} · ${auth}`;
+  });
+
+  // Persist connection config and invalidate query cache on change.
+  $effect(() => {
+    localStorage.setItem('trino_url', connectionUrl);
+    localStorage.setItem('trino_auth_type', authType);
+    localStorage.setItem('trino_username', authUsername);
+    localStorage.setItem('trino_password', authPassword);
+    queryId = null;
+  });
+
+  // Persist SQL query.
+  $effect(() => {
+    localStorage.setItem('trino_sql', sql);
+  });
+
+  let rowStart = $derived(page * pageSize + 1);
+  let rowEnd = $derived(page * pageSize + rows.length);
+
+  function buildConnection() {
+    return {
+      url: connectionUrl,
+      auth:
+        authType === 'basic'
+          ? { type: 'basic' as const, username: authUsername, password: authPassword }
+          : { type: 'none' as const }
+    };
+  }
+
+  async function fetchResults(isNewQuery: boolean) {
+    if (running) return;
+    running = true;
+    error = null;
+    hasMore = false;
+
+    if (isNewQuery) {
+      columns = [];
+      rows = [];
+      queryId = null;
+      totalRows = null;
+    }
+
+    try {
+      const body =
+        queryId && !isNewQuery
+          ? { queryId, page, pageSize }
+          : { sql, page, pageSize, connection: buildConnection() };
+
+      const res = await fetch('/api/trino/query', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      });
+
+      const data = await res.json();
+
+      if (data.error === 'session_expired') {
+        error = m.trino_session_expired();
+        queryId = null;
+      } else if (data.error) {
+        error = data.error;
+      } else {
+        queryId = data.queryId ?? null;
+        columns = data.columns ?? [];
+        rows = data.rows ?? [];
+        hasMore = data.hasMore ?? false;
+        totalRows = data.totalRows ?? null;
+      }
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Unknown error';
+    } finally {
+      running = false;
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+      page = 0;
+      fetchResults(true);
+    }
+  }
+
+  function handleRunClick() {
+    page = 0;
+    fetchResults(true);
+  }
+
+  function goToPrevPage() {
+    page -= 1;
+    fetchResults(false);
+  }
+
+  function goToNextPage() {
+    page += 1;
+    fetchResults(false);
+  }
+
+  function handlePageSizeChange(event: Event) {
+    pageSize = parseInt((event.target as HTMLSelectElement).value, 10);
+    page = 0;
+    fetchResults(false);
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="flex h-full flex-col gap-4">
+  <!-- Connection config section -->
+  <div class="bg-base-100 border-base-300 collapse rounded-xl border">
+    <input type="checkbox" class="peer" aria-label={m.trino_connection_label()} />
+    <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"
+          placeholder={m.trino_connection_url_placeholder()}
+          bind:value={connectionUrl}
+        />
+      </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="join-item btn btn-sm"
+            type="radio"
+            name="{uid}-auth"
+            aria-label={m.trino_auth_none()}
+            value="none"
+            bind:group={authType}
+          />
+          <input
+            id="{uid}-auth-basic"
+            class="join-item btn 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"
+              autocomplete="username"
+              bind:value={authUsername}
+            />
+          </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"
+              autocomplete="current-password"
+              bind:value={authPassword}
+            />
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Editor section -->
+  <div class="bg-base-100 border-base-300 flex flex-col rounded-xl border">
+    <div class="border-base-300 flex items-center justify-between border-b px-4 py-2">
+      <span class="text-base-content/60 text-sm font-medium">{m.trino_editor_label()}</span>
+      <button
+        class="btn btn-primary btn-sm"
+        onclick={handleRunClick}
+        disabled={running}
+        aria-label={m.trino_run_query()}
+      >
+        {#if running}
+          <span class="loading loading-spinner loading-xs"></span>
+          {m.trino_running()}
+        {:else}
+          {m.trino_run_query()}
+          <kbd class="kbd kbd-sm opacity-60">Ctrl+↵</kbd>
+        {/if}
+      </button>
+    </div>
+    <div class="h-64">
+      <MonacoEditor bind:value={sql} language="sql" />
+    </div>
+  </div>
+
+  <!-- Results section -->
+  <div class="bg-base-100 border-base-300 flex min-h-0 flex-1 flex-col rounded-xl border">
+    <div class="border-base-300 flex items-center border-b px-4 py-2">
+      <span class="text-base-content/60 text-sm font-medium">{m.trino_results_label()}</span>
+      {#if rows.length > 0 && totalRows !== null}
+        <span class="text-base-content/40 ml-2 text-xs">
+          {m.trino_rows_range({ start: rowStart, end: rowEnd, total: totalRows })}
+        </span>
+      {/if}
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-auto p-4">
+      {#if error}
+        <div class="alert alert-error" role="alert">
+          <svg
+            class="h-5 w-5 shrink-0"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 8v4m0 4h.01" />
+          </svg>
+          <div>
+            <p class="font-semibold">{m.trino_query_error()}</p>
+            <p class="text-sm opacity-80">{error}</p>
+          </div>
+        </div>
+      {:else if columns.length > 0}
+        <div class="overflow-x-auto" class:opacity-50={running}>
+          <table class="table-sm table-zebra table" aria-label={m.trino_results_label()}>
+            <thead>
+              <tr>
+                {#each columns as col (col.name)}
+                  <th scope="col" class="whitespace-nowrap">{col.name}</th>
+                {/each}
+              </tr>
+            </thead>
+            <tbody>
+              {#each rows as row, rowIdx (rowIdx)}
+                <tr>
+                  {#each row as cell, cellIdx (cellIdx)}
+                    <td class="font-mono text-xs whitespace-nowrap">
+                      {#if cell === null}
+                        <span class="text-base-content/50 italic">null</span>
+                      {:else}
+                        {String(cell)}
+                      {/if}
+                    </td>
+                  {/each}
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {:else if !running}
+        <p class="text-base-content/40 py-8 text-center text-sm">{m.trino_results_empty()}</p>
+      {/if}
+    </div>
+
+    {#if columns.length > 0}
+      <div class="border-base-300 flex items-center justify-between border-t px-4 py-3">
+        <div class="join">
+          <button
+            class="btn btn-sm join-item"
+            onclick={goToPrevPage}
+            disabled={page === 0 || running}
+            aria-label={m.trino_prev_page()}
+          >
+            ‹
+          </button>
+          <button
+            class="btn btn-sm join-item"
+            onclick={goToNextPage}
+            disabled={!hasMore || running}
+            aria-label={m.trino_next_page()}
+          >
+            ›
+          </button>
+        </div>
+
+        <div class="flex items-center gap-3">
+          <label for="{uid}-page-size" class="text-base-content/60 text-sm whitespace-nowrap">
+            {m.trino_page_size()}
+          </label>
+          <select
+            id="{uid}-page-size"
+            class="select select-sm"
+            value={pageSize}
+            onchange={handlePageSizeChange}
+            disabled={running}
+          >
+            {#each PAGE_SIZES as size (size)}
+              <option value={size}>{size}</option>
+            {/each}
+          </select>
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/routes/api/trino/query/+server.ts b/src/routes/api/trino/query/+server.ts
new file mode 100644
index 00000000..d4f1776a
--- /dev/null
+++ b/src/routes/api/trino/query/+server.ts
@@ -0,0 +1,211 @@
+import { json } from '@sveltejs/kit';
+import { Agent, fetch as undiciFetch } from 'undici';
+import type { RequestHandler } from './$types';
+
+const POLL_TIMEOUT_MS = 30_000;
+const MAX_CACHED_ROWS = 100_000;
+const CACHE_TTL_MS = 5 * 60 * 1000;
+
+const agent = new Agent({
+  connect: { rejectUnauthorized: false }
+});
+
+interface TrinoColumn {
+  name: string;
+  type: string;
+}
+
+interface TrinoResponse {
+  id?: string;
+  nextUri?: string;
+  columns?: TrinoColumn[];
+  data?: unknown[][];
+  stats?: { state: string };
+  error?: { message: string; errorCode: number };
+}
+
+interface CacheEntry {
+  columns: TrinoColumn[];
+  rows: unknown[][];
+  createdAt: number;
+}
+
+type AuthConfig = { type: 'none' } | { type: 'basic'; username: string; password: string };
+
+interface ConnectionConfig {
+  url: string;
+  auth: AuthConfig;
+}
+
+const queryCache = new Map<string, CacheEntry>();
+
+function evictStale() {
+  const cutoff = Date.now() - CACHE_TTL_MS;
+  for (const [id, entry] of queryCache) {
+    if (entry.createdAt < cutoff) queryCache.delete(id);
+  }
+}
+
+function buildAuthHeaders(auth: AuthConfig): Record<string, string> {
+  if (auth.type === 'basic') {
+    const encoded = Buffer.from(`${auth.username}:${auth.password}`).toString('base64');
+    return {
+      'X-Trino-User': auth.username,
+      Authorization: `Basic ${encoded}`
+    };
+  }
+  return { 'X-Trino-User': 'anonymous' };
+}
+
+async function trinoFetch(
+  url: string,
+  auth: AuthConfig,
+  options?: RequestInit
+): Promise<TrinoResponse> {
+  const res = await undiciFetch(url, {
+    ...options,
+    dispatcher: agent,
+    headers: {
+      ...buildAuthHeaders(auth),
+      'X-Trino-Source': 'stackable-ui',
+      ...(options?.headers ?? {})
+    }
+  } as Parameters<typeof undiciFetch>[1]);
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Trino HTTP ${res.status}: ${text}`);
+  }
+
+  return res.json() as Promise<TrinoResponse>;
+}
+
+function parseConnection(raw: unknown): ConnectionConfig | null {
+  if (!raw || typeof raw !== 'object') return null;
+  const conn = raw as Record<string, unknown>;
+  const url = conn.url;
+  if (typeof url !== 'string' || (!url.startsWith('http://') && !url.startsWith('https://'))) {
+    return null;
+  }
+  const auth = conn.auth as Record<string, unknown> | undefined;
+  if (!auth || typeof auth !== 'object') return null;
+  if (auth.type === 'none') {
+    return { url, auth: { type: 'none' } };
+  }
+  if (
+    auth.type === 'basic' &&
+    typeof auth.username === 'string' &&
+    typeof auth.password === 'string'
+  ) {
+    return { url, auth: { type: 'basic', username: auth.username, password: auth.password } };
+  }
+  return null;
+}
+
+const ALLOWED_PAGE_SIZES = new Set([25, 50, 100]);
+
+export const POST: RequestHandler = async ({ request }) => {
+  const body = await request.json();
+  const pageSize: number = ALLOWED_PAGE_SIZES.has(body.pageSize) ? body.pageSize : 25;
+  const page: number = typeof body.page === 'number' && body.page >= 0 ? Math.floor(body.page) : 0;
+
+  // Pagination: slice from server-side cache, no Trino re-execution.
+  if (typeof body.queryId === 'string' && body.queryId) {
+    const cached = queryCache.get(body.queryId);
+    if (!cached) {
+      console.info('[trino] cache miss for queryId=%s (session expired)', body.queryId);
+      return json({ error: 'session_expired' }, { status: 404 });
+    }
+    const start = page * pageSize;
+    console.debug('[trino] cache hit queryId=%s page=%d pageSize=%d', body.queryId, page, pageSize);
+    return json({
+      queryId: body.queryId,
+      columns: cached.columns,
+      rows: cached.rows.slice(start, start + pageSize),
+      hasMore: start + pageSize < cached.rows.length,
+      totalRows: cached.rows.length
+    });
+  }
+
+  // New query execution — connection config required.
+  const { sql } = body;
+  if (!sql?.trim()) {
+    return json({ error: 'No SQL provided' }, { status: 400 });
+  }
+
+  const connection = parseConnection(body.connection);
+  if (!connection) {
+    return json(
+      {
+        error:
+          'Invalid or missing connection config. Provide connection.url (http/https) and connection.auth.'
+      },
+      { status: 400 }
+    );
+  }
+
+  evictStale();
+
+  const start = Date.now();
+  console.info('[trino] executing query on %s', connection.url);
+
+  const deadline = start + POLL_TIMEOUT_MS;
+  let columns: TrinoColumn[] = [];
+  let rows: unknown[][] = [];
+
+  try {
+    let response = await trinoFetch(`${connection.url}/v1/statement`, connection.auth, {
+      method: 'POST',
+      body: sql.replace(/;\s*$/, '').trim(),
+      headers: { 'Content-Type': 'text/plain' }
+    });
+
+    if (response.error) {
+      console.info('[trino] query error: %s', response.error.message);
+      return json({ error: response.error.message }, { status: 400 });
+    }
+
+    if (response.columns) columns = response.columns;
+    if (response.data) rows = rows.concat(response.data);
+
+    while (response.nextUri && rows.length < MAX_CACHED_ROWS) {
+      if (Date.now() > deadline) {
+        console.info('[trino] query timed out after %dms on %s', POLL_TIMEOUT_MS, connection.url);
+        return json({ error: 'Query timed out after 30 seconds' }, { status: 408 });
+      }
+
+      response = await trinoFetch(response.nextUri, connection.auth);
+
+      if (response.error) {
+        console.info('[trino] query error: %s', response.error.message);
+        return json({ error: response.error.message }, { status: 400 });
+      }
+
+      if (response.columns && columns.length === 0) columns = response.columns;
+      if (response.data) rows = rows.concat(response.data);
+    }
+
+    const queryId = crypto.randomUUID();
+    queryCache.set(queryId, { columns, rows, createdAt: Date.now() });
+
+    console.info(
+      '[trino] query complete: %d rows, %d cols, %dms, queryId=%s',
+      rows.length,
+      columns.length,
+      Date.now() - start,
+      queryId
+    );
+
+    return json({
+      queryId,
+      columns,
+      rows: rows.slice(0, pageSize),
+      hasMore: rows.length > pageSize,
+      totalRows: rows.length
+    });
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Unknown error';
+    console.error('[trino] unexpected error on %s: %s', connection.url, message);
+    return json({ error: message }, { status: 500 });
+  }
+};

From 132bcb6220898c9f42769f3f69d4933eddea483b Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Mon, 23 Feb 2026 17:07:58 +0100
Subject: [PATCH 04/19] fix: run query shortcut not working when editor is
 selected

---
 src/lib/components/editor/MonacoEditor.svelte | 13 ++++++++++++-
 src/routes/(app)/trino/+page.svelte           |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/editor/MonacoEditor.svelte b/src/lib/components/editor/MonacoEditor.svelte
index 4a75a366..162e316a 100644
--- a/src/lib/components/editor/MonacoEditor.svelte
+++ b/src/lib/components/editor/MonacoEditor.svelte
@@ -4,10 +4,12 @@
 
   let {
     value = $bindable(),
-    language = 'sql'
+    language = 'sql',
+    onExecute
   }: {
     value?: string;
     language?: string;
+    onExecute?: () => void;
   } = $props();
 
   let container: HTMLDivElement;
@@ -54,6 +56,15 @@
       value = editor!.getValue();
     });
 
+    if (onExecute) {
+      editor.addAction({
+        id: 'execute-query',
+        label: 'Execute Query',
+        keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+        run: onExecute
+      });
+    }
+
     // Watch for theme changes
     observer = new MutationObserver(() => {
       monaco?.editor.setTheme(getMonacoTheme());
diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index ae317790..756ce90a 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -242,7 +242,7 @@
       </button>
     </div>
     <div class="h-64">
-      <MonacoEditor bind:value={sql} language="sql" />
+      <MonacoEditor bind:value={sql} language="sql" onExecute={handleRunClick} />
     </div>
   </div>
 

From 61525776b8879b9d82ad0036eb436361bdc110b8 Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Mon, 23 Feb 2026 17:23:20 +0100
Subject: [PATCH 05/19] reduce http request metric buckets

---
 src/lib/server/metrics.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/server/metrics.ts b/src/lib/server/metrics.ts
index 9e57bea2..d7b2fe67 100644
--- a/src/lib/server/metrics.ts
+++ b/src/lib/server/metrics.ts
@@ -8,6 +8,6 @@ export const httpRequestDuration = new Histogram({
   name: 'http_request_duration_seconds',
   help: 'Duration of HTTP requests in seconds',
   labelNames: ['method', 'route', 'status'],
-  buckets: [0.005, 0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1, 2.5, 5, 10],
+  buckets: [0.25, 1.0],
   registers: [register]
 });

From 0d0bcaf4847351b78a9d3e3b6369f3c341c5db6e Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Wed, 25 Feb 2026 14:20:30 +0100
Subject: [PATCH 06/19] fix invisible Enter symbol on button

---
 src/routes/(app)/trino/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index 756ce90a..a1c34dbc 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -237,7 +237,7 @@
           {m.trino_running()}
         {:else}
           {m.trino_run_query()}
-          <kbd class="kbd kbd-sm opacity-60">Ctrl+↵</kbd>
+          <kbd class="kbd kbd-sm text-base-content opacity-60">Ctrl+↵</kbd>
         {/if}
       </button>
     </div>

From b018079f8cd2624404e7277ab65ab1b000245d3e Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Wed, 25 Feb 2026 14:34:41 +0100
Subject: [PATCH 07/19] replace per-component theme detection with shared
 reactive state

---
 src/lib/components/editor/MonacoEditor.svelte | 26 +++++++------------
 src/lib/theme.svelte.ts                       |  3 +++
 src/routes/+layout.svelte                     | 10 +++++++
 3 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/theme.svelte.ts

diff --git a/src/lib/components/editor/MonacoEditor.svelte b/src/lib/components/editor/MonacoEditor.svelte
index 162e316a..3932af87 100644
--- a/src/lib/components/editor/MonacoEditor.svelte
+++ b/src/lib/components/editor/MonacoEditor.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { browser } from '$app/environment';
+  import { theme } from '$lib/theme.svelte';
 
   let {
     value = $bindable(),
@@ -14,8 +15,7 @@
 
   let container: HTMLDivElement;
   let editor: import('monaco-editor').editor.IStandaloneCodeEditor | undefined;
-  let monaco: typeof import('monaco-editor') | undefined;
-  let observer: MutationObserver | undefined;
+  let monaco = $state<typeof import('monaco-editor') | undefined>(undefined);
 
   // Start loading in parallel with the rest of the page — not deferred to onMount.
   // Guarded by `browser` because SvelteKit evaluates component scripts on the server too.
@@ -24,12 +24,14 @@
     : null;
   const monacoImport = browser ? import('monaco-editor') : null;
 
-  // Detect current theme from DaisyUI data-theme attribute
-  function getMonacoTheme(): string {
-    if (!browser) return 'vs-dark';
-    return document.documentElement.dataset.theme === 'dark' ? 'vs-dark' : 'vs';
+  function toMonacoTheme(t: string): string {
+    return t === 'dark' ? 'vs-dark' : 'vs';
   }
 
+  $effect(() => {
+    monaco?.editor.setTheme(toMonacoTheme(theme.current));
+  });
+
   onMount(async () => {
     // By the time onMount fires the imports are likely already resolved.
     const EditorWorker = (await workerImport!).default;
@@ -42,7 +44,7 @@
     editor = monaco.editor.create(container, {
       value,
       language,
-      theme: getMonacoTheme(),
+      theme: toMonacoTheme(theme.current),
       minimap: { enabled: false },
       fontSize: 14,
       lineNumbers: 'on',
@@ -64,19 +66,9 @@
         run: onExecute
       });
     }
-
-    // Watch for theme changes
-    observer = new MutationObserver(() => {
-      monaco?.editor.setTheme(getMonacoTheme());
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['data-theme']
-    });
   });
 
   onDestroy(() => {
-    observer?.disconnect();
     editor?.dispose();
   });
 </script>
diff --git a/src/lib/theme.svelte.ts b/src/lib/theme.svelte.ts
new file mode 100644
index 00000000..fba15341
--- /dev/null
+++ b/src/lib/theme.svelte.ts
@@ -0,0 +1,3 @@
+import { browser } from '$app/environment';
+
+export const theme = $state({ current: browser ? (document.documentElement.dataset.theme ?? 'dark') : 'dark' });
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5d83456e..5a33388c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
   import '../app.css';
+  import { onMount } from 'svelte';
+  import { theme } from '$lib/theme.svelte';
 
   let { children } = $props();
+
+  onMount(() => {
+    const observer = new MutationObserver(() => {
+      theme.current = document.documentElement.dataset.theme ?? 'dark';
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    return () => observer.disconnect();
+  });
 </script>
 
 {@render children()}

From 398394274a6f11a09b696d05a0c9584618883ac1 Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Wed, 25 Feb 2026 14:44:37 +0100
Subject: [PATCH 08/19] Add missing i18n message

---
 messages/de.json                    | 3 ++-
 messages/en.json                    | 3 ++-
 src/routes/(app)/trino/+page.svelte | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/messages/de.json b/messages/de.json
index 979e2548..526912cf 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -56,5 +56,6 @@
   "trino_auth_none": "Keine",
   "trino_auth_basic": "Basic",
   "trino_auth_username": "Benutzername",
-  "trino_auth_password": "Passwort"
+  "trino_auth_password": "Passwort",
+  "trino_unknown_error": "Unbekannter Fehler"
 }
diff --git a/messages/en.json b/messages/en.json
index 98683629..5c22111b 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -56,5 +56,6 @@
   "trino_auth_none": "No auth",
   "trino_auth_basic": "Basic",
   "trino_auth_username": "Username",
-  "trino_auth_password": "Password"
+  "trino_auth_password": "Password",
+  "trino_unknown_error": "Unknown error"
 }
diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index a1c34dbc..fc3aa90f 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -103,7 +103,7 @@
         totalRows = data.totalRows ?? null;
       }
     } catch (err) {
-      error = err instanceof Error ? err.message : 'Unknown error';
+      error = err instanceof Error ? err.message : m.trino_unknown_error();
     } finally {
       running = false;
     }

From 3aa197a4c2e48047c81bcb73fecba262bc9919ea Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Wed, 25 Feb 2026 15:09:42 +0100
Subject: [PATCH 09/19] Remove undici & skip tls validation in dev through env

---
 .env.development                      |  4 ++++
 package-lock.json                     | 12 +-----------
 package.json                          |  3 +--
 src/routes/api/trino/query/+server.ts | 10 ++--------
 4 files changed, 8 insertions(+), 21 deletions(-)
 create mode 100644 .env.development

diff --git a/.env.development b/.env.development
new file mode 100644
index 00000000..ca62220a
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,4 @@
+# Disable TLS certificate verification for development (e.g. self-signed Trino certs).
+# This file is committed and loaded automatically in dev mode.
+# Never set this in production.
+NODE_TLS_REJECT_UNAUTHORIZED=0
diff --git a/package-lock.json b/package-lock.json
index 8b661b6e..3de9d112 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@internationalized/date": "^3.11.0",
-        "monaco-editor": "^0.55.1",
-        "undici": "^7.22.0"
+        "monaco-editor": "^0.55.1"
       },
       "devDependencies": {
         "@eslint/compat": "^2.0.2",
@@ -4601,15 +4600,6 @@
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
-    "node_modules/undici": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-7.22.0.tgz",
-      "integrity": "sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.18.1"
-      }
-    },
     "node_modules/undici-types": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
diff --git a/package.json b/package.json
index c2022bb3..b5039491 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.11.0",
-    "monaco-editor": "^0.55.1",
-    "undici": "^7.22.0"
+    "monaco-editor": "^0.55.1"
   }
 }
diff --git a/src/routes/api/trino/query/+server.ts b/src/routes/api/trino/query/+server.ts
index d4f1776a..4745ce32 100644
--- a/src/routes/api/trino/query/+server.ts
+++ b/src/routes/api/trino/query/+server.ts
@@ -1,15 +1,10 @@
 import { json } from '@sveltejs/kit';
-import { Agent, fetch as undiciFetch } from 'undici';
 import type { RequestHandler } from './$types';
 
 const POLL_TIMEOUT_MS = 30_000;
 const MAX_CACHED_ROWS = 100_000;
 const CACHE_TTL_MS = 5 * 60 * 1000;
 
-const agent = new Agent({
-  connect: { rejectUnauthorized: false }
-});
-
 interface TrinoColumn {
   name: string;
   type: string;
@@ -62,15 +57,14 @@ async function trinoFetch(
   auth: AuthConfig,
   options?: RequestInit
 ): Promise<TrinoResponse> {
-  const res = await undiciFetch(url, {
+  const res = await fetch(url, {
     ...options,
-    dispatcher: agent,
     headers: {
       ...buildAuthHeaders(auth),
       'X-Trino-Source': 'stackable-ui',
       ...(options?.headers ?? {})
     }
-  } as Parameters<typeof undiciFetch>[1]);
+  });
 
   if (!res.ok) {
     const text = await res.text();

From 8e6f3338a4cce66dc0cc54f99f62287a9ee3b1c5 Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Wed, 25 Feb 2026 15:18:11 +0100
Subject: [PATCH 10/19] Document tech debt in new file

---
 AGENTS.md    |  5 ++++
 TECH_DEBT.md | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 TECH_DEBT.md

diff --git a/AGENTS.md b/AGENTS.md
index b8783f8d..9d61e3d9 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -34,8 +34,13 @@ This is a **single SvelteKit application** (not a monorepo).
 ├── static/               # Static assets
 ├── Dockerfile            # Production container image
 └── CLAUDE.md             # AI assistant instructions
+└── TECH_DEBT.md          # Known tech debt and deferred security concerns
 ```
 
+## Tech Debt
+
+When introducing shortcuts, known issues, or deferred security work, add an entry to `TECH_DEBT.md`. Keep entries concise: what the issue is, why it is acceptable now, and what the correct long-term fix is.
+
 ## Development Guidelines
 
 ### Browser Compatibility
diff --git a/TECH_DEBT.md b/TECH_DEBT.md
new file mode 100644
index 00000000..0728eb69
--- /dev/null
+++ b/TECH_DEBT.md
@@ -0,0 +1,71 @@
+# Tech Debt
+
+Tracked issues that are acceptable at the current early stage but must be addressed before production.
+
+---
+
+## Security
+
+### No authentication or authorisation on the Trino API route
+**File:** `src/routes/api/trino/query/+server.ts`, `src/hooks.server.ts`
+
+The `/api/trino/query` endpoint is completely unauthenticated. Any request — from any origin — can execute arbitrary SQL against any Trino instance. OIDC authentication is planned (env vars are wired up, `hooks.server.ts` has the right structure) but not yet implemented. Until auth middleware is in place there is also no per-user rate limiting or query quota.
+
+---
+
+### Trino credentials stored in localStorage
+**File:** `src/routes/(app)/trino/+page.svelte:41–44`
+
+Username and password are persisted in plaintext localStorage. This is convenient for development (survives page reloads) but violates credential storage best practices — localStorage is accessible to any script on the page and visible in DevTools. Long-term the connection config should be stored server-side (tied to the authenticated session), with credentials never leaving the server after initial setup.
+
+---
+
+### Credentials sent in every request body
+**File:** `src/routes/(app)/trino/+page.svelte:82–84`
+
+Because there is no server-side session yet, connection credentials (including password) are included in the JSON body of every `/api/trino/query` POST. Once server-side sessions exist the client should send only a session token, not raw credentials.
+
+---
+
+### Raw upstream error messages returned to the client
+**File:** `src/routes/api/trino/query/+server.ts:165, 181, 209`
+
+Trino error messages and Node.js exception messages are returned to the browser without any sanitisation. Trino errors may expose schema details, table names, or internal query plans. These should be classified (query error vs. infrastructure error) and sanitised before being surfaced to users.
+
+---
+
+## API & Validation
+
+### API route request body not validated with Zod
+**File:** `src/routes/api/trino/query/+server.ts:83–103`
+
+`parseConnection` uses manual `typeof` checks instead of a Zod schema. The AGENTS.md guidelines require Zod for all validation. Additionally, `request.json()` is called without a try/catch — a malformed JSON body will throw an unhandled error rather than returning a 400.
+
+---
+
+### In-memory query cache has no total size bound
+**File:** `src/routes/api/trino/query/+server.ts:40–47`
+
+Each cached query can hold up to `MAX_CACHED_ROWS` (100 000) rows. `evictStale()` is only called when a new query arrives, not on a timer, so a long idle period followed by many concurrent queries could accumulate significant memory before eviction runs. Needs a bounded cache (e.g. LRU with a memory cap) and a periodic eviction timer.
+
+---
+
+### Displayed results not cleared on connection change
+**File:** `src/routes/(app)/trino/+page.svelte:40–46`
+
+The `$effect` that persists connection settings only resets `queryId`, not `rows`, `columns`, or `error`. After switching to a different Trino instance the previous result set remains visible until a new query is run, which is confusing.
+
+---
+
+## Infrastructure
+
+### 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.
+
+---
+
+### `allowedHosts: true` in Vite config
+**File:** `vite.config.ts`
+
+The dev server accepts requests from any host. This enables DNS rebinding attacks against local development environments. Should be restricted to `localhost` / `127.0.0.1` unless remote dev access is explicitly needed.

From 94f2fdc06712f9cd216b71fda2536820c25bb56f Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Wed, 25 Feb 2026 15:32:50 +0100
Subject: [PATCH 11/19] disable all TLS validation when running as dev server

---
 .env.development                      | 4 ----
 src/hooks.server.ts                   | 6 ++++++
 src/routes/api/trino/query/+server.ts | 3 ++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/.env.development b/.env.development
index ca62220a..e69de29b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +0,0 @@
-# Disable TLS certificate verification for development (e.g. self-signed Trino certs).
-# This file is committed and loaded automatically in dev mode.
-# Never set this in production.
-NODE_TLS_REJECT_UNAUTHORIZED=0
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index a8be42a8..2aa8f57d 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -1,6 +1,12 @@
 import { paraglideMiddleware } from '$lib/paraglide/server';
 import { type Handle } from '@sveltejs/kit';
 import { sequence } from '@sveltejs/kit/hooks';
+import { dev } from '$app/environment';
+
+// Allow self-signed TLS certificates in development (e.g. local Trino with self-signed certs).
+if (dev) {
+  process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+}
 
 const handleParaglide: Handle = ({ event, resolve }) =>
   paraglideMiddleware(event.request, ({ request, locale }) => {
diff --git a/src/routes/api/trino/query/+server.ts b/src/routes/api/trino/query/+server.ts
index 4745ce32..91a191e1 100644
--- a/src/routes/api/trino/query/+server.ts
+++ b/src/routes/api/trino/query/+server.ts
@@ -199,7 +199,8 @@ export const POST: RequestHandler = async ({ request }) => {
     });
   } catch (err) {
     const message = err instanceof Error ? err.message : 'Unknown error';
-    console.error('[trino] unexpected error on %s: %s', connection.url, message);
+    const cause = err instanceof Error ? err.cause : undefined;
+    console.error('[trino] unexpected error on %s: %s', connection.url, message, cause ?? '');
     return json({ error: message }, { status: 500 });
   }
 };

From 3c9bec445f1867babfa293e1c05a157b1a39faf3 Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Wed, 25 Feb 2026 17:26:11 +0100
Subject: [PATCH 12/19] Use pino for logs and add missing i18n

---
 messages/de.json                      |  5 ++-
 messages/en.json                      |  5 ++-
 src/routes/api/trino/query/+server.ts | 47 ++++++++++++---------------
 3 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/messages/de.json b/messages/de.json
index 526912cf..3766154d 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -57,5 +57,8 @@
   "trino_auth_basic": "Basic",
   "trino_auth_username": "Benutzername",
   "trino_auth_password": "Passwort",
-  "trino_unknown_error": "Unbekannter Fehler"
+  "trino_unknown_error": "Unbekannter Fehler",
+  "trino_no_sql": "Keine SQL-Abfrage angegeben",
+  "trino_invalid_connection": "Die Verbindungskonfiguration ist ungültig oder fehlt. Bitte eine gültige URL und Authentifizierungsmethode angeben.",
+  "trino_query_timeout": "Abfrage nach 30 Sekunden abgebrochen"
 }
diff --git a/messages/en.json b/messages/en.json
index 5c22111b..17fd1fda 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -57,5 +57,8 @@
   "trino_auth_basic": "Basic",
   "trino_auth_username": "Username",
   "trino_auth_password": "Password",
-  "trino_unknown_error": "Unknown error"
+  "trino_unknown_error": "Unknown error",
+  "trino_no_sql": "No SQL provided",
+  "trino_invalid_connection": "The connection configuration is invalid or missing. Please provide a valid URL and authentication method.",
+  "trino_query_timeout": "Query timed out after 30 seconds"
 }
diff --git a/src/routes/api/trino/query/+server.ts b/src/routes/api/trino/query/+server.ts
index 91a191e1..10b78035 100644
--- a/src/routes/api/trino/query/+server.ts
+++ b/src/routes/api/trino/query/+server.ts
@@ -1,4 +1,5 @@
 import { json } from '@sveltejs/kit';
+import * as m from '$lib/paraglide/messages.js';
 import type { RequestHandler } from './$types';
 
 const POLL_TIMEOUT_MS = 30_000;
@@ -98,7 +99,9 @@ function parseConnection(raw: unknown): ConnectionConfig | null {
 
 const ALLOWED_PAGE_SIZES = new Set([25, 50, 100]);
 
-export const POST: RequestHandler = async ({ request }) => {
+export const POST: RequestHandler = async ({ request, locals }) => {
+  const log = locals.logger;
+
   const body = await request.json();
   const pageSize: number = ALLOWED_PAGE_SIZES.has(body.pageSize) ? body.pageSize : 25;
   const page: number = typeof body.page === 'number' && body.page >= 0 ? Math.floor(body.page) : 0;
@@ -107,11 +110,11 @@ export const POST: RequestHandler = async ({ request }) => {
   if (typeof body.queryId === 'string' && body.queryId) {
     const cached = queryCache.get(body.queryId);
     if (!cached) {
-      console.info('[trino] cache miss for queryId=%s (session expired)', body.queryId);
+      log.info({ query_id: body.queryId }, 'cache miss (session expired)');
       return json({ error: 'session_expired' }, { status: 404 });
     }
     const start = page * pageSize;
-    console.debug('[trino] cache hit queryId=%s page=%d pageSize=%d', body.queryId, page, pageSize);
+    log.debug({ query_id: body.queryId, page, page_size: pageSize }, 'cache hit');
     return json({
       queryId: body.queryId,
       columns: cached.columns,
@@ -124,26 +127,20 @@ export const POST: RequestHandler = async ({ request }) => {
   // New query execution — connection config required.
   const { sql } = body;
   if (!sql?.trim()) {
-    return json({ error: 'No SQL provided' }, { status: 400 });
+    return json({ error: m.trino_no_sql() }, { status: 400 });
   }
 
   const connection = parseConnection(body.connection);
   if (!connection) {
-    return json(
-      {
-        error:
-          'Invalid or missing connection config. Provide connection.url (http/https) and connection.auth.'
-      },
-      { status: 400 }
-    );
+    return json({ error: m.trino_invalid_connection() }, { status: 400 });
   }
 
   evictStale();
 
-  const start = Date.now();
-  console.info('[trino] executing query on %s', connection.url);
+  const queryStart = Date.now();
+  log.info({ trino_url: connection.url }, 'executing query');
 
-  const deadline = start + POLL_TIMEOUT_MS;
+  const deadline = queryStart + POLL_TIMEOUT_MS;
   let columns: TrinoColumn[] = [];
   let rows: unknown[][] = [];
 
@@ -155,7 +152,7 @@ export const POST: RequestHandler = async ({ request }) => {
     });
 
     if (response.error) {
-      console.info('[trino] query error: %s', response.error.message);
+      log.info({ err: response.error }, 'query error');
       return json({ error: response.error.message }, { status: 400 });
     }
 
@@ -164,14 +161,14 @@ export const POST: RequestHandler = async ({ request }) => {
 
     while (response.nextUri && rows.length < MAX_CACHED_ROWS) {
       if (Date.now() > deadline) {
-        console.info('[trino] query timed out after %dms on %s', POLL_TIMEOUT_MS, connection.url);
-        return json({ error: 'Query timed out after 30 seconds' }, { status: 408 });
+        log.info({ trino_url: connection.url, timeout_ms: POLL_TIMEOUT_MS }, 'query timed out');
+        return json({ error: m.trino_query_timeout() }, { status: 408 });
       }
 
       response = await trinoFetch(response.nextUri, connection.auth);
 
       if (response.error) {
-        console.info('[trino] query error: %s', response.error.message);
+        log.info({ err: response.error }, 'query error');
         return json({ error: response.error.message }, { status: 400 });
       }
 
@@ -182,12 +179,9 @@ export const POST: RequestHandler = async ({ request }) => {
     const queryId = crypto.randomUUID();
     queryCache.set(queryId, { columns, rows, createdAt: Date.now() });
 
-    console.info(
-      '[trino] query complete: %d rows, %d cols, %dms, queryId=%s',
-      rows.length,
-      columns.length,
-      Date.now() - start,
-      queryId
+    log.info(
+      { query_id: queryId, rows: rows.length, cols: columns.length, duration_ms: Date.now() - queryStart },
+      'query complete'
     );
 
     return json({
@@ -198,9 +192,8 @@ export const POST: RequestHandler = async ({ request }) => {
       totalRows: rows.length
     });
   } catch (err) {
-    const message = err instanceof Error ? err.message : 'Unknown error';
-    const cause = err instanceof Error ? err.cause : undefined;
-    console.error('[trino] unexpected error on %s: %s', connection.url, message, cause ?? '');
+    log.error({ err, trino_url: connection.url }, 'unexpected error');
+    const message = err instanceof Error ? err.message : m.trino_unknown_error();
     return json({ error: message }, { status: 500 });
   }
 };

From 033bf567d6554a32fdbda31c56d2882a38056ca4 Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Thu, 26 Feb 2026 21:22:14 +0100
Subject: [PATCH 13/19] Move trino query execution to server-side form action

---
 e2e/trino.spec.ts                      | 302 +++++++++---------
 messages/de.json                       |   1 +
 messages/en.json                       |   1 +
 src/lib/server/trino.ts                |  69 +++++
 src/routes/(app)/trino/+page.server.ts | 134 ++++++++
 src/routes/(app)/trino/+page.svelte    | 407 ++++++++++++++-----------
 src/routes/(app)/trino/schemas.ts      |  30 ++
 src/routes/api/trino/query/+server.ts  | 199 ------------
 8 files changed, 626 insertions(+), 517 deletions(-)
 create mode 100644 src/lib/server/trino.ts
 create mode 100644 src/routes/(app)/trino/+page.server.ts
 create mode 100644 src/routes/(app)/trino/schemas.ts
 delete mode 100644 src/routes/api/trino/query/+server.ts

diff --git a/e2e/trino.spec.ts b/e2e/trino.spec.ts
index 77afb1d0..cffebbcb 100644
--- a/e2e/trino.spec.ts
+++ b/e2e/trino.spec.ts
@@ -1,4 +1,6 @@
 import { test, expect, type Page } from '@playwright/test';
+import * as http from 'node:http';
+import type { AddressInfo } from 'node:net';
 
 const COLUMNS = [
   { name: 'id', type: 'integer' },
@@ -15,6 +17,26 @@ async function waitForHydration(page: Page) {
     .toMatch(/^(light|dark)$/);
 }
 
+// Starts a lightweight HTTP server that acts as a mock Trino endpoint.
+// The server action fetches `{trino_url}/v1/statement` from the SvelteKit server
+// (Node.js), so we need a real TCP server reachable by the server process.
+// page.route() only intercepts browser-side requests and cannot mock server-side
+// Node.js fetch calls.
+async function startMockTrinoServer(
+  handler: (req: http.IncomingMessage, res: http.ServerResponse) => void
+): Promise<{ url: string; stop: () => Promise<void> }> {
+  const server = http.createServer(handler);
+  await new Promise<void>((resolve) => server.listen(0, '127.0.0.1', resolve));
+  const port = (server.address() as AddressInfo).port;
+  return {
+    url: `http://127.0.0.1:${port}`,
+    stop: () =>
+      new Promise<void>((resolve, reject) =>
+        server.close((err) => (err ? reject(err) : resolve()))
+      )
+  };
+}
+
 test.describe('Trino query editor', () => {
   test.use({ locale: 'en-US' });
 
@@ -46,161 +68,147 @@ test.describe('Trino query editor', () => {
   });
 
   test('running a query displays the results table', async ({ page }) => {
-    await page.route('**/api/trino/query', async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          queryId: 'q1',
+    const { url, stop } = await startMockTrinoServer((_req, res) => {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(
+        JSON.stringify({
+          id: 'test-query-id',
           columns: COLUMNS,
-          rows: [
+          data: [
             [1, 'Alice'],
             [2, 'Bob'],
             [3, 'Carol']
           ],
-          hasMore: false,
-          totalRows: 3
+          stats: { state: 'FINISHED' }
         })
-      });
+      );
     });
-
-    await page.goto('/trino');
-    await waitForHydration(page);
-    await page.getByRole('button', { name: 'Run query' }).click();
-
-    const table = page.getByRole('table', { name: 'Query results' });
-    await expect(table).toBeVisible();
-    await expect(table.getByRole('columnheader', { name: 'id' })).toBeVisible();
-    await expect(table.getByRole('columnheader', { name: 'name' })).toBeVisible();
-    await expect(table.getByRole('cell', { name: '1' })).toBeVisible();
-    await expect(table.getByRole('cell', { name: 'Alice' })).toBeVisible();
-    await expect(page.getByText('Rows 1–3 of 3')).toBeVisible();
+    await page.addInitScript((trinoUrl) => {
+      localStorage.setItem('trino_url', trinoUrl);
+    }, url);
+
+    try {
+      await page.goto('/trino');
+      await waitForHydration(page);
+      await page.getByRole('button', { name: 'Run query' }).click();
+
+      const table = page.getByRole('table', { name: 'Query results' });
+      await expect(table).toBeVisible();
+      await expect(table.getByRole('columnheader', { name: 'id' })).toBeVisible();
+      await expect(table.getByRole('columnheader', { name: 'name' })).toBeVisible();
+      await expect(table.getByRole('cell', { name: '1' })).toBeVisible();
+      await expect(table.getByRole('cell', { name: 'Alice' })).toBeVisible();
+      await expect(page.getByText('Rows 1–3 of 3')).toBeVisible();
+    } finally {
+      await stop();
+    }
   });
 
   test('Ctrl+Enter triggers query execution', async ({ page }) => {
     let called = false;
-    await page.route('**/api/trino/query', async (route) => {
+    const { url, stop } = await startMockTrinoServer((_req, res) => {
       called = true;
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          queryId: 'q1',
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(
+        JSON.stringify({
+          id: 'q1',
           columns: COLUMNS,
-          rows: [[1, 'Alice']],
-          hasMore: false,
-          totalRows: 1
+          data: [[1, 'Alice']],
+          stats: { state: 'FINISHED' }
         })
-      });
+      );
     });
-
-    await page.goto('/trino');
-    await waitForHydration(page);
-    await page.keyboard.press('Control+Enter');
-
-    await expect.poll(() => called).toBe(true);
-    await expect(page.getByRole('table', { name: 'Query results' })).toBeVisible();
+    await page.addInitScript((trinoUrl) => {
+      localStorage.setItem('trino_url', trinoUrl);
+    }, url);
+
+    try {
+      await page.goto('/trino');
+      await waitForHydration(page);
+      await page.keyboard.press('Control+Enter');
+
+      await expect.poll(() => called).toBe(true);
+      await expect(page.getByRole('table', { name: 'Query results' })).toBeVisible();
+    } finally {
+      await stop();
+    }
   });
 
   test('query error is shown in an alert', async ({ page }) => {
-    await page.route('**/api/trino/query', async (route) => {
-      await route.fulfill({
-        status: 400,
-        contentType: 'application/json',
-        body: JSON.stringify({ error: 'syntax error at position 7' })
-      });
+    const { url, stop } = await startMockTrinoServer((_req, res) => {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(
+        JSON.stringify({
+          id: 'q-err',
+          error: { message: 'syntax error at position 7', errorCode: 1 },
+          stats: { state: 'FAILED' }
+        })
+      );
     });
-
-    await page.goto('/trino');
-    await waitForHydration(page);
-    await page.getByRole('button', { name: 'Run query' }).click();
-
-    // Monaco also renders role="alert" nodes for its own accessibility — filter by content.
-    const alert = page.getByRole('alert').filter({ hasText: 'Query error' });
-    await expect(alert).toBeVisible();
-    await expect(alert.getByText('syntax error at position 7')).toBeVisible();
+    await page.addInitScript((trinoUrl) => {
+      localStorage.setItem('trino_url', trinoUrl);
+    }, url);
+
+    try {
+      await page.goto('/trino');
+      await waitForHydration(page);
+      await page.getByRole('button', { name: 'Run query' }).click();
+
+      // Monaco also renders role="alert" nodes for its own accessibility — filter by content.
+      const alert = page.getByRole('alert').filter({ hasText: 'Query error' });
+      await expect(alert).toBeVisible();
+      await expect(alert.getByText('syntax error at position 7')).toBeVisible();
+    } finally {
+      await stop();
+    }
   });
 
   test('pagination navigates between pages', async ({ page }) => {
+    // The server action caches all rows after the first query;
+    // prev/next page requests are served from the cache without hitting Trino again.
     const allRows = Array.from({ length: 30 }, (_, i) => [i + 1, `Row ${i + 1}`]);
-
-    await page.route('**/api/trino/query', async (route) => {
-      const body = JSON.parse((await route.request().postData()) ?? '{}');
-      const pg: number = body.page ?? 0;
-      const ps = 25;
-      const slice = allRows.slice(pg * ps, pg * ps + ps);
-
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          queryId: 'q-pages',
+    const { url, stop } = await startMockTrinoServer((_req, res) => {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(
+        JSON.stringify({
+          id: 'q-pages',
           columns: COLUMNS,
-          rows: slice,
-          hasMore: (pg + 1) * ps < allRows.length,
-          totalRows: allRows.length
+          data: allRows,
+          stats: { state: 'FINISHED' }
         })
-      });
-    });
-
-    await page.goto('/trino');
-    await waitForHydration(page);
-    await page.getByRole('button', { name: 'Run query' }).click();
-
-    await expect(page.getByText('Rows 1–25 of 30')).toBeVisible();
-
-    const nextBtn = page.getByRole('button', { name: 'Next page' });
-    const prevBtn = page.getByRole('button', { name: 'Previous page' });
-    await expect(prevBtn).toBeDisabled();
-    await expect(nextBtn).toBeEnabled();
-
-    await nextBtn.click();
-    await expect(page.getByText('Rows 26–30 of 30')).toBeVisible();
-    await expect(prevBtn).toBeEnabled();
-    await expect(nextBtn).toBeDisabled();
-
-    await prevBtn.click();
-    await expect(page.getByText('Rows 1–25 of 30')).toBeVisible();
-  });
-
-  test('session expired shows correct message', async ({ page }) => {
-    let call = 0;
-    await page.route('**/api/trino/query', async (route) => {
-      call++;
-      if (call === 1) {
-        await route.fulfill({
-          status: 200,
-          contentType: 'application/json',
-          body: JSON.stringify({
-            queryId: 'exp-id',
-            columns: COLUMNS,
-            rows: [[1, 'Alice']],
-            hasMore: true,
-            totalRows: 50
-          })
-        });
-      } else {
-        await route.fulfill({
-          status: 404,
-          contentType: 'application/json',
-          body: JSON.stringify({ error: 'session_expired' })
-        });
-      }
+      );
     });
-
-    await page.goto('/trino');
-    await waitForHydration(page);
-    await page.getByRole('button', { name: 'Run query' }).click();
-    await expect(page.getByRole('table')).toBeVisible();
-
-    await page.getByRole('button', { name: 'Next page' }).click();
-
-    const alert = page.getByRole('alert').filter({ hasText: 'Query session expired' });
-    await expect(alert).toBeVisible();
+    await page.addInitScript((trinoUrl) => {
+      localStorage.setItem('trino_url', trinoUrl);
+    }, url);
+
+    try {
+      await page.goto('/trino');
+      await waitForHydration(page);
+      await page.getByRole('button', { name: 'Run query' }).click();
+
+      await expect(page.getByText('Rows 1–25 of 30')).toBeVisible();
+
+      const nextBtn = page.getByRole('button', { name: 'Next page' });
+      const prevBtn = page.getByRole('button', { name: 'Previous page' });
+      await expect(prevBtn).toBeDisabled();
+      await expect(nextBtn).toBeEnabled();
+
+      await nextBtn.click();
+      await expect(page.getByText('Rows 26–30 of 30')).toBeVisible();
+      await expect(prevBtn).toBeEnabled();
+      await expect(nextBtn).toBeDisabled();
+
+      await prevBtn.click();
+      await expect(page.getByText('Rows 1–25 of 30')).toBeVisible();
+    } finally {
+      await stop();
+    }
   });
 
   test('connection section expands to reveal URL and auth controls', async ({ page }) => {
     await page.goto('/trino');
+    await waitForHydration(page);
 
     // The DaisyUI collapse uses a visually-hidden checkbox as its toggle.
     await page.getByRole('checkbox', { name: 'Connection' }).check({ force: true });
@@ -212,6 +220,7 @@ test.describe('Trino query editor', () => {
 
   test('switching to basic auth reveals credential fields', async ({ page }) => {
     await page.goto('/trino');
+    await waitForHydration(page);
     await page.getByRole('checkbox', { name: 'Connection' }).check({ force: true });
 
     // No credentials visible for 'none' auth
@@ -226,27 +235,32 @@ test.describe('Trino query editor', () => {
   });
 
   test('null cell values render as italic null placeholder', async ({ page }) => {
-    await page.route('**/api/trino/query', async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          queryId: 'q-null',
+    const { url, stop } = await startMockTrinoServer((_req, res) => {
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(
+        JSON.stringify({
+          id: 'q-null',
           columns: [{ name: 'value', type: 'varchar' }],
-          rows: [[null], ['hello']],
-          hasMore: false,
-          totalRows: 2
+          data: [[null], ['hello']],
+          stats: { state: 'FINISHED' }
         })
-      });
+      );
     });
-
-    await page.goto('/trino');
-    await waitForHydration(page);
-    await page.getByRole('button', { name: 'Run query' }).click();
-
-    const table = page.getByRole('table');
-    await expect(table).toBeVisible();
-    await expect(table.getByText('null')).toBeVisible();
-    await expect(table.getByText('hello')).toBeVisible();
+    await page.addInitScript((trinoUrl) => {
+      localStorage.setItem('trino_url', trinoUrl);
+    }, url);
+
+    try {
+      await page.goto('/trino');
+      await waitForHydration(page);
+      await page.getByRole('button', { name: 'Run query' }).click();
+
+      const table = page.getByRole('table');
+      await expect(table).toBeVisible();
+      await expect(table.getByText('null')).toBeVisible();
+      await expect(table.getByText('hello')).toBeVisible();
+    } finally {
+      await stop();
+    }
   });
 });
diff --git a/messages/de.json b/messages/de.json
index 3766154d..25853685 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -51,6 +51,7 @@
   "trino_prev_page": "Vorherige Seite",
   "trino_next_page": "Nächste Seite",
   "trino_connection_label": "Verbindung",
+  "trino_connection_error": "Bitte konfigurieren Sie eine gültige Verbindungs-URL.",
   "trino_connection_url": "URL",
   "trino_connection_auth": "Authentifizierung",
   "trino_auth_none": "Keine",
diff --git a/messages/en.json b/messages/en.json
index 17fd1fda..536029d5 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -51,6 +51,7 @@
   "trino_prev_page": "Previous page",
   "trino_next_page": "Next page",
   "trino_connection_label": "Connection",
+  "trino_connection_error": "Please configure a valid connection URL.",
   "trino_connection_url": "URL",
   "trino_connection_auth": "Auth",
   "trino_auth_none": "No auth",
diff --git a/src/lib/server/trino.ts b/src/lib/server/trino.ts
new file mode 100644
index 00000000..66a89c7f
--- /dev/null
+++ b/src/lib/server/trino.ts
@@ -0,0 +1,69 @@
+export interface TrinoColumn {
+  name: string;
+  type: string;
+}
+
+export interface TrinoResponse {
+  id?: string;
+  nextUri?: string;
+  columns?: TrinoColumn[];
+  data?: unknown[][];
+  stats?: { state: string };
+  error?: { message: string; errorCode: number };
+}
+
+export interface CacheEntry {
+  columns: TrinoColumn[];
+  rows: unknown[][];
+  createdAt: number;
+}
+
+export type AuthConfig =
+  | { type: 'none' }
+  | { type: 'basic'; username: string; password: string };
+
+export const POLL_TIMEOUT_MS = 30_000;
+export const MAX_CACHED_ROWS = 100_000;
+export const CACHE_TTL_MS = 5 * 60 * 1000;
+
+export const queryCache = new Map<string, CacheEntry>();
+
+export function evictStale() {
+  const cutoff = Date.now() - CACHE_TTL_MS;
+  for (const [id, entry] of queryCache) {
+    if (entry.createdAt < cutoff) queryCache.delete(id);
+  }
+}
+
+export function buildAuthHeaders(auth: AuthConfig): Record<string, string> {
+  if (auth.type === 'basic') {
+    const encoded = Buffer.from(`${auth.username}:${auth.password}`).toString('base64');
+    return {
+      'X-Trino-User': auth.username,
+      Authorization: `Basic ${encoded}`
+    };
+  }
+  return { 'X-Trino-User': 'anonymous' };
+}
+
+export async function trinoFetch(
+  url: string,
+  auth: AuthConfig,
+  options?: RequestInit
+): Promise<TrinoResponse> {
+  const res = await fetch(url, {
+    ...options,
+    headers: {
+      ...buildAuthHeaders(auth),
+      'X-Trino-Source': 'stackable-ui',
+      ...(options?.headers ?? {})
+    }
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Trino HTTP ${res.status}: ${text}`);
+  }
+
+  return res.json() as Promise<TrinoResponse>;
+}
diff --git a/src/routes/(app)/trino/+page.server.ts b/src/routes/(app)/trino/+page.server.ts
new file mode 100644
index 00000000..29503e2d
--- /dev/null
+++ b/src/routes/(app)/trino/+page.server.ts
@@ -0,0 +1,134 @@
+import { fail } from '@sveltejs/kit';
+import { superValidate, message } from 'sveltekit-superforms';
+import { zod4 as zod } from 'sveltekit-superforms/adapters';
+import * as m from '$lib/paraglide/messages.js';
+import {
+  trinoFetch,
+  evictStale,
+  queryCache,
+  POLL_TIMEOUT_MS,
+  MAX_CACHED_ROWS,
+  type AuthConfig,
+  type TrinoColumn
+} from '$lib/server/trino.js';
+import { QuerySchema, PaginateSchema, type FormMessage } from './schemas.js';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  locals.logger.debug('loading Trino page');
+  const [queryForm, paginateForm] = await Promise.all([
+    superValidate(zod(QuerySchema)),
+    superValidate(zod(PaginateSchema))
+  ]);
+  return { queryForm, paginateForm };
+};
+
+export const actions: Actions = {
+  query: async ({ request, locals }) => {
+    const log = locals.logger;
+    const form = await superValidate(request, zod(QuerySchema));
+
+    if (!form.valid) {
+      log.debug({ errors: form.errors }, 'query form validation failed');
+      return fail(400, { form });
+    }
+
+    const { sql, pageSize, connectionUrl, authType, authUsername, authPassword } = form.data;
+    const auth: AuthConfig =
+      authType === 'basic'
+        ? { type: 'basic', username: authUsername, password: authPassword }
+        : { type: 'none' };
+
+    evictStale();
+
+    const queryStart = Date.now();
+    log.info({ trino_url: connectionUrl }, 'executing query');
+
+    const deadline = queryStart + POLL_TIMEOUT_MS;
+    let columns: TrinoColumn[] = [];
+    let rows: unknown[][] = [];
+
+    try {
+      let response = await trinoFetch(`${connectionUrl}/v1/statement`, auth, {
+        method: 'POST',
+        body: sql.replace(/;\s*$/, '').trim(),
+        headers: { 'Content-Type': 'text/plain' }
+      });
+
+      if (response.error) {
+        log.info({ err: response.error }, 'query error');
+        return message(form, { type: 'error', message: response.error.message } satisfies FormMessage, { status: 400 });
+      }
+
+      if (response.columns) columns = response.columns;
+      if (response.data) rows = rows.concat(response.data);
+
+      while (response.nextUri && rows.length < MAX_CACHED_ROWS) {
+        if (Date.now() > deadline) {
+          log.info({ trino_url: connectionUrl, timeout_ms: POLL_TIMEOUT_MS }, 'query timed out');
+          return message(form, { type: 'error', message: m.trino_query_timeout() } satisfies FormMessage, { status: 408 });
+        }
+
+        response = await trinoFetch(response.nextUri, auth);
+
+        if (response.error) {
+          log.info({ err: response.error }, 'query error');
+          return message(form, { type: 'error', message: response.error.message } satisfies FormMessage, { status: 400 });
+        }
+
+        if (response.columns && columns.length === 0) columns = response.columns;
+        if (response.data) rows = rows.concat(response.data);
+      }
+
+      const queryId = crypto.randomUUID();
+      queryCache.set(queryId, { columns, rows, createdAt: Date.now() });
+
+      log.info(
+        { query_id: queryId, rows: rows.length, cols: columns.length, duration_ms: Date.now() - queryStart },
+        'query complete'
+      );
+
+      return message(form, {
+        type: 'result',
+        queryId,
+        columns,
+        rows: rows.slice(0, pageSize),
+        hasMore: rows.length > pageSize,
+        totalRows: rows.length
+      } satisfies FormMessage);
+    } catch (err) {
+      log.error({ err, trino_url: connectionUrl }, 'unexpected error');
+      const msg = err instanceof Error ? err.message : m.trino_unknown_error();
+      return message(form, { type: 'error', message: msg } satisfies FormMessage, { status: 500 });
+    }
+  },
+
+  paginate: async ({ request, locals }) => {
+    const log = locals.logger;
+    const form = await superValidate(request, zod(PaginateSchema));
+
+    if (!form.valid) {
+      return fail(400, { form });
+    }
+
+    const { queryId, page, pageSize } = form.data;
+    const cached = queryCache.get(queryId);
+
+    if (!cached) {
+      log.info({ query_id: queryId }, 'cache miss (session expired)');
+      return message(form, { type: 'error', message: 'session_expired' } satisfies FormMessage, { status: 404 });
+    }
+
+    const start = page * pageSize;
+    log.debug({ query_id: queryId, page, page_size: pageSize }, 'cache hit');
+
+    return message(form, {
+      type: 'result',
+      queryId,
+      columns: cached.columns,
+      rows: cached.rows.slice(start, start + pageSize),
+      hasMore: start + pageSize < cached.rows.length,
+      totalRows: cached.rows.length
+    } satisfies FormMessage);
+  }
+};
diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index fc3aa90f..332c4c9a 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
   import * as m from '$lib/paraglide/messages.js';
   import MonacoEditor from '$lib/components/editor/MonacoEditor.svelte';
+  import { superForm } from 'sveltekit-superforms';
+  import type { PageData } from './$types';
+  import type { FormMessage } from './schemas.js';
 
-  const uid = $props.id();
+  let { data }: { data: PageData } = $props();
 
+  const uid = $props.id();
   const PAGE_SIZES = [25, 50, 100];
 
   function ls(key: string, fallback: string): string {
@@ -14,29 +18,88 @@
     }
   }
 
+  // Connection config and SQL — local state persisted to localStorage.
   let connectionUrl = $state(ls('trino_url', ''));
   let authType = $state<'none' | 'basic'>(ls('trino_auth_type', 'none') as 'none' | 'basic');
   let authUsername = $state(ls('trino_username', ''));
   let authPassword = $state(ls('trino_password', ''));
-
   let sql = $state(ls('trino_sql', 'SELECT 1'));
-  let running = $state(false);
+  let pageSize = $state<25 | 50 | 100>(25);
+
+  // Query result state — updated from form messages.
   let columns = $state<{ name: string; type: string }[]>([]);
   let rows = $state<unknown[][]>([]);
-  let error = $state<string | null>(null);
-  let page = $state(0);
-  let pageSize = $state(25);
+  let queryError = $state<string | null>(null);
+  let currentPage = $state(0);
   let hasMore = $state(false);
   let queryId = $state<string | null>(null);
   let totalRows = $state<number | null>(null);
+  let connectionOpen = $state(false);
 
-  let connectionSummary = $derived(() => {
-    const host = connectionUrl ? connectionUrl.replace(/^https?:\/\//, '').replace(/\/$/, '') : '—';
-    const auth = authType === 'basic' ? m.trino_auth_basic() : m.trino_auth_none();
-    return `${host} · ${auth}`;
+  // Query form — submits connection config + SQL as hidden inputs (FormData).
+  const {
+    enhance: queryEnhance,
+    submitting: querySubmitting,
+    errors: queryErrors
+  } = superForm(data.queryForm, {
+    onSubmit() {
+      queryError = null;
+      columns = [];
+      rows = [];
+      queryId = null;
+      totalRows = null;
+      currentPage = 0;
+      connectionOpen = false;
+    },
+    onUpdated({ form }) {
+      // Validation errors for connection fields — open the section so the user can see them.
+      if (form.errors.connectionUrl) {
+        connectionOpen = true;
+        queryError = m.trino_connection_error();
+        return;
+      }
+      const msg = form.message as FormMessage | undefined;
+      if (!msg) return;
+      if (msg.type === 'result') {
+        queryId = msg.queryId;
+        columns = msg.columns;
+        rows = msg.rows;
+        hasMore = msg.hasMore;
+        totalRows = msg.totalRows;
+      } else {
+        queryError =
+          msg.message === 'session_expired' ? m.trino_session_expired() : msg.message;
+      }
+    }
   });
 
-  // Persist connection config and invalidate query cache on change.
+  // Paginate form — submits as JSON so store values are used directly.
+  const {
+    form: paginateFormData,
+    enhance: paginateEnhance,
+    submitting: paginateSubmitting
+  } = superForm(data.paginateForm, {
+    dataType: 'json',
+    onUpdated({ form }) {
+      const msg = form.message as FormMessage | undefined;
+      if (!msg) return;
+      if (msg.type === 'result') {
+        columns = msg.columns;
+        rows = msg.rows;
+        hasMore = msg.hasMore;
+        totalRows = msg.totalRows;
+        queryError = null;
+      } else {
+        queryError =
+          msg.message === 'session_expired' ? m.trino_session_expired() : msg.message;
+        if (msg.message === 'session_expired') queryId = null;
+      }
+    }
+  });
+
+  const running = $derived($querySubmitting || $paginateSubmitting);
+
+  // Persist connection config; invalidate queryId on change.
   $effect(() => {
     localStorage.setItem('trino_url', connectionUrl);
     localStorage.setItem('trino_auth_type', authType);
@@ -45,206 +108,202 @@
     queryId = null;
   });
 
-  // Persist SQL query.
+  // Persist SQL.
   $effect(() => {
     localStorage.setItem('trino_sql', sql);
   });
 
-  let rowStart = $derived(page * pageSize + 1);
-  let rowEnd = $derived(page * pageSize + rows.length);
-
-  function buildConnection() {
-    return {
-      url: connectionUrl,
-      auth:
-        authType === 'basic'
-          ? { type: 'basic' as const, username: authUsername, password: authPassword }
-          : { type: 'none' as const }
-    };
-  }
-
-  async function fetchResults(isNewQuery: boolean) {
-    if (running) return;
-    running = true;
-    error = null;
-    hasMore = false;
-
-    if (isNewQuery) {
-      columns = [];
-      rows = [];
-      queryId = null;
-      totalRows = null;
-    }
-
-    try {
-      const body =
-        queryId && !isNewQuery
-          ? { queryId, page, pageSize }
-          : { sql, page, pageSize, connection: buildConnection() };
-
-      const res = await fetch('/api/trino/query', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body)
-      });
+  const connectionSummary = $derived(() => {
+    const host = connectionUrl ? connectionUrl.replace(/^https?:\/\//, '').replace(/\/$/, '') : '—';
+    const auth = authType === 'basic' ? m.trino_auth_basic() : m.trino_auth_none();
+    return `${host} · ${auth}`;
+  });
 
-      const data = await res.json();
+  const rowStart = $derived(currentPage * pageSize + 1);
+  const rowEnd = $derived(currentPage * pageSize + rows.length);
 
-      if (data.error === 'session_expired') {
-        error = m.trino_session_expired();
-        queryId = null;
-      } else if (data.error) {
-        error = data.error;
-      } else {
-        queryId = data.queryId ?? null;
-        columns = data.columns ?? [];
-        rows = data.rows ?? [];
-        hasMore = data.hasMore ?? false;
-        totalRows = data.totalRows ?? null;
-      }
-    } catch (err) {
-      error = err instanceof Error ? err.message : m.trino_unknown_error();
-    } finally {
-      running = false;
-    }
-  }
+  let queryFormEl = $state<HTMLFormElement | undefined>(undefined);
+  let paginateFormEl = $state<HTMLFormElement | undefined>(undefined);
 
   function handleKeydown(event: KeyboardEvent) {
     if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
-      page = 0;
-      fetchResults(true);
+      queryFormEl?.requestSubmit();
     }
   }
 
-  function handleRunClick() {
-    page = 0;
-    fetchResults(true);
-  }
-
   function goToPrevPage() {
-    page -= 1;
-    fetchResults(false);
+    const prevPage = currentPage - 1;
+    $paginateFormData.queryId = queryId!;
+    $paginateFormData.page = prevPage;
+    $paginateFormData.pageSize = pageSize;
+    currentPage = prevPage;
+    paginateFormEl?.requestSubmit();
   }
 
   function goToNextPage() {
-    page += 1;
-    fetchResults(false);
+    const nextPage = currentPage + 1;
+    $paginateFormData.queryId = queryId!;
+    $paginateFormData.page = nextPage;
+    $paginateFormData.pageSize = pageSize;
+    currentPage = nextPage;
+    paginateFormEl?.requestSubmit();
   }
 
   function handlePageSizeChange(event: Event) {
-    pageSize = parseInt((event.target as HTMLSelectElement).value, 10);
-    page = 0;
-    fetchResults(false);
+    pageSize = parseInt((event.target as HTMLSelectElement).value, 10) as 25 | 50 | 100;
+    if (queryId) {
+      $paginateFormData.queryId = queryId;
+      $paginateFormData.page = 0;
+      $paginateFormData.pageSize = pageSize;
+      currentPage = 0;
+      paginateFormEl?.requestSubmit();
+    }
   }
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <div class="flex h-full flex-col gap-4">
-  <!-- Connection config section -->
-  <div class="bg-base-100 border-base-300 collapse rounded-xl border">
-    <input type="checkbox" class="peer" aria-label={m.trino_connection_label()} />
-    <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"
-          placeholder={m.trino_connection_url_placeholder()}
-          bind:value={connectionUrl}
-        />
-      </div>
+  <!-- Query form: wraps connection config + editor -->
+  <form method="POST" action="?/query" use:queryEnhance bind:this={queryFormEl}>
+    <!-- Hidden inputs carry localStorage state to the server action -->
+    <input type="hidden" name="sql" value={sql} />
+    <input type="hidden" name="pageSize" value={pageSize} />
+    <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} />
 
-      <!-- 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="join-item btn btn-sm"
-            type="radio"
-            name="{uid}-auth"
-            aria-label={m.trino_auth_none()}
-            value="none"
-            bind:group={authType}
-          />
+    <!-- Connection config section -->
+    <div class="bg-base-100 border-base-300 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}-auth-basic"
-            class="join-item btn btn-sm"
-            type="radio"
-            name="{uid}-auth"
-            aria-label={m.trino_auth_basic()}
-            value="basic"
-            bind:group={authType}
+            id="{uid}-conn-url"
+            type="url"
+            class="input input-sm w-full font-mono"
+            class:input-error={$queryErrors.connectionUrl}
+            placeholder={m.trino_connection_url_placeholder()}
+            bind:value={connectionUrl}
           />
+          {#if $queryErrors.connectionUrl}
+            <p class="text-error text-xs">{$queryErrors.connectionUrl?.join(' ')}</p>
+          {/if}
         </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>
+        <!-- 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-username"
-              type="text"
-              class="input input-sm font-mono"
-              autocomplete="username"
-              bind:value={authUsername}
+              id="{uid}-auth-none"
+              class="join-item btn btn-sm"
+              type="radio"
+              name="{uid}-auth"
+              aria-label={m.trino_auth_none()}
+              value="none"
+              bind:group={authType}
             />
-          </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"
-              autocomplete="current-password"
-              bind:value={authPassword}
+              id="{uid}-auth-basic"
+              class="join-item btn btn-sm"
+              type="radio"
+              name="{uid}-auth"
+              aria-label={m.trino_auth_basic()}
+              value="basic"
+              bind:group={authType}
             />
           </div>
         </div>
-      {/if}
-    </div>
-  </div>
 
-  <!-- Editor section -->
-  <div class="bg-base-100 border-base-300 flex flex-col rounded-xl border">
-    <div class="border-base-300 flex items-center justify-between border-b px-4 py-2">
-      <span class="text-base-content/60 text-sm font-medium">{m.trino_editor_label()}</span>
-      <button
-        class="btn btn-primary btn-sm"
-        onclick={handleRunClick}
-        disabled={running}
-        aria-label={m.trino_run_query()}
-      >
-        {#if running}
-          <span class="loading loading-spinner loading-xs"></span>
-          {m.trino_running()}
-        {:else}
-          {m.trino_run_query()}
-          <kbd class="kbd kbd-sm text-base-content opacity-60">Ctrl+↵</kbd>
+        <!-- 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"
+                autocomplete="username"
+                bind:value={authUsername}
+              />
+            </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"
+                autocomplete="current-password"
+                bind:value={authPassword}
+              />
+            </div>
+          </div>
         {/if}
-      </button>
+      </div>
     </div>
-    <div class="h-64">
-      <MonacoEditor bind:value={sql} language="sql" onExecute={handleRunClick} />
+
+    <!-- Editor section -->
+    <div class="bg-base-100 border-base-300 mt-4 flex flex-col rounded-xl border">
+      <div class="border-base-300 flex items-center justify-between border-b px-4 py-2">
+        <span class="text-base-content/60 text-sm font-medium">{m.trino_editor_label()}</span>
+        <button
+          type="submit"
+          class="btn btn-primary btn-sm"
+          disabled={running}
+          aria-label={m.trino_run_query()}
+        >
+          {#if running}
+            <span class="loading loading-spinner loading-xs"></span>
+            {m.trino_running()}
+          {:else}
+            {m.trino_run_query()}
+            <kbd class="kbd kbd-sm text-base-content opacity-60">Ctrl+↵</kbd>
+          {/if}
+        </button>
+      </div>
+      <div class="h-64">
+        <MonacoEditor
+          bind:value={sql}
+          language="sql"
+          onExecute={() => queryFormEl?.requestSubmit()}
+        />
+      </div>
     </div>
-  </div>
+  </form>
+
+  <!-- Hidden paginate form — buttons in the results section submit this via requestSubmit(). -->
+  <form
+    method="POST"
+    action="?/paginate"
+    use:paginateEnhance
+    bind:this={paginateFormEl}
+    class="sr-only"
+    aria-hidden="true"
+  >
+    <button type="submit">{m.trino_next_page()}</button>
+  </form>
 
   <!-- Results section -->
   <div class="bg-base-100 border-base-300 flex min-h-0 flex-1 flex-col rounded-xl border">
@@ -258,7 +317,7 @@
     </div>
 
     <div class="min-h-0 flex-1 overflow-auto p-4">
-      {#if error}
+      {#if queryError}
         <div class="alert alert-error" role="alert">
           <svg
             class="h-5 w-5 shrink-0"
@@ -273,7 +332,7 @@
           </svg>
           <div>
             <p class="font-semibold">{m.trino_query_error()}</p>
-            <p class="text-sm opacity-80">{error}</p>
+            <p class="text-sm opacity-80">{queryError}</p>
           </div>
         </div>
       {:else if columns.length > 0}
@@ -314,7 +373,7 @@
           <button
             class="btn btn-sm join-item"
             onclick={goToPrevPage}
-            disabled={page === 0 || running}
+            disabled={currentPage === 0 || running}
             aria-label={m.trino_prev_page()}
           >
             ‹
diff --git a/src/routes/(app)/trino/schemas.ts b/src/routes/(app)/trino/schemas.ts
new file mode 100644
index 00000000..d66fa9c3
--- /dev/null
+++ b/src/routes/(app)/trino/schemas.ts
@@ -0,0 +1,30 @@
+import { z } from 'zod';
+
+export const ALLOWED_PAGE_SIZES = [25, 50, 100] as const;
+export type PageSize = 25 | 50 | 100;
+
+export const QuerySchema = z.object({
+  sql: z.string().min(1),
+  pageSize: z.coerce.number().default(25),
+  connectionUrl: z.string().url(),
+  authType: z.enum(['none', 'basic']).default('none'),
+  authUsername: z.string().default(''),
+  authPassword: z.string().default('')
+});
+
+export const PaginateSchema = z.object({
+  queryId: z.string().min(1),
+  page: z.coerce.number().int().nonnegative().default(0),
+  pageSize: z.coerce.number().default(25)
+});
+
+export type FormMessage =
+  | {
+      type: 'result';
+      queryId: string;
+      columns: { name: string; type: string }[];
+      rows: unknown[][];
+      hasMore: boolean;
+      totalRows: number;
+    }
+  | { type: 'error'; message: string };
diff --git a/src/routes/api/trino/query/+server.ts b/src/routes/api/trino/query/+server.ts
deleted file mode 100644
index 10b78035..00000000
--- a/src/routes/api/trino/query/+server.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-import { json } from '@sveltejs/kit';
-import * as m from '$lib/paraglide/messages.js';
-import type { RequestHandler } from './$types';
-
-const POLL_TIMEOUT_MS = 30_000;
-const MAX_CACHED_ROWS = 100_000;
-const CACHE_TTL_MS = 5 * 60 * 1000;
-
-interface TrinoColumn {
-  name: string;
-  type: string;
-}
-
-interface TrinoResponse {
-  id?: string;
-  nextUri?: string;
-  columns?: TrinoColumn[];
-  data?: unknown[][];
-  stats?: { state: string };
-  error?: { message: string; errorCode: number };
-}
-
-interface CacheEntry {
-  columns: TrinoColumn[];
-  rows: unknown[][];
-  createdAt: number;
-}
-
-type AuthConfig = { type: 'none' } | { type: 'basic'; username: string; password: string };
-
-interface ConnectionConfig {
-  url: string;
-  auth: AuthConfig;
-}
-
-const queryCache = new Map<string, CacheEntry>();
-
-function evictStale() {
-  const cutoff = Date.now() - CACHE_TTL_MS;
-  for (const [id, entry] of queryCache) {
-    if (entry.createdAt < cutoff) queryCache.delete(id);
-  }
-}
-
-function buildAuthHeaders(auth: AuthConfig): Record<string, string> {
-  if (auth.type === 'basic') {
-    const encoded = Buffer.from(`${auth.username}:${auth.password}`).toString('base64');
-    return {
-      'X-Trino-User': auth.username,
-      Authorization: `Basic ${encoded}`
-    };
-  }
-  return { 'X-Trino-User': 'anonymous' };
-}
-
-async function trinoFetch(
-  url: string,
-  auth: AuthConfig,
-  options?: RequestInit
-): Promise<TrinoResponse> {
-  const res = await fetch(url, {
-    ...options,
-    headers: {
-      ...buildAuthHeaders(auth),
-      'X-Trino-Source': 'stackable-ui',
-      ...(options?.headers ?? {})
-    }
-  });
-
-  if (!res.ok) {
-    const text = await res.text();
-    throw new Error(`Trino HTTP ${res.status}: ${text}`);
-  }
-
-  return res.json() as Promise<TrinoResponse>;
-}
-
-function parseConnection(raw: unknown): ConnectionConfig | null {
-  if (!raw || typeof raw !== 'object') return null;
-  const conn = raw as Record<string, unknown>;
-  const url = conn.url;
-  if (typeof url !== 'string' || (!url.startsWith('http://') && !url.startsWith('https://'))) {
-    return null;
-  }
-  const auth = conn.auth as Record<string, unknown> | undefined;
-  if (!auth || typeof auth !== 'object') return null;
-  if (auth.type === 'none') {
-    return { url, auth: { type: 'none' } };
-  }
-  if (
-    auth.type === 'basic' &&
-    typeof auth.username === 'string' &&
-    typeof auth.password === 'string'
-  ) {
-    return { url, auth: { type: 'basic', username: auth.username, password: auth.password } };
-  }
-  return null;
-}
-
-const ALLOWED_PAGE_SIZES = new Set([25, 50, 100]);
-
-export const POST: RequestHandler = async ({ request, locals }) => {
-  const log = locals.logger;
-
-  const body = await request.json();
-  const pageSize: number = ALLOWED_PAGE_SIZES.has(body.pageSize) ? body.pageSize : 25;
-  const page: number = typeof body.page === 'number' && body.page >= 0 ? Math.floor(body.page) : 0;
-
-  // Pagination: slice from server-side cache, no Trino re-execution.
-  if (typeof body.queryId === 'string' && body.queryId) {
-    const cached = queryCache.get(body.queryId);
-    if (!cached) {
-      log.info({ query_id: body.queryId }, 'cache miss (session expired)');
-      return json({ error: 'session_expired' }, { status: 404 });
-    }
-    const start = page * pageSize;
-    log.debug({ query_id: body.queryId, page, page_size: pageSize }, 'cache hit');
-    return json({
-      queryId: body.queryId,
-      columns: cached.columns,
-      rows: cached.rows.slice(start, start + pageSize),
-      hasMore: start + pageSize < cached.rows.length,
-      totalRows: cached.rows.length
-    });
-  }
-
-  // New query execution — connection config required.
-  const { sql } = body;
-  if (!sql?.trim()) {
-    return json({ error: m.trino_no_sql() }, { status: 400 });
-  }
-
-  const connection = parseConnection(body.connection);
-  if (!connection) {
-    return json({ error: m.trino_invalid_connection() }, { status: 400 });
-  }
-
-  evictStale();
-
-  const queryStart = Date.now();
-  log.info({ trino_url: connection.url }, 'executing query');
-
-  const deadline = queryStart + POLL_TIMEOUT_MS;
-  let columns: TrinoColumn[] = [];
-  let rows: unknown[][] = [];
-
-  try {
-    let response = await trinoFetch(`${connection.url}/v1/statement`, connection.auth, {
-      method: 'POST',
-      body: sql.replace(/;\s*$/, '').trim(),
-      headers: { 'Content-Type': 'text/plain' }
-    });
-
-    if (response.error) {
-      log.info({ err: response.error }, 'query error');
-      return json({ error: response.error.message }, { status: 400 });
-    }
-
-    if (response.columns) columns = response.columns;
-    if (response.data) rows = rows.concat(response.data);
-
-    while (response.nextUri && rows.length < MAX_CACHED_ROWS) {
-      if (Date.now() > deadline) {
-        log.info({ trino_url: connection.url, timeout_ms: POLL_TIMEOUT_MS }, 'query timed out');
-        return json({ error: m.trino_query_timeout() }, { status: 408 });
-      }
-
-      response = await trinoFetch(response.nextUri, connection.auth);
-
-      if (response.error) {
-        log.info({ err: response.error }, 'query error');
-        return json({ error: response.error.message }, { status: 400 });
-      }
-
-      if (response.columns && columns.length === 0) columns = response.columns;
-      if (response.data) rows = rows.concat(response.data);
-    }
-
-    const queryId = crypto.randomUUID();
-    queryCache.set(queryId, { columns, rows, createdAt: Date.now() });
-
-    log.info(
-      { query_id: queryId, rows: rows.length, cols: columns.length, duration_ms: Date.now() - queryStart },
-      'query complete'
-    );
-
-    return json({
-      queryId,
-      columns,
-      rows: rows.slice(0, pageSize),
-      hasMore: rows.length > pageSize,
-      totalRows: rows.length
-    });
-  } catch (err) {
-    log.error({ err, trino_url: connection.url }, 'unexpected error');
-    const message = err instanceof Error ? err.message : m.trino_unknown_error();
-    return json({ error: message }, { status: 500 });
-  }
-};

From 50160144c15aed47ddc073b07bf2b10b212fbee2 Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Thu, 26 Feb 2026 21:35:40 +0100
Subject: [PATCH 14/19] Replace localStorage-polling hydration check with
 body.hydrated class

---
 e2e/helpers.ts            | 11 +++++++++++
 e2e/i18n.spec.ts          |  5 ++---
 e2e/smoke.spec.ts         |  5 ++---
 e2e/trino.spec.ts         | 13 ++-----------
 src/routes/+layout.svelte |  2 ++
 5 files changed, 19 insertions(+), 17 deletions(-)
 create mode 100644 e2e/helpers.ts

diff --git a/e2e/helpers.ts b/e2e/helpers.ts
new file mode 100644
index 00000000..42d1957d
--- /dev/null
+++ b/e2e/helpers.ts
@@ -0,0 +1,11 @@
+import type { Page } from '@playwright/test';
+
+/**
+ * Wait for SvelteKit client-side hydration to complete.
+ *
+ * The root layout adds a `hydrated` class to `<body>` inside `onMount`,
+ * which fires after hydration finishes and the app is fully interactive.
+ */
+export async function waitForHydration(page: Page) {
+  await page.locator('body.hydrated').waitFor();
+}
diff --git a/e2e/i18n.spec.ts b/e2e/i18n.spec.ts
index e8044d1b..e9a9a99c 100644
--- a/e2e/i18n.spec.ts
+++ b/e2e/i18n.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { waitForHydration } from './helpers';
 
 test.describe('Internationalisation', () => {
   test.use({ locale: 'en-US' });
@@ -31,9 +32,7 @@ test.describe('Internationalisation', () => {
     await expect(page.locator('html')).toHaveAttribute('lang', 'en');
 
     // Wait for client hydration; locale switch relies on an attached click handler.
-    await expect
-      .poll(() => page.evaluate(() => localStorage.getItem('theme')))
-      .toMatch(/^(light|dark)$/);
+    await waitForHydration(page);
 
     await page.getByRole('button', { name: 'Language' }).click();
     const englishOption = page.locator('#lang-switcher button[lang="en"]');
diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts
index 2aa710b4..77e97478 100644
--- a/e2e/smoke.spec.ts
+++ b/e2e/smoke.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { waitForHydration } from './helpers';
 
 test.describe('Smoke tests', () => {
   test.use({ locale: 'en-US' });
@@ -35,9 +36,7 @@ test.describe('Smoke tests', () => {
     });
 
     // Wait for client hydration/theme initialisation before interacting.
-    await expect
-      .poll(() => page.evaluate(() => localStorage.getItem('theme')))
-      .toMatch(/^(light|dark)$/);
+    await waitForHydration(page);
     await expect(html).toHaveAttribute('data-theme', /^(light|dark)$/);
     await expect(toggle).toBeVisible();
 
diff --git a/e2e/trino.spec.ts b/e2e/trino.spec.ts
index cffebbcb..d212181d 100644
--- a/e2e/trino.spec.ts
+++ b/e2e/trino.spec.ts
@@ -1,22 +1,13 @@
-import { test, expect, type Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 import * as http from 'node:http';
 import type { AddressInfo } from 'node:net';
+import { waitForHydration } from './helpers';
 
 const COLUMNS = [
   { name: 'id', type: 'integer' },
   { name: 'name', type: 'varchar' }
 ];
 
-// In SvelteKit + Vite dev mode, the `load` event fires before all dynamic module
-// imports finish. Svelte 5 attaches event handlers only after those imports
-// complete (hydration). Poll for the theme key — the layout writes it on mount —
-// as a reliable signal that the app is fully hydrated and interactive.
-async function waitForHydration(page: Page) {
-  await expect
-    .poll(() => page.evaluate(() => localStorage.getItem('theme')))
-    .toMatch(/^(light|dark)$/);
-}
-
 // Starts a lightweight HTTP server that acts as a mock Trino endpoint.
 // The server action fetches `{trino_url}/v1/statement` from the SvelteKit server
 // (Node.js), so we need a real TCP server reachable by the server process.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5a33388c..277fe8ab 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,8 @@
   let { children } = $props();
 
   onMount(() => {
+    document.body.classList.add('hydrated');
+
     const observer = new MutationObserver(() => {
       theme.current = document.documentElement.dataset.theme ?? 'dark';
     });

From 5196eb22f7c5015666db9ac36e9e4551e17dd97c Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Fri, 27 Feb 2026 15:08:27 +0100
Subject: [PATCH 15/19] Fix UI bug

---
 src/routes/(app)/trino/+page.svelte | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index 332c4c9a..a0251f1c 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -125,12 +125,6 @@
   let queryFormEl = $state<HTMLFormElement | undefined>(undefined);
   let paginateFormEl = $state<HTMLFormElement | undefined>(undefined);
 
-  function handleKeydown(event: KeyboardEvent) {
-    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
-      queryFormEl?.requestSubmit();
-    }
-  }
-
   function goToPrevPage() {
     const prevPage = currentPage - 1;
     $paginateFormData.queryId = queryId!;
@@ -161,7 +155,6 @@
   }
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
 
 <div class="flex h-full flex-col gap-4">
   <!-- Query form: wraps connection config + editor -->
@@ -201,6 +194,7 @@
             class:input-error={$queryErrors.connectionUrl}
             placeholder={m.trino_connection_url_placeholder()}
             bind:value={connectionUrl}
+            onkeydown={(e) => { if (e.key === 'Enter') e.preventDefault(); }}
           />
           {#if $queryErrors.connectionUrl}
             <p class="text-error text-xs">{$queryErrors.connectionUrl?.join(' ')}</p>
@@ -245,6 +239,7 @@
                 class="input input-sm font-mono"
                 autocomplete="username"
                 bind:value={authUsername}
+                onkeydown={(e) => { if (e.key === 'Enter') e.preventDefault(); }}
               />
             </div>
             <div class="flex flex-col gap-1">
@@ -257,6 +252,7 @@
                 class="input input-sm font-mono"
                 autocomplete="current-password"
                 bind:value={authPassword}
+                onkeydown={(e) => { if (e.key === 'Enter') e.preventDefault(); }}
               />
             </div>
           </div>

From f69d9b6e6f6a6d61ff510e18e93703be05bc0816 Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Fri, 27 Feb 2026 15:26:43 +0100
Subject: [PATCH 16/19] fix e2e test and pre-commit

---
 TECH_DEBT.md                                  |  8 +++++
 e2e/trino.spec.ts                             |  5 ++--
 src/lib/components/editor/MonacoEditor.svelte |  4 +--
 src/lib/server/trino.ts                       |  4 +--
 src/lib/theme.svelte.ts                       |  4 ++-
 src/routes/(app)/trino/+page.server.ts        | 29 +++++++++++++++----
 src/routes/(app)/trino/+page.svelte           | 19 +++++++-----
 src/routes/+layout.svelte                     |  5 +++-
 8 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/TECH_DEBT.md b/TECH_DEBT.md
index 0728eb69..88998f8b 100644
--- a/TECH_DEBT.md
+++ b/TECH_DEBT.md
@@ -7,6 +7,7 @@ Tracked issues that are acceptable at the current early stage but must be addres
 ## Security
 
 ### No authentication or authorisation on the Trino API route
+
 **File:** `src/routes/api/trino/query/+server.ts`, `src/hooks.server.ts`
 
 The `/api/trino/query` endpoint is completely unauthenticated. Any request — from any origin — can execute arbitrary SQL against any Trino instance. OIDC authentication is planned (env vars are wired up, `hooks.server.ts` has the right structure) but not yet implemented. Until auth middleware is in place there is also no per-user rate limiting or query quota.
@@ -14,6 +15,7 @@ The `/api/trino/query` endpoint is completely unauthenticated. Any request — f
 ---
 
 ### Trino credentials stored in localStorage
+
 **File:** `src/routes/(app)/trino/+page.svelte:41–44`
 
 Username and password are persisted in plaintext localStorage. This is convenient for development (survives page reloads) but violates credential storage best practices — localStorage is accessible to any script on the page and visible in DevTools. Long-term the connection config should be stored server-side (tied to the authenticated session), with credentials never leaving the server after initial setup.
@@ -21,6 +23,7 @@ Username and password are persisted in plaintext localStorage. This is convenien
 ---
 
 ### Credentials sent in every request body
+
 **File:** `src/routes/(app)/trino/+page.svelte:82–84`
 
 Because there is no server-side session yet, connection credentials (including password) are included in the JSON body of every `/api/trino/query` POST. Once server-side sessions exist the client should send only a session token, not raw credentials.
@@ -28,6 +31,7 @@ Because there is no server-side session yet, connection credentials (including p
 ---
 
 ### Raw upstream error messages returned to the client
+
 **File:** `src/routes/api/trino/query/+server.ts:165, 181, 209`
 
 Trino error messages and Node.js exception messages are returned to the browser without any sanitisation. Trino errors may expose schema details, table names, or internal query plans. These should be classified (query error vs. infrastructure error) and sanitised before being surfaced to users.
@@ -37,6 +41,7 @@ Trino error messages and Node.js exception messages are returned to the browser
 ## API & Validation
 
 ### API route request body not validated with Zod
+
 **File:** `src/routes/api/trino/query/+server.ts:83–103`
 
 `parseConnection` uses manual `typeof` checks instead of a Zod schema. The AGENTS.md guidelines require Zod for all validation. Additionally, `request.json()` is called without a try/catch — a malformed JSON body will throw an unhandled error rather than returning a 400.
@@ -44,6 +49,7 @@ Trino error messages and Node.js exception messages are returned to the browser
 ---
 
 ### In-memory query cache has no total size bound
+
 **File:** `src/routes/api/trino/query/+server.ts:40–47`
 
 Each cached query can hold up to `MAX_CACHED_ROWS` (100 000) rows. `evictStale()` is only called when a new query arrives, not on a timer, so a long idle period followed by many concurrent queries could accumulate significant memory before eviction runs. Needs a bounded cache (e.g. LRU with a memory cap) and a periodic eviction timer.
@@ -51,6 +57,7 @@ Each cached query can hold up to `MAX_CACHED_ROWS` (100 000) rows. `evictStale()
 ---
 
 ### Displayed results not cleared on connection change
+
 **File:** `src/routes/(app)/trino/+page.svelte:40–46`
 
 The `$effect` that persists connection settings only resets `queryId`, not `rows`, `columns`, or `error`. After switching to a different Trino instance the previous result set remains visible until a new query is run, which is confusing.
@@ -66,6 +73,7 @@ No CSP headers are set anywhere. This leaves the app exposed to XSS in ways that
 ---
 
 ### `allowedHosts: true` in Vite config
+
 **File:** `vite.config.ts`
 
 The dev server accepts requests from any host. This enables DNS rebinding attacks against local development environments. Should be restricted to `localhost` / `127.0.0.1` unless remote dev access is explicitly needed.
diff --git a/e2e/trino.spec.ts b/e2e/trino.spec.ts
index d212181d..8af238ff 100644
--- a/e2e/trino.spec.ts
+++ b/e2e/trino.spec.ts
@@ -22,9 +22,7 @@ async function startMockTrinoServer(
   return {
     url: `http://127.0.0.1:${port}`,
     stop: () =>
-      new Promise<void>((resolve, reject) =>
-        server.close((err) => (err ? reject(err) : resolve()))
-      )
+      new Promise<void>((resolve, reject) => server.close((err) => (err ? reject(err) : resolve())))
   };
 }
 
@@ -116,6 +114,7 @@ test.describe('Trino query editor', () => {
     try {
       await page.goto('/trino');
       await waitForHydration(page);
+      await page.locator('.monaco-editor').click();
       await page.keyboard.press('Control+Enter');
 
       await expect.poll(() => called).toBe(true);
diff --git a/src/lib/components/editor/MonacoEditor.svelte b/src/lib/components/editor/MonacoEditor.svelte
index 3932af87..76fff58d 100644
--- a/src/lib/components/editor/MonacoEditor.svelte
+++ b/src/lib/components/editor/MonacoEditor.svelte
@@ -19,9 +19,7 @@
 
   // Start loading in parallel with the rest of the page — not deferred to onMount.
   // Guarded by `browser` because SvelteKit evaluates component scripts on the server too.
-  const workerImport = browser
-    ? import('monaco-editor/esm/vs/editor/editor.worker?worker')
-    : null;
+  const workerImport = browser ? import('monaco-editor/esm/vs/editor/editor.worker?worker') : null;
   const monacoImport = browser ? import('monaco-editor') : null;
 
   function toMonacoTheme(t: string): string {
diff --git a/src/lib/server/trino.ts b/src/lib/server/trino.ts
index 66a89c7f..ebbb740e 100644
--- a/src/lib/server/trino.ts
+++ b/src/lib/server/trino.ts
@@ -18,9 +18,7 @@ export interface CacheEntry {
   createdAt: number;
 }
 
-export type AuthConfig =
-  | { type: 'none' }
-  | { type: 'basic'; username: string; password: string };
+export type AuthConfig = { type: 'none' } | { type: 'basic'; username: string; password: string };
 
 export const POLL_TIMEOUT_MS = 30_000;
 export const MAX_CACHED_ROWS = 100_000;
diff --git a/src/lib/theme.svelte.ts b/src/lib/theme.svelte.ts
index fba15341..de0939e1 100644
--- a/src/lib/theme.svelte.ts
+++ b/src/lib/theme.svelte.ts
@@ -1,3 +1,5 @@
 import { browser } from '$app/environment';
 
-export const theme = $state({ current: browser ? (document.documentElement.dataset.theme ?? 'dark') : 'dark' });
+export const theme = $state({
+  current: browser ? (document.documentElement.dataset.theme ?? 'dark') : 'dark'
+});
diff --git a/src/routes/(app)/trino/+page.server.ts b/src/routes/(app)/trino/+page.server.ts
index 29503e2d..b108885a 100644
--- a/src/routes/(app)/trino/+page.server.ts
+++ b/src/routes/(app)/trino/+page.server.ts
@@ -57,7 +57,11 @@ export const actions: Actions = {
 
       if (response.error) {
         log.info({ err: response.error }, 'query error');
-        return message(form, { type: 'error', message: response.error.message } satisfies FormMessage, { status: 400 });
+        return message(
+          form,
+          { type: 'error', message: response.error.message } satisfies FormMessage,
+          { status: 400 }
+        );
       }
 
       if (response.columns) columns = response.columns;
@@ -66,14 +70,22 @@ export const actions: Actions = {
       while (response.nextUri && rows.length < MAX_CACHED_ROWS) {
         if (Date.now() > deadline) {
           log.info({ trino_url: connectionUrl, timeout_ms: POLL_TIMEOUT_MS }, 'query timed out');
-          return message(form, { type: 'error', message: m.trino_query_timeout() } satisfies FormMessage, { status: 408 });
+          return message(
+            form,
+            { type: 'error', message: m.trino_query_timeout() } satisfies FormMessage,
+            { status: 408 }
+          );
         }
 
         response = await trinoFetch(response.nextUri, auth);
 
         if (response.error) {
           log.info({ err: response.error }, 'query error');
-          return message(form, { type: 'error', message: response.error.message } satisfies FormMessage, { status: 400 });
+          return message(
+            form,
+            { type: 'error', message: response.error.message } satisfies FormMessage,
+            { status: 400 }
+          );
         }
 
         if (response.columns && columns.length === 0) columns = response.columns;
@@ -84,7 +96,12 @@ export const actions: Actions = {
       queryCache.set(queryId, { columns, rows, createdAt: Date.now() });
 
       log.info(
-        { query_id: queryId, rows: rows.length, cols: columns.length, duration_ms: Date.now() - queryStart },
+        {
+          query_id: queryId,
+          rows: rows.length,
+          cols: columns.length,
+          duration_ms: Date.now() - queryStart
+        },
         'query complete'
       );
 
@@ -116,7 +133,9 @@ export const actions: Actions = {
 
     if (!cached) {
       log.info({ query_id: queryId }, 'cache miss (session expired)');
-      return message(form, { type: 'error', message: 'session_expired' } satisfies FormMessage, { status: 404 });
+      return message(form, { type: 'error', message: 'session_expired' } satisfies FormMessage, {
+        status: 404
+      });
     }
 
     const start = page * pageSize;
diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index a0251f1c..5e3cc832 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -67,8 +67,7 @@
         hasMore = msg.hasMore;
         totalRows = msg.totalRows;
       } else {
-        queryError =
-          msg.message === 'session_expired' ? m.trino_session_expired() : msg.message;
+        queryError = msg.message === 'session_expired' ? m.trino_session_expired() : msg.message;
       }
     }
   });
@@ -90,8 +89,7 @@
         totalRows = msg.totalRows;
         queryError = null;
       } else {
-        queryError =
-          msg.message === 'session_expired' ? m.trino_session_expired() : msg.message;
+        queryError = msg.message === 'session_expired' ? m.trino_session_expired() : msg.message;
         if (msg.message === 'session_expired') queryId = null;
       }
     }
@@ -155,7 +153,6 @@
   }
 </script>
 
-
 <div class="flex h-full flex-col gap-4">
   <!-- Query form: wraps connection config + editor -->
   <form method="POST" action="?/query" use:queryEnhance bind:this={queryFormEl}>
@@ -194,7 +191,9 @@
             class:input-error={$queryErrors.connectionUrl}
             placeholder={m.trino_connection_url_placeholder()}
             bind:value={connectionUrl}
-            onkeydown={(e) => { if (e.key === 'Enter') e.preventDefault(); }}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') e.preventDefault();
+            }}
           />
           {#if $queryErrors.connectionUrl}
             <p class="text-error text-xs">{$queryErrors.connectionUrl?.join(' ')}</p>
@@ -239,7 +238,9 @@
                 class="input input-sm font-mono"
                 autocomplete="username"
                 bind:value={authUsername}
-                onkeydown={(e) => { if (e.key === 'Enter') e.preventDefault(); }}
+                onkeydown={(e) => {
+                  if (e.key === 'Enter') e.preventDefault();
+                }}
               />
             </div>
             <div class="flex flex-col gap-1">
@@ -252,7 +253,9 @@
                 class="input input-sm font-mono"
                 autocomplete="current-password"
                 bind:value={authPassword}
-                onkeydown={(e) => { if (e.key === 'Enter') e.preventDefault(); }}
+                onkeydown={(e) => {
+                  if (e.key === 'Enter') e.preventDefault();
+                }}
               />
             </div>
           </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 277fe8ab..3b77780c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,7 +11,10 @@
     const observer = new MutationObserver(() => {
       theme.current = document.documentElement.dataset.theme ?? 'dark';
     });
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme']
+    });
     return () => observer.disconnect();
   });
 </script>

From 93c2632dc8c3f1a05d2bc300953a9568aa8c017d Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Fri, 27 Feb 2026 15:52:49 +0100
Subject: [PATCH 17/19] fix e2e testflakiness in CI

---
 e2e/trino.spec.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/e2e/trino.spec.ts b/e2e/trino.spec.ts
index 8af238ff..089b96d2 100644
--- a/e2e/trino.spec.ts
+++ b/e2e/trino.spec.ts
@@ -217,8 +217,9 @@ test.describe('Trino query editor', () => {
     await expect(page.getByLabel('Username')).not.toBeVisible();
     await expect(page.getByLabel('Password')).not.toBeVisible();
 
-    // Switch to basic auth
-    await page.getByRole('radio', { name: 'Basic' }).check({ force: true });
+    // Switch to basic auth — native DOM click reliably triggers Svelte's bind:group
+    // reactivity in Firefox CI, unlike Playwright's synthesised click/check.
+    await page.getByRole('radio', { name: 'Basic' }).evaluate((el: HTMLInputElement) => el.click());
 
     await expect(page.getByLabel('Username')).toBeVisible();
     await expect(page.getByLabel('Password')).toBeVisible();

From a456dca5a43515005343a1e34f277853481f1683 Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Tue, 3 Mar 2026 12:30:53 +0100
Subject: [PATCH 18/19] Update src/routes/(app)/trino/+page.svelte

Co-authored-by: Lars Francke <lars.francke@stackable.tech>
---
 src/routes/(app)/trino/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(app)/trino/+page.svelte b/src/routes/(app)/trino/+page.svelte
index 5e3cc832..a4de9a22 100644
--- a/src/routes/(app)/trino/+page.svelte
+++ b/src/routes/(app)/trino/+page.svelte
@@ -111,7 +111,7 @@
     localStorage.setItem('trino_sql', sql);
   });
 
-  const connectionSummary = $derived(() => {
+  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} · ${auth}`;

From 410770c76f58d5f0f64574cec6c6b90a27fbde8b Mon Sep 17 00:00:00 2001
From: Benedikt Labrenz <benedikt@labrenz.org>
Date: Tue, 3 Mar 2026 15:34:29 +0100
Subject: [PATCH 19/19] Update AGENTS.md

Co-authored-by: Lukas Krug <lukas.krug@stackable.tech>
---
 AGENTS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/AGENTS.md b/AGENTS.md
index 29126d16..a5898272 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -34,7 +34,7 @@ This is a **single SvelteKit application** (not a monorepo).
 ├── e2e/                  # Playwright E2E tests
 ├── static/               # Static assets
 ├── docker/Dockerfile     # Production container image
-└── CLAUDE.md             # AI assistant instructions
+├── CLAUDE.md             # AI assistant instructions
 └── TECH_DEBT.md          # Known tech debt and deferred security concerns
 ```