From 25c730223fb69cc2ff8da1ff0052aca4ba211f06 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 22 Sep 2026 15:31:49 +0000
Subject: [PATCH] feat(editor): Add `N8nTimeAgo` and `N8nSelectedItemsInfo` to
 `@n8n/design-system` (no-changelog) (#39230)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../frontend/@n8n/design-system/package.json  |  3 +
 .../SelectedItemsInfo.stories.ts              | 72 +++++++++++++++++++
 .../SelectedItemsInfo.test.ts                 | 61 ++++++++++++++++
 .../SelectedItemsInfo.vue                     | 33 ++++-----
 .../SelectedItemsInfo.test.ts.snap            |  8 +++
 .../component-selected-items-info.md          | 45 ++++++++++++
 .../components/N8nSelectedItemsInfo/index.ts  |  4 ++
 .../components/N8nTimeAgo/TimeAgo.stories.ts  | 46 ++++++++++++
 .../src/components/N8nTimeAgo/TimeAgo.test.ts | 57 +++++++++++++++
 .../src/components/N8nTimeAgo/TimeAgo.vue     | 37 ++++++++++
 .../N8nTimeAgo/component-time-ago.md          | 35 +++++++++
 .../src/components/N8nTimeAgo/index.ts        |  4 ++
 .../design-system/src/components/index.ts     |  4 ++
 .../@n8n/design-system/src/locale/lang/en.ts  |  4 ++
 .../frontend/@n8n/i18n/src/locales/en.json    |  2 -
 packages/frontend/editor-ui/src/app/App.vue   |  2 +
 .../editor-ui/src/app/components/TimeAgo.vue  | 54 +-------------
 .../common/SelectedItemsInfo.test.ts          | 61 ----------------
 .../editor-ui/src/app/utils/timeAgoLocale.ts  | 27 +++++++
 .../editor-ui/src/app/utils/typesUtils.ts     |  4 --
 .../mcpAccess/components/tabs/AgentsTable.vue |  6 +-
 .../components/tabs/WorkflowsTable.vue        |  6 +-
 .../components/dataGrid/DataTableTable.vue    |  5 +-
 .../global/GlobalExecutionsList.test.ts       |  6 +-
 .../global/GlobalExecutionsList.vue           |  5 +-
 pnpm-lock.yaml                                |  9 +++
 26 files changed, 447 insertions(+), 153 deletions(-)
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.stories.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.test.ts
 rename packages/frontend/{editor-ui/src/app/components/common => @n8n/design-system/src/components/N8nSelectedItemsInfo}/SelectedItemsInfo.vue (64%)
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/__snapshots__/SelectedItemsInfo.test.ts.snap
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/component-selected-items-info.md
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/index.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.stories.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.test.ts
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.vue
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/component-time-ago.md
 create mode 100644 packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/index.ts
 delete mode 100644 packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.test.ts
 create mode 100644 packages/frontend/editor-ui/src/app/utils/timeAgoLocale.ts

diff --git a/packages/frontend/@n8n/design-system/package.json b/packages/frontend/@n8n/design-system/package.json
index 9aaae34a07f..c9735660e0d 100644
--- a/packages/frontend/@n8n/design-system/package.json
+++ b/packages/frontend/@n8n/design-system/package.json
@@ -62,6 +62,7 @@
     "@testing-library/jest-dom": "catalog:frontend",
     "@testing-library/user-event": "catalog:frontend",
     "@testing-library/vue": "catalog:frontend",
+    "@types/dateformat": "^3.0.0",
     "@types/lodash": "catalog:",
     "@types/markdown-it": "catalog:",
     "@types/markdown-it-emoji": "^2.0.2",
@@ -110,6 +111,7 @@
     "@tiptap/vue-3": "catalog:",
     "@vueuse/core": "catalog:frontend",
     "clsx": "^2.1.1",
+    "dateformat": "^3.0.3",
     "element-plus": "catalog:frontend",
     "highlight.js": "catalog:frontend",
     "is-emoji-supported": "^0.0.5",
@@ -121,6 +123,7 @@
     "parse-diff": "^0.11.1",
     "reka-ui": "^2.5.0",
     "sanitize-html": "catalog:",
+    "timeago.js": "^4.0.2",
     "vue-boring-avatars": "^1.3.0",
     "xss": "catalog:"
   },
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.stories.ts
new file mode 100644
index 00000000000..04363e13279
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.stories.ts
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import N8nSelectedItemsInfo from './SelectedItemsInfo.vue';
+import N8nButton from '../N8nButton';
+
+const meta = {
+	title: 'Core/SelectedItemsInfo',
+	component: N8nSelectedItemsInfo,
+	argTypes: {
+		selectedCount: { control: 'number' },
+	},
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'Floating bar that shows how many list rows are selected, with bulk actions and a clear-selection button. It is positioned absolutely at the bottom of its closest positioned ancestor.',
+			},
+		},
+	},
+} satisfies Meta<typeof N8nSelectedItemsInfo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const methods = {
+	onDeleteSelected: action('deleteSelected'),
+	onClearSelection: action('clearSelection'),
+};
+
+export const Default: Story = {
+	render: (args) => ({
+		components: { N8nSelectedItemsInfo },
+		setup() {
+			return { args, ...methods };
+		},
+		template: `
+			<div style="position: relative; height: 200px;">
+				<N8nSelectedItemsInfo
+					v-bind="args"
+					@delete-selected="onDeleteSelected"
+					@clear-selection="onClearSelection"
+				/>
+			</div>
+		`,
+	}),
+	args: {
+		selectedCount: 3,
+	},
+};
+
+export const CustomActions: Story = {
+	render: (args) => ({
+		components: { N8nSelectedItemsInfo, N8nButton },
+		setup() {
+			return { args, ...methods };
+		},
+		template: `
+			<div style="position: relative; height: 200px;">
+				<N8nSelectedItemsInfo v-bind="args" @clear-selection="onClearSelection">
+					<template #actions>
+						<N8nButton variant="subtle" label="Archive" />
+						<N8nButton variant="subtle" label="Export" />
+					</template>
+				</N8nSelectedItemsInfo>
+			</div>
+		`,
+	}),
+	args: {
+		selectedCount: 1,
+	},
+};
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.test.ts
new file mode 100644
index 00000000000..51f3b0ce225
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.test.ts
@@ -0,0 +1,61 @@
+import { fireEvent, render, screen } from '@testing-library/vue';
+
+import N8nSelectedItemsInfo from './SelectedItemsInfo.vue';
+
+describe('N8nSelectedItemsInfo', () => {
+	it('matches snapshot', () => {
+		const { html } = render(N8nSelectedItemsInfo, {
+			props: { selectedCount: 2 },
+			global: { stubs: ['N8nButton'] },
+		});
+
+		expect(html()).toMatchSnapshot();
+	});
+
+	it('renders nothing when selectedCount is 0', () => {
+		render(N8nSelectedItemsInfo, { props: { selectedCount: 0 } });
+
+		expect(screen.queryByTestId('selected-items-info')).not.toBeInTheDocument();
+	});
+
+	it('renders the count and both buttons when items are selected', () => {
+		render(N8nSelectedItemsInfo, { props: { selectedCount: 3 } });
+
+		expect(screen.getByTestId('selected-items-info')).toHaveTextContent('3 rows selected');
+		expect(screen.getByTestId('delete-selected-button')).toHaveTextContent('Delete');
+		expect(screen.getByTestId('clear-selection-button')).toHaveTextContent('Clear selection');
+	});
+
+	it('uses the singular text for one selected item', () => {
+		render(N8nSelectedItemsInfo, { props: { selectedCount: 1 } });
+
+		expect(screen.getByTestId('selected-items-info')).toHaveTextContent('1 row selected');
+	});
+
+	it('emits deleteSelected when the delete button is clicked', async () => {
+		const { emitted } = render(N8nSelectedItemsInfo, { props: { selectedCount: 1 } });
+
+		await fireEvent.click(screen.getByTestId('delete-selected-button'));
+
+		expect(emitted().deleteSelected).toHaveLength(1);
+	});
+
+	it('emits clearSelection when the clear button is clicked', async () => {
+		const { emitted } = render(N8nSelectedItemsInfo, { props: { selectedCount: 5 } });
+
+		await fireEvent.click(screen.getByTestId('clear-selection-button'));
+
+		expect(emitted().clearSelection).toHaveLength(1);
+	});
+
+	it('renders the actions slot instead of the default delete button', () => {
+		render(N8nSelectedItemsInfo, {
+			props: { selectedCount: 2 },
+			slots: { actions: '<button data-test-id="custom-action">Archive</button>' },
+		});
+
+		expect(screen.getByTestId('custom-action')).toBeInTheDocument();
+		expect(screen.queryByTestId('delete-selected-button')).not.toBeInTheDocument();
+		expect(screen.getByTestId('clear-selection-button')).toBeInTheDocument();
+	});
+});
diff --git a/packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.vue b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.vue
similarity index 64%
rename from packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.vue
rename to packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.vue
index 1aaeddb9801..c7a9fb1dd28 100644
--- a/packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/SelectedItemsInfo.vue
@@ -1,28 +1,27 @@
 <script setup lang="ts">
-import { useI18n } from '@n8n/i18n';
-import { N8nButton } from '@n8n/design-system';
-interface Props {
+import { useI18n } from '../../composables/useI18n';
+import N8nButton from '../N8nButton';
+
+export interface SelectedItemsInfoProps {
+	/** Number of selected items. The component renders nothing when it is 0 */
 	selectedCount: number;
 }
 
-const props = withDefaults(defineProps<Props>(), {});
+defineOptions({ name: 'N8nSelectedItemsInfo' });
+const props = defineProps<SelectedItemsInfoProps>();
 
 const emit = defineEmits<{
 	deleteSelected: [];
 	clearSelection: [];
 }>();
 
-const i18n = useI18n();
+const { t } = useI18n();
 
 const getSelectedText = () => {
-	return i18n.baseText('generic.list.selected', {
-		adjustToNumber: props.selectedCount,
-		interpolate: { count: `${props.selectedCount}` },
-	});
-};
+	const key =
+		props.selectedCount === 1 ? 'selectedItemsInfo.selectedOne' : 'selectedItemsInfo.selectedMany';
 
-const getClearSelectionText = () => {
-	return i18n.baseText('generic.list.clearSelection');
+	return t(key, { count: `${props.selectedCount}` });
 };
 
 const handleDeleteSelected = () => {
@@ -35,11 +34,7 @@ const handleClearSelection = () => {
 </script>
 
 <template>
-	<div
-		v-if="selectedCount > 0"
-		:class="$style.selectionOptions"
-		:data-test-id="`selected-items-info`"
-	>
+	<div v-if="selectedCount > 0" :class="$style.selectionOptions" data-test-id="selected-items-info">
 		<span>
 			{{ getSelectedText() }}
 		</span>
@@ -48,7 +43,7 @@ const handleClearSelection = () => {
 			<N8nButton
 				variant="subtle"
 				data-test-id="delete-selected-button"
-				:label="i18n.baseText('generic.delete')"
+				:label="t('generic.delete')"
 				:class="$style.button"
 				@click="handleDeleteSelected"
 			/>
@@ -56,7 +51,7 @@ const handleClearSelection = () => {
 		<N8nButton
 			variant="subtle"
 			data-test-id="clear-selection-button"
-			:label="getClearSelectionText()"
+			:label="t('selectedItemsInfo.clearSelection')"
 			:class="$style.button"
 			@click="handleClearSelection"
 		/>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/__snapshots__/SelectedItemsInfo.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/__snapshots__/SelectedItemsInfo.test.ts.snap
new file mode 100644
index 00000000000..571cf2d2793
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/__snapshots__/SelectedItemsInfo.test.ts.snap
@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`N8nSelectedItemsInfo > matches snapshot 1`] = `
+"<div class="selectionOptions" data-test-id="selected-items-info"><span>2 rows selected</span><!-- Custom bulk actions; defaults to the delete button for existing consumers -->
+  <n8n-button-stub label="Delete" variant="subtle" size="medium" loading="false" icononly="false" disabled="false" class="button" data-test-id="delete-selected-button"></n8n-button-stub>
+  <n8n-button-stub label="Clear selection" variant="subtle" size="medium" loading="false" icononly="false" disabled="false" class="button" data-test-id="clear-selection-button"></n8n-button-stub>
+</div>"
+`;
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/component-selected-items-info.md b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/component-selected-items-info.md
new file mode 100644
index 00000000000..b74af340f16
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/component-selected-items-info.md
@@ -0,0 +1,45 @@
+# N8nSelectedItemsInfo
+
+Floating bar that shows how many list rows are selected, with bulk actions and a clear-selection button.
+
+- **Component name:** `N8nSelectedItemsInfo`
+- **W3C APG patterns:** [Button](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
+
+## Why?
+
+Lists with row selection (executions, data tables, MCP access tables) show the same selection summary and bulk actions. One component keeps the layout, tokens, and test ids the same everywhere.
+
+The component is positioned absolutely at the bottom of its closest positioned ancestor. A consumer can pass a class to change the positioning.
+
+## Public API
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `selectedCount` | `number` | Required | Number of selected items. The component renders nothing when it is 0. |
+
+### Events
+
+- `deleteSelected()` when the default delete button is clicked.
+- `clearSelection()` when the clear-selection button is clicked.
+
+### Slots
+
+- `actions` replaces the default delete button with custom bulk actions. The clear-selection button always renders after the actions.
+
+## Examples
+
+```vue
+<N8nSelectedItemsInfo
+	:selected-count="selectedCount"
+	@delete-selected="handleDeleteSelected"
+	@clear-selection="handleClearSelection"
+/>
+
+<N8nSelectedItemsInfo :selected-count="selectedIds.length" @clear-selection="clearSelection">
+	<template #actions>
+		<N8nButton variant="subtle" label="Remove access" @click="removeAccess" />
+	</template>
+</N8nSelectedItemsInfo>
+```
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/index.ts b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/index.ts
new file mode 100644
index 00000000000..646563f81ec
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nSelectedItemsInfo/index.ts
@@ -0,0 +1,4 @@
+import N8nSelectedItemsInfo from './SelectedItemsInfo.vue';
+
+export default N8nSelectedItemsInfo;
+export type { SelectedItemsInfoProps } from './SelectedItemsInfo.vue';
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.stories.ts
new file mode 100644
index 00000000000..e36fdf93144
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.stories.ts
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import N8nTimeAgo from './TimeAgo.vue';
+
+const minutesFromNow = (minutes: number) =>
+	new Date(Date.now() + minutes * 60 * 1000).toISOString();
+
+const meta = {
+	title: 'Core/TimeAgo',
+	component: N8nTimeAgo,
+	argTypes: {
+		date: { control: 'text' },
+		capitalize: { control: 'boolean' },
+		locale: { control: 'text' },
+	},
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'Renders a date as a relative time, for example "3 minutes ago". The absolute date is available as the title attribute.',
+			},
+		},
+	},
+} satisfies Meta<typeof N8nTimeAgo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		date: minutesFromNow(-3),
+	},
+};
+
+export const Capitalized: Story = {
+	args: {
+		date: minutesFromNow(-3),
+		capitalize: true,
+	},
+};
+
+export const FutureDate: Story = {
+	args: {
+		date: minutesFromNow(90),
+	},
+};
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.test.ts
new file mode 100644
index 00000000000..e61d0498ea3
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.test.ts
@@ -0,0 +1,57 @@
+import { render } from '@testing-library/vue';
+import { register } from 'timeago.js';
+
+import N8nTimeAgo from './TimeAgo.vue';
+
+const NOW = new Date('2026-09-22T12:00:00.000Z');
+const THREE_MINUTES_AGO = new Date(NOW.getTime() - 3 * 60 * 1000).toISOString();
+
+describe('N8nTimeAgo', () => {
+	beforeEach(() => {
+		vi.useFakeTimers({ now: NOW });
+	});
+
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	it('renders a lowercase relative time with the default locale', () => {
+		const { container } = render(N8nTimeAgo, { props: { date: THREE_MINUTES_AGO } });
+
+		expect(container.textContent?.trim()).toBe('3 minutes ago');
+	});
+
+	it('lowercases the locale text unless capitalize is set', () => {
+		register('test-capitalized', () => ['Moments ago', 'In moments']);
+
+		const lowercased = render(N8nTimeAgo, {
+			props: { date: THREE_MINUTES_AGO, locale: 'test-capitalized' },
+		});
+		expect(lowercased.container.textContent?.trim()).toBe('moments ago');
+
+		const capitalized = render(N8nTimeAgo, {
+			props: { date: THREE_MINUTES_AGO, locale: 'test-capitalized', capitalize: true },
+		});
+		expect(capitalized.container.textContent?.trim()).toBe('Moments ago');
+	});
+
+	it('formats with the locale passed through the locale prop', () => {
+		register('test-indexed', (_number, index) => [`past ${index}`, `future ${index}`]);
+
+		const { container } = render(N8nTimeAgo, {
+			props: { date: THREE_MINUTES_AGO, locale: 'test-indexed' },
+		});
+
+		// index 3 is the "%s minutes ago" row of the timeago.js locale table
+		expect(container.textContent?.trim()).toBe('past 3');
+	});
+
+	it('sets the absolute date as the title', () => {
+		const { container } = render(N8nTimeAgo, { props: { date: THREE_MINUTES_AGO } });
+
+		// the test harness pins TZ to UTC
+		expect(container.querySelector('span')?.getAttribute('title')).toContain(
+			'22 September, 2026 @ 11:57',
+		);
+	});
+});
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.vue b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.vue
new file mode 100644
index 00000000000..d516dad3977
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/TimeAgo.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import dateformat from 'dateformat';
+import { format } from 'timeago.js';
+import { computed } from 'vue';
+
+export interface TimeAgoProps {
+	/** Date to render, as an ISO 8601 string */
+	date: string;
+	/** Keep the casing of the locale text instead of lowercasing it */
+	capitalize?: boolean;
+	/** Name of a timeago.js locale that the app registered. Omit to use the timeago.js default */
+	locale?: string;
+}
+
+defineOptions({ name: 'N8nTimeAgo' });
+const props = withDefaults(defineProps<TimeAgoProps>(), {
+	capitalize: false,
+});
+
+const formatted = computed(() => {
+	const text = format(props.date, props.locale);
+
+	if (!props.capitalize) {
+		return text.toLowerCase();
+	}
+
+	return text;
+});
+
+const title = computed(() => dateformat(new Date(props.date).getTime(), 'd mmmm, yyyy @ HH:MM Z'));
+</script>
+
+<template>
+	<span :title="title">
+		{{ formatted }}
+	</span>
+</template>
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/component-time-ago.md b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/component-time-ago.md
new file mode 100644
index 00000000000..39a9e559b73
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/component-time-ago.md
@@ -0,0 +1,35 @@
+# N8nTimeAgo
+
+Renders a date as a relative time, for example "3 minutes ago". The absolute date is available as the `title` attribute.
+
+- **Component name:** `N8nTimeAgo`
+- **Reference:** [timeago.js](https://github.com/hustcc/timeago.js)
+
+## Why?
+
+Cards, tables, and detail views show when a resource changed. One component keeps the wording and the tooltip format the same everywhere. The component only formats. The app registers its timeago.js locale once and passes the locale name through the `locale` prop, so the strings stay in the app's translation files.
+
+## Public API
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `date` | `string` | Required | Date to render, as an ISO 8601 string. |
+| `capitalize` | `boolean` | `false` | Keep the casing of the locale text instead of lowercasing it. |
+| `locale` | `string` | `undefined` | Name of a timeago.js locale that the app registered. Omit to use the timeago.js default. |
+
+### Events
+
+None.
+
+### Slots
+
+None.
+
+## Examples
+
+```vue
+<N8nTimeAgo :date="workflow.updatedAt" />
+<N8nTimeAgo :date="client.grantedAt" capitalize :locale="defaultLocale" />
+```
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/index.ts b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/index.ts
new file mode 100644
index 00000000000..f3f23a3d4f4
--- /dev/null
+++ b/packages/frontend/@n8n/design-system/src/components/N8nTimeAgo/index.ts
@@ -0,0 +1,4 @@
+import N8nTimeAgo from './TimeAgo.vue';
+
+export default N8nTimeAgo;
+export type { TimeAgoProps } from './TimeAgo.vue';
diff --git a/packages/frontend/@n8n/design-system/src/components/index.ts b/packages/frontend/@n8n/design-system/src/components/index.ts
index 296ce37e06c..679644646ec 100644
--- a/packages/frontend/@n8n/design-system/src/components/index.ts
+++ b/packages/frontend/@n8n/design-system/src/components/index.ts
@@ -110,6 +110,8 @@ export { default as N8nOption } from './N8nOption';
 export { default as N8nPagination } from './N8nPagination';
 export { default as N8nSectionHeader } from './N8nSectionHeader';
 export { default as N8nSelectableList } from './N8nSelectableList';
+export { default as N8nSelectedItemsInfo } from './N8nSelectedItemsInfo';
+export type { SelectedItemsInfoProps } from './N8nSelectedItemsInfo';
 export { default as N8nSettingsLayout } from './N8nSettingsLayout';
 export type { SettingsLayoutProps } from './N8nSettingsLayout';
 export { default as N8nSettingsPageHeader } from './N8nSettingsPageHeader';
@@ -167,6 +169,8 @@ export { default as N8nTabs } from './N8nTabs';
 export { default as N8nTag } from './N8nTag';
 export { default as N8nTags } from './N8nTags';
 export { default as N8nText } from './N8nText';
+export { default as N8nTimeAgo } from './N8nTimeAgo';
+export type { TimeAgoProps } from './N8nTimeAgo';
 export { default as N8nTooltip } from './N8nTooltip';
 export type { N8nTooltipProps, N8nTooltipSlots } from './N8nTooltip';
 export { default as N8nAiActivityStepButton } from './N8nAiActivityStepButton';
diff --git a/packages/frontend/@n8n/design-system/src/locale/lang/en.ts b/packages/frontend/@n8n/design-system/src/locale/lang/en.ts
index ff70d7e006e..aea8fdf9c5a 100644
--- a/packages/frontend/@n8n/design-system/src/locale/lang/en.ts
+++ b/packages/frontend/@n8n/design-system/src/locale/lang/en.ts
@@ -17,6 +17,7 @@ export default {
 	'generic.cancel': 'Cancel',
 	'generic.close': 'Close',
 	'generic.moreInfo': 'More info',
+	'generic.delete': 'Delete',
 	'aiModelSelector.credentialsMissing': 'Credentials missing',
 	'nds.auth.roles.owner': 'Owner',
 	'nds.userInfo.you': '(you)',
@@ -53,6 +54,9 @@ export default {
 	'pagination.pageSizeOption': '{size}/page',
 	'pagination.goTo': 'Go to',
 	'pagination.goToPage': 'Go to page',
+	'selectedItemsInfo.selectedOne': '{count} row selected',
+	'selectedItemsInfo.selectedMany': '{count} rows selected',
+	'selectedItemsInfo.clearSelection': 'Clear selection',
 	'contextMenu.noItems': 'No items',
 	'codeDiff.couldNotReplace': 'Could not replace code',
 	'codeDiff.codeReplaced': 'Code replaced',
diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json
index bf3e9ab036e..55c7410ba2f 100644
--- a/packages/frontend/@n8n/i18n/src/locales/en.json
+++ b/packages/frontend/@n8n/i18n/src/locales/en.json
@@ -152,8 +152,6 @@
 	"generic.unknownError": "An unknown error occurred",
 	"generic.upgradeToEnterprise": "Upgrade to Enterprise",
 	"generic.never": "Never",
-	"generic.list.clearSelection": "Clear selection",
-	"generic.list.selected": "{count} row selected | {count} rows selected",
 	"generic.project": "Project",
 	"generic.projects": "Projects",
 	"generic.your": "Your",
diff --git a/packages/frontend/editor-ui/src/app/App.vue b/packages/frontend/editor-ui/src/app/App.vue
index 1d1f5949a06..b89c3757a09 100644
--- a/packages/frontend/editor-ui/src/app/App.vue
+++ b/packages/frontend/editor-ui/src/app/App.vue
@@ -19,6 +19,7 @@ import { useNDVStore } from '@/features/ndv/shared/ndv.store';
 import { useSettingsStore } from '@n8n/stores/settings.store';
 import LoadingView from '@/app/views/LoadingView.vue';
 import { locale } from '@n8n/design-system';
+import { registerTimeAgoLocale } from '@/app/utils/timeAgoLocale';
 import { setLanguage } from '@n8n/i18n';
 // Note: no need to import en.json here; default 'en' is handled via setLanguage
 import { useRootStore } from '@n8n/stores/useRootStore';
@@ -112,6 +113,7 @@ watch(
 		axios.defaults.headers.common['Accept-Language'] = newLocale;
 
 		void locale.use(newLocale);
+		registerTimeAgoLocale(newLocale);
 	},
 	{ immediate: true },
 );
diff --git a/packages/frontend/editor-ui/src/app/components/TimeAgo.vue b/packages/frontend/editor-ui/src/app/components/TimeAgo.vue
index 78b524703a8..b33e17e8cd3 100644
--- a/packages/frontend/editor-ui/src/app/components/TimeAgo.vue
+++ b/packages/frontend/editor-ui/src/app/components/TimeAgo.vue
@@ -1,67 +1,19 @@
 <script lang="ts" setup>
-import { format, register } from 'timeago.js';
-import { convertToHumanReadableDate } from '@/app/utils/typesUtils';
-import { computed, onBeforeMount } from 'vue';
+import { N8nTimeAgo } from '@n8n/design-system';
 import { useRootStore } from '@n8n/stores/useRootStore';
-import { useI18n } from '@n8n/i18n';
 
 type Props = {
 	date: string;
 	capitalize?: boolean;
 };
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
 	capitalize: false,
 });
 
 const rootStore = useRootStore();
-const i18n = useI18n();
-
-const defaultLocale = computed(() => rootStore.defaultLocale);
-const formatted = computed(() => {
-	const text = format(props.date, defaultLocale.value);
-
-	if (!props.capitalize) {
-		return text.toLowerCase();
-	}
-
-	return text;
-});
-
-const convertDate = computed(() => {
-	const date = new Date(props.date);
-	const epoch = date.getTime();
-	return convertToHumanReadableDate(epoch);
-});
-
-onBeforeMount(() => {
-	register(defaultLocale.value, localeFunc);
-});
-
-function localeFunc(_: number, index: number): [string, string] {
-	// number: the timeago / timein number;
-	// index: the index of array below;
-	return [
-		[i18n.baseText('timeAgo.justNow'), i18n.baseText('timeAgo.rightNow')],
-		[i18n.baseText('timeAgo.justNow'), i18n.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
-		[i18n.baseText('timeAgo.oneMinuteAgo'), i18n.baseText('timeAgo.inOneMinute')],
-		[i18n.baseText('timeAgo.minutesAgo'), i18n.baseText('timeAgo.inMinutes')],
-		[i18n.baseText('timeAgo.oneHourAgo'), i18n.baseText('timeAgo.inOneHour')],
-		[i18n.baseText('timeAgo.hoursAgo'), i18n.baseText('timeAgo.inHours')],
-		[i18n.baseText('timeAgo.oneDayAgo'), i18n.baseText('timeAgo.inOneDay')],
-		[i18n.baseText('timeAgo.daysAgo'), i18n.baseText('timeAgo.inDays')],
-		[i18n.baseText('timeAgo.oneWeekAgo'), i18n.baseText('timeAgo.inOneWeek')],
-		[i18n.baseText('timeAgo.weeksAgo'), i18n.baseText('timeAgo.inWeeks')],
-		[i18n.baseText('timeAgo.oneMonthAgo'), i18n.baseText('timeAgo.inOneMonth')],
-		[i18n.baseText('timeAgo.monthsAgo'), i18n.baseText('timeAgo.inMonths')],
-		[i18n.baseText('timeAgo.oneYearAgo'), i18n.baseText('timeAgo.inOneYear')],
-		[i18n.baseText('timeAgo.yearsAgo'), i18n.baseText('timeAgo.inYears')],
-	][index] as [string, string];
-}
 </script>
 
 <template>
-	<span :title="convertDate">
-		{{ formatted }}
-	</span>
+	<N8nTimeAgo :date="date" :capitalize="capitalize" :locale="rootStore.defaultLocale" />
 </template>
diff --git a/packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.test.ts b/packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.test.ts
deleted file mode 100644
index 9b903782099..00000000000
--- a/packages/frontend/editor-ui/src/app/components/common/SelectedItemsInfo.test.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createComponentRenderer } from '@/__tests__/render';
-import SelectedItemsInfo from '@/app/components/common/SelectedItemsInfo.vue';
-
-const renderComponent = createComponentRenderer(SelectedItemsInfo);
-
-vi.mock('@n8n/i18n', async (importOriginal) => ({
-	...(await importOriginal()),
-	useI18n: () => ({
-		baseText: (key: string) => key,
-	}),
-}));
-
-describe('SelectedItemsInfo', () => {
-	it('should not render when selectedCount is 0', () => {
-		const { queryByTestId } = renderComponent({
-			props: {
-				selectedCount: 0,
-			},
-		});
-
-		expect(queryByTestId('selected-items-info')).not.toBeInTheDocument();
-	});
-
-	it('should render when selectedCount is greater than 0', () => {
-		const { getByTestId } = renderComponent({
-			props: {
-				selectedCount: 3,
-			},
-		});
-
-		expect(getByTestId('selected-items-info')).toBeInTheDocument();
-		expect(getByTestId('delete-selected-button')).toBeInTheDocument();
-		expect(getByTestId('clear-selection-button')).toBeInTheDocument();
-	});
-
-	it('should emit deleteSelected event when delete button is clicked', () => {
-		const { getByTestId, emitted } = renderComponent({
-			props: {
-				selectedCount: 1,
-			},
-		});
-
-		getByTestId('delete-selected-button').click();
-
-		expect(emitted().deleteSelected).toBeTruthy();
-		expect(emitted().deleteSelected).toHaveLength(1);
-	});
-
-	it('should emit clearSelection event when clear button is clicked', () => {
-		const { getByTestId, emitted } = renderComponent({
-			props: {
-				selectedCount: 5,
-			},
-		});
-
-		getByTestId('clear-selection-button').click();
-
-		expect(emitted().clearSelection).toBeTruthy();
-		expect(emitted().clearSelection).toHaveLength(1);
-	});
-});
diff --git a/packages/frontend/editor-ui/src/app/utils/timeAgoLocale.ts b/packages/frontend/editor-ui/src/app/utils/timeAgoLocale.ts
new file mode 100644
index 00000000000..4df255a609e
--- /dev/null
+++ b/packages/frontend/editor-ui/src/app/utils/timeAgoLocale.ts
@@ -0,0 +1,27 @@
+import { i18n } from '@n8n/i18n';
+import { register } from 'timeago.js';
+
+// index: position in the timeago.js locale table; each row is [past, future]
+function localeFunc(_number: number, index: number): [string, string] {
+	return [
+		[i18n.baseText('timeAgo.justNow'), i18n.baseText('timeAgo.rightNow')],
+		[i18n.baseText('timeAgo.justNow'), i18n.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
+		[i18n.baseText('timeAgo.oneMinuteAgo'), i18n.baseText('timeAgo.inOneMinute')],
+		[i18n.baseText('timeAgo.minutesAgo'), i18n.baseText('timeAgo.inMinutes')],
+		[i18n.baseText('timeAgo.oneHourAgo'), i18n.baseText('timeAgo.inOneHour')],
+		[i18n.baseText('timeAgo.hoursAgo'), i18n.baseText('timeAgo.inHours')],
+		[i18n.baseText('timeAgo.oneDayAgo'), i18n.baseText('timeAgo.inOneDay')],
+		[i18n.baseText('timeAgo.daysAgo'), i18n.baseText('timeAgo.inDays')],
+		[i18n.baseText('timeAgo.oneWeekAgo'), i18n.baseText('timeAgo.inOneWeek')],
+		[i18n.baseText('timeAgo.weeksAgo'), i18n.baseText('timeAgo.inWeeks')],
+		[i18n.baseText('timeAgo.oneMonthAgo'), i18n.baseText('timeAgo.inOneMonth')],
+		[i18n.baseText('timeAgo.monthsAgo'), i18n.baseText('timeAgo.inMonths')],
+		[i18n.baseText('timeAgo.oneYearAgo'), i18n.baseText('timeAgo.inOneYear')],
+		[i18n.baseText('timeAgo.yearsAgo'), i18n.baseText('timeAgo.inYears')],
+	][index] as [string, string];
+}
+
+/** Register the app's translated strings as the timeago.js locale that `N8nTimeAgo` formats with. */
+export function registerTimeAgoLocale(locale: string) {
+	register(locale, localeFunc);
+}
diff --git a/packages/frontend/editor-ui/src/app/utils/typesUtils.ts b/packages/frontend/editor-ui/src/app/utils/typesUtils.ts
index 27720a96d5f..819fe39e34b 100644
--- a/packages/frontend/editor-ui/src/app/utils/typesUtils.ts
+++ b/packages/frontend/editor-ui/src/app/utils/typesUtils.ts
@@ -60,10 +60,6 @@ export function convertToDisplayDate(epochTime: number) {
 	return dateformat(epochTime, 'yyyy-mm-dd HH:MM:ss');
 }
 
-export function convertToHumanReadableDate(epochTime: number) {
-	return dateformat(epochTime, 'd mmmm, yyyy @ HH:MM Z');
-}
-
 export function stringSizeInBytes(input: string | IDataObject | IDataObject[] | undefined): number {
 	if (input === undefined) return 0;
 
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/AgentsTable.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/AgentsTable.vue
index 969756e161c..748c489fdcc 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/AgentsTable.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/AgentsTable.vue
@@ -10,9 +10,9 @@ import {
 	N8nDataTableServer,
 	N8nLink,
 	N8nLoading,
+	N8nSelectedItemsInfo,
 	N8nText,
 } from '@n8n/design-system';
-import SelectedItemsInfo from '@/app/components/common/SelectedItemsInfo.vue';
 import { AGENT_VIEW, PROJECT_AGENTS } from '@/features/agents/constants';
 import router from '@/app/router';
 
@@ -230,7 +230,7 @@ const projectLink = (agent: Agent) =>
 					/>
 				</template>
 			</N8nDataTableServer>
-			<SelectedItemsInfo
+			<N8nSelectedItemsInfo
 				:class="$style['selection-bar']"
 				:selected-count="selectedAgentIds.length"
 				@clear-selection="clearSelection"
@@ -243,7 +243,7 @@ const projectLink = (agent: Agent) =>
 						@click="onBulkRemoveMcpAccess"
 					/>
 				</template>
-			</SelectedItemsInfo>
+			</N8nSelectedItemsInfo>
 		</div>
 	</div>
 </template>
diff --git a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue
index 02468fa93ab..5df1a5bb695 100644
--- a/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue
+++ b/packages/frontend/editor-ui/src/features/ai/mcpAccess/components/tabs/WorkflowsTable.vue
@@ -10,12 +10,12 @@ import {
 	N8nIcon,
 	N8nLink,
 	N8nLoading,
+	N8nSelectedItemsInfo,
 	N8nText,
 	N8nTooltip,
 } from '@n8n/design-system';
 import { VIEWS } from '@/app/constants';
 import router from '@/app/router';
-import SelectedItemsInfo from '@/app/components/common/SelectedItemsInfo.vue';
 import WorkflowLocation from '@/features/ai/mcpAccess/components/WorkflowLocation.vue';
 import { MCP_TOOLTIP_DELAY } from '@/features/ai/mcpAccess/mcp.constants';
 import { getResourcePermissions } from '@n8n/permissions';
@@ -283,7 +283,7 @@ const onConnectClick = () => {
 					/>
 				</template>
 			</N8nDataTableServer>
-			<SelectedItemsInfo
+			<N8nSelectedItemsInfo
 				:class="$style['selection-bar']"
 				:selected-count="selectedWorkflowIds.length"
 				@clear-selection="clearSelection"
@@ -296,7 +296,7 @@ const onConnectClick = () => {
 						@click="onBulkRemoveMcpAccess"
 					/>
 				</template>
-			</SelectedItemsInfo>
+			</N8nSelectedItemsInfo>
 		</div>
 	</div>
 </template>
diff --git a/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/DataTableTable.vue b/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/DataTableTable.vue
index 15c0e4aa591..1c35c7d2686 100644
--- a/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/DataTableTable.vue
+++ b/packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/DataTableTable.vue
@@ -9,7 +9,6 @@ import { AgGridVue } from 'ag-grid-vue3';
 import type { GetRowIdParams, GridReadyEvent, SortChangedEvent } from 'ag-grid-community';
 import { n8nTheme } from '@/features/core/dataTable/components/dataGrid/n8nTheme';
 import { registerAgGridModulesOnce } from '@/features/core/dataTable/components/dataGrid/registerAgGridModulesOnce';
-import SelectedItemsInfo from '@/app/components/common/SelectedItemsInfo.vue';
 import {
 	DATA_TABLE_HEADER_HEIGHT,
 	DATA_TABLE_ROW_HEIGHT,
@@ -29,7 +28,7 @@ import { useI18n } from '@n8n/i18n';
 import { GRID_FILTER_CONFIG } from '@/features/core/dataTable/utils/filterMappings';
 import { useDebounce } from '@n8n/composables/useDebounce';
 
-import { N8nPagination } from '@n8n/design-system';
+import { N8nPagination, N8nSelectedItemsInfo } from '@n8n/design-system';
 registerAgGridModulesOnce();
 
 type Props = {
@@ -224,7 +223,7 @@ defineExpose({
 				/>
 			</div>
 		</div>
-		<SelectedItemsInfo
+		<N8nSelectedItemsInfo
 			:selected-count="selection.selectedCount.value"
 			@delete-selected="dataTableOperations.handleDeleteSelected"
 			@clear-selection="selection.handleClearSelection"
diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsList.test.ts b/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsList.test.ts
index f14ffec3ab9..45fef3daf2a 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsList.test.ts
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsList.test.ts
@@ -32,10 +32,8 @@ vi.mock('@n8n/i18n', async (importOriginal) => ({
 	...(await importOriginal()),
 	useI18n: () => ({
 		displayTimer: (timer: number) => timer,
-		baseText: (key: string, options: { interpolate: { count: string } }) => {
-			if (key === 'generic.list.selected') {
-				return `${options.interpolate.count} executions selected`;
-			} else if (key === 'executionsList.retryOf') {
+		baseText: (key: string) => {
+			if (key === 'executionsList.retryOf') {
 				return 'Retry of';
 			} else if (key === 'executionsList.successRetry') {
 				return 'Success retry';
diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsList.vue b/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsList.vue
index 79178f2fa2f..a64fe5f7f97 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsList.vue
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsList.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import SelectedItemsInfo from '@/app/components/common/SelectedItemsInfo.vue';
 import { useMessage } from '@/app/composables/useMessage';
 import { usePageRedirectionHelper } from '@/app/composables/usePageRedirectionHelper';
 import { useTelemetry } from '@n8n/composables/useTelemetry';
@@ -22,7 +21,7 @@ import ExecutionsFilter from '../ExecutionsFilter.vue';
 import ExecutionStopAllText from '../ExecutionStopAllText.vue';
 import GlobalExecutionsListItem from './GlobalExecutionsListItem.vue';
 
-import { N8nButton, N8nCheckbox, N8nTableBase } from '@n8n/design-system';
+import { N8nButton, N8nCheckbox, N8nSelectedItemsInfo, N8nTableBase } from '@n8n/design-system';
 import { ElSkeletonItem } from 'element-plus';
 
 const props = withDefaults(
@@ -479,7 +478,7 @@ const goToUpgrade = () => {
 					</tbody>
 				</N8nTableBase>
 			</div>
-			<SelectedItemsInfo
+			<N8nSelectedItemsInfo
 				:selected-count="selectedCount"
 				@delete-selected="handleDeleteSelected"
 				@clear-selection="handleClearSelection"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ea5c4b946f2..8f7edec4862 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5382,6 +5382,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      dateformat:
+        specifier: ^3.0.3
+        version: 3.0.3
       element-plus:
         specifier: catalog:frontend
         version: 2.4.3(patch_hash=9547bca88969f416e6132b09a48e71a969dce25ee6669c7f1f78d51ce9b80e7c)(vue@3.5.26(typescript@6.0.2))
@@ -5415,6 +5418,9 @@ importers:
       sanitize-html:
         specifier: 'catalog:'
         version: 2.17.7
+      timeago.js:
+        specifier: ^4.0.2
+        version: 4.0.2
       vue-boring-avatars:
         specifier: ^1.3.0
         version: 1.3.0(vue@3.5.26(typescript@6.0.2))
@@ -5455,6 +5461,9 @@ importers:
       '@testing-library/vue':
         specifier: catalog:frontend
         version: 8.1.0(@vue/compiler-sfc@3.5.26)(vue@3.5.26(typescript@6.0.2))
+      '@types/dateformat':
+        specifier: ^3.0.0
+        version: 3.0.1
       '@types/lodash':
         specifier: 'catalog:'
         version: 4.17.17