feat(quandledb): frontend query UI — textarea editor, results table, trace panel

- Page_Query.res: full KRL/SQL query page with useReducer state machine,
  Ctrl+Enter shortcut, example quick-load buttons, stats bar, collapsible
  trace panel, warning list, dynamic result table, error card
- Api.res: postQuery — POST /api/query, returns queryResponse or queryError
- Decoders.res: decodeQueryResponse, decodeQueryError, decodeStageTrace
- Types.res: stageTrace, queryResponse, queryError types
- Route.res: Query route added (["query"] ↔ "/query")
- View_Helpers.res: "Query" nav link in NavBar
- App.res: Query route dispatch; fix pre-existing dispatch(…->ignore) bug;
  replace Webapi.Dom bindings with direct @Val FFI (rescript-webapi@0.8 incompatible with rescript 12)
- deno.json: nodeModulesDir auto; fix rescript import specifier (add npm: prefix)
- style.css: full query page stylesheet (textarea, controls, stats bar,
  trace table, warnings, result table, error card, badges)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: hyperpolymath

quandledb/frontend/deno.json

@@ -1,11 +1,12 @@
 {
+  "nodeModulesDir": "auto",
   "tasks": {
     "build": "deno run -A npm:rescript build",
     "watch": "deno run -A npm:rescript build -w",
     "clean": "deno run -A npm:rescript clean"
   },
   "imports": {
-    "rescript": "^12.0.0",
+    "rescript": "npm:rescript@^12.0.0",
     "@rescript/react": "npm:@rescript/react@^0.14.0",
     "react": "npm:react@^19.0.0",
     "react-dom": "npm:react-dom@^19.0.0"

quandledb/frontend/deno.lock

@@ -83,3 +83,42 @@ let fetchStatistics = async (): result<Types.statistics, string> => {
   | Error(e) => Error(e)
   }
 }
+
+let postQuery = async (
+  ~src: string,
+  ~format: string="auto",
+  ~maxRows: int=1000,
+): result<Types.queryResponse, Types.queryError> => {
+  try {
+    let bodyObj = Js.Dict.empty()
+    Js.Dict.set(bodyObj, "query",    Js.Json.string(src))
+    Js.Dict.set(bodyObj, "format",   Js.Json.string(format))
+    Js.Dict.set(bodyObj, "max_rows", Js.Json.number(Belt.Int.toFloat(maxRows)))
+    let bodyStr = Js.Json.stringify(Js.Json.object_(bodyObj))
+
+    let resp = await fetch(baseUrl ++ "/api/query", {
+      "method": "POST",
+      "headers": {"Content-Type": "application/json"},
+      "body": bodyStr,
+    })
+    let json = await responseJson(resp)
+
+    if responseOk(resp) {
+      switch Decoders.decodeQueryResponse(json) {
+      | Ok(r) => Ok(r)
+      | Error(e) =>
+        Error({Types.errorKind: "decode_error", message: e, line: None, col: None})
+      }
+    } else {
+      Error(Decoders.decodeQueryError(json))
+    }
+  } catch {
+  | exn =>
+    Error({
+      Types.errorKind: "network_error",
+      message: Js.String2.make(exn),
+      line: None,
+      col: None,
+    })
+  }
+}

quandledb/frontend/src/Api.res

@@ -21,6 +21,8 @@ type msg =
   | SetFilters(Types.filters)
 
 @val external pushState: (Js.Nullable.t<string>, string, string) => unit = "history.pushState"
+@val external addWindowEventListener: (string, 'a => unit) => unit = "window.addEventListener"
+@val external removeWindowEventListener: (string, 'a => unit) => unit = "window.removeEventListener"
 
 @react.component
 let make = () => {
@@ -50,18 +52,15 @@ let make = () => {
   // Listen for popstate (browser back/forward)
   React.useEffect0(() => {
     let handler = _ => dispatch(UrlChanged)
-    Webapi.Dom.Window.addEventListener(Webapi.Dom.window, "popstate", handler)
-    Some(
-      () => Webapi.Dom.Window.removeEventListener(Webapi.Dom.window, "popstate", handler),
-    )
+    addWindowEventListener("popstate", handler)
+    Some(() => removeWindowEventListener("popstate", handler))
   })
 
   // Fetch data when route changes
   React.useEffect1(() => {
     switch model.route {
     | Dashboard =>
       if model.stats == NotAsked {
-        dispatch(GotStatistics(Error(""))->ignore)
         let _ = {
           open Promise
           Api.fetchStatistics()->then(result => {
@@ -89,6 +88,7 @@ let make = () => {
           })
         }
       }
+    | Query => ()
     | NotFound => ()
     }
     None
@@ -124,6 +124,7 @@ let make = () => {
         />
       | KnotDetail(_) =>
         <Page_KnotDetail knot={model.knotDetail} onNavigate=navigate />
+      | Query => <Page_Query />
       | NotFound =>
         <div className="not-found">
           <h1> {React.string("404 - Not Found")} </h1>

quandledb/frontend/src/App.res

@@ -168,6 +168,124 @@ let decodeIntDict = (json: Js.Json.t): Js.Dict.t<int> => {
   result
 }
 
+let decodeStageTrace = (json: Js.Json.t): option<Types.stageTrace> => {
+  open Js.Json
+  switch classify(json) {
+  | JSONObject(obj) => {
+      let str = key =>
+        switch Js.Dict.get(obj, key) {
+        | Some(v) => switch classify(v) { | JSONString(s) => s | _ => "" }
+        | None => ""
+        }
+      let int_ = key =>
+        switch Js.Dict.get(obj, key) {
+        | Some(v) => switch classify(v) { | JSONNumber(n) => Belt.Float.toInt(n) | _ => 0 }
+        | None => 0
+        }
+      let float_ = key =>
+        switch Js.Dict.get(obj, key) {
+        | Some(v) => switch classify(v) { | JSONNumber(n) => n | _ => 0.0 }
+        | None => 0.0
+        }
+      Some({
+        Types.stage: str("stage"),
+        rowsIn: int_("rows_in"),
+        rowsOut: int_("rows_out"),
+        elapsedMs: float_("elapsed_ms"),
+        note: str("note"),
+      })
+    }
+  | _ => None
+  }
+}
+
+let decodeQueryResponse = (json: Js.Json.t): result<Types.queryResponse, string> => {
+  open Js.Json
+  switch classify(json) {
+  | JSONObject(obj) => {
+      let float_ = (key, def) =>
+        switch Js.Dict.get(obj, key) {
+        | Some(v) => switch classify(v) { | JSONNumber(n) => n | _ => def }
+        | None => def
+        }
+      let int_ = (key, def) =>
+        switch Js.Dict.get(obj, key) {
+        | Some(v) => switch classify(v) { | JSONNumber(n) => Belt.Float.toInt(n) | _ => def }
+        | None => def
+        }
+      let bool_ = (key, def) =>
+        switch Js.Dict.get(obj, key) {
+        | Some(v) => switch classify(v) { | JSONTrue => true | JSONFalse => false | _ => def }
+        | None => def
+        }
+      let str_ = (key, def) =>
+        switch Js.Dict.get(obj, key) {
+        | Some(v) => switch classify(v) { | JSONString(s) => s | _ => def }
+        | None => def
+        }
+      let rows = switch Js.Dict.get(obj, "rows") {
+      | Some(v) => switch classify(v) { | JSONArray(arr) => arr | _ => [] }
+      | None => []
+      }
+      let warnings = switch Js.Dict.get(obj, "warnings") {
+      | Some(v) =>
+        switch classify(v) {
+        | JSONArray(arr) =>
+          arr->Belt.Array.keepMap(item =>
+            switch classify(item) { | JSONString(s) => Some(s) | _ => None })
+        | _ => []
+        }
+      | None => []
+      }
+      let trace = switch Js.Dict.get(obj, "trace") {
+      | Some(v) =>
+        switch classify(v) {
+        | JSONArray(arr) => arr->Belt.Array.keepMap(decodeStageTrace)
+        | _ => []
+        }
+      | None => []
+      }
+      Ok({
+        Types.rows,
+        count: int_("count", Belt.Array.length(rows)),
+        parseTimeMs: float_("parse_time_ms", 0.0),
+        evalTimeMs: float_("eval_time_ms", 0.0),
+        totalMs: float_("total_ms", 0.0),
+        pushdownUsed: bool_("pushdown_used", false),
+        parseSource: str_("parse_source", "krl"),
+        warnings,
+        trace,
+      })
+    }
+  | _ => Error("Expected JSON object for query response")
+  }
+}
+
+let decodeQueryError = (json: Js.Json.t): Types.queryError => {
+  open Js.Json
+  switch classify(json) {
+  | JSONObject(obj) => {
+      let str_ = (key, def) =>
+        switch Js.Dict.get(obj, key) {
+        | Some(v) => switch classify(v) { | JSONString(s) => s | _ => def }
+        | None => def
+        }
+      let optInt = key =>
+        switch Js.Dict.get(obj, key) {
+        | Some(v) => switch classify(v) { | JSONNumber(n) => Some(Belt.Float.toInt(n)) | _ => None }
+        | None => None
+        }
+      {
+        Types.errorKind: str_("error", "unknown"),
+        message: str_("message", "Unknown error"),
+        line: optInt("line"),
+        col: optInt("col"),
+      }
+    }
+  | _ => {Types.errorKind: "decode_error", message: "Could not parse error response", line: None, col: None}
+  }
+}
+
 let decodeStatistics = (json: Js.Json.t): result<Types.statistics, string> => {
   open Js.Json
   switch classify(json) {