From b0a01389e3b5d187cff6508264ef7998701d6152 Mon Sep 17 00:00:00 2001 From: HiranoMasaaki Date: Wed, 4 Mar 2026 15:32:57 +0000 Subject: [PATCH] fix: correct context window usage indicator icon thresholds MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The pie chart symbols (◔◑◕●) were mapped to wrong percentage ranges, causing icons to over-represent actual usage. Now icons switch at the percentage matching their visual fill level (25%, 50%, 75%) and an empty circle (○) is used below 5%. Co-Authored-By: Claude Opus 4.6 --- .changeset/fix-usage-indicator-icons.md | 5 +++++ packages/tui-components/src/constants.ts | 2 +- .../src/execution/components/delegation-tree.tsx | 9 +++++---- 3 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 .changeset/fix-usage-indicator-icons.md diff --git a/.changeset/fix-usage-indicator-icons.md b/.changeset/fix-usage-indicator-icons.md new file mode 100644 index 00000000..f4d2142b --- /dev/null +++ b/.changeset/fix-usage-indicator-icons.md @@ -0,0 +1,5 @@ +--- +"@perstack/tui-components": patch +--- + +fix: correct context window usage pie chart icon thresholds to match visual representation diff --git a/packages/tui-components/src/constants.ts b/packages/tui-components/src/constants.ts index d8cb87c6..bd4ca523 100644 --- a/packages/tui-components/src/constants.ts +++ b/packages/tui-components/src/constants.ts @@ -46,7 +46,7 @@ export const KEY_BINDINGS = { export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const -export const USAGE_INDICATORS = { LOW: "◔", MEDIUM: "◑", HIGH: "◕", FULL: "●" } as const +export const USAGE_INDICATORS = { EMPTY: "○", LOW: "◔", MEDIUM: "◑", HIGH: "◕", FULL: "●" } as const export const KEY_HINTS = { NAVIGATE: `${KEY_BINDINGS.NAVIGATE_UP}${KEY_BINDINGS.NAVIGATE_DOWN}:Navigate`, diff --git a/packages/tui-components/src/execution/components/delegation-tree.tsx b/packages/tui-components/src/execution/components/delegation-tree.tsx index c919ddcf..b281f151 100644 --- a/packages/tui-components/src/execution/components/delegation-tree.tsx +++ b/packages/tui-components/src/execution/components/delegation-tree.tsx @@ -7,10 +7,11 @@ import { flattenTree } from "../hooks/use-delegation-tree.js" import { useSpinner } from "../hooks/use-spinner.js" function getUsageIcon(percent: number): string { - if (percent <= 25) return USAGE_INDICATORS.LOW - if (percent <= 50) return USAGE_INDICATORS.MEDIUM - if (percent <= 75) return USAGE_INDICATORS.HIGH - return USAGE_INDICATORS.FULL + if (percent >= 75) return USAGE_INDICATORS.FULL + if (percent >= 50) return USAGE_INDICATORS.HIGH + if (percent >= 25) return USAGE_INDICATORS.MEDIUM + if (percent >= 5) return USAGE_INDICATORS.LOW + return USAGE_INDICATORS.EMPTY } function buildPrefix(flatNode: FlatTreeNode): string {