Visualization

import { useInferaGraphCommands } from '@inferagraph/core/react';

function Toolbar() {
  const cmds = useInferaGraphCommands();

  return (
    <>
      // Highlight a model-returned set of nodes from outside chat()
      <button onClick={() => cmds.setHighlight(new Set(['nodeA', 'nodeB']))}>
        Highlight pair
      </button>

      // Pan the camera to a specific node (URL deep link, sidebar click)
      <button onClick={() => cmds.focusOn('nodeA')}>Focus</button>

      // Snap the camera back to its captured initial orientation
      <button onClick={() => cmds.resetView()}>Camera home</button>

      // "Clear conversation" — fresh canvas: highlight + annotations +
      // filter all reset, camera back to home.
      <button onClick={() => cmds.clearVisualState()}>Reset</button>
    </>
  );
}

import { useInferaGraphChatContext } from '@inferagraph/core/react';

// Lower-level escape hatch — dispatch any ChatEvent variant the semantic
// facade doesn't surface (e.g. a synthetic 'text' event for a UI-only
// "Welcome" bubble, or a 'debug' event for ops visibility).
function SystemBubble() {
  const { dispatch } = useInferaGraphChatContext();

  return (
    <button
      onClick={() => dispatch({ type: 'text', delta: 'Welcome back.' })}
    >
      Greet
    </button>
  );
}

// ChatEvent gains a 'debug' member in core 0.8.0 — first-class diagnostic surface.
type ChatDebugEvent = {
  type: 'debug';
  phase: DebugPhase;
  detail?: unknown;
  counters?: Record<string, number>;
  conversationId?: string;
};

// Canonical phases the engine emits today:
//   stream-opened       — route handler ran; SSE channel is live
//   warmup-blocking     — first-call await on embedding warmup
//   warmup-failed       — background warmup hit an error; buffered failure is
//                         emitted on the next chat() call's debug stream (0.9.0+)
//   vector-search       — hybrid retrieval ran; counters: hits, durationMs
//   rerank              — cross-encoder rerank ran; counters: candidates, kept
//   pronoun-resolve     — prior-turn entities injected into the prompt
//   retrieval-complete  — final retrieval set chosen for the prompt
//   retrieval-empty     — no relevant nodes; system prompt forces "no data"
//   substitution-fired  — empty highlight substituted with retrieval set
//   engine-empty        — no events from provider; surface as a loud failure
//   conversation-cleared — host called clear(); next turn is fresh

import { InferaGraph } from '@inferagraph/core/react';
import type { ChatDebugEvent, ToolCallOutcome } from '@inferagraph/core/data';
import { useState } from 'react';

function App() {
  const [badges, setBadges] = useState<string[]>([]);

  return (
    <>
      <InferaGraph
        data={data}
        llm={llm}
        onDiagnostic={(ev: ChatDebugEvent) => {
          // Render every diagnostic as a small grey chip beneath the chat bubble.
          if (ev.phase === 'retrieval-empty') {
            setBadges(b => [...b, 'no graph match']);
          } else if (ev.phase === 'substitution-fired') {
            setBadges(b => [...b, `substituted ${ev.counters?.ids ?? 0} ids`]);
          }
        }}
        onToolCallOutcome={(o: ToolCallOutcome) => {
          // Renderer dispatches against partly-unknown ids — surface that to the host.
          if (o.unknown > 0) {
            setBadges(b => [...b, `${o.applied} highlighted, ${o.unknown} unknown`]);
          }
        }}
      />
      <DiagnosticsPanel badges={badges} />
    </>
  );
}