d1s 0.2.4 → 0.2.6

package/dist/lib/logger.js

@@ -0,0 +1,19 @@
+import winston from 'winston';
+
+const { combine, timestamp, printf, colorize } = winston.format;
+
+const logFormat = printf(({ level, message, timestamp }) => {
+  return `${timestamp} ${level}: ${message}`;
+});
+
+const logger = winston.createLogger({
+  level: process.env.NODE_ENV === 'development' ? 'debug' : 'info',
+  format: combine(
+    timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),
+    colorize(),
+    logFormat
+  ),
+  transports: [new winston.transports.Console()]
+});
+
+export default logger;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d1s",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "description": "D1 Studio – a native studio for managing Cloudflare D1 databases.",
   "main": "./dist/d1-studio.js",
@@ -81,7 +81,8 @@
     "react-dom": "^18.2.0",
     "strip-json-comments": "^5.0.1",
     "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "winston": "^3.17.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

package/scripts/studio.js

@@ -11,6 +11,7 @@ import express from 'express';
 import { createServer } from 'http';
 import next from 'next';
 import { findWranglerConfig } from '../src/lib/find-wrangler-config.js';
+import logger from '../src/lib/logger.js';
 
 // Compute the absolute path of this file and its directory.
 const __filename = fileURLToPath(import.meta.url);
@@ -46,14 +47,8 @@ async function validateLicenseRemote(licenseKey, email, hardwareId) {
   try {
     const response = await fetch(`${baseUrl}/api/validate-license`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        licenseKey,
-        email,
-        hardwareId,
-      }),
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ licenseKey, email, hardwareId }),
     });
 
     const result = await response.json();
@@ -65,7 +60,6 @@ async function validateLicenseRemote(licenseKey, email, hardwareId) {
       );
     }
 
-    // Check for subscription expiration if end_date is provided.
     if (result.end_date && new Date(result.end_date) < new Date()) {
       throw new LicenseError(
         'Your subscription has expired. Please renew your license to continue using D1 Studio.',
@@ -78,7 +72,6 @@ async function validateLicenseRemote(licenseKey, email, hardwareId) {
     if (error instanceof LicenseError) {
       throw error;
     }
-
     if (error.name === 'TypeError' && error.message.includes('fetch')) {
       throw new LicenseError(
         process.env.NODE_ENV === 'development'
@@ -87,7 +80,6 @@ async function validateLicenseRemote(licenseKey, email, hardwareId) {
         'CONNECTION_ERROR'
       );
     }
-
     throw new LicenseError(
       'An unexpected error occurred during license validation',
       'VALIDATION_ERROR'
@@ -106,7 +98,6 @@ async function checkLicenseFile() {
     if (licenseData.hardwareId !== hardwareId) {
       return null;
     }
-
     return licenseData;
   } catch (error) {
     return null;
@@ -127,22 +118,19 @@ async function saveLicenseFile(licenseData) {
 
 async function startServer(port, projectDirectory) {
   return new Promise((resolvePromise, rejectPromise) => {
-    const dev = process.env.NODE_ENV === 'development';
-
-    // Determine the directory where Next.js build is located:
-    // In production (published package), __dirname is in the 'dist' folder so we use it directly.
-    // In development, we assume the structure is different and go one level up.
+    // Determine Next.js app directory based on environment:
+    // In production (published package) __dirname is used.
+    // In development (npm link), assume the build is in the parent folder.
     const isProduction = process.env.NODE_ENV !== 'development';
     const nextAppDir = isProduction ? __dirname : join(__dirname, '..');
 
+    const dev = process.env.NODE_ENV === 'development';
     const app = next({ 
       dev,
       dir: nextAppDir,
       conf: {
         distDir: '.next',
-        experimental: {
-          appDir: true
-        }
+        experimental: { appDir: true }
       }
     });
     const handle = app.getRequestHandler();
@@ -150,41 +138,29 @@ async function startServer(port, projectDirectory) {
     app.prepare()
       .then(() => {
         const server = express();
-        
-        // Set environment variables
         process.env.PORT = port.toString();
         process.env.D1_PROJECT_DIR = projectDirectory;
+        const httpServer = createServer((req, res) => handle(req, res));
 
-        // Create HTTP server
-        const httpServer = createServer((req, res) => {
-          handle(req, res);
-        });
-
-        // Handle all requests through Next.js
-        server.all('*', (req, res) => {
-          return handle(req, res);
-        });
+        server.all('*', (req, res) => handle(req, res));
 
-        // Start listening
         httpServer.listen(port, (err) => {
           if (err) {
-            console.error(chalk.red('Failed to start server:'), err);
+            logger.error(chalk.red(`Failed to start server: ${err}`));
             rejectPromise(err);
             return;
           }
-
-          console.log(chalk.green(`Server started on port ${port}`));
+          logger.info(chalk.green(`Server started on port ${port}`));
           resolvePromise(httpServer);
         });
 
-        // Handle server errors
         httpServer.on('error', (err) => {
-          console.error(chalk.red('Server error:'), err);
+          logger.error(chalk.red(`Server error: ${err}`));
           rejectPromise(err);
         });
       })
       .catch((err) => {
-        console.error(chalk.red('Failed to prepare Next.js app:'), err);
+        logger.error(chalk.red(`Failed to prepare Next.js app: ${err}`));
         rejectPromise(err);
       });
   });
@@ -192,17 +168,15 @@ async function startServer(port, projectDirectory) {
 
 async function startStudio() {
   try {
-    console.log(chalk.green('Initializing D1 Studio...'));
+    logger.info(chalk.green('Initializing D1 Studio...'));
 
     // Validate license
     let licenseData = await checkLicenseFile();
-    console.log(chalk.blue('License data found:'), licenseData);
+    logger.debug(chalk.blue(`License data found: ${JSON.stringify(licenseData)}`));
 
     const TWELVE_HOURS_MS = 43200000; // 12 hours
     let shouldRevalidate = true;
-
     if (licenseData) {
-      // Use lastValidatedAt if available; otherwise, fall back to activatedAt.
       const lastCheck = new Date(licenseData.lastValidatedAt || licenseData.activatedAt);
       if (Date.now() - lastCheck.getTime() < TWELVE_HOURS_MS) {
         shouldRevalidate = false;
@@ -211,7 +185,7 @@ async function startStudio() {
 
     if (!licenseData || shouldRevalidate) {
       const { default: inquirer } = await import('inquirer');
-      console.log(chalk.blue('\nPlease enter your D1 Studio license information:'));
+      logger.info(chalk.yellow('\nPlease enter your D1 Studio license information:'));
 
       const answers = await inquirer.prompt([
         {
@@ -231,10 +205,9 @@ async function startStudio() {
         },
       ]);
 
-      console.log(chalk.blue('Entered license information:'), answers);
+      logger.debug(chalk.blue(`Entered license information: ${JSON.stringify(answers)}`));
 
       const hardwareId = await generateHardwareId();
-
       try {
         const validation = await validateLicenseRemote(
           answers.licenseKey,
@@ -242,51 +215,42 @@ async function startStudio() {
           hardwareId
         );
 
-        // Optionally, you can store the returned end_date for future checks.
         licenseData = {
           licenseKey: answers.licenseKey,
           email: answers.email,
-          hardwareId,
-          licenseType: validation.licenseType,
           activatedAt: new Date().toISOString(),
-          lastValidatedAt: new Date().toISOString(),
           endDate: validation.end_date || null
         };
 
         await saveLicenseFile(licenseData);
-        console.log(chalk.green('\nLicense activated successfully!'));
+        logger.info(chalk.green('\nLicense activated successfully!'));
       } catch (error) {
-        console.error(chalk.red('\nLicense validation failed:'), error.message);
+        logger.error(chalk.red(`\nLicense validation failed: ${error.message}`));
         process.exit(1);
       }
-    } else {
-      // console.log(chalk.blue('Using cached license data.'));
     }
 
     // Get wrangler configuration
     try {
       const userProjectPath = process.cwd();
-    
       if (!userProjectPath) {
-        console.error(chalk.red('Error: Could not determine project directory'));
+        logger.error(chalk.red('Error: Could not determine project directory'));
         process.exit(1);
       }
-    
+
       const wranglerResult = await findWranglerConfig(userProjectPath);
-    
       if (!wranglerResult || !wranglerResult.config) {
-        console.error(chalk.red('\nError: No wrangler.toml found in current directory'));
-        console.log(chalk.yellow('Make sure you are in a Cloudflare Workers project directory'));
-        console.log(chalk.yellow('with a valid wrangler.toml file.'));
+        logger.error(chalk.red('\nError: No wrangler.toml found in current directory'));
+        logger.info(chalk.yellow('Make sure you are in a Cloudflare Workers project directory'));
+        logger.info(chalk.yellow('with a valid wrangler.toml file.'));
         process.exit(1);
       }
-    
+
       const { config, projectPath } = wranglerResult;
-    
       if (!config.d1_databases?.length) {
-        console.error(chalk.red('\nError: No D1 databases configured in wrangler.toml'));
-        console.log(chalk.yellow('\nAdd D1 configuration to your wrangler.toml:'));
-        console.log(chalk.gray(`
+        logger.error(chalk.red('\nError: No D1 databases configured in wrangler.toml'));
+        logger.info(chalk.yellow('\nAdd D1 configuration to your wrangler.toml:'));
+        logger.info(chalk.gray(`
     [[d1_databases]]
     binding = "DB"
     database_name = "my-database"
@@ -294,11 +258,10 @@ async function startStudio() {
         `));
         process.exit(1);
       }
-    
-      // Display found databases
-      console.log(chalk.green('\nFound D1 databases:'));
+
+      logger.info(chalk.green('\nFound D1 databases:'));
       config.d1_databases.forEach((db) => {
-        console.log(chalk.blue(`  - ${db.database_name} (${db.binding})`));
+        logger.info(chalk.blue(`  - ${db.database_name} (${db.binding})`));
       });
 
       const port = 4000;
@@ -306,7 +269,7 @@ async function startStudio() {
 
       await startServer(port, projectPath);
 
-      console.log(chalk.green(`
+      logger.info(chalk.green(`
     ┌─────────────────────────────────────────┐
     │                                         │
     │   D1 Studio is running on port ${port}    │
@@ -316,50 +279,42 @@ async function startStudio() {
     └─────────────────────────────────────────┘
       `));
 
-      // Add delay before opening browser
       await new Promise(resolve => setTimeout(resolve, 2000));
 
       try {
         await open(url, {
           wait: false,
           url: true,
-          app: {
-            name: open.apps.chrome
-          }
+          app: { name: open.apps.chrome }
         }).catch(() => {
-          return open(url, {
-            wait: false,
-            url: true
-          });
+          return open(url, { wait: false, url: true });
         });
       } catch (browserError) {
-        console.log(chalk.yellow('\nCould not automatically open browser.'));
-        console.log(chalk.blue('Please open your browser and navigate to:'), url);
+        logger.info(chalk.yellow('\nCould not automatically open browser.'));
+        logger.info(chalk.blue(`Please open your browser and navigate to: ${url}`));
       }
-
     } catch (configError) {
-      console.error(chalk.red('\nConfiguration error:'), configError.message);
+      logger.error(chalk.red(`\nConfiguration error: ${configError.message}`));
       process.exit(1);
     }
-
   } catch (error) {
-    console.error(chalk.red('\nFailed to start D1 Studio:'), error);
+    logger.error(chalk.red(`\nFailed to start D1 Studio: ${error}`));
     process.exit(1);
   }
 }
 
 // Handle termination
 process.on('SIGINT', () => {
-  console.log(chalk.yellow('\nShutting down D1 Studio...'));
+  logger.info(chalk.yellow('\nShutting down D1 Studio...'));
   process.exit(0);
 });
 
 process.on('SIGTERM', () => {
-  console.log(chalk.yellow('\nShutting down D1 Studio...'));
+  logger.info(chalk.yellow('\nShutting down D1 Studio...'));
   process.exit(0);
 });
 
 startStudio().catch((error) => {
-  console.error(chalk.red('\nFailed to start D1 Studio:'), error);
+  logger.error(chalk.red(`\nFailed to start D1 Studio: ${error}`));
   process.exit(1);
 });

package/src/app/page.jsx

@@ -10,23 +10,20 @@ 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">
+    <div className="min-h-screen bg-background">
       <AppSidebar 
-        className="w-64 border-r flex-shrink-0" 
+        className="w-64 border-r" 
         currentView={currentView}
         onNavigate={setCurrentView}
         onTableSelect={handleTableSelect}
       />
-      <main className="flex-1 overflow-hidden">
+      <main className="ml-64 h-screen">
         {currentView === 'sql-editor' && <SQLEditor />}
         {currentView === 'table-view' && selectedTable && (
           <TableView tableName={selectedTable} />

package/src/components/sidebar.jsx

@@ -1,7 +1,7 @@
 // components/sidebar.jsx
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { 
   Table2, 
   Search, 
@@ -42,12 +42,25 @@ export function AppSidebar({
     PreviewUI,
   } = useEnvironmentController();
 
-  // Filter tables based on search term
-  const filteredTables =
-    tables?.filter((table) =>
+  // Updated filtering logic with d1_migrations priority
+  const filteredTables = useMemo(() => {
+    const filtered = tables?.filter((table) =>
       table.toLowerCase().includes(searchTerm.toLowerCase())
     ) || [];
 
+    // Sort all tables alphabetically first
+    const sortedTables = [...filtered].sort((a, b) => a.localeCompare(b));
+
+    // If d1_migrations exists in the filtered list, move it to the top
+    const d1MigrationsIndex = sortedTables.indexOf('d1_migrations');
+    if (d1MigrationsIndex !== -1) {
+      sortedTables.splice(d1MigrationsIndex, 1);
+      sortedTables.unshift('d1_migrations');
+    }
+
+    return sortedTables;
+  }, [tables, searchTerm]);
+
   const handleTableClick = async (table) => {
     try {
       setIsTableLoading(true);
@@ -120,23 +133,36 @@ export function AppSidebar({
 
   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>
+      <aside className={`${className} w-64 fixed top-0 left-0 h-full bg-neutral-50 p-4`}>
+        <div className="flex flex-col h-full 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>
-        )}
+          {/* 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>
 
-        {/* Database Section */}
+          {/* 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>
@@ -144,7 +170,7 @@ export function AppSidebar({
                 {databases[0]?.database_name || 'No database found'}
               </div>
             </div>
-
+  
             <EnvironmentSelect
               value={environment}
               onValueChange={handleEnvironmentChange}
@@ -153,84 +179,74 @@ export function AppSidebar({
               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" />}
+  
+          {/* 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>
+  
+          {/* Scrollable Tables Section - Updated */}
+          <div className="flex-1 min-h-0 flex flex-col">
+            {/* Tables Header */}
+            <div className="flex items-center justify-between mb-1 flex-none">
+              <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'
-                }
+            {/* Tables List - Scrollable - Updated with padding bottom */}
+            <div className="overflow-y-auto flex-1">
+              <div className="pr-2 pb-4"> {/* Added pb-4 for bottom padding */}
+                {!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>
-            )}
-
-            {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>
-      </div>
-
-      {/* Cloudflare Credentials Modal */}
-      <CloudflareCredentialsModal
-        open={showCredentialsModal}
-        onClose={() => {
-          setShowCredentialsModal(false);
-          setEnvironment('local');
-        }}
-        onSubmit={connectToCloudflare}
-      />
-    </aside>
-
+  
+        {/* Cloudflare Credentials Modal */}
+        <CloudflareCredentialsModal
+          open={showCredentialsModal}
+          onClose={() => {
+            setShowCredentialsModal(false);
+            setEnvironment('local');
+          }}
+          onSubmit={connectToCloudflare}
+        />
+      </aside>
+  
       {/* Preview UI */}
       {PreviewUI}
     </>
-  );
+  );  
 }