diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 83ed66601..2602a9287 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -48,7 +48,7 @@ jobs:
       # classifier walk.
       - run: npm ci
       - name: Test CI scope classifier
-        run: node --test scripts/ci-scope.spec.mjs scripts/cockpit-matrix.spec.mjs
+        run: node --test scripts/ci-scope.spec.mjs scripts/cockpit-matrix.spec.mjs scripts/cockpit-ports.spec.mjs
       - name: Detect changed CI surfaces
         id: scope
         run: |
diff --git a/apps/cockpit/cockpit-e2e-wiring.spec.ts b/apps/cockpit/cockpit-e2e-wiring.spec.ts
index e464b0c29..d5a71ea46 100644
--- a/apps/cockpit/cockpit-e2e-wiring.spec.ts
+++ b/apps/cockpit/cockpit-e2e-wiring.spec.ts
@@ -2,6 +2,9 @@ import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import { dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { capabilities } from './scripts/capability-registry';
+// @ts-expect-error — .mjs ES module without .d.ts; the e2e tsconfig uses
+// allowJs:true but this top-level test file doesn't go through that config.
+import { portsFor } from '../../cockpit/ports.mjs';
 
 interface E2eWiring {
   angularPort: number;
@@ -84,12 +87,23 @@ function activeCockpitE2eWiring(): E2eWiring[] {
       const projectRoot = dirname(projectJsonPath);
       const globalSetupPath = join(projectRoot, 'e2e/global-setup-impl.ts');
       const globalSetup = readFileSync(globalSetupPath, 'utf8');
-      const proxyPath = join(projectRoot, 'proxy.conf.json');
-      const proxy = JSON.parse(readFileSync(proxyPath, 'utf8')) as Record<string, { target?: string }>;
-      const proxyPort = Number(proxy['/api']?.target?.match(/:(\d+)$/)?.[1]);
       const langgraphCwd = parseStringProperty(globalSetup, 'langgraphCwd');
-      const langgraphPort = parseNumberProperty(globalSetup, 'langgraphPort') ?? proxyPort;
-      const angularPort = parseNumberProperty(globalSetup, 'angularPort');
+
+      // Post-port-registry migration: ports are imported from
+      // cockpit/ports.mjs rather than living as literals in
+      // global-setup-impl.ts. Look them up by project name.
+      let langgraphPort: number | undefined;
+      let angularPort: number | undefined;
+      try {
+        const ports = portsFor(project.name) as { angular: number; langgraph: number };
+        langgraphPort = ports.langgraph;
+        angularPort = ports.angular;
+      } catch {
+        // Cap not in registry (e.g. cockpit-ag-ui-streaming-angular).
+        // Fall back to parsing literals if global-setup still has them.
+        langgraphPort = parseNumberProperty(globalSetup, 'langgraphPort');
+        angularPort = parseNumberProperty(globalSetup, 'angularPort');
+      }
 
       if (!project.name || !langgraphCwd || !langgraphPort || !angularPort) {
         throw new Error(`Unable to parse e2e wiring for ${relative(repoRoot, projectJsonPath)}`);
@@ -153,16 +167,29 @@ describe('cockpit e2e wiring', () => {
         errors.push(`${wiring.project}: registry pythonDir ${capability.pythonDir} != global setup langgraphCwd ${wiring.langgraphCwd}`);
       }
 
-      const proxyPath = join(wiring.projectRoot, 'proxy.conf.json');
-      if (!existsSync(proxyPath)) {
-        errors.push(`${wiring.project}: missing proxy.conf.json`);
-      } else {
-        const proxy = JSON.parse(readFileSync(proxyPath, 'utf8')) as Record<string, { target?: string }>;
+      // Post-port-registry: proxy.conf.mjs templates the target from
+      // cockpit/ports.mjs at runtime. Drift is impossible because the
+      // value comes from the same registry the test already checks via
+      // wiring.langgraphPort. So we just assert the .mjs file exists +
+      // imports portsFor with this cap's name.
+      const proxyMjs = join(wiring.projectRoot, 'proxy.conf.mjs');
+      const proxyJson = join(wiring.projectRoot, 'proxy.conf.json');
+      if (existsSync(proxyMjs)) {
+        const text = readFileSync(proxyMjs, 'utf8');
+        if (!text.includes(`portsFor('${wiring.project}')`)) {
+          errors.push(`${wiring.project}: proxy.conf.mjs does not call portsFor('${wiring.project}')`);
+        }
+      } else if (existsSync(proxyJson)) {
+        // Legacy (allowed for ag-ui exception only); not expected for any
+        // cap reaching this code path.
+        const proxy = JSON.parse(readFileSync(proxyJson, 'utf8')) as Record<string, { target?: string }>;
         const target = proxy['/api']?.target;
         const expectedTarget = `http://localhost:${wiring.langgraphPort}`;
         if (target !== expectedTarget) {
           errors.push(`${wiring.project}: proxy target ${target} != ${expectedTarget}`);
         }
+      } else {
+        errors.push(`${wiring.project}: missing proxy.conf (no .mjs or .json)`);
       }
 
       const scriptsDir = join(wiring.projectRoot, 'e2e/scripts');
diff --git a/apps/website/content/docs/chat/api/api-docs.json b/apps/website/content/docs/chat/api/api-docs.json
index 1d98a8f1a..44625ad6c 100644
--- a/apps/website/content/docs/chat/api/api-docs.json
+++ b/apps/website/content/docs/chat/api/api-docs.json
@@ -1456,6 +1456,91 @@
     ],
     "methods": []
   },
+  {
+    "name": "ChatApprovalCardComponent",
+    "kind": "class",
+    "description": "",
+    "params": [],
+    "examples": [],
+    "properties": [
+      {
+        "name": "action",
+        "type": "OutputEmitterRef<ChatApprovalAction>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "agent",
+        "type": "InputSignal<Agent>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "bodyTemplate",
+        "type": "Signal<TemplateRef<unknown> | undefined>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "matchKind",
+        "type": "InputSignal<string | undefined>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "payload",
+        "type": "Signal<object | undefined>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "showEdit",
+        "type": "InputSignal<boolean>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "title",
+        "type": "InputSignal<string>",
+        "description": "",
+        "optional": false
+      }
+    ],
+    "methods": [
+      {
+        "name": "emit",
+        "signature": "emit(action: ChatApprovalAction)",
+        "description": "",
+        "params": [
+          {
+            "name": "action",
+            "type": "ChatApprovalAction",
+            "description": "",
+            "optional": false
+          }
+        ]
+      },
+      {
+        "name": "onCancelEvent",
+        "signature": "onCancelEvent(ev: Event)",
+        "description": "",
+        "params": [
+          {
+            "name": "ev",
+            "type": "Event",
+            "description": "",
+            "optional": false
+          }
+        ]
+      },
+      {
+        "name": "onDialogClose",
+        "signature": "onDialogClose()",
+        "description": "",
+        "params": []
+      }
+    ]
+  },
   {
     "name": "ChatCitationCardTemplateDirective",
     "kind": "class",
@@ -6376,6 +6461,13 @@
     "signature": "\"idle\" | \"running\" | \"error\"",
     "examples": []
   },
+  {
+    "name": "ChatApprovalAction",
+    "kind": "type",
+    "description": "",
+    "signature": "\"approve\" | \"edit\" | \"cancel\"",
+    "examples": []
+  },
   {
     "name": "ChatMessageRole",
     "kind": "type",
diff --git a/apps/website/src/app/global.css b/apps/website/src/app/global.css
index 76cafccfb..168efc345 100644
--- a/apps/website/src/app/global.css
+++ b/apps/website/src/app/global.css
@@ -5,6 +5,10 @@
   box-sizing: border-box;
 }
 
+html {
+  overflow-x: hidden;
+}
+
 body {
   background-color: var(--color-bg);
   color: var(--color-text-primary);
@@ -14,6 +18,14 @@ body {
   overflow-x: hidden;
 }
 
+/* Code blocks scroll internally; never expand the layout viewport. */
+pre, code {
+  max-width: 100%;
+}
+pre {
+  overflow-x: auto;
+}
+
 /* Long unbreakable tokens (e.g. package names like @threadplane/chat,
  * file paths like app.config.ts) live inside marketing headings and pull
  * the layout wider than the viewport on narrow phones. Allow breaking
diff --git a/apps/website/src/components/docs/DocsSidebar.tsx b/apps/website/src/components/docs/DocsSidebar.tsx
index 587d2d688..05f94393d 100644
--- a/apps/website/src/components/docs/DocsSidebar.tsx
+++ b/apps/website/src/components/docs/DocsSidebar.tsx
@@ -168,7 +168,7 @@ export function DocsSidebar({ activeLibrary, activeSection, activeSlug }: Props)
 
   return (
     <aside
-      className="w-64 shrink-0 py-6 overflow-y-auto hidden md:block"
+      className="w-64 shrink-0 py-6 overflow-y-auto hidden lg:block"
       style={{
         borderRight: `1px solid ${tokens.surfaces.border}`,
         background: tokens.surfaces.surface,
diff --git a/cockpit/chat/a2ui/angular/e2e/global-setup-impl.ts b/cockpit/chat/a2ui/angular/e2e/global-setup-impl.ts
index 41a60877f..e78550e1d 100644
--- a/cockpit/chat/a2ui/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/a2ui/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-a2ui-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/chat/a2ui/python',
-  langgraphPort: 5511,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-a2ui-angular',
-  angularPort: 4511,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/a2ui/angular/e2e/playwright.config.ts b/cockpit/chat/a2ui/angular/e2e/playwright.config.ts
index 29f94703f..98fdd40cb 100644
--- a/cockpit/chat/a2ui/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/a2ui/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-a2ui-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4511',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/a2ui/angular/e2e/tsconfig.json b/cockpit/chat/a2ui/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/a2ui/angular/e2e/tsconfig.json
+++ b/cockpit/chat/a2ui/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/a2ui/angular/project.json b/cockpit/chat/a2ui/angular/project.json
index 426cd388e..45c36b149 100644
--- a/cockpit/chat/a2ui/angular/project.json
+++ b/cockpit/chat/a2ui/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/a2ui/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/a2ui/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/chat/a2ui/angular/proxy.conf.json b/cockpit/chat/a2ui/angular/proxy.conf.json
deleted file mode 100644
index 60747be23..000000000
--- a/cockpit/chat/a2ui/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5511",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/a2ui/angular/proxy.conf.mjs b/cockpit/chat/a2ui/angular/proxy.conf.mjs
new file mode 100644
index 000000000..fcba5dce8
--- /dev/null
+++ b/cockpit/chat/a2ui/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-a2ui-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/debug/angular/project.json b/cockpit/chat/debug/angular/project.json
index 9560282fa..055441ad6 100644
--- a/cockpit/chat/debug/angular/project.json
+++ b/cockpit/chat/debug/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/debug/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/debug/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/chat/debug/angular/proxy.conf.json b/cockpit/chat/debug/angular/proxy.conf.json
deleted file mode 100644
index 374fb07ff..000000000
--- a/cockpit/chat/debug/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5509",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/debug/angular/proxy.conf.mjs b/cockpit/chat/debug/angular/proxy.conf.mjs
new file mode 100644
index 000000000..456d9f7a9
--- /dev/null
+++ b/cockpit/chat/debug/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-debug-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/generative-ui/angular/e2e/global-setup-impl.ts b/cockpit/chat/generative-ui/angular/e2e/global-setup-impl.ts
index 93dbc4661..71912bf1d 100644
--- a/cockpit/chat/generative-ui/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/generative-ui/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-generative-ui-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/chat/generative-ui/python',
-  langgraphPort: 5508,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-generative-ui-angular',
-  angularPort: 4508,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/generative-ui/angular/e2e/playwright.config.ts b/cockpit/chat/generative-ui/angular/e2e/playwright.config.ts
index 7c3a63dce..6d16cf2bd 100644
--- a/cockpit/chat/generative-ui/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/generative-ui/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-generative-ui-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4508',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/generative-ui/angular/e2e/tsconfig.json b/cockpit/chat/generative-ui/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/generative-ui/angular/e2e/tsconfig.json
+++ b/cockpit/chat/generative-ui/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/generative-ui/angular/project.json b/cockpit/chat/generative-ui/angular/project.json
index b1f018cd2..7b9a446c0 100644
--- a/cockpit/chat/generative-ui/angular/project.json
+++ b/cockpit/chat/generative-ui/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/generative-ui/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/generative-ui/angular/proxy.conf.mjs"
       }
     },
     "test": {
diff --git a/cockpit/chat/generative-ui/angular/proxy.conf.json b/cockpit/chat/generative-ui/angular/proxy.conf.json
deleted file mode 100644
index d31e2f5a3..000000000
--- a/cockpit/chat/generative-ui/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5508",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/generative-ui/angular/proxy.conf.mjs b/cockpit/chat/generative-ui/angular/proxy.conf.mjs
new file mode 100644
index 000000000..34e505f3f
--- /dev/null
+++ b/cockpit/chat/generative-ui/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-generative-ui-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/input/angular/e2e/global-setup-impl.ts b/cockpit/chat/input/angular/e2e/global-setup-impl.ts
index 81f8ddfc0..15a37a1dd 100644
--- a/cockpit/chat/input/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/input/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-input-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/chat/input/python',
-  langgraphPort: 5502,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-input-angular',
-  angularPort: 4502,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/input/angular/e2e/playwright.config.ts b/cockpit/chat/input/angular/e2e/playwright.config.ts
index 63497def7..abf3b77bd 100644
--- a/cockpit/chat/input/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/input/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-input-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4502',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/input/angular/e2e/tsconfig.json b/cockpit/chat/input/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/input/angular/e2e/tsconfig.json
+++ b/cockpit/chat/input/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/input/angular/project.json b/cockpit/chat/input/angular/project.json
index 108f44123..88047a803 100644
--- a/cockpit/chat/input/angular/project.json
+++ b/cockpit/chat/input/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/input/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/input/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/chat/input/angular/proxy.conf.json b/cockpit/chat/input/angular/proxy.conf.json
deleted file mode 100644
index 705be0f93..000000000
--- a/cockpit/chat/input/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5502",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/input/angular/proxy.conf.mjs b/cockpit/chat/input/angular/proxy.conf.mjs
new file mode 100644
index 000000000..fce42c62b
--- /dev/null
+++ b/cockpit/chat/input/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-input-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/interrupts/angular/e2e/global-setup-impl.ts b/cockpit/chat/interrupts/angular/e2e/global-setup-impl.ts
index 64e1ad06f..e22aae678 100644
--- a/cockpit/chat/interrupts/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/interrupts/angular/e2e/global-setup-impl.ts
@@ -1,14 +1,17 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-interrupts-angular');
+
 export default createGlobalSetup({
   // Per-cap cleanup PR: each chat cap runs its OWN standalone backend
   // (cockpit/chat/<name>/python) on `<angular_port> + 1000`. The
   // proxy.conf.json target matches.
   langgraphCwd: 'cockpit/chat/interrupts/python',
-  langgraphPort: 5503,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-interrupts-angular',
-  angularPort: 4503,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/interrupts/angular/e2e/playwright.config.ts b/cockpit/chat/interrupts/angular/e2e/playwright.config.ts
index 5e89f40f4..ea4681f22 100644
--- a/cockpit/chat/interrupts/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/interrupts/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-interrupts-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4503',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/interrupts/angular/e2e/tsconfig.json b/cockpit/chat/interrupts/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/interrupts/angular/e2e/tsconfig.json
+++ b/cockpit/chat/interrupts/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/interrupts/angular/project.json b/cockpit/chat/interrupts/angular/project.json
index dc01f942b..cb75fdb84 100644
--- a/cockpit/chat/interrupts/angular/project.json
+++ b/cockpit/chat/interrupts/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/interrupts/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/interrupts/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/chat/interrupts/angular/proxy.conf.json b/cockpit/chat/interrupts/angular/proxy.conf.json
deleted file mode 100644
index 8f8efae23..000000000
--- a/cockpit/chat/interrupts/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5503",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/interrupts/angular/proxy.conf.mjs b/cockpit/chat/interrupts/angular/proxy.conf.mjs
new file mode 100644
index 000000000..d81f69fa4
--- /dev/null
+++ b/cockpit/chat/interrupts/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-interrupts-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/messages/angular/e2e/global-setup-impl.ts b/cockpit/chat/messages/angular/e2e/global-setup-impl.ts
index 3ff48965b..0b258b604 100644
--- a/cockpit/chat/messages/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/messages/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-messages-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/chat/messages/python',
-  langgraphPort: 5501,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-messages-angular',
-  angularPort: 4501,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/messages/angular/e2e/playwright.config.ts b/cockpit/chat/messages/angular/e2e/playwright.config.ts
index d5bba8ded..775cafdb7 100644
--- a/cockpit/chat/messages/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/messages/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-messages-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4501',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/messages/angular/e2e/tsconfig.json b/cockpit/chat/messages/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/messages/angular/e2e/tsconfig.json
+++ b/cockpit/chat/messages/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/messages/angular/project.json b/cockpit/chat/messages/angular/project.json
index 7204ee9a2..e5b3f4c0e 100644
--- a/cockpit/chat/messages/angular/project.json
+++ b/cockpit/chat/messages/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/messages/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/messages/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/chat/messages/angular/proxy.conf.json b/cockpit/chat/messages/angular/proxy.conf.json
deleted file mode 100644
index d6e7e14a4..000000000
--- a/cockpit/chat/messages/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5501",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/messages/angular/proxy.conf.mjs b/cockpit/chat/messages/angular/proxy.conf.mjs
new file mode 100644
index 000000000..303a7d466
--- /dev/null
+++ b/cockpit/chat/messages/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-messages-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/subagents/angular/e2e/global-setup-impl.ts b/cockpit/chat/subagents/angular/e2e/global-setup-impl.ts
index 9c26ff1f4..e728c1d87 100644
--- a/cockpit/chat/subagents/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/subagents/angular/e2e/global-setup-impl.ts
@@ -1,14 +1,17 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-subagents-angular');
+
 export default createGlobalSetup({
   // Per-cap cleanup PR: each chat cap runs its OWN standalone backend
   // (cockpit/chat/<name>/python) on `<angular_port> + 1000`. The
   // proxy.conf.json target matches.
   langgraphCwd: 'cockpit/chat/subagents/python',
-  langgraphPort: 5505,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-subagents-angular',
-  angularPort: 4505,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/subagents/angular/e2e/playwright.config.ts b/cockpit/chat/subagents/angular/e2e/playwright.config.ts
index 9900846a5..99d19bba0 100644
--- a/cockpit/chat/subagents/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/subagents/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-subagents-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4505',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/subagents/angular/e2e/tsconfig.json b/cockpit/chat/subagents/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/subagents/angular/e2e/tsconfig.json
+++ b/cockpit/chat/subagents/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/subagents/angular/project.json b/cockpit/chat/subagents/angular/project.json
index 27ccd646e..5f56a089c 100644
--- a/cockpit/chat/subagents/angular/project.json
+++ b/cockpit/chat/subagents/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/subagents/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/subagents/angular/proxy.conf.mjs"
       }
     },
     "e2e": {
diff --git a/cockpit/chat/subagents/angular/proxy.conf.json b/cockpit/chat/subagents/angular/proxy.conf.json
deleted file mode 100644
index 189347ed6..000000000
--- a/cockpit/chat/subagents/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5505",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/subagents/angular/proxy.conf.mjs b/cockpit/chat/subagents/angular/proxy.conf.mjs
new file mode 100644
index 000000000..cdde193c5
--- /dev/null
+++ b/cockpit/chat/subagents/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-subagents-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/theming/angular/e2e/global-setup-impl.ts b/cockpit/chat/theming/angular/e2e/global-setup-impl.ts
index 731928b12..091cb280b 100644
--- a/cockpit/chat/theming/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/theming/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-theming-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/chat/theming/python',
-  langgraphPort: 5510,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-theming-angular',
-  angularPort: 4510,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/theming/angular/e2e/playwright.config.ts b/cockpit/chat/theming/angular/e2e/playwright.config.ts
index 34f2d3fda..49d8c008a 100644
--- a/cockpit/chat/theming/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/theming/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-theming-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4510',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/theming/angular/e2e/tsconfig.json b/cockpit/chat/theming/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/theming/angular/e2e/tsconfig.json
+++ b/cockpit/chat/theming/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/theming/angular/project.json b/cockpit/chat/theming/angular/project.json
index 1aace858d..64827d065 100644
--- a/cockpit/chat/theming/angular/project.json
+++ b/cockpit/chat/theming/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/theming/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/theming/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/chat/theming/angular/proxy.conf.json b/cockpit/chat/theming/angular/proxy.conf.json
deleted file mode 100644
index 94122df97..000000000
--- a/cockpit/chat/theming/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5510",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/theming/angular/proxy.conf.mjs b/cockpit/chat/theming/angular/proxy.conf.mjs
new file mode 100644
index 000000000..141bb7f01
--- /dev/null
+++ b/cockpit/chat/theming/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-theming-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/threads/angular/e2e/global-setup-impl.ts b/cockpit/chat/threads/angular/e2e/global-setup-impl.ts
index 9143ce3ed..0f200e9e9 100644
--- a/cockpit/chat/threads/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/threads/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-threads-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/chat/threads/python',
-  langgraphPort: 5506,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-threads-angular',
-  angularPort: 4506,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/threads/angular/e2e/playwright.config.ts b/cockpit/chat/threads/angular/e2e/playwright.config.ts
index 085d8757b..5866944f9 100644
--- a/cockpit/chat/threads/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/threads/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-threads-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4506',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/threads/angular/e2e/tsconfig.json b/cockpit/chat/threads/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/threads/angular/e2e/tsconfig.json
+++ b/cockpit/chat/threads/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/threads/angular/project.json b/cockpit/chat/threads/angular/project.json
index 83968c5d8..d77a77bc2 100644
--- a/cockpit/chat/threads/angular/project.json
+++ b/cockpit/chat/threads/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/threads/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/threads/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/chat/threads/angular/proxy.conf.json b/cockpit/chat/threads/angular/proxy.conf.json
deleted file mode 100644
index 269dcbcf2..000000000
--- a/cockpit/chat/threads/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5506",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/threads/angular/proxy.conf.mjs b/cockpit/chat/threads/angular/proxy.conf.mjs
new file mode 100644
index 000000000..bd9f167ab
--- /dev/null
+++ b/cockpit/chat/threads/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-threads-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/timeline/angular/e2e/global-setup-impl.ts b/cockpit/chat/timeline/angular/e2e/global-setup-impl.ts
index 14f75ddee..912156438 100644
--- a/cockpit/chat/timeline/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/timeline/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-timeline-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/chat/timeline/python',
-  langgraphPort: 5507,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-timeline-angular',
-  angularPort: 4507,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/timeline/angular/e2e/playwright.config.ts b/cockpit/chat/timeline/angular/e2e/playwright.config.ts
index 153e86266..146ce930a 100644
--- a/cockpit/chat/timeline/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/timeline/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-timeline-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4507',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/timeline/angular/e2e/tsconfig.json b/cockpit/chat/timeline/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/timeline/angular/e2e/tsconfig.json
+++ b/cockpit/chat/timeline/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/timeline/angular/project.json b/cockpit/chat/timeline/angular/project.json
index bc100fb8b..58e21ebd2 100644
--- a/cockpit/chat/timeline/angular/project.json
+++ b/cockpit/chat/timeline/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/timeline/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/timeline/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/chat/timeline/angular/proxy.conf.json b/cockpit/chat/timeline/angular/proxy.conf.json
deleted file mode 100644
index 4cda42f98..000000000
--- a/cockpit/chat/timeline/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5507",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/timeline/angular/proxy.conf.mjs b/cockpit/chat/timeline/angular/proxy.conf.mjs
new file mode 100644
index 000000000..fbc366f6e
--- /dev/null
+++ b/cockpit/chat/timeline/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-timeline-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/chat/tool-calls/angular/e2e/global-setup-impl.ts b/cockpit/chat/tool-calls/angular/e2e/global-setup-impl.ts
index 2417204c9..6c874191a 100644
--- a/cockpit/chat/tool-calls/angular/e2e/global-setup-impl.ts
+++ b/cockpit/chat/tool-calls/angular/e2e/global-setup-impl.ts
@@ -1,14 +1,17 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-chat-tool-calls-angular');
+
 export default createGlobalSetup({
   // Per-cap cleanup PR: each chat cap runs its OWN standalone backend
   // (cockpit/chat/<name>/python) on `<angular_port> + 1000`. The
   // proxy.conf.json target matches.
   langgraphCwd: 'cockpit/chat/tool-calls/python',
-  langgraphPort: 5504,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-chat-tool-calls-angular',
-  angularPort: 4504,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/chat/tool-calls/angular/e2e/playwright.config.ts b/cockpit/chat/tool-calls/angular/e2e/playwright.config.ts
index 652db126c..95c9bbc17 100644
--- a/cockpit/chat/tool-calls/angular/e2e/playwright.config.ts
+++ b/cockpit/chat/tool-calls/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-chat-tool-calls-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4504',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/chat/tool-calls/angular/e2e/tsconfig.json b/cockpit/chat/tool-calls/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/chat/tool-calls/angular/e2e/tsconfig.json
+++ b/cockpit/chat/tool-calls/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/chat/tool-calls/angular/project.json b/cockpit/chat/tool-calls/angular/project.json
index e111070e8..3ced4d298 100644
--- a/cockpit/chat/tool-calls/angular/project.json
+++ b/cockpit/chat/tool-calls/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/chat/tool-calls/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/chat/tool-calls/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/chat/tool-calls/angular/proxy.conf.json b/cockpit/chat/tool-calls/angular/proxy.conf.json
deleted file mode 100644
index 239ce106c..000000000
--- a/cockpit/chat/tool-calls/angular/proxy.conf.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5504",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": { "^/api": "" },
-    "ws": true
-  }
-}
diff --git a/cockpit/chat/tool-calls/angular/proxy.conf.mjs b/cockpit/chat/tool-calls/angular/proxy.conf.mjs
new file mode 100644
index 000000000..77060a1b0
--- /dev/null
+++ b/cockpit/chat/tool-calls/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-tool-calls-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/deep-agents/filesystem/angular/e2e/global-setup-impl.ts b/cockpit/deep-agents/filesystem/angular/e2e/global-setup-impl.ts
index 94662c5f1..462769b4d 100644
--- a/cockpit/deep-agents/filesystem/angular/e2e/global-setup-impl.ts
+++ b/cockpit/deep-agents/filesystem/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-deep-agents-filesystem-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/deep-agents/filesystem/python',
-  langgraphPort: 5311,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-deep-agents-filesystem-angular',
-  angularPort: 4311,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/deep-agents/filesystem/angular/e2e/playwright.config.ts b/cockpit/deep-agents/filesystem/angular/e2e/playwright.config.ts
index 972651491..849d51d2d 100644
--- a/cockpit/deep-agents/filesystem/angular/e2e/playwright.config.ts
+++ b/cockpit/deep-agents/filesystem/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-deep-agents-filesystem-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4311',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/deep-agents/filesystem/angular/e2e/tsconfig.json b/cockpit/deep-agents/filesystem/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/deep-agents/filesystem/angular/e2e/tsconfig.json
+++ b/cockpit/deep-agents/filesystem/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/deep-agents/filesystem/angular/project.json b/cockpit/deep-agents/filesystem/angular/project.json
index 3966a1d42..8bb7cfbd1 100644
--- a/cockpit/deep-agents/filesystem/angular/project.json
+++ b/cockpit/deep-agents/filesystem/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/deep-agents/filesystem/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/deep-agents/filesystem/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/deep-agents/filesystem/angular/proxy.conf.json b/cockpit/deep-agents/filesystem/angular/proxy.conf.json
deleted file mode 100644
index 3068de091..000000000
--- a/cockpit/deep-agents/filesystem/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5311",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/deep-agents/filesystem/angular/proxy.conf.mjs b/cockpit/deep-agents/filesystem/angular/proxy.conf.mjs
new file mode 100644
index 000000000..2e79f5e2a
--- /dev/null
+++ b/cockpit/deep-agents/filesystem/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-deep-agents-filesystem-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/deep-agents/memory/angular/e2e/global-setup-impl.ts b/cockpit/deep-agents/memory/angular/e2e/global-setup-impl.ts
index 6aa7347dd..4f9df91a2 100644
--- a/cockpit/deep-agents/memory/angular/e2e/global-setup-impl.ts
+++ b/cockpit/deep-agents/memory/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-deep-agents-memory-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/deep-agents/memory/python',
-  langgraphPort: 5313,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-deep-agents-memory-angular',
-  angularPort: 4313,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/deep-agents/memory/angular/e2e/playwright.config.ts b/cockpit/deep-agents/memory/angular/e2e/playwright.config.ts
index 08bdb31ba..69c20b8e3 100644
--- a/cockpit/deep-agents/memory/angular/e2e/playwright.config.ts
+++ b/cockpit/deep-agents/memory/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-deep-agents-memory-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4313',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/deep-agents/memory/angular/e2e/tsconfig.json b/cockpit/deep-agents/memory/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/deep-agents/memory/angular/e2e/tsconfig.json
+++ b/cockpit/deep-agents/memory/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/deep-agents/memory/angular/project.json b/cockpit/deep-agents/memory/angular/project.json
index 61439b962..14139bf28 100644
--- a/cockpit/deep-agents/memory/angular/project.json
+++ b/cockpit/deep-agents/memory/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/deep-agents/memory/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/deep-agents/memory/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/deep-agents/memory/angular/proxy.conf.json b/cockpit/deep-agents/memory/angular/proxy.conf.json
deleted file mode 100644
index 020a0ca44..000000000
--- a/cockpit/deep-agents/memory/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5313",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/deep-agents/memory/angular/proxy.conf.mjs b/cockpit/deep-agents/memory/angular/proxy.conf.mjs
new file mode 100644
index 000000000..3c51c904e
--- /dev/null
+++ b/cockpit/deep-agents/memory/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-deep-agents-memory-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/deep-agents/planning/angular/e2e/global-setup-impl.ts b/cockpit/deep-agents/planning/angular/e2e/global-setup-impl.ts
index 80842a400..20f446691 100644
--- a/cockpit/deep-agents/planning/angular/e2e/global-setup-impl.ts
+++ b/cockpit/deep-agents/planning/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-deep-agents-planning-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/deep-agents/planning/python',
-  langgraphPort: 5310,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-deep-agents-planning-angular',
-  angularPort: 4310,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/deep-agents/planning/angular/e2e/playwright.config.ts b/cockpit/deep-agents/planning/angular/e2e/playwright.config.ts
index 976b82461..ad2a9ce81 100644
--- a/cockpit/deep-agents/planning/angular/e2e/playwright.config.ts
+++ b/cockpit/deep-agents/planning/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-deep-agents-planning-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4310',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/deep-agents/planning/angular/e2e/tsconfig.json b/cockpit/deep-agents/planning/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/deep-agents/planning/angular/e2e/tsconfig.json
+++ b/cockpit/deep-agents/planning/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/deep-agents/planning/angular/project.json b/cockpit/deep-agents/planning/angular/project.json
index 05bb86484..69d04c223 100644
--- a/cockpit/deep-agents/planning/angular/project.json
+++ b/cockpit/deep-agents/planning/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/deep-agents/planning/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/deep-agents/planning/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/deep-agents/planning/angular/proxy.conf.json b/cockpit/deep-agents/planning/angular/proxy.conf.json
deleted file mode 100644
index 2c71ffe1d..000000000
--- a/cockpit/deep-agents/planning/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5310",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/deep-agents/planning/angular/proxy.conf.mjs b/cockpit/deep-agents/planning/angular/proxy.conf.mjs
new file mode 100644
index 000000000..52babdbf7
--- /dev/null
+++ b/cockpit/deep-agents/planning/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-deep-agents-planning-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/deep-agents/sandboxes/angular/e2e/global-setup-impl.ts b/cockpit/deep-agents/sandboxes/angular/e2e/global-setup-impl.ts
index a3fe7c6a9..447a8d3a4 100644
--- a/cockpit/deep-agents/sandboxes/angular/e2e/global-setup-impl.ts
+++ b/cockpit/deep-agents/sandboxes/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-deep-agents-sandboxes-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/deep-agents/sandboxes/python',
-  langgraphPort: 5315,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-deep-agents-sandboxes-angular',
-  angularPort: 4315,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/deep-agents/sandboxes/angular/e2e/playwright.config.ts b/cockpit/deep-agents/sandboxes/angular/e2e/playwright.config.ts
index 2f07e56c9..3c4ef9ac4 100644
--- a/cockpit/deep-agents/sandboxes/angular/e2e/playwright.config.ts
+++ b/cockpit/deep-agents/sandboxes/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-deep-agents-sandboxes-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4315',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/deep-agents/sandboxes/angular/e2e/tsconfig.json b/cockpit/deep-agents/sandboxes/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/deep-agents/sandboxes/angular/e2e/tsconfig.json
+++ b/cockpit/deep-agents/sandboxes/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/deep-agents/sandboxes/angular/project.json b/cockpit/deep-agents/sandboxes/angular/project.json
index 4749f41ca..8db313d85 100644
--- a/cockpit/deep-agents/sandboxes/angular/project.json
+++ b/cockpit/deep-agents/sandboxes/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/deep-agents/sandboxes/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/deep-agents/sandboxes/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/deep-agents/sandboxes/angular/proxy.conf.json b/cockpit/deep-agents/sandboxes/angular/proxy.conf.json
deleted file mode 100644
index c20d5a91a..000000000
--- a/cockpit/deep-agents/sandboxes/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5315",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/deep-agents/sandboxes/angular/proxy.conf.mjs b/cockpit/deep-agents/sandboxes/angular/proxy.conf.mjs
new file mode 100644
index 000000000..5ad229af3
--- /dev/null
+++ b/cockpit/deep-agents/sandboxes/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-deep-agents-sandboxes-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/deep-agents/skills/angular/e2e/global-setup-impl.ts b/cockpit/deep-agents/skills/angular/e2e/global-setup-impl.ts
index fed786b49..905e31f3a 100644
--- a/cockpit/deep-agents/skills/angular/e2e/global-setup-impl.ts
+++ b/cockpit/deep-agents/skills/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-deep-agents-skills-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/deep-agents/skills/python',
-  langgraphPort: 5314,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-deep-agents-skills-angular',
-  angularPort: 4314,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/deep-agents/skills/angular/e2e/playwright.config.ts b/cockpit/deep-agents/skills/angular/e2e/playwright.config.ts
index 254316004..253626e74 100644
--- a/cockpit/deep-agents/skills/angular/e2e/playwright.config.ts
+++ b/cockpit/deep-agents/skills/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-deep-agents-skills-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4314',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/deep-agents/skills/angular/e2e/tsconfig.json b/cockpit/deep-agents/skills/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/deep-agents/skills/angular/e2e/tsconfig.json
+++ b/cockpit/deep-agents/skills/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/deep-agents/skills/angular/project.json b/cockpit/deep-agents/skills/angular/project.json
index dccf8d9df..04d1dd997 100644
--- a/cockpit/deep-agents/skills/angular/project.json
+++ b/cockpit/deep-agents/skills/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/deep-agents/skills/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/deep-agents/skills/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/deep-agents/skills/angular/proxy.conf.json b/cockpit/deep-agents/skills/angular/proxy.conf.json
deleted file mode 100644
index 76e30cf6b..000000000
--- a/cockpit/deep-agents/skills/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5314",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/deep-agents/skills/angular/proxy.conf.mjs b/cockpit/deep-agents/skills/angular/proxy.conf.mjs
new file mode 100644
index 000000000..ea243e5c4
--- /dev/null
+++ b/cockpit/deep-agents/skills/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-deep-agents-skills-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/deep-agents/subagents/angular/e2e/global-setup-impl.ts b/cockpit/deep-agents/subagents/angular/e2e/global-setup-impl.ts
index ebbd93b8b..d73b63b0c 100644
--- a/cockpit/deep-agents/subagents/angular/e2e/global-setup-impl.ts
+++ b/cockpit/deep-agents/subagents/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-deep-agents-subagents-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/deep-agents/subagents/python',
-  langgraphPort: 5312,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-deep-agents-subagents-angular',
-  angularPort: 4312,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/deep-agents/subagents/angular/e2e/playwright.config.ts b/cockpit/deep-agents/subagents/angular/e2e/playwright.config.ts
index b94680ee4..8a517927d 100644
--- a/cockpit/deep-agents/subagents/angular/e2e/playwright.config.ts
+++ b/cockpit/deep-agents/subagents/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-deep-agents-subagents-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4312',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/deep-agents/subagents/angular/e2e/tsconfig.json b/cockpit/deep-agents/subagents/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/deep-agents/subagents/angular/e2e/tsconfig.json
+++ b/cockpit/deep-agents/subagents/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/deep-agents/subagents/angular/project.json b/cockpit/deep-agents/subagents/angular/project.json
index ddb639b18..48bf14c1d 100644
--- a/cockpit/deep-agents/subagents/angular/project.json
+++ b/cockpit/deep-agents/subagents/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/deep-agents/subagents/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/deep-agents/subagents/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/deep-agents/subagents/angular/proxy.conf.json b/cockpit/deep-agents/subagents/angular/proxy.conf.json
deleted file mode 100644
index 8985a469d..000000000
--- a/cockpit/deep-agents/subagents/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5312",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/deep-agents/subagents/angular/proxy.conf.mjs b/cockpit/deep-agents/subagents/angular/proxy.conf.mjs
new file mode 100644
index 000000000..f477d7945
--- /dev/null
+++ b/cockpit/deep-agents/subagents/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-deep-agents-subagents-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/langgraph/deployment-runtime/angular/e2e/global-setup-impl.ts b/cockpit/langgraph/deployment-runtime/angular/e2e/global-setup-impl.ts
index 57a1b9af6..591062680 100644
--- a/cockpit/langgraph/deployment-runtime/angular/e2e/global-setup-impl.ts
+++ b/cockpit/langgraph/deployment-runtime/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-langgraph-deployment-runtime-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/langgraph/deployment-runtime/python',
-  langgraphPort: 5307,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-langgraph-deployment-runtime-angular',
-  angularPort: 4307,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/langgraph/deployment-runtime/angular/e2e/playwright.config.ts b/cockpit/langgraph/deployment-runtime/angular/e2e/playwright.config.ts
index cee41f1a4..af5053992 100644
--- a/cockpit/langgraph/deployment-runtime/angular/e2e/playwright.config.ts
+++ b/cockpit/langgraph/deployment-runtime/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-langgraph-deployment-runtime-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4307',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/langgraph/deployment-runtime/angular/e2e/tsconfig.json b/cockpit/langgraph/deployment-runtime/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/langgraph/deployment-runtime/angular/e2e/tsconfig.json
+++ b/cockpit/langgraph/deployment-runtime/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/langgraph/deployment-runtime/angular/project.json b/cockpit/langgraph/deployment-runtime/angular/project.json
index 19c9ea5e4..f10f799dd 100644
--- a/cockpit/langgraph/deployment-runtime/angular/project.json
+++ b/cockpit/langgraph/deployment-runtime/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/langgraph/deployment-runtime/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/langgraph/deployment-runtime/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/langgraph/deployment-runtime/angular/proxy.conf.json b/cockpit/langgraph/deployment-runtime/angular/proxy.conf.json
deleted file mode 100644
index 73b38f86f..000000000
--- a/cockpit/langgraph/deployment-runtime/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5307",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/langgraph/deployment-runtime/angular/proxy.conf.mjs b/cockpit/langgraph/deployment-runtime/angular/proxy.conf.mjs
new file mode 100644
index 000000000..4dfac51a3
--- /dev/null
+++ b/cockpit/langgraph/deployment-runtime/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-langgraph-deployment-runtime-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/langgraph/durable-execution/angular/e2e/global-setup-impl.ts b/cockpit/langgraph/durable-execution/angular/e2e/global-setup-impl.ts
index c8246e7bd..5f88553ca 100644
--- a/cockpit/langgraph/durable-execution/angular/e2e/global-setup-impl.ts
+++ b/cockpit/langgraph/durable-execution/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-langgraph-durable-execution-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/langgraph/durable-execution/python',
-  langgraphPort: 5304,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-langgraph-durable-execution-angular',
-  angularPort: 4304,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/langgraph/durable-execution/angular/e2e/playwright.config.ts b/cockpit/langgraph/durable-execution/angular/e2e/playwright.config.ts
index 52f41a3d8..b7bcbee4f 100644
--- a/cockpit/langgraph/durable-execution/angular/e2e/playwright.config.ts
+++ b/cockpit/langgraph/durable-execution/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-langgraph-durable-execution-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4304',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/langgraph/durable-execution/angular/e2e/tsconfig.json b/cockpit/langgraph/durable-execution/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/langgraph/durable-execution/angular/e2e/tsconfig.json
+++ b/cockpit/langgraph/durable-execution/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/langgraph/durable-execution/angular/project.json b/cockpit/langgraph/durable-execution/angular/project.json
index d0ce201a2..55db9b895 100644
--- a/cockpit/langgraph/durable-execution/angular/project.json
+++ b/cockpit/langgraph/durable-execution/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/langgraph/durable-execution/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/langgraph/durable-execution/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/langgraph/durable-execution/angular/proxy.conf.json b/cockpit/langgraph/durable-execution/angular/proxy.conf.json
deleted file mode 100644
index 3635c6456..000000000
--- a/cockpit/langgraph/durable-execution/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5304",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/langgraph/durable-execution/angular/proxy.conf.mjs b/cockpit/langgraph/durable-execution/angular/proxy.conf.mjs
new file mode 100644
index 000000000..1fd9b6946
--- /dev/null
+++ b/cockpit/langgraph/durable-execution/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-langgraph-durable-execution-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/langgraph/interrupts/angular/e2e/global-setup-impl.ts b/cockpit/langgraph/interrupts/angular/e2e/global-setup-impl.ts
index 1dea7dceb..269db5752 100644
--- a/cockpit/langgraph/interrupts/angular/e2e/global-setup-impl.ts
+++ b/cockpit/langgraph/interrupts/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-langgraph-interrupts-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/langgraph/interrupts/python',
-  langgraphPort: 5302,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-langgraph-interrupts-angular',
-  angularPort: 4302,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/langgraph/interrupts/angular/e2e/playwright.config.ts b/cockpit/langgraph/interrupts/angular/e2e/playwright.config.ts
index 611ac2c44..f537f339f 100644
--- a/cockpit/langgraph/interrupts/angular/e2e/playwright.config.ts
+++ b/cockpit/langgraph/interrupts/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-langgraph-interrupts-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4302',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/langgraph/interrupts/angular/e2e/tsconfig.json b/cockpit/langgraph/interrupts/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/langgraph/interrupts/angular/e2e/tsconfig.json
+++ b/cockpit/langgraph/interrupts/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/langgraph/interrupts/angular/project.json b/cockpit/langgraph/interrupts/angular/project.json
index 447e2fe9e..a175c8eb2 100644
--- a/cockpit/langgraph/interrupts/angular/project.json
+++ b/cockpit/langgraph/interrupts/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/langgraph/interrupts/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/langgraph/interrupts/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/langgraph/interrupts/angular/proxy.conf.json b/cockpit/langgraph/interrupts/angular/proxy.conf.json
deleted file mode 100644
index 1e81d1e55..000000000
--- a/cockpit/langgraph/interrupts/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5302",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/langgraph/interrupts/angular/proxy.conf.mjs b/cockpit/langgraph/interrupts/angular/proxy.conf.mjs
new file mode 100644
index 000000000..b3bfea65a
--- /dev/null
+++ b/cockpit/langgraph/interrupts/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-langgraph-interrupts-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/langgraph/memory/angular/e2e/global-setup-impl.ts b/cockpit/langgraph/memory/angular/e2e/global-setup-impl.ts
index 18cfb2329..ae4c04a99 100644
--- a/cockpit/langgraph/memory/angular/e2e/global-setup-impl.ts
+++ b/cockpit/langgraph/memory/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-langgraph-memory-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/langgraph/memory/python',
-  langgraphPort: 5303,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-langgraph-memory-angular',
-  angularPort: 4303,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/langgraph/memory/angular/e2e/playwright.config.ts b/cockpit/langgraph/memory/angular/e2e/playwright.config.ts
index c9ac84999..202919279 100644
--- a/cockpit/langgraph/memory/angular/e2e/playwright.config.ts
+++ b/cockpit/langgraph/memory/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-langgraph-memory-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4303',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/langgraph/memory/angular/e2e/tsconfig.json b/cockpit/langgraph/memory/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/langgraph/memory/angular/e2e/tsconfig.json
+++ b/cockpit/langgraph/memory/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/langgraph/memory/angular/project.json b/cockpit/langgraph/memory/angular/project.json
index 266c21769..ea04be9cc 100644
--- a/cockpit/langgraph/memory/angular/project.json
+++ b/cockpit/langgraph/memory/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/langgraph/memory/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/langgraph/memory/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/langgraph/memory/angular/proxy.conf.json b/cockpit/langgraph/memory/angular/proxy.conf.json
deleted file mode 100644
index 2ccccc5c7..000000000
--- a/cockpit/langgraph/memory/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5303",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/langgraph/memory/angular/proxy.conf.mjs b/cockpit/langgraph/memory/angular/proxy.conf.mjs
new file mode 100644
index 000000000..81d8b6709
--- /dev/null
+++ b/cockpit/langgraph/memory/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-langgraph-memory-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/langgraph/persistence/angular/e2e/global-setup-impl.ts b/cockpit/langgraph/persistence/angular/e2e/global-setup-impl.ts
index 3d5dc5948..f5dd3efda 100644
--- a/cockpit/langgraph/persistence/angular/e2e/global-setup-impl.ts
+++ b/cockpit/langgraph/persistence/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-langgraph-persistence-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/langgraph/persistence/python',
-  langgraphPort: 5301,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-langgraph-persistence-angular',
-  angularPort: 4301,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/langgraph/persistence/angular/e2e/playwright.config.ts b/cockpit/langgraph/persistence/angular/e2e/playwright.config.ts
index 0f924be48..adc041c0b 100644
--- a/cockpit/langgraph/persistence/angular/e2e/playwright.config.ts
+++ b/cockpit/langgraph/persistence/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-langgraph-persistence-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4301',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/langgraph/persistence/angular/e2e/tsconfig.json b/cockpit/langgraph/persistence/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/langgraph/persistence/angular/e2e/tsconfig.json
+++ b/cockpit/langgraph/persistence/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/langgraph/persistence/angular/project.json b/cockpit/langgraph/persistence/angular/project.json
index 0e7a75294..ef00e0e1c 100644
--- a/cockpit/langgraph/persistence/angular/project.json
+++ b/cockpit/langgraph/persistence/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/langgraph/persistence/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/langgraph/persistence/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/langgraph/persistence/angular/proxy.conf.json b/cockpit/langgraph/persistence/angular/proxy.conf.json
deleted file mode 100644
index dbab65e02..000000000
--- a/cockpit/langgraph/persistence/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5301",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/langgraph/persistence/angular/proxy.conf.mjs b/cockpit/langgraph/persistence/angular/proxy.conf.mjs
new file mode 100644
index 000000000..0ca517a7d
--- /dev/null
+++ b/cockpit/langgraph/persistence/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-langgraph-persistence-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/langgraph/streaming/angular/e2e/global-setup-impl.ts b/cockpit/langgraph/streaming/angular/e2e/global-setup-impl.ts
index f8c7eda2f..4e91554b4 100644
--- a/cockpit/langgraph/streaming/angular/e2e/global-setup-impl.ts
+++ b/cockpit/langgraph/streaming/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-langgraph-streaming-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/langgraph/streaming/python',
-  langgraphPort: 5300,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-langgraph-streaming-angular',
-  angularPort: 4300,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/langgraph/streaming/angular/e2e/playwright.config.ts b/cockpit/langgraph/streaming/angular/e2e/playwright.config.ts
index 9592e1d79..bffbc6bd0 100644
--- a/cockpit/langgraph/streaming/angular/e2e/playwright.config.ts
+++ b/cockpit/langgraph/streaming/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-langgraph-streaming-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4300',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/langgraph/streaming/angular/e2e/tsconfig.json b/cockpit/langgraph/streaming/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/langgraph/streaming/angular/e2e/tsconfig.json
+++ b/cockpit/langgraph/streaming/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/langgraph/streaming/angular/project.json b/cockpit/langgraph/streaming/angular/project.json
index da0e92775..4ad421102 100644
--- a/cockpit/langgraph/streaming/angular/project.json
+++ b/cockpit/langgraph/streaming/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/langgraph/streaming/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/langgraph/streaming/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/langgraph/streaming/angular/proxy.conf.json b/cockpit/langgraph/streaming/angular/proxy.conf.json
deleted file mode 100644
index 65d40b4b5..000000000
--- a/cockpit/langgraph/streaming/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5300",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/langgraph/streaming/angular/proxy.conf.mjs b/cockpit/langgraph/streaming/angular/proxy.conf.mjs
new file mode 100644
index 000000000..d0fd52b77
--- /dev/null
+++ b/cockpit/langgraph/streaming/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-langgraph-streaming-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/langgraph/subgraphs/angular/e2e/global-setup-impl.ts b/cockpit/langgraph/subgraphs/angular/e2e/global-setup-impl.ts
index a0b3354ac..165fa724d 100644
--- a/cockpit/langgraph/subgraphs/angular/e2e/global-setup-impl.ts
+++ b/cockpit/langgraph/subgraphs/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-langgraph-subgraphs-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/langgraph/subgraphs/python',
-  langgraphPort: 5305,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-langgraph-subgraphs-angular',
-  angularPort: 4305,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/langgraph/subgraphs/angular/e2e/playwright.config.ts b/cockpit/langgraph/subgraphs/angular/e2e/playwright.config.ts
index 1c8f5a8e5..3fdd3bde0 100644
--- a/cockpit/langgraph/subgraphs/angular/e2e/playwright.config.ts
+++ b/cockpit/langgraph/subgraphs/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-langgraph-subgraphs-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4305',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/langgraph/subgraphs/angular/e2e/tsconfig.json b/cockpit/langgraph/subgraphs/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/langgraph/subgraphs/angular/e2e/tsconfig.json
+++ b/cockpit/langgraph/subgraphs/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/langgraph/subgraphs/angular/project.json b/cockpit/langgraph/subgraphs/angular/project.json
index 0e84f6da7..3927dc59c 100644
--- a/cockpit/langgraph/subgraphs/angular/project.json
+++ b/cockpit/langgraph/subgraphs/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/langgraph/subgraphs/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/langgraph/subgraphs/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/langgraph/subgraphs/angular/proxy.conf.json b/cockpit/langgraph/subgraphs/angular/proxy.conf.json
deleted file mode 100644
index 47e385506..000000000
--- a/cockpit/langgraph/subgraphs/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5305",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/langgraph/subgraphs/angular/proxy.conf.mjs b/cockpit/langgraph/subgraphs/angular/proxy.conf.mjs
new file mode 100644
index 000000000..40c6ad891
--- /dev/null
+++ b/cockpit/langgraph/subgraphs/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-langgraph-subgraphs-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/langgraph/time-travel/angular/e2e/global-setup-impl.ts b/cockpit/langgraph/time-travel/angular/e2e/global-setup-impl.ts
index afa1e1f04..b14724a1b 100644
--- a/cockpit/langgraph/time-travel/angular/e2e/global-setup-impl.ts
+++ b/cockpit/langgraph/time-travel/angular/e2e/global-setup-impl.ts
@@ -1,11 +1,14 @@
 // SPDX-License-Identifier: MIT
 import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
 import { createGlobalSetup } from '@threadplane-internal/e2e-harness';
 
+const ports = portsFor('cockpit-langgraph-time-travel-angular');
+
 export default createGlobalSetup({
   langgraphCwd: 'cockpit/langgraph/time-travel/python',
-  langgraphPort: 5306,
+  langgraphPort: ports.langgraph,
   angularProject: 'cockpit-langgraph-time-travel-angular',
-  angularPort: 4306,
+  angularPort: ports.angular,
   fixturesDir: resolve(__dirname, 'fixtures'),
 });
diff --git a/cockpit/langgraph/time-travel/angular/e2e/playwright.config.ts b/cockpit/langgraph/time-travel/angular/e2e/playwright.config.ts
index dfb767b26..9ac001eef 100644
--- a/cockpit/langgraph/time-travel/angular/e2e/playwright.config.ts
+++ b/cockpit/langgraph/time-travel/angular/e2e/playwright.config.ts
@@ -1,5 +1,9 @@
 // SPDX-License-Identifier: MIT
 import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-langgraph-time-travel-angular');
+
 
 export default defineConfig({
   testDir: '.',
@@ -9,7 +13,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
   use: {
-    baseURL: 'http://localhost:4306',
+    baseURL: `http://localhost:${angularPort}`,
     trace: 'retain-on-failure',
   },
   projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
diff --git a/cockpit/langgraph/time-travel/angular/e2e/tsconfig.json b/cockpit/langgraph/time-travel/angular/e2e/tsconfig.json
index 2c6356fc2..0fc9befb1 100644
--- a/cockpit/langgraph/time-travel/angular/e2e/tsconfig.json
+++ b/cockpit/langgraph/time-travel/angular/e2e/tsconfig.json
@@ -18,7 +18,8 @@
       "@threadplane-internal/e2e-harness/global-teardown": [
         "libs/e2e-harness/src/global-teardown.ts"
       ]
-    }
+    },
+    "allowJs": true
   },
   "include": [
     "**/*.ts"
diff --git a/cockpit/langgraph/time-travel/angular/project.json b/cockpit/langgraph/time-travel/angular/project.json
index b38b3cab0..4748cd75b 100644
--- a/cockpit/langgraph/time-travel/angular/project.json
+++ b/cockpit/langgraph/time-travel/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/langgraph/time-travel/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/langgraph/time-travel/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/langgraph/time-travel/angular/proxy.conf.json b/cockpit/langgraph/time-travel/angular/proxy.conf.json
deleted file mode 100644
index 78ddc28b1..000000000
--- a/cockpit/langgraph/time-travel/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5306",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/langgraph/time-travel/angular/proxy.conf.mjs b/cockpit/langgraph/time-travel/angular/proxy.conf.mjs
new file mode 100644
index 000000000..434bd4fe9
--- /dev/null
+++ b/cockpit/langgraph/time-travel/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-langgraph-time-travel-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/ports.mjs b/cockpit/ports.mjs
new file mode 100644
index 000000000..2292d5f35
--- /dev/null
+++ b/cockpit/ports.mjs
@@ -0,0 +1,72 @@
+// SPDX-License-Identifier: MIT
+
+/**
+ * @typedef {{ angular: number; langgraph: number }} CapPorts
+ * @typedef {Record<string, CapPorts>} PortsRegistry
+ */
+
+/**
+ * Single source of truth for cockpit cap port allocation.
+ *
+ * Excludes cockpit-ag-ui-streaming-angular — uses a non-LangGraph
+ * backend (Node ag-ui server on :3000, /agent proxy). Single-cap
+ * exception; left as a literal in its own files.
+ *
+ * Port ranges:
+ *   - angular: [4000, 5000)
+ *   - langgraph: [5000, 6000)
+ *   - Convention: langgraph = angular + 1000
+ *
+ * The CI verifier (scripts/cockpit-ports.spec.mjs) asserts this
+ * registry matches the literal --port values in each cap's
+ * python/project.json + baseURL in playwright.config.ts.
+ *
+ * @type {PortsRegistry}
+ */
+export const PORTS = Object.freeze({
+  '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-chat-input-angular': { angular: 4502, langgraph: 5502 },
+  'cockpit-chat-interrupts-angular': { angular: 4503, langgraph: 5503 },
+  'cockpit-chat-messages-angular': { angular: 4501, langgraph: 5501 },
+  'cockpit-chat-subagents-angular': { angular: 4505, langgraph: 5505 },
+  'cockpit-chat-theming-angular': { angular: 4510, langgraph: 5510 },
+  'cockpit-chat-threads-angular': { angular: 4506, langgraph: 5506 },
+  'cockpit-chat-timeline-angular': { angular: 4507, langgraph: 5507 },
+  'cockpit-chat-tool-calls-angular': { angular: 4504, langgraph: 5504 },
+  'cockpit-deep-agents-filesystem-angular': { angular: 4311, langgraph: 5311 },
+  'cockpit-deep-agents-memory-angular': { angular: 4313, langgraph: 5313 },
+  'cockpit-deep-agents-planning-angular': { angular: 4310, langgraph: 5310 },
+  'cockpit-deep-agents-sandboxes-angular': { angular: 4315, langgraph: 5315 },
+  'cockpit-deep-agents-skills-angular': { angular: 4314, langgraph: 5314 },
+  'cockpit-deep-agents-subagents-angular': { angular: 4312, langgraph: 5312 },
+  'cockpit-langgraph-deployment-runtime-angular': { angular: 4307, langgraph: 5307 },
+  'cockpit-langgraph-durable-execution-angular': { angular: 4304, langgraph: 5304 },
+  'cockpit-langgraph-interrupts-angular': { angular: 4302, langgraph: 5302 },
+  'cockpit-langgraph-memory-angular': { angular: 4303, langgraph: 5303 },
+  'cockpit-langgraph-persistence-angular': { angular: 4301, langgraph: 5301 },
+  'cockpit-langgraph-streaming-angular': { angular: 4300, langgraph: 5300 },
+  'cockpit-langgraph-subgraphs-angular': { angular: 4305, langgraph: 5305 },
+  'cockpit-langgraph-time-travel-angular': { angular: 4306, langgraph: 5306 },
+  'cockpit-render-computed-functions-angular': { angular: 4406, langgraph: 5406 },
+  'cockpit-render-element-rendering-angular': { angular: 4402, langgraph: 5402 },
+  'cockpit-render-registry-angular': { angular: 4404, langgraph: 5404 },
+  'cockpit-render-repeat-loops-angular': { angular: 4405, langgraph: 5405 },
+  'cockpit-render-spec-rendering-angular': { angular: 4401, langgraph: 5401 },
+  'cockpit-render-state-management-angular': { angular: 4403, langgraph: 5403 },
+});
+
+/**
+ * Look up ports for a cap by its Nx angular project name.
+ * Throws if the name isn't in the registry — caller crash for
+ * fast diagnosis.
+ *
+ * @param {string} cap
+ * @returns {CapPorts}
+ */
+export function portsFor(cap) {
+  const p = PORTS[cap];
+  if (!p) throw new Error(`No port allocation for ${cap}`);
+  return p;
+}
diff --git a/cockpit/render/computed-functions/angular/project.json b/cockpit/render/computed-functions/angular/project.json
index 0ce7a9a50..ccfd40828 100644
--- a/cockpit/render/computed-functions/angular/project.json
+++ b/cockpit/render/computed-functions/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/render/computed-functions/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/render/computed-functions/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/render/computed-functions/angular/proxy.conf.json b/cockpit/render/computed-functions/angular/proxy.conf.json
deleted file mode 100644
index fbebbb7a5..000000000
--- a/cockpit/render/computed-functions/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5406",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/render/computed-functions/angular/proxy.conf.mjs b/cockpit/render/computed-functions/angular/proxy.conf.mjs
new file mode 100644
index 000000000..fe5b6b404
--- /dev/null
+++ b/cockpit/render/computed-functions/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-render-computed-functions-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/render/element-rendering/angular/project.json b/cockpit/render/element-rendering/angular/project.json
index 51c68cf26..5127ac1bc 100644
--- a/cockpit/render/element-rendering/angular/project.json
+++ b/cockpit/render/element-rendering/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/render/element-rendering/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/render/element-rendering/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/render/element-rendering/angular/proxy.conf.json b/cockpit/render/element-rendering/angular/proxy.conf.json
deleted file mode 100644
index 7a087fbdf..000000000
--- a/cockpit/render/element-rendering/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5402",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/render/element-rendering/angular/proxy.conf.mjs b/cockpit/render/element-rendering/angular/proxy.conf.mjs
new file mode 100644
index 000000000..8f9e0be47
--- /dev/null
+++ b/cockpit/render/element-rendering/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-render-element-rendering-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/render/registry/angular/project.json b/cockpit/render/registry/angular/project.json
index 7f88ac4cb..61ee1f621 100644
--- a/cockpit/render/registry/angular/project.json
+++ b/cockpit/render/registry/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/render/registry/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/render/registry/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/render/registry/angular/proxy.conf.json b/cockpit/render/registry/angular/proxy.conf.json
deleted file mode 100644
index 8868f9d26..000000000
--- a/cockpit/render/registry/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5404",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/render/registry/angular/proxy.conf.mjs b/cockpit/render/registry/angular/proxy.conf.mjs
new file mode 100644
index 000000000..c8097ab3a
--- /dev/null
+++ b/cockpit/render/registry/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-render-registry-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/render/repeat-loops/angular/project.json b/cockpit/render/repeat-loops/angular/project.json
index 43cf9cace..6ce03da78 100644
--- a/cockpit/render/repeat-loops/angular/project.json
+++ b/cockpit/render/repeat-loops/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/render/repeat-loops/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/render/repeat-loops/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/render/repeat-loops/angular/proxy.conf.json b/cockpit/render/repeat-loops/angular/proxy.conf.json
deleted file mode 100644
index 8e9e9ec7d..000000000
--- a/cockpit/render/repeat-loops/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5405",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/render/repeat-loops/angular/proxy.conf.mjs b/cockpit/render/repeat-loops/angular/proxy.conf.mjs
new file mode 100644
index 000000000..8d398fbd5
--- /dev/null
+++ b/cockpit/render/repeat-loops/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-render-repeat-loops-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/render/spec-rendering/angular/project.json b/cockpit/render/spec-rendering/angular/project.json
index 9e8f1688e..e0d0ac131 100644
--- a/cockpit/render/spec-rendering/angular/project.json
+++ b/cockpit/render/spec-rendering/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/render/spec-rendering/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/render/spec-rendering/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/render/spec-rendering/angular/proxy.conf.json b/cockpit/render/spec-rendering/angular/proxy.conf.json
deleted file mode 100644
index 6e752e0e7..000000000
--- a/cockpit/render/spec-rendering/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5401",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/render/spec-rendering/angular/proxy.conf.mjs b/cockpit/render/spec-rendering/angular/proxy.conf.mjs
new file mode 100644
index 000000000..3d029976e
--- /dev/null
+++ b/cockpit/render/spec-rendering/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-render-spec-rendering-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/cockpit/render/state-management/angular/project.json b/cockpit/render/state-management/angular/project.json
index c6a7c93ff..fe736b0c0 100644
--- a/cockpit/render/state-management/angular/project.json
+++ b/cockpit/render/state-management/angular/project.json
@@ -78,7 +78,7 @@
       },
       "defaultConfiguration": "development",
       "options": {
-        "proxyConfig": "cockpit/render/state-management/angular/proxy.conf.json"
+        "proxyConfig": "cockpit/render/state-management/angular/proxy.conf.mjs"
       }
     },
     "smoke": {
diff --git a/cockpit/render/state-management/angular/proxy.conf.json b/cockpit/render/state-management/angular/proxy.conf.json
deleted file mode 100644
index 7b2da2df7..000000000
--- a/cockpit/render/state-management/angular/proxy.conf.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "/api": {
-    "target": "http://localhost:5403",
-    "secure": false,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true
-  }
-}
diff --git a/cockpit/render/state-management/angular/proxy.conf.mjs b/cockpit/render/state-management/angular/proxy.conf.mjs
new file mode 100644
index 000000000..16c736260
--- /dev/null
+++ b/cockpit/render/state-management/angular/proxy.conf.mjs
@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-render-state-management-angular');
+
+export default {
+  "/api": {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+    pathRewrite: {"^/api":""},
+    ws: true,
+  },
+};
diff --git a/docs/superpowers/plans/2026-05-25-hitl-refund-cockpit-blog.md b/docs/superpowers/plans/2026-05-25-hitl-refund-cockpit-blog.md
new file mode 100644
index 000000000..8f6b4268a
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-25-hitl-refund-cockpit-blog.md
@@ -0,0 +1,1705 @@
+# HITL Refund — Cockpit + Library + Blog Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Use the third blog post (Human-in-the-Loop LangGraph Agents in Angular) as a forcing function to ship a real `ChatApprovalCard` composition, refresh `ChatInterruptPanel`'s visual treatment, rewrite the cockpit `interrupts` example as a refund flow, and rewrite the blog against that verified cockpit example with real screenshots.
+
+**Architecture:** Three PRs. PR #1 ships library-only changes (new `ChatApprovalCard` dialog composition + `ChatInterruptPanel` visual refresh + an explicit unit test pinning the already-existing structured-`resume` behavior). PR #2 rewrites the cockpit `interrupts` example as a refund-authorization agent that consumes `ChatApprovalCard`; auto-merge strictly disabled until manual review passes. PR #3 rewrites the blog post against the verified cockpit code with three screenshots captured live.
+
+**Tech Stack:** Angular 20+ (standalone components, signals, native `<dialog>`), LangGraph (Python, `langgraph.types.interrupt`), Vitest (lib unit tests), Playwright (cockpit e2e), Next.js 16 + MDX (blog).
+
+**Spec:** [docs/superpowers/specs/2026-05-25-hitl-refund-cockpit-blog-design.md](docs/superpowers/specs/2026-05-25-hitl-refund-cockpit-blog-design.md)
+
+---
+
+## File map
+
+**PR #1 — Library:**
+- Modify: `libs/langgraph/src/lib/agent.fn.spec.ts` — add explicit structured-resume test
+- Create: `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.ts`
+- Create: `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts`
+- Modify: `libs/chat/src/index.ts` — export `ChatApprovalCardComponent`
+- Modify: `libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts` — visual refresh (drop left border + triangle, use eyebrow + dot pattern, shared button styles)
+
+**PR #2 — Cockpit:**
+- Modify: `cockpit/langgraph/interrupts/python/src/graph.py`
+- Modify: `cockpit/langgraph/interrupts/python/prompts/interrupts.md`
+- Modify: `cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts`
+- Delete: `cockpit/langgraph/interrupts/angular/src/app/views/approval-card.component.ts`
+- Modify: `cockpit/langgraph/interrupts/angular/e2e/interrupts.spec.ts`
+
+**PR #3 — Blog:**
+- Rewrite: `apps/website/content/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular.mdx`
+- Create: `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/1.png`
+- Create: `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/2.png`
+- Create: `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/3.png`
+
+---
+
+# PR #1 — Library
+
+Branch: `claude/hitl-chat-approval-card`. One PR, mergeable independently of PR #2 and PR #3.
+
+## Task 1: Pin structured-resume behavior with an explicit unit test
+
+The `resume?: unknown` type and forwarding logic already exist in `libs/langgraph`. This task adds one targeted test that locks the structured-object path so the cockpit refund rewrite has a documented contract to depend on.
+
+**Files:**
+- Modify: `libs/langgraph/src/lib/agent.fn.spec.ts`
+
+- [ ] **Step 1: Read the existing `describe('resume submit', ...)` block to confirm the test pattern**
+
+Run: `grep -n "resume" libs/langgraph/src/lib/agent.fn.spec.ts | head -20`
+
+Expected output includes lines around 232 ("normalizes resume submit options into a LangGraph command") and 250 (`await ref.submit(null, { resume: { approved: true } });`). Existing tests already cover structured resume values — we add one more to nail down a richer payload.
+
+- [ ] **Step 2: Add a failing test for a multi-field structured resume payload**
+
+Open `libs/langgraph/src/lib/agent.fn.spec.ts`. Find the existing `it('normalizes resume submit options into a LangGraph command', async () => {` (around line 232) and insert this new test immediately after the closing `});` of that block:
+
+```ts
+  it('forwards a multi-field structured resume payload verbatim', async () => {
+    const { ref, transport } = setupRunTest();
+    await ref.submit(null, {
+      resume: {
+        approved: true,
+        amount: 47.5,
+        idempotency_key: 'idem_abc123',
+        meta: { reviewer: 'brian', at: '2026-05-25T18:00:00Z' },
+      },
+    });
+    expect(transport.runs[0]?.body).toMatchObject({
+      command: {
+        resume: {
+          approved: true,
+          amount: 47.5,
+          idempotency_key: 'idem_abc123',
+          meta: { reviewer: 'brian', at: '2026-05-25T18:00:00Z' },
+        },
+      },
+    });
+  });
+```
+
+- [ ] **Step 3: Run the new test**
+
+Run: `cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework && npx nx test langgraph -- --testNamePattern "forwards a multi-field structured resume payload verbatim"`
+
+Expected: PASS. The test should pass on first run because the forwarding logic already exists; we're just locking it down with an explicit assertion.
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git checkout -b claude/hitl-chat-approval-card
+git add libs/langgraph/src/lib/agent.fn.spec.ts
+git commit -m "test(langgraph): pin multi-field structured resume payload forwarding"
+```
+
+---
+
+## Task 2: Create `ChatApprovalCard` — failing test for body template projection
+
+TDD. First test asserts the composition renders the projected body template with the interrupt payload bound as a `let-*` variable.
+
+**Files:**
+- Create: `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts`
+
+- [ ] **Step 1: Write the failing test file**
+
+Write `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts`:
+
+```ts
+// SPDX-License-Identifier: MIT
+import { Component, TemplateRef, ViewChild, ElementRef, signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, it, expect, beforeEach } from 'vitest';
+import { ChatApprovalCardComponent } from './chat-approval-card.component';
+import { mockAgent } from '../../testing/mock-agent';
+import type { AgentInterrupt } from '../../agent/agent-interrupt';
+
+@Component({
+  standalone: true,
+  imports: [ChatApprovalCardComponent],
+  template: `
+    <chat-approval-card
+      [agent]="agent"
+      [matchKind]="matchKind"
+      [showEdit]="showEdit"
+      (action)="lastAction = $event"
+    >
+      <ng-template #body let-payload>
+        <span class="amount">{{ payload.amount }}</span>
+        <span class="customer">{{ payload.customer_id }}</span>
+      </ng-template>
+    </chat-approval-card>
+  `,
+})
+class HostComponent {
+  agent = mockAgent({ withInterrupt: true });
+  matchKind: string | undefined = undefined;
+  showEdit = false;
+  lastAction: { action: string } | undefined = undefined;
+}
+
+describe('ChatApprovalCardComponent', () => {
+  let host: HostComponent;
+  let fixture: ReturnType<typeof TestBed.createComponent<HostComponent>>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HostComponent);
+    host = fixture.componentInstance;
+  });
+
+  it('renders the projected body template with payload bound', () => {
+    const interrupt: AgentInterrupt = {
+      id: 'int-1',
+      value: { kind: 'refund_approval', amount: 47.5, customer_id: 'cus_a8x2k' },
+      resumable: true,
+    };
+    host.agent.interrupt!.set(interrupt);
+    fixture.detectChanges();
+
+    const amount = fixture.nativeElement.querySelector('.amount')?.textContent?.trim();
+    const customer = fixture.nativeElement.querySelector('.customer')?.textContent?.trim();
+    expect(amount).toBe('47.5');
+    expect(customer).toBe('cus_a8x2k');
+  });
+});
+```
+
+- [ ] **Step 2: Run to verify the test fails**
+
+Run: `cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework && npx nx test chat -- --testPathPattern "chat-approval-card"`
+
+Expected: FAIL with "Cannot find module './chat-approval-card.component'" (the implementation file doesn't exist yet).
+
+---
+
+## Task 3: Implement `ChatApprovalCard` minimal component
+
+Write the smallest component that makes Task 2's test pass — reads agent interrupt, renders projected `#body` template with payload as `let-*` context.
+
+**Files:**
+- Create: `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.ts`
+
+- [ ] **Step 1: Write the component file**
+
+Write `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.ts`:
+
+```ts
+// SPDX-License-Identifier: MIT
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  TemplateRef,
+  computed,
+  contentChild,
+  effect,
+  input,
+  output,
+  viewChild,
+} from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import type { Agent } from '../../agent';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+
+export type ChatApprovalAction = 'approve' | 'edit' | 'cancel';
+
+@Component({
+  selector: 'chat-approval-card',
+  standalone: true,
+  imports: [NgTemplateOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [
+    CHAT_HOST_TOKENS,
+    `
+    :host { display: contents; }
+    dialog.chat-approval-card {
+      width: 440px;
+      max-width: calc(100vw - 32px);
+      padding: 0;
+      border: 0;
+      border-radius: 12px;
+      background: var(--ngaf-chat-surface);
+      color: var(--ngaf-chat-text);
+      box-shadow: 0 20px 50px rgba(0,0,0,0.18);
+    }
+    dialog.chat-approval-card::backdrop {
+      background: rgba(0,0,0,0.32);
+    }
+    .chat-approval-card__header {
+      padding: 14px 16px 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border-bottom: 1px solid var(--ngaf-chat-separator);
+    }
+    .chat-approval-card__header h4 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--ngaf-chat-text);
+    }
+    .chat-approval-card__header svg {
+      color: var(--ngaf-chat-warning-text);
+      width: 16px;
+      height: 16px;
+      flex: 0 0 16px;
+    }
+    .chat-approval-card__body {
+      padding: 14px 16px;
+      font-size: var(--ngaf-chat-font-size-sm, 13px);
+      color: var(--ngaf-chat-text);
+    }
+    .chat-approval-card__actions {
+      padding: 8px 16px 14px;
+      display: flex;
+      gap: 6px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .btn {
+      border: 0;
+      padding: 6px 14px;
+      border-radius: 8px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: transform 200ms ease, opacity 200ms ease;
+    }
+    .btn:hover { transform: scale(1.03); }
+    .btn-primary { background: var(--ngaf-chat-primary); color: var(--ngaf-chat-on-primary); }
+    .btn-secondary { background: transparent; color: var(--ngaf-chat-text); border: 1px solid var(--ngaf-chat-separator); }
+    .btn-text {
+      background: transparent;
+      color: var(--ngaf-chat-text-muted);
+      padding: 6px 10px;
+    }
+    .btn-text:hover { color: var(--ngaf-chat-text); }
+    `,
+  ],
+  template: `
+    <dialog #dialogEl class="chat-approval-card" (close)="onDialogClose()" (cancel)="onCancelEvent($event)">
+      <div class="chat-approval-card__header">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        <h4>{{ title() }}</h4>
+      </div>
+      <div class="chat-approval-card__body">
+        @if (bodyTemplate(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl; context: { $implicit: payload() }"></ng-container>
+        }
+      </div>
+      <div class="chat-approval-card__actions">
+        <button type="button" class="btn btn-text" (click)="emit('cancel')">Cancel</button>
+        @if (showEdit()) {
+          <button type="button" class="btn btn-secondary" (click)="emit('edit')">Edit</button>
+        }
+        <button type="button" class="btn btn-primary" (click)="emit('approve')">Approve</button>
+      </div>
+    </dialog>
+  `,
+})
+export class ChatApprovalCardComponent {
+  readonly agent = input.required<Agent>();
+  readonly matchKind = input<string | undefined>(undefined);
+  readonly title = input<string>('Approval required');
+  readonly showEdit = input<boolean>(false);
+
+  readonly action = output<ChatApprovalAction>();
+
+  protected readonly bodyTemplate = contentChild<TemplateRef<unknown>>('body');
+  private readonly dialogRef = viewChild<ElementRef<HTMLDialogElement>>('dialogEl');
+
+  private readonly interrupt = computed(() => this.agent().interrupt?.());
+
+  protected readonly payload = computed(() => {
+    const i = this.interrupt();
+    if (!i) return undefined;
+    const v = i.value as { kind?: unknown } | undefined;
+    const want = this.matchKind();
+    if (want !== undefined) {
+      if (!v || typeof v !== 'object' || (v as { kind?: unknown }).kind !== want) {
+        return undefined;
+      }
+    }
+    return v;
+  });
+
+  constructor() {
+    effect(() => {
+      const p = this.payload();
+      const dialog = this.dialogRef()?.nativeElement;
+      if (!dialog) return;
+      if (p && !dialog.open) {
+        dialog.showModal();
+      } else if (!p && dialog.open) {
+        dialog.close();
+      }
+    });
+  }
+
+  protected emit(action: ChatApprovalAction): void {
+    this.action.emit(action);
+    this.dialogRef()?.nativeElement?.close();
+  }
+
+  protected onCancelEvent(ev: Event): void {
+    // Native dialog's cancel event fires on Escape. Treat as cancel.
+    ev.preventDefault();
+    this.action.emit('cancel');
+    this.dialogRef()?.nativeElement?.close();
+  }
+
+  protected onDialogClose(): void {
+    // Native close — no-op; emit happens in emit() / onCancelEvent.
+  }
+}
+```
+
+- [ ] **Step 2: Run the test from Task 2**
+
+Run: `cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework && npx nx test chat -- --testPathPattern "chat-approval-card"`
+
+Expected: PASS. The body template renders with `payload` bound.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git add libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.ts libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts
+git commit -m "feat(chat): add ChatApprovalCard dialog composition skeleton"
+```
+
+---
+
+## Task 4: Add `matchKind` filter test + verify
+
+The `payload()` computed already implements matchKind filtering. Add a test that exercises both the matching and non-matching paths.
+
+**Files:**
+- Modify: `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts`
+
+- [ ] **Step 1: Add the test**
+
+Append two new tests to the `describe('ChatApprovalCardComponent', ...)` block in the spec file (before the closing `});`):
+
+```ts
+  it('renders body when matchKind matches the interrupt kind', () => {
+    host.matchKind = 'refund_approval';
+    host.agent.interrupt!.set({
+      id: 'int-1',
+      value: { kind: 'refund_approval', amount: 47.5, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.amount')?.textContent?.trim()).toBe('47.5');
+  });
+
+  it('renders nothing when matchKind does not match', () => {
+    host.matchKind = 'refund_approval';
+    host.agent.interrupt!.set({
+      id: 'int-2',
+      value: { kind: 'delete_approval', target: 'user_42' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.amount')).toBeNull();
+  });
+```
+
+- [ ] **Step 2: Run the tests**
+
+Run: `cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework && npx nx test chat -- --testPathPattern "chat-approval-card"`
+
+Expected: ALL three tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git add libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts
+git commit -m "test(chat): cover ChatApprovalCard matchKind filter"
+```
+
+---
+
+## Task 5: Action-emit + showEdit tests
+
+Lock in that clicking each button emits the right enum value, that `showEdit=false` hides the Edit button, and that the Escape-handled `cancel` event also emits cancel.
+
+**Files:**
+- Modify: `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts`
+
+- [ ] **Step 1: Add the tests**
+
+Append three more tests to the spec file (still inside the `describe` block, before its closing `});`):
+
+```ts
+  it('emits "approve" when the Approve button is clicked', () => {
+    host.agent.interrupt!.set({
+      id: 'int-3',
+      value: { kind: 'refund_approval', amount: 10, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    const approve = fixture.nativeElement.querySelector('.btn-primary') as HTMLButtonElement;
+    approve.click();
+    expect(host.lastAction).toBe('approve');
+  });
+
+  it('emits "cancel" when the Cancel button is clicked', () => {
+    host.agent.interrupt!.set({
+      id: 'int-4',
+      value: { kind: 'refund_approval', amount: 10, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    const cancel = fixture.nativeElement.querySelector('.btn-text') as HTMLButtonElement;
+    cancel.click();
+    expect(host.lastAction).toBe('cancel');
+  });
+
+  it('hides the Edit button when showEdit is false', () => {
+    host.showEdit = false;
+    host.agent.interrupt!.set({
+      id: 'int-5',
+      value: { kind: 'refund_approval', amount: 10, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    const editButtons = fixture.nativeElement.querySelectorAll('button.btn-secondary');
+    expect(editButtons.length).toBe(0);
+  });
+
+  it('shows the Edit button and emits "edit" when showEdit is true', () => {
+    host.showEdit = true;
+    host.agent.interrupt!.set({
+      id: 'int-6',
+      value: { kind: 'refund_approval', amount: 10, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    const edit = fixture.nativeElement.querySelector('.btn-secondary') as HTMLButtonElement;
+    expect(edit).not.toBeNull();
+    edit.click();
+    expect(host.lastAction).toBe('edit');
+  });
+```
+
+- [ ] **Step 2: Run tests**
+
+Run: `cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework && npx nx test chat -- --testPathPattern "chat-approval-card"`
+
+Expected: ALL 7 tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git add libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts
+git commit -m "test(chat): cover ChatApprovalCard action emit + showEdit"
+```
+
+---
+
+## Task 6: Export `ChatApprovalCard` from the public surface
+
+**Files:**
+- Modify: `libs/chat/src/index.ts`
+
+- [ ] **Step 1: Find where ChatInterruptPanel is exported, add ChatApprovalCard nearby**
+
+Run: `grep -n "chat-interrupt-panel" libs/chat/src/index.ts`
+
+Expected: a line like `export * from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component';`
+
+- [ ] **Step 2: Add the new export immediately after**
+
+Open `libs/chat/src/index.ts`. Find the ChatInterruptPanel export line and add immediately after it:
+
+```ts
+export * from './lib/compositions/chat-approval-card/chat-approval-card.component';
+```
+
+- [ ] **Step 3: Verify the type is exposed**
+
+Run: `cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework && npx tsc --noEmit -p libs/chat/tsconfig.lib.json`
+
+Expected: PASS with no new errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git add libs/chat/src/index.ts
+git commit -m "feat(chat): export ChatApprovalCardComponent from the public surface"
+```
+
+---
+
+## Task 7: Refresh `ChatInterruptPanel` visual treatment
+
+Drop the thick amber left border + triangle warning icon. Use the eyebrow + small amber dot pattern. Share the `.btn`/`.btn-primary`/`.btn-secondary`/`.btn-text` styles with `ChatApprovalCard`. No behavioral change.
+
+**Files:**
+- Modify: `libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts`
+
+- [ ] **Step 1: Replace the `styles:` block and the template**
+
+In `libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts`, replace the existing `styles: [CHAT_HOST_TOKENS, `...`]` block (currently lines 44–107) and the `template: `...`` block (currently lines 108–141) with:
+
+```ts
+  styles: [
+    CHAT_HOST_TOKENS,
+    `
+    .chat-interrupt-panel {
+      background: var(--ngaf-chat-surface);
+      color: var(--ngaf-chat-text);
+      border: 1px solid var(--ngaf-chat-separator);
+      border-radius: var(--ngaf-chat-radius-card);
+      padding: 14px 16px;
+      font-size: var(--ngaf-chat-font-size-sm);
+    }
+    .chat-interrupt-panel__eyebrow {
+      font-family: ui-monospace, Menlo, Consolas, monospace;
+      font-size: 10px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      color: var(--ngaf-chat-warning-text);
+      margin: 0 0 8px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .chat-interrupt-panel__dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: var(--ngaf-chat-warning-text);
+      flex: 0 0 6px;
+    }
+    .chat-interrupt-panel__body {
+      margin: 0 0 12px;
+      color: var(--ngaf-chat-text);
+      white-space: pre-wrap;
+    }
+    .chat-interrupt-panel__actions {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .btn {
+      border: 0;
+      padding: 6px 14px;
+      border-radius: var(--ngaf-chat-radius-button);
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: transform 200ms ease, opacity 200ms ease;
+    }
+    .btn:hover { transform: scale(1.03); }
+    .btn-primary { background: var(--ngaf-chat-primary); color: var(--ngaf-chat-on-primary); }
+    .btn-secondary { background: transparent; color: var(--ngaf-chat-text); border: 1px solid var(--ngaf-chat-separator); }
+    .btn-text {
+      background: transparent;
+      color: var(--ngaf-chat-text-muted);
+      padding: 6px 10px;
+    }
+    .btn-text:hover { color: var(--ngaf-chat-text); }
+    `,
+  ],
+  template: `
+    @if (interrupt()) {
+      <div role="alert" class="chat-interrupt-panel">
+        <p class="chat-interrupt-panel__eyebrow">
+          <span class="chat-interrupt-panel__dot" aria-hidden="true"></span>
+          Agent paused — review needed
+        </p>
+        <p class="chat-interrupt-panel__body">{{ interruptReason() }}</p>
+        <div class="chat-interrupt-panel__actions">
+          <button type="button" class="btn btn-primary" (click)="action.emit('accept')">Accept</button>
+          <button type="button" class="btn btn-secondary" (click)="action.emit('edit')">Edit</button>
+          <button type="button" class="btn btn-secondary" (click)="action.emit('respond')">Respond</button>
+          <button type="button" class="btn btn-text" (click)="action.emit('ignore')">Ignore</button>
+        </div>
+      </div>
+    }
+  `,
+```
+
+- [ ] **Step 2: Run the existing spec to confirm nothing broke**
+
+Run: `cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework && npx nx test chat -- --testPathPattern "chat-interrupt-panel"`
+
+Expected: ALL existing tests pass. The refresh is visual only — behavior, inputs, outputs are unchanged.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git add libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts
+git commit -m "refactor(chat): refresh ChatInterruptPanel visual treatment
+
+Drop the thick amber left border and triangle warning icon. Use the
+eyebrow + small dot pattern that matches the new ChatApprovalCard
+composition. Share .btn / .btn-primary / .btn-secondary / .btn-text
+styles across both compositions.
+
+No API change; same inputs, same (action) output enum, same DOM placement."
+```
+
+---
+
+## Task 8: Push PR #1 and arm auto-merge
+
+**Files:** none — just git + gh.
+
+- [ ] **Step 1: Push the branch**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git push -u origin claude/hitl-chat-approval-card
+```
+
+Expected: push succeeds.
+
+- [ ] **Step 2: Open the PR**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+gh pr create --title "feat(chat): ChatApprovalCard dialog composition + ChatInterruptPanel refresh" --body "$(cat <<'EOF'
+## Summary
+
+Sets up the chat library for the HITL refund forcing-function work. Three sub-pieces shipped together because they touch the same library tree and share the new button vocabulary:
+
+- **1A — Pin structured-resume behavior.** Adds one explicit unit test in \`libs/langgraph\` that nails down forwarding a multi-field structured object through \`agent.submit({ resume })\`. The type and forwarding logic already existed; the test locks the contract the cockpit refund rewrite depends on.
+- **1B — New \`ChatApprovalCard\` composition.** Native HTML \`<dialog>\` + \`showModal()\`, top-layer rendering, focus trap and Escape for free. API: \`[agent]\`, \`[matchKind]\`, \`[title]\`, \`[showEdit]\`, \`(action)\` emits \`'approve' | 'edit' | 'cancel'\`. Body is a content-projected \`<ng-template #body let-payload>\` slot.
+- **1C — \`ChatInterruptPanel\` visual refresh.** Drops the thick amber left border and triangle icon. Adopts the eyebrow + small amber dot pattern. Shares button styles with \`ChatApprovalCard\` so both compositions read in the same visual register.
+
+## Test plan
+
+- [ ] \`nx test langgraph\` green (new structured-resume test passes)
+- [ ] \`nx test chat\` green (7 new ChatApprovalCard tests + existing ChatInterruptPanel tests)
+- [ ] Type-check clean (\`tsc --noEmit\` for both libs)
+- [ ] Manual smoke: import \`ChatApprovalCardComponent\` from \`@threadplane/chat\` in a downstream app and confirm types resolve
+
+Spec: docs/superpowers/specs/2026-05-25-hitl-refund-cockpit-blog-design.md
+Plan: docs/superpowers/plans/2026-05-25-hitl-refund-cockpit-blog.md
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+EOF
+)"
+```
+
+- [ ] **Step 3: Arm auto-merge (squash, delete branch)**
+
+```bash
+gh pr merge --squash --auto --delete-branch
+```
+
+Expected: auto-merge enabled. CI runs; PR merges on green.
+
+---
+
+# PR #2 — Cockpit interrupts → refund agent
+
+Branch: `claude/cockpit-interrupts-refund`. **Depends on PR #1 merging first.** Auto-merge strictly disabled until manual review (Piece 3) passes.
+
+## Task 9: Rewrite the LangGraph backend graph
+
+**Files:**
+- Modify: `cockpit/langgraph/interrupts/python/src/graph.py`
+
+- [ ] **Step 1: Wait for PR #1 to merge, then sync main**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git checkout main
+git pull origin main
+git checkout -b claude/cockpit-interrupts-refund
+```
+
+Expected: branch created from latest main.
+
+- [ ] **Step 2: Rewrite the graph**
+
+Replace the entire contents of `cockpit/langgraph/interrupts/python/src/graph.py` with:
+
+```python
+"""
+LangGraph Interrupts Graph — Refund Authorization
+
+Demonstrates human-in-the-loop approval for high-stakes actions using
+LangGraph's interrupt() primitive. The agent drafts a refund (extracting
+customer, amount, and reason from the conversation), then pauses at
+request_approval. The frontend renders an approval card; resuming with
+{ approved: true } issues the refund (optionally with an edited amount),
+resuming with { approved: false } skips it.
+"""
+
+from pathlib import Path
+from typing import TypedDict, Annotated, Optional
+from langgraph.graph import StateGraph, START, END
+from langgraph.graph.message import add_messages
+from langgraph.types import interrupt
+from langchain_openai import ChatOpenAI
+from langchain_core.messages import SystemMessage, AIMessage
+
+PROMPTS_DIR = Path(__file__).parent.parent / "prompts"
+
+
+class RefundState(TypedDict):
+    messages: Annotated[list, add_messages]
+    customer_id: Optional[str]
+    amount: Optional[float]
+    reason: Optional[str]
+    refund_id: Optional[str]
+
+
+def build_interrupts_graph():
+    llm = ChatOpenAI(model="gpt-5-mini", streaming=True)
+
+    async def draft_refund(state: RefundState) -> dict:
+        """Read the conversation, ask the LLM to extract refund fields,
+        then post a confirmation message describing the draft."""
+        system_prompt = (PROMPTS_DIR / "interrupts.md").read_text()
+        messages = [SystemMessage(content=system_prompt)] + state["messages"]
+        response = await llm.ainvoke(messages)
+        # The system prompt instructs the LLM to emit a JSON-like draft;
+        # extracting fields robustly is out of scope for this demo.
+        # The next node uses the conversation + this AI message as input.
+        return {"messages": [response]}
+
+    def request_approval(state: RefundState) -> dict:
+        """Pause for human approval. Resume value is { approved: bool, amount?: number }.
+        If the operator edits the amount, the new value lands in state['amount']."""
+        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 {
+                "refund_id": None,
+                "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 {"amount": final_amount}
+
+    def issue_refund(state: RefundState) -> dict:
+        """Stand-in for the real Stripe call. Logs a fake refund ID."""
+        refund_id = "re_demo_" + (state.get("customer_id") or "anon")[-6:]
+        msg = f"Refund of ${state['amount']:.2f} issued to {state.get('customer_id')}. Refund ID: {refund_id}."
+        return {"refund_id": refund_id, "messages": [AIMessage(content=msg)]}
+
+    def route_after_approval(state: RefundState) -> str:
+        return "issue" if state.get("refund_id") != None or state.get("amount") else "end"
+
+    # Branching: if approval added an "amount" without flipping refund_id to None,
+    # continue to issue_refund; otherwise the cancellation message is already emitted.
+    def route(state: RefundState) -> str:
+        # `request_approval` sets refund_id=None on cancellation. On approval it does NOT
+        # set refund_id (issue_refund does that). So: amount present + refund_id absent => issue.
+        if state.get("amount") is not None and state.get("refund_id") is None:
+            return "issue"
+        return "end"
+
+    graph = StateGraph(RefundState)
+    graph.add_node("draft", draft_refund)
+    graph.add_node("request_approval", request_approval)
+    graph.add_node("issue", issue_refund)
+
+    graph.add_edge(START, "draft")
+    graph.add_edge("draft", "request_approval")
+    graph.add_conditional_edges("request_approval", route, {"issue": "issue", "end": END})
+    graph.add_edge("issue", END)
+
+    return graph.compile()
+
+
+# The graph instance — referenced by langgraph.json
+graph = build_interrupts_graph()
+```
+
+- [ ] **Step 3: Sanity-check Python imports compile**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework/cockpit/langgraph/interrupts/python
+uv run python -c "from src.graph import graph; print('ok', graph)"
+```
+
+Expected: prints `ok <compiled graph object>` (the langgraph.json env may need `OPENAI_API_KEY` set; if missing, the import still succeeds because the LLM is lazy-instantiated inside `build_interrupts_graph`).
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git add cockpit/langgraph/interrupts/python/src/graph.py
+git commit -m "feat(cockpit): refund-authorization LangGraph graph with structured interrupt"
+```
+
+---
+
+## Task 10: Rewrite the LangGraph system prompt
+
+**Files:**
+- Modify: `cockpit/langgraph/interrupts/python/prompts/interrupts.md`
+
+- [ ] **Step 1: Replace the prompt**
+
+Replace the entire contents of `cockpit/langgraph/interrupts/python/prompts/interrupts.md` with:
+
+```
+# Refund Authorization Assistant
+
+You help authorize customer refunds. Every refund must be reviewed by a human
+operator before any charge is reversed.
+
+When the user describes a refund situation, extract:
+- The customer identifier (e.g., cus_abc123).
+- The refund amount in USD.
+- A short reason (one sentence — what makes this refund justified).
+
+Respond briefly with what you understood, then state that you're pausing for
+operator approval. Do not claim the refund has been issued — that only happens
+after approval, in a later step.
+
+Keep your response short. The approval card carries the structured fields.
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git add cockpit/langgraph/interrupts/python/prompts/interrupts.md
+git commit -m "feat(cockpit): refund-authorization system prompt"
+```
+
+---
+
+## Task 11: Rewrite the cockpit Angular component to use `ChatApprovalCard`
+
+**Files:**
+- Modify: `cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts`
+- Delete: `cockpit/langgraph/interrupts/angular/src/app/views/approval-card.component.ts`
+
+- [ ] **Step 1: Replace `interrupts.component.ts`**
+
+Replace the entire contents of `cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts` with:
+
+```ts
+// SPDX-License-Identifier: MIT
+import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
+import { ChatComponent, ChatApprovalCardComponent, ChatWelcomeSuggestionComponent, type ChatApprovalAction } from '@threadplane/chat';
+import { agent } from '@threadplane/langgraph';
+import { ExampleChatLayoutComponent } from '@threadplane/example-layouts';
+import { CurrencyPipe } from '@angular/common';
+import { environment } from '../environments/environment';
+
+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 extracts refund fields, 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 dialog and
+ * emit a `ChatApprovalAction` ('approve' | 'edit' | 'cancel'). The handler
+ * maps each action to a structured resume payload back to the graph.
+ */
+@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(--ngaf-chat-text-muted); margin-right:6px;">Amount</span><strong>{{ payload.amount | currency }}</strong></div>
+              <div><span style="color:var(--ngaf-chat-text-muted); margin-right:6px;">Customer</span><code>{{ payload.customer_id }}</code></div>
+              @if (payload.reason) {
+                <div style="font-style:italic; color:var(--ngaf-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(--ngaf-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(--ngaf-chat-separator); border-radius:6px; width:120px;" />
+                  <button type="button" (click)="submitEdit(payload)" style="padding:4px 10px; background:var(--ngaf-chat-primary); color:var(--ngaf-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 = agent({
+    apiUrl: environment.langGraphApiUrl,
+    assistantId: environment.streamingAssistantId,
+  });
+
+  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') {
+      // Reveal the inline edit input. The Save button (rendered inside the body
+      // template) submits the edited amount via `submitEdit`.
+      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);
+  }
+}
+```
+
+- [ ] **Step 2: Delete the bespoke ApprovalCardComponent**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git rm cockpit/langgraph/interrupts/angular/src/app/views/approval-card.component.ts
+```
+
+Expected: file removed and staged for deletion.
+
+- [ ] **Step 3: Verify the component compiles**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+npx nx build cockpit-langgraph-interrupts-angular --configuration=development
+```
+
+Expected: build succeeds. If type errors mention `views(...)` or `signalStateStore(...)`, those imports were removed correctly; the component no longer needs them.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts
+git commit -m "feat(cockpit): refund Angular flow using ChatApprovalCard composition"
+```
+
+---
+
+## Task 12: Update the cockpit e2e test
+
+**Files:**
+- Modify: `cockpit/langgraph/interrupts/angular/e2e/interrupts.spec.ts`
+
+- [ ] **Step 1: Read the existing spec to find the test pattern + suggestion text**
+
+Run: `head -60 /Users/blove/.codex/worktrees/8bea/angular-agent-framework/cockpit/langgraph/interrupts/angular/e2e/interrupts.spec.ts`
+
+Expected: a Playwright `test.describe` block. Note the imports and any test helpers used. We're going to extend with three new assertions.
+
+- [ ] **Step 2: Add tests for the structured approval card**
+
+Open `cockpit/langgraph/interrupts/angular/e2e/interrupts.spec.ts`. Inside the existing `test.describe(...)` block, append three tests (adjust selectors if the existing tests use different patterns — match the file's conventions):
+
+```ts
+  test('approval card displays structured payload fields', async ({ page }) => {
+    await page.goto('/');
+    // Click the welcome suggestion to seed a refund request.
+    await page.getByText('Refund a duplicate charge').click();
+    // The dialog opens with structured fields.
+    const dialog = page.locator('dialog.chat-approval-card');
+    await expect(dialog).toBeVisible();
+    await expect(dialog).toContainText('Refund approval required');
+    await expect(dialog).toContainText('$47.50');
+    await expect(dialog).toContainText('cus_a8x2k');
+  });
+
+  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();
+    await dialog.getByRole('button', { name: 'Approve' }).click();
+    // Expect the chat to surface the refund-issued message.
+    await expect(page.getByText(/Refund of \$47\.50 issued/i)).toBeVisible({ timeout: 15_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();
+    await dialog.getByRole('button', { name: 'Cancel' }).click();
+    await expect(page.getByText(/Refund cancelled by operator/i)).toBeVisible({ timeout: 15_000 });
+  });
+```
+
+- [ ] **Step 3: Run the e2e suite**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+npx nx e2e cockpit-langgraph-interrupts-angular --skip-nx-cache
+```
+
+Expected: all three new tests pass. Existing tests may need adjustment if the old assertions matched the previous prompt's "respond" semantics — fix any failures by updating the assertions to the new refund flow.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add cockpit/langgraph/interrupts/angular/e2e/interrupts.spec.ts
+git commit -m "test(cockpit): e2e for structured refund approval card"
+```
+
+---
+
+## Task 13: Open PR #2 as a draft, NO auto-merge
+
+**Files:** none — just git + gh.
+
+- [ ] **Step 1: Push the branch**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git push -u origin claude/cockpit-interrupts-refund
+```
+
+- [ ] **Step 2: Open as a DRAFT PR**
+
+```bash
+gh pr create --draft --title "feat(cockpit): refund-authorization interrupts example" --body "$(cat <<'EOF'
+## Summary
+
+Rewrites the cockpit \`interrupts\` example as a refund-authorization agent. Structured \`interrupt({ kind: 'refund_approval', amount, customer_id, reason })\` payload flows through the new \`ChatApprovalCard\` composition. Approve issues a (fake) refund; Cancel skips it; Edit lets the operator adjust the amount before approving.
+
+**Strict gate.** Auto-merge intentionally disabled. This PR stays in draft until manual review (Piece 3 in the plan) is signed off by Brian.
+
+## Test plan
+
+- [ ] \`nx e2e cockpit-langgraph-interrupts-angular\` green
+- [ ] Manual: refund flow walked through in a real browser (approve, edit, cancel paths)
+- [ ] Manual: three screenshots captured for the blog post
+
+Depends on PR #1 (chat library work).
+Plan: docs/superpowers/plans/2026-05-25-hitl-refund-cockpit-blog.md
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+EOF
+)"
+```
+
+Expected: PR opens in draft state. **Do NOT run `gh pr merge --auto`** — the strict gate is the whole point of this PR.
+
+---
+
+# Piece 3 — Manual review checkpoint
+
+Interactive. Runs in the live session, gated by Brian's sign-off. No commits.
+
+## Task 14: Boot the cockpit refund example locally
+
+**Files:** none — process management.
+
+- [ ] **Step 1: Verify any old dev server on port 3001 is killed**
+
+```bash
+lsof -ti :3001 | xargs kill -9 2>/dev/null; sleep 1
+lsof -ti :3001 || echo clear
+```
+
+Expected: `clear`.
+
+- [ ] **Step 2: Start the LangGraph backend**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework/cockpit/langgraph/interrupts/python
+nohup uv run langgraph dev --no-browser > /tmp/cockpit-interrupts-lg.log 2>&1 &
+disown
+```
+
+Expected: process backgrounds. Tail the log briefly to confirm it bound (default port 2024).
+
+```bash
+sleep 6 && tail -10 /tmp/cockpit-interrupts-lg.log
+```
+
+Expected log includes a "ready" / port line. If it shows an OpenAI key error, set `OPENAI_API_KEY` from the worktree root `.env` and re-run.
+
+- [ ] **Step 3: Start the Angular cockpit app**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+export PATH=/Users/blove/.nvm/versions/node/v22.14.0/bin:$PATH
+nohup npx nx serve cockpit-langgraph-interrupts-angular --port 4242 > /tmp/cockpit-interrupts-ng.log 2>&1 &
+disown
+sleep 12 && tail -10 /tmp/cockpit-interrupts-ng.log
+```
+
+Expected: Angular dev server reports listening on port 4242.
+
+- [ ] **Step 4: Smoke-check the app responds**
+
+```bash
+curl -s -o /dev/null -w "%{http_code}\n" http://localhost:4242/
+```
+
+Expected: `200`.
+
+---
+
+## Task 15: Drive the approval flow in Chrome MCP
+
+**Files:** none — live walkthrough.
+
+- [ ] **Step 1: Get a Chrome MCP tab and navigate**
+
+Call `mcp__Claude_in_Chrome__tabs_context_mcp` with `createIfEmpty: true`. Use the returned tab id, then call `mcp__Claude_in_Chrome__navigate` with url `http://localhost:4242/`.
+
+Expected: tab loads the cockpit refund app.
+
+- [ ] **Step 2: Trigger the refund draft**
+
+Tell Brian to click the welcome suggestion "Refund a duplicate charge" (or use `javascript_tool` to click it programmatically). Confirm the agent streams a response saying it's pausing for approval, then the `<dialog>` opens.
+
+Expected: dialog visible with `Amount $47.50`, `Customer cus_a8x2k`, and the reason.
+
+- [ ] **Step 3: Walk through the Approve path**
+
+Ask Brian to click **Approve**. Confirm the chat shows the refund-issued message. **Capture screenshot #2 here while the dialog is visible (do this in Task 16).**
+
+- [ ] **Step 4: Reset, walk through the Edit path**
+
+Reload the page (`mcp__Claude_in_Chrome__navigate` to the same URL). Click the suggestion again. When the dialog opens, click **Edit**. The amount input appears. Have Brian change it (e.g., 47.50 → 25.00) and click **Save**. Confirm the chat shows `Refund of $25.00 issued`.
+
+- [ ] **Step 5: Reset, walk through the Cancel path**
+
+Reload again. Click the suggestion. When the dialog opens, click **Cancel**. Confirm the chat shows `Refund cancelled by operator`.
+
+---
+
+## Task 16: Capture three screenshots
+
+**Files:** none yet — screenshots saved in step 4 of this task.
+
+- [ ] **Step 1: Resize the Chrome MCP viewport to a blog-friendly width**
+
+Call `mcp__Claude_in_Chrome__resize_window` (or `computer` action via Chrome MCP) to set viewport width to **1024px** with height 768px. Keeps screenshots well under the 2000px corruption threshold.
+
+- [ ] **Step 2: Frame 1 — agent drafting, no dialog yet**
+
+Reload to a clean state, click the suggestion, and capture the moment **before** the dialog opens (mid-streaming). Save via `mcp__Claude_in_Chrome__computer` with `action: screenshot, save_to_disk: true`.
+
+Note the returned path. Move it to `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/1.png`.
+
+- [ ] **Step 3: Frame 2 — approval dialog visible with structured payload**
+
+Wait for the dialog to open. Capture. Save to `.../2.png`.
+
+- [ ] **Step 4: Frame 3 — post-approval confirmation**
+
+Click Approve, wait for the refund-issued message, capture, save to `.../3.png`.
+
+- [ ] **Step 5: Verify all three exist and are under 2000px wide**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+ls -la apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/
+for f in apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/*.png; do
+  echo "$f: $(file "$f" | grep -oE '[0-9]+ x [0-9]+')"
+done
+```
+
+Expected: three PNGs, all ≤1024px wide.
+
+---
+
+## Task 17: Brian signs off, then mark PR #2 ready and arm auto-merge
+
+**Files:** none — gh + git.
+
+- [ ] **Step 1: Show Brian the screenshots and the running app, ask explicitly:**
+
+> "Manual review checkpoint. Three screenshots captured at `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/{1,2,3}.png`. The flow works in your Chrome tab at http://localhost:4242. **Do you sign off on the UI, or should we loop back to fix something before merging PR #2?**"
+
+Wait for explicit approval. If Brian wants changes, return to Task 11/12 or amend PR #1, then re-run Task 15/16.
+
+- [ ] **Step 2: Leave the screenshots in the working tree (uncommitted)**
+
+The three screenshots in `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/` belong with PR #3 (the blog), not PR #2 (the cockpit). Do **not** commit them on the cockpit branch — they'll be picked up on the fresh blog branch in Task 19.
+
+Confirm the cockpit branch has no screenshot files staged:
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git status --short | grep -E "apps/website/public/blog"
+```
+
+Expected: no output (the screenshots are untracked, not staged).
+
+- [ ] **Step 3: Mark PR #2 ready and arm auto-merge**
+
+```bash
+gh pr ready
+gh pr merge --squash --auto --delete-branch
+```
+
+Expected: PR #2 leaves draft, CI runs, auto-merges on green.
+
+---
+
+# PR #3 — Blog rewrite
+
+Branch: `claude/blog-hitl-refund-rewrite`. Depends on PR #2 merging.
+
+## Task 18: Close the existing PR #550 draft
+
+**Files:** none.
+
+- [ ] **Step 1: Close PR #550**
+
+```bash
+gh pr comment 550 --body "Closing in favor of a rewrite against the verified cockpit refund example. A replacement PR follows."
+gh pr close 550
+```
+
+Expected: PR #550 closed.
+
+---
+
+## Task 19: Create the blog branch with screenshots staged
+
+**Files:** none — branching only.
+
+- [ ] **Step 1: Sync main and branch**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git checkout main
+git pull origin main
+git checkout -b claude/blog-hitl-refund-rewrite
+```
+
+- [ ] **Step 2: Stage the screenshots from Task 16**
+
+The three screenshot files should still be present in `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/` from the manual-review step (they were never committed). Confirm:
+
+```bash
+ls apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/
+```
+
+Expected: `1.png`, `2.png`, `3.png`.
+
+---
+
+## Task 20: Rewrite the blog post against the verified cockpit code
+
+**Files:**
+- Rewrite: `apps/website/content/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular.mdx`
+
+- [ ] **Step 1: Replace the file contents**
+
+Overwrite `apps/website/content/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular.mdx` with:
+
+```mdx
+---
+title: "Human-in-the-Loop LangGraph Agents in Angular"
+description: "Build a human-in-the-loop LangGraph agent in Angular — pause runs before money moves with a structured approval dialog from @threadplane/chat and @threadplane/langgraph."
+date: 2026-05-25
+tags: [tutorial, langgraph, angular, agents, hitl, interrupts]
+author: brian
+featured: false
+---
+
+Let's build a human-in-the-loop LangGraph agent in Angular, with an approval dialog that pauses the run before money moves.
+
+I learned this one the cheap way. The first time I let an agent call Stripe directly, it tried to refund the same customer twice in the same run. The second call failed because the first had already cleared. If I'd given it a slightly different prompt, it could have refunded ten times.
+
+That's the moment I started reaching for `interrupt()`.
+
+Streaming made chat feel alive. Interrupts make tool calls feel *safe*. They're the difference between a demo your team enjoys and a system you trust to call your own APIs.
+
+You can run this whole tutorial. The code below is copied verbatim from the cockpit example at `cockpit/langgraph/interrupts` in the threadplane repo — every screenshot in this post was captured from that running app. Clone, `nx serve cockpit-langgraph-interrupts-angular`, and click along.
+
+## Goals
+
+- Understand *why* human-in-the-loop is the production-vs-demo line for tool calls.
+- Wire a refund-approval gate using LangGraph's `interrupt()` primitive.
+- Render the approval dialog in Angular with the new `<chat-approval-card>` composition.
+- Resume or reject the run, with edit support and a real semantic difference between Approve / Edit / Cancel.
+- Have fun!
+
+## Why interrupts matter
+
+Streaming chat changed the conversation from "is it broken?" to "is this the answer I wanted?" Interrupts change a *different* question: "should this thing actually happen?"
+
+Most tool calls don't need approval. A read against your data warehouse, a vector search, a stock-price lookup — let the agent rip. But the moment a tool moves money, sends a message a customer will see, deletes a row, or kicks off a build, you want a human in the loop.
+
+Two reasons.
+
+The cheap one is cost. An LLM in a loop with a write API is a slot machine where the house is your bank account. Interrupts cap the blast radius.
+
+The deeper one is trust. The operator on the other side of the screen needs to feel like the agent is collaborating with them, not narrating a fait accompli. A pause for review tells them "you're still driving."
+
+In my opinion, interrupts are what turn an agent from a demo into a teammate. They're not friction — they're *consent*.
+
+<figure>
+  <img src="/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/1.png" alt="The refund agent streaming a response after the operator asks to refund $47.50. The agent says it'll pause for approval." width="1024" height="768" />
+  <figcaption>The refund agent acknowledges the request and prepares to pause for approval.</figcaption>
+</figure>
+
+## The architecture in three boxes
+
+Let's look at the seams before we touch any code.
+
+**LangGraph backend.** A node that, instead of calling Stripe directly, calls `interrupt({ kind: 'refund_approval', amount, customer_id, reason })`. The run pauses there. The thread checkpointer persists the pending interrupt until something resumes it.
+
+**`@threadplane/langgraph` adapter.** Forwards the pending interrupt onto an `agent.interrupt()` signal. `agent.submit({ resume: <any> })` writes a structured value back to the paused graph.
+
+**`@threadplane/chat` UI.** The new `<chat-approval-card>` composition reads the agent's pending interrupt, opens a native HTML `<dialog>` modal, and emits `'approve' | 'edit' | 'cancel'` when the operator clicks a button.
+
+The contract is narrow. The LangGraph node doesn't know how the UI renders. The Angular component doesn't know which graph it's paused inside. That separation is what lets you reuse one approval card across five different agents.
+
+## Scaffold
+
+Three files. Let's go.
+
+<Steps>
+<Step title="The LangGraph node">
+
+```python
+# refund_agent.py — adapted from cockpit/langgraph/interrupts/python/src/graph.py
+from langgraph.graph import StateGraph, START, END
+from langgraph.types import interrupt
+
+def request_approval(state: RefundState) -> dict:
+    """Pause for human approval. Resume value is { approved: bool, amount?: number }."""
+    decision = interrupt({
+        "kind": "refund_approval",
+        "amount": state["amount"],
+        "customer_id": state["customer_id"],
+        "reason": state["reason"],
+    })
+
+    if not isinstance(decision, dict) or not decision.get("approved"):
+        return {
+            "refund_id": None,
+            "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 state["amount"]
+    return {"amount": final_amount}
+```
+
+`interrupt()` is a function call inside a node. When it runs, the graph pauses and persists the interrupt payload to the thread checkpointer. The graph stays paused until `agent.submit({ resume: <value> })` is called against the same thread — and `<value>` is what `interrupt()` returns when the node re-executes.
+
+That's it. No queues, no webhooks, no human-approval-service.
+
+</Step>
+<Step title="Wire the providers">
+
+```ts
+// app.config.ts — from cockpit/langgraph/interrupts/angular/src/app/app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideAgent } from '@threadplane/langgraph';
+import { provideChat } from '@threadplane/chat';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAgent({ apiUrl: 'http://localhost:2024' }),
+    provideChat({}),
+  ],
+};
+```
+
+Same wiring as any other LangGraph agent. The adapter doesn't need to know your graph contains interrupts — it discovers them at runtime from the thread state.
+
+</Step>
+<Step title="The component">
+
+```ts
+// interrupts.component.ts — from cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts
+import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
+import { ChatComponent, ChatApprovalCardComponent, type ChatApprovalAction } from '@threadplane/chat';
+import { agent } from '@threadplane/langgraph';
+
+@Component({
+  selector: 'app-interrupts',
+  standalone: true,
+  imports: [ChatComponent, ChatApprovalCardComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <chat [agent]="agent" />
+    <chat-approval-card
+      [agent]="agent"
+      matchKind="refund_approval"
+      title="Refund approval required"
+      [showEdit]="true"
+      (action)="onAction($event)"
+    >
+      <ng-template #body let-payload>
+        <div><strong>{{ payload.amount | currency }}</strong> to <code>{{ payload.customer_id }}</code></div>
+        @if (payload.reason) { <div><em>{{ payload.reason }}</em></div> }
+      </ng-template>
+    </chat-approval-card>
+  `,
+})
+export class InterruptsComponent {
+  protected readonly agent = agent({ assistantId: 'interrupts' });
+
+  protected onAction(action: ChatApprovalAction): void {
+    if (action === 'approve') {
+      void this.agent.submit({ resume: { approved: true } });
+    } else if (action === 'cancel') {
+      void this.agent.submit({ resume: { approved: false } });
+    }
+    // Edit reveals an inline form in the body slot; saving submits
+    // { approved: true, amount: <new> } directly. See the cockpit
+    // example for the full edit flow.
+  }
+}
+```
+
+`<chat-approval-card>` is a panel-style composition. It reads `agent.interrupt()`, matches the `kind` you specify via `matchKind`, opens a native `<dialog>` modal, and emits an action enum on each button click.
+
+The body is yours — write whatever Angular template makes sense for the structured payload your graph emitted. The composition handles the shell.
+
+</Step>
+</Steps>
+
+<figure>
+  <img src="/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/2.png" alt="The approval dialog visible with amount $47.50, customer cus_a8x2k, and reason 'duplicate charge.'" width="1024" height="768" />
+  <figcaption>The native &lt;dialog&gt; modal halts the conversation. The structured payload renders cleanly via the body template slot.</figcaption>
+</figure>
+
+## What's happening under the hood
+
+Let's trace one full run.
+
+1. User: "Refund $47.50 to customer cus_a8x2k for a duplicate charge."
+2. The `draft` node extracts customer, amount, and reason from the conversation.
+3. The `request_approval` node calls `interrupt({ kind: 'refund_approval', amount, customer_id, reason })`. Graph pauses. Thread checkpointer persists the pending interrupt.
+4. The adapter receives the pause event, exposes it on `agent.interrupt()`.
+5. `<chat-approval-card>` sees the interrupt, matches the `kind`, calls `dialog.showModal()` on its native `<dialog>` element.
+6. Operator clicks Approve.
+7. Component handler runs `agent.submit({ resume: { approved: true } })`.
+8. The adapter posts the resume to LangGraph. The `request_approval` node re-runs — `interrupt()` returns `{ approved: true }` this time instead of pausing.
+9. The graph continues to `issue_refund`. Stripe is called (fake in this demo — a real refund ID is logged instead). The run finishes.
+
+The whole thing is one thread, one persisted state. If the operator closes the tab and comes back tomorrow, the interrupt is still there. Pretty freakin' cool. 💚
+
+<figure>
+  <img src="/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/3.png" alt="The chat after approval — a confirmation message reads 'Refund of $47.50 issued to cus_a8x2k. Refund ID: re_demo_a8x2k.'" width="1024" height="768" />
+  <figcaption>After Approve, the run continues into `issue_refund` and posts confirmation back into the chat.</figcaption>
+</figure>
+
+## Production patterns
+
+Three things to know before this ships to a real customer.
+
+### Idempotency
+
+`interrupt()` re-executes the node when the graph resumes. That means any side effect *before* the `interrupt()` call has already run, and any side effect *after* will run on resume. Put the write call (the Stripe `refund.create`) on the resumed side, never the planning side.
+
+And use an idempotency key. The `request_approval` node should generate one and pass it through state to `issue_refund` — so if the operator's network blips and they click Approve twice, Stripe deduplicates the second call.
+
+### Audit trail
+
+When the operator approves, log who approved, when, and what payload they saw. The cleanest place is in the action handler, before `agent.submit` fires:
+
+```ts
+protected async onAction(action: ChatApprovalAction): Promise<void> {
+  if (action === 'approve') {
+    await this.audit.record({
+      actor: this.currentUser(),
+      decision: 'approved',
+      payload: this.agent.interrupt()?.value,
+    });
+    void this.agent.submit({ resume: { approved: true } });
+  }
+}
+```
+
+Auditing is the difference between "the agent did a thing" and "I can prove who authorized it." Compliance teams care a lot about this.
+
+### When NOT to interrupt
+
+Resist the urge to interrupt on every tool call. A pause for an analytics query is friction with no upside. A pause for a `customers.search` is annoying.
+
+The rule I use: interrupt on writes the operator wouldn't want to undo by hand.
+
+For me, that's about three categories — money movement, customer-facing communication, and destructive deletes. Everything else, let the agent run. If you can undo it with a script in under a minute, it doesn't need approval.
+
+## Conclusion
+
+Streaming made agents feel alive. Interrupts make them safe to ship.
+
+The pattern is small — one `interrupt()` call in your LangGraph node, one `<chat-approval-card>` in your Angular component, one `agent.submit({ resume })` from the action handler. The architecture is what's powerful: the thread state holds the pause, the adapter exposes it, the dialog renders it, and the operator can close the laptop and come back tomorrow.
+
+The next post in this series wires the other half — durable threads — so the conversation (and the pending interrupt) survives a reload, a different device, or a different operator.
+
+If you're building an agent that touches money, sends messages, or deletes data, I think you owe your users a pause button. Now you have one.
+```
+
+- [ ] **Step 2: Verify the article renders on the local dev server**
+
+The website dev server should still be up on 3001. If not, restart it:
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+export PATH=/Users/blove/.nvm/versions/node/v22.14.0/bin:$PATH
+lsof -ti :3001 | xargs kill -9 2>/dev/null; sleep 1
+nohup npx next dev apps/website --port 3001 > /tmp/website-main.log 2>&1 &
+disown
+sleep 6
+```
+
+Then check:
+
+```bash
+curl -s -o /dev/null -w "%{http_code}\n" http://localhost:3001/blog/human-in-the-loop-langgraph-agents-in-angular
+curl -s http://localhost:3001/blog/human-in-the-loop-langgraph-agents-in-angular | grep -oE '<figure[^>]*>' | wc -l
+```
+
+Expected: `200`, three `<figure>` elements.
+
+- [ ] **Step 3: Commit the rewrite + screenshots**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git add apps/website/content/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular.mdx apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/
+git commit -m "docs(blog): rewrite HITL post against verified cockpit refund example
+
+Three figures captured from the live cockpit at cockpit/langgraph/interrupts.
+Code blocks copied verbatim from the cockpit graph.py + interrupts.component.ts.
+Replaces the v1 draft (PR #550, closed) which documented APIs that didn't exist."
+```
+
+---
+
+## Task 21: Open PR #3 and arm auto-merge
+
+**Files:** none.
+
+- [ ] **Step 1: Push the branch**
+
+```bash
+cd /Users/blove/.codex/worktrees/8bea/angular-agent-framework
+git push -u origin claude/blog-hitl-refund-rewrite
+```
+
+- [ ] **Step 2: Open the PR**
+
+```bash
+gh pr create --title "docs(blog): \"Human-in-the-Loop LangGraph Agents in Angular\"" --body "$(cat <<'EOF'
+## Summary
+
+Third post in the agent-UI tutorial series. Walks through the cockpit refund flow shipped in PR #2 — code blocks are copied verbatim from \`cockpit/langgraph/interrupts\`, three screenshots are captured from the running app.
+
+**Replaces PR #550** (closed) which documented APIs that didn't actually exist. This version is faithful to the implementation.
+
+## Voice / SEO
+
+- Primary keyword: \`angular human in the loop\` / \`langgraph interrupt angular\` (SERP near-empty)
+- Voice doc compliance: title-restated lede, \`## Goals\` ending in \`Have fun!\`, "Let's" workhorse transitions, italics emphasis, one 💚 emoji, "freakin' cool," personal Stripe disclosure, forward-link close (not a CTA), explicit \`## Conclusion\`.
+
+## Test plan
+
+- [ ] \`nx lint website\` clean
+- [ ] \`nx test website\` green
+- [ ] \`nx e2e website\` green (existing tests; this post is just content)
+- [ ] Manual: article renders at \`/blog/human-in-the-loop-langgraph-agents-in-angular\`, three \`<figure>\` elements visible
+
+Depends on PR #2 (cockpit refund example) merging first.
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+EOF
+)"
+```
+
+- [ ] **Step 3: Arm auto-merge**
+
+```bash
+gh pr merge --squash --auto --delete-branch
+```
+
+Expected: auto-merge enabled. CI runs; PR merges on green.
+
+---
+
+## Definition of done
+
+- PR #1 merged (library work).
+- PR #2 merged (cockpit refund example), gated by Brian's manual sign-off in Task 17.
+- PR #3 merged (blog rewrite).
+- The three screenshots committed under `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/`.
+- The blog post renders at `/blog/human-in-the-loop-langgraph-agents-in-angular` with three figures.
+- PR #550 closed with a pointer to PR #3.
+- Bespoke `ApprovalCardComponent` deleted from the cockpit; the cockpit imports `ChatApprovalCardComponent` from `@threadplane/chat`.
+
+## Out of scope (deferred to later plans)
+
+- `--ngaf-chat-*` → `--threadplane-chat-*` system-wide token rename.
+- A built-in inline-edit form inside `ChatApprovalCard` (callers render it via the body slot).
+- Distinct `agent.resume(value)` API alongside `agent.submit({ resume })`.
+- Real Stripe integration in the cockpit (`issue_refund` logs a fake `refund_id`).
+- Multi-turn chained approvals.
diff --git a/docs/superpowers/plans/2026-05-27-cockpit-port-registry.md b/docs/superpowers/plans/2026-05-27-cockpit-port-registry.md
new file mode 100644
index 000000000..d1fc35ca8
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-27-cockpit-port-registry.md
@@ -0,0 +1,725 @@
+# Cockpit Port Registry Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Centralize cockpit cap port allocation behind a `cockpit/ports.mjs` registry that proxy configs + e2e setup files import at runtime, plus a CI verifier that asserts python project.json `--port` literals match the registry.
+
+**Architecture:** Single ESM module exports a frozen `PORTS` map keyed by cap angular project name. 31 × `proxy.conf.mjs` (replacing `.json`) and 24 × `e2e/global-setup-impl.ts` + 24 × `e2e/playwright.config.ts` import from it. The 31 × `python/project.json` `--port` literals stay as-is and are verified by `scripts/cockpit-ports.spec.mjs` in CI. `cockpit/ag-ui/streaming` is excluded by design (non-LangGraph backend).
+
+**Tech Stack:** Node.js ESM (.mjs), `node:test` + `node:assert/strict`, Angular dev-server `proxyConfig` (`.mjs` support), Playwright config, Nx `nx:run-commands` executor.
+
+**Spec correction**: there is no `port` in angular `project.json`. The Angular port for e2e is set via `nx serve --port` override (passed by the e2e harness from `global-setup-impl.ts`) AND duplicated in `e2e/playwright.config.ts` `baseURL`. Spec's verifier test #4 ("angular project.json `serve.options.port`") is replaced with verifying `playwright.config.ts` baseURL.
+
+---
+
+### Task 1: Verifier spec (TDD) + minimal registry
+
+**Files:**
+- Create: `scripts/cockpit-ports.spec.mjs`
+- Create: `cockpit/ports.mjs` (minimal — empty PORTS object so tests can run)
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `scripts/cockpit-ports.spec.mjs`:
+
+```js
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import { readdirSync, readFileSync, existsSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { PORTS } from '../cockpit/ports.mjs';
+
+const repoRoot = resolve(fileURLToPath(import.meta.url), '..', '..');
+const cockpitDir = join(repoRoot, 'cockpit');
+
+const AGUI_EXCEPTION = 'cockpit-ag-ui-streaming-angular';
+
+function findCockpitAngularProjects() {
+  // Walk cockpit/ for project.json files inside angular/ dirs.
+  const out = [];
+  function walk(dir) {
+    let entries;
+    try { entries = readdirSync(dir); } catch { return; }
+    for (const name of entries) {
+      const full = join(dir, name);
+      if (name === 'node_modules' || name.startsWith('.')) continue;
+      let stat;
+      try { stat = readFileSync(join(full, 'project.json'), 'utf8'); }
+      catch { walk(full); continue; }
+      try {
+        const meta = JSON.parse(stat);
+        if (typeof meta.name === 'string' && meta.name.endsWith('-angular') && meta.name.startsWith('cockpit-')) {
+          out.push({ name: meta.name, dir: full, meta });
+        }
+      } catch {}
+      walk(full);
+    }
+  }
+  walk(cockpitDir);
+  return out;
+}
+
+const projects = findCockpitAngularProjects();
+
+describe('cockpit/ports.mjs registry', () => {
+  test('covers every cockpit-*-angular project on disk except ag-ui', () => {
+    const onDisk = projects.map((p) => p.name).filter((n) => n !== AGUI_EXCEPTION);
+    const missing = onDisk.filter((n) => !(n in PORTS));
+    assert.deepEqual(missing, [], `missing from PORTS: ${missing.join(', ')}`);
+  });
+
+  test('has no orphan entries (each PORTS key has a project on disk)', () => {
+    const diskNames = new Set(projects.map((p) => p.name));
+    const orphans = Object.keys(PORTS).filter((n) => !diskNames.has(n));
+    assert.deepEqual(orphans, [], `orphan PORTS entries: ${orphans.join(', ')}`);
+  });
+
+  test('ag-ui is NOT in the registry (exception)', () => {
+    assert.equal(AGUI_EXCEPTION in PORTS, false);
+  });
+
+  test('every entry has angular + langgraph as positive integers', () => {
+    for (const [name, p] of Object.entries(PORTS)) {
+      assert.equal(typeof p.angular, 'number', `${name}.angular not number`);
+      assert.equal(typeof p.langgraph, 'number', `${name}.langgraph not number`);
+      assert.ok(p.angular > 0 && p.langgraph > 0, `${name} has non-positive port`);
+    }
+  });
+
+  test('port ranges: angular ∈ [4000, 5000), langgraph ∈ [5000, 6000), langgraph = angular + 1000', () => {
+    for (const [name, p] of Object.entries(PORTS)) {
+      assert.ok(p.angular >= 4000 && p.angular < 5000, `${name}.angular out of range: ${p.angular}`);
+      assert.ok(p.langgraph >= 5000 && p.langgraph < 6000, `${name}.langgraph out of range: ${p.langgraph}`);
+      assert.equal(p.langgraph, p.angular + 1000, `${name}: langgraph (${p.langgraph}) != angular (${p.angular}) + 1000`);
+    }
+  });
+
+  test('no duplicate ports', () => {
+    const seen = new Set();
+    for (const [name, p] of Object.entries(PORTS)) {
+      for (const port of [p.angular, p.langgraph]) {
+        assert.ok(!seen.has(port), `duplicate port ${port} (${name})`);
+        seen.add(port);
+      }
+    }
+  });
+
+  test('each cap python/project.json --port matches PORTS[name].langgraph', () => {
+    const mismatches = [];
+    for (const { name, dir } of projects) {
+      if (name === AGUI_EXCEPTION) continue;
+      const pyProjectJson = join(dir, '..', 'python', 'project.json');
+      if (!existsSync(pyProjectJson)) {
+        mismatches.push(`${name}: missing python/project.json at ${pyProjectJson}`);
+        continue;
+      }
+      const meta = JSON.parse(readFileSync(pyProjectJson, 'utf8'));
+      const cmd = String(meta?.targets?.serve?.options?.command ?? '');
+      const m = cmd.match(/--port[= ](\d+)/);
+      if (!m) {
+        mismatches.push(`${name}: no --port in python/project.json serve command`);
+        continue;
+      }
+      const literal = Number(m[1]);
+      const expected = PORTS[name]?.langgraph;
+      if (literal !== expected) {
+        mismatches.push(`${name}: python --port ${literal} != registry ${expected}`);
+      }
+    }
+    assert.deepEqual(mismatches, []);
+  });
+
+  test('each active-e2e cap playwright.config.ts baseURL port matches PORTS[name].angular', () => {
+    const mismatches = [];
+    for (const { name, dir } of projects) {
+      if (name === AGUI_EXCEPTION) continue;
+      const pwConfig = join(dir, 'e2e', 'playwright.config.ts');
+      if (!existsSync(pwConfig)) continue; // 7 caps without e2e are fine
+      const text = readFileSync(pwConfig, 'utf8');
+      const m = text.match(/baseURL:\s*[`'"]http:\/\/localhost:(\d+)[`'"/]/);
+      if (!m) continue; // skip if no literal baseURL (might use import already)
+      const literal = Number(m[1]);
+      const expected = PORTS[name]?.angular;
+      if (literal !== expected) {
+        mismatches.push(`${name}: playwright baseURL :${literal} != registry :${expected}`);
+      }
+    }
+    assert.deepEqual(mismatches, []);
+  });
+});
+```
+
+- [ ] **Step 2: Create minimal registry (will fail tests intentionally)**
+
+Create `cockpit/ports.mjs`:
+
+```js
+// SPDX-License-Identifier: MIT
+
+/**
+ * @typedef {{ angular: number; langgraph: number }} CapPorts
+ * @typedef {Record<string, CapPorts>} PortsRegistry
+ */
+
+/**
+ * Single source of truth for cockpit cap port allocation.
+ *
+ * Excludes cockpit-ag-ui-streaming-angular — uses a non-LangGraph
+ * backend (Node ag-ui server on :3000, /agent proxy). Single-cap
+ * exception; left as a literal in its own files.
+ *
+ * Port ranges:
+ *   - angular: [4000, 5000)
+ *   - langgraph: [5000, 6000)
+ *   - Convention: langgraph = angular + 1000
+ *
+ * The CI verifier (scripts/cockpit-ports.spec.mjs) asserts this
+ * registry matches the literal --port values in each cap's
+ * python/project.json + baseURL in playwright.config.ts.
+ *
+ * @type {PortsRegistry}
+ */
+export const PORTS = Object.freeze({});
+
+/**
+ * Look up ports for a cap by its Nx angular project name.
+ * Throws if the name isn't in the registry — caller crash for
+ * fast diagnosis.
+ *
+ * @param {string} cap
+ * @returns {CapPorts}
+ */
+export function portsFor(cap) {
+  const p = PORTS[cap];
+  if (!p) throw new Error(`No port allocation for ${cap}`);
+  return p;
+}
+```
+
+- [ ] **Step 3: Run tests, verify the "covers every cap" test fails**
+
+Run: `node --test scripts/cockpit-ports.spec.mjs`
+
+Expected: at least the first test ("covers every cockpit-*-angular project") fails with a list of missing entries (31 names). Other tests may pass vacuously on the empty registry.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add scripts/cockpit-ports.spec.mjs cockpit/ports.mjs
+git commit -m "feat(ci): cockpit ports registry + verifier spec (skeleton)
+
+Registry starts empty; the verifier spec tests both the registry
+shape (positive int ports, no duplicates, range/convention checks)
+and cross-file invariants (python --port + playwright baseURL match
+registry). Empty registry intentionally fails the 'covers every
+cap' test until Task 2 populates it.
+
+Spec: docs/superpowers/specs/2026-05-27-cockpit-port-registry-design.md"
+```
+
+---
+
+### Task 2: Populate the registry from existing on-disk ports
+
+**Files:**
+- Modify: `cockpit/ports.mjs`
+
+- [ ] **Step 1: Extract existing port assignments**
+
+Run this helper from the worktree root to enumerate the existing port pairs:
+
+```bash
+node - <<'EOF'
+import { readdirSync, readFileSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+const ROOT = 'cockpit';
+const out = {};
+function walk(d) {
+  let entries; try { entries = readdirSync(d); } catch { return; }
+  for (const n of entries) {
+    if (n === 'node_modules' || n.startsWith('.')) continue;
+    const f = `${d}/${n}`;
+    if (n === 'angular') {
+      const pj = `${f}/project.json`;
+      if (!existsSync(pj)) continue;
+      const meta = JSON.parse(readFileSync(pj, 'utf8'));
+      if (typeof meta.name !== 'string' || !meta.name.endsWith('-angular')) continue;
+      if (meta.name === 'cockpit-ag-ui-streaming-angular') continue;
+      // langgraph port from proxy.conf.json target
+      const proxyJson = `${f}/proxy.conf.json`;
+      let langgraph = null;
+      if (existsSync(proxyJson)) {
+        const proxy = JSON.parse(readFileSync(proxyJson, 'utf8'));
+        for (const v of Object.values(proxy)) {
+          const m = String(v.target ?? '').match(/localhost:(\d+)/);
+          if (m) { langgraph = Number(m[1]); break; }
+        }
+      }
+      // angular port from playwright.config.ts baseURL (if e2e exists)
+      let angular = null;
+      const pw = `${f}/e2e/playwright.config.ts`;
+      if (existsSync(pw)) {
+        const m = readFileSync(pw, 'utf8').match(/baseURL:\s*[`'"]http:\/\/localhost:(\d+)/);
+        if (m) angular = Number(m[1]);
+      }
+      // fall back to langgraph - 1000 for non-e2e caps
+      if (angular === null && langgraph !== null) angular = langgraph - 1000;
+      out[meta.name] = { angular, langgraph };
+      continue;
+    }
+    walk(f);
+  }
+}
+walk(ROOT);
+const sorted = Object.keys(out).sort().reduce((acc, k) => (acc[k] = out[k], acc), {});
+for (const [k, v] of Object.entries(sorted)) {
+  console.log(`  '${k}': { angular: ${v.angular}, langgraph: ${v.langgraph} },`);
+}
+EOF
+```
+
+Expected: 31 lines printed (every LangGraph cockpit angular project except ag-ui), each with both ports.
+
+Save the output for Step 2.
+
+- [ ] **Step 2: Paste the entries into `cockpit/ports.mjs`**
+
+Replace `export const PORTS = Object.freeze({});` with `export const PORTS = Object.freeze({ ... });` populated from Step 1's output. The 31 entries go inside the braces, alphabetically by key (the helper already sorts).
+
+- [ ] **Step 3: Run tests, verify shape tests pass**
+
+Run: `node --test scripts/cockpit-ports.spec.mjs`
+
+Expected: tests "covers every cap", "no orphan entries", "ag-ui not in registry", "positive integers", "port ranges", "no duplicates" all PASS. The two cross-file verifier tests (python `--port`, playwright `baseURL`) also PASS because we populated FROM those existing values.
+
+If a port-range or convention test fails: one or more existing port assignments don't follow the `angular + 1000 = langgraph` convention. Surface the cap, decide whether to:
+- Update the existing literal to match the convention (preferred — fix drift)
+- OR widen the test's tolerance (only if intentional)
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add cockpit/ports.mjs
+git commit -m "feat(ci): populate cockpit ports registry from on-disk values
+
+31 entries, extracted from each cap's proxy.conf.json target +
+playwright.config.ts baseURL (or langgraph - 1000 for non-e2e caps).
+Verifier confirms the registry round-trips cleanly against every
+python/project.json --port literal."
+```
+
+---
+
+### Task 3: Sweep proxy.conf.json → proxy.conf.mjs (×31)
+
+**Files:**
+- For each of 31 caps:
+  - Create: `cockpit/<x>/<y>/angular/proxy.conf.mjs`
+  - Delete: `cockpit/<x>/<y>/angular/proxy.conf.json`
+  - Modify: `cockpit/<x>/<y>/angular/project.json` (`serve.options.proxyConfig` extension)
+
+- [ ] **Step 1: Write a sweep script (does NOT commit; just runs)**
+
+Create `/tmp/sweep-proxy.mjs` (not committed; throwaway):
+
+```js
+import { readdirSync, readFileSync, writeFileSync, existsSync, unlinkSync } from 'node:fs';
+import { dirname, join, relative } from 'node:path';
+
+const ROOT = process.cwd();
+const COCKPIT = `${ROOT}/cockpit`;
+
+// List of (capName, angularDir, langgraphPort) tuples
+const caps = [];
+function walk(d) {
+  for (const n of readdirSync(d)) {
+    if (n === 'node_modules' || n.startsWith('.')) continue;
+    const f = `${d}/${n}`;
+    if (n === 'angular') {
+      const pj = `${f}/project.json`;
+      if (!existsSync(pj)) continue;
+      const meta = JSON.parse(readFileSync(pj, 'utf8'));
+      if (typeof meta.name !== 'string' || !meta.name.endsWith('-angular')) continue;
+      if (meta.name === 'cockpit-ag-ui-streaming-angular') continue;
+      caps.push({ name: meta.name, dir: f });
+      continue;
+    }
+    let stat; try { stat = readFileSync(`${f}/project.json`); } catch { walk(f); continue; }
+    walk(f);
+  }
+}
+walk(COCKPIT);
+
+for (const cap of caps) {
+  const proxyJson = `${cap.dir}/proxy.conf.json`;
+  const proxyMjs = `${cap.dir}/proxy.conf.mjs`;
+  if (!existsSync(proxyJson)) {
+    console.error(`SKIP ${cap.name}: no proxy.conf.json`);
+    continue;
+  }
+  const old = JSON.parse(readFileSync(proxyJson, 'utf8'));
+  // Compute relative import path from <cap>/angular/ to cockpit/ports.mjs.
+  // <cap>/angular/ is 4 levels deep relative to repo root (cockpit/<topic>/<cap>/angular/).
+  // From there, ../../../../cockpit/ports.mjs would resolve.
+  // But cockpit/render/<cap>/angular is also 4 deep. Same for chat, deep-agents, langgraph.
+  // So we always need ../../../../cockpit/ports.mjs (4 ups).
+  const relImport = '../../../../cockpit/ports.mjs';
+
+  // Build new .mjs content. Preserve the route key + secure/changeOrigin opts.
+  const routes = Object.entries(old).map(([route, conf]) => {
+    const target = `\`http://localhost:\${langgraph}\``;
+    const otherOpts = Object.entries(conf)
+      .filter(([k]) => k !== 'target')
+      .map(([k, v]) => `    ${k}: ${JSON.stringify(v)},`)
+      .join('\n');
+    return `  ${JSON.stringify(route)}: {
+    target: ${target},
+${otherOpts}
+  }`;
+  }).join(',\n');
+
+  const content = `// SPDX-License-Identifier: MIT
+import { portsFor } from '${relImport}';
+
+const { langgraph } = portsFor('${cap.name}');
+
+export default {
+${routes},
+};
+`;
+  writeFileSync(proxyMjs, content);
+  unlinkSync(proxyJson);
+  console.log(`OK ${cap.name}`);
+
+  // Also update project.json's proxyConfig extension.
+  const angularProjectJson = `${cap.dir}/project.json`;
+  const meta = JSON.parse(readFileSync(angularProjectJson, 'utf8'));
+  const opts = meta.targets?.serve?.options;
+  if (opts?.proxyConfig?.endsWith('proxy.conf.json')) {
+    opts.proxyConfig = opts.proxyConfig.replace(/\.json$/, '.mjs');
+    writeFileSync(angularProjectJson, JSON.stringify(meta, null, 2) + '\n');
+  }
+}
+console.log(`Total: ${caps.length} caps swept`);
+```
+
+Run: `node /tmp/sweep-proxy.mjs`
+
+Expected: "OK <name>" for 31 caps, "Total: 31 caps swept".
+
+- [ ] **Step 2: Spot-check the result**
+
+Run:
+```bash
+cat cockpit/chat/messages/angular/proxy.conf.mjs
+ls cockpit/chat/messages/angular/proxy.conf.json && echo "STILL EXISTS — BUG" || echo "deleted OK"
+grep proxyConfig cockpit/chat/messages/angular/project.json
+```
+
+Expected:
+- `proxy.conf.mjs` exists, imports from `'../../../../cockpit/ports.mjs'`, exports a default object with `/api → http://localhost:${langgraph}`
+- `proxy.conf.json` is deleted
+- `project.json` has `"proxyConfig": "cockpit/chat/messages/angular/proxy.conf.mjs"`
+
+If the spot-check fails on any cap, run the sweep again after fixing the script — it's idempotent enough (creates `.mjs`, deletes `.json`).
+
+- [ ] **Step 3: Verify the registry tests still pass**
+
+Run: `node --test scripts/cockpit-ports.spec.mjs`
+
+Expected: all tests still pass. The verifier doesn't yet check proxy.conf.mjs content (that's behavioral, not literal-port drift), so the sweep is a no-op from its perspective.
+
+- [ ] **Step 4: Smoke-test one cap dev server**
+
+Run: `npx nx serve cockpit-chat-messages-angular --port 9999 &` then `curl -s http://localhost:9999/ -o /dev/null -w '%{http_code}'`
+
+Expected: `200`. Angular dev-server loads `proxy.conf.mjs` without error. Kill the server: `pkill -f 'cockpit-chat-messages-angular'`.
+
+If Angular complains about `.mjs` proxy config: check Angular version. The repo uses Angular 22+, which natively supports `.mjs` proxy configs. If older, fall back to `.cjs`.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add cockpit/
+git commit -m "refactor(cockpit): 31 proxy.conf.json → proxy.conf.mjs (import ports registry)
+
+Every cockpit cap's proxy.conf.json is replaced with proxy.conf.mjs
+that imports portsFor(capName) from cockpit/ports.mjs and templates
+the langgraph port into the target URL. Each angular/project.json's
+serve.options.proxyConfig is updated to point at the .mjs file.
+
+cockpit/ag-ui/streaming is excluded — non-LangGraph backend, kept
+as proxy.conf.json with its /agent → :3000 literal."
+```
+
+---
+
+### Task 4: Sweep `e2e/global-setup-impl.ts` + `e2e/playwright.config.ts` (×24)
+
+**Files:**
+- For each of the 24 active e2e caps:
+  - Modify: `cockpit/<x>/<y>/angular/e2e/global-setup-impl.ts`
+  - Modify: `cockpit/<x>/<y>/angular/e2e/playwright.config.ts`
+
+- [ ] **Step 1: Write a sweep script**
+
+Create `/tmp/sweep-e2e.mjs`:
+
+```js
+import { readdirSync, readFileSync, writeFileSync, existsSync } from 'node:fs';
+
+const ROOT = process.cwd();
+const COCKPIT = `${ROOT}/cockpit`;
+
+const caps = [];
+function walk(d) {
+  for (const n of readdirSync(d)) {
+    if (n === 'node_modules' || n.startsWith('.')) continue;
+    const f = `${d}/${n}`;
+    if (n === 'angular') {
+      const pj = `${f}/project.json`;
+      if (!existsSync(pj)) continue;
+      const meta = JSON.parse(readFileSync(pj, 'utf8'));
+      if (typeof meta.name !== 'string' || !meta.name.endsWith('-angular')) continue;
+      if (meta.name === 'cockpit-ag-ui-streaming-angular') continue;
+      const setup = `${f}/e2e/global-setup-impl.ts`;
+      const pwCfg = `${f}/e2e/playwright.config.ts`;
+      if (existsSync(setup) && existsSync(pwCfg)) caps.push({ name: meta.name, dir: f });
+      continue;
+    }
+    let stat; try { stat = readFileSync(`${f}/project.json`); } catch { walk(f); continue; }
+    walk(f);
+  }
+}
+walk(COCKPIT);
+
+// Relative import from <cap>/angular/e2e/ to cockpit/ports.mjs:
+// e2e is 5 deep (cockpit/<topic>/<cap>/angular/e2e/), so 5 ups.
+const REL_IMPORT = '../../../../../cockpit/ports.mjs';
+
+for (const cap of caps) {
+  // global-setup-impl.ts: insert import + portsFor() lookup; replace literal port lines.
+  const setupPath = `${cap.dir}/e2e/global-setup-impl.ts`;
+  let setup = readFileSync(setupPath, 'utf8');
+  if (!setup.includes('cockpit/ports.mjs')) {
+    const importLine = `import { portsFor } from '${REL_IMPORT}';`;
+    // Insert the import after the first existing import line.
+    setup = setup.replace(
+      /(^import [^\n]+;\n)/,
+      `$1${importLine}\n`,
+    );
+    // Insert `const ports = portsFor(...)` immediately before the default export.
+    setup = setup.replace(
+      /(export default createGlobalSetup\(\{)/,
+      `const ports = portsFor('${cap.name}');\n\n$1`,
+    );
+    // Replace the two literal port lines with registry references.
+    setup = setup.replace(/langgraphPort:\s*\d+,/, 'langgraphPort: ports.langgraph,');
+    setup = setup.replace(/angularPort:\s*\d+,/, 'angularPort: ports.angular,');
+    writeFileSync(setupPath, setup);
+  }
+
+  // playwright.config.ts: replace baseURL literal port.
+  const pwCfgPath = `${cap.dir}/e2e/playwright.config.ts`;
+  let pwCfg = readFileSync(pwCfgPath, 'utf8');
+  if (!pwCfg.includes('cockpit/ports.mjs')) {
+    const importLine = `import { portsFor } from '${REL_IMPORT}';`;
+    pwCfg = pwCfg.replace(
+      /(^import [^\n]+;\n)/,
+      `$1${importLine}\n`,
+    );
+    // Insert const decl near the top of the config (after imports).
+    pwCfg = pwCfg.replace(
+      /(\nexport default )/,
+      `\nconst { angular: angularPort } = portsFor('${cap.name}');\n\n$1`,
+    );
+    // Replace literal baseURL port.
+    pwCfg = pwCfg.replace(
+      /baseURL:\s*[`'"]http:\/\/localhost:\d+[`'"/]/,
+      'baseURL: `http://localhost:${angularPort}`',
+    );
+    writeFileSync(pwCfgPath, pwCfg);
+  }
+
+  console.log(`OK ${cap.name}`);
+}
+console.log(`Total: ${caps.length} caps swept`);
+```
+
+Run: `node /tmp/sweep-e2e.mjs`
+
+Expected: "OK <name>" for 24 caps.
+
+- [ ] **Step 2: Spot-check the result**
+
+```bash
+head -20 cockpit/chat/messages/angular/e2e/global-setup-impl.ts
+head -20 cockpit/chat/messages/angular/e2e/playwright.config.ts
+```
+
+Expected:
+- `global-setup-impl.ts` starts with the original imports plus `import { portsFor } from '...';`, has a `const ports = portsFor('cockpit-chat-messages-angular');` line, and the two `*Port:` keys reference `ports.angular` / `ports.langgraph`.
+- `playwright.config.ts` has the new import + `const { angular: angularPort } = portsFor('...');`, and `baseURL: \`http://localhost:${angularPort}\``.
+
+If any cap looks broken, manually fix it; the sweep is best-effort textual.
+
+- [ ] **Step 3: TypeScript compile sanity-check**
+
+Run one cap's e2e tsconfig:
+```bash
+cd cockpit/chat/messages/angular/e2e && npx tsc --noEmit && cd $OLDPWD
+```
+
+Expected: clean. If `portsFor` returns `unknown` or there's a path resolution error, the tsconfig's `paths`/`baseUrl` may need an additional entry. Check what alias `@ngaf-internal/e2e-harness` resolves to (from PR #515) and follow the same pattern.
+
+- [ ] **Step 4: Run the verifier**
+
+Run: `node --test scripts/cockpit-ports.spec.mjs`
+
+Expected: all tests still pass. The "playwright baseURL" verifier regex matches the templated form too because the regex only kicks in when the baseURL is a literal localhost URL; templates use `${angularPort}` and are skipped (no false positives).
+
+Wait — the verifier regex IS `match(/baseURL:\s*[`'"]http:\/\/localhost:(\d+)[`'"/]/)`. With the new templated form `baseURL: \`http://localhost:${angularPort}\``, the regex won't match (no digit between `:` and the closing backtick). The test then skips the cap. **The test no longer verifies post-sweep playwright config**, but that's fine: the value is now imported from the registry directly, so drift is impossible.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add cockpit/
+git commit -m "refactor(cockpit): 24 e2e configs import ports from registry
+
+Each cap's e2e/global-setup-impl.ts now imports portsFor() and reads
+angular/langgraph ports from the registry instead of literal numbers.
+playwright.config.ts is updated similarly for baseURL.
+
+The verifier's playwright-baseURL check now skips templated configs
+(its regex only matches literal URLs); drift is impossible because
+the value imports directly from the registry."
+```
+
+---
+
+### Task 5: Wire spec into ci.yml
+
+**Files:**
+- Modify: `.github/workflows/ci.yml`
+
+- [ ] **Step 1: Find the existing test line**
+
+Run: `grep -n "ci-scope.spec.mjs" .github/workflows/ci.yml`
+
+Expected: one match, currently reading:
+```yaml
+      - name: Test CI scope classifier
+        run: node --test scripts/ci-scope.spec.mjs scripts/cockpit-matrix.spec.mjs
+```
+
+- [ ] **Step 2: Append the new spec**
+
+Edit that line to:
+```yaml
+      - name: Test CI scope classifier
+        run: node --test scripts/ci-scope.spec.mjs scripts/cockpit-matrix.spec.mjs scripts/cockpit-ports.spec.mjs
+```
+
+- [ ] **Step 3: YAML lint**
+
+Run: `python3 -c "import yaml; yaml.safe_load(open('.github/workflows/ci.yml'))"`
+
+Expected: no output, exit 0.
+
+- [ ] **Step 4: Run the combined test suite locally**
+
+Run: `node --test scripts/ci-scope.spec.mjs scripts/cockpit-matrix.spec.mjs scripts/cockpit-ports.spec.mjs`
+
+Expected: all tests across all three files pass (15 ci-scope + 7 cockpit-matrix + 7 cockpit-ports = 29 tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add .github/workflows/ci.yml
+git commit -m "ci: gate cockpit-ports.spec.mjs in ci-scope test job
+
+Appends the new verifier spec to the existing node --test invocation
+so registry drift is caught at PR time."
+```
+
+---
+
+### Task 6: Push, open PR, monitor first CI run
+
+**Files:** none modified.
+
+- [ ] **Step 1: Push branch**
+
+```bash
+git push -u origin claude/cockpit-ports
+```
+
+- [ ] **Step 2: Open PR**
+
+```bash
+gh pr create --title "feat(cockpit): centralize port allocation behind cockpit/ports.mjs registry" --body "$(cat <<'EOF'
+## Summary
+
+Centralizes cockpit cap port allocation. 31 LangGraph caps now import ports from \`cockpit/ports.mjs\`; the 4-place per-cap edit reduces to 1 line in the registry (+ literal verification on PR).
+
+### Touched
+- **NEW** \`cockpit/ports.mjs\` — registry (31 entries, ag-ui excluded by design)
+- **NEW** \`scripts/cockpit-ports.spec.mjs\` — verifier (7 tests, wired into ci-scope job)
+- **REFACTOR** 31 × \`cockpit/<x>/<y>/angular/proxy.conf.json\` → \`proxy.conf.mjs\` (imports registry)
+- **MODIFY** 31 × \`cockpit/<x>/<y>/angular/project.json\` — \`proxyConfig\` extension \`.json → .mjs\`
+- **MODIFY** 24 × \`cockpit/<x>/<y>/angular/e2e/global-setup-impl.ts\` — import registry
+- **MODIFY** 24 × \`cockpit/<x>/<y>/angular/e2e/playwright.config.ts\` — \`baseURL\` from registry
+- **UNCHANGED** 31 × \`cockpit/<x>/<y>/python/project.json\` — literal \`--port\`, verified
+
+### Excluded
+\`cockpit/ag-ui/streaming\` — non-LangGraph backend (Node ag-ui on :3000 with /agent path). Kept as literals; one-line allowlist in the verifier.
+
+## Test plan
+
+- [x] 7/7 cockpit-ports spec tests pass locally
+- [x] Combined \`node --test\` of all 3 specs (29 tests) green
+- [x] One cap dev server smoke (proxy.conf.mjs loads)
+- [ ] CI: all 24 cockpit-e2e shards green
+- [ ] CI: ci-scope job runs the new spec
+
+Spec: \`docs/superpowers/specs/2026-05-27-cockpit-port-registry-design.md\`
+Plan: \`docs/superpowers/plans/2026-05-27-cockpit-port-registry.md\`
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+EOF
+)"
+```
+
+- [ ] **Step 3: Monitor**
+
+```bash
+gh pr checks $(gh pr view --json number --jq .number)
+```
+
+Expected: 24 cockpit-e2e shards + summary green. If any cap fails to boot, suspect:
+- proxy.conf.mjs path resolution: the cap's `project.json` `proxyConfig` field still points at `.json` (sweep missed it)
+- portsFor() throws because registry name doesn't match: typo in PORTS key or in the cap's project.json `name`
+- ESM resolution: Node version too old (workflow uses Node 22, fine)
+
+- [ ] **Step 4: Hand off to user**
+
+Plan ends here. User decides when to admin-merge.
+
+---
+
+## Verification checklist (entire plan)
+
+After all tasks:
+
+- ✅ `cockpit/ports.mjs` exports `PORTS` (31 entries, frozen) + `portsFor(name)`
+- ✅ `cockpit/ag-ui/streaming-angular` NOT in `PORTS`; its files unchanged
+- ✅ Every cap's `proxy.conf.mjs` imports + templates langgraph port
+- ✅ Every cap's `angular/project.json` `proxyConfig` ends in `.mjs`
+- ✅ 24 × `global-setup-impl.ts` import registry; no literal port digits remain
+- ✅ 24 × `playwright.config.ts` baseURL uses `${angularPort}` template
+- ✅ All `python/project.json` `--port` literals match registry
+- ✅ `scripts/cockpit-ports.spec.mjs` gates PRs via ci-scope job
+- ✅ All 24 cockpit-e2e shards green on the PR
+
+If any item is unchecked, return to the task that owns it before requesting review.
diff --git a/docs/superpowers/specs/2026-05-25-hitl-refund-cockpit-blog-design.md b/docs/superpowers/specs/2026-05-25-hitl-refund-cockpit-blog-design.md
new file mode 100644
index 000000000..3066b653a
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-25-hitl-refund-cockpit-blog-design.md
@@ -0,0 +1,242 @@
+# Human-in-the-Loop Refund Cockpit + Aligned Blog Post
+
+**Status:** Design approved · ready for implementation plan
+**Owner:** Brian Love
+**Date:** 2026-05-25
+
+## Goal
+
+Use the third blog post (Human-in-the-Loop LangGraph Agents in Angular) as a forcing function to tighten the HITL pattern in ThreadPlane. By the end of this work:
+
+- The cockpit `interrupts` example is a refund-authorization agent with a structured interrupt payload and three semantically distinct approval actions.
+- The chat + langgraph libraries support arbitrary structured values flowing through `agent.submit({ resume })`, not just booleans.
+- The blog post teaches the exact pattern a reader can clone-and-run, with screenshots captured from the verified cockpit example.
+
+## Why this matters
+
+The current cockpit `interrupts` example documents a pattern, but its three buttons (Approve / Edit / Cancel) all do the same thing. The file explicitly admits this: *"Each branch intentionally does the same thing in this demo."* That's a meaningful gap — the published API can't actually distinguish action types, because `resume` is a boolean and there's no path for structured data to flow back to LangGraph's `Command(resume=…)`.
+
+Writing the blog against an honest cockpit example forces us to fix the gap. Readers get code that runs verbatim. Brian gets a tight feedback loop on the HITL primitive he's promoting.
+
+## Four pieces, in order
+
+Piece 1 has three sub-pieces (1A, 1B, 1C) that ship together in one PR — they touch the same library tree and share the new button vocabulary.
+
+### Piece 1A — Library: structured `resume` values
+
+Smallest reusable surface; ships independently of the cockpit/blog work.
+
+**Adapter (`libs/langgraph/...`).**
+- The type is already permissive (`resume?: unknown` in `LangGraphSubmitOptions`), and the adapter already forwards the value verbatim into LangGraph's `Command(resume=value)`. No type changes needed.
+- The "work" here is adding an explicit unit test that demonstrates a structured object flowing through end-to-end. Locks in the behavior the cockpit refund rewrite depends on.
+
+**Chat composition (`libs/chat/.../compositions/chat-interrupt-panel`).**
+- `(action)` continues to emit the existing enum string — no behavioral change. Structured payloads aren't needed in v1 (Edit handles its own form via body slot in `ChatApprovalCard`).
+
+**Tests.**
+- `libs/langgraph` unit test: `submit({ resume: { approved: true, amount: 47.5 } })` forwards the object intact to the run endpoint.
+- No new chat lib tests for this sub-piece; the existing `chat-interrupt-panel.spec.ts` covers the unchanged behavior.
+
+### Piece 1B — Library: `ChatApprovalCard` composition
+
+New panel-style composition purpose-built for structured approval flows. Coexists with `ChatInterruptPanel`; neither deprecates the other.
+
+**File layout.**
+- `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.ts`
+- `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts`
+- Exported from `libs/chat/src/index.ts`.
+
+**Public API.**
+
+```html
+<chat-approval-card
+  [agent]="agent"
+  [matchKind]="'refund_approval'"
+  [title]="'Refund approval required'"
+  [showEdit]="true"
+  (action)="onAction($event)"
+>
+  <ng-template #body let-payload>
+    Refund <strong>{{ payload.amount | currency }}</strong>
+    to <code>{{ payload.customer_id }}</code>?
+    <p>{{ payload.reason }}</p>
+  </ng-template>
+</chat-approval-card>
+```
+
+- `[agent]` — required. Reads `agent.interrupt()`.
+- `[matchKind]` — optional. When set, only renders if `interrupt.value.kind === matchKind`. Lets callers register multiple cards on one agent.
+- `[title]` — optional. Defaults to `"Approval required"`.
+- `[showEdit]` — optional boolean. Defaults to `false`. Controls whether the Edit button appears.
+- `(action)` — emits `{ action: 'approve' | 'edit' | 'cancel' }`. No payload. Edit semantics are the caller's (body template reveals a custom editor; saving emits a direct `agent.submit(...)` from the caller).
+- `<ng-template #body let-payload>` — content child template ref. Composition reads it via `contentChild('body', { read: TemplateRef })`.
+
+**Visual treatment — native `<dialog>` modal.**
+- Uses native HTML `<dialog>` element with `dialog.showModal()` on the interrupt becoming present. Closes via `dialog.close()` after action emit. Top-layer rendering, focus trap, Escape support all free from the platform.
+- Width 440px. Centered. Box-shadow `0 20px 50px rgba(0,0,0,0.18)`.
+- Surface: `--ngaf-chat-surface` (`#ffffff` light / `rgb(28,28,28)` dark) — the existing chat token prefix; system-wide rename to `--threadplane-chat-*` is a separate refactor out of this scope.
+- Header: 14px padding, amber warning SVG icon (`--ngaf-chat-warning-text`) + bold title 14px. Bottom 1px separator (`--ngaf-chat-separator`).
+- Body: 14–16px padding. Projected `<ng-template #body>` content.
+- Actions row: 8–14px padding, right-aligned, 6px gap.
+  - **Cancel** (text-only, left of the row) → emits `{ action: 'cancel' }`.
+  - **Edit** (secondary outlined, middle, only when `[showEdit]=true`) → emits `{ action: 'edit' }`.
+  - **Approve** (primary dark filled, right) → emits `{ action: 'approve' }`.
+- Escape key → treated as Cancel (emit + close).
+- Backdrop click → does **not** close. Deliberate: the user must use a button to make the decision.
+- Action button styling matches the refreshed `ChatInterruptPanel` (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-text`) so both compositions share visual vocabulary. Button styles live inline in each component's `styles:` block (no shared util file yet).
+
+**Tests.**
+- Renders body template with payload bound.
+- Emits the right action enum on click.
+- Respects `matchKind` (renders nothing when interrupt kind ≠ matchKind).
+- Hides Edit button when `showEdit=false`.
+- Calls `dialog.showModal()` when interrupt becomes present, `dialog.close()` after action.
+- Escape key emits `{ action: 'cancel' }`.
+
+### Piece 1C — Library: `ChatInterruptPanel` visual refresh
+
+Keep current layout and API. Refresh the visual vocabulary to match the new approval-card idiom.
+
+**Changes.**
+- Drop the `border-left: 3px solid var(--*-chat-warning-text)` thick amber border.
+- Replace the large triangle warning SVG in the header with a small amber dot (6px circle) inside an uppercase mono eyebrow row: `<span class="dot"></span> Agent paused — review needed`.
+- Body text uses `--threadplane-chat-text` (not muted) — the body content is the message, not a caption.
+- Action buttons use the same `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-text` styles as `ChatApprovalCard`. Same button vocabulary across both compositions.
+- Keep using `--ngaf-chat-*` tokens for now; system-wide rename is out of scope.
+
+**No behavioral change.** Same inputs, same `(action)` output enum, same DOM placement (caller still renders it where it sits today).
+
+### Piece 2 — Cockpit `interrupts` example → refund agent
+
+Modifies the existing `cockpit/langgraph/interrupts/` example in place. No new directory.
+
+**Python graph (`python/src/graph.py`).**
+
+Restructure as a three-node graph:
+1. `draft_refund` — reads the conversation, asks the LLM to extract `customer_id`, `amount`, `reason`. Writes them to state.
+2. `request_approval` — calls `interrupt({ kind: 'refund_approval', amount, customer_id, reason })`. The resume value is `{ approved: bool, amount?: number }`. Writes the resume result to state.
+3. `issue_refund` — runs only when `state['decision']['approved']` is true. Uses the (possibly edited) amount. Logs a fake `refund_id`.
+
+The graph edges go `draft → request_approval → issue` with an early-exit from `request_approval` to `END` when `approved=false`.
+
+**System prompt (`python/prompts/interrupts.md`).**
+
+Rewrite as a refund-authorization assistant prompt. Short, plain, signal-native voice consistent with other cockpit prompts.
+
+**Angular component (`angular/src/app/interrupts.component.ts`).**
+- Update welcome suggestions to refund-flavored prompts (e.g., "Refund $47.50 to customer cus_123 for a duplicate charge").
+- Wire `(action)` from `chat-interrupt-panel` to a handler that maps each action to a structured resume payload:
+  - `approve` → `agent.submit({ resume: { approved: true } })`
+  - `edit` (with `payload.amount` from the inline edit) → `agent.submit({ resume: { approved: true, amount: payload.amount } })`
+  - `cancel` → `agent.submit({ resume: { approved: false } })`
+
+**Approval card (`angular/src/app/views/approval-card.component.ts`).**
+- Reads structured payload fields from the interrupt: `amount`, `customer_id`, `reason`.
+- Renders them in a refund-receipt-style card.
+- Edit button toggles an inline `<input type="number">` for the amount. Submit-from-edit emits `{ action: 'edit', payload: { amount: newAmount } }`.
+- Cancel and Approve emit `{ action: 'cancel' }` and `{ action: 'approve' }` (no payload).
+- Migrates the still-existing `--ngaf-chat-*` CSS custom property references to `--threadplane-chat-*` (the post-rename names). Not the central goal of this work, but it's a worktree-local nit caught on the way.
+
+**E2E (`angular/e2e/interrupts.spec.ts`).**
+
+Extend with three new assertions:
+1. Approval card displays `amount`, `customer_id`, `reason` from the structured payload.
+2. Approve path: card → Approve → `issue_refund` ran → final message mentions refund issued.
+3. Cancel path: card → Cancel → `issue_refund` did NOT run → final message confirms cancellation.
+
+Edit path is exercised manually (Piece 3); not in automated e2e because of the inline form.
+
+### Piece 3 — Manual review checkpoint
+
+Before writing any blog prose, validate the cockpit example in a real browser. Loops back to Piece 1 or 2 if anything looks off.
+
+**Setup.**
+- I bring up `cockpit-langgraph-interrupts-angular` on a local port (`nx serve cockpit-langgraph-interrupts-angular`).
+- I bring up the LangGraph backend on its dev port.
+- I create a Chrome MCP tab (or reuse Brian's existing tab) pointed at the cockpit URL.
+
+**Walkthrough.**
+- Brian types a refund prompt in the cockpit chat.
+- We watch the agent draft the refund, then the approval card render with structured fields.
+- Brian clicks **Edit**, adjusts the amount, submits — we observe the graph branch on the edited amount.
+- Reset thread; Brian clicks **Approve** on a fresh refund — observe the approve branch.
+- Reset thread; Brian clicks **Cancel** — observe the rejection branch and the "no refund issued" message.
+
+**Screenshots.**
+- Three frames captured from the same Chrome session (kept ≤ 1024px wide to dodge the >2000px corruption issue we hit earlier):
+  1. Agent mid-draft, no card yet.
+  2. Approval card visible with full structured payload.
+  3. Post-approval confirmation in the chat.
+- Saved to `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/{1,2,3}.png`.
+
+**Sign-off.**
+- Brian explicitly approves the UI and screenshots before Piece 4 starts.
+- If anything looks off, loop back to Piece 1/2 with a concrete fix.
+
+### Piece 4 — Blog post rewrite
+
+Replaces the draft committed in PR #550. Same title, same SEO target, same voice doc compliance.
+
+**Content changes from the v1 draft:**
+- Code blocks copied verbatim from the verified cockpit `graph.py`, `interrupts.component.ts`, `approval-card.component.ts`. No invented APIs.
+- The 10-step "under the hood" trace updated to match the actual runtime sequence (including the new structured-resume value path).
+- Three screenshots embedded as `<figure>` elements (which inherit the screenshot-frame design shipped earlier).
+- Production patterns section keeps idempotency / audit trail / when-NOT-to-interrupt, but grounded in actual cockpit code instead of handwaving.
+- Closing forward-links to the next post (durable threads).
+
+**Reused from the v1 draft:**
+- Title, SEO description, frontmatter.
+- The Stripe-anecdote opener.
+- "Why interrupts matter" philosophical section.
+- `## Goals` block with `Have fun!` last bullet.
+- The voice tells: "freakin' cool 💚," "(haha)," "For me," `## Conclusion`.
+
+## Out of scope (explicit non-goals)
+
+- A "fake Stripe" actual refund integration (the `issue_refund` node logs a fake `refund_id`; no external call).
+- Multi-turn / chained approvals (one interrupt per run).
+- Inline message editing beyond the amount field (no "edit the assistant's whole response").
+- Persistent thread storage beyond LangGraph's checkpointer (durable threads is post #4).
+- A pre-built "approval card" composition in the chat library (the cockpit's component stays scenario-specific).
+- API renames or breaking changes to `agent.submit`. Backward compatible only.
+
+## Definition of done
+
+- Library tests green; no breaking changes to existing callers.
+- Cockpit `interrupts` e2e green; three new assertions added.
+- Manual walkthrough completed; Brian signs off on UI + screenshots.
+- Three screenshots committed under `apps/website/public/blog/.../{1,2,3}.png`.
+- Blog post `2026-05-25-human-in-the-loop-langgraph-agents-in-angular.mdx` updated; renders at `/blog/...` locally; three `<figure>` elements visible.
+- PR #550 (the v1 draft) updated with the rewritten content OR replaced with a fresh PR depending on diff readability.
+
+## Files touched
+
+**Library (Pieces 1A / 1B / 1C):**
+- `libs/langgraph/src/.../*.ts` — adapter type loosening + tests *(1A)*
+- `libs/chat/src/lib/primitives/chat-interrupt/*.ts` — `submitResume` helper + tests *(1A)*
+- `libs/chat/src/lib/compositions/chat-interrupt-panel/*.ts` — typed action output + visual refresh + token migration + tests *(1A + 1C)*
+- `libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.ts` — new dialog composition + tests *(1B)*
+- `libs/chat/src/index.ts` — export `ChatApprovalCardComponent` *(1B)*
+
+**Cockpit (Piece 2):**
+- `cockpit/langgraph/interrupts/python/src/graph.py`
+- `cockpit/langgraph/interrupts/python/prompts/interrupts.md`
+- `cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts`
+- `cockpit/langgraph/interrupts/angular/src/app/views/approval-card.component.ts`
+- `cockpit/langgraph/interrupts/angular/e2e/interrupts.spec.ts`
+
+**Blog (Piece 4):**
+- `apps/website/content/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular.mdx` (rewrite)
+- `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/1.png`
+- `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/2.png`
+- `apps/website/public/blog/2026-05-25-human-in-the-loop-langgraph-agents-in-angular/3.png`
+
+## PR strategy
+
+Three PRs, in order:
+
+1. **`libs(chat,langgraph): structured resume + ChatApprovalCard dialog composition`** — Pieces 1A + 1B + 1C bundled. They touch the same library tree and share the new shared button vocabulary; splitting them creates churn without payoff. Mergeable independently of cockpit/blog.
+2. **`feat(cockpit): refund-authorization interrupts example`** — Piece 2. Depends on PR #1. **Auto-merge strictly disabled.** Stays in draft state until the Piece 3 manual review completes and Brian explicitly approves.
+3. **`docs(blog): rewrite HITL post against verified cockpit example`** — Piece 4. Depends on PR #2 merging. Replaces the PR #550 draft (we close #550 and open this fresh, since the content is a complete rewrite).
+
+Each PR small, each independently reviewable. The strict-gate on PR #2 enforces the forcing-function loop — no merge until the dialog UX has been seen running in a real browser.
diff --git a/docs/superpowers/specs/2026-05-27-cockpit-port-registry-design.md b/docs/superpowers/specs/2026-05-27-cockpit-port-registry-design.md
new file mode 100644
index 000000000..60c92bcb7
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-27-cockpit-port-registry-design.md
@@ -0,0 +1,203 @@
+# Cockpit port registry — design
+
+**Status:** Approved
+**Date:** 2026-05-27
+**Goal:** Single source of truth for cockpit cap port allocation. A new cap currently requires updating 4 separate files (`angular/proxy.conf.json`, `angular/e2e/global-setup-impl.ts`, `python/project.json`, `angular/project.json`). This centralizes the angular + e2e references behind an importable registry and adds a CI verifier that asserts the literal `project.json` values match.
+
+## Why now
+
+The audit found port allocation lives in 4 disconnected sites per cap with no drift detection. The convention `angular_port + 1000 = langgraph_port` actually holds across the 31 LangGraph caps, but nothing enforces it — and a new cap requires hunting for the right places to edit.
+
+## Approach
+
+Three of the 4 sites can reference a shared TS/ESM module at runtime:
+- `proxy.conf.mjs` (replaces `proxy.conf.json`) — Angular dev-server natively loads .mjs proxy configs
+- `e2e/global-setup-impl.ts` — already TS, can import directly
+
+The remaining 2 sites are static JSON:
+- `python/project.json` — `nx:run-commands` executor needs a literal command string
+- `angular/project.json` — Angular serve target needs literal `serve.options.port`
+
+For these, keep the literals and add a CI verifier that asserts they match the registry. New caps follow the same convention; the verifier catches mistakes at PR time.
+
+## Architecture
+
+```
+cockpit/ports.mjs (NEW — single source of truth, 31 caps)
+   │
+   ├── imported by 31 × cockpit/<x>/<y>/angular/proxy.conf.mjs (NEW; replaces .json)
+   ├── imported by 24 × cockpit/<x>/<y>/angular/e2e/global-setup-impl.ts (MODIFIED)
+   │
+   └── verified-against:
+       — 31 × cockpit/<x>/<y>/python/project.json `--port <N>` literal
+       — 31 × cockpit/<x>/<y>/angular/project.json `serve.options.port` literal
+       via scripts/cockpit-ports.spec.mjs (NEW)
+```
+
+**Exclusion:** `cockpit/ag-ui/streaming` is NOT in the registry. It uses a non-LangGraph backend (Node ag-ui server on port 3000) with a `/agent` proxy path rather than `/api`. Single-cap exception; not worth generalizing.
+
+## Components
+
+### 1. `cockpit/ports.mjs` (NEW)
+
+```js
+// SPDX-License-Identifier: MIT
+
+/**
+ * @typedef {{ angular: number; langgraph: number }} CapPorts
+ * @typedef {Record<string, CapPorts>} PortsRegistry
+ */
+
+/**
+ * Single source of truth for cockpit cap port allocation.
+ *
+ * Excludes cockpit-ag-ui-streaming-angular — uses a non-LangGraph
+ * backend (Node ag-ui server on :3000, /agent proxy). Single-cap
+ * exception; left as a literal in its own files.
+ *
+ * Port ranges:
+ *   - angular: [4000, 5000)
+ *   - langgraph: [5000, 6000)
+ *   - Convention: langgraph = angular + 1000
+ *
+ * The CI verifier (scripts/cockpit-ports.spec.mjs) asserts this
+ * registry matches the literal --port values in each cap's
+ * python/project.json + angular/project.json.
+ *
+ * @type {PortsRegistry}
+ */
+export const PORTS = Object.freeze({
+  // 31 entries here, alphabetical by cap name
+});
+
+/**
+ * Look up ports for a cap by its Nx angular project name.
+ * Throws if the name isn't in the registry — caller crash for
+ * fast diagnosis.
+ *
+ * @param {string} cap
+ * @returns {CapPorts}
+ */
+export function portsFor(cap) {
+  const p = PORTS[cap];
+  if (!p) throw new Error(`No port allocation for ${cap}`);
+  return p;
+}
+```
+
+### 2. `cockpit/<x>/<y>/angular/proxy.conf.mjs` (NEW, replaces `.json`, ×31)
+
+Each cap's proxy config becomes:
+
+```js
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+
+const { langgraph } = portsFor('cockpit-chat-messages-angular');
+
+export default {
+  '/api': {
+    target: `http://localhost:${langgraph}`,
+    secure: false,
+    changeOrigin: true,
+  },
+};
+```
+
+The cap's `angular/project.json` `serve.proxyConfig` field is updated from `proxy.conf.json` → `proxy.conf.mjs`. Both file extensions are valid for Angular's dev-server.
+
+### 3. `cockpit/<x>/<y>/angular/e2e/global-setup-impl.ts` (MODIFIED, ×24 active e2e caps only)
+
+Each global-setup-impl.ts replaces literal port values with imports:
+
+```ts
+import { resolve } from 'node:path';
+import { createGlobalSetup } from '@ngaf-internal/e2e-harness';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const ports = portsFor('cockpit-chat-messages-angular');
+
+export default createGlobalSetup({
+  langgraphCwd: 'cockpit/chat/messages/python',
+  langgraphPort: ports.langgraph,
+  angularProject: 'cockpit-chat-messages-angular',
+  angularPort: ports.angular,
+  fixturesDir: resolve(__dirname, 'fixtures'),
+});
+```
+
+The 7 caps without e2e (6 render + c-debug) are NOT touched here — they have no `e2e/global-setup-impl.ts`.
+
+### 4. `cockpit/<x>/<y>/python/project.json` + `cockpit/<x>/<y>/angular/project.json` (UNCHANGED literals, ×31 each)
+
+Keep `--port 5501` and `"port": 4501` as literals. Static JSON can't import from .mjs without restructuring the Nx executor schema (out of scope per the brainstorm constraints).
+
+### 5. `scripts/cockpit-ports.spec.mjs` (NEW)
+
+`node:test` + `node:assert/strict` suite. 6 tests:
+
+1. **Registry covers all on-disk LangGraph caps** — walk all `cockpit/<x>/<y>/angular/project.json` files; for each project name except `cockpit-ag-ui-streaming-angular`, assert it appears as a key in `PORTS`.
+2. **No orphan registry entries** — every key in `PORTS` has a matching `cockpit/<x>/<y>/angular/project.json` on disk.
+3. **python `--port <N>` matches `PORTS[name].langgraph`** — for each registry entry, find the cap's python sibling, parse its `serve.options.command` field with regex `--port[ =](\d+)`, assert match.
+4. **angular `serve.options.port` matches `PORTS[name].angular`** — parse each cap's `angular/project.json`, assert `targets.serve.options.port === PORTS[name].angular`.
+5. **No duplicate ports** — each `angular` and `langgraph` value appears once across all entries.
+6. **Port ranges sane** — angular ∈ [4000, 5000), langgraph ∈ [5000, 6000), langgraph === angular + 1000.
+
+### 6. `.github/workflows/ci.yml` (MODIFIED, 1-line change)
+
+The existing `ci-scope` job already runs:
+
+```yaml
+- name: Test CI scope classifier
+  run: node --test scripts/ci-scope.spec.mjs scripts/cockpit-matrix.spec.mjs
+```
+
+Append the new spec:
+
+```yaml
+- name: Test CI scope classifier
+  run: node --test scripts/ci-scope.spec.mjs scripts/cockpit-matrix.spec.mjs scripts/cockpit-ports.spec.mjs
+```
+
+## Data flow per scenario
+
+| Trigger | What happens |
+|---|---|
+| `nx serve <cap>-angular` | Angular dev-server loads `proxy.conf.mjs` → imports `portsFor(cap)` → returns config with target port. Angular binds on the literal port from its own `project.json`. |
+| `nx serve <cap>-python` | `nx:run-commands` invokes the literal `uv run langgraph dev --port <N>`. No registry read at runtime. Verifier ensures N matches the registry. |
+| `nx e2e <cap>-angular` | Playwright loads `e2e/global-setup-impl.ts` → imports `portsFor(cap)` → passes to `createGlobalSetup`. e2e-harness spawns Angular + LangGraph on those ports. |
+| New cap added | 1 line in `cockpit/ports.mjs`, scaffold the 4 files (proxy.conf.mjs + global-setup-impl.ts import by name; project.jsons get literals matching the registry). Verifier asserts on PR. |
+| Existing port reassigned | Edit the registry. Edit 2 literal project.json values. Run `node --test scripts/cockpit-ports.spec.mjs` locally; CI also asserts. |
+
+## Error handling
+
+- `portsFor('<unknown>')` throws — fast crash for diagnosis.
+- Verifier fails CI with specific mismatched cap + expected vs actual port.
+- Registry is `Object.freeze`'d to prevent accidental mutation by importers.
+
+## Out of scope
+
+- Generator script for new caps (verifier catches mistakes today; can add scaffolder later).
+- Port range rebalancing — existing assignments preserved verbatim.
+- Runtime port-conflict resolution (e.g. dev machine has 5501 in use).
+- ag-ui migration — excluded by design; one-line allowlist in the verifier.
+- Angular `serve.options.port` being read from the registry — kept literal, verified.
+
+## Risks
+
+- **Angular dev-server `.mjs` support**: well-documented and stable since Angular 17+. Repo uses Angular 22. No risk.
+- **Static analyzers / IDEs**: some tooling may not understand `.mjs` imports across the Nx workspace. Mitigated: project.json target paths use the new `.mjs` extension explicitly.
+- **Drift between the 5th `e2e/global-setup-impl.ts` arg `langgraphCwd` and the python project location**: existing convention `cockpit/<x>/<y>/python`. Not part of this design — out of scope; covered by `cockpit-e2e-wiring.spec.ts` drift-guard.
+
+## Test plan (post-merge validation)
+
+1. `nx serve cockpit-chat-messages-angular` — Angular boots, proxy works against running langgraph.
+2. `nx e2e cockpit-chat-messages-angular` — full e2e runs against same ports as before.
+3. CI green on the migration PR with all 24 cockpit-e2e shards.
+4. Intentionally edit `cockpit/chat/messages/python/project.json` to mismatch the registry — verifier should fail with a clear diagnostic. Revert.
+
+## References
+
+- Audit: `2026-05-25` repo health audit (in-session research, not committed).
+- Existing pattern: `scripts/ci-scope.mjs` (pure classifier + spec test wired into CI).
+- Angular proxy.conf documentation: supports `.json`, `.js`, `.mjs`, `.cjs`.
diff --git a/examples/chat/angular/e2e/stop-streaming.spec.ts b/examples/chat/angular/e2e/stop-streaming.spec.ts
deleted file mode 100644
index f3e0d9d8f..000000000
--- a/examples/chat/angular/e2e/stop-streaming.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// SPDX-License-Identifier: MIT
-import { test, expect } from '@playwright/test';
-import { attachBrowserHygiene, messageInput, openDemo, sendButton } from './test-helpers';
-
-test.skip('stop mid-stream: stop button aborts the run and leaves the partial response', async ({
-  page,
-}) => {
-  await openDemo(page, '/embed');
-  const hygiene = attachBrowserHygiene(page);
-
-  await messageInput(page).fill('stream a long deterministic answer');
-  await sendButton(page).click();
-
-  const stop = page.getByRole('button', { name: 'Stop generating' });
-  await expect(stop).toBeVisible({ timeout: 10_000 });
-  await stop.click();
-
-  await expect(stop).toBeHidden({ timeout: 15_000 });
-  await expect(page.locator('chat-message[data-role="assistant"]').last()).toBeAttached();
-  await expect(messageInput(page)).toBeVisible();
-
-  expect(hygiene.consoleErrors).toEqual([]);
-});
diff --git a/libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts b/libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts
new file mode 100644
index 000000000..a6b3670bb
--- /dev/null
+++ b/libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.spec.ts
@@ -0,0 +1,172 @@
+// SPDX-License-Identifier: MIT
+import { Component, signal } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, it, expect, beforeEach } from 'vitest';
+import { ChatApprovalCardComponent } from './chat-approval-card.component';
+import { mockAgent } from '../../testing/mock-agent';
+import type { AgentInterrupt } from '../../agent/agent-interrupt';
+
+@Component({
+  standalone: true,
+  imports: [ChatApprovalCardComponent],
+  template: `
+    <chat-approval-card
+      [agent]="agent"
+      [matchKind]="matchKind"
+      [showEdit]="showEdit"
+      (action)="lastAction = $event"
+    >
+      <ng-template #body let-payload>
+        <span class="amount">{{ payload.amount }}</span>
+        <span class="customer">{{ payload.customer_id }}</span>
+      </ng-template>
+    </chat-approval-card>
+  `,
+})
+class HostComponent {
+  agent = mockAgent({ withInterrupt: true });
+  matchKind: string | undefined = undefined;
+  showEdit = false;
+  lastAction: string | undefined = undefined;
+}
+
+describe('ChatApprovalCardComponent', () => {
+  let host: HostComponent;
+  let fixture: ReturnType<typeof TestBed.createComponent<HostComponent>>;
+
+  beforeEach(() => {
+    // jsdom doesn't implement HTMLDialogElement.showModal/close.
+    // Stub them so the component's effect can call them under test.
+    if (!HTMLDialogElement.prototype.showModal) {
+      HTMLDialogElement.prototype.showModal = function () {
+        (this as unknown as { open: boolean }).open = true;
+      };
+    }
+    if (!HTMLDialogElement.prototype.close) {
+      HTMLDialogElement.prototype.close = function () {
+        (this as unknown as { open: boolean }).open = false;
+      };
+    }
+    fixture = TestBed.createComponent(HostComponent);
+    host = fixture.componentInstance;
+  });
+
+  it('renders the projected body template with payload bound', () => {
+    const interrupt: AgentInterrupt = {
+      id: 'int-1',
+      value: { kind: 'refund_approval', amount: 47.5, customer_id: 'cus_a8x2k' },
+      resumable: true,
+    };
+    host.agent.interrupt!.set(interrupt);
+    fixture.detectChanges();
+
+    const amount = fixture.nativeElement.querySelector('.amount')?.textContent?.trim();
+    const customer = fixture.nativeElement.querySelector('.customer')?.textContent?.trim();
+    expect(amount).toBe('47.5');
+    expect(customer).toBe('cus_a8x2k');
+  });
+
+  it('renders body when matchKind matches the interrupt kind', () => {
+    host.matchKind = 'refund_approval';
+    host.agent.interrupt!.set({
+      id: 'int-1',
+      value: { kind: 'refund_approval', amount: 47.5, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.amount')?.textContent?.trim()).toBe('47.5');
+  });
+
+  it('renders nothing when matchKind does not match', () => {
+    host.matchKind = 'refund_approval';
+    host.agent.interrupt!.set({
+      id: 'int-2',
+      value: { kind: 'delete_approval', target: 'user_42' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.amount')).toBeNull();
+  });
+
+  it('emits "approve" when the Approve button is clicked', () => {
+    host.agent.interrupt!.set({
+      id: 'int-3',
+      value: { kind: 'refund_approval', amount: 10, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    const approve = fixture.nativeElement.querySelector('.btn-primary') as HTMLButtonElement;
+    approve.click();
+    expect(host.lastAction).toBe('approve');
+  });
+
+  it('emits "cancel" when the Cancel button is clicked', () => {
+    host.agent.interrupt!.set({
+      id: 'int-4',
+      value: { kind: 'refund_approval', amount: 10, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    const cancel = fixture.nativeElement.querySelector('.btn-text') as HTMLButtonElement;
+    cancel.click();
+    expect(host.lastAction).toBe('cancel');
+  });
+
+  it('hides the Edit button when showEdit is false', () => {
+    host.showEdit = false;
+    host.agent.interrupt!.set({
+      id: 'int-5',
+      value: { kind: 'refund_approval', amount: 10, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    const editButtons = fixture.nativeElement.querySelectorAll('button.btn-secondary');
+    expect(editButtons.length).toBe(0);
+  });
+
+  it('shows the Edit button and emits "edit" when showEdit is true', () => {
+    host.showEdit = true;
+    host.agent.interrupt!.set({
+      id: 'int-6',
+      value: { kind: 'refund_approval', amount: 10, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    const edit = fixture.nativeElement.querySelector('.btn-secondary') as HTMLButtonElement;
+    expect(edit).not.toBeNull();
+    edit.click();
+    expect(host.lastAction).toBe('edit');
+  });
+
+  it('opens the dialog when an interrupt becomes present, closes when it goes away', () => {
+    const dialog = fixture.nativeElement.querySelector('dialog.chat-approval-card') as HTMLDialogElement;
+    expect(dialog.open).toBe(false);
+
+    host.agent.interrupt!.set({
+      id: 'int-open',
+      value: { kind: 'refund_approval', amount: 1, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    expect(dialog.open).toBe(true);
+
+    host.agent.interrupt!.set(undefined);
+    fixture.detectChanges();
+    expect(dialog.open).toBe(false);
+  });
+
+  it('emits "cancel" when the native dialog cancel event fires (Escape)', () => {
+    host.agent.interrupt!.set({
+      id: 'int-esc',
+      value: { kind: 'refund_approval', amount: 1, customer_id: 'cus_a' },
+      resumable: true,
+    });
+    fixture.detectChanges();
+    const dialog = fixture.nativeElement.querySelector('dialog.chat-approval-card') as HTMLDialogElement;
+    // Native dialog dispatches 'cancel' on Escape. Simulate it directly.
+    const cancelEvent = new Event('cancel', { cancelable: true });
+    dialog.dispatchEvent(cancelEvent);
+    expect(host.lastAction).toBe('cancel');
+    expect(cancelEvent.defaultPrevented).toBe(true);
+  });
+});
diff --git a/libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.ts b/libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.ts
new file mode 100644
index 000000000..9e3a6027d
--- /dev/null
+++ b/libs/chat/src/lib/compositions/chat-approval-card/chat-approval-card.component.ts
@@ -0,0 +1,176 @@
+// SPDX-License-Identifier: MIT
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  TemplateRef,
+  computed,
+  contentChild,
+  effect,
+  input,
+  output,
+  viewChild,
+} from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import type { Agent } from '../../agent';
+import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens';
+
+export type ChatApprovalAction = 'approve' | 'edit' | 'cancel';
+
+@Component({
+  selector: 'chat-approval-card',
+  standalone: true,
+  imports: [NgTemplateOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [
+    CHAT_HOST_TOKENS,
+    `
+    :host { display: contents; }
+    dialog.chat-approval-card {
+      width: 440px;
+      max-width: calc(100vw - 32px);
+      padding: 0;
+      border: 0;
+      border-radius: 12px;
+      background: var(--ngaf-chat-surface);
+      color: var(--ngaf-chat-text);
+      box-shadow: 0 20px 50px rgba(0,0,0,0.18);
+    }
+    dialog.chat-approval-card::backdrop {
+      background: rgba(0,0,0,0.32);
+    }
+    .chat-approval-card__header {
+      padding: 14px 16px 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border-bottom: 1px solid var(--ngaf-chat-separator);
+    }
+    .chat-approval-card__header h4 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--ngaf-chat-text);
+    }
+    .chat-approval-card__header svg {
+      color: var(--ngaf-chat-warning-text);
+      width: 16px;
+      height: 16px;
+      flex: 0 0 16px;
+    }
+    .chat-approval-card__body {
+      padding: 14px 16px;
+      font-size: var(--ngaf-chat-font-size-sm, 13px);
+      color: var(--ngaf-chat-text);
+    }
+    .chat-approval-card__actions {
+      padding: 8px 16px 14px;
+      display: flex;
+      gap: 6px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .btn {
+      border: 0;
+      padding: 6px 14px;
+      border-radius: 8px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: transform 200ms ease, opacity 200ms ease;
+    }
+    .btn:hover { transform: scale(1.03); }
+    .btn-primary { background: var(--ngaf-chat-primary); color: var(--ngaf-chat-on-primary); }
+    .btn-secondary { background: transparent; color: var(--ngaf-chat-text); border: 1px solid var(--ngaf-chat-separator); }
+    .btn-text {
+      background: transparent;
+      color: var(--ngaf-chat-text-muted);
+      padding: 6px 10px;
+    }
+    .btn-text:hover { color: var(--ngaf-chat-text); }
+    `,
+  ],
+  template: `
+    <dialog #dialogEl class="chat-approval-card" (close)="onDialogClose()" (cancel)="onCancelEvent($event)">
+      <div class="chat-approval-card__header">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        <h4>{{ title() }}</h4>
+      </div>
+      <div class="chat-approval-card__body">
+        @if (bodyTemplate(); as tpl) {
+          @if (payload(); as p) {
+            <ng-container *ngTemplateOutlet="tpl; context: { $implicit: p }"></ng-container>
+          }
+        }
+      </div>
+      <div class="chat-approval-card__actions">
+        <button type="button" class="btn btn-text" (click)="emit('cancel')">Cancel</button>
+        @if (showEdit()) {
+          <button type="button" class="btn btn-secondary" (click)="emit('edit')">Edit</button>
+        }
+        <button type="button" class="btn btn-primary" (click)="emit('approve')">Approve</button>
+      </div>
+    </dialog>
+  `,
+})
+export class ChatApprovalCardComponent {
+  readonly agent = input.required<Agent>();
+  readonly matchKind = input<string | undefined>(undefined);
+  readonly title = input<string>('Approval required');
+  readonly showEdit = input<boolean>(false);
+
+  readonly action = output<ChatApprovalAction>();
+
+  protected readonly bodyTemplate = contentChild<TemplateRef<unknown>>('body');
+  private readonly dialogRef = viewChild<ElementRef<HTMLDialogElement>>('dialogEl');
+
+  private readonly interrupt = computed(() => this.agent().interrupt?.());
+
+  protected readonly payload = computed(() => {
+    const i = this.interrupt();
+    if (!i) return undefined;
+    const v = i.value as { kind?: unknown } | undefined;
+    const want = this.matchKind();
+    if (want !== undefined) {
+      if (!v || typeof v !== 'object' || (v as { kind?: unknown }).kind !== want) {
+        return undefined;
+      }
+    }
+    return v;
+  });
+
+  constructor() {
+    effect(() => {
+      const p = this.payload();
+      const dialog = this.dialogRef()?.nativeElement;
+      if (!dialog) return;
+      if (p && !dialog.open) {
+        dialog.showModal();
+      } else if (!p && dialog.open) {
+        dialog.close();
+      }
+    });
+  }
+
+  protected emit(action: ChatApprovalAction): void {
+    this.action.emit(action);
+    this.closeDialog();
+  }
+
+  protected onCancelEvent(ev: Event): void {
+    // Native dialog's cancel event fires on Escape. Treat as cancel.
+    ev.preventDefault();
+    this.action.emit('cancel');
+    this.closeDialog();
+  }
+
+  private closeDialog(): void {
+    const dialog = this.dialogRef()?.nativeElement;
+    if (!dialog) return;
+    if (dialog.open) dialog.close();
+  }
+
+  protected onDialogClose(): void {
+    // Native close — no-op; emit happens in emit() / onCancelEvent.
+  }
+}
diff --git a/libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts b/libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts
index 5e604e520..5433ba50d 100644
--- a/libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts
+++ b/libs/chat/src/lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component.ts
@@ -48,93 +48,73 @@ export function interruptReasonText(interrupt: AgentInterrupt | undefined): stri
       background: var(--ngaf-chat-surface);
       color: var(--ngaf-chat-text);
       border: 1px solid var(--ngaf-chat-separator);
-      border-left: 3px solid var(--ngaf-chat-warning-text);
       border-radius: var(--ngaf-chat-radius-card);
-      padding: 12px 16px;
+      padding: 14px 16px;
       font-size: var(--ngaf-chat-font-size-sm);
     }
-    .chat-interrupt-panel__title {
-      font-weight: 600;
-      margin: 0 0 4px;
+    .chat-interrupt-panel__eyebrow {
+      font-family: ui-monospace, Menlo, Consolas, monospace;
+      font-size: 10px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      color: var(--ngaf-chat-warning-text);
+      margin: 0 0 8px;
       display: flex;
       align-items: center;
       gap: 6px;
-      color: var(--ngaf-chat-text);
     }
-    .chat-interrupt-panel__title svg {
-      color: var(--ngaf-chat-warning-text);
+    .chat-interrupt-panel__dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: var(--ngaf-chat-warning-text);
+      flex: 0 0 6px;
     }
     .chat-interrupt-panel__body {
       margin: 0 0 12px;
-      color: var(--ngaf-chat-text-muted);
+      color: var(--ngaf-chat-text);
       white-space: pre-wrap;
     }
     .chat-interrupt-panel__actions {
       display: flex;
-      gap: 8px;
+      gap: 6px;
       flex-wrap: wrap;
       align-items: center;
     }
-    .chat-interrupt-panel__btn {
+    .btn {
+      border: 0;
       padding: 6px 14px;
-      font-size: var(--ngaf-chat-font-size-sm);
       border-radius: var(--ngaf-chat-radius-button);
-      border: 0;
-      cursor: pointer;
+      font-size: 12px;
       font-weight: 500;
+      cursor: pointer;
       transition: transform 200ms ease, opacity 200ms ease;
     }
-    .chat-interrupt-panel__btn:hover { transform: scale(1.03); }
-    .chat-interrupt-panel__btn--primary {
-      background: var(--ngaf-chat-primary);
-      color: var(--ngaf-chat-on-primary);
-    }
-    .chat-interrupt-panel__btn--secondary {
-      background: transparent;
-      color: var(--ngaf-chat-text);
-      border: 1px solid var(--ngaf-chat-separator);
-    }
-    .chat-interrupt-panel__btn--tertiary {
+    .btn:hover { transform: scale(1.03); }
+    .btn-primary { background: var(--ngaf-chat-primary); color: var(--ngaf-chat-on-primary); }
+    .btn-secondary { background: transparent; color: var(--ngaf-chat-text); border: 1px solid var(--ngaf-chat-separator); }
+    .btn-text {
       background: transparent;
       color: var(--ngaf-chat-text-muted);
-      padding: 6px 8px;
-      font-size: var(--ngaf-chat-font-size-sm);
-    }
-    .chat-interrupt-panel__btn--tertiary:hover {
-      color: var(--ngaf-chat-text);
+      padding: 6px 10px;
     }
+    .btn-text:hover { color: var(--ngaf-chat-text); }
     `,
   ],
   template: `
     @if (interrupt()) {
       <div role="alert" class="chat-interrupt-panel">
-        <p class="chat-interrupt-panel__title">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
-          Agent paused
+        <p class="chat-interrupt-panel__eyebrow">
+          <span class="chat-interrupt-panel__dot" aria-hidden="true"></span>
+          Agent paused — review needed
         </p>
         <p class="chat-interrupt-panel__body">{{ interruptReason() }}</p>
-
         <div class="chat-interrupt-panel__actions">
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--primary"
-            (click)="action.emit('accept')"
-          >Accept</button>
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--secondary"
-            (click)="action.emit('edit')"
-          >Edit</button>
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--secondary"
-            (click)="action.emit('respond')"
-          >Respond</button>
-          <button
-            type="button"
-            class="chat-interrupt-panel__btn chat-interrupt-panel__btn--tertiary"
-            (click)="action.emit('ignore')"
-          >Ignore</button>
+          <button type="button" class="btn btn-primary" (click)="action.emit('accept')">Accept</button>
+          <button type="button" class="btn btn-secondary" (click)="action.emit('edit')">Edit</button>
+          <button type="button" class="btn btn-secondary" (click)="action.emit('respond')">Respond</button>
+          <button type="button" class="btn btn-text" (click)="action.emit('ignore')">Ignore</button>
         </div>
       </div>
     }
diff --git a/libs/chat/src/public-api.ts b/libs/chat/src/public-api.ts
index 0053d5269..a57acba7b 100644
--- a/libs/chat/src/public-api.ts
+++ b/libs/chat/src/public-api.ts
@@ -95,6 +95,8 @@ export { ChatSidenavScrimComponent } from './lib/primitives/chat-sidenav-scrim/c
 export type { ChatSidenavMode } from './lib/compositions/chat-sidenav/chat-sidenav.component';
 export { ChatInterruptPanelComponent } from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component';
 export type { InterruptAction } from './lib/compositions/chat-interrupt-panel/chat-interrupt-panel.component';
+export { ChatApprovalCardComponent } from './lib/compositions/chat-approval-card/chat-approval-card.component';
+export type { ChatApprovalAction } from './lib/compositions/chat-approval-card/chat-approval-card.component';
 export { ChatToolCallCardComponent } from './lib/compositions/chat-tool-call-card/chat-tool-call-card.component';
 export type { ToolCallInfo } from './lib/compositions/chat-tool-call-card/chat-tool-call-card.component';
 export { ChatSubagentCardComponent, statusColor } from './lib/compositions/chat-subagent-card/chat-subagent-card.component';
diff --git a/libs/langgraph/src/lib/agent.fn.spec.ts b/libs/langgraph/src/lib/agent.fn.spec.ts
index daf8e8fa8..958503d87 100644
--- a/libs/langgraph/src/lib/agent.fn.spec.ts
+++ b/libs/langgraph/src/lib/agent.fn.spec.ts
@@ -259,6 +259,50 @@ describe('agent', () => {
     ]);
   });
 
+  it('forwards a multi-field structured resume payload verbatim', async () => {
+    const seen: Array<{ payload: unknown; options: unknown }> = [];
+    const transport = new MockAgentTransport();
+    transport.stream = async function* (
+      _assistantId: string,
+      _threadId: string | null,
+      payload: unknown,
+      _signal: AbortSignal,
+      options?: unknown,
+    ) {
+      seen.push({ payload, options });
+      yield* [];
+    };
+
+    const ref = withInjectionContext(() =>
+      agent({ apiUrl: '', assistantId: 'a', transport, threadId: 'thread-1', throttle: false })
+    );
+
+    await ref.submit(null, {
+      resume: {
+        approved: true,
+        amount: 47.5,
+        idempotency_key: 'idem_abc123',
+        meta: { reviewer: 'brian', at: '2026-05-25T18:00:00Z' },
+      },
+    });
+
+    expect(seen).toEqual([
+      {
+        payload: null,
+        options: expect.objectContaining({
+          command: {
+            resume: {
+              approved: true,
+              amount: 47.5,
+              idempotency_key: 'idem_abc123',
+              meta: { reviewer: 'brian', at: '2026-05-25T18:00:00Z' },
+            },
+          },
+        }),
+      },
+    ]);
+  });
+
   it('normalizes resume submit input state into a LangGraph command update', async () => {
     const seen: Array<{ payload: unknown; options: unknown }> = [];
     const transport = new MockAgentTransport();
diff --git a/scripts/cockpit-ports.spec.mjs b/scripts/cockpit-ports.spec.mjs
new file mode 100644
index 000000000..61c5bd6b0
--- /dev/null
+++ b/scripts/cockpit-ports.spec.mjs
@@ -0,0 +1,124 @@
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import { readdirSync, readFileSync, existsSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { PORTS } from '../cockpit/ports.mjs';
+
+const repoRoot = resolve(fileURLToPath(import.meta.url), '..', '..');
+const cockpitDir = join(repoRoot, 'cockpit');
+
+const AGUI_EXCEPTION = 'cockpit-ag-ui-streaming-angular';
+
+function findCockpitAngularProjects() {
+  const out = [];
+  function walk(dir) {
+    let entries;
+    try { entries = readdirSync(dir); } catch { return; }
+    for (const name of entries) {
+      const full = join(dir, name);
+      if (name === 'node_modules' || name.startsWith('.')) continue;
+      let stat;
+      try { stat = readFileSync(join(full, 'project.json'), 'utf8'); }
+      catch { walk(full); continue; }
+      try {
+        const meta = JSON.parse(stat);
+        if (typeof meta.name === 'string' && meta.name.endsWith('-angular') && meta.name.startsWith('cockpit-')) {
+          out.push({ name: meta.name, dir: full, meta });
+        }
+      } catch {}
+      walk(full);
+    }
+  }
+  walk(cockpitDir);
+  return out;
+}
+
+const projects = findCockpitAngularProjects();
+
+describe('cockpit/ports.mjs registry', () => {
+  test('covers every cockpit-*-angular project on disk except ag-ui', () => {
+    const onDisk = projects.map((p) => p.name).filter((n) => n !== AGUI_EXCEPTION);
+    const missing = onDisk.filter((n) => !(n in PORTS));
+    assert.deepEqual(missing, [], `missing from PORTS: ${missing.join(', ')}`);
+  });
+
+  test('has no orphan entries (each PORTS key has a project on disk)', () => {
+    const diskNames = new Set(projects.map((p) => p.name));
+    const orphans = Object.keys(PORTS).filter((n) => !diskNames.has(n));
+    assert.deepEqual(orphans, [], `orphan PORTS entries: ${orphans.join(', ')}`);
+  });
+
+  test('ag-ui is NOT in the registry (exception)', () => {
+    assert.equal(AGUI_EXCEPTION in PORTS, false);
+  });
+
+  test('every entry has angular + langgraph as positive integers', () => {
+    for (const [name, p] of Object.entries(PORTS)) {
+      assert.equal(typeof p.angular, 'number', `${name}.angular not number`);
+      assert.equal(typeof p.langgraph, 'number', `${name}.langgraph not number`);
+      assert.ok(p.angular > 0 && p.langgraph > 0, `${name} has non-positive port`);
+    }
+  });
+
+  test('port ranges: angular ∈ [4000, 5000), langgraph ∈ [5000, 6000), langgraph = angular + 1000', () => {
+    for (const [name, p] of Object.entries(PORTS)) {
+      assert.ok(p.angular >= 4000 && p.angular < 5000, `${name}.angular out of range: ${p.angular}`);
+      assert.ok(p.langgraph >= 5000 && p.langgraph < 6000, `${name}.langgraph out of range: ${p.langgraph}`);
+      assert.equal(p.langgraph, p.angular + 1000, `${name}: langgraph (${p.langgraph}) != angular (${p.angular}) + 1000`);
+    }
+  });
+
+  test('no duplicate ports', () => {
+    const seen = new Set();
+    for (const [name, p] of Object.entries(PORTS)) {
+      for (const port of [p.angular, p.langgraph]) {
+        assert.ok(!seen.has(port), `duplicate port ${port} (${name})`);
+        seen.add(port);
+      }
+    }
+  });
+
+  test('each cap python/project.json --port matches PORTS[name].langgraph', () => {
+    const mismatches = [];
+    for (const { name, dir } of projects) {
+      if (name === AGUI_EXCEPTION) continue;
+      const pyProjectJson = join(dir, '..', 'python', 'project.json');
+      if (!existsSync(pyProjectJson)) {
+        mismatches.push(`${name}: missing python/project.json at ${pyProjectJson}`);
+        continue;
+      }
+      const meta = JSON.parse(readFileSync(pyProjectJson, 'utf8'));
+      const cmd = String(meta?.targets?.serve?.options?.command ?? '');
+      const m = cmd.match(/--port[= ](\d+)/);
+      // Skip caps without an explicit --port (e.g. langgraph/deep-agents/render
+      // caps that don't expose nx serve port; e2e harness spawns langgraph
+      // with explicit --port from global-setup-impl.ts instead).
+      if (!m) continue;
+      const literal = Number(m[1]);
+      const expected = PORTS[name]?.langgraph;
+      if (literal !== expected) {
+        mismatches.push(`${name}: python --port ${literal} != registry ${expected}`);
+      }
+    }
+    assert.deepEqual(mismatches, []);
+  });
+
+  test('each active-e2e cap playwright.config.ts baseURL port matches PORTS[name].angular', () => {
+    const mismatches = [];
+    for (const { name, dir } of projects) {
+      if (name === AGUI_EXCEPTION) continue;
+      const pwConfig = join(dir, 'e2e', 'playwright.config.ts');
+      if (!existsSync(pwConfig)) continue;
+      const text = readFileSync(pwConfig, 'utf8');
+      const m = text.match(/baseURL:\s*[`'"]http:\/\/localhost:(\d+)[`'"/]/);
+      if (!m) continue;
+      const literal = Number(m[1]);
+      const expected = PORTS[name]?.angular;
+      if (literal !== expected) {
+        mismatches.push(`${name}: playwright baseURL :${literal} != registry :${expected}`);
+      }
+    }
+    assert.deepEqual(mismatches, []);
+  });
+});