d1s 0.2.1

package/src/app/api/tables/[name]/route.js

@@ -0,0 +1,173 @@
+// app/api/tables/[name]/route.js
+
+import { NextResponse } from 'next/server';
+import { promisify } from 'util';
+import { exec } from 'child_process';
+import { findWranglerConfig } from '@/lib/find-wrangler-config.js';
+import { dbQueue } from '@/lib/database-queue';
+
+const execAsync = promisify(exec);
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+// Global query queue to prevent database locks
+let isProcessing = false;
+
+/**
+ * Executes a D1 SQL query using Wrangler.
+ * This function ensures that only one query is processed at a time.
+ */
+async function executeD1Query(command, projectDir, databaseName) {
+  try {
+    // Wait until any current query is finished.
+    while (isProcessing) {
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    isProcessing = true;
+    
+    // Escape double quotes in the command and execute the query
+    const { stdout } = await execAsync(
+      `wrangler d1 execute ${databaseName} --local --command="${command.replace(/"/g, '\\"')}" --json`,
+      { cwd: projectDir }
+    );
+    
+    const result = JSON.parse(stdout);
+    return result[0]?.results || [];
+  } catch (error) {
+    console.error('Query execution error:', error);
+    throw error;
+  } finally {
+    isProcessing = false;
+  }
+}
+
+/**
+ * Extracts CHECK constraints from a CREATE TABLE SQL statement.
+ */
+function extractCheckConstraints(createTableSQL) {
+  const checkConstraints = {};
+  const checkRegex = /CHECK\s*\(\s*(\w+)\s+IN\s*\((.*?)\)\s*\)/gi;
+  let match;
+
+  while ((match = checkRegex.exec(createTableSQL)) !== null) {
+    const columnName = match[1];
+    const values = match[2]
+      .split(',')
+      .map(value => value.trim().replace(/^'|'$/g, ''));
+    
+    checkConstraints[columnName] = values;
+  }
+
+  return checkConstraints;
+}
+
+/**
+ * GET handler for fetching table details, schema, and data.
+ * It retrieves the Wrangler configuration using the helper and uses that
+ * to determine the target D1 database.
+ */
+export async function GET(request, context) {
+  return dbQueue.add(async () => {
+    try {
+      // Extract table name from route parameters
+      const params = await context.params;
+      const { name } = params;
+      
+      // Get pagination info from the query parameters
+      const { searchParams } = new URL(request.url);
+      const page = parseInt(searchParams.get('page')) || 1;
+      const limit = parseInt(searchParams.get('limit')) || 50;
+      const offset = (page - 1) * limit;
+
+      const projectDir = process.env.D1_PROJECT_DIR;
+      if (!projectDir) {
+        throw new Error('Project directory not configured');
+      }
+
+      // Use the centralized helper to find Wrangler configuration
+      const wranglerResult = await findWranglerConfig(projectDir);
+      if (!wranglerResult || !wranglerResult.config) {
+        throw new Error('No Wrangler configuration file found');
+      }
+      const config = wranglerResult.config;
+      if (!config.d1_databases?.length) {
+        throw new Error('No D1 databases configured');
+      }
+      // Get the first D1 database name from the configuration
+      const databaseName = config.d1_databases[0].database_name;
+
+      // Get table schema using PRAGMA query
+      const schemaQuery = `PRAGMA table_info(${name});`;
+      const schema = await executeD1Query(schemaQuery, projectDir, databaseName);
+
+      // Get the CREATE TABLE statement from sqlite_master
+      const createTableQuery = `SELECT sql FROM sqlite_master WHERE type='table' AND name='${name}';`;
+      const tableDefinition = await executeD1Query(createTableQuery, projectDir, databaseName);
+      const createTableSQL = tableDefinition[0]?.sql || '';
+
+      // Extract CHECK constraints from the CREATE TABLE statement
+      const checkConstraints = extractCheckConstraints(createTableSQL);
+
+      // Merge constraints into the schema response
+      const enhancedSchema = schema.map(column => ({
+        ...column,
+        check: checkConstraints[column.name] || null
+      }));
+
+      // Get total row count for the table
+      const countQuery = `SELECT COUNT(*) as total FROM ${name};`;
+      const countResult = await executeD1Query(countQuery, projectDir, databaseName);
+      const totalRows = countResult[0]?.total || 0;
+
+      // Fetch paginated data using the primary key column for ordering
+      const primaryKeyColumn = schema.find(col => col.pk === 1)?.name || schema[0]?.name;
+      const dataQuery = `
+        SELECT * FROM ${name} 
+        ORDER BY ${primaryKeyColumn} DESC 
+        LIMIT ${limit} OFFSET ${offset};
+      `;
+      const data = await executeD1Query(dataQuery, projectDir, databaseName);
+
+      return NextResponse.json({
+        success: true,
+        schema: enhancedSchema,
+        data,
+        meta: {
+          tableName: name,
+          total: totalRows,
+          page,
+          limit,
+          totalPages: Math.ceil(totalRows / limit),
+          rowCount: data.length,
+          columnCount: schema.length
+        }
+      });
+
+    } catch (error) {
+      console.error('Error handling request:', error);
+      return NextResponse.json({
+        success: false,
+        error: {
+          message: error.message,
+          details: error.stack
+        }
+      }, {
+        status: error.message.includes('not configured') ? 500 :
+                error.message.includes('not found') ? 404 : 500
+      });
+    }
+  }); 
+}
+
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    },
+  });
+}
+

package/src/app/api/tables/route.js

@@ -0,0 +1,174 @@
+// app/api/tables/route.js
+
+import { NextResponse } from 'next/server';
+import { promisify } from 'util';
+import { exec } from 'child_process';
+import { findWranglerConfig } from '@/lib/find-wrangler-config.js';
+
+const execAsync = promisify(exec);
+
+/**
+ * Attempts to extract a JSON object from a string.
+ * First, it tries to parse the entire string.
+ * If that fails, it searches for a JSON portion within the string.
+ */
+function extractJSONFromOutput(stdout) {
+  try {
+    // First try to parse the entire output as JSON
+    return JSON.parse(stdout);
+  } catch (e) {
+    // If that fails, try to find and parse just the JSON portion
+    const jsonStart = stdout.indexOf('[') !== -1 ? 
+                     stdout.indexOf('[') : 
+                     stdout.indexOf('{');
+    
+    if (jsonStart === -1) return null;
+    
+    try {
+      const jsonStr = stdout.substring(jsonStart);
+      return JSON.parse(jsonStr);
+    } catch (error) {
+      console.error('Error parsing JSON portion:', error);
+      return null;
+    }
+  }
+}
+
+/**
+ * Extracts table names from the query result.
+ */
+function extractTablesFromResult(result) {
+  if (!result) return [];
+  
+  if (Array.isArray(result) && result[0]?.results) {
+    return result[0].results.map(row => row.name);
+  }
+  
+  if (result.results?.[0]?.results) {
+    return result.results[0].results.map(row => row.name);
+  }
+  
+  return [];
+}
+
+/**
+ * Retries a function if it fails with a timeout (e.g. due to a locked database).
+ */
+async function retryWithTimeout(fn, retries = 3, timeout = 1000) {
+  for (let i = 0; i < retries; i++) {
+    try {
+      return await fn();
+    } catch (error) {
+      if (i === retries - 1) throw error;
+      if (error.message.includes('database is locked')) {
+        console.log(`Database locked, retrying in ${timeout}ms... (attempt ${i + 1}/${retries})`);
+        await new Promise(resolve => setTimeout(resolve, timeout));
+        continue;
+      }
+      throw error;
+    }
+  }
+}
+
+/**
+ * GET handler for listing tables.
+ * It uses the Wrangler configuration (via findWranglerConfig) to determine the D1 database.
+ */
+export async function GET() {
+  try {
+    const projectDir = process.env.D1_PROJECT_DIR;
+
+    if (!projectDir) {
+      console.error('D1_PROJECT_DIR environment variable is not set');
+      return NextResponse.json(
+        { error: 'Project directory not configured' },
+        { status: 500 }
+      );
+    }
+
+    // Use the centralized helper to get Wrangler configuration
+    const wranglerResult = await findWranglerConfig(projectDir);
+    if (!wranglerResult || !wranglerResult.config) {
+      return NextResponse.json(
+        { error: 'No Wrangler configuration file found in project directory' },
+        { status: 404 }
+      );
+    }
+    const config = wranglerResult.config;
+    if (!config.d1_databases?.length) {
+      return NextResponse.json(
+        { error: 'No D1 databases configured in Wrangler configuration' },
+        { status: 404 }
+      );
+    }
+    // Get the first D1 database name from the configuration
+    const databaseName = config.d1_databases[0].database_name;
+
+    // SQL query to list non-system tables
+    const query = `
+      SELECT name FROM sqlite_master 
+      WHERE type='table' 
+      AND name NOT LIKE 'sqlite_%'
+      AND name NOT LIKE '_cf_%'
+      ORDER BY name;
+    `;
+
+    // Execute the query with a retry mechanism if the database is locked
+    const { stdout } = await retryWithTimeout(async () => {
+      return execAsync(
+        `wrangler d1 execute ${databaseName} --local --command="${query}"`,
+        { 
+          cwd: projectDir,
+          timeout: 5000 // 5 second timeout
+        }
+      );
+    });
+    
+    // Extract JSON from the command output and then extract table names
+    const result = extractJSONFromOutput(stdout);
+    const tables = extractTablesFromResult(result);
+
+    return NextResponse.json({
+      success: true,
+      tables,
+      debug: {
+        projectDir,
+        tableCount: tables.length
+      }
+    });
+
+  } catch (error) {
+    console.error('Error fetching tables:', error);
+    
+    // Enhanced error response for troubleshooting
+    const errorResponse = {
+      error: 'Failed to fetch tables',
+      details: error.message,
+      debug: {
+        errorCode: error.code,
+        errorStack: error.stack,
+      }
+    };
+
+    // Check for specific error types (e.g., database locked)
+    if (error.message.includes('database is locked')) {
+      errorResponse.error = 'Database is temporarily locked';
+      errorResponse.retryAfter = 1000; // Suggest retry after 1 second
+    }
+
+    return NextResponse.json(errorResponse, { 
+      status: error.message.includes('database is locked') ? 503 : 500 
+    });
+  }
+}
+
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    },
+  });
+}

package/src/app/globals.css

@@ -0,0 +1,93 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.table-fixed {
+  table-layout: fixed;
+  width: 100%;
+}

package/src/app/layout.jsx

@@ -0,0 +1,35 @@
+// app/layout.js
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { DatabaseProvider } from '@/context/database-context';
+import { Toaster } from '@/components/ui/toaster'; // Change this import
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata = {
+  title: "d1-studio",
+  description: "Native D1 database studio.",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <DatabaseProvider>
+          {children}
+          <Toaster /> {/* Add this component */}
+        </DatabaseProvider>
+      </body>
+    </html>
+  );
+}

package/src/app/page.jsx

@@ -0,0 +1,37 @@
+// app/page.js
+'use client'
+
+import { AppSidebar } from '../components/sidebar';
+import { SQLEditor } from '../components/sql-editor';
+import { TableView } from '../components/table-view';
+import { useState } from 'react';
+
+export default function StudioPage() {
+  const [currentView, setCurrentView] = useState('sql-editor');
+  const [selectedTable, setSelectedTable] = useState(null);
+
+  // We don't need to handle push errors here anymore since we're using toasts
+  // The error handling is now managed by the useEnvironmentController hook
+
+  const handleTableSelect = (tableName) => {
+    setSelectedTable(tableName);
+    setCurrentView('table-view');
+  };
+
+  return (
+    <div className="flex h-screen bg-background">
+      <AppSidebar 
+        className="w-64 border-r flex-shrink-0" 
+        currentView={currentView}
+        onNavigate={setCurrentView}
+        onTableSelect={handleTableSelect}
+      />
+      <main className="flex-1 overflow-hidden">
+        {currentView === 'sql-editor' && <SQLEditor />}
+        {currentView === 'table-view' && selectedTable && (
+          <TableView tableName={selectedTable} />
+        )}
+      </main>
+    </div>
+  );
+}

package/src/components/cloudflare-credentials-modal.jsx

@@ -0,0 +1,94 @@
+// components/cloudflare-credentials-modal.jsx
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Loader2 } from 'lucide-react';
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+export function CloudflareCredentialsModal({ open, onClose, onSubmit }) {
+  const [accountId, setAccountId] = useState('');
+  const [apiToken, setApiToken] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      await onSubmit({ accountId, apiToken });
+      // Store credentials in localStorage
+      localStorage.setItem('cf_credentials', JSON.stringify({
+        accountId,
+        apiToken
+      }));
+      onClose();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Connect to Cloudflare</DialogTitle>
+          <DialogDescription>
+            Enter your Cloudflare credentials to push your database to production.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Account ID</label>
+            <Input
+              placeholder="Your Cloudflare Account ID"
+              value={accountId}
+              onChange={(e) => setAccountId(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">API Token</label>
+            <Input
+              type="password"
+              placeholder="Your D1 Database API Token"
+              value={apiToken}
+              onChange={(e) => setApiToken(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="flex justify-end gap-3">
+            <Button type="button" variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Connect
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}