@deaquinodev/querky 0.4.7 → 0.4.9

package/dist/index.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
 // src/index.tsx
-import { useState as useState5, useEffect as useEffect5 } from "react";
+import { useState as useState6, useEffect as useEffect5 } from "react";
 import { parseArgs } from "util";
-import { render, Box as Box9, Text as Text9 } from "ink";
+import { render, Box as Box7, Text as Text7 } from "ink";
 
 // src/db/client.ts
 import { Client } from "pg";
@@ -81,7 +81,7 @@ var SqliteDbClient = class {
     const stmt = this.db.prepare(sql);
     if (stmt.reader) {
       const rows = stmt.all();
-      const fields = stmt.columns().map((c) => c.name);
+      const fields = stmt.columns().map((c2) => c2.name);
       return { fields, rows, rowCount: rows.length };
     }
     const info = stmt.run();
@@ -193,11 +193,11 @@ async function connectDsn(dsn) {
 }
 
 // src/ui/components/App.tsx
-import { useState as useState3, useEffect as useEffect4, useRef as useRef2, memo } from "react";
+import { useState as useState4, useEffect as useEffect4, useRef as useRef2 } from "react";
 import { writeFileSync as writeFileSync5 } from "fs";
 import { homedir as homedir4 } from "os";
-import { join as join6 } from "path";
-import { Box as Box7, Text as Text7, useApp, useInput as useInput2, useStdin as useStdin2 } from "ink";
+import { join as join5 } from "path";
+import { Box as Box5, Static, Text as Text5, useApp, useInput as useInput2, useStdin as useStdin2 } from "ink";
 
 // src/db/query.ts
 async function runQuery(client, sql) {
@@ -741,10 +741,10 @@ var BUILTIN_COMMAND_LIST = Object.entries(COMMANDS).map(([name, cmd]) => ({
   description: cmd.description
 }));
 function getCompletions(partial, aliases = {}) {
-  if (partial.length === 0) return BUILTIN_COMMAND_LIST.map((c) => c.name);
+  if (partial.length === 0) return BUILTIN_COMMAND_LIST.map((c2) => c2.name);
   const tokenLower = partial.toLowerCase();
   const candidates = [
-    ...BUILTIN_COMMAND_LIST.map((c) => c.name),
+    ...BUILTIN_COMMAND_LIST.map((c2) => c2.name),
     ...Object.keys(aliases).filter((n) => !COMMANDS[n])
   ];
   return candidates.map((n) => ({ n, score: fuzzyScore(tokenLower, n.toLowerCase()) })).filter(({ score }) => score >= 0).sort((a, b) => b.score - a.score).map(({ n }) => n);
@@ -831,7 +831,7 @@ async function fetchErd(client, driver) {
     if (!tableMap.has(tableName)) tableMap.set(tableName, []);
     const cols = tableMap.get(tableName);
     const colName = String(row["column_name"] ?? "");
-    if (cols.some((c) => c.name === colName)) continue;
+    if (cols.some((c2) => c2.name === colName)) continue;
     cols.push({
       name: colName,
       type: String(row["data_type"] ?? ""),
@@ -1050,7 +1050,7 @@ async function fetchSchema(client, driver) {
 }
 
 // src/ui/components/QueryInput.tsx
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { Box, Text } from "ink";
 
 // src/ui/hooks/useVimInput.ts
@@ -1523,7 +1523,7 @@ function SqlLine({ text, bg }) {
   const tokens = tokenizeSql(text);
   return /* @__PURE__ */ jsx(Fragment, { children: tokens.map((tok, i) => /* @__PURE__ */ jsx(Text, { backgroundColor: bg, color: sqlTokenColor(tok.type), children: tok.text }, i)) });
 }
-function SqlHighlightedInput({ text, cursorAt, mode, pad: pad2 }) {
+function SqlHighlightedInput({ text, cursorAt, mode, pad }) {
   const tokens = tokenizeSql(text);
   const parts = [];
   let pos = 0;
@@ -1557,7 +1557,7 @@ function SqlHighlightedInput({ text, cursorAt, mode, pad: pad2 }) {
       parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: ACCENT, color: BG, bold: true, children: " " }, "c"));
     }
   }
-  parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: pad2 }, "pad"));
+  parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: pad }, "pad"));
   return /* @__PURE__ */ jsx(Fragment, { children: parts });
 }
 var HINTS = {
@@ -1586,7 +1586,7 @@ var HINTS = {
     ["/toggle-vim-mode", "ENABLE VIM"]
   ]
 };
-var BUILTIN_DESC_MAP = Object.fromEntries(BUILTIN_COMMAND_LIST.map((c) => [c.name, c.description]));
+var BUILTIN_DESC_MAP = Object.fromEntries(BUILTIN_COMMAND_LIST.map((c2) => [c2.name, c2.description]));
 function QueryInput({ onSubmit, isLoading, onModeChange, onShellModeChange, vimEnabled = true, history = [], aliases = {}, schema }) {
   function handleTab(current) {
     if (!current.startsWith("/")) return null;
@@ -1620,8 +1620,13 @@ function QueryInput({ onSubmit, isLoading, onModeChange, onShellModeChange, vimE
   const isShellMode = value.startsWith("!");
   const isCommand = !isShellMode && value.startsWith("/");
   const partial = isCommand ? value.slice(1) : "";
-  const suggestions = isCommand ? getCompletions(partial, aliases) : !isShellMode && schema ? getSqlCompletions(value, cursorPos, schema) : [];
+  const liveSuggestions = isCommand ? getCompletions(partial, aliases) : !isShellMode && schema ? getSqlCompletions(value, cursorPos, schema) : [];
   const sqlToken = isCommand ? "" : getCurrentToken(value, cursorPos);
+  const [suggestions, setSuggestions] = useState2([]);
+  useEffect2(() => {
+    const t = setTimeout(() => setSuggestions(liveSuggestions), 150);
+    return () => clearTimeout(t);
+  }, [value, cursorPos]);
   const descMap = {
     ...BUILTIN_DESC_MAP,
     ...Object.fromEntries(
@@ -1644,7 +1649,7 @@ function QueryInput({ onSubmit, isLoading, onModeChange, onShellModeChange, vimE
   const isMultiLine = !isEmpty && !isShellMode && !isCommand && value.includes("\n");
   const dOff = isShellMode ? 2 : 0;
   const placeholder = "Type a SQL query\u2026";
-  const previewResult = !isMultiLine && suggestionIndex >= 0 && suggestions.length > 0 ? handleSuggestionAccept(value, cursorPos, suggestions[suggestionIndex]) : null;
+  const previewResult = !isMultiLine && suggestionIndex >= 0 && liveSuggestions.length > 0 ? handleSuggestionAccept(value, cursorPos, liveSuggestions[suggestionIndex]) : null;
   const renderValue = previewResult?.value ?? value;
   const renderCursor = previewResult?.cursor ?? cursorPos;
   const lineWidth = innerWidth - 4;
@@ -1667,6 +1672,17 @@ function QueryInput({ onSubmit, isLoading, onModeChange, onShellModeChange, vimE
     0
   );
   const hintsInline = totalHintsWidth <= termWidth;
+  const STRIP_VISIBLE = 4;
+  const stripPrefixW = isCommand ? 1 : 0;
+  const stripAvailW = termWidth - 2 - 3 - (STRIP_VISIBLE - 1) * 3 - STRIP_VISIBLE * stripPrefixW;
+  const stripMaxPerItem = Math.max(6, Math.floor(stripAvailW / STRIP_VISIBLE));
+  const hasSuggestions = !isEmpty && !isShellMode && !isMultiLine && suggestions.length > 0;
+  const stripWinStart = hasSuggestions ? Math.min(Math.max(0, suggestionIndex - 1), Math.max(0, suggestions.length - STRIP_VISIBLE)) : 0;
+  const stripWindow = hasSuggestions ? suggestions.slice(stripWinStart, stripWinStart + STRIP_VISIBLE) : [];
+  const stripNavHint = hasSuggestions ? `Tab/\u2191\u2193 navigate  Enter select  ${suggestionIndex + 1}/${suggestions.length}` : " ";
+  function truncateSugg(s) {
+    return s.length > stripMaxPerItem ? s.slice(0, stripMaxPerItem - 1) + "\u2026" : s;
+  }
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
     isMultiLine ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: emptyLine }),
@@ -1707,131 +1723,35 @@ function QueryInput({ onSubmit, isLoading, onModeChange, onShellModeChange, vimE
       ] }),
       /* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: emptyLine })
     ] }),
-    (() => {
-      const hasSuggestions = !isEmpty && !isShellMode && !isMultiLine && suggestions.length > 0;
-      const VISIBLE = 4;
-      const SEP_W = 3;
-      const ELLIPSIS_W = 3;
-      const prefixW = isCommand ? 1 : 0;
-      const availW = termWidth - 2 - ELLIPSIS_W - (VISIBLE - 1) * SEP_W - VISIBLE * prefixW;
-      const maxPerItem = Math.max(6, Math.floor(availW / VISIBLE));
-      const winStart = hasSuggestions ? Math.min(Math.max(0, suggestionIndex - 1), Math.max(0, suggestions.length - VISIBLE)) : 0;
-      const windowSlice = hasSuggestions ? suggestions.slice(winStart, winStart + VISIBLE) : [];
-      function truncate(s) {
-        return s.length > maxPerItem ? s.slice(0, maxPerItem - 1) + "\u2026" : s;
-      }
-      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: hasSuggestions ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          windowSlice.map((name, i) => {
-            const realIdx = winStart + i;
-            const selected = realIdx === suggestionIndex;
-            const displayName = truncate(name);
-            return /* @__PURE__ */ jsxs(Text, { children: [
-              i > 0 && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "   " }),
-              isCommand && /* @__PURE__ */ jsx(Text, { dimColor: !selected, color: selected ? ACCENT : void 0, children: "/" }),
-              /* @__PURE__ */ jsx(FuzzyHighlight, { text: displayName, token: isCommand ? partial : sqlToken, selected })
-            ] }, name);
-          }),
-          suggestions.length > VISIBLE && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \u2026" })
-        ] }) : /* @__PURE__ */ jsx(Box, { flexDirection: hintsInline ? "row" : "column", children: allHints.map(([key, desc], i) => /* @__PURE__ */ jsxs(Text, { children: [
-          hintsInline && i > 0 && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  |  " }),
-          /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: desc }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: `: ${key}` })
-        ] }, desc)) }) }),
-        /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: hasSuggestions ? /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-          "Tab/\u2191\u2193 navigate  Enter select  ",
-          suggestionIndex + 1,
-          "/",
-          suggestions.length
-        ] }) : /* @__PURE__ */ jsx(Text, { children: " " }) })
-      ] });
-    })()
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: hasSuggestions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        stripWindow.map((name, i) => {
+          const realIdx = stripWinStart + i;
+          const selected = realIdx === suggestionIndex;
+          return /* @__PURE__ */ jsxs(Text, { children: [
+            i > 0 && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "   " }),
+            isCommand && /* @__PURE__ */ jsx(Text, { dimColor: !selected, color: selected ? ACCENT : void 0, children: "/" }),
+            /* @__PURE__ */ jsx(FuzzyHighlight, { text: truncateSugg(name), token: isCommand ? partial : sqlToken, selected })
+          ] }, name);
+        }),
+        suggestions.length > STRIP_VISIBLE && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  \u2026" })
+      ] }) : /* @__PURE__ */ jsx(Box, { flexDirection: hintsInline ? "row" : "column", children: allHints.map(([key, desc], i) => /* @__PURE__ */ jsxs(Text, { children: [
+        hintsInline && i > 0 && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "  |  " }),
+        /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: desc }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: `: ${key}` })
+      ] }, desc)) }) }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: stripNavHint })
+    ] })
   ] });
 }
 
 // src/ui/components/QueryResult.tsx
-import { useState as useState2, useEffect as useEffect3 } from "react";
+import { useState as useState3, useEffect as useEffect3 } from "react";
 import { Box as Box3, Text as Text3 } from "ink";
 
 // src/ui/components/Table.tsx
 import { Box as Box2, Text as Text2 } from "ink";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var COL_PAD = 1;
-var INDIGO = "#818cf8";
-var BORDER = "white";
-var NULL_COLOR = "#6366f1";
-var NULL_MARKER = "\u2205";
-function isNull(val) {
-  return val === null || val === void 0;
-}
-function cellValue(val) {
-  if (isNull(val)) return NULL_MARKER;
-  if (val instanceof Date) return val.toISOString();
-  if (typeof val === "object") return JSON.stringify(val);
-  return String(val);
-}
-function colWidths(columns, rows) {
-  return columns.map((col) => {
-    const dataMax = rows.reduce(
-      (max, row) => Math.max(max, cellValue(row[col]).length),
-      0
-    );
-    return Math.max(col.length, dataMax);
-  });
-}
-function pad(str, width) {
-  return str.slice(0, width).padEnd(width);
-}
-function hline(widths, left, mid, right) {
-  const segments = widths.map((w) => "\u2500".repeat(w + COL_PAD * 2));
-  return left + segments.join(mid) + right;
-}
-function ExpandedTable({ columns, rows }) {
-  const keyWidth = columns.reduce((max, col) => Math.max(max, col.length), 0);
-  return /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: rows.map((row, i) => /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginBottom: i < rows.length - 1 ? 1 : 0, children: [
-    /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: `\u2500[ Record ${i + 1} ]${"\u2500".repeat(Math.max(0, keyWidth + 14 - String(i + 1).length))}` }),
-    columns.map((col) => /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsx2(Text2, { color: INDIGO, bold: true, children: col.padEnd(keyWidth) }),
-      /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: " \u2502 " }),
-      isNull(row[col]) ? /* @__PURE__ */ jsx2(Text2, { color: NULL_COLOR, dimColor: true, children: NULL_MARKER }) : /* @__PURE__ */ jsx2(Text2, { children: cellValue(row[col]) })
-    ] }, col))
-  ] }, i)) });
-}
-function Table({ columns, rows, expanded = false }) {
-  if (expanded) return /* @__PURE__ */ jsx2(ExpandedTable, { columns, rows });
-  const widths = colWidths(columns, rows);
-  const topLine = hline(widths, "\u256D", "\u252C", "\u256E");
-  const midLine = hline(widths, "\u251C", "\u253C", "\u2524");
-  const botLine = hline(widths, "\u2570", "\u2534", "\u256F");
-  function renderHeaderRow(cols) {
-    return /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: "\u2502" }),
-      cols.map((v, i) => /* @__PURE__ */ jsxs2(Box2, { children: [
-        /* @__PURE__ */ jsx2(Text2, { color: INDIGO, bold: true, children: " ".repeat(COL_PAD) + pad(v, widths[i]) + " ".repeat(COL_PAD) }),
-        /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: "\u2502" })
-      ] }, i))
-    ] });
-  }
-  function renderDataRow(row) {
-    return /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: "\u2502" }),
-      columns.map((col, i) => /* @__PURE__ */ jsxs2(Box2, { children: [
-        isNull(row[col]) ? /* @__PURE__ */ jsx2(Text2, { color: NULL_COLOR, dimColor: true, children: " ".repeat(COL_PAD) + pad(NULL_MARKER, widths[i]) + " ".repeat(COL_PAD) }) : /* @__PURE__ */ jsx2(Text2, { children: " ".repeat(COL_PAD) + pad(cellValue(row[col]), widths[i]) + " ".repeat(COL_PAD) }),
-        /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: "\u2502" })
-      ] }, i))
-    ] });
-  }
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: topLine }),
-    renderHeaderRow(columns),
-    /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: midLine }),
-    rows.map((row, i) => /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
-      renderDataRow(row),
-      i < rows.length - 1 && /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: midLine })
-    ] }, i)),
-    /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: botLine })
-  ] });
-}
 
 // src/ui/components/QueryResult.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1843,90 +1763,11 @@ function ErrorBox({ message }) {
     line
   ] }, i)) });
 }
-function formatDuration(ms) {
-  if (ms < 1e3) return `${ms}ms`;
-  return `${(ms / 1e3).toFixed(2)}s`;
-}
-function useTerminalWidth() {
-  const [width, setWidth] = useState2(process.stdout.columns ?? 80);
-  useEffect3(() => {
-    const handler = () => setWidth(process.stdout.columns ?? 80);
-    process.stdout.on("resize", handler);
-    return () => {
-      process.stdout.off("resize", handler);
-    };
-  }, []);
-  return width;
-}
-function QueryResult({ state, elapsed, page, pageSize }) {
-  const termWidth = useTerminalWidth();
-  if (state.status === "idle" || state.status === "running") return null;
-  const timing = elapsed !== null ? ` \xB7 ${formatDuration(elapsed)}` : "";
-  if (state.status === "error") {
-    return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx3(ErrorBox, { message: state.message }),
-      elapsed !== null && /* @__PURE__ */ jsx3(Text3, { color: theme.accent, dimColor: true, children: formatDuration(elapsed) })
-    ] });
-  }
-  const { result } = state;
-  const columns = result.fields;
-  if (result.rows.length === 0) {
-    return /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsxs3(Text3, { color: theme.accent, children: [
-      "No rows returned (",
-      result.rowCount ?? 0,
-      " affected)",
-      timing
-    ] }) });
-  }
-  const totalRows = result.rows.length;
-  const totalPages = Math.ceil(totalRows / pageSize);
-  const currentPage = Math.min(page, totalPages - 1);
-  const start = currentPage * pageSize;
-  const displayRows = result.rows.slice(start, start + pageSize);
-  const isPaged = totalRows > pageSize;
-  const widths = colWidths(columns, displayRows);
-  const tableWidth = 1 + widths.reduce((sum, w) => sum + w + 3, 0);
-  const expanded = tableWidth > termWidth;
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx3(Table, { columns, rows: displayRows, expanded }),
-    /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
-      isPaged && /* @__PURE__ */ jsxs3(Text3, { color: theme.warning, children: [
-        "Page ",
-        currentPage + 1,
-        " of ",
-        totalPages,
-        " \xB7 showing rows ",
-        start + 1,
-        "\u2013",
-        start + displayRows.length,
-        " of ",
-        totalRows,
-        currentPage > 0 ? "  /prev" : "",
-        currentPage < totalPages - 1 ? "  /next" : ""
-      ] }),
-      /* @__PURE__ */ jsxs3(Text3, { color: theme.accent, children: [
-        displayRows.length,
-        " row",
-        displayRows.length !== 1 ? "s" : "",
-        timing,
-        expanded ? "  [expanded]" : ""
-      ] })
-    ] })
-  ] });
-}
 
 // src/ui/components/Banner.tsx
 import { Box as Box4, Text as Text4 } from "ink";
-import { readFileSync as readFileSync5 } from "fs";
-import { fileURLToPath } from "url";
-import { dirname, join as join5 } from "path";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var __dirname = dirname(fileURLToPath(import.meta.url));
-var pkg = { version: "unknown" };
-try {
-  pkg = JSON.parse(readFileSync5(join5(__dirname, "../../../package.json"), "utf8"));
-} catch {
-}
+var version = true ? "0.4.9" : process.env.npm_package_version ?? "unknown";
 var LOGO = [
   " \u2597\u2584\u2584\u2584\u2584\u2584\u2596",
   "\u2590\u2591 \u25CF \u25CF \u2591\u258C",
@@ -1950,7 +1791,7 @@ function Banner({ connectionState }) {
         "Querky ",
         /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
           "v",
-          pkg.version
+          version
         ] })
       ] }),
       /* @__PURE__ */ jsx4(Text4, { children: " " }),
@@ -1975,56 +1816,40 @@ function Banner({ connectionState }) {
   ] });
 }
 
-// src/ui/components/HelpView.tsx
-import { Box as Box5, Text as Text5 } from "ink";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var USAGE_WIDTH = 28;
-function HelpView({ data }) {
-  if (data.mode === "detail" && data.entry) {
-    const { usage, description, psqlAlias, detail, example, examples } = data.entry;
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
-      /* @__PURE__ */ jsxs5(Text5, { bold: true, color: "white", children: [
-        usage,
-        psqlAlias ? `  ${psqlAlias}` : ""
-      ] }),
-      /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { children: description }) }),
-      detail && /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: detail }) }),
-      examples && examples.length > 0 ? /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "Examples:" }),
-        examples.map((ex, i) => /* @__PURE__ */ jsx5(Box5, { marginLeft: 2, children: /* @__PURE__ */ jsx5(Text5, { color: theme.accent, children: ex }) }, i))
-      ] }) : example ? /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, children: [
-        /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "Example: " }),
-        /* @__PURE__ */ jsx5(Text5, { color: theme.accent, children: example })
-      ] }) : null
-    ] });
-  }
-  if (data.mode === "list" && data.groups) {
-    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
-      data.groups.map((group, gi) => /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginBottom: gi < data.groups.length - 1 ? 1 : 0, children: [
-        /* @__PURE__ */ jsx5(Text5, { bold: true, color: theme.accent, children: group.category }),
-        group.entries.map((entry) => /* @__PURE__ */ jsxs5(Box5, { marginLeft: 2, children: [
-          /* @__PURE__ */ jsx5(Text5, { color: "white", children: entry.usage.padEnd(USAGE_WIDTH) }),
-          /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: entry.description }),
-          entry.psqlAlias && /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
-            "  ",
-            entry.psqlAlias
-          ] })
-        ] }, entry.name))
-      ] }, group.category)),
-      /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
-        "/help ",
-        "<command>",
-        " for more details."
-      ] }) })
-    ] });
-  }
-  return null;
-}
-
-// src/ui/components/ErdView.tsx
-import { Box as Box6, Text as Text6 } from "ink";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var TABLE_COLORS = [
+// src/ui/format.ts
+var R = "\x1B[0m";
+var BOLD = "\x1B[1m";
+var DIM = "\x1B[2m";
+function fg(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `\x1B[38;2;${r};${g};${b}m`;
+}
+function c(hex, s) {
+  return fg(hex) + s + R;
+}
+function bold(s) {
+  return BOLD + s + R;
+}
+function dim(s) {
+  return DIM + s + R;
+}
+function cbold(hex, s) {
+  return fg(hex) + BOLD + s + R;
+}
+function cdim(hex, s) {
+  return fg(hex) + DIM + s + R;
+}
+var ACCENT2 = "#818cf8";
+var HEADER_COL = "#9ca3af";
+var NULL_COL = "#6366f1";
+var INDIGO = "#818cf8";
+var AI_COL = "#a5b4fc";
+var ERROR_COL = "#ff4444";
+var WARN_COL = "#f59e0b";
+var ERD_BORDER = "#4b5563";
+var ERD_PALETTE = [
   "#f472b6",
   "#34d399",
   "#fb923c",
@@ -2034,30 +1859,179 @@ var TABLE_COLORS = [
   "#fbbf24",
   "#2dd4bf"
 ];
-var BORDER2 = "#4b5563";
-var PAD = 1;
-var GAP = 2;
-var FK_PREFIX = "FK \u2192 ";
-function computeMetrics(table) {
-  const nameW = Math.max(2, ...table.columns.map((c) => c.name.length));
-  const typeW = Math.max(4, ...table.columns.map((c) => c.type.length));
-  const keyW = Math.max(
-    2,
-    ...table.columns.map((c) => {
-      if (c.isPk) return 2;
-      if (c.fkTable) return FK_PREFIX.length + c.fkTable.length;
-      return 0;
-    })
-  );
-  const totalW = 4 + 3 * PAD * 2 + nameW + typeW + keyW;
-  return { nameW, typeW, keyW, totalW };
+var NULL_MARKER = "\u2205";
+var COL_PAD = 1;
+var SP = " ".repeat(COL_PAD);
+function fmtHeader(label, query) {
+  const dot = cbold(ACCENT2, "\u25CF ");
+  if (query.includes("\n")) {
+    const lines = query.split("\n").map((l) => cbold(HEADER_COL, "  " + l));
+    return dot + cbold(HEADER_COL, label + ":") + "\n" + lines.join("\n");
+  }
+  return dot + cbold(HEADER_COL, `${label}(${query})`);
+}
+function fmtError(message) {
+  return message.split("\n").map(
+    (line, i) => cbold(ERROR_COL, (i === 0 ? "\u2717  " : "   ") + line)
+  ).join("\n");
+}
+function fmtOk(text) {
+  return c(ACCENT2, "\u2713 ") + text;
+}
+function isNull(v) {
+  return v === null || v === void 0;
+}
+function cellStr(v) {
+  if (isNull(v)) return NULL_MARKER;
+  if (v instanceof Date) return v.toISOString();
+  if (typeof v === "object") return JSON.stringify(v);
+  return String(v);
+}
+function colWidths2(columns, rows) {
+  return columns.map((col) => {
+    const dataMax = rows.reduce((mx, row) => Math.max(mx, cellStr(row[col]).length), 0);
+    return Math.max(col.length, dataMax);
+  });
+}
+function hline(widths, l, m, r) {
+  return l + widths.map((w) => "\u2500".repeat(w + COL_PAD * 2)).join(m) + r;
+}
+function fmtTable(columns, rows) {
+  const widths = colWidths2(columns, rows);
+  const top = hline(widths, "\u256D", "\u252C", "\u256E");
+  const mid = hline(widths, "\u251C", "\u253C", "\u2524");
+  const bot = hline(widths, "\u2570", "\u2534", "\u256F");
+  function headerRow() {
+    const cells = columns.map(
+      (col, i) => cbold(INDIGO, SP + col.slice(0, widths[i]).padEnd(widths[i]) + SP)
+    );
+    return "\u2502" + cells.join("\u2502") + "\u2502";
+  }
+  function dataRow(row) {
+    const cells = columns.map((col, i) => {
+      const v = cellStr(row[col]);
+      const cell = SP + v.slice(0, widths[i]).padEnd(widths[i]) + SP;
+      return isNull(row[col]) ? cdim(NULL_COL, cell) : cell;
+    });
+    return "\u2502" + cells.join("\u2502") + "\u2502";
+  }
+  const out = [top, headerRow(), mid];
+  rows.forEach((row, i) => {
+    out.push(dataRow(row));
+    if (i < rows.length - 1) out.push(mid);
+  });
+  out.push(bot);
+  return out.join("\n");
+}
+function fmtExpanded(columns, rows) {
+  const kw = columns.reduce((mx, c2) => Math.max(mx, c2.length), 0);
+  const separator = (i) => "\u2500[ Record " + (i + 1) + " ]" + "\u2500".repeat(Math.max(0, kw + 14 - String(i + 1).length));
+  const out = [];
+  rows.forEach((row, i) => {
+    if (i > 0) out.push("");
+    out.push(dim(separator(i)));
+    for (const col of columns) {
+      const val = isNull(row[col]) ? cdim(NULL_COL, NULL_MARKER) : cellStr(row[col]);
+      out.push(cbold(INDIGO, col.padEnd(kw)) + dim(" \u2502 ") + val);
+    }
+  });
+  return out.join("\n");
+}
+function fmtDuration(ms) {
+  return ms < 1e3 ? `${ms}ms` : `${(ms / 1e3).toFixed(2)}s`;
+}
+function fmtQueryResult(state, elapsed, page, pageSize) {
+  if (state.status === "idle" || state.status === "running") return "";
+  const timing = elapsed !== null ? ` \xB7 ${fmtDuration(elapsed)}` : "";
+  if (state.status === "error") {
+    const t = elapsed !== null ? "\n" + cdim(ACCENT2, fmtDuration(elapsed)) : "";
+    return fmtError(state.message) + t;
+  }
+  const { result } = state;
+  const { fields, rows } = result;
+  if (rows.length === 0) {
+    return c(ACCENT2, `No rows returned (${result.rowCount ?? 0} affected)${timing}`);
+  }
+  const totalRows = rows.length;
+  const totalPages = Math.ceil(totalRows / pageSize);
+  const currentPage = Math.min(page, totalPages - 1);
+  const start = currentPage * pageSize;
+  const displayRows = rows.slice(start, start + pageSize);
+  const isPaged = totalRows > pageSize;
+  const termWidth = process.stdout.columns ?? 80;
+  const widths = colWidths2(fields, displayRows);
+  const tableWidth = 1 + widths.reduce((sum, w) => sum + w + 3, 0);
+  const expanded = tableWidth > termWidth;
+  const table = expanded ? fmtExpanded(fields, displayRows) : fmtTable(fields, displayRows);
+  const lines = [table];
+  if (isPaged) {
+    const nav = (currentPage > 0 ? "  /prev" : "") + (currentPage < totalPages - 1 ? "  /next" : "");
+    lines.push(c(WARN_COL, `Page ${currentPage + 1} of ${totalPages} \xB7 rows ${start + 1}\u2013${start + displayRows.length} of ${totalRows}${nav}`));
+  }
+  lines.push(c(ACCENT2, `${displayRows.length} row${displayRows.length !== 1 ? "s" : ""}${timing}${expanded ? "  [expanded]" : ""}`));
+  return lines.join("\n");
 }
-function groupIntoRows(metrics, termW) {
+var USAGE_WIDTH = 28;
+function fmtHelp(data) {
+  if (data.mode === "detail" && data.entry) {
+    const { usage, description, psqlAlias, detail, example, examples } = data.entry;
+    const lines = [];
+    lines.push(bold(usage) + (psqlAlias ? "  " + dim(psqlAlias) : ""));
+    lines.push("");
+    lines.push(description);
+    if (detail) {
+      lines.push("");
+      lines.push(dim(detail));
+    }
+    if (examples && examples.length > 0) {
+      lines.push("");
+      lines.push(dim("Examples:"));
+      for (const ex of examples) lines.push("  " + c(ACCENT2, ex));
+    } else if (example) {
+      lines.push("");
+      lines.push(dim("Example: ") + c(ACCENT2, example));
+    }
+    return lines.join("\n");
+  }
+  if (data.mode === "list" && data.groups) {
+    const lines = [];
+    data.groups.forEach((group, gi) => {
+      if (gi > 0) lines.push("");
+      lines.push(cbold(ACCENT2, group.category));
+      for (const entry of group.entries) {
+        const alias = entry.psqlAlias ? dim("  " + entry.psqlAlias) : "";
+        lines.push("  " + entry.usage.padEnd(USAGE_WIDTH) + dim(entry.description) + alias);
+      }
+    });
+    lines.push("");
+    lines.push(dim("/help <command> for more details."));
+    return lines.join("\n");
+  }
+  return "";
+}
+function fmtErd(data) {
+  if (data.tables.length === 0) return dim("No tables found in the current schema.");
+  const termW = process.stdout.columns ?? 80;
+  const FK_PREFIX = "FK \u2192 ";
+  const PAD = 1;
+  const GAP = 2;
+  const colorMap = new Map(
+    data.tables.map((t, i) => [t.name, ERD_PALETTE[i % ERD_PALETTE.length]])
+  );
+  function metrics(t) {
+    const nameW = Math.max(2, ...t.columns.map((c2) => c2.name.length));
+    const typeW = Math.max(4, ...t.columns.map((c2) => c2.type.length));
+    const keyW = Math.max(2, ...t.columns.map(
+      (c2) => c2.isPk ? 2 : c2.fkTable ? FK_PREFIX.length + c2.fkTable.length : 0
+    ));
+    const totalW = 4 + 3 * PAD * 2 + nameW + typeW + keyW;
+    return { nameW, typeW, keyW, totalW };
+  }
+  const allMetrics = data.tables.map(metrics);
   const rows = [];
-  let row = [];
-  let usedW = 0;
-  for (let i = 0; i < metrics.length; i++) {
-    const w = metrics[i].totalW;
+  let row = [], usedW = 0;
+  for (let i = 0; i < allMetrics.length; i++) {
+    const w = allMetrics[i].totalW;
     if (row.length === 0) {
       row.push(i);
       usedW = w;
@@ -2071,120 +2045,113 @@ function groupIntoRows(metrics, termW) {
     }
   }
   if (row.length > 0) rows.push(row);
-  return rows;
-}
-function TableBox({ table, m, color, colorMap }) {
-  const { nameW, typeW, keyW, totalW } = m;
-  const sp = " ".repeat(PAD);
-  const p = (s, w) => s.slice(0, w).padEnd(w);
-  const top = "\u256D" + "\u2500".repeat(totalW - 2) + "\u256E";
-  const sep = "\u251C" + "\u2500".repeat(nameW + PAD * 2) + "\u252C" + "\u2500".repeat(typeW + PAD * 2) + "\u252C" + "\u2500".repeat(keyW + PAD * 2) + "\u2524";
-  const bot = "\u2570" + "\u2500".repeat(nameW + PAD * 2) + "\u2534" + "\u2500".repeat(typeW + PAD * 2) + "\u2534" + "\u2500".repeat(keyW + PAD * 2) + "\u256F";
-  const headerW = totalW - 4;
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: top }),
-    /* @__PURE__ */ jsxs6(Box6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" }),
-      /* @__PURE__ */ jsxs6(Text6, { color, bold: true, children: [
-        sp,
-        p(table.name, headerW),
-        sp
-      ] }),
-      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" })
-    ] }),
-    /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: sep }),
-    table.columns.map((col, i) => /* @__PURE__ */ jsxs6(Box6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" }),
-      /* @__PURE__ */ jsxs6(Text6, { children: [
-        sp,
-        p(col.name, nameW),
-        sp
-      ] }),
-      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" }),
-      /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-        sp,
-        p(col.type, typeW),
-        sp
-      ] }),
-      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" }),
-      col.isPk ? /* @__PURE__ */ jsxs6(Text6, { bold: true, children: [
-        sp,
-        p("PK", keyW),
-        sp
-      ] }) : col.fkTable ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
-        /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
-          sp,
-          FK_PREFIX
-        ] }),
-        /* @__PURE__ */ jsxs6(Text6, { color: colorMap.get(col.fkTable) ?? color, children: [
-          p(col.fkTable, keyW - FK_PREFIX.length),
-          sp
-        ] })
-      ] }) : /* @__PURE__ */ jsxs6(Text6, { children: [
-        sp,
-        " ".repeat(keyW),
-        sp
-      ] }),
-      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" })
-    ] }, i)),
-    /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: bot })
-  ] });
+  function renderTable(t, m, color) {
+    const { nameW, typeW, keyW, totalW } = m;
+    const sp = " ".repeat(PAD);
+    const p = (s, w) => s.slice(0, w).padEnd(w);
+    const bdr = (s) => c(ERD_BORDER, s);
+    const tc = (s) => cbold(color, s);
+    const top = bdr("\u256D" + "\u2500".repeat(totalW - 2) + "\u256E");
+    const headerW = totalW - 4;
+    const headerLine = bdr("\u2502") + tc(sp + p(t.name, headerW) + sp) + bdr("\u2502");
+    const sep = bdr("\u251C" + "\u2500".repeat(nameW + PAD * 2) + "\u252C" + "\u2500".repeat(typeW + PAD * 2) + "\u252C" + "\u2500".repeat(keyW + PAD * 2) + "\u2524");
+    const bot = bdr("\u2570" + "\u2500".repeat(nameW + PAD * 2) + "\u2534" + "\u2500".repeat(typeW + PAD * 2) + "\u2534" + "\u2500".repeat(keyW + PAD * 2) + "\u256F");
+    const out = [top, headerLine, sep];
+    for (const col of t.columns) {
+      let keyPart;
+      if (col.isPk) {
+        keyPart = sp + bold(p("PK", keyW)) + sp;
+      } else if (col.fkTable) {
+        const fkColor = colorMap.get(col.fkTable) ?? color;
+        keyPart = sp + dim(FK_PREFIX) + c(fkColor, p(col.fkTable, keyW - FK_PREFIX.length)) + sp;
+      } else {
+        keyPart = sp + " ".repeat(keyW) + sp;
+      }
+      out.push(
+        bdr("\u2502") + sp + p(col.name, nameW) + sp + bdr("\u2502") + dim(sp + p(col.type, typeW) + sp) + bdr("\u2502") + keyPart + bdr("\u2502")
+      );
+    }
+    out.push(bot);
+    return out;
+  }
+  const output = [];
+  for (const tableRow of rows) {
+    const blocks = tableRow.map((ti) => {
+      const t = data.tables[ti];
+      return renderTable(t, allMetrics[ti], colorMap.get(t.name) ?? ERD_PALETTE[0]);
+    });
+    const height = Math.max(...blocks.map((b) => b.length));
+    for (let line = 0; line < height; line++) {
+      const parts = blocks.map((b, j) => {
+        const l = b[line] ?? " ".repeat(allMetrics[tableRow[j]].totalW);
+        return j < blocks.length - 1 ? l + " ".repeat(GAP) : l;
+      });
+      output.push(parts.join(""));
+    }
+    output.push("");
+  }
+  return output.join("\n").trimEnd();
 }
-function ErdView({ data }) {
-  if (data.tables.length === 0) {
-    return /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "No tables found in the current schema." });
+function fmtAi(text, error) {
+  const lines = [cbold(ACCENT2, "Explanation:"), ""];
+  if (error) {
+    lines.push(fmtError(error));
+  } else {
+    lines.push(c(AI_COL, text));
   }
-  const termW = process.stdout.columns ?? 80;
-  const metrics = data.tables.map(computeMetrics);
-  const colorMap = new Map(
-    data.tables.map((t, i) => [t.name, TABLE_COLORS[i % TABLE_COLORS.length]])
-  );
-  const rows = groupIntoRows(metrics, termW);
-  return /* @__PURE__ */ jsx6(Box6, { flexDirection: "column", marginTop: 1, children: rows.map((row, ri) => /* @__PURE__ */ jsx6(Box6, { flexDirection: "row", marginBottom: ri < rows.length - 1 ? 1 : 0, children: row.map((ti, j) => /* @__PURE__ */ jsx6(Box6, { marginRight: j < row.length - 1 ? GAP : 0, children: /* @__PURE__ */ jsx6(
-    TableBox,
-    {
-      table: data.tables[ti],
-      m: metrics[ti],
-      color: colorMap.get(data.tables[ti].name) ?? BORDER2,
-      colorMap
+  return lines.join("\n");
+}
+function fmtEntry(entry) {
+  const isShell = entry.query.startsWith("!");
+  const isCommand = !isShell && (entry.query.startsWith("/") || entry.query.startsWith("\\"));
+  const label = isShell ? "Shell" : isCommand ? "Command" : "Query";
+  const lines = [" " + fmtHeader(label, entry.query), ""];
+  if (isShell) {
+    if (entry.shellOutput !== null) lines.push(" " + entry.shellOutput.replace(/\n/g, "\n "));
+  } else if (entry.commandMessage) {
+    if (entry.commandMessage.helpData) {
+      lines.push(fmtHelp(entry.commandMessage.helpData).replace(/\n/g, "\n "));
+    } else if (entry.commandMessage.ok) {
+      lines.push(" " + fmtOk(entry.commandMessage.text));
+    } else {
+      lines.push(" " + fmtError(entry.commandMessage.text));
     }
-  ) }, ti)) }, ri)) });
+  } else if (entry.erdData) {
+    lines.push(" " + fmtErd(entry.erdData).replace(/\n/g, "\n "));
+  } else if (entry.aiResponse || entry.aiError) {
+    lines.push(" " + fmtAi(entry.aiResponse, entry.aiError).replace(/\n/g, "\n "));
+  } else {
+    const result = fmtQueryResult(entry.queryState, entry.elapsed, entry.page, 50);
+    if (result) lines.push(" " + result.replace(/\n/g, "\n "));
+  }
+  lines.push("");
+  return lines.join("\n");
 }
 
 // src/ui/components/App.tsx
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var PAGE_SIZE = 50;
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var PLACEHOLDER2 = "#a5b4fc";
-function activePageSize() {
-  return Math.max(3, (process.stdout.rows ?? 24) - 21);
-}
-function limitLines(s, n) {
-  const lines = s.split("\n");
-  if (lines.length <= n) return s;
-  return lines.slice(0, n).join("\n") + `
-\u2026 +${lines.length - n} more lines (scroll up after next submit)`;
-}
 var QUERY_HEADER_COLOR = "#9ca3af";
 function QueryHeader({ label, query }) {
   const isMultiLine = query.includes("\n");
   if (isMultiLine) {
-    return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs7(Text7, { children: [
-        /* @__PURE__ */ jsx7(Text7, { color: theme.accent, bold: true, children: "\u25CF " }),
-        /* @__PURE__ */ jsxs7(Text7, { color: QUERY_HEADER_COLOR, bold: true, children: [
+    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs5(Text5, { children: [
+        /* @__PURE__ */ jsx5(Text5, { color: theme.accent, bold: true, children: "\u25CF " }),
+        /* @__PURE__ */ jsxs5(Text5, { color: QUERY_HEADER_COLOR, bold: true, children: [
           label,
           ":"
         ] })
       ] }),
-      query.split("\n").map((line, i) => /* @__PURE__ */ jsxs7(Text7, { color: QUERY_HEADER_COLOR, bold: true, children: [
+      query.split("\n").map((line, i) => /* @__PURE__ */ jsxs5(Text5, { color: QUERY_HEADER_COLOR, bold: true, children: [
         "  ",
         line
       ] }, i))
     ] });
   }
-  return /* @__PURE__ */ jsxs7(Text7, { children: [
-    /* @__PURE__ */ jsx7(Text7, { color: theme.accent, bold: true, children: "\u25CF " }),
-    /* @__PURE__ */ jsxs7(Text7, { color: QUERY_HEADER_COLOR, bold: true, children: [
+  return /* @__PURE__ */ jsxs5(Text5, { children: [
+    /* @__PURE__ */ jsx5(Text5, { color: theme.accent, bold: true, children: "\u25CF " }),
+    /* @__PURE__ */ jsxs5(Text5, { color: QUERY_HEADER_COLOR, bold: true, children: [
       label,
       "(",
       query,
@@ -2192,55 +2159,31 @@ function QueryHeader({ label, query }) {
     ] })
   ] });
 }
-var EntryView = memo(function EntryView2({ entry }) {
-  const showAi = entry.aiResponse !== "" || entry.aiError !== null;
-  const showErd = entry.erdData !== null;
-  const isShell = entry.query.startsWith("!");
-  const isCommand = !isShell && (entry.query.startsWith("/") || entry.query.startsWith("\\"));
-  const label = isShell ? "Shell" : isCommand ? "Command" : "Query";
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginBottom: 1, paddingX: 1, children: [
-    /* @__PURE__ */ jsx7(QueryHeader, { label, query: entry.query }),
-    /* @__PURE__ */ jsx7(Box7, { marginTop: 1, flexDirection: "column", children: isShell ? entry.shellOutput !== null && /* @__PURE__ */ jsx7(Text7, { children: entry.shellOutput || "(no output)" }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      entry.commandMessage && (entry.commandMessage.helpData ? /* @__PURE__ */ jsx7(HelpView, { data: entry.commandMessage.helpData }) : entry.commandMessage.ok ? /* @__PURE__ */ jsxs7(Text7, { color: theme.accent, children: [
-        "\u2713 ",
-        entry.commandMessage.text
-      ] }) : /* @__PURE__ */ jsx7(ErrorBox, { message: entry.commandMessage.text })),
-      showErd ? /* @__PURE__ */ jsx7(ErdView, { data: entry.erdData }) : showAi ? /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsx7(Text7, { color: theme.accent, bold: true, children: "Explanation:" }),
-        /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", marginTop: 1, children: entry.aiError ? /* @__PURE__ */ jsx7(ErrorBox, { message: entry.aiError }) : /* @__PURE__ */ jsx7(Text7, { color: PLACEHOLDER2, children: entry.aiResponse }) })
-      ] }) : !entry.commandMessage && /* @__PURE__ */ jsx7(QueryResult, { state: entry.queryState, elapsed: entry.elapsed, page: entry.page, pageSize: PAGE_SIZE })
-    ] }) })
-  ] });
-});
 function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2, onChangeDatabase }) {
   const { exit } = useApp();
   const { isRawModeSupported } = useStdin2();
-  const [queryState, setQueryState] = useState3({ status: "idle" });
-  const [lastQuery, setLastQuery] = useState3("");
-  const [lastSqlQuery, setLastSqlQuery] = useState3("");
-  const [lastResult, setLastResult] = useState3(null);
-  const [page, setPage] = useState3(0);
-  const [vimMode, setVimMode] = useState3("INSERT");
-  const [inputIsShell, setInputIsShell] = useState3(false);
-  const [elapsed, setElapsed] = useState3(null);
-  const [vimEnabled, setVimEnabled] = useState3(true);
-  const [commandMessage, setCommandMessage] = useState3(null);
-  const [history, setHistory] = useState3(() => loadHistory());
-  const [schema, setSchema] = useState3(null);
-  const [aiResponse, setAiResponse] = useState3("");
-  const [isStreaming, setIsStreaming] = useState3(false);
-  const [aiError, setAiError] = useState3(null);
-  const [shellOutput, setShellOutput] = useState3(null);
-  const [isShellRunning, setIsShellRunning] = useState3(false);
-  const [erdData, setErdData] = useState3(null);
-  const [isErdLoading, setIsErdLoading] = useState3(false);
-  const [completedEntries, setCompletedEntries] = useState3([]);
-  const [clearSeq, setClearSeq] = useState3(0);
+  const [active, setActive] = useState4({ type: "idle" });
+  const [hasHistory, setHasHistory] = useState4(false);
+  const [completedEntries, setCompletedEntries] = useState4([]);
   const entryIdRef = useRef2(0);
+  const [lastSqlQuery, setLastSqlQuery] = useState4("");
+  const [lastResult, setLastResult] = useState4(null);
+  const [lastResultPage, setLastResultPage] = useState4(0);
+  const [vimMode, setVimMode] = useState4("INSERT");
+  const [inputIsShell, setInputIsShell] = useState4(false);
+  const [vimEnabled, setVimEnabled] = useState4(true);
+  const [history, setHistory] = useState4(() => loadHistory());
+  const [schema, setSchema] = useState4(null);
   const aliasScope = connectionState.status === "connected" ? makeScope(connectionState.driver, connectionState.user, connectionState.host, connectionState.database) : "";
-  const [aliases, setAliases] = useState3(
+  const [aliases, setAliases] = useState4(
     () => aliasScope ? getAllAliases(aliasScope) : {}
   );
+  function writeEntry(entry) {
+    const formatted = fmtEntry(entry);
+    const id = String(++entryIdRef.current);
+    setCompletedEntries((prev) => [...prev, { id, formatted }]);
+    setHasHistory(true);
+  }
   function handleSaveAlias(name, query) {
     saveAlias(aliasScope, name, query);
     setAliases(getAllAliases(aliasScope));
@@ -2266,10 +2209,6 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
       process.off("SIGCONT", handleCont);
     };
   }, [isRawModeSupported]);
-  useEffect4(() => {
-    if (clearSeq === 0) return;
-    process.stdout.write("\x1B[3J");
-  }, [clearSeq]);
   useEffect4(() => {
     if (!isRawModeSupported) return;
     process.stdout.write("\x1B[?25l");
@@ -2288,69 +2227,59 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
     },
     { isActive: isRawModeSupported }
   );
-  async function handleExplain(query) {
-    setAiResponse("");
-    setAiError(null);
-    setIsStreaming(true);
-    setCommandMessage(null);
-    setQueryState({ status: "idle" });
-    try {
-      for await (const chunk of streamExplain(query, aiUrl2, aiModel2, aiKey2 || void 0)) {
-        setAiResponse((prev) => prev + chunk);
-      }
-    } catch (err) {
-      setAiError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setIsStreaming(false);
+  async function handleQuery(sql) {
+    if (connectionState.status !== "connected") return;
+    setLastSqlQuery(sql);
+    setActive({ type: "loading", label: "Query", query: sql });
+    const updated = addToHistory(history, sql);
+    setHistory(updated);
+    saveHistory(updated);
+    const start = Date.now();
+    const result = await runQuery(connectionState.client, sql);
+    const elapsed = Date.now() - start;
+    if (result.status === "success") {
+      setLastResult(result.result);
+      setLastResultPage(0);
     }
+    writeEntry({ query: sql, commandMessage: null, queryState: result, elapsed, page: 0, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
+    setActive({ type: "idle" });
   }
   async function handleErd() {
     if (connectionState.status !== "connected") {
-      setCommandMessage({ ok: false, text: "Not connected to a database." });
+      writeEntry({ query: "/erd", commandMessage: { ok: false, text: "Not connected." }, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
       return;
     }
-    setErdData(null);
-    setIsErdLoading(true);
-    setCommandMessage(null);
-    setQueryState({ status: "idle" });
-    setAiResponse("");
-    setAiError(null);
+    setActive({ type: "loading", label: "Command", query: "/erd" });
     try {
       const data = await fetchErd(connectionState.client, connectionState.driver);
-      setErdData(data);
+      writeEntry({ query: "/erd", commandMessage: null, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: "", aiError: null, shellOutput: null, erdData: data });
     } catch (err) {
-      setCommandMessage({ ok: false, text: err instanceof Error ? err.message : String(err) });
-    } finally {
-      setIsErdLoading(false);
+      writeEntry({ query: "/erd", commandMessage: { ok: false, text: err instanceof Error ? err.message : String(err) }, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
     }
+    setActive({ type: "idle" });
   }
-  async function handleQuery(sql) {
-    if (connectionState.status !== "connected") return;
-    setErdData(null);
-    setAiResponse("");
-    setAiError(null);
-    setCommandMessage(null);
-    setLastQuery(sql);
-    setLastSqlQuery(sql);
-    setElapsed(null);
-    setPage(0);
-    setQueryState({ status: "running" });
-    const updated = addToHistory(history, sql);
-    setHistory(updated);
-    saveHistory(updated);
-    const start = Date.now();
-    const result = await runQuery(connectionState.client, sql);
-    setElapsed(Date.now() - start);
-    setQueryState(result);
-    if (result.status === "success") setLastResult(result.result);
+  async function handleExplain(query) {
+    setActive({ type: "streaming", query, text: "", error: null });
+    let fullText = "";
+    let error = null;
+    try {
+      for await (const chunk of streamExplain(query, aiUrl2, aiModel2, aiKey2 || void 0)) {
+        fullText += chunk;
+        setActive({ type: "streaming", query, text: fullText, error: null });
+      }
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+    writeEntry({ query: "/explain", commandMessage: null, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: fullText, aiError: error, shellOutput: null, erdData: null });
+    setActive({ type: "idle" });
   }
   function handleExport(format) {
     if (!lastResult || lastResult.rows.length === 0) {
-      setCommandMessage({ ok: false, text: "No results to export \u2014 run a query first." });
+      writeEntry({ query: `/export ${format}`, commandMessage: { ok: false, text: "No results to export \u2014 run a query first." }, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
       return;
     }
     const ts = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
-    const filename = join6(homedir4(), `q-export-${ts}.${format}`);
+    const filename = join5(homedir4(), `q-export-${ts}.${format}`);
     try {
       if (format === "json") {
         writeFileSync5(filename, JSON.stringify(lastResult.rows, null, 2));
@@ -2366,57 +2295,36 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
         );
         writeFileSync5(filename, [header, ...rows].join("\n"));
       }
-      setCommandMessage({ ok: true, text: `Exported to ${filename}` });
+      writeEntry({ query: `/export ${format}`, commandMessage: { ok: true, text: `Exported to ${filename}` }, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
     } catch (err) {
-      setCommandMessage({ ok: false, text: err instanceof Error ? err.message : String(err) });
-    }
-  }
-  function snapshotActiveEntry() {
-    if (lastQuery === "") return;
-    setCompletedEntries((prev) => [
-      ...prev,
-      {
-        id: entryIdRef.current++,
-        query: lastQuery,
-        commandMessage,
-        queryState,
-        elapsed,
-        page,
-        aiResponse,
-        aiError,
-        shellOutput,
-        erdData
-      }
-    ]);
+      writeEntry({ query: `/export ${format}`, commandMessage: { ok: false, text: err instanceof Error ? err.message : String(err) }, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
+    }
   }
   async function handleShell(cmd) {
-    setErdData(null);
-    setShellOutput(null);
-    setIsShellRunning(true);
-    setCommandMessage(null);
-    setAiResponse("");
-    setAiError(null);
-    setQueryState({ status: "idle" });
+    const q = `!${cmd}`;
+    setActive({ type: "loading", label: "Shell", query: q });
     const result = await runShell(cmd);
     const combined = [result.stdout, result.stderr].filter(Boolean).join("\n");
-    setShellOutput(combined || "(no output)");
-    setIsShellRunning(false);
+    writeEntry({ query: q, commandMessage: null, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: "", aiError: null, shellOutput: combined || "(no output)", erdData: null });
+    setActive({ type: "idle" });
   }
   async function handleSubmit(sql) {
     if (sql === "/next") {
-      setPage((p) => p + 1);
+      if (!lastResult) return;
+      const p = lastResultPage + 1;
+      setLastResultPage(p);
+      writeEntry({ query: "/next", commandMessage: null, queryState: { status: "success", result: lastResult }, elapsed: null, page: p, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
       return;
     }
     if (sql === "/prev") {
-      setPage((p) => Math.max(0, p - 1));
+      if (!lastResult || lastResultPage === 0) return;
+      const p = lastResultPage - 1;
+      setLastResultPage(p);
+      writeEntry({ query: "/prev", commandMessage: null, queryState: { status: "success", result: lastResult }, elapsed: null, page: p, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
       return;
     }
-    snapshotActiveEntry();
     if (sql.startsWith("!")) {
-      const cmd = sql.slice(1).trim();
-      setLastQuery(sql);
-      setShellOutput(null);
-      void handleShell(cmd);
+      void handleShell(sql.slice(1).trim());
       return;
     }
     if (sql.startsWith("/") || sql.startsWith("\\")) {
@@ -2441,62 +2349,45 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
         },
         onClear: () => {
           setCompletedEntries([]);
-          setLastQuery("");
-          setCommandMessage(null);
-          setQueryState({ status: "idle" });
-          setShellOutput(null);
-          setAiResponse("");
-          setAiError(null);
-          setElapsed(null);
-          setPage(0);
-          setClearSeq((s) => s + 1);
+          setHasHistory(false);
+          setActive({ type: "idle" });
+          process.stdout.write("\x1B[H\x1B[2J\x1B[3J");
         },
         aliases,
         onSaveAlias: handleSaveAlias,
         onDeleteAlias: handleDeleteAlias
       });
       if (result.cleared) return;
-      setLastQuery(sql);
-      setErdData(null);
-      setAiResponse("");
-      setAiError(null);
-      setElapsed(null);
-      setPage(0);
-      setQueryState({ status: "idle" });
-      if (result.helpData) setCommandMessage({ ok: result.ok, text: "", helpData: result.helpData });
-      else if (result.message) setCommandMessage({ ok: result.ok, text: result.message });
-      else setCommandMessage(null);
+      if (result.helpData) {
+        writeEntry({ query: sql, commandMessage: { ok: result.ok, text: "", helpData: result.helpData }, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
+      } else if (result.message) {
+        writeEntry({ query: sql, commandMessage: { ok: result.ok, text: result.message }, queryState: { status: "idle" }, elapsed: null, page: 0, aiResponse: "", aiError: null, shellOutput: null, erdData: null });
+      }
       return;
     }
     void handleQuery(sql);
   }
-  const isLoading = queryState.status === "running" || isStreaming || isShellRunning || isErdLoading;
+  const isLoading = active.type !== "idle";
   const isConnected = connectionState.status === "connected";
-  const showAi = aiResponse !== "" || isStreaming || aiError !== null;
-  const isShellEntry = lastQuery.startsWith("!");
-  const isCommand = !isShellEntry && (lastQuery.startsWith("/") || lastQuery.startsWith("\\"));
-  const activeLabel = isShellEntry ? "Shell:" : isCommand ? "Command:" : "Query:";
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
-    completedEntries.map((entry) => /* @__PURE__ */ jsx7(EntryView, { entry }, entry.id)),
-    /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 1, children: [
-      lastQuery === "" && /* @__PURE__ */ jsx7(Banner, { connectionState }),
-      lastQuery !== "" && /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginBottom: 2, children: [
-        /* @__PURE__ */ jsx7(QueryHeader, { label: activeLabel.replace(":", ""), query: lastQuery }),
-        /* @__PURE__ */ jsx7(Box7, { marginTop: 1, flexDirection: "column", children: isShellEntry ? isShellRunning ? /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "running\u2026" }) : /* @__PURE__ */ jsx7(Text7, { children: limitLines(shellOutput ?? "", activePageSize()) }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
-          commandMessage && (commandMessage.helpData ? /* @__PURE__ */ jsx7(HelpView, { data: commandMessage.helpData }) : commandMessage.ok ? /* @__PURE__ */ jsxs7(Text7, { color: theme.accent, children: [
-            "\u2713 ",
-            commandMessage.text
-          ] }) : /* @__PURE__ */ jsx7(ErrorBox, { message: commandMessage.text })),
-          isErdLoading ? /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Fetching schema\u2026" }) : erdData ? /* @__PURE__ */ jsx7(ErdView, { data: erdData }) : showAi ? /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
-            /* @__PURE__ */ jsx7(Text7, { color: theme.accent, bold: true, children: "Explanation:" }),
-            /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", marginTop: 1, children: aiError ? /* @__PURE__ */ jsx7(ErrorBox, { message: aiError }) : /* @__PURE__ */ jsxs7(Text7, { color: PLACEHOLDER2, children: [
-              aiResponse,
-              isStreaming && /* @__PURE__ */ jsx7(Text7, { color: PLACEHOLDER2, children: "\u258B" })
-            ] }) })
-          ] }) : !commandMessage && /* @__PURE__ */ jsx7(QueryResult, { state: queryState, elapsed, page, pageSize: activePageSize() })
-        ] }) })
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx5(Static, { items: completedEntries, children: ({ id, formatted }) => /* @__PURE__ */ jsx5(Box5, { children: /* @__PURE__ */ jsx5(Text5, { children: formatted }) }, id) }),
+    /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 1, children: [
+      !hasHistory && active.type === "idle" && /* @__PURE__ */ jsx5(Banner, { connectionState }),
+      active.type === "loading" && /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginBottom: 1, children: [
+        /* @__PURE__ */ jsx5(QueryHeader, { label: active.label, query: active.query }),
+        /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: " running\u2026" })
+      ] }),
+      active.type === "streaming" && /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginBottom: 1, children: [
+        /* @__PURE__ */ jsx5(QueryHeader, { label: "Query", query: active.query }),
+        /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
+          /* @__PURE__ */ jsx5(Text5, { color: theme.accent, bold: true, children: "Explanation:" }),
+          /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: active.error ? /* @__PURE__ */ jsx5(ErrorBox, { message: active.error }) : /* @__PURE__ */ jsxs5(Text5, { color: PLACEHOLDER2, children: [
+            active.text,
+            /* @__PURE__ */ jsx5(Text5, { color: PLACEHOLDER2, children: "\u258B" })
+          ] }) })
+        ] })
       ] }),
-      isConnected ? /* @__PURE__ */ jsx7(
+      isConnected ? /* @__PURE__ */ jsx5(
         QueryInput,
         {
           onSubmit: handleSubmit,
@@ -2508,16 +2399,16 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
           aliases,
           schema: schema ?? void 0
         }
-      ) : /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Not connected. Press Ctrl+C to exit." }),
-      (vimEnabled || inputIsShell) && /* @__PURE__ */ jsx7(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text7, { bold: true, color: inputIsShell ? theme.shellMode : vimMode === "NORMAL" ? theme.normalMode : theme.insertMode, children: isRawModeSupported ? inputIsShell ? "[SHELL]" : `[${vimMode}]` : "" }) })
+      ) : /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "Not connected. Press Ctrl+C to exit." }),
+      (vimEnabled || inputIsShell) && /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { bold: true, color: inputIsShell ? theme.shellMode : vimMode === "NORMAL" ? theme.normalMode : theme.insertMode, children: isRawModeSupported ? inputIsShell ? "[SHELL]" : `[${vimMode}]` : "" }) })
     ] })
   ] });
 }
 
 // src/ui/components/ConnectionWizard.tsx
-import { useState as useState4 } from "react";
-import { Box as Box8, Text as Text8, useInput as useInput3, useStdin as useStdin3 } from "ink";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { Box as Box6, Text as Text6, useInput as useInput3, useStdin as useStdin3 } from "ink";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var DRIVERS = ["postgresql", "mysql", "sqlite"];
 var LABEL_WIDTH = 10;
 function fieldLabels(driver) {
@@ -2526,8 +2417,8 @@ function fieldLabels(driver) {
 }
 function ConnectionWizard({ onConnect, initialError }) {
   const { isRawModeSupported } = useStdin3();
-  const [focus, setFocus] = useState4(0);
-  const [fields, setFields] = useState4({
+  const [focus, setFocus] = useState5(0);
+  const [fields, setFields] = useState5({
     driver: "postgresql",
     host: "localhost",
     port: "5432",
@@ -2535,9 +2426,9 @@ function ConnectionWizard({ onConnect, initialError }) {
     user: "",
     password: ""
   });
-  const [connecting, setConnecting] = useState4(false);
-  const [error, setError] = useState4(initialError ?? null);
-  const [keychainHint, setKeychainHint] = useState4(false);
+  const [connecting, setConnecting] = useState5(false);
+  const [error, setError] = useState5(initialError ?? null);
+  const [keychainHint, setKeychainHint] = useState5(false);
   const labels = fieldLabels(fields.driver);
   const fieldCount = labels.length;
   function getTextValue(idx) {
@@ -2672,36 +2563,36 @@ function ConnectionWizard({ onConnect, initialError }) {
     { isActive: isRawModeSupported }
   );
   const isPassword = (idx) => fields.driver !== "sqlite" && idx === 5;
-  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 2, paddingTop: 2, paddingBottom: 1, children: [
-    /* @__PURE__ */ jsx8(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsx8(Text8, { bold: true, color: theme.accent, children: "Connect to a database" }) }),
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingX: 2, paddingTop: 2, paddingBottom: 1, children: [
+    /* @__PURE__ */ jsx6(Box6, { marginBottom: 1, children: /* @__PURE__ */ jsx6(Text6, { bold: true, color: theme.accent, children: "Connect to a database" }) }),
     labels.map((label, idx) => {
       const isFocused = focus === idx;
       const isDriver = idx === 0;
-      return /* @__PURE__ */ jsxs8(Box8, { children: [
-        /* @__PURE__ */ jsx8(Text8, { color: isFocused ? theme.accent : void 0, bold: isFocused, children: label.padEnd(LABEL_WIDTH) }),
-        isDriver ? /* @__PURE__ */ jsx8(Box8, { children: DRIVERS.map((d, i) => /* @__PURE__ */ jsxs8(Box8, { children: [
-          i > 0 && /* @__PURE__ */ jsx8(Text8, { children: "   " }),
-          /* @__PURE__ */ jsxs8(Text8, { color: fields.driver === d ? theme.accent : void 0, bold: fields.driver === d, children: [
+      return /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsx6(Text6, { color: isFocused ? theme.accent : void 0, bold: isFocused, children: label.padEnd(LABEL_WIDTH) }),
+        isDriver ? /* @__PURE__ */ jsx6(Box6, { children: DRIVERS.map((d, i) => /* @__PURE__ */ jsxs6(Box6, { children: [
+          i > 0 && /* @__PURE__ */ jsx6(Text6, { children: "   " }),
+          /* @__PURE__ */ jsxs6(Text6, { color: fields.driver === d ? theme.accent : void 0, bold: fields.driver === d, children: [
             fields.driver === d ? "\u25CF " : "\u25CB ",
             d.charAt(0).toUpperCase() + d.slice(1)
           ] })
-        ] }, d)) }) : /* @__PURE__ */ jsxs8(Box8, { children: [
-          /* @__PURE__ */ jsx8(Text8, { children: isPassword(idx) ? "\u2022".repeat(getTextValue(idx).length) : getTextValue(idx) }),
-          isFocused && /* @__PURE__ */ jsx8(Text8, { color: theme.accent, bold: true, children: "\u258C" }),
-          isFocused && isPassword(idx) && keychainHint && /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "  (from keychain)" })
+        ] }, d)) }) : /* @__PURE__ */ jsxs6(Box6, { children: [
+          /* @__PURE__ */ jsx6(Text6, { children: isPassword(idx) ? "\u2022".repeat(getTextValue(idx).length) : getTextValue(idx) }),
+          isFocused && /* @__PURE__ */ jsx6(Text6, { color: theme.accent, bold: true, children: "\u258C" }),
+          isFocused && isPassword(idx) && keychainHint && /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "  (from keychain)" })
         ] })
       ] }, label);
     }),
-    /* @__PURE__ */ jsx8(Box8, { marginTop: 1, children: connecting ? /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "Connecting\u2026" }) : error ? /* @__PURE__ */ jsxs8(Text8, { color: theme.error, children: [
+    /* @__PURE__ */ jsx6(Box6, { marginTop: 1, children: connecting ? /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Connecting\u2026" }) : error ? /* @__PURE__ */ jsxs6(Text6, { color: theme.error, children: [
       "\u2717 ",
       error
     ] }) : null }),
-    /* @__PURE__ */ jsx8(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "Tab \xB7 \u2191\u2193 navigate   Enter connect   \u2190\u2192 cycle driver" }) })
+    /* @__PURE__ */ jsx6(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "Tab \xB7 \u2191\u2193 navigate   Enter connect   \u2190\u2192 cycle driver" }) })
   ] });
 }
 
 // src/index.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var { values } = parseArgs({
   args: process.argv.slice(2).filter((a) => a !== "--"),
   options: {
@@ -2717,8 +2608,8 @@ var aiUrl = values["ai-url"];
 var aiModel = values["ai-model"];
 var aiKey = values["api-key"] || process.env.Q_CLI_API_KEY || "";
 function Root({ initialDsn: initialDsn2, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2 }) {
-  const [connectionState, setConnectionState] = useState5(null);
-  const [dsnError, setDsnError] = useState5(null);
+  const [connectionState, setConnectionState] = useState6(null);
+  const [dsnError, setDsnError] = useState6(null);
   useEffect5(() => {
     if (initialDsn2) {
       connectDsn(initialDsn2).then((state) => {
@@ -2731,10 +2622,10 @@ function Root({ initialDsn: initialDsn2, aiUrl: aiUrl2, aiModel: aiModel2, aiKey
     }
   }, []);
   if (initialDsn2 && !connectionState && !dsnError) {
-    return /* @__PURE__ */ jsx9(Box9, { paddingX: 2, paddingTop: 1, children: /* @__PURE__ */ jsx9(Text9, { dimColor: true, children: "Connecting\u2026" }) });
+    return /* @__PURE__ */ jsx7(Box7, { paddingX: 2, paddingTop: 1, children: /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Connecting\u2026" }) });
   }
   if (!connectionState) {
-    return /* @__PURE__ */ jsx9(ConnectionWizard, { onConnect: setConnectionState, initialError: dsnError ?? void 0 });
+    return /* @__PURE__ */ jsx7(ConnectionWizard, { onConnect: setConnectionState, initialError: dsnError ?? void 0 });
   }
   async function handleChangeDatabase(database) {
     if (connectionState.status !== "connected") return;
@@ -2744,7 +2635,7 @@ function Root({ initialDsn: initialDsn2, aiUrl: aiUrl2, aiModel: aiModel2, aiKey
     const next = await connectParams({ ...current.params, database });
     setConnectionState(next);
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx7(
     App,
     {
       connectionState,
@@ -2758,6 +2649,6 @@ function Root({ initialDsn: initialDsn2, aiUrl: aiUrl2, aiModel: aiModel2, aiKey
   );
 }
 render(
-  /* @__PURE__ */ jsx9(Root, { initialDsn, aiUrl, aiModel, aiKey }),
+  /* @__PURE__ */ jsx7(Root, { initialDsn, aiUrl, aiModel, aiKey }),
   { exitOnCtrlC: true }
 );