feat(ag-ui): interrupt support + cockpit ag-ui section (interrupts + streaming)

.github/workflows/ci.yml

@@ -189,7 +189,7 @@ jobs:
           node-version: 22
           cache: npm
       - run: npm ci
-      - run: npx nx run-many -t smoke --projects=cockpit-deep-agents-planning-python,cockpit-deep-agents-filesystem-python,cockpit-deep-agents-subagents-python,cockpit-deep-agents-memory-python,cockpit-deep-agents-skills-python,cockpit-deep-agents-sandboxes-python,cockpit-langgraph-persistence-python,cockpit-langgraph-durable-execution-python,cockpit-langgraph-streaming-python,cockpit-langgraph-interrupts-python,cockpit-langgraph-memory-python,cockpit-langgraph-subgraphs-python,cockpit-langgraph-time-travel-python,cockpit-langgraph-deployment-runtime-python --skip-nx-cache
+      - run: npx nx run-many -t smoke --projects=cockpit-ag-ui-interrupts-python,cockpit-ag-ui-streaming-python,cockpit-deep-agents-planning-python,cockpit-deep-agents-filesystem-python,cockpit-deep-agents-subagents-python,cockpit-deep-agents-memory-python,cockpit-deep-agents-skills-python,cockpit-deep-agents-sandboxes-python,cockpit-langgraph-persistence-python,cockpit-langgraph-durable-execution-python,cockpit-langgraph-streaming-python,cockpit-langgraph-interrupts-python,cockpit-langgraph-memory-python,cockpit-langgraph-subgraphs-python,cockpit-langgraph-time-travel-python,cockpit-langgraph-deployment-runtime-python --skip-nx-cache
 
   cockpit-secret-integration:
     name: Cockpit — secret-gated integration

cockpit/ag-ui/interrupts/angular/e2e/fixtures/interrupts.json

@@ -0,0 +1,36 @@
+{
+  "fixtures": [
+    {
+      "match": { "responseFormat": "json_schema", "userMessage": "cus_a8x2k" },
+      "response": {
+        "content": {
+          "customer_id": "cus_a8x2k",
+          "amount": 47.5,
+          "reason": "Customer was charged twice for the same order."
+        }
+      }
+    },
+    {
+      "match": { "responseFormat": "json_schema", "userMessage": "cus_z19fp" },
+      "response": {
+        "content": {
+          "customer_id": "cus_z19fp",
+          "amount": 129.0,
+          "reason": "Chargeback opened for unrecognized activity."
+        }
+      }
+    },
+    {
+      "match": { "systemMessage": "Refund Authorization Assistant", "userMessage": "cus_a8x2k" },
+      "response": {
+        "content": "Understood — a $47.50 refund to cus_a8x2k for a duplicate charge. Pausing for operator approval; no refund is issued until a human reviews and approves."
+      }
+    },
+    {
+      "match": { "systemMessage": "Refund Authorization Assistant", "userMessage": "cus_z19fp" },
+      "response": {
+        "content": "Understood — a $129.00 refund to cus_z19fp for a chargeback. Pausing for operator approval; no refund is issued until a human reviews and approves."
+      }
+    }
+  ]
+}

cockpit/ag-ui/interrupts/angular/e2e/global-setup-impl.ts

@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+import { createAgUiGlobalSetup } from '@threadplane-internal/e2e-harness';
+
+const ports = portsFor('cockpit-ag-ui-interrupts-angular');
+
+export default createAgUiGlobalSetup({
+  pythonCwd: 'cockpit/ag-ui/interrupts/python',
+  backendPort: ports.langgraph,
+  angularProject: 'cockpit-ag-ui-interrupts-angular',
+  angularPort: ports.angular,
+  fixturesDir: resolve(__dirname, 'fixtures'),
+});

cockpit/ag-ui/interrupts/angular/e2e/interrupts.spec.ts

@@ -0,0 +1,30 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+
+test.describe('cockpit interrupts: refund approval', () => {
+  test('approval card displays structured payload fields', async ({ page }) => {
+    await page.goto('/');
+    await page.getByText('Refund a duplicate charge').click();
+    const dialog = page.locator('dialog.chat-approval-card');
+    await expect(dialog).toBeVisible({ timeout: 20_000 });
+    await expect(dialog).toContainText('Refund approval required');
+  });
+
+  test('Approve issues the refund and the run finishes', async ({ page }) => {
+    await page.goto('/');
+    await page.getByText('Refund a duplicate charge').click();
+    const dialog = page.locator('dialog.chat-approval-card');
+    await expect(dialog).toBeVisible({ timeout: 20_000 });
+    await dialog.getByRole('button', { name: 'Approve' }).click();
+    await expect(page.getByText(/Refund of \$/i)).toBeVisible({ timeout: 20_000 });
+  });
+
+  test('Cancel skips the refund and confirms cancellation', async ({ page }) => {
+    await page.goto('/');
+    await page.getByText('Refund a duplicate charge').click();
+    const dialog = page.locator('dialog.chat-approval-card');
+    await expect(dialog).toBeVisible({ timeout: 20_000 });
+    await dialog.getByRole('button', { name: 'Cancel' }).click();
+    await expect(page.getByText(/Refund cancelled by operator/i)).toBeVisible({ timeout: 20_000 });
+  });
+});

cockpit/ag-ui/interrupts/angular/e2e/manual/interrupts.manual.ts

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: MIT
+// Manual record-mode harness. Run against a live OpenAI key to capture new
+// fixture entries into cockpit/ag-ui/interrupts/angular/e2e/fixtures/interrupts.json.
+//
+// Prerequisites:
+//   1. Start the uvicorn backend in record mode (OPENAI_API_KEY set, no aimock):
+//        cd cockpit/ag-ui/interrupts/python && uv run uvicorn src.server:app --port 5320
+//   2. Start the Angular dev server:
+//        npx nx serve cockpit-ag-ui-interrupts-angular --port 4320
+//   3. Run this harness via:
+//        npx playwright test --config cockpit/ag-ui/interrupts/angular/e2e/playwright.config.ts \
+//          manual/interrupts.manual.ts --headed
+import { expect, test } from '@playwright/test';
+
+test.describe('AG-UI Interrupts Example', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:4320');
+    await page.waitForSelector('app-interrupts', { state: 'attached' });
+  });
+
+  test('renders the chat interface with approvals sidebar', async ({ page }) => {
+    await expect(page.locator('chat')).toBeVisible();
+    await expect(page.locator('textarea[name="messageText"]')).toBeVisible();
+    await expect(page.locator('text=No pending approvals')).toBeVisible();
+  });
+
+  test('sends a message and receives a response', async ({ page }) => {
+    await page.fill('textarea[name="messageText"]', 'hello');
+    await page.click('button[type="submit"]');
+    await expect(page.locator('.chat-md').first()).toBeVisible({ timeout: 30000 });
+    await expect(page.locator('.chat-md').first()).not.toBeEmpty({ timeout: 30000 });
+  });
+});

cockpit/ag-ui/interrupts/angular/e2e/playwright.config.ts

@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: MIT
+import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-ag-ui-interrupts-angular');
+
+
+export default defineConfig({
+  testDir: '.',
+  testMatch: '**/*.spec.ts',
+  fullyParallel: false,
+  workers: 1,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
+  use: {
+    baseURL: `http://localhost:${angularPort}`,
+    trace: 'retain-on-failure',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  globalSetup: './global-setup-impl.ts',
+  globalTeardown: require.resolve('../../../../../libs/e2e-harness/src/global-teardown'),
+});

cockpit/ag-ui/interrupts/angular/e2e/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": [
+      "node"
+    ],
+    "baseUrl": "../../../../..",
+    "paths": {
+      "@threadplane-internal/e2e-harness": [
+        "libs/e2e-harness/src/index.ts"
+      ],
+      "@threadplane-internal/e2e-harness/global-teardown": [
+        "libs/e2e-harness/src/global-teardown.ts"
+      ]
+    },
+    "allowJs": true
+  },
+  "include": [
+    "**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "test-results",
+    "playwright-report"
+  ]
+}

cockpit/ag-ui/interrupts/angular/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@threadplane/cockpit-ag-ui-interrupts-angular",
+  "private": true,
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@threadplane/chat": "*",
+    "@threadplane/ag-ui": "*"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}

cockpit/ag-ui/interrupts/angular/project.json

@@ -0,0 +1,102 @@
+{
+  "name": "cockpit-ag-ui-interrupts-angular",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "cockpit/ag-ui/interrupts/angular/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@angular/build:application",
+      "outputs": [
+        "{options.outputPath.base}"
+      ],
+      "options": {
+        "outputPath": {
+          "base": "dist/cockpit/ag-ui/interrupts/angular",
+          "browser": ""
+        },
+        "browser": "cockpit/ag-ui/interrupts/angular/src/main.ts",
+        "tsConfig": "cockpit/ag-ui/interrupts/angular/tsconfig.app.json",
+        "styles": [
+          "cockpit/ag-ui/interrupts/angular/src/styles.css"
+        ]
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "10kb",
+              "maximumError": "16kb"
+            }
+          ],
+          "outputHashing": "none"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "fileReplacements": [
+            {
+              "replace": "cockpit/ag-ui/interrupts/angular/src/environments/environment.ts",
+              "with": "cockpit/ag-ui/interrupts/angular/src/environments/environment.development.ts"
+            }
+          ]
+        },
+        "cockpit": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "fileReplacements": [
+            {
+              "replace": "cockpit/ag-ui/interrupts/angular/src/environments/environment.ts",
+              "with": "cockpit/ag-ui/interrupts/angular/src/environments/environment.development.ts"
+            }
+          ],
+          "browser": "cockpit/ag-ui/interrupts/angular/src/main.cockpit.ts"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "continuous": true,
+      "executor": "@angular/build:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "cockpit-ag-ui-interrupts-angular:build:production"
+        },
+        "development": {
+          "buildTarget": "cockpit-ag-ui-interrupts-angular:build:development"
+        },
+        "cockpit": {
+          "buildTarget": "cockpit-ag-ui-interrupts-angular:build:cockpit"
+        }
+      },
+      "defaultConfiguration": "development",
+      "options": {
+        "proxyConfig": "cockpit/ag-ui/interrupts/angular/proxy.conf.mjs"
+      }
+    },
+    "smoke": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "cockpit/ag-ui/interrupts/angular",
+        "command": "npx tsx -e \"import { agUiInterruptsAngularModule } from './src/index.ts'; const module = agUiInterruptsAngularModule; if (module.id !== 'ag-ui-interrupts-angular' || module.title !== 'AG-UI Interrupts (Angular)') { throw new Error('Unexpected module shape for ' + module.id); }\""
+      }
+    },
+    "e2e": {
+      "executor": "@nx/playwright:playwright",
+      "options": {
+        "config": "cockpit/ag-ui/interrupts/angular/e2e/playwright.config.ts"
+      }
+    }
+  },
+  "tags": [
+    "scope:cockpit-e2e",
+    "scope:cockpit-examples"
+  ]
+}

cockpit/ag-ui/interrupts/angular/prompts/interrupts.md

@@ -0,0 +1,5 @@
+# LangGraph Interrupts (Angular)
+
+This capability demonstrates human-in-the-loop interrupt handling using LangGraph's `interrupt()` primitive and the `@threadplane/chat` Angular component library. When the graph pauses at an interrupt node, the `<chat-interrupt-panel>` surfaces the pending decision to the user; their response is submitted back to the graph via `agent`'s `resume` helper.
+
+Key components used: `<chat>`, `<chat-interrupt-panel>`. The interrupt panel renders inside the chat host and becomes visible automatically whenever the underlying agent detects a pending interrupt in the thread state.

cockpit/ag-ui/interrupts/angular/proxy.conf.mjs

@@ -0,0 +1,5 @@
+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 },
+};

cockpit/ag-ui/interrupts/angular/src/app/app.config.ts

@@ -0,0 +1,11 @@
+// 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({}),
+  ],
+};