@gblikas/querykit 0.0.0 → 0.2.0

package/examples/qk-next/app/page.tsx

@@ -21,14 +21,27 @@ import {
   createQueryKit,
   IDrizzleAdapterOptions
 } from '@gblikas/querykit';
-import { Copy, Check, Search, SearchCode, ChevronUp } from 'lucide-react';
+import { Copy, Check, Search, ChevronUp, FileCode, X } from 'lucide-react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { atomOneDarkReasonable } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import sqlLanguage from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
-import jsonLanguage from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import typescriptLanguage from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';
+import bashLanguage from 'react-syntax-highlighter/dist/esm/languages/hljs/bash';
+// json language no longer needed as EXPLAIN view is removed
 import { toast } from 'sonner';
 import Aurora from '@/components/reactbits/blocks/Backgrounds/Aurora/Aurora';
 import { PGlite } from '@electric-sql/pglite';
+import { useViewportInfo } from './hooks/use-viewport-info';
+import { cn, trackQueryKitIssue, trackQueryKitUsage, trackQueryKitSpeed } from '@/lib/utils';
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose
+} from '@/components/ui/drawer';
 
 // Simple GitHub-like highlighter for key:value tokens that colors only the value
 const escapeHtml = (input: string): string =>
@@ -57,6 +70,43 @@ const highlightQueryHtml = (input: string): string => {
     .join('');
 };
 
+const INSTALL_SNIPPET = `pnpm i @gblikas/querykit drizzle-orm`;
+
+const SCHEMA_SNIPPET = `// schema.ts
+import { serial, text, pgTable } from 'drizzle-orm/pg-core';
+import { InferSelectModel } from 'drizzle-orm';
+
+export const users = pgTable('users', {
+  id: serial('id').primaryKey(),
+  name: text('name').notNull(),
+  status: text('status').notNull().default('draft'),
+});
+
+export type SelectUser = InferSelectModel<typeof users>;
+`;
+
+const QUERYKIT_SNIPPET = `// querykit.ts
+import { createQueryKit } from 'querykit';
+import { drizzleAdapter } from 'querykit/adapters/drizzle';
+import { users } from './schema';
+
+export const qk = createQueryKit({
+  adapter: drizzleAdapter,
+  schema: { users },
+});
+
+// example.ts
+import { qk } from './querykit';
+
+const query = qk
+  .query('users')
+  .where('status:done AND name:"John *"')
+  .orderBy('name', 'asc')
+  .limit(10);
+
+const results = await query.execute();
+`;
+
 const tasks = pgTable('tasks', {
   id: serial('id').primaryKey(),
   title: text('title').notNull(),
@@ -83,30 +133,77 @@ export default function Home(): JSX.Element {
   const [rowsScanned, setRowsScanned] = useState<number | null>(null);
   const [operatorsUsed, setOperatorsUsed] = useState<string[]>([]);
   const [usedQueryKit, setUsedQueryKit] = useState<boolean>(false);
-  const [explainJson, setExplainJson] = useState<string | null>(null);
+  const [, setExplainJson] = useState<string | null>(null);
   const [, setPlanningTimeMs] = useState<number | null>(null);
   const [, setExecutionTimeMs] = useState<number | null>(null);
-  const [explainError, setExplainError] = useState<string | null>(null);
+  const [, setExplainError] = useState<string | null>(null);
   const [dbExecutionMs, setDbExecutionMs] = useState<number | null>(null);
   const [, setParseTranslateMs] = useState<number | null>(null);
   const [, setExplainLatencyMs] = useState<number | null>(null);
   const [, setBaselineFetchMs] = useState<number | null>(null);
   const [hasCopiedSql, setHasCopiedSql] = useState(false);
-  const [showExplain, setShowExplain] = useState(false);
+  const [copiedSnippet, setCopiedSnippet] = useState<string | null>(null);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  // EXPLAIN view removed
   const [isResultsOpen, setIsResultsOpen] = useState(false);
   const sqlCardAnchorRef = useRef<HTMLDivElement | null>(null);
   const [drawerTopPx, setDrawerTopPx] = useState<number>(0);
+  const cardContentRef = useRef<HTMLDivElement | null>(null);
+  const [cardMaxHeightPx, setCardMaxHeightPx] = useState<number | null>(null);
   const COPY_FEEDBACK_MS = 2000;
 
+  const quickStartSections = useMemo(
+    () => [
+      {
+        id: 'install',
+        title: 'Install QueryKit',
+        description:
+          'Pull in QueryKit and the Drizzle adapter so you can follow along locally.',
+        code: INSTALL_SNIPPET,
+        language: 'bash'
+      },
+      {
+        id: 'schema',
+        title: 'Define your schema (schema.ts)',
+        description:
+          'Describe the table you want to search—QueryKit uses this shape to parse queries.',
+        code: SCHEMA_SNIPPET,
+        language: 'typescript'
+      },
+      {
+        id: 'usage',
+        title: 'Create QueryKit and run a search',
+        description:
+          'Instantiate QueryKit, build a Lucene-style query, and execute it against your DB.',
+        code: QUERYKIT_SNIPPET,
+        language: 'typescript'
+      }
+    ],
+    []
+  );
+
+  // Viewport info for small-height detection
+  const { isShortSideLessThan } = useViewportInfo();
+  const isShortViewport = isShortSideLessThan(390);
+
+  // Respect a ?drawer=open query param so the quick-start drawer can be shared
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const search = new URLSearchParams(window.location.search);
+    if (search.get('drawer') === 'open') {
+      setIsDrawerOpen(true);
+    }
+  }, []);
+
   // Register languages once
   useEffect(() => {
     try {
-      (
-        SyntaxHighlighter as unknown as typeof SyntaxHighlighter
-      ).registerLanguage('sql', sqlLanguage);
-      (
-        SyntaxHighlighter as unknown as typeof SyntaxHighlighter
-      ).registerLanguage('json', jsonLanguage);
+      const highlighter = SyntaxHighlighter as typeof SyntaxHighlighter & {
+        registerLanguage: (name: string, language: unknown) => void;
+      };
+      highlighter.registerLanguage('sql', sqlLanguage);
+      highlighter.registerLanguage('typescript', typescriptLanguage);
+      highlighter.registerLanguage('bash', bashLanguage);
     } catch (error) {
       console.error('Failed to register languages:', error);
     }
@@ -201,6 +298,7 @@ export default function Home(): JSX.Element {
         // Load initial data and show default query details
         const data = await db.select().from(tasks);
         setResults(data as Task[]);
+        setRowsScanned(data.length);
         setLastExecutedQuery('(default)');
         setGeneratedSQL('SELECT * FROM tasks');
         setDbReady(true);
@@ -252,13 +350,20 @@ export default function Home(): JSX.Element {
       setExplainLatencyMs(null);
       setBaselineFetchMs(null);
       const started = performance.now();
+      let baselineMs: number | null = null;
+      let localParseTranslateMs: number | null = null;
+      let localExplainLatencyMs: number | null = null;
+      let localDbExecutionMs: number | null = null;
+      let localRowsScanned: number | null = null;
 
       try {
         // Get all tasks count/base for messaging
         const baselineStart = performance.now();
         const allTasks = await db.select().from(tasks);
-        setBaselineFetchMs(performance.now() - baselineStart);
-        setRowsScanned(allTasks.length);
+        baselineMs = performance.now() - baselineStart;
+        setBaselineFetchMs(baselineMs);
+        localRowsScanned = allTasks.length;
+        setRowsScanned(localRowsScanned);
 
         // Use QueryKit fluent API to execute the query
         let filteredTasks: Task[] = allTasks as Task[];
@@ -275,6 +380,12 @@ export default function Home(): JSX.Element {
               'Query execution failed, falling back to simple search:',
               error
             );
+            void trackQueryKitIssue({
+              errorName: (error as Error)?.name ?? 'UnknownError',
+              errorMessage: (error as Error)?.message ?? 'Unknown',
+              stage: 'execute',
+              query: searchQuery
+            });
             const searchTerm = searchQuery.toLowerCase();
             filteredTasks = (allTasks as Task[]).filter(
               task =>
@@ -295,7 +406,8 @@ export default function Home(): JSX.Element {
             const translated = sqlTranslator.translate(ast) as
               | string
               | { sql: string; params: unknown[] };
-            setParseTranslateMs(performance.now() - parseStart);
+            localParseTranslateMs = performance.now() - parseStart;
+            setParseTranslateMs(localParseTranslateMs);
             whereSql =
               typeof translated === 'string' ? translated : translated.sql;
             mockSQL += ` WHERE ${whereSql}`;
@@ -333,7 +445,13 @@ export default function Home(): JSX.Element {
               return Array.from(found);
             };
             detectedOperators = extractOperators(whereSql);
-          } catch {
+          } catch (error) {
+            void trackQueryKitIssue({
+              errorName: (error as Error)?.name ?? 'UnknownError',
+              errorMessage: (error as Error)?.message ?? 'Unknown',
+              stage: 'translate',
+              query: searchQuery
+            });
             mockSQL += ` WHERE title ILIKE '%${searchQuery}%' OR status ILIKE '%${searchQuery}%'`;
             detectedOperators = ['ILIKE'];
           }
@@ -343,7 +461,12 @@ export default function Home(): JSX.Element {
         setLastExecutedQuery(searchQuery.trim() ? searchQuery : '(default)');
         setGeneratedSQL(mockSQL);
         setUsedQueryKit(wasQueryKitUsed);
-        setOperatorsUsed(Array.from(new Set(detectedOperators)));
+        const uniqueOperators = Array.from(new Set(detectedOperators));
+        void trackQueryKitUsage({
+          usedQueryKit: wasQueryKitUsed,
+          operators: uniqueOperators
+        });
+        setOperatorsUsed(uniqueOperators);
 
         // Try to run EXPLAIN ANALYZE to capture a plan (JSON format for easy parsing)
         try {
@@ -352,7 +475,8 @@ export default function Home(): JSX.Element {
           const explainCmd = `EXPLAIN (ANALYZE, BUFFERS, FORMAT JSON) ${fullSql}`;
           const explainStart = performance.now();
           const explainRows = await db.execute(sql.raw(explainCmd));
-          setExplainLatencyMs(performance.now() - explainStart);
+          localExplainLatencyMs = performance.now() - explainStart;
+          setExplainLatencyMs(localExplainLatencyMs);
           // Shape can vary. Try common Postgres JSON format: [{ "QUERY PLAN": [ { Plan: {...}, Planning Time: n, Execution Time: n } ] }]
           const firstRow = Array.isArray(explainRows)
             ? explainRows[0]
@@ -373,7 +497,10 @@ export default function Home(): JSX.Element {
                 : (jsonRoot?.ExecutionTime ?? null);
             if (typeof planning === 'number') setPlanningTimeMs(planning);
             if (typeof execution === 'number') setExecutionTimeMs(execution);
-            if (typeof execution === 'number') setDbExecutionMs(execution);
+            if (typeof execution === 'number') {
+              localDbExecutionMs = execution;
+              setDbExecutionMs(execution);
+            }
             setExplainJson(JSON.stringify(jsonRoot, null, 2));
           } else {
             // Some drivers return text rows when FORMAT JSON is not supported
@@ -387,12 +514,28 @@ export default function Home(): JSX.Element {
                 : JSON.stringify(textPlan, null, 2)
             );
           }
-        } catch {
+        } catch (error) {
+          void trackQueryKitIssue({
+            errorName: (error as Error)?.name ?? 'UnknownError',
+            errorMessage: (error as Error)?.message ?? 'Unknown',
+            stage: 'explain'
+          });
           setExplainError('EXPLAIN not available');
         }
 
         const elapsed = performance.now() - started;
         setLastExecutionMs(elapsed);
+        // Emit speed telemetry
+        void trackQueryKitSpeed({
+          usedQueryKit: wasQueryKitUsed,
+          baselineMs,
+          parseTranslateMs: localParseTranslateMs,
+          explainLatencyMs: localExplainLatencyMs,
+          dbExecutionMs: localDbExecutionMs,
+          totalMs: elapsed,
+          rowsScanned: localRowsScanned,
+          results: filteredTasks.length
+        });
 
         if (searchQuery.trim()) {
           toast(
@@ -403,6 +546,11 @@ export default function Home(): JSX.Element {
         }
       } catch (error) {
         console.error('Search failed:', error);
+        void trackQueryKitIssue({
+          errorName: (error as Error)?.name ?? 'UnknownError',
+          errorMessage: (error as Error)?.message ?? 'Unknown',
+          stage: 'search'
+        });
         toast('Search failed');
       } finally {
         setIsSearching(false);
@@ -486,19 +634,29 @@ export default function Home(): JSX.Element {
   // Copy SQL output
   const handleCopySql = useCallback(async () => {
     try {
-      const textToCopy = showExplain
-        ? (explainJson ?? 'EXPLAIN not available')
-        : formattedSQL || generatedSQL;
+      const textToCopy = formattedSQL || generatedSQL;
       await navigator.clipboard.writeText(textToCopy);
-      toast(
-        showExplain ? 'EXPLAIN copied to clipboard' : 'SQL copied to clipboard'
-      );
+      toast('SQL copied to clipboard');
       setHasCopiedSql(true);
       window.setTimeout(() => setHasCopiedSql(false), COPY_FEEDBACK_MS);
     } catch {
-      toast(showExplain ? 'Failed to copy EXPLAIN' : 'Failed to copy SQL');
+      toast('Failed to copy SQL');
     }
-  }, [formattedSQL, generatedSQL, explainJson, showExplain]);
+  }, [formattedSQL, generatedSQL]);
+
+  const handleCopySnippet = useCallback(
+    async (id: string, content: string) => {
+      try {
+        await navigator.clipboard.writeText(content);
+        toast('Copied to clipboard');
+        setCopiedSnippet(id);
+        window.setTimeout(() => setCopiedSnippet(null), COPY_FEEDBACK_MS);
+      } catch {
+        toast('Failed to copy code');
+      }
+    },
+    [COPY_FEEDBACK_MS]
+  );
 
   // Add Cmd+K keyboard shortcut to focus the inline input
   useEffect(() => {
@@ -528,8 +686,29 @@ export default function Home(): JSX.Element {
     return (): void => window.removeEventListener('resize', onResize);
   }, [lastExecutedQuery]);
 
+  // Cap the entire card content so its bottom does not go past the viewport.
+  // The SQL/EXPLAIN viewer becomes the scrollable area that flexes.
+  useEffect(() => {
+    const measureCard = (): void => {
+      const el = cardContentRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      // Align bottom with the floating "Results" button which uses bottom-10 (2.5rem = 40px)
+      const RESULTS_BUTTON_BOTTOM_PX = 40;
+      const available = Math.max(
+        160,
+        window.innerHeight - rect.top - RESULTS_BUTTON_BOTTOM_PX
+      );
+      setCardMaxHeightPx(available);
+    };
+    const onResize = (): number => requestAnimationFrame(measureCard);
+    measureCard();
+    window.addEventListener('resize', onResize);
+    return (): void => window.removeEventListener('resize', onResize);
+  }, [lastExecutedQuery, results.length]);
+
   return (
-    <div className="relative min-h-[100svh] h-[100svh] flex flex-col items-center justify-start px-6 bg-transparent overflow-hidden pt-[10svh] sm:pt-[33svh]">
+    <div className="relative min-h-[100svh] h-[100svh] w-[100svw] overflow-hidden flex flex-col items-center justify-start px-6 bg-transparent pt-[10svh] sm:pt-[33svh]">
       {/* Aurora background */}
       <div className="fixed inset-0 -z-10 pointer-events-none">
         <Aurora amplitude={1.0} blend={0.6} speed={0.4} />
@@ -551,9 +730,112 @@ export default function Home(): JSX.Element {
             QueryKit
           </h1>
           <p className="text-base sm:text-lg text-muted-foreground mt-2">
-            Try filtering tasks with the QueryKit DSL. Press ⌘K to start.
+            A type-safe search DSL for React apps. Filter the table and see the
+            SQL it generates.
           </p>
         </div>
+        <div className="flex justify-center">
+          <Drawer
+            direction="right"
+            open={isDrawerOpen}
+            onOpenChange={open => {
+              setIsDrawerOpen(open);
+              if (!open) {
+                setCopiedSnippet(null);
+              }
+            }}
+          >
+            <DrawerTrigger asChild>
+              <button
+                type="button"
+                className="inline-flex items-center gap-2 rounded-full bg-transparent px-5 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                aria-label="Open the QueryKit getting started guide"
+              >
+                <FileCode className="h-4 w-4" />
+                Getting started
+              </button>
+            </DrawerTrigger>
+            <DrawerContent className="data-[vaul-drawer-direction=right]:h-full data-[vaul-drawer-direction=right]:w-full data-[vaul-drawer-direction=right]:max-w-full data-[vaul-drawer-direction=right]:sm:max-w-xl data-[vaul-drawer-direction=right]:rounded-l-3xl">
+              <div className="flex h-full flex-col">
+                <DrawerHeader className="relative pb-2 text-left px-4 sm:px-6">
+                  <DrawerTitle>Get started with QueryKit</DrawerTitle>
+                  <DrawerDescription>
+                    Install the packages, describe your data, and run your first
+                    QueryKit search with the snippets below.
+                  </DrawerDescription>
+                  <DrawerClose asChild>
+                    <button
+                      type="button"
+                      className="absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md border bg-background text-muted-foreground transition-colors hover:bg-accent sm:right-6"
+                      aria-label="Close view code drawer"
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  </DrawerClose>
+                </DrawerHeader>
+                <div className="flex-1 space-y-5 overflow-y-auto px-4 pb-4 sm:px-6">
+                  {quickStartSections.map(section => (
+                    <div key={section.id} className="space-y-2">
+                      <div className="space-y-1">
+                        <div className="text-sm font-medium">
+                          {section.title}
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                          {section.description}
+                        </p>
+                      </div>
+                      <div
+                        role="region"
+                        aria-label={`${section.title} code example`}
+                        className="relative overflow-hidden rounded-md border bg-muted"
+                      >
+                        <button
+                          type="button"
+                          onClick={() =>
+                            handleCopySnippet(section.id, section.code)
+                          }
+                          aria-label={`Copy ${section.title}`}
+                          title={`Copy ${section.title}`}
+                          className={cn(
+                            'absolute right-2 inline-flex h-8 w-8 items-center justify-center rounded-md border border-transparent bg-transparent text-muted-foreground transition-colors hover:bg-muted/60 sm:right-3',
+                            section.code.includes('\n')
+                              ? 'top-2 sm:top-3'
+                              : 'top-1/2 -translate-y-1/2 sm:top-1/2 sm:-translate-y-1/2'
+                          )}
+                        >
+                          <Copy
+                            className={`h-4 w-4 transition-all duration-200 ${
+                              copiedSnippet === section.id
+                                ? 'opacity-0 scale-90'
+                                : 'opacity-100 scale-100'
+                            }`}
+                          />
+                          <Check
+                            className={`absolute h-4 w-4 text-emerald-500 transition-all duration-200 ${
+                              copiedSnippet === section.id
+                                ? 'opacity-100 scale-100'
+                                : 'opacity-0 scale-110'
+                            }`}
+                          />
+                        </button>
+                        <div className="h-full overflow-auto">
+                          <SyntaxHighlighter
+                            language={section.language}
+                            style={atomOneDarkReasonable}
+                            wrapLongLines
+                            className="quick-start-snippet"
+                          >
+                            {section.code}
+                          </SyntaxHighlighter>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </DrawerContent>
+          </Drawer>
+        </div>
         {/* Inline search input with recommendation popover */}
         <div className="relative z-50 w-full">
           <div className="flex items-center gap-2 rounded-2xl border bg-background shadow-sm px-3 py-2">
@@ -563,7 +845,7 @@ export default function Home(): JSX.Element {
               {query && (
                 <div
                   aria-hidden
-                  className="pointer-events-none absolute inset-0 z-0 whitespace-pre text-sm leading-[1.25rem] text-foreground/90 flex items-center"
+                  className="pointer-events-none absolute inset-0 z-0 whitespace-pre text-base leading-[1.25rem] text-foreground/90 flex items-center"
                   dangerouslySetInnerHTML={{
                     __html: highlightQueryHtml(query)
                   }}
@@ -595,8 +877,9 @@ export default function Home(): JSX.Element {
                     }
                   }, 0);
                 }}
-                placeholder="Search tasks with QueryKit (Press Enter to search)"
-                className={`placeholder:text-muted-foreground relative z-10 flex h-10 w-full rounded-md bg-transparent text-sm leading-[1.25rem] outline-none ${query ? 'text-transparent caret-foreground' : ''}`}
+                placeholder="Search QueryKit with key:value"
+                inputMode="search"
+                className={`placeholder:text-muted-foreground relative z-10 flex h-10 w-full rounded-md bg-transparent text-base leading-[1.25rem] outline-none ${query ? 'text-transparent caret-foreground' : ''}`}
               />
             </div>
             <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
@@ -649,88 +932,105 @@ export default function Home(): JSX.Element {
           <Card className="w-full">
             {lastExecutedQuery && (
               <CardContent>
-                <div className="relative bg-muted p-3 rounded-md">
-                  <button
-                    type="button"
-                    onClick={() => setShowExplain(v => !v)}
-                    aria-label={
-                      showExplain ? 'Show SQL' : 'Show EXPLAIN ANALYZE'
-                    }
-                    title={showExplain ? 'Show SQL' : 'Show EXPLAIN ANALYZE'}
-                    className={`absolute top-2 right-10 z-10 inline-flex items-center justify-center rounded-md hover:bg-accent/30 transition-colors h-7 w-7 ${showExplain ? 'bg-accent/40' : ''}`}
-                  >
-                    <SearchCode className="h-4 w-4" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleCopySql}
-                    aria-label={showExplain ? 'Copy EXPLAIN' : 'Copy SQL'}
-                    title={showExplain ? 'Copy EXPLAIN' : 'Copy SQL'}
-                    className="absolute top-2 right-2 z-10 inline-flex items-center justify-center rounded-md hover:bg-accent/30 transition-colors h-7 w-7"
-                  >
-                    <Copy
-                      className={`h-4 w-4 transition-all duration-200 ${hasCopiedSql ? 'opacity-0 scale-90' : 'opacity-100 scale-100'}`}
-                    />
-                    <Check
-                      className={`h-4 w-4 absolute transition-all duration-200 ${hasCopiedSql ? 'opacity-100 scale-100' : 'opacity-0 scale-110'}`}
-                    />
-                  </button>
-                  <SyntaxHighlighter
-                    language={showExplain ? 'json' : 'sql'}
-                    style={atomOneDarkReasonable}
-                    customStyle={{ background: 'transparent', margin: 0 }}
-                    wrapLongLines
-                  >
-                    {showExplain
-                      ? (explainJson ?? explainError ?? 'EXPLAIN not available')
-                      : formattedSQL}
-                  </SyntaxHighlighter>
-                </div>
-                <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
-                  <div className="rounded-md border p-3 bg-background/50">
-                    <div className="text-xs text-muted-foreground">
-                      DB time (EXPLAIN)
-                    </div>
-                    <div className="mt-1 text-base font-medium">
-                      {dbExecutionMs !== null
-                        ? `${dbExecutionMs.toFixed(3)} ms`
-                        : '-'}
+                <div
+                  ref={cardContentRef}
+                  className="flex flex-col overflow-hidden"
+                  style={{
+                    maxHeight: cardMaxHeightPx
+                      ? `${cardMaxHeightPx}px`
+                      : undefined
+                  }}
+                >
+                  <div className="relative bg-muted p-3 pr-12 rounded-md flex-1 min-h-0">
+                    <button
+                      type="button"
+                      onClick={handleCopySql}
+                      aria-label={'Copy SQL'}
+                      title={'Copy SQL'}
+                      className="absolute top-2 right-2 z-10 inline-flex items-center justify-center rounded-md hover:bg-accent/30 transition-colors h-7 w-7"
+                    >
+                      <Copy
+                        className={`h-4 w-4 transition-all duration-200 ${hasCopiedSql ? 'opacity-0 scale-90' : 'opacity-100 scale-100'}`}
+                      />
+                      <Check
+                        className={`h-4 w-4 absolute transition-all duration-200 ${hasCopiedSql ? 'opacity-100 scale-100' : 'opacity-0 scale-110'}`}
+                      />
+                    </button>
+                    <div className="h-full overflow-auto">
+                      <SyntaxHighlighter
+                        language={'sql'}
+                        style={atomOneDarkReasonable}
+                        customStyle={{
+                          background: 'transparent',
+                          margin: 0,
+                          whiteSpace: 'pre-wrap',
+                          wordBreak: 'break-word',
+                          overflowWrap: 'anywhere'
+                        }}
+                        wrapLongLines
+                      >
+                        {formattedSQL}
+                      </SyntaxHighlighter>
                     </div>
                   </div>
-                  <div className="rounded-md border p-3 bg-background/50">
-                    <div className="text-xs text-muted-foreground">
-                      Rows returned
+                  <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
+                    {!isShortViewport && (
+                      <div className="rounded-md border p-3 bg-background/50">
+                        <div className="text-xs text-muted-foreground">
+                          DB time (EXPLAIN)
+                        </div>
+                        <div className="mt-1 text-base font-medium">
+                          {dbExecutionMs !== null
+                            ? `${dbExecutionMs.toFixed(3)} ms`
+                            : '-'}
+                        </div>
+                      </div>
+                    )}
+                    <div className="rounded-md border p-3 bg-background/50">
+                      <div className="text-xs text-muted-foreground">
+                        Rows returned
+                      </div>
+                      <div className="mt-1 text-base font-medium">{`${results.length} of ${rowsScanned ?? results.length}`}</div>
                     </div>
-                    <div className="mt-1 text-base font-medium">{`${results.length} of ${rowsScanned ?? '-'}`}</div>
+                    {!isShortViewport && (
+                      <div className="rounded-md border p-3 bg-background/50">
+                        <div className="text-xs text-muted-foreground">
+                          Engine
+                        </div>
+                        <div className="mt-1">
+                          <span className="inline-flex items-center rounded-full border px-2 py-0.5 text-xs bg-muted">
+                            {usedQueryKit
+                              ? 'QueryKit · Drizzle'
+                              : 'Client fallback'}
+                          </span>
+                        </div>
+                      </div>
+                    )}
                   </div>
-                  <div className="rounded-md border p-3 bg-background/50">
-                    <div className="text-xs text-muted-foreground">Engine</div>
-                    <div className="mt-1">
-                      <span className="inline-flex items-center rounded-full border px-2 py-0.5 text-xs bg-muted">
-                        {usedQueryKit
-                          ? 'QueryKit · Drizzle'
-                          : 'Client fallback'}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-3">
-                  <div className="text-xs text-muted-foreground mb-1">
-                    Detected operators
-                  </div>
-                  {operatorsUsed.length ? (
-                    <div className="flex flex-wrap gap-2">
-                      {operatorsUsed.map(op => (
-                        <span
-                          key={op}
-                          className="inline-flex items-center rounded-full border bg-muted px-2 py-0.5 text-xs font-medium"
-                        >
-                          {op}
-                        </span>
-                      ))}
+                  {!isShortViewport ? (
+                    <div className="mt-3">
+                      <div className="text-xs text-muted-foreground mb-1">
+                        Detected operators
+                      </div>
+                      {operatorsUsed.length ? (
+                        <div className="flex flex-wrap gap-2">
+                          {operatorsUsed.map(op => (
+                            <span
+                              key={op}
+                              className="inline-flex items-center rounded-full border bg-muted px-2 py-0.5 text-xs font-medium"
+                            >
+                              {op}
+                            </span>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="text-xs text-muted-foreground">-</div>
+                      )}
                     </div>
                   ) : (
-                    <div className="text-xs text-muted-foreground">-</div>
+                    <div className="mt-3 text-xs text-muted-foreground">
+                      View on larger screen for more details
+                    </div>
                   )}
                 </div>
                 {/* EXPLAIN has been integrated into the SQL window via the SearchCode toggle */}
@@ -741,19 +1041,21 @@ export default function Home(): JSX.Element {
       </div>
 
       {/* Toggle button to open results drawer */}
-      <button
-        type="button"
-        onClick={() => setIsResultsOpen(v => !v)}
-        aria-expanded={isResultsOpen}
-        aria-controls="results-drawer"
-        title={isResultsOpen ? 'Hide results' : 'Show results'}
-        className="fixed bottom-10 left-1/2 -translate-x-1/2 z-[70] inline-flex items-center justify-center rounded-full border bg-background shadow px-3 py-2 text-xs hover:bg-accent transition-colors"
-      >
-        <ChevronUp
-          className={`h-4 w-4 transition-transform ${isResultsOpen ? 'rotate-180' : ''}`}
-        />
-        <span className="ml-2">{isResultsOpen ? 'Hide' : 'Results'}</span>
-      </button>
+      {!isDrawerOpen && (
+        <button
+          type="button"
+          onClick={() => setIsResultsOpen(v => !v)}
+          aria-expanded={isResultsOpen}
+          aria-controls="results-drawer"
+          title={isResultsOpen ? 'Hide results' : 'Show results'}
+          className="fixed bottom-10 left-1/2 -translate-x-1/2 z-[70] inline-flex items-center justify-center rounded-full border bg-background shadow px-3 py-2 text-xs hover:bg-accent transition-colors"
+        >
+          <ChevronUp
+            className={`h-4 w-4 transition-transform ${isResultsOpen ? 'rotate-180' : ''}`}
+          />
+          <span className="ml-2">{isResultsOpen ? 'Hide' : 'Results'}</span>
+        </button>
+      )}
 
       {/* Bottom drawer with results table */}
       {isResultsOpen && (