ADR-025: Agent Profile Widget System
ADR-025: Agent Profile Widget System
Status
ProposedContext
Eden Academy currently lacks a standardized system for agent profile pages, leading to architectural inconsistency and maintenance challenges. The current state includes:
Problems Identified:
Current Agent Profile Landscape:
User Request:
The need for "a standard set of options/views/widgets/etc for the academy profile pages that are driven by the registry almost like our own version of wix or squarespace but specifically for our agents."Decision
We will implement a Registry-Driven Widget System for agent profile pages that provides website builder-like flexibility while maintaining architectural consistency.1. Core Architecture Pattern
``
Registry (Profile Config) → Academy API (Widget Assembly) → Agent Profile (Rendered Widgets)
`
This maintains consistency with ADR-022 Registry-First Architecture while enabling flexible content presentation.
2. Widget-Based Profile System
#### Profile Configuration Model (Registry Extension)
`typescript
interface AgentProfileConfig {
agentId: string;
layout: ProfileLayout;
widgets: ProfileWidget[];
navigation: NavigationConfig;
theme: ThemeConfig;
metadata: ProfileMetadata;
}
interface ProfileWidget {
id: string;
type: WidgetType;
position: WidgetPosition;
config: WidgetConfig;
visibility: WidgetVisibility;
featureFlag?: string;
}
type WidgetType =
| 'hero'
| 'mission'
| 'daily-practice'
| 'training-status'
| 'metrics'
| 'works-gallery'
| 'countdown'
| 'trainer-info'
| 'social-links'
| 'custom-content';
`
#### Standard Widget Library
`typescript
export const STANDARD_WIDGETS = {
hero: HeroWidget, // Agent name, status, trainer, actions
mission: MissionWidget, // Agent purpose and specialization
dailyPractice: DailyPracticeWidget, // Output tracking and metrics
trainingStatus: TrainingStatusWidget, // Progress through lifecycle phases
metrics: MetricsWidget, // Revenue, retention, efficiency metrics
worksGallery: WorksGalleryWidget, // Recent works display
countdown: CountdownWidget, // Launch or event countdowns
trainerInfo: TrainerInfoWidget, // Trainer profile and methodology
socialLinks: SocialLinksWidget, // Social media and external links
customContent: CustomContentWidget, // Agent-specific content
} as const;
`
3. Implementation Structure
#### File Organization
`
src/
├── components/
│ └── agent-profile/
│ ├── widgets/ # Reusable widget components
│ ├── layouts/ # Layout templates
│ └── ProfileRenderer.tsx # Main rendering engine
├── app/
│ └── academy/
│ └── agent/
│ └── [agent]/
│ └── page.tsx # Universal profile page
└── lib/
└── profile/
├── widget-registry.ts # Widget catalog and loading
├── profile-config.ts # Configuration management
└── layout-engine.ts # Layout rendering logic
`
#### Universal Profile Page Pattern
`typescript
// /src/app/academy/agent/[agent]/page.tsx
export default async function AgentProfilePage({ params }: { params: { agent: string } }) {
// Registry-first data fetching
const agent = await agentService.getAgent(params.agent);
if (!agent) {
notFound();
}
// Fetch profile configuration from Registry
const profileConfig = await getAgentProfileConfig(params.agent);
return (
`
4. Agent Lifecycle Integration
The widget system directly supports our agent lifecycle phases:
#### INVITED → APPLYING:
• Basic profile widgets (hero, mission, trainer info)
• Training countdown widget
• Application status widget
#### APPLYING → ONBOARDING:
• Add pilot revenue widget
• Enable community engagement widgets
• Launch gate validation dashboard
#### ONBOARDING → ACTIVE:
• Full widget library access
• Daily practice widgets go live
• Revenue sharing widgets activate
#### ACTIVE → GRADUATED:
• Performance history widgets
• Alumni status indicators
• Success metrics widgets
5. Configuration Examples
#### BERTHA Profile Configuration (Migration Target)
`typescript
const BERTHA_PROFILE_CONFIG: AgentProfileConfig = {
agentId: 'bertha',
layout: { type: 'standard', maxWidth: '6xl', spacing: 'large' },
widgets: [
{
id: 'hero',
type: 'hero',
position: { section: 'header', order: 1 },
config: {
showStatus: true,
showTrainer: true,
primaryAction: { text: 'TRAINER INTERVIEW', href: '/sites/bertha/interview' },
secondaryActions: [
{ text: 'VIEW TRAINING DATA', href: '/admin/bertha-training' },
{ text: 'VIEW STUDIO →', href: '/sites/amanda' }
]
}
},
{
id: 'mission',
type: 'mission',
position: { section: 'main', order: 1 },
config: {
title: 'MISSION',
content: 'registry:profile.mission', // Reference Registry data
layout: 'two-column'
}
}
// Additional widgets...
]
};
`
Implementation Plan
Phase 1: Core Infrastructure (Week 1)
Create widget system foundation
Implement ProfileRenderer and WidgetRenderer
Build standard widget components
Add feature flag: ENABLE_WIDGET_PROFILE_SYSTEM`