initial project

.history/src/App_20251001202454.tsx

@@ -0,0 +1,599 @@
+import React, { useState, useMemo } from 'react';
+import { ChevronDown, ChevronRight, CheckCircle, XCircle, AlertCircle, Code, FileText } from 'lucide-react';
+
+// ============================================================================
+// TYPES & INTERFACES - Centralized type definitions for type safety
+// ============================================================================
+
+// Main data structure interface matching backend JSON
+interface APITestData {
+  url: string;
+  api: APIEndpoint[];
+}
+
+interface APIEndpoint {
+  title: string;
+  method: string;
+  endpoint: string;
+  description: string;
+  urlParams: Parameter[];
+  query: Parameter[];
+  headers: Header[];
+  body: BodySchema;
+  testCases: TestCase[];
+}
+
+interface Parameter {
+  name: string;
+  type: string;
+  example: any;
+  required: boolean;
+  description?: string;
+}
+
+interface Header {
+  name: string;
+  type: string;
+  example: string;
+  required: boolean;
+}
+
+interface BodySchema {
+  required: boolean;
+  fields: any[];
+}
+
+interface TestCase {
+  id: number;
+  title: string;
+  input: TestInput;
+  expectedResponse: Response;
+  actualResponse: Response;
+  status: 'passed' | 'failed';
+}
+
+interface TestInput {
+  urlParams: Record<string, any>;
+  query: Record<string, any>;
+  headers: Record<string, any>;
+  body: Record<string, any>;
+}
+
+interface Response {
+  statusCode: number;
+  body: Record<string, any>;
+}
+
+// ============================================================================
+// MOCK DATA - Replace with props from backend
+// ============================================================================
+
+const mockData: APITestData = {
+  "url": "https://jsonplaceholder.typicode.com",
+  "api": [
+    {
+      "title": "Get User Details",
+      "method": "GET",
+      "endpoint": "/users/{userId}",
+      "description": "Fetch user details by ID",
+      "urlParams": [
+        {
+          "name": "userId",
+          "type": "integer",
+          "example": 123,
+          "required": true,
+          "description": "Unique identifier of the user"
+        }
+      ],
+      "query": [
+        {
+          "name": "includePosts",
+          "type": "boolean",
+          "example": true,
+          "required": false,
+          "description": "Whether to include user posts"
+        }
+      ],
+      "headers": [
+        {
+          "name": "Authorization",
+          "type": "string",
+          "example": "Bearer <token>",
+          "required": true
+        }
+      ],
+      "body": {
+        "required": false,
+        "fields": []
+      },
+      "testCases": [
+        {
+          "id": 1,
+          "title": "Valid userId with includePosts=true",
+          "input": {
+            "urlParams": {
+              "userId": 123
+            },
+            "query": {
+              "includePosts": true
+            },
+            "headers": {
+              "Authorization": "Bearer valid_token"
+            },
+            "body": {}
+          },
+          "expectedResponse": {
+            "statusCode": 200,
+            "body": {
+              "id": 123,
+              "name": "John Doe",
+              "posts": []
+            }
+          },
+          "actualResponse": {
+            "statusCode": 200,
+            "body": {
+              "id": 123,
+              "name": "John Doe",
+              "posts": []
+            }
+          },
+          "status": "passed"
+        },
+        {
+          "id": 2,
+          "title": "Invalid userId",
+          "input": {
+            "urlParams": {
+              "userId": 9999
+            },
+            "query": {
+              "includePosts": false
+            },
+            "headers": {
+              "Authorization": "Bearer valid_token"
+            },
+            "body": {}
+          },
+          "expectedResponse": {
+            "statusCode": 404,
+            "body": {
+              "error": "User not found"
+            }
+          },
+          "actualResponse": {
+            "statusCode": 404,
+            "body": {
+              "error": "User not found"
+            }
+          },
+          "status": "passed"
+        },
+        {
+          "id": 3,
+          "title": "Missing authorization header",
+          "input": {
+            "urlParams": {
+              "userId": 123
+            },
+            "query": {
+              "includePosts": true
+            },
+            "headers": {},
+            "body": {}
+          },
+          "expectedResponse": {
+            "statusCode": 401,
+            "body": {
+              "error": "Unauthorized"
+            }
+          },
+          "actualResponse": {
+            "statusCode": 403,
+            "body": {
+              "error": "Forbidden"
+            }
+          },
+          "status": "failed"
+        }
+      ]
+    }
+  ]
+};
+
+// ============================================================================
+// UTILITY FUNCTIONS - Pure helper functions
+// ============================================================================
+
+// Calculate test statistics for an API endpoint
+const calculateStats = (testCases: TestCase[]) => {
+  const total = testCases.length;
+  const passed = testCases.filter(tc => tc.status === 'passed').length;
+  const failed = testCases.filter(tc => tc.status === 'failed').length;
+  const passRate = total > 0 ? ((passed / total) * 100).toFixed(1) : '0';
+  
+  return { total, passed, failed, passRate };
+};
+
+// Get HTTP method badge color
+const getMethodColor = (method: string) => {
+  const colors: Record<string, string> = {
+    GET: 'bg-green-600',
+    POST: 'bg-blue-600',
+    PUT: 'bg-yellow-600',
+    PATCH: 'bg-orange-600',
+    DELETE: 'bg-red-600'
+  };
+  return colors[method.toUpperCase()] || 'bg-gray-600';
+};
+
+// Format JSON with proper indentation
+const formatJSON = (obj: any) => JSON.stringify(obj, null, 2);
+
+// ============================================================================
+// COMPONENT: JsonViewer - Displays formatted JSON with syntax highlighting
+// ============================================================================
+
+const JsonViewer: React.FC<{ data: any; title: string }> = ({ data, title }) => {
+  return (
+    <div className="flex-1">
+      <div className="text-xs font-semibold text-gray-400 mb-2">{title}</div>
+      <pre className="bg-gray-900 rounded-lg p-4 overflow-x-auto text-xs">
+        <code className="text-gray-300">{formatJSON(data)}</code>
+      </pre>
+    </div>
+  );
+};
+
+// ============================================================================
+// COMPONENT: StatusBadge - Visual indicator for test status
+// ============================================================================
+
+const StatusBadge: React.FC<{ status: 'passed' | 'failed' }> = ({ status }) => {
+  const isPassed = status === 'passed';
+  
+  return (
+    <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold ${
+      isPassed ? 'bg-green-600/20 text-green-400' : 'bg-red-600/20 text-red-400'
+    }`}>
+      {isPassed ? <CheckCircle size={14} /> : <XCircle size={14} />}
+      {status.toUpperCase()}
+    </span>
+  );
+};
+
+// ============================================================================
+// COMPONENT: ParameterTable - Displays API parameters in table format
+// ============================================================================
+
+const ParameterTable: React.FC<{ 
+  params: Parameter[] | Header[]; 
+  title: string;
+  icon: React.ReactNode;
+}> = ({ params, title, icon }) => {
+  if (params.length === 0) return null;
+  
+  return (
+    <div className="mb-4">
+      <div className="flex items-center gap-2 mb-3">
+        {icon}
+        <h4 className="text-sm font-semibold text-gray-300">{title}</h4>
+      </div>
+      <div className="bg-gray-800/50 rounded-lg overflow-hidden">
+        <table className="w-full text-xs">
+          <thead className="bg-gray-700/50">
+            <tr>
+              <th className="text-left p-3 text-gray-400 font-semibold">Name</th>
+              <th className="text-left p-3 text-gray-400 font-semibold">Type</th>
+              <th className="text-left p-3 text-gray-400 font-semibold">Required</th>
+              <th className="text-left p-3 text-gray-400 font-semibold">Example</th>
+              {'description' in params[0] && (
+                <th className="text-left p-3 text-gray-400 font-semibold">Description</th>
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {params.map((param, idx) => (
+              <tr key={idx} className="border-t border-gray-700/50">
+                <td className="p-3 text-gray-300 font-mono">{param.name}</td>
+                <td className="p-3 text-blue-400 font-mono">{param.type}</td>
+                <td className="p-3">
+                  <span className={`px-2 py-1 rounded text-xs ${
+                    param.required ? 'bg-red-600/20 text-red-400' : 'bg-gray-600/20 text-gray-400'
+                  }`}>
+                    {param.required ? 'Yes' : 'No'}
+                  </span>
+                </td>
+                <td className="p-3 text-gray-400 font-mono">{String(param.example)}</td>
+                {'description' in param && (
+                  <td className="p-3 text-gray-400">{param.description}</td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// COMPONENT: TestCaseCard - Individual test case with expand/collapse
+// ============================================================================
+
+const TestCaseCard: React.FC<{ testCase: TestCase }> = ({ testCase }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const isPassed = testCase.status === 'passed';
+  
+  // Compare expected vs actual to highlight differences
+  const statusCodeMatch = testCase.expectedResponse.statusCode === testCase.actualResponse.statusCode;
+  
+  return (
+    <div className={`bg-gray-800 rounded-lg border-2 ${
+      isPassed ? 'border-green-600/30' : 'border-red-600/30'
+    } overflow-hidden transition-all duration-200 hover:shadow-lg`}>
+      {/* Test case header - Always visible */}
+      <div 
+        className="p-4 cursor-pointer flex items-center justify-between"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex items-center gap-3 flex-1">
+          {isExpanded ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
+          <div className="flex-1">
+            <div className="flex items-center gap-3 mb-1">
+              <h4 className="text-sm font-semibold text-gray-200">{testCase.title}</h4>
+              <StatusBadge status={testCase.status} />
+            </div>
+            <div className="text-xs text-gray-500">Test Case #{testCase.id}</div>
+          </div>
+        </div>
+        
+        {/* Status code comparison */}
+        <div className="flex items-center gap-4 mr-4">
+          <div className="text-right">
+            <div className="text-xs text-gray-500">Expected</div>
+            <div className={`text-sm font-mono font-bold ${statusCodeMatch ? 'text-green-400' : 'text-yellow-400'}`}>
+              {testCase.expectedResponse.statusCode}
+            </div>
+          </div>
+          <div className="text-gray-600">→</div>
+          <div className="text-right">
+            <div className="text-xs text-gray-500">Actual</div>
+            <div className={`text-sm font-mono font-bold ${statusCodeMatch ? 'text-green-400' : 'text-red-400'}`}>
+              {testCase.actualResponse.statusCode}
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Expanded details */}
+      {isExpanded && (
+        <div className="border-t border-gray-700 p-4 space-y-4">
+          {/* Test Input Section */}
+          <div>
+            <h5 className="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
+              <Code size={16} />
+              Test Input
+            </h5>
+            <div className="grid grid-cols-2 gap-4 mb-4">
+              {Object.keys(testCase.input.urlParams).length > 0 && (
+                <div className="bg-gray-900/50 rounded p-3">
+                  <div className="text-xs font-semibold text-gray-400 mb-2">URL Parameters</div>
+                  <pre className="text-xs text-gray-300 font-mono">
+                    {formatJSON(testCase.input.urlParams)}
+                  </pre>
+                </div>
+              )}
+              {Object.keys(testCase.input.query).length > 0 && (
+                <div className="bg-gray-900/50 rounded p-3">
+                  <div className="text-xs font-semibold text-gray-400 mb-2">Query Parameters</div>
+                  <pre className="text-xs text-gray-300 font-mono">
+                    {formatJSON(testCase.input.query)}
+                  </pre>
+                </div>
+              )}
+              {Object.keys(testCase.input.headers).length > 0 && (
+                <div className="bg-gray-900/50 rounded p-3">
+                  <div className="text-xs font-semibold text-gray-400 mb-2">Headers</div>
+                  <pre className="text-xs text-gray-300 font-mono">
+                    {formatJSON(testCase.input.headers)}
+                  </pre>
+                </div>
+              )}
+              {Object.keys(testCase.input.body).length > 0 && (
+                <div className="bg-gray-900/50 rounded p-3">
+                  <div className="text-xs font-semibold text-gray-400 mb-2">Body</div>
+                  <pre className="text-xs text-gray-300 font-mono">
+                    {formatJSON(testCase.input.body)}
+                  </pre>
+                </div>
+              )}
+            </div>
+          </div>
+          
+          {/* Response Comparison - Side by Side */}
+          <div>
+            <h5 className="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
+              <FileText size={16} />
+              Response Comparison
+            </h5>
+            <div className="grid grid-cols-2 gap-4">
+              <JsonViewer 
+                data={testCase.expectedResponse.body} 
+                title="Expected Response Body"
+              />
+              <JsonViewer 
+                data={testCase.actualResponse.body} 
+                title="Actual Response Body"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ============================================================================
+// COMPONENT: APIEndpointCard - Main API endpoint display with test cases
+// ============================================================================
+
+const APIEndpointCard: React.FC<{ api: APIEndpoint }> = ({ api }) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const stats = useMemo(() => calculateStats(api.testCases), [api.testCases]);
+  
+  return (
+    <div className="bg-gray-800/50 rounded-xl border border-gray-700 overflow-hidden">
+      {/* API Header */}
+      <div 
+        className="p-6 cursor-pointer hover:bg-gray-800/70 transition-colors"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex items-start justify-between">
+          <div className="flex items-start gap-4 flex-1">
+            {isExpanded ? <ChevronDown size={24} /> : <ChevronRight size={24} />}
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-2">
+                <span className={`${getMethodColor(api.method)} text-white text-xs font-bold px-3 py-1 rounded`}>
+                  {api.method}
+                </span>
+                <h3 className="text-lg font-bold text-gray-100">{api.title}</h3>
+              </div>
+              <code className="text-sm text-blue-400 bg-gray-900/50 px-3 py-1 rounded font-mono">
+                {api.endpoint}
+              </code>
+              <p className="text-sm text-gray-400 mt-2">{api.description}</p>
+            </div>
+          </div>
+          
+          {/* Statistics */}
+          <div className="flex items-center gap-6 ml-6">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-gray-200">{stats.total}</div>
+              <div className="text-xs text-gray-500">Total Tests</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-green-400">{stats.passed}</div>
+              <div className="text-xs text-gray-500">Passed</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-red-400">{stats.failed}</div>
+              <div className="text-xs text-gray-500">Failed</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-blue-400">{stats.passRate}%</div>
+              <div className="text-xs text-gray-500">Pass Rate</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="border-t border-gray-700 p-6 space-y-6">
+          {/* API Schema Information */}
+          <div className="space-y-4">
+            <ParameterTable 
+              params={api.urlParams} 
+              title="URL Parameters" 
+              icon={<Code size={16} className="text-blue-400" />}
+            />
+            <ParameterTable 
+              params={api.query} 
+              title="Query Parameters" 
+              icon={<AlertCircle size={16} className="text-yellow-400" />}
+            />
+            <ParameterTable 
+              params={api.headers} 
+              title="Headers" 
+              icon={<FileText size={16} className="text-green-400" />}
+            />
+          </div>
+          
+          {/* Test Cases */}
+          <div>
+            <h4 className="text-lg font-semibold text-gray-200 mb-4">Test Cases</h4>
+            <div className="space-y-3">
+              {api.testCases.map(testCase => (
+                <TestCaseCard key={testCase.id} testCase={testCase} />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ============================================================================
+// MAIN COMPONENT: Dashboard - Root component with state management
+// ============================================================================
+
+const APITestDashboard: React.FC = () => {
+  // State management - In production, this would come from props or context
+  const [data] = useState<APITestData>(mockData);
+  
+  // Calculate overall statistics using memoization for performance
+  const overallStats = useMemo(() => {
+    const allTestCases = data.api.flatMap(api => api.testCases);
+    return calculateStats(allTestCases);
+  }, [data.api]);
+  
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-gray-100 p-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Dashboard Header */}
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+            API Test Results Dashboard
+          </h1>
+          <p className="text-gray-400">Base URL: <code className="text-blue-400 bg-gray-800 px-2 py-1 rounded">{data.url}</code></p>
+        </div>
+        
+        {/* Overall Statistics Card */}
+        <div className="bg-gradient-to-r from-gray-800 to-gray-700 rounded-xl p-6 mb-8 border border-gray-600 shadow-xl">
+          <h2 className="text-xl font-semibold mb-4 text-gray-200">Overall Statistics</h2>
+          <div className="grid grid-cols-4 gap-6">
+            <div className="bg-gray-900/50 rounded-lg p-4 text-center">
+              <div className="text-3xl font-bold text-blue-400 mb-1">{data.api.length}</div>
+              <div className="text-sm text-gray-400">API Endpoints</div>
+            </div>
+            <div className="bg-gray-900/50 rounded-lg p-4 text-center">
+              <div className="text-3xl font-bold text-gray-200 mb-1">{overallStats.total}</div>
+              <div className="text-sm text-gray-400">Total Tests</div>
+            </div>
+            <div className="bg-gray-900/50 rounded-lg p-4 text-center">
+              <div className="text-3xl font-bold text-green-400 mb-1">{overallStats.passed}</div>
+              <div className="text-sm text-gray-400">Passed Tests</div>
+            </div>
+            <div className="bg-gray-900/50 rounded-lg p-4 text-center">
+              <div className="text-3xl font-bold text-red-400 mb-1">{overallStats.failed}</div>
+              <div className="text-sm text-gray-400">Failed Tests</div>
+            </div>
+          </div>
+          <div className="mt-4 bg-gray-900/50 rounded-lg p-4">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm text-gray-400">Overall Pass Rate</span>
+              <span className="text-lg font-bold text-blue-400">{overallStats.passRate}%</span>
+            </div>
+            <div className="w-full bg-gray-700 rounded-full h-3 overflow-hidden">
+              <div 
+                className="bg-gradient-to-r from-green-500 to-green-400 h-full rounded-full transition-all duration-500"
+                style={{ width: `${overallStats.passRate}%` }}
+              />
+            </div>
+          </div>
+        </div>
+        
+        {/* API Endpoints List */}
+        <div className="space-y-6">
+          {data.api.map((api, idx) => (
+            <APIEndpointCard key={idx} api={api} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default APITestDashboard;

.history/src/index_20251001222259.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body {
+  @apply bg-gray-900 text-gray-100;
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', sans-serif;
+}

.history/src/index_20251001222833.css

@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

.history/src/index_20251001223549.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

.history/src/index_20251001223742.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+/* * {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+} */

.history/src/main_20251001195155.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

.history/src/main_20251001202602.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './app.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

.history/src/main_20251001202642.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from '/app.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

.history/src/main_20251001202646.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './app.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

.history/src/main_20251001202709.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

.history/src/main_20251001222352.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

.history/src/main_20251001222809.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

.history/src/main_20251001222811.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

.history/src/main_20251001222813.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

.history/src/main_20251001222814.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

.history/src/main_20251001222816.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

.history/vit_20251001223501

@@ -0,0 +1 @@
+e

.history/vite.config_20251001195155.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

.history/vite.config_20251001223533.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});

.history/vite.config_20251001223537.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

.history/vite.config_20251001223538.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});