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

<script lang="ts">
	// Spezialisierung Read/Glob/NotebookRead
	// Zeigt Inhalt als Code-Block mit Zeilennummern, kollabsbar, Copy-Button.

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

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

	const filePath = $derived((call.input.file_path || call.input.path || '') as string);
	const offset = $derived((call.input.offset as number | undefined) ?? 1);

	// Result kann sehr lang sein — nur erste 40 Zeilen rendern, Rest als "+N weitere"
	const MAX_LINES = 40;
	const allLines = $derived((call.result || '').split('\n'));
	const visibleLines = $derived(allLines.slice(0, MAX_LINES));
	const hiddenCount = $derived(Math.max(0, allLines.length - MAX_LINES));

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

<ToolCallCard {call}>
	{#snippet children()}
		{#if call.status === 'running'}
			<div class="placeholder">… Datei wird gelesen …</div>
		{:else if call.status === 'error'}
			<div class="error-msg">{call.result || 'Fehler beim Lesen'}</div>
		{:else if call.result}
			<div class="actions">
				<button class="action-btn" onclick={copyResult}>
					{copied ? '✓ Kopiert' : '📋 Kopieren'}
				</button>
			</div>
			<pre class="code-block"><code>{#each visibleLines as line, i}<span class="line"><span class="lineno">{offset + i}</span><span class="lineof">│</span><span class="lineco">{line}</span>
</span>{/each}</code></pre>
			{#if hiddenCount > 0}
				<div class="more-hint">… +{hiddenCount} weitere Zeilen</div>
			{/if}
		{:else}
			<div class="placeholder">{filePath}</div>
		{/if}
	{/snippet}
</ToolCallCard>

<style>
	.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);
	}

	.code-block {
		font-family: var(--font-mono);
		font-size: 11.5px;
		line-height: 1.55;
		background: var(--vscode-terminal-background);
		color: var(--vscode-editor-foreground);
		border: 1px solid var(--vscode-input-border);
		border-radius: 3px;
		overflow-x: auto;
		max-height: 360px;
		overflow-y: auto;
		padding: 6px 0;
	}
	.code-block code { background: none; padding: 0; }

	.line {
		display: grid;
		grid-template-columns: 44px 12px 1fr;
		column-gap: 0;
	}
	.lineno {
		color: var(--vscode-editorLineNumber-foreground);
		text-align: right;
		padding-right: 8px;
		user-select: none;
	}
	.lineof {
		color: var(--vscode-editorLineNumber-foreground);
		opacity: 0.5;
		user-select: none;
	}
	.lineco {
		white-space: pre;
		padding-left: 6px;
	}

	.placeholder {
		color: var(--vscode-descriptionForeground);
		font-size: 11.5px;
		font-family: var(--font-mono);
	}
	.error-msg {
		color: var(--vscode-errorForeground);
		font-family: var(--font-mono);
		font-size: 11.5px;
		white-space: pre-wrap;
	}
	.more-hint {
		margin-top: 4px;
		color: var(--vscode-descriptionForeground);
		font-size: 11px;
		font-style: italic;
	}
</style>