([\s\S]*?)<\/div><\/details>/g,
+ (_match, content) => `
\u{1F4AD} ${content}
`
+ );
+ }
// 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, '&').replace(//g, '>');
const answerPart = match[2].trim();
- const lines = match[1].trim().split('\n').length;
- return `
Überlegung ${lines} Zeilen ${thinkingPart}
\n\n${answerPart}`;
+ return `
\u{1F4AD} ${thinkingPart}
\n\n${answerPart}`;
}
}
return text;
}
+ // Tool-Aktivitätsanzeige Hilfsfunktionen
+ function getToolIcon(tool: string): string {
+ const icons: Record
= {
+ '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 | 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}
+
+ {getToolIcon($currentTool.tool)}
+ {getToolLabel($currentTool.tool, $currentTool.input)}
+
+ {:else}
+
+ {'\u{1F9E0}'}
+ Denkt nach...
+
+ {/if}
-
-
-
-
+
+ {#if $currentTool}
+
+ {getToolIcon($currentTool.tool)}
+ {getToolLabel($currentTool.tool, $currentTool.input)}
+
+ {:else}
+
+ {'\u{1F9E0}'}
+ Denkt nach...
+
+ {/if}
+
+
{/if}
@@ -1424,101 +1480,70 @@
background: var(--bg-hover, #333);
}
- /* Thinking-Block — ChatGPT/Claude.ai Style */
- .message-content :global(details.thinking-block) {
- 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) {
+ /* Thinking-Inline — kompakte, immer sichtbare Denkbloecke */
+ .message-content :global(.thinking-inline) {
display: flex;
- align-items: center;
- gap: 8px;
- padding: 8px 14px;
- cursor: pointer;
- font-size: 12px;
- color: #64748b;
- user-select: none;
- list-style: none;
- transition: color 0.15s;
- }
-
- .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;
+ align-items: flex-start;
+ gap: 0.4rem;
+ padding: 0.4rem 0.6rem;
+ margin: 0.3rem 0;
+ background: rgba(99, 102, 241, 0.06);
+ border-left: 2px solid rgba(99, 102, 241, 0.3);
+ border-radius: 0 4px 4px 0;
+ font-size: 0.72rem;
+ line-height: 1.4;
+ color: var(--text-secondary, #9ca3af);
}
.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) {
- 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;
+ .message-content :global(.thinking-text) {
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;
diff --git a/src/lib/stores/events.ts b/src/lib/stores/events.ts
index b33baa1..6e7784c 100644
--- a/src/lib/stores/events.ts
+++ b/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
} | null>(null);
+
// Event-Typen vom Backend
interface AgentEvent {
id: string;
@@ -183,6 +186,7 @@ export async function initEventListeners(): Promise {
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 {
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 {
await listen('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 {
// 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);
})
);