AgentSettingsShell

A complete settings page layout for managing multiple agents. Includes a sidebar for agent selection (when multiple agents exist) and tabbed panels for configuration slots.

Installation

typescript

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

Basic Usage

Display settings for multiple agents with automatic sidebar.

svelte

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

  // Serialized agent data from server
  const agents = [
    {
      id: 'praeco-1',
      agentClass: 'Praeco',
      name: 'Main Reporter',
      slots: {
        sources: { label: 'Sources', icon: '📰', order: 1 },
        prompts: { label: 'Prompts', icon: '💬', order: 2 },
        schedule: { label: 'Schedule', icon: '📅', order: 3 }
      }
    }
  ];

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

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

<AgentSettingsShell
  registry={agentUIRegistry}
  {agents}
  {configs}
  onSave={handleSave}
/>

Single Agent Mode

When only one agent exists, the sidebar is hidden automatically.

svelte

<AgentSettingsShell
  registry={agentUIRegistry}
  agents={[singleAgent]}
  {configs}
  onSave={handleSave}
/>

Read-Only Mode

Display configurations without allowing edits.

svelte

<AgentSettingsShell
  registry={agentUIRegistry}
  {agents}
  {configs}
  readonly
/>

With File and DB Configs

Support layered configuration with file defaults and database overrides.

svelte

<AgentSettingsShell
  registry={agentUIRegistry}
  {agents}
  configs={mergedConfigs}
  fileConfigs={fileBasedConfigs}
  dbConfigs={databaseConfigs}
  onSave={handleSave}
/>

Props

Prop	Type	Default	Description
`registry` *	`AgentUIComponentRegistry`	-	Registry for looking up panel components
`agents` *	`AgentData[]`	-	List of agents with their UI slot definitions
`configs` *	`Record<string, Record<string, unknown>>`	-	Config data for each agent and slot (agentId -> slotId -> config)
`onSave`	`(agentId: string, slotId: string, config: unknown) => Promise<void>`	`undefined`	Callback when a configuration is saved
`readonly`	`boolean`	`false`	Make all panels read-only
`fileConfigs`	`Record<string, Record<string, unknown>>`	`{}`	File-based configuration defaults per agent/slot
`dbConfigs`	`Record<string, Record<string, unknown>>`	`{}`	Database-persisted configuration overrides per agent/slot

TypeScript

typescript

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

// Serialized agent data (can't pass instances to client)
interface AgentData {
  id: string;
  name?: string;
  agentClass: string;  // e.g., 'Praeco'
  slots: AgentUISlots;
}

interface AgentUISlot {
  label: string;
  description?: string;
  icon?: string;
  order?: number;
}

// AgentUISlots is Record<string, AgentUISlot>

Layout

Sidebar - Agent list (hidden when single agent)
Header - Agent class name and optional name
Tabs - Configuration slot tabs
Panel - Dynamic panel content from registry