AgentAdminTabs

Tab navigation component for displaying agent configuration slots. Renders the appropriate admin panel for each tab from the component registry.

Installation

typescript

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

Basic Usage

Display tabbed configuration panels for an agent.

svelte

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

  const slots = {
    sources: { label: 'Sources', icon: '📰', order: 1 },
    prompts: { label: 'Prompts', icon: '💬', order: 2 },
    schedule: { label: 'Schedule', icon: '📅', order: 3 }
  };

  const configs = {
    sources: { feeds: [], calendars: [] },
    prompts: { system: '', user: '' },
    schedule: { cron: '0 6 * * *' }
  };

  async function handleSave(slotId: string, config: unknown) {
    await api.saveSlotConfig(agentId, slotId, config);
  }
</script>

<AgentAdminTabs
  registry={agentUIRegistry}
  agentClass="Praeco"
  {slots}
  {configs}
  onSave={handleSave}
/>

Slot Ordering

Tabs are sorted by order property, then alphabetically by label.

typescript

const slots = {
  // Will appear third
  schedule: { label: 'Schedule', order: 3 },
  // Will appear first
  sources: { label: 'Sources', order: 1 },
  // Will appear second
  prompts: { label: 'Prompts', order: 2 }
};

Slot Descriptions

Optional descriptions appear above each panel.

typescript

const slots = {
  sources: {
    label: 'Sources',
    icon: '📰',
    description: 'Configure RSS feeds and calendar sources for this agent.'
  }
};

Props

Prop	Type	Default	Description
`registry` *	`AgentUIComponentRegistry`	-	Registry for looking up panel components
`agentClass` *	`string`	-	Agent class name (e.g., "Praeco")
`slots` *	`AgentUISlots`	-	UI slot definitions for this agent
`configs` *	`Record<string, unknown>`	-	Config data keyed by slot ID
`onSave`	`(slotId: string, config: unknown) => Promise<void>`	`undefined`	Callback when a slot config is saved
`readonly`	`boolean`	`false`	Make all panels read-only
`fileConfigs`	`Record<string, unknown>`	`{}`	File-based config defaults per slot
`dbConfigs`	`Record<string, unknown>`	`{}`	Database config overrides per slot

TypeScript

typescript

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

interface AgentUISlot {
  label: string;
  description?: string;
  icon?: string;       // Emoji or icon
  order?: number;      // Sort order (lower = first)
}

// AgentUISlots is Record<string, AgentUISlot>