React AG-UI JSON Render 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, useState } from 'react';
import { useAgent } from '@threadplane/react';
import {
  ChatInput,
  MessageList,
  ToolObservation,
} from '@threadplane/react/chat';
import { RenderSpec } from '@threadplane/react/render';
import {
  createConnectedApplication,
  type dashboardConnection,
} from './connection';
import { dashboardRegistry } from './dashboard-views';
 
export function DashboardDemo({
  connection,
  onReady,
}: {
  readonly connection: ReturnType<typeof dashboardConnection>;
  readonly onReady: () => void;
}) {
  const [application] = useState(() => createConnectedApplication(connection));
  const [draft, setDraft] = useState('');
  const snapshot = useAgent(application);
  useEffect(() => {
    onReady();
  }, [onReady]);
  useEffect(
    () => () => {
      void application.dispose();
    },
    [application]
  );
  useEffect(() => {
    setDraft('');
  }, [snapshot.viewGeneration]);
  const transcript = snapshot.native?.transcript ?? [];
  const status = snapshot.busy
    ? snapshot.activity === 'replacing'
      ? 'Starting new conversation…'
      : 'Updating the dashboard…'
    : !snapshot.canSubmit
    ? 'Start a new conversation to continue.'
    : snapshot.outcome === 'success'
    ? 'Response complete.'
    : 'Ready.';
  return (
    <ExampleLayout
      className="dashboard-demo"
      about={
        <section aria-label="Runtime connection" className="runtime-details">
          <details>
            <summary>Runtime connection</summary>
            <p>{connection.label}</p>
          </details>
        </section>
      }
    >
      <header>
        <div>
          <h1>AG-UI airline dashboard</h1>
        </div>
        <button
          type="button"
          disabled={snapshot.busy}
          onClick={() => void application.newConversation()}
        >
          New conversation
        </button>
      </header>
      <p>
        Ask for an airline dashboard, then filter the disruptions or change its
        layout. This example uses fixed demo data.
      </p>
      <MessageList rows={[]} label="Conversation" key={snapshot.viewGeneration}>
        <ol className="dashboard-native-rows" role="list">
          {transcript.map((message) => {
            const surface = snapshot.surfaces.find(
              (item) => item.ownerId === message.id
            );
            const calls =
              message.role === 'assistant' ? message.toolCalls ?? [] : [];
            const text =
              (message.role === 'user' ||
                message.role === 'assistant' ||
                message.role === 'tool') &&
              typeof message.content === 'string' ? (
                <p className="dashboard-native-text">{message.content}</p>
              ) : null;
            return (
              <li
                key={message.id}
                data-dashboard-message={message.id}
                className={`tp-chat-message tp-chat-message--${message.role}`}
              >
                <p className="tp-chat-message__role">
                  {message.role === 'user' ? 'You' : message.role}
                </p>
                {surface &&
                typeof message.content === 'string' &&
                message.content.trim().startsWith('{') ? (
                  <details>
                    <summary>Layout source</summary>
                    {text}
                  </details>
                ) : message.role === 'tool' ? (
                  <details>
                    <summary>Server tool result</summary>
                    {text}
                  </details>
                ) : (
                  text
                )}
                {surface && (
                  <div data-dashboard-spec-owner={message.id}>
                    <RenderSpec
                      spec={surface.spec}
                      registry={dashboardRegistry}
                      state={{ ...snapshot.projection?.state }}
                      loading={snapshot.busy}
                    />
                  </div>
                )}
                {calls.map((call) => {
                  const result = transcript.find(
                    (row) => row.role === 'tool' && row.toolCallId === call.id
                  );
                  return (
                    <details key={call.id} data-dashboard-tool={call.id}>
                      <summary>Tool details: {call.function.name}</summary>
                      <ToolObservation
                        name={call.function.name}
                        argumentsText={call.function.arguments}
                        resultText={
                          result?.role === 'tool' &&
                          typeof result.content === 'string'
                            ? result.content
                            : undefined
                        }
                      />
                    </details>
                  );
                })}
              </li>
            );
          })}
        </ol>
      </MessageList>
      <ExampleFooter>
        {snapshot.error && <p role="alert">{snapshot.error}</p>}
        <ChatInput
          label="Message"
          hint="Enter to send. Shift+Enter adds a new line."
          placeholder="Ask for an airline dashboard…"
          value={draft}
          onValueChange={setDraft}
          disabled={!snapshot.canSubmit}
          busy={snapshot.busy}
          onStop={snapshot.busy ? () => void application.stop() : undefined}
          onSubmit={(text) => {
            if (!application.getSnapshot().canSubmit) return false;
            void application.submit(text);
            return application.getSnapshot().busy;
          }}
        />
        <p role="status">{status}</p>
      </ExampleFooter>
    </ExampleLayout>
  );
}

import { Children, useId, type CSSProperties } from 'react';
import type {
  ReactRenderRegistry,
  RenderViewProps,
  RenderValue,
} from '@threadplane/react/render';
 
const text = (value: RenderValue) =>
  typeof value === 'string' || typeof value === 'number' ? String(value) : '';
function Waiting() {
  return <p className="dashboard-empty">Waiting for dashboard data…</p>;
}
function DashboardGrid({ children }: RenderViewProps) {
  return (
    <div className="dashboard-grid" data-dashboard-view="dashboard_grid">
      {children}
    </div>
  );
}
function Container({ props, children }: RenderViewProps) {
  return (
    <div
      className="dashboard-container"
      data-dashboard-view="container"
      data-direction={props.direction === 'row' ? 'row' : 'column'}
      style={
        {
          '--dashboard-cols': Math.max(1, Children.count(children)),
        } as CSSProperties
      }
    >
      {children}
    </div>
  );
}
function StatCard({ props }: RenderViewProps) {
  return (
    <section
      className="dashboard-card"
      data-dashboard-view="stat_card"
      aria-label={text(props.label)}
    >
      <h3>{text(props.label)}</h3>
      {props.value === undefined || props.value === null ? (
        <Waiting />
      ) : (
        <p className="dashboard-metric">{text(props.value)}</p>
      )}
      {props.delta !== null && props.delta !== undefined && (
        <p
          className="dashboard-delta"
          data-trend={
            text(props.delta).startsWith('+')
              ? 'up'
              : /^[-−]/.test(text(props.delta))
              ? 'down'
              : 'flat'
          }
        >
          {text(props.delta)}
        </p>
      )}
    </section>
  );
}
type Point = Readonly<{ label: string; value: number }>;
function chartPoints(
  value: RenderValue,
  labelKey: string,
  valueKey: string
): readonly Point[] | undefined {
  if (!Array.isArray(value)) return;
  return value.map((row) => {
    const record = row as Readonly<Record<string, RenderValue>>;
    return { label: text(record[labelKey]), value: Number(record[valueKey]) };
  });
}
function Chart({
  props,
  kind,
}: RenderViewProps & { readonly kind: 'line' | 'bar' }) {
  const gradientId = useId();
  const title =
    text(props.title) ||
    (kind === 'line' ? 'On-time trend' : 'Flights by airline');
  const points = chartPoints(
    props.data,
    kind === 'line' ? 'month' : 'airline',
    kind === 'line' ? 'on_time_pct' : 'count'
  );
  const values = points?.map((point) => point.value) ?? [];
  const rawMinimum = kind === 'line' && values.length ? Math.min(...values) : 0;
  const rawMaximum =
    kind === 'line' && values.length
      ? Math.max(...values)
      : Math.max(1, ...values);
  const domainPadding =
    kind === 'line' && rawMinimum === rawMaximum
      ? Math.max(1, Math.abs(rawMinimum) * 0.05)
      : 0;
  const minimum = rawMinimum - domainPadding;
  const maximum = rawMaximum + domainPadding;
  const range = maximum - minimum || 1;
  const padding =
    kind === 'line'
      ? { top: 16, right: 32, bottom: 28, left: 64 }
      : { top: 28, right: 16, bottom: 28, left: 16 };
  const plotWidth = 400 - padding.left - padding.right;
  const plotHeight = 220 - padding.top - padding.bottom;
  const baseline = 220 - padding.bottom;
  const x = (index: number) =>
    (points?.length ?? 0) === 1
      ? padding.left + plotWidth / 2
      : padding.left + (index * plotWidth) / ((points?.length ?? 0) - 1);
  const y = (value: number) =>
    padding.top + plotHeight - ((value - minimum) / range) * plotHeight;
  const labelStep = Math.max(
    1,
    Math.ceil((((points?.length ?? 1) - 1) * 64) / plotWidth)
  );
  const labelCount =
    kind === 'line'
      ? Math.min(4, Math.floor(((points?.length ?? 1) - 1) / labelStep) + 1)
      : 4;
  const labelIndices =
    (points?.length ?? 0) <= labelCount
      ? points?.map((_, index) => index) ?? []
      : Array.from({ length: labelCount }, (_, index) =>
          Math.round((index * ((points?.length ?? 0) - 1)) / (labelCount - 1))
        );
  const numberLabel = (value: number) => {
    const scale = Math.abs(value) >= 1000 && range >= 1000 ? 1000 : 1;
    const precision = Math.min(
      10,
      Math.max(0, -Math.floor(Math.log10(range / (2 * scale))))
    );
    return `${(value / scale).toFixed(precision)}${scale === 1000 ? 'k' : ''}`;
  };
  const barGap = Math.min(12, plotWidth / (2 * (points?.length || 1)));
  const barWidth =
    (plotWidth - barGap * ((points?.length || 1) - 1)) / (points?.length || 1);
  const barX = (index: number) => padding.left + index * (barWidth + barGap);
  return (
    <section
      className="dashboard-card dashboard-chart"
      data-dashboard-view={kind === 'line' ? 'line_chart' : 'bar_chart'}
    >
      <h3>{title}</h3>
      {!points ? (
        <Waiting />
      ) : points.length === 0 ? (
        <p className="dashboard-empty">No chart data.</p>
      ) : (
        <>
          <svg viewBox="0 0 400 220" role="img" aria-label={title}>
            {kind === 'line' ? (
              <>
                {[maximum, (minimum + maximum) / 2, minimum].map(
                  (value, index) => {
                    const tickY = padding.top + (index * plotHeight) / 2;
                    return (
                      <g key={index}>
                        <line
                          x1={padding.left}
                          y1={tickY}
                          x2={400 - padding.right}
                          y2={tickY}
                          className="chart-axis"
                        />
                        <text
                          x={padding.left - 8}
                          y={tickY + 4}
                          textAnchor="end"
                        >
                          {numberLabel(value)}
                        </text>
                      </g>
                    );
                  }
                )}
                <path
                  d={`${points
                    .map(
                      (point, index) =>
                        `${index === 0 ? 'M' : 'L'} ${x(index)} ${y(
                          point.value
                        )}`
                    )
                    .join(' ')} L ${x(points.length - 1)} ${baseline} L ${x(
                    0
                  )} ${baseline} Z`}
                  fill={`url(#${gradientId})`}
                />
                <polyline
                  points={points
                    .map((point, index) => `${x(index)},${y(point.value)}`)
                    .join(' ')}
                  className="chart-line"
                />
                {labelIndices.map((index) => (
                  <text key={index} x={x(index)} y={214} textAnchor="middle">
                    {points[index].label}
                  </text>
                ))}
              </>
            ) : (
              <line
                x1={padding.left}
                y1={baseline}
                x2={400 - padding.right}
                y2={baseline}
                className="chart-axis"
              />
            )}
            {points.map((point, index) =>
              kind === 'line' ? (
                <circle
                  key={index}
                  cx={x(index)}
                  cy={y(point.value)}
                  r="3"
                  className="chart-point"
                >
                  <title>
                    {point.label}: {point.value}%
                  </title>
                </circle>
              ) : (
                <g key={index}>
                  <rect
                    x={barX(index)}
                    y={y(point.value)}
                    width={barWidth}
                    height={baseline - y(point.value)}
                    rx="3"
                    fill={`url(#${gradientId})`}
                    className="chart-bar"
                  >
                    <title>
                      {point.label}: {point.value}
                    </title>
                  </rect>
                  {barWidth >= 36 && (
                    <text
                      x={barX(index) + barWidth / 2}
                      y={y(point.value) - 6}
                      textAnchor="middle"
                    >
                      {point.value.toLocaleString()}
                    </text>
                  )}
                  {labelIndices.includes(index) && (
                    <text
                      x={barX(index) + barWidth / 2}
                      y={baseline + 16}
                      textAnchor="middle"
                    >
                      {point.label}
                    </text>
                  )}
                </g>
              )
            )}
            <defs>
              <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="0%"
                  stopColor="var(--dashboard-chart-color)"
                  stopOpacity={kind === 'line' ? 0.28 : 1}
                />
                <stop
                  offset="100%"
                  stopColor="var(--dashboard-chart-color)"
                  stopOpacity={kind === 'line' ? 0 : 0.75}
                />
              </linearGradient>
            </defs>
          </svg>
          <details className="dashboard-chart-data">
            <summary>View chart data</summary>
            <table aria-label={`${title} data`}>
              <thead>
                <tr>
                  <th scope="col">{kind === 'line' ? 'Month' : 'Airline'}</th>
                  <th scope="col">
                    {kind === 'line' ? 'On time (%)' : 'Flights'}
                  </th>
                </tr>
              </thead>
              <tbody>
                {points.map((point, index) => (
                  <tr key={index}>
                    <th scope="row">{point.label}</th>
                    <td>{point.value}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </details>
        </>
      )}
    </section>
  );
}
function LineChart(props: RenderViewProps) {
  return <Chart {...props} kind="line" />;
}
function BarChart(props: RenderViewProps) {
  return <Chart {...props} kind="bar" />;
}
const columnLabels: Readonly<Record<string, string>> = {
  flight_number: 'Flight',
  type: 'Disruption',
  minutes: 'Minutes',
  route: 'Route',
  date: 'Date',
};
function DataGrid({ props }: RenderViewProps) {
  const title = text(props.title) || 'Recent disruptions';
  const rows = Array.isArray(props.rows) ? props.rows : undefined;
  const columns = (props.columns ?? []) as readonly string[];
  return (
    <section className="dashboard-card" data-dashboard-view="data_grid">
      <h3>{title}</h3>
      {!rows ? (
        <Waiting />
      ) : rows.length === 0 ? (
        <p className="dashboard-empty">No disruptions.</p>
      ) : (
        <div
          className="dashboard-table-scroll"
          tabIndex={0}
          role="region"
          aria-label={`${title} table`}
        >
          <table aria-label={title}>
            <thead>
              <tr>
                {columns.map((column) => (
                  <th key={column} scope="col">
                    {columnLabels[column]}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((row, index) => (
                <tr key={index}>
                  {columns.map((column) => (
                    <td key={column}>
                      {text(
                        (row as Readonly<Record<string, RenderValue>>)[column]
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </section>
  );
}
 
/** Only the six validated, read-only authored dashboard views are registered. */
export const dashboardRegistry: ReactRenderRegistry = Object.freeze({
  dashboard_grid: DashboardGrid,
  container: Container,
  stat_card: StatCard,
  line_chart: LineChart,
  bar_chart: BarChart,
  data_grid: DataGrid,
});

export type MetricData = {
  readonly value: string | number;
  readonly delta: string | null;
};
export interface DashboardState {
  readonly on_time?: MetricData | null;
  readonly flights_today?: MetricData | null;
  readonly avg_delay?: MetricData | null;
  readonly load_factor?: MetricData | null;
  readonly on_time_trend?:
    | readonly Readonly<{ month: string; on_time_pct: number }>[]
    | null;
  readonly flights_by_airline?:
    | readonly Readonly<{ airline: string; count: number }>[]
    | null;
  readonly recent_disruptions?:
    | readonly Readonly<{
        flight_number: string;
        type: string;
        minutes: number;
        route: string;
        date: string;
      }>[]
    | null;
}
 
export function plainRecord(value: unknown): value is Record<string, unknown> {
  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
  const prototype = Object.getPrototypeOf(value);
  return (
    (prototype === Object.prototype || prototype === null) &&
    Object.values(Object.getOwnPropertyDescriptors(value)).every((descriptor) =>
      Object.hasOwn(descriptor, 'value')
    )
  );
}
 
export function dashboardText(value: unknown): value is string {
  return typeof value === 'string' && value.length > 0 && value.length <= 512;
}
 
/** Capture dense ordinary arrays without invoking caller-owned iteration. */
export function arrayData(value: unknown): readonly unknown[] | undefined {
  if (!Array.isArray(value) || Object.getPrototypeOf(value) !== Array.prototype)
    return;
  const descriptors = Object.getOwnPropertyDescriptors(
    value
  ) as unknown as Record<string, PropertyDescriptor>;
  const length = descriptors.length.value;
  if (
    !Number.isInteger(length) ||
    length < 0 ||
    length > 100 ||
    Reflect.ownKeys(descriptors).length !== length + 1
  )
    return;
  const items: unknown[] = [];
  for (let index = 0; index < length; index++) {
    const descriptor = descriptors[String(index)];
    if (!descriptor || !Object.hasOwn(descriptor, 'value')) return;
    items.push(descriptor.value);
  }
  return Object.freeze(items);
}
 
function finite(value: unknown): value is number {
  return typeof value === 'number' && Number.isFinite(value);
}
 
function exact(value: Record<string, unknown>, keys: readonly string[]) {
  return (
    Object.keys(value).length === keys.length &&
    keys.every((key) => Object.hasOwn(value, key))
  );
}
 
function metric(value: unknown): MetricData | undefined {
  if (
    !plainRecord(value) ||
    !exact(value, ['value', 'delta']) ||
    (!dashboardText(value.value) && !finite(value.value)) ||
    (value.delta !== null && !dashboardText(value.delta))
  )
    return;
  return Object.freeze({ value: value.value, delta: value.delta });
}
 
type FieldSchema = Readonly<Record<string, (value: unknown) => boolean>>;
function rows(
  value: unknown,
  schema: FieldSchema
): readonly Readonly<Record<string, unknown>>[] | undefined {
  const items = arrayData(value);
  if (!items) return;
  const keys = Object.keys(schema),
    result: Readonly<Record<string, unknown>>[] = [];
  for (const item of items) {
    if (
      !plainRecord(item) ||
      !exact(item, keys) ||
      !keys.every((key) => schema[key](item[key]))
    )
      return;
    result.push(
      Object.freeze(Object.fromEntries(keys.map((key) => [key, item[key]])))
    );
  }
  return Object.freeze(result);
}
 
const nonnegative = (value: unknown) => finite(value) && value >= 0;
const percentage = (value: unknown) =>
  finite(value) && value >= 0 && value <= 100;
const fields = Object.freeze({
  on_time: metric,
  flights_today: metric,
  avg_delay: metric,
  load_factor: metric,
  on_time_trend: (value: unknown) =>
    rows(value, { month: dashboardText, on_time_pct: percentage }),
  flights_by_airline: (value: unknown) =>
    rows(value, { airline: dashboardText, count: nonnegative }),
  recent_disruptions: (value: unknown) =>
    rows(value, {
      flight_number: dashboardText,
      type: dashboardText,
      minutes: nonnegative,
      route: dashboardText,
      date: dashboardText,
    }),
});
 
/** Captures supported native state fields; the session keeps the complete state. */
export function dashboardState(state: unknown): DashboardState | undefined {
  try {
    if (!plainRecord(state)) return;
    const selected: Record<string, unknown> = {};
    for (const [key, capture] of Object.entries(fields)) {
      if (!Object.hasOwn(state, key)) continue;
      const value = state[key] === null ? null : capture(state[key]);
      if (value === undefined) return;
      selected[key] = value;
    }
    return Object.freeze(selected) as DashboardState;
  } catch {
    return undefined;
  }
}

import type {
  RenderElementData,
  RenderSpecData,
} from '@threadplane/react/render';
import type { PlainValue } from '@threadplane/core';
import {
  arrayData,
  dashboardState,
  dashboardText,
  plainRecord,
} from './dashboard-data';
 
const metricKeys = ['on_time', 'flights_today', 'avg_delay', 'load_factor'];
const disruptionKeys = ['flight_number', 'type', 'minutes', 'route', 'date'];
const safeKey = (value: unknown): value is string =>
  dashboardText(value) &&
  value.length <= 80 &&
  !['__proto__', 'prototype', 'constructor'].includes(value);
const finite = (value: unknown) =>
  typeof value === 'number' && Number.isFinite(value);
 
function binding(value: unknown, paths: readonly string[]) {
  return (
    plainRecord(value) &&
    Object.keys(value).length === 1 &&
    typeof value.$state === 'string' &&
    paths.includes(value.$state)
  );
}
function scalar(value: unknown, suffix: 'value' | 'delta') {
  return (
    value === null ||
    dashboardText(value) ||
    (suffix === 'value' && finite(value)) ||
    binding(
      value,
      metricKeys.map((key) => `/${key}/${suffix}`)
    )
  );
}
function data(
  value: unknown,
  key: 'on_time_trend' | 'flights_by_airline' | 'recent_disruptions'
) {
  return (
    value === null ||
    binding(value, [`/${key}`]) ||
    (Array.isArray(value) && dashboardState({ [key]: value }) !== undefined)
  );
}
function columns(value: unknown) {
  const items = arrayData(value);
  return (
    !!items &&
    items.length > 0 &&
    items.length <= disruptionKeys.length &&
    items.every(
      (key) => typeof key === 'string' && disruptionKeys.includes(key)
    ) &&
    new Set(items).size === items.length
  );
}
 
type PropRule = (value: unknown) => boolean;
interface ViewSchema {
  readonly required: readonly string[];
  readonly props: Readonly<Record<string, PropRule>>;
  readonly children: boolean;
}
const catalog: Readonly<Record<string, ViewSchema>> = Object.freeze({
  dashboard_grid: { required: [], props: {}, children: true },
  container: {
    required: [],
    props: { direction: (value) => value === 'row' || value === 'column' },
    children: true,
  },
  stat_card: {
    required: ['label'],
    props: {
      label: dashboardText,
      value: (value) => scalar(value, 'value'),
      delta: (value) => scalar(value, 'delta'),
    },
    children: false,
  },
  line_chart: {
    required: ['data', 'xKey', 'yKey'],
    props: {
      title: dashboardText,
      data: (value) => data(value, 'on_time_trend'),
      xKey: (value) => value === 'month',
      yKey: (value) => value === 'on_time_pct',
    },
    children: false,
  },
  bar_chart: {
    required: ['data', 'labelKey', 'valueKey'],
    props: {
      title: dashboardText,
      data: (value) => data(value, 'flights_by_airline'),
      labelKey: (value) => value === 'airline',
      valueKey: (value) => value === 'count',
    },
    children: false,
  },
  data_grid: {
    required: ['rows', 'columns'],
    props: {
      title: dashboardText,
      rows: (value) => data(value, 'recent_disruptions'),
      columns,
    },
    children: false,
  },
});
 
function own(value: unknown): PlainValue {
  if (Array.isArray(value)) {
    const items = arrayData(value);
    if (!items) throw new Error('Unsupported dashboard array');
    return Object.freeze(items.map(own));
  }
  if (plainRecord(value))
    return Object.freeze(
      Object.fromEntries(
        Object.entries(value).map(([key, item]) => [key, own(item)])
      )
    );
  return value as PlainValue;
}
 
function children(value: unknown): readonly string[] | undefined {
  const items = arrayData(value);
  if (!items || !items.every(safeKey) || new Set(items).size !== items.length)
    return;
  return Object.freeze([...items]);
}
 
/** Validate and own the existing authored catalog before presenting it. */
export function dashboardSpec(value: unknown): RenderSpecData | undefined {
  try {
    if (
      !plainRecord(value) ||
      Object.keys(value).length !== 2 ||
      !safeKey(value.root) ||
      !plainRecord(value.elements) ||
      !Object.hasOwn(value.elements, value.root)
    )
      return;
    const entries = Object.entries(value.elements);
    if (entries.length === 0 || entries.length > 100) return;
    const elements: Record<string, RenderElementData> = {};
    for (const [key, element] of entries) {
      if (
        !safeKey(key) ||
        !plainRecord(element) ||
        Object.keys(element).some(
          (name) => !['type', 'props', 'children'].includes(name)
        ) ||
        typeof element.type !== 'string' ||
        !Object.hasOwn(catalog, element.type)
      )
        return;
      const schema = catalog[element.type],
        props = element.props === undefined ? {} : element.props;
      if (
        !plainRecord(props) ||
        !schema.required.every((name) => Object.hasOwn(props, name)) ||
        Object.keys(props).some(
          (name) =>
            !Object.hasOwn(schema.props, name) ||
            !schema.props[name](props[name])
        )
      )
        return;
      const childKeys =
        element.children === undefined ? undefined : children(element.children);
      if (
        element.children !== undefined &&
        (!childKeys || (!schema.children && childKeys.length))
      )
        return;
      elements[key] = Object.freeze({
        type: element.type,
        props: own(props) as Readonly<Record<string, PlainValue>>,
        ...(childKeys ? { children: childKeys } : {}),
      });
    }
    const visited = new Set<string>(),
      visiting = new Set<string>();
    function visit(key: string): boolean {
      if (!Object.hasOwn(elements, key) || visiting.has(key)) return false;
      if (visited.has(key)) return true;
      visiting.add(key);
      for (const child of elements[key].children ?? [])
        if (!visit(child)) return false;
      visiting.delete(key);
      visited.add(key);
      return true;
    }
    if (!Object.keys(elements).every(visit)) return;
    return Object.freeze({
      root: value.root,
      elements: Object.freeze(elements),
    });
  } catch {
    return undefined;
  }
}

import type { Session, TextTranscriptRow } from '@threadplane/ag-ui';
import type { RenderSpecData } from '@threadplane/react/render';
import {
  dashboardState,
  dashboardText,
  plainRecord,
  type DashboardState,
} from './dashboard-data';
import { dashboardSpec } from './dashboard-spec';
 
export type NativeSnapshot = ReturnType<Session['getSnapshot']>;
export interface OwnedTurn {
  readonly threadId: string;
  readonly runId: string;
  readonly human: TextTranscriptRow;
  readonly prefix: NativeSnapshot['transcript'];
}
export interface DashboardProjection {
  readonly ownerId: string | null;
  readonly spec: RenderSpecData | null;
  readonly state: DashboardState;
}
type Transcript = NativeSnapshot['transcript'];
type Call = Extract<Transcript[number], { role: 'assistant' }>['toolCalls'];
const names = [
  'render_spec',
  'query_airline_kpis',
  'query_on_time_trend',
  'query_flights_by_airline',
  'query_recent_disruptions',
];
function parsed(text: string): unknown {
  try {
    return text.length <= 100_000 ? JSON.parse(text) : undefined;
  } catch {
    return undefined;
  }
}
function same(
  left: unknown,
  right: unknown,
  valid: () => boolean,
  depth = 0
): boolean {
  if (!valid() || depth > 100) return false;
  if (Object.is(left, right)) return true;
  if (Array.isArray(left) && Array.isArray(right))
    return (
      left.length === right.length &&
      left.every((item, index) => same(item, right[index], valid, depth + 1)) &&
      valid()
    );
  if (!plainRecord(left) || !plainRecord(right)) return false;
  const keys = Object.keys(left);
  return (
    keys.length === Object.keys(right).length &&
    keys.every(
      (key) =>
        Object.hasOwn(right, key) &&
        same(left[key], right[key], valid, depth + 1)
    ) &&
    valid()
  );
}
function structural(transcript: Transcript, valid: () => boolean) {
  const ids = new Set<string>(),
    calls = new Set<string>(),
    results = new Set<string>();
  for (const message of transcript) {
    if (
      !valid() ||
      typeof message.id !== 'string' ||
      !message.id ||
      ids.has(message.id) ||
      typeof message.subagentRunId === 'string' ||
      !['user', 'assistant', 'tool'].includes(message.role)
    )
      return false;
    ids.add(message.id);
    if (
      message.role === 'user' &&
      (typeof message.content !== 'string' || !message.content)
    )
      return false;
    if (message.role === 'assistant') {
      if (
        message.content !== undefined &&
        message.content !== null &&
        typeof message.content !== 'string'
      )
        return false;
      for (const call of message.toolCalls ?? []) {
        if (
          !call.id ||
          calls.has(call.id) ||
          call.type !== 'function' ||
          !names.includes(call.function.name) ||
          typeof call.function.arguments !== 'string'
        )
          return false;
        calls.add(call.id);
      }
    }
    if (message.role === 'tool') {
      if (
        typeof message.content !== 'string' ||
        !calls.has(message.toolCallId) ||
        results.has(message.toolCallId)
      )
        return false;
      results.add(message.toolCallId);
    }
  }
  return valid();
}
function read(snapshot: NativeSnapshot, valid: () => boolean) {
  if (!valid()) return;
  const { status, run, transcript, decision, subagents } = snapshot;
  if (
    !valid() ||
    decision ||
    subagents.length ||
    run?.legacyInterrupt ||
    !structural(transcript, valid) ||
    status === 'error' ||
    (run?.outcome !== undefined && run.outcome !== 'success') ||
    run?.terminal?.type === 'RUN_ERROR' ||
    run?.terminal?.type === 'CUSTOM' ||
    (run?.terminal?.type === 'RUN_FINISHED' &&
      (run.terminal.runId !== run.id ||
        (run.terminal.outcome !== undefined &&
          (run.terminal.outcome.type !== 'success' ||
            run.terminal.outcome.pendingToolCallIds?.length))))
  )
    return;
  return valid() ? { status, run, transcript } : undefined;
}
export function unsupportedSnapshot(
  snapshot: NativeSnapshot,
  valid: () => boolean = () => true
): boolean {
  return !read(snapshot, valid);
}
export function captureTurn(
  snapshot: NativeSnapshot,
  thread: string,
  previous: string | undefined,
  prefix: Transcript,
  valid: () => boolean = () => true
): OwnedTurn | undefined {
  const state = read(snapshot, valid);
  if (
    !state ||
    state.status !== 'running' ||
    !thread ||
    !state.run?.id ||
    state.run.id === previous ||
    state.run.outcome !== undefined ||
    state.transcript.length !== prefix.length + 1 ||
    !prefix.every((row, index) => same(row, state.transcript[index], valid)) ||
    !valid()
  )
    return;
  const human = state.transcript.at(-1);
  if (human?.role !== 'user' || typeof human.content !== 'string' || !valid())
    return;
  return Object.freeze({
    threadId: thread,
    runId: state.run.id,
    prefix,
    human: Object.freeze({
      id: human.id,
      role: 'user',
      content: human.content,
    }),
  });
}
function argumentsFor(
  call: NonNullable<Call>[number]
): Record<string, unknown> | undefined {
  const args = parsed(call.function.arguments),
    name = call.function.name;
  if (!plainRecord(args)) return;
  if (name === 'render_spec') return dashboardSpec(args) ? args : undefined;
  const allowed =
    name === 'query_airline_kpis'
      ? []
      : name === 'query_on_time_trend'
      ? ['months']
      : name === 'query_flights_by_airline'
      ? ['airlines']
      : ['limit', 'type'];
  if (Object.keys(args).some((key) => !allowed.includes(key))) return;
  for (const key of ['months', 'limit'])
    if (
      Object.hasOwn(args, key) &&
      (typeof args[key] !== 'number' ||
        !Number.isInteger(args[key]) ||
        args[key] < 1 ||
        args[key] > 100)
    )
      return;
  if (
    Object.hasOwn(args, 'airlines') &&
    args.airlines !== null &&
    (!Array.isArray(args.airlines) ||
      args.airlines.length > 100 ||
      !args.airlines.every(dashboardText))
  )
    return;
  if (
    Object.hasOwn(args, 'type') &&
    args.type !== null &&
    !dashboardText(args.type)
  )
    return;
  return args;
}
function validResult(
  owner: Extract<Transcript[number], { role: 'assistant' }>,
  call: NonNullable<Call>[number],
  args: Record<string, unknown>,
  text: string,
  valid: () => boolean
) {
  const name = call.function.name;
  if (name === 'render_spec') {
    if (text === 'rendered')
      return same(
        parsed(typeof owner.content === 'string' ? owner.content : ''),
        args,
        valid
      );
    return (
      typeof owner.content === 'string' &&
      owner.content.trim().length > 0 &&
      same(parsed(text), args, valid)
    );
  }
  const value = parsed(text);
  if (name === 'query_airline_kpis') {
    const keys = ['on_time', 'flights_today', 'avg_delay', 'load_factor'];
    return (
      plainRecord(value) &&
      Object.keys(value).length === keys.length &&
      keys.every((key) => Object.hasOwn(value, key) && value[key] !== null) &&
      dashboardState(value) !== undefined
    );
  }
  const key =
    name === 'query_on_time_trend'
      ? 'on_time_trend'
      : name === 'query_flights_by_airline'
      ? 'flights_by_airline'
      : 'recent_disruptions';
  if (!Array.isArray(value) || dashboardState({ [key]: value }) === undefined)
    return false;
  if (
    key === 'on_time_trend' &&
    typeof args.months === 'number' &&
    value.length > args.months
  )
    return false;
  const airlines = args.airlines;
  if (
    key === 'flights_by_airline' &&
    Array.isArray(airlines) &&
    airlines.length > 0 &&
    value.some((row) => !airlines.includes(row.airline))
  )
    return false;
  if (
    key === 'recent_disruptions' &&
    ((typeof args.limit === 'number' && value.length > args.limit) ||
      (typeof args.type === 'string' &&
        value.some((row) => row.type !== args.type)))
  )
    return false;
  return valid();
}
function settled(messages: Transcript, valid: () => boolean) {
  if (messages.length < 2 || messages[0].role !== 'user') return false;
  let index = 1;
  while (index < messages.length) {
    if (!valid()) return false;
    const owner = messages[index++];
    if (owner.role !== 'assistant') return false;
    const calls = owner.toolCalls ?? [];
    if (!calls.length) {
      if (index === messages.length)
        return (
          typeof owner.content === 'string' &&
          owner.content.length > 0 &&
          valid()
        );
      continue;
    }
    const pending = new Map(
      calls.map((call) => [call.id, { call, args: argumentsFor(call) }])
    );
    if ([...pending.values()].some((item) => !item.args)) return false;
    while (index < messages.length && messages[index].role === 'tool') {
      const result = messages[index++];
      if (result.role !== 'tool' || typeof result.content !== 'string')
        return false;
      const match = pending.get(result.toolCallId);
      if (
        !match?.args ||
        result.id !== result.toolCallId ||
        !validResult(owner, match.call, match.args, result.content, valid)
      )
        return false;
      pending.delete(result.toolCallId);
    }
    if (pending.size || !valid()) return false;
  }
  return false;
}
export function confirmTranscript(
  snapshot: NativeSnapshot,
  turn: OwnedTurn,
  valid: () => boolean = () => true
): Transcript | undefined {
  const state = read(snapshot, valid),
    terminal = state?.run?.terminal;
  if (
    !state ||
    state.status !== 'idle' ||
    state.run?.id !== turn.runId ||
    state.run.outcome !== 'success' ||
    terminal?.type !== 'RUN_FINISHED' ||
    terminal.threadId !== turn.threadId ||
    terminal.runId !== turn.runId ||
    !turn.prefix.every((row, index) =>
      same(row, state.transcript[index], valid)
    ) ||
    !same(state.transcript[turn.prefix.length], turn.human, valid) ||
    !settled(state.transcript.slice(turn.prefix.length), valid) ||
    !valid()
  )
    return;
  return state.transcript;
}
export function selectDashboard(
  snapshot: NativeSnapshot,
  turn: OwnedTurn,
  previous?: DashboardProjection,
  valid: () => boolean = () => true
): DashboardProjection | undefined {
  const transcript = confirmTranscript(snapshot, turn, valid);
  if (!transcript || !valid()) return;
  const state = dashboardState(snapshot.state);
  if (!state || !valid()) return;
  let spec = previous?.spec ?? null,
    ownerId = previous?.ownerId ?? null;
  for (const owner of transcript.slice(turn.prefix.length)) {
    if (!valid()) return;
    if (owner.role !== 'assistant') continue;
    for (const call of owner.toolCalls ?? [])
      if (call.function.name === 'render_spec') {
        const selected = dashboardSpec(parsed(call.function.arguments));
        if (!selected || !valid()) return;
        spec = selected;
        ownerId = owner.id;
      }
  }
  return valid() ? Object.freeze({ spec, ownerId, state }) : undefined;
}