Fix theme editor bugs: hex colors and comments order

- Display colors in #RRGGBB hex format instead of [r, g, b]
- Add hex parsing support for color input
- Move field descriptions before their fields (instead of after)
- Update prompt labels and error messages for hex format

Author: claude

plugins/theme_editor.ts

@@ -337,11 +337,34 @@ function parseColorToRgb(value: ColorValue): RGB | null {
 }
 
 /**
- * Format a color value for display
+ * Convert RGB to hex string
+ */
+function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (n: number) => n.toString(16).padStart(2, '0').toUpperCase();
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Parse hex string to RGB
+ */
+function hexToRgb(hex: string): RGB | null {
+  const match = hex.match(/^#?([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/);
+  if (match) {
+    return [
+      parseInt(match[1], 16),
+      parseInt(match[2], 16),
+      parseInt(match[3], 16),
+    ];
+  }
+  return null;
+}
+
+/**
+ * Format a color value for display (as hex)
  */
 function formatColorValue(value: ColorValue): string {
   if (Array.isArray(value)) {
-    return `[${value[0]}, ${value[1]}, ${value[2]}]`;
+    return rgbToHex(value[0], value[1], value[2]);
   }
   return String(value);
 }
@@ -550,6 +573,12 @@ function buildDisplayEntries(): TextPropertyEntry[] {
         properties: { type: "description", path: field.path },
       });
     } else {
+      // Field description (before the field)
+      entries.push({
+        text: `${indent}    // ${field.def.description}\n`,
+        properties: { type: "description", path: field.path },
+      });
+
       // Color field with swatch
       const colorStr = formatColorValue(field.value);
 
@@ -562,12 +591,6 @@ function buildDisplayEntries(): TextPropertyEntry[] {
           colorValue: field.value,
         },
       });
-
-      // Field description
-      entries.push({
-        text: `${indent}    // ${field.def.description}\n`,
-        properties: { type: "description", path: field.path },
-      });
     }
 
     entries.push({
@@ -736,7 +759,7 @@ function getFieldAtCursor(): ThemeField | null {
 function editColorField(field: ThemeField): void {
   const currentValue = formatColorValue(field.value);
 
-  editor.startPrompt(`${field.def.displayName} (RGB [r,g,b] or named): `, `theme-color-${field.path}`);
+  editor.startPrompt(`${field.def.displayName} (#RRGGBB or named): `, `theme-color-${field.path}`);
 
   // Build suggestions with named colors and current value
   const suggestions: PromptSuggestion[] = [
@@ -771,6 +794,12 @@ function parseColorInput(input: string): ColorValue | null {
     return input;
   }
 
+  // Try to parse as hex color #RRGGBB
+  const hexResult = hexToRgb(input);
+  if (hexResult) {
+    return hexResult;
+  }
+
   // Try to parse as RGB array [r, g, b]
   const rgbMatch = input.match(/^\[?\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\]?$/);
   if (rgbMatch) {
@@ -809,7 +838,7 @@ globalThis.onThemeColorPromptConfirmed = function(args: {
     updateDisplay();
     editor.setStatus(`Updated ${path}`);
   } else {
-    editor.setStatus("Invalid color format. Use [r,g,b] or named color.");
+    editor.setStatus("Invalid color format. Use #RRGGBB, [r,g,b], or named color.");
   }
 
   return true;
@@ -990,7 +1019,9 @@ async function setThemeAsDefault(themeName: string): Promise<void> {
     const content = JSON.stringify(config, null, 2);
     await editor.writeFile(configPath, content);
 
-    editor.setStatus(`Default theme set to "${themeName}". Restart editor to apply.`);
+    // Note: The plugin API doesn't currently support applying themes at runtime.
+    // Users need to restart or use the Select Theme command (Ctrl+P -> "Select Theme")
+    editor.setStatus(`Default theme set to "${themeName}". Use 'Select Theme' command or restart to apply.`);
   } catch (e) {
     editor.setStatus(`Failed to update config: ${e}`);
   }