From 9fabefc84710e177e9c77d330668dd4f47509727 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 29 Mar 2026 15:17:27 +0300
Subject: [PATCH] feat(llm): minimize context window indicator

---
 .../widgets/type_widgets/llm_chat/LlmChat.css | 45 ++++---------------
 .../widgets/type_widgets/llm_chat/LlmChat.tsx | 39 ++++++++--------
 2 files changed, 26 insertions(+), 58 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css b/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
index 8b9b619b1f..fb8ade6518 100644
--- a/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
+++ b/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.css
@@ -566,41 +566,12 @@
     font-family: var(--monospace-font-family, monospace);
 }
 
-/* Context window indicator */
-.llm-chat-context-window {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.5rem 0;
-    margin-bottom: 0.5rem;
-}
-
-.llm-chat-context-bar {
-    flex: 1;
-    height: 6px;
-    background: var(--accented-background-color);
-    border-radius: 3px;
-    overflow: hidden;
-}
-
-.llm-chat-context-fill {
-    height: 100%;
-    background: var(--main-selection-color, #007bff);
-    border-radius: 3px;
-    transition: width 0.3s ease;
-}
-
-.llm-chat-context-fill.warning {
-    background: var(--warning-color, #f0ad4e);
-}
-
-.llm-chat-context-fill.critical {
-    background: var(--danger-color, #d9534f);
-}
-
-.llm-chat-context-label {
-    font-size: 0.75rem;
-    color: var(--muted-text-color);
-    font-family: var(--monospace-font-family, monospace);
-    white-space: nowrap;
+/* Context window pie indicator */
+.llm-chat-context-pie {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    margin-left: auto;
+    cursor: help;
+    flex-shrink: 0;
 }
diff --git a/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.tsx b/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.tsx
index ab26a24d32..43058d1157 100644
--- a/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.tsx
+++ b/apps/client/src/widgets/type_widgets/llm_chat/LlmChat.tsx
@@ -381,27 +381,6 @@ export default function LlmChat({ note, ntxId, noteContext }: TypeWidgetProps) {
                 )}
                 <div ref={messagesEndRef} />
             </div>
-            {lastPromptTokens > 0 && (() => {
-                const currentModel = availableModels.find(m => m.id === selectedModel);
-                const contextWindow = currentModel?.contextWindow || 200000;
-                const percentage = Math.min((lastPromptTokens / contextWindow) * 100, 100);
-                const isWarning = percentage > 75;
-                const isCritical = percentage > 90;
-
-                return (
-                    <div className="llm-chat-context-window">
-                        <div className="llm-chat-context-bar">
-                            <div
-                                className={`llm-chat-context-fill ${isCritical ? "critical" : isWarning ? "warning" : ""}`}
-                                style={{ width: `${percentage}%` }}
-                            />
-                        </div>
-                        <span className="llm-chat-context-label">
-                            {formatTokenCount(lastPromptTokens)} / {formatTokenCount(contextWindow)} {t("llm_chat.tokens")} ({percentage.toFixed(0)}%)
-                        </span>
-                    </div>
-                );
-            })()}
             <form className="llm-chat-input-form" onSubmit={handleSubmit}>
                 <div className="llm-chat-input-row">
                     <textarea
@@ -466,6 +445,24 @@ export default function LlmChat({ note, ntxId, noteContext }: TypeWidgetProps) {
                         <span className="bx bx-brain" />
                         {t("llm_chat.extended_thinking")}
                     </label>
+                    {lastPromptTokens > 0 && (() => {
+                        const currentModel = availableModels.find(m => m.id === selectedModel);
+                        const contextWindow = currentModel?.contextWindow || 200000;
+                        const percentage = Math.min((lastPromptTokens / contextWindow) * 100, 100);
+                        const isWarning = percentage > 75;
+                        const isCritical = percentage > 90;
+                        const color = isCritical ? "var(--danger-color, #d9534f)" : isWarning ? "var(--warning-color, #f0ad4e)" : "var(--main-selection-color, #007bff)";
+
+                        return (
+                            <div
+                                className="llm-chat-context-pie"
+                                title={`${formatTokenCount(lastPromptTokens)} / ${formatTokenCount(contextWindow)} ${t("llm_chat.tokens")} (${percentage.toFixed(0)}%)`}
+                                style={{
+                                    background: `conic-gradient(${color} ${percentage}%, var(--accented-background-color) ${percentage}%)`
+                                }}
+                            />
+                        );
+                    })()}
                 </div>
             </form>
         </div>