claude-desktop/src/lib/components/ToolCardBash.svelte

<script lang="ts">
	// Spezialisierung Bash / BashOutput
	// Zeigt Kommando als Zeile + Terminal-Output (monospace, gescrollt).

	import ToolCallCard from './ToolCallCard.svelte';
	import type { InlineToolCall } from '$lib/stores';

	interface Props {
		call: InlineToolCall;
	}
	let { call }: Props = $props();

	const command = $derived((call.input.command as string) || '');
	const description = $derived((call.input.description as string) || '');

	let copied = $state(false);
	async function copyOutput() {
		try {
			await navigator.clipboard.writeText(call.result || '');
			copied = true;
			setTimeout(() => (copied = false), 1500);
		} catch { /* ignore */ }
	}

	// Output kuerzen (Terminal kann beliebig lang werden)
	const MAX_LINES = 50;
	const allLines = $derived((call.result || '').split('\n'));
	const visibleLines = $derived(allLines.slice(-MAX_LINES));
	const hiddenCount = $derived(Math.max(0, allLines.length - MAX_LINES));
</script>

<ToolCallCard {call}>
	{#snippet children()}
		{#if command}
			<div class="cmd-line">
				<span class="prompt">$</span>
				<span class="cmd">{command}</span>
			</div>
		{/if}

		{#if description && description !== command}
			<div class="desc">{description}</div>
		{/if}

		{#if call.status === 'running'}
			<div class="placeholder">… Befehl laeuft …</div>
		{:else if call.result}
			<div class="actions">
				<button class="action-btn" onclick={copyOutput}>
					{copied ? '✓ Kopiert' : '📋 Output kopieren'}
				</button>
			</div>
			{#if hiddenCount > 0}
				<div class="more-hint">… +{hiddenCount} fruehere Zeilen ausgeblendet</div>
			{/if}
			<pre class="terminal" class:err={call.status === 'error'}><code>{visibleLines.join('\n')}</code></pre>
		{/if}
	{/snippet}
</ToolCallCard>

<style>
	.cmd-line {
		font-family: var(--font-mono);
		font-size: 12px;
		color: var(--vscode-editor-foreground);
		display: flex;
		gap: 8px;
		margin-bottom: 4px;
		word-break: break-all;
	}
	.prompt {
		color: var(--vscode-successForeground);
		user-select: none;
	}
	.cmd { white-space: pre-wrap; }

	.desc {
		font-size: 11px;
		color: var(--vscode-descriptionForeground);
		margin-bottom: 6px;
	}

	.actions {
		display: flex;
		justify-content: flex-end;
		gap: 6px;
		margin-bottom: 4px;
	}
	.action-btn {
		font-size: 11px;
		padding: 2px 8px;
		color: var(--vscode-descriptionForeground);
		border-radius: 2px;
		background: transparent;
	}
	.action-btn:hover {
		color: var(--vscode-editor-foreground);
		background: var(--vscode-list-hoverBackground);
	}

	.terminal {
		font-family: var(--font-mono);
		font-size: 11.5px;
		line-height: 1.55;
		background: var(--vscode-terminal-background);
		color: var(--vscode-terminal-foreground);
		border: 1px solid var(--vscode-input-border);
		border-radius: 3px;
		padding: 8px 10px;
		max-height: 300px;
		overflow: auto;
		white-space: pre;
	}
	.terminal.err {
		border-color: var(--vscode-errorForeground);
	}
	.terminal code {
		background: none;
		padding: 0;
	}

	.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-bottom: 4px;
	}
</style>