Improve device view for two custom devices (only first capitalized letter rather than full outcome)

Author: diegochine

client/src/probability-lab/ui/device-view.js

@@ -2,6 +2,28 @@
 import { clamp } from '../../shared/math.js';
 import { getCssVar } from './charts/colors.js';
 
+/**
+ * Abbreviates an outcome label for compact display.
+ * Single word: returns first letter capitalized (e.g., "Unlocked" → "U")
+ * Multiple words: returns first letter of each word capitalized (e.g., "Camera Error" → "CE")
+ */
+function abbreviateOutcome(outcome) {
+  if (!outcome || typeof outcome !== 'string') return '';
+  const trimmed = outcome.trim();
+  if (!trimmed) return '';
+  
+  const words = trimmed.split(/\s+/).filter(word => word.length > 0);
+  if (words.length === 0) return '';
+  
+  if (words.length === 1) {
+    // Single word: return first letter capitalized
+    return words[0][0].toUpperCase();
+  }
+  
+  // Multiple words: return first letter of each word capitalized
+  return words.map(word => word[0].toUpperCase()).join('');
+}
+
 function renderCustomDevice(target, def, index, { compact = false } = {}) {
   const wrapper = document.createElement('div');
   wrapper.className = `pl-custom-device${compact ? ' pl-custom-device--mini' : ''}`;
@@ -32,7 +54,8 @@ function renderCustomDevice(target, def, index, { compact = false } = {}) {
     const item = document.createElement('div');
     item.className = 'pl-custom-outcome body-xsmall';
     if (i === index) item.classList.add('pl-custom-outcome--selected');
-    item.textContent = def.labels[i];
+    // Use abbreviated labels in compact mode (two-device mode)
+    item.textContent = compact ? abbreviateOutcome(def.labels[i]) : def.labels[i];
     grid.append(item);
   }