fix: ui enhancements

src/App.css

@@ -711,7 +711,8 @@
   font-weight: 600;
 }
 
-.data-table-container {
+/* Data table container for Step2 preview - specific class to avoid conflicts */
+.step2-data-table-container {
   width: 100%;
   max-height: 400px;
   overflow: auto;
@@ -719,13 +720,18 @@
   border-radius: 8px;
   box-shadow: var(--shadow-md);
   background: var(--bg-secondary);
+  position: relative;
+  /* Ensure scrolling works properly */
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-light) var(--bg-tertiary);
 }
 
 .data-table-scrollable {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.8rem;
-  min-width: 600px; /* Ensure minimum width for horizontal scrolling */
+  min-width: 600px; /* Increased minimum width to ensure horizontal scrolling */
+  table-layout: auto; /* Allow flexible column sizing */
 }
 
 .data-table-scrollable th,
@@ -738,7 +744,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px; /* Limit column width */
-  min-width: 100px; /* Minimum column width */
+  min-width: 120px; /* Increased minimum column width */
+  vertical-align: top;
 }
 
 .data-table-scrollable th {
@@ -772,25 +779,37 @@
 }
 
 /* Custom scrollbar for the data table container */
-.data-table-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+.data-table-container::-webkit-scrollbar,
+.step2-data-table-container::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
 }
 
-.data-table-container::-webkit-scrollbar-track {
+.data-table-container::-webkit-scrollbar-track,
+.step2-data-table-container::-webkit-scrollbar-track {
   background: var(--bg-tertiary);
-  border-radius: 4px;
+  border-radius: 6px;
+  margin: 2px;
 }
 
-.data-table-container::-webkit-scrollbar-thumb {
+.data-table-container::-webkit-scrollbar-thumb,
+.step2-data-table-container::-webkit-scrollbar-thumb {
   background: var(--border-light);
-  border-radius: 4px;
+  border-radius: 6px;
+  border: 2px solid var(--bg-tertiary);
+  min-height: 20px;
 }
 
-.data-table-container::-webkit-scrollbar-thumb:hover {
+.data-table-container::-webkit-scrollbar-thumb:hover,
+.step2-data-table-container::-webkit-scrollbar-thumb:hover {
   background: var(--primary-color);
 }
 
+.data-table-container::-webkit-scrollbar-corner,
+.step2-data-table-container::-webkit-scrollbar-corner {
+  background: var(--bg-tertiary);
+}
+
 /* Legacy data-table styles for backward compatibility */
 .data-table {
   width: 100%;

src/App.js

@@ -10,17 +10,12 @@ import { ApiService } from "./utils/apiService";
 // Make ApiService available globally for debugging
 if (process.env.NODE_ENV === "development") {
   window.ApiService = ApiService;
-  console.log("[Debug] ApiService is available globally as window.ApiService");
 }
 
 function App() {
   const [apiKey, setApiKey] = useState("");
   const [isApiKeyValid, setIsApiKeyValid] = useState(false); // Explicitly initialized to false
 
-  // Debug log when API key validity changes
-  useEffect(() => {
-    console.log("[App] API key validity changed:", isApiKeyValid);
-  }, [isApiKeyValid]);
   const [uploadedFile, setUploadedFile] = useState(null);
   const [s3Link, setS3Link] = useState("");
   const [fileMetadata, setFileMetadata] = useState({

src/components/DataViewer.js

@@ -91,7 +91,6 @@ const DataViewer = ({ s3Url, onDownload, showPreviewOnly = false }) => {
         throw new Error("No valid data rows found in the file");
       }
     } catch (err) {
-      console.error("Error fetching data:", err);
       setError(err.message);
       debugLog("Error fetching data:", err);
     } finally {
@@ -207,15 +206,18 @@ const DataViewer = ({ s3Url, onDownload, showPreviewOnly = false }) => {
                   textAlign: "left",
                 }}
               >
-                <li>
-                  <strong>Download the file directly</strong> using the button
-                  below
-                </li>
+                {!showPreviewOnly && (
+                  <li>
+                    <strong>Download the file directly</strong> using the button
+                    below
+                  </li>
+                )}
                 <li>
                   The preview may fail due to browser security restrictions
                 </li>
                 <li>
-                  Your generated data is still available and ready to download
+                  Your generated data is still available and ready
+                  {showPreviewOnly ? "" : " to download"}
                 </li>
               </ul>
             </div>
@@ -225,21 +227,23 @@ const DataViewer = ({ s3Url, onDownload, showPreviewOnly = false }) => {
           className="error-actions"
           style={{ marginTop: "1.5rem", textAlign: "center" }}
         >
-          <button
-            className="btn btn-primary btn-large"
-            onClick={handleDownload}
-            style={{
-              marginRight: "0.75rem",
-              padding: "12px 24px",
-              fontSize: "1rem",
-            }}
-          >
-            📥 Download Generated Data
-          </button>
+          {!showPreviewOnly && (
+            <button
+              className="btn btn-primary btn-large"
+              onClick={handleDownload}
+              style={{
+                marginRight: "0.75rem",
+                padding: "12px 24px",
+                fontSize: "1rem",
+              }}
+            >
+              📥 Download Generated Data
+            </button>
+          )}
           <button
             className="btn btn-secondary"
             onClick={() => fetchData()}
-            style={{ marginLeft: "0.75rem" }}
+            style={{ marginLeft: showPreviewOnly ? "0" : "0.75rem" }}
           >
             🔄 Try Preview Again
           </button>
@@ -289,11 +293,13 @@ const DataViewer = ({ s3Url, onDownload, showPreviewOnly = false }) => {
             <p>The generated file appears to be empty.</p>
           </div>
         </div>
-        <div className="download-section" style={{ marginTop: "1rem" }}>
-          <button className="btn btn-primary" onClick={handleDownload}>
-            📥 Download File
-          </button>
-        </div>
+        {!showPreviewOnly && (
+          <div className="download-section" style={{ marginTop: "1rem" }}>
+            <button className="btn btn-primary" onClick={handleDownload}>
+              📥 Download File
+            </button>
+          </div>
+        )}
       </div>
     );
   }

src/components/Step1.js

@@ -43,13 +43,6 @@ const Step1 = ({
       });
 
       const isValid = result.success && result.data && result.data.isValid;
-      console.log("[Step1] Validation result details:", {
-        result,
-        isValid,
-        success: result.success,
-        hasData: !!result.data,
-        dataIsValid: result.data?.isValid,
-      });
 
       setIsApiKeyValid(isValid);
       setValidationMessage(

src/components/Step2.js

@@ -131,11 +131,6 @@ const Step2 = ({
       });
     } catch (error) {
       debugLog("File upload failed", error);
-      console.error("File upload error details:", {
-        error: error,
-        message: error.message,
-        stack: error.stack,
-      });
 
       // More specific error messages
       let errorMessage = "Failed to upload file. Please try again.";
@@ -202,7 +197,7 @@ const Step2 = ({
           📊 Data Preview ({csvData.length} rows total, showing first{" "}
           {previewData.length})
         </h4>
-        <div className="data-table-container">
+        <div className="step2-data-table-container">
           <table className="data-table-scrollable">
             <thead>
               <tr>

src/components/Step3.js

@@ -110,26 +110,6 @@ const Step3 = ({
       </div>
 
       <div className="step-body">
-        {!enabled && (
-          <div
-            className="status-message warning"
-            style={{ marginBottom: "1.5rem" }}
-          >
-            <div className="status-message-icon">⚠️</div>
-            <div className="status-message-content">
-              <h4>Prerequisites Required</h4>
-              <p>
-                Please complete the previous steps before configuring data
-                generation settings.
-              </p>
-              <div style={{ marginTop: "0.5rem", fontSize: "0.875rem" }}>
-                <div>• {isApiKeyValid ? "✅" : "❌"} API Key Validation</div>
-                <div>• {uploadedFile && s3Link ? "✅" : "❌"} File Upload</div>
-              </div>
-            </div>
-          </div>
-        )}
-
         <div className="config-section">
           <h3>
             <span className="config-icon">📊</span>
@@ -181,7 +161,7 @@ const Step3 = ({
             </h3>
             <div
               style={{
-                display: "flex", 
+                display: "flex",
                 flexWrap: "wrap",
                 gap: "0.5rem",
                 marginTop: "1rem",

src/components/Step4.js

@@ -216,30 +216,6 @@ const Step4 = ({
       <div className="step-body">
         {!generatedDataLink && !isGenerating && !hasError && (
           <div className="generate-section">
-            {!enabled && (
-              <div
-                className="status-message warning"
-                style={{ marginBottom: "1.5rem" }}
-              >
-                <div className="status-message-icon">⚠️</div>
-                <div className="status-message-content">
-                  <h4>Prerequisites Required</h4>
-                  <p>
-                    Please complete all previous steps before generating
-                    synthetic data.
-                  </p>
-                  <div style={{ marginTop: "0.5rem", fontSize: "0.875rem" }}>
-                    <div>• {apiKey ? "✅" : "❌"} API Key Validation</div>
-                    <div>• {s3Link ? "✅" : "❌"} File Upload</div>
-                    <div>
-                      • {generationConfig.targetColumn ? "✅" : "❌"}{" "}
-                      Configuration
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-
             <div
               className={`status-message ${
                 isReadyForGeneration ? "info" : "warning"
@@ -411,58 +387,78 @@ const Step4 = ({
 
         {generatedDataLink && !isGenerating && (
           <div className="results-section">
-            <div className="status-message success">
+            <div
+              className="status-message success"
+              style={{ marginBottom: "1.5rem" }}
+            >
               <div className="status-message-icon">🎉</div>
               <div className="status-message-content">
                 <h4>Generation Complete!</h4>
-                <p>Your synthetic data has been generated successfully.</p>
-                <div
-                  className="success-details"
-                  style={{ marginTop: "0.5rem" }}
-                >
-                  <div className="success-stat">
-                    <span className="success-label">📊 Target Column:</span>
-                    <span className="success-value">
-                      {generationConfig.targetColumn}
-                    </span>
-                  </div>
-                  <div className="success-stat">
-                    <span className="success-label">📈 Rows Generated:</span>
-                    <span className="success-value">
-                      {generationConfig.numRows}
-                    </span>
-                  </div>
-                </div>
+                <p style={{ margin: "0.5rem 0" }}>
+                  Successfully generated {generationConfig.numRows} rows of
+                  synthetic data targeting the{" "}
+                  <strong>{generationConfig.targetColumn}</strong> column.
+                </p>
               </div>
             </div>
 
             <div
-              className="download-actions"
-              style={{ marginTop: "1.5rem", textAlign: "center" }}
+              className="data-preview-section"
+              style={{ marginTop: "1.5rem" }}
             >
-              <button
-                className="btn btn-success download-btn-primary"
-                onClick={handleDownload}
-                style={{ marginRight: "1rem" }}
+              <div
+                className="preview-header"
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  marginBottom: "1rem",
+                  flexWrap: "wrap",
+                  gap: "1rem",
+                }}
               >
-                📥 Download Generated Data
-              </button>
-              <button className="btn btn-outline" onClick={handleCopyLink}>
-                📋 Copy Link
-              </button>
-            </div>
+                <h4 style={{ margin: 0, color: "var(--text-primary)" }}>
+                  📊 Data Preview
+                </h4>
+                <div
+                  className="action-buttons"
+                  style={{
+                    display: "flex",
+                    gap: "0.75rem",
+                    flexWrap: "wrap",
+                  }}
+                >
+                  <button
+                    className="btn btn-success"
+                    onClick={handleDownload}
+                    title="Download the generated synthetic data file"
+                  >
+                    📥 Download
+                  </button>
+                  <button
+                    className="btn btn-outline"
+                    onClick={handleCopyLink}
+                    title="Copy download link to clipboard"
+                  >
+                    📋 Copy Link
+                  </button>
+                  <button
+                    className="btn btn-secondary"
+                    onClick={() => {
+                      setGeneratedDataLink("");
+                      setGenerationProgress(0);
+                      setGenerationStatus("");
+                      setHasError(false);
+                      setErrorMessage("");
+                    }}
+                    title="Generate new synthetic data with different parameters"
+                  >
+                    🔄 New Generation
+                  </button>
+                </div>
+              </div>
 
-            <div className="data-preview-section" style={{ marginTop: "2rem" }}>
-              <h4
-                style={{ marginBottom: "1rem", color: "var(--text-primary)" }}
-              >
-                📊 Data Preview
-              </h4>
-              <DataViewer
-                s3Url={generatedDataLink}
-                onDownload={handleDownload}
-                showPreviewOnly={true}
-              />
+              <DataViewer s3Url={generatedDataLink} showPreviewOnly={true} />
 
               <div
                 className="preview-info"
@@ -476,29 +472,10 @@ const Step4 = ({
                   textAlign: "center",
                 }}
               >
-                💡 If the preview doesn't load, don't worry! Your data has been
-                generated successfully. Click the download button above to get
-                your file.
+                💡 Showing preview of first few rows. Download the complete file
+                ({generationConfig.numRows} rows) using the button above.
               </div>
             </div>
-
-            <div
-              className="generate-new-section"
-              style={{ marginTop: "2rem", textAlign: "center" }}
-            >
-              <button
-                className="btn btn-secondary"
-                onClick={() => {
-                  setGeneratedDataLink("");
-                  setGenerationProgress(0);
-                  setGenerationStatus("");
-                  setHasError(false);
-                  setErrorMessage("");
-                }}
-              >
-                🔄 Generate New Data
-              </button>
-            </div>
           </div>
         )}
       </div>

src/components/TroubleshootingGuide.js

@@ -2,111 +2,367 @@ import React, { useState } from "react";
 
 const TroubleshootingGuide = ({ generatedDataLink, onDownload }) => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [copySuccess, setCopySuccess] = useState(false);
 
-  return (
-    <div className="troubleshooting-guide" style={{ marginTop: "1rem" }}>
-      <button
-        className="btn btn-outline btn-small"
-        onClick={() => setIsExpanded(!isExpanded)}
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "0.5rem",
-          fontSize: "0.875rem",
-          padding: "0.5rem 1rem",
-        }}
-      >
-        {isExpanded ? "🔽" : "🔍"} Troubleshooting Guide
-      </button>
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(generatedDataLink);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  // Add keyframes for animations
+  const keyframes = `
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    
+    @keyframes pulse {
+      0%, 100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
+    }
+  `;
 
-      {isExpanded && (
-        <div
-          className="troubleshooting-content"
+  return (
+    <>
+      <style>{keyframes}</style>
+      <div className="troubleshooting-guide" style={{ marginTop: "2rem" }}>
+        <button
+          className="btn btn-outline btn-small"
+          onClick={() => setIsExpanded(!isExpanded)}
           style={{
-            marginTop: "1rem",
-            padding: "1rem",
-            background: "var(--bg-tertiary)",
-            borderRadius: "8px",
-            border: "1px solid var(--border-color)",
-            fontSize: "0.875rem",
-            lineHeight: "1.6",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "0.75rem",
+            fontSize: "0.9rem",
+            padding: "0.75rem 1.5rem",
+            borderRadius: "12px",
+            background: isExpanded
+              ? "linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1))"
+              : "var(--bg-secondary)",
+            border: isExpanded
+              ? "2px solid rgba(59, 130, 246, 0.3)"
+              : "2px solid var(--border-color)",
+            transition: "all 0.3s ease",
+            boxShadow: isExpanded
+              ? "0 4px 12px rgba(59, 130, 246, 0.15)"
+              : "0 2px 4px rgba(0, 0, 0, 0.1)",
+            fontWeight: "600",
+            color: "var(--text-primary)",
           }}
         >
-          <h5 style={{ marginBottom: "1rem", color: "var(--text-primary)" }}>
-            🛠️ Common Issues and Solutions
-          </h5>
-
-          <div
-            className="troubleshooting-section"
-            style={{ marginBottom: "1rem" }}
+          <span
+            style={{
+              fontSize: "1.1rem",
+              transition: "transform 0.3s ease",
+              transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+            }}
           >
-            <strong>📱 Preview not working?</strong>
-            <ul style={{ marginTop: "0.5rem", paddingLeft: "1.5rem" }}>
-              <li>
-                This is normal! Browser security prevents previewing some files
-              </li>
-              <li>Your data has been generated successfully</li>
-              <li>Click the download button to get your file</li>
-            </ul>
-          </div>
-
-          <div
-            className="troubleshooting-section"
-            style={{ marginBottom: "1rem" }}
+            {isExpanded ? "🔼" : "🔼"}
+          </span>
+          Troubleshooting Guide
+          <span
+            style={{
+              fontSize: "0.75rem",
+              opacity: 0.7,
+              fontWeight: "normal",
+            }}
           >
-            <strong>💾 Download not working?</strong>
-            <ul style={{ marginTop: "0.5rem", paddingLeft: "1.5rem" }}>
-              <li>Check if your browser blocked popups</li>
-              <li>
-                Try right-clicking the download button and select "Open in new
-                tab"
-              </li>
-              <li>Copy the link and paste it in a new browser tab</li>
-            </ul>
-          </div>
+            {isExpanded ? "Click to hide" : "Need help?"}
+          </span>
+        </button>
 
+        {isExpanded && (
           <div
-            className="troubleshooting-section"
-            style={{ marginBottom: "1rem" }}
+            className="troubleshooting-content"
+            style={{
+              marginTop: "1.5rem",
+              padding: "2rem",
+              background:
+                "linear-gradient(135deg, var(--bg-tertiary), rgba(255, 255, 255, 0.02))",
+              borderRadius: "16px",
+              border: "1px solid rgba(255, 255, 255, 0.1)",
+              fontSize: "0.9rem",
+              lineHeight: "1.7",
+              boxShadow: "0 8px 32px rgba(0, 0, 0, 0.1)",
+              backdropFilter: "blur(10px)",
+              animation: "fadeInUp 0.4s ease-out",
+            }}
           >
-            <strong>🔗 Direct download link:</strong>
             <div
               style={{
-                marginTop: "0.5rem",
-                padding: "0.5rem",
-                background: "var(--bg-secondary)",
-                borderRadius: "4px",
-                fontFamily: "monospace",
-                fontSize: "0.75rem",
-                wordBreak: "break-all",
-                border: "1px solid var(--border-color)",
+                display: "flex",
+                alignItems: "center",
+                gap: "0.75rem",
+                marginBottom: "1.5rem",
+                paddingBottom: "1rem",
+                borderBottom: "2px solid rgba(255, 255, 255, 0.1)",
               }}
             >
-              {generatedDataLink}
-            </div>
-            <div style={{ marginTop: "0.5rem", textAlign: "center" }}>
-              <button
-                className="btn btn-small"
-                onClick={() => navigator.clipboard.writeText(generatedDataLink)}
-                style={{ fontSize: "0.75rem", padding: "0.25rem 0.5rem" }}
+              <span style={{ fontSize: "1.5rem" }}>🛠️</span>
+              <h5
+                style={{
+                  margin: 0,
+                  color: "var(--text-primary)",
+                  fontSize: "1.1rem",
+                  fontWeight: "700",
+                  background: "linear-gradient(135deg, #3b82f6, #9333ea)",
+                  backgroundClip: "text",
+                  WebkitBackgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                }}
               >
-                📋 Copy Link
-              </button>
+                Common Issues and Solutions
+              </h5>
             </div>
-          </div>
 
-          <div className="troubleshooting-section">
-            <strong>❓ Still having issues?</strong>
-            <ul style={{ marginTop: "0.5rem", paddingLeft: "1.5rem" }}>
-              <li>Try using a different browser (Chrome, Firefox, Safari)</li>
-              <li>Disable browser extensions temporarily</li>
-              <li>Check if your antivirus is blocking downloads</li>
-              <li>Contact support if problems persist</li>
-            </ul>
+            <div
+              className="troubleshooting-sections"
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: "1.5rem",
+              }}
+            >
+              <div
+                className="troubleshooting-section"
+                style={{
+                  padding: "1.25rem",
+                  background: "rgba(59, 130, 246, 0.05)",
+                  borderRadius: "12px",
+                  border: "1px solid rgba(59, 130, 246, 0.2)",
+                  borderLeft: "4px solid #3b82f6",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    marginBottom: "0.75rem",
+                  }}
+                >
+                  <span style={{ fontSize: "1.2rem" }}>📱</span>
+                  <strong
+                    style={{ color: "var(--text-primary)", fontSize: "1rem" }}
+                  >
+                    Preview not working?
+                  </strong>
+                </div>
+                <ul
+                  style={{
+                    margin: 0,
+                    paddingLeft: "1.5rem",
+                    color: "var(--text-secondary)",
+                  }}
+                >
+                  <li style={{ marginBottom: "0.5rem" }}>
+                    <span style={{ color: "#10b981", fontWeight: "600" }}>
+                      ✓
+                    </span>{" "}
+                    This is normal! Browser security prevents previewing some
+                    files
+                  </li>
+                  <li style={{ marginBottom: "0.5rem" }}>
+                    <span style={{ color: "#10b981", fontWeight: "600" }}>
+                      ✓
+                    </span>{" "}
+                    Your data has been generated successfully
+                  </li>
+                  <li>
+                    <span style={{ color: "#3b82f6", fontWeight: "600" }}>
+                      →
+                    </span>{" "}
+                    Click the download button to get your file
+                  </li>
+                </ul>
+              </div>
+
+              <div
+                className="troubleshooting-section"
+                style={{
+                  padding: "1.25rem",
+                  background: "rgba(245, 158, 11, 0.05)",
+                  borderRadius: "12px",
+                  border: "1px solid rgba(245, 158, 11, 0.2)",
+                  borderLeft: "4px solid #f59e0b",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    marginBottom: "0.75rem",
+                  }}
+                >
+                  <span style={{ fontSize: "1.2rem" }}>💾</span>
+                  <strong
+                    style={{ color: "var(--text-primary)", fontSize: "1rem" }}
+                  >
+                    Download not working?
+                  </strong>
+                </div>
+                <ul
+                  style={{
+                    margin: 0,
+                    paddingLeft: "1.5rem",
+                    color: "var(--text-secondary)",
+                  }}
+                >
+                  <li style={{ marginBottom: "0.5rem" }}>
+                    Check if your browser blocked popups
+                  </li>
+                  <li style={{ marginBottom: "0.5rem" }}>
+                    Try right-clicking the download button and select "Open in
+                    new tab"
+                  </li>
+                  <li>Copy the link and paste it in a new browser tab</li>
+                </ul>
+              </div>
+
+              <div
+                className="troubleshooting-section"
+                style={{
+                  padding: "1.25rem",
+                  background: "rgba(147, 51, 234, 0.05)",
+                  borderRadius: "12px",
+                  border: "1px solid rgba(147, 51, 234, 0.2)",
+                  borderLeft: "4px solid #9333ea",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    marginBottom: "0.75rem",
+                  }}
+                >
+                  <span style={{ fontSize: "1.2rem" }}>🔗</span>
+                  <strong
+                    style={{ color: "var(--text-primary)", fontSize: "1rem" }}
+                  >
+                    Direct download link:
+                  </strong>
+                </div>
+                <div
+                  style={{
+                    marginTop: "0.75rem",
+                    padding: "1rem",
+                    background: "rgba(0, 0, 0, 0.3)",
+                    borderRadius: "8px",
+                    fontFamily:
+                      "Monaco, 'Cascadia Code', 'Roboto Mono', monospace",
+                    fontSize: "0.8rem",
+                    wordBreak: "break-all",
+                    border: "1px solid rgba(255, 255, 255, 0.1)",
+                    color: "#e5e7eb",
+                    position: "relative",
+                    overflow: "hidden",
+                  }}
+                >
+                  <div
+                    style={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      height: "2px",
+                      background:
+                        "linear-gradient(90deg, #3b82f6, #9333ea, #10b981)",
+                    }}
+                  />
+                  {generatedDataLink}
+                </div>
+                <div style={{ marginTop: "1rem", textAlign: "center" }}>
+                  <button
+                    className="btn btn-small"
+                    onClick={handleCopyLink}
+                    style={{
+                      fontSize: "0.85rem",
+                      padding: "0.5rem 1rem",
+                      borderRadius: "8px",
+                      background: copySuccess
+                        ? "linear-gradient(135deg, #10b981, #059669)"
+                        : "linear-gradient(135deg, #3b82f6, #2563eb)",
+                      border: "none",
+                      color: "white",
+                      fontWeight: "600",
+                      transition: "all 0.3s ease",
+                      transform: copySuccess ? "scale(1.05)" : "scale(1)",
+                      boxShadow: "0 4px 12px rgba(59, 130, 246, 0.3)",
+                    }}
+                  >
+                    {copySuccess ? "✅ Copied!" : "📋 Copy Link"}
+                  </button>
+                </div>
+              </div>
+
+              <div
+                className="troubleshooting-section"
+                style={{
+                  padding: "1.25rem",
+                  background: "rgba(239, 68, 68, 0.05)",
+                  borderRadius: "12px",
+                  border: "1px solid rgba(239, 68, 68, 0.2)",
+                  borderLeft: "4px solid #ef4444",
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    marginBottom: "0.75rem",
+                  }}
+                >
+                  <span style={{ fontSize: "1.2rem" }}>❓</span>
+                  <strong
+                    style={{ color: "var(--text-primary)", fontSize: "1rem" }}
+                  >
+                    Still having issues?
+                  </strong>
+                </div>
+                <ul
+                  style={{
+                    margin: 0,
+                    paddingLeft: "1.5rem",
+                    color: "var(--text-secondary)",
+                  }}
+                >
+                  <li style={{ marginBottom: "0.5rem" }}>
+                    Try using a different browser (Chrome, Firefox, Safari)
+                  </li>
+                  <li style={{ marginBottom: "0.5rem" }}>
+                    Disable browser extensions temporarily
+                  </li>
+                  <li style={{ marginBottom: "0.5rem" }}>
+                    Check if your antivirus is blocking downloads
+                  </li>
+                  <li>Contact support if problems persist</li>
+                </ul>
+              </div>
+            </div>
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </>
   );
 };
 

src/utils/apiService.js

@@ -24,7 +24,6 @@ const getS3Client = () => {
     const error = new Error(
       "AWS credentials not configured. Please set REACT_APP_AWS_ACCESS_KEY_ID and REACT_APP_AWS_SECRET_ACCESS_KEY"
     );
-    console.error("[AWS Error] Missing credentials:", error);
     throw error;
   }
 
@@ -40,7 +39,6 @@ const getS3Client = () => {
     debugLog("S3 client created successfully");
     return client;
   } catch (error) {
-    console.error("[AWS Error] Error creating S3 client:", error);
     debugLog("Error creating S3 client:", error);
     throw error;
   }
@@ -97,16 +95,12 @@ export class ApiService {
 
       // Validate AWS Access Key format
       if (!config.awsAccessKeyId.startsWith("AKIA")) {
-        console.warn(
-          "[AWS Connection] Access Key does not start with AKIA - this might be invalid"
-        );
+        // Access Key validation warning removed
       }
 
       // Validate Secret Key length (should be 40 characters)
       if (config.awsSecretAccessKey.length !== 40) {
-        console.warn(
-          "[AWS Connection] Secret Key length is not 40 characters - this might be invalid"
-        );
+        // Secret Key validation warning removed
       }
 
       if (!config.s3BucketName) {

src/utils/config.js

@@ -63,7 +63,7 @@ export const getGenerationUrl = () => `${config.apiBaseUrl}/ai/execute`;
 // Debug logging utility
 export const debugLog = (message, data = null) => {
   if (config.debugMode || process.env.NODE_ENV === "development") {
-    console.log(`[DEBUG] ${message}`, data || "");
+    // Debug logging disabled
   }
 };
 
@@ -81,7 +81,7 @@ const validateConfig = () => {
   );
 
   if (missing.length > 0) {
-    console.warn("Missing environment variables:", missing);
+    // Environment variables validation warning removed
   }
 };