chore: add prettier and eslint-config-prettier

Configure Prettier with single quotes, semis, trailing commas, and
100-char width. Add eslint-config-prettier to disable conflicting
ESLint rules. Fix pre-existing lint errors (no-explicit-any,
prefer-const).

Author: jonwiggins

.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+package-lock.json

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "printWidth": 100
+}

eslint.config.js

@@ -3,6 +3,7 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
@@ -20,4 +21,5 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
+  eslintConfigPrettier,
 ])

package-lock.json

@@ -14,6 +14,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -35,9 +37,11 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "prettier": "^3.8.1",
     "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",

package.json

@@ -19,7 +19,7 @@ const NODE_WIDTH = 160;
 const NODE_HEIGHT = 50;
 
 // Custom node component for overview
-function OverviewFlowNode({ data, selected }: { data: any; selected: boolean }) {
+function OverviewFlowNode({ data, selected }: { data: Record<string, unknown>; selected: boolean }) {
   const colorClass = categoryColors[data.category as OverviewNode['category']] || 'border-gray-500 bg-gray-500/10';
 
   return (

src/components/AlgorithmOverview.tsx

@@ -136,7 +136,7 @@ export function FlowCanvas() {
     });
 
     // Generate edges
-    let edgeList: Edge[] = [];
+    const edgeList: Edge[] = [];
     const edgeSet = new Set<string>();
 
     if (isOverview) {
@@ -254,7 +254,7 @@ export function FlowCanvas() {
         />
         <MiniMap
           nodeColor={(node) => {
-            const status = (node.data as any).status;
+            const status = (node.data as Record<string, unknown>).status;
             if (status === 'active') return '#238636';
             if (status === 'completed') return '#58a6ff';
             return '#30363d';

src/components/FlowCanvas.tsx

@@ -282,7 +282,7 @@ export const useVisualizerStore = create<VisualizerState>((set, get) => ({
     // Update node status based on step
     const nodeUpdate: AlgorithmNode = {
       id: step.nodeId,
-      type: step.nodeId.split('-')[0] as any,
+      type: step.nodeId.split('-')[0] as AlgorithmNode['type'],
       label: step.description,
       description: step.description,
       status: 'active',