@conduction/nextcloud-vue 2.79.0 → 2.80.0

package/src/components/CnFieldListWidget/index.js

@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnFieldListWidget — self-registers the `field-list` widget type (a list
+ * stored inside one field of the current object, shown as rows and edited
+ * with one PATCH of that field) into the shared dashboardWidgetRegistry at
+ * module load. Renderer only: declared in the manifest.
+ */
+
+import CnFieldListWidget from './CnFieldListWidget.vue'
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
+
+registerDashboardWidget('field-list', {
+	renderer: CnFieldListWidget,
+	form: null,
+	defaultContent: {
+		field: '',
+		row: {},
+		readOnly: false,
+	},
+	displayName: 'Field list',
+	icon: 'FormatListBulleted',
+	surfaces: ['detail-page'],
+})
+
+export { CnFieldListWidget }
+export default CnFieldListWidget

package/src/components/CnFormDialog/CnFormDialog.md

@@ -113,7 +113,7 @@ export default {
 | `allowDraft` | `false` | Offer a **Save draft** button that stores the record with a draft marker instead of validating it. Inert unless the schema declares `draftField`. |
 | `draftField` | `'isDraft'` | The boolean property that marks a record as a draft. |
 | `draftAppId` | `''` | The app the draft belongs to, for the storage key. |
-| `draftUserId` | `''` | Who is typing, for the storage key. **Pass this on any shared device.** |
+| `draftUserId` | `''` | Who is typing, for the storage key. Empty: the signed-in Nextcloud user, and `anonymous` only when nobody is signed in. |
 
 #### What the draft does and does not do
 
@@ -122,9 +122,15 @@ Restore and Discard; the values go in only when somebody presses Restore. A form
 that filled itself would be indistinguishable from one the server prefilled, and
 somebody would submit last week's answers without knowing they were there.
 
-`draftUserId` is part of the storage key. A shared browser profile at a service
+The user is part of the storage key. A shared browser profile at a service
 desk is the ordinary case in a municipality, and a draft keyed without the user
-hands the next person at the counter what the last one typed. Pass it.
+hands the next person at the counter what the last one typed. Without
+`draftUserId` the dialog uses the signed-in Nextcloud user. A draft stored
+under `anonymous` is removed, never offered, once somebody is signed in.
+
+A draft is written only after a person changes a field, and only while that
+field differs from the value the form opened with. Opening a dialog, or the
+form filling in values by itself, writes nothing and shows no Saving or Saved.
 
 A draft is dropped rather than offered when it is more than seven days old, when
 the record has been saved by somebody else since it was written, or when the

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -186,7 +186,7 @@
 								:error="!!errors[field.key]"
 								:type="field.widget === 'email' ? 'email' : field.widget === 'url' ? 'url' : 'text'"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								@update:modelValue="value => updateField(field.key, value)" />
 							<CnFieldHelper
 								:id="helpId(field)"
@@ -208,7 +208,7 @@
 								:error="!!errors[field.key]"
 								type="number"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								@update:modelValue="value => updateField(field.key, value !== '' ? Number(value) : null)" />
 							<CnFieldHelper
 								:id="helpId(field)"
@@ -230,7 +230,7 @@
 								v-bind="fieldAria(field)"
 								:value="formData[field.key] || ''"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								rows="4"
 								@input="updateField(field.key, $event.target.value)" />
 							<CnFieldHelper
@@ -652,7 +652,7 @@
 								:modelValue="formData[field.key] != null ? String(formData[field.key]) : ''"
 								:error="!!errors[field.key]"
 								:disabled="field.readOnly"
-								:placeholder="field.description"
+								:placeholder="fieldPlaceholder(field)"
 								@update:modelValue="value => updateField(field.key, value)" />
 							<CnFieldHelper
 								:id="helpId(field)"
@@ -787,7 +787,7 @@ import CnPropertySourceField from '../CnPropertySourceField/CnPropertySourceFiel
 import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
 import CnSubObjectsField from '../CnSubObjectsField/CnSubObjectsField.vue'
 import { describeRowProblem, useChildRecords } from '../../composables/useChildRecords.js'
-import { draftIndicatorText, draftKey, formDraftMixin, readDraft } from '../../composables/useFormDraft.js'
+import { clearAnonymousDrafts, draftIndicatorText, draftKey, formDraftMixin, hasDraftChanges, readDraft, resolveDraftUserId } from '../../composables/useFormDraft.js'
 import { heldFromFailures, splitHeldFiles, uploadHeldFiles } from '../../composables/useHeldFileUpload.js'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { TENANT_CONTEXT_KEY } from '../../composables/useTenantContext.js'
@@ -1172,16 +1172,16 @@ export default {
 		 * 🔴 THE USER IS PART OF THE DRAFT KEY. A shared browser profile at a
 		 * service desk is the ordinary case in a municipality, and a draft
 		 * keyed without the user hands the next person at the counter what the
-		 * last one typed. A host that passes nothing gets `anonymous`, which
-		 * is correct for a single-user context and wrong for a counter — so
-		 * the prop exists and is documented rather than guessed at.
+		 * last one typed. A host that passes nothing gets the signed-in
+		 * Nextcloud user (`@nextcloud/auth`), and `anonymous` only when
+		 * nobody is signed in.
 		 */
 		draftAppId: {
 			type: String,
 			default: '',
 		},
 
-		/** Who is typing, for the draft key. See `draftAppId`. */
+		/** Who is typing, for the draft key. Empty: the signed-in user. See `draftAppId`. */
 		draftUserId: {
 			type: String,
 			default: '',
@@ -1442,10 +1442,20 @@ export default {
 				appId: this.draftAppId,
 				schema: (this.schema?.slug || this.schema?.title || ''),
 				objectId: (this.item?.id || this.item?.uuid || ''),
-				userId: this.draftUserId,
+				userId: this.draftUserOwner,
 			})
 		},
 
+		/**
+		 * Who the draft belongs to: `draftUserId`, else the signed-in user.
+		 *
+		 * @return {string} The user id, or '' when nobody is signed in.
+		 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-belongs-to-the-signed-in-user
+		 */
+		draftUserOwner() {
+			return resolveDraftUserId(this.draftUserId)
+		},
+
 		/**
 		 * Whether "Save draft" may be offered.
 		 *
@@ -1757,17 +1767,6 @@ export default {
 		formData: {
 			deep: true,
 			handler(values) {
-				// 🔴 THE FIRST CHANGE IS THE COMPONENT SEEDING THE FORM, NOT
-				// SOMEBODY TYPING. Writing a draft for it stores the empty
-				// form over a real one, and the indicator announces "Saving
-				// draft" about work nobody did — an instrument reporting
-				// activity that did not happen, which is the whole class of
-				// defect this library keeps paying down.
-				if (this.draftSeeded !== true) {
-					this.draftSeeded = true
-					return
-				}
-
 				// Nothing is written while a draft is being offered: the user
 				// has not chosen yet, and overwriting the stored draft with the
 				// empty form they are looking at would destroy the thing they
@@ -1776,6 +1775,19 @@ export default {
 					return
 				}
 
+				// 🔴 ONLY A PERSON'S CHANGE IS WORTH A DRAFT. The form fills
+				// in values by itself after it opens (an input reporting its
+				// value back, normalised dates, defaults, the organisation),
+				// and each of those used to write a draft and say "Saved just
+				// now" on a dialog nobody had touched. A field counts once a
+				// person edited it AND it differs from what the form opened
+				// with, so undoing the edit drops the draft again.
+				const edited = Object.keys(this.touchedFields || {}).filter((key) => this.touchedFields[key])
+				if (!hasDraftChanges(values, this.draftBaseline, edited)) {
+					this.settleUnchangedDraft(this.formDraftKey)
+					return
+				}
+
 				this.scheduleDraftWrite(this.formDraftKey, values)
 			},
 		},
@@ -1940,6 +1952,12 @@ export default {
 		// Silently refilling a form is how somebody submits last week's answers
 		// without noticing they were there, and a form that fills itself is
 		// indistinguishable from one the server prefilled.
+		// A draft stored under `anonymous` was written by a page that did not
+		// know who was typing. Once somebody is signed in it is removed, never
+		// offered: it may be another person's.
+		if (this.formDraftKey && this.draftUserOwner) {
+			clearAnonymousDrafts()
+		}
 		if (this.formDraftKey) {
 			this.draftOffer = readDraft(this.formDraftKey, {
 				objectUpdated: (this.item?.updated || this.item?.['@self']?.updated || ''),
@@ -2298,6 +2316,10 @@ export default {
 				this.runAssignments(null)
 				this.loadProfileDefaults()
 			}
+			// What the form opened with. A draft is written only once a field
+			// a person edited differs from this (see the `formData` watcher).
+			// Not reactive: nothing renders from it.
+			this.draftBaseline = JSON.parse(JSON.stringify(this.formData || {}))
 		},
 
 		/**
@@ -3085,6 +3107,27 @@ export default {
 			return this.showsOuterLabel(field) ? '' : this.errors[field.key]
 		},
 
+		/**
+		 * The placeholder of a text, number or textarea control.
+		 *
+		 * The field's description already shows as the help line under the
+		 * control, so the placeholder stays empty rather than repeat it word
+		 * for word. The help line is the one kept: it is still there after
+		 * somebody typed (a placeholder disappears with the first keystroke),
+		 * it is read out through `aria-describedby`, and in the Nextcloud look
+		 * a placeholder is hidden until the field has focus anyway. While an
+		 * error takes the help line's place, the description returns as the
+		 * placeholder so it is not lost.
+		 *
+		 * @param {object} field The field definition.
+		 * @return {string} The placeholder, or '' when the help line says it.
+		 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-field-description-shows-once
+		 */
+		fieldPlaceholder(field) {
+			const description = field.description || ''
+			return this.helperError(field) ? description : ''
+		},
+
 		/**
 		 * The accessibility attributes of a text control. In both looks an invalid
 		 * control is `aria-invalid` and `aria-describedby` lists the error before
@@ -4567,6 +4610,11 @@ export default {
 			}
 
 			this.formData = { ...this.formData, ...this.draftOffer.values }
+			// What the person typed last time is their edit now: it counts for
+			// the next draft write and survives the record arriving late.
+			for (const key of Object.keys(this.draftOffer.values)) {
+				this.touchedFields[key] = true
+			}
 			this.draftOffer = null
 		},
 

package/src/components/CnFormPage/CnFormPage.vue

@@ -397,7 +397,7 @@ import CnFormErrorSummary from '../CnFormErrorSummary/CnFormErrorSummary.vue'
 import CnFormField from '../CnFormField/CnFormField.vue'
 import CnStepper from '../CnStepper/CnStepper.vue'
 import { cnRenderFormField } from '../../composables/cnFormFieldRenderer.js'
-import { draftIndicatorText, draftKey, formDraftMixin, readDraft } from '../../composables/useFormDraft.js'
+import { clearAnonymousDrafts, draftIndicatorText, draftKey, formDraftMixin, readDraft, resolveDraftUserId } from '../../composables/useFormDraft.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { cnSelectAria } from '../../directives/cnSelectAria.js'
 import { loadCurrentUserProfile } from '../../utils/currentUserProfile.js'
@@ -529,7 +529,7 @@ export default {
 			default: '',
 		},
 
-		/** Who is typing; part of the draft's storage key so a shared browser profile never leaks a draft between users. */
+		/** Who is typing; part of the draft's storage key so a shared browser profile never leaks a draft between users. Empty: the signed-in Nextcloud user. */
 		draftUserId: {
 			type: String,
 			default: '',
@@ -949,7 +949,17 @@ export default {
 			if (this.recoverDraft !== true) {
 				return ''
 			}
-			return draftKey({ appId: this.draftAppId, schema: this.draftScope, objectId: 'new', userId: this.draftUserId })
+			return draftKey({ appId: this.draftAppId, schema: this.draftScope, objectId: 'new', userId: this.draftUserOwner })
+		},
+
+		/**
+		 * Who the draft belongs to: `draftUserId`, else the signed-in user.
+		 *
+		 * @return {string} The user id, or '' when nobody is signed in.
+		 * @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-a-draft-belongs-to-the-signed-in-user
+		 */
+		draftUserOwner() {
+			return resolveDraftUserId(this.draftUserId)
 		},
 
 		/**
@@ -997,6 +1007,11 @@ export default {
 		this.calcTimers = {}
 		// Offered, never applied: a form that fills itself is indistinguishable
 		// from one the server prefilled.
+		// A draft under `anonymous` may be somebody else's: removed once a
+		// signed-in user is known, never offered.
+		if (this.formDraftKey && this.draftUserOwner) {
+			clearAnonymousDrafts()
+		}
 		if (this.formDraftKey) {
 			this.draftOffer = readDraft(this.formDraftKey)
 		}

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="cn-index-page"
-		:class="lookClass"
+		:class="[lookClass, { 'cn-index-page--with-side-panel': hasSidePanel }]"
 		data-testid="cn-index-page"
 		@keydown="onListKeydown">
 		<!-- Header — overridable via #header slot. CnPageHeader ALWAYS renders:
@@ -76,6 +76,20 @@
 			<slot name="below-header" />
 		</div>
 
+		<!-- KPI tiles above the list (`statRow`) and cards beside it
+		     (`sidePanel`), as DqTeamwachtrij and PqContracten
+		     (screens-index-stat-row). -->
+		<CnIndexPageWidgets
+			v-if="statRow && statRow.length > 0"
+			class="cn-index-page__stat-row"
+			variant="stat-row"
+			:widgets="statRow" />
+		<CnIndexPageWidgets
+			v-if="hasSidePanel"
+			class="cn-index-page__side-panel"
+			variant="side-panel"
+			:widgets="sidePanel" />
+
 		<!-- Actions bar -->
 		<CnActionsBar
 			:layout="isBoardLook ? 'board' : 'nextcloud'"
@@ -97,6 +111,7 @@
 			:viewMode="currentViewMode"
 			:showViewToggle="showViewToggle"
 			:availableViewModes="effectiveToggleModes"
+			:disabledViewModes="viewSwitchDisabledModes"
 			:cardsLabel="cardsLabel"
 			:tableLabel="tableLabel"
 			:listLabel="listLabel"
@@ -959,6 +974,7 @@ import CnQuickEditDialog from '../../dialogs/CnQuickEditDialog.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
 import CnFollowToggle from '../CnFollowToggle/CnFollowToggle.vue'
+import CnIndexPageWidgets from './CnIndexPageWidgets.vue'
 import { useContextMenu } from '../../composables/index.js'
 import { useLook } from '../../composables/useLook.js'
 import { copyKindsOf } from '../../composables/useObjectCopy.js'
@@ -1243,6 +1259,7 @@ export default {
 	name: 'CnIndexPage',
 
 	components: {
+		CnIndexPageWidgets,
 		CnBuildiqEditButton,
 		CnFollowToggle,
 		NcLoadingIcon,
@@ -1587,7 +1604,10 @@ export default {
 		 * `$route.params` just like the `filter` prop. The first tab with
 		 * `default:true` (else index 0) is active on mount; changing tabs
 		 * re-fetches at page 1. Omit (or `null`) → no tab strip, behaviour
-		 * unchanged.
+		 * unchanged. Under the board look a tab with `activeLabel` ("Pipeline:
+		 * Sales") adds a removable chip with that text to the Active line and
+		 * counts on the Filter badge while it is selected; removing the chip
+		 * goes back to the default tab.
 		 */
 		quickFilters: {
 			type: Array,
@@ -1958,6 +1978,22 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Board look: the segments the view switch draws, e.g. `['table',
+		 * 'cards', 'board', 'map']` as the boards do. A listed mode the page
+		 * can open is an ordinary segment; one it cannot (no board columns, no
+		 * map configured) is drawn disabled, named "<mode>: not available on
+		 * this list". Fed from `pages[].config.viewSwitch`. Ignored without the
+		 * board look, and absent the switch is as before.
+		 *
+		 * @type {Array<'table' | 'cards' | 'board' | 'map'>}
+		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
+		 */
+		viewSwitch: {
+			type: Array,
+			default: null,
+		},
+
 		/**
 		 * The board's configuration, mirroring the manifest `config.board`
 		 * block: `{ statusField, cardFields, swimlaneField }`. The board is
@@ -2644,6 +2680,35 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * KPI tiles above the list (manifest `config.statRow`): dashboard
+		 * widget definitions `{ id, type, title?, content }`, usually `stat`,
+		 * drawn in an auto-fit row (each at least 200px) in the listed order.
+		 * Types resolve like dashboard widgets: the app registry, then the
+		 * dashboard catalog. Empty by default.
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-stat-row-above-the-list
+		 * @type {Array<object>}
+		 */
+		statRow: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Cards beside the list (manifest `config.sidePanel`): dashboard
+		 * widget definitions `{ id, type, title?, content, headerLink? }`
+		 * drawn in a 300px column right of the toolbar and the list. Empty
+		 * by default; below 1024px the column moves above the list.
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-side-panel-beside-the-list
+		 * @type {Array<object>}
+		 */
+		sidePanel: {
+			type: Array,
+			default: () => [],
+		},
+
 		/**
 		 * Where a row carries the actions the server says this caller may run
 		 * on it: a dotted path, read off the rows the list already fetched, so
@@ -3323,6 +3388,16 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the page draws cards beside its list (`sidePanel`).
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-side-panel-beside-the-list
+		 * @return {boolean}
+		 */
+		hasSidePanel() {
+			return Array.isArray(this.sidePanel) && this.sidePanel.length > 0
+		},
+
 		/**
 		 * The empty-state copy run through the host translate function
 		 * (the injected `cnTranslate`, identity by default). Only this
@@ -3695,6 +3770,21 @@ export default {
 			return Object.keys(this.mapConfig || {}).length > 0
 		},
 
+		/**
+		 * Board look: the modes `viewSwitch` lists that this page cannot open,
+		 * drawn as disabled segments.
+		 *
+		 * @return {Array<string>} The disabled modes.
+		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
+		 */
+		viewSwitchDisabledModes() {
+			if (!this.isBoardLook || !Array.isArray(this.viewSwitch)) {
+				return []
+			}
+			const offered = [...this.effectiveToggleModes, ...(this.showMapSegment ? ['map'] : [])]
+			return this.viewSwitch.filter((mode) => ['table', 'cards', 'board', 'map'].includes(mode) && !offered.includes(mode))
+		},
+
 		/**
 		 * The base view-toggle segments (cards/table/list) passed to CnActionsBar.
 		 * Beta's explicit `viewModes` whitelist wins when set; otherwise the
@@ -5264,11 +5354,11 @@ export default {
 				return []
 			}
 			const props = this.effectiveSchema?.properties || {}
-			const chips = []
+			const chips = [...this.quickFilterActiveChips]
 			for (const [key, raw] of Object.entries(this.effectiveActiveFilters || {})) {
 				const values = (Array.isArray(raw) ? raw : [raw])
 					.filter((value) => value !== null && value !== undefined && value !== '')
-					.map((value) => String(value))
+					.map((value) => this.activeFilterValueLabel(key, value))
 				if (values.length === 0) {
 					continue
 				}
@@ -5278,6 +5368,87 @@ export default {
 			return chips
 		},
 
+		/**
+		 * The Active line's chips for the selected quick filters: one per
+		 * selected tab that declares an `activeLabel` ("Pipeline: Sales"), run
+		 * through the app's translate. A tab without one (an "All" tab) adds no
+		 * chip. The chip carries the tab's index so removing it can deselect it.
+		 *
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-a-quick-filter-with-an-active-label-joins-the-active-line
+		 * @return {Array<{key: string, label: string, quickFilterIndex: number}>}
+		 */
+		quickFilterActiveChips() {
+			const tabs = this.tabStripEntries || []
+			if (tabs.length === 0) {
+				return []
+			}
+			const indices = this.quickFilterMultiple
+				? (this.selectedQuickFilterIndices || [])
+				: [this.activeQuickFilterIndex]
+			return indices
+				.filter((index) => typeof index === 'number' && tabs[index] && typeof tabs[index].activeLabel === 'string' && tabs[index].activeLabel !== '')
+				.map((index) => ({ key: `quick-filter:${index}`, label: this.cnTranslate(tabs[index].activeLabel), quickFilterIndex: index }))
+		},
+
+		/**
+		 * Filter keys over a reference property that the Active line must name,
+		 * and that no reference column resolves already: one spec each, with the
+		 * referenced register and schema off the page schema's `$ref`.
+		 *
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-an-active-chip-names-the-value-not-its-id
+		 * @return {Array<{key: string, labelField: string, register: string, schema: string}>}
+		 */
+		activeFilterRefSpecs() {
+			if (!this.isBoardLook || !this.effectiveSchema) {
+				return []
+			}
+			const keys = Object.keys(this.effectiveActiveFilters || {})
+			if (keys.length === 0) {
+				return []
+			}
+			const covered = new Set(this.refLabelSpecs.map((spec) => spec.key))
+			const fields = fieldsFromSchema(this.effectiveSchema, { includeReadOnly: true })
+			const specs = []
+			for (const key of keys) {
+				if (covered.has(key)) {
+					continue
+				}
+				const field = fields.find((f) => f.key === key)
+				const ref = field && field.reference
+				if (!ref || ref.schema === undefined || ref.schema === null) {
+					continue
+				}
+				specs.push({
+					key,
+					labelField: '',
+					register: ref.register || (typeof this.register === 'string' ? this.register : ''),
+					schema: String(ref.schema),
+				})
+			}
+			return specs
+		},
+
+		/**
+		 * The ids each active reference filter holds, per filter key, for the
+		 * label lookup of the Active line.
+		 *
+		 * @return {{[key: string]: string[]}} Distinct ids per filter key.
+		 */
+		activeFilterRefIds() {
+			const out = {}
+			const keys = new Set([...this.refLabelSpecs, ...this.activeFilterRefSpecs].map((spec) => spec.key))
+			for (const [key, raw] of Object.entries(this.effectiveActiveFilters || {})) {
+				if (!keys.has(key)) {
+					continue
+				}
+				out[key] = (Array.isArray(raw) ? raw : [raw])
+					.filter((id) => id !== null && id !== undefined && id !== '' && typeof id !== 'object')
+					.map((id) => String(id))
+					.sort()
+			}
+			return out
+		},
+
 		/**
 		 * The plural the board bulk band names: "With the selected cases".
 		 * The schema's `titlePlural` (or `plural`), else the lower-cased
@@ -5558,6 +5729,14 @@ export default {
 			},
 		},
 
+		// The Active line names a referenced value, not its id.
+		activeFilterRefIds: {
+			deep: true,
+			handler() {
+				this.loadRefLabels()
+			},
+		},
+
 		countRequestKey: {
 			immediate: true,
 			/** @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views */
@@ -5826,7 +6005,7 @@ export default {
 		 * @spec openspec/changes/index-ref-column-labels/tasks.md#task-2
 		 */
 		async loadRefLabels() {
-			const specs = this.refLabelSpecs
+			const specs = [...this.refLabelSpecs, ...this.activeFilterRefSpecs]
 			if (specs.length === 0) {
 				return
 			}
@@ -5841,7 +6020,8 @@ export default {
 			}
 			await Promise.all(specs.map(async (spec) => {
 				const known = this.refLabels[spec.key] || {}
-				const ids = (this.refLabelIds[spec.key] || []).filter((id) => !Object.hasOwn(known, id))
+				const wanted = new Set([...(this.refLabelIds[spec.key] || []), ...(this.activeFilterRefIds[spec.key] || [])])
+				const ids = [...wanted].filter((id) => !Object.hasOwn(known, id))
 				if (ids.length === 0) {
 					return
 				}
@@ -6525,6 +6705,11 @@ export default {
 		 * @return {void}
 		 */
 		onClearFilters() {
+			// "Clear all" on the Active line also undoes the quick filters it
+			// listed (a tab without an `activeLabel` is not a filter there).
+			for (const chip of this.quickFilterActiveChips) {
+				this.deselectQuickFilterChip(chip.quickFilterIndex)
+			}
 			// Clearing the view brings the person's own columns back.
 			this.appliedViewColumns = null
 			this.appliedSavedViewId = ''
@@ -6615,11 +6800,74 @@ export default {
 		 * @spec openspec/changes/screens-index-list-parity/specs/index-list-board-look/spec.md#requirement-the-toolbar-sits-on-the-ground-in-two-rows
 		 */
 		onRemoveActiveFilter(chip) {
+			if (chip && typeof chip.quickFilterIndex === 'number') {
+				this.deselectQuickFilterChip(chip.quickFilterIndex)
+				return
+			}
 			if (chip && typeof chip.key === 'string') {
 				this.onFilterEvent({ key: chip.key, values: [] })
 			}
 		},
 
+		/**
+		 * Undo a quick filter from the Active line. With several tabs selectable
+		 * the tab leaves the selection; with one, the page goes back to its
+		 * default tab when that tab names no active filter itself, and else to no
+		 * tab at all, so the chip does not come straight back.
+		 *
+		 * @param {number} index The tab index the chip stands for.
+		 * @return {void}
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-a-quick-filter-with-an-active-label-joins-the-active-line
+		 */
+		deselectQuickFilterChip(index) {
+			if (this.quickFilterMultiple) {
+				this.onQuickFilterMultiChange((this.selectedQuickFilterIndices || []).filter((i) => i !== index))
+				return
+			}
+			if (this.activeQuickFilterIndex !== index) {
+				return
+			}
+			const tabs = this.tabStripEntries || []
+			let fallback = tabs.findIndex((tab) => tab && tab.default === true)
+			if (fallback < 0 && tabs.length > 0) {
+				fallback = 0
+			}
+			const fallbackNamed = fallback >= 0 && typeof tabs[fallback].activeLabel === 'string' && tabs[fallback].activeLabel !== ''
+			this.onQuickFilterChange(fallback >= 0 && fallback !== index && !fallbackNamed ? fallback : null)
+		},
+
+		/**
+		 * The text an Active chip shows for one filter value: the referenced
+		 * object's label, the facet bucket's label, the schema's `oneOf` title,
+		 * else the value itself.
+		 *
+		 * @param {string} key The filter key.
+		 * @param {unknown} value One value of that filter.
+		 * @return {string} The label.
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-an-active-chip-names-the-value-not-its-id
+		 */
+		activeFilterValueLabel(key, value) {
+			const id = String(value)
+			const refs = this.refLabels[key]
+			if (refs && typeof refs[id] === 'string' && refs[id] !== '') {
+				return refs[id]
+			}
+			const facet = this.effectiveFacetData && this.effectiveFacetData[key]
+			const bucket = facet && Array.isArray(facet.values)
+				? facet.values.find((fv) => fv && typeof fv === 'object' && String(fv.value) === id)
+				: null
+			if (bucket && typeof bucket.label === 'string' && bucket.label !== '') {
+				return this.cnTranslate(bucket.label)
+			}
+			const prop = this.effectiveSchema?.properties?.[key]
+			const options = prop && Array.isArray(prop.oneOf) ? prop.oneOf : []
+			const option = options.find((o) => o && String(o.const) === id && typeof o.title === 'string')
+			if (option) {
+				return this.cnTranslate(option.title)
+			}
+			return id
+		},
+
 		/**
 		 * A header filter was applied or cleared. One column can own several
 		 * query parameters (a range is `key[gte]` and `key[lte]`), so they are