src/lib/components/chat/ToolInvocation.svelte

<script lang="ts">
    import { onMount, onDestroy } from "svelte";
    import gsap from "gsap";
    import type { MessageSegment } from "../../stores/agent";

    export let segment: MessageSegment;

    let element: HTMLDivElement;
    let expanded = false;
    let statusIcon: HTMLSpanElement;
    let progressRing: SVGCircleElement;
    let detailsElement: HTMLDivElement;
    let timeline: gsap.core.Timeline | null = null;
    let prevStatus = segment.toolStatus;

    const toolIcons: Record<string, string> = {
        read_editor: "📄",
        write_editor: "✏️",
        observe_console: "📟",
        default: "🔧",
    };

    const statusIcons: Record<string, string> = {
        pending: "⏳",
        running: "⚡",
        completed: "✅",
        error: "❌",
    };

    $: if (segment.toolStatus !== prevStatus && statusIcon) {
        animateStatusChange(prevStatus, segment.toolStatus);
        prevStatus = segment.toolStatus;
    }

    function toggle() {
        expanded = !expanded;
        animateToggle();
    }

    function animateToggle() {
        if (!detailsElement) return;

        if (timeline) timeline.kill();
        timeline = gsap.timeline();

        if (expanded) {
            timeline
                .set(detailsElement, { display: "block" })
                .fromTo(detailsElement,
                    { opacity: 0, height: 0, y: -10 },
                    { opacity: 1, height: "auto", y: 0, duration: 0.3, ease: "power2.out" }
                );
        } else {
            timeline
                .to(detailsElement,
                    { opacity: 0, height: 0, y: -5, duration: 0.2, ease: "power2.in" }
                )
                .set(detailsElement, { display: "none" });
        }
    }

    function animateStatusChange(_from: string | undefined, to: string | undefined) {
        if (!statusIcon || !element) return;

        gsap.timeline()
            .to(statusIcon, {
                scale: 1.3,
                duration: 0.15,
                ease: "power2.in"
            })
            .to(statusIcon, {
                scale: 1,
                duration: 0.15,
                ease: "back.out(2)"
            });

        if (to === "completed") {
            gsap.to(element, {
                borderColor: "rgba(0, 255, 0, 0.3)",
                backgroundColor: "rgba(0, 255, 0, 0.05)",
                duration: 0.3,
                ease: "power2.out"
            });
        } else if (to === "error") {
            gsap.to(element, {
                borderColor: "rgba(255, 0, 0, 0.4)",
                backgroundColor: "rgba(255, 0, 0, 0.1)",
                duration: 0.3,
                ease: "power2.out"
            });
        }

        if (progressRing) {
            if (to === "running") {
                gsap.to(progressRing, {
                    strokeDashoffset: 50,
                    duration: 1,
                    ease: "power2.inOut",
                    repeat: -1,
                    yoyo: true
                });
            } else if (to === "completed") {
                gsap.to(progressRing, {
                    strokeDashoffset: 0,
                    duration: 0.3,
                    ease: "power2.out"
                });
            }
        }
    }

    function formatDuration(): string {
        if (!segment.startTime) return "";
        const duration = (segment.endTime || Date.now()) - segment.startTime;
        if (duration < 1000) {
            return `${duration}ms`;
        }
        return `${(duration / 1000).toFixed(1)}s`;
    }

    onMount(() => {
        gsap.fromTo(
            element,
            { opacity: 0, x: -20, scale: 0.95 },
            {
                opacity: 1,
                x: 0,
                scale: 1,
                duration: 0.4,
                ease: "back.out(1.5)"
            }
        );

        if (segment.toolStatus === "running" && progressRing) {
            gsap.to(progressRing, {
                strokeDashoffset: 50,
                duration: 1,
                ease: "power2.inOut",
                repeat: -1,
                yoyo: true
            });
        }
    });

    onDestroy(() => {
        if (timeline) timeline.kill();
    });
</script>

<div class="tool-invocation {segment.toolStatus}" bind:this={element}>
    <button class="tool-header" on:click={toggle} aria-expanded={expanded}>
        <div class="status-indicator">
            <svg class="progress-ring" width="24" height="24">
                <circle
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="rgba(255, 255, 255, 0.1)"
                    stroke-width="2"
                    fill="none"
                />
                <circle
                    bind:this={progressRing}
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    stroke-width="2"
                    fill="none"
                    stroke-dasharray="62.83"
                    stroke-dashoffset="62.83"
                    transform="rotate(-90 12 12)"
                />
            </svg>
            <span bind:this={statusIcon} class="status-icon">
                {#if segment.toolStatus === "running"}
                    <span class="spinner">{statusIcons[segment.toolStatus || "pending"]}</span>
                {:else}
                    {statusIcons[segment.toolStatus || "pending"]}
                {/if}
            </span>
        </div>
        <span class="tool-icon">{toolIcons[segment.toolName || "default"] || toolIcons.default}</span>
        <span class="tool-name">
            {#if segment.toolStatus === "running"}
                Calling {segment.toolName}...
            {:else if segment.toolStatus === "completed"}
                Called {segment.toolName}
            {:else if segment.toolStatus === "error"}
                Failed to call {segment.toolName}
            {:else}
                Preparing {segment.toolName}...
            {/if}
        </span>
        {#if segment.startTime}
            <span class="duration">{formatDuration()}</span>
        {/if}
        <span class="expand-icon" class:rotated={expanded}>▶</span>
    </button>

    <div bind:this={detailsElement} class="tool-details" style="display: none;">
        {#if segment.toolArgs && Object.keys(segment.toolArgs).length > 0}
            <div class="section-title">Parameters:</div>
            <div class="params">
                {#each Object.entries(segment.toolArgs) as [key, value]}
                    <div class="param">
                        <span class="param-key">{key}:</span>
                        <span class="param-value">
                            {#if typeof value === 'string' && value.length > 100}
                                <pre>{value}</pre>
                            {:else}
                                {JSON.stringify(value)}
                            {/if}
                        </span>
                    </div>
                {/each}
            </div>
        {/if}
        {#if segment.toolOutput || segment.toolResult}
            <div class="section-title">Result:</div>
            <div class="tool-output">
                <pre>{segment.toolOutput || segment.toolResult}</pre>
            </div>
        {/if}
        {#if segment.consoleOutput && segment.consoleOutput.length > 0}
            <div class="section-title">Console Output:</div>
            <div class="console-output">
                {#each segment.consoleOutput as line}
                    <div class="console-line">{line}</div>
                {/each}
            </div>
        {/if}
        {#if segment.toolError}
            <div class="section-title">Error:</div>
            <div class="tool-error">
                {segment.toolError}
            </div>
        {/if}
    </div>
</div>

<style>
    .tool-invocation {
        margin: 0.5rem 0;
        margin-left: 1rem;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid rgba(65, 105, 225, 0.2);
        background: rgba(65, 105, 225, 0.05);
        transition: all 0.2s ease;
    }

    .tool-invocation.running {
        background: rgba(255, 210, 30, 0.08);
        border-color: rgba(255, 210, 30, 0.3);
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.8;
        }
    }

    .tool-invocation.completed {
        background: rgba(0, 255, 0, 0.04);
        border-color: rgba(0, 255, 0, 0.15);
    }

    .tool-invocation.error {
        background: rgba(255, 0, 0, 0.08);
        border-color: rgba(255, 0, 0, 0.3);
    }

    .tool-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.35rem 0.5rem;
        background: transparent;
        border: none;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .tool-header:hover {
        background: rgba(255, 255, 255, 0.02);
    }

    .status-indicator {
        position: relative;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .progress-ring {
        position: absolute;
        top: 0;
        left: 0;
        color: rgba(65, 105, 225, 0.6);
    }

    .tool-invocation.running .progress-ring {
        color: rgba(255, 210, 30, 0.8);
    }

    .tool-invocation.completed .progress-ring {
        color: rgba(0, 255, 0, 0.6);
    }

    .tool-invocation.error .progress-ring {
        color: rgba(255, 0, 0, 0.6);
    }

    .status-icon {
        font-size: 0.85rem;
        position: relative;
        z-index: 1;
    }

    .tool-icon {
        font-size: 0.95rem;
    }

    .tool-name {
        flex: 1;
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.8rem;
    }

    .duration {
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.7rem;
        font-family: "Monaco", "Menlo", monospace;
    }

    .expand-icon {
        font-size: 0.65rem;
        color: rgba(255, 255, 255, 0.4);
        transition: transform 0.2s ease;
    }

    .expand-icon.rotated {
        transform: rotate(90deg);
    }

    .tool-details {
        padding: 0.5rem;
        background: rgba(0, 0, 0, 0.2);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .section-title {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.7rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .params {
        font-family: "Monaco", "Menlo", monospace;
        font-size: 0.75rem;
    }

    .param {
        display: flex;
        gap: 0.5rem;
        margin: 0.2rem 0;
    }

    .param-key {
        color: rgba(255, 255, 255, 0.5);
    }

    .param-value {
        color: rgba(255, 210, 30, 0.8);
        word-break: break-all;
    }

    .param-value pre {
        margin: 0;
        padding: 0.4rem;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 3px;
        font-size: 0.7rem;
        overflow-x: auto;
        max-height: 150px;
    }

    .spinner {
        display: inline-block;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .tool-output {
        margin-top: 0.5rem;
        padding: 0.5rem;
        background: rgba(0, 255, 0, 0.05);
        border: 1px solid rgba(0, 255, 0, 0.1);
        border-radius: 3px;
    }

    .tool-output pre {
        margin: 0;
        font-family: "Monaco", "Menlo", monospace;
        font-size: 0.7rem;
        color: rgba(0, 255, 0, 0.8);
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 200px;
        overflow-y: auto;
    }

    .console-output {
        margin-top: 0.5rem;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 3px;
        padding: 0.4rem;
        font-family: "Monaco", "Menlo", monospace;
        font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.8);
        overflow-x: auto;
        max-height: 200px;
        overflow-y: auto;
    }

    .console-line {
        margin: 0.1rem 0;
    }

    .tool-error {
        margin-top: 0.5rem;
        padding: 0.5rem;
        background: rgba(255, 0, 0, 0.08);
        border: 1px solid rgba(255, 0, 0, 0.2);
        border-radius: 3px;
        color: rgba(255, 100, 100, 0.9);
        font-size: 0.75rem;
        font-family: "Monaco", "Menlo", monospace;
    }
</style>