From 84dc806266c3b75ecf7f9b25e6127937e4e7f938 Mon Sep 17 00:00:00 2001
From: Eddy <eddy@alles-watt-laeuft.de>
Date: Tue, 14 Apr 2026 14:07:39 +0200
Subject: [PATCH] Live Token-Anzeige im Chat-Header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Zeigt geschätzte Token-Anzahl (~X.Xk)
- Farbcodiert: grün < 20k, gelb 20-40k, rot > 40k
- Aktualisiert sich live bei jeder Nachricht

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/lib/components/ChatPanel.svelte | 32 ++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ChatPanel.svelte b/src/lib/components/ChatPanel.svelte
index 0981832..3dfe076 100644
--- a/src/lib/components/ChatPanel.svelte
+++ b/src/lib/components/ChatPanel.svelte
@@ -427,7 +427,12 @@
 <div class="chat-panel">
 	<div class="chat-header">
 		<h2>💬 Chat</h2>
-		<span class="msg-count">{$messages.length} Nachrichten</span>
+		<div class="header-stats">
+			<span class="msg-count">{$messages.length} Nachrichten</span>
+			<span class="token-count" class:warning={estimatedTokens > 20000} class:danger={estimatedTokens > TOKEN_WARNING_THRESHOLD}>
+				~{(estimatedTokens / 1000).toFixed(1)}k Token
+			</span>
+		</div>
 	</div>
 
 	<div class="chat-messages" bind:this={messagesContainer} use:addCopyButtons>
@@ -670,11 +675,36 @@
 		font-weight: 600;
 	}
 
+	.header-stats {
+		display: flex;
+		gap: var(--spacing-sm);
+		align-items: center;
+	}
+
 	.msg-count {
 		font-size: 0.625rem;
 		color: var(--text-secondary);
 	}
 
+	.token-count {
+		font-size: 0.625rem;
+		padding: 0.15rem 0.4rem;
+		border-radius: var(--radius-sm);
+		background: var(--bg-tertiary);
+		color: var(--success);
+		font-weight: 500;
+	}
+
+	.token-count.warning {
+		background: rgba(234, 179, 8, 0.15);
+		color: #eab308;
+	}
+
+	.token-count.danger {
+		background: rgba(239, 68, 68, 0.15);
+		color: var(--error);
+	}
+
 	.chat-messages {
 		flex: 1;
 		overflow-y: auto;