d1s 0.2.1

package/src/components/sidebar.jsx

@@ -0,0 +1,236 @@
+// components/sidebar.jsx
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { 
+  Table2, 
+  Search, 
+  Loader2, 
+  AlertCircle,
+  TerminalSquare,
+} from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { useDatabase } from '@/context/database-context';
+import { CloudflareCredentialsModal } from './cloudflare-credentials-modal';
+import { useEnvironmentController } from './environment-handler'; 
+import { EnvironmentSelect } from './environment-select';
+
+export function AppSidebar({
+  className,
+  currentView,
+  onNavigate,
+  onTableSelect,
+}) {
+  const { tables, refreshTables, isLoading: isTablesLoading, error } = useDatabase();
+  const [databases, setDatabases] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [environment, setEnvironment] = useState('local');
+  const [showCredentialsModal, setShowCredentialsModal] = useState(false);
+  const [selectedTable, setSelectedTable] = useState(null);
+  const [isTableLoading, setIsTableLoading] = useState(false);
+
+  const {
+    isConnecting,
+    isPushing,
+    showPreview,
+    connectToCloudflare,
+    pushToRemote,
+    pullFromRemote,
+    pullToRemotePreview,
+    validateStoredCredentials,
+    PreviewUI,
+  } = useEnvironmentController();
+
+  // Filter tables based on search term
+  const filteredTables =
+    tables?.filter((table) =>
+      table.toLowerCase().includes(searchTerm.toLowerCase())
+    ) || [];
+
+  const handleTableClick = async (table) => {
+    try {
+      setIsTableLoading(true);
+      setSelectedTable(table);
+      onTableSelect(table);
+    } catch (error) {
+      console.error('Error selecting table:', error);
+    } finally {
+      setIsTableLoading(false);
+    }
+  };
+
+  const handleEnvironmentChange = async (value) => {
+    console.log('Environment change triggered:', value);
+    // Immediately update the environment state so the UI reflects the correct label
+    setEnvironment(value);
+    
+    if (value === 'production') {
+      try {
+        const credentials = await validateStoredCredentials();
+        if (!credentials) {
+          setShowCredentialsModal(true);
+          return;
+        }
+        // Trigger push preview or push directly (as desired)
+        await pushToRemote();
+      } catch (error) {
+        console.error('Environment change failed:', error);
+        setEnvironment('local');
+      }
+    } else if (value === 'pull') {
+      try {
+        const credentials = await validateStoredCredentials();
+        if (!credentials) {
+          setShowCredentialsModal(true);
+          return;
+        }
+        // Instead of immediately pulling, show the pull preview toast
+        await pullToRemotePreview();
+        // Optionally, you may keep the environment value as "pull" until confirmation,
+        // then revert to "local" in the confirm pull flow.
+      } catch (error) {
+        console.error('Pull from remote failed:', error);
+        setEnvironment('local');
+      }
+    } else {
+      setEnvironment(value);
+    }
+  };
+
+  useEffect(() => {
+    const fetchDatabases = async () => {
+      try {
+        const response = await fetch('/api/databases');
+        const data = await response.json();
+
+        if (!response.ok) {
+          throw new Error(data.error || 'Failed to fetch databases');
+        }
+
+        setDatabases(data.databases || []);
+      } catch (error) {
+        console.error('Error fetching databases:', error);
+      }
+    };
+
+    fetchDatabases();
+    refreshTables();
+  }, [refreshTables]);
+
+  return (
+    <>
+    <aside className={`${className} bg-neutral-50 p-4`}>
+      <div className="font-sans">
+        {/* Header */}
+        <div className="flex items-center gap-2 mb-6">
+          <Table2 className="h-5 w-5" />
+          <span className="font-mono font-bold text-sm">d1-studio</span>
+        </div>
+
+        {/* Error Message */}
+        {error && (
+          <Alert variant="destructive" className="mb-4">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription className="text-sm ml-2">{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {/* Database Section */}
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <div className="text-xs text-muted-foreground mb-1">Database name</div>
+              <div className="font-semibold text-sm">
+                {databases[0]?.database_name || 'No database found'}
+              </div>
+            </div>
+
+            <EnvironmentSelect
+              value={environment}
+              onValueChange={handleEnvironmentChange}
+              isLoading={isPushing}
+              disabled={isConnecting}
+              showPreview={showPreview}
+            />
+          </div>
+
+        {/* SQL Editor Section */}
+        <div className="mb-6">
+          <button
+            className={`w-full flex items-center gap-x-1 border rounded-md text-sm font-medium transition-colors px-2 py-2
+              ${currentView === 'sql-editor' ? 'bg-neutral-900 text-white' : 'bg-white hover:bg-neutral-100'}`}
+            onClick={() => onNavigate('sql-editor')}
+            disabled={isTableLoading}
+          >
+            <TerminalSquare className="h-[16px] w-[16px]" />
+            SQL editor
+          </button>
+        </div>
+
+        {/* Search Section */}
+        <div className="relative mb-6 bg-white">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-neutral-500" />
+          <Input
+            placeholder="Search tables"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="pl-7"
+          />
+        </div>
+
+        {/* Tables Section */}
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <h3 className="text-sm font-medium text-muted-foreground">
+              Tables {tables?.length ? `(${tables.length})` : ''}
+            </h3>
+            {isTablesLoading && <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />}
+          </div>
+
+          {/* Tables List */}
+          <div className="space-y-1 font-sans">
+            {!isTablesLoading && filteredTables.length === 0 && (
+              <div className="text-sm font-medium text-muted-foreground px-2 py-2">
+                {searchTerm 
+                  ? 'No matching tables found' 
+                  : error 
+                    ? 'Error loading tables' 
+                    : 'No tables available'
+                }
+              </div>
+            )}
+
+            {filteredTables.map((table) => (
+              <button
+                key={table}
+                className={`w-full text-left text-sm font-medium rounded-md transition-colors px-2 py-2
+                  ${currentView === 'table-view' && selectedTable === table
+                    ? 'bg-[#F0F0F0] text-neutral-900 font-semibold'
+                    : 'text-neutral-700 hover:bg-[#F2F2F2]'}
+                  ${isTableLoading && 'opacity-50 cursor-not-allowed'}`}
+                onClick={() => handleTableClick(table)}
+                disabled={isTableLoading}
+              >
+                {table}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Cloudflare Credentials Modal */}
+      <CloudflareCredentialsModal
+        open={showCredentialsModal}
+        onClose={() => {
+          setShowCredentialsModal(false);
+          setEnvironment('local');
+        }}
+        onSubmit={connectToCloudflare}
+      />
+    </aside>
+
+      {/* Preview UI */}
+      {PreviewUI}
+    </>
+  );
+}

package/src/components/sql-editor.jsx

@@ -0,0 +1,411 @@
+'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>
+  );
+}