@deaquinodev/querky 0.4.7 → 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, 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 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,50 +1723,30 @@ 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
@@ -1848,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);
@@ -1917,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",
@@ -1950,7 +1938,7 @@ function Banner({ connectionState }) {
         "Querky ",
         /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
           "v",
-          pkg.version
+          version
         ] })
       ] }),
       /* @__PURE__ */ jsx4(Text4, { children: " " }),
@@ -2192,7 +2180,7 @@ function QueryHeader({ label, query }) {
     ] })
   ] });
 }
-var EntryView = memo(function EntryView2({ entry }) {
+function EntryView({ entry }) {
   const showAi = entry.aiResponse !== "" || entry.aiError !== null;
   const showErd = entry.erdData !== null;
   const isShell = entry.query.startsWith("!");
@@ -2211,34 +2199,33 @@ var EntryView = memo(function EntryView2({ 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();
-  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 [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) {
@@ -2266,10 +2253,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");
@@ -2350,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));
@@ -2449,7 +2432,7 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
           setAiError(null);
           setElapsed(null);
           setPage(0);
-          setClearSeq((s) => s + 1);
+          process.stdout.write("\x1B[2J\x1B[H");
         },
         aliases,
         onSaveAlias: handleSaveAlias,
@@ -2477,7 +2460,7 @@ 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: [
-    completedEntries.map((entry) => /* @__PURE__ */ jsx7(EntryView, { entry }, entry.id)),
+    /* @__PURE__ */ jsx7(Static, { items: completedEntries, children: (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: [
@@ -2515,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"];
@@ -2526,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",
@@ -2535,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) {
@@ -2717,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) => {
@@ -2757,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.7",
+  "version": "0.4.8",
   "description": "A quirky terminal SQL client with vim mode, AI features, and schema-aware autocomplete",
   "main": "dist/index.js",
   "files": [