@conduction/nextcloud-vue 2.56.0-beta.12 → 2.56.0-beta.14

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--with-views': viewOptions.length > 0 }" :style="wrapperStyle">
+	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--ground': isGround, 'cn-header-widget--with-views': viewOptions.length > 0 }" :style="wrapperStyle">
 		<div
 			v-if="hasOverlay"
 			class="cn-header-widget__overlay"
@@ -35,12 +35,15 @@
 			</a>
 		</div>
 		<!-- A view switch at the right of the heading (`content.views`): "My
-		     work / My team" as a segmented control whose options are routes. -->
+		     work / My team" as a segmented control whose options are routes,
+		     or views of the page the widget sits on (`option.view`); a view
+		     option controls the page's view region. -->
 		<div v-if="viewOptions.length > 0" class="cn-header-widget__views">
 			<CnSegmentedControl
 				:options="viewOptions"
 				:modelValue="activeView"
 				:ariaLabel="viewsLabel"
+				:controls="viewsRegionId"
 				data-testid="cn-header-widget-views"
 				@update:modelValue="onViewChange" />
 		</div>
@@ -66,6 +69,9 @@ const ALLOWED_TEXT_ALIGN = ['left', 'center', 'right']
 const ALLOWED_VERTICAL_ALIGN = ['top', 'middle', 'bottom']
 const ALLOWED_CTA_STYLES = ['primary', 'secondary', 'ghost']
 
+/** Marks a switch option that selects a page view rather than a route. */
+const VIEW_OPTION_PREFIX = 'view:'
+
 const HEIGHT_PIXELS = Object.freeze({
 	small: 120,
 	medium: 200,
@@ -121,6 +127,12 @@ export default {
 		 * untranslated key renders as itself.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/**
+		 * The views of the page this widget sits on, provided by
+		 * CnDashboardPage / CnDetailPage (`views`). An option with a `view`
+		 * selects one of them. Null outside such a page.
+		 */
+		cnPageViews: { default: null },
 	},
 
 	props: {
@@ -128,12 +140,18 @@ export default {
 		 * Persisted widget content: `{title, subtitle, backgroundImageUrl,
 		 * backgroundImageFileId, backgroundColor, overlayMode, overlayColor,
 		 * overlayOpacity, textColor, textAlign, verticalAlign, height, cta,
-		 * greeting, showDate, plain, views}`. All fields are optional except
+		 * greeting, showDate, plain, ground, views}`. All fields are optional except
 		 * `title` (or `greeting`); unknown enum values collapse to documented
 		 * defaults and the renderer never throws. `views` is
-		 * `{ ariaLabel?, options: [{ label, route, params? }] }`: a segmented
-		 * control at the right of the heading whose checked option is the
-		 * current route; choosing another pushes its route.
+		 * `{ ariaLabel?, options: [{ label, route, params? } | { label, view }] }`:
+		 * a segmented control at the right of the heading whose checked option
+		 * is the current route; choosing another pushes its route. An option
+		 * with `view` selects that view of the page the widget sits on (the
+		 * page's `views`) instead, and the page then draws no switch of its
+		 * own. `ground: true`
+		 * draws the greeting on the page ground: the plain look with no
+		 * padding, a 32px heading and the date line 6px above it (a dashboard
+		 * also drops the widget's card for it).
 		 *
 		 * @type {object}
 		 */
@@ -226,12 +244,45 @@ export default {
 		 */
 		viewOptions() {
 			const raw = this.content && this.content.views && this.content.views.options
-			if (!Array.isArray(raw) || !this.$router) {
+			if (!Array.isArray(raw)) {
 				return []
 			}
+			const pageViewIds = this.pageViewIds
 			return raw
-				.filter((o) => o && typeof o.label === 'string' && o.label !== '' && typeof o.route === 'string' && o.route !== '')
-				.map((o) => ({ value: o.route, label: this.cnTranslate(o.label) }))
+				.filter((o) => o && typeof o.label === 'string' && o.label !== '')
+				.map((o) => {
+					if (typeof o.view === 'string' && o.view !== '') {
+						return pageViewIds.includes(o.view) ? { value: VIEW_OPTION_PREFIX + o.view, label: this.cnTranslate(o.label) } : null
+					}
+					if (typeof o.route === 'string' && o.route !== '' && this.$router) {
+						return { value: o.route, label: this.cnTranslate(o.label) }
+					}
+					return null
+				})
+				.filter(Boolean)
+		},
+
+		/**
+		 * The ids of the page's views, empty outside a page with views.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-greeting-header-can-switch-the-pages-views
+		 * @return {string[]}
+		 */
+		pageViewIds() {
+			const views = this.cnPageViews && Array.isArray(this.cnPageViews.views) ? this.cnPageViews.views : []
+			return views.map((view) => view.id)
+		},
+
+		/**
+		 * The id of the page's view region when an option selects a view,
+		 * for the options' `aria-controls`; '' otherwise.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible
+		 * @return {string}
+		 */
+		viewsRegionId() {
+			const hasViewOption = this.viewOptions.some((o) => o.value.startsWith(VIEW_OPTION_PREFIX))
+			return hasViewOption && this.cnPageViews ? (this.cnPageViews.regionId || '') : ''
 		},
 
 		/**
@@ -246,6 +297,11 @@ export default {
 			if (options.length === 0) {
 				return null
 			}
+			const activeView = this.cnPageViews ? this.cnPageViews.activeId : null
+			const viewMatch = activeView ? options.find((o) => o.value === VIEW_OPTION_PREFIX + activeView) : null
+			if (viewMatch) {
+				return viewMatch.value
+			}
 			const current = this.$route && this.$route.name
 			const match = options.find((o) => o.value === current)
 			return match ? match.value : options[0].value
@@ -260,7 +316,7 @@ export default {
 		 */
 		viewsLabel() {
 			const label = this.content && this.content.views && this.content.views.ariaLabel
-			return label ? this.cnTranslate(label) : t('nextcloud-vue', 'View')
+			return label ? this.cnTranslate(label) : t('nextcloud-vue', 'Views')
 		},
 
 		/**
@@ -269,7 +325,20 @@ export default {
 		 * @return {boolean}
 		 */
 		isPlain() {
-			return Boolean(this.content && this.content.plain === true)
+			return Boolean(this.content && (this.content.plain === true || this.content.ground === true))
+		},
+
+		/**
+		 * Whether the greeting sits on the page ground (`content.ground`):
+		 * the plain look without the card padding, so the date line and the
+		 * heading align with the page edge as the board draws them. Off by
+		 * default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-greeting-can-sit-on-the-page-ground
+		 * @return {boolean}
+		 */
+		isGround() {
+			return Boolean(this.content && this.content.ground === true)
 		},
 
 		/**
@@ -565,9 +634,10 @@ export default {
 				'justify-content': VERTICAL_ALIGN_FLEX[this.verticalAlign],
 				// Plain drops the coloured background, not the card padding:
 				// at 0 the greeting sat flush against the card's left edge.
-				padding: this.isPlain ? '16px' : '16px 24px',
+				// Ground has no card, so it has no padding either.
+				padding: this.isGround ? '0' : (this.isPlain ? '16px' : '16px 24px'),
 				'box-sizing': 'border-box',
-				gap: '8px',
+				gap: this.isGround ? '6px' : '8px',
 				'text-align': this.textAlign,
 			}
 		},
@@ -680,6 +750,12 @@ export default {
 		 * @return {void}
 		 */
 		onViewChange(route) {
+			if (typeof route === 'string' && route.startsWith(VIEW_OPTION_PREFIX)) {
+				if (this.cnPageViews && typeof this.cnPageViews.select === 'function') {
+					this.cnPageViews.select(route.slice(VIEW_OPTION_PREFIX.length))
+				}
+				return
+			}
 			if (!this.$router || !route || route === (this.$route && this.$route.name)) {
 				return
 			}
@@ -765,6 +841,17 @@ export default {
 	padding: 16px;
 }
 
+/* On the page ground (`content.ground`): no card, so no inset around the
+   view switch, and the heading at the board's 32px. */
+.cn-header-widget--ground .cn-header-widget__views {
+	padding: 0;
+}
+
+.cn-header-widget--ground .cn-header-widget__title {
+	font-size: var(--cn-header-ground-title-size, 32px);
+	letter-spacing: -0.01em;
+}
+
 .cn-header-widget__date {
 	font-size: 14px;
 	line-height: 1.4;

package/src/components/CnIndexPage/CnIndexPage.md

@@ -386,7 +386,8 @@ export default {
 | `fieldOverrides` | Object | `{}` | Per-field config overrides passed to `CnFormDialog` |
 | `customComponents` | Object | `null` | Custom-component / handler registry. When set, takes precedence over the injected `cnCustomComponents` from CnAppRoot. Used to resolve `actions[].handler` registry names declared in the manifest (manifest-actions-dispatch). Named handlers resolve out of the v2 `registry` (a `kind: "handler"` entry) FIRST and fall back to this map. |
 | `showViewToggle` | Boolean | `true` | Whether to show the Cards/Table view toggle |
-| `inlineSearch` | Boolean | `false` | Show an inline search field in the actions bar (in addition to / instead of the sidebar search). Fed from the manifest as `pages[].config.inlineSearch`. |
+| `inlineSearch` | Boolean | `false` | Show an inline search field in the actions bar (in addition to / instead of the sidebar search). Fed from the manifest as `pages[].config.inlineSearch`. The field takes the place of the "Showing X of Y" counter unless `showCountWithSearch` is set. |
+| `showCountWithSearch` | Boolean | `false` | Keep the "Showing X of Y" counter visible beside the inline search field, after the search and any `#after-search` controls (only relevant with `inlineSearch`, which otherwise takes the counter's place). Fed from the manifest as `pages[].config.showCountWithSearch`. |
 | `searchPlaceholder` | String | `''` | Placeholder for the inline search field (manifest `config.searchPlaceholder`). |
 | `cardsLabel` | String | `''` | Label for the cards view-toggle option (manifest `config.cardsLabel`, e.g. "Tiles"). |
 | `tableLabel` | String | `''` | Label for the table view-toggle option (manifest `config.tableLabel`, e.g. "List"). |

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -59,6 +59,7 @@
 			:showSearch="inlineSearch"
 			:searchValue="effectiveSearchValue"
 			:searchPlaceholder="searchPlaceholder"
+			:showCountWithSearch="showCountWithSearch"
 			:refreshing="effectiveRefreshing"
 			:refreshDisabled="refreshDisabled"
 			:addDisabled="addDisabled"
@@ -417,6 +418,21 @@
 					<NcLoadingIcon :size="32" :name="loadingText" />
 				</div>
 
+				<!-- Error state: the latest self-fetch failed (e.g. a search term the server rejects) -->
+				<div v-else-if="selfFetchFailed"
+					class="cn-index-page__empty"
+					role="status"
+					data-testid="cn-index-page-fetch-error">
+					<NcEmptyContent :name="t('nextcloud-vue', 'An error occurred')"
+						:description="effectiveSearchValue
+							? t('nextcloud-vue', 'Change the search or try again.')
+							: t('nextcloud-vue', 'Try again later.')">
+						<template #icon>
+							<AlertCircleOutline :size="64" />
+						</template>
+					</NcEmptyContent>
+				</div>
+
 				<!-- Empty state -->
 				<div v-else-if="effectiveObjects.length === 0" class="cn-index-page__empty">
 					<slot name="empty">
@@ -774,6 +790,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 import { NcActionButton, NcActionCaption, NcActionCheckbox, NcActions, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import { getCurrentInstance, inject, markRaw, ref } from 'vue'
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import DatabaseSearch from 'vue-material-design-icons/DatabaseSearch.vue'
@@ -1054,6 +1071,7 @@ export default {
 		NcActionCaption,
 		NcActionCheckbox,
 		NcButton,
+		AlertCircleOutline,
 		Close,
 		Cog,
 		DatabaseSearch,
@@ -2034,6 +2052,17 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Keep the "Showing X of Y" counter visible beside the inline search field,
+		 * after any `#after-search` controls (only relevant with `inlineSearch`,
+		 * which otherwise takes the counter's place). Fed from the manifest as
+		 * `pages[].config.showCountWithSearch`.
+		 */
+		showCountWithSearch: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Placeholder for the inline search field (manifest `config.searchPlaceholder`) */
 		searchPlaceholder: {
 			type: String,
@@ -2934,11 +2963,23 @@ export default {
 			return this.isSelfFetch && !!this.list
 		},
 
+		/**
+		 * Whether the latest self-fetch failed. The store keeps the previous
+		 * rows and pagination on a failed fetch, so while this holds the page
+		 * shows its error state instead of results for an earlier query.
+		 */
+		selfFetchFailed() {
+			return this.isSelfFetchMode && !!this.list.error?.value
+		},
+
 		/** Rows: store collection in self-fetch mode, else the `objects` prop. */
 		effectiveObjects() {
 			if (this.isNamedSource) {
 				return this.namedRows
 			}
+			if (this.selfFetchFailed) {
+				return []
+			}
 			return this.isSelfFetchMode ? (this.list.objects.value || []) : this.objects
 		},
 
@@ -3342,7 +3383,9 @@ export default {
 				s: this.exportSchemaSlug,
 				f: this.filter || null,
 				e: this.countEntries,
-				t: Number(this.effectivePagination?.total ?? 0),
+				// The store's total, not the error override in effectivePagination,
+				// so a failed fetch and its recovery do not refetch the counts.
+				t: Number((this.isSelfFetchMode ? this.list.pagination.value : this.effectivePagination)?.total ?? 0),
 			})
 		},
 
@@ -3748,6 +3791,9 @@ export default {
 
 		/** Pagination: store pagination in self-fetch mode, else the `pagination` prop. */
 		effectivePagination() {
+			if (this.selfFetchFailed) {
+				return { ...this.list.pagination.value, total: 0, page: 1, pages: 1 }
+			}
 			return this.isSelfFetchMode ? this.list.pagination.value : this.pagination
 		},
 

package/src/components/CnSegmentedControl/CnSegmentedControl.md

@@ -43,4 +43,4 @@ export default {
 </script>
 ```
 
-Props: `options` lists the choices, `modelValue` is the chosen value (use `v-model`), `aria-label` names the group (or point `aria-labelledby` at a visible heading), and `stretch` fills the width.
+Props: `options` lists the choices, `modelValue` is the chosen value (use `v-model`), `aria-label` names the group (or point `aria-labelledby` at a visible heading), `controls` names the id of the element the options switch (set as `aria-controls` on every option), and `stretch` fills the width.

package/src/components/CnSegmentedControl/CnSegmentedControl.vue

@@ -20,6 +20,7 @@
 			:aria-checked="isChecked(option) ? 'true' : 'false'"
 			:tabindex="index === focusableIndex ? 0 : -1"
 			:disabled="option.disabled || null"
+			:aria-controls="controls || null"
 			:data-value="option.key"
 			@click="select(option)">
 			<!-- @slot option Replaces the content of one option. -->
@@ -95,6 +96,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Id of the element the options switch, such as the region holding a
+		 * page view's widgets. Set as `aria-controls` on every option.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible
+		 */
+		controls: {
+			type: String,
+			default: '',
+		},
+
 		/** Stretch the control to the full width, with options of equal width. */
 		stretch: {
 			type: Boolean,

package/src/components/CnSetupWizard/CnSetupWizard.vue

@@ -199,13 +199,12 @@
 
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
-import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcNoteCard, NcSelect, NcTextField } from '@nextcloud/vue'
 import CnChoiceCards from '../CnChoiceCards/CnChoiceCards.vue'
 import CnLeafDependencySettings from '../CnLeafDependencySettings/CnLeafDependencySettings.vue'
 import CnWizardDialog from '../CnWizardDialog/CnWizardDialog.vue'
-import { checkDependencies, isDependencyResolved } from '../../composables/useDependencyCheck.js'
+import { checkDependencies, isDependencyResolved, missingRequiredApps, readServerAppStatuses } from '../../composables/useDependencyCheck.js'
 import { useSetupStatus } from '../../composables/useSetupStatus.js'
 import { fieldsFromSchema } from '../../utils/schema.js'
 
@@ -474,16 +473,15 @@ export default {
 		 *
 		 * @return {Array<{ step: object, missing: Array<string> }>}
 		 * @spec openspec/changes/setup-wizard-card-load-and-dependency-gate/specs/cn-setup-wizard/spec.md#requirement-the-wizard-checks-dependencies-before-any-step
+		 * @spec openspec/changes/optional-step-requires/specs/cn-setup-wizard/spec.md#requirement-a-step-whose-required-apps-are-absent-is-not-applicable
 		 */
 		skippedSteps() {
 			return this.declaredSteps
 				.filter((s) => Array.isArray(s.requires) && s.requires.length > 0)
 				.map((step) => {
 					const known = Object.fromEntries(this.dependencyRows.map((d) => [d.id, d]))
-					const missing = checkDependencies(step.requires, this.serverAppStatuses)
-						.map((row) => known[row.id] || row)
-						.filter((row) => !isDependencyResolved(row))
-						.map((row) => row.name || row.id)
+					const missing = missingRequiredApps(step.requires, this.serverAppStatuses)
+						.map((row) => (known[row.id] || row).name || row.id)
 					return { step, missing }
 				})
 				.filter((entry) => entry.missing.length > 0)
@@ -523,11 +521,7 @@ export default {
 		 * @return {object}
 		 */
 		serverAppStatuses() {
-			try {
-				return loadState(this.appId, 'dependency_statuses', {}) || {}
-			} catch {
-				return {}
-			}
+			return readServerAppStatuses(this.appId)
 		},
 
 		/**

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -1489,7 +1489,16 @@ export default {
 	white-space: nowrap;
 }
 
+/* A clickable label is a <button>, and Nextcloud's core stylesheet gives
+   every `button:not(.button-vue)` a min-height of the clickable area (34 to
+   44px) with the text centred in it. That pushed each reachable stage's label
+   about 12px below the current one, which is a <span>. Zeroed here so all
+   labels sit 8px under their bar, as the board draws them. The visually
+   hidden "(current step)" is absolutely positioned and takes no space. */
 button.cn-stages-widget__bar-label {
+	min-height: 0;
+	height: auto;
+	line-height: inherit;
 	cursor: pointer;
 }
 

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -25,7 +25,7 @@
 		]"
 		v-bind="linkAttrs">
 		<div
-			v-if="resolvedIcon"
+			v-if="resolvedIcon && !isStacked"
 			class="cn-kpi-card__icon cn-stat-widget__icon"
 			:style="iconCircleStyle">
 			<CnWidgetIcon :name="resolvedIcon" :size="24" />
@@ -95,13 +95,22 @@
 					</span>
 				</template>
 				<span
-					v-if="!displayLoading && !displayError && resolvedCaption"
+					v-if="!isStacked && !displayLoading && !displayError && resolvedCaption"
 					class="cn-kpi-card__label cn-stat-widget__caption"
 					:class="captionVariantClass"
 					data-testid="cn-stat-widget-caption">
 					{{ resolvedCaption }}
 				</span>
 			</div>
+			<!-- Stacked (`content.layout: "stacked"`): the caption is a line of
+			     its own under the number, as the board's "3 new this week". -->
+			<span
+				v-if="isStacked && !displayLoading && !displayError && resolvedCaption"
+				class="cn-kpi-card__label cn-stat-widget__caption cn-kpi-card__caption-line"
+				:class="captionVariantClass"
+				data-testid="cn-stat-widget-caption">
+				{{ resolvedCaption }}
+			</span>
 		</div>
 	</component>
 </template>
@@ -1242,12 +1251,31 @@ export default {
 		/**
 		 * Card orientation. Horizontal (icon beside the number) is the
 		 * canonical KPI card; `content.layout: 'vertical'` stacks the icon
-		 * above a centred number for a tile taller than it is wide.
+		 * above a centred number for a tile taller than it is wide;
+		 * `content.layout: 'stacked'` is the board look (see `isStacked`).
 		 *
-		 * @return {'horizontal'|'vertical'}
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-stat-tile-can-take-the-stacked-board-look
+		 * @return {'horizontal'|'vertical'|'stacked'}
 		 */
 		cardLayout() {
-			return (this.content || {}).layout === 'vertical' ? 'vertical' : 'horizontal'
+			const layout = (this.content || {}).layout
+			if (layout === 'vertical' || layout === 'stacked') {
+				return layout
+			}
+			return 'horizontal'
+		},
+
+		/**
+		 * Whether the tile takes the stacked board look (`content.layout:
+		 * "stacked"`): a plain muted label, the number at 34px in the text
+		 * colour, the caption on a line of its own, and no icon circle. Off by
+		 * default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-stat-tile-can-take-the-stacked-board-look
+		 * @return {boolean}
+		 */
+		isStacked() {
+			return this.cardLayout === 'stacked'
 		},
 
 		/**

package/src/composables/useDependencyCheck.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: EUPL-1.2
  */
 
+import { loadState } from '@nextcloud/initial-state'
 import { useAppStatus } from './useAppStatus.js'
 
 /**
@@ -59,3 +60,45 @@ export function checkDependencies(entries, serverStatuses = {}) {
 export function isDependencyResolved(row) {
 	return !!row && row.installed === true && row.enabled === true
 }
+
+/**
+ * Read the `dependency_statuses` initial state an app may inject from PHP.
+ *
+ * Keyed by app id: `{ installed, enabled }`. Returns `{}` when the app injects
+ * none or the state cannot be read, so callers fall back to `useAppStatus`.
+ *
+ * @param {string} appId The app whose initial state to read.
+ * @return {object} Server-reported statuses keyed by app id.
+ *
+ * @spec openspec/changes/optional-step-requires/specs/cn-setup-wizard/spec.md#requirement-a-step-whose-required-apps-are-absent-is-not-applicable
+ */
+export function readServerAppStatuses(appId) {
+	try {
+		const statuses = loadState(appId, 'dependency_statuses', {})
+		return (statuses && typeof statuses === 'object') ? statuses : {}
+	} catch {
+		return {}
+	}
+}
+
+/**
+ * The apps in a setup step's `requires` list that are not installed and
+ * enabled.
+ *
+ * This is the one resolution every setup surface uses: `CnSetupWizard` skips a
+ * step when it is non-empty, and `useSetupStatus` then counts that step as not
+ * applicable rather than unmet. Keeping both on one function is what stops the
+ * wizard and the status from disagreeing about the same step.
+ *
+ * @param {Array<string>} requires The step's `requires` app ids.
+ * @param {object} [serverStatuses] Server-reported statuses keyed by app id.
+ * @return {Array<{id: string, name: string, required: boolean, installed: boolean, enabled: boolean}>} The missing apps.
+ *
+ * @spec openspec/changes/optional-step-requires/specs/cn-setup-wizard/spec.md#requirement-a-step-whose-required-apps-are-absent-is-not-applicable
+ */
+export function missingRequiredApps(requires, serverStatuses = {}) {
+	if (!Array.isArray(requires) || requires.length === 0) {
+		return []
+	}
+	return checkDependencies(requires, serverStatuses).filter((row) => !isDependencyResolved(row))
+}

package/src/composables/useListView.js

@@ -94,6 +94,13 @@ export function useListView(objectTypeOrOptions, options) {
 	// field (a folder pane grouping by it, say) reads them here rather than
 	// deriving them from `objects`, which is only the current page.
 	const facets = computed(() => objectStore.facets[objectType] || {})
+	// Outcome of the latest `refresh()`: the store's error for it, or null once
+	// it succeeded or a later fetch stored new rows. The store keeps the previous
+	// rows on a failed fetch, so this is how a consumer tells stale rows from
+	// current ones.
+	const error = ref(null)
+	let refreshSeq = 0
+	let pendingRefreshes = 0
 
 	let searchTimeout = null
 
@@ -178,14 +185,48 @@ export function useListView(objectTypeOrOptions, options) {
 
 	/**
 	 * Fetch the collection using current state params and update sidebar facet data.
+	 * Only the most recently started refresh sets `error`, so an older response
+	 * settling late cannot override a newer one's outcome.
 	 *
 	 * @param {number} [page] Page to fetch
 	 * @return {Promise<void>}
 	 */
 	async function refresh(page = 1) {
-		await objectStore.fetchCollection(objectType, buildParams(page))
+		const seq = ++refreshSeq
+		// This call's own result. `errors[objectType]` is shared by every call
+		// for the type and is not cleared on success, so it cannot say which
+		// request failed; it is only the fallback for a store that ignores
+		// `options.outcome`.
+		const outcome = {}
+		pendingRefreshes++
+		try {
+			await objectStore.fetchCollection(objectType, buildParams(page), { outcome })
+		} catch (e) {
+			if (seq === refreshSeq) {
+				error.value = e
+			}
+			throw e
+		} finally {
+			pendingRefreshes--
+		}
+		if (seq === refreshSeq) {
+			error.value = ('error' in outcome) ? outcome.error : (objectStore.errors?.[objectType] || null)
+		}
 	}
 
+	// A fetch outside `refresh()` (e.g. the live-updates refetch) that stores
+	// new rows recovers the list from an earlier failure. Rows written while
+	// a refresh is pending are left to that refresh, which decides `error`.
+	watch(
+		() => objectStore.collections[objectType],
+		() => {
+			if (pendingRefreshes === 0) {
+				error.value = null
+			}
+		},
+		{ flush: 'sync' },
+	)
+
 	// ── Event handlers ───────────────────────────────────────────────────
 
 	/**
@@ -323,6 +364,7 @@ export function useListView(objectTypeOrOptions, options) {
 		loading,
 		pagination,
 		facets,
+		error,
 		// Local state
 		searchTerm,
 		sortKey,