feat(cockpit): Microsoft Agent Framework runtime example (cockpit/runtimes)

First entry on the one-capability-many-runtimes axis: an expense-approval
example whose backend is genuinely non-LangGraph (agent-framework behind
the agent-framework-ag-ui bridge) while the Angular side is the same
neutral-contract UI code every AG-UI example uses (provideAgent/injectAgent
from @threadplane/ag-ui + @threadplane/chat primitives).

Surfaces demonstrated (per the measured 2026-08-31 runtime matrix):
- messages: streamed assistant text
- tool calls: lookup_expense_policy executes server-side
- shared state: predict_state_config streams the submit_expense argument
  into frontend state (STATE_SNAPSHOT/STATE_DELTA) predictively
- interrupts: submit_expense has approval_mode='always_require'; the run
  finishes with the protocol-standard RUN_FINISHED interrupt outcome and
  resumes from the client's top-level resume entries — the first real
  proof of #888/#889/#891 outside unit tests (verified live end-to-end on
  the OpenAI path through the served Angular app)
- subagents: not demonstrated (bridge emits no ACTIVITY stream; measured
  red upstream)

Model client: Azure OpenAI is the DEFAULT (AZURE_OPENAI_ENDPOINT/
API_KEY/MODEL/API_VERSION, key auth — structurally verified only, no Azure
credentials were available), falling back to the plain OpenAI client on
OPENAI_API_KEY (live-smoked; also the aimock e2e path via OPENAI_BASE_URL).
Both live in agent-framework-openai — no extra Azure package needed.

Wiring: registry entry rt-maf (product 'runtimes', framework
'microsoft-agent-framework', ports 4330/5330), cockpit/ports.mjs, smoke
project in ci.yml, deploy-ag-ui path trigger for cockpit/runtimes, and
regenerated deployments/ag-ui-dev (server.py mounts the agent via
add_agent_framework_fastapi_endpoint; requirements.txt gains
agent-framework-ag-ui==1.2.1 / core==1.16.0 / openai==1.14.1 via the
uv-export direct-deps mechanism; combined set uv-pip-compile resolves).

e2e: aimock fixture replay (hasToolResult entries precede the plain
userMessage entry; turnIndex disambiguates the two post-tool calls);
3 specs green. Prod build green (warning-only budget).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: blove

.github/workflows/ci.yml

@@ -252,7 +252,7 @@ jobs:
           node-version: 22
           cache: npm
       - run: npm ci
-      - 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,cockpit-chat-messages-python,cockpit-render-spec-rendering-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,cockpit-chat-messages-python,cockpit-render-spec-rendering-python,cockpit-runtimes-microsoft-agent-framework-python --skip-nx-cache
 
   cockpit-deploy-smoke:
     name: Cockpit — deploy smoke dry-run

.github/workflows/deploy-ag-ui.yml

@@ -5,6 +5,7 @@ on:
     branches: [main]
     paths:
       - 'cockpit/ag-ui/**/python/**'
+      - 'cockpit/runtimes/**/python/**'
       - 'apps/cockpit/scripts/capability-registry.ts'
       - 'scripts/generate-ag-ui-deployment-config.ts'
       - 'deployments/ag-ui-dev/**'

apps/cockpit/scripts/capability-registry.ts

@@ -76,6 +76,9 @@ export const capabilities: readonly Capability[] = [
   { id: 'ag-ui-client-tools', product: 'ag-ui', topic: 'client-tools', angularProject: 'cockpit-ag-ui-client-tools-angular', port: 4325, pythonPort: 5325, pythonDir: 'cockpit/ag-ui/client-tools/python' },
   { id: 'ag-ui-a2ui', product: 'ag-ui', topic: 'a2ui', angularProject: 'cockpit-ag-ui-a2ui-angular', port: 4324, pythonPort: 5324, pythonDir: 'cockpit/ag-ui/a2ui/python' },
   { id: 'ag-ui-subagents', product: 'ag-ui', topic: 'subagents', angularProject: 'cockpit-ag-ui-subagents-angular', port: 4326, pythonPort: 5326, pythonDir: 'cockpit/ag-ui/subagents/python' },
+  // Runtime-portability examples (one capability, many runtimes; AG-UI-served
+  // like the ag-ui caps, but the backend is genuinely non-LangGraph)
+  { id: 'rt-maf', product: 'runtimes', topic: 'microsoft-agent-framework', angularProject: 'cockpit-runtimes-microsoft-agent-framework-angular', port: 4330, pythonPort: 5330, pythonDir: 'cockpit/runtimes/microsoft-agent-framework/python', framework: 'microsoft-agent-framework' },
 ] as const;
 
 export function findCapability(id: string): Capability | undefined {

cockpit/ports.mjs

@@ -32,6 +32,7 @@ export const PORTS = Object.freeze({
   'cockpit-ag-ui-a2ui-angular': { angular: 4324, langgraph: 5324 },
   'cockpit-ag-ui-client-tools-angular': { angular: 4325, langgraph: 5325 },
   'cockpit-ag-ui-subagents-angular': { angular: 4326, langgraph: 5326 },
+  'cockpit-runtimes-microsoft-agent-framework-angular': { angular: 4330, langgraph: 5330 },
   'cockpit-chat-a2ui-angular': { angular: 4511, langgraph: 5511 },
   'cockpit-chat-debug-angular': { angular: 4509, langgraph: 5509 },
   'cockpit-chat-generative-ui-angular': { angular: 4508, langgraph: 5508 },

cockpit/runtimes/microsoft-agent-framework/angular/e2e/fixtures/microsoft-agent-framework.json

@@ -0,0 +1,39 @@
+{
+  "fixtures": [
+    {
+      "match": { "userMessage": "team dinner", "hasToolResult": true, "turnIndex": 2 },
+      "response": {
+        "content": "Your $220.00 expense to Blue Finch Bistro has been submitted for reimbursement."
+      }
+    },
+    {
+      "match": { "userMessage": "team dinner", "hasToolResult": true, "turnIndex": 1 },
+      "response": {
+        "toolCalls": [
+          {
+            "name": "submit_expense",
+            "arguments": {
+              "expense": {
+                "vendor": "Blue Finch Bistro",
+                "category": "meals",
+                "amount_usd": 220,
+                "memo": "Platform team offsite dinner, 6 attendees"
+              }
+            }
+          }
+        ]
+      }
+    },
+    {
+      "match": { "userMessage": "team dinner" },
+      "response": {
+        "toolCalls": [
+          {
+            "name": "lookup_expense_policy",
+            "arguments": { "category": "meals" }
+          }
+        ]
+      }
+    }
+  ]
+}

cockpit/runtimes/microsoft-agent-framework/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-runtimes-microsoft-agent-framework-angular');
+
+export default createAgUiGlobalSetup({
+  pythonCwd: 'cockpit/runtimes/microsoft-agent-framework/python',
+  backendPort: ports.langgraph,
+  angularProject: 'cockpit-runtimes-microsoft-agent-framework-angular',
+  angularPort: ports.angular,
+  fixturesDir: resolve(__dirname, 'fixtures'),
+});

cockpit/runtimes/microsoft-agent-framework/angular/e2e/microsoft-agent-framework.spec.ts

@@ -0,0 +1,36 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+
+// First proof outside unit tests that the neutral Agent contract's interrupt
+// path works against a genuinely non-LangGraph AG-UI backend: the Microsoft
+// Agent Framework bridge signals interrupts via the protocol-standard
+// RUN_FINISHED outcome (never CUSTOM on_interrupt), and resume goes out as
+// the top-level `resume` entry array.
+test.describe('cockpit runtimes/microsoft-agent-framework: expense approval', () => {
+  test('approval card displays the pending submit_expense call', async ({ page }) => {
+    await page.goto('/');
+    await page.getByText('File a team dinner expense').click();
+    const dialog = page.locator('dialog.chat-approval-card');
+    await expect(dialog).toBeVisible({ timeout: 30_000 });
+    await expect(dialog).toContainText('Expense approval required');
+    await expect(dialog).toContainText('Blue Finch Bistro');
+    await expect(dialog).toContainText('meals');
+  });
+
+  test('shared state panel mirrors the drafted expense', async ({ page }) => {
+    await page.goto('/');
+    await page.getByText('File a team dinner expense').click();
+    const panel = page.getByTestId('expense-state');
+    await expect(panel).toContainText('Blue Finch Bistro', { timeout: 30_000 });
+    await expect(panel).toContainText('$220.00');
+  });
+
+  test('Approve resumes the run and the expense is submitted', async ({ page }) => {
+    await page.goto('/');
+    await page.getByText('File a team dinner expense').click();
+    const dialog = page.locator('dialog.chat-approval-card');
+    await expect(dialog).toBeVisible({ timeout: 30_000 });
+    await dialog.getByRole('button', { name: 'Approve' }).click();
+    await expect(page.getByText(/has been submitted for reimbursement/i)).toBeVisible({ timeout: 30_000 });
+  });
+});

cockpit/runtimes/microsoft-agent-framework/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-runtimes-microsoft-agent-framework-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/runtimes/microsoft-agent-framework/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/runtimes/microsoft-agent-framework/angular/package.json

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