d1s 0.2.11 → 0.2.13

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

@@ -1,215 +0,0 @@
-// components/pull-preview-toast.jsx
-
-import React, { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { FileText, Loader2, X } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-export function PullPreviewToast({
-  preview = [],
-  onConfirm,
-  onCancel,
-  onDataPull,
-  isConfirming,
-  isDataPulling,
-  error,
-  isLoading,
-  success,
-}) {
-  console.log("PullPreviewToast rendered with:", {
-    previewLength: preview.length,
-    isConfirming,
-    error,
-    isLoading,
-  });
-
-  useEffect(() => {
-    console.log("PullPreviewToast mounted/updated");
-    return () => console.log("PullPreviewToast unmounted");
-  }, []);
-
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-
-  // Loading state
-  if (isLoading) {
-    console.log("Rendering loading state");
-    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 Pull Migration
-                </p>
-                <p className="text-sm text-neutral-600">
-                  Checking remote migrations...
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!preview?.length) {
-    console.log("No preview data available");
-    return (
-      <div className="fixed bottom-4 right-4 z-50 w-[600px]">
-        <div className="rounded-lg border bg-destructive/15 p-4">
-          <div className="flex items-center gap-2">
-            <p className="text-sm font-medium text-destructive">
-              No preview data available
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Filter migrations to only include files with a ".sql" extension
-  const sqlMigrations = preview.filter((item) => {
-    const migrationName = item.migration || item.name || "";
-    return migrationName.endsWith(".sql");
-  });
-
-  // Count only SQL migrations for the header
-  const totalMigrations = sqlMigrations.length;
-  console.log("Migration stats:", { totalMigrations });
-
-  // Determine if sync button should be enabled
-  // Only enable if pull was successful and not currently pulling data
-  const isSyncEnabled = success && !isDataPulling && !error;
-
-  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 items-start gap-x-1">
-          <div className="flex-1 space-y-3">
-            {/* Header with Close Button */}
-            <div className="space-y-1">
-              <div className="flex items-center justify-between">
-                <h5
-                  className={cn(
-                    "font-medium",
-                    error ? "text-destructive" : "text-neutral-900"
-                  )}
-                >
-                  {error ? "Pull Migration Error" : "Pull 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={cn(
-                  "text-sm",
-                  error ? "text-destructive/80" : "text-neutral-700"
-                )}
-              >
-                {`${totalMigrations} migration(s) will be applied`}
-              </p>
-              {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">
-                  <div className="w-full">
-                    <div className="bg-neutral-50 border-b px-4 py-2">
-                      <div className="text-sm font-medium text-neutral-600">Migration</div>
-                    </div>
-                    <div>
-                      {sqlMigrations.map((item, index) => (
-                        <div
-                          key={index}
-                          className="px-4 py-2 border-b last:border-0"
-                        >
-                          <div className="font-mono text-xs">
-                            {item.migration || item.name}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </ScrollArea>
-              )}
-            </div>
-
-            {/* Action Buttons */}
-            <div className="flex flex-col gap-2 pt-1">
-              <div className="flex gap-2">
-              <Button
-                  onClick={onConfirm}
-                  disabled={isConfirming}
-                  className={`flex-1 ${isConfirming ? "cursor-not-allowed opacity-50" : ""}`}
-                >
-                  {isConfirming ? (
-                    <>
-                      <Loader2 className="h-4 w-4 animate-spin" />
-                      Confirming...
-                    </>
-                  ) : (
-                    "Confirm Pull"
-                  )}
-                </Button>
-
-                {/* Right column - Sync data and description */}
-                <div className="flex-1 flex flex-col gap-2">
-                <Button
-                    onClick={onDataPull}
-                    disabled={!isSyncEnabled}
-                    variant="outline"
-                    className={`w-full ${!isSyncEnabled ? "cursor-not-allowed opacity-50" : ""}`}
-                  >
-                    {isDataPulling ? (
-                      <>
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                        Syncing remote data...
-                      </>
-                    ) : (
-                      "Sync remote data"
-                    )}
-                  </Button>
-                  <p className="text-xs text-neutral-500 text-center">
-                     75 records per table
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default PullPreviewToast;

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

@@ -1,72 +0,0 @@
-// 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

@@ -1,183 +0,0 @@
-// 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

@@ -1,112 +0,0 @@
-'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

@@ -1,61 +0,0 @@
-// 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;