d1s 0.2.1

package/src/components/editable-row.jsx

@@ -0,0 +1,169 @@
+// components/editable-row.jsx
+'use client';
+
+import React, { useState } from 'react';
+import { TableRow, TableCell } from '@/components/ui/table';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+function cleanValue(value) {
+  return typeof value === 'string' ? value.replace(/^'|'$/g, '') : value;
+}
+
+export function EditableRow({ 
+  schema,
+  onRemove,
+  onChange,
+  showCheckbox = false,
+  initialData = {}
+}) {
+  const [rowData, setRowData] = useState(() => {
+    return schema.reduce((acc, col) => {
+      let defaultValue = initialData[col.name] ?? null;
+      defaultValue = cleanValue(defaultValue);
+      
+      if (defaultValue === null) {
+        if (col.dflt_value) {
+          defaultValue = cleanValue(col.dflt_value);
+        } else if (col.type.toUpperCase() === 'INTEGER') {
+          defaultValue = '';
+        } else if (col.type.toUpperCase() === 'TEXT') {
+          defaultValue = '';
+        }
+      }
+
+      acc[col.name] = defaultValue;
+      return acc;
+    }, {});
+  });
+
+  const handleChange = (column, value) => {
+    const newData = { ...rowData, [column]: value };
+    setRowData(newData);
+    onChange?.(newData);
+  };
+
+  const isBoolean = (col) => {
+    const type = col.type?.toLowerCase() || '';
+    return type === 'boolean' || 
+           type === 'bool' || 
+           (type === 'integer' && col.name.toLowerCase().startsWith('is_'));
+  };
+
+  return (
+    <TableRow className="bg-orange-50/50">
+      <TableCell className="w-10 p-0">
+        <div className="pl-1 flex items-center">
+          {showCheckbox ? (
+            <Checkbox disabled />
+          ) : (
+            <Button 
+              variant="ghost" 
+              size="icon"
+              className="h-8 w-8 text-orange-700 hover:text-orange-800"
+              onClick={onRemove}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </TableCell>
+      {schema.map((col) => {
+        const isPrimaryKey = col.pk === 1;
+        const allowedValues = col.check || null;
+
+        // Handle boolean fields
+        if (isBoolean(col)) {
+          // Parse default value from schema
+          let defaultBoolValue = 'false';
+          if (col.dflt_value !== null && col.dflt_value !== undefined) {
+            // Handle different formats of default values
+            const dfltVal = col.dflt_value.toString().toLowerCase();
+            defaultBoolValue = (
+              dfltVal === '1' || 
+              dfltVal === 'true' || 
+              dfltVal === "'true'" || 
+              dfltVal === '"true"'
+            ) ? 'true' : 'false';
+          }
+
+          // Use rowData if it exists, otherwise use default
+          const currentValue = rowData[col.name] !== null && rowData[col.name] !== undefined
+            ? (rowData[col.name] === 1 || rowData[col.name] === true || rowData[col.name] === 'true' ? 'true' : 'false')
+            : defaultBoolValue;
+
+          return (
+            <TableCell key={col.name} className="border-x border-neutral-200 p-0">
+              <div className="w-full">
+                <Select
+                  value={currentValue}
+                  onValueChange={(value) => handleChange(col.name, value === 'true' ? 1 : 0)}
+                  // Removed disabled={isPrimaryKey} to allow editing
+                >
+                  <SelectTrigger 
+                    className="w-full h-9 min-w-0 rounded-none border-0 bg-orange-50 text-orange-900"
+                    title={`Default: ${defaultBoolValue}`}
+                  >
+                    <SelectValue placeholder={`Select ${col.name}`} />
+                  </SelectTrigger>
+                  <SelectContent className="min-w-[8rem]">
+                    <SelectItem value="true">true</SelectItem>
+                    <SelectItem value="false">false</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </TableCell>
+          );
+        }
+        
+        // Handle fields with check constraints
+        if (allowedValues?.length > 0) {
+          return (
+            <TableCell key={col.name} className="border-x border-neutral-200 p-0">
+              <div className="w-full">
+                <Select
+                  value={rowData[col.name] ?? allowedValues[0]}
+                  onValueChange={(value) => handleChange(col.name, value)}
+                  // Removed disabled={isPrimaryKey} to allow editing
+                >
+                  <SelectTrigger className="w-full h-9 min-w-0 rounded-none border-0 bg-orange-50 text-orange-900">
+                    <SelectValue placeholder={`Select ${col.name}`} />
+                  </SelectTrigger>
+                  <SelectContent className="min-w-[8rem]">
+                    {allowedValues.map(value => (
+                      <SelectItem key={value} value={value}>
+                        {value}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </TableCell>
+          );
+        }
+
+        // Default input for other fields (primary key input is now editable)
+        return (
+          <TableCell key={col.name} className="border-x border-neutral-200 p-0">
+            <Input
+              value={rowData[col.name] ?? ''}
+              onChange={(e) => handleChange(col.name, e.target.value)}
+              className="w-full min-w-0 rounded-none border-0 px-2 bg-orange-50 text-orange-900"
+              placeholder={isPrimaryKey ? 'Auto-generated' : `Enter ${col.name}`}
+              // Removed disabled={isPrimaryKey} so primary key can be edited
+            />
+          </TableCell>
+        );
+      })}
+    </TableRow>
+  );
+}

package/src/components/environment-handler.jsx

@@ -0,0 +1,278 @@
+// components/environemtn-handler.jsx
+"use client";
+
+import { useState } from "react";
+import { useToast } from "@/hooks/use-toast";
+import { useDatabase } from "@/context/database-context";
+import PushPreviewToast from "./push-preview-toast";
+import PullPreviewToast from "./pull-preview-toast";
+
+const ErrorTypes = {
+  FOREIGN_KEY_ERROR: "FOREIGN_KEY_ERROR",
+  TABLE_EXISTS: "TABLE_EXISTS",
+  CONNECTION_ERROR: "CONNECTION_ERROR",
+  CONFIG_ERROR: "CONFIG_ERROR",
+  PULL_ERROR: "PULL_ERROR"
+};
+
+export function useEnvironmentController() {
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isPushing, setIsPushing] = 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 [previewSuccess, setPreviewSuccess] = useState(null);
+  const { toast } = useToast();
+  const { refreshTables } = useDatabase();
+
+  const clearPreviewState = () => {
+    setShowPreview(false);
+    setPreviewData(null);
+    setPreviewError(null);
+    setPreviewType(null);
+    setPreviewSuccess(null);
+  };
+
+  // Validate stored credentials
+  const validateStoredCredentials = async () => {
+    const storedCreds = localStorage.getItem("cf_credentials");
+    if (!storedCreds) return null;
+    try {
+      const credentials = JSON.parse(storedCreds);
+      const response = await fetch("/api/cloudflare", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(credentials)
+      });
+      if (!response.ok) throw new Error("Invalid stored credentials");
+      const data = await response.json();
+      return { ...credentials, databaseId: data.database.id };
+    } catch (error) {
+      console.error("Failed to validate stored credentials:", error);
+      localStorage.removeItem("cf_credentials");
+      return null;
+    }
+  };
+
+  // Push to remote preview
+  const pushToRemote = async () => {
+    try {
+      setPreviewType("push");
+      setShowPreview(true);
+      setIsPushing(true);
+      setPreviewError(null);
+      setPreviewSuccess(null);
+      setPreviewData({ preview: [] }); // show loading state
+      
+      const credentials = await validateStoredCredentials();
+      if (!credentials) throw new Error('No valid credentials found');
+      
+      const response = await fetch('/api/push-remote/preview', {
+        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 generate preview');
+      }
+      
+      setPreviewData(data.details.details);
+    } catch (error) {
+      console.error('Push to remote preview failed:', error);
+      setPreviewError(error);
+      toast({
+        title: "Preview Failed",
+        description: error.message || 'Failed to generate preview',
+        variant: "destructive",
+      });
+    } finally {
+      setIsPushing(false);
+    }
+  };
+
+  // Confirm push
+  const confirmPush = async () => {
+    try {
+      setIsPushing(true);
+      setPreviewError(null);
+      setPreviewSuccess(null);
+      
+      const credentials = await validateStoredCredentials();
+      if (!credentials) throw new Error("No valid credentials found");
+  
+      const response = await fetch("/api/push-remote/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 push');
+      }
+
+      // Update the preview data to show applied status
+      setPreviewData(prev => ({
+        ...prev,
+        preview: prev.preview.map(item => ({
+          ...item,
+          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}.`);
+    } catch (error) {
+      console.error("Push to remote confirm failed:", error);
+      setPreviewError(error);
+    } finally {
+      setIsPushing(false);
+    }
+  };
+
+  // Pull to remote preview
+  const pullToRemotePreview = async () => {
+    try {
+      setPreviewType("pull");
+      setShowPreview(true);
+      setIsPushing(true);
+      setPreviewError(null);
+      setPreviewSuccess(null);
+      setPreviewData({ preview: [] }); // show loading state
+
+      const credentials = await validateStoredCredentials();
+      if (!credentials) throw new Error("No valid credentials found");
+      
+      const response = await fetch('/api/pull-remote/preview', {
+        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 generate pull preview');
+      }
+      setPreviewData(data.details);
+    } catch (error) {
+      console.error('Pull to remote preview failed:', error);
+      setPreviewError(error);
+      toast({
+        title: "Preview Failed",
+        description: error.message || 'Failed to generate pull preview',
+        variant: "destructive",
+      });
+    } finally {
+      setIsPushing(false);
+    }
+  };
+
+  // Confirm pull
+  const confirmPull = async () => {
+    try {
+      setIsPushing(true);
+      setPreviewError(null);
+      
+      const credentials = await validateStoredCredentials();
+      if (!credentials) throw new Error("No valid credentials found");
+  
+      const response = await fetch("/api/pull-remote/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 pull');
+      }
+  
+      clearPreviewState();
+      toast({
+        title: "Migration Success",
+        description: `Pull migrations applied successfully.`,
+      });
+      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);
+    }
+  };
+
+  // Connect to Cloudflare
+  async function connectToCloudflare(credentials) {
+    try {
+      setIsConnecting(true);
+      const response = await fetch("/api/cloudflare", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(credentials)
+      });
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || "Failed to connect to Cloudflare");
+      localStorage.setItem("cf_credentials", JSON.stringify({
+        ...credentials,
+        databaseId: data.database.id
+      }));
+      toast({
+        title: "Connected to Cloudflare",
+        description: `Connected to database: ${data.database.name}`,
+        variant: "default"
+      });
+    } catch (error) {
+      toast({
+        title: "Connection Failed",
+        description: error.message || "Failed to connect to Cloudflare",
+        variant: "destructive"
+      });
+      throw error;
+    } finally {
+      setIsConnecting(false);
+    }
+  }
+
+  const PreviewUI = showPreview && (
+    previewType === "pull" ? (
+      <PullPreviewToast
+        preview={previewData?.preview || []}
+        onConfirm={confirmPull}
+        onCancel={clearPreviewState}
+        isConfirming={isPushing}
+        error={previewError}
+        isLoading={isPushing && !previewData?.preview?.length}
+      />
+    ) : (
+      <PushPreviewToast
+        preview={previewData?.preview || []}
+        onConfirm={confirmPush}
+        onCancel={clearPreviewState}
+        isConfirming={isPushing}
+        error={previewError}
+        success={previewSuccess}
+        isLoading={isPushing && !previewData?.preview?.length}
+      />
+    )
+  );
+
+  return {
+    isConnecting,
+    isPushing,
+    showPreview,
+    previewError,
+    pushToRemote,
+    pullToRemotePreview,
+    confirmPull,
+    connectToCloudflare,
+    validateStoredCredentials,
+    PreviewUI
+  };
+}

package/src/components/environment-select.jsx

@@ -0,0 +1,59 @@
+import { 
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { HardDrive, Download, Upload, Loader2 } from 'lucide-react';
+
+export function EnvironmentSelect({ 
+  value, 
+  onValueChange, 
+  isLoading, 
+  disabled,
+  showPreview
+}) {
+  return (
+    <Select
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled || isLoading || showPreview}
+    >
+      <SelectTrigger className="w-[104px] 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..."}
+              </span>
+            </>
+          ) : (
+            <SelectValue placeholder="Environment" />
+          )}
+        </div>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="local">
+          <div className="flex items-center gap-2">
+            <HardDrive className="h-4 w-4" />
+            <span>Local</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="pull">
+          <div className="flex items-center gap-2">  
+            <Download className="h-4 w-4" />
+            <span>Pull remote</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="production">
+          <div className="flex items-center gap-2">
+            <Upload className="h-4 w-4" />
+            <span>Push remote</span>
+          </div>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}

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

@@ -0,0 +1,188 @@
+"use client";
+
+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 { cn } from "@/lib/utils";
+
+export function PullPreviewToast({
+  preview = [],
+  onConfirm,
+  onCancel,
+  isConfirming,
+  error,
+  isLoading,
+}) {
+  console.log("PullPreviewToast rendered with:", {
+    previewLength: preview.length,
+    isConfirming,
+    error,
+    isLoading,
+  });
+
+  useEffect(() => {
+    console.log("PullPreviewToast mounted/updated");
+    return () => console.log("PullPreviewToast unmounted");
+  }, []);
+
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+
+  // Loading state
+  if (isLoading) {
+    console.log("Rendering loading state");
+    return (
+      <div className="fixed bottom-4 right-4 z-50 font-sans w-[600px]">
+        <div className="rounded-lg border p-4 shadow-lg bg-background">
+          <div className="flex items-start gap-3">
+            <Loader2 className="h-5 w-5 text-neutral-600 shrink-0 mt-0.5 animate-spin" />
+            <div className="flex-1 space-y-3">
+              <div className="space-y-1">
+                <p className="font-medium text-neutral-800">
+                  Preparing Pull Migration
+                </p>
+                <p className="text-sm text-neutral-600">
+                  Checking remote migrations...
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!preview?.length) {
+    console.log("No preview data available");
+    return (
+      <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>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Filter migrations to only include files with a ".sql" extension
+  const sqlMigrations = preview.filter((item) => {
+    const migrationName = item.migration || item.name || "";
+    return migrationName.endsWith(".sql");
+  });
+
+  // Count only SQL migrations for the header
+  const totalMigrations = sqlMigrations.length;
+  console.log("Migration stats:", { totalMigrations });
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 font-sans w-[600px]">
+      <div
+        className={cn(
+          "rounded-lg border p-4 shadow-lg",
+          error ? "bg-destructive/15" : "bg-background"
+        )}
+      >
+        <div className="flex items-start gap-3">
+          <div className="flex-1 space-y-3">
+            {/* Header */}
+            <div className="space-y-1">
+              <h5
+                className={cn(
+                  "font-medium",
+                  error ? "text-destructive" : "text-neutral-900"
+                )}
+              >
+                {error ? "Pull Migration Error" : "Pull Migration Preview"}
+              </h5>
+              <p
+                className={cn(
+                  "text-sm",
+                  error ? "text-destructive/80" : "text-neutral-700"
+                )}
+              >
+                {error
+                  ? error.message
+                  : `${totalMigrations} migration(s) will be applied`}
+              </p>
+            </div>
+
+            {/* Migration Details */}
+            <div>
+              <button
+                onClick={() => setIsDetailsOpen(!isDetailsOpen)}
+                className="text-sm font-medium hover:underline"
+              >
+                {isDetailsOpen ? "Hide Details" : "Show Details"}
+              </button>
+
+              {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>
+                      {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">
+                            {item.migration || item.name}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </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>
+              <Button
+                variant="outline"
+                onClick={onCancel}
+                disabled={isConfirming}
+                className="flex-1"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PullPreviewToast;