feat(frontend): add outdated indicator to runners

[jog1t]

Description

This change adds version tracking and outdated runner detection to the runners table. The implementation calculates the latest version across all runners and displays a warning status for runners that are behind the current version. The status badge logic has been refactored to prioritize outdated runners, showing them with an hourglass clock icon and red styling before checking ping status or RTT performance.

Type of change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[railway-app]

🚅 Deployed to the rivet-pr-4446 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
frontend-inspector	😴 Sleeping (View Logs)	Web	Mar 17, 2026 at 8:34 pm
frontend-cloud	😴 Sleeping (View Logs)	Web	Mar 17, 2026 at 8:30 pm
mcp-hub	✅ Success (View Logs)	Web	Mar 17, 2026 at 8:28 pm
website	❌ Build Failed (View Logs)	Web	Mar 17, 2026 at 8:25 pm
ladle	❌ Build Failed (View Logs)	Web	Mar 17, 2026 at 8:23 pm

[jog1t]

• fix(frontend): remove flashing upgrade notice #4451
• fix(frotnend): fix icons kiling the bundle #4450
• feat(frontend): ping actor if its in the crash loop #4448
• fix(engine): use proper paths for settings #4447
• feat(frontend): add outdated indicator to runners #4446 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: feat(frontend): add outdated indicator to runners

Overall this is a clean, focused frontend feature. The core logic is straightforward and the refactoring of the if/else if/else chain is a nice readability improvement. A few issues worth addressing before merging.

---

Bugs / Logic Issues

Outdated check masks offline runners

The current priority order treats an outdated runner as more important than an offline one. A runner that is both outdated and offline will show the hourglass-clock icon, hiding the fact that it hasn't pinged in >15 seconds. An operator looking at the dashboard would not know the runner is unreachable.

Consider either:

• Checking offline first (now - runner.lastPingTs > 15000), and only falling through to the outdated check when the runner is live.
• Combining both states in a single badge (e.g. a composite tooltip or badge).

version field on Rivet.Runner is assumed to always be a number

Math.max(...runners.map((r) => r.version)) will return -Infinity if runners is empty, but that path is already guarded by the runners?.length check, so that is fine. However, if version can be undefined on any runner (e.g. an older runner binary that doesn't report it), Math.max will return NaN and every runner will appear outdated because NaN < anything is false but the isOutdated check uses runner.version < runner.latestVersion, where NaN < number evaluates to false — so in that specific case it actually won't mark them outdated. Still worth confirming with the API type that version is always defined on Rivet.Runner.

---

Unused Import

faTriangleExclamation is imported (line 9) but never used in the file. This will likely produce a lint/TypeScript warning and should be removed.

// Remove this — it is imported but never referenced
faTriangleExclamation,

---

Icon Semantics

faHourglassClock (an hourglass with a clock) is used for the outdated state. This icon typically conveys "waiting" or "time remaining", which could be confused with the existing offline icon (faHourglassEnd). A warning triangle (faTriangleExclamation, which is already imported) or an arrow-up icon would more clearly communicate "this runner needs an upgrade". This is a subjective UX point, but worth discussing.

---

Minor Nits

Tooltip layout inconsistency

The outdated badge <div> includes flex items-center justify-center:

<div className="text-center relative size-8 flex items-center justify-center">

The other badge <div>s use absolute inset-1/2 -translate-x-1/2 -translate-y-1/2 on the Icon itself for centering and do not add flex layout to the wrapper. Keeping the pattern consistent would make the CSS easier to maintain.

Row exports key via spread

key={runner.runnerId} is set on <Row> and then {...runner} spreads the full Rivet.Runner object into Row's props. React strips key before passing props to the component, so this is harmless, but the key prop is also redundantly set inside Row at line 147 (<TableRow key={runner.runnerId}>), which has no effect since it is not inside a .map() at that level. The inner key can be removed.

---

Summary

Severity	Item
Medium	Outdated check hides offline state when runner is both outdated and unreachable
Low	faTriangleExclamation imported but never used — remove it
Low	Confirm version is always defined on Rivet.Runner (not optional)
Nit	Badge <div> centering approach is inconsistent with other badges
Nit	Inner key on <TableRow> inside Row is a no-op and can be removed

The refactoring of the status badge if/else chain and the unused variable rename (dc → _dc) are both improvements and should be kept as-is.

[pkg-pr-new]

More templates

• actor-actions
• actor-actions-vercel
• ai-agent
• ai-agent-vercel
• example-ai-and-user-generated-actors-freestyle
• chat-room
• chat-room-vercel
• example-cloudflare-workers
• example-cloudflare-workers-hono
• collaborative-document
• collaborative-document-vercel
• cross-actor-actions
• cross-actor-actions-vercel
• example-cursors
• example-cursors-raw-websocket
• example-cursors-raw-websocket-vercel
• example-cursors-vercel
• custom-serverless
• example-elysia
• example-experimental-durable-streams-ai-agent
• example-experimental-durable-streams-ai-agent-vercel
• geo-distributed-database
• geo-distributed-database-vercel
• hello-world
• hello-world-vercel
• example-hono
• hono-react
• hono-react-vercel
• example-kitchen-sink
• example-kitchen-sink-vercel
• multi-region-vercel
• multiplayer-game
• example-multiplayer-game-patterns
• example-multiplayer-game-patterns-vercel
• multiplayer-game-vercel
• native-websockets
• native-websockets-vercel
• next-js
• per-tenant-database
• per-tenant-database-vercel
• example-raw-fetch-handler
• example-raw-fetch-handler-vercel
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-raw-websocket-handler-proxy-vercel
• example-raw-websocket-handler-vercel
• example-react
• example-react-vercel
• sandbox
• sandbox-coding-agent
• sandbox-coding-agent-vercel
• sandbox-vercel
• scheduling
• scheduling-vercel
• example-sqlite-drizzle
• example-sqlite-raw
• state
• state-vercel
• example-stream
• example-stream-vercel
• example-trpc

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@4446

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@4446

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@4446

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@4446

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@4446

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@4446

@rivetkit/sqlite-vfs

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sqlite-vfs@4446

@rivetkit/traces

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/traces@4446

@rivetkit/workflow-engine

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/workflow-engine@4446

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4446

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@4446

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@4446

commit: bac30de