feat(cockpit): wire all 13 remaining Angular examples to @cacheplane/chat

cockpit/deep-agents/filesystem/angular/project.json

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

cockpit/deep-agents/filesystem/angular/proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "http://localhost:8132",
+    "target": "http://localhost:8141",
     "secure": false,
     "changeOrigin": true,
     "pathRewrite": { "^/api": "" },

cockpit/deep-agents/filesystem/angular/src/app/app.config.ts

@@ -1,18 +1,14 @@
+// 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 { provideRender } from '@cacheplane/render';
 import { environment } from '../environments/environment';
 
-/**
- * Application configuration for the Deep Agents Filesystem 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({}),
+    provideRender({}),
   ],
 };

cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts

@@ -1,89 +1,18 @@
-import { Component, computed } from '@angular/core';
-import { ChatComponent } from '@cacheplane/chat';
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
+import { Component } from '@angular/core';
+import { ChatDebugComponent } from '@cacheplane/chat';
 import { streamResource } from '@cacheplane/stream-resource';
 import { environment } from '../environments/environment';
 
-interface ToolCallEntry {
-  name: string;
-  args: string;
-  result?: string;
-}
-
-/**
- * FilesystemComponent demonstrates agent file operations.
- *
- * The agent can read and write files using tool calls. The sidebar
- * shows a real-time log of each file operation as it happens.
- *
- * Key integration points:
- * - `stream.messages()` contains all messages including tool call results
- * - `computed()` derives tool call entries from AI messages
- * - Tool calls update reactively as the agent performs file operations
- */
 @Component({
   selector: 'app-filesystem',
   standalone: true,
-  imports: [ChatComponent],
-  template: `
-    <cp-chat
-      [messages]="stream.messages()"
-      [isLoading]="stream.isLoading()"
-      [error]="stream.error()"
-      (sendMessage)="send($event)">
-      <ng-template #sidebar>
-        <h3 style="font-size: 0.8rem; font-weight: 600; margin-bottom: 0.75rem; color: #1a1a2e;">File Operations</h3>
-        @for (entry of toolCallEntries(); track $index) {
-          <div style="display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 0.8rem; border-bottom: 1px solid #e5e7eb;">
-            <span style="flex-shrink: 0; font-size: 1rem; line-height: 1.2;">
-              {{ entry.name === 'read_file' ? '📖' : '✏️' }}
-            </span>
-            <div style="min-width: 0;">
-              <div style="font-weight: 500; color: #1a1a2e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                {{ getFilePath(entry.args) }}
-              </div>
-              <div style="color: #8b8fa3; font-size: 0.75rem; margin-top: 2px;">
-                {{ entry.name === 'read_file' ? 'read' : 'write' }}
-                {{ entry.result ? ' · done' : ' · running…' }}
-              </div>
-            </div>
-          </div>
-        }
-        @empty {
-          <p style="color: #8b8fa3; font-size: 0.8rem;">Ask the agent to read or write a file.</p>
-        }
-      </ng-template>
-    </cp-chat>
-  `,
+  imports: [ChatDebugComponent],
+  template: `<chat-debug [ref]="stream" class="block h-screen" />`,
 })
 export class FilesystemComponent {
   protected readonly stream = streamResource({
     apiUrl: environment.langGraphApiUrl,
     assistantId: environment.streamingAssistantId,
   });
-
-  toolCallEntries = computed(() => {
-    const msg = this.stream.messages();
-    const calls: ToolCallEntry[] = [];
-    for (const m of msg) {
-      if ((m as any).tool_calls) {
-        for (const tc of (m as any).tool_calls) {
-          calls.push({ name: tc.name, args: JSON.stringify(tc.args), result: tc.output });
-        }
-      }
-    }
-    return calls;
-  });
-
-  getFilePath(args: string): string {
-    try {
-      const parsed = JSON.parse(args);
-      return parsed.path ?? args;
-    } catch {
-      return args;
-    }
-  }
-
-  send(text: string): void {
-    this.stream.submit({ messages: [{ role: 'human', content: text }] });
-  }
 }

cockpit/deep-agents/filesystem/angular/src/environments/environment.development.ts

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

cockpit/deep-agents/filesystem/angular/src/index.html

@@ -2,11 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>Filesystem - Deep Agents Angular Example</title>
+  <title>Filesystem — Deep Agents 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-filesystem></app-filesystem>
 </body>
 </html>

cockpit/deep-agents/filesystem/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 { FilesystemAppComponent } from './app.component';
+import { appConfig } from './app/app.config';
+import { FilesystemComponent } from './app/filesystem.component';
 
-bootstrapApplication(FilesystemAppComponent, appConfig).catch(console.error);
+bootstrapApplication(FilesystemComponent, appConfig).catch(console.error);

cockpit/deep-agents/filesystem/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"]

cockpit/deep-agents/filesystem/angular/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../../../../../tsconfig.base.json",
+  "extends": "../../../../tsconfig.base.json",
   "compilerOptions": {
     "module": "preserve"
   },

cockpit/deep-agents/memory/angular/project.json

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

cockpit/deep-agents/memory/angular/proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "http://localhost:8134",
+    "target": "http://localhost:8143",
     "secure": false,
     "changeOrigin": true,
     "pathRewrite": { "^/api": "" },