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)
This commit is contained in:
Mario Zechner 2025-12-30 01:45:24 +01:00
parent e7d438b59d
commit ae351257b6
5 changed files with 45 additions and 17 deletions

View file

@ -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));
}

View file

@ -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",

View file

@ -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",

View file

@ -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<ThemeColor, string | number> = {} as Record<ThemeColor, string | number>;
const bgColors: Record<ThemeBg, string | number> = {} as Record<ThemeBg, string | number>;
const bgColorKeys: Set<string> = new Set([
"selectedBg",
"userMessageBg",
"customMessageBg",
"toolPendingBg",