feat: add error handling and analysis features in CodeEditor

CodeViz/jest.config.js

@@ -0,0 +1,13 @@
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  roots: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  }
+};

CodeViz/package.json

@@ -8,7 +8,10 @@
     "build": "vite build",
     "build:dev": "vite build --mode development",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "dependencies": {
     "@codemirror/lang-cpp": "^6.0.3",
@@ -70,6 +73,7 @@
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@tailwindcss/typography": "^0.5.15",
+    "@types/jest": "^30.0.0",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -79,8 +83,10 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
+    "jest": "^30.1.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
+    "ts-jest": "^29.4.1",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.19"

CodeViz/src/App.tsx

@@ -5,6 +5,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import NotFound from "./pages/NotFound";
+import ErrorDisplayTest from "./components/ErrorDisplayTest";
+import { CodeEditor } from "./components/features/CodeEditor";
 
 const queryClient = new QueryClient();
 
@@ -16,6 +18,8 @@ const App = () => (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Index />} />
+          <Route path="/sandbox" element={<CodeEditor />} />
+          <Route path="/error-test" element={<ErrorDisplayTest />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

CodeViz/src/components/ErrorDisplay.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { CodeError } from '@/utils/errorHandler';
+import { AlertCircle, Terminal, Bug, AlertTriangle, Info } from 'lucide-react';
+import { cn } from "@/lib/utils";
+
+interface ErrorDisplayProps {
+  error: CodeError;
+  className?: string;
+}
+
+const errorTypeConfig: Record<string, { icon: React.ElementType; color: string }> = {
+  SyntaxError: { icon: Terminal, color: 'text-red-500' },
+  TypeError: { icon: Bug, color: 'text-orange-500' },
+  NameError: { icon: AlertTriangle, color: 'text-yellow-500' },
+  IndentationError: { icon: AlertCircle, color: 'text-blue-500' },
+  UnsupportedFeature: { icon: Info, color: 'text-purple-500' },
+  Error: { icon: AlertCircle, color: 'text-red-500' }, // fallback
+};
+
+const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ error, className }) => {
+  const { icon: ErrorIcon, color } = errorTypeConfig[error.type] || errorTypeConfig.Error;
+
+  return (
+    <Alert 
+      variant="destructive" 
+      className={cn(
+        "border-l-4",
+        {
+          'border-l-red-500': error.type === 'SyntaxError',
+          'border-l-orange-500': error.type === 'TypeError',
+          'border-l-yellow-500': error.type === 'NameError',
+          'border-l-blue-500': error.type === 'IndentationError',
+          'border-l-purple-500': error.type === 'UnsupportedFeature',
+        },
+        className
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <ErrorIcon className={cn("h-5 w-5", color)} />
+        <div className="flex-1 space-y-2">
+          <AlertTitle className="flex items-center gap-2 font-semibold">
+            <span>{error.type}</span>
+            {error.line && (
+              <span className="text-sm font-normal opacity-75">
+                at line {error.line}
+              </span>
+            )}
+          </AlertTitle>
+          <AlertDescription className="space-y-3">
+            <div className="rounded-md bg-destructive/20 p-3 text-[0.92rem] leading-normal">
+              {error.message}
+            </div>
+            {error.hint && (
+              <div className="flex items-start gap-2 text-sm">
+                <div className="mt-0.5">💡</div>
+                <div className="flex-1 opacity-85">
+                  {error.hint}
+                </div>
+              </div>
+            )}
+          </AlertDescription>
+        </div>
+      </div>
+    </Alert>
+  );
+};
+
+export default ErrorDisplay;

CodeViz/src/components/ErrorDisplayTest.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import ErrorDisplay from './ErrorDisplay';
+
+const ErrorDisplayTest: React.FC = () => {
+  const testErrors = [
+    {
+      type: 'SyntaxError',
+      message: 'Missing colon after for loop statement',
+      line: 5,
+      hint: 'Add a colon (:) after the control statement'
+    },
+    {
+      type: 'TypeError',
+      message: 'Cannot read property \'toLowerCase\' of undefined',
+      line: 12,
+      hint: 'Make sure the variable is defined before calling methods on it'
+    },
+    {
+      type: 'NameError',
+      message: 'undefined_variable is not defined',
+      line: 8,
+      hint: 'Define the variable before using it'
+    },
+    {
+      type: 'IndentationError',
+      message: 'Unexpected indent at line 15',
+      line: 15,
+      hint: 'Use consistent indentation (4 spaces or 1 tab)'
+    },
+    {
+      type: 'UnsupportedFeature',
+      message: 'This code uses a feature not yet supported by CodeClarity',
+      hint: 'Try using a simpler or alternative approach'
+    }
+  ];
+
+  return (
+    <div className="p-6 space-y-4">
+      <h2 className="text-2xl font-bold mb-6">Error Display Test Cases</h2>
+      {testErrors.map((error, index) => (
+        <ErrorDisplay
+          key={index}
+          error={error}
+          className="mb-4"
+        />
+      ))}
+    </div>
+  );
+};
+
+export default ErrorDisplayTest;

CodeViz/src/components/features/ActionButtons.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Button } from "@/components/ui/button";
+import { Play, Upload, Save, Settings, Sun, Moon } from "lucide-react";
+
+interface ActionButtonsProps {
+  darkMode: boolean;
+  executing: boolean;
+  onAnalyze: () => void;
+  onDarkModeToggle: () => void;
+}
+
+const ActionButtons: React.FC<ActionButtonsProps> = ({
+  darkMode,
+  executing,
+  onAnalyze,
+  onDarkModeToggle
+}) => {
+  return (
+    <div className="flex items-center gap-3">
+      <Button 
+        variant="default" 
+        size="sm" 
+        className="gap-2" 
+        onClick={onAnalyze}
+        disabled={executing}
+      >
+        <Play className="h-4 w-4" />
+        {executing ? "Analyzing..." : "Analyze"}
+      </Button>
+
+      <Button variant="outline" size="sm" className="gap-2">
+        <Upload className="h-4 w-4" />
+        Upload File
+      </Button>
+
+      <Button variant="outline" size="sm" className="gap-2">
+        <Save className="h-4 w-4" />
+        Save
+      </Button>
+
+      <Button variant="secondary" size="sm" className="gap-2">
+        <Settings className="h-4 w-4" />
+        Settings
+      </Button>
+
+      <Button 
+        variant="ghost" 
+        size="sm" 
+        className="gap-2"
+        onClick={onDarkModeToggle}
+      >
+        {darkMode ? (
+          <>
+            <Sun className="h-4 w-4 text-yellow-400" />
+            Light Mode
+          </>
+        ) : (
+          <>
+            <Moon className="h-4 w-4 text-blue-400" />
+            Dark Mode
+          </>
+        )}
+      </Button>
+    </div>
+  );
+};
+
+export default ActionButtons;