Components
Seven components in four folders: layout chrome, dashboard widgets, the agent card, and the create-agent form. All are server components except CreateAgentForm.
components/layout/
Sidebar
Fixed 260px left rail (hidden below md). Renders the brand block ("AgentOps AI — Enterprise Agent Platform"), three nav sections, and a Settings footer link.
| Prop | Type | Default | Purpose |
|---|---|---|---|
activeItem | string | "Dashboard" | Which link gets the active treatment (left border + filled icon via fontVariationSettings: "'FILL' 1") |
Nav data is defined in-file as NavItem[] arrays: main (/dashboard, /agents, /create-agent — real links) plus Workflows and Operations sections whose items are href="#" placeholders awaiting their pages (Known Issues).
Topbar
Fixed 64px header offset for the sidebar width (md:w-[calc(100%-260px)]), with a backdrop-blur translucent surface. Contains a (non-functional) search input, optional agent-name label, Help/Notifications icon buttons, an environment chip ("Dev"), a "New Agent" CTA linking to /create-agent, and an "AO" avatar.
| Prop | Type | Purpose |
|---|---|---|
agentName? | string | Shown truncated at lg+ when the page knows the agent (dashboard passes it) |
components/dashboard/
StatCard
The dashboard's building block — either a simple value card or a container for arbitrary content:
| Prop | Type | Default | Purpose |
|---|---|---|---|
title | string | — | uppercase label row |
icon | string | — | Material Symbols name |
value? | string | number | — | big display value (ignored when children given) |
helper? | string | — | small green annotation next to the value |
children? | ReactNode | — | replaces the value row entirely (Task Overview, Tool Calls use this) |
valueClassName? | string | "text-on-surface" | color override for the value |
accent? | boolean | true | the decorative corner blob that scales on hover |
className? | string | "" | grid spans etc. |
PerformanceCard
Four-metric strip: average latency (ms → s with one decimal), estimated cost ($ with 4 decimals via Number(cost) parse), estimated tokens (locale-formatted), and average quality score (2 decimals, — when null). Defensive formatters handle null/NaN throughout — mirroring the backend's nullable metrics.
RecentActivity
Presentational list of ActivityItems (exported type): icon chip colored by tone (success | neutral | primary | warning | error → token classes), title + optional badge, description, meta line. The dashboard page derives these items from metrics — the component itself is dumb and reusable.
components/agents/
AgentCard
One agent in the /agents grid.
| Prop | Type |
|---|---|
id | number |
name, type, language, tone | string |
description | string | null |
enabledTools | string (comma-separated, split & trimmed in-component) |
createdAt | string (ISO; invalid dates render "Created recently") |
Behavior notes:
typeIconsmaps the four agent types to Material icons (Email Ops → mark_email_read, …) withsmart_toyfallback.- Tools render as mono chips; an empty list renders a "none" chip.
- The status pill is hardcoded "Active" — there is no status field on the backend model.
- Footer actions: Open links to
/agents/{id}(route not yet implemented); Edit and Run Workflow are inert buttons (Known Issues).
components/create-agent/
CreateAgentForm
The platform's only client component ("use client"), and the only holder of client state:
| State | Type | Purpose |
|---|---|---|
form | CreateAgentPayload | all field values; enabled_tools kept as the canonical comma-string |
isSubmitting | boolean | disables the submit button, swaps its icon/label |
errorMessage | string | null | error banner |
createdAgent | {id,name,type} | null | success banner |
Structure: three form sections (Identity & Core — name, type select, description; Behavior & Brain — system prompt with 4000-char counter, language and tone selects; Enabled Tools — checkbox cards for the four canonical tools with a selected-count pill) plus a sticky Live Preview aside that mirrors name/type/tools/tone in real time, and a safety-guardrails callout.
Key mechanics:
toolOptionsdefines the four tools with descriptions;email_analyzeranddocument_searchare checked by default — matching the backend's canonical names exactly (Tools).updateFieldclears both banners on any edit;toggleToolrecomputes the comma-string.- Submit trims all text fields, converts empty description to
null, and client-side-requires name/type/system_prompt before ever hitting the network. getApiErrorMessagenormalizes backend errors — adetailstring passes through; adetailarray (FastAPI 422) is flattened by joining each item'smsg. See API Proxy.- The "Optimize Prompt" button is decorative (no handler) — a roadmap affordance.
Composition diagram
Conventions for new components
- Server component by default; add
"use client"only for interactivity. - Type props with an explicit
type XProps =. - Style exclusively with design tokens (Design System); icons via Material Symbols names.
- Handle null/absent data defensively in the component (the backend's nullable metrics make this mandatory).
Related pages
- Pages — where these are composed
- Design System — the classes they use