@conduction/nextcloud-vue 2.76.0 → 2.78.0

package/l10n/en.json

@@ -114,6 +114,7 @@
     "Saved just now": "Saved just now",
     "Saved {time}": "Saved {time}",
     "Saved": "Saved",
+    "Draft kept on this device": "Draft kept on this device",
     "Publish": "Publish",
     "Edit {title} (draft)": "Edit {title} (draft)",
     "Also search inside files": "Also search inside files",
@@ -453,6 +454,12 @@
     "NC Activity is currently unavailable.": "NC Activity is currently unavailable.",
     "Could not load activity.": "Could not load activity.",
     "Today": "Today",
+    "Last 8 hours": "Last 8 hours",
+    "Last 24 hours": "Last 24 hours",
+    "Last 7 days": "Last 7 days",
+    "Last 30 days": "Last 30 days",
+    "Last 90 days": "Last 90 days",
+    "Custom range": "Custom range",
     "Yesterday": "Yesterday",
     "Earlier": "Earlier",
     "System": "System",
@@ -1290,7 +1297,19 @@
     "Test environment": "Test environment",
     "Acceptance environment": "Acceptance environment",
     "About {label}": "About {label}",
-    "Could not load the form for this item.": "Could not load the form for this item."
+    "Could not load the form for this item.": "Could not load the form for this item.",
+    "Drop to add": "Drop to add",
+    "Or drag files onto this list.": "Or drag files onto this list.",
+    "This server does not keep track of what you open.": "This server does not keep track of what you open.",
+    "Log in to see what you opened recently.": "Log in to see what you opened recently.",
+    "Your recent items are not available right now.": "Your recent items are not available right now.",
+    "yesterday": "yesterday",
+    "tomorrow": "tomorrow",
+    "Filter by {column}": "Filter by {column}",
+    "Filter by {column}, active": "Filter by {column}, active",
+    "Turn notifications off": "Turn notifications off",
+    "Turn notifications on": "Turn notifications on",
+    "Could not change notifications.": "Could not change notifications."
   },
   "plurals": {
     "%n year": [
@@ -1344,6 +1363,18 @@
     "You see {count} capability of {total}.": [
       "You see {count} capability of {total}.",
       "You see {count} capabilities of {total}."
+    ],
+    "%n file added": [
+      "%n file added",
+      "%n files added"
+    ],
+    "{count} day ago": [
+      "{count} day ago",
+      "{count} days ago"
+    ],
+    "in {count} day": [
+      "in {count} day",
+      "in {count} days"
     ]
   }
 }

package/l10n/nl.json

@@ -114,6 +114,7 @@
     "Saved just now": "Zojuist opgeslagen",
     "Saved {time}": "Opgeslagen {time}",
     "Saved": "Opgeslagen",
+    "Draft kept on this device": "Concept bewaard op dit apparaat",
     "Edit {title} (draft)": "{title} bewerken (concept)",
     "Also search inside files": "Zoek ook in bestanden",
     "File matches are limited to the best 50.": "Bestandstreffers zijn beperkt tot de beste 50.",
@@ -452,6 +453,12 @@
     "NC Activity is currently unavailable.": "NC Activiteit is momenteel niet beschikbaar.",
     "Could not load activity.": "Kon activiteit niet laden.",
     "Today": "Vandaag",
+    "Last 8 hours": "Laatste 8 uur",
+    "Last 24 hours": "Laatste 24 uur",
+    "Last 7 days": "Laatste 7 dagen",
+    "Last 30 days": "Laatste 30 dagen",
+    "Last 90 days": "Laatste 90 dagen",
+    "Custom range": "Aangepaste periode",
     "Yesterday": "Gisteren",
     "Earlier": "Eerder",
     "System": "Systeem",
@@ -1341,7 +1348,19 @@
     "Test environment": "Testomgeving",
     "Acceptance environment": "Acceptatieomgeving",
     "About {label}": "Over {label}",
-    "Could not load the form for this item.": "Kon het formulier voor dit item niet laden."
+    "Could not load the form for this item.": "Kon het formulier voor dit item niet laden.",
+    "Drop to add": "Laat los om toe te voegen",
+    "Or drag files onto this list.": "Of sleep bestanden op deze lijst.",
+    "This server does not keep track of what you open.": "Deze server houdt niet bij welke items je opent.",
+    "Log in to see what you opened recently.": "Log in om te zien wat je onlangs opende.",
+    "Your recent items are not available right now.": "Je recente items zijn nu niet beschikbaar.",
+    "yesterday": "gisteren",
+    "tomorrow": "morgen",
+    "Filter by {column}": "Filteren op {column}",
+    "Filter by {column}, active": "Filteren op {column}, actief",
+    "Turn notifications off": "Meldingen uitzetten",
+    "Turn notifications on": "Meldingen aanzetten",
+    "Could not change notifications.": "Meldingen konden niet worden gewijzigd."
   },
   "plurals": {
     "%n year": [
@@ -1395,6 +1414,18 @@
     "You see {count} capability of {total}.": [
       "Je ziet {count} functionaliteit van {total}.",
       "Je ziet {count} functionaliteiten van {total}."
+    ],
+    "%n file added": [
+      "%n bestand toegevoegd",
+      "%n bestanden toegevoegd"
+    ],
+    "{count} day ago": [
+      "{count} dag geleden",
+      "{count} dagen geleden"
+    ],
+    "in {count} day": [
+      "over {count} dag",
+      "over {count} dagen"
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.76.0",
+  "version": "2.78.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAiCompanion/CnAiCompanion.vue

@@ -66,6 +66,7 @@ import CnAiChatPanel from './CnAiChatPanel.vue'
 import CnAiFloatingButton from './CnAiFloatingButton.vue'
 import { chatHealthUrl, DEFAULT_CHAT_APP_ID } from '../../composables/aiChatConfig.js'
 import { useAiChatStream } from '../../composables/useAiChatStream.js'
+import { isAppInstalled } from '../../utils/appInstalled.js'
 
 const HEALTH_TIMEOUT = 5000
 
@@ -340,6 +341,15 @@ export default {
 			}
 		},
 
+		/**
+		 * Ask the chat backend whether it can answer, and render only if so.
+		 *
+		 * Skipped without a request when the backend app is not installed for
+		 * this user.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/no-calls-to-missing-apps-and-presence-beacon/specs/ai-companion/spec.md#requirement-the-companion-does-not-probe-a-backend-that-is-not-installed
+		 */
 		async runHealthProbe() {
 			// RETRY before hiding. A single probe makes the whole companion
 			// disappear on one slow response, and "slow" is normal: measured on a
@@ -351,6 +361,19 @@ export default {
 			//
 			// A backend that is genuinely down fails all attempts and is still
 			// reported; this only stops one unlucky request from deciding.
+			//
+			// 🔴 NO PROBE AT AN APP THAT IS NOT THERE. Nextcloud already tells
+			// the page which apps the user has (`OC.appswebroots`), so asking a
+			// missing backend for its health is a guaranteed 404, three times
+			// per page, in every console. Measured on cloud.conduction.nl
+			// (round-5 check): hermiq not installed, three
+			// `/apps/hermiq/api/chat/health` 404s on every pipelinq and dossiq
+			// page. Hidden either way; now hidden without the requests.
+			if (!isAppInstalled(this.chatAppId || DEFAULT_CHAT_APP_ID)) {
+				this.probeSucceeded = false
+				return
+			}
+
 			for (let attempt = 1; attempt <= HEALTH_PROBE_ATTEMPTS; attempt++) {
 				try {
 					const response = await axios.get(chatHealthUrl(this.chatAppId), {

package/src/components/CnAppNav/CnAppNav.vue

@@ -183,7 +183,19 @@
 					v-if="isCaption(item)"
 					:key="item.id"
 					:name="resolveLabel(item)"
-					:data-testid="`cn-nav-caption-${item.id}`" />
+					:data-testid="`cn-nav-caption-${item.id}`">
+					<template v-if="item.href" #actions>
+						<NcActionLink
+							:href="item.href"
+							:aria-label="captionEditLabel(item)"
+							:data-testid="`cn-nav-caption-edit-${item.id}`">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							{{ captionEditLabel(item) }}
+						</NcActionLink>
+					</template>
+				</NcAppNavigationCaption>
 				<NcAppNavigationItem
 					v-else
 					:key="item.id"
@@ -424,7 +436,19 @@
 							v-if="isCaption(item)"
 							:key="item.id"
 							:name="resolveLabel(item)"
-							:data-testid="`cn-nav-caption-${item.id}`" />
+							:data-testid="`cn-nav-caption-${item.id}`">
+							<template v-if="item.href" #actions>
+								<NcActionLink
+									:href="item.href"
+									:aria-label="captionEditLabel(item)"
+									:data-testid="`cn-nav-caption-edit-${item.id}`">
+									<template #icon>
+										<Pencil :size="20" />
+									</template>
+									{{ captionEditLabel(item) }}
+								</NcActionLink>
+							</template>
+						</NcAppNavigationCaption>
 						<NcAppNavigationItem
 							v-else
 							:key="item.id"
@@ -466,7 +490,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcAppNavigation, NcAppNavigationCaption, NcAppNavigationItem, NcAppNavigationList, NcAppNavigationNew, NcAppNavigationSettings, NcButton, NcCounterBubble } from '@nextcloud/vue'
+import { NcActionLink, NcAppNavigation, NcAppNavigationCaption, NcAppNavigationItem, NcAppNavigationList, NcAppNavigationNew, NcAppNavigationSettings, NcButton, NcCounterBubble } from '@nextcloud/vue'
 import { toRaw } from 'vue'
 import BookOpenVariant from 'vue-material-design-icons/BookOpenVariant.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
@@ -474,6 +498,7 @@ import Cog from 'vue-material-design-icons/Cog.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
 import MapMarkerPath from 'vue-material-design-icons/MapMarkerPath.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ShieldAccountOutline from 'vue-material-design-icons/ShieldAccountOutline.vue'
 import { ICON_MAP } from '../CnIcon/CnIcon.vue'
@@ -560,6 +585,8 @@ export default {
 	name: 'CnAppNav',
 
 	components: {
+		NcActionLink,
+		Pencil,
 		NcAppNavigation,
 		NcAppNavigationCaption,
 		NcAppNavigationItem,
@@ -1921,8 +1948,10 @@ export default {
 		/**
 		 * Whether a menu entry renders as a `NcAppNavigationCaption`
 		 * (`type: "caption"`) rather than a clickable
-		 * `NcAppNavigationItem`. Caption entries ignore `route`, `href`,
-		 * `action`, `icon`, `count`, `children`, and `pinned`.
+		 * `NcAppNavigationItem`. Caption entries ignore `route`, `action`,
+		 * `icon`, `count`, `children`, and `pinned`. A caption's `href` is
+		 * drawn as a pencil link beside the heading: the place where what
+		 * stands under it is changed (a user's own choice of entries, say).
 		 *
 		 * @param {{ type?: string }} item Menu entry descriptor.
 		 * @return {boolean}
@@ -1931,6 +1960,16 @@ export default {
 			return item?.type === 'caption'
 		},
 
+		/**
+		 * The accessible name of a caption's pencil link.
+		 *
+		 * @param {object} item The caption entry.
+		 * @return {string} "Change {caption}", translated.
+		 */
+		captionEditLabel(item) {
+			return t('nextcloud-vue', 'Change {name}', { name: this.resolveLabel(item) })
+		},
+
 		/**
 		 * Whether the host has registered a scoped slot named
 		 * `item-${id}-actions` for this menu item. Used to gate template

package/src/components/CnBoardView/CnBoardView.vue

@@ -308,6 +308,7 @@
 import { translate as t } from '@nextcloud/l10n'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { normalizeLook } from '../../composables/useLook.js'
+import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { buildBoardColumns, resolveStageColor } from '../../utils/boardColumns.js'
 import { buildSwimlanes } from '../../utils/boardSwimlanes.js'
 import { DROP_OUTCOMES, runBoardDrop } from '../../utils/boardTransition.js'
@@ -688,7 +689,7 @@ export default {
 		pillVariant(card) {
 			const raw = this.textOf(readPath(card, this.roles.pill))
 			const variant = this.roles.pillColors[raw] ?? this.roles.pillColors[raw.toLowerCase()]
-			return ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(variant) ? variant : 'default'
+			return isBadgeVariant(variant) ? variant : 'default'
 		},
 
 		/**

package/src/components/CnCellRenderer/CnCellRenderer.md

@@ -89,6 +89,7 @@ fall back to the normal rendering. See `docs/migrating-to-manifest.md` →
 Column widget — `widget="badge"`, `widget="fkResolve"` (uuid → related object label via the shared object store with per-schema caching; config `widgetProps { register, schema, labelField }`), and `widget="link"` are built-in; any other id resolves against the app's `cellWidgets` registry (`CnAppRoot`'s `cellWidgets` prop → `cnCellWidgets`), and that component receives `{ value, row, property, formatted, ...widgetProps }`. `widget` takes precedence over `formatter`; when both are set the widget gets the formatter-shaped value as `formatted`. See `docs/migrating-to-manifest.md` → "Column widgets" + "Built-in cell formatters / widgets".
 
 - `widget="badge"` — `CnStatusBadge` pill; `widgetProps.variant` picks the colour.
+  An enum value shows its `x-enum-labels` label, translated, as the plain enum cell does; a column `formatter` still wins. `widgetProps.colorMap` is looked up by the stored value when it has an entry for it, else by the label. The `link` widget and the `swatch` format show the same label.
 - `widget="link"` — `<router-link>` when `widgetProps.route` is a manifest page id, or when `widgetProps.routeMap` maps the row's `widgetProps.routeField` value to one (a value the map does not hold falls back to `route`, then to text); `<a target="_blank">` when `widgetProps.href` is set (with `{key}` placeholders substituted from the row); plain text + once-per-session `console.warn` when neither resolves (silence with `widgetProps.fallback:"silent"`). For non-`id` route params: `widgetProps.params: { routeParam: "rowField" }`. Default param map is `{ id: row[rowKey] }` — see the `row-key` prop below.
 
 ```vue

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -10,12 +10,29 @@
 			:formatted="formattedValue"
 			v-bind="widgetProps" />
 
-		<!-- Built-in "badge" widget — renders the (possibly formatter-shaped) value as a status pill -->
+		<!-- Built-in "group" widget: a Nextcloud group id (or a list of them)
+		     shown as the group's display name, cached per id. Used on its own
+		     for a property marked `referenceType: nextcloud-group` /
+		     `format: nc-group` unless the column has a formatter. -->
+		<template v-else-if="isGroupCell">
+			<span v-if="!groupIds.length" class="cn-cell-renderer__dash">—</span>
+			<span v-else class="cn-cell-renderer__groups">
+				<template v-for="(gid, i) in groupIds" :key="gid">
+					<span v-if="i > 0">, </span>
+					<CnGroupNameCell :gid="gid" />
+				</template>
+			</span>
+		</template>
+
+		<!-- Built-in "badge" widget: renders the value as a status pill. An enum
+		     value shows its label (x-enum-labels, translated) unless a formatter
+		     shapes it; the colour stays keyed on the raw value. -->
 		<template v-else-if="widget === 'badge'">
 			<CnStatusBadge v-if="hasValue"
-				:label="String(formattedValue)"
+				:label="labelledValue"
 				:variant="badgeVariant"
-				:colorMap="badgeColorMap" />
+				:colorMap="badgeColorMap"
+				:colorKey="badgeColorKey" />
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
@@ -64,7 +81,7 @@
 				v-if="linkRoute"
 				:to="linkRoute"
 				class="cn-cell-renderer__link">
-				{{ formattedValue }}
+				{{ labelledValue }}
 			</router-link>
 			<a
 				v-else-if="linkHref"
@@ -72,9 +89,9 @@
 				target="_blank"
 				rel="noopener"
 				class="cn-cell-renderer__link">
-				{{ formattedValue }}
+				{{ labelledValue }}
 			</a>
-			<span v-else :title="rawTitle">{{ formattedValue }}</span>
+			<span v-else :title="rawTitle">{{ labelledValue }}</span>
 		</template>
 
 		<!-- Built-in "avatar" widget: a person as an avatar with the name beside
@@ -127,7 +144,7 @@
 					class="cn-cell-renderer__swatch-dot"
 					:style="{ backgroundColor: swatchColor }"
 					aria-hidden="true" />
-				<span v-if="hasValue" :title="rawTitle">{{ formattedValue }}</span>
+				<span v-if="hasValue" :title="rawTitle">{{ labelledValue }}</span>
 				<span v-else class="cn-cell-renderer__dash">—</span>
 			</span>
 		</template>
@@ -192,11 +209,12 @@ import { getCanonicalLocale } from '@nextcloud/l10n'
 import { NcAvatar, NcDateTime } from '@nextcloud/vue'
 import CheckBold from 'vue-material-design-icons/CheckBold.vue'
 import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
+import CnGroupNameCell from './CnGroupNameCell.vue'
 import { parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
 import { safeCurrencyCode } from '../../utils/formatMetric.js'
 import { objectFieldValue } from '../../utils/objectName.js'
 import { safeHref } from '../../utils/safeHref.js'
-import { formatValue } from '../../utils/schema.js'
+import { formatValue, isGroupProp } from '../../utils/schema.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
 /** A uuid in any version, the shape OpenRegister ids take. */
@@ -226,6 +244,7 @@ export default {
 	components: {
 		CnStatusBadge,
 		CnFkResolveCell,
+		CnGroupNameCell,
 		CheckBold,
 		NcAvatar,
 		NcDateTime,
@@ -307,6 +326,9 @@ export default {
 		 * a date whose colour follows `widgetProps.variantWhen`, rules on the
 		 * number of days until the date (`[{ op: "lt", value: 0, variant:
 		 * "error" }, { op: "lte", value: 5, variant: "warning" }]`).
+		 * The built-in id `"group"` shows a Nextcloud group id (or a list of
+		 * them) as the group's display name; a column whose property is
+		 * marked `referenceType: "nextcloud-group"` gets it without asking.
 		 * Takes precedence over `formatter`/the type-aware rendering, but the
 		 * value handed to the widget is the formatter-shaped `formatted` when
 		 * `formatter` is also set.
@@ -577,6 +599,79 @@ export default {
 			return c || null
 		},
 
+		/**
+		 * Whether this cell shows Nextcloud group names: the column asks for
+		 * `widget: "group"`, or it names no widget and no formatter and its
+		 * property is a group (or a list of groups).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-a-group-cell-shows-the-groups-display-name
+		 * @return {boolean}
+		 */
+		isGroupCell() {
+			if (this.widget === 'group') {
+				return true
+			}
+			if (this.widget || this.hasFormatter) {
+				return false
+			}
+			const p = this.property
+			if (!p || typeof p !== 'object') {
+				return false
+			}
+			return isGroupProp(p) || (p.type === 'array' && isGroupProp(p.items))
+		},
+
+		/**
+		 * The group ids in this cell, empty ones dropped.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-a-group-cell-shows-the-groups-display-name
+		 * @return {string[]}
+		 */
+		groupIds() {
+			const raw = this.value
+			const list = Array.isArray(raw) ? raw : [raw]
+			return list
+				.filter((gid) => (typeof gid === 'string' && gid !== '') || typeof gid === 'number')
+				.map((gid) => String(gid))
+		},
+
+		/**
+		 * The text a built-in widget (`badge`, `link`) or a swatch shows. An
+		 * enum value reads its label the way the plain enum cell does
+		 * (`enumLabel`: `x-enum-labels`, translated), so a list says "Active"
+		 * where the detail page does, not the stored "active". A column
+		 * formatter still wins: an app that shapes the value itself gets
+		 * exactly what its formatter returns.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/cell-labels-and-draft-indicator/specs/cell-labels-and-draft-indicator/spec.md#requirement-a-built-in-cell-widget-shows-an-enum-value-by-its-label
+		 */
+		labelledValue() {
+			if (!this.hasFormatter && this.isEnum && this.hasValue && typeof this.value !== 'object') {
+				return this.enumLabel
+			}
+			return String(this.formattedValue)
+		},
+
+		/**
+		 * The key the built-in `badge` looks its colour up by: the raw value
+		 * when `widgetProps.colorMap` has an entry for it (case-insensitive),
+		 * so a translated label keeps the colour the manifest keyed on the
+		 * stored code. Otherwise '' and the badge looks up its label, as before,
+		 * which keeps a map keyed on a formatter's output working.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/cell-labels-and-draft-indicator/specs/cell-labels-and-draft-indicator/spec.md#requirement-a-built-in-cell-widget-shows-an-enum-value-by-its-label
+		 */
+		badgeColorKey() {
+			const map = this.badgeColorMap
+			if (!map || !this.hasValue || typeof this.value === 'object') {
+				return ''
+			}
+			const raw = String(this.value).toLowerCase()
+			return Object.keys(map).some((key) => key.toLowerCase() === raw) ? String(this.value) : ''
+		},
+
 		/** Variant for the built-in `badge` widget — `widgetProps.variant` or `'default'`. */
 		badgeVariant() {
 			return (this.widgetProps && this.widgetProps.variant) || 'default'
@@ -1048,8 +1143,10 @@ export default {
 	color: var(--color-text-error, var(--color-error-text));
 }
 
+/* The text variant, not the fill: from Nextcloud 32 `--color-success` is a
+   background colour and too pale for a 16px glyph on a light theme. */
 .cn-cell-renderer__icon--success {
-	color: var(--color-success);
+	color: var(--color-text-success, var(--color-success-text, var(--color-success)));
 }
 
 .cn-cell-renderer__swatch-wrap {

package/src/components/CnCellRenderer/CnGroupNameCell.vue

@@ -0,0 +1,61 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+
+  CnGroupNameCell: one Nextcloud group id shown as the group's display name.
+  The name is looked up once per page (utils/groupAutocomplete.js); until it
+  arrives, and when it cannot be found, the cell shows the id.
+-->
+<template>
+	<span class="cn-group-name-cell" :title="gid">{{ label }}</span>
+</template>
+
+<script>
+import { groupDisplayName, loadGroupDisplayName } from '../../utils/groupAutocomplete.js'
+
+/**
+ * CnGroupNameCell renders a Nextcloud group id as its display name.
+ *
+ * ```vue
+ * <CnGroupNameCell gid="toezicht" />
+ * ```
+ *
+ * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-a-group-cell-shows-the-groups-display-name
+ */
+export default {
+	name: 'CnGroupNameCell',
+
+	props: {
+		/** The group id to show. */
+		gid: {
+			type: String,
+			required: true,
+		},
+	},
+
+	computed: {
+		/**
+		 * The cached display name, or the id while it loads or when unknown.
+		 *
+		 * @return {string}
+		 */
+		label() {
+			return groupDisplayName(this.gid) || this.gid
+		},
+	},
+
+	watch: {
+		gid: {
+			immediate: true,
+			/**
+			 * Ask for the name of a new id (cached, so once per id per page).
+			 *
+			 * @param {string} gid The group id.
+			 */
+			handler(gid) {
+				loadGroupDisplayName(gid)
+			},
+		},
+	},
+}
+</script>

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -29,7 +29,7 @@
 				:aria-pressed="String(Boolean(activeView && activeView.key === view.key))"
 				:data-testid="`cn-chart-widget-view-${view.key}`"
 				@click="activeViewKey = view.key">
-				{{ view.label || view.key }}
+				{{ view.label ? hostTranslate(view.label) : view.key }}
 			</button>
 		</div>
 		<div v-if="showEmptyState" class="cn-chart-widget__empty" data-testid="cn-chart-widget-empty">
@@ -53,7 +53,7 @@
 				:height="computedHeight"
 				:width="computedWidth"
 				:options="mergedOptions"
-				:series="displayedSeries" />
+				:series="plottedSeries" />
 		</div>
 		<div v-else class="cn-chart-widget__fallback">
 			<!-- @slot Rendered when the ApexCharts peer dependency is not available (defaults to the unavailableLabel text). -->
@@ -213,6 +213,11 @@ export default {
 		 * always a ref to inject, even outside a dashboard.
 		 */
 		cnDashboardDateRange: { default: () => ref(null) },
+		/**
+		 * Host translate function provided by CnAppRoot: manifest-authored
+		 * view labels and series names are i18n keys (screens-dashboard-i18n).
+		 */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
@@ -918,6 +923,25 @@ export default {
 		 *
 		 * @return {Array} The displayed series.
 		 */
+		/**
+		 * The displayed series with each series name through the host
+		 * translate function, so a manifest series named "Revenue" reads in
+		 * the user's language in the legend and the tooltip. Views still
+		 * filter on the name as written (`displayedSeries`).
+		 *
+		 * @spec openspec/changes/screens-dashboard-i18n/specs/dashboard-page/spec.md#requirement-chart-view-labels-and-series-names-are-translated
+		 * @return {Array} The series handed to ApexCharts.
+		 */
+		plottedSeries() {
+			const series = this.displayedSeries
+			if (!Array.isArray(series)) {
+				return series
+			}
+			return series.map((entry) => (entry && typeof entry === 'object' && typeof entry.name === 'string' && entry.name !== '')
+				? { ...entry, name: this.hostTranslate(entry.name) }
+				: entry)
+		},
+
 		displayedSeries() {
 			const series = this.resolvedSeries
 			const view = this.activeView
@@ -1417,6 +1441,19 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest-authored label through the host translate function.
+		 *
+		 * @spec openspec/changes/screens-dashboard-i18n/specs/dashboard-page/spec.md#requirement-chart-view-labels-and-series-names-are-translated
+		 * @param {string} key The label.
+		 * @return {string} The translated label.
+		 */
+		hostTranslate(key) {
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : null
+			const out = translate ? translate(key) : key
+			return (typeof out === 'string' && out !== '') ? out : key
+		},
+
 		/**
 		 * Re-query the chart's dataSource / endpointSource. Exposed as a
 		 * ref-callable method (B3 canonical refresh mode) AND invoked by the