From ae351257b69ac1ebab71ebc9310a87a50a626db7 Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Tue, 30 Dec 2025 01:45:24 +0100 Subject: [PATCH] Fix tree selector: proper selectedBg theme color, correct filter logic - Add selectedBg theme color for active line highlight - Fix filter modes: - no-tools: default minus tool results (still hides label/custom) - user-only: just user messages - labeled-only: just labeled entries - all: everything - Update theme.md with new color tokens (50 total) --- packages/coding-agent/docs/theme.md | 8 +++- .../interactive/components/tree-selector.ts | 38 ++++++++++++------- .../src/modes/interactive/theme/dark.json | 2 + .../src/modes/interactive/theme/light.json | 2 + .../src/modes/interactive/theme/theme.ts | 12 +++++- 5 files changed, 45 insertions(+), 17 deletions(-) diff --git a/packages/coding-agent/docs/theme.md b/packages/coding-agent/docs/theme.md index 06f674cb..ac3fa237 100644 --- a/packages/coding-agent/docs/theme.md +++ b/packages/coding-agent/docs/theme.md @@ -21,12 +21,16 @@ Every theme must define all color tokens. There are no optional colors. | `dim` | Very dimmed text | Less important info, placeholders | | `text` | Default text color | Main content (usually `""`) | -### Backgrounds & Content Text (7 colors) +### Backgrounds & Content Text (11 colors) | Token | Purpose | |-------|---------| +| `selectedBg` | Selected/active line background (e.g., tree selector) | | `userMessageBg` | User message background | | `userMessageText` | User message text color | +| `customMessageBg` | Hook custom message background | +| `customMessageText` | Hook custom message text color | +| `customMessageLabel` | Hook custom message label/type text | | `toolPendingBg` | Tool execution box (pending state) | | `toolSuccessBg` | Tool execution box (success state) | | `toolErrorBg` | Tool execution box (error state) | @@ -95,7 +99,7 @@ These create a visual hierarchy: off → minimal → low → medium → high → |-------|---------| | `bashMode` | Editor border color when in bash mode (! prefix) | -**Total: 46 color tokens** (all required) +**Total: 50 color tokens** (all required) ## Theme Format diff --git a/packages/coding-agent/src/modes/interactive/components/tree-selector.ts b/packages/coding-agent/src/modes/interactive/components/tree-selector.ts index fc213933..77b64ee3 100644 --- a/packages/coding-agent/src/modes/interactive/components/tree-selector.ts +++ b/packages/coding-agent/src/modes/interactive/components/tree-selector.ts @@ -262,18 +262,30 @@ class TreeList implements Component { // Apply filter mode let passesFilter = true; - if (this.filterMode === "user-only") { - passesFilter = - (entry.type === "message" && entry.message.role === "user") || - (entry.type === "custom_message" && entry.display); - } else if (this.filterMode === "no-tools") { - // Hide tool results - passesFilter = !(entry.type === "message" && entry.message.role === "toolResult"); - } else if (this.filterMode === "labeled-only") { - passesFilter = flatNode.node.label !== undefined; - } else if (this.filterMode !== "all") { - // Default mode: hide label and custom entries - passesFilter = entry.type !== "label" && entry.type !== "custom"; + switch (this.filterMode) { + case "user-only": + // Just user messages + passesFilter = entry.type === "message" && entry.message.role === "user"; + break; + case "no-tools": + // Default minus tool results (still hide label/custom entries) + passesFilter = + entry.type !== "label" && + entry.type !== "custom" && + !(entry.type === "message" && entry.message.role === "toolResult"); + break; + case "labeled-only": + // Just labeled entries + passesFilter = flatNode.node.label !== undefined; + break; + case "all": + // Show everything + passesFilter = true; + break; + default: + // Default mode: hide label and custom entries + passesFilter = entry.type !== "label" && entry.type !== "custom"; + break; } if (!passesFilter) return false; @@ -464,7 +476,7 @@ class TreeList implements Component { let line = cursor + theme.fg("dim", prefix) + pathMarker + label + content; if (isSelected) { - line = theme.inverse(line); + line = theme.bg("selectedBg", line); } lines.push(truncateToWidth(line, width)); } diff --git a/packages/coding-agent/src/modes/interactive/theme/dark.json b/packages/coding-agent/src/modes/interactive/theme/dark.json index 25c61db6..f55be9f7 100644 --- a/packages/coding-agent/src/modes/interactive/theme/dark.json +++ b/packages/coding-agent/src/modes/interactive/theme/dark.json @@ -11,6 +11,7 @@ "dimGray": "#666666", "darkGray": "#505050", "accent": "#8abeb7", + "selectedBg": "#3a3a4a", "userMsgBg": "#343541", "toolPendingBg": "#282832", "toolSuccessBg": "#283228", @@ -29,6 +30,7 @@ "dim": "dimGray", "text": "", + "selectedBg": "selectedBg", "userMessageBg": "userMsgBg", "userMessageText": "", "customMessageBg": "customMsgBg", diff --git a/packages/coding-agent/src/modes/interactive/theme/light.json b/packages/coding-agent/src/modes/interactive/theme/light.json index 36e9c763..a4276853 100644 --- a/packages/coding-agent/src/modes/interactive/theme/light.json +++ b/packages/coding-agent/src/modes/interactive/theme/light.json @@ -10,6 +10,7 @@ "mediumGray": "#6c6c6c", "dimGray": "#8a8a8a", "lightGray": "#b0b0b0", + "selectedBg": "#d0d0e0", "userMsgBg": "#e8e8e8", "toolPendingBg": "#e8e8f0", "toolSuccessBg": "#e8f0e8", @@ -28,6 +29,7 @@ "dim": "dimGray", "text": "", + "selectedBg": "selectedBg", "userMessageBg": "userMsgBg", "userMessageText": "", "customMessageBg": "customMsgBg", diff --git a/packages/coding-agent/src/modes/interactive/theme/theme.ts b/packages/coding-agent/src/modes/interactive/theme/theme.ts index 915182f0..c0d8bf66 100644 --- a/packages/coding-agent/src/modes/interactive/theme/theme.ts +++ b/packages/coding-agent/src/modes/interactive/theme/theme.ts @@ -34,7 +34,8 @@ const ThemeJsonSchema = Type.Object({ muted: ColorValueSchema, dim: ColorValueSchema, text: ColorValueSchema, - // Backgrounds & Content Text (10 colors) + // Backgrounds & Content Text (11 colors) + selectedBg: ColorValueSchema, userMessageBg: ColorValueSchema, userMessageText: ColorValueSchema, customMessageBg: ColorValueSchema, @@ -132,7 +133,13 @@ export type ThemeColor = | "thinkingXhigh" | "bashMode"; -export type ThemeBg = "userMessageBg" | "customMessageBg" | "toolPendingBg" | "toolSuccessBg" | "toolErrorBg"; +export type ThemeBg = + | "selectedBg" + | "userMessageBg" + | "customMessageBg" + | "toolPendingBg" + | "toolSuccessBg" + | "toolErrorBg"; type ColorMode = "truecolor" | "256color"; @@ -488,6 +495,7 @@ function createTheme(themeJson: ThemeJson, mode?: ColorMode): Theme { const fgColors: Record = {} as Record; const bgColors: Record = {} as Record; const bgColorKeys: Set = new Set([ + "selectedBg", "userMessageBg", "customMessageBg", "toolPendingBg",