@memberjunction/ng-conversations 6.2.0-edge.3 → 6.2.0-edge.5

package/dist/lib/components/realtime/interactive-component/interactive-component-types.js

@@ -0,0 +1,57 @@
+/**
+ * @fileoverview Shared vocabulary of the **Interactive Component realtime channel**: names, the
+ * channel's configuration, the artifact source port and the handle a rendered component exposes.
+ *
+ * Everything in this file is framework-free (no Angular, no DOM), so the channel's logic can be
+ * tested without a browser and reused by a host that renders components some other way.
+ *
+ * @module @memberjunction/ng-conversations
+ */
+/** The channel's key: the `target.channel` an agent addresses. */
+export const INTERACTIVE_COMPONENT_CHANNEL_KEY = 'InteractiveComponent';
+/** The `ClientPluginClass` of the channel's `MJ: AI Agent Channels` row (its ClassFactory key). */
+export const INTERACTIVE_COMPONENT_CLIENT_PLUGIN_CLASS = 'RealtimeInteractiveComponentChannel';
+/** The `ServerPluginClass` of the channel's `MJ: AI Agent Channels` row. */
+export const INTERACTIVE_COMPONENT_SERVER_PLUGIN_CLASS = 'InteractiveComponentChannelServer';
+/** The verbs every instance has, whatever its spec says. `open` is the dispatcher's reserved action, not a verb. */
+export const BUILTIN_VERBS = {
+    /** Swap an open instance to another version of its own artifact. */
+    ShowVersion: 'show_version',
+    /** Close an instance. */
+    Close: 'close',
+};
+/**
+ * The verbs derived from a spec's *standard* methods. Their names are reserved: a custom method that
+ * collides with one is exposed as `custom_<name>` instead (see `DeriveComponentContract`).
+ */
+export const STANDARD_VERBS = {
+    Refresh: 'refresh',
+    Print: 'print',
+    Validate: 'validate',
+    IsDirty: 'is_dirty',
+    Reset: 'reset',
+    ScrollTo: 'scroll_to',
+    Focus: 'focus',
+    GetDataState: 'get_data_state',
+};
+/** The highest `maxInstances` an operator may configure. */
+export const MAX_INSTANCES_CEILING = 8;
+/** The configuration used when none is supplied. */
+export const DEFAULT_INTERACTIVE_COMPONENT_CONFIG = Object.freeze({
+    AutoOpenDelegatedComponents: false,
+    SwapToNewerVersions: true,
+    MaxInstances: 4,
+    MaxStateRows: 25,
+    MaxStateChars: 6000,
+});
+/** An artifact load that failed, thrown by an {@link IComponentArtifactSource}. */
+export class ComponentArtifactError extends Error {
+    Code;
+    /** @param Code A stable machine-readable reason. @param message A sentence the model can read. */
+    constructor(Code, message) {
+        super(message);
+        this.Code = Code;
+        this.name = 'ComponentArtifactError';
+    }
+}
+//# sourceMappingURL=interactive-component-types.js.map

package/dist/lib/components/realtime/interactive-component/interactive-component-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive-component-types.js","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/interactive-component/interactive-component-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,kEAAkE;AAClE,MAAM,CAAC,MAAM,iCAAiC,GAAG,sBAAsB,CAAC;AAExE,mGAAmG;AACnG,MAAM,CAAC,MAAM,yCAAyC,GAAG,qCAAqC,CAAC;AAE/F,4EAA4E;AAC5E,MAAM,CAAC,MAAM,yCAAyC,GAAG,mCAAmC,CAAC;AAE7F,oHAAoH;AACpH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,oEAAoE;IACpE,WAAW,EAAE,cAAc;IAC3B,yBAAyB;IACzB,KAAK,EAAE,OAAO;CACR,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC1B,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,gBAAgB;CACxB,CAAC;AA4BX,4DAA4D;AAC5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAEvC,oDAAoD;AACpD,MAAM,CAAC,MAAM,oCAAoC,GAAyC,MAAM,CAAC,MAAM,CAAC;IACpG,2BAA2B,EAAE,KAAK;IAClC,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE,EAAE;IAChB,aAAa,EAAE,IAAI;CACtB,CAAC,CAAC;AAmBH,mFAAmF;AACnF,MAAM,OAAO,sBAAuB,SAAQ,KAAK;IAGzB;IAFpB,kGAAkG;IAClG,YACoB,IAAgC,EAChD,OAAe;QAEf,KAAK,CAAC,OAAO,CAAC,CAAC;QAHC,SAAI,GAAJ,IAAI,CAA4B;QAIhD,IAAI,CAAC,IAAI,GAAG,wBAAwB,CAAC;IACzC,CAAC;CACJ","sourcesContent":["/**\n * @fileoverview Shared vocabulary of the **Interactive Component realtime channel**: names, the\n * channel's configuration, the artifact source port and the handle a rendered component exposes.\n *\n * Everything in this file is framework-free (no Angular, no DOM), so the channel's logic can be\n * tested without a browser and reused by a host that renders components some other way.\n *\n * @module @memberjunction/ng-conversations\n */\n\nimport type { ComponentSpec } from '@memberjunction/interactive-component-types';\n\n/** The channel's key: the `target.channel` an agent addresses. */\nexport const INTERACTIVE_COMPONENT_CHANNEL_KEY = 'InteractiveComponent';\n\n/** The `ClientPluginClass` of the channel's `MJ: AI Agent Channels` row (its ClassFactory key). */\nexport const INTERACTIVE_COMPONENT_CLIENT_PLUGIN_CLASS = 'RealtimeInteractiveComponentChannel';\n\n/** The `ServerPluginClass` of the channel's `MJ: AI Agent Channels` row. */\nexport const INTERACTIVE_COMPONENT_SERVER_PLUGIN_CLASS = 'InteractiveComponentChannelServer';\n\n/** The verbs every instance has, whatever its spec says. `open` is the dispatcher's reserved action, not a verb. */\nexport const BUILTIN_VERBS = {\n    /** Swap an open instance to another version of its own artifact. */\n    ShowVersion: 'show_version',\n    /** Close an instance. */\n    Close: 'close',\n} as const;\n\n/**\n * The verbs derived from a spec's *standard* methods. Their names are reserved: a custom method that\n * collides with one is exposed as `custom_<name>` instead (see `DeriveComponentContract`).\n */\nexport const STANDARD_VERBS = {\n    Refresh: 'refresh',\n    Print: 'print',\n    Validate: 'validate',\n    IsDirty: 'is_dirty',\n    Reset: 'reset',\n    ScrollTo: 'scroll_to',\n    Focus: 'focus',\n    GetDataState: 'get_data_state',\n} as const;\n\n/** Where in the channel's life a version swap came from. */\nexport type ComponentVersionChangeReason = 'agent' | 'newer-version';\n\n/**\n * Per-channel configuration read from `channels.config.InteractiveComponent` in the config cascade.\n * It is operator-authored JSON of unknown shape, so every member is validated by `ParseInteractiveComponentConfig`;\n * these are the resolved, always-valid values.\n */\nexport interface InteractiveComponentConfig {\n    /**\n     * Whether component artifacts produced by a delegated run (the agent asked Skip or Sage to build\n     * something) are opened automatically. Off by default: the channel is opt-in, and so is the behavior of\n     * a tab appearing by itself. The channel cannot tell a component from another kind of artifact until it\n     * has loaded it, so with this on it is mounted for ANY delegated artifact and ignores those that are not components.\n     */\n    AutoOpenDelegatedComponents: boolean;\n    /** Whether a newer version of an artifact that is already open replaces it in place (default `true`); when `false` the agent is only told one exists. */\n    SwapToNewerVersions: boolean;\n    /** How many components may be open at once (1 to {@link MAX_INSTANCES_CEILING}; default 4). */\n    MaxInstances: number;\n    /** The most data rows per table described to the model (default 25). */\n    MaxStateRows: number;\n    /** The most characters of data-state JSON described to the model per component (default 6000). */\n    MaxStateChars: number;\n}\n\n/** The highest `maxInstances` an operator may configure. */\nexport const MAX_INSTANCES_CEILING = 8;\n\n/** The configuration used when none is supplied. */\nexport const DEFAULT_INTERACTIVE_COMPONENT_CONFIG: Readonly<InteractiveComponentConfig> = Object.freeze({\n    AutoOpenDelegatedComponents: false,\n    SwapToNewerVersions: true,\n    MaxInstances: 4,\n    MaxStateRows: 25,\n    MaxStateChars: 6000,\n});\n\n/** A component artifact version, loaded and parsed, ready to render. */\nexport interface ResolvedComponentArtifact {\n    /** The `MJ: Artifacts` id. */\n    ArtifactID: string;\n    /** The `MJ: Artifact Versions` id this was loaded from. */\n    VersionID: string;\n    /** The version number within the artifact. */\n    VersionNumber: number;\n    /** Display name (the version's name, else the artifact's, else the spec's). */\n    Name: string;\n    /** The parsed component specification. */\n    Spec: ComponentSpec;\n}\n\n/** Why an artifact could not be loaded; each maps to a message the model can act on. */\nexport type ComponentArtifactErrorCode = 'invalid_id' | 'not_found' | 'access_denied' | 'not_a_component' | 'unreadable' | 'load_failed';\n\n/** An artifact load that failed, thrown by an {@link IComponentArtifactSource}. */\nexport class ComponentArtifactError extends Error {\n    /** @param Code A stable machine-readable reason. @param message A sentence the model can read. */\n    public constructor(\n        public readonly Code: ComponentArtifactErrorCode,\n        message: string\n    ) {\n        super(message);\n        this.name = 'ComponentArtifactError';\n    }\n}\n\n/**\n * Loads component artifacts. The channel only ever asks this port, so what \"the user's own access\" means\n * (the user's own session, their read permission on the artifact) is the implementation's concern and the\n * channel is testable without a database.\n *\n * Implementations throw {@link ComponentArtifactError} for anything the agent can be told.\n */\nexport interface IComponentArtifactSource {\n    /** Loads one specific version. */\n    LoadVersion(versionId: string): Promise<ResolvedComponentArtifact>;\n    /** Loads an artifact's latest version. */\n    LoadLatest(artifactId: string): Promise<ResolvedComponentArtifact>;\n}\n\n/**\n * What the channel can do to a rendered component. The Angular host component implements it over\n * `mj-react-component`; tests implement it over a fake. Every member must tolerate being called before the\n * component finished initializing (return `undefined`/`false`, never throw).\n */\nexport interface IInteractiveComponentHandle {\n    /** Whether the component has finished initializing and can be driven. */\n    readonly IsReady: boolean;\n    /** Whether the component implements `methodName`. */\n    HasMethod(methodName: string): boolean;\n    /** Calls one of the component's methods with positional arguments; resolves with its (possibly async) result. */\n    InvokeMethod(methodName: string, args: readonly unknown[]): Promise<unknown>;\n    /** The component's current data state (`getCurrentDataState`, or what it fetched), if it has one. */\n    GetCurrentDataState(): object | undefined;\n    /** Re-fetches / re-renders the component. */\n    Refresh(): void;\n    /** Prints the component. */\n    Print(): void;\n    /** `validate()`: a boolean or a validation result. */\n    Validate(): unknown;\n    /** `isDirty()`. */\n    IsDirty(): boolean;\n    /** `reset()`. */\n    Reset(): void;\n    /** `scrollTo(target)`. */\n    ScrollTo(target: string | { top?: number; left?: number }): void;\n    /** `focus(target?)`. */\n    Focus(target?: string): void;\n}\n\n/** Something the user did inside a rendered component, reported by the host to the channel. */\nexport interface ComponentActivity {\n    /**\n     * `'event'` for a component event (the spec's `events`), `'state'` for a state change, `'initialized'` when it\n     * finished loading, `'selected'` when the user switched to this component's tab, `'closed'` when the user closed it.\n     */\n    Kind: 'event' | 'state' | 'initialized' | 'selected' | 'closed';\n    /** The event type or state path. */\n    Name?: string;\n    /** The event payload or new state value (already untyped JSON-ish; the channel bounds it). */\n    Payload?: unknown;\n}\n"]}

package/dist/lib/components/realtime/interactive-component/react-component-handle.d.ts

@@ -0,0 +1,36 @@
+import type { MJReactComponent } from '@memberjunction/ng-react';
+import type { IInteractiveComponentHandle } from './interactive-component-types';
+/**
+ * An {@link IInteractiveComponentHandle} over a rendered `mj-react-component`: the channel's only way to drive the
+ * component, kept as a thin adapter so the channel never touches Angular or React.
+ */
+export declare class ReactComponentHandle implements IInteractiveComponentHandle {
+    private readonly react;
+    readonly IsReady: boolean;
+    /** @param react The rendered component. @param IsReady Whether it has finished initializing (a handle is created once it has). */
+    constructor(react: MJReactComponent, IsReady?: boolean);
+    /** @inheritdoc */
+    HasMethod(methodName: string): boolean;
+    /** @inheritdoc */
+    InvokeMethod(methodName: string, args: readonly unknown[]): Promise<unknown>;
+    /** @inheritdoc */
+    GetCurrentDataState(): object | undefined;
+    /** @inheritdoc */
+    Refresh(): void;
+    /** @inheritdoc */
+    Print(): void;
+    /** @inheritdoc */
+    Validate(): unknown;
+    /** @inheritdoc */
+    IsDirty(): boolean;
+    /** @inheritdoc */
+    Reset(): void;
+    /** @inheritdoc */
+    ScrollTo(target: string | {
+        top?: number;
+        left?: number;
+    }): void;
+    /** @inheritdoc */
+    Focus(target?: string): void;
+}
+//# sourceMappingURL=react-component-handle.d.ts.map

package/dist/lib/components/realtime/interactive-component/react-component-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-component-handle.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/interactive-component/react-component-handle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAEjF;;;GAGG;AACH,qBAAa,oBAAqB,YAAW,2BAA2B;IAGhE,OAAO,CAAC,QAAQ,CAAC,KAAK;aACN,OAAO,EAAE,OAAO;IAHpC,kIAAkI;gBAE7G,KAAK,EAAE,gBAAgB,EACxB,OAAO,GAAE,OAAc;IAG3C,kBAAkB;IACX,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO;IAI7C,kBAAkB;IACX,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,OAAO,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;IAKnF,kBAAkB;IACX,mBAAmB,IAAI,MAAM,GAAG,SAAS;IAIhD,kBAAkB;IACX,OAAO,IAAI,IAAI;IAItB,kBAAkB;IACX,KAAK,IAAI,IAAI;IAIpB,kBAAkB;IACX,QAAQ,IAAI,OAAO;IAI1B,kBAAkB;IACX,OAAO,IAAI,OAAO;IAIzB,kBAAkB;IACX,KAAK,IAAI,IAAI;IAIpB,kBAAkB;IACX,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAIvE,kBAAkB;IACX,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;CAGtC"}

package/dist/lib/components/realtime/interactive-component/react-component-handle.js

@@ -0,0 +1,55 @@
+/**
+ * An {@link IInteractiveComponentHandle} over a rendered `mj-react-component`: the channel's only way to drive the
+ * component, kept as a thin adapter so the channel never touches Angular or React.
+ */
+export class ReactComponentHandle {
+    react;
+    IsReady;
+    /** @param react The rendered component. @param IsReady Whether it has finished initializing (a handle is created once it has). */
+    constructor(react, IsReady = true) {
+        this.react = react;
+        this.IsReady = IsReady;
+    }
+    /** @inheritdoc */
+    HasMethod(methodName) {
+        return this.react.HasMethod(methodName);
+    }
+    /** @inheritdoc */
+    InvokeMethod(methodName, args) {
+        // A custom method may be sync or async; the channel awaits either.
+        return Promise.resolve(this.react.InvokeMethod(methodName, ...args));
+    }
+    /** @inheritdoc */
+    GetCurrentDataState() {
+        return this.react.GetCurrentDataState();
+    }
+    /** @inheritdoc */
+    Refresh() {
+        this.react.Refresh();
+    }
+    /** @inheritdoc */
+    Print() {
+        this.react.Print();
+    }
+    /** @inheritdoc */
+    Validate() {
+        return this.react.validate();
+    }
+    /** @inheritdoc */
+    IsDirty() {
+        return this.react.IsDirty();
+    }
+    /** @inheritdoc */
+    Reset() {
+        this.react.Reset();
+    }
+    /** @inheritdoc */
+    ScrollTo(target) {
+        this.react.ScrollTo(target);
+    }
+    /** @inheritdoc */
+    Focus(target) {
+        this.react.Focus(target);
+    }
+}
+//# sourceMappingURL=react-component-handle.js.map

package/dist/lib/components/realtime/interactive-component/react-component-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-component-handle.js","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/interactive-component/react-component-handle.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,OAAO,oBAAoB;IAGR;IACD;IAHpB,kIAAkI;IAClI,YACqB,KAAuB,EACxB,UAAmB,IAAI;QADtB,UAAK,GAAL,KAAK,CAAkB;QACxB,YAAO,GAAP,OAAO,CAAgB;IACxC,CAAC;IAEJ,kBAAkB;IACX,SAAS,CAAC,UAAkB;QAC/B,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC5C,CAAC;IAED,kBAAkB;IACX,YAAY,CAAC,UAAkB,EAAE,IAAwB;QAC5D,mEAAmE;QACnE,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;IACzE,CAAC;IAED,kBAAkB;IACX,mBAAmB;QACtB,OAAO,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC;IAC5C,CAAC;IAED,kBAAkB;IACX,OAAO;QACV,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IACzB,CAAC;IAED,kBAAkB;IACX,KAAK;QACR,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IAED,kBAAkB;IACX,QAAQ;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC;IAED,kBAAkB;IACX,OAAO;QACV,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAChC,CAAC;IAED,kBAAkB;IACX,KAAK;QACR,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IAED,kBAAkB;IACX,QAAQ,CAAC,MAAgD;QAC5D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAED,kBAAkB;IACX,KAAK,CAAC,MAAe;QACxB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;CACJ","sourcesContent":["import type { MJReactComponent } from '@memberjunction/ng-react';\nimport type { IInteractiveComponentHandle } from './interactive-component-types';\n\n/**\n * An {@link IInteractiveComponentHandle} over a rendered `mj-react-component`: the channel's only way to drive the\n * component, kept as a thin adapter so the channel never touches Angular or React.\n */\nexport class ReactComponentHandle implements IInteractiveComponentHandle {\n    /** @param react The rendered component. @param IsReady Whether it has finished initializing (a handle is created once it has). */\n    public constructor(\n        private readonly react: MJReactComponent,\n        public readonly IsReady: boolean = true\n    ) {}\n\n    /** @inheritdoc */\n    public HasMethod(methodName: string): boolean {\n        return this.react.HasMethod(methodName);\n    }\n\n    /** @inheritdoc */\n    public InvokeMethod(methodName: string, args: readonly unknown[]): Promise<unknown> {\n        // A custom method may be sync or async; the channel awaits either.\n        return Promise.resolve(this.react.InvokeMethod(methodName, ...args));\n    }\n\n    /** @inheritdoc */\n    public GetCurrentDataState(): object | undefined {\n        return this.react.GetCurrentDataState();\n    }\n\n    /** @inheritdoc */\n    public Refresh(): void {\n        this.react.Refresh();\n    }\n\n    /** @inheritdoc */\n    public Print(): void {\n        this.react.Print();\n    }\n\n    /** @inheritdoc */\n    public Validate(): unknown {\n        return this.react.validate();\n    }\n\n    /** @inheritdoc */\n    public IsDirty(): boolean {\n        return this.react.IsDirty();\n    }\n\n    /** @inheritdoc */\n    public Reset(): void {\n        this.react.Reset();\n    }\n\n    /** @inheritdoc */\n    public ScrollTo(target: string | { top?: number; left?: number }): void {\n        this.react.ScrollTo(target);\n    }\n\n    /** @inheritdoc */\n    public Focus(target?: string): void {\n        this.react.Focus(target);\n    }\n}\n"]}

package/dist/lib/components/realtime/interactive-component/realtime-interactive-component-surface.component.d.ts

@@ -0,0 +1,55 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { ComponentInstanceEngine, type ComponentInstanceRecord } from './component-instance-engine';
+import type { ComponentActivity, IInteractiveComponentHandle } from './interactive-component-types';
+import * as i0 from "@angular/core";
+/**
+ * The LIVE surface of the Interactive Component channel (`mj-realtime-interactive-component-surface`): one tab per
+ * open component and the active component's pane under it. Every open component stays mounted (hidden when not
+ * active) so switching tabs never loses what the user was doing in one.
+ *
+ * Purely a view of the channel's {@link ComponentInstanceEngine}: the agent's actions mutate the engine through the
+ * channel, and this re-renders. What the user does (selecting a tab, closing one, anything inside a component) is
+ * reported back through {@link ActivityHandler}.
+ */
+export declare class RealtimeInteractiveComponentSurfaceComponent extends BaseAngularComponent implements OnInit, OnDestroy {
+    private _engine;
+    /** The channel's instance engine (set by the channel's `BindSurface` before first change detection). */
+    set Engine(value: ComponentInstanceEngine | null);
+    get Engine(): ComponentInstanceEngine | null;
+    /** Display name of the agent fronting the session, for the empty-state copy. */
+    AgentName: string;
+    /** Reports what the user does (tab selection, closing a tab, activity inside a component) to the channel. */
+    ActivityHandler: ((instanceId: string, activity: ComponentActivity) => void) | null;
+    /** The open components, in open order. */
+    Instances: readonly ComponentInstanceRecord[];
+    /** The id of the component the user is looking at. */
+    ActiveID: string | null;
+    /** The component the user is looking at, or `null`. */
+    get ActiveRecord(): ComponentInstanceRecord | null;
+    private readonly cdr;
+    private readonly elementRef;
+    private subscription;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** The active component's pane element, for frame capture; `null` when nothing is open. */
+    GetActiveElement(): HTMLElement | null;
+    /** Tab click. */
+    SelectTab(instanceId: string): void;
+    /** The close button: closes the component the user is looking at. */
+    CloseTab(event: Event, instanceId: string): void;
+    /** Keyboard navigation along the tab list (left/right/home/end), as the tabs pattern expects. */
+    OnTabKeydown(event: KeyboardEvent, index: number): void;
+    /** A component's live handle appeared (or went away while a new version loads). */
+    OnHandleChange(instanceId: string, handle: IInteractiveComponentHandle | null): void;
+    /** Something happened inside a component. */
+    OnActivity(instanceId: string, activity: ComponentActivity): void;
+    /** `track` function: instances are identified by id across version swaps. */
+    TrackByInstance(_index: number, record: ComponentInstanceRecord): string;
+    /** (Re)subscribes to the engine and pulls its current state. */
+    private resubscribe;
+    private refresh;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RealtimeInteractiveComponentSurfaceComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RealtimeInteractiveComponentSurfaceComponent, "mj-realtime-interactive-component-surface", never, { "Engine": { "alias": "Engine"; "required": false; }; "AgentName": { "alias": "AgentName"; "required": false; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=realtime-interactive-component-surface.component.d.ts.map

package/dist/lib/components/realtime/interactive-component/realtime-interactive-component-surface.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-interactive-component-surface.component.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/interactive-component/realtime-interactive-component-surface.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4E,SAAS,EAAE,MAAM,EAAU,MAAM,eAAe,CAAC;AAEpI,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAErE,OAAO,EAAE,uBAAuB,EAAE,KAAK,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACpG,OAAO,KAAK,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;;AAEpG;;;;;;;;GAQG;AACH,qBAQa,4CAA6C,SAAQ,oBAAqB,YAAW,MAAM,EAAE,SAAS;IACjH,OAAO,CAAC,OAAO,CAAwC;IAEvD,wGAAwG;IACxG,IACW,MAAM,CAAC,KAAK,EAAE,uBAAuB,GAAG,IAAI,EAMtD;IACD,IAAW,MAAM,IAAI,uBAAuB,GAAG,IAAI,CAElD;IAED,gFAAgF;IAChE,SAAS,SAAe;IAExC,6GAA6G;IACtG,eAAe,EAAE,CAAC,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,KAAK,IAAI,CAAC,GAAG,IAAI,CAAQ;IAElG,0CAA0C;IACnC,SAAS,EAAE,SAAS,uBAAuB,EAAE,CAAM;IAE1D,sDAAsD;IAC/C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEtC,uDAAuD;IACvD,IAAW,YAAY,IAAI,uBAAuB,GAAG,IAAI,CAExD;IAED,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA6B;IACjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA+C;IAC1E,OAAO,CAAC,YAAY,CAA6B;IAEjD,QAAQ,IAAI,IAAI;IAIhB,WAAW,IAAI,IAAI;IAKnB,2FAA2F;IACpF,gBAAgB,IAAI,WAAW,GAAG,IAAI;IAO7C,iBAAiB;IACV,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAQ1C,qEAAqE;IAC9D,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI;IASvD,iGAAiG;IAC1F,YAAY,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAW9D,mFAAmF;IAC5E,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,2BAA2B,GAAG,IAAI,GAAG,IAAI;IAI3F,6CAA6C;IACtC,UAAU,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,iBAAiB,GAAG,IAAI;IAIxE,6EAA6E;IACtE,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,uBAAuB,GAAG,MAAM;IAI/E,gEAAgE;IAChE,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,OAAO;yCA9GJ,4CAA4C;2CAA5C,4CAA4C;CAmHxD"}

package/dist/lib/components/realtime/interactive-component/realtime-interactive-component-surface.component.js

@@ -0,0 +1,210 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, inject } from '@angular/core';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { InteractiveComponentHostComponent } from './interactive-component-host.component';
+import * as i0 from "@angular/core";
+function RealtimeInteractiveComponentSurfaceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "i", 2);
+    i0.ɵɵelementStart(2, "p", 3);
+    i0.ɵɵtext(3, "No component open");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 4);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("", ctx_r0.AgentName, " can open an interactive component here during the conversation.");
+} }
+function RealtimeInteractiveComponentSurfaceComponent_Conditional_2_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 11);
+    i0.ɵɵlistener("click", function RealtimeInteractiveComponentSurfaceComponent_Conditional_2_For_3_Template_button_click_0_listener() { const record_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.SelectTab(record_r3.InstanceID)); })("keydown", function RealtimeInteractiveComponentSurfaceComponent_Conditional_2_For_3_Template_button_keydown_0_listener($event) { const ɵ$index_19_r4 = i0.ɵɵrestoreView(_r2).$index; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnTabKeydown($event, ɵ$index_19_r4)); });
+    i0.ɵɵelement(1, "i", 12);
+    i0.ɵɵelementStart(2, "span", 13);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 14);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const record_r3 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("ic-tab--active", record_r3.InstanceID === ctx_r0.ActiveID);
+    i0.ɵɵproperty("title", record_r3.Artifact.Name);
+    i0.ɵɵattribute("aria-selected", record_r3.InstanceID === ctx_r0.ActiveID)("tabindex", record_r3.InstanceID === ctx_r0.ActiveID ? 0 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(record_r3.Artifact.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("v", record_r3.Artifact.VersionNumber);
+} }
+function RealtimeInteractiveComponentSurfaceComponent_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function RealtimeInteractiveComponentSurfaceComponent_Conditional_2_Conditional_4_Template_button_click_0_listener($event) { const active_r6 = i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.CloseTab($event, active_r6.InstanceID)); });
+    i0.ɵɵelement(1, "i", 16);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const active_r6 = ctx;
+    i0.ɵɵproperty("title", "Close " + active_r6.Artifact.Name);
+    i0.ɵɵattribute("aria-label", "Close " + active_r6.Artifact.Name);
+} }
+function RealtimeInteractiveComponentSurfaceComponent_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "mj-interactive-component-host", 17);
+    i0.ɵɵlistener("Activity", function RealtimeInteractiveComponentSurfaceComponent_Conditional_2_For_7_Template_mj_interactive_component_host_Activity_1_listener($event) { const record_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnActivity(record_r8.InstanceID, $event)); })("HandleChange", function RealtimeInteractiveComponentSurfaceComponent_Conditional_2_For_7_Template_mj_interactive_component_host_HandleChange_1_listener($event) { const record_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnHandleChange(record_r8.InstanceID, $event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const record_r8 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("hidden", record_r8.InstanceID !== ctx_r0.ActiveID);
+    i0.ɵɵattribute("data-instance", record_r8.InstanceID)("aria-label", record_r8.Artifact.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Spec", record_r8.Artifact.Spec)("Inputs", record_r8.Inputs)("Provider", ctx_r0.Provider);
+} }
+function RealtimeInteractiveComponentSurfaceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
+    i0.ɵɵrepeaterCreate(2, RealtimeInteractiveComponentSurfaceComponent_Conditional_2_For_3_Template, 6, 7, "button", 7, i0.ɵɵcomponentInstance().TrackByInstance, true);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RealtimeInteractiveComponentSurfaceComponent_Conditional_2_Conditional_4_Template, 2, 2, "button", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 9);
+    i0.ɵɵrepeaterCreate(6, RealtimeInteractiveComponentSurfaceComponent_Conditional_2_For_7_Template, 2, 6, "div", 10, i0.ɵɵcomponentInstance().TrackByInstance, true);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_2_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.Instances);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_2_0 = ctx_r0.ActiveRecord) ? 4 : -1, tmp_2_0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.Instances);
+} }
+/**
+ * The LIVE surface of the Interactive Component channel (`mj-realtime-interactive-component-surface`): one tab per
+ * open component and the active component's pane under it. Every open component stays mounted (hidden when not
+ * active) so switching tabs never loses what the user was doing in one.
+ *
+ * Purely a view of the channel's {@link ComponentInstanceEngine}: the agent's actions mutate the engine through the
+ * channel, and this re-renders. What the user does (selecting a tab, closing one, anything inside a component) is
+ * reported back through {@link ActivityHandler}.
+ */
+export class RealtimeInteractiveComponentSurfaceComponent extends BaseAngularComponent {
+    _engine = null;
+    /** The channel's instance engine (set by the channel's `BindSurface` before first change detection). */
+    set Engine(value) {
+        if (value === this._engine) {
+            return;
+        }
+        this._engine = value;
+        this.resubscribe();
+    }
+    get Engine() {
+        return this._engine;
+    }
+    /** Display name of the agent fronting the session, for the empty-state copy. */
+    AgentName = 'The agent';
+    /** Reports what the user does (tab selection, closing a tab, activity inside a component) to the channel. */
+    ActivityHandler = null;
+    /** The open components, in open order. */
+    Instances = [];
+    /** The id of the component the user is looking at. */
+    ActiveID = null;
+    /** The component the user is looking at, or `null`. */
+    get ActiveRecord() {
+        return this.Instances.find((r) => r.InstanceID === this.ActiveID) ?? null;
+    }
+    cdr = inject(ChangeDetectorRef);
+    elementRef = inject(ElementRef);
+    subscription = null;
+    ngOnInit() {
+        this.resubscribe();
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+        this.subscription = null;
+    }
+    /** The active component's pane element, for frame capture; `null` when nothing is open. */
+    GetActiveElement() {
+        if (this.ActiveID === null) {
+            return null;
+        }
+        return this.elementRef.nativeElement.querySelector(`[data-instance="${this.ActiveID}"]`);
+    }
+    /** Tab click. */
+    SelectTab(instanceId) {
+        if (this.ActivityHandler) {
+            this.ActivityHandler(instanceId, { Kind: 'selected' });
+        }
+        else {
+            this._engine?.SetActive(instanceId);
+        }
+    }
+    /** The close button: closes the component the user is looking at. */
+    CloseTab(event, instanceId) {
+        event.stopPropagation();
+        if (this.ActivityHandler) {
+            this.ActivityHandler(instanceId, { Kind: 'closed' });
+        }
+        else {
+            this._engine?.Remove(instanceId);
+        }
+    }
+    /** Keyboard navigation along the tab list (left/right/home/end), as the tabs pattern expects. */
+    OnTabKeydown(event, index) {
+        const last = this.Instances.length - 1;
+        const targets = { ArrowRight: Math.min(index + 1, last), ArrowLeft: Math.max(index - 1, 0), Home: 0, End: last };
+        const next = targets[event.key];
+        if (next === undefined) {
+            return;
+        }
+        event.preventDefault();
+        this.SelectTab(this.Instances[next].InstanceID);
+    }
+    /** A component's live handle appeared (or went away while a new version loads). */
+    OnHandleChange(instanceId, handle) {
+        this._engine?.AttachHandle(instanceId, handle);
+    }
+    /** Something happened inside a component. */
+    OnActivity(instanceId, activity) {
+        this.ActivityHandler?.(instanceId, activity);
+    }
+    /** `track` function: instances are identified by id across version swaps. */
+    TrackByInstance(_index, record) {
+        return record.InstanceID;
+    }
+    /** (Re)subscribes to the engine and pulls its current state. */
+    resubscribe() {
+        this.subscription?.unsubscribe();
+        this.subscription = null;
+        this.refresh();
+        if (this._engine) {
+            this.subscription = this._engine.Changed$.subscribe(() => this.refresh());
+        }
+    }
+    refresh() {
+        this.Instances = this._engine ? this._engine.Instances : [];
+        this.ActiveID = this._engine ? this._engine.ActiveID : null;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵRealtimeInteractiveComponentSurfaceComponent_BaseFactory; return function RealtimeInteractiveComponentSurfaceComponent_Factory(__ngFactoryType__) { return (ɵRealtimeInteractiveComponentSurfaceComponent_BaseFactory || (ɵRealtimeInteractiveComponentSurfaceComponent_BaseFactory = i0.ɵɵgetInheritedFactory(RealtimeInteractiveComponentSurfaceComponent)))(__ngFactoryType__ || RealtimeInteractiveComponentSurfaceComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeInteractiveComponentSurfaceComponent, selectors: [["mj-realtime-interactive-component-surface"]], inputs: { Engine: "Engine", AgentName: "AgentName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "ic-surface"], [1, "ic-empty"], ["aria-hidden", "true", 1, "fa-solid", "fa-cubes", "ic-empty__icon"], [1, "ic-empty__title"], [1, "ic-empty__hint"], [1, "ic-tabbar"], ["role", "tablist", "aria-label", "Open components", 1, "ic-tabs"], ["type", "button", "role", "tab", 1, "ic-tab", 3, "ic-tab--active", "title"], ["type", "button", 1, "ic-close", 3, "title"], [1, "ic-panes"], ["role", "tabpanel", 1, "ic-pane", 3, "hidden"], ["type", "button", "role", "tab", 1, "ic-tab", 3, "click", "keydown", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-cube", "ic-tab__icon"], [1, "ic-tab__name"], [1, "ic-tab__version"], ["type", "button", 1, "ic-close", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], [3, "Activity", "HandleChange", "Spec", "Inputs", "Provider"]], template: function RealtimeInteractiveComponentSurfaceComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, RealtimeInteractiveComponentSurfaceComponent_Conditional_1_Template, 6, 1, "div", 1)(2, RealtimeInteractiveComponentSurfaceComponent_Conditional_2_Template, 8, 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.Instances.length === 0 ? 1 : 2);
+        } }, dependencies: [InteractiveComponentHostComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.ic-surface[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.ic-tabbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: stretch;\n  flex: 0 0 auto;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.ic-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1 1 auto;\n  gap: 2px;\n  min-width: 0;\n  overflow-x: auto;\n  padding: 0 8px;\n}\n\n.ic-tab[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 240px;\n  padding: 8px 10px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font: inherit;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.ic-tab[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ic-tab[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -2px;\n}\n\n.ic-tab--active[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.ic-tab__name[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ic-tab__version[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.ic-close[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 36px;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n\n.ic-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.ic-close[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -2px;\n}\n\n.ic-panes[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n  position: relative;\n}\n\n.ic-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\n}\n\n.ic-pane[hidden][_ngcontent-%COMP%] {\n  display: none;\n}\n\n.ic-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 24px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n\n.ic-empty__icon[_ngcontent-%COMP%] {\n  font-size: 28px;\n}\n\n.ic-empty__title[_ngcontent-%COMP%] {\n  margin: 8px 0 0;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.ic-empty__hint[_ngcontent-%COMP%] {\n  margin: 0;\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeInteractiveComponentSurfaceComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-interactive-component-surface', imports: [InteractiveComponentHostComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ic-surface\">\n  @if (Instances.length === 0) {\n    <div class=\"ic-empty\">\n      <i class=\"fa-solid fa-cubes ic-empty__icon\" aria-hidden=\"true\"></i>\n      <p class=\"ic-empty__title\">No component open</p>\n      <p class=\"ic-empty__hint\">{{ AgentName }} can open an interactive component here during the conversation.</p>\n    </div>\n  } @else {\n    <div class=\"ic-tabbar\">\n      <div class=\"ic-tabs\" role=\"tablist\" aria-label=\"Open components\">\n        @for (record of Instances; track TrackByInstance($index, record); let i = $index) {\n          <button\n            type=\"button\"\n            class=\"ic-tab\"\n            role=\"tab\"\n            [class.ic-tab--active]=\"record.InstanceID === ActiveID\"\n            [attr.aria-selected]=\"record.InstanceID === ActiveID\"\n            [attr.tabindex]=\"record.InstanceID === ActiveID ? 0 : -1\"\n            [title]=\"record.Artifact.Name\"\n            (click)=\"SelectTab(record.InstanceID)\"\n            (keydown)=\"OnTabKeydown($event, i)\"\n          >\n            <i class=\"fa-solid fa-cube ic-tab__icon\" aria-hidden=\"true\"></i>\n            <span class=\"ic-tab__name\">{{ record.Artifact.Name }}</span>\n            <span class=\"ic-tab__version\">v{{ record.Artifact.VersionNumber }}</span>\n          </button>\n        }\n      </div>\n      @if (ActiveRecord; as active) {\n        <button\n          type=\"button\"\n          class=\"ic-close\"\n          [attr.aria-label]=\"'Close ' + active.Artifact.Name\"\n          [title]=\"'Close ' + active.Artifact.Name\"\n          (click)=\"CloseTab($event, active.InstanceID)\"\n        >\n          <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"ic-panes\">\n      @for (record of Instances; track TrackByInstance($index, record)) {\n        <div\n          class=\"ic-pane\"\n          role=\"tabpanel\"\n          [hidden]=\"record.InstanceID !== ActiveID\"\n          [attr.data-instance]=\"record.InstanceID\"\n          [attr.aria-label]=\"record.Artifact.Name\"\n        >\n          <mj-interactive-component-host\n            [Spec]=\"record.Artifact.Spec\"\n            [Inputs]=\"record.Inputs\"\n            [Provider]=\"Provider\"\n            (Activity)=\"OnActivity(record.InstanceID, $event)\"\n            (HandleChange)=\"OnHandleChange(record.InstanceID, $event)\"\n          ></mj-interactive-component-host>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.ic-surface {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.ic-tabbar {\n  display: flex;\n  align-items: stretch;\n  flex: 0 0 auto;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.ic-tabs {\n  display: flex;\n  flex: 1 1 auto;\n  gap: 2px;\n  min-width: 0;\n  overflow-x: auto;\n  padding: 0 8px;\n}\n\n.ic-tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 240px;\n  padding: 8px 10px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font: inherit;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.ic-tab:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.ic-tab:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -2px;\n}\n\n.ic-tab--active {\n  color: var(--mj-text-primary);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.ic-tab__name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ic-tab__version {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.ic-close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 36px;\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n\n.ic-close:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.ic-close:focus-visible {\n  outline: 2px solid var(--mj-border-focus);\n  outline-offset: -2px;\n}\n\n.ic-panes {\n  flex: 1 1 auto;\n  min-height: 0;\n  position: relative;\n}\n\n.ic-pane {\n  height: 100%;\n  min-height: 0;\n}\n\n.ic-pane[hidden] {\n  display: none;\n}\n\n.ic-empty {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 24px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n\n.ic-empty__icon {\n  font-size: 28px;\n}\n\n.ic-empty__title {\n  margin: 8px 0 0;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.ic-empty__hint {\n  margin: 0;\n}\n"] }]
+    }], null, { Engine: [{
+            type: Input
+        }], AgentName: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeInteractiveComponentSurfaceComponent, { className: "RealtimeInteractiveComponentSurfaceComponent", filePath: "src/lib/components/realtime/interactive-component/realtime-interactive-component-surface.component.ts", lineNumber: 25 }); })();
+//# sourceMappingURL=realtime-interactive-component-surface.component.js.map

package/dist/lib/components/realtime/interactive-component/realtime-interactive-component-surface.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-interactive-component-surface.component.js","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/interactive-component/realtime-interactive-component-surface.component.ts","../../../../../src/lib/components/realtime/interactive-component/realtime-interactive-component-surface.component.html"],"names":[],"mappings":"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","sourcesContent":["import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, inject } from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { BaseAngularComponent } from '@memberjunction/ng-base-types';\nimport { InteractiveComponentHostComponent } from './interactive-component-host.component';\nimport { ComponentInstanceEngine, type ComponentInstanceRecord } from './component-instance-engine';\nimport type { ComponentActivity, IInteractiveComponentHandle } from './interactive-component-types';\n\n/**\n * The LIVE surface of the Interactive Component channel (`mj-realtime-interactive-component-surface`): one tab per\n * open component and the active component's pane under it. Every open component stays mounted (hidden when not\n * active) so switching tabs never loses what the user was doing in one.\n *\n * Purely a view of the channel's {@link ComponentInstanceEngine}: the agent's actions mutate the engine through the\n * channel, and this re-renders. What the user does (selecting a tab, closing one, anything inside a component) is\n * reported back through {@link ActivityHandler}.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-interactive-component-surface',\n  imports: [InteractiveComponentHostComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './realtime-interactive-component-surface.component.html',\n  styleUrls: ['./realtime-interactive-component-surface.component.css'],\n})\nexport class RealtimeInteractiveComponentSurfaceComponent extends BaseAngularComponent implements OnInit, OnDestroy {\n  private _engine: ComponentInstanceEngine | null = null;\n\n  /** The channel's instance engine (set by the channel's `BindSurface` before first change detection). */\n  @Input()\n  public set Engine(value: ComponentInstanceEngine | null) {\n    if (value === this._engine) {\n      return;\n    }\n    this._engine = value;\n    this.resubscribe();\n  }\n  public get Engine(): ComponentInstanceEngine | null {\n    return this._engine;\n  }\n\n  /** Display name of the agent fronting the session, for the empty-state copy. */\n  @Input() public AgentName = 'The agent';\n\n  /** Reports what the user does (tab selection, closing a tab, activity inside a component) to the channel. */\n  public ActivityHandler: ((instanceId: string, activity: ComponentActivity) => void) | null = null;\n\n  /** The open components, in open order. */\n  public Instances: readonly ComponentInstanceRecord[] = [];\n\n  /** The id of the component the user is looking at. */\n  public ActiveID: string | null = null;\n\n  /** The component the user is looking at, or `null`. */\n  public get ActiveRecord(): ComponentInstanceRecord | null {\n    return this.Instances.find((r) => r.InstanceID === this.ActiveID) ?? null;\n  }\n\n  private readonly cdr = inject(ChangeDetectorRef);\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private subscription: Subscription | null = null;\n\n  ngOnInit(): void {\n    this.resubscribe();\n  }\n\n  ngOnDestroy(): void {\n    this.subscription?.unsubscribe();\n    this.subscription = null;\n  }\n\n  /** The active component's pane element, for frame capture; `null` when nothing is open. */\n  public GetActiveElement(): HTMLElement | null {\n    if (this.ActiveID === null) {\n      return null;\n    }\n    return this.elementRef.nativeElement.querySelector<HTMLElement>(`[data-instance=\"${this.ActiveID}\"]`);\n  }\n\n  /** Tab click. */\n  public SelectTab(instanceId: string): void {\n    if (this.ActivityHandler) {\n      this.ActivityHandler(instanceId, { Kind: 'selected' });\n    } else {\n      this._engine?.SetActive(instanceId);\n    }\n  }\n\n  /** The close button: closes the component the user is looking at. */\n  public CloseTab(event: Event, instanceId: string): void {\n    event.stopPropagation();\n    if (this.ActivityHandler) {\n      this.ActivityHandler(instanceId, { Kind: 'closed' });\n    } else {\n      this._engine?.Remove(instanceId);\n    }\n  }\n\n  /** Keyboard navigation along the tab list (left/right/home/end), as the tabs pattern expects. */\n  public OnTabKeydown(event: KeyboardEvent, index: number): void {\n    const last = this.Instances.length - 1;\n    const targets: Record<string, number> = { ArrowRight: Math.min(index + 1, last), ArrowLeft: Math.max(index - 1, 0), Home: 0, End: last };\n    const next = targets[event.key];\n    if (next === undefined) {\n      return;\n    }\n    event.preventDefault();\n    this.SelectTab(this.Instances[next].InstanceID);\n  }\n\n  /** A component's live handle appeared (or went away while a new version loads). */\n  public OnHandleChange(instanceId: string, handle: IInteractiveComponentHandle | null): void {\n    this._engine?.AttachHandle(instanceId, handle);\n  }\n\n  /** Something happened inside a component. */\n  public OnActivity(instanceId: string, activity: ComponentActivity): void {\n    this.ActivityHandler?.(instanceId, activity);\n  }\n\n  /** `track` function: instances are identified by id across version swaps. */\n  public TrackByInstance(_index: number, record: ComponentInstanceRecord): string {\n    return record.InstanceID;\n  }\n\n  /** (Re)subscribes to the engine and pulls its current state. */\n  private resubscribe(): void {\n    this.subscription?.unsubscribe();\n    this.subscription = null;\n    this.refresh();\n    if (this._engine) {\n      this.subscription = this._engine.Changed$.subscribe(() => this.refresh());\n    }\n  }\n\n  private refresh(): void {\n    this.Instances = this._engine ? this._engine.Instances : [];\n    this.ActiveID = this._engine ? this._engine.ActiveID : null;\n    this.cdr.markForCheck();\n  }\n}\n","<div class=\"ic-surface\">\n  @if (Instances.length === 0) {\n    <div class=\"ic-empty\">\n      <i class=\"fa-solid fa-cubes ic-empty__icon\" aria-hidden=\"true\"></i>\n      <p class=\"ic-empty__title\">No component open</p>\n      <p class=\"ic-empty__hint\">{{ AgentName }} can open an interactive component here during the conversation.</p>\n    </div>\n  } @else {\n    <div class=\"ic-tabbar\">\n      <div class=\"ic-tabs\" role=\"tablist\" aria-label=\"Open components\">\n        @for (record of Instances; track TrackByInstance($index, record); let i = $index) {\n          <button\n            type=\"button\"\n            class=\"ic-tab\"\n            role=\"tab\"\n            [class.ic-tab--active]=\"record.InstanceID === ActiveID\"\n            [attr.aria-selected]=\"record.InstanceID === ActiveID\"\n            [attr.tabindex]=\"record.InstanceID === ActiveID ? 0 : -1\"\n            [title]=\"record.Artifact.Name\"\n            (click)=\"SelectTab(record.InstanceID)\"\n            (keydown)=\"OnTabKeydown($event, i)\"\n          >\n            <i class=\"fa-solid fa-cube ic-tab__icon\" aria-hidden=\"true\"></i>\n            <span class=\"ic-tab__name\">{{ record.Artifact.Name }}</span>\n            <span class=\"ic-tab__version\">v{{ record.Artifact.VersionNumber }}</span>\n          </button>\n        }\n      </div>\n      @if (ActiveRecord; as active) {\n        <button\n          type=\"button\"\n          class=\"ic-close\"\n          [attr.aria-label]=\"'Close ' + active.Artifact.Name\"\n          [title]=\"'Close ' + active.Artifact.Name\"\n          (click)=\"CloseTab($event, active.InstanceID)\"\n        >\n          <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"ic-panes\">\n      @for (record of Instances; track TrackByInstance($index, record)) {\n        <div\n          class=\"ic-pane\"\n          role=\"tabpanel\"\n          [hidden]=\"record.InstanceID !== ActiveID\"\n          [attr.data-instance]=\"record.InstanceID\"\n          [attr.aria-label]=\"record.Artifact.Name\"\n        >\n          <mj-interactive-component-host\n            [Spec]=\"record.Artifact.Spec\"\n            [Inputs]=\"record.Inputs\"\n            [Provider]=\"Provider\"\n            (Activity)=\"OnActivity(record.InstanceID, $event)\"\n            (HandleChange)=\"OnHandleChange(record.InstanceID, $event)\"\n          ></mj-interactive-component-host>\n        </div>\n      }\n    </div>\n  }\n</div>\n"]}

package/dist/lib/components/realtime/interactive-component/run-view-component-artifact-source.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @fileoverview The database-backed {@link IComponentArtifactSource}: loads component artifacts through the
+ * SESSION'S OWN provider and the signed-in user's own read access.
+ *
+ * Nothing here widens access. The channel runs in the user's browser, the provider is the one that
+ * authenticates their session, and an artifact is loaded only if the user may read it by the same rules the
+ * rest of the conversation UI applies (owner, an explicit grant, or a collection they can read).
+ *
+ * @module @memberjunction/ng-conversations
+ */
+import { IMetadataProvider, UserInfo } from '@memberjunction/core';
+import { type IComponentArtifactSource, type ResolvedComponentArtifact } from './interactive-component-types';
+/** Loads component artifacts with the user's own access. */
+export declare class RunViewComponentArtifactSource implements IComponentArtifactSource {
+    private readonly provider;
+    private readonly user;
+    private readonly permissions;
+    /**
+     * @param provider The session's metadata provider (the one that authenticates the user).
+     * @param user The signed-in user.
+     */
+    constructor(provider: IMetadataProvider, user: UserInfo);
+    /** @inheritdoc */
+    LoadVersion(versionId: string): Promise<ResolvedComponentArtifact>;
+    /** @inheritdoc */
+    LoadLatest(artifactId: string): Promise<ResolvedComponentArtifact>;
+    /** Loads one row by filter, mapping an empty result to `not_found` and a failed query to `load_failed`. */
+    private queryOne;
+    /** Checks access and type, then parses the content. */
+    private resolve;
+}
+//# sourceMappingURL=run-view-component-artifact-source.d.ts.map

package/dist/lib/components/realtime/interactive-component/run-view-component-artifact-source.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"run-view-component-artifact-source.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/realtime/interactive-component/run-view-component-artifact-source.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,iBAAiB,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMtF,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,yBAAyB,EACjC,MAAM,+BAA+B,CAAC;AAiBvC,4DAA4D;AAC5D,qBAAa,8BAA+B,YAAW,wBAAwB;IAQvE,OAAO,CAAC,QAAQ,CAAC,QAAQ;IACzB,OAAO,CAAC,QAAQ,CAAC,IAAI;IARzB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4B;IAExD;;;OAGG;gBAEkB,QAAQ,EAAE,iBAAiB,EAC3B,IAAI,EAAE,QAAQ;IAMnC,kBAAkB;IACL,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,yBAAyB,CAAC;IAM/E,kBAAkB;IACL,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,yBAAyB,CAAC;IAW/E,2GAA2G;YAC7F,QAAQ;IAgBtB,uDAAuD;YACzC,OAAO;CAmBxB"}