diff --git a/PARITY.md b/PARITY.md
index afe474f0f..fb478452e 100644
--- a/PARITY.md
+++ b/PARITY.md
@@ -369,8 +369,9 @@ Rust binary and the Python and TypeScript launchers. It serves the embedded
 SQL explorer shell at `/` on the API's origin and exposes its load diagnostic
 through `GET /frontend/state` (HTTP 503 when unavailable). The page needs no
 runtime asset download; the option adds no SDK binding API. Without the flag,
-the existing HTTP routes are unchanged. Query controls and distribution
-validation are tracked in the subsequent frontend issues.
+the existing HTTP routes are unchanged. The page runs SQL through `POST
+/query` (script at `/frontend.js`). Distribution validation is tracked in a
+subsequent frontend issue.
 
 **Parity by construction, no drift; no SDK API change (#662).** Query is the
 default CLI mode: `dirsql "<sql>"` runs one query and prints JSON rows,
diff --git a/docs/reference/cli.md b/docs/reference/cli.md
index e0a4383c0..de5289869 100644
--- a/docs/reference/cli.md
+++ b/docs/reference/cli.md
@@ -240,8 +240,14 @@ requests, closes open `/events` streams, and exits.
 Pass `--frontend` to serve the bundled dirsql SQL explorer shell at `/` on
 the same origin as the HTTP API. It works offline and prints `Frontend at
 http://<host>:<actual-port>/` without opening a browser. With `--port 0`, the
-printed URL uses the assigned port. The initial shell shows server status;
-query controls are coming in a subsequent update.
+printed URL uses the assigned port. The page offers an editable SQL box
+holding the starter query `SELECT * FROM './' LIMIT 100`. Nothing runs until
+you press **Run** (or Ctrl/Cmd+Enter); pressing it again refreshes the
+result. Queries go through `POST /query`, so the read-only rule applies, and
+run exactly as written. The page shows elapsed time, the number of rows
+returned, and errors. Values render as text (`NULL` is marked), and only the
+first 1000 rows are displayed. An empty result says so and shows no column
+names, since the response carries none.
 
 ```bash
 dirsql server --frontend
diff --git a/packages/python/e2e-attestations/bot-1487-frontend-query-1011.json b/packages/python/e2e-attestations/bot-1487-frontend-query-1011.json
new file mode 100644
index 000000000..f20b39801
--- /dev/null
+++ b/packages/python/e2e-attestations/bot-1487-frontend-query-1011.json
@@ -0,0 +1,7 @@
+{
+  "command": "uv run python -m pytest tests/e2e/cli_version_test.py tests/e2e/query_contract_test.py tests/e2e/fanout_test.py tests/e2e/extension_package_test.py tests/e2e/server_speed_test.py -x -q",
+  "ran_at": 1791765336,
+  "exit_code": 0,
+  "commit": "a2b5671787b3cfa038a128d5cbbeac13e6c268a9",
+  "branch": "bot/1487-frontend-query-1011"
+}
diff --git a/packages/rust/changelog.d/2026-10-11-frontend-query.md b/packages/rust/changelog.d/2026-10-11-frontend-query.md
new file mode 100644
index 000000000..a211739c1
--- /dev/null
+++ b/packages/rust/changelog.d/2026-10-11-frontend-query.md
@@ -0,0 +1 @@
+**Added** SQL execution in the `dirsql server --frontend` explorer: an editable `LIMIT 100` starter query, an explicit Run control, elapsed time, result rows rendered as text, and query and server errors.
diff --git a/packages/rust/migrations.d/2026-10-11-frontend-query.md b/packages/rust/migrations.d/2026-10-11-frontend-query.md
new file mode 100644
index 000000000..dfe18bb96
--- /dev/null
+++ b/packages/rust/migrations.d/2026-10-11-frontend-query.md
@@ -0,0 +1,21 @@
+### Frontend SQL execution
+
+#### Summary
+
+The `dirsql server --frontend` page can now run read-only SQL and show the result. It adds the `/frontend.js` route, served only with `--frontend`. Nothing breaks.
+
+#### Required changes
+
+_None._
+
+#### Deprecations removed
+
+_None._
+
+#### Behavior changes without code changes
+
+_None._
+
+#### Verification
+
+Run `dirsql server --frontend --port 0`, open the printed URL, and press Run. The page lists the files under the current directory.
diff --git a/packages/rust/src/cli/frontend.html b/packages/rust/src/cli/frontend.html
index 18f20a66d..6300a4fb6 100644
--- a/packages/rust/src/cli/frontend.html
+++ b/packages/rust/src/cli/frontend.html
@@ -16,6 +16,18 @@
     .panel { margin-top: 2.5rem; padding: 1.5rem; border: 1px solid #d9e1da; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px #17302609; }
     .panel h2 { margin: 0 0 .5rem; font-size: 1rem; }
     .panel p { margin: 0; }
+    form { margin-top: 2rem; }
+    label { display: block; font-weight: 600; margin-bottom: .4rem; }
+    textarea { width: 100%; min-height: 7rem; padding: .7rem; border: 1px solid #b9c7bd; border-radius: 8px; font: .95rem/1.5 ui-monospace, monospace; resize: vertical; }
+    button { margin-top: .6rem; padding: .5rem 1.2rem; border: 0; border-radius: 8px; background: #1f6b46; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
+    button[aria-busy="true"] { opacity: .6; cursor: progress; }
+    .hint { font-size: .85rem; margin: .4rem 0 0; }
+    #result { margin-top: 1.5rem; overflow-x: auto; }
+    #result p.error { color: #a0362a; white-space: pre-wrap; overflow-wrap: anywhere; }
+    table { border-collapse: collapse; font: .85rem/1.4 ui-monospace, monospace; background: #fff; }
+    th, td { border: 1px solid #d9e1da; padding: .3rem .6rem; text-align: left; vertical-align: top; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 40rem; }
+    th { background: #eef2ee; }
+    td.null { color: #7a8a80; font-style: italic; }
     .error { border-color: #d7a7a1; background: #fff8f7; }
     .error h2 { color: #a0362a; }
     .error pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .9rem/1.5 ui-monospace, monospace; margin: .8rem 0; }
@@ -30,7 +42,15 @@ <h1>dirsql SQL explorer</h1>
       <h2 id="state-title">Connecting to dirsql…</h2>
       <p id="state-message">Checking the server state.</p>
     </section>
+    <form id="query" onsubmit="return false">
+      <label for="sql">SQL (read-only)</label>
+      <textarea id="sql" name="sql" spellcheck="false" aria-describedby="sql-hint">SELECT * FROM './' LIMIT 100</textarea>
+      <button type="button" id="run">Run</button>
+      <p class="hint" id="sql-hint">Runs exactly as written; edit the LIMIT as needed. Press Ctrl+Enter or Cmd+Enter to run.</p>
+    </form>
+    <section id="result" aria-live="polite" aria-label="Query result"></section>
   </main>
+  <script type="module" src="/frontend.js"></script>
   <script>
     (async () => {
       const panel = document.getElementById('state');
diff --git a/packages/rust/src/cli/frontend.js b/packages/rust/src/cli/frontend.js
new file mode 100644
index 000000000..1df4a1005
--- /dev/null
+++ b/packages/rust/src/cli/frontend.js
@@ -0,0 +1,161 @@
+export const STARTER_QUERY = "SELECT * FROM './' LIMIT 100";
+export const DISPLAY_ROW_LIMIT = 1000;
+
+export function formatCell(value) {
+  if (value === null || value === undefined) return { text: 'NULL', isNull: true };
+  if (typeof value === 'object') return { text: JSON.stringify(value), isNull: false };
+  return { text: String(value), isNull: false };
+}
+
+async function failureOf(response) {
+  let message = `HTTP ${response.status}`;
+  try {
+    const body = await response.json();
+    if (body && typeof body.error === 'string') message = body.error;
+  } catch {}
+  return { kind: response.status === 400 ? 'query' : 'server', httpStatus: response.status, message };
+}
+
+export function createQueryRunner({ fetch, now, onChange }) {
+  let current = { status: 'idle' };
+  let seq = 0;
+  let inflight = null;
+
+  const set = (state) => {
+    current = state;
+    onChange(state);
+  };
+
+  async function execute(sql, id, controller) {
+    const started = now();
+    const elapsed = () => Math.round(now() - started);
+    let outcome;
+    try {
+      const response = await fetch('/query', { method: 'POST', body: JSON.stringify({ sql }), signal: controller.signal });
+      if (response.ok) {
+        const rows = await response.json();
+        if (!Array.isArray(rows)) throw new Error('unexpected response');
+        const shown = rows.slice(0, DISPLAY_ROW_LIMIT);
+        outcome = {
+          status: 'success',
+          sql,
+          rows: shown,
+          columns: shown.length ? Object.keys(shown[0]) : [],
+          rowCount: rows.length,
+          shownCount: shown.length,
+          truncated: rows.length > shown.length,
+        };
+      } else {
+        outcome = { status: 'error', sql, ...(await failureOf(response)) };
+      }
+    } catch (error) {
+      outcome =
+        error instanceof TypeError || error.name === 'AbortError'
+          ? { status: 'error', sql, kind: 'network', message: error.message }
+          : { status: 'error', sql, kind: 'server', message: error.message };
+    }
+    if (id !== seq) return;
+    inflight = null;
+    set({ ...outcome, elapsedMs: elapsed() });
+  }
+
+  return {
+    state: () => current,
+    run(sql) {
+      if (inflight && inflight.sql === sql) return Promise.resolve();
+      if (inflight) inflight.controller.abort();
+      seq += 1;
+      const controller = new AbortController();
+      inflight = { sql, controller, done: null };
+      set({ status: 'running', sql });
+      inflight.done = execute(sql, seq, controller);
+      return inflight.done;
+    },
+  };
+}
+
+const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`;
+
+function summaryOf(state) {
+  const returned = `${plural(state.rowCount, 'row')} returned in ${state.elapsedMs} ms`;
+  if (state.truncated) return `${returned}. Display limit: first ${state.shownCount} shown.`;
+  if (state.rowCount === 0) return `${returned}. Column names are not available for an empty result.`;
+  return `${returned}.`;
+}
+
+function tableOf(doc, state) {
+  const table = doc.createElement('table');
+  const head = doc.createElement('tr');
+  for (const column of state.columns) {
+    const th = doc.createElement('th');
+    th.setAttribute('scope', 'col');
+    th.textContent = column;
+    head.append(th);
+  }
+  table.append(head);
+  for (const row of state.rows) {
+    const tr = doc.createElement('tr');
+    for (const column of state.columns) {
+      const { text, isNull } = formatCell(row[column]);
+      const td = doc.createElement('td');
+      td.textContent = text;
+      if (isNull) td.className = 'null';
+      tr.append(td);
+    }
+    table.append(tr);
+  }
+  return table;
+}
+
+const ERROR_LABEL = { query: 'Query error', server: 'Server error', network: 'Could not reach the server' };
+
+function errorText(state) {
+  if (state.kind === 'network') return `${ERROR_LABEL.network}: ${state.message}`;
+  const status = state.httpStatus ? ` (HTTP ${state.httpStatus})` : '';
+  return `${ERROR_LABEL[state.kind]}${status}: ${state.message}`;
+}
+
+export function renderResult(doc, container, state) {
+  const note = doc.createElement('p');
+  if (state.status === 'running') {
+    note.textContent = 'Running…';
+    container.replaceChildren(note);
+    return;
+  }
+  if (state.status === 'error') {
+    note.className = 'error';
+    note.setAttribute('role', 'alert');
+    note.textContent = errorText(state);
+    container.replaceChildren(note);
+    return;
+  }
+  if (state.status !== 'success') {
+    container.replaceChildren();
+    return;
+  }
+  note.textContent = summaryOf(state);
+  container.replaceChildren(...(state.rowCount ? [note, tableOf(doc, state)] : [note]));
+}
+
+if (typeof document !== 'undefined') {
+  const sql = document.getElementById('sql');
+  const run = document.getElementById('run');
+  const result = document.getElementById('result');
+  sql.value = STARTER_QUERY;
+  const runner = createQueryRunner({
+    fetch: (url, init) => fetch(url, init),
+    now: () => performance.now(),
+    onChange(state) {
+      run.setAttribute('aria-busy', String(state.status === 'running'));
+      renderResult(document, result, state);
+    },
+  });
+  const submit = () => runner.run(sql.value);
+  run.addEventListener('click', submit);
+  sql.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      submit();
+    }
+  });
+}
diff --git a/packages/rust/src/cli/router.rs b/packages/rust/src/cli/router.rs
index 327a7ce40..898e0810d 100644
--- a/packages/rust/src/cli/router.rs
+++ b/packages/rust/src/cli/router.rs
@@ -46,11 +46,20 @@ pub(super) fn router(ctx: SharedCtx, frontend: bool) -> Router {
     if frontend {
         app = app
             .route("/", get(|| async { Html(include_str!("frontend.html")) }))
+            .route("/frontend.js", get(handle_frontend_script))
             .route("/frontend/state", get(handle_frontend_state));
     }
     app.with_state(ctx)
 }
 
+async fn handle_frontend_script() -> Response {
+    (
+        [(header::CONTENT_TYPE, "text/javascript; charset=utf-8")],
+        include_str!("frontend.js"),
+    )
+        .into_response()
+}
+
 async fn handle_frontend_state(State(ctx): State<SharedCtx>) -> Response {
     match &ctx.state {
         AppState::Ready(_) => Json(json!({ "error": null })).into_response(),
@@ -215,6 +224,16 @@ mod tests {
         assert_eq!(resp.status(), StatusCode::SERVICE_UNAVAILABLE);
     }
 
+    #[tokio::test]
+    async fn frontend_script_is_served_as_javascript() {
+        let resp = handle_frontend_script().await;
+        assert_eq!(resp.status(), StatusCode::OK);
+        assert_eq!(
+            resp.headers()[header::CONTENT_TYPE],
+            "text/javascript; charset=utf-8"
+        );
+    }
+
     #[test]
     fn error_response_sets_json_content_type() {
         let resp = error_response(StatusCode::BAD_REQUEST, "boom");
diff --git a/packages/rust/tests/cli_e2e.rs b/packages/rust/tests/cli_e2e.rs
index 6c3752650..e921523ce 100644
--- a/packages/rust/tests/cli_e2e.rs
+++ b/packages/rust/tests/cli_e2e.rs
@@ -200,6 +200,50 @@ fn frontend_is_opt_in_and_serves_a_bundled_page() {
     kill_and_wait(server);
 }
 
+#[test]
+fn frontend_page_has_query_controls_and_serves_its_script() {
+    let root = TempDir::new().unwrap();
+    let port = free_port();
+    let server = spawn_dirsql(root.path(), port);
+    wait_until_ready(port, Duration::from_secs(5));
+    let client = Client::new();
+    let base = format!("http://localhost:{port}");
+    assert_eq!(
+        client
+            .get(format!("{base}/frontend.js"))
+            .send()
+            .unwrap()
+            .status(),
+        StatusCode::NOT_FOUND
+    );
+    kill_and_wait(server);
+
+    let server = spawn_dirsql_with_args(root.path(), port, &["--frontend"]);
+    wait_until_ready(port, Duration::from_secs(5));
+    let page = client.get(&base).send().unwrap().text().unwrap();
+    assert!(page.contains("<textarea"), "{page}");
+    assert!(page.contains("LIMIT 100"), "{page}");
+    assert!(page.contains("Run"), "{page}");
+    let script = client.get(format!("{base}/frontend.js")).send().unwrap();
+    assert_eq!(script.status(), StatusCode::OK);
+    assert!(
+        script.headers()["content-type"]
+            .to_str()
+            .unwrap()
+            .starts_with("text/javascript")
+    );
+    assert!(script.text().unwrap().contains("createQueryRunner"));
+
+    let write = client
+        .post(format!("{base}/query"))
+        .body("CREATE TABLE t (a)")
+        .send()
+        .unwrap();
+    assert_eq!(write.status(), StatusCode::BAD_REQUEST);
+    assert!(write.json::<Value>().unwrap()["error"].is_string());
+    kill_and_wait(server);
+}
+
 #[test]
 fn frontend_still_loads_and_reports_an_invalid_config() {
     let root = TempDir::new().unwrap();
diff --git a/packages/rust/tests/frontend/query.test.mjs b/packages/rust/tests/frontend/query.test.mjs
new file mode 100644
index 000000000..408f5cbbb
--- /dev/null
+++ b/packages/rust/tests/frontend/query.test.mjs
@@ -0,0 +1,385 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import {
+  DISPLAY_ROW_LIMIT,
+  STARTER_QUERY,
+  createQueryRunner,
+  formatCell,
+  renderResult,
+} from '../../src/cli/frontend.js';
+
+function response(status, body) {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    json: async () => {
+      if (body === undefined) throw new SyntaxError('no body');
+      return body;
+    },
+  };
+}
+
+function clock(...ticks) {
+  let i = 0;
+  return () => ticks[Math.min(i++, ticks.length - 1)];
+}
+
+function deferred() {
+  let resolve;
+  const promise = new Promise((r) => {
+    resolve = r;
+  });
+  return { promise, resolve };
+}
+
+function fakeDocument() {
+  function element(tag) {
+    const el = {
+      tag,
+      children: [],
+      attrs: {},
+      className: '',
+      _text: '',
+      get textContent() {
+        return el._text + el.children.map((c) => c.textContent).join('');
+      },
+      set textContent(v) {
+        el._text = String(v);
+        el.children = [];
+      },
+      set innerHTML(_) {
+        throw new Error('innerHTML must never be used');
+      },
+      setAttribute(k, v) {
+        el.attrs[k] = String(v);
+      },
+      append(...nodes) {
+        el.children.push(...nodes);
+      },
+      replaceChildren(...nodes) {
+        el._text = '';
+        el.children = nodes;
+      },
+      find(tagName) {
+        const out = [];
+        const walk = (n) => {
+          if (n.tag === tagName) out.push(n);
+          n.children.forEach(walk);
+        };
+        walk(el);
+        return out;
+      },
+    };
+    return el;
+  }
+  return { createElement: element };
+}
+
+function run(state) {
+  const doc = fakeDocument();
+  const container = doc.createElement('div');
+  renderResult(doc, container, state);
+  return container;
+}
+
+describe('starter query', () => {
+  it('is an editable bounded path-table query with the limit visible', () => {
+    assert.equal(STARTER_QUERY, "SELECT * FROM './' LIMIT 100");
+  });
+});
+
+describe('formatCell', () => {
+  it('renders NULL distinctly from the text "NULL"', () => {
+    assert.deepEqual(formatCell(null), { text: 'NULL', isNull: true });
+    assert.deepEqual(formatCell('NULL'), { text: 'NULL', isNull: false });
+  });
+
+  it('renders scalars and multiline text as text', () => {
+    assert.deepEqual(formatCell(42), { text: '42', isNull: false });
+    assert.deepEqual(formatCell(true), { text: 'true', isNull: false });
+    assert.deepEqual(formatCell('a\nb'), { text: 'a\nb', isNull: false });
+    assert.deepEqual(formatCell(''), { text: '', isNull: false });
+  });
+
+  it('renders structured values as JSON text', () => {
+    assert.deepEqual(formatCell({ a: [1] }), { text: '{"a":[1]}', isNull: false });
+  });
+});
+
+describe('query success', () => {
+  it('posts the SQL as written to /query and reports rows and elapsed time', async () => {
+    const calls = [];
+    const fetch = async (url, init) => {
+      calls.push([url, init.method, init.body]);
+      return response(200, [{ path: 'a.txt', size: 3 }, { path: 'b.txt', size: 4 }]);
+    };
+    const changes = [];
+    const runner = createQueryRunner({
+      fetch,
+      now: clock(1000, 1042),
+      onChange: (s) => changes.push(s.status),
+    });
+    const sql = 'select path, size from "./"   limit 5';
+    await runner.run(sql);
+    assert.deepEqual(calls, [['/query', 'POST', JSON.stringify({ sql })]]);
+    assert.deepEqual(changes, ['running', 'success']);
+    const state = runner.state();
+    assert.equal(state.status, 'success');
+    assert.deepEqual(state.columns, ['path', 'size']);
+    assert.equal(state.rowCount, 2);
+    assert.equal(state.shownCount, 2);
+    assert.equal(state.truncated, false);
+    assert.equal(state.elapsedMs, 42);
+  });
+
+  it('separates display truncation from the returned row count', async () => {
+    const rows = Array.from({ length: DISPLAY_ROW_LIMIT + 5 }, (_, i) => ({ n: i }));
+    const runner = createQueryRunner({
+      fetch: async () => response(200, rows),
+      now: clock(0, 1),
+      onChange() {},
+    });
+    await runner.run('SELECT 1');
+    const state = runner.state();
+    assert.equal(state.rowCount, DISPLAY_ROW_LIMIT + 5);
+    assert.equal(state.shownCount, DISPLAY_ROW_LIMIT);
+    assert.equal(state.truncated, true);
+    const text = run(state).textContent;
+    assert.match(text, new RegExp(`${DISPLAY_ROW_LIMIT + 5} rows returned`));
+    assert.match(text, new RegExp(`first ${DISPLAY_ROW_LIMIT} shown`));
+    assert.equal(run(state).find('tr').length, DISPLAY_ROW_LIMIT + 1);
+  });
+
+  it('renders a header, one row per result and NULL cells', async () => {
+    const runner = createQueryRunner({
+      fetch: async () => response(200, [{ a: 1, b: null }]),
+      now: clock(0, 5),
+      onChange() {},
+    });
+    await runner.run('SELECT 1');
+    const view = run(runner.state());
+    assert.deepEqual(
+      view.find('th').map((t) => t.textContent),
+      ['a', 'b'],
+    );
+    const cells = view.find('td');
+    assert.deepEqual(
+      cells.map((c) => c.textContent),
+      ['1', 'NULL'],
+    );
+    assert.match(cells[1].className, /null/);
+    assert.match(view.textContent, /1 row returned in 5 ms/);
+  });
+});
+
+describe('zero rows', () => {
+  it('says so explicitly and does not invent columns', async () => {
+    const runner = createQueryRunner({
+      fetch: async () => response(200, []),
+      now: clock(0, 7),
+      onChange() {},
+    });
+    await runner.run("SELECT * FROM './nothing'");
+    const state = runner.state();
+    assert.equal(state.status, 'success');
+    assert.deepEqual(state.columns, []);
+    assert.equal(state.rowCount, 0);
+    const view = run(state);
+    assert.match(view.textContent, /0 rows returned in 7 ms/);
+    assert.match(view.textContent, /column names are not available/i);
+    assert.equal(view.find('th').length, 0);
+    assert.equal(view.find('table').length, 0);
+  });
+});
+
+describe('read-only rejection', () => {
+  it('shows the server message as a query error', async () => {
+    const runner = createQueryRunner({
+      fetch: async () => response(400, { error: 'attempt to write a readonly database' }),
+      now: clock(0, 3),
+      onChange() {},
+    });
+    await runner.run('DELETE FROM t');
+    const state = runner.state();
+    assert.equal(state.status, 'error');
+    assert.equal(state.kind, 'query');
+    assert.equal(state.message, 'attempt to write a readonly database');
+    const view = run(state);
+    assert.match(view.textContent, /Query error/);
+    assert.match(view.textContent, /attempt to write a readonly database/);
+    assert.equal(view.find('table').length, 0);
+    assert.equal(view.find('p')[0].attrs.role, 'alert');
+  });
+});
+
+describe('server failure', () => {
+  it('reports a server error status with its message', async () => {
+    const runner = createQueryRunner({
+      fetch: async () => response(503, { error: 'config failed to load' }),
+      now: clock(0, 3),
+      onChange() {},
+    });
+    await runner.run('SELECT 1');
+    const state = runner.state();
+    assert.equal(state.kind, 'server');
+    assert.equal(state.message, 'config failed to load');
+    assert.match(run(state).textContent, /Server error \(HTTP 503\)/);
+  });
+
+  it('reports a non-JSON failure response by status', async () => {
+    const runner = createQueryRunner({
+      fetch: async () => response(502),
+      now: clock(0, 3),
+      onChange() {},
+    });
+    await runner.run('SELECT 1');
+    const state = runner.state();
+    assert.equal(state.kind, 'server');
+    assert.match(state.message, /502/);
+  });
+
+  it('reports an unreachable server', async () => {
+    const runner = createQueryRunner({
+      fetch: async () => {
+        throw new TypeError('Failed to fetch');
+      },
+      now: clock(0, 3),
+      onChange() {},
+    });
+    await runner.run('SELECT 1');
+    const state = runner.state();
+    assert.equal(state.kind, 'network');
+    assert.match(run(state).textContent, /Could not reach the server: Failed to fetch/);
+  });
+
+  it('reports a malformed success body as a server error', async () => {
+    const runner = createQueryRunner({
+      fetch: async () => response(200),
+      now: clock(0, 3),
+      onChange() {},
+    });
+    await runner.run('SELECT 1');
+    assert.equal(runner.state().status, 'error');
+    assert.equal(runner.state().kind, 'server');
+  });
+});
+
+describe('safe rendering', () => {
+  it('shows HTML-like cells, headers and errors as text only', async () => {
+    const evil = '<img src=x onerror=alert(1)>';
+    const runner = createQueryRunner({
+      fetch: async () => response(200, [{ [evil]: `${evil}\nline two` }]),
+      now: clock(0, 1),
+      onChange() {},
+    });
+    await runner.run('SELECT 1');
+    const view = run(runner.state());
+    assert.equal(view.find('img').length, 0);
+    assert.deepEqual(
+      view.find('th').map((t) => t.textContent),
+      [evil],
+    );
+    assert.deepEqual(
+      view.find('td').map((t) => t.textContent),
+      [`${evil}\nline two`],
+    );
+
+    const failing = createQueryRunner({
+      fetch: async () => response(400, { error: evil }),
+      now: clock(0, 1),
+      onChange() {},
+    });
+    await failing.run('SELECT 1');
+    const errView = run(failing.state());
+    assert.equal(errView.find('img').length, 0);
+    assert.match(errView.textContent, /<img src=x onerror=alert\(1\)>/);
+  });
+});
+
+describe('request ordering and duplicates', () => {
+  it('a delayed earlier response cannot overwrite a later query', async () => {
+    const first = deferred();
+    const second = deferred();
+    const pending = [first, second];
+    const fetch = () => pending.shift().promise;
+    const runner = createQueryRunner({ fetch, now: clock(0, 1, 2, 3), onChange() {} });
+    const a = runner.run('SELECT 1');
+    const b = runner.run('SELECT 2');
+    second.resolve(response(200, [{ v: 'second' }]));
+    await b;
+    assert.deepEqual(runner.state().rows, [{ v: 'second' }]);
+    first.resolve(response(200, [{ v: 'first' }]));
+    await a;
+    assert.equal(runner.state().sql, 'SELECT 2');
+    assert.deepEqual(runner.state().rows, [{ v: 'second' }]);
+  });
+
+  it('a delayed earlier failure cannot overwrite a later success', async () => {
+    const first = deferred();
+    const second = deferred();
+    const pending = [first, second];
+    const runner = createQueryRunner({
+      fetch: () => pending.shift().promise,
+      now: clock(0, 1, 2, 3),
+      onChange() {},
+    });
+    const a = runner.run('SELECT 1');
+    const b = runner.run('SELECT 2');
+    second.resolve(response(200, [{ v: 1 }]));
+    await b;
+    first.resolve(response(500, { error: 'late' }));
+    await a;
+    assert.equal(runner.state().status, 'success');
+  });
+
+  it('aborts the superseded request', async () => {
+    const signals = [];
+    const runner = createQueryRunner({
+      fetch: (_url, init) => {
+        signals.push(init.signal);
+        return new Promise(() => {});
+      },
+      now: clock(0),
+      onChange() {},
+    });
+    runner.run('SELECT 1');
+    runner.run('SELECT 2');
+    assert.equal(signals[0].aborted, true);
+    assert.equal(signals[1].aborted, false);
+  });
+
+  it('ignores an identical submission while one is in flight', async () => {
+    const gate = deferred();
+    let calls = 0;
+    const runner = createQueryRunner({
+      fetch: () => {
+        calls += 1;
+        return gate.promise;
+      },
+      now: clock(0, 1),
+      onChange() {},
+    });
+    const a = runner.run('SELECT 1');
+    await runner.run('SELECT 1');
+    assert.equal(calls, 1);
+    gate.resolve(response(200, []));
+    await a;
+    await runner.run('SELECT 1');
+    assert.equal(calls, 2);
+  });
+
+  it('shows a running state with the SQL in flight', () => {
+    const runner = createQueryRunner({
+      fetch: () => new Promise(() => {}),
+      now: clock(0),
+      onChange() {},
+    });
+    runner.run('SELECT 1');
+    assert.deepEqual(
+      { status: runner.state().status, sql: runner.state().sql },
+      { status: 'running', sql: 'SELECT 1' },
+    );
+    assert.match(run(runner.state()).textContent, /Running/);
+  });
+});
diff --git a/packages/rust/tests/frontend_js.rs b/packages/rust/tests/frontend_js.rs
new file mode 100644
index 000000000..e20857b5d
--- /dev/null
+++ b/packages/rust/tests/frontend_js.rs
@@ -0,0 +1,20 @@
+//! The bundled frontend's script, exercised by Node's built-in test runner.
+
+use std::path::Path;
+use std::process::Command;
+
+#[test]
+fn frontend_script_passes_its_node_tests() {
+    let dir = Path::new(env!("CARGO_MANIFEST_DIR")).join("tests/frontend");
+    let output = Command::new("node")
+        .arg("--test")
+        .arg(dir.join("query.test.mjs"))
+        .output()
+        .expect("node must be installed to test the bundled frontend");
+    assert!(
+        output.status.success(),
+        "{}\n{}",
+        String::from_utf8_lossy(&output.stdout),
+        String::from_utf8_lossy(&output.stderr)
+    );
+}
diff --git a/packages/ts/e2e-attestations/bot-1487-frontend-query-1011.json b/packages/ts/e2e-attestations/bot-1487-frontend-query-1011.json
new file mode 100644
index 000000000..2b6caf4c8
--- /dev/null
+++ b/packages/ts/e2e-attestations/bot-1487-frontend-query-1011.json
@@ -0,0 +1,7 @@
+{
+  "command": "pnpm test:e2e",
+  "ran_at": 1791765405,
+  "exit_code": 0,
+  "commit": "54698ec6618848bc1129495ad93628f34e27a8ac",
+  "branch": "bot/1487-frontend-query-1011"
+}