ChatSubagentCardComponent

class SubagentState(TypedDict):
    """Child-graph state. `subagent_type` selects the system prompt."""
    messages: Annotated[list, add_messages]
    subagent_type: str
    task_description: str
 
 
async def _subagent_node(state: SubagentState) -> dict:
    """Focused subagent: a single role-prompted LLM call. Kept to ONE LLM call
    (no within-subagent tool loop) so each subagent's request has a unique,
    stable discriminator (its role-specific task_description) — this lets the
    aimock e2e replay match it deterministically. The within-subagent tool
    calling is exercised by the dedicated tool-calls cap; here the focus is
    subagent orchestration + the inline subagent card. The returned message
    streams under this subgraph's `tools:<call_id>` namespace, which the
    @threadplane/langgraph SubagentTracker matches to surface the card."""
    subagent_type = state["subagent_type"]
    task_description = state["task_description"]
    system_prompt = _SUBAGENT_PROMPTS.get(subagent_type, _ITINERARY_PROMPT)
 
    llm = ChatOpenAI(model="gpt-5-mini", streaming=True)
    response = await llm.ainvoke([
        SystemMessage(content=system_prompt),
        HumanMessage(content=task_description),
    ])
    return {"messages": [response]}
 
 
# Compiled child graph. Invoking it from inside the `task` tool makes LangGraph
# nest its run under a `tools:<uuid>` namespace, where the uuid is a checkpoint
# id assigned independently — nothing on the wire links it to the `call_*`
# tool-call id. The @threadplane/langgraph SubagentTracker matches this
# namespace to the registered `task` dispatch to surface a card.
_subagent_builder = StateGraph(SubagentState)
_subagent_builder.add_node("subagent", _subagent_node)
_subagent_builder.set_entry_point("subagent")
_subagent_builder.add_edge("subagent", END)
subagent_subgraph = _subagent_builder.compile()

@tool
async def task(
    subagent_type: Literal["research", "booking", "itinerary"],
    task_description: str,
    tool_call_id: Annotated[str, InjectedToolCallId] = None,
    config: RunnableConfig = None,
) -> str:
    """Delegate a subtask to a specialized subagent subgraph.
 
    Args:
        subagent_type: Which specialist to dispatch — "research" (airport /
            destination intel), "booking" (flight options between origin and
            destination), or "itinerary" (final trip plan synthesizing research
            + bookings). This label also identifies the subagent in the UI.
        task_description: Plain-English description of what the subagent should
            do (e.g., "Gather info on LAX and JFK airports").
 
    Returns:
        The subagent's final answer as a string.
    """
    _announce_subagent(config, tool_call_id)
    result = await subagent_subgraph.ainvoke(
        {"subagent_type": subagent_type, "task_description": task_description, "messages": []}
    )
    messages = result.get("messages") if isinstance(result, dict) else None
    return _final_text(messages)

def _announce_subagent(config, tool_call_id: str) -> None:
    """Bind this tool call's child stream to its tool-call id, for the UI.
 
    LangGraph streams the child under a `tools:<uuid>` namespace whose uuid is
    a checkpoint id — nothing on the wire links it to the `call_*` id, so a
    frontend showing per-subagent progress would otherwise have to guess.
    Inside the tool body both halves are known; emit them as one custom event
    that `@threadplane/langgraph` recognizes.
 
    Inlined per the cockpit standalone rule — the canonical helper is
    `threadplane.middleware.langgraph.announce_subagent`.
    """
    if not tool_call_id:
        return
    meta = dict((config or {}).get("metadata") or {})
    namespace = meta.get("checkpoint_ns")
    if not namespace:
        return
    try:
        from langgraph.config import get_stream_writer
 
        get_stream_writer()(
            {
                "type": "threadplane.subagent_binding",
                "namespace": namespace,
                "tool_call_id": tool_call_id,
            }
        )
    except Exception:
        pass

def build_subagents_graph():
    """Orchestrator LLM with a single `task` tool that dispatches to subagent functions."""
    llm = ChatOpenAI(model="gpt-5-mini", streaming=True).bind_tools([task])
 
    async def orchestrator(state: MessagesState) -> dict:
        system_prompt = (PROMPTS_DIR / "subagents.md").read_text()
        messages = [SystemMessage(content=system_prompt)] + state["messages"]
        response = await llm.ainvoke(messages)
        return {"messages": [response]}
 
    def should_continue(state: MessagesState) -> str:
        last = state["messages"][-1]
        if hasattr(last, "tool_calls") and last.tool_calls:
            return "tools"
        return END
 
    graph = StateGraph(MessagesState)
    graph.add_node("orchestrator", orchestrator)
    graph.add_node("tools", ToolNode([task]))
    graph.add_node("generate_title", generate_title)
    graph.set_entry_point("orchestrator")
    graph.add_conditional_edges("orchestrator", should_continue, {"tools": "tools", END: "generate_title"})
    graph.add_edge("tools", "orchestrator")
    graph.add_edge("generate_title", END)
    return graph.compile()

import { injectCockpitRuntimeConnection } from '@threadplane/cockpit-telemetry';
import { ApplicationConfig } from '@angular/core';
import { provideAgent } from '@threadplane/langgraph';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent(() => {
      const connection = injectCockpitRuntimeConnection();
      if (connection.adapter !== 'langgraph') {
        throw new Error('incompatible runtime');
      }
      return {
        apiUrl: connection.apiUrl,
        assistantId: connection.assistantId,
        clientOptions: connection.clientOptions,
        // Treat `task` tool calls as subagent dispatches: the SubagentTracker
        // registers them and matches the child subgraph's tools:<id> namespace,
        // so agent.subagents() populates and the inline subagent card renders.
        subagentToolNames: ['task'],
      };
    }),
  ],
};

<example-chat-layout sidebarWidth="20rem">
  <chat main [agent]="agent" class="flex-1 min-w-0">
    <div chatWelcomeSuggestions>
      @for (s of suggestions; track s.value) {
        <chat-welcome-suggestion
          [label]="s.label"
          [value]="s.value"
          [description]="s.description"
          (selected)="send($event)"
        />
      }
    </div>
  </chat>
  <div sidebar class="panel">
    <h3 class="cap">Agent Pipeline</h3>
    <ol class="info-list">
      <li>Orchestrator</li>
      <li>Research subagent</li>
      <li>Booking subagent</li>
      <li>Itinerary subagent</li>
    </ol>
  </div>
</example-chat-layout>

protected readonly agent = injectAgent();
 
protected readonly suggestions = SUGGESTIONS;
 
protected send(text: string): void {
  void this.agent.submit({ message: text });
}