d1s 0.2.8 → 0.2.10

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

@@ -1,11 +1,45 @@
 // app/api/update/route.js
 import { NextResponse } from 'next/server';
-import updateNotifier from 'update-notifier';
 import pkg from '../../../../package.json' assert { type: 'json' };
 
 export async function GET() {
-  // Check for updates (you might want to cache this result to avoid too many requests)
-  const notifier = updateNotifier({ pkg, updateCheckInterval: 1000 * 60 * 60 * 24 });
-  const update = notifier.update;
-  return NextResponse.json({ update });
-}
+  try {
+    // Get current version from package.json
+    const currentVersion = pkg.version;
+    
+    // Fetch the latest version from npm registry
+    const response = await fetch('https://registry.npmjs.org/d1s/latest', {
+      headers: {
+        'Accept': 'application/json',
+        'User-Agent': 'd1-studio'
+      },
+      // Add cache control to prevent excessive requests
+      cache: 'no-cache'
+    });
+    
+    if (!response.ok) {
+      throw new Error('Failed to check for updates');
+    }
+    
+    const data = await response.json();
+    const latestVersion = data.version;
+    
+    // Compare versions - only return update info if there's a newer version
+    if (latestVersion && currentVersion && latestVersion !== currentVersion) {
+      console.log(`Update available: ${currentVersion} → ${latestVersion}`);
+      return NextResponse.json({ 
+        update: {
+          latest: latestVersion,
+          current: currentVersion
+        }
+      });
+    }
+    
+    // No update available
+    return NextResponse.json({ update: null });
+  } catch (error) {
+    console.error('Error checking for updates:', error);
+    // Return null on error to prevent banner from showing
+    return NextResponse.json({ update: null });
+  }
+}

package/src/app/page.jsx

@@ -7,7 +7,6 @@ import { SQLEditor } from '../components/sql-editor';
 import { TableView } from '../components/table-view';
 import UpdateBanner from '@/components/update-banner';
 
-
 export default function StudioPage() {
   const [currentView, setCurrentView] = useState('sql-editor');
   const [selectedTable, setSelectedTable] = useState(null);
@@ -18,23 +17,28 @@ export default function StudioPage() {
   };
 
   return (
-    <div className="min-h-screen bg-background">
-      {/* notification banner at the top of the page */}
+    <div className="flex flex-col min-h-screen bg-background">
+      {/* Banner */}
       <UpdateBanner />
-      {/* sidebar */}
-      <AppSidebar 
-        className="w-64 border-r" 
-        currentView={currentView}
-        onNavigate={setCurrentView}
-        onTableSelect={handleTableSelect}
-      />
-      {/* main content */}
-      <main className="ml-64 h-screen">
-        {currentView === 'sql-editor' && <SQLEditor />}
-        {currentView === 'table-view' && selectedTable && (
-          <TableView tableName={selectedTable} />
-        )}
-      </main>
+      
+      {/* Main layout with adjusted positioning for banner */}
+      <div className="flex flex-1 mt-[var(--banner-height,0px)]">
+        {/* Sidebar with adjusted height */}
+        <AppSidebar 
+          className="w-64 border-r fixed top-[var(--banner-height,0px)] h-[calc(100vh-var(--banner-height,0px))]"
+          currentView={currentView}
+          onNavigate={setCurrentView}
+          onTableSelect={handleTableSelect}
+        />
+        
+        {/* Main content with adjusted margin-top and height */}
+        <main className="ml-64 flex-1 h-[calc(100vh-var(--banner-height,0px))]">
+          {currentView === 'sql-editor' && <SQLEditor />}
+          {currentView === 'table-view' && selectedTable && (
+            <TableView tableName={selectedTable} />
+          )}
+        </main>
+      </div>
     </div>
   );
 }

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

@@ -133,27 +133,15 @@ export function AppSidebar({
 
   return (
     <>
-      <aside className={`${className} w-64 fixed top-0 left-0 h-full bg-neutral-50 p-4`}>
+      {/* The sidebar now has top position adjusted for the banner */}
+      <aside className={`${className} top-[var(--banner-height,0px)] left-0 h-[calc(100vh-var(--banner-height,0px))] 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 +150,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 +168,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"