ChatDebugComponent

ChatDebugComponent provides a docked development panel for inspecting an Agent or AgentWithHistory. It ships from the debug-only secondary entry point so applications can keep debug implementation code out of production bundles unless they explicitly opt in.

Selector: chat-debug

Import:

import { ChatDebugComponent } from '@ngaf/chat/debug';

#Basic Usage

import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
import { agent } from '@ngaf/langgraph';
import { ChatDebugComponent } from '@ngaf/chat/debug';
 
@Component({
  selector: 'app-debug-page',
  standalone: true,
  imports: [ChatDebugComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <chat-debug
      [agent]="chat"
      dock="right"
      [defaultOpen]="true"
      (replayRequested)="replay($event)"
      (forkRequested)="fork($event)"
    />
  `,
})
export class DebugPageComponent {
  protected readonly replayCheckpointId = signal<string | null>(null);
  protected readonly forkSourceCheckpointId = signal<string | null>(null);
 
  protected readonly chat = agent({
    apiUrl: '/api/langgraph',
    assistantId: 'chat_agent',
    threadId: signal(localStorage.getItem('threadId')),
    onThreadId: (id) => localStorage.setItem('threadId', id),
  });
 
  replay(checkpointId: string) {
    this.replayCheckpointId.set(checkpointId);
    // Route this into your app's replay workflow.
  }
 
  fork(checkpointId: string) {
    this.forkSourceCheckpointId.set(checkpointId);
    // Route this into your app's thread fork workflow.
  }
}

#Inputs

Input	Type	Default	Description
`agent`	`Agent \| AgentWithHistory`	Required	Agent state. Agents with `history()` also enable the Timeline tab.
`dock`	`'right' \| 'bottom' \| 'left'`	`'right'`	Initial dock position.
`defaultOpen`	`boolean`	`false`	Initial open state when no persisted state exists.
`launcher`	`'floating' \| 'none'`	`'floating'`	Shows the built-in floating launcher, or hides it when another surface opens the panel.
`storageKey`	`string`	`'chat-debug'`	Local storage key prefix for persisted open/dock/tab state.

#Outputs

Output	Type	Description
`replayRequested`	`string`	Emits a checkpoint id when the built-in Timeline tab requests replay.
`forkRequested`	`string`	Emits a checkpoint id when the built-in Timeline tab requests fork.
`openChange`	`boolean`	Emits when the panel opens or closes.
`dockChange`	`'right' \| 'bottom' \| 'left'`	Emits when the dock position changes.

replayRequested and forkRequested are integration hooks. The debug panel does not mutate the agent by itself; the host app decides whether a checkpoint opens a replay view, starts a forked thread, or maps to a backend-specific time travel operation.

#Sidenav Integration

ChatSidenavComponent can own the launcher for apps that already use the sidenav footer. Pass the same agent and keep [debug] enabled:

<chat-sidenav
  [agent]="chat"
  [debug]="true"
  (replayRequested)="replay($event)"
  (forkRequested)="fork($event)"
/>

The footer button is labelled in expanded and drawer modes. In collapsed mode it uses the status dot only. The dot pulses while agent.status() is running.

#Production Bundles

The debug implementation lives under @ngaf/chat/debug; the main @ngaf/chat entry point no longer exports it. In the canonical Angular demo, normal production builds set NGAF_CHAT_DEBUG=false and externalize @ngaf/chat/debug, so the debug implementation is absent from the emitted bundle. The production-debug build opts back in with NGAF_CHAT_DEBUG=true.

Keep debug controls for your app outside the debug panel. The debug panel intentionally exposes a small fixed surface so consumers do not expect demo-specific controls to appear in their own applications.