feat(sql-editor): add JS/TS code cells with allowlisted imports

apps/web/package.json

@@ -33,7 +33,9 @@
     "@tailwindcss/vite": "^4.3.0",
     "better-sqlite3": "^12.11.1",
     "cors": "^2.8.6",
+    "date-fns": "^4.4.0",
     "express": "^5.2.1",
+    "lodash-es": "^4.18.1",
     "lucide-react": "^1.16.0",
     "monaco-editor": "0.55.1",
     "mssql": "^12.6.0",
@@ -52,6 +54,7 @@
   "devDependencies": {
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.6",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^26.1.0",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

apps/web/src/frontend/components/sql-editor/DataGrid.tsx

@@ -284,7 +284,7 @@
   const colKey = sourceColumns.join('\0');
   const colKinds = useMemo(
     () => computeColKinds(sourceColumns, sourceRows),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- colKey captures column identity; rowCount covers data refresh
     [colKey, sourceRows.length, result.ok ? result.rowCount : 0]
   );
 
@@ -478,7 +478,7 @@
       <div
         ref={scrollRef}
         data-testid="sql-data-grid"
-        className="fox-sql-grid flex-1 min-h-0 border border-slate-700/80 rounded-lg shadow-sm bg-slate-50"
+        className="fox-sql-grid flex-1 min-h-0 border border-slate-300 rounded-lg shadow-sm bg-slate-50"
         style={{ overflowX: 'auto', overflowY: 'auto' }}
         onScroll={onScroll}
         onContextMenu={(e) => {
@@ -677,7 +677,7 @@
           </table>
         )}
       </div>
-      <div className="flex items-center gap-2 mt-1 text-[10px] text-slate-500 shrink-0 flex-wrap">
+      <div className="flex items-center gap-2 mt-1 text-[10px] text-slate-400 shrink-0 flex-wrap">
         <span>
           {result.rowCount} row{result.rowCount === 1 ? '' : 's'}
           {pageSize ? ` / page of ${pageSize}` : ''}
@@ -686,7 +686,7 @@
           {result.durationMs} ms
         </span>
         {result.truncated && (
-          <span className="text-amber-500 font-semibold">
+          <span className="text-amber-400 font-semibold">
             truncated — use Next page or raise Rows/page
           </span>
         )}
@@ -697,7 +697,7 @@
               data-testid="sql-page-prev"
               disabled={!hasPrevPage || pageLoading}
               onClick={onPrevPage}
-              className="px-1.5 py-0.5 rounded border border-slate-300 text-slate-600 font-semibold hover:bg-slate-100 disabled:opacity-40"
+              className="px-1.5 py-0.5 rounded border border-slate-600 text-slate-300 font-semibold hover:bg-slate-800 disabled:opacity-40"
             >
               Prev
             </button>
@@ -706,7 +706,7 @@
               data-testid="sql-page-next"
               disabled={!hasNextPage || pageLoading}
               onClick={onNextPage}
-              className="px-1.5 py-0.5 rounded border border-slate-300 text-slate-600 font-semibold hover:bg-slate-100 disabled:opacity-40"
+              className="px-1.5 py-0.5 rounded border border-slate-600 text-slate-300 font-semibold hover:bg-slate-800 disabled:opacity-40"
             >
               {pageLoading ? '…' : 'Next'}
             </button>

apps/web/src/frontend/components/sql-editor/ResultsPanel.tsx

@@ -4,6 +4,7 @@ import type { CredentialRun } from '../../store/useSqlEditorStore';
 import type { ResultsLayout } from '../../store/sqlEditorTabLogic';
 import { DataGrid, PANE_DEFAULT_H_PX, PANE_DEFAULT_PX, PANE_MIN_H_PX, PANE_MIN_PX } from './DataGrid';
 import type { SqlStatementResult } from '../../api/sqlApi';
+import { detectCodeCell } from '../../lib/codeCellRunner';
 
 interface Props {
   runs: CredentialRun[];
@@ -45,6 +46,10 @@ function bindAxisDrag(cursor: string, onMove: (ev: MouseEvent) => void): void {
 }
 
 const statementLabel = (sql: string, index: number): string => {
+  const cell = detectCodeCell(sql);
+  if (cell) {
+    return `Query ${index + 1} · ${cell.kind === 'ts' ? 'TypeScript' : 'JavaScript'}`;
+  }
   const compact = sql.replace(/\s+/g, ' ').trim();
   return `Query ${index + 1} · ${compact.length > 48 ? compact.slice(0, 48) + '…' : compact}`;
 };

apps/web/src/frontend/components/sql-editor/StatementStrip.tsx

@@ -183,7 +183,8 @@ export const StatementStrip: React.FC<Props> = ({ statements, checked, onToggle,
           const status = checkStatement(stmt);
           const ok = status.level === 'ok';
           const isChecked = checked.includes(i);
-          const verb = statementVerb(stmt.text);
+          const codeKind = stmt.kind === 'js' || stmt.kind === 'ts' ? stmt.kind : null;
+          const verb = codeKind ? null : statementVerb(stmt.text);
           const dmlBadge =
             safeMode && verb && isMutatingDmlStatement(stmt.text) ? DML_BADGE[verb] : null;
           const noWhere = dmlBadge ? dmlLacksWhere(stmt.text) : false;
@@ -226,6 +227,14 @@ export const StatementStrip: React.FC<Props> = ({ statements, checked, onToggle,
                 >
                   {ok ? '✓' : '⚠'}
                 </span>
+                {codeKind && (
+                  <span
+                    className="shrink-0 text-[10px] font-bold uppercase tracking-wide px-1 py-0.5 rounded mt-0.5 bg-violet-950/40 text-violet-300 border border-violet-500/35"
+                    title={`${codeKind === 'ts' ? 'TypeScript' : 'JavaScript'} code cell (-- @${codeKind} … -- @end)`}
+                  >
+                    {codeKind === 'ts' ? 'TS' : 'JS'}
+                  </span>
+                )}
                 {dmlBadge && (
                   <span
                     className={`shrink-0 text-[10px] font-bold uppercase tracking-wide px-1 py-0.5 rounded mt-0.5 ${

apps/web/src/frontend/lib/codeCell.worker.ts

@@ -0,0 +1,30 @@
+/// <reference lib="webworker" />
+import {
+  executeCodeCellSync,
+  type CodeCellLast,
+  type CodeCellResult,
+  type CodeCellVars,
+} from './codeCellExec';
+
+export type CodeCellWorkerRequest = {
+  id: number;
+  body: string;
+  last: CodeCellLast;
+  vars: CodeCellVars;
+  maxRows: number;
+};
+
+export type CodeCellWorkerResponse = { id: number } & CodeCellResult;
+
+const ctx: DedicatedWorkerGlobalScope = self as unknown as DedicatedWorkerGlobalScope;
+
+ctx.onmessage = (ev: MessageEvent<CodeCellWorkerRequest>) => {
+  const msg = ev.data;
+  const result = executeCodeCellSync({
+    body: msg.body,
+    last: msg.last,
+    vars: msg.vars,
+    maxRows: msg.maxRows,
+  });
+  ctx.postMessage({ id: msg.id, ...result } satisfies CodeCellWorkerResponse);
+};

apps/web/src/frontend/lib/codeCellExec.test.ts

@@ -0,0 +1,157 @@
+import { describe, expect, it } from 'vitest';
+import {
+  executeCodeCellSync,
+  normalizeCodeCellReturn,
+  sanitizeVarsForCodeCell,
+  codeCellHasReturn,
+} from './codeCellExec';
+import { prepareCodeCellSource } from './codeCellRunner';
+
+describe('sanitizeVarsForCodeCell', () => {
+  it('omits secret variables', () => {
+    const vars = sanitizeVarsForCodeCell([
+      { name: 'token', kind: 'scalar', value: 'secret', secret: true },
+      { name: 'n', kind: 'scalar', value: 3 },
+      { name: 'ids', kind: 'list', values: [1, 2] },
+      {
+        name: 't',
+        kind: 'table',
+        columns: ['a'],
+        rows: [[1]],
+      },
+    ]);
+    expect(vars.token).toBeUndefined();
+    expect(vars.n).toEqual({ kind: 'scalar', value: 3 });
+    expect(vars.ids).toEqual({ kind: 'list', values: [1, 2] });
+    expect(vars.t).toEqual({ kind: 'table', columns: ['a'], rows: [[1]] });
+  });
+});
+
+describe('normalizeCodeCellReturn', () => {
+  it('accepts columns/rows and caps maxRows', () => {
+    const r = normalizeCodeCellReturn(
+      { columns: ['a'], rows: [[1], [2], [3]] },
+      2
+    );
+    expect(r).toMatchObject({ ok: true, rowCount: 2, truncated: true });
+    if (r.ok) expect(r.rows).toEqual([[1], [2]]);
+  });
+
+  it('accepts array of objects', () => {
+    const r = normalizeCodeCellReturn([{ id: 1, name: 'a' }, { id: 2, name: 'b' }], 50);
+    expect(r).toMatchObject({ ok: true, columns: ['id', 'name'], rowCount: 2 });
+    if (r.ok) expect(r.rows).toEqual([
+      [1, 'a'],
+      [2, 'b'],
+    ]);
+  });
+
+  it('rejects unsupported returns', () => {
+    expect(normalizeCodeCellReturn(42, 10).ok).toBe(false);
+  });
+});
+
+describe('executeCodeCellSync', () => {
+  it('maps last.rows into a new grid', () => {
+    const r = executeCodeCellSync({
+      body: `return {
+        columns: ['id', 'n'],
+        rows: last.rows.map((r) => [r[0], Number(r[0]) * 2]),
+      };`,
+      last: { columns: ['id'], rows: [[1], [2]], rowCount: 2 },
+      vars: {},
+      maxRows: 100,
+    });
+    expect(r).toMatchObject({ ok: true, rowCount: 2 });
+    if (r.ok) expect(r.rows).toEqual([
+      [1, 2],
+      [2, 4],
+    ]);
+  });
+
+  it('allows local variables and for…of loops', () => {
+    const r = executeCodeCellSync({
+      body: `
+        const out = [];
+        const factor = 2;
+        for (const row of last.rows) {
+          const id = Number(row[0]);
+          out.push({ id, n: id * factor });
+        }
+        return out;
+      `,
+      last: { columns: ['id'], rows: [[3], [5]], rowCount: 2 },
+      vars: {},
+      maxRows: 100,
+    });
+    expect(r).toMatchObject({ ok: true, rowCount: 2, columns: ['id', 'n'] });
+    if (r.ok) expect(r.rows).toEqual([
+      [3, 6],
+      [5, 10],
+    ]);
+  });
+
+  it('rejects cells without a return statement', () => {
+    const r = executeCodeCellSync({
+      body: `const rows = last.rows.map((r) => ({ id: r[0] }));`,
+      last: { columns: ['id'], rows: [[1]], rowCount: 1 },
+      vars: {},
+      maxRows: 10,
+    });
+    expect(r).toMatchObject({ ok: false });
+    if (!r.ok) expect(r.error).toMatch(/return statement/i);
+  });
+
+  it('ignores the word return inside strings when checking', () => {
+    expect(codeCellHasReturn(`const s = "return nothing";`)).toBe(false);
+    expect(codeCellHasReturn(`const s = "return nothing";\nreturn [];`)).toBe(true);
+  });
+
+  it('reads vars and surfaces throws', () => {
+    const ok = executeCodeCellSync({
+      body: `return { columns: ['v'], rows: [[vars.n.value]] };`,
+      last: null,
+      vars: { n: { kind: 'scalar', value: 9 } },
+      maxRows: 10,
+    });
+    expect(ok).toMatchObject({ ok: true });
+    if (ok.ok) expect(ok.rows).toEqual([[9]]);
+
+    const bad = executeCodeCellSync({
+      body: `throw new Error('boom'); return null;`,
+      last: null,
+      vars: {},
+      maxRows: 10,
+    });
+    expect(bad).toMatchObject({ ok: false });
+    if (!bad.ok) expect(bad.error).toMatch(/boom/);
+  });
+});
+
+
+describe('prepareCodeCellSource', () => {
+  it('strips fence markers and @set lines', () => {
+    const prepared = prepareCodeCellSource(`-- @js
+-- @set out = table
+return last;
+-- @end`);
+    expect(prepared).toMatchObject({
+      kind: 'js',
+      body: 'return last;',
+    });
+    if (!('error' in prepared)) {
+      expect(prepared.directives).toEqual([{ mode: 'table', name: 'out' }]);
+    }
+  });
+
+  it('accepts leading @set above the fence', () => {
+    const prepared = prepareCodeCellSource(`-- @set src = table
+-- @js
+return last;
+-- @end`);
+    expect(prepared).toMatchObject({ kind: 'js', body: 'return last;' });
+    if (!('error' in prepared)) {
+      expect(prepared.directives).toEqual([{ mode: 'table', name: 'src' }]);
+    }
+  });
+});