Agent Assistant

Governance-Aware Chat Interface: A React frontend adapted from the Microsoft CAIRA reference architecture, extended with enterprise governance overlays — trust scores, policy evaluation, audit ledger, and agent certification tiers — all built into the conversation experience.

Architecture

The assistant uses a BFF (Backend for Frontend) pattern. The Fastify BFF server serves the built React SPA as static files and proxies all /api/* requests to the AFEK Agent API server, injecting Entra bearer tokens in authenticated environments.

React SPA

:8080

React 19, Vite 6, Tailwind v4

AgentPicker
ChatArea
MessageInput
TrustBadge
PolicyStatus
LedgerPanel
ConversationList
StreamToggle

Fastify BFF

:8080

Fastify 5, Node.js 22+

Static file serving
API proxy (/api/*)
Entra token injection
Health checks

Agent API

:4000

Fastify 5, TypeScript

Conversation routes
Agent manifests
Governance middleware
Ledger middleware
Policy engine
PII masking
OTel enrichment

┌────────────────────┐     ┌─────────────────────┐     ┌──────────────────┐
│   React SPA        │────▶│   Fastify BFF        │────▶│  Agent API       │
│   AgentPicker      │     │   Entra auth inject  │     │  AFEK governance │
│   ChatArea         │     │   /api/* proxy        │     │  Ledger          │
│   LedgerPanel      │     │   SPA static serve   │     │  Policy engine   │
│   PolicyStatus     │     │   Health check        │     │  PII masking     │
│   TrustBadge       │     │                      │     │  OTel enrichment │
└────────────────────┘     └─────────────────────┘     └──────────────────┘

Enterprise Governance Overlays

Beyond the base CAIRA chat interface, the AFEK assistant integrates governance directly into the user experience:

Trust Score Badges

Real-time trust score visualization per agent interaction, with color-coded indicators (green ≥80, amber ≥50, red <50) and certification tier labels.

Policy Evaluation

Live policy verdict display showing pass/warn/block results with detailed violation breakdowns, severity levels, and rule explanations.

Audit Ledger Panel

Collapsible SHA-256 hash-chained audit trail viewer with chain integrity verification. Every interaction is recorded immutably.

Agent Certification

Agent picker displays certification tiers (sandbox/internal/production/regulated) alongside trust scorecards from the governance layer.

PII Masking

Input and output PII masking handled transparently by the AFEK middleware. The assistant displays clean, safe content to the user.

SSE Streaming

Real-time streaming responses via POST-based Server-Sent Events, with a JSON fallback toggle for debugging.

Getting Started

Terminal

# Quick start — local development
cd quickstart/frontend
cp .env.sample .env
npm install
npm run dev

# The Vite dev server proxies /api/* → http://localhost:4000

Configuration

Variable	Default	Description
`PORT`	8080	BFF server port
`API_BASE_URL`	http://localhost:4000	Agent API server URL
`SKIP_AUTH`	true	Skip Entra token acquisition for local development
`API_TOKEN_SCOPE`	—	Entra app scope (required when SKIP_AUTH is not true)
`VITE_API_BASE_URL`	/api	API base URL for the React SPA (build-time)
`LOG_LEVEL`	info	Pino log level

File Structure

quickstart/frontend/
├── Dockerfile
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── src/
    ├── App.tsx                    # Main app with governance layout
    ├── main.tsx                   # React entry point
    ├── server.ts                  # BFF server (Fastify)
    ├── types.ts                   # Types with governance extensions
    ├── styles/
    │   └── index.css              # Tailwind v4
    ├── api/
    │   └── agent-client.ts        # HTTP/SSE client for AFEK API
    ├── components/
    │   ├── AgentPicker.tsx         # Agent selector with scorecards
    │   ├── ChatArea.tsx            # Message display area
    │   ├── ConversationList.tsx    # Sidebar conversation list
    │   ├── LedgerPanel.tsx         # Audit ledger viewer [AFEK]
    │   ├── MessageBubble.tsx       # Individual message display
    │   ├── MessageInput.tsx        # User input form
    │   ├── PolicyStatus.tsx        # Policy evaluation display [AFEK]
    │   ├── StreamToggle.tsx        # SSE/JSON toggle
    │   └── TrustBadge.tsx          # Trust score indicator [AFEK]
    └── hooks/
        ├── useChat.ts              # Chat projection hook
        └── useConversationStates.ts # Per-conversation state map

CAIRA Adaptation

This frontend is adapted from the Microsoft CAIRA (Connected Agent Infrastructure Reference Architecture) React frontend reference. Key adaptations include:

Activity → Conversation model — Replaced CAIRA's activity modes (discovery/planning/staffing) with AFEK's agent-centric conversation model where users select from deployed agents.
Governance overlays — Added TrustBadge, PolicyStatus, and LedgerPanel components that surface the AFEK middleware's trust scoring, policy evaluation, and immutable audit trail.
API client — Adapted the ActivityClient to an AgentClient targeting AFEK's /conversations, /agents, /ledger, and /policy-status endpoints.
SSE governance events — Extended SSE parsing to handle governance metadata events alongside message deltas.
BFF auth — Retained the Entra token injection pattern for production deployments with Azure Container Apps.