From fb7f393675a79e3952c46f00e72b7fd9d27124a6 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 11 Nov 2026 11:10:54 +0300
Subject: [PATCH 1/3] feat: add per stack resources usage.

---
 frontend/app/pages/stacks/[node]/[stack].vue |  94 +++++++-
 frontend/app/store/realtime.ts               |   1 -
 frontend/app/types/index.d.ts                |  30 ++-
 frontend/app/utils/stacks.ts                 |  63 +++++
 frontend/tests/stack-ui.test.ts              | 122 ++++++++++
 frontend/tests/stacks.test.ts                | 105 ++++++++-
 frontend/tests/workspace-stream.test.ts      |  39 ++++
 internal/agent/channel.go                    |   8 +-
 internal/agent/events.go                     |  23 ++
 internal/agent/events_test.go                |  98 ++++++++
 internal/agent/run.go                        |   2 +-
 internal/agent/stats.go                      |  94 ++++++++
 internal/agent/stats_test.go                 | 233 +++++++++++++++++++
 internal/engine/docker/info.go               |  15 +-
 internal/engine/docker/stats.go              |  42 ++++
 internal/engine/engine.go                    |   1 +
 internal/engine/podman/info.go               |  15 +-
 internal/engine/podman/stats.go              |  42 ++++
 internal/engine/stats_test.go                | 187 +++++++++++++++
 internal/server/emitter_logging_test.go      |   3 +-
 internal/server/events.go                    |   2 +-
 internal/server/stats_test.go                | 230 ++++++++++++++++++
 internal/server/stream.go                    |  26 ++-
 23 files changed, 1437 insertions(+), 38 deletions(-)
 create mode 100644 internal/agent/stats.go
 create mode 100644 internal/agent/stats_test.go
 create mode 100644 internal/engine/docker/stats.go
 create mode 100644 internal/engine/podman/stats.go
 create mode 100644 internal/engine/stats_test.go
 create mode 100644 internal/server/stats_test.go

diff --git a/frontend/app/pages/stacks/[node]/[stack].vue b/frontend/app/pages/stacks/[node]/[stack].vue
index db40e22..485adfe 100644
--- a/frontend/app/pages/stacks/[node]/[stack].vue
+++ b/frontend/app/pages/stacks/[node]/[stack].vue
@@ -19,9 +19,17 @@ import StatCard from '~/components/StatCard.vue'
 import ContainerShell from '~/components/stacks/ContainerShell.vue'
 import StackLogs from '~/components/stacks/StackLogs.vue'
 import { useDialog } from '~/composables/useDialog'
+import { useWorkspaceStream } from '~/composables/useWorkspaceStream'
 import { useWorkspaceStore } from '~/store/workspace'
 import { useAuthStore } from '~/store/auth'
-import type { Service, Stack, StackAction } from '~/types'
+import type {
+  ContainerStats,
+  Service,
+  Stack,
+  StackAction,
+  StackStatsTotals,
+  StatCardProps,
+} from '~/types'
 import { notification, parse_api_response, request } from '~/utils'
 import {
   workspaceErrorMessage,
@@ -30,6 +38,8 @@ import {
   stackStatusLabel,
   containerCreatedAt,
   containerUptime,
+  parseStackStats,
+  aggregateStackStats,
 } from '~/utils/stacks'
 
 definePageMeta({ layout: 'workspace' })
@@ -141,6 +151,51 @@ const busy = computed(
 const active = computed(() =>
   runtime.value?.services.some((service) => 'running' === service.state),
 )
+const stats = ref<Array<ContainerStats> | null>(null)
+const statsStream = useWorkspaceStream(
+  (message) => {
+    if ('stack.stats' === message.event) {
+      stats.value = parseStackStats(message.data).containers
+    }
+  },
+  () => {
+    stats.value = null
+  },
+)
+const statsError = statsStream.error
+const startStats = () => {
+  statsStream.stop()
+  stats.value = null
+  if (connected.value && active.value && !isNew.value) {
+    statsStream.start({ type: 'stats', node: node.value, resource: name.value })
+  }
+}
+const servicesWithStats = computed(() =>
+  (runtime.value?.services ?? []).map((service) => ({
+    ...service,
+    stats: stats.value?.find((item) => service.name === item.name),
+  })),
+)
+const stackTotals = computed(() => {
+  if (connected.value && !active.value) {
+    return aggregateStackStats([])
+  }
+  return stats.value ? aggregateStackStats(stats.value) : undefined
+})
+const resourceCards = (
+  stats?: StackStatsTotals & { memory_percent?: string },
+): Array<StatCardProps> => [
+  { label: 'CPU', value: stats?.cpu || '-', icon: 'i-lucide-cpu' },
+  {
+    label: 'Memory',
+    value: stats?.memory || '-',
+    hint: stats?.memory_percent,
+    icon: 'i-lucide-memory-stick',
+  },
+  { label: 'Network I/O', value: stats?.network_io || '-', icon: 'i-lucide-network' },
+  { label: 'Block I/O', value: stats?.block_io || '-', icon: 'i-lucide-hard-drive' },
+  { label: 'PIDs', value: stats?.pids || '-', icon: 'i-lucide-list-tree' },
+]
 const checkingImages = computed(() => workspace.isCheckingImages(node.value, name.value))
 const unavailable = computed(
   () =>
@@ -521,6 +576,7 @@ watch(
   },
 )
 watch(() => [node.value, name.value], load, { immediate: true })
+watch([node, name, connected, active, isNew], startStats, { immediate: true })
 const actionCompleted = (action: StackAction | 'delete', exitCode?: number) => {
   if ('delete' === action && 0 === exitCode) {
     void navigateTo('/')
@@ -655,6 +711,21 @@ onBeforeUnmount(() => {
       />
     </template>
     <template v-if="!loading">
+      <div v-if="runtime && !isNew" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
+        <StatCard v-for="stat in resourceCards(stackTotals)" :key="stat.icon" v-bind="stat" />
+      </div>
+      <UAlert
+        v-if="statsError && connected && active"
+        color="warning"
+        icon="i-lucide-chart-no-axes-combined"
+        :title="statsError"
+      >
+        <template #actions>
+          <UButton color="neutral" variant="outline" icon="i-lucide-refresh-cw" @click="startStats"
+            >Retry stats</UButton
+          >
+        </template>
+      </UAlert>
       <StackLogs
         v-if="!isNew"
         :key="`${node}/${name}`"
@@ -680,7 +751,7 @@ onBeforeUnmount(() => {
           />
           <template v-else>
             <StatCard
-              v-for="service in runtime.services"
+              v-for="service in servicesWithStats"
               :key="service.name"
               :label="service.service"
               :value="service.image"
@@ -797,9 +868,28 @@ onBeforeUnmount(() => {
                   >
                 </UTooltip>
               </template>
+              <div v-if="'running' === service.state" class="flex flex-wrap gap-1.5">
+                <UTooltip
+                  v-for="stat in resourceCards(service.stats)"
+                  :key="stat.icon"
+                  :text="stat.label"
+                >
+                  <UBadge
+                    :icon="stat.icon"
+                    color="neutral"
+                    variant="subtle"
+                    size="sm"
+                    tabindex="0"
+                    class="tabular-nums"
+                  >
+                    {{ stat.value }}<span v-if="stat.hint">({{ stat.hint }})</span>
+                  </UBadge>
+                </UTooltip>
+              </div>
               <div
                 v-if="service.port_bindings?.length || service.ports"
                 class="flex flex-wrap items-center gap-1.5"
+                :class="{ 'mt-3': 'running' === service.state }"
               >
                 <template v-if="service.port_bindings?.length">
                   <template v-for="port in portLinks(service)" :key="port.label">
diff --git a/frontend/app/store/realtime.ts b/frontend/app/store/realtime.ts
index 8b62942..b74e525 100644
--- a/frontend/app/store/realtime.ts
+++ b/frontend/app/store/realtime.ts
@@ -75,7 +75,6 @@ export const useRealtimeStore = defineStore('realtime', () => {
 
   const disconnectReaders = (message: string, manualMessage = message) => {
     for (const [id, reader] of [...readers]) {
-      // Only runtime updates resume after a connection loss.
       const manual = 'logs' === reader.subscription.type || 'shell' === reader.subscription.type
       if (manual) {
         readers.delete(id)
diff --git a/frontend/app/types/index.d.ts b/frontend/app/types/index.d.ts
index 738ae7c..3832f52 100644
--- a/frontend/app/types/index.d.ts
+++ b/frontend/app/types/index.d.ts
@@ -253,18 +253,26 @@ export interface RuntimeInfo {
   storage_driver: string
 }
 
+export interface ContainerStats {
+  id: string
+  name: string
+  cpu: string
+  memory: string
+  memory_percent: string
+  network_io: string
+  block_io: string
+  pids: string
+}
+
+export interface StackStats {
+  containers: Array<ContainerStats>
+}
+
+export type StackStatsTotals = Omit<ContainerStats, 'id' | 'name' | 'memory_percent'>
+
 export interface NodeInfo {
   runtime: RuntimeInfo
-  containers: Array<{
-    id: string
-    name: string
-    cpu: string
-    memory: string
-    memory_percent: string
-    network_io: string
-    block_io: string
-    pids: string
-  }>
+  containers: Array<ContainerStats>
   checked_at: string
 }
 
@@ -322,7 +330,7 @@ export interface WorkspaceStreamError {
 
 export type RealtimeSubscription =
   | { type: 'runtime' }
-  | { type: 'logs'; node: string; resource: string }
+  | { type: 'logs' | 'stats'; node: string; resource: string }
   | { type: 'shell'; node: string; shell: string }
 
 export interface RealtimeCallbacks {
diff --git a/frontend/app/utils/stacks.ts b/frontend/app/utils/stacks.ts
index 22cf6c2..5727ee9 100644
--- a/frontend/app/utils/stacks.ts
+++ b/frontend/app/utils/stacks.ts
@@ -1,4 +1,5 @@
 import { formatTimeAgo } from '@vueuse/core'
+import { formatMemoryBytes } from '~/utils/node'
 import type {
   ImageUpdate,
   NodeHealth,
@@ -10,6 +11,9 @@ import type {
   StackAction,
   StackRuntime,
   StackStatus,
+  StackStats,
+  StackStatsTotals,
+  ContainerStats,
   WorkspaceEvent,
   WorkspaceStreamError,
   WorkspaceStreamMessage,
@@ -136,6 +140,65 @@ export const workspaceErrorMessage = (status: number, fallback: string): string
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   'object' === typeof value && null !== value && !Array.isArray(value)
 
+const isContainerStats = (value: unknown): value is ContainerStats =>
+  isRecord(value) &&
+  ['id', 'name', 'cpu', 'memory', 'memory_percent', 'network_io', 'block_io', 'pids'].every(
+    (key) => 'string' === typeof value[key],
+  )
+
+export const parseStackStats = (data: string): StackStats => {
+  const value: unknown = JSON.parse(data)
+  if (
+    isRecord(value) &&
+    Array.isArray(value.containers) &&
+    value.containers.every(isContainerStats)
+  ) {
+    return { containers: value.containers }
+  }
+  throw new Error("Couldn't read stack resource stats.")
+}
+
+const parseBytes = (value: string): number => {
+  const match = value.trim().match(/^(\d+(?:\.\d+)?)\s*([kmgtp]?i?b)$/i)
+  if (!match) {
+    return Number.NaN
+  }
+  const unit = match[2]!.toUpperCase()
+  const power = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'].indexOf(unit.replace('I', ''))
+  return Number(match[1]) * (unit.includes('I') ? 1024 : 1000) ** power
+}
+
+const sum = (values: Array<number>): number => values.reduce((total, value) => total + value, 0)
+const formatBytes = (value: number): string =>
+  Number.isFinite(value) ? formatMemoryBytes(value) : '-'
+const formatNumber = (value: number): string =>
+  Number.isFinite(value)
+    ? new Intl.NumberFormat('en', { maximumFractionDigits: 2 }).format(value)
+    : '-'
+
+const sumIO = (values: Array<string>): string => {
+  const pairs = values.map((value) => value.split('/'))
+  const first = sum(pairs.map((pair) => parseBytes(pair[0] ?? '')))
+  const second = sum(pairs.map((pair) => parseBytes(pair[1] ?? '')))
+  return Number.isFinite(first) && Number.isFinite(second)
+    ? `${formatBytes(first)} / ${formatBytes(second)}`
+    : '-'
+}
+
+export const aggregateStackStats = (containers: Array<ContainerStats>): StackStatsTotals => {
+  const cpu = sum(containers.map((container) => Number.parseFloat(container.cpu)))
+  return {
+    cpu: Number.isFinite(cpu) ? `${formatNumber(cpu)}%` : '-',
+    // Limits can refer to the same host memory, so sum usage, not limits or percentages.
+    memory: formatBytes(
+      sum(containers.map((container) => parseBytes(container.memory.split('/')[0] ?? ''))),
+    ),
+    network_io: sumIO(containers.map((container) => container.network_io)),
+    block_io: sumIO(containers.map((container) => container.block_io)),
+    pids: formatNumber(sum(containers.map((container) => Number.parseFloat(container.pids)))),
+  }
+}
+
 export const parseStreamMessage = (data: string): WorkspaceStreamMessage | WorkspaceStreamError => {
   const value: unknown = JSON.parse(data)
   if (
diff --git a/frontend/tests/stack-ui.test.ts b/frontend/tests/stack-ui.test.ts
index b44bc7b..e1c1cca 100644
--- a/frontend/tests/stack-ui.test.ts
+++ b/frontend/tests/stack-ui.test.ts
@@ -1989,6 +1989,10 @@ test.each(['stack', 'node'] as const)('%s page alerts', async (page) => {
   let leave = async (): Promise<boolean> => true
   let failAction = true
   const now = vue.ref(new Date('2026-11-03T03:55:52Z'))
+  const statsStart = mock((_subscription: { type: 'stats'; node: string; resource: string }) => {})
+  const statsStop = mock(() => {})
+  let statsMessage = (_message: WorkspaceStreamMessage) => {}
+  let statsDisconnected = () => {}
   const item = vue.reactive<WorkspaceNode>({
     id: 'node',
     name: 'Node',
@@ -2098,6 +2102,16 @@ test.each(['stack', 'node'] as const)('%s page alerts', async (page) => {
       '~/composables/useDialog': {
         useDialog: () => ({ confirmDialog: confirm }),
       },
+      '~/composables/useWorkspaceStream': {
+        useWorkspaceStream: (
+          onMessage: typeof statsMessage,
+          onDisconnect: typeof statsDisconnected,
+        ) => {
+          statsMessage = onMessage
+          statsDisconnected = onDisconnect
+          return { start: statsStart, stop: statsStop, error: vue.ref('') }
+        },
+      },
       '~/store/auth': { useAuthStore: () => auth },
       '~/store/workspace': store,
       '~/utils/stacks': await import('../app/utils/stacks'),
@@ -2187,6 +2201,72 @@ test.each(['stack', 'node'] as const)('%s page alerts', async (page) => {
   expect(alerts(root)).toHaveLength(0)
 
   if ('stack' === page) {
+    expect(statsStart).toHaveBeenLastCalledWith({ type: 'stats', node: 'node', resource: 'app' })
+    const containerStats = {
+      id: '31c2c2e119e9',
+      name: 'app-1',
+      cpu: '0.03%',
+      memory: '69.16MiB / 125.5GiB',
+      memory_percent: '0.05%',
+      network_io: '5.41MB / 6.14MB',
+      block_io: '56.3MB / 2.02MB',
+      pids: '58',
+    }
+    const cpuCard = () =>
+      flatten(root).find(
+        (element) => 'stat' === element.type && 'i-lucide-cpu' === element.props.icon,
+      )
+    expect(cpuCard()?.props.value).toBe('-')
+    statsMessage({ event: 'stack.stats', data: JSON.stringify({ containers: [containerStats] }) })
+    await vue.nextTick()
+    expect(cpuCard()?.props.value).toBe(containerStats.cpu)
+    for (const [icon, value] of [
+      ['i-lucide-memory-stick', '69.2 MiB'],
+      ['i-lucide-network', '5.2 MiB / 5.9 MiB'],
+      ['i-lucide-hard-drive', '53.7 MiB / 1.9 MiB'],
+      ['i-lucide-list-tree', containerStats.pids],
+    ]) {
+      expect(
+        flatten(root).find((element) => 'stat' === element.type && icon === element.props.icon)
+          ?.props.value,
+      ).toBe(value)
+    }
+    const containerBadges = () => {
+      const card = flatten(root).find(
+        (element) => 'stat' === element.type && 'app-1' === element.props['aria-label'],
+      )
+      return card ? flatten(card).filter((element) => 'badge' === element.type) : []
+    }
+    const badgeText = (icon: string) => {
+      const badge = containerBadges().find((element) => icon === element.props.icon)
+      return badge
+        ? flatten(badge)
+            .map((element) => element.text)
+            .join(' ')
+        : ''
+    }
+    expect(badgeText('i-lucide-cpu')).toContain(containerStats.cpu)
+    expect(badgeText('i-lucide-memory-stick')).toContain(containerStats.memory)
+    expect(badgeText('i-lucide-memory-stick')).toContain(containerStats.memory_percent)
+    statsMessage({
+      event: 'stack.stats',
+      data: JSON.stringify({ containers: [{ ...containerStats, cpu: '12.5%' }] }),
+    })
+    await vue.nextTick()
+    expect(cpuCard()?.props.value).toBe('12.5%')
+    statsMessage({
+      event: 'stack.stats',
+      data: JSON.stringify({
+        containers: [containerStats, { ...containerStats, name: 'worker', cpu: '2%' }],
+      }),
+    })
+    await vue.nextTick()
+    expect(cpuCard()?.props.value).toBe('2.03%')
+    expect(badgeText('i-lucide-cpu')).toContain(containerStats.cpu)
+    statsDisconnected()
+    await vue.nextTick()
+    expect(cpuCard()?.props.value).toBe('-')
+
     const service = item.stacks[0]!.services[0]!
     const created = flatten(root).find((element) => 'time' === element.type)
     expect(created?.props.datetime).toBe(service.created_at)
@@ -2207,6 +2287,48 @@ test.each(['stack', 'node'] as const)('%s page alerts', async (page) => {
     expect(replace).toHaveBeenCalledTimes(1)
     expect(replace).toHaveBeenCalledWith({ query: { tab: 'logs' } })
     expect(navigate).not.toHaveBeenCalled()
+
+    const previous = item.stacks[0]!
+    item.stacks[0] = {
+      ...previous,
+      status: 'stopped',
+      services: previous.services.map((service) => ({ ...service, state: 'exited', health: '' })),
+    }
+    await vue.nextTick()
+    expect(cpuCard()?.props.value).toBe('0%')
+    expect(containerBadges().some((element) => 'i-lucide-cpu' === element.props.icon)).toBe(false)
+    expect(statsStop).toHaveBeenCalled()
+    expect(
+      flatten(root).some(
+        (element) => 'button' === element.type && 'i-lucide-terminal' === element.props.icon,
+      ),
+    ).toBe(false)
+    expect(
+      flatten(root).some(
+        (element) =>
+          'button' === element.type &&
+          'i-lucide-play' === element.props.icon &&
+          !!element.props['aria-label'],
+      ),
+    ).toBe(true)
+
+    item.stacks[0] = {
+      ...previous,
+      services: previous.services.map((service) => ({ ...service, health: 'unhealthy' })),
+    }
+    await vue.nextTick()
+    expect(
+      flatten(root).some(
+        (element) =>
+          'badge' === element.type &&
+          'i-lucide-container' === element.props.icon &&
+          'error' === element.props.color,
+      ),
+    ).toBe(true)
+    item.stacks[0] = previous
+    await vue.nextTick()
+    expect(statsStart).toHaveBeenLastCalledWith({ type: 'stats', node: 'node', resource: 'app' })
+
     const runtime = item.stacks[0]!
     runtime.error = 'runtime-error-sentinel'
     await vue.nextTick()
diff --git a/frontend/tests/stacks.test.ts b/frontend/tests/stacks.test.ts
index 57c56aa..91fee25 100644
--- a/frontend/tests/stacks.test.ts
+++ b/frontend/tests/stacks.test.ts
@@ -8,6 +8,8 @@ import {
   imageUpdateLabel,
   imageUpdateTooltip,
   parseWorkspaceEvent,
+  aggregateStackStats,
+  parseStackStats,
 } from '../app/utils/stacks'
 import type { Service, StackStatus } from '../app/types'
 
@@ -73,10 +75,16 @@ describe('Container problems', () => {
 
 describe('Container timing', () => {
   const service: Service = {
-    name: 'dagent', service: 'dagent', image: 'dagent', state: 'running', health: '', ports: '',
+    name: 'dagent',
+    service: 'dagent',
+    image: 'dagent',
+    state: 'running',
+    health: '',
+    ports: '',
     created_at: '2026-11-02T00:39:58.237164057Z',
     started_at: '2026-11-03T00:39:58.706987971Z',
-    status: 'stale-status-sentinel', running_for: 'stale-age-sentinel',
+    status: 'stale-status-sentinel',
+    running_for: 'stale-age-sentinel',
   }
 
   test('live uptime', () => {
@@ -98,10 +106,12 @@ describe('Container timing', () => {
 
   test('time zones', () => {
     const now = new Date('2026-11-03T03:55:52Z')
-    expect(containerUptime({ ...service, started_at: '2026-11-03T03:39:58.706987971+03:00' }, now))
-      .toBe(containerUptime(service, now))
-    expect(containerCreatedAt('2026-11-03T03:39:58+03:00', now))
-      .toBe(containerCreatedAt('2026-11-03T00:39:58Z', now))
+    expect(
+      containerUptime({ ...service, started_at: '2026-11-03T03:39:58.706987971+03:00' }, now),
+    ).toBe(containerUptime(service, now))
+    expect(containerCreatedAt('2026-11-03T03:39:58+03:00', now)).toBe(
+      containerCreatedAt('2026-11-03T00:39:58Z', now),
+    )
   })
 
   test('live creation age', () => {
@@ -120,6 +130,85 @@ describe('Container timing', () => {
   })
 })
 
+describe('Stack stats', () => {
+  const container = {
+    id: '31c2c2e119e9',
+    name: 'dagent',
+    cpu: '0.03%',
+    memory: '69.16MiB / 125.5GiB',
+    memory_percent: '0.05%',
+    network_io: '5.41MB / 6.14MB',
+    block_io: '56.3MB / 2.02MB',
+    pids: '58',
+  }
+
+  test('stats samples', () => {
+    expect(parseStackStats(JSON.stringify({ containers: [container] }))).toEqual({
+      containers: [container],
+    })
+    expect(parseStackStats('{"containers":[]}')).toEqual({ containers: [] })
+  })
+
+  test('stack totals', () => {
+    const totals = aggregateStackStats([
+      {
+        ...container,
+        cpu: '0.03%',
+        memory: '1GiB / 125.5GiB',
+        network_io: '1MB / 1MiB',
+        block_io: '512KiB / 1GB',
+        pids: '58',
+      },
+      {
+        ...container,
+        id: 'worker',
+        name: 'worker',
+        cpu: '12.47%',
+        memory: '512 MiB / 125.5 GiB',
+        network_io: '48.576kB / 1024KiB',
+        block_io: '0.5MiB / 73.741824MB',
+        pids: '2',
+      },
+    ])
+    expect(totals).toEqual({
+      cpu: '12.5%',
+      memory: '1.5 GiB',
+      network_io: '1 MiB / 2 MiB',
+      block_io: '1 MiB / 1 GiB',
+      pids: '60',
+    })
+  })
+
+  test('empty totals', () => {
+    expect(aggregateStackStats([])).toEqual({
+      cpu: '0%',
+      memory: '0 B',
+      network_io: '0 B / 0 B',
+      block_io: '0 B / 0 B',
+      pids: '0',
+    })
+  })
+
+  test('unavailable totals', () => {
+    expect(
+      aggregateStackStats([
+        { ...container, cpu: '--', memory: '--', network_io: '--', block_io: '--', pids: '--' },
+      ]),
+    ).toEqual({ cpu: '-', memory: '-', network_io: '-', block_io: '-', pids: '-' })
+  })
+
+  test.each([
+    null,
+    {},
+    { containers: null },
+    { containers: [null] },
+    { containers: [{ ...container, cpu: 3 }] },
+    { containers: [{ ...container, memory: undefined }] },
+  ])('invalid stats %j', (value) => {
+    expect(() => parseStackStats(JSON.stringify(value))).toThrow()
+  })
+})
+
 describe('Workspace events', () => {
   test('snapshot', () => {
     const snapshot = {
@@ -312,7 +401,9 @@ describe('Workspace events', () => {
       ...action,
       message: undefined,
     })
-    expect(parseWorkspaceEvent('stack.output', '{"node":"node","name":"app","output":"hello"}')).toEqual({
+    expect(
+      parseWorkspaceEvent('stack.output', '{"node":"node","name":"app","output":"hello"}'),
+    ).toEqual({
       event: 'stack.output',
       node: 'node',
       name: 'app',
diff --git a/frontend/tests/workspace-stream.test.ts b/frontend/tests/workspace-stream.test.ts
index ff5a879..4d65dab 100644
--- a/frontend/tests/workspace-stream.test.ts
+++ b/frontend/tests/workspace-stream.test.ts
@@ -284,6 +284,45 @@ describe('Shared connection', () => {
     expect(requests).toEqual([])
   })
 
+  test('stats reader', () => {
+    const realtime = useRealtimeStore()
+    const runtime = callbacks()
+    const stats = callbacks()
+    const logs = callbacks()
+    realtime.subscribe({ type: 'runtime' }, runtime)
+    const stream = scope.run(() => useWorkspaceStream(stats.onMessage, stats.onDisconnect))!
+    stream.start({ type: 'stats', node: 'n', resource: 'app' })
+    realtime.subscribe({ type: 'logs', node: 'n', resource: 'app' }, logs)
+    const socket = TestSocket.instances[0]!
+    socket.open()
+    const attach = { type: 'stats.attach', stream: 'reader-2', node: 'n', resource: 'app' }
+    expect(socket.sent).toContainEqual(attach)
+    socket.message({
+      type: 'event',
+      stream: 'reader-2',
+      event: 'stack.stats',
+      payload: { containers: [] },
+    })
+    expect(stats.onMessage).toHaveBeenCalledTimes(1)
+    expect(runtime.onMessage).not.toHaveBeenCalled()
+    expect(logs.onMessage).not.toHaveBeenCalled()
+    socket.onerror?.()
+    expect(stats.onDisconnect).toHaveBeenCalledTimes(1)
+    jest.advanceTimersByTime(1000)
+    const replacement = TestSocket.instances[1]!
+    replacement.open()
+    expect(replacement.sent).toEqual([attach])
+    scope.stop()
+    expect(replacement.sent.at(-1)).toEqual({ type: 'stream.detach', stream: 'reader-2' })
+    replacement.message({
+      type: 'event',
+      stream: 'reader-2',
+      event: 'stack.stats',
+      payload: { containers: [] },
+    })
+    expect(stats.onMessage).toHaveBeenCalledTimes(1)
+  })
+
   test('navigation', async () => {
     const previousMessage = mock(() => {})
     const nextMessage = mock(() => {})
diff --git a/internal/agent/channel.go b/internal/agent/channel.go
index 122379c..2da2dfb 100644
--- a/internal/agent/channel.go
+++ b/internal/agent/channel.go
@@ -365,7 +365,7 @@ func (a *agent) channelCommands(
 				)
 				continue
 			}
-			if "relay.attach" == message.Type || "logs.attach" == message.Type {
+			if "relay.attach" == message.Type || "logs.attach" == message.Type || "stats.attach" == message.Type {
 				if "" == message.Stream {
 					send(protocol.ChannelMessage{Type: "stream.error", Error: "stream ID is required", Status: 400})
 					continue
@@ -391,7 +391,11 @@ func (a *agent) channelCommands(
 					streamCtx, detach := context.WithCancel(ctx)
 					attached[key] = detach
 					streams.Go(func() {
-						err := a.streamLogs(streamCtx, message.Resource, func(e streamEvent) bool {
+						stream := a.streamLogs
+						if "stats.attach" == message.Type {
+							stream = a.streamStats
+						}
+						err := stream(streamCtx, message.Resource, func(e streamEvent) bool {
 							select {
 							case outgoing <- protocol.ChannelMessage{Type: "stream.event", Stream: message.Stream, Event: e.name, Payload: e.data}:
 								return true
diff --git a/internal/agent/events.go b/internal/agent/events.go
index 7d6e4d7..1d70a8a 100644
--- a/internal/agent/events.go
+++ b/internal/agent/events.go
@@ -262,11 +262,34 @@ func (a *agent) refreshRuntimes() {
 	defer func() { close(jobs); workers.Wait() }()
 	tick := time.NewTicker(100 * time.Millisecond)
 	defer tick.Stop()
+	inventoryTick := time.NewTicker(2 * time.Second)
+	defer inventoryTick.Stop()
 	h := a.events
 	for {
 		select {
 		case <-a.ctx.Done():
 			return
+		case <-inventoryTick.C:
+			// File-only additions and removals produce no container events.
+			// Queue only inventory changes, not repeated Compose queries.
+			names, err := a.inventory()
+			if nil != err {
+				continue
+			}
+			h.mu.Lock()
+			present := make(map[string]bool, len(names))
+			for _, name := range names {
+				present[name] = true
+				if _, ok := h.stacks[name]; !ok {
+					h.pending[name] = true
+				}
+			}
+			for name := range h.stacks {
+				if !present[name] {
+					h.pending[name] = true
+				}
+			}
+			h.mu.Unlock()
 		case <-tick.C:
 			h.mu.Lock()
 			for name := range h.pending {
diff --git a/internal/agent/events_test.go b/internal/agent/events_test.go
index e122b07..e5dbafc 100644
--- a/internal/agent/events_test.go
+++ b/internal/agent/events_test.go
@@ -158,6 +158,104 @@ func TestRuntimeSignals(t *testing.T) {
 	}
 }
 
+func TestInventoryChanges(t *testing.T) {
+	for _, removal := range []string{"directory", "compose"} {
+		t.Run(removal, func(t *testing.T) {
+			a, fake := fixture(t)
+			dir := seed(t, a, "demo", "compose.yaml")
+			seed(t, a, "unchanged", "compose.yaml")
+			reader := openEvents(t, streamServer(t, a), "/events")
+			seen := make(map[string]bool)
+			for 2 > len(seen) {
+				var state stackRuntime
+				if err := json.Unmarshal(reader.until(t, "stack.runtime"), &state); nil != err {
+					t.Fatal(err)
+				}
+				seen[state.Name] = true
+			}
+			calls, err := os.ReadFile(filepath.Join(fake, "ps-calls"))
+			if nil != err {
+				t.Fatal(err)
+			}
+			if "directory" == removal {
+				err = os.RemoveAll(dir)
+			} else {
+				err = os.Remove(filepath.Join(dir, "compose.yaml"))
+			}
+			if nil != err {
+				t.Fatal(err)
+			}
+			seed(t, a, "external", "compose.yaml")
+			removed, added := false, false
+			for !removed || !added {
+				name, data := reader.next(t)
+				switch name {
+				case "stack.removed":
+					if `{"name":"demo"}` != string(data) {
+						t.Fatalf("removed: %s", data)
+					}
+					removed = true
+				case "stack.runtime":
+					var state stackRuntime
+					if nil != json.Unmarshal(data, &state) || "external" != state.Name || "draft" != state.Status {
+						t.Fatalf("discovered runtime: %s", data)
+					}
+					added = true
+				}
+			}
+			a.events.mu.Lock()
+			_, stale := a.events.stacks["demo"]
+			a.events.mu.Unlock()
+			if stale {
+				t.Fatal("removed stack remained cached")
+			}
+			after, err := os.ReadFile(filepath.Join(fake, "ps-calls"))
+			if nil != err {
+				t.Fatal(err)
+			}
+			unchanged := filepath.Join(a.config.Global.StacksDir, "unchanged") + "\n"
+			if strings.Count(string(calls), unchanged) != strings.Count(string(after), unchanged) {
+				t.Fatal("inventory scan refreshed an unchanged stack")
+			}
+		})
+	}
+}
+
+func TestRuntimeChanges(t *testing.T) {
+	a, fake := fixture(t)
+	seed(t, a, "demo", "compose.yaml")
+	reader := openEvents(t, streamServer(t, a), "/events")
+	reader.until(t, "stack.runtime")
+	for _, change := range []struct {
+		action string
+		state  string
+		health string
+		status string
+	}{
+		{"start", "running", "starting", "running"},
+		{"health_status: healthy", "running", "healthy", "running"},
+		{"die", "exited", "", "stopped"},
+	} {
+		write(t, filepath.Join(fake, "ps"), fmt.Sprintf(
+			`[{"Name":"demo-web-1","Service":"web","State":%q,"Health":%q}]`, change.state, change.health,
+		))
+		write(t, filepath.Join(fake, "events-staged"), fmt.Sprintf(
+			`{"Type":"container","Action":%q,"Actor":{"Attributes":{"com.docker.compose.project":"demo"}}}`+"\n", change.action,
+		))
+		if err := os.Rename(filepath.Join(fake, "events-staged"), filepath.Join(fake, "events-input")); nil != err {
+			t.Fatal(err)
+		}
+		var state stackRuntime
+		data := reader.until(t, "stack.runtime")
+		if nil != json.Unmarshal(data, &state) || "demo" != state.Name || change.status != state.Status || 1 != len(state.Services) {
+			t.Fatalf("runtime after %s: %s", change.action, data)
+		}
+		if s := state.Services[0]; "demo-web-1" != s.Name || "web" != s.Service || change.state != s.State || change.health != s.Health {
+			t.Fatalf("service after %s: %+v", change.action, s)
+		}
+	}
+}
+
 func TestEventFilterBurst(t *testing.T) {
 	a, _ := fixture(t)
 	seed(t, a, "demo", "compose.yaml")
diff --git a/internal/agent/run.go b/internal/agent/run.go
index 3082933..738b904 100644
--- a/internal/agent/run.go
+++ b/internal/agent/run.go
@@ -77,8 +77,8 @@ func Run(parent context.Context, configPath, buildVersion string) error {
 			_ = server.Close()
 		}
 	}()
-	fmt.Fprintf(os.Stderr, "TLS fingerprint: %s\n", fingerprint)
 	if "" != a.pairingToken {
+		fmt.Fprintf(os.Stderr, "TLS fingerprint: %s\n", fingerprint)
 		fmt.Fprintf(os.Stderr, "Use this single-use pairing token in Nodes > Add node: %s\n", a.pairingToken)
 	}
 	slog.Info(
diff --git a/internal/agent/stats.go b/internal/agent/stats.go
new file mode 100644
index 0000000..37f17db
--- /dev/null
+++ b/internal/agent/stats.go
@@ -0,0 +1,94 @@
+package agent
+
+import (
+	"context"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"log/slog"
+	"os/exec"
+	"syscall"
+	"time"
+
+	"github.com/arabcoders/dcompose/internal/engine"
+)
+
+func (a *agent) streamStats(ctx context.Context, name string, send func(streamEvent) bool) error {
+	ticker := time.NewTicker(2 * time.Second)
+	defer ticker.Stop()
+	for {
+		if nil != ctx.Err() {
+			return nil
+		}
+		dir, err := a.stackPath(name, false)
+		var stack engine.Stack
+		if nil == err {
+			stack, err = a.engineStack(name, dir)
+		}
+		var containers []engine.ContainerStats
+		if nil == err {
+			sampleCtx, cancel := context.WithTimeout(ctx, 10*time.Second)
+			containers, err = a.engine.Stats(sampleCtx, stack)
+			cancel()
+		}
+		if nil != ctx.Err() {
+			return nil
+		}
+		if nil != err {
+			code := 502
+			if apiErr, ok := errors.AsType[*apiError](err); ok {
+				code = apiErr.code
+			}
+			slog.Error(
+				fmt.Sprintf(
+					"Could not read %s resource statistics for stack %q on node %q: %s",
+					a.config.Global.Engine,
+					name,
+					a.config.Global.NodeID,
+					statsFailureCause(err),
+				),
+			)
+			return fault(code, "stack statistics unavailable")
+		}
+		if nil == containers {
+			containers = []engine.ContainerStats{}
+		}
+		if !send(event("stack.stats", struct {
+			Containers []engine.ContainerStats `json:"containers"`
+		}{containers})) {
+			return nil
+		}
+		select {
+		case <-ctx.Done():
+			return nil
+		case <-ticker.C:
+		}
+	}
+}
+
+// Compose stderr can contain interpolated secrets. Log typed system/parse causes
+// rather than raw command output or unclassified runtime errors.
+func statsFailureCause(err error) string {
+	if errors.Is(err, context.DeadlineExceeded) {
+		return context.DeadlineExceeded.Error()
+	}
+	if cause, ok := errors.AsType[*exec.ExitError](err); ok {
+		return cause.Error()
+	}
+	if cause, ok := errors.AsType[syscall.Errno](err); ok {
+		return cause.Error()
+	}
+	if cause, ok := errors.AsType[*json.SyntaxError](err); ok {
+		return cause.Error()
+	}
+	if cause, ok := errors.AsType[*json.UnmarshalTypeError](err); ok {
+		return cause.Error()
+	}
+	if cause, ok := errors.AsType[*engine.Error](err); ok {
+		return cause.Message
+	}
+	if cause, ok := errors.AsType[*apiError](err); ok {
+		return cause.Error()
+	}
+	return "container engine request failed"
+}
diff --git a/internal/agent/stats_test.go b/internal/agent/stats_test.go
new file mode 100644
index 0000000..bac0e7f
--- /dev/null
+++ b/internal/agent/stats_test.go
@@ -0,0 +1,233 @@
+package agent
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"errors"
+	"log/slog"
+	"os"
+	"path/filepath"
+	"reflect"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/arabcoders/dcompose/internal/engine"
+	"github.com/arabcoders/dcompose/internal/protocol"
+)
+
+type statsEngine struct {
+	engine.Driver
+	stats func(context.Context, engine.Stack) ([]engine.ContainerStats, error)
+}
+
+func (e *statsEngine) Stats(ctx context.Context, stack engine.Stack) ([]engine.ContainerStats, error) {
+	return e.stats(ctx, stack)
+}
+
+func TestStreamStats(t *testing.T) {
+	a, _ := fixture(t)
+	dir := seed(t, a, "demo", "compose.yaml")
+	samples := []engine.ContainerStats{
+		{
+			ID:            "old-id",
+			Name:          "demo-web-1",
+			CPU:           "1%",
+			Memory:        "1MiB / 8MiB",
+			MemoryPercent: "12.5%",
+			NetworkIO:     "1kB / 2kB",
+			BlockIO:       "3kB / 4kB",
+			PIDs:          "5",
+		},
+		{ID: "new-id", Name: "demo-web-1", CPU: "2%"},
+	}
+	calls := 0
+	a.engine = &statsEngine{stats: func(ctx context.Context, stack engine.Stack) ([]engine.ContainerStats, error) {
+		deadline, bounded := ctx.Deadline()
+		if !bounded || 0 >= time.Until(deadline) || 10*time.Second < time.Until(deadline) {
+			t.Fatal("unbounded sample")
+		}
+		if "demo" != stack.Name || dir != stack.Dir || filepath.Join(dir, "compose.yaml") != stack.ComposeFile {
+			t.Fatalf("sample stack: %+v", stack)
+		}
+		result := samples[calls]
+		calls++
+		return []engine.ContainerStats{result}, nil
+	}}
+	ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer cancel()
+	received := []engine.ContainerStats{}
+	err := a.streamStats(ctx, "demo", func(e streamEvent) bool {
+		var payload struct {
+			Containers []engine.ContainerStats `json:"containers"`
+		}
+		if "stack.stats" != e.name || nil != json.Unmarshal(e.data, &payload) || 1 != len(payload.Containers) {
+			t.Fatalf("stats event: %+v", e)
+		}
+		received = append(received, payload.Containers[0])
+		return 2 > len(received)
+	})
+	if nil != err || !reflect.DeepEqual(samples, received) {
+		t.Fatalf("fresh stats samples: %+v, %v", received, err)
+	}
+}
+
+func TestStreamStatsEmpty(t *testing.T) {
+	a, _ := fixture(t)
+	seed(t, a, "demo", "compose.yaml")
+	a.engine = &statsEngine{stats: func(context.Context, engine.Stack) ([]engine.ContainerStats, error) {
+		return nil, nil
+	}}
+	received := false
+	err := a.streamStats(context.Background(), "demo", func(e streamEvent) bool {
+		var payload struct {
+			Containers []engine.ContainerStats `json:"containers"`
+		}
+		if nil != json.Unmarshal(e.data, &payload) || nil == payload.Containers || 0 != len(payload.Containers) {
+			t.Fatalf("empty stats payload: %s", e.data)
+		}
+		received = true
+		return false
+	})
+	if nil != err || !received {
+		t.Fatalf("empty stats event missing: %v", err)
+	}
+}
+
+func statsCommands(t *testing.T, a *agent) (chan<- protocol.ChannelMessage, <-chan protocol.ChannelMessage, context.CancelFunc) {
+	t.Helper()
+	ctx, cancel := context.WithCancel(context.Background())
+	commands := make(chan protocol.ChannelMessage, 8)
+	outgoing := make(chan protocol.ChannelMessage, 8)
+	done := make(chan struct{})
+	go func() {
+		defer close(done)
+		a.channelCommands(ctx, "stats-test", commands, outgoing, cancel)
+	}()
+	t.Cleanup(func() {
+		cancel()
+		select {
+		case <-done:
+		case <-time.After(2 * time.Second):
+			t.Error("stats channel did not stop")
+		}
+	})
+	return commands, outgoing, cancel
+}
+
+func TestChannelStatsCancel(t *testing.T) {
+	for _, action := range []string{"detach", "disconnect", "replace"} {
+		t.Run(action, func(t *testing.T) {
+			a, _ := fixture(t)
+			seed(t, a, "demo", "compose.yaml")
+			started := make(chan struct{}, 2)
+			stopped := make(chan struct{}, 2)
+			a.engine = &statsEngine{stats: func(ctx context.Context, _ engine.Stack) ([]engine.ContainerStats, error) {
+				started <- struct{}{}
+				<-ctx.Done()
+				stopped <- struct{}{}
+				return nil, ctx.Err()
+			}}
+			commands, outgoing, cancel := statsCommands(t, a)
+			attach := protocol.ChannelMessage{Type: "stats.attach", Resource: "demo", Stream: "stats"}
+			commands <- attach
+			select {
+			case <-started:
+			case <-time.After(time.Second):
+				t.Fatal("stats collection did not start immediately")
+			}
+			switch action {
+			case "detach":
+				commands <- protocol.ChannelMessage{Type: "stream.detach", Stream: "stats"}
+			case "replace":
+				commands <- attach
+			case "disconnect":
+				cancel()
+			}
+			select {
+			case <-stopped:
+			case <-time.After(time.Second):
+				t.Fatal("in-flight stats sample was not canceled")
+			}
+			if "replace" == action {
+				select {
+				case <-started:
+				case <-time.After(time.Second):
+					t.Fatal("replacement stats collection did not start")
+				}
+			}
+			cancel()
+			select {
+			case message := <-outgoing:
+				t.Fatalf("canceled stats emitted an event: %+v", message)
+			default:
+			}
+		})
+	}
+}
+
+func TestChannelStatsErrors(t *testing.T) {
+	a, _ := fixture(t)
+	seed(t, a, "demo", "compose.yaml")
+	dir := seed(t, a, "removed", "compose.yaml")
+	if err := os.Remove(filepath.Join(dir, "compose.yaml")); nil != err {
+		t.Fatal(err)
+	}
+	var logs bytes.Buffer
+	previous := slog.Default()
+	slog.SetDefault(slog.New(slog.NewJSONHandler(&logs, nil)))
+	t.Cleanup(func() { slog.SetDefault(previous) })
+	a.engine = &statsEngine{stats: func(context.Context, engine.Stack) ([]engine.ContainerStats, error) {
+		return nil, &engine.Error{Code: 502, Message: "Could not load stack statistics.", Cause: errors.New("private-runtime-secret")}
+	}}
+	commands, outgoing, _ := statsCommands(t, a)
+	for _, test := range []struct {
+		resource, stream string
+		status           int
+	}{
+		{"demo", "", 400},
+		{"", "stats", 400},
+		{"missing", "stats", 404},
+		{"removed", "stats", 404},
+		{"../private", "stats", 400},
+		{"demo", "stats", 502},
+	} {
+		commands <- protocol.ChannelMessage{Type: "stats.attach", Resource: test.resource, Stream: test.stream}
+		select {
+		case message := <-outgoing:
+			if "stream.error" != message.Type || test.stream != message.Stream || test.status != message.Status || "" == message.Error ||
+				strings.Contains(message.Error, "private") {
+				t.Fatalf("stats error: %+v", message)
+			}
+		case <-time.After(time.Second):
+			t.Fatal("stats error missing")
+		}
+	}
+	if strings.Contains(logs.String(), "private-runtime-secret") {
+		t.Fatal("stats diagnostics exposed a runtime secret")
+	}
+	if !strings.Contains(logs.String(), "demo") || !strings.Contains(logs.String(), a.config.Global.Engine) ||
+		!strings.Contains(logs.String(), a.config.Global.NodeID) {
+		t.Fatal("stats diagnostic omitted stack, engine or node")
+	}
+}
+
+func TestChannelStats(t *testing.T) {
+	a, _ := fixture(t)
+	seed(t, a, "demo", "compose.yaml")
+	a.engine = &statsEngine{Driver: a.engine, stats: func(context.Context, engine.Stack) ([]engine.ContainerStats, error) {
+		return []engine.ContainerStats{{ID: "demo-id", Name: "demo-web-1", CPU: "1%"}}, nil
+	}}
+	conn := openChannel(t, channelServer(t, a))
+	channelSend(t, conn, protocol.ChannelMessage{Type: "stats.attach", Resource: "demo", Stream: "stats"})
+	message := channelUntil(t, conn, "stream.event", "stack.stats")
+	var payload struct {
+		Containers []engine.ContainerStats `json:"containers"`
+	}
+	if "stats" != message.Stream || nil != json.Unmarshal(message.Payload, &payload) || 1 != len(payload.Containers) ||
+		"demo-id" != payload.Containers[0].ID {
+		t.Fatalf("channel stats payload: %+v", message)
+	}
+	channelSend(t, conn, protocol.ChannelMessage{Type: "stream.detach", Stream: "stats"})
+}
diff --git a/internal/engine/docker/info.go b/internal/engine/docker/info.go
index 7a9d606..fca903b 100644
--- a/internal/engine/docker/info.go
+++ b/internal/engine/docker/info.go
@@ -80,6 +80,15 @@ func (d *Docker) NodeInfo(ctx context.Context) (engine.NodeInfo, error) {
 	if nil != err {
 		return result, nodeInfoError("docker stats", err, stderr)
 	}
+	result.Containers, err = parseStats(stdout)
+	if nil != err {
+		return result, nodeInfoError("docker stats", err, nil)
+	}
+	return result, nil
+}
+
+func parseStats(stdout []byte) ([]engine.ContainerStats, error) {
+	result := []engine.ContainerStats{}
 	decoder := json.NewDecoder(bytes.NewReader(stdout))
 	for {
 		var stats *struct {
@@ -95,12 +104,12 @@ func (d *Docker) NodeInfo(ctx context.Context) (engine.NodeInfo, error) {
 		if err := decoder.Decode(&stats); io.EOF == err {
 			break
 		} else if nil != err {
-			return result, nodeInfoError("docker stats", fmt.Errorf("invalid JSON response: %w", err), nil)
+			return nil, fmt.Errorf("invalid JSON response: %w", err)
 		}
 		if nil == stats || "" == stats.ID || "" == stats.Name {
-			return result, nodeInfoError("docker stats", errors.New("response is missing the container ID or name"), nil)
+			return nil, errors.New("response is missing the container ID or name")
 		}
-		result.Containers = append(result.Containers, engine.ContainerStats{
+		result = append(result, engine.ContainerStats{
 			ID: stats.ID, Name: stats.Name, CPU: stats.CPUPerc, Memory: stats.MemUsage, MemoryPercent: stats.MemPerc,
 			NetworkIO: stats.NetIO, BlockIO: stats.BlockIO, PIDs: stats.PIDs,
 		})
diff --git a/internal/engine/docker/stats.go b/internal/engine/docker/stats.go
new file mode 100644
index 0000000..46a0525
--- /dev/null
+++ b/internal/engine/docker/stats.go
@@ -0,0 +1,42 @@
+package docker
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/arabcoders/dcompose/internal/engine"
+)
+
+func (d *Docker) Stats(ctx context.Context, stack engine.Stack) ([]engine.ContainerStats, error) {
+	containers, err := d.Containers(ctx, stack)
+	if nil != err {
+		return nil, err
+	}
+	ids := []string{}
+	for _, container := range containers {
+		if "running" != container.State {
+			continue
+		}
+		id := container.ID
+		if "" == id {
+			id = container.Name
+		}
+		if "" != id {
+			ids = append(ids, id)
+		}
+	}
+	// Without explicit containers, the native command would collect the whole node.
+	if 0 == len(ids) {
+		return []engine.ContainerStats{}, nil
+	}
+	args := append([]string{"stats", "--no-stream", "--no-trunc", "--format", "{{json .}}"}, ids...)
+	stdout, _, err := d.run(ctx, command("", args...))
+	if nil != err {
+		return nil, &engine.Error{Code: 502, Message: "Could not load stack statistics.", Cause: fmt.Errorf("docker stats: %w", err)}
+	}
+	stats, err := parseStats(stdout)
+	if nil != err {
+		return nil, &engine.Error{Code: 502, Message: "Could not load stack statistics.", Cause: err}
+	}
+	return stats, nil
+}
diff --git a/internal/engine/engine.go b/internal/engine/engine.go
index 98594b8..467200c 100644
--- a/internal/engine/engine.go
+++ b/internal/engine/engine.go
@@ -171,6 +171,7 @@ type Driver interface {
 	NodeInfo(context.Context) (NodeInfo, error)
 	Validate(context.Context, Stack) error
 	Containers(context.Context, Stack) ([]Service, error)
+	Stats(context.Context, Stack) ([]ContainerStats, error)
 	Services(context.Context, Stack) ([]string, error)
 	ImageRefs(context.Context, Stack) (map[string]bool, error)
 	ImageChanged(context.Context, Service) (bool, error)
diff --git a/internal/engine/podman/info.go b/internal/engine/podman/info.go
index b34c1ab..8d35aa7 100644
--- a/internal/engine/podman/info.go
+++ b/internal/engine/podman/info.go
@@ -127,6 +127,15 @@ func (p *Podman) NodeInfo(ctx context.Context) (engine.NodeInfo, error) {
 	if nil != err {
 		return result, nodeInfoError("podman stats", err, stderr)
 	}
+	result.Containers, err = parseStats(stdout)
+	if nil != err {
+		return result, nodeInfoError("podman stats", err, nil)
+	}
+	return result, nil
+}
+
+func parseStats(stdout []byte) ([]engine.ContainerStats, error) {
+	result := []engine.ContainerStats{}
 	var stats []struct {
 		ID            string `json:"id"`
 		Name          string `json:"name"`
@@ -140,11 +149,11 @@ func (p *Podman) NodeInfo(ctx context.Context) (engine.NodeInfo, error) {
 		PIDs          string `json:"pids"`
 	}
 	if err := json.Unmarshal(stdout, &stats); nil != err {
-		return result, nodeInfoError("podman stats", fmt.Errorf("invalid JSON response: %w", err), nil)
+		return nil, fmt.Errorf("invalid JSON response: %w", err)
 	}
 	for _, stat := range stats {
 		if "" == stat.ID || "" == stat.Name {
-			return result, nodeInfoError("podman stats", errors.New("response is missing the container ID or name"), nil)
+			return nil, errors.New("response is missing the container ID or name")
 		}
 		network := stat.Network
 		if "" == network {
@@ -159,7 +168,7 @@ func (p *Podman) NodeInfo(ctx context.Context) (engine.NodeInfo, error) {
 			block = stat.LegacyBlock
 		}
 
-		result.Containers = append(result.Containers, engine.ContainerStats{
+		result = append(result, engine.ContainerStats{
 			ID: stat.ID, Name: stat.Name, CPU: stat.CPU, Memory: stat.Memory, MemoryPercent: stat.MemPercent,
 			NetworkIO: network, BlockIO: block, PIDs: stat.PIDs,
 		})
diff --git a/internal/engine/podman/stats.go b/internal/engine/podman/stats.go
new file mode 100644
index 0000000..1a7861c
--- /dev/null
+++ b/internal/engine/podman/stats.go
@@ -0,0 +1,42 @@
+package podman
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/arabcoders/dcompose/internal/engine"
+)
+
+func (p *Podman) Stats(ctx context.Context, stack engine.Stack) ([]engine.ContainerStats, error) {
+	containers, err := p.Containers(ctx, stack)
+	if nil != err {
+		return nil, err
+	}
+	ids := []string{}
+	for _, container := range containers {
+		if "running" != container.State {
+			continue
+		}
+		id := container.ID
+		if "" == id {
+			id = container.Name
+		}
+		if "" != id {
+			ids = append(ids, id)
+		}
+	}
+	// Without explicit containers, the native command would collect the whole node.
+	if 0 == len(ids) {
+		return []engine.ContainerStats{}, nil
+	}
+	args := append([]string{"stats", "--no-stream", "--no-trunc", "--format", "json"}, ids...)
+	stdout, _, err := p.run(ctx, p.command("", args...))
+	if nil != err {
+		return nil, &engine.Error{Code: 502, Message: "Could not load stack statistics.", Cause: fmt.Errorf("podman stats: %w", err)}
+	}
+	stats, err := parseStats(stdout)
+	if nil != err {
+		return nil, &engine.Error{Code: 502, Message: "Could not load stack statistics.", Cause: err}
+	}
+	return stats, nil
+}
diff --git a/internal/engine/stats_test.go b/internal/engine/stats_test.go
new file mode 100644
index 0000000..0b2fff0
--- /dev/null
+++ b/internal/engine/stats_test.go
@@ -0,0 +1,187 @@
+package engine_test
+
+import (
+	"context"
+	"errors"
+	"reflect"
+	"strings"
+	"testing"
+
+	"github.com/arabcoders/dcompose/internal/engine"
+	"github.com/arabcoders/dcompose/internal/engine/docker"
+	"github.com/arabcoders/dcompose/internal/engine/podman"
+)
+
+func statsDriver(name string, run engine.Run) engine.Driver {
+	if "podman" == name {
+		return podman.New(run)
+	}
+	return docker.New(run)
+}
+
+func TestStackStats(t *testing.T) {
+	t.Setenv("CONTAINER_HOST", "")
+	for _, name := range []string{"docker", "podman"} {
+		t.Run(name, func(t *testing.T) {
+			sample := 0
+			calls := 0
+			driver := statsDriver(name, func(_ context.Context, cmd engine.Command) ([]byte, []byte, error) {
+				switch cmd.Args[0] {
+				case "compose":
+					want := []string{
+						"compose",
+						"--project-name",
+						"demo",
+						"--project-directory",
+						"/stacks/demo",
+						"--env-file",
+						"/dev/null",
+						"--file",
+						"/stacks/demo/compose.yaml",
+						"ps",
+						"--all",
+						"--format",
+						"json",
+					}
+					if !reflect.DeepEqual(want, cmd.Args) {
+						t.Fatalf("discovery arguments: %v", cmd.Args)
+					}
+					sample++
+					if 1 == sample {
+						return []byte(
+							`[{"ID":"web-id","Name":"demo-web-1","State":"running"},{"Name":"demo-worker-1","State":"running"},{"ID":"stopped-id","Name":"demo-old-1","State":"exited"}]`,
+						), nil, nil
+					}
+					return []byte(`[{"ID":"new-id","Name":"demo-web-1","State":"running"}]`), nil, nil
+				case "container":
+					return []byte(`{}`), nil, nil
+				case "stats":
+					calls++
+					format := "{{json .}}"
+					if "podman" == name {
+						format = "json"
+					}
+					want := []string{"stats", "--no-stream", "--no-trunc", "--format", format, "web-id", "demo-worker-1"}
+					if 2 == sample {
+						want = []string{"stats", "--no-stream", "--no-trunc", "--format", format, "new-id"}
+					}
+					if name != cmd.Program || !reflect.DeepEqual(want, cmd.Args) {
+						t.Fatalf("scoped stats command: %+v", cmd)
+					}
+					if "podman" == name {
+						return []byte(
+							`[{"id":"sample-id","name":"demo-web-1","cpu_percent":"2.5%","mem_usage":"1MiB / 8MiB","mem_percent":"12.5%","net_io":"1kB / 2kB","block_io":"3kB / 4kB","pids":"5"}]`,
+						), nil, nil
+					}
+					return []byte(
+						`{"ID":"sample-id","Name":"demo-web-1","CPUPerc":"2.5%","MemUsage":"1MiB / 8MiB","MemPerc":"12.5%","NetIO":"1kB / 2kB","BlockIO":"3kB / 4kB","PIDs":"5"}`,
+					), nil, nil
+				default:
+					t.Fatalf("unexpected command: %+v", cmd)
+					return nil, nil, nil
+				}
+			})
+			stack := engine.Stack{Name: "demo", Dir: "/stacks/demo", ComposeFile: "/stacks/demo/compose.yaml", EnvFile: "/dev/null"}
+			want := engine.ContainerStats{
+				ID:            "sample-id",
+				Name:          "demo-web-1",
+				CPU:           "2.5%",
+				Memory:        "1MiB / 8MiB",
+				MemoryPercent: "12.5%",
+				NetworkIO:     "1kB / 2kB",
+				BlockIO:       "3kB / 4kB",
+				PIDs:          "5",
+			}
+			for range 2 {
+				stats, err := driver.Stats(context.Background(), stack)
+				if nil != err || 1 != len(stats) || want != stats[0] {
+					t.Fatalf("stats: %+v, %v", stats, err)
+				}
+			}
+			if 2 != sample || 2 != calls {
+				t.Fatalf("discovery/stats calls: %d/%d", sample, calls)
+			}
+		})
+	}
+}
+
+func TestStackStatsEmpty(t *testing.T) {
+	t.Setenv("CONTAINER_HOST", "")
+	for _, name := range []string{"docker", "podman"} {
+		for _, containers := range []string{`[]`, `[{"ID":"stopped","Name":"demo-web-1","State":"exited"}]`} {
+			t.Run(name+containers, func(t *testing.T) {
+				driver := statsDriver(name, func(_ context.Context, cmd engine.Command) ([]byte, []byte, error) {
+					if "compose" == cmd.Args[0] {
+						return []byte(containers), nil, nil
+					}
+					if "container" == cmd.Args[0] {
+						return []byte(`{}`), nil, nil
+					}
+					t.Fatalf("empty stack ran stats: %+v", cmd)
+					return nil, nil, nil
+				})
+				stats, err := driver.Stats(context.Background(), engine.Stack{Name: "demo"})
+				if nil != err || nil == stats || 0 != len(stats) {
+					t.Fatalf("empty stack stats: %+v, %v", stats, err)
+				}
+			})
+		}
+	}
+}
+
+func TestStackStatsErrors(t *testing.T) {
+	t.Setenv("CONTAINER_HOST", "")
+	for _, name := range []string{"docker", "podman"} {
+		for _, failure := range []string{"compose", "stats", "decode"} {
+			t.Run(name+failure, func(t *testing.T) {
+				driver := statsDriver(name, func(_ context.Context, cmd engine.Command) ([]byte, []byte, error) {
+					if failure == cmd.Args[0] {
+						return []byte("stdout-secret"), []byte("stderr-secret"), context.DeadlineExceeded
+					}
+					if "compose" == cmd.Args[0] {
+						return []byte(`[{"ID":"id","Name":"demo-web-1","State":"running"}]`), nil, nil
+					}
+					if "container" == cmd.Args[0] {
+						return []byte(`{}`), nil, nil
+					}
+					return []byte("stdout-secret"), nil, nil
+				})
+				_, err := driver.Stats(context.Background(), engine.Stack{Name: "demo"})
+				apiErr, ok := errors.AsType[*engine.Error](err)
+				if !ok || 502 != apiErr.Code || strings.Contains(apiErr.Message, "secret") {
+					t.Fatalf("unsafe stats error: %v", err)
+				}
+				if "decode" != failure && !errors.Is(err, context.DeadlineExceeded) {
+					t.Fatalf("lost cancellation cause: %v", err)
+				}
+			})
+		}
+	}
+}
+
+func TestStackStatsCancel(t *testing.T) {
+	t.Setenv("CONTAINER_HOST", "")
+	for _, name := range []string{"docker", "podman"} {
+		for _, stage := range []string{"compose", "stats"} {
+			t.Run(name+stage, func(t *testing.T) {
+				ctx, cancel := context.WithCancel(context.Background())
+				defer cancel()
+				driver := statsDriver(name, func(ctx context.Context, cmd engine.Command) ([]byte, []byte, error) {
+					if stage == cmd.Args[0] {
+						cancel()
+						<-ctx.Done()
+						return nil, nil, ctx.Err()
+					}
+					if "compose" == cmd.Args[0] {
+						return []byte(`[{"ID":"id","Name":"demo-web-1","State":"running"}]`), nil, nil
+					}
+					return []byte(`{}`), nil, nil
+				})
+				_, err := driver.Stats(ctx, engine.Stack{Name: "demo"})
+				if !errors.Is(err, context.Canceled) {
+					t.Fatalf("cancellation: %v", err)
+				}
+			})
+		}
+	}
+}
diff --git a/internal/server/emitter_logging_test.go b/internal/server/emitter_logging_test.go
index 8ab48ff..6f2db63 100644
--- a/internal/server/emitter_logging_test.go
+++ b/internal/server/emitter_logging_test.go
@@ -31,6 +31,7 @@ func TestViewWriteLogs(t *testing.T) {
 		kind, resource, shell string
 	}{
 		{kind: "logs.attach", resource: "demo"},
+		{kind: "stats.attach", resource: "demo"},
 		{kind: "relay.attach", resource: "self-helper"},
 		{kind: "shell.attach", shell: "terminal"},
 		{kind: "shell.input", shell: "terminal"},
@@ -109,7 +110,7 @@ func TestViewWriteLogs(t *testing.T) {
 }
 
 func TestViewErrorLogs(t *testing.T) {
-	for _, kind := range []string{"logs.attach", "relay.attach"} {
+	for _, kind := range []string{"logs.attach", "stats.attach", "relay.attach"} {
 		t.Run(kind, func(t *testing.T) {
 			var output bytes.Buffer
 			original := slog.Default()
diff --git a/internal/server/events.go b/internal/server/events.go
index 7a43ee3..b89366d 100644
--- a/internal/server/events.go
+++ b/internal/server/events.go
@@ -113,7 +113,7 @@ func (s *Server) workspaceEvents(w http.ResponseWriter, r *http.Request) {
 					s.detachBrowser(subscription)
 					delete(subscriptions, message.Stream)
 				}
-			case "logs.attach", "shell.attach":
+			case "logs.attach", "stats.attach", "shell.attach":
 				if nil != subscription {
 					s.detachBrowser(subscription)
 					delete(subscriptions, message.Stream)
diff --git a/internal/server/stats_test.go b/internal/server/stats_test.go
new file mode 100644
index 0000000..7e95fec
--- /dev/null
+++ b/internal/server/stats_test.go
@@ -0,0 +1,230 @@
+package server
+
+import (
+	"context"
+	"encoding/json"
+	"net/http"
+	"strings"
+	"testing"
+	"time"
+
+	"github.com/arabcoders/dcompose/internal/protocol"
+	"github.com/coder/websocket/wsjson"
+)
+
+func TestStatsMux(t *testing.T) {
+	fixture := newWorkspace(t)
+	f, s, node, app := fixture.channel, fixture.server, fixture.node, fixture.app
+	one := workspaceSnapshot(t, app.URL, s)
+	two := workspaceSnapshot(t, app.URL, s)
+	logs := workspaceSnapshot(t, app.URL, s)
+	attach := protocol.ChannelMessage{Type: "stats.attach", Stream: "stats", Node: "home", Resource: "demo"}
+	browserSend(t, one, attach)
+	first := channelCommand(t, f, "stats.attach")
+	browserSend(t, two, attach)
+	second := channelCommand(t, f, "stats.attach")
+	browserSend(t, logs, protocol.ChannelMessage{Type: "logs.attach", Stream: "logs", Node: "home", Resource: "demo"})
+	logStream := channelCommand(t, f, "logs.attach")
+	if "" == first.Stream || first.Stream == second.Stream || attach.Stream == first.Stream || attach.Stream == second.Stream ||
+		"demo" != first.Resource || "demo" != second.Resource {
+		t.Fatal("invalid stats attachment routing", first, second)
+	}
+	payloads := []json.RawMessage{
+		json.RawMessage(
+			`{"containers":[{"id":"one","name":"demo-web-1","cpu":"1%","memory":"1MiB / 1GiB","memory_percent":"0.1%","network_io":"1kB / 2kB","block_io":"0B / 0B","pids":"2"}]}`,
+		),
+		json.RawMessage(`{"containers":[]}`),
+	}
+	for index, command := range []protocol.ChannelMessage{first, second} {
+		browserSend(
+			t,
+			node,
+			protocol.ChannelMessage{Type: "stream.event", Stream: command.Stream, Event: "stack.stats", Payload: payloads[index]},
+		)
+	}
+	if got := resourceMessage(
+		t,
+		one,
+	); "event" != got.Type || "stats" != got.Stream || "stack.stats" != got.Event ||
+		string(payloads[0]) != string(got.Payload) {
+		t.Fatal("wrong first stats delivery", got)
+	}
+	if got := resourceMessage(t, two); "stats" != got.Stream || "stack.stats" != got.Event || string(payloads[1]) != string(got.Payload) {
+		t.Fatal("stats crossed browser subscriptions", got)
+	}
+	browserSend(
+		t,
+		node,
+		protocol.ChannelMessage{
+			Type:    "stream.event",
+			Stream:  logStream.Stream,
+			Event:   "message",
+			Payload: json.RawMessage(`{"message":"logs"}`),
+		},
+	)
+	ctx, cancel := context.WithTimeout(context.Background(), 3*time.Second)
+	defer cancel()
+	for {
+		var message protocol.ChannelMessage
+		if err := wsjson.Read(ctx, logs, &message); nil != err {
+			t.Fatal(err)
+		}
+		if "stack.stats" == message.Event || ("" != message.Stream && "logs" != message.Stream) {
+			t.Fatal("stats reached log reader", message)
+		}
+		if "logs" == message.Stream {
+			if "message" != message.Event {
+				t.Fatal("wrong log event", message)
+			}
+			break
+		}
+	}
+	browserSend(t, logs, protocol.ChannelMessage{Type: "workspace.sync"})
+	for {
+		var message protocol.ChannelMessage
+		if err := wsjson.Read(ctx, logs, &message); nil != err {
+			t.Fatal(err)
+		}
+		if "stack.stats" == message.Event || strings.Contains(string(message.Payload), "memory_percent") {
+			t.Fatal("stats entered workspace snapshot", message)
+		}
+		if "node.snapshot" == message.Event {
+			break
+		}
+	}
+	browserSend(t, one, protocol.ChannelMessage{Type: "stream.detach", Stream: "stats"})
+	if detach := channelCommand(t, f, "stream.detach"); first.Stream != detach.Stream {
+		t.Fatal("detached another stats subscription", detach)
+	}
+	browserSend(t, node, protocol.ChannelMessage{Type: "stream.event", Stream: first.Stream, Event: "stack.stats", Payload: payloads[0]})
+	sendRuntime(t, node, "stack.removed", `{"name":"demo"}`)
+	for {
+		var message protocol.ChannelMessage
+		if err := wsjson.Read(ctx, one, &message); nil != err {
+			t.Fatal(err)
+		}
+		if "stats" == message.Stream || "stack.stats" == message.Event {
+			t.Fatal("detached stats still delivered", message)
+		}
+		if "stack.removed" == message.Event {
+			break
+		}
+	}
+	_ = two.CloseNow()
+	if detach := channelCommand(t, f, "stream.detach"); second.Stream != detach.Stream {
+		t.Fatal("browser close did not detach stats", detach)
+	}
+	if 1 != f.count.Load() {
+		t.Fatal("stats opened another node connection", f.count.Load())
+	}
+}
+
+func TestStatsRouting(t *testing.T) {
+	s := testServer(t, nil)
+	channel := &nodeChannel{streams: make(map[string]*browserSubscription)}
+	for _, kind := range []string{"stats.attach", "logs.attach", "relay.attach"} {
+		subscription := &browserSubscription{kind: kind, subscriber: make(chan protocol.ChannelMessage, 4)}
+		channel.streams[kind] = subscription
+		s.streamEvent(
+			channel,
+			protocol.ChannelMessage{
+				Type:    "stream.event",
+				Stream:  kind,
+				Event:   "stack.stats",
+				Payload: json.RawMessage(`{"containers":[]}`),
+			},
+		)
+		if "stats.attach" == kind {
+			if 1 != len(subscription.subscriber) {
+				t.Fatal("stats event was not delivered")
+			}
+			if got := <-subscription.subscriber; "event" != got.Type || "stack.stats" != got.Event {
+				t.Fatal("missing stats event", got)
+			}
+		}
+		s.streamEvent(
+			channel,
+			protocol.ChannelMessage{Type: "stream.event", Stream: kind, Event: "stack.stats", Payload: json.RawMessage(`{`)},
+		)
+		if "stats.attach" == kind {
+			for _, event := range []string{"message", "relay.output", "done"} {
+				s.streamEvent(
+					channel,
+					protocol.ChannelMessage{Type: "stream.event", Stream: kind, Event: event, Payload: json.RawMessage(`{}`)},
+				)
+			}
+		}
+		if 0 != len(subscription.subscriber) {
+			t.Fatal("unexpected stats routing", kind)
+		}
+	}
+}
+
+func TestStatsValidation(t *testing.T) {
+	for _, test := range []struct {
+		name, stream, node, resource string
+		paused, runtimePaused        bool
+		status                       int
+	}{
+		{name: "stream", node: "home", resource: "demo", status: 400},
+		{name: "node", stream: "stats", node: "../home", resource: "demo", status: 400},
+		{name: "stack", stream: "stats", node: "home", resource: "../demo", status: 400},
+		{name: "empty", stream: "stats", node: "home", status: 400},
+		{name: "missing", stream: "stats", node: "missing", resource: "demo", status: 404},
+		{name: "paused", stream: "stats", node: "home", resource: "demo", paused: true, status: 409},
+		{name: "runtime", stream: "stats", node: "home", resource: "demo", runtimePaused: true, status: 409},
+		{name: "offline", stream: "stats", node: "home", resource: "demo", status: 502},
+	} {
+		t.Run(test.name, func(t *testing.T) {
+			s := testServer(t, nil)
+			s.config.Nodes["home"] = NodeConfig{Paused: test.paused}
+			if test.runtimePaused {
+				s.runtime["home"] = &nodeRuntime{state: map[string]json.RawMessage{"state": json.RawMessage(`"paused"`)}}
+			}
+			subscription, response := s.attachBrowser(
+				context.Background(),
+				protocol.ChannelMessage{Type: "stats.attach", Stream: test.stream, Node: test.node, Resource: test.resource},
+			)
+			if nil != subscription || nil == response || "error" != response.Type || test.status != response.Status ||
+				test.stream != response.Stream {
+				t.Fatal("invalid stats attachment accepted", subscription, response)
+			}
+		})
+	}
+}
+
+func TestStatsAuth(t *testing.T) {
+	fixture := newWorkspace(t)
+	f, s, app := fixture.channel, fixture.server, fixture.app
+	browser := workspaceSnapshot(t, app.URL, s)
+	s.configMu.Lock()
+	s.config.Auth.Username = "changed"
+	s.configMu.Unlock()
+	browserSend(t, browser, protocol.ChannelMessage{Type: "stats.attach", Stream: "stats", Node: "home", Resource: "demo"})
+	if got := resourceMessage(t, browser); "error" != got.Type || http.StatusUnauthorized != got.Status || 0 != len(f.commands) {
+		t.Fatal("revoked session attached stats", got)
+	}
+}
+
+func TestStatsError(t *testing.T) {
+	fixture := newWorkspace(t)
+	f, s, node, app := fixture.channel, fixture.server, fixture.node, fixture.app
+	browser := workspaceSnapshot(t, app.URL, s)
+	browserSend(t, browser, protocol.ChannelMessage{Type: "stats.attach", Stream: "stats", Node: "home", Resource: "demo"})
+	attach := channelCommand(t, f, "stats.attach")
+	browserSend(
+		t,
+		node,
+		protocol.ChannelMessage{Type: "stream.error", Stream: attach.Stream, Status: 404, Error: "private stats diagnostic"},
+	)
+	if got := resourceMessage(
+		t,
+		browser,
+	); "error" != got.Type || "stats" != got.Stream || 404 != got.Status ||
+		strings.Contains(got.Error, "private") {
+		t.Fatal("stats error changed status or leaked details", got)
+	}
+	if detach := channelCommand(t, f, "stream.detach"); attach.Stream != detach.Stream {
+		t.Fatal("failed stats stream was not detached", detach)
+	}
+}
diff --git a/internal/server/stream.go b/internal/server/stream.go
index 0ba2a96..bba0189 100644
--- a/internal/server/stream.go
+++ b/internal/server/stream.go
@@ -36,7 +36,7 @@ func (s *Server) attachBrowser(ctx context.Context, message protocol.ChannelMess
 	}
 	valid := identity.MatchString(message.Node)
 	switch message.Type {
-	case "logs.attach":
+	case "logs.attach", "stats.attach":
 		valid = valid && stackName.MatchString(message.Resource)
 	case "shell.attach":
 		valid = valid && identity.MatchString(message.Shell)
@@ -94,6 +94,8 @@ func (s *Server) attachNode(ctx context.Context, message protocol.ChannelMessage
 	if err := writeChannel(ctx, subscription.conn, command); nil != err {
 		view := fmt.Sprintf("logs for stack %q", subscription.resource)
 		switch subscription.kind {
+		case "stats.attach":
+			view = fmt.Sprintf("stats for stack %q", subscription.resource)
 		case "relay.attach":
 			view = fmt.Sprintf("self-update relay %q", subscription.resource)
 		case "shell.attach":
@@ -178,6 +180,9 @@ func (subscription *browserSubscription) forward(outgoing chan<- browserDelivery
 			message.Stream = subscription.id
 			if "error" == message.Type && 409 != message.Status && "Connection lost. Try again." != message.Error {
 				message.Error = "Could not load logs. Try again."
+				if "stats.attach" == subscription.kind {
+					message.Error = "Could not load stats. Try again."
+				}
 			}
 			if !send(message, false) {
 				return
@@ -205,7 +210,10 @@ func (s *Server) streamEvent(channel *nodeChannel, message protocol.ChannelMessa
 			status = 502
 		}
 		view := fmt.Sprintf("logs for stack %q", subscription.resource)
-		if "relay.attach" == subscription.kind {
+		switch subscription.kind {
+		case "stats.attach":
+			view = fmt.Sprintf("stats for stack %q", subscription.resource)
+		case "relay.attach":
 			view = fmt.Sprintf("self-update relay %q", subscription.resource)
 		}
 		detail := fmt.Sprintf("Could not load %s on %s", view, nodeLogLabel(channel.node))
@@ -234,10 +242,16 @@ func (s *Server) streamEvent(channel *nodeChannel, message protocol.ChannelMessa
 		)
 		message = protocol.ChannelMessage{Type: "error", Status: status, Error: "Could not load the requested view. Try again."}
 	} else {
-		switch message.Event {
-		case "relay.snapshot", "relay.output", "relay.done", "message", "done", "error":
-		default:
-			return
+		if "stats.attach" == subscription.kind {
+			if "stack.stats" != message.Event {
+				return
+			}
+		} else {
+			switch message.Event {
+			case "relay.snapshot", "relay.output", "relay.done", "message", "done", "error":
+			default:
+				return
+			}
 		}
 		if !json.Valid(message.Payload) {
 			return

From c0b8d855e90912e4c4106f988230f08a6fcca298 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Thu, 12 Nov 2026 07:14:29 +0300
Subject: [PATCH 2/3] refactor: improve dashboard

---
 frontend/app/components/NodeResources.vue | 317 +++++++++++
 frontend/app/pages/index.vue              | 664 +++++++++++++---------
 frontend/app/pages/logs.vue               |  24 +-
 frontend/app/utils/stacks.ts              |  15 +-
 frontend/tests/logs-ui.test.ts            |  83 ++-
 frontend/tests/stack-ui.test.ts           | 490 +++++++++++++++-
 frontend/tests/stacks.test.ts             |   9 +
 7 files changed, 1299 insertions(+), 303 deletions(-)
 create mode 100644 frontend/app/components/NodeResources.vue

diff --git a/frontend/app/components/NodeResources.vue b/frontend/app/components/NodeResources.vue
new file mode 100644
index 0000000..3d7a416
--- /dev/null
+++ b/frontend/app/components/NodeResources.vue
@@ -0,0 +1,317 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { NuxtLink } from '#components'
+import UBadge from '@nuxt/ui/components/Badge.vue'
+import UButton from '@nuxt/ui/components/Button.vue'
+import UAlert from '@nuxt/ui/components/Alert.vue'
+import UIcon from '@nuxt/ui/components/Icon.vue'
+import UTooltip from '@nuxt/ui/components/Tooltip.vue'
+import type { NodeInfo, WorkspaceNode } from '~/types'
+import { notification, parse_api_response, request } from '~/utils'
+import { formatMemoryBytes } from '~/utils/node'
+import { aggregateStackStats, parseStatBytes, workspaceErrorMessage } from '~/utils/stacks'
+
+const props = defineProps<{ node: WorkspaceNode }>()
+const connected = computed(() => 'connected' === props.node.connection && !props.node.paused)
+const info = ref<NodeInfo | null>(null)
+const loading = ref(false)
+const error = ref('')
+const ranking = ref<'cpu' | 'memory'>('cpu')
+let mounted = false
+let controller: AbortController | null = null
+let timer: ReturnType<typeof setInterval> | undefined
+
+const connectionLabel = computed(() => {
+  if (props.node.paused) {
+    return 'Paused'
+  }
+  return {
+    connected: 'Connected',
+    loading: 'Connecting',
+    reconnecting: 'Reconnecting',
+    unavailable: 'Unavailable',
+    paused: 'Paused',
+  }[props.node.connection]
+})
+const totals = computed(() =>
+  aggregateStackStats(info.value?.containers ?? [], info.value?.runtime.cpus ?? 1),
+)
+const consumers = computed(() => {
+  const sample = info.value
+  if (!sample) {
+    return []
+  }
+  return props.node.stacks
+    .filter((stack) => !stack.loading && !stack.error && 0 < stack.services.length)
+    .map((stack) => {
+      const names = new Set(stack.services.map((service) => service.name))
+      const containers = sample.containers.filter((container) => names.has(container.name))
+      return {
+        name: stack.name,
+        count: containers.length,
+        totals: aggregateStackStats(containers, sample.runtime.cpus),
+        cpu:
+          containers.reduce((total, container) => total + Number.parseFloat(container.cpu), 0) /
+          sample.runtime.cpus,
+        memory: containers.reduce(
+          (total, container) => total + parseStatBytes(container.memory.split('/')[0] ?? ''),
+          0,
+        ),
+      }
+    })
+    .filter((stack) => 0 < stack.count && Number.isFinite(stack[ranking.value]))
+    .sort((a, b) => b[ranking.value] - a[ranking.value] || a.name.localeCompare(b.name))
+    .slice(0, 3)
+})
+
+const refresh = async () => {
+  if (!mounted || !connected.value || document.hidden || controller) {
+    return
+  }
+  const current = new AbortController()
+  controller = current
+  loading.value = true
+  try {
+    const response = await request(`/api/nodes/${encodeURIComponent(props.node.id)}/info`, {
+      signal: current.signal,
+    })
+    const json = await parse_api_response<NodeInfo>(response)
+    if (current.signal.aborted) {
+      return
+    }
+    if (!response.ok || 'error' in json) {
+      throw new Error(
+        workspaceErrorMessage(
+          response.status,
+          'error' in json ? json.error.message : 'Could not load resource usage.',
+        ),
+      )
+    }
+    info.value = json
+    error.value = ''
+  } catch (cause) {
+    if (!current.signal.aborted) {
+      const message =
+        cause instanceof Error && !(cause instanceof TypeError)
+          ? cause.message
+          : 'Could not load resource usage.'
+      if (!error.value) {
+        notification('error', `Resource snapshot failed for ${props.node.name}`, message)
+      }
+      error.value = message
+    }
+  } finally {
+    if (controller === current) {
+      controller = null
+      loading.value = false
+    }
+  }
+}
+
+const stop = () => {
+  clearInterval(timer)
+  timer = undefined
+  controller?.abort()
+  controller = null
+  loading.value = false
+}
+
+const resume = () => {
+  clearInterval(timer)
+  timer = undefined
+  if (!mounted || !connected.value || document.hidden) {
+    return
+  }
+  void refresh()
+  timer = setInterval(() => void refresh(), 30_000)
+}
+
+watch([() => props.node.id, connected], () => {
+  stop()
+  info.value = null
+  error.value = ''
+  resume()
+})
+
+onMounted(() => {
+  mounted = true
+  document.addEventListener('visibilitychange', resume)
+  resume()
+})
+onBeforeUnmount(() => {
+  mounted = false
+  stop()
+  document.removeEventListener('visibilitychange', resume)
+})
+</script>
+
+<template>
+  <article class="app-frame min-w-0 overflow-hidden" :aria-busy="loading">
+    <header class="flex items-center justify-between gap-3 border-b border-default px-4 py-3">
+      <slot name="leading" />
+      <UTooltip :text="connectionLabel">
+        <UIcon
+          :name="
+            node.paused || 'paused' === node.connection
+              ? 'i-lucide-pause'
+              : 'unavailable' === node.connection
+                ? 'i-lucide-server-off'
+                : 'i-lucide-server'
+          "
+          class="size-4 shrink-0"
+          :class="
+            connected
+              ? 'text-success'
+              : node.paused || 'paused' === node.connection
+                ? 'text-muted'
+                : 'unavailable' === node.connection
+                  ? 'text-error'
+                  : 'text-warning'
+          "
+          role="img"
+          :aria-label="connectionLabel"
+          tabindex="0"
+        />
+      </UTooltip>
+      <NuxtLink
+        :to="`/nodes/${encodeURIComponent(node.id)}`"
+        class="min-w-0 flex-1 truncate font-semibold hover:text-primary"
+        >{{ node.name }}</NuxtLink
+      >
+    </header>
+    <div v-if="connected || node.error" class="space-y-4 p-4">
+      <UAlert
+        v-if="!connected && node.error"
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-wifi-off"
+        :title="node.error"
+      />
+      <template v-else>
+        <UAlert
+          v-if="error"
+          color="warning"
+          variant="subtle"
+          icon="i-lucide-circle-alert"
+          :title="error"
+          :description="info ? 'Showing previous sample' : undefined"
+        >
+          <template #actions>
+            <UButton
+              color="neutral"
+              variant="outline"
+              size="sm"
+              icon="i-lucide-refresh-cw"
+              :loading="loading"
+              :disabled="loading"
+              @click="refresh"
+              >Retry</UButton
+            >
+          </template>
+        </UAlert>
+        <UAlert
+          v-else-if="!info"
+          color="neutral"
+          variant="subtle"
+          icon="i-lucide-loader-circle"
+          title="Loading"
+          :ui="{ icon: 'animate-spin' }"
+        />
+        <template v-if="info">
+          <dl class="grid grid-cols-2 gap-4">
+            <div>
+              <dt class="text-xs text-muted">
+                <UTooltip
+                  text="Node CPU capacity used by running containers, including unmanaged ones. Excludes other host processes."
+                >
+                  <span class="inline-flex items-center gap-1.5" tabindex="0"
+                    ><UIcon name="i-lucide-cpu" class="size-3.5" />CPU</span
+                  >
+                </UTooltip>
+              </dt>
+              <dd class="mt-1 text-base font-semibold tabular-nums">
+                <span class="text-primary">{{ totals.cpu }}</span>
+                <span class="text-muted"> / {{ info.runtime.cpus }} cores</span>
+              </dd>
+            </div>
+            <div>
+              <dt class="text-xs text-muted">
+                <UTooltip
+                  text="Memory across all running containers, including unmanaged ones. Excludes other host processes."
+                >
+                  <span class="inline-flex items-center gap-1.5" tabindex="0"
+                    ><UIcon name="i-lucide-memory-stick" class="size-3.5" />Memory</span
+                  >
+                </UTooltip>
+              </dt>
+              <dd class="mt-1 text-base font-semibold tabular-nums">
+                <span class="text-info">{{ totals.memory }}</span>
+                <span class="text-muted">
+                  / {{ formatMemoryBytes(info.runtime.memory_bytes) }}</span
+                >
+              </dd>
+            </div>
+          </dl>
+          <div v-if="consumers.length" class="space-y-3 border-t border-default pt-3">
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <h3 class="inline-flex items-center gap-1.5 text-sm font-medium">
+                <UIcon name="i-lucide-layers" class="size-4 text-primary" />Top stacks
+              </h3>
+              <div class="flex gap-1" role="group" aria-label="Rank stacks by resource">
+                <UButton
+                  v-for="metric in ['cpu', 'memory'] as const"
+                  :key="metric"
+                  size="xs"
+                  :color="ranking === metric ? 'primary' : 'neutral'"
+                  :icon="'cpu' === metric ? 'i-lucide-cpu' : 'i-lucide-memory-stick'"
+                  :variant="ranking === metric ? 'soft' : 'ghost'"
+                  :aria-pressed="ranking === metric"
+                  :aria-label="'cpu' === metric ? 'Sort by CPU' : 'Sort by memory'"
+                  @click="ranking = metric"
+                  >{{ 'cpu' === metric ? 'CPU' : 'Memory' }}</UButton
+                >
+              </div>
+            </div>
+            <ol class="space-y-2">
+              <li
+                v-for="stack in consumers"
+                :key="stack.name"
+                class="flex flex-wrap items-center justify-between gap-2 text-sm"
+              >
+                <NuxtLink
+                  :to="`/stacks/${encodeURIComponent(node.id)}/${encodeURIComponent(stack.name)}`"
+                  class="truncate hover:text-primary"
+                  >{{ stack.name }}</NuxtLink
+                >
+                <div class="flex shrink-0 gap-1.5">
+                  <UTooltip text="Share of node CPU capacity"
+                    ><UBadge
+                      icon="i-lucide-cpu"
+                      color="primary"
+                      variant="subtle"
+                      size="sm"
+                      class="w-18 justify-center font-mono tabular-nums"
+                      tabindex="0"
+                      >{{ stack.totals.cpu }}</UBadge
+                    ></UTooltip
+                  >
+                  <UTooltip text="Memory"
+                    ><UBadge
+                      icon="i-lucide-memory-stick"
+                      color="info"
+                      variant="subtle"
+                      size="sm"
+                      class="w-24 justify-center font-mono tabular-nums"
+                      tabindex="0"
+                      >{{ stack.totals.memory }}</UBadge
+                    ></UTooltip
+                  >
+                </div>
+              </li>
+            </ol>
+          </div>
+        </template>
+      </template>
+    </div>
+  </article>
+</template>
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index 822ea64..e927c13 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useHead } from '#app'
 import { definePageMeta } from '#imports'
@@ -10,24 +10,127 @@ import UButton from '@nuxt/ui/components/Button.vue'
 import UIcon from '@nuxt/ui/components/Icon.vue'
 import UTooltip from '@nuxt/ui/components/Tooltip.vue'
 import StatCard from '~/components/StatCard.vue'
+import NodeResources from '~/components/NodeResources.vue'
 import { useDialog } from '~/composables/useDialog'
+import { useLogs } from '~/composables/useLogs'
 import { useWorkspaceStore } from '~/store/workspace'
-import type { StackFilter, StackRuntime } from '~/types'
-import { containerProblem } from '~/utils/stacks'
+import type { LogEntry, StatCardProps } from '~/types'
+import { containerProblem, imageUpdateTooltip } from '~/utils/stacks'
+import { formatLogDate, getLogLevel, logNodeLabel } from '~/utils/logs'
 
 definePageMeta({ layout: 'workspace' })
 
 const workspace = useWorkspaceStore()
 const { nodes, loading: workspaceLoading } = storeToRefs(workspace)
 const { confirmDialog } = useDialog()
-const draggedNode = ref('')
-const dropTarget = ref('')
+const {
+  entries: logEntries,
+  error: logsError,
+  truncated: logsTruncated,
+  search: searchLogs,
+  refresh: refreshLogs,
+} = useLogs()
+const recentErrors = computed(() => logEntries.value.slice(-5).reverse())
+const logsLink = (entry?: LogEntry) => ({
+  path: '/logs',
+  query: {
+    levels: 'warning,error',
+    ...('string' === typeof entry?.fields.node_id ? { node: entry.fields.node_id } : {}),
+  },
+})
+onMounted(() => {
+  void searchLogs({ levels: ['warning', 'error'], node: '', search: '' })
+})
 
-const filterStacks = (status: StackFilter) => {
-  workspace.stackFilter = status
-  workspace.stackSearch = ''
-  workspace.sidebarOpen = window.matchMedia('(max-width: 1023px)').matches
-}
+const enabledNodes = computed(() => nodes.value.filter((node) => !node.paused))
+const reportingNodes = computed(() =>
+  enabledNodes.value.filter((node) => 'connected' === node.connection),
+)
+const unavailableNodes = computed(() =>
+  enabledNodes.value.filter(
+    (node) => 'unavailable' === node.connection || 'reconnecting' === node.connection,
+  ),
+)
+const currentStacks = computed(() =>
+  reportingNodes.value.flatMap((node) =>
+    node.stacks.filter((stack) => !stack.loading).map((stack) => ({ node, stack })),
+  ),
+)
+const issues = computed(() =>
+  currentStacks.value
+    .flatMap(({ node, stack }) => {
+      const messages = stack.error
+        ? [stack.error]
+        : stack.services.flatMap((service) => {
+            const problem = containerProblem(service)
+            const check = service.image_update
+            return [
+              ...(problem ? [`${service.name}: ${problem}`] : []),
+              ...('error' === check?.status ? [`${service.name}: update check failed`] : []),
+            ]
+          })
+      const priority = stack.error
+        ? 0
+        : stack.services.some((service) => containerProblem(service))
+          ? 1
+          : 2
+      return messages.length ? [{ node, stack, messages, priority }] : []
+    })
+    .sort(
+      (a, b) =>
+        a.priority - b.priority ||
+        a.node.name.localeCompare(b.node.name) ||
+        a.stack.name.localeCompare(b.stack.name),
+    ),
+)
+const busyStacks = computed(() => currentStacks.value.filter(({ stack }) => stack.busy))
+const updates = computed(() =>
+  currentStacks.value.flatMap(({ node, stack }) => {
+    if (stack.error) {
+      return []
+    }
+    const services = stack.services.filter((service) =>
+      ['available', 'checking', 'error'].includes(service.image_update?.status ?? ''),
+    )
+    return services.length ? [{ node, stack, services }] : []
+  }),
+)
+const availableUpdates = computed(
+  () =>
+    updates.value.filter((item) =>
+      item.services.some((service) => 'available' === service.image_update?.status),
+    ).length,
+)
+const counts = computed<Array<StatCardProps & { href: string }>>(() => [
+  {
+    label: 'Nodes',
+    value: `${reportingNodes.value.length} / ${nodes.value.length}`,
+    tooltip: `${unavailableNodes.value.length} offline, ${nodes.value.length - enabledNodes.value.length} paused`,
+    icon: 'i-lucide-server',
+    href: '#resources-heading',
+  },
+  {
+    label: 'Attention',
+    value: issues.value.length,
+    icon: 'i-lucide-triangle-alert',
+    href:
+      unavailableNodes.value.length || issues.value.length
+        ? '#attention-heading'
+        : '#resources-heading',
+  },
+  {
+    label: 'Updates',
+    value: availableUpdates.value,
+    icon: 'i-lucide-circle-arrow-up',
+    href: updates.value.length ? '#updates-heading' : '#resources-heading',
+  },
+  {
+    label: 'Busy',
+    value: busyStacks.value.length,
+    icon: 'i-lucide-loader-circle',
+    href: busyStacks.value.length ? '#busy-heading' : '#resources-heading',
+  },
+])
 
 const checkUpdates = async () => {
   const { status } = await confirmDialog({
@@ -40,6 +143,8 @@ const checkUpdates = async () => {
   }
 }
 
+const draggedNode = ref('')
+const dropTarget = ref('')
 const startDrag = (event: PointerEvent, id: string) => {
   if (
     0 !== event.button ||
@@ -51,7 +156,6 @@ const startDrag = (event: PointerEvent, id: string) => {
   event.currentTarget.setPointerCapture(event.pointerId)
   draggedNode.value = id
 }
-
 const dragNode = (event: PointerEvent) => {
   if (!draggedNode.value) {
     return
@@ -61,12 +165,10 @@ const dragNode = (event: PointerEvent) => {
     ?.closest<HTMLElement>('[data-node-id]')
   dropTarget.value = target?.dataset.nodeId ?? ''
 }
-
 const endDrag = () => {
   draggedNode.value = ''
   dropTarget.value = ''
 }
-
 const dropNode = () => {
   const id = draggedNode.value
   const target = dropTarget.value
@@ -75,7 +177,6 @@ const dropNode = () => {
     void workspace.moveNode(id, target)
   }
 }
-
 const moveByKeyboard = async (event: KeyboardEvent, id: string, direction: number) => {
   const index = nodes.value.findIndex((node) => id === node.id)
   const target = nodes.value[index + direction]
@@ -88,68 +189,18 @@ const moveByKeyboard = async (event: KeyboardEvent, id: string, direction: numbe
 }
 
 useHead({ title: 'Overview' })
-const stacks = computed(() => nodes.value.flatMap((node) => node.stacks))
-const problems = computed(() =>
-  nodes.value.flatMap((node) =>
-    'connected' === node.connection
-      ? node.stacks.flatMap((stack) =>
-          stack.loading || stack.error
-            ? []
-            : stack.services.flatMap((service) => {
-                const problem = containerProblem(service)
-                return problem ? [{ node, stack: stack.name, service, problem }] : []
-              }),
-        )
-      : [],
-  ),
-)
-const unavailableNodes = computed(() =>
-  nodes.value.filter(
-    (node) => 'unavailable' === node.connection || 'reconnecting' === node.connection,
-  ),
-)
-const updatesCount = (items: Array<StackRuntime>) =>
-  items.filter((stack) =>
-    stack.services.some((service) => 'available' === service.image_update?.status),
-  ).length
-const counts = computed(() => [
-  {
-    label: 'Running',
-    filter: 'running' as const,
-    count: stacks.value.filter((stack) => 'running' === stack.status).length,
-    icon: 'i-lucide-circle-play',
-  },
-  {
-    label: 'Stopped',
-    filter: 'stopped' as const,
-    count: stacks.value.filter((stack) => 'stopped' === stack.status).length,
-    icon: 'i-lucide-circle-stop',
-  },
-  {
-    label: 'Drafts',
-    filter: 'draft' as const,
-    count: stacks.value.filter((stack) => 'draft' === stack.status).length,
-    icon: 'i-lucide-file-pen',
-  },
-  {
-    label: 'Updates',
-    filter: 'updates' as const,
-    count: updatesCount(stacks.value),
-    icon: 'i-lucide-circle-arrow-up',
-  },
-])
 </script>
 
 <template>
   <div class="min-w-0 space-y-6">
-    <div class="flex items-center justify-end gap-2">
+    <div class="flex flex-wrap items-center justify-end gap-2">
       <UButton
         color="neutral"
         variant="outline"
         icon="i-lucide-refresh-cw"
         aria-label="Check for updates on all nodes"
         :loading="workspace.isCheckingImages()"
-        :disabled="workspace.isCheckingImages() || nodes.every((node) => node.paused)"
+        :disabled="workspace.isCheckingImages() || !reportingNodes.length"
         @click="checkUpdates"
         >Check for updates</UButton
       >
@@ -157,7 +208,6 @@ const counts = computed(() => [
         color="neutral"
         variant="outline"
         icon="i-lucide-refresh-cw"
-        aria-label="Refresh nodes"
         :loading="workspaceLoading"
         @click="workspace.load"
         >Refresh</UButton
@@ -165,234 +215,326 @@ const counts = computed(() => [
     </div>
 
     <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-      <button
+      <a
         v-for="count in counts"
-        :key="count.filter"
-        type="button"
-        :aria-pressed="workspace.stackFilter === count.filter"
-        class="min-w-0 cursor-pointer rounded-lg text-left focus-visible:outline-2 focus-visible:outline-primary"
-        @click="filterStacks(count.filter)"
+        :key="count.href + count.icon"
+        :href="count.href"
+        class="min-w-0 rounded-lg focus-visible:outline-2 focus-visible:outline-primary"
       >
-        <StatCard :label="count.label" :value="count.count" :icon="count.icon" />
-      </button>
+        <StatCard
+          :label="count.label"
+          :value="count.value"
+          :icon="count.icon"
+          color="neutral"
+          :hint="count.hint"
+          :tooltip="count.tooltip"
+        />
+      </a>
     </div>
 
-    <UAlert
-      v-if="workspaceLoading"
-      color="info"
-      variant="soft"
-      icon="i-lucide-loader-circle"
-      title="Loading stacks..."
-      :ui="{ icon: 'animate-spin' }"
-    />
-
     <section
-      v-if="problems.length"
+      v-if="unavailableNodes.length || issues.length"
       class="app-card overflow-hidden"
       aria-labelledby="attention-heading"
     >
-      <div class="flex items-center gap-2 px-4 py-3">
+      <div class="flex items-center gap-2 border-b border-default px-4 py-3">
         <UIcon name="i-lucide-triangle-alert" class="size-4 text-warning" />
         <h2 id="attention-heading" class="text-sm font-semibold text-highlighted">
           Needs attention
         </h2>
-        <UBadge color="error" variant="soft" size="sm">
-          {{ problems.length }}
-        </UBadge>
+        <UBadge color="warning" variant="subtle" size="sm">{{
+          unavailableNodes.length + issues.length
+        }}</UBadge>
       </div>
-      <ul class="divide-y divide-default border-t border-default">
-        <li
-          v-for="item in problems"
-          :key="JSON.stringify([item.node.id, item.stack, item.service.name])"
-        >
+      <ul class="divide-y divide-default">
+        <li v-for="node in unavailableNodes" :key="node.id">
+          <NuxtLink
+            :to="`/nodes/${encodeURIComponent(node.id)}`"
+            class="flex min-w-0 items-start gap-3 px-4 py-3 hover:bg-elevated"
+          >
+            <UIcon name="i-lucide-server-off" class="mt-0.5 size-4 shrink-0 text-error" />
+            <div class="min-w-0 flex-1 space-y-1">
+              <p class="text-sm font-medium text-highlighted">{{ node.name }}</p>
+              <p v-if="node.error" class="text-xs text-muted">
+                {{ node.error }}
+              </p>
+              <UTooltip text="Cached stack inventory. Current status is unknown.">
+                <UBadge
+                  icon="i-lucide-layers"
+                  color="neutral"
+                  variant="subtle"
+                  size="sm"
+                  tabindex="0"
+                  >{{ node.stacks.length }} unverified</UBadge
+                >
+              </UTooltip>
+            </div>
+            <UBadge
+              :color="'reconnecting' === node.connection ? 'warning' : 'error'"
+              :icon="
+                'reconnecting' === node.connection ? 'i-lucide-loader-circle' : 'i-lucide-wifi-off'
+              "
+              variant="subtle"
+              size="sm"
+              >{{ 'reconnecting' === node.connection ? 'Reconnecting' : 'Unavailable' }}</UBadge
+            >
+          </NuxtLink>
+        </li>
+        <li v-for="item in issues" :key="`${item.node.id}/${item.stack.name}`">
           <NuxtLink
-            :to="`/stacks/${encodeURIComponent(item.node.id)}/${encodeURIComponent(item.stack)}`"
-            class="flex min-w-0 items-center gap-3 px-4 py-3 transition hover:bg-elevated focus-visible:outline-2 focus-visible:outline-primary"
+            :to="`/stacks/${encodeURIComponent(item.node.id)}/${encodeURIComponent(item.stack.name)}`"
+            class="flex min-w-0 items-start gap-3 px-4 py-3 hover:bg-elevated"
           >
-            <div class="min-w-0 flex-1">
-              <p class="truncate text-xs text-muted">{{ item.node.name }} / {{ item.stack }}</p>
-              <p class="truncate text-sm font-medium text-highlighted">{{ item.service.name }}</p>
+            <UIcon name="i-lucide-triangle-alert" class="mt-0.5 size-4 shrink-0 text-warning" />
+            <div class="min-w-0 flex-1 space-y-1">
+              <p class="text-xs text-muted">{{ item.node.name }}</p>
+              <p class="text-sm font-medium text-highlighted">{{ item.stack.name }}</p>
+              <p
+                v-for="message in item.messages"
+                :key="message"
+                class="whitespace-pre-line break-words text-xs text-muted"
+              >
+                {{ message }}
+              </p>
             </div>
             <UBadge
-              :color="'restarting' === item.service.state ? 'warning' : 'error'"
-              variant="soft"
+              :color="0 === item.priority ? 'error' : 'warning'"
+              :icon="0 === item.priority ? 'i-lucide-circle-alert' : 'i-lucide-triangle-alert'"
+              variant="subtle"
               size="sm"
-              class="shrink-0"
+              >{{
+                0 === item.priority
+                  ? 'Unavailable'
+                  : 1 === item.priority
+                    ? 'Container'
+                    : 'Check failed'
+              }}</UBadge
             >
-              {{ item.problem }}
-            </UBadge>
-            <UIcon name="i-lucide-chevron-right" class="size-4 shrink-0 text-muted" />
           </NuxtLink>
         </li>
       </ul>
     </section>
 
-    <section v-if="unavailableNodes.length" aria-labelledby="unavailable-heading" class="space-y-3">
-      <h2 id="unavailable-heading" class="text-sm font-semibold text-highlighted">
-        Unavailable nodes
-      </h2>
-      <NuxtLink
-        v-for="node in unavailableNodes"
-        :key="node.id"
-        :to="`/nodes/${encodeURIComponent(node.id)}`"
-        class="app-card flex min-w-0 items-center gap-3 p-4 transition hover:bg-elevated focus-visible:outline-2 focus-visible:outline-primary"
-      >
-        <UIcon name="i-lucide-server-off" class="size-4 shrink-0 text-warning" />
-        <div class="min-w-0 flex-1">
-          <p class="truncate text-sm font-medium text-highlighted">{{ node.name }}</p>
-          <p class="text-xs text-muted">{{ node.error || 'Container status is unavailable.' }}</p>
-        </div>
-        <UBadge color="warning" variant="soft" size="sm" class="shrink-0">
-          {{ 'reconnecting' === node.connection ? 'Reconnecting' : 'Unavailable' }}
-        </UBadge>
-      </NuxtLink>
+    <section v-if="busyStacks.length" aria-labelledby="busy-heading" class="space-y-3">
+      <h2 id="busy-heading" class="text-sm font-semibold text-highlighted">In progress</h2>
+      <div class="flex flex-wrap gap-2">
+        <NuxtLink
+          v-for="item in busyStacks"
+          :key="`${item.node.id}/${item.stack.name}`"
+          :to="`/stacks/${encodeURIComponent(item.node.id)}/${encodeURIComponent(item.stack.name)}`"
+          class="rounded-md focus-visible:outline-2 focus-visible:outline-primary"
+        >
+          <UBadge
+            color="info"
+            variant="subtle"
+            icon="i-lucide-loader-circle"
+            :ui="{ leadingIcon: 'animate-spin' }"
+            >{{ item.node.name }} / {{ item.stack.name }}</UBadge
+          >
+        </NuxtLink>
+      </div>
     </section>
 
-    <div class="space-y-3">
-      <article
-        v-for="node in nodes"
-        :key="node.id"
-        :data-node-id="node.id"
-        class="app-card flex items-center gap-3 p-4"
-        :class="{
-          'opacity-50': node.id === draggedNode,
-          'ring-2 ring-primary': node.id === dropTarget && node.id !== draggedNode,
-        }"
-      >
-        <UTooltip
-          v-if="1 < nodes.length"
-          text="Drag to reorder, or use the up and down arrow keys."
-        >
-          <button
-            type="button"
-            class="shrink-0 cursor-grab touch-none rounded text-muted hover:text-highlighted focus-visible:outline-2 focus-visible:outline-primary active:cursor-grabbing disabled:cursor-wait"
-            :aria-label="`Reorder ${node.name}`"
-            :disabled="workspace.savingNodeOrder"
-            @pointerdown="startDrag($event, node.id)"
-            @pointermove="dragNode"
-            @pointerup="dropNode"
-            @pointercancel="endDrag"
-            @keydown.up.prevent="moveByKeyboard($event, node.id, -1)"
-            @keydown.down.prevent="moveByKeyboard($event, node.id, 1)"
+    <div class="min-w-0 space-y-6">
+      <section class="min-w-0 space-y-3" aria-labelledby="resources-heading">
+        <div class="flex items-center justify-between gap-2">
+          <h2
+            id="resources-heading"
+            class="inline-flex items-center gap-2 text-sm font-semibold text-highlighted"
           >
-            <UIcon name="i-lucide-grip-vertical" class="size-5" />
-          </button>
-        </UTooltip>
-        <UTooltip :text="node.name">
-          <NuxtLink
-            :to="`/nodes/${encodeURIComponent(node.id)}`"
-            class="min-w-0 flex-1 truncate text-sm font-semibold text-highlighted hover:text-primary hover:underline focus-visible:outline-2 focus-visible:outline-primary"
-            >{{ node.name }}</NuxtLink
+            <UIcon name="i-lucide-chart-no-axes-combined" class="size-4 text-primary" />
+            Node resources
+          </h2>
+        </div>
+        <div class="grid items-start gap-4 md:grid-cols-2">
+          <NodeResources
+            v-for="node in nodes"
+            :key="node.id"
+            :node="node"
+            :data-node-id="node.id"
+            :class="{
+              'opacity-50': node.id === draggedNode,
+              'ring-2 ring-primary': node.id === dropTarget && node.id !== draggedNode,
+            }"
           >
-        </UTooltip>
-        <UTooltip
-          v-if="node.health?.version"
-          :text="
-            node.health?.os && node.health.arch
-              ? `${node.health.os}/${node.health.arch}`
-              : undefined
-          "
+            <template #leading>
+              <UTooltip
+                v-if="1 < nodes.length"
+                text="Drag to reorder, or use the up and down arrow keys."
+              >
+                <button
+                  type="button"
+                  class="flex size-8 shrink-0 cursor-grab touch-none items-center justify-center rounded-md bg-elevated text-toned hover:text-primary focus-visible:outline-2 focus-visible:outline-primary active:cursor-grabbing disabled:cursor-wait"
+                  :aria-label="`Reorder ${node.name}`"
+                  :disabled="workspace.savingNodeOrder"
+                  @pointerdown="startDrag($event, node.id)"
+                  @pointermove="dragNode"
+                  @pointerup="dropNode"
+                  @pointercancel="endDrag"
+                  @keydown.up.prevent="moveByKeyboard($event, node.id, -1)"
+                  @keydown.down.prevent="moveByKeyboard($event, node.id, 1)"
+                >
+                  <UIcon name="i-lucide-grip-vertical" class="size-5" />
+                </button>
+              </UTooltip>
+            </template>
+          </NodeResources>
+        </div>
+      </section>
+
+      <section
+        v-if="updates.length"
+        class="app-card min-w-0 overflow-hidden"
+        aria-labelledby="updates-heading"
+      >
+        <div
+          class="flex flex-wrap items-center justify-between gap-2 border-b border-default px-4 py-3"
         >
-          <UBadge
-            color="neutral"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-tag"
-            class="hidden shrink-0 md:inline-flex"
-            tabindex="0"
-            >v{{ node.health.version }}</UBadge
-          >
-        </UTooltip>
-        <UTooltip v-if="node.error" :text="node.error">
-          <p class="min-w-0 max-w-64 truncate text-xs text-error" tabindex="0">
-            {{ node.error }}
-          </p>
-        </UTooltip>
-        <template v-else>
-          <UTooltip
-            :text="`${node.stacks.length} ${1 === node.stacks.length ? 'stack' : 'stacks'}`"
+          <h2
+            id="updates-heading"
+            class="inline-flex items-center gap-2 text-sm font-semibold text-highlighted"
           >
-            <UBadge
-              color="neutral"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-layers"
-              class="shrink-0 tabular-nums"
-              tabindex="0"
-            >
-              {{ node.stacks.length }}
-              <span class="hidden sm:inline">{{
-                1 === node.stacks.length ? 'stack' : 'stacks'
-              }}</span>
-            </UBadge>
-          </UTooltip>
-          <UTooltip
-            v-if="updatesCount(node.stacks)"
-            :text="`${updatesCount(node.stacks)} ${1 === updatesCount(node.stacks) ? 'stack' : 'stacks'} with updates`"
+            <UIcon name="i-lucide-package" class="size-4 text-primary" />Updates
+          </h2>
+        </div>
+        <ul class="divide-y divide-default">
+          <li
+            v-for="item in updates"
+            :key="`${item.node.id}/${item.stack.name}`"
+            class="space-y-3 px-4 py-3"
           >
-            <button
-              type="button"
-              class="shrink-0 rounded-md focus-visible:outline-2 focus-visible:outline-primary"
-              aria-label="View stacks with updates"
-              @click="filterStacks('updates')"
-            >
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <NuxtLink
+                :to="`/stacks/${encodeURIComponent(item.node.id)}/${encodeURIComponent(item.stack.name)}`"
+                class="min-w-0 text-sm font-medium text-highlighted hover:text-primary"
+                >{{ item.node.name }} / {{ item.stack.name }}</NuxtLink
+              >
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="outline"
+                icon="i-lucide-refresh-cw"
+                :loading="workspace.isCheckingImages(item.node.id, item.stack.name)"
+                :disabled="
+                  item.stack.busy || workspace.isCheckingImages(item.node.id, item.stack.name)
+                "
+                :aria-label="`Check updates for ${item.stack.name} on ${item.node.name}`"
+                @click="workspace.checkImages(item.node.id, item.stack.name)"
+                >Check</UButton
+              >
+            </div>
+            <div v-for="service in item.services" :key="service.name" class="space-y-1">
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="break-all text-xs font-medium">{{ service.service }}</span>
+                <UTooltip
+                  v-if="service.image_update"
+                  :text="imageUpdateTooltip(service.image_update)"
+                  :ui="{ text: 'whitespace-pre-line' }"
+                >
+                  <UBadge
+                    :icon="
+                      'available' === service.image_update.status
+                        ? 'i-lucide-package'
+                        : 'error' === service.image_update.status
+                          ? 'i-lucide-circle-alert'
+                          : 'i-lucide-loader-circle'
+                    "
+                    size="sm"
+                    variant="subtle"
+                    :color="
+                      'available' === service.image_update.status
+                        ? 'warning'
+                        : 'error' === service.image_update.status
+                          ? 'error'
+                          : 'info'
+                    "
+                    tabindex="0"
+                    >{{
+                      'available' === service.image_update.status
+                        ? 'Update'
+                        : 'error' === service.image_update.status
+                          ? 'Failed'
+                          : 'Checking'
+                    }}</UBadge
+                  >
+                </UTooltip>
+              </div>
+              <p class="break-all font-mono text-xs text-muted">{{ service.image }}</p>
+              <UTooltip
+                v-if="service.image_update?.checked_at"
+                :text="formatLogDate(service.image_update.checked_at, 'timestamp')"
+              >
+                <span class="inline-flex items-center gap-1 text-xs text-muted" tabindex="0"
+                  ><UIcon name="i-lucide-clock" class="size-3" /><time
+                    :datetime="service.image_update.checked_at"
+                    >{{ formatLogDate(service.image_update.checked_at, 'clock') }}</time
+                  ></span
+                >
+              </UTooltip>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+
+    <section
+      v-if="recentErrors.length || logsError"
+      class="app-card overflow-hidden"
+      aria-labelledby="recent-errors-heading"
+    >
+      <div
+        class="flex flex-wrap items-center justify-between gap-2 border-b border-default px-4 py-3"
+      >
+        <h2
+          id="recent-errors-heading"
+          class="inline-flex items-center gap-2 text-sm font-semibold text-highlighted"
+        >
+          <UIcon name="i-lucide-scroll-text" class="size-4 text-warning" />
+          <NuxtLink :to="logsLink()" class="hover:text-primary">Recent logs</NuxtLink>
+        </h2>
+      </div>
+      <UAlert v-if="logsError" color="warning" :title="logsError" class="m-3">
+        <template #actions
+          ><UButton size="xs" color="neutral" variant="outline" @click="refreshLogs"
+            >Retry</UButton
+          ></template
+        >
+      </UAlert>
+      <ul v-if="recentErrors.length" class="divide-y divide-default">
+        <li v-for="entry in recentErrors" :key="entry.id" :data-log-id="entry.id">
+          <NuxtLink :to="logsLink(entry)" class="block space-y-2 px-4 py-3 hover:bg-elevated">
+            <div class="flex flex-wrap items-center gap-2 text-xs text-muted">
               <UBadge
-                color="warning"
-                variant="soft"
+                :icon="
+                  'error' === getLogLevel(entry.level)
+                    ? 'i-lucide-circle-alert'
+                    : 'i-lucide-triangle-alert'
+                "
                 size="sm"
-                icon="i-lucide-circle-arrow-up"
-                class="tabular-nums"
-                >{{ updatesCount(node.stacks) }}</UBadge
+                variant="subtle"
+                :color="'error' === getLogLevel(entry.level) ? 'error' : 'warning'"
+                >{{ entry.level }}</UBadge
+              >
+              <UBadge icon="i-lucide-server" color="neutral" variant="subtle" size="sm">{{
+                logNodeLabel(entry)
+              }}</UBadge>
+              <UTooltip :text="formatLogDate(entry.timestamp, 'timestamp')"
+                ><time :datetime="entry.timestamp" tabindex="0">{{
+                  formatLogDate(entry.timestamp, 'clock')
+                }}</time></UTooltip
               >
-            </button>
-          </UTooltip>
-        </template>
-        <UBadge
-          :color="
-            'connected' === node.connection
-              ? 'success'
-              : 'paused' === node.connection
-                ? 'neutral'
-                : 'unavailable' === node.connection
-                  ? 'error'
-                  : 'warning'
-          "
-          variant="soft"
-          size="sm"
-          :icon="'paused' === node.connection ? 'i-lucide-pause' : 'i-lucide-network'"
-          class="shrink-0"
+            </div>
+            <p class="whitespace-pre-wrap break-words text-sm">{{ entry.message }}</p>
+          </NuxtLink>
+        </li>
+      </ul>
+      <div v-if="logsTruncated" class="border-t border-default px-4 py-2">
+        <UTooltip text="Older application logs have expired. Stack command output is live-only."
+          ><UBadge icon="i-lucide-history" color="neutral" variant="subtle" size="sm" tabindex="0"
+            >Limited history</UBadge
+          ></UTooltip
         >
-          {{
-            'connected' === node.connection
-              ? 'Connected'
-              : 'paused' === node.connection
-                ? 'Paused'
-                : 'unavailable' === node.connection
-                  ? 'Unavailable'
-                  : 'loading' === node.connection
-                    ? 'Connecting'
-                    : 'Reconnecting'
-          }}
-        </UBadge>
-        <UTooltip :text="`Check for updates on ${node.name}`">
-          <UButton
-            size="xs"
-            color="neutral"
-            variant="outline"
-            icon="i-lucide-refresh-cw"
-            class="shrink-0 gap-1 rounded-sm px-1.5 text-[10px]/3"
-            :ui="{ leadingIcon: 'size-3' }"
-            :aria-label="`Check for updates on ${node.name}`"
-            :loading="workspace.isCheckingImages(node.id)"
-            :disabled="
-              workspace.isCheckingImages(node.id) || node.loading || 'connected' !== node.connection
-            "
-            @click="workspace.checkImages(node.id)"
-          >
-            <span class="hidden sm:inline">Check for updates</span>
-          </UButton>
-        </UTooltip>
-      </article>
-    </div>
+      </div>
+    </section>
   </div>
 </template>
diff --git a/frontend/app/pages/logs.vue b/frontend/app/pages/logs.vue
index 85bb089..878c5ce 100644
--- a/frontend/app/pages/logs.vue
+++ b/frontend/app/pages/logs.vue
@@ -212,7 +212,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useHead } from '#app'
+import { useHead, useRoute } from '#app'
 import { useStorage } from '@vueuse/core'
 import UAlert from '@nuxt/ui/components/Alert.vue'
 import UButton from '@nuxt/ui/components/Button.vue'
@@ -238,6 +238,7 @@ import {
 } from '~/utils/logs'
 
 useHead({ title: 'Logs - DCompose' })
+const route = useRoute()
 const {
   entries,
   observedNodes,
@@ -271,12 +272,29 @@ const expanded = ref(new Set<number>())
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 let mounted = false
 const storedLevels = useStorage<Array<LogLevel>>('logs_levels', [...logLevels])
+const linkedLevels = ref<Array<LogLevel> | null>(null)
 const selectedLevels = computed<Array<LogLevel>>({
-  get: () => normalizeLogLevels(storedLevels.value),
+  get: () => linkedLevels.value ?? normalizeLogLevels(storedLevels.value),
   set: (value) => {
-    storedLevels.value = normalizeLogLevels(value)
+    if (null === linkedLevels.value) {
+      storedLevels.value = normalizeLogLevels(value)
+    } else {
+      linkedLevels.value = normalizeLogLevels(value)
+    }
   },
 })
+watch(
+  () => route.query,
+  (params) => {
+    linkedLevels.value =
+      'string' === typeof params.levels
+        ? normalizeLogLevels(params.levels.split(',').map((level) => level.trim()))
+        : null
+    selectedNode.value = 'string' === typeof params.node && params.node ? params.node : 'all'
+    query.value = 'string' === typeof params.search ? params.search : ''
+  },
+  { immediate: true },
+)
 const levelItems = logLevels.map((value) => ({
   label: value.charAt(0).toUpperCase() + value.slice(1),
   value,
diff --git a/frontend/app/utils/stacks.ts b/frontend/app/utils/stacks.ts
index 5727ee9..c95fc11 100644
--- a/frontend/app/utils/stacks.ts
+++ b/frontend/app/utils/stacks.ts
@@ -158,7 +158,7 @@ export const parseStackStats = (data: string): StackStats => {
   throw new Error("Couldn't read stack resource stats.")
 }
 
-const parseBytes = (value: string): number => {
+export const parseStatBytes = (value: string): number => {
   const match = value.trim().match(/^(\d+(?:\.\d+)?)\s*([kmgtp]?i?b)$/i)
   if (!match) {
     return Number.NaN
@@ -178,20 +178,23 @@ const formatNumber = (value: number): string =>
 
 const sumIO = (values: Array<string>): string => {
   const pairs = values.map((value) => value.split('/'))
-  const first = sum(pairs.map((pair) => parseBytes(pair[0] ?? '')))
-  const second = sum(pairs.map((pair) => parseBytes(pair[1] ?? '')))
+  const first = sum(pairs.map((pair) => parseStatBytes(pair[0] ?? '')))
+  const second = sum(pairs.map((pair) => parseStatBytes(pair[1] ?? '')))
   return Number.isFinite(first) && Number.isFinite(second)
     ? `${formatBytes(first)} / ${formatBytes(second)}`
     : '-'
 }
 
-export const aggregateStackStats = (containers: Array<ContainerStats>): StackStatsTotals => {
-  const cpu = sum(containers.map((container) => Number.parseFloat(container.cpu)))
+export const aggregateStackStats = (
+  containers: Array<ContainerStats>,
+  cpuCount = 1,
+): StackStatsTotals => {
+  const cpu = sum(containers.map((container) => Number.parseFloat(container.cpu))) / cpuCount
   return {
     cpu: Number.isFinite(cpu) ? `${formatNumber(cpu)}%` : '-',
     // Limits can refer to the same host memory, so sum usage, not limits or percentages.
     memory: formatBytes(
-      sum(containers.map((container) => parseBytes(container.memory.split('/')[0] ?? ''))),
+      sum(containers.map((container) => parseStatBytes(container.memory.split('/')[0] ?? ''))),
     ),
     network_io: sumIO(containers.map((container) => container.network_io)),
     block_io: sumIO(containers.map((container) => container.block_io)),
diff --git a/frontend/tests/logs-ui.test.ts b/frontend/tests/logs-ui.test.ts
index 7670b3f..aab7cc7 100644
--- a/frontend/tests/logs-ui.test.ts
+++ b/frontend/tests/logs-ui.test.ts
@@ -3,6 +3,7 @@ import { compileScript, parse, registerTS } from '@vue/compiler-sfc'
 import * as ts from 'typescript'
 import * as vue from 'vue'
 import type { Component } from 'vue'
+import type { LocationQuery } from 'vue-router'
 import type { LogEntry, LogFilters, LogLevel } from '../app/types'
 import * as logs from '../app/utils/logs'
 
@@ -156,8 +157,11 @@ const entry: LogEntry = {
   },
   source: { file: 'compose.go', function: 'Deploy', line: 17 },
 }
-const mountLogs = async () => {
+const mountLogs = async (
+  options: { query?: LocationQuery; storedLevels?: Array<LogLevel> } = {},
+) => {
   const storage = new Map<string, vue.Ref<boolean | Array<LogLevel>>>()
+  const route = vue.reactive({ query: options.query ?? {} })
   const state = {
     entries: vue.ref<Array<LogEntry>>([entry]),
     observedNodes: vue.ref(new Map([['kitchen', 'Kitchen']])),
@@ -173,10 +177,10 @@ const mountLogs = async () => {
   }
   const copied = mock(async (_text: string) => {})
   const dependencies: Record<string, unknown> = {
-    '#app': { useHead: () => {} },
+    '#app': { useHead: () => {}, useRoute: () => route },
     '@vueuse/core': {
       useStorage: (key: string, value: boolean | Array<LogLevel>) => {
-        const stored = vue.ref(value)
+        const stored = vue.ref('logs_levels' === key ? (options.storedLevels ?? value) : value)
         storage.set(key, stored)
         return stored
       },
@@ -215,7 +219,7 @@ const mountLogs = async () => {
   app.mount(root)
   apps.push(app)
   await vue.nextTick()
-  return { root, state, copied, storage, app }
+  return { root, state, copied, storage, app, route }
 }
 const find = (root: TestNode, predicate: (element: TestNode) => boolean): TestNode => {
   const result = flatten(root).find(predicate)
@@ -365,6 +369,77 @@ test('refresh pending filters', async () => {
   expect(state.refresh).not.toHaveBeenCalled()
 })
 
+test('query filters', async () => {
+  jest.useFakeTimers()
+  const { root, state, storage } = await mountLogs({
+    query: { levels: 'warning,unknown,error,error', node: 'kitchen', search: 'failure' },
+    storedLevels: ['info'],
+  })
+  expect(state.search).toHaveBeenCalledTimes(1)
+  expect(state.search).toHaveBeenLastCalledWith({
+    levels: ['warning', 'error'],
+    node: 'kitchen',
+    search: 'failure',
+  })
+  expect(find(root, (element) => 'select-menu' === element.type).props.modelValue).toEqual([
+    'warning',
+    'error',
+  ])
+  expect(find(root, (element) => 'select' === element.type).props.modelValue).toBe('kitchen')
+  expect(find(root, (element) => 'input' === element.type).props.modelValue).toBe('failure')
+  expect(storage.get('logs_levels')?.value).toEqual(['info'])
+  trigger(
+    find(root, (element) => 'select-menu' === element.type),
+    'onUpdate:modelValue',
+    ['error'],
+  )
+  await vue.nextTick()
+  jest.advanceTimersByTime(300)
+  expect(state.search).toHaveBeenLastCalledWith({
+    levels: ['error'],
+    node: 'kitchen',
+    search: 'failure',
+  })
+  expect(storage.get('logs_levels')?.value).toEqual(['info'])
+})
+
+test('query defaults', async () => {
+  const { state } = await mountLogs({ query: { node: 'server' }, storedLevels: ['debug', 'info'] })
+  expect(state.search).toHaveBeenLastCalledWith({
+    levels: ['debug', 'info'],
+    node: 'server',
+    search: '',
+  })
+  const { state: unsupported } = await mountLogs({
+    query: { levels: ['warning', 'error'], node: null, search: ['first', 'second'] },
+    storedLevels: ['info'],
+  })
+  expect(unsupported.search).toHaveBeenLastCalledWith({ levels: ['info'], node: '', search: '' })
+})
+
+test('query changes', async () => {
+  jest.useFakeTimers()
+  const { route, state, storage } = await mountLogs({ storedLevels: ['info'] })
+  route.query = { levels: 'warning,error', node: 'garage' }
+  await vue.nextTick()
+  jest.advanceTimersByTime(300)
+  expect(state.search).toHaveBeenLastCalledWith({
+    levels: ['warning', 'error'],
+    node: 'garage',
+    search: '',
+  })
+  route.query = { levels: 'error', search: 'retry' }
+  await vue.nextTick()
+  jest.advanceTimersByTime(300)
+  expect(state.search).toHaveBeenLastCalledWith({ levels: ['error'], node: '', search: 'retry' })
+  route.query = {}
+  await vue.nextTick()
+  jest.advanceTimersByTime(300)
+  expect(state.search).toHaveBeenLastCalledWith({ levels: ['info'], node: '', search: '' })
+  expect(storage.get('logs_levels')?.value).toEqual(['info'])
+  expect(state.search).toHaveBeenCalledTimes(4)
+})
+
 test('detail data and copy', async () => {
   const { root, copied } = await mountLogs()
   trigger(
diff --git a/frontend/tests/stack-ui.test.ts b/frontend/tests/stack-ui.test.ts
index e1c1cca..4d13dfe 100644
--- a/frontend/tests/stack-ui.test.ts
+++ b/frontend/tests/stack-ui.test.ts
@@ -5,8 +5,12 @@ import * as vue from 'vue'
 import type { Component } from 'vue'
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type {
+  ContainerStats,
   EditorProps,
   GenericError,
+  LogEntry,
+  LogFilters,
+  NodeInfo,
   StackEvent,
   RegistriesResponse,
   RegistryCredential,
@@ -185,13 +189,10 @@ afterEach(() => {
 })
 
 test('overview attention', async () => {
-  let mobile = false
   let confirmation = false
   const confirm = mock(async () => ({ status: confirmation }))
-  Object.defineProperty(globalThis, 'window', {
-    value: { matchMedia: () => ({ matches: mobile }) },
-    configurable: true,
-  })
+  const logEntries = vue.ref<Array<LogEntry>>([])
+  const searchLogs = mock(async (_filters: LogFilters) => {})
   const item = vue.reactive<WorkspaceNode>({
     id: 'office',
     name: 'Office',
@@ -229,6 +230,7 @@ test('overview attention', async () => {
     sidebarOpen: false,
     isCheckingImages: () => false,
     savingNodeOrder: false,
+    moveNode: mock(async (_id: string, _target: string) => {}),
     load: () => {},
     checkImages: mock(async () => {}),
   })
@@ -243,9 +245,28 @@ test('overview attention', async () => {
     '@nuxt/ui/components/Button.vue': { default: stub('button') },
     '@nuxt/ui/components/Icon.vue': { default: stub('icon') },
     '~/components/StatCard.vue': { default: stub('stat') },
+    '~/components/NodeResources.vue': {
+      default: vue.defineComponent({
+        setup:
+          (_, { slots }) =>
+          () =>
+            vue.h('node-resource', slots.leading?.()),
+      }),
+    },
     '~/utils/stacks': await import('../app/utils/stacks'),
+    '~/utils/logs': await import('../app/utils/logs'),
     '~/store/workspace': store,
     '~/composables/useDialog': { useDialog: () => ({ confirmDialog: confirm }) },
+    '~/composables/useLogs': {
+      useLogs: () => ({
+        entries: logEntries,
+        loading: vue.ref(false),
+        error: vue.ref(''),
+        truncated: vue.ref(false),
+        search: searchLogs,
+        refresh: mock(async () => {}),
+      }),
+    },
   })
   const wrapper = await loadComponent('../../layouts/workspace', {
     pinia: { storeToRefs: vue.toRefs },
@@ -266,22 +287,56 @@ test('overview attention', async () => {
     )
     return section ? flatten(section).filter((element) => 'li' === element.type) : []
   }
-  const attention = () =>
-    flatten(root).find((element) => 'attention-heading' === element.props['aria-labelledby'])
-  const unavailable = () =>
-    flatten(root).find((element) => 'unavailable-heading' === element.props['aria-labelledby'])
+  const count = (icon: string) =>
+    flatten(root).find((element) => 'stat' === element.type && icon === element.props.icon)?.props
+      .value
   const stack = item.stacks[0]!
   const service = stack.services[0]!
   expect(attentionRows()).toHaveLength(1)
   expect(flatten(attentionRows()[0]!).find((element) => 'a' === element.type)?.props.to).toBe(
     '/stacks/office/app',
   )
-  expect(unavailable()).toBeUndefined()
+  expect(count('i-lucide-triangle-alert')).toBe(1)
+  expect(count('i-lucide-server')).toBe('1 / 1')
+  expect(searchLogs).toHaveBeenCalledWith({ levels: ['warning', 'error'], node: '', search: '' })
+  for (const id of ['updates-heading', 'busy-heading', 'recent-errors-heading']) {
+    expect(flatten(root).some((element) => id === element.props['aria-labelledby'])).toBe(false)
+  }
+
+  stack.services.push({ ...service, name: 'app-worker-1', service: 'worker', state: 'restarting' })
+  await vue.nextTick()
+  expect(attentionRows()).toHaveLength(1)
+  expect(count('i-lucide-triangle-alert')).toBe(1)
+  stack.services.splice(1)
+  item.stacks.push({
+    name: 'unreadable',
+    status: 'unknown',
+    loading: false,
+    services: [],
+    error: 'runtime-failure',
+  })
+  await vue.nextTick()
+  expect(attentionRows()).toHaveLength(2)
+  expect(flatten(attentionRows()[0]!).find((element) => 'a' === element.type)?.props.to).toBe(
+    '/stacks/office/unreadable',
+  )
+  item.stacks.pop()
 
   service.health = 'healthy'
   await vue.nextTick()
   expect(attentionRows()).toHaveLength(0)
-  expect(attention()).toBeUndefined()
+  expect(
+    flatten(root).some((element) => 'attention-heading' === element.props['aria-labelledby']),
+  ).toBe(false)
+  stack.error = 'runtime-error-sentinel'
+  await vue.nextTick()
+  expect(attentionRows()).toHaveLength(1)
+  expect(
+    flatten(attentionRows()[0]!)
+      .map((element) => element.text)
+      .join(' '),
+  ).toContain(stack.error)
+  stack.error = ''
   service.state = 'restarting'
   await vue.nextTick()
   expect(attentionRows()).toHaveLength(1)
@@ -294,11 +349,16 @@ test('overview attention', async () => {
   expect(attentionRows()).toHaveLength(1)
 
   for (const connection of ['unavailable', 'reconnecting'] as const) {
+    stack.busy = true
+    service.image_update = { status: 'available' }
     item.connection = connection
     await vue.nextTick()
-    expect(attentionRows()).toHaveLength(0)
-    expect(unavailable()).toBeDefined()
-    expect(flatten(unavailable()!).find((element) => 'a' === element.type)?.props.to).toBe(
+    expect(attentionRows()).toHaveLength(1)
+    expect(count('i-lucide-server')).toBe('0 / 1')
+    expect(count('i-lucide-triangle-alert')).toBe(0)
+    expect(count('i-lucide-circle-arrow-up')).toBe(0)
+    expect(count('i-lucide-loader-circle')).toBe(0)
+    expect(flatten(attentionRows()[0]!).find((element) => 'a' === element.type)?.props.to).toBe(
       '/nodes/office',
     )
   }
@@ -306,12 +366,14 @@ test('overview attention', async () => {
   item.paused = true
   await vue.nextTick()
   expect(attentionRows()).toHaveLength(0)
-  expect(unavailable()).toBeUndefined()
+  expect(count('i-lucide-server')).toBe('0 / 1')
   item.paused = false
   item.connection = 'connected'
   await vue.nextTick()
   expect(attentionRows()).toHaveLength(1)
-  expect(unavailable()).toBeUndefined()
+  expect(count('i-lucide-server')).toBe('1 / 1')
+  expect(count('i-lucide-circle-arrow-up')).toBe(1)
+  expect(count('i-lucide-loader-circle')).toBe(1)
 
   service.state = 'exited'
   service.exit_code = 23
@@ -321,22 +383,110 @@ test('overview attention', async () => {
   await vue.nextTick()
   expect(attentionRows()).toHaveLength(0)
 
-  const filters = flatten(root).filter(
-    (element) => 'button' === element.type && undefined !== element.props['aria-pressed'],
+  const updates = () => {
+    const section = flatten(root).find(
+      (element) => 'updates-heading' === element.props['aria-labelledby'],
+    )
+    return section ? flatten(section).filter((element) => 'li' === element.type) : []
+  }
+  expect(updates()).toHaveLength(1)
+  const checkStack = flatten(updates()[0]!).find((element) => 'button' === element.type)
+  stack.busy = false
+  await vue.nextTick()
+  await trigger(checkStack, 'onClick')
+  expect(workspace.checkImages).toHaveBeenLastCalledWith('office', 'app')
+  workspace.checkImages.mockClear()
+  for (const status of ['checking', 'error', 'current', 'unsupported'] as const) {
+    service.image_update = { status, reason: 'registry_error' }
+    await vue.nextTick()
+    expect(count('i-lucide-circle-arrow-up')).toBe(0)
+    expect(updates()).toHaveLength(['checking', 'error'].includes(status) ? 1 : 0)
+    expect(attentionRows()).toHaveLength('error' === status ? 1 : 0)
+  }
+  expect(
+    flatten(root).some((element) => 'updates-heading' === element.props['aria-labelledby']),
+  ).toBe(false)
+
+  workspace.nodes.push({ ...item, id: 'garage', name: 'Garage', stacks: [] })
+  await vue.nextTick()
+  const resource = flatten(root).find(
+    (element) => 'node-resource' === element.type && 'office' === element.props['data-node-id'],
   )
-  expect(filters).toHaveLength(4)
-  for (const [index, status] of ['running', 'stopped', 'draft', 'updates'].entries()) {
-    workspace.stackSearch = 'previous-search'
-    mobile = 0 === index % 2
-    const button = filters[index]!
-    await trigger(button, 'onClick')
-    await vue.nextTick()
-    expect(workspace.stackFilter).toBe(status)
-    expect(workspace.stackSearch).toBe('')
-    expect(workspace.sidebarOpen).toBe(mobile)
-    expect(button.props['aria-pressed']).toBe(true)
+  const grip = resource ? flatten(resource).find((element) => 'button' === element.type) : undefined
+  expect(grip).toBeDefined()
+  const originalElement = Object.getOwnPropertyDescriptor(globalThis, 'HTMLElement')
+  const originalDocument = Object.getOwnPropertyDescriptor(globalThis, 'document')
+  class DragHandle {
+    setPointerCapture = mock((_id: number) => {})
+    focus = mock(() => {})
+  }
+  const handle = new DragHandle()
+  Object.defineProperty(globalThis, 'HTMLElement', { value: DragHandle, configurable: true })
+  Object.defineProperty(globalThis, 'document', {
+    value: { elementFromPoint: () => ({ closest: () => ({ dataset: { nodeId: 'garage' } }) }) },
+    configurable: true,
+  })
+  try {
+    await trigger(grip, 'onPointerdown', { button: 0, currentTarget: handle, pointerId: 1 })
+    await trigger(grip, 'onPointermove', { clientX: 1, clientY: 1 })
+    await trigger(grip, 'onPointerup')
+    expect(workspace.moveNode).toHaveBeenCalledWith('office', 'garage')
+    expect(handle.setPointerCapture).toHaveBeenCalledWith(1)
+    const callbacks: Array<unknown> = Array.isArray(grip?.props.onKeydown)
+      ? grip.props.onKeydown
+      : [grip?.props.onKeydown]
+    for (const callback of callbacks) {
+      if ('function' === typeof callback) {
+        await callback({ key: 'ArrowDown', currentTarget: handle, preventDefault: mock(() => {}) })
+      }
+    }
+    expect(workspace.moveNode).toHaveBeenCalledTimes(2)
+    expect(handle.focus).toHaveBeenCalledTimes(1)
+  } finally {
+    for (const [key, descriptor] of [
+      ['HTMLElement', originalElement],
+      ['document', originalDocument],
+    ] as const) {
+      if (descriptor) {
+        Object.defineProperty(globalThis, key, descriptor)
+      } else {
+        Reflect.deleteProperty(globalThis, key)
+      }
+    }
   }
 
+  workspace.nodes[1]!.connection = 'unavailable'
+  workspace.nodes.push(
+    { ...item, id: 'remote', name: 'Remote', connection: 'unavailable', stacks: [] },
+    { ...item, id: 'paused', name: 'Paused', connection: 'paused', paused: true, stacks: [] },
+  )
+  await vue.nextTick()
+  expect(count('i-lucide-server')).toBe('1 / 4')
+  expect(attentionRows()).toHaveLength(2)
+  workspace.nodes[1]!.connection = 'connected'
+  workspace.nodes[2]!.connection = 'connected'
+  await vue.nextTick()
+  expect(count('i-lucide-server')).toBe('3 / 4')
+  expect(attentionRows()).toHaveLength(0)
+  workspace.nodes.splice(2)
+
+  logEntries.value = Array.from({ length: 6 }, (_, index) => ({
+    id: index + 1,
+    timestamp: '2026-11-11T10:00:00Z',
+    level: 'error',
+    logger: 'agent',
+    message: `failure-sentinel-${index}`,
+    rendered: '',
+    fields: { node_id: item.id, node_name: item.name },
+  }))
+  await vue.nextTick()
+  const logRows = flatten(root).filter((element) => undefined !== element.props['data-log-id'])
+  expect(logRows.map((element) => element.props['data-log-id'])).toEqual([6, 5, 4, 3, 2])
+  expect(flatten(logRows[0]!).find((element) => 'a' === element.type)?.props.to).toEqual({
+    path: '/logs',
+    query: { levels: 'warning,error', node: 'office' },
+  })
+
   const check = flatten(root).find(
     (element) =>
       'button' === element.type &&
@@ -2418,3 +2568,285 @@ test.each(['stack', 'node'] as const)('%s page alerts', async (page) => {
     expect(navigate).toHaveBeenCalledWith('/')
   }
 })
+
+const resourceContainer = (name: string, cpu: string, memory: string): ContainerStats => ({
+  id: `private-${name}`,
+  name,
+  cpu,
+  memory: `${memory} / 8GiB`,
+  memory_percent: '0%',
+  network_io: '0B / 0B',
+  block_io: '0B / 0B',
+  pids: '1',
+})
+
+const resourceInfo = (containers: Array<ContainerStats>): NodeInfo => ({
+  runtime: {
+    name: 'host',
+    version: '1',
+    operating_system: 'Linux',
+    architecture: 'amd64',
+    kernel_version: '1',
+    cpus: 4,
+    memory_bytes: 8 * 1024 ** 3,
+    containers: containers.length,
+    containers_running: containers.length,
+    containers_stopped: 0,
+    containers_paused: 0,
+    images: 0,
+    storage_driver: 'overlay',
+  },
+  containers,
+  checked_at: '2026-11-11T12:00:00Z',
+})
+
+describe('Node resources', () => {
+  const cleanups: Array<() => void> = []
+  afterEach(() => {
+    for (const cleanup of cleanups.splice(0)) {
+      cleanup()
+    }
+  })
+
+  const mountResources = async (connection: WorkspaceNode['connection'] = 'connected') => {
+    const originalDocument = Object.getOwnPropertyDescriptor(globalThis, 'document')
+    const originalInterval = globalThis.setInterval
+    const originalClear = globalThis.clearInterval
+    const visibility = Object.assign(new EventTarget(), { hidden: false })
+    const intervals = new Map<number, () => void>()
+    let intervalId = 0
+    const delays: Array<number> = []
+    Object.defineProperty(globalThis, 'document', { value: visibility, configurable: true })
+    Object.defineProperty(globalThis, 'setInterval', {
+      value: (callback: () => void, delay: number) => {
+        delays.push(delay)
+        intervals.set(++intervalId, callback)
+        return intervalId
+      },
+      configurable: true,
+    })
+    Object.defineProperty(globalThis, 'clearInterval', {
+      value: (id: number) => intervals.delete(id),
+      configurable: true,
+    })
+    const item = vue.reactive<WorkspaceNode>({
+      id: 'node',
+      name: 'Node',
+      public_host: '',
+      stacks: [],
+      health: null,
+      connection,
+      error: '',
+      loading: false,
+    })
+    const calls: Array<{
+      url: string
+      signal: AbortSignal | null | undefined
+      reply: ReturnType<typeof Promise.withResolvers<Response>>
+    }> = []
+    const notify = mock(() => {})
+    const component = await loadComponent('../NodeResources', {
+      '#components': { NuxtLink: stub('a') },
+      '@nuxt/ui/components/Alert.vue': {
+        default: vue.defineComponent({
+          setup:
+            (_, { slots }) =>
+            () =>
+              vue.h('alert', [slots.default?.(), slots.actions?.()]),
+        }),
+      },
+      '@nuxt/ui/components/Badge.vue': { default: stub('badge') },
+      '@nuxt/ui/components/Button.vue': { default: stub('button') },
+      '@nuxt/ui/components/Icon.vue': { default: stub('icon') },
+      '~/utils/node': await import('../app/utils/node'),
+      '~/utils/stacks': await import('../app/utils/stacks'),
+      '~/utils': {
+        request: (url: string, options: RequestInit) => {
+          const reply = Promise.withResolvers<Response>()
+          calls.push({ url, signal: options.signal, reply })
+          return reply.promise
+        },
+        parse_api_response: (response: Response) => response.json(),
+        notification: notify,
+      },
+    })
+    const root = node('root')
+    const app = renderer.createApp({ setup: () => () => vue.h(component, { node: item }) })
+    app.mount(root)
+    let mounted = true
+    const unmount = () => {
+      if (mounted) {
+        app.unmount()
+        mounted = false
+      }
+    }
+    cleanups.push(() => {
+      unmount()
+      if (originalDocument) {
+        Object.defineProperty(globalThis, 'document', originalDocument)
+      } else {
+        Reflect.deleteProperty(globalThis, 'document')
+      }
+      Object.defineProperty(globalThis, 'setInterval', {
+        value: originalInterval,
+        configurable: true,
+      })
+      Object.defineProperty(globalThis, 'clearInterval', {
+        value: originalClear,
+        configurable: true,
+      })
+    })
+    return {
+      root,
+      item,
+      calls,
+      notify,
+      intervals,
+      delays,
+      unmount,
+      tick: () => {
+        for (const callback of [...intervals.values()]) {
+          callback()
+        }
+      },
+      visible: (visible: boolean) => {
+        visibility.hidden = !visible
+        visibility.dispatchEvent(new Event('visibilitychange'))
+      },
+      respond: async (index: number, payload: NodeInfo | GenericError, status = 200) => {
+        calls[index]!.reply.resolve(Response.json(payload, { status }))
+        await new Promise<void>((resolve) => setImmediate(resolve))
+        await vue.nextTick()
+      },
+    }
+  }
+
+  test('unit-aware ranking', async () => {
+    const view = await mountResources()
+    const containers = [
+      resourceContainer('small', '30%', '900MiB'),
+      resourceContainer('large', '20%', '1GiB'),
+      resourceContainer('decimal', '10%', '1GB'),
+      resourceContainer('fourth', '5%', '2MiB'),
+      resourceContainer('loading', '99%', '8GiB'),
+      resourceContainer('failed', '99%', '8GiB'),
+      resourceContainer('unmanaged', '200%', '1GiB'),
+    ]
+    view.item.stacks = containers.slice(0, -1).map((container) => ({
+      name: container.name,
+      status: 'running',
+      loading: 'loading' === container.name,
+      error: 'failed' === container.name ? 'failure' : '',
+      services: [
+        {
+          name: container.name,
+          service: 'web',
+          image: 'nginx',
+          state: 'running',
+          health: '',
+          ports: '',
+        },
+      ],
+    }))
+    const sample = resourceInfo(containers)
+    sample.runtime.cpus = 8
+    await view.respond(0, sample)
+    const links = () =>
+      flatten(view.root)
+        .filter((element) => 'a' === element.type)
+        // The test renderer inserts moved nodes without removing their old position.
+        .filter((element, index, elements) => index === elements.lastIndexOf(element))
+        .slice(1)
+        .map((element) => element.props.to)
+    expect(links()).toEqual(['/stacks/node/small', '/stacks/node/large', '/stacks/node/decimal'])
+    const metrics = (icon: string) => [
+      ...new Set(
+        flatten(view.root).filter(
+          (element) => 'badge' === element.type && icon === element.props.icon,
+        ),
+      ),
+    ]
+    expect(metrics('i-lucide-cpu')).toHaveLength(3)
+    expect(metrics('i-lucide-memory-stick')).toHaveLength(3)
+    const toggles = flatten(view.root).filter(
+      (element) => undefined !== element.props['aria-pressed'],
+    )
+    await trigger(toggles[1], 'onClick')
+    await vue.nextTick()
+    expect(links()).toEqual(['/stacks/node/large', '/stacks/node/decimal', '/stacks/node/small'])
+    expect(metrics('i-lucide-cpu')).toHaveLength(3)
+    expect(metrics('i-lucide-memory-stick')).toHaveLength(3)
+    const values = flatten(view.root).map((element) => element.text)
+    expect(values).toContain('57.88%')
+    expect(
+      metrics('i-lucide-cpu')
+        .flatMap(flatten)
+        .map((element) => element.text),
+    ).toContain('3.75%')
+    expect(values.some((value) => value.includes('private-'))).toBe(false)
+  })
+
+  test('offline aborts and clears samples', async () => {
+    const view = await mountResources('paused')
+    expect(view.calls).toHaveLength(0)
+    view.item.connection = 'connected'
+    await vue.nextTick()
+    expect(view.calls).toHaveLength(1)
+    view.item.id = 'other'
+    await vue.nextTick()
+    expect(view.calls[0]?.signal?.aborted).toBe(true)
+    expect(view.calls[1]?.url).toBe('/api/nodes/other/info')
+    await view.respond(0, resourceInfo([resourceContainer('old', '99%', '1GiB')]))
+    expect(flatten(view.root).some((element) => 'dd' === element.type)).toBe(false)
+    await view.respond(1, resourceInfo([]))
+    expect(flatten(view.root).some((element) => 'dd' === element.type)).toBe(true)
+    view.tick()
+    view.item.connection = 'unavailable'
+    await vue.nextTick()
+    expect(view.calls[2]?.signal?.aborted).toBe(true)
+    expect(flatten(view.root).some((element) => 'dd' === element.type)).toBe(false)
+    expect(view.intervals.size).toBe(0)
+    await view.respond(2, resourceInfo([]))
+    expect(view.notify).not.toHaveBeenCalled()
+  })
+
+  test('failed refresh keeps prior sample', async () => {
+    const view = await mountResources()
+    await view.respond(0, resourceInfo([resourceContainer('live', '1%', '1GiB')]))
+    const sampled = () => flatten(view.root).map((element) => element.text)
+    view.tick()
+    await view.respond(1, { error: { code: 503, message: 'failure-sentinel' } }, 503)
+    expect(sampled()).toContain('0.25%')
+    expect(view.notify).toHaveBeenCalledTimes(1)
+    const retry = flatten(view.root).find((element) => 'i-lucide-refresh-cw' === element.props.icon)
+    const pending = trigger(retry, 'onClick')
+    await view.respond(2, resourceInfo([resourceContainer('live', '2%', '1GiB')]))
+    await pending
+    expect(sampled()).toContain('0.5%')
+    expect(flatten(view.root).some((element) => 'i-lucide-refresh-cw' === element.props.icon)).toBe(
+      false,
+    )
+  })
+
+  test('visible refresh and cleanup', async () => {
+    const view = await mountResources()
+    expect(view.delays).toEqual([30_000])
+    view.tick()
+    expect(view.calls).toHaveLength(1)
+    await view.respond(0, resourceInfo([]))
+    view.visible(false)
+    expect(view.intervals.size).toBe(0)
+    view.tick()
+    expect(view.calls).toHaveLength(1)
+    view.visible(true)
+    expect(view.calls).toHaveLength(2)
+    expect(view.intervals.size).toBe(1)
+    view.unmount()
+    expect(view.calls[1]?.signal?.aborted).toBe(true)
+    expect(view.intervals.size).toBe(0)
+    view.visible(true)
+    expect(view.calls).toHaveLength(2)
+    await view.respond(1, resourceInfo([]))
+    expect(view.notify).not.toHaveBeenCalled()
+  })
+})
diff --git a/frontend/tests/stacks.test.ts b/frontend/tests/stacks.test.ts
index 91fee25..509119b 100644
--- a/frontend/tests/stacks.test.ts
+++ b/frontend/tests/stacks.test.ts
@@ -189,6 +189,15 @@ describe('Stack stats', () => {
     })
   })
 
+  test.each([
+    ['49.57%', 30, '1.65%'],
+    ['300%', 30, '10%'],
+    ['49.57%', 1, '49.57%'],
+    ['49.57%', 0, '-'],
+  ])('node CPU %s / %i', (cpu, cores, expected) => {
+    expect(aggregateStackStats([{ ...container, cpu }], cores).cpu).toBe(expected)
+  })
+
   test('unavailable totals', () => {
     expect(
       aggregateStackStats([

From fb202fe0129d9a81a834a04e615e306354820513 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Thu, 12 Nov 2026 07:49:57 +0300
Subject: [PATCH 3/3] feat: add auto-update indicators

---
 frontend/app/components/stacks/StackList.vue | 11 +++
 frontend/app/pages/index.vue                 |  4 +-
 frontend/app/pages/stacks/[node]/[stack].vue | 23 +++++++
 frontend/tests/stack-ui.test.ts              | 70 ++++++++++++++++++++
 4 files changed, 106 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/stacks/StackList.vue b/frontend/app/components/stacks/StackList.vue
index 0654b52..20c5565 100644
--- a/frontend/app/components/stacks/StackList.vue
+++ b/frontend/app/components/stacks/StackList.vue
@@ -15,6 +15,8 @@ const route = useRoute()
 const collapsed = defineModel<Record<string, boolean>>('collapsed', { required: true })
 const hasImageUpdates = (stack: StackRuntime) =>
   stack.services.some((service) => 'available' === service.image_update?.status)
+const autoUpdateCount = (stack: StackRuntime) =>
+  stack.services.filter((service) => service.auto_update).length
 const filteredNodes = computed(() =>
   props.nodes.map((node) => {
     const stacks = node.stacks
@@ -173,6 +175,15 @@ const selected = (node: string, stack: string) =>
               :class="stack.loading ? 'animate-pulse bg-muted' : statusClass(stack.status)"
             />
             <span class="min-w-0 flex-1 truncate">{{ stack.name }}</span>
+            <UTooltip
+              v-if="autoUpdateCount(stack)"
+              :text="`${autoUpdateCount(stack)} of ${stack.services.length} containers auto-update`"
+            >
+              <span class="inline-flex shrink-0 text-primary" tabindex="0">
+                <UIcon name="i-lucide-bot" class="size-3.5" />
+                <span class="sr-only">Auto-updates</span>
+              </span>
+            </UTooltip>
             <UTooltip v-if="hasImageUpdates(stack)" text="Updates available">
               <span class="inline-flex shrink-0 text-warning">
                 <UIcon name="i-lucide-circle-arrow-up" class="size-3.5" />
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index e927c13..9582764 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -292,7 +292,7 @@ useHead({ title: 'Overview' })
               <p
                 v-for="message in item.messages"
                 :key="message"
-                class="whitespace-pre-line break-words text-xs text-muted"
+                class="whitespace-pre-line wrap-break-word text-xs text-muted"
               >
                 {{ message }}
               </p>
@@ -524,7 +524,7 @@ useHead({ title: 'Overview' })
                 }}</time></UTooltip
               >
             </div>
-            <p class="whitespace-pre-wrap break-words text-sm">{{ entry.message }}</p>
+            <p class="whitespace-pre-wrap wrap-break-word text-sm">{{ entry.message }}</p>
           </NuxtLink>
         </li>
       </ul>
diff --git a/frontend/app/pages/stacks/[node]/[stack].vue b/frontend/app/pages/stacks/[node]/[stack].vue
index 485adfe..3e18fd0 100644
--- a/frontend/app/pages/stacks/[node]/[stack].vue
+++ b/frontend/app/pages/stacks/[node]/[stack].vue
@@ -845,6 +845,29 @@ onBeforeUnmount(() => {
                   variant="subtle"
                   >{{ `${service.state}${service.health ? ` / ${service.health}` : ''}` }}</UBadge
                 >
+                <UTooltip
+                  v-if="service.auto_update || service.check_interval"
+                  :text="
+                    service.auto_update
+                      ? service.check_interval
+                        ? `Automatic updates configured; checks every ${service.check_interval}.`
+                        : 'Automatic updates configured; uses the node check schedule.'
+                      : `Image checks every ${service.check_interval}; automatic updates are off.`
+                  "
+                >
+                  <UBadge
+                    :icon="service.auto_update ? 'i-lucide-bot' : 'i-lucide-timer'"
+                    :color="service.auto_update ? 'primary' : 'neutral'"
+                    size="sm"
+                    variant="subtle"
+                    tabindex="0"
+                  >
+                    {{ service.auto_update ? 'Auto' : 'Checks' }}
+                    <template v-if="service.check_interval">
+                      · {{ service.check_interval }}</template
+                    >
+                  </UBadge>
+                </UTooltip>
                 <UTooltip
                   v-if="service.image_update"
                   :text="imageUpdateTooltip(service.image_update)"
diff --git a/frontend/tests/stack-ui.test.ts b/frontend/tests/stack-ui.test.ts
index 4d13dfe..166a000 100644
--- a/frontend/tests/stack-ui.test.ts
+++ b/frontend/tests/stack-ui.test.ts
@@ -139,6 +139,50 @@ test('node header', async () => {
     expect(header.props['aria-expanded']).toBe(!value)
     expect(selected).not.toHaveBeenCalled()
   }
+
+  item.stacks.push({
+    name: 'app',
+    status: 'running',
+    loading: false,
+    services: [
+      {
+        name: 'app-web-1',
+        service: 'web',
+        image: 'web',
+        state: 'running',
+        health: '',
+        ports: '',
+        check_interval: '2h',
+      },
+      {
+        name: 'app-worker-1',
+        service: 'worker',
+        image: 'worker',
+        state: 'running',
+        health: '',
+        ports: '',
+      },
+    ],
+  })
+  await vue.nextTick()
+  const automationIcons = () =>
+    flatten(root).filter(
+      (element) => 'icon' === element.type && 'i-lucide-bot' === element.props.name,
+    )
+  expect(automationIcons()).toHaveLength(0)
+  const services = item.stacks[0]!.services
+  services[0]!.auto_update = true
+  await vue.nextTick()
+  expect(automationIcons()).toHaveLength(1)
+  services[1]!.auto_update = true
+  await vue.nextTick()
+  expect(automationIcons()).toHaveLength(1)
+  services[0]!.auto_update = false
+  await vue.nextTick()
+  expect(automationIcons()).toHaveLength(1)
+  services[1]!.auto_update = false
+  await vue.nextTick()
+  expect(automationIcons()).toHaveLength(0)
 })
 
 const stub = (tag: string) =>
@@ -2418,6 +2462,32 @@ test.each(['stack', 'node'] as const)('%s page alerts', async (page) => {
     expect(cpuCard()?.props.value).toBe('-')
 
     const service = item.stacks[0]!.services[0]!
+    const automationBadge = () =>
+      containerBadges().find((element) => 'i-lucide-bot' === element.props.icon)
+    const checkBadge = () =>
+      containerBadges().find((element) => 'i-lucide-timer' === element.props.icon)
+    expect(automationBadge()).toBeUndefined()
+    expect(checkBadge()).toBeUndefined()
+    service.auto_update = true
+    service.check_interval = '2h'
+    await vue.nextTick()
+    expect(automationBadge()).toBeDefined()
+    expect(badgeText('i-lucide-bot')).toContain('2h')
+    expect(checkBadge()).toBeUndefined()
+    service.auto_update = false
+    await vue.nextTick()
+    expect(automationBadge()).toBeUndefined()
+    expect(checkBadge()).toBeDefined()
+    expect(badgeText('i-lucide-timer')).toContain('2h')
+    service.check_interval = undefined
+    await vue.nextTick()
+    expect(checkBadge()).toBeUndefined()
+    service.auto_update = true
+    await vue.nextTick()
+    expect(automationBadge()).toBeDefined()
+    service.auto_update = false
+    await vue.nextTick()
+
     const created = flatten(root).find((element) => 'time' === element.type)
     expect(created?.props.datetime).toBe(service.created_at)
     const createdText = created?.text