ui(admin): env-colored ring on environment avatars

Wrap Avatar in a span with box-shadow outline in the environment's
chosen color (slate/red/amber/green/teal/blue/purple/pink). Applied to
both the list row and the detail header. Keeps the Avatar's name-hash
interior so initials remain distinguishable; the ring just signals
which env you're looking at at a glance.

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

ui/src/pages/Admin/EnvironmentsPage.tsx

@@ -221,7 +221,7 @@ export default function EnvironmentsPage() {
               items={filtered}
               renderItem={(env) => (
                 <>
-                  <Avatar name={env.displayName} size="sm" />
+                  <EnvColoredAvatar name={env.displayName} color={env.color} size="sm" />
                   <div className={styles.entityInfo}>
                     <div className={styles.entityName}>{env.displayName}</div>
                     <div className={styles.entityMeta}>
@@ -250,7 +250,7 @@ export default function EnvironmentsPage() {
           selected ? (
             <>
               <div className={styles.detailHeader}>
-                <Avatar name={selected.displayName} size="lg" />
+                <EnvColoredAvatar name={selected.displayName} color={selected.color} size="lg" />
                 <div className={styles.detailHeaderInfo}>
                   <div className={styles.detailName}>
                     {isDefault ? (
@@ -392,6 +392,30 @@ export default function EnvironmentsPage() {
   );
 }
 
+// ── Env-colored Avatar ──────────────────────────────────────────────
+
+function EnvColoredAvatar({ name, color, size }: {
+  name: string;
+  color: string | null | undefined;
+  size: 'sm' | 'md' | 'lg';
+}) {
+  const ringWidth = size === 'lg' ? 3 : 2;
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        borderRadius: '50%',
+        boxShadow: `0 0 0 ${ringWidth}px ${envColorVar(color)}`,
+        // inner white gap so the ring reads as a distinct band, not a border
+        outline: '1px solid var(--bg-surface)',
+        outlineOffset: 0,
+      }}
+    >
+      <Avatar name={name} size={size} />
+    </span>
+  );
+}
+
 // ── Default Resource Limits ─────────────────────────────────────────
 
 function DefaultResourcesSection({ environment, onSave, saving }: {