ChatSubagentCardComponent

ChatSubagentCardComponent is a composition that renders an expandable card for a subagent stream. It displays the subagent's name (or tool call ID), current status (with a color-coded badge) and message count, and expands to show the subagent's full transcript — every message rendered as streaming markdown, alongside any reasoning and the subagent's own tool-call cards.

The card is built on the <chat-trace> primitive, so it auto-expands while the subagent is running and collapses once it reaches complete (a user toggle always wins).

Selector: chat-subagent-card

Import:

import { ChatSubagentCardComponent } from '@threadplane/chat';

Basic Usage

<chat-subagent-card [subagent]="subagentRef" />

API

Inputs

Subagent

The Subagent type comes from @threadplane/chat. It provides reactive state for a subagent:

Card Behavior

Header

The card header (the <chat-trace> toggle button) shows:

• A chevron that reflects the expanded state
• The subagent name if present, otherwise the literal "Subagent", with the toolCallId in monospace
• A color-coded status pill
• The message count (e.g., "3 message(s)")

Auto-expand and collapse

Expansion is driven by <chat-trace>: the card auto-expands while status() is running and collapses when it settles to complete. Clicking the header toggles it manually, and a manual toggle overrides the automatic behavior.

Transcript

When expanded, the card renders the subagent's entire message list (not just the latest). For each message it shows, in order:

• Any reasoning text, as a muted italic line
• The message content, rendered through <chat-streaming-md> (streaming markdown)
• A <chat-tool-call-card> for each tool call referenced by the message's toolCallIds

Status Pill Colors

The status pill is styled via a data-status attribute and CSS selectors (the exported statusColor() helper is retained for backward compatibility). Colors map to chat theme variables:

Using with ChatSubagentsComponent

The ChatSubagentsComponent primitive iterates over active subagent streams from an Agent. Combine it with ChatSubagentCardComponent:

<chat-subagents [agent]="chatRef">
  <ng-template let-subagent>
    <chat-subagent-card [subagent]="subagent" />
  </ng-template>
</chat-subagents>

Full Example

import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
import { injectAgent, provideAgent } from '@threadplane/langgraph';
import {
  ChatComponent,
  ChatSubagentsComponent,
  ChatSubagentCardComponent,
} from '@threadplane/chat';
 
@Component({
  selector: 'app-subagent-demo',
  standalone: true,
  imports: [ChatComponent, ChatSubagentsComponent, ChatSubagentCardComponent],
  providers: [provideAgent({ assistantId: 'multi_agent', threadId: signal(null) })],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="height: 100vh; display: flex; flex-direction: column;">
      <div style="flex: 1;">
        <chat [agent]="chatRef" />
      </div>
 
      <div class="p-4">
        <h3 class="text-sm font-semibold mb-2">Active Subagents</h3>
        <div class="space-y-2">
          <chat-subagents [agent]="chatRef">
            <ng-template let-subagent>
              <chat-subagent-card [subagent]="subagent" />
            </ng-template>
          </chat-subagents>
        </div>
      </div>
    </div>
  `,
})
export class SubagentDemoComponent {
  chatRef = injectAgent();
}

Styling

The card uses the following CSS custom properties:

The outer card chrome (background, border, radius) comes from the wrapping <chat-trace>.

ARIA

• The header button (from <chat-trace>) exposes aria-expanded reflecting the current state