feat(web,hub,cli): show machine health in session sidebar (#962)

* feat(web,hub,cli): show machine load in session sidebar

Runners attach OS health snapshots to machine-alive heartbeats; the hub
caches them and the web session list renders load or CPU between the
machine label and session count.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web,cli): show CPU and RAM pressure in machine health badge

Sidebar label now combines CPU and RAM percentages for overload
signaling; load stays in the tooltip on Unix. Prime CPU sampling so
the first heartbeat includes usage, not just memory.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(web): visual machine health meters with tooltip

Replace bare CPU/RAM text with labeled mini bar gauges, chip
border tint by severity, and a HoverTooltip explaining capacity
and overload guidance.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web): widen machine health tooltip with horizontal layout

Allow a generous popover width and lay CPU/RAM/load out side by side
so the capacity tooltip reads wider and less tall than the chip.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web): anchor machine health tooltip to row left edge

Wide tooltip was align=end on the chip, so it grew left off-screen.
Use row-span positioning on the machine tile button instead.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(web): machine host card with OS label and inline health

Turn the session sidebar machine row into a bordered host panel with OS
metadata and side-by-side CPU/RAM meters embedded in the tile instead
of a flat label line matching project rows.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web): keep machine host tile single-row height

Collapse the machine header back to one py-1.5 row with OS and compact
inline health beside the name, and restore the original project indent
without the extra nested rail or second header line.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(web): show CPU core count in machine health tooltip

When the runner reports cpuCount, the tooltip reads "CPU across all 6
cores" instead of the generic all-cores label.

Co-authored-by: Cursor <cursoragent@cursor.com>

* docs: add machine health sidebar screenshots

Dogfood captures for the session sidebar machine tile and capacity
tooltip, for upstream PR review.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(cli): clear machine-alive priming timeout on disconnect

Track the 50ms CPU priming setTimeout and clear it in stopKeepAlive so
disconnect/shutdown during the delay cannot leave a stray interval alive.

Co-authored-by: Cursor <cursoragent@cursor.com>

* chore: drop dogfood screenshots from upstream PR diff

Review evidence lives in the PR discussion only; no need to ship PNGs in
the repo long-term.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web): truncate long machine OS/host metadata in sidebar row

Bound the metadata span so a long hostname cannot push the health chip
or session count off-screen in narrow sidebars.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web): reveal machine health tooltip on keyboard row focus

Wire MACHINE_ROW_TOOLTIP_FOCUS_CLASS and aria-describedby on the machine
header button so keyboard users can read the health tooltip like session rows.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(cli): use MemAvailable for Linux RAM pressure on Bun

Bun's os.freemem() reflects MemFree (~1% on cache-heavy hosts), which
made sidebar RAM read ~99% while btop showed ~40% used. Parse
/proc/meminfo MemAvailable instead so used percent matches operator tools.

Co-authored-by: Cursor <cursoragent@cursor.com>

* feat(web,cli): show machine uptime in sidebar tiles and tooltip

Collect os.uptime() as uptimeSeconds on keepalive and render compact
up 1h 54m in the machine meta row plus an Uptime line in the health tooltip.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web): anchor machine health tooltip to chip not row

align=row positioned the tooltip below the full machine header button,
so the collapsible project panel painted over it on hover. Use align=end
with a min-width panel so mouse and keyboard tooltips stay visible.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

hub/src/socket/handlers/cli/machineHandlers.ts

@@ -9,6 +9,7 @@ import type { AccessErrorReason, AccessResult } from './types'
 type MachineAlivePayload = {
     machineId: string
     time: number
+    health?: unknown
 }
 
 type ResolveMachineAccess = (machineId: string) => AccessResult<StoredMachine>

hub/src/socket/server.ts

@@ -40,7 +40,7 @@ export type SocketServerDeps = {
     onSessionAlive?: (payload: { sid: string; time: number; thinking?: boolean; mode?: 'local' | 'remote' }) => void
     onSessionReady?: (payload: { sid: string; time: number }) => void
     onSessionEnd?: (payload: { sid: string; time: number }) => void
-    onMachineAlive?: (payload: { machineId: string; time: number }) => void
+    onMachineAlive?: (payload: { machineId: string; time: number; health?: unknown }) => void
     onBackgroundTaskDelta?: (sessionId: string, delta: { started: number; completed: number }) => void
     onSessionActivity?: (sessionId: string, updatedAt: number) => void
     onSweepImmediateQueued?: (sessionId: string, now: number) => void

hub/src/sync/aliveEvents.test.ts

@@ -64,6 +64,55 @@ describe('alive incremental events', () => {
         expect(update.data).toEqual(expect.objectContaining({ id: machine.id, active: true }))
     })
 
+    it('stores health from machine alive and rebroadcasts when it changes', () => {
+        const store = new Store(':memory:')
+        const events: SyncEvent[] = []
+        const cache = new MachineCache(store, createPublisher(events))
+
+        const machine = cache.getOrCreateMachine(
+            'machine-health-test',
+            { host: 'localhost', platform: 'linux', happyCliVersion: '0.1.0' },
+            null,
+            'default'
+        )
+
+        events.length = 0
+        cache.handleMachineAlive({
+            machineId: machine.id,
+            time: Date.now(),
+            health: {
+                collectedAt: Date.now(),
+                load1m: 0.4,
+                cpuCount: 8,
+                memoryPercent: 55
+            }
+        })
+
+        const updated = cache.getMachine(machine.id)
+        expect(updated?.health).toEqual(expect.objectContaining({ load1m: 0.4, cpuCount: 8 }))
+
+        events.length = 0
+        cache.handleMachineAlive({
+            machineId: machine.id,
+            time: Date.now() + 1,
+            health: {
+                collectedAt: Date.now() + 1,
+                load1m: 2.1,
+                cpuCount: 8,
+                memoryPercent: 80
+            }
+        })
+
+        const healthUpdate = events.find((event) => event.type === 'machine-updated')
+        expect(healthUpdate).toBeDefined()
+        if (!healthUpdate || healthUpdate.type !== 'machine-updated' || !healthUpdate.data || typeof healthUpdate.data !== 'object') {
+            return
+        }
+        expect(healthUpdate.data).toEqual(expect.objectContaining({
+            health: expect.objectContaining({ load1m: 2.1, memoryPercent: 80 })
+        }))
+    })
+
     it('marks session thinking immediately when a user message is accepted by the hub', async () => {
         const store = new Store(':memory:')
         const emittedSocketUpdates: unknown[] = []

hub/src/sync/machineCache.ts

@@ -1,9 +1,38 @@
 import type { Machine, MachinePatch } from '@hapi/protocol/types'
-import { MachineMetadataSchema, RunnerStateSchema } from '@hapi/protocol/schemas'
+import { MachineHealthSchema, MachineMetadataSchema, RunnerStateSchema } from '@hapi/protocol/schemas'
 import type { Store } from '../store'
 import { clampAliveTime } from './aliveTime'
 import { EventPublisher } from './eventPublisher'
 
+type MachineAlivePayload = {
+    machineId: string
+    time: number
+    health?: unknown
+}
+
+function parseMachineHealth(value: unknown): Machine['health'] {
+    const parsed = MachineHealthSchema.safeParse(value)
+    return parsed.success ? parsed.data : null
+}
+
+function healthDisplayChanged(
+    before: Machine['health'] | undefined,
+    after: Machine['health'] | null | undefined
+): boolean {
+    if (!before && !after) {
+        return false
+    }
+    if (!before || !after) {
+        return true
+    }
+
+    return before.load1m !== after.load1m
+        || before.cpuPercent !== after.cpuPercent
+        || before.memoryPercent !== after.memoryPercent
+        || before.cpuCount !== after.cpuCount
+        || before.uptimeSeconds !== after.uptimeSeconds
+}
+
 export class MachineCache {
     private readonly machines: Map<string, Machine> = new Map()
     private readonly lastBroadcastAtByMachineId: Map<string, number> = new Map()
@@ -93,7 +122,8 @@ export class MachineCache {
             metadata,
             metadataVersion: stored.metadataVersion,
             runnerState,
-            runnerStateVersion: stored.runnerStateVersion
+            runnerStateVersion: stored.runnerStateVersion,
+            health: existing?.health ?? null
         }
 
         this.machines.set(machineId, machine)
@@ -108,7 +138,7 @@ export class MachineCache {
         }
     }
 
-    handleMachineAlive(payload: { machineId: string; time: number }): void {
+    handleMachineAlive(payload: MachineAlivePayload): void {
         const t = clampAliveTime(payload.time)
         if (!t) return
 
@@ -116,12 +146,21 @@ export class MachineCache {
         if (!machine) return
 
         const wasActive = machine.active
+        const previousHealth = machine.health ?? null
         machine.active = true
         machine.activeAt = Math.max(machine.activeAt, t)
 
+        if (payload.health !== undefined) {
+            machine.health = parseMachineHealth(payload.health)
+        }
+
         const now = Date.now()
         const lastBroadcastAt = this.lastBroadcastAtByMachineId.get(machine.id) ?? 0
-        const shouldBroadcast = (!wasActive && machine.active) || (now - lastBroadcastAt > 10_000)
+        const healthChanged = payload.health !== undefined
+            && healthDisplayChanged(previousHealth, machine.health)
+        const shouldBroadcast = (!wasActive && machine.active)
+            || healthChanged
+            || (now - lastBroadcastAt > 10_000)
         if (shouldBroadcast) {
             this.lastBroadcastAtByMachineId.set(machine.id, now)
             this.publisher.emit({ type: 'machine-updated', machineId: machine.id, data: machine })

hub/src/sync/syncEngine.ts

@@ -354,7 +354,7 @@ export class SyncEngine {
         this.sessionCache.recordSessionActivity(sessionId, updatedAt)
     }
 
-    handleMachineAlive(payload: { machineId: string; time: number }): void {
+    handleMachineAlive(payload: { machineId: string; time: number; health?: unknown }): void {
         this.machineCache.handleMachineAlive(payload)
     }