feat: add @cacheplane/render and @cacheplane/chat libraries

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

@@ -1,11 +1,11 @@
 {
-  "name": "cockpit-deep-agents-filesystem-angular",
+  "name": "@cacheplane/cockpit-deep-agents-filesystem-angular",
   "version": "0.0.1",
-  "private": true,
-  "dependencies": {
-    "@cacheplane/stream-resource": "^0.0.1",
+  "peerDependencies": {
     "@cacheplane/chat": "^0.0.1",
-    "@langchain/core": "^0.3.0",
+    "@cacheplane/stream-resource": "^0.0.1",
     "@langchain/langgraph-sdk": "^0.0.36"
-  }
+  },
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "sideEffects": false
 }

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

@@ -2,36 +2,21 @@
   "name": "cockpit-deep-agents-filesystem-angular",
   "$schema": "../../../../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "cockpit/deep-agents/filesystem/angular/src",
-  "projectType": "application",
-  "tags": ["scope:cockpit", "type:example"],
+  "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@angular/build:application",
+      "executor": "@nx/js:tsc",
+      "outputs": ["{workspaceRoot}/dist/cockpit/deep-agents/filesystem/angular"],
       "options": {
         "outputPath": "dist/cockpit/deep-agents/filesystem/angular",
-        "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": {
-        "development": {
-          "fileReplacements": [
-            {
-              "replace": "cockpit/deep-agents/filesystem/angular/src/environments/environment.ts",
-              "with": "cockpit/deep-agents/filesystem/angular/src/environments/environment.development.ts"
-            }
-          ]
-        }
-      },
-      "defaultConfiguration": "development"
+        "main": "cockpit/deep-agents/filesystem/angular/src/index.ts",
+        "tsConfig": "cockpit/deep-agents/filesystem/angular/tsconfig.json"
+      }
     },
-    "serve": {
-      "executor": "@angular/build:dev-server",
+    "smoke": {
+      "executor": "nx:run-commands",
       "options": {
-        "buildTarget": "cockpit-deep-agents-filesystem-angular:build:development",
-        "port": 4311,
-        "proxyConfig": "cockpit/deep-agents/filesystem/angular/proxy.conf.json"
+        "command": "npx tsx -e \"import { deepAgentsFilesystemAngularModule } from './cockpit/deep-agents/filesystem/angular/src/index.ts'; const mod = deepAgentsFilesystemAngularModule; if (mod.id !== 'deep-agents-filesystem-angular') throw new Error('Unexpected id: ' + mod.id); if (mod.title !== 'Deep Agents Filesystem (Angular)') throw new Error('Unexpected title: ' + mod.title); console.log(JSON.stringify({ id: mod.id, title: mod.title }));\""
       }
     }
   }

cockpit/deep-agents/filesystem/angular/prompts/filesystem.md

@@ -0,0 +1,5 @@
+# Deep Agents Filesystem (Angular)
+
+This capability demonstrates a deep agent that reads, writes, and navigates a sandboxed filesystem using the `@cacheplane/chat` Angular component library. The `<chat-debug>` component surfaces every filesystem tool call — including path, arguments, and result — so developers can follow the agent's file operations step by step.
+
+Key components used: `<chat-debug>`. Each tool invocation (read_file, write_file, list_dir, etc.) appears as a collapsible trace node, giving full visibility into how the agent interacts with the filesystem without cluttering the end-user chat view.

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

@@ -0,0 +1,38 @@
+import { Component, inject, Injector, OnInit } from '@angular/core';
+import { runInInjectionContext } from '@angular/core';
+import { ChatDebugComponent } from '@cacheplane/chat';
+import { streamResource, StreamResourceRef } from '@cacheplane/stream-resource';
+
+@Component({
+  selector: 'app-filesystem',
+  standalone: true,
+  imports: [ChatDebugComponent],
+  template: `
+    <div class="h-screen flex flex-col bg-gray-950 text-gray-100">
+      <!--
+        <chat-debug> intercepts tool-call events from the filesystem agent
+        and renders each one as a collapsible trace node showing:
+          - tool name (read_file / write_file / list_dir / …)
+          - arguments (path, content, …)
+          - result or error
+        This lets developers verify correct filesystem interaction during
+        development without adding any custom trace UI.
+      -->
+      <chat-debug
+        [ref]="chat"
+        class="flex-1 overflow-hidden"
+        traceLabel="Filesystem operations"
+      />
+    </div>
+  `,
+})
+export class FilesystemAppComponent implements OnInit {
+  private readonly injector = inject(Injector);
+  chat!: StreamResourceRef<any>;
+
+  ngOnInit(): void {
+    runInInjectionContext(this.injector, () => {
+      this.chat = streamResource({ assistantId: 'filesystem_agent' });
+    });
+  }
+}

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

@@ -0,0 +1,15 @@
+// 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';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideStreamResource({
+      apiUrl: 'http://localhost:2024',
+    }),
+    provideChat({}),
+    provideRender({}),
+  ],
+};

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

@@ -2,10 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>Deep Agents Filesystem</title>
+  <title>Filesystem - Deep Agents Angular Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body>
+<body class="bg-gray-950">
   <app-filesystem></app-filesystem>
 </body>
 </html>

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

@@ -0,0 +1,33 @@
+export interface CockpitCapabilityModule {
+  id: string;
+  manifestIdentity: {
+    product: 'deep-agents';
+    section: 'core-capabilities';
+    topic: 'filesystem';
+    page: 'overview';
+    language: 'angular';
+  };
+  title: string;
+  docsPath: string;
+  promptAssetPaths: string[];
+  codeAssetPaths: string[];
+}
+
+export const deepAgentsFilesystemAngularModule: CockpitCapabilityModule = {
+  id: 'deep-agents-filesystem-angular',
+  manifestIdentity: {
+    product: 'deep-agents',
+    section: 'core-capabilities',
+    topic: 'filesystem',
+    page: 'overview',
+    language: 'angular',
+  },
+  title: 'Deep Agents Filesystem (Angular)',
+  docsPath: '/docs/deep-agents/core-capabilities/filesystem/overview/angular',
+  promptAssetPaths: [
+    'cockpit/deep-agents/filesystem/angular/prompts/filesystem.md',
+  ],
+  codeAssetPaths: [
+    'cockpit/deep-agents/filesystem/angular/src/app.component.ts',
+  ],
+};

cockpit/deep-agents/filesystem/angular/src/main.ts

@@ -1,7 +1,6 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { bootstrapApplication } from '@angular/platform-browser';
-import { FilesystemComponent } from './app/filesystem.component';
-import { appConfig } from './app/app.config';
+import { appConfig } from './app.config';
+import { FilesystemAppComponent } from './app.component';
 
-bootstrapApplication(FilesystemComponent, appConfig).catch((err) =>
-  console.error(err)
-);
+bootstrapApplication(FilesystemAppComponent, appConfig).catch(console.error);

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

@@ -1,16 +1,7 @@
 {
-  "extends": "../../../../tsconfig.base.json",
+  "extends": "../../../../../../tsconfig.base.json",
   "compilerOptions": {
-    "target": "ES2022",
-    "module": "ES2022",
-    "moduleResolution": "bundler",
-    "experimentalDecorators": true,
-    "emitDeclarationOnly": false,
-    "noEmit": true,
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
-    "strict": true
-  }
+    "module": "preserve"
+  },
+  "include": ["src/**/*.ts"]
 }

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

@@ -1,11 +1,11 @@
 {
-  "name": "cockpit-deep-agents-memory-angular",
+  "name": "@cacheplane/cockpit-deep-agents-memory-angular",
   "version": "0.0.1",
-  "private": true,
-  "dependencies": {
-    "@cacheplane/stream-resource": "^0.0.1",
+  "peerDependencies": {
     "@cacheplane/chat": "^0.0.1",
-    "@langchain/core": "^0.3.0",
+    "@cacheplane/stream-resource": "^0.0.1",
     "@langchain/langgraph-sdk": "^0.0.36"
-  }
+  },
+  "license": "PolyForm-Noncommercial-1.0.0",
+  "sideEffects": false
 }

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

@@ -2,36 +2,21 @@
   "name": "cockpit-deep-agents-memory-angular",
   "$schema": "../../../../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "cockpit/deep-agents/memory/angular/src",
-  "projectType": "application",
-  "tags": ["scope:cockpit", "type:example"],
+  "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@angular/build:application",
+      "executor": "@nx/js:tsc",
+      "outputs": ["{workspaceRoot}/dist/cockpit/deep-agents/memory/angular"],
       "options": {
         "outputPath": "dist/cockpit/deep-agents/memory/angular",
-        "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": {
-        "development": {
-          "fileReplacements": [
-            {
-              "replace": "cockpit/deep-agents/memory/angular/src/environments/environment.ts",
-              "with": "cockpit/deep-agents/memory/angular/src/environments/environment.development.ts"
-            }
-          ]
-        }
-      },
-      "defaultConfiguration": "development"
+        "main": "cockpit/deep-agents/memory/angular/src/index.ts",
+        "tsConfig": "cockpit/deep-agents/memory/angular/tsconfig.json"
+      }
     },
-    "serve": {
-      "executor": "@angular/build:dev-server",
+    "smoke": {
+      "executor": "nx:run-commands",
       "options": {
-        "buildTarget": "cockpit-deep-agents-memory-angular:build:development",
-        "port": 4313,
-        "proxyConfig": "cockpit/deep-agents/memory/angular/proxy.conf.json"
+        "command": "npx tsx -e \"import { deepAgentsMemoryAngularModule } from './cockpit/deep-agents/memory/angular/src/index.ts'; const mod = deepAgentsMemoryAngularModule; if (mod.id !== 'deep-agents-memory-angular') throw new Error('Unexpected id: ' + mod.id); if (mod.title !== 'Deep Agents Memory (Angular)') throw new Error('Unexpected title: ' + mod.title); console.log(JSON.stringify({ id: mod.id, title: mod.title }));\""
       }
     }
   }

cockpit/deep-agents/memory/angular/prompts/memory.md

@@ -0,0 +1,5 @@
+# Deep Agents Memory (Angular)
+
+This capability demonstrates how a deep agent stores, retrieves, and updates long-term memories across sessions using the `@cacheplane/chat` Angular component library. The `<chat-debug>` component reveals every memory read and write operation — including the memory key, value, and retrieval score — so developers can verify that the agent is building and using its knowledge store correctly.
+
+Key components used: `<chat-debug>`. Memory tool calls (store_memory, retrieve_memories, delete_memory) appear as collapsible trace nodes, giving full visibility into how the agent's persistent knowledge base evolves over the course of a session and across session boundaries.

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

@@ -0,0 +1,38 @@
+import { Component, inject, Injector, OnInit } from '@angular/core';
+import { runInInjectionContext } from '@angular/core';
+import { ChatDebugComponent } from '@cacheplane/chat';
+import { streamResource, StreamResourceRef } from '@cacheplane/stream-resource';
+
+@Component({
+  selector: 'app-memory',
+  standalone: true,
+  imports: [ChatDebugComponent],
+  template: `
+    <div class="h-screen flex flex-col bg-gray-950 text-gray-100">
+      <!--
+        <chat-debug> intercepts memory tool-call events and renders them as
+        collapsible trace nodes labelled by operation type:
+          - store_memory   → key + value written
+          - retrieve_memories → query + ranked results
+          - delete_memory  → key removed
+        This lets developers confirm that the agent is persisting the right
+        facts and retrieving them with appropriate relevance scores.
+      -->
+      <chat-debug
+        [ref]="chat"
+        class="flex-1 overflow-hidden"
+        traceLabel="Memory operations"
+      />
+    </div>
+  `,
+})
+export class MemoryAppComponent implements OnInit {
+  private readonly injector = inject(Injector);
+  chat!: StreamResourceRef<any>;
+
+  ngOnInit(): void {
+    runInInjectionContext(this.injector, () => {
+      this.chat = streamResource({ assistantId: 'memory_agent' });
+    });
+  }
+}

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

@@ -0,0 +1,15 @@
+// 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';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideStreamResource({
+      apiUrl: 'http://localhost:2024',
+    }),
+    provideChat({}),
+    provideRender({}),
+  ],
+};

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

@@ -2,10 +2,11 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>Deep Agents Memory</title>
+  <title>Memory - Deep Agents Angular Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body>
-  <app-da-memory></app-da-memory>
+<body class="bg-gray-950">
+  <app-memory></app-memory>
 </body>
 </html>

cockpit/deep-agents/memory/angular/src/index.ts

@@ -0,0 +1,33 @@
+export interface CockpitCapabilityModule {
+  id: string;
+  manifestIdentity: {
+    product: 'deep-agents';
+    section: 'core-capabilities';
+    topic: 'memory';
+    page: 'overview';
+    language: 'angular';
+  };
+  title: string;
+  docsPath: string;
+  promptAssetPaths: string[];
+  codeAssetPaths: string[];
+}
+
+export const deepAgentsMemoryAngularModule: CockpitCapabilityModule = {
+  id: 'deep-agents-memory-angular',
+  manifestIdentity: {
+    product: 'deep-agents',
+    section: 'core-capabilities',
+    topic: 'memory',
+    page: 'overview',
+    language: 'angular',
+  },
+  title: 'Deep Agents Memory (Angular)',
+  docsPath: '/docs/deep-agents/core-capabilities/memory/overview/angular',
+  promptAssetPaths: [
+    'cockpit/deep-agents/memory/angular/prompts/memory.md',
+  ],
+  codeAssetPaths: [
+    'cockpit/deep-agents/memory/angular/src/app.component.ts',
+  ],
+};

cockpit/deep-agents/memory/angular/src/main.ts

@@ -1,7 +1,6 @@
+// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
 import { bootstrapApplication } from '@angular/platform-browser';
-import { MemoryComponent } from './app/memory.component';
-import { appConfig } from './app/app.config';
+import { appConfig } from './app.config';
+import { MemoryAppComponent } from './app.component';
 
-bootstrapApplication(MemoryComponent, appConfig).catch((err) =>
-  console.error(err)
-);
+bootstrapApplication(MemoryAppComponent, appConfig).catch(console.error);