fix(ui): consistent attribute badge colors based on value hash across all views

ui/src/utils/attribute-color.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Deterministic color for attribute badges.
+ * Uses the value (not the key) to compute the color,
+ * ensuring the same value always gets the same color
+ * regardless of where it's displayed.
+ *
+ * Returns a BadgeColor that the design system accepts.
+ */
+const COLORS = ['primary', 'success', 'warning', 'running'] as const;
+type BadgeColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto';
+
+function hashString(s: string): number {
+  let hash = 0;
+  for (let i = 0; i < s.length; i++) {
+    hash = ((hash << 5) - hash + s.charCodeAt(i)) | 0;
+  }
+  return Math.abs(hash);
+}
+
+export function attributeBadgeColor(value: string): BadgeColor {
+  return COLORS[hashString(value) % COLORS.length];
+}