@conduction/nextcloud-vue 2.138.0 → 2.140.0

package/l10n/en.json

@@ -2378,7 +2378,10 @@
     "Search a person or group": "Search a person or group",
     "Now: by {order}.": "Now: by {order}.",
     "You save the order along with a view.": "You save the order along with a view.",
-    "me": "me"
+    "me": "me",
+    "Open profile": "Open profile",
+    "Link a contact from your address book.": "Link a contact from your address book.",
+    "The value could not be shown.": "The value could not be shown."
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2628,7 +2628,13 @@
     "Search a person or group": "Zoek een persoon of groep",
     "Now: by {order}.": "Nu: op {order}.",
     "You save the order along with a view.": "De sortering bewaart u mee in een weergave.",
-    "me": "ik"
+    "me": "ik",
+    "Open profile": "Profiel openen",
+    "Link a contact from your address book.": "Koppel een contact uit je adresboek.",
+    "The value could not be shown.": "De waarde kon niet worden getoond.",
+    "Save as draft": "Opslaan als concept",
+    "Draft saved at {time}": "Concept opgeslagen om {time}",
+    "The draft could not be saved": "Het concept kon niet worden opgeslagen"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.138.0",
+  "version": "2.140.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/CnAppRoot/CnAppRoot.vue

@@ -770,9 +770,10 @@ import { DEFAULT_FORGE, resolveForge } from '../../utils/forge.js'
 import { BUILT_IN_KB_PROVIDERS } from '../../utils/kbSearchProviders.js'
 import { createManifestTranslate } from '../../utils/manifestTranslate.js'
 import { installModalStack, uninstallModalStack } from '../../utils/modalStack.js'
+import { loadMyTeam } from '../../utils/myTeam.js'
 import { OBJECTS_CHANGED_EVENT } from '../../utils/objectSignals.js'
 import { resolveBrand } from '../../utils/resolveBrand.js'
-import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { dropOptionalUnresolved, MY_TEAM_TOKEN, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { pageOffersSavedViews } from '../../utils/savedViewHelpers.js'
 import { normalizeSavedViewMenu, SAVED_VIEW_MENU_KEY, SAVED_VIEW_MENU_PREFIX, syncSavedViewMenu, toggleSavedViewMenuEntry, withSavedViewMenu } from '../../utils/savedViewMenu.js'
 import { passesContextPredicates } from '../../utils/visibleIfContext.js'
@@ -4475,7 +4476,13 @@ export default {
 		async _fetchMenuItemCount(item) {
 			try {
 				const { register, schema, filter } = item.count
-				const resolved = resolveFilterTokens(filter && typeof filter === 'object' ? filter : {}, {})
+				const raw = filter && typeof filter === 'object' ? filter : {}
+				// `@myTeam` counts as the list filters: once the team is read,
+				// every team the app answers, and without one no team at all.
+				if (Object.values(raw).some((value) => value === MY_TEAM_TOKEN || (Array.isArray(value) && value.includes(MY_TEAM_TOKEN)))) {
+					await loadMyTeam()
+				}
+				const resolved = dropOptionalUnresolved(resolveFilterTokens(raw, {}))
 				const url = generateUrl(`/apps/openregister/api/objects/${encodeURIComponent(register)}/${encodeURIComponent(schema)}`)
 				const { data } = await axios.get(url, { params: { _limit: 1, ...resolved } })
 				const total = data?.total

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -56,7 +56,7 @@
 		<!-- Built-in "label" widget: the value's label (an enum's translated
 		     label) as plain text, where a list wants words and no pill. -->
 		<template v-else-if="widget === 'label'">
-			<span v-if="hasValue" :title="rawTitle">{{ labelledValue }}</span>
+			<span v-if="hasValue" :title="rawTitle">{{ shownLabel }}</span>
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
@@ -65,7 +65,7 @@
 		     shapes it; the colour stays keyed on the raw value. -->
 		<template v-else-if="widget === 'badge'">
 			<CnStatusBadge v-if="hasValue"
-				:label="labelledValue"
+				:label="shownLabel"
 				:variant="badgeVariant"
 				:colorMap="badgeColorMap"
 				:colorKey="badgeColorKey"
@@ -438,7 +438,7 @@ import { ageInDays, boardDateLocale, formatAge, formatBoardDate, formatRelativeD
 import { daysUntil, parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
 import { pillLook } from '../../utils/detailActionModel.js'
 import { resolveDue } from '../../utils/dueText.js'
-import { formatBoardDateTime } from '../../utils/fillTemplate.js'
+import { fillTemplate, formatBoardDateTime } from '../../utils/fillTemplate.js'
 import { formatMoney } from '../../utils/formatMetric.js'
 import { groupDisplayName, loadGroupDisplayName } from '../../utils/groupAutocomplete.js'
 import { objectFieldValue } from '../../utils/objectName.js'
@@ -1455,6 +1455,22 @@ export default {
 		 * @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
 		 */
+		/**
+		 * What a `label` or `badge` cell shows: its label, worded by
+		 * `widgetProps.textTemplate` when given (translated, filled from the
+		 * row, `{value}` the label; DqPostvak "Lijkt op 2026-0079").
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/cell-text-template/specs/cell-text-template/spec.md
+		 */
+		shownLabel() {
+			const template = this.widgetProps && this.widgetProps.textTemplate
+			if (typeof template !== 'string' || template === '') {
+				return this.labelledValue
+			}
+			return fillTemplate(this.cnTranslate(template), { ...(this.row || {}), value: this.labelledValue })
+		},
+
 		labelledValue() {
 			if (!this.hasFormatter && this.isEnum && this.hasValue && typeof this.value !== 'object') {
 				return this.enumLabel

package/src/components/CnChartWidget/CnChartWidget.md

@@ -109,6 +109,7 @@ Fallback slot — shown when ApexCharts is not available:
 | `barMax` | Number | `null` | `bar-list`: the value a full track stands for (100 for percentages); null takes the largest value |
 | `matrixLabelWidth` | Number | `null` | `matrix`: the row-label column's width in px; a long label wraps (DqProcesanalyse "Dagen per fase": 240). Null sizes the column to its longest label, at least 120px |
 | `footnote` | String | `''` | A line under the chart, through the host's translate: under the rows of a `bar-list` or `matrix`, under the plot of a `line`, `area` or `bar` chart |
+| `notice` | Object | `null` | A toned note card under the chart: `{ lead?, text?, values?, labels?, tone? }`. `{name}` in `lead` (bold) and `text` is filled from `values[name]`, a literal or a record token (`@object.<field>`); `labels[name]` (`"rows"`, `"columns"`, `"values"` or a map) turns a key into words. `tone`: info, success, warning, error. Hidden while a value is missing |
 | `referenceLines` | Array | `[]` | Dashed horizontal reference lines on the value axis of a line, area or bar chart, such as a norm: `[{ value, label?, color? }]`. The label goes through the host's translate; the colour defaults to the theme's error colour (board DqDoorlooptijd). `valuePath` reads the value from the endpoint answer instead, `{value}` in the label writes it, and a line without a value is not drawn. |
 | `categoryFormat` | String | `''` | How date categories read on the x-axis: `month` ("jan") or `month-year` ("jan 2026"), in the user's language, or `week` for ISO week keys ("2026-W40" as "w40"). Categories that are not dates are left as is; a bare year key stays a year. |
 | `emptyCellLabel` | String | `''` | `matrix`: the text of a cell without a value ("geen"), through the host's translate. Empty leaves the cell blank |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -148,12 +148,25 @@
 			data-testid="cn-chart-widget-footnote">
 			{{ hostTranslate(footnote) }}
 		</p>
+		<!-- `notice`: a toned note card under the chart whose words carry
+		     values from the page record (DqHandhaving "Advies: ..."). -->
+		<NcNoteCard
+			v-if="noticeParts"
+			:type="noticeParts.type"
+			:data-tone="noticeParts.type"
+			class="cn-chart-widget__notice"
+			data-testid="cn-chart-widget-notice">
+			<p class="cn-chart-widget__notice-text">
+				<strong v-if="noticeParts.lead">{{ noticeParts.lead }}</strong>{{ noticeParts.lead && noticeParts.text ? ' ' : '' }}{{ noticeParts.text }}
+			</p>
+		</NcNoteCard>
 	</div>
 </template>
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { getLanguage, translate as t } from '@nextcloud/l10n'
+import { NcNoteCard } from '@nextcloud/vue'
 import { inject, markRaw, ref } from 'vue'
 import VueApexCharts from 'vue3-apexcharts'
 import { useDataSource } from '../../composables/useDataSource.js'
@@ -405,7 +418,7 @@ function formatterFor(vf) {
 export default {
 	name: 'CnChartWidget',
 
-	components: { CnEndpointNotice },
+	components: { CnEndpointNotice, NcNoteCard },
 
 	inject: {
 		/**
@@ -467,6 +480,24 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A toned note card under the chart whose words carry values from the
+		 * page record: `{ lead?, text?, values?, labels?, tone? }`. `lead`
+		 * (bold) and `text` go through the host's translate, then each
+		 * `{name}` is filled from `values[name]`, a literal or a token such as
+		 * `@object.recommendedIntervention`. `labels[name]` turns a key into
+		 * words: `"rows"`, `"columns"` or `"values"` read the matrix's
+		 * cellSource label maps, an object is its own map. `tone` is info
+		 * (default), success, warning or error. Hidden while a value is
+		 * missing, so a half-filled sentence never shows.
+		 *
+		 * @spec openspec/changes/chart-notice/specs/chart-notice/spec.md#requirement-a-chart-can-carry-a-notice-with-record-values
+		 */
+		notice: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * A line under the chart ("Klik een balk om de zaken te zien"),
 		 * through the host's translate: under the rows of a `bar-list` or
@@ -1601,6 +1632,38 @@ export default {
 			}
 		},
 
+		/**
+		 * The notice's bold lead, text and note-card type, values filled in;
+		 * null when there is none or a value is missing.
+		 *
+		 * @return {{lead: string, text: string, type: string}|null} The notice.
+		 * @spec openspec/changes/chart-notice/specs/chart-notice/spec.md#requirement-a-chart-can-carry-a-notice-with-record-values
+		 */
+		noticeParts() {
+			const def = this.notice
+			if (!def || typeof def !== 'object' || (!def.lead && !def.text)) {
+				return null
+			}
+			const declared = def.values && typeof def.values === 'object' ? def.values : {}
+			const resolved = resolveFilterTokens(declared, this.chartTokenCtx())
+			const source = this.cellSource && typeof this.cellSource === 'object' ? this.cellSource : {}
+			const maps = { rows: source.rowLabels, columns: source.columnLabels, values: source.valueLabels }
+			const words = {}
+			for (const name of Object.keys(declared)) {
+				const raw = resolved[name]
+				if (raw === null || raw === undefined || raw === '' || (typeof raw === 'string' && raw.charAt(0) === '@')) {
+					return null
+				}
+				const ref = def.labels && def.labels[name]
+				const map = typeof ref === 'string' ? maps[ref] : ref
+				const label = map && typeof map === 'object' && typeof map[String(raw)] === 'string' ? map[String(raw)] : null
+				words[name] = label ? this.hostTranslate(label) : String(raw)
+			}
+			const fill = (key) => (key ? this.hostTranslate(key).replace(/\{(\w+)\}/g, (match, name) => (name in words ? words[name] : match)) : '')
+			const type = ['info', 'success', 'warning', 'error'].includes(def.tone) ? def.tone : 'info'
+			return { lead: fill(def.lead), text: fill(def.text), type }
+		},
+
 		/**
 		 * The matrix cell of the record (`highlight: { row, column }`, tokens
 		 * such as `@object.behaviour` resolved), as row and column indexes. A
@@ -2948,6 +3011,14 @@ export default {
 	margin: 0;
 }
 
+.cn-chart-widget__notice {
+	margin: 12px 0 0;
+}
+
+.cn-chart-widget__notice-text {
+	margin: 0;
+}
+
 /* Under an ApexCharts plot the footnote is a sibling of the canvas, so it keeps
    its own line height while the canvas takes the rest of a fitted column. */
 .cn-chart-widget > .cn-chart-widget__footnote {
@@ -2964,10 +3035,14 @@ export default {
 	display: contents;
 }
 
+/* A column takes its share of the width (minmax(0, 1fr)), so a long phase
+   name breaks inside its own column instead of running into the next. */
 .cn-chart-widget__matrix-head {
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	padding: 6px;
+	hyphens: auto;
+	overflow-wrap: anywhere;
 }
 
 .cn-chart-widget__matrix-label {

package/src/components/CnConversationThread/CnConversationWidget.vue

@@ -6,6 +6,7 @@
 <template>
 	<div class="cn-case-widget-card">
 		<CnConversationThread
+			ref="thread"
 			:messages="messages"
 			:title="tr(content.title || '')"
 			:subtitle="tr(content.subtitle || '')"
@@ -34,7 +35,7 @@
 					data-testid="cn-conversation-templates"
 					@apply="applyTemplate($event, setDraft)" />
 			</template>
-			<template v-if="replyOptions.length > 0" #reply-actions>
+			<template v-if="replyOptions.length > 0 || draftUrl" #reply-actions="{ draft }">
 				<NcCheckboxRadioSwitch
 					v-for="option in replyOptions"
 					:key="option.key"
@@ -42,6 +43,19 @@
 					:data-testid="`cn-conversation-option-${option.key}`">
 					{{ tr(option.label) }}
 				</NcCheckboxRadioSwitch>
+				<span v-if="draftUrl && draftStatus"
+					class="cn-conversation-widget__draft-status"
+					role="status"
+					data-testid="cn-conversation-draft-status">
+					{{ draftStatus }}
+				</span>
+				<NcButton
+					v-if="draftUrl"
+					data-testid="cn-conversation-save-draft"
+					:disabled="savingDraft"
+					@click="saveDraft(draft)">
+					{{ t('nextcloud-vue', 'Save as draft') }}
+				</NcButton>
 			</template>
 			<template v-if="headerAction || statusBadgeText" #header-actions>
 				<span v-if="statusBadgeText"
@@ -71,11 +85,13 @@
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnTemplateSelect from '../CnTemplateSelect/CnTemplateSelect.vue'
 import CnConversationThread from './CnConversationThread.vue'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
+import { formatTimeOfDay } from '../../utils/boardDate.js'
 import { fetchReferenceObjects } from '../../utils/boardReferenceColumns.js'
 import { readPath } from '../../utils/readPath.js'
 import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
@@ -178,6 +194,10 @@ export default {
 			acting: '',
 			/** The threads `statusBadge` reads. */
 			badgeRows: [],
+			/** What the last draft save said: when it was saved, or that it failed. */
+			draftStatus: '',
+			/** Whether a draft is being saved. */
+			savingDraft: false,
 		}
 	},
 
@@ -315,6 +335,21 @@ export default {
 		 * @return {string} The URL, or '' when the content names none.
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-conversation-thread
 		 */
+		/**
+		 * The reply draft's url (`content.draft.url`, `@objectId` filled in),
+		 * or '' without one.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/conversation-reply-draft/specs/conversation-reply-draft/spec.md#requirement-a-reply-can-be-saved-as-a-draft-and-comes-back
+		 */
+		draftUrl() {
+			const url = this.content.draft && this.content.draft.url
+			if (typeof url !== 'string' || url === '') {
+				return ''
+			}
+			return url.replace(/@objectId/g, encodeURIComponent(String(this.objectId ?? '')))
+		},
+
 		endpoint() {
 			const url = this.content.endpoint
 			if (typeof url !== 'string' || url === '') {
@@ -340,19 +375,101 @@ export default {
 			handler() {
 				this.loadSource()
 				this.loadBadge()
+				this.loadDraft()
 			},
 		},
 	},
 
 	mounted() {
 		subscribe('cn:page:refresh', this.onPageRefresh)
+		subscribe('cn:conversation:reply-sent', this.onReplySentElsewhere)
 	},
 
 	beforeUnmount() {
 		unsubscribe('cn:page:refresh', this.onPageRefresh)
+		unsubscribe('cn:conversation:reply-sent', this.onReplySentElsewhere)
 	},
 
 	methods: {
+		t,
+
+		/**
+		 * Read the saved reply draft into the reply box.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/conversation-reply-draft/specs/conversation-reply-draft/spec.md#requirement-a-reply-can-be-saved-as-a-draft-and-comes-back
+		 */
+		async loadDraft() {
+			if (!this.draftUrl) {
+				return
+			}
+			try {
+				const { default: axios } = await import('@nextcloud/axios')
+				const { generateUrl } = await import('@nextcloud/router')
+				const { data } = await axios.get(generateUrl(this.draftUrl))
+				const text = data && typeof data.text === 'string' ? data.text : ''
+				if (text !== '' && this.$refs.thread) {
+					this.$refs.thread.setDraft(text)
+				}
+			} catch {
+				// No saved draft to read leaves the box empty.
+			}
+		},
+
+		/**
+		 * Store the reply box as the draft and say when it was saved.
+		 *
+		 * @param {string} text The reply box's text.
+		 * @return {Promise<void>}
+		 */
+		async saveDraft(text) {
+			this.savingDraft = true
+			try {
+				await this.storeDraft(String(text ?? ''))
+				this.draftStatus = t('nextcloud-vue', 'Draft saved at {time}', { time: formatTimeOfDay(new Date()) })
+			} catch {
+				this.draftStatus = t('nextcloud-vue', 'The draft could not be saved')
+			} finally {
+				this.savingDraft = false
+			}
+		},
+
+		/**
+		 * A reply on this record went out through a dialog or another surface
+		 * (`cn:conversation:reply-sent` with `{ objectId }`): the saved draft
+		 * and the reply box are cleared.
+		 *
+		 * @param {{objectId?: string}} payload The record the reply was on.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/conversation-reply-draft/specs/conversation-reply-draft/spec.md#requirement-a-reply-can-be-saved-as-a-draft-and-comes-back
+		 */
+		async onReplySentElsewhere(payload) {
+			if (!this.draftUrl || String(payload?.objectId ?? '') !== String(this.objectId ?? '')) {
+				return
+			}
+			if (this.$refs.thread) {
+				this.$refs.thread.setDraft('')
+			}
+			this.draftStatus = ''
+			try {
+				await this.storeDraft('')
+			} catch {
+				// The next save overwrites a draft that could not be cleared.
+			}
+		},
+
+		/**
+		 * PUT the draft text.
+		 *
+		 * @param {string} text The text; '' clears the draft.
+		 * @return {Promise<void>}
+		 */
+		async storeDraft(text) {
+			const { default: axios } = await import('@nextcloud/axios')
+			const { generateUrl } = await import('@nextcloud/router')
+			await axios.put(generateUrl(this.draftUrl), { text })
+		},
+
 		/**
 		 * Read the messages again when the page refreshes (a dialog sent one).
 		 *
@@ -691,6 +808,9 @@ export default {
 			if (typeof text !== 'string' || text === '') {
 				return
 			}
+			if (this.draftUrl) {
+				this.storeDraft('')
+			}
 			this.sentHere.push({
 				id: `sent-${this.sentHere.length}`,
 				time: new Date().toISOString(),
@@ -722,4 +842,9 @@ export default {
 	border-radius: var(--border-radius-large);
 	padding: calc(5 * var(--default-grid-baseline));
 }
+
+.cn-conversation-widget__draft-status {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
 </style>

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -66,19 +66,25 @@
 								v-else-if="row.to"
 								:to="row.to"
 								class="cn-facts-widget__value-link">
-								{{ row.masked && !revealed[row.key] ? row.masked : row.value }}
+								{{ shownValue(row) }}
 							</router-link>
-							<span v-else>{{ row.masked && !revealed[row.key] ? row.masked : row.value }}</span>
+							<span v-else>{{ shownValue(row) }}</span>
 							<button
 								v-if="row.reveal && !revealed[row.key]"
 								type="button"
 								class="cn-facts-widget__inline-button"
 								:aria-label="revealLabel(row)"
 								:data-testid="`cn-fact-reveal-${row.key}`"
+								:disabled="revealing === row.key"
 								@click="reveal(row)">
 								<EyeOutline :size="16" aria-hidden="true" />
 								{{ showLabel }}
 							</button>
+							<span
+								v-if="revealErrors[row.key]"
+								class="cn-facts-widget__reveal-error"
+								role="alert"
+								:data-testid="`cn-fact-reveal-error-${row.key}`">{{ revealErrors[row.key] }}</span>
 							<button
 								v-if="row.copy"
 								type="button"
@@ -420,7 +426,7 @@ export default {
 		 *   `as` is `row` (default when `label` or `icon` is set), `title`, `line`, `text` (a line in the normal ink), `lead` (an icon tile or initials beside `title` and `subtitle`), `pill` or `meter`.
 		 *   `countFrom` (`{ register, schema, filter? }`, `@objectId` / `@object.<field>` in the filter) shows how many records that list holds ("Lopende zaken 43"); the row is left out while the count cannot be read.
 		 *   A `meter` shows the amount at `path` against the limit at `limitPath` (or a constant `limit`) as "12 of 50" with a bar; past the limit the bar turns red and the text says "over the limit"; without a positive limit it shows the amount and no bar.
-		 *   A row's `format` may also be `email`, `phone` or `url` (a link) or `masked` (the last four characters; `reveal: true` adds Show). `copy: true` adds a copy button; `icon` replaces the label.
+		 *   A row's `format` may also be `email`, `phone` or `url` (a link) or `masked` (the last four characters; `reveal: true` adds Show, which unmasks the record's value; `reveal: { url, path? }` makes Show ask the server for the value at `url` (tokens resolved), read at `path` (else the entry's path), so a server that answers the mask can check and record the reveal). `copy: true` adds a copy button; `icon` replaces the label.
 		 *   A part may be `{ text }`, a constant; a `line` or `text` entry without `path` or `parts` shows its `text`.
 		 *   `resolve: { register, schema, labelField? }` on an entry or a part turns a value that is a reference (an id, or a list of ids) into the label of the referenced object (`labelField`, else `title`, then `name`): the case type or status of a task shows its name, not its uuid. The ids are fetched once per register and schema through the object store and shared by every facts widget on the page; the entry stays empty until its label is known, and when no label can be read. A resolved value works as a pill too: `map` is applied to the resolved label, and `variantMap` / `colorMap` look the tone up by the value of `resolve.toneField` on the referenced object when that is set (a status named by its `name`, coloured by its `state`), then by the resolved label, then by the stored value.
 		 *   `route` (`{ name, params?, query? }`, `@source.<path>` in a param) on a `title` or a `row` links its value to that route; a param that does not fill leaves it plain.
@@ -474,6 +480,9 @@ export default {
 			error: false,
 			/** Keys of the masked rows the reader chose to show. */
 			revealed: {},
+			revealedValues: {},
+			revealErrors: {},
+			revealing: '',
 			/** Key of the row whose value was just copied. */
 			copied: '',
 			/** Labels of the referenced objects read so far, by `refKey`. */
@@ -1321,7 +1330,12 @@ export default {
 				extras.external = true
 			} else if (field.format === 'masked') {
 				extras.masked = value.length > 4 ? '*'.repeat(Math.min(value.length - 4, 5)) + value.slice(-4) : value
-				extras.reveal = field.reveal === true && value.length > 4
+				const server = field.reveal && typeof field.reveal === 'object' && typeof field.reveal.url === 'string' && field.reveal.url !== ''
+				extras.reveal = (field.reveal === true || server) && value.length > 4
+				if (server) {
+					extras.revealUrl = field.reveal.url
+					extras.revealPath = typeof field.reveal.path === 'string' && field.reveal.path !== '' ? field.reveal.path : (field.path || '')
+				}
 			}
 			return extras
 		},
@@ -1333,7 +1347,14 @@ export default {
 		 * @param {object} row The row.
 		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-the-facts-card-draws-contact-details-identity-and-a-lead
 		 */
-		reveal(row) {
+		async reveal(row) {
+			if (row.revealUrl) {
+				const value = await this.fetchRevealed(row)
+				if (value === null) {
+					return
+				}
+				this.revealedValues = { ...this.revealedValues, [row.key]: value }
+			}
 			this.revealed = { ...this.revealed, [row.key]: true }
 			const detail = { path: row.path }
 			/**
@@ -1344,6 +1365,47 @@ export default {
 			emit(FACTS_REVEAL_CHANNEL, { ...detail, objectId: this.tokenCtx.objectId, register: this.tokenCtx.register || null, schema: this.tokenCtx.schema || null })
 		},
 
+		/**
+		 * The text a row shows: its mask until revealed, then the value the
+		 * server answered (a server reveal) or the value the record holds.
+		 *
+		 * @param {object} row The row.
+		 * @return {string}
+		 * @spec openspec/changes/facts-reveal-from-server/specs/facts-widget/spec.md#requirement-a-masked-fact-can-be-revealed-by-the-server
+		 */
+		shownValue(row) {
+			if (!row.masked || !this.revealed[row.key]) {
+				return row.masked || row.value
+			}
+			return Object.hasOwn(this.revealedValues, row.key) ? this.revealedValues[row.key] : row.value
+		},
+
+		/**
+		 * Ask the server for a masked value (`reveal.url`, tokens resolved,
+		 * read at `reveal.path`), never from a cache: each show is a request
+		 * the server can check and record.
+		 *
+		 * @param {object} row The row.
+		 * @return {Promise<string|null>} The value, or null when it could not be read.
+		 * @spec openspec/changes/facts-reveal-from-server/specs/facts-widget/spec.md#requirement-a-masked-fact-can-be-revealed-by-the-server
+		 */
+		async fetchRevealed(row) {
+			this.revealing = row.key
+			this.revealErrors = { ...this.revealErrors, [row.key]: '' }
+			try {
+				const payload = await fetchEndpointSource({ url: row.revealUrl, responsePath: row.revealPath }, this.tokenCtx, { force: true })
+				if (payload === null || payload === undefined || payload === '' || typeof payload === 'object') {
+					throw new Error('no value')
+				}
+				return String(payload)
+			} catch {
+				this.revealErrors = { ...this.revealErrors, [row.key]: t('nextcloud-vue', 'The value could not be shown.') }
+				return null
+			} finally {
+				this.revealing = ''
+			}
+		},
+
 		/**
 		 * Copy a row's value to the clipboard.
 		 *
@@ -1845,11 +1907,13 @@ export default {
 	display: contents;
 }
 
-/* Nextcloud core styles `dt` and `dd` (text-align end, 12px padding), which
-   pushed the label to the right of its column and added 12px around both. The
-   class is doubled so these resets outrank that rule, and a dossiq-style
-   `:deep()` override in an app is not needed. */
+/* Nextcloud core styles `dt` and `dd` (text-align end, 12px padding, a
+   130px-wide `dt`), which pushed the label to the right of its column, added
+   12px around both and widened the label column to 130px. The class is
+   doubled so these resets outrank that rule, and a dossiq-style `:deep()`
+   override in an app is not needed. */
 .cn-facts-widget__label.cn-facts-widget__label {
+	width: auto;
 	margin: 0;
 	padding: 0;
 	text-align: start;
@@ -1953,6 +2017,11 @@ export default {
 	font: inherit;
 }
 
+.cn-facts-widget__reveal-error {
+	font-size: 13px;
+	color: var(--color-text-error, var(--color-error));
+}
+
 .cn-facts-widget__inline-button {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border-dark);