Show worker information on dashboard servers page

samples/Aspire/Api/Program.cs

@@ -43,7 +43,7 @@
 	)
 	.ConfigureWorkers(o =>
 	{
-		o.WorkerCount = 4;
+		o.WorkerCount = 32;
 		o.PollingInterval = TimeSpan.FromSeconds(5);
 	})
 	.AddHealthCheck()

src/Immediate.Jobs.Dashboard/DashboardClient/src/components/ServerCard.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RouterLink } from 'vue-router';
+import { Cpu, Radio, Server } from '@lucide/vue';
+
+import type { JobServerSnapshot, JobWorkerSnapshot } from '@/contracts';
+import { formatDate } from '@/format';
+
+const props = defineProps<{
+	server: JobServerSnapshot;
+}>();
+
+const workers = computed(() => [...props.server.workers].sort((left, right) => left.workerId - right.workerId));
+const busyWorkers = computed(() => workers.value.filter(worker => worker.jobHandle));
+
+function jobRoute(jobHandle: string) {
+	return { name: 'job-detail', params: { jobHandle } };
+}
+
+function slotLabel(worker: JobWorkerSnapshot): string {
+	return worker.jobHandle
+		? `Worker #${worker.workerId}: ${worker.jobHandle}`
+		: `Worker #${worker.workerId}: idle`;
+}
+</script>
+
+<template>
+	<article class="panel server-card">
+		<header>
+			<span class="server-icon"><Server :size="18" aria-hidden="true" /></span>
+			<div class="min-w-0">
+				<span class="eyebrow">Worker</span>
+				<code class="block truncate" :title="server.workerId">{{ server.workerId }}</code>
+			</div>
+		</header>
+		<dl>
+			<div>
+				<dt><Radio :size="14" aria-hidden="true" /> Last heartbeat</dt>
+				<dd>{{ formatDate(server.lastHeartbeat) }}</dd>
+			</div>
+			<div>
+				<dt><Cpu :size="14" aria-hidden="true" /> Active workers</dt>
+				<dd>{{ server.activeWorkers }} <span>/ {{ server.maxWorkers }}</span></dd>
+			</div>
+		</dl>
+		<template v-if="workers.length">
+			<ul class="server-slots" aria-label="Worker slots">
+				<li v-for="worker in workers" :key="worker.workerId">
+					<RouterLink
+						v-if="worker.jobHandle"
+						class="server-slot busy"
+						:to="jobRoute(worker.jobHandle)"
+						:title="slotLabel(worker)"
+						:aria-label="slotLabel(worker)"
+					/>
+					<span v-else class="server-slot" :title="slotLabel(worker)" role="img" :aria-label="slotLabel(worker)" />
+				</li>
+			</ul>
+			<ol v-if="busyWorkers.length" class="server-workers" aria-label="Busy workers">
+				<li v-for="worker in busyWorkers" :key="worker.workerId">
+					<span class="server-worker-id">#{{ worker.workerId }}</span>
+					<RouterLink
+						v-if="worker.jobHandle"
+						class="server-worker-job"
+						:to="jobRoute(worker.jobHandle)"
+						:title="worker.jobHandle"
+					>
+						<code>{{ worker.jobHandle }}</code>
+					</RouterLink>
+					<span class="server-worker-meta">
+						<template v-if="worker.attempt !== null">Attempt {{ worker.attempt }} · </template>{{ formatDate(worker.startedAt) }}
+					</span>
+				</li>
+			</ol>
+			<p v-else class="server-workers-idle">All workers idle</p>
+		</template>
+	</article>
+</template>

src/Immediate.Jobs.Dashboard/DashboardClient/src/styles.css

@@ -1452,6 +1452,82 @@ tbody tr:hover {
 	color: var(--text-subtle);
 }
 
+.server-slots {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(12px, 1fr));
+	gap: 3px;
+	margin: 12px 0 0;
+	padding: 0;
+	list-style: none;
+}
+
+.server-slot {
+	display: block;
+	aspect-ratio: 1;
+	border: 1px solid var(--border);
+	border-radius: 3px;
+	background: var(--panel-muted);
+}
+
+.server-slot.busy {
+	border-color: var(--accent);
+	background: var(--accent);
+}
+
+.server-slot.busy:hover {
+	opacity: 0.75;
+}
+
+.server-workers {
+	display: grid;
+	gap: 4px;
+	max-height: 232px;
+	margin: 10px 0 0;
+	overflow-y: auto;
+	padding: 0;
+	list-style: none;
+}
+
+.server-workers li {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 8px;
+	border-radius: 7px;
+	background: var(--panel-muted);
+	padding: 6px 10px;
+	font-size: 11px;
+	font-variant-numeric: tabular-nums;
+}
+
+.server-worker-id {
+	color: var(--text-subtle);
+	font-weight: 650;
+}
+
+.server-worker-job {
+	min-width: 0;
+	overflow: hidden;
+	color: var(--accent);
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.server-worker-job:hover {
+	text-decoration: underline;
+}
+
+.server-worker-meta {
+	color: var(--text-subtle);
+	white-space: nowrap;
+}
+
+.server-workers-idle {
+	margin: 10px 0 0;
+	color: var(--text-subtle);
+	font-size: 11px;
+}
+
 .spin {
 	animation: spin 850ms linear infinite;
 }

src/Immediate.Jobs.Dashboard/DashboardClient/src/views/ServersView.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { Cpu, Radio, Server } from '@lucide/vue';
 
 import FeedbackState from '@/components/FeedbackState.vue';
 import PageHeader from '@/components/PageHeader.vue';
-import { formatDate } from '@/format';
+import ServerCard from '@/components/ServerCard.vue';
 import { errorText } from '@/notifications';
 import { useServersQuery } from '@/query';
 
@@ -23,25 +22,7 @@ const servers = computed(() => serversQuery.data.value ?? []);
 		<FeedbackState v-if="serversQuery.error.value" type="error" title="Servers could not be loaded" :description="errorText(serversQuery.error.value)" />
 		<FeedbackState v-else-if="serversQuery.isPending.value" type="loading" title="Loading servers" />
 		<div v-else-if="servers.length" class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-			<article v-for="server in servers" :key="server.workerId" class="panel server-card">
-				<header>
-					<span class="server-icon"><Server :size="18" aria-hidden="true" /></span>
-					<div class="min-w-0">
-						<span class="eyebrow">Worker</span>
-						<code class="block truncate" :title="server.workerId">{{ server.workerId }}</code>
-					</div>
-				</header>
-				<dl>
-					<div>
-						<dt><Radio :size="14" aria-hidden="true" /> Last heartbeat</dt>
-						<dd>{{ formatDate(server.lastHeartbeat) }}</dd>
-					</div>
-					<div>
-						<dt><Cpu :size="14" aria-hidden="true" /> Active workers</dt>
-						<dd>{{ server.activeWorkers }} <span>/ {{ server.maxWorkers }}</span></dd>
-					</div>
-				</dl>
-			</article>
+			<ServerCard v-for="server in servers" :key="server.workerId" :server="server" />
 		</div>
 		<FeedbackState v-else title="No scheduler nodes" description="Nodes will appear after their first heartbeat." />
 	</section>

src/Immediate.Jobs.Dashboard/DashboardClient/tests/components.test.ts

@@ -2,6 +2,7 @@ import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 
 import { flushPromises, mount } from '@vue/test-utils';
+import { createMemoryHistory, createRouter } from 'vue-router';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { getJobExecutions, getJobExecutionTelemetryLinks } from '@/api';
@@ -10,8 +11,10 @@ import HistoryChart from '@/components/HistoryChart.vue';
 import JobDetail from '@/components/JobDetail.vue';
 import JobTable from '@/components/JobTable.vue';
 import MetricCard from '@/components/MetricCard.vue';
+import ServerCard from '@/components/ServerCard.vue';
 import WorkflowGraph from '@/components/WorkflowGraph.vue';
-import type { BatchGraph } from '@/contracts';
+import type { BatchGraph, JobServerSnapshot } from '@/contracts';
+import { routes } from '@/router';
 import { completedJob, executingBatch, workflowGraph } from './fixtures';
 
 const dashboardStyles = readFileSync(resolve(process.cwd(), 'src/styles.css'), 'utf8');
@@ -319,6 +322,60 @@ describe('dashboard components', () => {
 		expect(wrapper.emitted('select')?.[0]).toEqual([completedJob]);
 	});
 
+	it('renders a slot per worker and lists only busy workers', () => {
+		const idleLoop = {
+			isRunning: false,
+			lastAttemptedAt: null,
+			lastSucceededAt: null,
+			lastFailedAt: null,
+			consecutiveFailures: 0,
+			itemsExamined: 0,
+			itemsSucceeded: 0,
+			itemsFailed: 0,
+		};
+		const workers = Array.from({ length: 32 }, (_, workerId) => ({ workerId, jobHandle: null, attempt: null, startedAt: null }))
+			.reverse();
+		const server: JobServerSnapshot = {
+			workerId: 'node-1',
+			lastHeartbeat: '2026-07-21T12:00:00Z',
+			activeWorkers: 2,
+			maxWorkers: 32,
+			serverTimeout: '00:02:00',
+			workers: workers.map(worker => worker.workerId === 3
+				? { ...worker, jobHandle: 'redis:jobs:opaque', attempt: 2, startedAt: '2026-07-21T12:00:05Z' }
+				: worker.workerId === 17
+					? { ...worker, jobHandle: 'job-17', attempt: 1, startedAt: '2026-07-21T12:00:07Z' }
+					: worker),
+			acquisition: idleLoop,
+			leaseRenewal: idleLoop,
+		};
+		const router = createRouter({ history: createMemoryHistory(), routes });
+
+		const wrapper = mount(ServerCard, { props: { server }, global: { plugins: [router] } });
+		const slots = wrapper.findAll('.server-slots .server-slot');
+		const busyRows = wrapper.findAll('.server-workers li');
+
+		expect(slots).toHaveLength(32);
+		expect(slots[0].attributes('aria-label')).toBe('Worker #0: idle');
+		expect(slots[3].classes()).toContain('busy');
+		expect(slots[3].attributes('href')).toBe('/invocations/redis:jobs:opaque');
+		expect(wrapper.findAll('.server-slot.busy')).toHaveLength(2);
+
+		expect(busyRows).toHaveLength(2);
+		expect(busyRows[0].text()).toContain('#3');
+		expect(busyRows[0].text()).toContain('Attempt 2');
+		expect(busyRows[0].get('a').attributes('href')).toBe('/invocations/redis:jobs:opaque');
+		expect(busyRows[1].text()).toContain('#17');
+		expect(wrapper.text()).not.toContain('All workers idle');
+
+		const idleWrapper = mount(ServerCard, {
+			props: { server: { ...server, activeWorkers: 0, workers } },
+			global: { plugins: [router] },
+		});
+		expect(idleWrapper.find('.server-workers').exists()).toBe(false);
+		expect(idleWrapper.text()).toContain('All workers idle');
+	});
+
 	it('renders segmented batch progress and lifecycle actions', () => {
 		const wrapper = mount(BatchTable, { props: { rows: [executingBatch] } });
 		expect(wrapper.text()).toContain('campaign-batch');