React chat generative UI 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 { useCallback, useEffect, useRef, useState } from 'react';
import { useAgent } from '@threadplane/react';
import {
  ChatInput,
  MessageList,
  Reasoning,
  ToolObservation,
  type ChatInputHandle,
} from '@threadplane/react/chat';
import { Markdown } from '@threadplane/react/markdown';
import { RenderSpec, type RenderSpecProps } from '@threadplane/react/render';
import type { MessageRow } from '@threadplane/content/messages';
import {
  createConnectedApplication,
  type GenerativeUiConnection,
} from './connection';
import type { GenerativeUiSnapshot } from './application';
import { dashboardRegistry } from './dashboard-views';
 
function UnsupportedView() {
  return <p role="alert">This dashboard view is unavailable.</p>;
}
const literal = (value: unknown) =>
  typeof value === 'string' ? value : JSON.stringify(value, null, 2);
/** Layout authority belongs to the confirmed parent; data is shared by every retained layout. */
export function renderMessage(row: MessageRow, snapshot: GenerativeUiSnapshot) {
  const surface = snapshot.surfaces.find((item) => item.messageId === row.id);
  const notice = snapshot.notices.find((item) => item.messageId === row.id);
  const calls = snapshot.toolCalls.filter((call) =>
    row.message.toolCallIds?.includes(call.id)
  );
  const label =
    row.role === 'user'
      ? 'You'
      : row.role === 'assistant'
      ? 'Assistant'
      : row.role === 'tool'
      ? 'Tool result'
      : 'System';
  return (
    <article
      aria-label={label}
      className={`tp-chat-message tp-chat-message--${row.role}`}
    >
      <p className="tp-chat-message__role">{label}</p>
      {row.role === 'assistant' && row.reasoning && (
        <Reasoning snapshot={row.reasoning} />
      )}
      {surface ? null : row.role === 'tool' ? (
        <details>
          <summary>Server tool result</summary>
          <pre>{row.message.content}</pre>
        </details>
      ) : (
        <Markdown snapshot={row.markdown} />
      )}
      {surface && (
        <div data-dashboard-spec-owner={row.id}>
          <RenderSpec
            spec={surface.spec}
            registry={dashboardRegistry}
            state={snapshot.dashboard as RenderSpecProps['state']}
            loading={snapshot.busy}
            fallback={UnsupportedView}
          />
        </div>
      )}
      {surface && (
        <details>
          <summary>Layout source</summary>
          <pre>{row.message.content}</pre>
        </details>
      )}
      {notice && <p role="status">{notice.text}</p>}
      {calls.map((call) => (
        <details key={call.id} className="tool-inspection">
          <summary>
            {call.name} · {call.status}
          </summary>
          <ToolObservation
            name={call.name}
            argumentsText={literal(call.args) ?? ''}
            resultText={
              call.status === 'complete'
                ? literal(call.result)
                : call.status === 'error'
                ? call.error
                : undefined
            }
            label={`Observed tool: ${call.status}`}
          />
        </details>
      ))}
    </article>
  );
}
type Props = {
  readonly connection: GenerativeUiConnection;
  readonly onReady: () => void;
};
/** Replace the owner on connection changes without putting credentials in React keys. */
export function GenerativeUiDemo(props: Props) {
  const fingerprint = JSON.stringify([
    props.connection.apiUrl,
    Object.entries(props.connection.headers).sort(([a], [b]) =>
      a.localeCompare(b)
    ),
  ]);
  const identity = useRef({ fingerprint, version: 0 });
  if (identity.current.fingerprint !== fingerprint)
    identity.current = { fingerprint, version: identity.current.version + 1 };
  return <GenerativeUiOwner key={identity.current.version} {...props} />;
}
function GenerativeUiOwner({ connection, onReady }: Props) {
  const [application] = useState(() => createConnectedApplication(connection));
  const [draft, setDraft] = useState('');
  const composer = useRef<ChatInputHandle>(null);
  const resetButton = useRef<HTMLButtonElement>(null);
  const focusAfterReset = useRef(false);
  const snapshot = useAgent(application);
  useEffect(() => {
    if (!focusAfterReset.current || snapshot.busy) return;
    focusAfterReset.current = false;
    const document = resetButton.current?.ownerDocument;
    if (
      document &&
      (document.activeElement === resetButton.current ||
        document.activeElement === document.body)
    ) {
      composer.current?.focus();
    }
  }, [snapshot.viewGeneration, snapshot.busy]);
  useEffect(() => {
    onReady();
  }, [onReady]);
  useEffect(
    () => () => {
      void application.dispose();
    },
    [application]
  );
  const renderRow = useCallback(
    (row: MessageRow) => renderMessage(row, snapshot),
    [snapshot]
  );
  const currentView = () =>
    application.getSnapshot().viewGeneration === snapshot.viewGeneration;
  const status = snapshot.busy
    ? snapshot.activity === 'creating'
      ? 'Creating conversation…'
      : snapshot.activity === 'confirming'
      ? 'Confirming saved dashboard…'
      : snapshot.activity === 'replacing'
      ? 'Releasing conversation…'
      : 'Receiving response…'
    : !snapshot.canSubmit
    ? 'Start a new conversation to continue.'
    : snapshot.outcome === 'success'
    ? 'Response saved.'
    : 'Ready.';
  return (
    <ExampleLayout className="dashboard-demo">
      <header>
        <div>
          <h1>Chat generative UI</h1>
        </div>
        <button
          ref={resetButton}
          type="button"
          onClick={() => {
            if (currentView()) {
              focusAfterReset.current = true;
              setDraft('');
              void application.newConversation();
            }
          }}
        >
          New conversation
        </button>
      </header>
      <p>
        Explore airline operations with fixture data. Confirmed dashboards stay
        in the conversation and refresh together when a new update is saved.
      </p>
      {snapshot.rows.length === 0 && (
        <div className="seed-prompts" aria-label="Example prompts">
          {[
            {
              label: 'Show dashboard',
              text: 'Show me a dashboard of airline operations.',
            },
            {
              label: 'Cancelled flights',
              text: 'Filter to only the cancelled flights.',
            },
          ].map((prompt) => (
            <button
              type="button"
              key={prompt.label}
              disabled={snapshot.busy || !snapshot.canSubmit}
              onClick={() => {
                const current = application.getSnapshot();
                if (currentView() && !current.busy && current.canSubmit) {
                  setDraft(prompt.text);
                  composer.current?.focus();
                }
              }}
            >
              {prompt.label}
            </button>
          ))}
        </div>
      )}
      <MessageList
        key={`messages:${snapshot.viewGeneration}`}
        rows={snapshot.rows}
        renderMessage={renderRow}
        label="Conversation"
      />
      <ExampleFooter>
        {snapshot.error && <p role="alert">{snapshot.error}</p>}
        <ChatInput
          ref={composer}
          key={`composer:${snapshot.viewGeneration}`}
          label="Message"
          value={draft}
          onValueChange={(text) => {
            if (currentView()) setDraft(text);
          }}
          placeholder="Ask about airline operations…"
          hint="Enter to send. Shift+Enter adds a new line."
          busy={snapshot.busy}
          disabled={snapshot.busy || !snapshot.canSubmit}
          onStop={
            snapshot.busy && snapshot.activity !== 'replacing'
              ? () => {
                  if (currentView()) void application.stop();
                }
              : undefined
          }
          onSubmit={(text) => {
            const current = application.getSnapshot();
            if (
              !currentView() ||
              current.busy ||
              !current.canSubmit ||
              !text.trim()
            )
              return false;
            void application.submit(text);
            return currentView() && application.getSnapshot().busy;
          }}
        />
        <p role="status">{status}</p>
      </ExampleFooter>
    </ExampleLayout>
  );
}

import type {
  AgentSession,
  CompleteOutcome,
  Message,
  ToolCall,
} from '@threadplane/core';
import {
  createMessageContent,
  type MessageRow,
} from '@threadplane/content/messages';
import { copyData, dataKey, type DashboardState } from './dashboard-data';
import {
  createObservation,
  messageKey,
  type GenerativeUiState,
} from './observation';
import {
  captureTerminal,
  checkpointSource,
  type Checkpoint,
  type Surface,
  type Notice,
} from './terminal';
export interface GenerativeUiSession extends Omit<AgentSession, 'getSnapshot'> {
  getSnapshot(): GenerativeUiState;
  load(options?: { readonly signal?: AbortSignal }): Promise<void>;
}
export interface GenerativeUiClient {
  createThread(signal: AbortSignal): Promise<string>;
  sessionFactory(threadId: string): GenerativeUiSession;
  readCheckpoint(source: Checkpoint, signal: AbortSignal): Promise<unknown>;
}
export interface GenerativeUiSnapshot {
  readonly threadId: string | null;
  readonly rows: readonly MessageRow[];
  readonly messages: readonly Message[];
  readonly toolCalls: readonly ToolCall[];
  readonly dashboard: DashboardState;
  readonly surfaces: readonly Surface[];
  readonly notices: readonly Notice[];
  readonly activity:
    | 'idle'
    | 'creating'
    | 'running'
    | 'confirming'
    | 'replacing';
  readonly busy: boolean;
  readonly canSubmit: boolean;
  readonly outcome: CompleteOutcome | null;
  readonly error: string | null;
  readonly viewGeneration: number;
}
const empty = (): GenerativeUiSnapshot =>
  Object.freeze({
    threadId: null,
    rows: Object.freeze([]),
    messages: Object.freeze([]),
    toolCalls: Object.freeze([]),
    dashboard: Object.freeze({}),
    surfaces: Object.freeze([]),
    notices: Object.freeze([]),
    activity: 'idle',
    busy: false,
    canSubmit: true,
    outcome: null,
    error: null,
    viewGeneration: 0,
  });
/** Own one lazy conversation and publish dashboard/layout authority atomically. */
export function createGenerativeUiApplication(options: GenerativeUiClient) {
  type Owner = {
    id: string;
    session: GenerativeUiSession;
    content: ReturnType<typeof createMessageContent>;
    closed: boolean;
    unsafe: boolean;
    release?: () => void;
    messages: readonly Message[];
    tools: readonly ToolCall[];
    observation?: ReturnType<typeof createObservation>;
    saving: boolean;
    generations: string[];
  };
  let snapshot = empty(),
    owner: Owner | undefined,
    operation: AbortController | undefined,
    disposed = false,
    disposal: Promise<void> | undefined;
  const listeners = new Set<() => void>(),
    cleanups = new Set<Promise<void>>();
  function publish(update: Partial<GenerativeUiSnapshot>) {
    if (disposed) return;
    snapshot = Object.freeze({ ...snapshot, ...update });
    for (const notify of [...listeners]) notify();
  }
  function bounded(work: () => void | Promise<void>) {
    let timer: ReturnType<typeof setTimeout>;
    return Promise.race([
      Promise.resolve()
        .then(work)
        .catch(() => undefined),
      new Promise<void>((resolve) => {
        timer = setTimeout(resolve, 2000);
      }),
    ]).finally(() => clearTimeout(timer));
  }
  function close(selected: Owner) {
    if (selected.closed) return Promise.resolve();
    selected.closed = true;
    selected.release?.();
    selected.content.dispose();
    const cleanup = bounded(() => selected.session.dispose());
    cleanups.add(cleanup);
    void cleanup.then(() => cleanups.delete(cleanup));
    return cleanup;
  }
  function detach() {
    const previous = owner;
    owner = undefined;
    return previous ? close(previous) : Promise.resolve();
  }
  function blocked() {
    publish({
      canSubmit: false,
      outcome: 'error',
      error:
        'This update could not be confirmed. The last confirmed dashboard is retained. Start a new conversation to continue.',
    });
  }
  function read(
    selected: Owner,
    valid: () => boolean
  ): GenerativeUiState | undefined {
    if (!valid()) return;
    const source = selected.session.getSnapshot();
    if (!valid()) return;
    let state: GenerativeUiState;
    try {
      state = copyData(source) as GenerativeUiState;
      if (selected.observation)
        state = selected.observation.observe(state, selected.saving);
      else if (
        !state ||
        state.error ||
        state.status !== 'idle' ||
        state.interrupts.length ||
        state.subgraphs.length ||
        state.messages.length !== selected.messages.length ||
        state.messages.some(
          (m, i) => messageKey(m) !== messageKey(selected.messages[i])
        ) ||
        dataKey(state.toolCalls) !== dataKey(selected.tools)
      )
        throw new Error('Changed confirmed state');
    } catch {
      selected.unsafe = true;
      if (valid()) blocked();
      return;
    }
    if (!valid()) return;
    const rows = selected.content.project(state);
    if (!valid()) return;
    publish({ rows, messages: state.messages, toolCalls: state.toolCalls });
    if (!valid()) return;
    if (selected.session.getSnapshot() !== source) {
      selected.unsafe = true;
      blocked();
      return;
    }
    return state;
  }
  async function submit(text: string) {
    if (disposed || snapshot.busy || !snapshot.canSubmit || !text.trim())
      return false;
    const admitted = new AbortController();
    operation = admitted;
    const current = () =>
      !disposed && operation === admitted && !admitted.signal.aborted;
    publish({
      busy: true,
      canSubmit: false,
      activity: owner ? 'running' : 'creating',
      outcome: null,
      error: null,
    });
    try {
      if (!current()) return false;
      if (!owner) {
        const id = await options.createThread(admitted.signal);
        if (!current()) return false;
        if (typeof id !== 'string' || !id)
          throw new Error('Unconfirmed thread');
        const session = options.sessionFactory(id),
          selected: Owner = {
            id,
            session,
            content: createMessageContent(),
            closed: false,
            unsafe: false,
            messages: [],
            tools: [],
            saving: false,
            generations: [],
          };
        if (!current()) {
          void close(selected);
          return false;
        }
        owner = selected;
        const release = session.subscribe(() => {
          if (owner === selected && !selected.closed && !disposed)
            read(
              selected,
              () =>
                owner === selected &&
                !selected.closed &&
                !disposed &&
                !operation?.signal.aborted
            );
        });
        selected.release = release;
        if (selected.closed) release();
        if (!current()) return false;
        publish({ threadId: id, activity: 'running' });
      }
      const selected = owner,
        valid = () => current() && owner === selected && !selected.closed;
      if (!read(selected, valid) || !valid() || selected.unsafe) {
        if (valid()) blocked();
        return false;
      }
      selected.observation = createObservation(
        text,
        selected.messages,
        selected.tools,
        selected.generations
      );
      selected.saving = false;
      if (!read(selected, valid) || !valid() || selected.unsafe) return false;
      const outcome = await selected.session.submit(text, {
        signal: admitted.signal,
      });
      if (!valid()) return false;
      const live = read(selected, valid);
      if (!valid()) return false;
      if (
        !live ||
        selected.unsafe ||
        outcome !== 'success' ||
        live.status !== 'idle' ||
        !selected.observation.human ||
        live.messages.some((m) => m.delivery.phase !== 'complete')
      ) {
        blocked();
        return false;
      }
      publish({ activity: 'confirming' });
      if (!valid()) return false;
      selected.saving = true;
      await selected.session.load({ signal: admitted.signal });
      if (!valid()) return false;
      const saved = read(selected, valid);
      if (!valid()) return false;
      const checkpoint =
        saved && checkpointSource(saved.history?.[0]?.checkpoint, selected.id);
      if (!saved || selected.unsafe || !checkpoint) {
        blocked();
        return false;
      }
      const raw = await options.readCheckpoint(checkpoint, admitted.signal);
      if (!valid()) return false;
      const latest = read(selected, valid);
      if (!valid()) return false;
      const confirmed =
        latest &&
        captureTerminal(
          latest,
          raw,
          selected.id,
          selected.observation,
          snapshot.dashboard,
          snapshot.surfaces
        );
      if (!confirmed || selected.unsafe) {
        blocked();
        return false;
      }
      selected.messages = confirmed.messages;
      selected.tools = confirmed.tools;
      const generation = selected.observation.human?.delivery.generation;
      if (generation) selected.generations.push(generation);
      selected.observation = undefined;
      selected.saving = false;
      publish({
        dashboard: confirmed.dashboard,
        surfaces: confirmed.surfaces,
        notices: Object.freeze([...snapshot.notices, ...confirmed.notices]),
        outcome: 'success',
        canSubmit: true,
      });
      if (valid()) read(selected, valid);
      return true;
    } catch {
      if (current()) blocked();
      return false;
    } finally {
      if (current()) {
        operation = undefined;
        publish({ busy: false, activity: 'idle' });
      }
    }
  }
  async function stop() {
    if (disposed || !operation) return;
    operation.abort();
    const admitted = new AbortController();
    operation = admitted;
    const selected = owner,
      cleanup = detach();
    if (!disposed && operation === admitted)
      publish({
        busy: true,
        activity: 'replacing',
        canSubmit: false,
        outcome: 'aborted',
        error: null,
      });
    await Promise.all([cleanup, bounded(() => selected?.session.stop())]);
    if (!disposed && operation === admitted) {
      operation = undefined;
      publish({ busy: false, activity: 'idle' });
    }
  }
  async function newConversation() {
    if (disposed) return;
    operation?.abort();
    const admitted = new AbortController();
    operation = admitted;
    const cleanup = detach();
    if (!disposed && operation === admitted)
      publish({
        ...empty(),
        viewGeneration: snapshot.viewGeneration + 1,
        busy: true,
        canSubmit: false,
        activity: 'replacing',
      });
    await cleanup;
    if (disposed || operation !== admitted) return;
    operation = undefined;
    publish({ busy: false, canSubmit: true, activity: 'idle' });
  }
  function dispose() {
    if (disposal) return disposal;
    disposed = true;
    operation?.abort();
    operation = undefined;
    void detach();
    listeners.clear();
    disposal = Promise.all([...cleanups]).then(() => undefined);
    return disposal;
  }
  return {
    getSnapshot: () => snapshot,
    subscribe(notify: () => void) {
      if (disposed) return () => undefined;
      listeners.add(notify);
      return () => {
        listeners.delete(notify);
      };
    },
    submit,
    stop,
    newConversation,
    dispose,
  };
}

import type { Message, ToolCall } from '@threadplane/core';
import type { RenderSpecData } from '@threadplane/react/render';
import {
  copyData,
  dataKey,
  dashboardState,
  plainRecord,
  type DashboardState,
} from './dashboard-data';
import { dashboardSpec } from './dashboard-spec';
import { renderResult, toolData } from './tool-evidence';
import type { GenerativeUiState, createObservation } from './observation';
export interface Checkpoint {
  readonly thread_id: string;
  readonly checkpoint_ns: '';
  readonly checkpoint_id: string;
  readonly checkpoint_map?: Readonly<Record<string, string>>;
}
export interface Surface {
  readonly messageId: string;
  readonly spec: RenderSpecData;
}
export interface Notice {
  readonly messageId: string;
  readonly text: string;
}
export interface Confirmation {
  readonly messages: readonly Message[];
  readonly tools: readonly ToolCall[];
  readonly dashboard: DashboardState;
  readonly surfaces: readonly Surface[];
  readonly notices: readonly Notice[];
}
export function checkpointSource(
  input: unknown,
  threadId: string
): Checkpoint | undefined {
  const value = copyData(input);
  if (
    !plainRecord(value) ||
    value.thread_id !== threadId ||
    value.checkpoint_ns !== '' ||
    typeof value.checkpoint_id !== 'string' ||
    !value.checkpoint_id ||
    Object.keys(value).some(
      (k) =>
        ![
          'thread_id',
          'checkpoint_ns',
          'checkpoint_id',
          'checkpoint_map',
        ].includes(k)
    )
  )
    return;
  if (
    value.checkpoint_map !== undefined &&
    (!plainRecord(value.checkpoint_map) ||
      Object.values(value.checkpoint_map).some((v) => typeof v !== 'string'))
  )
    return;
  if (
    plainRecord(value.checkpoint_map) &&
    Object.entries(value.checkpoint_map).some(
      ([k, v]) => k !== '' || v !== value.checkpoint_id
    )
  )
    return;
  return value as unknown as Checkpoint;
}
const empty = (value: unknown) =>
  value === undefined || (Array.isArray(value) && !value.length);
function clean(record: Record<string, unknown>) {
  return (
    (record.error === undefined || record.error === null) &&
    ['interrupts', '__interrupt__', 'subgraphs'].every((k) => empty(record[k]))
  );
}
/** Confirm raw task-free checkpoint against the loaded projection and tool-derived data. */
export function captureTerminal(
  input: GenerativeUiState,
  checkpoint: unknown,
  threadId: string,
  observation: ReturnType<typeof createObservation>,
  previous: DashboardState,
  surfaces: readonly Surface[],
  knownRunId?: string
): Confirmation | undefined {
  try {
    const state = copyData(input) as GenerativeUiState,
      raw = copyData(checkpoint);
    const requested = checkpointSource(
      state.history?.[0]?.checkpoint,
      threadId
    );
    if (
      !requested ||
      !plainRecord(raw) ||
      dataKey(checkpointSource(raw.checkpoint, threadId)) !==
        dataKey(requested) ||
      !Array.isArray(raw.next) ||
      raw.next.length ||
      !Array.isArray(raw.tasks) ||
      raw.tasks.length ||
      !clean(raw) ||
      state.status !== 'idle' ||
      state.error ||
      state.interrupts.length ||
      state.subgraphs.length ||
      state.history?.[0].next.length
    )
      return;
    if (
      knownRunId &&
      ((raw.run_id !== undefined && raw.run_id !== knownRunId) ||
        (plainRecord(raw.metadata) &&
          raw.metadata.run_id !== undefined &&
          raw.metadata.run_id !== knownRunId))
    )
      return;
    const values = raw.values;
    if (
      !plainRecord(values) ||
      !clean(values) ||
      !Array.isArray(values.messages)
    )
      return;
    const projected = Object.fromEntries(
      Object.entries(values).filter(
        ([k]) => k !== 'messages' && k !== '__interrupt__'
      )
    );
    if (dataKey(projected) !== dataKey(state.values)) return;
    const ms = state.messages,
      ts = state.toolCalls;
    if (
      !observation.human ||
      !ms.length ||
      ms.at(-1)?.role !== 'assistant' ||
      !ms.at(-1)?.content.trim() ||
      values.completed_turn_id !== observation.human.id ||
      values.completed_answer_id !== ms.at(-1)?.id ||
      dataKey(values.completed_message_ids) !== dataKey(ms.map((m) => m.id)) ||
      values.messages.length !== ms.length
    )
      return;
    if (
      ms.some(
        (m) =>
          m.delivery.phase !== 'complete' ||
          m.delivery.outcome !== 'success' ||
          m.delivery.generation !== m.id
      ) ||
      ts.some((t) => t.status !== 'complete' || typeof t.result !== 'string')
    )
      return;
    const calls = new Map(ts.map((t) => [t.id, t])),
      pending = new Set<string>(),
      seen = new Set<string>();
    let dashboard: DashboardState = dashboardState(previous) ?? {};
    const accepted = [...surfaces];
    const notices: Notice[] = [];
    for (const [index, m] of ms.entries()) {
      const wire = values.messages[index];
      if (
        !plainRecord(wire) ||
        !clean(wire) ||
        wire.id !== m.id ||
        wire.content !== m.content ||
        wire.type !==
          (m.role === 'user'
            ? 'human'
            : m.role === 'assistant'
            ? 'ai'
            : 'tool') ||
        !empty(wire.invalid_tool_calls)
      )
        return;
      if (
        wire.additional_kwargs !== undefined &&
        (!plainRecord(wire.additional_kwargs) ||
          wire.additional_kwargs.function_call !== undefined ||
          !empty(wire.additional_kwargs.tool_calls))
      )
        return;
      const extra = plainRecord(wire.additional_kwargs)
        ? wire.additional_kwargs
        : {};
      const reasoning =
        typeof wire.reasoning === 'string'
          ? wire.reasoning
          : typeof extra.reasoning_content === 'string'
          ? extra.reasoning_content
          : undefined;
      if (
        m.name !== (typeof wire.name === 'string' ? wire.name : undefined) ||
        m.reasoning !== reasoning ||
        m.citations?.length ||
        [extra.citations, extra.sources].some(
          (value) => Array.isArray(value) && value.length > 0
        )
      )
        return;
      if (m.role === 'assistant') {
        const ids = m.toolCallIds ?? [],
          rawCalls = wire.tool_calls ?? [];
        if (
          !Array.isArray(rawCalls) ||
          rawCalls.length !== ids.length ||
          pending.size
        )
          return;
        for (const [i, id] of ids.entries()) {
          const t = calls.get(id),
            r = rawCalls[i];
          if (
            !t ||
            seen.has(id) ||
            !plainRecord(r) ||
            r.id !== id ||
            r.name !== t.name ||
            dataKey(r.args) !== dataKey(t.args)
          )
            return;
          pending.add(id);
          seen.add(id);
        }
      } else if (m.role === 'tool') {
        const id = m.toolCallId ?? '',
          t = calls.get(id);
        if (
          !t ||
          t.status !== 'complete' ||
          !pending.delete(id) ||
          m.name !== t.name ||
          m.content !== t.result ||
          wire.tool_call_id !== id ||
          wire.name !== t.name ||
          (wire.status !== undefined && wire.status !== 'success')
        )
          return;
        if (index < observation.prefixLength) continue;
        const parent = ms
          .slice(0, index)
          .find((p) => p.toolCallIds?.includes(id));
        if (!parent) return;
        if (t.name === 'render_spec') {
          const spec = dashboardSpec(t.args);
          if (!spec) return;
          if (t.result === 'rendered') {
            const wrap = observation.wraps.find((w) => w.callId === id);
            if (
              !wrap ||
              wrap.parentId !== parent.id ||
              wrap.resultId !== m.id ||
              parent.content !== wrap.text
            )
              return;
            accepted.push(Object.freeze({ messageId: parent.id, spec }));
          } else {
            if (!parent.content.trim() || !renderResult(t)) return;
            notices.push(
              Object.freeze({
                messageId: parent.id,
                text: 'This layout was not applied because the assistant already supplied prose. The tool result is available for inspection.',
              })
            );
          }
        } else {
          const patch = toolData(t);
          if (!patch) return;
          dashboard = Object.freeze({ ...dashboard, ...patch });
        }
      } else if (
        m.role !== 'user' ||
        pending.size ||
        !empty(wire.tool_calls) ||
        wire.tool_call_id !== undefined
      )
        return;
    }
    const savedDashboard = dashboardState(values.dashboard);
    if (
      pending.size ||
      seen.size !== ts.length ||
      !savedDashboard ||
      dataKey(savedDashboard) !== dataKey(dashboard)
    )
      return;
    return Object.freeze({
      messages: ms,
      tools: ts,
      dashboard: savedDashboard,
      surfaces: Object.freeze(accepted),
      notices: Object.freeze(notices),
    });
  } catch {
    return undefined;
  }
}

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,
});