From e5eb48b0fa6f62a72d0d83b781970cef4ea727b1 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 23 Apr 2026 00:48:51 +0200
Subject: [PATCH] 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 | 28 +++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/ui/src/pages/Admin/EnvironmentsPage.tsx b/ui/src/pages/Admin/EnvironmentsPage.tsx
index 3fb70812..40aa9d36 100644
--- a/ui/src/pages/Admin/EnvironmentsPage.tsx
+++ b/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 }: {