@conduction/nextcloud-vue 2.104.0 → 2.106.0

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -184,27 +184,10 @@
 				<CnIcon :name="widget.icon" :size="20" />
 			</template>
 			<!-- A renderer that reports its own header (`header` event:
-			     `{ link, note, action, pill }`, e.g. record-list's "3 in totaal",
-			     a facts card's status pill). -->
-			<template v-if="rendererHeader.note || rendererHeader.action || rendererHeader.pill" #actions>
-				<CnStatusBadge
-					v-if="rendererHeader.pill"
-					:label="rendererHeader.pill.label"
-					:variant="rendererHeader.pill.variant"
-					data-testid="cn-detail-widget-header-pill" />
-				<span
-					v-if="rendererHeader.note"
-					class="cn-detail-page__catalog-note"
-					data-testid="cn-detail-widget-header-note">{{ rendererHeader.note }}</span>
-				<button
-					v-if="rendererHeader.action"
-					type="button"
-					class="cn-detail-page__catalog-action"
-					data-testid="cn-detail-widget-header-action"
-					@click="rendererHeader.action.run()">
-					<CnIcon v-if="rendererHeader.action.icon" :name="rendererHeader.action.icon" :size="16" />
-					{{ rendererHeader.action.label }}
-				</button>
+			     `{ link, note, action, actions, pill }`, e.g. record-list's "3 in
+			     totaal", a facts card's status pill). -->
+			<template v-if="hasRendererHeaderItems" #actions>
+				<CnDetailWidgetHeaderItems :header="rendererHeader" />
 			</template>
 			<template v-if="catalogAddEnabled" #action-items>
 				<NcActionButton @click="invokeCatalogAdd">
@@ -264,10 +247,16 @@
 			<template v-if="widget.icon" #title-icon>
 				<CnIcon :name="widget.icon" :size="20" />
 			</template>
+			<!-- The app widget reports its title row the way the built-in
+			     cards do (`header` event). -->
+			<template v-if="hasRendererHeaderItems" #actions>
+				<CnDetailWidgetHeaderItems :header="rendererHeader" />
+			</template>
 			<component
 				:is="renderer"
 				ref="renderer"
 				v-bind="rendererProps"
+				@header="onRendererHeader"
 				@selectObject="onSelectObject" />
 		</CnWidgetWrapper>
 
@@ -304,7 +293,7 @@ import CnObjectDataWidget from '../CnObjectDataWidget/CnObjectDataWidget.vue'
 import CnObjectFilesWidget from '../CnObjectFilesWidget/CnObjectFilesWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
-import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
+import CnDetailWidgetHeaderItems from './CnDetailWidgetHeaderItems.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
@@ -378,12 +367,12 @@ export default {
 	name: 'CnDetailWidgetHost',
 
 	components: {
+		CnDetailWidgetHeaderItems,
 		CnIcon,
 		CnLeafMountHost,
 		CnObjectDataWidget,
 		CnObjectGeoWidget,
 		CnRelatedObjectsWidget,
-		CnStatusBadge,
 		CnWidgetWrapper,
 		NcActionButton,
 		CnEmptyContent,
@@ -639,7 +628,7 @@ export default {
 			 * `header` event (screens-relation-pages): a link and a note,
 			 * with the list's total already filled in.
 			 */
-			rendererHeader: { link: null, note: '', action: null, pill: null },
+			rendererHeader: { link: null, note: '', actions: [], pill: null },
 		}
 	},
 
@@ -672,6 +661,12 @@ export default {
 			return this.isBare ? undefined : widgetTitleOf(this.widget)
 		},
 
+		/** @return {boolean} Whether the reported header has anything for the title row. */
+		hasRendererHeaderItems() {
+			const h = this.rendererHeader
+			return !!(h.note || h.pill || (h.actions && h.actions.length > 0))
+		},
+
 		/**
 		 * The card header's link: the one the renderer reports, else, with
 		 * `showHeaderLink`, the one the manifest declares for the widget.
@@ -1072,11 +1067,20 @@ export default {
 		 * override a value the widget computes there; the whole content still
 		 * arrives as `content`.
 		 *
+		 * `content.chartKind` is read as the chart's `type`, as the dashboard
+		 * dispatcher reads it, so a chart placed on a detail page draws.
+		 *
 		 * @return {object} The declared content keys.
 		 * @spec openspec/changes/declared-props-detail-index-sidebar/specs/widget-hosts/spec.md#requirement-a-widget-host-passes-only-the-keys-a-widget-declares
+		 * @spec openspec/changes/detail-chart-kind/specs/widget-hosts/spec.md#requirement-a-detail-chart-reads-chartkind-as-its-type
 		 */
 		declaredContent() {
-			return pickDeclaredProps(this.renderer, this.content, this.widget?.type || '')
+			let bindings = this.content
+			if (bindings && typeof bindings === 'object' && bindings.chartKind !== undefined && bindings.type === undefined) {
+				const { chartKind, ...rest } = bindings
+				bindings = { ...rest, type: chartKind }
+			}
+			return pickDeclaredProps(this.renderer, bindings, this.widget?.type || '')
 		},
 
 		/**
@@ -1217,17 +1221,20 @@ export default {
 
 	methods: {
 		/**
-		 * Take the header a content-only renderer reports.
+		 * Take the header a content-only renderer, or an app widget in the
+		 * titled card, reports.
 		 *
-		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null}} header The header parts.
+		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null, actions?: Array<{label: string, icon?: string, run: () => unknown}>}} header The header parts.
 		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-record-list-shows-the-objects-that-point-at-this-record
 		 */
 		onRendererHeader(header) {
 			const link = header && header.link && typeof header.link === 'object' ? header.link : null
 			const note = header && typeof header.note === 'string' ? header.note : ''
-			const action = header && header.action && typeof header.action.run === 'function' && header.action.label ? header.action : null
+			const usable = (action) => action && typeof action.run === 'function' && action.label
+			// `action` (one) and `actions` (several) both count, `action` first.
+			const actions = [header && header.action, ...((header && Array.isArray(header.actions)) ? header.actions : [])].filter(usable)
 			const pill = header && header.pill && typeof header.pill.label === 'string' && header.pill.label !== '' ? header.pill : null
-			this.rendererHeader = { link, note, action, pill }
+			this.rendererHeader = { link, note, actions, pill }
 		},
 
 		/**

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -1206,11 +1206,15 @@ export default {
 	min-width: 0;
 }
 
+/* `padding: 0`: Nextcloud's core stylesheet pads every `dl` 12px at the top
+   and bottom, which put a side card's facts 24px under its title, against
+   the board's 12 (DqZaak "Behandeling", DqZaakDocumenten). */
 .cn-facts-widget__rows {
 	display: grid;
 	grid-template-columns: max-content 1fr;
 	gap: 8px 16px;
 	margin: 0;
+	padding: 0;
 	font-size: 14px;
 }
 

package/src/components/CnFeaturesAndRoadmapView/CnFeaturesAndRoadmapView.vue

@@ -460,7 +460,7 @@ export default {
 		 * @return {object}
 		 */
 		boardOptions() {
-			const keys = ['layout', 'tabs', 'filter', 'statusLabels', 'next', 'issueLabels', 'subtitle', 'notice', 'noticeLink', 'summaries', 'documentationButton', 'suggestButton']
+			const keys = ['layout', 'tabs', 'filter', 'statusLabels', 'next', 'issueLabels', 'subtitle', 'notice', 'noticeLink', 'summaries', 'documentationButton', 'suggestButton', 'actionsMenu']
 			const options = {}
 			for (const key of keys) {
 				if (this.board && this.board[key] !== undefined && this.board[key] !== null) {

package/src/components/CnFeaturesBoard/CnFeaturesBoard.vue

@@ -36,7 +36,7 @@
 						{{ t('nextcloud-vue', 'Suggest feature') }}
 					</NcButton>
 					<NcActions
-						v-if="!tabs"
+						v-if="!tabs && actionsMenu"
 						:menuName="t('nextcloud-vue', 'Actions')"
 						:forceName="true"
 						data-testid="cn-features-board-actions">
@@ -85,6 +85,7 @@
 				</button>
 			</div>
 			<NcActions
+				v-if="actionsMenu"
 				:menuName="t('nextcloud-vue', 'Actions')"
 				:forceName="true"
 				class="cn-features-board__tab-actions"
@@ -375,6 +376,8 @@ export default {
 
 		/** Show the Features and Roadmap folder tabs. */
 		tabs: { type: Boolean, default: true },
+		/** Show the Actions menu (suggest, buildiq, AI skills, support), in the header or the tab row; false draws none. */
+		actionsMenu: { type: Boolean, default: true },
 		/** `chips`: pill buttons with a count. `segmented`: a segmented control without counts. */
 		filter: {
 			type: String,

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -5,7 +5,7 @@
 <template>
 	<div
 		class="cn-files-browser"
-		:class="{ 'cn-files-browser--dragging': dragging }"
+		:class="{ 'cn-files-browser--dragging': dragging, 'cn-files-browser--drop-panel': dropOverlay && dropDetail !== '' }"
 		data-testid="cn-files-browser"
 		@dragenter.prevent="onDragEnter"
 		@dragover.prevent="onDragOver"
@@ -22,7 +22,10 @@
 			aria-hidden="true"
 			data-testid="cn-files-browser-drop-overlay">
 			<span class="cn-files-browser__drop-icon"><Upload :size="28" /></span>
-			<strong class="cn-files-browser__drop-label">{{ dropLabel }}</strong>
+			<strong class="cn-files-browser__drop-label">{{ cnTranslate(dropLabel) }}</strong>
+			<span v-if="dropDetailText"
+				class="cn-files-browser__drop-detail"
+				data-testid="cn-files-browser-drop-detail">{{ dropDetailText }}</span>
 		</div>
 		<p v-if="dropOverlay"
 			class="hidden-visually"
@@ -1026,12 +1029,26 @@ export default {
 			default: false,
 		},
 
-		/** The line `dropOverlay` draws and announces. */
+		/** The line `dropOverlay` draws and announces, through the host translate. */
 		dropLabel: {
 			type: String,
 			default: () => t('nextcloud-vue', 'Drop to add'),
 		},
 
+		/**
+		 * A second line under `dropLabel` in the drop state, through the host
+		 * translate: where the files go ("{count} bestanden komen bij zaak
+		 * 2026-0082, als nog te beoordelen document."). `{count}` is the number
+		 * of files dragged when the browser can tell, and the line is left out
+		 * when it cannot. The overlay then also fills the panel.
+		 *
+		 * @spec openspec/changes/files-drop-panel/specs/files-browser/spec.md#requirement-the-drop-state-fills-the-panel-and-says-where-the-files-go
+		 */
+		dropDetail: {
+			type: String,
+			default: '',
+		},
+
 		/** Show a line under the list saying files can be dropped on it. */
 		dropHint: {
 			type: Boolean,
@@ -1259,6 +1276,8 @@ export default {
 			 */
 			visibleColumnKeys: null,
 			dragging: false,
+			/** The number of files the current drag carries, null when unknown. */
+			dragCount: null,
 			/** Nested dragenter/dragleave pairs, so a child does not end the drag. */
 			dragDepth: 0,
 			/** What the live region says: the drop label, then what was added. */
@@ -1294,6 +1313,24 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * `dropDetail` through the host translate with `{count}` filled, '' when
+		 * there is none or the count it needs is unknown.
+		 *
+		 * @spec openspec/changes/files-drop-panel/specs/files-browser/spec.md#requirement-the-drop-state-fills-the-panel-and-says-where-the-files-go
+		 * @return {string}
+		 */
+		dropDetailText() {
+			if (!this.dropDetail) {
+				return ''
+			}
+			const text = this.cnTranslate(this.dropDetail)
+			if (!text.includes('{count}')) {
+				return text
+			}
+			return this.dragCount === null ? '' : text.replace(/\{count\}/g, String(this.dragCount))
+		},
+
 		/**
 		 * Whether this person may add to and change the open folder. Over
 		 * WebDAV the server answers each write on its own, so this is true;
@@ -2247,7 +2284,8 @@ export default {
 			this.dragDepth++
 			if (!this.dragging) {
 				this.dragging = true
-				this.dropStatus = this.dropOverlay ? this.dropLabel : ''
+				this.dragCount = this.draggedFileCount(event)
+				this.dropStatus = this.dropOverlay ? [this.cnTranslate(this.dropLabel), this.dropDetailText].filter(Boolean).join(' ') : ''
 			}
 		},
 
@@ -2277,6 +2315,22 @@ export default {
 			}
 		},
 
+		/**
+		 * How many files a drag carries, or null when the browser does not
+		 * say (it lists the items only once they are dropped in some browsers).
+		 *
+		 * @param {DragEvent} event The drag.
+		 * @return {number|null}
+		 */
+		draggedFileCount(event) {
+			const items = event?.dataTransfer?.items
+			if (!items || typeof items.length !== 'number') {
+				return null
+			}
+			const count = Array.from(items).filter((item) => item && item.kind === 'file').length
+			return count > 0 ? count : null
+		},
+
 		/**
 		 * Whether a drag carries files (not text or a link from the page).
 		 * A drag whose types cannot be read counts as files, as before.
@@ -2888,6 +2942,18 @@ export default {
 	outline-offset: 4px;
 }
 
+/* With a `dropDetail` the drop state fills the panel it sits in, as the
+   board draws it (DqZaakDocumentenSlepen), not only the list's own height. */
+.cn-files-browser--dragging.cn-files-browser--drop-panel {
+	min-height: max(320px, 100%);
+}
+
+.cn-files-browser__drop-detail {
+	max-width: 520px;
+	font-size: 14px;
+	color: var(--color-main-text);
+}
+
 .cn-files-browser__drop-overlay {
 	position: absolute;
 	inset: 0;

package/src/components/CnFlowRunsWidget/CnFlowRunsWidget.vue

@@ -105,9 +105,10 @@ import { translate as t } from '@nextcloud/l10n'
 import { NcLoadingIcon } from '@nextcloud/vue'
 import { computed, inject, ref } from 'vue'
 import { useEndpointSource } from '../../composables/useEndpointSource.js'
+import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
-import { resolveFilterValue } from '../../utils/resolveFilterTokens.js'
+import { resolveDeepTokens, resolveFilterValue } from '../../utils/resolveFilterTokens.js'
 
 /**
  * The OpenRegister endpoint that lists the caller's live flow runs.
@@ -205,6 +206,8 @@ export default {
 		 * so a library string localises through the consuming app's l10n.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/** The page's action dispatcher (CnPageRenderer), for `headerAction`. */
+		cnDispatchAction: { default: null },
 	},
 
 	props: {
@@ -228,6 +231,10 @@ export default {
 		 *   subject's finished runs render below it. Absent = today's org-wide
 		 *   widget, unchanged.
 		 * - `emptyText` — override for the "nothing running" line.
+		 * - `headerAction` — an action descriptor drawn in the card header
+		 *   (`{ label, icon?, ...action }`, "Flow uitvoeren"), reported through
+		 *   the `header` event and dispatched with the page's dispatcher; its
+		 *   tokens resolve against the record. The runs are read again after it.
 		 *
 		 * @type {{limit?: number, pollSeconds?: number, rowRoute?: string, runRoute?: string, subject?: string, emptyText?: string, title?: string}}
 		 */
@@ -257,6 +264,8 @@ export default {
 		},
 	},
 
+	emits: ['header'],
+
 	setup(props) {
 		// The shared endpoint engine owns request dedup, the short-TTL cache
 		// and the cn:page:refresh / cn:widget:refresh subscriptions — the same
@@ -352,6 +361,7 @@ export default {
 			refetchCompleted,
 			resolvedSubject,
 			injectedTranslate,
+			tokenCtx,
 		}
 	},
 
@@ -521,7 +531,17 @@ export default {
 		},
 	},
 
+	watch: {
+		'content.headerAction': {
+			deep: true,
+			handler() {
+				this.emitHeader()
+			},
+		},
+	},
+
 	mounted() {
+		this.emitHeader()
 		this.startPolling()
 		document.addEventListener('visibilitychange', this.onVisibilityChange)
 	},
@@ -531,6 +551,47 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Tell the card around the runs what its header shows: the header
+		 * action, if any.
+		 *
+		 * @return {void}
+		 */
+		emitHeader() {
+			const action = this.content && this.content.headerAction
+			const usable = action && typeof action === 'object' && typeof action.label === 'string' && action.label !== ''
+			/**
+			 * @event header The card header's parts: `{ link, note, action, pill }`, `action` being `{ label, icon, run }` or null.
+			 */
+			this.$emit('header', {
+				link: null,
+				note: '',
+				action: usable ? { label: this.tr(action.label), icon: action.icon || '', run: () => this.runHeaderAction() } : null,
+				pill: null,
+			})
+		},
+
+		/**
+		 * Run the header action with the record's tokens resolved, then read the
+		 * runs again so a started run shows.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async runHeaderAction() {
+			const { label, icon, ...action } = resolveDeepTokens(this.content.headerAction, this.tokenCtx())
+			try {
+				const outcome = await (typeof this.cnDispatchAction === 'function'
+					? this.cnDispatchAction(action)
+					: dispatchAction(action, { router: this.$router || null }))
+				if (outcome === false) {
+					return
+				}
+			} catch {
+				return
+			}
+			this.refetchAll()
+		},
+
 		/**
 		 * Start (or restart) the refetch interval, unless polling is disabled.
 		 *

package/src/components/CnFlowsPage/CnFlowBoard.vue

@@ -36,7 +36,7 @@
 				<NcButton v-if="showRun"
 					:disabled="store.running || !store.flow.id"
 					data-testid="flow-board-run"
-					@click="$emit('run')">
+					@click="onRun">
 					{{ t('nextcloud-vue', 'Run') }}
 				</NcButton>
 				<NcButton v-if="testSubjectReady"
@@ -109,7 +109,7 @@
 					:key="group.app"
 					class="cn-flow-board__palette-group">
 					<h4 class="cn-flow-board__palette-app">
-						{{ group.app }}
+						{{ group.name }}
 					</h4>
 					<ul class="cn-flow-board__palette-list">
 						<li v-for="entry in group.entries" :key="entry.id">
@@ -135,7 +135,7 @@
 					:toolbarActions="false"
 					:addStep="!showPalette"
 					@save="$emit('save')"
-					@run="$emit('run')" />
+					@run="onRun" />
 				<div v-if="store.inRunView"
 					class="cn-flow-board__legend"
 					data-testid="flow-board-legend">
@@ -183,6 +183,15 @@
 					<h3 class="cn-flow-board__card-title" data-testid="flow-board-step-name">
 						{{ stepName }}
 					</h3>
+					<dl v-if="stepSettings.length > 0" class="cn-flow-board__settings">
+						<div v-for="setting in stepSettings"
+							:key="setting.key"
+							class="cn-flow-board__setting"
+							data-testid="flow-board-step-setting">
+							<dt>{{ setting.label }}</dt>
+							<dd>{{ setting.value }}</dd>
+						</div>
+					</dl>
 					<div class="cn-flow-board__step-actions">
 						<NcButton data-testid="flow-board-edit-step" @click="store.editingNodeId = store.selectedNodeId">
 							{{ t('nextcloud-vue', 'Edit step') }}
@@ -212,7 +221,23 @@
 						</NcButton>
 					</div>
 				</template>
-				<CnFlowSidebar v-else embedded />
+				<template v-else-if="showRuns">
+					<NcButton variant="tertiary"
+						class="cn-flow-board__runs-back"
+						data-testid="flow-board-hide-runs"
+						@click="showRuns = false">
+						{{ t('nextcloud-vue', 'Back to the step settings') }}
+					</NcButton>
+					<CnFlowSidebar embedded />
+				</template>
+				<div v-else class="cn-flow-board__inspector-empty" data-testid="flow-board-inspector-empty">
+					<p>{{ t('nextcloud-vue', 'Select a step on the canvas to see its settings.') }}</p>
+					<NcButton variant="secondary"
+						data-testid="flow-board-show-runs"
+						@click="showRuns = true">
+						{{ t('nextcloud-vue', 'Show runs') }}
+					</NcButton>
+				</div>
 			</aside>
 		</div>
 	</div>
@@ -232,6 +257,7 @@ import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
 import { FLOW_RUN_ACTIVE_STATUSES, useFlowStore } from '../../composables/useFlowStore.js'
 import { formatRelativeDate } from '../../utils/boardDate.js'
 import { flowOutcomeLevels, flowRunDurationMs, flowRunLogLines, flowRunName, formatFlowDuration } from '../../utils/flowRunLog.js'
+import { appDisplayNames } from '../../utils/nextcloudApps.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
 /**
@@ -278,7 +304,7 @@ export default {
 	},
 
 	data() {
-		return { runTab: 'step', testOpen: false, testRecord: null }
+		return { runTab: 'step', testOpen: false, testRecord: null, appNames: {}, showRuns: false }
 	},
 
 	computed: {
@@ -414,17 +440,25 @@ export default {
 			return { tone: 'success', text: this.t('nextcloud-vue', 'The flow is valid.') }
 		},
 
-		/** @return {Array<object>} The palette grouped by owning app. */
+		/**
+		 * The palette grouped by owning app, each group named by the app's
+		 * display name (its id when Nextcloud names none), the app that owns
+		 * this flow first.
+		 *
+		 * @return {Array<{app: string, name: string, entries: Array<object>}>} The groups.
+		 */
 		paletteGroups() {
 			const groups = {}
 			;(this.store.nodeCatalog || []).forEach((entry) => {
 				const app = String(entry?.app || String(entry?.id || '').split('.')[0] || '')
 				if (!groups[app]) {
-					groups[app] = { app, entries: [] }
+					groups[app] = { app, name: this.appNames[app] || app, entries: [] }
 				}
 				groups[app].entries.push(entry)
 			})
-			return Object.values(groups)
+			const list = Object.values(groups)
+			const host = list.findIndex((group) => group.app === this.app)
+			return host > 0 ? [list[host], ...list.slice(0, host), ...list.slice(host + 1)] : list
 		},
 
 		/** @return {object|null} The run on screen. */
@@ -477,6 +511,37 @@ export default {
 			return entry ? (entry.displayName || entry.id) : String(node?.type || '')
 		},
 
+		/**
+		 * The selected step's settings as its owner declares them in the
+		 * catalogue's `configForm`: label and value, a select's option label,
+		 * Yes or No for a switch. Unset settings are left out.
+		 *
+		 * @return {Array<{key: string, label: string, value: string}>} The settings.
+		 */
+		stepSettings() {
+			const node = this.store.selectedNode
+			const entry = node ? this.store.catalogEntry(node.type) : null
+			const config = (node && node.config) || {}
+			const form = (entry && Array.isArray(entry.configForm)) ? entry.configForm : []
+			return form
+				.filter((field) => field && field.key && config[field.key] !== undefined && config[field.key] !== null && config[field.key] !== '')
+				.map((field) => {
+					const raw = config[field.key]
+					const option = Array.isArray(field.options) ? field.options.find((o) => o && o.value === raw) : null
+					let value
+					if (option) {
+						value = String(option.label ?? option.value)
+					} else if (typeof raw === 'boolean') {
+						value = raw ? this.t('nextcloud-vue', 'Yes') : this.t('nextcloud-vue', 'No')
+					} else if (typeof raw === 'object') {
+						value = JSON.stringify(raw)
+					} else {
+						value = String(raw)
+					}
+					return { key: field.key, label: field.label || field.key, value }
+				})
+		},
+
 		/** @return {string} The selected step's name. */
 		stepName() {
 			const node = this.store.selectedNode
@@ -507,7 +572,36 @@ export default {
 		},
 	},
 
+	watch: {
+		// A selected step takes the panel back from the run history.
+		'store.selectedNodeId': function(id) {
+			if (id) {
+				this.showRuns = false
+			}
+		},
+	},
+
+	async created() {
+		// The palette names its groups by app display name; only the column
+		// palette draws them, so only it reads the names.
+		if (this.palette !== 'column') {
+			return
+		}
+		const { default: axios } = await import('@nextcloud/axios')
+		this.appNames = await appDisplayNames(axios)
+	},
+
 	methods: {
+		/**
+		 * Run the flow, with the run history in the panel to follow it.
+		 *
+		 * @return {void}
+		 */
+		onRun() {
+			this.showRuns = true
+			this.$emit('run')
+		},
+
 		/**
 		 * Run the saved flow once with the picked record as its subject, then
 		 * close the dialog; the run shows on the canvas as any run does.
@@ -822,6 +916,36 @@ export default {
 	text-align: center;
 }
 
+.cn-flow-board__settings {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin: 0;
+}
+
+.cn-flow-board__setting dt {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-flow-board__setting dd {
+	margin: 2px 0 0;
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+
+.cn-flow-board__inspector-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-flow-board__inspector-empty p {
+	margin: 0;
+}
+
 .cn-flow-board__step-actions,
 .cn-flow-board__step-footer {
 	display: flex;