feat(copilotkit): dockable CopilotKit chat sidebar on AG-UI

package.json

@@ -19,7 +19,8 @@
   },
   "resolutions": {
     "@a2ui/web_core": "0.10.5",
-    "@google/genai": "2.8.0"
+    "@google/genai": "2.8.0",
+    "rxjs": "7.8.2"
   },
   "packageManager": "yarn@4.5.0",
   "engines": {

shell/package.json

@@ -27,6 +27,7 @@
     "@angular/material": "22.0.5",
     "@angular/platform-browser": "22.0.7",
     "@angular/router": "22.0.7",
+    "@copilotkit/angular": "^0.1.2",
     "@google/genai": "2.11.0",
     "@monaco-editor/loader": "1.7.0",
     "a2ui-bridge": "0.1.0",

shell/src/app/app.config.ts

@@ -22,7 +22,9 @@ import {
 } from '@angular/core';
 import {provideRouter} from '@angular/router';
 import {provideAnimations} from '@angular/platform-browser/animations';
+import {COPILOT_KIT_CONFIG} from '@copilotkit/angular';
 import {routes} from './app.routes';
+import {GeminiA2uiAgent} from './copilotkit/gemini-a2ui-agent/gemini-a2ui-agent';
 import {StartupResolution} from './shell/startup-resolution/startup-resolution';
 import {AppConfigProvider} from './settings/app-config-provider/app-config-provider';
 import {LocalStorageAppConfigProvider} from './settings/local-storage-config-provider/local-storage-config.provider';
@@ -38,6 +40,14 @@ export const appConfig: ApplicationConfig = {
     provideZonelessChangeDetection(),
     provideRouter(routes),
     provideAnimations(),
+    // Register the in-browser AG-UI agent as the default CopilotKit agent.
+    // provideCopilotKit only binds COPILOT_KIT_CONFIG as a value, so we bind it
+    // via a factory to inject the DI-constructed GeminiA2uiAgent (no runtimeUrl —
+    // the agent runs entirely client-side).
+    {
+      provide: COPILOT_KIT_CONFIG,
+      useFactory: () => ({agents: {default: inject(GeminiA2uiAgent)}}),
+    },
     provideAppInitializer(() => {
       const startupResolution = inject(StartupResolution);
       const configProvider = inject(AppConfigProvider);

shell/src/app/app.routes.spec.ts

@@ -18,9 +18,11 @@ import {TestBed} from '@angular/core/testing';
 import {provideRouter, Router} from '@angular/router';
 import {RouterTestingHarness} from '@angular/router/testing';
 import {provideNoopAnimations} from '@angular/platform-browser/animations';
-import {signal} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
 import {routes} from './app.routes';
+import {ComposerWorkspace} from './shell/composer-workspace/composer-workspace';
+import {CopilotSidebar} from './copilotkit/copilot-sidebar/copilot-sidebar';
 import {StartupResolution, ProfileConfig} from './shell/startup-resolution/startup-resolution';
 import {ChatState} from './chat/chat-state/chat-state';
 import {ChatCoordinator} from './chat/chat-service/chat-coordinator';
@@ -37,6 +39,17 @@ import {IndexedDbStorage} from './storage/indexed-db-storage/indexed-db-storage'
 import {LocalStorageInteractions} from './storage/local-storage-interactions/local-storage-interactions';
 import {PipelineStatus} from './chat/pipeline-status/pipeline-status';
 
+/**
+ * Stubs the docked sidebar so routing into the workspace does not require the
+ * CopilotKit runtime (COPILOT_KIT_CONFIG) — this suite verifies routing only.
+ */
+@Component({
+  selector: 'a2ui-composer-copilot-sidebar',
+  standalone: true,
+  template: '',
+})
+class CopilotSidebarStub {}
+
 class MockStartupResolution {
   readonly resolvedUrl = signal('http://localhost:4200');
   readonly isLockedContext = signal(false);
@@ -131,7 +144,12 @@ describe('App Routes Active Verification', () => {
           useValue: {removeItem: vi.fn(), getItem: vi.fn().mockReturnValue(null)},
         },
       ],
-    }).compileComponents();
+    })
+      .overrideComponent(ComposerWorkspace, {
+        remove: {imports: [CopilotSidebar]},
+        add: {imports: [CopilotSidebarStub]},
+      })
+      .compileComponents();
 
     harness = await RouterTestingHarness.create();
     router = TestBed.inject(Router);