From 41437e1751030e8ec1e17458c657dc5312397b8c Mon Sep 17 00:00:00 2001
From: matt <matt@takoyaki.cool>
Date: Thu, 16 Oct 2025 22:13:15 -0700
Subject: [PATCH] feat: make token counter visible by default with color coding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Remove display:none from token counter (always visible)
- Add compact formatting (2.5k / 200k tokens instead of 2500 tokens)
- Color coding based on usage percentage:
  - Green: < 50% usage
  - Yellow: 50-80% usage
  - Red: > 80% usage
- Keep counter visible even on error (shows 0 / 200k)
- Improve discoverability of token tracking feature

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/index.html |  2 +-
 src/main.js    | 32 +++++++++++++++++++++++++++-----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/index.html b/src/index.html
index 13e5b71..b04c1c7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -662,7 +662,7 @@
         </form>
         <div class="status-bar">
           <span id="status-text" class="status-text">Ready</span>
-          <div id="token-counter" class="token-counter" style="display: none;">
+          <div id="token-counter" class="token-counter">
             <span id="token-count-total" class="token-count">0 tokens</span>
             <button id="token-details-btn" class="token-details-btn" title="Show breakdown">
               <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
diff --git a/src/main.js b/src/main.js
index 4c32e05..c6baef6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1639,6 +1639,14 @@ function setupKeyboardShortcuts() {
 // Token Counter
 let tokenUpdateTimeout = null;
 
+// Helper function to format token counts
+function formatTokenCount(count) {
+  if (count >= 1000) {
+    return (count / 1000).toFixed(1) + 'k';
+  }
+  return count.toString();
+}
+
 async function updateTokenCount() {
   // Debounce token count updates
   if (tokenUpdateTimeout) {
@@ -1653,11 +1661,23 @@ async function updateTokenCount() {
         currentInput
       });
 
-      // Update total display
+      // Update total display with color coding
       const tokenCounter = document.getElementById('token-counter');
       const tokenCountTotal = document.getElementById('token-count-total');
-      tokenCountTotal.textContent = `${tokenData.total} tokens`;
-      tokenCounter.style.display = 'flex';
+      const contextLimit = 200000; // Claude 200k context
+      const percentage = (tokenData.total / contextLimit) * 100;
+
+      // Format: "2.5k / 200k tokens"
+      tokenCountTotal.textContent = `${formatTokenCount(tokenData.total)} / ${formatTokenCount(contextLimit)} tokens`;
+
+      // Apply color coding based on usage
+      if (percentage < 50) {
+        tokenCountTotal.style.color = '#4ade80'; // Green
+      } else if (percentage < 80) {
+        tokenCountTotal.style.color = '#facc15'; // Yellow
+      } else {
+        tokenCountTotal.style.color = '#f87171'; // Red
+      }
 
       // Update breakdown
       document.getElementById('token-system').textContent = tokenData.system_prompt;
@@ -1671,8 +1691,10 @@ async function updateTokenCount() {
       document.getElementById('token-total-detail').textContent = tokenData.total;
     } catch (error) {
       console.error('Failed to update token count:', error);
-      // Hide token counter on error
-      document.getElementById('token-counter').style.display = 'none';
+      // Keep counter visible, just show 0
+      const tokenCountTotal = document.getElementById('token-count-total');
+      tokenCountTotal.textContent = '0 / 200k tokens';
+      tokenCountTotal.style.color = 'var(--text-secondary)';
     }
   }, 300); // Update after 300ms of no typing
 }