[Smart Contracts] Add Unbounded Storage Protection: Cap Agent Records and Capability Index Size

[devJaja]

🎯 Objective

Add route guards and authentication checks to all protected pages, fix the broken dashboard redirect, and hide the development-only renderer demo page.

---

📁 Files to Create

Action	File Path	Description
Create	frontend/src/components/auth/ProtectedRoute.tsx	Route guard component

📁 Files to Modify

Action	File Path	Description
Modify	frontend/src/App.tsx	Wrap protected routes with ProtectedRoute
Modify	frontend/src/pages/dashboard.tsx	Replace window.location.replace with React Router navigation

---

🔍 Current Problems

1. No Auth Guards (App.tsx)

// CURRENT — All routes accessible without wallet connection
<Route path="/agents" element={<AgentsPage />} />
<Route path="/tasks/new" element={<NewTaskPage />} />
<Route path="/tasks/:id" element={<TaskDetailPage />} />
<Route path="/wallet" element={<WalletPage />} />

2. Broken Dashboard Redirect (dashboard.tsx)

// CURRENT — Full page reload, breaks SPA behavior
useEffect(() => {
  if (!connected) {
    window.location.replace('/'); // ⚠️ Destroys React state
  }
}, [connected]);

3. Renderer Demo Exposed in Production

// CURRENT — Debug page visible to all users
<Route path="/renderer-demo" element={<RendererDemoPage />} />

---

✅ Expected Implementation

1. Create ProtectedRoute.tsx

import { Navigate } from 'react-router-dom';
import { useWallet } from '../../context/WalletContext';

interface ProtectedRouteProps {
  children: React.ReactNode;
}

export function ProtectedRoute({ children }: ProtectedRouteProps) {
  const { connected } = useWallet();

  if (!connected) {
    return <Navigate to="/" replace />;
  }

  return <>{children}</>;
}

2. Update App.tsx

import { ProtectedRoute } from './components/auth/ProtectedRoute';

// Wrap protected routes
<Route path="/dashboard" element={
  <ProtectedRoute><DashboardPage /></ProtectedRoute>
} />
<Route path="/agents" element={
  <ProtectedRoute><AgentsPage /></ProtectedRoute>
} />
<Route path="/tasks/new" element={
  <ProtectedRoute><NewTaskPage /></ProtectedRoute>
} />
<Route path="/tasks/:id" element={
  <ProtectedRoute><TaskDetailPage /></ProtectedRoute>
} />
<Route path="/wallet" element={
  <ProtectedRoute><WalletPage /></ProtectedRoute>
} />

// Hide renderer-demo in production
{import.meta.env.DEV && (
  <Route path="/renderer-demo" element={<RendererDemoPage />} />
)}

3. Fix Dashboard Redirect

// dashboard.tsx — BEFORE
useEffect(() => {
  if (!connected) {
    window.location.replace('/');
  }
}, [connected]);

// dashboard.tsx — AFTER
import { Navigate } from 'react-router-dom';

if (!connected) {
  return <Navigate to="/" replace />;
}

---

📁 Reference Files

File Path	Purpose
frontend/src/App.tsx	Router configuration
frontend/src/pages/dashboard.tsx (line ~15)	Broken redirect
frontend/src/context/WalletContext.tsx	Wallet state
frontend/src/components/layout/TopNav.tsx	Nav that shows wallet status

---

✅ Acceptance Criteria

• Create frontend/src/components/auth/ProtectedRoute.tsx
• Wrap /dashboard, /agents, /tasks/new, /tasks/:id, /wallet with ProtectedRoute
• Replace window.location.replace('/') with <Navigate> in dashboard.tsx
• Hide /renderer-demo behind import.meta.env.DEV check
• Test: unauthenticated user visiting /dashboard → redirected to /
• Test: unauthenticated user visiting /agents → redirected to /
• Test: authenticated user → normal access to all pages
• Test: /renderer-demo not accessible in production build

[nurudeenheroic]

Hello! I've carefully reviewed the requirements and am ready to get started. I'd appreciate the opportunity to contribute to this issue.