@memberjunction/ng-conversations 3.4.0 → 4.1.0

package/README.md

@@ -1,197 +1,329 @@
 # @memberjunction/ng-conversations
 
-Angular package for conversation, collection, and artifact management built on MemberJunction.
+A comprehensive Angular component library for building conversation-based interfaces in MemberJunction, including messaging, artifact management, collections, projects, tasks, agent interaction panels, and collaboration features.
+
+## Overview
+
+The `@memberjunction/ng-conversations` package is a large, feature-rich module that powers MemberJunction's conversation UI. It provides 40+ components covering the entire conversation lifecycle: message composition and rendering (with markdown, mentions, code blocks, and artifacts), conversation navigation and history, threaded discussions, artifact collections and libraries, project/task management, agent execution panels, sharing/permission modals, search, notifications, and export.
+
+```mermaid
+graph TD
+    A[ConversationsModule] --> B[Messaging]
+    A --> C[Navigation]
+    A --> D[Collections & Library]
+    A --> E[Agent & Tasks]
+    A --> F[Collaboration]
+
+    B --> B1[MessageItemComponent]
+    B --> B2[MessageListComponent]
+    B --> B3[MessageInputComponent]
+    B --> B4[MentionEditorComponent]
+    B --> B5[SuggestedResponsesComponent]
+    B --> B6[ConversationMessageRatingComponent]
+
+    C --> C1[ConversationWorkspaceComponent]
+    C --> C2[ConversationNavigationComponent]
+    C --> C3[ConversationSidebarComponent]
+    C --> C4[ConversationListComponent]
+    C --> C5[ConversationChatAreaComponent]
+    C --> C6[ThreadPanelComponent]
+
+    D --> D1[CollectionTreeComponent]
+    D --> D2[CollectionViewComponent]
+    D --> D3[LibraryFullViewComponent]
+    D --> D4[ArtifactCreateModalComponent]
+
+    E --> E1[AgentProcessPanelComponent]
+    E --> E2[ActiveAgentIndicatorComponent]
+    E --> E3[TasksFullViewComponent]
+    E --> E4[GlobalTasksPanelComponent]
+
+    F --> F1[ShareModalComponent]
+    F --> F2[MembersModalComponent]
+    F --> F3[ExportModalComponent]
+    F --> F4[SearchPanelComponent]
+
+    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
+    style B fill:#7c5295,stroke:#563a6b,color:#fff
+    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
+    style D fill:#b8762f,stroke:#8a5722,color:#fff
+    style E fill:#7c5295,stroke:#563a6b,color:#fff
+    style F fill:#2d8659,stroke:#1a5c3a,color:#fff
+```
+
+## Installation
 
-## Status: Foundation Complete ✅
+```bash
+npm install @memberjunction/ng-conversations
+```
 
-This package provides the core infrastructure for building Slack-style conversation interfaces with artifacts and collections. The initial implementation includes:
+## Usage
 
-### ✅ Completed
+### Import the Module
 
-#### 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
+```typescript
+import { ConversationsModule } from '@memberjunction/ng-conversations';
 
-#### Components
-- **MessageItemComponent** - Individual message display with dynamic rendering
-- **MessageListComponent** - Efficient message list using ViewContainerRef.createComponent()
+@NgModule({
+  imports: [ConversationsModule]
+})
+export class YourModule { }
+```
 
-#### Models
-- TypeScript interfaces for all state management types
-- Union types for navigation tabs, layouts, and view modes
+### Full Conversation Workspace
 
-### 🎯 Key Features
+The top-level workspace component provides a complete conversation experience with sidebar, chat area, and thread panel:
 
-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
+```html
+<mj-conversation-workspace
+  [conversationId]="selectedConversationId"
+  (conversationChanged)="onConversationChanged($event)">
+</mj-conversation-workspace>
+```
 
-2. **MJ Entity Integration**
-   - All services use Metadata.GetEntityObject() pattern
-   - RunView for efficient data loading
-   - Proper type safety with generic methods
+### Chat Area
 
-3. **Reactive State Management**
-   - RxJS BehaviorSubjects for all state
-   - Derived observables using combineLatest
-   - shareReplay(1) for efficient caching
+The chat area handles message display, input, and agent interactions:
 
-4. **Proper User Context**
-   - All server-side operations include contextUser parameter
-   - Follows MJ security patterns
+```html
+<mj-conversation-chat-area
+  [conversationId]="conversationId"
+  [conversation]="conversation"
+  [threadId]="selectedThreadId"
+  [isNewConversation]="isNewConversation"
+  (conversationCreated)="onConversationCreated($event)"
+  (threadOpened)="onThreadOpened($event)"
+  (threadClosed)="onThreadClosed()">
+</mj-conversation-chat-area>
+```
 
-### 📦 Installation
+### Message Components
 
-This package is part of the MemberJunction monorepo. It's installed via npm workspaces:
+#### Message List
 
-```bash
-# From repo root
-npm install
+```html
+<mj-message-list
+  [messages]="conversationMessages"
+  [isLoading]="isLoadingMessages"
+  (messageRated)="onMessageRated($event)">
+</mj-message-list>
 ```
 
-### 🔧 Usage Example
+#### Message Input with Mentions
 
-```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);
-  });
-}
+```html
+<mj-message-input
+  [conversationId]="conversationId"
+  [allowSend]="!isProcessing"
+  (messageSent)="onMessageSent($event)">
+</mj-message-input>
 ```
 
-### 📁 Package Structure
+#### Mention Editor
 
+```html
+<mj-mention-editor
+  [mentionSources]="availableMentionSources"
+  (mentionSelected)="onMentionSelected($event)">
+</mj-mention-editor>
 ```
-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:
+### Collections and Library
 
-1. **Layout Components**
-   - ConversationWorkspaceComponent (3-column layout)
-   - ConversationNavigationComponent (top nav bar)
-   - ConversationSidebarComponent (left sidebar with tabs)
+```html
+<!-- Collection tree for organizing artifacts -->
+<mj-collection-tree
+  [projectId]="currentProjectId"
+  (collectionSelected)="onCollectionSelected($event)">
+</mj-collection-tree>
 
-2. **Conversation Components**
-   - ConversationListComponent (with grouping/filtering)
-   - ConversationItemComponent (list item with badges)
-   - ConversationChatAreaComponent (main chat interface)
-   - MessageInputComponent (rich text input)
+<!-- Full library view -->
+<mj-library-full-view
+  [projectId]="currentProjectId">
+</mj-library-full-view>
+```
 
-3. **Artifact Components**
-   - ArtifactPanelComponent (right panel)
-   - ArtifactViewerComponent (type-specific rendering)
-   - ArtifactEditorComponent (edit mode)
-   - ArtifactVersionHistoryComponent (version timeline)
-   - ArtifactShareModalComponent (sharing UI)
+### Project and Task Management
 
-4. **Collection Components**
-   - CollectionTreeComponent (hierarchical tree)
-   - CollectionViewComponent (grid/list view)
-   - CollectionModalComponent (management UI)
+```html
+<!-- Project selector -->
+<mj-project-selector
+  [currentProjectId]="projectId"
+  (projectChanged)="onProjectChanged($event)">
+</mj-project-selector>
 
-5. **Project & Task Components**
-   - ProjectListComponent
-   - ProjectSelectorComponent
-   - TaskListComponent
-   - TaskItemComponent
-   - AgentProcessPanelComponent (floating panel)
+<!-- Tasks view -->
+<mj-tasks-full-view
+  [projectId]="currentProjectId">
+</mj-tasks-full-view>
+```
 
-6. **Explorer Integration**
-   - Add `/chat` route to explorer-core
-   - Create wrapper components
-   - Integrate with Explorer navigation
+### Agent Components
 
-### 🧪 Testing
+```html
+<!-- Agent execution panel -->
+<mj-agent-process-panel
+  [agentRunId]="activeRunId">
+</mj-agent-process-panel>
 
-```bash
-# Compile the package
-cd packages/Angular/Generic/conversations
-npm run build
+<!-- Active agent indicator -->
+<mj-active-agent-indicator
+  [isActive]="agentIsRunning">
+</mj-active-agent-indicator>
+```
 
-# Run from repo root
-npm run build:conversations
+### Collaboration
+
+```html
+<!-- Share modal -->
+<mj-share-modal
+  [visible]="showShareModal"
+  [resourceId]="resourceId"
+  [resourceType]="'conversation'"
+  (closed)="onShareClosed()">
+</mj-share-modal>
+
+<!-- Export modal -->
+<mj-export-modal
+  [visible]="showExportModal"
+  [conversationId]="conversationId"
+  (exported)="onExported($event)">
+</mj-export-modal>
 ```
 
-### 📝 Notes
+## Component Reference
 
-- **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.
+### Messaging Components
+
+| Component | Selector | Description |
+|-----------|----------|-------------|
+| `MessageItemComponent` | `mj-message-item` | Single message display with markdown, artifacts, and rating |
+| `MessageListComponent` | `mj-message-list` | Scrollable message list with auto-scroll |
+| `MessageInputComponent` | `mj-message-input` | Message input with attachment support |
+| `MessageInputBoxComponent` | `mj-message-input-box` | Core input box with auto-resize |
+| `SuggestedResponsesComponent` | `mj-suggested-responses` | Quick response buttons |
+| `FormQuestionComponent` | `mj-form-question` | Structured form input within conversations |
+| `AgentResponseFormComponent` | `mj-agent-response-form` | Agent-generated form responses |
+| `ActionableCommandsComponent` | `mj-actionable-commands` | Clickable command suggestions |
+| `MentionDropdownComponent` | `mj-mention-dropdown` | @-mention autocomplete dropdown |
+| `MentionEditorComponent` | `mj-mention-editor` | Rich text input with mention support |
+| `ConversationMessageRatingComponent` | `mj-conversation-message-rating` | Message feedback (thumbs up/down) |
+
+### Navigation Components
+
+| Component | Selector | Description |
+|-----------|----------|-------------|
+| `ConversationWorkspaceComponent` | `mj-conversation-workspace` | Full workspace layout |
+| `ConversationNavigationComponent` | `mj-conversation-navigation` | Top-level navigation |
+| `ConversationSidebarComponent` | `mj-conversation-sidebar` | Left sidebar with conversation list |
+| `ConversationListComponent` | `mj-conversation-list` | Scrollable conversation history |
+| `ConversationChatAreaComponent` | `mj-conversation-chat-area` | Main chat area |
+| `ConversationEmptyStateComponent` | `mj-conversation-empty-state` | Empty state display |
+| `ThreadPanelComponent` | `mj-thread-panel` | Threaded discussion panel |
+
+### Collection and Library Components
+
+| Component | Selector | Description |
+|-----------|----------|-------------|
+| `CollectionTreeComponent` | `mj-collection-tree` | Hierarchical collection browser |
+| `CollectionViewComponent` | `mj-collection-view` | Collection detail view |
+| `CollectionArtifactCardComponent` | `mj-collection-artifact-card` | Artifact card within collections |
+| `LibraryFullViewComponent` | `mj-library-full-view` | Full library interface |
+| `CollectionFormModalComponent` | `mj-collection-form-modal` | Create/edit collection |
+| `ArtifactCreateModalComponent` | `mj-artifact-create-modal` | Create new artifact |
+| `CollectionsFullViewComponent` | `mj-collections-full-view` | All collections browser |
+
+### Project and Task Components
+
+| Component | Selector | Description |
+|-----------|----------|-------------|
+| `ProjectSelectorComponent` | `mj-project-selector` | Project selection dropdown |
+| `ProjectFormModalComponent` | `mj-project-form-modal` | Create/edit project |
+| `TasksFullViewComponent` | `mj-tasks-full-view` | Full tasks management view (standalone) |
+| `TasksDropdownComponent` | `mj-tasks-dropdown` | Task quick-access dropdown |
+| `TaskWidgetComponent` | `mj-task-widget` | Compact task widget |
+| `GlobalTasksPanelComponent` | `mj-global-tasks-panel` | Global tasks panel |
+
+### Agent Components
+
+| Component | Selector | Description |
+|-----------|----------|-------------|
+| `AgentProcessPanelComponent` | `mj-agent-process-panel` | Agent execution panel |
+| `ActiveAgentIndicatorComponent` | `mj-active-agent-indicator` | Active processing indicator |
+| `ActiveTasksPanelComponent` | `mj-active-tasks-panel` | Active tasks panel |
+
+### Utility Components
+
+| Component | Selector | Description |
+|-----------|----------|-------------|
+| `ShareModalComponent` | `mj-share-modal` | Resource sharing modal |
+| `MembersModalComponent` | `mj-members-modal` | Members management |
+| `ExportModalComponent` | `mj-export-modal` | Data export modal |
+| `SearchPanelComponent` | `mj-search-panel` | Search across conversations |
+| `NotificationBadgeComponent` | `mj-notification-badge` | Unread notification count |
+| `ActivityIndicatorComponent` | `mj-activity-indicator` | Active processing indicator |
+| `ToastComponent` | `mj-toast` | Toast notification display |
+| `InputDialogComponent` | `mj-input-dialog` | Generic text input dialog |
+| `ImageViewerComponent` | `mj-image-viewer` | Image attachment viewer |
+
+## Directives
+
+| Directive | Selector | Description |
+|-----------|----------|-------------|
+| `SearchShortcutDirective` | `[mjSearchShortcut]` | Keyboard shortcut for search |
+
+## Key Design Patterns
+
+### Performance Optimization
+
+Message components use dynamic component creation (`ViewContainerRef.createComponent`) instead of Angular template binding to minimize render cycles and improve performance with large message lists.
+
+### MJ Entity Integration
+
+All data operations use the MemberJunction entity system:
+- `Metadata.GetEntityObject()` for entity creation
+- `RunView` for efficient data loading
+- Proper generic typing throughout
+
+### Reactive State Management
+
+RxJS `BehaviorSubject` instances for all state, with derived observables using `combineLatest` and `shareReplay(1)` for efficient caching.
+
+## Dependencies
+
+### MemberJunction Packages
+
+| Package | Description |
+|---------|-------------|
+| `@memberjunction/core` | Core framework |
+| `@memberjunction/core-entities` | Entity type definitions |
+| `@memberjunction/global` | Global utilities |
+| `@memberjunction/graphql-dataprovider` | GraphQL data access |
+| `@memberjunction/ng-artifacts` | Artifact viewer components |
+| `@memberjunction/ng-code-editor` | Code editor component |
+| `@memberjunction/ng-container-directives` | Container directives |
+| `@memberjunction/ng-markdown` | Markdown rendering |
+| `@memberjunction/ng-shared-generic` | Shared generic components |
+| `@memberjunction/ng-testing` | Testing framework components |
 
-### 🔗 Dependencies
+### Kendo UI Packages
 
-- @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
-- @memberjunction/ng-markdown ^2.125.0
-- marked ^9.1.6
+Uses `@progress/kendo-angular-dialog`, `@progress/kendo-angular-buttons`, `@progress/kendo-angular-inputs`, `@progress/kendo-angular-layout`, `@progress/kendo-angular-indicators`, `@progress/kendo-angular-dropdowns`, `@progress/kendo-angular-notification`, `@progress/kendo-angular-upload`, `@progress/kendo-angular-dateinputs`.
 
-### 📚 References
+### Peer Dependencies
+
+- `@angular/common` ^21.x
+- `@angular/core` ^21.x
+- `@angular/forms` ^21.x
+- `@angular/router` ^21.x
 
-- 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/`
+## Build
+
+```bash
+cd packages/Angular/Generic/conversations
+npm run build
+```
 
----
+## License
 
-**Built with MemberJunction** | Version 2.101.0
+ISC

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

@@ -1 +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"}
+{"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,qBAuHa,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

@@ -2,16 +2,16 @@ 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);
+function ActiveTasksPanelComponent_Conditional_0_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
+    i0.ɵɵelement(2, "i", 7);
+    i0.ɵɵelementStart(3, "span", 8);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 12);
+    i0.ɵɵelementStart(5, "span", 9);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 13);
+    i0.ɵɵelementStart(7, "div", 10);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -24,28 +24,28 @@ function ActiveTasksPanelComponent_div_0_div_7_div_1_Template(rf, ctx) { if (rf
     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");
+function ActiveTasksPanelComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵrepeaterCreate(1, ActiveTasksPanelComponent_Conditional_0_Conditional_7_For_2_Template, 9, 3, "div", 5, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵpipe(3, "async");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, ctx_r1.tasks$));
+    i0.ɵɵrepeater(i0.ɵɵpipeBind1(3, 0, ctx_r1.tasks$));
 } }
-function ActiveTasksPanelComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+function ActiveTasksPanelComponent_Conditional_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(0, "div", 0)(1, "div", 1);
+    i0.ɵɵlistener("click", function ActiveTasksPanelComponent_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleExpanded()); });
+    i0.ɵɵelement(2, "i", 2);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "async");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "i", 4);
+    i0.ɵɵelement(6, "i", 3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, ActiveTasksPanelComponent_div_0_div_7_Template, 3, 3, "div", 5);
+    i0.ɵɵconditionalCreate(7, ActiveTasksPanelComponent_Conditional_0_Conditional_7_Template, 4, 2, "div", 4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -54,7 +54,7 @@ function ActiveTasksPanelComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.isExpanded ? "fa-chevron-up" : "fa-chevron-down");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.isExpanded);
+    i0.ɵɵconditional(ctx_r1.isExpanded ? 7 : -1);
 } }
 /**
  * Panel component that displays currently running agent tasks.
@@ -91,35 +91,40 @@ export class ActiveTasksPanelComponent {
         return status.substring(0, maxLength) + '...';
     }
     static ɵfac = function ActiveTasksPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || 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);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActiveTasksPanelComponent, selectors: [["mj-active-tasks-panel"]], standalone: false, decls: 2, vars: 3, consts: [[1, "active-tasks-panel"], [1, "panel-header", 3, "click"], [1, "fas", "fa-tasks"], [1, "fas", 3, "ngClass"], [1, "panel-content"], [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.ɵɵconditionalCreate(0, ActiveTasksPanelComponent_Conditional_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    }"] });
+            i0.ɵɵconditional(i0.ɵɵpipeBind1(1, 1, ctx.taskCount$) > 0 ? 0 : -1);
+        } }, dependencies: [i2.NgClass, 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>
+        args: [{ standalone: false, selector: 'mj-active-tasks-panel', template: `
+    @if ((taskCount$ | async)! > 0) {
+      <div class="active-tasks-panel">
+        <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>
+        @if (isExpanded) {
+          <div class="panel-content">
+            @for (task of (tasks$ | async); track task) {
+              <div class="task-item">
+                <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>
-    </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  "] }]
+    }
+    `, 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActiveTasksPanelComponent, { className: "ActiveTasksPanelComponent", filePath: "src/lib/components/active-tasks/active-tasks-panel.component.ts", lineNumber: 128 }); })();
 //# sourceMappingURL=active-tasks-panel.component.js.map

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

@@ -1 +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;mHAjCU,yBAAyB;6DAAzB,yBAAyB;YA9GlC,0EAAkE;;;YAAjC,+DAA+B;;;iFA8GvD,yBAAyB;cAjHrC,SAAS;2BACE,uBAAuB,YACvB;;;;;;;;;;;;;;;;;;;GAmBT;;kFA4FU,yBAAyB"}
+{"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;;;;;IAuB1B,AADF,8BAAuB,aACI;IACvB,uBAA2C;IAC3C,+BAAyB;IAAA,YAAoB;IAAA,iBAAO;IACpD,+BAA2B;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;;;IARlE,8BAA2B;IACzB,0IASC;;IACH,iBAAM;;;IAVJ,cASC;IATD,kDASC;;;;IAhBL,AADF,8BAAgC,aACuB;IAA3B,0LAAS,uBAAgB,KAAC;IAClD,uBAA4B;IAC5B,4BAAM;IAAA,YAAuC;;IAAA,iBAAO;IACpD,uBAAgF;IAClF,iBAAM;IACN,yGAAkB;IAcpB,iBAAM;;;IAjBI,eAAuC;IAAvC,qFAAuC;IAC9B,eAA4D;IAA5D,iFAA4D;IAE7E,cAaC;IAbD,4CAaC;;AA5BT;;;GAGG;AAwHH,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;mHAjCU,yBAAyB;6DAAzB,yBAAyB;YAnHlC,2FAAiC;;;YAAjC,mEAsBC;;;iFA6FQ,yBAAyB;cAvHrC,SAAS;6BACI,KAAK,YACP,uBAAuB,YACvB;;;;;;;;;;;;;;;;;;;;;;;;KAwBP;;kFA4FQ,yBAAyB"}