feat(cockpit): wire streaming example to @cacheplane/chat

cockpit/langgraph/streaming/angular/project.json

@@ -2,16 +2,51 @@
   "name": "cockpit-langgraph-streaming-angular",
   "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "cockpit/langgraph/streaming/angular/src",
-  "projectType": "library",
+  "projectType": "application",
   "targets": {
     "build": {
-      "executor": "@nx/js:tsc",
-      "outputs": ["{workspaceRoot}/dist/cockpit/langgraph/streaming/angular"],
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/cockpit/langgraph/streaming/angular",
-        "main": "cockpit/langgraph/streaming/angular/src/index.ts",
-        "tsConfig": "cockpit/langgraph/streaming/angular/tsconfig.json"
-      }
+        "index": "cockpit/langgraph/streaming/angular/src/index.html",
+        "browser": "cockpit/langgraph/streaming/angular/src/main.ts",
+        "tsConfig": "cockpit/langgraph/streaming/angular/tsconfig.app.json",
+        "styles": ["cockpit/langgraph/streaming/angular/src/styles.css"]
+      },
+      "configurations": {
+        "production": {
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "fileReplacements": [
+            {
+              "replace": "cockpit/langgraph/streaming/angular/src/environments/environment.ts",
+              "with": "cockpit/langgraph/streaming/angular/src/environments/environment.development.ts"
+            }
+          ]
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "port": 4300,
+        "proxyConfig": "cockpit/langgraph/streaming/angular/proxy.conf.json"
+      },
+      "configurations": {
+        "production": {
+          "buildTarget": "cockpit-langgraph-streaming-angular:build:production"
+        },
+        "development": {
+          "buildTarget": "cockpit-langgraph-streaming-angular:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
     },
     "smoke": {
       "executor": "nx:run-commands",

cockpit/langgraph/streaming/angular/src/app/app.config.ts

@@ -1,18 +1,12 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { ApplicationConfig } from '@angular/core';
 import { provideStreamResource } from '@cacheplane/stream-resource';
+import { provideChat } from '@cacheplane/chat';
 import { environment } from '../environments/environment';
 
-/**
- * Application configuration for the LangGraph Streaming demo.
- *
- * Uses `provideStreamResource()` to set the global LangGraph API URL.
- * All `streamResource()` calls in this app inherit this URL unless
- * overridden at the call site.
- */
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideStreamResource({
-      apiUrl: environment.langGraphApiUrl,
-    }),
+    provideStreamResource({ apiUrl: environment.langGraphApiUrl }),
+    provideChat({}),
   ],
 };

cockpit/langgraph/streaming/angular/src/app/streaming.component.ts

@@ -1,47 +1,25 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { Component } from '@angular/core';
 import { ChatComponent } from '@cacheplane/chat';
 import { streamResource } from '@cacheplane/stream-resource';
 import { environment } from '../environments/environment';
 
 /**
- * StreamingComponent demonstrates real-time LLM streaming with `streamResource()`.
+ * Streaming demo — simplest possible @cacheplane/chat integration.
  *
- * Uses the shared `@cacheplane/chat` component for the chat UI.
- * This is the simplest example — just streaming messages with no
- * additional capability features (no threads, interrupts, etc.).
- *
- * Key integration points:
- * - `streamResource()` creates a Signal-based streaming ref
- * - `stream.messages()` provides reactive access to the conversation
- * - `stream.submit()` fires a message to the LangGraph backend
- * - `stream.isLoading()` tracks whether a response is in progress
+ * Creates a streamResource ref and passes it to the prebuilt <chat>
+ * composition. The composition handles message rendering, input, typing
+ * indicator, and error display internally.
  */
 @Component({
   selector: 'app-streaming',
   standalone: true,
   imports: [ChatComponent],
-  template: `
-    <cp-chat
-      [messages]="stream.messages()"
-      [isLoading]="stream.isLoading()"
-      [error]="stream.error()"
-      (sendMessage)="send($event)"
-    />
-  `,
+  template: `<chat [ref]="stream" class="block h-screen" />`,
 })
 export class StreamingComponent {
-  /**
-   * The streaming resource ref — connects to the LangGraph Cloud backend.
-   */
   protected readonly stream = streamResource({
     apiUrl: environment.langGraphApiUrl,
     assistantId: environment.streamingAssistantId,
   });
-
-  /**
-   * Submits the user's message to the LangGraph streaming endpoint.
-   */
-  send(text: string): void {
-    this.stream.submit({ messages: [{ role: 'human', content: text }] });
-  }
 }

cockpit/langgraph/streaming/angular/src/environments/environment.development.ts

@@ -6,6 +6,6 @@
  */
 export const environment = {
   production: false,
-  langGraphApiUrl: 'http://localhost:4300/api',
+  langGraphApiUrl: '/api',
   streamingAssistantId: 'streaming',
 };

cockpit/langgraph/streaming/angular/src/index.html

@@ -2,11 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>Streaming - LangGraph Angular Example</title>
+  <title>LangGraph Streaming — Angular</title>
+  <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950">
+<body class="bg-gray-950 text-gray-100 h-screen">
   <app-streaming></app-streaming>
 </body>
 </html>

cockpit/langgraph/streaming/angular/src/main.ts

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app.config';
-import { StreamingAppComponent } from './app.component';
+import { appConfig } from './app/app.config';
+import { StreamingComponent } from './app/streaming.component';
 
-bootstrapApplication(StreamingAppComponent, appConfig).catch(console.error);
+bootstrapApplication(StreamingComponent, appConfig).catch(console.error);

cockpit/langgraph/streaming/angular/tsconfig.app.json

@@ -2,7 +2,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../../dist/out-tsc",
-    "types": []
+    "lib": ["es2022", "dom"],
+    "types": [],
+    "emitDeclarationOnly": false
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.ts"]