Human-in-the-Loop AG-UI Agents in Angular

# graph.py — cockpit/ag-ui/interrupts/python/src/graph.py
class RefundDraft(BaseModel):
    """Structured fields the agent extracts from the refund request."""
 
    customer_id: str = Field(description="The customer identifier, e.g. cus_a8x2k. Use 'unknown' if not stated.")
    amount: float = Field(description="The refund amount in USD. Use 0 if not stated.")
    reason: str = Field(description="One sentence describing why the refund is justified.")
 
llm = ChatOpenAI(model="gpt-5-mini", streaming=True)
extractor = ChatOpenAI(model="gpt-5-mini").with_structured_output(RefundDraft)
 
async def draft_refund(state: RefundState) -> dict:
    draft = await extractor.ainvoke(
        [
            SystemMessage(content="Extract the refund fields from the conversation."),
            *state["messages"],
        ]
    )
    response = await llm.ainvoke([SystemMessage(content=system_prompt)] + state["messages"])
    return {
        "messages": [response],
        "customer_id": draft.customer_id,
        "amount": draft.amount,
        "reason": draft.reason,
    }
 
def request_approval(state: RefundState) -> dict:
    """Pause for human approval. Resume value is { approved: bool, amount?: number }."""
    amount = state.get("amount") or 0.0
    customer_id = state.get("customer_id") or "unknown"
    reason = state.get("reason") or ""
 
    decision = interrupt({
        "kind": "refund_approval",
        "amount": amount,
        "customer_id": customer_id,
        "reason": reason,
    })
 
    if not isinstance(decision, dict) or not decision.get("approved"):
        return {
            "decision_approved": False,
            "messages": [AIMessage(content="Refund cancelled by operator. No charge issued.")],
        }
 
    edited_amount = decision.get("amount")
    final_amount = float(edited_amount) if edited_amount is not None else amount
    return {
        "decision_approved": True,
        "amount": final_amount,
    }

# server.py — cockpit/ag-ui/interrupts/python/src/server.py
# SPDX-License-Identifier: MIT
from fastapi import FastAPI
from ag_ui_langgraph import LangGraphAgent, add_langgraph_fastapi_endpoint
from .graph import graph
 
agent = LangGraphAgent(name="interrupts", graph=graph)
app = FastAPI(title="cockpit-ag-ui-interrupts")
add_langgraph_fastapi_endpoint(app, agent, path="/agent")
 
 
@app.get("/ok")
def ok() -> dict:
    return {"ok": True}

// app.config.ts — cockpit/ag-ui/interrupts/angular/src/app/app.config.ts
// SPDX-License-Identifier: MIT
import { ApplicationConfig } from '@angular/core';
import { provideAgent } from '@threadplane/ag-ui';
import { provideChat } from '@threadplane/chat';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({ url: '/agent' }),
    provideChat({}),
  ],
};

// proxy.conf.mjs — cockpit/ag-ui/interrupts/angular/proxy.conf.mjs
import { portsFor } from '../../../../cockpit/ports.mjs';
const { langgraph: backend } = portsFor('cockpit-ag-ui-interrupts-angular');
export default {
  '/agent': { target: `http://localhost:${backend}`, secure: false, changeOrigin: true, ws: true },
};

// interrupts.component.ts — cockpit/ag-ui/interrupts/angular/src/app/interrupts.component.ts
// SPDX-License-Identifier: MIT
import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
import { ChatComponent, ChatApprovalCardComponent, ChatWelcomeSuggestionComponent, type ChatApprovalAction } from '@threadplane/chat';
import { injectAgent } from '@threadplane/ag-ui';
import { ExampleChatLayoutComponent } from '@threadplane/example-layouts';
import { CurrencyPipe } from '@angular/common';
 
const WELCOME_SUGGESTIONS = [
  { label: 'Refund a duplicate charge', value: 'Refund $47.50 to customer cus_a8x2k — they were charged twice for the same order.' },
  { label: 'Refund a chargeback', value: 'Refund $129.00 to customer cus_z19fp who opened a chargeback for unrecognized activity.' },
] as const;
 
/**
 * Refund authorization cockpit example.
 *
 * The LangGraph backend acknowledges the refund draft, then pauses at
 * `request_approval` with a structured interrupt payload of the form
 * `{ kind: 'refund_approval', amount, customer_id, reason }`.
 *
 * The frontend uses `ChatApprovalCardComponent` to render the native-dialog
 * modal and emit a `ChatApprovalAction` ('approve' | 'edit' | 'cancel').
 * The handler maps each action to a structured resume payload back to the
 * graph.
 *
 * The agent is wired in `app.config.ts` via `provideAgent({...})` and
 * retrieved here with `injectAgent()`.
 */
@Component({
  selector: 'app-interrupts',
  standalone: true,
  imports: [
    ChatComponent,
    ChatApprovalCardComponent,
    ChatWelcomeSuggestionComponent,
    ExampleChatLayoutComponent,
    CurrencyPipe,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <example-chat-layout>
      <div main class="flex flex-col h-full">
        <chat [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"
                (selected)="send($event)"
              />
            }
          </div>
        </chat>
 
        <chat-approval-card
          [agent]="agent"
          matchKind="refund_approval"
          title="Refund approval required"
          [showEdit]="true"
          (action)="onAction($event)"
        >
          <ng-template #body let-payload>
            <div style="display:flex; flex-direction:column; gap:6px;">
              <div><span style="color:var(--tplane-chat-text-muted); margin-right:6px;">Amount</span><strong>{{ payload.amount | currency }}</strong></div>
              <div><span style="color:var(--tplane-chat-text-muted); margin-right:6px;">Customer</span><code>{{ payload.customer_id }}</code></div>
              @if (payload.reason) {
                <div style="font-style:italic; color:var(--tplane-chat-text-muted); margin-top:4px;">{{ payload.reason }}</div>
              }
              @if (editing()) {
                <div style="margin-top:10px; display:flex; gap:6px; align-items:center;">
                  <label style="color:var(--tplane-chat-text-muted); font-size:12px;">Edit amount</label>
                  <input type="number" step="0.01" [value]="editAmount() ?? payload.amount" (input)="editAmount.set(+($any($event.target).value))" style="padding:4px 8px; border:1px solid var(--tplane-chat-separator); border-radius:6px; width:120px;" />
                  <button type="button" (click)="submitEdit(payload)" style="padding:4px 10px; background:var(--tplane-chat-primary); color:var(--tplane-chat-on-primary); border:0; border-radius:6px; font-size:12px; cursor:pointer;">Save</button>
                </div>
              }
            </div>
          </ng-template>
        </chat-approval-card>
      </div>
    </example-chat-layout>
  `,
})
export class InterruptsComponent {
  protected readonly suggestions = WELCOME_SUGGESTIONS;
  protected readonly editing = signal(false);
  protected readonly editAmount = signal<number | null>(null);
 
  protected readonly agent = injectAgent();
 
  protected send(text: string): void {
    void this.agent.submit({ message: text });
  }
 
  protected onAction(action: ChatApprovalAction): void {
    if (action === 'approve') {
      void this.agent.submit({ resume: { approved: true } });
      this.resetEdit();
    } else if (action === 'cancel') {
      void this.agent.submit({ resume: { approved: false } });
      this.resetEdit();
    } else if (action === 'edit') {
      this.editing.set(true);
    }
  }
 
  protected submitEdit(payload: { amount: number }): void {
    const next = this.editAmount() ?? payload.amount;
    void this.agent.submit({ resume: { approved: true, amount: next } });
    this.resetEdit();
  }
 
  private resetEdit(): void {
    this.editing.set(false);
    this.editAmount.set(null);
  }
}