@happyvertical/smrt-agents 0.33.1 → 0.34.0

package/README.md

@@ -136,4 +136,5 @@ which work is an intentional intervention.
 - `@happyvertical/ai` -- AI client (SDK)
 - `@happyvertical/files` -- Filesystem utilities (SDK)
 - `@happyvertical/utils` -- Shared utilities (SDK)
-- Peer (optional): `@happyvertical/smrt-svelte`, `svelte`
+- `@happyvertical/smrt-ui` -- UI runtime (i18n client, primitives, module registry) for the optional `./svelte` components, including the agent-admin shells (`AgentAdminPanel`, `AgentAdminTabs`, `AgentSettingsShell`) that moved here from smrt-svelte in #1589
+- Peer (optional): `svelte`

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "version": "1.0.0",
-  "timestamp": 1782238520500,
+  "timestamp": 1782241028851,
   "packageName": "@happyvertical/smrt-agents",
-  "packageVersion": "0.33.1",
+  "packageVersion": "0.34.0",
   "objects": {
     "@happyvertical/smrt-agents:Agent": {
       "name": "agent",

package/dist/smrt-knowledge.json

@@ -1,13 +1,13 @@
 {
   "schemaVersion": 1,
-  "generatedAt": "2026-06-23T18:15:20.912Z",
+  "generatedAt": "2026-06-23T18:57:09.201Z",
   "packageName": "@happyvertical/smrt-agents",
-  "packageVersion": "0.33.1",
+  "packageVersion": "0.34.0",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "6eb0824a0f55c5aa3e25d5fda322d43b7b33183ce6aa1bd81b0ec0a3baa7275f",
-    "packageJson": "4192d74e118c82ce66619134362320ee362a7231e7a5aee2d5433064acfaf2b8",
+    "manifest": "4b81fa92d8730fb99fb77e360cfb4a03d7d88ed4172a8eeafd88b103338558fa",
+    "packageJson": "57047202a7ff5de95df3a60c7e03996b2339a6ffbebed7b02fc836765c5577ad",
     "agents": "3cdef62db9f57de1f5675726cdc54b3e64e9d39e67ad316904d08212cf046112"
   },
   "exports": [
@@ -17,6 +17,7 @@
     "./playground",
     "./server",
     "./svelte",
+    "./svelte/admin",
     "./ui",
     "./vite"
   ],
@@ -36,6 +37,9 @@
     "@happyvertical/sql": "catalog:",
     "@sentry/node": "catalog:",
     "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "25.0.9",
     "fast-glob": "3.3.3",
     "svelte-check": "^4.3.5",

package/dist/svelte/admin.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Side-effect-free agent-admin shells.
+ *
+ * Exposes the agent-admin composites (`AgentAdminPanel` / `AgentAdminTabs` /
+ * `AgentSettingsShell`) and the registry types they take WITHOUT the schedule
+ * component `ModuleUIRegistry` auto-registration that the `./svelte` barrel runs
+ * on import. Consumers that only render the admin shells should import from here
+ * — it preserves the side-effect-free semantics of the former
+ * `@happyvertical/smrt-svelte/admin` subpath (#1589).
+ */
+import type { ComponentProps } from 'svelte';
+import AgentAdminPanel from './components/AgentAdminPanel.svelte';
+import AgentAdminTabs from './components/AgentAdminTabs.svelte';
+import AgentSettingsShell from './components/AgentSettingsShell.svelte';
+export { AgentAdminPanel, AgentAdminTabs, AgentSettingsShell };
+export type AgentAdminPanelProps = ComponentProps<typeof AgentAdminPanel>;
+export type AgentAdminTabsProps = ComponentProps<typeof AgentAdminTabs>;
+export type AgentSettingsShellProps = ComponentProps<typeof AgentSettingsShell>;
+export type { AdminPanelBaseProps, AgentUIComponentRegistry, AgentUISlot, AgentUISlots, } from '../ui.js';
+//# sourceMappingURL=admin.d.ts.map

package/dist/svelte/admin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin.d.ts","sourceRoot":"","sources":["../../src/svelte/admin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,kBAAkB,MAAM,wCAAwC,CAAC;AAExE,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC;AAE/D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AACxE,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAKhF,YAAY,EACV,mBAAmB,EACnB,wBAAwB,EACxB,WAAW,EACX,YAAY,GACb,MAAM,UAAU,CAAC"}

package/dist/svelte/admin.js

@@ -0,0 +1,4 @@
+import AgentAdminPanel from './components/AgentAdminPanel.svelte';
+import AgentAdminTabs from './components/AgentAdminTabs.svelte';
+import AgentSettingsShell from './components/AgentSettingsShell.svelte';
+export { AgentAdminPanel, AgentAdminTabs, AgentSettingsShell };

package/dist/svelte/components/AgentAdminPanel.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type {
+  AdminPanelBaseProps,
+  AgentUIComponentRegistry,
+  AgentUISlot,
+} from '../../ui.js';
+import { M } from '../i18n.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** The registry to look up components from */
+  registry: AgentUIComponentRegistry;
+  /** The agent class name (e.g., 'Praeco') */
+  agentClass: string;
+  /** The slot ID to render */
+  slotId: string;
+  /** The slot definition */
+  slot: AgentUISlot;
+  /** The current configuration for this slot */
+  config: unknown;
+  /** Callback when config is saved */
+  onSave?: (config: unknown) => Promise<void>;
+  /** Whether the panel is read-only */
+  readonly?: boolean;
+  /** File-based config defaults */
+  fileConfig?: unknown;
+  /** Database-persisted config overrides */
+  dbConfig?: unknown;
+}
+
+const {
+  registry,
+  agentClass,
+  slotId,
+  slot,
+  config,
+  onSave,
+  readonly = false,
+  fileConfig,
+  dbConfig,
+}: Props = $props();
+
+const Component = $derived(registry.get(agentClass, slotId));
+
+async function handleSave(newConfig: unknown) {
+  await onSave?.(newConfig);
+}
+</script>
+
+{#if Component}
+	<Component
+		{config}
+		onSave={handleSave}
+		{readonly}
+		{fileConfig}
+		{dbConfig}
+	/>
+{:else}
+	<div class="no-panel">
+		<div class="no-panel-icon">⚙️</div>
+		<p class="no-panel-message">
+			{t(M['ui.agent_admin_panel.no_panel_message'])} <code>{agentClass}.{slotId}</code>
+		</p>
+		<p class="no-panel-hint">
+			{t(M['ui.agent_admin_panel.no_panel_hint'])}
+		</p>
+	</div>
+{/if}
+
+<style>
+	.no-panel {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 3rem 2rem;
+		text-align: center;
+		background: var(--smrt-color-surface-container-low, #f8fafc);
+		border: 1px dashed var(--smrt-color-outline-variant, #e2e8f0);
+		border-radius: var(--smrt-radius-medium, 8px);
+		min-height: 200px;
+	}
+
+	.no-panel-icon {
+		font-size: var(--smrt-typography-display-medium-size, 2.5rem);
+		margin-bottom: 1rem;
+		opacity: 0.5;
+	}
+
+	.no-panel-message {
+		margin: 0 0 0.5rem 0;
+		font-size: var(--smrt-typography-body-large-size, 0.9375rem);
+		color: var(--smrt-color-on-surface-variant, #64748b);
+	}
+
+	.no-panel-message code {
+		background: var(--smrt-color-surface-container-high, #e2e8f0);
+		padding: var(--smrt-spacing-1, 0.125rem) var(--smrt-spacing-2, 0.375rem);
+		border-radius: var(--smrt-radius-small, 4px);
+		font-family: var(--smrt-font-family-mono, 'SF Mono', Monaco, Consolas, monospace);
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+	}
+
+	.no-panel-hint {
+		margin: 0;
+		font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
+		color: var(--smrt-color-on-surface-variant, #94a3b8);
+	}
+</style>

package/dist/svelte/components/AgentAdminPanel.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AgentUIComponentRegistry, AgentUISlot } from '../../ui.js';
+export interface Props {
+    /** The registry to look up components from */
+    registry: AgentUIComponentRegistry;
+    /** The agent class name (e.g., 'Praeco') */
+    agentClass: string;
+    /** The slot ID to render */
+    slotId: string;
+    /** The slot definition */
+    slot: AgentUISlot;
+    /** The current configuration for this slot */
+    config: unknown;
+    /** Callback when config is saved */
+    onSave?: (config: unknown) => Promise<void>;
+    /** Whether the panel is read-only */
+    readonly?: boolean;
+    /** File-based config defaults */
+    fileConfig?: unknown;
+    /** Database-persisted config overrides */
+    dbConfig?: unknown;
+}
+declare const AgentAdminPanel: import("svelte").Component<Props, {}, "">;
+type AgentAdminPanel = ReturnType<typeof AgentAdminPanel>;
+export default AgentAdminPanel;
+//# sourceMappingURL=AgentAdminPanel.svelte.d.ts.map

package/dist/svelte/components/AgentAdminPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAdminPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AgentAdminPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,wBAAwB,EACxB,WAAW,EACZ,MAAM,aAAa,CAAC;AAIrB,MAAM,WAAW,KAAK;IACpB,8CAA8C;IAC9C,QAAQ,EAAE,wBAAwB,CAAC;IACnC,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8CD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/AgentAdminTabs.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { AgentUIComponentRegistry, AgentUISlots } from '../../ui.js';
+import { M } from '../i18n.js';
+import AgentAdminPanel from './AgentAdminPanel.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** The registry to look up components from */
+  registry: AgentUIComponentRegistry;
+  /** The agent class name (e.g., 'Praeco') */
+  agentClass: string;
+  /** UI slots declared by the agent */
+  slots: AgentUISlots;
+  /** Config data for each slot (keyed by slotId) */
+  configs: Record<string, unknown>;
+  /** Callback when a slot config is saved */
+  onSave?: (slotId: string, config: unknown) => Promise<void>;
+  /** Whether all panels are read-only */
+  readonly?: boolean;
+  /** File-based configs for each slot */
+  fileConfigs?: Record<string, unknown>;
+  /** Database configs for each slot */
+  dbConfigs?: Record<string, unknown>;
+}
+
+const {
+  registry,
+  agentClass,
+  slots,
+  configs,
+  onSave,
+  readonly = false,
+  fileConfigs = {},
+  dbConfigs = {},
+}: Props = $props();
+
+// Sort slots by order, then by label
+const sortedSlots = $derived(
+  Object.entries(slots).sort(([, a], [, b]) => {
+    const orderA = a.order ?? 99;
+    const orderB = b.order ?? 99;
+    if (orderA !== orderB) return orderA - orderB;
+    return a.label.localeCompare(b.label);
+  }),
+);
+
+let activeSlotId = $state<string | null>(null);
+let tablistEl: HTMLElement | null = $state(null);
+
+// Initialize active slot to first sorted slot
+$effect(() => {
+  if (activeSlotId === null && sortedSlots.length > 0) {
+    activeSlotId = sortedSlots[0][0];
+  }
+});
+
+function handleSlotClick(slotId: string) {
+  activeSlotId = slotId;
+}
+
+/**
+ * Handle keyboard navigation for accessibility
+ */
+function handleKeydown(event: KeyboardEvent, currentSlotId: string) {
+  const enabledSlots = sortedSlots;
+  const currentIndex = enabledSlots.findIndex(([id]) => id === currentSlotId);
+
+  if (currentIndex === -1) return;
+
+  let nextIndex: number | null = null;
+
+  switch (event.key) {
+    case 'ArrowRight':
+      event.preventDefault();
+      nextIndex = (currentIndex + 1) % enabledSlots.length;
+      break;
+    case 'ArrowLeft':
+      event.preventDefault();
+      nextIndex =
+        (currentIndex - 1 + enabledSlots.length) % enabledSlots.length;
+      break;
+    case 'Home':
+      event.preventDefault();
+      nextIndex = 0;
+      break;
+    case 'End':
+      event.preventDefault();
+      nextIndex = enabledSlots.length - 1;
+      break;
+  }
+
+  if (nextIndex !== null && nextIndex !== currentIndex) {
+    const [nextSlotId] = enabledSlots[nextIndex];
+    activeSlotId = nextSlotId;
+    // Focus the next tab after DOM update
+    requestAnimationFrame(() => {
+      const tabButton = tablistEl?.querySelector(
+        `[data-tab-id="${CSS.escape(nextSlotId)}"]`,
+      ) as HTMLElement;
+      tabButton?.focus();
+    });
+  }
+}
+
+async function handleSave(config: unknown) {
+  if (activeSlotId && onSave) {
+    await onSave(activeSlotId, config);
+  }
+}
+</script>
+
+<div class="agent-admin-tabs">
+	<div class="tabs-nav" role="tablist" aria-label={t(M['ui.agent_admin_tabs.tablist_label'])} bind:this={tablistEl}>
+		{#each sortedSlots as [slotId, slot]}
+			<button
+				class="tab-button"
+				class:active={activeSlotId === slotId}
+				role="tab"
+				aria-selected={activeSlotId === slotId}
+				aria-controls="panel-{slotId}"
+				id="tab-{slotId}"
+				data-tab-id={slotId}
+				tabindex={activeSlotId === slotId ? 0 : -1}
+				onclick={() => handleSlotClick(slotId)}
+				onkeydown={(e) => handleKeydown(e, slotId)}
+			>
+				{#if slot.icon}
+					<span class="tab-icon" aria-hidden="true">{slot.icon}</span>
+				{/if}
+				<span class="tab-label">{slot.label}</span>
+			</button>
+		{/each}
+	</div>
+
+	<div class="tab-content">
+		{#if activeSlotId && slots[activeSlotId]}
+			{@const activeSlot = slots[activeSlotId]}
+			<div
+				id="panel-{activeSlotId}"
+				class="tab-panel"
+				role="tabpanel"
+				aria-labelledby="tab-{activeSlotId}"
+			>
+				{#if activeSlot.description}
+					<p class="slot-description">{activeSlot.description}</p>
+				{/if}
+
+				<AgentAdminPanel
+					{registry}
+					{agentClass}
+					slotId={activeSlotId}
+					slot={activeSlot}
+					config={configs[activeSlotId] ?? {}}
+					onSave={handleSave}
+					{readonly}
+					fileConfig={fileConfigs[activeSlotId]}
+					dbConfig={dbConfigs[activeSlotId]}
+				/>
+			</div>
+		{:else}
+			<div class="no-slots">
+				<p>{t(M['ui.agent_admin_tabs.no_slots'])}</p>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.agent-admin-tabs {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.tabs-nav {
+		display: flex;
+		gap: 0.25rem;
+		border-bottom: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
+		padding-bottom: 0;
+	}
+
+	.tab-button {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1rem;
+		border: none;
+		background: transparent;
+		color: var(--smrt-color-on-surface-variant, #64748b);
+		font-size: var(--smrt-typography-label-large-size, 0.875rem);
+		font-weight: var(--smrt-typography-weight-medium, 500);
+		cursor: pointer;
+		border-bottom: 2px solid transparent;
+		margin-bottom: -1px;
+		transition:
+			color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease),
+			border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+	}
+
+	.tab-button:hover:not(:disabled) {
+		color: var(--smrt-color-on-surface, #334155);
+	}
+
+	.tab-button.active {
+		color: var(--smrt-color-primary, #3b82f6);
+		border-bottom-color: var(--smrt-color-primary, #3b82f6);
+	}
+
+	.tab-button:disabled {
+		opacity: 0.38;
+		cursor: not-allowed;
+	}
+
+	.tab-button:focus-visible {
+		outline: 2px solid var(--smrt-color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.tab-icon {
+		font-size: var(--smrt-typography-title-medium-size, 1rem);
+		opacity: 0.8;
+	}
+
+	.tab-label {
+		white-space: nowrap;
+	}
+
+	.tab-content {
+		min-height: 300px;
+	}
+
+	.tab-panel {
+		animation: fadeIn var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-out);
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.tab-panel {
+			animation: none;
+		}
+	}
+
+	.slot-description {
+		margin: 0 0 1rem 0;
+		padding: 0.75rem 1rem;
+		background: var(--smrt-color-primary-container, #f0f9ff);
+		border-left: 3px solid var(--smrt-color-primary, #3b82f6);
+		border-radius: 0 var(--smrt-radius-md, 8px) var(--smrt-radius-md, 8px) 0;
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		color: var(--smrt-color-on-primary-container, #1e40af);
+	}
+
+	.no-slots {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 200px;
+		color: var(--smrt-color-on-surface-variant, #64748b);
+		font-size: var(--smrt-typography-body-medium-size, 0.9375rem);
+	}
+
+	.no-slots p {
+		margin: 0;
+	}
+</style>

package/dist/svelte/components/AgentAdminTabs.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { AgentUIComponentRegistry, AgentUISlots } from '../../ui.js';
+export interface Props {
+    /** The registry to look up components from */
+    registry: AgentUIComponentRegistry;
+    /** The agent class name (e.g., 'Praeco') */
+    agentClass: string;
+    /** UI slots declared by the agent */
+    slots: AgentUISlots;
+    /** Config data for each slot (keyed by slotId) */
+    configs: Record<string, unknown>;
+    /** Callback when a slot config is saved */
+    onSave?: (slotId: string, config: unknown) => Promise<void>;
+    /** Whether all panels are read-only */
+    readonly?: boolean;
+    /** File-based configs for each slot */
+    fileConfigs?: Record<string, unknown>;
+    /** Database configs for each slot */
+    dbConfigs?: Record<string, unknown>;
+}
+declare const AgentAdminTabs: import("svelte").Component<Props, {}, "">;
+type AgentAdminTabs = ReturnType<typeof AgentAdminTabs>;
+export default AgentAdminTabs;
+//# sourceMappingURL=AgentAdminTabs.svelte.d.ts.map

package/dist/svelte/components/AgentAdminTabs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentAdminTabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AgentAdminTabs.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK1E,MAAM,WAAW,KAAK;IACpB,8CAA8C;IAC9C,QAAQ,EAAE,wBAAwB,CAAC;IACnC,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,KAAK,EAAE,YAAY,CAAC;IACpB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAkID,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/AgentSettingsShell.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { AgentUIComponentRegistry, AgentUISlots } from '../../ui.js';
+import { M } from '../i18n.js';
+import AgentAdminTabs from './AgentAdminTabs.svelte';
+
+const { t } = useI18n();
+
+/**
+ * Serialized agent data passed from server
+ * (Agent instances can't be passed directly to client)
+ */
+interface AgentData {
+  id: string;
+  name?: string;
+  /** Agent class name (e.g., 'Praeco') - determined from _meta_type or explicit */
+  agentClass: string;
+  /** UI slots for this agent */
+  slots: AgentUISlots;
+}
+
+export interface Props {
+  /** The registry to look up components from */
+  registry: AgentUIComponentRegistry;
+  /** List of agents to display (serialized data, not instances) */
+  agents: AgentData[];
+  /** Config data for each agent and slot: agentId -> slotId -> config */
+  configs: Record<string, Record<string, unknown>>;
+  /** Callback when a config is saved */
+  onSave?: (agentId: string, slotId: string, config: unknown) => Promise<void>;
+  /** Whether all panels are read-only */
+  readonly?: boolean;
+  /** File configs: agentId -> slotId -> config */
+  fileConfigs?: Record<string, Record<string, unknown>>;
+  /** Database configs: agentId -> slotId -> config */
+  dbConfigs?: Record<string, Record<string, unknown>>;
+}
+
+const {
+  registry,
+  agents,
+  configs,
+  onSave,
+  readonly = false,
+  fileConfigs = {},
+  dbConfigs = {},
+}: Props = $props();
+
+// Stable per-instance id base so multiple shells don't collide on tab/panel ids.
+const idBase = $props.id();
+
+let activeAgentId = $state<string | null>(null);
+let tablistEl: HTMLElement | null = $state(null);
+
+// Initialize to first agent
+$effect(() => {
+  if (activeAgentId === null && agents.length > 0) {
+    activeAgentId = agents[0].id;
+  }
+});
+
+const activeAgent = $derived(agents.find((a) => a.id === activeAgentId));
+
+function handleAgentClick(agentId: string) {
+  activeAgentId = agentId;
+}
+
+/**
+ * Roving-tabindex keyboard navigation for the agent switcher (C8). The list is
+ * a vertical tablist, so Up/Down move between agents (plus Home/End); mirrors
+ * the horizontal pattern in AgentAdminTabs.
+ */
+function handleAgentKeydown(event: KeyboardEvent, currentAgentId: string) {
+  const currentIndex = agents.findIndex((a) => a.id === currentAgentId);
+  if (currentIndex === -1) return;
+
+  let nextIndex: number | null = null;
+  switch (event.key) {
+    case 'ArrowDown':
+    case 'ArrowRight':
+      event.preventDefault();
+      nextIndex = (currentIndex + 1) % agents.length;
+      break;
+    case 'ArrowUp':
+    case 'ArrowLeft':
+      event.preventDefault();
+      nextIndex = (currentIndex - 1 + agents.length) % agents.length;
+      break;
+    case 'Home':
+      event.preventDefault();
+      nextIndex = 0;
+      break;
+    case 'End':
+      event.preventDefault();
+      nextIndex = agents.length - 1;
+      break;
+  }
+
+  if (nextIndex !== null && nextIndex !== currentIndex) {
+    const nextAgentId = agents[nextIndex].id;
+    activeAgentId = nextAgentId;
+    // Focus the newly-selected tab after the DOM updates.
+    requestAnimationFrame(() => {
+      const tabButton = tablistEl?.querySelector(
+        `[data-agent-id="${CSS.escape(nextAgentId)}"]`,
+      ) as HTMLElement | null;
+      tabButton?.focus();
+    });
+  }
+}
+
+async function handleSave(slotId: string, config: unknown) {
+  if (activeAgentId && onSave) {
+    await onSave(activeAgentId, slotId, config);
+  }
+}
+</script>
+
+<div class="agent-settings-shell" class:single-agent={agents.length === 1}>
+	{#if agents.length > 1}
+		<aside class="agents-sidebar">
+			<h3 class="sidebar-title" id="{idBase}-agents-title">Agents</h3>
+			<div
+				class="agents-list"
+				role="tablist"
+				aria-orientation="vertical"
+				aria-labelledby="{idBase}-agents-title"
+				bind:this={tablistEl}
+			>
+				{#each agents as agent}
+					<button
+						class="agent-button"
+						class:active={activeAgentId === agent.id}
+						role="tab"
+						aria-selected={activeAgentId === agent.id}
+						aria-controls="{idBase}-panel"
+						id="{idBase}-tab-{agent.id}"
+						data-agent-id={agent.id}
+						tabindex={activeAgentId === agent.id ? 0 : -1}
+						onclick={() => handleAgentClick(agent.id)}
+						onkeydown={(e) => handleAgentKeydown(e, agent.id)}
+					>
+						<span class="agent-class">{agent.agentClass}</span>
+						{#if agent.name}
+							<span class="agent-name">{agent.name}</span>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</aside>
+	{/if}
+
+	<main
+		class="agent-content"
+		id="{idBase}-panel"
+		role={agents.length > 1 ? 'tabpanel' : undefined}
+		aria-labelledby={agents.length > 1 && activeAgentId
+			? `${idBase}-tab-${activeAgentId}`
+			: undefined}
+	>
+		{#if activeAgent}
+			<header class="agent-header">
+				<h2 class="agent-title">{activeAgent.agentClass}</h2>
+				{#if activeAgent.name}
+					<p class="agent-subtitle">{activeAgent.name}</p>
+				{/if}
+			</header>
+
+			<AgentAdminTabs
+				{registry}
+				agentClass={activeAgent.agentClass}
+				slots={activeAgent.slots}
+				configs={configs[activeAgent.id] ?? {}}
+				onSave={handleSave}
+				{readonly}
+				fileConfigs={fileConfigs[activeAgent.id]}
+				dbConfigs={dbConfigs[activeAgent.id]}
+			/>
+		{:else if agents.length === 0}
+			<div class="no-agents">
+				<div class="no-agents-icon">🤖</div>
+				<p class="no-agents-message">{t(M['ui.agent_settings_shell.no_agents_message'])}</p>
+				<p class="no-agents-hint">
+					{t(M['ui.agent_settings_shell.no_agents_hint'])}
+				</p>
+			</div>
+		{/if}
+	</main>
+</div>
+
+<style>
+	.agent-settings-shell {
+		display: grid;
+		grid-template-columns: 220px 1fr;
+		gap: 1.5rem;
+		min-height: 400px;
+	}
+
+	.agent-settings-shell.single-agent {
+		grid-template-columns: 1fr;
+	}
+
+	.agents-sidebar {
+		background: var(--smrt-color-surface-container-low, #f8fafc);
+		border-radius: var(--smrt-radius-medium, 8px);
+		padding: var(--smrt-spacing-4, 1rem);
+		border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
+	}
+
+	.sidebar-title {
+		margin: 0 0 0.75rem 0;
+		padding: 0 0.5rem 0.75rem;
+		font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+		font-weight: var(--smrt-typography-weight-semibold, 600);
+		text-transform: uppercase;
+		letter-spacing: var(--smrt-typography-label-medium-tracking, 0.05em);
+		color: var(--smrt-color-on-surface-variant, #64748b);
+		border-bottom: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
+	}
+
+	.agents-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.agent-button {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.125rem;
+		padding: 0.625rem 0.75rem;
+		border: none;
+		background: transparent;
+		border-radius: var(--smrt-radius-md, 8px);
+		cursor: pointer;
+		text-align: left;
+		width: 100%;
+		transition:
+			background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease),
+			color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+	}
+
+	.agent-button:hover {
+		background: var(--smrt-color-surface-container-high, #e2e8f0);
+	}
+
+	.agent-button.active {
+		background: var(--smrt-color-primary, #3b82f6);
+	}
+
+	.agent-button.active .agent-class,
+	.agent-button.active .agent-name {
+		color: var(--smrt-color-on-primary, white);
+	}
+
+	.agent-class {
+		font-size: var(--smrt-typography-title-small-size, 0.875rem);
+		font-weight: var(--smrt-typography-weight-semibold, 600);
+		color: var(--smrt-color-on-surface, #1e293b);
+	}
+
+	.agent-name {
+		font-size: var(--smrt-typography-body-small-size, 0.75rem);
+		color: var(--smrt-color-on-surface-variant, #64748b);
+	}
+
+	.agent-content {
+		min-width: 0;
+	}
+
+	.agent-header {
+		margin-bottom: 1.5rem;
+		padding-bottom: 1rem;
+		border-bottom: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
+	}
+
+	.agent-title {
+		margin: 0;
+		font-size: var(--smrt-typography-headline-medium-size, 1.5rem);
+		font-weight: var(--smrt-typography-weight-semibold, 600);
+		color: var(--smrt-color-on-surface);
+	}
+
+	.agent-subtitle {
+		margin: 0.25rem 0 0;
+		font-size: var(--smrt-typography-body-medium-size, 0.9375rem);
+		color: var(--smrt-color-on-surface-variant, #64748b);
+	}
+
+	.no-agents {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 4rem 2rem;
+		text-align: center;
+		background: var(--smrt-color-surface-variant);
+		border: 1px dashed var(--smrt-color-outline-variant);
+		border-radius: var(--smrt-radius-md, 8px);
+		min-height: 300px;
+	}
+
+	.no-agents-icon {
+		font-size: var(--smrt-typography-display-medium-size, 3rem);
+		margin-bottom: 1rem;
+		opacity: 0.5;
+	}
+
+	.no-agents-message {
+		margin: 0 0 0.5rem 0;
+		font-size: var(--smrt-typography-body-large-size, 1rem);
+		color: var(--smrt-color-on-surface-variant, #64748b);
+	}
+
+	.no-agents-hint {
+		margin: 0;
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		color: var(--smrt-color-on-surface-variant, #94a3b8);
+		max-width: 400px;
+	}
+</style>

package/dist/svelte/components/AgentSettingsShell.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { AgentUIComponentRegistry, AgentUISlots } from '../../ui.js';
+/**
+ * Serialized agent data passed from server
+ * (Agent instances can't be passed directly to client)
+ */
+interface AgentData {
+    id: string;
+    name?: string;
+    /** Agent class name (e.g., 'Praeco') - determined from _meta_type or explicit */
+    agentClass: string;
+    /** UI slots for this agent */
+    slots: AgentUISlots;
+}
+export interface Props {
+    /** The registry to look up components from */
+    registry: AgentUIComponentRegistry;
+    /** List of agents to display (serialized data, not instances) */
+    agents: AgentData[];
+    /** Config data for each agent and slot: agentId -> slotId -> config */
+    configs: Record<string, Record<string, unknown>>;
+    /** Callback when a config is saved */
+    onSave?: (agentId: string, slotId: string, config: unknown) => Promise<void>;
+    /** Whether all panels are read-only */
+    readonly?: boolean;
+    /** File configs: agentId -> slotId -> config */
+    fileConfigs?: Record<string, Record<string, unknown>>;
+    /** Database configs: agentId -> slotId -> config */
+    dbConfigs?: Record<string, Record<string, unknown>>;
+}
+declare const AgentSettingsShell: import("svelte").Component<Props, {}, "">;
+type AgentSettingsShell = ReturnType<typeof AgentSettingsShell>;
+export default AgentSettingsShell;
+//# sourceMappingURL=AgentSettingsShell.svelte.d.ts.map

package/dist/svelte/components/AgentSettingsShell.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentSettingsShell.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AgentSettingsShell.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAK1E;;;GAGG;AACH,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,KAAK;IACpB,8CAA8C;IAC9C,QAAQ,EAAE,wBAAwB,CAAC;IACnC,iEAAiE;IACjE,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACjD,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACtD,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACrD;AAwID,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/__tests__/AgentSettingsShell.tablist.test.js

@@ -0,0 +1,94 @@
+// @vitest-environment jsdom
+/**
+ * Regression: the agent switcher is a proper ARIA tablist (C8).
+ *
+ * It was a <nav> of <button>s acting as single-select tabs, with no
+ * role/aria-selected/roving-tabindex/arrow-key nav — unlike sibling
+ * AgentAdminTabs which does the full tablist. The fix adds role="tablist" +
+ * role="tab" + aria-selected + roving tabindex + Up/Down/Home/End navigation,
+ * and marks the content panel role="tabpanel".
+ */
+import { createUIRegistry } from '@happyvertical/smrt-agents/ui';
+import { render, screen, waitFor, within } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import AgentSettingsShell from '../AgentSettingsShell.svelte';
+/**
+ * Roving focus moves via requestAnimationFrame, so wait for the expected tab to
+ * actually receive focus before dispatching the next key (otherwise the next
+ * keydown fires on the previously-focused tab).
+ */
+async function expectFocused(el) {
+    await waitFor(() => expect(el).toHaveFocus());
+}
+function agents() {
+    return [
+        { id: 'a1', agentClass: 'Praeco', name: 'Alpha', slots: {} },
+        { id: 'a2', agentClass: 'Caelus', name: 'Beta', slots: {} },
+        { id: 'a3', agentClass: 'Nimbus', name: 'Gamma', slots: {} },
+    ];
+}
+function renderShell() {
+    return render(AgentSettingsShell, {
+        props: {
+            registry: createUIRegistry(),
+            agents: agents(),
+            configs: {},
+        },
+    });
+}
+/**
+ * The shell embeds AgentAdminTabs (its own slot tablist), so scope queries to
+ * the agent-switcher tablist — identified by its "Agents" accessible name.
+ */
+function switcher() {
+    return screen.getByRole('tablist', { name: 'Agents' });
+}
+function switcherTabs() {
+    return within(switcher()).getAllByRole('tab');
+}
+describe('AgentSettingsShell — agent switcher tablist (C8)', () => {
+    it('renders a tablist of tabs with the first selected', () => {
+        renderShell();
+        expect(switcher()).toBeInTheDocument();
+        const tabs = switcherTabs();
+        expect(tabs).toHaveLength(3);
+        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
+        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
+    });
+    it('uses a roving tabindex (only the selected tab is tabbable)', () => {
+        renderShell();
+        const tabs = switcherTabs();
+        expect(tabs[0]).toHaveAttribute('tabindex', '0');
+        expect(tabs[1]).toHaveAttribute('tabindex', '-1');
+        expect(tabs[2]).toHaveAttribute('tabindex', '-1');
+    });
+    it('moves selection with ArrowDown / ArrowUp', async () => {
+        renderShell();
+        switcherTabs()[0].focus();
+        await userEvent.keyboard('{ArrowDown}');
+        expect(switcherTabs()[1]).toHaveAttribute('aria-selected', 'true');
+        await expectFocused(switcherTabs()[1]);
+        await userEvent.keyboard('{ArrowUp}');
+        expect(switcherTabs()[0]).toHaveAttribute('aria-selected', 'true');
+        await expectFocused(switcherTabs()[0]);
+    });
+    it('jumps to last/first with End / Home', async () => {
+        renderShell();
+        switcherTabs()[0].focus();
+        await userEvent.keyboard('{End}');
+        expect(switcherTabs()[2]).toHaveAttribute('aria-selected', 'true');
+        await expectFocused(switcherTabs()[2]);
+        await userEvent.keyboard('{Home}');
+        expect(switcherTabs()[0]).toHaveAttribute('aria-selected', 'true');
+        await expectFocused(switcherTabs()[0]);
+    });
+    it('exposes a tabpanel wired to the selected tab', () => {
+        renderShell();
+        const panel = screen.getByRole('tabpanel');
+        const selectedTab = switcherTabs().find((t) => t.getAttribute('aria-selected') === 'true');
+        expect(selectedTab).toBeTruthy();
+        expect(panel).toHaveAttribute('aria-labelledby', selectedTab?.id);
+        expect(selectedTab).toHaveAttribute('aria-controls', panel.id);
+    });
+});

package/dist/svelte/i18n.d.ts

@@ -29,5 +29,11 @@ export declare const M: {
     readonly 'agents.schedule_list.loading_schedules': "agents.schedule_list.loading_schedules";
     readonly 'agents.schedule_list.no_schedules_found': "agents.schedule_list.no_schedules_found";
     readonly 'agents.schedule_list.run_now': "agents.schedule_list.run_now";
+    readonly 'ui.agent_admin_panel.no_panel_message': "ui.agent_admin_panel.no_panel_message";
+    readonly 'ui.agent_admin_panel.no_panel_hint': "ui.agent_admin_panel.no_panel_hint";
+    readonly 'ui.agent_admin_tabs.no_slots': "ui.agent_admin_tabs.no_slots";
+    readonly 'ui.agent_admin_tabs.tablist_label': "ui.agent_admin_tabs.tablist_label";
+    readonly 'ui.agent_settings_shell.no_agents_message': "ui.agent_settings_shell.no_agents_message";
+    readonly 'ui.agent_settings_shell.no_agents_hint': "ui.agent_settings_shell.no_agents_hint";
 };
 //# sourceMappingURL=i18n.d.ts.map

package/dist/svelte/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CZ,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DZ,CAAC"}

package/dist/svelte/i18n.js

@@ -34,4 +34,13 @@ export const M = defineMessages({
     'agents.schedule_list.loading_schedules': 'Loading schedules...',
     'agents.schedule_list.no_schedules_found': 'No schedules found',
     'agents.schedule_list.run_now': 'Run Now',
+    // components/AgentAdminPanel.svelte
+    'ui.agent_admin_panel.no_panel_message': 'No admin panel registered for',
+    'ui.agent_admin_panel.no_panel_hint': "Import the agent's admin package to register its panels.",
+    // components/AgentAdminTabs.svelte
+    'ui.agent_admin_tabs.no_slots': 'No configuration slots available for this agent.',
+    'ui.agent_admin_tabs.tablist_label': 'Agent configuration tabs',
+    // components/AgentSettingsShell.svelte
+    'ui.agent_settings_shell.no_agents_message': 'No agents configured for this site.',
+    'ui.agent_settings_shell.no_agents_hint': 'Agents are discovered by matching their context field to the site domain.',
 });

package/dist/svelte/index.d.ts

@@ -1,23 +1,33 @@
 /**
  * Agents Module Svelte Components
  *
- * Optional Svelte UI components for agent schedule management.
- * Auto-registers components with ModuleUIRegistry on import.
+ * Optional Svelte UI components for agent schedule management and the
+ * agent-admin shells (AgentAdminPanel / AgentAdminTabs / AgentSettingsShell)
+ * that render UI-slot config panels against the agent UI registry.
+ * Schedule components auto-register with ModuleUIRegistry on import; the admin
+ * shells are imported directly (not module-registry discoverable).
  *
  * @packageDocumentation
  */
 import type { ComponentProps } from 'svelte';
+import AgentAdminPanel from './components/AgentAdminPanel.svelte';
+import AgentAdminTabs from './components/AgentAdminTabs.svelte';
 import AgentDashboard from './components/AgentDashboard.svelte';
 import AgentRunHistory from './components/AgentRunHistory.svelte';
 import AgentScheduleForm from './components/AgentScheduleForm.svelte';
 import AgentScheduleList from './components/AgentScheduleList.svelte';
+import AgentSettingsShell from './components/AgentSettingsShell.svelte';
 import ScheduleStatusBadge from './components/ScheduleStatusBadge.svelte';
-export { AgentDashboard, AgentRunHistory, AgentScheduleForm, AgentScheduleList, ScheduleStatusBadge, };
+export { AgentAdminPanel, AgentAdminTabs, AgentDashboard, AgentRunHistory, AgentScheduleForm, AgentScheduleList, AgentSettingsShell, ScheduleStatusBadge, };
+export type AgentAdminPanelProps = ComponentProps<typeof AgentAdminPanel>;
+export type AgentAdminTabsProps = ComponentProps<typeof AgentAdminTabs>;
 export type AgentDashboardProps = ComponentProps<typeof AgentDashboard>;
 export type AgentRunHistoryProps = ComponentProps<typeof AgentRunHistory>;
 export type AgentScheduleFormProps = ComponentProps<typeof AgentScheduleForm>;
 export type AgentScheduleListProps = ComponentProps<typeof AgentScheduleList>;
+export type AgentSettingsShellProps = ComponentProps<typeof AgentSettingsShell>;
 export type ScheduleStatusBadgeProps = ComponentProps<typeof ScheduleStatusBadge>;
+export type { AdminPanelBaseProps, AgentUIComponentRegistry, AgentUISlot, AgentUISlots, } from '../ui.js';
 export type { AgentDashboardProps as AgentDashboardPropsLegacy, AgentRunHistoryEntry, AgentRunHistoryProps as AgentRunHistoryPropsLegacy, AgentScheduleData, AgentScheduleFormProps as AgentScheduleFormPropsLegacy, AgentScheduleListProps as AgentScheduleListPropsLegacy, RunStatus, ScheduleFormData, ScheduleStatus, } from './types.js';
 export { calculateSuccessRate, formatCronExpression, formatDuration, formatRelativeTime, getRunStatusVariant, getScheduleStatusVariant, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/svelte/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAI7C,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAG1E,OAAO,EACL,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,GACpB,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AACxE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1E,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9E,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9E,MAAM,MAAM,wBAAwB,GAAG,cAAc,CACnD,OAAO,mBAAmB,CAC3B,CAAC;AAGF,YAAY,EACV,mBAAmB,IAAI,yBAAyB,EAChD,oBAAoB,EACpB,oBAAoB,IAAI,0BAA0B,EAClD,iBAAiB,EACjB,sBAAsB,IAAI,4BAA4B,EACtD,sBAAsB,IAAI,4BAA4B,EACtD,SAAS,EACT,gBAAgB,EAChB,cAAc,GACf,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GACzB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAI7C,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,kBAAkB,MAAM,wCAAwC,CAAC;AACxE,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAG1E,OAAO,EACL,eAAe,EACf,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,GACpB,CAAC;AAGF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AACxE,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;AACxE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1E,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9E,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9E,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CACnD,OAAO,mBAAmB,CAC3B,CAAC;AAMF,YAAY,EACV,mBAAmB,EACnB,wBAAwB,EACxB,WAAW,EACX,YAAY,GACb,MAAM,UAAU,CAAC;AAGlB,YAAY,EACV,mBAAmB,IAAI,yBAAyB,EAChD,oBAAoB,EACpB,oBAAoB,IAAI,0BAA0B,EAClD,iBAAiB,EACjB,sBAAsB,IAAI,4BAA4B,EACtD,sBAAsB,IAAI,4BAA4B,EACtD,SAAS,EACT,gBAAgB,EAChB,cAAc,GACf,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,GACzB,MAAM,YAAY,CAAC"}

package/dist/svelte/index.js

@@ -1,21 +1,27 @@
 /**
  * Agents Module Svelte Components
  *
- * Optional Svelte UI components for agent schedule management.
- * Auto-registers components with ModuleUIRegistry on import.
+ * Optional Svelte UI components for agent schedule management and the
+ * agent-admin shells (AgentAdminPanel / AgentAdminTabs / AgentSettingsShell)
+ * that render UI-slot config panels against the agent UI registry.
+ * Schedule components auto-register with ModuleUIRegistry on import; the admin
+ * shells are imported directly (not module-registry discoverable).
  *
  * @packageDocumentation
  */
 import { ModuleUIRegistry } from '@happyvertical/smrt-ui/registry';
 import { AGENTS_MODULE_META } from '../ui.js';
 // Import components
+import AgentAdminPanel from './components/AgentAdminPanel.svelte';
+import AgentAdminTabs from './components/AgentAdminTabs.svelte';
 import AgentDashboard from './components/AgentDashboard.svelte';
 import AgentRunHistory from './components/AgentRunHistory.svelte';
 import AgentScheduleForm from './components/AgentScheduleForm.svelte';
 import AgentScheduleList from './components/AgentScheduleList.svelte';
+import AgentSettingsShell from './components/AgentSettingsShell.svelte';
 import ScheduleStatusBadge from './components/ScheduleStatusBadge.svelte';
 // Export components
-export { AgentDashboard, AgentRunHistory, AgentScheduleForm, AgentScheduleList, ScheduleStatusBadge, };
+export { AgentAdminPanel, AgentAdminTabs, AgentDashboard, AgentRunHistory, AgentScheduleForm, AgentScheduleList, AgentSettingsShell, ScheduleStatusBadge, };
 export { calculateSuccessRate, formatCronExpression, formatDuration, formatRelativeTime, getRunStatusVariant, getScheduleStatusVariant, } from './types.js';
 // Auto-register with ModuleUIRegistry
 ModuleUIRegistry.registerModule(AGENTS_MODULE_META);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-agents",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "type": "module",
   "description": "Agent framework for building autonomous actors in the SMRT ecosystem",
   "author": "HappyVertical",
@@ -34,6 +34,11 @@
       "types": "./dist/svelte/index.d.ts",
       "svelte": "./dist/svelte/index.js",
       "import": "./dist/svelte/index.js"
+    },
+    "./svelte/admin": {
+      "types": "./dist/svelte/admin.d.ts",
+      "svelte": "./dist/svelte/admin.js",
+      "import": "./dist/svelte/admin.js"
     }
   },
   "files": [
@@ -53,19 +58,22 @@
     "@happyvertical/ai": "^0.74.7",
     "@happyvertical/files": "^0.74.7",
     "@happyvertical/utils": "^0.74.7",
-    "@happyvertical/smrt-config": "0.33.1",
-    "@happyvertical/smrt-core": "0.33.1",
-    "@happyvertical/smrt-secrets": "0.33.1",
-    "@happyvertical/smrt-tenancy": "0.33.1",
-    "@happyvertical/smrt-types": "0.33.1",
-    "@happyvertical/smrt-ui": "0.33.1",
-    "@happyvertical/smrt-users": "0.33.1"
+    "@happyvertical/smrt-config": "0.34.0",
+    "@happyvertical/smrt-secrets": "0.34.0",
+    "@happyvertical/smrt-core": "0.34.0",
+    "@happyvertical/smrt-tenancy": "0.34.0",
+    "@happyvertical/smrt-types": "0.34.0",
+    "@happyvertical/smrt-ui": "0.34.0",
+    "@happyvertical/smrt-users": "0.34.0"
   },
   "devDependencies": {
     "@happyvertical/logger": "^0.74.7",
     "@happyvertical/sql": "^0.74.7",
     "@sentry/node": "^10.51.0",
     "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "25.0.9",
     "fast-glob": "3.3.3",
     "svelte-check": "^4.3.5",
@@ -73,7 +81,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.17",
-    "@happyvertical/smrt-vitest": "0.33.1"
+    "@happyvertical/smrt-vitest": "0.34.0"
   },
   "keywords": [
     "agent",