Project Context: Adapting vite8-nitro3-starter into an AI Agent Mesh UI

1. Source Material Overview

The base repository is Timtech4u/vite8-nitro3-starter. It is a hyper-fast, full-stack starter kit built on Vite 8, Nitro v3, Rolldown, Oxc, and Tailwind v4. Currently, the UI is themed as a Zapier-like workflow automation tool with the following core UX paradigms:

• Plain English Creation: Users describe workflows via a prompt interface rather than a complex node-based canvas.
• Human-in-the-loop (HITL): A dashboard featuring a "Needs your attention" section for manual approvals/rejections.
• Observability: Activity feeds, success rate health bars, and real-time monitoring of running processes.
• Durable Execution: Workflows that survive crashes and pause for human input.

2. The Objective

We are pivoting this generic SaaS UI into the centralized frontend ("Pane of Glass") for an AI Agent Mesh and Multi-Agent Orchestration platform. Instead of simple API integrations, the underlying engine will manage autonomous AI agents communicating via MCP (Model Context Protocol) and ACP (Agent Context Protocol).

Your task is to use the existing UI components (dashboards, modals, activity feeds, stat cards) but rewire the copy, states, and logic to manage AI agents.

3. Target Implementations (How to adapt the UI)

When generating code, updating the UI, or modifying the Nitro backend, align the application with these four core projects:

A. Aiki (Personal Productivity Agent)

• Concept: A personal AI assistant that manages tasks, calendar, and emails autonomously.
• UI Adaptation:
  • Change the "New Workflow" modal to a "New Instruction" command bar.
  • Example Prompt: "When I get an email from a VIP client, draft a summary and put it on my agenda."
  • The "Needs your attention" dashboard becomes a daily triage screen where the user approves drafted emails or accepts proposed schedule changes made by the AI.

B. agent-deploy (AI-Native CI/CD Pipelines)

• Concept: Multi-agent CI/CD with Reviewer, Validator, Deployer, and Monitor agents.
• UI Adaptation:
  • Workflows become "Deployment Pipelines."
  • Flow: Trigger (Code pushed) → Validate (Reviewer Agent analyzes code) → Approve (Pipeline pauses).
  • The dashboard shows "Needs Attention" for the human to review the agent's summary and click "Approve" or "Reject" before the Deployer Agent ships it.

C. mcp-africa (African Tech Infrastructure Orchestration)

• Concept: MCP servers for Paystack, Flutterwave, M-Pesa, Africa's Talking.
• UI Adaptation:
  • The generic SaaS integrations in the UI are replaced with African fintech and telco APIs.
  • Example Prompt: "When a Paystack payment fails 3 times, send an SMS via Africa's Talking and alert the team on Slack."
  • Activity feeds show transaction statuses and agent-triggered recovery actions.

D. remote-agent-farm (Fleet Management)

• Concept: Managing multiple AI agents running on cloud VMs.
• UI Adaptation:
  • The dashboard acts as a fleet monitor.
  • Stat cards show: Active Agents, Tasks Completed, Blocked/Waiting Agents, Error Rates.
  • Activity feed logs agent thought processes, tool executions, and ACP communications in real-time.

4. Engineering Instructions

1. Preserve the Stack: Maintain the Vite 8 + Nitro v3 + Tailwind v4 architecture. Keep the vanilla TS frontend lightweight.
2. Repurpose Components: Reuse the existing dashboard layout, bento grids, and notification cards. Update the TypeScript interfaces and mock data (in src/main.ts or the Nitro backend) to reflect AI Agent metrics instead of traditional workflows.
3. Focus on HITL: Emphasize the "Approval/Intervention" flows. The UI's primary job is to make it easy for humans to govern, audit, and approve actions proposed by the AI Agent Mesh.