feat: update connectiontab and datatab security fix (#1614)

* feat: update connectiontab and datatab security fix

# Connection Components and Diagnostics Updates

## GitHub Connection Component Changes
- Updated the disconnect button styling to match Vercel's design:
  - Changed from `<Button>` component to native `<button>` element
  - Added red background (`bg-red-500`) with hover effect (`hover:bg-red-600`)
  - Updated icon from `i-ph:sign-out` to `i-ph:plug`
  - Simplified text to just "Disconnect"
  - Added connection status indicator with check-circle icon and "Connected to GitHub" text

## ConnectionDiagnostics Tab Updates
### Added New Connection Diagnostics
- Implemented diagnostics for Vercel and Supabase connections
- Added new helper function `safeJsonParse` for safer JSON parsing operations

### Diagnostic Checks Added
- **Vercel Diagnostics:**
  - LocalStorage token verification
  - API endpoint connectivity test
  - Connection status validation
  - Reset functionality for Vercel connection

- **Supabase Diagnostics:**
  - LocalStorage credentials verification
  - API endpoint connectivity test
  - Connection status validation
  - Reset functionality for Supabase connection

### UI Enhancements
- Added new status cards for Vercel and Supabase
- Implemented reset buttons with consistent styling
- Added loading states during diagnostics
- Enhanced error handling and user feedback

### Function Updates
- Extended `runDiagnostics` function to include Vercel and Supabase checks
- Added new reset helper functions for each connection type
- Improved error handling and status reporting
- Enhanced toast notifications for better user feedback

### Visual Consistency
- Matched styling of new diagnostic cards with existing GitHub and Netlify cards
- Consistent use of icons and status indicators
- Uniform button styling across all connection types
- Maintained consistent spacing and layout patterns

### Code Structure
- Organized diagnostic checks into clear, separate sections
- Improved error handling and type safety
- Enhanced code readability and maintainability
- Added comprehensive status compilation for all connections

These changes ensure a consistent user experience across all connection types while providing robust diagnostic capabilities for troubleshooting connection issues.

# DataTab.tsx Changes

## Code Cleanup
- Removed unused variables from useDataOperations hook:
  - Removed `handleExportAPIKeys`
  - Removed `handleUndo`
  - Removed `lastOperation`

This change improves code quality by removing unused variables and resolves ESLint warnings without affecting any functionality.

* Test commit to verify pre-commit hook

app/components/workbench/Preview.tsx

@@ -593,7 +593,10 @@ export const Preview = memo(() => {
      * Intentionally disabled - we want to maintain scale of 1
      * No dynamic scaling to ensure device frame matches external window exactly
      */
-    return () => {};
+    // Intentionally empty cleanup function - no cleanup needed
+    return () => {
+      // No cleanup needed
+    };
   }, [isDeviceModeOn, showDeviceFrameInPreview, getDeviceScale, isLandscape, selectedWindowSize]);
 
   // Function to get the frame color based on dark mode
@@ -711,6 +714,37 @@ export const Preview = memo(() => {
             title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}
           />
 
+          {/* Simple preview button */}
+          <IconButton
+            icon="i-ph:browser"
+            onClick={() => {
+              if (!activePreview?.baseUrl) {
+                console.warn('[Preview] No active preview available');
+                return;
+              }
+
+              const match = activePreview.baseUrl.match(
+                /^https?:\/\/([^.]+)\.local-credentialless\.webcontainer-api\.io/,
+              );
+
+              if (!match) {
+                console.warn('[Preview] Invalid WebContainer URL:', activePreview.baseUrl);
+                return;
+              }
+
+              const previewId = match[1];
+              const previewUrl = `/webcontainer/preview/${previewId}`;
+
+              // Open in a new window with simple parameters
+              window.open(
+                previewUrl,
+                `preview-${previewId}`,
+                'width=1280,height=720,menubar=no,toolbar=no,location=no,status=no,resizable=yes',
+              );
+            }}
+            title="Open Preview in New Window"
+          />
+
           <div className="flex items-center relative">
             <IconButton
               icon="i-ph:arrow-square-out"