@meshmakers/octo-meshboard 3.4.1490 → 3.5.0

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -1,7 +1,7 @@
-import { FieldFilterOperatorsDto, CkTypeSelectorService, RuntimeEntitySelectDataSource, RuntimeEntityDialogDataSource, DeleteStrategiesDto, AssociationModOptionsDto, CkModelService, TENANT_ID_PROVIDER, QueryModeDto, GraphDirectionDto, AttributeSelectorService, GraphQL, GetCkTypeAvailableQueryColumnsDtoGQL, SortOrdersDto, SeriesResolutionSignalDto, HealthService, AssetRepoService, JobManagementService, SystemCommunicationDeploymentStateDto, SystemCommunicationConfigurationStateDto, CONFIGURATION_SERVICE } from '@meshmakers/octo-services';
+import { FieldFilterOperatorsDto, CkTypeSelectorService, RuntimeEntitySelectDataSource, RuntimeEntityDialogDataSource, DeleteStrategiesDto, AssociationModOptionsDto, CkModelService, TENANT_ID_PROVIDER, QueryModeDto, GraphDirectionDto, AttributeSelectorService, GraphQL, GetCkTypeAvailableQueryColumnsDtoGQL, SortOrdersDto, SeriesResolutionSignalDto, HealthService, AssetRepoService, JobManagementService, CONFIGURATION_SERVICE, SystemCommunicationDeploymentStateDto, SystemCommunicationConfigurationStateDto, HealthStatus } from '@meshmakers/octo-services';
 export { RuntimeEntityDialogDataSource, RuntimeEntitySelectDataSource, TENANT_ID_PROVIDER } from '@meshmakers/octo-services';
 import * as i0 from '@angular/core';
-import { Injectable, inject, EventEmitter, forwardRef, Output, Input, ViewChild, ChangeDetectionStrategy, Component, Injector, EnvironmentInjector, ApplicationRef, signal, computed, effect, untracked, Directive, NgZone, DestroyRef, ElementRef, input, createEnvironmentInjector, ViewContainerRef, makeEnvironmentProviders, provideAppInitializer, InjectionToken, output, isSignal, viewChild } from '@angular/core';
+import { Injectable, inject, EventEmitter, forwardRef, Output, Input, ViewChild, ChangeDetectionStrategy, Component, Injector, EnvironmentInjector, ApplicationRef, signal, computed, effect, untracked, Directive, InjectionToken, isSignal, NgZone, DestroyRef, ElementRef, input, createEnvironmentInjector, ViewContainerRef, makeEnvironmentProviders, provideAppInitializer, output, viewChild } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { firstValueFrom, from, map, Observable, of, switchMap as switchMap$1, catchError, interval, filter, combineLatest, defer, EMPTY } from 'rxjs';
@@ -25,7 +25,7 @@ import * as i1$2 from '@progress/kendo-angular-indicators';
 import { LoaderModule } from '@progress/kendo-angular-indicators';
 import * as i1$4 from '@progress/kendo-angular-icons';
 import { SVGIconModule } from '@progress/kendo-angular-icons';
-import { arrowUpIcon, arrowDownIcon, minusIcon, arrowRightIcon, arrowLeftIcon, linkIcon, chevronDownIcon, chevronRightIcon, circleIcon, questionCircleIcon, minusCircleIcon, warningTriangleIcon, exclamationCircleIcon, xCircleIcon, checkCircleIcon, columnsIcon, sortAscIcon, filterIcon, searchIcon, chartPieIcon, infoCircleIcon, plusIcon, pencilIcon, chartLineIcon, clockArrowRotateIcon, chartAreaRangeIcon, dataIcon, connectorIcon, gearsIcon, clipboardMarkdownIcon, copyIcon, gridIcon, heartIcon, gridLayoutIcon, chartLineMarkersIcon, chartColumnStackedIcon, chartDoughnutIcon, tableIcon, shareIcon, fileTxtIcon, checkIcon, xIcon, uploadIcon, pinIcon, unpinIcon, gearIcon, saveIcon, arrowRotateCwIcon, undoIcon } from '@progress/kendo-svg-icons';
+import { arrowUpIcon, arrowDownIcon, minusIcon, arrowRightIcon, arrowLeftIcon, linkIcon, chevronDownIcon, chevronRightIcon, circleIcon, questionCircleIcon, minusCircleIcon, warningTriangleIcon, exclamationCircleIcon, xCircleIcon, checkCircleIcon, columnsIcon, sortAscIcon, filterIcon, searchIcon, plusIcon, trashIcon, chartPieIcon, infoCircleIcon, pencilIcon, chartLineIcon, clockArrowRotateIcon, dataIcon, connectorIcon, chartAreaRangeIcon, gearsIcon, clipboardMarkdownIcon, copyIcon, gridIcon, heartIcon, gridLayoutIcon, chartLineMarkersIcon, chartColumnStackedIcon, chartDoughnutIcon, tableIcon, shareIcon, fileTxtIcon, checkIcon, xIcon, uploadIcon, pinIcon, unpinIcon, gearIcon, saveIcon, arrowRotateCwIcon, undoIcon } from '@progress/kendo-svg-icons';
 import { ExpressionEvaluatorService, GetProcessDiagramDtoGQL, GetProcessDiagramsDtoGQL, CreateProcessDiagramDtoGQL, UpdateProcessDiagramDtoGQL, SymbolLibraryService, renderAnimations, getFlowParticlesAnimation, renderFlowParticles } from '@meshmakers/octo-process-diagrams';
 import { NotificationService } from '@progress/kendo-angular-notification';
 import * as i1$6 from '@progress/kendo-angular-gauges';
@@ -48,7 +48,10 @@ import { BreadCrumbService } from '@meshmakers/shared-services';
  * Defines the interfaces for MeshBoard widgets and their data sources
  */
 /** The cockpit widget types (e.g. to tell whether a board already shows them). */
-const COCKPIT_WIDGET_TYPES = ['attentionList', 'adapterStatus', 'ckModelState', 'pipelineExecutions'];
+const COCKPIT_WIDGET_TYPES = [
+    'attentionList', 'adapterStatus', 'ckModelState', 'pipelineExecutions',
+    'tenantCount', 'blueprintUpdates', 'servicesHealth', 'versionInfo'
+];
 /** True for the cockpit widget types. */
 function isCockpitWidgetType(type) {
     return COCKPIT_WIDGET_TYPES.includes(type ?? '');
@@ -255,6 +258,72 @@ function chartThemeColorsFrom(style) {
 function chartThemeColors(doc = typeof document !== 'undefined' ? document : null) {
     return chartThemeColorsFrom(computedRootStyle(doc));
 }
+/** Fixed series colours, the last resort when the host theme defines no chart palette (or no CSS). */
+const FALLBACK_SERIES_COLORS = Object.freeze(['#3b9eff', '#2fb37a', '#e0a43a', '#c861d6', '#64ceb9', '#da9162', '#6c4da8', '#8a94a0']);
+const SERIES_TOKEN_PREFIXES = ['--theme-chart-', '--kendo-chart-series-'];
+const KENDO_SERIES_LETTERS = ['a', 'b', 'c', 'd', 'e', 'f'];
+const MAX_SERIES_TOKENS = 12;
+/** A resolved custom property value usable as an SVG fill (non-empty, no unresolved `var()`, a valid colour where checkable). */
+function isUsableColor(value) {
+    if (!value || value.includes('var(')) {
+        return false;
+    }
+    return typeof CSS === 'undefined' || typeof CSS.supports !== 'function' || CSS.supports('color', value);
+}
+function chartSeriesColorsFrom(style) {
+    for (const prefix of SERIES_TOKEN_PREFIXES) {
+        const colors = [];
+        for (let i = 1; i <= MAX_SERIES_TOKENS; i++) {
+            const value = style?.getPropertyValue(`${prefix}${i}`).trim();
+            if (isUsableColor(value)) {
+                colors.push(value);
+            }
+        }
+        if (colors.length) {
+            return colors;
+        }
+    }
+    const kendo = KENDO_SERIES_LETTERS.map(letter => style?.getPropertyValue(`--kendo-color-series-${letter}`).trim()).filter(isUsableColor);
+    return kendo.length ? kendo : [...FALLBACK_SERIES_COLORS];
+}
+/**
+ * The categorical chart palette of the current theme (AB#5622): the host's `--theme-chart-1…12`
+ * (Studio tokens), else the Kendo theme's `--kendo-chart-series-1…12`, else
+ * `--kendo-color-series-a…f`, else {@link FALLBACK_SERIES_COLORS}. Values that are empty, still
+ * contain `var()` or are no valid colour are skipped — Kendo resolves its series colours once per
+ * page load, and a token it could not resolve rendered a slice black in dark mode. The charts set
+ * these colours explicitly on every data item, so the palette also follows a live theme switch.
+ */
+function chartSeriesColors(doc = typeof document !== 'undefined' ? document : null) {
+    return chartSeriesColorsFrom(computedRootStyle(doc));
+}
+/**
+ * Resolves a configured colour (per-category colour of a chart, AB#5622): a status name
+ * (`success`, `warning`, `error`, `info` → theme status colour), a custom property (`--brand-paid`
+ * or `var(--brand-paid, #2fb37a)`) read from the document root, or any CSS colour (`#2fb37a`,
+ * `rgb(…)`) used as it is. Returns `undefined` when it cannot be resolved (the default colour applies).
+ */
+function resolveChartColor(token, doc = typeof document !== 'undefined' ? document : null) {
+    // Board JSON is not type-checked: a non-string value (number, object) is no colour.
+    const text = typeof token === 'string' ? token.trim() : '';
+    if (!text) {
+        return undefined;
+    }
+    if (text === 'success' || text === 'warning' || text === 'error' || text === 'info') {
+        return statusColor(text, doc);
+    }
+    const variable = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/.exec(text);
+    const name = text.startsWith('--') ? text : variable?.[1];
+    if (name) {
+        const value = computedRootStyle(doc)?.getPropertyValue(name).trim();
+        if (isUsableColor(value)) {
+            return value;
+        }
+        const fallback = variable?.[2]?.trim();
+        return isUsableColor(fallback) ? fallback : undefined;
+    }
+    return isUsableColor(text) ? text : undefined;
+}
 /**
  * What the charts' resolved colours depend on: the `data-theme` attribute, the OS colour scheme,
  * the resolved status colours and the chart text / line colours. `class` / `style` of `<html>` are deliberately not part of it —
@@ -265,7 +334,7 @@ function themeSignature(doc = typeof document !== 'undefined' ? document : null)
     // One style computation per signature (it runs on every <html> mutation).
     const style = computedRootStyle(doc);
     const text = chartThemeColorsFrom(style);
-    const colors = [...['success', 'warning', 'error', 'info'].map(status => statusColorFrom(status, style)), text.text, text.muted, text.grid].join(',');
+    const colors = [...['success', 'warning', 'error', 'info'].map(status => statusColorFrom(status, style)), text.text, text.muted, text.grid, ...chartSeriesColorsFrom(style)].join(',');
     return `${doc?.documentElement?.getAttribute('data-theme') ?? ''}|${dark ? 'dark' : 'light'}|${colors}`;
 }
 /**
@@ -10150,6 +10219,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 type: Input
             }] } });
 
+/** Default texts of {@link MeshBoardMessages} (the list texts default inside `mm-list-view`). */
+const DEFAULT_MESHBOARD_MESSAGES = {
+    tableNotConfigured: 'Table not configured',
+};
+/**
+ * Optional: the host's translations of the MeshBoard widget texts (English without it). Set it
+ * once app-wide, either directly or via `provideMeshBoard({ messages })` /
+ * `provideMeshBoardMessages(messages)`.
+ *
+ * ```ts
+ * providers: [provideMeshBoardMessages({ tableList: { noRecords: 'Keine Einträge vorhanden.', pagerItemsPerPage: 'Einträge pro Seite' } })]
+ * ```
+ */
+const MESHBOARD_MESSAGES = new InjectionToken('MESHBOARD_MESSAGES');
+/** Reads a {@link MeshBoardMessagesSource} (fixed or signal) as the current host layer. */
+function readMeshBoardMessagesSource(source) {
+    if (!source) {
+        return null;
+    }
+    return isSignal(source) ? source() ?? null : source;
+}
+/** The resolved MeshBoard texts: defaults with the host layer on top (missing / null members keep the default). */
+function resolveMeshBoardMessages(messages) {
+    return {
+        ...DEFAULT_MESHBOARD_MESSAGES,
+        ...(messages?.tableList ? { tableList: messages.tableList } : {}),
+        ...(messages?.tableNotConfigured ? { tableNotConfigured: messages.tableNotConfigured } : {}),
+    };
+}
+/** The resolved MeshBoard messages of {@link MESHBOARD_MESSAGES} as a signal. Call in an injection context. */
+function injectMeshBoardMessages() {
+    const source = inject(MESHBOARD_MESSAGES, { optional: true });
+    return computed(() => resolveMeshBoardMessages(readMeshBoardMessagesSource(source)));
+}
+
+/** App-wide {@link MeshBoardLabelResolver}. Not provided = today's texts. */
+const MESHBOARD_LABEL_RESOLVER = new InjectionToken('MESHBOARD_LABEL_RESOLVER');
+const failedResolvers = new WeakSet();
+/** Resolves one label; the default text when there is no resolver, no translation, or the resolver throws. */
+function resolveMeshBoardLabel(resolver, request) {
+    if (!resolver) {
+        return request.defaultText;
+    }
+    let text;
+    try {
+        text = resolver(request);
+    }
+    catch (error) {
+        if (!failedResolvers.has(resolver)) {
+            failedResolvers.add(resolver);
+            console.warn('octo-meshboard: the label resolver threw; showing the default texts', error);
+        }
+        return request.defaultText;
+    }
+    return typeof text === 'string' && text !== '' ? text : request.defaultText;
+}
+
 const ICON_MAP = {
     'check-circle': checkCircleIcon,
     'x-circle': xCircleIcon,
@@ -10169,6 +10295,13 @@ class TableWidgetComponent {
     config;
     dataSource;
     stateService = inject(MeshBoardStateService);
+    /** Host texts (`MESHBOARD_MESSAGES`, AB#5622): list texts (empty state, pager, toolbar) and the placeholder. */
+    texts = injectMeshBoardMessages();
+    /** Host translation of enum cell values (`MESHBOARD_LABEL_RESOLVER`, AB#5622); absent = raw text. */
+    labelResolver = inject(MESHBOARD_LABEL_RESOLVER, { optional: true });
+    /** CK value type per derived column field (persistent queries), for the label resolver. */
+    _queryColumnValueTypes = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_queryColumnValueTypes" }] : /* istanbul ignore next */ []));
     // Widget state signals
     _isLoading = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
@@ -10188,6 +10321,7 @@ class TableWidgetComponent {
      */
     onQueryColumnsLoaded(columns) {
         if (columns.length > 0) {
+            this._queryColumnValueTypes.set(new Map(columns.map(col => [col.attributePath, col.attributeValueType])));
             this._queryColumnsForView.set(columns.map(col => ({
                 field: col.attributePath,
                 displayName: this.formatColumnTitle(col.attributePath),
@@ -10209,12 +10343,41 @@ class TableWidgetComponent {
         // explicitly typed ('date', 'numeric', 'iso8601', …) keep their own
         // rendering, and any value that is not an ISO-8601 date-time passes through
         // unchanged. Derived stream-data columns are all 'text', so they're covered.
+        //
+        // With a host label resolver (AB#5622) string cells of those columns are offered to it as
+        // well (enum values such as `PAID` → "Bezahlt"); columns whose query value type is known and
+        // not an enum are skipped. Without a resolver the formatter is unchanged.
+        const resolver = this.labelResolver;
+        const dataSource = this.config?.dataSource;
+        const ckTypeId = dataSource?.type === 'runtimeEntity' ? dataSource.ckTypeId || undefined : undefined;
+        const valueTypes = this._queryColumnValueTypes();
         const withDateFormatter = (column) => {
             const isPlainText = !column.dataType || column.dataType === 'text';
             if (!isPlainText || column.formatter) {
                 return column;
             }
-            return { ...column, formatter: (value) => formatTableCellValue(value, mode) };
+            const valueType = valueTypes.get(column.field) || undefined;
+            const translate = !!resolver && (!valueType || /ENUM/i.test(valueType));
+            if (!translate) {
+                return { ...column, formatter: (value) => formatTableCellValue(value, mode) };
+            }
+            return {
+                ...column,
+                formatter: (value) => {
+                    const text = formatTableCellValue(value, mode);
+                    if (typeof value !== 'string' || value === '') {
+                        return text;
+                    }
+                    return resolveMeshBoardLabel(resolver, {
+                        kind: 'tableCell',
+                        ...(ckTypeId ? { ckTypeId } : {}),
+                        attribute: column.field,
+                        value,
+                        ...(valueType ? { valueType } : {}),
+                        defaultText: text
+                    });
+                }
+            };
         };
         // If explicit columns are configured, use them (works for both data source types)
         if (this.config?.columns && this.config.columns.length > 0) {
@@ -10281,6 +10444,7 @@ class TableWidgetComponent {
             // Clear cached query columns when config changes (for persistent queries)
             if (this.config?.dataSource?.type === 'persistentQuery') {
                 this._queryColumnsForView.set([]);
+                this._queryColumnValueTypes.set(new Map());
             }
             // Defer refresh to next microtask to allow Angular to propagate config to directive
             Promise.resolve().then(() => this.refresh());
@@ -10310,15 +10474,16 @@ class TableWidgetComponent {
           [showRowCheckBoxes]="false"
           [showRowSelectAllCheckBox]="false"
           [rowIsClickable]="false"
+          [messages]="texts().tableList"
           (queryColumnsLoaded)="onQueryColumnsLoaded($event)">
         </mm-list-view>
       } @else {
         <div class="no-config-overlay">
-          <span>Table not configured</span>
+          <span>{{ texts().tableNotConfigured }}</span>
         </div>
       }
     </div>
-  `, isInline: true, styles: [".table-widget{height:100%;width:100%;display:flex;flex-direction:column}.no-config-overlay{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-subtle, #6c757d);font-style:italic}:host ::ng-deep mm-list-view{height:100%}:host ::ng-deep .k-grid{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "autoPageSize", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "rowActions", "maxInlineRowActions", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "persistListState", "listStateKey", "resizable", "actionsColumnWidth", "hideCheckboxesBelow", "cardModeBelow", "collapseCommandsBelow", "hasExternalFilters", "rowClass", "messages", "selectable", "columns", "rowLabelField"], outputs: ["rowClicked", "rowAction", "resetFilters"] }, { kind: "directive", type: TableWidgetDataSourceDirective, selector: "[mmTableWidgetDataSource]", inputs: ["config"], outputs: ["queryColumnsLoaded"], exportAs: ["mmTableWidgetDataSource"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [".table-widget{height:100%;width:100%;display:flex;flex-direction:column}.no-config-overlay{display:flex;align-items:center;justify-content:center;height:100%;color:var(--kendo-color-subtle, #6c757d);font-style:italic}:host ::ng-deep mm-list-view{height:100%}:host ::ng-deep .k-grid{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ListViewComponent, selector: "mm-list-view", inputs: ["pageSize", "skip", "autoPageSize", "rowIsClickable", "showRowCheckBoxes", "showRowSelectAllCheckBox", "contextMenuType", "leftToolbarActions", "rightToolbarActions", "actionCommandItems", "contextMenuCommandItems", "rowActions", "maxInlineRowActions", "excelExportFileName", "pdfExportFileName", "pageable", "sortable", "rowFilterEnabled", "searchTextBoxEnabled", "persistListState", "listStateKey", "resizable", "actionsColumnWidth", "hideCheckboxesBelow", "cardModeBelow", "collapseCommandsBelow", "hasExternalFilters", "emptyState", "emptyTemplate", "rowClass", "messages", "selectable", "columns", "rowLabelField"], outputs: ["rowClicked", "rowAction", "resetFilters"] }, { kind: "directive", type: TableWidgetDataSourceDirective, selector: "[mmTableWidgetDataSource]", inputs: ["config"], outputs: ["queryColumnsLoaded"], exportAs: ["mmTableWidgetDataSource"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TableWidgetComponent, decorators: [{
             type: Component,
@@ -10342,11 +10507,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           [showRowCheckBoxes]="false"
           [showRowSelectAllCheckBox]="false"
           [rowIsClickable]="false"
+          [messages]="texts().tableList"
           (queryColumnsLoaded)="onQueryColumnsLoaded($event)">
         </mm-list-view>
       } @else {
         <div class="no-config-overlay">
-          <span>Table not configured</span>
+          <span>{{ texts().tableNotConfigured }}</span>
         </div>
       }
     </div>
@@ -13128,6 +13294,8 @@ function injectChartTheme() {
     return theme.asReadonly();
 }
 
+/** Kendo label position per configured {@link PieChartWidgetConfig.labelPosition}. */
+const KENDO_LABEL_POSITION = { inside: 'insideEnd', outside: 'outsideEnd' };
 const PLOT_AREA_WITH_LABELS = Object.freeze({ background: 'transparent', margin: Object.freeze({ top: 30, right: 30, bottom: 30, left: 30 }) });
 const PLOT_AREA_WITHOUT_LABELS = Object.freeze({ background: 'transparent', margin: Object.freeze({ top: 4, right: 4, bottom: 4, left: 4 }) });
 class PieChartWidgetComponent {
@@ -13147,6 +13315,8 @@ class PieChartWidgetComponent {
     dataService = inject(MeshBoardDataService);
     stateService = inject(MeshBoardStateService);
     variableService = inject(MeshBoardVariableService);
+    /** Host translation of category names (`MESHBOARD_LABEL_RESOLVER`, AB#5622): slices, legend and tooltips. */
+    labelResolver = inject(MESHBOARD_LABEL_RESOLVER, { optional: true });
     config;
     // Widget state signals
     _isLoading = signal(false, /* @ts-ignore */
@@ -13165,7 +13335,8 @@ class PieChartWidgetComponent {
     /** Keeps its reference while categories, values and colours are unchanged (AB#5568). */
     chartData = computed(() => {
         this.chartTheme();
-        return this._rawData().map(item => this.toItem(item.category, item.value));
+        const palette = chartSeriesColors();
+        return this._rawData().map((item, index) => this.toItem(item.category, item.value, index, palette));
     }, { ...(ngDevMode ? { debugName: "chartData" } : /* istanbul ignore next */ {}), equal: sameChartItems });
     error = this._error.asReadonly();
     data = computed(() => this.chartData(), /* @ts-ignore */
@@ -13195,7 +13366,8 @@ class PieChartWidgetComponent {
      * chart on every hover (AB#5568).
      */
     plotArea() {
-        return this.config?.showLabels === true ? PLOT_AREA_WITH_LABELS : PLOT_AREA_WITHOUT_LABELS;
+        const outsideLabels = this.config?.showLabels === true && this.config?.labelPosition !== 'inside' && this.config?.labelPosition !== 'none';
+        return outsideLabels ? PLOT_AREA_WITH_LABELS : PLOT_AREA_WITHOUT_LABELS;
     }
     /** Margin of the plot area (see `plotArea`). */
     plotAreaMargin() {
@@ -13224,10 +13396,42 @@ class PieChartWidgetComponent {
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
     }
-    /** Human label and status colour for a raw category value (exposed for tests). */
-    toItem(rawCategory, value) {
+    /**
+     * Human label and status colour for a raw category value (exposed for tests). The label is the
+     * host resolver's text (AB#5622), else the humanized category; the colour still follows the raw value.
+     */
+    toItem(rawCategory, value, index = 0, palette = chartSeriesColors()) {
+        const category = this.categoryLabel(rawCategory);
         const status = categoryStatus(rawCategory);
-        return { category: humanizeCategory(rawCategory), value, ...(status ? { color: statusColor(status) } : {}) };
+        const color = this.configuredColor(rawCategory, category)
+            ?? (status ? statusColor(status) : undefined)
+            ?? (palette.length ? palette[index % palette.length] : undefined);
+        return { category, value, ...(color ? { color } : {}) };
+    }
+    /** The `categoryColors` entry of a category (raw value, case-insensitive, then the label), resolved. */
+    configuredColor(rawCategory, label) {
+        const colors = this.config?.categoryColors;
+        if (!colors) {
+            return undefined;
+        }
+        const lower = rawCategory.toLowerCase();
+        // Own keys only: `in` would also match inherited members (`constructor`, `toString`, ...).
+        const own = (k) => Object.prototype.hasOwnProperty.call(colors, k);
+        const key = own(rawCategory) ? rawCategory
+            : Object.keys(colors).find(k => k.toLowerCase() === lower) ?? (own(label) ? label : undefined);
+        return key !== undefined ? resolveChartColor(colors[key]) : undefined;
+    }
+    /** Display name of a raw category: the host label resolver, else `humanizeCategory`. */
+    categoryLabel(rawCategory) {
+        const defaultText = humanizeCategory(rawCategory);
+        if (!this.labelResolver) {
+            return defaultText;
+        }
+        const dataSource = this.config?.dataSource;
+        const attribute = dataSource?.type === 'constructionKitQuery'
+            ? dataSource.groupBy ?? this.config?.categoryField ?? ''
+            : this.config?.categoryField ?? '';
+        return resolveMeshBoardLabel(this.labelResolver, { kind: 'chartCategory', attribute, value: rawCategory, defaultText });
     }
     _labelSettings = signal({
         visible: false,
@@ -13237,10 +13441,24 @@ class PieChartWidgetComponent {
     /** Series label options incl. the theme text colour (new object only when either changes). */
     labelSettings = computed(() => ({ ...this._labelSettings(), color: this.chartTheme().text }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelSettings" }] : /* istanbul ignore next */ []));
+    /** Connector lines of outside labels: theme coloured when `labelPosition: 'outside'` is set, else the chart default (AB#5622). */
+    _explicitOutsideLabels = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_explicitOutsideLabels" }] : /* istanbul ignore next */ []));
+    connectors = computed(() => this._explicitOutsideLabels()
+        ? { color: this.chartTheme().muted, width: 1, padding: 4 }
+        : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectors" }] : /* istanbul ignore next */ []));
     updateLabelSettings() {
+        const position = this.config?.labelPosition;
+        const minPercent = Math.max(0, Number(this.config?.hideLabelsBelowPercent) || 0);
+        this._explicitOutsideLabels.set(this.config?.showLabels === true && position === 'outside');
         this._labelSettings.set({
-            visible: this.config?.showLabels === true,
+            visible: this.config?.showLabels === true && position !== 'none',
+            ...(position === 'inside' || position === 'outside' ? { position: KENDO_LABEL_POSITION[position] } : {}),
             content: (e) => {
+                if (minPercent > 0 && typeof e.percentage === 'number' && e.percentage * 100 < minPercent) {
+                    return '';
+                }
                 const maxLen = 20;
                 const name = e.category.length > maxLen ? e.category.substring(0, maxLen) + '...' : e.category;
                 return `${name}: ${this.formatValue(e.value)}`;
@@ -13398,14 +13616,27 @@ class PieChartWidgetComponent {
         <kendo-chart class="chart-container" [plotArea]="plotArea()">
           <kendo-chart-area [background]="'transparent'"></kendo-chart-area>
           <kendo-chart-series>
-            <kendo-chart-series-item
-              [type]="config.chartType"
-              [data]="chartData()"
-              field="value"
-              categoryField="category"
-              colorField="color"
-              [labels]="labelSettings()">
-            </kendo-chart-series-item>
+            <!-- Connector lines only bound when outside labels are configured (AB#5622); otherwise the Kendo default stays untouched. -->
+            @if (connectors(); as labelConnectors) {
+              <kendo-chart-series-item
+                [type]="config.chartType"
+                [data]="chartData()"
+                field="value"
+                categoryField="category"
+                colorField="color"
+                [labels]="labelSettings()"
+                [connectors]="labelConnectors">
+              </kendo-chart-series-item>
+            } @else {
+              <kendo-chart-series-item
+                [type]="config.chartType"
+                [data]="chartData()"
+                field="value"
+                categoryField="category"
+                colorField="color"
+                [labels]="labelSettings()">
+              </kendo-chart-series-item>
+            }
           </kendo-chart-series>
           <kendo-chart-legend
             [visible]="config.showLegend !== false"
@@ -13446,14 +13677,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         <kendo-chart class="chart-container" [plotArea]="plotArea()">
           <kendo-chart-area [background]="'transparent'"></kendo-chart-area>
           <kendo-chart-series>
-            <kendo-chart-series-item
-              [type]="config.chartType"
-              [data]="chartData()"
-              field="value"
-              categoryField="category"
-              colorField="color"
-              [labels]="labelSettings()">
-            </kendo-chart-series-item>
+            <!-- Connector lines only bound when outside labels are configured (AB#5622); otherwise the Kendo default stays untouched. -->
+            @if (connectors(); as labelConnectors) {
+              <kendo-chart-series-item
+                [type]="config.chartType"
+                [data]="chartData()"
+                field="value"
+                categoryField="category"
+                colorField="color"
+                [labels]="labelSettings()"
+                [connectors]="labelConnectors">
+              </kendo-chart-series-item>
+            } @else {
+              <kendo-chart-series-item
+                [type]="config.chartType"
+                [data]="chartData()"
+                field="value"
+                categoryField="category"
+                colorField="color"
+                [labels]="labelSettings()">
+              </kendo-chart-series-item>
+            }
           </kendo-chart-series>
           <kendo-chart-legend
             [visible]="config.showLegend !== false"
@@ -13500,6 +13744,20 @@ class PieChartConfigDialogComponent {
     initialCkQueryTarget;
     initialCkGroupBy;
     initialFilters;
+    initialCategoryColors;
+    initialLabelPosition;
+    initialHideLabelsBelowPercent;
+    addIcon = plusIcon;
+    removeIcon = trashIcon;
+    /** Rows of the category colour editor (AB#5622). */
+    categoryColorRows = [];
+    nextCategoryColorId = 1;
+    labelPositions = [
+        { value: undefined, label: 'Default' },
+        { value: 'outside', label: 'Outside (with connector lines)' },
+        { value: 'inside', label: 'Inside' },
+        { value: 'none', label: 'None' }
+    ];
     searchIcon = searchIcon;
     chartPieIcon = chartPieIcon;
     // State
@@ -13546,7 +13804,9 @@ class PieChartConfigDialogComponent {
         displayMode: 'legend',
         legendPosition: 'right',
         ckQueryTarget: 'models',
-        ckGroupBy: 'modelState'
+        ckGroupBy: 'modelState',
+        labelPosition: undefined,
+        hideLabelsBelowPercent: 0
     };
     get isValid() {
         if (this.form.dataSourceType === 'persistentQuery') {
@@ -13584,6 +13844,9 @@ class PieChartConfigDialogComponent {
         this.form.legendPosition = this.initialLegendPosition ?? 'right';
         this.form.ckQueryTarget = this.initialCkQueryTarget ?? 'models';
         this.form.ckGroupBy = this.initialCkGroupBy ?? 'modelState';
+        this.form.labelPosition = this.initialLabelPosition;
+        this.form.hideLabelsBelowPercent = this.initialHideLabelsBelowPercent ?? 0;
+        this.categoryColorRows = Object.entries(this.initialCategoryColors ?? {}).map(([category, color]) => ({ id: this.nextCategoryColorId++, category, color }));
         this.ignoreTimeFilter = this.initialIgnoreTimeFilter ?? false;
         this.entitySelectorId = this.initialEntitySelectorId;
         // Initialize filters
@@ -13717,6 +13980,23 @@ class PieChartConfigDialogComponent {
             aggregationType: c.aggregationType ?? null
         }));
     }
+    addCategoryColor() {
+        this.categoryColorRows = [...this.categoryColorRows, { id: this.nextCategoryColorId++, category: '', color: '' }];
+    }
+    removeCategoryColor(id) {
+        this.categoryColorRows = this.categoryColorRows.filter(row => row.id !== id);
+    }
+    /** Value of the native colour picker: the row's hex colour, else black (the picker needs a #rrggbb value). */
+    swatchValue(color) {
+        return /^#[0-9a-f]{6}$/i.test(color.trim()) ? color.trim() : '#000000';
+    }
+    /** The edited category colours; rows without category or colour are dropped; none = undefined. */
+    categoryColorsResult() {
+        const entries = this.categoryColorRows
+            .map(row => [row.category.trim(), row.color.trim()])
+            .filter(([category, color]) => category !== '' && color !== '');
+        return entries.length ? Object.fromEntries(entries) : undefined;
+    }
     onFiltersChange(updatedFilters) {
         this.filters = updatedFilters;
     }
@@ -13741,6 +14021,18 @@ class PieChartConfigDialogComponent {
             legendPosition: this.form.legendPosition,
             filters: filtersDto
         };
+        const categoryColors = this.categoryColorsResult();
+        if (categoryColors) {
+            result.categoryColors = categoryColors;
+        }
+        if (this.form.displayMode === 'labels') {
+            if (this.form.labelPosition) {
+                result.labelPosition = this.form.labelPosition;
+            }
+            if (this.form.hideLabelsBelowPercent && this.form.hideLabelsBelowPercent > 0) {
+                result.hideLabelsBelowPercent = this.form.hideLabelsBelowPercent;
+            }
+        }
         if (this.form.dataSourceType === 'persistentQuery') {
             if (!this.selectedPersistentQuery)
                 return;
@@ -13760,7 +14052,7 @@ class PieChartConfigDialogComponent {
         this.windowRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: PieChartConfigDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: PieChartConfigDialogComponent, isStandalone: true, selector: "mm-pie-chart-config-dialog", inputs: { initialDataSourceType: "initialDataSourceType", initialQueryRtId: "initialQueryRtId", initialQueryName: "initialQueryName", initialQueryFamily: "initialQueryFamily", initialIgnoreTimeFilter: "initialIgnoreTimeFilter", initialEntitySelectorId: "initialEntitySelectorId", initialChartType: "initialChartType", initialCategoryField: "initialCategoryField", initialValueField: "initialValueField", initialShowLabels: "initialShowLabels", initialShowLegend: "initialShowLegend", initialLegendPosition: "initialLegendPosition", initialCkQueryTarget: "initialCkQueryTarget", initialCkGroupBy: "initialCkGroupBy", initialFilters: "initialFilters" }, viewQueries: [{ propertyName: "querySelector", first: true, predicate: ["querySelector"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: PieChartConfigDialogComponent, isStandalone: true, selector: "mm-pie-chart-config-dialog", inputs: { initialDataSourceType: "initialDataSourceType", initialQueryRtId: "initialQueryRtId", initialQueryName: "initialQueryName", initialQueryFamily: "initialQueryFamily", initialIgnoreTimeFilter: "initialIgnoreTimeFilter", initialEntitySelectorId: "initialEntitySelectorId", initialChartType: "initialChartType", initialCategoryField: "initialCategoryField", initialValueField: "initialValueField", initialShowLabels: "initialShowLabels", initialShowLegend: "initialShowLegend", initialLegendPosition: "initialLegendPosition", initialCkQueryTarget: "initialCkQueryTarget", initialCkGroupBy: "initialCkGroupBy", initialFilters: "initialFilters", initialCategoryColors: "initialCategoryColors", initialLabelPosition: "initialLabelPosition", initialHideLabelsBelowPercent: "initialHideLabelsBelowPercent" }, viewQueries: [{ propertyName: "querySelector", first: true, predicate: ["querySelector"], descendants: true }], ngImport: i0, template: `
     <div class="config-container">
 
       <div class="config-form" [class.loading]="isLoadingInitial">
@@ -13956,6 +14248,48 @@ class PieChartConfigDialogComponent {
               </kendo-dropdownlist>
             </div>
           }
+
+          @if (form.displayMode === 'labels') {
+            <div class="form-field">
+              <label for="pie-label-position">Label Position</label>
+              <kendo-dropdownlist
+                id="pie-label-position"
+                data-pie-label-position
+                [data]="labelPositions"
+                [textField]="'label'"
+                [valueField]="'value'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.labelPosition">
+              </kendo-dropdownlist>
+            </div>
+            <div class="form-field">
+              <label for="pie-hide-labels-below">Hide labels of slices below (%)</label>
+              <kendo-numerictextbox
+                id="pie-hide-labels-below"
+                data-pie-hide-labels-below
+                [min]="0"
+                [max]="50"
+                [decimals]="1"
+                [format]="'n1'"
+                [(ngModel)]="form.hideLabelsBelowPercent">
+              </kendo-numerictextbox>
+              <span class="section-hint">Small neighbouring slices no longer overlap; 0 labels every slice.</span>
+            </div>
+          }
+
+          <div class="form-field" data-pie-category-colors>
+            <label>Category Colours</label>
+            <span class="section-hint">Raw category value or label → hex colour, CSS variable (--brand-paid) or status (success, warning, error, info). Others use the theme palette.</span>
+            @for (entry of categoryColorRows; track entry.id) {
+              <div class="category-color-row">
+                <kendo-textbox [(ngModel)]="entry.category" placeholder="Category (e.g. PAID)" [attr.aria-label]="'Category'"></kendo-textbox>
+                <kendo-textbox [(ngModel)]="entry.color" placeholder="#2fb37a or --token" [attr.aria-label]="'Colour'"></kendo-textbox>
+                <input type="color" class="category-color-swatch" [value]="swatchValue(entry.color)" (input)="entry.color = $any($event.target).value" [attr.aria-label]="'Pick colour'" />
+                <button kendoButton fillMode="flat" type="button" [svgIcon]="removeIcon" (click)="removeCategoryColor(entry.id)" [attr.aria-label]="'Remove category colour'" title="Remove"></button>
+              </div>
+            }
+            <button kendoButton fillMode="flat" type="button" [svgIcon]="addIcon" (click)="addCategoryColor()" data-pie-add-category-color>Add category colour</button>
+          </div>
         </div>
       </div>
 
@@ -13970,7 +14304,7 @@ class PieChartConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;flex:1;overflow-y:auto;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.radio-group{display:flex;gap:24px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "hideNavigationProperties", "attributePaths", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled", "acceptFamilies"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: SdTimeFilterToggleComponent, selector: "mm-sd-time-filter-toggle", inputs: ["family", "ignoreTimeFilter"], outputs: ["ignoreTimeFilterChange"] }, { kind: "component", type: EntitySelectorScopePickerComponent, selector: "mm-entity-selector-scope-picker", inputs: ["family", "entitySelectorId", "selectors"], outputs: ["entitySelectorIdChange"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;flex:1;overflow-y:auto;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.category-color-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}.category-color-row kendo-textbox{flex:1;min-width:0}.category-color-swatch{width:32px;height:28px;padding:0;border:none;background:none;cursor:pointer}.radio-group{display:flex;gap:24px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i3.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "hideNavigationProperties", "attributePaths", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: QuerySelectorComponent, selector: "mm-query-selector", inputs: ["placeholder", "hint", "disabled", "acceptFamilies"], outputs: ["querySelected", "queriesLoaded"] }, { kind: "component", type: SdTimeFilterToggleComponent, selector: "mm-sd-time-filter-toggle", inputs: ["family", "ignoreTimeFilter"], outputs: ["ignoreTimeFilterChange"] }, { kind: "component", type: EntitySelectorScopePickerComponent, selector: "mm-entity-selector-scope-picker", inputs: ["family", "entitySelectorId", "selectors"], outputs: ["entitySelectorIdChange"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: PieChartConfigDialogComponent, decorators: [{
             type: Component,
@@ -14182,6 +14516,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               </kendo-dropdownlist>
             </div>
           }
+
+          @if (form.displayMode === 'labels') {
+            <div class="form-field">
+              <label for="pie-label-position">Label Position</label>
+              <kendo-dropdownlist
+                id="pie-label-position"
+                data-pie-label-position
+                [data]="labelPositions"
+                [textField]="'label'"
+                [valueField]="'value'"
+                [valuePrimitive]="true"
+                [(ngModel)]="form.labelPosition">
+              </kendo-dropdownlist>
+            </div>
+            <div class="form-field">
+              <label for="pie-hide-labels-below">Hide labels of slices below (%)</label>
+              <kendo-numerictextbox
+                id="pie-hide-labels-below"
+                data-pie-hide-labels-below
+                [min]="0"
+                [max]="50"
+                [decimals]="1"
+                [format]="'n1'"
+                [(ngModel)]="form.hideLabelsBelowPercent">
+              </kendo-numerictextbox>
+              <span class="section-hint">Small neighbouring slices no longer overlap; 0 labels every slice.</span>
+            </div>
+          }
+
+          <div class="form-field" data-pie-category-colors>
+            <label>Category Colours</label>
+            <span class="section-hint">Raw category value or label → hex colour, CSS variable (--brand-paid) or status (success, warning, error, info). Others use the theme palette.</span>
+            @for (entry of categoryColorRows; track entry.id) {
+              <div class="category-color-row">
+                <kendo-textbox [(ngModel)]="entry.category" placeholder="Category (e.g. PAID)" [attr.aria-label]="'Category'"></kendo-textbox>
+                <kendo-textbox [(ngModel)]="entry.color" placeholder="#2fb37a or --token" [attr.aria-label]="'Colour'"></kendo-textbox>
+                <input type="color" class="category-color-swatch" [value]="swatchValue(entry.color)" (input)="entry.color = $any($event.target).value" [attr.aria-label]="'Pick colour'" />
+                <button kendoButton fillMode="flat" type="button" [svgIcon]="removeIcon" (click)="removeCategoryColor(entry.id)" [attr.aria-label]="'Remove category colour'" title="Remove"></button>
+              </div>
+            }
+            <button kendoButton fillMode="flat" type="button" [svgIcon]="addIcon" (click)="addCategoryColor()" data-pie-add-category-color>Add category colour</button>
+          </div>
         </div>
       </div>
 
@@ -14196,7 +14572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         </button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;flex:1;overflow-y:auto;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.radio-group{display:flex;gap:24px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;flex:1;overflow-y:auto;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.config-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-title{margin:0 0 16px;font-size:1rem;font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.section-hint{margin:0 0 12px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.form-field:last-child{margin-bottom:0}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.category-color-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}.category-color-row kendo-textbox{flex:1;min-width:0}.category-color-swatch{width:32px;height:28px;padding:0;border:none;background:none;cursor:pointer}.radio-group{display:flex;gap:24px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.column-item{display:flex;justify-content:space-between;gap:16px}.column-path{font-weight:500}.column-type{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
         }], propDecorators: { querySelector: [{
                 type: ViewChild,
                 args: ['querySelector']
@@ -14230,6 +14606,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 type: Input
             }], initialFilters: [{
                 type: Input
+            }], initialCategoryColors: [{
+                type: Input
+            }], initialLabelPosition: [{
+                type: Input
+            }], initialHideLabelsBelowPercent: [{
+                type: Input
             }] } });
 
 const CHART_TYPE_MAPPING = {
@@ -30194,7 +30576,10 @@ function registerDefaultWidgets(registry) {
                 initialShowLabels: pieWidget.showLabels,
                 initialShowLegend: pieWidget.showLegend,
                 initialLegendPosition: pieWidget.legendPosition,
-                initialFilters: pieWidget.filters
+                initialFilters: pieWidget.filters,
+                initialCategoryColors: pieWidget.categoryColors,
+                initialLabelPosition: pieWidget.labelPosition,
+                initialHideLabelsBelowPercent: pieWidget.hideLabelsBelowPercent
             };
         },
         applyConfigResult: (widget, result) => {
@@ -30233,7 +30618,10 @@ function registerDefaultWidgets(registry) {
                 showLabels: result.showLabels,
                 showLegend: result.showLegend,
                 legendPosition: result.legendPosition,
-                filters
+                filters,
+                categoryColors: result.categoryColors,
+                labelPosition: result.labelPosition,
+                hideLabelsBelowPercent: result.hideLabelsBelowPercent
             };
         },
         // SOLID: Factory function
@@ -30266,7 +30654,8 @@ function registerDefaultWidgets(registry) {
                         legendPosition: widget.legendPosition,
                         ckQueryTarget: ckDataSource.queryTarget,
                         ckGroupBy: ckDataSource.groupBy,
-                        filters: widget.filters
+                        filters: widget.filters,
+                        ...pieChartPresentationConfig(widget)
                     }
                 };
             }
@@ -30292,7 +30681,8 @@ function registerDefaultWidgets(registry) {
                     ...(dataSource.entitySelectorId && {
                         entitySelectorId: dataSource.entitySelectorId
                     }),
-                    filters: widget.filters
+                    filters: widget.filters,
+                    ...pieChartPresentationConfig(widget)
                 }
             };
         },
@@ -30316,7 +30706,8 @@ function registerDefaultWidgets(registry) {
                     showLabels: config['showLabels'] ?? false,
                     showLegend: config['showLegend'] ?? true,
                     legendPosition: config['legendPosition'] ?? 'right',
-                    filters: config['filters']
+                    filters: config['filters'],
+                    ...readPieChartPresentationConfig(config)
                 };
             }
             // Default: persistentQuery
@@ -30332,7 +30723,8 @@ function registerDefaultWidgets(registry) {
                 showLabels: config['showLabels'] ?? false,
                 showLegend: config['showLegend'] ?? true,
                 legendPosition: config['legendPosition'] ?? 'right',
-                filters: config['filters']
+                filters: config['filters'],
+                ...readPieChartPresentationConfig(config)
             };
         }
     });
@@ -31499,6 +31891,32 @@ function provideDefaultWidgets() {
         })
     ]);
 }
+/**
+ * Optional presentation settings of a pie chart for the board JSON (AB#5622): written only when
+ * set, so boards without them persist exactly as before.
+ */
+function pieChartPresentationConfig(widget) {
+    return {
+        ...(widget.categoryColors && Object.keys(widget.categoryColors).length ? { categoryColors: widget.categoryColors } : {}),
+        ...(widget.labelPosition ? { labelPosition: widget.labelPosition } : {}),
+        ...(widget.hideLabelsBelowPercent ? { hideLabelsBelowPercent: widget.hideLabelsBelowPercent } : {})
+    };
+}
+/** The string-valued entries of a JSON object (non-string colour values are dropped). */
+function stringEntries(record) {
+    return Object.fromEntries(Object.entries(record).filter((entry) => typeof entry[1] === 'string'));
+}
+/** Reads {@link pieChartPresentationConfig} back; unknown or missing values are left out. */
+function readPieChartPresentationConfig(config) {
+    const colors = config['categoryColors'];
+    const position = config['labelPosition'];
+    const minPercent = config['hideLabelsBelowPercent'];
+    return {
+        ...(colors && typeof colors === 'object' && !Array.isArray(colors) ? { categoryColors: stringEntries(colors) } : {}),
+        ...(position === 'inside' || position === 'outside' || position === 'none' ? { labelPosition: position } : {}),
+        ...(typeof minPercent === 'number' && minPercent > 0 ? { hideLabelsBelowPercent: minPercent } : {})
+    };
+}
 /**
  * Injection token for MeshBoard options
  */
@@ -31530,6 +31948,9 @@ function provideMeshBoard(options) {
     const providers = [
         { provide: MESHBOARD_OPTIONS, useValue: opts }
     ];
+    if (opts.messages) {
+        providers.push({ provide: MESHBOARD_MESSAGES, useValue: opts.messages });
+    }
     // Include default widgets unless explicitly disabled
     if (opts.includeDefaultWidgets !== false) {
         providers.push(provideAppInitializer(() => {
@@ -31539,6 +31960,13 @@ function provideMeshBoard(options) {
     }
     return makeEnvironmentProviders(providers);
 }
+/**
+ * Provides the host translations of the MeshBoard widget texts (`MESHBOARD_MESSAGES`, AB#5622)
+ * without `provideMeshBoard()` — for apps that register the widgets lazily.
+ */
+function provideMeshBoardMessages(messages) {
+    return makeEnvironmentProviders([{ provide: MESHBOARD_MESSAGES, useValue: messages }]);
+}
 /**
  * Provider function for registering custom widgets.
  * Use this to add your own widget types to MeshBoard.
@@ -32040,15 +32468,21 @@ function rowSpanForContent(contentHeight, rowHeight, gap, minRows) {
     const rows = Math.ceil((contentHeight + TILE_CHROME_HEIGHT + Math.max(0, gap)) / (rowHeight + Math.max(0, gap)));
     return Math.max(minRows, Math.min(MAX_CONTENT_ROWS, rows));
 }
+/**
+ * Widget types whose tile shrinks to its content on the native (desktop) tier (AB#5622): the
+ * cockpit "Needs attention" list, which otherwise leaves a large empty tile with few findings.
+ */
+const DESKTOP_CONTENT_FIT_TYPES = new Set(['attentionList']);
 function placeWidgetsForTier(widgets, tier, configuredColumns, contentSizing) {
     if (tier === 'none') {
-        return widgets.map(widget => ({
+        const placements = widgets.map(widget => ({
             widget,
             col: widget.col,
             row: widget.row,
             colSpan: widget.colSpan,
             rowSpan: widget.rowSpan
         }));
+        return contentSizing ? fitDesktopTilesToContent(placements, contentSizing) : placements;
     }
     const columns = columnsForTier(tier, configuredColumns);
     const placements = [...widgets]
@@ -32071,6 +32505,53 @@ function placeWidgetsForTier(widgets, tier, configuredColumns, contentSizing) {
     }
     return placements;
 }
+/**
+ * Native tier (AB#5622): {@link DESKTOP_CONTENT_FIT_TYPES} tiles take only the rows their content
+ * needs — between 1 and the configured `rowSpan`, never more, so neighbours never overlap. Rows
+ * that only the shrunk tiles occupied are then removed and the widgets below move up; rows that
+ * were already empty in the stored layout stay as designed. Presentation only: the configs (and
+ * thus the persisted row spans) are untouched. Mutates and returns `placements`.
+ */
+function fitDesktopTilesToContent(placements, sizing) {
+    const occupiedBefore = occupiedRows(placements);
+    let changed = false;
+    for (const placement of placements) {
+        const height = sizing.heights.get(placement.widget.id);
+        if (height === undefined || !DESKTOP_CONTENT_FIT_TYPES.has(placement.widget.type)) {
+            continue;
+        }
+        const rows = Math.min(placement.widget.rowSpan, rowSpanForContent(height, sizing.rowHeight, sizing.gap, 1));
+        if (rows < placement.rowSpan) {
+            placement.rowSpan = rows;
+            changed = true;
+        }
+    }
+    if (!changed) {
+        return placements;
+    }
+    const occupiedAfter = occupiedRows(placements);
+    const freed = [...occupiedBefore].filter(row => !occupiedAfter.has(row));
+    if (freed.length > 0) {
+        for (const placement of placements) {
+            const row = placement.row ?? 1;
+            const shift = freed.filter(freedRow => freedRow < row).length;
+            if (shift > 0) {
+                placement.row = row - shift;
+            }
+        }
+    }
+    return placements;
+}
+function occupiedRows(placements) {
+    const rows = new Set();
+    for (const placement of placements) {
+        const start = placement.row ?? 1;
+        for (let row = start; row < start + Math.max(1, placement.rowSpan); row++) {
+            rows.add(row);
+        }
+    }
+    return rows;
+}
 /**
  * Keeps widgets that share a row side by side on the reduced grid (AB#5558): two span-3 widgets
  * of a 6-column board both round to 2 of 3 columns and would wrap onto two half-empty rows. When
@@ -32710,6 +33191,14 @@ class AddWidgetDialogComponent {
                 return dataIcon;
             case 'pipelineExecutions':
                 return chartAreaRangeIcon;
+            case 'tenantCount':
+                return dataIcon;
+            case 'blueprintUpdates':
+                return dataIcon;
+            case 'servicesHealth':
+                return connectorIcon;
+            case 'versionInfo':
+                return dataIcon;
             case 'recentItems':
                 return clockArrowRotateIcon;
             default:
@@ -32759,6 +33248,14 @@ class AddWidgetDialogComponent {
                 return 'Construction Kit models available, ResolveFailed as error';
             case 'pipelineExecutions':
                 return 'Pipeline executions in the last 24 hours with failures and an hourly sparkline';
+            case 'tenantCount':
+                return 'Child tenants of this tenant (system cockpit)';
+            case 'blueprintUpdates':
+                return 'Installed blueprints with a newer catalog version';
+            case 'servicesHealth':
+                return 'Platform services whose health check reports Healthy';
+            case 'versionInfo':
+                return 'Versions the host application knows';
             case 'recentItems':
                 return 'Pages, entities and boards the viewer opened recently — personal, from the host application';
             default:
@@ -33730,8 +34227,10 @@ class MeshBoardViewComponent {
     displayGridWidgets = computed(() => {
         const tier = this.compactTier();
         const config = this.config();
-        // Phone tier only (AB#5558): content-sized widgets grow their tile to fit.
-        const contentSizing = tier === 'phone'
+        // Phone tier (AB#5558): content-sized widgets grow their tile to fit. Native tier outside edit
+        // mode (AB#5622): the attention list shrinks to its content, at most its stored rows — edit
+        // mode keeps the stored spans so drag/resize never persists a content-fitted size.
+        const contentSizing = tier === 'phone' || (tier === 'none' && !this.isEditMode())
             ? { heights: this.stateService.widgetContentHeights(), rowHeight: config.rowHeight, gap: config.gap }
             : undefined;
         return placeWidgetsForTier(this.gridWidgets(), tier, config.columns, contentSizing);
@@ -35010,6 +35509,36 @@ const DEFAULT_COCKPIT_WIDGET_MESSAGES = {
     kpiCkModelsResolveFailed: '{count} ResolveFailed',
     kpiCkModelsImportingStatus: 'Importing',
     kpiCkModelsAllAvailable: 'All available',
+    kpiNeedsTenantManagement: 'Needs the TenantManagement role.',
+    kpiTenantsLabel: 'Tenants',
+    kpiTenantsRegistered: 'Registered',
+    kpiTenantsNone: 'No child tenants',
+    kpiBlueprintsLabel: 'Blueprint updates',
+    kpiBlueprintsUpToDate: 'Up to date',
+    kpiBlueprintsAvailable: '{count} available',
+    kpiBlueprintsNone: 'No blueprints installed',
+    kpiBlueprintsInstalled: '{count} installed',
+    kpiBlueprintsServiceManaged: '{count} service-managed pending',
+    kpiBlueprintsTruncated: 'based on the first {read} of {total} catalog entries',
+    kpiBlueprintsScanning: 'Scanning catalogs…',
+    kpiServicesLabel: 'Services healthy',
+    kpiServicesAllHealthy: 'All healthy',
+    kpiServicesUnhealthy: '{count} unhealthy',
+    kpiServicesDegraded: '{count} degraded',
+    serviceStateDegraded: 'degraded',
+    serviceStateUnhealthy: 'unhealthy',
+    serviceStateUnknown: 'not reachable',
+    kpiVersionLabel: 'Version',
+    kpiVersionNone: 'No version information',
+    attentionServiceTitle: '{name} service is {state}',
+    attentionServiceText: 'Its health check reports a problem. The health details list the failing checks.',
+    attentionServiceUnreachableText: 'Its health endpoint does not answer. Features that use the service may fail.',
+    attentionServiceLink: 'Open health details',
+    attentionServiceExplain: 'Why is the {name} service {state}?',
+    attentionBlueprintUpdatesTitle: 'Blueprint updates available',
+    attentionBlueprintUpdatesText: '{list}. Updates are applied on the Blueprints page.',
+    attentionBlueprintUpdatesServiceManaged: 'Service-managed: {list} — applied by the owning service when it starts.',
+    attentionBlueprintUpdatesLink: 'Open blueprints',
     recentLoadFailed: 'Recently opened items could not be read.',
     recentListLabel: 'Recently opened',
     recentEmpty: 'Nothing opened yet. Pages, entities and boards you open appear here.',
@@ -35081,12 +35610,29 @@ const COCKPIT_ROLES = {
  * never run, so a board embedded in an app without this token shows no builder findings.
  */
 const COCKPIT_VIEWER_ACCESS = new InjectionToken('COCKPIT_VIEWER_ACCESS');
+/**
+ * The deprecated pre-4.x alias of a deployment-site target (`deployment-site` → `pool`,
+ * `deployment-sites` → `pools`), or `null` for every other target. Used as the fallback when a
+ * host's resolver has no page for the new kind yet (AB#5842).
+ */
+function legacyCockpitLinkTarget(target) {
+    switch (target.kind) {
+        case 'deployment-site':
+            return { kind: 'pool', rtId: target.rtId };
+        case 'deployment-sites':
+            return { kind: 'pools' };
+        default:
+            return null;
+    }
+}
 /** The host's link resolver; without it findings and KPI tiles carry no links. */
 const COCKPIT_LINK_RESOLVER = new InjectionToken('COCKPIT_LINK_RESOLVER');
 /** Optional: without it the attention list shows no "✦ Explain" buttons. */
 const COCKPIT_EXPLAIN_HANDLER = new InjectionToken('COCKPIT_EXPLAIN_HANDLER');
 /** The host's recent items; without it the "Recent items" widget says "Not available" and collapses. */
 const COCKPIT_RECENT_ITEMS = new InjectionToken('COCKPIT_RECENT_ITEMS');
+/** The host's versions; without it the "Version" tile says "Not available" and collapses. */
+const COCKPIT_VERSION_SOURCE = new InjectionToken('COCKPIT_VERSION_SOURCE');
 /**
  * Provides the host services of the cockpit widgets. The factories run in an injection context,
  * so they may `inject()` the application's services:
@@ -35112,6 +35658,9 @@ function provideCockpitWidgetHost(host) {
     if (host.recents) {
         providers.push({ provide: COCKPIT_RECENT_ITEMS, useFactory: host.recents });
     }
+    if (host.versions) {
+        providers.push({ provide: COCKPIT_VERSION_SOURCE, useFactory: host.versions });
+    }
     if (host.messages) {
         providers.push({ provide: COCKPIT_WIDGET_MESSAGES, useFactory: host.messages });
     }
@@ -35129,6 +35678,7 @@ class CockpitContextService {
     links = inject(COCKPIT_LINK_RESOLVER, { optional: true });
     explainHandler = inject(COCKPIT_EXPLAIN_HANDLER, { optional: true });
     ckModelService = inject(CkModelService);
+    configuration = inject(CONFIGURATION_SERVICE, { optional: true });
     /** The current tenant, or `null` when the host provides none. */
     async tenantId() {
         try {
@@ -35157,6 +35707,21 @@ class CockpitContextService {
             return false;
         }
     }
+    /**
+     * Whether `tenantId` is the installation's system tenant (`systemTenantId` of the platform
+     * configuration, `octosystem` when the host has none). Checks about the whole installation
+     * (service health, AB#5558) run only there.
+     */
+    isSystemTenant(tenantId) {
+        let systemTenantId;
+        try {
+            systemTenantId = this.configuration?.config?.systemTenantId;
+        }
+        catch {
+            systemTenantId = undefined;
+        }
+        return tenantId.toLowerCase() === (systemTenantId || 'octosystem').toLowerCase();
+    }
     /** Whether the viewer is a builder (`CockpitViewerAccess.isBuilder`); fails closed. */
     async isBuilder() {
         try {
@@ -35187,12 +35752,11 @@ class CockpitContextService {
      * keep their path unless the resolver rewrites it, and always keep their query parameters.
      */
     resolveLinkTarget(target, tenantId) {
-        let url;
-        try {
-            url = this.links?.resolve(target, tenantId) ?? null;
-        }
-        catch {
-            url = null;
+        let url = this.resolveWithHost(target, tenantId);
+        if (url === null) {
+            // Hosts that predate System.Communication 4.x only map `pool` / `pools` (AB#5842).
+            const legacy = legacyCockpitLinkTarget(target);
+            url = legacy ? this.resolveWithHost(legacy, tenantId) : null;
         }
         if (target.kind !== 'route') {
             return url ? { path: url } : null;
@@ -35207,6 +35771,14 @@ class CockpitContextService {
         }
         return target.queryParams && Object.keys(target.queryParams).length > 0 ? { path, queryParams: { ...target.queryParams } } : { path };
     }
+    resolveWithHost(target, tenantId) {
+        try {
+            return this.links?.resolve(target, tenantId) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
     /** Whether "✦ Explain" buttons are shown. */
     get explainEnabled() {
         return !!this.explainHandler?.enabled;
@@ -35402,7 +35974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 
 /** Names of models in ResolveFailed fetched with the counts. */
 const RESOLVE_FAILED_NAMES_FETCHED = 10;
-const SHARE_MS$2 = 10_000;
+const SHARE_MS$4 = 10_000;
 /**
  * CK model counts per state (`cockpitCkModelStates`, one request with aliased counts), shared for
  * a few seconds per tenant between the "CK model state" KPI and the ResolveFailed provider of the
@@ -35413,7 +35985,7 @@ class CockpitCkModelStatesService {
     shared = new Map();
     counts(tenantId, now = Date.now()) {
         const cached = this.shared.get(tenantId);
-        if (cached && now - cached.at <= SHARE_MS$2) {
+        if (cached && now - cached.at <= SHARE_MS$4) {
             return cached.counts;
         }
         const counts = this.gql.fetch({ variables: { first: RESOLVE_FAILED_NAMES_FETCHED }, fetchPolicy: 'network-only' }).pipe(map$1(result => {
@@ -35550,7 +36122,7 @@ function summarizeAdapterOnline(adapters) {
 /** Upper bound of adapters read; beyond it the KPI and findings say "≥" / "first N". */
 const COCKPIT_ADAPTER_LIMIT = 500;
 /** Answers younger than this are shared between the "Adapter status" KPI and the attention list. */
-const SHARE_MS$1 = 10_000;
+const SHARE_MS$3 = 10_000;
 /** A running adapter offline for longer than this is reported (ui-concept §5.5). */
 const ADAPTER_OFFLINE_GRACE_MS = 10 * 60 * 1000;
 /**
@@ -35564,7 +36136,7 @@ class CockpitAdapterStatesService {
     shared = new Map();
     states(tenantId, now = Date.now()) {
         const cached = this.shared.get(tenantId);
-        if (cached && now - cached.at <= SHARE_MS$1) {
+        if (cached && now - cached.at <= SHARE_MS$3) {
             return cached.states;
         }
         const states = this.gql.fetch({ variables: { first: COCKPIT_ADAPTER_LIMIT }, fetchPolicy: 'network-only' }).pipe(map$1(result => {
@@ -35670,7 +36242,7 @@ function explainTarget(states, what) {
 const CockpitUnregisteredPoolsDocumentDto = gql `
     query cockpitUnregisteredPools($first: Int) {
   runtime {
-    systemCommunicationPool(
+    systemCommunicationDeploymentSite(
       first: $first
       fieldFilter: [{attributePath: "communicationState", operator: EQUALS, comparisonValue: "UNREGISTERED"}]
       sortOrder: [{attributePath: "name", sortOrder: ASCENDING}]
@@ -35701,45 +36273,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 
 const NAMES_FETCHED = 10;
 /**
- * Pools no Communication Operator has registered for: their adapters and applications are not
- * rolled out. Needs what the pools page needs (CommunicationManagement + System.Communication).
+ * Deployment sites (`System.Communication/DeploymentSite`, called "pools" before
+ * System.Communication 4.x) no Communication Operator has registered for: the adapters and
+ * applications they host are not rolled out. Needs what the deployment sites page needs
+ * (CommunicationManagement + System.Communication).
+ *
+ * The class name and the provider id `pools-unregistered` keep the pre-4.x wording on purpose:
+ * the id is persisted in attention-list widget configs (`providerIds`) and must never change
+ * (AB#5842).
  */
 class UnregisteredPoolsAttentionProvider {
     context = inject(CockpitContextService);
-    poolsGql = inject(CockpitUnregisteredPoolsDtoGQL);
+    sitesGql = inject(CockpitUnregisteredPoolsDtoGQL);
+    /** Persisted in widget configs — stable since AB#5558, deliberately not renamed in AB#5842. */
     id = 'pools-unregistered';
-    label = 'Pools not registered';
-    description = 'Pools without a connected Communication Operator. Viewers with CommunicationManagement.';
+    label = 'Deployment sites not registered';
+    description = 'Deployment sites without a connected Communication Operator. Viewers with CommunicationManagement.';
     isVisible() {
         return this.context.allows([COCKPIT_ROLES.CommunicationManagement], ['System.Communication']);
     }
     load() {
-        return this.poolsGql.fetch({ variables: { first: NAMES_FETCHED }, fetchPolicy: 'network-only' }).pipe(map$1(result => {
-            const connection = result.data?.runtime?.systemCommunicationPool;
-            const pools = (connection?.items ?? []).filter((pool) => !!pool);
-            const count = connection?.totalCount ?? pools.length;
+        return this.sitesGql.fetch({ variables: { first: NAMES_FETCHED }, fetchPolicy: 'network-only' }).pipe(map$1(result => {
+            const connection = result.data?.runtime?.systemCommunicationDeploymentSite;
+            const sites = (connection?.items ?? []).filter((site) => !!site);
+            const count = connection?.totalCount ?? sites.length;
             if (count === 0) {
                 return [];
             }
-            const single = count === 1 && pools.length === 1 ? pools[0] : null;
+            const single = count === 1 && sites.length === 1 ? sites[0] : null;
             if (single) {
                 const name = single.name ?? String(single.rtId);
                 return [{
                         id: this.id,
                         severity: 'warning',
-                        title: `Pool "${name}" is not registered`,
-                        text: 'No operator is connected. Adapters and applications in this pool are not rolled out.',
-                        links: [{ label: 'Open pool', target: { kind: 'pool', rtId: String(single.rtId) } }, { label: 'All pools', target: { kind: 'pools' } }],
-                        explain: { label: name, rtId: String(single.rtId), ckTypeId: 'System.Communication/Pool', prompt: `Why is the pool "${name}" not registered?` }
+                        title: `Deployment site "${name}" is not registered`,
+                        text: 'No operator is connected. Adapters and applications on this deployment site are not rolled out.',
+                        links: [
+                            { label: 'Open deployment site', target: { kind: 'deployment-site', rtId: String(single.rtId) } },
+                            { label: 'All deployment sites', target: { kind: 'deployment-sites' } }
+                        ],
+                        explain: {
+                            label: name,
+                            rtId: String(single.rtId),
+                            ckTypeId: 'System.Communication/DeploymentSite',
+                            prompt: `Why is the deployment site "${name}" not registered?`
+                        }
                     }];
             }
             return [{
                     id: this.id,
                     severity: 'warning',
-                    title: `${plural(count, 'pool')} not registered`,
-                    text: `${nameList(pools.map(pool => pool.name ?? String(pool.rtId)), 3, count)}: no operator is connected, their adapters and applications are not rolled out.`,
-                    links: [{ label: 'Open pools', target: { kind: 'pools' } }],
-                    explain: { label: `${count} pools not registered`, prompt: `Why are ${count} pools not registered?` }
+                    title: `${plural(count, 'deployment site')} not registered`,
+                    text: `${nameList(sites.map(site => site.name ?? String(site.rtId)), 3, count)}: no operator is connected, their adapters and applications are not rolled out.`,
+                    links: [{ label: 'Open deployment sites', target: { kind: 'deployment-sites' } }],
+                    explain: { label: `${count} deployment sites not registered`, prompt: `Why are ${count} deployment sites not registered?` }
                 }];
         }));
     }
@@ -35948,7 +36535,7 @@ function statisticsCoverage(stat) {
 /** Upper bound of data flows read for the executions KPI; beyond it the tile says "≥". */
 const COCKPIT_DATA_FLOW_LIMIT = 500;
 /** Answers younger than this are shared between the "Pipeline executions 24 h" KPI and the attention list. */
-const SHARE_MS = 10_000;
+const SHARE_MS$2 = 10_000;
 /**
  * The data flows behind the "Pipeline executions 24 h" KPI and the failed-executions provider of
  * the attention list (AB#5622). Both ask within the same board load, so one request per tenant
@@ -35960,7 +36547,7 @@ class CockpitDataFlowExecutionsService {
     shared = new Map();
     executions(tenantId, now = Date.now()) {
         const cached = this.shared.get(tenantId);
-        if (cached && now - cached.at <= SHARE_MS) {
+        if (cached && now - cached.at <= SHARE_MS$2) {
             return cached.flows;
         }
         const entry = { at: now, flows: EMPTY };
@@ -36185,6 +36772,145 @@ function ckModelKpi(counts, messages = DEFAULT_COCKPIT_WIDGET_MESSAGES) {
         link: { kind: 'ckModels' }
     };
 }
+/**
+ * "Tenants" (system cockpit, AB#5558): child tenants of the current tenant — on the system tenant
+ * every tenant of the installation. The tenant list has no state, so the tile counts only.
+ */
+function tenantCountKpi(tenants, messages = DEFAULT_COCKPIT_WIDGET_MESSAGES) {
+    const m = withDefaults(messages);
+    const n = (value) => formatCount(value, m.numberLocale);
+    let detail;
+    if (tenants.firstIds.length > 0) {
+        const rest = tenants.total - tenants.firstIds.length;
+        const shown = tenants.firstIds.join(', ');
+        detail = rest > 0 ? formatCockpitMessage(m.kpiCkModelsMoreNames, { names: shown, count: n(rest) }) : shown;
+    }
+    return {
+        id: 'tenant-count',
+        label: m.kpiTenantsLabel,
+        value: n(tenants.total),
+        detail,
+        status: 'neutral',
+        statusLabel: tenants.total === 0 ? m.kpiTenantsNone : m.kpiTenantsRegistered,
+        link: { kind: 'tenants' }
+    };
+}
+/**
+ * "Blueprint updates" (system cockpit, AB#5558): installed blueprints with a newer catalog
+ * version. Only blueprints the tenant installed count as updates to act on (warning);
+ * service-managed ones (`System.*`) are applied by their service and only named in the detail.
+ */
+function blueprintUpdatesKpi(status, messages = DEFAULT_COCKPIT_WIDGET_MESSAGES) {
+    const m = withDefaults(messages);
+    const n = (value) => formatCount(value, m.numberLocale);
+    const own = status.updates.filter(update => !update.isServiceManaged);
+    const managed = status.updates.length - own.length;
+    const details = [];
+    if (own.length > 0) {
+        details.push(own.slice(0, 2).map(update => `${update.name} ${update.installedVersion} → ${update.availableVersion}`).join(', '));
+    }
+    else {
+        details.push(formatCockpitMessage(m.kpiBlueprintsInstalled, { count: n(status.installed) }));
+    }
+    if (managed > 0) {
+        details.push(formatCockpitMessage(m.kpiBlueprintsServiceManaged, { count: n(managed) }));
+    }
+    const note = truncationText(status.catalogRead, status.catalogTotal, m.kpiBlueprintsTruncated, m.numberLocale);
+    if (note) {
+        details.push(note);
+    }
+    let kpiStatus;
+    let statusLabel;
+    if (status.installed === 0 && status.updates.length === 0) {
+        kpiStatus = 'neutral';
+        statusLabel = m.kpiBlueprintsNone;
+    }
+    else if (own.length > 0) {
+        kpiStatus = 'warning';
+        statusLabel = formatCockpitMessage(m.kpiBlueprintsAvailable, { count: n(own.length) });
+    }
+    else {
+        kpiStatus = 'success';
+        statusLabel = m.kpiBlueprintsUpToDate;
+    }
+    return {
+        id: 'blueprint-updates',
+        label: m.kpiBlueprintsLabel,
+        value: n(own.length),
+        detail: details.join(' · ') || undefined,
+        status: kpiStatus,
+        statusLabel,
+        link: { kind: 'blueprints' }
+    };
+}
+/** The display word of a service health state (`degraded`, `unhealthy`, `not reachable`). */
+function serviceStateText(state, messages = DEFAULT_COCKPIT_WIDGET_MESSAGES) {
+    const m = withDefaults(messages);
+    switch (state) {
+        case 'degraded':
+            return m.serviceStateDegraded;
+        case 'unknown':
+            return m.serviceStateUnknown;
+        default:
+            return m.serviceStateUnhealthy;
+    }
+}
+/**
+ * "Services healthy" (system cockpit, AB#5558): platform services whose health check reports
+ * Healthy, of all checked. Unhealthy and not answering are errors, degraded a warning; the tile
+ * opens the health details of the first service with a problem (else Identity).
+ */
+function servicesHealthKpi(services, messages = DEFAULT_COCKPIT_WIDGET_MESSAGES) {
+    const m = withDefaults(messages);
+    const n = (value) => formatCount(value, m.numberLocale);
+    const healthy = services.filter(service => service.status === 'healthy');
+    const failing = services.filter(service => service.status === 'unhealthy' || service.status === 'unknown');
+    const degraded = services.filter(service => service.status === 'degraded');
+    const problems = [...failing, ...degraded];
+    let status;
+    let statusLabel;
+    if (failing.length > 0) {
+        status = 'error';
+        statusLabel = formatCockpitMessage(m.kpiServicesUnhealthy, { count: n(failing.length) });
+    }
+    else if (degraded.length > 0) {
+        status = 'warning';
+        statusLabel = formatCockpitMessage(m.kpiServicesDegraded, { count: n(degraded.length) });
+    }
+    else {
+        status = 'success';
+        statusLabel = m.kpiServicesAllHealthy;
+    }
+    return {
+        id: 'services-health',
+        label: m.kpiServicesLabel,
+        value: `${n(healthy.length)} / ${n(services.length)}`,
+        detail: problems.length > 0
+            ? problems.map(service => `${service.name}: ${serviceStateText(service.status, m)}`).join(' · ')
+            : services.map(service => service.name).join(', ') || undefined,
+        status,
+        statusLabel,
+        link: { kind: 'serviceHealth', service: problems[0]?.service ?? services[0]?.service ?? 'identity' }
+    };
+}
+/** "Version" (system cockpit, AB#5558): the host's versions; the first is the value. No page behind it. */
+function versionKpi(entries, messages = DEFAULT_COCKPIT_WIDGET_MESSAGES) {
+    const m = withDefaults(messages);
+    const valid = entries.filter(entry => !!entry?.label && !!entry.version);
+    const [first, ...rest] = valid;
+    return {
+        id: 'version-info',
+        label: m.kpiVersionLabel,
+        value: first?.version ?? '—',
+        detail: rest.map(entry => `${entry.label} ${entry.version}`).join(' · ') || undefined,
+        status: 'neutral',
+        statusLabel: first?.label ?? m.kpiVersionNone
+    };
+}
+/** Messages with every optional member filled (members added later are optional). */
+function withDefaults(messages) {
+    return resolveCockpitWidgetMessages(messages);
+}
 /** Scales the values to the box; the tallest value touches the top padding. */
 function sparklineGeometry(values, width = 120, height = 36, padding = 3) {
     if (values.length < 2) {
@@ -36349,6 +37075,325 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             type: Injectable
         }] });
 
+/** Display names, in check order. */
+const COCKPIT_SERVICE_NAMES = {
+    identity: 'Identity',
+    'asset-repository': 'Asset Repository',
+    bot: 'Bot',
+    'communication-controller': 'Communication Controller'
+};
+const SHARE_MS$1 = 10_000;
+/** `HealthCheck` → status (`null` = no answer). */
+function toServiceHealthStatus(check) {
+    switch (check?.status) {
+        case HealthStatus.Healthy:
+            return 'healthy';
+        case HealthStatus.Degraded:
+            return 'degraded';
+        case HealthStatus.Unhealthy:
+            return 'unhealthy';
+        default:
+            return 'unknown';
+    }
+}
+/**
+ * Health of the platform services (AB#5558, system cockpit): the same `/health` endpoints as the
+ * MeshBoard's service health tiles, all at once, shared for a few seconds between the "Services"
+ * KPI and the attention check. Optional services that are not part of the installation (empty
+ * URL, or `/` from older platform-services) are left out.
+ */
+class CockpitServiceHealthService {
+    health = inject(HealthService);
+    configuration = inject(CONFIGURATION_SERVICE, { optional: true });
+    shared = null;
+    services(now = Date.now()) {
+        if (this.shared && now - this.shared.at <= SHARE_MS$1) {
+            return this.shared.result;
+        }
+        const result = defer(() => from(this.check())).pipe(shareReplay({ bufferSize: 1, refCount: false }));
+        this.shared = { at: now, result };
+        return result;
+    }
+    async check() {
+        const config = this.configuration?.config;
+        const checks = [
+            ['identity', () => this.health.getIdentityServiceAsync()],
+            ['asset-repository', () => this.health.getAssetRepoServiceHealthAsync()],
+            ['bot', () => this.health.getBotServiceAsync()]
+        ];
+        if (!config || isConfigured(config.communicationServices)) {
+            checks.push(['communication-controller', () => this.health.getCommunicationControllerServiceAsync()]);
+        }
+        return Promise.all(checks.map(async ([service, read]) => {
+            let check;
+            try {
+                check = await read();
+            }
+            catch {
+                check = null;
+            }
+            return { service, name: COCKPIT_SERVICE_NAMES[service], status: toServiceHealthStatus(check) };
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitServiceHealthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitServiceHealthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitServiceHealthService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function isConfigured(url) {
+    return !!url && url !== '/';
+}
+
+/**
+ * Platform services whose health check is not Healthy (system cockpit, AB#5558): one finding per
+ * service — unhealthy or not answering is an error, degraded a warning — linking to the service's
+ * health details. The services serve the whole installation, so the check runs on the system
+ * tenant only (tenant cockpits are unchanged). Shares its requests with the "Services healthy" KPI.
+ */
+class ServicesHealthAttentionProvider {
+    context = inject(CockpitContextService);
+    /** Resolved on first load: hosts and tests that never run the check need no data providers. */
+    injector = inject(Injector);
+    messagesSource = inject(COCKPIT_WIDGET_MESSAGES, { optional: true });
+    id = 'services-unhealthy';
+    label = 'Platform services with problems';
+    description = 'Identity, Asset Repository, Bot or Communication Controller not healthy. System tenant only.';
+    async isVisible(context) {
+        return this.context.isSystemTenant(context.tenantId) && await this.context.allows([]);
+    }
+    load() {
+        return this.injector.get(CockpitServiceHealthService).services().pipe(map$1(services => {
+            const m = resolveCockpitWidgetMessages(readCockpitMessagesSource(this.messagesSource));
+            return services
+                .filter(service => service.status !== 'healthy')
+                .map((service) => {
+                const state = serviceStateText(service.status, m);
+                const title = formatCockpitMessage(m.attentionServiceTitle, { name: service.name, state });
+                return {
+                    id: `${this.id}:${service.service}`,
+                    severity: service.status === 'degraded' ? 'warning' : 'error',
+                    title,
+                    text: service.status === 'unknown' ? m.attentionServiceUnreachableText : m.attentionServiceText,
+                    links: [{ label: m.attentionServiceLink, target: { kind: 'serviceHealth', service: service.service } }],
+                    explain: { label: title, prompt: formatCockpitMessage(m.attentionServiceExplain, { name: service.name, state }) }
+                };
+            });
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ServicesHealthAttentionProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ServicesHealthAttentionProvider });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ServicesHealthAttentionProvider, decorators: [{
+            type: Injectable
+        }] });
+
+const CockpitBlueprintStatusDocumentDto = gql `
+    query cockpitBlueprintStatus($take: Int) {
+  blueprints {
+    installations {
+      blueprintId
+      isDependency
+    }
+    list(skip: 0, take: $take) {
+      totalCount
+      items {
+        name
+        version
+      }
+    }
+  }
+}
+    `;
+class CockpitBlueprintStatusDtoGQL extends i1.Query {
+    document = CockpitBlueprintStatusDocumentDto;
+    constructor(apollo) {
+        super(apollo);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitBlueprintStatusDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitBlueprintStatusDtoGQL, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitBlueprintStatusDtoGQL, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.Apollo }] });
+
+/** Catalog entries read with the installations (one page; the catalog lists one entry per name and version). */
+const COCKPIT_BLUEPRINT_CATALOG_LIMIT = 500;
+const SHARE_MS = 10_000;
+/**
+ * Blueprints whose name starts with `System.` are service-managed: the owning service applies and
+ * rolls them forward per tenant (mirrors `BlueprintIdExtensions.IsServiceManaged`).
+ */
+const SERVICE_MANAGED_BLUEPRINT_PREFIX = 'System.';
+/**
+ * `Name-Version` → parts. Splits at the last dash, like the Studio's blueprint pages (a `CkVersion`
+ * never contains a dash).
+ */
+function splitBlueprintId(blueprintId) {
+    const index = blueprintId.lastIndexOf('-');
+    return index < 0 ? { name: blueprintId, version: '' } : { name: blueprintId.slice(0, index), version: blueprintId.slice(index + 1) };
+}
+/**
+ * Compares two blueprint versions like the backend's `CkVersion` (`Major.Minor.Revision`,
+ * numeric, missing components 0): negative when `a` is older, positive when newer. A string
+ * comparison would rate `2.10.0` below `2.9.0` (AB#4837).
+ */
+function compareBlueprintVersions(a, b) {
+    const left = versionComponents(a);
+    const right = versionComponents(b);
+    for (let i = 0; i < 3; i++) {
+        if (left[i] !== right[i]) {
+            return left[i] - right[i];
+        }
+    }
+    return 0;
+}
+function versionComponents(version) {
+    const parts = version.split('.');
+    return [0, 1, 2].map(i => {
+        const parsed = Number.parseInt(parts[i] ?? '', 10);
+        return Number.isNaN(parsed) ? 0 : parsed;
+    });
+}
+/** The status from one `cockpitBlueprintStatus` answer. */
+function toBlueprintStatus(data) {
+    const installations = data?.blueprints?.installations ?? [];
+    const catalog = data?.blueprints?.list;
+    const highest = new Map();
+    for (const item of catalog?.items ?? []) {
+        if (!item?.name || !item.version) {
+            continue;
+        }
+        const known = highest.get(item.name);
+        if (!known || compareBlueprintVersions(item.version, known) > 0) {
+            highest.set(item.name, item.version);
+        }
+    }
+    const updates = [];
+    let installed = 0;
+    for (const installation of installations) {
+        if (!installation?.blueprintId) {
+            continue;
+        }
+        if (!installation.isDependency) {
+            installed++;
+        }
+        const { name, version } = splitBlueprintId(installation.blueprintId);
+        const available = highest.get(name);
+        if (available && compareBlueprintVersions(available, version) > 0) {
+            updates.push({ name, installedVersion: version, availableVersion: available, isServiceManaged: name.startsWith(SERVICE_MANAGED_BLUEPRINT_PREFIX) });
+        }
+    }
+    updates.sort((a, b) => Number(a.isServiceManaged) - Number(b.isServiceManaged) || a.name.localeCompare(b.name));
+    const read = catalog?.items?.length ?? 0;
+    return { installed, updates, catalogRead: read, catalogTotal: Math.max(catalog?.totalCount ?? 0, read) };
+}
+/**
+ * The tenant's blueprint status, shared for a few seconds per tenant between the "Blueprint
+ * updates" KPI and the attention check.
+ */
+class CockpitBlueprintStatusService {
+    gql = inject(CockpitBlueprintStatusDtoGQL);
+    shared = new Map();
+    status(tenantId, now = Date.now()) {
+        const cached = this.shared.get(tenantId);
+        if (cached && now - cached.at <= SHARE_MS) {
+            return cached.status;
+        }
+        const status = this.gql.fetch({ variables: { take: COCKPIT_BLUEPRINT_CATALOG_LIMIT }, fetchPolicy: 'network-only' }).pipe(map$1(result => toBlueprintStatus(result.data)), shareReplay({ bufferSize: 1, refCount: false }));
+        this.shared.set(tenantId, { at: now, status });
+        return status;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitBlueprintStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitBlueprintStatusService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitBlueprintStatusService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** "Name 1.0.0 → 1.1.0". */
+function describe(update) {
+    return `${update.name} ${update.installedVersion} → ${update.availableVersion}`;
+}
+/**
+ * Installed blueprints with a newer catalog version (system cockpit, AB#5558): one info finding
+ * with the count as badge, linking to the installed blueprints. Service-managed blueprints
+ * (`System.*`) are named separately — their service applies them. Runs on the system tenant only
+ * for now (it reads the catalogs, so tenant cockpits do not pay for it); same role as the
+ * Blueprints pages. Shares its request with the "Blueprint updates" KPI.
+ */
+class BlueprintUpdatesAttentionProvider {
+    context = inject(CockpitContextService);
+    /** Resolved on first load: hosts and tests that never run the check need no data providers. */
+    injector = inject(Injector);
+    messagesSource = inject(COCKPIT_WIDGET_MESSAGES, { optional: true });
+    id = 'blueprint-updates';
+    label = 'Blueprint updates available';
+    description = 'Installed blueprints with a newer version in the catalogs. System tenant, viewers with AdminPanelManagement.';
+    async isVisible(context) {
+        return this.context.isSystemTenant(context.tenantId) && await this.context.allows([COCKPIT_ROLES.AdminPanelManagement]);
+    }
+    load(context) {
+        return this.injector.get(CockpitBlueprintStatusService).status(context.tenantId).pipe(map$1(status => {
+            if (status.updates.length === 0) {
+                return [];
+            }
+            const m = resolveCockpitWidgetMessages(readCockpitMessagesSource(this.messagesSource));
+            const own = status.updates.filter(update => !update.isServiceManaged);
+            const managed = status.updates.filter(update => update.isServiceManaged);
+            const texts = [];
+            if (own.length > 0) {
+                texts.push(formatCockpitMessage(m.attentionBlueprintUpdatesText, { list: nameList(own.map(describe)) }));
+            }
+            if (managed.length > 0) {
+                texts.push(formatCockpitMessage(m.attentionBlueprintUpdatesServiceManaged, { list: nameList(managed.map(describe)) }));
+            }
+            const title = m.attentionBlueprintUpdatesTitle;
+            return [{
+                    id: this.id,
+                    severity: 'info',
+                    title,
+                    text: texts.join(' '),
+                    count: status.updates.length,
+                    links: [{ label: m.attentionBlueprintUpdatesLink, target: { kind: 'blueprints' } }]
+                }];
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BlueprintUpdatesAttentionProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BlueprintUpdatesAttentionProvider });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BlueprintUpdatesAttentionProvider, decorators: [{
+            type: Injectable
+        }] });
+
+/** Tenant ids read with the count. */
+const COCKPIT_CHILD_TENANT_IDS = 3;
+/**
+ * Child tenant count (AB#5558, system cockpit) from the asset repository's tenant list
+ * (`GET {tenantId}/v1/tenants`, the Child Tenants page). The list only knows id and database —
+ * there is no per-tenant state (enabled, mode, health) to group by.
+ */
+class CockpitChildTenantsService {
+    assetRepo = inject(AssetRepoService);
+    childTenants() {
+        return defer(() => from(this.assetRepo.getTenants(0, COCKPIT_CHILD_TENANT_IDS))).pipe(map$1(result => {
+            const ids = (result?.list ?? []).map(tenant => tenant?.tenantId).filter((id) => !!id);
+            return { total: Math.max(result?.totalCount ?? 0, ids.length), firstIds: ids };
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitChildTenantsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitChildTenantsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitChildTenantsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /** What a tile shows when its query failed (details are logged, never shown). */
 const KPI_ERROR_TEXT = 'The figure could not be loaded.';
 const COMMUNICATION_GATE = {
@@ -36361,7 +37406,14 @@ const COMMUNICATION_GATE = {
 const COCKPIT_KPI_GATES = {
     adapterStatus: COMMUNICATION_GATE,
     pipelineExecutions: COMMUNICATION_GATE,
-    ckModelState: { roles: [COCKPIT_ROLES.AdminPanelManagement], models: [], reason: 'Needs the AdminPanelManagement role.', reasonMessage: 'kpiNeedsAdminPanel' }
+    ckModelState: { roles: [COCKPIT_ROLES.AdminPanelManagement], models: [], reason: 'Needs the AdminPanelManagement role.', reasonMessage: 'kpiNeedsAdminPanel' },
+    // Same role as the Child Tenants page.
+    tenantCount: { roles: [COCKPIT_ROLES.TenantManagement], models: [], reason: 'Needs the TenantManagement role.', reasonMessage: 'kpiNeedsTenantManagement' },
+    // Same role as the Blueprints pages.
+    blueprintUpdates: { roles: [COCKPIT_ROLES.AdminPanelManagement], models: [], reason: 'Needs the AdminPanelManagement role.', reasonMessage: 'kpiNeedsAdminPanel' },
+    // The health endpoints and the health detail page are open to every signed-in user.
+    servicesHealth: { roles: [], models: [], reason: '', reasonMessage: 'notAvailable' },
+    versionInfo: { roles: [], models: [], reason: '', reasonMessage: 'notAvailable' }
 };
 /**
  * The cockpit KPIs (AB#5558, from the Home KPI strip of AB#5545): each KPI has its own gate and
@@ -36372,6 +37424,9 @@ class CockpitKpiService {
     adapterStates = inject(CockpitAdapterStatesService);
     ckModelStates = inject(CockpitCkModelStatesService);
     dataFlowExecutions = inject(CockpitDataFlowExecutionsService);
+    /** The system cockpit's data services are resolved on first use, so hosts without them need no providers. */
+    injector = inject(Injector);
+    versions = inject(COCKPIT_VERSION_SOURCE, { optional: true });
     messagesSource = inject(COCKPIT_WIDGET_MESSAGES, { optional: true });
     /**
      * The KPI's state. Texts (label, status, detail, reasons) come from `messages`, else from the
@@ -36380,7 +37435,7 @@ class CockpitKpiService {
     kpi(kind, messages) {
         const gate = COCKPIT_KPI_GATES[kind];
         return defer(() => {
-            const texts = messages ?? resolveCockpitWidgetMessages(readCockpitMessagesSource(this.messagesSource));
+            const texts = resolveCockpitWidgetMessages(messages ?? readCockpitMessagesSource(this.messagesSource));
             return from(this.resolve(gate)).pipe(switchMap(access => {
                 if (access.kind === 'noTenant') {
                     return of({ state: 'unavailable', reason: texts.noTenant, forBuilder: true });
@@ -36388,6 +37443,10 @@ class CockpitKpiService {
                 if (access.kind === 'denied') {
                     return of({ state: 'unavailable', reason: texts[gate.reasonMessage], forBuilder: access.builder });
                 }
+                if (kind === 'versionInfo' && !this.versions) {
+                    // Nothing to show without the host's versions: a quiet tile that collapses for non-builders.
+                    return of({ state: 'unavailable', reason: texts.notAvailable, forBuilder: false });
+                }
                 return this.load(kind, access.tenantId, texts).pipe(take(1), map$1((kpi) => ({ state: 'ready', kpi })));
             }), catchError$1(error => {
                 // Details go to the console only; the tile shows a generic text.
@@ -36414,6 +37473,14 @@ class CockpitKpiService {
                 return this.ckModelStates.counts(tenantId).pipe(map$1(counts => ckModelKpi(counts, texts)));
             case 'pipelineExecutions':
                 return this.dataFlowExecutions.executions(tenantId).pipe(map$1(({ flows, totalCount }) => executionKpi(flows, totalCount, texts)));
+            case 'tenantCount':
+                return this.injector.get(CockpitChildTenantsService).childTenants().pipe(map$1(tenants => tenantCountKpi(tenants, texts)));
+            case 'blueprintUpdates':
+                return this.injector.get(CockpitBlueprintStatusService).status(tenantId).pipe(map$1(status => blueprintUpdatesKpi(status, texts)));
+            case 'servicesHealth':
+                return this.injector.get(CockpitServiceHealthService).services().pipe(map$1(services => servicesHealthKpi(services, texts)));
+            case 'versionInfo':
+                return defer(() => from(Promise.resolve(this.versions?.entries() ?? []))).pipe(map$1(entries => versionKpi(entries, texts)));
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitKpiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -36503,7 +37570,9 @@ const COCKPIT_WIDGET_STYLES = `
 
 /**
  * Reports the natural content height of a cockpit list widget to the board (AB#5558), so the
- * phone tier grows the tile instead of clipping it (`MeshBoardStateService.setWidgetContentHeight`).
+ * phone tier grows the tile instead of clipping it (`MeshBoardStateService.setWidgetContentHeight`)
+ * and, on the desktop tier outside edit mode, the attention list shrinks to its content within its
+ * configured rows (AB#5622, `DESKTOP_CONTENT_FIT_TYPES`).
  *
  * `content` must wrap the widget's whole content without any height constraint (no `height` /
  * `min-height` relative to the tile), otherwise a growing tile would report a growing height.
@@ -37007,6 +38076,12 @@ class CockpitKpiWidgetComponent {
     options = signal({ showDetail: true, showSparkline: true }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     subscription = null;
+    /** Set once a load has been running for {@link COCKPIT_KPI_SLOW_LOADING_MS}. */
+    slowLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slowLoading" }] : /* istanbul ignore next */ []));
+    slowTimer = null;
+    kind = signal('adapterStatus', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
     result = this._result.asReadonly();
     isLoading = computed(() => this._result().state === 'loading', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
@@ -37021,6 +38096,15 @@ class CockpitKpiWidgetComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     kpi = this.data;
+    /** "Loading…", or what a slow KPI is doing (blueprint catalog scan) after a second. */
+    loadingText = computed(() => {
+        const texts = this.texts();
+        if (this.slowLoading() && this.kind() === 'blueprintUpdates') {
+            return texts.kpiBlueprintsScanning ?? texts.loading;
+        }
+        return texts.loading;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
     showDetail = computed(() => this.options().showDetail, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showDetail" }] : /* istanbul ignore next */ []));
     /** Role requirements only for builders; other viewers get a neutral "Not available" (AB#5558 review). */
@@ -37063,6 +38147,7 @@ class CockpitKpiWidgetComponent {
     }
     ngOnDestroy() {
         this.subscription?.unsubscribe();
+        this.clearSlowTimer();
     }
     refresh() {
         this.load();
@@ -37076,8 +38161,20 @@ class CockpitKpiWidgetComponent {
         });
         void this.context.tenantId().then(tenantId => this.tenantId.set(tenantId));
         const previous = this._result();
+        const kind = kpiKindOf(config);
+        this.kind.set(kind);
+        this.clearSlowTimer();
+        this.slowLoading.set(false);
+        // Timer only — the subscription below stays untouched, so a slow scan never blocks the tile.
+        this.slowTimer = setTimeout(() => {
+            this.slowTimer = null;
+            this.slowLoading.set(true);
+        }, COCKPIT_KPI_SLOW_LOADING_MS);
         this.loadedTexts = untracked(() => this.texts());
-        this.subscription = this.kpiService.kpi(kpiKindOf(config), this.loadedTexts).subscribe(result => {
+        this.subscription = this.kpiService.kpi(kind, this.loadedTexts).subscribe(result => {
+            if (result.state !== 'loading') {
+                this.clearSlowTimer();
+            }
             // A refresh keeps the last figure until the new one arrives (no flicker).
             if (result.state === 'loading' && previous.state === 'ready') {
                 return;
@@ -37089,6 +38186,12 @@ class CockpitKpiWidgetComponent {
             }
         });
     }
+    clearSlowTimer() {
+        if (this.slowTimer !== null) {
+            clearTimeout(this.slowTimer);
+            this.slowTimer = null;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CockpitKpiWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: CockpitKpiWidgetComponent, isStandalone: true, selector: "mm-cockpit-kpi-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #tileBody let-k>
@@ -37130,7 +38233,7 @@ class CockpitKpiWidgetComponent {
         <p class="cw-message cw-error-text" role="status" data-state="error">{{ reason() }}</p>
       }
       @default {
-        <p class="cw-message" role="status" data-state="loading">{{ texts().loading }}</p>
+        <p class="cw-message" role="status" data-state="loading" aria-live="polite">{{ loadingText() }}</p>
       }
     }
   `, isInline: true, styles: [":host{display:block;width:100%;height:100%;--_cw-text: var(--mm-cockpit-text, var(--kendo-color-on-app-surface, #1f2937));--_cw-muted: var(--mm-cockpit-text-muted, var(--kendo-color-subtle, #6b7280));--_cw-surface: var(--mm-cockpit-surface, transparent);--_cw-border: var(--mm-cockpit-border, var(--kendo-color-border, rgba(0, 0, 0, .12)));--_cw-border-strong: var(--mm-cockpit-border-strong, var(--kendo-color-subtle, rgba(0, 0, 0, .3)));--_cw-success: var(--mm-cockpit-success, var(--kendo-color-success, #2e7d32));--_cw-warning: var(--mm-cockpit-warning, var(--kendo-color-warning, #b26a00));--_cw-error: var(--mm-cockpit-error, var(--kendo-color-error, #c62828));--_cw-info: var(--mm-cockpit-info, var(--kendo-color-info, #0277bd));--_cw-neutral: var(--mm-cockpit-neutral, var(--kendo-color-subtle, #6b7280));--_cw-accent: var(--mm-cockpit-accent, var(--kendo-color-primary, #1976d2));--_cw-ai: var(--mm-cockpit-ai, #7c3aed);color:var(--_cw-text)}.cw-status-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:4px;font-size:.71875rem;font-weight:500;white-space:nowrap;color:var(--_cw-chip);background:color-mix(in srgb,var(--_cw-chip) 14%,transparent)}.cw-status-chip:before{content:\"\";width:6px;height:6px;border-radius:50%;background:currentColor}.cw-status-success{--_cw-chip: var(--_cw-success)}.cw-status-warning{--_cw-chip: var(--_cw-warning)}.cw-status-error{--_cw-chip: var(--_cw-error)}.cw-status-info{--_cw-chip: var(--_cw-info)}.cw-status-neutral{--_cw-chip: var(--_cw-neutral)}.cw-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cw-message{margin:0;padding:12px;color:var(--_cw-muted);font-size:.8125rem}a:focus-visible,button:focus-visible{outline:2px solid var(--_cw-accent);outline-offset:2px}\n", ".kpi-tile{display:flex;flex-direction:column;justify-content:center;gap:4px;height:100%;box-sizing:border-box;padding:8px 14px;color:inherit;text-decoration:none;min-width:0}a.kpi-tile:hover .kpi-value{text-decoration:underline;text-decoration-thickness:1px}.kpi-value{font-size:1.75rem;line-height:2.25rem;font-weight:600;font-variant-numeric:tabular-nums}.kpi-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.kpi-detail{color:var(--_cw-muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kpi-spark{display:block;width:100%;height:36px;margin-top:6px}.spark-area{fill:color-mix(in srgb,var(--_cw-accent) 16%,transparent)}.spark-line{fill:none;stroke:var(--_cw-accent);stroke-width:1.5;vector-effect:non-scaling-stroke}.spark-dot{fill:var(--_cw-accent)}.cw-error-text{color:var(--_cw-error)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -37177,13 +38280,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
         <p class="cw-message cw-error-text" role="status" data-state="error">{{ reason() }}</p>
       }
       @default {
-        <p class="cw-message" role="status" data-state="loading">{{ texts().loading }}</p>
+        <p class="cw-message" role="status" data-state="loading" aria-live="polite">{{ loadingText() }}</p>
       }
     }
   `, styles: [":host{display:block;width:100%;height:100%;--_cw-text: var(--mm-cockpit-text, var(--kendo-color-on-app-surface, #1f2937));--_cw-muted: var(--mm-cockpit-text-muted, var(--kendo-color-subtle, #6b7280));--_cw-surface: var(--mm-cockpit-surface, transparent);--_cw-border: var(--mm-cockpit-border, var(--kendo-color-border, rgba(0, 0, 0, .12)));--_cw-border-strong: var(--mm-cockpit-border-strong, var(--kendo-color-subtle, rgba(0, 0, 0, .3)));--_cw-success: var(--mm-cockpit-success, var(--kendo-color-success, #2e7d32));--_cw-warning: var(--mm-cockpit-warning, var(--kendo-color-warning, #b26a00));--_cw-error: var(--mm-cockpit-error, var(--kendo-color-error, #c62828));--_cw-info: var(--mm-cockpit-info, var(--kendo-color-info, #0277bd));--_cw-neutral: var(--mm-cockpit-neutral, var(--kendo-color-subtle, #6b7280));--_cw-accent: var(--mm-cockpit-accent, var(--kendo-color-primary, #1976d2));--_cw-ai: var(--mm-cockpit-ai, #7c3aed);color:var(--_cw-text)}.cw-status-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:4px;font-size:.71875rem;font-weight:500;white-space:nowrap;color:var(--_cw-chip);background:color-mix(in srgb,var(--_cw-chip) 14%,transparent)}.cw-status-chip:before{content:\"\";width:6px;height:6px;border-radius:50%;background:currentColor}.cw-status-success{--_cw-chip: var(--_cw-success)}.cw-status-warning{--_cw-chip: var(--_cw-warning)}.cw-status-error{--_cw-chip: var(--_cw-error)}.cw-status-info{--_cw-chip: var(--_cw-info)}.cw-status-neutral{--_cw-chip: var(--_cw-neutral)}.cw-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cw-message{margin:0;padding:12px;color:var(--_cw-muted);font-size:.8125rem}a:focus-visible,button:focus-visible{outline:2px solid var(--_cw-accent);outline-offset:2px}\n", ".kpi-tile{display:flex;flex-direction:column;justify-content:center;gap:4px;height:100%;box-sizing:border-box;padding:8px 14px;color:inherit;text-decoration:none;min-width:0}a.kpi-tile:hover .kpi-value{text-decoration:underline;text-decoration-thickness:1px}.kpi-value{font-size:1.75rem;line-height:2.25rem;font-weight:600;font-variant-numeric:tabular-nums}.kpi-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.kpi-detail{color:var(--_cw-muted);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kpi-spark{display:block;width:100%;height:36px;margin-top:6px}.spark-area{fill:color-mix(in srgb,var(--_cw-accent) 16%,transparent)}.spark-line{fill:none;stroke:var(--_cw-accent);stroke-width:1.5;vector-effect:non-scaling-stroke}.spark-dot{fill:var(--_cw-accent)}.cw-error-text{color:var(--_cw-error)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
+/**
+ * After this long still loading, a slow KPI says what it is doing instead of "Loading…"
+ * (AB#5622: the "Blueprint updates" tile scans every catalog, which can take several seconds).
+ */
+const COCKPIT_KPI_SLOW_LOADING_MS = 1000;
 /** What viewers without builder roles see instead of role requirements. */
 const NOT_AVAILABLE_TEXT = 'Not available';
 /** The KPI a cockpit KPI widget shows. */
@@ -37193,6 +38301,11 @@ function kpiKindOf(config) {
             return 'ckModelState';
         case 'pipelineExecutions':
             return 'pipelineExecutions';
+        case 'tenantCount':
+        case 'blueprintUpdates':
+        case 'servicesHealth':
+        case 'versionInfo':
+            return config.type;
         default:
             return 'adapterStatus';
     }
@@ -37571,11 +38684,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 
 /** The library's attention providers, in display order (errors of the platform first). */
 const BUILT_IN_ATTENTION_PROVIDERS = [
+    // System tenant only (AB#5558): hidden — and never loaded — on tenant cockpits.
+    ServicesHealthAttentionProvider,
     CkModelsResolveFailedAttentionProvider,
     AdaptersAttentionProvider,
     FailedExecutionsAttentionProvider,
     UnregisteredPoolsAttentionProvider,
-    FeaturesNotInstalledAttentionProvider
+    FeaturesNotInstalledAttentionProvider,
+    BlueprintUpdatesAttentionProvider
 ];
 function parseConfig(data) {
     if (!data.config) {
@@ -37606,7 +38722,11 @@ function positiveInteger(value) {
 const KPI_DESCRIPTIONS = {
     adapterStatus: 'Adapters online of the adapters expected to run — the same rule as the Integration overview. Needs CommunicationManagement.',
     ckModelState: 'Construction Kit models available of all installed models; ResolveFailed is shown as an error. Needs AdminPanelManagement.',
-    pipelineExecutions: 'Pipeline executions of all data flows in the last 24 hours with failures and an hourly sparkline — the same counting as the Data Flows list. Needs CommunicationManagement.'
+    pipelineExecutions: 'Pipeline executions of all data flows in the last 24 hours with failures and an hourly sparkline — the same counting as the Data Flows list. Needs CommunicationManagement.',
+    tenantCount: 'Child tenants of this tenant — on the system tenant every tenant of the installation. Needs TenantManagement.',
+    blueprintUpdates: 'Installed blueprints with a newer catalog version; service-managed ones are named separately. Needs AdminPanelManagement.',
+    servicesHealth: 'Platform services (Identity, Asset Repository, Bot, Communication Controller) whose health check reports Healthy.',
+    versionInfo: 'The versions the host application knows, e.g. its own build.'
 };
 /** Registration of one cockpit KPI widget type (one component and dialog for all three). */
 function registerKpiWidget(registry, type, label, defaultSize) {
@@ -37664,7 +38784,8 @@ function registerKpiWidget(registry, type, label, defaultSize) {
 }
 /**
  * Registers the cockpit widgets (AB#5558): "Attention list", "Adapter status", "CK model state",
- * "Pipeline executions 24 h" and "Recent items". Persisted with `dataSourceType: 'static'` and a small JSON
+ * "Pipeline executions 24 h", the system cockpit's "Tenants", "Blueprint updates", "Services
+ * healthy" and "Version", and "Recent items". Persisted with `dataSourceType: 'static'` and a small JSON
  * config (see the README widget catalogue for the exact keys).
  */
 function registerCockpitWidgets(registry) {
@@ -37721,6 +38842,11 @@ function registerCockpitWidgets(registry) {
     registerKpiWidget(registry, 'adapterStatus', 'Adapter Status', { colSpan: 2, rowSpan: 1 });
     registerKpiWidget(registry, 'ckModelState', 'CK Model State', { colSpan: 2, rowSpan: 1 });
     registerKpiWidget(registry, 'pipelineExecutions', 'Pipeline Executions 24 h', { colSpan: 2, rowSpan: 1 });
+    // System cockpit (AB#5558).
+    registerKpiWidget(registry, 'tenantCount', 'Tenants', { colSpan: 2, rowSpan: 1 });
+    registerKpiWidget(registry, 'blueprintUpdates', 'Blueprint Updates', { colSpan: 2, rowSpan: 1 });
+    registerKpiWidget(registry, 'servicesHealth', 'Services Healthy', { colSpan: 2, rowSpan: 1 });
+    registerKpiWidget(registry, 'versionInfo', 'Version', { colSpan: 2, rowSpan: 1 });
     registry.registerWidget({
         type: 'recentItems',
         label: 'Recent Items',
@@ -37777,5 +38903,5 @@ function provideCockpitWidgets() {
  * Generated bundle index. Do not edit.
  */
 
-export { ADAPTER_OFFLINE_GRACE_MS, ATTENTION_SEVERITY_ORDER, AdaptersAttentionProvider, AddWidgetDialogComponent, AiInsightsConfigDialogComponent, AiInsightsService, AiInsightsWidgetComponent, AlertBannerConfigDialogComponent, AlertBannerWidgetComponent, AlertListConfigDialogComponent, AlertListWidgetComponent, AssociationsConfigDialogComponent, AttentionListConfigDialogComponent, AttentionListWidgetComponent, AutoRefreshTimerService, BUILT_IN_ATTENTION_PROVIDERS, BarChartConfigDialogComponent, BarChartWidgetComponent, COCKPIT_ADAPTER_LIMIT, COCKPIT_ATTENTION_PROVIDERS, COCKPIT_DATA_FLOW_LIMIT, COCKPIT_EXPLAIN_HANDLER, COCKPIT_FAILED_EXECUTIONS_OPTIONS, COCKPIT_KPI_GATES, COCKPIT_LINK_RESOLVER, COCKPIT_RECENT_ITEMS, COCKPIT_ROLES, COCKPIT_VIEWER_ACCESS, COCKPIT_WIDGET_MESSAGES, COCKPIT_WIDGET_TYPES, CkModelsResolveFailedAttentionProvider, CockpitAdapterStatesService, CockpitAttentionService, CockpitCkModelStatesService, CockpitContextService, CockpitDataFlowExecutionsService, CockpitKpiConfigDialogComponent, CockpitKpiService, CockpitKpiWidgetComponent, DAY_MS, DEFAULT_ATTENTION_MAX_ITEMS, DEFAULT_COCKPIT_WIDGET_MESSAGES, DEFAULT_FAILED_EXECUTIONS_OPTIONS, DEFAULT_RECENT_ITEMS_MAX, DEFAULT_TIME_ZONE_MODE, DashboardDataService, DashboardGridService, EditModeStateService, EditWidgetDialogComponent, EntityAssociationsWidgetComponent, EntityCardConfigDialogComponent, EntityCardWidgetComponent, EntityDetailDialogComponent, EntitySelectorEditorComponent, EntitySelectorToolbarComponent, FailedExecutionsAttentionProvider, FeaturesNotInstalledAttentionProvider, GaugeConfigDialogComponent, GaugeWidgetComponent, HISTOGRAM_HOURS, HOUR_MS, HeatmapConfigDialogComponent, HeatmapWidgetComponent, KPI_ERROR_TEXT, KpiConfigDialogComponent, KpiWidgetComponent, LazyMarkdownComponent, LineChartConfigDialogComponent, LineChartWidgetComponent, MAX_RECENT_ITEMS, MESHBOARD_CHROME_ROUTE_DATA, MESHBOARD_DESCRIPTION_MARKER, MESHBOARD_EDIT_QUERY_PARAM, MESHBOARD_HEADER_MODE_ROUTE_DATA, MESHBOARD_OPTIONS, MESHBOARD_TENANT_ID_PROVIDER, MarkdownConfigDialogComponent, MarkdownWidgetComponent, MeshBoardDataService, MeshBoardGridService, MeshBoardManagerDialogComponent, MeshBoardPersistenceService, MeshBoardSettingsDialogComponent, MeshBoardSettingsResult, MeshBoardStateService, MeshBoardViewComponent, NOT_AVAILABLE_TEXT, PieChartConfigDialogComponent, PieChartWidgetComponent, QueryExecutorService, QuerySelectorComponent, RecentItemsConfigDialogComponent, RecentItemsWidgetComponent, RuntimeEntitySelectorComponent, STATE_STATUS_BY_KEY, ServiceHealthConfigDialogComponent, ServiceHealthWidgetComponent, StatsGridConfigDialogComponent, StatsGridWidgetComponent, StatusIndicatorConfigDialogComponent, StatusIndicatorWidgetComponent, StatusListConfigDialogComponent, StatusListWidgetComponent, SummaryCardConfigDialogComponent, SummaryCardWidgetComponent, TableConfigDialogComponent, TableWidgetComponent, TableWidgetDataSourceDirective, UnregisteredPoolsAttentionProvider, WidgetFactoryService, WidgetGroupComponent, WidgetGroupConfigDialogComponent, WidgetNotConfiguredComponent, WidgetRegistryService, adapterKpi, adaptersInError, adaptersOffline, buildHourlyHistogram, categoryStatus, ckModelKpi, classifyQuery, compareMeshBoardNavigation, countFlowExecutions, countLabel, countPipelineExecutions, enabledButNotInstalled, executionKpi, failedExecutionsSeverity, formatCockpitMessage, formatCount, humanizeCategory, isAdapterAtRest, isAdapterExpectedToRun, isAdapterOnline, isCockpitWidgetType, isMeshBoardChrome, isMeshBoardHeaderMode, isServiceConfigured, joinEncodedDescription, kpiKindOf, latestStatisticsUpdate, loadNgxMarkdown, nameList, newMeshBoardConfig, normalizeNavigation, observeThemeChanges, pipelineExecutionInputs, plural, provideCockpitWidgetHost, provideCockpitWidgets, provideDefaultWidgets, provideMeshBoard, provideProcessWidget, provideWidgetRegistrations, queryFamily, readMeshBoardNavigation, recentRelativeTime, registerCockpitWidgets, registerDefaultWidgets, registerProcessWidget, resolveCockpitWidgetMessages, resolveMeshBoardChrome, resolveMeshBoardHeaderMode, selectProviders, sortAttentionFindings, sparklineGeometry, splitEncodedDescription, statusColor, summarizeAdapterOnline, truncationNote, withMeshBoardNavigation };
+export { ADAPTER_OFFLINE_GRACE_MS, ATTENTION_SEVERITY_ORDER, AdaptersAttentionProvider, AddWidgetDialogComponent, AiInsightsConfigDialogComponent, AiInsightsService, AiInsightsWidgetComponent, AlertBannerConfigDialogComponent, AlertBannerWidgetComponent, AlertListConfigDialogComponent, AlertListWidgetComponent, AssociationsConfigDialogComponent, AttentionListConfigDialogComponent, AttentionListWidgetComponent, AutoRefreshTimerService, BUILT_IN_ATTENTION_PROVIDERS, BarChartConfigDialogComponent, BarChartWidgetComponent, BlueprintUpdatesAttentionProvider, COCKPIT_ADAPTER_LIMIT, COCKPIT_ATTENTION_PROVIDERS, COCKPIT_BLUEPRINT_CATALOG_LIMIT, COCKPIT_CHILD_TENANT_IDS, COCKPIT_DATA_FLOW_LIMIT, COCKPIT_EXPLAIN_HANDLER, COCKPIT_FAILED_EXECUTIONS_OPTIONS, COCKPIT_KPI_GATES, COCKPIT_KPI_SLOW_LOADING_MS, COCKPIT_LINK_RESOLVER, COCKPIT_RECENT_ITEMS, COCKPIT_ROLES, COCKPIT_SERVICE_NAMES, COCKPIT_VERSION_SOURCE, COCKPIT_VIEWER_ACCESS, COCKPIT_WIDGET_MESSAGES, COCKPIT_WIDGET_TYPES, CkModelsResolveFailedAttentionProvider, CockpitAdapterStatesService, CockpitAttentionService, CockpitBlueprintStatusService, CockpitChildTenantsService, CockpitCkModelStatesService, CockpitContextService, CockpitDataFlowExecutionsService, CockpitKpiConfigDialogComponent, CockpitKpiService, CockpitKpiWidgetComponent, CockpitServiceHealthService, DAY_MS, DEFAULT_ATTENTION_MAX_ITEMS, DEFAULT_COCKPIT_WIDGET_MESSAGES, DEFAULT_FAILED_EXECUTIONS_OPTIONS, DEFAULT_MESHBOARD_MESSAGES, DEFAULT_RECENT_ITEMS_MAX, DEFAULT_TIME_ZONE_MODE, DashboardDataService, DashboardGridService, EditModeStateService, EditWidgetDialogComponent, EntityAssociationsWidgetComponent, EntityCardConfigDialogComponent, EntityCardWidgetComponent, EntityDetailDialogComponent, EntitySelectorEditorComponent, EntitySelectorToolbarComponent, FALLBACK_SERIES_COLORS, FailedExecutionsAttentionProvider, FeaturesNotInstalledAttentionProvider, GaugeConfigDialogComponent, GaugeWidgetComponent, HISTOGRAM_HOURS, HOUR_MS, HeatmapConfigDialogComponent, HeatmapWidgetComponent, KPI_ERROR_TEXT, KpiConfigDialogComponent, KpiWidgetComponent, LazyMarkdownComponent, LineChartConfigDialogComponent, LineChartWidgetComponent, MAX_RECENT_ITEMS, MESHBOARD_CHROME_ROUTE_DATA, MESHBOARD_DESCRIPTION_MARKER, MESHBOARD_EDIT_QUERY_PARAM, MESHBOARD_HEADER_MODE_ROUTE_DATA, MESHBOARD_LABEL_RESOLVER, MESHBOARD_MESSAGES, MESHBOARD_OPTIONS, MESHBOARD_TENANT_ID_PROVIDER, MarkdownConfigDialogComponent, MarkdownWidgetComponent, MeshBoardDataService, MeshBoardGridService, MeshBoardManagerDialogComponent, MeshBoardPersistenceService, MeshBoardSettingsDialogComponent, MeshBoardSettingsResult, MeshBoardStateService, MeshBoardViewComponent, NOT_AVAILABLE_TEXT, PieChartConfigDialogComponent, PieChartWidgetComponent, QueryExecutorService, QuerySelectorComponent, RecentItemsConfigDialogComponent, RecentItemsWidgetComponent, RuntimeEntitySelectorComponent, SERVICE_MANAGED_BLUEPRINT_PREFIX, STATE_STATUS_BY_KEY, ServiceHealthConfigDialogComponent, ServiceHealthWidgetComponent, ServicesHealthAttentionProvider, StatsGridConfigDialogComponent, StatsGridWidgetComponent, StatusIndicatorConfigDialogComponent, StatusIndicatorWidgetComponent, StatusListConfigDialogComponent, StatusListWidgetComponent, SummaryCardConfigDialogComponent, SummaryCardWidgetComponent, TableConfigDialogComponent, TableWidgetComponent, TableWidgetDataSourceDirective, UnregisteredPoolsAttentionProvider, WidgetFactoryService, WidgetGroupComponent, WidgetGroupConfigDialogComponent, WidgetNotConfiguredComponent, WidgetRegistryService, adapterKpi, adaptersInError, adaptersOffline, blueprintUpdatesKpi, buildHourlyHistogram, categoryStatus, chartSeriesColors, ckModelKpi, classifyQuery, compareBlueprintVersions, compareMeshBoardNavigation, countFlowExecutions, countLabel, countPipelineExecutions, enabledButNotInstalled, executionKpi, failedExecutionsSeverity, formatCockpitMessage, formatCount, humanizeCategory, isAdapterAtRest, isAdapterExpectedToRun, isAdapterOnline, isCockpitWidgetType, isMeshBoardChrome, isMeshBoardHeaderMode, isServiceConfigured, joinEncodedDescription, kpiKindOf, latestStatisticsUpdate, legacyCockpitLinkTarget, loadNgxMarkdown, nameList, newMeshBoardConfig, normalizeNavigation, observeThemeChanges, pipelineExecutionInputs, plural, provideCockpitWidgetHost, provideCockpitWidgets, provideDefaultWidgets, provideMeshBoard, provideMeshBoardMessages, provideProcessWidget, provideWidgetRegistrations, queryFamily, readMeshBoardNavigation, recentRelativeTime, registerCockpitWidgets, registerDefaultWidgets, registerProcessWidget, resolveChartColor, resolveCockpitWidgetMessages, resolveMeshBoardChrome, resolveMeshBoardHeaderMode, resolveMeshBoardLabel, resolveMeshBoardMessages, selectProviders, serviceStateText, servicesHealthKpi, sortAttentionFindings, sparklineGeometry, splitBlueprintId, splitEncodedDescription, statusColor, summarizeAdapterOnline, tenantCountKpi, toBlueprintStatus, toServiceHealthStatus, truncationNote, versionKpi, withMeshBoardNavigation };
 //# sourceMappingURL=meshmakers-octo-meshboard.mjs.map