From 2181bcc9b3d53370e792f8cbd08c94d9361affff Mon Sep 17 00:00:00 2001
From: fadeelah2007 <fadilausman705@gmail.com>
Date: Fri, 24 Jul 2026 22:07:32 +0100
Subject: [PATCH] feat(frontend): add 404 catch-all route and NotFoundPage
 component

---
 frontend/src/App.tsx                |  7 ++-
 frontend/src/pages/NotFoundPage.tsx | 75 +++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/NotFoundPage.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 831f3b8..0407ff2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { WalletProvider } from './context/WalletContext'
+import { NotFoundPage } from './pages/NotFoundPage';
 import AppShell from './components/layout/AppShell'
 import LandingPage from './pages/LandingPage'
 import AgentsPage from './pages/AgentsPage'
@@ -25,13 +26,15 @@ const AppContent: React.FC = () => {
               <Route path="/tasks/new" element={<NewTaskPage />} />
               <Route path="/tasks/:id" element={<TaskDetailPage />} />
               <Route path="/renderer-demo" element={<RendererDemoPage />} />
+              <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </AppShell>
         } />
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </Router>
-  )
-}
+  );
+};
 
 const App: React.FC = () => {
   return (
diff --git a/frontend/src/pages/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..efb8ff9
--- /dev/null
+++ b/frontend/src/pages/NotFoundPage.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const NotFoundPage: React.FC = () => {
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: '60vh',
+            padding: '2rem',
+            textAlign: 'center',
+            color: 'var(--text-primary)',
+            backgroundColor: 'var(--bg-primary)'
+        }}>
+
+            <h1 style={{
+                fontSize: '2.5rem',
+                fontWeight: 'bold',
+                marginBottom: '1rem',
+                color: 'var(--text-primary)'
+            }}>
+            404 — Page Not Found
+            </h1>
+
+            <p style={{
+                fontSize: '1rem',
+                color: 'var(--text-secondary)',
+                maxWidth: '480px',
+                marginBottom: '2rem',
+                lineHeight: '1.5'
+            }}>
+            The page you are looking for does not exist or has been moved.
+            </p>
+
+            <div style={{
+                display: 'flex',
+                gap: '1rem',
+                flexWrap: 'wrap',
+                justifyContent: 'center'
+            }}>
+
+                <Link to="/dashboard" style={{
+                padding: '0.6rem 1.25rem',
+                borderRadius: '6px',
+                backgroundColor: 'var(--accent-color, var(--primary-color, #3b82f6))',
+                color: 'var(--text-primary, #ffffff)',
+                fontWeight: '500',
+                fontSize: '0.9rem',
+                textDecoration: 'none',
+                display: 'inline-block'
+            }}>
+            Go to Dashboard
+            </Link>
+
+            <Link to="/" style={{
+                padding: '0.6rem 1.25rem',
+                borderRadius: '6px',
+                border: '1px solid var(--border-color, #374151)',
+                backgroundColor: 'transparent',
+                color: 'var(--text-primary)',
+                fontWeight: '500',
+                fontSize: '0.9rem',
+                textDecoration: 'none',
+                display: 'inline-block'
+            }}>
+            Go Home
+            </Link>
+        </div>
+    </div>
+    );
+};
+
+export default NotFoundPage;
\ No newline at end of file