@deaquinodev/querky 0.4.6 → 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) {
@@ -1707,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: " " }) })
+      ] });
+    })()
   ] });
 }
 
@@ -1743,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) {
@@ -1774,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)) });
@@ -1790,31 +1805,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 })
   ] });
 }
 
@@ -2019,6 +2034,7 @@ var TABLE_COLORS = [
   "#fbbf24",
   "#2dd4bf"
 ];
+var BORDER2 = "#4b5563";
 var PAD = 1;
 var GAP = 2;
 var FK_PREFIX = "FK \u2192 ";
@@ -2066,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),
@@ -2109,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 }) {
@@ -2129,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)) });
@@ -2148,26 +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 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 }) {
+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: 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 ",
@@ -2179,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();
@@ -2203,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(
@@ -2233,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");
@@ -2403,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);
@@ -2413,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,
@@ -2440,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: 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 ",

package/package.json

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