@deaquinodev/querky 0.4.5 → 0.4.7

package/dist/index.js

@@ -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 useState3, useEffect as useEffect4, useRef as useRef2, memo } 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 { Box as Box7, Text as Text7, useApp, useInput as useInput2, useStdin as useStdin2 } from "ink";
 
 // src/db/query.ts
 async function runQuery(client, sql) {
@@ -1189,7 +1189,7 @@ function useVimInput(onSubmit, isActive, vimEnabled = true, onTab, history = [],
           }
           if (key.leftArrow) return { ...s, cursor: Math.max(0, s.cursor - 1) };
           if (key.rightArrow) return { ...s, cursor: Math.min(s.value.length, s.cursor + 1) };
-          if (key.tab) {
+          if (key.tab && !key.shift) {
             const sugs = getSuggestions?.(s.value, s.cursor) ?? [];
             if (sugs.length > 0) {
               const next = s.suggestionIndex < sugs.length - 1 ? s.suggestionIndex + 1 : 0;
@@ -1199,6 +1199,14 @@ function useVimInput(onSubmit, isActive, vimEnabled = true, onTab, history = [],
             if (completed != null) return { ...s, value: completed, cursor: completed.length };
             return s;
           }
+          if (key.tab && key.shift) {
+            const sugs = getSuggestions?.(s.value, s.cursor) ?? [];
+            if (sugs.length > 0) {
+              const next = s.suggestionIndex <= 0 ? sugs.length - 1 : s.suggestionIndex - 1;
+              return { ...s, suggestionIndex: next };
+            }
+            return s;
+          }
           if (key.ctrl && input === "e") {
             return { ...s, pendingEditor: s.value };
           }
@@ -1496,9 +1504,10 @@ function FuzzyHighlight({ text, token, selected }) {
     (seg, i) => seg.hit ? /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: seg.chars }, i) : /* @__PURE__ */ jsx(Text, { dimColor: !selected, children: seg.chars }, i)
   ) });
 }
-var BG = "#1e1b4b";
+var BG = "#1e1e1e";
 var ACCENT = "#818cf8";
-var PLACEHOLDER = "#6366f1";
+var PROMPT_MUTED = "#6b7280";
+var PLACEHOLDER = "#4b5563";
 var KW_COLOR = "#a5b4fc";
 var STR_COLOR = "#fb923c";
 var NUM_COLOR = "#86efac";
@@ -1510,9 +1519,9 @@ function sqlTokenColor(type) {
   if (type === "comment") return CMT_COLOR;
   return void 0;
 }
-function SqlLine({ text }) {
+function SqlLine({ text, bg }) {
   const tokens = tokenizeSql(text);
-  return /* @__PURE__ */ jsx(Fragment, { children: tokens.map((tok, i) => /* @__PURE__ */ jsx(Text, { color: sqlTokenColor(tok.type), children: tok.text }, i)) });
+  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 }) {
   const tokens = tokenizeSql(text);
@@ -1530,7 +1539,7 @@ function SqlHighlightedInput({ text, cursorAt, mode, pad: pad2 }) {
       const after = tok.text.slice(rel + 1);
       if (before) parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: BG, color, children: before }, `${i}b`));
       if (mode === "INSERT") {
-        parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: ACCENT, bold: true, children: "\u258C" }, `${i}c`));
+        parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: PROMPT_MUTED, bold: true, children: "\u258C" }, `${i}c`));
       } else {
         parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: ACCENT, color: BG, bold: true, children: ch || " " }, `${i}c`));
       }
@@ -1543,7 +1552,7 @@ function SqlHighlightedInput({ text, cursorAt, mode, pad: pad2 }) {
   }
   if (!cursorDone) {
     if (mode === "INSERT") {
-      parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: ACCENT, bold: true, children: "\u258C" }, "c"));
+      parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: PROMPT_MUTED, bold: true, children: "\u258C" }, "c"));
     } else {
       parts.push(/* @__PURE__ */ jsx(Text, { backgroundColor: ACCENT, color: BG, bold: true, children: " " }, "c"));
     }
@@ -1635,16 +1644,19 @@ 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 renderValue = previewResult?.value ?? value;
+  const renderCursor = previewResult?.cursor ?? cursorPos;
   const lineWidth = innerWidth - 4;
-  const displayValue = value.slice(dOff);
-  const displayCursor = Math.max(0, cursorPos - dOff);
+  const displayValue = renderValue.slice(dOff);
+  const displayCursor = Math.max(0, renderCursor - dOff);
   const scrollStart = displayCursor > lineWidth - 1 ? displayCursor - lineWidth + 1 : 0;
   const visibleBefore = displayValue.slice(scrollStart, displayCursor);
-  const cursorChar = cursorPos < dOff ? " " : displayValue[displayCursor] ?? " ";
+  const cursorChar = renderCursor < dOff ? " " : displayValue[displayCursor] ?? " ";
   const visibleAfter = displayValue.slice(displayCursor + 1, scrollStart + lineWidth);
   const textPad = " ".repeat(Math.max(0, lineWidth - visibleBefore.length - 1 - visibleAfter.length));
-  const visibleSql = value.slice(scrollStart, scrollStart + lineWidth);
-  const relativeSqlCursor = cursorPos - scrollStart;
+  const visibleSql = renderValue.slice(scrollStart, scrollStart + lineWidth);
+  const relativeSqlCursor = renderCursor - scrollStart;
   const sqlCursorAtEnd = relativeSqlCursor >= visibleSql.length;
   const sqlPad = " ".repeat(Math.max(0, lineWidth - visibleSql.length - (sqlCursorAtEnd ? 1 : 0)));
   const emptyPad = " ".repeat(Math.max(0, lineWidth - placeholder.length - 1));
@@ -1656,31 +1668,37 @@ function QueryInput({ onSubmit, isLoading, onModeChange, onShellModeChange, vimE
   );
   const hintsInline = totalHintsWidth <= termWidth;
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    isMultiLine ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: ACCENT, paddingX: 1, children: value.split("\n").map((line, i, arr) => {
+    isMultiLine ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: emptyLine }),
+      value.split("\n").map((line, i, arr) => {
         const numW = String(arr.length).length;
+        const prefixWidth = 2 + numW + 3;
+        const contentWidth = innerWidth - prefixWidth;
         const isLast = i === arr.length - 1;
+        const linePad = " ".repeat(Math.max(0, contentWidth - line.length - (isLast ? 1 : 0)));
         return /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+          /* @__PURE__ */ jsxs(Text, { backgroundColor: BG, dimColor: true, children: [
+            "  ",
             String(i + 1).padStart(numW),
             " \u2502 "
           ] }),
-          /* @__PURE__ */ jsx(SqlLine, { text: line }),
-          isLast && (mode === "INSERT" ? /* @__PURE__ */ jsx(Text, { color: ACCENT, bold: true, children: "\u258C" }) : /* @__PURE__ */ jsx(Text, { backgroundColor: ACCENT, color: BG, bold: true, children: " " }))
+          /* @__PURE__ */ jsx(SqlLine, { text: line, bg: BG }),
+          isLast && (mode === "INSERT" ? /* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: PROMPT_MUTED, bold: true, children: "\u258C" }) : /* @__PURE__ */ jsx(Text, { backgroundColor: ACCENT, color: BG, bold: true, children: " " })),
+          /* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: linePad })
         ] }, i);
-      }) }),
-      /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Enter: run  \xB7  Ctrl+E / e: re-edit" }) })
+      }),
+      /* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: emptyLine })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: emptyLine }),
       /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: isShellMode ? theme.shellMode : ACCENT, bold: true, children: isShellMode ? "  $ " : "  > " }),
+        /* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: isShellMode ? theme.shellMode : PROMPT_MUTED, bold: true, children: isShellMode ? "  $ " : "  > " }),
         isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: PLACEHOLDER, children: placeholder }),
-          /* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: ACCENT, bold: true, children: "\u258C" }),
+          /* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: PROMPT_MUTED, bold: true, children: "\u258C" }),
           /* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: emptyPad })
         ] }) : isShellMode || isCommand ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Text, { backgroundColor: BG, children: visibleBefore }),
-          mode === "INSERT" ? /* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: ACCENT, bold: true, children: "\u258C" }) : /* @__PURE__ */ jsx(Text, { backgroundColor: ACCENT, color: BG, bold: true, children: cursorChar }),
+          mode === "INSERT" ? /* @__PURE__ */ jsx(Text, { backgroundColor: BG, color: PROMPT_MUTED, bold: true, children: "\u258C" }) : /* @__PURE__ */ jsx(Text, { backgroundColor: ACCENT, color: BG, bold: true, children: cursorChar }),
           /* @__PURE__ */ jsxs(Text, { backgroundColor: BG, children: [
             visibleAfter,
             textPad
@@ -1689,30 +1707,45 @@ 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]
-            ] })
-          ] }, 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)) })
+    (() => {
+      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: " " }) })
+      ] });
+    })()
   ] });
 }
 
@@ -1725,7 +1758,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) {
@@ -1756,10 +1789,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)) });
@@ -1772,51 +1805,43 @@ 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 })
   ] });
 }
 
 // src/ui/components/QueryResult.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var ERROR_BG = "#3b0f0f";
 var ERROR_FG = "#ff4444";
 function ErrorBox({ message }) {
-  const cols = Math.max(0, (process.stdout.columns ?? 80) - 2);
-  const blank = " ".repeat(cols);
   const lines = message.split("\n");
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", marginTop: 1, children: [
-    /* @__PURE__ */ jsx3(Text3, { backgroundColor: ERROR_BG, children: blank }),
-    lines.map((line, i) => {
-      const content = (i === 0 ? "  \u2717  " : "     ") + line;
-      const padded = content.length < cols ? content + " ".repeat(cols - content.length) : content;
-      return /* @__PURE__ */ jsx3(Text3, { backgroundColor: ERROR_BG, color: ERROR_FG, bold: true, children: padded }, i);
-    }),
-    /* @__PURE__ */ jsx3(Text3, { backgroundColor: ERROR_BG, children: blank })
-  ] });
+  return /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", marginTop: 1, children: lines.map((line, i) => /* @__PURE__ */ jsxs3(Text3, { color: ERROR_FG, bold: true, children: [
+    i === 0 ? "\u2717  " : "   ",
+    line
+  ] }, i)) });
 }
 function formatDuration(ms) {
   if (ms < 1e3) return `${ms}ms`;
@@ -2009,6 +2034,7 @@ var TABLE_COLORS = [
   "#fbbf24",
   "#2dd4bf"
 ];
+var BORDER2 = "#4b5563";
 var PAD = 1;
 var GAP = 2;
 var FK_PREFIX = "FK \u2192 ";
@@ -2056,31 +2082,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),
@@ -2099,9 +2125,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 }) {
@@ -2119,7 +2145,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)) });
@@ -2138,20 +2164,42 @@ function limitLines(s, n) {
   return lines.slice(0, n).join("\n") + `
 \u2026 +${lines.length - n} more lines (scroll up after next submit)`;
 }
-function EntryView({ entry }) {
+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,
+      ")"
+    ] })
+  ] });
+}
+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:";
+  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: 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 ",
@@ -2163,7 +2211,7 @@ function EntryView({ entry }) {
       ] }) : !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();
@@ -2187,6 +2235,7 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
   const [erdData, setErdData] = useState3(null);
   const [isErdLoading, setIsErdLoading] = useState3(false);
   const [completedEntries, setCompletedEntries] = useState3([]);
+  const [clearSeq, setClearSeq] = useState3(0);
   const entryIdRef = useRef2(0);
   const aliasScope = connectionState.status === "connected" ? makeScope(connectionState.driver, connectionState.user, connectionState.host, connectionState.database) : "";
   const [aliases, setAliases] = useState3(
@@ -2217,6 +2266,10 @@ 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");
@@ -2387,7 +2440,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);
@@ -2397,6 +2449,7 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
           setAiError(null);
           setElapsed(null);
           setPage(0);
+          setClearSeq((s) => s + 1);
         },
         aliases,
         onSaveAlias: handleSaveAlias,
@@ -2424,17 +2477,11 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
   const isCommand = !isShellEntry && (lastQuery.startsWith("/") || lastQuery.startsWith("\\"));
   const activeLabel = isShellEntry ? "Shell:" : isCommand ? "Command:" : "Query:";
   return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx7(Static, { items: completedEntries, children: (entry) => /* @__PURE__ */ jsx7(EntryView, { entry }, entry.id) }),
+    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__ */ 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: 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 ",

package/package.json

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