feat(admin): color picker shows color cube correctly

1 files changed, 32 insertions, 3 deletions

diff --git a/internal/admin/static/colorpicker.js b/internal/admin/static/colorpicker.js
index bba438e..f93b261 100644
--- a/internal/admin/static/colorpicker.js
+++ b/internal/admin/static/colorpicker.js
@@ -68,7 +68,7 @@ window.cssToXtermIdx = function(css) {
     if (pickerEl) return;
     pickerEl = document.createElement('div');
     pickerEl.id = '__cp_popover';
-    pickerEl.style.cssText = 'display:none;position:fixed;z-index:200;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px;box-shadow:0 4px 20px rgba(0,0,0,.5);min-width:280px';
+    pickerEl.style.cssText = 'display:none;position:fixed;z-index:200;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px;box-shadow:0 4px 20px rgba(0,0,0,.5);min-width:208px';
     pickerEl.innerHTML = buildPickerHTML();
     document.body.appendChild(pickerEl);
 
@@ -91,12 +91,41 @@ window.cssToXtermIdx = function(css) {
     h += '<input id="__cp_hex" style="flex:1;padding:3px 6px;font-size:11px;background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);border-radius:3px;font-family:monospace;text-transform:uppercase" maxlength="2" placeholder="00">';
     h += '<button id="__cp_close" style="background:none;border:none;color:#aaa;cursor:pointer;font-size:14px;padding:0 4px">&times;</button>';
     h += '</div>';
-    h += '<div class="cp-grid">';
-    for (var i = 0; i < 256; i++) {
+
+    // ANSI colors 0-15 (2 rows of 8)
+    h += '<div class="cp-section-label">ANSI</div>';
+    h += '<div class="cp-grid cp-ansi">';
+    for (var i = 0; i < 16; i++) {
       var css = xtermToCss(i);
       h += '<div class="cp-swatch" data-idx="'+i+'" style="background:'+css+'" title="'+xtermIdxToHex(i)+' ('+i+')"></div>';
     }
     h += '</div>';
+
+    // Color cube 16-231: six 6x6 slices (G=rows, B=cols, each slice is one R level)
+    h += '<div class="cp-section-label">Color Cube</div>';
+    h += '<div class="cp-cube-row">';
+    for (var r = 0; r < 6; r++) {
+      h += '<div class="cp-grid cp-cube">';
+      for (var g = 0; g < 6; g++) {
+        for (var b = 0; b < 6; b++) {
+          var idx = 16 + 36*r + 6*g + b;
+          var css = xtermToCss(idx);
+          h += '<div class="cp-swatch" data-idx="'+idx+'" style="background:'+css+'" title="'+xtermIdxToHex(idx)+' ('+idx+')"></div>';
+        }
+      }
+      h += '</div>';
+    }
+    h += '</div>';
+
+    // Grayscale 232-255 (2 rows of 12)
+    h += '<div class="cp-section-label">Grayscale</div>';
+    h += '<div class="cp-grid cp-gray">';
+    for (var i = 232; i < 256; i++) {
+      var css = xtermToCss(i);
+      h += '<div class="cp-swatch" data-idx="'+i+'" style="background:'+css+'" title="'+xtermIdxToHex(i)+' ('+i+')"></div>';
+    }
+    h += '</div>';
+
     return h;
   }