Merge remote-tracking branch 'origin/main' into blove/angular-22-support

Author: blove

apps/website/content/blog/2026-05-17-build-a-streaming-chat-ui-in-angular-with-langgraph.mdx

@@ -11,7 +11,8 @@ This is how to pause a LangGraph agent in Angular for human approval before it r
 
 The example is a refund agent: it drafts a refund, then stops and asks an operator to approve, edit, or cancel before any charge is reversed.
 
-Everything below is running code from the cockpit example at `cockpit/langgraph/interrupts`. Clone the repo, run `nx serve cockpit-langgraph-interrupts-angular`, and follow along.
+Everything below is running code from the cockpit example at `cockpit/langgraph/interrupts`.
+Clone the repo, run `nx serve cockpit-langgraph-interrupts-angular`, and follow along.
 
 <div style={{ marginTop: 40, marginBottom: 44 }}>
 <CardGroup cols={2}>
@@ -32,9 +33,13 @@ Everything below is running code from the cockpit example at `cockpit/langgraph/
 
 ## When should you use an interrupt?
 
-Most tool calls don't need approval. Reads, searches, and lookups can run unattended. Reach for an interrupt when a tool does something the operator wouldn't want to undo by hand: moves money, sends a customer-facing message, deletes a record, or triggers a deploy.
+Most tool calls do not need approval.
+Reads, searches, and lookups can run unattended.
+Reach for an interrupt when a tool does something the operator would not want to undo by hand: moves money, sends a customer-facing message, deletes a record, or triggers a deploy.
 
-Two practical reasons: it caps the cost of a misfiring agent looping over a write API, and it gives the operator a checkpoint to catch a wrong action before it lands.
+For me, there are two practical reasons.
+It caps the cost of a misfiring agent looping over a write API.
+And it gives the operator a checkpoint to catch a wrong action before it lands.
 
 ## The architecture
 
@@ -44,7 +49,8 @@ Three pieces:
 - **`@threadplane/langgraph` adapter.** Surfaces the pending interrupt on an `agent.interrupt()` signal. `agent.submit({ resume })` writes a value back to the paused graph.
 - **`@threadplane/chat` UI.** `<chat-approval-card>` reads the pending interrupt, opens a native `<dialog>` modal, and emits `'approve' | 'edit' | 'cancel'`.
 
-The LangGraph node doesn't know how the UI renders, and the Angular component doesn't know which graph it's paused inside. That lets you reuse one approval dialog across multiple agents.
+The LangGraph node does not know how the UI renders, and the Angular component does not know which graph it is paused inside.
+That lets you reuse one approval dialog across multiple agents.
 
 <figure>
   <img src="/blog/2026-05-28-human-in-the-loop-langgraph-agents-in-angular/1.png" alt="The refund agent's welcome screen with two suggestion chips: 'Refund a duplicate charge' and 'Refund a chargeback.'" width="1280" height="800" />
@@ -58,7 +64,8 @@ Three files.
 <Steps>
 <Step title="The LangGraph node">
 
-A structured-output call populates the fields the approval card displays. Then `request_approval` pauses with `interrupt()`:
+A structured-output call populates the fields the approval card displays.
+Then `request_approval` pauses with `interrupt()`:
 
 ```python
 # graph.py — cockpit/langgraph/interrupts/python/src/graph.py
@@ -100,7 +107,9 @@ def request_approval(state: RefundState) -> dict:
     }
 ```
 
-`interrupt()` pauses the graph and persists its payload. The graph stays paused until `agent.submit({ resume })` runs against the same thread — and that value becomes the return value of `interrupt()` when the node re-executes. That's why `request_approval` can branch on `decision["approved"]` and pick up an edited `amount`.
+`interrupt()` pauses the graph and persists its payload.
+The graph stays paused until `agent.submit({ resume })` runs against the same thread — and that value becomes the return value of `interrupt()` when the node re-executes.
+That is why `request_approval` can branch on `decision["approved"]` and pick up an edited `amount`.
 
 </Step>
 <Step title="Wire the providers">
@@ -167,9 +176,13 @@ export class InterruptsComponent {
 }
 ```
 
-`<chat-approval-card>` reads `agent.interrupt()`, matches the `kind` you pass to `matchKind`, opens a native `<dialog>`, and emits an action on each button click. The body is a content-projected template — render whatever fits the payload.
+`<chat-approval-card>` reads `agent.interrupt()`, matches the `kind` you pass to `matchKind`, opens a native `<dialog>`, and emits an action on each button click.
+The body is a content-projected template — render whatever fits the payload.
 
-Approve and Cancel are terminal: they resolve the interrupt and close the dialog. Edit is not. Clicking Edit leaves the dialog open so you can reveal an inline editor and submit the resume yourself. That distinction lives in the composition.
+Approve and Cancel are terminal: they resolve the interrupt and close the dialog.
+Edit is not.
+Clicking Edit leaves the dialog open so you can reveal an inline editor and submit the resume yourself.
+That distinction lives in the composition.
 
 </Step>
 </Steps>
@@ -191,7 +204,8 @@ Approve and Cancel are terminal: they resolve the interrupt and close the dialog
 8. `request_approval` re-runs; `interrupt()` returns `{ approved: true }` instead of pausing.
 9. The graph continues to `issue_refund` and finishes.
 
-It's one thread and one persisted state. If the operator closes the tab and returns later, the interrupt is still pending.
+It is one thread and one persisted state.
+If the operator closes the tab and returns later, the interrupt is still pending.
 
 <figure>
   <img src="/blog/2026-05-28-human-in-the-loop-langgraph-agents-in-angular/3.png" alt="The chat after approval, showing the agent's draft summary and a confirmation: 'Refund of $47.50 issued to cus_a8x2k. Refund ID: re_demo__a8x2k.'" width="1280" height="800" />
@@ -202,7 +216,9 @@ It's one thread and one persisted state. If the operator closes the tab and retu
 
 ### Idempotency
 
-`interrupt()` re-executes the node on resume. Side effects before the call have already run; side effects after run again on resume. Put the write (the Stripe `refund.create`) on the resumed side, and pass an idempotency key through state so a double-click doesn't issue two refunds.
+`interrupt()` re-executes the node on resume.
+Side effects before the call have already run; side effects after run again on resume.
+Put the write (the Stripe `refund.create`) on the resumed side, and pass an idempotency key through state so a double-click does not issue two refunds.
 
 ### Audit trail
 
@@ -222,7 +238,8 @@ protected async onAction(action: ChatApprovalAction): Promise<void> {
 
 ### What not to interrupt
 
-Interrupt on writes the operator wouldn't want to undo by hand — money movement, customer-facing messages, destructive deletes. If you can undo it with a script in under a minute, let the agent run.
+My rule is simple: interrupt on writes the operator would not want to undo by hand — money movement, customer-facing messages, destructive deletes.
+If you can undo it with a script in under a minute, let the agent run.
 
 ## Next