React AG-UI A2UI preview

// eslint-disable-next-line @nx/enforce-module-boundaries -- The isolated consumer copies this internal example layout.
import { ExampleFooter, ExampleLayout } from '../../../../shared/react-example';
import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
import {
  ChatInput,
  MessageList,
  type ChatInputHandle,
} from '@threadplane/react/chat';
import type { A2uiApplication } from './application';
// eslint-disable-next-line @nx/enforce-module-boundaries -- Same-layout private presentation source in installed consumers.
import { A2uiSurface } from '../../../../../libs/cockpit-a2ui-react/src/index';
 
function humanText(content: string) {
  try {
    const value = JSON.parse(content);
    if (value.version === 'v0.9') {
      const labels: Record<string, string> = {
        bookingSubmit: 'Search flights',
        flightSelect: 'Select demonstration flight',
        modifySearch: 'Modify search',
      };
      if (Object.hasOwn(labels, value.action?.name))
        return labels[value.action.name];
    }
  } catch {
    /* Ordinary human text. */
  }
  return content;
}
function SavedText({ content }: { readonly content: string }) {
  const at = content.indexOf('---a2ui_JSON---');
  return at < 0 ? (
    <p className="a2ui-prose">{content}</p>
  ) : (
    <>
      {content.slice(0, at).trim() && (
        <p className="a2ui-prose">{content.slice(0, at).trim()}</p>
      )}
      <details className="a2ui-wire">
        <summary>Response details</summary>
        <pre>{content.slice(at)}</pre>
      </details>
    </>
  );
}
/** Main owns the application. React only observes it and borrows its commands. */
export function A2uiDemo({
  application,
  onReady,
}: {
  readonly application: A2uiApplication;
  readonly onReady: () => void;
}) {
  const snapshot = useSyncExternalStore(
    application.subscribe,
    application.getSnapshot
  );
  const [draft, setDraft] = useState('');
  const composer = useRef<ChatInputHandle>(null);
  useEffect(onReady, [onReady]);
  const status = snapshot.busy
    ? snapshot.activity === 'replacing'
      ? 'Starting a new conversation…'
      : 'Waiting for the confirmed preview…'
    : snapshot.error
    ? 'Start a new conversation to continue.'
    : snapshot.messages.length
    ? 'Preview confirmed.'
    : 'Ready.';
  return (
    <ExampleLayout className="a2ui-demo">
      <header>
        <div>
          <h1>Plan a flight</h1>
        </div>
        <button
          type="button"
          onClick={() => {
            setDraft('');
            void application.newConversation().catch(() => undefined);
          }}
        >
          New conversation
        </button>
      </header>
      <p>
        Flight preview: request a flight form, edit your details, and select a
        demonstration flight. This preview makes no booking or payment.
      </p>
      {snapshot.messages.length === 0 && (
        <button
          className="a2ui-suggestion"
          type="button"
          disabled={snapshot.busy || !snapshot.canSubmit}
          onClick={() => {
            setDraft('I want to fly LAX to JFK');
            composer.current?.focus();
          }}
        >
          Try a flight request
        </button>
      )}
      <MessageList
        rows={[]}
        label="Conversation"
        className="a2ui-conversation"
        key={`messages:${snapshot.viewGeneration}`}
      >
        {!snapshot.messages.length && (
          <p className="a2ui-empty">
            Your confirmed flight previews will appear here.
          </p>
        )}
        {snapshot.messages.map((message) => {
          const surface = snapshot.surfaces.find(
            (s) => s.messageId === message.id
          );
          return (
            <article
              key={message.id}
              className={`tp-chat-message tp-chat-message--${message.role} a2ui-message a2ui-message--${message.role}`}
              aria-label={message.role === 'user' ? 'You' : 'Assistant'}
            >
              <p className="tp-chat-message__role a2ui-message-role">
                {message.role === 'user' ? 'You' : 'Assistant'}
              </p>
              {surface ? (
                <A2uiSurface
                  surface={surface}
                  active={
                    snapshot.activeSurface === surface.id &&
                    !snapshot.busy &&
                    snapshot.canSubmit
                  }
                />
              ) : message.role === 'user' ? (
                <p className="a2ui-prose">{humanText(message.content)}</p>
              ) : (
                <SavedText content={message.content} />
              )}
            </article>
          );
        })}
      </MessageList>
      {snapshot.error && snapshot.native && (
        <details className="a2ui-wire">
          <summary>Unconfirmed response details</summary>
          <pre>
            {JSON.stringify(snapshot.native.transcript, null, 2).slice(
              0,
              100000
            )}
          </pre>
        </details>
      )}
      <ExampleFooter>
        {snapshot.error && <p role="alert">{snapshot.error}</p>}
        <ChatInput
          ref={composer}
          key={snapshot.viewGeneration}
          label="Message"
          value={draft}
          onValueChange={setDraft}
          placeholder="Ask for a flight form…"
          hint="Enter to send. Shift+Enter adds a new line."
          busy={snapshot.busy}
          disabled={!snapshot.canSubmit && !snapshot.busy}
          onStop={
            snapshot.busy
              ? () => {
                  void application.stop().catch(() => undefined);
                }
              : undefined
          }
          onSubmit={(text) => {
            const state = application.getSnapshot();
            if (state.busy || !state.canSubmit) return false;
            // ChatInput clears this admitted draft synchronously, independently of settlement.
            void application.submit(text).catch(() => undefined);
            return true;
          }}
        />
        <p role="status">{status}</p>
      </ExampleFooter>
    </ExampleLayout>
  );
}

import { StrictMode } from 'react';
import { createRoot, type Root } from 'react-dom/client';
// eslint-disable-next-line @nx/enforce-module-boundaries -- The isolated consumer copies this private bridge.
import {
  GENERATED_RUNTIME_PARENT_ORIGINS,
  installRuntimeBridge,
  type InstalledRuntimeBridge,
} from '../../../../../libs/cockpit-runtime-bridge/src/index';
import { A2uiDemo } from './app';
import {
  a2uiConnection,
  createConnectedApplication,
  type A2uiConnection,
} from './connection';
import type { A2uiApplication } from './application';
import '@threadplane/react/chat/styles.css';
import './styles.css';
// eslint-disable-next-line @nx/enforce-module-boundaries -- The isolated consumer copies this internal example layout.
import '../../../../shared/react-example.css';
 
/** Own bootstrap and teardown outside React's replayable presentation lifetime. */
export function startA2uiDemo(
  element: HTMLElement,
  dependencies: {
    readonly bridge?: InstalledRuntimeBridge;
    readonly root?: Pick<Root, 'render' | 'unmount'>;
    readonly createApplication?: (
      connection: A2uiConnection
    ) => A2uiApplication;
  } = {}
) {
  const bridge =
    dependencies.bridge ??
    installRuntimeBridge(undefined, {
      allowedParentOrigins: GENERATED_RUNTIME_PARENT_ORIGINS,
    });
  let root: Pick<Root, 'render' | 'unmount'>;
  try {
    root = dependencies.root ?? createRoot(element);
  } catch (error) {
    try {
      bridge.dispose();
    } catch {
      /* Preserve the acquisition error. */
    }
    throw error;
  }
  const createApplication =
    dependencies.createApplication ?? createConnectedApplication;
  let active = true,
    markedReady = false,
    application: A2uiApplication | undefined,
    cleanup: Promise<void> | undefined;
  function dispose(): Promise<void> {
    if (!active) return cleanup ?? Promise.resolve();
    active = false;
    window.removeEventListener('pagehide', pagehide);
    // Revoke work/stop first, then remove borrowed views, then dispose owned data.
    try {
      application?.revoke();
    } catch {
      /* Every acquired owner still needs cleanup. */
    }
    try {
      root.unmount();
    } catch {
      /* Unmount failure cannot retain application authority. */
    }
    cleanup = Promise.resolve()
      .then(() => application?.dispose())
      .catch(() => undefined)
      .then(() => {
        try {
          bridge.dispose();
        } catch {
          /* Page teardown cannot trigger unhandled rejection. */
        }
      });
    return cleanup;
  }
  function pagehide() {
    void dispose();
  }
  window.addEventListener('pagehide', pagehide);
  const ready = bridge
    .awaitConfiguration()
    .then(async (configuration) => {
      if (!active) return;
      const connection = a2uiConnection(configuration);
      application = createApplication(connection);
      if (!active) {
        application.revoke();
        await application.dispose();
        return;
      }
      root.render(
        <StrictMode>
          <A2uiDemo
            application={application}
            onReady={() => {
              if (active && !markedReady) {
                markedReady = true;
                bridge.markReady();
              }
            }}
          />
        </StrictMode>
      );
    })
    .catch(async () => {
      if (!active) return;
      try {
        bridge.markError('bootstrap_failed');
      } catch {
        /* Continue local cleanup. */
      }
      let renderFailed = false;
      try {
        root.render(<p role="alert">The flight preview could not start.</p>);
      } catch {
        renderFailed = true;
      }
      if (application || renderFailed) await dispose();
    });
  return Object.freeze({ ready, dispose });
}
const element = document.getElementById('root');
if (element) startA2uiDemo(element);

import { createA2uiApplication } from './application';
import { createSession } from '@threadplane/ag-ui';
// eslint-disable-next-line @nx/enforce-module-boundaries -- Same-layout private bridge.
import type { RuntimeBridgeConfiguration } from '../../../../../libs/cockpit-runtime-bridge/src/index';
export interface A2uiConnection {
  readonly url: string;
  readonly label: 'Shared runtime' | 'Developer runtime';
}
function endpoint(value: string): string {
  try {
    const url = new URL(value);
    if (
      !['http:', 'https:'].includes(url.protocol) ||
      url.username ||
      url.password
    )
      throw Error('Unavailable');
    return url.href;
  } catch {
    throw Error('Runtime configuration failed.');
  }
}
/** Select only the shared route or an authored credential-free native endpoint. */
export function a2uiConnection(
  configuration: RuntimeBridgeConfiguration
): A2uiConnection {
  if (
    configuration.status === 'error' ||
    (configuration.status === 'configured' &&
      configuration.target.kind === 'langsmith')
  )
    throw Error('Runtime configuration failed.');
  const target =
    configuration.status === 'configured' &&
    configuration.target.kind === 'ag-ui'
      ? configuration.target
      : null;
  return Object.freeze({
    url: endpoint(
      target?.endpoint ??
        new URL('/ag-ui/a2ui/agent', window.location.origin).href
    ),
    label: target ? 'Developer runtime' : 'Shared runtime',
  });
}
export function createConnectedApplication(connection: A2uiConnection) {
  const url = endpoint(connection.url);
  return createA2uiApplication({
    sessionFactory(threadId) {
      return createSession({ threadId, url });
    },
  });
}

import type { Session } from '@threadplane/ag-ui';
import type { CompleteOutcome } from '@threadplane/core';
import {
  createNativeObservation,
  type NativeObservation,
  type NativeSnapshot,
  type OrdinaryMessage,
} from './terminal';
// eslint-disable-next-line @nx/enforce-module-boundaries -- Internal package-less shared flight presentation.
import {
  createFlightSurface,
  copyData,
  type FlightSurface,
  type SurfaceView,
  type SurfaceKind,
} from '../../../../../libs/cockpit-a2ui-react/src/index';
export interface A2uiSnapshot {
  readonly threadId: string | null;
  readonly native: NativeSnapshot | undefined;
  readonly messages: readonly OrdinaryMessage[];
  readonly surfaces: readonly SurfaceView[];
  readonly activeSurface: string | null;
  readonly activity: 'idle' | 'running' | 'replacing';
  readonly busy: boolean;
  readonly canSubmit: boolean;
  readonly error: string | null;
  readonly outcome: CompleteOutcome | null;
  readonly viewGeneration: number;
}
/** Native Session owns protocol execution; this owner admits confirmed flight views. */
export function createA2uiApplication(options: {
  readonly sessionFactory: (threadId: string) => Session;
}) {
  type Owner = {
    readonly session: Session;
    readonly threadId: string;
    readonly runIds: Set<string>;
    release?: () => void;
    observation?: NativeObservation;
    pendingSubmit?: Promise<CompleteOutcome>;
    submitOutcome?: unknown;
    closed: boolean;
  };
  const listeners = new Set<{ notify: () => void }>(),
    surfaces = new Set<FlightSurface>();
  const sessions = new WeakSet<object>(),
    threads = new Set<string>(),
    cleanups = new Set<Promise<void>>();
  let owner: Owner | undefined,
    operation: AbortController | undefined,
    active: FlightSurface | undefined;
  let revoked = false,
    generation = 0,
    sequence = 0,
    disposal: Promise<void> | undefined;
  let snapshot: A2uiSnapshot = Object.freeze({
    threadId: null,
    native: undefined,
    messages: Object.freeze([]),
    surfaces: Object.freeze([]),
    activeSurface: null,
    activity: 'idle',
    busy: false,
    canSubmit: true,
    error: null,
    outcome: null,
    viewGeneration: 0,
  });
  function publish(change: Partial<A2uiSnapshot>) {
    if (revoked) return;
    snapshot = Object.freeze({ ...snapshot, ...change });
    for (const registration of [...listeners]) {
      if (revoked) break;
      if (listeners.has(registration))
        try {
          registration.notify();
        } catch {
          /* A view cannot interrupt ownership. */
        }
    }
  }
  function track(work: () => unknown) {
    let pending: Promise<void>;
    try {
      pending = Promise.resolve(work()).then(
        () => undefined,
        () => undefined
      );
    } catch {
      pending = Promise.resolve();
    }
    cleanups.add(pending);
    void pending.then(() => cleanups.delete(pending));
    return pending;
  }
  function close(selected: Owner, stop: boolean) {
    if (selected.closed) return;
    selected.closed = true;
    selected.observation = undefined;
    try {
      selected.release?.();
    } catch {
      /* Revoked callbacks have no authority. */
    }
    selected.release = undefined;
    // stop() is void-valued; the original pending submit owns its eventual outcome.
    if (stop) track(() => selected.session.stop());
    track(() => selected.session.dispose());
  }
  function detach(stop: boolean) {
    const selected = owner;
    owner = undefined;
    if (selected) close(selected, stop);
  }
  function retireActive() {
    const selected = active;
    active = undefined;
    selected?.dispose();
  }
  function read(selected: Owner, valid: () => boolean) {
    if (!valid()) return;
    const getSnapshot = selected.session.getSnapshot;
    if (!valid()) return;
    const value = getSnapshot.call(selected.session);
    if (!valid()) return;
    const captured = copyData(value) as unknown as NativeSnapshot;
    return valid() ? captured : undefined;
  }
  function observe(selected: Owner, valid: () => boolean) {
    if (!valid()) return;
    try {
      const native = read(selected, valid);
      if (!native || !valid()) return;
      selected.observation?.observe(native);
      if (!valid()) return;
      const identity = selected.observation?.identity();
      if (!valid()) return;
      // Bind identity before any application listener can replace or stop the owner.
      if (identity) selected.runIds.add(identity.runId);
      publish({ native });
    } catch {
      if (valid()) {
        operation?.abort();
        operation = undefined;
        retireActive();
        detach(true);
        publish({
          busy: false,
          activity: 'idle',
          canSubmit: false,
          activeSurface: null,
          error:
            'The native response is unavailable. Start a new conversation.',
        });
      }
    }
  }
  function install(valid: () => boolean): Owner | undefined {
    const threadId = crypto.randomUUID();
    if (!valid()) return;
    if (!threadId || threads.has(threadId))
      throw Error('Reused thread identity');
    threads.add(threadId);
    const sessionFactory = options.sessionFactory;
    if (!valid()) return;
    const session = sessionFactory.call(options, threadId);
    if (!session || typeof session !== 'object')
      throw Error('Unavailable native owner');
    const selected: Owner = {
      session,
      threadId,
      runIds: new Set(),
      closed: false,
    };
    if (!valid()) {
      close(selected, true);
      return;
    }
    if (sessions.has(session)) throw Error('Reused native owner');
    sessions.add(session);
    owner = selected;
    for (const method of [
      'getSnapshot',
      'subscribe',
      'submit',
      'stop',
      'dispose',
      'resume',
    ] as const) {
      if (typeof session[method] !== 'function')
        throw Error('Unavailable native owner');
      if (!valid() || owner !== selected || selected.closed) return;
    }
    const subscribe = session.subscribe;
    if (!valid() || owner !== selected || selected.closed) return;
    const release = subscribe.call(session, () => {
      const selectedOperation = operation;
      if (!selectedOperation || !selected.observation) return;
      observe(
        selected,
        () =>
          !revoked &&
          owner === selected &&
          !selected.closed &&
          operation === selectedOperation &&
          !selectedOperation.signal.aborted
      );
    });
    if (typeof release !== 'function')
      throw Error('Unavailable native observation');
    selected.release = release;
    if (selected.closed || !valid() || owner !== selected) {
      try {
        release();
      } catch {
        /* Cleanup is best effort after revocation. */
      }
      if (!selected.closed) close(selected, true);
      return;
    }
    const initial = read(selected, valid);
    if (!valid()) return;
    if (
      !initial ||
      initial.status !== 'idle' ||
      initial.transcript.length ||
      initial.subagents.length ||
      initial.decision ||
      initial.run
    )
      throw Error('Native owner is not fresh');
    return selected;
  }
  async function submit(
    text: string,
    expected: SurfaceKind = 'booking'
  ): Promise<boolean> {
    if (
      revoked ||
      operation ||
      snapshot.busy ||
      !snapshot.canSubmit ||
      typeof text !== 'string' ||
      !text.trim()
    )
      return false;
    const admitted = new AbortController();
    operation = admitted;
    const valid = () =>
      !revoked && operation === admitted && !admitted.signal.aborted;
    retireActive();
    publish({
      busy: true,
      canSubmit: false,
      activeSurface: null,
      activity: 'running',
      error: null,
      outcome: null,
    });
    let selected: Owner | undefined;
    try {
      if (!valid()) return false;
      selected = owner ?? install(valid);
      if (!selected || !valid() || selected.closed) return false;
      const chosen = selected;
      const current = () => valid() && owner === chosen && !chosen.closed;
      const observation = createNativeObservation({
        owner: chosen,
        generation: ++generation,
        threadId: chosen.threadId,
        message: text,
        previous: snapshot.messages,
        usedRunIds: [...chosen.runIds],
        valid: current,
      });
      if (!current()) return false;
      chosen.observation = observation;
      publish({ threadId: chosen.threadId });
      if (!current()) return false;
      const submitNative = chosen.session.submit;
      if (!current()) return false;
      const pending = submitNative.call(chosen.session, text, {
        signal: admitted.signal,
      });
      chosen.pendingSubmit = pending;
      // Retain the actual native outcome even when Stop/New has detached publication.
      void pending.then(
        (value) => {
          chosen.submitOutcome = value;
        },
        (error) => {
          chosen.submitOutcome = error;
        }
      );
      const outcome = await pending;
      if (!current()) return false;
      const native = read(chosen, current);
      if (!native || !current()) return false;
      const messages = observation.confirm(outcome, native);
      if (!current()) return false;
      const reported = [
        'success',
        'error',
        'aborted',
        'paused',
        'interrupted',
      ].includes(outcome)
        ? outcome
        : null;
      if (!messages) {
        detach(false);
        operation = undefined;
        publish({
          native,
          outcome: reported,
          busy: false,
          activity: 'idle',
          canSubmit: false,
          error:
            'The native response could not be confirmed. Start a new conversation.',
        });
        return false;
      }
      const last = messages.at(-1);
      if (!last) throw Error('Missing confirmed response');
      let prepared: FlightSurface;
      try {
        prepared = createFlightSurface({
          content: last.content,
          expected,
          messageId: last.id,
          id: 'surface-' + ++sequence,
          isCurrent: () =>
            !revoked &&
            active === prepared &&
            !operation &&
            !snapshot.busy &&
            snapshot.canSubmit,
          onAction(payload) {
            if (
              revoked ||
              active !== prepared ||
              operation ||
              snapshot.busy ||
              !snapshot.canSubmit
            )
              return;
            const next: SurfaceKind =
              payload.action.name === 'bookingSubmit'
                ? 'results'
                : payload.action.name === 'flightSelect'
                ? 'confirmation'
                : 'booking';
            void submit(JSON.stringify(payload), next).catch(() => undefined);
          },
        });
      } catch {
        if (current()) {
          detach(false);
          operation = undefined;
          publish({
            native,
            messages,
            outcome: reported,
            busy: false,
            activity: 'idle',
            canSubmit: false,
            error:
              'This confirmed response is unavailable. Start a new conversation.',
          });
        }
        return false;
      }
      if (!current()) {
        prepared.dispose();
        return false;
      }
      surfaces.add(prepared);
      active = prepared;
      chosen.observation = undefined;
      operation = undefined;
      // The ordinary transcript, immutable view and current command epoch publish together.
      publish({
        native,
        messages,
        surfaces: Object.freeze([...snapshot.surfaces, prepared.view]),
        activeSurface: prepared.view.id,
        outcome: reported,
        busy: false,
        activity: 'idle',
        canSubmit: true,
        error: null,
      });
      return (
        !revoked && owner === chosen && !chosen.closed && active === prepared
      );
    } catch {
      if (valid()) {
        detach(true);
        operation = undefined;
        publish({
          busy: false,
          activity: 'idle',
          canSubmit: false,
          activeSurface: null,
          error: 'The native request failed. Start a new conversation.',
        });
      }
      return false;
    } finally {
      if (valid()) {
        if (selected) selected.observation = undefined;
        operation = undefined;
        publish({ busy: false, activity: 'idle', canSubmit: false });
      }
    }
  }
  async function stop() {
    if (revoked || (!operation && !owner)) return;
    operation?.abort();
    operation = undefined;
    retireActive();
    detach(true);
    publish({
      busy: false,
      activity: 'idle',
      activeSurface: null,
      canSubmit: false,
      error: 'Stopped. Start a new conversation to continue.',
    });
  }
  async function newConversation() {
    if (revoked) return;
    operation?.abort();
    operation = undefined;
    retireActive();
    detach(true);
    for (const surface of surfaces) surface.dispose();
    surfaces.clear();
    // Cleanup cannot retain permission to act or delay a fresh conversation.
    publish({
      threadId: null,
      native: undefined,
      messages: Object.freeze([]),
      surfaces: Object.freeze([]),
      activeSurface: null,
      busy: false,
      activity: 'idle',
      canSubmit: true,
      error: null,
      outcome: null,
      viewGeneration: snapshot.viewGeneration + 1,
    });
  }
  function revoke() {
    if (revoked) return;
    revoked = true;
    operation?.abort();
    operation = undefined;
    for (const surface of surfaces) surface.revoke();
    active = undefined;
    detach(true);
    listeners.clear();
    snapshot = Object.freeze({
      ...snapshot,
      activeSurface: null,
      busy: false,
      canSubmit: false,
      activity: 'idle',
    });
  }
  function dispose(): Promise<void> {
    if (disposal) return disposal;
    revoke();
    for (const surface of surfaces) surface.dispose();
    surfaces.clear();
    disposal = Promise.all([...cleanups]).then(() => undefined);
    return disposal;
  }
  return Object.freeze({
    getSnapshot: () => snapshot,
    subscribe(notify: () => void) {
      if (revoked) return () => undefined;
      const registration = { notify };
      listeners.add(registration);
      return () => {
        listeners.delete(registration);
      };
    },
    submit: (text: string) => submit(text),
    stop,
    newConversation,
    revoke,
    dispose,
  });
}
export type A2uiApplication = ReturnType<typeof createA2uiApplication>;

import type { Session } from '@threadplane/ag-ui';
// eslint-disable-next-line @nx/enforce-module-boundaries -- Private same-layout data leaf, copied into installed consumers.
import {
  closedFields,
  copyData,
  equalData,
  plainRecord,
} from '../../../../../libs/cockpit-a2ui-react/src/data.js';
 
export type NativeSnapshot = ReturnType<Session['getSnapshot']>;
export interface OrdinaryMessage {
  readonly id: string;
  readonly role: 'user' | 'assistant';
  readonly content: string;
}
export interface NativeIdentity {
  readonly owner: object;
  readonly generation: number;
  readonly runId: string;
  readonly human: OrdinaryMessage;
  readonly previous: readonly OrdinaryMessage[];
}
const nonempty = (value: unknown): value is string =>
  typeof value === 'string' && value.length > 0;
function ordinary(input: unknown): input is readonly OrdinaryMessage[] {
  if (!Array.isArray(input)) return false;
  const ids = new Set<string>();
  return input.every((row) => {
    if (
      !closedFields(row, [
        'id',
        'role',
        'content',
        'name',
        'toolCalls',
        'subagentRunId',
      ]) ||
      !plainRecord(row) ||
      !nonempty(row.id) ||
      ids.has(row.id) ||
      !['user', 'assistant'].includes(String(row.role)) ||
      typeof row.content !== 'string' ||
      (row.name !== undefined && typeof row.name !== 'string') ||
      (row.subagentRunId !== undefined && row.subagentRunId !== null) ||
      (row.toolCalls !== undefined &&
        (!Array.isArray(row.toolCalls) || row.toolCalls.length !== 0))
    )
      return false;
    ids.add(row.id);
    return true;
  });
}
 
/** Binds only the initial native publication; terminal success cannot invent identity. */
export function createNativeObservation(input: {
  readonly owner: object;
  readonly generation: number;
  readonly threadId: string;
  readonly message: string;
  readonly previous: unknown;
  readonly usedRunIds: readonly string[];
  readonly valid?: () => boolean;
}) {
  const { owner, generation, threadId, message } = input;
  const valid = input.valid ?? (() => true);
  let identity: NativeIdentity | undefined,
    invalid = false;
  let previous: readonly OrdinaryMessage[] = [],
    usedRunIds: readonly string[] = [];
  try {
    const captured = copyData(input.previous),
      ids = copyData(input.usedRunIds);
    if (
      !valid() ||
      !ordinary(captured) ||
      !Array.isArray(ids) ||
      !ids.every(nonempty) ||
      !nonempty(threadId) ||
      typeof message !== 'string' ||
      !Number.isSafeInteger(generation) ||
      generation < 1
    )
      invalid = true;
    else {
      previous = captured;
      usedRunIds = ids as readonly string[];
    }
  } catch {
    invalid = true;
  }
  function read(value: unknown) {
    if (invalid || !valid()) return;
    const state = copyData(value);
    if (
      !valid() ||
      !plainRecord(state) ||
      !Array.isArray(state.transcript) ||
      !Array.isArray(state.subagents) ||
      state.subagents.length ||
      state.decision ||
      state.error ||
      !['running', 'idle'].includes(String(state.status)) ||
      !plainRecord(state.run) ||
      !nonempty(state.run.id) ||
      state.run.legacyInterrupt ||
      (state.run.outcome !== undefined && state.run.outcome !== 'success')
    )
      return;
    return { state, run: state.run, transcript: state.transcript };
  }
  function matches(rows: readonly unknown[], captured: NativeIdentity) {
    return (
      rows.length >= previous.length + 1 &&
      equalData(rows.slice(0, previous.length), previous) &&
      equalData(rows[previous.length], captured.human) &&
      valid()
    );
  }
  return Object.freeze({
    observe(snapshot: unknown) {
      if (invalid || !valid()) return;
      try {
        const readout = read(snapshot);
        if (!readout) {
          invalid = true;
          return;
        }
        const { state, run, transcript } = readout;
        if (identity) {
          if (run.id !== identity.runId || !matches(transcript, identity))
            invalid = true;
          return;
        }
        const user = transcript[previous.length];
        if (
          state.status !== 'running' ||
          run.outcome !== undefined ||
          run.terminal !== undefined ||
          usedRunIds.includes(run.id as string) ||
          transcript.length !== previous.length + 1 ||
          !ordinary(transcript) ||
          !equalData(transcript.slice(0, previous.length), previous) ||
          !plainRecord(user) ||
          user.role !== 'user' ||
          user.content !== message ||
          !valid()
        ) {
          invalid = true;
          return;
        }
        identity = Object.freeze({
          owner,
          generation,
          runId: run.id as string,
          human: user as unknown as OrdinaryMessage,
          previous,
        });
      } catch {
        invalid = true;
      }
    },
    identity: () => (!invalid && valid() ? identity : undefined),
    confirm(
      outcome: unknown,
      snapshot: unknown
    ): readonly OrdinaryMessage[] | undefined {
      try {
        if (outcome !== 'success' || !identity) return;
        const readout = read(snapshot);
        if (!readout) return;
        const { state, run, transcript } = readout,
          terminal = run.terminal;
        if (
          state.status !== 'idle' ||
          run.id !== identity.runId ||
          run.outcome !== 'success' ||
          !plainRecord(terminal) ||
          terminal.type !== 'RUN_FINISHED' ||
          terminal.threadId !== threadId ||
          terminal.runId !== identity.runId ||
          !ordinary(transcript) ||
          transcript.length !== previous.length + 2 ||
          !matches(transcript, identity)
        )
          return;
        if (
          terminal.outcome !== undefined &&
          (!closedFields(terminal.outcome, ['type', 'pendingToolCallIds']) ||
            !plainRecord(terminal.outcome) ||
            terminal.outcome.type !== 'success' ||
            (terminal.outcome.pendingToolCallIds !== undefined &&
              (!Array.isArray(terminal.outcome.pendingToolCallIds) ||
                terminal.outcome.pendingToolCallIds.length)))
        )
          return;
        const last = transcript.at(-1);
        return last?.role === 'assistant' && last.content.trim() && valid()
          ? transcript
          : undefined;
      } catch {
        return;
      }
    },
  });
}
export type NativeObservation = ReturnType<typeof createNativeObservation>;

import {
  A2UI_BASIC_CATALOG_ID,
  createA2uiMessageParser,
} from '@threadplane/a2ui';
import { createA2uiSurfaces } from '@threadplane/content/a2ui';
import type { A2uiSurfacesSnapshot } from '@threadplane/content/a2ui';
import type { RenderSpecData } from '@threadplane/react/render';
import { closedFields, copyData, plainRecord, type Data } from './data.js';
 
export const AIRPORTS = Object.freeze([
  'LAX',
  'JFK',
  'SFO',
  'ORD',
  'BOS',
  'ATL',
  'DFW',
  'SEA',
  'MIA',
  'DEN',
]);
export const FARES = Object.freeze(['Economy', 'Premium', 'Business', 'First']);
export const BOOKING_FIELDS = Object.freeze([
  'origin',
  'dest',
  'date',
  'passengers',
  'fare_class',
] as const);
export type BookingField = (typeof BOOKING_FIELDS)[number];
export type SurfaceKind = 'booking' | 'results' | 'confirmation';
export type Component = Readonly<Record<string, Data>> & {
  readonly id: string;
  readonly component: string;
};
export interface PreparedSurface {
  readonly identity: object;
  readonly surfaceId: SurfaceKind;
  readonly prose: string;
  readonly rawSnapshot: A2uiSurfacesSnapshot;
  readonly model: Readonly<Record<string, Data>>;
  readonly components: Readonly<Record<string, Component>>;
  readonly spec: RenderSpecData;
  readonly sendDataModel: boolean;
  token(id: string): object | undefined;
  current(id: string, token: object | undefined): boolean;
  retireComponent(id: string): void;
  dispose(): void;
}
function requireThat(value: unknown): asserts value {
  if (!value) throw Error('Unsupported A2UI response');
}
function fields(
  value: unknown,
  allowed: readonly string[]
): asserts value is Record<string, Data> {
  requireThat(closedFields(value, allowed));
}
function id(value: unknown): asserts value is string {
  requireThat(
    typeof value === 'string' && value.length > 0 && value.length <= 128
  );
}
function variant(value: Data, allowed: readonly string[]) {
  requireThat(
    value === undefined ||
      (typeof value === 'string' && allowed.includes(value))
  );
}
function path(value: Data): string {
  fields(value, ['path']);
  requireThat(typeof value.path === 'string');
  return value.path;
}
function read(model: Readonly<Record<string, Data>>, p: string): Data {
  requireThat(
    /^\/[A-Za-z_][A-Za-z_0-9]*$/.test(p) && Object.hasOwn(model, p.slice(1))
  );
  return model[p.slice(1)];
}
function text(value: Data, model: Readonly<Record<string, Data>>) {
  if (typeof value !== 'string')
    requireThat(typeof read(model, path(value)) === 'string');
}
function choice(value: Data, allowed: readonly string[]) {
  requireThat(
    Array.isArray(value) &&
      value.length <= 1 &&
      value.every((v) => typeof v === 'string' && allowed.includes(v))
  );
}
export function assertBookingModel(
  model: unknown
): asserts model is Readonly<Record<string, Data>> {
  fields(model, BOOKING_FIELDS);
  requireThat(Object.keys(model).length === 5);
  choice(model.origin, AIRPORTS);
  choice(model.dest, AIRPORTS);
  choice(model.fare_class, FARES);
  requireThat(
    typeof model.date === 'string' &&
      Number.isSafeInteger(model.passengers) &&
      (model.passengers as number) > 0
  );
}
function contextValue(
  value: Data,
  key: string,
  model: Readonly<Record<string, Data>>
) {
  if (plainRecord(value)) {
    const p = path(value);
    requireThat(p === '/' + key);
    return read(model, p);
  }
  return value;
}
/** Shared protocol action admission; never evaluates functions. */
export function validateAction(
  action: Data,
  kind: SurfaceKind,
  model: Readonly<Record<string, Data>>
) {
  fields(action, ['event']);
  fields(action.event, ['name', 'context']);
  const event = action.event;
  fields(
    event.context,
    event.name === 'bookingSubmit'
      ? ['formId', ...BOOKING_FIELDS]
      : event.name === 'flightSelect'
      ? ['flightId']
      : ['formId']
  );
  const ctx = event.context;
  if (event.name === 'bookingSubmit') {
    requireThat(
      kind === 'booking' &&
        Object.keys(ctx).length === 6 &&
        ctx.formId === 'booking'
    );
    const values: Record<string, Data> = {};
    for (const key of BOOKING_FIELDS)
      values[key] = contextValue(ctx[key], key, model);
    assertBookingModel(values);
  } else if (event.name === 'flightSelect') {
    requireThat(kind === 'results' && Object.keys(ctx).length === 1);
    id(contextValue(ctx.flightId, 'flightId', model));
  } else
    requireThat(
      event.name === 'modifySearch' &&
        kind !== 'booking' &&
        Object.keys(ctx).length === 1 &&
        ctx.formId === 'booking'
    );
}
function validateComponent(
  c: Component,
  kind: SurfaceKind,
  model: Readonly<Record<string, Data>>
) {
  id(c.id);
  requireThat(typeof c.component === 'string');
  const props: Record<string, readonly string[]> = {
    Column: ['children'],
    Row: ['children'],
    List: ['children'],
    Card: ['child'],
    Text: ['text', 'variant'],
    Divider: ['axis'],
    Button: ['child', 'variant', 'action', 'checks'],
    ChoicePicker: ['label', 'options', 'value', 'variant', 'checks'],
    DateTimeInput: ['label', 'value', 'enableDate', 'enableTime', 'checks'],
    TextField: ['label', 'value', 'variant', 'checks'],
  };
  requireThat(Object.hasOwn(props, c.component));
  fields(c, ['id', 'component', 'catalogId', ...props[c.component]]);
  requireThat(
    c.catalogId === undefined || c.catalogId === A2UI_BASIC_CATALOG_ID
  );
  if (c.checks !== undefined)
    requireThat(Array.isArray(c.checks) && !c.checks.length);
  switch (c.component) {
    case 'Column':
    case 'Row':
    case 'List':
      requireThat(Array.isArray(c.children));
      for (const child of c.children) id(child);
      break;
    case 'Card':
      id(c.child);
      break;
    case 'Text':
      text(c.text, model);
      variant(c.variant, ['h1', 'h2', 'h3', 'h4', 'h5', 'body', 'caption']);
      break;
    case 'Divider':
      variant(c.axis, ['horizontal', 'vertical']);
      break;
    case 'Button':
      id(c.child);
      variant(c.variant, ['default', 'primary', 'borderless']);
      validateAction(c.action, kind, model);
      break;
    case 'ChoicePicker': {
      requireThat(kind === 'booking');
      text(c.label, model);
      variant(c.variant, ['mutuallyExclusive']);
      const p = path(c.value);
      requireThat(['/origin', '/dest', '/fare_class'].includes(p));
      const allowed = p === '/fare_class' ? FARES : AIRPORTS;
      choice(read(model, p), allowed);
      requireThat(
        Array.isArray(c.options) && c.options.length === allowed.length
      );
      const seen = new Set();
      for (const o of c.options) {
        fields(o, ['label', 'value']);
        requireThat(
          typeof o.label === 'string' &&
            typeof o.value === 'string' &&
            allowed.includes(o.value) &&
            !seen.has(o.value)
        );
        seen.add(o.value);
      }
      break;
    }
    case 'DateTimeInput':
      requireThat(
        kind === 'booking' &&
          path(c.value) === '/date' &&
          c.enableDate === true &&
          (c.enableTime === undefined || c.enableTime === false)
      );
      text(c.label, model);
      break;
    case 'TextField':
      requireThat(
        kind === 'booking' &&
          path(c.value) === '/passengers' &&
          c.variant === 'number'
      );
      text(c.label, model);
      break;
  }
}
function children(c: Component): readonly string[] {
  return Array.isArray(c.children)
    ? (c.children as readonly string[])
    : typeof c.child === 'string'
    ? [c.child]
    : [];
}
function validateTree(
  all: readonly Component[],
  kind: SurfaceKind,
  model: Readonly<Record<string, Data>>
) {
  requireThat(all.length > 0 && all.length <= 512);
  const map: Record<string, Component> = Object.create(null);
  for (const c of all) {
    fields(c, Object.keys(c));
    validateComponent(c, kind, model);
    requireThat(!Object.hasOwn(map, c.id));
    map[c.id] = c;
  }
  requireThat(Object.hasOwn(map, 'root') && map.root.component === 'Column');
  const visited = new Set<string>();
  function visit(key: string, depth: number) {
    requireThat(depth <= 64 && Object.hasOwn(map, key) && !visited.has(key));
    visited.add(key);
    const c = map[key];
    if (c.component === 'Button')
      requireThat(map[c.child as string]?.component === 'Text');
    for (const child of children(c)) visit(child, depth + 1);
  }
  visit('root', 0);
  requireThat(visited.size === all.length);
  return Object.freeze(map);
}
function project(map: Readonly<Record<string, Component>>): RenderSpecData {
  const elements: Record<string, unknown> = Object.create(null);
  for (const c of Object.values(map)) {
    const props: Record<string, Data> = Object.create(null);
    for (const [key, value] of Object.entries(c)) {
      if (
        [
          'id',
          'component',
          'catalogId',
          'children',
          'child',
          'action',
          'checks',
        ].includes(key)
      )
        continue;
      props[key] =
        plainRecord(value) && typeof value.path === 'string'
          ? { $bindState: value.path }
          : value;
    }
    if (['Row', 'Column', 'List'].includes(c.component))
      props.direction = c.component === 'Row' ? 'horizontal' : 'vertical';
    if (c.component === 'Divider') props.axis = c.axis ?? 'horizontal';
    if (c.component === 'ChoicePicker')
      props.variant = c.variant ?? 'mutuallyExclusive';
    if (c.component === 'Button') props.variant = c.variant ?? 'default';
    if (c.component === 'Text') props.variant = c.variant ?? 'body';
    elements[c.id] = { type: c.component, props, children: children(c) };
  }
  return copyData({ root: 'root', elements }) as unknown as RenderSpecData;
}
/** Complete canonical assistant payload only. Validate before parser and owner. */
export function prepareSurface(
  content: string,
  expected: SurfaceKind
): PreparedSurface {
  requireThat(['booking', 'results', 'confirmation'].includes(expected));
  const delimiter = '---a2ui_JSON---',
    at = content.indexOf(delimiter);
  requireThat(
    at >= 0 &&
      (at === 0 || content[at - 1] === '\n') &&
      content[at + delimiter.length] === '\n' &&
      content.indexOf(delimiter, at + delimiter.length) < 0
  );
  const payload = content.slice(at + delimiter.length + 1);
  requireThat(
    payload.endsWith('\n') &&
      new TextEncoder().encode(payload).length <= 1048576
  );
  const messages = payload
    .split('\n')
    .filter((line) => line.trim())
    .map((line) => JSON.parse(line));
  requireThat(messages.length === 2 || messages.length === 3);
  const commands = ['createSurface', 'updateComponents', 'updateDataModel'];
  for (let i = 0; i < messages.length; i++) {
    const m = messages[i];
    fields(m, ['version', commands[i]]);
    requireThat(m.version === 'v0.9' && Object.keys(m).length === 2);
    const command = m[commands[i]];
    fields(
      command,
      i === 0
        ? ['surfaceId', 'catalogId', 'sendDataModel']
        : i === 1
        ? ['surfaceId', 'components']
        : ['surfaceId', 'path', 'value']
    );
    requireThat(command.surfaceId === expected);
    id(command.surfaceId);
    if (i === 0)
      requireThat(
        command.catalogId === A2UI_BASIC_CATALOG_ID &&
          (command.sendDataModel === undefined ||
            typeof command.sendDataModel === 'boolean')
      );
    if (i === 1) requireThat(Array.isArray(command.components));
    if (i === 2)
      requireThat(
        (command.path === undefined || command.path === '/') &&
          plainRecord(command.value)
      );
  }
  const captured = copyData(messages) as unknown as typeof messages;
  const model =
    messages.length === 3
      ? captured[2].updateDataModel.value
      : Object.freeze({});
  if (expected === 'booking') assertBookingModel(model);
  validateTree(captured[1].updateComponents.components, expected, model);
  const owner = createA2uiSurfaces();
  try {
    const parsed = createA2uiMessageParser().push(payload);
    requireThat(parsed.length === messages.length);
    for (const message of parsed) owner.apply(message);
    const rawSnapshot = owner.getSnapshot();
    requireThat(rawSnapshot.surfaces.length === 1);
    const raw = rawSnapshot.surfaces[0];
    requireThat(raw.surfaceId === expected && plainRecord(raw.dataModel));
    const components = validateTree(
        raw.components as readonly Component[],
        expected,
        raw.dataModel
      ),
      spec = project(components);
    // Conservative aggregate capture includes duplicated retained representations.
    copyData({ captured, rawSnapshot, spec });
    let live = true;
    const tokens = new Map(
      Object.keys(components).map((id) => [id, Object.freeze({})])
    );
    return Object.freeze({
      identity: Object.freeze({}),
      surfaceId: expected,
      prose: content.slice(0, at),
      rawSnapshot,
      model: raw.dataModel,
      components,
      spec,
      sendDataModel: raw.sendDataModel === true,
      token: (id: string) => tokens.get(id),
      current: (id: string, token: object | undefined) =>
        live && token !== undefined && tokens.get(id) === token,
      retireComponent: (id: string) => {
        tokens.delete(id);
      },
      dispose: () => {
        if (live) {
          live = false;
          tokens.clear();
          owner.dispose();
        }
      },
    });
  } catch (error) {
    owner.dispose();
    throw error;
  }
}