feat: add runner status indicator (#3015)

Closes FRONT-813

### TL;DR

Added visual status indicators for runners in the runners table.

### What changed?

- Added a new status column to the runners table with visual indicators
- Implemented a `RunnerStatusBadge` component that displays:
  - A green ping for active runners
  - A warning hourglass icon for draining runners
  - A gray dot for stopped runners
- Updated table column spans to accommodate the new status column
- Added imports for the necessary components (`Icon`, `Ping`, etc.)

### How to test?

1. Navigate to the runners table
2. Verify that each runner displays the appropriate status indicator:
   - Active runners show a green ping
   - Draining runners show a yellow hourglass icon with "Draining" tooltip
   - Stopped runners show a gray dot with "Stopped" tooltip

### Why make this change?

This change improves the user experience by providing immediate visual feedback about runner status without requiring users to scan through textual information. The status indicators make it easier to quickly assess the state of all runners at a glance.

Author: jog1t

frontend/src/app/runners-table.tsx

@@ -1,7 +1,9 @@
+import { faHourglassClock, Icon } from "@rivet-gg/icons";
 import type { Rivet } from "@rivetkit/engine-api-full";
 import {
 	Button,
 	DiscreteCopyButton,
+	Ping,
 	Skeleton,
 	Table,
 	TableBody,
@@ -21,11 +23,18 @@ interface RunnersTableProps {
 	runners: Rivet.Runner[];
 }
 
-export function RunnersTable({isLoading, isError, hasNextPage, fetchNextPage, runners}: RunnersTableProps) {
+export function RunnersTable({
+	isLoading,
+	isError,
+	hasNextPage,
+	fetchNextPage,
+	runners,
+}: RunnersTableProps) {
 	return (
 		<Table>
 			<TableHeader>
 				<TableRow>
+					<TableHead />
 					<TableHead>ID</TableHead>
 					<TableHead>Name</TableHead>
 					<TableHead>Slots</TableHead>
@@ -36,7 +45,7 @@ export function RunnersTable({isLoading, isError, hasNextPage, fetchNextPage, ru
 			<TableBody>
 				{!isLoading && runners?.length === 0 ? (
 					<TableRow>
-						<TableCell colSpan={8}>
+						<TableCell colSpan={9}>
 							<Text className="text-center">
 								There's no runners matching criteria.
 							</Text>
@@ -45,7 +54,7 @@ export function RunnersTable({isLoading, isError, hasNextPage, fetchNextPage, ru
 				) : null}
 				{isError ? (
 					<TableRow>
-						<TableCell colSpan={8}>
+						<TableCell colSpan={9}>
 							<Text className="text-center">
 								An error occurred while fetching runners.
 							</Text>
@@ -90,6 +99,9 @@ export function RunnersTable({isLoading, isError, hasNextPage, fetchNextPage, ru
 function RowSkeleton() {
 	return (
 		<TableRow>
+			<TableCell>
+				<Skeleton className="w-full size-4" />
+			</TableCell>
 			<TableCell>
 				<Skeleton className="w-full h-4" />
 			</TableCell>
@@ -112,6 +124,9 @@ function RowSkeleton() {
 function Row(runner: Rivet.Runner) {
 	return (
 		<TableRow key={runner.runnerId}>
+			<TableCell>
+				<RunnerStatusBadge {...runner} />
+			</TableCell>
 			<TableCell>
 				<WithTooltip
 					content={runner.runnerId}
@@ -140,3 +155,28 @@ function Row(runner: Rivet.Runner) {
 		</TableRow>
 	);
 }
+
+function RunnerStatusBadge(runner: Rivet.Runner) {
+	if (runner.drainTs) {
+		return (
+			<WithTooltip
+				content="Draining"
+				trigger={
+					<Icon icon={faHourglassClock} className="text-warning" />
+				}
+			/>
+		);
+	}
+	if (runner.stopTs) {
+		return (
+			<WithTooltip
+				content="Stopped"
+				trigger={
+					<span className={"size-2 rounded-full, bg-foreground/10"} />
+				}
+			/>
+		);
+	}
+
+	return <Ping variant="success" className="relative right-auto" />;
+}