feat(cockpit): ag-ui/json-render — AG-UI shared-state generative UI

apps/cockpit/scripts/capability-registry.ts

@@ -53,6 +53,7 @@ export const capabilities: readonly Capability[] = [
   { id: 'ag-ui-interrupts', product: 'ag-ui', topic: 'interrupts', angularProject: 'cockpit-ag-ui-interrupts-angular', port: 4320, pythonPort: 5320, pythonDir: 'cockpit/ag-ui/interrupts/python' },
   { id: 'ag-ui-streaming', product: 'ag-ui', topic: 'streaming', angularProject: 'cockpit-ag-ui-streaming-angular', port: 4321, pythonPort: 5321, pythonDir: 'cockpit/ag-ui/streaming/python' },
   { id: 'ag-ui-tool-views', product: 'ag-ui', topic: 'tool-views', angularProject: 'cockpit-ag-ui-tool-views-angular', port: 4322, pythonPort: 5322, pythonDir: 'cockpit/ag-ui/tool-views/python' },
+  { id: 'ag-ui-json-render', product: 'ag-ui', topic: 'json-render', angularProject: 'cockpit-ag-ui-json-render-angular', port: 4323, pythonPort: 5323, pythonDir: 'cockpit/ag-ui/json-render/python' },
 ] as const;
 
 export function findCapability(id: string): Capability | undefined {

apps/cockpit/src/lib/route-resolution.ts

@@ -14,6 +14,7 @@ import { langgraphDeploymentRuntimePythonModule } from '../../../../cockpit/lang
 import { agUiInterruptsPythonModule } from '../../../../cockpit/ag-ui/interrupts/python/src/index';
 import { agUiStreamingPythonModule } from '../../../../cockpit/ag-ui/streaming/python/src/index';
 import { agUiToolViewsPythonModule } from '../../../../cockpit/ag-ui/tool-views/python/src/index';
+import { agUiJsonRenderPythonModule } from '../../../../cockpit/ag-ui/json-render/python/src/index';
 import { deepAgentsMemoryPythonModule } from '../../../../cockpit/deep-agents/memory/python/src/index';
 import { deepAgentsPlanningPythonModule } from '../../../../cockpit/deep-agents/planning/python/src/index';
 import { deepAgentsFilesystemPythonModule } from '../../../../cockpit/deep-agents/filesystem/python/src/index';
@@ -87,6 +88,7 @@ const capabilityModules = [
   agUiInterruptsPythonModule,
   agUiStreamingPythonModule,
   agUiToolViewsPythonModule,
+  agUiJsonRenderPythonModule,
   deepAgentsMemoryPythonModule,
   deepAgentsPlanningPythonModule,
   deepAgentsFilesystemPythonModule,

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

@@ -0,0 +1,47 @@
+{
+  "fixtures": [
+    {
+      "match": {
+        "userMessage": "Show me a dashboard of airline operations.",
+        "hasToolResult": true
+      },
+      "response": {
+        "content": "Here's your airline operations dashboard with live KPI data."
+      }
+    },
+    {
+      "match": {
+        "userMessage": "Show me a dashboard of airline operations."
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "name": "render_spec",
+            "arguments": "{\"elements\":{\"root\":{\"type\":\"dashboard_grid\",\"children\":[\"stats_row\",\"charts_row\",\"table_section\"]},\"stats_row\":{\"type\":\"container\",\"props\":{\"direction\":\"row\"},\"children\":[\"on_time_card\",\"flights_card\",\"delay_card\",\"load_card\"]},\"on_time_card\":{\"type\":\"stat_card\",\"props\":{\"label\":\"On-time %\",\"value\":{\"$state\":\"/on_time/value\"},\"delta\":{\"$state\":\"/on_time/delta\"}}},\"flights_card\":{\"type\":\"stat_card\",\"props\":{\"label\":\"Flights Today\",\"value\":{\"$state\":\"/flights_today/value\"},\"delta\":{\"$state\":\"/flights_today/delta\"}}},\"delay_card\":{\"type\":\"stat_card\",\"props\":{\"label\":\"Avg Delay (min)\",\"value\":{\"$state\":\"/avg_delay/value\"},\"delta\":{\"$state\":\"/avg_delay/delta\"}}},\"load_card\":{\"type\":\"stat_card\",\"props\":{\"label\":\"Load Factor\",\"value\":{\"$state\":\"/load_factor/value\"},\"delta\":{\"$state\":\"/load_factor/delta\"}}},\"charts_row\":{\"type\":\"container\",\"props\":{\"direction\":\"row\"},\"children\":[\"trend_chart\",\"airline_chart\"]},\"trend_chart\":{\"type\":\"line_chart\",\"props\":{\"title\":\"On-time % Trend\",\"data\":{\"$state\":\"/on_time_trend\"},\"xKey\":\"month\",\"yKey\":\"on_time_pct\"}},\"airline_chart\":{\"type\":\"bar_chart\",\"props\":{\"title\":\"Flights by Airline (Daily)\",\"data\":{\"$state\":\"/flights_by_airline\"},\"labelKey\":\"airline\",\"valueKey\":\"count\"}},\"table_section\":{\"type\":\"data_grid\",\"props\":{\"title\":\"Recent Disruptions\",\"rows\":{\"$state\":\"/recent_disruptions\"},\"columns\":[\"flight_number\",\"type\",\"minutes\",\"route\",\"date\"]}}},\"root\":\"root\"}",
+            "id": "call_render_spec_001"
+          },
+          {
+            "name": "query_airline_kpis",
+            "arguments": "{}",
+            "id": "call_query_kpis_001"
+          },
+          {
+            "name": "query_on_time_trend",
+            "arguments": "{\"months\":12}",
+            "id": "call_query_trend_001"
+          },
+          {
+            "name": "query_flights_by_airline",
+            "arguments": "{}",
+            "id": "call_query_airlines_001"
+          },
+          {
+            "name": "query_recent_disruptions",
+            "arguments": "{\"limit\":5}",
+            "id": "call_query_disruptions_001"
+          }
+        ]
+      }
+    }
+  ]
+}

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

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

cockpit/ag-ui/json-render/angular/e2e/json-render.spec.ts

@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import { submitAndWaitForResponse } from '@threadplane-internal/e2e-harness';
+
+test('json-render: dashboard renders with STATE_SNAPSHOT-bound KPI values', async ({ page }) => {
+  await submitAndWaitForResponse(page, 'Show me a dashboard of airline operations.');
+  // Spec content mounts the GenUI tree; the KPI numbers arrive via
+  // STATE_SNAPSHOT (graph state → agent.state() → render store).
+  await expect(page.locator('chat-generative-ui').first()).toBeVisible({ timeout: 30000 });
+  await expect(page.locator('chat-generative-ui')).not.toHaveCount(0);
+  // At least one stat card shows a non-skeleton value (proves the data path).
+  await expect(page.locator('app-stat-card .stat-card__value').first()).toBeVisible({ timeout: 30000 });
+  await expect(page.locator('app-stat-card .stat-card__value').first()).not.toBeEmpty();
+});

cockpit/ag-ui/json-render/angular/e2e/manual/json-render.manual.ts

@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: MIT
+// Manual record-mode harness. Run against a live OpenAI key to capture new
+// fixture entries into cockpit/ag-ui/json-render/angular/e2e/fixtures/json-render.json.
+//
+// Prerequisites:
+//   1. Start the uvicorn backend in record mode (OPENAI_API_KEY set, no aimock):
+//        cd cockpit/ag-ui/json-render/python && uv run uvicorn src.server:app --port 5323
+//   2. Start the Angular dev server:
+//        npx nx serve cockpit-ag-ui-json-render-angular
+//   3. Run this harness via:
+//        npx playwright test --config cockpit/ag-ui/json-render/angular/e2e/playwright.config.ts \
+//          manual/json-render.manual.ts --headed
+import { expect, test } from '@playwright/test';
+
+test.describe('AG-UI JSON Render Example', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:4323');
+    await page.waitForSelector('app-json-render', { state: 'attached' });
+  });
+
+  test('renders the airline dashboard for a dashboard request', async ({ page }) => {
+    await page.fill('textarea[name="messageText"]', 'Show me a dashboard of airline operations.');
+    await page.click('button[type="submit"]');
+    await expect(page.locator('app-stat-card')).toBeVisible({ timeout: 30000 });
+  });
+});

cockpit/ag-ui/json-render/angular/e2e/playwright.config.ts

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

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

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

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

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

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

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

cockpit/ag-ui/json-render/angular/proxy.conf.mjs

@@ -0,0 +1,6 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+const { langgraph: backend } = portsFor('cockpit-ag-ui-json-render-angular');
+export default {
+  '/agent': { target: `http://localhost:${backend}`, secure: false, changeOrigin: true, ws: true },
+};

cockpit/ag-ui/json-render/angular/src/app/app.config.ts

@@ -0,0 +1,8 @@
+// SPDX-License-Identifier: MIT
+import { ApplicationConfig } from '@angular/core';
+import { provideAgent } from '@threadplane/ag-ui';
+import { provideChat } from '@threadplane/chat';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideAgent({ url: '/agent' }), provideChat({})],
+};

cockpit/ag-ui/json-render/angular/src/app/json-render.component.ts

@@ -0,0 +1,48 @@
+// SPDX-License-Identifier: MIT
+import { Component } from '@angular/core';
+import { ChatComponent, ChatWelcomeSuggestionComponent, views } from '@threadplane/chat';
+import { injectAgent } from '@threadplane/ag-ui';
+import { ExampleChatLayoutComponent } from '@threadplane/example-layouts';
+import { StatCardComponent } from './views/stat-card.component';
+import { ContainerComponent } from './views/container.component';
+import { DashboardGridComponent } from './views/dashboard-grid.component';
+import { LineChartComponent } from './views/line-chart.component';
+import { BarChartComponent } from './views/bar-chart.component';
+import { DataGridComponent } from './views/data-grid.component';
+
+const dashboardViews = views({
+  stat_card: StatCardComponent,
+  container: ContainerComponent,
+  dashboard_grid: DashboardGridComponent,
+  line_chart: LineChartComponent,
+  bar_chart: BarChartComponent,
+  data_grid: DataGridComponent,
+});
+
+const WELCOME_SUGGESTIONS = [
+  { label: 'Airline operations dashboard', value: 'Show me a dashboard of airline operations.' },
+  { label: 'Filter to cancelled flights',  value: 'Filter to only the cancelled flights.' },
+] as const;
+
+@Component({
+  selector: 'app-json-render',
+  standalone: true,
+  imports: [ChatComponent, ChatWelcomeSuggestionComponent, ExampleChatLayoutComponent],
+  template: `
+    <example-chat-layout>
+      <chat main [agent]="agent" [views]="dashboardViews" 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>
+    </example-chat-layout>
+  `,
+})
+export class JsonRenderComponent {
+  protected readonly agent = injectAgent();
+  protected readonly dashboardViews = dashboardViews;
+  protected readonly suggestions = WELCOME_SUGGESTIONS;
+  protected send(text: string): void { void this.agent.submit({ message: text }); }
+}