@fresh-editor/fresh-editor 0.2.17 → 0.2.20

package/plugins/terraform-lsp.ts

@@ -0,0 +1,144 @@
+/// <reference path="./lib/fresh.d.ts" />
+const editor = getEditor();
+
+/**
+ * Terraform LSP Helper Plugin
+ *
+ * Provides user-friendly error handling for Terraform LSP server issues.
+ * When terraform-ls fails to start, this plugin shows an actionable
+ * popup with installation instructions.
+ *
+ * Features:
+ * - Detects Terraform LSP server errors (terraform-ls)
+ * - Shows popup with install commands (brew, choco, etc.)
+ * - Provides option to disable Terraform LSP
+ *
+ * VS Code: "HashiCorp Terraform" extension (uses terraform-ls)
+ * Neovim: nvim-lspconfig terraformls
+ * Also supports: Terraform, Terraform variables, and tfvars files
+ */
+
+interface LspServerErrorData {
+  language: string;
+  server_command: string;
+  error_type: string;
+  message: string;
+}
+
+interface LspStatusClickedData {
+  language: string;
+  has_error: boolean;
+}
+
+interface ActionPopupResultData {
+  popup_id: string;
+  action_id: string;
+}
+
+// Install commands for Terraform LSP server (terraform-ls by HashiCorp)
+// See: https://github.com/hashicorp/terraform-ls
+const INSTALL_COMMANDS = {
+  brew: "brew install hashicorp/tap/terraform-ls",
+  choco: "choco install terraform-ls",
+  nix: "nix-env -i terraform-ls",
+};
+
+// Track error state for Terraform LSP
+let terraformLspError: { serverCommand: string; message: string } | null = null;
+
+/**
+ * Handle LSP server errors for Terraform
+ */
+function on_terraform_lsp_server_error(data: LspServerErrorData): void {
+  if (data.language !== "terraform") {
+    return;
+  }
+
+  editor.debug(`terraform-lsp: Server error - ${data.error_type}: ${data.message}`);
+
+  terraformLspError = {
+    serverCommand: data.server_command,
+    message: data.message,
+  };
+
+  if (data.error_type === "not_found") {
+    editor.setStatus(
+      `Terraform LSP server '${data.server_command}' not found. Click status bar for help.`
+    );
+  } else {
+    editor.setStatus(`Terraform LSP error: ${data.message}`);
+  }
+}
+registerHandler("on_terraform_lsp_server_error", on_terraform_lsp_server_error);
+editor.on("lsp_server_error", "on_terraform_lsp_server_error");
+
+/**
+ * Handle status bar click when there's a Terraform LSP error
+ */
+function on_terraform_lsp_status_clicked(data: LspStatusClickedData): void {
+  if (data.language !== "terraform" || !terraformLspError) {
+    return;
+  }
+
+  editor.debug("terraform-lsp: Status clicked, showing help popup");
+
+  editor.showActionPopup({
+    id: "terraform-lsp-help",
+    title: "Terraform Language Server Not Found",
+    message: `"${terraformLspError.serverCommand}" (by HashiCorp) provides code completion, diagnostics, and navigation for Terraform files. Copy a command below to install it, or visit https://github.com/hashicorp/terraform-ls for details and pre-built binaries.`,
+    actions: [
+      { id: "copy_brew", label: `Copy: ${INSTALL_COMMANDS.brew}` },
+      { id: "copy_choco", label: `Copy: ${INSTALL_COMMANDS.choco} (Windows)` },
+      { id: "copy_nix", label: `Copy: ${INSTALL_COMMANDS.nix}` },
+      { id: "disable", label: "Disable Terraform LSP" },
+      { id: "dismiss", label: "Dismiss (ESC)" },
+    ],
+  });
+}
+registerHandler("on_terraform_lsp_status_clicked", on_terraform_lsp_status_clicked);
+editor.on("lsp_status_clicked", "on_terraform_lsp_status_clicked");
+
+/**
+ * Handle action popup results for Terraform LSP help
+ */
+function on_terraform_lsp_action_result(data: ActionPopupResultData): void {
+  if (data.popup_id !== "terraform-lsp-help") {
+    return;
+  }
+
+  editor.debug(`terraform-lsp: Action selected - ${data.action_id}`);
+
+  switch (data.action_id) {
+    case "copy_brew":
+      editor.setClipboard(INSTALL_COMMANDS.brew);
+      editor.setStatus("Copied: " + INSTALL_COMMANDS.brew);
+      break;
+
+    case "copy_choco":
+      editor.setClipboard(INSTALL_COMMANDS.choco);
+      editor.setStatus("Copied: " + INSTALL_COMMANDS.choco);
+      break;
+
+    case "copy_nix":
+      editor.setClipboard(INSTALL_COMMANDS.nix);
+      editor.setStatus("Copied: " + INSTALL_COMMANDS.nix);
+      break;
+
+    case "disable":
+      editor.disableLspForLanguage("terraform");
+      editor.setStatus("Terraform LSP disabled");
+      terraformLspError = null;
+      break;
+
+    case "dismiss":
+    case "dismissed":
+      break;
+
+    default:
+      editor.debug(`terraform-lsp: Unknown action: ${data.action_id}`);
+  }
+}
+registerHandler("on_terraform_lsp_action_result", on_terraform_lsp_action_result);
+editor.on("action_popup_result", "on_terraform_lsp_action_result");
+
+editor.debug("terraform-lsp: Plugin loaded");

package/plugins/theme_editor.i18n.json

@@ -296,7 +296,11 @@
     "field.popup_selection_fg": "vyskakovací okno výběr popředí",
     "field.popup_selection_fg_desc": "vyskakovací okno selected item text barva",
     "field.whitespace_indicator_fg": "Bílé znaky Indikátor popředí",
-    "field.whitespace_indicator_fg_desc": "Barva popředí indikátorů bílých znaků (šipky tabulátorů a tečky mezer)"
+    "field.whitespace_indicator_fg_desc": "Barva popředí indikátorů bílých znaků (šipky tabulátorů a tečky mezer)",
+    "field.punctuation_bracket": "závorka",
+    "field.punctuation_bracket_desc": "závorkas ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "oddělovač",
+    "field.punctuation_delimiter_desc": "oddělovačs (;, ,, .)"
   },
   "de": {
     "cmd.edit_theme": "Theme bearbeiten",
@@ -595,7 +599,11 @@
     "field.popup_selection_fg": "Popup Auswahl Vordergrund",
     "field.popup_selection_fg_desc": "Textfarbe des ausgewaehlten Popup-Elements",
     "field.whitespace_indicator_fg": "Leerzeichen-Indikator Vordergrund",
-    "field.whitespace_indicator_fg_desc": "Vordergrundfarbe für Leerzeichen-Indikatoren (Tab-Pfeile und Leerzeichen-Punkte)"
+    "field.whitespace_indicator_fg_desc": "Vordergrundfarbe für Leerzeichen-Indikatoren (Tab-Pfeile und Leerzeichen-Punkte)",
+    "field.punctuation_bracket": "Klammer",
+    "field.punctuation_bracket_desc": "Klammern ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "Trennzeichen",
+    "field.punctuation_delimiter_desc": "Trennzeichen (;, ,, .)"
   },
   "en": {
     "cmd.edit_theme": "Edit Theme",
@@ -894,7 +902,11 @@
     "field.popup_selection_fg": "Popup Selection Foreground",
     "field.popup_selection_fg_desc": "Popup selected item text color",
     "field.whitespace_indicator_fg": "Whitespace Indicator Foreground",
-    "field.whitespace_indicator_fg_desc": "Foreground color for whitespace indicators (tab arrows and space dots)"
+    "field.whitespace_indicator_fg_desc": "Foreground color for whitespace indicators (tab arrows and space dots)",
+    "field.punctuation_bracket": "Punctuation Bracket",
+    "field.punctuation_bracket_desc": "Brackets and parentheses ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "Punctuation Delimiter",
+    "field.punctuation_delimiter_desc": "Delimiters and separators (;, ,, .)"
   },
   "es": {
     "cmd.edit_theme": "Editar tema",
@@ -1193,7 +1205,11 @@
     "field.popup_selection_fg": "Fondo de seleccion de ventana emergente",
     "field.popup_selection_fg_desc": "Fondo de elemento seleccionado en ventana emergente",
     "field.whitespace_indicator_fg": "Indicador de espacios en blanco primer plano",
-    "field.whitespace_indicator_fg_desc": "Color de primer plano para indicadores de espacios en blanco (flechas de tabulación y puntos de espacio)"
+    "field.whitespace_indicator_fg_desc": "Color de primer plano para indicadores de espacios en blanco (flechas de tabulación y puntos de espacio)",
+    "field.punctuation_bracket": "Paréntesis",
+    "field.punctuation_bracket_desc": "Paréntesis y corchetes ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "Delimitador",
+    "field.punctuation_delimiter_desc": "Delimitadores y separadores (;, ,, .)"
   },
   "fr": {
     "cmd.edit_theme": "Modifier le theme",
@@ -1492,7 +1508,11 @@
     "field.popup_selection_fg": "Premier plan selection popup",
     "field.popup_selection_fg_desc": "Couleur du texte de l'element selectionne du popup",
     "field.whitespace_indicator_fg": "Indicateur d'espaces premier plan",
-    "field.whitespace_indicator_fg_desc": "Couleur de premier plan pour les indicateurs d'espaces (flèches de tabulation et points d'espace)"
+    "field.whitespace_indicator_fg_desc": "Couleur de premier plan pour les indicateurs d'espaces (flèches de tabulation et points d'espace)",
+    "field.punctuation_bracket": "Parenthese",
+    "field.punctuation_bracket_desc": "Parentheses et crochets ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "Delimiteur",
+    "field.punctuation_delimiter_desc": "Delimiteurs et separateurs (;, ,, .)"
   },
   "ja": {
     "cmd.edit_theme": "テーマを編集",
@@ -1791,7 +1811,11 @@
     "field.popup_selection_fg": "ポップアップ選択前景",
     "field.popup_selection_fg_desc": "ポップアップの選択項目の文字颜色",
     "field.whitespace_indicator_fg": "空白インジケーター前景",
-    "field.whitespace_indicator_fg_desc": "空白インジケーターの前景色（タブ矢印とスペースドット）"
+    "field.whitespace_indicator_fg_desc": "空白インジケーターの前景色（タブ矢印とスペースドット）",
+    "field.punctuation_bracket": "括弧",
+    "field.punctuation_bracket_desc": "括弧 ({、}、(、)、[、])",
+    "field.punctuation_delimiter": "区切り文字",
+    "field.punctuation_delimiter_desc": "区切り文字 (;、,、.)"
   },
   "ko": {
     "cmd.edit_theme": "편집 Theme",
@@ -2090,7 +2114,11 @@
     "field.popup_selection_fg": "팝업 선택 전경",
     "field.popup_selection_fg_desc": "팝업 selected item 텍스트 색상",
     "field.whitespace_indicator_fg": "공백 표시기 전경",
-    "field.whitespace_indicator_fg_desc": "공백 표시기의 전경색 (탭 화살표 및 공백 점)"
+    "field.whitespace_indicator_fg_desc": "공백 표시기의 전경색 (탭 화살표 및 공백 점)",
+    "field.punctuation_bracket": "괄호",
+    "field.punctuation_bracket_desc": "괄호s ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "구분자",
+    "field.punctuation_delimiter_desc": "구분자s (;, ,, .)"
   },
   "pt-BR": {
     "cmd.edit_theme": "editar Theme",
@@ -2389,7 +2417,11 @@
     "field.popup_selection_fg": "popup seleção primeiro plano",
     "field.popup_selection_fg_desc": "popup selected item texto cor",
     "field.whitespace_indicator_fg": "Indicador de espaço em branco primeiro plano",
-    "field.whitespace_indicator_fg_desc": "Cor de primeiro plano para indicadores de espaço em branco (setas de tabulação e pontos de espaço)"
+    "field.whitespace_indicator_fg_desc": "Cor de primeiro plano para indicadores de espaço em branco (setas de tabulação e pontos de espaço)",
+    "field.punctuation_bracket": "parêntese",
+    "field.punctuation_bracket_desc": "parênteses ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "delimitador",
+    "field.punctuation_delimiter_desc": "delimitadors (;, ,, .)"
   },
   "ru": {
     "cmd.edit_theme": "редактировать Theme",
@@ -2688,7 +2720,11 @@
     "field.popup_selection_fg": "всплывающее окно выделение передний план",
     "field.popup_selection_fg_desc": "всплывающее окно selected item текст цвет",
     "field.whitespace_indicator_fg": "Индикатор пробелов передний план",
-    "field.whitespace_indicator_fg_desc": "Цвет переднего плана для индикаторов пробелов (стрелки табуляции и точки пробелов)"
+    "field.whitespace_indicator_fg_desc": "Цвет переднего плана для индикаторов пробелов (стрелки табуляции и точки пробелов)",
+    "field.punctuation_bracket": "скобка",
+    "field.punctuation_bracket_desc": "скобкаs ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "разделитель",
+    "field.punctuation_delimiter_desc": "разделительs (;, ,, .)"
   },
   "th": {
     "cmd.edit_theme": "แก้ไข Theme",
@@ -2987,7 +3023,11 @@
     "field.popup_selection_fg": "ป๊อปอัป การเลือก พื้นหน้า",
     "field.popup_selection_fg_desc": "ป๊อปอัป selected item ข้อความ สี",
     "field.whitespace_indicator_fg": "ตัวบ่งชี้ช่องว่างพื้นหน้า",
-    "field.whitespace_indicator_fg_desc": "สีพื้นหน้าสำหรับตัวบ่งชี้ช่องว่าง (ลูกศรแท็บและจุดเว้นวรรค)"
+    "field.whitespace_indicator_fg_desc": "สีพื้นหน้าสำหรับตัวบ่งชี้ช่องว่าง (ลูกศรแท็บและจุดเว้นวรรค)",
+    "field.punctuation_bracket": "วงเล็บ",
+    "field.punctuation_bracket_desc": "วงเล็บs ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "ตัวคั่น",
+    "field.punctuation_delimiter_desc": "ตัวคั่นs (;, ,, .)"
   },
   "uk": {
     "cmd.edit_theme": "редагувати Theme",
@@ -3286,7 +3326,11 @@
     "field.popup_selection_fg": "спливаюче вікно виділення передний план",
     "field.popup_selection_fg_desc": "спливаюче вікно selected item текст цвет",
     "field.whitespace_indicator_fg": "Індикатор пробілів передній план",
-    "field.whitespace_indicator_fg_desc": "Колір переднього плану для індикаторів пробілів (стрілки табуляції та крапки пробілів)"
+    "field.whitespace_indicator_fg_desc": "Колір переднього плану для індикаторів пробілів (стрілки табуляції та крапки пробілів)",
+    "field.punctuation_bracket": "дужка",
+    "field.punctuation_bracket_desc": "дужкаs ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "роздільник",
+    "field.punctuation_delimiter_desc": "роздільникs (;, ,, .)"
   },
   "vi": {
     "cmd.edit_theme": "Chỉnh sửa giao diện",
@@ -3585,7 +3629,11 @@
     "field.popup_selection_fg": "Tiền cảnh lựa chọn cửa sổ bật lên",
     "field.popup_selection_fg_desc": "Màu văn bản mục đã chọn trong cửa sổ bật lên",
     "field.whitespace_indicator_fg": "Chỉ báo khoảng trắng tiền cảnh",
-    "field.whitespace_indicator_fg_desc": "Màu tiền cảnh cho chỉ báo khoảng trắng (mũi tên tab và dấu chấm khoảng trắng)"
+    "field.whitespace_indicator_fg_desc": "Màu tiền cảnh cho chỉ báo khoảng trắng (mũi tên tab và dấu chấm khoảng trắng)",
+    "field.punctuation_bracket": "Dấu ngoặc",
+    "field.punctuation_bracket_desc": "Dấu ngoặc ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "Dấu phân cách",
+    "field.punctuation_delimiter_desc": "Dấu phân cách (;, ,, .)"
   },
   "zh-CN": {
     "cmd.edit_theme": "编辑主题",
@@ -3884,7 +3932,11 @@
     "field.popup_selection_fg": "弹出窗口选择前景",
     "field.popup_selection_fg_desc": "弹出窗口选中项文字颜色",
     "field.whitespace_indicator_fg": "空白指示器前景",
-    "field.whitespace_indicator_fg_desc": "空白指示器的前景颜色（制表符箭头和空格点）"
+    "field.whitespace_indicator_fg_desc": "空白指示器的前景颜色（制表符箭头和空格点）",
+    "field.punctuation_bracket": "括号",
+    "field.punctuation_bracket_desc": "括号 ({、}、(、)、[、])",
+    "field.punctuation_delimiter": "分隔符",
+    "field.punctuation_delimiter_desc": "分隔符 (;、,、.)"
   },
   "it": {
     "cmd.edit_theme": "Modifica tema",
@@ -4183,6 +4235,10 @@
     "field.popup_selection_fg": "Primo piano selezione popup",
     "field.popup_selection_fg_desc": "Colore del testo dell elemento selezionato nel popup",
     "field.whitespace_indicator_fg": "Indicatore spazi bianchi primo piano",
-    "field.whitespace_indicator_fg_desc": "Colore primo piano per gli indicatori di spazi bianchi (frecce di tabulazione e punti di spazio)"
+    "field.whitespace_indicator_fg_desc": "Colore primo piano per gli indicatori di spazi bianchi (frecce di tabulazione e punti di spazio)",
+    "field.punctuation_bracket": "Parentesi",
+    "field.punctuation_bracket_desc": "Parentesi e parentesi quadre ({, }, (, ), [, ])",
+    "field.punctuation_delimiter": "Delimitatore",
+    "field.punctuation_delimiter_desc": "Delimitatori e separatori (;, ,, .)"
   }
 }

package/plugins/theme_editor.ts

@@ -74,28 +74,28 @@ type PickerFocusTarget =
 // =============================================================================
 
 const NAMED_COLORS_PER_ROW = 6;
-const NAMED_COLOR_GRID: Array<Array<{ display: string; value: string; rgb: RGB | null }>> = [
+const NAMED_COLOR_GRID: Array<Array<{ display: string; value: string; rgb: OverlayColorSpec | null }>> = [
   [
-    { display: "Black", value: "Black", rgb: [0, 0, 0] },
-    { display: "Red", value: "Red", rgb: [255, 0, 0] },
-    { display: "Green", value: "Green", rgb: [0, 128, 0] },
-    { display: "Yellow", value: "Yellow", rgb: [255, 255, 0] },
-    { display: "Blue", value: "Blue", rgb: [0, 0, 255] },
-    { display: "Magenta", value: "Magenta", rgb: [255, 0, 255] },
+    { display: "Black", value: "Black", rgb: "Black" },
+    { display: "Red", value: "Red", rgb: "Red" },
+    { display: "Green", value: "Green", rgb: "Green" },
+    { display: "Yellow", value: "Yellow", rgb: "Yellow" },
+    { display: "Blue", value: "Blue", rgb: "Blue" },
+    { display: "Magenta", value: "Magenta", rgb: "Magenta" },
   ],
   [
-    { display: "Cyan", value: "Cyan", rgb: [0, 255, 255] },
-    { display: "Gray", value: "Gray", rgb: [128, 128, 128] },
-    { display: "DkGray", value: "DarkGray", rgb: [169, 169, 169] },
-    { display: "LtRed", value: "LightRed", rgb: [255, 128, 128] },
-    { display: "LtGreen", value: "LightGreen", rgb: [144, 238, 144] },
-    { display: "LtYellw", value: "LightYellow", rgb: [255, 255, 224] },
+    { display: "Cyan", value: "Cyan", rgb: "Cyan" },
+    { display: "Gray", value: "Gray", rgb: "Gray" },
+    { display: "DkGray", value: "DarkGray", rgb: "DarkGray" },
+    { display: "LtRed", value: "LightRed", rgb: "LightRed" },
+    { display: "LtGreen", value: "LightGreen", rgb: "LightGreen" },
+    { display: "LtYellw", value: "LightYellow", rgb: "LightYellow" },
   ],
   [
-    { display: "LtBlue", value: "LightBlue", rgb: [173, 216, 230] },
-    { display: "LtMag", value: "LightMagenta", rgb: [255, 128, 255] },
-    { display: "LtCyan", value: "LightCyan", rgb: [224, 255, 255] },
-    { display: "White", value: "White", rgb: [255, 255, 255] },
+    { display: "LtBlue", value: "LightBlue", rgb: "LightBlue" },
+    { display: "LtMag", value: "LightMagenta", rgb: "LightMagenta" },
+    { display: "LtCyan", value: "LightCyan", rgb: "LightCyan" },
+    { display: "White", value: "White", rgb: "White" },
     { display: "Default", value: "Default", rgb: null },
     { display: "Reset", value: "Reset", rgb: null },
   ],
@@ -555,6 +555,27 @@ function parseColorToRgb(value: ColorValue): RGB | null {
   return null;
 }
 
+/**
+ * Convert a color value to an OverlayColorSpec for rendering.
+ * Named colors (e.g. "Yellow") are sent as strings so the editor renders them
+ * using native ANSI color codes, matching the actual theme rendering.
+ * RGB arrays are passed through directly.
+ */
+function colorValueToOverlaySpec(value: ColorValue): OverlayColorSpec | null {
+  if (Array.isArray(value) && value.length === 3) {
+    return value as RGB;
+  }
+  if (typeof value === "string") {
+    // For recognized named colors, send the name directly so the editor
+    // uses native ANSI rendering (matching actual theme output)
+    if (NAMED_COLORS[value] !== undefined) {
+      return value;
+    }
+    return null;
+  }
+  return null;
+}
+
 /**
  * Convert RGB to hex string
  */
@@ -856,14 +877,19 @@ function buildPickerLines(): PickerLine[] {
   lines.push({ text: `"${field.def.description}"`, type: "picker-desc" });
   lines.push({ text: "─".repeat(RIGHT_WIDTH - 2), type: "picker-separator" });
 
-  // Hex / RGB value
-  const colorStr = formatColorValue(field.value);
-  const rgb = parseColorToRgb(field.value);
-  let valueLine = `Hex: ${colorStr}`;
-  if (rgb) {
-    valueLine += `     RGB: ${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+  // Color value display
+  const isNamed = typeof field.value === "string" && NAMED_COLORS[field.value] !== undefined;
+  if (isNamed) {
+    lines.push({ text: `Color: ${field.value} (terminal native)`, type: "picker-hex" });
+  } else {
+    const colorStr = formatColorValue(field.value);
+    const rgb = parseColorToRgb(field.value);
+    let valueLine = `Hex: ${colorStr}`;
+    if (rgb) {
+      valueLine += `     RGB: ${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+    }
+    lines.push({ text: valueLine, type: "picker-hex" });
   }
-  lines.push({ text: valueLine, type: "picker-hex" });
 
   lines.push({ text: "", type: "picker-blank" });
 
@@ -929,14 +955,22 @@ function styleForLeftEntry(item: TreeLine | undefined): { style?: Partial<Overla
     const paddedLen = getUtf8ByteLength(text.padEnd(LEFT_WIDTH));
     const colorValue = item.colorValue;
     const swatchIdx = colorValue !== undefined ? text.indexOf("██") : -1;
-    const rgb = colorValue !== undefined ? parseColorToRgb(colorValue) : null;
 
-    if (rgb && swatchIdx >= 0) {
+    // For the swatch, use the native color representation to ensure it matches
+    // how the theme actually renders: named colors (e.g. "Yellow") should use
+    // the terminal's native ANSI color, not an RGB approximation.
+    const swatchColor: OverlayColorSpec | null = colorValue !== undefined
+      ? (typeof colorValue === "string" && NAMED_COLORS[colorValue] !== undefined
+        ? colorValue as OverlayColorSpec  // Send named color string directly
+        : parseColorToRgb(colorValue))    // Send RGB for array values
+      : null;
+
+    if (swatchColor && swatchIdx >= 0) {
       const swatchStart = getUtf8ByteLength(text.substring(0, swatchIdx));
       const swatchEnd = swatchStart + getUtf8ByteLength("██");
       // Non-overlapping segments: fieldName | swatch | value
       inlines.push({ start: 0, end: swatchStart, style: { fg: colors.fieldName } });
-      inlines.push({ start: swatchStart, end: swatchEnd, style: { fg: rgb, bg: rgb } });
+      inlines.push({ start: swatchStart, end: swatchEnd, style: { fg: swatchColor, bg: swatchColor } });
       const valueStart = swatchEnd + getUtf8ByteLength(" ");
       if (valueStart < paddedLen) {
         inlines.push({ start: valueStart, end: paddedLen, style: { fg: colors.customValue } });
@@ -1015,10 +1049,10 @@ function styleForRightEntry(item: PickerLine | undefined): { style?: Partial<Ove
     // entry text = " " + item.text
     // item.text = " " + token texts concatenated
     const editorBg = getNestedValue(state.themeData, "editor.bg") as ColorValue;
-    const bgRgb = parseColorToRgb(editorBg);
+    const bgSpec = colorValueToOverlaySpec(editorBg);
     const entryText = " " + item.text;
     const entryLen = getUtf8ByteLength(entryText);
-    const baseStyle: Partial<OverlayOptions> | undefined = bgRgb ? { bg: bgRgb } : undefined;
+    const baseStyle: Partial<OverlayOptions> | undefined = bgSpec ? { bg: bgSpec } : undefined;
 
     // Skip the leading " " + " " (from entry " " prefix + item.text leading " ")
     let charPos = 2; // " " prefix + " " in item.text
@@ -1028,15 +1062,15 @@ function styleForRightEntry(item: PickerLine | undefined): { style?: Partial<Ove
       if (token.syntaxType) {
         const syntaxPath = `syntax.${token.syntaxType}`;
         const syntaxColor = getNestedValue(state.themeData, syntaxPath) as ColorValue;
-        const syntaxRgb = parseColorToRgb(syntaxColor);
-        if (syntaxRgb) {
-          inlines.push({ start: bytePos, end: bytePos + tokenLen, style: { fg: syntaxRgb } });
+        const fgSpec = colorValueToOverlaySpec(syntaxColor);
+        if (fgSpec) {
+          inlines.push({ start: bytePos, end: bytePos + tokenLen, style: { fg: fgSpec } });
         }
       } else {
         const fgColor = getNestedValue(state.themeData, "editor.fg") as ColorValue;
-        const fgRgb = parseColorToRgb(fgColor);
-        if (fgRgb) {
-          inlines.push({ start: bytePos, end: bytePos + tokenLen, style: { fg: fgRgb } });
+        const fgSpec = colorValueToOverlaySpec(fgColor);
+        if (fgSpec) {
+          inlines.push({ start: bytePos, end: bytePos + tokenLen, style: { fg: fgSpec } });
         }
       }
       bytePos += tokenLen;
@@ -1344,11 +1378,9 @@ function buildColorSuggestions(field: ThemeField): PromptSuggestion[] {
     suggestions.push({ text: name, description: editor.t("suggestion.terminal_native"), value: name });
   }
 
-  // Add named colors with hex format
+  // Add named colors (terminal native - no hex shown since actual color depends on terminal)
   for (const name of NAMED_COLOR_LIST) {
-    const rgb = NAMED_COLORS[name];
-    const hexValue = rgbToHex(rgb[0], rgb[1], rgb[2]);
-    suggestions.push({ text: name, description: hexValue, value: name });
+    suggestions.push({ text: name, description: editor.t("suggestion.terminal_native"), value: name });
   }
 
   return suggestions;

package/plugins/toml-lsp.ts

@@ -0,0 +1,162 @@
+/// <reference path="./lib/fresh.d.ts" />
+const editor = getEditor();
+
+/**
+ * TOML LSP Helper Plugin
+ *
+ * Provides user-friendly error handling for TOML LSP server issues.
+ * When taplo fails to start, this plugin shows an actionable
+ * popup with installation instructions.
+ *
+ * Features:
+ * - Detects TOML LSP server errors (taplo)
+ * - Shows popup with install commands (cargo, npm, brew)
+ * - Allows copying install commands to clipboard
+ * - Provides option to disable TOML LSP
+ *
+ * Notes:
+ * - Taplo supports schema validation for Cargo.toml, pyproject.toml, etc.
+ * - Also available as a VS Code extension and CLI formatter
+ */
+
+interface LspServerErrorData {
+  language: string;
+  server_command: string;
+  error_type: string;
+  message: string;
+}
+
+interface LspStatusClickedData {
+  language: string;
+  has_error: boolean;
+}
+
+interface ActionPopupResultData {
+  popup_id: string;
+  action_id: string;
+}
+
+// Install commands for TOML LSP server (taplo)
+// See: https://taplo.tamasfe.dev/cli/installation.html
+const INSTALL_COMMANDS = {
+  cargo: "cargo install taplo-cli --locked",
+  npm: "npm i -g @taplo/cli",
+  brew: "brew install taplo",
+};
+
+// Track error state for TOML LSP
+let tomlLspError: { serverCommand: string; message: string } | null = null;
+
+/**
+ * Handle LSP server errors for TOML
+ */
+function on_toml_lsp_server_error(data: LspServerErrorData): void {
+  // Only handle TOML language errors
+  if (data.language !== "toml") {
+    return;
+  }
+
+  editor.debug(`toml-lsp: Server error - ${data.error_type}: ${data.message}`);
+
+  // Store error state for later reference
+  tomlLspError = {
+    serverCommand: data.server_command,
+    message: data.message,
+  };
+
+  // Show a status message for immediate feedback
+  if (data.error_type === "not_found") {
+    editor.setStatus(
+      `TOML LSP server '${data.server_command}' not found. Click status bar for help.`
+    );
+  } else {
+    editor.setStatus(`TOML LSP error: ${data.message}`);
+  }
+}
+registerHandler("on_toml_lsp_server_error", on_toml_lsp_server_error);
+
+// Register hook for LSP server errors
+editor.on("lsp_server_error", "on_toml_lsp_server_error");
+
+/**
+ * Handle status bar click when there's a TOML LSP error
+ */
+function on_toml_lsp_status_clicked(
+  data: LspStatusClickedData
+): void {
+  // Only handle TOML language clicks when there's an error
+  if (data.language !== "toml" || !tomlLspError) {
+    return;
+  }
+
+  editor.debug("toml-lsp: Status clicked, showing help popup");
+
+  // Show action popup with install options
+  editor.showActionPopup({
+    id: "toml-lsp-help",
+    title: "TOML Language Server Not Found",
+    message: `"${tomlLspError.serverCommand}" provides code completion, validation, formatting, and schema support for TOML files (Cargo.toml, pyproject.toml, etc.). Copy a command below to install it, or visit https://taplo.tamasfe.dev/cli/installation.html for details.`,
+    actions: [
+      { id: "copy_cargo", label: `Copy: ${INSTALL_COMMANDS.cargo}` },
+      { id: "copy_npm", label: `Copy: ${INSTALL_COMMANDS.npm}` },
+      { id: "copy_brew", label: `Copy: ${INSTALL_COMMANDS.brew}` },
+      { id: "disable", label: "Disable TOML LSP" },
+      { id: "dismiss", label: "Dismiss (ESC)" },
+    ],
+  });
+}
+registerHandler("on_toml_lsp_status_clicked", on_toml_lsp_status_clicked);
+
+// Register hook for status bar clicks
+editor.on("lsp_status_clicked", "on_toml_lsp_status_clicked");
+
+/**
+ * Handle action popup results for TOML LSP help
+ */
+function on_toml_lsp_action_result(
+  data: ActionPopupResultData
+): void {
+  // Only handle our popup
+  if (data.popup_id !== "toml-lsp-help") {
+    return;
+  }
+
+  editor.debug(`toml-lsp: Action selected - ${data.action_id}`);
+
+  switch (data.action_id) {
+    case "copy_cargo":
+      editor.setClipboard(INSTALL_COMMANDS.cargo);
+      editor.setStatus("Copied: " + INSTALL_COMMANDS.cargo);
+      break;
+
+    case "copy_npm":
+      editor.setClipboard(INSTALL_COMMANDS.npm);
+      editor.setStatus("Copied: " + INSTALL_COMMANDS.npm);
+      break;
+
+    case "copy_brew":
+      editor.setClipboard(INSTALL_COMMANDS.brew);
+      editor.setStatus("Copied: " + INSTALL_COMMANDS.brew);
+      break;
+
+    case "disable":
+      editor.disableLspForLanguage("toml");
+      editor.setStatus("TOML LSP disabled");
+      tomlLspError = null;
+      break;
+
+    case "dismiss":
+    case "dismissed":
+      // Just close the popup without action
+      break;
+
+    default:
+      editor.debug(`toml-lsp: Unknown action: ${data.action_id}`);
+  }
+}
+registerHandler("on_toml_lsp_action_result", on_toml_lsp_action_result);
+
+// Register hook for action popup results
+editor.on("action_popup_result", "on_toml_lsp_action_result");
+
+editor.debug("toml-lsp: Plugin loaded");