feat: Thinking-Blocks inline + Live Tool-Status im Chat [appimage]

- Thinking-Blocks immer sichtbar (kein Collapse), kleine Schrift, dezent
- Inline Tool-Status waehrend Verarbeitung (wie VSCodium Extension)
- currentTool Store fuer Echtzeit-Anzeige (Liest/Bearbeitet/Sucht...)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

scripts/claude-bridge.js

@@ -543,12 +543,11 @@ async function sendMessage(message, requestId, model = null, contextOverride = n
                 fullText += block.text;
                 sendEvent('text', { text: block.text });
               } else if (block.type === 'thinking' && block.thinking) {
-                // Extended Thinking — als kollabierbaren Block im ChatGPT/Claude.ai-Style
+                // Extended Thinking — als kompaktes Inline-Element (immer sichtbar)
-                const thinkLines = block.thinking.split('\n').length;
                 const escaped = block.thinking.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-                const collapsed = `<details class="thinking-block"><summary><svg class="thinking-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a8 8 0 0 0-8 8c0 3.4 2.1 6.3 5 7.4V19a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1.6c2.9-1.1 5-4 5-7.4a8 8 0 0 0-8-8z"/><line x1="9" y1="22" x2="15" y2="22"/></svg><span class="thinking-label">Überlegung</span><span class="thinking-meta">${thinkLines} Zeilen</span><svg class="thinking-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></summary><div class="thinking-content">${escaped}</div></details>\n\n`;
+                const inlineThinking = `<div class="thinking-inline"><span class="thinking-label">\u{1F4AD}</span><span class="thinking-text">${escaped}</span></div>\n\n`;
-                fullText += collapsed;
+                fullText += inlineThinking;
-                sendEvent('text', { text: collapsed });
+                sendEvent('text', { text: inlineThinking });
               } else if (block.type === 'tool_use') {
                 // Tool-Call von Main-Agent — manuell weiterreichen, damit
                 // der tool_use-Case weiter unten greift

src/lib/components/ChatPanel.svelte

@@ -2,6 +2,7 @@
 	import { invoke } from '@tauri-apps/api/core';
 	import { emit } from '@tauri-apps/api/event';
 	import { messages, currentInput, isProcessing, addMessage, currentSessionId, messageToDb, queuedMessage, messageQueue, type Message } from '$lib/stores/app';
+	import { currentTool } from '$lib/stores/events';
 	import { marked, type Tokens } from 'marked';
 	import { tick, onDestroy, onMount } from 'svelte';
 	import { get } from 'svelte/store';
@@ -53,14 +54,22 @@
 	}
 
 	/**
-	 * Erkennt "Denk-Blöcke" im Text und packt sie in kollabierbare Blöcke.
+	 * Erkennt "Denk-Blöcke" im Text und zeigt sie als kompakte Inline-Elemente.
 	 * Zwei Quellen:
-	 * 1. SDK Extended-Thinking (kommt als <details class="thinking-block"> von Bridge)
+	 * 1. SDK Extended-Thinking (kommt als <div class="thinking-inline"> von Bridge)
 	 * 2. Text-basierte Patterns (Lass mich analysieren..., Ich schaue mir...)
 	 */
 	function collapseThinkingBlocks(text: string): string {
-		// Bereits von Bridge als <details> geliefert? Nicht nochmal wrappen.
+		// Bereits von Bridge als inline-div geliefert? Nicht nochmal wrappen.
-		if (text.includes('<details class="thinking-block">')) return text;
+		if (text.includes('<div class="thinking-inline">')) return text;
+
+		// Legacy: Falls noch alte <details> vorhanden, konvertieren
+		if (text.includes('<details class="thinking-block">')) {
+			return text.replace(
+				/<details class="thinking-block">.*?<div class="thinking-content">([\s\S]*?)<\/div><\/details>/g,
+				(_match, content) => `<div class="thinking-inline"><span class="thinking-label">\u{1F4AD}</span><span class="thinking-text">${content}</span></div>`
+			);
+		}
 
 		// Pattern: Text beginnt mit Analyse/Überlegungs-Block, dann kommt die Antwort
 		const thinkingPatterns = [
@@ -72,14 +81,37 @@
 			if (match && match[1] && match[1].split('\n').length > 5) {
 				const thinkingPart = match[1].trim().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 				const answerPart = match[2].trim();
-				const lines = match[1].trim().split('\n').length;
+				return `<div class="thinking-inline"><span class="thinking-label">\u{1F4AD}</span><span class="thinking-text">${thinkingPart}</span></div>\n\n${answerPart}`;
-				return `<details class="thinking-block"><summary><svg class="thinking-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a8 8 0 0 0-8 8c0 3.4 2.1 6.3 5 7.4V19a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1.6c2.9-1.1 5-4 5-7.4a8 8 0 0 0-8-8z"/><line x1="9" y1="22" x2="15" y2="22"/></svg><span class="thinking-label">Überlegung</span><span class="thinking-meta">${lines} Zeilen</span><svg class="thinking-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg></summary><div class="thinking-content">${thinkingPart}</div></details>\n\n${answerPart}`;
 			}
 		}
 
 		return text;
 	}
 
+	// Tool-Aktivitätsanzeige Hilfsfunktionen
+	function getToolIcon(tool: string): string {
+		const icons: Record<string, string> = {
+			'Read': '\u{1F4D6}', 'Write': '\u{270F}\u{FE0F}', 'Edit': '\u{270F}\u{FE0F}',
+			'Bash': '\u{26A1}', 'Grep': '\u{1F50D}', 'Glob': '\u{1F50D}',
+			'Task': '\u{1F916}', 'Agent': '\u{1F916}',
+		};
+		return icons[tool] || '\u{2699}\u{FE0F}';
+	}
+
+	function getToolLabel(tool: string, input: Record<string, unknown> | null): string {
+		if (!input) return `${tool}...`;
+		switch(tool) {
+			case 'Read': return `Liest ${(input.file_path as string)?.split('/').pop() || 'Datei'}...`;
+			case 'Write': return `Schreibt ${(input.file_path as string)?.split('/').pop() || 'Datei'}...`;
+			case 'Edit': return `Bearbeitet ${(input.file_path as string)?.split('/').pop() || 'Datei'}...`;
+			case 'Bash': return `Fuehrt aus: ${((input.command as string) || '').substring(0, 40)}...`;
+			case 'Grep': return `Sucht: ${(input.pattern as string) || ''}...`;
+			case 'Glob': return `Sucht Dateien: ${(input.pattern as string) || ''}...`;
+			case 'Task': case 'Agent': return `Delegiert: ${((input.description as string) || (input.prompt as string) || '').substring(0, 40)}...`;
+			default: return `${tool}...`;
+		}
+	}
+
 	// Svelte Action: Copy-Buttons zu Code-Blöcken hinzufügen
 	function addCopyButtons(node: HTMLElement) {
 		function processCodeBlocks() {
@@ -901,6 +933,17 @@
 									{/if}
 								{/if}
 							{:else if $isProcessing}
+								{#if $currentTool}
+									<div class="tool-status">
+										<span class="tool-icon">{getToolIcon($currentTool.tool)}</span>
+										<span class="tool-label">{getToolLabel($currentTool.tool, $currentTool.input)}</span>
+									</div>
+								{:else}
+									<div class="tool-status">
+										<span class="tool-icon">{'\u{1F9E0}'}</span>
+										<span class="tool-label">Denkt nach...</span>
+									</div>
+								{/if}
 								<span class="typing">
 									<span class="dot"></span>
 									<span class="dot"></span>
@@ -921,12 +964,25 @@
 				<!-- Nur zeigen wenn noch gar keine assistant-message da ist -->
 				<div class="message assistant typing-msg">
 					<div class="message-header">
-						<span class="message-role">🤖 Claude</span>
+						<span class="message-role">{'\u{1F916}'} Claude</span>
 					</div>
-					<div class="message-content typing">
+					<div class="message-content">
+						{#if $currentTool}
+							<div class="tool-status">
+								<span class="tool-icon">{getToolIcon($currentTool.tool)}</span>
+								<span class="tool-label">{getToolLabel($currentTool.tool, $currentTool.input)}</span>
+							</div>
+						{:else}
+							<div class="tool-status">
+								<span class="tool-icon">{'\u{1F9E0}'}</span>
+								<span class="tool-label">Denkt nach...</span>
+							</div>
+						{/if}
+						<span class="typing">
 							<span class="dot"></span>
 							<span class="dot"></span>
 							<span class="dot"></span>
+						</span>
 					</div>
 				</div>
 			{/if}
@@ -1424,101 +1480,70 @@
 		background: var(--bg-hover, #333);
 	}
 
-	/* Thinking-Block — ChatGPT/Claude.ai Style */
+	/* Thinking-Inline — kompakte, immer sichtbare Denkbloecke */
-	.message-content :global(details.thinking-block) {
+	.message-content :global(.thinking-inline) {
-		margin: 8px 0 12px 0;
-		background: #161b27;
-		border: 1px solid #1e2a3a;
-		border-left: 3px solid #374151;
-		border-radius: 8px;
-		overflow: hidden;
-		transition: border-left-color 0.2s ease;
-	}
-
-	.message-content :global(details.thinking-block:hover) {
-		border-left-color: #6366f1;
-	}
-
-	.message-content :global(details.thinking-block[open]) {
-		border-left-color: #6366f1;
-	}
-
-	.message-content :global(details.thinking-block summary) {
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
-		gap: 8px;
+		gap: 0.4rem;
-		padding: 8px 14px;
+		padding: 0.4rem 0.6rem;
-		cursor: pointer;
+		margin: 0.3rem 0;
-		font-size: 12px;
+		background: rgba(99, 102, 241, 0.06);
-		color: #64748b;
+		border-left: 2px solid rgba(99, 102, 241, 0.3);
-		user-select: none;
+		border-radius: 0 4px 4px 0;
-		list-style: none;
+		font-size: 0.72rem;
-		transition: color 0.15s;
+		line-height: 1.4;
-	}
+		color: var(--text-secondary, #9ca3af);
-
-	.message-content :global(details.thinking-block summary::-webkit-details-marker) {
-		display: none;
-	}
-
-	.message-content :global(details.thinking-block summary::marker) {
-		display: none;
-		content: '';
-	}
-
-	.message-content :global(details.thinking-block summary:hover) {
-		color: #94a3b8;
-	}
-
-	.message-content :global(svg.thinking-icon) {
-		width: 14px;
-		height: 14px;
-		color: #6366f1;
-		flex-shrink: 0;
 	}
 
 	.message-content :global(.thinking-label) {
-		font-weight: 500;
-		letter-spacing: 0.02em;
-	}
-
-	.message-content :global(.thinking-meta) {
-		color: #475569;
-		font-size: 11px;
-		margin-left: auto;
-	}
-
-	.message-content :global(svg.thinking-chevron) {
-		width: 12px;
-		height: 12px;
-		transition: transform 0.2s ease;
 		flex-shrink: 0;
+		font-size: 0.7rem;
 	}
 
-	.message-content :global(details.thinking-block[open] svg.thinking-chevron) {
+	.message-content :global(.thinking-text) {
-		transform: rotate(180deg);
-	}
-
-	.message-content :global(.thinking-content) {
-		padding: 0 14px 12px 14px;
-		font-size: 12px;
-		line-height: 1.6;
-		color: #475569;
-		font-family: 'JetBrains Mono', 'Fira Code', monospace;
 		white-space: pre-wrap;
-		max-height: 300px;
+		word-break: break-word;
+		font-family: inherit;
+		max-height: 200px;
 		overflow-y: auto;
-		border-top: 1px solid #1e2a3a;
 	}
 
-	.message-content :global(.thinking-content::-webkit-scrollbar) {
+	.message-content :global(.thinking-text::-webkit-scrollbar) {
 		width: 4px;
 	}
 
-	.message-content :global(.thinking-content::-webkit-scrollbar-thumb) {
+	.message-content :global(.thinking-text::-webkit-scrollbar-thumb) {
 		background: #374151;
 		border-radius: 2px;
 	}
 
+	/* Tool-Aktivitaetsanzeige */
+	.tool-status {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.3rem 0.8rem;
+		margin: 0.2rem 0;
+		font-size: 0.7rem;
+		color: var(--text-secondary, #9ca3af);
+		animation: fadeInTool 0.2s ease;
+	}
+
+	.tool-icon {
+		font-size: 0.75rem;
+	}
+
+	.tool-label {
+		opacity: 0.8;
+		font-family: var(--font-mono, monospace);
+		font-size: 0.65rem;
+	}
+
+	@keyframes fadeInTool {
+		from { opacity: 0; transform: translateY(-4px); }
+		to { opacity: 1; transform: translateY(0); }
+	}
+
 	/* Markdown-Styles innerhalb von Nachrichten */
 	.message-content :global(p) {
 		margin: 0.3em 0;

src/lib/stores/events.ts

@@ -3,7 +3,7 @@
 
 import { listen, type UnlistenFn } from '@tauri-apps/api/event';
 import { invoke } from '@tauri-apps/api/core';
-import { get } from 'svelte/store';
+import { writable, get } from 'svelte/store';
 import {
 	agents,
 	toolCalls,
@@ -31,6 +31,9 @@ import {
 	type AgentMode
 } from './app';
 
+// Aktuell laufendes Tool (für inline Aktivitätsanzeige)
+export const currentTool = writable<{ tool: string; input: Record<string, unknown> } | null>(null);
+
 // Event-Typen vom Backend
 interface AgentEvent {
 	id: string;
@@ -183,6 +186,7 @@ export async function initEventListeners(): Promise<void> {
 			console.log('⏹️ Alle Agents gestoppt');
 			agents.update((ags) => ags.map((a) => ({ ...a, status: 'stopped' as const })));
 			isProcessing.set(false);
+			currentTool.set(null);
 			streamingMessageId = null;
 		})
 	);
@@ -217,6 +221,9 @@ export async function initEventListeners(): Promise<void> {
 			const { tool, input } = event.payload;
 			console.log('🔧 Tool Start:', tool);
 
+			// Inline-Aktivitätsanzeige aktualisieren
+			currentTool.set({ tool: tool || 'unknown', input: input || {} });
+
 			agents.update((ags) => {
 				const activeAgent = ags.find((a) => a.status === 'active');
 				if (activeAgent) {
@@ -264,6 +271,7 @@ export async function initEventListeners(): Promise<void> {
 		await listen<ToolEvent>('tool-end', (event) => {
 			const { id, tool, success, output } = event.payload;
 			console.log('✅ Tool Ende:', id, success ? 'OK' : 'FEHLER');
+			currentTool.set(null);
 			completeToolCall(id, output, !success);
 
 			// Hook: post-tool-use (fire-and-forget, Fehler blockieren nicht)
@@ -406,6 +414,7 @@ export async function initEventListeners(): Promise<void> {
 			// Alle Agents auf "stopped" setzen, aber Messages NICHT löschen
 			agents.update((ags) => ags.map((a) => ({ ...a, status: 'stopped' as const })));
 			toolCalls.set([]);
+			currentTool.set(null);
 			isProcessing.set(false);
 		})
 	);