@deaquinodev/querky 0.4.5 → 0.4.6

package/dist/index.js

@@ -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
@@ -1802,21 +1820,13 @@ function Table({ columns, rows, expanded = false }) {
 
 // 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`;
@@ -2138,6 +2148,12 @@ 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;
+}
 function EntryView({ entry }) {
   const showAi = entry.aiResponse !== "" || entry.aiError !== null;
   const showErd = entry.erdData !== null;
@@ -2150,7 +2166,7 @@ function EntryView({ entry }) {
         label,
         " "
       ] }),
-      /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: entry.query })
+      /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: displayQuery(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: [
@@ -2433,7 +2449,7 @@ function App({ connectionState, aiUrl: aiUrl2, aiModel: aiModel2, aiKey: aiKey2,
             activeLabel,
             " "
           ] }),
-          /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: lastQuery })
+          /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: displayQuery(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: [

package/package.json

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