AgentAdminPanel

A dynamic component renderer that looks up and displays the appropriate admin panel from the component registry based on agent class and slot ID.

Installation

typescript

import { AgentAdminPanel } from '@happyvertical/smrt-svelte';

Basic Usage

Render a single configuration panel.

svelte

<script lang="ts">
  import { AgentAdminPanel } from '@happyvertical/smrt-svelte';
  import { agentUIRegistry } from './registry';

  const slot = { label: 'Sources', icon: '📰' };
  let config = { feeds: [], calendars: [] };

  async function handleSave(newConfig: unknown) {
    config = newConfig;
    await api.saveConfig('praeco-1', 'sources', newConfig);
  }
</script>

<AgentAdminPanel
  registry={agentUIRegistry}
  agentClass="Praeco"
  slotId="sources"
  {slot}
  {config}
  onSave={handleSave}
/>

Missing Panel Handling

When no panel is registered, a helpful fallback is displayed.

text

// If registry.get('Praeco', 'sources') returns undefined,
// the component shows:
//
// ⚙️
// No admin panel registered for Praeco.sources
// Import the agent's admin package to register its panels.

Registry Pattern

Components are registered in the agent's admin package.

typescript

// praeco-admin/src/registry.ts
import { AgentUIRegistry } from '@happyvertical/smrt-agents/ui';
import SourcesPanel from './panels/SourcesPanel.svelte';
import PromptsPanel from './panels/PromptsPanel.svelte';

export const praecoRegistry = new AgentUIRegistry();

praecoRegistry.register('Praeco', 'sources', SourcesPanel);
praecoRegistry.register('Praeco', 'prompts', PromptsPanel);

// In your app, merge registries
import { praecoRegistry } from '@happyvertical/praeco-admin';
import { baseRegistry } from './registry';

export const agentUIRegistry = baseRegistry.merge(praecoRegistry);

Panel Component Props

Registered panel components receive these standard props.

typescript

// AdminPanelBaseProps - all panels receive these
interface AdminPanelBaseProps {
  config: unknown;
  onSave?: (config: unknown) => Promise<void>;
  readonly?: boolean;
  fileConfig?: unknown;
  dbConfig?: unknown;
}

Props

Prop	Type	Default	Description
`registry` *	`AgentUIComponentRegistry`	-	Registry for looking up panel components
`agentClass` *	`string`	-	Agent class name (e.g., "Praeco")
`slotId` *	`string`	-	The slot ID to render
`slot` *	`AgentUISlot`	-	The slot definition
`config` *	`unknown`	-	Current configuration for this slot
`onSave`	`(config: unknown) => Promise<void>`	`undefined`	Callback when config is saved
`readonly`	`boolean`	`false`	Make the panel read-only
`fileConfig`	`unknown`	`undefined`	File-based config defaults
`dbConfig`	`unknown`	`undefined`	Database config overrides

TypeScript

typescript

import { AgentAdminPanel } from '@happyvertical/smrt-svelte';
import type {
  AgentUIComponentRegistry,
  AgentUISlot,
  AdminPanelBaseProps
} from '@happyvertical/smrt-svelte';

// Re-exported from @happyvertical/smrt-agents/ui
interface AgentUISlot {
  label: string;
  description?: string;
  icon?: string;
  order?: number;
}

// Your panel components should implement AdminPanelBaseProps