d1s 0.2.11 → 0.2.12

package/src/components/sql-editor.jsx

@@ -1,411 +0,0 @@
-'use client';
-
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import Editor from '@monaco-editor/react';
-import { Loader2, Command, CornerDownLeft, GripHorizontal, ChevronDown } from 'lucide-react';
-import { Button } from "@/components/ui/button";
-import { useDatabase } from '@/context/database-context';
-import { SQLResultsView, SQLErrorDisplay } from './query-results';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { parseSQLError } from '@/lib/parse-sql-error'; 
-
-// Helpful predefined queries
-const HELPFUL_QUERIES = {
-  // Table listing queries
-  'Show Tables': `SELECT name
-    FROM sqlite_master 
-    WHERE type='table' 
-    AND name NOT LIKE 'sqlite_%';`,
-  
-  // Schema queries
-  'Table Schema': `-- Table Schema
--- Replace table_name with your table name
-PRAGMA table_info(table_name);`,
-
-  'Table Indexes': `-- Table Indexes
--- Replace table_name with your table name
-SELECT 
-  m.name as table_name,
-  i.name as index_name,
-  i.sql as index_definition
-FROM sqlite_master m
-JOIN sqlite_master i ON m.name = i.tbl_name
-WHERE m.type = 'table'
-AND i.type = 'index'
-AND m.name = 'table_name';`,
-
-  'Foreign Keys': `-- Foreign Key Information
--- Replace table_name with your table name
-PRAGMA foreign_key_list(table_name);`,
-
-  // Data queries
-  'Table Data': `-- Table Data
--- Replace table_name with your table name
-SELECT * FROM table_name LIMIT 100;`,
-
-  'Row Count': `-- Row Count
--- Replace table_name with your table name
-SELECT COUNT(*) as total_rows FROM table_name;`,
-
-  'Column Stats': `-- Column Statistics
--- Replace table_name and column_name with your values
-SELECT 
-  COUNT(*) as total_rows,
-  COUNT(column_name) as non_null_count,
-  COUNT(DISTINCT column_name) as unique_values,
-  MIN(column_name) as min_value,
-  MAX(column_name) as max_value
-FROM table_name;`,
-
-  // Schema modification
-  'Create Table': `CREATE TABLE IF NOT EXISTS new_table (
-  id INTEGER PRIMARY KEY AUTOINCREMENT,
-  name TEXT NOT NULL,
-  email TEXT UNIQUE,
-  status TEXT CHECK(status IN ('active', 'inactive')) DEFAULT 'active',
-  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
-
--- Create indexes
-CREATE INDEX idx_new_table_name ON new_table(name);
-CREATE UNIQUE INDEX idx_new_table_email ON new_table(email);`,
-
-  'Create View': `-- Create a view
-CREATE VIEW view_name AS
-SELECT column1, column2
-FROM table_name
-WHERE condition;`
-};
-
-// Query categories for organization
-const QUERY_CATEGORIES = {
-  'Schema Information': ['Show Tables', 'Table Schema', 'Table Indexes', 'Foreign Keys'],
-  'Data Queries': ['Table Data', 'Row Count', 'Column Stats'],
-  'Schema Modification': ['Create Table', 'Create View']
-};
-
-function QueryTemplateMenu({ onSelectQuery }) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="sm">
-          Query Templates
-          <ChevronDown className="ml-2 h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-72">
-        {Object.entries(QUERY_CATEGORIES).map(([category, queryNames]) => (
-          <React.Fragment key={category}>
-            <div className="px-2 py-1.5 text-sm font-semibold text-neutral-900 font-sans">
-              {category}
-            </div>
-            {queryNames.map((queryName) => (
-              <DropdownMenuItem
-                key={queryName}
-                onClick={() => onSelectQuery(queryName)}
-                className="font-sans text-neutral-800"
-              >
-                {queryName}
-              </DropdownMenuItem>
-            ))}
-          </React.Fragment>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-export function SQLEditor() {
-  const { executeQuery, refreshTables } = useDatabase();
-  const [queryResult, setQueryResult] = useState(null);
-  const [isExecuting, setIsExecuting] = useState(false);
-  const [editorHeight, setEditorHeight] = useState(300);
-  const [isResizing, setIsResizing] = useState(false);
-  const editorRef = useRef(null);
-  const panelRef = useRef(null);
-
-  // Update the height of the panel on editorHeight change
-  useEffect(() => {
-    if (panelRef.current) {
-      panelRef.current.style.height = `${editorHeight}px`;
-    }
-  }, [editorHeight]);
-
-  // Resizing logic for editor
-  const startResizing = useCallback((mouseDownEvent) => {
-    mouseDownEvent.preventDefault();
-
-    const startHeight = editorHeight;
-    const startY = mouseDownEvent.pageY;
-
-    const onMouseMove = (mouseMoveEvent) => {
-      const currentY = mouseMoveEvent.pageY;
-      const newHeight = startHeight + (currentY - startY);
-      const minHeight = 100;
-      const maxHeight = window.innerHeight * 0.8;
-
-      setEditorHeight(Math.min(Math.max(newHeight, minHeight), maxHeight));
-    };
-
-    const onMouseUp = () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-    };
-
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-  }, [editorHeight]);
-
-  // Execute query and refresh tables
-  const executeQueryAndRefresh = async () => {
-    if (!editorRef.current) return;
-
-    const query = editorRef.current.getValue().trim().replace(/;+$/, '');
-    if (!query) {
-      setQueryResult({
-        success: false,
-        error: { message: "Query cannot be empty." },
-      });
-      return;
-    }
-
-    try {
-      setIsExecuting(true);
-      setQueryResult(null);
-
-      const data = await executeQuery(query);
-      const isSchemaModifying = /^(CREATE|DROP|ALTER)\s+TABLE/i.test(query);
-      if (isSchemaModifying) {
-        await refreshTables();
-      }
-
-      let results = [];
-
-      // --- Updated extraction logic ---
-      if (data.results) {
-        if (Array.isArray(data.results)) {
-          // Check for the columns/values shape (typical for schema queries)
-          if (
-            data.results.length > 0 &&
-            data.results[0]?.columns &&
-            data.results[0]?.values
-          ) {
-            const resultSet = data.results[0];
-            results = resultSet.values.map((row) =>
-              resultSet.columns.reduce((acc, col, idx) => {
-                acc[col] = row[idx];
-                return acc;
-              }, {})
-            );
-          } else {
-            // If we have one element with a "results" property, unwrap it.
-            if (
-              data.results.length === 1 &&
-              data.results[0].results &&
-              Array.isArray(data.results[0].results)
-            ) {
-              results = data.results[0].results;
-            } else {
-              // Otherwise, assume data.results is already an array of row objects.
-              results = data.results;
-            }
-          }
-        } else if (data.results.columns && data.results.values) {
-          const resultSet = data.results;
-          results = resultSet.values.map((row) =>
-            resultSet.columns.reduce((acc, col, idx) => {
-              acc[col] = row[idx];
-              return acc;
-            }, {})
-          );
-        }
-      } else if (data.result && data.result.results) {
-        if (Array.isArray(data.result.results)) {
-          if (
-            data.result.results.length > 0 &&
-            data.result.results[0]?.columns &&
-            data.result.results[0]?.values
-          ) {
-            const resultSet = data.result.results[0];
-            results = resultSet.values.map((row) =>
-              resultSet.columns.reduce((acc, col, idx) => {
-                acc[col] = row[idx];
-                return acc;
-              }, {})
-            );
-          } else {
-            if (
-              data.result.results.length === 1 &&
-              data.result.results[0].results &&
-              Array.isArray(data.result.results[0].results)
-            ) {
-              results = data.result.results[0].results;
-            } else {
-              results = data.result.results;
-            }
-          }
-        } else if (data.result.results.columns && data.result.results.values) {
-          const resultSet = data.result.results;
-          results = resultSet.values.map((row) =>
-            resultSet.columns.reduce((acc, col, idx) => {
-              acc[col] = row[idx];
-              return acc;
-            }, {})
-          );
-        }
-      }
-      // --- End updated extraction logic ---
-
-      setQueryResult({
-        success: true,
-        results,
-      });
-    } catch (error) {
-      const parsedError = parseSQLError(error) || { message: 'An unknown error occurred', details: {} };
-      setQueryResult({
-        success: false,
-        error: parsedError,
-      });
-    } finally {
-      setIsExecuting(false);
-    }
-  };
-
-  const renderQueryResult = () => {
-    if (isExecuting) {
-      return (
-        <div className="flex items-center text-sm text-neutral-700">
-          <Loader2 className="h-4 w-4 animate-spin mr-2 font-sans" />
-          Running your query...
-        </div>
-      );
-    }
-
-    if (!queryResult) {
-      return <div className="text-sm text-neutral-500 font-sans">Run the query to see the results.</div>;
-    }
-
-    if (!queryResult.success) {
-      console.debug("SQLEditor - Rendering error:", queryResult.error);
-      return <SQLErrorDisplay error={queryResult.error} />;
-    }
-
-    const results = queryResult.results;
-    if (!results || results.length === 0) {
-      return <div className="text-sm text-neutral-900 font-sans">Success. No results to display.</div>;
-    }
-
-    return (
-      <SQLResultsView
-        query={editorRef.current?.getValue() || ''}
-        results={results}
-      />
-    );
-  };
-
-
-  return (
-    <div className="h-full flex flex-col bg-white text-neutral-900 font-sans">
-      {/* Toolbar */}
-      <div className="px-4 py-2 bg-neutral-100 border-b flex items-center gap-4">
-        <QueryTemplateMenu
-          onSelectQuery={(queryType) => {
-            if (editorRef.current) {
-              // Normalize the queryType to match HELPFUL_QUERIES keys
-              const formattedQueryType = Object.keys(HELPFUL_QUERIES).find(
-                (key) => key.toLowerCase() === queryType.toLowerCase()
-              );
-
-              if (formattedQueryType) {
-                const query = HELPFUL_QUERIES[formattedQueryType];
-                editorRef.current.setValue(query);
-                editorRef.current.focus();
-              } else {
-                console.warn(`Query template not found for: ${queryType}`);
-              }
-            }
-          }}
-        />
-      </div>
-
-      {/* Query Editor */}
-      <div
-        ref={panelRef}
-        className="relative pt-2 overflow-hidden"
-        style={{ height: `${editorHeight}px`, minHeight: '100px' }}
-      >
-        <Editor
-          height="100%"
-          language="sql"
-          options={{
-            minimap: { enabled: false },
-            fontSize: 14,
-            wordWrap: "on",
-            automaticLayout: true,
-            lineNumbers: "on",
-            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-          }}
-          onMount={(editor) => {
-            editorRef.current = editor;
-            // Ensure that the "monaco" global is available.
-            editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
-              executeQueryAndRefresh();
-            });
-          }}
-        />
-      </div>
-
-      {/* Resizer */}
-      <div
-        className={`relative h-0.5 cursor-row-resize bg-neutral-200 group ${
-          isResizing ? "bg-neutral-300" : "hover:bg-neutral-300"
-        }`}
-        onMouseDown={(e) => {
-          setIsResizing(true);
-          startResizing(e);
-        }}
-        onMouseUp={() => setIsResizing(false)}
-      >
-        <div
-          className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-neutral-900 rounded-sm px-0.5 
-          ${isResizing ? "visible" : "invisible group-hover:visible"}`}
-        >
-          <GripHorizontal className="h-3 w-3 text-white" />
-        </div>
-      </div>
-
-      {/* Query Results */}
-      <div className="px-4 py-3 bg-neutral-100 border-b font-sans">
-        <div className="flex justify-between items-center">
-          <h3 className="text-sm font-medium">Results</h3>
-          <Button
-            size="sm"
-            onClick={executeQueryAndRefresh}
-            disabled={isExecuting}
-            className="flex items-center gap-1 text-sm font-medium"
-          >
-            Run
-            {isExecuting ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <>
-                <Command className="h-4 w-4" />
-                <CornerDownLeft className="h-4 w-4" />
-              </>
-            )}
-          </Button>
-        </div>
-      </div>
-
-      {/* Render Query Results */}
-      <div className="flex-1 overflow-auto p-4 bg-white">
-        {renderQueryResult()}
-      </div>
-    </div>
-  );
-}

package/src/components/sql-error-display.jsx

@@ -1,167 +0,0 @@
-// components/sql-error-display.jsx
-import React from 'react';
-import { AlertCircle, X, ChevronDown, ChevronUp } from 'lucide-react';
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-
-// Keep the original ErrorMessages mapping
-const ErrorMessages = {
-  TABLE_EXISTS: {
-    title: 'Table Already Exists',
-    message: 'A table with this name already exists',
-    action: 'Use a different table name or DROP the existing table first'
-  },
-  TABLE_NOT_FOUND: {
-    title: 'Table Not Found',
-    message: 'The specified table does not exist',
-    action: 'Check the table name and ensure it exists'
-  },
-  SYNTAX_ERROR: {
-    title: 'Syntax Error',
-    message: 'There is a syntax error in your SQL query',
-    action: 'Check your query syntax and try again'
-  },
-  CONSTRAINT_ERROR: {
-    title: 'Constraint Violation',
-    message: 'The operation violates a database constraint',
-    action: 'Ensure your data meets all table constraints'
-  },
-  VALIDATION_ERROR: {
-    title: 'Invalid Query',
-    message: 'The query is not valid',
-    action: 'Check your query and try again'
-  },
-  SQL_ERROR: {
-    title: 'SQL Error',
-    message: 'An error occurred while executing the query',
-    action: 'Review your query and try again'
-  },
-  EXECUTION_ERROR: {
-    title: 'Execution Error',
-    message: 'An error occurred during query execution',
-    action: 'Ensure Node.js is installed and your environment is configured correctly'
-  },
-  UNKNOWN_ERROR: {
-    title: 'Unknown Error',
-    message: 'An unexpected error occurred',
-    action: 'Try again or contact support if the issue persists'
-  }
-};
-
-export function SQLErrorDisplay({ error, onDismiss, onFixError }) {
-  const [showDetails, setShowDetails] = React.useState(true);
-
-  if (!error) return null;
-
-  const isSyntaxError = error.type === 'SYNTAX_ERROR';
-  const showQueryPreview = error.details?.originalQuery;
-  const showErrorLocation = isSyntaxError && error.details?.errorLocation;
-
-  // Get error info from ErrorMessages mapping
-  const errorInfo = ErrorMessages[error.type] || ErrorMessages.UNKNOWN_ERROR;
-
-  return (
-    <Alert variant="destructive" className="mt-4 mb-4">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle className="flex items-center justify-between">
-        <span>{errorInfo.title}</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">
-        <div className="font-medium">{error.message || errorInfo.message}</div>
-        
-        <Collapsible 
-          open={showDetails} 
-          onOpenChange={setShowDetails}
-          className="space-y-2 mt-4"
-        >
-          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-medium">
-            {showDetails ? (
-              <ChevronUp className="h-4 w-4" />
-            ) : (
-              <ChevronDown className="h-4 w-4" />
-            )}
-            Error Details
-          </CollapsibleTrigger>
-          
-          <CollapsibleContent className="space-y-4">
-            {showQueryPreview && (
-              <div className="mt-2">
-                <div className="text-sm font-medium mb-1">Query preview:</div>
-                <div className="relative">
-                  <pre className="text-xs bg-destructive/10 p-2 rounded overflow-x-auto whitespace-pre-wrap">
-                    {error.details.originalQuery}
-                  </pre>
-                  {showErrorLocation && (
-                    <div 
-                      className="absolute left-0 top-0 w-full"
-                      style={{
-                        transform: `translateY(${Math.floor(error.details.offset / 50)}rem)`
-                      }}
-                    >
-                      <div 
-                        className="absolute h-4 w-2 bg-red-500"
-                        style={{ left: `${(error.details.offset % 50) * 0.5}rem` }}
-                      />
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {(error.details?.suggestions || errorInfo.action) && (
-              <div className="mt-2">
-                <div className="text-sm font-medium mb-1">Suggestions:</div>
-                <ul className="list-disc pl-4 space-y-1">
-                  {error.details?.suggestions ? (
-                    error.details.suggestions.map((suggestion, index) => (
-                      <li key={index} className="text-sm text-destructive-foreground/90">
-                        {suggestion}
-                      </li>
-                    ))
-                  ) : (
-                    <li className="text-sm text-destructive-foreground/90">
-                      {errorInfo.action}
-                    </li>
-                  )}
-                </ul>
-              </div>
-            )}
-
-            {error.details?.error && (
-              <div className="mt-2">
-                <div className="text-sm font-medium mb-1">Technical details:</div>
-                <pre className="text-xs bg-destructive/10 p-2 rounded overflow-x-auto">
-                  {error.details.error}
-                </pre>
-              </div>
-            )}
-
-            {onFixError && isSyntaxError && (
-              <div className="mt-4">
-                <Button 
-                  variant="outline" 
-                  size="sm"
-                  onClick={() => onFixError(error.details.errorLocation)}
-                >
-                  Go to Error Location
-                </Button>
-              </div>
-            )}
-          </CollapsibleContent>
-        </Collapsible>
-      </AlertDescription>
-    </Alert>
-  );
-}
-
-export { ErrorMessages };

package/src/components/sync-migrations-button.jsx

@@ -1,87 +0,0 @@
-// components/sync-migrations-button.jsx
-'use client';
-
-import React, { memo, useState } from 'react';
-import { Button } from "@/components/ui/button";
-import { FolderSync, Loader2 } from 'lucide-react';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useToast } from "@/hooks/use-toast";
-
-const SyncMigrationsButton = memo(({ tableName, onSync }) => {
-  const [isSyncing, setIsSyncing] = useState(false);
-  const { toast } = useToast();
-
-  // Only show for d1_migrations table
-  if (tableName !== 'd1_migrations') return null;
-
-  const handleSync = async () => {
-    try {
-      setIsSyncing(true);
-      const response = await fetch('/api/migrations/sync-files', {
-        method: 'POST'
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || 'Failed to sync migrations');
-      }
-
-      const { added = [], removed = [] } = data.details || {};
-      
-      toast({
-        title: "Migrations Synced",
-        description: `Added: ${added.length}, Removed: ${removed.length}`
-      });
-
-      // Refresh the table data if sync was successful
-      if (onSync) {
-        await onSync();
-      }
-
-    } catch (error) {
-      console.error('Error syncing migrations:', error);
-      toast({
-        variant: "destructive",
-        title: "Sync Failed",
-        description: error.message
-      });
-    } finally {
-      setIsSyncing(false);
-    }
-  };
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="outline"
-            size="icon"
-            onClick={handleSync}
-            disabled={isSyncing}
-            className="h-8"
-          >
-            {isSyncing ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <FolderSync className="h-4 w-4" />
-            )}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Sync migration files with d1_migrations table</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-});
-
-SyncMigrationsButton.displayName = 'SyncMigrationsButton';
-
-export default SyncMigrationsButton;