@adia-ai/web-modules 0.8.24 → 0.8.26

package/agent-admin/admin-settings/admin-settings.yaml

@@ -0,0 +1,153 @@
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIAdminSettings
+tag: admin-settings-ui
+status: stable
+component: AdminSettings
+category: container
+version: 1
+description: |
+  L4 settings pane over ONE bound per-persona store (CHAT-HARNESS.md
+  §Components row L4 + §Interfaces 5, gh#600 / WCH-5). Sections group by
+  `@adia-ai/persona`'s `KNOWN_KINDS` — DISPLAY grouping only; this
+  composite never switches on `entry.kind` for logic (law 7: Entry is one
+  generic primitive). Each Entry renders through the same row: label +
+  description, an enabled toggle, and a collapsible content textarea
+  (authoring). Both write through `store.set(...)` immediately — the
+  store is the state, persisted per persona.
+
+  `persona` and `store` are plain JS properties (no attribute path);
+  `store` is an opaque `SettingsStore` object from
+  `@adia-ai/persona`'s `personaStore`.
+
+  Lives in `packages/web-modules/agent-admin/` alongside
+  `<admin-roster-ui>` and `<agent-admin-ui>`.
+
+composes:
+  - switch-ui
+  - textarea-ui
+  - text-ui
+  - icon-ui
+
+props:
+  persona:
+    description: |
+      The `Persona` (from `@adia-ai/persona`) whose entries this pane
+      renders, grouped by `KNOWN_KINDS`. JS property only — no attribute.
+    type: object
+    required: true
+    dynamic: true
+  store:
+    description: |
+      The `SettingsStore` bound to `persona` (typically
+      `personaStore(persona)`). Toggle + content edits write through it
+      immediately; external `store.set()` calls (e.g. a live-apply probe)
+      re-render this pane via `store.subscribe`. JS property only.
+    type: object
+    required: true
+    dynamic: true
+
+events:
+  entry-change:
+    description: An entry's `enabled` or `content` field was written through the store.
+    detail:
+      entryId:
+        type: string
+      field:
+        type: string
+        description: "'enabled' or 'content'."
+      value:
+        type: string
+        description: The new value (boolean for enabled, string for content).
+
+slots: {}
+
+states:
+  - name: idle
+    description: Default; renders `persona`'s entries grouped by kind.
+  - name: empty
+    description: No `persona` set.
+
+traits: []
+
+tokens:
+  --admin-settings-bg:
+    description: Panel background.
+    default: var(--a-bg)
+  --admin-settings-fg:
+    description: Primary foreground.
+    default: var(--a-fg)
+  --admin-settings-fg-muted:
+    description: Secondary foreground (description, empty state).
+    default: var(--a-fg-muted)
+  --admin-settings-px:
+    description: Horizontal padding.
+    default: var(--a-space-4)
+  --admin-settings-py:
+    description: Vertical padding.
+    default: var(--a-space-4)
+  --admin-settings-gap:
+    description: Vertical gap between header and sections.
+    default: var(--a-space-5)
+  --admin-settings-section-gap:
+    description: Gap between a section's heading and its entries.
+    default: var(--a-space-2)
+  --admin-settings-entry-gap:
+    description: Gap between sibling entries in a section.
+    default: var(--a-space-1)
+  --admin-settings-border:
+    description: Entry card border.
+    default: var(--a-border-subtle)
+  --admin-settings-radius:
+    description: Entry card border radius.
+    default: var(--a-radius-md)
+
+a2ui:
+  rules:
+    - rule: |
+        Use <admin-settings-ui> for the canonical per-persona settings
+        pane. Set both `persona` and `store` as JS properties — neither
+        has an attribute form.
+      reason: One composite replaces a hand-rolled per-kind settings UI.
+    - rule: |
+        Never author per-kind branches around this composite (a
+        prompt-section-specific control, a skill-specific control, …) —
+        `KNOWN_KINDS` is display grouping only; a seventh kind must render
+        through the SAME entry row with zero new code.
+      reason: Law 7 — Entry is one generic primitive across all kinds.
+
+anti_patterns:
+  - wrong: |
+      {"component": "AdminSettings"}
+    why: Renders "No persona selected." — `persona` and `store` must be set as JS properties before use.
+    fix: |
+      const el = document.querySelector('admin-settings-ui');
+      el.persona = myPersona;
+      el.store = personaStore(myPersona);
+
+examples:
+  - name: bound-to-a-persona
+    description: Settings pane bound to a persona + its store (JS-driven; not expressible as static a2ui JSON since `store` is an opaque object).
+    a2ui: |
+      [{"id": "settings", "component": "AdminSettings"}]
+
+keywords:
+  - admin
+  - settings
+  - persona
+  - entry
+  - store
+  - agent
+
+synonyms:
+  settings:
+    - config
+    - preferences
+    - entries
+  persona:
+    - agent
+    - profile
+
+related:
+  - AdminRoster
+  - AgentAdmin

package/agent-admin/agent-admin/agent-admin.a2ui.json

@@ -0,0 +1,135 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/AgentAdmin.json",
+  "title": "AgentAdmin",
+  "description": "L4 admin composite (CHAT-HARNESS.md §Components row L4 + §Interfaces 5,\ngh#600 / WCH-5) — persona roster + settings pane + a chat pane, wired to\nthe store-swap law: a genuine persona switch (a new `SettingsStore`\nobject) resets the conversation, disposes open generative-UI surfaces,\nand mints a fresh session; re-selecting the already-active persona\n(same memoized store reference) resets nothing.\n\nBehavior-only orchestrator (mirrors `<chat-shell>`) — stamps no HTML of\nits own. Bespoke light-DOM children: `<admin-roster-ui>`,\n`<admin-settings-ui>`, `<chat-shell>` in EXTERNAL mode (no `proxy-url` —\nthis composite drives it via `wireAgentEvents`).\n\nTransport-blind (CHAT-HARNESS law 1): the `runTurn` JS property is\n`(session, text) → AsyncIterable<AgentEvent>`; packaged default\n`undefined` falls back to a deterministic, keyless stub that compiles\nthe active persona FRESH every turn (`readLivePersona` +\n`compilePersona`) and visibly cites what it read — the live-apply\nprobe: edit an entry's content in `<admin-settings-ui>`, the next\nturn's stub output cites the new text immediately, no propagation\nchannel.\n\nLives in `packages/web-modules/agent-admin/` alongside\n`<admin-roster-ui>` and `<admin-settings-ui>`.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "active-id": {
+      "description": "The currently-active persona's id. Reflects; setting it programmatically\n(or via `<admin-roster-ui>`'s `persona-change`) runs `setActivePersona`.\n",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
+    "component": {
+      "const": "AgentAdmin"
+    },
+    "personas": {
+      "description": "Full array of `Persona` objects (from `@adia-ai/persona`) this admin\nsurface manages. JSON-attribute or JS-property; the composite derives\n`<admin-roster-ui>`'s summary list from it automatically.\n",
+      "$ref": "common_types.json#/$defs/DynamicStringList"
+    },
+    "renderer": {
+      "description": "Optional generative-UI renderer (WCH-4's surface-host registry seam)\n— JS property only, host-injected (private `@genui/renderer` packages\nnever ship inside this composite). Omitted, surface events are safely\ndropped.\n",
+      "type": "object"
+    },
+    "runTurn": {
+      "description": "Optional transport override — `(session, text) => AsyncIterable<AgentEvent>`.\nJS property only. Omitted, the composite's own deterministic stub\ndrives every turn (see description).\n",
+      "type": "object"
+    }
+  },
+  "required": [
+    "component",
+    "personas"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<agent-admin-ui id=\"admin\">\n  <admin-roster-ui></admin-roster-ui>\n  <admin-settings-ui></admin-settings-ui>\n  <chat-shell><chat-header></chat-header><chat-thread></chat-thread><chat-composer></chat-composer></chat-shell>\n</agent-admin-ui>\n",
+        "why": "Renders nothing without its bespoke children — `<agent-admin-ui>` needs `<admin-roster-ui>` + `<admin-settings-ui>` + `<chat-shell>` authored inside it.",
+        "wrong": "{\"component\": \"AgentAdmin\", \"personas\": [{\"id\": \"a\", \"label\": \"A\", \"seedVersion\": 1, \"entries\": []}]}\n"
+      }
+    ],
+    "category": "container",
+    "composes": [
+      "admin-roster-ui",
+      "admin-settings-ui",
+      "chat-shell"
+    ],
+    "events": {
+      "persona-activated": {
+        "description": "A persona finished activating (fired for both a genuine swap and a same-store reconnect).",
+        "detail": {
+          "personaId": {
+            "type": "string"
+          },
+          "reset": {
+            "description": "True for a genuine store swap (conversation/surfaces/session reset); false for a same-store reconnect.",
+            "type": "boolean"
+          }
+        }
+      },
+      "persona-imported": {
+        "description": "An imported persona (from `<admin-roster-ui>`'s `persona-import`) was appended and activated.",
+        "detail": {
+          "persona": {
+            "type": "object"
+          }
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Full agent-admin composition (JS-driven; `personas` with full Entry arrays isn't practically hand-authored as static a2ui JSON).",
+        "a2ui": "[{\"id\": \"admin\", \"component\": \"AgentAdmin\", \"children\": [\n  {\"id\": \"roster\", \"component\": \"AdminRoster\"},\n  {\"id\": \"settings\", \"component\": \"AdminSettings\"},\n  {\"id\": \"chat\", \"component\": \"ChatShell\"}\n]}]\n",
+        "name": "composed-shell"
+      }
+    ],
+    "keywords": [
+      "admin",
+      "agent",
+      "persona",
+      "roster",
+      "settings",
+      "chat",
+      "store-swap"
+    ],
+    "name": "UIAgentAdmin",
+    "related": [
+      "AdminRoster",
+      "AdminSettings",
+      "ChatShell"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default; one persona active, chat pane external-driven.",
+        "name": "idle"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "admin": [
+        "agent-admin",
+        "persona-admin"
+      ],
+      "persona": [
+        "agent",
+        "profile"
+      ]
+    },
+    "tag": "agent-admin-ui",
+    "tokens": {
+      "--agent-admin-border": {
+        "description": "Column divider border.",
+        "default": "var(--a-border-subtle)"
+      },
+      "--agent-admin-roster-w": {
+        "description": "Roster column width.",
+        "default": "var(--a-space-12)"
+      },
+      "--agent-admin-settings-w": {
+        "description": "Settings column width.",
+        "default": "calc(var(--a-space-12) * 1.6)"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/agent-admin/agent-admin/agent-admin.css

@@ -0,0 +1,49 @@
+/* ═══════════════════════════════════════════════════════════════
+   agent-admin-ui — Module CSS
+
+   Behavior-only orchestrator (mirrors chat-shell.css) — this file is
+   LAYOUT ONLY, reading bespoke light-DOM child tags directly
+   (<admin-roster-ui>, <admin-settings-ui>, <chat-shell>); each child
+   carries its own chrome via its own scoped stylesheet.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (agent-admin-ui) {
+
+  :where(:scope) {
+    --agent-admin-roster-w:   var(--a-space-12);
+    --agent-admin-settings-w: calc(var(--a-space-12) * 1.6);
+    --agent-admin-border:     var(--a-border-subtle);
+  }
+
+  :scope {
+    display: grid;
+    grid-template-columns: var(--agent-admin-roster-w) var(--agent-admin-settings-w) 1fr;
+    min-height: 0;
+  }
+
+  :scope > admin-roster-ui {
+    border-right: 1px solid var(--agent-admin-border);
+    overflow-y: auto;
+  }
+
+  :scope > admin-settings-ui {
+    border-right: 1px solid var(--agent-admin-border);
+    overflow-y: auto;
+  }
+
+  :scope > chat-shell {
+    min-width: 0;
+  }
+
+  @media (max-width: 900px) {
+    :scope {
+      grid-template-columns: 1fr;
+      grid-auto-rows: auto;
+    }
+    :scope > admin-roster-ui,
+    :scope > admin-settings-ui {
+      border-right: none;
+      border-bottom: 1px solid var(--agent-admin-border);
+    }
+  }
+}

package/agent-admin/agent-admin/agent-admin.d.ts

@@ -0,0 +1,45 @@
+/**
+ * `<agent-admin-ui>` — L4 admin composite: persona roster + settings pane
+ * + a chat pane, wired to the store-swap law (CHAT-HARNESS.md
+ * §Components row L4 + §Interfaces 5, gh#600 / WCH-5).
+ *
+ * Hand-authored alongside `<name>.yaml`; regenerate when the props /
+ * events shape changes.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+import type { Persona, SettingsStore } from '@adia-ai/persona';
+import type { AgentEvent } from '@adia-ai/agent';
+
+export type AgentAdminRunTurn = (session: unknown, text: string) => AsyncIterable<AgentEvent>;
+
+export interface AgentAdminPersonaActivatedDetail {
+  personaId: string;
+  reset: boolean;
+}
+export type AgentAdminPersonaActivatedEvent = CustomEvent<AgentAdminPersonaActivatedDetail>;
+
+export interface AgentAdminPersonaImportedDetail {
+  persona: Persona;
+}
+export type AgentAdminPersonaImportedEvent = CustomEvent<AgentAdminPersonaImportedDetail>;
+
+export class UIAgentAdmin extends UIElement {
+  personas: Persona[];
+  'active-id': string;
+  renderer: unknown;
+  runTurn: AgentAdminRunTurn | null;
+  readonly activePersona: Persona | null;
+  readonly activeStore: SettingsStore | null;
+
+  setActivePersona(id: string): { genuineSwap: boolean };
+  send(text: string): Promise<void>;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAgentAdmin, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'persona-activated', listener: (ev: AgentAdminPersonaActivatedEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'persona-imported', listener: (ev: AgentAdminPersonaImportedEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/agent-admin/agent-admin/agent-admin.js

@@ -0,0 +1,257 @@
+/**
+ * <agent-admin-ui> — L4 admin composite: persona roster + settings pane +
+ * a chat pane, wired to the store-swap law (CHAT-HARNESS.md §Components
+ * row L4 + §Interfaces 5, gh#600 / WCH-5).
+ *
+ * Behavior-only orchestrator (mirrors <chat-shell>'s pattern): stamps no
+ * HTML of its own. Bespoke light-DOM children, author-supplied:
+ *
+ *   <agent-admin-ui id="admin">
+ *     <admin-roster-ui></admin-roster-ui>
+ *     <admin-settings-ui></admin-settings-ui>
+ *     <chat-shell>
+ *       <chat-header><chat-status slot="status"></chat-status></chat-header>
+ *       <chat-thread><chat-empty>...</chat-empty></chat-thread>
+ *       <chat-composer><chat-input-ui></chat-input-ui></chat-composer>
+ *     </chat-shell>
+ *   </agent-admin-ui>
+ *   <script>
+ *     const admin = document.querySelector('#admin');
+ *     admin.personas = [supportPersona, writerPersona];  // @adia-ai/persona Persona[]
+ *     admin['active-id'] = 'support';
+ *   </script>
+ *
+ * STORE-SWAP LAW (CHAT-HARNESS §Interfaces 5): one `SettingsStore` per
+ * persona id, memoized for the composite's lifetime. `setActivePersona`
+ * compares the resolved store's OBJECT REFERENCE against the currently
+ * bound one — a genuine reference change (switching to a different
+ * persona) resets the chat conversation (`chat-shell.clear()`), disposes
+ * every open generative-UI surface (`disposeAll()`), and mints a fresh
+ * session; re-selecting the ALREADY-active persona resolves to the SAME
+ * memoized store reference and resets nothing.
+ *
+ * TRANSPORT-BLIND (law 1): `runTurn(session, text) → AsyncIterable<AgentEvent>`
+ * is the only channel to a model. Packaged default is `undefined` — the
+ * composite falls back to a deterministic, keyless stub that compiles the
+ * ACTIVE persona fresh (via `readLivePersona` + `compilePersona`) on every
+ * call and visibly cites what it read, proving live-apply
+ * (fresh-read-at-turn-time, M-scope 3): edit an entry's content in
+ * `<admin-settings-ui>`, the very NEXT turn's stub output cites the new
+ * text — there is no propagation channel, no cache.
+ *
+ * `<admin-roster-ui>`'s surface-agnostic generative-UI hosting rides
+ * `chat/chat-surfaces.js`'s `createSurfaceRegistry` + `wireAgentEvents`
+ * (WCH-4 / gh#599) — the `renderer` prop is host-injected (private,
+ * unpublished `@genui/renderer` packages never ship inside this
+ * composite); omitted, surface events are safely dropped.
+ *
+ * Per ADR-0027 — a consumer imports <admin-roster-ui>, <admin-settings-ui>,
+ * and <chat-shell> (+ its own bespoke children) alongside this module.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+import { compilePersona, personaStore } from '@adia-ai/persona';
+import { createSession, composeSystem } from '@adia-ai/agent';
+import { createSurfaceRegistry, wireAgentEvents } from '../../chat/chat-surfaces/chat-surfaces.js';
+import { readLivePersona } from '../live-persona.js';
+
+const NOOP_REGISTRY = Object.freeze({
+  route: () => undefined,
+  close: () => undefined,
+  feed: () => undefined,
+  get: () => undefined,
+  disposeAll: () => {},
+  hosts: new Map(),
+});
+
+class UIAgentAdmin extends UIElement {
+  static properties = {
+    'active-id': { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #personas = [];
+  #renderer = null;
+  #runTurn = null;
+  #roster = null;
+  #settings = null;
+  #chat = null;
+  #storesByPersonaId = new Map();
+  #activePersona = null;
+  #activeStore = null;
+  #session = null;
+  #surfaceRegistry = NOOP_REGISTRY;
+
+  get personas() { return this.#personas; }
+  set personas(value) {
+    this.#personas = Array.isArray(value) ? value : [];
+    this.#syncRosterSummaries();
+    this.#activateInitialIfNeeded();
+  }
+
+  get renderer() { return this.#renderer; }
+  set renderer(value) {
+    this.#renderer = value ?? null;
+    this.#surfaceRegistry = value ? createSurfaceRegistry({ renderer: value }) : NOOP_REGISTRY;
+  }
+
+  get runTurn() { return this.#runTurn; }
+  set runTurn(fn) { this.#runTurn = typeof fn === 'function' ? fn : null; }
+
+  /** The currently-bound persona (post live-apply overlay is computed
+   *  fresh per turn, not cached here — see #defaultRunTurn). */
+  get activePersona() { return this.#activePersona; }
+  /** The currently-bound SettingsStore — same object across a same-id
+   *  reconnect, a new object across a genuine persona switch. */
+  get activeStore() { return this.#activeStore; }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'personas') {
+      if (newVal == null) { this.personas = []; }
+      else {
+        try {
+          const parsed = JSON.parse(newVal);
+          this.personas = Array.isArray(parsed) ? parsed : [];
+        } catch { this.personas = []; }
+      }
+      return;
+    }
+    super.attributeChangedCallback(name, oldVal, newVal);
+  }
+
+  connected() {
+    this.#roster = this.querySelector('admin-roster-ui');
+    this.#settings = this.querySelector('admin-settings-ui');
+    this.#chat = this.querySelector('chat-shell');
+
+    this.#roster?.addEventListener('persona-change', this.#onPersonaChange);
+    this.#roster?.addEventListener('persona-import', this.#onPersonaImport);
+    this.#chat?.addEventListener('submit', this.#onChatSubmit);
+
+    this.#syncRosterSummaries();
+    this.#activateInitialIfNeeded();
+  }
+
+  #activateInitialIfNeeded() {
+    if (!this.isConnected || this.#activePersona) return;
+    const initialId = this['active-id'] || this.#personas[0]?.id || '';
+    if (initialId) this.setActivePersona(initialId);
+  }
+
+  disconnected() {
+    this.#roster?.removeEventListener('persona-change', this.#onPersonaChange);
+    this.#roster?.removeEventListener('persona-import', this.#onPersonaImport);
+    this.#chat?.removeEventListener('submit', this.#onChatSubmit);
+  }
+
+  // ── the store-swap law ──────────────────────────────────────────
+
+  /**
+   * @param {string} id
+   * @returns {{ genuineSwap: boolean }} — mostly for tests; the reset side
+   *   effects already happened by the time this returns.
+   */
+  setActivePersona(id) {
+    const persona = this.#personas.find((p) => p.id === id);
+    if (!persona) return { genuineSwap: false };
+
+    const store = this.#storeFor(persona);
+    const genuineSwap = store !== this.#activeStore;
+
+    this.#activePersona = persona;
+    this.#activeStore = store;
+    this['active-id'] = id;
+    if (this.#roster) this.#roster['active-id'] = id;
+    if (this.#settings) {
+      this.#settings.persona = persona;
+      this.#settings.store = store;
+    }
+
+    if (genuineSwap) {
+      this.#chat?.clear?.();
+      this.#surfaceRegistry.disposeAll();
+      this.#session = createSession();
+      this.dispatchEvent(new CustomEvent('persona-activated', {
+        bubbles: true,
+        detail: { personaId: id, reset: true },
+      }));
+    } else {
+      this.dispatchEvent(new CustomEvent('persona-activated', {
+        bubbles: true,
+        detail: { personaId: id, reset: false },
+      }));
+    }
+    return { genuineSwap };
+  }
+
+  #storeFor(persona) {
+    let store = this.#storesByPersonaId.get(persona.id);
+    if (!store) {
+      store = personaStore(persona);
+      this.#storesByPersonaId.set(persona.id, store);
+    }
+    return store;
+  }
+
+  #syncRosterSummaries() {
+    if (!this.#roster) return;
+    this.#roster.personas = this.#personas.map((p) => ({ id: p.id, label: p.label, category: p.category }));
+  }
+
+  // ── turns ───────────────────────────────────────────────────────
+
+  async send(text) {
+    if (!this.#chat || !this.#activePersona || !text) return;
+    this.#chat.appendMessage({ role: 'user', content: text });
+    this.#chat.appendMessage({ role: 'assistant', content: '' });
+    this.#chat.startStreaming();
+    const statusEl = this.#chat.querySelector('chat-status');
+    const events = this.#runTurn
+      ? this.#runTurn(this.#session, text)
+      : this.#defaultRunTurn(text);
+    await wireAgentEvents(this.#chat, this.#surfaceRegistry, { events, statusEl });
+  }
+
+  /** Fresh-read-at-turn-time (law 7 / M-scope 3): every call re-reads the
+   *  bound store and re-compiles — no cache, no propagation channel. */
+  async *#defaultRunTurn(text) {
+    const live = readLivePersona(this.#activePersona, this.#activeStore);
+    const compiled = compilePersona(live);
+    const { text: systemText } = composeSystem(compiled.prompt);
+    yield { type: 'progress', stage: 'started' };
+    yield {
+      type: 'text',
+      text: `[stub — persona "${live.label}" (${live.id})]\n${systemText}\n\nYou said: ${text}`,
+    };
+    yield { type: 'progress', stage: 'done' };
+    yield { type: 'done' };
+  }
+
+  // ── event delegation ────────────────────────────────────────────
+
+  #onPersonaChange = (e) => {
+    const id = e.detail?.personaId;
+    if (id) this.setActivePersona(id);
+  };
+
+  #onPersonaImport = (e) => {
+    const persona = e.detail?.persona;
+    if (!persona) return;
+    this.#personas = [...this.#personas, persona];
+    this.#syncRosterSummaries();
+    this.setActivePersona(persona.id);
+    this.dispatchEvent(new CustomEvent('persona-imported', { bubbles: true, detail: { persona } }));
+  };
+
+  #onChatSubmit = (e) => {
+    const text = e.detail?.text;
+    if (text) this.send(text);
+  };
+}
+
+if (!customElements.get('agent-admin-ui')) {
+  customElements.define('agent-admin-ui', UIAgentAdmin);
+}
+
+export { UIAgentAdmin };