@flowdular/sdk 0.1.0

package/packages/client/src/i18n/locales/en.json

@@ -0,0 +1,66 @@
+{
+	"accessDenied.description": "Your account is authenticated, but it does not have permission to open this workspace.",
+	"accessDenied.title": "Workspace access was not granted.",
+	"account.close": "Close account menu",
+	"account.label": "Account",
+	"account.language": "Language",
+	"account.menu": "Account menu",
+	"account.signOut": "Sign out",
+	"brand.home": "Flowdular home",
+	"command.close": "ESC close",
+	"command.empty": "No matches for \"{query}\".",
+	"command.label": "Command palette",
+	"command.open": "↵ open",
+	"command.placeholder": "Search views and records…",
+	"command.section": "Navigate",
+	"dashboard.description": "Your business platform, built on the Flowdular foundation. Every module you enable adds its records, screens, and agents here.",
+	"dashboard.greeting": "Welcome, {name}",
+	"dashboard.greetingFallback": "there",
+	"dashboard.steps.count.one": "1 step",
+	"dashboard.steps.count.other": "{count} steps",
+	"dashboard.steps.empty.hint": "Enabled modules add their first steps here. Enable a module with the CLI to see its records, or open Administration to manage users and settings.",
+	"dashboard.steps.empty.title": "No setup steps yet",
+	"dashboard.steps.title": "Start with the essentials",
+	"language.en": "English",
+	"language.pl": "Polski",
+	"nav.close": "Close navigation",
+	"nav.collapse": "Collapse navigation",
+	"nav.dashboard.description": "Business overview",
+	"nav.dashboard.label": "Dashboard",
+	"nav.expand": "Expand navigation",
+	"nav.group.account": "Account",
+	"nav.group.administration": "Administration",
+	"nav.group.agents": "Agents",
+	"nav.group.automations": "Automations",
+	"nav.group.development": "Development",
+	"nav.group.operations": "Operations",
+	"nav.group.workspace": "Workspace",
+	"nav.label": "Platform navigation",
+	"nav.toggle": "Toggle navigation",
+	"org.available": "Available workspaces",
+	"org.close": "Close workspace selector",
+	"org.summary.one": "{role} · 1 workspace",
+	"org.summary.other": "{role} · {count} workspaces",
+	"org.switch": "Switch workspace",
+	"overview.activity.empty.hint": "Sign-ins, member changes, and settings updates appear here as your workspace is used.",
+	"overview.activity.empty.title": "No activity yet",
+	"overview.activity.loading": "Loading activity…",
+	"overview.activity.series": "Events",
+	"overview.activity.subtitle": "Audit events per day over the last 14 days",
+	"overview.activity.title": "Activity",
+	"overview.error": "Could not load the workspace overview.",
+	"overview.modules.empty.title": "No modules yet",
+	"overview.modules.loading": "Loading modules…",
+	"overview.modules.series": "Permissions",
+	"overview.modules.subtitle": "Permissions declared per module",
+	"overview.modules.title": "Modules",
+	"seo.description": "An agentic foundation framework: a production platform core that teams extend with modules built by AI agents.",
+	"seo.imageAlt": "Flowdular. Agentic foundation framework.",
+	"sidebar.status": "Platform online",
+	"topbar.search": "Search workspace",
+	"workspace.description": "Your business platform, built on the Flowdular foundation.",
+	"workspace.fallbackName": "Active organization",
+	"workspace.initializing": "Loading your workspace preferences…",
+	"workspace.switchFailed": "Tenant switch failed.",
+	"workspace.title": "Workspace"
+}

package/packages/client/src/i18n/locales/pl.json

@@ -0,0 +1,66 @@
+{
+	"accessDenied.description": "Konto jest zalogowane, ale nie ma uprawnienia do otwarcia tej przestrzeni roboczej.",
+	"accessDenied.title": "Brak dostępu do przestrzeni roboczej.",
+	"account.close": "Zamknij menu konta",
+	"account.label": "Konto",
+	"account.language": "Język",
+	"account.menu": "Menu konta",
+	"account.signOut": "Wyloguj się",
+	"brand.home": "Flowdular, strona główna",
+	"command.close": "ESC zamyka",
+	"command.empty": "Brak wyników dla \"{query}\".",
+	"command.label": "Paleta poleceń",
+	"command.open": "↵ otwiera",
+	"command.placeholder": "Szukaj widoków i rekordów…",
+	"command.section": "Przejdź do",
+	"dashboard.description": "Twoja platforma biznesowa oparta na fundamencie Flowdular. Każdy włączony moduł dokłada tutaj swoje rekordy, ekrany i agentów.",
+	"dashboard.greeting": "Witaj, {name}",
+	"dashboard.greetingFallback": "użytkowniku",
+	"dashboard.steps.count.one": "1 krok",
+	"dashboard.steps.count.other": "kroki: {count}",
+	"dashboard.steps.empty.hint": "Włączone moduły dodają tutaj swoje pierwsze kroki. Włącz moduł z wiersza poleceń, aby zobaczyć jego rekordy, albo przejdź do Administracji, aby zarządzać użytkownikami i ustawieniami.",
+	"dashboard.steps.empty.title": "Nie ma jeszcze kroków konfiguracji",
+	"dashboard.steps.title": "Zacznij od podstaw",
+	"language.en": "English",
+	"language.pl": "Polski",
+	"nav.close": "Zamknij nawigację",
+	"nav.collapse": "Zwiń nawigację",
+	"nav.dashboard.description": "Przegląd firmy",
+	"nav.dashboard.label": "Pulpit",
+	"nav.expand": "Rozwiń nawigację",
+	"nav.group.account": "Konto",
+	"nav.group.administration": "Administracja",
+	"nav.group.agents": "Agenci",
+	"nav.group.automations": "Automatyzacje",
+	"nav.group.development": "Rozwój",
+	"nav.group.operations": "Operacje",
+	"nav.group.workspace": "Przestrzeń robocza",
+	"nav.label": "Nawigacja platformy",
+	"nav.toggle": "Pokaż lub ukryj nawigację",
+	"org.available": "Dostępne przestrzenie robocze",
+	"org.close": "Zamknij wybór przestrzeni roboczej",
+	"org.summary.one": "{role} · 1 przestrzeń robocza",
+	"org.summary.other": "{role} · przestrzenie robocze: {count}",
+	"org.switch": "Zmień przestrzeń roboczą",
+	"overview.activity.empty.hint": "Logowania, zmiany członków i aktualizacje ustawień pojawią się tutaj, gdy zaczniecie korzystać z przestrzeni roboczej.",
+	"overview.activity.empty.title": "Nie ma jeszcze aktywności",
+	"overview.activity.loading": "Wczytywanie aktywności…",
+	"overview.activity.series": "Zdarzenia",
+	"overview.activity.subtitle": "Zdarzenia z dziennika w podziale na dni, ostatnie 14 dni",
+	"overview.activity.title": "Aktywność",
+	"overview.error": "Nie udało się wczytać przeglądu przestrzeni roboczej.",
+	"overview.modules.empty.title": "Nie ma jeszcze modułów",
+	"overview.modules.loading": "Wczytywanie modułów…",
+	"overview.modules.series": "Uprawnienia",
+	"overview.modules.subtitle": "Uprawnienia zadeklarowane przez moduł",
+	"overview.modules.title": "Moduły",
+	"seo.description": "Fundament platformy agentowej, który zespoły rozszerzają modułami budowanymi przez agentów AI.",
+	"seo.imageAlt": "Flowdular. Fundament platformy agentowej.",
+	"sidebar.status": "Platforma działa",
+	"topbar.search": "Szukaj w przestrzeni roboczej",
+	"workspace.description": "Twoja platforma biznesowa oparta na fundamencie Flowdular.",
+	"workspace.fallbackName": "Aktywna przestrzeń robocza",
+	"workspace.initializing": "Wczytywanie ustawień przestrzeni roboczej…",
+	"workspace.switchFailed": "Nie udało się zmienić przestrzeni roboczej.",
+	"workspace.title": "Przestrzeń robocza"
+}

package/packages/client/src/i18n/runtime.ts

@@ -0,0 +1,201 @@
+import { cell, createStore, useValue } from 'segment-state';
+import { FALLBACK_LOCALE, resolveLocale } from './locale.ts';
+import {
+	createTranslationCatalog,
+	translateFrom,
+	type LocaleBundles,
+	type TranslationCatalog,
+	type TranslationParams,
+	type TranslationSource,
+} from './translations.ts';
+import shellEn from './locales/en.json';
+import shellPl from './locales/pl.json';
+
+const SHELL_NAMESPACE = 'shell';
+const LOCALE_STORAGE_KEY = 'flowdular.locale';
+const ACCOUNT_LOCALE_STORAGE_PREFIX = 'flowdular.locale.account';
+
+const SHELL_BUNDLES: LocaleBundles = { en: shellEn, pl: shellPl };
+
+/* The shell bundle is the only one guaranteed complete, so the locales it
+   ships are the locales the language switch offers. */
+export const SUPPORTED_LOCALES: readonly string[] = Object.keys(SHELL_BUNDLES);
+
+const store = createStore({ locale: cell<string>(FALLBACK_LOCALE) });
+
+let sources: readonly TranslationSource[] = [
+	{ namespace: SHELL_NAMESPACE, bundles: SHELL_BUNDLES },
+];
+let catalog: TranslationCatalog = createTranslationCatalog(
+	sources,
+	FALLBACK_LOCALE,
+	FALLBACK_LOCALE,
+);
+let tenantDefaultLocale: string | null = null;
+let storedLocale: string | null = null;
+let accountLocaleScope: string | null = null;
+let cachedAccountLocale: string | null = null;
+let serverAccountLocale: string | null | undefined;
+let previewLocale: string | null = null;
+
+function rebuild(locale: string): void {
+	catalog = createTranslationCatalog(sources, locale, FALLBACK_LOCALE);
+	if (store.get(store.state.locale) !== locale) {
+		store.set(store.state.locale, locale, 'shell/locale');
+	}
+	if (typeof document !== 'undefined') {
+		document.documentElement.lang = locale;
+	}
+}
+
+function reresolve(): void {
+	const personalLocale =
+		previewLocale ??
+		(serverAccountLocale !== undefined
+			? serverAccountLocale
+			: accountLocaleScope
+				? cachedAccountLocale
+				: storedLocale);
+	rebuild(
+		resolveLocale({
+			stored: personalLocale,
+			tenantDefault: tenantDefaultLocale,
+			supported: SUPPORTED_LOCALES,
+		}),
+	);
+}
+
+function safeStorageRead(key: string): string | null {
+	try {
+		return localStorage.getItem(key);
+	} catch {
+		return null;
+	}
+}
+
+function safeStorageWrite(key: string, value: string | null): void {
+	try {
+		if (value === null) localStorage.removeItem(key);
+		else localStorage.setItem(key, value);
+	} catch {
+		// Storage is only a cache. The server preference remains authoritative.
+	}
+}
+
+function accountStorageKey(accountId: string, tenantId: string): string {
+	return [
+		ACCOUNT_LOCALE_STORAGE_PREFIX,
+		encodeURIComponent(accountId),
+		encodeURIComponent(tenantId),
+	].join('.');
+}
+
+/**
+ * Replace the module bundles the shell composes, namespaced by the first
+ * segment of the module id (`catalog.core` owns every `catalog.*` key). Called
+ * once per contribution set, before any screen renders.
+ */
+export function registerModuleTranslations(
+	modules: readonly {
+		readonly moduleId: string;
+		readonly translations?: LocaleBundles | undefined;
+	}[],
+): void {
+	sources = [
+		{ namespace: SHELL_NAMESPACE, bundles: SHELL_BUNDLES },
+		...modules.flatMap((module) =>
+			module.translations === undefined
+				? []
+				: [
+						{
+							namespace: module.moduleId.split('.')[0] ?? module.moduleId,
+							bundles: module.translations,
+						},
+					],
+		),
+	];
+	rebuild(catalog.locale);
+}
+
+/** The auth.core `defaultLocale` tenant setting, published on every session. */
+export function setTenantDefaultLocale(locale: string | null): void {
+	tenantDefaultLocale = locale;
+	reresolve();
+}
+
+/** Browser-only choice for anonymous screens, or a preview while signed in. */
+export function setActiveLocale(locale: string): void {
+	if (accountLocaleScope) {
+		previewLocale = locale;
+		reresolve();
+		return;
+	}
+	storedLocale = locale;
+	safeStorageWrite(LOCALE_STORAGE_KEY, locale);
+	reresolve();
+}
+
+/**
+ * Select the signed-in account and workspace whose preference is being loaded.
+ * The scoped browser value is only a cache until the server responds.
+ */
+export function restoreAccountLocaleCache(
+	accountId: string,
+	tenantId: string,
+): void {
+	accountLocaleScope = accountStorageKey(accountId, tenantId);
+	cachedAccountLocale = safeStorageRead(accountLocaleScope);
+	serverAccountLocale = undefined;
+	previewLocale = null;
+	reresolve();
+}
+
+/** Commit the value returned by profile.core and refresh its scoped cache. */
+export function setServerAccountLocale(locale: string | null): void {
+	serverAccountLocale = locale;
+	previewLocale = null;
+	if (accountLocaleScope) {
+		cachedAccountLocale = locale;
+		safeStorageWrite(accountLocaleScope, locale);
+	}
+	reresolve();
+}
+
+/** Apply a pending selection before profile.core confirms the mutation. */
+export function previewActiveLocale(locale: string): void {
+	previewLocale = locale;
+	reresolve();
+}
+
+/** Revert a pending selection to the last server value or safe cache. */
+export function cancelActiveLocalePreview(): void {
+	previewLocale = null;
+	reresolve();
+}
+
+/* Runs from the client entry, never during server rendering, so a stored
+   choice can never leak from one request into another. */
+export function restorePersistedLocale(): void {
+	storedLocale = safeStorageRead(LOCALE_STORAGE_KEY);
+	reresolve();
+}
+
+export function activeLocale(): string {
+	return catalog.locale;
+}
+
+/** Stable identity: the catalog moves underneath it, the function does not. */
+export function t(key: string, params?: TranslationParams): string {
+	return translateFrom(catalog, key, params);
+}
+
+export interface TranslationView {
+	readonly locale: string;
+	readonly t: typeof t;
+}
+
+/** Subscribes the calling component to language changes. */
+export function useTranslation(): TranslationView {
+	const [locale] = useValue(store.state.locale);
+	return { locale, t };
+}

package/packages/client/src/i18n/translations.ts

@@ -0,0 +1,88 @@
+/** One locale's copy for one namespace: flat keys, no nesting, no plural rules. */
+export type TranslationBundle = Readonly<Record<string, string>>;
+
+/** Every locale a namespace ships, keyed by locale code (`en`, `pl`). */
+export type LocaleBundles = Readonly<Record<string, TranslationBundle>>;
+
+export type TranslationParams = Readonly<Record<string, string | number>>;
+
+export type Translate = (key: string, params?: TranslationParams) => string;
+
+/** A namespace and its bundles. The namespace prefixes every key it owns. */
+export interface TranslationSource {
+	readonly namespace: string;
+	readonly bundles: LocaleBundles;
+}
+
+/** Two flat lookups, the active locale over the fallback locale. */
+export interface TranslationCatalog {
+	readonly locale: string;
+	readonly fallbackLocale: string;
+	readonly active: ReadonlyMap<string, string>;
+	readonly fallback: ReadonlyMap<string, string>;
+}
+
+const PLACEHOLDER = /\{([a-zA-Z0-9_]+)\}/g;
+
+/* An unknown placeholder is left in the output rather than blanked, so a
+   missing parameter is visible in the browser instead of silently swallowed. */
+export function interpolate(
+	template: string,
+	params: TranslationParams | undefined,
+): string {
+	if (params === undefined) return template;
+	return template.replace(PLACEHOLDER, (match, name: string) => {
+		const value = params[name];
+		return value === undefined ? match : String(value);
+	});
+}
+
+function collect(
+	sources: readonly TranslationSource[],
+	locale: string,
+): Map<string, string> {
+	const strings = new Map<string, string>();
+	for (const source of sources) {
+		const bundle = source.bundles[locale];
+		if (bundle === undefined) continue;
+		for (const key of Object.keys(bundle)) {
+			strings.set(source.namespace + '.' + key, bundle[key]!);
+		}
+	}
+	return strings;
+}
+
+/**
+ * Merge every namespace into one lookup for the active locale and one for the
+ * fallback locale. O(total keys) once per locale change; every later lookup is
+ * O(1).
+ */
+export function createTranslationCatalog(
+	sources: readonly TranslationSource[],
+	locale: string,
+	fallbackLocale: string,
+): TranslationCatalog {
+	return {
+		locale,
+		fallbackLocale,
+		active: collect(sources, locale),
+		fallback:
+			locale === fallbackLocale
+				? new Map<string, string>()
+				: collect(sources, fallbackLocale),
+	};
+}
+
+/**
+ * Resolve a fully qualified key (`catalog.list.title`) through the fallback
+ * chain: the active locale, then the fallback locale, then the key itself so a
+ * missing string shows up on screen instead of rendering blank.
+ */
+export function translateFrom(
+	catalog: TranslationCatalog,
+	key: string,
+	params?: TranslationParams,
+): string {
+	const template = catalog.active.get(key) ?? catalog.fallback.get(key) ?? key;
+	return interpolate(template, params);
+}

package/packages/client/src/index.ts

@@ -0,0 +1,55 @@
+export { ApplicationShell } from './ApplicationShell.tsrx';
+export { applicationPath, configureApplicationRouting } from './routing.ts';
+export { loadWebPage, webPageData } from './web.ts';
+export {
+	createClientContributionRegistry,
+	WORKSPACE_SLOTS,
+} from './contributions.ts';
+export type {
+	AccountMenuContribution,
+	ClientContributionRegistry,
+	ClientViewContribution,
+	ModuleClientContext,
+	ModuleClientInitializationContext,
+	ModuleClientContribution,
+	NavigationContribution,
+	NavigationGroup,
+	WidgetContribution,
+	WorkspaceSlot,
+} from './contributions.ts';
+export { FALLBACK_LOCALE, resolveLocale } from './i18n/locale.ts';
+export type { LocaleResolution } from './i18n/locale.ts';
+export {
+	activeLocale,
+	cancelActiveLocalePreview,
+	previewActiveLocale,
+	registerModuleTranslations,
+	restoreAccountLocaleCache,
+	restorePersistedLocale,
+	setActiveLocale,
+	setServerAccountLocale,
+	setTenantDefaultLocale,
+	SUPPORTED_LOCALES,
+	t,
+	useTranslation,
+} from './i18n/runtime.ts';
+export type { TranslationView } from './i18n/runtime.ts';
+export {
+	createTranslationCatalog,
+	interpolate,
+	translateFrom,
+} from './i18n/translations.ts';
+export type {
+	LocaleBundles,
+	Translate,
+	TranslationBundle,
+	TranslationCatalog,
+	TranslationParams,
+	TranslationSource,
+} from './i18n/translations.ts';
+export {
+	createShellState,
+	shellLocationFromUrl,
+	shellViewFromUrl,
+} from './state.ts';
+export type { ShellLocation, ShellState, ShellView } from './state.ts';

package/packages/client/src/routing.ts

@@ -0,0 +1,9 @@
+let basePath = '/app';
+
+/** Installation-wide value emitted by the CLI, never a request/tenant setting. */
+export function configureApplicationRouting(path: string): void {
+	if (!/^\/[a-z][a-z0-9-]*$/.test(path) || ['auth', 'api', 'sites', 'sign-in', 'sign-up', 'forgot-password', 'reset-password', 'accept-invitation'].includes(path.slice(1))) throw new Error('Invalid application path.');
+	basePath = path;
+}
+
+export function applicationPath(): string { return basePath; }

package/packages/client/src/shell/BrandMark.tsrx

@@ -0,0 +1,10 @@
+import { applicationPath } from '../routing.ts';
+import { BrandMark } from '@flowdular/sdk/ui';
+import { t } from '../i18n/runtime.ts';
+
+export function SidebarBrand() @{
+	<a class="sidebar__home" href={applicationPath()} aria-label={t('shell.brand.home')}>
+		<BrandMark size={22} />
+		<span class="sidebar__wordmark">Flowdular</span>
+	</a>
+}

package/packages/client/src/shell/CommandPalette.tsrx

@@ -0,0 +1,79 @@
+import { Icon } from '@flowdular/sdk/ui';
+import type { NavigationContribution } from '../contributions.ts';
+import { activeLocale, t } from '../i18n/runtime.ts';
+import { navigationGroupLabel } from './navigation.ts';
+import type { NavigateToView } from './types.ts';
+
+export interface CommandPaletteProps {
+	items: readonly NavigationContribution[];
+	query: string;
+	onQuery: (query: string) => void;
+	onNavigate: NavigateToView;
+	onClose: () => void;
+}
+
+export function CommandPalette(props: CommandPaletteProps) @{
+	const locale = activeLocale();
+	const normalizedQuery = props.query.trim().toLocaleLowerCase(locale);
+	const matches = props.items.filter(
+		(item) =>
+			item.viewId !== 'overview' &&
+				(normalizedQuery.length === 0 ||
+					item.label.toLocaleLowerCase(locale).includes(normalizedQuery) ||
+					item.description.toLocaleLowerCase(locale).includes(
+						normalizedQuery,
+					) ||
+					navigationGroupLabel(t, item.group).toLocaleLowerCase(
+						locale,
+					).includes(normalizedQuery)),
+	);
+	<div class="command-layer" role="presentation" onClick={props.onClose}>
+		<section
+			class="command-dialog"
+			role="dialog"
+			aria-modal="true"
+			aria-label={t('shell.command.label')}
+			onClick={(event) => event.stopPropagation()}
+		>
+			<label class="command-dialog__input">
+				<Icon name="search" size={16} />
+				<input
+					autoFocus
+					type="search"
+					placeholder={t('shell.command.placeholder')}
+					value={props.query}
+					onInput={(event) => props.onQuery(event.currentTarget.value)}
+				/>
+				<span class="ui-kbd">ESC</span>
+			</label>
+			<div class="command-dialog__results">
+				<div class="ui-menu__label">{t('shell.command.section')}</div>
+				@if (matches.length === 0) {
+					<p class="ui-table__empty">{t('shell.command.empty', {
+						query: props.query,
+					})}</p>
+				}
+				@for (const item of matches; key item.id) {
+					<button
+						class="command-item"
+						type="button"
+						onClick={() => props.onNavigate(item.viewId)}
+					>
+						<Icon name={item.glyph} size={16} />
+						<span class="ui-cell">
+							<b>{item.label}</b>
+							<small>
+								{navigationGroupLabel(t, item.group) + ' · ' + item.description}
+							</small>
+						</span>
+						<span class="ui-kbd">↵</span>
+					</button>
+				}
+			</div>
+			<footer class="command-dialog__foot">
+				<span>{t('shell.command.open')}</span>
+				<span>{t('shell.command.close')}</span>
+			</footer>
+		</section>
+	</div>
+}

package/packages/client/src/shell/ContributionOutlets.tsrx

@@ -0,0 +1,31 @@
+import type {
+	ClientViewContribution,
+	WidgetContribution,
+} from '../contributions.ts';
+
+export function widgetsForSlot(
+	widgets: readonly WidgetContribution[],
+	slot: WidgetContribution['slot'],
+): readonly WidgetContribution[] {
+	return widgets.filter((widget) => widget.slot === slot);
+}
+
+export function SlotOutlet(props: {
+	className: string;
+	widgets: readonly WidgetContribution[];
+}) @{
+	@if (props.widgets.length > 0) {
+		<section class={['module-slot', props.className]}>
+			@for (const widget of props.widgets; key widget.id) {
+				<div
+					class="module-slot__item"
+					data-contribution-id={widget.id}
+				>{widget.render()}</div>
+			}
+		</section>
+	}
+}
+
+export function ClientViewOutlet(props: { view: ClientViewContribution }) @{
+	<div class="client-view-outlet">{props.view.render()}</div>
+}

package/packages/client/src/shell/DashboardView.tsrx

@@ -0,0 +1,60 @@
+import { EmptyState, PageHeader } from '@flowdular/sdk/ui';
+import type { WidgetContribution } from '../contributions.ts';
+import { t } from '../i18n/runtime.ts';
+import { SlotOutlet, widgetsForSlot } from './ContributionOutlets.tsrx';
+import { OverviewCharts } from './OverviewCharts.tsrx';
+
+export interface DashboardViewProps {
+	widgets: readonly WidgetContribution[];
+	tenantName: string;
+	displayName: string;
+}
+
+/* The dashboard is composed from module widgets only: metrics in
+   dashboard.metrics, setup steps in dashboard.main, extras in
+   dashboard.aside. A disabled module simply contributes nothing. */
+export function DashboardView(props: DashboardViewProps) @{
+	const metricWidgets = widgetsForSlot(props.widgets, 'dashboard.metrics');
+	const mainWidgets = widgetsForSlot(props.widgets, 'dashboard.main');
+	const asideWidgets = widgetsForSlot(props.widgets, 'dashboard.aside');
+	const firstName =
+		props.displayName.split(/\s+/).filter(Boolean)[0] ??
+			t('shell.dashboard.greetingFallback');
+	<div class="ui-view">
+		<PageHeader
+			eyebrow={props.tenantName}
+			title={t('shell.dashboard.greeting', { name: firstName })}
+			description={t('shell.dashboard.description')}
+		/>
+		<SlotOutlet className="module-slot--metrics" widgets={metricWidgets} />
+		<OverviewCharts />
+		<section class="ui-card">
+			<div class="ui-card__head">
+				<span class="ui-card__title">
+					{t('shell.dashboard.steps.title')}
+					<small>{t(
+						mainWidgets.length === 1
+							? 'shell.dashboard.steps.count.one'
+							: 'shell.dashboard.steps.count.other',
+						{ count: mainWidgets.length },
+					)}</small>
+				</span>
+			</div>
+			<div class="ui-card__body">
+				@if (mainWidgets.length === 0) {
+					<EmptyState
+						icon="modules"
+						title={t('shell.dashboard.steps.empty.title')}
+					>{t('shell.dashboard.steps.empty.hint')}</EmptyState>
+				} @else {
+					<div class="dash-steps">
+						@for (const widget of mainWidgets; key widget.id) {
+							<div data-contribution-id={widget.id}>{widget.render()}</div>
+						}
+					</div>
+				}
+			</div>
+		</section>
+		<SlotOutlet className="module-slot--aside" widgets={asideWidgets} />
+	</div>
+}