Agent 5: React Dashboard Frontend (Azure Static Web App)

[TomProkop]

Objective

Create the React SPA frontend for the AgentBox dashboard. Mobile-first (iPhone primary), deployed as an Azure Static Web App (separate from the portal API).

Scope

Files to create (ALL in src/frontend/ — do NOT touch any other directory):

Setup

• Use Vite + React + TypeScript
• npm create vite@latest . -- --template react-ts in src/frontend/
• Output builds to dist/ (SWA deploys this)
• Create staticwebapp.config.json for SWA routing + auth config

SWA Configuration (staticwebapp.config.json)

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/api/*", "/.auth/*"]
  },
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "userDetailsClaim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/{TENANT_ID}/v2.0",
          "clientIdSettingName": "AAD_CLIENT_ID",
          "clientSecretSettingName": "AAD_CLIENT_SECRET"
        }
      }
    }
  },
  "routes": [
    { "route": "/api/*", "allowedRoles": ["authenticated"] },
    { "route": "/*", "allowedRoles": ["authenticated"] }
  ],
  "responseOverrides": {
    "401": { "redirect": "/.auth/login/aad", "statusCode": 302 }
  }
}

Pages / Components

1. Dashboard (/)

   • List active AgentBoxes: name, status, runtime, created timestamp
   • Quick links per box: "Open VS Code", "Open Terminal", "SSH config"
   • "New AgentBox" button → SpawnForm
   • "Destroy" button with confirmation dialog
   • Auto-refresh every 30s

2. SpawnForm (/spawn)

   • Multi-step form:
     • Step 1: Box name (lowercase, alphanumeric, hyphens)
     • Step 2: GitHub — "Connect GitHub" button → OAuth popup
     • Step 3: Azure DevOps — "Connect ADO" button → OAuth popup
     • Step 4: Jira — "Connect Jira" button → OAuth popup
     • Step 5: Dataverse — environment toggles + security role dropdowns
     • Step 6: SharePoint — site search + checkbox list
   • "Spawn" button → POST /api/boxes → redirect to BoxDetail
   • Mobile-friendly: vertical accordion on phone

3. BoxDetail (/boxes/:name)

   • Status badge, direct links (VS Code, Terminal)
   • SSH config snippet (copyable)
   • Service connection status
   • "Destroy" button, runtime timer, expiry countdown

4. LocalRun (/local)

   • Token vending page with pre-filled docker run command
   • Platform tabs: macOS / Windows / Linux
   • Copy-to-clipboard button

API Client

• Create src/services/api.ts with typed fetch wrappers
• API base URL: configured via environment variable (VITE_API_URL)
• For production: calls go to https://portal-api.agentbox.networg.com/api/*
• Auth: SWA handles auth automatically — /.auth/me provides user info
• CORS: Portal API configured to accept requests from SWA domain

Styling

• Mobile-first responsive CSS
• Dark mode (VS Code aesthetic)
• Use CSS modules or Tailwind CSS

Key Design Decisions

• Azure Static Web App — free CDN, built-in Entra ID auth, independent deployment
• React + TypeScript + Vite — fast dev server, modern tooling
• Mobile-first — iPhone is the primary client
• SWA auth — /.auth/login/aad handles Entra ID login, no custom auth code
• API calls via CORS — SWA frontend calls Container App API on separate subdomain
• No dependency on portal project — completely independent src/frontend/ directory

Conflict Prevention

This agent works ONLY in src/frontend/.
No other agent touches this directory.

Dependencies

None — this agent is fully independent. Can run in Wave 1 alongside all other agents.

Acceptance Criteria

• npm install && npm run build succeeds in src/frontend/
• npm run dev starts Vite dev server
• staticwebapp.config.json present with Entra ID auth config
• All 4 pages render without errors
• Mobile responsive (test at 375px width)
• API client has typed interfaces matching portal API
• OAuth popup flow implemented (mock callbacks if backend not ready)