56:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 57:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4e:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/language"}] 4f:["$","li","@codemirror/state",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Fstate","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/state"}]]}]}] 50:["$","li","@codemirror/view",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Fview","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/view"}]]}]}] 51:["$","li","@lezer/highlight",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40lezer%2Fhighlight","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@lezer/highlight"}]]}]}] 52:["$","li","@codemirror/lint",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Flint","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/lint"}]]}]}] 53:["$","li","@codemirror/search",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40codemirror%2Fsearch","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@codemirror/search"}]]}]}] 54:["$","$L56",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/button.json","https://ui.neon.com/r/neon-tokens.json"]}] 58:T6a40,"use client"; import { PostgreSQL, sql } from "@codemirror/lang-sql"; import { bracketMatching, HighlightStyle, syntaxHighlighting, } from "@codemirror/language"; import { lintGutter, setDiagnostics } from "@codemirror/lint"; import { highlightSelectionMatches, searchKeymap } from "@codemirror/search"; import { Annotation, Compartment, Prec } from "@codemirror/state"; import { EditorView, highlightActiveLineGutter, keymap, lineNumbers, placeholder, } from "@codemirror/view"; import { Alert02Icon, CheckmarkCircle02Icon, Clock01Icon, Database01Icon, Loading03Icon, PlayIcon, Shield01Icon, StopIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { tags } from "@lezer/highlight"; import { minimalSetup } from "codemirror"; import { useEffect, useRef, useState } from "react"; import type { ComponentProps } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type SQLRunnerMode = "read" | "read-write"; export interface SQLField { name: string; /** Database type label, e.g. "uuid" or "timestamptz". */ type?: string; } export type SQLRow = Record; export interface SQLResult { rows: SQLRow[]; fields?: SQLField[]; /** Total rows returned or affected. Defaults to rows.length. */ rowCount?: number; /** Query duration. Measured by SQLRunner when omitted. */ durationMs?: number; /** Postgres command tag, e.g. "SELECT", "UPDATE", or "CREATE TABLE". */ command?: string; } export interface SQLRunnerError { message: string; code?: string; detail?: string; hint?: string; line?: number; column?: number; } export interface SQLExecutionContext { mode: SQLRunnerMode; signal: AbortSignal; } const WRITE_KEYWORDS = new Set([ "ALTER", "CALL", "CLUSTER", "COMMENT", "COPY", "CREATE", "DELETE", "DO", "DROP", "GRANT", "INSERT", "LOCK", "MERGE", "REFRESH", "REINDEX", "REVOKE", "SET", "TRUNCATE", "UPDATE", "VACUUM", ]); const stripSQLNoise = (query: string) => query .replaceAll(/--.*$/gmu, " ") .replaceAll(/\/\*[\s\S]*?\*\//gu, " ") .replaceAll(/'(?:''|[^'])*'/gu, "''") .replaceAll(/"(?:""|[^"])*"/gu, '""'); /** Conservative client-side guard. The database remains the authority. */ export const isWriteQuery = (query: string) => { const tokens = stripSQLNoise(query) .toUpperCase() .match(/[A-Z_]+/gu) ?? []; return tokens.some((token) => WRITE_KEYWORDS.has(token)); }; const toRunnerError = (error: unknown): SQLRunnerError => { if (error instanceof DOMException && error.name === "AbortError") { return { message: "Query cancelled." }; } if (error instanceof Error) { const source = error as Error & Partial; return { code: source.code, column: source.column, detail: source.detail, hint: source.hint, line: source.line, message: source.message, }; } return { message: "The query failed. Check the SQL and try again." }; }; const formatDuration = (durationMs: number) => { if (durationMs < 1) { return "<1 ms"; } if (durationMs < 1000) { return `${Math.round(durationMs)} ms`; } return `${(durationMs / 1000).toFixed(2)} s`; }; const formatCell = (value: unknown) => { if (value === null) { return "NULL"; } if (value === undefined) { return ""; } if (value instanceof Date) { return value.toISOString(); } if (typeof value === "object") { try { return JSON.stringify(value); } catch { return String(value); } } return String(value); }; const getColumns = (result: SQLResult): SQLField[] => { if (result.fields && result.fields.length > 0) { return result.fields; } const [firstRow] = result.rows; return firstRow ? Object.keys(firstRow).map((name): SQLField => ({ name })) : []; }; const ModeControl = ({ mode, onChange, }: { mode: SQLRunnerMode; onChange: (mode: SQLRunnerMode) => void; }) => (

Query safety mode

); const EXTERNAL_UPDATE = Annotation.define(); const editorTheme = EditorView.theme({ "&": { backgroundColor: "var(--background)", color: "var(--foreground)", fontSize: "13px", height: "190px", }, "&.cm-focused": { outline: "none" }, "&.cm-focused .cm-cursor": { borderLeftColor: "var(--primary)" }, "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: "color-mix(in oklch, var(--primary) 16%, transparent) !important", }, ".cm-activeLineGutter": { backgroundColor: "color-mix(in oklch, var(--muted) 60%, transparent)", color: "var(--foreground)", }, ".cm-content": { caretColor: "var(--primary)", padding: "12px 0", }, ".cm-content ::selection": { backgroundColor: "color-mix(in oklch, var(--primary) 16%, transparent)", color: "var(--foreground)", }, ".cm-editor": { minWidth: "0" }, ".cm-gutters": { backgroundColor: "color-mix(in oklch, var(--muted) 22%, transparent)", borderRight: "1px solid color-mix(in oklch, var(--border) 55%, transparent)", color: "color-mix(in oklch, var(--muted-foreground) 55%, transparent)", }, ".cm-line": { padding: "0 12px" }, ".cm-lineNumbers .cm-gutterElement": { minWidth: "40px", padding: "0 10px 0 8px", }, ".cm-lintRange-error": { backgroundImage: "none", textDecoration: "underline wavy var(--destructive)", textUnderlineOffset: "3px", }, ".cm-scroller": { fontFamily: "var(--font-mono)", lineHeight: "20px", overscrollBehavior: "contain", }, ".cm-tooltip": { backgroundColor: "var(--popover)", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", color: "var(--popover-foreground)", fontFamily: "var(--font-sans)", fontSize: "12px", overflow: "hidden", }, }); const sqlHighlighting = syntaxHighlighting( HighlightStyle.define([ { color: "var(--primary)", fontWeight: "600", tag: tags.keyword }, { color: "var(--status-scaling)", tag: tags.string }, { color: "var(--muted-foreground)", fontStyle: "italic", tag: tags.comment, }, { color: "var(--foreground)", tag: [tags.name, tags.variableName] }, { color: "var(--status-sleeping)", tag: [tags.number, tags.bool, tags.null], }, { color: "var(--muted-foreground)", tag: tags.punctuation }, { color: "var(--destructive)", tag: tags.invalid }, ]) ); interface EditorPosition { column: number; line: number; selectedCharacters: number; } const Editor = ({ value, onChange, onRun, onCancel, onPositionChange, error, running, disabled, }: { value: string; onChange: (value: string) => void; onRun: (selection?: string) => void; onCancel: () => void; onPositionChange: (position: EditorPosition, selection: string) => void; error: SQLRunnerError | null; running: boolean; disabled: boolean; }) => { const mountRef = useRef(null); const viewRef = useRef(null); const editable = useRef(new Compartment()); const onChangeRef = useRef(onChange); const onRunRef = useRef(onRun); const onCancelRef = useRef(onCancel); const onPositionChangeRef = useRef(onPositionChange); const runningRef = useRef(running); const initialValueRef = useRef(value); const initialDisabledRef = useRef(disabled); useEffect(() => { onChangeRef.current = onChange; onRunRef.current = onRun; onCancelRef.current = onCancel; onPositionChangeRef.current = onPositionChange; runningRef.current = running; }, [onCancel, onChange, onPositionChange, onRun, running]); useEffect(() => { if (!mountRef.current) { return; } const reportSelection = (view: EditorView) => { const selection = view.state.selection.main; const line = view.state.doc.lineAt(selection.head); const selected = view.state.sliceDoc(selection.from, selection.to); onPositionChangeRef.current( { column: selection.head - line.from + 1, line: line.number, selectedCharacters: selection.to - selection.from, }, selected ); }; const view = new EditorView({ doc: initialValueRef.current, extensions: [ minimalSetup, lineNumbers(), highlightActiveLineGutter(), bracketMatching(), highlightSelectionMatches(), lintGutter(), keymap.of(searchKeymap), sql({ dialect: PostgreSQL }), editorTheme, sqlHighlighting, placeholder("select * from users limit 20;"), EditorView.contentAttributes.of({ "aria-label": "SQL query", autocapitalize: "off", autocomplete: "off", spellcheck: "false", }), editable.current.of( EditorView.editable.of(!initialDisabledRef.current) ), Prec.high( keymap.of([ { key: "Mod-Enter", run: (currentView) => { if (runningRef.current) { return true; } const selection = currentView.state.selection.main; const selected = currentView.state.sliceDoc( selection.from, selection.to ); onRunRef.current(selected || undefined); return true; }, }, { key: "Escape", run: () => { if (!runningRef.current) { return false; } onCancelRef.current(); return true; }, }, ]) ), EditorView.updateListener.of((update) => { if ( update.docChanged && !update.transactions.some((transaction) => transaction.annotation(EXTERNAL_UPDATE) ) ) { onChangeRef.current(update.state.doc.toString()); } if (update.docChanged || update.selectionSet) { reportSelection(update.view); } }), ], parent: mountRef.current, }); viewRef.current = view; reportSelection(view); return () => { view.destroy(); viewRef.current = null; }; }, []); useEffect(() => { const view = viewRef.current; if (!view || view.state.doc.toString() === value) { return; } view.dispatch({ annotations: EXTERNAL_UPDATE.of(true), changes: { from: 0, insert: value, to: view.state.doc.length }, }); }, [value]); useEffect(() => { viewRef.current?.dispatch({ effects: editable.current.reconfigure(EditorView.editable.of(!disabled)), }); }, [disabled]); useEffect(() => { const view = viewRef.current; if (!view) { return; } if (!error) { view.dispatch(setDiagnostics(view.state, [])); return; } const lineNumber = Math.max( 1, Math.min(error.line ?? 1, view.state.doc.lines) ); const line = view.state.doc.line(lineNumber); const from = Math.min( line.to, line.from + Math.max(0, (error.column ?? 1) - 1) ); const detail = [error.message, error.detail, error.hint] .filter(Boolean) .join("\n"); view.dispatch( setDiagnostics(view.state, [ { from, message: detail, severity: "error", source: error.code, to: Math.min(line.to, from + 1), }, ]) ); }, [error]); return (

); }; const ErrorPanel = ({ error }: { error: SQLRunnerError }) => (

{error.message}

{error.code ? (


              {error.code}

) : null} {error.line ? ( Line {error.line} {error.column ? `, column ${error.column}` : ""} ) : null}

{error.detail ? (

{error.detail}

) : null} {error.hint ? (

Hint: {error.hint}

) : null}

); const BlockedWrite = ({ onEnable }: { onEnable: () => void }) => (

); const ResultsGrid = ({ result }: { result: SQLResult }) => { const columns = getColumns(result); const rowCount = result.rowCount ?? result.rows.length; const hasRows = result.rows.length > 0; if (!hasRows) { return (

{result.command ? `${result.command} complete` : "Query complete"}

{rowCount} {rowCount === 1 ? "row" : "rows"} affected

); } return (

{columns.map((column) => ( ))} {result.rows.map((row, rowIndex) => ( {columns.map((column) => { const value = row[column.name]; const formatted = formatCell(value); return ( ); })} ))}

#	{column.name} {column.type ? ( {column.type} ) : null}
{rowIndex + 1}	{formatted}

); }; export type SQLRunnerProps = Omit, "children"> & { /** Execute SQL. Throw an Error or SQLRunnerError-shaped error on failure. */ onExecute: ( query: string, context: SQLExecutionContext ) => Promise; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; mode?: SQLRunnerMode; defaultMode?: SQLRunnerMode; onModeChange?: (mode: SQLRunnerMode) => void; title?: string; database?: string; disabled?: boolean; }; // oxlint-disable-next-line eslint/complexity -- explicit runner states stay co-located for honest precedence export const SQLRunner = ({ onExecute, value, defaultValue = "", onValueChange, mode, defaultMode = "read", onModeChange, title = "SQL editor", database = "neondb", disabled = false, className, ...props }: SQLRunnerProps) => { const valueControlled = value !== undefined; const modeControlled = mode !== undefined; const [internalValue, setInternalValue] = useState(defaultValue); const [internalMode, setInternalMode] = useState(defaultMode); const [status, setStatus] = useState< "idle" | "running" | "success" | "error" | "blocked" | "cancelled" >("idle"); const [result, setResult] = useState(null); const [error, setError] = useState(null); const [lastExecutedQuery, setLastExecutedQuery] = useState(""); const [editorState, setEditorState] = useState<{ position: EditorPosition; selection: string; }>({ position: { column: 1, line: 1, selectedCharacters: 0 }, selection: "", }); const controllerRef = useRef(null); const query = valueControlled ? value : internalValue; const safetyMode = modeControlled ? mode : internalMode; const stale = Boolean( result && lastExecutedQuery && query !== lastExecutedQuery ); const setQuery = (next: string) => { if (!valueControlled) { setInternalValue(next); } onValueChange?.(next); if (status === "error" || status === "blocked" || status === "cancelled") { setStatus(result ? "success" : "idle"); setError(null); } }; const setMode = (next: SQLRunnerMode) => { if (!modeControlled) { setInternalMode(next); } onModeChange?.(next); if (status === "blocked") { setStatus(result ? "success" : "idle"); } }; const cancel = () => { controllerRef.current?.abort(); controllerRef.current = null; setStatus("cancelled"); }; const run = async (selection?: string) => { const trimmed = selection?.trim() || query.trim(); if (!trimmed) { setError({ message: "Enter a query to run." }); setStatus("error"); return; } if (safetyMode === "read" && isWriteQuery(trimmed)) { setError(null); setStatus("blocked"); return; } const controller = new AbortController(); controllerRef.current = controller; setError(null); setStatus("running"); const startedAt = performance.now(); try { const next = await onExecute(trimmed, { mode: safetyMode, signal: controller.signal, }); if (controller.signal.aborted) { return; } setResult({ ...next, durationMs: next.durationMs ?? performance.now() - startedAt, }); setLastExecutedQuery(query); setStatus("success"); } catch (caughtError) { if (controller.signal.aborted) { return; } setError(toRunnerError(caughtError)); setStatus("error"); } finally { if (controllerRef.current === controller) { controllerRef.current = null; } } }; return (

{title}

{database}

{status === "running" ? ( ) : ( )}

setEditorState({ position, selection }) } onRun={run} running={status === "running"} value={query} />

Ln {editorState.position.line} Col {editorState.position.column} {editorState.position.selectedCharacters > 0 ? ( {editorState.position.selectedCharacters} selected ) : null} PostgreSQL

{status === "blocked" ? ( setMode("read-write")} /> ) : null} {status === "error" && error ? : null}

Results

{stale ? ( Previous query ) : null} {status === "running" ? ( ) : null} {status === "cancelled" ? Cancelled : null} {result && status !== "running" ? ( <> {result.rowCount ?? result.rows.length}{" "} {(result.rowCount ?? result.rows.length) === 1 ? "row" : "rows"} {result.durationMs === undefined ? null : ( )} ) : null}

{result ? ( ) : (

Run a query to see results.

Read-only mode blocks statements that can change data.

)}

); }; 55:["$","$L57",null,{"files":[{"path":"src/components/sql-runner/sql-runner.tsx","content":"$58","type":"registry:component"},{"path":"src/components/sql-runner/use-sql-runner.ts","content":"\"use client\";\n\nimport type {\n SQLExecutionContext,\n SQLResult,\n} from \"@/components/sql-runner/sql-runner\";\n\nexport interface UseSQLRunnerOptions {\n /** Server endpoint that executes authorized SQL. */\n endpoint?: string;\n}\n\n/** Fetch adapter for SQLRunner. The AbortSignal cancels the HTTP request. */\nexport const useSQLRunner = ({\n endpoint = \"/api/sql\",\n}: UseSQLRunnerOptions = {}) => {\n const execute = async (\n query: string,\n context: SQLExecutionContext\n ): Promise => {\n const response = await fetch(endpoint, {\n body: JSON.stringify({ mode: context.mode, query }),\n headers: { \"content-type\": \"application/json\" },\n method: \"POST\",\n signal: context.signal,\n });\n\n const payload = (await response.json()) as SQLResult | { error: string };\n if (!response.ok || \"error\" in payload) {\n throw new Error(\"error\" in payload ? payload.error : \"Query failed.\");\n }\n return payload;\n };\n\n return { execute };\n};\n","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]