ad9833fcb8
Some checks failed
Build AppImage / build (push) Has been cancelled
Phase 8 (VS-Code-Look Chatbereich): - Linksbuendige Messages mit Avatar-Spalte, Hover-Actions - Inline Tool-Karten (Read/Edit/Bash/Generic) in Assistant-Messages - Edit-Karten zeigen Diff direkt mit Accept/Reject - Tool-Calls werden via events.ts an letzte Assistant-Message gebunden - Smart-Sticky-Scroll (Auto-Scroll stoppt wenn User selbst scrollt) - OOM-Bug durch MutationObserver mit subtree:true behoben Phase 9 (Komplettes UI-Redesign): - Design-System in app.css: 4 Graustufen, 1 Akzent (#007acc), 4 Status-Farben, 5 Schriftgroessen (11/12/13/14/16), 4-Punkt-Spacing, 2 Radius-Werte - vscode.css als Aliase auf das neue System - UI-Library src/lib/ui/: Button, Card, Icon, Badge, StatusDot, Tooltip, Drawer, Tabs - Lucide-svelte fuer SVG-Icons (ersetzt Emojis im Chrome) - StatusBar (22px) ersetzt ueberfuellten Footer mit 6+ Stats - Titlebar entruempelt: ✱-Logo + Stop + Schulungsmodus + Version - 2-spaltiges Layout (Sidebar 240px + Hauptbereich) statt 4-Pane-Zerstueckelung - ToolDrawer: 13 Panels in 4 Gruppen (Aktivitaet/Speicher/Werkzeuge/Einstellungen), jede Gruppe mit internen Tabs, Esc schliesst - Cmd+K global oeffnet QuickActions als zentrale Navigation - StatusDot-Komponente ersetzt Emoji-Status (🟢🟡⚪🔴) in AgentView - Hardgecodete Farben (#ef4444, #22c55e, #eab308 ...) in 9 Komponenten durch CSS-Variablen ersetzt Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
95 lines
2.4 KiB
Svelte
95 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
// Generische Tool-Card fuer alles, was keine eigene Spezialisierung hat
|
|
// (Grep, Glob, WebFetch, WebSearch, MCP-Tools, Task, TodoWrite, ...).
|
|
// Zeigt Input + Result als formatiertes JSON / Text.
|
|
|
|
import ToolCallCard from './ToolCallCard.svelte';
|
|
import type { InlineToolCall } from '$lib/stores';
|
|
|
|
interface Props {
|
|
call: InlineToolCall;
|
|
}
|
|
let { call }: Props = $props();
|
|
|
|
function formatInput(input: Record<string, unknown>): string {
|
|
try {
|
|
return JSON.stringify(input, null, 2);
|
|
} catch {
|
|
return String(input);
|
|
}
|
|
}
|
|
|
|
const inputStr = $derived(formatInput(call.input));
|
|
const showInput = $derived(Object.keys(call.input || {}).length > 0);
|
|
|
|
const MAX_RESULT_LINES = 30;
|
|
const allLines = $derived((call.result || '').split('\n'));
|
|
const visibleLines = $derived(allLines.slice(0, MAX_RESULT_LINES));
|
|
const hiddenCount = $derived(Math.max(0, allLines.length - MAX_RESULT_LINES));
|
|
</script>
|
|
|
|
<ToolCallCard {call}>
|
|
{#snippet children()}
|
|
{#if showInput}
|
|
<details class="input-details">
|
|
<summary>Input</summary>
|
|
<pre class="raw">{inputStr}</pre>
|
|
</details>
|
|
{/if}
|
|
|
|
{#if call.status === 'running'}
|
|
<div class="placeholder">… laeuft …</div>
|
|
{:else if call.result}
|
|
<pre class="raw" class:err={call.status === 'error'}>{visibleLines.join('\n')}</pre>
|
|
{#if hiddenCount > 0}
|
|
<div class="more-hint">… +{hiddenCount} weitere Zeilen</div>
|
|
{/if}
|
|
{/if}
|
|
{/snippet}
|
|
</ToolCallCard>
|
|
|
|
<style>
|
|
.input-details {
|
|
margin-bottom: 6px;
|
|
font-size: 11px;
|
|
}
|
|
.input-details summary {
|
|
cursor: pointer;
|
|
color: var(--vscode-descriptionForeground);
|
|
user-select: none;
|
|
}
|
|
.input-details summary:hover {
|
|
color: var(--vscode-editor-foreground);
|
|
}
|
|
|
|
.raw {
|
|
font-family: var(--font-mono);
|
|
font-size: 11.5px;
|
|
line-height: 1.5;
|
|
background: var(--vscode-terminal-background);
|
|
color: var(--vscode-editor-foreground);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 3px;
|
|
padding: 6px 8px;
|
|
max-height: 280px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.raw.err {
|
|
color: var(--vscode-errorForeground);
|
|
border-color: var(--vscode-errorForeground);
|
|
}
|
|
|
|
.placeholder {
|
|
color: var(--vscode-descriptionForeground);
|
|
font-size: 11.5px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.more-hint {
|
|
font-size: 11px;
|
|
color: var(--vscode-descriptionForeground);
|
|
font-style: italic;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|