Fix Vite port forwarding for Mentat interface accessibility

.mentat/preview/2-snake.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+# Start the snake game server
+cd snake
+npm install --silent
+npm start

.mentat/preview/3-worldconquest.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+# Start the World Conquest game server
+cd worldconquest
+npm install --silent
+npm start

client/package.json

@@ -11,8 +11,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "highlight.js": "^11.11.1",
+    "lucide-react": "^0.546.0",
+    "marked": "^16.4.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

client/src/App.tsx

@@ -81,7 +81,11 @@ function App() {
             ['Backend', 'Node.js, Express, Jest'],
             ['Utilities', 'TypeScript, ESLint, Prettier'],
           ].map(([title, techs]) => (
-            <div className="section" style={{ textAlign: 'center' }} key={title}>
+            <div
+              className="section"
+              style={{ textAlign: 'center' }}
+              key={title}
+            >
               <div
                 style={{
                   fontWeight: '500',

client/src/Auth.tsx

@@ -0,0 +1,216 @@
+import { useState, useEffect } from 'react';
+
+interface AuthProps {
+  onLogin: (username: string) => void;
+}
+
+export default function Auth({ onLogin }: AuthProps) {
+  const [isLogin, setIsLogin] = useState(true);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  // Check if already logged in
+  useEffect(() => {
+    const savedUser = localStorage.getItem('mentat-user');
+    if (savedUser) {
+      onLogin(savedUser);
+    }
+  }, [onLogin]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const endpoint = isLogin ? '/api/auth/login' : '/api/auth/signup';
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Authentication failed');
+      }
+
+      localStorage.setItem('mentat-user', username);
+      onLogin(username);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '20px',
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      }}
+    >
+      <div
+        style={{
+          background: 'white',
+          borderRadius: '20px',
+          padding: '40px',
+          maxWidth: '400px',
+          width: '100%',
+          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+        }}
+      >
+        <h1
+          style={{
+            fontSize: '32px',
+            fontWeight: 'bold',
+            color: '#1f2937',
+            marginBottom: '10px',
+            textAlign: 'center',
+          }}
+        >
+          {isLogin ? 'Welcome Back' : 'Create Account'}
+        </h1>
+        <p
+          style={{
+            fontSize: '14px',
+            color: '#6b7280',
+            marginBottom: '30px',
+            textAlign: 'center',
+          }}
+        >
+          {isLogin
+            ? 'Sign in to share images and create models'
+            : 'Join to share your creations'}
+        </p>
+
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: '20px' }}>
+            <label
+              style={{
+                display: 'block',
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#1f2937',
+                marginBottom: '8px',
+              }}
+            >
+              Username
+            </label>
+            <input
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              style={{
+                width: '100%',
+                padding: '12px',
+                borderRadius: '10px',
+                border: '2px solid #e5e7eb',
+                fontSize: '16px',
+              }}
+            />
+          </div>
+
+          <div style={{ marginBottom: '20px' }}>
+            <label
+              style={{
+                display: 'block',
+                fontSize: '14px',
+                fontWeight: 'bold',
+                color: '#1f2937',
+                marginBottom: '8px',
+              }}
+            >
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              style={{
+                width: '100%',
+                padding: '12px',
+                borderRadius: '10px',
+                border: '2px solid #e5e7eb',
+                fontSize: '16px',
+              }}
+            />
+          </div>
+
+          {error && (
+            <div
+              style={{
+                padding: '12px',
+                borderRadius: '10px',
+                background: '#fee2e2',
+                color: '#dc2626',
+                fontSize: '14px',
+                marginBottom: '20px',
+              }}
+            >
+              {error}
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading}
+            style={{
+              width: '100%',
+              padding: '15px',
+              borderRadius: '10px',
+              border: 'none',
+              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+              color: 'white',
+              fontWeight: 'bold',
+              fontSize: '16px',
+              cursor: loading ? 'not-allowed' : 'pointer',
+              opacity: loading ? 0.7 : 1,
+            }}
+          >
+            {loading ? 'Please wait...' : isLogin ? 'Sign In' : 'Sign Up'}
+          </button>
+        </form>
+
+        <div
+          style={{
+            marginTop: '20px',
+            textAlign: 'center',
+            fontSize: '14px',
+            color: '#6b7280',
+          }}
+        >
+          {isLogin ? "Don't have an account? " : 'Already have an account? '}
+          <button
+            onClick={() => {
+              setIsLogin(!isLogin);
+              setError('');
+            }}
+            style={{
+              background: 'none',
+              border: 'none',
+              color: '#667eea',
+              fontWeight: 'bold',
+              cursor: 'pointer',
+              textDecoration: 'underline',
+            }}
+          >
+            {isLogin ? 'Sign Up' : 'Sign In'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}