# gdhanushkumar07/openrelay architecture

> Architecture diagram of the GitHub repository gdhanushkumar07/openrelay, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gdhanushkumar07/openrelay
- Repository: https://github.com/gdhanushkumar07/openrelay

## Overview

This repository is a Next.js App Router frontend that presents an “AICOO” concept/demo rather than a full backend system. The architecture is mostly composition-based: route-level pages assemble reusable UI panels, and those panels read from local libraries/services that model products, scenarios, and agent behavior.

1. **Top-level application shell**
   - `src/app/layout.tsx` and `src/app/globals.css` define the global shell and styling.
   - `src/components/Navbar.tsx` likely provides shared navigation across the app.
   - `src/components/ErrorBoundary.tsx` is the main resilience boundary for rendering failures in complex interactive views.

2. **Route structure**
   - The app has several major routes:
     - `/` landing page (`src/app/page.tsx`)
     - `/network` (`src/app/network/page.tsx`)
     - `/heartbeat` (`src/app/heartbeat/page.tsx`)
     - `/escalation` (`src/app/escalation/page.tsx`)
     - `/agent/[type]` dynamic agent detail page (`src/app/agent/[type]/page.tsx`)
   - These pages are the main diagram boundaries: each route is a different operational surface of the same conceptual system.

3. **Landing / marketing subsystem**
   - `src/components/landing/*` contains the narrative and product-positioning sections: hero visualization, architecture explainer, “why agent mesh,” tech stack, future-of-work, etc.
   - This section is presentation-only and likely static, intended to explain the system rather than operate it.

4. **Network / orchestration dashboard**
   - `src/components/AgentNetwork.tsx`, `NetworkDashboardModals.tsx`, `NetworkLog.tsx`, and `OrgPerspectives.tsx` suggest a central “agent mesh” view.
   - `src/app/network/page.tsx` likely stitches these together into an operational dashboard showing relationships between agents, organizations, events, and current network state.
   - `src/components/OrgSelector.tsx` appears to switch context between organizational views.

5. **COO control and monitoring subsystem**
   - Several components are focused on a COO-style command center:
     - `CooHealthMonitor.tsx`
     - `CooPermissionLedger.tsx`
     - `CooConversationTimeline.tsx`
     - `CooExplorationPanel.tsx`
     - `BriefingPanel.tsx`
   - These imply a workflow where the COO view monitors system health, permissions, conversation history, and exploratory actions before escalating or intervening.

6. **Heartbeat / operational status**
   - `src/app/heartbeat/page.tsx` and `src/components/HeartbeatDash.tsx` form a health/status surface.
   - This is likely the system’s “live signal” view, showing liveness, activity, or SLA-style indicators for agents or workflows.

7. **Escalation workflow**
   - `src/app/escalation/page.tsx` likely presents a human-in-the-loop exception flow.
   - It is the boundary where automated agent operations transition into manual review or intervention.

8. **Agent detail views**
   - `src/app/agent/[type]/page.tsx` and the components `ShareManager.tsx`, `SellerConsole.tsx`, `ProcurementPortal.tsx`, `Marketplace.tsx`, `ProductPage.tsx`, `CustomerJourney.tsx`, and `OrderSummary.tsx` indicate multiple agent/persona-specific experiences.
   - The dynamic `[type]` route probably swaps among these persona views to demonstrate how different agents or business roles interact with the same underlying scenario engine.

9. **Domain model and local data layer**
   - `src/lib/products.ts` and `src/lib/scenarios.ts` provide the repository’s core static domain data.
   - `src/lib/aicoo.ts` and `src/services/aicoo.ts` likely hold the main logic/modeling layer for the AICOO simulation or orchestration behavior.
   - Because there is no visible API layer, database folder, or server actions tree, this appears to be a client-side, data-driven prototype with local modules rather than a persisted backend.

10. **Data flow through the app**
   - Route pages select a scenario/persona and pass that into composed dashboard components.
   - Components render state derived from local libs/services, probably using props and in-memory transformations.
   - The user’s path is typically: landing → network/heartbeat/agent view → escalation when needed.
   - The “COO” components sit in the middle as the decision-making and oversight layer.

11. **Technology and runtime boundaries**
   - The repository uses Next.js with the App Router, React components, and TypeScript.
   - `next.config.ts`, `eslint.config.mjs`, `postcss.config.mjs`, and `package.json` indicate a standard Next/Vercel deployment model.
   - `next/font` is mentioned in the README, so the app is designed for optimized font loading in the Next runtime.

12. **What is not present**
   - There is no evidence of API routes, server-side business services, auth, persistence, or external integrations in the file tree.
   - For an architecture diagram, this should be shown as a frontend simulation/experience layer with local data modules, not as a full distributed backend system.

13. **Suggested diagram emphasis**
   - Show a single Next.js application boundary.
   - Inside it, separate:
     - route pages,
     - shared UI components,
     - COO/network/heartbeat/escalation operational views,
     - local domain data and service modules.
   - Emphasize that the app is organized around demoing agent-network behavior and operational oversight rather than handling real transactional back-end flows.

Main entry points: [`src/app/layout.tsx`](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/layout.tsx) (Layout), [`src/app/page.tsx`](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/page.tsx) (Home), [`src/app/network/page.tsx`](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/network/page.tsx) (Network), [`src/lib/aicoo.ts`](https://github.com/gdhanushkumar07/openrelay/blob/main/src/lib/aicoo.ts) (AICOO model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_layout["Layout<br/>Next.js shell<br/>[layout.tsx]"]
  node_globals["Styles<br/>CSS globals<br/>[globals.css]"]
end

subgraph group_routes["Routes"]
  node_home["Home<br/>landing route<br/>[page.tsx]"]
  node_networkpage["Network<br/>dashboard route<br/>[page.tsx]"]
  node_heartbeatpage["Heartbeat<br/>status route<br/>[page.tsx]"]
  node_escalationpage["Escalation<br/>exception route<br/>[page.tsx]"]
  node_agentpage["Agent detail<br/>persona route<br/>[page.tsx]"]
end

subgraph group_views["UI views"]
  node_navbar["Navbar<br/>shared nav<br/>[Navbar.tsx]"]
  node_errorboundary{{"Boundary<br/>resilience<br/>[ErrorBoundary.tsx]"}}
  node_networkdash["Agent mesh<br/>orchestration UI<br/>[AgentNetwork.tsx]"]
  node_networkmodals["Modals<br/>interaction UI"]
  node_networklog["Log<br/>event stream<br/>[NetworkLog.tsx]"]
  node_orgviews["Org views<br/>context UI"]
  node_orgselector["Org selector<br/>context switch<br/>[OrgSelector.tsx]"]
  node_coo["COO panel<br/>oversight UI"]
  node_heartbeatdash["Health dash<br/>monitoring UI<br/>[HeartbeatDash.tsx]"]
  node_agentpersonas["Agent views<br/>persona UI<br/>[SellerConsole.tsx]"]
end

subgraph group_landing["Landing"]
  node_landinghero(("Hero<br/>landing section"))
  node_landingarch(("Architecture<br/>landing section"))
  node_landingwhy(("Why Mesh<br/>landing section<br/>[WhyAgentMesh.tsx]"))
  node_landingfuture(("Future<br/>landing section<br/>[FutureOfWork.tsx]"))
end

subgraph group_domain["Domain model"]
  node_products[("Domain data<br/>static model<br/>[products.ts]")]
  node_scenarios[("Scenarios<br/>scenario model<br/>[scenarios.ts]")]
  node_aicoolib{{"AICOO model<br/>simulation logic<br/>[aicoo.ts]"}}
  node_aicoosvc{{"AICOO service<br/>service layer<br/>[aicoo.ts]"}}
end

node_layout -->|"renders"| node_navbar
node_layout -->|"wraps"| node_errorboundary
node_layout -->|"hosts"| node_home
node_layout -->|"hosts"| node_networkpage
node_layout -->|"hosts"| node_heartbeatpage
node_layout -->|"hosts"| node_escalationpage
node_layout -->|"hosts"| node_agentpage
node_layout -->|"styles"| node_globals
node_home -->|"assembles"| node_landinghero
node_home -->|"assembles"| node_landingarch
node_home -->|"assembles"| node_landingwhy
node_home -->|"assembles"| node_landingfuture
node_networkpage -->|"assembles"| node_networkdash
node_networkpage -->|"uses"| node_networkmodals
node_networkpage -->|"uses"| node_networklog
node_networkpage -->|"uses"| node_orgviews
node_orgviews -->|"controls"| node_orgselector
node_heartbeatpage -->|"assembles"| node_heartbeatdash
node_escalationpage -->|"assembles"| node_coo
node_agentpage -->|"assembles"| node_agentpersonas
node_agentpersonas -->|"reads"| node_products
node_agentpersonas -->|"reads"| node_scenarios
node_networkdash -->|"uses"| node_aicoolib
node_coo -->|"uses"| node_aicoolib
node_heartbeatdash -->|"uses"| node_aicoosvc
node_aicoosvc -->|"wraps"| node_aicoolib
node_aicoolib -->|"depends on"| node_products
node_aicoolib -->|"depends on"| node_scenarios

click node_layout "https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/layout.tsx"
click node_globals "https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/globals.css"
click node_navbar "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/Navbar.tsx"
click node_errorboundary "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/ErrorBoundary.tsx"
click node_home "https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/page.tsx"
click node_networkpage "https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/network/page.tsx"
click node_heartbeatpage "https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/heartbeat/page.tsx"
click node_escalationpage "https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/escalation/page.tsx"
click node_agentpage "https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/agent/[type]/page.tsx"
click node_landinghero "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/landing/HeroNetworkVisualization.tsx"
click node_landingarch "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/landing/ArchitectureSection.tsx"
click node_landingwhy "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/landing/WhyAgentMesh.tsx"
click node_landingfuture "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/landing/FutureOfWork.tsx"
click node_networkdash "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/AgentNetwork.tsx"
click node_networkmodals "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/NetworkDashboardModals.tsx"
click node_networklog "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/NetworkLog.tsx"
click node_orgviews "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/OrgPerspectives.tsx"
click node_orgselector "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/OrgSelector.tsx"
click node_coo "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/CooHealthMonitor.tsx"
click node_heartbeatdash "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/HeartbeatDash.tsx"
click node_agentpersonas "https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/SellerConsole.tsx"
click node_products "https://github.com/gdhanushkumar07/openrelay/blob/main/src/lib/products.ts"
click node_scenarios "https://github.com/gdhanushkumar07/openrelay/blob/main/src/lib/scenarios.ts"
click node_aicoolib "https://github.com/gdhanushkumar07/openrelay/blob/main/src/lib/aicoo.ts"
click node_aicoosvc "https://github.com/gdhanushkumar07/openrelay/blob/main/src/services/aicoo.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_layout,node_globals toneBlue
class node_home,node_networkpage,node_heartbeatpage,node_escalationpage,node_agentpage toneAmber
class node_navbar,node_errorboundary,node_networkdash,node_networkmodals,node_networklog,node_orgviews,node_orgselector,node_coo,node_heartbeatdash,node_agentpersonas toneMint
class node_landinghero,node_landingarch,node_landingwhy,node_landingfuture toneRose
class node_products,node_scenarios,node_aicoolib,node_aicoosvc toneIndigo
```

## Components

### App shell

Next.js App Router runtime and global shell.

- [Layout](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/layout.tsx): Next.js shell · Global app shell and shared frame. · `src/app/layout.tsx`
- [Styles](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/globals.css): CSS globals · Application-wide styling. · `src/app/globals.css`

### Routes

Top-level entry points and route surfaces.

- [Home](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/page.tsx): landing route · Landing page route. · `src/app/page.tsx`
- [Network](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/network/page.tsx): dashboard route · Agent mesh orchestration surface. · `src/app/network/page.tsx`
- [Heartbeat](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/heartbeat/page.tsx): status route · Operational liveness and health surface. · `src/app/heartbeat/page.tsx`
- [Escalation](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/escalation/page.tsx): exception route · Human-in-the-loop intervention surface. · `src/app/escalation/page.tsx`
- [Agent detail](https://github.com/gdhanushkumar07/openrelay/blob/main/src/app/agent/[type]/page.tsx): persona route · Dynamic agent/persona experience route. · `src/app/agent/[type]/page.tsx`

### UI views

Reusable operational and persona-driven components.

- [Navbar](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/Navbar.tsx): shared nav · Primary navigation used across surfaces. · `src/components/Navbar.tsx`
- [Boundary](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/ErrorBoundary.tsx): resilience · Render failure boundary for interactive views. · `src/components/ErrorBoundary.tsx`
- [Agent mesh](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/AgentNetwork.tsx): orchestration UI · Core network view of agents and relationships. · `src/components/AgentNetwork.tsx`
- [Modals](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/NetworkDashboardModals.tsx): interaction UI · Supporting dialogs and detail overlays for the network view. · `src/components/NetworkDashboardModals.tsx`
- [Log](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/NetworkLog.tsx): event stream · Activity and event timeline for the network. · `src/components/NetworkLog.tsx`
- [Org views](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/OrgPerspectives.tsx): context UI · Organizational perspective switching and comparison. · `src/components/OrgPerspectives.tsx`
- [Org selector](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/OrgSelector.tsx): context switch · Chooses the active organization context. · `src/components/OrgSelector.tsx`
- [COO panel](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/CooHealthMonitor.tsx): oversight UI · Command-center style oversight and intervention components. · `src/components/CooHealthMonitor.tsx`
- [Health dash](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/HeartbeatDash.tsx): monitoring UI · Live status panel for operational health. · `src/components/HeartbeatDash.tsx`
- [Agent views](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/SellerConsole.tsx): persona UI · Role-specific surfaces for sales, procurement, marketplace, and customer journeys. · `src/components/SellerConsole.tsx`

### Landing

Marketing and concept-explainer sections.

- [Hero](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/landing/HeroNetworkVisualization.tsx): landing section · Concept intro and hero visualization. · `src/components/landing/HeroNetworkVisualization.tsx`
- [Architecture](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/landing/ArchitectureSection.tsx): landing section · Explains the system architecture. · `src/components/landing/ArchitectureSection.tsx`
- [Why Mesh](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/landing/WhyAgentMesh.tsx): landing section · Rationale for the agent mesh model. · `src/components/landing/WhyAgentMesh.tsx`
- [Future](https://github.com/gdhanushkumar07/openrelay/blob/main/src/components/landing/FutureOfWork.tsx): landing section · Future-of-work narrative section. · `src/components/landing/FutureOfWork.tsx`

### Domain model

Local data and orchestration modules.

- [Domain data](https://github.com/gdhanushkumar07/openrelay/blob/main/src/lib/products.ts): static model · Local product and scenario definitions. · `src/lib/products.ts`
- [Scenarios](https://github.com/gdhanushkumar07/openrelay/blob/main/src/lib/scenarios.ts): scenario model · Demo scenarios and operational setups. · `src/lib/scenarios.ts`
- [AICOO model](https://github.com/gdhanushkumar07/openrelay/blob/main/src/lib/aicoo.ts): simulation logic · Core local modeling and orchestration helpers. · `src/lib/aicoo.ts`
- [AICOO service](https://github.com/gdhanushkumar07/openrelay/blob/main/src/services/aicoo.ts): service layer · Service-facing wrapper for the AICOO logic. · `src/services/aicoo.ts`

## Connections

- Layout → Navbar: renders · The app shell provides the shared navigation.
- Layout → Boundary: wraps · The shell likely contains the resilience boundary.
- Layout → Home: hosts · The root shell contains route rendering.
- Layout → Network: hosts · The root shell contains route rendering.
- Layout → Heartbeat: hosts · The root shell contains route rendering.
- Layout → Escalation: hosts · The root shell contains route rendering.
- Layout → Agent detail: hosts · The root shell contains route rendering.
- Layout → Styles: styles · Global CSS applies across the application.
- Home → Hero: assembles · Landing page composes concept sections.
- Home → Architecture: assembles · Landing page composes concept sections.
- Home → Why Mesh: assembles · Landing page composes concept sections.
- Home → Future: assembles · Landing page composes concept sections.
- Network → Agent mesh: assembles · Network route builds the main orchestration dashboard.
- Network → Modals: uses · Network route uses detail and modal interactions.
- Network → Log: uses · Network route includes event logging.
- Network → Org views: uses · Network route compares organizational perspectives.
- Org views → Org selector: controls · Perspective views rely on context selection.
- Heartbeat → Health dash: assembles · Heartbeat route presents live operational status.
- Escalation → COO panel: assembles · Escalation route surfaces oversight and intervention tools.
- Agent detail → Agent views: assembles · Dynamic agent route swaps persona-specific consoles.
- Agent views → Domain data: reads · Persona views are driven by product data.
- Agent views → Scenarios: reads · Persona views are driven by scenario data.
- Agent mesh → AICOO model: uses · Network orchestration is modeled by local logic.
- COO panel → AICOO model: uses · Oversight panels are backed by local orchestration logic.
- Health dash → AICOO service: uses · Heartbeat status is sourced through service logic.
- AICOO service → AICOO model: wraps · Service layer delegates to the core model.
- AICOO model → Domain data: depends on · Core logic consumes product definitions.
- AICOO model → Scenarios: depends on · Core logic consumes demo scenarios.