d1s 0.2.1

package/src/components/push-error-alert.jsx

@@ -0,0 +1,72 @@
+// components/push-error-alert.jsx
+'use client';
+
+import React from 'react';
+import { AlertCircle, X, ChevronDown, ChevronUp } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+
+export const PushErrorAlert = ({ error, onDismiss }) => {
+  const [showSuggestions, setShowSuggestions] = React.useState(true);
+
+  if (!error) return null;
+
+  // Ensure error message is visible by scrolling to it
+  useEffect(() => {
+    if (error) {
+      const alertElement = document.querySelector('.alert-push-error');
+      alertElement?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [error]);
+
+  return (
+    <Alert variant="destructive" className="mt-4 mb-4 alert-push-error">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle className="flex items-center justify-between">
+        <span>{error.message}</span>
+        {onDismiss && (
+          <button 
+            onClick={onDismiss}
+            className="p-1 hover:bg-destructive/10 rounded-full"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </AlertTitle>
+      
+      <AlertDescription className="mt-2">
+        <Collapsible 
+          open={showSuggestions} 
+          onOpenChange={setShowSuggestions}
+          className="space-y-2"
+        >
+          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium">
+            {showSuggestions ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+            Suggested Actions
+          </CollapsibleTrigger>
+          
+          <CollapsibleContent className="space-y-2">
+            {error.details?.suggestions?.map((suggestion, index) => (
+              <div 
+                key={index}
+                className="text-sm text-destructive-foreground/80 pl-6"
+              >
+                • {suggestion}
+              </div>
+            ))}
+          </CollapsibleContent>
+        </Collapsible>
+
+        {error.details?.error && (
+          <div className="mt-4 text-sm font-mono bg-destructive/10 p-2 rounded">
+            {error.details.error}
+          </div>
+        )}
+      </AlertDescription>
+    </Alert>
+  );
+};

package/src/components/push-preview-toast.jsx

@@ -0,0 +1,183 @@
+// components/push-preview-toast.jsx
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Loader2, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function PushPreviewToast({ 
+   preview = [],
+   onConfirm,      
+   onCancel,       
+   isConfirming,   
+   error,
+   isLoading,
+   success     
+ }) {
+  const [isDetailsOpen, setIsDetailsOpen] = useState(true);
+
+  // Handle loading state
+  if (isLoading) {
+    return (
+      <div className="fixed bottom-4 right-4 z-50 font-sans w-[600px]">
+        <div className="rounded-lg border p-4 shadow-lg bg-background">
+          <div className="flex items-start gap-3">
+            <Loader2 className="h-5 w-5 text-neutral-600 shrink-0 mt-0.5 animate-spin" />
+            <div className="flex-1 space-y-3">
+              <div className="space-y-1">
+                <p className="font-medium text-neutral-800">
+                  Preparing Push Migration
+                </p>
+                <p className="text-sm text-neutral-600">
+                  Checking local migrations...
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!preview?.length) {
+    return (
+      <div className="fixed bottom-4 right-4 z-50 w-[600px]">
+        <div className="rounded-lg border p-4">
+          <p className="text-sm font-medium">No migrations to preview</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Calculate migration stats
+  const pendingCount = preview.filter(m => m.action === 'will be applied').length;
+  const skippedCount = preview.filter(m => m.action === 'skipped').length;
+  const appliedCount = preview.filter(m => m.action === 'applied').length;
+
+  // Get status style based on action
+  const getStatusEmoji = (action) => {
+    switch (action) {
+      case 'will be applied':
+        return '🕒️';
+      case 'applied':
+      case 'skipped':
+        return '✅';
+      case 'failed':
+        return '❌';
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 font-sans w-[600px]">
+      <div className={cn(
+        "rounded-lg border p-4 shadow-lg", 
+        error ? "bg-destructive/15" : "bg-background"
+      )}>
+        <div className="flex flex-col gap-3">
+          {/* Header */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+                <h5 className="font-medium text-neutral-900">
+                  Push Migration Preview
+                </h5>
+                <button
+                  onClick={onCancel}
+                  className="text-neutral-500 hover:text-neutral-900 p-1 rounded-md hover:bg-neutral-100"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+            <p className="text-sm text-neutral-700">
+              {pendingCount} migration(s) 🕒️ pending, {skippedCount} to ✅ skip
+            </p>
+            {/* Status Messages */}
+            {error ? (
+              <p className="text-sm text-destructive font-medium mt-1">
+                {error.message}
+              </p>
+            ) : success && (
+              <p className="text-sm text-green-700 font-medium mt-1">
+                {success}
+              </p>
+            )}
+          </div>
+
+          {/* Migration Details */}
+          <div>
+            <button 
+              onClick={() => setIsDetailsOpen(!isDetailsOpen)}
+              className="text-sm font-medium hover:underline"
+            >
+              {isDetailsOpen ? 'Hide Details' : 'Show Details'}
+            </button>
+
+            {isDetailsOpen && (
+              <ScrollArea className="h-[480px] mt-2 rounded border border-neutral-200">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Migration</TableHead>
+                      <TableHead className="text-center w-24">Status</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {preview.map((item, index) => (
+                      <TableRow key={index}>
+                        <TableCell className="font-mono text-xs">
+                          {item.name}
+                        </TableCell>
+                        <TableCell className="text-center align-middle">
+                          {getStatusEmoji(item.action)}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </ScrollArea>
+            )}
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex gap-2 pt-1">
+            <Button
+              onClick={onConfirm}
+              disabled={isConfirming || pendingCount === 0}
+              className="flex-1"
+            >
+              {isConfirming ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Confirming...
+                </>
+              ) : (
+                'Confirm Push'
+              )}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={onCancel}
+              disabled={isConfirming}
+              className="flex-1"
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PushPreviewToast;

package/src/components/query-results.jsx

@@ -0,0 +1,112 @@
+'use client';
+
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+
+function QuerySummary({ results }) {
+  if (!results || !Array.isArray(results)) return null;
+
+  return (
+    <div className="text-xs font-medium text-neutral-900 flex items-center gap-2 mb-2">
+      {results.length} {results.length === 1 ? 'row' : 'rows'} returned
+    </div>
+  );
+}
+
+/**
+ * SQLErrorDisplay now logs the error object received from the parent.
+ * It safely handles null/undefined errors and logs them to the console.
+ */
+export function SQLErrorDisplay({ error }) {
+  console.debug("SQLErrorDisplay - Received error prop:", error);
+  // Create a safe fallback error object if needed.
+  const safeError =
+    error && typeof error.message === 'string'
+      ? error
+      : { message: 'An unknown error occurred', details: {} };
+
+  return (
+    <div>
+      <div className="text-neutral-700 text-sm">{safeError.message}</div>
+      {safeError.details?.stderr && (
+        <pre className="mt-2 p-2 text-xs text-red-500 whitespace-pre-wrap">
+          {safeError.details.stderr}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+export function SQLResultsView({ query, results }) {
+  if (!results?.length) {
+    return (
+      <div className="text-sm text-neutral-500">
+        No results to display.
+      </div>
+    );
+  }
+
+  // Detect if the query is a PRAGMA table_info query
+  const isSchemaQuery = query?.trim().toLowerCase().startsWith('pragma table_info');
+
+  // Define columns for schema queries
+  const schemaColumns = isSchemaQuery
+    ? ['Column Name', 'Type', 'Not Null', 'Default Value', 'Primary Key']
+    : Object.keys(results[0]);
+
+  // Format schema rows if it's a schema query
+  const formattedResults = isSchemaQuery
+    ? results.map((row) => ({
+        'Column Name': row.name,
+        'Type': row.type,
+        'Not Null': row.notnull === 1 ? 'YES' : 'NO',
+        'Default Value': row.dflt_value || '(null)',
+        'Primary Key': row.pk === 1 ? 'YES' : 'NO',
+      }))
+    : results;
+
+  return (
+    <div className="flex flex-col h-full">
+      <QuerySummary results={formattedResults} />
+      <div className="flex-1 overflow-auto border rounded-lg">
+        <div className="min-w-full">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/50">
+                {schemaColumns.map((column) => (
+                  <TableHead 
+                    key={column} 
+                    className="font-mono text-xs font-medium text-muted-foreground"
+                  >
+                    {column}
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {formattedResults.map((row, rowIndex) => (
+                <TableRow key={rowIndex} className="hover:bg-muted/50">
+                  {schemaColumns.map((column) => {
+                    const value = row[column];
+                    const displayValue = value === null ? '(null)' : String(value);
+
+                    return (
+                      <TableCell 
+                        key={`${rowIndex}-${column}`} 
+                        className="font-monospace text-xs whitespace-nowrap"
+                      >
+                        {displayValue}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SQLResultsView;

package/src/components/refresh-button.jsx

@@ -0,0 +1,61 @@
+// components/refresh-button.jsx
+'use client';
+
+import React, { memo, useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { RefreshCw, Loader2 } from 'lucide-react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const RefreshButton = memo(({ onRefresh, disabled }) => {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRefresh = async () => {
+    if (isRefreshing || disabled) return;
+
+    setIsRefreshing(true);
+    try {
+      await onRefresh();
+    } catch (error) {
+      console.error('Refresh failed:', error);
+    } finally {
+      // Add a small delay before allowing another refresh
+      setTimeout(() => {
+        setIsRefreshing(false);
+      }, 500);
+    }
+  };
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button 
+            variant="outline" 
+            size="icon" 
+            onClick={handleRefresh}
+            disabled={isRefreshing || disabled}
+            className="h-8"
+          >
+            {isRefreshing ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Refresh table data</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+});
+
+RefreshButton.displayName = 'RefreshButton';
+
+export default RefreshButton;

package/src/components/resize-columns.jsx

@@ -0,0 +1,101 @@
+// components/resize-columns.jsx
+'use client';
+
+import React, { useState, useCallback, useRef } from 'react';
+
+const MIN_COLUMN_WIDTH = 100;
+
+/**
+ * A resizable table header component.
+ */
+export const ResizableHeader = ({ 
+  children, 
+  width, 
+  onResize,
+  className = "" 
+}) => {
+  const [isResizing, setIsResizing] = useState(false);
+  const headerRef = useRef(null);
+
+  const startResizing = useCallback((e) => {
+    e.preventDefault();
+    setIsResizing(true);
+
+    const startX = e.clientX;
+    const startWidth = headerRef.current?.offsetWidth || 0;
+
+    const handleMouseMove = (e) => {
+      if (!headerRef.current) return;
+
+      // Calculate the new width based on mouse movement
+      const diff = e.clientX - startX;
+      const newWidth = Math.max(startWidth + diff, MIN_COLUMN_WIDTH);
+
+      // Update only the current column's width
+      onResize(newWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  }, [onResize]); 
+
+  return (
+    <th 
+      ref={headerRef}
+      className={`relative ${className} ${isResizing ? 'select-none' : ''}`}
+      style={{ width: `${width}px` }} 
+    >
+      {children}
+      <div
+        className="absolute top-0 right-0 h-full w-1 cursor-col-resize group hover:bg-neutral-300"
+        onMouseDown={startResizing}
+      />
+    </th>
+  );
+};
+
+/**
+ * A resizable table wrapper component.
+ */
+export const ResizableTable = ({ 
+  columns,
+  children,
+  onColumnsResize,
+  className = ""
+}) => {
+  const [columnWidths, setColumnWidths] = useState(
+    columns.reduce((acc, col) => ({
+      ...acc,
+      [col.key]: col.width || 150
+    }), {})
+  );
+
+  const handleColumnResize = useCallback((columnKey, newWidth) => {
+    setColumnWidths((prev) => {
+      const updated = { ...prev, [columnKey]: newWidth };
+      onColumnsResize?.(updated); // Notify parent of updated widths
+      return updated;
+    });
+  }, [onColumnsResize]);
+
+  return (
+    <div className={`w-full ${className}`}>
+      {React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, {
+            onResize: handleColumnResize, // ✅ Only pass valid props
+          });
+        }
+        return child;
+      })}
+    </div>
+  );
+};
+
+export default ResizableTable;