Live Token-Anzeige im Chat-Header

- 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

@@ -427,7 +427,12 @@
 <div class="chat-panel">
 	<div class="chat-header">
 		<h2>💬 Chat</h2>
+		<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;