@memberjunction/ng-conversations 2.104.0

package/README.md

@@ -0,0 +1,197 @@
+# @memberjunction/ng-conversations
+
+Angular package for conversation, collection, and artifact management built on MemberJunction.
+
+## Status: Foundation Complete ✅
+
+This package provides the core infrastructure for building Slack-style conversation interfaces with artifacts and collections. The initial implementation includes:
+
+### ✅ Completed
+
+#### Core Services
+- **ConversationDataService** - CRUD operations for conversations with reactive state
+- **MessageDataService** - Message management with caching
+- **ArtifactDataService** - Artifact and version management
+- **ProjectDataService** - Project organization
+- **CollectionDataService** - Collection and artifact organization
+- **ConversationStateService** - Reactive state management for conversations
+- **ArtifactStateService** - Reactive state management for artifacts
+
+#### Components
+- **MessageItemComponent** - Individual message display with dynamic rendering
+- **MessageListComponent** - Efficient message list using ViewContainerRef.createComponent()
+
+#### Models
+- TypeScript interfaces for all state management types
+- Union types for navigation tabs, layouts, and view modes
+
+### 🎯 Key Features
+
+1. **Performance Optimized**
+   - Uses dynamic component creation (ViewContainerRef.createComponent) instead of Angular template binding
+   - Follows the proven pattern from @memberjunction/ng-skip-chat
+   - Dramatically reduces render cycles and improves performance
+
+2. **MJ Entity Integration**
+   - All services use Metadata.GetEntityObject() pattern
+   - RunView for efficient data loading
+   - Proper type safety with generic methods
+
+3. **Reactive State Management**
+   - RxJS BehaviorSubjects for all state
+   - Derived observables using combineLatest
+   - shareReplay(1) for efficient caching
+
+4. **Proper User Context**
+   - All server-side operations include contextUser parameter
+   - Follows MJ security patterns
+
+### 📦 Installation
+
+This package is part of the MemberJunction monorepo. It's installed via npm workspaces:
+
+```bash
+# From repo root
+npm install
+```
+
+### 🔧 Usage Example
+
+```typescript
+import {
+  ConversationDataService,
+  MessageDataService,
+  ConversationStateService,
+  MessageListComponent
+} from '@memberjunction/ng-conversations';
+
+// In your component
+constructor(
+  private conversationData: ConversationDataService,
+  private conversationState: ConversationStateService,
+  private currentUser: UserInfo
+) {}
+
+async ngOnInit() {
+  // Load conversations
+  const conversations = await this.conversationData.loadConversations(
+    environmentId,
+    this.currentUser
+  );
+
+  // Set active conversation
+  this.conversationState.setActiveConversation(conversations[0].ID);
+
+  // Subscribe to state changes
+  this.conversationState.activeConversation$.subscribe(conv => {
+    console.log('Active conversation changed:', conv);
+  });
+}
+```
+
+### 📁 Package Structure
+
+```
+src/
+├── lib/
+│   ├── components/
+│   │   └── message/                  # Message display components
+│   │       ├── message-item.component.ts
+│   │       ├── message-item.component.html
+│   │       ├── message-item.component.css
+│   │       ├── message-list.component.ts
+│   │       ├── message-list.component.html
+│   │       └── message-list.component.css
+│   ├── services/
+│   │   ├── conversation-data.service.ts      # Conversation CRUD
+│   │   ├── message-data.service.ts           # Message CRUD
+│   │   ├── artifact-data.service.ts          # Artifact & versions
+│   │   ├── project-data.service.ts           # Project management
+│   │   ├── collection-data.service.ts        # Collections
+│   │   ├── conversation-state.service.ts     # Conversation state
+│   │   └── artifact-state.service.ts         # Artifact state
+│   ├── models/
+│   │   └── conversation-state.model.ts       # TypeScript interfaces
+│   └── conversations.module.ts
+└── public-api.ts
+```
+
+### 🚀 Next Steps
+
+To complete the full implementation as per the prototype:
+
+1. **Layout Components**
+   - ConversationWorkspaceComponent (3-column layout)
+   - ConversationNavigationComponent (top nav bar)
+   - ConversationSidebarComponent (left sidebar with tabs)
+
+2. **Conversation Components**
+   - ConversationListComponent (with grouping/filtering)
+   - ConversationItemComponent (list item with badges)
+   - ConversationChatAreaComponent (main chat interface)
+   - MessageInputComponent (rich text input)
+
+3. **Artifact Components**
+   - ArtifactPanelComponent (right panel)
+   - ArtifactViewerComponent (type-specific rendering)
+   - ArtifactEditorComponent (edit mode)
+   - ArtifactVersionHistoryComponent (version timeline)
+   - ArtifactShareModalComponent (sharing UI)
+
+4. **Collection Components**
+   - CollectionTreeComponent (hierarchical tree)
+   - CollectionViewComponent (grid/list view)
+   - CollectionModalComponent (management UI)
+
+5. **Project & Task Components**
+   - ProjectListComponent
+   - ProjectSelectorComponent
+   - TaskListComponent
+   - TaskItemComponent
+   - AgentProcessPanelComponent (floating panel)
+
+6. **Explorer Integration**
+   - Add `/chat` route to explorer-core
+   - Create wrapper components
+   - Integrate with Explorer navigation
+
+### 🧪 Testing
+
+```bash
+# Compile the package
+cd packages/Angular/Generic/conversations
+npm run build
+
+# Run from repo root
+npm run build:conversations
+```
+
+### 📝 Notes
+
+- **No Commits**: This code has NOT been committed. Review required before committing.
+- **Dynamic Rendering**: The message components use ViewContainerRef.createComponent() to avoid Angular binding overhead - this is CRITICAL for performance.
+- **Type Safety**: All services use proper MJ entity types and generic methods.
+- **Caching**: Message data is cached per conversation to minimize database hits.
+
+### 🔗 Dependencies
+
+- @memberjunction/core ^2.101.0
+- @memberjunction/core-entities ^2.101.0
+- @memberjunction/global ^2.101.0
+- @memberjunction/graphql-dataprovider ^2.101.0
+- @memberjunction/ng-base-types ^2.101.0
+- @progress/kendo-angular-* ^16.2.0
+- @angular/* ^18.0.2
+- ngx-markdown ^18.0.0
+- marked ^9.1.6
+
+### 📚 References
+
+- Implementation Plan: See comprehensive plan created during initial analysis
+- Prototype: `/v3_conversations/slack-style-agent-chat-v22.html`
+- Entity Schema: `/v3_conversations/schema.sql`
+- Skip Chat Pattern: `packages/Angular/Generic/skip-chat/`
+
+---
+
+**Built with MemberJunction** | Version 2.101.0

package/dist/lib/components/active-tasks/active-tasks-panel.component.d.ts

@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs';
+import { ActiveTasksService, ActiveTask } from '../../services/active-tasks.service';
+import * as i0 from "@angular/core";
+/**
+ * Panel component that displays currently running agent tasks.
+ * Shows as a floating panel in bottom-right corner when tasks are active.
+ */
+export declare class ActiveTasksPanelComponent {
+    private activeTasksService;
+    tasks$: Observable<ActiveTask[]>;
+    taskCount$: Observable<number>;
+    isExpanded: boolean;
+    constructor(activeTasksService: ActiveTasksService);
+    toggleExpanded(): void;
+    getElapsedTime(task: ActiveTask): string;
+    getTrimmedStatus(status: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActiveTasksPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActiveTasksPanelComponent, "mj-active-tasks-panel", never, {}, {}, never, never, false, never>;
+}
+//# sourceMappingURL=active-tasks-panel.component.d.ts.map

package/dist/lib/components/active-tasks/active-tasks-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-tasks-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;;AAErF;;;GAGG;AACH,qBAiHa,yBAAyB;IAKxB,OAAO,CAAC,kBAAkB;IAJtC,MAAM,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC/B,UAAU,UAAQ;gBAEE,kBAAkB,EAAE,kBAAkB;IAK1D,cAAc,IAAI,IAAI;IAItB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAaxC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;yCA3B7B,yBAAyB;2CAAzB,yBAAyB;CAkCrC"}

package/dist/lib/components/active-tasks/active-tasks-panel.component.js

@@ -0,0 +1,125 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/active-tasks.service";
+import * as i2 from "@angular/common";
+function ActiveTasksPanelComponent_div_0_div_7_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 9);
+    i0.ɵɵelement(2, "i", 10);
+    i0.ɵɵelementStart(3, "span", 11);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 12);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 13);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const task_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(task_r3.agentName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getElapsedTime(task_r3));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getTrimmedStatus(task_r3.status));
+} }
+function ActiveTasksPanelComponent_div_0_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵtemplate(1, ActiveTasksPanelComponent_div_0_div_7_div_1_Template, 9, 3, "div", 7);
+    i0.ɵɵpipe(2, "async");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, ctx_r1.tasks$));
+} }
+function ActiveTasksPanelComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+    i0.ɵɵlistener("click", function ActiveTasksPanelComponent_div_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleExpanded()); });
+    i0.ɵɵelement(2, "i", 3);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "async");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(6, "i", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(7, ActiveTasksPanelComponent_div_0_div_7_Template, 3, 3, "div", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Active Tasks (", i0.ɵɵpipeBind1(5, 3, ctx_r1.taskCount$), ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.isExpanded ? "fa-chevron-up" : "fa-chevron-down");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isExpanded);
+} }
+/**
+ * Panel component that displays currently running agent tasks.
+ * Shows as a floating panel in bottom-right corner when tasks are active.
+ */
+export class ActiveTasksPanelComponent {
+    activeTasksService;
+    tasks$;
+    taskCount$;
+    isExpanded = true;
+    constructor(activeTasksService) {
+        this.activeTasksService = activeTasksService;
+        this.tasks$ = this.activeTasksService.tasks$;
+        this.taskCount$ = this.activeTasksService.taskCount$;
+    }
+    toggleExpanded() {
+        this.isExpanded = !this.isExpanded;
+    }
+    getElapsedTime(task) {
+        const elapsed = Date.now() - task.startTime;
+        const seconds = Math.floor(elapsed / 1000);
+        if (seconds < 60) {
+            return `${seconds}s`;
+        }
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+    }
+    getTrimmedStatus(status) {
+        const maxLength = 50;
+        if (status.length <= maxLength) {
+            return status;
+        }
+        return status.substring(0, maxLength) + '...';
+    }
+    static ɵfac = function ActiveTasksPanelComponent_Factory(t) { return new (t || ActiveTasksPanelComponent)(i0.ɵɵdirectiveInject(i1.ActiveTasksService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActiveTasksPanelComponent, selectors: [["mj-active-tasks-panel"]], decls: 2, vars: 3, consts: [["class", "active-tasks-panel", 4, "ngIf"], [1, "active-tasks-panel"], [1, "panel-header", 3, "click"], [1, "fas", "fa-tasks"], [1, "fas", 3, "ngClass"], ["class", "panel-content", 4, "ngIf"], [1, "panel-content"], ["class", "task-item", 4, "ngFor", "ngForOf"], [1, "task-item"], [1, "task-header"], [1, "fas", "fa-circle-notch", "fa-spin"], [1, "task-agent"], [1, "task-elapsed"], [1, "task-status"]], template: function ActiveTasksPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ActiveTasksPanelComponent_div_0_Template, 8, 5, "div", 0);
+            i0.ɵɵpipe(1, "async");
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.taskCount$) > 0);
+        } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i2.AsyncPipe], styles: [".active-tasks-panel[_ngcontent-%COMP%] {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      z-index: 1000;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: #F9FAFB;\n      border-bottom: 1px solid #E5E7EB;\n      border-radius: 8px 8px 0 0;\n      cursor: pointer;\n      font-weight: 600;\n      font-size: 14px;\n      color: #111827;\n      transition: background 150ms ease;\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: #F3F4F6;\n    }\n\n    .panel-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n      color: #0076B6;\n    }\n\n    .panel-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .panel-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child {\n      color: #6B7280;\n      font-size: 12px;\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      border-bottom: 1px solid #F3F4F6;\n    }\n\n    .task-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .task-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #0076B6;\n      font-size: 14px;\n    }\n\n    .task-agent[_ngcontent-%COMP%] {\n      flex: 1;\n      font-weight: 600;\n      color: #111827;\n      font-size: 14px;\n    }\n\n    .task-elapsed[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #6B7280;\n      font-weight: 500;\n    }\n\n    .task-status[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #6B7280;\n      padding-left: 22px;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActiveTasksPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-active-tasks-panel', template: `
+    <div class="active-tasks-panel" *ngIf="(taskCount$ | async)! > 0">
+      <div class="panel-header" (click)="toggleExpanded()">
+        <i class="fas fa-tasks"></i>
+        <span>Active Tasks ({{ taskCount$ | async }})</span>
+        <i class="fas" [ngClass]="isExpanded ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
+      </div>
+
+      <div class="panel-content" *ngIf="isExpanded">
+        <div class="task-item" *ngFor="let task of (tasks$ | async)">
+          <div class="task-header">
+            <i class="fas fa-circle-notch fa-spin"></i>
+            <span class="task-agent">{{ task.agentName }}</span>
+            <span class="task-elapsed">{{ getElapsedTime(task) }}</span>
+          </div>
+          <div class="task-status">{{ getTrimmedStatus(task.status) }}</div>
+        </div>
+      </div>
+    </div>
+  `, styles: ["\n    .active-tasks-panel {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      z-index: 1000;\n    }\n\n    .panel-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: #F9FAFB;\n      border-bottom: 1px solid #E5E7EB;\n      border-radius: 8px 8px 0 0;\n      cursor: pointer;\n      font-weight: 600;\n      font-size: 14px;\n      color: #111827;\n      transition: background 150ms ease;\n    }\n\n    .panel-header:hover {\n      background: #F3F4F6;\n    }\n\n    .panel-header i:first-child {\n      color: #0076B6;\n    }\n\n    .panel-header span {\n      flex: 1;\n    }\n\n    .panel-header i:last-child {\n      color: #6B7280;\n      font-size: 12px;\n    }\n\n    .panel-content {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item {\n      padding: 12px 16px;\n      border-bottom: 1px solid #F3F4F6;\n    }\n\n    .task-item:last-child {\n      border-bottom: none;\n    }\n\n    .task-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header i {\n      color: #0076B6;\n      font-size: 14px;\n    }\n\n    .task-agent {\n      flex: 1;\n      font-weight: 600;\n      color: #111827;\n      font-size: 14px;\n    }\n\n    .task-elapsed {\n      font-size: 12px;\n      color: #6B7280;\n      font-weight: 500;\n    }\n\n    .task-status {\n      font-size: 13px;\n      color: #6B7280;\n      padding-left: 22px;\n    }\n  "] }]
+    }], () => [{ type: i1.ActiveTasksService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActiveTasksPanelComponent, { className: "ActiveTasksPanelComponent", filePath: "src/lib/components/active-tasks/active-tasks-panel.component.ts", lineNumber: 122 }); })();
+//# sourceMappingURL=active-tasks-panel.component.js.map

package/dist/lib/components/active-tasks/active-tasks-panel.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-tasks-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;IAoBhC,AADF,8BAA6D,aAClC;IACvB,wBAA2C;IAC3C,gCAAyB;IAAA,YAAoB;IAAA,iBAAO;IACpD,gCAA2B;IAAA,YAA0B;IACvD,AADuD,iBAAO,EACxD;IACN,+BAAyB;IAAA,YAAmC;IAC9D,AAD8D,iBAAM,EAC9D;;;;IAJuB,eAAoB;IAApB,uCAAoB;IAClB,eAA0B;IAA1B,oDAA0B;IAE9B,eAAmC;IAAnC,6DAAmC;;;IAPhE,8BAA8C;IAC5C,sFAA6D;;IAQ/D,iBAAM;;;IARoC,cAAmB;IAAnB,6DAAmB;;;;IAP7D,AADF,8BAAkE,aACX;IAA3B,kLAAS,uBAAgB,KAAC;IAClD,uBAA4B;IAC5B,4BAAM;IAAA,YAAuC;;IAAA,iBAAO;IACpD,uBAAgF;IAClF,iBAAM;IAEN,gFAA8C;IAUhD,iBAAM;;;IAdI,eAAuC;IAAvC,qFAAuC;IAC9B,eAA4D;IAA5D,iFAA4D;IAGjD,cAAgB;IAAhB,wCAAgB;;AAdlD;;;GAGG;AAkHH,MAAM,OAAO,yBAAyB;IAKhB;IAJpB,MAAM,CAA2B;IACjC,UAAU,CAAqB;IAC/B,UAAU,GAAG,IAAI,CAAC;IAElB,YAAoB,kBAAsC;QAAtC,uBAAkB,GAAlB,kBAAkB,CAAoB;QACxD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC;IACvD,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,cAAc,CAAC,IAAgB;QAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;QAE3C,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;YACjB,OAAO,GAAG,OAAO,GAAG,CAAC;QACvB,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;QACzC,MAAM,gBAAgB,GAAG,OAAO,GAAG,EAAE,CAAC;QACtC,OAAO,GAAG,OAAO,IAAI,gBAAgB,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IACtE,CAAC;IAED,gBAAgB,CAAC,MAAc;QAC7B,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,IAAI,MAAM,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC;YAC/B,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;IAChD,CAAC;mFAjCU,yBAAyB;6DAAzB,yBAAyB;YA9GlC,0EAAkE;;;YAAjC,+DAA+B;;;iFA8GvD,yBAAyB;cAjHrC,SAAS;2BACE,uBAAuB,YACvB;;;;;;;;;;;;;;;;;;;GAmBT;;kFA4FU,yBAAyB"}

package/dist/lib/components/agent/active-agent-indicator.component.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { UserInfo } from '@memberjunction/core';
+import { AIAgentRunEntity } from '@memberjunction/core-entities';
+import { AgentStateService, AgentStatus } from '../../services/agent-state.service';
+import * as i0 from "@angular/core";
+/**
+ * Displays active agent indicators in the chat header with status animations
+ * Shows multiple agents with avatars, status colors, and click-to-expand functionality
+ */
+export declare class ActiveAgentIndicatorComponent implements OnInit, OnDestroy {
+    private agentStateService;
+    conversationId?: string;
+    currentUser: UserInfo;
+    maxVisibleAgents: number;
+    togglePanel: EventEmitter<void>;
+    agentSelected: EventEmitter<AIAgentRunEntity>;
+    activeAgents: Array<{
+        run: AIAgentRunEntity;
+        status: AgentStatus;
+        confidence: number | null;
+    }>;
+    isExpanded: boolean;
+    private subscription?;
+    constructor(agentStateService: AgentStateService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get displayAgents(): Array<{
+        run: AIAgentRunEntity;
+        status: AgentStatus;
+        confidence: number | null;
+    }>;
+    getAgentTooltip(agent: {
+        run: AIAgentRunEntity;
+        status: AgentStatus;
+        confidence: number | null;
+    }): string;
+    getStatusText(status: AgentStatus): string;
+    toggleExpanded(): void;
+    onAgentClick(agent: {
+        run: AIAgentRunEntity;
+        status: AgentStatus;
+        confidence: number | null;
+    }): void;
+    onTogglePanel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActiveAgentIndicatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActiveAgentIndicatorComponent, "mj-active-agent-indicator", never, { "conversationId": { "alias": "conversationId"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "maxVisibleAgents": { "alias": "maxVisibleAgents"; "required": false; }; }, { "togglePanel": "togglePanel"; "agentSelected": "agentSelected"; }, never, never, false, never>;
+}
+//# sourceMappingURL=active-agent-indicator.component.d.ts.map

package/dist/lib/components/agent/active-agent-indicator.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-agent-indicator.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/agent/active-agent-indicator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;;AAGpF;;;GAGG;AACH,qBA4Oa,6BAA8B,YAAW,MAAM,EAAE,SAAS;IAazD,OAAO,CAAC,iBAAiB;IAZ5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,EAAG,QAAQ,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAK;IAE5B,WAAW,qBAA4B;IACvC,aAAa,iCAAwC;IAExD,YAAY,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,gBAAgB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAM;IACpG,UAAU,EAAE,OAAO,CAAS;IAEnC,OAAO,CAAC,YAAY,CAAC,CAAe;gBAEhB,iBAAiB,EAAE,iBAAiB;IAExD,QAAQ,IAAI,IAAI;IAShB,WAAW,IAAI,IAAI;IAInB,IAAI,aAAa,IAAI,KAAK,CAAC;QAAE,GAAG,EAAE,gBAAgB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAKpG;IAED,eAAe,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,gBAAgB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,MAAM;IAQzG,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM;IAW1C,cAAc,IAAI,IAAI;IAItB,YAAY,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,gBAAgB,CAAC;QAAC,MAAM,EAAE,WAAW,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI;IAIpG,aAAa,IAAI,IAAI;yCA9DV,6BAA6B;2CAA7B,6BAA6B;CAiEzC"}

package/dist/lib/components/agent/active-agent-indicator.component.js

@@ -0,0 +1,199 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/agent-state.service";
+import * as i2 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.run.ID;
+function ActiveAgentIndicatorComponent_div_0_For_5_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelement(1, "div", 15);
+    i0.ɵɵelementEnd();
+} }
+function ActiveAgentIndicatorComponent_div_0_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const agent_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", "Confidence: " + (agent_r3.confidence * 100).toFixed(0) + "%");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", (agent_r3.confidence * 100).toFixed(0), "% ");
+} }
+function ActiveAgentIndicatorComponent_div_0_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵlistener("click", function ActiveAgentIndicatorComponent_div_0_For_5_Template_div_click_0_listener() { const agent_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onAgentClick(agent_r3)); });
+    i0.ɵɵelementStart(1, "div", 10);
+    i0.ɵɵelement(2, "i", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, ActiveAgentIndicatorComponent_div_0_For_5_div_3_Template, 2, 0, "div", 12)(4, ActiveAgentIndicatorComponent_div_0_For_5_Conditional_4_Template, 2, 2, "div", 13);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const agent_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("status-acknowledging", agent_r3.status === "acknowledging")("status-working", agent_r3.status === "working")("status-completing", agent_r3.status === "completing")("status-completed", agent_r3.status === "completed")("status-error", agent_r3.status === "error");
+    i0.ɵɵproperty("title", ctx_r3.getAgentTooltip(agent_r3));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", agent_r3.status !== "completed");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(agent_r3.confidence != null ? 4 : -1);
+} }
+function ActiveAgentIndicatorComponent_div_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function ActiveAgentIndicatorComponent_div_0_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.toggleExpanded()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", "Show all " + ctx_r3.activeAgents.length + " agents");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" +", ctx_r3.activeAgents.length - ctx_r3.maxVisibleAgents, " ");
+} }
+function ActiveAgentIndicatorComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "span", 2);
+    i0.ɵɵtext(2, "Active:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 3);
+    i0.ɵɵrepeaterCreate(4, ActiveAgentIndicatorComponent_div_0_For_5_Template, 5, 13, "div", 4, _forTrack0);
+    i0.ɵɵtemplate(6, ActiveAgentIndicatorComponent_div_0_Conditional_6_Template, 2, 2, "button", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 6);
+    i0.ɵɵlistener("click", function ActiveAgentIndicatorComponent_div_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onTogglePanel()); });
+    i0.ɵɵelement(8, "i", 7);
+    i0.ɵɵelementStart(9, "span", 8);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("expanded", ctx_r3.isExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r3.displayAgents);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r3.activeAgents.length > ctx_r3.maxVisibleAgents && !ctx_r3.isExpanded ? 6 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r3.activeAgents.length);
+} }
+/**
+ * Displays active agent indicators in the chat header with status animations
+ * Shows multiple agents with avatars, status colors, and click-to-expand functionality
+ */
+export class ActiveAgentIndicatorComponent {
+    agentStateService;
+    conversationId;
+    currentUser;
+    maxVisibleAgents = 3;
+    togglePanel = new EventEmitter();
+    agentSelected = new EventEmitter();
+    activeAgents = [];
+    isExpanded = false;
+    subscription;
+    constructor(agentStateService) {
+        this.agentStateService = agentStateService;
+    }
+    ngOnInit() {
+        // Subscribe to active agents for this conversation
+        this.subscription = this.agentStateService
+            .getActiveAgents(this.conversationId)
+            .subscribe(agents => {
+            this.activeAgents = agents;
+        });
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    get displayAgents() {
+        if (this.isExpanded) {
+            return this.activeAgents;
+        }
+        return this.activeAgents.slice(0, this.maxVisibleAgents);
+    }
+    getAgentTooltip(agent) {
+        const statusText = this.getStatusText(agent.status);
+        const confidenceText = agent.confidence != null
+            ? ` (Confidence: ${(agent.confidence * 100).toFixed(0)}%)`
+            : '';
+        return `${agent.run.Agent || 'Agent'} - ${statusText}${confidenceText}`;
+    }
+    getStatusText(status) {
+        switch (status) {
+            case 'acknowledging': return 'Acknowledging request';
+            case 'working': return 'Working on task';
+            case 'completing': return 'Completing';
+            case 'completed': return 'Completed';
+            case 'error': return 'Error occurred';
+            default: return 'Active';
+        }
+    }
+    toggleExpanded() {
+        this.isExpanded = !this.isExpanded;
+    }
+    onAgentClick(agent) {
+        this.agentSelected.emit(agent.run);
+    }
+    onTogglePanel() {
+        this.togglePanel.emit();
+    }
+    static ɵfac = function ActiveAgentIndicatorComponent_Factory(t) { return new (t || ActiveAgentIndicatorComponent)(i0.ɵɵdirectiveInject(i1.AgentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActiveAgentIndicatorComponent, selectors: [["mj-active-agent-indicator"]], inputs: { conversationId: "conversationId", currentUser: "currentUser", maxVisibleAgents: "maxVisibleAgents" }, outputs: { togglePanel: "togglePanel", agentSelected: "agentSelected" }, decls: 1, vars: 1, consts: [["class", "active-agents-container", 4, "ngIf"], [1, "active-agents-container"], [1, "active-agents-label"], [1, "agents-wrapper"], [1, "agent-avatar", 3, "status-acknowledging", "status-working", "status-completing", "status-completed", "status-error", "title"], [1, "more-agents", 3, "title"], ["title", "Open agent process panel", 1, "panel-toggle", 3, "click"], [1, "fas", "fa-chart-line"], [1, "agent-count"], [1, "agent-avatar", 3, "click", "title"], [1, "avatar-content"], [1, "fas", "fa-robot"], ["class", "status-indicator", 4, "ngIf"], [1, "confidence-badge", 3, "title"], [1, "status-indicator"], [1, "pulse-ring"], [1, "more-agents", 3, "click", "title"]], template: function ActiveAgentIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ActiveAgentIndicatorComponent_div_0_Template, 11, 4, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.activeAgents.length > 0);
+        } }, dependencies: [i2.NgIf], styles: [".active-agents-container[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 12px;\n      background-color: #F4F4F4;\n      border-radius: 20px;\n      font-size: 12px;\n      color: #6B7280;\n      height: 32px;\n    }\n\n    .active-agents-label[_ngcontent-%COMP%] {\n      font-weight: 500;\n      color: #6B7280;\n    }\n\n    .agents-wrapper[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      max-width: 200px;\n      overflow: hidden;\n      transition: max-width 300ms ease;\n    }\n\n    .agents-wrapper.expanded[_ngcontent-%COMP%] {\n      max-width: 600px;\n    }\n\n    .agent-avatar[_ngcontent-%COMP%] {\n      position: relative;\n      width: 24px;\n      height: 24px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n      font-size: 10px;\n      font-weight: 600;\n    }\n\n    .agent-avatar[_ngcontent-%COMP%]:hover {\n      transform: scale(1.1);\n    }\n\n    .avatar-content[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      color: white;\n      position: relative;\n      z-index: 1;\n    }\n\n    \n\n    .status-acknowledging[_ngcontent-%COMP%]   .avatar-content[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #3B82F6, #2563EB);\n    }\n\n    .status-working[_ngcontent-%COMP%]   .avatar-content[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #F59E0B, #D97706);\n    }\n\n    .status-completing[_ngcontent-%COMP%]   .avatar-content[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #10B981, #059669);\n    }\n\n    .status-completed[_ngcontent-%COMP%]   .avatar-content[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #6B7280, #4B5563);\n      opacity: 0.6;\n    }\n\n    .status-error[_ngcontent-%COMP%]   .avatar-content[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #EF4444, #DC2626);\n    }\n\n    \n\n    .status-indicator[_ngcontent-%COMP%] {\n      position: absolute;\n      top: -2px;\n      right: -2px;\n      width: 10px;\n      height: 10px;\n      z-index: 2;\n    }\n\n    .pulse-ring[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: currentColor;\n      animation: _ngcontent-%COMP%_pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-acknowledging[_ngcontent-%COMP%]   .pulse-ring[_ngcontent-%COMP%] {\n      background: #3B82F6;\n    }\n\n    .status-working[_ngcontent-%COMP%]   .pulse-ring[_ngcontent-%COMP%] {\n      background: #F59E0B;\n      animation: _ngcontent-%COMP%_pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-completing[_ngcontent-%COMP%]   .pulse-ring[_ngcontent-%COMP%] {\n      background: #10B981;\n      animation: _ngcontent-%COMP%_pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0%, 100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      50% {\n        opacity: 0.5;\n        transform: scale(1.5);\n      }\n    }\n\n    \n\n    .confidence-badge[_ngcontent-%COMP%] {\n      position: absolute;\n      bottom: -4px;\n      right: -4px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 4px;\n      padding: 1px 3px;\n      font-size: 9px;\n      font-weight: 600;\n      color: #374151;\n      z-index: 3;\n      line-height: 1;\n    }\n\n    .more-agents[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      background: #E5E7EB;\n      border: none;\n      color: #6B7280;\n      font-size: 11px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n    }\n\n    .more-agents[_ngcontent-%COMP%]:hover {\n      background: #D1D5DB;\n      transform: scale(1.05);\n    }\n\n    .panel-toggle[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 6px 10px;\n      background: #3B82F6;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 200ms ease;\n      position: relative;\n    }\n\n    .panel-toggle[_ngcontent-%COMP%]:hover {\n      background: #2563EB;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\n    }\n\n    .agent-count[_ngcontent-%COMP%] {\n      background: rgba(255, 255, 255, 0.2);\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-weight: 600;\n      min-width: 20px;\n      text-align: center;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActiveAgentIndicatorComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-active-agent-indicator', template: `
+    <div class="active-agents-container" *ngIf="activeAgents.length > 0">
+      <span class="active-agents-label">Active:</span>
+      <div class="agents-wrapper" [class.expanded]="isExpanded">
+        @for (agent of displayAgents; track agent.run.ID) {
+          <div class="agent-avatar"
+               [class.status-acknowledging]="agent.status === 'acknowledging'"
+               [class.status-working]="agent.status === 'working'"
+               [class.status-completing]="agent.status === 'completing'"
+               [class.status-completed]="agent.status === 'completed'"
+               [class.status-error]="agent.status === 'error'"
+               [title]="getAgentTooltip(agent)"
+               (click)="onAgentClick(agent)">
+            <div class="avatar-content">
+              <i class="fas fa-robot"></i>
+            </div>
+            <div class="status-indicator" *ngIf="agent.status !== 'completed'">
+              <div class="pulse-ring"></div>
+            </div>
+            @if (agent.confidence != null) {
+              <div class="confidence-badge" [title]="'Confidence: ' + (agent.confidence * 100).toFixed(0) + '%'">
+                {{ (agent.confidence * 100).toFixed(0) }}%
+              </div>
+            }
+          </div>
+        }
+
+        @if (activeAgents.length > maxVisibleAgents && !isExpanded) {
+          <button class="more-agents" (click)="toggleExpanded()" [title]="'Show all ' + activeAgents.length + ' agents'">
+            +{{ activeAgents.length - maxVisibleAgents }}
+          </button>
+        }
+      </div>
+
+      <button class="panel-toggle" (click)="onTogglePanel()" title="Open agent process panel">
+        <i class="fas fa-chart-line"></i>
+        <span class="agent-count">{{ activeAgents.length }}</span>
+      </button>
+    </div>
+  `, styles: ["\n    .active-agents-container {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 12px;\n      background-color: #F4F4F4;\n      border-radius: 20px;\n      font-size: 12px;\n      color: #6B7280;\n      height: 32px;\n    }\n\n    .active-agents-label {\n      font-weight: 500;\n      color: #6B7280;\n    }\n\n    .agents-wrapper {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      max-width: 200px;\n      overflow: hidden;\n      transition: max-width 300ms ease;\n    }\n\n    .agents-wrapper.expanded {\n      max-width: 600px;\n    }\n\n    .agent-avatar {\n      position: relative;\n      width: 24px;\n      height: 24px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n      font-size: 10px;\n      font-weight: 600;\n    }\n\n    .agent-avatar:hover {\n      transform: scale(1.1);\n    }\n\n    .avatar-content {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      color: white;\n      position: relative;\n      z-index: 1;\n    }\n\n    /* Status-based colors */\n    .status-acknowledging .avatar-content {\n      background: linear-gradient(135deg, #3B82F6, #2563EB);\n    }\n\n    .status-working .avatar-content {\n      background: linear-gradient(135deg, #F59E0B, #D97706);\n    }\n\n    .status-completing .avatar-content {\n      background: linear-gradient(135deg, #10B981, #059669);\n    }\n\n    .status-completed .avatar-content {\n      background: linear-gradient(135deg, #6B7280, #4B5563);\n      opacity: 0.6;\n    }\n\n    .status-error .avatar-content {\n      background: linear-gradient(135deg, #EF4444, #DC2626);\n    }\n\n    /* Animated status indicator */\n    .status-indicator {\n      position: absolute;\n      top: -2px;\n      right: -2px;\n      width: 10px;\n      height: 10px;\n      z-index: 2;\n    }\n\n    .pulse-ring {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: currentColor;\n      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-acknowledging .pulse-ring {\n      background: #3B82F6;\n    }\n\n    .status-working .pulse-ring {\n      background: #F59E0B;\n      animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    .status-completing .pulse-ring {\n      background: #10B981;\n      animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      50% {\n        opacity: 0.5;\n        transform: scale(1.5);\n      }\n    }\n\n    /* Confidence badge */\n    .confidence-badge {\n      position: absolute;\n      bottom: -4px;\n      right: -4px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 4px;\n      padding: 1px 3px;\n      font-size: 9px;\n      font-weight: 600;\n      color: #374151;\n      z-index: 3;\n      line-height: 1;\n    }\n\n    .more-agents {\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      background: #E5E7EB;\n      border: none;\n      color: #6B7280;\n      font-size: 11px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 200ms ease;\n      flex-shrink: 0;\n    }\n\n    .more-agents:hover {\n      background: #D1D5DB;\n      transform: scale(1.05);\n    }\n\n    .panel-toggle {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 6px 10px;\n      background: #3B82F6;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 200ms ease;\n      position: relative;\n    }\n\n    .panel-toggle:hover {\n      background: #2563EB;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\n    }\n\n    .agent-count {\n      background: rgba(255, 255, 255, 0.2);\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-weight: 600;\n      min-width: 20px;\n      text-align: center;\n    }\n  "] }]
+    }], () => [{ type: i1.AgentStateService }], { conversationId: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], maxVisibleAgents: [{
+            type: Input
+        }], togglePanel: [{
+            type: Output
+        }], agentSelected: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActiveAgentIndicatorComponent, { className: "ActiveAgentIndicatorComponent", filePath: "src/lib/components/agent/active-agent-indicator.component.ts", lineNumber: 247 }); })();
+//# sourceMappingURL=active-agent-indicator.component.js.map

package/dist/lib/components/agent/active-agent-indicator.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"active-agent-indicator.component.js","sourceRoot":"","sources":["../../../../src/lib/components/agent/active-agent-indicator.component.ts"],"names":[],"mappings":"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"}