d1s 0.2.8 → 0.2.9

package/src/components/environment-select.jsx

@@ -20,17 +20,20 @@ export function EnvironmentSelect({
       onValueChange={onValueChange}
       disabled={disabled || isLoading || showPreview}
     >
-      <SelectTrigger className="w-[104px] bg-white border-neutral-200 font-medium">
+      <SelectTrigger className="w-full bg-white border-neutral-200 font-medium">
         <div className="flex items-center gap-1 text-sm">
           {isLoading || showPreview ? (
             <>
               <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
               <span className="text-muted-foreground font-medium">
-                {value === "pull" ? "Pulling..." : "Pushing..."}
+                {value === "pull" ? "Pulling..." : 
+                 value === "syncing" ? "Syncing..." :
+                 value === "production" ? "Pushing..." : 
+                 "Loading..."}
               </span>
             </>
           ) : (
-            <SelectValue placeholder="Environment" />
+            <SelectValue placeholder="Environment" className="w-full" />
           )}
         </div>
       </SelectTrigger>

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

@@ -1,26 +1,21 @@
-"use client";
+// 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 {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { FileText, Loader2 } from "lucide-react";
+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,
@@ -66,7 +61,6 @@ export function PullPreviewToast({
       <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">
-            <FileText className="h-5 w-5 text-destructive" />
             <p className="text-sm font-medium text-destructive">
               No preview data available
             </p>
@@ -86,6 +80,10 @@ export function PullPreviewToast({
   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
@@ -94,28 +92,44 @@ export function PullPreviewToast({
           error ? "bg-destructive/15" : "bg-background"
         )}
       >
-        <div className="flex items-start gap-3">
+        <div className="flex items-start gap-x-1">
           <div className="flex-1 space-y-3">
-            {/* Header */}
+            {/* Header with Close Button */}
             <div className="space-y-1">
-              <h5
-                className={cn(
-                  "font-medium",
-                  error ? "text-destructive" : "text-neutral-900"
-                )}
-              >
-                {error ? "Pull Migration Error" : "Pull Migration Preview"}
-              </h5>
+              <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"
                 )}
               >
-                {error
-                  ? error.message
-                  : `${totalMigrations} migration(s) will be applied`}
+                {`${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 */}
@@ -129,54 +143,67 @@ export function PullPreviewToast({
 
               {isDetailsOpen && (
                 <ScrollArea className="h-[480px] mt-2 rounded border border-neutral-200">
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead className="w-[30px]"></TableHead>
-                        <TableHead className="pl-0">Migration</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
+                  <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) => (
-                        <TableRow key={index}>
-                          <TableCell className="w-[30px] pr-1 pl-2">
-                            <FileText className="h-4 w-4" />
-                          </TableCell>
-                          <TableCell className="font-mono text-xs pr-5 pl-0.5">
+                        <div
+                          key={index}
+                          className="px-4 py-2 border-b last:border-0"
+                        >
+                          <div className="font-mono text-xs">
                             {item.migration || item.name}
-                          </TableCell>
-                        </TableRow>
+                          </div>
+                        </div>
                       ))}
-                    </TableBody>
-                  </Table>
+                    </div>
+                  </div>
                 </ScrollArea>
               )}
             </div>
 
             {/* Action Buttons */}
-            <div className="flex gap-2 pt-1">
-              <Button
-                onClick={onConfirm}
-                disabled={isConfirming}
-                className="flex-1"
-              >
-                {isConfirming ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Confirming...
-                  </>
-                ) : (
-                  "Confirm Pull"
-                )}
-              </Button>
+            <div className="flex flex-col gap-2 pt-1">
+              <div className="flex gap-2">
               <Button
-                variant="outline"
-                onClick={onCancel}
-                disabled={isConfirming}
-                className="flex-1"
-              >
-                Cancel
-              </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>

package/src/components/sidebar.jsx

@@ -136,24 +136,11 @@ export function AppSidebar({
       <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">
+          <div className="flex items-center gap-2 mb-4">
             <Table2 className="h-5 w-5" />
             <span className="font-mono font-bold text-sm">d1-studio</span>
           </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>
-
           {/* Error Message */}
           {error && (
             <Alert variant="destructive" className="mb-4">
@@ -162,16 +149,17 @@ export function AppSidebar({
             </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>
+           {/* Database Section */}
+           <div className="mb-2">
+            <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>
-  
-            <EnvironmentSelect
+          </div>
+
+          {/* Environment Section - Full Width */}
+          <div className="mb-6">
+            <EnvironmentSelect className="w-full"
               value={environment}
               onValueChange={handleEnvironmentChange}
               isLoading={isPushing}
@@ -179,9 +167,22 @@ export function AppSidebar({
               showPreview={showPreview}
             />
           </div>
+
+          {/* SQL Editor Section */}
+          <div className="mb-3">
+            <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">
+          <div className="relative mb-3 bg-white">
             <Search className="absolute left-2 top-2.5 h-4 w-4 text-neutral-500" />
             <Input
               placeholder="Search tables"

package/src/components/update-banner.jsx

@@ -1,64 +1,62 @@
 // components/update-banner.jsx
-
 'use client'
 
 import { useEffect, useState } from 'react';
+import { Download } from 'lucide-react';
 import axios from 'axios';
 
 export default function UpdateBanner() {
   const [updateInfo, setUpdateInfo] = useState(null);
   const [visible, setVisible] = useState(true);
 
-  // On component mount, check if the banner was previously dismissed
   useEffect(() => {
-    const isDismissed = localStorage.getItem('updateBannerDismissed');
-    if (isDismissed === 'true') {
+    const dismissedVersion = localStorage.getItem('updateBannerDismissedVersion');
+    if (dismissedVersion) {
       setVisible(false);
     }
   }, []);
 
-  // Fetch update info from /api/update
   useEffect(() => {
-    axios
-      .get('/api/update')
-      .then(({ data }) => {
-        // If there's an update object returned
-        if (data?.update) {
-          setUpdateInfo(data.update);
-          // If user has not dismissed the banner, ensure it's visible
-          // so they see the new version if it differs from the old one
-          setVisible(true);
-        }
-      })
-      .catch(console.error);
+    const timer = setTimeout(() => {
+      axios
+        .get('/api/update')
+        .then(({ data }) => {
+          if (data?.update) {
+            const dismissedVersion = localStorage.getItem('updateBannerDismissedVersion');
+            if (dismissedVersion !== data.update.latest) {
+              setUpdateInfo(data.update);
+              setVisible(true);
+            }
+          }
+        })
+        .catch(console.error);
+    }, 1000);
+
+    return () => clearTimeout(timer);
   }, []);
 
-  // If no update or the banner was dismissed, don't render
   if (!updateInfo || !visible) return null;
 
-  // Close handler that writes to localStorage
   const handleClose = () => {
-    localStorage.setItem('updateBannerDismissed', 'true');
+    localStorage.setItem('updateBannerDismissedVersion', updateInfo.latest);
     setVisible(false);
   };
 
   return (
-    <div className="bg-gray-200 w-full px-3 py-3 flex items-center justify-between">
-      <div className="text-gray-800">
-        <strong>Update available!</strong> You are on version {updateInfo.current}; 
-        version {updateInfo.latest} is available. Run{' '}
-        <code className="bg-white text-sm px-1 py-0.5 rounded">
-          npm install -g d1s@latest
-        </code>{' '}
-        to update.
+    <div className="w-full bg-neutral-100 border-b px-3 py-2 flex items-center justify-between">
+      <div className="flex items-center gap-2 text-sm">
+        <Download className="h-4 w-4 text-blue-500" />
+        <span>
+          Version {updateInfo.latest} is available — npm install -g d1s@latest
+        </span>
       </div>
       <button
         onClick={handleClose}
-        className="ml-4 text-gray-500 hover:text-gray-700"
+        className="text-neutral-500 hover:text-neutral-700"
         aria-label="Close update banner"
       >
-        &times;
+        ×
       </button>
     </div>
   );
-}
+}

package/src/context/database-context.js

@@ -395,10 +395,10 @@ export function DatabaseProvider({ children }) {
       tableCache.clear();
       await refreshTables();
   
-      toast({
-        title: "Success",
-        description: `Remote state applied successfully. Migrations applied: ${data.details.appliedMigrations.join(', ')}`,
-      });
+      // toast({
+      //   title: "Success",
+      //   description: `Remote state applied successfully. Migrations applied: ${data.details.appliedMigrations.join(', ')}`,
+      // });
   
       return data;
     } catch (error) {

package/src/lib/logger.js

@@ -4,14 +4,21 @@ const { combine, timestamp, printf, colorize } = winston.format;
 
 const isDevelopment = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === undefined;
 const isProduction = process.env.NODE_ENV === 'production';
+// Check for DEBUG env var which is set by --debug flag
 const isDebug = process.env.DEBUG === 'true';
 
-const logFormat = printf(({ level, message, timestamp }) => {
-  return `${timestamp} ${level}: ${message}`;
+const logFormat = printf(({ level, message, timestamp, ...metadata }) => {
+  let msg = `${timestamp} ${level}: ${message}`;
+  // Add metadata if present
+  if (Object.keys(metadata).length > 0) {
+    msg += ` ${JSON.stringify(metadata)}`;
+  }
+  return msg;
 });
 
 const logger = winston.createLogger({
-  level: isProduction ? 'warn' : (isDebug ? 'debug' : 'info'),
+  // Set log level based on environment and debug flag
+  level: isDebug ? 'debug' : (isProduction ? 'warn' : 'info'),
   format: combine(
     timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),
     colorize(),
@@ -19,10 +26,33 @@ const logger = winston.createLogger({
   ),
   transports: [
     new winston.transports.Console({
-      level: isProduction ? 'warn' : (isDebug ? 'debug' : 'info'),
+      level: isDebug ? 'debug' : (isProduction ? 'warn' : 'info'),
       silent: process.env.NODE_ENV === 'test'
     })
   ]
 });
 
-export default logger;
+// Add helper methods
+logger.logRequest = (method, path, params = {}) => {
+  logger.debug(`Request: ${method} ${path}`, params);
+};
+
+logger.logError = (error, source = 'unknown') => {
+  logger.error(`Error in ${source}: ${error.message}`, {
+    error: error.stack || error.message,
+    source
+  });
+};
+
+logger.shouldLog = (level) => {
+  const currentLevel = logger.level;
+  const levels = {
+    error: 0,
+    warn: 1,
+    info: 2,
+    debug: 3
+  };
+  return levels[level] <= levels[currentLevel];
+};
+
+export default logger;

package/src/lib/sql-operations.js

@@ -342,6 +342,83 @@ export async function executeSQL(projectDir, databaseName, sql, env = {}, remote
   }
 }
 
+/**
+ * Fetches the latest `limit` records for a given table from the remote database.
+ *
+ * This implementation uses the executeSQL function with the remote flag enabled.
+ * It orders the results based on the provided ordering column. If no ordering column is provided,
+ * it falls back to the default "id" column.
+ *
+ * @param {string} projectDir - The project directory.
+ * @param {string} databaseName - The D1 database name.
+ * @param {string} tableName - The table to fetch records for.
+ * @param {object} env - Environment variables (including credentials).
+ * @param {number} limit - The number of records to fetch.
+ * @param {string} [orderingColumn="id"] - The column to order by.
+ * @returns {Promise<Array<object>>} Array of row objects.
+ */
+export async function fetchRemoteTableData(
+  projectDir,
+  databaseName,
+  tableName,
+  env,
+  limit,
+  orderingColumn = "id"
+) {
+  // Use the provided ordering column; if not provided, default to "id".
+  const query = `SELECT * FROM "${tableName}" ORDER BY "${orderingColumn}" DESC LIMIT ${limit};`;
+  try {
+    // Execute the SQL command on the remote database.
+    const result = await executeSQL(projectDir, databaseName, query, env, true);
+    
+    // ExecuteSQL returns stdout that should contain a JSON array starting from a '['.
+    const jsonStart = result.indexOf('[');
+    if (jsonStart === -1) {
+      throw new Error(`Unexpected result format: ${result}`);
+    }
+    const jsonStr = result.substring(jsonStart);
+    const parsed = JSON.parse(jsonStr);
+    // Assuming the structure: parsed[0].results contains the rows.
+    const rows = parsed[0]?.results || [];
+    return rows;
+  } catch (error) {
+    logger.error(`Error fetching remote data for table ${tableName}:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Generates a bulk insert SQL statement for the specified table and rows.
+ *
+ * This function constructs a single INSERT statement that inserts multiple rows.
+ * It escapes single quotes in string values. You may need to extend this for
+ * additional data types (e.g., numbers, dates, booleans) or more complex structures.
+ *
+ * @param {string} tableName - The table to insert into.
+ * @param {Array<object>} rows - An array of objects, each representing a row.
+ * @returns {string} The bulk insert SQL statement.
+ */
+export function generateBulkInsertSQL(tableName, rows) {
+  if (!rows || rows.length === 0) return '';
+  
+  // Get the list of columns from the first row object.
+  const columns = Object.keys(rows[0]);
+  const columnList = columns.map(col => `"${col}"`).join(', ');
+
+  // Build the values list for each row.
+  const valuesList = rows.map(row => {
+    const values = columns.map(col => {
+      const value = row[col];
+      if (value === null || value === undefined) return 'NULL';
+      // For simplicity, treat the value as a string.
+      return `'${String(value).replace(/'/g, "''")}'`;
+    }).join(', ');
+    return `(${values})`;
+  }).join(', ');
+
+  return `INSERT INTO "${tableName}" (${columnList}) VALUES ${valuesList};`;
+}
+
 // ---------------------------------------------------------------------
 // SQL Formatting and Helper Functions
 // ---------------------------------------------------------------------