feat(agents-server-ui): circular ring gauge for the context usage indicator

Replace the flat dot before the "X%" label with a small SVG donut whose arc
fills proportionally to the context-window usage. Track + progress arc both
use currentColor, so the existing normal/warning/critical level colour tints
the ring without extra wiring.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: kevin-dp

packages/agents-server-ui/src/components/ContextUsageIndicator.module.css

@@ -15,13 +15,20 @@
   color: inherit;
 }
 
-.dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: currentColor;
-  opacity: 0.6;
+.ring {
+  display: block;
   flex-shrink: 0;
+  overflow: visible;
+}
+
+.ringTrack {
+  stroke: currentColor;
+  opacity: 0.22;
+}
+
+.ringProgress {
+  stroke: currentColor;
+  transition: stroke-dasharray 0.3s ease;
 }
 
 /* Levels mirror the compaction thresholds: warning once background

packages/agents-server-ui/src/components/ContextUsageIndicator.tsx

@@ -8,6 +8,7 @@ import {
 } from '@electric-ax/agents-runtime/client'
 import type { EntityStreamDBWithActions } from '@electric-ax/agents-runtime/client'
 import { Tooltip } from '../ui/Tooltip'
+import { ContextUsageRing } from './ContextUsageRing'
 import styles from './ContextUsageIndicator.module.css'
 
 /**
@@ -86,7 +87,7 @@ export function ContextUsageIndicator({
         className={[styles.indicator, styles[level]].filter(Boolean).join(` `)}
         aria-label={`Context used: ${percent} (${tooltip})`}
       >
-        <span className={styles.dot} aria-hidden="true" />
+        <ContextUsageRing ratio={usage.ratio} />
         <span className={styles.percent}>{percent}</span>
       </span>
     </Tooltip>

packages/agents-server-ui/src/components/ContextUsageRing.tsx

@@ -0,0 +1,58 @@
+import styles from './ContextUsageIndicator.module.css'
+
+interface ContextUsageRingProps {
+  /** Fraction of the context window used, 0–1. */
+  ratio: number
+  /** Outer diameter in px. */
+  size?: number
+  /** Ring thickness in px. */
+  strokeWidth?: number
+}
+
+/**
+ * A tiny circular gauge ("donut") whose arc fills proportionally to `ratio`.
+ * Both the track and the progress arc use `currentColor`, so the surrounding
+ * indicator's level colour (normal/warning/critical) tints it for free.
+ */
+export function ContextUsageRing({
+  ratio,
+  size = 14,
+  strokeWidth = 2.5,
+}: ContextUsageRingProps): React.ReactElement {
+  const clamped = Math.min(1, Math.max(0, ratio))
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const filled = circumference * clamped
+  const center = size / 2
+
+  return (
+    <svg
+      className={styles.ring}
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      aria-hidden="true"
+    >
+      <circle
+        className={styles.ringTrack}
+        cx={center}
+        cy={center}
+        r={radius}
+        fill="none"
+        strokeWidth={strokeWidth}
+      />
+      <circle
+        className={styles.ringProgress}
+        cx={center}
+        cy={center}
+        r={radius}
+        fill="none"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeDasharray={`${filled} ${circumference - filled}`}
+        // Start the arc at 12 o'clock and sweep clockwise.
+        transform={`rotate(-90 ${center} ${center})`}
+      />
+    </svg>
+  )
+}