@deaquinodev/querky 0.4.6 → 0.4.8

package/dist/index.js

@@ -1,7 +1,7 @@
 #!/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";
 
@@ -193,11 +193,11 @@ async function connectDsn(dsn) {
 }
 
 // src/ui/components/App.tsx
-import { useState as useState3, useEffect as useEffect4, useRef as useRef2 } 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, Static, useApp, useInput as useInput2, useStdin as useStdin2 } from "ink";
+import { join as join5 } from "path";
+import { Box as Box7, Text as Text7, useApp, useInput as useInput2, useStdin as useStdin2, Static } from "ink";
 
 // src/db/query.ts
 async function runQuery(client, sql) {
@@ -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
@@ -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,35 +1723,30 @@ function QueryInput({ onSubmit, isLoading, onModeChange, onShellModeChange, vimE
       ] }),
       /* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: emptyLine })
     ] }),
-    suggestions.length > 0 && /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 2, children: [
-      suggestions.map((name, i) => {
-        const selected = i === suggestionIndex;
-        if (isCommand) {
-          return /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsxs(Text, { children: [
-              /* @__PURE__ */ jsx(Text, { dimColor: !selected, color: selected ? ACCENT : void 0, children: "/" }),
-              /* @__PURE__ */ jsx(FuzzyHighlight, { text: name, token: partial, selected })
-            ] }),
-            /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-              "  \u2014  ",
-              descMap[name]
-            ] })
+    /* @__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);
-        }
-        return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(FuzzyHighlight, { text: name, token: sqlToken, selected }) }, name);
-      }),
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Tab/\u2191\u2193 navigate  Enter select" })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { marginTop: 1, 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)) })
+        }),
+        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
@@ -1743,7 +1754,7 @@ 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 BORDER2 = "white";
+var BORDER = "white";
 var NULL_COLOR = "#6366f1";
 var NULL_MARKER = "\u2205";
 function isNull(val) {
@@ -1774,10 +1785,10 @@ function hline(widths, left, 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: BORDER2, children: `\u2500[ Record ${i + 1} ]${"\u2500".repeat(Math.max(0, keyWidth + 14 - String(i + 1).length))}` }),
+    /* @__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: BORDER2, children: " \u2502 " }),
+      /* @__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)) });
@@ -1790,31 +1801,31 @@ function Table({ columns, rows, expanded = false }) {
   const botLine = hline(widths, "\u2570", "\u2534", "\u256F");
   function renderHeaderRow(cols) {
     return /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsx2(Text2, { color: BORDER2, children: "\u2502" }),
+      /* @__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: BORDER2, children: "\u2502" })
+        /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: "\u2502" })
       ] }, i))
     ] });
   }
   function renderDataRow(row) {
     return /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsx2(Text2, { color: BORDER2, children: "\u2502" }),
+      /* @__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: BORDER2, children: "\u2502" })
+        /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: "\u2502" })
       ] }, i))
     ] });
   }
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx2(Text2, { color: BORDER2, children: topLine }),
+    /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: topLine }),
     renderHeaderRow(columns),
-    /* @__PURE__ */ jsx2(Text2, { color: BORDER2, children: midLine }),
+    /* @__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: BORDER2, children: midLine })
+      i < rows.length - 1 && /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: midLine })
     ] }, i)),
-    /* @__PURE__ */ jsx2(Text2, { color: BORDER2, children: botLine })
+    /* @__PURE__ */ jsx2(Text2, { color: BORDER, children: botLine })
   ] });
 }
 
@@ -1833,7 +1844,7 @@ function formatDuration(ms) {
   return `${(ms / 1e3).toFixed(2)}s`;
 }
 function useTerminalWidth() {
-  const [width, setWidth] = useState2(process.stdout.columns ?? 80);
+  const [width, setWidth] = useState3(process.stdout.columns ?? 80);
   useEffect3(() => {
     const handler = () => setWidth(process.stdout.columns ?? 80);
     process.stdout.on("resize", handler);
@@ -1902,16 +1913,8 @@ function QueryResult({ state, elapsed, page, pageSize }) {
 
 // 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.8" : process.env.npm_package_version ?? "unknown";
 var LOGO = [
   " \u2597\u2584\u2584\u2584\u2584\u2584\u2596",
   "\u2590\u2591 \u25CF \u25CF \u2591\u258C",
@@ -1935,7 +1938,7 @@ function Banner({ connectionState }) {
         "Querky ",
         /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
           "v",
-          pkg.version
+          version
         ] })
       ] }),
       /* @__PURE__ */ jsx4(Text4, { children: " " }),
@@ -2019,6 +2022,7 @@ var TABLE_COLORS = [
   "#fbbf24",
   "#2dd4bf"
 ];
+var BORDER2 = "#4b5563";
 var PAD = 1;
 var GAP = 2;
 var FK_PREFIX = "FK \u2192 ";
@@ -2066,31 +2070,31 @@ function TableBox({ table, m, color, colorMap }) {
   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, children: top }),
+    /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: top }),
     /* @__PURE__ */ jsxs6(Box6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { color, children: "\u2502" }),
+      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" }),
       /* @__PURE__ */ jsxs6(Text6, { color, bold: true, children: [
         sp,
         p(table.name, headerW),
         sp
       ] }),
-      /* @__PURE__ */ jsx6(Text6, { color, children: "\u2502" })
+      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" })
     ] }),
-    /* @__PURE__ */ jsx6(Text6, { color, children: sep }),
+    /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: sep }),
     table.columns.map((col, i) => /* @__PURE__ */ jsxs6(Box6, { children: [
-      /* @__PURE__ */ jsx6(Text6, { color, children: "\u2502" }),
+      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" }),
       /* @__PURE__ */ jsxs6(Text6, { children: [
         sp,
         p(col.name, nameW),
         sp
       ] }),
-      /* @__PURE__ */ jsx6(Text6, { color, children: "\u2502" }),
+      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" }),
       /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
         sp,
         p(col.type, typeW),
         sp
       ] }),
-      /* @__PURE__ */ jsx6(Text6, { color, children: "\u2502" }),
+      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" }),
       col.isPk ? /* @__PURE__ */ jsxs6(Text6, { bold: true, children: [
         sp,
         p("PK", keyW),
@@ -2109,9 +2113,9 @@ function TableBox({ table, m, color, colorMap }) {
         " ".repeat(keyW),
         sp
       ] }),
-      /* @__PURE__ */ jsx6(Text6, { color, children: "\u2502" })
+      /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: "\u2502" })
     ] }, i)),
-    /* @__PURE__ */ jsx6(Text6, { color, children: bot })
+    /* @__PURE__ */ jsx6(Text6, { color: BORDER2, children: bot })
   ] });
 }
 function ErdView({ data }) {
@@ -2129,7 +2133,7 @@ function ErdView({ data }) {
     {
       table: data.tables[ti],
       m: metrics[ti],
-      color: colorMap.get(data.tables[ti].name) ?? BORDER,
+      color: colorMap.get(data.tables[ti].name) ?? BORDER2,
       colorMap
     }
   ) }, ti)) }, ri)) });
@@ -2148,26 +2152,42 @@ function limitLines(s, n) {
   return lines.slice(0, n).join("\n") + `
 \u2026 +${lines.length - n} more lines (scroll up after next submit)`;
 }
-function displayQuery(query) {
-  const cols = process.stdout.columns ?? 80;
-  const max = Math.max(20, cols - 16);
-  const flat = query.replace(/\n/g, " ").replace(/\s+/g, " ").trim();
-  return flat.length > max ? flat.slice(0, max) + "\u2026" : flat;
+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: [
+          label,
+          ":"
+        ] })
+      ] }),
+      query.split("\n").map((line, i) => /* @__PURE__ */ jsxs7(Text7, { 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: [
+      label,
+      "(",
+      query,
+      ")"
+    ] })
+  ] });
 }
 function EntryView({ 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:";
+  const label = isShell ? "Shell" : isCommand ? "Command" : "Query";
   return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginBottom: 1, paddingX: 1, children: [
-    /* @__PURE__ */ jsxs7(Box7, { borderStyle: "round", borderColor: theme.accent, paddingX: 1, children: [
-      /* @__PURE__ */ jsxs7(Text7, { color: theme.accent, bold: true, children: [
-        label,
-        " "
-      ] }),
-      /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: displayQuery(entry.query) })
-    ] }),
+    /* @__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 ",
@@ -2183,29 +2203,29 @@ function EntryView({ entry }) {
 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 [queryState, setQueryState] = useState4({ status: "idle" });
+  const [lastQuery, setLastQuery] = useState4("");
+  const [lastSqlQuery, setLastSqlQuery] = useState4("");
+  const [lastResult, setLastResult] = useState4(null);
+  const [page, setPage] = useState4(0);
+  const [vimMode, setVimMode] = useState4("INSERT");
+  const [inputIsShell, setInputIsShell] = useState4(false);
+  const [elapsed, setElapsed] = useState4(null);
+  const [vimEnabled, setVimEnabled] = useState4(true);
+  const [commandMessage, setCommandMessage] = useState4(null);
+  const [history, setHistory] = useState4(() => loadHistory());
+  const [schema, setSchema] = useState4(null);
+  const [aiResponse, setAiResponse] = useState4("");
+  const [isStreaming, setIsStreaming] = useState4(false);
+  const [aiError, setAiError] = useState4(null);
+  const [shellOutput, setShellOutput] = useState4(null);
+  const [isShellRunning, setIsShellRunning] = useState4(false);
+  const [erdData, setErdData] = useState4(null);
+  const [isErdLoading, setIsErdLoading] = useState4(false);
+  const [completedEntries, setCompletedEntries] = useState4([]);
   const entryIdRef = useRef2(0);
   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 handleSaveAlias(name, query) {
@@ -2313,7 +2333,7 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
       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));
@@ -2403,7 +2423,6 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
           void handleErd();
         },
         onClear: () => {
-          process.stdout.write("\x1B[2J\x1B[3J\x1B[H");
           setCompletedEntries([]);
           setLastQuery("");
           setCommandMessage(null);
@@ -2413,6 +2432,7 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
           setAiError(null);
           setElapsed(null);
           setPage(0);
+          process.stdout.write("\x1B[2J\x1B[H");
         },
         aliases,
         onSaveAlias: handleSaveAlias,
@@ -2444,13 +2464,7 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
     /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 1, children: [
       lastQuery === "" && /* @__PURE__ */ jsx7(Banner, { connectionState }),
       lastQuery !== "" && /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginBottom: 2, children: [
-        /* @__PURE__ */ jsxs7(Box7, { borderStyle: "round", borderColor: theme.accent, paddingX: 1, children: [
-          /* @__PURE__ */ jsxs7(Text7, { color: theme.accent, bold: true, children: [
-            activeLabel,
-            " "
-          ] }),
-          /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: displayQuery(lastQuery) })
-        ] }),
+        /* @__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 ",
@@ -2484,7 +2498,7 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
 }
 
 // src/ui/components/ConnectionWizard.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } 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";
 var DRIVERS = ["postgresql", "mysql", "sqlite"];
@@ -2495,8 +2509,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",
@@ -2504,9 +2518,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) {
@@ -2686,8 +2700,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) => {
@@ -2726,6 +2740,9 @@ function Root({ initialDsn: initialDsn2, aiUrl: aiUrl2, aiModel: aiModel2, aiKey
     }
   );
 }
+process.stdout.write("\x1B[?1049h\x1B[H");
+process.on("exit", () => process.stdout.write("\x1B[?1049l"));
+process.on("SIGTERM", () => process.exit(0));
 render(
   /* @__PURE__ */ jsx9(Root, { initialDsn, aiUrl, aiModel, aiKey }),
   { exitOnCtrlC: true }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deaquinodev/querky",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "A quirky terminal SQL client with vim mode, AI features, and schema-aware autocomplete",
   "main": "dist/index.js",
   "files": [