@naniteninja/dashboard-components-lib

Angular presentational components and UI-enriched types for the Cyrano dashboard. Wire types (socket payloads, shared enums) live in @naniteninja/cyrano-contracts; this library extends them with presentation-only fields.

Role in the Ecosystem

cyrano-contracts (wire SSOT)  →  CyranoServer / Cyrano  →  dashboard-components-lib (UI)
Blackbox (Python stubs)       ↗

This library provides dashboard UI components and presentation types consumed by:

• Cyrano (host app — sockets, auth, state)
• dashboard-components-lib-test (local component harness)

Canonical wire definitions are in @naniteninja/cyrano-contracts. CyranoServer validates parity via contract-alignment.spec.ts.

Canonical Types

Core Messaging (from @naniteninja/cyrano-contracts)

| Type | Purpose | |------|---------| | IMessage | Fundamental message unit | | IAttachment | Message media | | ISendOptionsMessage | Send timing preferences | | IChatSuggestion | LLM suggestion entry | | SenderTypes | user / other enum | | SendMessageType | Send timing enum | | MatcherStatuses | Pipeline status funnel |

Dashboard Models (UI extensions)

| Type | Purpose | |------|---------| | IProspectData | Chat/prospect card payload (+ UI-only fields like llmPreferenceLoading$) | | ILibClientMatchOverview | Client match overview envelope | | IDashboardMatchRequest | Match request metadata | | ISchedulerEvent | Calendar events | | IChartData | Compatibility chart data | | IConversationFlag | Unresponsive/redelegation flags |

Enums

| Enum | File | Purpose | |------|------|---------| | CONVERSATION_FLAG | enums/conversation-flag.enum.ts | Unresponsive / redelegation | | COUNTER_FLAG_BASE | enums/counter-flag-base.enum.ts | Flag timing base |

Key Components

| Component | Selector | Purpose | |-----------|----------|---------| | ChatComponent | lib-chat | Message list + input with virtual scroll | | ClientHomeComponent | lib-client-home | Client dashboard shell | | ClientViewportComponent | lib-client-viewport | Tabbed viewport (chat, scheduler, suggestions) | | MatcherViewportComponent | lib-matcher-viewport | Matcher dashboard viewport | | DashboardSwipeableTabsComponent | lib-dashboard-swipeable-tabs | Prospect card swipe strip | | MatcherStatusesComponent | lib-matcher-statuses | Status milestone ladder | | ChatSuggestionComponent | lib-chat-suggestion | AI suggestion chips |

Key Services

| Service | Purpose | |---------|---------| | ChatService | transformMessages() — groups messages by date for rendering | | CalendarUtilsService | Calendar event helpers | | ProgressTickerService | Progress ring animation |

Contract Ownership Rules

1. New wire types belong in @naniteninja/cyrano-contracts
2. UI-only extensions belong here (e.g. llmPreferenceLoading$ on IProspectData)
3. Cyrano imports wire types from contracts; lib types for components
4. Blackbox mirrors wire types via Python stubs from cyrano-contracts/scripts/generate-python.ts

Adding a New Contract

1. Define wire interface/enum in cyrano-contracts
2. Re-export or extend in this library if UI needs extra fields
3. Run contract alignment tests in cyranoserver and cyrano
4. Regenerate Python stubs for Blackbox if the type crosses the wire boundary

Development

npm run build
npm test

Related Documentation

• cyrano-contracts/README.md — wire SSOT package
• cyranoserver/docs/CANONICAL_MESSAGING_CONTRACTS.md — full contract reference
• cyrano/docs/MESSAGING_ARCHITECTURE.md — frontend socket integration