From e65ea52c8781f34a165f098bed37ee0236ed11aa Mon Sep 17 00:00:00 2001
From: 4 Bytes Robby <robby@4bytes.de>
Date: Sat, 13 Jun 2026 11:32:01 +0200
Subject: [PATCH 1/3] fix: move unicode to end of token display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #35

Header now reads 'Tokens 📊' (suffix emoji) instead of '📊 Tokens' (prefix).
---
 src/tui.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tui.tsx b/src/tui.tsx
index dc19c06..1635844 100644
--- a/src/tui.tsx
+++ b/src/tui.tsx
@@ -47,7 +47,7 @@ function TokenMeterView() {
   return (
     <box flexDirection="column" paddingLeft={0} paddingRight={1} paddingTop={1} paddingBottom={0}>
       <text>
-        <b>📊 Tokens</b>
+        <b>Tokens 📊</b>
       </text>
       
       {!connected() && (

From 5ee15d45b067ab0814c7b25608538e37ef8880b3 Mon Sep 17 00:00:00 2001
From: 4 Bytes Robby <robby@4bytes.de>
Date: Sat, 13 Jun 2026 11:59:59 +0200
Subject: [PATCH 2/3] refactor: use shared TokenMeter component from plugin-lib

---
 src/tui.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/tui.tsx b/src/tui.tsx
index 1635844..a938cb7 100644
--- a/src/tui.tsx
+++ b/src/tui.tsx
@@ -2,7 +2,7 @@
 import { createSignal, onMount, onCleanup } from "solid-js";
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/tui";
 import { BusTui } from "@four-bytes/opencode-plugin-lib/tui";
-import { ProgressBar } from "@four-bytes/opencode-plugin-lib/tui-components";
+import { TokenMeter } from "@four-bytes/opencode-plugin-lib/tui-components";
 
 const SIDEBAR_ORDER = 42;
 
@@ -46,18 +46,14 @@ function TokenMeterView() {
 
   return (
     <box flexDirection="column" paddingLeft={0} paddingRight={1} paddingTop={1} paddingBottom={0}>
-      <text>
-        <b>Tokens 📊</b>
-      </text>
-      
       {!connected() && (
         <text fg="#888">connecting...</text>
       )}
 
       {connected() && (
-        <ProgressBar
-          current={tokens()}
-          total={limit()}
+        <TokenMeter
+          tokens={tokens()}
+          softLimit={limit()}
           colors={{ green: "#4caf50", orange: "#ff9800", red: "#f44336" }}
         />
       )}

From c68d456bc616e21514e79876316e72aa432ce409 Mon Sep 17 00:00:00 2001
From: 4 Bytes Robby <robby@4bytes.de>
Date: Sat, 13 Jun 2026 12:05:21 +0200
Subject: [PATCH 3/3] fix: remove extra padding from token meter box

---
 src/tui.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tui.tsx b/src/tui.tsx
index a938cb7..6364df0 100644
--- a/src/tui.tsx
+++ b/src/tui.tsx
@@ -45,7 +45,7 @@ function TokenMeterView() {
 
 
   return (
-    <box flexDirection="column" paddingLeft={0} paddingRight={1} paddingTop={1} paddingBottom={0}>
+    <box flexDirection="column">
       {!connected() && (
         <text fg="#888">connecting...</text>
       )}