Comprehensive Angular dashboard components for MemberJunction Explorer, providing administrative interfaces for AI operations, entity management, actions, communication, testing, scheduling, credentials, API keys, version history, MCP servers, and more.
This package provides a rich collection of dashboard components registered as BaseResourceComponent subclasses. Each dashboard is loaded dynamically within the Explorer shell based on application navigation configuration. Dashboards follow MemberJunction's engine-class pattern for data access (no Angular services for data) and use getter/setter state management for reactivity.
graph TD
BRC["BaseResourceComponent"] --> AID["AI Dashboard"]
BRC --> EAD["Entity Admin Dashboard"]
BRC --> ACT["Actions Dashboard"]
BRC --> COM["Communication Dashboard"]
BRC --> TST["Testing Dashboard"]
BRC --> SCH["Scheduling Dashboard"]
BRC --> CRD["Credentials Dashboard"]
BRC --> AK["API Keys Dashboard"]
BRC --> MCP["MCP Dashboard"]
BRC --> CS["Component Studio"]
BRC --> DE["Data Explorer"]
BRC --> VH["Version History"]
BRC --> QB["Query Browser"]
BRC --> DB["Dashboard Browser"]
BRC --> HD["Home Dashboard"]
BRC --> LST["Lists Dashboard"]
BRC --> KH["Knowledge Hub"]
KH --> VS["Vector Search"]
KH --> DD["Duplicate Detection"]
KH --> CL["Clustering"]
KH --> AT["Content Autotagging"]
KH --> KC["Knowledge Config"]
style BRC fill:#7c5295,stroke:#563a6b,color:#fff
style KH fill:#2d8659,stroke:#1a5c3a,color:#fff
style VS fill:#2d8659,stroke:#1a5c3a,color:#fff
style DD fill:#2d8659,stroke:#1a5c3a,color:#fff
style CL fill:#2d8659,stroke:#1a5c3a,color:#fff
style AT fill:#2d8659,stroke:#1a5c3a,color:#fff
style KC fill:#2d8659,stroke:#1a5c3a,color:#fff
style AID fill:#2d6a9f,stroke:#1a4971,color:#fff
style EAD fill:#2d6a9f,stroke:#1a4971,color:#fff
style ACT fill:#2d6a9f,stroke:#1a4971,color:#fff
style COM fill:#2d8659,stroke:#1a5c3a,color:#fff
style TST fill:#2d8659,stroke:#1a5c3a,color:#fff
style SCH fill:#2d8659,stroke:#1a5c3a,color:#fff
style CRD fill:#b8762f,stroke:#8a5722,color:#fff
style AK fill:#b8762f,stroke:#8a5722,color:#fff
style MCP fill:#b8762f,stroke:#8a5722,color:#fff
style CS fill:#b8762f,stroke:#8a5722,color:#fff
style DE fill:#2d6a9f,stroke:#1a4971,color:#fff
style VH fill:#2d8659,stroke:#1a5c3a,color:#fff
style QB fill:#b8762f,stroke:#8a5722,color:#fff
style DB fill:#b8762f,stroke:#8a5722,color:#fff
style HD fill:#7c5295,stroke:#563a6b,color:#fff
style LST fill:#2d6a9f,stroke:#1a4971,color:#fff
The Knowledge Hub application provides a suite of dashboards for managing vector infrastructure, content processing, and AI-powered data exploration.
@memberjunction/ng-clusteringFetchEntityVectors GraphQL query to retrieve vectors from Pinecone with entity metadata filteringThe Classify sub-app (driver class AutotaggingPipelineResource) is a thin host shell that delegates each tab to a self-contained sub-page component. See the Classify architecture README for the full component map, data layer, and feature details.
Left-navigation tabs:
Architecture: the former 5,147-line monolith was decomposed into 6 tab components (tabs/) + 4 dialog components (dialogs/) + a shared pure layer (shared/: types, formatters, dry-run disposition logic). Cacheable metadata is read from existing engines (KnowledgeHubMetadataEngine, TagEngineBase, AIEngineBase); high-volume rows use RunView (never cached).
The Predictive Studio app (src/PredictiveStudio/) is a multi-section, lazy-loaded surface for training, comparing, deploying, and monitoring ML models (see the Predictive Studio Guide). Its sections include Home, Algorithm Catalog, Pipeline Builder, Experiments, Model Registry, Compare Runs, and Models in Production (PSProductionResourceComponent — deployed models, what each writes, schedule, last run, and a generic prediction-distribution mini-viz, all driven by MJ: ML Model Scoring Bindings + MJ: Process Runs). The panels read live engine data via PredictiveStudioEngine; Promote/Validate/Archive and experiment Pause/Resume/Cancel are wired to Remote Operations behind a confirm modal, and Home's "Ask the agent" CTA opens a docked, seeded Model-Dev-Agent chat. See src/PredictiveStudio/ and the guide's Business-User Experience section.
The Chief of Staff application (metadata/applications/.chief-of-staff-application.json) is the control surface for a user's personal Chief of Staff agent. Each page is its own nav item and its own BaseResourceComponent in src/ChiefOfStaff/, all extending BaseChiefOfStaffPage (chief-of-staff-page-base.ts), which holds the shared data load, request and routine actions, briefing reader, live reload and agent context. The pages use core entities only.
| Nav item | Driver class | What it shows |
|---|---|---|
| Overview (default) | ChiefOfStaffOverview (also registered as ChiefOfStaffDashboard and ChiefOfStaffResource, so tabs saved before the split still open) |
KPI cards (active wakes, pending approvals, governance posture), the top pending approvals with inline Approve / Reject, and the next wake routines. Cards and "Manage" buttons open the other pages through their nav items (OpenPage). |
| Approvals & Wakes | ChiefOfStaffApprovals |
The pending MJ: AI Agent Requests queue with Approve / Reject / Details (<mj-agent-request-dialog>), "Recent Resolved Decisions", and the user's AgentWake MJ: User Routines with Wake Now / Pause-Resume / Read Briefing / open-record actions. A <mj-page-search> filters both lists; search round-trips through the query params. |
| Governance | ChiefOfStaffGovernance |
The user's MJ: AI Agent User Policies row for the Chief of Staff agent as an editable draft: coordination mode, status, data-access mode, the four channel modes, inter-agent coordination, the approval guardrails, the auto-approve threshold, and display-name and standing-instructions overrides, with Save / Reset. |
Data (one RunViews batch in LoadChiefOfStaffData; every filter comes from BuildChiefOfStaffScopeFilters and is bound to the signed-in user — with no current user a page loads nothing and shows an error banner):
MJ: AI Agent User Policies filtered to the Chief of Staff agent (resolved by name, CHIEF_OF_STAFF_AGENT_NAME) and the current userMJ: User Routines for the current user where RoutineType = 'AgentWake' or the target is the Chief of Staff agentMJ: AI Agent Requests for the Chief of Staff agent and RequestForUserID = current user, excluding Information requests (max 100); each queue row shows its RequestType as a badgeWake routines are listed in display order (SortRoutinesForDisplay: next wake first, unscheduled, then spent one-shots most recent first); a spent one-shot (IsSpentOneShotRoutine, Disabled after running with no next time) shows as Fired (RoutineDisplayStatus) and is hidden behind a "Show fired" toggle. "Wake Now" runs the Run User Routine Now action, which executes the routine without touching NextRunAt, so a one-shot keeps its scheduled time. An approval request that carries an outbound email (the email action stores To/CC/Subject/Body as JSON in Comments) gets a "View draft" toggle on its card: ParseEmailApprovalPayload reads the draft, the card shows headers and body inline, and "Copy" puts FormatEmailDraftForClipboard output (headers, blank line, body) on the clipboard for a mail client.
Mutations (all BaseEntity.Save() with LatestResult.CompleteMessage surfaced in a banner): QuickRespondToRequest (sets Status to Approved/Rejected, RespondedAt, ResponseSource = 'Dashboard', ResponseByUserID), TriggerWakeNow (runs the Run User Routine Now action), ToggleRoutineStatus (Active ↔ Paused) and SaveGovernancePolicy (creates the policy row if none exists).
Live reload: a save or remote invalidation of any entity in CHIEF_OF_STAFF_LIVE_ENTITIES (IsChiefOfStaffEntityChange) reloads an attached page once per burst; a detached page reloads when it is shown again.
Adding pages from another app. An Open App adds its own pages to the Chief of Staff application with MJ: Application Settings rows, not by extending these components. Each row is scoped to the Chief of Staff application (ApplicationID), named NavItem.<unique key> (for example NavItem.bizapps-tasks.priorities), and holds one nav item as JSON in Value:
{ "Label": "Priorities", "Icon": "fa-solid fa-bullseye", "ResourceType": "Custom", "DriverClass": "BizAppsTasksPriorities", "Sequence": 15 }
BaseApplication.GetNavItems() (@memberjunction/ng-base-application, MergeNavItemExtensions) adds these to every application's nav bar, so the mechanism is generic. The core pages sit at 10, 20 and 30, so Sequence: 15 lands between Overview and Approvals & Wakes; an item without a Sequence goes last. An extension never becomes the default item, and one whose Label is already present is skipped. The DriverClass is a BaseResourceComponent registered by the app's client package; the page loads its own data, publishes its own agent context and reloads itself. The app's teardown deletes its rows. An extension cannot add cards to the Overview page.
The application is opt-in (DefaultForNewUser: false) and is not registered in the AI application. Its DriverClass values must be unique across all applications (integration check app-wiring.AW4); the Agent Requests and Routines screens already belong to the AI and Routines applications, and the Approvals & Wakes page links to those records directly.
Not yet implemented from the Phase 2 plan: QuietHoursStart / QuietHoursEnd and MaxAutonomousActionsPerRun do not exist on MJ: AI Agent User Policies and are not shown.
Agent context and client tools (open page / search / refresh only — no mutations) are built by the pure helpers in src/ChiefOfStaff/chief-of-staff-agent-context.ts; see the package CLAUDE.md registry row for the boundary.
npm install @memberjunction/ng-dashboards
| Dependency | Purpose |
|---|---|
@memberjunction/core, @memberjunction/core-entities |
Entity metadata and data access |
@memberjunction/ng-base-application |
BaseResourceComponent base |
@memberjunction/ng-shared, @memberjunction/ng-shared-generic |
Shared services, loading indicators |
@memberjunction/ng-dashboard-viewer |
Dashboard rendering |
@memberjunction/ng-query-viewer |
Query execution and display |
@progress/kendo-angular-* |
Kendo UI components |
d3 |
Data visualization |
codemirror |
Code editing |
import { DashboardsModule } from '@memberjunction/ng-dashboards';
@NgModule({
imports: [DashboardsModule]
})
export class AppModule {}
All dashboard components are registered via @RegisterClass(BaseResourceComponent, 'ClassName') and are loaded dynamically based on application navigation configuration. They do not need to be referenced directly in templates.
FormBuilderResourceComponent (under src/FormBuilder/) is the
standalone Form Studio surface — reachable from the app rail. Cockpit
layout:
joinVersionsWithOverrides).
Row-level "Activate" / "Restore" buttons disambiguated by status.<mj-interactive-form> mount bound to a real
Top-1 record from the target entity (ORDER BY name field). Spec
merges live EditableCode over the saved spec so
dataRequirements / charts continue to work.ConversationBridgeService.RequestExpandOverlay() and re-registers
ActiveForm context.New-form flow seeds the canvas + code from
buildDefaultFormScaffold(entityName, provider) (in
@memberjunction/interactive-component-types/forms). Manual create
starts at the same baseline as the AI agent path.
EntityFormOverrideService (under ComponentStudio/services/) holds
activateVersion() and revertToComponent() — client-side mirrors of
the server actions used by the cockpit's version-rail rows.
See /plans/interactive-forms/phase-2-runtime-loop.md for the full architecture.
cd packages/Angular/Explorer/dashboards && npm run build
Business Source License 1.1 — see LICENSE for details.