d1s 0.2.6 → 0.2.9

package/src/components/environment-handler.jsx

@@ -18,11 +18,14 @@ const ErrorTypes = {
 export function useEnvironmentController() {
   const [isConnecting, setIsConnecting] = useState(false);
   const [isPushing, setIsPushing] = useState(false);
+  // New state for data pull status
+  const [isDataPulling, setIsDataPulling] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
   const [previewData, setPreviewData] = useState(null);
   const [previewError, setPreviewError] = useState(null);
-  const [previewType, setPreviewType] = useState(null); // "push" or "pull"
+  const [previewType, setPreviewType] = useState(null);
   const [previewSuccess, setPreviewSuccess] = useState(null);
+  const [environment, setEnvironment] = useState('local');
   const { toast } = useToast();
   const { refreshTables } = useDatabase();
 
@@ -93,7 +96,7 @@ export function useEnvironmentController() {
     }
   };
 
-  // Confirm push
+  // Update the confirmPush function:
   const confirmPush = async () => {
     try {
       setIsPushing(true);
@@ -113,7 +116,7 @@ export function useEnvironmentController() {
       if (!data.success) {
         throw new Error(data.error?.message || 'Failed to confirm push');
       }
-
+  
       // Update the preview data to show applied status
       setPreviewData(prev => ({
         ...prev,
@@ -122,12 +125,16 @@ export function useEnvironmentController() {
           action: item.action === 'will be applied' ? 'applied' : item.action
         }))
       }));
-
-      // Set success message instead of showing toast
+  
       setPreviewSuccess(`Applied ${data.details.applied} migration(s), skipped ${data.details.skipped}.`);
+      
+      // Reset environment after success
+      setEnvironment('local');
     } catch (error) {
       console.error("Push to remote confirm failed:", error);
       setPreviewError(error);
+      // Reset environment after error
+      setEnvironment('local');
     } finally {
       setIsPushing(false);
     }
@@ -169,11 +176,13 @@ export function useEnvironmentController() {
     }
   };
 
-  // Confirm pull
+  // In confirmPull function, add environment reset:
   const confirmPull = async () => {
     try {
       setIsPushing(true);
+      setEnvironment('pull'); // Ensure correct state during pull
       setPreviewError(null);
+      setPreviewSuccess(null);
       
       const credentials = await validateStoredCredentials();
       if (!credentials) throw new Error("No valid credentials found");
@@ -189,25 +198,61 @@ export function useEnvironmentController() {
         throw new Error(data.error?.message || 'Failed to confirm pull');
       }
   
-      clearPreviewState();
-      toast({
-        title: "Migration Success",
-        description: `Pull migrations applied successfully.`,
-      });
+      setPreviewSuccess(`Pull migrations applied successfully.`);
+      
+      setPreviewData(prev => ({
+        ...prev,
+        preview: prev.preview.map(item => ({
+          ...item,
+          action: item.action === 'will be applied' ? 'applied' : item.action
+        }))
+      }));
+  
       await refreshTables();
+      
     } catch (error) {
       console.error("Pull to remote confirm failed:", error);
       setPreviewError(error);
-      toast({
-        title: "Migration Failed",
-        description: error.message || "Failed to pull migrations from remote",
-        variant: "destructive",
-      });
     } finally {
       setIsPushing(false);
+      setEnvironment('local'); // Reset to local regardless of success/failure
     }
   };
 
+    // In confirmDataPull function, add syncing state:
+    const confirmDataPull = async () => {
+      try {
+        setIsDataPulling(true);
+        setEnvironment('syncing'); // Set environment to syncing during data pull
+        setPreviewError(null);
+        setPreviewSuccess(null);
+        
+        const credentials = await validateStoredCredentials();
+        if (!credentials) throw new Error("No valid credentials found");
+    
+        const response = await fetch("/api/pull-data/confirm", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(credentials)
+        });
+        
+        const data = await response.json();
+        if (!data.success) {
+          throw new Error(data.error?.message || 'Failed to confirm data pull');
+        }
+    
+        setPreviewSuccess("Remote data synced successfully.");
+        await refreshTables();
+        
+      } catch (error) {
+        console.error("Data pull confirm failed:", error);
+        setPreviewError(error);
+      } finally {
+        setIsDataPulling(false);
+        setEnvironment('local'); // Reset to local regardless of success/failure
+      }
+    };
+
   // Connect to Cloudflare
   async function connectToCloudflare(credentials) {
     try {
@@ -240,14 +285,18 @@ export function useEnvironmentController() {
     }
   }
 
+  // Update PreviewUI to pass onDataPull and isDataPulling for pull previews.
   const PreviewUI = showPreview && (
     previewType === "pull" ? (
       <PullPreviewToast
         preview={previewData?.preview || []}
         onConfirm={confirmPull}
+        onDataPull={confirmDataPull} // pass the new data pull handler
         onCancel={clearPreviewState}
         isConfirming={isPushing}
+        isDataPulling={isDataPulling}
         error={previewError}
+        success={previewSuccess}
         isLoading={isPushing && !previewData?.preview?.length}
       />
     ) : (
@@ -266,13 +315,18 @@ export function useEnvironmentController() {
   return {
     isConnecting,
     isPushing,
+    isDataPulling,
     showPreview,
     previewError,
+    environment, // Add this
+    setEnvironment, // Add this if needed
     pushToRemote,
     pullToRemotePreview,
     confirmPull,
+    confirmDataPull, // export the new function
     connectToCloudflare,
     validateStoredCredentials,
     PreviewUI
   };
 }
+

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

@@ -0,0 +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);
+
+  useEffect(() => {
+    const dismissedVersion = localStorage.getItem('updateBannerDismissedVersion');
+    if (dismissedVersion) {
+      setVisible(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    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 (!updateInfo || !visible) return null;
+
+  const handleClose = () => {
+    localStorage.setItem('updateBannerDismissedVersion', updateInfo.latest);
+    setVisible(false);
+  };
+
+  return (
+    <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="text-neutral-500 hover:text-neutral-700"
+        aria-label="Close update banner"
+      >
+        ×
+      </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/database-queue.js

@@ -1,33 +1,37 @@
 // utils/database-queue.js
+
+import logger from '@/lib/logger.js';
+
 class DatabaseQueue {
-   constructor() {
-     this.queue = [];
-     this.isProcessing = false;
-   }
+  constructor() {
+    this.queue = [];
+    this.isProcessing = false;
+  }
+
+  async add(operation) {
+    return new Promise((resolve, reject) => {
+      this.queue.push({ operation, resolve, reject });
+      this.processNext();
+    });
+  }
+
+  async processNext() {
+    if (this.isProcessing || this.queue.length === 0) return;
+    
+    this.isProcessing = true;
+    const { operation, resolve, reject } = this.queue.shift();
+    
+    try {
+      const result = await operation();
+      resolve(result);
+    } catch (error) {
+      logger.error('Error processing database queue operation:', error);
+      reject(error);
+    } finally {
+      this.isProcessing = false;
+      this.processNext();
+    }
+  }
+}
  
-   async add(operation) {
-     return new Promise((resolve, reject) => {
-       this.queue.push({ operation, resolve, reject });
-       this.processNext();
-     });
-   }
- 
-   async processNext() {
-     if (this.isProcessing || this.queue.length === 0) return;
-     
-     this.isProcessing = true;
-     const { operation, resolve, reject } = this.queue.shift();
-     
-     try {
-       const result = await operation();
-       resolve(result);
-     } catch (error) {
-       reject(error);
-     } finally {
-       this.isProcessing = false;
-       this.processNext();
-     }
-   }
- }
- 
- export const dbQueue = new DatabaseQueue();
+export const dbQueue = new DatabaseQueue();